@1agh/maude 0.23.0 → 0.24.0

package/plugins/design/dev-server/test/sync-untrusted.test.ts

@@ -0,0 +1,104 @@
+// T4.5 (DDR-054 §3 F3) — untrusted-marker for sync-written files. Verifies the
+// `_untrusted/INDEX.json` marker + the managed `.claudeignore` block: written
+// for the syncable set, cleared when empty, stale entries dropped on re-write,
+// and user-authored `.claudeignore` content outside the block preserved.
+
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+
+import type { Context } from '../context.ts';
+import type { CanvasDescriptor } from '../sync/index.ts';
+import { clearUntrustedMarkers, writeUntrustedMarkers } from '../sync/untrusted.ts';
+
+let repoRoot: string;
+let designRoot: string;
+
+beforeEach(() => {
+  repoRoot = mkdtempSync(join(tmpdir(), 'untrusted-'));
+  designRoot = join(repoRoot, '.design');
+  mkdirSync(designRoot, { recursive: true });
+});
+afterEach(() => {
+  /* tmpdir — left for the OS to reap */
+});
+
+function ctxOf(): Context {
+  return { paths: { repoRoot, designRoot } } as unknown as Context;
+}
+
+function desc(slug: string, body: string): CanvasDescriptor {
+  return {
+    slug,
+    html: join(designRoot, body),
+    comments: join(designRoot, '_comments', `${slug}.json`),
+    annotations: join(designRoot, `${slug}.annotations.svg`),
+    meta: join(designRoot, body.replace(/\.(tsx|html)$/i, '.meta.json')),
+    css: join(designRoot, body.replace(/\.(tsx|html)$/i, '.css')),
+  };
+}
+
+const HUB = 'https://hub.example.com';
+
+describe('writeUntrustedMarkers — T4.5', () => {
+  test('writes INDEX.json + a managed .claudeignore block for the synced set', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+
+    const indexAbs = join(designRoot, '_untrusted', 'INDEX.json');
+    expect(existsSync(indexAbs)).toBe(true);
+    const index = JSON.parse(readFileSync(indexAbs, 'utf8'));
+    expect(index.hubUrl).toBe(HUB);
+    expect(index.canvases[0].slug).toBe('ui-a');
+    expect(index.canvases[0].body).toBe('.design/ui/a.tsx');
+    expect(index.canvases[0].meta).toBe('.design/ui/a.meta.json'); // Gap 2: meta is untrusted too
+    expect(index.canvases[0].css).toBe('.design/ui/a.css'); // Gap 3: css too
+    expect(index.note.toLowerCase()).toContain('untrusted');
+
+    const ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('maude:sync-untrusted begin');
+    expect(ci).toContain('.design/ui/a.tsx');
+    expect(ci).toContain('.design/ui-a.annotations.svg');
+    expect(ci).toContain('.design/ui/a.meta.json');
+    expect(ci).toContain('.design/ui/a.css');
+    expect(ci).toContain('maude:sync-untrusted end');
+  });
+
+  test('re-write with a smaller set drops the stale entry', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx'), desc('ui-b', 'ui/b.tsx')], HUB);
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    const ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('.design/ui/a.tsx');
+    expect(ci).not.toContain('.design/ui/b.tsx');
+    // Only one managed block (no accumulation).
+    expect(ci.match(/maude:sync-untrusted begin/g)?.length).toBe(1);
+  });
+
+  test('empty set clears INDEX.json + the .claudeignore block', () => {
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    writeUntrustedMarkers(ctx, [], HUB);
+    expect(existsSync(join(designRoot, '_untrusted', 'INDEX.json'))).toBe(false);
+    // .claudeignore had only our block → removed entirely.
+    expect(existsSync(join(repoRoot, '.claudeignore'))).toBe(false);
+  });
+
+  test('preserves user-authored .claudeignore content outside the block', () => {
+    writeFileSync(join(repoRoot, '.claudeignore'), 'secrets/\n*.key\n');
+    const ctx = ctxOf();
+    writeUntrustedMarkers(ctx, [desc('ui-a', 'ui/a.tsx')], HUB);
+    let ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('secrets/');
+    expect(ci).toContain('*.key');
+    expect(ci).toContain('.design/ui/a.tsx');
+    // Clearing leaves the user content intact.
+    clearUntrustedMarkers(ctx);
+    ci = readFileSync(join(repoRoot, '.claudeignore'), 'utf8');
+    expect(ci).toContain('secrets/');
+    expect(ci).not.toContain('.design/ui/a.tsx');
+    expect(ci).not.toContain('maude:sync-untrusted');
+  });
+});

