@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/test/spacing-handles.test.ts

@@ -0,0 +1,138 @@
+// spacing-handles.ts — Stage J (feature-element-editing-robustness). Pure
+// geometry for the on-canvas padding + gap drag overlay: padding-edge handle
+// placement + drag math, and flex gap-midpoint placement + drag math.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  computeGapDrag,
+  computeGapMidpoints,
+  computePaddingDrag,
+  computePaddingLines,
+  flexMainAxis,
+  paddingSideSet,
+} from '../spacing-handles.ts';
+
+const RECT = { x: 100, y: 200, w: 300, h: 150 };
+
+describe('spacing-handles / computePaddingLines', () => {
+  test('places all 4 edges at the padding/content boundary, zoom 1', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 20, bottom: 30, left: 40 }, 1);
+    const bySide = Object.fromEntries(lines.map((l) => [l.side, l]));
+    expect(bySide.top).toEqual({ side: 'top', axis: 'y', x: 250, y: 210, length: 240 }); // w-40-20
+    expect(bySide.bottom).toEqual({ side: 'bottom', axis: 'y', x: 250, y: 320, length: 240 });
+    expect(bySide.left).toEqual({ side: 'left', axis: 'x', x: 140, y: 275, length: 110 }); // h-10-30
+    expect(bySide.right).toEqual({ side: 'right', axis: 'x', x: 380, y: 275, length: 110 });
+  });
+
+  test('scales the inset by zoom', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 0, bottom: 0, left: 0 }, 2);
+    const top = lines.find((l) => l.side === 'top');
+    expect(top?.y).toBe(220); // rect.y + 10*2
+  });
+
+  test('a non-positive zoom falls back to 1x', () => {
+    const lines = computePaddingLines(RECT, { top: 10, right: 0, bottom: 0, left: 0 }, 0);
+    expect(lines.find((l) => l.side === 'top')?.y).toBe(210);
+  });
+});
+
+describe('spacing-handles / computePaddingDrag', () => {
+  test('top grows when dragged DOWN (positive dy)', () => {
+    expect(computePaddingDrag('top', 10, 0, 6, 1)).toBe(16);
+  });
+  test('top shrinks when dragged UP (negative dy)', () => {
+    expect(computePaddingDrag('top', 10, 0, -4, 1)).toBe(6);
+  });
+  test('left grows when dragged RIGHT (positive dx)', () => {
+    expect(computePaddingDrag('left', 8, 5, 0, 1)).toBe(13);
+  });
+  test('bottom grows when dragged UP (sign flips vs top)', () => {
+    expect(computePaddingDrag('bottom', 10, 0, -6, 1)).toBe(16);
+  });
+  test('right grows when dragged LEFT (sign flips vs left)', () => {
+    expect(computePaddingDrag('right', 8, -5, 0, 1)).toBe(13);
+  });
+  test('clamps at 0 — never goes negative', () => {
+    expect(computePaddingDrag('top', 4, 0, -100, 1)).toBe(0);
+  });
+  test('divides the screen delta by zoom (world units)', () => {
+    expect(computePaddingDrag('top', 10, 0, 20, 2)).toBe(20); // 20/2 = +10
+  });
+});
+
+describe('spacing-handles / flexMainAxis', () => {
+  test('row / row-reverse → x', () => {
+    expect(flexMainAxis('row')).toBe('x');
+    expect(flexMainAxis('row-reverse')).toBe('x');
+  });
+  test('column / column-reverse → y', () => {
+    expect(flexMainAxis('column')).toBe('y');
+    expect(flexMainAxis('column-reverse')).toBe('y');
+  });
+  test('missing/empty defaults to row → x', () => {
+    expect(flexMainAxis(null)).toBe('x');
+    expect(flexMainAxis('')).toBe('x');
+  });
+});
+
+describe('spacing-handles / computeGapMidpoints', () => {
+  test('no gaps for < 2 children', () => {
+    expect(computeGapMidpoints([], 'x')).toEqual([]);
+    expect(computeGapMidpoints([RECT], 'x')).toEqual([]);
+  });
+
+  test('one midpoint between 2 children on the X axis, sorted by position', () => {
+    const a = { x: 0, y: 0, w: 100, h: 50 };
+    const b = { x: 120, y: 0, w: 100, h: 50 };
+    // Pass out of order — must sort by x before pairing.
+    expect(computeGapMidpoints([b, a], 'x')).toEqual([{ x: 110, y: 25 }]);
+  });
+
+  test('N-1 midpoints for N children, Y axis (column)', () => {
+    const a = { x: 0, y: 0, w: 80, h: 40 };
+    const b = { x: 0, y: 60, w: 80, h: 40 };
+    const c = { x: 0, y: 120, w: 80, h: 40 };
+    expect(computeGapMidpoints([a, b, c], 'y')).toEqual([
+      { x: 40, y: 50 },
+      { x: 40, y: 110 },
+    ]);
+  });
+});
+
+describe('spacing-handles / paddingSideSet', () => {
+  test('plain drag touches only the dragged side', () => {
+    expect(paddingSideSet('top', false, false)).toEqual(['top']);
+    expect(paddingSideSet('left', false, false)).toEqual(['left']);
+  });
+  test('Alt on top/bottom locks the vertical pair', () => {
+    expect(paddingSideSet('top', true, false)).toEqual(['top', 'bottom']);
+    expect(paddingSideSet('bottom', true, false)).toEqual(['top', 'bottom']);
+  });
+  test('Alt on left/right locks the horizontal pair', () => {
+    expect(paddingSideSet('left', true, false)).toEqual(['left', 'right']);
+    expect(paddingSideSet('right', true, false)).toEqual(['left', 'right']);
+  });
+  test('Alt+Shift locks all 4 sides regardless of which was grabbed', () => {
+    expect(paddingSideSet('top', true, true)).toEqual(['top', 'right', 'bottom', 'left']);
+    expect(paddingSideSet('right', true, true)).toEqual(['top', 'right', 'bottom', 'left']);
+  });
+  test('Shift alone (no Alt) is plain — matches the panel (shift is a step modifier there)', () => {
+    expect(paddingSideSet('top', false, true)).toEqual(['top']);
+  });
+});
+
+describe('spacing-handles / computeGapDrag', () => {
+  test('1:1 with cursor delta on the X axis (no doubling)', () => {
+    expect(computeGapDrag('x', 12, 8, 0, 1)).toBe(20);
+  });
+  test('1:1 with cursor delta on the Y axis', () => {
+    expect(computeGapDrag('y', 12, 0, -8, 1)).toBe(4);
+  });
+  test('clamps at 0', () => {
+    expect(computeGapDrag('x', 4, -100, 0, 1)).toBe(0);
+  });
+  test('divides by zoom', () => {
+    expect(computeGapDrag('x', 10, 20, 0, 2)).toBe(20); // 20/2 = +10
+  });
+});

