@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/client/panels/timeline-parse.js

@@ -0,0 +1,229 @@
+// timeline-parse.js — DDR-148. Parse a video-comp's sequence + keyframe
+// structure from its raw .tsx source, so the Timeline panel can draw one row
+// per sequence (positioned by frame) with the animation (interpolate) windows
+// marked on it. Pure + dependency-free → unit-tested without a DOM.
+//
+// This is a pragmatic regex parser tuned to the shapes the video-comp skill
+// teaches (literal or const `durationInFrames`/`from`, <TransitionSeries> with
+// its overlap math, components referenced by name). It degrades gracefully:
+// an unparseable comp yields `{ sequences: [] }` and the panel shows a scrub-
+// only track. It is NOT a general TSX parser.
+
+/**
+ * Collect top-level numeric consts so `durationInFrames={A}` resolves. Two
+ * passes: literal ints first, then expression consts built from them
+ * (`const TOTAL = A + B - XF;`) so a derived total resolves too.
+ */
+function collectConsts(source) {
+  const consts = {};
+  for (const m of source.matchAll(/\bconst\s+([A-Za-z_$][\w$]*)\s*=\s*(-?\d+)\s*;/g)) {
+    consts[m[1]] = Number(m[2]);
+  }
+  for (let pass = 0; pass < 3; pass += 1) {
+    for (const m of source.matchAll(/\bconst\s+([A-Za-z_$][\w$]*)\s*=\s*([^;]+);/g)) {
+      const name = m[1];
+      if (Object.hasOwn(consts, name)) continue;
+      const v = resolveNum(m[2], consts);
+      if (v != null) consts[name] = v;
+    }
+  }
+  return consts;
+}
+
+/** Resolve a `{...}` expression to an integer: a literal, a const, or simple arithmetic of them. */
+function resolveNum(raw, consts) {
+  if (raw == null) return null;
+  const t = String(raw).trim();
+  if (/^-?\d+$/.test(t)) return Number(t);
+  if (Object.hasOwn(consts, t)) return consts[t];
+  const expr = t.replace(/[A-Za-z_$][\w$]*/g, (id) => (Object.hasOwn(consts, id) ? String(consts[id]) : id));
+  if (/^[-+*/()\d\s.]+$/.test(expr) && /\d/.test(expr)) {
+    try {
+      // eslint-disable-next-line no-new-func
+      const v = Function(`"use strict";return (${expr});`)();
+      if (Number.isFinite(v)) return Math.round(v);
+    } catch {
+      /* not arithmetic */
+    }
+  }
+  return null;
+}
+
+/** Animation (interpolate-of-frame) windows inside a named component's body. */
+function keyframesForComponent(source, compName, consts, seqFrom) {
+  if (!compName) return [];
+  const def = source.search(new RegExp(`\\b(?:const|function)\\s+${compName}\\b`));
+  if (def < 0) return [];
+  // Heuristic body window — components in a comp are small; the next top-level
+  // `const X =`/`function X` bounds it well enough for the marker overview.
+  const rest = source.slice(def + compName.length);
+  const nextDef = rest.search(/\n(?:const|function)\s+[A-Z]/);
+  const body = rest.slice(0, nextDef > 0 ? nextDef : 2400);
+  const kf = [];
+  for (const m of body.matchAll(/interpolate\(\s*frame\s*,\s*\[\s*([^,\]]+?)\s*,\s*([^,\]]+?)\s*[,\]]/g)) {
+    const a = resolveNum(m[1], consts);
+    const b = resolveNum(m[2], consts);
+    if (a != null && b != null && b >= a) kf.push({ from: seqFrom + a, to: seqFrom + b });
+  }
+  return kf;
+}
+
+/**
+ * Parse the comp's timeline. `totalFrames` (from the comp meta) is the
+ * authoritative total; the parser only positions the sequences within it.
+ * Returns `{ total, sequences: [{ label, from, duration, keyframes[] }] }`.
+ */
+/** The source slice of a named component's definition body (heuristic bounds). */
+function componentBody(src, name) {
+  if (!name) return null;
+  const def = src.search(new RegExp(`\\b(?:const|function)\\s+${name}\\b`));
+  if (def < 0) return null;
+  const rest = src.slice(def + name.length + 1);
+  const next = rest.search(/\n(?:const|function|export)\s+[A-Za-z]/);
+  return rest.slice(0, next > 0 ? next : rest.length);
+}
+
+/** The `<VideoComp component={X} …>` usages in a canvas, each tagged with the id
+ *  of its enclosing `<DCArtboard id="…">` (nearest preceding) so the Timeline can
+ *  scope to whichever artboard the user selected. */
+function videoCompUsages(src, consts) {
+  const out = [];
+  for (const m of src.matchAll(/<VideoComp\b([^>]*?)\/?>/g)) {
+    const a = m[1];
+    const comp = a.match(/component=\{([A-Za-z_$][\w$]*)\}/);
+    if (!comp) continue;
+    const before = src.slice(0, m.index);
+    const boards = [...before.matchAll(/<DCArtboard\b[^>]*?\bid=["']([^"']+)["']/g)];
+    out.push({
+      compName: comp[1],
+      artboardId: boards.length ? boards[boards.length - 1][1] : null,
+      duration: resolveNum(a.match(/durationInFrames=\{([^}]+)\}/)?.[1], consts),
+      fps: resolveNum(a.match(/fps=\{([^}]+)\}/)?.[1], consts) || 30,
+    });
+  }
+  return out;
+}
+
+export function parseCompTimeline(source, totalFrames, selectedArtboardId) {
+  const src = String(source ?? '');
+  const consts = collectConsts(src);
+
+  // A canvas can hold SEVERAL video-comps (one per artboard). Scope the parse to
+  // ONE composition's body so a 2-comp canvas doesn't merge every sequence into
+  // one track. Preference: the artboard the user SELECTED (so the Timeline
+  // follows the canvas), then a comp with real media, then a duration match,
+  // then the first — and read fps/total from it.
+  let scope = src;
+  let scopedTotal = totalFrames;
+  let scopedFps = 0;
+  let scopedArtboardId = null;
+  const usages = videoCompUsages(src, consts)
+    .map((u) => ({ ...u, body: componentBody(src, u.compName) }))
+    .filter((u) => u.body);
+  if (usages.length) {
+    const target =
+      (selectedArtboardId && usages.find((u) => u.artboardId === selectedArtboardId)) ||
+      usages.find((u) => /<(?:Audio|OffthreadVideo|Video)\b/.test(u.body)) ||
+      usages.find((u) => u.duration != null && u.duration === totalFrames) ||
+      usages[0];
+    scope = target.body;
+    if (target.duration != null) scopedTotal = target.duration;
+    scopedFps = target.fps;
+    scopedArtboardId = target.artboardId ?? null;
+  }
+
+  const items = [];
+  const tagRe =
+    /<(TransitionSeries\.Sequence|TransitionSeries\.Transition|Series\.Sequence|Sequence)\b([^>]*)>/g;
+  let m;
+  while ((m = tagRe.exec(scope))) {
+    const kind = m[1];
+    const attrs = m[2];
+    const openEnd = tagRe.lastIndex;
+    if (/Transition$/.test(kind)) {
+      const d = attrs.match(/durationInFrames:\s*([^,}\s)]+)/);
+      items.push({ type: 'transition', dur: resolveNum(d?.[1], consts) ?? 0 });
+    } else {
+      const dm = attrs.match(/durationInFrames=\{([^}]+)\}/);
+      const fm = attrs.match(/from=\{([^}]+)\}/);
+      // Bound the media/child sniff to THIS clip's own body — up to its close
+      // tag — never the fixed 240-char window that used to bleed into a
+      // following loose <Audio> and badge the wrong row (dogfood: EndCard showed
+      // a phantom audio). FALLBACK badge only; the enumerator (comp-clips)
+      // overlays authoritative media by index (incl. wrapper-component media).
+      const closeIdx = scope.indexOf(`</${kind}>`, openEnd);
+      const bound = closeIdx >= 0 ? Math.min(closeIdx, openEnd + 400) : openEnd + 240;
+      const after = scope.slice(openEnd, bound);
+      const lm = after.match(/<([A-Z][A-Za-z0-9]*)\b/);
+      // Media child sniff (badge + replace affordance): the first
+      // <Video|OffthreadVideo|Audio|Img src="…"> DIRECTLY inside the clip body.
+      const mm = after.match(/<(Video|OffthreadVideo|Audio|Img)\b[^>]*src=["']([^"']+)["']/);
+      const nameM = attrs.match(/name=["']([^"']+)["']/);
+      items.push({
+        type: 'seq',
+        // DDR-150 dogfood fix: a `from` on a SERIES clip is a lie — Remotion's
+        // TransitionSeries/Series compute their own offsets and IGNORE the prop
+        // (one shipped drag-move used to insert it). Never let it position the
+        // row; series rows always flow from the cumulative cursor, exactly like
+        // the render.
+        series: kind !== 'Sequence',
+        dur: resolveNum(dm?.[1], consts),
+        from: kind === 'Sequence' && fm ? resolveNum(fm[1], consts) : null,
+        compName: nameM ? nameM[1] : lm ? lm[1] : null,
+        mediaTag: mm ? mm[1] : null,
+        mediaSrc: mm ? mm[2] : null,
+      });
+    }
+  }
+
+  let cursor = 0;
+  const sequences = [];
+  for (const it of items) {
+    if (it.type === 'transition') {
+      cursor -= it.dur || 0;
+      continue;
+    }
+    const from = it.from != null ? it.from : cursor;
+    const duration = it.dur != null ? it.dur : 30;
+    sequences.push({
+      label: it.compName ?? `Seq ${sequences.length + 1}`,
+      series: !!it.series,
+      mediaTag: it.mediaTag,
+      mediaSrc: it.mediaSrc,
+      from: Math.max(0, from),
+      duration: Math.max(1, duration),
+      keyframes: keyframesForComponent(src, it.compName, consts, Math.max(0, from)),
+    });
+    cursor = from + duration;
+  }
+
+  const derived = sequences.length
+    ? Math.max(...sequences.map((s) => s.from + s.duration))
+    : 30;
+  const total = Number.isFinite(scopedTotal) && scopedTotal > 0 ? scopedTotal : derived;
+
+  // Audio/music beds — their OWN rows (a `<Audio>` isn't a Sequence, so it never
+  // shows up above). Spans the whole comp unless it carries from/durationInFrames.
+  const audio = [];
+  for (const m of scope.matchAll(/<Audio\b([^>]*)>/g)) {
+    const attrs = m[1];
+    const srcM = attrs.match(/src=["']([^"']+)["']/);
+    const fromM = attrs.match(/from=\{([^}]+)\}/);
+    const durM = attrs.match(/durationInFrames=\{([^}]+)\}/);
+    const from = fromM ? (resolveNum(fromM[1], consts) ?? 0) : 0;
+    const dur = durM ? resolveNum(durM[1], consts) : null;
+    const name = srcM ? String(srcM[1]).split(/[\\/]/).pop() : 'audio';
+    audio.push({
+      kind: 'audio',
+      label: name,
+      from: Math.max(0, from),
+      duration: dur != null ? Math.max(1, dur) : Math.max(1, total - from),
+    });
+  }
+
+  // `artboardId` is the DCArtboard the timeline scoped to — the shell passes it
+  // to /_api/comp-clips + every clip op so the enumerator targets the SAME comp
+  // (on a multi-comp canvas its own fallback picks a different one — the
+  // showreel badge/replace mis-scoped to the wrong comp without this).
+  return { total, fps: scopedFps || undefined, sequences, audio, artboardId: scopedArtboardId };
+}

