// tlui.js — SCENEGOD timeline panel (Lane B). ALL DOM/canvas lives here;
// timeline.js stays headless. Mounts into #timeline, drives a Timeline.
//
// Layout: [scene bar] / [names column | ruler+canvas lanes]. One <canvas> for
// all lanes (decision: simpler than canvas-per-lane; hit-testing via a rebuilt
// hitbox list each draw). Time axis fits to width at zoom 1; Cmd/Ctrl+wheel
// zooms around the cursor, plain wheel is left to the page (scroll), and
// trackpad horizontal wheel pans when zoomed in.
import { beatGridFrom, beatOffsetOf, alignShotsToGrid } from './timeline.js';

const ROW_H = 28;
const RULER_H = 22;
const KEY_R = 5;

// Canvas palette. EXPORTED because the cut lane's camera label was drawn in
// `#161a20` — the odd lane's own background, contrast 1.00:1 — so the feature
// ("the lane prints the camera's LABEL") was not observable on screen at all.
// The colours now come from one place and timeline_test.mjs holds them to a
// real contrast ratio against BOTH lane fills.
export const LANE_BG = ['#13171d', '#161a20'];   // [even row, odd row]
export const CUT_COLOR = '#e0af68';              // cut bar + dot + its label
export const LABEL_COLOR = '#e0e6ed';            // text on a clip/audio block

// ponytail: styles injected here, not written into Lane A's web/style.css —
// keeps Lane B inside its own files (orchestrator confirmed this is permanent).
const CSS = `
#timeline{display:flex;flex-direction:column;background:#161a20;color:#c9d1d9;font:12px/1.4 ui-monospace,Menlo,monospace;border-top:1px solid #2b323c;user-select:none}
#timeline .tl-bar{display:flex;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid #2b323c}
#timeline .tl-bar input{background:#0d1117;border:1px solid #2b323c;color:#c9d1d9;padding:2px 6px;border-radius:3px;font:inherit}
#timeline .tl-bar input.name{width:150px}
#timeline .tl-bar input.num{width:56px}
#timeline .tl-bar select{background:#0d1117;border:1px solid #2b323c;color:#c9d1d9;padding:2px 4px;border-radius:3px;font:inherit}
#timeline .tl-bar label{display:flex;align-items:center;gap:3px;color:#8b949e;cursor:pointer}
#timeline .tl-bar button{background:#21262d;border:1px solid #2b323c;color:#c9d1d9;padding:3px 10px;border-radius:3px;cursor:pointer;font:inherit}
#timeline .tl-bar button:hover{background:#2b323c}
#timeline .tl-bar .spring{flex:1}
#timeline .tl-bar .clock{color:#7aa2f7;min-width:64px;text-align:right}
#timeline .tl-body{display:flex}
#timeline .tl-names{width:150px;flex:none;overflow:hidden;border-right:1px solid #2b323c;background:#12161c}
#timeline .tl-names .row{height:${ROW_H}px;display:flex;align-items:center;padding:0 8px;box-sizing:border-box;border-bottom:1px solid #1b2027;border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the names column is the OUTLINER: rows with an entity select it on the stage */
#timeline .tl-names .row.pick{cursor:pointer}
#timeline .tl-names .row.pick:hover{background:#1a2029}
#timeline .tl-names .row.sel{border-left-color:#7aa2f7;color:#e0e6ed;background:#1a2029}
#timeline .tl-names .row .kf{margin-left:auto;color:#7aa2f7;font-size:9px;padding-left:6px}
#timeline .tl-bar .rstat{color:#57c99a;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#timeline .tl-bar .rstat a{color:#57c99a}
#timeline .tl-names .row.head{margin-top:${RULER_H}px}
#timeline .tl-names .row .k{color:#565f6b;margin-right:6px;font-size:10px}
#timeline .tl-names .row.sub{color:#8b949e;padding-left:20px;font-size:11px}
#timeline .tl-names .row input.gain{width:38px;margin-left:auto;background:#0d1117;border:1px solid #2b323c;color:#c9d1d9;font:10px ui-monospace;border-radius:3px;padding:1px 2px}
#timeline .tl-names .row button.lip{margin-left:4px;background:#21262d;border:1px solid #2b323c;border-radius:3px;color:#c9d1d9;cursor:pointer;font-size:11px;padding:0 4px}
#timeline .tl-names .row button.lip:hover{background:#2b323c}
#timeline .tl-lanes{flex:1;position:relative;overflow:hidden}
#timeline canvas{display:block;width:100%;height:100%}
.tl-menu{position:fixed;z-index:9999;background:#12161c;border:1px solid #2b323c;border-radius:4px;max-height:240px;overflow:auto;font:12px ui-monospace;color:#c9d1d9;min-width:160px}
.tl-menu .item{padding:4px 10px;cursor:pointer;white-space:nowrap}
.tl-menu .item:hover{background:#2b323c}
.tl-menu .empty{padding:6px 10px;color:#565f6b}
.tl-menu.tmpl{max-width:420px}
.tl-menu.tmpl .item{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;white-space:normal;border-bottom:1px solid #1b2027}
.tl-menu.tmpl .item img{width:68px;height:42px;flex:none;object-fit:cover;border-radius:3px;background:#0d1117}
.tl-menu.tmpl .t{color:#e0e6ed}
.tl-menu.tmpl .d{color:#8b949e;font-size:11px;line-height:1.35;margin-top:2px}
/* M10-B1 auto-cut popover — a small form in the same menu shell */
.tl-menu.cut{padding:8px 10px 10px;min-width:230px;max-height:none}
.tl-menu.cut .hd{color:#e0af68;margin-bottom:6px}
.tl-menu.cut .fld{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0;color:#8b949e}
.tl-menu.cut label{display:flex;gap:4px;align-items:center;cursor:pointer;color:#c9d1d9}
.tl-menu.cut select{background:#0d1117;border:1px solid #2b323c;color:#c9d1d9;border-radius:3px;font:inherit;padding:1px 4px}
.tl-menu.cut .cams{display:flex;flex-direction:column;gap:2px;max-height:120px;overflow:auto;margin:2px 0 6px 6px}
.tl-menu.cut .lbl{color:#565f6b}
.tl-menu.cut .cnt{color:#57c99a;margin:6px 0;white-space:normal;line-height:1.4}
.tl-menu.cut .cnt.err{color:#f7768e}
.tl-menu.cut .act{display:flex;gap:6px;justify-content:flex-end}
.tl-menu.cut .act button{background:#21262d;border:1px solid #2b323c;color:#c9d1d9;padding:3px 10px;border-radius:3px;cursor:pointer;font:inherit}
.tl-menu.cut .act button.go{border-color:#57c99a;color:#dff5ea}
.tl-menu.cut .act button:disabled{opacity:.45;cursor:default}
.tl-help{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10001;background:#12161c;border:1px solid #2b323c;border-radius:6px;box-shadow:0 10px 44px #000b;padding:14px 18px 16px;color:#c9d1d9;font:12px/1.5 ui-monospace,Menlo,monospace;max-width:min(880px,94vw);max-height:84vh;overflow:auto}
.tl-help h3{margin:0 0 2px;font-size:13px;color:#7aa2f7}
.tl-help .hint{color:#565f6b;margin-bottom:10px}
.tl-help .cols{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.tl-help section{min-width:250px;flex:1}
.tl-help h4{margin:8px 0 4px;font-size:11px;color:#e0af68;letter-spacing:.07em}
/* SYNC9: dt was auto-width + nowrap, so long terms ("drag an animation onto a
   character") blew past the grid cell and the three columns overlapped. Cap the
   term column and let it wrap. */
.tl-help dl{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:3px 12px;margin:0}
.tl-help dt{color:#57c99a;white-space:normal;overflow-wrap:anywhere}
.tl-help dd{margin:0;color:#8b949e}
.tl-help .close{position:absolute;top:6px;right:10px;background:none;border:0;color:#565f6b;font:14px ui-monospace;cursor:pointer}
.tl-help .close:hover{color:#c9d1d9}
.tl-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;background:#12161c;border:1px solid #e0af68;color:#e0e6ed;padding:6px 14px;border-radius:4px;font:12px ui-monospace;max-width:70vw}
/* M9-B2 FILM panel — collapsible shot list, mounted inside #timeline */
#timeline .tl-film{border-top:1px solid #2b323c;background:#12161c;padding:6px 8px 8px}
#timeline .tl-film .frow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:3px 0}
#timeline .tl-film .frow.head{border-bottom:1px solid #1b2027;padding-bottom:6px;margin-bottom:4px}
#timeline .tl-film select,#timeline .tl-film input{background:#0d1117;border:1px solid #2b323c;color:#c9d1d9;padding:2px 4px;border-radius:3px;font:11px ui-monospace}
#timeline .tl-film input.n{width:52px}
#timeline .tl-film button{background:#21262d;border:1px solid #2b323c;color:#c9d1d9;padding:2px 8px;border-radius:3px;cursor:pointer;font:11px ui-monospace}
#timeline .tl-film button:hover:not(:disabled){background:#2b323c}
#timeline .tl-film button:disabled{opacity:.45;cursor:default}
#timeline .tl-film button.go{border-color:#57c99a;color:#dff5ea}
#timeline .tl-film .spring{flex:1}
#timeline .tl-film .run{color:#7aa2f7}
#timeline .tl-film .fstat{color:#8b949e;max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#timeline .tl-film .fstat.err{color:#f7768e;white-space:normal;max-width:none}
#timeline .tl-film .fstat a{color:#57c99a}
#timeline .tl-film .shot{color:#565f6b}
#timeline .tl-film .lbl{color:#565f6b}
`;

// Film runtime in seconds: shots minus the overlap every dissolve eats. Mirrors
// server.py plan_sequence (`sum(len) - sum(transitionDur of all but the last)`);
// exported pure so timeline_test.mjs can hold it to the server's arithmetic.
export function filmRuntime(shots) {
  let total = 0;
  (shots || []).forEach((s, i) => {
    total += Math.max(0, (+s.out || 0) - (+s.in || 0));
    if (i < shots.length - 1 && s.transition === 'dissolve') total -= Math.max(0, +s.transitionDur || 0);
  });
  return Math.max(0, total);
}

// ---- pure seams (exported so timeline_test.mjs can pin the behaviour) -------

// server.py's `render_frame` refuses a frame index outside [0, 20000] — a render
// that would overrun it must be refused HERE, before 20000 PNGs are uploaded.
const RENDER_MAX_FRAMES = 20000;

// What "⏺ Render" is about to do: the finalRender() opts for THIS scene at the
// picked size. Throws rather than starting a render the server will reject.
// Unparseable size → 1080p (the select can only produce good values; a hand-
// edited DOM shouldn't render a 0×0 film).
export function renderPlan(tl, sizeStr) {
  const m = /^\s*(\d+)\s*[x×]\s*(\d+)\s*$/.exec(String(sizeStr == null ? '' : sizeStr));
  const width = m ? +m[1] : 1920, height = m ? +m[2] : 1080;
  const fps = tl.fps;
  const total = Math.max(1, Math.round(tl.duration * fps));
  if (total > RENDER_MAX_FRAMES) throw new Error(`too long: ${total} frames (max ${RENDER_MAX_FRAMES})`);
  return { width, height, fps, name: tl.scene.name || 'untitled', audio: tl.scene.audio || [], total };
}

// One capture loop at a time. ⏺ Render and 🎬 Render film BOTH drive
// timeline.step() + stage.renderActiveCamera() and both bracket the capture with
// stage.pause()/stage.resume() — run them together and they interleave frames
// into two different render sessions, film.js swaps the scene under the ⏺
// render's feet, and whichever finishes first calls resume(), un-hiding the
// gizmo/grid/camera cones for the REST of the other one's frames (the SYNC7 bug,
// again). Returns a refusal string, or null when it's safe to start.
export function renderRefusal({ rendering, filmBusy } = {}) {
  if (rendering) return 'a ⏺ scene render is already running — wait for it to finish';
  if (filmBusy) return 'a 🎬 film render is running — wait for it to finish';
  return null;
}

// Everything server.py's `resolve_audio` refuses that can be seen WITHOUT the
// filesystem. It runs at POST /render/{id}/end, i.e. after every PNG of the
// render has been uploaded — minutes of work to be told `audio: in (4) must be
// less than out (1)`. Same reasoning as the frame cap: refuse here. (Existence
// needs the filesystem, so it is asked for separately — see _audioMissing.)
export function audioProblems(audio) {
  const num = (v) => typeof v === 'number' && Number.isFinite(v);
  const out = [];
  (audio || []).forEach((a, i) => {
    const at = `audio[${i}]`;
    if (!a || typeof a !== 'object' || typeof a.path !== 'string' || !a.path) { out.push(`${at}: needs a string path`); return; }
    const start = a.start == null ? 0 : a.start, gain = a.gain == null ? 1 : a.gain;
    const tIn = a.in == null ? 0 : a.in;
    if (!num(start) || !num(gain) || !num(tIn) || (a.out != null && !num(a.out))) {
      out.push(`${at} (${a.path}): start/gain/in/out must be numbers`); return;
    }
    if (start < 0 || tIn < 0) out.push(`${at} (${a.path}): start/in must be >= 0 (start=${start}, in=${tIn})`);
    else if (a.out != null && a.out <= tIn) out.push(`${at} (${a.path}): in (${tIn}) must be less than out (${a.out})`);
  });
  return out;
}

