@1agh/maude 0.19.1 → 0.20.0

package/plugins/design/dev-server/use-cursor-modifiers.tsx

@@ -0,0 +1,122 @@
+/**
+ * @file       use-cursor-modifiers.tsx — T28 (Wave 3)
+ * @scope      plugins/design/dev-server/use-cursor-modifiers.tsx
+ * @purpose    Modifier-aware cursor state machine. Tracks Alt / Shift / Meta
+ *             modifier state globally and reflects it as `data-mod-*`
+ *             attributes on `.dc-canvas`. CSS rules consume those attrs to
+ *             flip cursors live:
+ *
+ *               • Alt-held over a `[data-cd-id]` in Move tool → cursor: copy
+ *                 (preview of "Alt-drag duplicates this element").
+ *               • Shift-held in Move tool over empty body padding → crosshair
+ *                 (preview of "marquee add mode").
+ *
+ *             Per the research finding (Excalidraw #250): cursor changes on
+ *             HOVER, not on drag-start. We track modifier state at the
+ *             document level so the cursor updates the moment the user
+ *             presses/releases without waiting for a pointermove.
+ *
+ *             Resize-handle cursors (nw / ne / ns / ew) live next to the
+ *             handle DOM in `use-annotation-resize.tsx` — those don't need
+ *             modifier coupling; they fire on hover via their own CSS rules.
+ */
+
+import { type RefObject, useEffect } from 'react';
+
+const STYLES = `
+/* Alt + cd-id in move tool → copy cursor. The Alt-drag-duplicates affordance
+   is partial in v1 (no drag handler yet) — paint the cursor anyway so the
+   user discovers the gesture, and a future wave wires the actual duplication. */
+.dc-canvas[data-active-tool="move"][data-mod-alt="true"] [data-cd-id],
+.dc-canvas[data-active-tool="move"][data-mod-alt="true"] [data-dc-screen] {
+  cursor: copy !important;
+}
+
+/* Shift over empty body padding in move tool → crosshair (marquee add mode
+   preview). Body padding = the .dc-artboard-body direct background, not
+   user content. */
+.dc-canvas[data-active-tool="move"][data-mod-shift="true"] .dc-artboard-body {
+  cursor: crosshair;
+}
+`.trim();
+
+function ensureStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-cv-cursor-modifiers-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-cv-cursor-modifiers-css';
+  s.textContent = STYLES;
+  document.head.appendChild(s);
+}
+
+export interface ModifierState {
+  alt: boolean;
+  shift: boolean;
+  meta: boolean;
+}
+
+/**
+ * Reduce a key event into the modifier slice. Pulled out for unit tests —
+ * the actual hook is DOM-bound and harder to test directly.
+ */
+export function reduceModifiers(
+  prev: ModifierState,
+  e: { altKey: boolean; shiftKey: boolean; metaKey: boolean; ctrlKey: boolean }
+): ModifierState {
+  // Treat Ctrl as Meta on non-mac so the cursor preview stays consistent with
+  // the input-router's `metaOrCtrl` gate.
+  const meta = e.metaKey || e.ctrlKey;
+  if (prev.alt === e.altKey && prev.shift === e.shiftKey && prev.meta === meta) {
+    return prev;
+  }
+  return { alt: e.altKey, shift: e.shiftKey, meta };
+}
+
+/**
+ * Attach modifier tracking to the canvas host element. Reflects the modifier
+ * state as `data-mod-alt` / `data-mod-shift` / `data-mod-meta` so cursor CSS
+ * rules can act on combinations without re-rendering React.
+ *
+ * Cleans up on unmount + on window blur (so leaving the tab with Alt held
+ * doesn't strand the cursor in copy mode).
+ */
+export function useCursorModifiers(hostRef: RefObject<HTMLElement | null>): void {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const host = hostRef.current;
+    if (!host) return;
+    ensureStyles();
+
+    let state: ModifierState = { alt: false, shift: false, meta: false };
+
+    const apply = (next: ModifierState) => {
+      if (next === state) return;
+      state = next;
+      host.setAttribute('data-mod-alt', next.alt ? 'true' : 'false');
+      host.setAttribute('data-mod-shift', next.shift ? 'true' : 'false');
+      host.setAttribute('data-mod-meta', next.meta ? 'true' : 'false');
+    };
+
+    const onKeyChange = (e: KeyboardEvent) => apply(reduceModifiers(state, e));
+    const onBlur = () => apply({ alt: false, shift: false, meta: false });
+    // pointermove carries the modifier state too — handles the case where
+    // the user presses a modifier outside the focused window and then mouses
+    // back in (keydown/keyup never fires for the press).
+    const onPointer = (e: PointerEvent) => apply(reduceModifiers(state, e));
+
+    document.addEventListener('keydown', onKeyChange, true);
+    document.addEventListener('keyup', onKeyChange, true);
+    document.addEventListener('pointermove', onPointer, { passive: true });
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyChange, true);
+      document.removeEventListener('keyup', onKeyChange, true);
+      document.removeEventListener('pointermove', onPointer);
+      window.removeEventListener('blur', onBlur);
+      host.removeAttribute('data-mod-alt');
+      host.removeAttribute('data-mod-shift');
+      host.removeAttribute('data-mod-meta');
+    };
+  }, [hostRef]);
+}

