@hyperframes/studio 0.8.55 → 0.8.57

package/src/player/components/Timeline.tsx

@@ -1,51 +1,11 @@
-import { useRef, useMemo, useCallback, useState, memo } from "react";
-import { useAdjustedBeatAnalysis, useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-import { useTimelineRowElements } from "../hooks/useTimelineRowElements";
-import { defaultTimelineTheme } from "./timelineTheme";
-import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
-import { usePublishRangeSelection } from "./usePublishRangeSelection";
-import { useTimelinePlayhead } from "./useTimelinePlayhead";
-import { useTimelineZoom } from "./useTimelineZoom";
-import { useTimelineAssetDrop } from "./timelineDragDrop";
+import { memo } from "react";
+import type { TimelineProps } from "./TimelineTypes";
 import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
-import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
-import { useTimelineClipDrag } from "./useTimelineClipDrag";
-import { TimelineOverlays, type ClipContextMenuState } from "./TimelineOverlays";
-import { useTimelineEditPinning } from "./useTimelineEditPinning";
-import { useTimelineStackingSync } from "./useTimelineStackingSync";
-import { useTimelineGeometry } from "./useTimelineGeometry";
-import { useAutoExpandKeyframedClips } from "./useAutoExpandKeyframedClips";
-import { GUTTER, LABEL_COL_W, TRACKS_LEFT_PAD } from "./timelineLayout";
-import { useTimelineScrollViewport } from "./useTimelineScrollViewport";
-import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallbacks";
-import type { TimelineProps } from "./TimelineTypes";
-import {
-  getTrackStyle,
-  useTimelineDisplayLayout,
-  useTimelineTrackLayout,
-} from "./useTimelineTrackLayout";
-import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
-import { useTrackGapMenu } from "./useTrackGapMenu";
-import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
-import { TimelineRazorGuide, useTimelineRazorInteraction } from "./TimelineRazorInteraction";
-import { useTimelinePerformanceTelemetry } from "./useTimelinePerformanceTelemetry";
-import {
-  getEffectiveTimelineDuration,
-  getTimelinePreviewElement,
-  timelineNeedsLabelColumn,
-} from "./timelineViewModel";
-import { useTimelineSelectionLifecycle } from "./useTimelineSelectionLifecycle";
-import { useTimelineShiftModifier } from "./useTimelineShiftModifier";
-import { useTimelineTicks } from "./useTimelineTicks";
-import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
-import { useTimelineClipRenderWindow } from "./useTimelineClipRenderWindow";
-import { useTimelineActiveClips } from "./useTimelineActiveClips";
-import { useTimelineLaneMoveRefresh } from "./useTimelineLaneMoveRefresh";
-import { useTimelineLogicalFocus } from "./useTimelineLogicalFocus";
-import { useClipContextMenu } from "./useTimelineClipContextMenu";
+import { TimelineOverlays } from "./TimelineOverlays";
+import { TimelineProvider, useTimelineContext } from "./TimelineProvider";
 
+export * from "./TimelineProvider";
 export {
   shouldAutoScrollTimeline,
   getTimelineScrollLeftForZoomTransition,
@@ -59,542 +19,32 @@ export {
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 export { formatTimelineTickLabel, generateTicks } from "./timelineRulerGeometry";
-
 export {
   getTimelineScrollTopForGeometryChange,
   getTimelineVisibleTimeRange,
 } from "./timelineViewportGeometry";
-export const Timeline = memo(function Timeline({
-  onSeek,
-  onDrillDown,
-  renderClipContent,
-  renderClipOverlay,
-  onFileDrop,
-  onAssetDrop,
-  onBlockDrop,
-  onCompositionDrop,
-  onDeleteElement: _onDeleteElement,
-  onMoveElement: onMoveElementOverride,
-  onMoveElements: onMoveElementsOverride,
-  onResizeElement: onResizeElementOverride,
-  onResizeElements: onResizeElementsOverride,
-  onBlockedEditAttempt: onBlockedEditAttemptOverride,
-  onSplitElement: onSplitElementOverride,
-  onSelectElement,
-  onRangeSelect,
-  onCopyClip,
-  onPasteClip,
-  onDuplicateClip,
-  canPasteClip,
-  theme: themeOverrides,
-  sessionEpoch = 0,
-}: TimelineProps = {}) {
-  const {
-    onMoveElement,
-    onMoveElements,
-    onResizeElement,
-    onResizeElements,
-    onBlockedEditAttempt,
-    onSplitElement,
-    onRazorSplitAll,
-    onDeleteKeyframe,
-    onDeleteAllKeyframes,
-    onMoveKeyframeToPlayhead,
-    onMoveKeyframe,
-  } = useResolvedTimelineEditCallbacks({
-    onMoveElement: onMoveElementOverride,
-    onMoveElements: onMoveElementsOverride,
-    onResizeElement: onResizeElementOverride,
-    onResizeElements: onResizeElementsOverride,
-    onBlockedEditAttempt: onBlockedEditAttemptOverride,
-    onSplitElement: onSplitElementOverride,
-  });
-  const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
-  const refreshAfterLaneMove = useTimelineLaneMoveRefresh();
-  useMusicBeatAnalysis();
-  const rawElements = usePlayerStore((s) => s.elements);
-  const expandedElements = useTimelineRowElements();
-  const adjustedBeatAnalysis = useAdjustedBeatAnalysis();
-  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 focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
-  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
-  const labelMode = useMemo(
-    () => timelineNeedsLabelColumn(gsapAnimations, expandedElements),
-    [gsapAnimations, expandedElements],
-  );
-  // The label column provides pre-t=0 space; otherwise keep TRACKS_LEFT_PAD after the gutter.
-  const contentOrigin = labelMode ? LABEL_COL_W + GUTTER : GUTTER + TRACKS_LEFT_PAD;
-  const contentGutter = labelMode ? GUTTER : 0;
-  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 = useTimelineShiftModifier();
-  const [showPopover, setShowPopover] = useState(false);
-  const [kfContextMenu, setKfContextMenu] = useState<KeyframeDiamondContextMenuState | null>(null);
-  const [clipContextMenu, setClipContextMenu] = useState<ClipContextMenuState | null>(null);
-  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
-    containerRef.current = el;
-  }, []);
-  const lastScrollLeftRef = useRef(0);
-  const effectiveDuration = useMemo(
-    () => getEffectiveTimelineDuration(duration, rawElements),
-    [duration, rawElements],
-  );
-  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
-  useAutoExpandKeyframedClips(gsapAnimations);
-  const {
-    tracks,
-    trackStyles,
-    trackOrder,
-    trackOrderRef,
-    laneCounts,
-    rowGeometry,
-    rowGeometryRef,
-    groups,
-    trackGroupOf,
-  } = useTimelineTrackLayout(
-    expandedElements,
-    gsapAnimations,
-    selectedElementId,
-    selectedElementIds,
-  );
-  const expandedElementsRef = useRef(expandedElements);
-  expandedElementsRef.current = expandedElements; // oxlint-disable-line react/refs -- event handlers read the latest elements
-  const ppsRef = useRef(100);
-  const durationRef = useRef(effectiveDuration);
-  durationRef.current = effectiveDuration; // oxlint-disable-line react/refs -- event handlers read the latest duration
-  const fitPpsRef = useRef(100);
-  const {
-    pinZoomBeforeEdit,
-    setRangeSelectionRef,
-    pinnedOnMoveElement,
-    pinnedOnMoveElements,
-    pinnedOnResizeElement,
-    pinnedOnResizeElements,
-    pinnedOnFileDrop,
-    pinnedOnAssetDrop,
-    pinnedOnBlockDrop,
-    pinnedOnCompositionDrop,
-  } = useTimelineEditPinning({
-    ppsRef,
-    fitPpsRef,
-    onMoveElement,
-    onMoveElements,
-    onResizeElement,
-    onResizeElements,
-    onFileDrop,
-    onAssetDrop,
-    onBlockDrop,
-    onCompositionDrop,
-  });
-  const { readClipZIndex, applyStackingPatches, zSyncEnabled } = useTimelineStackingSync({
-    expandedElementsRef,
-  });
-  const {
-    gapMenuModel,
-    gapHighlight,
-    setHoveredGapAction,
-    openGapMenu,
-    dismissGapMenu,
-    closeTrackGap,
-    closeAllTrackGaps,
-  } = useTrackGapMenu({
-    tracks,
-    expandedElementsRef,
-    trackOrderRef,
-    onMoveElement: pinnedOnMoveElement,
-    onMoveElements: pinnedOnMoveElements,
-  });
-  const onContextMenuClip = useClipContextMenu(onSelectElement, dismissGapMenu, setClipContextMenu);
-  const {
-    draggedClip,
-    setDraggedClip,
-    resizingClip,
-    setResizingClip,
-    blockedClipRef,
-    suppressClickRef,
-  } = useTimelineClipDrag({
-    scrollRef,
-    ppsRef,
-    durationRef,
-    trackOrderRef,
-    rowGeometryRef,
-    onMoveElement: pinnedOnMoveElement,
-    onMoveElements: pinnedOnMoveElements,
-    onResizeElement: pinnedOnResizeElement,
-    onResizeElements: pinnedOnResizeElements,
-    onBlockedEditAttempt,
-    onSeek,
-    setShowPopover,
-    setRangeSelectionRef,
-    readZIndex: zSyncEnabled ? readClipZIndex : undefined,
-    onStackingPatches: zSyncEnabled ? applyStackingPatches : undefined,
-    refreshAfterLaneMove,
-    sessionEpoch,
-  });
-  const assetDrop = useTimelineAssetDrop({
-    scrollRef,
-    ppsRef,
-    trackOrderRef,
-    rowGeometryRef,
-    contentOrigin,
-    onFileDrop: pinnedOnFileDrop,
-    onAssetDrop: pinnedOnAssetDrop,
-    onBlockDrop: pinnedOnBlockDrop,
-    onCompositionDrop: pinnedOnCompositionDrop,
-    sessionEpoch,
-  });
-  const displayLayout = useTimelineDisplayLayout(draggedClip, trackOrder, rowGeometry);
-  const resizingElementIds =
-    resizingClip?.groupPreview?.map((change) => change.key) ??
-    (resizingClip ? [getTimelineElementIdentity(resizingClip.element)] : undefined);
-  const { recordTimelineScroll } = useTimelinePerformanceTelemetry({
-    totalClipCount: expandedElements.length,
-    totalRowCount: displayLayout.displayTrackOrder.length,
-    zoomMode,
-  });
-  const { viewport, showShortcutHint, setScrollRef, syncScrollViewport } =
-    useTimelineScrollViewport(scrollRef, [
-      timelineReady,
-      expandedElements.length,
-      displayLayout.totalH,
-    ]);
-  const { pps, fitPps, displayContentWidth, displayDuration, zoomModeRef, manualZoomPercentRef } =
-    useTimelineGeometry({
-      viewportWidth: viewport.clientWidth,
-      effectiveDuration,
-      zoomMode,
-      manualZoomPercent,
-      ppsRef,
-      fitPpsRef,
-      draggedClip,
-      resizingClip,
-      expandedElements,
-      isDragging,
-      scrollRef,
-      lastScrollLeftRef,
-      contentOrigin,
-    });
-  const timelineFocus = useTimelineLogicalFocus({
-    scrollRef,
-    tracks,
-    layout: displayLayout,
-    laneCounts,
-    selectedElementId,
-    selectedElementIds,
-    groups,
-    trackGroupOf,
-    gsapAnimations,
-    elements: expandedElements,
-    pixelsPerSecond: pps,
-    contentOrigin,
-    allowHorizontal: zoomMode === "manual",
-    viewport,
-    sessionEpoch,
-    draggedRowKey: draggedClip?.started ? draggedClip.previewTrack : undefined,
-    resizingElementIds,
-    clipContextMenuRowKey: clipContextMenu?.element.track,
-    keyframeContextMenuRowKey: kfContextMenu?.element.track,
-    lastScrollLeftRef,
-    syncScrollViewport,
-  });
-  const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
-  const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
-  const { onClickKeyframe, onSelectSegment, onShiftClickKeyframe, onContextMenuKeyframe } =
-    useTimelineKeyframeHandlers({
-      expandedElements,
-      keyframeCache,
-      onSelectElement,
-      onSeek,
-      setSelectedElementId,
-      setKfContextMenu,
-      toggleSelectedKeyframe,
-    });
-  const { clipIndex, renderTimeRange, visibleTimeRange, pinnedClipIdentities } =
-    useTimelineClipRenderWindow({
-      tracks,
-      viewport,
-      pixelsPerSecond: pps,
-      contentOrigin,
-      duration: displayDuration,
-      selectedElementId: selectedElementId ?? undefined,
-      draggedElementId: draggedClip ? getTimelineElementIdentity(draggedClip.element) : undefined,
-      resizingElementIds,
-      focusedElementId: timelineFocus.pinnedElementId,
-      focusedEaseElementId: focusedEaseSegment?.elementId,
-      clipContextMenuElementId: clipContextMenu
-        ? getTimelineElementIdentity(clipContextMenu.element)
-        : undefined,
-      keyframeContextMenuElementId: kfContextMenu
-        ? getTimelineElementIdentity(kfContextMenu.element)
-        : undefined,
-    });
-  useTimelineActiveClips({
-    scrollRef,
-    currentTime,
-    clipStateVersion: renderTimeRange,
-    elementStateVersion: expandedElements,
-  });
-  const laneGapStrips = useTimelineGapHighlights({
-    gapHighlight,
-    tracks,
-    selectedElementId,
-    selectedElementIds,
-    expandedElements,
-    dragActive: draggedClip?.started === true || resizingClip != null,
-    displayDuration,
-  });
-
-  const { seekFromX, autoScrollDuringDrag, dragScrollRaf } = useTimelinePlayhead({
-    playheadRef,
-    scrollRef,
-    ppsRef,
-    durationRef,
-    isDragging,
-    currentTime,
-    zoomMode,
-    manualZoomPercent,
-    zoomModeRef,
-    manualZoomPercentRef,
-    fitPps,
-    fitPpsRef,
-    effectiveDuration,
-    pps,
-    timelineReady,
-    elementsLength: expandedElements.length,
-    setZoomMode,
-    setManualZoomPercent,
-    onSeek,
-    contentOrigin,
-  });
-  const { razorGuideX, updateRazorGuide, clearRazorGuide, splitAllAtPointer } =
-    useTimelineRazorInteraction({
-      active: activeTool === "razor",
-      scrollRef,
-      contentOrigin,
-      pixelsPerSecond: pps,
-      onSplitAll: onRazorSplitAll,
-    });
-
-  const {
-    rangeSelection,
-    setRangeSelection,
-    shiftClickClipRef,
-    marqueeRect,
-    isScrubbing,
-    handlePointerDown,
-    handlePointerMove,
-    handlePointerUp,
-    handlePointerCancel,
-  } = useTimelineRangeSelection({
-    scrollRef,
-    ppsRef,
-    effectiveDuration,
-    pps,
-    onSeek,
-    seekFromX,
-    autoScrollDuringDrag,
-    dragScrollRaf,
-    isDragging,
-    setShowPopover,
-    elementsRef: expandedElementsRef,
-    clipIndex,
-    rowGeometryRef,
-    onSelectElement,
-    contentOrigin,
-    sessionEpoch,
-  });
-  usePublishRangeSelection(rangeSelection, onRangeSelect);
-  setRangeSelectionRef.current = setRangeSelection; // oxlint-disable-line react/refs -- stable ref consumed by useTimelineClipDrag
-
-  useTimelineSelectionLifecycle(expandedElements, selectedElementId, setShowPopover, () =>
-    setRangeSelection(null),
-  );
-
-  const { major, minor, majorTickInterval } = useTimelineTicks(
-    displayDuration,
-    pps,
-    timeDisplayMode,
-    timelineFocus.rowVirtualizationActive ? renderTimeRange : undefined,
-  );
-
-  const getPreviewElement = useCallback(
-    (element: TimelineElement): TimelineElement => getTimelinePreviewElement(element, resizingClip),
-    [resizingClip],
-  );
 
-  if (!timelineReady || expandedElements.length === 0) {
-    return (
-      <TimelineEmptyState
-        isDragOver={assetDrop.isDragOver}
-        onFileDrop={!!onFileDrop}
-        onDragOver={assetDrop.handleAssetDragOver}
-        onDragLeave={assetDrop.handleAssetDragLeave}
-        onDrop={assetDrop.handleAssetDrop}
-      />
-    );
+function TimelineView() {
+  const { state, meta } = useTimelineContext();
+  const { timelineReady, elements } = state;
+  if (!timelineReady || elements.length === 0) {
+    return <TimelineEmptyState {...meta.emptyState} />;
   }
-
   return (
-    <div
-      ref={setContainerRef}
-      aria-label="Timeline track view"
-      data-timeline-element-count={expandedElements.length}
-      className={`relative border-t select-none h-full overflow-hidden ${assetDrop.isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
-      onMouseMove={updateRazorGuide}
-      onMouseLeave={clearRazorGuide}
-      style={{
-        touchAction: "pan-x pan-y",
-        background: theme.shellBackground,
-        borderColor: theme.shellBorder,
-      }}
-    >
-      <div
-        ref={setScrollRef}
-        // Stable owner for gestures that must survive virtual row/clip unmounts.
-        data-timeline-scroll-viewport
-        data-timeline-auto-scroll-left-inset={labelMode ? LABEL_COL_W : 0}
-        tabIndex={-1}
-        className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full outline-hidden`}
-        onScroll={(e) => {
-          lastScrollLeftRef.current = e.currentTarget.scrollLeft; // restored across post-edit reload
-          recordTimelineScroll(e.currentTarget);
-          syncScrollViewport(e.currentTarget, true);
-        }}
-        {...timelineFocus.timelineFocusProps}
-        onDragOver={assetDrop.handleAssetDragOver}
-        onDragLeave={assetDrop.handleAssetDragLeave}
-        onDrop={assetDrop.handleAssetDrop}
-        onPointerDown={(e) => {
-          // Interactive controls own their clicks; scrubbing would preventDefault and eat them.
-          if (e.target instanceof Element && e.target.closest("button, input, select, a")) return;
-          if (splitAllAtPointer(e)) return;
-          handlePointerDown(e);
-        }}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerCancel}
-        onLostPointerCapture={handlePointerCancel}
-      >
-        <TimelineCanvas
-          major={major}
-          minor={minor}
-          pps={pps}
-          contentOrigin={contentOrigin}
-          contentGutter={contentGutter}
-          trackContentWidth={displayContentWidth}
-          totalH={displayLayout.totalH}
-          effectiveDuration={effectiveDuration}
-          majorTickInterval={majorTickInterval}
-          rangeSelection={rangeSelection}
-          marqueeRect={marqueeRect}
-          laneGapStrips={laneGapStrips}
-          dropPreview={assetDrop.dropPreview}
-          theme={theme}
-          displayTrackOrder={displayLayout.displayTrackOrder}
-          rowHeights={displayLayout.displayRowHeights}
-          rowGeometry={displayLayout.rowGeometry}
-          virtualRows={timelineFocus.virtualRows}
-          logicalRows={timelineFocus.logicalRows}
-          focusedTargetId={timelineFocus.focusedTargetId}
-          rowsVirtualized={timelineFocus.rowVirtualizationActive}
-          clipIndex={clipIndex}
-          renderTimeRange={renderTimeRange}
-          visibleTimeRange={visibleTimeRange}
-          pinnedClipIdentities={pinnedClipIdentities}
-          trackOrder={trackOrder}
-          tracks={tracks}
-          trackStyles={trackStyles}
-          groups={groups}
-          laneCounts={laneCounts}
-          selectedElementId={selectedElementId}
-          selectedElementIds={selectedElementIds}
-          hoveredClip={hoveredClip}
-          draggedClip={draggedClip}
-          resizingClip={resizingClip}
-          isScrubbing={isScrubbing}
-          blockedClipRef={blockedClipRef}
-          suppressClickRef={suppressClickRef}
-          scrollRef={scrollRef}
-          // Windowing drops content to mount a row cheaply; unvirtualized it is pure cost.
-          renderClipContent={
-            timelineFocus.rowVirtualizationActive && viewport.isScrolling
-              ? undefined
-              : renderClipContent
-          }
-          renderClipOverlay={renderClipOverlay}
-          playheadRef={playheadRef}
-          onDrillDown={onDrillDown}
-          onSelectElement={onSelectElement}
-          setHoveredClip={setHoveredClip}
-          setShowPopover={setShowPopover}
-          setRangeSelection={setRangeSelection}
-          setResizingClip={setResizingClip}
-          setDraggedClip={setDraggedClip}
-          setSelectedElementId={setSelectedElementId}
-          shiftClickClipRef={shiftClickClipRef}
-          getPreviewElement={getPreviewElement}
-          getTrackStyle={getTrackStyle}
-          keyframeCache={keyframeCache}
-          gsapAnimations={gsapAnimations}
-          selectedKeyframes={selectedKeyframes}
-          currentTime={currentTime}
-          onSeek={onSeek}
-          beatAnalysis={adjustedBeatAnalysis}
-          onSelectSegment={onSelectSegment}
-          onClickKeyframe={onClickKeyframe}
-          onShiftClickKeyframe={onShiftClickKeyframe}
-          onMoveKeyframe={onMoveKeyframe}
-          onContextMenuKeyframe={onContextMenuKeyframe}
-          onContextMenuClip={onContextMenuClip}
-          onContextMenuLane={(e, track, time) => {
-            if (draggedClip?.started || resizingClip) return;
-            setClipContextMenu(null);
-            openGapMenu({ x: e.clientX, y: e.clientY, track, time });
-          }}
-        />
-        {activeTool === "razor" && razorGuideX !== null && <TimelineRazorGuide x={razorGuideX} />}
+    <div {...meta.containerProps}>
+      <div {...meta.viewportProps}>
+        <TimelineCanvas />
+        {meta.razorGuide}
       </div>
-      <TimelineOverlays
-        elements={expandedElements}
-        elementsRef={expandedElementsRef}
-        theme={theme}
-        showShortcutHint={showShortcutHint}
-        showPopover={showPopover}
-        rangeSelection={rangeSelection}
-        setShowPopover={setShowPopover}
-        setRangeSelection={setRangeSelection}
-        kfContextMenu={kfContextMenu}
-        setKfContextMenu={setKfContextMenu}
-        onDeleteKeyframe={onDeleteKeyframe}
-        onDeleteAllKeyframes={onDeleteAllKeyframes}
-        onMoveKeyframeToPlayhead={onMoveKeyframeToPlayhead}
-        clipContextMenu={clipContextMenu}
-        setClipContextMenu={setClipContextMenu}
-        currentTime={currentTime}
-        onSplitElement={onSplitElement}
-        pinZoomBeforeEdit={pinZoomBeforeEdit}
-        onDeleteElement={_onDeleteElement}
-        onCopyClip={onCopyClip}
-        onPasteClip={onPasteClip}
-        onDuplicateClip={onDuplicateClip}
-        canPasteClip={canPasteClip}
-        gapContextMenu={gapMenuModel}
-        onDismissGapContextMenu={dismissGapMenu}
-        onCloseTrackGap={closeTrackGap}
-        onCloseAllTrackGaps={closeAllTrackGaps}
-        onHoverGapAction={setHoveredGapAction}
-      />
+      <TimelineOverlays />
     </div>
   );
+}
+
+export const Timeline = memo(function Timeline(props: TimelineProps = {}) {
+  return (
+    <TimelineProvider {...props}>
+      <TimelineView />
+    </TimelineProvider>
+  );
 });

package/src/player/components/TimelineCanvas.tsx

@@ -1,8 +1,6 @@
 import { memo } from "react";
 import { TimelineRuler } from "./TimelineRuler";
 import { PlayheadIndicator } from "./PlayheadIndicator";
-import type { TimelineRangeSelection } from "./timelineEditing";
-import type { TimelineDropPlacement } from "./timelineCallbacks";
 import {
   RULER_H,
   CLIP_Y,
@@ -14,41 +12,20 @@ import {
   getTimelineRowTop,
   getTimelineRowHeight,
 } from "./timelineLayout";
-import { usePlayerStore } from "../store/playerStore";
-import type { ResizingClipState } from "./useTimelineClipDrag";
 import { type MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
-import type { Rect } from "../../utils/marqueeGeometry";
 import { TimelineLanes } from "./TimelineLanes";
-import type { TimelineLaneBaseProps } from "./timelineLaneProps";
-import type { TimelineLaneGapStrips } from "./useTimelineGapHighlights";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
 import { resolveSnapGuide } from "./timelineSnapping";
-
-interface TimelineCanvasProps extends TimelineLaneBaseProps {
-  major: number[];
-  minor: number[];
-  totalH: number;
-  effectiveDuration: number;
-  majorTickInterval: number;
-  rangeSelection: TimelineRangeSelection | null;
-  /** Live rubber-band multi-select rectangle (canvas coordinates), or null. */
-  marqueeRect: Rect | null;
-  resizingClip: ResizingClipState | null;
-  /** Playhead is being actively scrubbed — fills the grab-handle head. */
-  isScrubbing: boolean;
-  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: TimelineDropPlacement | null;
-}
+import { useTimelineContext } from "./TimelineProvider";
 
 // 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) {
+export const TimelineCanvas = memo(function TimelineCanvas() {
+  const { state, actions } = useTimelineContext();
+  const props = state.canvas;
   const { draggedClip, resizingClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
   const snapGuide = resolveSnapGuide(draggedClip, resizingClip);
   const draggedRowIndex =
@@ -74,7 +51,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
     onRazorSplit,
     onRazorSplitAll,
   } = useTimelineEditContextOptional();
-  const beatDragging = usePlayerStore((s) => s.beatDragging);
+  const beatDragging = props.beatDragging;
   const draggedElement = draggedClip?.element ?? null;
   const draggedElementIdentity = draggedElement ? getTimelineElementIdentity(draggedElement) : null;
   // The drag ghost follows the cursor freely (both axes) — CapCut-style. The
@@ -122,6 +99,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
 
       <TimelineLanes
         {...props}
+        renderClipContent={actions.renderClipContent}
+        renderClipOverlay={actions.renderClipOverlay}
         snapGuide={snapGuide}
         draggedElement={draggedElement}
         multiDragPreview={multiDragPreview}
@@ -253,8 +232,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         currentTime={props.currentTime}
         theme={props.theme}
         getTrackStyle={props.getTrackStyle}
-        renderClipContent={props.renderClipContent}
-        renderClipOverlay={props.renderClipOverlay}
+        renderClipContent={actions.renderClipContent}
+        renderClipOverlay={actions.renderClipOverlay}
       />
 
       {/* Marquee (rubber-band) multi-select rectangle — mirrors the canvas