@hyperframes/studio 0.8.49 → 0.8.50

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 && (

package/src/player/components/TimelineGestureOverlay.test.tsx

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { defaultTimelineTheme } from "./timelineTheme";
 import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
 import type { DraggedClipState } from "./timelineClipDragTypes";
@@ -65,6 +65,40 @@ describe("TimelineGestureOverlay", () => {
     act(() => root.unmount());
   });
 
+  it("asks for the same thumbnail frames as the clip at rest", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const renderClipContent = vi.fn(() => null);
+    act(() => {
+      root.render(
+        <TimelineGestureOverlay
+          drag={drag}
+          scrollRef={{
+            current: {
+              scrollLeft: 0,
+              scrollTop: 0,
+              getBoundingClientRect: () => ({ left: 0, top: 0 }),
+            } as HTMLDivElement,
+          }}
+          pixelsPerSecond={100}
+          rowHeight={42}
+          selectedElementId="hero"
+          currentTime={4}
+          theme={defaultTimelineTheme}
+          getTrackStyle={getTrackStyle}
+          renderClipContent={renderClipContent}
+        />,
+      );
+    });
+    expect(renderClipContent).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ rich: false }),
+    );
+    act(() => root.unmount());
+  });
+
   it("keeps the stable overlay host after terminal cleanup", () => {
     const host = document.createElement("div");
     document.body.append(host);

package/src/player/components/TimelineGestureOverlay.tsx

@@ -89,7 +89,7 @@ export const TimelineGestureOverlay = memo(function TimelineGestureOverlay({
               getTrackStyle(element.tag),
               renderClipContent,
               renderClipOverlay,
-              { priority: "interaction", rich: true },
+              { priority: "interaction", rich: false },
             )}
           </TimelineClip>
         </div>

package/src/player/components/TimelineLanes.test.tsx

@@ -70,6 +70,8 @@ interface RenderLanesOptions {
   draggedClip?: DraggedClipState | null;
   onToggleTrackHidden?: TimelineEditCallbacks["onToggleTrackHidden"];
   onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
+  hoveredClip?: string | null;
+  renderClipContent?: React.ComponentProps<typeof TimelineLanes>["renderClipContent"];
 }
 
 function renderLanes(options: RenderLanesOptions = {}): {
@@ -135,7 +137,8 @@ function renderLanes(options: RenderLanesOptions = {}): {
           laneCounts={laneCounts}
           selectedElementId={null}
           selectedElementIds={next.selectedElementIds ?? new Set()}
-          hoveredClip={null}
+          hoveredClip={next.hoveredClip ?? null}
+          renderClipContent={next.renderClipContent}
           draggedClip={next.draggedClip ?? null}
           draggedElement={null}
           multiDragPreview={next.multiDragPreview ?? null}
@@ -395,3 +398,21 @@ describe("TimelineLanes selection", () => {
     act(() => view.root.unmount());
   });
 });
+
+describe("TimelineLanes clip thumbnails", () => {
+  it("asks for the same frames at rest, hovered and selected", () => {
+    const rich: unknown[] = [];
+    const renderClipContent = vi.fn(
+      (_el: TimelineElement, _style: unknown, context: { rich: boolean }) => {
+        rich.push(context.rich);
+        return null;
+      },
+    );
+    const elements = [element("clip-a", TRACK_A)];
+    const view = renderLanes({ elements, renderClipContent });
+    view.rerender({ elements, renderClipContent, hoveredClip: "clip-a" });
+    view.rerender({ elements, renderClipContent, selectedElementIds: new Set(["clip-a"]) });
+    expect(new Set(rich)).toEqual(new Set([false]));
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/TimelineOverlays.tsx

@@ -52,6 +52,10 @@ interface TimelineOverlaysProps {
   onSplitElement: TimelineEditCallbacks["onSplitElement"];
   pinZoomBeforeEdit: () => void;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
   gapContextMenu: TrackGapContextMenuState | null;
   onDismissGapContextMenu: () => void;
   onCloseTrackGap: () => void;
@@ -119,6 +123,10 @@ export function TimelineOverlays({
   onSplitElement,
   pinZoomBeforeEdit,
   onDeleteElement,
+  onCopyClip,
+  onPasteClip,
+  onDuplicateClip,
+  canPasteClip,
   gapContextMenu,
   onDismissGapContextMenu,
   onCloseTrackGap,
@@ -249,6 +257,10 @@ export function TimelineOverlays({
             pinZoomBeforeEdit();
             onDeleteElement?.(element);
           }}
+          onCopy={onCopyClip}
+          onPaste={onPasteClip}
+          onDuplicate={onDuplicateClip}
+          canPaste={canPasteClip?.() ?? false}
         />
       )}
 

package/src/player/components/TimelineTypes.ts

@@ -22,5 +22,9 @@ export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverri
   renderClipOverlay?: (element: TimelineElement) => ReactNode;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
   onSelectElement?: (element: TimelineElement | null) => void;
+  onCopyClip?: () => boolean;
+  onPasteClip?: () => Promise<void>;
+  onDuplicateClip?: () => Promise<boolean>;
+  canPasteClip?: () => boolean;
   theme?: Partial<TimelineTheme>;
 }

package/src/player/components/timelineAuthoredMoveTarget.ts

@@ -3,7 +3,7 @@ import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { getTimelineEditCapabilities } from "./timelineEditing";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 
-/** Whether Studio may write timing to this clip (false for locked/implicit rows). */
+/** Whether Studio may write timing to this clip (false for locked rows). */
 export function canMoveTimelineElement(element: TimelineElement): boolean {
   return getTimelineEditCapabilities({
     tag: element.tag,
@@ -16,7 +16,6 @@ export function canMoveTimelineElement(element: TimelineElement): boolean {
     playbackStart: element.playbackStart,
     playbackStartAttr: element.playbackStartAttr,
     sourceDuration: element.sourceDuration,
-    timingSource: element.timingSource,
     timelineLocked: element.timelineLocked,
   }).canMove;
 }

package/src/player/components/timelineClipChildren.test.ts

@@ -11,10 +11,10 @@ const clip: TimelineElement = {
 };
 
 describe("resolveClipRenderContext", () => {
-  it("prioritizes interactive clips and enables rich thumbnails", () => {
+  it("prioritizes interactive clips without changing their thumbnail frames", () => {
     expect(resolveClipRenderContext(clip, { start: 0, end: 1 }, true)).toEqual({
       priority: "interaction",
-      rich: true,
+      rich: false,
     });
   });
 

package/src/player/components/timelineClipChildren.tsx

@@ -9,7 +9,8 @@ export function resolveClipRenderContext(
   visibleTimeRange: TimelineTimeRange,
   interactive: boolean,
 ): TimelineClipRenderContext {
-  if (interactive) return { priority: "interaction", rich: true };
+  // Interaction only reorders loading; `rich` would swap the frames under the pointer.
+  if (interactive) return { priority: "interaction", rich: false };
   const visible =
     element.start < visibleTimeRange.end &&
     element.start + element.duration > visibleTimeRange.start;

package/src/player/components/timelineClipDragCommit.ts

@@ -176,8 +176,8 @@ export function persistMoveEdits(
 /**
  * Build the time-shift resolver for a multi-selection drag: every member of the
  * selection moves by the dragged clip's delta (clamped ≥ 0); non-members are
- * untouched. Returns null when this is not a multi-selection drag. A locked /
- * implicit member is dropped from the moving set (a marquee can sweep one in).
+ * untouched. Returns null when this is not a multi-selection drag. A locked
+ * member is dropped from the moving set (a marquee can sweep one in).
  */
 function resolveMultiSelection(
   drag: DraggedClipState,

package/src/player/components/timelineDragDrop.test.tsx

@@ -220,4 +220,35 @@ describe("useTimelineAssetDrop", () => {
     expect(view.api.isDragOver).toBe(false);
     act(() => view.root.unmount());
   });
+
+  it("previews the exact placement the drop commits, and clears it after", () => {
+    const onAssetDrop = vi.fn();
+    const view = renderHarness(onAssetDrop);
+    const payload = JSON.stringify({ path: "assets/a.png" });
+
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer(payload), 400, 100)));
+    const preview = view.api.dropPreview;
+    expect(preview).toEqual({ start: 10, track: 0 });
+
+    act(() => view.api.handleAssetDrop(dragEvent(assetTransfer(payload), 400, 100)));
+    expect(onAssetDrop).toHaveBeenCalledExactlyOnceWith("assets/a.png", preview);
+    expect(view.api.dropPreview).toBeNull();
+    act(() => view.root.unmount());
+  });
+
+  it("moves the preview with the pointer and drops it when the drag leaves", () => {
+    const view = renderHarness(vi.fn());
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 800, 100)));
+    expect(view.api.dropPreview?.start).toBe(20);
+
+    act(() =>
+      view.api.handleAssetDragLeave({
+        relatedTarget: null,
+        currentTarget: document.body,
+      } as unknown as React.DragEvent),
+    );
+    expect(view.api.dropPreview).toBeNull();
+    act(() => view.root.unmount());
+  });
 });

package/src/player/components/timelineDragDrop.ts

@@ -98,6 +98,7 @@ export function useTimelineAssetDrop({
   sessionEpoch,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
+  const [dropPreview, setDropPreview] = useState<TimelinePlacement | null>(null);
   const dragPointerRef = useRef<{ clientX: number; clientY: number; sessionEpoch: number } | null>(
     null,
   );
@@ -142,6 +143,28 @@ export function useTimelineAssetDrop({
     [scrollRef, sessionEpoch, stepAutoScroll],
   );
 
+  const resolveDropPlacement = useCallback(
+    (clientX: number, clientY: number): TimelinePlacement => {
+      const scroll = scrollRef.current;
+      const rect = scroll?.getBoundingClientRect();
+      return resolveTimelineAssetDrop(
+        {
+          rectLeft: rect?.left ?? 0,
+          rectTop: rect?.top ?? 0,
+          scrollLeft: scroll?.scrollLeft ?? 0,
+          scrollTop: scroll?.scrollTop ?? 0,
+          contentOrigin,
+          pixelsPerSecond: ppsRef.current,
+          rowHeights: rowGeometryRef.current.rowHeights,
+          trackOrder: trackOrderRef.current,
+        },
+        clientX,
+        clientY,
+      );
+    },
+    [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin],
+  );
+
   const handleAssetDragOver = useCallback(
     (e: React.DragEvent) => {
       const types = Array.from(e.dataTransfer.types);
@@ -154,15 +177,20 @@ export function useTimelineAssetDrop({
       e.dataTransfer.dropEffect = "copy";
       activeDropEpochRef.current = sessionEpoch;
       setIsDragOver(true);
+      const next = resolveDropPlacement(e.clientX, e.clientY);
+      setDropPreview((prev) =>
+        prev?.start === next.start && prev.track === next.track ? prev : next,
+      );
       syncAutoScroll(e.clientX, e.clientY);
     },
-    [sessionEpoch, syncAutoScroll],
+    [resolveDropPlacement, sessionEpoch, syncAutoScroll],
   );
 
   const clearDropPreview = useCallback(() => {
     activeDropEpochRef.current = null;
     stopAutoScroll();
     setIsDragOver(false);
+    setDropPreview(null);
   }, [stopAutoScroll]);
 
   const handleAssetDragLeave = useCallback(
@@ -174,28 +202,6 @@ export function useTimelineAssetDrop({
     [clearDropPreview],
   );
 
-  const resolveDropPlacement = useCallback(
-    (clientX: number, clientY: number): TimelinePlacement => {
-      const scroll = scrollRef.current;
-      const rect = scroll?.getBoundingClientRect();
-      return resolveTimelineAssetDrop(
-        {
-          rectLeft: rect?.left ?? 0,
-          rectTop: rect?.top ?? 0,
-          scrollLeft: scroll?.scrollLeft ?? 0,
-          scrollTop: scroll?.scrollTop ?? 0,
-          contentOrigin,
-          pixelsPerSecond: ppsRef.current,
-          rowHeights: rowGeometryRef.current.rowHeights,
-          trackOrder: trackOrderRef.current,
-        },
-        clientX,
-        clientY,
-      );
-    },
-    [scrollRef, ppsRef, trackOrderRef, rowGeometryRef, contentOrigin],
-  );
-
   const handleAssetDrop = useCallback(
     (e: React.DragEvent) => {
       e.preventDefault();
@@ -240,6 +246,7 @@ export function useTimelineAssetDrop({
 
   return {
     isDragOver,
+    dropPreview,
     handleAssetDragOver,
     handleAssetDragLeave,
     handleAssetDrop,

package/src/player/components/timelineEditCapabilities.ts

@@ -42,10 +42,9 @@ export function getTimelineEditCapabilities(input: {
   playbackStart?: number;
   playbackStartAttr?: "media-start" | "playback-start";
   sourceDuration?: number;
-  timingSource?: "authored" | "implicit";
   timelineLocked?: boolean;
 }): TimelineEditCapabilities {
-  if (input.timingSource === "implicit" || input.timelineLocked) {
+  if (input.timelineLocked) {
     return { canMove: false, canTrimStart: false, canTrimEnd: false };
   }
 

package/src/player/components/timelineEditing.test.ts

@@ -412,21 +412,6 @@ describe("getTimelineEditCapabilities", () => {
     });
   });
 
-  it("keeps implicit layout layers selectable but not timeline-editable", () => {
-    expect(
-      getTimelineEditCapabilities({
-        duration: 8,
-        selector: ".scene-shell",
-        tag: "div",
-        timingSource: "implicit",
-      }),
-    ).toEqual({
-      canMove: false,
-      canTrimStart: false,
-      canTrimEnd: false,
-    });
-  });
-
   it("allows move and both trims for patchable media clips with offset support", () => {
     expect(
       getTimelineEditCapabilities({
@@ -496,7 +481,6 @@ describe("getTimelineEditCapabilities", () => {
         tag: "div",
         duration: 4,
         selector: "#hero-card",
-        timingSource: "authored",
       }),
     ).toEqual({
       canMove: true,

package/src/player/components/timelineGroupEditing.test.ts

@@ -34,11 +34,9 @@ describe("buildTimelineGroupResizeMembers (legacy 36413da7f semantics)", () => {
     expect(buildTimelineGroupResizeMembers([a, locked], keys("a", "b"), "a", "end")).toBeNull();
   });
 
-  it("degrades when a member is implicitly timed or has no patch target", () => {
+  it("degrades when a member has no patch target", () => {
     const a = el("a");
-    const implicit = el("b", { timingSource: "implicit" });
     const noTarget = el("c", { domId: undefined, selector: undefined });
-    expect(buildTimelineGroupResizeMembers([a, implicit], keys("a", "b"), "a", "end")).toBeNull();
     expect(buildTimelineGroupResizeMembers([a, noTarget], keys("a", "c"), "a", "end")).toBeNull();
   });
 

package/src/player/components/timelineGroupEditing.ts

@@ -198,7 +198,6 @@ function canTrimEdge(element: TimelineElement, edge: TimelineGroupResizeEdge): b
     playbackStart: element.playbackStart,
     playbackStartAttr: element.playbackStartAttr,
     sourceDuration: element.sourceDuration,
-    timingSource: element.timingSource,
     timelineLocked: element.timelineLocked,
   });
   return edge === "start" ? caps.canTrimStart : caps.canTrimEnd;

package/src/player/components/timelineTrackDisplay.ts

@@ -3,7 +3,7 @@
  *
  * `TimelineElement.track` is a z-order SORT key, not a row number: an expanded
  * sub-composition child gets a synthesized fractional key (`host.track + n /
- * (siblings + 2)`, see `useExpandedTimelineElements`), so putting it in a string
+ * (siblings + 2)`, see `useTimelineRowElements`), so putting it in a string
  * announces "Hide track 0.16666666666666666". Every user-visible track number,
  * whether it is rendered by a component or baked into an undo-history label,
  * routes through here; the raw key stays in callbacks and lookups only.