@1agh/maude 0.29.0 → 0.30.0

package/apps/studio/test/annotations-snap.test.ts

@@ -0,0 +1,79 @@
+// annotations-snap — FigJam v3 drag snapping + smart guides (pure, DOM-free).
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  computeSnap,
+  GRID_PITCH_PX,
+  SNAP_THRESHOLD_PX,
+  type SnapBox,
+} from '../annotations-snap.ts';
+
+const box = (x: number, y: number, w = 100, h = 100): SnapBox => ({ x, y, w, h });
+
+describe('computeSnap', () => {
+  test('snaps left edge to a candidate left edge within the threshold', () => {
+    const res = computeSnap(box(104, 300), [box(100, 0)], SNAP_THRESHOLD_PX);
+    expect(res.dx).toBe(-4);
+    expect(res.dy).toBe(0);
+    expect(res.guides).toHaveLength(1);
+    const guide = res.guides[0];
+    expect(guide?.axis).toBe('x');
+    expect(guide?.at).toBe(100);
+    // The guide spans from the candidate to the (snapped) moving box.
+    expect(guide?.from).toBe(0);
+    expect(guide?.to).toBe(400);
+  });
+
+  test('centers participate — center-to-center snap', () => {
+    // moving center x = 153, candidate center x = 150 → dx -3.
+    const res = computeSnap(box(103, 0), [box(100, 300)], SNAP_THRESHOLD_PX);
+    expect(res.dx).toBe(-3);
+  });
+
+  test('axes resolve independently against different candidates', () => {
+    const res = computeSnap(box(104, 203), [box(100, 500), box(500, 200)], SNAP_THRESHOLD_PX);
+    expect(res.dx).toBe(-4); // left edge → first candidate
+    expect(res.dy).toBe(-3); // top edge → second candidate
+    expect(res.guides).toHaveLength(2);
+  });
+
+  test('nearest line wins; outside the threshold = no snap', () => {
+    const res = computeSnap(box(104, 0), [box(100, 0), box(105, 0)], SNAP_THRESHOLD_PX);
+    expect(res.dx).toBe(1); // 105 is 1 away vs 100 being 4 away
+    const none = computeSnap(box(120, 0), [box(100, 300)], SNAP_THRESHOLD_PX);
+    expect(none.dx).toBe(0);
+    expect(none.guides).toHaveLength(0);
+  });
+
+  test('empty candidates / zero threshold → no snap', () => {
+    expect(computeSnap(box(0, 0), [], SNAP_THRESHOLD_PX).guides).toHaveLength(0);
+    expect(computeSnap(box(101, 0), [box(100, 0)], 0).dx).toBe(0);
+  });
+
+  test('grid fallback — leading edge snaps to the 24px lattice with no candidates', () => {
+    // x=98 → nearest grid line 96 (4·24), 2 away; y=50 → nearest 48, 2 away.
+    const res = computeSnap(box(98, 50), [], SNAP_THRESHOLD_PX, { grid: GRID_PITCH_PX });
+    expect(res.dx).toBe(-2);
+    expect(res.dy).toBe(-2);
+    // Grid snap is silent — the dots themselves are the visual, no guide lines.
+    expect(res.guides).toHaveLength(0);
+  });
+
+  test('grid fallback is per-axis — a smart-guide axis keeps its candidate snap', () => {
+    // x snaps to the candidate edge (dx -4 → x=100, NOT the 96 grid line);
+    // y has no candidate within reach → grid line 48 wins (dy -2).
+    const res = computeSnap(box(104, 50), [box(100, 500)], SNAP_THRESHOLD_PX, {
+      grid: GRID_PITCH_PX,
+    });
+    expect(res.dx).toBe(-4);
+    expect(res.dy).toBe(-2);
+  });
+
+  test('grid outside the threshold → no correction', () => {
+    // x=84 sits 12 from both 72 and 96 — beyond the 6px threshold.
+    const res = computeSnap(box(84, 84), [], SNAP_THRESHOLD_PX, { grid: GRID_PITCH_PX });
+    expect(res.dx).toBe(0);
+    expect(res.dy).toBe(0);
+  });
+});

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

@@ -5,7 +5,13 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import { applyEdit, CanvasEditError, editAttribute } from '../canvas-edit.ts';
+import {
+  applyEdit,
+  applyRemove,
+  applyTextEdit,
+  CanvasEditError,
+  editAttribute,
+} from '../canvas-edit.ts';
 import { transpileCanvasSource } from '../canvas-pipeline.ts';
 
 const CANVAS = '/abs/Canvas.tsx';