package/plugins/design/dev-server/test/use-tool-mode.test.tsx

@@ -12,7 +12,7 @@ import {
 } from '../use-tool-mode.tsx';
 
 describe('use-tool-mode / static', () => {
-  test('DEFAULT_TOOLS exposes V/H/C + Phase 5.1 draw set B/R/O/A/E', () => {
+  test('DEFAULT_TOOLS exposes V/H/C + draw set B/R/O/N/A/T/E (Phase 21 sticky+text)', () => {
     expect(DEFAULT_TOOLS.map((t) => t.id)).toEqual([
       'move',
       'hand',
@@ -20,26 +20,54 @@ describe('use-tool-mode / static', () => {
       'pen',
       'rect',
       'ellipse',
+      'sticky',
       'arrow',
+      'text',
       'eraser',
     ]);
-    expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual(['V', 'H', 'C', 'B', 'R', 'O', 'A', 'E']);
+    expect(DEFAULT_TOOLS.map((t) => t.shortcut)).toEqual([
+      'V',
+      'H',
+      'C',
+      'B',
+      'R',
+      'O',
+      'N',
+      'A',
+      'T',
+      'E',
+    ]);
   });
 
   test('DEFAULT_TOOLS is immutable (Object.freeze applied)', () => {
     expect(Object.isFrozen(DEFAULT_TOOLS)).toBe(true);
   });
 
-  test('default cursors per tool', () => {
+  test('default cursors per tool (Phase 21 — custom SVG cursors + native fallback)', () => {
     const byId = Object.fromEntries(DEFAULT_TOOLS.map((t) => [t.id, t.cursor]));
+    // Move keeps the system arrow; every other tool ships a data-URI SVG cursor
+    // that falls back to the right native cursor if the image is rejected.
     expect(byId.move).toBe('default');
-    expect(byId.hand).toBe('grab');
-    expect(byId.comment).toBe('crosshair');
-    expect(byId.pen).toBe('crosshair');
-    expect(byId.rect).toBe('crosshair');
-    expect(byId.ellipse).toBe('crosshair');
-    expect(byId.arrow).toBe('crosshair');
-    expect(byId.eraser).toBe('cell');
+    for (const id of [
+      'hand',
+      'comment',
+      'pen',
+      'rect',
+      'ellipse',
+      'sticky',
+      'arrow',
+      'text',
+      'eraser',
+    ]) {
+      expect(byId[id]).toContain('url("data:image/svg+xml,');
+      expect(byId[id]).toContain('32'); // 32×32 cursor
+    }
+    // Native fallbacks are preserved after the custom URL.
+    expect(byId.hand).toMatch(/, grab$/);
+    expect(byId.text).toMatch(/, text$/);
+    expect(byId.eraser).toMatch(/, cell$/);
+    expect(byId.pen).toMatch(/, crosshair$/);
+    expect(byId.rect).toMatch(/, crosshair$/);
   });
 });
 

package/plugins/design/dev-server/tool-palette.tsx

@@ -35,13 +35,13 @@ const PALETTE_CSS = `
   transform: translateX(-50%);
   display: flex;
   align-items: stretch;
-  background: var(--u-bg-0, var(--bg-0, #ffffff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 12px;
-  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
+  color: var(--maude-chrome-fg-0, #1a1a1a);
   z-index: 6;
   user-select: none;
   /* Intentionally NO overflow:hidden — the zoom popover (.dc-tp-popover) is
@@ -56,7 +56,7 @@ const PALETTE_CSS = `
 }
 .dc-tool-palette .dc-tp-sep {
   width: 1px;
-  background: var(--u-border-subtle, rgba(0,0,0,0.08));
+  background: var(--maude-chrome-border, rgba(0,0,0,0.08));
   margin: 6px 0;
 }
 .dc-tool-palette button {
@@ -70,14 +70,14 @@ const PALETTE_CSS = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--fg-1, rgba(40,30,20,0.75));
+  color: var(--maude-chrome-fg-1, rgba(40,30,20,0.75));
   cursor: pointer;
   position: relative;
   transition: background-color 80ms linear, color 80ms linear;
 }
 .dc-tool-palette button:hover {
   background: color-mix(in oklab, var(--maude-hud-accent, #d63b1f) 8%, transparent);
-  color: var(--fg-0, #1a1a1a);
+  color: var(--maude-chrome-fg-0, #1a1a1a);
 }
 .dc-tool-palette button:focus-visible {
   outline: 2px solid var(--maude-hud-accent, #d63b1f);
@@ -117,7 +117,7 @@ const PALETTE_CSS = `
   height: 6px;
   background: var(--maude-hud-accent, #d63b1f);
   border-radius: 1px;
-  box-shadow: 0 0 0 1px var(--bg-0, #ffffff);
+  box-shadow: 0 0 0 1px var(--maude-chrome-bg-0, #ffffff);
   opacity: 0;
   transition: opacity 50ms linear 50ms;
   pointer-events: none;
@@ -132,7 +132,7 @@ const PALETTE_CSS = `
   min-width: 56px;
   padding: 0 8px;
   font-variant-numeric: tabular-nums;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   font-size: 11px;
   letter-spacing: 0.04em;
   border-radius: 6px;
@@ -145,16 +145,16 @@ const PALETTE_CSS = `
   position: absolute;
   right: 4px;
   bottom: 44px;
-  background: var(--u-bg-0, var(--bg-0, #ffffff));
-  border: 1px solid var(--u-fg-0, #1c1917);
+  background: var(--maude-chrome-bg-0, #ffffff);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   border-radius: 8px;
-  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
+  box-shadow: 0 6px 24px var(--maude-chrome-shadow, color-mix(in oklab, #1c1917 10%, transparent));
   display: flex;
   flex-direction: column;
   padding: 4px;
   min-width: 160px;
   z-index: 7;
-  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
 }
 .dc-tp-popover button {
   appearance: none;
@@ -171,7 +171,7 @@ const PALETTE_CSS = `
   gap: 16px;
   width: 100%;
 }
-.dc-tp-popover button:hover { background: rgba(0,0,0,0.04); }
+.dc-tp-popover button:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 5%, transparent); }
 .dc-tp-popover .dc-tp-kbd {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
@@ -189,7 +189,9 @@ function ensurePaletteStyles(): void {
 }
 
 const NAV_TOOLS = ['move', 'hand', 'comment'] as const;
-const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'arrow', 'eraser'] as const;
+// Phase 21 — sticky clusters with the paper primitives (after ellipse); text
+// sits at the constructive end before the destructive eraser, which stays last.
+const DRAW_TOOLS = ['pen', 'rect', 'ellipse', 'sticky', 'arrow', 'text', 'eraser'] as const;
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Component

package/plugins/design/dev-server/undo-hud.tsx

@@ -23,11 +23,11 @@ const HUD_CSS = `
   z-index: 7;
   pointer-events: none;
   padding: 6px 10px;
-  background: var(--bg-2, rgba(20, 20, 20, 0.85));
-  color: var(--fg-1, rgba(255, 255, 255, 0.85));
-  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
+  background: var(--maude-chrome-bg-2, rgba(20, 20, 20, 0.85));
+  color: var(--maude-chrome-fg-1, rgba(255, 255, 255, 0.85));
+  border: 1px solid var(--maude-chrome-border, rgba(255, 255, 255, 0.08));
   border-radius: 6px;
-  font: 11px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font: 11px var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   letter-spacing: 0.02em;
   user-select: none;
   opacity: 0;

package/plugins/design/dev-server/undo-stack.ts

@@ -203,14 +203,30 @@ interface StoreHost {
 
 /**
  * Prefer `window.top` so all canvas iframes (children of the dev-server
- * shell) read + write the same Map. Falls back to `window` (when top is
- * cross-origin — shouldn't happen in our same-origin setup), then to
- * `globalThis` (Node / Bun test runtime where window is absent).
+ * shell) read + write the same Map. Falls back to `window` when top is
+ * cross-origin — which IS the case under the T2 (9.1-A) segregated canvas
+ * origin: the canvas iframe and the shell are different origins, so any
+ * PROPERTY access on `window.top` throws SecurityError. Then `globalThis`
+ * (Node / Bun test runtime where window is absent).
+ *
+ * Note: merely reading `window.top` (the reference) never throws — only
+ * touching a property of a cross-origin window does. So the guard MUST poke a
+ * property inside the try, or the cross-origin throw escapes into React render
+ * (it did: the UndoStackProvider's useRef initializer crashed the whole canvas
+ * mount to 0 children). Under A1 each iframe falls back to its own `window`
+ * store — undo works per-session; cross-close/reopen sharing via window.top is
+ * intentionally dropped for the origin isolation (see DDR-0xx / phase-9.1).
  */
 function getStoreHost(): StoreHost {
   if (typeof window !== 'undefined') {
     try {
-      return (window.top ?? window) as unknown as StoreHost;
+      const top = window.top;
+      if (top && top !== window) {
+        // Poke a property — throws if `top` is a cross-origin window.
+        void (top as unknown as StoreHost).__maude_undo_stacks;
+        return top as unknown as StoreHost;
+      }
+      return window as unknown as StoreHost;
     } catch {
       return window as unknown as StoreHost;
     }

package/plugins/design/dev-server/use-annotation-resize.tsx

@@ -22,6 +22,7 @@ import {
   type EllipseStroke,
   type PenStroke,
   type RectStroke,
+  type StickyStroke,
   type Stroke,
   type StrokesStoreValue,
   strokeBBox,
@@ -58,9 +59,17 @@ function ensureResizeStyles(): void {
 
 type Corner = 'nw' | 'ne' | 'sw' | 'se' | 'ep1' | 'ep2';
 
-/** Stroke types that expose resize handles in v1. Text inherits anchor bbox. */
-function isResizable(s: Stroke): s is RectStroke | EllipseStroke | ArrowStroke | PenStroke {
-  return s.tool === 'rect' || s.tool === 'ellipse' || s.tool === 'arrow' || s.tool === 'pen';
+/** Stroke types that expose resize handles. Text inherits its anchor bbox. */
+function isResizable(
+  s: Stroke
+): s is RectStroke | EllipseStroke | ArrowStroke | PenStroke | StickyStroke {
+  return (
+    s.tool === 'rect' ||
+    s.tool === 'ellipse' ||
+    s.tool === 'arrow' ||
+    s.tool === 'pen' ||
+    s.tool === 'sticky'
+  );
 }
 
 /**
@@ -75,7 +84,9 @@ function resizeStroke(
   wx: number,
   wy: number
 ): Partial<Stroke> | null {
-  if (start.tool === 'rect') {
+  if (start.tool === 'rect' || start.tool === 'sticky') {
+    // Sticky resizes exactly like a rect — it shares x / y / w / h. Text
+    // re-wraps inside the foreignObject automatically (no special handling).
     const bbox = { x: start.x, y: start.y, w: start.w, h: start.h };
     const left = corner === 'nw' || corner === 'sw' ? wx : bbox.x;
     const right = corner === 'ne' || corner === 'se' ? wx : bbox.x + bbox.w;
@@ -86,7 +97,7 @@ function resizeStroke(
       y: Math.min(top, bottom),
       w: Math.abs(right - left),
       h: Math.abs(bottom - top),
-    } as Partial<RectStroke>;
+    } as Partial<RectStroke | StickyStroke>;
   }
   if (start.tool === 'ellipse') {
     // Treat the four corners as the bbox of the ellipse. Drag any corner →

package/plugins/design/dev-server/use-tool-mode.tsx

@@ -21,6 +21,7 @@ import {
   useState,
 } from 'react';
 
+import { TOOL_CURSORS } from './canvas-cursors.ts';
 import type { Tool } from './input-router.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -35,19 +36,21 @@ export interface ToolDescriptor {
   cursor: string;
 }
 
+// Phase 21 — every tool ships a custom 32×32 SVG cursor (canvas-cursors.ts)
+// with a white outline halo so the glyph reads on any background. The native
+// crosshair/text/cell were thin + tiny ("pen almost invisible"); these mirror
+// the tool-palette icons. `move` keeps the system arrow on purpose.
 export const DEFAULT_TOOLS: readonly ToolDescriptor[] = Object.freeze([
-  { id: 'move', label: 'Move', shortcut: 'V', cursor: 'default' },
-  { id: 'hand', label: 'Hand', shortcut: 'H', cursor: 'grab' },
-  { id: 'comment', label: 'Comment', shortcut: 'C', cursor: 'crosshair' },
-  // Phase 5 — draw / annotation tools. Cursors stay as `crosshair` for pen /
-  // rect / arrow (the pen-tip glyph is reserved for the system text caret).
-  // Eraser uses `cell` as the closest cross-browser substitute for a rubber
-  // affordance (no native rubber cursor exists).
-  { id: 'pen', label: 'Pen', shortcut: 'B', cursor: 'crosshair' },
-  { id: 'rect', label: 'Rect', shortcut: 'R', cursor: 'crosshair' },
-  { id: 'ellipse', label: 'Ellipse', shortcut: 'O', cursor: 'crosshair' },
-  { id: 'arrow', label: 'Arrow', shortcut: 'A', cursor: 'crosshair' },
-  { id: 'eraser', label: 'Eraser', shortcut: 'E', cursor: 'cell' },
+  { id: 'move', label: 'Move', shortcut: 'V', cursor: TOOL_CURSORS.move },
+  { id: 'hand', label: 'Hand', shortcut: 'H', cursor: TOOL_CURSORS.hand },
+  { id: 'comment', label: 'Comment', shortcut: 'C', cursor: TOOL_CURSORS.comment },
+  { id: 'pen', label: 'Pen', shortcut: 'B', cursor: TOOL_CURSORS.pen },
+  { id: 'rect', label: 'Rect', shortcut: 'R', cursor: TOOL_CURSORS.rect },
+  { id: 'ellipse', label: 'Ellipse', shortcut: 'O', cursor: TOOL_CURSORS.ellipse },
+  { id: 'sticky', label: 'Sticky', shortcut: 'N', cursor: TOOL_CURSORS.sticky },
+  { id: 'arrow', label: 'Arrow', shortcut: 'A', cursor: TOOL_CURSORS.arrow },
+  { id: 'text', label: 'Text', shortcut: 'T', cursor: TOOL_CURSORS.text },
+  { id: 'eraser', label: 'Eraser', shortcut: 'E', cursor: TOOL_CURSORS.eraser },
 ]);
 
 interface ToolContextValue {

package/plugins/design/dev-server/ws.ts

@@ -25,6 +25,16 @@ export type WsData =
       remote: string;
       kind: 'collab';
       slug: string;
+    }
+  | {
+      // T2 (9.1-A) — HMR-only socket for the segregated canvas origin. Receives
+      // ONLY `canvas-hmr` broadcasts; never the privileged inspector feed
+      // (comments / ai-activity / git-lifecycle / sync:status / selection) and
+      // ignores all inbound messages. Hub-pushed canvas code on the canvas
+      // origin can open this, but it leaks nothing and mutates nothing.
+      id: string;
+      remote: string;
+      kind: 'canvas-hmr';
     };
 
 /**
@@ -77,6 +87,8 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
     }
   }
 
+  // Privileged inspector feed — comments, selection, ai-activity, git-lifecycle,
+  // sync:status, fs:*. ONLY the same-origin inspector clients (the shell) get it.
   function broadcast(payload: unknown) {
     const msg = typeof payload === 'string' ? payload : JSON.stringify(payload);
     for (const ws of clients) {
@@ -85,6 +97,17 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
     }
   }
 
+  // HMR feed — `canvas-hmr` reload signals. Safe to deliver to the segregated
+  // canvas origin, so both inspector (shell) AND canvas-hmr (canvas iframe)
+  // sockets receive it. T2 (9.1-A).
+  function broadcastHmr(payload: unknown) {
+    const msg = typeof payload === 'string' ? payload : JSON.stringify(payload);
+    for (const ws of clients) {
+      if (ws.data.kind !== 'inspector' && ws.data.kind !== 'canvas-hmr') continue;
+      send(ws, msg);
+    }
+  }
+
   // Wire bus -> WS broadcasts. inspect.ts emits 'selected' / 'active' after every
   // state write; fs-watch.ts emits 'fs:*' on every save.
   ctx.bus.on('selected', (sel) => broadcast({ type: 'selected', selected: sel }));
@@ -106,9 +129,17 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
   // canvas iframes both subscribe.
   ctx.bus.on('git-lifecycle', (payload: unknown) => broadcast({ type: 'git-lifecycle', payload }));
 
+  // Phase 9 Task 8 — hub-down offline mode. The linked-mode sync runtime emits
+  // 'sync:status' on every connection-state change (online / connecting /
+  // offline / offline-long, queued-op count, conflict notices). Browser tabs
+  // render the offline/synced/escalation banner from this. Solo mode never
+  // emits, so this is a no-op for unlinked projects.
+  ctx.bus.on('sync:status', (payload: unknown) => broadcast({ type: 'sync:status', payload }));
+
   // HMR broadcaster — turns fs:any change events into `canvas-hmr` messages.
   // The iframe-side client (in _shell.html) decides reload strategy from `mode`.
-  createHmrBroadcaster(ctx, (msg) => broadcast(msg));
+  // Uses broadcastHmr so the segregated canvas origin's HMR-only sockets get it.
+  createHmrBroadcaster(ctx, (msg) => broadcastHmr(msg));
 
   // Bind a connection to its room. Stored per-socket so close() can find the
   // right room to disconnect from. Multiplexed via ws.data.id.
@@ -138,6 +169,11 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
         await room.connect(conn);
         return;
       }
+      if (ws.data.kind === 'canvas-hmr') {
+        // HMR-only: join the broadcast set but get NO inspector snapshot.
+        clients.add(ws);
+        return;
+      }
       clients.add(ws);
       send(ws, { type: 'snapshot', state: inspect.state });
     },
@@ -159,6 +195,9 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Colla
       clients.delete(ws);
     },
     async message(ws, raw) {
+      // HMR-only canvas-origin socket: never accepts inbound messages (the
+      // canvas iframe only listens for canvas-hmr; it never sends).
+      if (ws.data.kind === 'canvas-hmr') return;
       if (ws.data.kind === 'collab') {
         const binding = collabConns.get(ws.data.id);
         if (!binding) return;

package/plugins/design/templates/_shell.html

@@ -28,6 +28,26 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Canvas</title>
+    <script>
+      // T2 (9.1 / DDR-060 F1 re-audit) — best-effort WebRTC denial in the canvas
+      // iframe. CSP `webrtc 'block'` is specified but UNIMPLEMENTED in shipping
+      // Chrome/Firefox as of 2026 (Chromium #40188662, Firefox bug 1783489), so
+      // it is currently a no-op, and `connect-src 'self'` does NOT cover WebRTC
+      // (it is not Fetch). Hub-pushed canvas JS could otherwise exfil via
+      // ICE/STUN. Locking these to undefined raises the bar against the naive
+      // case before any canvas module loads. NOT bulletproof — a nested
+      // same-origin (about:blank) frame can re-acquire them — so WebRTC exfil
+      // stays a DOCUMENTED residual of opt-in linked mode (see the linked-mode
+      // README banner). `webrtc 'block'` stays in the CSP for when browsers
+      // enforce it. The canvas runtime itself uses zero WebRTC.
+      for (var __k of ['RTCPeerConnection', 'webkitRTCPeerConnection', 'RTCDataChannel']) {
+        try {
+          Object.defineProperty(window, __k, { value: undefined, configurable: false, writable: false });
+        } catch (_) {
+          /* already locked / not present */
+        }
+      }
+    </script>
     <style>
       :root {
         color-scheme: light dark;
@@ -150,13 +170,28 @@
               const v = msg.version || Date.now();
               // Match by exact filename when we have one; otherwise refresh all.
               const targetFile = (msg.file || '').split('/').pop();
+              let matched = false;
               for (const link of document.querySelectorAll('link[rel="stylesheet"]')) {
                 const href = link.getAttribute('href') || '';
                 if (!targetFile || href.includes(targetFile)) {
                   const base = href.split('?')[0];
                   link.setAttribute('href', base + '?v=' + v);
+                  matched = true;
                 }
               }
+              // A per-canvas `<slug>.css` imported by the TSX is INLINED into the
+              // canvas module as a <style> by Bun.build — there is no <link> to
+              // swap, so the loop above matches nothing and the edit is silently
+              // dropped until a manual hard-reload (RCA hmr-inlined-css-dropped).
+              // When nothing matched AND the changed CSS lives in THIS canvas's
+              // directory, reload so the rebuilt module re-inlines the fresh CSS.
+              // Scoped to same-dir so an unrelated specimen's CSS write doesn't
+              // reload every open tab.
+              if (!matched && msg.file && canvasRel) {
+                const cssDir = msg.file.replace(/[^/]+$/, '');
+                const canvasDir = canvasRel.replace(/[^/]+$/, '');
+                if (cssDir === canvasDir) location.reload();
+              }
             } else if (msg.mode === 'module' || msg.mode === 'hard') {
               // Only reload when the change touches *this* canvas (or `_lib`).
               if (msg.mode === 'hard' || !msg.file || (canvasRel && msg.file === canvasRel)) {
@@ -253,11 +288,24 @@
               'Canvas module at ' + canvasUrl + ' has no default export (or it is not a component).'
             );
           }
+          const rootEl = document.getElementById('canvas-root');
           mountCanvas(Canvas, {
-            rootEl: document.getElementById('canvas-root'),
+            rootEl,
             file: designRel + '/' + canvasRel,
             commentsEnabled,
           });
+          // T2 (9.1-A) diagnostic — tell the parent the canvas mounted + how many
+          // root children it rendered. Lets the shell (and tooling) confirm a
+          // cross-origin canvas actually rendered, which a parent-page screenshot
+          // of an OOPIF cannot show. Harmless heartbeat; ignored if unhandled.
+          setTimeout(() => {
+            try {
+              window.parent.postMessage(
+                { dgn: 'canvas-mounted', file: designRel + '/' + canvasRel, children: rootEl ? rootEl.children.length : 0 },
+                '*'
+              );
+            } catch (e) { /* parent gone */ }
+          }, 800);
         } catch (err) {
           showError((err && err.stack) || String(err));
         }

package/plugins/design/templates/canvas.tsx.template

@@ -29,6 +29,19 @@
  * server (canvas-pipeline.ts pass 1). Don't author them by hand — they'd be
  * stripped + replaced. `/design:handoff` strips them again before the registry
  * sidecar leaves dev (production has no business with dev-time scaffolding).
+ *
+ * Theme model (two ISOLATED layers — system-review D9):
+ *   • Canvas-shell CHROME (workspace plane, floating toolbar, minimap, zoom
+ *     HUD, halos) auto-follows the Maude dev-server theme via `data-maude-theme`
+ *     on the iframe <html> — the dev-server sets it; never theme the chrome
+ *     from canvas code.
+ *   • ARTBOARDS keep THEIR design system's theme. The `data-theme` on the
+ *     `{{ROOT_CLASS}}` wrapper pins this artboard to a specific DS theme block;
+ *     leave it at the DS default ({{THEME_DEFAULT}}). Do NOT hardcode a theme
+ *     the DS doesn't intend — a reviewer flips an individual artboard at will
+ *     via right-click → Theme ▸ Light / Dark / Follow chrome (enabled when the
+ *     DS ships both light + dark token blocks). Only pin a non-default theme
+ *     when the canvas is intentionally single-theme.
  */
 
 import { useState } from "react";