@hyperframes/studio 0.7.90 → 0.7.93

package/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -4,7 +4,7 @@ import React, { act } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { usePlayerStore } from "../store/playerStore";
-import type { ResizingClipState } from "./useTimelineClipDrag";
+import type { BlockedClipState, DraggedClipState, ResizingClipState } from "./useTimelineClipDrag";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
 import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
 
@@ -38,38 +38,77 @@ function renderResizeHarness(
   usePlayerStore.getState().setSelectedElementIds(new Set(selected));
 
   const scroll = document.createElement("div");
+  const setPointerCapture = vi.fn();
+  scroll.setPointerCapture = setPointerCapture;
   document.body.append(scroll);
   const onResizeElement = vi.fn();
+  const onMoveElement = vi.fn();
+  const onBlockedEditAttempt = vi.fn();
   const onResizeElements = vi.fn().mockResolvedValue(undefined);
   let setResizingClip: ((s: ResizingClipState | null) => void) | null = null;
+  let setDraggedClip: ((s: DraggedClipState | null) => void) | null = null;
+  let resizingClip: ResizingClipState | null = null;
+  let blockedClipRef: React.RefObject<BlockedClipState | null> | null = null;
+  let epoch = 0;
 
-  function Harness() {
+  function Harness({ sessionEpoch }: { sessionEpoch: number }) {
     const hook = useTimelineClipDrag({
       scrollRef: { current: scroll },
       ppsRef: { current: 100 },
       durationRef: { current: 100 },
       trackOrderRef: { current: [0, 1] },
       onResizeElement,
+      onMoveElement,
+      onBlockedEditAttempt,
       onResizeElements: options.wireGroupResize === false ? undefined : onResizeElements,
       setShowPopover: vi.fn(),
       setRangeSelectionRef: { current: vi.fn() },
+      sessionEpoch,
     });
     setResizingClip = hook.setResizingClip;
+    setDraggedClip = hook.setDraggedClip;
+    resizingClip = hook.resizingClip;
+    blockedClipRef = hook.blockedClipRef;
     return null;
   }
 
-  const root = mountReactHarness(<Harness />);
+  const root = mountReactHarness(<Harness sessionEpoch={epoch} />);
   const apply = setResizingClip!;
+  const dispatchPointer = (type: string, clientX: number, pointerId = 0) => {
+    const event = new MouseEvent(type, { bubbles: true, clientX, clientY: 0 });
+    Object.defineProperty(event, "pointerId", { value: pointerId });
+    window.dispatchEvent(event);
+  };
 
   return {
     onResizeElement,
+    onMoveElement,
+    onBlockedEditAttempt,
     onResizeElements,
+    setPointerCapture,
     storeById(id: string) {
       return usePlayerStore.getState().elements.find((e) => e.id === id)!;
     },
-    startResize(element: TimelineElement, edge: "start" | "end") {
+    getResizeProjection() {
+      return resizingClip?.groupPreview ?? [];
+    },
+    getBlockedClip() {
+      return blockedClipRef?.current ?? null;
+    },
+    startBlocked(element: TimelineElement, pointerId = 0) {
+      blockedClipRef!.current = {
+        pointerId,
+        element,
+        intent: "move",
+        originClientX: 0,
+        originClientY: 0,
+        started: false,
+      };
+    },
+    startResize(element: TimelineElement, edge: "start" | "end", pointerId = 0) {
       act(() => {
         apply({
+          pointerId,
           element,
           edge,
           originClientX: 0,
@@ -80,19 +119,57 @@ function renderResizeHarness(
         });
       });
     },
-    movePointer(clientX: number) {
+    startDrag(element: TimelineElement, pointerId = 0) {
+      act(() =>
+        setDraggedClip?.({
+          pointerId,
+          element,
+          originClientX: 0,
+          originClientY: 0,
+          originScrollLeft: 0,
+          originScrollTop: 0,
+          pointerClientX: 0,
+          pointerClientY: 0,
+          pointerOffsetX: 0,
+          pointerOffsetY: 0,
+          previewStart: element.start,
+          previewTrack: element.track,
+          insertRow: null,
+          snapTime: null,
+          snapType: null,
+          started: false,
+        }),
+      );
+    },
+    movePointer(clientX: number, pointerId = 0) {
       act(() => {
-        window.dispatchEvent(new MouseEvent("pointermove", { bubbles: true, clientX, clientY: 0 }));
+        dispatchPointer("pointermove", clientX, pointerId);
+      });
+    },
+    async dropPointer(pointerId = 0) {
+      await act(async () => {
+        dispatchPointer("pointerup", 0, pointerId);
       });
     },
-    async dropPointer() {
+    async moveAndDropPointer(clientX: number, pointerId = 0) {
       await act(async () => {
-        window.dispatchEvent(new MouseEvent("pointerup", { bubbles: true }));
+        dispatchPointer("pointermove", clientX, pointerId);
+        dispatchPointer("pointerup", clientX, pointerId);
       });
     },
+    cancelPointer(pointerId = 0) {
+      act(() => dispatchPointer("pointercancel", 0, pointerId));
+    },
+    losePointerCapture(pointerId = 0) {
+      act(() => dispatchPointer("lostpointercapture", 0, pointerId));
+    },
+    setSessionEpoch(next: number) {
+      epoch = next;
+      act(() => root.render(<Harness sessionEpoch={epoch} />));
+    },
     pressEscape() {
       act(() => {
-        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+        scroll.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
       });
     },
     unmount() {
@@ -161,14 +238,131 @@ describe("useTimelineClipDrag — single-clip resize (unchanged path)", () => {
   });
 });
 
+describe("useTimelineClipDrag — gesture lifecycle", () => {
+  it("does not capture a stationary click before the drag threshold", () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startDrag(a, 7);
+    expect(h.setPointerCapture).not.toHaveBeenCalled();
+
+    h.movePointer(3, 7);
+    expect(h.setPointerCapture).not.toHaveBeenCalled();
+
+    h.movePointer(5, 7);
+    expect(h.setPointerCapture).toHaveBeenCalledOnce();
+    expect(h.setPointerCapture).toHaveBeenCalledWith(7);
+    h.unmount();
+  });
+
+  it("commits the final drag position exactly once", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startDrag(a, 7);
+    await h.moveAndDropPointer(50, 7);
+    await h.dropPointer(7);
+    expect(h.onMoveElement).toHaveBeenCalledTimes(1);
+    expect(h.onMoveElement).toHaveBeenCalledWith(a, expect.objectContaining({ start: 0.5 }));
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("only single-clip onMoveElement wired"),
+    );
+    warnSpy.mockRestore();
+    h.unmount();
+  });
+
+  it("ignores a foreign pointer cancellation during a blocked gesture", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startBlocked(a, 7);
+    h.movePointer(5, 7);
+    expect(h.onBlockedEditAttempt).toHaveBeenCalledOnce();
+
+    h.cancelPointer(8);
+    expect(h.getBlockedClip()?.pointerId).toBe(7);
+
+    await h.dropPointer(7);
+    expect(h.getBlockedClip()).toBeNull();
+    h.unmount();
+  });
+
+  it("commits the final same-turn pointer move exactly once", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    await h.moveAndDropPointer(75, 7);
+    await h.dropPointer(7);
+    expect(h.onResizeElement).toHaveBeenCalledTimes(1);
+    expect(h.onResizeElement).toHaveBeenCalledWith(a, expect.objectContaining({ duration: 2.75 }));
+    h.unmount();
+  });
+
+  it("ignores another pointer and cancels without committing", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 8);
+    await h.dropPointer(8);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    h.cancelPointer(7);
+    await h.dropPointer(7);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.storeById("a").duration).toBe(2);
+    h.unmount();
+  });
+
+  it("cancels an active projection when the project epoch changes", () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 7);
+    h.setSessionEpoch(1);
+    expect(h.getResizeProjection()).toHaveLength(0);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.storeById("a").duration).toBe(2);
+    h.unmount();
+  });
+
+  it("does not commit a stale clip deleted during the gesture", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 7);
+    act(() => usePlayerStore.getState().setElements([]));
+    await h.dropPointer(7);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(usePlayerStore.getState().elements).toEqual([]);
+    h.unmount();
+  });
+
+  it("treats lost capture and unmount as cancellation", async () => {
+    const a = el("a", { duration: 2 });
+    const lost = renderResizeHarness([a], []);
+    lost.startResize(a, "end", 7);
+    lost.movePointer(50, 7);
+    lost.losePointerCapture(7);
+    await lost.dropPointer(7);
+    expect(lost.onResizeElement).not.toHaveBeenCalled();
+    lost.unmount();
+
+    const unmounted = renderResizeHarness([a], []);
+    unmounted.startResize(a, "end", 9);
+    unmounted.movePointer(50, 9);
+    unmounted.unmount();
+    expect(unmounted.onResizeElement).not.toHaveBeenCalled();
+    expect(usePlayerStore.getState().elements[0]?.duration).toBe(2);
+  });
+});
+
 describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
