@1agh/maude 1.0.9 → 1.2.0

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

@@ -1,198 +0,0 @@
-// canvas-rects.test.ts — feature-whiteboard-ai-toolkit. Unit + fixture
-// coverage for the STATIC (no-browser) fallback shim behind
-// `maude design canvas-rects`. The LIVE lane (window.__maudeCanvasRects,
-// canvas-lib.tsx) is verified via a real render (agent-browser), not here —
-// this file covers the deterministic offline path: JSX seed harvesting, the
-// default-grid layout, and the meta.json position merge, which together must
-// mirror DesignCanvasInner's `initialArtboards()` (canvas-lib.tsx) exactly so
-// the static fallback never disagrees with what the browser would compute.
-
-import { describe, expect, test } from 'bun:test';
-import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
-
-import { harvestSeeds, resolveArtboards, synthDefaultGrid } from '../bin/_canvas-rects-static.mjs';
-
-describe('harvestSeeds', () => {
-  test('extracts id/width/height in document order', () => {
-    const source = `
-      <DCArtboard id="hero" label="Hero" width={1200} height={800}>x</DCArtboard>
-      <DCArtboard id="footer" label="Footer" width={1200} height={400}>y</DCArtboard>
-    `;
-    expect(harvestSeeds(source)).toEqual([
-      { id: 'hero', w: 1200, h: 800 },
-      { id: 'footer', w: 1200, h: 400 },
-    ]);
-  });
-
-  test('defaults width/height to VP_GRID (1280x820) when absent', () => {
-    const source = `<DCArtboard id="bare" label="Bare">x</DCArtboard>`;
-    expect(harvestSeeds(source)).toEqual([{ id: 'bare', w: 1280, h: 820 }]);
-  });
-
-  test('mints __ab_N when id is missing', () => {
-    const source = `<DCArtboard label="No id" width={100} height={100}>x</DCArtboard>`;
-    expect(harvestSeeds(source)).toEqual([{ id: '__ab_0', w: 100, h: 100 }]);
-  });
-
-  test('is robust to attribute order', () => {
-    const source = `<DCArtboard height={500} width={900} id="reordered">x</DCArtboard>`;
-    expect(harvestSeeds(source)).toEqual([{ id: 'reordered', w: 900, h: 500 }]);
-  });
-
-  test('empty source yields no seeds', () => {
-    expect(harvestSeeds('')).toEqual([]);
-  });
-});
-
-describe('synthDefaultGrid', () => {
-  test('mirrors canvas-lib.tsx VP_GRID (3 cols, 80px gutter, cell = max dims)', () => {
-    const seeds = [
-      { id: 'a', w: 1200, h: 800 },
-      { id: 'b', w: 1440, h: 900 }, // largest — sets the cell size
-      { id: 'c', w: 1200, h: 800 },
-      { id: 'd', w: 1200, h: 800 }, // wraps to row 1 (col 0)
-    ];
-    const rects = synthDefaultGrid(seeds);
-    expect(rects).toEqual([
-      { id: 'a', x: 0, y: 0, w: 1200, h: 800 },
-      { id: 'b', x: 1440 + 80, y: 0, w: 1440, h: 900 },
-      { id: 'c', x: (1440 + 80) * 2, y: 0, w: 1200, h: 800 },
-      { id: 'd', x: 0, y: 900 + 80, w: 1200, h: 800 },
-    ]);
-  });
-
-  test('empty seeds yields no rects', () => {
-    expect(synthDefaultGrid([])).toEqual([]);
-  });
-});
-
-describe('resolveArtboards', () => {
-  const source = `
-    <DCArtboard id="a" label="A" width={1200} height={800}>x</DCArtboard>
-    <DCArtboard id="b" label="B" width={1200} height={800}>y</DCArtboard>
-  `;
-
-  test('no meta layout — falls back to the default grid entirely', () => {
-    expect(resolveArtboards(source, [])).toEqual([
-      { id: 'a', x: 0, y: 0, w: 1200, h: 800 },
-      { id: 'b', x: 1280, w: 1200, h: 800, y: 0 },
-    ]);
-  });
-
-  test('meta layout overrides x/y but JSX width/height stays authoritative (DDR-027)', () => {
-    const layout = [{ id: 'a', x: 5000, y: 3000 }];
-    const out = resolveArtboards(source, layout);
-    expect(out[0]).toEqual({ id: 'a', x: 5000, y: 3000, w: 1200, h: 800 });
-    // 'b' has no matching layout entry — stays on the default grid.
-    expect(out[1]).toEqual({ id: 'b', x: 1280, y: 0, w: 1200, h: 800 });
-  });
-
-  test('a legacy meta w/h wins over the JSX default (back-compat tolerance)', () => {
-    const layout = [{ id: 'a', x: 10, y: 20, w: 999, h: 555 }];
-    expect(resolveArtboards(source, layout)[0]).toEqual({ id: 'a', x: 10, y: 20, w: 999, h: 555 });
-  });
-
-  test('non-finite / zero meta values fall back to the default', () => {
-    const layout = [{ id: 'a', x: Number.NaN, y: 20, w: 0, h: -5 }];
-    expect(resolveArtboards(source, layout)[0]).toEqual({ id: 'a', x: 0, y: 20, w: 1200, h: 800 });
-  });
-});
-
-describe('canvas-rects.sh static fallback (fixture, no browser)', () => {
-  test('emits a manifest matching the canvas fixture, elements always empty', () => {
-    const root = mkdtempSync(join(tmpdir(), 'maude-canvas-rects-fixture-'));
-    try {
-      mkdirSync(join(root, '.design', 'ui'), { recursive: true });
-      writeFileSync(
-        join(root, '.design', 'ui', 'Fixture.tsx'),
-        `export default function Fixture() {
-  return (
-    <DesignCanvas>
-      <DCArtboard id="one" label="One" width={1000} height={600} />
-    </DesignCanvas>
-  );
-}
-`
-      );
-      writeFileSync(
-        join(root, '.design', 'ui', 'Fixture.meta.json'),
-        JSON.stringify({ layout: { artboards: [{ id: 'one', x: 42, y: 7 }] } })
-      );
-
-      const proc = Bun.spawnSync([
-        'node',
-        new URL('../bin/_canvas-rects-static.mjs', import.meta.url).pathname,
-        '--rel',
-        'ui/Fixture.tsx',
-        '--root',
-        root,
-      ]);
-      const manifest = JSON.parse(proc.stdout.toString().trim());
-      expect(manifest).toEqual({
-        artboards: [{ id: 'one', x: 42, y: 7, w: 1000, h: 600 }],
-        elements: [],
-        elementsTruncated: false,
-      });
-      expect(proc.stderr.toString()).toMatch(/no live dev server/);
-    } finally {
-      rmSync(root, { recursive: true, force: true });
-    }
-  });
-
-  test('a missing canvas file emits an empty manifest, not an error', () => {
-    const root = mkdtempSync(join(tmpdir(), 'maude-canvas-rects-fixture-'));
-    try {
-      mkdirSync(join(root, '.design'), { recursive: true });
-      const proc = Bun.spawnSync([
-        'node',
-        new URL('../bin/_canvas-rects-static.mjs', import.meta.url).pathname,
-        '--rel',
-        'ui/Nope.tsx',
-        '--root',
-        root,
-      ]);
-      expect(JSON.parse(proc.stdout.toString().trim())).toEqual({
-        artboards: [],
-        elements: [],
-        elementsTruncated: false,
-      });
-    } finally {
-      rmSync(root, { recursive: true, force: true });
-    }
-  });
-
-  // Security regression (feature-whiteboard-ai-toolkit review, F-path-traversal):
-  // --rel used to be joined straight into designRoot with no containment
-  // check — a `../` value could read anything readable by the process,
-  // unlike the sibling read-annotations.mjs/annotate.mjs lookups (which
-  // route the same rel-path shape through fileSlug() flattening). --rel here
-  // must stay a real nested path (it locates the actual .tsx on disk), so
-  // the fix is a resolve()+startsWith() containment assert instead.
-  test('--rel that resolves outside designRoot is rejected, not read', () => {
-    const root = mkdtempSync(join(tmpdir(), 'maude-canvas-rects-traversal-'));
-    try {
-      mkdirSync(join(root, '.design', 'ui'), { recursive: true });
-      // A secret OUTSIDE .design that a traversal would try to reach.
-      writeFileSync(join(root, 'secret.tsx'), 'export default function Secret(){return null}');
-
-      const proc = Bun.spawnSync([
-        'node',
-        new URL('../bin/_canvas-rects-static.mjs', import.meta.url).pathname,
-        '--rel',
-        '../secret.tsx',
-        '--root',
-        root,
-      ]);
-      expect(JSON.parse(proc.stdout.toString().trim())).toEqual({
-        artboards: [],
-        elements: [],
-        elementsTruncated: false,
-      });
-      expect(proc.stderr.toString()).toMatch(/escapes designRoot/);
-    } finally {
-      rmSync(root, { recursive: true, force: true });
-    }
-  });
-});

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

