@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/test/timeline-snap.test.ts

@@ -0,0 +1,85 @@
+// timeline-snap.test.ts — DDR-150 Task 15 (Polish). The pure snap helpers behind
+// clip move/trim: a dragged edge lands on the nearest second-tick / neighbor edge
+// / playhead within a threshold, and Alt (threshold 0) turns it off.
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  computeSnapTargets,
+  snapFrame,
+  snapThresholdFrames,
+} from '../client/panels/timeline-snap.js';
+
+describe('computeSnapTargets', () => {
+  test('includes 0, comp end, second ticks, neighbor edges, playhead — excludes the moving clip', () => {
+    const targets = computeSnapTargets({
+      fps: 30,
+      totalFrames: 120,
+      clips: [
+        { from: 0, duration: 30 }, // clip 0 — the one being moved (excluded)
+        { from: 45, duration: 30 }, // clip 1 — edges 45 + 75 should appear
+      ],
+      movingIndex: 0,
+      playhead: 88,
+    });
+    expect(targets).toContain(0); // start
+    expect(targets).toContain(120); // comp end
+    expect(targets).toContain(30); // second tick (1s @ 30fps)
+    expect(targets).toContain(60); // second tick (2s)
+    expect(targets).toContain(90); // second tick (3s)
+    expect(targets).toContain(45); // neighbor clip start
+    expect(targets).toContain(75); // neighbor clip end
+    expect(targets).toContain(88); // playhead
+    // the MOVING clip's own edges (0 already a tick; its end 30 is also a tick,
+    // but must not be added as a *clip edge* — dedup keeps it single + sorted)
+    expect(targets).toEqual([...targets].sort((a, b) => a - b));
+    expect(new Set(targets).size).toBe(targets.length); // deduped
+  });
+
+  test('clamps targets to [0, totalFrames]', () => {
+    const targets = computeSnapTargets({
+      fps: 30,
+      totalFrames: 50,
+      clips: [{ from: 40, duration: 40 }], // end 80 is out of range → dropped
+      movingIndex: -1,
+      playhead: 200, // out of range → dropped
+    });
+    expect(Math.max(...targets)).toBeLessThanOrEqual(50);
+    expect(targets).not.toContain(80);
+    expect(targets).not.toContain(200);
+  });
+});
+
+describe('snapFrame', () => {
+  const targets = [0, 30, 45, 60, 90, 120];
+
+  test('snaps to the nearest target within threshold', () => {
+    expect(snapFrame(32, targets, 4)).toBe(30); // 2 away
+    expect(snapFrame(43, targets, 4)).toBe(45); // 2 away
+  });
+
+  test('leaves the candidate unchanged when nothing is in range', () => {
+    expect(snapFrame(52, targets, 4)).toBe(52); // nearest (45/60) is 7/8 away
+  });
+
+  test('picks the CLOSER of two in-range targets', () => {
+    // 47 is 2 from 45 and 13 from 60 → 45.
+    expect(snapFrame(47, targets, 20)).toBe(45);
+  });
+
+  test('threshold 0 (Alt override) never snaps', () => {
+    expect(snapFrame(30, targets, 0)).toBe(30);
+    expect(snapFrame(31, targets, 0)).toBe(31);
+  });
+});
+
+describe('snapThresholdFrames', () => {
+  test('converts an ~8px radius into frames by the row width', () => {
+    // 8px on a 800px row spanning 400 frames → ~4 frames.
+    expect(Math.round(snapThresholdFrames(800, 401, 8))).toBe(4);
+  });
+
+  test('degrades safely on a zero-width row', () => {
+    expect(Number.isFinite(snapThresholdFrames(0, 100))).toBe(true);
+  });
+});

package/apps/studio/test/tool-palette-insert-anchor.test.ts

