@1agh/maude 0.22.0 → 0.23.0

package/plugins/design/dev-server/dist/runtime/react-dom.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -208,10 +190,10 @@ var require_react_dom = __commonJS((exports, module) => {
   if (true) {
     checkDCE();
     module.exports = exports_react_dom_production;
-  }
+  } else {}
 });
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-react-dom-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-react-dom-entry.tsx
 var __mod__ = __toESM(require_react_dom(), 1);
 var {
   __DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,

package/plugins/design/dev-server/dist/runtime/react-dom_client.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -309,7 +291,7 @@ var require_scheduler = __commonJS((exports, module) => {
   init_scheduler_production();
   if (true) {
     module.exports = exports_scheduler_production;
-  }
+  } else {}
 });
 
 // ../../../node_modules/.pnpm/react-dom@19.2.6_react@19.2.6/node_modules/react-dom/cjs/react-dom-client.production.js
@@ -10356,10 +10338,10 @@ var require_client = __commonJS((exports, module) => {
   if (true) {
     checkDCE();
     module.exports = exports_react_dom_client_production;
-  }
+  } else {}
 });
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-react-dom_client-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-react-dom_client-entry.tsx
 var __mod__ = __toESM(require_client(), 1);
 var {
   createRoot,

package/plugins/design/dev-server/dist/runtime/react.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -452,10 +434,10 @@ var require_react = __commonJS((exports, module) => {
   init_react_production();
   if (true) {
     module.exports = exports_react_production;
-  }
+  } else {}
 });
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-react-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-react-entry.tsx
 var __mod__ = __toESM(require_react(), 1);
 var {
   Activity,

package/plugins/design/dev-server/dist/runtime/react_jsx-dev-runtime.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -61,10 +43,10 @@ var require_jsx_dev_runtime = __commonJS((exports, module) => {
   init_react_jsx_dev_runtime_production();
   if (true) {
     module.exports = exports_react_jsx_dev_runtime_production;
-  }
+  } else {}
 });
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-react_jsx-dev-runtime-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-react_jsx-dev-runtime-entry.tsx
 var __mod__ = __toESM(require_jsx_dev_runtime(), 1);
 var {
   Fragment,

package/plugins/design/dev-server/dist/runtime/react_jsx-runtime.js

@@ -3,43 +3,25 @@ var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
   target = mod != null ? __create(__getProtoOf(mod)) : {};
   const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
   for (let key of __getOwnPropNames(mod))
     if (!__hasOwnProp.call(to, key))
       __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
+        get: () => mod[key],
         enumerable: true
       });
