refactor(timeline-editor): extract viewport and playback to ES6 modules

Extract zoom/scroll/playback code from monolithic index.html into
separate modules for better code organization:

- timeline-viewport.js: Zoom, scroll sync, indicator positioning (133 lines)
- timeline-playback.js: Audio loading, playback, waveform rendering (303 lines)
- index.html: Reduced from 1093 to 853 lines (-22%)

Requires HTTP server for ES6 module imports. Updated README with usage.

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

1 files changed, 11 insertions, 2 deletions

diff --git a/tools/timeline_editor/README.md b/tools/timeline_editor/README.md
index 72b5ae0..66e39bd 100644
--- a/tools/timeline_editor/README.md
+++ b/tools/timeline_editor/README.md
@@ -39,7 +39,12 @@ This helps identify performance hotspots in your timeline.
 
 ## Usage
 
-1. **Open:** `open tools/timeline_editor/index.html` or double-click in browser
+1. **Open:** Requires HTTP server (ES6 modules):
+   ```bash
+   cd tools/timeline_editor
+   python3 -m http.server 8080
+   ```
+   Then open: `http://localhost:8080`
 2. **Load timeline:** Click "📂 Load timeline.seq" → select `workspaces/main/timeline.seq`
 3. **Load audio:** Click "🎵 Load Audio (WAV)" → select audio file
 4. **Auto-load via URL:** `index.html?seq=timeline.seq&wav=audio.wav`
@@ -125,7 +130,11 @@ open "tools/timeline_editor/index.html?seq=../../workspaces/main/timeline.seq"
 
 ## Technical Notes
 
-- Pure HTML/CSS/JavaScript (no dependencies, works offline)
+- Modular ES6 structure (requires HTTP server, not file://)
+  - `index.html` - Main editor and rendering
+  - `timeline-viewport.js` - Zoom/scroll/indicator control
+  - `timeline-playback.js` - Audio playback and waveform
+- No external dependencies
 - **Internal representation uses beats** (not seconds)
 - Sequences have absolute times (beats), effects are relative to parent sequence
 - BPM used for seconds conversion (tooltips, audio waveform alignment)