@1agh/maude 0.42.0 → 0.44.0

package/apps/studio/test/scaffold-design.test.ts

@@ -0,0 +1,122 @@
+import { describe, expect, test } from 'bun:test';
+import { existsSync, mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { scaffoldDesign } from '../scaffold-design.ts';
+
+// DDR-166 Phase 1 — scaffoldDesign() now seeds THREE canvases (Welcome +
+// the two onboarding reference canvases), embedded as escaped template
+// literals. A bug in that escaping (an unescaped backtick/${ from the
+// source .design/ui/*.tsx files) would silently truncate the written file
+// into broken JS at scaffold time — every future new project would boot to
+// a corrupt canvas. Exercise the REAL function against a REAL temp dir, not
+// a mock, so a truncation shows up as a parse failure below.
+describe('scaffoldDesign — onboarding canvas seeding', () => {
+  function scaffold() {
+    const dir = mkdtempSync(join(tmpdir(), 'maude-scaffold-test-'));
+    const result = scaffoldDesign(dir, 'Scaffold Test');
+    return { dir, result };
+  }
+
+  test('writes ok:true and all three seeded canvases + their meta sidecars', () => {
+    const { dir, result } = scaffold();
+    try {
+      expect(result.ok).toBe(true);
+      for (const name of ['Welcome', 'How to use Maude', 'How to make video']) {
+        expect(existsSync(join(dir, '.design', 'ui', `${name}.tsx`))).toBe(true);
+        expect(existsSync(join(dir, '.design', 'ui', `${name}.meta.json`))).toBe(true);
+      }
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test('the two onboarding canvases are non-trivially sized (catches a silent truncation)', () => {
+    const { dir } = scaffold();
+    try {
+      const useMaude = readFileSync(join(dir, '.design', 'ui', 'How to use Maude.tsx'), 'utf8');
+      const makeVideo = readFileSync(join(dir, '.design', 'ui', 'How to make video.tsx'), 'utf8');
+      // Real sizes are ~30KB/~24KB; a truncated-at-the-first-unescaped-backtick
+      // bug would cut this down to a few hundred bytes at most.
+      expect(useMaude.length).toBeGreaterThan(10_000);
+      expect(makeVideo.length).toBeGreaterThan(10_000);
+      // Both files must close their own template structure — the default
+      // export is the last thing in each source file.
+      expect(useMaude.trim().endsWith('}')).toBe(true);
+      expect(makeVideo.trim().endsWith('}')).toBe(true);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test('every seeded .tsx parses as valid TSX (Bun.Transpiler) and has exactly one default export', () => {
+    const { dir } = scaffold();
+    try {
+      const transpiler = new Bun.Transpiler({ loader: 'tsx' });
+      for (const name of ['Welcome', 'How to use Maude', 'How to make video']) {
+        const src = readFileSync(join(dir, '.design', 'ui', `${name}.tsx`), 'utf8');
+        expect(() => transpiler.transformSync(src)).not.toThrow();
+        expect(src).toMatch(/export default function \w+/);
+      }
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test('every seeded meta.json is valid JSON with a matching artboards list', () => {
+    const { dir } = scaffold();
+    try {
+      // Welcome's meta nests artboards under sections[0] (the older, still-live
+      // convention); the two onboarding canvases use a top-level `artboards`.
+      const welcome = JSON.parse(
+        readFileSync(join(dir, '.design', 'ui', 'Welcome.meta.json'), 'utf8')
+      );
+      expect(welcome.sections[0].artboards.length).toBe(1);
+      for (const [name, count] of [
+        ['How to use Maude', 10],
+        ['How to make video', 7],
+      ] as const) {
+        const meta = JSON.parse(
+          readFileSync(join(dir, '.design', 'ui', `${name}.meta.json`), 'utf8')
+        );
+        expect(Array.isArray(meta.artboards)).toBe(true);
+        expect(meta.artboards.length).toBe(count);
+      }
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test('the two onboarding canvases self-declare their own tokens — no system/maude/ import', () => {
+    // Real bug caught while authoring this feature: the canvases originally
+    // imported system/maude/colors_and_type.css + preview/_components.css,
+    // which do NOT exist on a brand-new project (system/ is empty until
+    // /design:setup-ds runs) — every var(--token) would resolve to nothing,
+    // silently rendering unstyled black-on-black. Assert the fix holds.
+    const { dir } = scaffold();
+    try {
+      for (const name of ['How to use Maude', 'How to make video']) {
+        const src = readFileSync(join(dir, '.design', 'ui', `${name}.tsx`), 'utf8');
+        // Check for the actual import STATEMENT, not just the path appearing
+        // in an explanatory doc comment (which legitimately mentions it).
+        expect(src).not.toContain('import "../system/maude');
+        // The self-contained token block must still be present.
+        expect(src).toContain('const TOKENS');
+        expect(src).toContain('--bg-0');
+      }
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test('refuses to clobber an existing project (existing behavior, unchanged)', () => {
+    const { dir } = scaffold();
+    try {
+      const second = scaffoldDesign(dir, 'Scaffold Test');
+      expect(second.ok).toBe(false);
+      expect(second.error).toMatch(/already a Maude project/i);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});

package/apps/studio/test/shell-importmap.test.ts

@@ -0,0 +1,49 @@
+// shell-importmap.test.ts — regression guard for the bug that broke
+// PhotoBgRemoveHarness's first real run (feature-photo-editor, Task 18):
+// `@imgly/background-removal` was added to `RUNTIME_PACKAGES` (runtime-bundle.ts,
+// Task 7/11) and its `/_canvas-runtime/@imgly_background-removal.js` bundle was
+// built + floor-checked, but the hand-maintained `<script type="importmap">` in
+// `_shell.html` never got the matching entry — so any CANVAS-side code
+// (`import('@imgly/background-removal')`, only ever exercised by the shell's
+// OWN client bundle until this task) hit a browser-native "Failed to resolve
+// module specifier" the moment it actually ran inside a canvas iframe.
+//
+// The invariant: every entry in RUNTIME_PACKAGES must have a matching
+// `_shell.html` importmap key pointing at `/_canvas-runtime/<slugFor(pkg)>.js`.
+// canvas-build.ts externalises the WHOLE list unconditionally (`externalSpecifiers
+// = new Set(RUNTIME_PACKAGES)`), so a package added there without a matching
+// importmap entry silently ships a canvas-side dead import until something
+// actually calls it at runtime — this test catches it at build time instead.
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { DEV_SERVER_ROOT } from '../paths.ts';
+import { RUNTIME_PACKAGES, slugFor } from '../runtime-bundle.ts';
+
+const SHELL_HTML_PATH = join(
+  DEV_SERVER_ROOT,
+  '..',
+  '..',
+  'plugins',
+  'design',
+  'templates',
+  '_shell.html'
+);
+
+describe('_shell.html importmap agrees with RUNTIME_PACKAGES', () => {
+  const shellHtml = readFileSync(SHELL_HTML_PATH, 'utf8');
+  const importmapMatch = shellHtml.match(/<script type="importmap">([\s\S]*?)<\/script>/);
+  test('the importmap script block exists', () => {
+    expect(importmapMatch).not.toBeNull();
+  });
+  const importmap = JSON.parse(importmapMatch?.[1] ?? '{}') as { imports?: Record<string, string> };
+  const imports = importmap.imports ?? {};
+
+  for (const pkg of RUNTIME_PACKAGES) {
+    test(`"${pkg}" resolves to its /_canvas-runtime/ bundle`, () => {
+      expect(imports[pkg]).toBe(`/_canvas-runtime/${slugFor(pkg)}.js`);
+    });
+  }
+});

package/apps/studio/test/text-editability-stamp.test.ts

@@ -0,0 +1,131 @@
+import { describe, expect, test } from 'bun:test';
+import { applyTextEdit } from '../canvas-edit.ts';
+import { transpileCanvasSource } from '../canvas-pipeline.ts';
+
+// Phase 6 (unified-text-editing) — the build-time `data-cd-editable="text"`
+// marker must agree EXACTLY with applyTextEdit's acceptance (canvas-edit.ts):
+// stamped ⇔ a commit would save. See isInlineEditableText in
+// canvas-pipeline.ts (the mirrored predicate).
+
+const FIXTURE = `export default function Fixture() {
+  return (
+    <div>
+      <h1>Maude desktop E2E</h1>
+      <p>
+        Deterministic, static canvas — proves the native shell booted the
+        sidecar, navigated the webview, and rendered a canvas.
+      </p>
+      <p>Total: {1 + 1} items</p>
+      <span>{title}</span>
+      <h2>{'Quoted title'}</h2>
+      <button>
+        Save
+      </button>
+      <section>
+        <em>nested</em>
+      </section>
+      <div />
+    </div>
+  );
+}
+const title = 'x';
+`;
+
+function stamped(withIds: string, tag: string): boolean {
+  const m = withIds.match(new RegExp(`<${tag}[^>]*>`));
+  if (!m) throw new Error(`tag <${tag}> not found in output`);
+  return m[0].includes('data-cd-editable="text"');
+}
+
+describe('data-cd-editable build-time stamp', () => {
+  const { withIds } = transpileCanvasSource('/virtual/Fixture.tsx', FIXTURE);
+
+  test('single static JSXText gets the marker', () => {
+    expect(stamped(withIds, 'h1')).toBe(true);
+    expect(stamped(withIds, 'button')).toBe(true); // whitespace-framed text
+  });
+
+  test('multi-line static JSXText gets the marker', () => {
+    expect(stamped(withIds, 'p')).toBe(true); // first <p> — static prose
+  });
+
+  test('mixed static+expression content does NOT get the marker', () => {
+    // <p>Total: {1 + 1} items</p> — renders as leaf-looking text nodes, but
+    // the source is mixed → applyTextEdit refuses → must not be offered.
+    const second = withIds.match(/<p[^>]*>Total:/);
+    if (!second) throw new Error('mixed <p> not found');
+    expect(second[0].includes('data-cd-editable')).toBe(false);
+  });
+
+  test('dynamic expression content does NOT get the marker', () => {
+    expect(stamped(withIds, 'span')).toBe(false); // {title}
+  });
+
+  test("{'string literal'} single child DOES get the marker (DDR-150 P1)", () => {
+    expect(stamped(withIds, 'h2')).toBe(true);
+  });
+
+  test('containers and empty elements do NOT get the marker', () => {
+    expect(stamped(withIds, 'section')).toBe(false); // element child
+    const selfClosed = withIds.match(/<div [^>]*\/>/);
+    if (!selfClosed) throw new Error('self-closed div not found');
+    expect(selfClosed[0].includes('data-cd-editable')).toBe(false);
+  });
+
+  test('marker agrees with applyTextEdit acceptance for every stamped element', () => {
+    // Every data-cd-id that carries the marker must be accepted by the
+    // engine; every one without it (that has text-ish content) refused.
+    const opens = withIds.match(/<[a-z][^>]*data-cd-id="[^"]+"[^>]*>/g) ?? [];
+    for (const open of opens) {
+      const id = /data-cd-id="([^"]+)"/.exec(open)?.[1];
+      if (!id) continue;
+      const kind = /data-cd-editable="(text|var)"/.exec(open)?.[1];
+      let accepted = true;
+      try {
+        applyTextEdit('/virtual/Fixture.tsx', withIds, id, 'replacement');
+      } catch {
+        accepted = false;
+      }
+      // `text` (literal) MUST be accepted with no runtime context. `var`
+      // (a {variable}) is traced back at commit and needs occurrence/before —
+      // its acceptance is covered by dynamic-text-edit.test.ts, so only assert
+      // it isn't offered where the engine would hard-refuse a literal edit.
+      // Unmarked text-ish elements MUST be refused (no dead-end editor).
+      if (kind === 'text') {
+        expect(`${open} accepted=${accepted}`).toBe(`${open} accepted=true`);
+      } else if (!kind) {
+        expect(`${open} accepted=${accepted}`).toBe(`${open} accepted=false`);
+      }
+    }
+  });
+});
+
+describe('applyTextEdit sibling integrity (Task 6.3)', () => {
+  test('editing the h1 leaves every sibling byte-identical', () => {
+    const { withIds } = transpileCanvasSource('/virtual/Fixture.tsx', FIXTURE);
+    const h1Id = /<h1[^>]*data-cd-id="([^"]+)"/.exec(withIds)?.[1];
+    if (!h1Id) throw new Error('no h1 id');
+    const { source: out } = applyTextEdit('/virtual/Fixture.tsx', withIds, h1Id, 'New title');
+    // The h1 text changed…
+    expect(out).toMatch(/<h1[^>]*data-cd-editable="text"/);
+    expect(out).toContain('New title');
+    expect(out).not.toContain('Maude desktop E2E');
+    // …and EVERYTHING ELSE is byte-identical: strip the h1 element line from
+    // both versions and compare the rest wholesale.
+    const strip = (s: string) => s.replace(/<h1[^>]*>[^<]*<\/h1>/, '<h1/>');
+    expect(strip(out)).toBe(strip(withIds));
+  });
+
+  test('editing the multi-line p preserves its own whitespace framing', () => {
+    const { withIds } = transpileCanvasSource('/virtual/Fixture.tsx', FIXTURE);
+    const pId = /<p[^>]*data-cd-id="([^"]+)"[^>]*>\s*\n\s*Deterministic/.exec(withIds)?.[1];
+    if (!pId) throw new Error('no p id');
+    const { source: out } = applyTextEdit('/virtual/Fixture.tsx', withIds, pId, 'Short.');
+    // Leading/trailing whitespace of the JSXText survives (JSX indentation).
+    expect(out).toMatch(/<p[^>]*>\s*\n\s*Short\.\s*\n\s*<\/p>/);
+    // Siblings untouched.
+    expect(out).toMatch(/<h1[^>]*data-cd-editable="text"/);
+    expect(out).toContain('Maude desktop E2E');
+    expect(out).toContain('Total: {1 + 1} items');
+  });
+});

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

@@ -124,4 +124,61 @@ export default function Canvas(){ return (<DesignCanvas>
     expect(reel.total).toBe(120);
     expect(reel.audio).toHaveLength(1);
   });
+
+  test('a clips array built via .flatMap() collapses to one generic row (documents the parser limit — see video-comp SKILL.md "Never build ... with .map()/.flatMap()")', () => {
+    const src = `
+const CLIP = 60; const XF = 15;
+const clips = ['assets/a.mp4', 'assets/b.mp4', 'assets/c.mp4', 'assets/d.mp4'];
+const TOTAL = clips.length * CLIP - (clips.length - 1) * XF;
+const ReelClip = ({ src }) => <AbsoluteFill/>;
+function Reel(){
+  return (<AbsoluteFill><TransitionSeries>
+    {clips.flatMap((src, i) => {
+      const seq = <TransitionSeries.Sequence key={\`s\${i}\`} durationInFrames={CLIP}><ReelClip src={src}/></TransitionSeries.Sequence>;
+      if (i === clips.length - 1) return [seq];
+      return [seq, <TransitionSeries.Transition key={\`t\${i}\`} presentation={fade()} timing={linearTiming({ durationInFrames: XF })}/>];
+    })}
+  </TransitionSeries></AbsoluteFill>);
+}
+`;
+    // Only ONE literal <TransitionSeries.Sequence> occurrence exists in the
+    // source text (written once inside the callback) — not the 4 clips that
+    // exist at runtime — and its durationInFrames={CLIP} is fine but the
+    // array-driven TOTAL isn't resolvable arithmetic, so scopedTotal falls
+    // back to the derived span.
+    const r = parseCompTimeline(src, 0);
+    expect(r.sequences).toHaveLength(1);
+    expect(r.sequences[0]).toMatchObject({ label: 'ReelClip', duration: 60 });
+  });
+
+  test('the corrected 4-literal-block worked example (video-comp SKILL.md) parses all 4 named clips + the literal-sum total', () => {
+    const src = `
+const XF = 15;
+const TOTAL = 60 + 60 + 60 + 60 - XF * 3;
+const Clip = ({ src, label }) => <AbsoluteFill/>;
+const Reel = () => (
+  <AbsoluteFill>
+    <TransitionSeries>
+      <TransitionSeries.Sequence name="clip-1" durationInFrames={60}><Clip src="assets/a.mp4" label="01" /></TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: XF })} />
+      <TransitionSeries.Sequence name="clip-2" durationInFrames={60}><Clip src="assets/b.mp4" label="02" /></TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: XF })} />
+      <TransitionSeries.Sequence name="clip-3" durationInFrames={60}><Clip src="assets/c.mp4" label="03" /></TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: XF })} />
+      <TransitionSeries.Sequence name="clip-4" durationInFrames={60}><Clip src="assets/d.mp4" label="04" /></TransitionSeries.Sequence>
+    </TransitionSeries>
+  </AbsoluteFill>
+);
+`;
+    const r = parseCompTimeline(src, 0);
+    expect(r.sequences).toHaveLength(4);
+    expect(r.sequences.map((s) => s.label)).toEqual(['clip-1', 'clip-2', 'clip-3', 'clip-4']);
+    expect(r.sequences.map((s) => s.duration)).toEqual([60, 60, 60, 60]);
+    // Sequence 1 at 0; each next clip starts durationInFrames - XF after the
+    // previous (the transition overlaps back), same crossfade math as the
+    // existing 2-clip test above.
+    expect(r.sequences.map((s) => s.from)).toEqual([0, 45, 90, 135]);
+    // 60*4 - 15*3 = 195, and it's a literal-arithmetic sum the parser resolves.
+    expect(r.total).toBe(195);
+  });
 });

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

@@ -2,7 +2,9 @@
 // "+ 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).
+// `data-cd-id` of its own — DCArtboard doesn't forward it to the DOM), falling
+// back to the artboard's own `data-dc-screen` id (inside-end) when it has no
+// such child yet — the empty-artboard fix for the previously-silent no-op.
 //
 // Needs a live DOM (querySelector/:scope) — register happy-dom for this file
 // only, like canvas-hmr-runtime.test.tsx.
@@ -62,13 +64,13 @@ describe('tool-palette / resolveInsertAnchor', () => {
     expect(resolveInsertAnchor(document)).toEqual({ refId: '11111111', position: 'after' });
   });
 
-  test('returns null for an EMPTY artboard (no data-cd-id child to anchor on)', () => {
+  test('falls back to the artboard id (inside-end) for an EMPTY artboard — no longer a silent no-op', () => {
     document.body.innerHTML = `
       <article data-dc-screen="a1" aria-current="true">
         <div class="dc-artboard-body"></div>
       </article>
     `;
-    expect(resolveInsertAnchor(document)).toBeNull();
+    expect(resolveInsertAnchor(document)).toEqual({ artboardId: 'a1', position: 'inside-end' });
   });
 
   test('returns null when there is no artboard at all', () => {

package/apps/studio/test/tour-overlay.test.tsx

@@ -8,6 +8,7 @@
 import { describe, expect, test } from 'bun:test';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { TourOverlay } from '../client/tour/overlay.jsx';
+import { QUICK_SETUP_TOUR } from '../client/tour/quick-setup-tour.js';
 
 const STEP = { target: '.x', title: 'Welcome', body: 'Body copy here' };
 
@@ -61,6 +62,21 @@ describe('TourOverlay', () => {
     expect(html).toContain('Working together');
   });
 
+  test('QUICK_SETUP_TOUR (DDR-166 plan, Phase 2 / T7) is a well-formed, renderable deck', () => {
+    expect(QUICK_SETUP_TOUR.length).toBeGreaterThan(1);
+    for (const step of QUICK_SETUP_TOUR) {
+      expect(typeof step.title).toBe('string');
+      expect(step.title.length).toBeGreaterThan(0);
+      expect(typeof step.body).toBe('string');
+      expect(step.body.length).toBeGreaterThan(0);
+    }
+    const html = renderToStaticMarkup(
+      <TourOverlay open steps={QUICK_SETUP_TOUR} onClose={() => {}} onComplete={() => {}} />
+    );
+    expect(html).toContain('mdcc-tour__title');
+    expect(html).toContain(`1 / ${QUICK_SETUP_TOUR.length}`);
+  });
+
   test('closed or empty renders nothing', () => {
     expect(
       renderToStaticMarkup(

package/apps/studio/test/undo-stack.test.ts

@@ -208,4 +208,37 @@ describe('cross-iframe persistence (loadStackState / saveStackState)', () => {
     expect(reloaded.past.length).toBe(2);
     expect(reloaded.future.length).toBe(1);
   });
+
+  test('survives a WINDOW-STORE WIPE via sessionStorage (split-origin iframe reload)', () => {
+    // Split-origin canvas: the store lives on the iframe window, which a full
+    // reload (the HMR reload a `.tsx` text edit triggers) destroys. The durable
+    // sessionStorage layer must restore it. Install a fake window + sessionStorage.
+    const backing = new Map<string, string>();
+    const fakeSS = {
+      getItem: (k: string) => backing.get(k) ?? null,
+      setItem: (k: string, v: string) => backing.set(k, v),
+      removeItem: (k: string) => backing.delete(k),
+      key: (i: number) => [...backing.keys()][i] ?? null,
+      clear: () => backing.clear(),
+      get length() {
+        return backing.size;
+      },
+    };
+    const g = globalThis as unknown as { window?: unknown };
+    const prev = g.window;
+    g.window = { sessionStorage: fakeSS }; // no `top` → store host = this window
+    try {
+      _clearStackStore();
+      saveStackState('ui/Split.tsx', { past: [rec('kept')], future: [] });
+      expect(backing.size).toBe(1); // mirrored to sessionStorage
+      // Simulate the iframe reload: the window's in-memory Map is gone.
+      (g.window as { __maude_undo_stacks?: unknown }).__maude_undo_stacks = new Map();
+      const restored = loadStackState('ui/Split.tsx');
+      expect(restored.past.length).toBe(1);
+      expect(restored.past[0]?.label).toBe('kept');
+    } finally {
+      _clearStackStore();
+      g.window = prev;
+    }
+  });
 });

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

@@ -5,14 +5,14 @@
 //       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.
+//       path, per-category cap (image stays tighter than video; 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 { ASSET_MAX_BYTES, 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). ──
@@ -59,8 +59,8 @@ describe('video-asset / sniffAssetType (the widened type gate)', () => {
     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);
+  test('caps: image stays tight, video/audio share the larger cap', () => {
+    expect(assetCapForCategory('image')).toBe(ASSET_MAX_BYTES);
     expect(assetCapForCategory('video')).toBeGreaterThan(assetCapForCategory('image'));
     expect(assetCapForCategory('audio')).toBe(assetCapForCategory('video'));
   });

package/apps/studio/test/video-render-bridge.test.ts

@@ -8,7 +8,12 @@
 // (DOM containment resolution) and the `__maude_render_video__` bridge's
 // routing contract — it must merge the registered comp's component/meta with
 // the caller's opts and delegate to the injected `__maudeRenderVideo__`, and
-// fail clearly when either the comp or the render-lib injection is missing.
+// fail clearly when either the comp or the render-lib injection is missing, and
+// PROPAGATE a renderer failure as a rejection (the contract the capture shim's
+// try/catch relies on to fall back to frame-step screenshots — RCA
+// issue-video-mp4-rendermediaonweb-stack-overflow). The shim-level fallback
+// itself (renderMediaOnWeb throws → frame-step, video-only, degraded=true) is
+// verified live against a deep-precompositing comp — see that RCA's repro.
 
 import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
@@ -146,4 +151,21 @@ describe('__maude_render_video__ bridge', () => {
       /render-lib bundle not injected/i
     );
   });
+
+  test('propagates a renderer failure (e.g. stack overflow) as a rejection the shim can catch', async () => {
+    // The capture shim (_video-playwright.mjs) wraps the __maude_render_video__
+    // page.evaluate in try/catch and degrades to frame-step screenshots when it
+    // rejects. That only works if the bridge surfaces __maudeRenderVideo__'s
+    // throw as a rejection rather than swallowing it — the exact failure mode
+    // of the RCA (@remotion/web-renderer overflowing on deep precompositing).
+    const w = window as unknown as RenderWindow;
+    installMaudeSeekBridge();
+    registerComp('reel', { fps: 30, durationInFrames: 228, width: 960, height: 540 }, () => null);
+    w.__maudeRenderVideo__ = async () => {
+      throw new RangeError('Maximum call stack size exceeded');
+    };
+    await expect(w.__maude_render_video__?.('reel', { container: 'mp4' })).rejects.toThrow(
+      /Maximum call stack size exceeded/
+    );
+  });
 });