@hyperframes/studio 0.7.90 → 0.7.92

package/src/player/components/Timeline.tsx

@@ -12,7 +12,7 @@ import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
 import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
-import { TimelineOverlays } from "./TimelineOverlays";
+import { TimelineOverlays, type ClipContextMenuState } from "./TimelineOverlays";
 import { useTimelineEditPinning } from "./useTimelineEditPinning";
 import { useTimelineStackingSync } from "./useTimelineStackingSync";
 import { useTimelineGeometry } from "./useTimelineGeometry";
@@ -29,7 +29,6 @@ import {
 import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
 import { useTrackGapMenu } from "./useTrackGapMenu";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
-import { useStudioPlaybackContextOptional } from "../../contexts/StudioContext";
 import { TimelineRazorGuide, useTimelineRazorInteraction } from "./TimelineRazorInteraction";
 import { useTimelinePerformanceTelemetry } from "./useTimelinePerformanceTelemetry";
 import {
@@ -45,6 +44,7 @@ import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { useTimelineRowVirtualization } from "./useTimelineRowVirtualization";
 import { useTimelineClipRenderWindow } from "./useTimelineClipRenderWindow";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
+import { useTimelineLaneMoveRefresh } from "./useTimelineLaneMoveRefresh";
 
 export {
   shouldAutoScrollTimeline,
@@ -106,11 +106,7 @@ export const Timeline = memo(function Timeline({
     onSplitElement: onSplitElementOverride,
   });
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
-  const playbackContext = useStudioPlaybackContextOptional();
-  const setRefreshKey = playbackContext?.setRefreshKey;
-  const refreshAfterLaneMove = useCallback(() => {
-    setRefreshKey?.((key) => key + 1);
-  }, [setRefreshKey]);
+  const refreshAfterLaneMove = useTimelineLaneMoveRefresh();
   useMusicBeatAnalysis();
   const rawElements = usePlayerStore((s) => s.elements);
   const expandedElements = useExpandedTimelineElements();
@@ -129,14 +125,8 @@ export const Timeline = memo(function Timeline({
   const clipRevealRequest = usePlayerStore((s) => s.clipRevealRequest);
   const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
   const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
-  const hasKeyframedClips = useMemo(
-    () => hasKeyframedTimelineClips(gsapAnimations),
-    [gsapAnimations],
-  );
-  const labelMode = hasKeyframedClips;
-  // Without the label column the pre-t=0 breathing room is still TRACKS_LEFT_PAD
-  // (dropping it would jam clip 0 against the gutter on every non-keyframed
-  // composition); in label mode the 232px label column already provides it.
+  const labelMode = useMemo(() => hasKeyframedTimelineClips(gsapAnimations), [gsapAnimations]);
+  // 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);
@@ -151,11 +141,7 @@ export const Timeline = memo(function Timeline({
   const shiftHeld = useTimelineShiftModifier();
   const [showPopover, setShowPopover] = useState(false);
   const [kfContextMenu, setKfContextMenu] = useState<KeyframeDiamondContextMenuState | null>(null);
-  const [clipContextMenu, setClipContextMenu] = useState<{
-    x: number;
-    y: number;
-    element: TimelineElement;
-  } | null>(null);
+  const [clipContextMenu, setClipContextMenu] = useState<ClipContextMenuState | null>(null);
   const setContainerRef = useCallback((el: HTMLDivElement | null) => {
     containerRef.current = el;
   }, []);
@@ -236,7 +222,6 @@ export const Timeline = memo(function Timeline({
     setResizingClip,
     blockedClipRef,
     suppressClickRef,
-    syncClipDragAutoScroll,
   } = useTimelineClipDrag({
     scrollRef,
     ppsRef,
@@ -253,22 +238,26 @@ export const Timeline = memo(function Timeline({
     readZIndex: zSyncEnabled ? readClipZIndex : undefined,
     onStackingPatches: zSyncEnabled ? applyStackingPatches : undefined,
     refreshAfterLaneMove,
+    sessionEpoch,
   });
 
-  const { isDragOver, handleAssetDragOver, handleAssetDrop, clearDropPreview } =
-    useTimelineAssetDrop({
-      scrollRef,
-      ppsRef,
-      durationRef,
-      trackOrderRef,
-      rowGeometryRef,
-      contentOrigin,
-      onFileDrop: pinnedOnFileDrop,
-      onAssetDrop: pinnedOnAssetDrop,
-      onBlockDrop: pinnedOnBlockDrop,
-      onCompositionDrop: pinnedOnCompositionDrop,
-    });
+  const assetDrop = useTimelineAssetDrop({
+    scrollRef,
+    ppsRef,
+    durationRef,
+    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,
@@ -289,7 +278,7 @@ export const Timeline = memo(function Timeline({
     selectedElementId,
     revealElementId: clipRevealRequest?.elementId ?? null,
     draggedRowKey: draggedClip?.started ? draggedClip.previewTrack : undefined,
-    resizingRowKey: resizingClip?.element.track,
+    resizingElementIds,
     clipContextMenuRowKey: clipContextMenu?.element.track,
     keyframeContextMenuRowKey: kfContextMenu?.element.track,
     lastScrollLeftRef,
@@ -332,7 +321,7 @@ export const Timeline = memo(function Timeline({
     duration: displayDuration,
     selectedElementId: selectedElementId ?? undefined,
     draggedElementId: draggedClip ? getTimelineElementIdentity(draggedClip.element) : undefined,
-    resizingElementId: resizingClip ? getTimelineElementIdentity(resizingClip.element) : undefined,
+    resizingElementIds,
     revealElementId: clipRevealRequest?.elementId,
     focusedEaseElementId: focusedEaseSegment?.elementId,
     clipContextMenuElementId: clipContextMenu
@@ -405,6 +394,7 @@ export const Timeline = memo(function Timeline({
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
+    handlePointerCancel,
   } = useTimelineRangeSelection({
     scrollRef,
     ppsRef,
@@ -417,10 +407,11 @@ export const Timeline = memo(function Timeline({
     isDragging,
     setShowPopover,
     elementsRef: expandedElementsRef,
-    trackOrderRef,
+    clipIndex,
     rowGeometryRef,
     onSelectElement,
     contentOrigin,
+    sessionEpoch,
   });
   setRangeSelectionRef.current = setRangeSelection; // stable ref consumed by useTimelineClipDrag
 
@@ -443,11 +434,11 @@ export const Timeline = memo(function Timeline({
   if (!timelineReady || expandedElements.length === 0) {
     return (
       <TimelineEmptyState
-        isDragOver={isDragOver}
+        isDragOver={assetDrop.isDragOver}
         onFileDrop={!!onFileDrop}
-        onDragOver={handleAssetDragOver}
-        onDragLeave={() => clearDropPreview()}
-        onDrop={handleAssetDrop}
+        onDragOver={assetDrop.handleAssetDragOver}
+        onDragLeave={assetDrop.handleAssetDragLeave}
+        onDrop={assetDrop.handleAssetDrop}
       />
     );
   }
@@ -457,7 +448,7 @@ export const Timeline = memo(function Timeline({
       ref={setContainerRef}
       aria-label="Timeline"
       data-timeline-element-count={expandedElements.length}
-      className={`relative border-t select-none h-full overflow-hidden ${isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      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={{
@@ -468,6 +459,7 @@ export const Timeline = memo(function Timeline({
     >
       <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}
@@ -478,9 +470,9 @@ export const Timeline = memo(function Timeline({
           syncScrollViewport(e.currentTarget, true);
         }}
         {...rowWindow.timelineFocusProps}
-        onDragOver={handleAssetDragOver}
-        onDragLeave={() => clearDropPreview()}
-        onDrop={handleAssetDrop}
+        onDragOver={assetDrop.handleAssetDragOver}
+        onDragLeave={assetDrop.handleAssetDragLeave}
+        onDrop={assetDrop.handleAssetDrop}
         onPointerDown={(e) => {
           // Let interactive controls (keyframe nav/toggle, caret, inputs) handle
           // their own clicks — scrubbing here would preventDefault and eat them.
@@ -490,7 +482,8 @@ export const Timeline = memo(function Timeline({
         }}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
-        onLostPointerCapture={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+        onLostPointerCapture={handlePointerCancel}
       >
         <TimelineCanvas
           major={major}
@@ -541,7 +534,6 @@ export const Timeline = memo(function Timeline({
           setResizingClip={setResizingClip}
           setDraggedClip={setDraggedClip}
           setSelectedElementId={setSelectedElementId}
-          syncClipDragAutoScroll={syncClipDragAutoScroll}
           shiftClickClipRef={shiftClickClipRef}
           getPreviewElement={getPreviewElement}
           getTrackStyle={getTrackStyle}
@@ -561,7 +553,12 @@ export const Timeline = memo(function Timeline({
             setSelectedElementId(el.key ?? el.id);
             onSelectElement?.(el);
             dismissGapMenu();
-            setClipContextMenu({ x: e.clientX, y: e.clientY, element: el });
+            setClipContextMenu({
+              x: e.clientX,
+              y: e.clientY,
+              element: el,
+              sessionEpoch: usePlayerStore.getState().timelineSessionEpoch,
+            });
           }}
           onContextMenuLane={(e, track, time) => {
             if (draggedClip?.started || resizingClip) return;
@@ -572,6 +569,8 @@ export const Timeline = memo(function Timeline({
         {activeTool === "razor" && razorGuideX !== null && <TimelineRazorGuide x={razorGuideX} />}
       </div>
       <TimelineOverlays
+        elements={expandedElements}
+        elementsRef={expandedElementsRef}
         theme={theme}
         showShortcutHint={showShortcutHint}
         showPopover={showPopover}

package/src/player/components/TimelineCanvas.tsx

@@ -1,8 +1,7 @@
 import { memo } from "react";
 import { TimelineRuler } from "./TimelineRuler";
 import { PlayheadIndicator } from "./PlayheadIndicator";
-import { getTimelineEditCapabilities, type TimelineRangeSelection } from "./timelineEditing";
-import { getRenderedTimelineElement } from "./timelineTheme";
+import type { TimelineRangeSelection } from "./timelineEditing";
 import {
   RULER_H,
   CLIP_Y,
@@ -19,13 +18,11 @@ import type { ResizingClipState } from "./useTimelineClipDrag";
 import { type MultiDragPreviewInput } from "./timelineMultiDragPreview";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import type { Rect } from "../../utils/marqueeGeometry";
-import { TimelineClip } from "./TimelineClip";
 import { TimelineLanes } from "./TimelineLanes";
 import type { TimelineLaneBaseProps } from "./timelineLaneProps";
-import { renderClipChildren } from "./timelineClipChildren";
 import type { TimelineLaneGapStrips } from "./useTimelineGapHighlights";
-import { isTimelineClipActive } from "./useTimelineActiveClips";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import { TimelineGestureOverlay } from "./TimelineGestureOverlay";
 
 interface TimelineCanvasProps extends TimelineLaneBaseProps {
   major: number[];
@@ -65,15 +62,6 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   const draggedElement = draggedClip?.element ?? null;
   const draggedElementIdentity = draggedElement ? getTimelineElementIdentity(draggedElement) : null;
-  const activeDraggedElement =
-    draggedClip?.started === true && draggedElement && draggedElementIdentity
-      ? getRenderedTimelineElement({
-          element: draggedElement,
-          draggedElementId: draggedElementIdentity,
-          previewStart: draggedClip.previewStart,
-          previewTrack: draggedClip.previewTrack,
-        })
-      : null;
   // The drag ghost follows the cursor freely (both axes) — CapCut-style. The
   // "magnetic" affordance is a highlight on the destination lane (draggedRowIndex),
   // which flips at the MAGNETIC_TRACK_THRESHOLD point; the clip drops into it.
@@ -94,22 +82,6 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
           selectedKeys: selectedElementIds,
         }
       : null;
-  const activeDraggedPosition =
-    draggedClip?.started === true && activeDraggedElement && scrollRef.current
-      ? {
-          left:
-            draggedClip.pointerClientX -
-            scrollRef.current.getBoundingClientRect().left +
-            scrollRef.current.scrollLeft -
-            draggedClip.pointerOffsetX,
-          top:
-            draggedClip.pointerClientY -
-            scrollRef.current.getBoundingClientRect().top +
-            scrollRef.current.scrollTop -
-            draggedClip.pointerOffsetY,
-        }
-      : null;
-
   return (
     <div
       className="relative"
@@ -235,47 +207,18 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         />
       )}
 
-      {/* Drag ghost */}
-      {activeDraggedElement && activeDraggedPosition && (
-        <div
-          className="absolute pointer-events-none"
-          style={{
-            top: activeDraggedPosition.top,
-            left: activeDraggedPosition.left,
-            width: Math.max(activeDraggedElement.duration * props.pps, 4),
-            height: draggedClipHeight,
-            zIndex: 40,
-          }}
-        >
-          <TimelineClip
-            el={{ ...activeDraggedElement, start: 0 }}
-            pps={props.pps}
-            clipY={0}
-            isSelected={
-              props.selectedElementId === (activeDraggedElement.key ?? activeDraggedElement.id)
-            }
-            isHovered={false}
-            isDragging={true}
-            isActive={isTimelineClipActive(activeDraggedElement, props.currentTime)}
-            hasCustomContent={!!props.renderClipContent}
-            capabilities={getTimelineEditCapabilities(activeDraggedElement)}
-            theme={props.theme}
-            isComposition={!!activeDraggedElement.compositionSrc}
-            onHoverStart={() => {}}
-            onHoverEnd={() => {}}
-            onResizeStart={() => {}}
-            onClick={() => {}}
-            onDoubleClick={() => {}}
-          >
-            {renderClipChildren(
-              activeDraggedElement,
-              props.getTrackStyle(activeDraggedElement.tag),
-              props.renderClipContent,
-              props.renderClipOverlay,
-            )}
-          </TimelineClip>
-        </div>
-      )}
+      <TimelineGestureOverlay
+        drag={draggedClip}
+        scrollRef={scrollRef}
+        pixelsPerSecond={props.pps}
+        rowHeight={draggedClipHeight}
+        selectedElementId={props.selectedElementId}
+        currentTime={props.currentTime}
+        theme={props.theme}
+        getTrackStyle={props.getTrackStyle}
+        renderClipContent={props.renderClipContent}
+        renderClipOverlay={props.renderClipOverlay}
+      />
 
       {/* Marquee (rubber-band) multi-select rectangle — mirrors the canvas
           MarqueeOverlay look: semi-transparent accent fill + dashed border. */}

package/src/player/components/TimelineClip.tsx

@@ -12,6 +12,7 @@ interface TimelineClipProps {
   isSelected: boolean;
   isHovered: boolean;
   isDragging?: boolean;
+  isGestureActor?: boolean;
   isActive?: boolean;
   hasCustomContent: boolean;
   capabilities: TimelineEditCapabilities;
@@ -36,6 +37,7 @@ export const TimelineClip = memo(function TimelineClip({
   isSelected,
   isHovered,
   isDragging = false,
+  isGestureActor = false,
   isActive = false,
   hasCustomContent,
   capabilities,
@@ -85,13 +87,14 @@ export const TimelineClip = memo(function TimelineClip({
 
   return (
     <div
-      data-clip="true"
-      data-el-id={el.key ?? el.id}
+      data-clip={isGestureActor ? undefined : "true"}
+      data-el-id={isGestureActor ? undefined : (el.key ?? el.id)}
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
       data-active={isActive ? "" : undefined}
-      tabIndex={-1}
+      aria-hidden={isGestureActor ? "true" : undefined}
+      tabIndex={isGestureActor ? undefined : -1}
       className={clipClassName}
       style={style}
       title={