@@ -1,211 +0,0 @@
-// canvas-edit.ts moveElement/applyMove — DDR-138, phase-12.1. Node-move reorder:
-// relocate a whole JSXElement to a new sibling/parent position via oxc-parser +
-// magic-string, re-indenting on reparent, with guardrails + a reparse gate. Tests
-// verify order, formatting, the movedId recompute (must match the pipeline id the
-// browser gets after reload), the data-dc-element re-settle key, and every refusal.
-
-import { describe, expect, test } from 'bun:test';
-
-import { applyMove, CanvasEditError } from '../canvas-edit.ts';
-import { transpileCanvasSource } from '../canvas-pipeline.ts';
-
-const CANVAS = '/abs/Canvas.tsx';
-
-/** The `id="…"` sequence in document order — reflects sibling/child order. */
-function idOrder(source: string): string[] {
-  return [...source.matchAll(/\bid="([^"]+)"/g)].map((m) => m[1] as string);
-}
-
-/** Map author `id="X"` → the data-cd-id the pipeline injects (data-cd-id lands
- *  right after the tag name, before other attrs, so it precedes id="X"). */
-function cdIds(source: string): Record<string, string> {
-  const { withIds } = transpileCanvasSource(CANVAS, source);
-  const out: Record<string, string> = {};
-  for (const m of withIds.matchAll(/data-cd-id="([0-9a-f]{8})"[^>]*?\bid="([^"]+)"/g)) {
-    out[m[2] as string] = m[1] as string;
-  }
-  return out;
-}
-
-const LIST = `function Demo() {
-  return (
-    <section>
-      <div id="a">A</div>
-      <div id="b">B</div>
-      <div id="c">C</div>
-    </section>
-  );
-}`;
-
-describe('canvas-edit / applyMove — sibling reorder', () => {
-  test('move first element after last (reorder down)', () => {
-    const ids = cdIds(LIST);
-    const res = applyMove(CANVAS, LIST, ids.a as string, ids.c as string, 'after');
-    expect(idOrder(res.source)).toEqual(['b', 'c', 'a']);
-    // moved element keeps the siblings' 6-space indent
-    expect(res.source).toContain('\n      <div id="a">A</div>');
-    // untouched siblings are byte-identical
-    expect(res.source).toContain('      <div id="b">B</div>\n      <div id="c">C</div>');
-  });
-
-  test('move last element before first (reorder up)', () => {
-    const ids = cdIds(LIST);
-    const res = applyMove(CANVAS, LIST, ids.c as string, ids.a as string, 'before');
-    expect(idOrder(res.source)).toEqual(['c', 'a', 'b']);
-  });
-
-  test('movedId matches the pipeline id the browser gets after reload', () => {
-    const ids = cdIds(LIST);
-    const res = applyMove(CANVAS, LIST, ids.a as string, ids.c as string, 'after');
-    // The recomputed movedId must equal what the pipeline assigns to <div id="a">
-    // in the NEW source — that's the whole re-settle contract.
-    expect(res.movedId).toBe(cdIds(res.source).a as string);
-    expect(res.movedId).not.toBeNull();
-  });
-
-  test('output always re-parses (reparse gate never fires on a valid move)', () => {
-    const ids = cdIds(LIST);
-    const res = applyMove(CANVAS, LIST, ids.b as string, ids.a as string, 'before');
-    const parsed = transpileCanvasSource(CANVAS, res.source);
-    expect(parsed.withIds).toContain('<section');
-  });
-});
-
-const NEST = `function Demo() {
-  return (
-    <section>
-      <div id="a">A</div>
-      <article id="box">
-        <p id="p">P</p>
-      </article>
-    </section>
-  );
-}`;
-
-describe('canvas-edit / applyMove — reparent', () => {
-  test('inside-end nests the element as the last child, re-indented', () => {
-    const ids = cdIds(NEST);
-    const res = applyMove(CANVAS, NEST, ids.a as string, ids.box as string, 'inside-end');
-    expect(idOrder(res.source)).toEqual(['box', 'p', 'a']);
-    // re-indented one level deeper than the article (8 spaces)
-    expect(res.source).toContain('\n        <div id="a">A</div>');
-    // parses clean
-    expect(transpileCanvasSource(CANVAS, res.source).withIds).toContain('id="a"');
-  });
-
-  test('inside-start nests the element as the first child', () => {
-    const ids = cdIds(NEST);
-    const res = applyMove(CANVAS, NEST, ids.a as string, ids.box as string, 'inside-start');
-    expect(idOrder(res.source)).toEqual(['box', 'a', 'p']);
-  });
-});
-
-describe('canvas-edit / applyMove — re-settle hints', () => {
-  test('semanticId surfaces the moved element data-dc-element verbatim', () => {
-    const src = `function Demo() {
-  return (
-    <section>
-      <div id="a" data-dc-element="hero">A</div>
-      <div id="b">B</div>
-    </section>
-  );
-}`;
-    const ids = cdIds(src);
-    const res = applyMove(CANVAS, src, ids.a as string, ids.b as string, 'after');
-    expect(res.semanticId).toBe('hero');
-    expect(res.source).toContain('data-dc-element="hero"');
-  });
-});
-
-describe('canvas-edit / applyMove — guardrails', () => {
-  test('refuses moving an element relative to itself', () => {
-    const ids = cdIds(LIST);
-    expect(() => applyMove(CANVAS, LIST, ids.a as string, ids.a as string, 'after')).toThrow(
-      CanvasEditError
-    );
-  });
-
-  test('refuses moving an element into its own subtree', () => {
-    const src = `function Demo() {
-  return (
-    <section id="sec">
-      <div id="a">A</div>
-      <div id="b">B</div>
-    </section>
-  );
-}`;
-    const ids = cdIds(src);
-    // move <section id="sec"> (parent) inside <div id="a"> (its own descendant)
-    expect(() =>
-      applyMove(CANVAS, src, ids.sec as string, ids.a as string, 'inside-start')
-    ).toThrow(/own subtree/);
-  });
-
-  test('refuses nesting into a self-closing target', () => {
-    const src = `function Demo() {
-  return (
-    <section>
-      <div id="a">A</div>
-      <img id="img" src="x.png" />
-    </section>
-  );
-}`;
-    const ids = cdIds(src);
-    expect(() =>
-      applyMove(CANVAS, src, ids.a as string, ids.img as string, 'inside-start')
-    ).toThrow(/self-closing/);
-  });
-
-  test('refuses an unknown moved id', () => {
-    expect(() => applyMove(CANVAS, LIST, 'deadbeef', cdIds(LIST).a as string, 'after')).toThrow(
-      /not found/
-    );
-  });
-
-  test('refuses an unknown reference id', () => {
-    expect(() => applyMove(CANVAS, LIST, cdIds(LIST).a as string, 'deadbeef', 'after')).toThrow(
-      /not found/
-    );
-  });
-});
-
-// Reused-component instance reorder (phase-12.1 follow-up). Three <Col> usages
-// render three DOM nodes that share ONE data-cd-id (the id of the element inside
-// Col's body). Passing the DOM occurrence index maps the move onto the parent's
-// distinct <Col> USAGE elements, so the columns actually reorder.
-const REUSE = `function Col({ t }) {
-  return <div id="col"><span id="lbl">{t}</span></div>;
-}
-function Demo() {
-  return (
-    <section>
-      <Col t="one" />
-      <Col t="two" />
-      <Col t="three" />
-    </section>
-  );
-}`;
-
-describe('canvas-edit / applyMove — reused-component instances', () => {
-  test('occurrence index maps a shared id to the parent <Col> usage', () => {
-    const ids = cdIds(REUSE);
-    const colId = ids.col as string; // the shared component-internal id (3 instances)
-    // Move instance 0 (t="one") AFTER instance 2 (t="three") → order two, three, one.
-    const res = applyMove(CANVAS, REUSE, colId, colId, 'after', 0, 2);
-    const titles = [...res.source.matchAll(/t="([^"]+)"/g)].map((m) => m[1]);
-    expect(titles).toEqual(['two', 'three', 'one']);
-  });
-
-  test('same shared id + same occurrence index is still a self-move', () => {
-    const colId = cdIds(REUSE).col as string;
-    expect(() => applyMove(CANVAS, REUSE, colId, colId, 'after', 1, 1)).toThrow(/itself/);
-  });
-
-  test('resolves from a DEEP element inside the component too', () => {
-    const ids = cdIds(REUSE);
-    const lblId = ids.lbl as string; // <span> inside Col — also shared across instances
-    const res = applyMove(CANVAS, REUSE, lblId, lblId, 'before', 2, 0);
-    const titles = [...res.source.matchAll(/t="([^"]+)"/g)].map((m) => m[1]);
-    expect(titles).toEqual(['three', 'one', 'two']);
-  });
-});

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

