@1agh/maude 0.25.0 → 0.27.0

package/plugins/design/dev-server/draw/test/composition.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  armature,
+  assignSlots,
+  balanceMoment,
+  dominanceRatio,
+  snapToFocal,
+} from '../composition.ts';
+import { apcaLc, bestHarmony, harmonize, harmonyDistance, valueRange } from '../palette.ts';
+
+const BOX = { x: 0, y: 0, width: 90, height: 60 };
+
+describe('armatures', () => {
+  test('thirds power points at exact 1/3 + 2/3', () => {
+    const a = armature(BOX, 'thirds');
+    expect(a.focals).toEqual([
+      { x: 30, y: 20 },
+      { x: 60, y: 20 },
+      { x: 30, y: 40 },
+      { x: 60, y: 40 },
+    ]);
+  });
+  test('rabatment landscape lines at x=H and x=W−H', () => {
+    const a = armature(BOX, 'rabatment'); // W=90,H=60 → x=60, x=30
+    const xs = a.focals.map((f) => f.x).sort((p, q) => p - q);
+    expect(xs[0]).toBe(30);
+    expect(xs[xs.length - 1]).toBe(60);
+  });
+  test('golden points differ from thirds and are inside the box', () => {
+    const a = armature(BOX, 'golden');
+    expect(a.focals).toHaveLength(4);
+    for (const f of a.focals) {
+      expect(f.x).toBeGreaterThan(0);
+      expect(f.x).toBeLessThan(90);
+    }
+    // golden vertical ≈ 90/1.618 = 55.6, not the thirds 60
+    expect(a.focals.some((f) => Math.abs(f.x - 55.6) < 0.5)).toBe(true);
+  });
+  test('dynamic-symmetry yields 4 eyes inside the box, symmetric about center', () => {
+    const a = armature(BOX, 'dynamic-symmetry');
+    expect(a.focals).toHaveLength(4);
+    const cx = a.focals.reduce((s, f) => s + f.x, 0) / 4;
+    const cy = a.focals.reduce((s, f) => s + f.y, 0) / 4;
+    expect(cx).toBeCloseTo(45, 4); // centroid of the 4 eyes = canvas center
+    expect(cy).toBeCloseTo(30, 4);
+  });
+  test('snapToFocal picks the nearest power point', () => {
+    const a = armature(BOX, 'thirds');
+    expect(snapToFocal({ x: 28, y: 22 }, a)).toEqual({ x: 30, y: 20 });
+  });
+});
+
+describe('constraint placement (no random scatter)', () => {
+  test('assignSlots fills focals first, then a calm grid — deterministic', () => {
+    const a = armature(BOX, 'thirds');
+    const p1 = assignSlots(6, a);
+    const p2 = assignSlots(6, a);
+    expect(p1).toEqual(p2); // deterministic
+    expect(p1.slice(0, 4)).toEqual(a.focals); // first 4 land on the power points
+    expect(p1).toHaveLength(6);
+    for (const p of p1) {
+      expect(p.x).toBeGreaterThanOrEqual(0);
+      expect(p.x).toBeLessThanOrEqual(90);
+    }
+  });
+});
+
+describe('VME visual balance', () => {
+  test('a symmetric pair scores ~1 (balanced)', () => {
+    const els = [
+      { bbox: { x: 10, y: 25, width: 10, height: 10 } },
+      { bbox: { x: 70, y: 25, width: 10, height: 10 } },
+    ];
+    const r = balanceMoment(els, BOX);
+    expect(r.score).toBeGreaterThan(0.95);
+  });
+  test('all weight on the left scores low (off-balance)', () => {
+    const els = [
+      { bbox: { x: 2, y: 25, width: 12, height: 12 } },
+      { bbox: { x: 6, y: 5, width: 12, height: 12 } },
+    ];
+    const r = balanceMoment(els, BOX);
+    expect(r.score).toBeLessThan(0.6);
+    expect(r.moment.x).toBeLessThan(0); // mass biased left of center
+  });
+});
+
+describe('dominance', () => {
+  test('one big element dominates; equal elements do not', () => {
+    expect(
+      dominanceRatio([
+        { bbox: { x: 0, y: 0, width: 40, height: 40 } },
+        { bbox: { x: 0, y: 0, width: 10, height: 10 } },
+      ])
+    ).toBeCloseTo(16, 5); // 1600 / 100
+    expect(
+      dominanceRatio([
+        { bbox: { x: 0, y: 0, width: 20, height: 20 } },
+        { bbox: { x: 0, y: 0, width: 20, height: 20 } },
+      ])
+    ).toBeCloseTo(1, 5); // competing foci
+  });
+});
+
+describe('color harmony (Cohen-Or templates)', () => {
+  test('analogous hues score ~0 (harmonious); a clash scores high', () => {
+    const harmonious = bestHarmony([20, 35, 50]); // tight cluster → fits a V/i wedge
+    expect(harmonious.distance).toBeLessThan(5);
+    const clash = bestHarmony([0, 70, 150, 250]); // scattered → no single template covers
+    expect(clash.distance).toBeGreaterThan(harmonious.distance);
+  });
+  test('complementary pair fits the I template near 0', () => {
+    const fit = bestHarmony([30, 210]); // 180° apart → complementary
+    expect(fit.distance).toBeLessThan(5);
+  });
+  test('harmonize snaps an outlier hue into a wedge', () => {
+    // template I = two 18° wedges 180° apart; rotation 30 → wedges at ~30 and ~210
+    const snapped = harmonize([30, 200], 'I', 30);
+    expect(snapped[0]).toBeCloseTo(30, 1); // already inside
+    // 200 is outside the [201,219] wedge → clamps to the near edge (201)
+    expect(Math.abs(snapped[1] - 210)).toBeLessThanOrEqual(9 + 1e-6);
+  });
+  test('harmonyDistance is 0 when all hues sit inside a wedge', () => {
+    expect(harmonyDistance([0, 5, -5], 'i', 0)).toBeCloseTo(0, 6); // i = 18° wedge at 0
+  });
+});
+
+describe('value / contrast metrics', () => {
+  test('valueRange flags a washed-out (muddy) set vs a deep one', () => {
+    const muddy = valueRange(['#b8a0c0', '#a0b8b0', '#c0b0a0']); // all mid-value pastels
+    const deep = valueRange(['#0a0a14', '#ffe7b0']); // near-black ↔ near-white
+    expect(muddy).toBeLessThan(0.2);
+    expect(deep).toBeGreaterThan(0.6);
+  });
+  test('apcaLc: black-on-white is high, same-on-same is ~0', () => {
+    expect(apcaLc('#000000', '#ffffff')).toBeGreaterThan(100);
+    expect(apcaLc('#777777', '#777777')).toBeLessThan(1);
+    // mid-gray text on white clears the body-min Lc 75 only when dark enough
+    expect(apcaLc('#595959', '#ffffff')).toBeGreaterThan(60);
+  });
+});

