setAnswer(grid)}
+ disabled={done || phase === 'wrong-shake'}
+ />
+ )}
{/* Wrong attempt feedback inline */}
{phase === 'wrong-shake' && (
diff --git a/src/components/workbench/modules/code-editor/CodeEditorWorkbench.tsx b/src/components/workbench/modules/code-editor/CodeEditorWorkbench.tsx
new file mode 100644
index 0000000..8c3ae65
--- /dev/null
+++ b/src/components/workbench/modules/code-editor/CodeEditorWorkbench.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import { useState, useCallback, useRef } from 'react';
+import Editor from '@monaco-editor/react';
+import { CodeEditorContent } from '@/types/challenge';
+import { Play, CheckCircle2, XCircle, Maximize2, Minimize2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { createPortal } from 'react-dom';
+
+interface CodeEditorWorkbenchProps {
+ content: CodeEditorContent;
+ onCodeChange: (code: string) => void;
+ disabled?: boolean;
+}
+
+const LANG_MAP: Record = {
+ asm: 'mips',
+ c: 'c',
+ verilog: 'systemverilog',
+ html: 'html',
+ javascript: 'javascript',
+};
+
+// Simple JS evaluator for test cases
+function runCode(code: string, input: string, language: string): { output: string; error?: string } {
+ if (language === 'javascript') {
+ try {
+ const fn = new Function('input', `${code}\n`);
+ const result = fn(input);
+ return { output: String(result ?? '') };
+ } catch (e: unknown) {
+ return { output: '', error: String(e) };
+ }
+ }
+ // For non-JS languages, just return the code itself for verification
+ return { output: code.trim() };
+}
+
+export function CodeEditorWorkbench({ content, onCodeChange, disabled }: CodeEditorWorkbenchProps) {
+ const [code, setCode] = useState(content.starterCode);
+ const [testResults, setTestResults] = useState>([]);
+ const [fullscreen, setFullscreen] = useState(false);
+ const editorRef = useRef(null);
+
+ const handleEditorChange = useCallback((value: string | undefined) => {
+ const v = value ?? '';
+ setCode(v);
+ onCodeChange(v);
+ }, [onCodeChange]);
+
+ const handleRun = useCallback(() => {
+ const results = content.testCases.map((tc) => {
+ const { output, error } = runCode(code, tc.input, content.language);
+ const passed = output.trim() === tc.expectedOutput.trim();
+ return { passed, actual: output.trim(), error };
+ });
+ setTestResults(results);
+ }, [code, content]);
+
+ const allPassed = testResults.length > 0 && testResults.every((r) => r.passed);
+
+ const editorComponent = (fs: boolean) => (
+
+ { editorRef.current = editor; }}
+ theme="vs-dark"
+ options={{
+ minimap: { enabled: false },
+ fontSize: 14,
+ lineNumbers: 'on',
+ scrollBeyondLastLine: false,
+ readOnly: disabled,
+ automaticLayout: true,
+ tabSize: 2,
+ wordWrap: 'on',
+ }}
+ />
+
+ );
+
+ const testPanel = (
+
+
+
+ {allPassed &&
Todos los tests pasan}
+
+
+
+
+ {content.testCases.map((tc, i) => {
+ const result = testResults[i];
+ return (
+
+
+ {result && (result.passed
+ ?
+ :
+ )}
+ {tc.label || `Test ${i + 1}`}
+
+ {tc.input &&
Input: {tc.input}
}
+
Esperado: {tc.expectedOutput}
+ {result &&
Tu resultado: {result.actual || (vacío)}
}
+ {result?.error &&
{result.error}
}
+
+ );
+ })}
+
{ if (e.key === 'Escape') { e.stopPropagation(); setFullscreen(false); } }}>
+
+
{editorComponent(true)}
+
+ {testPanel}
+
+
+
+
+ {editorComponent(false)}
+
+ {testPanel}
+ {fullscreenOverlay}
+
+ {/* Canvas */}
+
+
+ {matchPct !== null && (
+
+
+ Coincidencia: {matchPct}%
+
+
+ )}
+
+
+ {/* Tools */}
+
+ {/* Palette */}
+
+ {fs &&
Paleta
}
+ {palette.map((color, i) => (
+
+
+
+
+
+
+
+
+
{ if (e.key === 'Escape') { e.stopPropagation(); setFullscreen(false); } }}>
+
+ {editorUI(true)}
+
+
+
+
+
+ {playing ? '♪ Reproduciendo' : '○ Silencio'}
+
+ {!fs && (
+
+ )}
+ {fs && (
+
+ )}
+
+
+ {/* Waveform selector */}
+
+
+
+ {WAVE_TYPES.map((w) => (
+
+ ))}
+
+
+
+ {/* Frequency */}
+
+
+ setFrequency(Number(e.target.value))}
+ className="w-full accent-primary" />
+
+
+ {/* Volume */}
+
+
+ setVolume(Number(e.target.value))}
+ className="w-full accent-primary" />
+
+
+ {/* Filter controls */}
+ {hasFilter && (
+ <>
+
+
+
+ {(['lowpass', 'highpass', 'bandpass'] as BiquadFilterType[]).map((ft) => (
+
+ ))}
+
+
+
+
+ setFilterFreq(Number(e.target.value))}
+ className="w-full accent-primary" />
+
+
+ )}
+
+
{content.instructions}
+
{ if (e.key === 'Escape') { e.stopPropagation(); setFullscreen(false); } }}>
+
+ {controls(true)}
+
+
+ {canvas(true)}
+
+
+ {canvas(false)}
+ {controls(false)}
+ {fullscreenOverlay}
+
+ );
+}
diff --git a/src/components/workbench/modules/synth/Knob.tsx b/src/components/workbench/modules/synth/Knob.tsx
new file mode 100644
index 0000000..728e206
--- /dev/null
+++ b/src/components/workbench/modules/synth/Knob.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import { useRef, useCallback, useState } from 'react';
+
+const SIZE = 32;
+const RADIUS = 12;
+const START_ANGLE = 225;
+const END_ANGLE = -45;
+const RANGE = 270;
+
+function polarToCart(cx: number, cy: number, r: number, deg: number) {
+ const rad = (deg - 90) * Math.PI / 180;
+ return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+
+function describeArc(cx: number, cy: number, r: number, startDeg: number, endDeg: number) {
+ const start = polarToCart(cx, cy, r, endDeg);
+ const end = polarToCart(cx, cy, r, startDeg);
+ const large = endDeg - startDeg <= 180 ? '0' : '1';
+ return `M ${start.x} ${start.y} A ${r} ${r} 0 ${large} 0 ${end.x} ${end.y}`;
+}
+
+interface KnobProps {
+ value: number;
+ min: number;
+ max: number;
+ onChange: (v: number) => void;
+ color?: string;
+ modulated?: boolean;
+ liveValue?: number;
+}
+
+export function Knob({ value, min, max, onChange, color = 'var(--accent, #6366f1)', modulated = false, liveValue }: KnobProps) {
+ const ref = useRef(null);
+ const dragRef = useRef<{ startY: number; startValue: number } | null>(null);
+ const inputRef = useRef(null);
+ const [editing, setEditing] = useState(false);
+ const [editText, setEditText] = useState('');
+
+ const displayNum = liveValue !== undefined ? liveValue : value;
+ const clampedDisplay = Math.max(min, Math.min(max, displayNum));
+ const norm = Math.max(0, Math.min(1, (clampedDisplay - min) / (max - min)));
+ const angleDeg = START_ANGLE - norm * RANGE;
+
+ const cx = SIZE / 2, cy = SIZE / 2;
+ const trackPath = describeArc(cx, cy, RADIUS, END_ANGLE, START_ANGLE);
+ const fillAngle = START_ANGLE - norm * RANGE;
+ const fillPath = norm > 0.001 ? describeArc(cx, cy, RADIUS, fillAngle, START_ANGLE) : '';
+ const dotPos = polarToCart(cx, cy, RADIUS - 4, angleDeg);
+
+ const baseNorm = Math.max(0, Math.min(1, (value - min) / (max - min)));
+ const baseAngle = START_ANGLE - baseNorm * RANGE;
+ const baseDotPos = polarToCart(cx, cy, RADIUS - 4, baseAngle);
+
+ const handlePointerDown = useCallback((e: React.PointerEvent) => {
+ if (editing) return;
+ e.preventDefault(); e.stopPropagation();
+ dragRef.current = { startY: e.clientY, startValue: value };
+ const handleMove = (me: PointerEvent) => {
+ if (!dragRef.current) return;
+ const dy = dragRef.current.startY - me.clientY;
+ const sensitivity = (max - min) / 200;
+ let newVal = dragRef.current.startValue + dy * sensitivity;
+ newVal = Math.max(min, Math.min(max, newVal));
+ if (max - min > 10 && Number.isInteger(min) && Number.isInteger(max)) {
+ newVal = Math.round(newVal);
+ }
+ onChange(newVal);
+ };
+ const handleUp = () => {
+ window.removeEventListener('pointermove', handleMove);
+ window.removeEventListener('pointerup', handleUp);
+ dragRef.current = null;
+ };
+ window.addEventListener('pointermove', handleMove);
+ window.addEventListener('pointerup', handleUp);
+ }, [value, min, max, onChange, editing]);
+
+ const handleWheel = useCallback((e: React.WheelEvent) => {
+ if (editing) return;
+ e.preventDefault(); e.stopPropagation();
+ const step = (max - min) / 100;
+ const newVal = Math.max(min, Math.min(max, value - Math.sign(e.deltaY) * step));
+ onChange(newVal);
+ }, [value, min, max, onChange, editing]);
+
+ const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+ e.preventDefault(); e.stopPropagation();
+ setEditText(String(value));
+ setEditing(true);
+ setTimeout(() => inputRef.current?.focus(), 0);
+ }, [value]);
+
+ const commitEdit = useCallback(() => {
+ const parsed = parseFloat(editText);
+ if (!isNaN(parsed)) {
+ onChange(Math.max(min, Math.min(max, parsed)));
+ }
+ setEditing(false);
+ }, [editText, min, max, onChange]);
+
+ if (editing) {
+ return (
+ e.stopPropagation()} style={{ width: SIZE, height: SIZE, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+ setEditText(e.target.value)}
+ onKeyDown={(e) => { e.stopPropagation(); if (e.key === 'Enter') commitEdit(); if (e.key === 'Escape') setEditing(false); }}
+ onBlur={commitEdit}
+ onPointerDown={(e) => e.stopPropagation()}
+ style={{
+ width: 48, height: 22, background: 'oklch(0.145 0 0)', border: '1px solid var(--accent, #6366f1)',
+ borderRadius: 3, color: 'var(--accent, #6366f1)', fontSize: 10, textAlign: 'center',
+ fontFamily: "'JetBrains Mono', monospace", outline: 'none',
+ }}
+ />
+
+ );
+ }
+
+ return (
+
+
+
+ {/* Toolbar */}
+
+
+ SYNTH
+
+
+
+ {!playing ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {/* Main area */}
+
e.preventDefault()}>
+
+ {/* Canvas */}
+
+ {/* Grid background */}
+
+
+ {/* Transformed layer */}
+
+ {/* Wire SVG */}
+
+
+ {/* Modules */}
+ {modules.map((mod) => (
+
+ ))}
+
+
+
+ {/* Palette (floating) */}
+
+ {categories.map((cat) => (
+
+
+ {cat}
+
+ {MODULE_REGISTRY.filter((m) => m.category === cat).map((m) => (
+
+ ))}
+
+ ))}
+
+
+ {/* Zoom controls */}
+
+
+
+
+
+
+ {/* Empty state */}
+ {modules.length === 0 && (
+
+ Selecciona un módulo del panel izquierdo para empezar
+
+ )}
+
+
+ {/* Status bar */}
+
+
Módulos: {modules.length}
+
Conexiones: {connections.length}
+
Zoom: {Math.round(zoom * 100)}%
+
+
Scroll: zoom · Click medio: pan · Click en cable: desconectar
+
+
{ if (e.key === 'Escape') { e.stopPropagation(); setFullscreen(false); } }}
+ tabIndex={0}
+ >
+ {synthContent(true)}
+
,
+ document.body
+ );
+
+ return (
+ <>
+ {synthContent(false)}
+ {fullscreenOverlay}
+
+ );
+}
+
+const zoomBtnStyle: React.CSSProperties = {
+ width: 36, height: 32, fontSize: 18, fontWeight: 600,
+ border: 'none', background: 'transparent', color: COLORS.text,
+ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+};
diff --git a/src/components/workbench/modules/synth/SynthModuleNode.tsx b/src/components/workbench/modules/synth/SynthModuleNode.tsx
new file mode 100644
index 0000000..70b022b
--- /dev/null
+++ b/src/components/workbench/modules/synth/SynthModuleNode.tsx
@@ -0,0 +1,457 @@
+'use client';
+
+import { useCallback, useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { getModuleDef, PORT_COLORS, type PortDef } from './moduleRegistry';
+import { SynthModule, SynthConnection } from './synthTypes';
+import { Knob } from './Knob';
+
+// Reaktor-matching colors
+const S = {
+ surface: 'oklch(0.205 0 0)',
+ surface2: 'oklch(0.235 0 0)',
+ border: 'oklch(1 0 0 / 10%)',
+ text: 'oklch(0.985 0 0)',
+ text2: 'oklch(0.556 0 0)',
+ accent: '#6366f1',
+ green: '#22c55e',
+ purple: '#a855f7',
+};
+
+const PORT_TO_PARAM: Record> = {
+ filter: { cutoff: 'frequency' },
+ oscillator: { freq: 'frequency', detune: 'detune' },
+ vca: { cv: 'gain' },
+};
+
+function simulateLFO(waveform: string, phase: number): number {
+ switch (waveform) {
+ case 'sine': return Math.sin(2 * Math.PI * phase);
+ case 'triangle': return 1 - 4 * Math.abs((phase % 1) - 0.5);
+ case 'sawtooth': return 2 * (phase % 1) - 1;
+ case 'square': return (phase % 1) < 0.5 ? 1 : -1;
+ default: return Math.sin(2 * Math.PI * phase);
+ }
+}
+
+// Key map for keyboard widget
+const KEY_MAP: Record = {
+ z: 0, s: 1, x: 2, d: 3, c: 4, v: 5, g: 6, b: 7, h: 8, n: 9, j: 10, m: 11,
+ q: 12, '2': 13, w: 14, '3': 15, e: 16, r: 17, '5': 18, t: 19, '6': 20, y: 21, '7': 22, u: 23,
+};
+
+function midiToFreq(midi: number): number {
+ return 440 * Math.pow(2, (midi - 69) / 12);
+}
+
+interface SynthModuleNodeProps {
+ module: SynthModule;
+ connections: SynthConnection[];
+ allModules: SynthModule[];
+ audioWrapper?: { _freqSig?: { value: number }; _gateSig?: { value: number } };
+ onParamChange: (moduleId: string, param: string, value: unknown) => void;
+ onDragStart: (moduleId: string, offsetX: number, offsetY: number) => void;
+ onPortMouseDown: (moduleId: string, port: string, direction: 'input' | 'output', x: number, y: number) => void;
+ onPortMouseUp: (moduleId: string, port: string, direction: 'input' | 'output', x: number, y: number) => void;
+ onDelete: (moduleId: string) => void;
+ getPortRef: (moduleId: string, port: string, direction: 'input' | 'output') => (el: HTMLDivElement | null) => void;
+}
+
+export function SynthModuleNode({
+ module: mod, connections, allModules, audioWrapper,
+ onParamChange, onDragStart, onPortMouseDown, onPortMouseUp, onDelete, getPortRef,
+}: SynthModuleNodeProps) {
+ const def = getModuleDef(mod.type);
+ if (!def) return null;
+
+ const params = { ...Object.fromEntries(Object.entries(def.params).map(([k, v]) => [k, v.default])), ...mod.params };
+
+ // Find modulated params
+ const modulatedParams = new Set();
+ const portMap = PORT_TO_PARAM[mod.type] || {};
+ for (const conn of connections) {
+ if (conn.to.moduleId === mod.id && portMap[conn.to.port]) {
+ modulatedParams.add(portMap[conn.to.port]);
+ }
+ }
+
+ // Live modulation visualization
+ const [liveValues, setLiveValues] = useState>({});
+ const rafRef = useRef(0);
+ const startTimeRef = useRef(performance.now() / 1000);
+
+ useEffect(() => {
+ if (modulatedParams.size === 0) { setLiveValues({}); return; }
+ let frameCount = 0;
+ const tick = () => {
+ frameCount++;
+ rafRef.current = requestAnimationFrame(tick);
+ if (frameCount % 4 !== 0) return;
+ const t = performance.now() / 1000 - startTimeRef.current;
+ const newValues: Record = {};
+ for (const conn of connections) {
+ if (conn.to.moduleId !== mod.id) continue;
+ const paramName = portMap[conn.to.port];
+ if (!paramName) continue;
+ const srcMod = allModules.find(m => m.id === conn.from.moduleId);
+ if (!srcMod) continue;
+ const baseValue = params[paramName] as number;
+ const getScale = () => {
+ if (mod.type === 'oscillator' && paramName === 'frequency') return baseValue * 0.5;
+ if (mod.type === 'filter' && paramName === 'frequency') return baseValue;
+ if (mod.type === 'vca' && paramName === 'gain') return 1;
+ return baseValue || 1;
+ };
+ if (srcMod.type === 'lfo') {
+ const srcDef = getModuleDef('lfo')!;
+ const lfoP = { ...Object.fromEntries(Object.entries(srcDef.params).map(([k, v]) => [k, v.default])), ...srcMod.params };
+ const phase = (t * (lfoP.frequency as number)) % 1;
+ const lfoVal = simulateLFO(lfoP.waveform as string, phase) * (lfoP.amplitude as number);
+ newValues[paramName] = baseValue + lfoVal * getScale();
+ } else if (srcMod.type === 'envelope') {
+ const envVal = Math.abs(Math.sin(t * 2)) * 0.8; // visual simulation
+ if (mod.type === 'vca' && paramName === 'gain') newValues[paramName] = envVal;
+ else newValues[paramName] = baseValue + envVal * getScale();
+ } else {
+ const pulseVal = Math.sin(2 * Math.PI * t) * 0.2;
+ newValues[paramName] = baseValue + pulseVal * getScale();
+ }
+ }
+ setLiveValues(newValues);
+ };
+ rafRef.current = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(rafRef.current);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [mod.id, mod.type, modulatedParams.size, connections.length]);
+
+ const [fullscreen, setFullscreen] = useState(false);
+
+ const handleHeaderDown = useCallback((e: React.MouseEvent) => {
+ if (e.button !== 0) return;
+ e.stopPropagation();
+ const rect = (e.currentTarget as HTMLElement).closest('[data-module]')!.getBoundingClientRect();
+ onDragStart(mod.id, e.clientX - rect.left, e.clientY - rect.top);
+ }, [mod.id, onDragStart]);
+
+ const isConnected = (portName: string, dir: 'input' | 'output') =>
+ connections.some(c => dir === 'input' ? (c.to.moduleId === mod.id && c.to.port === portName) : (c.from.moduleId === mod.id && c.from.port === portName));
+
+ const renderPort = (port: PortDef, dir: 'input' | 'output') => {
+ const color = PORT_COLORS[port.type];
+ const connected = isConnected(port.name, dir);
+ return (
+
+
{ (e.target as HTMLElement).style.transform = 'scale(1.3)'; }}
+ onMouseLeave={(e) => { (e.target as HTMLElement).style.transform = 'scale(1)'; }}
+ onMouseDown={(e) => {
+ e.stopPropagation();
+ const rect = e.currentTarget.getBoundingClientRect();
+ onPortMouseDown(mod.id, port.name, dir, rect.left + rect.width / 2, rect.top + rect.height / 2);
+ }}
+ onMouseUp={(e) => {
+ e.stopPropagation();
+ const rect = e.currentTarget.getBoundingClientRect();
+ onPortMouseUp(mod.id, port.name, dir, rect.left + rect.width / 2, rect.top + rect.height / 2);
+ }}
+ />
+ {port.label}
+
+ );
+ };
+
+ // Param color by unit
+ const paramColor = (unit?: string) => {
+ if (unit === 'Hz') return S.accent;
+ if (unit === 'dB') return S.green;
+ if (unit === 's') return S.purple;
+ return S.accent;
+ };
+
+ const formatVal = (v: number) => {
+ if (v >= 1000) return `${(v / 1000).toFixed(1)}k`;
+ if (v >= 100) return String(Math.round(v));
+ if (v >= 1) return v.toFixed(1);
+ return v.toFixed(3).replace(/0+$/, '').replace(/\.$/, '');
+ };
+
+ // Keyboard trigger
+ const triggerNote = useCallback((semitone: number, on: boolean) => {
+ if (!audioWrapper) return;
+ const octave = (mod.params.octave as number) ?? 4;
+ const midi = (octave + 1) * 12 + semitone;
+ if (on) {
+ if (audioWrapper._freqSig) audioWrapper._freqSig.value = midiToFreq(midi);
+ if (audioWrapper._gateSig) audioWrapper._gateSig.value = 1;
+ } else {
+ if (audioWrapper._gateSig) audioWrapper._gateSig.value = 0;
+ }
+ }, [audioWrapper, mod.params.octave]);
+
+ // Global keyboard listener for keyboard module
+ const activeKeysRef = useRef(new Set
());
+ useEffect(() => {
+ if (mod.type !== 'keyboard') return;
+ const down = (e: KeyboardEvent) => {
+ if (e.repeat) return;
+ const semi = KEY_MAP[e.key.toLowerCase()];
+ if (semi !== undefined && !activeKeysRef.current.has(e.key)) {
+ activeKeysRef.current.add(e.key);
+ triggerNote(semi, true);
+ }
+ };
+ const up = (e: KeyboardEvent) => {
+ const key = e.key.toLowerCase();
+ if (KEY_MAP[key] !== undefined) {
+ activeKeysRef.current.delete(e.key);
+ if (activeKeysRef.current.size === 0) triggerNote(0, false);
+ }
+ };
+ window.addEventListener('keydown', down);
+ window.addEventListener('keyup', up);
+ return () => { window.removeEventListener('keydown', down); window.removeEventListener('keyup', up); };
+ }, [mod.type, triggerNote]);
+
+ return (
+
+
+ {/* Header */}
+
+ {def.icon}
+ {def.name}
+ {(mod.type === 'keyboard' || mod.type === 'drumpad') && (
+
+ )}
+
+
+
+
+ {/* Input ports */}
+ {def.inputs.map(p => renderPort(p, 'input'))}
+
+ {/* Parameters — horizontal rows: label | knob | value */}
+ {Object.entries(def.params).map(([name, paramDef]) => {
+ const pColor = paramColor(paramDef.type === 'knob' ? paramDef.unit : undefined);
+ const live = liveValues[name];
+ const displayVal = live !== undefined ? live : params[name] as number;
+
+ if (paramDef.type === 'knob') {
+ return (
+
+ {paramDef.label || name}
+ onParamChange(mod.id, name, v)}
+ color={pColor} modulated={modulatedParams.has(name)} liveValue={live} />
+
+ {formatVal(displayVal)}{paramDef.unit ? ` ${paramDef.unit}` : ''}
+
+
+ );
+ }
+ if (paramDef.type === 'select') {
+ return (
+
+ {paramDef.label || name}
+
+
+ );
+ }
+ return null;
+ })}
+
+ {/* Keyboard widget */}
+ {mod.type === 'keyboard' && (
+
e.stopPropagation()}>
+
+
+ Z-M / Q-I keys · Oct {(mod.params.octave as number) ?? 4}
+
+
+ )}
+
+ {/* Drum Pad widget — 4x4 grid, 16 pads matching reaktor */}
+ {mod.type === 'drumpad' && (() => {
+ const PAD_NOTES = [
+ { note: 36, label: 'C2', color: '#ff4466' }, { note: 38, label: 'D2', color: '#ff6644' },
+ { note: 40, label: 'E2', color: '#ffcc00' }, { note: 42, label: 'F#2', color: '#44ff88' },
+ { note: 43, label: 'G2', color: '#00e5ff' }, { note: 45, label: 'A2', color: '#aa55ff' },
+ { note: 47, label: 'B2', color: '#ff4466' }, { note: 48, label: 'C3', color: '#ff6644' },
+ { note: 50, label: 'D3', color: '#ffcc00' }, { note: 52, label: 'E3', color: '#44ff88' },
+ { note: 53, label: 'F3', color: '#00e5ff' }, { note: 55, label: 'G3', color: '#aa55ff' },
+ { note: 57, label: 'A3', color: '#ff4466' }, { note: 59, label: 'B3', color: '#ff6644' },
+ { note: 60, label: 'C4', color: '#ffcc00' }, { note: 62, label: 'D4', color: '#44ff88' },
+ ];
+ return (
+
e.stopPropagation()}>
+
+ {PAD_NOTES.map((pad, i) => (
+
{
+ e.stopPropagation();
+ if (audioWrapper?._freqSig) audioWrapper._freqSig.value = midiToFreq(pad.note);
+ if (audioWrapper?._gateSig) audioWrapper._gateSig.value = 1;
+ (e.currentTarget as HTMLElement).style.background = pad.color;
+ (e.currentTarget as HTMLElement).style.color = '#000';
+ setTimeout(() => {
+ if (audioWrapper?._gateSig) audioWrapper._gateSig.value = 0;
+ (e.currentTarget as HTMLElement).style.background = `${pad.color}15`;
+ (e.currentTarget as HTMLElement).style.color = pad.color;
+ }, 150);
+ }}
+ >
+ {pad.label}
+
+ ))}
+
+
Tap pads to trigger
+
+ );
+ })()}
+
+ {/* Sequencer widget — SVG bar grid with pitch/gate */}
+ {mod.type === 'sequencer' && (() => {
+ const NOTE_NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+ const noteLabel = (midi: number) => NOTE_NAMES[midi % 12] + Math.floor(midi / 12 - 1);
+ const numSteps = (mod.params.steps as number) ?? 8;
+
+ // Init steps if needed
+ const DEFAULT_STEPS = [
+ { midi: 60, gate: true }, { midi: 63, gate: true }, { midi: 65, gate: false }, { midi: 67, gate: true },
+ { midi: 70, gate: true }, { midi: 67, gate: true }, { midi: 63, gate: false }, { midi: 60, gate: true },
+ { midi: 58, gate: true }, { midi: 60, gate: true }, { midi: 63, gate: false }, { midi: 65, gate: true },
+ { midi: 67, gate: true }, { midi: 72, gate: true }, { midi: 70, gate: false }, { midi: 67, gate: true },
+ ];
+ let steps = (mod.params._steps as { midi: number; gate: boolean }[]) || DEFAULT_STEPS.slice(0, numSteps);
+ while (steps.length < numSteps) steps = [...steps, { midi: 60, gate: false }];
+ steps = steps.slice(0, numSteps);
+
+ const CELL_W = 18;
+ const CELL_H = 50;
+ const W = CELL_W * numSteps;
+ const H = CELL_H + 16;
+
+ const toggleGate = (idx: number) => {
+ const newSteps = [...steps];
+ newSteps[idx] = { ...newSteps[idx], gate: !newSteps[idx].gate };
+ onParamChange(mod.id, '_steps', newSteps);
+ };
+ const changeNote = (idx: number, delta: number) => {
+ const newSteps = [...steps];
+ newSteps[idx] = { ...newSteps[idx], midi: Math.max(36, Math.min(96, newSteps[idx].midi + delta)) };
+ onParamChange(mod.id, '_steps', newSteps);
+ };
+
+ return (
+
e.stopPropagation()}>
+
+
+ ↑top/↓bot: pitch · mid: toggle
+
+
+ );
+ })()}
+
+ {/* Output ports */}
+ {def.outputs.map(p => renderPort(p, 'output'))}
+
+
+
+ {/* Fullscreen keyboard portal */}
+ {fullscreen && mod.type === 'keyboard' && createPortal(
+
{ if (e.key === 'Escape') setFullscreen(false); }}>
+
+
+ Oct {(mod.params.octave as number) ?? 4}
+
+
+ {[0, 2, 4, 5, 7, 9, 11].map((note, i) => (
+
triggerNote(note, true)} onPointerUp={() => triggerNote(note, false)} onPointerLeave={() => triggerNote(note, false)}>
+ {['C', 'D', 'E', 'F', 'G', 'A', 'B'][i]}
+
+ ))}
+ {[{ note: 1, after: 0 }, { note: 3, after: 1 }, { note: 6, after: 3 }, { note: 8, after: 4 }, { note: 10, after: 5 }].map(k => (
+
triggerNote(k.note, true)} onPointerUp={() => triggerNote(k.note, false)} onPointerLeave={() => triggerNote(k.note, false)} />
+ ))}
+
+
,
+ document.body
+ )}
+
+ );
+}
diff --git a/src/components/workbench/modules/synth/audioEngine.ts b/src/components/workbench/modules/synth/audioEngine.ts
new file mode 100644
index 0000000..c197c2e
--- /dev/null
+++ b/src/components/workbench/modules/synth/audioEngine.ts
@@ -0,0 +1,385 @@
+import * as Tone from 'tone';
+
+export interface AudioNodeWrapper {
+ node: Tone.ToneAudioNode | null;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ inputs: Record
;
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ outputs: Record;
+ dispose: () => void;
+}
+
+export function createAudioNode(
+ type: string,
+ params: Record
+): AudioNodeWrapper {
+ switch (type) {
+ case 'oscillator': {
+ const freq = (params.frequency as number) || 440;
+ const osc = new Tone.Oscillator({
+ type: (params.waveform as OscillatorType) || 'sawtooth',
+ frequency: freq,
+ detune: (params.detune as number) || 0,
+ }).start();
+ // Freq modulation scaler: LFO (-1..1) → Gain(freq*0.5) → osc.frequency
+ // This makes LFO sweep ±50% of the base frequency
+ const freqMod = new Tone.Gain(freq * 0.5);
+ freqMod.connect(osc.frequency);
+ return {
+ node: osc,
+ inputs: { freq: freqMod },
+ outputs: { out: osc },
+ dispose: () => { osc.stop(); freqMod.disconnect(); freqMod.dispose(); osc.dispose(); },
+ };
+ }
+
+ case 'lfo': {
+ const lfo = new Tone.LFO({
+ type: (params.waveform as OscillatorType) || 'sine',
+ frequency: (params.frequency as number) || 2,
+ amplitude: (params.amplitude as number) || 0.5,
+ min: -1,
+ max: 1,
+ }).start();
+ return {
+ node: lfo,
+ inputs: {},
+ outputs: { out: lfo },
+ dispose: () => { lfo.stop(); lfo.dispose(); },
+ };
+ }
+
+ case 'noise': {
+ const noise = new Tone.Noise((params.noiseType as 'white' | 'pink' | 'brown') || 'white').start();
+ return {
+ node: noise,
+ inputs: {},
+ outputs: { out: noise },
+ dispose: () => { noise.stop(); noise.dispose(); },
+ };
+ }
+
+ case 'keyboard': {
+ // Outputs constant freq signal + gate signal
+ // Controlled externally via setFreq/setGate methods
+ const freqSig = new Tone.Signal(440);
+ const gateSig = new Tone.Signal(0);
+ return {
+ node: null,
+ inputs: {},
+ outputs: { freq: freqSig, gate: gateSig },
+ dispose: () => { freqSig.dispose(); gateSig.dispose(); },
+ _freqSig: freqSig,
+ _gateSig: gateSig,
+ } as AudioNodeWrapper;
+ }
+
+ case 'sequencer': {
+ const freqSig = new Tone.Signal(440);
+ const gateSig = new Tone.Signal(0);
+ const bpm = (params.bpm as number) || 120;
+ const steps = (params.steps as number) || 8;
+ // Default sequence: C major scale fragment
+ const noteSequence = [60, 62, 64, 65, 67, 69, 71, 72, 72, 71, 69, 67, 65, 64, 62, 60];
+ let stepIndex = 0;
+ let intervalId: ReturnType | null = null;
+
+ const msPerStep = (60 / bpm / 4) * 1000; // 16th notes
+ intervalId = setInterval(() => {
+ const midi = noteSequence[stepIndex % noteSequence.length];
+ const freq = 440 * Math.pow(2, (midi - 69) / 12);
+ freqSig.value = freq;
+ gateSig.value = 1;
+ setTimeout(() => { gateSig.value = 0; }, msPerStep * 0.8);
+ stepIndex = (stepIndex + 1) % steps;
+ }, msPerStep);
+
+ return {
+ node: null,
+ inputs: {},
+ outputs: { freq: freqSig, gate: gateSig },
+ dispose: () => {
+ if (intervalId) clearInterval(intervalId);
+ freqSig.dispose(); gateSig.dispose();
+ },
+ };
+ }
+
+ case 'drumpad': {
+ const gateSig = new Tone.Signal(0);
+ return {
+ node: null,
+ inputs: {},
+ outputs: { gate: gateSig },
+ dispose: () => { gateSig.dispose(); },
+ _gateSig: gateSig,
+ } as AudioNodeWrapper;
+ }
+
+ case 'scope': {
+ const analyser = new Tone.Analyser('waveform', 2048);
+ return {
+ node: analyser,
+ inputs: { in: analyser },
+ outputs: {},
+ dispose: () => { analyser.dispose(); },
+ _analyser: analyser,
+ } as AudioNodeWrapper;
+ }
+
+ case 'filter': {
+ const freq = (params.frequency as number) || 1000;
+ const filter = new Tone.Filter({
+ type: (params.filterType as BiquadFilterType) || 'lowpass',
+ frequency: freq,
+ Q: (params.Q as number) || 1,
+ });
+ // Cutoff modulation scaler: LFO (-1..1) → Gain(freq) → filter.frequency
+ const cutoffMod = new Tone.Gain(freq);
+ cutoffMod.connect(filter.frequency);
+ return {
+ node: filter,
+ inputs: { in: filter, cutoff: cutoffMod },
+ outputs: { out: filter },
+ dispose: () => { cutoffMod.disconnect(); cutoffMod.dispose(); filter.dispose(); },
+ };
+ }
+
+ case 'envelope': {
+ const env = new Tone.Envelope({
+ attack: (params.attack as number) || 0.01,
+ decay: (params.decay as number) || 0.2,
+ sustain: (params.sustain as number) || 0.5,
+ release: (params.release as number) || 0.3,
+ });
+ // Use a constant signal of 1 shaped by the envelope
+ // Envelope scales a signal from 0 to 1
+ const constantOne = new Tone.Signal(1);
+ const envGain = new Tone.Gain(0);
+ constantOne.connect(envGain);
+ env.connect(envGain.gain);
+ // Auto-trigger the envelope (will sustain until release)
+ env.triggerAttack();
+ return {
+ node: env as unknown as Tone.ToneAudioNode,
+ inputs: {},
+ outputs: { out: envGain },
+ dispose: () => { env.triggerRelease(); env.dispose(); constantOne.dispose(); envGain.dispose(); },
+ _trigger: (on: boolean) => { if (on) env.triggerAttack(); else env.triggerRelease(); },
+ } as AudioNodeWrapper;
+ }
+
+ case 'vca': {
+ // VCA: when CV is connected, it should control the gain from 0 to 1
+ const gain = new Tone.Gain(0); // start at 0 so CV (envelope) controls it
+ const baseGainVal = (params.gain as number) ?? 1;
+ // If no CV connected, we want baseGain. We'll set it after.
+ // The CV input modulates gain.gain directly (0..1 range from envelope)
+ gain.gain.value = baseGainVal;
+ return {
+ node: gain,
+ inputs: { in: gain, cv: gain.gain },
+ outputs: { out: gain },
+ dispose: () => gain.dispose(),
+ };
+ }
+
+ case 'mixer': {
+ const g1 = new Tone.Gain((params.gain1 as number) ?? 0.5);
+ const g2 = new Tone.Gain((params.gain2 as number) ?? 0.5);
+ const g3 = new Tone.Gain((params.gain3 as number) ?? 0.5);
+ const sum = new Tone.Gain(1);
+ g1.connect(sum);
+ g2.connect(sum);
+ g3.connect(sum);
+ return {
+ node: sum,
+ inputs: { in1: g1, in2: g2, in3: g3 },
+ outputs: { out: sum },
+ dispose: () => { g1.dispose(); g2.dispose(); g3.dispose(); sum.dispose(); },
+ };
+ }
+
+ case 'delay': {
+ const delay = new Tone.FeedbackDelay({
+ delayTime: (params.delayTime as number) || 0.3,
+ feedback: (params.feedback as number) || 0.4,
+ wet: (params.wet as number) || 0.3,
+ });
+ return {
+ node: delay,
+ inputs: { in: delay },
+ outputs: { out: delay },
+ dispose: () => delay.dispose(),
+ };
+ }
+
+ case 'reverb': {
+ const reverb = new Tone.Reverb({
+ decay: (params.decay as number) || 2,
+ });
+ reverb.wet.value = (params.wet as number) || 0.3;
+ return {
+ node: reverb,
+ inputs: { in: reverb },
+ outputs: { out: reverb },
+ dispose: () => reverb.dispose(),
+ };
+ }
+
+ case 'distortion': {
+ const dist = new Tone.Distortion({
+ distortion: (params.distortion as number) || 0.4,
+ });
+ dist.wet.value = (params.wet as number) || 0.5;
+ return {
+ node: dist,
+ inputs: { in: dist },
+ outputs: { out: dist },
+ dispose: () => dist.dispose(),
+ };
+ }
+
+ case 'output': {
+ const leftGain = new Tone.Gain(1);
+ const rightGain = new Tone.Gain(1);
+ const merge = new Tone.Merge();
+ const masterVol = new Tone.Gain(Tone.dbToGain((params.volume as number) || -12));
+ leftGain.connect(merge, 0, 0); // left channel
+ rightGain.connect(merge, 0, 1); // right channel
+ merge.connect(masterVol);
+ masterVol.connect(Tone.getDestination());
+ return {
+ node: masterVol,
+ inputs: { left: leftGain, right: rightGain },
+ outputs: {},
+ dispose: () => {
+ leftGain.disconnect(); rightGain.disconnect();
+ merge.disconnect(); masterVol.disconnect();
+ leftGain.dispose(); rightGain.dispose();
+ merge.dispose(); masterVol.dispose();
+ },
+ };
+ }
+
+ default:
+ return { node: null, inputs: {}, outputs: {}, dispose: () => {} };
+ }
+}
+
+export function updateAudioParam(
+ wrapper: AudioNodeWrapper,
+ type: string,
+ paramName: string,
+ value: unknown
+) {
+ if (!wrapper.node) return;
+
+ switch (type) {
+ case 'oscillator': {
+ const osc = wrapper.node as Tone.Oscillator;
+ if (paramName === 'waveform') osc.type = value as OscillatorType;
+ if (paramName === 'frequency') osc.frequency.value = value as number;
+ if (paramName === 'detune') osc.detune.value = value as number;
+ break;
+ }
+ case 'lfo': {
+ const lfo = wrapper.node as Tone.LFO;
+ if (paramName === 'waveform') lfo.type = value as OscillatorType;
+ if (paramName === 'frequency') lfo.frequency.value = value as number;
+ if (paramName === 'amplitude') lfo.amplitude.value = value as number;
+ break;
+ }
+ case 'noise': {
+ const noise = wrapper.node as Tone.Noise;
+ if (paramName === 'noiseType') noise.type = value as 'white' | 'pink' | 'brown';
+ break;
+ }
+ case 'filter': {
+ const filter = wrapper.node as Tone.Filter;
+ if (paramName === 'filterType') filter.type = value as BiquadFilterType;
+ if (paramName === 'frequency') filter.frequency.value = value as number;
+ if (paramName === 'Q') filter.Q.value = value as number;
+ break;
+ }
+ case 'envelope': {
+ const env = wrapper.node as unknown as Tone.Envelope;
+ if (paramName === 'attack') env.attack = value as number;
+ if (paramName === 'decay') env.decay = value as number;
+ if (paramName === 'sustain') env.sustain = value as number;
+ if (paramName === 'release') env.release = value as number;
+ break;
+ }
+ case 'vca': {
+ const gain = wrapper.node as Tone.Gain;
+ if (paramName === 'gain') gain.gain.value = value as number;
+ break;
+ }
+ case 'delay': {
+ const delay = wrapper.node as Tone.FeedbackDelay;
+ if (paramName === 'delayTime') delay.delayTime.value = value as number;
+ if (paramName === 'feedback') delay.feedback.value = value as number;
+ if (paramName === 'wet') delay.wet.value = value as number;
+ break;
+ }
+ case 'reverb': {
+ const rev = wrapper.node as Tone.Reverb;
+ if (paramName === 'decay') rev.decay = value as number;
+ if (paramName === 'wet') rev.wet.value = value as number;
+ break;
+ }
+ case 'distortion': {
+ const dist = wrapper.node as Tone.Distortion;
+ if (paramName === 'distortion') dist.distortion = value as number;
+ if (paramName === 'wet') dist.wet.value = value as number;
+ break;
+ }
+ case 'output': {
+ const vol = wrapper.node as Tone.Gain;
+ if (paramName === 'volume') vol.gain.value = Tone.dbToGain(value as number);
+ break;
+ }
+ }
+}
+
+export function connectAudio(
+ fromWrapper: AudioNodeWrapper,
+ fromPort: string,
+ toWrapper: AudioNodeWrapper,
+ toPort: string
+) {
+ const output = fromWrapper.outputs[fromPort];
+ const input = toWrapper.inputs[toPort];
+ if (output && input) {
+ try {
+ // If connecting CV to VCA, zero the base gain so envelope controls it
+ if (toPort === 'cv' && toWrapper.node && 'gain' in toWrapper.node) {
+ (toWrapper.node as Tone.Gain).gain.value = 0;
+ }
+ output.connect(input);
+ } catch (e) {
+ console.warn('Audio connect failed:', e);
+ }
+ }
+}
+
+export function disconnectAudio(
+ fromWrapper: AudioNodeWrapper,
+ fromPort: string,
+ toWrapper: AudioNodeWrapper,
+ toPort: string
+) {
+ const output = fromWrapper.outputs[fromPort];
+ const input = toWrapper.inputs[toPort];
+ if (output && input) {
+ try {
+ output.disconnect(input);
+ } catch {
+ // Already disconnected
+ }
+ }
+}
+
+export async function startAudioContext() {
+ await Tone.start();
+}
diff --git a/src/components/workbench/modules/synth/moduleRegistry.ts b/src/components/workbench/modules/synth/moduleRegistry.ts
new file mode 100644
index 0000000..c07772e
--- /dev/null
+++ b/src/components/workbench/modules/synth/moduleRegistry.ts
@@ -0,0 +1,297 @@
+// === Module type definitions for the modular synth ===
+
+export type PortType = 'audio' | 'control' | 'trigger';
+export type PortDirection = 'input' | 'output';
+
+export interface PortDef {
+ name: string;
+ type: PortType;
+ label: string;
+}
+
+export type ParamType = 'knob' | 'select';
+
+export interface KnobParam {
+ type: 'knob';
+ min: number;
+ max: number;
+ default: number;
+ step?: number;
+ unit?: string;
+ label?: string;
+}
+
+export interface SelectParam {
+ type: 'select';
+ options: string[];
+ default: string;
+ label?: string;
+}
+
+export type ParamDef = KnobParam | SelectParam;
+
+export interface ModuleDef {
+ type: string;
+ name: string;
+ icon: string;
+ category: 'source' | 'filter' | 'modulation' | 'effect' | 'utility' | 'output';
+ inputs: PortDef[];
+ outputs: PortDef[];
+ params: Record;
+}
+
+export const PORT_COLORS: Record = {
+ audio: '#00e5ff',
+ control: '#ff6644',
+ trigger: '#ffcc00',
+};
+
+export const MODULE_REGISTRY: ModuleDef[] = [
+ // === SOURCES ===
+ {
+ type: 'oscillator',
+ name: 'Oscillator',
+ icon: '~',
+ category: 'source',
+ inputs: [
+ { name: 'freq', type: 'audio', label: 'Freq' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ waveform: { type: 'select', options: ['sine', 'square', 'sawtooth', 'triangle'], default: 'sawtooth' },
+ frequency: { type: 'knob', min: 20, max: 8000, default: 440, unit: 'Hz' },
+ detune: { type: 'knob', min: -1200, max: 1200, default: 0, unit: 'ct' },
+ },
+ },
+ {
+ type: 'lfo',
+ name: 'LFO',
+ icon: '∿',
+ category: 'source',
+ inputs: [],
+ outputs: [
+ { name: 'out', type: 'control', label: 'Out' },
+ ],
+ params: {
+ waveform: { type: 'select', options: ['sine', 'square', 'sawtooth', 'triangle'], default: 'sine' },
+ frequency: { type: 'knob', min: 0.1, max: 30, default: 2, step: 0.1, unit: 'Hz' },
+ amplitude: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ },
+ },
+ {
+ type: 'noise',
+ name: 'Noise',
+ icon: '▓',
+ category: 'source',
+ inputs: [],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ noiseType: { type: 'select', options: ['white', 'pink', 'brown'], default: 'white' },
+ },
+ },
+
+ // === INPUT / CONTROLLERS ===
+ {
+ type: 'keyboard',
+ name: 'Keyboard',
+ icon: '🎹',
+ category: 'source',
+ inputs: [],
+ outputs: [
+ { name: 'freq', type: 'audio', label: 'Freq' },
+ { name: 'gate', type: 'trigger', label: 'Gate' },
+ ],
+ params: {
+ octave: { type: 'knob', min: 1, max: 7, default: 4, step: 1 },
+ },
+ },
+ {
+ type: 'sequencer',
+ name: 'Sequencer',
+ icon: '▦',
+ category: 'source',
+ inputs: [],
+ outputs: [
+ { name: 'freq', type: 'audio', label: 'Freq' },
+ { name: 'gate', type: 'trigger', label: 'Gate' },
+ ],
+ params: {
+ bpm: { type: 'knob', min: 40, max: 300, default: 120, step: 1, unit: 'bpm' },
+ steps: { type: 'knob', min: 4, max: 16, default: 8, step: 1 },
+ },
+ },
+ {
+ type: 'drumpad',
+ name: 'Drum Pad',
+ icon: '🥁',
+ category: 'source',
+ inputs: [],
+ outputs: [
+ { name: 'gate', type: 'trigger', label: 'Gate' },
+ ],
+ params: {},
+ },
+ {
+ type: 'scope',
+ name: 'Scope',
+ icon: '📊',
+ category: 'utility',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ ],
+ outputs: [],
+ params: {},
+ },
+
+ // === FILTER ===
+ {
+ type: 'filter',
+ name: 'Filter',
+ icon: '▼',
+ category: 'filter',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ { name: 'cutoff', type: 'control', label: 'Cut' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ filterType: { type: 'select', options: ['lowpass', 'highpass', 'bandpass', 'notch'], default: 'lowpass' },
+ frequency: { type: 'knob', min: 20, max: 12000, default: 1000, unit: 'Hz' },
+ Q: { type: 'knob', min: 0.1, max: 20, default: 1, step: 0.1 },
+ },
+ },
+
+ // === MODULATION ===
+ {
+ type: 'envelope',
+ name: 'Envelope',
+ icon: '⌇',
+ category: 'modulation',
+ inputs: [
+ { name: 'gate', type: 'trigger', label: 'Gate' },
+ ],
+ outputs: [
+ { name: 'out', type: 'control', label: 'Out' },
+ ],
+ params: {
+ attack: { type: 'knob', min: 0.001, max: 2, default: 0.01, step: 0.001, unit: 's' },
+ decay: { type: 'knob', min: 0.001, max: 2, default: 0.2, step: 0.001, unit: 's' },
+ sustain: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ release: { type: 'knob', min: 0.001, max: 5, default: 0.3, step: 0.001, unit: 's' },
+ },
+ },
+
+ // === UTILITY ===
+ {
+ type: 'vca',
+ name: 'VCA',
+ icon: '▷',
+ category: 'utility',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ { name: 'cv', type: 'control', label: 'CV' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ gain: { type: 'knob', min: 0, max: 1, default: 1, step: 0.01 },
+ },
+ },
+ {
+ type: 'mixer',
+ name: 'Mixer',
+ icon: '⊕',
+ category: 'utility',
+ inputs: [
+ { name: 'in1', type: 'audio', label: 'In 1' },
+ { name: 'in2', type: 'audio', label: 'In 2' },
+ { name: 'in3', type: 'audio', label: 'In 3' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ gain1: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ gain2: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ gain3: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ },
+ },
+
+ // === EFFECTS ===
+ {
+ type: 'delay',
+ name: 'Delay',
+ icon: '⧖',
+ category: 'effect',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ delayTime: { type: 'knob', min: 0.01, max: 1, default: 0.3, step: 0.01, unit: 's' },
+ feedback: { type: 'knob', min: 0, max: 0.95, default: 0.4, step: 0.01 },
+ wet: { type: 'knob', min: 0, max: 1, default: 0.3, step: 0.01 },
+ },
+ },
+ {
+ type: 'reverb',
+ name: 'Reverb',
+ icon: '≈',
+ category: 'effect',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ decay: { type: 'knob', min: 0.1, max: 10, default: 2, step: 0.1, unit: 's' },
+ wet: { type: 'knob', min: 0, max: 1, default: 0.3, step: 0.01 },
+ },
+ },
+ {
+ type: 'distortion',
+ name: 'Distortion',
+ icon: '⚡',
+ category: 'effect',
+ inputs: [
+ { name: 'in', type: 'audio', label: 'In' },
+ ],
+ outputs: [
+ { name: 'out', type: 'audio', label: 'Out' },
+ ],
+ params: {
+ distortion: { type: 'knob', min: 0, max: 1, default: 0.4, step: 0.01 },
+ wet: { type: 'knob', min: 0, max: 1, default: 0.5, step: 0.01 },
+ },
+ },
+
+ // === OUTPUT ===
+ {
+ type: 'output',
+ name: 'Output',
+ icon: '🔊',
+ category: 'output',
+ inputs: [
+ { name: 'left', type: 'audio', label: 'L' },
+ { name: 'right', type: 'audio', label: 'R' },
+ ],
+ outputs: [],
+ params: {
+ volume: { type: 'knob', min: -60, max: 0, default: -12, unit: 'dB' },
+ },
+ },
+];
+
+export function getModuleDef(type: string): ModuleDef | undefined {
+ return MODULE_REGISTRY.find((m) => m.type === type);
+}
diff --git a/src/components/workbench/modules/synth/synthTypes.ts b/src/components/workbench/modules/synth/synthTypes.ts
new file mode 100644
index 0000000..fa1a497
--- /dev/null
+++ b/src/components/workbench/modules/synth/synthTypes.ts
@@ -0,0 +1,18 @@
+export interface SynthModule {
+ id: string;
+ type: string;
+ x: number;
+ y: number;
+ params: Record;
+}
+
+export interface SynthConnection {
+ id: string;
+ from: { moduleId: string; port: string };
+ to: { moduleId: string; port: string };
+}
+
+export interface SynthState {
+ modules: SynthModule[];
+ connections: SynthConnection[];
+}
diff --git a/src/lib/challenge-engine/verifier.ts b/src/lib/challenge-engine/verifier.ts
index b15f1d2..d74132f 100644
--- a/src/lib/challenge-engine/verifier.ts
+++ b/src/lib/challenge-engine/verifier.ts
@@ -1,4 +1,4 @@
-import { Challenge, VerificationResult } from '@/types/challenge';
+import { Challenge, VerificationResult, CodeEditorContent, SignalPlaygroundContent, PixelEditorContent } from '@/types/challenge';
import { CircuitBuilderContent, CircuitState } from '@/types/circuit';
import { ElectronicsContent, ElectronicCircuitState } from '@/types/electronics';
import { simulateCircuit } from '@/components/workbench/modules/circuit-builder/simulateCircuit';
@@ -19,6 +19,12 @@ export function verifyAnswer(
return verifyCircuit(content, userAnswer as string, challenge.xpReward);
case 'electronics-lab':
return verifyElectronics(content, userAnswer as string, challenge.xpReward);
+ case 'code-editor':
+ return verifyCode(content, userAnswer as string, challenge.xpReward);
+ case 'signal-playground':
+ return verifySignal(content, userAnswer as string, challenge.xpReward);
+ case 'pixel-editor':
+ return verifyPixels(content, userAnswer as string, challenge.xpReward);
default:
return { correct: false, message: 'Tipo de reto no soportado', xpEarned: 0 };
}
@@ -165,3 +171,107 @@ function verifyElectronics(
const msg = messages.length > 0 ? messages[0] : `${passed} de ${content.probes.length} mediciones correctas.`;
return { correct: false, message: msg, xpEarned: 0 };
}
+
+function verifyCode(
+ content: CodeEditorContent,
+ userAnswer: string,
+ xpReward: number
+): VerificationResult {
+ if (!userAnswer.trim()) {
+ return { correct: false, message: 'Escribe tu código primero', xpEarned: 0 };
+ }
+
+ let passed = 0;
+ for (const tc of content.testCases) {
+ if (content.language === 'javascript') {
+ try {
+ const fn = new Function('input', userAnswer);
+ const result = String(fn(tc.input) ?? '').trim();
+ if (result === tc.expectedOutput.trim()) passed++;
+ } catch {
+ return { correct: false, message: 'Error al ejecutar tu código', xpEarned: 0 };
+ }
+ } else {
+ // For non-JS languages, check if code contains expected patterns
+ if (userAnswer.trim().includes(tc.expectedOutput.trim())) passed++;
+ }
+ }
+
+ if (passed === content.testCases.length) {
+ return { correct: true, message: '¡Todos los tests pasan! 🎉', xpEarned: xpReward };
+ }
+
+ return {
+ correct: false,
+ message: `${passed} de ${content.testCases.length} tests correctos. Revisa tu código.`,
+ xpEarned: 0,
+ };
+}
+
+function verifySignal(
+ content: SignalPlaygroundContent,
+ userAnswer: string,
+ xpReward: number
+): VerificationResult {
+ try {
+ const state = JSON.parse(userAnswer);
+ const checks: string[] = [];
+
+ if (content.targetFrequency) {
+ const tolerance = content.targetFrequency * 0.05; // 5%
+ if (Math.abs(state.frequency - content.targetFrequency) > tolerance) {
+ checks.push(`Frecuencia: esperado ~${content.targetFrequency}Hz, tienes ${state.frequency}Hz`);
+ }
+ }
+ if (content.targetWaveform && state.waveform !== content.targetWaveform) {
+ checks.push(`Forma de onda: esperado ${content.targetWaveform}, tienes ${state.waveform}`);
+ }
+
+ if (checks.length === 0) {
+ return { correct: true, message: '¡Configuración correcta! 🎵', xpEarned: xpReward };
+ }
+ return { correct: false, message: checks[0], xpEarned: 0 };
+ } catch {
+ return { correct: false, message: 'Ajusta los parámetros del sintetizador', xpEarned: 0 };
+ }
+}
+
+function verifyPixels(
+ content: PixelEditorContent,
+ userAnswer: string,
+ xpReward: number
+): VerificationResult {
+ if (content.mode !== 'match' || !content.targetImage) {
+ // Freeform mode — just check that something was drawn
+ try {
+ const grid: number[][] = JSON.parse(userAnswer);
+ const hasContent = grid.some((row) => row.some((c) => c !== 0));
+ if (hasContent) {
+ return { correct: true, message: '¡Dibujo completado! 🎨', xpEarned: xpReward };
+ }
+ return { correct: false, message: 'Dibuja algo en el canvas', xpEarned: 0 };
+ } catch {
+ return { correct: false, message: 'Error en el canvas', xpEarned: 0 };
+ }
+ }
+
+ // Match mode
+ try {
+ const grid: number[][] = JSON.parse(userAnswer);
+ let total = 0;
+ let matches = 0;
+ for (let y = 0; y < content.height; y++) {
+ for (let x = 0; x < content.width; x++) {
+ total++;
+ if (grid[y]?.[x] === (content.targetImage[y]?.[x] ?? 0)) matches++;
+ }
+ }
+ const pct = Math.round((matches / total) * 100);
+ if (pct >= 95) {
+ return { correct: true, message: `¡Imagen correcta! (${pct}%) 🎨`, xpEarned: xpReward };
+ }
+ return { correct: false, message: `Coincidencia: ${pct}%. Necesitas al menos 95%.`, xpEarned: 0 };
+ } catch {
+ return { correct: false, message: 'Error en el canvas', xpEarned: 0 };
+ }
+}
diff --git a/src/types/challenge.ts b/src/types/challenge.ts
index 6a3013a..b4d507b 100644
--- a/src/types/challenge.ts
+++ b/src/types/challenge.ts
@@ -28,7 +28,42 @@ export interface MultipleChoiceContent {
import { CircuitBuilderContent } from './circuit';
import { ElectronicsContent } from './electronics';
-export type ChallengeContent = MathInputContent | MultipleChoiceContent | CircuitBuilderContent | ElectronicsContent;
+export interface CodeEditorContent {
+ type: 'code-editor';
+ language: 'asm' | 'c' | 'verilog' | 'html' | 'javascript';
+ starterCode: string;
+ testCases: Array<{
+ input: string;
+ expectedOutput: string;
+ label?: string;
+ }>;
+}
+
+export interface SignalPlaygroundContent {
+ type: 'signal-playground';
+ mode: 'waveform' | 'oscillator' | 'filter' | 'synth';
+ targetFrequency?: number;
+ targetWaveform?: 'sine' | 'square' | 'sawtooth' | 'triangle';
+ instructions: string;
+}
+
+export interface PixelEditorContent {
+ type: 'pixel-editor';
+ width: number;
+ height: number;
+ palette: string[];
+ targetImage?: number[][]; // grid of palette indices
+ mode: 'freeform' | 'match';
+}
+
+export type ChallengeContent =
+ | MathInputContent
+ | MultipleChoiceContent
+ | CircuitBuilderContent
+ | ElectronicsContent
+ | CodeEditorContent
+ | SignalPlaygroundContent
+ | PixelEditorContent;
export interface Challenge {
id: string;