From 56230cb3b021f00334bb6c5f73e6a84b824e26e2 Mon Sep 17 00:00:00 2001
From: luciano <info@zappacosta.eu>
Date: Mon, 22 Jun 2026 14:53:05 +0200
Subject: [PATCH] Scenes: independent per-element timing (effect/text/image)
 with full inline options + duration; dedicated Playlist tab

Each scene element (effect, text, image) now has its own appearance time and
optional duration, with all styling options inline (no more capture-from-panel).
Live preview applies edits immediately on the playing track. Moved the playlist
and its video-render controls into a new Playlist tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/control.html |  42 +++---
 src/control.js   | 340 +++++++++++++++++++++++++++++------------------
 src/style.css    |  36 +++--
 3 files changed, 256 insertions(+), 162 deletions(-)

diff --git a/src/control.html b/src/control.html
index 3f4234b..04fa2ff 100644
--- a/src/control.html
+++ b/src/control.html
@@ -15,6 +15,7 @@
 
   <nav id="tabs">
     <button data-tab="audio" class="active">🎵 Audio</button>
+    <button data-tab="playlist">🎶 Playlist</button>
     <button data-tab="effetti">🌀 Effetti</button>
     <button data-tab="pad">🎹 Pad</button>
     <button data-tab="immagini">🖼 Immagini</button>
@@ -44,6 +45,26 @@
         <div class="meter"><span>HIGH</span><div class="bar"><i id="m-treble"></i></div></div>
       </section>
 
+      <section>
+        <label>Reattività <span id="gain-val">1.0×</span></label>
+        <input type="range" id="gain" min="0" max="3" step="0.05" value="1" />
+        <label>Velocità <span id="speed-val">1.0×</span></label>
+        <input type="range" id="speed" min="0" max="3" step="0.05" value="1" />
+      </section>
+
+      <section>
+        <label>Equalizzatore visual</label>
+        <label class="band band-bass">Bassi <span id="bass-gain-val">1.0×</span></label>
+        <input type="range" id="bass-gain" min="0" max="3" step="0.05" value="1" />
+        <label class="band band-mid">Medi <span id="mid-gain-val">1.0×</span></label>
+        <input type="range" id="mid-gain" min="0" max="3" step="0.05" value="1" />
+        <label class="band band-treble">Alti <span id="treble-gain-val">1.0×</span></label>
+        <input type="range" id="treble-gain" min="0" max="3" step="0.05" value="1" />
+      </section>
+    </div>
+
+    <!-- ============ PLAYLIST ============ -->
+    <div class="tab-panel" data-tab="playlist">
       <section class="span2">
         <label>Playlist <span id="playlist-count">0 brani</span></label>
         <div class="row">
@@ -58,10 +79,10 @@
         <input type="file" id="tracks-input" accept="audio/*,video/*" multiple hidden />
         <input type="file" id="scene-img-input" accept="image/*" hidden />
         <ol id="playlist" class="playlist"></ol>
-        <div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia · ▶/⏸ pausa · ⠿ riordina · ⌨ tasto rapido · 🎬 <b>scena</b> (effetto+testo+immagine applicati quando parte il brano)</div>
+        <div class="hint-mini">Clic sul <b>nome</b> = avvia/riavvia · ▶/⏸ pausa · ⠿ riordina · ⌨ tasto rapido · 🎬 <b>scena</b> (effetto/testo/immagine, ognuno col proprio tempo)</div>
       </section>
 
-      <section>
+      <section class="span2">
         <label>Resa video in playlist</label>
         <select id="tvid-fit">
           <option value="contain">Adatta (bordi neri)</option>
@@ -79,23 +100,6 @@
         <input type="range" id="tvid-op" min="0" max="100" step="1" value="100" />
         <div class="hint-mini">Si applica al video riprodotto dalla playlist (per fonderlo con gli effetti).</div>
       </section>
-
-      <section>
-        <label>Reattività <span id="gain-val">1.0×</span></label>
-        <input type="range" id="gain" min="0" max="3" step="0.05" value="1" />
-        <label>Velocità <span id="speed-val">1.0×</span></label>
-        <input type="range" id="speed" min="0" max="3" step="0.05" value="1" />
-      </section>
-
-      <section>
-        <label>Equalizzatore visual</label>
-        <label class="band band-bass">Bassi <span id="bass-gain-val">1.0×</span></label>
-        <input type="range" id="bass-gain" min="0" max="3" step="0.05" value="1" />
-        <label class="band band-mid">Medi <span id="mid-gain-val">1.0×</span></label>
-        <input type="range" id="mid-gain" min="0" max="3" step="0.05" value="1" />
-        <label class="band band-treble">Alti <span id="treble-gain-val">1.0×</span></label>
-        <input type="range" id="treble-gain" min="0" max="3" step="0.05" value="1" />
-      </section>
     </div>
 
     <!-- ============ EFFETTI ============ -->
