feat: Migrate Timeline/Waveform rendering to Canvas/WebGL

[ChuxiJ]

Context

From DAW tech stack research: Bitwig Studio 5.2+ uses GPU-accelerated rendering for smooth UI. Our Piano Roll already uses 2D Canvas, but Timeline waveforms still use SVG paths which can be a performance bottleneck with many tracks/clips.

All major DAWs use hardware-accelerated rendering for their arrangement views. Web DAWs that feel "pro" need Canvas/WebGL for waveform-heavy views.

Goal

Migrate Timeline waveform rendering and arrangement view from SVG to Canvas (or WebGL where beneficial) for better performance with large projects.

Acceptance Criteria

• Timeline waveform rendering uses Canvas instead of SVG paths
• Smooth scrolling and zooming with 20+ tracks of audio clips
• Clip block rendering (borders, labels, colors) in Canvas
• Selection overlays and cursor rendering in Canvas
• No visual regression from current SVG rendering
• FPS benchmark: maintain 60fps during scroll/zoom with 20+ tracks
• Existing E2E tests for timeline interactions still pass

Strategic Context

Industry benchmark: Bitwig GPU-accelerated UI, Ableton's custom OpenGL renderer
Our current state: Piano Roll ✅ Canvas, Timeline ❌ SVG
Reference: .claude/references/interaction-design.md for interaction patterns

Part of: DAW Best Practices Research Series

[ChuxiJ]

Priority Update: P0 → P2

Timeline rendering performance is noticeable but not blocking basic workflow. React.memo optimization (new P1 issue) provides higher ROI with lower risk than a full Canvas/WebGL migration.

Re-prioritized as part of Experience Polish Series.

---

Generated by Claude Code