package/plugins/design/dev-server/draw/test/geometry.test.ts

@@ -0,0 +1,199 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  EQUAL_AREA_CIRCLE_SCALE,
+  blobPath,
+  centroid,
+  centroidCenter,
+  chamferCorners,
+  convexHull,
+  equalWeightCircleDiameter,
+  overshoot,
+  pchipEval,
+  pchipPath,
+  pchipSlopes,
+  polygonArea,
+  routeConnector,
+  simplifyCollinear,
+} from '../geometry.ts';
+import type { Point } from '../primitives.ts';
+
+describe('PCHIP monotone interpolation', () => {
+  const xs = [0, 1, 2, 3, 4];
+  const ys = [0, 0, 1, 1, 2]; // monotone non-decreasing, with flats
+
+  test('slopes are non-negative for monotone-increasing data', () => {
+    const m = pchipSlopes(xs, ys);
+    expect(m.every((s) => s >= -1e-12)).toBe(true);
+  });
+
+  test('interpolant never overshoots the data envelope (the whole point vs Bézier)', () => {
+    const lo = Math.min(...ys);
+    const hi = Math.max(...ys);
+    let prev = Number.NEGATIVE_INFINITY;
+    for (let i = 0; i <= 200; i++) {
+      const x = (i / 200) * 4;
+      const v = pchipEval(xs, ys, x);
+      expect(v).toBeGreaterThanOrEqual(lo - 1e-9);
+      expect(v).toBeLessThanOrEqual(hi + 1e-9);
+      expect(v).toBeGreaterThanOrEqual(prev - 1e-9); // monotone non-decreasing
+      prev = v;
+    }
+  });
+
+  test('passes through every knot', () => {
+    for (let i = 0; i < xs.length; i++) {
+      expect(pchipEval(xs, ys, xs[i])).toBeCloseTo(ys[i], 9);
+    }
+  });
+
+  test('pchipPath produces an M…C… cubic string', () => {
+    const d = pchipPath([
+      { x: 0, y: 0 },
+      { x: 1, y: 2 },
+      { x: 2, y: 1 },
+    ]);
+    expect(d.startsWith('M')).toBe(true);
+    expect(d).toContain('C');
+  });
+
+  test('clamps outside the domain', () => {
+    expect(pchipEval(xs, ys, -5)).toBe(0);
+    expect(pchipEval(xs, ys, 99)).toBe(2);
+  });
+});
+
+describe('polygon helpers', () => {
+  const square: Point[] = [
+    { x: 0, y: 0 },
+    { x: 2, y: 0 },
+    { x: 2, y: 2 },
+    { x: 0, y: 2 },
+  ];
+
+  test('polygonArea (abs) of a 2×2 square is 4', () => {
+    expect(Math.abs(polygonArea(square))).toBeCloseTo(4, 9);
+  });
+  test('centroid of a square is its center', () => {
+    const c = centroid(square);
+    expect(c.x).toBeCloseTo(1, 9);
+    expect(c.y).toBeCloseTo(1, 9);
+  });
+  test('convex hull drops interior points', () => {
+    const pts: Point[] = [...square, { x: 1, y: 1 }];
+    const hull = convexHull(pts);
+    expect(hull).toHaveLength(4);
+    expect(hull.some((p) => p.x === 1 && p.y === 1)).toBe(false);
+  });
+});
+
+describe('optical corrections', () => {
+  test('equal-area circle scale ≈ 1.1284', () => {
+    expect(EQUAL_AREA_CIRCLE_SCALE).toBeCloseTo(1.1284, 3);
+    expect(equalWeightCircleDiameter(100)).toBeCloseTo(112.84, 1);
+  });
+  test('overshoot grows extent by ratio', () => {
+    expect(overshoot(100, 0.02)).toBeCloseTo(102, 9);
+  });
+  test('centroidCenter offsets a triangle so its centroid hits the target', () => {
+    // Right triangle — bbox center (1,1) differs from centroid (2/3, 2/3).
+    const tri: Point[] = [
+      { x: 0, y: 0 },
+      { x: 2, y: 0 },
+      { x: 0, y: 2 },
+    ];
+    const { dx, dy } = centroidCenter(tri, 12, 12);
+    const moved = tri.map((p) => ({ x: p.x + dx, y: p.y + dy }));
+    const c = centroid(moved);
+    expect(c.x).toBeCloseTo(12, 6);
+    expect(c.y).toBeCloseTo(12, 6);
+  });
+});
+
+describe('A* connector routing', () => {
+  test('clear field routes essentially straight', () => {
+    const pts = routeConnector({ x: 0, y: 0 }, { x: 100, y: 0 }, [], { grid: 10 });
+    expect(pts[0]).toEqual({ x: 0, y: 0 });
+    expect(pts[pts.length - 1]).toEqual({ x: 100, y: 0 });
+    expect(pts.every((p) => Math.abs(p.y) < 1e-6)).toBe(true);
+    expect(pts.length).toBe(2); // collapsed to a single straight run
+  });
+
+  test('routes around an obstacle without entering it', () => {
+    const obstacle = { x: 40, y: -20, width: 20, height: 40 };
+    const pts = routeConnector({ x: 0, y: 0 }, { x: 100, y: 0 }, [obstacle], { grid: 10 });
+    expect(pts[0]).toEqual({ x: 0, y: 0 });
+    expect(pts[pts.length - 1]).toEqual({ x: 100, y: 0 });
+    const inside = (p: Point) =>
+      p.x > obstacle.x &&
+      p.x < obstacle.x + obstacle.width &&
+      p.y > obstacle.y &&
+      p.y < obstacle.y + obstacle.height;
+    expect(pts.some(inside)).toBe(false);
+    expect(pts.length).toBeGreaterThan(2); // had to bend
+  });
+
+  test('is deterministic', () => {
+    const obstacle = { x: 40, y: -20, width: 20, height: 40 };
+    const a = routeConnector({ x: 0, y: 0 }, { x: 100, y: 0 }, [obstacle], { grid: 10 });
+    const b = routeConnector({ x: 0, y: 0 }, { x: 100, y: 0 }, [obstacle], { grid: 10 });
+    expect(a).toEqual(b);
+  });
+});
+
+describe('blobPath (organic closed curve)', () => {
+  test('is a closed cubic-Bézier path', () => {
+    const d = blobPath(50, 50, 30, { lobes: 7, seed: 3 });
+    expect(d.startsWith('M')).toBe(true);
+    expect(d).toContain('C');
+    expect(d.trimEnd().endsWith('Z')).toBe(true);
+  });
+  test('deterministic for a given seed; different seeds differ', () => {
+    expect(blobPath(50, 50, 30, { seed: 7 })).toBe(blobPath(50, 50, 30, { seed: 7 }));
+    expect(blobPath(50, 50, 30, { seed: 7 })).not.toBe(blobPath(50, 50, 30, { seed: 8 }));
+  });
+  test('control points stay within the irregularity envelope of the radius', () => {
+    const cx = 100;
+    const cy = 100;
+    const baseR = 40;
+    const irr = 0.3;
+    const d = blobPath(cx, cy, baseR, { lobes: 8, irregularity: irr, seed: 5 });
+    const nums = Array.from(d.matchAll(/-?\d+\.?\d*/g), (m) => Number(m[0]));
+    // coords come in x,y pairs after the M/C letters; check anchor distances
+    let maxD = 0;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      maxD = Math.max(maxD, Math.hypot(nums[i] - cx, nums[i + 1] - cy));
+    }
+    // Bézier control points overshoot anchors a bit; allow generous envelope.
+    expect(maxD).toBeLessThan(baseR * (1 + irr) * 1.7);
+    expect(maxD).toBeGreaterThan(baseR * 0.5);
+  });
+});
+
+describe('path post-processing', () => {
+  test('simplifyCollinear removes mid points on a straight run', () => {
+    const out = simplifyCollinear([
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 2, y: 0 },
+      { x: 2, y: 2 },
+    ]);
+    expect(out).toEqual([
+      { x: 0, y: 0 },
+      { x: 2, y: 0 },
+      { x: 2, y: 2 },
+    ]);
+  });
+  test('chamferCorners replaces a corner with two offset points', () => {
+    const out = chamferCorners(
+      [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 },
+        { x: 10, y: 10 },
+      ],
+      2
+    );
+    expect(out.length).toBe(4); // 2 endpoints + 2 chamfer points for 1 corner
+    expect(out[0]).toEqual({ x: 0, y: 0 });
+    expect(out[out.length - 1]).toEqual({ x: 10, y: 10 });
+  });
+});

