@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/test/annotations-roundtrip.test.ts

@@ -16,6 +16,7 @@ import {
   type ArrowStroke,
   type ImageStroke,
   type LinkStroke,
+  type MediaRefStroke,
   type RectStroke,
   type StickyStroke,
   type Stroke,
@@ -314,6 +315,52 @@ describe('annotations round-trip / link chip (Phase 23)', () => {
   });
 });
 
+describe('annotations round-trip / media-reference chip (DDR-150 P4)', () => {
+  const ref: MediaRefStroke = {
+    id: 'mr1',
+    tool: 'mediaref',
+    x: 120,
+    y: 90,
+    w: 240,
+    h: 72,
+    src: 'assets/9f8e7d6c.mp4',
+    mediaKind: 'video',
+    title: 'b-roll-sunset.mp4',
+  };
+
+  test('mediaref survives serialize → parse with all fields intact', () => {
+    const [parsed] = svgToStrokes(strokesToSvg([ref])) as MediaRefStroke[];
+    expect(parsed).toEqual(ref);
+  });
+
+  test('mediaref persists data-src (the agent enumerates refs off it), never a <Video>', () => {
+    const svg = strokesToSvg([ref]);
+    expect(svg).toContain('data-src="assets/9f8e7d6c.mp4"');
+    expect(svg).toContain('data-media-kind="video"');
+    expect(svg).not.toContain('<Video');
+    expect(svg).not.toContain('<video');
+  });
+
+  test('mediaref serialize → parse is idempotent', () => {
+    const once = strokesToSvg([{ ...ref, mediaKind: 'audio', src: 'assets/track.mp3' }]);
+    expect(reparse(once)).toBe(once);
+  });
+
+  test('mediaref SVG survives sanitizeAnnotationSvg byte-intact (PUT-path)', () => {
+    const svg = strokesToSvg([ref]);
+    expect(sanitizeAnnotationSvg(svg)).toBe(svg);
+  });
+
+  test('a data-src with a traversal/scheme is dropped to an inert empty ref', () => {
+    const svg =
+      '<svg xmlns="http://www.w3.org/2000/svg" data-mdcc-annotations="1">' +
+      '<g data-id="mr2" data-tool="mediaref" data-src="../../etc/passwd" data-media-kind="video" data-title="x">' +
+      '<rect x="0" y="0" width="240" height="72" rx="8" ry="8"/></g></svg>';
+    const [parsed] = svgToStrokes(svg) as MediaRefStroke[];
+    expect(parsed?.src).toBe('');
+  });
+});
+
 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/camera-reveal.test.tsx

