@1agh/maude 0.29.0 → 0.31.0

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

@@ -0,0 +1,124 @@
+// annotations-bindings — FigJam v3 connector binding (pure, DOM-free).
+// Semantics: Excalidraw proximity bind + FigJam side/center magnets; bound
+// endpoints derive from the host; deleting the host unbinds + freezes.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  anchorPoint,
+  BIND_THRESHOLD_PX,
+  bindCandidate,
+  facingAnchor,
+  isBindable,
+  recomputeBoundArrows,
+} from '../annotations-bindings.ts';
+import type { ArrowStroke, RectStroke, Stroke, TextStroke } from '../annotations-model.ts';
+
+function rect(id: string, x = 0, y = 0, w = 100, h = 80): RectStroke {
+  return { id, tool: 'rect', color: '#1f1f1f', width: 3, x, y, w, h };
+}
+function arrow(id: string, extra: Partial<ArrowStroke> = {}): ArrowStroke {
+  return { id, tool: 'arrow', color: '#1f1f1f', width: 3, x1: 0, y1: 0, x2: 50, y2: 0, ...extra };
+}
+
+describe('bindCandidate', () => {
+  test('binds within the threshold and snaps to the nearest magnet', () => {
+    const strokes: Stroke[] = [rect('host', 100, 100, 100, 100)];
+    // Just right of the host's right edge, vertically centered → (1, 0.5).
+    const bind = bindCandidate(205, 150, strokes, BIND_THRESHOLD_PX);
+    expect(bind).toEqual({ hostId: 'host', nx: 1, ny: 0.5 });
+    // Top-left corner region → (0, 0).
+    expect(bindCandidate(98, 102, strokes, BIND_THRESHOLD_PX)).toEqual({
+      hostId: 'host',
+      nx: 0,
+      ny: 0,
+    });
+  });
+
+  test('misses outside the threshold; topmost host wins; exclusions respected', () => {
+    const below = rect('below', 0, 0, 100, 100);
+    const above = rect('above', 50, 50, 100, 100);
+    const strokes: Stroke[] = [below, above];
+    expect(bindCandidate(500, 500, strokes, BIND_THRESHOLD_PX)).toBeNull();
+    expect(bindCandidate(75, 75, strokes, BIND_THRESHOLD_PX)?.hostId).toBe('above');
+    expect(bindCandidate(75, 75, strokes, BIND_THRESHOLD_PX, new Set(['above']))?.hostId).toBe(
+      'below'
+    );
+  });
+
+  test('only bindable tools host (no text/pen/arrow/link)', () => {
+    const label: TextStroke = {
+      id: 't',
+      tool: 'text',
+      color: '#1a1a1a',
+      fontSize: 14,
+      text: 'x',
+      x: 0,
+      y: 0,
+    };
+    expect(isBindable(label)).toBe(false);
+    expect(bindCandidate(0, 0, [label], BIND_THRESHOLD_PX)).toBeNull();
+    expect(isBindable(rect('r'))).toBe(true);
+  });
+});
+
+describe('anchorPoint / recomputeBoundArrows', () => {
+  test('bound endpoints follow the host on move (translate → recompute)', () => {
+    const host = rect('host', 0, 0, 100, 100);
+    const ar = arrow('ar', {
+      x1: 100,
+      y1: 50,
+      x2: 300,
+      y2: 50,
+      startBind: { hostId: 'host', nx: 1, ny: 0.5 },
+    });
+    const moved: Stroke[] = [{ ...host, x: 50, y: 20 }, ar];
+    const out = recomputeBoundArrows(moved);
+    const a = out.find((s) => s.id === 'ar') as ArrowStroke;
+    expect([a.x1, a.y1]).toEqual([150, 70]);
+    expect([a.x2, a.y2]).toEqual([300, 50]); // free end untouched
+  });
+
+  test('anchor stays proportional through a host resize', () => {
+    const host = rect('host', 0, 0, 200, 100);
+    expect(anchorPoint(host, 0.5, 1)).toEqual([100, 100]);
+    expect(anchorPoint({ ...host, w: 400 }, 0.5, 1)).toEqual([200, 100]);
+  });
+
+  test('missing host → bind stripped, endpoint frozen (arrow survives)', () => {
+    const ar = arrow('ar', {
+      x1: 100,
+      y1: 50,
+      x2: 300,
+      y2: 50,
+      startBind: { hostId: 'gone', nx: 1, ny: 0.5 },
+    });
+    const out = recomputeBoundArrows([ar]);
+    const a = out.find((s) => s.id === 'ar') as ArrowStroke;
+    expect(a.startBind).toBeUndefined();
+    expect([a.x1, a.y1]).toEqual([100, 50]);
+  });
+
+  test('referential no-op when every endpoint already sits at its anchor', () => {
+    const host = rect('host', 0, 0, 100, 100);
+    const ar = arrow('ar', {
+      x1: 100,
+      y1: 50,
+      x2: 300,
+      y2: 50,
+      startBind: { hostId: 'host', nx: 1, ny: 0.5 },
+    });
+    const strokes: Stroke[] = [host, ar];
+    expect(recomputeBoundArrows(strokes)).toBe(strokes);
+  });
+});
+
+describe('facingAnchor (AI annotate / quick-create side pick)', () => {
+  test('picks the side magnet facing the target', () => {
+    const host = rect('h', 0, 0, 100, 100);
+    expect(facingAnchor(host, 500, 50)).toEqual({ hostId: 'h', nx: 1, ny: 0.5 });
+    expect(facingAnchor(host, -400, 50)).toEqual({ hostId: 'h', nx: 0, ny: 0.5 });
+    expect(facingAnchor(host, 50, 900)).toEqual({ hostId: 'h', nx: 0.5, ny: 1 });
+    expect(facingAnchor(host, 50, -900)).toEqual({ hostId: 'h', nx: 0.5, ny: 0 });
+  });
+});

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

