@1agh/maude 0.28.1 → 0.29.0

package/apps/studio/test/canvas-create-api.test.ts

@@ -0,0 +1,361 @@
+// /_api/canvas — Phase 22 UI add-on. Create a blank brief board from the browser.
+//
+// Two layers:
+//   (1) the pure name-validation boundary (the ONE security gate — path +
+//       JSX + JSON injection), tested directly;
+//   (2) the POST endpoint round-trip (boots a real server against a sandbox),
+//       covering happy path, the rejection matrix, group allowlist, duplicate.
+
+import { describe, expect, test } from 'bun:test';
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { componentNameFrom, renderBriefBoard, validateCanvasName } from '../canvas-create.ts';
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+describe('canvas-create / validateCanvasName (the security boundary)', () => {
+  test('accepts ordinary names (incl. spaces + accents)', () => {
+    for (const n of ['Onboarding Brief', 'checkout-flow', 'Krok_1', 'Přihlášení', 'A1']) {
+      const v = validateCanvasName(n);
+      expect(v.ok).toBe(true);
+      expect(v.name).toBe(n);
+    }
+  });
+
+  test('trims surrounding whitespace', () => {
+    const v = validateCanvasName('  Onboarding  ');
+    expect(v.ok).toBe(true);
+    expect(v.name).toBe('Onboarding');
+  });
+
+  // The rejection matrix — path traversal, separators, and template/JSON
+  // injection vectors must ALL be refused by the one allowlist regex.
+  const REJECT: Array<[string, unknown]> = [
+    ['empty', ''],
+    ['whitespace only', '   '],
+    ['non-string', 123],
+    ['null', null],
+    ['parent traversal', '../evil'],
+    ['nested traversal', 'a/../../etc/passwd'],
+    ['forward slash', 'ui/Sneaky'],
+    ['back slash', 'ui\\Sneaky'],
+    ['leading dot', '.hidden'],
+    ['dot-dot', '..'],
+    ['JSX break-out', 'X</div><script>alert(1)</script>'],
+    ['brace injection', 'A{2+2}B'],
+    ['angle bracket', 'a<b'],
+    ['double quote (JSON break-out)', 'a"b'],
+    ['backslash (JSON break-out)', 'a\\b'],
+    ['leading hyphen', '-dash'],
+    ['too long (61)', 'x'.repeat(61)],
+    ['tab', 'a\tb'],
+    ['newline', 'a\nb'],
+    ['null byte', 'a\u0000b'],
+  ];
+  for (const [label, value] of REJECT) {
+    test(`rejects ${label}`, () => {
+      expect(validateCanvasName(value).ok).toBe(false);
+    });
+  }
+
+  test('componentNameFrom yields a valid identifier', () => {
+    expect(componentNameFrom('Onboarding Brief')).toBe('OnboardingBrief');
+    expect(componentNameFrom('checkout-flow v2')).toBe('CheckoutFlowV2');
+    expect(componentNameFrom('123')).toMatch(/^Board/); // digit-leading → prefixed
+    // Unicode letters survive (review #1) — not ASCII-mangled to "PIhlEn".
+    expect(componentNameFrom('Přihlášení')).toBe('Přihlášení');
+    expect(componentNameFrom('123abc')).toBe('Board123abc'); // digit-leading → prefixed, body kept
+  });
+
+  test('collapses internal double-spaces so the slug methods agree (review #4)', () => {
+    const v = validateCanvasName('Two  Spaces');
+    expect(v.ok).toBe(true);
+    expect(v.name).toBe('Two Spaces'); // " +" → " " ; a tab would still be rejected
+  });
+
+  test('renderBriefBoard substitutes every placeholder (no {{…}} left)', () => {
+    const out = renderBriefBoard({
+      name: 'Onboarding Brief',
+      componentName: 'OnboardingBrief',
+      dsName: 'project',
+      platform: 'desktop',
+      seedHint: 'seed',
+      historyDir: '.design/_history/ui-onboarding_brief',
+    });
+    expect(out).not.toMatch(/\{\{[A-Z_]+\}\}/);
+    expect(out).toContain('export default function OnboardingBrief()');
+    expect(out).toContain('@kind        brief-board');
+    expect(out).toContain('Onboarding Brief');
+  });
+});
+
+describe('/_api/canvas — POST round-trip', () => {
+  test('creates a brief board (.tsx + .meta.json), returns 201 + the tree path', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Onboarding Brief', kind: 'brief-board' }),
+      });
+      expect(r.status).toBe(201);
+      const j = (await r.json()) as { ok: boolean; file: string; rel: string; slug: string };
+      expect(j.ok).toBe(true);
+      expect(j.file).toBe('.design/ui/Onboarding Brief.tsx');
+      expect(j.rel).toBe('ui/Onboarding Brief.tsx');
+      expect(j.slug).toBe('ui-onboarding_brief');
+
+      const tsx = join(designRoot, 'ui', 'Onboarding Brief.tsx');
+      const meta = join(designRoot, 'ui', 'Onboarding Brief.meta.json');
+      expect(existsSync(tsx)).toBe(true);
+      expect(existsSync(meta)).toBe(true);
+      expect(readFileSync(tsx, 'utf8')).toContain('export default function OnboardingBrief()');
+      expect(readFileSync(tsx, 'utf8')).toContain('Drop sticky notes');
+      const m = JSON.parse(readFileSync(meta, 'utf8'));
+      expect(m.kind).toBe('brief-board');
+      expect(m.title).toBe('Onboarding Brief');
+      expect(m.brief_sha).toBeUndefined(); // a board has no generation brief
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('defaults kind to brief-board when omitted', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'No Kind' }),
+      });
+      expect(r.status).toBe(201);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a traversal name with 400 and writes nothing', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: '../../escape' }),
+      });
+      expect(r.status).toBe(400);
+      // No file landed anywhere near the design root's parent.
+      expect(existsSync(join(designRoot, '..', 'escape.tsx'))).toBe(false);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects an unknown group with 400', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Valid', group: 'etc' }),
+      });
+      expect(r.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  // Phase 22 security review F2 — a config whose newCanvasDir TRAVERSES out of
+  // the design root must NOT let the write escape, even though the traversing
+  // group is technically "allowlisted" (it came from config). The designRoot
+  // containment assert is the backstop.
+  test('a config with a traversing newCanvasDir cannot escape the design root', async () => {
+    const { root, designRoot } = makeSandbox();
+    // Poison the config: newCanvasDir points outside the design root.
+    writeFileSync(
+      join(designRoot, 'config.json'),
+      JSON.stringify({
+        name: 'test',
+        designRoot: '.design',
+        newCanvasDir: '../../../../tmp',
+        canvasGroups: [
+          { label: 'System', path: 'system' },
+          { label: 'UI', path: 'ui' },
+        ],
+      })
+    );
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Escape' }),
+      });
+      expect(r.status).toBe(400);
+      // Nothing was written up at the traversal target.
+      expect(existsSync(join(root, '..', '..', 'tmp', 'Escape.tsx'))).toBe(false);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a non-brief-board kind with 400', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Valid', kind: 'canvas' }),
+      });
+      expect(r.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('a duplicate name returns 409', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const body = JSON.stringify({ name: 'Dup Board' });
+      const first = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+      });
+      expect(first.status).toBe(201);
+      const second = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body,
+      });
+      expect(second.status).toBe(409);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('unknown method (GET) returns 405', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, { method: 'GET' });
+      expect(r.status).toBe(405);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});
+
+describe('/_api/canvas — DELETE (soft-delete)', () => {
+  async function createBoard(port: number, name: string) {
+    const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name }),
+    });
+    return (await r.json()) as { file: string; slug: string };
+  }
+  const del = (port: number, file: string) =>
+    fetch(`http://localhost:${port}/_api/canvas?file=${encodeURIComponent(file)}`, {
+      method: 'DELETE',
+    });
+
+  test('soft-deletes a canvas: moves .tsx + sidecars to _trash, gone from ui/', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const created = await createBoard(port, 'Trash Me');
+      // Seed an annotation sidecar to prove the whole set travels.
+      writeFileSync(
+        join(designRoot, `${created.slug}.annotations.svg`),
+        '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1"></svg>'
+      );
+      const tsx = join(designRoot, 'ui', 'Trash Me.tsx');
+      expect(existsSync(tsx)).toBe(true);
+
+      const r = await del(port, created.file);
+      expect(r.status).toBe(200);
+      const j = (await r.json()) as { ok: boolean; trashed: string[] };
+      expect(j.ok).toBe(true);
+      expect(j.trashed.some((t) => t.endsWith('Trash Me.tsx'))).toBe(true);
+      expect(j.trashed.some((t) => t.endsWith('.annotations.svg'))).toBe(true);
+
+      // Gone from the group; present (recoverable) under _trash/ with a manifest.
+      expect(existsSync(tsx)).toBe(false);
+      expect(existsSync(join(designRoot, `${created.slug}.annotations.svg`))).toBe(false);
+      const trashDirs = readdirSync(join(designRoot, '_trash'));
+      expect(trashDirs.length).toBe(1);
+      const td = join(designRoot, '_trash', trashDirs[0] as string);
+      expect(existsSync(join(td, 'Trash Me.tsx'))).toBe(true);
+      expect(existsSync(join(td, '_trash-manifest.json'))).toBe(true);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('refuses to delete a design-system file (400, untouched)', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      mkdirSync(join(designRoot, 'system', 'project'), { recursive: true });
+      const dsFile = join(designRoot, 'system', 'project', 'Spec.tsx');
+      writeFileSync(dsFile, 'export default function S(){return null}');
+      const r = await del(port, '.design/system/project/Spec.tsx');
+      expect(r.status).toBe(400);
+      expect(existsSync(dsFile)).toBe(true);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('refuses a non-.tsx root file like config.json (400)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await del(port, '.design/config.json');
+      expect(r.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('a missing canvas returns 404', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await del(port, 'ui/Nope.tsx');
+      expect(r.status).toBe(404);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('a traversal file is rejected (400)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await del(port, 'ui/../../escape.tsx');
+      expect(r.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

package/{plugins/design/dev-server → apps/studio}/test/canvas-cursors.test.ts

@@ -11,6 +11,7 @@ const ALL_TOOLS = [
   'hand',
   'comment',
   'pen',
+  'highlighter',
   'shape',
   'rect',
   'ellipse',
@@ -41,6 +42,7 @@ describe('canvas-cursors / TOOL_CURSORS', () => {
       hand: 'grab',
       comment: 'crosshair',
       pen: 'crosshair',
+      highlighter: 'crosshair',
       shape: 'crosshair',
       rect: 'crosshair',
       ellipse: 'crosshair',

package/{plugins/design/dev-server → apps/studio}/test/canvas-lib-resolver.test.ts

@@ -28,7 +28,7 @@ afterAll(async () => {
 describe('canvas-lib-resolver / canvasLibPath', () => {
   test('returns the dev-server-internal canvas-lib.tsx path', () => {
     const p = canvasLibPath();
-    expect(p.endsWith('plugins/design/dev-server/canvas-lib.tsx')).toBe(true);
+    expect(p.endsWith('apps/studio/canvas-lib.tsx')).toBe(true);
     expect(existsSync(p)).toBe(true);
   });
 

package/apps/studio/test/canvas-media-drop.test.ts

@@ -0,0 +1,158 @@
+// use-canvas-media-drop — Phase 23 pure helpers (no DOM).
+//
+// Covers the drop/paste dispatch matrix + the URL helpers. The http(s) scheme
+// gate (isHttpUrl) is security-relevant — a link chip must never carry a
+// javascript:/data: URL into window.open.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  anchorTextFromHtml,
+  classifyMediaPayload,
+  firstHttpUrl,
+  isHttpUrl,
+  linkDomain,
+  type MediaPayload,
+  normalizeUrl,
+  prettifyUrl,
+} from '../use-canvas-media-drop.tsx';
+
+const empty: MediaPayload = { files: [], uriList: '', html: '', plain: '' };
+const fakeFile = (type: string): File => ({ type, name: 'x', size: 1 }) as unknown as File;
+
+describe('use-canvas-media-drop / isHttpUrl (scheme gate)', () => {
+  test('accepts http + https only', () => {
+    expect(isHttpUrl('https://example.com')).toBe(true);
+    expect(isHttpUrl('http://example.com/a/b?c=1')).toBe(true);
+  });
+  test('rejects javascript: / data: / file: / mailto: / garbage', () => {
+    expect(isHttpUrl('javascript:alert(1)')).toBe(false);
+    expect(isHttpUrl('data:text/html,<script>')).toBe(false);
+    expect(isHttpUrl('file:///etc/passwd')).toBe(false);
+    expect(isHttpUrl('mailto:a@b.com')).toBe(false);
+    expect(isHttpUrl('not a url')).toBe(false);
+    expect(isHttpUrl('')).toBe(false);
+  });
+});
+
+describe('use-canvas-media-drop / normalizeUrl (no scheme required)', () => {
+  test('keeps an explicit http(s) URL', () => {
+    expect(normalizeUrl('https://example.com/x')).toBe('https://example.com/x');
+    expect(normalizeUrl('http://example.com')).toBe('http://example.com');
+  });
+  test('prepends https:// to a bare domain', () => {
+    expect(normalizeUrl('example.com')).toBe('https://example.com');
+    expect(normalizeUrl('www.example.com/blog/post?x=1')).toBe(
+      'https://www.example.com/blog/post?x=1'
+    );
+    expect(normalizeUrl('sub.example.io:8080/path')).toBe('https://sub.example.io:8080/path');
+  });
+  test('rejects dangerous schemes even though it is lenient about http(s)', () => {
+    expect(normalizeUrl('javascript:alert(1)')).toBeNull();
+    expect(normalizeUrl('data:text/html,x')).toBeNull();
+    expect(normalizeUrl('file:///etc/passwd')).toBeNull();
+    expect(normalizeUrl('mailto:a@b.com')).toBeNull();
+  });
+  test('does NOT mistake a bare decimal / non-domain for a URL', () => {
+    expect(normalizeUrl('3.5')).toBeNull();
+    expect(normalizeUrl('v1.2')).toBeNull();
+    expect(normalizeUrl('hello world')).toBeNull();
+    expect(normalizeUrl('')).toBeNull();
+  });
+});
+
+describe('use-canvas-media-drop / firstHttpUrl', () => {
+  test('a bare-domain line becomes an https URL (no scheme needed to paste)', () => {
+    expect(firstHttpUrl('example.com')).toBe('https://example.com');
+  });
+
+  test('skips uri-list comment lines and returns the first real URL', () => {
+    expect(firstHttpUrl('# a comment\nhttps://example.com/p\nhttps://other.com')).toBe(
+      'https://example.com/p'
+    );
+  });
+  test('finds an inline URL in a prose paste', () => {
+    expect(firstHttpUrl('see https://example.com/post for details')).toBe(
+      'https://example.com/post'
+    );
+  });
+  test('returns null for non-URL text', () => {
+    expect(firstHttpUrl('just some words')).toBeNull();
+    expect(firstHttpUrl('javascript:alert(1)')).toBeNull();
+  });
+});
+
+describe('use-canvas-media-drop / linkDomain + prettifyUrl', () => {
+  test('linkDomain strips www.', () => {
+    expect(linkDomain('https://www.example.com/x')).toBe('example.com');
+    expect(linkDomain('https://sub.example.io')).toBe('sub.example.io');
+  });
+  test('prettifyUrl yields host + path (no protocol, no trailing slash)', () => {
+    expect(prettifyUrl('https://www.example.com/blog/post/')).toBe('example.com/blog/post');
+    expect(prettifyUrl('https://example.com/')).toBe('example.com');
+  });
+});
+
+describe('use-canvas-media-drop / anchorTextFromHtml', () => {
+  test('extracts the anchor text from a text/html payload', () => {
+    expect(anchorTextFromHtml('<a href="https://x.io">Cool Post</a>')).toBe('Cool Post');
+  });
+  test('strips inner markup and collapses whitespace', () => {
+    expect(anchorTextFromHtml('<a href="#"><b>Bold</b>  title</a>')).toBe('Bold title');
+  });
+  test('returns null when there is no anchor', () => {
+    expect(anchorTextFromHtml('<div>no link</div>')).toBeNull();
+    expect(anchorTextFromHtml('')).toBeNull();
+  });
+});
+
+describe('use-canvas-media-drop / classifyMediaPayload (dispatch matrix)', () => {
+  test('an image file wins (even when a uri-list is also present)', () => {
+    const intent = classifyMediaPayload({
+      ...empty,
+      files: [fakeFile('image/png')],
+      uriList: 'https://example.com',
+    });
+    expect(intent?.kind).toBe('image');
+  });
+
+  test('a non-image file is ignored', () => {
+    expect(classifyMediaPayload({ ...empty, files: [fakeFile('application/pdf')] })).toBeNull();
+  });
+
+  test('a URL drop becomes a link with the anchor text as the title', () => {
+    const intent = classifyMediaPayload({
+      ...empty,
+      uriList: 'https://example.com/post',
+      html: '<a href="https://example.com/post">Read this</a>',
+    });
+    expect(intent).toEqual({ kind: 'link', url: 'https://example.com/post', title: 'Read this' });
+  });
+
+  test('a URL drop with no anchor text falls back to the prettified URL', () => {
+    const intent = classifyMediaPayload({ ...empty, uriList: 'https://example.com/post' });
+    expect(intent).toEqual({
+      kind: 'link',
+      url: 'https://example.com/post',
+      title: 'example.com/post',
+    });
+  });
+
+  test('a bare-domain paste (no scheme) becomes a link normalized to https', () => {
+    const intent = classifyMediaPayload({ ...empty, plain: 'example.com/post' });
+    expect(intent).toEqual({
+      kind: 'link',
+      url: 'https://example.com/post',
+      title: 'example.com/post',
+    });
+  });
+
+  test('a plain-text (non-media) paste classifies as null — caller leaves it alone', () => {
+    expect(classifyMediaPayload({ ...empty, plain: 'hello world' })).toBeNull();
+  });
+
+  test('a javascript: URL is never classified as a link', () => {
+    expect(classifyMediaPayload({ ...empty, plain: 'javascript:alert(1)' })).toBeNull();
+    expect(classifyMediaPayload({ ...empty, uriList: 'javascript:alert(1)' })).toBeNull();
+  });
+});

package/{plugins/design/dev-server → apps/studio}/test/canvas-origin-gate.test.ts

@@ -51,7 +51,16 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
       expect(await code('/.design/%2e%2e%2fsecret-outside.css')).toBe(403);
 
       // (2) Privileged / out-of-scope routes stay 403 on the canvas origin.
-      for (const p of ['/_config', '/_sync-status', '/_api/export', '/package.json']) {
+      // /_api/canvas (Phase 22 file-write) is deliberately NOT in the canvas
+      // origin's route allowlist — an untrusted canvas iframe must never create
+      // arbitrary .tsx files. It is reachable ONLY from the main origin.
+      for (const p of [
+        '/_config',
+        '/_sync-status',
+        '/_api/export',
+        '/_api/canvas',
+        '/package.json',
+      ]) {
         expect(await code(p)).toBe(403);
       }
 
@@ -60,6 +69,13 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
       expect(await code('/_canvas-shell.html')).toBe(200);
       // A real .tsx canvas under designRoot transpiles + serves (200).
       expect(await code('/.design/ui/Gate.tsx')).toBe(200);
+      // Phase 23 — the capped image-upload route IS reachable from the canvas
+      // origin (it must be — drag-drop/paste/picker run inside the iframe). A GET
+      // returns 405 (method-not-allowed) which proves the route is REACHED via
+      // the canvas server's explicit `routes` allowlist — NOT 403 (gate-blocked)
+      // or 404 (fell through to file-serve). Guards the dual-allowlist invariant:
+      // CANVAS_SAFE_API + the startCanvasServer `routes` map must stay in sync.
+      expect(await code('/_api/asset')).toBe(405);
 
       // (4) The shell carries the hardened CSP (A6).
       const shell = await fetch(`${canvas}/_canvas-shell.html`);

package/apps/studio/test/canvas-url.test.ts

@@ -0,0 +1,99 @@
+// DDR-093 — canvasUrl() token-resolution. Regression guard for the
+// "non-default-DS UI canvas renders unstyled" bug: every `ui/*.tsx` authored
+// under a non-default design system used to load designSystems[0]'s tokens
+// (scoped to a different `.<rootClass>` subtree) so every `var(--*)` went
+// undefined and the canvas rendered white.
+
+import { describe, expect, test } from 'bun:test';
+
+import { canvasUrl, urlOf } from '../client/canvas-url.js';
+
+// Mirrors this repo's real multi-DS config: `project` is the default (ds0),
+// `maude` is the non-default one that the bug broke.
+const cfg = {
+  designRel: '.design',
+  designSystems: [
+    { name: 'project', path: 'system/project', tokensCssRel: 'system/project/colors_and_type.css' },
+    { name: 'maude', path: 'system/maude', tokensCssRel: 'system/maude/colors_and_type.css' },
+  ],
+};
+
+function paramsOf(url: string): URLSearchParams {
+  const qs = url.split('?')[1] ?? '';
+  return new URLSearchParams(qs);
+}
+
+describe('canvasUrl — per-canvas design-system token resolution', () => {
+  test('explicit opts.ds resolves a non-default DS canvas to its OWN tokens', () => {
+    const p = paramsOf(canvasUrl('.design/ui/Studio.tsx', cfg, { ds: 'maude' }));
+    expect(p.get('tokens')).toBe('system/maude/colors_and_type.css');
+    expect(p.get('components')).toBe('system/maude/preview/_components.css');
+  });
+
+  test('RCA interface form — relative path + opts.ds', () => {
+    const p = paramsOf(canvasUrl('ui/Studio.tsx', cfg, { ds: 'maude' }));
+    expect(p.get('tokens')).toBe('system/maude/colors_and_type.css');
+    expect(p.get('components')).toBe('system/maude/preview/_components.css');
+  });
+
+  test('opts.ds = the default DS resolves to ds0 tokens', () => {
+    const p = paramsOf(canvasUrl('.design/ui/Studio.tsx', cfg, { ds: 'project' }));
+    expect(p.get('tokens')).toBe('system/project/colors_and_type.css');
+    expect(p.get('components')).toBe('system/project/preview/_components.css');
+  });
+
+  test('cfg.canvasDesignSystems map drives resolution when opts.ds is absent', () => {
+    const withMap = { ...cfg, canvasDesignSystems: { '.design/ui/Studio.tsx': 'maude' } };
+    const p = paramsOf(canvasUrl('.design/ui/Studio.tsx', withMap));
+    expect(p.get('tokens')).toBe('system/maude/colors_and_type.css');
+    expect(p.get('components')).toBe('system/maude/preview/_components.css');
+  });
+
+  test('opts.ds wins over the map', () => {
+    const withMap = { ...cfg, canvasDesignSystems: { '.design/ui/Studio.tsx': 'maude' } };
+    const p = paramsOf(canvasUrl('.design/ui/Studio.tsx', withMap, { ds: 'project' }));
+    expect(p.get('tokens')).toBe('system/project/colors_and_type.css');
+  });
+
+  test('unknown / no DS falls back to ds0 (single-DS + legacy behavior intact)', () => {
+    const p = paramsOf(canvasUrl('.design/ui/Plain.tsx', cfg, {}));
+    expect(p.get('tokens')).toBe('system/project/colors_and_type.css');
+    expect(p.get('components')).toBe('system/project/preview/_components.css');
+  });
+
+  test('an unknown DS name (not in designSystems) falls back to ds0, never undefined', () => {
+    const p = paramsOf(canvasUrl('.design/ui/Ghost.tsx', cfg, { ds: 'does-not-exist' }));
+    expect(p.get('tokens')).toBe('system/project/colors_and_type.css');
+  });
+
+  test('specimen paths stay path-resolved and are unaffected by the map', () => {
+    const withWrongMap = {
+      ...cfg,
+      // A bogus map entry must NOT override the specimen branch.
+      canvasDesignSystems: { '.design/system/maude/preview/Buttons.tsx': 'project' },
+    };
+    const p = paramsOf(canvasUrl('.design/system/maude/preview/Buttons.tsx', withWrongMap));
+    expect(p.get('tokens')).toBe('system/maude/colors_and_type.css');
+    expect(p.get('layout')).toBe('system/maude/preview/_layout.css');
+    expect(p.get('components')).toBe('system/maude/preview/_components.css');
+  });
+
+  test('the bug it guards against: ds0 is the WRONG DS for a maude canvas', () => {
+    // Documents the failure mode — with neither opts.ds nor a map entry the
+    // resolver returns designSystems[0] (project), which is exactly what broke a
+    // maude canvas before DDR-093. The fix is that the map now supplies 'maude'.
+    const p = paramsOf(canvasUrl('.design/ui/Studio.tsx', cfg));
+    expect(p.get('tokens')).toBe('system/project/colors_and_type.css'); // ds0 — wrong for maude
+    const fixed = paramsOf(
+      canvasUrl('.design/ui/Studio.tsx', {
+        ...cfg,
+        canvasDesignSystems: { '.design/ui/Studio.tsx': 'maude' },
+      })
+    );
+    expect(fixed.get('tokens')).toBe('system/maude/colors_and_type.css'); // fixed
+  });
+
+  test('non-tsx paths bypass the shell and return a direct URL', () => {
+    expect(canvasUrl('.design/ui/legacy.html', cfg)).toBe(urlOf('.design/ui/legacy.html'));
+  });
+});