package/apps/studio/client/panels/timeline-snap.js

@@ -0,0 +1,55 @@
+// timeline-snap.js — DDR-150 P5/Polish (Task 15). Pure snap helpers for the
+// Timeline clip drags (move `from` / trim duration). A dragged edge snaps to the
+// nearest "meaningful" frame — a second tick, a neighbor clip's edge, or the
+// playhead — within a pixel-derived threshold, UNLESS the user holds Alt (the
+// override modifier). Pure + exported so the behavior is unit-tested without a
+// DOM (timeline-snap.test.ts).
+
+/**
+ * The frames a dragged clip edge should snap to:
+ *   • 0 and the comp end (totalFrames)
+ *   • every whole-second tick (multiples of fps)
+ *   • every OTHER clip's start + end (skip the clip being dragged)
+ *   • the playhead
+ * Deduped + clamped to [0, totalFrames]. `clips` is the parsed sequence list
+ * ({ from, duration }); `movingIndex` is excluded so a clip never snaps to itself.
+ */
+export function computeSnapTargets({ fps, totalFrames, clips, movingIndex, playhead }) {
+  const targets = new Set([0, totalFrames]);
+  const step = Math.max(1, Math.round(fps || 30));
+  for (let f = 0; f <= totalFrames; f += step) targets.add(f);
+  (clips || []).forEach((c, i) => {
+    if (i === movingIndex) return;
+    const from = Number.isFinite(c?.from) ? c.from : 0;
+    const dur = Number.isFinite(c?.duration) ? c.duration : 0;
+    targets.add(from);
+    targets.add(from + dur);
+  });
+  if (Number.isFinite(playhead)) targets.add(playhead);
+  return [...targets].filter((t) => t >= 0 && t <= totalFrames).sort((a, b) => a - b);
+}
+
+/**
+ * Snap `candidate` to the nearest target within `threshold` frames (ties go to
+ * the closer, then the first). Returns `candidate` unchanged when nothing is in
+ * range or `threshold <= 0` (the Alt-override path passes 0). Pure.
+ */
+export function snapFrame(candidate, targets, threshold) {
+  if (!(threshold > 0)) return candidate;
+  let best = candidate;
+  let bestD = threshold + 1;
+  for (const t of targets || []) {
+    const d = Math.abs(candidate - t);
+    if (d <= threshold && d < bestD) {
+      best = t;
+      bestD = d;
+    }
+  }
+  return best;
+}
+
+/** Pixel snap radius → frames, given the row width + total frames. ~8px feels right. */
+export function snapThresholdFrames(rowW, totalFrames, px = 8) {
+  const w = Math.max(1, rowW || 1);
+  return (px / w) * Math.max(1, totalFrames - 1);
+}