// What double-clicking the Cameras row should DO at t for the chosen camera,
// given the cut list. `at` = the cut this one would replace (addCut's half-frame
// window). Cutting to the camera that is ALREADY live renders as nothing but
// reads as an edit in the file — the exact artefact the M10 auto-cut amendment
// asked to be dropped — so it is refused, and a redundant cut already sitting
// there is removed instead. Pure so timeline_test.mjs can pin every branch.
//
// REVIEW-FIX: it only ever looked BACKWARDS, so the edit could manufacture the
// very artefact it exists to prevent. cuts [{0,cam1},{4,cam2}], cut at 0 to cam2:
// `before` is null (nothing precedes 0) → 'replace' → [{0,cam2},{4,cam2}] and the
// 4s cut now changes nothing. After ANY of the four branches the effective camera
// from t onward is camId, so the cut immediately after t is dead iff it names
// camId — but only report it when it was a real angle change BEFORE this edit
// (`wasEff`), otherwise we would be deleting somebody else's pre-existing mess.
export function cutAction(cuts, t, camId, fps = 30) {
  const eps = 0.5 / (fps || 30);
  const sorted = [...(cuts || [])].sort((a, b) => a.t - b.t);
  const at = sorted.find((c) => Math.abs(c.t - t) <= eps) || null;
  let before = null;
  for (const c of sorted) { if (c === at) continue; if (c.t <= t) before = c.camera; else break; }
  const next = sorted.find((c) => c !== at && c.t > t) || null;
  const wasEff = at ? at.camera : before;              // what was live going into `next` before this edit
  const dead = (next && next.camera === camId && wasEff !== camId) ? next : null;
  if (before === camId) return { action: at ? 'remove' : 'noop', at, before, dead };
  return { action: at ? 'replace' : 'add', at, before, dead };
}

// Entities whose bytes only exist in this browser session (a file dropped on the
// page). They are written into the scene file but SKIPPED on load (stage.js
// `applyState` skips source.type === 'upload' when the kind needs bytes), so a
// scene built around a dropped character silently loses it — and everything
// keyed on it. Labels, for the warning.
export function uploadEntities(json) {
  return ((json && json.entities) || [])
    .filter((e) => e && e.source && e.source.type === 'upload')
    .map((e) => e.label || e.id);
}

// The one place that decides what a save TELLS you. A 422 from validate_scene
// used to look exactly like a successful save (silent localStorage fallback),
// and since load() prefers the server copy, the next Load quietly restored the
// last good version — with everything since it gone.
export function saveMessage({ ok, status, errors, name, count } = {}) {
  if (ok) return `saved "${name}" · ${count} entit${count === 1 ? 'y' : 'ies'}`;
  if (status == null) return 'server unreachable — kept a local copy in this browser only';
  const why = (errors && errors.length) ? errors.join(' · ') : `server said ${status}`;
  return `NOT saved — ${why}`;
}

// What a names-column row says about its entity. `keyed` = the timeline re-applies
// a pose to it on every seek, so a gizmo drag will be silently reverted.
export function rowFlags(entity) {
  const keys = (entity && entity.tracks && entity.tracks.transform) || [];
  return { keyed: keys.length > 0, selectable: !!(entity && entity.id) };
}

export class TimelineUI {
  constructor(timeline, mountEl) {
    this.tl = timeline;
    this.stage = timeline.stage;
    this.el = typeof mountEl === 'string' ? document.querySelector(mountEl) : mountEl;
    // REVIEW-FIX: shared failure surface — timeline._fail (and any other module)
    // toasts through here instead of dying silently in the console.
    window.sgToast = (m) => this._toast(m);
    this._hits = [];
    this._drag = null;
    this._selKeys = [];        // box-selected keys: [{id, track, key}]
    this._snapOn = true;       // both write through to tl.snap (accessors below)
    this._snapStep = 'frame';  // 'frame' | seconds string | 'beat' | 'bar'
    this._zoom = 1;            // 1 = fit-to-width; Cmd/Ctrl+wheel zooms
    this._panT = 0;            // left edge of the view, in seconds
    this._audioBuf = new Map();  // path -> decoded AudioBuffer
    this._audioSrcs = [];        // live BufferSourceNodes during playback
    this._beatCache = new Map(); // path -> Lane C /beats response (analysis is expensive once, free after)
    this._wasPlaying = false;
    this._seq = null;            // FILM panel: the sequence doc being edited
    this._seqName = null;
    this._filmBusy = false;      // one film render at a time
    this._rendering = false;     // …and never at the same time as a ⏺ scene render
    this._undoMark = null;       // undo depth at mousedown → a drag collapses to one entry
    this._pickMenu = null;       // Cameras-row camera picker (Escape/away close it — _pickClose)
    this._pickAway = null;
    this._injectCSS();
    this._build();
    this.tl.onTick(() => {       // natural end-of-play stops audio (timeline auto-pauses)
      this.draw();
      if (this._cutRefresh) this._cutRefresh();   // "from the playhead" count stays honest while scrubbing
      if (this._wasPlaying && !this.tl.playing) this._audioStop();
      this._wasPlaying = this.tl.playing;
    });
    this.tl.onLoad(() => { this._syncRows(); this._refreshBar(); });  // SYNC1 #3a/#3b
    if (this.stage.onChange) this.stage.onChange((en) => this._stageChanged(en));
    // the names column IS the outliner (there is no other list of what is in the
    // scene) — keep its highlight in step with the stage's selection.
    if (this.stage.onSelect) this.stage.onSelect((en) => { this._selId = (en && en.id) || null; this._markSel(); });
    this._syncRows();
    this.draw();
  }

  // M11-B: the snap config is STORED ON THE MODEL (`tl.snap`) — the UI is still
  // the only thing that writes it, but ops that arrive without a mouse (a camera
  // move off `scenegod:direct`) have to snap the same way a drag does, and
  // timeline.js can't reach into the panel. These accessors keep every existing
  // `this._snapOn` / `this._snapStep` read+write working unchanged.
  get _snapOn() { return this.tl.snap.on; }
  set _snapOn(v) { this.tl.snap.on = !!v; }
  get _snapStep() { return this.tl.snap.step; }
  set _snapStep(v) { this.tl.snap.step = v; }

  _refreshBar() {
    if (this.$name) this.$name.value = this.tl.scene.name || '';
    if (this.$dur) this.$dur.value = this.tl.duration;
  }

  _injectCSS() {
    if (document.getElementById('laneB-tl-css')) return;
    const s = document.createElement('style');
    s.id = 'laneB-tl-css';
    s.textContent = CSS;
    document.head.appendChild(s);
  }

  _build() {
    this.el.innerHTML = '';
    const bar = document.createElement('div');
    bar.className = 'tl-bar';
    bar.innerHTML = `
      <button data-act="play">▶</button>
      <span class="clock">0.00s</span>
      <input class="name" placeholder="scene name" value="${this.tl.scene.name || ''}">
      <span>dur</span><input class="num dur" type="number" min="0" step="0.5" value="${this.tl.duration}">
      <label><input type="checkbox" class="snap" checked> snap</label>
      <select class="snapstep" title="snap increment (beat/bar need a detected beat grid — ♪ on an audio row)">
        <option value="frame">frame</option><option value="0.1">0.1s</option>
        <option value="0.25">0.25s</option><option value="1">1s</option>
        <option value="beat">beat</option><option value="bar">bar</option></select>
      <button data-act="audio" title="add audio clip at playhead">🎵</button>
      <button data-act="autocut" title="auto-cut: put camera cuts on the downbeats (needs a beat grid + 2 cameras)">✂</button>
      <button data-act="film" title="FILM: shot list / sequences / render a multi-shot film">🎬</button>
      <select class="rsize" title="render size">
        <option value="1920x1080">1920×1080</option>
        <option value="1280x720">1280×720</option>
        <option value="854x480">854×480</option></select>
      <button data-act="render" title="render THIS scene to mp4 with its audio">⏺ Render</button>
      <span class="rstat"></span>
      <span class="spring"></span>
      <button data-act="help" title="keyboard shortcuts (?)">?</button>
      <button data-act="tmpl" title="start a new scene from a starter template">New…</button>
      <button data-act="save">Save</button>
      <button data-act="load">Load</button>`;
    this.el.appendChild(bar);
    this.$bar = bar;                   // whole bar goes dead during a capture (_barBusySet)
    this.$play = bar.querySelector('[data-act="play"]');
    this.$clock = bar.querySelector('.clock');
    this.$name = bar.querySelector('.name');
    this.$dur = bar.querySelector('.dur');
    this.$snap = bar.querySelector('.snap');
    this.$snapStep = bar.querySelector('.snapstep');
    this.$play.onclick = () => this._toggle();
    bar.querySelector('[data-act="save"]').onclick = () => this.save();
    bar.querySelector('[data-act="load"]').onclick = () => this._pickScene();
    this.$rsize = bar.querySelector('.rsize');
    this.$rstat = bar.querySelector('.rstat');
    this.$renderBtn = bar.querySelector('[data-act="render"]');
    this.$renderBtn.onclick = () => this.render();
    this.$audioBtn = bar.querySelector('[data-act="audio"]');
    this.$audioBtn.onclick = () => this._pickAudio();
    this.$cutBtn = bar.querySelector('[data-act="autocut"]');
    this.$cutBtn.onclick = () => this._autoCutMenu();
    this.$tmplBtn = bar.querySelector('[data-act="tmpl"]');
    this.$tmplBtn.onclick = () => this._pickTemplate();
    this.$helpBtn = bar.querySelector('[data-act="help"]');
    this.$helpBtn.onclick = () => this._toggleHelp();
    this.$dur.onchange = () => this.tl.setDuration(this.$dur.value);   // clamps + refreshes bar
    this.$name.onchange = () => { this.tl.scene.name = this.$name.value; };
    this.$filmBtn = bar.querySelector('[data-act="film"]');
    this.$filmBtn.onclick = () => this._toggleFilm();
    this.$snap.onchange = () => { this._snapOn = this.$snap.checked; };
    this.$snapStep.onchange = () => {
      this._snapStep = this.$snapStep.value;
      if ((this._snapStep === 'beat' || this._snapStep === 'bar') && !this.tl.scene.beatGrid)
        this._toast('no beat grid yet — press ♪ on an audio row to detect one (snapping to frames until then)');
    };

    const body = document.createElement('div');
    body.className = 'tl-body';
    this.$names = document.createElement('div'); this.$names.className = 'tl-names';
    const lanes = document.createElement('div'); lanes.className = 'tl-lanes';
    this.canvas = document.createElement('canvas');
    lanes.appendChild(this.canvas);
    body.appendChild(this.$names); body.appendChild(lanes);
    this.el.appendChild(body);
    this.lanesEl = lanes;
    this._buildFilm();                 // collapsed until 🎬 (mounts inside #timeline — Lane A's files stay untouched)

    this.canvas.addEventListener('mousedown', (e) => this._down(e));
    this.canvas.addEventListener('wheel', (e) => this._wheel(e), { passive: false });
    window.addEventListener('mousemove', (e) => this._move(e));
    window.addEventListener('mouseup', () => this._up());
    this.canvas.addEventListener('dblclick', (e) => this._dbl(e));
    this.canvas.addEventListener('contextmenu', (e) => this._ctx(e));
    window.addEventListener('keydown', (e) => this._key(e));
    window.addEventListener('resize', () => this.draw());
  }

  // rows: [{type:'transform'|'params'|'clip'|'cameras', id?, label}].
  // Built from the timeline's entities (authoritative for tracks) merged with
  // any stage entities not yet keyframed (dock-added but not in a loaded scene).
  _rows() {
    const rows = [];
    const list = [...this.tl.scene.entities];
    for (const se of this.stage.entities()) if (!list.find((e) => e.id === se.id)) list.push(se);
    for (const e of list) {
      rows.push({ type: 'transform', id: e.id, kind: e.kind, label: e.label || e.id });
      if (e.kind === 'character') rows.push({ type: 'clip', id: e.id, label: '↳ clips' });
      const paramable = (e.tracks?.params?.length > 0) || e.kind === 'camera' || e.kind === 'light';
      if (paramable) rows.push({ type: 'params', id: e.id, label: '↳ params' });
      // viseme lane only when the character actually has morph targets (M4-B)
      const hasMorphs = (e.tracks?.morphs?.length > 0) ||
        (e.kind === 'character' && this.stage.visemeTargets && (this.stage.visemeTargets(e.id) || []).length > 0);
      if (hasMorphs) rows.push({ type: 'morphs', id: e.id, label: '↳ visemes' });
    }
    rows.push({ type: 'cameras', label: 'Cameras' });
    for (const clip of (this.tl.scene.audio || [])) {
      rows.push({ type: 'audio', clip, label: '🎵 ' + (clip.path || '').split('/').pop() });
    }
    return rows;
  }

