@1agh/maude 0.39.0 → 0.40.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

@@ -1211,6 +1211,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; }

package/apps/studio/config.schema.json

@@ -140,6 +140,20 @@
       "description": "How hard DS reuse is enforced during canvas generation/edit. 'advisory' (default) = reuse findings (invented brand mark/icons, reinvented components, parallel product shell) surface as warnings. 'strict' = when the DS ships a canonical specimen (logo, iconography, component, platform showcase), reinventing it is a blocker the auto-fix loop must clear. Orthogonal to opt_out_scope on the SAME axis of 'how much the DS binds': a canvas's explicit opt_out_scope=full always wins over strict (explicit free-use beats project policy). A11y is independent of this knob. Per DDR-141.",
       "default": "advisory"
     },
+    "moodboard": {
+      "type": "object",
+      "description": "Knobs for the /design:setup-ds Stage-3 direction gate (the design-language moodboard). Per DDR-147.",
+      "properties": {
+        "variants": {
+          "type": "integer",
+          "minimum": 1,
+          "maximum": 3,
+          "default": 3,
+          "description": "How many direction tiles the interactive direction gate composes by default. The SINGLE authoritative home of this default — docs reference this knob, never a literal. Effective count still degrades to the number of pairwise-distinct research seeds (floor 1), and --quick / autonomous / re-bootstrap force 1. Default tiles are main-agent seed-only compositions (no web, no fan-out); the blind-sub-agent + self-harvest path is an explicit escalation. Per DDR-147."
+        }
+      },
+      "additionalProperties": false
+    },
     "designSystems": {
       "type": "array",
       "description": "Design systems available in this project. Single-DS projects have one entry; multi-DS projects (marketing vs. admin vs. mobile) list each here. Each canvas's .meta.json declares which DS it uses via the 'designSystem' field. The System view's DS picker iterates this array.",

package/apps/studio/context-menu.tsx

@@ -297,7 +297,7 @@ export function useContextMenuOptional(): ContextMenuValue | null {
 // ─────────────────────────────────────────────────────────────────────────────
 // View
 
-function ContextMenuView({
+export function ContextMenuView({
   target,
   sections,
   onClose,

package/apps/studio/context.ts

@@ -206,8 +206,47 @@ export function normalizeDesignSystems<T extends DevServerConfig>(cfg: T): T {
   return { ...cfg, designSystems };
 }
 
+/**
+ * True when a config-declared relative path stays inside the design root once
+ * joined to it. Rejects absolute paths and `..` escapes. Security clamp from
+ * the DDR-149 fan-out review: `canvasGroups[].path` / `tokensCssRel` feed
+ * directory walks (`/_index-data`) and a served stylesheet URL — a poisoned
+ * (e.g. peer-committed) config must not walk or serve outside the design root,
+ * and with hot-reload the escape would apply live, no restart gate.
+ */
+export function isContainedRel(rel: unknown): boolean {
+  if (typeof rel !== 'string' || !rel) return false;
+  const p = rel.replace(/\\/g, '/');
+  if (p.startsWith('/') || /^[A-Za-z]:/.test(p)) return false;
+  const norm = path.posix.normalize(p);
+  return norm !== '..' && !norm.startsWith('../');
+}
+
+function clampToDesignRoot(cfg: DevServerConfig): DevServerConfig {
+  const groups = cfg.canvasGroups ?? [];
+  const canvasGroups = groups.filter((g) => isContainedRel(g?.path));
+  for (const g of groups) {
+    if (!canvasGroups.includes(g)) {
+      console.warn(`  warn: canvasGroups path escapes the design root — ignored: ${g?.path}`);
+    }
+  }
+  let tokensCssRel = cfg.tokensCssRel;
+  if (!isContainedRel(tokensCssRel)) {
+    console.warn(`  warn: tokensCssRel escapes the design root — using default: ${tokensCssRel}`);
+    tokensCssRel = DEFAULT_CONFIG.tokensCssRel;
+  }
+  const designSystems = cfg.designSystems?.filter((d) => {
+    const ok =
+      isContainedRel(d?.path) && (d?.tokensCssRel == null || isContainedRel(d.tokensCssRel));
+    if (!ok)
+      console.warn(`  warn: designSystems entry escapes the design root — ignored: ${d?.name}`);
+    return ok;
+  });
+  return { ...cfg, canvasGroups, tokensCssRel, designSystems };
+}
+
 function normalizeConfig(cfg: DevServerConfig): DevServerConfig {
-  return normalizeDesignSystems(cfg);
+  return normalizeDesignSystems(clampToDesignRoot(cfg));
 }
 
 export function createContext(): Context {
@@ -245,3 +284,76 @@ export function createContext(): Context {
     bus: createBus(),
   };
 }
+
+/**
+ * Hot-reload `.design/config.json` into an existing Context. `/design:setup-ds`
+ * (and any hand edit) rewrites the config mid-session; without this the server
+ * keeps serving the boot snapshot — `/_index-data` never lists a newly added
+ * canvas group, so scaffolded DS files stay invisible even on a manual tree
+ * reload. RCA: .ai/logs/rca/issue-ds-scaffold-files-not-in-filetree-stale-config.md
+ *
+ * CONTRACT: `ctx.cfg` and `ctx.paths` are mutated IN PLACE — module factories
+ * capture the object references (`const { cfg, paths } = ctx`) and must see the
+ * fresh values through them. Never copy a cfg VALUE at construction time in a
+ * long-lived module (that re-introduces the stale-config bug); read from the
+ * shared object at use time instead.
+ *
+ * Deliberately NOT hot-reloadable: `designRoot` — the fs-watcher and every
+ * runtime path hang off it; changing it requires a restart (warn + keep old).
+ * A config.json that is missing or invalid mid-edit keeps the current cfg
+ * (a running server must not downgrade to defaults on a half-written save).
+ *
+ * Returns true when the config actually changed.
+ */
+export function reloadConfig(ctx: Context): boolean {
+  const next = loadConfig(ctx.paths.repoRoot);
+  // Boot from defaults + config.json created later IS a legit reload; but a
+  // file that vanished or fails to parse mid-edit must not clobber a working
+  // cfg. loadConfig encodes both cases in _source.
+  if (next._source !== '.design/config.json') {
+    if (ctx.cfg._source === '.design/config.json') {
+      console.warn(
+        `  warn: config.json ${next._source === 'defaults' ? 'missing' : 'invalid'} on reload — keeping the running config.`
+      );
+    }
+    return false;
+  }
+
+  const nextDesignRel = next.designRoot.replace(/^\/+|\/+$/g, '');
+  if (nextDesignRel !== ctx.paths.designRel) {
+    console.warn(
+      `  warn: designRoot changed (${ctx.paths.designRel} → ${nextDesignRel}) — not hot-reloadable, restart the server to apply.`
+    );
+    next.designRoot = ctx.cfg.designRoot;
+  }
+
+  // linkedHub is boot-pinned like designRoot: the sync runtime captures it once
+  // at startup (sync/index.ts), so a live swap would let use-time readers
+  // (syncTsx gating) drift out of step with the hub the socket is actually
+  // attached to — and a poisoned config must never re-point sync without a
+  // restart (DDR-149 fan-out review).
+  if (JSON.stringify(next.linkedHub) !== JSON.stringify(ctx.cfg.linkedHub)) {
+    console.warn('  warn: linkedHub changed — not hot-reloadable, restart the server to apply.');
+    if (ctx.cfg.linkedHub === undefined) delete next.linkedHub;
+    else next.linkedHub = ctx.cfg.linkedHub;
+  }
+
+  if (JSON.stringify(ctx.cfg) === JSON.stringify(next)) return false;
+
+  // In-place swap so every captured `ctx.cfg` reference sees the new values.
+  // INVARIANT: no `await` between the delete loop and the assign — the swap is
+  // atomic only because it is synchronous; an interleaved request must never
+  // observe a partially-emptied cfg.
+  const cfg = ctx.cfg as unknown as Record<string, unknown>;
+  for (const key of Object.keys(cfg)) delete cfg[key];
+  Object.assign(cfg, next);
+
+  ctx.projectLabel = ctx.cfg.projectLabel || `${ctx.cfg.name} Design`;
+  ctx.paths.tokensUrlRel = path.posix.join(
+    ctx.paths.designRel,
+    ctx.cfg.tokensCssRel.replace(/^\/+/, '')
+  );
+  ctx.paths.systemDirRel =
+    ctx.cfg.canvasGroups.find((g) => /system/i.test(g.path))?.path ?? 'system';
+  return true;
+}