package/plugins/design/dev-server/draw/test/gradient.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, test } from 'bun:test';
+import { optimizeSvg } from '../optimize.ts';
+import {
+  blurFilter,
+  circle,
+  clipPath,
+  defs,
+  dropShadowFilter,
+  fe,
+  filter,
+  grainFilter,
+  group,
+  linearGradient,
+  mask,
+  pattern,
+  radialGradient,
+  rect,
+} from '../primitives.ts';
+import { toJsx, toSvg } from '../serialize.ts';
+
+describe('gradients', () => {
+  const prims = [
+    defs([
+      linearGradient({
+        id: 'sky',
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 1,
+        stops: [
+          { offset: 0, color: '#0b1026' },
+          { offset: 1, color: '#f5a623', opacity: 0.9 },
+        ],
+      }),
+      radialGradient({
+        id: 'sun',
+        cx: 0.5,
+        cy: 0.5,
+        r: 0.5,
+        stops: [
+          { offset: 0, color: '#fff' },
+          { offset: 1, color: '#fff', opacity: 0 },
+        ],
+      }),
+    ]),
+    rect({ x: 0, y: 0, width: 100, height: 60, fill: 'url(#sky)' }),
+  ];
+  const opts = { viewBox: '0 0 100 60' };
+
+  test('toSvg emits linear + radial gradients with kebab stop-color', () => {
+    const svg = toSvg(prims, opts);
+    expect(svg).toContain('<linearGradient id="sky"');
+    expect(svg).toContain('<radialGradient id="sun"');
+    expect(svg).toMatch(/<stop offset="0" stop-color="#0b1026"\s*\/>/);
+    expect(svg).toContain('stop-opacity="0.9"');
+    expect(svg).toContain('fill="url(#sky)"');
+  });
+
+  test('toJsx uses camelCase stopColor / stopOpacity', () => {
+    const jsx = toJsx(prims, opts);
+    expect(jsx).toContain('stopColor="#0b1026"');
+    expect(jsx).toContain('stopOpacity="0.9"');
+    expect(jsx).not.toContain('stop-color');
+  });
+
+  test('gradient SVG passes the SVGO validity gate', () => {
+    expect(() => optimizeSvg(toSvg(prims, opts))).not.toThrow();
+  });
+});
+
+describe('filters / patterns / masks / blend (design toolkit)', () => {
+  test('blur + drop-shadow + grain filters serialize with correct fe primitives', () => {
+    const prims = [
+      defs([
+        blurFilter('b', 4),
+        dropShadowFilter('sh', { dy: 3, blur: 4 }),
+        grainFilter('grain', { opacity: 0.4 }),
+      ]),
+      circle({ cx: 50, cy: 50, r: 20, fill: '#333', filter: 'url(#sh)' }),
+    ];
+    const svg = toSvg(prims, { viewBox: '0 0 100 100' });
+    expect(svg).toContain('<feGaussianBlur');
+    expect(svg).toContain('stdDeviation="4"');
+    expect(svg).toContain('<feDropShadow');
+    expect(svg).toContain('flood-opacity="0.3"'); // kebab in SVG dialect
+    expect(svg).toContain('<feTurbulence');
+    expect(svg).toContain('type="fractalNoise"');
+    expect(svg).toContain('filter="url(#sh)"');
+    expect(optimizeSvg(svg)).toBeTruthy(); // validity gate
+  });
+
+  test('JSX dialect: floodColor camelCase + feMerge children', () => {
+    const f = filter('m', [
+      fe('feGaussianBlur', { stdDeviation: 2, result: 'blur' }),
+      fe('feMerge', undefined, [
+        fe('feMergeNode', { in: 'blur' }),
+        fe('feMergeNode', { in: 'SourceGraphic' }),
+      ]),
+    ]);
+    const jsx = toJsx([defs([f, dropShadowFilter('sh')])], { viewBox: '0 0 10 10' });
+    expect(jsx).toContain('<feMerge>');
+    expect(jsx).toContain('<feMergeNode');
+    expect(jsx).toContain('floodColor='); // camelCase in JSX
+    expect(jsx).not.toContain('flood-color');
+  });
+
+  test('pattern tile fills via url()', () => {
+    const prims = [
+      defs([
+        pattern({
+          id: 'dots',
+          width: 8,
+          height: 8,
+          children: [circle({ cx: 2, cy: 2, r: 1, fill: '#888' })],
+        }),
+      ]),
+      rect({ x: 0, y: 0, width: 64, height: 64, fill: 'url(#dots)' }),
+    ];
+    const svg = toSvg(prims, { viewBox: '0 0 64 64' });
+    expect(svg).toContain('<pattern id="dots" width="8" height="8" patternUnits="userSpaceOnUse"');
+    expect(svg).toContain('fill="url(#dots)"');
+    expect(optimizeSvg(svg)).toBeTruthy();
+  });
+
+  test('mask + clipPath defs serialize, and mix-blend-mode emits dialect style', () => {
+    const prims = [
+      defs([
+        mask('fade', [rect({ x: 0, y: 0, width: 100, height: 100, fill: 'url(#g)' })]),
+        clipPath('round', [circle({ cx: 50, cy: 50, r: 40 })]),
+      ]),
+      group([rect({ x: 0, y: 0, width: 100, height: 100, fill: '#f00' })], {}),
+      rect({
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        fill: '#0f0',
+        mask: 'url(#fade)',
+        clipPath: 'url(#round)',
+        mixBlendMode: 'overlay',
+      }),
+    ];
+    const svg = toSvg(prims, { viewBox: '0 0 100 100' });
+    expect(svg).toContain('<mask id="fade">');
+    expect(svg).toContain('<clipPath id="round">');
+    expect(svg).toContain('mask="url(#fade)"');
+    expect(svg).toContain('clip-path="url(#round)"'); // kebab in SVG
+    expect(svg).toContain('style="mix-blend-mode:overlay"');
+    const jsx = toJsx(prims, { viewBox: '0 0 100 100' });
+    expect(jsx).toContain('clipPath="url(#round)"'); // camelCase in JSX
+    expect(jsx).toContain('style={{ mixBlendMode: "overlay" }}');
+  });
+
+  test('group carries the compositing surface (filter + mask + blend)', () => {
+    const g = group([circle({ cx: 10, cy: 10, r: 5 })], {
+      filter: 'url(#warp)',
+      mask: 'url(#fade)',
+      mixBlendMode: 'screen',
+    });
+    const svg = toSvg([g], { viewBox: '0 0 20 20' });
+    expect(svg).toMatch(/<g[^>]*filter="url\(#warp\)"/);
+    expect(svg).toContain('mask="url(#fade)"');
+    expect(svg).toContain('style="mix-blend-mode:screen"');
+    // a group must never leak a stroke default (it's not a fillable shape)
+    expect(svg).not.toMatch(/<g[^>]*stroke=/);
+  });
+});