package/apps/studio/test/specimen-select.test.ts

@@ -0,0 +1,88 @@
+// specimen-select — feature-element-editing-robustness Stage E (Task E1 + G2).
+// A DS preview specimen (`system/<ds>/preview/*.tsx`) has no CanvasShell — no
+// `.dc-canvas` host, no artboard-scoped selector. `isBareSpecimen`/
+// `pickSpecimenSelectEl` (canvas-comment-mount.tsx) are the generalized select
+// resolver that lets a specimen element still resolve to a `Selection` the
+// Inspector can edit, with a NULL artboard scope (the selector degrades to a
+// bare `[data-cd-id="…"]`, per dom-selection.ts `scopedCdSelector`).
+//
+// Needs a live DOM (elementFromPoint / closest / querySelector) — register
+// happy-dom for this file only, same convention as canvas-hmr-runtime.test.tsx.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { isBareSpecimen, pickSpecimenSelectEl } from '../canvas-comment-mount.tsx';
+import { hoverTargetToSelection } from '../dom-selection.ts';
+import type { HoverTarget } from '../input-router.tsx';
+
+describe('isBareSpecimen', () => {
+  test('true when no .dc-canvas host is mounted (a bare specimen)', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa"><span>hi</span></article>';
+    expect(isBareSpecimen()).toBe(true);
+  });
+
+  test('false when a .dc-canvas host is present (a UI canvas owns select instead)', () => {
+    document.body.innerHTML =
+      '<div class="dc-canvas"><article data-cd-id="aaaaaaaa">hi</article></div>';
+    expect(isBareSpecimen()).toBe(false);
+  });
+});
+
+describe('pickSpecimenSelectEl', () => {
+  test('climbs from the raw hit to its closest stamped [data-cd-id] ancestor', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa"><span id="inner">hi</span></article>';
+    const inner = document.getElementById('inner') as HTMLElement;
+    const article = document.querySelector('[data-cd-id]') as HTMLElement;
+    document.elementFromPoint = () => inner;
+
+    const el = pickSpecimenSelectEl(10, 10);
+    expect(el).toBe(article);
+  });
+
+  test('falls back to the bare hit when nothing is stamped (defensive, no crash)', () => {
+    document.body.innerHTML = '<div id="plain">no cd-id here</div>';
+    const plain = document.getElementById('plain') as HTMLElement;
+    document.elementFromPoint = () => plain;
+
+    expect(pickSpecimenSelectEl(5, 5)).toBe(plain);
+  });
+
+  test('returns null over comment chrome / the resize-handle overlay', () => {
+    document.body.innerHTML =
+      '<article data-cd-id="aaaaaaaa"><div class="cm-composer"><span id="chrome">x</span></div></article>';
+    const chromeEl = document.getElementById('chrome') as HTMLElement;
+    document.elementFromPoint = () => chromeEl;
+
+    expect(pickSpecimenSelectEl(1, 1)).toBeNull();
+  });
+
+  test('returns null when the hit is HTML/BODY (no content under the cursor)', () => {
+    document.elementFromPoint = () => document.body;
+    expect(pickSpecimenSelectEl(0, 0)).toBeNull();
+  });
+});
+
+describe('specimen select → Selection has a NULL artboard scope', () => {
+  test('hoverTargetToSelection({artboardId: null}) degrades to a bare [data-cd-id] selector', () => {
+    document.body.innerHTML = '<article data-cd-id="aaaaaaaa">hi</article>';
+    const el = document.querySelector('[data-cd-id]') as HTMLElement;
+    const target: HoverTarget = { el, cdId: 'aaaaaaaa', artboardId: null };
+
+    const sel = hoverTargetToSelection(target);
+
+    expect(sel.artboardId).toBeNull();
+    expect(sel.id).toBe('aaaaaaaa');
+    // No `[data-dc-screen="…"]` artboard scope prefix — a specimen has no
+    // artboard, so the selector must stay bare (dom-selection.ts scopedCdSelector).
+    expect(sel.selector).not.toContain('data-dc-screen');
+    expect(sel.selector).toContain('data-cd-id="aaaaaaaa"');
+  });
+});