-  it("previews the non-grabbed member through the store, grabbed stays out until commit", () => {
+  it("previews every member without mutating canonical elements", () => {
     const { h } = startGroupResize(); // grabbed asks +0.5
 
-    // Non-grabbed member is previewed in the store; the grabbed clip renders from
-    // resizingClip state, so its store value is still the original until commit.
-    expect(h.storeById("b").duration).toBe(3.5);
+    expect(h.getResizeProjection()).toEqual([
+      expect.objectContaining({ key: "a", duration: 2.5 }),
+      expect.objectContaining({ key: "b", duration: 3.5 }),
+    ]);
     expect(h.storeById("a").duration).toBe(2);
+    expect(h.storeById("b").duration).toBe(3);
     h.unmount();
   });
 
@@ -186,6 +380,7 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
       { coalesceKey: expect.stringMatching(/^clip-group-resize:/) },
     );
     expect(h.storeById("a").duration).toBe(2.5);
+    expect(h.getResizeProjection()).toHaveLength(0);
     expect(h.storeById("b").duration).toBe(3.5);
     h.unmount();
   });
@@ -213,7 +408,10 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
     });
     h.startResize(a, "end");
     h.movePointer(50);
-    expect(h.storeById("b").duration).toBe(3.5);
+    expect(h.getResizeProjection()).toEqual(
+      expect.arrayContaining([expect.objectContaining({ key: "b", duration: 3.5 })]),
+    );
+    expect(h.storeById("b").duration).toBe(3);
 
     await h.dropPointer();
     expect(h.storeById("a").duration).toBe(2);