@@ -0,0 +1,231 @@
+// annotations-groups — FigJam v3 grouping / duplicate / z-order (pure, DOM-free).
+// Group model: flat `groupIds` tag-array, deepest→shallowest, outermost = last.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  duplicateStrokes,
+  expandIdsToGroups,
+  groupStrokes,
+  normalizeGroups,
+  outermostGroupOf,
+  reorderStrokes,
+  ungroupStrokes,
+} from '../annotations-groups.ts';
+import type {
+  ArrowStroke,
+  PenStroke,
+  RectStroke,
+  Stroke,
+  TextStroke,
+} from '../annotations-model.ts';
+
+function rect(id: string, x = 0, extra: Partial<RectStroke> = {}): RectStroke {
+  return { id, tool: 'rect', color: '#1f1f1f', width: 3, x, y: 0, w: 100, h: 80, ...extra };
+}
+function pen(id: string, extra: Partial<PenStroke> = {}): PenStroke {
+  return {
+    id,
+    tool: 'pen',
+    color: '#e5484d',
+    width: 3,
+    points: [
+      [0, 0],
+      [10, 10],
+    ],
+    ...extra,
+  };
+}
+function arrow(id: string, extra: Partial<ArrowStroke> = {}): ArrowStroke {
+  return { id, tool: 'arrow', color: '#1f1f1f', width: 3, x1: 0, y1: 0, x2: 50, y2: 0, ...extra };
+}
+
+describe('outermostGroupOf / expandIdsToGroups', () => {
+  test('outermost group is the LAST groupIds element (deepest→shallowest)', () => {
+    expect(outermostGroupOf(rect('a', 0, { groupIds: ['inner', 'outer'] }))).toBe('outer');
+    expect(outermostGroupOf(rect('a'))).toBeNull();
+  });
+
+  test('expanding one member id selects the whole outermost group, in z order', () => {
+    const strokes: Stroke[] = [
+      rect('a', 0, { groupIds: ['g1'] }),
+      pen('loose'),
+      rect('b', 200, { groupIds: ['g1'] }),
+    ];
+    expect(expandIdsToGroups(['b'], strokes)).toEqual(['a', 'b']);
+  });
+
+  test('ungrouped ids pass through; mixed selection keeps both', () => {
+    const strokes: Stroke[] = [
+      rect('a', 0, { groupIds: ['g1'] }),
+      pen('loose'),
+      rect('b', 200, { groupIds: ['g1'] }),
+    ];
+    expect(expandIdsToGroups(['loose', 'a'], strokes)).toEqual(['a', 'loose', 'b']);
+  });
+});
+
+describe('groupStrokes', () => {
+  test('groups ≥2 strokes under a fresh outermost id, contiguous at the topmost member', () => {
+    const strokes: Stroke[] = [rect('a'), pen('mid'), rect('b', 200)];
+    const res = groupStrokes(strokes, ['a', 'b'], 'gNew');
+    expect(res).not.toBeNull();
+    if (!res) return;
+    // Block lands where the topmost member ('b') sat — after 'mid'.
+    expect(res.strokes.map((s) => s.id)).toEqual(['mid', 'a', 'b']);
+    expect(
+      res.strokes.filter((s) => s.id !== 'mid').every((s) => outermostGroupOf(s) === 'gNew')
+    ).toBe(true);
+    expect(res.memberIds).toEqual(['a', 'b']);
+  });
+
+  test('grouping a group with a loose stroke NESTS (old id stays deeper)', () => {
+    const strokes: Stroke[] = [
+      rect('a', 0, { groupIds: ['g1'] }),
+      rect('b', 100, { groupIds: ['g1'] }),
+      pen('c'),
+    ];
+    const res = groupStrokes(strokes, ['c', 'a'], 'g2');
+    expect(res).not.toBeNull();
+    if (!res) return;
+    const a = res.strokes.find((s) => s.id === 'a');
+    expect(a?.groupIds).toEqual(['g1', 'g2']);
+    const c = res.strokes.find((s) => s.id === 'c');
+    expect(c?.groupIds).toEqual(['g2']);
+  });
+
+  test('fewer than two resolved members → null', () => {
+    expect(groupStrokes([rect('a')], ['a'])).toBeNull();
+    expect(groupStrokes([rect('a')], ['a', 'ghost'])).toBeNull();
+  });
+});
+
+describe('ungroupStrokes / normalizeGroups', () => {
+  test('ungroup strips ONE level (the outermost) and drops the key when empty', () => {
+    const strokes: Stroke[] = [
+      rect('a', 0, { groupIds: ['g1', 'g2'] }),
+      rect('b', 100, { groupIds: ['g1', 'g2'] }),
+    ];
+    const out = ungroupStrokes(strokes, ['a']);
+    expect(out.map((s) => s.groupIds)).toEqual([['g1'], ['g1']]);
+    const out2 = ungroupStrokes(out, ['b']);
+    for (const s of out2) expect('groupIds' in s).toBe(false);
+  });
+
+  test('normalizeGroups dissolves singleton groups after a delete', () => {
+    const strokes: Stroke[] = [rect('a', 0, { groupIds: ['g1'] }), pen('loose')];
+    const out = normalizeGroups(strokes);
+    expect('groupIds' in (out[0] as Stroke)).toBe(false);
+    // Referential no-op when nothing changes.
+    const stable: Stroke[] = [rect('x', 0, { groupIds: ['g'] }), rect('y', 1, { groupIds: ['g'] })];
+    expect(normalizeGroups(stable)).toBe(stable);
+  });
+});
+
+describe('duplicateStrokes', () => {
+  test('clones with fresh ids, remapped group ids, offset applied', () => {
+    let n = 0;
+    const makeId = () => `dup${++n}`;
+    const strokes: Stroke[] = [
+      rect('a', 0, { groupIds: ['g1'] }),
+      rect('b', 100, { groupIds: ['g1'] }),
+    ];
+    const res = duplicateStrokes(strokes, ['a'], 16, 16, makeId, () => 'gDup');
+    expect(res.strokes).toHaveLength(4);
+    expect(res.newIds).toEqual(['dup1', 'dup2']);
+    const dup1 = res.strokes.find((s) => s.id === 'dup1') as RectStroke;
+    expect(dup1.x).toBe(16);
+    expect(dup1.groupIds).toEqual(['gDup']);
+    // Originals untouched.
+    expect((res.strokes.find((s) => s.id === 'a') as RectStroke).x).toBe(0);
+  });
+
+  test('anchored text travels with its duplicated host and is NOT selectable', () => {
+    const host = rect('host');
+    const label: TextStroke = {
+      id: 'label',
+      tool: 'text',
+      color: '#1a1a1a',
+      fontSize: 14,
+      text: 'hi',
+      anchorId: 'host',
+    };
+    let n = 0;
+    const res = duplicateStrokes([host, label], ['host'], 10, 0, () => `d${++n}`);
+    expect(res.strokes).toHaveLength(4);
+    const dupLabel = res.strokes.find((s) => s.tool === 'text' && s.id !== 'label') as TextStroke;
+    expect(dupLabel.anchorId).toBe('d1'); // remapped to the cloned host
+    expect(res.newIds).toEqual(['d1']); // anchored-text clone excluded
+  });
+
+  test('arrow binds remap to co-duplicated hosts; binds to outside hosts are kept', () => {
+    const a = rect('a');
+    const b = rect('b', 300);
+    const ar = arrow('ar', {
+      startBind: { hostId: 'a', nx: 1, ny: 0.5 },
+      endBind: { hostId: 'b', nx: 0, ny: 0.5 },
+    });
+    let n = 0;
+    const res = duplicateStrokes([a, b, ar], ['a', 'ar'], 0, 0, () => `d${++n}`);
+    const dupArrow = res.strokes.find((s) => s.tool === 'arrow' && s.id !== 'ar') as ArrowStroke;
+    expect(dupArrow.startBind?.hostId).toBe('d1'); // co-duplicated → remapped
+    expect(dupArrow.endBind?.hostId).toBe('b'); // outside host → kept
+  });
+});
+
+describe('reorderStrokes (z-order, group-contiguous units)', () => {
+  const base = (): Stroke[] => [
+    rect('a'),
+    rect('g1a', 100, { groupIds: ['g1'] }),
+    rect('g1b', 200, { groupIds: ['g1'] }),
+    pen('top'),
+  ];
+
+  test('bring to front / send to back move the unit as one block', () => {
+    expect(reorderStrokes(base(), ['a'], 'front').map((s) => s.id)).toEqual([
+      'g1a',
+      'g1b',
+      'top',
+      'a',
+    ]);
+    expect(reorderStrokes(base(), ['top'], 'back').map((s) => s.id)).toEqual([
+      'top',
+      'a',
+      'g1a',
+      'g1b',
+    ]);
+  });
+
+  test('forward/backward hop over a WHOLE neighbouring group', () => {
+    expect(reorderStrokes(base(), ['a'], 'forward').map((s) => s.id)).toEqual([
+      'g1a',
+      'g1b',
+      'a',
+      'top',
+    ]);
+    expect(reorderStrokes(base(), ['top'], 'backward').map((s) => s.id)).toEqual([
+      'a',
+      'top',
+      'g1a',
+      'g1b',
+    ]);
+  });
+
+  test('selecting one group member moves the whole group', () => {
+    expect(reorderStrokes(base(), ['g1b'], 'front').map((s) => s.id)).toEqual([
+      'a',
+      'top',
+      'g1a',
+      'g1b',
+    ]);
+  });
+
+  test('already at the boundary is a no-op', () => {
+    expect(reorderStrokes(base(), ['top'], 'forward').map((s) => s.id)).toEqual([
+      'a',
+      'g1a',
+      'g1b',
+      'top',
+    ]);
+  });
+});

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-create-api.test.ts