package/apps/studio/test/tool-palette-insert-anchor.test.ts

@@ -0,0 +1,84 @@
+// tool-palette.tsx — Stage I3 tail (feature-element-editing-robustness). The
+// "+ Element" affordance's anchor resolver: appends relative to the ACTIVE
+// artboard's last existing child (mirrors the context-menu's element-relative
+// insert, since an artboard's own `<article data-dc-screen>` carries no
+// `data-cd-id` of its own — DCArtboard doesn't forward it to the DOM).
+//
+// Needs a live DOM (querySelector/:scope) — register happy-dom for this file
+// only, like canvas-hmr-runtime.test.tsx.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { resolveInsertAnchor } from '../tool-palette.tsx';
+
+describe('tool-palette / resolveInsertAnchor', () => {
+  test('anchors on the last data-cd-id child of the CURRENT (aria-current) artboard', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1">
+        <div class="dc-artboard-body">
+          <div data-cd-id="11111111">one</div>
+          <div data-cd-id="22222222">two</div>
+        </div>
+      </article>
+      <article data-dc-screen="a2" aria-current="true">
+        <div class="dc-artboard-body">
+          <div data-cd-id="33333333">three</div>
+          <div data-cd-id="44444444">four</div>
+        </div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: '44444444', position: 'after' });
+  });
+
+  test('falls back to the FIRST artboard when none is aria-current', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1">
+        <div class="dc-artboard-body"><div data-cd-id="aaaaaaaa">x</div></div>
+      </article>
+      <article data-dc-screen="a2">
+        <div class="dc-artboard-body"><div data-cd-id="bbbbbbbb">y</div></div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: 'aaaaaaaa', position: 'after' });
+  });
+
+  test('skips a chrome direct-child with no data-cd-id, picking the last STAMPED one', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1" aria-current="true">
+        <div class="dc-artboard-body">
+          <div data-cd-id="11111111">one</div>
+          <div class="some-chrome-node">no cd-id</div>
+        </div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: '11111111', position: 'after' });
+  });
+
+  test('returns null for an EMPTY artboard (no data-cd-id child to anchor on)', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1" aria-current="true">
+        <div class="dc-artboard-body"></div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+
+  test('returns null when there is no artboard at all', () => {
+    document.body.innerHTML = '<div>no artboards here</div>';
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+
+  test('returns null when the artboard has no .dc-artboard-body wrapper', () => {
+    document.body.innerHTML =
+      '<article data-dc-screen="a1"><div data-cd-id="11111111">x</div></article>';
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+});

package/apps/studio/test/undo-sequence-byte-compare.test.ts

@@ -0,0 +1,211 @@
+// Stage K (Task K1, feature-element-editing-robustness) — the scripted
+// mixed-op undo sequence the plan's INV-1 asks for: resize → delete → insert
+// → move → spacing-drag → Cmd+Z ×5 → canvas byte-identical to the start.
+//
+// Drives the SAME HTTP routes the client's undo mechanisms call:
+//   - CSS-shaped ops (resize/move/spacing) undo by re-POSTing `/_api/edit-css`
+//     with the pre-edit value — exactly what `recordSourceEdit` +
+//     `commands/edit-source-command.ts`'s `undo()` do (do/undo are both a
+//     single `applyFn` call with a different `value`, so there is no
+//     separate "revert" endpoint to test — the HTTP-level round-trip IS the
+//     undo mechanism).
+//   - Structural ops (delete/insert) undo via `/_api/reorder-revert`, the
+//     whole-file seq-log swap Stage I reuses from Phase 12.1's reorder undo
+//     (`commands/reorder-command.ts`) rather than a bespoke command per op.
+//
+// `/_api/reorder-revert` 409s if the file drifted since the logged seq (its
+// own doc comment: "refuses 409 when the canvas changed since") — so the 5
+// undos below MUST run in strict reverse (LIFO) order, exactly like a real
+// Cmd+Z stack, or the structural reverts would fail closed. That ordering
+// constraint is itself part of what this test proves.
+
+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';
+
+// Style values use DOUBLE quotes throughout — matching this codebase's own
+// authored-JSX convention (canvas-lib.tsx, scaffold-design.ts): editCss's
+// underlying write is a JSON.stringify literal, which is always
+// double-quoted regardless of the original source's quote style. A
+// single-quoted fixture would make a value round-trip only VALUE-identical,
+// not byte-identical (a cosmetic quote-style delta, not a real undo gap) —
+// double-quoting the fixture up front keeps this test's byte-compare
+// meaningful instead of tripping over that unrelated cosmetic mismatch.
+const CANVAS_SRC = `export default function Seq() {
+  return (
+    <DesignCanvas>
+      <DCArtboard id="home" label="Home" width={1440} height={1024}>
+        <figure style={{ position: "absolute", left: "20px", top: "20px", width: "100px", height: "60px" }}>Box</figure>
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+        <section style={{ display: "flex", paddingLeft: "8px" }}>
+          <span>x</span>
+          <span>y</span>
+        </section>
+      </DCArtboard>
+    </DesignCanvas>
+  );
+}
+`;
+
+interface LocatorEntry {
+  line: number;
+  jsxPath: string[];
+}
+
+async function locatorMap(main: string, designRoot: string): Promise<Record<string, LocatorEntry>> {
+  const r = await fetch(`${main}/.design/ui/Seq.tsx`, { signal: AbortSignal.timeout(2000) });
+  expect(r.status).toBe(200);
+  const locator = JSON.parse(readFileSync(join(designRoot, '_locator.json'), 'utf8'));
+  return locator['ui/Seq'] as Record<string, LocatorEntry>;
+}
+
+/** First (only, in this fixture) data-cd-id whose JSX tag is `tag`. */
+function idOf(map: Record<string, LocatorEntry>, tag: string): string {
+  const hit = Object.entries(map).find(([, e]) => e.jsxPath[e.jsxPath.length - 1] === tag);
+  expect(hit).toBeDefined();
+  return hit?.[0] as string;
+}
+
+function idsByTag(map: Record<string, LocatorEntry>, tag: string): string[] {
+  return Object.entries(map)
+    .filter(([, e]) => e.jsxPath[e.jsxPath.length - 1] === tag)
+    .sort((a, b) => a[1].line - b[1].line)
+    .map(([id]) => id);
+}
+
+async function editCss(
+  main: string,
+  body: { canvas: string; id: string; property: string; value: string }
+): Promise<{ ok: boolean; error?: string }> {
+  const res = await fetch(`${main}/_api/edit-css`, {
+    method: 'POST',
+    body: JSON.stringify(body),
+    signal: AbortSignal.timeout(2000),
+  });
+  return (await res.json()) as { ok: boolean; error?: string };
+}
+
+describe('Stage K1 — mixed resize/delete/insert/move/spacing undo sequence', () => {
+  test('5 undos (LIFO) return the canvas byte-identical to its start', async () => {
+    const { root, designRoot } = makeSandbox();
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    writeFileSync(join(designRoot, 'ui', 'Seq.tsx'), CANVAS_SRC);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    const main = `http://localhost:${port}`;
+    const canvasPath = join(designRoot, 'ui', 'Seq.tsx');
+    const original = readFileSync(canvasPath, 'utf8');
+    expect(original).toBe(CANVAS_SRC);
+
+    try {
+      // ── 1. resize (CSS-shaped) ──────────────────────────────────────────
+      let map = await locatorMap(main, designRoot);
+      const boxId = idOf(map, 'figure');
+      const resize = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxId,
+        property: 'width',
+        value: '140px',
+      });
+      expect(resize.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('width: "140px"');
+
+      // ── 2. delete (structural) ──────────────────────────────────────────
+      map = await locatorMap(main, designRoot);
+      const [aId, bId] = idsByTag(map, 'div');
+      const del = await fetch(`${main}/_api/delete-element`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', id: bId }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(del.status).toBe(200);
+      const delJson = (await del.json()) as { ok: boolean; seq: number };
+      expect(delJson.ok).toBe(true);
+      expect(
+        [...readFileSync(canvasPath, 'utf8').matchAll(/<div>([ABC])</g)].map((m) => m[1])
+      ).toEqual(['A', 'C']);
+
+      // ── 3. insert (structural) ──────────────────────────────────────────
+      const ins = await fetch(`${main}/_api/insert-element`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', refId: aId, position: 'after', kind: 'div' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(ins.status).toBe(200);
+      const insJson = (await ins.json()) as { ok: boolean; seq: number; newId: string | null };
+      expect(insJson.ok).toBe(true);
+
+      // ── 4. move (CSS-shaped, same box element as step 1) ────────────────
+      map = await locatorMap(main, designRoot);
+      const boxIdAfterStructural = idOf(map, 'figure');
+      const move = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxIdAfterStructural,
+        property: 'left',
+        value: '60px',
+      });
+      expect(move.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('left: "60px"');
+
+      // ── 5. spacing-drag (CSS-shaped, padding-left) ──────────────────────
+      map = await locatorMap(main, designRoot);
+      const sectionId = idOf(map, 'section');
+      const spacing = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: sectionId,
+        property: 'padding-left',
+        value: '24px',
+      });
+      expect(spacing.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('paddingLeft: "24px"');
+
+      // ── Cmd+Z ×5 — strict LIFO ───────────────────────────────────────────
+      const undo5 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: sectionId,
+        property: 'padding-left',
+        value: '8px',
+      });
+      expect(undo5.ok).toBe(true);
+
+      const undo4 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxIdAfterStructural,
+        property: 'left',
+        value: '20px',
+      });
+      expect(undo4.ok).toBe(true);
+
+      const undo3 = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', seq: insJson.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(undo3.status).toBe(200);
+
+      const undo2 = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', seq: delJson.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(undo2.status).toBe(200);
+
+      const undo1 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxId,
+        property: 'width',
+        value: '100px',
+      });
+      expect(undo1.ok).toBe(true);
+
+      // ── Assert: byte-identical to the pre-sequence source ───────────────
+      expect(readFileSync(canvasPath, 'utf8')).toBe(original);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});