@@ -0,0 +1,84 @@
+// tool-palette.tsx — Stage I3 tail (feature-element-editing-robustness). The
+// "+ Element" affordance's anchor resolver: appends relative to the ACTIVE
+// artboard's last existing child (mirrors the context-menu's element-relative
+// insert, since an artboard's own `<article data-dc-screen>` carries no
+// `data-cd-id` of its own — DCArtboard doesn't forward it to the DOM).
+//
+// Needs a live DOM (querySelector/:scope) — register happy-dom for this file
+// only, like canvas-hmr-runtime.test.tsx.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import { resolveInsertAnchor } from '../tool-palette.tsx';
+
+describe('tool-palette / resolveInsertAnchor', () => {
+  test('anchors on the last data-cd-id child of the CURRENT (aria-current) artboard', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1">
+        <div class="dc-artboard-body">
+          <div data-cd-id="11111111">one</div>
+          <div data-cd-id="22222222">two</div>
+        </div>
+      </article>
+      <article data-dc-screen="a2" aria-current="true">
+        <div class="dc-artboard-body">
+          <div data-cd-id="33333333">three</div>
+          <div data-cd-id="44444444">four</div>
+        </div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: '44444444', position: 'after' });
+  });
+
+  test('falls back to the FIRST artboard when none is aria-current', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1">
+        <div class="dc-artboard-body"><div data-cd-id="aaaaaaaa">x</div></div>
+      </article>
+      <article data-dc-screen="a2">
+        <div class="dc-artboard-body"><div data-cd-id="bbbbbbbb">y</div></div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: 'aaaaaaaa', position: 'after' });
+  });
+
+  test('skips a chrome direct-child with no data-cd-id, picking the last STAMPED one', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1" aria-current="true">
+        <div class="dc-artboard-body">
+          <div data-cd-id="11111111">one</div>
+          <div class="some-chrome-node">no cd-id</div>
+        </div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toEqual({ refId: '11111111', position: 'after' });
+  });
+
+  test('returns null for an EMPTY artboard (no data-cd-id child to anchor on)', () => {
+    document.body.innerHTML = `
+      <article data-dc-screen="a1" aria-current="true">
+        <div class="dc-artboard-body"></div>
+      </article>
+    `;
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+
+  test('returns null when there is no artboard at all', () => {
+    document.body.innerHTML = '<div>no artboards here</div>';
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+
+  test('returns null when the artboard has no .dc-artboard-body wrapper', () => {
+    document.body.innerHTML =
+      '<article data-dc-screen="a1"><div data-cd-id="11111111">x</div></article>';
+    expect(resolveInsertAnchor(document)).toBeNull();
+  });
+});

package/apps/studio/test/undo-sequence-byte-compare.test.ts

@@ -0,0 +1,211 @@
+// Stage K (Task K1, feature-element-editing-robustness) — the scripted
+// mixed-op undo sequence the plan's INV-1 asks for: resize → delete → insert
+// → move → spacing-drag → Cmd+Z ×5 → canvas byte-identical to the start.
+//
+// Drives the SAME HTTP routes the client's undo mechanisms call:
+//   - CSS-shaped ops (resize/move/spacing) undo by re-POSTing `/_api/edit-css`
+//     with the pre-edit value — exactly what `recordSourceEdit` +
+//     `commands/edit-source-command.ts`'s `undo()` do (do/undo are both a
+//     single `applyFn` call with a different `value`, so there is no
+//     separate "revert" endpoint to test — the HTTP-level round-trip IS the
+//     undo mechanism).
+//   - Structural ops (delete/insert) undo via `/_api/reorder-revert`, the
+//     whole-file seq-log swap Stage I reuses from Phase 12.1's reorder undo
+//     (`commands/reorder-command.ts`) rather than a bespoke command per op.
+//
+// `/_api/reorder-revert` 409s if the file drifted since the logged seq (its
+// own doc comment: "refuses 409 when the canvas changed since") — so the 5
+// undos below MUST run in strict reverse (LIFO) order, exactly like a real
+// Cmd+Z stack, or the structural reverts would fail closed. That ordering
+// constraint is itself part of what this test proves.
+
+import { describe, expect, test } from 'bun:test';
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+// Style values use DOUBLE quotes throughout — matching this codebase's own
+// authored-JSX convention (canvas-lib.tsx, scaffold-design.ts): editCss's
+// underlying write is a JSON.stringify literal, which is always
+// double-quoted regardless of the original source's quote style. A
+// single-quoted fixture would make a value round-trip only VALUE-identical,
+// not byte-identical (a cosmetic quote-style delta, not a real undo gap) —
+// double-quoting the fixture up front keeps this test's byte-compare
+// meaningful instead of tripping over that unrelated cosmetic mismatch.
+const CANVAS_SRC = `export default function Seq() {
+  return (
+    <DesignCanvas>
+      <DCArtboard id="home" label="Home" width={1440} height={1024}>
+        <figure style={{ position: "absolute", left: "20px", top: "20px", width: "100px", height: "60px" }}>Box</figure>
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+        <section style={{ display: "flex", paddingLeft: "8px" }}>
+          <span>x</span>
+          <span>y</span>
+        </section>
+      </DCArtboard>
+    </DesignCanvas>
+  );
+}
+`;
+
+interface LocatorEntry {
+  line: number;
+  jsxPath: string[];
+}
+
+async function locatorMap(main: string, designRoot: string): Promise<Record<string, LocatorEntry>> {
+  const r = await fetch(`${main}/.design/ui/Seq.tsx`, { signal: AbortSignal.timeout(2000) });
+  expect(r.status).toBe(200);
+  const locator = JSON.parse(readFileSync(join(designRoot, '_locator.json'), 'utf8'));
+  return locator['ui/Seq'] as Record<string, LocatorEntry>;
+}
+
+/** First (only, in this fixture) data-cd-id whose JSX tag is `tag`. */
+function idOf(map: Record<string, LocatorEntry>, tag: string): string {
+  const hit = Object.entries(map).find(([, e]) => e.jsxPath[e.jsxPath.length - 1] === tag);
+  expect(hit).toBeDefined();
+  return hit?.[0] as string;
+}
+
+function idsByTag(map: Record<string, LocatorEntry>, tag: string): string[] {
+  return Object.entries(map)
+    .filter(([, e]) => e.jsxPath[e.jsxPath.length - 1] === tag)
+    .sort((a, b) => a[1].line - b[1].line)
+    .map(([id]) => id);
+}
+
+async function editCss(
+  main: string,
+  body: { canvas: string; id: string; property: string; value: string }
+): Promise<{ ok: boolean; error?: string }> {
+  const res = await fetch(`${main}/_api/edit-css`, {
+    method: 'POST',
+    body: JSON.stringify(body),
+    signal: AbortSignal.timeout(2000),
+  });
+  return (await res.json()) as { ok: boolean; error?: string };
+}
+
+describe('Stage K1 — mixed resize/delete/insert/move/spacing undo sequence', () => {
+  test('5 undos (LIFO) return the canvas byte-identical to its start', async () => {
+    const { root, designRoot } = makeSandbox();
+    mkdirSync(join(designRoot, 'ui'), { recursive: true });
+    writeFileSync(join(designRoot, 'ui', 'Seq.tsx'), CANVAS_SRC);
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    const main = `http://localhost:${port}`;
+    const canvasPath = join(designRoot, 'ui', 'Seq.tsx');
+    const original = readFileSync(canvasPath, 'utf8');
+    expect(original).toBe(CANVAS_SRC);
+
+    try {
+      // ── 1. resize (CSS-shaped) ──────────────────────────────────────────
+      let map = await locatorMap(main, designRoot);
+      const boxId = idOf(map, 'figure');
+      const resize = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxId,
+        property: 'width',
+        value: '140px',
+      });
+      expect(resize.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('width: "140px"');
+
+      // ── 2. delete (structural) ──────────────────────────────────────────
+      map = await locatorMap(main, designRoot);
+      const [aId, bId] = idsByTag(map, 'div');
+      const del = await fetch(`${main}/_api/delete-element`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', id: bId }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(del.status).toBe(200);
+      const delJson = (await del.json()) as { ok: boolean; seq: number };
+      expect(delJson.ok).toBe(true);
+      expect(
+        [...readFileSync(canvasPath, 'utf8').matchAll(/<div>([ABC])</g)].map((m) => m[1])
+      ).toEqual(['A', 'C']);
+
+      // ── 3. insert (structural) ──────────────────────────────────────────
+      const ins = await fetch(`${main}/_api/insert-element`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', refId: aId, position: 'after', kind: 'div' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(ins.status).toBe(200);
+      const insJson = (await ins.json()) as { ok: boolean; seq: number; newId: string | null };
+      expect(insJson.ok).toBe(true);
+
+      // ── 4. move (CSS-shaped, same box element as step 1) ────────────────
+      map = await locatorMap(main, designRoot);
+      const boxIdAfterStructural = idOf(map, 'figure');
+      const move = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxIdAfterStructural,
+        property: 'left',
+        value: '60px',
+      });
+      expect(move.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('left: "60px"');
+
+      // ── 5. spacing-drag (CSS-shaped, padding-left) ──────────────────────
+      map = await locatorMap(main, designRoot);
+      const sectionId = idOf(map, 'section');
+      const spacing = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: sectionId,
+        property: 'padding-left',
+        value: '24px',
+      });
+      expect(spacing.ok).toBe(true);
+      expect(readFileSync(canvasPath, 'utf8')).toContain('paddingLeft: "24px"');
+
+      // ── Cmd+Z ×5 — strict LIFO ───────────────────────────────────────────
+      const undo5 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: sectionId,
+        property: 'padding-left',
+        value: '8px',
+      });
+      expect(undo5.ok).toBe(true);
+
+      const undo4 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxIdAfterStructural,
+        property: 'left',
+        value: '20px',
+      });
+      expect(undo4.ok).toBe(true);
+
+      const undo3 = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', seq: insJson.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(undo3.status).toBe(200);
+
+      const undo2 = await fetch(`${main}/_api/reorder-revert`, {
+        method: 'POST',
+        body: JSON.stringify({ canvas: 'ui/Seq', seq: delJson.seq, dir: 'undo' }),
+        signal: AbortSignal.timeout(2000),
+      });
+      expect(undo2.status).toBe(200);
+
+      const undo1 = await editCss(main, {
+        canvas: 'ui/Seq',
+        id: boxId,
+        property: 'width',
+        value: '100px',
+      });
+      expect(undo1.ok).toBe(true);
+
+      // ── Assert: byte-identical to the pre-sequence source ───────────────
+      expect(readFileSync(canvasPath, 'utf8')).toBe(original);
+    } finally {
+      await killProc(proc);
+    }
+  });
+});

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