-  if (canCache)
-    cache.set(mod, to);
   return to;
 };
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -84,10 +66,10 @@ var require_jsx_runtime = __commonJS((exports, module) => {
   init_react_jsx_runtime_production();
   if (true) {
     module.exports = exports_react_jsx_runtime_production;
-  }
+  } else {}
 });
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-react_jsx-runtime-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-react_jsx-runtime-entry.tsx
 var __mod__ = __toESM(require_jsx_runtime(), 1);
 var {
   Fragment,

package/plugins/design/dev-server/dist/runtime/y-protocols_awareness.js

@@ -1,15 +1,11 @@
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 
@@ -359,7 +355,7 @@ var applyAwarenessUpdate = (awareness, update, origin) => {
   }
 };
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-y-protocols_awareness-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-y-protocols_awareness-entry.tsx
 var {
   Awareness: Awareness2,
   applyAwarenessUpdate: applyAwarenessUpdate2,

package/plugins/design/dev-server/dist/runtime/y-protocols_sync.js

@@ -1,15 +1,11 @@
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 
@@ -75,7 +71,7 @@ var readSyncMessage = (decoder, encoder, doc, transactionOrigin, errorHandler) =
   return messageType;
 };
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-y-protocols_sync-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-y-protocols_sync-entry.tsx
 var {
   messageYjsSyncStep1: messageYjsSyncStep12,
   messageYjsSyncStep2: messageYjsSyncStep22,

package/plugins/design/dev-server/dist/runtime/yjs.js

@@ -1,15 +1,11 @@
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 
@@ -6476,7 +6472,7 @@ if (glo[importIdentifier] === true) {
 }
 glo[importIdentifier] = true;
 
-// synth:/home/runner/work/maude/maude/plugins/design/dev-server/.runtime-bundle-yjs-entry.tsx
+// synth:/Users/iagh/git/claude-design/plugins/design/dev-server/.runtime-bundle-yjs-entry.tsx
 var {
   AbsolutePosition: AbsolutePosition2,
   AbstractConnector: AbstractConnector2,

package/plugins/design/dev-server/dom-selection.ts

@@ -0,0 +1,156 @@
+/**
+ * @file       dom-selection.ts — selection-from-DOM helpers (leaf module)
+ * @scope      plugins/design/dev-server/dom-selection.ts
+ * @purpose    Pure DOM → Selection builders shared by the canvas chrome
+ *             (canvas-shell.tsx) and the shell-owned comment mount layer
+ *             (canvas-comment-mount.tsx). Lives in its own leaf module — no
+ *             React, no canvas-lib import — so both consumers can lift the
+ *             same `hoverTargetToSelection` / `deriveFile` logic without a
+ *             cycle and without bundling the heavy DesignCanvas tree into the
+ *             lite comment mount.
+ */
+
+import type { HoverTarget } from './input-router.tsx';
+import type { Selection } from './use-selection-set.tsx';
+
+/**
+ * Canvas file path for the current page. Under the mount harness the page is
+ * `/_canvas-shell.html?canvas=<rel>&designRel=<root>`; for legacy `.html`
+ * mocks it's the served file path itself.
+ */
+export function deriveFile(): string | undefined {
+  if (typeof window === 'undefined') return undefined;
+  try {
+    const p = window.location.pathname;
+    if (p === '/_canvas-shell.html' || p === '/_canvas-shell') {
+      const qs = new URLSearchParams(window.location.search);
+      const canvas = qs.get('canvas') ?? '';
+      const designRel = (qs.get('designRel') ?? '.design').replace(/^\/+|\/+$/g, '');
+      return canvas ? `${designRel}/${canvas}` : undefined;
+    }
+    return decodeURIComponent(p).replace(/^\//, '');
+  } catch {
+    return undefined;
+  }
+}
+
+export function realClasses(el: Element | null): string {
+  if (!el) return '';
+  return (el.getAttribute('class') ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter((c) => c && !c.startsWith('dgn-') && !c.startsWith('dc-cv-'))
+    .join(' ');
+}
+
+export function shortText(el: Element | null, max: number): string {
+  if (!el) return '';
+  const t = ((el as HTMLElement).innerText || el.textContent || '').replace(/\s+/g, ' ').trim();
+  return t.length > max ? `${t.slice(0, max - 1)}…` : t;
+}
+
+export function cssPath(el: Element | null): string {
+  if (!el) return '';
+  const path: string[] = [];
+  let cur: Element | null = el;
+  while (cur && cur.nodeType === 1 && path.length < 8) {
+    const dscEl = cur.getAttribute?.('data-dc-element');
+    if (dscEl) {
+      path.unshift(`[data-dc-element="${dscEl}"]`);
+      break;
+    }
+    const dscSc = cur.getAttribute?.('data-dc-screen');
+    if (dscSc) {
+      path.unshift(`[data-dc-screen="${dscSc}"]`);
+      break;
+    }
+    let sel = cur.nodeName.toLowerCase();
+    if (cur.id) {
+      sel = `#${cur.id}`;
+      path.unshift(sel);
+      break;
+    }
+    const cls = realClasses(cur).split(/\s+/).filter(Boolean).slice(0, 2);
+    if (cls.length) sel += `.${cls.join('.')}`;
+    let sib = 1;
+    let n: Element | null = cur.previousElementSibling;
+    while (n) {
+      sib++;
+      n = n.previousElementSibling;
+    }
+    sel += `:nth-child(${sib})`;
+    path.unshift(sel);
+    cur = cur.parentElement;
+  }
+  return path.join(' > ');
+}
+
+export function domPath(el: Element | null): string[] {
+  const hops: string[] = [];
+  let cur = el;
+  while (cur && cur.nodeType === 1 && hops.length < 8) {
+    let label = cur.nodeName.toLowerCase();
+    const dEl = cur.getAttribute?.('data-dc-element');
+    const dSc = cur.getAttribute?.('data-dc-screen');
+    if (dEl) label += `[data-dc-element="${dEl}"]`;
+    else if (dSc) label += `[data-dc-screen="${dSc}"]`;
+    else if (cur.id) label += `#${cur.id}`;
+    const cls = realClasses(cur).split(/\s+/).filter(Boolean).slice(0, 2);
+    if (cls.length && !dEl && !dSc) label += `.${cls.join('.')}`;
+    hops.unshift(label);
+    cur = cur.parentElement;
+  }
+  return hops;
+}
+
+export function cssEscape(s: string): string {
+  // Minimal CSS.escape polyfill — only handles chars actually present in
+  // pipeline-stamped IDs (alphanumerics + `-` + `_`).
+  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+}
+
+/**
+ * Build the wire-shape `Selection` for a resolved hover target. `file`
+ * defaults to `deriveFile()`; the comment mount layer passes it explicitly
+ * so all three consumers (router, overlay, mount) agree on the same key.
+ */
+export function hoverTargetToSelection(target: HoverTarget, file?: string): Selection {
+  const el = target.el;
+  const rect =
+    el && (el as HTMLElement).getBoundingClientRect
+      ? (el as HTMLElement).getBoundingClientRect()
+      : null;
+  // `cdId` is the hit element's OWN data-cd-id (deep mode); resolver never
+  // climbs to an ancestor. Falls back to cssPath of the hit when no stable
+  // anchor exists.
+  const cdId = target.cdId;
+  // Selector resolution order:
+  //   1. data-cd-id anchor — stable pipeline-stamped id (preferred).
+  //   2. data-dc-screen — chrome click promoted to whole-artboard select
+  //      (T24.5 G8 multi-artboard gesture).
+  //   3. cssPath of the hit — last-resort path string.
+  const selector = cdId
+    ? `[data-cd-id="${cdId}"]`
+    : !cdId && target.artboardId
+      ? `[data-dc-screen="${target.artboardId}"]`
+      : cssPath(el);
+  return {
+    file: file ?? deriveFile(),
+    id: cdId ?? undefined,
+    selector,
+    artboardId: target.artboardId,
+    tag: el?.tagName.toLowerCase() ?? '',
+    classes: realClasses(el),
+    text: shortText(el, 240),
+    dom_path: domPath(el),
+    bounds: rect
+      ? {
+          x: Math.round(rect.left),
+          y: Math.round(rect.top),
+          w: Math.round(rect.width),
+          h: Math.round(rect.height),
+        }
+      : null,
+    html: el ? (el.outerHTML ?? '').slice(0, 4000) : '',
+  };
+}

package/plugins/design/dev-server/hmr-broadcast.ts

@@ -17,6 +17,7 @@
 // loaded via the importmap + Bun.build-produced ESM — there's no React Fast
 // Refresh runtime to register with. Full-reload is the reliable path.
 
+import { existsSync } from 'node:fs';
 import path from 'node:path';
 
 import type { Context } from './context.ts';
@@ -64,26 +65,11 @@ export function createHmrBroadcaster(
   }
 
   function classify(filename: string): HmrMessage | null {
-    const rel = filename.replace(/\\/g, '/');
-    const ext = path.extname(rel).toLowerCase();
-    const version = Date.now();
-    if (rel.startsWith('_lib/')) {
-      return { type: 'canvas-hmr', mode: 'hard', scope: 'lib', version };
-    }
-    if (ext === '.css') {
-      return { type: 'canvas-hmr', mode: 'css', file: rel, version, scope: 'canvas' };
-    }
-    // Phase 8 — canvas-meta sidecar (`<base>.meta.json`) carries the
-    // artboard layout / viewport. Emit a `meta` mode so foreign tabs can
-    // re-fetch + re-apply the layout WITHOUT a full reload (which would
-    // lose React state like tool mode, undo stack, scroll position).
-    if (rel.endsWith('.meta.json')) {
-      return { type: 'canvas-hmr', mode: 'meta', file: rel, version, scope: 'canvas' };
-    }
-    if (ext === '.tsx' || ext === '.jsx' || ext === '.ts' || ext === '.js') {
-      return { type: 'canvas-hmr', mode: 'module', file: rel, version, scope: 'canvas' };
-    }
-    return null;
+    return classifyChange(filename, (cssRel) => {
+      const root = ctx.paths?.designRoot;
+      if (!root) return false; // no root resolved → can't probe; keep css swap
+      return existsSync(path.join(root, cssRel.replace(/\.css$/i, '.tsx')));
+    });
   }
 
   function enqueue(msg: HmrMessage) {
@@ -125,3 +111,48 @@ export function createHmrBroadcaster(
 // Helpers — exported for tests.
 
 export const HMR_DEBOUNCE_MS = DEBOUNCE_MS;
+
+/**
+ * Classify a changed design-root-relative path into an HMR message. Pure +
+ * fs-injected (`hasSiblingTsx`) so it unit-tests without touching disk.
+ *
+ * CSS routing is the load-bearing part. A canvas/specimen sibling stylesheet
+ * (e.g. `system/x/preview/motion.css` next to `motion.tsx`, pulled in via
+ * `import './motion.css'`) is INLINED into the built module as a `<style>` tag
+ * by canvas-build.ts — there is NO `<link>` for it. The iframe's `mode:'css'`
+ * handler swaps `<link href>` only, so a link swap for inlined CSS is a silent
+ * no-op and the edit never reaches the browser (the bug this fixes). For those
+ * we emit `mode:'module'` keyed on the sibling `.tsx`, so the open canvas
+ * reloads and re-inlines the fresh CSS via the existing module-reload path.
+ * Link-mounted CSS (DS tokens, `_components.css`, `_layout.css` — no sibling
+ * `.tsx`) keeps the fast, state-preserving css swap.
+ */
+export function classifyChange(
+  filename: string,
+  hasSiblingTsx: (cssRel: string) => boolean
+): HmrMessage | null {
+  const rel = filename.replace(/\\/g, '/');
+  const ext = path.extname(rel).toLowerCase();
+  const version = Date.now();
+  if (rel.startsWith('_lib/')) {
+    return { type: 'canvas-hmr', mode: 'hard', scope: 'lib', version };
+  }
+  if (ext === '.css') {
+    if (hasSiblingTsx(rel)) {
+      const siblingTsx = rel.replace(/\.css$/i, '.tsx');
+      return { type: 'canvas-hmr', mode: 'module', file: siblingTsx, version, scope: 'canvas' };
+    }
+    return { type: 'canvas-hmr', mode: 'css', file: rel, version, scope: 'canvas' };
+  }
+  // Phase 8 — canvas-meta sidecar (`<base>.meta.json`) carries the
+  // artboard layout / viewport. Emit a `meta` mode so foreign tabs can
+  // re-fetch + re-apply the layout WITHOUT a full reload (which would
+  // lose React state like tool mode, undo stack, scroll position).
+  if (rel.endsWith('.meta.json')) {
+    return { type: 'canvas-hmr', mode: 'meta', file: rel, version, scope: 'canvas' };
+  }
+  if (ext === '.tsx' || ext === '.jsx' || ext === '.ts' || ext === '.js') {
+    return { type: 'canvas-hmr', mode: 'module', file: rel, version, scope: 'canvas' };
+  }
+  return null;
+}