feat(spectral_editor): Complete Phase 2 milestone - Full-featured web editor

MILESTONE: Spectral Brush Editor Phase 2 Complete (February 6, 2026)

Phase 2 delivers a production-ready web-based editor for creating procedural
audio by tracing spectrograms with parametric Bezier curves. This tool enables
replacing 5KB .spec binary assets with ~100 bytes of C++ code (50-100× compression).

Core Features Implemented:
========================

Audio I/O:
- Load .wav and .spec files as reference spectrograms
- Real-time audio preview (procedural vs original)
- Live volume control with GainNode (updates during playback)
- Export to procedural_params.txt (human-readable, re-editable format)
- Generate C++ code (copy-paste ready for demo integration)

Curve Editing:
- Multi-curve support with individual colors and volumes
- Bezier curve control points (frame, frequency, amplitude)
- Drag-and-drop control point editing
- Per-curve volume control (0-100%)
- Right-click to delete control points
- Curves only render within control point range (no spill)

Profile System (All 3 types implemented):
- Gaussian: exp(-(dist² / σ²)) - smooth harmonic falloff
- Decaying Sinusoid: exp(-decay × dist) × cos(ω × dist) - metallic resonance
- Noise: noise × exp(-(dist² / decay²)) - textured grit with decay envelope

Visualization:
- Log-scale frequency axis (20 Hz to 16 kHz) for better bass visibility
- Logarithmic dB-scale intensity mapping (-60 dB to +40 dB range)
- Reference opacity slider (0-100%) for mixing original/procedural views
- Playhead indicator (red dashed line) during playback
- Mouse crosshair with tooltip (frame number, frequency)
- Control point info panel (frame, frequency, amplitude)

Real-time Spectrum Viewer (NEW):
- Always-visible bottom-right overlay (200×100px)
- Shows frequency spectrum for frame under mouse (hover mode)
- Shows current playback frame spectrum (playback mode)
- Dual display: Reference (green) + Procedural (red) overlaid
- dB-scale bar heights for accurate visualization
- Frame number label (red during playback, gray when hovering)

Rendering Architecture:
- Destination-to-source pixel mapping (prevents gaps in log-scale)
- Offscreen canvas compositing for proper alpha blending
- Alpha channel for procedural intensity (pure colors, not dimmed)
- Steeper dB falloff for procedural curves (-40 dB floor vs -60 dB reference)

UI/UX:
- Undo/Redo system (50-action history)
- Keyboard shortcuts (1/2/Space for playback, Ctrl+Z/Ctrl+Shift+Z, Delete, Esc)
- File load confirmation (warns about unsaved curves)
- Automatic curve reset on new file load

Technical Details:
- DCT/IDCT implementation (JavaScript port matching C++ runtime)
- Overlap-add synthesis with Hanning window
- Web Audio API integration (32 kHz sample rate)
- Zero external dependencies (pure HTML/CSS/JS)

Files Modified:
- tools/spectral_editor/script.js (~1730 lines, main implementation)
- tools/spectral_editor/index.html (UI structure, spectrum viewer)
- tools/spectral_editor/style.css (VSCode dark theme styling)
- tools/spectral_editor/README.md (updated features, roadmap)

Phase 3 TODO (Next):
===================
- Effect combination system (noise + Gaussian modulation, layer compositing)
- Improved C++ code testing (validation, edge cases)
- Better frequency scale (mu-law or perceptual scale, less bass-heavy)
- Pre-defined shape library (kick, snare, hi-hat templates)
- Load procedural_params.txt back into editor (re-editing)
- FFT-based DCT optimization (O(N log N) vs O(N²))

Integration:
- Generate C++ code → Copy to src/audio/procedural_samples.cc
- Add PROC() entry to assets/final/demo_assets.txt
- Rebuild demo → Use AssetId::SOUND_PROC

handoff(Claude): Phase 2 complete. Next: FFT implementation task for performance optimization.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 49 insertions, 0 deletions

diff --git a/tools/spectral_editor/style.css b/tools/spectral_editor/style.css
index 36b4eb3..fa71d1d 100644
--- a/tools/spectral_editor/style.css
+++ b/tools/spectral_editor/style.css
@@ -87,6 +87,30 @@ header h1 {
     display: none;
 }
 
+/* Mini spectrum viewer (bottom-right overlay) */
+.spectrum-viewer {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 200px;
+    height: 100px;
+    background: rgba(30, 30, 30, 0.9);
+    border: 1px solid #3e3e42;
+    border-radius: 3px;
+    display: block;  /* Always visible */
+    pointer-events: none;  /* Don't interfere with mouse events */
+}
+
+.spectrum-viewer.active {
+    display: block;  /* Keep for backward compatibility */
+}
+
+#spectrumCanvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
 .canvas-overlay p {
     font-size: 16px;
     margin: 8px 0;
@@ -173,6 +197,31 @@ header h1 {
     border-color: #0e639c;
 }
 
+/* Point info panel */
+.point-info {
+    margin-top: 10px;
+    padding: 10px;
+    background: #2d2d30;
+    border-radius: 3px;
+    font-size: 12px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+}
+
+.info-label {
+    color: #858585;
+    font-weight: 600;
+}
+
+.info-value {
+    color: #d4d4d4;
+    font-family: monospace;
+}
+
 /* Control panel (bottom) */
 .control-panel {
     background: #252526;