diff --git a/src/control.js b/src/control.js
index 9f3d4e6..b01b9b2 100644
--- a/src/control.js
+++ b/src/control.js
@@ -207,14 +207,17 @@ function serializePlaylist() {
   return playlist.map(t => ({ path: t.path, name: t.name, key: t.key || null, cues: t.cues || [], isVideo: !!t.isVideo }));
 }
 function normalizeTrack(t) {
-  return { path: t.path, name: t.name || baseName(t.path), key: t.key || null, cues: Array.isArray(t.cues) ? t.cues : [], isVideo: !!t.isVideo };
+  return { path: t.path, name: t.name || baseName(t.path), key: t.key || null, cues: migrateCues(Array.isArray(t.cues) ? t.cues : []), isVideo: !!t.isVideo };
 }
 function savePlaylistState() {
   if (djv.savePlaylist) djv.savePlaylist(serializePlaylist());
 }
 
 function hasScene(tr) {
-  return !!(tr.cues && tr.cues.some(c => c.effectIndex != null || (c.text && c.text.trim()) || c.image));
+  return !!(tr.cues && tr.cues.some(c =>
+    (c.type === 'effect' && c.effectIndex != null) ||
+    (c.type === 'text' && c.text && c.text.trim()) ||
+    (c.type === 'image' && c.image)));
 }
 function parseTime(str) {
   str = String(str).trim();
@@ -222,69 +225,110 @@ function parseTime(str) {
   return parseFloat(str) || 0;
 }
 
-// Snapshot the current Text-tab styling for a cue.
-function captureTextStyle() {
-  return {
-    dir: $('#ticker-dir').value,
-    fx: $('#ticker-fx').value,
-    font: $('#ticker-font').value,
-    size: parseFloat($('#ticker-size').value),
-    weight: $('#ticker-bold').checked,
-    color: $('#ticker-color').value
-  };
-}
-const FX_NAMES = { none: 'Nessuno', updown: 'Su-giù', wave: 'Onda', zoom: 'Zoom', flash: 'Flash', rotate: 'Rotazione' };
-function textStyleSummary(ts) {
-  if (!ts) return 'stile attuale del pannello';
-  const dir = ts.dir === 'h' ? 'Orizz.' : (ts.dir === 'vup' ? 'Vert.↑' : 'Vert.↓');
-  return dir + ' · ' + (FX_NAMES[ts.fx] || ts.fx) + ' · ' + ts.size + 'vh';
-}
+// ---- Scene model -----------------------------------------------------------
+// A track scene is a list of timed ELEMENTS, each of type 'effect' | 'text' |
+// 'image' with its OWN appearance time and optional visible duration. The three
+// channels are independent: an effect, a text and an image each appear/disappear
+// on their own schedule. dur 0 = stays until the next element of the same type.
+const TXT_FONTS = [
+  ['-apple-system, BlinkMacSystemFont, sans-serif', 'Sistema'],
+  ["'Arial Black', Impact, sans-serif", 'Arial Black'],
+  ['Impact, sans-serif', 'Impact'],
+  ["Georgia, 'Times New Roman', serif", 'Georgia'],
+  ["'Courier New', monospace", 'Monospace'],
+  ["'Brush Script MT', 'Snell Roundhand', cursive", 'Corsivo'],
+  ['Verdana, Geneva, sans-serif', 'Verdana'],
+  ["'Trebuchet MS', sans-serif", 'Trebuchet'],
+];
+const TXT_DIRS = [['h', '➡️ Orizzontale'], ['vup', '⬆️ Vert. su'], ['vdown', '⬇️ Vert. giù'], ['sides', '↕️ Bordi laterali']];
+const TXT_FX = [['none', 'Nessuno'], ['updown', 'Su e giù'], ['wave', 'Onda'], ['zoom', 'Zoom'], ['flash', 'Flash'], ['rotate', 'Rotazione']];
+const TXT_POS = [['bottom', 'Basso'], ['top', 'Alto'], ['middle', 'Centro']];
 const IMG_POS = { center: { x: 50, y: 50 }, top: { x: 50, y: 18 }, bottom: { x: 50, y: 82 }, left: { x: 20, y: 50 }, right: { x: 80, y: 50 } };
+const IMG_POS_LABELS = { center: 'Centro', top: 'Alto', bottom: 'Basso', left: 'Sinistra', right: 'Destra' };
 
-// Apply one cue (effect optional; text and image always set so a timeline reads
-// predictably — empty text / null image hide them).
-function applyCue(c) {
-  if (!c) return;
-  if (c.effectIndex != null && EFFECTS.list[c.effectIndex]) applyEffect(EFFECTS.list[c.effectIndex]);
+function optList(pairs, sel) {
+  return pairs.map(([v, l]) => '<option value="' + String(v).replace(/"/g, '&quot;') + '"' + (v === sel ? ' selected' : '') + '>' + l + '</option>').join('');
+}
+function newEffectEl(time) { return { type: 'effect', time, effectIndex: EFFECTS.list.indexOf(currentEffect), effectName: currentEffect.name, dur: 0 }; }
+function newTextEl(time) { return { type: 'text', time, text: '', dir: 'h', fx: 'none', font: TXT_FONTS[0][0], size: 6, weight: true, color: '#ffffff', pos: 'bottom', speed: 1, dur: 0 }; }
+function newImageEl(time) { return { type: 'image', time, image: null, imageSize: 60, imagePos: 'center', dur: 0 }; }
 
-  // Text + its full styling
-  const showText = !!(c.text && c.text.trim());
-  send({ type: 'tickerText', text: c.text || '' });
-  send({ type: 'tickerOn', on: showText });
-  $('#ticker-text').value = c.text || '';
-  $('#ticker-on').checked = showText;
-  const ts = c.textStyle;
-  if (ts) {
-    send({ type: 'tickerDir', value: ts.dir });
-    send({ type: 'tickerFx', value: ts.fx });
-    send({ type: 'tickerFont', value: ts.font });
-    send({ type: 'tickerSize', value: ts.size });
-    send({ type: 'tickerWeight', on: ts.weight });
-    send({ type: 'tickerColor', value: ts.color });
-    $('#ticker-dir').value = ts.dir; $('#ticker-fx').value = ts.fx;
-    $('#ticker-font').value = ts.font; $('#ticker-size').value = ts.size;
-    $('#ticker-size-val').textContent = (+ts.size).toFixed(1);
-    $('#ticker-bold').checked = ts.weight; $('#ticker-color').value = ts.color;
+// Convert legacy combined cues into the new per-element list (idempotent).
+function migrateCues(cues) {
+  if (!Array.isArray(cues) || cues.length === 0) return cues || [];
+  if (cues.every(c => c && c.type)) return cues;
+  const out = [];
+  cues.forEach(c => {
+    if (c && c.type) { out.push(c); return; }
+    const t = (c && c.time) || 0;
+    if (c.effectIndex != null) out.push({ type: 'effect', time: t, effectIndex: c.effectIndex, effectName: c.effectName || '', dur: 0 });
+    if (c.text && c.text.trim()) {
+      const s = c.textStyle || {};
+      out.push({ type: 'text', time: t, text: c.text, dir: s.dir || 'h', fx: s.fx || 'none', font: s.font || TXT_FONTS[0][0], size: s.size || 6, weight: s.weight != null ? s.weight : true, color: s.color || '#ffffff', pos: 'bottom', speed: 1, dur: 0 });
+    }
+    if (c.image) out.push({ type: 'image', time: t, image: c.image, imageSize: c.imageSize || 60, imagePos: c.imagePos || 'center', dur: 0 });
+  });
+  return out;
+}
+
+// Runtime: re-evaluate which element is active per channel and diff-apply it.
+let lastScene = { effect: null, text: null, image: null };
+
+function startCues(tr) {
+  tr.cues = migrateCues(tr.cues || []);
+  activeCues = tr.cues.slice().sort((a, b) => a.time - b.time);
+  lastScene = { effect: null, text: null, image: null };
+  advanceCues(0);
+}
+function sceneActive(type, t) {
+  let best = null;
+  for (const el of activeCues) {
+    if (el.type !== type || el.time > t) continue;
+    if (el.dur && el.time + el.dur <= t) continue;
+    if (!best || el.time >= best.time) best = el;
   }
-
-  // Image + size/position
-  if (c.image) {
-    const p = IMG_POS[c.imagePos || 'center'] || IMG_POS.center;
-    send({ type: 'sceneImage', path: c.image, size: c.imageSize || 60, x: p.x, y: p.y });
+  return best;
+}
+function advanceCues(t) {
+  const ef = sceneActive('effect', t);
+  if (ef !== lastScene.effect) { lastScene.effect = ef; if (ef && EFFECTS.list[ef.effectIndex]) applyEffect(EFFECTS.list[ef.effectIndex]); }
+  const tx = sceneActive('text', t);
+  if (tx !== lastScene.text) { lastScene.text = tx; applyTextEl(tx); }
+  const im = sceneActive('image', t);
+  if (im !== lastScene.image) { lastScene.image = im; applyImageEl(im); }
+}
+function applyTextEl(el) {
+  const show = !!(el && el.text && el.text.trim());
+  send({ type: 'tickerText', text: show ? el.text : '' });
+  send({ type: 'tickerOn', on: show });
+  $('#ticker-text').value = show ? el.text : '';
+  $('#ticker-on').checked = show;
+  if (show) {
+    send({ type: 'tickerDir', value: el.dir });
+    send({ type: 'tickerFx', value: el.fx });
+    send({ type: 'tickerFont', value: el.font });
+    send({ type: 'tickerSize', value: el.size });
+    send({ type: 'tickerWeight', on: el.weight });
+    send({ type: 'tickerColor', value: el.color });
+    send({ type: 'tickerPos', pos: el.pos });
+    send({ type: 'tickerSpeed', mult: el.speed });
+  }
+}
+function applyImageEl(el) {
+  if (el && el.image) {
+    const p = IMG_POS[el.imagePos || 'center'] || IMG_POS.center;
+    send({ type: 'sceneImage', path: el.image, size: el.imageSize || 60, x: p.x, y: p.y });
   } else {
     send({ type: 'sceneImage', path: null });
   }
 }
-function startCues(tr) {
-  activeCues = (tr.cues || []).slice().sort((a, b) => a.time - b.time);
-  firedCue = -1;
-  advanceCues(0); // apply the base cue (time 0)
-}
-function advanceCues(t) {
-  while (firedCue + 1 < activeCues.length && t >= activeCues[firedCue + 1].time) {
-    firedCue++;
-    applyCue(activeCues[firedCue]);
-  }
+// Live preview: when editing the scene of the current track, re-apply at the
+// current playback position so changes show immediately on the output.
+function refreshScenePreview(i) {
+  if (i !== currentIndex) return;
+  activeCues = (playlist[i].cues || []).slice().sort((a, b) => a.time - b.time);
+  lastScene = { effect: null, text: null, image: null };
+  advanceCues(playCur || 0);
 }
 
 const baseName = (p) => p.split('/').pop();
@@ -349,10 +393,6 @@ function moveTrack(from, to) {
 
 let dragFrom = -1;
 
-function defaultCue(time) {
-  return { time, effectIndex: null, effectName: '', text: '', textStyle: null, image: null, imageSize: 60, imagePos: 'center' };
-}
-
 // Build the <option> list of effect families for a cue's effect picker.
 function cueFamilyOptions(selFam) {
   let s = '<option value="-1"' + (selFam < 0 ? ' selected' : '') + '>— nessun effetto —</option>';
@@ -377,99 +417,142 @@ function firstPresetOfFamily(fam) {
   return -1;
 }
 
-// Build the per-track scene editor (timeline of cues with text + image styling).
+const EL_ICON = { effect: '🌀', text: '🔤', image: '🖼' };
+const EL_LABEL = { effect: 'Effetto', text: 'Testo', image: 'Immagine' };
+
+// Build the per-track scene editor: a list of independent timed elements
+// (effect / text / image), each with its own appearance time and duration.
 function buildSceneEditor(tr, i, li) {
-  const cues = tr.cues || (tr.cues = []);
-  if (cues.length === 0) cues.push(defaultCue(0));
+  const cues = tr.cues = migrateCues(tr.cues || []);
   cues.sort((a, b) => a.time - b.time);
   const ed = document.createElement('li');
   ed.className = 'scene-editor';
 
-  const posLabels = { center: 'Centro', top: 'Alto', bottom: 'Basso', left: 'Sinistra', right: 'Destra' };
-  let html = '<div class="se-title">🎬 Scene a tempo <small>— la cue @00:00 parte col brano, le altre scattano al loro tempo</small></div>';
+  let html = '<div class="se-title">🎬 Scena a tempo <small>— ogni elemento appare al suo tempo; durata 0 = resta fino al successivo</small></div>';
+  if (cues.length === 0) html += '<div class="se-empty">Nessun elemento. Aggiungi un effetto, un testo o un\'immagine qui sotto.</div>';
+
   cues.forEach((c, ci) => {
-    const ce = (c.effectIndex != null && EFFECTS.list[c.effectIndex]) ? EFFECTS.list[c.effectIndex] : null;
-    const cFam = ce ? ce.family : -1;
     html +=
-      '<div class="cue" data-c="' + ci + '">' +
+      '<div class="cue cue-' + c.type + '" data-c="' + ci + '">' +
         '<div class="cue-head">' +
+          '<span class="cue-ico">' + EL_ICON[c.type] + '</span>' +
+          '<span class="cue-type">' + EL_LABEL[c.type] + '</span>' +
           '<span class="cue-at">@</span>' +
-          '<input class="cue-time" type="text" value="' + fmtTime(Math.floor(c.time)) + '" title="Tempo (mm:ss)" />' +
-          (ci > 0 ? '<button class="cue-del" title="Rimuovi cue">✕</button>' : '<span class="cue-base">base</span>') +
-        '</div>' +
-        '<div class="cue-block">' +
-          '<div class="cue-bh">🌀 Effetto</div>' +
+          '<input class="cue-time" type="text" value="' + fmtTime(Math.floor(c.time)) + '" title="Quando appare (mm:ss)" />' +
+          '<span class="cue-durl">⏱</span>' +
+          '<input class="cue-dur" type="number" min="0" step="1" value="' + (c.dur || 0) + '" title="Durata visibile in secondi (0 = resta fino al prossimo)" />' +
+          '<button class="cue-del" title="Rimuovi elemento">✕</button>' +
+        '</div>';
+
+    if (c.type === 'effect') {
+      const ce = (c.effectIndex != null && EFFECTS.list[c.effectIndex]) ? EFFECTS.list[c.effectIndex] : null;
+      const cFam = ce ? ce.family : -1;
+      html +=
+        '<div class="cue-body">' +
           '<div class="cue-row">' +
-            '<select class="cue-eff-fam" title="Categoria effetto">' + cueFamilyOptions(cFam) + '</select>' +
+            '<select class="cue-eff-fam" title="Categoria">' + cueFamilyOptions(cFam) + '</select>' +
             '<select class="cue-eff-pre" title="Preset"' + (cFam < 0 ? ' disabled' : '') + '>' + cuePresetOptions(cFam, c.effectIndex) + '</select>' +
           '</div>' +
           '<div class="cue-row">' +
-            '<button class="cue-eff-cur" title="Usa l\'effetto attualmente visibile">🎯 Usa corrente</button>' +
+            '<button class="cue-eff-cur" title="Usa l\'effetto visibile ora">🎯 Usa corrente</button>' +
             '<span class="cue-eff-name">' + (ce ? ce.name : 'nessuno') + '</span>' +
           '</div>' +
-        '</div>' +
-        '<div class="cue-block">' +
-          '<div class="cue-bh">🔤 Testo</div>' +
-          '<input class="cue-text textfield" placeholder="Testo (vuoto = nessuno)" />' +
+        '</div>';
+    } else if (c.type === 'text') {
+      html +=
+        '<div class="cue-body">' +
+          '<input class="cue-text textfield" placeholder="Testo da mostrare" />' +
           '<div class="cue-row">' +
-            '<button class="cue-tstyle">🎨 Cattura stile</button>' +
-            '<span class="cue-tinfo">' + textStyleSummary(c.textStyle) + '</span>' +
-            (c.textStyle ? '<button class="cue-tstyle-clear" title="Stile predefinito">✕</button>' : '') +
+            '<select class="cue-tx-dir" title="Direzione">' + optList(TXT_DIRS, c.dir) + '</select>' +
+            '<select class="cue-tx-fx" title="Effetto">' + optList(TXT_FX, c.fx) + '</select>' +
           '</div>' +
-        '</div>' +
-        '<div class="cue-block">' +
-          '<div class="cue-bh">🖼 Immagine</div>' +
+          '<div class="cue-row">' +
+            '<select class="cue-tx-font" title="Font">' + optList(TXT_FONTS, c.font) + '</select>' +
+            '<select class="cue-tx-pos" title="Posizione">' + optList(TXT_POS, c.pos) + '</select>' +
+          '</div>' +
+          '<div class="cue-row">' +
+            '<span class="cue-dim">Dim</span><input class="cue-tx-size" type="range" min="2" max="18" step="0.5" value="' + c.size + '" />' +
+            '<label class="chk"><input class="cue-tx-bold" type="checkbox"' + (c.weight ? ' checked' : '') + ' /> B</label>' +
+            '<input class="cue-tx-color" type="color" value="' + c.color + '" />' +
+          '</div>' +
+          '<div class="cue-row"><span class="cue-dim">Vel</span><input class="cue-tx-speed" type="range" min="0.2" max="4" step="0.1" value="' + c.speed + '" /></div>' +
+        '</div>';
+    } else {
+      html +=
+        '<div class="cue-body">' +
           '<div class="cue-row">' +
             '<button class="cue-img">Carica…</button>' +
             '<button class="cue-img-clear">✕</button>' +
             '<span class="cue-name">' + (c.image ? baseName(c.image) : 'nessuna') + '</span>' +
           '</div>' +
-          (c.image ?
-            '<div class="cue-row"><select class="cue-img-pos">' +
-              Object.keys(posLabels).map(p => '<option value="' + p + '"' + ((c.imagePos || 'center') === p ? ' selected' : '') + '>' + posLabels[p] + '</option>').join('') +
-            '</select><span class="cue-dim">Dim</span><input class="cue-img-size" type="range" min="10" max="100" step="1" value="' + (c.imageSize || 60) + '" /></div>'
-            : '') +
-        '</div>' +
-      '</div>';
+          '<div class="cue-row"><select class="cue-img-pos">' +
+            Object.keys(IMG_POS_LABELS).map(p => '<option value="' + p + '"' + ((c.imagePos || 'center') === p ? ' selected' : '') + '>' + IMG_POS_LABELS[p] + '</option>').join('') +
+          '</select><span class="cue-dim">Dim</span><input class="cue-img-size" type="range" min="10" max="100" step="1" value="' + (c.imageSize || 60) + '" /></div>' +
+        '</div>';
+    }
+    html += '</div>';
   });
-  html += '<div class="se-foot"><button class="cue-add">➕ Aggiungi cue</button><button class="se-clear">🗑 Rimuovi scena</button></div>';
+
+  html += '<div class="se-foot">' +
+    '<button class="add-eff" title="Aggiungi effetto">➕🌀</button>' +
+    '<button class="add-txt" title="Aggiungi testo">➕🔤</button>' +
+    '<button class="add-img" title="Aggiungi immagine">➕🖼</button>' +
+    '<button class="se-clear">🗑 Scena</button>' +
+  '</div>';
   ed.innerHTML = html;
 
+  // re-render (used after structural changes)
+  const save = () => { savePlaylistState(); refreshScenePreview(i); renderPlaylist(); };
+  // keep the open editor (no re-render) for smooth slider/typing edits
+  const saveLive = () => { savePlaylistState(); refreshScenePreview(i); li.querySelector('.scene-btn').classList.toggle('active', hasScene(tr)); };
+
   ed.querySelectorAll('.cue').forEach(cueEl => {
     const ci = parseInt(cueEl.dataset.c, 10);
     const c = cues[ci];
-    cueEl.querySelector('.cue-text').value = c.text || '';
-    cueEl.querySelector('.cue-time').addEventListener('change', (e) => { c.time = parseTime(e.target.value); savePlaylistState(); renderPlaylist(); });
-    cueEl.querySelector('.cue-eff-fam').addEventListener('change', (e) => {
-      const fam = parseInt(e.target.value, 10);
-      if (fam < 0) { c.effectIndex = null; c.effectName = ''; }
-      else { const idx = firstPresetOfFamily(fam); c.effectIndex = idx; c.effectName = idx >= 0 ? EFFECTS.list[idx].name : ''; }
-      savePlaylistState(); renderPlaylist();
-    });
-    cueEl.querySelector('.cue-eff-pre').addEventListener('change', (e) => {
-      const idx = parseInt(e.target.value, 10);
-      if (idx >= 0 && EFFECTS.list[idx]) { c.effectIndex = idx; c.effectName = EFFECTS.list[idx].name; savePlaylistState(); renderPlaylist(); }
-    });
-    cueEl.querySelector('.cue-eff-cur').addEventListener('click', () => { c.effectIndex = EFFECTS.list.indexOf(currentEffect); c.effectName = currentEffect.name; savePlaylistState(); renderPlaylist(); });
-    cueEl.querySelector('.cue-text').addEventListener('input', (e) => { c.text = e.target.value; li.querySelector('.scene-btn').classList.toggle('active', hasScene(tr)); savePlaylistState(); });
-    cueEl.querySelector('.cue-tstyle').addEventListener('click', () => { c.textStyle = captureTextStyle(); savePlaylistState(); renderPlaylist(); });
-    const tsc = cueEl.querySelector('.cue-tstyle-clear');
-    if (tsc) tsc.addEventListener('click', () => { c.textStyle = null; savePlaylistState(); renderPlaylist(); });
-    cueEl.querySelector('.cue-img').addEventListener('click', () => { sceneImgTarget = i; sceneCueTarget = ci; $('#scene-img-input').click(); });
-    cueEl.querySelector('.cue-img-clear').addEventListener('click', () => { c.image = null; savePlaylistState(); renderPlaylist(); });
-    const posSel = cueEl.querySelector('.cue-img-pos');
-    if (posSel) posSel.addEventListener('change', (e) => { c.imagePos = e.target.value; savePlaylistState(); });
-    const sizeSl = cueEl.querySelector('.cue-img-size');
-    if (sizeSl) sizeSl.addEventListener('input', (e) => { c.imageSize = parseInt(e.target.value, 10); savePlaylistState(); });
-    const del = cueEl.querySelector('.cue-del');
-    if (del) del.addEventListener('click', () => { cues.splice(ci, 1); savePlaylistState(); renderPlaylist(); });
+    cueEl.querySelector('.cue-time').addEventListener('change', (e) => { c.time = parseTime(e.target.value); save(); });
+    cueEl.querySelector('.cue-dur').addEventListener('change', (e) => { c.dur = Math.max(0, parseFloat(e.target.value) || 0); saveLive(); });
+    cueEl.querySelector('.cue-del').addEventListener('click', () => { cues.splice(ci, 1); save(); });
+
+    if (c.type === 'effect') {
+      cueEl.querySelector('.cue-eff-fam').addEventListener('change', (e) => {
+        const fam = parseInt(e.target.value, 10);
+        if (fam < 0) { c.effectIndex = null; c.effectName = ''; }
+        else { const idx = firstPresetOfFamily(fam); c.effectIndex = idx; c.effectName = idx >= 0 ? EFFECTS.list[idx].name : ''; }
+        save();
+      });
+      cueEl.querySelector('.cue-eff-pre').addEventListener('change', (e) => {
+        const idx = parseInt(e.target.value, 10);
+        if (idx >= 0 && EFFECTS.list[idx]) { c.effectIndex = idx; c.effectName = EFFECTS.list[idx].name; save(); }
+      });
+      cueEl.querySelector('.cue-eff-cur').addEventListener('click', () => { c.effectIndex = EFFECTS.list.indexOf(currentEffect); c.effectName = currentEffect.name; save(); });
+    } else if (c.type === 'text') {
+      const ti = cueEl.querySelector('.cue-text'); ti.value = c.text || '';
+      ti.addEventListener('input', (e) => { c.text = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-dir').addEventListener('change', (e) => { c.dir = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-fx').addEventListener('change', (e) => { c.fx = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-font').addEventListener('change', (e) => { c.font = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-pos').addEventListener('change', (e) => { c.pos = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-size').addEventListener('input', (e) => { c.size = parseFloat(e.target.value); saveLive(); });
+      cueEl.querySelector('.cue-tx-bold').addEventListener('change', (e) => { c.weight = e.target.checked; saveLive(); });
+      cueEl.querySelector('.cue-tx-color').addEventListener('input', (e) => { c.color = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-tx-speed').addEventListener('input', (e) => { c.speed = parseFloat(e.target.value); saveLive(); });
+    } else {
+      cueEl.querySelector('.cue-img').addEventListener('click', () => { sceneImgTarget = i; sceneCueTarget = ci; $('#scene-img-input').click(); });
+      cueEl.querySelector('.cue-img-clear').addEventListener('click', () => { c.image = null; save(); });
+      cueEl.querySelector('.cue-img-pos').addEventListener('change', (e) => { c.imagePos = e.target.value; saveLive(); });
+      cueEl.querySelector('.cue-img-size').addEventListener('input', (e) => { c.imageSize = parseInt(e.target.value, 10); saveLive(); });
+    }
   });
-  ed.querySelector('.cue-add').addEventListener('click', () => {
+
+  const addEl = (mk) => {
     const lastT = cues.length ? cues[cues.length - 1].time : 0;
-    cues.push(defaultCue(lastT + 30));
-    savePlaylistState(); renderPlaylist();
-  });
-  ed.querySelector('.se-clear').addEventListener('click', () => { tr.cues = []; sceneEditing = -1; savePlaylistState(); renderPlaylist(); });
+    cues.push(mk(cues.length ? lastT : 0));
+    save();
+  };
+  ed.querySelector('.add-eff').addEventListener('click', () => addEl(newEffectEl));
+  ed.querySelector('.add-txt').addEventListener('click', () => addEl(newTextEl));
+  ed.querySelector('.add-img').addEventListener('click', () => addEl(newImageEl));
+  ed.querySelector('.se-clear').addEventListener('click', () => { tr.cues = []; sceneEditing = -1; save(); });
   return ed;
 }
 
@@ -543,11 +626,8 @@ $('#scene-img-input').addEventListener('change', (e) => {
   const p = f && filePath(f);
   if (p && sceneImgTarget >= 0 && playlist[sceneImgTarget]) {
     const tr = playlist[sceneImgTarget];
-    tr.cues = tr.cues || [];
-    if (!tr.cues[sceneCueTarget]) sceneCueTarget = 0;
-    if (!tr.cues[sceneCueTarget]) tr.cues.push(defaultCue(0));
-    tr.cues[sceneCueTarget].image = p;
-    savePlaylistState(); renderPlaylist();
+    const el = (tr.cues || [])[sceneCueTarget];
+    if (el && el.type === 'image') { el.image = p; savePlaylistState(); refreshScenePreview(sceneImgTarget); renderPlaylist(); }
   }
   sceneImgTarget = -1; sceneCueTarget = -1; e.target.value = '';
 });
@@ -747,7 +827,7 @@ function playPad(i) {
   }
   playbackOwner = 'pad';
   activePad = i; padPlaying = true;
-  activeCues = []; firedCue = -1; // pads don't run playlist cues
+  activeCues = []; firedCue = -1; lastScene = { effect: null, text: null, image: null }; // pads don't run playlist cues
   playCur = 0; playDur = durations[p.path] || 0;
   // The playlist is no longer the active source.
   currentIndex = -1; isPlaying = false; renderPlaylist();
diff --git a/src/style.css b/src/style.css
index df30f14..5012e32 100644
--- a/src/style.css
+++ b/src/style.css
@@ -362,35 +362,45 @@ textarea.textarea-lg {
 .scene-editor .se-title { font-size: 12px; font-weight: 600; opacity: 0.92; margin-bottom: 10px; }
 .scene-editor .se-title small { font-weight: 400; opacity: 0.55; }
 
+.scene-editor .se-empty { font-size: 11px; opacity: 0.5; padding: 6px 2px 10px; }
 .scene-editor .cue {
   background: rgba(0,0,0,0.22);
   border: 1px solid rgba(255,255,255,0.08);
+  border-left: 3px solid rgba(255,255,255,0.18);
   border-radius: 10px;
   padding: 9px;
   margin-bottom: 9px;
 }
+.scene-editor .cue-effect { border-left-color: #8fb6ff; }
+.scene-editor .cue-text    { border-left-color: #ffd27a; }
+.scene-editor .cue-image   { border-left-color: #9be6a0; }
 .scene-editor .cue-head { display: flex; align-items: center; gap: 6px; }
-.scene-editor .cue-at { opacity: 0.5; flex: 0 0 auto; }
-.scene-editor .cue-time { width: 60px; flex: 0 0 auto; text-align: center; padding: 6px 4px; font-variant-numeric: tabular-nums; }
+.scene-editor .cue-ico { flex: 0 0 auto; }
+.scene-editor .cue-type { flex: 0 0 auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }
+.scene-editor .cue-at { opacity: 0.5; flex: 0 0 auto; margin-left: 4px; }
+.scene-editor .cue-time { width: 58px; flex: 0 0 auto; text-align: center; padding: 6px 4px; font-variant-numeric: tabular-nums; }
+.scene-editor .cue-durl { flex: 0 0 auto; opacity: 0.5; font-size: 11px; }
+.scene-editor .cue-dur { width: 46px; flex: 0 0 auto; text-align: center; padding: 6px 4px; }
 .scene-editor .cue-del { flex: 0 0 auto; color: #ff9a9a; margin-left: auto; }
+
+.scene-editor .cue-body { margin-top: 8px; }
 .scene-editor .cue-eff-fam, .scene-editor .cue-eff-pre { flex: 1; min-width: 0; }
 .scene-editor .cue-eff-cur { flex: 0 0 auto; }
 .scene-editor .cue-eff-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.scene-editor .cue-base { flex: 0 0 auto; font-size: 9px; opacity: 0.45; padding: 0 4px; }
-
-.scene-editor .cue-block { background: rgba(255,255,255,0.035); border-radius: 8px; padding: 7px 8px; margin-top: 7px; }
-.scene-editor .cue-bh { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.55; margin-bottom: 5px; }
-.scene-editor .cue-text { width: 100%; margin: 0 0 6px; }
+.scene-editor .cue-text { width: 100%; margin: 0 0 7px; }
 .scene-editor .cue-row { display: flex; align-items: center; gap: 6px; }
 .scene-editor .cue-row + .cue-row { margin-top: 6px; }
-.scene-editor .cue-tstyle, .scene-editor .cue-img,
-.scene-editor .cue-img-clear, .scene-editor .cue-tstyle-clear { flex: 0 0 auto; }
-.scene-editor .cue-tinfo, .scene-editor .cue-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.scene-editor .cue-tx-dir, .scene-editor .cue-tx-fx,
+.scene-editor .cue-tx-font, .scene-editor .cue-tx-pos { flex: 1; min-width: 0; }
+.scene-editor .cue-tx-size, .scene-editor .cue-tx-speed, .scene-editor .cue-img-size { flex: 1; }
+.scene-editor .cue-tx-color { flex: 0 0 auto; width: 34px; padding: 0; }
+.scene-editor .cue-tx-bold { width: auto; }
+.scene-editor .cue-img, .scene-editor .cue-img-clear { flex: 0 0 auto; }
+.scene-editor .cue-name { flex: 1; min-width: 0; font-size: 10px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .scene-editor .cue-img-pos { flex: 0 0 auto; width: 92px; }
 .scene-editor .cue-dim { flex: 0 0 auto; font-size: 10px; opacity: 0.55; }
-.scene-editor .cue-img-size { flex: 1; }
-.scene-editor .se-foot { display: flex; gap: 6px; margin-top: 2px; }
-.scene-editor .se-foot .se-clear { color: #ff9a9a; }
+.scene-editor .se-foot { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
+.scene-editor .se-foot .se-clear { color: #ff9a9a; margin-left: auto; }
 
 /* ============ OUTPUT WINDOW ============ */
 body.output { cursor: none; background: #000; }