@@ -52,6 +58,42 @@ describe('canvas-edit / applyEdit', () => {
     expect(out.source).toBe(`function Demo() { return <button aria-label="new">x</button>; }`);
   });
 
+  test('JSX-attribute-escapes a " in a replaced literal value (no JSON \\" corruption)', () => {
+    // Regression: the replace branch used to emit JSON.stringify(value) → `\"`,
+    // which is invalid JS-escaping inside a JSX attribute and corrupts the source.
+    // It must land as the HTML entity &quot; instead. See DDR-105.
+    const src = `function Demo() { return <button aria-label="old">x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'say "hi" <b>');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="say &quot;hi&quot; &lt;b&gt;">x</button>; }`
+    );
+    // Never the JS-escaped form that broke things.
+    expect(out.source).not.toContain('\\"');
+  });
+
+  test('JSX-attribute-escapes a " in a newly inserted attribute value', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'title', 'a "quoted" title');
+    expect(out.source).toBe(
+      `function Demo() { return <div title="a &quot;quoted&quot; title">x</div>; }`
+    );
+  });
+
+  test('replaces an expression-container attr value with a JSX-escaped literal', () => {
+    // <Tag name={expr} /> → <Tag name="value" />, entity-escaped (not JSON-escaped).
+    const src = `function Demo() { return <button aria-label={lbl}>x</button>; }`;
+    const ids = idsOf(src);
+    const id = ids.button as string;
+    const out = applyEdit(CANVAS, src, id, 'aria-label', 'with "quote"');
+    expect(out.source).toBe(
+      `function Demo() { return <button aria-label="with &quot;quote&quot;">x</button>; }`
+    );
+  });
+
   test('swaps a single style.<prop> value inside style={{...}}', () => {
     const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
     const ids = idsOf(src);
@@ -119,6 +161,62 @@ describe('canvas-edit / applyEdit', () => {
   });
 });
 
