@1agh/maude 0.60.7 → 1.0.3

package/apps/studio/acp/index.ts

@@ -713,6 +713,7 @@ export function createAcp(ctx: Context, aiActivity?: AiActivity): Acp {
         decision?: unknown;
         action?: unknown;
         content?: unknown;
+        seq?: unknown;
       };
 
       const chatId = typeof frame.chat === 'string' && frame.chat ? frame.chat : 'default';

package/apps/studio/ai-banner.tsx

@@ -11,6 +11,7 @@
  * `/design:edit` that's about to rewrite their HTML.
  */
 
+import type { JSX } from 'react';
 import { useEffect, useState } from 'react';
 
 function deriveFile(): string | null {

package/apps/studio/annotations-context-toolbar.tsx

@@ -1008,7 +1008,9 @@ export function AnnotationContextToolbar({
   const canAlign = selectedStrokes.length >= 2;
 
   // Active values for swatch highlighting — when uniform across selection.
-  const uniqColor = uniformValue(selectedStrokes.map((s) => s.color));
+  // Image / link / mediaref strokes carry no `color` — `uniformValue` already
+  // filters undefined out, the `in` check just says so to the checker.
+  const uniqColor = uniformValue(selectedStrokes.map((s) => ('color' in s ? s.color : undefined)));
   const uniqFill = caps.fill
     ? uniformValue(
         selectedStrokes.map((s) =>

package/apps/studio/annotations-layer.tsx

@@ -21,6 +21,7 @@
  * on commit, debounced 200 ms.
  */
 
+import type { JSX } from 'react';
 import {
   type CSSProperties,
   createContext,
@@ -72,6 +73,7 @@ import {
   type DrawMods,
   defaultFillFor,
   type EditorFmt,
+  type EllipseStroke,
   FILL_PALETTE,
   fmtEqual,
   HALO_PAD_PX,
@@ -90,6 +92,7 @@ import {
   LINK_GLYPH_D2,
   LINK_GLYPH_STROKE,
   LINK_TITLE_FILL,
+  type LinkStroke,
   type ListType,
   linkCardLayout,
   listPrefixedBody,
@@ -104,6 +107,7 @@ import {
   normalizeRect,
   normalizeSticky,
   normFmt,
+  type PenStroke,
   penPathD,
   polygonPoints,
   resolveDefaultInk,
@@ -726,9 +730,8 @@ const ANNOT_CSS = `
    * positioning. An SVG inside with width:100%/height:100% resolves to 0 px
    * and Chrome clips children even under overflow:visible. We hardcode a
    * very large width/height instead so the SVG viewport easily covers any
-   * world-coord stroke. vector-effect="non-scaling-stroke" on every stroke
-   * keeps thickness px-constant under CSS zoom; overflow:visible covers the
-   * rare edge case of a stroke straying outside this 200k box.
+   * world-coord stroke; overflow:visible covers the rare edge case of a
+   * stroke straying outside this 200k box.
    */
   width: 200000px;
   height: 200000px;
@@ -2220,15 +2223,17 @@ export function AnnotationsLayer() {
     // — byte-identical to the old hardcode — browse in preview, so drawing an
     // annotation never silently exits the alive posture). Sticky lets the user
     // draw many shapes in a row (canonical pattern: tldraw double-click to
-    // lock). Eraser stays armed by default — that tool is destructive, not
-    // constructive. Map a highlighter pen (a 'pen' stroke with the flag) back
-    // to the 'highlighter' tool id so its sticky-lock check matches the
-    // active tool.
+    // lock). Map a highlighter pen (a 'pen' stroke with the flag) back to the
+    // 'highlighter' tool id so its sticky-lock check matches the active tool.
+    //
+    // No eraser case here: an eraser commits no stroke, so `cur.tool` (a stroke
+    // KIND, off `drawingRef`) can never be 'eraser' — erase leaves through the
+    // `isErase` branch above. It stays armed by being unreachable from here,
+    // not by a guard. The typecheck surface completion (A2) proved the old
+    // `!== 'eraser'` test was dead.
     const toolJustUsed = cur.tool === 'pen' && cur.highlighter ? 'highlighter' : cur.tool;
-    if (toolJustUsed !== 'eraser') {
-      const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
-      if (!stickyOnThis) resetTool();
-    }
+    const stickyOnThis = sticky.locked && sticky.tool === toolJustUsed;
+    if (!stickyOnThis) resetTool();
     drawAnchorRef.current = null;
     lastDrawPointRef.current = null;
     setDrawing(null);
@@ -3840,8 +3845,10 @@ function AnnotationsInput({
 
 // ─────────────────────────────────────────────────────────────────────────────
 // SVG — portaled INTO `.dc-world` so the world's CSS zoom + translate apply
-// natively. `vector-effect="non-scaling-stroke"` keeps stroke px-thick at any
-// zoom level. `pointer-events: none` on the container — strokes are decorative
+// natively, which is what makes drawn ink scale with the zoom. Selection chrome
+// and card hairlines opt into `vector-effect="non-scaling-stroke"` per element
+// to stay px-thick; drawn ink deliberately does not (see `common` in
+// `renderStroke`). `pointer-events: none` on the container — strokes are decorative
 // for now (Phase 5.1 Task 6 will reintroduce hit-test via the selection store).
 
 function AnnotationsSvg({
@@ -4192,11 +4199,15 @@ function MediaRefPlayers({
   strokes,
   visible,
 }: {
-  worldRef: React.RefObject<HTMLElement | null>;
+  // Same shape the context actually hands out (nullable OUTSIDE a world
+  // provider, exactly like the sibling overlay at MediaRefChrome) — the old
+  // `RefObject<HTMLElement | null>` both mis-typed the caller and let
+  // `worldRef.current` be dereferenced on a null context.
+  worldRef: ReturnType<typeof useWorldRefContext>;
   strokes: readonly Stroke[];
   visible: boolean;
 }) {
-  const target = worldRef.current;
+  const target = worldRef?.current ?? null;
   if (!target || !visible) return null;
   const HEADER = 26;
   const refs = strokes.filter(
@@ -5768,6 +5779,13 @@ function StrokeNodeBase({
       </g>
     );
   }
+  // Deliberately NO `vector-effect="non-scaling-stroke"` here: drawn ink is
+  // world-space content and must thicken/thin with the zoom, the way it does in
+  // Figma/FigJam. The attribute also rendered differently per engine — Blink
+  // honours it under the world's CSS `zoom` (ink stayed a fixed screen width at
+  // every zoom level), WebKit ignores it under `transform: scale`, so the same
+  // board drew differently in Chrome than in the desktop shell. Card hairlines
+  // and selection chrome below still opt in — those ARE fixed-px by intent.
   const common = {
     'data-id': stroke.id,
     'data-tool': stroke.tool,
@@ -5775,7 +5793,6 @@ function StrokeNodeBase({
     strokeWidth: stroke.width,
     strokeLinecap: 'round' as const,
     strokeLinejoin: 'round' as const,
-    vectorEffect: 'non-scaling-stroke' as const,
   };
   if (stroke.tool === 'pen') {
     // Highlighter (item 8) — overlaps darken via multiply; the translucent hue

package/apps/studio/api.ts

@@ -99,6 +99,7 @@ import { clearLocatorSlug, readLocator, writeLocator } from './locator.ts';
 import { STICKERS_DIR } from './paths.ts';
 import { getPaperPreset, MAX_PRINT_MM } from './print/units.ts';
 import { sessionDir } from './session-scope.ts';
+import { isWorkspaceMode } from './workspace-mode.ts';
 
 // Directories that never hold user-facing canvases. Exported so the
 // external-canvas watcher (`canvas-list-watch.ts`) shares one source instead of
@@ -728,6 +729,16 @@ export interface ApiHooks {
    * move rather than rename a file out from under a live hub session.
    */
   isRoomPinned?: (slug: string) => boolean;
+  /**
+   * The MOVE protocol (codec `stampMovedTo`): stamp the slug's shared document
+   * retired-to-`toRel`, push the stamp, and detach the sync provider — so the
+   * move can proceed instead of being refused. On a cell EVERY canvas is
+   * pinned (the studio child's own runtime holds the doc), which made the
+   * pinned refusal a universal "cannot move anything in the cloud".
+   * Returns false when no runtime carries the slug — the caller keeps the
+   * refusal for that case (an unretired pinned room is still unsafe to move).
+   */
+  retireCanvasForMove?: (fromSlug: string, toRel: string) => Promise<boolean>;
   /** Flush + force-tear-down a canvas's collab room ahead of a move (best
    *  effort — a room may not be live for the slug at all). */
   flushAndDropRoom?: (slug: string) => Promise<void>;
@@ -1877,6 +1888,17 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       // Trailing newline — consistent with canvas-create.ts + sync/codec.ts
       // (mergeSharedMetaIntoLocal), so a layout edit doesn't churn the newline.
       await Bun.write(metaAbs, `${JSON.stringify(next, null, 2)}\n`);
+      // Same reason as the annotations sidecar below, and the same bug: this
+      // lane writes the FILE and nothing else, so in a cell — where there is no
+      // `fs.watch` — the layout never entered the doc and never reached a peer.
+      // Not "late", NEVER: a canvas `.meta.json` is `canvas-owned`, so it is
+      // excluded from the journal by design and the walk-import belt behind
+      // every other class does not cover it either. Dragging an artboard in the
+      // cloud left every other machine showing the old position indefinitely,
+      // while the same drag on a laptop crossed in seconds (a laptop watcher
+      // fires) — which reads as "sync is broken one way" rather than as a
+      // missing announce.
+      announceWritten(path.relative(paths.designRoot, metaAbs));
     }
 
     // Return the merged view (shared meta + camera) — identical to GET, so the
@@ -1925,6 +1947,13 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     const clean = sanitizeAnnotationSvg(svg);
     await Bun.write(annotationsPath(file), clean);
     onAnnotationsChanged?.(file, clean);
+    // Annotations reach OTHER VIEWERS over the collab room, which is why this
+    // never needed an `fs:any`. But the file is also a versioned, file-plane
+    // sidecar (DDR-115), and the file plane learns about a cell's own writes
+    // through exactly this event — so without it, a sticky note drawn in the
+    // cloud crossed to open browsers instantly and to a peer's DISK a quarter
+    // of an hour later.
+    announceWritten(`${fileSlug(file)}.annotations.svg`);
     return true;
   }
 
@@ -1961,6 +1990,30 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
    * ever parsed — only magic bytes are read. `saveAsset(bytes)` wraps this so
    * both the route and any programmatic caller share ONE tested path.
    */
+  /**
+   * Say that a file this process wrote has landed.
+   *
+   * Most write paths get this for free: they arm `activity:suppress` before
+   * writing, and `createContainerWriteBridge` turns that into the `fs:any` a
+   * cell's `fs.watch` never fires. The asset writer does not — it streams to a
+   * temp file and content-addresses the name, so there is no `rel` to suppress
+   * until after the rename, by which point suppression means nothing.
+   *
+   * That gap was invisible while `fs:any` only drove hot-reload (the uploader
+   * already knew, and other viewers reloaded eventually). It stopped being
+   * invisible when the same event became how a cell tells its hub to journal a
+   * write: an image dropped in the cloud got no row until the 15-minute
+   * walk-import belt found it, so it reached a peer's laptop up to fifteen
+   * minutes later while every other kind of edit crossed in seconds.
+   *
+   * WORKSPACE-MODE ONLY, on the same reasoning as the bridge: locally
+   * `fs.watch` fires for this rename and a second source would double-load.
+   */
+  function announceWritten(rel: string): void {
+    if (!isWorkspaceMode()) return;
+    ctx.bus.emit('fs:any', rel);
+  }
+
   async function saveAssetFromStream(stream: ReadableStream<Uint8Array>): Promise<SaveAssetResult> {
     const assetsDir = path.join(paths.designRoot, 'assets');
     const tmpName = `.tmp-${crypto.randomBytes(8).toString('hex')}`;
@@ -2081,6 +2134,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       await rename(tmpAbs, fileAbs);
       assetBytesWritten += total;
       const rel = `assets/${name}`;
+      announceWritten(rel);
       // S3/R2 lane (Cloud Phase 3) — mirror the bytes so a second machine can
       // resolve them without the file riding git. Deliberately awaited but
       // never able to fail the save: the asset is already on disk, the mirror
@@ -2105,7 +2159,12 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
 
   async function saveAsset(bytes: Uint8Array): Promise<SaveAssetResult> {
     if (!bytes || bytes.length === 0) return { ok: false, status: 400, error: 'empty body' };
-    return saveAssetFromStream(new Response(bytes).body as ReadableStream<Uint8Array>);
+    // TS 5.7 widens a plain Uint8Array to Uint8Array<ArrayBufferLike>, which
+    // BodyInit rejects (it excludes SharedArrayBuffer-backed views). These
+    // bytes never are one.
+    return saveAssetFromStream(
+      new Response(bytes as Uint8Array<ArrayBuffer>).body as ReadableStream<Uint8Array>
+    );
   }
 
   // Stage F1 (feature-element-editing-robustness) — list the versioned content-
@@ -3030,15 +3089,29 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       }
     }
 
-    // Collab guard — refuse a move while a shared-doc hub provider is pinned
-    // to this slug's room (DDR-064); otherwise flush + force-drop so the room
-    // isn't left keyed to a slug that no longer resolves to a file.
+    // Collab guard — a pinned room (shared-doc hub provider attached, DDR-064)
+    // must not have its file renamed out from under it. The old behaviour was
+    // to REFUSE, which on a cell meant moving was impossible outright: cell
+    // pairing pins every canvas, so a guard written for a rare local state
+    // fired on 100% of cloud moves. Now the move COORDINATES: the sync runtime
+    // stamps the document retired-to-the-new-path (the move protocol, codec
+    // stampMovedTo) and detaches — after which the rename is exactly as safe
+    // as on an unpinned desktop. The refusal remains only for the case where
+    // no runtime can do that, because then the pin really is unownable here.
     if (hooks.isRoomPinned?.(fromSlug)) {
-      return {
-        ok: false,
-        status: 409,
-        error: 'canvas has a live shared session — cannot move while pinned to the hub',
-      };
+      const retired = (await hooks.retireCanvasForMove?.(fromSlug, toRel)) ?? false;
+      if (!retired) {
+        return {
+          ok: false,
+          status: 409,
+          error: 'canvas has a live shared session — cannot move while pinned to the hub',
+        };
+      }
+    } else {
+      // An unpinned canvas may still have a live synced document (the desktop
+      // agent lane pins nothing) — retire it too, or the old document lives on
+      // and re-materialises the canvas at its old path on every machine.
+      await hooks.retireCanvasForMove?.(fromSlug, toRel);
     }
     await hooks.flushAndDropRoom?.(fromSlug);
 
@@ -3054,6 +3127,16 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     const moved: string[] = [path.relative(paths.repoRoot, toAbs)];
     for (const artifact of canvasArtifacts({ rel, paths })) {
       if (artifact.kind === 'primary') continue; // already moved above
+      if (artifact.carryOnMove === false) {
+        // The old slug's CRDT cache — carrying it would hand the new document
+        // the retirement stamp we just wrote. Drop it; the canvas is on disk.
+        // A FILE, not a tree: `recursive` would turn a future slug regression
+        // into a directory delete, and this path is only ever one cache file.
+        await rm(artifact.abs, { force: true }).catch((err) => {
+          console.warn(`[move] could not drop the stale doc cache: ${(err as Error).message}`);
+        });
+        continue;
+      }
       const dest = relocatedName(artifact, rel, toRel, paths);
       if (path.resolve(dest) === path.resolve(artifact.abs)) continue;
       try {
@@ -3255,11 +3338,15 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       }
     }
 
-    // Collab guard for every canvas found, BEFORE any disk mutation — refuse
-    // the whole batch if even one room is pinned (a shared-doc hub provider
-    // attached, DDR-064).
+    // Collab guard for every canvas found, BEFORE any disk mutation. Same
+    // coordinated retire as moveCanvas — refuse only when a pinned room could
+    // not be retired, and retire even unpinned synced documents so none of
+    // them lives on to resurrect its canvas at the old path.
     for (const r of canvasRels) {
-      if (hooks.isRoomPinned?.(fileSlug(r))) {
+      const slug = fileSlug(r);
+      const toRel = toRelDir + r.slice(relDir.length);
+      const retired = (await hooks.retireCanvasForMove?.(slug, toRel)) ?? false;
+      if (!retired && hooks.isRoomPinned?.(slug)) {
         return {
           ok: false,
           status: 409,
@@ -3962,7 +4049,11 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     const hash = typeof input.contentHash === 'string' ? input.contentHash : undefined;
     const verb = typeof input.verb === 'string' ? input.verb : '';
     const abs = r.abs;
-    let run: ((source: string) => { source: string } & Record<string, unknown>) | null = null;
+    // Just `{ source: string }`: the `& Record<string, unknown>` was there for
+    // the rest-spread below, but an INTERFACE return (SpeedResult and friends)
+    // has no implicit index signature, so no verb's function was actually
+    // assignable — every branch failed the check the same way.
+    let run: ((source: string) => { source: string }) | null = null;
     switch (verb) {
       case 'speed': {
         const rate = Number(input.rate);
@@ -4059,6 +4150,8 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     ctx.bus.emit('activity:suppress', rel);
     try {
       const before = await Bun.file(abs).text();
+      // The switch above either assigned `run` or returned; say so to the checker.
+      if (!run) return { ok: false, status: 400, error: `unknown clip verb "${verb}"` };
       const result = await applyOnDisk(abs, run);
       const after = await Bun.file(abs).text();
       let seq: number | undefined;
@@ -5634,10 +5727,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       for (const m of matches) {
         const files = await findFiles(m.abs, m.rel, ['.tsx', '.html']);
         for (const f of files) {
-          const fname = f
-            .split('/')
-            .pop()
-            ?.replace(/\.(tsx|html)$/i, '');
+          const fname = (f.split('/').pop() ?? '').replace(/\.(tsx|html)$/i, '');
           const group = f.split('/').slice(-2, -1)[0] || folderName;
           const label = fname.toLowerCase() === 'index' ? group : fname;
           items.push({ label, path: f, group });

package/apps/studio/artboard-guides-overlay.tsx

@@ -75,7 +75,11 @@ export interface KindOverlayProps {
   visibility: OverlayVisibility;
 }
 
-export type KindOverlayRenderFn = (props: KindOverlayProps) => ReactNode;
+export type KindOverlayRenderFn = ((props: KindOverlayProps) => ReactNode) & {
+  /** React DevTools label. Every registered renderer sets it; the registry
+   *  holds plain functions, so it is not inherited from a component type. */
+  displayName?: string;
+};
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Per-kind content registry. Foundation registers nothing here — the generic

package/apps/studio/assets-s3.ts

@@ -230,7 +230,12 @@ export function createAssetMirror(
 
   const send = (method: string, key: string, body: Uint8Array | null = null) => {
     const { url, headers } = signRequest(cfg, { method, key, body });
-    return fetch(url, { method, headers, ...(body === null ? {} : { body }) });
+    // Uint8Array<ArrayBufferLike> vs BodyInit — see saveAsset in api.ts.
+    return fetch(url, {
+      method,
+      headers,
+      ...(body === null ? {} : { body: body as Uint8Array<ArrayBuffer> }),
+    });
   };
 
   return {

package/apps/studio/bin/_import-figma.mjs

@@ -372,7 +372,10 @@ export async function importBoard({
   url,
   root,
   designRootRel = '.design',
-  slug,
+  // `= undefined` is the default it already had implicitly — spelled out so the
+  // parameter reads as OPTIONAL (the studio's panel route passes no slug and
+  // relies on the `slug ?? figjam-<key>` fallback below).
+  slug = undefined,
   dryRun = false,
   confirmLarge = false,
   local = null,
@@ -1145,7 +1148,7 @@ export async function importFrames({
   url,
   root,
   designRootRel = '.design',
-  slug,
+  slug = undefined,
   dryRun = false,
   kind = 'digital',
   local = null,
@@ -1322,7 +1325,9 @@ export async function explodeArtboard({
   artboardId,
   confirmDocument = false,
   dryRun = false,
-  session,
+  // Optional: falls back to a fresh CodegenSession below. The studio route
+  // never supplies one.
+  session = undefined,
   // Injected for the same reason `assets.ts` injects `ResolveDeps`: so this can
   // be exercised without the network. A test that used the real one would spend
   // the developer's actual PAT against a fixture file key.

package/apps/studio/build.ts

@@ -354,7 +354,7 @@ export function writeCompileEntry(target: PlatformTarget): string {
 import bindingPath from ${JSON.stringify(bindingSpec)} with { type: 'file' };
 process.env.NAPI_RS_NATIVE_LIBRARY_PATH = bindingPath;
 // DDR-177 — a compiled binary must be self-contained: every runtime-spawned
-// child (canvas-build worker, asset-sweep worker) resolves its JS runtime via
+// child (the canvas-build worker) resolves its JS runtime via
 // resolveBunPath() = MAUDE_BUN_PATH || 'bun'. The desktop app launches this
 // binary with a GUI PATH that has no 'bun', and NOTHING set MAUDE_BUN_PATH —
 // so the asset sweep died with "Executable not found in $PATH" on machines

package/apps/studio/canvas-artifacts.ts

@@ -30,6 +30,14 @@ export interface CanvasArtifact {
    *  see DDR-115). Informational only; callers don't need to branch on it
    *  today, but it keeps the taxonomy legible at the one place it's listed. */
   versioned: boolean;
+  /**
+   * May this artifact follow the canvas to a new path? Absent means yes.
+   *
+   * Only the `.ydoc.bin` cache says no, and for a specific reason — see the
+   * comment at its entry. A `false` here means the mover DELETES it rather than
+   * renaming it: it belongs to the slug that is going away.
+   */
+  carryOnMove?: boolean;
 }
 
 /**
@@ -85,10 +93,23 @@ export function canvasArtifacts(input: { rel: string; paths: Paths }): CanvasArt
   });
   out.push({
     // collab/persistence.ts ydocBinPath — the `.ydoc.bin` cache under `_state/`.
+    //
+    // DROPPED ON A MOVE, NEVER CARRIED (`carryOnMove: false`). This file is the
+    // OLD document's CRDT state, and a move's last act before the rename is to
+    // stamp that document retired (`retireForMove` → `movedTo`) and flush it —
+    // so carrying it to the new slug hands the NEW document a cache whose first
+    // word is "I have moved away". Every peer that opened it released the canvas
+    // as retired, the destination path therefore never appeared anywhere else,
+    // and the move looked like "folders don't sync": each machine showed its own
+    // move and the other's canvas still sitting at the root.
+    //
+    // Nothing is lost by dropping it. `flushAndDropRoom` has already written the
+    // canvas to disk, and the new document is seeded from those bytes.
     abs: path.join(paths.designRoot, '_state', `${slug}.ydoc.bin`),
     kind: 'slug-keyed',
     rekey: true,
     versioned: false,
+    carryOnMove: false,
   });
   out.push({
     // Versioned — a real git rename on move, which is correct and expected.

package/apps/studio/canvas-build.ts

@@ -255,15 +255,10 @@ function buildCssInjector(slug: string, css: string): string {
 function importAllowlist(
   designRoot: string,
   denials: Array<{ specifier: string; reason: string }>
-): {
-  name: string;
-  setup: (builder: {
-    onResolve: (
-      opts: { filter: RegExp },
-      cb: (args: { path: string; importer: string }) => unknown
-    ) => void;
-  }) => void;
-} {
+  // Bun's own plugin type, not a hand-rolled structural twin: the local shape
+  // described a narrower `setup` than Bun.build's `plugins` accepts, so the
+  // value was not assignable at the one place it is used.
+): import('bun').BunPlugin {
   const root = path.resolve(designRoot);
   const inRoot = (p: string) => p === root || p.startsWith(root + path.sep);
   const deny = (specifier: string, reason: string): never => {
@@ -274,6 +269,16 @@ function importAllowlist(
     name: 'maude-import-allowlist',
     setup(builder) {
       builder.onResolve({ filter: /.*/ }, (args: { path: string; importer: string }) => {
+        // `data:` / `blob:` are SELF-CONTAINED — no request leaves the page, so
+        // the sandbox has nothing to say about them. They reach this hook
+        // because bundled CSS runs every `url()` through onResolve, and
+        // `url("data:image/svg+xml,…")` — the standard idiom for grain,
+        // textures and tiny inline icons — is neither relative nor absolute,
+        // so the bare-specifier branch below used to reject it with the
+        // npm-packages message (spike finding M9: a design system's always-on
+        // film-grain took the whole canvas build down). The denial is for
+        // schemes that go to the NETWORK; these never do.
+        if (/^(data|blob):/i.test(args.path)) return { path: args.path, external: true };
         const importer = args.importer ? path.resolve(args.importer) : '';
         // Our own modules (canvas-lib and its graph) resolve normally.
         if (importer && !inRoot(importer)) return null;

package/apps/studio/canvas-comment-mount.tsx

@@ -30,7 +30,6 @@ import {
   Component,
   type ComponentType,
   createElement,
-  Fragment,
   type ReactNode,
   useCallback,
   useEffect,
@@ -494,20 +493,20 @@ export interface MountCanvasOptions {
 // from the one DCArtboard (canvas-lib) consumes. Same reasoning the real
 // ToolProvider lives in DesignCanvas, not in this layer's MaybeToolProvider.
 function buildCanvasTree(Canvas: ComponentType, file: string | undefined): ReactNode {
-  return createElement(
-    MaybeToolProvider,
-    // DDR-223 — this layer's provider instance keeps the DDR-187 posture:
-    // bare DS specimens stay ALIVE with native cursors (there is no palette,
-    // no editing, nothing to boot into edit for). On a UI canvas the inner
-    // canvas-lib ToolProvider (a separate bundle, separate context) owns the
-    // real boot posture (edit/`move`); this ancestor instance only carries the
-    // comment tool + claim layer and converges on the first tool keydown.
-    { initial: 'browse' as const },
-    createElement(
-      MaybeSelectionSetProvider,
-      null,
-      createElement(CommentHost, { file }, createElement(Canvas))
-    )
+  // DDR-223 — this layer's provider instance keeps the DDR-187 posture:
+  // bare DS specimens stay ALIVE with native cursors (there is no palette,
+  // no editing, nothing to boot into edit for). On a UI canvas the inner
+  // canvas-lib ToolProvider (a separate bundle, separate context) owns the
+  // real boot posture (edit/`move`); this ancestor instance only carries the
+  // comment tool + claim layer and converges on the first tool keydown.
+  return (
+    <MaybeToolProvider initial="browse">
+      <MaybeSelectionSetProvider>
+        <CommentHost file={file}>
+          <Canvas />
+        </CommentHost>
+      </MaybeSelectionSetProvider>
+    </MaybeToolProvider>
   );
 }
 
@@ -576,20 +575,20 @@ export class CanvasErrorBoundary extends Component<
   },
   { hasError: boolean }
 > {
-  state = { hasError: false };
+  override state = { hasError: false };
   static getDerivedStateFromError(): { hasError: boolean } {
     return { hasError: true };
   }
-  componentDidCatch(): void {
+  override componentDidCatch(): void {
     this.props.onError();
   }
-  componentDidUpdate(prev: { attempt: number }): void {
+  override componentDidUpdate(prev: { attempt: number }): void {
     // A new canvas (new attempt) arrived → clear the error and try rendering it.
     if (prev.attempt !== this.props.attempt && this.state.hasError) {
       this.setState({ hasError: false });
     }
   }
-  render(): ReactNode {
+  override render(): ReactNode {
     if (this.state.hasError) return this.props.fallback();
     return this.props.children;
   }
@@ -648,16 +647,14 @@ function CanvasHmrRuntime({
     return LG ? buildCanvasTree(LG, file) : null;
   }, [file]);
 
-  return createElement(
-    Fragment,
-    null,
-    createElement(
-      CanvasErrorBoundary,
-      { attempt, onError: handleError, fallback },
-      // key=attempt → each soft-reload remounts a fresh subtree (and resets the
-      // boundary's child), matching the clean-slate semantics of a full reload.
-      createElement(OkSignal, { key: attempt, Canvas: canvas, file, onOk: handleOk })
-    ),
-    holding.on ? createElement(HmrHoldingToast, { message: holding.message }) : null
+  return (
+    <>
+      <CanvasErrorBoundary attempt={attempt} onError={handleError} fallback={fallback}>
+        {/* key=attempt → each soft-reload remounts a fresh subtree (and resets the
+            boundary's child), matching the clean-slate semantics of a full reload. */}
+        <OkSignal key={attempt} Canvas={canvas} file={file} onOk={handleOk} />
+      </CanvasErrorBoundary>
+      {holding.on ? <HmrHoldingToast message={holding.message} /> : null}
+    </>
   );
 }

package/apps/studio/canvas-icons.tsx

@@ -8,7 +8,7 @@
  *             32 × 32, leaving 8 px of optical padding on every side.
  */
 
-import type { SVGProps } from 'react';
+import type { JSX, SVGProps } from 'react';
 
 type IconProps = SVGProps<SVGSVGElement> & { size?: number };