@1agh/maude 0.40.0 → 0.42.0

package/apps/studio/test/dom-selection.test.ts

@@ -0,0 +1,130 @@
+// dom-selection — resolveByDomPath, the structural fallback comments-overlay
+// (and future consumers) reach for when a stored `data-cd-id` selector no
+// longer identifies the intended element. This is the DDR-019 renumbering
+// scenario: a canvas rewrite (/design:edit regenerating JSX) shifts every
+// subsequent element's positional id within a component, so the id can end up
+// on an unrelated element, or on none at all. See
+// .ai/logs/rca/issue-comment-anchor-drift-and-popup-edge-clamp.md.
+//
+// Needs a live DOM (querySelectorAll / getAttribute walk) — 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 { resolveByDomPath } from '../dom-selection.ts';
+
+function setArtboard(html: string): void {
+  document.body.innerHTML = `<div data-dc-screen="art1">${html}</div>`;
+}
+
+describe('resolveByDomPath', () => {
+  test('finds the structurally-matching element when a same-id decoy has the wrong tag', () => {
+    // Simulates the renumbering bug: the stored data-cd-id ("bbb22222") now
+    // belongs to an unrelated <div>, while the ORIGINAL <button> the comment
+    // was anchored to survives under a different id ("ccc33333"). The
+    // fallback must find the button by structure, not by the stale id.
+    setArtboard(`
+      <div data-cd-id="bbb22222" class="decoy">Wrong element now has the old id</div>
+      <section class="hero">
+        <button class="cta primary" data-cd-id="ccc33333">Buy now</button>
+      </section>
+    `);
+    const found = resolveByDomPath(document, {
+      artboardId: 'art1',
+      tag: 'button',
+      classes: 'cta primary',
+      dom_path: [
+        'html',
+        'body',
+        'div[data-dc-screen="art1"]',
+        'section.hero',
+        'button.cta.primary',
+      ],
+    });
+    expect(found).not.toBeNull();
+    expect(found?.getAttribute('data-cd-id')).toBe('ccc33333');
+  });
+
+  test('prefers the candidate with the longer matching ancestor suffix over a shallower same-tag sibling', () => {
+    setArtboard(`
+      <button class="cta primary" data-cd-id="aaa11111">Outer decoy button</button>
+      <section class="hero">
+        <button class="cta primary" data-cd-id="bbb22222">Nested target</button>
+      </section>
+    `);
+    const found = resolveByDomPath(document, {
+      artboardId: 'art1',
+      tag: 'button',
+      classes: 'cta primary',
+      dom_path: [
+        'html',
+        'body',
+        'div[data-dc-screen="art1"]',
+        'section.hero',
+        'button.cta.primary',
+      ],
+    });
+    expect(found?.getAttribute('data-cd-id')).toBe('bbb22222');
+  });
+
+  test('returns null when no element in the artboard shares the stored tag', () => {
+    setArtboard(`<div data-cd-id="aaa11111" class="cta primary">Not a button</div>`);
+    const found = resolveByDomPath(document, {
+      artboardId: 'art1',
+      tag: 'button',
+      classes: 'cta primary',
+      dom_path: ['html', 'body', 'div[data-dc-screen="art1"]', 'button.cta.primary'],
+    });
+    expect(found).toBeNull();
+  });
+
+  test('returns null with no dom_path or no tag (nothing to match against)', () => {
+    setArtboard(`<button class="cta primary" data-cd-id="aaa11111">Buy now</button>`);
+    expect(
+      resolveByDomPath(document, { artboardId: 'art1', tag: 'button', classes: 'cta primary' })
+    ).toBeNull();
+    expect(
+      resolveByDomPath(document, {
+        artboardId: 'art1',
+        classes: 'cta primary',
+        dom_path: ['button.cta.primary'],
+      })
+    ).toBeNull();
+  });
+
+  test('scopes the search to the given artboard — a matching element in a different artboard is ignored', () => {
+    document.body.innerHTML = `
+      <div data-dc-screen="art1">
+        <button class="cta primary" data-cd-id="aaa11111">Art1 button</button>
+      </div>
+      <div data-dc-screen="art2">
+        <section class="hero">
+          <button class="cta primary" data-cd-id="bbb22222">Art2 button</button>
+        </section>
+      </div>
+    `;
+    const found = resolveByDomPath(document, {
+      artboardId: 'art1',
+      tag: 'button',
+      classes: 'cta primary',
+      dom_path: [
+        'html',
+        'body',
+        'div[data-dc-screen="art2"]',
+        'section.hero',
+        'button.cta.primary',
+      ],
+    });
+    // The art2 button structurally matches perfectly, but art1 is the requested
+    // scope — the only art1 candidate is a shallower, shorter-suffix match.
+    expect(found?.getAttribute('data-cd-id')).toBe('aaa11111');
+  });
+});