package/plugins/design/dev-server/use-keyboard-discipline.tsx

@@ -0,0 +1,125 @@
+/**
+ * @file       use-keyboard-discipline.tsx — T29 (Wave 3)
+ * @scope      plugins/design/dev-server/use-keyboard-discipline.tsx
+ * @purpose    Keyboard nudge + Cmd+A select-all-in-artboard. Bail when focus
+ *             is inside an input / textarea / contenteditable so typing
+ *             into the dev-server's own inputs (file tree filter, etc.)
+ *             never collides.
+ *
+ *             Scope decision — arrow nudge applies to **artboards** only.
+ *             User content inside artboards has no live-position channel
+ *             (canvas surface is HTML; element positions are CSS-derived
+ *             from the compiled JSX, not directly manipulable). Element
+ *             nudge would require either an ephemeral CSS-transform overlay
+ *             (cleaner) or a TSX rewrite channel (heavier). Out of scope
+ *             for this wave — the artboard channel + dragBus.commitPositions
+ *             already exists, so we leverage that and document the
+ *             limitation here.
+ *
+ *             Cmd+D duplicate is also deferred — same architectural reason
+ *             (no duplicate channel). Esc is owned by the input-router's
+ *             onEscape callback, so we don't duplicate it here.
+ *
+ *             Distance:
+ *               • Arrow      → 1 world-unit step (DDR-028 world units, not
+ *                              screen px).
+ *               • Shift+Arrow → 10 world-unit step.
+ */
+
+import { useEffect } from 'react';
+
+import { useArtboardsContext, useDragStateContext } from './canvas-lib.tsx';
+import { isEditableTarget } from './input-router.tsx';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+
+const STEP_SMALL = 1;
+const STEP_LARGE = 10;
+
+export interface NudgeInput {
+  key: string;
+  shift: boolean;
+}
+
+/**
+ * Map a keyboard event into a (dx, dy) delta in world units. Returns null
+ * when the key isn't an arrow. Exported for unit tests.
+ */
+export function nudgeDelta(input: NudgeInput): { dx: number; dy: number } | null {
+  const step = input.shift ? STEP_LARGE : STEP_SMALL;
+  switch (input.key) {
+    case 'ArrowLeft':
+      return { dx: -step, dy: 0 };
+    case 'ArrowRight':
+      return { dx: step, dy: 0 };
+    case 'ArrowUp':
+      return { dx: 0, dy: -step };
+    case 'ArrowDown':
+      return { dx: 0, dy: step };
+    default:
+      return null;
+  }
+}
+
+export function useKeyboardDiscipline(): void {
+  const selSet = useSelectionSet();
+  const artboardsCtx = useArtboardsContext();
+  const dragBus = useDragStateContext();
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (isEditableTarget(e.target)) return;
+
+      // Cmd+A → select all stamped elements in the active artboard.
+      const isMeta = e.metaKey || e.ctrlKey;
+      if (isMeta && e.key.toLowerCase() === 'a') {
+        if (!artboardsCtx) return;
+        const id = artboardsCtx.activeArtboardId;
+        if (!id) return;
+        const root = document.querySelector(`[data-dc-screen="${id}"] .dc-artboard-body`);
+        if (!root) return;
+        const stamped = root.querySelectorAll('[data-cd-id]');
+        if (stamped.length === 0) return;
+        const hits: Selection[] = [];
+        for (const el of stamped) {
+          const cdId = el.getAttribute('data-cd-id');
+          if (!cdId) continue;
+          hits.push({
+            id: cdId,
+            selector: `[data-cd-id="${cdId}"]`,
+            artboardId: id,
+            tag: el.tagName.toLowerCase(),
+          });
+        }
+        if (hits.length === 0) return;
+        e.preventDefault();
+        selSet.replace(hits);
+        return;
+      }
+
+      // Arrow nudge — artboards only (see file header for the why).
+      const delta = nudgeDelta({ key: e.key, shift: e.shiftKey });
+      if (!delta) return;
+      if (isMeta || e.altKey) return; // modifier combos reserved for future
+      if (!artboardsCtx || !dragBus) return;
+
+      const artboardSelections = selSet.selected.filter((s) => !!s.artboardId && !s.id);
+      if (artboardSelections.length === 0) return;
+      const ids = new Set(artboardSelections.map((s) => s.artboardId as string));
+      const targets = artboardsCtx.artboards.filter((r) => ids.has(r.id));
+      if (targets.length === 0) return;
+
+      e.preventDefault();
+      const moved = targets.map((r) => ({
+        id: r.id,
+        x: Math.round(r.x + delta.dx),
+        y: Math.round(r.y + delta.dy),
+      }));
+      dragBus.commitPositions(moved);
+    };
+
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [selSet, artboardsCtx, dragBus]);
+}

