+
CHAIN:
+ {chain.length === 0 &&
Chưa có FX — bấm [+] để thêm (signal đi thẳng: Source → Fader)}
+ {chain.map((m, idx) => {
+ const meta = TRACK_FX_META[m.type] || { name: m.type, icon: 'circle', color: '#94a3b8', sub: '' };
+ const on = m.active !== false;
+ return (
+
{ dragChainIndexRef.current = idx; e.dataTransfer.effectAllowed = 'move'; }}
+ onDragOver={e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }}
+ onDrop={e => { e.preventDefault(); const from = dragChainIndexRef.current; if (from !== null && from !== idx) { const next = [...chain]; const mv = next.splice(from, 1)[0]; next.splice(idx, 0, mv); setChain(next); } dragChainIndexRef.current = null; }}
+ onClick={() => setActiveType(m.type)}
+ className={`w-36 h-12 rounded-lg p-2 flex items-center justify-between cursor-pointer transition-all shrink-0 ${activeType === m.type ? 'border-2 border-cyan-400 bg-slate-800' : 'bg-slate-900 border border-slate-800 hover:border-slate-600'}`}>
+
+
+
+
{meta.name}
+
{idx + 1}. {meta.sub}
+
+
+
+
+ );
+ })}
+
+
+
+
Active Module: {activeMod ? (TRACK_FX_META[activeMod.type]?.name || activeMod.type) : '—'}
+ {activeMod && activeMod.type === 'eq' && (
+
+ EQ Preset:
+
+
+ )}
+
+
+ {!activeMod &&
Chưa có module. Bấm [+] để thêm EQ / Compressor / Limiter / Exciter / Rebalance.
}
+
+ {activeMod && activeMod.type === 'eq' && activeIdx >= 0 && (
+
+
+ {[['g1', 'BAND 1 (LOW)', '100 Hz', '#22d3ee'], ['g2', 'BAND 2 (MID LOW)', '800 Hz', '#fbbf24'], ['g3', 'BAND 3 (MID HIGH)', '3.2 kHz', '#a855f7'], ['g4', 'BAND 4 (HIGH)', '10 kHz', '#34d399']].map(([key, label, freq, color]) => (
+
+ {slider(label, ap[key] !== undefined ? ap[key] : 0, -12, 12, 0.1, color, v => setParams(activeIdx, { [key]: v }), v => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`)}
+
{freq}
+
+ ))}
+
+ {/* Interactive Module Vector Display Canvas (EQ response curve) */}
+
+
VECTOR DISPLAY — EQ RESPONSE20Hz – 20kHz
+
+
+
+ )}
+
+ {activeMod && activeMod.type === 'compressor' && activeIdx >= 0 && (
+
+
{slider('THRESHOLD', ap.threshold, -60, 0, 0.5, '#fbbf24', v => setParams(activeIdx, { threshold: v }), v => `${v.toFixed(1)} dB`)}
+
{slider('RATIO', ap.ratio, 1, 20, 0.5, '#f59e0b', v => setParams(activeIdx, { ratio: v }), v => `${v.toFixed(1)} : 1`)}
+
{slider('MAKE-UP', ap.makeup, 0, 12, 0.1, '#f59e0b', v => setParams(activeIdx, { makeup: v }), v => `${v.toFixed(1)} dB`)}
+
+ )}
+
+ {activeMod && activeMod.type === 'limiter' && activeIdx >= 0 && (
+
+
{slider('CEILING', ap.ceiling, -24, 0, 0.1, '#f43f5e', v => setParams(activeIdx, { ceiling: v }), v => `${v.toFixed(1)} dB`)}
+
True-Peak limiting
Ratio 20:1 · Knee 0dB
+
+ )}
+
+ {activeMod && activeMod.type === 'exciter' && activeIdx >= 0 && (
+
+
{slider('DRIVE / MIX', ap.drive, 0, 100, 1, '#c084fc', v => setParams(activeIdx, { drive: v }), v => `${v}%`)}
+
WaveShaper saturation
High-pass 2kHz · 4× oversampled
+
+ )}
+
+ {activeMod && activeMod.type === 'rebalance' && activeIdx >= 0 && (
+
+
{slider('MID GAIN', ap.mid, -12, 12, 0.1, '#38bdf8', v => setParams(activeIdx, { mid: v }), v => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`)}
+
{slider('SIDE GAIN', ap.side, -12, 12, 0.1, '#22d3ee', v => setParams(activeIdx, { side: v }), v => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`)}
+
+ )}
+
+
+ {/* WAVE OBSERVER — REAL-TIME OSCILLOSCOPE (unified_fx_rack_panel_update.md §III.3) */}
+
+
+
+ WAVE OBSERVER
+ Real-time Oscilloscope
+
+
Context: {track.name}
+
+
+
+
+
+
+
+ Channel:
+
+
+
+ Mode:
+
+
+
+ Duration:
+ {scopeDuration.toFixed(2)}s
+ setScopeDuration(parseFloat(e.target.value))} className="w-16 h-1 cursor-pointer" style={{ accentColor: '#38bdf8' }} />
+
+
+ V.Zoom:
+ {scopeZoom > 0 ? '+' : ''}{scopeZoom.toFixed(1)} dB
+ setScopeZoom(parseFloat(e.target.value))} className="w-16 h-1 cursor-pointer" style={{ accentColor: '#38bdf8' }} />
+
+
+
+