package/apps/studio/test/edit-css-occurrence.test.ts

@@ -0,0 +1,81 @@
+// canvas-edit.ts — Stage H3 (feature-element-editing-robustness). A whole-
+// component-instance move/resize passes a DOM-occurrence index into edit-css so
+// `applyEdit` routes the write to that instance's `<Component/>` USAGE (local to
+// the dragged instance) instead of the shared inner definition (global). The knob
+// / paste-style paths pass NO occurrence, so inner-shared-element styling stays
+// global-and-labeled — the H2 badge is the answer there (the chosen model).
+// Positional ids are round-tripped through transpileCanvasSource like the sibling
+// structural test, so the arithmetic stays in lockstep with the pipeline.
+
+import { describe, expect, test } from 'bun:test';
+
+import { applyEdit } from '../canvas-edit.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+
+const CANVAS = '/abs/Canvas.tsx';
+
+/** Map data-cd-id by element-type name (first occurrence), like canvas-edit.test.ts. */
+function idsOf(source: string): Record<string, string> {
+  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;
+}
+
+const SHARED = [
+  'function Card() { return <article>card</article>; }',
+  'function Demo() {',
+  '  return (',
+  '    <section>',
+  '      <Card />',
+  '      <Card />',
+  '      <Card />',
+  '    </section>',
+  '  );',
+  '}',
+].join('\n');
+
+describe('canvas-edit / applyEdit — Stage H3 occurrence routing', () => {
+  test('with an occurrence, a style edit routes to that <Component/> usage (local)', () => {
+    // The inner <article> id is shared across all three <Card/> usages.
+    const innerId = idsOf(SHARED).article as string;
+    const out = applyEdit(CANVAS, SHARED, innerId, 'style.left', '"40px"', 1); // 2nd instance
+    // The 2nd (index 1) <Card/> usage gains the inline style; the shared inner
+    // <article> definition is untouched, so the other two instances don't move.
+    expect(out.source).toContain('<Card style={{ left: "40px" }}');
+    expect(out.source.match(/<Card \/>/g)?.length).toBe(2);
+    expect(out.source).toContain('<article>card</article>');
+  });
+
+  test('without an occurrence, the same edit stays on the shared inner element (global)', () => {
+    const innerId = idsOf(SHARED).article as string;
+    const out = applyEdit(CANVAS, SHARED, innerId, 'style.left', '"40px"');
+    // No occurrence → knob / paste-style behavior: the write lands on the inner
+    // <article>, changing every rendered instance (the "inner styling is global"
+    // model the H2 badge labels).
+    expect(out.source).toContain('<article style={{ left: "40px" }}>card</article>');
+    expect(out.source).not.toContain('<Card style=');
+  });
+
+  test('a normal (non-instance) element ignores the occurrence (no-op remap)', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '14', 3);
+    expect(out.source).toContain('<div style={{ padding: 14 }}>x</div>');
+  });
+
+  test('an element in a single-usage component ignores the occurrence (not splittable)', () => {
+    const src = [
+      'function Card() { return <article>card</article>; }',
+      'function Demo() { return <section><Card /></section>; }',
+    ].join('\n');
+    const innerId = idsOf(src).article as string;
+    // One usage → resolveUsageId returns the inner id (can't split) — the edit
+    // lands on <article>, never fabricates a phantom usage index.
+    const out = applyEdit(CANVAS, src, innerId, 'style.left', '"40px"', 0);
+    expect(out.source).toContain('<article style={{ left: "40px" }}>card</article>');
+    expect(out.source).not.toContain('<Card style=');
+  });
+});

