From e0e412fcd16076b770967b5b729394ae2e597c62 Mon Sep 17 00:00:00 2001
From: Claude <claude@groll.cloud>
Date: Tue, 7 Apr 2026 10:14:16 +0000
Subject: [PATCH] feat(05-02): add live preview panel HTML and CSS styles

- Add #live-preview div between timeline-canvas and block-inspector
- Add show selector (show-select + btn-load-show) to transport bar
- Add keyboard-hint span at far right of transport bar
- Append .live-preview, .device-strip, .strip-label, .strip-color, .strip-anim, .keyboard-hint CSS styles
---
 lightsync/frontend/index.html | 11 ++++++
 lightsync/frontend/style.css  | 69 +++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/lightsync/frontend/index.html b/lightsync/frontend/index.html
index 1f5938c..e0aa550 100644
--- a/lightsync/frontend/index.html
+++ b/lightsync/frontend/index.html
@@ -65,6 +65,7 @@
                 <button id="btn-snap" class="transport-btn snap-btn active" title="Snap to beat">SNAP</button>
             </div>
             <canvas id="timeline-canvas"></canvas>
+            <div id="live-preview" class="live-preview" style="display:none;"></div>
             <div id="block-inspector" class="block-inspector" style="display:none;"></div>
         </main>
 
@@ -81,6 +82,13 @@
 
             <div class="transport-sep"></div>
 
+            <select id="show-select" class="transport-file-select">
+                <option value="">&#8212; no shows &#8212;</option>
+            </select>
+            <button id="btn-load-show" class="transport-btn" title="Load saved show">LOAD</button>
+
+            <div class="transport-sep"></div>
+
             <label class="transport-btn" title="Upload MP3/WAV/FLAC/OGG" style="cursor:pointer;">
                 + UPLOAD
                 <input type="file" id="audio-upload" accept=".mp3,.wav,.flac,.ogg" style="display:none;">
@@ -91,6 +99,9 @@
             </select>
 
             <button id="btn-load" class="transport-btn" title="Load selected file">LOAD</button>
+
+            <div style="flex:1"></div>
+            <span class="keyboard-hint">[SPACE] PLAY  [&#8592;&#8594;] SEEK  [^Z] UNDO  [^S] SAVE</span>
         </footer>
 
     </div>
diff --git a/lightsync/frontend/style.css b/lightsync/frontend/style.css
index 496d877..189942f 100644
--- a/lightsync/frontend/style.css
+++ b/lightsync/frontend/style.css
@@ -484,3 +484,72 @@ button:hover {
     color: #ff3333;
     border: none;
 }
+
+/* ── Live Preview Panel (Phase 5) ──────────────────────────────────────────── */
+
+.live-preview {
+    border-top: 1px solid var(--border-dim);
+    border-bottom: 1px solid var(--border-dim);
+    background: var(--bg-panel-dark);
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 4px 0;
+    max-height: 60px;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.device-strip {
+    display: flex;
+    align-items: center;
+    height: 18px;
+    padding: 0 4px;
+    background: var(--bg-panel);
+    gap: 8px;
+    font-size: 12px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.05em;
+    transition: background-color 0.1s;
+}
+
+.strip-label {
+    color: var(--text-dim);
+    text-transform: uppercase;
+    min-width: 80px;
+    flex-shrink: 0;
+    font-size: 10px;
+    letter-spacing: 0.12em;
+}
+
+.strip-color {
+    width: 40px;
+    height: 10px;
+    background: var(--text-dim);
+    flex-shrink: 0;
+    transition: background-color 0.15s;
+}
+
+.strip-anim {
+    color: var(--text-dim);
+    font-size: 10px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.device-strip.active .strip-label {
+    color: var(--text-primary);
+}
+
+.device-strip.active .strip-anim {
+    color: var(--text-primary);
+}
+
+.keyboard-hint {
+    color: var(--text-dim);
+    font-size: 10px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.05em;
+    white-space: nowrap;
+    flex-shrink: 0;
+}