@1agh/maude 0.28.1 → 0.30.0

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

@@ -0,0 +1,319 @@
+// canvas-edit.ts — Phase 3.6 Task 5. AST-aware single-attribute edits on TSX
+// canvases. The same component+jsxIndex bookkeeping as canvas-pipeline.ts
+// computes the target ID; tests round-trip an edit through transpileCanvasSource
+// to confirm the IDs line up.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  applyEdit,
+  applyRemove,
+  applyTextEdit,
+  CanvasEditError,
+  editAttribute,
+} from '../canvas-edit.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+
+const CANVAS = '/abs/Canvas.tsx';
+
+function idsOf(source: string): Record<string, string> {
+  // Run the pipeline to learn what data-cd-id each JSX element gets, returning
+  // a map keyed by the element-type name so tests can ask "what id is the
+  // <span>?" without hardcoding the hash.
+  const { withIds } = transpileCanvasSource(CANVAS, source);
+  const out: Record<string, string> = {};
+  for (const m of withIds.matchAll(/<(\w+)([^>]*?)data-cd-id="([0-9a-f]{8})"/g)) {
+    if (!out[m[1] as string]) out[m[1] as string] = m[3] as string;
+  }
+  return out;
+}
+
+describe('canvas-edit / applyEdit', () => {
+  test('swaps an existing className literal value', () => {
+    const src = `function Demo() { return <button className="btn">OK</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'className', 'btn btn--ghost');
+    expect(out.source).toBe(
+      `function Demo() { return <button className="btn btn--ghost">OK</button>; }`
+    );
+    // "btn" (3 chars) → "btn btn--ghost" (14 chars): +11 bytes inside the
+    // literal; quotes unchanged.
+    expect(out.delta).toBe(11);
+  });
+
+  test('inserts className when missing', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'className', 'card');
+    expect(out.source).toBe(`function Demo() { return <div className="card">x</div>; }`);
+  });
+
+  test('rewrites a plain attribute (aria-label)', () => {
+    const src = `function Demo() { return <button aria-label="old">x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'new');
+    expect(out.source).toBe(`function Demo() { return <button aria-label="new">x</button>; }`);
+  });
+
+  test('JSX-attribute-escapes a " in a replaced literal value (no JSON \\" corruption)', () => {
+    // Regression: the replace branch used to emit JSON.stringify(value) → `\"`,
+    // which is invalid JS-escaping inside a JSX attribute and corrupts the source.
+    // It must land as the HTML entity &quot; instead. See DDR-105.
+    const src = `function Demo() { return <button aria-label="old">x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'say "hi" <b>');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="say &quot;hi&quot; &lt;b&gt;">x</button>; }`
+    );
+    // Never the JS-escaped form that broke things.
+    expect(out.source).not.toContain('\\"');
+  });
+
+  test('JSX-attribute-escapes a " in a newly inserted attribute value', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'title', 'a "quoted" title');
+    expect(out.source).toBe(
+      `function Demo() { return <div title="a &quot;quoted&quot; title">x</div>; }`
+    );
+  });
+
+  test('replaces an expression-container attr value with a JSX-escaped literal', () => {
+    // <Tag name={expr} /> → <Tag name="value" />, entity-escaped (not JSON-escaped).
+    const src = `function Demo() { return <button aria-label={lbl}>x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'with "quote"');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="with &quot;quote&quot;">x</button>; }`
+    );
+  });
+
+  test('swaps a single style.<prop> value inside style={{...}}', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '14');
+    expect(out.source).toBe(
+      'function Demo() { return <div style={{ padding: 14, margin: 4 }}>x</div>; }'
+    );
+  });
+
+  test('inserts a missing style key into existing style={{...}}', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"#facc15"');
+    // The exact spacing of the appended key is implementation-defined; assert
+    // the substring lands without trampling the prior key.
+    expect(out.source).toContain('padding: 8');
+    expect(out.source).toContain('color: "#facc15"');
+  });
+
+  test('inserts a brand-new style={{}} prop when missing', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '14');
+    expect(out.source).toContain('<div style={{ padding: 14 }}>x</div>');
+  });
+
+  test('throws CanvasEditError when id is not found', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    expect(() => applyEdit(CANVAS, src, 'deadbeef', 'className', 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses to edit data-cd-id (owned by pipeline)', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    expect(() => applyEdit(CANVAS, src, id, 'data-cd-id', 'beefcafe')).toThrow(CanvasEditError);
+  });
+
+  test('throws on malformed source', () => {
+    const src = 'function Demo() { return <not closing';
+    expect(() => applyEdit(CANVAS, src, 'aaaaaaaa', 'className', 'x')).toThrow();
+  });
+
+  test('targets the right element when multiple share a type', () => {
+    const src =
+      'function Demo() { return (<section>' +
+      `<button className="a">A</button>` +
+      `<button className="b">B</button>` +
+      '</section>); }';
+    // The pipeline visits in pre-order; expose all <button> ids by walking the
+    // withIds output and capturing each match.
+    const { withIds } = transpileCanvasSource(CANVAS, src);
+    const matches = [
+      ...withIds.matchAll(/<button[^>]*data-cd-id="([0-9a-f]{8})"[^>]*className="([ab])"/g),
+    ];
+    expect(matches.length).toBe(2);
+    const idA = matches.find((m) => m[2] === 'a')?.[1] as string;
+    expect(idA).toBeDefined();
+    const out = applyEdit(CANVAS, src, idA, 'className', 'A-edited');
+    expect(out.source).toContain('className="A-edited"');
+    expect(out.source).toContain('className="b"');
+  });
+});
+
+describe('canvas-edit / applyRemove (reset)', () => {
+  test('removes one style key, leaving the siblings + object intact', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 8 }}>x</div>; }');
+  });
+
+  test('removes the leading style key (consumes the trailing comma)', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div style={{ margin: 4 }}>x</div>; }');
+  });
+
+  test('removing the only style key drops the whole style attribute', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div>x</div>; }');
+  });
+
+  test('accepts a kebab style prop name (border-radius → borderRadius)', () => {
+    const src = 'function Demo() { return <div style={{ borderRadius: 8, padding: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.border-radius');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 4 }}>x</div>; }');
+  });
+
+  test('removes a plain attribute (custom data-*)', () => {
+    const src = 'function Demo() { return <button data-state="active">x</button>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.button as string, 'data-state');
+    expect(out.source).toBe('function Demo() { return <button>x</button>; }');
+  });
+
+  test('is a no-op (delta 0) when the key / attribute is absent', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const a = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(a.source).toBe(src);
+    expect(a.delta).toBe(0);
+    const b = applyRemove(CANVAS, src, ids.div as string, 'data-nope');
+    expect(b.source).toBe(src);
+    expect(b.delta).toBe(0);
+  });
+
+  test('refuses to remove data-cd-id (pipeline-owned)', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    expect(() => applyRemove(CANVAS, src, ids.div as string, 'data-cd-id')).toThrow(
+      CanvasEditError
+    );
+  });
+});
+
+describe('canvas-edit / editAttribute (fs)', () => {
+  test('writes the edit atomically + is a no-op when source unchanged', async () => {
+    const tmp = `/tmp/canvas-edit-${Math.random().toString(36).slice(2)}.tsx`;
+    const src = `function Demo() { return <div className="x">y</div>; }`;
+    await Bun.write(tmp, src);
+    const ids = idsOf(src);
+    const id = ids.div as string;
+
+    const r1 = await editAttribute(tmp, id, 'className', 'longer-value');
+    expect(r1.delta).toBeGreaterThan(0);
+    const after = await Bun.file(tmp).text();
+    expect(after).toContain('className="longer-value"');
+
+    // Second pass with the same value — no-op (the source already has it).
+    const r2 = await editAttribute(tmp, id, 'className', 'longer-value');
+    expect(r2.delta).toBe(0);
+  });
+});
+
+// Phase 12 (DDR-103) — inline text-content edit. Leaf-text only; JSX-escaped.
+describe('canvas-edit / applyTextEdit', () => {
+  test('overwrites a leaf text node', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Uložit');
+    expect(out.source).toBe(`function Demo() { return <button>Uložit</button>; }`);
+  });
+
+  test('preserves surrounding whitespace / indentation', () => {
+    const src = [
+      'function Demo() {',
+      '  return (',
+      '    <button>',
+      '      Save',
+      '    </button>',
+      '  );',
+      '}',
+    ].join('\n');
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Go');
+    expect(out.source).toContain('    <button>\n      Go\n    </button>');
+  });
+
+  test('JSX-escapes <, >, {, }, & so text can never become markup or an expression', () => {
+    const src = `function Demo() { return <code>x</code>; }`;
+    const id = idsOf(src).code as string;
+    const out = applyTextEdit(CANVAS, src, id, 'a < b && c > {d}');
+    expect(out.source).toContain('a &lt; b &amp;&amp; c &gt; &#123;d&#125;');
+    expect(out.source).not.toContain('{d}');
+  });
+
+  test('refuses an element with mixed (element) children', () => {
+    const src = `function Demo() { return <div>hi <b>there</b></div>; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses an element whose only child is a JSX expression', () => {
+    const src = 'function Demo() { const t = "x"; return <h1>{t}</h1>; }';
+    const id = idsOf(src).h1 as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses a self-closing / empty element (no text to edit)', () => {
+    const src = `function Demo() { return <div className="x" />; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('throws on a missing id', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    expect(() => applyTextEdit(CANVAS, src, 'deadbeef', 'x')).toThrow(CanvasEditError);
+  });
+});
+
+// Phase 12 (DDR-103) — the `style.<prop>` write path the CSS knobs ride
+// (api.editCss maps property → camelCase + always quotes the value).
+describe('canvas-edit / applyEdit style.<prop> (CSS-knob path)', () => {
+  test('inserts an inline style object when none exists', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.borderRadius', '"8px"');
+    expect(out.source).toContain('style={{ borderRadius: "8px" }}');
+  });
+
+  test('overwrites an existing style key, leaving siblings intact', () => {
+    const src = `function Demo() { return <div style={{ padding: 4, color: "red" }}>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"blue"');
+    expect(out.source).toContain('color: "blue"');
+    expect(out.source).toContain('padding: 4');
+  });
+
+  test('accepts a token-valued (var(--…)) string for on-system edits', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '"var(--space-3)"');
+    expect(out.source).toContain('style={{ padding: "var(--space-3)" }}');
+  });
+});

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,24 @@ 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.
+      // Phase 12 (DDR-103) — the in-canvas direct-edit write routes are
+      // MAIN-ORIGIN ONLY: absent from CANVAS_SAFE_API + startCanvasServer's
+      // route map, so the untrusted canvas iframe origin must never reach a
+      // source-write endpoint. A GET here 403s at the gate (not 405 from the
+      // handler), proving the route is unreachable on this origin.
+      for (const p of [
+        '/_config',
+        '/_sync-status',
+        '/_api/export',
+        '/_api/canvas',
+        '/_api/edit-css',
+        '/_api/edit-text',
+        '/_api/edit-attr',
+        '/package.json',
+      ]) {
         expect(await code(p)).toBe(403);
       }
 
@@ -60,6 +77,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'));
+  });
+});

package/{plugins/design/dev-server → apps/studio}/test/collab-bridge.test.ts

@@ -4,8 +4,6 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import * as Y from 'yjs';
-
 import { Y_TYPES } from '../collab/persistence.ts';
 import { createRegistry } from '../collab/registry.ts';
 import type { RoomCallbacks } from '../collab/room.ts';

package/{plugins/design/dev-server → apps/studio}/test/collab-room.test.ts

@@ -1,17 +1,12 @@
 // Unit: Room behavior — two in-memory peers see each other, debounced flush
 // fires, flush is idempotent, room teardown is clean.
 
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { describe, expect, test } from 'bun:test';
 
 import { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
-import {
-  encodeAwarenessFrame,
-  encodeHandshake,
-  encodeSyncUpdate,
-  handleMessage,
-} from '../collab/protocol.ts';
+import { encodeAwarenessFrame, handleMessage } from '../collab/protocol.ts';
 import { createRoom, type RoomCallbacks, type RoomConn } from '../collab/room.ts';
 
 function makeConn(id: string): RoomConn & { recv: Uint8Array[] } {