@1agh/maude 0.58.3 → 0.59.0

package/apps/studio/client/panels/TimelinePanel.jsx

@@ -23,6 +23,7 @@ import { ImagePlus, MessageSquarePlus, Plus, Scissors, Sparkles, Type } from 'lu
 
 import ClipInspector from './ClipInspector.jsx';
 import { computeSnapTargets, snapFrame } from './timeline-snap.js';
+import { activeComp } from './timeline-comp-target.js';
 import { getFilmstrip, getPeaks, peaksToPath, stripBucket } from './timeline-media-cache.js';
 import {
   clampPxPerFrame,
@@ -143,6 +144,10 @@ const SCROLL_PAD_X = 24;
 
 export default function TimelinePanel({
   comps = [],
+  // issue #75 — the comp the shell's transport targets. The panel reads its
+  // meta (fps / duration) off the SAME comp, so the readout can never describe
+  // a different artboard than the one Play actually moves.
+  compId = null,
   sequences = [],
   audio = [],
   transitions = [],
@@ -204,7 +209,14 @@ export default function TimelinePanel({
   // storyline layout moves layer detail into the clip inspector).
   const [collapsed, setCollapsed] = useState(() => new Set());
   const [dropActive, setDropActive] = useState(false);
-  const comp = comps[0] ?? null;
+  const comp = activeComp(comps, compId);
+  // issue #75 — which artboard the rows + transport belong to. `null` means the
+  // shell genuinely could NOT tell (a comp mounted outside any artboard, a
+  // resolver fall-through). That case must render as an explicit unknown, not
+  // as no chip at all: "no chip" already means "single comp, nothing to
+  // disambiguate", and reusing it for "I don't know" would make the ambiguous
+  // case look like the safe one (security-review 2026-08-12).
+  const scopedArtboard = comp?.artboardLabel || comp?.artboardId || null;
   const totalFrames = Math.max(1, total || comp?.durationInFrames || 1);
   const fps = comp?.fps ?? 30;
   const clamped = clamp(Math.round(frame), 0, totalFrames - 1);
@@ -1423,6 +1435,22 @@ export default function TimelinePanel({
                 onChange={(e) => onVolume?.(Number(e.target.value) / 100)}
               />
             ) : null}
+            {/* issue #75 — on a multi-comp canvas the rows + transport belong to
+                ONE artboard, and nothing said which. Show it (label, id as the
+                fallback) so the panel and the canvas agree out loud. */}
+            {comps.length > 1 ? (
+              <span
+                className={`tl-artboard${scopedArtboard ? '' : ' is-unknown'}`}
+                data-testid="timeline-artboard"
+                title={
+                  scopedArtboard
+                    ? `Timeline is scoped to artboard "${scopedArtboard}" — pan to another artboard to switch`
+                    : "This canvas has several video comps and the Timeline couldn't tell which artboard this one sits in — the transport may be moving a comp you're not looking at"
+                }
+              >
+                {scopedArtboard ?? 'artboard ?'}
+              </span>
+            ) : null}
             <span className="tl-readout" data-testid="timeline-readout">
               <b>{clamped}</b>
               <span className="tl-sep">/</span>

package/apps/studio/client/panels/timeline-comp-target.js

@@ -0,0 +1,101 @@
+/**
+ * @file       timeline-comp-target.js — which announced comp the Timeline drives.
+ * @scope      apps/studio/client/panels/
+ * @purpose    On a multi-comp canvas the Timeline shows ONE comp's rows (the
+ *             parser scopes to the viewport-active artboard) but the transport
+ *             (play / pause / scrub / mute / loop) is a targeted postMessage —
+ *             it needs the Player's own comp id.
+ *
+ *             This used to be resolved by matching the parsed row total against
+ *             each comp's `durationInFrames`. Two comps of the SAME length (the
+ *             common case — one composition duplicated across artboards) made
+ *             `find` return the FIRST one, so the panel drew artboard #2's rows
+ *             while Play moved artboard #1 (issue #75). Duration is not an
+ *             identity, so the primary key is now the artboard the comp is
+ *             mounted in (`artboardId`, resolved by DOM containment in
+ *             video-comp.tsx). Duration stays as a fallback, and is only trusted
+ *             when it identifies exactly ONE comp.
+ */
+
+// Bidi overrides + isolates, zero-width / format characters, and C0/C1
+// controls (newlines and tabs included). An artboard label is author-written
+// text from an untrusted origin (DDR-054) that the shell RENDERS as chrome, so
+// a trailing RLO or a label built entirely of zero-width joiners could make the
+// Timeline's chip read as an artboard other than the one the transport is
+// scoped to — defeating the exact signal the chip exists to give. Same class
+// `sanitizeDisplayText` (file-preview.jsx) and `figma/sanitize.ts` already
+// neutralize; widened here because a label, unlike a filename, has no shape
+// constraints at all. Written as escapes on purpose — a literal invisible
+// character in this class would be unreviewable.
+const DISPLAY_UNSAFE =
+  /[\u202a-\u202e\u2066-\u2069\u200b-\u200f\u2060\u00ad\ufeff\u0000-\u001f\u007f-\u009f]/g;
+
+/**
+ * Neutralize + cap one canvas-origin display string. Returns null for a value
+ * that is absent, or that is empty ONCE the unsafe characters are gone — an
+ * all-invisible label must read as "no label", not as a blank chip that looks
+ * like the panel failed to render.
+ *
+ * @param {unknown} s
+ * @param {number} [max]
+ * @returns {string|null}
+ */
+export function sanitizeArtboardText(s, max = 120) {
+  if (typeof s !== 'string') return null;
+  const clean = s.replace(DISPLAY_UNSAFE, '').trim().slice(0, max).trim();
+  return clean || null;
+}
+
+/**
+ * @param {Array<{id: string, artboardId?: string|null, durationInFrames?: number}>} comps
+ * @param {{ artboardId?: string|string[]|null, total?: number }} [opts] `artboardId`
+ *   may be a single id or a confidence-ordered list of candidates.
+ * @returns {string|null} the comp id the transport must target
+ */
+export function resolveCompTarget(comps, opts = {}) {
+  if (!Array.isArray(comps) || comps.length === 0) return null;
+  const { artboardId = null, total = 0 } = opts;
+  // Candidates in confidence order. The caller passes the artboard the ROW
+  // PARSER scoped to (derived lexically from the .tsx) followed by the viewport
+  // signal canvas-lib reports on pan (derived structurally). They usually agree;
+  // when the lexical one names an artboard no comp is actually mounted in — a
+  // `<DCArtboard id=…>` inside a comment or a string literal is enough — the
+  // pan signal is the better answer, and trying both is what keeps a source
+  // file's stale opinion from silently out-ranking the live DOM.
+  const candidates = (Array.isArray(artboardId) ? artboardId : [artboardId]).filter(Boolean);
+  // Pass 1 — the artboard each comp ANNOUNCED (DOM containment). Runs across
+  // every candidate before pass 2 starts, deliberately.
+  for (const cand of candidates) {
+    const hit = comps.find((c) => c.artboardId === cand);
+    if (hit) return hit.id;
+  }
+  // Pass 2 — an author-set comp id that equals an artboard id (the documented
+  // "match the enclosing DCArtboard id" convention). Strictly WEAKER than pass
+  // 1: comp ids and artboard ids are separate author-chosen namespaces, so a
+  // `<VideoComp id="outro">` mounted inside `intro` must never be able to claim
+  // outro's transport while a comp genuinely mounted in outro exists.
+  for (const cand of candidates) {
+    const hit = comps.find((c) => c.id === cand);
+    if (hit) return hit.id;
+  }
+  if (total > 0) {
+    const byTotal = comps.filter((c) => c.durationInFrames === total);
+    // Exactly one — unambiguous. Several — duration tells us nothing, so fall
+    // through rather than silently picking the first (that WAS the bug).
+    if (byTotal.length === 1) return byTotal[0].id;
+  }
+  return comps[0].id;
+}
+
+/**
+ * The comp record the panel should read meta (fps, duration) off — same target
+ * as the transport, so the readout can never describe a different comp than the
+ * one Play moves.
+ *
+ * @param {Array<{id: string}>} comps
+ * @param {string|null} compId
+ */
+export function activeComp(comps, compId) {
+  if (!Array.isArray(comps) || comps.length === 0) return null;
+  return comps.find((c) => c.id === compId) ?? comps[0];
+}

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

@@ -209,6 +209,10 @@
 .st-live-dot.is-connected { background: var(--presence-online); }
 .st-sb-sync-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
 .st-sb-sync-dot.is-online { background: var(--presence-online); }
+/* feature-sync-progress-modal — the chip doubles as the Sync-panel toggle. */
+.st-sb-sync--btn { appearance: none; border: 0; padding: 0; border-radius: 0; background: transparent; font: inherit; cursor: pointer; }
+.st-sb-sync--btn:hover .val, .st-sb-sync--btn.is-open .val { color: var(--accent); }
+.st-sb-sync--btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 
 /* Phase 28 — clickable "changes" slot (opens the Changes panel). Button reset; the
    .st-sb-slot + .st-sb-slot rule still supplies the divider + left padding. */
@@ -1984,6 +1988,10 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .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); }
+/* issue #75 — which artboard's comp this timeline is scoped to (multi-comp only). */
+.tl-artboard { margin-left: var(--space-2); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--bg-2); color: var(--fg-1); font-size: var(--type-xs); line-height: 1.4; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The shell could not resolve the artboard — read as a warning, not as a name. */
+.tl-artboard.is-unknown { color: var(--fg-3); border-style: dashed; font-style: italic; }
 .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); }
@@ -2662,6 +2670,28 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .rb-trigger-ver--ro .rb-trigger-ver-name { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--type-xs); }
 /* GitPanel read-only footer hint (web studio — actions live in the terminal). */
 .gp-ro-hint { padding: var(--space-3) var(--space-4); color: var(--fg-2); }
