@1agh/maude 0.28.1 → 0.30.0

package/{plugins/design/dev-server → apps/studio}/test/annotations-layer.test.ts

@@ -13,6 +13,8 @@ import {
   type ArrowStroke,
   arrowHeadPoints,
   type EllipseStroke,
+  type ImageStroke,
+  type LinkStroke,
   type PenStroke,
   type PolygonStroke,
   penPathD,
@@ -696,6 +698,67 @@ describe('annotations-layer / Phase 21 sticky + standalone-text geometry', () =>
   });
 });
 
+describe('annotations-layer / Phase 23 image + link geometry', () => {
+  const image: ImageStroke = {
+    id: 'im',
+    tool: 'image',
+    x: 30,
+    y: 40,
+    w: 200,
+    h: 150,
+    href: 'assets/deadbeef.png',
+  };
+  const link: LinkStroke = {
+    id: 'lk',
+    tool: 'link',
+    x: 30,
+    y: 40,
+    w: 260,
+    h: 76,
+    url: 'https://example.com',
+    title: 'Example',
+    domain: 'example.com',
+  };
+
+  test('image bbox is its rect extent (normalizes negative extent)', () => {
+    expect(strokeBBox(image)).toEqual({ x: 30, y: 40, w: 200, h: 150 });
+    expect(strokeBBox({ ...image, x: 230, y: 190, w: -200, h: -150 })).toEqual({
+      x: 30,
+      y: 40,
+      w: 200,
+      h: 150,
+    });
+  });
+
+  test('link bbox is its card extent', () => {
+    expect(strokeBBox(link)).toEqual({ x: 30, y: 40, w: 260, h: 76 });
+  });
+
+  test('image + link are filled-card hits anywhere inside', () => {
+    expect(strokeHitTest(image, 100, 100, 4)).toBe(true); // interior
+    expect(strokeHitTest(image, 30, 40, 4)).toBe(true); // corner
+    expect(strokeHitTest(image, 999, 999, 4)).toBe(false); // far outside
+    expect(strokeHitTest(link, 100, 60, 4)).toBe(true);
+    expect(strokeHitTest(link, 999, 999, 4)).toBe(false);
+  });
+
+  test('image serializes a same-origin <image> with preserveAspectRatio', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).toContain('<image');
+    expect(svg).toContain('data-tool="image"');
+    expect(svg).toContain('preserveAspectRatio="xMidYMid meet"');
+    expect(svg).toContain('href="assets/deadbeef.png"');
+  });
+
+  test('link serializes a card <g> carrying its data-* payload', () => {
+    const svg = strokesToSvg([link]);
+    expect(svg).toContain('data-tool="link"');
+    expect(svg).toContain('data-url="https://example.com"');
+    expect(svg).toContain('data-domain="example.com"');
+    expect(svg).toContain('<rect');
+  });
+});
+
 describe('annotations-layer / Phase 24 polygon geometry', () => {
   test('polygonVertices span the full bbox for every shape', () => {
     for (const shape of ['diamond', 'triangle', 'triangle-down'] as const) {

package/{plugins/design/dev-server → apps/studio}/test/annotations-roundtrip.test.ts

@@ -14,6 +14,8 @@ import { GlobalRegistrator } from '@happy-dom/global-registrator';
 
 import {
   type ArrowStroke,
+  type ImageStroke,
+  type LinkStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
@@ -217,6 +219,101 @@ describe('annotations round-trip / arrow heads + dash (4 dirs × 2 dash)', () =>
   }
 });
 
+describe('annotations round-trip / image (Phase 23)', () => {
+  const image: ImageStroke = {
+    id: 'im1',
+    tool: 'image',
+    x: 120,
+    y: 80,
+    w: 320,
+    h: 240,
+    href: 'assets/a1b2c3d4.png',
+  };
+
+  test('image survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([image])) as ImageStroke[];
+    expect(parsed).toEqual(image);
+  });
+
+  test('image alt text round-trips via data-alt', () => {
+    const withAlt: ImageStroke = { ...image, alt: 'competitor pricing page' };
+    const svg = strokesToSvg([withAlt]);
+    expect(svg).toContain('data-alt="competitor pricing page"');
+    const [parsed] = svgToStrokes(svg) as ImageStroke[];
+    expect(parsed?.alt).toBe('competitor pricing page');
+  });
+
+  test('image with no alt omits data-alt (no phantom default)', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).not.toContain('data-alt');
+    const [parsed] = svgToStrokes(svg) as ImageStroke[];
+    expect(parsed?.alt).toBeUndefined();
+  });
+
+  test('image persists a relative assets href (never a data: URL)', () => {
+    const svg = strokesToSvg([image]);
+    expect(svg).toContain('href="assets/a1b2c3d4.png"');
+    expect(svg).not.toContain('data:');
+  });
+
+  test('image serialize → parse is idempotent', () => {
+    const once = strokesToSvg([{ ...image, alt: 'x' }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('image SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    // The assets href must SURVIVE the sanitizer (Task 4 relaxation), so the
+    // persisted form comes back unchanged on every PUT.
+    const svg = strokesToSvg([image]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+});
+
+describe('annotations round-trip / link chip (Phase 23)', () => {
+  const link: LinkStroke = {
+    id: 'lk1',
+    tool: 'link',
+    x: 60,
+    y: 40,
+    w: 260,
+    h: 76,
+    url: 'https://example.com/blog/post?ref=maude',
+    title: 'A reference post worth reacting to',
+    domain: 'example.com',
+  };
+
+  test('link survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([link])) as LinkStroke[];
+    expect(parsed).toEqual(link);
+  });
+
+  test('link never persists an <a href> (click-to-open is client-only)', () => {
+    const svg = strokesToSvg([link]);
+    expect(svg).not.toContain('<a ');
+    expect(svg).toContain('data-url="https://example.com/blog/post?ref=maude"');
+  });
+
+  test('link serialize → parse is idempotent (even with a long title)', () => {
+    const once = strokesToSvg([{ ...link, title: 'x'.repeat(200) }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('link SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    // rect/svg/path/text/data-* are all allowlisted; no on*/style/href → unchanged.
+    const svg = strokesToSvg([link]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+
+  test('link missing data-title falls back to the domain', () => {
+    const svg =
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+      '<g data-id="lk2" data-tool="link" data-url="https://x.io" data-domain="x.io">' +
+      '<rect x="0" y="0" width="260" height="76" rx="8" ry="8"/></g></svg>';
+    const [parsed] = svgToStrokes(svg) as LinkStroke[];
+    expect(parsed?.title).toBe('x.io');
+  });
+});
+
 describe('annotations round-trip / standalone vs anchored text', () => {
   test('standalone text round-trips its world (x, y) and stays unanchored', () => {
     const t: TextStroke = {

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/annotations-text-format.test.ts

@@ -0,0 +1,396 @@
+// annotations text-format polish — multi-line tspans, italic / underline,
+// ordered + unordered lists, dashed shapes, and the highlighter pen. The PARSE
+// side needs a DOMParser (happy-dom, registered per-file). The load-bearing
+// assertions: every NEW field serializes ONLY when set (the byte-identical
+// round-trip canary holds for legacy/unstyled strokes), and multi-line text
+// reconstructs its `\n` from tspans (list markers stripped).
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+import {
+  type EllipseStroke,
+  listPrefixedBody,
+  type PenStroke,
+  type RectStroke,
+  type StickyStroke,
+  splitTextLines,
+  stickyCornerPath,
+  stripEditorMarkers,
+  strokeBBox,
+  strokesToSvg,
+  svgToStrokes,
+  type TextStroke,
+} from '../annotations-layer.tsx';
+import { sanitizeAnnotationSvg } from '../api.ts';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(async () => {
+  await GlobalRegistrator.unregister();
+});
+
+/** Re-serialize a freshly-parsed SVG. Idempotency helper. */
+function reparse(svg: string): string {
+  return strokesToSvg(svgToStrokes(svg));
+}
+
+const baseStandalone: TextStroke = {
+  id: 't1',
+  tool: 'text',
+  color: '#1f1f1f',
+  fontSize: 14,
+  text: 'one line',
+  x: 40,
+  y: 60,
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Multi-line text (item 4a)
+
+describe('text-format / multi-line tspans', () => {
+  test('single-line text emits NO tspan and round-trips byte-identical', () => {
+    const svg = strokesToSvg([baseStandalone]);
+    expect(svg).not.toContain('<tspan');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('standalone multi-line text emits one tspan per line and recovers \\n', () => {
+    const multi: TextStroke = { ...baseStandalone, text: 'line one\nline two\nline three' };
+    const svg = strokesToSvg([multi]);
+    expect((svg.match(/<tspan/g) ?? []).length).toBe(3);
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.text).toBe('line one\nline two\nline three');
+    expect(reparse(svg)).toBe(svg); // idempotent
+  });
+
+  test('anchored multi-line text round-trips its \\n', () => {
+    const anchored: TextStroke = {
+      id: 'ta',
+      tool: 'text',
+      color: '#1f1f1f',
+      fontSize: 16,
+      text: 'top\nbottom',
+      anchorId: 'host-1',
+    };
+    const svg = strokesToSvg([anchored]);
+    expect(svg).toContain('<tspan');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.anchorId).toBe('host-1');
+    expect(parsed?.text).toBe('top\nbottom');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('multi-line text survives the PUT-path sanitizer byte-intact (tspan allowlisted)', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, text: 'a\nb' }]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+    const [parsed] = svgToStrokes(sanitizeAnnotationSvg(svg)) as TextStroke[];
+    expect(parsed?.text).toBe('a\nb');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Italic + underline (item 4b)
+
+describe('text-format / italic + underline', () => {
+  test('italic serializes font-style only when set; round-trips', () => {
+    const plain = strokesToSvg([baseStandalone]);
+    expect(plain).not.toContain('font-style');
+    const svg = strokesToSvg([{ ...baseStandalone, italic: true }]);
+    expect(svg).toContain('font-style="italic"');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.italic).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('underline serializes text-decoration only when set; round-trips', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, underline: true }]);
+    expect(svg).toContain('text-decoration="underline"');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.underline).toBe(true);
+    expect(parsed?.strike).toBeUndefined();
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('strike + underline combine into one text-decoration (order stable)', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, strike: true, underline: true }]);
+    expect(svg).toContain('text-decoration="line-through underline"');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.strike).toBe(true);
+    expect(parsed?.underline).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('strike-only stays byte-identical to the legacy line-through form', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, strike: true }]);
+    expect(svg).toContain('text-decoration="line-through"');
+    expect(svg).not.toContain('underline');
+  });
+
+  test('all four formats (bold+italic+strike+underline) combine + round-trip', () => {
+    // The editors commit bold/italic/underline (Cmd+B/I/U) + strike together;
+    // assert every flag serializes and survives the round-trip.
+    const svg = strokesToSvg([
+      { ...baseStandalone, bold: true, italic: true, strike: true, underline: true },
+    ]);
+    expect(svg).toContain('font-weight="700"');
+    expect(svg).toContain('font-style="italic"');
+    expect(svg).toContain('text-decoration="line-through underline"');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.bold).toBe(true);
+    expect(parsed?.italic).toBe(true);
+    expect(parsed?.strike).toBe(true);
+    expect(parsed?.underline).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('sticky italic + underline round-trip; a plain sticky gains no attrs', () => {
+    const plain: StickyStroke = {
+      id: 'st',
+      tool: 'sticky',
+      color: '#fce8a6',
+      x: 0,
+      y: 0,
+      w: 200,
+      h: 200,
+      text: 'note',
+      fontSize: 16,
+    };
+    expect(strokesToSvg([plain])).not.toContain('data-italic');
+    const svg = strokesToSvg([{ ...plain, italic: true, underline: true }]);
+    expect(svg).toContain('data-italic="1"');
+    expect(svg).toContain('data-underline="1"');
+    const [parsed] = svgToStrokes(svg) as StickyStroke[];
+    expect(parsed?.italic).toBe(true);
+    expect(parsed?.underline).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Lists (item 4c)
+
+describe('text-format / ordered + unordered lists', () => {
+  test('bullet list: data-list set, markers render-only, stored text clean', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, text: 'apple\npear', listType: 'bullet' }]);
+    expect(svg).toContain('data-list="bullet"');
+    expect(svg).toContain('• apple');
+    expect(svg).toContain('• pear');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    // Stored text has NO marker — markers are presentation only.
+    expect(parsed?.text).toBe('apple\npear');
+    expect(parsed?.listType).toBe('bullet');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('numbered list: per-line N. markers, re-numbered from stored text', () => {
+    const svg = strokesToSvg([
+      { ...baseStandalone, text: 'first\nsecond\nthird', listType: 'number' },
+    ]);
+    expect(svg).toContain('1. first');
+    expect(svg).toContain('2. second');
+    expect(svg).toContain('3. third');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.text).toBe('first\nsecond\nthird');
+    expect(parsed?.listType).toBe('number');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('a single-line list item still round-trips (forces a tspan)', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, text: 'solo', listType: 'bullet' }]);
+    expect(svg).toContain('<tspan');
+    expect(svg).toContain('• solo');
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.text).toBe('solo');
+    expect(parsed?.listType).toBe('bullet');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('a line that literally starts with the marker is not double-stripped', () => {
+    const svg = strokesToSvg([{ ...baseStandalone, text: '• already', listType: 'bullet' }]);
+    const [parsed] = svgToStrokes(svg) as TextStroke[];
+    expect(parsed?.text).toBe('• already');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('no list ⇒ no data-list attribute (canary)', () => {
+    expect(strokesToSvg([baseStandalone])).not.toContain('data-list');
+  });
+
+  test('sticky list round-trips with markers render-only (body text stays raw)', () => {
+    const svg = strokesToSvg([
+      {
+        id: 'sl',
+        tool: 'sticky',
+        color: '#fce8a6',
+        x: 0,
+        y: 0,
+        w: 200,
+        h: 200,
+        text: 'buy milk\nbuy eggs',
+        fontSize: 16,
+        listType: 'bullet',
+      },
+    ]);
+    expect(svg).toContain('data-list="bullet"');
+    // The persisted sticky body <text> keeps RAW text (no marker).
+    expect(svg).toContain('>buy milk\nbuy eggs<');
+    const [parsed] = svgToStrokes(svg) as StickyStroke[];
+    expect(parsed?.text).toBe('buy milk\nbuy eggs');
+    expect(parsed?.listType).toBe('bullet');
+    expect(reparse(svg)).toBe(svg);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Dashed rect / ellipse (item 7)
+
+describe('text-format / dashed shapes', () => {
+  const rect: RectStroke = {
+    id: 'r',
+    tool: 'rect',
+    color: '#1f1f1f',
+    width: 2,
+    x: 0,
+    y: 0,
+    w: 80,
+    h: 60,
+    fill: null,
+  };
+  const ellipse: EllipseStroke = {
+    id: 'e',
+    tool: 'ellipse',
+    color: '#1f1f1f',
+    width: 2,
+    cx: 40,
+    cy: 30,
+    rx: 30,
+    ry: 20,
+    fill: null,
+  };
+
+  test('solid rect / ellipse emit no dash attr (canary)', () => {
+    expect(strokesToSvg([rect])).not.toContain('data-dash');
+    expect(strokesToSvg([ellipse])).not.toContain('data-dash');
+    expect(reparse(strokesToSvg([rect]))).toBe(strokesToSvg([rect]));
+    expect(reparse(strokesToSvg([ellipse]))).toBe(strokesToSvg([ellipse]));
+  });
+
+  test('dashed rect round-trips data-dash + stroke-dasharray', () => {
+    const svg = strokesToSvg([{ ...rect, dashed: true }]);
+    expect(svg).toContain('data-dash="1"');
+    expect(svg).toContain('stroke-dasharray="6 4"');
+    const [parsed] = svgToStrokes(svg) as RectStroke[];
+    expect(parsed?.dashed).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('dashed ellipse round-trips data-dash', () => {
+    const svg = strokesToSvg([{ ...ellipse, dashed: true }]);
+    expect(svg).toContain('data-dash="1"');
+    const [parsed] = svgToStrokes(svg) as EllipseStroke[];
+    expect(parsed?.dashed).toBe(true);
+    expect(reparse(svg)).toBe(svg);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Highlighter pen (item 8) — appended after Task 9.
+
+describe('text-format / highlighter pen', () => {
+  const pen: PenStroke = {
+    id: 'p',
+    tool: 'pen',
+    color: '#1f1f1f',
+    width: 3,
+    points: [
+      [0, 0],
+      [10, 0],
+    ],
+  };
+
+  test('a normal pen emits no data-highlighter (canary)', () => {
+    const svg = strokesToSvg([pen]);
+    expect(svg).not.toContain('data-highlighter');
+    expect(reparse(svg)).toBe(svg);
+  });
+
+  test('a highlighter pen round-trips data-highlighter + wide translucent stroke', () => {
+    const hl: PenStroke = { ...pen, highlighter: true, width: 16, color: '#ffe40066' };
+    const svg = strokesToSvg([hl]);
+    expect(svg).toContain('data-highlighter="1"');
+    const [parsed] = svgToStrokes(svg) as PenStroke[];
+    expect(parsed?.highlighter).toBe(true);
+    expect(parsed?.width).toBe(16);
+    expect(parsed?.color).toBe('#ffe40066');
+    expect(reparse(svg)).toBe(svg);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Render-contract helpers (item 1 sticky corner + item 4a bbox)
+
+describe('text-format / sticky sharp-corner path (item 1)', () => {
+  test('stickyCornerPath rounds TL/TR/BL and keeps the bottom-right SHARP', () => {
+    const d = stickyCornerPath(0, 0, 100, 80, 8);
+    // The BR corner is a straight L to the exact corner (no Q arc there): the
+    // right edge drops to (100,80) then the bottom edge runs to the BL arc.
+    expect(d).toContain('L100 80'); // sharp bottom-right corner vertex
+    // Three rounded corners ⇒ exactly three quadratic arcs (TR, BL, TL).
+    expect((d.match(/Q/g) ?? []).length).toBe(3);
+    expect(d.endsWith('Z')).toBe(true);
+  });
+
+  test('radius clamps to half the smaller side (never self-overlaps)', () => {
+    const d = stickyCornerPath(0, 0, 10, 200, 999);
+    // r clamps to min(999, 5, 100) = 5; the first move starts at x = r = 5.
+    expect(d.startsWith('M5 0')).toBe(true);
+  });
+});
+
+describe('text-format / editor list markers (item 4c — show while editing)', () => {
+  test('listPrefixedBody adds markers; stripEditorMarkers removes them (round-trip)', () => {
+    expect(listPrefixedBody('a\nb', 'bullet')).toBe('• a\n• b');
+    expect(listPrefixedBody('a\nb\nc', 'number')).toBe('1. a\n2. b\n3. c');
+    expect(listPrefixedBody('a\nb', undefined)).toBe('a\nb');
+    for (const list of ['bullet', 'number'] as const) {
+      const raw = 'milk\neggs\nbread';
+      // The editor shows markers; on commit they strip back to the raw text.
+      expect(stripEditorMarkers(listPrefixedBody(raw, list), list)).toBe(raw);
+    }
+  });
+
+  test('stripEditorMarkers removes a numbered prefix regardless of the typed number', () => {
+    // A user who edits/reorders lines may leave stale numbers; strip is generic.
+    expect(stripEditorMarkers('1. x\n5. y\nz', 'number')).toBe('x\ny\nz');
+    expect(stripEditorMarkers('• keep\nno marker', 'bullet')).toBe('keep\nno marker');
+    expect(stripEditorMarkers('untouched', undefined)).toBe('untouched');
+  });
+});
+
+describe('text-format / multi-line bbox (item 4a)', () => {
+  test('a standalone multi-line text bbox grows with line count', () => {
+    const single = strokeBBox({
+      id: 't',
+      tool: 'text',
+      color: '#000',
+      fontSize: 20,
+      text: 'one',
+      x: 0,
+      y: 0,
+    });
+    const triple = strokeBBox({
+      id: 't',
+      tool: 'text',
+      color: '#000',
+      fontSize: 20,
+      text: 'one\ntwo\nthree',
+      x: 0,
+      y: 0,
+    });
+    expect(single?.h).toBeCloseTo(20 * 1.2, 4); // single-line keeps legacy height
+    expect(triple?.h).toBeGreaterThan((single?.h ?? 0) * 2); // ~3 lines tall
+    expect(splitTextLines('one\ntwo\nthree')).toEqual(['one', 'two', 'three']);
+  });
+});