package/apps/studio/test/edit-scope-api.test.ts

@@ -0,0 +1,115 @@
+// GET /_api/edit-scope — the INV-3 local-vs-shared predictability verdict
+// (feature-element-editing-robustness Stage H). Boots a real server, serves a
+// canvas with a `Card` component reused 3×, then asserts:
+//   • an element INSIDE the reused component → scope 'shared', affects 3
+//   • a top-level artboard element → scope 'local'
+//   • the `.map()` caveat (DDR-139) — a local element rendered N× (client-
+//     supplied `rendered`) → scope 'shared', reason 'mapped'
+//   • the route is main-origin only (proven separately in canvas-origin-gate).
+
+import { describe, expect, test } from 'bun:test';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+const CANVAS_SRC = `const Card = ({ title }) => (
+  <div className="card">
+    <h3>{title}</h3>
+  </div>
+);
+
+export default function Gallery() {
+  return (
+    <DesignCanvas>
+      <DCArtboard id="home" label="Home" width={1440} height={1024}>
+        <section className="grid">
+          <Card title="A" />
+          <Card title="B" />
+          <Card title="C" />
+        </section>
+      </DCArtboard>
+    </DesignCanvas>
+  );
+}
+`;
+
+interface LocEntry {
+  line: number;
+  jsxPath: string[];
+  componentName: string;
+}
+
+async function boot() {
+  const { root, designRoot } = makeSandbox();
+  mkdirSync(join(designRoot, 'ui'), { recursive: true });
+  writeFileSync(join(designRoot, 'ui', 'Gallery.tsx'), CANVAS_SRC);
+  const port = nextPort();
+  const proc = await bootServer(root, port);
+  return { designRoot, main: `http://localhost:${port}`, proc };
+}
+
+/** Warm the pipeline (stamps cd-ids + writes _locator.json), return the map. */
+async function locatorMap(main: string, designRoot: string): Promise<Record<string, LocEntry>> {
+  const r = await fetch(`${main}/.design/ui/Gallery.tsx`, { signal: AbortSignal.timeout(2000) });
+  expect(r.status).toBe(200);
+  const locator = JSON.parse(readFileSync(join(designRoot, '_locator.json'), 'utf8'));
+  return locator['ui/Gallery'] as Record<string, LocEntry>;
+}
+
+function findId(map: Record<string, LocEntry>, pred: (e: LocEntry) => boolean): string {
+  const hit = Object.entries(map).find(([, e]) => pred(e));
+  if (!hit) throw new Error('no matching locator entry');
+  return hit[0];
+}
+
+async function scope(main: string, id: string, rendered?: number) {
+  const q = new URLSearchParams({ canvas: 'ui/Gallery', id });
+  if (rendered != null) q.set('rendered', String(rendered));
+  const res = await fetch(`${main}/_api/edit-scope?${q}`, { signal: AbortSignal.timeout(2000) });
+  return { status: res.status, body: (await res.json()) as Record<string, unknown> };
+}
+
+describe('GET /_api/edit-scope', () => {
+  test('reports shared for a reused-component inner element, local for a top-level one', async () => {
+    const { designRoot, main, proc } = await boot();
+    try {
+      const map = await locatorMap(main, designRoot);
+
+      // An element inside the reused `Card` component (componentName === 'Card').
+      const innerId = findId(map, (e) => e.componentName === 'Card');
+      const shared = await scope(main, innerId);
+      expect(shared.status).toBe(200);
+      expect(shared.body.scope).toBe('shared');
+      expect(shared.body.componentName).toBe('Card');
+      expect(shared.body.affects).toBe(3);
+      expect(shared.body.reason).toBe('component');
+
+      // A top-level artboard element (the <section>) — not inside a reused comp.
+      const topId = findId(
+        map,
+        (e) => e.componentName !== 'Card' && e.jsxPath[e.jsxPath.length - 1] === 'section'
+      );
+      const local = await scope(main, topId);
+      expect(local.status).toBe(200);
+      expect(local.body.scope).toBe('local');
+      expect(local.body.affects).toBe(1);
+      expect(local.body.reason).toBe('single');
+
+      // The .map() caveat (DDR-139): a local element the client says renders N×
+      // is 'shared' ('mapped') even though its source usage count is 1.
+      const mapped = await scope(main, topId, 4);
+      expect(mapped.body.scope).toBe('shared');
+      expect(mapped.body.reason).toBe('mapped');
+      expect(mapped.body.affects).toBe(4);
+
+      // A bogus id is a 400 (invalid data-cd-id shape).
+      const bad = await fetch(`${main}/_api/edit-scope?canvas=ui/Gallery&id=zzz`, {
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(bad.status).toBe(400);
+    } finally {
+      await killProc(proc as never);
+    }
+  });
+});

package/apps/studio/test/element-resize.test.ts

@@ -0,0 +1,136 @@
+// element-resize — feature-element-editing-robustness Stage D (Task D1 + G2).
+// Pure resize math: `computeElementResize(corner, start, dxW, dyW, mods, flags)`.
+// World-unit deltas → target box, deriving left/top only when the moved edge
+// permits it (out-of-flow element with an inline value), holding the opposite
+// edge fixed (Figma grammar).
+
+import { describe, expect, test } from 'bun:test';
+import {
+  computeElementResize,
+  type ElResizeStart,
+  pointerAngleRad,
+  rotateDeltaDeg,
+  rotatePointDeg,
+  rotationDegFromMatrix,
+  scaleFromMatrix,
+} from '../use-element-resize.tsx';
+
+const NO_MODS = { aspect: false, center: false };
+const NO_MOVE = { canMoveLeft: false, canMoveTop: false };
+const CAN_MOVE = { canMoveLeft: true, canMoveTop: true };
+
+// A 200×100 box at left:50 top:30 (out-of-flow when CAN_MOVE).
+const START: ElResizeStart = { w: 200, h: 100, left: 50, top: 30 };
+
+describe('computeElementResize — plain drags', () => {
+  test('SE corner grows width + height, never moves origin', () => {
+    const r = computeElementResize('se', START, 40, 20, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(240);
+    expect(r.height).toBe(120);
+    expect(r.left).toBeUndefined();
+    expect(r.top).toBeUndefined();
+  });
+
+  test('E edge changes width only', () => {
+    const r = computeElementResize('e', START, 30, 999, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(230);
+    expect(r.height).toBe(100);
+  });
+
+  test('S edge changes height only', () => {
+    const r = computeElementResize('s', START, 999, -25, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(200);
+    expect(r.height).toBe(75);
+  });
+
+  test('NW corner (out-of-flow) moves left+top, SE corner stays fixed', () => {
+    // Drag NW by (+10, +10): width 190, height 90; left 60, top 40.
+    const r = computeElementResize('nw', START, 10, 10, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(190);
+    expect(r.height).toBe(90);
+    expect(r.left).toBe(60); // start.left + start.w - width = 50 + 200 - 190
+    expect(r.top).toBe(40); // start.top + start.h - height = 30 + 100 - 90
+    // Opposite (SE) corner is invariant: left+width and top+height unchanged.
+    expect((r.left as number) + r.width).toBe(START.left + START.w);
+    expect((r.top as number) + r.height).toBe(START.top + START.h);
+  });
+
+  test('NW corner IN-FLOW resizes width/height but never writes left/top', () => {
+    const r = computeElementResize('nw', START, 10, 10, NO_MODS, NO_MOVE);
+    expect(r.width).toBe(190);
+    expect(r.height).toBe(90);
+    expect(r.left).toBeUndefined();
+    expect(r.top).toBeUndefined();
+  });
+
+  test('W edge (out-of-flow) moves left, keeps the east edge fixed', () => {
+    const r = computeElementResize('w', START, -20, 0, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(220); // start.w - dxW = 200 - (-20)
+    expect(r.left).toBe(30); // 50 + 200 - 220
+    expect(r.top).toBeUndefined();
+  });
+});
+
+describe('computeElementResize — modifiers', () => {
+  test('Shift on SE corner locks the start aspect ratio (2:1)', () => {
+    // Bigger horizontal change → height driven by width to keep 2:1.
+    const r = computeElementResize('se', START, 100, 5, { aspect: true, center: false }, CAN_MOVE);
+    expect(r.width).toBe(300);
+    expect(r.height).toBe(150); // 300 / (200/100)
+    expect(r.width / r.height).toBe(START.w / START.h);
+  });
+
+  test('Alt on E edge (out-of-flow) resizes from center: 2× delta, left shifts', () => {
+    const r = computeElementResize('e', START, 20, 0, { aspect: false, center: true }, CAN_MOVE);
+    expect(r.width).toBe(240); // 200 + 2*20
+    expect(r.left).toBe(30); // center-preserving: 50 + (200-240)/2
+    // Center is invariant: left + width/2 unchanged.
+    expect((r.left as number) + r.width / 2).toBe(START.left + START.w / 2);
+  });
+
+  test('shrinking past zero clamps to the 1px minimum', () => {
+    const r = computeElementResize('se', START, -500, -500, NO_MODS, CAN_MOVE);
+    expect(r.width).toBe(1);
+    expect(r.height).toBe(1);
+  });
+});
+
+describe('rotate math (Task L8)', () => {
+  test('rotationDegFromMatrix reads the angle', () => {
+    expect(rotationDegFromMatrix('none')).toBe(0);
+    expect(rotationDegFromMatrix(null)).toBe(0);
+    expect(rotationDegFromMatrix('matrix(1, 0, 0, 1, 0, 0)')).toBe(0);
+    expect(rotationDegFromMatrix('matrix(0, 1, -1, 0, 0, 0)')).toBe(90); // CW 90°
+    expect(Math.round(rotationDegFromMatrix('matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)'))).toBe(
+      45
+    );
+  });
+
+  test('scaleFromMatrix reads the .dc-world zoom', () => {
+    expect(scaleFromMatrix('none')).toBe(1);
+    expect(scaleFromMatrix('matrix(2, 0, 0, 2, 100, 50)')).toBe(2);
+    // Scale survives a combined rotate+scale (magnitude of the first column).
+    expect(scaleFromMatrix('matrix(0, 1.5, -1.5, 0, 0, 0)')).toBe(1.5);
+  });
+
+  test('rotatePointDeg rotates a local offset (screen y-down, CW positive)', () => {
+    const [x0, y0] = rotatePointDeg(10, 0, 0);
+    expect(x0).toBeCloseTo(10);
+    expect(y0).toBeCloseTo(0);
+    const [x90, y90] = rotatePointDeg(10, 0, 90);
+    expect(x90).toBeCloseTo(0);
+    expect(y90).toBeCloseTo(10);
+  });
+
+  test('rotateDeltaDeg turns by the change in center→pointer angle; Shift snaps 15°', () => {
+    const start = pointerAngleRad(100, 100, 200, 100); // pointer right → 0 rad
+    const down = pointerAngleRad(100, 100, 100, 200); // pointer down → +π/2
+    // From 0°, dragging the pointer from right to down = +90°.
+    expect(rotateDeltaDeg(0, start, down, false)).toBe(90);
+    // No pointer change → angle unchanged (relative model).
+    expect(rotateDeltaDeg(30, start, start, false)).toBe(30);
+    // Shift snaps to a 15° multiple.
+    expect(rotateDeltaDeg(0, start, down, true) % 15).toBe(0);
+    expect(rotateDeltaDeg(0, start, down, true)).toBe(90);
+  });
+});