@1agh/maude 0.39.1 → 0.41.0

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

@@ -0,0 +1,91 @@
+// edit-persistence — DDR-148 dogfood. A CSS edit on a video-comp element must
+// survive into the RENDERED module, not just the optimistic DOM overlay — i.e.
+// source edit → build → the new value is in the compiled canvas the Player runs.
+// This end-to-end guard would have caught the original "my color reverts when
+// the video replays" bug (a trailing-comma insert produced `opacity: o, , color`
+// → the build FAILED → the Player kept rendering the OLD source).
+
+import { describe, expect, test } from 'bun:test';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { buildCanvasModule } from '../canvas-build.ts';
+import { applyEdit } from '../canvas-edit.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+
+const CANVAS = '/tmp/edit-persist.tsx';
+
+/** buildCanvasModule needs the entrypoint on disk — write the source, then build. */
+async function buildAt(source: string) {
+  const dir = mkdtempSync(join(tmpdir(), 'edit-persist-'));
+  const abs = join(dir, 'Comp.tsx');
+  writeFileSync(abs, source);
+  return buildCanvasModule(abs, source);
+}
+
+// A frame-driven letter span (the exact shape from the intro demo): computed
+// transform/opacity + a trailing comma on the last property.
+const COMP = `import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+export default function Comp() {
+  const frame = useCurrentFrame();
+  const y = interpolate(frame, [0, 20], [40, 0]);
+  const o = interpolate(frame, [0, 20], [0, 1]);
+  return (
+    <AbsoluteFill>
+      <span
+        style={{
+          fontSize: 132,
+          fontWeight: 800,
+          transform: \`translateY(\${y}px)\`,
+          opacity: o,
+          color: '#f0ece5',
+        }}
+      >
+        maude
+      </span>
+    </AbsoluteFill>
+  );
+}
+`;
+
+function spanId(source: string): string {
+  const { withIds } = transpileCanvasSource(CANVAS, source);
+  const m = withIds.match(/<span[^>]*?data-cd-id="([0-9a-f]{8})"/);
+  if (!m) throw new Error('no span id');
+  return m[1] as string;
+}
+
+describe('edit-persistence — a CSS edit survives into the built module', () => {
+  test('SWAP an existing color → the new color is in the compiled canvas', async () => {
+    const id = spanId(COMP);
+    const edited = applyEdit(CANVAS, COMP, id, 'style.color', "'#ff0000'").source;
+    expect(edited).toContain("color: '#ff0000'");
+    // The value the Player actually renders is the BUILT module — assert it there.
+    const built = await buildAt(edited);
+    expect(built.js).toContain('#ff0000');
+    expect(built.js).not.toContain('#f0ece5'); // old value fully replaced
+  });
+
+  test('INSERT a new prop next to a TRAILING comma → still builds + renders (the bug)', async () => {
+    const id = spanId(COMP);
+    // Insert a brand-new property where the last one (color) ends with a comma.
+    const edited = applyEdit(CANVAS, COMP, id, 'style.letterSpacing', "'-0.04em'").source;
+    expect(edited).not.toMatch(/,\s*,/); // NO double comma (the crash that reverted the render)
+    const built = await buildAt(edited); // must not throw
+    expect(built.js).toContain('-0.04em');
+    expect(built.js).toContain('#f0ece5'); // untouched props survive
+  });
+
+  test('a SEQUENCE of edits all persist (no edit clobbers a prior one)', async () => {
+    let src = COMP;
+    const id = spanId(src);
+    src = applyEdit(CANVAS, src, id, 'style.color', "'#00ff00'").source;
+    src = applyEdit(CANVAS, src, id, 'style.fontWeight', '900').source;
+    src = applyEdit(CANVAS, src, id, 'style.fontSize', '148').source;
+    const built = await buildAt(src);
+    expect(built.js).toContain('#00ff00');
+    expect(built.js).toContain('148');
+    // the frame-driven values must still be present (edits never touched them)
+    expect(built.js).toContain('translateY');
+  });
+});

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);
+  });
+});