@@ -0,0 +1,173 @@
+// camera-reveal — Task A3 (feature-element-editing-robustness), Stage A.
+//
+// Regression guard for Bugs A + B: a `select-by-id` reveal must pan the camera
+// (the `.dc-world` transform, via the viewport controller) and MUST NOT scroll
+// the overflow:hidden `.dc-canvas` / `.dc-artboard-body` clip layers — host
+// scroll is what desynced the camera model (phantom right strip + pan reset
+// after an absolute-element move).
+//
+// canvas-shell.tsx pulls in a React/DOM dependency graph, so we register
+// happy-dom for this file (like canvas-hmr-runtime.test.tsx) before importing.
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+beforeAll(() => {
+  GlobalRegistrator.register();
+});
+afterAll(() => {
+  GlobalRegistrator.unregister();
+});
+
+import type { ViewportControllerHandle } from '../canvas-lib.tsx';
+import { REVEAL_MARGIN_PX, revealAxisDelta, revealElementViaCamera } from '../canvas-shell.tsx';
+
+const M = REVEAL_MARGIN_PX;
+
+describe('revealAxisDelta — minimal 1-axis camera pan', () => {
+  // Viewport spans [0, 1000]; usable band is [M, 1000 - M].
+  const V0 = 0;
+  const V1 = 1000;
+
+  test('fully visible → no pan', () => {
+    expect(revealAxisDelta(200, 400, V0, V1, M)).toBe(0);
+  });
+
+  test('flush at the inset band edges → no pan', () => {
+    expect(revealAxisDelta(M, V1 - M, V0, V1, M)).toBe(0);
+  });
+
+  test('off the start (left/top) edge → positive delta brings the start in', () => {
+    // element [-50, 100]; start (-50) is left of the inset band start (M=40).
+    const d = revealAxisDelta(-50, 100, V0, V1, M);
+    expect(d).toBe(M - -50); // vs - elStart = 40 - (-50) = 90
+    expect(d).toBeGreaterThan(0);
+  });
+
+  test('off the end (right/bottom) edge → negative delta brings the end in', () => {
+    // element [900, 1100]; end (1100) is past the inset band end (960).
+    const d = revealAxisDelta(900, 1100, V0, V1, M);
+    expect(d).toBe(V1 - M - 1100); // ve - elEnd = 960 - 1100 = -140
+    expect(d).toBeLessThan(0);
+  });
+
+  test('element wider than the viewport → no pan (matches scrollIntoView nearest)', () => {
+    expect(revealAxisDelta(-200, 1200, V0, V1, M)).toBe(0);
+  });
+});
+
+// Minimal fake controller — only `panBy` is exercised; the rest satisfy the type.
+function fakeController(): {
+  handle: ViewportControllerHandle;
+  calls: Array<[number, number]>;
+} {
+  const calls: Array<[number, number]> = [];
+  const noop = () => {};
+  const handle: ViewportControllerHandle = {
+    viewport: { x: 0, y: 0, zoom: 1 },
+    setViewport: noop,
+    panBy: (dx, dy) => calls.push([dx, dy]),
+    zoomAt: noop,
+    fit: noop,
+    reset: noop,
+    zoomIn: noop,
+    zoomOut: noop,
+    jumpTo: noop,
+    animateTo: noop,
+    isInteracting: false,
+  };
+  return { handle, calls };
+}
+
+function elWithRect(rect: Partial<DOMRect>): HTMLElement {
+  const el = document.createElement('div');
+  const r = {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 0,
+    height: 0,
+    x: 0,
+    y: 0,
+    ...rect,
+  } as DOMRect;
+  el.getBoundingClientRect = () => r;
+  return el;
+}
+
+describe('revealElementViaCamera — pans the controller, never host scroll', () => {
+  test('off-screen element pans via panBy and leaves host scroll at 0', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    // Target sits past the right edge — the exact Bug B repro (overflowing element).
+    const target = elWithRect({
+      left: 1100,
+      top: 100,
+      right: 1300,
+      bottom: 200,
+      width: 200,
+      height: 100,
+    });
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(1);
+    const [dx, dy] = calls[0];
+    expect(dx).toBeLessThan(0); // pan world left to reveal the right-side element
+    expect(dy).toBe(0); // vertically already in view
+    // The invariant: no host scroll was touched.
+    expect(host.scrollLeft).toBe(0);
+    expect(host.scrollTop).toBe(0);
+  });
+
+  test('already-visible element → no pan at all', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    const target = elWithRect({
+      left: 300,
+      top: 300,
+      right: 500,
+      bottom: 400,
+      width: 200,
+      height: 100,
+    });
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(0);
+    expect(host.scrollLeft).toBe(0);
+    expect(host.scrollTop).toBe(0);
+  });
+
+  test('detached element (zero box) → no pan', () => {
+    const host = elWithRect({
+      left: 0,
+      top: 0,
+      right: 1000,
+      bottom: 800,
+      width: 1000,
+      height: 800,
+    });
+    const target = elWithRect({});
+    const { handle, calls } = fakeController();
+
+    revealElementViaCamera(host, target, handle);
+
+    expect(calls.length).toBe(0);
+  });
+});

package/apps/studio/test/canvas-create-api.test.ts

@@ -122,6 +122,82 @@ describe('/_api/canvas — POST round-trip', () => {
     }
   });
 
