@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/test/camera-reveal.test.tsx

@@ -0,0 +1,173 @@
+// camera-reveal — Task A3 (feature-element-editing-robustness), Stage A.
+//
+// Regression guard for Bugs A + B: a `select-by-id` reveal must pan the camera
+// (the `.dc-world` transform, via the viewport controller) and MUST NOT scroll
+// the overflow:hidden `.dc-canvas` / `.dc-artboard-body` clip layers — host
+// scroll is what desynced the camera model (phantom right strip + pan reset
+// after an absolute-element move).
+//
+// canvas-shell.tsx pulls in a React/DOM dependency graph, so we register
+// happy-dom for this file (like canvas-hmr-runtime.test.tsx) before importing.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import type { ViewportControllerHandle } from '../canvas-lib.tsx';
+import { REVEAL_MARGIN_PX, revealAxisDelta, revealElementViaCamera } from '../canvas-shell.tsx';
+
+const M = REVEAL_MARGIN_PX;
+
+describe('revealAxisDelta — minimal 1-axis camera pan', () => {
+  // Viewport spans [0, 1000]; usable band is [M, 1000 - M].
+  const V0 = 0;
+  const V1 = 1000;
+
+  test('fully visible → no pan', () => {
+    expect(revealAxisDelta(200, 400, V0, V1, M)).toBe(0);
+  });
+
+  test('flush at the inset band edges → no pan', () => {
+    expect(revealAxisDelta(M, V1 - M, V0, V1, M)).toBe(0);
+  });
+
+  test('off the start (left/top) edge → positive delta brings the start in', () => {
+    // element [-50, 100]; start (-50) is left of the inset band start (M=40).
+    const d = revealAxisDelta(-50, 100, V0, V1, M);
+    expect(d).toBe(M - -50); // vs - elStart = 40 - (-50) = 90
+    expect(d).toBeGreaterThan(0);
+  });
+
+  test('off the end (right/bottom) edge → negative delta brings the end in', () => {
+    // element [900, 1100]; end (1100) is past the inset band end (960).
+    const d = revealAxisDelta(900, 1100, V0, V1, M);
+    expect(d).toBe(V1 - M - 1100); // ve - elEnd = 960 - 1100 = -140
+    expect(d).toBeLessThan(0);
+  });
+
+  test('element wider than the viewport → no pan (matches scrollIntoView nearest)', () => {
+    expect(revealAxisDelta(-200, 1200, V0, V1, M)).toBe(0);
+  });
+});
+
+// Minimal fake controller — only `panBy` is exercised; the rest satisfy the type.
+function fakeController(): {
+  handle: ViewportControllerHandle;
+  calls: Array<[number, number]>;
+} {
+  const calls: Array<[number, number]> = [];
+  const noop = () => {};
+  const handle: ViewportControllerHandle = {
+    viewport: { x: 0, y: 0, zoom: 1 },
+    setViewport: noop,
+    panBy: (dx, dy) => calls.push([dx, dy]),
+    zoomAt: noop,
+    fit: noop,
+    reset: noop,
+    zoomIn: noop,
+    zoomOut: noop,
+    jumpTo: noop,
+    animateTo: noop,
+    isInteracting: false,
+  };
+  return { handle, calls };
+}
+
+function elWithRect(rect: Partial<DOMRect>): HTMLElement {
+  const el = document.createElement('div');
+  const r = {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    ...rect,
+  } as DOMRect;
+  el.getBoundingClientRect = () => r;
+  return el;
+}
+
+describe('revealElementViaCamera — pans the controller, never host scroll', () => {
+  test('off-screen element pans via panBy and leaves host scroll at 0', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    // Target sits past the right edge — the exact Bug B repro (overflowing element).
+    const target = elWithRect({
+      left: 1100,
+      top: 100,
+      right: 1300,
+      bottom: 200,
+      width: 200,
+      height: 100,
+    });
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(1);
+    const [dx, dy] = calls[0];
+    expect(dx).toBeLessThan(0); // pan world left to reveal the right-side element
+    expect(dy).toBe(0); // vertically already in view
+    // The invariant: no host scroll was touched.
+    expect(host.scrollLeft).toBe(0);
+    expect(host.scrollTop).toBe(0);
+  });
+
+  test('already-visible element → no pan at all', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    const target = elWithRect({
+      left: 300,
+      top: 300,
+      right: 500,
+      bottom: 400,
+      width: 200,
+      height: 100,
+    });
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(0);
+    expect(host.scrollLeft).toBe(0);
+    expect(host.scrollTop).toBe(0);
+  });
+
+  test('detached element (zero box) → no pan', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    const target = elWithRect({});
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(0);
+  });
+});

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