@@ -0,0 +1,163 @@
+// POST /_api/asset — DDR-148 video/audio widening of the Phase 23 asset route.
+//
+// Two layers (mirroring asset-api.test.ts):
+//   (1) the pure magic-byte sniff (`sniffAssetType`) — the ONE gate that decides
+//       the stored type AND category (→ which cap applies); a header lie / SVG /
+//       script is caught here;
+//   (2) the streaming POST endpoint (boots a real server) — video/audio happy
+//       path, per-category cap (image 10 MB stays tight; video honors the
+//       MAUDE_ASSET_MAX_VIDEO_BYTES override), content-addressed dedupe.
+
+import { describe, expect, test } from 'bun:test';
+import { existsSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { assetCapForCategory, sniffAssetType } from '../api.ts';
+import { bootServer, killProc, makeSandbox, nextPort } from './_helpers.ts';
+
+// ── Minimal valid magic-byte headers (padded so the ≥12-byte sniff has data). ──
+const pad = (header: number[], len = 64): Uint8Array => {
+  const out = new Uint8Array(len);
+  out.set(header, 0);
+  return out;
+};
+const ascii = (s: string): number[] => [...s].map((c) => c.charCodeAt(0));
+
+const MP4 = pad([0, 0, 0, 0x18, ...ascii('ftyp'), ...ascii('isom')]);
+const MOV = pad([0, 0, 0, 0x14, ...ascii('ftyp'), ...ascii('qt  ')]);
+const M4A = pad([0, 0, 0, 0x18, ...ascii('ftyp'), ...ascii('M4A ')]);
+const WEBM = pad([0x1a, 0x45, 0xdf, 0xa3]);
+const MP3_ID3 = pad([...ascii('ID3'), 0x03, 0x00]);
+const MP3_SYNC = pad([0xff, 0xfb, 0x90, 0x00]);
+const WAV = pad([...ascii('RIFF'), 0, 0, 0, 0, ...ascii('WAVE')]);
+const PNG = pad([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+const SVG = new TextEncoder().encode('<svg xmlns="http://www.w3.org/2000/svg"><script/></svg>');
+
+describe('video-asset / sniffAssetType (the widened type gate)', () => {
+  test('recognizes video containers by magic bytes', () => {
+    expect(sniffAssetType(MP4)).toEqual({ ext: 'mp4', category: 'video' });
+    expect(sniffAssetType(MOV)).toEqual({ ext: 'mov', category: 'video' });
+    expect(sniffAssetType(WEBM)).toEqual({ ext: 'webm', category: 'video' });
+  });
+
+  test('recognizes audio containers by magic bytes', () => {
+    expect(sniffAssetType(M4A)).toEqual({ ext: 'm4a', category: 'audio' });
+    expect(sniffAssetType(MP3_ID3)).toEqual({ ext: 'mp3', category: 'audio' });
+    expect(sniffAssetType(MP3_SYNC)).toEqual({ ext: 'mp3', category: 'audio' });
+    expect(sniffAssetType(WAV)).toEqual({ ext: 'wav', category: 'audio' });
+  });
+
+  test('images still resolve through the same superset sniff', () => {
+    expect(sniffAssetType(PNG)).toEqual({ ext: 'png', category: 'image' });
+  });
+
+  test('rejects SVG / script / text / empty (no script-bearing vector rides in)', () => {
+    expect(sniffAssetType(SVG)).toBeNull();
+    expect(sniffAssetType(new TextEncoder().encode('not media at all'))).toBeNull();
+    expect(sniffAssetType(new Uint8Array(0))).toBeNull();
+    // "RIFF" without "WAVE" (or "WEBP") must NOT match a media/image type.
+    expect(sniffAssetType(pad([...ascii('RIFF'), 0, 0, 0, 0, ...ascii('AVI ')]))).toBeNull();
+  });
+
+  test('caps: image 10 MB tight, video/audio share the larger cap', () => {
+    expect(assetCapForCategory('image')).toBe(10 * 1024 * 1024);
+    expect(assetCapForCategory('video')).toBeGreaterThan(assetCapForCategory('image'));
+    expect(assetCapForCategory('audio')).toBe(assetCapForCategory('video'));
+  });
+});
+
+describe('video-asset / POST /_api/asset (streaming endpoint)', () => {
+  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) =>
+    fetch(`http://localhost:${port}/_api/asset`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/octet-stream' },
+      body,
+    });
+
+  test('writes valid mp4/mov/webm/mp3/wav/m4a with the sniffed ext', async () => {
+    await withServer(async (port, designRoot) => {
+      for (const [bytes, ext] of [
+        [MP4, 'mp4'],
+        [MOV, 'mov'],
+        [WEBM, 'webm'],
+        [MP3_ID3, 'mp3'],
+        [WAV, 'wav'],
+        [M4A, 'm4a'],
+      ] 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('bytes decide the ext, never the (octet-stream) upload header', async () => {
+    await withServer(async (port) => {
+      const res = await postAsset(port, MP4);
+      expect(res.status).toBe(201);
+      const json = (await res.json()) as { path: string };
+      expect(json.path.endsWith('.mp4')).toBe(true);
+    });
+  });
+
+  test('rejects an SVG upload (script-bearing) with 415 even on the media route', async () => {
+    await withServer(async (port) => {
+      expect((await postAsset(port, SVG)).status).toBe(415);
+    });
+  });
+
+  test('honors the MAUDE_ASSET_MAX_VIDEO_BYTES per-file cap (streamed → 413)', async () => {
+    await withServer(
+      async (port) => {
+        const big = new Uint8Array(2048);
+        big.set([0, 0, 0, 0x18, ...ascii('ftyp'), ...ascii('isom')], 0); // valid mp4 head
+        expect((await postAsset(port, big)).status).toBe(413);
+        // A small mp4 under the cap still writes.
+        expect((await postAsset(port, MP4)).status).toBe(201);
+      },
+      { MAUDE_ASSET_MAX_VIDEO_BYTES: '1024' }
+    );
+  });
+
+  test('identical media bytes dedupe to ONE content-addressed file', async () => {
+    await withServer(async (port, designRoot) => {
+      const a = await (await postAsset(port, MP4)).json();
+      const b = await (await postAsset(port, MP4)).json();
+      expect(a.path).toBe(b.path);
+      const files = readdirSync(join(designRoot, 'assets')).filter((f) => !f.startsWith('.tmp-'));
+      expect(files.length).toBe(1);
+    });
+  });
+
+  test('a rejected oversize upload leaves NO temp file behind (clean disk)', async () => {
+    await withServer(
+      async (port, designRoot) => {
+        const big = new Uint8Array(2048);
+        big.set([0, 0, 0, 0x18, ...ascii('ftyp'), ...ascii('isom')], 0);
+        expect((await postAsset(port, big)).status).toBe(413);
+        const assetsDir = join(designRoot, 'assets');
+        const leftover = existsSync(assetsDir)
+          ? readdirSync(assetsDir).filter((f) => f.startsWith('.tmp-'))
+          : [];
+        expect(leftover).toEqual([]);
+      },
+      { MAUDE_ASSET_MAX_VIDEO_BYTES: '1024' }
+    );
+  });
+});

package/apps/studio/test/video-comp-fixture.test.ts

@@ -0,0 +1,50 @@
+// video-comp-fixture — DDR-148 end-to-end build guard (CI-safe, no browser).
+//
+// The heavy render/scrub/export path is verified live via agent-browser + the
+// determinism smoke; here we lock the CI-cheap invariant the whole feature
+// rests on: a real video-comp canvas (the canonical fixture) BUILDS through the
+// production canvas pipeline (buildCanvasModule) with `remotion`,
+// `@remotion/transitions`, and the `fade` presentation externalised to the
+// importmap (RUNTIME_PACKAGES) — never inlined (which would resolve against a
+// non-existent user node_modules on an npm/marketplace install) — and with the
+// <VideoComp> wrapper inlined from @maude/canvas-lib.
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+
+import { buildCanvasModule } from '../canvas-build.ts';
+
+const FIXTURE = new URL('./fixtures/video-comp-fixture.tsx', import.meta.url).pathname;
+
+describe('video-comp fixture — production build guard', () => {
+  test('builds through buildCanvasModule with the Remotion runtime externalised', async () => {
+    const src = readFileSync(FIXTURE, 'utf8');
+    const r = await buildCanvasModule(FIXTURE, src);
+    expect(r.js.length).toBeGreaterThan(1000);
+
+    const externals = new Set(
+      [...r.js.matchAll(/from\s*["']([^"'.][^"']*)["']/g)].map((m) => m[1])
+    );
+    // The comp's Remotion imports MUST stay external (importmap → pre-built
+    // /_canvas-runtime bundles), or an end-user install can't resolve them.
+    expect(externals.has('remotion')).toBe(true);
+    expect(externals.has('@remotion/transitions')).toBe(true);
+    expect(externals.has('@remotion/transitions/fade')).toBe(true);
+    expect(externals.has('react')).toBe(true);
+
+    // <VideoComp> (+ the seek-bridge) is inlined from @maude/canvas-lib.
+    expect(r.js).toContain('VideoComp');
+    expect(r.js).toContain('__maude_seek__');
+  });
+
+  test('every Remotion specifier the fixture imports is a known RUNTIME_PACKAGE', async () => {
+    const { RUNTIME_PACKAGES } = await import('../runtime-bundle.ts');
+    const known = new Set<string>(RUNTIME_PACKAGES);
+    const src = readFileSync(FIXTURE, 'utf8');
+    const imported = [...src.matchAll(/from\s*["'](@?remotion[^"']*)["']/g)].map((m) => m[1]);
+    expect(imported.length).toBeGreaterThan(0);
+    for (const spec of imported) {
+      expect(known.has(spec)).toBe(true);
+    }
+  });
+});