@heyramzi/ui 1.54.2 → 2.0.1

package/src/canvas/headless/sketch.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  isSketchAccent,
+  roughArrow,
+  roughHead,
+  roughLine,
+  roughCard,
+  roughEllipse,
+  seedFrom,
+  sketchColors,
+} from "./sketch.js";
+
+describe("sketch palette", () => {
+  it("falls back to ink for an unknown or missing accent", () => {
+    expect(sketchColors("chartreuse")).toEqual(sketchColors("ink"));
+    expect(sketchColors(undefined)).toEqual(sketchColors("ink"));
+  });
+
+  it("recognises only the accents it can paint", () => {
+    expect(isSketchAccent("red")).toBe(true);
+    expect(isSketchAccent("puce")).toBe(false);
+    expect(isSketchAccent(7)).toBe(false);
+  });
+});
+
+describe("seedFrom", () => {
+  it("is stable for the same id", () => {
+    expect(seedFrom("rung-install")).toBe(seedFrom("rung-install"));
+  });
+
+  it("separates ids that differ by one character", () => {
+    expect(seedFrom("card-1")).not.toBe(seedFrom("card-2"));
+  });
+
+  it("stays a non-negative 31-bit integer, including for an empty id", () => {
+    for (const id of ["", "a", "a very long node id ".repeat(20)]) {
+      const seed = seedFrom(id);
+      expect(Number.isInteger(seed)).toBe(true);
+      expect(seed).toBeGreaterThanOrEqual(0);
+      expect(seed).toBeLessThan(2147483647);
+    }
+  });
+});
+
+describe("rough geometry", () => {
+  const colors = sketchColors("red");
+
+  // The whole reason seeds exist: a card that redraws on every render visibly
+  // shimmers on a canvas that streams in from the CLI.
+  it("draws the identical card for the same seed", () => {
+    expect(roughCard(300, 120, { seed: 42, colors })).toEqual(
+      roughCard(300, 120, { seed: 42, colors }),
+    );
+  });
+
+  it("draws a different card for a different seed", () => {
+    expect(roughCard(300, 120, { seed: 42, colors })).not.toEqual(
+      roughCard(300, 120, { seed: 43, colors }),
+    );
+  });
+
+  it("fills a card and leaves an annotation hollow", () => {
+    const card = roughCard(300, 120, { seed: 1, colors });
+    const ellipse = roughEllipse(300, 120, { seed: 1, colors });
+    expect(card.some((p) => p.fill !== "none")).toBe(true);
+    expect(ellipse.every((p) => p.fill === "none")).toBe(true);
+  });
+
+  it("never emits an undefined fill, which renders as black", () => {
+    for (const path of [
+      ...roughCard(200, 80, { seed: 3, colors }),
+      ...roughEllipse(200, 80, { seed: 3, colors }),
+    ]) {
+      expect(typeof path.fill).toBe("string");
+      expect(path.d.length).toBeGreaterThan(0);
+    }
+  });
+
+  it("survives a card smaller than its own corner radius", () => {
+    expect(() => roughCard(4, 4, { seed: 1, colors })).not.toThrow();
+    expect(roughCard(4, 4, { seed: 1, colors }).length).toBeGreaterThan(0);
+  });
+
+  it("gives an arrow a shaft and two head strokes", () => {
+    const paths = roughArrow({ x: 0, y: 0 }, { x: 100, y: 40 }, { seed: 9, colors });
+    expect(paths.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("hands back the same drawing for the same geometry, and a new one when it moves", () => {
+    const pen = { seed: 21, colors };
+    const first = roughLine({ x: 0, y: 0 }, { x: 80, y: 30 }, pen);
+    expect(roughLine({ x: 0, y: 0 }, { x: 80, y: 30 }, pen)).toBe(first);
+    expect(roughLine({ x: 0, y: 0 }, { x: 80, y: 31 }, pen)).not.toBe(first);
+    expect(roughLine({ x: 0, y: 0 }, { x: 80, y: 30 }, pen, { formal: true })).not.toBe(first);
+    const head = roughHead({ x: 80, y: 30 }, 0.5, pen);
+    expect(roughHead({ x: 80, y: 30 }, 0.5, pen)).toBe(head);
+    expect(roughHead({ x: 80, y: 30 }, 0.6, pen)).not.toBe(head);
+  });
+});

package/src/canvas/headless/sketch.ts

@@ -0,0 +1,302 @@
+// Hand-drawn layer, server-safe: palette, geometry, seeding. The seed comes from
+// the node id, so server SVG and Svelte draw the same wobble.
+// Look and authoring: see the package README.
+
+import rough from "roughjs";
+import type { Options } from "roughjs/bin/core";
+import { createMemo } from "./edge-memo.js";
+
+// =========================
+// PALETTE
+// =========================
+
+/** Accent names a board author writes. Excalidraw's own stroke colors. */
+export const SKETCH_ACCENTS = [
+  "ink",
+  "red",
+  "green",
+  "blue",
+  "violet",
+  "amber",
+  "teal",
+  "indigo",
+  "terra",
+] as const;
+
+export type SketchAccent = (typeof SKETCH_ACCENTS)[number];
+
+export type SketchColors = {
+  /** The rough stroke around a card, and the rule under a title. */
+  stroke: string;
+  /** The card's wash. Light enough that body text stays black on it. */
+  fill: string;
+  /** Section headings and card titles. */
+  heading: string;
+  /** Body lines inside a card. Never pure black: it reads as printed, not drawn. */
+  body: string;
+};
+
+/** Excalidraw's strokes plus its lightest tint per hue; brand colors would read as app, not whiteboard. */
+const PALETTE: Record<SketchAccent, SketchColors> = {
+  ink: { stroke: "#1e1e1e", fill: "#ffffff", heading: "#1e1e1e", body: "#343a40" },
+  red: { stroke: "#c92a2a", fill: "#fff5f5", heading: "#a61e4d", body: "#3b3b46" },
+  green: { stroke: "#2f9e44", fill: "#f4fce3", heading: "#2b8a3e", body: "#3b3b46" },
+  blue: { stroke: "#1971c2", fill: "#e7f5ff", heading: "#1864ab", body: "#3b3b46" },
+  violet: { stroke: "#6741d9", fill: "#f3f0ff", heading: "#5f3dc4", body: "#3b3b46" },
+  amber: { stroke: "#e8a33d", fill: "#fff9db", heading: "#b8860b", body: "#3b3b46" },
+  teal: { stroke: "#0c8599", fill: "#e3fafc", heading: "#0b7285", body: "#3b3b46" },
+  // The brand pair the email figures are drawn in: tools/whiteboard/src/scene.ts INK and HIGHLIGHT.
+  indigo: { stroke: "#414fd2", fill: "#ffffff", heading: "#414fd2", body: "#414fd2" },
+  terra: { stroke: "#f0503d", fill: "#ffffff", heading: "#f0503d", body: "#f0503d" },
+};
+
+/** The same hues lifted for the Ink board: light strokes, a dark wash, and text that stays readable on it. */
+const DARK_PALETTE: Record<SketchAccent, SketchColors> = {
+  ink: { stroke: "#e9ecef", fill: "#151b30", heading: "#f1f3f5", body: "#ced4da" },
+  red: { stroke: "#ff8787", fill: "#2a1822", heading: "#ffa8c5", body: "#ced4da" },
+  green: { stroke: "#69db7c", fill: "#132a20", heading: "#8ce99a", body: "#ced4da" },
+  blue: { stroke: "#74c0fc", fill: "#12253d", heading: "#a5d8ff", body: "#ced4da" },
+  violet: { stroke: "#b197fc", fill: "#211c3d", heading: "#d0bfff", body: "#ced4da" },
+  amber: { stroke: "#ffd43b", fill: "#2b2612", heading: "#ffe066", body: "#ced4da" },
+  teal: { stroke: "#66d9e8", fill: "#112a30", heading: "#99e9f2", body: "#ced4da" },
+  indigo: { stroke: "#8b96ff", fill: "#151b30", heading: "#a5adff", body: "#a5adff" },
+  terra: { stroke: "#ff8a78", fill: "#151b30", heading: "#ff9d8d", body: "#ff9d8d" },
+};
+
+/** Server renders (exports, emails) stay on the light palette; the editor passes its theme. */
+export function sketchColors(
+  accent: SketchAccent | string | undefined,
+  dark = false,
+): SketchColors {
+  const palette = dark ? DARK_PALETTE : PALETTE;
+  return palette[(accent ?? "ink") as SketchAccent] ?? palette.ink;
+}
+
+export function isSketchAccent(value: unknown): value is SketchAccent {
+  return typeof value === "string" && (SKETCH_ACCENTS as readonly string[]).includes(value);
+}
+
+// =========================
+// SEEDING
+// =========================
+
+/** A stable 31-bit seed (FNV-1a): unseeded calls reshuffle the wobble, so cards would redraw each render. */
+export function seedFrom(id: string): number {
+  let hash = 2166136261;
+  for (let i = 0; i < id.length; i += 1) {
+    hash ^= id.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return Math.abs(hash) % 2147483647;
+}
+
+// =========================
+// GEOMETRY
+// =========================
+
+export type SketchPath = { d: string; stroke: string; fill: string; strokeWidth: number };
+
+const generator = rough.generator();
+
+/** Arrows are redrawn whenever the page repaints them, so a line or head already drawn is handed back. */
+const MEMO_LIMIT = 4000;
+const lines = createMemo<SketchPath[]>(MEMO_LIMIT);
+const heads = createMemo<SketchPath[]>(MEMO_LIMIT);
+
+/** Shared feel. Low roughness reads as a careful hand; high reads as a scribble. */
+function baseOptions(seed: number, colors: SketchColors, overrides?: Options): Options {
+  return {
+    seed,
+    roughness: 1.1,
+    bowing: 1.4,
+    stroke: colors.stroke,
+    strokeWidth: 1.6,
+    // WHY solid, not hachure: a hatched fill behind three lines of body copy
+    // makes the text unreadable at the zoom a card is actually read at.
+    fillStyle: "solid",
+    ...overrides,
+  };
+}
+
+/** Every node has two skins: drawn (the default here) or formal, the same outline with the hand taken out. */
+export type SketchStyle = { formal?: boolean };
+const FORMAL: Options = { roughness: 0, bowing: 0, disableMultiStroke: true, strokeWidth: 1.4 };
+
+function toPaths(drawable: ReturnType<typeof generator.rectangle>): SketchPath[] {
+  return generator.toPaths(drawable).map((p) => ({
+    d: p.d,
+    stroke: p.stroke,
+    // rough leaves `fill` off a path it did not fill, and an unfilled path is
+    // the same thing as one filled with nothing.
+    fill: p.fill ?? "none",
+    strokeWidth: p.strokeWidth,
+  }));
+}
+
+/** The seed and colors every rough shape draws with. */
+export type SketchPen = { seed: number; colors: SketchColors };
+
+/** A card outline: rough.js has no rounded rectangle, so a rounded path instead (square reads as a box). */
+export function roughCard(
+  width: number,
+  height: number,
+  { seed, colors }: SketchPen,
+  { radius = 14, formal = false }: SketchStyle & { radius?: number } = {},
+): SketchPath[] {
+  const w = Math.max(width, radius * 2 + 2);
+  const h = Math.max(height, radius * 2 + 2);
+  const r = Math.min(radius, w / 2 - 1, h / 2 - 1);
+  const d = [
+    `M ${r} 0`,
+    `L ${w - r} 0`,
+    `Q ${w} 0 ${w} ${r}`,
+    `L ${w} ${h - r}`,
+    `Q ${w} ${h} ${w - r} ${h}`,
+    `L ${r} ${h}`,
+    `Q 0 ${h} 0 ${h - r}`,
+    `L 0 ${r}`,
+    `Q 0 0 ${r} 0`,
+    "Z",
+  ].join(" ");
+  return toPaths(
+    generator.path(d, baseOptions(seed, colors, { fill: colors.fill, ...(formal ? FORMAL : {}) })),
+  );
+}
+
+/** An ellipse card is drawn round its text, not through it: this much wider and taller than the box. */
+export const ELLIPSE_CARD_SCALE = { x: 1.32, y: 1.42 };
+
+/** The circle-this-bit annotation, drawn as one loose pass. */
+export function roughEllipse(
+  width: number,
+  height: number,
+  { seed, colors }: SketchPen,
+  { formal = false }: SketchStyle = {},
+): SketchPath[] {
+  return toPaths(
+    generator.ellipse(
+      width / 2,
+      height / 2,
+      width,
+      height,
+      baseOptions(seed, colors, {
+        roughness: 1.6,
+        strokeWidth: 2.2,
+        fill: undefined,
+        ...(formal ? FORMAL : {}),
+      }),
+    ),
+  );
+}
+
+/** A box with no rounding: the frame you draw around a whole column. */
+export function roughRect(
+  width: number,
+  height: number,
+  { seed, colors }: SketchPen,
+  { filled = false, formal = false }: SketchStyle & { filled?: boolean } = {},
+): SketchPath[] {
+  return toPaths(
+    generator.rectangle(
+      1,
+      1,
+      Math.max(width - 2, 2),
+      Math.max(height - 2, 2),
+      baseOptions(seed, colors, {
+        fill: filled ? colors.fill : undefined,
+        ...(formal ? FORMAL : {}),
+      }),
+    ),
+  );
+}
+
+/** A closed outline through the given points: the diamond mark, drawn like the box beside it. */
+export function roughPolygon(
+  points: readonly [number, number][],
+  { seed, colors }: SketchPen,
+  { formal = false }: SketchStyle = {},
+): SketchPath[] {
+  return toPaths(
+    generator.polygon(
+      points.map(([x, y]) => [x, y] as [number, number]),
+      baseOptions(seed, colors, { fill: undefined, ...(formal ? FORMAL : {}) }),
+    ),
+  );
+}
+
+/** The hand-drawn rule under a title, `y` down from the top. */
+export function roughUnderline(
+  width: number,
+  { seed, colors }: SketchPen,
+  { y = 4, formal = false }: SketchStyle & { y?: number } = {},
+): SketchPath[] {
+  return toPaths(
+    generator.line(
+      0,
+      y,
+      width,
+      y,
+      baseOptions(seed, colors, { strokeWidth: 2, bowing: 2.4, ...(formal ? FORMAL : {}) }),
+    ),
+  );
+}
+
+/** The shaft of a hand-ruled connector, with no head. */
+export function roughLine(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+  { seed, colors }: SketchPen,
+  { formal = false }: SketchStyle = {},
+): SketchPath[] {
+  const hand = formal ? FORMAL : {};
+  // The same line is asked for on every redraw of its arrow, and rough.js is the slow part.
+  return lines(`${seed}|${colors.stroke}|${formal}|${from.x},${from.y}|${to.x},${to.y}`, () =>
+    toPaths(
+      generator.line(
+        from.x,
+        from.y,
+        to.x,
+        to.y,
+        baseOptions(seed, colors, { strokeWidth: 1.8, ...hand }),
+      ),
+    ),
+  );
+}
+
+/** Two hand-drawn wings with their tip at `tip`, pointing along `angle` (radians). */
+export function roughHead(
+  tip: { x: number; y: number },
+  angle: number,
+  { seed, colors }: SketchPen,
+  { formal = false }: SketchStyle = {},
+): SketchPath[] {
+  const hand = formal ? FORMAL : {};
+  const head = 11;
+  const spread = 0.42;
+  return heads(`${seed}|${colors.stroke}|${formal}|${tip.x},${tip.y}|${angle}`, () =>
+    [angle + Math.PI - spread, angle + Math.PI + spread].flatMap((a, i) =>
+      toPaths(
+        generator.line(
+          tip.x,
+          tip.y,
+          tip.x + Math.cos(a) * head,
+          tip.y + Math.sin(a) * head,
+          baseOptions(seed + i + 1, colors, { strokeWidth: 1.8, roughness: 0.8, ...hand }),
+        ),
+      ),
+    ),
+  );
+}
+
+/** A straight-ish connector between two canvas points, plus its arrow head. */
+export function roughArrow(
+  from: { x: number; y: number },
+  to: { x: number; y: number },
+  pen: SketchPen,
+  style: SketchStyle = {},
+): SketchPath[] {
+  return [
+    ...roughLine(from, to, pen, style),
+    ...roughHead(to, Math.atan2(to.y - from.y, to.x - from.x), pen, style),
+  ];
+}

package/src/canvas/headless/snap-guides.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vite-plus/test";
+import { computeSnap, SNAP_THRESHOLD, type SnapRect } from "./snap-guides.js";
+
+const CARD: SnapRect = { x: 0, y: 0, width: 100, height: 40 };
+
+describe("computeSnap", () => {
+  it("leaves a lone card where it is", () => {
+    const result = computeSnap({ ...CARD, x: 33, y: 71 }, []);
+    expect(result).toEqual({ x: 33, y: 71, guides: [] });
+  });
+
+  it("pulls a left edge onto another card's left edge", () => {
+    const other: SnapRect = { x: 200, y: 300, width: 100, height: 40 };
+    const result = computeSnap({ ...CARD, x: 204, y: 0 }, [other]);
+    expect(result.x).toBe(200);
+    expect(result.guides.some((g) => g.axis === "x" && g.position === 200)).toBe(true);
+  });
+
+  it("pulls a centre onto another card's centre", () => {
+    const other: SnapRect = { x: 200, y: 300, width: 100, height: 40 };
+    // Centre at 253 wants 250: the dragged card's own centre is x + 50.
+    const result = computeSnap({ ...CARD, x: 203, y: 0 }, [other]);
+    expect(result.x + 50).toBe(250);
+  });
+
+  it("snaps both axes independently", () => {
+    const other: SnapRect = { x: 200, y: 300, width: 100, height: 40 };
+    const result = computeSnap({ ...CARD, x: 202, y: 298 }, [other]);
+    expect(result).toMatchObject({ x: 200, y: 300 });
+    expect(result.guides).toHaveLength(2);
+  });
+
+  it("ignores a candidate further away than the threshold", () => {
+    const other: SnapRect = { x: 200, y: 300, width: 100, height: 40 };
+    const away = SNAP_THRESHOLD + 1;
+    const result = computeSnap({ ...CARD, x: 200 + away, y: 0 }, [other]);
+    expect(result.x).toBe(200 + away);
+    expect(result.guides.filter((g) => g.axis === "x")).toHaveLength(0);
+  });
+
+  it("takes the nearest line when several are in range", () => {
+    const near: SnapRect = { x: 202, y: 300, width: 100, height: 40 };
+    const far: SnapRect = { x: 205, y: 300, width: 100, height: 40 };
+    const result = computeSnap({ ...CARD, x: 203, y: 0 }, [near, far]);
+    expect(result.x).toBe(202);
+  });
+
+  it("spans the guide over every card on the same line", () => {
+    const top: SnapRect = { x: 200, y: 0, width: 100, height: 40 };
+    const bottom: SnapRect = { x: 200, y: 500, width: 100, height: 40 };
+    const result = computeSnap({ ...CARD, x: 202, y: 200 }, [top, bottom]);
+    const guide = result.guides.find((g) => g.axis === "x");
+    expect(guide).toMatchObject({ start: 0, end: 540 });
+  });
+
+  it("honours a caller's threshold, so the pull is constant on screen at any zoom", () => {
+    const other: SnapRect = { x: 200, y: 0, width: 100, height: 40 };
+    const zoomedOut = computeSnap({ ...CARD, x: 220, y: 0 }, [other], 6 / 0.25);
+    expect(zoomedOut.x).toBe(200);
+  });
+});

package/src/canvas/headless/snap-guides.ts

@@ -0,0 +1,146 @@
+// Figma-style alignment magnetism: snap a dragged rect onto the nearest edge or
+// centre of another card, and report the lines. Drawn by snap-guides.svelte.
+
+export type SnapRect = { x: number; y: number; width: number; height: number };
+
+/** A line to draw, in flow coordinates. `axis: "x"` is a vertical line. */
+export type SnapGuide = {
+  axis: "x" | "y";
+  /** The coordinate the line sits on: x for a vertical line, y for a horizontal one. */
+  position: number;
+  /** The extent the line is drawn over, so it visibly joins the cards it aligns. */
+  start: number;
+  end: number;
+};
+
+export type SnapResult = {
+  x: number;
+  y: number;
+  guides: SnapGuide[];
+};
+
+/** Default pull, in flow units. Callers divide by zoom to hold it on screen. */
+export const SNAP_THRESHOLD = 6;
+
+type Axis = "x" | "y";
+
+const SIZE_KEY: Record<Axis, "width" | "height"> = { x: "width", y: "height" };
+const CROSS: Record<Axis, Axis> = { x: "y", y: "x" };
+
+/** The three lines a rect offers on one axis: its two edges and its centre. */
+function linesOf(rect: SnapRect, axis: Axis): [number, number, number] {
+  const start = rect[axis];
+  const size = rect[SIZE_KEY[axis]];
+  return [start, start + size / 2, start + size];
+}
+
+function snapAxis(
+  dragged: SnapRect,
+  others: SnapRect[],
+  axis: Axis,
+  threshold: number,
+): { delta: number; position: number | null } {
+  const mine = linesOf(dragged, axis);
+  // Flat rather than nested: every pairing of one of our lines with one of
+  // theirs, then the nearest pairing inside the threshold.
+  const pairings = others.flatMap((other) =>
+    linesOf(other, axis).flatMap((theirs) =>
+      mine.map((own) => ({ delta: theirs - own, position: theirs })),
+    ),
+  );
+  const inRange = pairings.filter((pair) => Math.abs(pair.delta) <= threshold);
+  if (inRange.length === 0) return { delta: 0, position: null };
+  return inRange.reduce((a, b) => (Math.abs(b.delta) < Math.abs(a.delta) ? b : a));
+}
+
+/** Every other rect that sits on `position`, so the guide spans all of them. */
+function guideFor(snapped: SnapRect, others: SnapRect[], axis: Axis, position: number): SnapGuide {
+  const cross = CROSS[axis];
+  const size = SIZE_KEY[cross];
+  const onLine = others.filter((other) =>
+    linesOf(other, axis).some((line) => Math.abs(line - position) < 0.5),
+  );
+  return {
+    axis,
+    position,
+    start: Math.min(snapped[cross], ...onLine.map((o) => o[cross])),
+    end: Math.max(snapped[cross] + snapped[size], ...onLine.map((o) => o[cross] + o[size])),
+  };
+}
+
+/** Pull `dragged` onto the nearest line of `others`, one axis at a time. */
+export function computeSnap(
+  dragged: SnapRect,
+  others: SnapRect[],
+  threshold: number = SNAP_THRESHOLD,
+): SnapResult {
+  if (others.length === 0) return { x: dragged.x, y: dragged.y, guides: [] };
+
+  const horizontal = snapAxis(dragged, others, "x", threshold);
+  const vertical = snapAxis(dragged, others, "y", threshold);
+
+  const snapped: SnapRect = {
+    ...dragged,
+    x: dragged.x + horizontal.delta,
+    y: dragged.y + vertical.delta,
+  };
+
+  const guides: SnapGuide[] = [];
+  if (horizontal.position !== null) {
+    guides.push(guideFor(snapped, others, "x", horizontal.position));
+  }
+  if (vertical.position !== null) {
+    guides.push(guideFor(snapped, others, "y", vertical.position));
+  }
+
+  return { x: snapped.x, y: snapped.y, guides };
+}
+
+/**
+ * The editor's seam. Pull a held free node onto the others and report the
+ * lines. A node in a container is not a candidate.
+ */
+// The correction goes back into the returned nodes, which is what makes it
+// magnetism and not a hint. xyflow recomputes from the drag origin, so it
+// never stacks.
+export function snapDraggedNode<
+  T extends {
+    id: string;
+    position: { x: number; y: number };
+    parentId?: string;
+    hidden?: boolean;
+    measured?: { width?: number; height?: number };
+  },
+>(nodes: T[], held: T | null, zoom: number): { nodes: T[]; guides: SnapGuide[] } {
+  const rect = freeNodeRect(held);
+  if (!held || !rect) return { nodes, guides: [] };
+
+  const others = nodes
+    .filter((n) => n.id !== held.id)
+    .map(freeNodeRect)
+    .filter((r): r is SnapRect => r !== null);
+
+  // The threshold is in flow units, so the pull is the same few pixels on
+  // screen whether the board is zoomed to a wall or to one card.
+  const snap = computeSnap(rect, others, SNAP_THRESHOLD / (zoom || 1));
+  const moved = snap.x !== held.position.x || snap.y !== held.position.y;
+  const next = moved
+    ? nodes.map((n) => (n.id === held.id ? { ...n, position: { x: snap.x, y: snap.y } } : n))
+    : nodes;
+  return { nodes: next, guides: snap.guides };
+}
+
+/** A candidate rect, or null for a node a container positions or hides. */
+function freeNodeRect(
+  node: {
+    position: { x: number; y: number };
+    parentId?: string;
+    hidden?: boolean;
+    measured?: { width?: number; height?: number };
+  } | null,
+): SnapRect | null {
+  if (!node || node.parentId || node.hidden) return null;
+  const { width, height } = node.measured ?? {};
+  if (!width || !height) return null;
+  return { x: node.position.x, y: node.position.y, width, height };
+}

package/src/canvas/headless/svg-figure.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vite-plus/test";
+import { figureBoxHeight, figureRatio, sanitizeFigureSvg } from "./svg-figure.js";
+
+describe("sanitizeFigureSvg", () => {
+  it("keeps the shapes, the text and the geometry", () => {
+    const svg = sanitizeFigureSvg(
+      '<svg viewBox="0 0 100 40"><rect x="0" y="0" width="60" height="40" fill="#e7f5ff" /><text x="4" y="20" font-size="12">Used</text></svg>',
+    );
+    expect(svg).toContain('<rect x="0" y="0" width="60" height="40" fill="#e7f5ff" />');
+    expect(svg).toContain(">Used</text>");
+  });
+
+  it("drops a script with everything inside it", () => {
+    const svg = sanitizeFigureSvg('<svg viewBox="0 0 10 10"><script>alert(1)</script></svg>');
+    expect(svg).toBe('<svg viewBox="0 0 10 10"></svg>');
+  });
+
+  it("drops an event handler and keeps the shape it rode in on", () => {
+    const svg = sanitizeFigureSvg('<svg><circle cx="5" cy="5" r="4" onclick="steal()" /></svg>');
+    expect(svg).not.toContain("onclick");
+    expect(svg).toContain('<circle cx="5" cy="5" r="4" />');
+  });
+
+  it("drops a link out of the document but keeps a local reference", () => {
+    const svg = sanitizeFigureSvg(
+      '<svg><a href="https://evil.test"><rect fill="url(#g)" clip-path="url(https://evil.test)" /></a></svg>',
+    );
+    expect(svg).not.toContain("evil.test");
+    expect(svg).toContain('fill="url(#g)"');
+  });
+
+  it("refuses markup with no svg in it, and anything oversized", () => {
+    expect(sanitizeFigureSvg("<div>hello</div>")).toBeNull();
+    expect(sanitizeFigureSvg(`<svg>${"x".repeat(20000)}</svg>`)).toBeNull();
+  });
+});
+
+describe("figureRatio", () => {
+  it("reads the viewBox first and the width/height pair after it", () => {
+    expect(figureRatio('<svg viewBox="0 0 200 50">')).toBe(0.25);
+    expect(figureRatio('<svg width="100" height="50">')).toBe(0.5);
+    expect(figureRatio("<svg>")).toBeNull();
+  });
+
+  it("falls back to a banner when the author drew no box", () => {
+    expect(figureBoxHeight('<svg viewBox="0 0 400 100" />', 800)).toBe(200);
+    expect(figureBoxHeight("<svg />", 800)).toBe(320);
+  });
+});