@1agh/maude 0.22.2 → 0.24.0

package/plugins/design/dev-server/dist/styles.css

@@ -1210,6 +1210,22 @@
     color: var(--u-fg-1);
   }
 
+  .sb-sync {
+    cursor: help;
+  }
+
+  .sb-sync-dot {
+    background: var(--u-status-warn);
+    border-radius: 50%;
+    flex: none;
+    width: 7px;
+    height: 7px;
+  }
+
+  .sb-sync .sb-key {
+    color: var(--u-fg-2);
+  }
+
   .sb-spacer {
     border-right: 1px solid var(--u-border-subtle);
     flex: 1 0 auto;

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/equal-spacing-handles.tsx

@@ -48,7 +48,7 @@ const STYLES = `
 .dc-cv-eq-pill {
   position: absolute;
   transform: translate(-50%, calc(-100% - 8px));
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, monospace);
   font-size: 10px;
   padding: 2px 5px;
   background: #FF24BD;

package/plugins/design/dev-server/export-dialog.tsx

@@ -113,35 +113,35 @@ const ExportDialogContext = createContext<ExportDialogValue | null>(null);
 
 const DIALOG_CSS = `
 .dc-export-dialog {
-  border: 1px solid var(--u-fg-0, #1c1917);
+  border: 1px solid var(--maude-chrome-fg-0, #1c1917);
   padding: 0;
   border-radius: 8px;
-  background: var(--u-bg-0, var(--bg-0, #fff));
-  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);
-  color: var(--u-fg-0, var(--fg-0, #1a1a1a));
+  background: var(--maude-chrome-bg-0, #fff);
+  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);
+  color: var(--maude-chrome-fg-0, #1a1a1a);
   width: min(640px, 100vw - 48px);
   max-height: min(560px, 100vh - 48px);
   overflow: hidden;
 }
 .dc-export-dialog::backdrop { background: rgba(20, 20, 30, 0.32); }
-.dc-export-dialog header { padding: 16px 20px; border-bottom: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: space-between; align-items: center; }
+.dc-export-dialog header { padding: 16px 20px; border-bottom: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); display: flex; justify-content: space-between; align-items: center; }
 .dc-export-dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
-.dc-export-dialog header .dc-ed-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: var(--fg-1, rgba(40,30,20,0.6)); font: inherit; font-size: 12px; }
+.dc-export-dialog header .dc-ed-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.6)); font: inherit; font-size: 12px; }
 .dc-export-dialog .dc-ed-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 20px; }
-.dc-export-dialog label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin-bottom: 6px; }
-.dc-export-dialog select { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 13px; color: inherit; }
-.dc-export-dialog .dc-ed-desc { font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); margin-top: 6px; line-height: 1.4; }
-.dc-export-dialog .dc-ed-recent { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); background: var(--bg-2, rgba(0,0,0,0.02)); }
-.dc-export-dialog .dc-ed-recent h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-2, rgba(40,30,20,0.5)); margin: 0 0 8px; }
+.dc-export-dialog label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.5)); margin-bottom: 6px; }
+.dc-export-dialog select { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--maude-chrome-fg-0, rgba(0,0,0,0.12)); background: var(--maude-chrome-bg-1, #fafafa); font: inherit; font-size: 13px; color: inherit; }
+.dc-export-dialog .dc-ed-desc { font-size: 12px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.65)); margin-top: 6px; line-height: 1.4; }
+.dc-export-dialog .dc-ed-recent { padding: 12px 20px; border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); background: var(--maude-chrome-bg-2, rgba(0,0,0,0.02)); }
+.dc-export-dialog .dc-ed-recent h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.5)); margin: 0 0 8px; }
 .dc-export-dialog .dc-ed-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; max-height: 120px; overflow-y: auto; }
 .dc-export-dialog .dc-ed-recent button { display: flex; justify-content: space-between; gap: 12px; padding: 5px 12px; background: transparent; border: 1px solid transparent; border-radius: 0; cursor: pointer; font: inherit; font-size: 12px; color: inherit; width: 100%; text-align: left; }
-.dc-export-dialog .dc-ed-recent button:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
-.dc-export-dialog footer { padding: 12px 20px; border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); display: flex; justify-content: flex-end; gap: 8px; }
-.dc-export-dialog footer button { padding: 8px 14px; border-radius: 0; border: 1px solid var(--u-fg-0, rgba(0,0,0,0.12)); background: var(--u-bg-1, var(--bg-0, #fafafa)); font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
+.dc-export-dialog .dc-ed-recent button:hover { background: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 5%, transparent); border-color: color-mix(in oklab, var(--maude-chrome-fg-0, #1c1917) 8%, transparent); }
+.dc-export-dialog footer { padding: 12px 20px; border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); display: flex; justify-content: flex-end; gap: 8px; }
+.dc-export-dialog footer button { padding: 8px 14px; border-radius: 0; border: 1px solid var(--maude-chrome-fg-0, rgba(0,0,0,0.12)); background: var(--maude-chrome-bg-1, #fafafa); font: inherit; font-size: 12px; cursor: pointer; color: inherit; }
 .dc-export-dialog footer button.dc-ed-primary { background: var(--maude-hud-accent, #1a1a1a); color: var(--maude-hud-accent-fg, #fff); border-color: transparent; }
 .dc-export-dialog footer button:disabled { opacity: 0.4; cursor: not-allowed; }
-.dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08)); }
+.dc-export-dialog .dc-ed-status { padding: 8px 20px; font-size: 12px; color: var(--maude-chrome-fg-1, rgba(40,30,20,0.65)); border-top: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.08)); }
 .dc-export-dialog .dc-ed-status.is-error { color: var(--status-error, #c0392b); }
 `;
 
@@ -371,7 +371,9 @@ const DialogShell = (() => {
                     <span>
                       {FORMAT_META[h.format].label} · {SCOPE_META[h.scope].label}
                     </span>
-                    <span style={{ color: 'var(--fg-2, rgba(40,30,20,0.5))' }}>{h.filename}</span>
+                    <span style={{ color: 'var(--maude-chrome-fg-1, rgba(40,30,20,0.5))' }}>
+                      {h.filename}
+                    </span>
                   </button>
                 </li>
               ))}

package/plugins/design/dev-server/fs-watch.ts

@@ -40,6 +40,7 @@ export function createFsWatch(ctx: Context): FsWatch {
         // Skip our own runtime artifacts.
         if (filename.startsWith('_server.json')) return;
         if (filename.startsWith('_active.json')) return;
+        if (filename.startsWith('_sync.json')) return;
         if (filename.startsWith(`_history${path.sep}`) || filename.startsWith('_history/')) return;
         emit(filename);
       });

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;
+}