@1agh/maude 0.28.0 → 0.29.0

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

@@ -14,12 +14,14 @@ import { GlobalRegistrator } from '@happy-dom/global-registrator';
 
 import {
   type ArrowStroke,
+  type ImageStroke,
+  type LinkStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
-  type TextStroke,
   strokesToSvg,
   svgToStrokes,
+  type TextStroke,
 } from '../annotations-layer.tsx';
 import { sanitizeAnnotationSvg } from '../api.ts';
 
@@ -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-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']);
+  });
+});

package/apps/studio/test/asset-api.test.ts

@@ -0,0 +1,149 @@
+// POST /_api/asset — Phase 23 content-addressed image upload (Task 5).
+//
+// Two layers:
+//   (1) the pure magic-byte sniff (`sniffImageType`) — the ONE gate that decides
+//       the stored type; a header lie / SVG is caught here;
+//   (2) the POST endpoint round-trip (boots a real server against a sandbox) —
+//       happy path for all four types, header-lie, oversize, SVG-reject,
+//       content-addressed dedupe, method gate.
+
+import { describe, expect, test } from 'bun:test';
+import { existsSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { sniffImageType } from '../api.ts';
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+// ── Minimal valid magic-byte headers (padded so length checks pass). ──────────
+const pad = (header: number[], len = 64): Uint8Array => {
+  const out = new Uint8Array(len);
+  out.set(header, 0);
+  return out;
+};
+const PNG = pad([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+const JPEG = pad([0xff, 0xd8, 0xff, 0xe0]);
+const GIF = pad([0x47, 0x49, 0x46, 0x38, 0x39, 0x61]); // "GIF89a"
+const WEBP = pad([0x52, 0x49, 0x46, 0x46, 0, 0, 0, 0, 0x57, 0x45, 0x42, 0x50]); // RIFF????WEBP
+const SVG = new TextEncoder().encode('<svg xmlns="http://www.w3.org/2000/svg"><script/></svg>');
+
+describe('asset-api / sniffImageType (the type gate)', () => {
+  test('recognizes each supported raster type by magic bytes', () => {
+    expect(sniffImageType(PNG)).toBe('png');
+    expect(sniffImageType(JPEG)).toBe('jpg');
+    expect(sniffImageType(GIF)).toBe('gif');
+    expect(sniffImageType(WEBP)).toBe('webp');
+  });
+
+  test('rejects SVG / text / empty / truncated headers', () => {
+    expect(sniffImageType(SVG)).toBeNull();
+    expect(sniffImageType(new TextEncoder().encode('not an image'))).toBeNull();
+    expect(sniffImageType(new Uint8Array(0))).toBeNull();
+    // Truncated PNG signature (only 4 of 8 bytes) must NOT match.
+    expect(sniffImageType(new Uint8Array([0x89, 0x50, 0x4e, 0x47]))).toBeNull();
+    // RIFF without the WEBP fourcc (e.g. a WAV) must NOT match.
+    expect(
+      sniffImageType(pad([0x52, 0x49, 0x46, 0x46, 0, 0, 0, 0, 0x57, 0x41, 0x56, 0x45]))
+    ).toBeNull();
+  });
+
+  test('content addresses the stored ext (a .png NAME with GIF bytes sniffs gif)', () => {
+    // The route names the file from sniffImageType(bytes), never the upload name.
+    expect(sniffImageType(GIF)).toBe('gif');
+  });
+});
+
+describe('asset-api / POST /_api/asset (endpoint round-trip)', () => {
+  async function withServer(
+    fn: (port: number, designRoot: string) => Promise<void>,
+    extraEnv?: Record<string, string>
+  ) {
+    const sandbox = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(sandbox.root, port, extraEnv);
+    try {
+      await fn(port, sandbox.designRoot);
+    } finally {
+      await killProc(proc);
+    }
+  }
+
+  const postAsset = (port: number, body: Uint8Array, contentType = 'application/octet-stream') =>
+    fetch(`http://localhost:${port}/_api/asset`, {
+      method: 'POST',
+      headers: { 'Content-Type': contentType },
+      body,
+    });
+
+  test('writes a valid PNG/JPEG/WEBP/GIF and returns its assets path', async () => {
+    await withServer(async (port, designRoot) => {
+      for (const [bytes, ext] of [
+        [PNG, 'png'],
+        [JPEG, 'jpg'],
+        [WEBP, 'webp'],
+        [GIF, 'gif'],
+      ] as const) {
+        const res = await postAsset(port, bytes);
+        expect(res.status).toBe(201);
+        const json = (await res.json()) as { path: string };
+        expect(json.path).toMatch(new RegExp(`^assets/[0-9a-f]{8}\\.${ext}$`));
+        expect(existsSync(join(designRoot, json.path))).toBe(true);
+      }
+    });
+  });
+
+  test('a header-lie (declared image/png, GIF bytes) is stored as .gif (sniff wins)', async () => {
+    await withServer(async (port) => {
+      const res = await postAsset(port, GIF, 'image/png');
+      expect(res.status).toBe(201);
+      const json = (await res.json()) as { path: string };
+      expect(json.path.endsWith('.gif')).toBe(true);
+    });
+  });
+
+  test('rejects an SVG upload (no script-bearing vector) with 415', async () => {
+    await withServer(async (port) => {
+      const res = await postAsset(port, SVG, 'image/svg+xml');
+      expect(res.status).toBe(415);
+    });
+  });
+
+  test('rejects an oversize body (> 10 MB) with 413', async () => {
+    await withServer(async (port) => {
+      const big = new Uint8Array(10 * 1024 * 1024 + 1);
+      big.set([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a], 0); // valid PNG header
+      const res = await postAsset(port, big);
+      expect(res.status).toBe(413);
+    });
+  });
+
+  test('identical bytes dedupe to ONE file (content-addressed; disk-fill guard)', async () => {
+    await withServer(async (port, designRoot) => {
+      const a = await (await postAsset(port, PNG)).json();
+      const b = await (await postAsset(port, PNG)).json();
+      expect(a.path).toBe(b.path);
+      const files = readdirSync(join(designRoot, 'assets'));
+      expect(files.length).toBe(1);
+    });
+  });
+
+  test('GET /_api/asset is method-not-allowed (write-only)', async () => {
+    await withServer(async (port) => {
+      const res = await fetch(`http://localhost:${port}/_api/asset`);
+      expect(res.status).toBe(405);
+    });
+  });
+
+  test('enforces the aggregate session write budget (disk-fill guard → 429)', async () => {
+    // Budget = 100 bytes; each padded magic-byte image is 64 bytes. The first
+    // DISTINCT write fits (64); a second distinct image (64) would total 128 >
+    // 100 → rejected. A dedupe hit (same bytes) is free and must NOT count.
+    await withServer(
+      async (port) => {
+        expect((await postAsset(port, PNG)).status).toBe(201); // 64 written
+        expect((await postAsset(port, PNG)).status).toBe(201); // dedupe — free
+        expect((await postAsset(port, JPEG)).status).toBe(429); // 64+64 > 100
+      },
+      { MAUDE_ASSET_SESSION_BUDGET: '100' }
+    );
+  });
+});

package/{plugins/design/dev-server → apps/studio}/test/boot-self-heal.test.ts

@@ -9,7 +9,7 @@ import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
 
-import { type SelfHealOptions, bootSelfHeal } from '../boot-self-heal.ts';
+import { bootSelfHeal, type SelfHealOptions } from '../boot-self-heal.ts';
 
 let TMP: string;