@@ -1,179 +0,0 @@
-// Integration test for the /.design/ui/*.tsx canvas route.
-//
-// Boots a real Bun.serve dev-server against a sandbox that contains a single
-// canvas TSX file, then verifies:
-//   - GET returns 200 + application/javascript + an ETag header
-//   - If-None-Match: <etag> returns 304 with no body
-//   - The cached body parses as JS via the same Bun.Transpiler the route uses
-//   - _locator.json is written for the canvas slug
-//   - Path-traversal attempts get rejected
-//   - Non-existent canvases return 404
-
-import { describe, expect, test } from 'bun:test';
-import { existsSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
-import { tmpdir } from 'node:os';
-import { join } from 'node:path';
-import type { Subprocess } from 'bun';
-
-import { readLocator } from '../locator.ts';
-import { bootServer, killProc, nextPort } from './_helpers.ts';
-
-interface CanvasSandbox {
-  root: string;
-  designRoot: string;
-  cleanup: () => void;
-}
-
-function makeCanvasSandbox(canvasName: string, canvasSource: string): CanvasSandbox {
-  const root = mkdtempSync(join(tmpdir(), 'mdcc-canvas-route-'));
-  const designRoot = join(root, '.design');
-  mkdirSync(join(designRoot, 'ui'), { recursive: true });
-  writeFileSync(
-    join(designRoot, 'config.json'),
-    JSON.stringify({
-      name: 'test',
-      designRoot: '.design',
-      canvasGroups: [
-        { label: 'UI', path: 'ui' },
-        { label: 'System', path: 'system' },
-      ],
-    })
-  );
-  writeFileSync(join(designRoot, 'ui', canvasName), canvasSource);
-  return { root, designRoot, cleanup: () => rmSync(root, { recursive: true, force: true }) };
-}
-
-const SIMPLE_TSX = `
-export default function Hello() {
-  return (
-    <section>
-      <h1>Hello, world.</h1>
-      <p>Subhead.</p>
-    </section>
-  );
-}
-`;
-
-describe('TSX canvas route', () => {
-  let proc: Subprocess | null = null;
-  let port = 0;
-  let sb: CanvasSandbox | null = null;
-
-  async function boot(canvasName: string, source: string) {
-    sb = makeCanvasSandbox(canvasName, source);
-    port = nextPort();
-    proc = await bootServer(sb.root, port);
-  }
-
-  async function teardown() {
-    if (proc) await killProc(proc);
-    if (sb) sb.cleanup();
-    proc = null;
-    sb = null;
-  }
-
-  test('returns 200 + JS + ETag for a valid canvas', async () => {
-    await boot('Hello.tsx', SIMPLE_TSX);
-    try {
-      const r = await fetch(`http://localhost:${port}/.design/ui/Hello.tsx`);
-      expect(r.status).toBe(200);
-      expect(r.headers.get('content-type')).toMatch(/javascript/);
-      const etag = r.headers.get('etag');
-      expect(etag).toBeTruthy();
-      // Phase 24 (DDR-067) — the canvas etag is `<source-hash>-<bootId>-<epoch>`:
-      // the boot id + chrome epoch are folded in so a chrome edit (which doesn't
-      // change the canvas source hash) still busts the browser's cached transpile.
-      expect(etag).toMatch(/^[0-9a-f]+-[a-z0-9]+-\d+$/i);
-      const body = await r.text();
-      // Body should contain data-cd-id metadata + an export — proves the two
-      // passes ran end to end.
-      expect(body).toMatch(/data-cd-id/);
-      // Bun.build emits `export { Hello as default }` (renamed-default form)
-      // rather than `export default Hello`. Both are valid ESM; match either.
-      expect(body).toMatch(/export\s+\{[\s\S]*\bdefault\b[\s\S]*\}|export\s+default\b/);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('returns 304 on a matching If-None-Match', async () => {
-    await boot('Hello.tsx', SIMPLE_TSX);
-    try {
-      const first = await fetch(`http://localhost:${port}/.design/ui/Hello.tsx`);
-      const etag = first.headers.get('etag') as string;
-      const second = await fetch(`http://localhost:${port}/.design/ui/Hello.tsx`, {
-        headers: { 'If-None-Match': etag },
-      });
-      expect(second.status).toBe(304);
-      // 304 body should be empty.
-      const body = await second.text();
-      expect(body.length).toBe(0);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('writes _locator.json with the canvas slug populated', async () => {
-    await boot('Docs Site.tsx', SIMPLE_TSX);
-    try {
-      await fetch(`http://localhost:${port}/.design/ui/Docs%20Site.tsx`);
-      const locFile = join(sb?.designRoot, '_locator.json');
-      // The locator is written synchronously before the response — the file
-      // must exist + carry the canvas slug.
-      expect(existsSync(locFile)).toBe(true);
-      const map = await readLocator(locFile, 'ui/Docs Site');
-      expect(map).not.toBeNull();
-      // SIMPLE_TSX has three JSX elements: section, h1, p.
-      expect(Object.keys(map as Record<string, unknown>).length).toBe(3);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('returns 404 for a missing canvas', async () => {
-    await boot('Hello.tsx', SIMPLE_TSX);
-    try {
-      const r = await fetch(`http://localhost:${port}/.design/ui/Missing.tsx`);
-      expect(r.status).toBe(404);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('rejects path traversal via .. (403 from safePathUnderRoot)', async () => {
-    await boot('Hello.tsx', SIMPLE_TSX);
-    try {
-      const r = await fetch(`http://localhost:${port}/.design/ui/../../etc/passwd.tsx`);
-      // safePathUnderRoot kicks the request out before our TSX dispatch runs.
-      expect([400, 403, 404]).toContain(r.status);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('returns 500 on a malformed canvas with a useful error body', async () => {
-    await boot('Broken.tsx', 'export default function X() { return <div></span>; }');
-    try {
-      const r = await fetch(`http://localhost:${port}/.design/ui/Broken.tsx`);
-      expect(r.status).toBe(500);
-      const body = await r.text();
-      expect(body).toMatch(/Transpile error/i);
-    } finally {
-      await teardown();
-    }
-  });
-
-  test('cache: second GET returns the same ETag without re-reading the file', async () => {
-    await boot('Hello.tsx', SIMPLE_TSX);
-    try {
-      const a = await fetch(`http://localhost:${port}/.design/ui/Hello.tsx`);
-      const b = await fetch(`http://localhost:${port}/.design/ui/Hello.tsx`);
-      expect(a.headers.get('etag')).toBe(b.headers.get('etag'));
-      const bodyA = await a.text();
-      const bodyB = await b.text();
-      expect(bodyA).toBe(bodyB);
-    } finally {
-      await teardown();
-    }
-  });
-});