@hyperframes/studio 0.8.48 → 0.8.50

package/src/components/nle/PreviewPane.test.tsx

@@ -0,0 +1,52 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PreviewPane } from "./PreviewPane";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../editor/PreviewGuides", () => ({ PreviewGuides: () => <i data-testid="guides" /> }));
+vi.mock("../../player", () => ({ PlayerControls: () => null }));
+vi.mock("./NLEPreview", () => ({ NLEPreview: () => null }));
+vi.mock("./CompositionBreadcrumb", () => ({ CompositionBreadcrumb: () => null }));
+vi.mock("./AssetPreviewOverlay", () => ({ AssetPreviewOverlay: () => null }));
+vi.mock("./usePreviewBlockDrop", () => ({
+  usePreviewBlockDrop: () => ({
+    isDragOver: false,
+    handleDragEnter: vi.fn(),
+    handleDragOver: vi.fn(),
+    handleDragLeave: vi.fn(),
+    handleDrop: vi.fn(),
+  }),
+}));
+vi.mock("./NLEContext", () => ({
+  useNLEContext: () => ({
+    projectId: "p",
+    iframeRef: { current: null },
+    togglePlay: vi.fn(),
+    seek: vi.fn(),
+    onIframeLoad: vi.fn(),
+    compositionStack: [{ previewUrl: undefined }],
+    handleNavigateComposition: vi.fn(),
+    setCompositionLoading: vi.fn(),
+    timelineDisabled: false,
+    hasLoadedOnceRef: { current: false },
+    previewCompositionSize: null,
+    setPreviewCompositionSize: vi.fn(),
+  }),
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("PreviewPane", () => {
+  it("draws the guides in the pane itself, not through the previewOverlay slot", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    act(() => createRoot(host).render(<PreviewPane />));
+    expect(host.querySelector('[data-testid="guides"]')).not.toBeNull();
+  });
+});

package/src/components/nle/PreviewPane.tsx

@@ -6,6 +6,7 @@ import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
 import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
 import { useNLEContext } from "./NLEContext";
 import { AssetPreviewOverlay } from "./AssetPreviewOverlay";
+import { PreviewGuides } from "../editor/PreviewGuides";
 
 function subscribeFullscreen(cb: () => void) {
   document.addEventListener("fullscreenchange", cb);
@@ -142,6 +143,7 @@ export function PreviewPane({
           )}
           <AssetPreviewOverlay />
         </div>
+        <PreviewGuides iframeRef={iframeRef} />
         {!isFullscreen && previewOverlay}
       </div>
       {/* Transport row: no own background or border — the controls sit flat on

package/src/components/nle/TimelinePane.tsx

@@ -102,6 +102,12 @@ export interface TimelinePaneProps {
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  /** Copy/paste/duplicate act on the store's own selection, not a passed
+   *  element, so unlike onDeleteElement they need no composition-basis wrapper. */
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
 }
 
 // fallow-ignore-next-line complexity
@@ -116,6 +122,10 @@ export function TimelinePane({
   onCompositionDrop,
   onBlockedEditAttempt,
   onSelectTimelineElement,
+  onCopyClip,
+  onPasteClip,
+  onDuplicateClip,
+  canPasteClip,
 }: TimelinePaneProps) {
   const {
     seek,
@@ -288,6 +298,10 @@ export function TimelinePane({
             onBlockedEditAttempt={onBlockedEditAttempt}
             onSplitElement={handleSplitElement}
             onSelectElement={onSelectTimelineElement}
+            onCopyClip={onCopyClip}
+            onPasteClip={onPasteClip}
+            onDuplicateClip={onDuplicateClip}
+            canPasteClip={canPasteClip}
           />
         </div>
         {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx

@@ -24,7 +24,7 @@ import {
 afterEach(() => {
   document.body.innerHTML = "";
   // Wrapped in act: mounted harnesses subscribe to the store via
-  // useExpandedTimelineElements, so the reset re-renders them.
+  // useTimelineRowElements, so the reset re-renders them.
   act(() => usePlayerStore.getState().setElements([]));
 });
 

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -1,6 +1,6 @@
 import { useCallback, useRef } from "react";
 import { usePlayerStore } from "../../player";
-import { useExpandedTimelineElements } from "../../player/hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../../player/hooks/useTimelineRowElements";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
   displayTrackOrder,
@@ -41,7 +41,7 @@ export interface MirrorZOrderInput {
  * commitZMirrorLaneMove) — the shared key is unique per gesture
  * (zReorderCoalesceKey's gesture seq), so the fold stays gesture-scoped.
  *
- * Element source: `useExpandedTimelineElements()` — the same expanded display
+ * Element source: `useTimelineRowElements()` — the same expanded display
  * set the Timeline renders and the resolver expects (post-normalizeToZones
  * lanes, expanded sub-comp children on their synthetic rows). No new expansion
  * is built here.
@@ -141,7 +141,7 @@ function useMirrorLaneMoveCommit(): (
   coalesceKey: string,
   resolveMove: (element: TimelineElement, elements: TimelineElement[]) => ZMirrorLaneMove,
 ) => Promise<boolean> {
-  const elements = useExpandedTimelineElements();
+  const elements = useTimelineRowElements();
   const elementsRef = useRef(elements);
   elementsRef.current = elements;
   const { onMoveElements } = useTimelineEditContextOptional();

package/src/hooks/appHotkeysDispatch.ts

@@ -46,6 +46,7 @@ export interface HotkeyCallbacks {
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
+  handleDuplicate: () => Promise<boolean>;
   onResetKeyframes: () => boolean;
   onDeleteSelectedKeyframes: () => void;
   onToggleRecording?: () => void;
@@ -127,6 +128,16 @@ export function dispatchModifierKey(
       }
       return true;
     }
+    if (key === "d") {
+      // Always own this key here, even with nothing selected — otherwise the
+      // browser's own Cmd+D (bookmark this page) fires over the editor.
+      event.preventDefault();
+      if (usePlayerStore.getState().selectedElementId) {
+        trackStudioEvent("keyboard_shortcut", { action: "duplicate" });
+        void cb.handleDuplicate();
+      }
+      return true;
+    }
   }
   return false;
 }

package/src/hooks/timelineAudioGroupCreate.ts

@@ -8,7 +8,7 @@
 
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
-import { useExpandedTimelineElements } from "../player/hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../player/hooks/useTimelineRowElements";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
@@ -272,7 +272,7 @@ export function useAudioGroupCarveAssignment({
   groupId: string,
   groupLabel?: string,
 ) => Promise<void> {
-  const expandedElements = useExpandedTimelineElements();
+  const expandedElements = useTimelineRowElements();
   return useCallback(
     async (clipIds: readonly string[], groupId: string, groupLabel?: string) => {
       if (isRecordingRef?.current) {

package/src/hooks/timelineTrackVisibility.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { reseekPreviewAtTime } from "../player/hooks/timelineSyncHydration";
-import { useExpandedTimelineElements } from "../player/hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../player/hooks/useTimelineRowElements";
 import { applySoftReloadFinalization } from "../utils/gsapSoftReload";
 import {
   timelineTrackOrder,
@@ -295,7 +295,7 @@ export function useTimelineTrackVisibilityEditing({
   // virtual sub-comp children carry their own (display.track + idx) track numbers,
   // so filtering the raw store list by a virtual track number would hide the wrong
   // outer-scene sibling sharing that index.
-  const expandedElements = useExpandedTimelineElements();
+  const expandedElements = useTimelineRowElements();
   return useCallback(
     async (track: number, hidden: boolean, displayNumber?: number | null) => {
       if (isRecordingRef?.current) {
@@ -354,15 +354,7 @@ export function useTimelineElementVisibilityEditing({
   elementKey: string | readonly string[],
   hidden: boolean,
 ) => Promise<void> {
-  // Resolve against the EXPANDED rows, not the raw store list — a nested
-  // sub-composition child has no entry of its own in the raw list (only its
-  // host does), so an elementKey for such a child (the
-  // `sourceFile#domId`-shaped virtual key `resolveTimelineIdForSelection`
-  // falls back to) would never match anything there and Hide All would
-  // silently no-op for it. The expanded list synthesizes a real, patchable
-  // TimelineElement (with matching key/domId/sourceFile) for each visible
-  // child whenever its host is currently expanded.
-  const expandedElements = useExpandedTimelineElements();
+  const expandedElements = useTimelineRowElements();
   return useCallback(
     async (elementKey: string | readonly string[], hidden: boolean) => {
       if (isRecordingRef?.current) {
@@ -371,6 +363,11 @@ export function useTimelineElementVisibilityEditing({
       }
       const pid = projectIdRef.current;
       if (!pid) return;
+      const keys = typeof elementKey === "string" ? [elementKey] : elementKey;
+      if (!expandedElements.some((item) => keys.includes(item.key ?? item.id))) {
+        showToast("This element is inside a sub-composition and has no timeline row to hide.");
+        return;
+      }
       try {
         await toggleTimelineElementHidden({
           projectId: pid,

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -93,6 +93,7 @@ function Harness() {
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),
+    handleDuplicate: vi.fn(async () => false),
     onResetKeyframes: vi.fn(() => false),
     onDeleteSelectedKeyframes: keyframeDelete,
   });

package/src/hooks/useAppHotkeys.ts

@@ -114,6 +114,7 @@ interface UseAppHotkeysParams {
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
+  handleDuplicate: () => Promise<boolean>;
   onResetKeyframes: () => boolean;
   onDeleteSelectedKeyframes: () => void;
   onAfterUndoRedo?: () => void;
@@ -150,6 +151,7 @@ export function useAppHotkeys({
   handleCopy,
   handlePaste,
   handleCut,
+  handleDuplicate,
   onResetKeyframes,
   onDeleteSelectedKeyframes,
   onAfterUndoRedo,
@@ -255,6 +257,7 @@ export function useAppHotkeys({
     handleCopy,
     handlePaste,
     handleCut,
+    handleDuplicate,
     onResetKeyframes,
     onDeleteSelectedKeyframes,
     onToggleRecording,

package/src/hooks/useAskAgentModal.ts

@@ -1,3 +1,4 @@
+import { formatTimelineBlock } from "../player/lib/describeClips";
 import { buildProjectApiPath } from "../utils/projectRouting";
 import { useState, useCallback, useRef, useEffect } from "react";
 import { copyTextToClipboard } from "../utils/clipboard";
@@ -92,6 +93,7 @@ export function useAskAgentModal({
       const prompt = buildElementAgentPrompt({
         selection: domEditSelection,
         currentTime: usePlayerStore.getState().currentTime,
+        timeline: formatTimelineBlock(usePlayerStore.getState().elements),
         tagSnippet,
         selectionContext: agentPromptSelectionContext,
         userInstruction,

package/src/hooks/useBlockHandlers.ts

@@ -6,6 +6,7 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { addBlockToProject } from "../utils/blockInstaller";
+import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
 import type { BlockParam } from "@hyperframes/core/registry";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
@@ -148,7 +149,9 @@ export function useBlockHandlers({
           previewIframe: previewIframeRef.current,
           currentTime: usePlayerStore.getState().currentTime,
         }),
-      );
+      ).then((result) => {
+        if (result) selectAndRevealTimelineElement(result.hostKey);
+      });
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall],
   );
@@ -184,7 +187,9 @@ export function useBlockHandlers({
           previewIframe: previewIframeRef.current,
           currentTime: usePlayerStore.getState().currentTime,
         }),
-      );
+      ).then((result) => {
+        if (result) selectAndRevealTimelineElement(result.hostKey);
+      });
     },
     [projectId, blockCtx, previewIframeRef, runBlockInstall],
   );

package/src/hooks/useClipboard.test.ts

@@ -0,0 +1,234 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { pasteTimelineClips, resolveFreeTrack, type PlacedClip } from "./useClipboard";
+import { extendRootDurationInSource } from "../utils/rootDuration";
+import type { TimelineClipboardClip } from "../utils/clipboardPayload";
+import type { TimelineElement } from "../player";
+
+const ROOT =
+  '<div id="claude-paper" data-composition-id="claude-paper" data-start="0" data-duration="10"></div>';
+
+function clip(id: string, start: number, duration: number, track: number): TimelineClipboardClip {
+  return {
+    html: `<audio id="${id}" src="typenew.mp3" data-start="${start}" data-duration="${duration}" data-track-index="${track}"></audio>`,
+    start,
+    duration,
+    track,
+  };
+}
+
+function liveElement(track: number, start: number, duration: number): TimelineElement {
+  return { id: `x-${track}`, tag: "audio", start, duration, track, authoredTrack: track };
+}
+
+describe("resolveFreeTrack", () => {
+  it("keeps the preferred track when nothing occupies it", () => {
+    const track = resolveFreeTrack({ track: 5, start: 10, duration: 1 }, []);
+    expect(track).toBe(5);
+  });
+
+  it("bumps to a new track when the preferred one overlaps in time", () => {
+    const taken: PlacedClip[] = [{ track: 5, start: 10.2, duration: 0.5 }];
+    const track = resolveFreeTrack({ track: 5, start: 10, duration: 1 }, taken);
+    expect(track).toBe(6);
+  });
+
+  it("keeps the preferred track when an occupant on it does not overlap in time", () => {
+    const taken: PlacedClip[] = [{ track: 5, start: 50, duration: 1 }];
+    const track = resolveFreeTrack({ track: 5, start: 10, duration: 1 }, taken);
+    expect(track).toBe(5);
+  });
+
+  it("picks the next track above the highest taken one, not just +1 from preferred", () => {
+    const taken: PlacedClip[] = [
+      { track: 5, start: 10, duration: 1 },
+      { track: 9, start: 30, duration: 1 },
+    ];
+    const track = resolveFreeTrack({ track: 5, start: 10.1, duration: 1 }, taken);
+    expect(track).toBe(10);
+  });
+});
+
+describe("pasteTimelineClips", () => {
+  it("anchors a single clip's data-start at the anchor time and keeps its track", () => {
+    const { content, ids } = pasteTimelineClips(ROOT, [clip("sfx-23", 21.61, 0.57, 132)], 40, []);
+    expect(content).toContain('data-start="40"');
+    expect(content).toContain('data-track-index="132"');
+    expect(ids).toEqual(["sfx-23"]);
+  });
+
+  it("preserves each clip's relative offset from the group's earliest clip", () => {
+    const clips = [
+      clip("sfx-23", 21.61, 0.57, 132),
+      clip("sfx-24", 21.73, 0.57, 133),
+      clip("sfx-25", 21.84, 0.57, 134),
+    ];
+    const { content } = pasteTimelineClips(ROOT, clips, 40, []);
+    // Offsets from the earliest clip (21.61): 0, 0.12, 0.23 -> 40, 40.12, 40.23
+    expect(content).toContain('id="sfx-23" src="typenew.mp3" data-start="40"');
+    expect(content).toContain('id="sfx-24" src="typenew.mp3" data-start="40.12"');
+    expect(content).toContain('id="sfx-25" src="typenew.mp3" data-start="40.23"');
+  });
+
+  it("moves a clip to a new track when its original track is occupied at the target time", () => {
+    const live = [liveElement(132, 40, 0.57)];
+    const { content } = pasteTimelineClips(ROOT, [clip("sfx-23", 21.61, 0.57, 132)], 40, live);
+    expect(content).not.toContain('data-track-index="132"');
+    expect(content).toMatch(/data-track-index="133"/);
+  });
+
+  it("strips the copied data-hf-id so a fresh one mints on next save", () => {
+    const clipWithHfId: TimelineClipboardClip = {
+      html: '<audio data-hf-id="hf-75o7" id="sfx-type-0" src="typenew.mp3" data-start="7.8" data-duration="0.57" data-track-index="109"></audio>',
+      start: 7.8,
+      duration: 0.57,
+      track: 109,
+    };
+    const { content } = pasteTimelineClips(ROOT, [clipWithHfId], 40, []);
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("strips a nested descendant's data-hf-id too, not just the root's", () => {
+    // A composition-instance clip's descendants carry their own hf-ids; a
+    // clone must remint all of them, not just the root, or the descendants
+    // collide with their originals the same way the root would.
+    const nested: TimelineClipboardClip = {
+      html: '<div data-hf-id="hf-root" id="comp-1" data-start="7.8" data-duration="0.57" data-track-index="109"><span data-hf-id="hf-child"></span></div>',
+      start: 7.8,
+      duration: 0.57,
+      track: 109,
+    };
+    const { content } = pasteTimelineClips(ROOT, [nested], 40, []);
+    expect(content).not.toContain("hf-root");
+    expect(content).not.toContain("hf-child");
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("does not strip text content that happens to contain the data-hf-id string", () => {
+    const withText: TimelineClipboardClip = {
+      html: '<div id="cap-1" data-start="7.8" data-duration="0.57" data-track-index="109"><span>talking about data-hf-id="hf-xyz" in my video</span></div>',
+      start: 7.8,
+      duration: 0.57,
+      track: 109,
+    };
+    const { content } = pasteTimelineClips(ROOT, [withText], 40, []);
+    expect(content).toContain('talking about data-hf-id="hf-xyz" in my video');
+  });
+
+  it("bumps the second clip in a batch off the first clip's own new track when their offsets collide", () => {
+    // Both clips start life a track apart but paste to overlapping times on
+    // the SAME track, so the second must dodge the first's placement, not
+    // just the live elements it was checked against.
+    const clips = [clip("sfx-23", 21.61, 0.57, 132), clip("sfx-24", 21.7, 0.57, 132)];
+    const { content } = pasteTimelineClips(ROOT, clips, 40, []);
+    expect(content).toContain(
+      'id="sfx-23" src="typenew.mp3" data-start="40" data-duration="0.57" data-track-index="132"',
+    );
+    expect(content).toContain(
+      'id="sfx-24" src="typenew.mp3" data-start="40.09" data-duration="0.57" data-track-index="133"',
+    );
+  });
+
+  it("dedupes an id that already exists in the target file", () => {
+    const withExisting = ROOT.replace(
+      "</div>",
+      '<audio id="sfx-23" data-start="1" data-duration="1" data-track-index="0"></audio></div>',
+    );
+    const { content, ids } = pasteTimelineClips(
+      withExisting,
+      [clip("sfx-23", 21.61, 0.57, 132)],
+      40,
+      [],
+    );
+    expect(ids[0]).not.toBe("sfx-23");
+    expect(ids[0]).toMatch(/^sfx-23-\d+$/);
+    expect(content).toContain(`id="${ids[0]}"`);
+  });
+
+  it("strips a single-quoted data-hf-id, not just a double-quoted one", () => {
+    const singleQuoted: TimelineClipboardClip = {
+      html: '<audio data-hf-id=\'hf-75o7\' id="sfx-type-0" src="typenew.mp3" data-start="7.8" data-duration="0.57" data-track-index="109"></audio>',
+      start: 7.8,
+      duration: 0.57,
+      track: 109,
+    };
+    const { content } = pasteTimelineClips(ROOT, [singleQuoted], 40, []);
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("strips data-hf-id even when an earlier attribute value contains a literal >", () => {
+    // A `>` inside title's value would close a bracket-scoped tag regex
+    // early, leaving data-hf-id (which comes after it) outside the matched
+    // span and unstripped. A real parser doesn't have this failure mode.
+    const gtInAttr: TimelineClipboardClip = {
+      html: '<div title="a > b" id="cap-1" data-hf-id="hf-xyz" data-start="7.8" data-duration="0.57" data-track-index="109"></div>',
+      start: 7.8,
+      duration: 0.57,
+      track: 109,
+    };
+    const { content } = pasteTimelineClips(ROOT, [gtInAttr], 40, []);
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("still strips data-hf-id from bare text with no element root", () => {
+    const noRoot: TimelineClipboardClip = {
+      html: 'text mentioning data-hf-id="hf-leak" with no tag at all',
+      start: 0,
+      duration: 1,
+      track: 0,
+    };
+    const { content } = pasteTimelineClips(ROOT, [noRoot], 0, []);
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("still strips data-hf-id from a tag the HTML parser hoists out of body (e.g. title)", () => {
+    // A <title> never reaches DOMParser's body, so stripHfIds's DOM walk sees
+    // no root element here -- this exercises the regex fallback, not the walk.
+    const hoisted: TimelineClipboardClip = {
+      html: '<title data-hf-id="hf-leak">x</title>',
+      start: 0,
+      duration: 1,
+      track: 0,
+    };
+    const { content } = pasteTimelineClips(ROOT, [hoisted], 0, []);
+    expect(content).not.toContain("data-hf-id");
+  });
+
+  it("captures the root's own id, not a data-id that happens to precede it", () => {
+    const withDataId: TimelineClipboardClip = {
+      html: '<audio data-id="not-the-id" id="sfx-23" src="typenew.mp3" data-start="21.61" data-duration="0.57" data-track-index="132"></audio>',
+      start: 21.61,
+      duration: 0.57,
+      track: 132,
+    };
+    const { ids } = pasteTimelineClips(ROOT, [withDataId], 40, []);
+    expect(ids).toEqual(["sfx-23"]);
+  });
+
+  it("reports the furthest clip end across the whole batch as requiredEnd, not just the last clip's", () => {
+    // The batch is placed in order sfx-23, sfx-24, sfx-25, but sfx-24 ends up
+    // the furthest forward once offsets are applied; requiredEnd must track
+    // the max across all placed clips, not whichever one the loop saw last.
+    const clips = [
+      clip("sfx-23", 21.61, 0.57, 132),
+      clip("sfx-24", 21.9, 5, 133),
+      clip("sfx-25", 21.73, 0.1, 134),
+    ];
+    const { requiredEnd } = pasteTimelineClips(ROOT, clips, 40, []);
+    expect(requiredEnd).toBeCloseTo(40.29 + 5, 2);
+  });
+});
+
+describe("pasteTimelineClips + extendRootDurationInSource", () => {
+  it("grows the root composition's duration when a paste lands past its current end", () => {
+    const pasted = pasteTimelineClips(ROOT, [clip("sfx-23", 21.61, 0.57, 132)], 40, []);
+    const extended = extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+    expect(extended).toContain('data-duration="40.57"');
+  });
+
+  it("leaves the root composition's duration unchanged when the paste fits inside it", () => {
+    const pasted = pasteTimelineClips(ROOT, [clip("sfx-23", 1, 0.5, 132)], 2, []);
+    const extended = extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+    expect(extended).toContain('data-duration="10"');
+  });
+});