From 454fddc35e8b31600a82040e88eb652277b695c7 Mon Sep 17 00:00:00 2001
From: Claude <claude@groll.cloud>
Date: Mon, 6 Apr 2026 23:30:55 +0000
Subject: [PATCH] feat(04-01): data model changes + HTML layout restructure

- Add CueModel.duration field (float = 4.0) for block length in seconds
- Add AnalysisBlock.calibration_offset field (float = 0.03) for librosa bias
- Replace main-area animation grid with timeline canvas layout (toolbar, canvas, inspector)
- Move ANIMATIONS panel into sidebar below DEVICES panel
- Add timeline-toolbar with zoom slider, beat offset input, snap toggle
---
 lightsync/frontend/index.html | 52 ++++++++++++++---------------------
 lightsync/models/show.py      |  2 ++
 2 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/lightsync/frontend/index.html b/lightsync/frontend/index.html
index d5e601f..1f5938c 100644
--- a/lightsync/frontend/index.html
+++ b/lightsync/frontend/index.html
@@ -42,42 +42,30 @@
                     </form>
                 </details>
             </div>
+            <div class="panel" style="flex: 0 0 auto;">
+                <div class="panel-header">ANIMATIONS</div>
+                <div class="panel-content animation-list" id="animation-palette">
+                </div>
+            </div>
         </aside>
 
         <main class="main-area">
-            <div class="section-header">ANIMATIONS</div>
-            <div class="animation-list" id="animation-grid">
-                <button class="anim-tile active" data-anim="beat_pulse">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">BEAT_PULSE</span>
-                    <span class="anim-desc">flash on every beat</span>
-                </button>
-                <button class="anim-tile" data-anim="strobe">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">STROBE</span>
-                    <span class="anim-desc">rapid flash burst</span>
-                </button>
-                <button class="anim-tile" data-anim="color_wave">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">COLOR_WAVE</span>
-                    <span class="anim-desc">rolling color sweep</span>
-                </button>
-                <button class="anim-tile" data-anim="rainbow">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">RAINBOW</span>
-                    <span class="anim-desc">cycling hue rotation</span>
-                </button>
-                <button class="anim-tile" data-anim="fire">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">FIRE</span>
-                    <span class="anim-desc">warm flickering flames</span>
-                </button>
-                <button class="anim-tile" data-anim="chase">
-                    <span class="anim-cursor">&gt;</span>
-                    <span class="anim-name">CHASE</span>
-                    <span class="anim-desc">single pixel chase</span>
-                </button>
+            <div id="timeline-toolbar" class="timeline-toolbar">
+                <label class="toolbar-field">
+                    <span class="toolbar-label">ZOOM</span>
+                    <input type="range" id="zoom-slider" min="20" max="400" step="10" value="100">
+                </label>
+                <div class="toolbar-sep"></div>
+                <label class="toolbar-field">
+                    <span class="toolbar-label">BEAT OFFSET</span>
+                    <input type="number" id="beat-offset" step="0.005" min="-0.2" max="0.2" value="0.030">
+                    <span class="toolbar-unit">s</span>
+                </label>
+                <div class="toolbar-sep"></div>
+                <button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
             </div>
+            <canvas id="timeline-canvas"></canvas>
+            <div id="block-inspector" class="block-inspector" style="display:none;"></div>
         </main>
 
         <footer class="transport-bar">
diff --git a/lightsync/models/show.py b/lightsync/models/show.py
index 7149ba4..4e849c1 100644
--- a/lightsync/models/show.py
+++ b/lightsync/models/show.py
@@ -16,6 +16,7 @@ class AudioRef(BaseModel):
 class CueModel(BaseModel):
     id: UUID = Field(default_factory=uuid4)
     timestamp: float
+    duration: float = 4.0  # block length in seconds; defaults for old files
     mode: Literal["animation", "frame_sequence"] = "animation"
     animation: str | None = None
     params: dict[str, Any] = Field(default_factory=dict)
@@ -31,6 +32,7 @@ class AnalysisBlock(BaseModel):
     tempo_bpm: float | None = None
     beat_times: list[float] = Field(default_factory=list)
     onset_times: list[float] = Field(default_factory=list)
+    calibration_offset: float = 0.03  # seconds; compensates librosa latency bias
 
 
 class ShowModel(BaseModel):