@1agh/maude 0.28.0 → 0.29.0

package/apps/studio/client/canvas-url.js

@@ -0,0 +1,81 @@
+// Canvas iframe URL builder — pure, dependency-free (URLSearchParams only) so it
+// is unit-testable without booting React or a DOM. `app.jsx` imports both
+// helpers; `test/canvas-url.test.ts` exercises the token-resolution branches.
+//
+// DDR-093 — a UI canvas resolves its tokens/components from its OWN design
+// system (`meta.designSystem`, surfaced by the server as
+// `cfg.canvasDesignSystems[path]`), NOT unconditionally from `designSystems[0]`.
+// Before this, every `ui/*.tsx` authored under a non-default DS loaded the
+// default DS's tokens — whose ladder is scoped to a different `.<rootClass>`
+// subtree — so every `var(--*)` went undefined and the canvas rendered white.
+
+export function urlOf(p) {
+  return '/' + p.split('/').map(encodeURIComponent).join('/');
+}
+
+export function canvasUrl(p, cfg, opts) {
+  if (!p.endsWith('.tsx')) return urlOf(p);
+  const designRel = (cfg?.designRel || '.design').replace(/^\/+|\/+$/g, '');
+  // Path under designRoot.
+  let rel = p;
+  if (rel.startsWith(designRel + '/')) rel = rel.slice(designRel.length + 1);
+  // Pass `rel` to URLSearchParams RAW — it does encoding once. Pre-encoding
+  // with encodeURIComponent then handing to URLSearchParams produced
+  // `Docs%2520Site.tsx` (the `%` of `%20` got re-encoded as `%25`) and broke
+  // every UI canvas with a space in its filename.
+  const params = new URLSearchParams();
+  params.set('canvas', rel);
+  params.set('designRel', designRel);
+  // Gallery thumbnails suppress the shell-owned comment layer (`?comments=0`)
+  // so previews stay non-interactive; opening the same canvas as a real tab
+  // omits the flag and gets comments. See canvas-comment-mount.tsx.
+  if (opts?.thumbnail) params.set('comments', '0');
+  const ds0 = cfg?.designSystems?.[0];
+  // Specimen detection: anything under `system/<ds>/preview/` belongs to that
+  // specific DS, so it must render with *that* DS's tokens — not always the
+  // first one. In a multi-DS project this is what keeps each design system's
+  // preview distinct (beta previews use beta tokens, not alpha's).
+  const specMatch = rel.match(/^system\/([^/]+)\/preview\//);
+  const specDsEntry = specMatch
+    ? cfg?.designSystems?.find(
+        (d) => d.path === `system/${specMatch[1]}` || d.path.endsWith(`/${specMatch[1]}`)
+      )
+    : null;
+  // For a UI canvas (NOT a specimen), honor its declared design system. The
+  // explicit `opts.ds` wins (the unit-test seam); otherwise the server-surfaced
+  // `cfg.canvasDesignSystems[path]` map tells us which DS this canvas authored
+  // against. Unknown DS (single-DS / legacy / default-DS canvas) → `ds0`, which
+  // keeps the historical behavior byte-for-byte. DDR-093.
+  const uiDsName = !specMatch ? (opts?.ds ?? cfg?.canvasDesignSystems?.[p]) : null;
+  const uiDsEntry = uiDsName ? cfg?.designSystems?.find((d) => d.name === uiDsName) : null;
+  const uiDs = uiDsEntry || ds0;
+  // Resolve tokens path. For a specimen, prefer the matching DS's tokensCssRel
+  // (fall back to the `system/<ds>/colors_and_type.css` convention). Otherwise
+  // prefer the canvas's own design system's tokensCssRel — falling back to ds0
+  // then the legacy top-level `cfg.tokensCssRel` (`system/colors_and_type.css`,
+  // usually absent post-bootstrap).
+  const tokens = specMatch
+    ? specDsEntry?.tokensCssRel || `system/${specMatch[1]}/colors_and_type.css`
+    : uiDs?.tokensCssRel || cfg?.tokensCssRel;
+  if (tokens) params.set('tokens', tokens);
+  if (cfg?.componentsCssRel) params.set('components', cfg.componentsCssRel);
+  if (specMatch) {
+    const dsName = specMatch[1];
+    params.set('layout', `system/${dsName}/preview/_layout.css`);
+    if (!cfg?.componentsCssRel) {
+      params.set('components', `system/${dsName}/preview/_components.css`);
+    }
+  } else if (uiDs?.path) {
+    // UI canvas — load the canvas's own DS `_components.css` so the dc-canvas /
+    // dc-section / dc-artboard chrome (and any DS classes the canvas reuses)
+    // renders correctly under the same DS as the tokens above.
+    if (!cfg?.componentsCssRel) {
+      params.set('components', `${uiDs.path}/preview/_components.css`);
+    }
+  }
+  // T2 (9.1-A) — load the iframe from the segregated canvas origin when the
+  // server advertises one; fall back to a same-origin relative URL otherwise
+  // (older server, tests). The trailing path + query are identical either way.
+  const origin = cfg?.canvasOrigin || '';
+  return `${origin}/_canvas-shell.html?${params.toString()}`;
+}

package/{plugins/design/dev-server → apps/studio}/client/comments-overlay.css

@@ -28,12 +28,13 @@
   height: 24px;
   padding: 0;
   margin: 0;
-  background: var(--accent, #d63b1f);
+  background: var(--accent, #6f63ef);
   color: var(--accent-fg, #faf6ef);
-  border: 1px solid var(--border-strong, #2a2520);
-  border-radius: 0;
+  border: 1.5px solid var(--bg-0, #14131a);
+  border-radius: var(--radius-sm, 5px) var(--radius-sm, 5px) var(--radius-sm, 5px) 2px;
+  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.3));
   font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
-  letter-spacing: var(--tracking-sku, 0.04em);
+  letter-spacing: var(--tracking-wide, 0.04em);
   display: grid;
   place-items: center;
   cursor: pointer;
@@ -70,11 +71,11 @@
   position: absolute;
   width: 300px;
   background: var(--bg-1, #faf6ef);
-  border: var(--rule-thin, 1px solid #2a2520);
+  border: 1px solid var(--border-default, #3a352f);
   border-radius: var(--radius-sm, 2px);
   padding: var(--space-4, 12px);
-  box-shadow: none;
-  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
+  font: var(--type-sm, 13px) / var(--lh-base, 1.5) var(--font-body, system-ui, sans-serif);
   color: var(--fg-0, #2a2520);
   pointer-events: auto;
   z-index: 4;
@@ -107,8 +108,8 @@
   resize: vertical;
   background: var(--bg-0, #ffffff);
   color: var(--fg-0, #2a2520);
-  border: var(--rule-thin, 1px solid #2a2520);
-  border-radius: 0;
+  border: 1px solid var(--border-default, #3a352f);
+  border-radius: var(--radius-sm, 5px);
   padding: var(--space-3, 8px);
   font: inherit;
   box-sizing: border-box;
@@ -132,8 +133,8 @@
   letter-spacing: var(--tracking-eyebrow, 0.08em);
   text-transform: uppercase;
   padding: var(--space-2, 4px) var(--space-3, 8px);
-  border: var(--rule-thin, 1px solid #2a2520);
-  border-radius: 0;
+  border: 1px solid var(--border-default, #3a352f);
+  border-radius: var(--radius-sm, 5px);
   cursor: pointer;
   background: transparent;
   color: var(--fg-0, #2a2520);
@@ -171,11 +172,11 @@
   max-height: 60vh;
   overflow: auto;
   background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
-  border: var(--rule-thin, 1px solid #2a2520);
+  border: 1px solid var(--border-default, #3a352f);
   border-radius: var(--radius-sm, 2px);
   padding: var(--space-4, 12px);
-  box-shadow: none;
-  font: var(--type-sm, 13px) / var(--lh-sm, 1.45) var(--font-mono, ui-monospace, monospace);
+  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
+  font: var(--type-sm, 13px) / var(--lh-base, 1.5) var(--font-body, system-ui, sans-serif);
   color: var(--fg-0, #2a2520);
   pointer-events: auto;
   z-index: 5;
@@ -186,26 +187,39 @@
   flex-direction: column;
   gap: var(--space-2, 4px);
   padding-bottom: var(--space-3, 8px);
-  border-bottom: var(--rule-thin, 1px solid #2a2520);
+  border-bottom: 1px solid var(--border-default, #3a352f);
 }
 
 .cm-thread__head-row {
   display: flex;
-  justify-content: space-between;
-  align-items: baseline;
+  justify-content: flex-start;
+  align-items: center;
   gap: var(--space-2, 4px);
 }
 
+/* Plan C P18 — pin/sequence badge in the thread popover header. */
+.cm-thread__seq {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  background: var(--accent, #d63b1f);
+  color: var(--accent-fg, #fff);
+  font: 600 var(--type-xs, 11px) / 1 var(--font-mono, ui-monospace, monospace);
+}
+
 .cm-thread__close {
   background: transparent;
   color: var(--fg-2, #6e6660);
-  border: var(--rule-thin, 1px solid #2a2520);
-  border-radius: 0;
+  border: 1px solid var(--border-default, #3a352f);
+  border-radius: var(--radius-sm, 5px);
   padding: 0 var(--space-2, 4px);
   font: 600 var(--type-xs, 11px) / 1.2 var(--font-mono, ui-monospace, monospace);
   cursor: pointer;
   align-self: flex-start;
-  margin-left: var(--space-2, 4px);
+  margin-left: auto;
   transition: background var(--dur-flip, 120ms) var(--ease-out, ease-out);
 }
 
@@ -285,7 +299,7 @@
 
 .cm-thread__reply-form {
   padding-top: var(--space-3, 8px);
-  border-top: var(--rule-thin, 1px solid #2a2520);
+  border-top: 1px solid var(--border-default, #3a352f);
   display: flex;
   flex-direction: column;
   gap: var(--space-2, 4px);
@@ -297,8 +311,8 @@
   resize: vertical;
   background: var(--bg-0, #ffffff);
   color: var(--fg-0, #2a2520);
-  border: var(--rule-thin, 1px solid #2a2520);
-  border-radius: 0;
+  border: 1px solid var(--border-default, #3a352f);
+  border-radius: var(--radius-sm, 5px);
   padding: var(--space-3, 8px);
   font: inherit;
   box-sizing: border-box;
@@ -321,7 +335,7 @@
   gap: var(--space-2, 4px);
   padding-top: var(--space-3, 8px);
   margin-top: var(--space-3, 8px);
-  border-top: var(--rule-thin, 1px solid #2a2520);
+  border-top: 1px solid var(--border-default, #3a352f);
 }
 
 .cm-thread__actions .cm-btn--danger {
@@ -338,14 +352,14 @@
 .cm-mention-popup {
   position: absolute;
   background: var(--bg-2, color-mix(in oklab, var(--bg-1, #faf6ef) 80%, var(--fg-0, #2a2520) 6%));
-  border: var(--rule-thin, 1px solid #2a2520);
-  border-radius: 0;
+  border: 1px solid var(--border-default, #3a352f);
+  border-radius: var(--radius-sm, 5px);
   font: var(--type-xs, 11px) / var(--lh-xs, 1.3) var(--font-mono, ui-monospace, monospace);
   color: var(--fg-0, #2a2520);
   max-height: 180px;
   min-width: 160px;
   overflow: auto;
-  box-shadow: none;
+  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.22));
   pointer-events: auto;
   z-index: 6;
   list-style: none;

package/{plugins/design/dev-server → apps/studio}/client/index.html

@@ -2,7 +2,8 @@
 <html data-theme="dark">
 <head>
 <meta charset="utf-8">
-<title>Design — local browser</title>
+<title>maude · studio</title>
+<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M7%200H25A7%207%200%200%201%2032%207V32H7A7%207%200%200%201%200%2025V7A7%207%200%200%201%207%200Z'%20fill='%235b62e8'/%3E%3Cpath%20d='M16%205l2.8%208.2L27%2016l-8.2%202.8L16%2027l-2.8-8.2L5%2016l8.2-2.8z'%20fill='%23fff'/%3E%3C/svg%3E">
 <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">

package/apps/studio/client/styles/1-tokens-maude.css

@@ -0,0 +1,296 @@
+/* @layer tokens — maude DS token ladder for the studio shell (Plan B).
+ *
+ * Lifted VERBATIM from `.design/system/maude/colors_and_type.css` (the
+ * authoritative maude token file — "Unified Pro Studio", dark-first), with ONE
+ * scoping adaptation: the dark block is bound to `.maude[data-theme="dark"]`
+ * ONLY — NOT `:root` — so it stays additive alongside the legacy amber-rust
+ * shell ladder in `1-tokens.css` while the shell is rewritten slice-by-slice
+ * (Plan B Tasks 3–7). The new `.st-*` chrome lives under a `.maude[data-theme]`
+ * wrapper; old chrome keeps resolving the `:root` amber tokens until removed.
+ *
+ * The `.maude[data-theme]` scope (specificity 0,2,0) wins over `:root` for any
+ * element inside the wrapper, so the maude ladder drives every `.st-*` rule.
+ * Once the last legacy chrome rule is gone (end of Task 6) the amber
+ * `1-tokens.css` + `--u-*` bridge can be deleted and these can fold to `:root`.
+ *
+ * Per CLAUDE.md "Lift, don't reinvent" + DDR-014 (@layer order preserved).
+ */
+
+@layer tokens {
+
+/* ─── DARK — default studio theme ──────────────────────────────────────────── */
+.maude[data-theme="dark"] {
+  /* Surfaces (deepest → highest) — cool-neutral ladder, hue 255 */
+  --bg-0: oklch(0.165 0.012 255);
+  --bg-1: oklch(0.198 0.012 255);
+  --bg-2: oklch(0.232 0.013 255);
+  --bg-3: oklch(0.270 0.013 252);
+  --bg-4: oklch(0.310 0.014 252);
+
+  /* Borders — crisp 1px hairlines */
+  --border-subtle:  oklch(0.290 0.012 255);
+  --border-default: oklch(0.360 0.013 252);
+  --border-strong:  oklch(0.450 0.014 250);
+
+  /* Text */
+  --fg-0: oklch(0.955 0.005 250);
+  --fg-1: oklch(0.790 0.008 250);
+  --fg-2: oklch(0.660 0.010 250);
+  --fg-3: oklch(0.500 0.010 250);
+
+  /* Accent — single confident indigo, hue 268 */
+  --accent:        oklch(0.680 0.180 268);
+  --accent-hover:  oklch(0.730 0.170 268);
+  --accent-active: oklch(0.630 0.180 268);
+  --accent-fg:     oklch(0.180 0.030 268);
+  --accent-muted:  oklch(0.460 0.110 268);
+  --accent-tint:   color-mix(in oklab, var(--accent) 16%, transparent);
+
+  /* Status */
+  --status-success: oklch(0.760 0.150 162);
+  --status-warn:    oklch(0.800 0.130 78);
+  --status-error:   oklch(0.660 0.190 25);
+  --status-info:    oklch(0.720 0.120 238);
+
+  /* Presence (collaborators + AI agent) */
+  --presence-online:  oklch(0.740 0.160 145);
+  --presence-away:    oklch(0.800 0.130 78);
+  --presence-offline: oklch(0.560 0.020 255);
+  --presence-agent:   oklch(0.700 0.190 322);
+
+  /* Shadows — subtle on dark */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
+  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.46);
+  --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.56);
+
+  /* Radii */
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 7px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-pill: 999px;
+
+  /* Spacing — dense, 4px 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;
+
+  /* Typography */
+  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
+  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  --type-xs:   11px;   --lh-xs:   16px;
+  --type-sm:   12px;   --lh-sm:   18px;
+  --type-base: 14px;   --lh-base: 20px;
+  --type-md:   16px;   --lh-md:   24px;
+  --type-lg:   19px;   --lh-lg:   26px;
+  --type-xl:   23px;   --lh-xl:   30px;
+  --type-2xl:  28px;   --lh-2xl:  34px;
+  --type-3xl:  34px;   --lh-3xl:  40px;
+
+  --tracking-tight: -0.014em;
+  --tracking-wide:   0.04em;
+
+  /* Motion — crisp, snappy (Zed-fast) */
+  --dur-flip:  140ms;
+  --dur-panel: 220ms;
+  --dur-route: 280ms;
+  --dur-soft:  120ms;
+  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Canvas (the signature surface — dotted infinite canvas) */
+  --canvas-bg:   var(--bg-0);
+  --canvas-dot:  oklch(0.340 0.012 255);
+  --canvas-grid: 24px;
+
+  /* Layout */
+  --layout-max-w:  none;
+  --layout-gutter: var(--space-5);
+
+  color-scheme: dark;
+}
+
+/* ─── LIGHT — equal-status secondary theme (reading / handoff) ──────────────── */
+.maude[data-theme="light"] {
+  --bg-0: oklch(0.975 0.004 255);
+  --bg-1: oklch(1.000 0 0);
+  --bg-2: oklch(0.987 0.003 255);
+  --bg-3: oklch(0.955 0.005 255);
+  --bg-4: oklch(0.928 0.006 255);
+
+  --border-subtle:  oklch(0.922 0.005 255);
+  --border-default: oklch(0.868 0.007 255);
+  --border-strong:  oklch(0.780 0.009 255);
+
+  --fg-0: oklch(0.225 0.015 260);
+  --fg-1: oklch(0.400 0.014 260);
+  --fg-2: oklch(0.510 0.012 260);
+  --fg-3: oklch(0.660 0.010 260);
+
+  --accent:        oklch(0.520 0.195 268);
+  --accent-hover:  oklch(0.470 0.195 268);
+  --accent-active: oklch(0.430 0.190 268);
+  --accent-fg:     oklch(0.995 0.004 268);
+  --accent-muted:  oklch(0.895 0.050 268);
+  --accent-tint:   color-mix(in oklab, var(--accent) 12%, transparent);
+
+  --status-success: oklch(0.560 0.150 162);
+  --status-warn:    oklch(0.640 0.140 70);
+  --status-error:   oklch(0.560 0.200 25);
+  --status-info:    oklch(0.530 0.150 238);
+
+  --presence-online:  oklch(0.560 0.160 145);
+  --presence-away:    oklch(0.640 0.140 70);
+  --presence-offline: oklch(0.700 0.010 255);
+  --presence-agent:   oklch(0.520 0.190 322);
+
+  --shadow-sm: 0 1px 2px rgba(18, 20, 30, 0.08);
+  --shadow-md: 0 4px 14px rgba(18, 20, 30, 0.10);
+  --shadow-lg: 0 14px 38px rgba(18, 20, 30, 0.14);
+
+  --canvas-bg:  oklch(0.965 0.004 255);
+  --canvas-dot: oklch(0.860 0.008 255);
+
+  color-scheme: light;
+}
+
+/* ─── Legacy `--u-*` alias bridge, RE-DECLARED under `.maude` ────────────────
+ * CRITICAL: the `--u-*` aliases in 1-tokens.css are declared at `:root`, so each
+ * `--u-x: var(--y)` is COMPUTED against the amber `:root --y` and then inherits
+ * that amber value into `.maude` — the `.maude` redefinition of `--y` does NOT
+ * re-trigger the alias. Result: every legacy surface still consuming `--u-*`
+ * (SystemView `.sv-*`, HelpModal, tour nudge, what's-new, CommentBar) rendered
+ * AMBER even inside `.maude`.
+ *
+ * Re-declaring the bridge HERE (selector `.maude`, matching the same element that
+ * carries `data-theme` + the maude `--bg-*`/`--accent`/… ladder) re-computes each
+ * alias against the MAUDE tokens — so all legacy chrome inside the shell turns
+ * maude in one shot, without rewriting each legacy component. Theme-agnostic
+ * selector: the `var(--accent)` etc. re-resolve per the element's current theme.
+ * Remove once the legacy classes are themselves ported to `.st-*`. */
+.maude {
+  /* ─── Theme-AGNOSTIC structural tokens ────────────────────────────────────
+   * Radii / spacing / type / motion are identical in dark + light. They were
+   * originally declared ONLY in the `[data-theme="dark"]` block, so under
+   * `[data-theme="light"]` they fell through to the legacy amber `:root`
+   * (radius 2px, Berkeley Mono) — the "light mode = square corners + wrong
+   * font" bug. Declaring them here (`.maude`, which already wins over `:root`)
+   * gives BOTH themes the maude ladder; the dark block's copies are now
+   * redundant but harmless. (Plan C follow-up; [[css-var-alias-scope-trap]].) */
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 7px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-pill: 999px;
+
+  --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;
+
+  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
+  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  --type-xs:   11px;   --lh-xs:   16px;
+  --type-sm:   12px;   --lh-sm:   18px;
+  --type-base: 14px;   --lh-base: 20px;
+  --type-md:   16px;   --lh-md:   24px;
+  --type-lg:   19px;   --lh-lg:   26px;
+  --type-xl:   23px;   --lh-xl:   30px;
+  --type-2xl:  28px;   --lh-2xl:  34px;
+  --type-3xl:  34px;   --lh-3xl:  40px;
+
+  --tracking-tight: -0.014em;
+  --tracking-wide:   0.04em;
+
+  --dur-flip:  140ms;
+  --dur-panel: 220ms;
+  --dur-route: 280ms;
+  --dur-soft:  120ms;
+  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --canvas-grid: 24px;
+  --layout-max-w:  none;
+  --layout-gutter: var(--space-5);
+
+  --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);
+  --u-bg-hover:    var(--bg-3);
+  --u-bg-active:   var(--bg-4);
+  --u-bg-selected: var(--accent-tint);
+
+  --u-fg-0: var(--fg-0);
+  --u-fg-1: var(--fg-1);
+  --u-fg-2: var(--fg-2);
+  --u-fg-3: var(--fg-3);
+
+  --u-border:        var(--border-default);
+  --u-border-subtle: var(--border-subtle);
+  --u-border-strong: var(--border-strong);
+
+  --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);
+
+  --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(--presence-online);
+
+  --u-r-xs:   var(--radius-xs);
+  --u-r-sm:   var(--radius-sm);
+  --u-r-md:   var(--radius-md);
+  --u-r-lg:   var(--radius-lg);
+  --u-r-pill: var(--radius-pill);
+
+  --u-s-1: var(--space-2);
+  --u-s-2: var(--space-3);
+  --u-s-3: var(--space-4);
+  --u-s-4: var(--space-5);
+  --u-s-5: var(--space-6);
+
+  --u-font-display: var(--font-display);
+  --u-font-body:    var(--font-body);
+  --u-font-sans:    var(--font-body);
+  --u-font-mono:    var(--font-mono);
+
+  --u-mono-cell-bg: var(--bg-2);
+  --u-mono-cell-fg: var(--fg-0);
+  --u-mono-rule:    var(--border-subtle);
+}
+
+/* Reduced-motion: collapse durations everywhere (a11y invariant). */
+@media (prefers-reduced-motion: reduce) {
+  .maude[data-theme="dark"],
+  .maude[data-theme="light"] {
+    --dur-flip:  1ms;
+    --dur-panel: 1ms;
+    --dur-route: 1ms;
+    --dur-soft:  1ms;
+  }
+}
+
+}