@@ -122,6 +122,71 @@ describe('/_api/canvas — POST round-trip', () => {
     }
   });
 
+  test('create + delete emit canvas-list-update over the inspector WS (Phase 30)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    let socket: WebSocket | null = null;
+    try {
+      const messages: Array<{ type: string; payload?: { action?: string; slug?: string } }> = [];
+      const sock = new WebSocket(`ws://localhost:${port}/_ws`);
+      socket = sock;
+      await new Promise<void>((res, rej) => {
+        sock.addEventListener('open', () => res());
+        sock.addEventListener('error', () => rej(new Error('ws error')));
+        setTimeout(() => rej(new Error('ws open timeout')), 2000);
+      });
+      sock.addEventListener('message', (ev) => {
+        try {
+          messages.push(JSON.parse(String(ev.data)));
+        } catch {
+          /* ignore non-JSON */
+        }
+      });
+
+      const waitFor = async (pred: (m: (typeof messages)[number]) => boolean) => {
+        const deadline = Date.now() + 2000;
+        while (Date.now() < deadline) {
+          const hit = messages.find(pred);
+          if (hit) return hit;
+          await Bun.sleep(25);
+        }
+        return undefined;
+      };
+
+      const created = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Live Add', kind: 'brief-board' }),
+      });
+      expect(created.status).toBe(201);
+      const cj = (await created.json()) as { rel: string };
+
+      const added = await waitFor(
+        (m) => m.type === 'canvas-list-update' && m.payload?.action === 'added'
+      );
+      expect(added?.payload?.slug).toBe('ui-live_add');
+
+      const del = await fetch(
+        `http://localhost:${port}/_api/canvas?file=${encodeURIComponent(cj.rel)}`,
+        { method: 'DELETE' }
+      );
+      expect(del.status).toBe(200);
+
+      const removed = await waitFor(
+        (m) => m.type === 'canvas-list-update' && m.payload?.action === 'removed'
+      );
+      expect(removed?.payload?.slug).toBe('ui-live_add');
+    } finally {
+      try {
+        socket?.close();
+      } catch {
+        /* ignore */
+      }
+      await killProc(proc);
+    }
+  }, 10_000);
+
   test('defaults kind to brief-board when omitted', async () => {
     const { root } = makeSandbox();
     const port = nextPort();
@@ -284,6 +349,10 @@ describe('/_api/canvas — DELETE (soft-delete)', () => {
         join(designRoot, `${created.slug}.annotations.svg`),
         '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1"></svg>'
       );
+      // Seed the per-machine camera view file (DDR-115) to prove it's swept too.
+      mkdirSync(join(designRoot, '_canvas-state'), { recursive: true });
+      const viewAbs = join(designRoot, '_canvas-state', `${created.slug}.view.json`);
+      writeFileSync(viewAbs, JSON.stringify({ viewport: { x: 1, y: 2, zoom: 1 } }));
       const tsx = join(designRoot, 'ui', 'Trash Me.tsx');
       expect(existsSync(tsx)).toBe(true);
 
@@ -293,14 +362,17 @@ describe('/_api/canvas — DELETE (soft-delete)', () => {
       expect(j.ok).toBe(true);
       expect(j.trashed.some((t) => t.endsWith('Trash Me.tsx'))).toBe(true);
       expect(j.trashed.some((t) => t.endsWith('.annotations.svg'))).toBe(true);
+      expect(j.trashed.some((t) => t.endsWith('.view.json'))).toBe(true);
 
       // Gone from the group; present (recoverable) under _trash/ with a manifest.
       expect(existsSync(tsx)).toBe(false);
       expect(existsSync(join(designRoot, `${created.slug}.annotations.svg`))).toBe(false);
+      expect(existsSync(viewAbs)).toBe(false);
       const trashDirs = readdirSync(join(designRoot, '_trash'));
       expect(trashDirs.length).toBe(1);
       const td = join(designRoot, '_trash', trashDirs[0] as string);
       expect(existsSync(join(td, 'Trash Me.tsx'))).toBe(true);
+      expect(existsSync(join(td, `_canvas-state__${created.slug}.view.json`))).toBe(true);
       expect(existsSync(join(td, '_trash-manifest.json'))).toBe(true);
     } finally {
       await killProc(proc);