+
+/* feature-sync-progress-modal — the Sync panel (per-file sync rows). Reuses
+ * the gp- head chrome; sp- covers only the sync-specific rows/sections. */
+.sp-panel { display: flex; flex-direction: column; }
+.sp-body { flex: 1; overflow-y: auto; padding-bottom: var(--space-4); }
+.sp-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-2); font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-base); }
+.sp-note-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
+.sp-note-dot.is-synced { background: var(--presence-online); }
+.sp-note-dot.is-refused, .sp-note-dot.is-stalled, .sp-note-dot.is-offline { background: var(--status-error); }
+.sp-sect-attention { color: var(--status-error); }
+.sp-list { list-style: none; margin: 0; padding: 0; }
+.sp-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); min-width: 0; }
+.sp-row-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--status-warn); flex: none; }
+.sp-row.is-connected .sp-row-dot { background: var(--presence-online); }
+.sp-row.is-auth-rejected .sp-row-dot { background: var(--status-error); }
+.sp-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--type-xs); }
+.sp-row-state { flex: none; font-size: var(--type-xs); color: var(--fg-2); }
+.sp-row.is-auth-rejected .sp-row-state { color: var(--status-error); }
+.sp-truncated { padding: var(--space-1) var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
+.sp-assets-line { padding: var(--space-1) var(--space-4); font-size: var(--type-sm); color: var(--fg-1); }
+.sp-assets-active { padding: 0 var(--space-4); font-family: var(--font-mono); font-size: var(--type-xs); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sp-assets-retry { padding: var(--space-1) var(--space-4); font-size: var(--type-xs); color: var(--fg-2); }
 /* The popup — opens UPWARD from the dock (gi-menu anatomy). SOLID opaque menu
  * surface + border here (NOT the canvas `.panel`, which isn't in the client bundle
  * — phase-28 lesson; the tree must never bleed through). */

package/apps/studio/client/styles/4-components.css

@@ -1402,16 +1402,16 @@
 /* A degraded export is `done` but not clean — it must never read as success.
    Overrides --done, so declaration order matters. */
 .st-export-pill--degraded {
-  background: color-mix(in oklab, var(--u-status-warning, var(--u-accent)) 18%, transparent);
-  color: var(--u-status-warning, var(--u-accent));
+  background: color-mix(in oklab, var(--u-status-warn, var(--u-accent)) 18%, transparent);
+  color: var(--u-status-warn, var(--u-accent));
 }
 .st-export-degraded {
   font-size: 12px;
   line-height: 1.45;
-  color: var(--u-status-warning, var(--u-accent));
+  color: var(--u-status-warn, var(--u-accent));
   padding: 6px 8px;
   border-radius: var(--radius-sm, 6px);
-  background: color-mix(in oklab, var(--u-status-warning, var(--u-accent)) 10%, transparent);
+  background: color-mix(in oklab, var(--u-status-warn, var(--u-accent)) 10%, transparent);
 }
 .st-export-degraded__fix {
   margin-top: 4px;