@1agh/maude 0.19.0 → 0.20.0

package/plugins/design/dev-server/client/app.jsx

@@ -1049,7 +1049,7 @@ function Wordmark({ project, port, version }) {
   );
 }
 
-function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSystem, project, cfg }) {
+function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSystem, onSelectDs, project, cfg }) {
   return (
     <div className="viewport">
       {tabs.length === 0 && (
@@ -1073,7 +1073,7 @@ function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSyst
         if (t.path === SYSTEM_TAB) {
           return (
             <div key={t.path} className={'system-view' + (t.path === activePath ? ' active' : '')}>
-              <SystemView data={systemData} onOpen={onOpenFromSystem} cfg={cfg} />
+              <SystemView data={systemData} onOpen={onOpenFromSystem} cfg={cfg} onSelectDs={onSelectDs} />
             </div>
           );
         }
@@ -1092,83 +1092,184 @@ function Viewport({ tabs, activePath, registerIframe, systemData, onOpenFromSyst
 }
 
 // ---------- SystemView ----------
-
-const TOKEN_NAMES = [
-  '--bg-0', '--bg-1', '--bg-2', '--bg-3', '--bg-4',
-  '--fg-0', '--fg-1', '--fg-2', '--fg-3',
-  '--accent', '--accent-hover', '--accent-active', '--accent-fg', '--accent-tint',
-  '--status-success', '--status-warn', '--status-error', '--status-info',
-  '--border-subtle', '--border-default', '--border-strong',
+//
+// DDR-048 — the System view renders the USER's design-system tokens. It does
+// NOT read from `document.documentElement` (that would surface the dev-server
+// shell's amber-rust chrome theme from styles/1-tokens.css, which is NOT a
+// user template) and it does NOT assume any canonical token-name contract.
+// Whatever the user's `colors_and_type.css` declared — names, values, theme
+// blocks — is what shows up here.
+
+// Order kinds match the typical reading flow of a tokens file. Unknown kinds
+// fall through to `other` so a custom token group still renders, just last.
+const TOKEN_GROUP_ORDER = [
+  'color', 'space', 'radius', 'shadow', 'leading', 'weight', 'motion', 'font', 'other',
 ];
-const TYPE_STEPS = ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl'];
+const TOKEN_GROUP_LABELS = {
+  color: 'colors',
+  space: 'spacing',
+  radius: 'radii',
+  shadow: 'shadows',
+  leading: 'leading',
+  weight: 'weights',
+  motion: 'motion',
+  font: 'font stacks',
+  other: 'other',
+};
 
-function readTokens(names) {
-  if (typeof window === 'undefined') return names.map(name => ({ name, value: '' }));
-  const cs = getComputedStyle(document.documentElement);
-  return names.map(name => ({ name, value: cs.getPropertyValue(name).trim() }));
-}
+function isSwatchKind(kind) { return kind === 'color'; }
+
+function TokenLadder({ tokens, tokenGroups, tokensPath }) {
+  if (!tokens || tokens.length === 0) {
+    return (
+      <section className="sv-section sv-section-tokens">
+        <h2>tokens<span className="sv-h-num">0</span></h2>
+        <div className="sv-empty">
+          <p>
+            No tokens parsed from {tokensPath ? <code>{tokensPath}</code> : 'the configured tokens file'}.
+            Does the file exist and contain CSS custom properties (<code>--name: value;</code>)?
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  const groups = tokenGroups || {};
+  const kinds = Array.from(
+    new Set([...TOKEN_GROUP_ORDER, ...Object.keys(groups)])
+  ).filter((k) => groups[k]?.length);
 
-function TokenLadder() {
-  const [tokens, setTokens] = useState(() => readTokens(TOKEN_NAMES));
-  useEffect(() => {
-    setTokens(readTokens(TOKEN_NAMES));
-    const obs = new MutationObserver(() => setTokens(readTokens(TOKEN_NAMES)));
-    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
-    return () => obs.disconnect();
-  }, []);
   return (
-    <section className="sv-section sv-section-tokens">
-      <h2>tokens · surfaces & ink<span className="sv-h-num">{tokens.length}</span></h2>
-      <div className="sv-tokens-ladder">
-        {tokens.map(t => (
-          <div className="sv-tok-cell" key={t.name}>
-            <div className="sv-tok-swatch" style={{ background: `var(${t.name})` }} />
-            <div className="sv-tok-meta">
-              <code className="sv-tok-name">{t.name}</code>
-              <span className="sv-tok-value">{t.value || '—'}</span>
+    <>
+      {kinds.map((kind) => {
+        const list = groups[kind];
+        const swatch = isSwatchKind(kind);
+        return (
+          <section className={'sv-section sv-section-tokens sv-section-' + kind} key={kind}>
+            <h2>
+              tokens · {TOKEN_GROUP_LABELS[kind] || kind}
+              <span className="sv-h-num">{list.length}</span>
+            </h2>
+            <div className="sv-tokens-ladder">
+              {list.map((t) => (
+                <div className="sv-tok-cell" key={t.name + '|' + t.value}>
+                  {swatch ? (
+                    <div className="sv-tok-swatch" style={{ background: t.value }} />
+                  ) : null}
+                  <div className="sv-tok-meta">
+                    <code className="sv-tok-name">{t.name}</code>
+                    <span className="sv-tok-value">{t.value || '—'}</span>
+                  </div>
+                </div>
+              ))}
             </div>
-          </div>
-        ))}
-      </div>
-    </section>
+          </section>
+        );
+      })}
+    </>
   );
 }
 
-function TypeLadder() {
+// Find a leading partner by name suffix: --fs-base → --lh-base, --type-xl → --lh-xl.
+// Returns null when no convention match exists; caller omits the lineHeight style.
+function findLeadingFor(typeToken, leadingTokens) {
+  const m = typeToken.name.match(/^--(?:type|fs|text)-(.+)$/);
+  if (!m) return null;
+  const suffix = m[1];
+  return (leadingTokens || []).find((t) =>
+    /^--(?:lh|leading|line-height)-/.test(t.name) && t.name.endsWith('-' + suffix)
+  )?.value ?? null;
+}
+
+// Best-effort sample font: prefer body / sans / display tokens, fall back to
+// the first font-kind token, fall back to system-ui. Avoids the shell's
+// Berkeley Mono leaking into user-facing previews.
+function sampleFontFamily(fontTokens) {
+  if (!fontTokens?.length) return undefined;
+  const prefer = ['body', 'sans', 'display', 'text', 'family'];
+  for (const tag of prefer) {
+    const hit = fontTokens.find((t) => t.name.includes(tag));
+    if (hit) return hit.value;
+  }
+  return fontTokens[0].value;
+}
+
+function TypeLadder({ tokenGroups }) {
+  const typeTokens = tokenGroups?.fontsize || [];
+  if (typeTokens.length === 0) return null;
+  const leadingTokens = tokenGroups?.leading || [];
+  const sampleFont = sampleFontFamily(tokenGroups?.font);
+
   return (
     <section className="sv-section sv-section-type">
-      <h2>type · 8-step ladder<span className="sv-h-num">{TYPE_STEPS.length}</span></h2>
+      <h2>
+        type · ladder<span className="sv-h-num">{typeTokens.length}</span>
+      </h2>
       <div className="sv-type-list">
-        {TYPE_STEPS.map(s => (
-          <div className="sv-type-row" key={s}>
-            <code className="sv-type-tok">--type-{s}</code>
-            <span className="sv-type-sample" style={{ fontSize: `var(--type-${s})`, lineHeight: `var(--lh-${s})` }}>
-              The catalog is the system.
-            </span>
-          </div>
-        ))}
+        {typeTokens.map((t) => {
+          const lh = findLeadingFor(t, leadingTokens);
+          const style = { fontSize: t.value };
+          if (lh) style.lineHeight = lh;
+          if (sampleFont) style.fontFamily = sampleFont;
+          return (
+            <div className="sv-type-row" key={t.name}>
+              <code className="sv-type-tok">{t.name}</code>
+              <span className="sv-type-sample" style={style}>
+                The catalog is the system.
+              </span>
+            </div>
+          );
+        })}
       </div>
     </section>
   );
 }
 
-function SystemView({ data, onOpen, cfg }) {
+function SystemView({ data, onOpen, cfg, onSelectDs }) {
   if (!data) {
     return <div className="sv-empty"><p>Loading design system…</p></div>;
   }
-  const { previewGallery, uiKitsGallery, systemDir } = data;
+  const {
+    previewGallery,
+    uiKitsGallery,
+    systemDir,
+    tokens,
+    tokenGroups,
+    tokensPath,
+    ds,
+    availableDesignSystems,
+  } = data;
   const empty = (!previewGallery || !previewGallery.length) && (!uiKitsGallery || !uiKitsGallery.length);
+  const hasPicker = Array.isArray(availableDesignSystems) && availableDesignSystems.length > 1;
+  const selectedName = ds?.name ?? availableDesignSystems?.[0]?.name ?? '';
 
   return (
     <div className="sv">
       <header className="sv-header">
         <span className="sv-sku">MDCC-DSN/01</span>
         <span className="sv-title">design system view</span>
+        {hasPicker ? (
+          <label className="sv-ds-picker">
+            <span className="sv-ds-picker-label">DS</span>
+            <select
+              value={selectedName}
+              onChange={(e) => onSelectDs && onSelectDs(e.target.value)}
+            >
+              {availableDesignSystems.map((d) => (
+                <option key={d.name} value={d.name}>{d.name}</option>
+              ))}
+            </select>
+          </label>
+        ) : null}
         <span className="sv-loc"><code>{systemDir}</code></span>
       </header>
 
-      <TokenLadder />
-      <TypeLadder />
+      {ds?.description ? (
+        <p className="sv-ds-description">{ds.description}</p>
+      ) : null}
+
+      <TokenLadder tokens={tokens} tokenGroups={tokenGroups} tokensPath={tokensPath} />
+      <TypeLadder tokenGroups={tokenGroups} />
 
       {empty ? (
         <div className="sv-empty">
@@ -1494,10 +1595,29 @@ function App() {
   useEffect(() => { loadTree(); }, [loadTree]);
 
   // ----- System data (lazy) -----
-  const loadSystemData = useCallback(async () => {
+  // `dsName` scopes to a single design-system entry (DDR-048). The initial
+  // call is unscoped — server returns `availableDesignSystems[]` + a default
+  // — so the picker can render without a probe round-trip. Subsequent calls
+  // (e.g. picker change) pass the chosen DS name and we replace systemData
+  // wholesale (tokens + previews + ds metadata all shift together).
+  const loadSystemData = useCallback(async (dsName) => {
     try {
-      const r = await fetch('/_system-data');
+      const url = dsName ? `/_system-data?ds=${encodeURIComponent(dsName)}` : '/_system-data';
+      const r = await fetch(url);
+      if (!r.ok) {
+        console.error('failed to load system-data', r.status);
+        return;
+      }
       const data = await r.json();
+      // If the initial unscoped fetch has a defaultDesignSystem but no `ds`
+      // attached (multi-DS project), kick off a scoped fetch so the visible
+      // tokens + previews match the default DS, not the union root scan.
+      if (!dsName && data?.defaultDesignSystem && !data.ds) {
+        setSystemData(data);
+        const r2 = await fetch(`/_system-data?ds=${encodeURIComponent(data.defaultDesignSystem)}`);
+        if (r2.ok) setSystemData(await r2.json());
+        return;
+      }
       setSystemData(data);
     } catch (e) {
       console.error('failed to load system-data', e);
@@ -1918,6 +2038,7 @@ function App() {
           registerIframe={registerIframe}
           systemData={systemData}
           onOpenFromSystem={openTab}
+          onSelectDs={loadSystemData}
           project={project}
           cfg={cfg}
         />

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

@@ -65,6 +65,34 @@ function handle(evt) {
         }
       }
     }
+    return;
+  }
+  if (evt.type === 'fs:json' && evt.file) {
+    // Phase 20 (DDR-049) — external edits to canvas `.meta.json` or
+    // `.annotations.svg` invalidate the iframe's in-memory undo stack
+    // (stale before/after snapshots would otherwise restore wrong state).
+    // The iframe's UndoStackProvider self-echo-dampens our own PATCH-es
+    // via window.__maude_last_meta_self_write_at, so we forward
+    // indiscriminately here.
+    const file = evt.file;
+    const isMeta = file.endsWith('.meta.json');
+    if (!isMeta) return;
+    const iframes = document.querySelectorAll('iframe[data-canvas-path]');
+    for (const f of iframes) {
+      if (!f.dataset.canvasPath) continue;
+      // Match by the canvas filename root (foo.tsx ↔ foo.meta.json).
+      const root = f.dataset.canvasPath.replace(/\.(tsx|jsx|ts|js|html)$/i, '');
+      if (!file.includes(`${root}.meta.json`)) continue;
+      try {
+        f.contentWindow?.dispatchEvent(
+          new CustomEvent('maude:invalidate-undo', {
+            detail: { reason: 'Edit history reset (external change)' },
+          })
+        );
+      } catch {
+        /* cross-origin / detached — ignore */
+      }
+    }
   }
 }
 

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

@@ -1,13 +1,20 @@
-/* @layer tokens — project DS bridge for the dev-server shell.
+/* @layer tokens — SHELL theme for the dev-server UI itself.
  *
- * 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.
+ * ⚠ This is NOT a template for user design systems and NOT a fallback for
+ * the System view's token ladder. It themes the dev-server chrome — sidebar,
+ * status bar, header, menubar, comments panel, System tab outer shell. The
+ * amber-rust "catalog stamp" aesthetic below belongs to Maude as a tool, not
+ * to any project that runs against it.
  *
- * Two themes — both first-class, both equal:
+ * Per DDR-048, the System view (MDCC-DSN/01) reads user tokens from the
+ * project's own `colors_and_type.css` (parsed by the server, returned via
+ * /_system-data) and renders them by raw value — never by `var(--name)`
+ * resolving against this document. That isolation is load-bearing: prior
+ * to DDR-048 the System view leaked these shell tokens into the user's
+ * "design system overview" because both happened to share the canonical
+ * `--bg-0..4 / --fg-0..3 / --accent*` naming.
+ *
+ * Two shell themes — both first-class, both equal:
  *   :root + [data-theme="light"]  — paper-light (cream + ink)
  *   [data-theme="dark"]            — phosphor-dark (default for dev-server)
  *

package/plugins/design/dev-server/client/styles/4-components.css

@@ -36,14 +36,44 @@
 
 /* CV-09 header — SKU framing, hairline divider underneath. */
 .sv-header {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: flex;
+  flex-wrap: wrap;
   align-items: baseline;
   gap: var(--space-5);
   border-bottom: 2px solid var(--u-fg-0);
   padding-bottom: var(--u-s-3);
   margin-bottom: var(--u-s-5);
 }
+.sv-header .sv-title { flex: 1 1 auto; }
+.sv-ds-picker {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--u-s-2);
+  font-family: var(--u-font-mono);
+  font-size: 10px;
+  letter-spacing: var(--tracking-sku);
+  text-transform: uppercase;
+  color: var(--u-fg-2);
+}
+.sv-ds-picker select {
+  font-family: var(--u-font-mono);
+  font-size: 11px;
+  color: var(--u-fg-0);
+  background: var(--u-bg-1);
+  border: 1px solid var(--u-border);
+  border-radius: var(--u-r-sm);
+  padding: 2px 6px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.sv-ds-description {
+  font-family: var(--u-font-body);
+  font-size: var(--type-sm);
+  line-height: 1.5;
+  color: var(--u-fg-1);
+  margin: 0 0 var(--u-s-5);
+  max-width: 72ch;
+}
 .sv-sku {
   font-family: var(--u-font-mono);
   font-size: var(--type-lg);

package/plugins/design/dev-server/commands/annotation-strokes-command.ts

@@ -0,0 +1,127 @@
+/**
+ * @file       commands/annotation-strokes-command.ts — undo entry for annotation
+ *             stroke add / erase / batch-translate.
+ * @scope      plugins/design/dev-server/commands/annotation-strokes-command.ts
+ * @purpose    Records a `Stroke[]` pair (before/after) and routes both
+ *             directions through a single `putFn`. The server endpoint is
+ *             `PUT /_api/annotations` which replaces the entire SVG; we
+ *             match that shape rather than diffing.
+ *
+ *             Per DDR-050 rev 2 the runtime command is rebuilt per iframe
+ *             mount from a serializable `CommandRecord` so the stack
+ *             survives canvas switches. The `putFn` here also updates the
+ *             iframe's local React strokes state (see annotations-layer
+ *             `putStrokes`) so undo/redo visibly refresh, not just PUT.
+ *
+ *             Why per-stroke commands (not coalesced into a 300 ms window):
+ *             matches Figma/FigJam — Cmd+Z reverts the most recent tap or
+ *             pen stroke individually. Coalescing into windows led to a
+ *             matoucí "why did Cmd+Z erase two of my last lines?" UX.
+ */
+
+import type { Stroke } from '../annotations-layer.tsx';
+import type { CommandRecord, CommandSinks, EditCommand } from '../undo-stack.ts';
+import { registerCommand } from '../undo-stack.ts';
+
+/**
+ * Push-once callable that submits a full `Stroke[]` to the server (or its
+ * test stub) AND updates the iframe's local strokes state. The
+ * annotations-layer `putStrokes` is the production binding.
+ */
+export type StrokesPutFn = (next: readonly Stroke[]) => void | Promise<void>;
+
+export interface AnnotationStrokesPayload {
+  before: readonly Stroke[];
+  after: readonly Stroke[];
+}
+
+export const ANNOTATION_STROKES_KIND = 'annotation-strokes';
+
+export interface AnnotationStrokesCommandInit {
+  before: readonly Stroke[];
+  after: readonly Stroke[];
+  putFn: StrokesPutFn;
+  /** Optional label override (eraser → "erase 1 stroke"). */
+  label?: string;
+  /** Telemetry kind. */
+  kind?: string;
+}
+
+export function createAnnotationStrokesCommand(init: AnnotationStrokesCommandInit): EditCommand {
+  const { putFn } = init;
+  const before = init.before.map(cloneStroke);
+  const after = init.after.map(cloneStroke);
+  const label = init.label ?? defaultLabel(before, after);
+  const kind = init.kind ?? ANNOTATION_STROKES_KIND;
+
+  return {
+    kind,
+    label,
+    async do() {
+      await putFn(after.map(cloneStroke));
+    },
+    async undo() {
+      await putFn(before.map(cloneStroke));
+    },
+  };
+}
+
+/**
+ * Build a persistable record from the same inputs as `createAnnotationStrokesCommand`.
+ * Used by the consumer alongside the EditCommand so the runtime side-effect
+ * and the stored shape share one snapshot.
+ */
+export function buildAnnotationStrokesRecord(opts: {
+  before: readonly Stroke[];
+  after: readonly Stroke[];
+  label?: string;
+}): CommandRecord<AnnotationStrokesPayload> {
+  const before = opts.before.map(cloneStroke);
+  const after = opts.after.map(cloneStroke);
+  return {
+    kind: ANNOTATION_STROKES_KIND,
+    label: opts.label ?? defaultLabel(before, after),
+    payload: { before, after },
+  };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Registry
+
+registerCommand<AnnotationStrokesPayload>(ANNOTATION_STROKES_KIND, (record, sinks) => {
+  const putFn = sinks.strokesPutFn as StrokesPutFn | undefined;
+  if (!putFn) return null;
+  return createAnnotationStrokesCommand({
+    before: record.payload.before,
+    after: record.payload.after,
+    putFn,
+    label: record.label,
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internals
+
+/**
+ * Structured clone — works for every Stroke variant because they're plain
+ * JSON-shaped (no Date / Map / DOM nodes). The pen `points: WorldPoint[]`
+ * array is nested-cloned too so callers can't poison the snapshot by
+ * mutating the source.
+ */
+function cloneStroke<T extends Stroke>(s: T): T {
+  // structuredClone is available on every runtime we ship to (Bun, modern
+  // browsers, Node 17+). Fall back to JSON for the rare older harness.
+  if (typeof structuredClone === 'function') return structuredClone(s);
+  return JSON.parse(JSON.stringify(s)) as T;
+}
+
+function defaultLabel(before: readonly Stroke[], after: readonly Stroke[]): string {
+  const added = after.length - before.length;
+  if (added > 0) return `add ${added} stroke${added === 1 ? '' : 's'}`;
+  if (added < 0) {
+    const erased = -added;
+    return `erase ${erased} stroke${erased === 1 ? '' : 's'}`;
+  }
+  // Same count — could be translate / edit / fill-change.
+  return `edit ${after.length} stroke${after.length === 1 ? '' : 's'}`;
+}

package/plugins/design/dev-server/commands/equal-spacing-command.ts

@@ -0,0 +1,28 @@
+/**
+ * @file       commands/equal-spacing-command.ts — undo label helpers for
+ *             equal-spacing / align gestures.
+ * @scope      plugins/design/dev-server/commands/equal-spacing-command.ts
+ * @purpose    Distribute + align both call `dragBus.commitPositions(moved)`,
+ *             which wraps the move in a generic MoveArtboardsCommand. Per
+ *             DDR-050 the underlying command type is shared (the inverse
+ *             payload is identical — a layout snapshot pair) and only the
+ *             HUD label differs. These helpers compute the labels.
+ *
+ *             Why not a separate Command class? The wrapping logic would
+ *             duplicate `before`/`after`/`patchFn` + add an indirection.
+ *             A label is a one-line string; a factory is overkill.
+ *             Keeping `MoveArtboardsCommand` as the only artboard-layout
+ *             command keeps the future Yjs swap (Phase 8) one-for-one.
+ */
+
+export type AlignMode = 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y';
+
+/** "equal-space 3 artboards" — N must be ≥ 3 (distribute requires it). */
+export function equalSpacingLabel(n: number): string {
+  return `equal-space ${n} artboard${n === 1 ? '' : 's'}`;
+}
+
+/** "align left 4 artboards" — N must be ≥ 2 (align requires it). */
+export function alignLabel(mode: AlignMode, n: number): string {
+  return `align ${mode} ${n} artboard${n === 1 ? '' : 's'}`;
+}