@1agh/maude 0.28.1 → 0.30.0

package/apps/studio/test/annotate-write.test.ts

@@ -0,0 +1,184 @@
+// annotate-write — FigJam v3 AI write verb (`maude design annotate`).
+// Drives bin/annotate.mjs as a subprocess against a temp design root and
+// asserts the output through the CANONICAL parser: everything the verb writes
+// must be sanitize-stable, byte-identical under parse → re-serialize, and
+// readable back as a graph by read-annotations --graph.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+import {
+  type ArrowStroke,
+  type StickyStroke,
+  type Stroke,
+  sanitizeAnnotationSvg,
+  strokesToSvg,
+  svgToStrokes,
+} from '../annotations-model.ts';
+
+const BIN = new URL('../bin/annotate.mjs', import.meta.url).pathname;
+const READER = new URL('../bin/read-annotations.mjs', import.meta.url).pathname;
+
+let root: string;
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+  root = mkdtempSync(join(tmpdir(), 'annotate-test-'));
+  // A design root with no config — resolveDesignRoot defaults to .design.
+  writeFileSync(
+    join(root, 'flow.json'),
+    JSON.stringify({
+      nodes: [
+        { id: 'a', label: 'Start' },
+        { id: 'b', label: 'Middle' },
+        { id: 'c', label: 'End', shape: 'ellipse' },
+      ],
+      edges: [
+        { from: 'a', to: 'b' },
+        { from: 'b', to: 'c', label: 'ships' },
+      ],
+    })
+  );
+  Bun.spawnSync(['mkdir', '-p', join(root, '.design')]);
+});
+
+afterAll(async () => {
+  await GlobalRegistrator.unregister();
+  rmSync(root, { recursive: true, force: true });
+});
+
+function runAnnotate(args: string[], stdin?: string): { code: number; out: string; err: string } {
+  const proc = Bun.spawnSync(['bun', BIN, ...args], {
+    stdin: stdin ? new TextEncoder().encode(stdin) : undefined,
+  });
+  return {
+    code: proc.exitCode,
+    out: new TextDecoder().decode(proc.stdout),
+    err: new TextDecoder().decode(proc.stderr),
+  };
+}
+
+function readSvg(): string {
+  return readFileSync(join(root, '.design', 'ui-flow.annotations.svg'), 'utf8');
+}
+
+describe('annotate --flow', () => {
+  test('writes an auto-laid-out diagram of bound connectors', () => {
+    const res = runAnnotate(['ui/Flow.tsx', '--flow', join(root, 'flow.json'), '--root', root]);
+    expect(res.code).toBe(0);
+    const result = JSON.parse(res.out) as { ok: boolean; refs: Record<string, string> };
+    expect(result.ok).toBe(true);
+    expect(Object.keys(result.refs)).toEqual(['@a', '@b', '@c']);
+
+    const svg = readSvg();
+    // Canonical-parser compatible, sanitize-stable, byte-identical round-trip.
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+    const strokes = svgToStrokes(svg);
+    expect(strokesToSvg(strokes)).toBe(svg);
+    // 3 shapes + 3 labels (2 anchored + 1 ellipse-anchored) + 2 arrows + 1 edge label.
+    const arrows = strokes.filter((s): s is ArrowStroke => s.tool === 'arrow');
+    expect(arrows).toHaveLength(2);
+    for (const a of arrows) {
+      expect(a.startBind?.hostId).toBeDefined();
+      expect(a.endBind?.hostId).toBeDefined();
+      expect(a.author).toBe('ai');
+    }
+    // Layered layout: 'b' sits one column right of 'a'.
+    const aShape = strokes.find((s) => s.id === result.refs['@a']) as Stroke & { x: number };
+    const bShape = strokes.find((s) => s.id === result.refs['@b']) as Stroke & { x: number };
+    expect(bShape.x).toBeGreaterThan(aShape.x);
+  });
+
+  test('read-annotations --graph reads the diagram back as the same graph', () => {
+    const proc = Bun.spawnSync(['node', READER, 'ui/Flow.tsx', '--root', root, '--graph']);
+    const parsed = JSON.parse(new TextDecoder().decode(proc.stdout)) as {
+      graph: { nodes: Array<{ label: string | null }>; edges: unknown[] };
+    };
+    expect(parsed.graph.edges).toHaveLength(2);
+    expect(parsed.graph.nodes.map((n) => n.label).sort()).toEqual(['End', 'Middle', 'Start']);
+  });
+});
+
+describe('annotate --ops', () => {
+  test('create sticky + group + connect-to-existing + delete, via stdin', () => {
+    // Connect to a node minted by the previous --flow run.
+    const flowSvg = readSvg();
+    const existingId = (svgToStrokes(flowSvg).find((s) => s.tool === 'rect') as Stroke).id;
+    const ops = {
+      ops: [
+        { op: 'create', type: 'sticky', ref: '@n1', text: 'pain point', x: 100, y: 600 },
+        { op: 'create', type: 'sticky', ref: '@n2', text: 'idea', x: 340, y: 600 },
+        { op: 'group', ids: ['@n1', '@n2'] },
+        { op: 'connect', from: '@n1', to: existingId },
+      ],
+    };
+    const res = runAnnotate(['ui/Flow.tsx', '--root', root], JSON.stringify(ops));
+    expect(res.code).toBe(0);
+    const svg = readSvg();
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+    const strokes = svgToStrokes(svg);
+    expect(strokesToSvg(svg && strokes ? strokes : [])).toBe(svg);
+    const stickies = strokes.filter((s): s is StickyStroke => s.tool === 'sticky');
+    expect(stickies).toHaveLength(2);
+    expect(stickies[0]?.groupIds).toEqual(stickies[1]?.groupIds);
+    expect(stickies[0]?.groupIds?.length).toBe(1);
+    const bound = strokes.filter(
+      (s): s is ArrowStroke => s.tool === 'arrow' && s.endBind?.hostId === existingId
+    );
+    expect(bound).toHaveLength(1);
+
+    // Delete one sticky — the element disappears and the file stays canonical.
+    const del = runAnnotate(
+      ['ui/Flow.tsx', '--root', root],
+      JSON.stringify({ ops: [{ op: 'delete', id: stickies[1]?.id }] })
+    );
+    expect(del.code).toBe(0);
+    const after = svgToStrokes(readSvg());
+    expect(after.filter((s) => s.tool === 'sticky')).toHaveLength(1);
+    expect(strokesToSvg(after)).toBe(readSvg());
+  });
+
+  test('unknown connect target fails loud, writes nothing', () => {
+    const before = readSvg();
+    const res = runAnnotate(
+      ['ui/Flow.tsx', '--root', root],
+      JSON.stringify({ ops: [{ op: 'connect', from: '@ghost', to: 'nope' }] })
+    );
+    expect(res.code).toBe(2);
+    expect(readSvg()).toBe(before);
+  });
+
+  test('--dry-run prints the merged SVG without writing', () => {
+    const before = readSvg();
+    const res = runAnnotate(
+      ['ui/Flow.tsx', '--root', root, '--dry-run'],
+      JSON.stringify({ ops: [{ op: 'create', type: 'text', text: 'ghost', x: 0, y: 0 }] })
+    );
+    expect(res.code).toBe(0);
+    expect(res.out).toContain('ghost');
+    expect(readSvg()).toBe(before);
+  });
+
+  test('non-loopback _server.json.url is refused — writes to file, never PUTs off-box (F2)', () => {
+    // A poisoned/foreign _server.json points the egress at an external host.
+    // The verb must NOT PUT there (SSRF/exfil); it falls back to the file write.
+    const serverJson = join(root, '.design', '_server.json');
+    writeFileSync(serverJson, JSON.stringify({ url: 'http://attacker.example.com:4399' }));
+    try {
+      const res = runAnnotate(
+        ['ui/F2.tsx', '--root', root],
+        JSON.stringify({ ops: [{ op: 'create', type: 'text', text: 'secret', x: 0, y: 0 }] })
+      );
+      expect(res.code).toBe(0);
+      // via:"file" proves the off-box PUT was skipped (a successful PUT → "server").
+      expect(JSON.parse(res.out).via).toBe('file');
+      const svg = readFileSync(join(root, '.design', 'ui-f2.annotations.svg'), 'utf8');
+      expect(svg).toContain('secret');
+    } finally {
+      rmSync(serverJson, { force: true });
+    }
+  });
+});

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