package/plugins/design/dev-server/draw/test/layout.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, test } from 'bun:test';
+import type { Rect } from '../geometry.ts';
+import { type LabelItem, diagram, modularScale, placeLabels, snapToGrid } from '../layout.ts';
+import type { Point } from '../primitives.ts';
+
+describe('grid + modular scale', () => {
+  test('snapToGrid', () => {
+    expect(snapToGrid({ x: 13, y: 7 }, 8)).toEqual({ x: 16, y: 8 });
+  });
+  test('modularScale builds a ratio ladder', () => {
+    expect(modularScale(16, 1.5, 3)).toEqual([16, 24, 36]);
+    expect(modularScale(16, 1.25, 4)[0]).toBe(16);
+  });
+});
+
+describe('constraint-based label placement', () => {
+  test('places N labels around spread anchors with no overlap', () => {
+    const items: LabelItem[] = [
+      { id: 'a', anchor: { x: 0, y: 0 }, width: 30, height: 12 },
+      { id: 'b', anchor: { x: 200, y: 0 }, width: 30, height: 12 },
+      { id: 'c', anchor: { x: 0, y: 200 }, width: 30, height: 12 },
+      { id: 'd', anchor: { x: 200, y: 200 }, width: 30, height: 12 },
+    ];
+    const placements = placeLabels(items, { gap: 6 });
+    expect(placements).toHaveLength(4);
+    // No two placed boxes overlap (plenty of room → solver should find 0 overlap).
+    for (let i = 0; i < placements.length; i++) {
+      for (let j = i + 1; j < placements.length; j++) {
+        const a = placements[i];
+        const b = placements[j];
+        const ox = Math.max(0, Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x));
+        const oy = Math.max(0, Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y));
+        expect(ox * oy).toBe(0);
+      }
+    }
+  });
+  test('is deterministic', () => {
+    const items: LabelItem[] = [
+      { id: 'x', anchor: { x: 10, y: 10 }, width: 20, height: 10 },
+      { id: 'y', anchor: { x: 14, y: 12 }, width: 20, height: 10 },
+    ];
+    expect(placeLabels(items)).toEqual(placeLabels(items));
+  });
+  test('returns placements in input order', () => {
+    const items: LabelItem[] = [
+      { id: 'z', anchor: { x: 0, y: 0 }, width: 10, height: 10 },
+      { id: 'a', anchor: { x: 100, y: 0 }, width: 10, height: 10 },
+    ];
+    expect(placeLabels(items).map((p) => p.id)).toEqual(['z', 'a']);
+  });
+});
+
+describe('diagram()', () => {
+  const nodes = [
+    { id: 'n1', rect: { x: 0, y: 0, width: 60, height: 30 } as Rect, label: 'A' },
+    { id: 'n2', rect: { x: 200, y: 0, width: 60, height: 30 } as Rect, label: 'B' },
+    { id: 'n3', rect: { x: 0, y: 150, width: 60, height: 30 } as Rect, label: 'C' },
+    { id: 'n4', rect: { x: 200, y: 150, width: 60, height: 30 } as Rect, label: 'D' },
+  ];
+  const edges = [
+    { from: 'n1', to: 'n2' },
+    { from: 'n1', to: 'n4' },
+    { from: 'n3', to: 'n4' },
+  ];
+
+  test('emits an edges group and a nodes group', () => {
+    const prims = diagram(nodes, edges, { grid: 10 });
+    expect(prims).toHaveLength(2);
+    expect(prims[0]).toMatchObject({ el: 'group', id: 'edges' });
+    expect(prims[1]).toMatchObject({ el: 'group', id: 'nodes' });
+  });
+
+  test('renders one rect + one label per node', () => {
+    const prims = diagram(nodes, edges, { grid: 10 }) as Array<{ children: Array<{ el: string }> }>;
+    const nodeChildren = prims[1].children;
+    expect(nodeChildren.filter((c) => c.el === 'rect')).toHaveLength(4);
+    expect(nodeChildren.filter((c) => c.el === 'text')).toHaveLength(4);
+  });
+
+  test('routes edges around NON-endpoint node boxes (never crosses a third node)', () => {
+    const prims = diagram(nodes, edges, { grid: 10, padding: 4 }) as Array<{
+      children: Array<{ el: string; points?: Point[] }>;
+    }>;
+    const edgePolys = prims[0].children.filter((c) => c.el === 'polyline');
+    expect(edgePolys.length).toBe(3);
+    const inside = (p: Point, r: Rect) =>
+      p.x > r.x && p.x < r.x + r.width && p.y > r.y && p.y < r.y + r.height;
+    // Endpoints sit at node CENTERS (inside from/to boxes by construction); the
+    // guarantee is that waypoints never enter a node that isn't this edge's
+    // own endpoint.
+    edges.forEach((e, i) => {
+      const obstacles = nodes.filter((n) => n.id !== e.from && n.id !== e.to);
+      for (const pt of edgePolys[i].points ?? []) {
+        for (const n of obstacles) {
+          expect(inside(pt, n.rect)).toBe(false);
+        }
+      }
+    });
+  });
+});
+
+describe('index barrel', () => {
+  test('re-exports the full public surface', async () => {
+    const m = await import('../index.ts');
+    for (const name of [
+      'rect',
+      'circle',
+      'place',
+      'toSvg',
+      'toJsx',
+      'optimizeSvg',
+      'diagram',
+      'contrastRatio',
+      'routeConnector',
+      'oklchToRgb',
+    ]) {
+      expect(typeof (m as Record<string, unknown>)[name]).toBe('function');
+    }
+  });
+});

