@1agh/maude 0.15.0

package/plugins/design/dev-server/client/hmr.mjs

@@ -0,0 +1,85 @@
+// Custom HMR client — runs in the dev-server shell only.
+//
+// Subscribes to the inspector WebSocket and reacts to `hmr` / `css-update` /
+// `module-update` events emitted by `build.ts --watch` (or by the server's
+// own fs-watch when authoring CSS direct under client/styles/).
+//
+// CSS path is zero-risk: refresh the <link> with a cache-busting query string,
+// browser swaps stylesheet in-place, no React state lost.
+//
+// JSX path is intentionally LEFT as full-page reload for now (plan Task 9
+// Gotcha 2 — land CSS-only HMR first; JSX patching arrives in Phase 3.5 once
+// react-refresh-runtime is wired through Bun.build).
+//
+// Iframes opt out — never trigger a parent reload; they get a postMessage
+// to the iframe itself.
+
+const STYLE_SELECTOR = 'link[rel="stylesheet"][href*="/_client/styles.css"]';
+
+function bumpStylesheet() {
+  const link = document.querySelector(STYLE_SELECTOR);
+  if (!link) return false;
+  const next = link.cloneNode();
+  const url = new URL(link.href, location.href);
+  url.searchParams.set('v', String(Date.now()));
+  next.href = url.toString();
+  // Swap once the new sheet has loaded; never leave the document briefly
+  // unstyled.
+  next.addEventListener('load', () => link.remove(), { once: true });
+  link.after(next);
+  return true;
+}
+
+let reloadDebounce = 0;
+function scheduleReload() {
+  if (reloadDebounce) return;
+  reloadDebounce = window.setTimeout(() => location.reload(), 80);
+}
+
+function handle(evt) {
+  if (!evt || typeof evt !== 'object') return;
+  if (evt.type === 'css-update' || evt.type === 'fs:css') {
+    if (!bumpStylesheet()) scheduleReload();
+    return;
+  }
+  if (evt.type === 'module-update') {
+    // No JSX-patching runtime yet; reload the page. State loss is acceptable
+    // for the shell — the iframes (selected element, scroll) survive because
+    // each iframe owns its own document and is not re-mounted on reload until
+    // the parent re-renders it.
+    scheduleReload();
+    return;
+  }
+  if (evt.type === 'fs:html') {
+    // The orchestrator (or the user via /design:edit) writes HTML files inside
+    // designRoot. We don't reload the shell, but we DO post a hint to the
+    // active iframe so it can refresh itself if it owns the changed canvas.
+    const iframes = document.querySelectorAll('iframe[data-canvas-path]');
+    for (const f of iframes) {
+      if (f.dataset.canvasPath && evt.file && evt.file.endsWith(f.dataset.canvasPath)) {
+        try {
+          // Trip a re-load on the iframe without disturbing the parent.
+          f.contentWindow?.location.reload();
+        } catch {
+          /* cross-origin / detached — ignore */
+        }
+      }
+    }
+  }
+}
+
+export function attachHmr(ws) {
+  if (!ws) return;
+  ws.addEventListener('message', (e) => {
+    let msg;
+    try {
+      msg = JSON.parse(e.data);
+    } catch {
+      return;
+    }
+    handle(msg);
+  });
+}
+
+// Auto-attach when imported as a side-effect (build.ts wires it into the
+// shell bundle, so `attachHmr` is called from app.jsx after the WS is open).

package/plugins/design/dev-server/client/iframe-lazy.mjs