@@ -214,6 +214,56 @@ describe('canvas-edit / applyEdit', () => {
   });
 });
 
+describe('canvas-edit / applyEdit — Stage F2 media src-replace', () => {
+  test('replaces a literal <img src="…"> — the ordinary "Replace image…" case', () => {
+    const src = `function Demo() { return <img src="assets/old.png" alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    const out = applyEdit(CANVAS, src, id, 'src', 'assets/12345678.png');
+    expect(out.source).toBe(
+      `function Demo() { return <img src="assets/12345678.png" alt="x" />; }`
+    );
+  });
+
+  test('replaces a trivial {"literal"} src expression', () => {
+    const src = `function Demo() { return <img src={"assets/old.png"} alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    const out = applyEdit(CANVAS, src, id, 'src', 'assets/new.png');
+    expect(out.source).toContain('src="assets/new.png"');
+  });
+
+  test('refuses (does not corrupt) a src bound to a JS expression', () => {
+    // src={imageUrl} is a BINDING, not a static value — silently overwriting it
+    // would discard the binding. This is the exact gotcha the plan's Task F2
+    // flags for "Replace image…"; the context-menu comment already assumed
+    // this refusal existed (canvas-shell.tsx) — it didn't, until this fix.
+    const src = `function Demo({ imageUrl }) { return <img src={imageUrl} alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    expect(() => applyEdit(CANVAS, src, id, 'src', 'assets/new.png')).toThrow(
+      /bound to a JS expression/
+    );
+    // Also refuses a member-expression / template-literal binding, not just a
+    // bare identifier.
+    const src2 = `function Demo({ item }) { return <img src={item.url} alt="x" />; }`;
+    const ids2 = idsOf(src2);
+    expect(() => applyEdit(CANVAS, src2, ids2.img as string, 'src', 'assets/new.png')).toThrow(
+      /bound to a JS expression/
+    );
+  });
+
+  test('a non-src attribute expression binding is unaffected (existing overwrite behavior)', () => {
+    // The refusal is scoped to `src` (the plan's stated gotcha) — an
+    // expression-bound `title` or similar still overwrites as before; widening
+    // the refusal to every attribute is a bigger, separate change.
+    const src = `function Demo({ label }) { return <button title={label}>x</button>; }`;
+    const ids = idsOf(src);
+    const out = applyEdit(CANVAS, src, ids.button as string, 'title', 'Fixed label');
+    expect(out.source).toContain('title="Fixed label"');
+  });
+});
+
 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>; }';

package/apps/studio/test/canvas-origin-gate.test.ts

@@ -93,6 +93,24 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
         // revert route (whole-file swap — strictly more powerful than a move).
         '/_api/reorder',
         '/_api/reorder-revert',
+        // Stage I (feature-element-editing-robustness) — general element
+        // structural edits (delete / insert / new-artboard) + free-hand artboard
+        // resize (D4) are ALL source-writes, MAIN-ORIGIN ONLY. The untrusted
+        // canvas iframe requests them over the dgn:* bus; the shell performs the
+        // write. A GET from the canvas origin must 403 at the gate (route
+        // unreachable on this origin), never 405 from a reached handler.
+        '/_api/delete-element',
+        '/_api/insert-element',
+        '/_api/duplicate-element',
+        '/_api/insert-artboard',
+        '/_api/resize-artboard',
+        '/_api/delete-artboard',
+        // Stage F1 — the AssetPicker's asset-listing GET is a shell (main-origin)
+        // concern; the untrusted canvas iframe must not enumerate project media.
+        '/_api/assets',
+        // Stage H — the edit-scope (local-vs-shared) verdict is a shell badge
+        // concern; the untrusted canvas origin must not reach it (dual-allowlist).
+        '/_api/edit-scope',
         // Phase 27 (E2) — every /_api/git/* route is MAIN-ORIGIN ONLY: absent from
         // CANVAS_SAFE_API + startCanvasServer's `routes` map. A GET from the
         // canvas origin must 403 at the gate (not 405 from a reached handler),

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

@@ -0,0 +1,198 @@
+// 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/comments-overlay.test.ts

@@ -0,0 +1,117 @@
+// comments-overlay — pure helpers covering the two comment-anchoring bugs in
+// .ai/logs/rca/issue-comment-anchor-drift-and-popup-edge-clamp.md:
+//
+//   1. `resolveCommentTarget` — a stale `data-cd-id` selector (post-rewrite
+//      renumbering, DDR-019) must not be trusted when it resolves to an
+//      element of the wrong tag; it must fall back to the structural matcher,
+//      and return null (not a wrong element) when the target is truly gone.
+//   2. `placeNearPoint` — the composer/thread popup must flip to whichever
+//      side of the anchor actually fits the viewport, instead of always
+//      growing down-right and clipping off-screen near a canvas edge.
+//
+// Needs a live DOM for (1) — register happy-dom for THIS file only, like
+// annotations-roundtrip.test.ts.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { placeNearPoint, resolveCommentTarget } from '../comments-overlay.tsx';
+
+describe('resolveCommentTarget', () => {
+  test('trusts a direct data-cd-id hit when the tag matches', () => {
+    document.body.innerHTML = `
+      <div data-dc-screen="art1">
+        <button class="cta" data-cd-id="aaa11111">Buy now</button>
+      </div>
+    `;
+    const el = resolveCommentTarget({
+      selector: '[data-dc-screen="art1"] [data-cd-id="aaa11111"]',
+      tag: 'button',
+      classes: 'cta',
+      dom_path: ['html', 'body', 'div[data-dc-screen="art1"]', 'button.cta'],
+    });
+    expect(el?.getAttribute('data-cd-id')).toBe('aaa11111');
+  });
+
+  test('falls back to the structural match when the id now belongs to a different tag', () => {
+    // Renumbering: "aaa11111" now sits on an unrelated <div>; the button the
+    // comment was anchored to kept its structure but got a fresh id.
+    document.body.innerHTML = `
+      <div data-dc-screen="art1">
+        <div data-cd-id="aaa11111" class="decoy">Wrong element now has the old id</div>
+        <section class="hero">
+          <button class="cta" data-cd-id="zzz99999">Buy now</button>
+        </section>
+      </div>
+    `;
+    const el = resolveCommentTarget({
+      selector: '[data-dc-screen="art1"] [data-cd-id="aaa11111"]',
+      tag: 'button',
+      classes: 'cta',
+      dom_path: ['html', 'body', 'div[data-dc-screen="art1"]', 'section.hero', 'button.cta'],
+    });
+    expect(el?.getAttribute('data-cd-id')).toBe('zzz99999');
+  });
+
+  test('returns null (not a wrong element) when the target has genuinely been removed', () => {
+    document.body.innerHTML = `
+      <div data-dc-screen="art1">
+        <p>The button that used to be here is gone.</p>
+      </div>
+    `;
+    const el = resolveCommentTarget({
+      selector: '[data-dc-screen="art1"] [data-cd-id="aaa11111"]',
+      tag: 'button',
+      classes: 'cta',
+      dom_path: ['html', 'body', 'div[data-dc-screen="art1"]', 'button.cta'],
+    });
+    expect(el).toBeNull();
+  });
+});
+
+describe('placeNearPoint', () => {
+  beforeAll(() => {
+    window.innerWidth = 1000;
+    window.innerHeight = 800;
+  });
+
+  test('keeps the default down-right placement when there is room', () => {
+    const placed = placeNearPoint({ x: 100, y: 100 }, { w: 300, h: 200 });
+    expect(placed).toEqual({ x: 100, y: 100 });
+  });
+
+  test('flips to the left of the anchor when the card would overflow the right edge', () => {
+    const placed = placeNearPoint({ x: 900, y: 100 }, { w: 300, h: 200 });
+    // 900 + 300 = 1200 > 1000 → flip: 900 - 300 = 600, which has room (>= margin).
+    expect(placed.x).toBe(600);
+  });
+
+  test('flips above the anchor when the card would overflow the bottom edge', () => {
+    const placed = placeNearPoint({ x: 100, y: 700 }, { w: 300, h: 200 });
+    // 700 + 200 = 900 > 800 → flip: 700 - 200 = 500, which has room.
+    expect(placed.y).toBe(500);
+  });
+
+  test('flips both axes when the anchor sits in a corner (near right AND bottom edge)', () => {
+    const placed = placeNearPoint({ x: 950, y: 750 }, { w: 300, h: 200 });
+    // Flipped x (950-300=650) has room, so it flips rather than clamps.
+    expect(placed.x).toBe(650);
+    // Flipped y (750-200=550) has room too.
+    expect(placed.y).toBe(550);
+  });
+
+  test('clamps inward when even the flipped position would go negative', () => {
+    const placed = placeNearPoint({ x: 50, y: 50 }, { w: 2000, h: 2000 });
+    // Card wider/taller than the viewport in both directions — neither the
+    // default nor the flip fits, so it clamps to the margin-in-from-edge spot.
+    expect(placed.x).toBe(8);
+    expect(placed.y).toBe(8);
+  });
+});