@@ -229,12 +427,16 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
     h.unmount();
   });
 
-  it("Escape rolls back the previewed non-grabbed member and persists nothing", () => {
+  it("Escape discards the projection and persists nothing", () => {
     const { h } = startGroupResize();
-    expect(h.storeById("b").duration).toBe(3.5); // previewed
+    expect(h.getResizeProjection()).toHaveLength(2);
+    const sawEscape = vi.fn();
+    document.addEventListener("keydown", sawEscape, { once: true });
 
     h.pressEscape();
-    expect(h.storeById("b").duration).toBe(3); // restored
+    expect(sawEscape).toHaveBeenCalledOnce();
+    expect(h.getResizeProjection()).toHaveLength(0);
+    expect(h.storeById("b").duration).toBe(3);
     expect(h.onResizeElement).not.toHaveBeenCalled();
     h.unmount();
   });

package/src/player/components/useTimelineClipDrag.ts

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useMemo } from "react";
+import { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import {
   applyTimelineAutoScrollStep,
@@ -25,9 +25,13 @@ import type {
   ResizingClipState,
   BlockedClipState,
 } from "./timelineClipDragTypes";
-import { mountTimelineClipDragGestureLifecycle } from "./timelineClipDragGestureLifecycle";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
 import type { TimelineRowGeometry } from "./timelineLayout";
+import {
+  mountTimelineClipDragGestureLifecycle,
+  type TimelineGestureKind,
+  type TimelineGestureLifecycle,
+} from "./timelineClipDragGestureLifecycle";
 
 export type {
   DraggedClipState,
@@ -74,6 +78,7 @@ interface UseTimelineClipDragInput {
   readZIndex?: (element: TimelineElement) => number;
   onStackingPatches?: (patches: StackingPatch[]) => Promise<unknown> | void;
   refreshAfterLaneMove?: () => void;
+  sessionEpoch?: number;
 }
 
 export function useTimelineClipDrag({
@@ -92,6 +97,7 @@ export function useTimelineClipDrag({
   readZIndex,
   onStackingPatches,
   refreshAfterLaneMove,
+  sessionEpoch = 0,
 }: UseTimelineClipDragInput) {
   const updateElement = usePlayerStore((s) => s.updateElement);
   const rawBeatTimes = usePlayerStore((s) => s.beatAnalysis?.beatTimes ?? EMPTY_BEAT_TIMES);
@@ -162,41 +168,72 @@ export function useTimelineClipDrag({
     [],
   );
 
-  const [draggedClip, setDraggedClip] = useState<DraggedClipState | null>(null);
+  const [draggedClip, setDraggedClipState] = useState<DraggedClipState | null>(null);
   const draggedClipRef = useRef<DraggedClipState | null>(null);
-  draggedClipRef.current = draggedClip;
+  const publishDraggedClip = useCallback((next: DraggedClipState | null) => {
+    draggedClipRef.current = next;
+    setDraggedClipState(next);
+  }, []);
 
-  const [resizingClip, setResizingClip] = useState<ResizingClipState | null>(null);
+  const [resizingClip, setResizingClipState] = useState<ResizingClipState | null>(null);
   const resizingClipRef = useRef<ResizingClipState | null>(null);
-  resizingClipRef.current = resizingClip;
+  const publishResizingClip = useCallback((next: ResizingClipState | null) => {
+    resizingClipRef.current = next;
+    setResizingClipState(next);
+  }, []);
+
+  const lifecycleRef = useRef<TimelineGestureLifecycle>({
+    kind: null,
+    phase: "complete",
+    pointerId: null,
+    sessionEpoch,
+  });
+  const sessionEpochRef = useRef(sessionEpoch);
+  sessionEpochRef.current = sessionEpoch;
+  const gestureSelectedKeysRef = useRef<ReadonlySet<string>>(new Set());
+  const cancelGestureRef = useRef<
+    (options?: { updateReact?: boolean; suppressClick?: boolean }) => boolean
+  >(() => false);
+  const beginGesture = useCallback((kind: TimelineGestureKind, pointerId: number) => {
+    if (lifecycleRef.current.phase === "active") cancelGestureRef.current();
+    lifecycleRef.current = {
+      kind,
+      phase: "active",
+      pointerId,
+      sessionEpoch: sessionEpochRef.current,
+    };
+    gestureSelectedKeysRef.current = new Set(usePlayerStore.getState().selectedElementIds);
+  }, []);
+  const setDraggedClip = useCallback(
+    (next: DraggedClipState | null) => {
+      if (!next) {
+        cancelGestureRef.current();
+        return;
+      }
+      beginGesture("drag", next.pointerId);
+      publishDraggedClip(next);
+    },
+    [beginGesture, publishDraggedClip],
+  );
+  const setResizingClip = useCallback(
+    (next: ResizingClipState | null) => {
+      if (!next) {
+        cancelGestureRef.current();
+        return;
+      }
+      beginGesture("resize", next.pointerId);
+      publishResizingClip(next);
+    },
+    [beginGesture, publishResizingClip],
+  );
 
   const blockedClipRef = useRef<BlockedClipState | null>(null);
   const suppressClickRef = useRef(false);
 
-  // Active multi-select group-resize session (restored from main 36413da7f): set
-  // lazily on the first resize pointermove when the grabbed clip is part of a
-  // capability-clean multi-selection (null ⇒ single-clip resize). Holds the
-  // pre-gesture snapshot so the non-grabbed members (previewed through the store)
-  // roll back on escape / cancel / failed persist.
+  // Active multi-select group-resize session, created lazily on first movement.
+  // It owns a projection only; canonical store timing changes at commit.
   const groupResizeRef = useRef<TimelineGroupResizeSession | null>(null);
 
-  // Restore the non-grabbed group members to their pre-gesture timing (the
-  // grabbed clip renders from resizingClip state, so it is never written during
-  // preview). `all` also restores the grabbed clip after a committed persist fails.
-  const restoreGroupResizeMembers = useCallback(
-    (session: TimelineGroupResizeSession, all = false) => {
-      for (const m of session.members) {
-        if (!all && m.key === session.grabbedKey) continue;
-        updateElement(m.key, {
-          start: m.start,
-          duration: m.duration,
-          playbackStart: m.playbackStart,
-        });
-      }
-    },
-    [updateElement],
-  );
-
   const onMoveElementRef = useRef(onMoveElement);
   onMoveElementRef.current = onMoveElement;
   const onMoveElementsRef = useRef(onMoveElements);
@@ -237,7 +274,7 @@ export function useTimelineClipDrag({
         trackOrder: trackOrderRef.current,
         rowHeights: rowGeometryRef?.current.rowHeights,
         elements: elementsRef.current,
-        selectedKeys: usePlayerStore.getState().selectedElementIds,
+        selectedKeys: gestureSelectedKeysRef.current,
         buildSnapTargets,
         audioTracks: dragAudioTracksRef.current,
       });
@@ -256,18 +293,19 @@ export function useTimelineClipDrag({
         buildSnapTargets,
       });
       const setResizeState = (v: ResizePreviewResult) =>
-        setResizingClip((prev) => (prev ? { ...prev, started: true, ...v } : prev));
+        publishResizingClip(
+          resizingClipRef.current ? { ...resizingClipRef.current, started: true, ...v } : null,
+        );
 
       // Group resize: a capability-clean multi-selection resizes rigidly by one
       // shared, member-clamped delta (legacy main 36413da7f). The grabbed clip
-      // drives the raw delta and renders from resizingClip state; non-grabbed
-      // members preview through the store (their store value stays pristine).
+      // drives the raw delta; every member renders from the coordinator projection.
       const grabbedKey = resize.element.key ?? resize.element.id;
       let session = groupResizeRef.current;
       if (!session || session.grabbedKey !== grabbedKey || session.edge !== resize.edge) {
         const members = buildTimelineGroupResizeMembers(
           elementsRef.current,
-          usePlayerStore.getState().selectedElementIds,
+          gestureSelectedKeysRef.current,
           grabbedKey,
           resize.edge,
         );
@@ -287,9 +325,9 @@ export function useTimelineClipDrag({
         setResizeState(next);
         return;
       }
-      previewGroupResize(session, next, grabbedKey, updateElement, setResizeState);
+      previewGroupResize(session, next, setResizeState);
     },
-    [scrollRef, ppsRef, buildSnapTargets, updateElement],
+    [scrollRef, ppsRef, buildSnapTargets, publishResizingClip],
   );
   const applyResizePointerRef = useRef(applyResizePointer);
   applyResizePointerRef.current = applyResizePointer;
@@ -300,9 +338,7 @@ export function useTimelineClipDrag({
       cancelAnimationFrame(clipDragScrollRaf.current);
       clipDragScrollRaf.current = 0;
     }
-    // Gesture teardown: drop the frozen-per-gesture perf caches so the next drag
-    // rebuilds them against fresh store state (see snapTargetsCacheRef). Does NOT
-    // touch groupResizeRef — commit reads it after this runs.
+    // Gesture teardown: drop frozen caches so the next gesture reads fresh state.
     snapTargetsCacheRef.current.clear();
     dragAudioTracksRef.current = null;
   }, []);
@@ -317,16 +353,14 @@ export function useTimelineClipDrag({
     if (!applyTimelineAutoScrollStep(scroll, pointer.clientX, pointer.clientY)) return;
 
     if (drag) {
-      setDraggedClip((prev) =>
-        prev ? updateDraggedClipPreview(prev, pointer.clientX, pointer.clientY) : prev,
-      );
+      publishDraggedClip(updateDraggedClipPreview(drag, pointer.clientX, pointer.clientY));
     } else if (resize) {
       // Re-run the trim preview so the edge keeps tracking while the content
       // scrolls under the stationary pointer (scroll-compensated pointer x).
       applyResizePointerRef.current(resize, pointer.clientX);
     }
     clipDragScrollRaf.current = requestAnimationFrame(stepClipDragAutoScroll);
-  }, [scrollRef, updateDraggedClipPreview]);
+  }, [publishDraggedClip, scrollRef, updateDraggedClipPreview]);
 
   const syncClipDragAutoScroll = useCallback(
     (clientX: number, clientY: number) => {
@@ -354,35 +388,44 @@ export function useTimelineClipDrag({
   const stopClipDragAutoScrollRef = useRef(stopClipDragAutoScroll);
   stopClipDragAutoScrollRef.current = stopClipDragAutoScroll;
 
-  useMountEffect(() => {
-    return mountTimelineClipDragGestureLifecycle({
-      draggedClipRef,
-      resizingClipRef,
-      blockedClipRef,
-      groupResizeRef,
-      suppressClickRef,
-      elementsRef,
-      trackOrderRef,
-      setDraggedClip,
-      setResizingClip,
-      setShowPopover,
-      setRangeSelectionRef,
-      applyResizePointerRef,
-      syncClipDragAutoScrollRef,
-      stopClipDragAutoScrollRef,
-      updateDraggedClipPreviewRef,
-      restoreGroupResizeMembers,
-      updateElement,
-      onMoveElementRef,
-      onMoveElementsRef,
-      onResizeElementRef,
-      onResizeElementsRef,
-      onBlockedEditAttemptRef,
-      readZIndexRef,
+  useMountEffect(() =>
+    mountTimelineClipDragGestureLifecycle({
       onStackingPatchesRef,
       refreshAfterLaneMoveRef,
-    });
-  });
+      readZIndexRef,
+      onBlockedEditAttemptRef,
+      onResizeElementsRef,
+      onResizeElementRef,
+      onMoveElementsRef,
+      onMoveElementRef,
+      updateElement,
+      publishDraggedClip,
+      updateDraggedClipPreviewRef,
+      stopClipDragAutoScrollRef,
+      syncClipDragAutoScrollRef,
+      applyResizePointerRef,
+      setRangeSelectionRef,
+      setShowPopover,
+      setResizingClipState,
+      setDraggedClipState,
+      trackOrderRef,
+      elementsRef,
+      gestureSelectedKeysRef,
+      suppressClickRef,
+      groupResizeRef,
+      blockedClipRef,
+      resizingClipRef,
+      draggedClipRef,
+      scrollRef,
+      cancelGestureRef,
+      sessionEpochRef,
+      lifecycleRef,
+    }),
+  );
+
+  useEffect(() => {
+    cancelGestureRef.current();
+  }, [sessionEpoch]);
 
   return {
     draggedClip,
@@ -391,7 +434,6 @@ export function useTimelineClipDrag({
     setResizingClip,
     blockedClipRef,
     suppressClickRef,
-    syncClipDragAutoScroll,
     stopClipDragAutoScroll,
   };
 }