  // stage.onChange fires on add, on remove, and on a gizmo mouseUp (stage.js's
  // TransformControls 'mouseUp' → _fireChange — NOT from setTransform, so
  // nothing here can feed back into the timeline).
  _stageChanged(en) {
    this._syncRows();
    if (!en || !en.id || this.tl._applying) return;
    // A keyed entity's pose is re-applied on EVERY seek, so the drag you just did
    // looks right until the next scrub and then silently reverts. Don't auto-key
    // (too opinionated) — say so.
    if (!rowFlags(this._te(en.id)).keyed) return;      // fresh adds have no keys → silent
    this._toast(`${en.label || en.id} is keyed — press ⏺ key in the inspector, or double-click its lane, to keep this pose`);
  }
  _markSel() {
    if (!this.rows) return;
    [...this.$names.children].forEach((d, i) => {
      const r = this.rows[i];
      d.classList.toggle('sel', !!(this._selId && r && r.id === this._selId));
    });
  }

  _syncRows() {
    this.rows = this._rows();
    this.$names.innerHTML = '';
    this.rows.forEach((r, i) => {
      const d = document.createElement('div');
      const sub = r.type === 'clip' || r.type === 'params' || r.type === 'morphs' || r.type === 'audio';
      d.className = 'row' + (i === 0 ? ' head' : '') + (sub ? ' sub' : '');
      if (r.type === 'transform') d.innerHTML = `<span class="k">${(r.kind || '?')[0].toUpperCase()}</span>${r.label}`;
      else if (r.type === 'audio') {
        d.append(r.label);
        const g = document.createElement('input');
        g.type = 'number'; g.className = 'gain'; g.step = '0.1'; g.min = '0'; g.title = 'gain';
        g.value = r.clip.gain ?? 1;
        g.onchange = () => this.tl.setAudioGain(r.clip, Math.max(0, +g.value || 0));
        d.appendChild(g);
        const beat = document.createElement('button');      // M9-B1: beat grid from this audio
        beat.className = 'lip'; beat.textContent = '♪';
        beat.title = 'detect beats: build a beat grid from this clip → snap increment beat / bar';
        beat.onclick = () => this._detectBeats(r.clip, beat);
        d.appendChild(beat);
        const lip = document.createElement('button');       // M5: lip-sync from this audio
        lip.className = 'lip'; lip.textContent = '🗣';
        lip.title = 'lip-sync: rhubarb this audio → viseme keys on a character';
        lip.onclick = () => this._lipSync(r.clip, lip);
        d.appendChild(lip);
      } else d.textContent = r.label;
      // OUTLINER: an ambient light has no clickable geometry on the stage (its
      // wrapper holds a HemisphereLight, which the raycast can never hit), so its
      // intensity / colour / bg / fog fields were reachable only from devtools.
      // Every row that has an entity selects it — sub-rows select their parent.
      if (r.id) {
        const te = this._te(r.id);
        const f = rowFlags(te);
        d.classList.add('pick');
        d.title = `${r.label} — ${(r.kind || (te && te.kind) || 'entity')} ${r.id}`
          + (f.keyed ? ` · ${te.tracks.transform.length} transform key(s)` : '') + ' · click to select';
        d.onclick = () => { if (this.stage.getEntity(r.id)) this.stage.select(r.id); };   // may have been removed
        if (f.keyed && r.type === 'transform') {
          const kf = document.createElement('span');
          kf.className = 'kf'; kf.textContent = '⏺';
          kf.title = 'keyed: the timeline drives this transform — moving it by hand reverts on the next scrub';
          d.appendChild(kf);
        }
      }
      this.$names.appendChild(d);
    });
    this._markSel();
    // size lanes to content so no row (esp. Cameras) is clipped as rows grow.
    // ponytail: grow-to-content; add a max-height+scroll only if a scene ever
    // has so many entities the panel dominates the viewport.
    const hpx = RULER_H + this.rows.length * ROW_H;
    this.$names.style.height = hpx + 'px';
    this.lanesEl.style.height = hpx + 'px';
    this.draw();
  }

  // ---- geometry ----
  _dims() {
    const w = this.canvas.clientWidth, h = this.canvas.clientHeight;
    const dpr = window.devicePixelRatio || 1;
    if (this.canvas.width !== w * dpr || this.canvas.height !== h * dpr) {
      this.canvas.width = w * dpr; this.canvas.height = h * dpr;
    }
    return { w, h, dpr, pps: (w / (this.tl.duration || 1)) * this._zoom };
  }
  _x2t(x) { const { pps } = this._dims(); return Math.max(0, Math.min(this.tl.duration, this._panT + x / pps)); }
  _t2x(t) { const { pps } = this._dims(); return (t - this._panT) * pps; }
  // UX (session-5 nit): plain wheel is NOT captured — the page scrolls as users
  // expect. Cmd/Ctrl+wheel (incl. trackpad pinch → ctrlKey) zooms around the
  // cursor; horizontal wheel pans when zoomed in.
  _wheel(e) {
    const zoomG = e.ctrlKey || e.metaKey;
    const panG = this._zoom > 1 && Math.abs(e.deltaX) > Math.abs(e.deltaY);
    if (!zoomG && !panG) return;
    e.preventDefault();
    const { x } = this._local(e);
    const { w, pps } = this._dims();
    if (zoomG) {
      const tAt = this._panT + x / pps;                      // time under the cursor
      this._zoom = Math.max(1, Math.min(64, this._zoom * Math.pow(1.0015, -e.deltaY)));
      this._panT = tAt - x / ((w / (this.tl.duration || 1)) * this._zoom);   // keep it under the cursor
    } else {
      this._panT += e.deltaX / pps;
    }
    const view = (this.tl.duration || 1) / this._zoom;       // visible seconds
    this._panT = Math.max(0, Math.min(this.tl.duration - view, this._panT));
    this.draw();
  }
  _rowAtY(y) { const i = Math.floor((y - RULER_H) / ROW_H); return (i >= 0 && i < this.rows.length) ? i : -1; }

  // ---- draw ----
  draw() {
    if (!this.rows) this.rows = this._rows();
    const { w, h, dpr } = this._dims();
    const c = this.canvas.getContext('2d');
    c.setTransform(dpr, 0, 0, dpr, 0, 0);
    c.clearRect(0, 0, w, h);
    this._hits = [];

    // ruler
    c.fillStyle = '#12161c'; c.fillRect(0, 0, w, RULER_H);
    c.fillStyle = '#565f6b'; c.font = '10px ui-monospace';
    const dur = this.tl.duration || 1;
    const stepSec = dur <= 5 ? 0.5 : dur <= 20 ? 1 : 5;
    for (let t = 0; t <= dur + 1e-6; t += stepSec) {
      const x = this._t2x(t);
      c.strokeStyle = '#1b2027'; c.beginPath(); c.moveTo(x, 0); c.lineTo(x, h); c.stroke();
      c.fillText(t.toFixed(stepSec < 1 ? 1 : 0) + 's', x + 2, 12);
    }

    // lanes
    this.rows.forEach((r, i) => {
      const y = RULER_H + i * ROW_H;
      c.fillStyle = LANE_BG[i % 2];
      c.fillRect(0, y, w, ROW_H);
      c.strokeStyle = '#1b2027'; c.beginPath(); c.moveTo(0, y + ROW_H); c.lineTo(w, y + ROW_H); c.stroke();
      if (r.type === 'transform') this._drawKeys(c, r, y);
      else if (r.type === 'params') this._drawParams(c, r, y);
      else if (r.type === 'morphs') this._drawMorphs(c, r, y);
      else if (r.type === 'clip') this._drawClips(c, r, y);
      else if (r.type === 'cameras') this._drawCuts(c, y);
      else if (r.type === 'audio') this._drawAudio(c, r, y);
    });

    this._drawBeatGrid(c, w, h);

    // box-select overlay
    const d = this._drag;
    if (d && d.kind === 'box' && d.moved) {
      c.fillStyle = 'rgba(122,162,247,0.15)'; c.strokeStyle = '#7aa2f7';
      const x = Math.min(d.x0, d.x), y = Math.min(d.y0, d.y);
      c.fillRect(x, y, Math.abs(d.x - d.x0), Math.abs(d.y - d.y0));
      c.strokeRect(x + 0.5, y + 0.5, Math.abs(d.x - d.x0), Math.abs(d.y - d.y0));
    }

    // playhead
    const px = this._t2x(this.tl.time);
    c.strokeStyle = '#f7768e'; c.lineWidth = 1.5;
    c.beginPath(); c.moveTo(px, 0); c.lineTo(px, h); c.stroke(); c.lineWidth = 1;
    c.fillStyle = '#f7768e'; c.beginPath(); c.moveTo(px - 4, 0); c.lineTo(px + 4, 0); c.lineTo(px, 6); c.fill();

    this.$clock.textContent = this.tl.time.toFixed(2) + 's';
    this.$play.textContent = this.tl.playing ? '❚❚' : '▶';
  }

  // M9-B1: the beat grid over the lanes — faint on beats, brighter on downbeats.
  // Drawn only while it's readable: under ~7px apart the lines are mush, so beats
  // drop out first and then bars, rather than painting the panel solid.
  _drawBeatGrid(c, w, h) {
    const g = this.tl.scene.beatGrid;
    if (!g) return;
    const { pps } = this._dims();
    const per = g.period || (g.bpm ? 60 / g.bpm : 0);
    if (!(per > 0)) return;
    const barGap = per * (g.meter || 4) * pps;
    if (barGap < 7) return;                                  // even bars would be mush → draw nothing
    const line = (times, style) => {
      c.strokeStyle = style; c.beginPath();
      for (const t of times) {
        const x = Math.round(this._t2x(t)) + 0.5;
        if (x < 0 || x > w) continue;
        c.moveTo(x, RULER_H); c.lineTo(x, h);
      }
      c.stroke();
    };
    if (per * pps >= 7) line(this.tl.gridTimes('beat'), 'rgba(146,180,232,0.13)');
    line(this.tl.gridTimes('bar'), 'rgba(224,175,104,0.34)');
  }

  _entity(id) { return this.stage.getEntity(id); }          // stage: live transform/existence
  _te(id) { return this.tl.scene.entities.find((e) => e.id === id); }  // timeline: authoritative tracks
  _selected(k) { return this._selKeys.some((s) => s.key === k); }