+  test('assembles a video-comp (kind: video-comp) from dropped clips (DDR-150 P4 Task 12)', async () => {
+    const { root, designRoot } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: 'My Reel',
+          kind: 'video-comp',
+          fps: 30,
+          clips: [
+            { src: 'assets/a.mp4', mediaKind: 'video', durationInFrames: 60 },
+            { src: 'assets/b.mp4', mediaKind: 'video' },
+            { src: 'assets/music.mp3', mediaKind: 'audio' },
+          ],
+        }),
+      });
+      expect(r.status).toBe(201);
+      const j = (await r.json()) as { ok: boolean; rel: string };
+      expect(j.ok).toBe(true);
+      const tsx = readFileSync(join(designRoot, 'ui', 'My Reel.tsx'), 'utf8');
+      expect(tsx).toContain('<VideoComp component={Comp}');
+      expect(tsx).toContain('<OffthreadVideo src="assets/a.mp4" />');
+      expect(tsx).toContain('<Audio src="assets/music.mp3" />');
+      expect(tsx).toContain('name="clip-1"');
+      const m = JSON.parse(readFileSync(join(designRoot, 'ui', 'My Reel.meta.json'), 'utf8'));
+      expect(m.kind).toBe('video-comp');
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a video-comp with an empty clips[] (400) and a traversal src (400)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const empty = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: 'Empty', kind: 'video-comp', clips: [] }),
+      });
+      expect(empty.status).toBe(400);
+      const bad = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: 'Bad',
+          kind: 'video-comp',
+          clips: [{ src: '../../etc/passwd', mediaKind: 'video' }],
+        }),
+      });
+      expect(bad.status).toBe(400);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
+  test('rejects a cross-origin create (CSRF guard on /_api/canvas — DDR-150 P4)', async () => {
+    const { root } = makeSandbox();
+    const port = nextPort();
+    const proc = await bootServer(root, port);
+    try {
+      const r = await fetch(`http://localhost:${port}/_api/canvas`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Origin: 'http://evil.example' },
+        body: JSON.stringify({ name: 'Forged', kind: 'brief-board' }),
+      });
+      expect(r.status).toBe(403);
+    } finally {
+      await killProc(proc);
+    }
+  });
+
   test('create + delete emit canvas-list-update over the inspector WS (Phase 30)', async () => {
     const { root } = makeSandbox();
     const port = nextPort();

package/apps/studio/test/canvas-edit.test.ts

@@ -123,6 +123,59 @@ describe('canvas-edit / applyEdit', () => {
     expect(out.source).toContain('<div style={{ padding: 14 }}>x</div>');
   });
 
+  test('retime: bumps a referenced const so a derived total moves in lock-step (DDR-148)', async () => {
+    const { applyRetimeSequence } = await import('../canvas-edit.ts');
+    const src = [
+      'const A = 66;',
+      'const B = 62;',
+      'const XF = 16;',
+      'const TOTAL = A + B - XF;',
+      'function Movie(){ return (<TransitionSeries>',
+      '  <TransitionSeries.Sequence durationInFrames={A}><Intro/></TransitionSeries.Sequence>',
+      '  <TransitionSeries.Transition timing={linearTiming({ durationInFrames: XF })} />',
+      '  <TransitionSeries.Sequence durationInFrames={B}><Payoff/></TransitionSeries.Sequence>',
+      '</TransitionSeries>); }',
+    ].join('\n');
+    const r0 = applyRetimeSequence(CANVAS, src, 0, { durationInFrames: 80 });
+    expect(r0.source).toContain('const A = 80'); // const edited, not the literal
+    expect(r0.source).toContain('const TOTAL = A + B - XF'); // derived total intact → auto-updates
+    const r1 = applyRetimeSequence(CANVAS, r0.source, 1, { durationInFrames: 90 });
+    expect(r1.source).toContain('const B = 90');
+  });
+
+  test('retime: edits a literal in place + supports from', async () => {
+    const { applyRetimeSequence } = await import('../canvas-edit.ts');
+    const src =
+      'function C(){ return <Sequence from={10} durationInFrames={40}><Foo/></Sequence>; }';
+    const r = applyRetimeSequence(CANVAS, src, 0, { from: 20, durationInFrames: 55 });
+    expect(r.source).toContain('from={20}');
+    expect(r.source).toContain('durationInFrames={55}');
+  });
+
+  test('retime: an out-of-range sequence index throws', async () => {
+    const { applyRetimeSequence, CanvasEditError } = await import('../canvas-edit.ts');
+    const src = 'function C(){ return <Sequence durationInFrames={40}><Foo/></Sequence>; }';
+    expect(() => applyRetimeSequence(CANVAS, src, 5, { durationInFrames: 10 })).toThrow(
+      CanvasEditError
+    );
+  });
+
+  test('inserts into a style object with a TRAILING comma without a double comma (DDR-148 #4)', () => {
+    // A frame-driven inline style commonly ends the last property with a
+    // trailing comma. Appending must NOT produce `opacity: o, , color: …`
+    // (a syntax error that made the canvas render the OLD source on replay).
+    const src =
+      'function Demo() {\n  const o = 1;\n  return <div style={{ fontSize: 12, opacity: o, }}>x</div>;\n}';
+    const ids = idsOf(src);
+    const id = ids.div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', "'#d48917'");
+    expect(out.source).toContain("color: '#d48917'");
+    expect(out.source).not.toMatch(/,\s*,/); // no double comma
+    // And it must still parse.
+    const reparse = applyEdit(CANVAS, out.source, id, 'style.fontSize', '13');
+    expect(reparse.source).toContain('fontSize: 13');
+  });
+
   test('throws CanvasEditError when id is not found', () => {
     const src = 'function Demo() { return <div>x</div>; }';
     expect(() => applyEdit(CANVAS, src, 'deadbeef', 'className', 'x')).toThrow(CanvasEditError);
@@ -161,6 +214,56 @@ describe('canvas-edit / applyEdit', () => {
   });
 });
 
+describe('canvas-edit / applyEdit — Stage F2 media src-replace', () => {
+  test('replaces a literal <img src="…"> — the ordinary "Replace image…" case', () => {
+    const src = `function Demo() { return <img src="assets/old.png" alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    const out = applyEdit(CANVAS, src, id, 'src', 'assets/12345678.png');
+    expect(out.source).toBe(
+      `function Demo() { return <img src="assets/12345678.png" alt="x" />; }`
+    );
+  });
+
+  test('replaces a trivial {"literal"} src expression', () => {
+    const src = `function Demo() { return <img src={"assets/old.png"} alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    const out = applyEdit(CANVAS, src, id, 'src', 'assets/new.png');
+    expect(out.source).toContain('src="assets/new.png"');
+  });
+
+  test('refuses (does not corrupt) a src bound to a JS expression', () => {
+    // src={imageUrl} is a BINDING, not a static value — silently overwriting it
+    // would discard the binding. This is the exact gotcha the plan's Task F2
+    // flags for "Replace image…"; the context-menu comment already assumed
+    // this refusal existed (canvas-shell.tsx) — it didn't, until this fix.
+    const src = `function Demo({ imageUrl }) { return <img src={imageUrl} alt="x" />; }`;
+    const ids = idsOf(src);
+    const id = ids.img as string;
+    expect(() => applyEdit(CANVAS, src, id, 'src', 'assets/new.png')).toThrow(
+      /bound to a JS expression/
+    );
+    // Also refuses a member-expression / template-literal binding, not just a
+    // bare identifier.
+    const src2 = `function Demo({ item }) { return <img src={item.url} alt="x" />; }`;
+    const ids2 = idsOf(src2);
+    expect(() => applyEdit(CANVAS, src2, ids2.img as string, 'src', 'assets/new.png')).toThrow(
+      /bound to a JS expression/
+    );
+  });
+
+  test('a non-src attribute expression binding is unaffected (existing overwrite behavior)', () => {
+    // The refusal is scoped to `src` (the plan's stated gotcha) — an
+    // expression-bound `title` or similar still overwrites as before; widening
+    // the refusal to every attribute is a bigger, separate change.
+    const src = `function Demo({ label }) { return <button title={label}>x</button>; }`;
+    const ids = idsOf(src);
+    const out = applyEdit(CANVAS, src, ids.button as string, 'title', 'Fixed label');
+    expect(out.source).toContain('title="Fixed label"');
+  });
+});
+
 describe('canvas-edit / applyRemove (reset)', () => {
   test('removes one style key, leaving the siblings + object intact', () => {
     const src = 'function Demo() { return <div style={{ padding: 8, margin: 4 }}>x</div>; }';
@@ -290,6 +393,30 @@ describe('canvas-edit / applyTextEdit', () => {
     const src = `function Demo() { return <button>Save</button>; }`;
     expect(() => applyTextEdit(CANVAS, src, 'deadbeef', 'x')).toThrow(CanvasEditError);
   });
+
+  // DDR-150 P1 — widen the editable set to a single `{'string literal'}` child.
+  test('edits a single string-literal expression child', () => {
+    const src = `function Demo() { return <h1>{'Old Title'}</h1>; }`;
+    const id = idsOf(src).h1 as string;
+    const out = applyTextEdit(CANVAS, src, id, 'New Title');
+    expect(out.source).toBe(`function Demo() { return <h1>{"New Title"}</h1>; }`);
+  });
+
+  test('string-literal rewrite is inert — quotes / braces / markup cannot escape the JS string', () => {
+    const src = `function Demo() { return <h1>{"x"}</h1>; }`;
+    const id = idsOf(src).h1 as string;
+    const out = applyTextEdit(CANVAS, src, id, 'say "hi" {expr} <b>');
+    // JSON.stringify escapes the double-quotes; {expr} / <b> stay INSIDE the JS
+    // string literal, so they never become a JSX expression or markup.
+    expect(out.source).toContain('say \\"hi\\"');
+    expect(() => transpileCanvasSource(CANVAS, out.source)).not.toThrow();
+  });
+
+  test('still refuses a dynamic {identifier} child (routes to /design:edit)', () => {
+    const src = 'function Demo() { const title = "x"; return <h1>{title}</h1>; }';
+    const id = idsOf(src).h1 as string;
+    expect(() => applyTextEdit(CANVAS, src, id, 'x')).toThrow(CanvasEditError);
+  });
 });
 
 // Phase 12 (DDR-103) — the `style.<prop>` write path the CSS knobs ride
@@ -316,4 +443,17 @@ describe('canvas-edit / applyEdit style.<prop> (CSS-knob path)', () => {
     const out = applyEdit(CANVAS, src, id, 'style.padding', '"var(--space-3)"');
     expect(out.source).toContain('style={{ padding: "var(--space-3)" }}');
   });
+
+  // DDR-150 P1 — the exact video-comp shape: a var-valued prop ending in a
+  // trailing comma. Unconditionally prepending ", " produced `opacity: o, ,
+  // color` — a syntax error that left the Player rendering stale source (the
+  // "my CSS edit resets on replay" bug). Guarded by editStyleProp's between-scan.
+  test('appends onto a frame-driven inline style ending in a trailing comma (no double comma)', () => {
+    const src = `function Demo() { const o = 1; return <div style={{ opacity: o, }}>x</div>; }`;
+    const id = idsOf(src).div as string;
+    const out = applyEdit(CANVAS, src, id, 'style.color', '"var(--fg-0)"');
+    expect(out.source).not.toContain(', ,');
+    expect(out.source).toContain('color: "var(--fg-0)"');
+    expect(() => transpileCanvasSource(CANVAS, out.source)).not.toThrow();
+  });
 });

package/apps/studio/test/canvas-list-watch.test.ts

@@ -320,3 +320,52 @@ describe('canvas-list-watch / real fs-watch end-to-end', () => {
     }
   }, 10_000);
 });
