@hyperframes/studio 0.8.48 → 0.8.50

package/src/hooks/useTimelineSelectionPreviewSync.test.tsx

@@ -175,7 +175,70 @@ describe("useTimelineSelectionPreviewSync", () => {
     harness.cleanup();
   });
 
-  it("warns once while retrying a timeline selection after preview refreshes", async () => {
+  it("does not clear the selection when the selected clip is not in timelineElements yet", async () => {
+    // A freshly-dropped clip is selected before the reload that adds it to
+    // timelineElements has completed. Bailing quietly here (like the
+    // DOM-node-not-ready case above) lets the later effect run, once the
+    // element exists, apply the selection instead of wiping it.
+    const { timelineElements } = makeSyncFixture();
+    const applyDomSelection = vi.fn();
+    const applyMarqueeSelection = vi.fn();
+    const onSelectionNotFound = vi.fn();
+    const buildDomSelectionForTimelineElement = vi.fn(async () => null);
+    const harness = renderHarness();
+
+    await harness.rerender({
+      selectedElementId: "clip-3",
+      selectedElementIds: new Set(["clip-3"]),
+      timelineElements,
+      domEditSelection: null,
+      domEditGroupSelections: [],
+      buildDomSelectionForTimelineElement,
+      applyDomSelection,
+      applyMarqueeSelection,
+      onSelectionNotFound,
+    });
+
+    // Still within the retry grace window: quiet, not yet a warning.
+    expect(onSelectionNotFound).not.toHaveBeenCalled();
+    expect(applyDomSelection).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("does not shrink a pasted or duplicated group's selection when only some members have appeared yet", async () => {
+    // Paste/duplicate of a group selects every new id up front; one member
+    // (clip-1) is already in timelineElements, the other (a fresh paste/dup
+    // target, "clip-3") is not yet. Applying only the resolved member would
+    // silently drop the rest of the group from the store.
+    const { firstSelection, timelineElements, selectionById } = makeSyncFixture();
+    const applyDomSelection = vi.fn();
+    const applyMarqueeSelection = vi.fn();
+    const onSelectionNotFound = vi.fn();
+    const buildDomSelectionForTimelineElement = vi.fn(async (element: TimelineElement) => {
+      return selectionById.get(element.id) ?? firstSelection;
+    });
+    const harness = renderHarness();
+
+    await harness.rerender({
+      selectedElementId: "clip-1",
+      selectedElementIds: new Set(["clip-1", "clip-3"]),
+      timelineElements,
+      domEditSelection: null,
+      domEditGroupSelections: [],
+      buildDomSelectionForTimelineElement,
+      applyDomSelection,
+      applyMarqueeSelection,
+      onSelectionNotFound,
+    });
+
+    // Still within the retry grace window: quiet, not yet a warning.
+    expect(onSelectionNotFound).not.toHaveBeenCalled();
+    expect(applyDomSelection).not.toHaveBeenCalled();
+    expect(applyMarqueeSelection).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("stays quiet through retries and resolves once the preview refreshes", async () => {
     const { secondSelection, timelineElements } = makeSyncFixture();
     const applyDomSelection = vi.fn();
     const applyMarqueeSelection = vi.fn();
@@ -199,7 +262,7 @@ describe("useTimelineSelectionPreviewSync", () => {
       onSelectionNotFound,
     });
 
-    expect(onSelectionNotFound).toHaveBeenCalledOnce();
+    expect(onSelectionNotFound).not.toHaveBeenCalled();
     expect(applyDomSelection).not.toHaveBeenCalled();
 
     await harness.rerender({
@@ -214,7 +277,7 @@ describe("useTimelineSelectionPreviewSync", () => {
       onSelectionNotFound,
     });
 
-    expect(onSelectionNotFound).toHaveBeenCalledOnce();
+    expect(onSelectionNotFound).not.toHaveBeenCalled();
 
     previewReady = true;
     await harness.rerender({
@@ -230,6 +293,155 @@ describe("useTimelineSelectionPreviewSync", () => {
     });
 
     expect(applyDomSelection).toHaveBeenCalledWith(secondSelection);
+    expect(onSelectionNotFound).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("degrades to the resolvable subset once a group member never resolves", async () => {
+    // clip-2 is a permanent hold-out (deleted out of band, a stale id, or
+    // anything else that will never build a selection). Retrying forever
+    // would leave the whole group's selection stuck; after a few attempts,
+    // apply the members that did resolve instead.
+    const { firstSelection, timelineElements } = makeSyncFixture();
+    const applyDomSelection = vi.fn();
+    const applyMarqueeSelection = vi.fn();
+    const onSelectionNotFound = vi.fn();
+    const buildDomSelectionForTimelineElement = vi.fn(async (element: TimelineElement) =>
+      element.id === "clip-1" ? firstSelection : null,
+    );
+    const selectedElementIds = new Set(["clip-1", "clip-2"]);
+    const harness = renderHarness();
+
+    for (let attempt = 0; attempt < 4; attempt++) {
+      await harness.rerender({
+        selectedElementId: "clip-1",
+        selectedElementIds,
+        timelineElements: [...timelineElements],
+        domEditSelection: null,
+        domEditGroupSelections: [],
+        buildDomSelectionForTimelineElement,
+        applyDomSelection,
+        applyMarqueeSelection,
+        onSelectionNotFound,
+      });
+    }
+
+    expect(onSelectionNotFound).toHaveBeenCalledOnce();
+    expect(applyDomSelection).toHaveBeenCalledWith(firstSelection);
+    expect(applyMarqueeSelection).not.toHaveBeenCalled();
+    harness.cleanup();
+  });
+
+  it("gives a fresh retry budget after deselecting a permanently-unresolvable selection", async () => {
+    // Same permanent hold-out as the test above, but the user deselects and
+    // reselects the exact same group afterward. Without resetting the retry
+    // budget on deselect, reselecting the same key resumes an already-
+    // exhausted count and degrades on the very first attempt with no warning.
+    const { firstSelection, timelineElements } = makeSyncFixture();
+    const applyDomSelection = vi.fn();
+    const applyMarqueeSelection = vi.fn();
+    const onSelectionNotFound = vi.fn();
+    const buildDomSelectionForTimelineElement = vi.fn(async (element: TimelineElement) =>
+      element.id === "clip-1" ? firstSelection : null,
+    );
+    const selectedElementIds = new Set(["clip-1", "clip-2"]);
+    const harness = renderHarness();
+
+    for (let attempt = 0; attempt < 4; attempt++) {
+      await harness.rerender({
+        selectedElementId: "clip-1",
+        selectedElementIds,
+        timelineElements: [...timelineElements],
+        domEditSelection: null,
+        domEditGroupSelections: [],
+        buildDomSelectionForTimelineElement,
+        applyDomSelection,
+        applyMarqueeSelection,
+        onSelectionNotFound,
+      });
+    }
+    expect(onSelectionNotFound).toHaveBeenCalledOnce();
+
+    await harness.rerender({
+      selectedElementId: null,
+      selectedElementIds: new Set(),
+      timelineElements: [...timelineElements],
+      domEditSelection: null,
+      domEditGroupSelections: [],
+      buildDomSelectionForTimelineElement,
+      applyDomSelection,
+      applyMarqueeSelection,
+      onSelectionNotFound,
+    });
+
+    for (let attempt = 0; attempt < 4; attempt++) {
+      await harness.rerender({
+        selectedElementId: "clip-1",
+        selectedElementIds,
+        timelineElements: [...timelineElements],
+        domEditSelection: null,
+        domEditGroupSelections: [],
+        buildDomSelectionForTimelineElement,
+        applyDomSelection,
+        applyMarqueeSelection,
+        onSelectionNotFound,
+      });
+    }
+
+    expect(onSelectionNotFound).toHaveBeenCalledTimes(2);
+    harness.cleanup();
+  });
+
+  it("resolves every member of a large selection concurrently, not one network round trip at a time", async () => {
+    const elementCount = 30;
+    const timelineElements: TimelineElement[] = Array.from({ length: elementCount }, (_, i) => ({
+      id: `clip-${i}`,
+      domId: `clip-${i}`,
+      tag: "div",
+      start: i,
+      duration: 1,
+      track: i % 4,
+    }));
+    const selectionById = new Map(
+      timelineElements.map((el) => {
+        const domEl = document.createElement("div");
+        domEl.id = el.id;
+        return [el.id, makeSelection(el.id, domEl)];
+      }),
+    );
+    let inFlight = 0;
+    let maxInFlight = 0;
+    const buildDomSelectionForTimelineElement = vi.fn(async (element: TimelineElement) => {
+      inFlight += 1;
+      maxInFlight = Math.max(maxInFlight, inFlight);
+      // Stands in for the network round trip: yields once so every member's
+      // call has a chance to start before any of them finish.
+      await Promise.resolve();
+      inFlight -= 1;
+      return selectionById.get(element.id) ?? null;
+    });
+    const applyDomSelection = vi.fn();
+    const applyMarqueeSelection = vi.fn();
+    const harness = renderHarness();
+
+    await harness.rerender({
+      selectedElementId: timelineElements[0].id,
+      selectedElementIds: new Set(timelineElements.map((el) => el.id)),
+      timelineElements,
+      domEditSelection: null,
+      domEditGroupSelections: [],
+      buildDomSelectionForTimelineElement,
+      applyDomSelection,
+      applyMarqueeSelection,
+      onSelectionNotFound: vi.fn(),
+    });
+
+    expect(buildDomSelectionForTimelineElement).toHaveBeenCalledTimes(elementCount);
+    // A sequential loop never has more than one call in flight at once; this
+    // asserts every member's probe started before any of them resolved.
+    expect(maxInFlight).toBe(elementCount);
+    expect(applyMarqueeSelection).toHaveBeenCalledOnce();
+    expect(applyMarqueeSelection.mock.calls[0]?.[0]).toHaveLength(elementCount);
     harness.cleanup();
   });
 });

package/src/hooks/useTimelineSelectionPreviewSync.ts

@@ -3,6 +3,7 @@ import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { resolveTimelineIdForSelection } from "../utils/studioHelpers";
 import { logSelect } from "../utils/selectDebug";
+import { recordRetryAttempt, type RetryBudgetState } from "../utils/retryBudget";
 
 interface UseTimelineSelectionPreviewSyncParams {
   selectedElementId: string | null;
@@ -27,6 +28,12 @@ interface UseTimelineSelectionPreviewSyncParams {
   onSelectionNotFound: () => void;
 }
 
+// A member still resolving (a just-dropped/pasted/duplicated clip, or a preview
+// still reloading) heals within a few retries. One that never will (deleted out
+// of band, a stale id) would otherwise bail forever; past this cap, apply
+// whatever did resolve instead of leaving the group selection stuck.
+const MAX_UNRESOLVED_SYNC_RETRIES = 3;
+
 function orderSelectedIds(ids: Set<string>, anchor: string | null): string[] {
   const ordered = [...ids];
   if (!anchor || !ids.has(anchor)) return ordered;
@@ -63,6 +70,36 @@ function anchorIsOutsideSelection(anchor: string | null, selectedIds: string[]):
   return anchor !== null && !selectedIds.includes(anchor);
 }
 
+async function resolveSelectionsForIds(
+  ids: string[],
+  timelineElements: TimelineElement[],
+  buildDomSelectionForTimelineElement: UseTimelineSelectionPreviewSyncParams["buildDomSelectionForTimelineElement"],
+): Promise<DomEditSelection[]> {
+  // Each element's resolution fires its own network probe; a selection of N
+  // members used to pay N sequential round trips here instead of one.
+  const elements = ids
+    .map((id) => timelineElements.find((item) => (item.key ?? item.id) === id))
+    .filter((element): element is TimelineElement => Boolean(element));
+  const resolved = await Promise.all(
+    elements.map((element) => buildDomSelectionForTimelineElement(element)),
+  );
+  return resolved.filter((selection): selection is DomEditSelection => Boolean(selection));
+}
+
+function applyResolvedSelections(
+  selections: DomEditSelection[],
+  applyDomSelection: UseTimelineSelectionPreviewSyncParams["applyDomSelection"],
+  applyMarqueeSelection: UseTimelineSelectionPreviewSyncParams["applyMarqueeSelection"],
+): void {
+  if (selections.length === 0) {
+    applyDomSelection(null, { revealPanel: false });
+  } else if (selections.length === 1) {
+    applyDomSelection(selections[0]);
+  } else {
+    applyMarqueeSelection(selections, false);
+  }
+}
+
 export function useTimelineSelectionPreviewSync({
   selectedElementId,
   selectedElementIds,
@@ -84,6 +121,7 @@ export function useTimelineSelectionPreviewSync({
   const domEditGroupSelectionsRef = useRef(domEditGroupSelections);
   const lastSyncedSelectedKeyRef = useRef("");
   const missingSelectionKeyRef = useRef("");
+  const unresolvedAttemptsRef = useRef<RetryBudgetState<string>>({ id: "", count: 0 });
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
 
@@ -109,6 +147,10 @@ export function useTimelineSelectionPreviewSync({
 
     if (selectedIds.length === 0) {
       missingSelectionKeyRef.current = "";
+      // A deselect is the one unambiguous "new attempt" signal: without it, reselecting the
+      // same permanently-unresolvable id later picks up an already-exhausted retry budget
+      // and skips straight to the degraded fallback instead of getting a fresh grace window.
+      unresolvedAttemptsRef.current = { id: "", count: 0 };
       // The timeline holds nothing, so the canvas is about to hold nothing either.
       // This is the path that silently drops a selection the user can still see.
       logSelect("timeline-empty", {
@@ -134,46 +176,35 @@ export function useTimelineSelectionPreviewSync({
       onSelectionNotFound();
     };
     const syncSelection = async () => {
-      const selections: DomEditSelection[] = [];
-      let resolvableCount = 0;
-      for (const id of selectedIds) {
-        const element = timelineElements.find((item) => (item.key ?? item.id) === id);
-        if (!element) continue;
-        resolvableCount += 1;
-        const selection = await buildDomSelectionForTimelineElement(element);
-        if (selection) selections.push(selection);
-      }
+      const selections = await resolveSelectionsForIds(
+        selectedIds,
+        timelineElements,
+        buildDomSelectionForTimelineElement,
+      );
       if (cancelled) return;
-      // The store is the source of truth: applying a partial set would write that
-      // shrunk set back and silently drop the members whose DOM node was not ready.
-      // Bail instead; a later effect run (on timelineElements/DOM change) applies the
-      // full set once every resolvable member has a live node.
-      if (selections.length < resolvableCount) {
-        warnSelectionMissingOnce();
-        // Bailing keeps whatever the canvas already held, and Delete acts on the
-        // canvas first — so an anchor pointing OUTSIDE this selection is an
-        // element the user is no longer looking at, and deleting it is the
-        // damage. Only that goes: a member still resolving has no anchor of its
-        // own here and is left for the later run. Quietly, because announcing
-        // the clear would deselect the clip that was just picked.
-        if (anchorIsOutsideSelection(currentAnchor, selectedIds)) {
-          applyDomSelection(null, { revealPanel: false, announce: false });
+      if (selections.length < selectedIds.length) {
+        if (recordRetryAttempt(unresolvedAttemptsRef, selectedKey, MAX_UNRESOLVED_SYNC_RETRIES)) {
+          // Still within the retry grace window: stay quiet (warn only once
+          // exhausted, below). Delete acts on the canvas first, so only an
+          // anchor OUTSIDE this selection is cleared here, quietly.
+          if (anchorIsOutsideSelection(currentAnchor, selectedIds)) {
+            applyDomSelection(null, { revealPanel: false, announce: false });
+          }
+          return;
         }
-        return;
+        // Budget exhausted: warn once (missingSelectionKeyRef dedupes further
+        // reruns of this same still-unresolved key) and apply whatever did resolve.
+        warnSelectionMissingOnce();
+      } else {
+        unresolvedAttemptsRef.current = { id: "", count: 0 };
+        missingSelectionKeyRef.current = "";
       }
-      missingSelectionKeyRef.current = "";
       logSelect("timeline-sync", {
         wanted: selectedIds.length,
         had: currentIds.length,
         resolved: selections.length,
       });
-      if (selections.length === 0) {
-        applyDomSelection(null, { revealPanel: false });
-      } else if (selections.length === 1) {
-        applyDomSelection(selections[0]);
-      } else {
-        applyMarqueeSelection(selections, false);
-      }
+      applyResolvedSelections(selections, applyDomSelection, applyMarqueeSelection);
     };
 
     void syncSelection();

package/src/player/components/ClipContextMenu.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
-import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
@@ -13,8 +13,14 @@ interface ClipContextMenuProps {
   onClose: () => void;
   onSplit: (element: TimelineElement, splitTime: number) => void;
   onDelete: (element: TimelineElement) => void;
+  onCopy?: () => boolean;
+  onPaste?: () => Promise<void>;
+  onDuplicate?: () => Promise<boolean>;
+  canPaste?: boolean;
 }
 
+// A menu with many independently gated items (Split/Delete/Copy/Paste/Duplicate).
+// fallow-ignore-next-line complexity
 export const ClipContextMenu = memo(function ClipContextMenu({
   x,
   y,
@@ -23,15 +29,22 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onClose,
   onSplit,
   onDelete,
+  onCopy,
+  onPaste,
+  onDuplicate,
+  canPaste,
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
-
-  const menuWidth = 200;
-  const menuHeight = 80;
-  const overflowY = y + menuHeight - window.innerHeight;
-  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
-  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+  // The right-clicked clip's own id: a member of the live multi-selection
+  // means Copy/Duplicate act on the whole group, matching onContextMenuClip's
+  // selection-preserving behaviour for a right-click inside it.
+  const selectionSize = usePlayerStore((s) => {
+    const id = element.key ?? element.id;
+    return s.selectedElementIds.size > 1 && s.selectedElementIds.has(id)
+      ? s.selectedElementIds.size
+      : 1;
+  });
 
   const isSplittable = canSplitElement(element) && ["video", "audio", "img"].includes(element.tag);
   const canSplit =
@@ -43,6 +56,23 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ? `Split at ${currentTime.toFixed(2)}s`
       : "Split (move playhead inside clip)";
 
+  const clipboardItemCount = [onCopy, onPaste, onDuplicate].filter(Boolean).length;
+  const rowCount = (splitLabel ? 1 : 0) + clipboardItemCount + 1; // + Delete, always present
+  const dividerCount = (splitLabel ? 1 : 0) + (clipboardItemCount > 0 ? 1 : 0);
+  const menuWidth = 200;
+  const menuHeight = rowCount * 30 + dividerCount * 9 + 8;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+
+  // Same enabled/disabled menu-item pattern as the sibling TrackGapContextMenu.
+  const itemClass = (enabled: boolean) =>
+    `w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none${
+      enabled
+        ? " focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer"
+        : " text-neutral-600 cursor-not-allowed"
+    }`;
+
   return createPortal(
     <div
       ref={menuRef}
@@ -76,6 +106,56 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         </>
       )}
 
+      {(onCopy || onPaste || onDuplicate) && (
+        <>
+          {onCopy && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(true)}
+              onClick={() => {
+                onCopy();
+                onClose();
+              }}
+            >
+              <span>{selectionSize > 1 ? `Copy ${selectionSize} clips` : "Copy"}</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘C</span>
+            </button>
+          )}
+          {onPaste && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(!!canPaste)}
+              disabled={!canPaste}
+              onClick={() => {
+                if (!canPaste) return;
+                void onPaste();
+                onClose();
+              }}
+            >
+              <span>Paste</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘V</span>
+            </button>
+          )}
+          {onDuplicate && (
+            <button
+              type="button"
+              role="menuitem"
+              className={itemClass(true)}
+              onClick={() => {
+                void onDuplicate();
+                onClose();
+              }}
+            >
+              <span>{selectionSize > 1 ? `Duplicate ${selectionSize} clips` : "Duplicate"}</span>
+              <span className="text-neutral-500 text-[10px] ml-3">⌘D</span>
+            </button>
+          )}
+          <div className="my-1 border-t border-neutral-700/60" />
+        </>
+      )}
+
       <button
         type="button"
         role="menuitem"

package/src/player/components/Timeline.tsx

@@ -1,7 +1,7 @@
 import { useRef, useMemo, useCallback, useState, memo } from "react";
 import { useAdjustedBeatAnalysis, useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-import { useExpandedTimelineElements } from "../hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../hooks/useTimelineRowElements";
 import { defaultTimelineTheme } from "./timelineTheme";
 import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
 import { useTimelinePlayhead } from "./useTimelinePlayhead";
@@ -43,6 +43,7 @@ import { useTimelineClipRenderWindow } from "./useTimelineClipRenderWindow";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
 import { useTimelineLaneMoveRefresh } from "./useTimelineLaneMoveRefresh";
 import { useTimelineLogicalFocus } from "./useTimelineLogicalFocus";
+import { useClipContextMenu } from "./useTimelineClipContextMenu";
 
 export {
   shouldAutoScrollTimeline,
@@ -79,6 +80,10 @@ export const Timeline = memo(function Timeline({
   onBlockedEditAttempt: onBlockedEditAttemptOverride,
   onSplitElement: onSplitElementOverride,
   onSelectElement,
+  onCopyClip,
+  onPasteClip,
+  onDuplicateClip,
+  canPasteClip,
   theme: themeOverrides,
   sessionEpoch = 0,
 }: TimelineProps = {}) {
@@ -106,7 +111,7 @@ export const Timeline = memo(function Timeline({
   const refreshAfterLaneMove = useTimelineLaneMoveRefresh();
   useMusicBeatAnalysis();
   const rawElements = usePlayerStore((s) => s.elements);
-  const expandedElements = useExpandedTimelineElements();
+  const expandedElements = useTimelineRowElements();
   const adjustedBeatAnalysis = useAdjustedBeatAnalysis();
   const duration = usePlayerStore((s) => s.duration);
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
@@ -208,6 +213,7 @@ export const Timeline = memo(function Timeline({
     onMoveElement: pinnedOnMoveElement,
     onMoveElements: pinnedOnMoveElements,
   });
+  const onContextMenuClip = useClipContextMenu(onSelectElement, dismissGapMenu, setClipContextMenu);
 
   const {
     draggedClip,
@@ -492,6 +498,7 @@ export const Timeline = memo(function Timeline({
           rangeSelection={rangeSelection}
           marqueeRect={marqueeRect}
           laneGapStrips={laneGapStrips}
+          dropPreview={assetDrop.dropPreview}
           theme={theme}
           displayTrackOrder={displayLayout.displayTrackOrder}
           rowHeights={displayLayout.displayRowHeights}
@@ -548,18 +555,7 @@ export const Timeline = memo(function Timeline({
           onShiftClickKeyframe={onShiftClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
           onContextMenuKeyframe={onContextMenuKeyframe}
-          onContextMenuClip={(e, el) => {
-            e.preventDefault();
-            setSelectedElementId(el.key ?? el.id);
-            onSelectElement?.(el);
-            dismissGapMenu();
-            setClipContextMenu({
-              x: e.clientX,
-              y: e.clientY,
-              element: el,
-              sessionEpoch: usePlayerStore.getState().timelineSessionEpoch,
-            });
-          }}
+          onContextMenuClip={onContextMenuClip}
           onContextMenuLane={(e, track, time) => {
             if (draggedClip?.started || resizingClip) return;
             setClipContextMenu(null);
@@ -588,6 +584,10 @@ export const Timeline = memo(function Timeline({
         onSplitElement={onSplitElement}
         pinZoomBeforeEdit={pinZoomBeforeEdit}
         onDeleteElement={_onDeleteElement}
+        onCopyClip={onCopyClip}
+        onPasteClip={onPasteClip}
+        onDuplicateClip={onDuplicateClip}
+        canPasteClip={canPasteClip}
         gapContextMenu={gapMenuModel}
         onDismissGapContextMenu={dismissGapMenu}
         onCloseTrackGap={closeTrackGap}

package/src/player/components/TimelineCanvas.tsx

@@ -39,12 +39,22 @@ interface TimelineCanvasProps extends TimelineLaneBaseProps {
   playheadRef: React.RefObject<HTMLDivElement | null>;
   /** Gap strips: loud on gap-menu-row hover, quiet on the selected clip's lane. */
   laneGapStrips: TimelineLaneGapStrips[];
+  /** Landing spot of an outside drag in progress, or null. */
+  dropPreview: { start: number; track: number } | null;
 }
 
+// A dropped clip's length is unknown until it lands; the preview shows a default.
+const DROP_PREVIEW_SECONDS = 3;
+
 export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvasProps) {
   const { draggedClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
   const draggedRowIndex =
     draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
+  const dropTrackIndex = props.dropPreview
+    ? displayTrackOrder.indexOf(props.dropPreview.track)
+    : -1;
+  // A track not in the order is a new track, drawn one row past the last lane.
+  const dropRowIndex = dropTrackIndex < 0 ? displayTrackOrder.length : dropTrackIndex;
   const draggedRowHeight = getTimelineRowHeight(draggedRowIndex, props.rowHeights);
   // A clip bar in an EXPANDED row still renders at TRACK_H (the property lanes
   // occupy the rest of the row — see TimelineLanes' clipHeight), so the drag
@@ -171,6 +181,26 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         />
       )}
 
+      {/* Drop preview: where an asset or file dragged in from outside will land
+          (a row past the last lane means a new track). */}
+      {props.dropPreview && (
+        <div
+          aria-hidden="true"
+          data-testid="timeline-drop-preview"
+          className="absolute pointer-events-none"
+          style={{
+            top: getTimelineRowTop(dropRowIndex, props.rowHeights) + CLIP_Y,
+            left: props.contentOrigin + props.dropPreview.start * props.pps,
+            width: DROP_PREVIEW_SECONDS * props.pps,
+            height: TRACK_H - CLIP_Y * 2,
+            border: "1px solid rgba(60,230,172,0.55)",
+            background: "rgba(60,230,172,0.12)",
+            borderRadius: 4,
+            zIndex: 30,
+          }}
+        />
+      )}
+
       {/* Insertion line — a new track will be inserted at this boundary on drop.
           Shown while the pointer is near a lane boundary (insert mode). */}
       {draggedClip?.started && draggedClip.insertRow != null && (