  _diamond(c, x, cy, r, fill, sel) {
    c.fillStyle = fill;
    c.beginPath(); c.moveTo(x, cy - r); c.lineTo(x + r, cy); c.lineTo(x, cy + r); c.lineTo(x - r, cy); c.closePath(); c.fill();
    if (sel) { c.strokeStyle = '#fff'; c.lineWidth = 1.5; c.stroke(); c.lineWidth = 1; }
  }
  _drawKeys(c, r, y) {
    const cy = y + ROW_H / 2;
    const keys = (this._te(r.id)?.tracks?.transform) || [];
    for (const k of keys) {
      const x = this._t2x(k.t);
      this._diamond(c, x, cy, KEY_R, '#7aa2f7', this._selected(k));
      this._hits.push({ kind: 'key', id: r.id, track: 'transform', key: k, x, y: cy });
    }
  }
  _paramColor(name) { let h = 0; for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) % 360; return `hsl(${h},55%,62%)`; }
  _drawParams(c, r, y) {
    const cy = y + ROW_H / 2;
    const keys = (this._te(r.id)?.tracks?.params) || [];
    for (const k of keys) {
      const x = this._t2x(k.t);
      this._diamond(c, x, cy, 4, this._paramColor(k.key), this._selected(k));
      this._hits.push({ kind: 'key', id: r.id, track: 'params', key: k, x, y: cy });
    }
  }
  _drawClips(c, r, y) {
    const blocks = (this._te(r.id)?.tracks?.clips) || [];
    for (const b of blocks) {
      const span = (b.out - b.in) || 0.0001, end = b.start + span * (b.loop || 1);
      const x0 = this._t2x(b.start), x1 = this._t2x(end), bw = Math.max(2, x1 - x0);
      c.fillStyle = '#3d5a80'; c.fillRect(x0, y + 5, bw, ROW_H - 10);
      c.strokeStyle = '#98c1d9'; c.strokeRect(x0 + 0.5, y + 5.5, bw - 1, ROW_H - 11);
      if (b.fade > 0) { // fade-out wedge at the tail
        const fx = this._t2x(end - b.fade);
        c.fillStyle = 'rgba(231,175,104,0.35)'; c.fillRect(fx, y + 5, x1 - fx, ROW_H - 10);
      }
      c.fillStyle = LABEL_COLOR; c.font = '10px ui-monospace';
      c.save(); c.beginPath(); c.rect(x0, y, x1 - x0, ROW_H); c.clip();
      c.fillText((b.path || '').split('/').pop(), x0 + 4, y + ROW_H / 2 + 3); c.restore();
      this._hits.push({ kind: 'block', id: r.id, block: b, x0, x1, y });
      this._hits.push({ kind: 'edge', id: r.id, block: b, side: 'out', x: x1, y });
    }
  }
  _drawCuts(c, y) {
    const cy = y + ROW_H / 2;
    for (const cut of this.tl.cameraCuts) {
      const x = this._t2x(cut.t);
      c.fillStyle = CUT_COLOR; c.fillRect(x - 1, y + 4, 2, ROW_H - 8);
      c.beginPath(); c.arc(x, cy, 4, 0, Math.PI * 2); c.fill();
      // the LABEL, not the raw id — the lane read "e3 e5 e7" while the names
      // column right beside it said "cam2 / cam3". REVIEW-FIX: it was painted in
      // the lane's own background hex, i.e. invisible; it is the cut's own amber.
      const en = this.stage.getEntity(cut.camera) || this._te(cut.camera);
      c.fillStyle = CUT_COLOR; c.font = '9px ui-monospace';
      c.fillText((en && en.label) || cut.camera || '?', x + 6, cy + 3);
      this._hits.push({ kind: 'cut', cut, x, y: cy });
    }
  }
  _drawMorphs(c, r, y) {
    const cy = y + ROW_H / 2;
    const keys = (this._te(r.id)?.tracks?.morphs) || [];
    for (const k of keys) {
      const x = this._t2x(k.t);
      this._diamond(c, x, cy, 4, this._paramColor(k.key), this._selected(k));
      this._hits.push({ kind: 'key', id: r.id, track: 'morphs', key: k, x, y: cy });
    }
  }
  _drawAudio(c, r, y) {
    const clip = r.clip;
    const srcDur = this._audioDur(clip.path);
    const inT = clip.in || 0;                          // trim within the source (like clip blocks)
    const outT = clip.out ?? srcDur;
    const len = outT != null ? Math.max(0.05, outT - inT) : null;
    const x0 = this._t2x(clip.start);
    const x1 = len != null ? this._t2x(clip.start + len) : x0 + 60;   // fallback width until decoded
    const bw = Math.max(3, x1 - x0);
    c.fillStyle = '#2e7d5b'; c.fillRect(x0, y + 5, bw, ROW_H - 10);
    c.strokeStyle = '#57c99a'; c.strokeRect(x0 + 0.5, y + 5.5, bw - 1, ROW_H - 11);
    c.fillStyle = '#dff5ea'; c.font = '10px ui-monospace';
    c.save(); c.beginPath(); c.rect(x0, y, bw, ROW_H); c.clip();
    const trimmed = clip.in != null || clip.out != null;
    c.fillText((trimmed ? '✂ ' : '') + (clip.path || '').split('/').pop() + (srcDur == null ? ' …' : ''), x0 + 4, y + ROW_H / 2 + 3); c.restore();
    this._hits.push({ kind: 'audioblock', clip, x0, x1, y });
    if (len != null) {                                  // drag an edge = trim (head / tail)
      this._hits.push({ kind: 'aedge', clip, side: 'out', x: x1, y });
      this._hits.push({ kind: 'aedge', clip, side: 'in', x: x0, y });
    }
  }

  // ---- interaction ----
  _local(e) { const r = this.canvas.getBoundingClientRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }
  // Everything that snaps goes through here — keys, clip/audio blocks, trims,
  // cuts, the playhead — so beat/bar makes ALL of them land on the music.
  _snap(t, e) {
    if ((e && e.altKey) || !this._snapOn) return t;
    if (this._snapStep === 'beat' || this._snapStep === 'bar') {
      const s = this.tl.snapToGrid(t, this._snapStep);
      if (s != null) return s;                               // no grid → fall through to frames
    }
    const step = (this._snapStep === 'frame' || isNaN(+this._snapStep))
      ? 1 / this.tl.fps : (+this._snapStep || 1 / this.tl.fps);
    return Math.round(t / step) * step;
  }
  _hitAt(x, y) {
    for (const h of this._hits) {
      if (h.kind === 'key' || h.kind === 'cut') { if (Math.abs(h.x - x) < 7 && Math.abs(h.y - y) < 9) return h; }
      else if (h.kind === 'edge' || h.kind === 'aedge') { if (Math.abs(h.x - x) < 5 && y > h.y && y < h.y + ROW_H) return h; }
    }
    for (const h of this._hits) if ((h.kind === 'block' || h.kind === 'audioblock') && x >= h.x0 && x <= h.x1 && y > h.y && y < h.y + ROW_H) return h;
    return null;
  }
  _seek(t) { this.tl.seek(t); if (this.tl.playing) this._audioStart(); }   // user seek: reschedule audio
  _keysInRect(x0, y0, x1, y1) {
    const ax = Math.min(x0, x1), bx = Math.max(x0, x1), ay = Math.min(y0, y1), by = Math.max(y0, y1);
    const out = [];
    for (const h of this._hits) if (h.kind === 'key' && h.x >= ax && h.x <= bx && h.y >= ay && h.y <= by) out.push({ id: h.id, track: h.track, key: h.key });
    return out;
  }

  _down(e) {
    if (this._busy()) return;          // a render is stepping this clock — don't fight it
    const { x, y } = this._local(e);
    this._undoMark = this.tl.undoStack.length;   // a drag = ONE undo entry (collapsed in _up)
    if (y < RULER_H) { this._drag = { kind: 'seek' }; this._seek(this._x2t(x)); return; }
    const h = this._hitAt(x, y);
    if (!h) { this._drag = { kind: 'box', x0: x, y0: y, x, y, moved: false }; return; }  // empty → box/seek
    if (h.kind === 'key') {
      if (this._selected(h.key) && this._selKeys.length > 1) {
        this._drag = { kind: 'multikey', grabT: this._x2t(x), orig: this._selKeys.map((s) => ({ ...s, t0: s.key.t })) };
      } else { this._selKeys = []; this._drag = { kind: 'key', h }; }
    } else if (h.kind === 'edge') this._drag = { kind: 'trim', h };
    else if (h.kind === 'aedge') this._drag = { kind: 'atrim', h };
    else if (h.kind === 'block') this._drag = { kind: 'block', h, grabT: this._x2t(x) - h.block.start };
    else if (h.kind === 'audioblock') this._drag = { kind: 'audio', h, grabT: this._x2t(x) - h.clip.start };
    else if (h.kind === 'cut') this._drag = { kind: 'cut', h };
  }
  _move(e) {
    if (!this._drag) return;
    const { x, y } = this._local(e);
    const t = this._x2t(x), d = this._drag;
    if (d.kind === 'seek') this._seek(t);
    else if (d.kind === 'key') { this.tl.moveKey(d.h.id, d.h.track, d.h.key, this._snap(t, e)); this.draw(); }
    else if (d.kind === 'multikey') { for (const s of d.orig) this.tl.moveKey(s.id, s.track, s.key, this._snap(s.t0 + (t - d.grabT), e)); this.draw(); }
    else if (d.kind === 'cut') { this.tl.moveCut(d.h.cut, this._snap(t, e)); this.draw(); }   // undo-able like every other drag
    else if (d.kind === 'block') { this.tl.moveClipBlock(d.h.id, d.h.block, Math.max(0, this._snap(t - d.grabT, e))); this.draw(); }
    else if (d.kind === 'audio') { this.tl.moveAudio(d.h.clip, this._snap(t - d.grabT, e)); this.draw(); }
    else if (d.kind === 'trim') { const b = d.h.block; this.tl.trimClipBlock(d.h.id, b, { out: Math.max(b.in + 0.05, b.in + (t - b.start)) }); this.draw(); }
    else if (d.kind === 'atrim') {
      const cl = d.h.clip, srcDur = this._audioDur(cl.path);
      if (d.h.side === 'in') this.tl.trimAudioIn(cl, this._snap(t, e), srcDur);   // head trim: in + start together
      else {
        let out = (cl.in || 0) + (t - cl.start);
        if (srcDur != null) out = Math.min(out, srcDur);
        this.tl.trimAudio(cl, { out });
      }
      this.draw();
    }
    else if (d.kind === 'box') { d.x = x; d.y = y; d.moved = Math.abs(x - d.x0) > 4 || Math.abs(y - d.y0) > 4; this.draw(); }
  }
  _up() {
    const d = this._drag; this._drag = null;
    if (!d) return;
    if (d.kind === 'box') {
      if (!d.moved) this._seek(this._x2t(d.x0));         // click on empty = seek
      else { this._selKeys = this._keysInRect(d.x0, d.y0, d.x, d.y); this.draw(); }
    }
    // A dropped cut absorbs anything it landed on top of (addCut's half-frame
    // rule), then the whole drag — every mousemove — collapses to ONE undo entry.
    if (d.kind === 'cut') {
      const eaten = this.tl.settleCut(d.h.cut);
      if (eaten) this._toast(`merged ${eaten} cut${eaten === 1 ? '' : 's'} you dropped this one on`);
    }
    if (this._undoMark != null) { this.tl.collapseUndo(this._undoMark); this._undoMark = null; }
    if (d.kind === 'cut') { this.tl.seek(this.tl.time); this.draw(); }   // re-assert the live camera
  }

  _dbl(e) {
    if (this._busy()) return;
    const { x, y } = this._local(e);
    const i = this._rowAtY(y); if (i < 0) return;
    const r = this.rows[i];
    const t = this._snap(this._x2t(x), e);
    if (r.type === 'transform') {
      const cur = this.stage.entityTransform(r.id);
      this.tl.addKey(r.id, 'transform', { t, pos: cur.pos, rot: cur.rot, scale: cur.scale, ease: 'inout' });
      this.draw();
    } else if (r.type === 'params') {
      // capture every keyable param at its current value (mirrors transform capture)
      const params = (this._entity(r.id)?.params) || {};
      for (const [key, value] of Object.entries(params)) {
        if (key === 'type' || typeof value === 'boolean') continue;   // non-keyable descriptors
        this.tl.addKey(r.id, 'params', { t, key, value, ease: 'inout' });
      }
      this.draw();
    } else if (r.type === 'cameras') {
      this._cutPick(t, e);
    }
  }

  // Double-click the Cameras row = cut to a camera at t. It used to cut to
  // `stage.activeCamera()` — "the camera you are looking through" — but the
  // TIMELINE drives that: `_evalCameraCuts` puts the stage back on the camera the
  // EDIT has live at every seek, so one scrub after adding cam2 the gesture could
  // only ever write a no-op cut on top of cam1, and with 2+ cameras and no beat
  // grid (✂ auto-cut refuses without one) there was no way at all to cut to the
  // second camera from the timeline. So: ASK. One camera → no menu, just cut.
  _cutPick(t, ev) {
    const cams = this.stage.entities().filter((en) => en.kind === 'camera');
    if (!cams.length) { this._toast('no cameras in this scene — add one from the dock (+ camera)'); return; }
    if (cams.length === 1) { this._cutTo(t, cams[0].id); return; }
    const live = this.tl.cutCameraAt(t);
    const menu = document.createElement('div');
    menu.className = 'tl-menu';
    const hd = document.createElement('div');
    hd.className = 'empty'; hd.textContent = `cut at ${t.toFixed(2)}s to…`;
    menu.appendChild(hd);
    for (const cm of cams) {
      const item = document.createElement('div');
      item.className = 'item';
      item.textContent = (cm.label || cm.id) + (cm.id === live ? '  (live here)' : '');
      // REVIEW-FIX: `menu.remove()` alone left the document mousedown listener
      // registered (holding a detached node until the next click anywhere), and
      // the menu was invisible to Escape because nothing on `this` pointed at it.
      // One close path, tracked on `this`, like every other overlay in this file.
      item.onclick = () => { this._pickClose(); this._cutTo(t, cm.id); };
      menu.appendChild(item);
    }
    this._pickClose();                                  // never two pickers at once
    document.body.appendChild(menu);
    menu.style.top = ((ev && ev.clientY != null ? ev.clientY : 100) + 4) + 'px';
    menu.style.left = Math.max(4, Math.min((ev && ev.clientX != null ? ev.clientX : 100),
      window.innerWidth - menu.offsetWidth - 6)) + 'px';
    const away = (evt) => { if (!menu.contains(evt.target)) this._pickClose(); };
    this._pickMenu = menu; this._pickAway = away;
    setTimeout(() => { if (this._pickMenu === menu) document.addEventListener('mousedown', away); }, 0);
  }
  _pickClose() {
    if (!this._pickMenu) return;
    if (this._pickAway) document.removeEventListener('mousedown', this._pickAway);
    this._pickMenu.remove();
    this._pickMenu = null; this._pickAway = null;
  }
  _cutTo(t, camId) {
    const label = (this.stage.getEntity(camId) || this._te(camId) || {}).label || camId;
    const { action, at, dead } = cutAction(this.tl.cameraCuts, t, camId, this.tl.fps);
    if (action === 'noop') { this._toast(`${label} is already live at ${t.toFixed(2)}s — no cut added`); return; }
    // ONE undo entry for the whole gesture: the cut, plus the cut this edit just
    // made redundant. Two entries would leave a half-undone edit (the dead cut
    // back, the new one still there) one Ctrl+Z in.
    const deadT = dead ? dead.t : null;
    this.tl.group(() => {
      if (action === 'remove') this.tl.removeCut(at);   // the cut sitting here changed nothing
      else this.tl.addCut(t, camId);                    // 'replace' is addCut's half-frame rule
      if (dead) this.tl.removeCut(dead);
    });
    const also = deadT != null ? ` · dropped the now-dead cut at ${deadT.toFixed(2)}s (${label} either side of it)` : '';
    if (action === 'remove') this._toast(`removed the cut at ${at.t.toFixed(2)}s — ${label} was already live${also}`);
    else this._toast(`cut at ${t.toFixed(2)}s → ${label}` + (action === 'replace' ? ' (replaced the cut here)' : '') + also);
    this.tl.seek(this.tl.time);
    this.draw();
  }
  _ctx(e) {
    e.preventDefault();
    if (this._busy()) return;
    const { x, y } = this._local(e);
    const h = this._hitAt(x, y);
    if (h && h.kind === 'key') { this.tl.deleteKey(h.id, h.track, h.key); this._selKeys = this._selKeys.filter((s) => s.key !== h.key); this.draw(); }
    else if (h && h.kind === 'cut') { this.tl.removeCut(h.cut); this.tl.seek(this.tl.time); this.draw(); }   // undo-able (was a raw splice)
    else if (h && h.kind === 'audioblock') { this.tl.removeAudio(h.clip); this._syncRows(); }
  }
  _key(e) {
    if (e.target && (/INPUT|TEXTAREA|SELECT/.test(e.target.tagName) || e.target.isContentEditable)) return;
    if (e.key === '?') { e.preventDefault(); this._toggleHelp(); }   // never hijacked while typing
    else if (e.key === 'Escape') { this._helpClose(); this._cutMenuClose(); this._pickClose(); }   // ✂ panel AND the camera picker
    else if (this._busy()) return;    // a render owns the clock: no play, no seek, no edits
    else if (e.code === 'Space') { e.preventDefault(); this._toggle(); }
    else if (e.key === 'Home') this._seek(0);
    else if (e.key === 'End') this._seek(this.tl.duration);
    else if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); this.tl.undo(); this.draw(); }
    else if ((e.key === 'Delete' || e.key === 'Backspace') && this._selKeys.length) {
      e.preventDefault();
      for (const s of this._selKeys) this.tl.deleteKey(s.id, s.track, s.key);
      this._selKeys = []; this.draw();
    }
  }
  _toggle() {
    if (this._busy()) return;          // ▶ during a capture would race the frame stepper
    if (this.tl.playing) { this.tl.pause(); this._audioStop(); }
    else { this.tl.play(); this._audioStart(); }
    this._wasPlaying = this.tl.playing;
    this.draw();
  }

  // ---- Web Audio (draft playback synced to the master clock). step()/render
  // NEVER touch this — the server muxes from scene.audio deterministically. ----
  _ensureCtx() {
    if (!this._audioCtx) { const C = window.AudioContext || window.webkitAudioContext; if (C) this._audioCtx = new C(); }
    return this._audioCtx;
  }
  _audioDur(path) { const b = this._audioBuf.get(path); return b ? b.duration : null; }
  async _decode(path) {
    if (this._audioBuf.has(path)) return this._audioBuf.get(path);
    const ctx = this._ensureCtx(); if (!ctx) return null;
    try {
      const res = await fetch('assets/file?path=' + encodeURIComponent(path));
      if (!res.ok) throw new Error(res.status);
      const buf = await ctx.decodeAudioData(await res.arrayBuffer());
      this._audioBuf.set(path, buf);
      this.draw();                       // width now known
      return buf;
    } catch { return null; }             // keep the block at fallback width
  }
  _decodeAll() { for (const clip of (this.tl.scene.audio || [])) this._decode(clip.path); }
  _audioStart() {
    const ctx = this._ensureCtx(); if (!ctx) return;
    if (ctx.state === 'suspended') ctx.resume();
    this._audioStop();
    const now = ctx.currentTime, t = this.tl.time;
    for (const clip of (this.tl.scene.audio || [])) {
      const buf = this._audioBuf.get(clip.path); if (!buf) continue;
      const inT = Math.min(clip.in || 0, buf.duration);          // trim within source
      const len = Math.min(clip.out ?? buf.duration, buf.duration) - inT;
      const offset = Math.max(0, t - clip.start);    // seconds into the (trimmed) block at playhead
      if (len <= 0 || offset >= len) continue;       // already finished
      const src = ctx.createBufferSource(); src.buffer = buf;
      const g = ctx.createGain(); g.gain.value = clip.gain ?? 1;
      src.connect(g).connect(ctx.destination);
      const when = now + Math.max(0, clip.start - t);
      src.start(when, inT + offset, len - offset);
      this._audioSrcs.push(src);
    }
  }
  _audioStop() { for (const s of this._audioSrcs) { try { s.stop(); } catch { /* already stopped */ } } this._audioSrcs = []; }

  async _pickAudio() {
    let list = [];
    try { const r = await fetch('assets/tree'); if (r.ok) list = (await r.json()).audio || []; } catch { /* offline */ }
    const menu = document.createElement('div'); menu.className = 'tl-menu';
    if (!list.length) menu.innerHTML = '<div class="empty">no audio in /assets/tree</div>';
    for (const it of list) {
      const path = it.path || it;
      const item = document.createElement('div'); item.className = 'item';
      item.textContent = (it.name || path).split('/').pop();
      item.onclick = async () => {
        this.tl.addAudio({ path, start: this.tl.time, gain: 1 });
        menu.remove();
        await this._decode(path);
        this._syncRows();
      };
      menu.appendChild(item);
    }
    document.body.appendChild(menu);
    const rect = this.$audioBtn.getBoundingClientRect();
    menu.style.left = rect.left + 'px'; menu.style.top = (rect.bottom + 2) + 'px';
    const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
    setTimeout(() => document.addEventListener('mousedown', close), 0);
  }

  // ---- M7-B: new from template (Lane C's read-only /templates) ----
  // All URLs stay RELATIVE — the app is served under /scenegod/ in prod.
  async _pickTemplate() {
    let list = [];
    try { const r = await fetch('templates'); if (r.ok) list = await r.json(); } catch { /* offline */ }
    const menu = document.createElement('div'); menu.className = 'tl-menu tmpl';
    if (!Array.isArray(list) || !list.length) menu.innerHTML = '<div class="empty">no starter templates on the server</div>';
    for (const t of (list || [])) {
      const item = document.createElement('div'); item.className = 'item';
      if (t.thumb) {
        const img = document.createElement('img');
        img.src = 'assets/file?path=' + encodeURIComponent(t.thumb);
        img.onerror = () => img.remove();            // thumb missing → text-only row
        item.appendChild(img);
      }
      const txt = document.createElement('div');
      const ti = document.createElement('div'); ti.className = 't'; ti.textContent = t.title || t.name;
      txt.appendChild(ti);
      if (t.description) { const d = document.createElement('div'); d.className = 'd'; d.textContent = t.description; txt.appendChild(d); }
      item.appendChild(txt);
      item.onclick = () => { menu.remove(); this.newFromTemplate(t.name); };
      menu.appendChild(item);
    }
    document.body.appendChild(menu);
    const rect = this.$tmplBtn.getBoundingClientRect();
    menu.style.top = (rect.bottom + 2) + 'px';
    menu.style.left = Math.max(4, Math.min(rect.left, window.innerWidth - menu.offsetWidth - 6)) + 'px';
    const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
    setTimeout(() => document.addEventListener('mousedown', close), 0);
  }

  // Applies exactly like load(): stage.applyState → tl.load → preload (all three
  // inside tl.applyScene, which also strips the presentation-only `template` key).
  async newFromTemplate(name) {
    if (this.tl.hasContent() && !confirm('Replace the current scene with this template? Unsaved work is lost.')) return;
    let json;
    try {
      const res = await fetch('templates/' + encodeURIComponent(name));
      if (!res.ok) throw new Error(res.status);
      json = await res.json();
    } catch (e) { this._toast('template "' + name + '" failed to load: ' + ((e && e.message) || e)); return; }
    try { await this.tl.applyScene(json); }
    catch (e) { this._toast('template failed to apply: ' + ((e && e.message) || e)); return; }
    this._decodeAll();
    this.draw();
  }

  // ---- M7-B: ? shortcuts overlay. Documents what the code ACTUALLY binds
  // (stage.js gizmo keys + dock drops + everything in _key/_down/_dbl/_ctx/
  // _wheel below). Toggle with ?, close with Escape or a click outside. ----
  _toggleHelp() {
    if (this._help) { this._helpClose(); return; }
    const S = (h, rows) => `<section><h4>${h}</h4><dl>` +
      rows.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join('') + '</dl></section>';
    const el = document.createElement('div'); el.className = 'tl-help';
    el.innerHTML = `<button class="close" title="close">✕</button>
      <h3>SCENEGOD shortcuts</h3><div class="hint">? toggles this panel · Escape closes it</div><div class="cols">` +
      S('STAGE', [
        ['drag / right-drag / wheel', 'orbit · pan · dolly the director cam'],
        ['click', 'select an object'],
        ['W / E / R', 'gizmo: move · rotate · scale (on the selection)'],
        ['drag a dock card in', 'place a character, prop or backdrop'],
        ['drag an animation onto a character', 'retarget + drop a clip block at the playhead'],
        ['drop files on the page', 'local glb/fbx/image/video (upload — not saved)'],
      ]) +
      S('TIMELINE', [
        ['Space', 'play / pause'],
        ['click a name-column row', 'select that entity on the stage (the only way to reach an ambient light)'],
        ['⏺ beside a name', 'the timeline drives that transform — a gizmo move reverts on the next scrub'],
        ['Home / End', 'jump to start / end'],
        ['click or drag the ruler', 'scrub'],
        ['double-click a transform lane', 'key the object where it stands now'],
        ['double-click a params lane', 'key its current params (fov, intensity, colour…)'],
        ['double-click the Cameras row', 'cut to a camera here — pick which one (one camera = straight in)'],
        ['drag a key', 'move it — snaps to the increment, Alt = free (a whole drag = one undo)'],
        ['drag a cut', 'move it; dropped within a frame of another cut it absorbs it'],
        ['drag empty lane space', 'box-select keys; drag one of them to move them all'],
        ['Delete / Backspace', 'delete the selected keys'],
        ['right-click', 'delete a key, a cut, or an audio block'],
        ['drag a clip / audio block', 'move it; drag an edge to trim (audio trims either end)'],
        ['Cmd/Ctrl + wheel', 'zoom the time axis 1–64× around the cursor'],
        ['two-finger sideways', 'pan when zoomed in (plain wheel scrolls the page)'],
        ['Cmd/Ctrl + Z', 'undo — one director preset = one undo'],
        ['♪ on an audio row', 'detect the beat grid, then snap = beat / bar'],
        ['🎬 move (DIRECT bar)', 'keys the camera move on this timeline — start+end, one undo; snap = bar puts both on downbeats'],
      ]) +
      S('SCENE BAR', [
        ['New…', 'start from a starter template (asks before clobbering)'],
        ['Save / Load', 'Save says plainly if the server refused it · Load lists what is on the server (asks before clobbering)'],
        ['⏺ Render', 'render THIS scene to mp4 at the picked size, with its audio'],
        ['dur / snap', 'scene length · snap increment — frame/0.1/0.25/1s, or beat/bar once ♪ found a grid'],
        ['🎵 / ♪ / 🗣', 'add audio at the playhead · beat-detect it · lip-sync it onto a character'],
        ['✂', 'auto-cut: camera cuts on the downbeats, cameras cycling — one undo'],
        ['🎬', 'FILM: shot list — sequences of scene windows, cut/dissolve, render to one mp4'],
        ['🎬 → ♪ align', 'snap every shot\'s in/out to the nearest downbeat (then Save)'],
      ]) + '</div>';
    el.querySelector('.close').onclick = () => this._helpClose();
    document.body.appendChild(el);
    this._help = el;
    // the ? button closes via _toggleHelp — don't let click-outside close first,
    // or the button would just reopen the panel on every click.
    this._helpAway = (ev) => { if (!el.contains(ev.target) && ev.target !== this.$helpBtn) this._helpClose(); };
    setTimeout(() => document.addEventListener('mousedown', this._helpAway), 0);
  }
  _helpClose() {
    if (!this._help) return;
    document.removeEventListener('mousedown', this._helpAway);
    this._help.remove(); this._help = null;
  }

  // ---- M9-B1: SNAP TO THE BEAT (♪ on an audio row) ----
  // GET beats?path= (Lane C) → grid stored on the scene → every existing snap
  // (keys, blocks, trims, cuts, playhead) becomes musical. Cached per path: the
  // first analysis of a 5-min track is ~0.8s on the server, cache hits are ~3ms,
  // and re-pressing ♪ after moving the clip must not re-analyse.
  async _detectBeats(clip, btnEl) {
    const path = clip.path;
    let res = this._beatCache.get(path);
    if (!res) {
      if (btnEl) { btnEl.disabled = true; btnEl.textContent = '…'; }
      try {
        const r = await fetch('beats?path=' + encodeURIComponent(path));
        if (!r.ok) {
          let msg = 'beat detection failed: ' + r.status;
          try { const j = await r.json(); if (j.detail) msg = j.detail; } catch { /* non-json body */ }
          this._toast(msg); return;                    // 503 carries "ffmpeg not found on server"
        }
        res = await r.json();
        this._beatCache.set(path, res);
      } catch { this._toast('server unreachable — beat detection needs Lane C running'); return; }
      finally { if (btnEl) { btnEl.disabled = false; btnEl.textContent = '♪'; } }
    }
    if (!(res.beats || []).length) { this._toast(`no beats found in ${path.split('/').pop()}${res.note ? ' — ' + res.note : ''}`); return; }
    this.tl.setBeatGrid(beatGridFrom(res, clip.start - (clip.in || 0)));
    this._snapOn = true; this.$snap.checked = true;    // pressing ♪ means "snap me to this"
    this._snapStep = 'beat'; this.$snapStep.value = 'beat';
    const conf = res.confidence ?? 0;
    this._toast(conf < 0.35
      ? `♪ ${(+res.bpm).toFixed(2)} BPM but LOW confidence (${conf.toFixed(2)}) — this grid may be mush; check it against the audio before you cut to it. Snap = beat.`
      : `♪ ${(+res.bpm).toFixed(2)} BPM · ${res.beats.length} beats · confidence ${conf.toFixed(2)} · snap = beat`);
    this.draw();
  }

  // ---- M10-B1: AUTO-CUT (✂ in the scene bar) ----
  // The popover is a preview, not a wizard: pick cadence / cameras / range and
  // the line above Apply says exactly how many cuts you are about to get. Every
  // refusal (no grid, <2 cameras, empty range) is the model's own message, shown
  // in place of the count with Apply disabled — never a button that does nothing.
  _autoCutMenu() {
    if (this._cutMenu) { this._cutMenuClose(); return; }
    const cams = this.tl.cameraIds();
    const menu = document.createElement('div');
    menu.className = 'tl-menu cut';
    menu.innerHTML = `
      <div class="hd">✂ auto-cut to the beat</div>
      <label class="fld">cadence
        <select class="cad">
          <option value="1">every bar</option>
          <option value="2" selected>every 2 bars</option>
          <option value="4">every 4 bars</option>
          <option value="8">every 8 bars</option>
        </select></label>
      <div class="fld">range
        <label><input type="radio" name="sgcutrange" class="rall" checked> whole scene</label>
        <label><input type="radio" name="sgcutrange" class="rph"> from the playhead</label>
      </div>
      <div class="fld">cameras <span class="lbl">(cycled in this order)</span></div>
      <div class="cams"></div>
      <div class="cnt"></div>
      <div class="act"><button class="go">Apply</button><button class="no">Cancel</button></div>`;
    const camHost = menu.querySelector('.cams');
    for (const id of cams) {
      const en = this.stage.getEntity(id) || this._te(id) || {};
      const l = document.createElement('label');
      const cb = document.createElement('input');
      cb.type = 'checkbox'; cb.checked = true; cb.value = id;
      cb.onchange = () => refresh();
      l.appendChild(cb); l.append(' ' + (en.label || id));
      camHost.appendChild(l);
    }
    if (!cams.length) camHost.innerHTML = '<span class="lbl">no cameras in this scene</span>';

    const opts = () => ({
      cadence: +menu.querySelector('.cad').value,
      cameras: [...menu.querySelectorAll('.cams input:checked')].map((c) => c.value),
      from: menu.querySelector('.rph').checked ? this.tl.time : 0,
    });
    const go = menu.querySelector('.go');
    const refresh = () => {
      const plan = this.tl.autoCutPlan(opts());
      const cnt = menu.querySelector('.cnt');
      go.disabled = !plan.ok;
      if (!plan.ok) { cnt.className = 'cnt err'; cnt.textContent = plan.error; return; }
      const every = (plan.barPeriod * plan.cadence);
      cnt.className = 'cnt';
      cnt.textContent = `will place ${plan.cuts.length} cut${plan.cuts.length === 1 ? '' : 's'}`
        + (every > 0 ? ` · one every ${every.toFixed(2)}s` : '')
        + (plan.replaced.length ? ` · ${plan.replaced.length} existing replaced` : '')
        + (plan.kept.length ? ` · ${plan.kept.length} of your cut${plan.kept.length === 1 ? '' : 's'} kept` : '')
        + (plan.dropped.length ? ` · ${plan.dropped.length} dropped (no camera change)` : '')
        + (plan.confidence < 0.35 ? ` · LOW grid confidence (${plan.confidence.toFixed(2)})` : '');
    };
    menu.querySelector('.cad').onchange = refresh;
    menu.querySelector('.rall').onchange = refresh;
    menu.querySelector('.rph').onchange = refresh;
    menu.querySelector('.no').onclick = () => this._cutMenuClose();
    go.onclick = () => {
      let plan;
      try { plan = this.tl.autoCut(opts()); }
      catch (e) { this._toast('auto-cut: ' + ((e && e.message) || e)); return; }
      this._cutMenuClose();
      this.draw();
      this._toast(`✂ ${plan.cuts.length} cuts on the downbeats · every ${plan.cadence} bar${plan.cadence === 1 ? '' : 's'}`
        + ` · ${plan.cameras.length} cameras cycling`
        + (plan.dropped.length ? ` · dropped ${plan.dropped.length} no-op cut${plan.dropped.length === 1 ? '' : 's'} (cut to the camera already live)` : '')
        + (plan.confidence < 0.35 ? ` · LOW grid confidence (${plan.confidence.toFixed(2)}) — check it against the music` : '')
        + ' · Cmd/Ctrl+Z undoes the lot');
    };
    document.body.appendChild(menu);
    const rect = this.$cutBtn.getBoundingClientRect();
    menu.style.top = (rect.bottom + 2) + 'px';
    menu.style.left = Math.max(4, Math.min(rect.left, window.innerWidth - menu.offsetWidth - 6)) + 'px';
    this._cutMenu = menu;
    this._cutRefresh = refresh;
    this._cutAway = (ev) => { if (!menu.contains(ev.target) && ev.target !== this.$cutBtn) this._cutMenuClose(); };
    setTimeout(() => document.addEventListener('mousedown', this._cutAway), 0);
    refresh();
  }
  _cutMenuClose() {
    if (!this._cutMenu) return;
    document.removeEventListener('mousedown', this._cutAway);
    this._cutMenu.remove(); this._cutMenu = null; this._cutRefresh = null;
  }

  // ---- M5: lip-sync from audio (🗣 on an audio row) ----
  // GET /rhubarb?path=… → importRhubarb onto a viseme-bearing character.
  // >1 candidate → picker menu; 503 → toast the install hint from `detail`.
  async _lipSync(clip, anchorEl) {
    const vt = (id) => (this.stage.visemeTargets && this.stage.visemeTargets(id)) || [];
    const chars = this.stage.entities().filter((en) => en.kind === 'character' && vt(en.id).length > 0);
    if (!chars.length) { this._toast('no character with viseme morph targets in the scene'); return; }
    const id = chars.length === 1 ? chars[0].id
      : await this._choose(chars.map((c) => ({ label: c.label || c.id, value: c.id })), anchorEl);
    if (!id) return;
    let res;
    try { res = await fetch('rhubarb?path=' + encodeURIComponent(clip.path)); }
    catch { this._toast('server unreachable — /rhubarb needs Lane C running'); return; }
    if (!res.ok) {
      let msg = 'rhubarb failed: ' + res.status;
      try { const j = await res.json(); if (j.detail) msg = j.detail; } catch { /* non-json body */ }
      this._toast(msg); return;                      // 503 carries the rhubarb install hint
    }
    const json = await res.json();
    this.tl.importRhubarb(id, json, clip.start || 0);   // grouped: one undo reverts the import
    this._toast(`🗣 ${(json.mouthCues || []).length} cues → viseme keys on ${id}`);
    this.tl.seek(this.tl.time);
    this._syncRows();                                // viseme lane may be new
  }
  _choose(items, anchorEl) {                         // small promise-menu (resolves value | null)
    return new Promise((resolve) => {
      const menu = document.createElement('div'); menu.className = 'tl-menu';
      for (const it of items) {
        const el = document.createElement('div'); el.className = 'item'; el.textContent = it.label;
        el.onclick = () => { menu.remove(); resolve(it.value); };
        menu.appendChild(el);
      }
      document.body.appendChild(menu);
      const rect = anchorEl.getBoundingClientRect();
      menu.style.left = rect.left + 'px'; menu.style.top = (rect.bottom + 2) + 'px';
      const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); resolve(null); } };
      setTimeout(() => document.addEventListener('mousedown', close), 0);
    });
  }
  _toast(msg) {
    const d = document.createElement('div'); d.className = 'tl-toast'; d.textContent = msg;
    document.body.appendChild(d);
    setTimeout(() => d.remove(), 4000);
  }

  // ---- M9-B2: FILM panel — the shot list a film is actually made of --------
  // A scene is one take; a SEQUENCE is the film (Lane C, M8-C). Everything here
  // goes through web/film.js's helpers so the URLs are never hand-rolled. film.js
  // is imported LAZILY (first 🎬 press): the timeline panel must still mount if
  // Lane C's client files are missing, and nobody who never opens FILM pays for
  // render.js. Mounted inside #timeline — index.html is Lane A's file.
  _buildFilm() {
    const el = document.createElement('div');
    el.className = 'tl-film';
    el.hidden = true;
    el.innerHTML = `
      <div class="frow head">
        <span class="lbl">FILM</span>
        <select class="seq" title="sequence"></select>
        <button data-f="new" title="create a sequence">New…</button>
        <button data-f="ren" title="rename this sequence">Rename</button>
        <button data-f="del" title="delete this sequence">Delete</button>
        <span class="lbl">runtime</span><span class="run">—</span>
        <span class="spring"></span>
        <select class="size" title="render size">
          <option value="1920x1080">1920×1080</option>
          <option value="1280x720">1280×720</option>
          <option value="854x480">854×480</option></select>
        <button data-f="beat" title="align to beat: snap every shot's in/out to the nearest downbeat">♪ align</button>
        <button data-f="save" title="save the shot list to the server">Save</button>
        <button class="go" data-f="render" title="render every shot and concatenate">Render film</button>
      </div>
      <div class="shots"></div>
      <div class="frow"><button data-f="add">+ shot</button><span class="fstat"></span></div>`;
    this.el.appendChild(el);
    this.$film = el;
    this.$seq = el.querySelector('.seq');
    this.$size = el.querySelector('.size');
    this.$render = el.querySelector('[data-f="render"]');
    this.$seq.onchange = () => this._filmSelect(this.$seq.value);
    const on = (f, fn) => { el.querySelector(`[data-f="${f}"]`).onclick = fn; };
    on('new', () => this._filmNew());
    on('ren', () => this._filmRename());
    on('del', () => this._filmDelete());
    on('beat', () => this._filmAlign());
    on('save', () => this._filmSave());
    on('add', () => this._filmAddShot());
    on('render', () => this._filmRender());
    this._filmRows();
  }
  _toggleFilm() {
    this.$film.hidden = !this.$film.hidden;
    if (!this.$film.hidden && !this._seqLoaded) this._filmRefresh();
  }
  _filmMod() {                                     // lazy, once
    if (!this._filmModP) this._filmModP = import('./film.js');
    return this._filmModP;
  }
  // postJSON throws `url: 422 {"errors":[…]}` — dig the real message back out.
  _errText(e) {
    const m = (e && e.message) || String(e);
    const i = m.indexOf('{');
    if (i >= 0) {
      try {
        const j = JSON.parse(m.slice(i));
        if (Array.isArray(j.errors)) return j.errors.join(' · ');
        if (j.detail) return j.detail;
      } catch { /* not json after all */ }
    }
    return m;
  }
  _filmStatus(msg, err) {
    const st = this.$film.querySelector('.fstat');
    st.className = 'fstat' + (err ? ' err' : '');
    st.textContent = msg || '';
    return st;
  }
  _sceneDur(name) { const s = (this._scenes || []).find((x) => x.name === name); return (s && s.duration) || 0; }

  async _filmRefresh(select) {
    let seqs = [], scenes = [];
    try {
      const F = await this._filmMod();
      seqs = await F.listSequences();
      const r = await fetch('scenes');
      scenes = r.ok ? await r.json() : [];
    } catch (e) { this._filmStatus('sequences unavailable — ' + this._errText(e), true); return; }
    this._scenes = scenes;
    this._seqLoaded = true;
    this.$seq.innerHTML = '';
    for (const s of seqs) {
      const o = document.createElement('option');
      o.value = s.name;
      o.textContent = `${s.title || s.name} · ${s.shots} shot${s.shots === 1 ? '' : 's'}${s.ok ? '' : ' ⚠'}`;
      this.$seq.appendChild(o);
    }
    const want = (select && seqs.some((s) => s.name === select)) ? select : (seqs[0] && seqs[0].name);
    if (want) { this.$seq.value = want; await this._filmSelect(want); }
    else { this._seq = null; this._seqName = null; this._filmRows(); this._filmStatus('no sequences yet — New… starts one'); }
  }
  async _filmSelect(name) {
    try {
      const F = await this._filmMod();
      this._seq = await F.getSequence(name);
      this._seq.shots = this._seq.shots || [];
      this._seqName = name;
      this._filmRows();
      this._filmStatus('');
    } catch (e) { this._filmStatus(`load "${name}" — ` + this._errText(e), true); }
  }

  _filmRows() {
    const host = this.$film.querySelector('.shots');
    host.innerHTML = '';
    const shots = (this._seq && this._seq.shots) || [];
    shots.forEach((sh, i) => host.appendChild(this._filmRow(sh, i, shots.length)));
    this.$film.querySelector('.run').textContent = shots.length ? filmRuntime(shots).toFixed(2) + 's' : '—';
    if (!this._filmBusy) this._filmEnable();
  }
  _filmRow(sh, i, n) {
    const row = document.createElement('div'); row.className = 'frow';
    const tag = document.createElement('span'); tag.className = 'shot'; tag.textContent = '#' + (i + 1);
    row.appendChild(tag);

    const sc = document.createElement('select'); sc.title = 'scene';
    const names = (this._scenes || []).map((s) => s.name);
    if (sh.scene && !names.includes(sh.scene)) names.push(sh.scene);      // keep an unknown scene visible
    for (const nm of names) {
      const o = document.createElement('option'); o.value = nm;
      o.textContent = nm + (this._sceneDur(nm) ? '' : ' (missing)');
      sc.appendChild(o);
    }
    sc.value = sh.scene || '';
    sc.onchange = () => {                                 // new scene → reset the window to the whole take
      sh.scene = sc.value; sh.in = 0; sh.out = this._sceneDur(sh.scene) || sh.out || 1;
      this._filmRows();
    };
    row.appendChild(sc);

    const num = (label, get, set, extra = {}) => {
      const l = document.createElement('span'); l.className = 'lbl'; l.textContent = label;
      const inp = document.createElement('input');
      inp.type = 'number'; inp.className = 'n'; inp.step = '0.1'; inp.min = '0';
      Object.assign(inp, extra);
      inp.value = get();
      inp.onchange = () => { set(Math.max(0, +inp.value || 0)); this._filmRows(); };
      row.appendChild(l); row.appendChild(inp);
      return inp;
    };
    num('in', () => sh.in ?? 0, (v) => { sh.in = v; });
    num('out', () => sh.out ?? this._sceneDur(sh.scene), (v) => { sh.out = v; });
    const dur = this._sceneDur(sh.scene);
    if (dur) { const d = document.createElement('span'); d.className = 'lbl'; d.textContent = `/ ${dur}s`; row.appendChild(d); }

    const tr = document.createElement('select'); tr.title = 'transition into the NEXT shot';
    for (const v of ['cut', 'dissolve']) { const o = document.createElement('option'); o.value = v; o.textContent = v; tr.appendChild(o); }
    tr.value = sh.transition || 'cut';
    tr.disabled = i === n - 1;                            // nothing follows the last shot
    tr.onchange = () => { sh.transition = tr.value; if (sh.transition === 'dissolve' && !sh.transitionDur) sh.transitionDur = 0.5; this._filmRows(); };
    row.appendChild(tr);
    if (sh.transition === 'dissolve' && i < n - 1) {
      num('s', () => sh.transitionDur ?? 0.5, (v) => { sh.transitionDur = v; }, { step: '0.1', title: 'dissolve seconds' });
    }

    const btn = (label, title, fn, disabled) => {
      const b = document.createElement('button'); b.textContent = label; b.title = title;
      b.disabled = !!disabled; b.onclick = fn; row.appendChild(b);
    };
    btn('↑', 'move earlier', () => this._filmMove(i, -1), i === 0);
    btn('↓', 'move later', () => this._filmMove(i, 1), i === n - 1);
    btn('✕', 'remove this shot', () => this._filmRemove(i));
    return row;
  }
  _filmMove(i, d) {
    const s = this._seq.shots, j = i + d;
    if (j < 0 || j >= s.length) return;
    [s[i], s[j]] = [s[j], s[i]];
    this._filmRows();
  }
  _filmRemove(i) { this._seq.shots.splice(i, 1); this._filmRows(); }
  _filmAddShot() {
    const prev = this._seq.shots[this._seq.shots.length - 1];
    const scene = (prev && prev.scene) || ((this._scenes || [])[0] || {}).name;
    if (!scene) { this._filmStatus('no saved scenes to cut together — save a scene first', true); return; }
    this._seq.shots.push({ scene, in: 0, out: this._sceneDur(scene) || 5, transition: 'cut', transitionDur: 0.5 });
    this._filmRows();
  }
  _filmEnable() {
    for (const nEl of this.$film.querySelectorAll('button,select,input')) nEl.disabled = false;
    const has = !!this._seq;
    for (const f of ['ren', 'del', 'save', 'add', 'render', 'beat']) {
      const b = this.$film.querySelector(`[data-f="${f}"]`);
      if (b) b.disabled = !has;
    }
    const shots = (this._seq && this._seq.shots) || [];
    // re-apply the per-row disables the rebuild just cleared
    this.$film.querySelectorAll('.shots .frow').forEach((row, i) => {
      const bs = row.querySelectorAll('button');
      if (bs[0]) bs[0].disabled = i === 0;
      if (bs[1]) bs[1].disabled = i === shots.length - 1;
      const sels = row.querySelectorAll('select');
      if (sels[1]) sels[1].disabled = i === shots.length - 1;
    });
  }
  _filmBusySet(b) {
    this._filmBusy = b;
    for (const nEl of this.$film.querySelectorAll('button,select,input')) nEl.disabled = b;
    this._barBusySet(b);          // the scene bar drives the SAME timeline — Save/Load/▶ off too
    this.$render.textContent = b ? 'rendering…' : 'Render film';
    if (!b) this._filmEnable();
  }

  async _filmSave() {
    if (!this._seq) return null;
    try {
      const F = await this._filmMod();
      const r = await F.saveSequence(this._seqName, this._seq);
      this._seqName = r.name || this._seqName;
      this._filmStatus(`saved · ${r.shots} shots · ${(+r.duration).toFixed(2)}s`
        + ((r.warnings || []).length ? ' · ' + r.warnings.join(' · ') : ''));
      return r;
    } catch (e) { this._filmStatus('save failed — ' + this._errText(e), true); return null; }
  }
  async _filmNew() {
    const name = (prompt('new sequence name', 'my-film') || '').trim();
    if (!name) return;
    const first = (this._scenes || [])[0];
    if (!first) { this._filmStatus('no saved scenes to cut together — save a scene first', true); return; }
    this._seq = { version: 1, name, title: name, audio: [],
      shots: [{ scene: first.name, in: 0, out: first.duration || 5, transition: 'cut', transitionDur: 0.5 }] };
    this._seqName = name;
    this._filmRows();
    const r = await this._filmSave();                 // a sequence only exists once the server has it
    if (r) await this._filmRefresh(r.name);
  }
  async _filmRename() {
    if (!this._seq) return;
    const old = this._seqName;
    const name = (prompt('rename sequence', old) || '').trim();
    if (!name || name === old) return;
    this._seq.name = name;
    if (!this._seq.title || this._seq.title === old) this._seq.title = name;
    this._seqName = name;
    const r = await this._filmSave();                 // save-then-delete: a failed save leaves the original
    if (!r) { this._seqName = old; return; }
    try { const F = await this._filmMod(); await F.deleteSequence(old); } catch { /* old copy lingers, harmless */ }
    await this._filmRefresh(r.name);
  }
  async _filmDelete() {
    if (!this._seq) return;
    if (!confirm(`Delete the sequence "${this._seqName}"? The scenes it cuts together are NOT touched.`)) return;
    try { const F = await this._filmMod(); await F.deleteSequence(this._seqName); }
    catch (e) { this._filmStatus('delete failed — ' + this._errText(e), true); return; }
    this._seq = null; this._seqName = null;
    await this._filmRefresh();
  }

  // ---- M10-B2: align the shot list to the beat (♪ align in the FILM panel) --
  // WHICH GRID: the open scene's, if it has one — that is the grid the user has
  // been cutting against and can see. Otherwise the first shot scene (in shot
  // order) that carries a saved grid. Either way the status line names it, so
  // "why did it snap there" always has a visible answer.
  async _filmGrid() {
    if (this.tl.scene.beatGrid) {
      return { grid: this.tl.scene.beatGrid, off: this.tl.beatOffset(), src: `the open scene "${this.tl.scene.name || 'untitled'}"` };
    }
    const seen = new Set();
    for (const sh of (this._seq.shots || [])) {
      if (!sh.scene || seen.has(sh.scene)) continue;
      seen.add(sh.scene);
      try {
        const r = await fetch('scenes/' + encodeURIComponent(sh.scene));
        if (!r.ok) continue;
        const json = await r.json();
        if (json && json.beatGrid) return { grid: json.beatGrid, off: beatOffsetOf(json), src: `shot scene "${sh.scene}"` };
      } catch { /* offline / missing scene → keep looking */ }
    }
    return null;
  }
  async _filmAlign() {
    if (!this._seq || this._filmBusy) return;
    const shots = this._seq.shots || [];
    if (!shots.length) { this._filmStatus('nothing to align — add a shot', true); return; }
    const g = await this._filmGrid();
    if (!g) {
      this._filmStatus('no beat grid anywhere — load a scene and press ♪ on an audio row (or save a scene that already has a grid)', true);
      return;
    }
    const durations = shots.map((sh) => this._sceneDur(sh.scene));
    const { shots: aligned, skipped } = alignShotsToGrid(shots, g.grid, g.off, durations);
    const moved = aligned.filter((s, i) => s.in !== shots[i].in || s.out !== shots[i].out).length;
    this._seq.shots = aligned;
    this._filmRows();                                  // runtime + every field redraws
    const conf = g.grid.confidence ?? 0;
    this._filmStatus(`aligned ${moved}/${shots.length} shot${shots.length === 1 ? '' : 's'} to the bar grid from ${g.src}`
      + (g.grid.bpm ? ` (${(+g.grid.bpm).toFixed(2)} BPM)` : '')
      + (conf < 0.35 ? ` · LOW confidence ${conf.toFixed(2)} — check it against the music` : '')
      + (skipped.length ? ` · left alone: ${skipped.map((s) => '#' + (s.index + 1) + ' (' + s.why + ')').join(', ')}` : '')
      + ' · Save to keep it', skipped.length > 0);
  }

  // renderSequence loads EVERY shot's scene onto the stage in turn (via
  // tl.applyScene), so it clobbers whatever is open — same warn-before-clobber
  // contract as New-from-template, said plainly. One render at a time.
  async _filmRender() {
    if (!this._seq) return;
    // REVIEW-FIX: the busy flag used to be claimed only AFTER `await
    // this._filmSave()` — i.e. after a network round-trip during which
    // `_rendering`/`_filmBusy` were both still false and the scene bar was still
    // live, so a ⏺ Render click walked straight through `renderRefusal` and both
    // capture loops ended up stepping the same clock (and whichever finished
    // first called resume() + re-armed the bar under the other one). The gate is
    // now claimed SYNCHRONOUSLY, before the first await, and released in a
    // finally that covers every exit — including "the save failed".
    const no = renderRefusal({ rendering: this._rendering, filmBusy: this._filmBusy });
    if (no) { this._filmStatus(no, true); return; }
    if (!(this._seq.shots || []).length) { this._filmStatus('nothing to render — add a shot', true); return; }
    if (this.tl.hasContent() && !confirm(
      'Render this film?\n\nEach shot loads its own saved scene onto the stage in turn, so the scene you have open right now will be REPLACED and any unsaved work is lost. Save it first if you want to keep it.')) return;
    const [w, h] = (this.$size.value || '1920x1080').split('x').map(Number);
    this._filmBusySet(true);                       // claimed BEFORE the first await
    try {
      const saved = await this._filmSave();        // the server renders the SAVED shot list, not this editor
      if (!saved) return;                          // _filmSave already said why; the finally hands the gate back
      this._filmStatus('starting…');
      const F = await this._filmMod();
      const url = await F.renderSequence(this.stage, this.tl, this._seqName, {
        width: w, height: h,
        onShot: (i, n, shot) => this._filmStatus(`shot ${i + 1}/${n} — ${shot.scene} ${shot.in}–${shot.out}s`),
        onProgress: (p) => this._filmStatus(`shot ${p.shot + 1}/${p.of} — ${p.scene} — frame ${p.frame}/${p.frames}`),
        onWarning: (m) => this._toast('film: ' + m),
      });
      const st = this._filmStatus('done · ');
      const a = document.createElement('a');
      a.href = url; a.target = '_blank'; a.rel = 'noopener'; a.textContent = url;
      st.appendChild(a);
      st.append(" · the stage now holds the last shot's scene");
      this._toast('🎬 film rendered — ' + url);
    } catch (e) { this._filmStatus('render failed — ' + this._errText(e), true); }
    finally {
      this._filmBusySet(false);
      this._syncRows(); this._refreshBar(); this.draw();   // the loaded scene changed under us
    }
  }

  // ---- ⏺ Render: the scene you are looking at, to mp4, with its audio -------
  // render.js's finalRender() had ZERO callers — the only render control in the
  // app was "Render film" inside the collapsed 🎬 panel, which needs a saved
  // scene, a sequence and a shot before it will do anything, renders SILENT by
  // design, and replaces the open scene when it's done. This is the one-button
  // version: this scene, this size, its audio[], nothing clobbered.
  // render.js is imported LAZILY, exactly like film.js — the panel must still
  // mount if Lane C's client files are missing.
  renderPlan(sizeStr) { return renderPlan(this.tl, sizeStr); }
  // A capture loop OWNS the timeline: it steps the clock, swaps cameras and hides
  // the chrome. Anything the user does to the scene bar or the lanes while it runs
  // either corrupts the film or is lost. `_busy` is the one gate.
  _busy() { return !!(this._rendering || this._filmBusy); }
  // The one choke point BOTH render paths go through, so it is where the model
  // learns a capture is running. Disabling DOM controls can only reach `$bar`;
  // Lane A's DIRECT panel and the dock live outside it and mutate the scene by
  // dispatching window events straight at timeline.js (`scenegod:direct`,
  // `scenegod:clipdrop`, `scenegod:capturekey`) — see Timeline._locked.
  _barBusySet(b) {
    if (this.tl) this.tl.locked = b;
    if (!this.$bar) return;
    for (const el of this.$bar.querySelectorAll('button,select,input')) el.disabled = b;
  }
  async render() {
    const no = renderRefusal({ rendering: this._rendering, filmBusy: this._filmBusy });
    if (no) { this._toast(no); return; }               // never two capture loops on one timeline
    let plan;
    try { plan = this.renderPlan(this.$rsize.value); }
    catch (e) { this._toast('render: ' + this._errText(e)); return; }
    // audio is validated by the server at POST /render/{id}/end — i.e. after
    // every frame has been uploaded. Refuse the whole render up front instead.
    const bad = audioProblems(plan.audio);
    if (bad.length) { this._toast('render: ' + bad.join(' · ')); return; }
    // claim the timeline BEFORE the first await — two fast clicks would otherwise
    // both get through the gate while the existence check is in flight — and
    // release it in a FINALLY that covers every exit from here on, so no early
    // return can leave the app permanently "rendering" with a dead scene bar.
    const saved = this.tl.time;                        // read before the claim (both sync — nothing can interleave)
    const label = this.$renderBtn.textContent;         // …so a throw here can't strand the gate
    this._rendering = true;
    this._barBusySet(true);                            // Save / New… / Load / ▶ all go dead too
    try {
      const missing = await this._audioMissing(plan.audio);
      if (missing.length) {
        this._toast(`render: audio not found under assets — ${missing.join(', ')}`); return;
      }
      this.tl.pause(); this._audioStop();              // wall-clock playback vs frame-stepping
      this.$rstat.textContent = '';
      const R = await import('./render.js');
      const url = await R.finalRender(this.stage, this.tl, {
        ...plan,
        onProgress: (n, total) => { this.$renderBtn.textContent = `rendering ${n}/${total}`; },
      });
      const a = document.createElement('a');           // relative — never /render/…
      a.href = url; a.target = '_blank'; a.rel = 'noopener'; a.textContent = url;
      this.$rstat.textContent = ''; this.$rstat.appendChild(a);
      this._toast('⏺ rendered — ' + url);
    } catch (e) { this._toast('render failed — ' + this._errText(e)); }
    finally {
      this._rendering = false;
      this._barBusySet(false);
      this.$renderBtn.textContent = label;
      this.tl.seek(saved);                             // put the playhead back where it was
      this.draw();
    }
  }

  // Existence half of the audio pre-flight: one ONE-BYTE ranged GET per distinct
  // path against the same `assets/file` route the server resolves against
  // (relative URL — prod serves under /scenegod/).
  // REVIEW-FIX: this used to send HEAD, which made the whole check INERT.
  // FastAPI's APIRoute registers only the methods you decorate — unlike
  // starlette's own Route it does NOT add HEAD to a GET route — so
  // `@app.get("/assets/file")` answers every HEAD with 405, and `status === 404`
  // could never be true no matter how many audio files had been moved. Measured
  // against a real uvicorn on this repo: HEAD → 405 `allow: GET`; GET → 404;
  // GET with `Range: bytes=0-0` → 206, content-length 1. So: a real GET (the
  // method the route answers) that asks for one byte, and the body is cancelled
  // rather than streamed — a 40MB stem must not be downloaded to prove it exists.
  // Fails OPEN: a network wobble must not block a render, it just means the
  // server gets the last word as before.
  async _audioMissing(audio) {
    const paths = [...new Set(((audio || []).map((a) => a && a.path).filter(Boolean)))];
    const out = [];
    for (const p of paths) {
      try {
        const r = await fetch('assets/file?path=' + encodeURIComponent(p), { headers: { Range: 'bytes=0-0' } });
        if (r.body && r.body.cancel) r.body.cancel().catch(() => {});   // don't download the file to check it exists
        if (r.status === 404) out.push(p);
      } catch { /* offline → let the server decide */ }
    }
    return out;
  }

  // ---- persistence (Lane C endpoints; localStorage fallback) ----
  // A save that fails must SAY SO. It used to catch every non-ok response into
  // localStorage with no toast and no console line, so a 422 from validate_scene
  // was indistinguishable from success — and because load() prefers the server
  // copy, the next Load silently restored the last good version and ate
  // everything since. Only a thrown fetch (genuinely offline) falls back now.
  async save() {
    const name = (this.$name.value || 'untitled').trim();
    this.tl.scene.name = name;
    this.tl.syncFromStage();            // gizmo moves + inspector edits → the model
    const json = this.tl.toJSON();
    const ups = uploadEntities(json);   // PLAN §4.1 `source.type:"upload"`: warn about dropped files
    if (ups.length && !confirm(`${ups.length} dropped file${ups.length === 1 ? '' : 's'} (${ups.join(', ')}) `
        + 'can only live in this browser session and will not be in the saved scene. Save anyway?')) return;
    let res;
    try {
      res = await fetch(`scenes/${encodeURIComponent(name)}`, {
        method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(json),
      });
    } catch {
      localStorage.setItem('scenegod:scene:' + name, JSON.stringify(json));  // real network failure
      this._toast(saveMessage({ ok: false, name }));
      return;
    }
    if (!res.ok) {
      const body = await res.text().catch(() => '');
      const why = body.trim() ? [this._errText(body)] : null;   // unwraps {errors:[…]} / {detail}
      const msg = saveMessage({ ok: false, status: res.status, errors: why, name });
      console.error('[scenegod:save]', res.status, body);
      this._toast(msg);
      return;
    }
    // The server SLUGIFIES: `My Scene` is written as my-scene.json and the Load
    // picker lists `my-scene`. It hands the real stem back in the response body
    // and this used to throw it away, so the toast named a file that does not
    // exist. Take the server's answer and put it in the field + the scene, so the
    // next save writes the same file and the bar matches the picker.
    const stem = await res.json().then((b) => (b && typeof b.name === 'string' && b.name) || name).catch(() => name);
    if (stem !== name) {
      this.tl.scene.name = stem; if (this.$name) this.$name.value = stem;
      // REVIEW-FIX: the server stores the BODY verbatim (`scene_save` writes what
      // you POST), so my-scene.json still carried `"name": "My Scene"` and the
      // next Load put the un-slugged name straight back into the bar while the
      // Load picker went on listing `my-scene` — the same disagreement, restored
      // on every load. Write the server's own stem back and re-POST once. The
      // stem is idempotent (slugify(slug) === slug), so this converges in one
      // extra request and only when the name actually needed slugging. Best
      // effort: the scene IS saved either way, the toast already names the file.
      json.name = stem;
      try {
        await fetch(`scenes/${encodeURIComponent(stem)}`, {
          method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(json),
        });
      } catch { /* the first write landed; the stored name stays stale until the next save */ }
    }
    this._toast(saveMessage({ ok: true, name: stem, count: (json.entities || []).length }));
  }

  // Load used to slugify nothing, list nothing, and do literally nothing on a
  // wrong name — while a RIGHT name wiped the stage and every unsaved key with no
  // warning, unlike the two other clobbering actions in the same bar. Now: a
  // picker of what the server actually has, and the same confirm as New….
  async _pickScene() {
    let list = [];
    try { const r = await fetch('scenes'); if (r.ok) list = await r.json(); } catch { /* offline */ }
    const menu = document.createElement('div'); menu.className = 'tl-menu';
    if (!Array.isArray(list) || !list.length) menu.innerHTML = '<div class="empty">no saved scenes on the server</div>';
    for (const s of (list || [])) {
      const item = document.createElement('div'); item.className = 'item';
      const when = s.mtime ? new Date(s.mtime * 1000).toLocaleString() : '';
      item.textContent = `${s.name}${s.duration ? ' · ' + (+s.duration).toFixed(1) + 's' : ''}${when ? ' · ' + when : ''}`;
      item.onclick = () => { menu.remove(); this.load(s.name); };
      menu.appendChild(item);
    }
    document.body.appendChild(menu);
    const rect = this.el.querySelector('[data-act="load"]').getBoundingClientRect();
    menu.style.top = (rect.bottom + 2) + 'px';
    menu.style.left = Math.max(4, Math.min(rect.left, window.innerWidth - menu.offsetWidth - 6)) + 'px';
    const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('mousedown', close); } };
    setTimeout(() => document.addEventListener('mousedown', close), 0);
  }
  async load(name) {
    name = (name || '').trim(); if (!name) return;
    let json = null;
    try { const res = await fetch(`scenes/${encodeURIComponent(name)}`); if (res.ok) json = await res.json(); } catch { /* fall through */ }
    if (!json) { const raw = localStorage.getItem('scenegod:scene:' + name); if (raw) json = JSON.parse(raw); }
    if (!json) { this._toast(`no scene called "${name}" on the server or in this browser`); return; }
    if (this.tl.hasContent() && !confirm('Replace the current scene? Unsaved work is lost.')) return;
    try { await this.tl.applyScene(json); }   // stage.applyState → tl.load (onLoad → rows+bar) → preload
    catch (e) {
      // one missing clip used to reject out of load() uncaught, which also killed
      // _decodeAll() — the audio row went dead and every later clip did nothing.
      this._toast(`load "${name}" failed — ` + this._errText(e));
    }
    this._decodeAll();                  // decode audio for lane widths + playback
    this._syncRows(); this._refreshBar();
    this.draw();
  }
}

export default TimelineUI;