+
+describe('canvas-list-watch / config hot-reload (stale-config RCA)', () => {
+  // /design:setup-ds adds the `system` group to config.json mid-session;
+  // reloadConfig (context.ts) swaps ctx.cfg in place. The watcher must read
+  // groups at USE time — a boot-captured groupPaths list would keep gating
+  // the new group's files out forever.
+  // RCA: .ai/logs/rca/issue-ds-scaffold-files-not-in-filetree-stale-config.md
+  test('a group added by an in-place cfg swap uncovers its canvases', async () => {
+    const { root, designRoot } = sandbox();
+    mkdirSync(join(designRoot, 'system', 'kanban-glass', 'preview'), { recursive: true });
+    const ctx = mkCtx(designRoot);
+    // Pre-scaffold fixture shape: UI-only group.
+    ctx.cfg.canvasGroups = [{ label: 'UI', path: 'ui' }];
+    const got = collect(ctx);
+    const w = createCanvasListWatch(ctx, { debounceMs: 10 });
+    await w.ready;
+    try {
+      // Scaffold writes specimens while the group is still absent — no emit.
+      writeFileSync(join(designRoot, 'system', 'kanban-glass', 'preview', 'colors.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'system/kanban-glass/preview/colors.tsx');
+      await new Promise((r) => setTimeout(r, 10 + 40));
+      await w.refresh();
+      expect(got).toHaveLength(0);
+
+      // Hot reload: new array on the SAME cfg object (what reloadConfig does),
+      // then the server.ts subscriber calls refresh() — the diff must surface
+      // the pre-existing specimen.
+      ctx.cfg.canvasGroups = [
+        { label: 'Design system', path: 'system' },
+        { label: 'UI', path: 'ui' },
+      ];
+      await w.refresh();
+      expect(got).toHaveLength(1);
+      expect(got[0]?.action).toBe('added');
+      expect(got[0]?.rel).toBe('system/kanban-glass/preview/colors.tsx');
+
+      // And FUTURE writes under the new group pass the live fs:any gate.
+      got.length = 0;
+      writeFileSync(join(designRoot, 'system', 'kanban-glass', 'preview', 'type.tsx'), TSX);
+      ctx.bus.emit('fs:any', 'system/kanban-glass/preview/type.tsx');
+      await new Promise((r) => setTimeout(r, 10 + 40));
+      await w.refresh();
+      expect(got.some((m) => m.action === 'added' && m.rel?.endsWith('type.tsx'))).toBe(true);
+    } finally {
+      w.stop();
+      rmSync(root, { recursive: true, force: true });
+    }
+  });
+});

package/apps/studio/test/canvas-media-drop.test.ts

@@ -13,6 +13,7 @@ import {
   isHttpUrl,
   linkDomain,
   type MediaPayload,
+  mediaSnippet,
   normalizeUrl,
   prettifyUrl,
 } from '../use-canvas-media-drop.tsx';
@@ -116,10 +117,38 @@ describe('use-canvas-media-drop / classifyMediaPayload (dispatch matrix)', () =>
     expect(intent?.kind).toBe('image');
   });
 
-  test('a non-image file is ignored', () => {
+  test('a non-image, non-media file is ignored', () => {
     expect(classifyMediaPayload({ ...empty, files: [fakeFile('application/pdf')] })).toBeNull();
   });
 
+  test('a video file → a media intent (DDR-148)', () => {
+    const intent = classifyMediaPayload({ ...empty, files: [fakeFile('video/mp4')] });
+    expect(intent).toEqual({ kind: 'media', file: expect.anything(), mediaKind: 'video' });
+  });
+
+  test('an audio file → a media intent', () => {
+    const intent = classifyMediaPayload({ ...empty, files: [fakeFile('audio/mpeg')] });
+    expect(intent?.kind).toBe('media');
+    expect(intent && intent.kind === 'media' && intent.mediaKind).toBe('audio');
+  });
+
+  test('an image still wins over a co-dropped video', () => {
+    const intent = classifyMediaPayload({
+      ...empty,
+      files: [fakeFile('image/png'), fakeFile('video/mp4')],
+    });
+    expect(intent?.kind).toBe('image');
+  });
+
+  test('mediaSnippet emits the right Remotion element', () => {
+    expect(mediaSnippet('video', 'assets/ab12cd34.mp4')).toBe(
+      '<Video src="assets/ab12cd34.mp4" />'
+    );
+    expect(mediaSnippet('audio', 'assets/ff00aa11.mp3')).toBe(
+      '<Audio src="assets/ff00aa11.mp3" />'
+    );
+  });
+
   test('a URL drop becomes a link with the anchor text as the title', () => {
     const intent = classifyMediaPayload({
       ...empty,

package/apps/studio/test/canvas-origin-gate.test.ts

@@ -67,6 +67,25 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
         '/_api/edit-css',
         '/_api/edit-text',
         '/_api/edit-attr',
+        // DDR-148 — raw canvas source for the Timeline parser is MAIN-ORIGIN
+        // ONLY (the untrusted canvas iframe must never read project source).
+        '/_api/canvas-source',
+        // DDR-148 — Timeline drag-to-retime is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/retime-sequence',
+        // DDR-150 P2 — the clip enumerator reads project source structure, so it
+        // is MAIN-ORIGIN ONLY (same boundary as /_api/canvas-source): the
+        // untrusted canvas iframe must never enumerate the comp it renders.
+        '/_api/comp-clips',
+        // DDR-150 P3 — clip removal is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/remove-sequence',
+        // DDR-150 P4 — clip insert is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/insert-sequence',
+        // DDR-150 P5 — z-order reorder is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/reorder-sequence',
+        // DDR-150 dogfood — array-src replace is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/edit-array-src',
+        // DDR-150 dogfood — clip hide/show is a source-write, MAIN-ORIGIN ONLY.
+        '/_api/toggle-hide',
         // Phase 12.1 (DDR-138) — node-move reorder is a source-write, MAIN-ORIGIN
         // ONLY. The canvas iframe requests a reorder over the dgn:* bus; the shell
         // performs the write. A GET here 403s at the gate (route unreachable on
@@ -74,6 +93,24 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
         // revert route (whole-file swap — strictly more powerful than a move).
         '/_api/reorder',
         '/_api/reorder-revert',
+        // Stage I (feature-element-editing-robustness) — general element
+        // structural edits (delete / insert / new-artboard) + free-hand artboard
+        // resize (D4) are ALL source-writes, MAIN-ORIGIN ONLY. The untrusted
+        // canvas iframe requests them over the dgn:* bus; the shell performs the
+        // write. A GET from the canvas origin must 403 at the gate (route
+        // unreachable on this origin), never 405 from a reached handler.
+        '/_api/delete-element',
+        '/_api/insert-element',
+        '/_api/duplicate-element',
+        '/_api/insert-artboard',
+        '/_api/resize-artboard',
+        '/_api/delete-artboard',
+        // Stage F1 — the AssetPicker's asset-listing GET is a shell (main-origin)
+        // concern; the untrusted canvas iframe must not enumerate project media.
+        '/_api/assets',
+        // Stage H — the edit-scope (local-vs-shared) verdict is a shell badge
+        // concern; the untrusted canvas origin must not reach it (dual-allowlist).
+        '/_api/edit-scope',
         // Phase 27 (E2) — every /_api/git/* route is MAIN-ORIGIN ONLY: absent from
         // CANVAS_SAFE_API + startCanvasServer's `routes` map. A GET from the
         // canvas origin must 403 at the gate (not 405 from a reached handler),
@@ -141,9 +178,26 @@ describe('canvas-origin gate — A1/A2 traversal + privilege containment', () =>
       const shell = await fetch(`${canvas}/_canvas-shell.html`);
       const csp = shell.headers.get('content-security-policy') ?? '';
       expect(csp).toContain("connect-src 'self'");
+      // DDR-148 — media-src must be present so a video-comp's <Video>/<Audio>
+      // isn't blocked by default-src 'none' (black video / silent audio).
+      expect(csp).toContain("media-src 'self'");
       expect(csp).toContain("webrtc 'block'");
       expect(csp).toContain('frame-ancestors');
       expect(csp).toContain(`http://localhost:${port}`);
+
+      // (5) DDR-148 attacker F1 — the EXPORT/CAPTURE render (?hide-chrome=1) on
+      // the MAIN origin (where the normal shell CSP is off) MUST carry the
+      // network-locked capture CSP, else a canvas <Video src="http://internal">
+      // or comp fetch() turns ⌘E into read-SSRF + exfil-via-artifact.
+      const capMain = await fetch(`http://localhost:${port}/_canvas-shell.html?hide-chrome=1`);
+      const capCsp = capMain.headers.get('content-security-policy') ?? '';
+      expect(capCsp).toContain("media-src 'self'"); // <Video src=external> blocked
+      expect(capCsp).toContain("connect-src 'self'"); // comp fetch(external) blocked
+      expect(capCsp).toContain("img-src 'self'");
+      expect(capCsp).toContain("object-src 'none'");
+      // A normal main-origin shell (no capture flag) stays CSP-off (back-compat).
+      const plainMain = await fetch(`http://localhost:${port}/_canvas-shell.html`);
+      expect(plainMain.headers.get('content-security-policy')).toBeNull();
     } finally {
       await killProc(proc);
     }