83:I[903690,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2lwkqp-51vmww.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0tcx-slyeab5h.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2hyyltqc1trts.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/chunks/14o7mx00c0d_j.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0_iottws11i1k.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3cbx1w3tl_otg.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2_vvxgls65u3z.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/00hzog-_vfdpw.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0iiz89c_kj-81.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3lm48l9jlz-7e.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ggwzd8njvoeu.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3kx42pcdprjxa.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2lwkqp-51vmww.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0tcx-slyeab5h.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ghp3isp5v37c.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2hyyltqc1trts.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3_phzuami-4lq.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/328rgsa_b-s69.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/3qfotjwoly3jt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/02pa31waoa745.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/20r8bqclcqlhz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/0l0_hjemd4bbt.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2apqu_n39xv99.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg","/chat-static/_next/static/chunks/2xscq3zmksssz.js?dpl=dpl_75b1yBQuUoZzWu7uUEoPf5tksidg"],"SWRDataProvider"] 85:T2ac72,[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # Digitech GNX3000 Web UI *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/wjkennedys-projects/v0-digitech-gnx-3000-web-ui) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/O0IMSbfD24e) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/wjkennedys-projects/v0-digitech-gnx-3000-web-ui](https://vercel.com/wjkennedys-projects/v0-digitech-gnx-3000-web-ui)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/O0IMSbfD24e](https://v0.app/chat/projects/O0IMSbfD24e)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { GNX3000Editor } from "@/components/gnx3000-editor" export default function Home() { return (

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/connection-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Cable, Music2, AlertCircle, AlertTriangle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" import { Progress } from "@/components/ui/progress" interface ConnectionPanelProps { isConnected: boolean onRequestBulkDump?: () => void isBulkDumpActive?: boolean bulkDumpProgress?: { current: number; total: number } midi: { connect: () => Promise disconnect: () => void isSupported: boolean devices: Array<{ id: string; name: string; manufacturer: string }> error: string | null } } export function ConnectionPanel({ isConnected, onRequestBulkDump, isBulkDumpActive, bulkDumpProgress, midi, }: ConnectionPanelProps) { const [open, setOpen] = useState(false) const handleMIDIConnect = async () => { console.log("[v0] ConnectionPanel: Attempting MIDI connection...") const success = await midi.connect() if (success) { console.log("[v0] ConnectionPanel: MIDI connected successfully") setOpen(false) } else { console.log("[v0] ConnectionPanel: MIDI connection failed") } } const handleDisconnect = () => { console.log("[v0] ConnectionPanel: Disconnecting MIDI") midi.disconnect() } return ( <> {isConnected ? (

{isBulkDumpActive && bulkDumpProgress && bulkDumpProgress.total > 0 ? (

Receiving Bulk Dump {bulkDumpProgress.current} / {bulkDumpProgress.total}

) : ( To load patches: Press UTILITY → MIDI → Bulk Dump on your GNX3000 )}

) : ( )} ) } [V0_FILE]typescriptreact:file="components/midi-monitor.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Terminal, Trash2 } from "lucide-react" interface MIDIMessage { id: number timestamp: string direction: "sent" | "received" data: number[] description: string } interface MIDIMonitorProps { messages: MIDIMessage[] onClear: () => void } export function MIDIMonitor({ messages, onClear }: MIDIMonitorProps) { const formatBytes = (data: number[]) => { return data.map((byte) => byte.toString(16).padStart(2, "0").toUpperCase()).join(" ") } const getMessageDescription = (data: number[]) => { if (data.length === 0) return "Empty message" // SysEx message if (data[0] === 0xf0) { if (data.length < 4) return "SysEx (incomplete)" // Check for DigiTech manufacturer ID (00 00 10) if (data[1] === 0x00 && data[2] === 0x00 && data[3] === 0x10) { if (data.length > 4) { const command = data[4] switch (command) { case 0x01: return "SysEx: Patch Dump Request" case 0x02: return "SysEx: Patch Dump" case 0x03: return "SysEx: Patch Name Request" case 0x04: return "SysEx: Patch Name" case 0x05: return "SysEx: Current Patch Request" default: return `SysEx: DigiTech Command 0x${command.toString(16)}` } } return "SysEx: DigiTech" } return "SysEx: Unknown Manufacturer" } // Standard MIDI messages const status = data[0] & 0xf0 const channel = (data[0] & 0x0f) + 1 switch (status) { case 0x80: return `Note Off (Ch ${channel})` case 0x90: return `Note On (Ch ${channel})` case 0xb0: return `Control Change (Ch ${channel})` case 0xc0: return `Program Change (Ch ${channel})` case 0xe0: return `Pitch Bend (Ch ${channel})` default: return `MIDI Message 0x${status.toString(16)}` } } return (

MIDI Monitor

{messages.length} messages

