@1agh/maude 0.22.2 → 0.24.0

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

@@ -4,8 +4,9 @@
 // the route table without rewriting this module. The `fetch` export is the
 // top-level fall-through for paths Bun's `routes` field doesn't cover.
 
-import { watch } from 'node:fs';
-import { join, posix } from 'node:path';
+import { createHash } from 'node:crypto';
+import { existsSync, readFileSync, watch } from 'node:fs';
+import { dirname, join, posix, resolve, sep } from 'node:path';
 
 import type { Api } from './api.ts';
 import { buildCanvasModule } from './canvas-build.ts';
@@ -52,6 +53,67 @@ function ext(p: string): string {
   return i === -1 ? '' : p.slice(i).toLowerCase();
 }
 
+/**
+ * T2 (9.1-A) — build the strict CSP for the canvas-content shell. Every inline
+ * `<script>` (importmap, module bootstrap, inspector) is allowlisted by sha256
+ * hash so we never resort to `'unsafe-inline'`. `connect-src 'self'` is locked
+ * to the document's own origin so hub-pushed JSX can't beacon out / hit IMDS /
+ * LAN — and `'self'` covers same-origin `ws:`/`wss:` (CSP3), so the HMR + collab
+ * sockets (which connect to the canvas origin the iframe loads from) still work
+ * while `ws://attacker` / `wss://attacker` exfil is refused. `style-src
+ * 'unsafe-inline'` is intentional —
+ * specimens use `style={{…}}` attributes + injected `<style>`; style injection
+ * is not the F1 RCE vector (script + connect are). No `'unsafe-eval'` — the
+ * POC verifies the runtime (motion/pixi/Bun.build output) doesn't need it.
+ *
+ * `webrtc 'block'` (A6, DDR-060 F1 re-audit) — `connect-src` governs only
+ * fetch/XHR/WebSocket/sendBeacon; WebRTC does NOT flow through Fetch, so an
+ * `RTCPeerConnection` with an attacker STUN/TURN hostname smuggles bytes out via
+ * ICE DNS/STUN even under `connect-src 'self'`. ⚠️ This directive is specified
+ * (CSP3) but UNIMPLEMENTED in shipping Chrome/Firefox as of 2026 (Chromium
+ * #40188662, Firefox bug 1783489) — currently a NO-OP. The enforceable control
+ * today is the RTC-constructor lockout in `templates/_shell.html`; this directive
+ * is kept for when browsers honor it. WebRTC + self-navigation exfil remain
+ * DOCUMENTED residuals of opt-in linked mode (the reachable data is collab
+ * metadata, not repo files — traversal is closed). Do NOT treat this as a closed
+ * exfil lane. The canvas runtime itself uses zero WebRTC.
+ *
+ * `frame-ancestors` (A6) — restricts who may embed the canvas document. The
+ * legit embedder is the main dev-server origin, so we allowlist exactly that
+ * (`mainOrigin`) plus `'self'`; an arbitrary external page can no longer reframe
+ * the canvas. When `mainOrigin` is unknown (tests / pre-boot) the directive is
+ * OMITTED rather than set to `'self'` — `'self'` alone would forbid the legit
+ * cross-origin embed and blank the canvas.
+ */
+export function cspForCanvasShell(html: string, mainOrigin?: string): string {
+  const hashes: string[] = [];
+  // Match inline <script> blocks only (no src=). `[^>]*` excludes any with src.
+  const re = /<script(?![^>]*\bsrc=)[^>]*>([\s\S]*?)<\/script>/gi;
+  let m: RegExpExecArray | null;
+  // biome-ignore lint/suspicious/noAssignInExpressions: standard regex-exec loop.
+  while ((m = re.exec(html)) !== null) {
+    const body = m[1] ?? '';
+    const digest = createHash('sha256').update(body, 'utf8').digest('base64');
+    hashes.push(`'sha256-${digest}'`);
+  }
+  const scriptSrc = ["'self'", ...hashes].join(' ');
+  const directives = [
+    "default-src 'none'",
+    `script-src ${scriptSrc}`,
+    "connect-src 'self'",
+    "img-src 'self' data: blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "font-src 'self' data:",
+    "frame-src 'self'",
+    "base-uri 'none'",
+    "object-src 'none'",
+    "form-action 'none'",
+    "webrtc 'block'",
+  ];
+  if (mainOrigin) directives.push(`frame-ancestors 'self' ${mainOrigin}`);
+  return directives.join('; ');
+}
+
 function safePathUnderRoot(reqUrl: string, repoRoot: string): string | null {
   let pathname: string;
   try {
@@ -71,16 +133,60 @@ const DIST_DIR = join(HERE, 'dist');
 const CLIENT_DIR = join(HERE, 'client');
 const TEMPLATES_DIR = join(HERE, '..', 'templates');
 
-// In-memory transpile cache. Key = absolute canvas path; value = the last
-// transpile keyed by mtime. Repeat GETs against an unchanged source skip the
-// parse + ID-injection + Bun.Transpiler entirely.
+// In-memory transpile cache. Key = absolute canvas path. Repeat GETs against an
+// unchanged source skip the parse + ID-injection + Bun.Transpiler + Bun.build
+// entirely.
 interface CanvasCacheEntry {
-  mtimeMs: number;
+  /** Freshness signature over the .tsx AND every directly-imported sibling/
+   *  relative `.css` it inlines (Bun.build extracts `import "./x.css"` into a
+   *  `<style>` tag — there is no `<link>`). Rebuild when ANY of them changes.
+   *  A prior version keyed only on the .tsx mtime, so editing a sibling
+   *  `<canvas>.css` was a cache HIT: the HMR reload (mode:'module') re-served the
+   *  stale inlined CSS and the edit only showed once the .tsx itself changed.
+   *  (DDR-064 collab dogfooding finding, 2026-05-29.) */
+  sig: string;
   etag: string;
   js: string;
+  /** Absolute paths of the relative `.css` imports inlined into this build —
+   *  re-statted each request to recompute `sig` without re-reading the source. */
+  cssDeps: string[];
 }
 const canvasCache = new Map<string, CanvasCacheEntry>();
 
+/** Relative `.css` import specifiers in a canvas source → absolute paths (the
+ *  files Bun.build inlines). Bare / virtual specifiers (`@maude/…`, npm) are
+ *  skipped — only on-disk relative CSS affects the inlined output. Resolved
+ *  paths are clamped to `designRoot`: a canvas source is attacker-influenced
+ *  under linked mode (DDR-054), and these paths are `stat`-ed for mtime, so a
+ *  `../../../etc/…` specifier must not let the freshness probe reach outside the
+ *  design tree. Legit DS imports (`../../system/<ds>/…`) stay inside designRoot. */
+function cssDepsFromSource(source: string, canvasAbsPath: string, designRoot: string): string[] {
+  const dir = dirname(canvasAbsPath);
+  const root = resolve(designRoot);
+  const deps: string[] = [];
+  const re = /import\s+["']([^"']+\.css)["']/g;
+  let m: RegExpExecArray | null = re.exec(source);
+  while (m !== null) {
+    if (m[1].startsWith('.')) {
+      const abs = resolve(dir, m[1]);
+      if (abs === root || abs.startsWith(root + sep)) deps.push(abs);
+    }
+    m = re.exec(source);
+  }
+  return deps;
+}
+
+/** mtime signature over the .tsx + its inlined CSS deps. A missing/unreadable
+ *  file contributes 0 — a delete is itself a change, so the signature differs. */
+function canvasFreshnessSig(tsxAbsPath: string, cssDeps: string[]): string {
+  const parts: string[] = [];
+  for (const p of [tsxAbsPath, ...cssDeps]) {
+    const mt = Bun.file(p).lastModified;
+    parts.push(`${p}@${Number.isFinite(mt) ? mt : 0}`);
+  }
+  return parts.join('|');
+}
+
 async function serveCanvasTsx(
   absPath: string,
   req: Request,
@@ -90,12 +196,16 @@ async function serveCanvasTsx(
   const file = Bun.file(absPath);
   if (!(await file.exists())) return new Response('Not found', { status: 404 });
 
-  // `stat` via Bun.file().lastModified — falls back to 0 if unavailable.
-  const mtimeMs = typeof file.lastModified === 'number' ? file.lastModified : 0;
+  // Freshness = the .tsx mtime AND every inlined sibling `.css` mtime. Keying on
+  // the .tsx alone meant a direct edit to `<canvas>.css` was a cache HIT, so the
+  // HMR reload (mode:'module') re-served the stale inlined CSS — the edit only
+  // surfaced once the .tsx itself changed (DDR-064 dogfooding finding).
   let cached = canvasCache.get(absPath);
+  const sig = canvasFreshnessSig(absPath, cached?.cssDeps ?? []);
 
-  if (!cached || cached.mtimeMs !== mtimeMs) {
+  if (!cached || cached.sig !== sig) {
     const source = await file.text();
+    const cssDeps = cssDepsFromSource(source, absPath, ctx.paths.designRoot);
     let result: Awaited<ReturnType<typeof buildCanvasModule>>;
     try {
       result = await buildCanvasModule(absPath, source, {
@@ -114,7 +224,14 @@ async function serveCanvasTsx(
         headers: { 'Content-Type': 'text/plain; charset=utf-8' },
       });
     }
-    cached = { mtimeMs, etag: result.etag, js: result.js };
+    // Recompute the signature against the freshly-parsed deps — this very edit
+    // may have added or removed a `.css` import.
+    cached = {
+      sig: canvasFreshnessSig(absPath, cssDeps),
+      etag: result.etag,
+      js: result.js,
+      cssDeps,
+    };
     canvasCache.set(absPath, cached);
     // Persist the locator map. Awaited so the inspector / Phase-12 layers
     // panel sees a consistent (cdId -> source) view by the time the canvas
@@ -156,6 +273,22 @@ async function serveFile(absPath: string, headers: Record<string, string> = {}):
 export interface Http {
   routes: Record<string, (req: Request) => Response | Promise<Response>>;
   fetch(req: Request): Promise<Response>;
+  /**
+   * T2 (9.1-A) — build the canvas mount-harness response. `applyCsp` adds the
+   * strict CSP (always on for the segregated canvas origin; the legacy main
+   * origin keeps it env-gated for the POC). Shared so both listeners produce
+   * byte-identical HTML.
+   */
+  serveCanvasShell(applyCsp: boolean): Promise<Response>;
+  /**
+   * T2 (9.1-A) — allowlist gate for the segregated canvas origin. Returns true
+   * only for the routes the canvas runtime legitimately needs (shell, runtime
+   * bundles, comment-mount, transpiled .tsx + CSS/assets under designRoot,
+   * git-user, canvas-meta, health). Everything else is 403'd at the door so
+   * hub-pushed JSX can't reach /_api/export, /_config, /_sync-status, comments,
+   * the app shell, or arbitrary repo files. WS upgrades are gated in server.ts.
+   */
+  isCanvasSafeRoute(pathname: string): boolean;
 }
 
 export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActivity): Http {
@@ -241,7 +374,24 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
 
     '/_active': () => Response.json(inspect.state),
 
-    '/_config': () => Response.json(ctx.cfg),
+    // Phase 9 Task 8 — offline-mode banner poll fallback. The linked-mode sync
+    // runtime writes `_sync.json`; browser tabs also get live pushes over the
+    // WS ('sync:status'). Returns `{ linked: false }` in solo mode.
+    '/_sync-status': () => {
+      const file = join(ctx.paths.designRoot, '_sync.json');
+      if (!existsSync(file)) {
+        return Response.json({ linked: false }, { headers: { 'Cache-Control': 'no-store' } });
+      }
+      try {
+        return Response.json(JSON.parse(readFileSync(file, 'utf8')), {
+          headers: { 'Cache-Control': 'no-store' },
+        });
+      } catch {
+        return Response.json({ linked: false }, { headers: { 'Cache-Control': 'no-store' } });
+      }
+    },
+
+    '/_config': () => Response.json({ ...ctx.cfg, canvasOrigin: ctx.canvasOrigin }),
 
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
@@ -585,14 +735,10 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       // Query parameter ?canvas=<path-relative-to-designRoot> tells the shell
       // which canvas to import + mount. See plugins/design/templates/_shell.html.
       if (pathname === '/_canvas-shell.html' || pathname === '/_canvas-shell') {
-        const shellHtml = await Bun.file(join(TEMPLATES_DIR, '_shell.html')).text();
-        // Inject inspector overlay — Cmd+Click selection + Shift/C+Click
-        // add-comment flow. Without this, TSX canvases mount fine but lose
-        // every interactive devtool.
-        const injected = inspect.injectInspector(shellHtml);
-        return new Response(injected, {
-          headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' },
-        });
+        // The segregated canvas origin (server.ts) calls serveCanvasShell(true)
+        // directly with CSP always on; on the legacy main origin the CSP stays
+        // env-gated (MAUDE_CSP_POC) for the POC / backwards-compat.
+        return serveCanvasShell(process.env.MAUDE_CSP_POC === '1');
       }
 
       // Fall-through: serve user repo files (designRoot + everything under repoRoot).
@@ -622,5 +768,99 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
     }
   }
 
-  return { routes, fetch };
+  async function serveCanvasShell(applyCsp: boolean): Promise<Response> {
+    const shellHtml = await Bun.file(join(TEMPLATES_DIR, '_shell.html')).text();
+    // Inject inspector overlay — Cmd+Click selection + add-comment flow.
+    const injected = inspect.injectInspector(shellHtml);
+    const headers: Record<string, string> = {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'no-store',
+    };
+    if (applyCsp) headers['Content-Security-Policy'] = cspForCanvasShell(injected, ctx.mainOrigin);
+    return new Response(injected, { headers });
+  }
+
+  // Canvas assets the segregated origin may serve out of designRoot. Excludes
+  // `.json` so no `*.meta.json` / `config.json` / `_comments/*.json` leaks via
+  // the static lane (canvas-meta goes through the gated /_api route instead).
+  const CANVAS_ASSET_EXTS = new Set([
+    '.tsx',
+    '.css',
+    '.svg',
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.webp',
+    '.ico',
+    '.woff',
+    '.woff2',
+    '.ttf',
+    '.otf',
+  ]);
+
+  // Exact API paths the canvas iframe needs (collab + display data). See
+  // isCanvasSafeRoute for the trust rationale. Mutations are limited to inert
+  // collab data (annotations SVG, comment replies via the dynamic route).
+  const CANVAS_SAFE_API = new Set([
+    '/_api/git-user', // presence display name
+    '/_api/canvas-meta', // layout/viewport sidecar (GET + PATCH)
+    '/_api/annotations', // annotation SVG (GET + PUT) — drives the collab bridge
+    '/_api/git-committers', // @mention autocomplete
+    '/_api/ai', // AI-activity banner
+    '/_comments', // per-file comment list (renders pins)
+  ]);
+
+  function isCanvasSafeRoute(pathname: string): boolean {
+    // A1/A2 (DDR-060 F1 re-audit, phase-9.1-t2-f1-cross-origin-reaudit.md) —
+    // DECODE + NORMALIZE before gating. `URL.pathname` preserves `%2f` (it does
+    // NOT decode it to `/`), so a raw allowlist check on the encoded path is
+    // fooled: `/.design/..%2fsite%2fx.css` reads as ONE opaque segment under the
+    // designRoot with an asset ext (the `_`-segment + ext checks see no literal
+    // slash to split on), yet `safePathUnderRoot` later DECODES the same `%2f`,
+    // turns `..%2f` into a real `../`, and climbs out of the designRoot — re-
+    // confined only to repoRoot. That decode mismatch let a hub-pushed canvas
+    // read any repo `.tsx`/`.css`/`.svg`/font + `_history` snapshots. Decoding
+    // here makes the gate agree with the resolver: `..%2f` → `../`, normalize
+    // collapses it, and the path no longer matches designPrefix → 403. A
+    // malformed escape (`%ZZ`) throws → reject. This gate runs ONLY on the
+    // segregated canvas origin (server.ts), so the main origin is untouched.
+    let safe: string;
+    try {
+      safe = posix.normalize(decodeURIComponent(pathname));
+    } catch {
+      return false;
+    }
+    if (safe === '/_canvas-shell.html' || safe === '/_canvas-shell') return true;
+    if (safe === '/_health') return true;
+    if (safe === '/_client/comment-mount.js') return true;
+    // Canvas-chrome stylesheets (composer / thread / pin / cursor CSS). Inert
+    // static assets from the dev-server distribution — no secrets, no code
+    // exec, no repo content. Without this the cross-origin canvas 403s e.g.
+    // `/_client/comments-overlay.css`, so the in-iframe comment composer renders
+    // unstyled and, missing `position: fixed`, collapses to the top-left (0,0).
+    // Allowed by pattern (not per-file) so future chrome CSS can't silently
+    // regress the same way.
+    if (safe.startsWith('/_client/') && ext(safe) === '.css') return true;
+    if (safe.startsWith('/_canvas-runtime/')) return true;
+    // Collab + display-data endpoints the canvas runtime legitimately calls from
+    // inside the iframe. All are reads or inert collab writes (annotations SVG,
+    // comment replies) — the "safe to sync" set per DDR-054. None expose code
+    // execution, secrets, export, /_config, /_sync-status, or files outside
+    // designRoot/annotations; the canvas origin's CSP `connect-src 'self'` still
+    // confines the iframe so hub-pushed JSX can't reach IMDS/LAN/main-origin.
+    if (CANVAS_SAFE_API.has(safe)) return true;
+    // POST /_api/comments/<id>/reply — dynamic path (fetch-handled).
+    if (/^\/_api\/comments\/[A-Za-z0-9_]+\/reply$/.test(safe)) return true;
+    const designPrefix = `/${ctx.paths.designRel.replace(/^\/+|\/+$/g, '')}/`;
+    if (safe.startsWith(designPrefix)) {
+      const rest = safe.slice(designPrefix.length);
+      // Reject runtime/state dirs+files (_comments, _sync.json, _history, …).
+      if (rest.split('/').some((seg) => seg.startsWith('_'))) return false;
+      return CANVAS_ASSET_EXTS.has(ext(safe));
+    }
+    return false;
+  }
+
+  return { routes, fetch, serveCanvasShell, isCanvasSafeRoute };
 }

package/plugins/design/dev-server/input-router.tsx

@@ -63,9 +63,27 @@ export function crossedDragThreshold(
  * returns `no-op` for the corresponding pointer events so the SVG overlay
  * can grab them natively.
  */
-export type Tool = 'move' | 'hand' | 'comment' | 'pen' | 'rect' | 'ellipse' | 'arrow' | 'eraser';
-
-const ANNOTATION_TOOLS = new Set<Tool>(['pen', 'rect', 'ellipse', 'arrow', 'eraser']);
+export type Tool =
+  | 'move'
+  | 'hand'
+  | 'comment'
+  | 'pen'
+  | 'rect'
+  | 'ellipse'
+  | 'arrow'
+  | 'sticky'
+  | 'text'
+  | 'eraser';
+
+const ANNOTATION_TOOLS = new Set<Tool>([
+  'pen',
+  'rect',
+  'ellipse',
+  'arrow',
+  'sticky',
+  'text',
+  'eraser',
+]);
 
 export function isAnnotationTool(t: Tool): boolean {
   return ANNOTATION_TOOLS.has(t);
@@ -146,6 +164,11 @@ export function classify(input: ClassifyInput): RouterAction {
     if (k === 'r') return { kind: 'tool', tool: 'rect' };
     if (k === 'o') return { kind: 'tool', tool: 'ellipse' };
     if (k === 'a') return { kind: 'tool', tool: 'arrow' };
+    // Phase 21 — N = sticky Note ('S' is taken by the shell Design-system view
+    // + Shift-marquee); T = standalone Text. Both are bare letters the shell
+    // yields when focus is inside the canvas iframe (app.jsx onKey bail).
+    if (k === 'n') return { kind: 'tool', tool: 'sticky' };
+    if (k === 't') return { kind: 'tool', tool: 'text' };
     if (k === 'e') return { kind: 'tool', tool: 'eraser' };
     if (input.key === 'Escape') return { kind: 'escape' };
     return { kind: 'no-op' };
@@ -268,6 +291,16 @@ export interface UseInputRouterOptions {
   callbacks: RouterCallbacks;
   /** When false, listeners are not attached. Defaults to true. */
   enabled?: boolean;
+  /**
+   * Allowlist of action kinds this router is permitted to CLAIM (preventDefault
+   * + stopImmediatePropagation + dispatch). Any classified action outside the
+   * set is downgraded to `no-op` so it propagates untouched to other listeners.
+   * Omit to claim everything (the default — used by the full DesignCanvas
+   * router). The shell-owned comment mount layer passes a narrow set so it can
+   * coexist as an ANCESTOR capture-listener over a UI canvas's own router
+   * without swallowing select / context-menu / undo gestures it doesn't own.
+   */
+  claimableActions?: ReadonlySet<RouterAction['kind']>;
 }
 
 export function isEditableTarget(t: EventTarget | null): boolean {
@@ -295,13 +328,21 @@ export function isOverlayTarget(t: EventTarget | null): boolean {
 }
 
 export function useInputRouter(opts: UseInputRouterOptions): void {
-  const { hostRef, getActiveTool, isSpaceHeld, callbacks, enabled = true } = opts;
+  const { hostRef, getActiveTool, isSpaceHeld, callbacks, enabled = true, claimableActions } = opts;
 
   useEffect(() => {
     if (!enabled) return;
     const host = hostRef.current;
     if (!host) return;
 
+    // Downgrade any action this router isn't permitted to claim to no-op so it
+    // propagates untouched (no preventDefault / no dispatch). Identity pass-
+    // through when no allowlist is configured.
+    const claim = (action: RouterAction): RouterAction =>
+      claimableActions && action.kind !== 'no-op' && !claimableActions.has(action.kind)
+        ? { kind: 'no-op' }
+        : action;
+
     const dispatch = (action: RouterAction): void => {
       switch (action.kind) {
         case 'hover':
@@ -334,18 +375,20 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
     };
 
     const onPointerMove = (e: PointerEvent): void => {
-      const action = classify({
-        type: 'pointermove',
-        button: e.button,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        clientX: e.clientX,
-        clientY: e.clientY,
-        spaceHeld: isSpaceHeld?.() ?? false,
-        activeTool: getActiveTool(),
-      });
+      const action = claim(
+        classify({
+          type: 'pointermove',
+          button: e.button,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          spaceHeld: isSpaceHeld?.() ?? false,
+          activeTool: getActiveTool(),
+        })
+      );
       dispatch(action);
     };
 
@@ -354,18 +397,20 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
       // their own clicks. The router is in capture phase, so we have to
       // bail HERE before classify can claim the event.
       if (isOverlayTarget(e.target)) return;
-      const action = classify({
-        type: 'pointerdown',
-        button: e.button,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        clientX: e.clientX,
-        clientY: e.clientY,
-        spaceHeld: isSpaceHeld?.() ?? false,
-        activeTool: getActiveTool(),
-      });
+      const action = claim(
+        classify({
+          type: 'pointerdown',
+          button: e.button,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          spaceHeld: isSpaceHeld?.() ?? false,
+          activeTool: getActiveTool(),
+        })
+      );
       if (action.kind !== 'no-op') {
         // Suppress native behavior on every event the router claims —
         // button presses don't fire, inputs don't focus, the canvas
@@ -386,18 +431,20 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
      */
     const onMouseDown = (e: MouseEvent): void => {
       if (isOverlayTarget(e.target)) return;
-      const action = classify({
-        type: 'pointerdown',
-        button: e.button,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        clientX: e.clientX,
-        clientY: e.clientY,
-        spaceHeld: isSpaceHeld?.() ?? false,
-        activeTool: getActiveTool(),
-      });
+      const action = claim(
+        classify({
+          type: 'pointerdown',
+          button: e.button,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          spaceHeld: isSpaceHeld?.() ?? false,
+          activeTool: getActiveTool(),
+        })
+      );
       if (action.kind !== 'no-op') {
         e.preventDefault();
         e.stopImmediatePropagation();
@@ -414,41 +461,55 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
       if (isOverlayTarget(e.target)) return;
       const tool = getActiveTool();
       const mod = e.metaKey || e.ctrlKey;
-      const wouldRoute =
-        tool === 'comment' || (tool === 'move' && mod && e.button === 0) || e.button === 2;
-      if (wouldRoute) {
+      // Map the click to the action kind the matching pointerdown would have
+      // produced, then honor the claim allowlist so a scoped router (the
+      // comment mount layer) doesn't suppress clicks it never claimed.
+      const wouldRouteKind: RouterAction['kind'] | null =
+        tool === 'comment'
+          ? 'drop-comment'
+          : tool === 'move' && mod && e.button === 0
+            ? 'select'
+            : e.button === 2
+              ? 'context-menu'
+              : null;
+      if (wouldRouteKind && (!claimableActions || claimableActions.has(wouldRouteKind))) {
         e.preventDefault();
         e.stopImmediatePropagation();
       }
     };
 
     const onContextMenu = (e: MouseEvent): void => {
+      const action = claim(
+        classify({
+          type: 'contextmenu',
+          clientX: e.clientX,
+          clientY: e.clientY,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          activeTool: getActiveTool(),
+        })
+      );
+      if (action.kind === 'no-op') return; // not ours to claim — let it bubble
       e.preventDefault();
       e.stopImmediatePropagation();
-      const action = classify({
-        type: 'contextmenu',
-        clientX: e.clientX,
-        clientY: e.clientY,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        activeTool: getActiveTool(),
-      });
       dispatch(action);
     };
 
     const onKeyDown = (e: KeyboardEvent): void => {
-      const action = classify({
-        type: 'keydown',
-        key: e.key,
-        metaKey: e.metaKey,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-        isEditable: isEditableTarget(e.target),
-        activeTool: getActiveTool(),
-      });
+      const action = claim(
+        classify({
+          type: 'keydown',
+          key: e.key,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          isEditable: isEditableTarget(e.target),
+          activeTool: getActiveTool(),
+        })
+      );
       if (
         action.kind === 'tool' ||
         action.kind === 'escape' ||
@@ -486,7 +547,7 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
       } as EventListenerOptions);
       doc.removeEventListener('keydown', onKeyDown, true);
     };
-  }, [enabled, hostRef, getActiveTool, isSpaceHeld, callbacks]);
+  }, [enabled, hostRef, getActiveTool, isSpaceHeld, callbacks, claimableActions]);
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/plugins/design/dev-server/participants-chrome.tsx

@@ -42,7 +42,7 @@ const CHROME_CSS = `
   line-height: 1;
   letter-spacing: 0.02em;
   color: var(--maude-hud-accent-fg, #fff);
-  border: 1.5px solid var(--bg-0, #fff);
+  border: 1.5px solid var(--maude-chrome-bg-0, #fff);
   margin-left: -6px;
   cursor: pointer;
   position: relative;
@@ -70,20 +70,20 @@ const CHROME_CSS = `
   right: 0;
   min-width: 168px;
   padding: 10px 12px;
-  background: var(--bg-1, #fff);
-  color: var(--fg-0, #111);
-  border: 1px solid var(--border-default, rgba(0,0,0,0.16));
+  background: var(--maude-chrome-bg-1, #fff);
+  color: var(--maude-chrome-fg-0, #111);
+  border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.16));
   border-radius: var(--radius-md, 4px);
   font-size: 12px;
   line-height: 1.35;
   white-space: nowrap;
-  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
+  box-shadow: 0 6px 18px var(--maude-chrome-shadow, rgba(0,0,0,0.10));
   z-index: 11;
 }
 .dc-participant-popover__name {
   font-weight: 600;
   margin-bottom: 8px;
-  color: var(--fg-0, #111);
+  color: var(--maude-chrome-fg-0, #111);
   letter-spacing: 0.01em;
 }
 .dc-participant-popover__btn {
@@ -102,11 +102,11 @@ const CHROME_CSS = `
 }
 .dc-participant-popover__btn:hover { background: var(--maude-hud-accent-hover, var(--maude-hud-accent, oklch(50% 0.170 50))); }
 .dc-participant-popover__btn--stop {
-  background: var(--bg-3, #e5e5e5);
-  color: var(--fg-0, #111);
-  border: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
+  background: color-mix(in oklab, var(--maude-chrome-fg-0, #111) 10%, transparent);
+  color: var(--maude-chrome-fg-0, #111);
+  border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.12));
 }
-.dc-participant-popover__btn--stop:hover { background: var(--bg-4, #d8d8d8); }
+.dc-participant-popover__btn--stop:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #111) 16%, transparent); }
 @media (prefers-reduced-motion: reduce) {
   .dc-participant { transition: none; }
 }