feat(phase2): Canvas 2D renderer with palettes, controls, and Room layout

What

Phase 2 implementation: Canvas 2D Renderer with full control panel and color palettes.

Key additions:

• Color palette system (rainbow, heatmap, cool, monochrome) in CanvasStripRenderer
• Control panel with sliders for smoothing, sensitivity/gain, and LED count
• Palette selector dropdown
• Gain amplification applied per-band before color conversion

Files changed:

• src/renderers/CanvasStripRenderer.ts — added ColorPalette type, setPalette(), setGain(), getColor() switch with 4 palettes
• src/components/ControlPanel.ts — full UI implementation with 3 sliders + palette select, event wiring to audio/renderer
• docs/PHASES.md — marked Phase 2 items as complete ✅

How

• Karpathy principle: surgical changes, explicit state, no magic numbers
• Palettes implemented as HSL range calculations; brightness derived from amplified amplitude (clamped [0,1])
• ControlPanel builds DOM dynamically; all state changes flow directly to audio/renderer instances
• Canvas uses devicePixelRatio for crisp rendering; responsive by default

Validation

Manual test:

1. npm run dev → open http://localhost:5173
2. Click "Start Mic" → grant microphone permission
3. Play music → see 60 bars bounce
4. Adjust Smooth slider (0.1–0.95) → smoothing changes
5. Adjust Gain slider (0.5–3.0) → amplitude scaling changes
6. Adjust LEDs slider (8–120) → number of rendered bars changes
7. Select Palette (Rainbow, Heatmap, Cool, Mono) → color mapping changes

All interactions are immediate, no console errors.

Blast radius

Frontend-only change. No backend dependencies. CSS minimal additions only.

---

Generated by Hermes Agent — Innovation Day Project (Phase 2)