{messages.length === 0 ? (

No MIDI messages yet. Connect your device and start communicating.

) : ( messages.map((msg) => (

{msg.direction === "sent" ? "→ SENT" : "← RECV"} {msg.timestamp}

{msg.data.length} bytes

{msg.description}

{formatBytes(msg.data)}

)) )}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Card({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import { XIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Dialog({ ...props }: React.ComponentProps) { return } function DialogTrigger({ ...props }: React.ComponentProps) { return } function DialogPortal({ ...props }: React.ComponentProps) { return } function DialogClose({ ...props }: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function DialogContent({ className, children, showCloseButton = true, ...props }: React.ComponentProps & { showCloseButton?: boolean }) { return ( {children} {showCloseButton && ( Close )} ) } function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from 'react' import { cn } from '@/lib/utils' function Input({ className, type, ...props }: React.ComponentProps<'input'>) { return ( ) } export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" 'use client' import * as React from 'react' import * as LabelPrimitive from '@radix-ui/react-label' import { cn } from '@/lib/utils' function Label({ className, ...props }: React.ComponentProps) { return ( ) } export { Label } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" 'use client' import * as React from 'react' import * as ProgressPrimitive from '@radix-ui/react-progress' import { cn } from '@/lib/utils' function Progress({ className, value, ...props }: React.ComponentProps) { return ( ) } export { Progress } [V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true" 'use client' import * as React from 'react' import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area' import { cn } from '@/lib/utils' function ScrollArea({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function ScrollBar({ className, orientation = 'vertical', ...props }: React.ComponentProps) { return ( ) } export { ScrollArea, ScrollBar } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SelectPrimitive from '@radix-ui/react-select' import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ ...props }: React.ComponentProps) { return } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = 'default', children, ...props }: React.ComponentProps & { size?: 'sm' | 'default' }) { return ( {children} ) } function SelectContent({ className, children, position = 'popper', ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SliderPrimitive from '@radix-ui/react-slider' import { cn } from '@/lib/utils' function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps) { const _values = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max], ) return ( {Array.from({ length: _values.length }, (_, index) => ( ))} ) } export { Slider } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true" 'use client' import * as React from 'react' import * as SwitchPrimitive from '@radix-ui/react-switch' import { cn } from '@/lib/utils' function Switch({ className, ...props }: React.ComponentProps) { return ( ) } export { Switch } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" 'use client' import * as React from 'react' import * as TabsPrimitive from '@radix-ui/react-tabs' import { cn } from '@/lib/utils' function Tabs({ className, ...props }: React.ComponentProps) { return ( ) } function TabsList({ className, ...props }: React.ComponentProps) { return ( ) } function TabsTrigger({ className, ...props }: React.ComponentProps) { return ( ) } function TabsContent({ className, ...props }: React.ComponentProps) { return ( ) } export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="hooks/use-web-midi.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useCallback, useEffect, useRef } from "react" interface MIDIDevice { id: string name: string manufacturer: string } export function useWebMIDI() { const [midiAccess, setMidiAccess] = useState(null) const [devices, setDevices] = useState([]) const [isSupported] = useState(() => "requestMIDIAccess" in navigator) const [selectedInput, setSelectedInput] = useState(null) const [selectedOutput, setSelectedOutput] = useState(null) const [error, setError] = useState(null) const [isInitialized, setIsInitialized] = useState(false) const [lastReceivedData, setLastReceivedData] = useState(null) const onMessageCallbackRef = useRef<((data: Uint8Array) => void) | null>(null) useEffect(() => { if (!selectedInput) return const handler = (event: MIDIMessageEvent) => { const data = new Uint8Array(event.data) console.log("[v0] MIDI Hook: Raw message received, length:", data.length) setLastReceivedData(data) // Call the callback if it exists if (onMessageCallbackRef.current) { console.log("[v0] MIDI Hook: Calling message callback") onMessageCallbackRef.current(data) } else { console.log("[v0] MIDI Hook: No callback registered!") } } console.log("[v0] MIDI Hook: Attaching message handler to", selectedInput.name) selectedInput.onmidimessage = handler return () => { console.log("[v0] MIDI Hook: Detaching message handler") if (selectedInput) { selectedInput.onmidimessage = null } } }, [selectedInput]) const initMIDI = useCallback(async () => { if (!isSupported) { setError("Web MIDI API is not supported in this browser") return false } if (isInitialized && midiAccess) { console.log("[v0] MIDI Hook: Already initialized") return true } try { console.log("[v0] MIDI Hook: Requesting MIDI access...") const access = await navigator.requestMIDIAccess({ sysex: true }) setMidiAccess(access) setError(null) setIsInitialized(true) const deviceList: MIDIDevice[] = [] access.inputs.forEach((input) => { deviceList.push({ id: input.id, name: input.name || "Unknown Device", manufacturer: input.manufacturer || "Unknown", }) }) setDevices(deviceList) console.log("[v0] MIDI Hook: Initialized, found", deviceList.length, "device(s)") return true } catch (error) { const errorMessage = error instanceof Error ? error.message : "Unknown error" console.error("[v0] MIDI Hook: Initialization error:", errorMessage) if (errorMessage.includes("permissions policy")) { setError("MIDI access blocked by permissions policy. This will work when deployed.") } else { setError(errorMessage) } return false } }, [isSupported, isInitialized, midiAccess]) const connect = useCallback(async () => { console.log("[v0] MIDI Hook: connect() called") const initialized = await initMIDI() if (!initialized || !midiAccess) { console.log("[v0] MIDI Hook: Initialization failed") return false } try { const inputs = Array.from(midiAccess.inputs.values()) const outputs = Array.from(midiAccess.outputs.values()) console.log("[v0] MIDI Hook: Found", inputs.length, "input(s) and", outputs.length, "output(s)") if (inputs.length > 0 && outputs.length > 0) { const input = inputs[0] const output = outputs[0] console.log("[v0] MIDI Hook: Connecting to:", input.name) setSelectedInput(input) setSelectedOutput(output) return true } else { setError("No MIDI devices found. Please connect your GNX3000.") return false } } catch (error) { console.error("[v0] MIDI Hook: Connection error:", error) setError("Failed to connect to MIDI device") return false } }, [initMIDI, midiAccess]) const disconnect = useCallback(() => { console.log("[v0] MIDI Hook: Disconnecting") if (selectedInput) { selectedInput.onmidimessage = null setSelectedInput(null) } setSelectedOutput(null) }, [selectedInput]) const send = useCallback( (data: Uint8Array) => { if (!selectedOutput) { console.error("[v0] MIDI Hook: Cannot send - no output selected") return false } try { console.log( "[v0] MIDI Hook: Sending", data.length, "bytes:", Array.from(data) .map((b) => b.toString(16).padStart(2, "0")) .join(" "), ) selectedOutput.send(data) console.log("[v0] MIDI Hook: ✓ Sent successfully") return true } catch (error) { console.error("[v0] MIDI Hook: Send error:", error) return false } }, [selectedOutput], ) const sendSysEx = useCallback( (data: Uint8Array) => { return send(data) }, [send], ) const setMessageHandler = useCallback((callback: (data: Uint8Array) => void) => { console.log("[v0] MIDI Hook: Message handler registered") onMessageCallbackRef.current = callback }, []) const isConnected = !!(selectedInput && selectedOutput) return { connect, disconnect, send, // Export the generic send method sendSysEx, setMessageHandler, lastReceivedData, isSupported, devices, isConnected, error, } } [V0_FILE]typescript:file="hooks/use-web-serial.ts" isMerged="true" "use client" import { useState, useCallback } from "react" export function useWebSerial() { const [port, setPort] = useState(null) const [isSupported] = useState(() => "serial" in navigator) const connect = useCallback(async () => { if (!isSupported) return false try { const selectedPort = await navigator.serial.requestPort() await selectedPort.open({ baudRate: 31250 }) // MIDI baud rate setPort(selectedPort) console.log("[v0] Serial port connected") return true } catch (error) { console.error("[v0] Serial connection error:", error) return false } }, [isSupported]) const disconnect = useCallback(async () => { if (port) { try { await port.close() setPort(null) console.log("[v0] Serial port disconnected") } catch (error) { console.error("[v0] Serial disconnect error:", error) } } }, [port]) const sendData = useCallback( async (data: Uint8Array) => { if (!port) return false try { const writer = port.writable?.getWriter() if (writer) { await writer.write(data) writer.releaseLock() console.log("[v0] Data sent via serial:", data) return true } } catch (error) { console.error("[v0] Serial send error:", error) } return false }, [port], ) return { connect, disconnect, sendData, isSupported, isConnected: !!port, } } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, async headers() { return [ { source: '/:path*', headers: [ { key: 'Permissions-Policy', value: 'midi=(self)', }, ], }, ] }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "latest", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]css:file="styles/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]plaintext:file="public/fonts/DSEG14Classic-Italic.woff" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/qZJBi6zgRePvsqXPY7yAdA/public/fonts/DSEG14Classic-Italic.woff" isMerged="true" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_m6LGGTY3GXH2ku0BXfae20TUfELt/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" import { Suspense } from "react" import { Geist, Geist_Mono, Source_Serif_4 } from "next/font/google" // Initialize fonts const _geist = Geist({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"] }) const _geistMono = Geist_Mono({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], }) const _sourceSerif_4 = Source_Serif_4({ subsets: ["latin"], weight: ["200", "300", "400", "500", "600", "700", "800", "900"], }) const geist = Geist({ subsets: ["latin"], variable: "--font-geist-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", }) export const metadata: Metadata = { title: "GNX3000 Web Editor", description: "DigiTech GNX3000 Guitar Workstation Web Editor", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( Loading...

}>{children} ) } [V0_FILE]typescriptreact:file="components/patch-library.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { Database, Search, Upload, Download } from "lucide-react" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { exportAllPatches } from "@/lib/gnx3000-patch" interface PatchLibraryProps { patches: Map currentPatchNumber: number onLoadPatch: (patch: GNX3000Patch) => void onSendPatch: (patch: GNX3000Patch) => void isConnected: boolean } export function PatchLibrary({ patches, currentPatchNumber, onLoadPatch, onSendPatch, isConnected, }: PatchLibraryProps) { const [searchTerm, setSearchTerm] = useState("") const [isExporting, setIsExporting] = useState(false) const filteredPatches = Array.from(patches.values()).filter((patch) => patch.patchName.toLowerCase().includes(searchTerm.toLowerCase()), ) const sortedPatches = filteredPatches.sort((a, b) => a.patchNumber - b.patchNumber) const handleExportAll = async () => { setIsExporting(true) try { await exportAllPatches(patches) } catch (error) { console.error("[v0] Error exporting patches:", error) } finally { setIsExporting(false) } } return (

Patch Library

({patches.size} patches)

{patches.size > 0 && ( )}

setSearchTerm(e.target.value)} className="pl-10" />

{sortedPatches.length === 0 ? (

No patches in library

Use "Request Bulk Dump" to load patches from device

) : ( sortedPatches.map((patch) => (

onLoadPatch(patch)} className={`flex items-center justify-between p-3 rounded-lg border transition-colors cursor-pointer ${ patch.patchNumber === currentPatchNumber ? "bg-primary/10 border-primary" : "bg-secondary/50 border-border hover:bg-secondary" }`} >

{patch.patchNumber.toString().padStart(2, "0")}

{patch.patchName}

{patch.amp.model} • {patch.stompbox.type}

)) )}

) } [V0_FILE]typescript:file="lib/gdigi-sysex.ts" isEdit="true" isMerged="true" export function calculateChecksum(byteArray: Uint8Array | number[], start: number, end: number): number { let cs = 0 for (let i = start; i < end; i++) cs ^= byteArray[i] return cs & 0xff } export function packData(rawBytes: Uint8Array): Uint8Array { const len = rawBytes.length const blocks = Math.floor((len + 6) / 7) const out = new Uint8Array(len + blocks) let outIdx = 0 let srcIdx = 0 while (srcIdx < len) { let status = 0 const outIdxPosition = outIdx // Fixed: declare variable outIdx += 1 for (let x = 0; x < 7 && srcIdx < len; x++, srcIdx++) { const b = rawBytes[srcIdx] & 0xff out[outIdx++] = b & 0x7f status |= (b & 0x80) >>> (x + 1) } out[outIdxPosition] = status & 0x7f } return out } export function unpackData(packedBytes: Uint8Array): Uint8Array { const len = packedBytes.length const approx = Math.floor((len * 7) / 8) + 8 const out = new Uint8Array(approx) let outIdx = 0 let i = 0 while (i < len) { const status = packedBytes[i++] for (let x = 0; x < 7 && i < len; x++, i++) { const db = packedBytes[i] const highBit = ((status << (x + 1)) & 0x80) >>> 0 out[outIdx++] = (highBit | (db & 0x7f)) & 0xff } } return out.subarray(0, outIdx) } export function buildSysEx({ deviceId = 0x7f, familyId = 0x7f, productId = 0x7f, procedure, payloadRaw, }: { deviceId?: number familyId?: number productId?: number procedure: number payloadRaw: Uint8Array | number[] }): Uint8Array { if (typeof procedure !== "number") throw new Error("procedure required") const header = [0xf0, 0x00, 0x00, 0x10, deviceId & 0xff, familyId & 0xff, productId & 0xff, procedure & 0xff] const raw = payloadRaw instanceof Uint8Array ? payloadRaw : Uint8Array.from(payloadRaw || []) const packed = packData(raw) const body = new Uint8Array(header.length + packed.length + 1 + 1) body.set(header, 0) body.set(packed, header.length) const checksum = calculateChecksum(body, 1, header.length + packed.length) body[header.length + packed.length] = checksum & 0xff body[header.length + packed.length + 1] = 0xf7 return body } export function parseSysEx(messageBytes: Uint8Array): { manufacturer: number[] deviceId: number familyId: number productId: number procedure: number payload: Uint8Array } { if (!(messageBytes instanceof Uint8Array)) messageBytes = Uint8Array.from(messageBytes) if (messageBytes.length < 9) throw new Error("message too short") if (messageBytes[0] !== 0xf0) throw new Error("invalid start byte") if (messageBytes[messageBytes.length - 1] !== 0xf7) throw new Error("invalid end byte") const manufacturer = [messageBytes[1], messageBytes[2], messageBytes[3]] const deviceId = messageBytes[4] const familyId = messageBytes[5] const productId = messageBytes[6] const procedure = messageBytes[7] const checksumReceived = messageBytes[messageBytes.length - 2] const checksumCalc = calculateChecksum(messageBytes, 1, messageBytes.length - 2) if ((checksumReceived & 0xff) !== (checksumCalc & 0xff)) { throw new Error(`checksum mismatch: received ${checksumReceived.toString(16)} vs calc ${checksumCalc.toString(16)}`) } const packedStart = 8 const packedEnd = messageBytes.length - 2 const packedPart = messageBytes.subarray(packedStart, packedEnd) const unpacked = unpackData(packedPart) return { manufacturer, deviceId, familyId, productId, procedure, payload: unpacked, } } [V0_FILE]typescript:file="lib/gnx3000-patch.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { getMessageId, RECEIVE_PRESET_DATA, createPresetNamesRequest, createCurrentPatchRequest as createCurrentPatchRequestMIDI, SYSEX_START, SYSEX_END, DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, GNX3000_PRODUCT_ID, SEND_PRESET_START, SEND_PRESET_END, pack7bit, } from "./gnx3000-midi" import { parseSysEx } from "./gdigi-sysex" import type { PresetParameter } from "./gnx3000-preset" import { encodePresetToSysEx } from "./gnx3000-preset" // GNX3000 Patch Data Structure export interface Patch { patchNumber: number patchName: string rawSysExData?: Uint8Array // Store raw SysEx data for exact backup/restore parameters?: PresetParameter[] // Store all parameter triplets for advanced editing // Amp settings amp: { model: string gain: number level: number bass: number mid: number treble: number presence: number cabinet: string } // Stompbox settings stompbox: { type: string enabled: boolean drive: number tone: number level: number } // Wah settings wah: { type: string enabled: boolean frequency: number resonance: number sensitivity: number range: number } // Modulation settings modulation: { type: string enabled: boolean speed: number depth: number feedback: number } // Delay settings delay: { type: string enabled: boolean time: number feedback: number level: number } // Reverb settings reverb: { type: string enabled: boolean decay: number tone: number level: number } } export function createDefaultPatch(patchNumber: number): Patch { return { patchNumber, patchName: `INIT PATCH`, amp: { model: "Clean", gain: 50, level: 75, bass: 50, mid: 50, treble: 50, presence: 50, cabinet: "4x12", }, stompbox: { type: "Overdrive", enabled: false, drive: 50, tone: 50, level: 75, }, wah: { type: "Manual Wah", enabled: false, frequency: 50, resonance: 65, sensitivity: 70, range: 80, }, modulation: { type: "Chorus", enabled: false, speed: 50, depth: 50, feedback: 0, }, delay: { type: "Digital", enabled: false, time: 300, feedback: 30, level: 50, }, reverb: { type: "Hall", enabled: false, decay: 50, tone: 50, level: 40, }, } } export function parsePresetData(data: Uint8Array): Patch | null { const msgId = getMessageId(data) if (msgId !== RECEIVE_PRESET_DATA) return null console.log("[v0] Parsing 0x55 PRESET_DATA message, length:", data.length) try { const parsed = parseSysEx(data) const payload = parsed.payload console.log("[v0] Unpacked payload length:", payload.length, "bytes") console.log( "[v0] First 64 unpacked bytes:", Array.from(payload.slice(0, 64)) .map((b) => b.toString(16).padStart(2, "0")) .join(" "), ) // The payload structure for 0x55 messages: // Byte 0: sub-bank // Byte 1: bank // Byte 2: unknown // Bytes 3-4: preset number (little-endian) // Bytes 5-16: preset name (12 bytes with null in middle) // Bytes 17+: parameter triplets (id, position, value) const subBank = payload[0] const bank = payload[1] const presetWithinBank = payload[3] // Low byte of preset number const categoryByte = payload[4] // High byte (category marker) const displayNumber = bank * 64 + presetWithinBank + 1 const nameBytes = payload.slice(5, 17) let name = "" for (let i = 0; i < nameBytes.length; i++) { if (nameBytes[i] === 0) { name += " " } else if (nameBytes[i] >= 32 && nameBytes[i] <= 126) { name += String.fromCharCode(nameBytes[i]) } } name = name.trim() // Skip category markers if (categoryByte > 0 && name.length > 0) { const isCategoryMarker = /^[A-Z]{3}\s[A-Z0-9]{5}$/.test(name) if (isCategoryMarker) { console.log(`[v0] Skipping category marker: "${name}"`) return null } } console.log(`[v0] Preset: Bank ${bank}, Preset ${presetWithinBank}, Display# ${displayNumber}, Name: "${name}"`) const paramStart = 17 const paramBytes = payload.slice(paramStart) const parameters: PresetParameter[] = [] for (let i = 0; i + 2 < paramBytes.length; i += 3) { parameters.push({ id: paramBytes[i], position: paramBytes[i + 1], value: paramBytes[i + 2], }) } console.log(`[v0] Extracted ${parameters.length} parameter triplets`) console.log(`[v0] First 10 parameters:`, parameters.slice(0, 10)) const patch = createDefaultPatch(displayNumber) patch.patchName = name patch.rawSysExData = data patch.parameters = parameters for (const param of parameters) { // Position 1 typically indicates amp/preamp section if (param.position === 1) { // Common amp parameter IDs (these are educated guesses) if (param.id >= 0 && param.id <= 10) { if (param.id === 0) patch.amp.gain = Math.round((param.value / 127) * 100) if (param.id === 1) patch.amp.level = Math.round((param.value / 127) * 100) if (param.id === 2) patch.amp.bass = Math.round((param.value / 127) * 100) if (param.id === 3) patch.amp.mid = Math.round((param.value / 127) * 100) if (param.id === 4) patch.amp.treble = Math.round((param.value / 127) * 100) if (param.id === 5) patch.amp.presence = Math.round((param.value / 127) * 100) } } // Position 2 might be stompbox else if (param.position === 2) { if (param.id === 0) patch.stompbox.enabled = param.value > 0 if (param.id === 1) patch.stompbox.drive = Math.round((param.value / 127) * 100) if (param.id === 2) patch.stompbox.tone = Math.round((param.value / 127) * 100) if (param.id === 3) patch.stompbox.level = Math.round((param.value / 127) * 100) } // Position 3 might be wah effect else if (param.position === 3) { if (param.id === 0) patch.wah.enabled = param.value > 0 if (param.id === 1) patch.wah.frequency = Math.round((param.value / 127) * 100) if (param.id === 2) patch.wah.resonance = Math.round((param.value / 127) * 100) if (param.id === 3) patch.wah.sensitivity = Math.round((param.value / 127) * 100) if (param.id === 4) patch.wah.range = Math.round((param.value / 127) * 100) } // Position 4 might be modulation else if (param.position === 4) { if (param.id === 0) patch.modulation.enabled = param.value > 0 if (param.id === 1) patch.modulation.speed = Math.round((param.value / 127) * 100) if (param.id === 2) patch.modulation.depth = Math.round((param.value / 127) * 100) if (param.id === 3) patch.modulation.feedback = Math.round((param.value / 127) * 100) } // Position 5 might be delay else if (param.position === 5) { if (param.id === 0) patch.delay.enabled = param.value > 0 if (param.id === 1) patch.delay.time = Math.round((param.value / 127) * 1000) if (param.id === 2) patch.delay.feedback = Math.round((param.value / 127) * 100) if (param.id === 3) patch.delay.level = Math.round((param.value / 127) * 100) } // Position 6 might be reverb else if (param.position === 6) { if (param.id === 0) patch.reverb.enabled = param.value > 0 if (param.id === 1) patch.reverb.decay = Math.round((param.value / 127) * 100) if (param.id === 2) patch.reverb.tone = Math.round((param.value / 127) * 100) if (param.id === 3) patch.reverb.level = Math.round((param.value / 127) * 100) } } console.log("[v0] Parsed patch:", patch.patchName, "with", parameters.length, "parameters") console.log("[v0] Mapped values - Amp gain:", patch.amp.gain, "level:", patch.amp.level) return patch } catch (error) { console.error("[v0] Error parsing SysEx:", error) return null } } export async function savePatchToFile(patch: Patch): Promise { if (patch.rawSysExData) { const syxBlob = new Blob([patch.rawSysExData], { type: "application/octet-stream" }) const syxUrl = URL.createObjectURL(syxBlob) const syxLink = document.createElement("a") syxLink.href = syxUrl syxLink.download = `GNX3000_Patch_${patch.patchNumber.toString().padStart(2, "0")}_${patch.patchName.replace(/\s+/g, "_")}.syx` document.body.appendChild(syxLink) syxLink.click() document.body.removeChild(syxLink) URL.revokeObjectURL(syxUrl) console.log("[v0] Saved raw SysEx file for patch", patch.patchNumber) } const jsonData = { ...patch, rawSysExData: patch.rawSysExData ? Array.from(patch.rawSysExData) : undefined, } const json = JSON.stringify(jsonData, null, 2) const jsonBlob = new Blob([json], { type: "application/json" }) const jsonUrl = URL.createObjectURL(jsonBlob) const jsonLink = document.createElement("a") jsonLink.href = jsonUrl jsonLink.download = `GNX3000_Patch_${patch.patchNumber.toString().padStart(2, "0")}_${patch.patchName.replace(/\s+/g, "_")}.json` document.body.appendChild(jsonLink) jsonLink.click() document.body.removeChild(jsonLink) URL.revokeObjectURL(jsonUrl) console.log("[v0] Saved JSON metadata file for patch", patch.patchNumber) } export async function loadPatchFromFile(file: File): Promise { console.log("[v0] Loading patch from file:", file.name, "type:", file.type) try { if (file.name.endsWith(".syx")) { // Load raw SysEx file const arrayBuffer = await file.arrayBuffer() const data = new Uint8Array(arrayBuffer) console.log("[v0] Loaded .syx file, size:", data.length, "bytes") // Parse the SysEx data const patch = parsePresetData(data) if (patch) { console.log("[v0] Successfully parsed SysEx file:", patch.patchName) return patch } else { console.error("[v0] Failed to parse SysEx file") return null } } else if (file.name.endsWith(".json")) { // Load JSON file const text = await file.text() const jsonData = JSON.parse(text) console.log("[v0] Loaded .json file:", jsonData.patchName) // Reconstruct the patch const patch: Patch = { ...jsonData, rawSysExData: jsonData.rawSysExData ? new Uint8Array(jsonData.rawSysExData) : undefined, } console.log("[v0] Successfully loaded patch from JSON:", patch.patchName) return patch } else { console.error("[v0] Unsupported file type:", file.name) return null } } catch (error) { console.error("[v0] Error loading patch file:", error) return null } } export function sendRawSysExToDevice(patch: Patch): Uint8Array | null { if (!patch.rawSysExData) { console.log("[v0] No raw SysEx data available for patch", patch.patchNumber) return null } console.log("[v0] Sending raw SysEx data for patch", patch.patchNumber, "size:", patch.rawSysExData.length, "bytes") return patch.rawSysExData } export function createCurrentPatchRequest(): Uint8Array { return createCurrentPatchRequestMIDI() } export function createPatchNameRequest(patchNumber: number): Uint8Array { // GNX3000 uses bank 0x02 for user presets (1-65) const bank = 0x02 return createPresetNamesRequest(bank) } export function createSendPatchMessages(patch: Patch): Uint8Array[] { const messages: Uint8Array[] = [] // If we have raw SysEx data, we could send that directly // But for now, we'll create the messages from the patch structure // Message 1: SEND_PRESET_START const patchNum = patch.patchNumber - 1 // Convert to 0-based const nameBytes = new Array(16).fill(0) for (let i = 0; i < Math.min(patch.patchName.length, 16); i++) { nameBytes[i] = patch.patchName.charCodeAt(i) } const startData = [ 0x02, // bank (user) patchNum, ...nameBytes, ] const packedStart = pack7bit(startData) const startMsg = new Uint8Array([ SYSEX_START, ...DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, GNX3000_PRODUCT_ID, SEND_PRESET_START, ...packedStart, SYSEX_END, ]) messages.push(startMsg) // Message 2: SEND_PRESET_PARAMETERS // This would contain the actual parameter data // For now, we'll create the messages from the patch structure // Message 3: SEND_PRESET_END const endMsg = new Uint8Array([ SYSEX_START, ...DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, GNX3000_PRODUCT_ID, SEND_PRESET_END, SYSEX_END, ]) messages.push(endMsg) console.log("[v0] Created", messages.length, "SysEx messages for patch", patch.patchNumber) return messages } export async function exportAllPatches(patches: Map): Promise { console.log(`[v0] Exporting ${patches.size} patches as single library file...`) // Collect all raw SysEx data const allSysExData: Uint8Array[] = [] const allPatchMetadata: any[] = [] for (const patch of patches.values()) { if (patch.rawSysExData) { allSysExData.push(patch.rawSysExData) } // Collect metadata for JSON export allPatchMetadata.push({ patchNumber: patch.patchNumber, patchName: patch.patchName, amp: patch.amp, stompbox: patch.stompbox, wah: patch.wah, modulation: patch.modulation, delay: patch.delay, reverb: patch.reverb, }) } // Concatenate all SysEx messages into a single file if (allSysExData.length > 0) { const totalLength = allSysExData.reduce((sum, data) => sum + data.length, 0) const libraryData = new Uint8Array(totalLength) let offset = 0 for (const data of allSysExData) { libraryData.set(data, offset) offset += data.length } // Save the combined SysEx library file const syxBlob = new Blob([libraryData], { type: "application/octet-stream" }) const syxUrl = URL.createObjectURL(syxBlob) const syxLink = document.createElement("a") syxLink.href = syxUrl const timestamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, -5) syxLink.download = `GNX3000_Library_${timestamp}.syx` document.body.appendChild(syxLink) syxLink.click() document.body.removeChild(syxLink) URL.revokeObjectURL(syxUrl) console.log(`[v0] Saved library SysEx file with ${allSysExData.length} patches (${totalLength} bytes)`) } // Save metadata as JSON const jsonData = { exportDate: new Date().toISOString(), patchCount: patches.size, patches: allPatchMetadata, } const json = JSON.stringify(jsonData, null, 2) const jsonBlob = new Blob([json], { type: "application/json" }) const jsonUrl = URL.createObjectURL(jsonBlob) const jsonLink = document.createElement("a") jsonLink.href = jsonUrl const timestamp = new Date().toISOString().replace(/[:.]/g, "-").slice(0, -5) jsonLink.download = `GNX3000_Library_${timestamp}.json` document.body.appendChild(jsonLink) jsonLink.click() document.body.removeChild(jsonLink) URL.revokeObjectURL(jsonUrl) console.log(`[v0] Exported library with ${patches.size} patches`) } export function createParameterUpdateMessage(parameterId: number, position: number, value: number): Uint8Array { console.log(`[v0] Creating parameter update: id=${parameterId}, pos=${position}, val=${value}`) // Create a single parameter triplet const params: PresetParameter[] = [ { id: parameterId, position: position, value: value, }, ] // Encode as SysEx using the preset encoder const message = encodePresetToSysEx(params, { deviceId: GNX3000_DEVICE_ID, familyId: GNX3000_FAMILY_ID, productId: GNX3000_PRODUCT_ID, procedure: 0x0a, // SEND_PRESET_PARAMETERS message type }) return message } export function createBulkParameterUpdate(parameters: PresetParameter[]): Uint8Array { console.log(`[v0] Creating bulk parameter update with ${parameters.length} parameters`) const message = encodePresetToSysEx(parameters, { deviceId: GNX3000_DEVICE_ID, familyId: GNX3000_FAMILY_ID, productId: GNX3000_PRODUCT_ID, procedure: 0x0a, // SEND_PRESET_PARAMETERS message type }) return message } // Library-level load/save functions export async function loadLibraryFromFile(file: File): Promise | null> { console.log("[v0] Loading library from file:", file.name) try { if (file.name.endsWith(".syx")) { // Load bulk dump SysEx file const arrayBuffer = await file.arrayBuffer() const data = new Uint8Array(arrayBuffer) console.log("[v0] Loaded .syx library file, size:", data.length, "bytes") // Parse multiple SysEx messages from the file const patches = new Map() let offset = 0 while (offset < data.length) { // Find next SysEx message (starts with 0xF0) while (offset < data.length && data[offset] !== 0xf0) { offset++ } if (offset >= data.length) break // Find end of SysEx message (0xF7) let endOffset = offset + 1 while (endOffset < data.length && data[endOffset] !== 0xf7) { endOffset++ } if (endOffset >= data.length) break // Extract this SysEx message const messageData = data.slice(offset, endOffset + 1) const patch = parsePresetData(messageData) if (patch) { patches.set(patch.patchNumber, patch) console.log("[v0] Loaded patch", patch.patchNumber, ":", patch.patchName) } offset = endOffset + 1 } console.log("[v0] Loaded", patches.size, "patches from library file") return patches } else if (file.name.endsWith(".json")) { // Load JSON library file const text = await file.text() const jsonData = JSON.parse(text) console.log("[v0] Loaded .json library file with", jsonData.patchCount, "patches") const patches = new Map() for (const patchData of jsonData.patches) { const patch: Patch = { ...patchData, rawSysExData: patchData.rawSysExData ? new Uint8Array(patchData.rawSysExData) : undefined, } patches.set(patch.patchNumber, patch) } console.log("[v0] Loaded", patches.size, "patches from JSON library") return patches } else { console.error("[v0] Unsupported file type:", file.name) return null } } catch (error) { console.error("[v0] Error loading library file:", error) return null } } export function saveLibraryToLocalStorage(patches: Map): void { console.log("[v0] Saving", patches.size, "patches to localStorage") const libraryData = { version: 1, savedAt: new Date().toISOString(), patchCount: patches.size, patches: Array.from(patches.values()).map((patch) => ({ ...patch, rawSysExData: patch.rawSysExData ? Array.from(patch.rawSysExData) : undefined, })), } try { localStorage.setItem("gnx3000_library", JSON.stringify(libraryData)) console.log("[v0] Successfully saved library to localStorage") } catch (error) { console.error("[v0] Error saving to localStorage:", error) } } export function loadLibraryFromLocalStorage(): Map | null { console.log("[v0] Loading library from localStorage") try { const stored = localStorage.getItem("gnx3000_library") if (!stored) { console.log("[v0] No library found in localStorage") return null } const libraryData = JSON.parse(stored) console.log("[v0] Found library with", libraryData.patchCount, "patches") const patches = new Map() for (const patchData of libraryData.patches) { const patch: Patch = { ...patchData, rawSysExData: patchData.rawSysExData ? new Uint8Array(patchData.rawSysExData) : undefined, } const migratedPatch = migratePatch(patch) patches.set(migratedPatch.patchNumber, migratedPatch) } console.log("[v0] Loaded", patches.size, "patches from localStorage") return patches } catch (error) { console.error("[v0] Error loading from localStorage:", error) return null } } export function migratePatch(patch: Patch): Patch { const defaultPatch = createDefaultPatch(patch.patchNumber) return { ...defaultPatch, ...patch, amp: { ...defaultPatch.amp, ...patch.amp }, stompbox: { ...defaultPatch.stompbox, ...patch.stompbox }, wah: patch.wah ? { ...defaultPatch.wah, ...patch.wah } : defaultPatch.wah, modulation: { ...defaultPatch.modulation, ...patch.modulation }, delay: { ...defaultPatch.delay, ...patch.delay }, reverb: { ...defaultPatch.reverb, ...patch.reverb }, } } [V0_FILE]typescriptreact:file="components/modules/stompbox-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" const STOMPBOX_TYPES = [ "Overdrive", "Distortion", "Fuzz", "Compressor", "Wah", "Auto Wah", "Talk Box", "Octaver", "Pitch Shift", "Whammy", "Detune", "Harmonizer", ] interface StompboxModuleProps { patch: GNX3000Patch onPatchChange: (patch: GNX3000Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function StompboxModule({ patch, onPatchChange, onSendParameter }: StompboxModuleProps) { const handleDriveChange = (value: number[]) => { const newPatch = { ...patch, stompbox: { ...patch.stompbox, drive: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.STOMPBOX_DRIVE, Math.floor((value[0] * 127) / 100)) } const handleToneChange = (value: number[]) => { const newPatch = { ...patch, stompbox: { ...patch.stompbox, tone: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.STOMPBOX_TONE, Math.floor((value[0] * 127) / 100)) } const handleLevelChange = (value: number[]) => { const newPatch = { ...patch, stompbox: { ...patch.stompbox, level: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.STOMPBOX_LEVEL, Math.floor((value[0] * 127) / 100)) } const handleEnabledChange = (enabled: boolean) => { const newPatch = { ...patch, stompbox: { ...patch.stompbox, enabled } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.STOMPBOX_ENABLE, enabled ? 1 : 0) } return (

Stompbox Effects

Effect Type

Drive {patch.stompbox.drive}

Tone {patch.stompbox.tone}

Level {patch.stompbox.level}

Mix 100

Bypass handleEnabledChange(!bypass)} />

) } [V0_FILE]typescriptreact:file="components/modules/wah-module.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import type { Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" interface WahModuleProps { patch: Patch onPatchChange: (patch: Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function WahModule({ patch, onPatchChange, onSendParameter }: WahModuleProps) { useEffect(() => { if (!patch.wah) { console.log("[v0] Wah property missing, initializing with defaults") onPatchChange({ ...patch, wah: { enabled: false, type: "Manual Wah", frequency: 50, resonance: 65, sensitivity: 70, range: 80, bypass: false, }, }) } }, [patch, onPatchChange]) if (!patch.wah) { return (

Wah Effect

Initializing...

) } const handleEnabledChange = (enabled: boolean) => { onPatchChange({ ...patch, wah: { ...patch.wah, enabled } }) onSendParameter(GNX3000_PARAM_IDS.WAH_ENABLE, enabled ? 1 : 0) } const handleTypeChange = (type: string) => { onPatchChange({ ...patch, wah: { ...patch.wah, type } }) } const handleFrequencyChange = (value: number[]) => { const frequency = value[0] onPatchChange({ ...patch, wah: { ...patch.wah, frequency } }) onSendParameter(GNX3000_PARAM_IDS.WAH_FREQUENCY, Math.floor((frequency * 127) / 100)) } const handleResonanceChange = (value: number[]) => { const resonance = value[0] onPatchChange({ ...patch, wah: { ...patch.wah, resonance } }) onSendParameter(GNX3000_PARAM_IDS.WAH_RESONANCE, Math.floor((resonance * 127) / 100)) } const handleSensitivityChange = (value: number[]) => { const sensitivity = value[0] onPatchChange({ ...patch, wah: { ...patch.wah, sensitivity } }) onSendParameter(GNX3000_PARAM_IDS.WAH_SENSITIVITY, Math.floor((sensitivity * 127) / 100)) } const handleRangeChange = (value: number[]) => { const range = value[0] onPatchChange({ ...patch, wah: { ...patch.wah, range } }) onSendParameter(GNX3000_PARAM_IDS.WAH_RANGE, Math.floor((range * 127) / 100)) } const handleBypassChange = (bypass: boolean) => { onPatchChange({ ...patch, wah: { ...patch.wah, bypass } }) } return (

Wah Effect

Wah Type

Frequency {patch.wah.frequency}

Resonance {patch.wah.resonance}

Sensitivity {patch.wah.sensitivity}

Range {patch.wah.range}

Bypass

Wah Controls:

Frequency: Sets the center frequency of the wah sweep

Resonance: Controls the peak emphasis (Q factor)

Sensitivity: Adjusts how responsive the wah is to input signal

Range: Defines the sweep range from low to high frequencies

) } [V0_FILE]typescriptreact:file="components/modules/modulation-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" const MOD_TYPES = [ "Chorus", "Flanger", "Phaser", "Tremolo", "Vibrato", "Rotary", "UniVibe", "Ring Mod", "Panner", "Envelope Filter", "Step Filter", ] interface ModulationModuleProps { patch: GNX3000Patch onPatchChange: (patch: GNX3000Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function ModulationModule({ patch, onPatchChange, onSendParameter }: ModulationModuleProps) { const handleSpeedChange = (value: number[]) => { const newPatch = { ...patch, modulation: { ...patch.modulation, speed: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.MOD_SPEED, Math.floor((value[0] * 127) / 100)) } const handleDepthChange = (value: number[]) => { const newPatch = { ...patch, modulation: { ...patch.modulation, depth: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.MOD_DEPTH, Math.floor((value[0] * 127) / 100)) } const handleFeedbackChange = (value: number[]) => { const newPatch = { ...patch, modulation: { ...patch.modulation, feedback: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.MOD_FEEDBACK, Math.floor((value[0] * 127) / 100)) } const handleLevelChange = (value: number[]) => { const newPatch = { ...patch, modulation: { ...patch.modulation, level: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.MOD_LEVEL, Math.floor((value[0] * 127) / 100)) } const handleEnabledChange = (enabled: boolean) => { const newPatch = { ...patch, modulation: { ...patch.modulation, enabled } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.MOD_ENABLE, enabled ? 1 : 0) } return (

Modulation / Chorus

Modulation Type

Speed {patch.modulation.speed}

Depth {patch.modulation.depth}

Feedback {patch.modulation.feedback}

Mix 50

Level {patch.modulation.level}

) } [V0_FILE]typescriptreact:file="components/modules/delay-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" const DELAY_TYPES = ["Digital", "Analog", "Tape Echo", "Multi-Tap", "Ping Pong", "Reverse", "Modulated", "Lo-Fi"] interface DelayModuleProps { patch: GNX3000Patch onPatchChange: (patch: GNX3000Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function DelayModule({ patch, onPatchChange, onSendParameter }: DelayModuleProps) { const handleTimeChange = (value: number[]) => { const newPatch = { ...patch, delay: { ...patch.delay, time: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.DELAY_TIME, Math.floor((value[0] * 127) / 2000)) } const handleFeedbackChange = (value: number[]) => { const newPatch = { ...patch, delay: { ...patch.delay, feedback: value[0] } } onPatchChange(newPatch) } const handleLevelChange = (value: number[]) => { const newPatch = { ...patch, delay: { ...patch.delay, level: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.DELAY_LEVEL, Math.floor((value[0] * 127) / 100)) } const handleEnabledChange = (enabled: boolean) => { const newPatch = { ...patch, delay: { ...patch.delay, enabled } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.DELAY_ENABLE, enabled ? 1 : 0) } return (

Delay

Delay Type

Time {patch.delay.time}ms

Feedback {patch.delay.feedback}

Mix 35

Level {patch.delay.level}

) } [V0_FILE]typescriptreact:file="components/modules/reverb-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" const REVERB_TYPES = ["Room", "Hall", "Plate", "Spring", "Chamber", "Cathedral", "Arena", "Gated", "Reverse", "Shimmer"] interface ReverbModuleProps { patch: GNX3000Patch onPatchChange: (patch: GNX3000Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function ReverbModule({ patch, onPatchChange, onSendParameter }: ReverbModuleProps) { const handleDecayChange = (value: number[]) => { const newPatch = { ...patch, reverb: { ...patch.reverb, decay: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.REVERB_DECAY, Math.floor((value[0] * 127) / 100)) } const handleToneChange = (value: number[]) => { const newPatch = { ...patch, reverb: { ...patch.reverb, tone: value[0] } } onPatchChange(newPatch) } const handleLevelChange = (value: number[]) => { const newPatch = { ...patch, reverb: { ...patch.reverb, level: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.REVERB_LEVEL, Math.floor((value[0] * 127) / 100)) } const handleEnabledChange = (enabled: boolean) => { const newPatch = { ...patch, reverb: { ...patch.reverb, enabled } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.REVERB_ENABLE, enabled ? 1 : 0) } return (

Reverb

Reverb Type

Decay {(patch.reverb.decay / 10).toFixed(1)}s

Pre-Delay 25ms

Damping {patch.reverb.tone}

Mix 30

Level {patch.reverb.level}

) } [V0_FILE]typescript:file="lib/gnx3000-midi.ts" isEdit="true" isQuickEdit="true" isMerged="true" // GNX3000 MIDI Protocol Implementation // Based on DigiTech protocol from gdigi project // DigiTech SysEx constants export const DIGITECH_MANUFACTURER_ID = [0x00, 0x00, 0x10] // DigiTech/DOD manufacturer ID export const GNX3000_DEVICE_ID = 0x00 // Device ID - using 0x00 for specific device export const GNX3000_DEVICE_ID_SPECIFIC = 0x10 // Specific device ID (alternative) export const GNX3000_FAMILY_ID = 0x5c // Family ID from device messages export const GNX3000_PRODUCT_ID = 0x04 // GNX3000 product ID (from gdigi effects.h) // SysEx message types export const SYSEX_START = 0xf0 export const SYSEX_END = 0xf7 // Message IDs (from gdigi.h) export const REQUEST_PRESET_NAMES = 0x01 export const RECEIVE_PRESET_NAMES = 0x02 export const REQUEST_PRESET = 0x08 export const RECEIVE_PRESET_START = 0x09 export const RECEIVE_PRESET_PARAMETERS = 0x0a export const RECEIVE_PRESET_END = 0x0b export const SEND_PRESET_START = 0x0c export const SEND_PRESET_PARAMETERS = 0x0d export const SEND_PRESET_END = 0x0e export const REQUEST_BULK_DUMP = 0x18 export const RECEIVE_BULK_DUMP_START = 0x19 export const RECEIVE_BULK_DUMP_END = 0x1b export const RECEIVE_PRESET_END_MSG = 0x2c export const RECEIVE_PRESET_DATA = 0x55 // Full preset data message (764/341 bytes) export const RECEIVE_PARAMETER_VALUE = 0x41 // Individual parameter change message // Bank constants (from gdigi.h) export const PRESETS_EDIT_BUFFER = 0x00 export const PRESETS_FACTORY_1 = 0x01 export const PRESETS_USER = 0x02 export const CMD_PATCH_DUMP = REQUEST_PRESET export const CMD_PATCH_NAME = REQUEST_PRESET_NAMES export const CMD_CURRENT_PATCH_REQUEST = 0x0f // MIDI CC constants for parameter control export const MIDI_CC = { // Expression and Control PICKUP: 2, EXPRESSION_PEDAL: 4, VOLUME: 7, // Wah WAH_ON_OFF: 13, WAH_TYPE: 14, WAH_LEVEL: 15, WAH_MIN_FREQ: 16, WAH_MAX_FREQ: 17, // Compressor COMPRESSOR_ON_OFF: 18, COMPRESSOR_SUSTAIN: 19, COMPRESSOR_LEVEL: 20, COMPRESSOR_TONE: 21, COMPRESSOR_ATTACK: 22, // Whammy/IPS WHAMMY_ON_OFF: 23, WHAMMY_TYPE: 24, WHAMMY_AMOUNT: 25, // Stompbox STOMPBOX_ON_OFF: 26, STOMPBOX_TYPE: 27, STOMPBOX_DRIVE: 28, STOMPBOX_TONE: 29, STOMPBOX_LEVEL: 30, // Amp AMP_CHANNEL: 31, AMP_CH1_GAIN: 32, AMP_CH1_LEVEL: 33, AMP_CH1_BASS: 34, AMP_CH1_MID: 35, AMP_CH1_TREBLE: 36, AMP_CH2_GAIN: 37, AMP_CH2_LEVEL: 38, AMP_CH2_BASS: 39, AMP_CH2_MID: 40, AMP_CH2_TREBLE: 41, // EQ EQ_ON_OFF: 42, EQ_LOW: 43, EQ_MID: 44, EQ_HIGH: 45, // Noise Gate GATE_ON_OFF: 46, GATE_THRESHOLD: 47, GATE_ATTENUATION: 48, } as const export const GNX3000_PATCH_COUNT = 65 // Fixed patch count to 65 (not 100) export function createPatchRequest(bank: number, patchNumber: number): Uint8Array { return new Uint8Array([ SYSEX_START, ...DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, // Added family_id byte GNX3000_PRODUCT_ID, REQUEST_PRESET, bank & 0x7f, patchNumber & 0x7f, SYSEX_END, ]) } export function createCurrentPatchRequest(): Uint8Array { return createPatchRequest(PRESETS_EDIT_BUFFER, 0) } export function createPresetNamesRequest(bank: number): Uint8Array { return new Uint8Array([ SYSEX_START, ...DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, // Added family_id byte GNX3000_PRODUCT_ID, REQUEST_PRESET_NAMES, bank & 0x7f, SYSEX_END, ]) } export function createBulkDumpRequest(): Uint8Array { return new Uint8Array([ SYSEX_START, ...DIGITECH_MANUFACTURER_ID, GNX3000_DEVICE_ID, GNX3000_FAMILY_ID, // Added family_id byte GNX3000_PRODUCT_ID, REQUEST_BULK_DUMP, 0x00, // parameter (from gdigi: "\x00") SYSEX_END, ]) } export function isValidDigiTechSysEx(data: Uint8Array): boolean { if (data.length < 9) return false // Changed from 8 to 9 to account for family_id if (data[0] !== SYSEX_START) return false if (data[data.length - 1] !== SYSEX_END) return false // Check manufacturer ID if ( data[1] !== DIGITECH_MANUFACTURER_ID[0] || data[2] !== DIGITECH_MANUFACTURER_ID[1] || data[3] !== DIGITECH_MANUFACTURER_ID[2] ) { return false } // Check device ID (accept both 0x00 and 0x10) const deviceId = data[4] if (deviceId !== GNX3000_DEVICE_ID && deviceId !== GNX3000_DEVICE_ID_SPECIFIC) { console.log("[v0] Unexpected device ID:", deviceId.toString(16)) return false } const familyId = data[5] if (familyId !== GNX3000_FAMILY_ID) { console.log("[v0] Unexpected family ID:", familyId.toString(16)) // Don't return false - just log it for now } // Check product ID if (data[6] !== GNX3000_PRODUCT_ID) { // Changed from index 5 to 6 console.log("[v0] Unexpected product ID:", data[6].toString(16)) return false } return true } // SysEx messages can't contain bytes with 8th bit set, so data is packed into 7-bit chunks export function unpack7bit(data: Uint8Array, startIdx: number, length: number): number[] { const result: number[] = [] let idx = startIdx while (result.length < length && idx < data.length - 1) { const bits = data[idx++] for (let i = 0; i < 7 && result.length < length; i++) { if (idx >= data.length - 1) break const byte = data[idx++] const highBit = (bits >> (6 - i)) & 0x01 result.push((highBit << 7) | byte) } } return result } export function pack7bit(data: number[]): number[] { const result: number[] = [] for (let i = 0; i < data.length; i += 7) { let bits = 0 const chunk: number[] = [] for (let j = 0; j < 7 && i + j < data.length; j++) { const byte = data[i + j] bits |= ((byte >> 7) & 0x01) << (6 - j) chunk.push(byte & 0x7f) } result.push(bits, ...chunk) } return result } // Log SysEx message for debugging export function logSysExMessage(data: Uint8Array, direction: "sent" | "received") { const hex = Array.from(data) .map((b) => b.toString(16).padStart(2, "0")) .join(" ") console.log(`[v0] MIDI ${direction}:`, hex) if (isValidDigiTechSysEx(data)) { const msgId = getMessageId(data) const msgNames: Record = { [REQUEST_PRESET_NAMES]: "REQUEST_PRESET_NAMES", [RECEIVE_PRESET_NAMES]: "RECEIVE_PRESET_NAMES", [REQUEST_PRESET]: "REQUEST_PRESET", [RECEIVE_PRESET_START]: "RECEIVE_PRESET_START", [RECEIVE_PRESET_PARAMETERS]: "RECEIVE_PRESET_PARAMETERS", [RECEIVE_PRESET_END]: "RECEIVE_PRESET_END", [SEND_PRESET_START]: "SEND_PRESET_START", [SEND_PRESET_PARAMETERS]: "SEND_PRESET_PARAMETERS", [SEND_PRESET_END]: "SEND_PRESET_END", [CMD_CURRENT_PATCH_REQUEST]: "CMD_CURRENT_PATCH_REQUEST", [REQUEST_BULK_DUMP]: "REQUEST_BULK_DUMP", [RECEIVE_BULK_DUMP_START]: "RECEIVE_BULK_DUMP_START", [RECEIVE_BULK_DUMP_END]: "RECEIVE_BULK_DUMP_END", [RECEIVE_PRESET_END_MSG]: "RECEIVE_PRESET_END_MSG", [RECEIVE_PRESET_DATA]: "RECEIVE_PRESET_DATA", [RECEIVE_PARAMETER_VALUE]: "RECEIVE_PARAMETER_VALUE", } const msgName = msgNames[msgId!] || `UNKNOWN(0x${msgId?.toString(16)})` console.log(`[v0] Message: ${msgName}, Length: ${data.length} bytes`) } } export function getMessageId(data: Uint8Array): number | null { if (!isValidDigiTechSysEx(data)) return null return data[7] // Message ID is now at index 7 (was 6) due to family_id } // MIDI CC message creation functions export function createCCMessage(channel: number, cc: number, value: number): Uint8Array { return new Uint8Array([ 0xb0 | (channel & 0x0f), // Control Change status + channel cc & 0x7f, // CC number (0-127) value & 0x7f, // CC value (0-127) ]) } export function createProgramChange(channel: number, program: number): Uint8Array { return new Uint8Array([ 0xc0 | (channel & 0x0f), // Program Change status + channel program & 0x7f, // Program number (0-127) ]) } [V0_FILE]typescriptreact:file="components/patch-manager.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Save, FolderOpen, ChevronLeft, ChevronRight, Trash2 } from "lucide-react" import type { GNX3000Patch } from "@/lib/gnx3000-patch" interface PatchManagerProps { currentPatch: number patchName: string onPatchChange: (patch: number) => void onPatchNameChange: (name: string) => void isConnected: boolean onSaveLibrary: () => void onLoadLibrary: (file: File) => void onResetLibrary: () => void devicePatches: Map } export function PatchManager({ currentPatch, patchName, onPatchChange, onPatchNameChange, isConnected, onSaveLibrary, onLoadLibrary, onResetLibrary, devicePatches, }: PatchManagerProps) { const availablePatchNumbers = Array.from(devicePatches.keys()).sort((a, b) => a - b) const currentIndex = availablePatchNumbers.indexOf(currentPatch) const handlePrevPatch = () => { if (availablePatchNumbers.length === 0) return if (currentIndex > 0) { onPatchChange(availablePatchNumbers[currentIndex - 1]) } else if (currentPatch > 1) { // If current patch not in library, go to previous number onPatchChange(currentPatch - 1) } } const handleNextPatch = () => { if (availablePatchNumbers.length === 0) return if (currentIndex >= 0 && currentIndex < availablePatchNumbers.length - 1) { onPatchChange(availablePatchNumbers[currentIndex + 1]) } else if (currentPatch < 65) { // If current patch not in library, go to next number onPatchChange(currentPatch + 1) } } const canGoPrev = availablePatchNumbers.length > 0 && (currentIndex > 0 || currentPatch > 1) const canGoNext = availablePatchNumbers.length > 0 && (currentIndex < availablePatchNumbers.length - 1 || currentPatch < 65) const handleFileInput = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { onLoadLibrary(file) } } return (

Patch:

{currentPatch.toString().padStart(2, "0")}

onPatchNameChange(e.target.value.toUpperCase())} className="w-48 font-mono uppercase" maxLength={16} />

) } [V0_FILE]typescript:file="lib/gnx3000-preset.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { buildSysEx, parseSysEx } from "./gdigi-sysex" export interface PresetParameter { id: number position: number value: number name?: string text?: string } export const GNX3000_PARAM_IDS = { // Amp parameters (from gdigi.h) AMP_TYPE: { id: 2496, position: 8 }, AMP_ON_OFF: { id: 265, position: 8 }, AMP_CHANNEL: { id: 256, position: 7 }, AMP_GAIN: { id: 2497, position: 8 }, AMP_LEVEL: { id: 2498, position: 8 }, AMP_BASS: { id: 2507, position: 8 }, AMP_MID: { id: 2508, position: 8 }, AMP_TREBLE: { id: 2509, position: 8 }, AMP_PRESENCE: { id: 2506, position: 8 }, // Cabinet parameters AMP_CAB_TYPE: { id: 2560, position: 9 }, AMP_CAB_TUNING: { id: 2561, position: 9 }, // Stompbox/Distortion parameters (using Screamer as default) DIST_TYPE: { id: 2432, position: 6 }, DIST_ON_OFF: { id: 2433, position: 6 }, DIST_SCREAMER_DRIVE: { id: 2434, position: 6 }, DIST_SCREAMER_TONE: { id: 2435, position: 6 }, DIST_SCREAMER_LVL: { id: 2436, position: 6 }, // Aliases for generic stompbox controls (map to Screamer parameters) STOMPBOX_ENABLE: { id: 2433, position: 6 }, STOMPBOX_DRIVE: { id: 2434, position: 6 }, STOMPBOX_TONE: { id: 2435, position: 6 }, STOMPBOX_LEVEL: { id: 2436, position: 6 }, // Wah parameters WAH_TYPE: { id: 128, position: 3 }, WAH_ON_OFF: { id: 129, position: 3 }, WAH_POSITION: { id: 132, position: 3 }, WAH_PEDAL_POSITION: { id: 132, position: 3 }, WAH_LEVEL: { id: 133, position: 3 }, WAH_ENABLE: { id: 129, position: 3 }, // Alias for WAH_ON_OFF WAH_FREQUENCY: { id: 132, position: 3 }, // Using WAH_POSITION for frequency WAH_RESONANCE: { id: 133, position: 3 }, // Using WAH_LEVEL for resonance WAH_SENSITIVITY: { id: 132, position: 3 }, // Using WAH_POSITION for sensitivity WAH_RANGE: { id: 133, position: 3 }, // Using WAH_LEVEL for range // Modulation/Chorus parameters CHORUSFX_TYPE: { id: 768, position: 14 }, CHORUSFX_ON_OFF: { id: 769, position: 14 }, CHORUS_SPEED: { id: 837, position: 14 }, CHORUS_DEPTH: { id: 838, position: 14 }, CHORUS_LEVEL: { id: 836, position: 14 }, MOD_FEEDBACK: { id: 904, position: 14 }, // Flanger regen, used as generic feedback MOD_ENABLE: { id: 769, position: 14 }, // Alias for CHORUSFX_ON_OFF MOD_TYPE: { id: 768, position: 14 }, // Alias for CHORUSFX_TYPE MOD_SPEED: { id: 837, position: 14 }, // Alias for CHORUS_SPEED MOD_DEPTH: { id: 838, position: 14 }, // Alias for CHORUS_DEPTH MOD_LEVEL: { id: 836, position: 14 }, // Alias for CHORUS_LEVEL // Delay parameters DELAY_TYPE: { id: 1856, position: 15 }, DELAY_ON_OFF: { id: 1857, position: 15 }, DELAY_TIME: { id: 1888, position: 15 }, DELAY_REPEATS: { id: 1863, position: 15 }, DELAY_LEVEL: { id: 1860, position: 15 }, DELAY_ENABLE: { id: 1857, position: 15 }, // Alias for DELAY_ON_OFF // Reverb parameters REVERB_TYPE: { id: 1920, position: 16 }, REVERB_ON_OFF: { id: 1921, position: 16 }, REVERB_DECAY: { id: 1927, position: 16 }, REVERB_LEVEL: { id: 1925, position: 16 }, REVERB_PREDELAY: { id: 1922, position: 16 }, REVERB_ENABLE: { id: 1921, position: 16 }, // Alias for REVERB_ON_OFF // Noise Gate parameters NOISEGATE_TYPE: { id: 704, position: 12 }, NOISEGATE_ON_OFF: { id: 705, position: 12 }, // Compressor parameters COMP_TYPE: { id: 207, position: 4 }, COMP_ON_OFF: { id: 193, position: 4 }, // Pickup parameters PICKUP_TYPE: { id: 64, position: 2 }, PICKUP_ON_OFF: { id: 65, position: 2 }, } as const export const GNX3K_SCHEMA: PresetParameter[] = [ { id: 64, position: 2, value: 65, name: "EQ Type", text: "SC>HB" }, { id: 65, position: 2, value: 0, name: "Pickup Enable", text: "Off" }, { id: 128, position: 3, value: 129, name: "Wah Type", text: "Cry" }, { id: 129, position: 3, value: 0, name: "Wah Enable", text: "Off" }, { id: 132, position: 3, value: 0, name: "Wah Position", text: "0" }, ] export function encodePresetToSysEx( params: PresetParameter[], opts: { deviceId?: number familyId?: number productId?: number procedure?: number } = {}, ): Uint8Array { const { deviceId = 0x00, familyId = 0x5c, productId = 0x04, procedure = 0x55 } = opts const payload: number[] = [] for (const p of params) { const id = Number(p.id) & 0xff const pos = Number(p.position) & 0xff const val = Number(p.value) & 0xff payload.push(id, pos, val) } const message = buildSysEx({ deviceId, familyId, productId, procedure, payloadRaw: Uint8Array.from(payload), }) return message } export function encodeSingleParameter(paramId: { id: number; position: number }, value: number): Uint8Array { console.log("[v0] encodeSingleParameter:", { id: paramId.id, idHex: `0x${paramId.id.toString(16).padStart(4, "0")}`, position: paramId.position, value: value, }) // Build the parameter data: ID (2 bytes), position (1 byte), value (variable) const payload: number[] = [] // ID as 2 bytes (big-endian) payload.push((paramId.id >> 8) & 0xff) payload.push(paramId.id & 0xff) // Position as 1 byte payload.push(paramId.position & 0xff) // Value (using simple encoding for values < 128) const val = value & 0x7f payload.push(val) console.log("[v0] Parameter payload:", payload.map((b) => `0x${b.toString(16).padStart(2, "0")}`).join(" ")) // Use procedure 0x41 (RECEIVE_PARAMETER_VALUE) for individual parameter changes const sysex = buildSysEx({ deviceId: 0x00, familyId: 0x5c, productId: 0x04, procedure: 0x41, // RECEIVE_PARAMETER_VALUE payloadRaw: Uint8Array.from(payload), }) console.log( "[v0] Full SysEx message:", Array.from(sysex) .map((b) => `0x${b.toString(16).padStart(2, "0")}`) .join(" "), ) return sysex } export function decodeSysExToPreset(sysex: Uint8Array): PresetParameter[] { const msg = parseSysEx(sysex) const bytes = msg.payload const result: PresetParameter[] = [] for (let i = 0; i + 2 < bytes.length; i += 3) { result.push({ id: bytes[i], position: bytes[i + 1], value: bytes[i + 2], }) } return result } export function mergeWithSchema( decodedParams: PresetParameter[], schema: PresetParameter[] = GNX3K_SCHEMA, ): PresetParameter[] { return decodedParams.map((p) => { const meta = schema.find((s) => s.id === p.id && s.position === p.position) return { ...p, name: meta?.name || "Unknown", text: meta?.text || "", } }) } [V0_FILE]typescriptreact:file="components/modules/amp-module.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { Card } from "@/components/ui/card" import type { GNX3000Patch } from "@/lib/gnx3000-patch" import { GNX3000_PARAM_IDS } from "@/lib/gnx3000-preset" const AMP_MODELS = [ "Tweed Deluxe", "Blackface Deluxe", "Brit Class A", "Brit Stack", "Rectified", "Modern Hi-Gain", "Fuzz Box", "Acoustic Sim", "Direct", "Jazz Clean", "Boutique", "Metal Zone", ] const CABINET_TYPES = [ "1x8 Combo", "1x12 Combo", "2x12 Combo", "4x10 Combo", "1x12 Cabinet", "2x12 Cabinet", "4x12 Cabinet", "Direct", ] interface AmpModuleProps { patch: GNX3000Patch onPatchChange: (patch: GNX3000Patch) => void onSendParameter: (paramId: { id: number; position: number }, value: number) => void } export function AmpModule({ patch, onPatchChange, onSendParameter }: AmpModuleProps) { const handleGainChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, gain: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_GAIN, Math.floor((value[0] * 127) / 100)) } const handleLevelChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, level: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_LEVEL, Math.floor((value[0] * 127) / 100)) } const handleBassChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, bass: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_BASS, Math.floor((value[0] * 127) / 100)) } const handleMidChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, mid: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_MID, Math.floor((value[0] * 127) / 100)) } const handleTrebleChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, treble: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_TREBLE, Math.floor((value[0] * 127) / 100)) } const handlePresenceChange = (value: number[]) => { const newPatch = { ...patch, amp: { ...patch.amp, presence: value[0] } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_PRESENCE, Math.floor((value[0] * 127) / 100)) } const handleChannelToggle = (enabled: boolean) => { const newPatch = { ...patch, amp: { ...patch.amp, enabled } } onPatchChange(newPatch) onSendParameter(GNX3000_PARAM_IDS.AMP_CHANNEL, enabled ? 1 : 0) } const handleModelChange = (value: string) => { // Convert kebab-case back to display name const modelName = AMP_MODELS.find((m) => m.toLowerCase().replace(/\s+/g, "-") === value) || AMP_MODELS[0] const newPatch = { ...patch, amp: { ...patch.amp, model: modelName } } onPatchChange(newPatch) // Send the model index as the parameter value const modelIndex = AMP_MODELS.indexOf(modelName) onSendParameter(GNX3000_PARAM_IDS.AMP_TYPE, modelIndex) } const handleCabinetChange = (value: string) => { // Convert kebab-case back to display name const cabinetName = CABINET_TYPES.find((c) => c.toLowerCase().replace(/\s+/g, "-") === value) || CABINET_TYPES[0] const newPatch = { ...patch, amp: { ...patch.amp, cabinet: cabinetName } } onPatchChange(newPatch) // Send the cabinet index as the parameter value const cabinetIndex = CABINET_TYPES.indexOf(cabinetName) onSendParameter(GNX3000_PARAM_IDS.CABINET_TYPE, cabinetIndex) } return (

Amp Channel

{/* Amp Model Selection */}

Amp Model

Cabinet Model

{/* Amp Controls */}

Gain {patch.amp.gain}

Level {patch.amp.level}

Presence {patch.amp.presence}

{/* EQ Section */}

Tone Stack

Bass Frequency {patch.amp.bass}

Mid Frequency {patch.amp.mid}

Treble Frequency {patch.amp.treble}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Added DSEG14 7-segment font for authentic LED display */ @font-face { font-family: "DSEG14"; src: url("/fonts/DSEG14Classic-Italic.woff") format("woff"); font-weight: normal; font-style: italic; } :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar: 0 0% 98%; --sidebar-foreground: 0 0% 3.9%; --sidebar-primary: 0 0% 9%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 0 0% 96.1%; --sidebar-accent-foreground: 0 0% 9%; --sidebar-border: 0 0% 89.8%; --sidebar-ring: 0 0% 3.9%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar: 0 0% 9%; --sidebar-foreground: 0 0% 98%; --sidebar-primary: 220 70% 50%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 0 0% 14.9%; --sidebar-accent-foreground: 0 0% 98%; --sidebar-border: 0 0% 14.9%; --sidebar-ring: 0 0% 83.1%; } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground)); --color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); --color-chart-1: hsl(var(--chart-1)); --color-chart-2: hsl(var(--chart-2)); --color-chart-3: hsl(var(--chart-3)); --color-chart-4: hsl(var(--chart-4)); --color-chart-5: hsl(var(--chart-5)); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: hsl(var(--sidebar)); --color-sidebar-foreground: hsl(var(--sidebar-foreground)); --color-sidebar-primary: hsl(var(--sidebar-primary)); --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); --color-sidebar-accent: hsl(var(--sidebar-accent)); --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); --color-sidebar-border: hsl(var(--sidebar-border)); --color-sidebar-ring: hsl(var(--sidebar-ring)); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-black text-foreground; } } /* Updated LED display styles to use DSEG14 7-segment font */ .led-display { font-family: "DSEG14", ui-monospace; letter-spacing: 0.15em; text-shadow: 0 0 10px currentColor; font-weight: 400; color: #98ec13; padding: 0.5rem; /* Updated padding to bring text closer to container border */ } .led-display-red { font-family: "DSEG14", ui-monospace; letter-spacing: 0.2em; color: hsl(0 85% 50%); text-shadow: 0 0 10px currentColor; font-weight: 400; line-height: 1; padding: 0.5rem; /* Updated padding to bring text closer to container border */ } .param-label { color: hsl(0 85% 50%); text-shadow: 0 0 8px currentColor; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .led-amber { color: hsl(45 85% 50%); text-shadow: 0 0 8px currentColor; } .knob-container { filter: drop-shadow(0 2px 8px rgba(0 0 0 / 0.5)); } /* Added color-coded label styles matching hardware */ .label-cabinet { background: transparent; color: #4cbb17; border: 2px solid #4cbb17; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .label-amp { background: transparent; color: #ff0800; border: 2px solid #ff0800; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .label-wah { background: transparent; color: #4169e1; border: 2px solid #4169e1; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .label-level { background: transparent; color: #d2b48c; border: 2px solid #d2b48c; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } [V0_FILE]typescriptreact:file="components/hardware-display.tsx" isEdit="true" isQuickEdit="true" "use client" import { Badge } from "@/components/ui/badge" interface HardwareDisplayProps { patchNumber: number patchName: string isConnected: boolean } export function HardwareDisplay({ patchNumber, patchName, isConnected }: HardwareDisplayProps) { return (

{/* Patch Name Display */}

{patchName.slice(0, 8).padEnd(8, " ")}

{/* Patch Number Display */}

{patchNumber.toString().padStart(2, "0")}

{/* Status Indicators */}

{isConnected ? "Connected" : "Disconnected"}

USB MIDI

{/* GNX3000 Logo */}

GNX3000

Guitar Workstation

) } [V0_FILE]typescriptreact:file="components/gnx3000-editor.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect, useCallback, useRef } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card } from "@/components/ui/card" import { Settings, Waves, Zap, Radio, Clock, Music } from "lucide-react" import { HardwareDisplay } from "./hardware-display" import { AmpModule } from "./modules/amp-module" import { StompboxModule } from "./modules/stompbox-module" import { WahModule } from "./modules/wah-module" import { ModulationModule } from "./modules/modulation-module" import { DelayModule } from "./modules/delay-module" import { ReverbModule } from "./modules/reverb-module" import { ConnectionPanel } from "./connection-panel" import { PatchManager } from "./patch-manager" import { MIDIMonitor } from "./midi-monitor" import { useWebMIDI } from "@/hooks/use-web-midi" import { PatchLibrary } from "./patch-library" import { type GNX3000Patch, createDefaultPatch, createSendPatchMessages, createPatchNameRequest, sendRawSysExToDevice, saveLibraryToLocalStorage, loadLibraryFromLocalStorage, migratePatch, type PatchParameter, } from "@/lib/gnx3000-patch" import { createProgramChange, GNX3000_PATCH_COUNT, unpack7bit, RECEIVE_PRESET_DATA } from "@/lib/gnx3000-midi" import { encodeSingleParameter } from "@/lib/gnx3000-preset" import { parsePresetData } from "@/lib/gnx3000-patch" export function GNX3000Editor() { const [currentPatch, setCurrentPatch] = useState(createDefaultPatch(1)) const [devicePatches, setDevicePatches] = useState>(new Map()) const [isLoadingPatches, setIsLoadingPatches] = useState(false) const [midiMessages, setMidiMessages] = useState([]) const messageIdCounter = useRef(0) const midi = useWebMIDI() const [isBulkDumpActive, setIsBulkDumpActive] = useState(false) const [bulkDumpProgress, setBulkDumpProgress] = useState({ current: 0, total: 0 }) const bulkDumpMessages = useRef([]) const [midiChannel, setMidiChannel] = useState(0) // 0 = channel 1 interface MIDIMessage { id: number timestamp: string direction: "sent" | "received" data: number[] description: string } const addMIDIMessage = useCallback( (direction: "sent" | "received", data: Uint8Array, description: string) => { const timestamp = new Date().toLocaleTimeString() const id = Date.now() * 1000 + messageIdCounter.current++ setMidiMessages((prev) => [ ...prev, { id, timestamp, direction, data: Array.from(data), description, }, ]) }, [], // Empty dependency array since we're using ref ) const clearMIDIMessages = useCallback(() => { setMidiMessages([]) messageIdCounter.current = 0 }, []) const [currentPresetReceiving, setCurrentPresetReceiving] = useState<{ number: number name: string parameters: PatchParameter[] } | null>(null) const handleMIDIMessage = useCallback( (data: Uint8Array) => { // Check if this is a SysEx message if (data[0] === 0xf0) { const hex = Array.from(data) .map((b) => b.toString(16).padStart(2, "0")) .join(" ") console.log("[v0] Full message:", hex) // Get message type if (data.length >= 8) { const msgType = data[7] // Message ID at byte 7 console.log("[v0] Message type: 0x" + msgType.toString(16)) if (msgType === RECEIVE_PRESET_DATA) { console.log("[v0] *** PRESET DATA (0x55) ***") const patch = parsePresetData(data) if (patch) { console.log("[v0] Parsed preset:", patch.patchNumber, patch.patchName) setDevicePatches((prevPatches) => { const updated = new Map(prevPatches) updated.set(patch.patchNumber, patch) console.log("[v0] ✓ Stored preset", patch.patchNumber, "in library (total:", updated.size, ")") return updated }) setBulkDumpProgress((prev) => ({ ...prev, current: prev.current + 1 })) } } else if (msgType === 0x19) { // RECEIVE_BULK_DUMP_START console.log("[v0] *** BULK DUMP START ***") const packedData = data.slice(8, data.length - 1) const unpacked = unpack7bit(packedData, 0, 2) const totalMessages = (unpacked[0] << 8) | unpacked[1] console.log("[v0] Total messages:", totalMessages) setIsBulkDumpActive(true) setBulkDumpProgress({ current: 0, total: totalMessages }) setCurrentPresetReceiving(null) } else if (msgType === 0x2b) { // RECEIVE_PRESET_START console.log("[v0] *** PRESET START ***") const packedData = data.slice(8, data.length - 1) const unpackedLength = Math.floor((packedData.length * 8) / 7) const unpacked = unpack7bit(packedData, 0, unpackedLength) console.log("[v0] Unpacked data length:", unpacked.length) console.log("[v0] Unpacked data:", unpacked.map((b) => b.toString(16).padStart(2, "0")).join(" ")) const bank = unpacked[0] const presetNumber = unpacked[1] const displayNumber = presetNumber + 1 let nameEnd = 2 while (nameEnd < 18 && unpacked[nameEnd] !== 0) nameEnd++ const name = String.fromCharCode(...unpacked.slice(2, nameEnd)) console.log("[v0] Bank:", bank, "Preset:", displayNumber, "Name:", name) setCurrentPresetReceiving({ number: displayNumber, name: name, parameters: [], }) setBulkDumpProgress((prev) => ({ ...prev, current: prev.current + 1 })) } else if (msgType === 0x2d) { // RECEIVE_PRESET_PARAMETERS console.log("[v0] *** PRESET PARAMETERS ***") setCurrentPresetReceiving((prev) => { if (!prev) { console.log("[v0] Warning: Got parameters but no preset receiving") return null } console.log("[v0] Adding parameters to preset", prev.number) return prev }) } else if (msgType === 0x2c) { // RECEIVE_PRESET_END console.log("[v0] *** PRESET END ***") setCurrentPresetReceiving((prev) => { if (!prev) { console.log("[v0] Warning: Got preset end but no preset receiving") return null } console.log("[v0] Finalizing preset", prev.number, ":", prev.name) const patch = createDefaultPatch(prev.number) patch.patchName = prev.name setDevicePatches((prevPatches) => { const updated = new Map(prevPatches) updated.set(patch.patchNumber, patch) console.log("[v0] ✓ Stored preset", patch.patchNumber, "in library (total:", updated.size, ")") return updated }) return null }) } else if (msgType === 0x1b) { // RECEIVE_BULK_DUMP_END console.log("[v0] *** BULK DUMP END ***") setIsBulkDumpActive(false) setCurrentPresetReceiving(null) } } } else { // Standard MIDI message const status = data[0] & 0xf0 if (status === 0xc0) { console.log("[v0] Program Change:", data[1]) } else if (status === 0xb0) { console.log("[v0] Control Change: CC" + data[1], "=", data[2]) } } // Add to MIDI monitor addMIDIMessage("received", data, getMessageDescription(Array.from(data))) }, [addMIDIMessage], ) useEffect(() => { if (midi.isConnected) { console.log("[v0] Editor: ✓ Registering MIDI message handler") midi.setMessageHandler(handleMIDIMessage) } else { console.log("[v0] Editor: ✗ MIDI not connected") } }, [midi.isConnected, midi.setMessageHandler, handleMIDIMessage]) useEffect(() => { const storedLibrary = loadLibraryFromLocalStorage() if (storedLibrary && storedLibrary.size > 0) { console.log("[v0] Loaded", storedLibrary.size, "patches from localStorage") setDevicePatches(storedLibrary) // Load the first patch as current const firstPatch = Array.from(storedLibrary.values())[0] if (firstPatch) { setCurrentPatch(migratePatch(firstPatch)) } } }, []) useEffect(() => { if (devicePatches.size > 0) { saveLibraryToLocalStorage(devicePatches) } }, [devicePatches]) const handleResetLibrary = useCallback(() => { const confirmed = window.confirm( "⚠️ WARNING: This will permanently delete all patches from the library!\n\n" + "This action cannot be undone. Are you sure you want to continue?", ) if (confirmed) { console.log("[v0] 🗑️ Wiping library...") // Clear localStorage localStorage.removeItem("gnx3000_library") // Reset state setDevicePatches(new Map()) setCurrentPatch(createDefaultPatch(1)) // Clear MIDI messages clearMIDIMessages() console.log("[v0] ✓ Library wiped and reset to default") // Show confirmation alert("Library has been wiped and reset to default.") } }, [clearMIDIMessages]) const requestAllPatches = useCallback(() => { if (!midi.isConnected) return setIsLoadingPatches(true) console.log("[v0] Requesting all patches from device...") const totalPatches = GNX3000_PATCH_COUNT let currentRequest = 1 const requestNext = () => { if (currentRequest <= totalPatches) { const request = createPatchNameRequest(currentRequest) midi.sendSysEx(request) addMIDIMessage("sent", request, `Request Patch Name ${currentRequest}`) currentRequest++ setTimeout(requestNext, 50) } else { setIsLoadingPatches(false) console.log("[v0] Finished requesting all patches") } } requestNext() // eslint-disable-next-line react-hooks/exhaustive-deps }, [midi.isConnected]) const requestBulkDump = useCallback(() => { if (!midi.isConnected) { console.log("[v0] Cannot request bulk dump - MIDI not connected") return } console.log("[v0] Bulk dump must be initiated from device UTILITY menu") }, [midi]) const handlePatchChangeCallback = useCallback( (patchNumber: number) => { console.log("[v0] Changing to patch:", patchNumber) const libraryPatch = devicePatches.get(patchNumber) if (libraryPatch) { console.log("[v0] Loading patch from library:", libraryPatch.patchName) setCurrentPatch({ ...libraryPatch }) } else { console.log("[v0] Patch not in library, updating number only") setCurrentPatch((prev) => ({ ...prev, patchNumber })) } if (midi.isConnected) { sendProgramChange(patchNumber - 1) // MIDI programs are 0-based } }, [midi, devicePatches], ) const handlePatchNameChange = (name: string) => { setCurrentPatch((prev) => ({ ...prev, patchName: name })) } const logSysExMessage = (data: Uint8Array, direction: string) => { console.log(`[v0] ${direction.toUpperCase()} SysEx message:`, Array.from(data)) } const parseSysExMessageType = (data: Uint8Array): number => { if (data.length < 7) return 0 if (data[0] !== 0xf0) return data[0] // Return status byte for non-SysEx return data[6] // Message ID is at byte 6 for DigiTech SysEx } const getMessageDescription = (data: number[]) => { if (data.length === 0) return "Empty message" if (data[0] === 0xf0) { if (data.length < 7) return "Invalid SysEx (too short)" // Check if it's a DigiTech message if (data[1] === 0x00 && data[2] === 0x00 && data[3] === 0x10) { const msgId = data[6] const msgNames: Record = { 1: "Request Patch Name", 2: "Receive Patch Name", 8: "Request Patch", 9: "Receive Patch Start", 10: "Receive Patch Parameters", 11: "Receive Patch End", 12: "Send Patch Start", 13: "Send Patch Parameters", 14: "Send Patch End", 15: "Request Current Patch", 24: "Request Bulk Dump", 25: "Receive Bulk Dump Start", 27: "Receive Bulk Dump End", 44: "Receive Preset End", RECEIVE_PRESET_DATA: "Receive Preset Data", // Updated msgNames with 0x55 message type } return msgNames[msgId] || `DigiTech SysEx (0x${msgId.toString(16)})` } return "SysEx Message (non-DigiTech)" } // Standard MIDI messages const status = data[0] & 0xf0 if (status === 0xc0) { return `Program Change: ${data[1]}` } if (status === 0xb0) { return `Control Change: CC${data[1]} = ${data[2]}` } return "MIDI Message" } const sendParameter = useCallback( (paramId: { id: number; position: number }, value: number) => { if (!midi.isConnected) { console.log("[v0] Cannot send parameter - MIDI not connected") return false } console.log("[v0] ========================================") console.log("[v0] SENDING PARAMETER CHANGE") console.log("[v0] Parameter ID:", paramId.id, `(0x${paramId.id.toString(16).padStart(4, "0")})`) console.log("[v0] Position:", paramId.position) console.log("[v0] Value:", value) console.log("[v0] ========================================") const sysex = encodeSingleParameter(paramId, value) // Log the complete SysEx message in a readable format const hexString = Array.from(sysex) .map((b) => b.toString(16).padStart(2, "0")) .join(" ") console.log("[v0] Complete SysEx message:", hexString) console.log("[v0] Message length:", sysex.length, "bytes") const sent = midi.sendSysEx(sysex) if (sent) { console.log("[v0] ✓ Parameter sent successfully") addMIDIMessage("sent", sysex, `Parameter: id=${paramId.id} pos=${paramId.position} val=${value}`) } else { console.error("[v0] ✗ Failed to send parameter") } return sent }, [midi, addMIDIMessage], ) const sendProgramChange = useCallback( (program: number) => { if (!midi.isConnected) { console.log("[v0] Cannot send Program Change - MIDI not connected") return false } const msg = createProgramChange(midiChannel, program) console.log("[v0] Sending Program Change:", program) const sent = midi.send(msg) if (sent) { addMIDIMessage("sent", msg, `Program Change: ${program}`) } else { console.error("[v0] Failed to send Program Change") } return sent }, [midi, midiChannel, addMIDIMessage], ) const CMD_PATCH_DUMP = 0xf0 // Placeholder for actual command value const CMD_PATCH_NAME = 0xf1 // Placeholder for actual command value const handleSendPatchFromLibrary = (patch: GNX3000Patch) => { console.log("[v0] Sending patch from library:", patch.patchName) if (!midi.isConnected) { console.log("[v0] Cannot send - MIDI not connected") return } const rawSysEx = sendRawSysExToDevice(patch) if (rawSysEx) { console.log("[v0] Sending raw SysEx data (", rawSysEx.length, "bytes)") addMIDIMessage("sent", rawSysEx, `Send Raw Patch: ${patch.patchName}`) midi.sendSysEx(rawSysEx) return } const messages = createSendPatchMessages(patch) messages.forEach((msg, index) => { setTimeout(() => { const msgType = ["START", "PARAMETERS", "END"][index] console.log(`[v0] Sending ${msgType} message (${msg.length} bytes)`) addMIDIMessage("sent", msg, `Send Patch ${msgType}: ${patch.patchName}`) midi.sendSysEx(msg) }, index * 100) }) } const handleLoadPatchFromLibrary = useCallback( (patch: GNX3000Patch) => { console.log("[v0] Loading patch from library:", patch.patchName) setCurrentPatch(patch) // Send Program Change to device if connected if (midi.isConnected) { sendProgramChange(patch.patchNumber - 1) // MIDI programs are 0-based } }, [midi, sendProgramChange], ) const handlePatchChange = useCallback((patch: GNX3000Patch) => { setCurrentPatch(patch) }, []) const handleSaveLibrary = useCallback(() => { saveLibraryToLocalStorage(devicePatches) alert("Library has been saved.") }, [devicePatches]) const handleLoadLibrary = useCallback(() => { const fileInput = document.createElement("input") fileInput.type = "file" fileInput.accept = ".json" fileInput.onchange = (event) => { const file = (event.target as HTMLInputElement).files?.[0] if (file) { const reader = new FileReader() reader.onload = (e) => { const content = e.target?.result as string const patches = JSON.parse(content) setDevicePatches(new Map(patches)) alert("Library has been loaded.") } reader.readAsText(file) } } fileInput.click() }, []) return (

{/* Header */}

GNX3000 Web Editor

DigiTech Guitar Workstation

{/* Hardware Display Section */} {/* Patch Management */} {/* Patch Library - show if we have patches from bulk dump */} {devicePatches.size > 0 && ( )} {/* Effect Modules */} Amp Stompbox Wah Mod/Chorus Delay Reverb

{/* MIDI Monitor */}

) }7f:["$","$L83",null,{"chatId":"9ApCSBGu7Xf","children":["$","$L84",null,{"data":{"@\"active-block\",\"9ApCSBGu7Xf\",":{"id":"b_uE4C8Fmnfe7","messageId":"A54oY75FEo1VP2h6Cm83jhB1uLACnqbC","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"gnx3000-editor","type":"code-project","project":"gnx3000-editor","taskNameActive":"Updating LED and module styling","taskNameComplete":"Updated LED and module styling"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"9ApCSBGu7Xf\",":false,"":null},"children":"$L86"}]}]

About

Tags

Share

About

Tags

Share