@hyperframes/studio 0.7.55 → 0.7.57

package/src/player/components/Timeline.tsx

@@ -5,39 +5,32 @@ import { remapBeatAnalysisToComposition } from "../../utils/beatEditActions";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { useExpandedTimelineElements } from "../hooks/useExpandedTimelineElements";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import { EditPopover } from "./EditModal";
 import { defaultTimelineTheme } from "./timelineTheme";
 import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
-import { useTimelineMarqueeSelection } from "./useTimelineMarqueeSelection";
 import { useTimelinePlayhead } from "./useTimelinePlayhead";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
 import { type TrackVisualStyle, getTrackStyle } from "./timelineIcons";
-import { getTimelinePixelsPerSecond } from "./timelineZoom";
 import { useTimelineZoom } from "./useTimelineZoom";
 import { useTimelineAssetDrop } from "./timelineDragDrop";
 import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
-import {
-  KeyframeDiamondContextMenu,
-  type KeyframeDiamondContextMenuState,
-} from "./KeyframeDiamondContextMenu";
+import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
-import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
-import { ClipContextMenu } from "./ClipContextMenu";
-import { TimelineShortcutHint } from "./TimelineShortcutHint";
-import { buildStackingTimelineLayers, insertPreviewTrackOrder } from "./timelineTrackOrder";
-import { getTimelineLayerGroupHeaderTotalHeight } from "./TimelineLayerGroupHeader";
+import { TimelineOverlays } from "./TimelineOverlays";
+import { useTimelineEditPinning } from "./useTimelineEditPinning";
+import { useTimelineStackingSync } from "./useTimelineStackingSync";
+import { useTimelineGeometry } from "./useTimelineGeometry";
 import {
   GUTTER,
-  generateVisibleTicks,
+  generateTicks,
   getTimelineCanvasHeight,
   shouldShowTimelineShortcutHint,
-  computeTimelineBasisDuration,
-  computeTimelineEffectiveDuration,
 } from "./timelineLayout";
+import { STUDIO_PREVIEW_FPS } from "../lib/time";
 import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallbacks";
 import type { TimelineProps } from "./TimelineTypes";
 