@@ -0,0 +1,121 @@
+// IntersectionObserver-driven lazy iframe mount.
+//
+// mountLazy(host, src) wraps the iframe in a `content-visibility: auto`
+// container and only sets its `src` when the wrapper intersects the viewport.
+// When the wrapper has been off-screen for > 30 s, the src is cleared and the
+// iframe's last known state is stashed against the wrapper id so re-mount can
+// hint the inspector to restore selection/scroll.
+//
+// Saves ~80 % initial render work on a 10-canvas page (plan Task 10 + web.dev
+// iframe-lazy-loading + debugbear content-visibility).
+
+const DEFAULT_IDLE_MS = 30_000;
+const DEFAULT_ROOT_MARGIN = '200px 0px';
+
+const stateById = new Map();
+const observers = new WeakMap();
+
+function makeWrapper() {
+  const wrap = document.createElement('div');
+  wrap.className = 'iframe-lazy-wrap';
+  wrap.style.cssText =
+    'contain: layout style paint; content-visibility: auto; contain-intrinsic-size: 1280px 720px;';
+  return wrap;
+}
+
+function attachIframe(wrap, src) {
+  let f = wrap.querySelector('iframe');
+  if (!f) {
+    f = document.createElement('iframe');
+    f.setAttribute('loading', 'lazy');
+    f.setAttribute('referrerpolicy', 'no-referrer-when-downgrade');
+    f.style.cssText = 'width: 100%; height: 100%; border: 0; display: block;';
+    wrap.appendChild(f);
+  }
+  if (f.dataset.src !== src) {
+    f.dataset.src = src;
+    f.src = src;
+  }
+}
+
+function detachIframe(wrap, id) {
+  const f = wrap.querySelector('iframe');
+  if (!f) return;
+  // Snapshot whatever cheap state we can reach before clearing.
+  try {
+    stateById.set(id, {
+      ts: Date.now(),
+      src: f.dataset.src,
+      scroll: { x: f.contentWindow?.scrollX, y: f.contentWindow?.scrollY },
+    });
+  } catch {
+    stateById.set(id, { ts: Date.now(), src: f.dataset.src });
+  }
+  f.removeAttribute('src');
+  f.src = 'about:blank';
+}
+
+/**
+ * Mount a lazy iframe into `host` with the given `src` + stable `id`.
+ *   - Initial intersection sets the src.
+ *   - When the wrapper leaves viewport for > idleMs, the iframe is detached.
+ *   - State stashed in `stateById` is restored via `data-restore-*` on remount.
+ */
+export function mountLazy(host, src, id, opts = {}) {
+  const idleMs = opts.idleMs ?? DEFAULT_IDLE_MS;
+  const rootMargin = opts.rootMargin ?? DEFAULT_ROOT_MARGIN;
+
+  let wrap = host.querySelector('.iframe-lazy-wrap');
+  if (!wrap) {
+    wrap = makeWrapper();
+    wrap.dataset.lazyId = id;
+    wrap.dataset.canvasPath = src;
+    host.appendChild(wrap);
+  }
+  // Re-apply restore hints if we have any.
+  const prior = stateById.get(id);
+  if (prior) {
+    wrap.dataset.restoreScrollX = String(prior.scroll?.x ?? 0);
+    wrap.dataset.restoreScrollY = String(prior.scroll?.y ?? 0);
+  }
+
+  const exitedAt = new WeakMap();
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        const w = entry.target;
+        if (entry.isIntersecting) {
+          exitedAt.delete(w);
+          attachIframe(w, src);
+        } else {
+          exitedAt.set(w, Date.now());
+          // Schedule a deferred detach; if it comes back into view before idleMs we cancel.
+          setTimeout(() => {
+            const exited = exitedAt.get(w);
+            if (!exited) return;
+            if (Date.now() - exited >= idleMs) detachIframe(w, id);
+          }, idleMs + 100);
+        }
+      }
+    },
+    { rootMargin, threshold: 0.01 },
+  );
+  io.observe(wrap);
+  observers.set(wrap, io);
+  return wrap;
+}
+
+export function unmountLazy(host) {
+  const wraps = host.querySelectorAll('.iframe-lazy-wrap');
+  for (const wrap of wraps) {
+    const io = observers.get(wrap);
+    io?.disconnect();
+    observers.delete(wrap);
+    wrap.remove();
+  }
+}
+
+export function _resetState() {
+  stateById.clear();
+}

package/plugins/design/dev-server/client/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-theme="dark">
+<head>
+<meta charset="utf-8">
+<title>Design — local browser</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap">
+<link rel="stylesheet" href="/_client/styles.css">
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/_client/client.bundle.js"></script>
+</body>
+</html>

package/plugins/design/dev-server/client/styles/0-reset.css

@@ -0,0 +1,18 @@
+/* @layer reset — minimal base reset. */
+@layer reset {
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0; padding: 0; height: 100%;
+  background: var(--u-bg-0);
+  color: var(--u-fg-0);
+  font-family: var(--u-font-sans);
+  font-size: 13px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button { font: inherit; }
+::selection { background: var(--u-accent-bg); color: var(--u-fg-0); }
+}

package/plugins/design/dev-server/client/styles/1-tokens.css