+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>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 8 }}>x</div>; }');
+  });
+
+  test('removes the leading style key (consumes the trailing comma)', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div style={{ margin: 4 }}>x</div>; }');
+  });
+
+  test('removing the only style key drops the whole style attribute', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.padding');
+    expect(out.source).toBe('function Demo() { return <div>x</div>; }');
+  });
+
+  test('accepts a kebab style prop name (border-radius → borderRadius)', () => {
+    const src = 'function Demo() { return <div style={{ borderRadius: 8, padding: 4 }}>x</div>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.div as string, 'style.border-radius');
+    expect(out.source).toBe('function Demo() { return <div style={{ padding: 4 }}>x</div>; }');
+  });
+
+  test('removes a plain attribute (custom data-*)', () => {
+    const src = 'function Demo() { return <button data-state="active">x</button>; }';
+    const ids = idsOf(src);
+    const out = applyRemove(CANVAS, src, ids.button as string, 'data-state');
+    expect(out.source).toBe('function Demo() { return <button>x</button>; }');
+  });
+
+  test('is a no-op (delta 0) when the key / attribute is absent', () => {
+    const src = 'function Demo() { return <div style={{ padding: 8 }}>x</div>; }';
+    const ids = idsOf(src);
+    const a = applyRemove(CANVAS, src, ids.div as string, 'style.margin');
+    expect(a.source).toBe(src);
+    expect(a.delta).toBe(0);
+    const b = applyRemove(CANVAS, src, ids.div as string, 'data-nope');
+    expect(b.source).toBe(src);
+    expect(b.delta).toBe(0);
+  });
+
+  test('refuses to remove data-cd-id (pipeline-owned)', () => {
+    const src = 'function Demo() { return <div>x</div>; }';
+    const ids = idsOf(src);
+    expect(() => applyRemove(CANVAS, src, ids.div as string, 'data-cd-id')).toThrow(
+      CanvasEditError
+    );
+  });
+});
+
 describe('canvas-edit / editAttribute (fs)', () => {
   test('writes the edit atomically + is a no-op when source unchanged', async () => {
     const tmp = `/tmp/canvas-edit-${Math.random().toString(36).slice(2)}.tsx`;
@@ -137,3 +235,85 @@ describe('canvas-edit / editAttribute (fs)', () => {
     expect(r2.delta).toBe(0);
   });
 });
+
+// Phase 12 (DDR-103) — inline text-content edit. Leaf-text only; JSX-escaped.
+describe('canvas-edit / applyTextEdit', () => {
+  test('overwrites a leaf text node', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Uložit');
+    expect(out.source).toBe(`function Demo() { return <button>Uložit</button>; }`);
+  });
+
+  test('preserves surrounding whitespace / indentation', () => {
+    const src = [
+      'function Demo() {',
+      '  return (',
+      '    <button>',
+      '      Save',
+      '    </button>',
+      '  );',
+      '}',
+    ].join('\n');
+    const id = idsOf(src).button as string;
+    const out = applyTextEdit(CANVAS, src, id, 'Go');
+    expect(out.source).toContain('    <button>\n      Go\n    </button>');
+  });
+
+  test('JSX-escapes <, >, {, }, & so text can never become markup or an expression', () => {
+    const src = `function Demo() { return <code>x</code>; }`;
+    const id = idsOf(src).code as string;
+    const out = applyTextEdit(CANVAS, src, id, 'a < b && c > {d}');
+    expect(out.source).toContain('a &lt; b &amp;&amp; c &gt; &#123;d&#125;');
+    expect(out.source).not.toContain('{d}');
+  });
+
+  test('refuses an element with mixed (element) children', () => {
+    const src = `function Demo() { return <div>hi <b>there</b></div>; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses an element whose only child is a JSX expression', () => {
+    const src = 'function Demo() { const t = "x"; return <h1>{t}</h1>; }';
+    const id = idsOf(src).h1 as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('refuses a self-closing / empty element (no text to edit)', () => {
+    const src = `function Demo() { return <div className="x" />; }`;
+    const id = idsOf(src).div as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
+
+  test('throws on a missing id', () => {
+    const src = `function Demo() { return <button>Save</button>; }`;
+    expect(() => applyTextEdit(CANVAS, src, 'deadbeef', 'x')).toThrow(CanvasEditError);
+  });
+});
+
+// Phase 12 (DDR-103) — the `style.<prop>` write path the CSS knobs ride
+// (api.editCss maps property → camelCase + always quotes the value).
+describe('canvas-edit / applyEdit style.<prop> (CSS-knob path)', () => {
+  test('inserts an inline style object when none exists', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.borderRadius', '"8px"');
+    expect(out.source).toContain('style={{ borderRadius: "8px" }}');
+  });
+
+  test('overwrites an existing style key, leaving siblings intact', () => {
+    const src = `function Demo() { return <div style={{ padding: 4, color: "red" }}>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"blue"');
+    expect(out.source).toContain('color: "blue"');
+    expect(out.source).toContain('padding: 4');
+  });
+
+  test('accepts a token-valued (var(--…)) string for on-system edits', () => {
+    const src = `function Demo() { return <div>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.padding', '"var(--space-3)"');
+    expect(out.source).toContain('style={{ padding: "var(--space-3)" }}');
+  });
+});

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

@@ -54,11 +54,19 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
       // /_api/canvas (Phase 22 file-write) is deliberately NOT in the canvas
       // origin's route allowlist — an untrusted canvas iframe must never create
       // arbitrary .tsx files. It is reachable ONLY from the main origin.
+      // Phase 12 (DDR-103) — the in-canvas direct-edit write routes are
+      // MAIN-ORIGIN ONLY: absent from CANVAS_SAFE_API + startCanvasServer's
+      // route map, so the untrusted canvas iframe origin must never reach a
+      // source-write endpoint. A GET here 403s at the gate (not 405 from the
+      // handler), proving the route is unreachable on this origin.
       for (const p of [
         '/_config',
         '/_sync-status',
         '/_api/export',
         '/_api/canvas',
+        '/_api/edit-css',
+        '/_api/edit-text',
+        '/_api/edit-attr',
         '/package.json',
       ]) {
         expect(await code(p)).toBe(403);

package/apps/studio/test/collab-bridge.test.ts

@@ -4,8 +4,6 @@
 
 import { describe, expect, test } from 'bun:test';
 
-import * as Y from 'yjs';
-
 import { Y_TYPES } from '../collab/persistence.ts';
 import { createRegistry } from '../collab/registry.ts';
 import type { RoomCallbacks } from '../collab/room.ts';

package/apps/studio/test/collab-room.test.ts

@@ -1,17 +1,12 @@
 // Unit: Room behavior — two in-memory peers see each other, debounced flush
 // fires, flush is idempotent, room teardown is clean.
 
-import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
+import { describe, expect, test } from 'bun:test';
 
 import { Awareness } from 'y-protocols/awareness';
 import * as Y from 'yjs';
 
-import {
-  encodeAwarenessFrame,
-  encodeHandshake,
-  encodeSyncUpdate,
-  handleMessage,
-} from '../collab/protocol.ts';
+import { encodeAwarenessFrame, handleMessage } from '../collab/protocol.ts';
 import { createRoom, type RoomCallbacks, type RoomConn } from '../collab/room.ts';
 
 function makeConn(id: string): RoomConn & { recv: Uint8Array[] } {

package/apps/studio/test/csp-canvas-shell.test.ts

@@ -39,6 +39,11 @@ describe('cspForCanvasShell — A6 hardening', () => {
     expect(csp).toContain("frame-ancestors 'self' http://localhost:4399");
   });
 
+  test('frame-ancestors carries every advertised loopback spelling (localhost + 127.0.0.1)', () => {
+    const csp = cspForCanvasShell(SHELL, 'http://localhost:4399 http://127.0.0.1:4399');
+    expect(csp).toContain("frame-ancestors 'self' http://localhost:4399 http://127.0.0.1:4399");
+  });
+
   test('frame-ancestors is OMITTED when the main origin is unknown (would block the legit embed)', () => {
     const csp = cspForCanvasShell(SHELL);
     expect(csp).not.toContain('frame-ancestors');

package/apps/studio/test/csrf-write-guard.test.ts

@@ -0,0 +1,52 @@
+// CSRF Origin guard for the main-origin source-write routes (edit-css /
+// edit-text / edit-attr). DDR-105. The DDR-054 origin-split already blocks the
+// untrusted canvas *iframe* (canvas-origin-gate.test.ts proves that). This guard
+// covers the OTHER untrusted origin: a malicious top-level page in another tab
+// forging a `text/plain` CORS simple-request POST to localhost. The browser
+// stamps such a request with an unspoofable cross-origin `Origin` header, so the
+// guard must reject it — while still letting the legit same-origin shell write
+// and not breaking non-browser clients (which send no Origin header).
+//
+// Unit-level on purpose: `sameOriginWrite` is a pure function of the Request, so
+// we exercise the decision directly instead of booting a subprocess server.
+// (A booted-server integration test would add a 124th server-booting file to the
+// suite, which perturbs bun's worker scheduling and surfaces a PRE-EXISTING
+// cross-worker port-collision flake in canvas-meta-api.test.ts — a test-harness
+// race unrelated to this guard. See the Phase 12.2 validate notes.)
+
+import { describe, expect, test } from 'bun:test';
+
+import { sameOriginWrite } from '../http.ts';
+
+const SELF = 'http://localhost:4399';
+const post = (origin?: string): Request =>
+  new Request(`${SELF}/_api/edit-css`, {
+    method: 'POST',
+    headers: { 'content-type': 'text/plain', ...(origin ? { origin } : {}) },
+    body: '{}',
+  });
+
+describe('CSRF Origin guard — sameOriginWrite (DDR-105)', () => {
+  test('rejects a forged cross-origin Origin', () => {
+    expect(sameOriginWrite(post('http://evil.example'))).toBe(false);
+    // A look-alike host (substring / suffix tricks) must not slip through.
+    expect(sameOriginWrite(post('http://localhost.evil.example'))).toBe(false);
+    expect(sameOriginWrite(post('http://localhost:4399.evil.example'))).toBe(false);
+    // Right host, wrong port is still cross-origin.
+    expect(sameOriginWrite(post('http://localhost:4400'))).toBe(false);
+    // Right host:port, wrong scheme is still cross-origin.
+    expect(sameOriginWrite(post('https://localhost:4399'))).toBe(false);
+  });
+
+  test('allows the legit same-origin shell Origin', () => {
+    expect(sameOriginWrite(post(SELF))).toBe(true);
+  });
+
+  test('allows a request with no Origin header (curl / programmatic / bun:test)', () => {
+    expect(sameOriginWrite(post())).toBe(true);
+  });
+
+  test('rejects an unparseable Origin rather than letting it through', () => {
+    expect(sameOriginWrite(post('not a url'))).toBe(false);
+  });
+});