@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/video-comp.tsx

@@ -0,0 +1,444 @@
+/**
+ * @file       video-comp.tsx — DDR-148 video-comp canvas kind.
+ * @scope      apps/studio/video-comp.tsx (re-exported from canvas-lib.tsx as
+ *             part of the `@maude/canvas-lib` surface).
+ * @purpose    Mount a Remotion composition inside `@remotion/player`'s `<Player>`
+ *             for free scrub/preview, and expose the ONE deterministic seek
+ *             bridge (`window.__maude_seek__`) that the capture spine
+ *             (`bin/_video-playwright.mjs`) and the Timeline panel drive.
+ *
+ *             A video-comp is deterministic BY CONSTRUCTION — every animated
+ *             value is a pure function of `useCurrentFrame()`, so seeking the
+ *             Player's `frame` renders one exact frame with no free-running
+ *             clock. The capture shim steps `__maude_seek__(0..N)` and
+ *             screenshots each frame; two runs to frame N are pixel-identical.
+ *
+ *             Runtime wiring: `remotion` + `@remotion/player` are externalised
+ *             through the canvas importmap (RUNTIME_PACKAGES / DDR-148), so the
+ *             Player's provider stack and the composition's `useCurrentFrame()`
+ *             bind to the SAME `remotion` module instance (no dual-package
+ *             frozen-at-frame-0 hazard).
+ */
+
+import { Player, type PlayerRef } from '@remotion/player';
+import { type ComponentType, useEffect, useMemo, useRef, useState } from 'react';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Comp meta contract + the module-level seek registry
+
+/** The temporal contract a video-comp artboard declares. */
+export interface VideoCompMeta {
+  /** Frames per second (Remotion timebase). */
+  fps: number;
+  /** Total composition length, in frames. */
+  durationInFrames: number;
+  /** Composition pixel width. */
+  width: number;
+  /** Composition pixel height. */
+  height: number;
+}
+
+/** A live registration — the Player handle + its meta, keyed by artboard id. */
+interface CompEntry extends VideoCompMeta {
+  id: string;
+  ref: React.RefObject<PlayerRef | null>;
+  /** The Remotion composition component + its props — carried so the export
+   *  capture's renderMediaOnWeb path (DDR-148 addendum, audio export) can
+   *  render the SAME component tree Remotion owns the timeline math for
+   *  (TransitionSeries offsets, <Audio volume={fn}> closures), rather than
+   *  re-deriving it. Never serialized — component references don't survive
+   *  postMessage/JSON, so this stays out of CompSnapshot. */
+  component: ComponentType<Record<string, unknown>>;
+  inputProps: Record<string, unknown>;
+}
+
+/** Serializable meta the capture shim + Timeline panel read (no functions). */
+export interface CompSnapshot extends VideoCompMeta {
+  id: string;
+}
+
+/** Result contract for `__maude_render_video__` — see exporters/video-render-lib.ts. */
+export interface RenderVideoResult {
+  b64: string;
+  bytes: number;
+  container: string;
+  videoCodec: string | null;
+  audioCodec: string | null;
+}
+
+/** Options accepted by `__maude_render_video__`, forwarded to renderMediaOnWeb. */
+export interface RenderVideoOptions {
+  container: 'mp4' | 'webm';
+  videoCodec?: string;
+  audioCodec?: string;
+  scale?: number;
+  muted?: boolean;
+  frameRange?: [number, number];
+  licenseKey?: string;
+}
+
+interface MaudeSeekWindow {
+  __maudeVideoComps?: Map<string, CompEntry>;
+  /** Seek every registered comp to `frame` (paused). Ordinary artboards fall
+   *  back to a time-based WAAPI seek. Resolves once the frame has painted. */
+  __maude_seek__?: (frame: number, opts?: { fps?: number }) => Promise<void>;
+  /** Serializable comp list for the capture shim / Timeline panel. */
+  __maude_comps__?: () => CompSnapshot[];
+  /**
+   * DDR-148 addendum (audio export) — whole-comp render via renderMediaOnWeb
+   * (video+audio, one pass; Remotion owns the TransitionSeries/volume-closure
+   * timeline math). Looks up the component by compId and delegates to
+   * `window.__maudeRenderVideo__`, which the export capture injects via
+   * addScriptTag (exporters/video-render-lib.ts) — absent during normal
+   * preview, so this throws outside a capture session.
+   */
+  __maude_render_video__?: (compId: string, opts: RenderVideoOptions) => Promise<RenderVideoResult>;
+  __maudeRenderVideo__?: (
+    opts: RenderVideoOptions & {
+      component: ComponentType<Record<string, unknown>>;
+      inputProps: Record<string, unknown>;
+      width: number;
+      height: number;
+      fps: number;
+      durationInFrames: number;
+    }
+  ) => Promise<RenderVideoResult>;
+}
+
+function seekWindow(): MaudeSeekWindow | null {
+  return typeof window === 'undefined' ? null : (window as unknown as MaudeSeekWindow);
+}
+
+function registry(): Map<string, CompEntry> {
+  const w = seekWindow();
+  if (!w) return new Map();
+  if (!w.__maudeVideoComps) w.__maudeVideoComps = new Map();
+  return w.__maudeVideoComps;
+}
+
+function clamp(n: number, lo: number, hi: number): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+/** Two rAFs — enough for the Player to commit a seeked frame to the DOM. */
+function afterPaint(): Promise<void> {
+  if (typeof requestAnimationFrame !== 'function') return Promise.resolve();
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
+}
+
+/**
+ * Install the singleton seek bridge on `window`. Idempotent — the first
+ * VideoComp to mount wins; later mounts reuse the same functions. The bridge
+ * reads the live registry, so it always reflects the currently-mounted comps.
+ * Exported so tests (and a defensive capture-shim call) can install it without
+ * mounting a Player.
+ */
+export function installMaudeSeekBridge(): void {
+  const w = seekWindow();
+  if (!w || w.__maude_seek__) return;
+
+  w.__maude_seek__ = async (frame, opts) => {
+    const entries = [...registry().values()];
+    if (entries.length > 0) {
+      for (const e of entries) {
+        const f = clamp(Math.round(frame), 0, Math.max(0, e.durationInFrames - 1));
+        try {
+          e.ref.current?.pause();
+          e.ref.current?.seekTo(f);
+        } catch {
+          /* Player not yet ready — a later seek settles it */
+        }
+      }
+      await afterPaint();
+      return;
+    }
+    // Ordinary-artboard fallback (no registered comp): drive WAAPI by time so a
+    // manual `__maude_seek__` still works. The capture shim owns the primary
+    // ordinary-artboard path (it seeks <video>.currentTime + getAnimations()).
+    const fps = opts?.fps ?? 30;
+    const ms = (frame / fps) * 1000;
+    if (typeof document !== 'undefined') {
+      for (const a of document.getAnimations()) {
+        try {
+          a.pause();
+          a.currentTime = ms;
+        } catch {
+          /* unseekable animation — skip */
+        }
+      }
+    }
+    await afterPaint();
+  };
+
+  w.__maude_comps__ = () =>
+    [...registry().values()].map((e) => ({
+      id: e.id,
+      fps: e.fps,
+      durationInFrames: e.durationInFrames,
+      width: e.width,
+      height: e.height,
+    }));
+
+  w.__maude_render_video__ = async (compId, opts) => {
+    const entry = registry().get(compId);
+    if (!entry) throw new Error(`no registered video-comp with id "${compId}"`);
+    if (typeof w.__maudeRenderVideo__ !== 'function') {
+      throw new Error(
+        'render-lib bundle not injected — the export capture must addScriptTag ' +
+          'exporters/video-render-lib.ts before calling __maude_render_video__'
+      );
+    }
+    return w.__maudeRenderVideo__({
+      ...opts,
+      component: entry.component,
+      inputProps: entry.inputProps,
+      width: entry.width,
+      height: entry.height,
+      fps: entry.fps,
+      durationInFrames: entry.durationInFrames,
+    });
+  };
+}
+
+/** Find the compId of the nearest VideoComp mounted inside `container` (the
+ *  target artboard element) — the artboard's own `data-dc-screen` id and the
+ *  VideoComp's `id` prop are independent (an author rarely sets the latter),
+ *  so the capture shim resolves by DOM containment rather than assuming a
+ *  1:1 id match. Returns null when the artboard has no video-comp (an
+ *  ordinary artboard, or a comp not yet mounted). */
+export function findCompIdIn(container: Element): string | null {
+  return container.querySelector('[data-comp-id]')?.getAttribute('data-comp-id') ?? null;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// VideoComp — the canvas-lib wrapper
+
+export interface VideoCompProps extends VideoCompMeta {
+  /** The Remotion composition component (frame-driven; NO CSS animations). */
+  component: ComponentType<Record<string, unknown>>;
+  /** Stable id (defaults to a mount-order slug) — keys the seek registry + the
+   *  Timeline rows; match the enclosing DCArtboard id when there are several. */
+  id?: string;
+  /** Props forwarded to the composition (Remotion `inputProps`). */
+  inputProps?: Record<string, unknown>;
+  /** Show the Player's own transport chrome in PREVIEW. Auto-hidden during
+   *  capture/export (the `?hide-chrome=1` shell flag). Default true. */
+  controls?: boolean;
+  /** Loop preview playback. Default true. */
+  loop?: boolean;
+  /**
+   * Autoplay in preview. Default: play unless the viewer prefers reduced motion
+   * (a11y) or the shell is in capture mode. Never autoplays during export.
+   */
+  autoPlay?: boolean;
+}
+
+let mountCounter = 0;
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch {
+    return false;
+  }
+}
+
+/** True when the shell asked for a chrome-free render (export capture / diff). */
+function hideChrome(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return new URLSearchParams(window.location.search).get('hide-chrome') === '1';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Mount a Remotion composition as a scrubbable video-comp artboard body. Place
+ * it inside a `DCArtboard` whose width/height match the composition:
+ *
+ * ```tsx
+ * const Intro = () => {
+ *   const frame = useCurrentFrame();
+ *   const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
+ *   return <AbsoluteFill style={{ opacity }}>…</AbsoluteFill>;
+ * };
+ * // …inside the canvas:
+ * <DCArtboard id="intro" label="Intro" width={640} height={360}>
+ *   <VideoComp component={Intro} durationInFrames={90} fps={30} width={640} height={360} />
+ * </DCArtboard>
+ * ```
+ */
+export function VideoComp({
+  component,
+  durationInFrames,
+  fps,
+  width,
+  height,
+  id,
+  inputProps,
+  controls,
+  loop = true,
+  autoPlay,
+}: VideoCompProps) {
+  const ref = useRef<PlayerRef | null>(null);
+  // Stable id across re-renders; unique per mount when the author omits one.
+  const [autoId] = useState(() => id ?? `videocomp-${++mountCounter}`);
+  const compId = id ?? autoId;
+  // Loop is live-controlled from the Timeline (timeline-loop message), not just
+  // the mount prop — so toggling loop OFF actually stops the replay.
+  const [loopState, setLoopState] = useState(loop);
+  const capturing = hideChrome();
+  // The Timeline panel is the control surface (transport + scrub + volume), so
+  // the Player's own chrome is redundant on the artboard — hidden by default.
+  // Opt back in per-comp with `controls`; never shown during capture. (DDR-148.)
+  const showControls = (controls ?? false) && !capturing;
+  // Default to PAUSED in preview so the comp is editable on open (a moving,
+  // frame-driven element can't be Cmd+Click-selected). The author can opt into
+  // autoplay; capture never autoplays (the shim drives frames). Opens on a
+  // poster frame ~35% in so a paused comp shows content, not an empty frame 0.
+  const play = (autoPlay ?? false) && !capturing;
+  const posterFrame = capturing
+    ? 0
+    : Math.min(Math.max(0, durationInFrames - 1), Math.round(durationInFrames * 0.35));
+
+  // Register with the seek bridge for the lifetime of this mount.
+  useEffect(() => {
+    installMaudeSeekBridge();
+    const entry: CompEntry = {
+      id: compId,
+      fps,
+      durationInFrames,
+      width,
+      height,
+      ref,
+      component,
+      inputProps: inputProps ?? {},
+    };
+    registry().set(compId, entry);
+    // Announce comps to the shell so the Timeline panel can auto-suggest.
+    postToShell({ dgn: 'timeline-comps', comps: seekWindow()?.__maude_comps__?.() ?? [] });
+    return () => {
+      const cur = registry().get(compId);
+      if (cur === entry) registry().delete(compId);
+      postToShell({ dgn: 'timeline-comps', comps: seekWindow()?.__maude_comps__?.() ?? [] });
+    };
+  }, [compId, fps, durationInFrames, width, height, component, inputProps]);
+
+  // Shell → iframe transport: the Timeline panel drives preview scrub/playback.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onMessage = (e: MessageEvent) => {
+      const m = e.data as {
+        dgn?: string;
+        frame?: number;
+        id?: string;
+        muted?: boolean;
+        volume?: number;
+        loop?: boolean;
+      } | null;
+      if (!m || typeof m !== 'object' || typeof m.dgn !== 'string') return;
+      // The shell asks a (possibly already-mounted) canvas to re-announce its
+      // comps — answer regardless of Player readiness so a tab-switch / panel-
+      // open re-syncs the Timeline panel.
+      if (m.dgn === 'timeline-request-comps') {
+        postToShell({ dgn: 'timeline-comps', comps: seekWindow()?.__maude_comps__?.() ?? [] });
+        return;
+      }
+      if (m.id && m.id !== compId) return; // targeted seek to another comp
+      const p = ref.current;
+      if (!p) return;
+      try {
+        if (m.dgn === 'timeline-seek' && typeof m.frame === 'number') {
+          p.pause();
+          p.seekTo(clamp(Math.round(m.frame), 0, Math.max(0, durationInFrames - 1)));
+        } else if (m.dgn === 'timeline-play') {
+          p.play();
+        } else if (m.dgn === 'timeline-pause') {
+          p.pause();
+        } else if (m.dgn === 'timeline-mute') {
+          // Sound is controlled from the Timeline (the artboard has no chrome).
+          if (m.muted) p.mute();
+          else p.unmute();
+        } else if (m.dgn === 'timeline-volume' && typeof m.volume === 'number') {
+          p.setVolume(clamp(m.volume, 0, 1));
+        } else if (m.dgn === 'timeline-loop') {
+          setLoopState(!!m.loop);
+        }
+      } catch {
+        /* Player transitional — ignore */
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [compId, durationInFrames]);
+
+  // iframe → shell: mirror the playhead so the Timeline panel tracks preview.
+  useEffect(() => {
+    const p = ref.current;
+    if (!p) return;
+    const onFrame = () => {
+      try {
+        postToShell({ dgn: 'timeline-frame', id: compId, frame: p.getCurrentFrame() });
+      } catch {
+        /* ignore */
+      }
+    };
+    p.addEventListener('frameupdate', onFrame);
+    return () => {
+      try {
+        p.removeEventListener('frameupdate', onFrame);
+      } catch {
+        /* ignore */
+      }
+    };
+  }, [compId]);
+
+  const style = useMemo(() => ({ width: '100%', height: '100%', display: 'block' as const }), []);
+
+  return (
+    <div
+      className="dc-video-comp"
+      data-comp-id={compId}
+      style={{ width, height, maxWidth: '100%' }}
+    >
+      <Player
+        ref={ref}
+        component={component}
+        durationInFrames={Math.max(1, Math.round(durationInFrames))}
+        fps={fps}
+        compositionWidth={width}
+        compositionHeight={height}
+        inputProps={inputProps ?? {}}
+        controls={showControls}
+        loop={loopState}
+        autoPlay={play}
+        initialFrame={posterFrame}
+        // Clicking the artboard must NOT toggle playback — it selects elements
+        // for editing (the whole point of a canvas). Play only via the explicit
+        // transport button (Player controls / Timeline panel). Same for the
+        // spacebar, which is the canvas pan chord. (DDR-148 feedback #2.)
+        clickToPlay={false}
+        spaceKeyToPlayOrPause={false}
+        doubleClickToFullscreen={false}
+        // We ship Remotion in-house and disclose the license (DDR-148); ack in
+        // code so the Player never nags/watermarks the preview.
+        acknowledgeRemotionLicense
+        style={style}
+      />
+    </div>
+  );
+}
+VideoComp.displayName = 'VideoComp';
+
+function postToShell(payload: Record<string, unknown>): void {
+  if (typeof window === 'undefined' || window.parent === window) return;
+  try {
+    window.parent.postMessage(payload, '*');
+  } catch {
+    /* cross-origin parent without our listener — no-op */
+  }
+}

package/apps/studio/whats-new.json

@@ -1,6 +1,61 @@
 {
   "$schema": "./whats-new.schema.json",
   "entries": [
+    {
+      "id": "desktop-intel-mac-support",
+      "version": "0.41.0",
+      "date": "2026-07-08",
+      "kind": "improvement",
+      "title": "Desktop app now runs on Intel Macs",
+      "summary": "The macOS desktop app was Apple-Silicon-only — it now ships as a universal binary, so Intel Mac users can download and run it natively too, no Rosetta workaround needed.",
+      "learnMore": "https://maude.sh/desktop",
+      "surface": "design-ui"
+    },
+    {
+      "id": "element-editing-robustness",
+      "version": "0.41.0",
+      "date": "2026-07-08",
+      "kind": "feature",
+      "title": "Edit elements like Figma or Webflow",
+      "summary": "Selecting an element now opens the Inspector automatically, and drag handles let you resize it directly on the canvas (corner + edge, Shift to lock aspect, Alt to resize from center) — artboards get free-hand resize too. Delete an element with the Del key or the right-click menu, or insert a new div, text, or image straight into the artboard; add a whole new empty artboard from a Desktop/Laptop/Tablet/Mobile preset. The Inspector gained Position (with a constraints-style inset box), Transform, and Media sections (object-fit, aspect ratio), plus on-canvas dragging for padding and gaps. Swap a photo or video (or a background image) from a built-in asset picker. Editing now works on design-system specimens too, not just your UI canvases. A shared component always tells you plainly whether an edit is local to this artboard or shared across every place it's used, and moving one instance never drags the others along. Rounding it out: keyboard nudge + tree navigation, Cmd+D duplicate, copy/paste style, align and distribute a multi-selection, deep-select + \"Select layer\" for nested/overlapping elements, Alt-hover distance measurement, a free-hand rotate handle, and a proper Fixed/Hug/Fill sizing control for flex layouts. Every one of these is undoable with Cmd+Z.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "whiteboard-ai-toolkit",
+      "version": "0.41.0",
+      "date": "2026-07-08",
+      "kind": "feature",
+      "title": "The Assistant now reads and draws on your whiteboard",
+      "summary": "Sketch stickies, shapes, and arrows on a canvas and the Assistant understands not just which artboard a note sits on, but which button or element it's pointing at. Ask it to pin a note next to something specific, and it'll drop it right there with an arrow pointing at it — no guessing coordinates. It can also lay out a whole tidy board for you: a sprint retro, a kanban, a week of social posts, a roadmap, a brainstorm, a user-flow diagram — just ask.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "timeline-clip-editing",
+      "version": "0.40.0",
+      "date": "2026-07-05",
+      "kind": "feature",
+      "title": "Hand-edit your video comps on the timeline",
+      "summary": "After the Assistant generates a video, fine-tune it yourself. On the timeline you can drag a clip to move it, drag its right edge to trim (both snap to second-ticks and neighbour clip edges; hold Alt to drag freely), drop a video / image / audio file to add a clip, raise or lower a clip's stacking, swap a clip's footage (⇄), or remove a clip (×). Right-click any clip for the same menu — replace, move, hide, or remove — and hide keeps a clip in place while it stops rendering. Clips that layer a background over a title expand into per-layer rows, so you can see and replace the video separately from its caption. Transition-based showreels reorder and accept dropped clips too. Keyboard shortcuts help: Space plays/pauses, arrows step frames (Shift = a second), Home/End jump to the ends, and . / , hop between keyframes. Prefer to start from footage? Drop video/audio clips anywhere on the canvas as reference chips, then File then Assemble dropped clips into video builds a real, editable comp in one click. Editing is multi-comp-safe — a change always lands on the clip you meant, never one in another composition. And inline text / CSS tweaks you make on the canvas now actually stick.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "video-comp-remotion",
+      "version": "0.40.0",
+      "date": "2026-07-05",
+      "kind": "feature",
+      "title": "Design videos & animations, right in the canvas",
+      "summary": "A canvas artboard can now be a real motion composition (powered by Remotion) — scrub it in the built-in player, drop clips and music onto it, direct edits from the Assistant (\"turn this into an animation\", \"join these 4 clips with a crossfade\"), and export the artboard as MP4 or GIF. Rendered by Maude's own capture engine — no extra install, no native downloads. Remotion is free for individuals and teams of up to 3; larger orgs need their own Remotion license.",
+      "surface": "design-ui"
+    },
+    {
+      "id": "file-tree-live-config-reload",
+      "version": "0.40.0",
+      "date": "2026-07-05",
+      "kind": "fix",
+      "title": "New design systems show up in the file tree instantly",
+      "summary": "Bootstrapping a design system from the Assistant (or editing your design config by hand) now updates the file tree live — new canvas groups and their files appear as they're created, no server restart needed.",
+      "surface": "design-ui"
+    },
     {
       "id": "acp-chat-cross-restart-resume",
       "version": "0.39.1",

package/apps/studio/ws.ts

@@ -206,6 +206,11 @@ export function createWs(
     broadcast({ type: 'canvas-list-update', payload })
   );
 
+  // Config hot-reload (server.ts fs:json subscriber) — the shell refetches
+  // /_config so cfg-derived state (designSystems, tokensCssRel, canvasGroups)
+  // matches the reloaded server config. Inspector clients only.
+  ctx.bus.on('config-updated', () => broadcast({ type: 'config-updated' }));
+
   // Phase 31 (DDR-123) — `/design:chat` → `maude design chat-open` → POST
   // /_api/acp/focus emits this; the shell (app.jsx, native-only) opens the
   // Assistant panel. Inspector clients only — same-origin shell, like the rest.

package/cli/commands/design.mjs

@@ -43,8 +43,10 @@ const BIN_VERBS = new Set([
   'to-lottie',
   'read-annotations',
   'annotate',
+  'canvas-rects',
   'chat-open',
   'ensure-browser',
+  'fetch-asset',
 ]);
 
 // Bin verbs that boot the dev-server (directly, or by shelling into server-up.sh).
@@ -136,8 +138,9 @@ Lifecycle:
 
 Dev-tooling (dispatch to the dev-server bash helpers — DDR-062):
   screenshot · server-up · prep · slug · bootstrap-check · runtime-health
-  smoke · canvas-edit · handoff · asset-sweep · visual-sanity
+  smoke · canvas-edit · handoff · asset-sweep · visual-sanity · fetch-asset
   draw-build · draw-proof · svg-optimize · to-lottie · read-annotations · annotate
+  canvas-rects
         Invoke the bundled helper of the same name. maude resolves it from its
         own package root and sets CLAUDE_PLUGIN_ROOT for the child; stdout,
         stderr, and exit code pass straight through (so command-substitution
@@ -147,6 +150,8 @@ Dev-tooling (dispatch to the dev-server bash helpers — DDR-062):
           PORT=$(maude design server-up --root "$REPO")
           eval "$(maude design prep --shell-export --shape edit --root "$REPO")"
           maude design smoke --changed-only
+          REF=$(maude design fetch-asset "$URL" --root "$REPO")   # download-first image
+          maude design canvas-rects "ui/Foo.tsx"                  # geometry manifest (whiteboard toolkit)
 
   serve [--port N] [--root PATH]
         Start the design plugin's dev server in the current repo. Equivalent

package/cli/commands/design.test.mjs

@@ -51,11 +51,59 @@ test('unknown verb exits 2', () => {
 test('design help lists the dev-tooling verbs', () => {
   const res = runDesign(['help']);
   assert.equal(res.status, 0, res.stderr);
-  for (const verb of ['screenshot', 'server-up', 'prep', 'slug', 'smoke', 'visual-sanity']) {
+  for (const verb of [
+    'screenshot',
+    'server-up',
+    'prep',
+    'slug',
+    'smoke',
+    'visual-sanity',
+    'canvas-rects',
+  ]) {
     assert.match(res.stdout, new RegExp(verb), `usage should mention ${verb}`);
   }
 });
 
+// canvas-rects needs an explicit --root pinned to an isolated temp dir (not
+// runDesign's ambient cwd) — its server-detection reads $CLAUDE_PROJECT_DIR /
+// `git rev-parse` when --root is absent, which would escape the temp dir in
+// an environment where either is set.
+function runCanvasRects(args, root) {
+  const env = { ...process.env };
+  env.CLAUDE_PLUGIN_ROOT = undefined;
+  return spawnSync(process.execPath, [BIN, 'design', 'canvas-rects', ...args, '--root', root], {
+    cwd: root,
+    encoding: 'utf8',
+    env,
+  });
+}
+
+test('canvas-rects dispatches to the bundled helper (--help)', () => {
+  const root = mkdtempSync(join(tmpdir(), 'maude-canvas-rects-'));
+  try {
+    const res = runCanvasRects(['--help'], root);
+    assert.equal(res.status, 0, res.stderr);
+    assert.match(res.stdout, /canvas-rects\.sh/);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test('canvas-rects with no live server falls back to the static lane', () => {
+  // No .design/_server.json under --root → static fallback, no browser
+  // needed. A missing canvas still emits a valid empty manifest (exit 0).
+  const root = mkdtempSync(join(tmpdir(), 'maude-canvas-rects-'));
+  try {
+    const res = runCanvasRects(['ui/Nonexistent.tsx'], root);
+    assert.equal(res.status, 0, res.stderr);
+    assert.match(res.stderr, /static/);
+    const manifest = JSON.parse(res.stdout.trim());
+    assert.deepEqual(manifest, { artboards: [], elements: [], elementsTruncated: false });
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
 // resolveServerBinary — the dev-server boot-runtime resolver (DDR-084). server-up
 // must boot the compiled platform binary on a production install (it embeds yjs +
 // every dep; `bun server.ts` from source can't resolve them — the historic