package/plugins/design/dev-server/use-undo-stack.tsx

@@ -0,0 +1,355 @@
+/**
+ * @file       use-undo-stack.tsx — React Context + Provider for the undo stack
+ * @scope      plugins/design/dev-server/use-undo-stack.tsx
+ * @purpose    Wraps the pure `undoReducer` (undo-stack.ts) in React state,
+ *             owns the async runner that awaits side-effects before applying
+ *             the next state transition, exposes the `lastLabel` HUD signal,
+ *             AND persists the stack across canvas switches via
+ *             `window.top.__maude_undo_stacks` keyed by canvas file path
+ *             (DDR-050 rev 2).
+ *
+ * Two roles in one provider:
+ *   1. **State authority** — ref-as-store synchronously between awaited
+ *      side-effects (Cmd+Z at 30 Hz key-repeat needs to see its own writes).
+ *   2. **Sinks registry** — descendants (DesignCanvasInner for layout,
+ *      AnnotationsLayer for strokes) register their side-effect functions
+ *      via `useUndoSinks().setSink(name, fn)`. The provider merges them
+ *      and uses them when rebuilding commands from records.
+ */
+
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  type CommandRecord,
+  type CommandSinks,
+  type EditCommand,
+  type UndoStackState,
+  canRedo as canRedoOf,
+  canUndo as canUndoOf,
+  loadStackState,
+  rebuildCommand,
+  saveStackState,
+  undoReducer,
+} from './undo-stack.ts';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context shape
+
+export interface UndoStackValue {
+  /**
+   * Push a fresh command. The runner calls the rebuilt command's `do()` —
+   * the new state is committed only after the side-effect resolves.
+   * Awaiting the returned promise is optional.
+   */
+  push: (record: CommandRecord) => Promise<void>;
+  /** Undo the top of `past`. No-op when empty. */
+  undo: () => Promise<void>;
+  /** Redo the top of `future`. No-op when empty. */
+  redo: () => Promise<void>;
+  /** Drop both stacks (external edit). */
+  clear: (reason?: string) => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  /** Most recent operation label. HUD reads this. */
+  lastLabel: string | null;
+  /** Monotonic counter — HUD subscribes to bump dismiss timer per op. */
+  lastTick: number;
+}
+
+const UndoStackContext = createContext<UndoStackValue | null>(null);
+
+const NOOP_VALUE: UndoStackValue = {
+  push: () => Promise.resolve(),
+  undo: () => Promise.resolve(),
+  redo: () => Promise.resolve(),
+  clear: () => {},
+  canUndo: false,
+  canRedo: false,
+  lastLabel: null,
+  lastTick: 0,
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Sinks context — descendants register side-effect functions here.
+
+export interface UndoSinksValue {
+  /** Register or replace a sink. Pass `undefined` to unregister. */
+  setSink: <K extends keyof CommandSinks>(key: K, fn: CommandSinks[K]) => void;
+}
+
+const UndoSinksContext = createContext<UndoSinksValue | null>(null);
+
+const NOOP_SINKS: UndoSinksValue = { setSink: () => {} };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+
+export interface UndoStackProviderProps {
+  children: ReactNode;
+  /**
+   * Canvas file path (e.g. `.design/ui/Foo.tsx` or repo-relative). Required
+   * for cross-canvas persistence — the stack is keyed by this string in the
+   * `window.top.__maude_undo_stacks` Map. Two iframes with the same canvas
+   * file share one stack; switching canvases gets a fresh stack keyed under
+   * a different path.
+   *
+   * Optional only because some test harnesses mount the provider standalone;
+   * an empty / undefined value disables persistence (stack is ephemeral).
+   */
+  canvasFile?: string;
+  /**
+   * Optional async-failure hook. Fires when a command's `do()` / `undo()`
+   * throws or rejects. The reducer never commits the transition for a failed
+   * side-effect (push: cmd not appended; undo: stays in past; redo: stays in
+   * future). Defaults to a console.warn.
+   */
+  onCommandError?: (err: unknown, op: 'do' | 'undo', record: CommandRecord) => void;
+}
+
+export function UndoStackProvider({
+  children,
+  canvasFile,
+  onCommandError,
+}: UndoStackProviderProps) {
+  // Ref is the authoritative store — the async runner reads + writes it
+  // synchronously between awaited side-effects.
+  const stateRef = useRef<UndoStackState>(
+    canvasFile ? loadStackState(canvasFile) : { past: [], future: [] }
+  );
+  const [, setRenderToken] = useState(0);
+
+  // Sinks live in a ref so writes don't churn re-renders; the runner reads
+  // them on every push/undo/redo.
+  const sinksRef = useRef<CommandSinks>({});
+
+  // canvasFile ref tracks the current key — used for persistence + for
+  // re-hydration when the consumer remounts under a different file.
+  const fileRef = useRef<string | undefined>(canvasFile);
+
+  // Re-hydrate state when canvasFile changes (e.g. parent shell remounts
+  // the provider for a new canvas). For the typical iframe lifecycle the
+  // provider unmounts entirely on canvas switch so this branch is rarely
+  // hit — it's a safety net for test harnesses that swap files in place.
+  useEffect(() => {
+    if (canvasFile === fileRef.current) return;
+    fileRef.current = canvasFile;
+    stateRef.current = canvasFile ? loadStackState(canvasFile) : { past: [], future: [] };
+    setRenderToken((t) => t + 1);
+  }, [canvasFile]);
+
+  const writeState = useCallback((next: UndoStackState) => {
+    stateRef.current = next;
+    if (fileRef.current) saveStackState(fileRef.current, next);
+    setRenderToken((t) => t + 1);
+  }, []);
+
+  const [lastLabel, setLastLabel] = useState<string | null>(null);
+  const [lastTick, setLastTick] = useState(0);
+
+  // Serialize concurrent ops. Cmd+Z held down can repeat at ~30 Hz; the
+  // runner awaits each side-effect before applying state.
+  const inFlightRef = useRef<Promise<void>>(Promise.resolve());
+
+  const reportError = useCallback(
+    (err: unknown, op: 'do' | 'undo', record: CommandRecord) => {
+      if (onCommandError) {
+        onCommandError(err, op, record);
+        return;
+      }
+      console.warn(`[undo-stack] ${op} failed for "${record.label}":`, err);
+    },
+    [onCommandError]
+  );
+
+  const bumpLabel = useCallback((label: string | null) => {
+    setLastLabel(label);
+    setLastTick((t) => t + 1);
+  }, []);
+
+  const enqueue = useCallback((task: () => Promise<void>): Promise<void> => {
+    const next = inFlightRef.current.then(task, task);
+    inFlightRef.current = next.catch(() => {
+      /* swallow — per-op error already reported */
+    });
+    return next;
+  }, []);
+
+  /**
+   * Build a runnable EditCommand from a record using the iframe's current
+   * sinks. Returns `null` when the kind isn't registered or its required
+   * sink isn't bound — the runner skips the entry and bumps a label so the
+   * user sees `"(skipped: …)"` in the HUD instead of silent failure.
+   */
+  const build = useCallback((record: CommandRecord): EditCommand | null => {
+    return rebuildCommand(record, sinksRef.current);
+  }, []);
+
+  const push = useCallback(
+    (record: CommandRecord): Promise<void> =>
+      enqueue(async () => {
+        const cmd = build(record);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${record.kind})`);
+          return;
+        }
+        try {
+          await cmd.do();
+        } catch (err) {
+          reportError(err, 'do', record);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'push', record }));
+        bumpLabel(record.label);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const undo = useCallback(
+    (): Promise<void> =>
+      enqueue(async () => {
+        const cur = stateRef.current;
+        if (!canUndoOf(cur)) return;
+        const top = cur.past[cur.past.length - 1];
+        if (!top) return;
+        const cmd = build(top);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${top.kind})`);
+          return;
+        }
+        try {
+          await cmd.undo();
+        } catch (err) {
+          reportError(err, 'undo', top);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'undo' }));
+        bumpLabel(`Undo: ${top.label}`);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const redo = useCallback(
+    (): Promise<void> =>
+      enqueue(async () => {
+        const cur = stateRef.current;
+        if (!canRedoOf(cur)) return;
+        const top = cur.future[cur.future.length - 1];
+        if (!top) return;
+        const cmd = build(top);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${top.kind})`);
+          return;
+        }
+        try {
+          await cmd.do();
+        } catch (err) {
+          reportError(err, 'do', top);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'redo' }));
+        bumpLabel(`Redo: ${top.label}`);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const clear = useCallback(
+    (reason?: string) => {
+      writeState({ past: [], future: [] });
+      bumpLabel(reason ?? null);
+    },
+    [bumpLabel, writeState]
+  );
+
+  // External-edit invalidation. Listen for an explicit window event
+  // dispatched by client/hmr.mjs when an external .meta.json change arrives.
+  // The self-echo guard ignores our own PATCH bouncing back through fs-watch
+  // (see canvas-lib's `__maude_last_meta_self_write_at`).
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onInvalidate = (ev: Event) => {
+      const w = window as unknown as { __maude_last_meta_self_write_at?: number };
+      const last = w.__maude_last_meta_self_write_at ?? 0;
+      if (Date.now() - last < 500) return;
+      const reason =
+        (ev as CustomEvent<{ reason?: string }>).detail?.reason ?? 'External edit detected';
+      writeState({ past: [], future: [] });
+      bumpLabel(reason);
+    };
+    window.addEventListener('maude:invalidate-undo', onInvalidate);
+    return () => window.removeEventListener('maude:invalidate-undo', onInvalidate);
+  }, [writeState, bumpLabel]);
+
+  // Sinks API exposed via a sibling context — descendants register their
+  // own side-effect functions without prop-drilling.
+  const sinksApi = useMemo<UndoSinksValue>(
+    () => ({
+      setSink: (key, fn) => {
+        if (fn === undefined) {
+          delete sinksRef.current[key];
+        } else {
+          (sinksRef.current as Record<string, unknown>)[key] = fn as unknown;
+        }
+      },
+    }),
+    []
+  );
+
+  const value = useMemo<UndoStackValue>(
+    () => ({
+      push,
+      undo,
+      redo,
+      clear,
+      canUndo: canUndoOf(stateRef.current),
+      canRedo: canRedoOf(stateRef.current),
+      lastLabel,
+      lastTick,
+    }),
+    // `stateRef.current` doesn't trigger memo invalidation; we depend on
+    // `lastTick` (bumped by every push/undo/redo/clear) as the proxy so the
+    // memoized canUndo/canRedo readouts re-evaluate on each transition.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [push, undo, redo, clear, lastLabel, lastTick]
+  );
+
+  return (
+    <UndoStackContext.Provider value={value}>
+      <UndoSinksContext.Provider value={sinksApi}>{children}</UndoSinksContext.Provider>
+    </UndoStackContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hooks
+
+export function useUndoStack(): UndoStackValue {
+  const ctx = useContext(UndoStackContext);
+  if (!ctx) throw new Error('useUndoStack must be used inside <UndoStackProvider>');
+  return ctx;
+}
+
+export function useUndoStackOptional(): UndoStackValue {
+  return useContext(UndoStackContext) ?? NOOP_VALUE;
+}
+
+/**
+ * Sinks-registration hook. Use a setSink call inside a useEffect — register
+ * on mount, unregister on unmount.
+ */
+export function useUndoSinks(): UndoSinksValue {
+  return useContext(UndoSinksContext) ?? NOOP_SINKS;
+}
+
+export { UndoStackContext, UndoSinksContext };
+
+// Re-export the EditCommand type for ergonomic single-import in consumers.
+export type { CommandRecord, EditCommand } from './undo-stack.ts';

package/plugins/design/templates/_shell.html

@@ -83,7 +83,9 @@
           "react-dom/client": "/_canvas-runtime/react-dom_client.js",
           "react/jsx-runtime": "/_canvas-runtime/react_jsx-runtime.js",
           "react/jsx-dev-runtime": "/_canvas-runtime/react_jsx-dev-runtime.js",
-          "pixi.js": "/_canvas-runtime/pixi-js.js"
+          "pixi.js": "/_canvas-runtime/pixi-js.js",
+          "motion": "/_canvas-runtime/motion.js",
+          "motion/react": "/_canvas-runtime/motion_react.js"
         }
       }
     </script>
@@ -94,11 +96,20 @@
 
     <script type="module">
       const params = new URLSearchParams(location.search);
-      const canvasRel = params.get('canvas');
-      const designRel = params.get('designRel') || '.design';
-      const tokensRel = params.get('tokens') || '';
-      const componentsRel = params.get('components') || '';
-      const layoutRel = params.get('layout') || '';
+      const designRel = (params.get('designRel') || '.design').replace(/^\/+|\/+$/g, '');
+      // Callers may pass paths either relative to designRoot (`ui/Foo.tsx` — the
+      // canonical contract) OR repo-relative (`.design/ui/Foo.tsx` — the form
+      // `_active.json` stores). Normalize to the canonical form so we never
+      // emit `/.design/.design/...` import URLs and 404 silently.
+      const stripDesignPrefix = (p) => {
+        if (!p) return p;
+        const s = p.replace(/^\/+/, '');
+        return s.startsWith(designRel + '/') ? s.slice(designRel.length + 1) : s;
+      };
+      const canvasRel = stripDesignPrefix(params.get('canvas'));
+      const tokensRel = stripDesignPrefix(params.get('tokens') || '');
+      const componentsRel = stripDesignPrefix(params.get('components') || '');
+      const layoutRel = stripDesignPrefix(params.get('layout') || '');
       // Phase 6.5 — exporters pass ?hide-chrome=1 to flip the export-mode
       // stylesheet from `media="not all"` to `media="all"`, hiding the
       // dev-server overlays during capture. See `<style id="canvas-hide-chrome">`.