+// Re-export pure utilities so existing imports from "./Timeline" still resolve.
 export {
   generateTicks,
   formatTimelineTickLabel,
@@ -62,7 +55,9 @@ export const Timeline = memo(function Timeline({
   onBlockDrop,
   onDeleteElement: _onDeleteElement,
   onMoveElement: onMoveElementOverride,
+  onMoveElements: onMoveElementsOverride,
   onResizeElement: onResizeElementOverride,
+  onResizeElements: onResizeElementsOverride,
   onBlockedEditAttempt: onBlockedEditAttemptOverride,
   onSplitElement: onSplitElementOverride,
   onSelectElement,
@@ -70,11 +65,9 @@ export const Timeline = memo(function Timeline({
 }: TimelineProps = {}) {
   const {
     onMoveElement,
-    onResizeElement,
     onMoveElements,
+    onResizeElement,
     onResizeElements,
-    onPreviewMoveElements,
-    onPreviewResizeElements,
     onBlockedEditAttempt,
     onSplitElement,
     onRazorSplitAll,
@@ -85,7 +78,9 @@ export const Timeline = memo(function Timeline({
     onMoveKeyframe,
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
+    onMoveElements: onMoveElementsOverride,
     onResizeElement: onResizeElementOverride,
+    onResizeElements: onResizeElementsOverride,
     onBlockedEditAttempt: onBlockedEditAttemptOverride,
     onSplitElement: onSplitElementOverride,
   });
@@ -101,19 +96,23 @@ export const Timeline = memo(function Timeline({
     [beatAnalysis, musicElement, beatEdits],
   );
   const duration = usePlayerStore((s) => s.duration);
+  const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const timelineReady = usePlayerStore((s) => s.timelineReady);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
+  const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
 
   const playheadRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const activeTool = usePlayerStore((s) => s.activeTool);
   const [hoveredClip, setHoveredClip] = useState<string | null>(null);
   const isDragging = useRef(false);
   const [shiftHeld, setShiftHeld] = useState(false);
   const [razorGuideX, setRazorGuideX] = useState<number | null>(null);
+
   useMountEffect(() => {
     const down = (e: KeyboardEvent) => e.key === "Shift" && setShiftHeld(true);
     const up = (e: KeyboardEvent) => e.key === "Shift" && setShiftHeld(false);
@@ -139,6 +138,7 @@ export const Timeline = memo(function Timeline({
   const [viewportWidth, setViewportWidth] = useState(0);
   const roRef = useRef<ResizeObserver | null>(null);
   const shortcutHintRafRef = useRef(0);
+
   const syncShortcutHintVisibility = useCallback(() => {
     const scroll = scrollRef.current;
     setShowShortcutHint(
@@ -154,6 +154,13 @@ export const Timeline = memo(function Timeline({
     });
   }, [syncShortcutHintVisibility]);
 
+  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
+    containerRef.current = el;
+  }, []);
+
+  // Last horizontal scroll offset, RESTORED across the post-edit iframe reload (which clamps into
+  // a scroll jump); with the pinned zoom this keeps the user parked at the same spot after edits.
+  const lastScrollLeftRef = useRef(0);
   const setScrollRef = useCallback(
     (el: HTMLDivElement | null) => {
       if (roRef.current) {
@@ -180,31 +187,70 @@ export const Timeline = memo(function Timeline({
     if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
   });
 
-  const tracks = useMemo(
-    () => buildStackingTimelineLayers(expandedElements).rows,
-    [expandedElements],
-  );
+  const effectiveDuration = useMemo(() => {
+    const safeDur = Number.isFinite(duration) ? duration : 0;
+    if (rawElements.length === 0) return safeDur;
+    const maxEnd = Math.max(...rawElements.map((el) => el.start + el.duration));
+    const result = Math.max(safeDur, maxEnd);
+    return Number.isFinite(result) ? result : safeDur;
+  }, [rawElements, duration]);
+
+  const tracks = useMemo(() => {
+    const map = new Map<number, typeof expandedElements>();
+    for (const el of expandedElements) {
+      const list = map.get(el.track) ?? [];
+      list.push(el);
+      map.set(el.track, list);
+    }
+    return Array.from(map.entries()).sort(([a], [b]) => a - b);
+  }, [expandedElements]);
 
   const trackStyles = useMemo(() => {
-    const map = new Map<string, TrackVisualStyle>();
-    for (const layer of tracks) {
-      map.set(layer.id, getTrackStyle(layer.elements[0]?.tag ?? ""));
+    const map = new Map<number, TrackVisualStyle>();
+    for (const [trackNum, els] of tracks) {
+      map.set(trackNum, getTrackStyle(els[0]?.tag ?? ""));
     }
     return map;
   }, [tracks]);
 
-  const trackOrder = useMemo(() => tracks.map((layer) => layer.id), [tracks]);
+  const trackOrder = useMemo(() => tracks.map(([trackNum]) => trackNum), [tracks]);
   const trackOrderRef = useRef(trackOrder);
   trackOrderRef.current = trackOrder;
-  const timelineLayersRef = useRef(tracks);
-  timelineLayersRef.current = tracks;
   const expandedElementsRef = useRef(expandedElements);
   expandedElementsRef.current = expandedElements;
 
   const ppsRef = useRef(100);
-  const durationRef = useRef(Number.isFinite(duration) ? duration : 0);
+  const durationRef = useRef(effectiveDuration);
+  durationRef.current = effectiveDuration;
+  // Declared here (used before the fitPps derivation below) so the edit-pin
+  // wrappers can close over it; `fitPpsRef.current` is refreshed each render.
+  const fitPpsRef = useRef(100);
 
-  const setRangeSelectionRef = useRef<((sel: null) => void) | null>(null);
+  const {
+    pinZoomBeforeEdit,
+    setRangeSelectionRef,
+    pinnedOnMoveElement,
+    pinnedOnMoveElements,
+    pinnedOnResizeElement,
+    pinnedOnResizeElements,
+    pinnedOnFileDrop,
+    pinnedOnAssetDrop,
+    pinnedOnBlockDrop,
+  } = useTimelineEditPinning({
+    ppsRef,
+    fitPpsRef,
+    onMoveElement,
+    onMoveElements,
+    onResizeElement,
+    onResizeElements,
+    onFileDrop,
+    onAssetDrop,
+    onBlockDrop,
+  });
+
+  const { readClipZIndex, applyStackingPatches, zSyncEnabled } = useTimelineStackingSync({
+    expandedElementsRef,
+  });
 
   const {
     draggedClip,
@@ -217,67 +263,39 @@ export const Timeline = memo(function Timeline({
   } = useTimelineClipDrag({
     scrollRef,
     ppsRef,
+    durationRef,
     trackOrderRef,
-    timelineLayersRef,
-    timelineElementsRef: expandedElementsRef,
-    onMoveElement,
-    onResizeElement,
-    onMoveElements,
-    onResizeElements,
-    onPreviewMoveElements,
-    onPreviewResizeElements,
+    onMoveElement: pinnedOnMoveElement,
+    onMoveElements: pinnedOnMoveElements,
+    onResizeElement: pinnedOnResizeElement,
+    onResizeElements: pinnedOnResizeElements,
     onBlockedEditAttempt,
     setShowPopover,
     setRangeSelectionRef,
+    readZIndex: zSyncEnabled ? readClipZIndex : undefined,
+    onStackingPatches: zSyncEnabled ? applyStackingPatches : undefined,
   });
 
-  const basisDuration = useMemo(
-    () =>
-      computeTimelineBasisDuration(
-        duration,
-        rawElements.map((el) => el.start + el.duration),
-      ),
-    [rawElements, duration],
-  );
-  const effectiveDuration = useMemo(
-    () =>
-      computeTimelineEffectiveDuration(basisDuration, [
-        draggedClip?.started ? draggedClip.previewStart + draggedClip.element.duration : null,
-        resizingClip?.started ? resizingClip.previewStart + resizingClip.previewDuration : null,
-      ]),
-    [basisDuration, draggedClip, resizingClip],
-  );
-  durationRef.current = effectiveDuration;
+  const { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview } =
+    useTimelineAssetDrop({
+      scrollRef,
+      ppsRef,
+      durationRef,
+      trackOrderRef,
+      onFileDrop: pinnedOnFileDrop,
+      onAssetDrop: pinnedOnAssetDrop,
+      onBlockDrop: pinnedOnBlockDrop,
+    });
 
   const displayTrackOrder = useMemo(() => {
-    if (
-      !draggedClip?.started ||
-      trackOrder.length === 0 ||
-      trackOrder.includes(draggedClip.previewLayerId)
-    )
-      return trackOrder;
-    return insertPreviewTrackOrder(
-      trackOrder,
-      draggedClip.previewLayerId,
-      draggedClip.previewLayerIndex,
-    );
+    if (!draggedClip?.started || trackOrder.includes(draggedClip.previewTrack)) return trackOrder;
+    return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
   }, [draggedClip, trackOrder]);
 
-  const totalH =
-    getTimelineCanvasHeight(displayTrackOrder.length) +
-    getTimelineLayerGroupHeaderTotalHeight(displayTrackOrder, tracks);
+  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
   const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
-  const keyframeHandlers = useTimelineKeyframeHandlers({
-    expandedElements,
-    keyframeCache,
-    onSelectElement,
-    onSeek,
-    setSelectedElementId,
-    setKfContextMenu,
-    toggleSelectedKeyframe,
-  });
 
   const selectedElement = useMemo(
     () =>
@@ -287,26 +305,28 @@ export const Timeline = memo(function Timeline({
   const selectedElementRef = useRef<TimelineElement | null>(selectedElement);
   selectedElementRef.current = selectedElement;
 
-  const fitPps =
-    viewportWidth > GUTTER && basisDuration > 0
-      ? (viewportWidth - GUTTER - 2) / basisDuration
-      : 100;
-  const pps = getTimelinePixelsPerSecond(fitPps, zoomMode, manualZoomPercent);
-  ppsRef.current = pps;
-  const trackContentWidth = Math.max(0, effectiveDuration * pps);
-  const clipStateVersion = useMemo(
-    () =>
-      expandedElements
-        .map((el) => `${el.key ?? el.id}:${el.start}:${el.duration}:${el.track}`)
-        .join("|"),
-    [expandedElements],
-  );
-  const zoomModeRef = useRef(zoomMode);
-  zoomModeRef.current = zoomMode;
-  const manualZoomPercentRef = useRef(manualZoomPercent);
-  manualZoomPercentRef.current = manualZoomPercent;
-  const fitPpsRef = useRef(fitPps);
-  fitPpsRef.current = fitPps;
+  const {
+    pps,
+    fitPps,
+    displayContentWidth,
+    displayDuration,
+    clipStateVersion,
+    zoomModeRef,
+    manualZoomPercentRef,
+  } = useTimelineGeometry({
+    viewportWidth,
+    effectiveDuration,
+    zoomMode,
+    manualZoomPercent,
+    ppsRef,
+    fitPpsRef,
+    draggedClip,
+    resizingClip,
+    expandedElements,
+    isDragging,
+    scrollRef,
+    lastScrollLeftRef,
+  });
 
   const { seekFromX, autoScrollDuringDrag, dragScrollRaf } = useTimelinePlayhead({
     playheadRef,
@@ -339,6 +359,8 @@ export const Timeline = memo(function Timeline({
     rangeSelection,
     setRangeSelection,
     shiftClickClipRef,
+    marqueeRect,
+    isScrubbing,
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
@@ -353,28 +375,12 @@ export const Timeline = memo(function Timeline({
     dragScrollRaf,
     isDragging,
     setShowPopover,
-  });
-  const {
-    marqueeRect,
-    handlePointerDown: handleMarqueePointerDown,
-    handlePointerMove: handleMarqueePointerMove,
-    handlePointerUp: handleMarqueePointerUp,
-  } = useTimelineMarqueeSelection({
-    scrollRef,
-    ppsRef,
+    elementsRef: expandedElementsRef,
     trackOrderRef,
-    timelineLayersRef,
-    disabled: activeTool === "razor",
-    setShowPopover,
-    setRangeSelectionRef,
-    seekFromX,
+    onSelectElement,
   });
+  // Wire setRangeSelection into the stable ref consumed by useTimelineClipDrag
   setRangeSelectionRef.current = setRangeSelection;
-  // Pointer-up and lost-capture end a gesture identically (marquee-claims-first).
-  const releasePointer = (event: Parameters<typeof handleMarqueePointerUp>[0]) => {
-    if (handleMarqueePointerUp(event)) return;
-    handlePointerUp();
-  };
 
   const prevSelectedRef = useRef(selectedElementRef.current);
   // eslint-disable-next-line no-restricted-syntax, react-hooks/exhaustive-deps
@@ -388,9 +394,11 @@ export const Timeline = memo(function Timeline({
     }
   });
 
+  // Frame display mode labels ruler ticks as frame numbers — pass the fps so ticks snap to frames.
+  const tickFps = timeDisplayMode === "frame" ? STUDIO_PREVIEW_FPS : undefined;
   const { major, minor } = useMemo(
-    () => generateVisibleTicks(effectiveDuration, pps, viewportWidth, GUTTER),
-    [effectiveDuration, pps, viewportWidth],
+    () => generateTicks(displayDuration, pps, tickFps),
+    [displayDuration, pps, tickFps],
   );
   const majorTickInterval = major.length >= 2 ? major[1] - major[0] : effectiveDuration;
 
@@ -416,24 +424,13 @@ export const Timeline = memo(function Timeline({
     [resizingClip],
   );
 
-  const { isDragOver, setIsDragOver, handleAssetDragOver, handleAssetDrop } = useTimelineAssetDrop({
-    scrollRef,
-    ppsRef,
-    durationRef,
-    trackOrderRef,
-    timelineLayersRef,
-    onFileDrop,
-    onAssetDrop,
-    onBlockDrop,
-  });
-
   if (!timelineReady || expandedElements.length === 0) {
     return (
       <TimelineEmptyState
         isDragOver={isDragOver}
         onFileDrop={!!onFileDrop}
         onDragOver={handleAssetDragOver}
-        onDragLeave={() => setIsDragOver(false)}
+        onDragLeave={() => clearDropPreview()}
         onDrop={handleAssetDrop}
       />
     );
@@ -441,6 +438,7 @@ export const Timeline = memo(function Timeline({
 
   return (
     <div
+      ref={setContainerRef}
       aria-label="Timeline"
       className={`relative border-t select-none h-full overflow-hidden ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       onMouseMove={(e) => {
@@ -460,8 +458,12 @@ export const Timeline = memo(function Timeline({
         ref={setScrollRef}
         tabIndex={-1}
         className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-none`}
+        onScroll={(e) => {
+          // Remember the live offset so it can be restored across a post-edit reload.
+          lastScrollLeftRef.current = e.currentTarget.scrollLeft;
+        }}
         onDragOver={handleAssetDragOver}
-        onDragLeave={() => setIsDragOver(false)}
+        onDragLeave={() => clearDropPreview()}
         onDrop={handleAssetDrop}
         onPointerDown={(e) => {
           if (activeTool === "razor" && e.shiftKey && e.button === 0 && scrollRef.current) {
@@ -471,21 +473,17 @@ export const Timeline = memo(function Timeline({
             onRazorSplitAll?.(splitTime);
             return;
           }
-          if (handleMarqueePointerDown(e)) return;
           handlePointerDown(e);
         }}
-        onPointerMove={(e) => {
-          if (handleMarqueePointerMove(e)) return;
-          handlePointerMove(e);
-        }}
-        onPointerUp={releasePointer}
-        onLostPointerCapture={releasePointer}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onLostPointerCapture={handlePointerUp}
       >
         <TimelineCanvas
           major={major}
           minor={minor}
           pps={pps}
-          trackContentWidth={trackContentWidth}
+          trackContentWidth={displayContentWidth}
           totalH={totalH}
           effectiveDuration={effectiveDuration}
           majorTickInterval={majorTickInterval}
@@ -497,9 +495,11 @@ export const Timeline = memo(function Timeline({
           tracks={tracks}
           trackStyles={trackStyles}
           selectedElementId={selectedElementId}
+          selectedElementIds={selectedElementIds}
           hoveredClip={hoveredClip}
           draggedClip={draggedClip}
           resizingClip={resizingClip}
+          isScrubbing={isScrubbing}
           blockedClipRef={blockedClipRef}
           suppressClickRef={suppressClickRef}
           scrollRef={scrollRef}
@@ -522,10 +522,40 @@ export const Timeline = memo(function Timeline({
           selectedKeyframes={selectedKeyframes}
           currentTime={currentTime}
           beatAnalysis={adjustedBeatAnalysis}
-          onClickKeyframe={keyframeHandlers.onClickKeyframe}
-          onShiftClickKeyframe={keyframeHandlers.onShiftClickKeyframe}
+          onClickKeyframe={(el, pct) => {
+            usePlayerStore.getState().clearSelectedKeyframes();
+            const elKey = el.key ?? el.id;
+            setSelectedElementId(elKey);
+            onSelectElement?.(el);
+            // Select the clicked diamond (matches shift-click); cleared above so this single-selects.
+            toggleSelectedKeyframe(`${elKey}:${pct}`);
+            const absTime = el.start + (pct / 100) * el.duration;
+            onSeek?.(absTime);
+            const kfData = keyframeCache?.get(elKey);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.5);
+            usePlayerStore.getState().setActiveKeyframePct(kf?.tweenPercentage ?? null);
+          }}
+          onShiftClickKeyframe={(elId, pct) => {
+            toggleSelectedKeyframe(`${elId}:${pct}`);
+          }}
           onMoveKeyframe={onMoveKeyframe}
-          onContextMenuKeyframe={keyframeHandlers.onContextMenuKeyframe}
+          onContextMenuKeyframe={(e, elId, pct) => {
+            const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
+            if (el) {
+              setSelectedElementId(elId);
+              onSelectElement?.(el);
+            }
+            const kfData = keyframeCache.get(elId);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
+            setKfContextMenu({
+              x: e.clientX + 4,
+              y: e.clientY + 2,
+              elementId: elId,
+              percentage: pct,
+              tweenPercentage: kf?.tweenPercentage,
+              currentEase: kf?.ease ?? kfData?.ease,
+            });
+          }}
           onContextMenuClip={(e, el) => {
             e.preventDefault();
             setSelectedElementId(el.key ?? el.id);
@@ -544,57 +574,27 @@ export const Timeline = memo(function Timeline({
           />
         )}
       </div>
-
-      {showShortcutHint && !showPopover && !rangeSelection && (
-        <TimelineShortcutHint theme={theme} />
-      )}
-
-      {showPopover && rangeSelection && (
-        <EditPopover
-          rangeStart={rangeSelection.start}
-          rangeEnd={rangeSelection.end}
-          anchorX={rangeSelection.anchorX}
-          anchorY={rangeSelection.anchorY}
-          onClose={() => {
-            setShowPopover(false);
-            setRangeSelection(null);
-          }}
-        />
-      )}
-
-      {kfContextMenu && (
-        <KeyframeDiamondContextMenu
-          state={kfContextMenu}
-          onClose={() => setKfContextMenu(null)}
-          onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
-          onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
-          onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
-          onMoveToPlayhead={
-            onMoveKeyframeToPlayhead
-              ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct)
-              : undefined
-          }
-          onCopyProperties={(elId, pct) => {
-            const kfData = keyframeCache.get(elId);
-            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
-            if (kf) {
-              void navigator.clipboard.writeText(JSON.stringify(kf.properties, null, 2));
-            }
-          }}
-        />
-      )}
-
-      {clipContextMenu && (
-        <ClipContextMenu
-          x={clipContextMenu.x}
-          y={clipContextMenu.y}
-          element={clipContextMenu.element}
-          currentTime={currentTime}
-          onClose={() => setClipContextMenu(null)}
-          onSplit={(el, time) => onSplitElement?.(el, time)}
-          onDelete={(el) => _onDeleteElement?.(el)}
-        />
-      )}
+      <TimelineOverlays
+        theme={theme}
+        showShortcutHint={showShortcutHint}
+        showPopover={showPopover}
+        rangeSelection={rangeSelection}
+        setShowPopover={setShowPopover}
+        setRangeSelection={setRangeSelection}
+        kfContextMenu={kfContextMenu}
+        setKfContextMenu={setKfContextMenu}
+        onDeleteKeyframe={onDeleteKeyframe}
+        onDeleteAllKeyframes={onDeleteAllKeyframes}
+        onChangeKeyframeEase={onChangeKeyframeEase}
+        onMoveKeyframeToPlayhead={onMoveKeyframeToPlayhead}
+        keyframeCache={keyframeCache}
+        clipContextMenu={clipContextMenu}
+        setClipContextMenu={setClipContextMenu}
+        currentTime={currentTime}
+        onSplitElement={onSplitElement}
+        pinZoomBeforeEdit={pinZoomBeforeEdit}
+        onDeleteElement={_onDeleteElement}
+      />
     </div>
   );
 });