@1agh/maude 0.18.2 → 0.19.1

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} />
+              <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 }) {
+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">
@@ -1176,15 +1277,15 @@ function SystemView({ data, onOpen }) {
         </div>
       ) : (
         <>
-          <Gallery title="preview" items={previewGallery} onOpen={onOpen} kind="preview" />
-          <Gallery title="ui kits"  items={uiKitsGallery}  onOpen={onOpen} kind="ui_kits" />
+          <Gallery title="preview" items={previewGallery} onOpen={onOpen} kind="preview" cfg={cfg} />
+          <Gallery title="ui kits"  items={uiKitsGallery}  onOpen={onOpen} kind="ui_kits" cfg={cfg} />
         </>
       )}
     </div>
   );
 }
 
-function Gallery({ title, items, onOpen, kind }) {
+function Gallery({ title, items, onOpen, kind, cfg }) {
   if (!items || items.length === 0) return null;
   return (
     <section className="sv-section">
@@ -1193,7 +1294,7 @@ function Gallery({ title, items, onOpen, kind }) {
         {items.map(p => (
           <article key={p.path} className="sv-preview-card" onClick={() => onOpen(p.path)}>
             <div className="sv-preview-frame">
-              <iframe src={urlOf(p.path)} title={p.label} scrolling="no" />
+              <iframe src={canvasUrl(p.path, cfg)} title={p.label} scrolling="no" />
             </div>
             <div className="sv-preview-foot">
               <strong>{p.label}</strong>
@@ -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/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/config.schema.json

@@ -52,7 +52,7 @@
     },
     "tokensCssRel": {
       "type": "string",
-      "description": "Path to the design system CSS, relative to designRoot. New canvases <link> to this file.",
+      "description": "Project-wide tokens CSS path, relative to designRoot. Used as the fallback when 'designSystems' is unset OR when an entry omits its own 'tokensCssRel'. New canvases <link> to this file by default. Per DDR-048, per-DS entries auto-resolve to '<designSystems[i].path>/colors_and_type.css' when their own field is missing.",
       "default": "system/colors_and_type.css"
     },
     "teamAccentDefault": {
@@ -130,7 +130,7 @@
     },
     "designSystems": {
       "type": "array",
-      "description": "Design systems available in this project. Single-DS projects have one entry; multi-DS projects (marketing vs. admin vs. mobile) list each here. Each canvas's .meta.json declares which DS it uses via the 'designSystem' field.",
+      "description": "Design systems available in this project. Single-DS projects have one entry; multi-DS projects (marketing vs. admin vs. mobile) list each here. Each canvas's .meta.json declares which DS it uses via the 'designSystem' field. The System view's DS picker iterates this array.",
       "items": {
         "type": "object",
         "required": ["name", "path"],
@@ -138,13 +138,39 @@
           "name": {
             "type": "string",
             "pattern": "^[a-z][a-z0-9-]*$",
-            "description": "Kebab-case slug. Used to match canvas .meta.json.designSystem references."
+            "description": "Kebab-case slug. Used to match canvas .meta.json.designSystem references and as the ?ds=<name> query param on /_system-data."
           },
           "path": {
             "type": "string",
-            "description": "Folder under designRoot (e.g. 'system/marketing')."
+            "description": "Folder under designRoot (e.g. 'system/marketing'). The DS-scoped System view reads tokens, previews, and ui_kits from inside this folder."
           },
-          "description": { "type": "string" }
+          "description": { "type": "string" },
+          "tokensCssRel": {
+            "type": "string",
+            "description": "Per-DS tokens CSS path, relative to designRoot. When omitted, auto-resolves to '<path>/colors_and_type.css' (DDR-048). Set explicitly when the DS's tokens live under a non-standard filename."
+          },
+          "rootClass": {
+            "type": "string",
+            "description": "Optional root class applied to canvases in this DS (overrides the project-wide rootClass for this DS's previews + new canvases)."
+          },
+          "themeDefault": {
+            "type": "string",
+            "enum": ["dark", "light"],
+            "description": "Per-DS theme default. Overrides the project-wide themeDefault when rendering this DS's specimens."
+          },
+          "themes": {
+            "type": "array",
+            "items": { "type": "string" },
+            "description": "Optional list of theme names this DS supports (used by the System view's theme toggle when more than one theme is declared)."
+          },
+          "newCanvasDir": {
+            "type": "string",
+            "description": "Override of the project-wide newCanvasDir for canvases scaffolded inside this DS."
+          },
+          "newComponentDir": {
+            "type": "string",
+            "description": "Override of the project-wide newComponentDir for components scaffolded inside this DS."
+          }
         },
         "additionalProperties": false
       },

package/plugins/design/dev-server/context-menu.tsx

@@ -158,10 +158,10 @@ const MENU_CSS = `
 .dc-context-menu {
   position: fixed;
   z-index: 7;
-  background: var(--u-bg-2, var(--bg-1, #fff));
+  background: var(--u-bg-0, var(--bg-0, #fff));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   padding: 4px;
   min-width: 220px;
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

package/plugins/design/dev-server/context.ts

@@ -31,6 +31,7 @@ export interface DevServerConfig {
   designRoot: string;
   canvasGroups: CanvasGroup[];
   designSystems?: DesignSystemEntry[];
+  defaultDesignSystem?: string;
   rootClass: string;
   themeDefault: 'dark' | 'light';
   tokensCssRel: string;
@@ -124,18 +125,51 @@ function loadConfig(repoRoot: string): DevServerConfig {
   try {
     raw = readFileSync(configPath, 'utf8');
   } catch {
-    return { ...DEFAULT_CONFIG, _source: 'defaults' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, _source: 'defaults' });
   }
   try {
     const parsed = JSON.parse(raw);
-    return { ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' });
   } catch (e) {
     const msg = e instanceof Error ? e.message : String(e);
     console.error(`  warn: ${configPath} is not valid JSON: ${msg}. Using defaults.`);
-    return { ...DEFAULT_CONFIG, _source: 'defaults (config invalid)' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, _source: 'defaults (config invalid)' });
   }
 }
 
+/**
+ * Fill in per-DS `tokensCssRel` defaults so the system view can read each DS's
+ * tokens without forcing every config author to spell out the path. When an
+ * entry omits `tokensCssRel`, derive it from `<entry.path>/colors_and_type.css`
+ * — the scaffold layout `/design:setup-ds` produces. Also strips leading /
+ * trailing slashes from `entry.path` so downstream `path.posix.join` calls
+ * don't produce double-slash artifacts.
+ *
+ * The top-level `cfg.tokensCssRel` is preserved untouched as the
+ * project-wide fallback for legacy single-DS configs that don't declare
+ * `designSystems[]` at all.
+ *
+ * DDR-048: the system view renders user tokens only; this normalization is the
+ * load-bearing step that makes per-DS rendering possible.
+ */
+export function normalizeDesignSystems<T extends DevServerConfig>(cfg: T): T {
+  if (!cfg.designSystems?.length) return cfg;
+  const designSystems = cfg.designSystems.map((entry) => {
+    const p = entry.path.replace(/^\/+|\/+$/g, '');
+    return {
+      ...entry,
+      path: p,
+      tokensCssRel:
+        entry.tokensCssRel?.replace(/^\/+/, '') ?? path.posix.join(p, 'colors_and_type.css'),
+    };
+  });
+  return { ...cfg, designSystems };
+}
+
+function normalizeConfig(cfg: DevServerConfig): DevServerConfig {
+  return normalizeDesignSystems(cfg);
+}
+
 export function createContext(): Context {
   const repoRoot = resolveRepoRoot();