@1agh/maude 1.0.11 → 1.2.0

package/apps/studio/test/clip-addressing.test.ts

@@ -1,738 +0,0 @@
-// clip-addressing.test.ts — DDR-150 P2. The single AST clip tokenizer that
-// replaces document-order indexing. The headline guard: on a MULTI-COMP canvas,
-// enumerateClips scoped to one artboard returns THAT comp's clips only — so the
-// UI (which addresses ops by stableId) can never mis-hit a clip in another comp
-// (the defect that made destructive ops corrupt the wrong clip). Plus: comments
-// are skipped (AST, not regex), TransitionSeries semantics are gated, and the
-// content-hash fingerprint refuses a stale/raced target.
-
-import { describe, expect, test } from 'bun:test';
-
-import {
-  applyEditArrayElementString,
-  applyInsertClip,
-  applyRemoveClip,
-  applyReorderClip,
-  applyRetimeSequenceByClip,
-  applyToggleClipHidden,
-  assembleCompSource,
-  assertCompSemantics,
-  CanvasEditError,
-  enumerateClips,
-  resolveClip,
-} from '../canvas-edit.ts';
-
-const CANVAS = '/abs/Canvas.tsx';
-
-describe('enumerateClips — multi-comp scoping (the headline defect)', () => {
-  const SRC = [
-    'const A = 40;',
-    'const B = 50;',
-    'const Intro = () => (',
-    '  <Sequence durationInFrames={A}><Video src="intro.mp4" /></Sequence>',
-    ');',
-    'const Outro = () => (',
-    '  <>',
-    '    <Sequence durationInFrames={B}><Video src="a.mp4" /></Sequence>',
-    '    <Sequence from={10} durationInFrames={60}><Video src="b.mp4" /></Sequence>',
-    '  </>',
-    ');',
-    'function Canvas() {',
-    '  return (',
-    '    <DesignCanvas>',
-    '      <DCArtboard id="intro"><VideoComp component={Intro} durationInFrames={A} fps={30} /></DCArtboard>',
-    '      <DCArtboard id="outro"><VideoComp component={Outro} durationInFrames={B} fps={30} /></DCArtboard>',
-    '    </DesignCanvas>',
-    '  );',
-    '}',
-  ].join('\n');
-
-  test('scopes to the selected artboard’s comp — not the whole file', () => {
-    const intro = enumerateClips(CANVAS, SRC, 'intro');
-    expect(intro.compName).toBe('Intro');
-    expect(intro.clips.map((c) => c.stableId)).toEqual(['Intro#0']);
-    expect(intro.clips[0]?.mediaSrc).toBe('intro.mp4');
-    expect(intro.clips[0]?.durationInFrames).toBe(40);
-
-    const outro = enumerateClips(CANVAS, SRC, 'outro');
-    expect(outro.compName).toBe('Outro');
-    // TWO clips, comp-scoped ids — NOT file-wide indices 1 & 2.
-    expect(outro.clips.map((c) => c.stableId)).toEqual(['Outro#0', 'Outro#1']);
-    // The headline assertion: outro clip 0 is the OUTRO clip (a.mp4), never the
-    // intro clip. A whole-file document-order index would have mis-hit here.
-    expect(outro.clips[0]?.mediaSrc).toBe('a.mp4');
-    expect(outro.clips[1]?.mediaSrc).toBe('b.mp4');
-    expect(outro.clips[1]?.from).toBe(10);
-    expect(outro.clips[1]?.durationInFrames).toBe(60);
-  });
-
-  test('the same stableId means the same clip across UI/engine (distinct comp-scoped ids)', () => {
-    const intro = enumerateClips(CANVAS, SRC, 'intro');
-    const outro = enumerateClips(CANVAS, SRC, 'outro');
-    const ids = [...intro.clips, ...outro.clips].map((c) => c.stableId);
-    expect(new Set(ids).size).toBe(ids.length); // no collisions across comps
-  });
-});
-
-describe('enumerateClips — stable identity precedence', () => {
-  test('<Sequence name> wins; sentinel next; else comp#index', () => {
-    const src = [
-      'const Comp = () => (',
-      '  <>',
-      '    <Sequence name="hero" durationInFrames={30}><A /></Sequence>',
-      '    {/* @mclip lower-third */}',
-      '    <Sequence durationInFrames={20}><B /></Sequence>',
-      '    <Sequence durationInFrames={20}><C /></Sequence>',
-      '  </>',
-      ');',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={70} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const { clips } = enumerateClips(CANVAS, src, 'x');
-    expect(clips.map((c) => c.stableId)).toEqual(['name:hero', 'mclip:lower-third', 'Comp#2']);
-  });
-});
-
-describe('enumerateClips — AST skips commented + tolerates .map', () => {
-  test('a commented-out <Sequence> is NOT enumerated (regex would have counted it)', () => {
-    const src = [
-      'const Comp = () => (',
-      '  <>',
-      '    <Sequence durationInFrames={30}><A /></Sequence>',
-      '    {/* <Sequence durationInFrames={99}><Ghost /></Sequence> */}',
-      '    <Sequence durationInFrames={20}><B /></Sequence>',
-      '  </>',
-      ');',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={50} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const { clips } = enumerateClips(CANVAS, src, 'x');
-    expect(clips.length).toBe(2);
-    expect(clips.map((c) => c.stableId)).toEqual(['Comp#0', 'Comp#1']);
-  });
-
-  test('a .map() renders one addressable template clip', () => {
-    const src = [
-      'const Comp = ({ shots }) => (',
-      '  <>{shots.map((s) => <Sequence key={s.id} from={s.from} durationInFrames={s.dur}><Video src={s.src} /></Sequence>)}</>',
-      ');',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={90} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const { clips } = enumerateClips(CANVAS, src, 'x');
-    expect(clips.length).toBe(1);
-    expect(clips[0]?.stableId).toBe('Comp#0');
-    expect(clips[0]?.mediaTag).toBe('Video'); // media detected even though src is dynamic
-  });
-});
-
-describe('resolveClip — content-hash fingerprint (optimistic concurrency)', () => {
-  const src = [
-    'const Comp = () => <Sequence durationInFrames={30}><Video src="a.mp4" /></Sequence>;',
-    'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={30} fps={30} /></DCArtboard>; }',
-  ].join('\n');
-
-  test('resolves a clip by stableId + matching hash', () => {
-    const { clips } = enumerateClips(CANVAS, src, 'x');
-    const c = clips[0] as { stableId: string; contentHash: string };
-    const r = resolveClip(CANVAS, src, 'x', c.stableId, c.contentHash);
-    expect(r.stableId).toBe(c.stableId);
-  });
-
-  test('refuses when the clip content changed since it was read', () => {
-    const { clips } = enumerateClips(CANVAS, src, 'x');
-    const c = clips[0] as { stableId: string };
-    expect(() => resolveClip(CANVAS, src, 'x', c.stableId, 'deadbeef')).toThrow(CanvasEditError);
-  });
-
-  test('throws on an unknown stableId', () => {
-    expect(() => resolveClip(CANVAS, src, 'x', 'Comp#99')).toThrow(CanvasEditError);
-  });
-});
-
-describe('assertCompSemantics — TransitionSeries alternation (parse-clean ≠ correct)', () => {
-  const wrap = (inner: string) =>
-    `const Comp = () => (<TransitionSeries>${inner}</TransitionSeries>);`;
-  const SEQ = '<TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>';
-  const TR = '<TransitionSeries.Transition timing={t} />';
-
-  test('accepts a valid alternating series', () => {
-    expect(assertCompSemantics(CANVAS, wrap(`${SEQ}${TR}${SEQ}`)).ok).toBe(true);
-    expect(assertCompSemantics(CANVAS, wrap(SEQ)).ok).toBe(true);
-  });
-
-  test('rejects a leading transition', () => {
-    expect(() => assertCompSemantics(CANVAS, wrap(`${TR}${SEQ}`))).toThrow(CanvasEditError);
-  });
-
-  test('rejects a trailing transition (the orphaned-transition after a remove)', () => {
-    expect(() => assertCompSemantics(CANVAS, wrap(`${SEQ}${TR}`))).toThrow(CanvasEditError);
-  });
-
-  test('rejects a doubled transition', () => {
-    expect(() => assertCompSemantics(CANVAS, wrap(`${SEQ}${TR}${TR}${SEQ}`))).toThrow(
-      CanvasEditError
-    );
-  });
-});
-
-describe('applyRetimeSequenceByClip — stableId retime (multi-comp safe)', () => {
-  const SRC = [
-    'const Intro = () => <Sequence durationInFrames={40}><Video src="intro.mp4" /></Sequence>;',
-    'const Outro = () => (',
-    '  <>',
-    '    <Sequence durationInFrames={50}><Video src="a.mp4" /></Sequence>',
-    '    <Sequence from={10} durationInFrames={60}><Video src="b.mp4" /></Sequence>',
-    '  </>',
-    ');',
-    'function Canvas() {',
-    '  return (<DesignCanvas>',
-    '    <DCArtboard id="intro"><VideoComp component={Intro} durationInFrames={40} fps={30} /></DCArtboard>',
-    '    <DCArtboard id="outro"><VideoComp component={Outro} durationInFrames={110} fps={30} /></DCArtboard>',
-    '  </DesignCanvas>);',
-    '}',
-  ].join('\n');
-
-  test('retimes the addressed clip in comp B without touching comp A', () => {
-    const out = applyRetimeSequenceByClip(CANVAS, SRC, 'outro', 'Outro#1', undefined, {
-      durationInFrames: 90,
-    });
-    // Outro#1 (the b.mp4 clip, from={10}) is retimed to 90…
-    expect(out.source).toContain('from={10} durationInFrames={90}');
-    // …and the Intro clip (a whole-file index of 0) is untouched.
-    expect(out.source).toContain('const Intro = () => <Sequence durationInFrames={40}>');
-    // …as is Outro#0.
-    expect(out.source).toContain('<Sequence durationInFrames={50}><Video src="a.mp4"');
-  });
-
-  test('refuses a stale content-hash (concurrent edit)', () => {
-    expect(() =>
-      applyRetimeSequenceByClip(CANVAS, SRC, 'outro', 'Outro#1', 'deadbeef', {
-        durationInFrames: 90,
-      })
-    ).toThrow(CanvasEditError);
-  });
-
-  test('inserts `from` when moving a cursor-implicit clip (P3 Task 6)', () => {
-    const src = [
-      'const Comp = () => <Sequence durationInFrames={40}><A /></Sequence>;',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={40} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const out = applyRetimeSequenceByClip(CANVAS, src, 'x', 'Comp#0', undefined, { from: 25 });
-    expect(out.source).toContain('<Sequence from={25} durationInFrames={40}>');
-  });
-});
-
-describe('applyRetimeSequenceByClip — refuses a no-op `from` on series clips (dogfood fix)', () => {
-  const src = [
-    'const Comp = () => (<TransitionSeries>',
-    '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-    '  <TransitionSeries.Transition timing={t} />',
-    '  <TransitionSeries.Sequence durationInFrames={40}><B /></TransitionSeries.Sequence>',
-    '</TransitionSeries>);',
-    'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={70} fps={30} /></DCArtboard>; }',
-  ].join('\n');
-
-  test('from-move on a TransitionSeries.Sequence throws (Remotion ignores the prop)', () => {
-    const seqs = enumerateClips(CANVAS, src, 'x').clips.filter((c) => c.kind === 'sequence');
-    expect(() =>
-      applyRetimeSequenceByClip(CANVAS, src, 'x', seqs[0]!.stableId, undefined, { from: 20 })
-    ).toThrow(/series computes its position/);
-  });
-
-  test('trim (durationInFrames) on a TransitionSeries.Sequence still works', () => {
-    const seqs = enumerateClips(CANVAS, src, 'x').clips.filter((c) => c.kind === 'sequence');
-    const out = applyRetimeSequenceByClip(CANVAS, src, 'x', seqs[1]!.stableId, undefined, {
-      durationInFrames: 25,
-    });
-    expect(out.source).toContain('durationInFrames={25}');
-  });
-});
-
-describe('applyRemoveClip — clip removal (DDR-150 P3)', () => {
-  const outro = () =>
-    [
-      `const Intro = () => <Sequence durationInFrames={40}><Video src="i.mp4" /></Sequence>;`,
-      `const Outro = () => (`,
-      `  <>`,
-      `    <Sequence durationInFrames={50}><Video src="a.mp4" /></Sequence>`,
-      `    <Sequence from={10} durationInFrames={60}><Video src="b.mp4" /></Sequence>`,
-      `  </>`,
-      `);`,
-      `function Canvas() {`,
-      `  return (<DesignCanvas>`,
-      `    <DCArtboard id="intro"><VideoComp component={Intro} durationInFrames={40} fps={30} /></DCArtboard>`,
-      `    <DCArtboard id="outro"><VideoComp component={Outro} durationInFrames={110} fps={30} /></DCArtboard>`,
-      `  </DesignCanvas>);`,
-      `}`,
-    ].join('\n');
-
-  test('removes a standalone clip in comp B, leaving comp A + the sibling clip', () => {
-    const src = outro();
-    const out = applyRemoveClip(CANVAS, src, 'outro', 'Outro#0', undefined);
-    // Outro#0 (a.mp4) gone; Outro#1 (b.mp4) + Intro (i.mp4) intact.
-    expect(out.source).not.toContain('a.mp4');
-    expect(out.source).toContain('b.mp4');
-    expect(out.source).toContain('i.mp4');
-  });
-
-  test('refuses removing the only clip in a comp', () => {
-    const src = [
-      'const Comp = () => <Sequence durationInFrames={30}><A /></Sequence>;',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={30} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const only = enumerateClips(CANVAS, src, 'x').clips[0] as { stableId: string };
-    expect(() => applyRemoveClip(CANVAS, src, 'x', only.stableId, undefined)).toThrow(
-      CanvasEditError
-    );
-  });
-
-  test('refuses a stale content-hash', () => {
-    const src = outro();
-    expect(() => applyRemoveClip(CANVAS, src, 'outro', 'Outro#0', 'deadbeef')).toThrow(
-      CanvasEditError
-    );
-  });
-
-  test('inserts a new <Sequence> with media after the last clip (P4 Task 11)', () => {
-    const src = [
-      'const Comp = () => (',
-      '  <>',
-      '    <Sequence durationInFrames={50}><Video src="assets/a.mp4" /></Sequence>',
-      '  </>',
-      ');',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={50} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const out = applyInsertClip(CANVAS, src, 'x', {
-      from: 50,
-      durationInFrames: 40,
-      mediaTag: 'Video',
-      src: 'assets/new.mp4',
-    });
-    expect(out.source).toContain('<Sequence from={50} durationInFrames={40}>');
-    expect(out.source).toContain('<Video src="assets/new.mp4" />');
-    expect(out.stableId).toBe('Comp#1'); // new clip is the 2nd
-    // both clips enumerate cleanly
-    expect(enumerateClips(CANVAS, out.source, 'x').clips.length).toBe(2);
-  });
-
-  test('refuses insert with a traversal src', () => {
-    const src = [
-      'const Comp = () => <Sequence durationInFrames={30}><Video src="assets/a.mp4" /></Sequence>;',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={30} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    expect(() =>
-      applyInsertClip(CANVAS, src, 'x', {
-        from: 0,
-        durationInFrames: 30,
-        mediaTag: 'Video',
-        src: '../../etc/passwd',
-      })
-    ).toThrow(CanvasEditError);
-  });
-
-  test('refuses appending into a single-sequence <TransitionSeries> (no transition to clone)', () => {
-    const src = [
-      'const Comp = () => (<TransitionSeries>',
-      '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-      '</TransitionSeries>);',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={30} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    expect(() => applyInsertClip(CANVAS, src, 'x', { from: 30, durationInFrames: 30 })).toThrow(
-      CanvasEditError
-    );
-  });
-
-  test('appends a transition + sequence into a <TransitionSeries> (dogfood — cloned transition)', () => {
-    const src = [
-      'const Comp = () => (<TransitionSeries>',
-      '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition presentation={fade()} timing={linearTiming({ durationInFrames: 8 })} />',
-      '  <TransitionSeries.Sequence durationInFrames={40}><B /></TransitionSeries.Sequence>',
-      '</TransitionSeries>);',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={70} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const out = applyInsertClip(CANVAS, src, 'x', {
-      from: 0,
-      durationInFrames: 50,
-      mediaTag: 'Video',
-      src: 'assets/new.mp4',
-    });
-    // A new sequence with the media + a cloned transition; alternation intact.
-    expect(out.source).toContain('<Video src="assets/new.mp4" />');
-    expect((out.source.match(/<\/TransitionSeries\.Sequence>/g) || []).length).toBe(3); // 3 sequences
-    expect((out.source.match(/TransitionSeries\.Transition/g) || []).length).toBe(2);
-    expect(() => assertCompSemantics(CANVAS, out.source)).not.toThrow();
-    const seqs = enumerateClips(CANVAS, out.source, 'x').clips.filter((c) => c.kind === 'sequence');
-    expect(seqs.length).toBe(3);
-  });
-
-  test('drops one adjacent transition when removing a TransitionSeries clip (series stays valid)', () => {
-    const src = [
-      'const Comp = () => (<TransitionSeries>',
-      '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition timing={t} />',
-      '  <TransitionSeries.Sequence durationInFrames={40}><B /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition timing={t} />',
-      '  <TransitionSeries.Sequence durationInFrames={50}><C /></TransitionSeries.Sequence>',
-      '</TransitionSeries>);',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={120} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    // Remove the middle sequence (Comp#2 in flat order: S,T,S,T,S → index 2).
-    const clips = enumerateClips(CANVAS, src, 'x').clips;
-    const mid = clips.filter((c) => c.kind === 'sequence')[1] as { stableId: string };
-    const out = applyRemoveClip(CANVAS, src, 'x', mid.stableId, undefined);
-    // <B/> gone; the result still parses AND passes the alternation gate.
-    expect(out.source).not.toContain('<B />');
-    expect(() => assertCompSemantics(CANVAS, out.source)).not.toThrow();
-    // exactly one transition left (was 2, one dropped with the removed sequence).
-    expect((out.source.match(/TransitionSeries\.Transition/g) || []).length).toBe(1);
-  });
-});
-
-describe('applyReorderClip — z-order reorder (DDR-150 P5)', () => {
-  // Three standalone <Sequence> siblings whose stacking order (document order)
-  // is the render z-order — footage under a lower-third under a logo.
-  const stack = () =>
-    [
-      'const Reel = () => (',
-      '  <>',
-      '    <Sequence durationInFrames={90}><Video src="footage.mp4" /></Sequence>',
-      '    <Sequence durationInFrames={90}><Img src="lower-third.png" /></Sequence>',
-      '    <Sequence durationInFrames={90}><Img src="logo.png" /></Sequence>',
-      '  </>',
-      ');',
-      'function Canvas() { return <DCArtboard id="reel"><VideoComp component={Reel} durationInFrames={90} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-
-  test('moves a clip after a sibling — stacking order changes, content preserved', () => {
-    const src = stack();
-    const clips = enumerateClips(CANVAS, src, 'reel').clips;
-    const footage = clips[0]!; // Reel#0
-    const logo = clips[2]!; // Reel#2
-    // Bring footage to the top: move it AFTER the logo.
-    const out = applyReorderClip(
-      CANVAS,
-      src,
-      'reel',
-      footage.stableId,
-      footage.contentHash,
-      logo.stableId,
-      logo.contentHash,
-      'after'
-    );
-    // New document order: lower-third, logo, footage (footage now paints last).
-    const after = enumerateClips(CANVAS, out.source, 'reel').clips;
-    expect(after.map((c) => c.mediaSrc)).toEqual(['lower-third.png', 'logo.png', 'footage.mp4']);
-    // All three clips survive; nothing was dropped or duplicated.
-    expect(after.length).toBe(3);
-    // The moved clip is re-addressed by its (unchanged) content hash.
-    expect(out.stableId).toBe(after[2]!.stableId);
-  });
-
-  test('refuses a stale content-hash on either clip', () => {
-    const src = stack();
-    const clips = enumerateClips(CANVAS, src, 'reel').clips;
-    expect(() =>
-      applyReorderClip(
-        CANVAS,
-        src,
-        'reel',
-        clips[0]!.stableId,
-        'deadbeef',
-        clips[2]!.stableId,
-        clips[2]!.contentHash,
-        'after'
-      )
-    ).toThrow(CanvasEditError);
-  });
-
-  test('refuses a self-move', () => {
-    const src = stack();
-    const c0 = enumerateClips(CANVAS, src, 'reel').clips[0]!;
-    expect(() =>
-      applyReorderClip(
-        CANVAS,
-        src,
-        'reel',
-        c0.stableId,
-        c0.contentHash,
-        c0.stableId,
-        c0.contentHash,
-        'after'
-      )
-    ).toThrow(CanvasEditError);
-  });
-
-  test('reorders TransitionSeries beats by SWAPPING sequences (dogfood — transitions stay put)', () => {
-    const src = [
-      'const Comp = () => (<TransitionSeries>',
-      '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition timing={t} />',
-      '  <TransitionSeries.Sequence durationInFrames={40}><B /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition timing={t} />',
-      '  <TransitionSeries.Sequence durationInFrames={50}><C /></TransitionSeries.Sequence>',
-      '</TransitionSeries>);',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={120} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const seqs = enumerateClips(CANVAS, src, 'x').clips.filter((c) => c.kind === 'sequence');
-    // Move A (clip 0) later — swap with B (clip 1).
-    const out = applyReorderClip(
-      CANVAS,
-      src,
-      'x',
-      seqs[0]!.stableId,
-      seqs[0]!.contentHash,
-      seqs[1]!.stableId,
-      seqs[1]!.contentHash,
-      'after'
-    );
-    // B now plays first (with its 40f), A second (30f) — alternation intact.
-    const order = (out.source.match(/<([ABC]) \//g) || []).map((m) => m[1]);
-    expect(order).toEqual(['B', 'A', 'C']);
-    expect(() => assertCompSemantics(CANVAS, out.source)).not.toThrow();
-    expect((out.source.match(/TransitionSeries\.Transition/g) || []).length).toBe(2); // both kept
-  });
-
-  test('still refuses reordering a series clip against a STANDALONE one (mixed kinds)', () => {
-    const src = [
-      'const Comp = () => (<><TransitionSeries>',
-      '  <TransitionSeries.Sequence durationInFrames={30}><A /></TransitionSeries.Sequence>',
-      '  <TransitionSeries.Transition timing={t} />',
-      '  <TransitionSeries.Sequence durationInFrames={40}><B /></TransitionSeries.Sequence>',
-      '</TransitionSeries>',
-      '<Sequence durationInFrames={20}><D /></Sequence></>);',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={90} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const seqs = enumerateClips(CANVAS, src, 'x').clips.filter((c) => c.kind === 'sequence');
-    const seriesClip = seqs.find((c) => c.tag === 'TransitionSeries.Sequence')!;
-    const standalone = seqs.find((c) => c.tag === 'Sequence')!;
-    expect(() =>
-      applyReorderClip(
-        CANVAS,
-        src,
-        'x',
-        seriesClip.stableId,
-        seriesClip.contentHash,
-        standalone.stableId,
-        standalone.contentHash,
-        'after'
-      )
-    ).toThrow(CanvasEditError);
-  });
-});
-
-describe('applyToggleClipHidden — hide/show a clip (dogfood)', () => {
-  const src = [
-    'const Comp = () => (<TransitionSeries>',
-    '  <TransitionSeries.Sequence durationInFrames={40}><A /></TransitionSeries.Sequence>',
-    '  <TransitionSeries.Transition timing={t} />',
-    '  <TransitionSeries.Sequence durationInFrames={50}><B /></TransitionSeries.Sequence>',
-    '</TransitionSeries>);',
-    'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={90} fps={30} /></DCArtboard>; }',
-  ].join('\n');
-
-  test('hide gates the body behind {false && (…)} keeping the tag + alternation, then shows reversibly', () => {
-    const s0 = enumerateClips(CANVAS, src, 'x').clips.filter((c) => c.kind === 'sequence');
-    expect(s0.every((c) => c.hidden === false)).toBe(true);
-    const hid = applyToggleClipHidden(CANVAS, src, 'x', s0[0]!.stableId, s0[0]!.contentHash);
-    expect(hid.hidden).toBe(true);
-    expect(hid.source).toContain('{false && (<A />)}');
-    expect(() => assertCompSemantics(CANVAS, hid.source)).not.toThrow(); // alternation intact
-    const s1 = enumerateClips(CANVAS, hid.source, 'x').clips.filter((c) => c.kind === 'sequence');
-    expect(s1[0]!.hidden).toBe(true);
-    const shown = applyToggleClipHidden(
-      CANVAS,
-      hid.source,
-      'x',
-      s1[0]!.stableId,
-      s1[0]!.contentHash
-    );
-    expect(shown.hidden).toBe(false);
-    expect(shown.source).toBe(src); // fully reversible
-  });
-});
-
-describe('enumerateClips — clip layer decomposition (dogfood — mp4 background + title)', () => {
-  const src = [
-    "const CLIPS = [{ src: 'assets/a.mp4', label: 'Aerial' }];",
-    'const LowerThird = ({ label }) => <AbsoluteFill><div>{label}</div></AbsoluteFill>;',
-    'const ClipShot = ({ clip }) => (',
-    '  <AbsoluteFill>',
-    '    <AbsoluteFill><Video src={clip.src} /></AbsoluteFill>',
-    '    <AbsoluteFill style={{ background: "grad" }} />',
-    '    <LowerThird label={clip.label} />',
-    '  </AbsoluteFill>',
-    ');',
-    'const TitleCard = () => <AbsoluteFill>hi</AbsoluteFill>;',
-    'const Reel = () => (<TransitionSeries>',
-    '  <TransitionSeries.Sequence durationInFrames={60}><TitleCard /></TransitionSeries.Sequence>',
-    '  <TransitionSeries.Transition timing={t} />',
-    '  <TransitionSeries.Sequence durationInFrames={60}><ClipShot clip={CLIPS[0]} /></TransitionSeries.Sequence>',
-    '</TransitionSeries>);',
-    'function Canvas() { return <DCArtboard id="reel"><VideoComp component={Reel} durationInFrames={120} fps={30} /></DCArtboard>; }',
-  ].join('\n');
-
-  test('a ClipShot decomposes into a video layer (array-fed, replaceable) + its title component', () => {
-    const seqs = enumerateClips(CANVAS, src, 'reel').clips.filter((c) => c.kind === 'sequence');
-    expect(seqs[0]!.layers).toEqual([]); // pure TitleCard → no layers
-    const layers = seqs[1]!.layers;
-    expect(layers.map((l) => l.kind)).toEqual(['video', 'component']);
-    expect(layers[0]!.mediaTag).toBe('Video');
-    expect(layers[0]!.mediaArrayRef).toEqual({ arrayName: 'CLIPS', index: 0, field: 'src' });
-    expect(layers[1]!.label).toBe('LowerThird');
-  });
-});
-
-describe('enumerateClips — nested/wrapper-component media (showreel granularity + replace)', () => {
-  const showreel = [
-    'const CLIPS = [',
-    "  { src: 'assets/a.mp4', label: 'Aerial' },",
-    "  { src: 'assets/b.mp4', label: 'Nature' },",
-    '];',
-    'const ClipShot = ({ clip }) => <AbsoluteFill><Video src={clip.src} /></AbsoluteFill>;',
-    'const TitleCard = () => <AbsoluteFill>hi</AbsoluteFill>;',
-    'const Comp = () => (<><TransitionSeries>',
-    '  <TransitionSeries.Sequence durationInFrames={60}><TitleCard /></TransitionSeries.Sequence>',
-    '  <TransitionSeries.Transition timing={t} />',
-    '  <TransitionSeries.Sequence durationInFrames={60}><ClipShot clip={CLIPS[0]} /></TransitionSeries.Sequence>',
-    '  <TransitionSeries.Transition timing={t} />',
-    '  <TransitionSeries.Sequence durationInFrames={60}><ClipShot clip={CLIPS[1]} /></TransitionSeries.Sequence>',
-    '</TransitionSeries><Audio src="assets/music.mp3" /></>);',
-    'function Canvas() { return <DCArtboard id="reel"><VideoComp component={Comp} durationInFrames={180} fps={30} /></DCArtboard>; }',
-  ].join('\n');
-
-  test('resolves media through a wrapper component fed by an array element', () => {
-    const seqs = enumerateClips(CANVAS, showreel, 'reel').clips.filter(
-      (c) => c.kind === 'sequence'
-    );
-    // TitleCard = pure function, no media.
-    expect(seqs[0]!.mediaTag).toBeNull();
-    // ClipShot clips → Video, src resolved through CLIPS[i].src, array-ref for replace.
-    expect(seqs[1]!.mediaTag).toBe('Video');
-    expect(seqs[1]!.mediaSrc).toBe('assets/a.mp4');
-    expect(seqs[1]!.mediaArrayRef).toEqual({ arrayName: 'CLIPS', index: 0, field: 'src' });
-    expect(seqs[2]!.mediaArrayRef).toEqual({ arrayName: 'CLIPS', index: 1, field: 'src' });
-  });
-
-  test('the loose <Audio> is NOT mis-attributed to the last sequence', () => {
-    const { clips, media } = enumerateClips(CANVAS, showreel, 'reel');
-    const seqs = clips.filter((c) => c.kind === 'sequence');
-    expect(seqs.every((s) => s.mediaTag !== 'Audio')).toBe(true);
-    expect(media.length).toBe(1);
-    expect(media[0]!.tag).toBe('Audio');
-  });
-});
-
-describe('applyEditArrayElementString — array-fed src replace (showreel)', () => {
-  const src = [
-    'const CLIPS = [',
-    "  { src: 'assets/a.mp4', label: 'Aerial' },",
-    "  { src: 'assets/b.mp4', label: 'Nature' },",
-    '];',
-  ].join('\n');
-
-  test('rewrites the indexed element string', () => {
-    const out = applyEditArrayElementString(CANVAS, src, 'CLIPS', 1, 'src', 'assets/new.mp4');
-    expect(out.source).toContain('"assets/new.mp4"');
-    expect(out.source).toContain("'assets/a.mp4'"); // sibling untouched
-  });
-
-  test('rejects a traversal / scheme value', () => {
-    expect(() => applyEditArrayElementString(CANVAS, src, 'CLIPS', 0, 'src', '../x')).toThrow(
-      CanvasEditError
-    );
-  });
-
-  test('throws on a missing array / element / field', () => {
-    expect(() =>
-      applyEditArrayElementString(CANVAS, src, 'NOPE', 0, 'src', 'assets/x.mp4')
-    ).toThrow(CanvasEditError);
-    expect(() =>
-      applyEditArrayElementString(CANVAS, src, 'CLIPS', 9, 'src', 'assets/x.mp4')
-    ).toThrow(CanvasEditError);
-  });
-});
-
-describe('enumerateClips — loose media beds (DDR-150 dogfood #5, audio replace)', () => {
-  test('an <Audio> bed OUTSIDE clips is listed in media[] with a cd-id; one inside a clip is not', () => {
-    const src = [
-      'const Comp = () => (',
-      '  <>',
-      '    <Sequence durationInFrames={60}><Video src="assets/a.mp4" /></Sequence>',
-      '    <Sequence durationInFrames={30}><Audio src="assets/voice.mp3" /></Sequence>',
-      '    <Audio src="assets/music.mp3" volume={0.6} />',
-      '  </>',
-      ');',
-      'function Canvas() { return <DCArtboard id="x"><VideoComp component={Comp} durationInFrames={60} fps={30} /></DCArtboard>; }',
-    ].join('\n');
-    const { clips, media } = enumerateClips(CANVAS, src, 'x');
-    expect(clips.length).toBe(2);
-    // ONLY the loose bed — the in-clip <Audio>/<Video> stay clip-scoped media.
-    expect(media.length).toBe(1);
-    expect(media[0]!.tag).toBe('Audio');
-    expect(media[0]!.src).toBe('assets/music.mp3');
-    expect(typeof media[0]!.cdId === 'string' || media[0]!.cdId === null).toBe(true);
-  });
-});
-
-describe('assembleCompSource — refs → comp (DDR-150 P4 Task 12)', () => {
-  test('lays video clips back-to-back as named sequences + parses + enumerates', () => {
-    const tsx = assembleCompSource(
-      'MyReel',
-      [
-        { src: 'assets/a.mp4', mediaKind: 'video', durationInFrames: 60 },
-        { src: 'assets/b.mp4', mediaKind: 'video', durationInFrames: 40 },
-      ],
-      { fps: 30 }
-    );
-    // Generated source is parseable + the enumerator sees exactly two clips…
-    const { clips, compName, durationInFrames } = enumerateClips('/abs/MyReel.tsx', tsx, 'reel');
-    expect(compName).toBe('Comp');
-    expect(clips.map((c) => c.mediaSrc)).toEqual(['assets/a.mp4', 'assets/b.mp4']);
-    // …as series beats butted back-to-back (enhanced-video-editing Task 20:
-    // the storyline is a <TransitionSeries> now — beats carry no `from`, the
-    // series computes their offsets)…
-    expect(clips[0]!.tag).toBe('TransitionSeries.Sequence');
-    expect(clips[0]!.durationInFrames).toBe(60);
-    expect(clips[1]!.durationInFrames).toBe(40);
-    // …with durable <Sequence name> identity so hand-edits land right.
-    expect(clips.map((c) => c.stableId)).toEqual(['name:clip-1', 'name:clip-2']);
-    // total duration = sum of clip durations.
-    expect(durationInFrames).toBe(100);
-    // and it passes the semantic gate.
-    expect(() => assertCompSemantics('/abs/MyReel.tsx', tsx)).not.toThrow();
-  });
-
-  test('audio clips become <Audio> beds under the reel (not sequenced)', () => {
-    const tsx = assembleCompSource('R', [
-      { src: 'assets/v.mp4', mediaKind: 'video', durationInFrames: 90 },
-      { src: 'assets/music.mp3', mediaKind: 'audio' },
-    ]);
-    expect(tsx).toContain('<Audio src="assets/music.mp3" />');
-    expect(tsx).toContain(`import { TransitionSeries } from '@remotion/transitions';`);
-    // Media elements MUST come from @remotion/media — importing them from
-    // 'remotion' is what made every assembled reel export muted (RCA
-    // issue-mp4-audio-export-html5audio-silent-degrade).
-    expect(tsx).toContain(`import { Video, Audio } from '@remotion/media';`);
-    expect(tsx).toContain(`import { AbsoluteFill } from 'remotion';`);
-    expect(tsx).not.toContain(`Audio } from 'remotion'`);
-    // total driven by the video clip's duration (audio doesn't extend it).
-    expect(enumerateClips('/abs/R.tsx', tsx, 'reel').durationInFrames).toBe(90);
-  });
-
-  test('defaults an unknown duration to fps*3', () => {
-    const tsx = assembleCompSource('R', [{ src: 'assets/v.mp4', mediaKind: 'video' }], { fps: 24 });
-    expect(enumerateClips('/abs/R.tsx', tsx, 'reel').clips[0]!.durationInFrames).toBe(72);
-  });
-
-  test('rejects a traversal / scheme src', () => {
-    expect(() =>
-      assembleCompSource('R', [{ src: '../../etc/passwd', mediaKind: 'video' }])
-    ).toThrow(CanvasEditError);
-    expect(() =>
-      assembleCompSource('R', [{ src: 'https://evil.example/x.mp4', mediaKind: 'video' }])
-    ).toThrow(CanvasEditError);
-  });
-
-  test('refuses an empty clip set', () => {
-    expect(() => assembleCompSource('R', [])).toThrow(CanvasEditError);
-  });
-});