@@ -0,0 +1,297 @@
+/* @layer tokens — project DS bridge for the dev-server shell.
+ *
+ * Source of truth: .design/system/project/colors_and_type.css (MDCC-DSN/01).
+ * The OKLCH ladders below are pasted in so the dev-server bundle stays
+ * self-contained (a relative `@import` would have to cross from
+ * plugins/design/dev-server/ into the repo's .design/ folder — fragile
+ * once installed centrally). If the DS evolves, re-sync this file
+ * manually and keep the values verbatim.
+ *
+ * Two themes — both first-class, both equal:
+ *   :root + [data-theme="light"]  — paper-light (cream + ink)
+ *   [data-theme="dark"]            — phosphor-dark (default for dev-server)
+ *
+ * Legacy `--u-*` aliases keep existing chrome rules in 3-shell.css and
+ * 4-components.css compiling without a mass rename in this single task.
+ * Sibling-token roles (per CLAUDE.md "design token discipline" memory)
+ * audited at the alias boundary, not blindly renamed.
+ */
+
+@layer tokens {
+
+/* ============================================================
+   Project DS — paper-light (default for marketplace surfaces,
+   also the fallback when no data-theme is set)
+   ============================================================ */
+:root,
+:root[data-theme="light"] {
+  /* Surfaces — paper ladder */
+  --bg-0: oklch(97.5% 0.008 78);
+  --bg-1: oklch(95.5% 0.010 78);
+  --bg-2: oklch(93.0% 0.012 78);
+  --bg-3: oklch(89.5% 0.014 78);
+  --bg-4: oklch(85.0% 0.016 78);
+
+  /* Borders — 1px ink hairlines */
+  --border-subtle:  oklch(86% 0.014 70);
+  --border-default: oklch(74% 0.016 65);
+  --border-strong:  oklch(48% 0.022 60);
+
+  /* Text — ink ladder */
+  --fg-0: oklch(20% 0.020 50);
+  --fg-1: oklch(38% 0.018 50);
+  --fg-2: oklch(52% 0.015 50);
+  --fg-3: oklch(68% 0.012 50);
+
+  /* Accent — amber-rust catalog stamp */
+  --accent:        oklch(56% 0.170 50);
+  --accent-hover:  oklch(50% 0.170 50);
+  --accent-active: oklch(44% 0.170 50);
+  --accent-fg:     oklch(98% 0.008 78);
+  --accent-tint:   oklch(92% 0.040 55);
+
+  /* Status — always-on family */
+  --status-success: oklch(48% 0.14 145);
+  --status-warn:    oklch(64% 0.16  88);
+  --status-error:   oklch(50% 0.20  25);
+  --status-info:    oklch(50% 0.13 230);
+
+  /* Mono cell helpers (inline code, DS view, comment chips) */
+  --mono-cell-bg:   oklch(95% 0.010 78);
+  --mono-cell-fg:   oklch(28% 0.020 30);
+  --mono-rule:      oklch(82% 0.014 65);
+
+  color-scheme: light;
+}
+
+/* ============================================================
+   Project DS — phosphor-dark (dev-server default canvas)
+   ============================================================ */
+[data-theme="dark"] {
+  --bg-0: oklch(13% 0.012 60);
+  --bg-1: oklch(17% 0.014 60);
+  --bg-2: oklch(20% 0.016 60);
+  --bg-3: oklch(24% 0.018 60);
+  --bg-4: oklch(28% 0.020 60);
+
+  --border-subtle:  oklch(28% 0.018 60);
+  --border-default: oklch(40% 0.022 60);
+  --border-strong:  oklch(58% 0.026 60);
+
+  --fg-0: oklch(94% 0.014 80);
+  --fg-1: oklch(78% 0.014 80);
+  --fg-2: oklch(60% 0.012 80);
+  --fg-3: oklch(44% 0.010 80);
+
+  --accent:        oklch(72% 0.160 55);
+  --accent-hover:  oklch(78% 0.160 55);
+  --accent-active: oklch(84% 0.160 55);
+  --accent-fg:     oklch(14% 0.020 50);
+  --accent-tint:   oklch(28% 0.060 55);
+
+  --status-success: oklch(72% 0.16 145);
+  --status-warn:    oklch(80% 0.16  88);
+  --status-error:   oklch(68% 0.20  25);
+  --status-info:    oklch(72% 0.13 230);
+
+  --mono-cell-bg:   oklch(20% 0.016 60);
+  --mono-cell-fg:   oklch(88% 0.014 60);
+  --mono-rule:      oklch(32% 0.020 60);
+
+  color-scheme: dark;
+}
+
+/* ============================================================
+   Theme-invariant tokens (shared between paper + phosphor)
+   ============================================================ */
+:root {
+  /* Radii — hard-edges: 0 / 2 / 4 only */
+  --radius-xs: 0;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 4px;
+  --radius-xl: 4px;
+  --radius-pill: 0;
+
+  /* Spacing — 4 px base */
+  --space-0:  0;
+  --space-1:  2px;
+  --space-2:  4px;
+  --space-3:  8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 48px;
+  --space-9: 64px;
+
+  /* Typography — Berkeley Mono everywhere (fall back through JetBrains Mono → ui-monospace) */
+  --font-display: 'Berkeley Mono', 'TX-02', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-body:    'Berkeley Mono', 'TX-02', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-mono:    'Berkeley Mono', 'TX-02', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  /* 8-step type scale */
+  --type-xs:   11px;  --lh-xs:   16px;
+  --type-sm:   12px;  --lh-sm:   18px;
+  --type-base: 13px;  --lh-base: 20px;
+  --type-md:   15px;  --lh-md:   24px;
+  --type-lg:   18px;  --lh-lg:   28px;
+  --type-xl:   22px;  --lh-xl:   30px;
+  --type-2xl:  28px;  --lh-2xl:  36px;
+  --type-3xl:  40px;  --lh-3xl:  48px;
+
+  /* Tracking */
+  --tracking-tight:   -0.01em;
+  --tracking-normal:   0;
+  --tracking-wide:     0.04em;
+  --tracking-sku:      0.12em;
+  --tracking-eyebrow:  0.18em;
+
+  /* Motion */
+  --dur-flip:  90ms;
+  --dur-panel: 140ms;
+  --dur-route: 1ms;
+  --dur-soft:  180ms;
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* Hairline rules — signature treatment */
+  --rule-thin:   1px solid var(--border-default);
+  --rule-strong: 1px solid var(--border-strong);
+  --rule-accent: 1px solid var(--accent);
+
+  /* Shadows — none. Project DS rejects blur; use hairlines instead. */
+  --shadow-sm:    none;
+  --shadow-md:    none;
+  --shadow-lg:    none;
+  --shadow-focus: 0 0 0 2px var(--accent);
+
+  /* ─────────────────────────────────────────────────────────
+     Legacy `--u-*` alias bridge (Phase 3.5 alias-layer).
+     Pre-existing chrome rules in 3-shell.css and 4-components.css
+     consume these names. Each alias points at the project DS
+     token whose ROLE (not just numeric value) matches.
+     ───────────────────────────────────────────────────────── */
+
+  /* Surfaces — direct ladder mirror */
+  --u-bg-0: var(--bg-0);
+  --u-bg-1: var(--bg-1);
+  --u-bg-2: var(--bg-2);
+  --u-bg-3: var(--bg-3);
+  --u-bg-4: var(--bg-4);
+
+  /* State surfaces — project DS uses surface STEPS for state
+     (hover = next surface up) instead of alpha-on-color overlays.
+     Selected uses the accent wash, which is theme-aware. */
+  --u-bg-hover:    var(--bg-2);
+  --u-bg-active:   var(--bg-3);
+  --u-bg-selected: var(--accent-tint);
+
+  /* Text */
+  --u-fg-0: var(--fg-0);
+  --u-fg-1: var(--fg-1);
+  --u-fg-2: var(--fg-2);
+  --u-fg-3: var(--fg-3);
+
+  /* Borders */
+  --u-border:        var(--border-default);
+  --u-border-subtle: var(--border-subtle);
+  --u-border-strong: var(--border-strong);
+
+  /* Accent — sibling roles preserved:
+     --u-accent        = brand-fill identity (catalog stamp)
+     --u-accent-strong = pressed / focus-active stroke
+     --u-accent-line   = 1px boundary stroke on accent surfaces
+     --u-accent-bg     = soft accent wash for cells
+     --u-accent-fg     = text on a saturated accent fill */
+  --u-accent:        var(--accent);
+  --u-accent-bg:     var(--accent-tint);
+  --u-accent-line:   var(--accent-hover);
+  --u-accent-strong: var(--accent-active);
+  --u-accent-fg:     var(--accent-fg);
+
+  /* Status */
+  --u-status-success: var(--status-success);
+  --u-status-warn:    var(--status-warn);
+  --u-status-error:   var(--status-error);
+  --u-status-info:    var(--status-info);
+  --u-status-live:    var(--status-error);
+
+  /* Radii — collapse legacy ladder onto 0 / 2 / 4 (chrome chips
+     keep --radius-md to remain readable; --u-r-pill no longer
+     produces full pills, by design). */
+  --u-r-xs:   var(--radius-xs);
+  --u-r-sm:   var(--radius-sm);
+  --u-r-md:   var(--radius-md);
+  --u-r-lg:   var(--radius-md);
+  --u-r-pill: var(--radius-md);
+
+  /* Spacing — legacy 5-step → project DS 4 px base */
+  --u-s-1: var(--space-2);   /*  4 px */
+  --u-s-2: var(--space-3);   /*  8 px */
+  --u-s-3: var(--space-4);   /* 12 px */
+  --u-s-4: var(--space-5);   /* 16 px */
+  --u-s-5: var(--space-6);   /* 24 px */
+
+  /* Fonts — sans family collapses; everything is mono now */
+  --u-font-display: var(--font-display);
+  --u-font-body:    var(--font-body);
+  --u-font-sans:    var(--font-body);
+  --u-font-mono:    var(--font-mono);
+
+  /* Mono cell helpers */
+  --u-mono-cell-bg: var(--mono-cell-bg);
+  --u-mono-cell-fg: var(--mono-cell-fg);
+  --u-mono-rule:    var(--mono-rule);
+
+  /* Layout dims — theme-invariant chrome geometry */
+  --u-sidebar-w:  320px;
+  --u-rsidebar-w: 360px;
+  --u-header-h:   44px;
+  --u-status-h:   28px;
+}
+
+/* When no data-theme attr is set AND the OS prefers dark, mirror the
+   dark block onto :root so the dev-server still looks right when the
+   <html data-theme> attribute hasn't been written by JS yet. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --bg-0: oklch(13% 0.012 60);
+    --bg-1: oklch(17% 0.014 60);
+    --bg-2: oklch(20% 0.016 60);
+    --bg-3: oklch(24% 0.018 60);
+    --bg-4: oklch(28% 0.020 60);
+    --border-subtle:  oklch(28% 0.018 60);
+    --border-default: oklch(40% 0.022 60);
+    --border-strong:  oklch(58% 0.026 60);
+    --fg-0: oklch(94% 0.014 80);
+    --fg-1: oklch(78% 0.014 80);
+    --fg-2: oklch(60% 0.012 80);
+    --fg-3: oklch(44% 0.010 80);
+    --accent:        oklch(72% 0.160 55);
+    --accent-hover:  oklch(78% 0.160 55);
+    --accent-active: oklch(84% 0.160 55);
+    --accent-fg:     oklch(14% 0.020 50);
+    --accent-tint:   oklch(28% 0.060 55);
+    --status-success: oklch(72% 0.16 145);
+    --status-warn:    oklch(80% 0.16  88);
+    --status-error:   oklch(68% 0.20  25);
+    --status-info:    oklch(72% 0.13 230);
+    --mono-cell-bg:   oklch(20% 0.016 60);
+    --mono-cell-fg:   oklch(88% 0.014 60);
+    --mono-rule:      oklch(32% 0.020 60);
+    color-scheme: dark;
+  }
+}
+
+/* Reduced-motion guard — collapses every transition to ~instant. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-flip:  1ms;
+    --dur-panel: 1ms;
+    --dur-route: 1ms;
+    --dur-soft:  1ms;
+  }
+}
+
+}

package/plugins/design/dev-server/client/styles/2-layout.css

@@ -0,0 +1,35 @@
+/* @layer layout — top-level grid only. */
+@layer layout {
+/* ----- App shell -----
+   `minmax(0, 1fr)` on the .main column is load-bearing: without it, a long
+   selector string in the statusbar's .sb-sel-text would grow the grid track
+   wider than 100vw and trigger horizontal body scroll. `1fr` defaults to
+   `minmax(auto, 1fr)`, and `auto` = `min-content`, which for an unbreakable
+   selector string is the string's full width. Clamping to `minmax(0, 1fr)`
+   lets the column shrink below content min-size and lets the inner overflow
+   rules (statusbar text-overflow: ellipsis, menubar overflow: hidden) win. */
+.app {
+  display: grid;
+  grid-template-columns: var(--u-sidebar-w) minmax(0, 1fr);
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+.app.with-rsidebar {
+  grid-template-columns: var(--u-sidebar-w) minmax(0, 1fr) var(--u-rsidebar-w);
+}
+/* Project tree closed (View > Project Tree off) — collapse the sidebar
+   column entirely so the main viewport gets the full width. We hide instead
+   of `display: none` on the .sidebar so its state (search input value, etc.)
+   isn't lost on toggle. */
+.app.no-sidebar {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+.app.no-sidebar.with-rsidebar {
+  grid-template-columns: 0 minmax(0, 1fr) var(--u-rsidebar-w);
+}
+.app.no-sidebar > .sidebar {
+  visibility: hidden;
+  pointer-events: none;
+}
+}