@1agh/maude 0.19.0 → 0.19.1

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

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

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

@@ -115,9 +115,9 @@ const DIALOG_CSS = `
 .dc-export-dialog {
   border: 1px solid var(--u-fg-0, #1c1917);
   padding: 0;
-  border-radius: 0;
-  background: var(--u-bg-2, var(--bg-1, #fff));
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  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));
   width: min(640px, 100vw - 48px);

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

@@ -218,8 +218,20 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect): Http {
     '/_index-data': async () =>
       Response.json(await api.buildIndexData(), { headers: { 'Cache-Control': 'no-store' } }),
 
-    '/_system-data': async () =>
-      Response.json(await api.buildSystemData(), { headers: { 'Cache-Control': 'no-store' } }),
+    '/_system-data': async (req: Request) => {
+      // DDR-048 — `?ds=<name>` scopes to one design system (per-DS tokens,
+      // per-DS preview gallery). Omitted = legacy top-level scan for
+      // backwards compat with single-DS projects.
+      const dsName = new URL(req.url).searchParams.get('ds');
+      const data = await api.buildSystemData(dsName);
+      if (data === null) {
+        return Response.json(
+          { error: 'unknown design system', ds: dsName },
+          { status: 404, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(data, { headers: { 'Cache-Control': 'no-store' } });
+    },
 
     '/_comments-all': async () =>
       Response.json(await api.loadAllComments(), { headers: { 'Cache-Control': 'no-store' } }),

package/plugins/design/dev-server/input-router.tsx

@@ -469,16 +469,30 @@ export function resolveHoverTarget(
   const artboardEl = hit.closest?.('[data-dc-screen]') ?? null;
   const artboardId = artboardEl?.getAttribute('data-dc-screen') ?? null;
 
-  // Hover-target hard ceiling = `.dc-artboard-body`. The artboard chrome
-  // (article root + label button + body wrapper) is never a selection
-  // candidate — those carry `data-cd-id` from the pipeline pass but visually
-  // selecting them makes the WHOLE artboard outline, which looks like the
-  // canvas viewport is selected. If the user landed on chrome (the label
-  // button or empty body padding), bail.
+  // Hover-target hard ceiling = `.dc-artboard-body`. Inner DOM content lives
+  // there; chrome lives outside (label, header, article root). The two paths
+  // diverge from here:
+  //   * hit ∈ body → resolve to the deepest stamped element (existing
+  //     deep/top logic below).
+  //   * hit ∈ chrome (label/header/article-root) → the user wants to select
+  //     the WHOLE artboard. Return the article element itself with no cdId;
+  //     consumers (hoverTargetToSelection) fall back to a
+  //     `[data-dc-screen="…"]` selector that wraps the whole frame. This is
+  //     what enables Cmd+Shift+Click multi-select of artboards (T24 / G8).
   const bodyEl = hit.closest?.('.dc-artboard-body') ?? null;
-  if (!bodyEl) return null;
+  if (!bodyEl) {
+    if (artboardEl && artboardId) {
+      return { el: artboardEl, cdId: null, artboardId };
+    }
+    return null;
+  }
   if (hit === bodyEl) {
-    // Clicked exactly on the body wrapper, no inner element under cursor.
+    // Clicked the body wrapper itself (empty padding inside an artboard, no
+    // user content under the cursor). Promote to "select whole artboard" so
+    // the gesture stays consistent with chrome clicks above.
+    if (artboardEl && artboardId) {
+      return { el: artboardEl, cdId: null, artboardId };
+    }
     return null;
   }
 

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

@@ -78,7 +78,28 @@ function loadConfig() {
     console.error(`  warn: ${CONFIG_PATH} is not valid JSON: ${e.message}. Using defaults.`);
     return { ...DEFAULT_CONFIG, _source: 'defaults (config invalid)' };
   }
-  return { ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' };
+  return normalizeDesignSystems({ ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' });
+}
+
+/**
+ * Mirror of context.ts `normalizeDesignSystems` for the legacy Node entry.
+ * Auto-derives per-DS `tokensCssRel = <entry.path>/colors_and_type.css` when
+ * missing so the System view can find tokens regardless of multi-DS layout.
+ * DDR-048. Keep in lock-step with the .ts version until DDR-009 retires this.
+ */
+function normalizeDesignSystems(cfg) {
+  if (!cfg.designSystems?.length) return cfg;
+  const designSystems = cfg.designSystems.map((entry) => {
+    const p = String(entry.path).replace(/^\/+|\/+$/g, '');
+    return {
+      ...entry,
+      path: p,
+      tokensCssRel:
+        (entry.tokensCssRel ?? '').toString().replace(/^\/+/, '') ||
+        path.posix.join(p, 'colors_and_type.css'),
+    };
+  });
+  return { ...cfg, designSystems };
 }
 
 const CFG = loadConfig();
@@ -962,9 +983,22 @@ function parseTokens(css) {
   return tokens;
 }
 
-async function buildSystemData() {
-  const sysAbs = path.join(DESIGN_ROOT, SYSTEM_DIR_REL);
-  const sysRel = path.posix.join(DESIGN_REL, SYSTEM_DIR_REL);
+/**
+ * Build the System view payload. When `dsName` is set, scope to that DS entry
+ * (per-DS tokens + per-DS preview/ui_kits gallery). Returns null when the
+ * name is set but not registered in `CFG.designSystems` so the caller can
+ * 404 instead of silently falling back to shell defaults. DDR-048.
+ */
+async function buildSystemData(dsName) {
+  let dsEntry = null;
+  if (dsName) {
+    dsEntry = (CFG.designSystems || []).find((d) => d.name === dsName) || null;
+    if (!dsEntry) return null;
+  }
+
+  const scopedSystemRel = dsEntry ? dsEntry.path : SYSTEM_DIR_REL;
+  const sysAbs = path.join(DESIGN_ROOT, scopedSystemRel);
+  const sysRel = path.posix.join(DESIGN_REL, scopedSystemRel);
 
   // README — try canonical locations (designRoot/README.md, system/README.md, system/<project>/README.md)
   let readme = null, readmePath = null;
@@ -986,11 +1020,13 @@ async function buildSystemData() {
     } catch {}
   }
 
-  // Tokens
+  // Tokens — per-DS path wins; top-level CFG.tokensCssRel is the fallback
+  // for legacy single-DS configs that don't declare `designSystems[]`.
+  const tokensCssRel = (dsEntry && dsEntry.tokensCssRel) || CFG.tokensCssRel;
   let tokens = [];
   let tokensPath = null;
   try {
-    const tokensAbs = path.join(DESIGN_ROOT, CFG.tokensCssRel);
+    const tokensAbs = path.join(DESIGN_ROOT, tokensCssRel);
     const css = await fs.readFile(tokensAbs, 'utf8');
     tokens = parseTokens(css);
     tokensPath = path.relative(REPO_ROOT, tokensAbs);
@@ -1005,14 +1041,19 @@ async function buildSystemData() {
     // Look one level deep — system/<project>/<folderName>/...
     const matches = [];
     try {
-      const subs = await fs.readdir(sysAbs, { withFileTypes: true });
-      for (const s of subs) {
-        if (!s.isDirectory()) continue;
-        const candidate = path.join(sysAbs, s.name, folderName);
-        try {
-          const stat = await fs.stat(candidate);
-          if (stat.isDirectory()) matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
-        } catch {}
+      // When scoped to one DS (sysAbs IS the DS folder), only check the
+      // DS-relative `<folderName>` subdir. Scanning sub-dirs here would
+      // misread the DS's own `preview/` as a sibling DS root.
+      if (!dsEntry) {
+        const subs = await fs.readdir(sysAbs, { withFileTypes: true });
+        for (const s of subs) {
+          if (!s.isDirectory()) continue;
+          const candidate = path.join(sysAbs, s.name, folderName);
+          try {
+            const stat = await fs.stat(candidate);
+            if (stat.isDirectory()) matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
+          } catch {}
+        }
       }
       // Also accept top-level system/<folderName>/
       try {
@@ -1037,10 +1078,27 @@ async function buildSystemData() {
   const previewGallery = await galleryFor('preview');
   const uiKitsGallery  = await galleryFor('ui_kits');
 
+  const availableDesignSystems = (CFG.designSystems || []).map((d) => ({
+    name: d.name,
+    path: d.path,
+    description: d.description || null,
+  }));
+
   return {
     project: CFG.name,
     designRoot: DESIGN_REL,
     systemDir: sysRel,
+    ds: dsEntry
+      ? {
+          name: dsEntry.name,
+          path: dsEntry.path,
+          description: dsEntry.description || null,
+          rootClass: dsEntry.rootClass || null,
+          themeDefault: dsEntry.themeDefault || null,
+        }
+      : null,
+    availableDesignSystems,
+    defaultDesignSystem: CFG.defaultDesignSystem || availableDesignSystems[0]?.name || null,
     readme,
     readmePath,
     tokens,
@@ -1048,8 +1106,8 @@ async function buildSystemData() {
     tokensPath,
     previewGallery,
     uiKitsGallery,
-    rootClass: CFG.rootClass,
-    themeDefault: CFG.themeDefault,
+    rootClass: (dsEntry && dsEntry.rootClass) || CFG.rootClass,
+    themeDefault: (dsEntry && dsEntry.themeDefault) || CFG.themeDefault,
     teamAccentDefault: CFG.teamAccentDefault,
   };
 }
@@ -1105,8 +1163,16 @@ const server = http.createServer(async (req, res) => {
       res.end(JSON.stringify(data));
       return;
     }
-    if (reqPath === '/_system-data') {
-      const data = await buildSystemData();
+    if (reqPath === '/_system-data' || reqPath.startsWith('/_system-data?')) {
+      // DDR-048 — `?ds=<name>` scopes to one DS; omitted = legacy unscoped.
+      const sysUrl = new URL(reqPath, 'http://x');
+      const dsName = sysUrl.searchParams.get('ds');
+      const data = await buildSystemData(dsName);
+      if (data === null) {
+        res.writeHead(404, { 'Content-Type': MIME['.json'], 'Cache-Control': 'no-store' });
+        res.end(JSON.stringify({ error: 'unknown design system', ds: dsName }));
+        return;
+      }
       res.writeHead(200, { 'Content-Type': MIME['.json'], 'Cache-Control': 'no-store' });
       res.end(JSON.stringify(data));
       return;

package/plugins/design/dev-server/test/context-resolve-tokens.test.ts

@@ -0,0 +1,97 @@
+// Per-DS tokensCssRel auto-resolution — load-bearing for DDR-048. When a
+// config entry doesn't spell out `tokensCssRel`, the dev-server must derive
+// it from `<entry.path>/colors_and_type.css` so the System view can read the
+// scaffolded layout without forcing every config author to repeat the path.
+
+import { describe, expect, test } from 'bun:test';
+import { normalizeDesignSystems } from '../context';
+
+const baseCfg = {
+  name: 'fixture',
+  projectLabel: null,
+  designRoot: '.design',
+  canvasGroups: [],
+  rootClass: 'app',
+  themeDefault: 'dark' as const,
+  tokensCssRel: 'system/colors_and_type.css',
+  teamAccentDefault: null,
+  handoffTargets: [],
+  newCanvasDir: 'ui',
+  newComponentDir: 'ui/components',
+  _source: '.design/config.json' as const,
+};
+
+describe('normalizeDesignSystems', () => {
+  test('no designSystems → passthrough (top-level tokensCssRel is the only source)', () => {
+    const out = normalizeDesignSystems({ ...baseCfg, designSystems: undefined });
+    expect(out.designSystems).toBeUndefined();
+    expect(out.tokensCssRel).toBe('system/colors_and_type.css');
+  });
+
+  test('empty designSystems array → passthrough', () => {
+    const out = normalizeDesignSystems({ ...baseCfg, designSystems: [] });
+    expect(out.designSystems).toEqual([]);
+  });
+
+  test('entry without tokensCssRel → derived from <path>/colors_and_type.css', () => {
+    const out = normalizeDesignSystems({
+      ...baseCfg,
+      designSystems: [{ name: 'studyfi', path: 'system/studyfi' }],
+    });
+    expect(out.designSystems?.[0].tokensCssRel).toBe('system/studyfi/colors_and_type.css');
+  });
+
+  test('entry with explicit tokensCssRel → preserved (leading slash trimmed)', () => {
+    const out = normalizeDesignSystems({
+      ...baseCfg,
+      designSystems: [
+        { name: 'studyfi', path: 'system/studyfi', tokensCssRel: '/system/studyfi/tokens.css' },
+      ],
+    });
+    expect(out.designSystems?.[0].tokensCssRel).toBe('system/studyfi/tokens.css');
+  });
+
+  test('path with leading + trailing slashes → normalized', () => {
+    const out = normalizeDesignSystems({
+      ...baseCfg,
+      designSystems: [{ name: 'alpha', path: '/system/alpha/' }],
+    });
+    expect(out.designSystems?.[0].path).toBe('system/alpha');
+    expect(out.designSystems?.[0].tokensCssRel).toBe('system/alpha/colors_and_type.css');
+  });
+
+  test('multiple entries → each resolved independently', () => {
+    const out = normalizeDesignSystems({
+      ...baseCfg,
+      designSystems: [
+        { name: 'alpha', path: 'system/alpha' },
+        { name: 'beta', path: 'system/beta', tokensCssRel: 'system/beta/custom.css' },
+      ],
+    });
+    expect(out.designSystems?.[0].tokensCssRel).toBe('system/alpha/colors_and_type.css');
+    expect(out.designSystems?.[1].tokensCssRel).toBe('system/beta/custom.css');
+  });
+
+  test('preserves unrelated entry fields (description, rootClass, themes)', () => {
+    const out = normalizeDesignSystems({
+      ...baseCfg,
+      designSystems: [
+        {
+          name: 'studyfi',
+          path: 'system/studyfi',
+          description: 'StudyFi production mirror',
+          rootClass: 'studyfi',
+          themeDefault: 'light',
+          themes: ['light', 'dark'],
+          newCanvasDir: 'ui/studyfi',
+        },
+      ],
+    });
+    const entry = out.designSystems?.[0];
+    expect(entry?.description).toBe('StudyFi production mirror');
+    expect(entry?.rootClass).toBe('studyfi');
+    expect(entry?.themeDefault).toBe('light');
+    expect(entry?.themes).toEqual(['light', 'dark']);
+    expect(entry?.newCanvasDir).toBe('ui/studyfi');
+  });
+});

package/plugins/design/dev-server/test/snap-distance-pill.test.ts

@@ -0,0 +1,68 @@
+// snap-distance-pill — DDR-046. Verifies SnapGuide.delta + .kind population
+// in `computeSnap`. The visual `Δ{Math.round(delta)}` pill rendering lives in
+// `SnapGuideOverlay` (`canvas-lib.tsx`); this file covers only the pure-function
+// contract that the overlay reads.
+
+import { describe, expect, test } from 'bun:test';
+
+import { type Rect, type SnapOptions, computeSnap } from '../use-snap-guides.tsx';
+
+const DEFAULTS: SnapOptions = { gridSize: 40, tolerance: 8, disabled: false };
+const rect = (x: number, y: number, w = 100, h = 80): Rect => ({ x, y, w, h });
+
+describe('SnapGuide.delta + .kind (DDR-046)', () => {
+  test('grid snap emits delta + kind=grid', () => {
+    const r = computeSnap(rect(33, 200), [], DEFAULTS);
+    const xg = r.guides.find((g) => g.axis === 'x');
+    expect(xg?.delta).toBe(7); // 40 − 33
+    expect(xg?.kind).toBe('grid');
+  });
+
+  test('grid snap with zero delta (already on grid line) still emits kind=grid', () => {
+    const r = computeSnap(rect(40, 200), [], DEFAULTS);
+    const xg = r.guides.find((g) => g.axis === 'x');
+    expect(xg?.delta).toBe(0);
+    expect(xg?.kind).toBe('grid');
+  });
+
+  test('sibling snap beats grid when both fire (closest |delta| wins)', () => {
+    // proposed x=37: grid candidate at 40 (delta +3), sibling at 35 (delta −2).
+    // |−2| < |3| → sibling wins.
+    const r = computeSnap(rect(37, 200), [rect(35, 0, 50, 50)], DEFAULTS);
+    const xg = r.guides.find((g) => g.axis === 'x');
+    expect(xg?.kind).toBe('sibling');
+    expect(xg?.delta).toBe(-2);
+    expect(r.x).toBe(35);
+  });
+
+  test('sibling snap emits delta + kind=sibling', () => {
+    // proposed x=503, sibling at x=500. Snap left↔left.
+    const r = computeSnap(rect(503, 200), [rect(500, 50, 100, 80)], DEFAULTS);
+    const xg = r.guides.find((g) => g.axis === 'x');
+    expect(xg?.delta).toBe(-3);
+    expect(xg?.kind).toBe('sibling');
+    expect(r.x).toBe(500);
+  });
+
+  test('merged-at-pos guide keeps the larger |delta|', () => {
+    // Two siblings both at x=500 — same edge, different y so merged guide
+    // unions their from/to. Both candidates have identical delta here, but
+    // we still expect the merge code path to preserve a single delta value.
+    const r = computeSnap(
+      rect(503, 200),
+      [rect(500, 50, 100, 50), rect(500, 400, 100, 50)],
+      DEFAULTS
+    );
+    const xg = r.guides.find((g) => g.axis === 'x');
+    expect(xg?.delta).toBe(-3);
+    expect(xg?.kind).toBe('sibling');
+    // Merged span covers both siblings' Y extents.
+    expect(xg?.from).toBe(50);
+    expect(xg?.to).toBe(450);
+  });
+
+  test('disabled mode emits no guides (delta + kind absent)', () => {
+    const r = computeSnap(rect(33, 200), [rect(35, 0)], { ...DEFAULTS, disabled: true });
+    expect(r.guides).toEqual([]);
+  });
+});

package/plugins/design/dev-server/test/system-endpoint.test.ts

@@ -0,0 +1,144 @@
+// /_system-data — bias-free token rendering depends on per-DS scoping.
+// Covers DDR-048: ?ds=<name> scopes payload to one designSystem entry;
+// unknown ds → 404; omitted ds → legacy unscoped behavior for single-DS
+// projects that don't declare `designSystems[]`.
+
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { mkdirSync, mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import type { Subprocess } from 'bun';
+import { bootServer, killProc, nextPort } from './_helpers';
+
+interface MultiDsSandbox {
+  root: string;
+  designRoot: string;
+}
+
+function makeMultiDsSandbox(): MultiDsSandbox {
+  const root = mkdtempSync(join(tmpdir(), 'mdcc-multi-ds-'));
+  const designRoot = join(root, '.design');
+  mkdirSync(designRoot, { recursive: true });
+
+  writeFileSync(
+    join(designRoot, 'config.json'),
+    JSON.stringify(
+      {
+        name: 'multi-ds',
+        designRoot: '.design',
+        canvasGroups: [
+          { label: 'Design system', path: 'system' },
+          { label: 'UI', path: 'ui' },
+        ],
+        designSystems: [
+          { name: 'alpha', path: 'system/alpha', description: 'Alpha brand' },
+          { name: 'beta', path: 'system/beta', description: 'Beta brand' },
+        ],
+        defaultDesignSystem: 'alpha',
+      },
+      null,
+      2
+    )
+  );
+
+  // Alpha — periwinkle accent, cream surfaces (mimics StudyFi case).
+  mkdirSync(join(designRoot, 'system', 'alpha', 'preview'), { recursive: true });
+  writeFileSync(
+    join(designRoot, 'system', 'alpha', 'colors_and_type.css'),
+    ":root {\n  --color-bg: #fbfaf7;\n  --accent: #9CACFF;\n  --color-text-primary: #000000;\n  --fs-base: 1rem;\n  --font-body: 'Inter', sans-serif;\n}\n"
+  );
+  writeFileSync(
+    join(designRoot, 'system', 'alpha', 'preview', 'colors-accent.tsx'),
+    'export default function ColorsAccent() { return <div>alpha accent</div>; }\n'
+  );
+
+  // Beta — different palette + names.
+  mkdirSync(join(designRoot, 'system', 'beta', 'preview'), { recursive: true });
+  writeFileSync(
+    join(designRoot, 'system', 'beta', 'colors_and_type.css'),
+    ':root {\n  --bg-0: oklch(13% 0.012 60);\n  --accent: oklch(72% 0.16 55);\n  --type-base: 14px;\n}\n'
+  );
+  writeFileSync(
+    join(designRoot, 'system', 'beta', 'preview', 'colors-accent.tsx'),
+    'export default function ColorsAccent() { return <div>beta accent</div>; }\n'
+  );
+
+  mkdirSync(join(designRoot, 'ui'), { recursive: true });
+  return { root, designRoot };
+}
+
+describe('/_system-data — per-DS scope (DDR-048)', () => {
+  let proc: Subprocess | null = null;
+  let sb: MultiDsSandbox;
+  let port: number;
+
+  beforeEach(async () => {
+    sb = makeMultiDsSandbox();
+    port = nextPort();
+    proc = await bootServer(sb.root, port);
+  });
+
+  afterEach(async () => {
+    if (proc) await killProc(proc);
+    proc = null;
+  });
+
+  test('?ds=alpha → tokens parsed from alpha colors_and_type.css', async () => {
+    const r = await fetch(`http://localhost:${port}/_system-data?ds=alpha`);
+    expect(r.status).toBe(200);
+    const data = (await r.json()) as {
+      tokens: { name: string; value: string }[];
+      ds: { name: string; description: string };
+      tokensPath: string;
+      previewGallery: { label: string }[];
+    };
+    expect(data.ds.name).toBe('alpha');
+    expect(data.ds.description).toBe('Alpha brand');
+    expect(data.tokensPath).toContain('system/alpha/colors_and_type.css');
+    const accent = data.tokens.find((t) => t.name === '--accent');
+    expect(accent?.value).toBe('#9CACFF');
+    const colorBg = data.tokens.find((t) => t.name === '--color-bg');
+    expect(colorBg?.value).toBe('#fbfaf7');
+    // Alpha previews only — no beta leakage.
+    expect(data.previewGallery.some((p) => p.label === 'colors-accent')).toBe(true);
+    expect(data.previewGallery.every((p) => !p.label.includes('beta'))).toBe(true);
+  });
+
+  test('?ds=beta → distinct tokens, distinct previews', async () => {
+    const r = await fetch(`http://localhost:${port}/_system-data?ds=beta`);
+    expect(r.status).toBe(200);
+    const data = (await r.json()) as {
+      tokens: { name: string; value: string }[];
+      ds: { name: string };
+      tokensPath: string;
+    };
+    expect(data.ds.name).toBe('beta');
+    expect(data.tokensPath).toContain('system/beta/colors_and_type.css');
+    const accent = data.tokens.find((t) => t.name === '--accent');
+    expect(accent?.value).toBe('oklch(72% 0.16 55)');
+    const bg0 = data.tokens.find((t) => t.name === '--bg-0');
+    expect(bg0?.value).toBe('oklch(13% 0.012 60)');
+  });
+
+  test('?ds=ghost → 404 + error payload (no silent shell fallback)', async () => {
+    const r = await fetch(`http://localhost:${port}/_system-data?ds=ghost`);
+    expect(r.status).toBe(404);
+    const body = (await r.json()) as { error: string; ds: string };
+    expect(body.error).toBe('unknown design system');
+    expect(body.ds).toBe('ghost');
+  });
+
+  test('unscoped (no ?ds) → availableDesignSystems list + defaultDesignSystem', async () => {
+    const r = await fetch(`http://localhost:${port}/_system-data`);
+    expect(r.status).toBe(200);
+    const data = (await r.json()) as {
+      availableDesignSystems: { name: string; description: string | null }[];
+      defaultDesignSystem: string;
+      ds: unknown;
+    };
+    expect(data.availableDesignSystems).toHaveLength(2);
+    expect(data.availableDesignSystems.map((d) => d.name)).toEqual(['alpha', 'beta']);
+    expect(data.defaultDesignSystem).toBe('alpha');
+    expect(data.ds).toBeNull();
+  });
+});