package/plugins/design/dev-server/draw/test/optimize.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test';
+import { isValidSvg, optimizeSvg } from '../optimize.ts';
+import { rect } from '../primitives.ts';
+import { toSvg } from '../serialize.ts';
+
+describe('optimizeSvg', () => {
+  test('round-trips a known mark and stays valid', () => {
+    const svg = toSvg([rect({ x: 2, y: 2, width: 20, height: 20, fill: '#aabbcc' })], {
+      viewBox: '0 0 24 24',
+      a11y: { title: 'Square', desc: 'A rounded square' },
+    });
+    const out = optimizeSvg(svg);
+    expect(out).toContain('viewBox="0 0 24 24"');
+    expect(out).toContain('<title>Square</title>');
+    expect(out).toContain('<desc>A rounded square</desc>');
+    expect(isValidSvg(out)).toBe(true);
+  });
+
+  test('preserves the a11y + scaling contract (viewBox / title / desc kept)', () => {
+    const src =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>T</title><desc>D</desc><circle cx="5" cy="5" r="4"/></svg>';
+    const out = optimizeSvg(src);
+    expect(out).toContain('viewBox="0 0 10 10"');
+    expect(out).toContain('<title>T</title>');
+    expect(out).toContain('<desc>D</desc>');
+  });
+
+  test('shrinks coordinate precision', () => {
+    const src =
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.23456789 2 L4 4"/></svg>';
+    const out = optimizeSvg(src, { floatPrecision: 2 });
+    expect(out).not.toContain('1.23456789');
+  });
+
+  test('throws on malformed SVG (the validity gate)', () => {
+    expect(() => optimizeSvg('<svg><rect')).toThrow(/not valid SVG/);
+    expect(isValidSvg('<svg><rect')).toBe(false);
+    expect(isValidSvg('not svg at all <<<')).toBe(false);
+  });
+});