package/apps/studio/client/styles/3-shell-maude.css

@@ -353,6 +353,13 @@
 .st-rp-tab .st-rp-tabct { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
 .st-rp-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
 .st-rp-hd { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
+/* Stage H (INV-3) edit-scope strip — local (this element) vs shared (edits N places). */
+.st-scope { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); flex: none; animation: st-pop var(--dur-soft) var(--ease-out); }
+.st-scope-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.st-scope--local { color: var(--fg-2); }
+.st-scope--local .st-scope-dot { background: var(--fg-3); }
+.st-scope--shared { color: var(--accent); }
+.st-scope--shared .st-scope-dot { background: var(--accent); }
 .st-rp-empty { color: var(--fg-2); font-size: var(--type-sm); line-height: 1.6; display: flex; flex-direction: column; gap: var(--space-4); }
 
 /* comment pin (inline badge in the panel) */
@@ -476,6 +483,24 @@
 .st-export-recent-row:hover { background: var(--bg-2); }
 .st-export-recent-row .st-mono { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
 
+/* ─── AssetPicker (feature-element-editing-robustness Stage F1) ───────────── */
+.st-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); padding: 0 12px; transition: background var(--dur-soft) var(--ease-out), border-color var(--dur-soft) var(--ease-out); }
+.st-btn:hover { background: var(--bg-3); border-color: var(--border-strong, var(--border-default)); }
+.st-btn:disabled { opacity: 0.55; cursor: default; }
+.st-asset-picker { width: 620px; }
+.st-ap-toolbar { display: flex; align-items: center; gap: var(--space-3); }
+.st-ap-err { color: var(--danger, #e5484d); font-family: var(--font-mono); font-size: var(--type-xs); }
+.st-ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); max-height: 52vh; overflow-y: auto; padding: 2px; }
+.st-ap-empty { grid-column: 1 / -1; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--type-xs); padding: var(--space-6) 0; text-align: center; }
+.st-ap-cell { appearance: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-2); text-align: left; transition: border-color var(--dur-soft) var(--ease-out), background var(--dur-soft) var(--ease-out); }
+.st-ap-cell:hover { border-color: var(--accent, var(--border-strong, var(--border-default))); background: var(--bg-3); }
+.st-ap-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs); background: var(--bg-4, var(--bg-3)); display: block; }
+.st-ap-name { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.st-cp-replace { width: 100%; justify-content: center; }
+/* Media "Replace…" — a full-width button, NOT inside the 3-col .st-cp-row grid
+   (which would drop it into the 10px provenance-dot column and clip it). */
+.st-cp-mediabtn { padding: var(--space-1) 0 var(--space-2); }
+
 /* ─── Inspector panel fields / layers / css (Plan C P11–P13) ───────────────
  * Lifted from Studio.css; complements the already-present `.st-insp-row`,
  * `.st-insp-label`, `.st-rp-*`. */
@@ -716,6 +741,15 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-boxv--mb, .st-cp-boxv--pb { bottom: 1px; left: 50%; transform: translateX(-50%); }
 .st-cp-boxv--ml, .st-cp-boxv--pl { left: 0; top: 50%; transform: translateY(-50%); }
 .st-cp-boxv--mr, .st-cp-boxv--pr { right: 0; top: 50%; transform: translateY(-50%); }
+/* feature-element-editing-robustness Stage B — Position inset widget. One ring
+   (no nested padding box): the 4 inset inputs sit on the outer box edges around
+   a centered core showing the current `position` keyword (Figma constraints box). */
+.st-cp-boxv--it { top: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--ib { bottom: 1px; left: 50%; transform: translateX(-50%); }
+.st-cp-boxv--il { left: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxv--ir { right: 0; top: 50%; transform: translateY(-50%); }
+.st-cp-boxtag--i { color: var(--accent); }
+.st-cp-boxcore--pos { text-transform: none; letter-spacing: 0; }
 .st-cp-boxhint { display: flex; flex-wrap: wrap; gap: var(--space-1); }
 .st-cp-boxhint + .st-cp-row { margin-top: var(--space-1); }
 .st-cp-chip { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); background: var(--bg-2); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 1px 6px; }
@@ -762,6 +796,20 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-add:hover { border-color: var(--accent); color: var(--fg-0); }
 .st-cp-note { font-size: 10px; color: var(--fg-2); font-style: italic; }
 
+/* Stage M — Fixed / Hug / Fill sizing-mode segmented control (per axis). */
+.st-cp-modes { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-1); }
+.st-cp-modeseg { display: flex; align-items: stretch; gap: var(--space-1); }
+.st-cp-modeax { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
+.st-cp-modebtn { flex: 1; appearance: none; cursor: pointer; border: 1px solid var(--border-default); background: var(--bg-3); color: var(--fg-1); font-family: var(--font-mono); font-size: 10px; min-height: 22px; border-radius: var(--radius-xs); padding: 0 var(--space-1); }
+.st-cp-modebtn:hover:not(.is-active):not(:disabled) { background: var(--bg-4); color: var(--fg-0); }
+.st-cp-modebtn.is-active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
+.st-cp-modebtn:disabled { opacity: 0.5; cursor: default; }
+/* Stage M — sub-header for the flex-child row group + the make-flex CTA. */
+.st-cp-subhd { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-2); }
+.st-cp-makeflex { align-self: flex-start; appearance: none; cursor: pointer; border: 1px dashed var(--border-default); background: transparent; color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); border-radius: var(--radius-xs); padding: 4px var(--space-2); }
+.st-cp-makeflex:hover:not(:disabled) { border-color: var(--accent); color: var(--fg-0); }
+.st-cp-makeflex:disabled { opacity: 0.5; cursor: default; }
+
 /* provenance legend */
 .st-cp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
 .st-cp-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }
@@ -1211,6 +1259,113 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .gp-draft .gp-sep { color: var(--fg-3); }
 .gp-x { appearance: none; border: none; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: var(--radius-xs); }
 .gp-x:hover { color: var(--fg-1); background: var(--bg-3); }
+
+/* ── Timeline (DDR-148) — BOTTOM-docked transport + per-sequence track ── */
+.tl-panel { position: relative; display: flex; flex-direction: column; min-height: 0; width: 100%; background: var(--bg-1); border-top: 1px solid var(--border-default); user-select: none; -webkit-user-select: none; }
+/* DDR-150 P4 — drop-media-to-insert affordance */
+.tl-panel.is-drop { outline: 2px dashed var(--accent); outline-offset: -3px; background: color-mix(in oklch, var(--accent) 8%, var(--bg-1)); }
+/* drag the top edge to resize the panel taller/shorter */
+.tl-resize-handle { position: absolute; top: -3px; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 6; touch-action: none; }
+.tl-resize-handle::after { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 44px; height: 3px; border-radius: 2px; background: var(--fg-2); opacity: 0; transition: opacity 0.12s; }
+.tl-resize-handle:hover::after { opacity: 0.55; }
+.tl-volume { width: 66px; height: 4px; margin: 0 2px 0 4px; accent-color: var(--accent); cursor: pointer; }
+.tl-head { display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3) 0 var(--space-3); border-bottom: 1px solid var(--border-subtle); flex: none; }
+.tl-title { font-family: var(--font-display); font-weight: 600; font-size: var(--type-md); color: var(--fg-0); }
+.tl-spacer { flex: 1; }
+.tl-meta { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); white-space: nowrap; }
+.tl-x { appearance: none; border: none; background: transparent; color: var(--fg-2); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-xs); }
+.tl-x:hover { color: var(--fg-1); background: var(--bg-3); }
+.tl-empty { padding: var(--space-4); color: var(--fg-2); font-size: var(--type-sm); line-height: 1.5; }
+.tl-empty code, .tl-empty b { font-family: var(--font-mono); font-size: var(--type-xs); }
+.tl-empty code { background: var(--bg-2); padding: 1px 4px; border-radius: var(--radius-xs); color: var(--fg-1); }
+.tl-btn { appearance: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-2); color: var(--fg-1); cursor: pointer; transition: background var(--dur-soft) var(--ease-out), color var(--dur-soft) var(--ease-out); }
+.tl-btn:hover { background: var(--bg-3); color: var(--fg-0); }
+.tl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.tl-btn.is-on { background: var(--accent-tint); border-color: var(--accent-muted); color: var(--accent); }
+.tl-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.tl-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
+.tl-readout { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); display: inline-flex; align-items: baseline; gap: 4px; margin-left: var(--space-2); }
+.tl-readout b { color: var(--fg-0); font-weight: 600; }
+.tl-readout .tl-sep { color: var(--fg-3); }
+.tl-readout .tl-time { color: var(--accent); margin-left: var(--space-2); }
+/* the scrolling track area */
+.tl-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--space-2) var(--space-3) var(--space-3); }
+.tl-tracks { position: relative; min-width: 100%; display: flex; flex-direction: column; gap: 6px; padding-top: 20px; cursor: ew-resize; }
+.tl-ruler { position: absolute; top: 0; left: 96px; right: 0; height: 16px; }
+.tl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); }
+.tl-tick-label { position: absolute; top: -1px; left: 3px; font-family: var(--font-mono); font-size: 9px; color: var(--fg-3); white-space: nowrap; }
+.tl-row { display: flex; align-items: center; gap: var(--space-2); height: 30px; }
+.tl-row-label { flex: none; width: 88px; display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); overflow: hidden; white-space: nowrap; text-align: right; }
+.tl-row-label-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+/* DDR-150 dogfood #6 — per-row media-kind identity (video / image / audio / JSX). */
+.tl-kind { flex: none; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 3px; font-size: 8px; line-height: 1; color: var(--fg-2); background: var(--bg-3); }
+.tl-kind[data-kind="video"] { color: #7dd3fc; background: color-mix(in oklch, #0ea5e9 22%, var(--bg-3)); }
+.tl-kind[data-kind="image"] { color: #86efac; background: color-mix(in oklch, #22c55e 20%, var(--bg-3)); }
+.tl-kind[data-kind="audio"] { color: #fcd34d; background: color-mix(in oklch, #f59e0b 20%, var(--bg-3)); }
+.tl-kind[data-kind="jsx"] { color: var(--fg-2); font-style: italic; }
+/* DDR-150 dogfood — the right-click clip menu reuses the canvas's shared
+   .dc-context-menu component. Its injected CSS reads --maude-chrome-* tokens
+   that the CANVAS defines (dark floating chrome) but the SHELL never set — so it
+   fell back to white and looked nothing like the canvas menu. Define the same
+   dark chrome tokens ON the menu so shell + canvas menus match. */
+.dc-context-menu {
+  --maude-chrome-bg-0: oklch(0.165 0.012 255);
+  --maude-chrome-fg-0: oklch(0.955 0.005 250);
+  --maude-chrome-border: oklch(0.290 0.012 255);
+  --maude-chrome-shadow: rgba(0, 0, 0, 0.46);
+  --maude-chrome-font-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+}
+/* Clip layer decomposition — expand toggle + indented sub-rows. */
+.tl-expand { flex: none; width: 16px; height: 16px; display: grid; place-items: center; padding: 0; border: none; background: transparent; color: var(--fg-1); font-size: 10px; line-height: 1; cursor: pointer; border-radius: 3px; }
+.tl-expand:hover:not(.tl-expand--spacer) { color: var(--fg-0); background: var(--accent); }
+.tl-expand--spacer { width: 16px; cursor: default; pointer-events: none; }
+.tl-row--layer .tl-row-label { color: var(--fg-2); }
+.tl-row--layer { opacity: 0.92; }
+.tl-layer-indent { flex: none; width: 10px; }
+.tl-layer-block { top: 5px; bottom: 5px; opacity: 0.7; border-style: dashed; }
+/* Hidden clip — dimmed + hatched so it reads as "won't render" but keeps its slot. */
+.tl-seq-block.is-hidden { opacity: 0.4; background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(0,0,0,0.25) 5px, rgba(0,0,0,0.25) 10px); }
+.tl-seq-block.is-hidden .tl-seq-name { text-decoration: line-through; }
+/* Kind tint on the block itself — a video clip reads different from JSX motion. */
+.tl-seq-block[data-kind="video"] { border-color: color-mix(in oklch, #0ea5e9 55%, var(--accent-muted)); background: color-mix(in oklch, #0ea5e9 16%, var(--bg-2)); }
+.tl-seq-block[data-kind="image"] { border-color: color-mix(in oklch, #22c55e 45%, var(--accent-muted)); background: color-mix(in oklch, #22c55e 13%, var(--bg-2)); }
+/* DDR-150 P5 — z-order raise/lower. Stacked ▲/▼; later sibling paints on top. */
+.tl-seq-reorder { display: inline-flex; flex-direction: column; flex: none; opacity: 0; transition: opacity var(--dur-1, 120ms) ease; }
+.tl-row:hover .tl-seq-reorder { opacity: 0.6; }
+.tl-seq-reorder:hover, .tl-seq-reorder:focus-within { opacity: 1; }
+.tl-reorder-btn { width: 13px; height: 8px; display: grid; place-items: center; padding: 0; border: none; border-radius: 2px; background: transparent; color: var(--fg-2); font-size: 7px; line-height: 1; cursor: pointer; }
+.tl-reorder-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-fg, #fff); }
+.tl-reorder-btn:disabled { opacity: 0.25; cursor: default; }
+@media (prefers-reduced-motion: reduce) { .tl-seq-reorder { transition: none; } }
+.tl-row-track { position: relative; flex: 1; height: 100%; background: var(--bg-2); border-radius: var(--radius-sm); }
+.tl-seq-block { position: absolute; top: 3px; bottom: 3px; appearance: none; border: 1px solid var(--accent-muted); border-radius: var(--radius-xs); background: color-mix(in oklch, var(--accent) 20%, var(--bg-2)); color: var(--fg-0); cursor: pointer; overflow: hidden; padding: 0; min-width: 6px; transition: background var(--dur-soft) var(--ease-out); }
+.tl-seq-block:hover { background: color-mix(in oklch, var(--accent) 32%, var(--bg-2)); }
+.tl-seq-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.tl-seq-name { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--fg-0); pointer-events: none; white-space: nowrap; }
+.tl-seq-block.is-resizing { background: color-mix(in oklch, var(--accent) 42%, var(--bg-2)); border-color: var(--accent); }
+/* drag-to-retime handle at the block's right edge */
+.tl-seq-resize { position: absolute; top: 3px; bottom: 3px; width: 10px; z-index: 4; cursor: ew-resize; border-radius: 2px; touch-action: none; }
+.tl-seq-resize::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 2px; border-radius: 1px; background: var(--fg-2); opacity: 0; }
+.tl-seq-resize:hover::after { opacity: 0.9; background: var(--accent); }
+/* DDR-150 P3 — per-clip remove (×). Subtle until the row is hovered. */
+.tl-seq-remove { position: absolute; top: 3px; width: 15px; height: 15px; z-index: 5; display: grid; place-items: center; padding: 0; border: none; border-radius: var(--radius-xs); background: color-mix(in oklch, var(--bg-0) 70%, transparent); color: var(--fg-1); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--dur-1, 120ms) ease; }
+.tl-row:hover .tl-seq-remove { opacity: 0.7; }
+.tl-seq-remove:hover { opacity: 1; background: var(--status-err, #dc2626); color: #fff; }
+.tl-seq-block.is-moving { cursor: grabbing; box-shadow: 0 0 0 1px var(--accent); }
+/* DDR-150 P3 — per-clip replace-media (⇄). */
+.tl-seq-replace { position: absolute; top: 3px; width: 15px; height: 15px; z-index: 5; display: grid; place-items: center; padding: 0; border: none; border-radius: var(--radius-xs); background: color-mix(in oklch, var(--bg-0) 70%, transparent); color: var(--fg-1); font-size: 11px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--dur-1, 120ms) ease; }
+.tl-row:hover .tl-seq-replace { opacity: 0.7; }
+.tl-seq-replace:hover { opacity: 1; background: var(--accent); color: var(--accent-fg, #fff); }
+/* DDR-150 P5 Task 14 — keyframe markers are click-to-seek */
+.tl-kf { position: absolute; top: 3px; bottom: 3px; min-width: 3px; border-radius: 2px; background: var(--accent); opacity: 0.85; pointer-events: auto; cursor: pointer; }
+.tl-kf:hover { opacity: 1; box-shadow: 0 0 0 1px var(--fg-0); }
+/* audio / music bed row — a distinct teal so it reads as a separate layer */
+.tl-audio-block { position: absolute; top: 3px; bottom: 3px; border: 1px solid color-mix(in oklch, var(--status-ok, #16a34a) 60%, transparent); border-radius: var(--radius-xs); background: color-mix(in oklch, var(--status-ok, #16a34a) 18%, var(--bg-2)); overflow: hidden; min-width: 6px; }
+.tl-audio-block .tl-seq-name { color: var(--fg-0); opacity: 0.9; }
+.tl-wave { position: absolute; inset: 3px 6px; width: calc(100% - 12px); height: calc(100% - 6px); fill: none; stroke: color-mix(in oklch, var(--status-ok, #16a34a) 80%, var(--fg-2)); stroke-width: 1; opacity: 0.55; pointer-events: none; }
+.tl-playhead { position: absolute; top: 16px; bottom: 0; width: 2px; background: var(--fg-0); box-shadow: 0 0 0 1px var(--bg-1); pointer-events: none; z-index: 3; }
+.tl-playhead::before { content: ""; position: absolute; top: -4px; left: -4px; border: 5px solid transparent; border-top-color: var(--fg-0); }
+@media (prefers-reduced-motion: reduce) { .tl-btn, .tl-seq-block { transition: none; } }
 /* tabbar/tab — DS treatment folded in */
 .gp-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
 .gp-tab { appearance: none; border: 0; background: transparent; font-size: var(--type-sm); color: var(--fg-2); font-family: var(--font-body); padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 2px solid transparent; }