@@ -0,0 +1,88 @@
+// annotations-align — FigJam v3 align + distribute (pure bbox math, DOM-free).
+
+import { describe, expect, test } from 'bun:test';
+
+import { alignStrokes, distributeStrokes } from '../annotations-align.ts';
+import type { RectStroke, Stroke } from '../annotations-model.ts';
+
+function rect(
+  id: string,
+  x: number,
+  y: number,
+  w = 50,
+  h = 50,
+  extra: Partial<RectStroke> = {}
+): RectStroke {
+  return { id, tool: 'rect', color: '#1f1f1f', width: 3, x, y, w, h, ...extra };
+}
+
+const byId = (strokes: readonly Stroke[], id: string): RectStroke =>
+  strokes.find((s) => s.id === id) as RectStroke;
+
+describe('alignStrokes', () => {
+  test('align left snaps every unit to the selection bbox left edge', () => {
+    const strokes = [rect('a', 0, 0), rect('b', 100, 80), rect('c', 40, 200)];
+    const out = alignStrokes(strokes, ['a', 'b', 'c'], 'left');
+    expect(byId(out, 'a').x).toBe(0);
+    expect(byId(out, 'b').x).toBe(0);
+    expect(byId(out, 'c').x).toBe(0);
+    // y untouched by a horizontal align
+    expect(byId(out, 'b').y).toBe(80);
+  });
+
+  test('align h-center / right / bottom', () => {
+    const strokes = [rect('a', 0, 0, 100, 100), rect('b', 200, 50, 20, 20)];
+    const centered = alignStrokes(strokes, ['a', 'b'], 'h-center');
+    // Selection spans x:0..220 → center 110; b (w20) → x=100.
+    expect(byId(centered, 'b').x).toBe(100);
+    const right = alignStrokes(strokes, ['a', 'b'], 'right');
+    expect(byId(right, 'a').x).toBe(120);
+    const bottom = alignStrokes(strokes, ['a', 'b'], 'bottom');
+    expect(byId(bottom, 'b').y).toBe(80);
+  });
+
+  test('a group aligns as ONE unit — members keep their relative offsets', () => {
+    const strokes = [
+      rect('g1', 100, 0, 50, 50, { groupIds: ['g'] }),
+      rect('g2', 160, 30, 50, 50, { groupIds: ['g'] }),
+      rect('solo', 0, 200),
+    ];
+    const out = alignStrokes(strokes, ['g1', 'solo'], 'left');
+    // Group bbox spans x:100..210; aligning left moves the group by -100.
+    expect(byId(out, 'g1').x).toBe(0);
+    expect(byId(out, 'g2').x).toBe(60);
+    expect(byId(out, 'solo').x).toBe(0);
+  });
+
+  test('fewer than two units → referential no-op', () => {
+    const strokes = [
+      rect('a', 0, 0),
+      rect('b', 10, 10, 50, 50, { groupIds: ['g'] }),
+      rect('c', 70, 10, 50, 50, { groupIds: ['g'] }),
+    ];
+    expect(alignStrokes(strokes, ['b'], 'left')).toBe(strokes);
+  });
+});
+
+describe('distributeStrokes', () => {
+  test('equalizes gaps, pinning the first and last unit', () => {
+    // a: 0..50, b: 60..110, c: 200..250 → span 250, total 150, gap = 50.
+    const strokes = [rect('a', 0, 0), rect('b', 60, 0), rect('c', 200, 0)];
+    const out = distributeStrokes(strokes, ['a', 'b', 'c'], 'h');
+    expect(byId(out, 'a').x).toBe(0);
+    expect(byId(out, 'b').x).toBe(100);
+    expect(byId(out, 'c').x).toBe(200);
+  });
+
+  test('vertical distribute', () => {
+    // a: 0..50, b: 55..105, c: 300..350 → span 350, total 150, gap = 100.
+    const strokes = [rect('a', 0, 0), rect('b', 0, 55), rect('c', 0, 300)];
+    const out = distributeStrokes(strokes, ['a', 'b', 'c'], 'v');
+    expect(byId(out, 'b').y).toBe(150);
+  });
+
+  test('fewer than three units → referential no-op', () => {
+    const strokes = [rect('a', 0, 0), rect('b', 100, 0)];
+    expect(distributeStrokes(strokes, ['a', 'b'], 'h')).toBe(strokes);
+  });
+});

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