@hyperframes/studio 0.7.89 → 0.7.92

package/src/player/components/useTimelineRangeSelection.ts

@@ -10,6 +10,7 @@ import { liveTime, usePlayerStore } from "../store/playerStore";
 import { getTimelineScrubTime } from "./timelineLayout";
 import {
   computeMarqueeSelection,
+  getMarqueeClipCandidates,
   getMarqueeRect,
   isMarqueeDrag,
   isTimelineRulerPress,
@@ -17,6 +18,7 @@ import {
 } from "./timelineMarquee";
 import type { Rect } from "../../utils/marqueeGeometry";
 import type { TimelineRowGeometry } from "./timelineLayout";
+import type { TimelineClipIndex } from "../lib/timelineClipIndex";
 
 interface UseTimelineRangeSelectionInput {
   scrollRef: React.RefObject<HTMLDivElement | null>;
@@ -30,10 +32,11 @@ interface UseTimelineRangeSelectionInput {
   isDragging: React.RefObject<boolean>;
   setShowPopover: (v: boolean) => void;
   elementsRef: React.RefObject<TimelineElement[]>;
-  trackOrderRef: React.RefObject<number[]>;
+  clipIndex: TimelineClipIndex;
   rowGeometryRef: React.RefObject<TimelineRowGeometry>;
   onSelectElement?: (element: TimelineElement | null) => void;
   contentOrigin: number;
+  sessionEpoch: number;
 }
 
 interface MarqueeDragState {
@@ -73,16 +76,21 @@ function commitMarqueeSelection(
   rect: Rect,
   additive: boolean,
   marquee: MarqueeDragState,
-  elements: TimelineElement[],
-  trackOrder: number[],
-  rowHeights: readonly number[],
+  clipIndex: TimelineClipIndex,
+  rowGeometry: TimelineRowGeometry,
   pps: number,
   contentOrigin: number,
 ): void {
+  const candidates = getMarqueeClipCandidates({
+    clipIndex,
+    rowGeometry,
+    marquee: rect,
+    pps,
+    contentOrigin,
+  });
   const { ids, primaryId } = computeMarqueeSelection({
-    clips: toMarqueeClips(elements),
-    trackOrder,
-    rowHeights,
+    clips: toMarqueeClips([...candidates]),
+    rowGeometry,
     pps,
     contentOrigin,
     marquee: rect,
@@ -95,6 +103,28 @@ function commitMarqueeSelection(
   store.setSelectedElementIds(ids);
 }
 
+function canStartPointerGesture(
+  event: React.PointerEvent,
+  activePointerId: number | null,
+  sessionEpoch: number,
+): boolean {
+  return (
+    event.button === 0 &&
+    activePointerId === null &&
+    sessionEpoch === usePlayerStore.getState().timelineSessionEpoch
+  );
+}
+
+function isMarqueePress(
+  point: { x: number; y: number } | null,
+  scrollRect: DOMRect | undefined,
+  clientY: number,
+): point is { x: number; y: number } {
+  return (
+    point !== null && scrollRect !== undefined && !isTimelineRulerPress(clientY, scrollRect.top)
+  );
+}
+
 export function useTimelineRangeSelection({
   scrollRef,
   ppsRef,
@@ -107,10 +137,11 @@ export function useTimelineRangeSelection({
   isDragging,
   setShowPopover,
   elementsRef,
-  trackOrderRef,
+  clipIndex,
   rowGeometryRef,
   onSelectElement,
   contentOrigin,
+  sessionEpoch,
 }: UseTimelineRangeSelectionInput) {
   const isRangeSelecting = useRef(false);
   const rangeAnchorTime = useRef(0);
@@ -126,6 +157,17 @@ export function useTimelineRangeSelection({
 
   const seekRafRef = useRef(0);
   const pendingClientXRef = useRef(0);
+  const activePointerIdRef = useRef<number | null>(null);
+  const gestureEpochRef = useRef<number | null>(null);
+  const sessionEpochRef = useRef(sessionEpoch);
+  sessionEpochRef.current = sessionEpoch;
+
+  const isGestureSessionCurrent = useCallback(
+    () =>
+      gestureEpochRef.current === sessionEpochRef.current &&
+      gestureEpochRef.current === usePlayerStore.getState().timelineSessionEpoch,
+    [],
+  );
 
   // Marquee (rubber-band) multi-select on the empty timeline body.
   const marqueeRef = useRef<MarqueeDragState | null>(null);
@@ -159,7 +201,7 @@ export function useTimelineRangeSelection({
   const applyMarqueeAtClient = useCallback(
     (clientX: number, clientY: number, shiftKey: boolean) => {
       const marquee = marqueeRef.current;
-      if (!marquee) return;
+      if (!marquee || !isGestureSessionCurrent()) return;
       const point = toContentPoint(clientX, clientY);
       if (!point) return;
       if (!marquee.active && !isMarqueeDrag(marquee.originX, marquee.originY, point.x, point.y)) {
@@ -175,14 +217,13 @@ export function useTimelineRangeSelection({
         rect,
         additive,
         marquee,
-        elementsRef.current ?? [],
-        trackOrderRef.current ?? [],
-        rowGeometryRef.current.rowHeights,
+        clipIndex,
+        rowGeometryRef.current,
         ppsRef.current,
         contentOrigin,
       );
     },
-    [toContentPoint, elementsRef, trackOrderRef, rowGeometryRef, ppsRef, contentOrigin],
+    [toContentPoint, isGestureSessionCurrent, clipIndex, rowGeometryRef, ppsRef, contentOrigin],
   );
 
   const stopMarqueeAutoScroll = useCallback(() => {
@@ -203,14 +244,16 @@ export function useTimelineRangeSelection({
     const marquee = marqueeRef.current;
     const pointer = marqueePointerRef.current;
     const scroll = scrollRef.current;
-    if (!marquee || !pointer || !scroll) return;
+    if (!marquee || !pointer || !scroll || !isGestureSessionCurrent()) {
+      return;
+    }
     if (!applyTimelineAutoScrollStep(scroll, pointer.clientX, pointer.clientY)) return;
 
     // Re-run at the SAME client point: toContentPoint folds in the new scroll, so
     // the marquee's moving corner tracks the revealed content.
     applyMarqueeAtClient(pointer.clientX, pointer.clientY, pointer.shiftKey);
     marqueeScrollRaf.current = requestAnimationFrame(stepMarqueeAutoScroll);
-  }, [scrollRef, applyMarqueeAtClient]);
+  }, [scrollRef, applyMarqueeAtClient, isGestureSessionCurrent]);
 
   const syncMarqueeAutoScroll = useCallback(
     (clientX: number, clientY: number, shiftKey: boolean) => {
@@ -235,6 +278,8 @@ export function useTimelineRangeSelection({
   const beginRangeSelection = useCallback(
     (e: React.PointerEvent) => {
       (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      activePointerIdRef.current = e.pointerId;
+      gestureEpochRef.current = sessionEpochRef.current;
       isRangeSelecting.current = true;
       setShowPopover(false);
       const rect = scrollRef.current?.getBoundingClientRect();
@@ -248,9 +293,31 @@ export function useTimelineRangeSelection({
     [scrollRef, pps, setShowPopover, contentOrigin],
   );
 
+  const beginScrub = useCallback(
+    (clientX: number) => {
+      isDragging.current = true;
+      setIsScrubbing(true);
+      pendingClientXRef.current = clientX;
+      seekFromX(clientX);
+    },
+    [isDragging, seekFromX],
+  );
+
+  const beginMarquee = useCallback((point: { x: number; y: number }, additive: boolean) => {
+    const base = snapshotSelection();
+    marqueeRef.current = {
+      originX: point.x,
+      originY: point.y,
+      baseIds: base.ids,
+      basePrimary: base.primary,
+      additive,
+      active: false,
+    };
+  }, []);
+
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
-      if (e.button !== 0) return;
+      if (!canStartPointerGesture(e, activePointerIdRef.current, sessionEpochRef.current)) return;
       if (e.shiftKey) {
         beginRangeSelection(e);
         return;
@@ -258,6 +325,8 @@ export function useTimelineRangeSelection({
       shiftClickClipRef.current = null;
       if ((e.target as HTMLElement).closest("[data-clip]")) return;
       (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      activePointerIdRef.current = e.pointerId;
+      gestureEpochRef.current = sessionEpochRef.current;
       setRangeSelection(null);
       setShowPopover(false);
       const point = toContentPoint(e.clientX, e.clientY);
@@ -266,30 +335,15 @@ export function useTimelineRangeSelection({
       // y (which folds in scrollTop) breaks once the body is scrolled down and
       // the stuck ruler visually overlays scrolled-away track rows.
       const scrollRect = scrollRef.current?.getBoundingClientRect();
-      if (!point || !scrollRect || isTimelineRulerPress(e.clientY, scrollRect.top)) {
-        isDragging.current = true;
-        setIsScrubbing(true);
-        // Seed the pending coordinate so a press with no pointermove still
-        // replays THIS x on pointerup. `updateScrubDrag` is the only other
-        // writer, so without this a plain click settles on the ref's initial
-        // 0 and clamps the playhead back to t=0.
-        pendingClientXRef.current = e.clientX;
-        seekFromX(e.clientX);
+      if (!isMarqueePress(point, scrollRect, e.clientY)) {
+        beginScrub(e.clientX);
         return;
       }
       // Empty body press → pending marquee. A plain click (no drag past the
       // threshold) deselects on pointerup; a drag draws the marquee. Never scrubs.
-      const base = snapshotSelection();
-      marqueeRef.current = {
-        originX: point.x,
-        originY: point.y,
-        baseIds: base.ids,
-        basePrimary: base.primary,
-        additive: e.metaKey || e.ctrlKey,
-        active: false,
-      };
+      beginMarquee(point, e.metaKey || e.ctrlKey);
     },
-    [beginRangeSelection, seekFromX, scrollRef, isDragging, setShowPopover, toContentPoint],
+    [beginRangeSelection, beginScrub, beginMarquee, scrollRef, setShowPopover, toContentPoint],
   );
 
   // Scrub-drag update: live playhead feedback (liveTime) + RAF-throttled seek.
@@ -325,18 +379,27 @@ export function useTimelineRangeSelection({
     [scrollRef, pps, seekFromX, autoScrollDuringDrag, isDragging, contentOrigin],
   );
 
+  const updateRangeSelection = useCallback(
+    (e: React.PointerEvent) => {
+      const scroll = scrollRef.current;
+      const rect = scroll?.getBoundingClientRect();
+      if (!scroll || !rect) return;
+      const x = e.clientX - rect.left + scroll.scrollLeft - contentOrigin;
+      setRangeSelection((previous) =>
+        previous
+          ? { ...previous, end: Math.max(0, x / pps), anchorX: e.clientX, anchorY: e.clientY }
+          : null,
+      );
+    },
+    [contentOrigin, pps, scrollRef],
+  );
+
   const handlePointerMove = useCallback(
     (e: React.PointerEvent) => {
+      if (!isGestureSessionCurrent()) return;
+      if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current) return;
       if (isRangeSelecting.current) {
-        const rect = scrollRef.current?.getBoundingClientRect();
-        if (rect) {
-          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - contentOrigin;
-          setRangeSelection((prev) =>
-            prev
-              ? { ...prev, end: Math.max(0, x / pps), anchorX: e.clientX, anchorY: e.clientY }
-              : null,
-          );
-        }
+        updateRangeSelection(e);
         return;
       }
       const marquee = marqueeRef.current;
@@ -351,13 +414,12 @@ export function useTimelineRangeSelection({
       updateScrubDrag(e.clientX);
     },
     [
-      pps,
-      scrollRef,
       isDragging,
       applyMarqueeAtClient,
       syncMarqueeAutoScroll,
       updateScrubDrag,
-      contentOrigin,
+      updateRangeSelection,
+      isGestureSessionCurrent,
     ],
   );
 
@@ -403,17 +465,15 @@ export function useTimelineRangeSelection({
     [stopMarqueeAutoScroll, elementsRef, onSelectElement],
   );
 
-  const handlePointerUp = useCallback(() => {
-    if (isRangeSelecting.current) {
-      finishRangeSelection();
-      return;
-    }
-    const marquee = marqueeRef.current;
-    if (marquee) {
-      finishMarquee(marquee);
-      return;
-    }
-    if (!isDragging.current) return;
+  const canFinishPointerGesture = useCallback(
+    (e?: React.PointerEvent) => {
+      const pointerId = activePointerIdRef.current;
+      return pointerId !== null && (!e || e.pointerId === pointerId) && isGestureSessionCurrent();
+    },
+    [isGestureSessionCurrent],
+  );
+
+  const finishScrub = useCallback(() => {
     if (seekRafRef.current) {
       cancelAnimationFrame(seekRafRef.current);
       seekRafRef.current = 0;
@@ -422,7 +482,69 @@ export function useTimelineRangeSelection({
     isDragging.current = false;
     setIsScrubbing(false);
     cancelAnimationFrame(dragScrollRaf.current);
-  }, [isDragging, dragScrollRaf, seekFromX, finishRangeSelection, finishMarquee]);
+  }, [dragScrollRaf, isDragging, seekFromX]);
+
+  const handlePointerUp = useCallback(
+    (e?: React.PointerEvent) => {
+      if (!canFinishPointerGesture(e)) return;
+      activePointerIdRef.current = null;
+      gestureEpochRef.current = null;
+      if (isRangeSelecting.current) {
+        finishRangeSelection();
+        return;
+      }
+      const marquee = marqueeRef.current;
+      if (marquee) {
+        finishMarquee(marquee);
+        return;
+      }
+      if (isDragging.current) finishScrub();
+    },
+    [canFinishPointerGesture, finishRangeSelection, finishMarquee, finishScrub, isDragging],
+  );
+
+  const cancelActiveGesture = useCallback(
+    (updateUi: boolean, restoreSelection: boolean) => {
+      activePointerIdRef.current = null;
+      gestureEpochRef.current = null;
+      isRangeSelecting.current = false;
+      isDragging.current = false;
+      stopMarqueeAutoScroll();
+      if (seekRafRef.current) {
+        cancelAnimationFrame(seekRafRef.current);
+        seekRafRef.current = 0;
+      }
+      cancelAnimationFrame(dragScrollRaf.current);
+      dragScrollRaf.current = 0;
+
+      const marquee = marqueeRef.current;
+      marqueeRef.current = null;
+      if (restoreSelection && marquee?.active) {
+        const store = usePlayerStore.getState();
+        store.setSelectedElementId(marquee.basePrimary);
+        store.setSelectedElementIds(marquee.baseIds);
+      }
+      if (updateUi) {
+        setMarqueeRect(null);
+        setRangeSelection(null);
+        setIsScrubbing(false);
+      }
+    },
+    [dragScrollRaf, isDragging, stopMarqueeAutoScroll],
+  );
+
+  const handlePointerCancel = useCallback(
+    (e?: React.PointerEvent) => {
+      if (
+        activePointerIdRef.current === null ||
+        (e && activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current)
+      ) {
+        return;
+      }
+      cancelActiveGesture(true, isGestureSessionCurrent());
+    },
+    [cancelActiveGesture, isGestureSessionCurrent],
+  );
 
   // Escape: cancel an in-flight marquee (restores the pre-drag selection);
   // otherwise clear any lingering multi-selection.
@@ -432,15 +554,11 @@ export function useTimelineRangeSelection({
       const store = usePlayerStore.getState();
       const marquee = marqueeRef.current;
       if (marquee) {
-        marqueeRef.current = null;
-        stopMarqueeAutoScroll();
-        setMarqueeRect(null);
-        if (marquee.active) {
-          // Primary FIRST (see commitMarqueeSelection): it collapses the set, so
-          // restore the pre-drag primary before repopulating the base ids.
-          store.setSelectedElementId(marquee.basePrimary);
-          store.setSelectedElementIds(marquee.baseIds);
-        }
+        cancelActiveGesture(true, true);
+        return;
+      }
+      if (isRangeSelecting.current || isDragging.current) {
+        cancelActiveGesture(true, true);
         return;
       }
       // Escape with no marquee clears the whole selection — primary AND set.
@@ -451,7 +569,21 @@ export function useTimelineRangeSelection({
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [stopMarqueeAutoScroll]);
+  }, [cancelActiveGesture, isDragging]);
+
+  const previousSessionEpochRef = useRef(sessionEpoch);
+  useEffect(() => {
+    if (previousSessionEpochRef.current === sessionEpoch) return;
+    previousSessionEpochRef.current = sessionEpoch;
+    cancelActiveGesture(true, false);
+  }, [cancelActiveGesture, sessionEpoch]);
+
+  useEffect(
+    () => () => {
+      cancelActiveGesture(false, isGestureSessionCurrent());
+    },
+    [cancelActiveGesture, isGestureSessionCurrent],
+  );
 
   return {
     rangeSelection,
@@ -462,5 +594,6 @@ export function useTimelineRangeSelection({
     handlePointerDown,
     handlePointerMove,
     handlePointerUp,
+    handlePointerCancel,
   };
 }

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

@@ -9,6 +9,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
 import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
 import { getTimelineRowGeometry } from "./timelineLayout";
+import { createTimelineClipIndex } from "../lib/timelineClipIndex";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -60,7 +61,6 @@ function setup(): { handlers: () => Handlers; seekFromX: ReturnType<typeof vi.fn
   const dragScrollRaf = { current: 0 };
   const isDragging = { current: false };
   const elementsRef = { current: [] };
-  const trackOrderRef = { current: [] };
   const rowGeometryRef = { current: getTimelineRowGeometry([]) };
 
   function Probe(): null {
@@ -75,7 +75,8 @@ function setup(): { handlers: () => Handlers; seekFromX: ReturnType<typeof vi.fn
       isDragging,
       setShowPopover: vi.fn(),
       elementsRef,
-      trackOrderRef,
+      clipIndex: createTimelineClipIndex([]),
+      sessionEpoch: 0,
       rowGeometryRef,
       contentOrigin: 0,
     });

package/src/player/components/useTimelineRowVirtualization.ts

@@ -24,7 +24,7 @@ interface UseTimelineRowVirtualizationInput {
   selectedElementId: string | null;
   revealElementId: string | null;
   draggedRowKey?: number;
-  resizingRowKey?: number;
+  resizingElementIds?: readonly string[];
   clipContextMenuRowKey?: number;
   keyframeContextMenuRowKey?: number;
   lastScrollLeftRef: RefObject<number>;
@@ -55,7 +55,7 @@ export function useTimelineRowVirtualization({
   selectedElementId,
   revealElementId,
   draggedRowKey,
-  resizingRowKey,
+  resizingElementIds,
   clipContextMenuRowKey,
   keyframeContextMenuRowKey,
   lastScrollLeftRef,
@@ -77,11 +77,18 @@ export function useTimelineRowVirtualization({
     () => resolveTimelineFocusIdentity(elements, revealElementId),
     [elements, revealElementId],
   );
+  const resizingRowKeys = useMemo(
+    () =>
+      resizingElementIds
+        ?.map((elementId) => resolveTimelineFocusIdentity(elements, elementId)?.rowKey)
+        .filter((rowKey): rowKey is number => rowKey !== undefined) ?? [],
+    [elements, resizingElementIds],
+  );
   const pinnedRowKeys = useMemo(
     () =>
       [
         draggedRowKey,
-        resizingRowKey,
+        ...resizingRowKeys,
         revealIdentity?.rowKey,
         clipContextMenuRowKey,
         keyframeContextMenuRowKey,
@@ -90,7 +97,7 @@ export function useTimelineRowVirtualization({
       clipContextMenuRowKey,
       draggedRowKey,
       keyframeContextMenuRowKey,
-      resizingRowKey,
+      resizingRowKeys,
       revealIdentity,
     ],
   );

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

@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useTrackGapMenu } from "./useTrackGapMenu";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const lane: TimelineElement[] = [
+  { id: "first", tag: "div", start: 0, duration: 1, track: 0 },
+  { id: "second", tag: "div", start: 3, duration: 1, track: 0 },
+];
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+  document.body.innerHTML = "";
+});
+
+describe("useTrackGapMenu", () => {
+  it("does not commit an anchor captured in a previous project session", () => {
+    usePlayerStore.setState({ elements: lane, timelineSessionEpoch: 1 });
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const onMoveElement = vi.fn();
+    const onMoveElements = vi.fn();
+    let api: ReturnType<typeof useTrackGapMenu> | null = null;
+
+    function getApi(): ReturnType<typeof useTrackGapMenu> {
+      if (!api) throw new Error("gap menu harness did not render");
+      return api;
+    }
+
+    function Probe() {
+      api = useTrackGapMenu({
+        tracks: [[0, lane]],
+        expandedElementsRef: { current: lane },
+        trackOrderRef: { current: [0] },
+        onMoveElement,
+        onMoveElements,
+      });
+      return null;
+    }
+
+    act(() => root.render(<Probe />));
+    act(() => getApi().openGapMenu({ x: 10, y: 20, track: 0, time: 2 }));
+    expect(getApi().gapMenuModel).not.toBeNull();
+    const staleCloseTrackGap = getApi().closeTrackGap;
+    const staleCloseAllTrackGaps = getApi().closeAllTrackGaps;
+
+    act(() => {
+      usePlayerStore.setState({ timelineSessionEpoch: 2 });
+      staleCloseTrackGap();
+      staleCloseAllTrackGaps();
+    });
+    expect(getApi().gapMenuModel).toBeNull();
+
+    expect(onMoveElement).not.toHaveBeenCalled();
+    expect(onMoveElements).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});

package/src/player/components/useTrackGapMenu.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, type MutableRefObject } from "react";
+import { useCallback, useEffect, useMemo, useState, type MutableRefObject } from "react";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { DragCommitDeps } from "./timelineClipDragCommit";
 import {
@@ -21,6 +21,7 @@ interface TrackGapMenuAnchor {
   y: number;
   track: number;
   time: number;
+  sessionEpoch: number;
 }
 
 /** Gap strips to paint on one lane while a menu row is hovered. */
@@ -32,9 +33,9 @@ export interface TrackGapHighlight {
 /**
  * Track-gap context menu (right-click on empty lane space) — state, the
  * derived menu model, and the two commit actions. Extracted from Timeline.tsx
- * as a cohesive unit (600-line studio cap); behavior identical.
+ * as a cohesive unit (600-line studio cap).
  *
- * Only the ANCHOR (and the hovered row) is state; the menu model (gap under
+ * Only the session-stamped ANCHOR (and the hovered row) is state; the menu model (gap under
  * the pointer, compaction, movability) derives from live `tracks` so an open
  * menu reflects concurrent edits. `gapHighlight` — the strips TimelineCanvas
  * paints while "Close gap" / "Close all gaps" is hovered — derives the same
@@ -55,12 +56,16 @@ export function useTrackGapMenu({
   onMoveElements: DragCommitDeps["onMoveElements"];
 }) {
   const updateElement = usePlayerStore((s) => s.updateElement);
+  const sessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
   const [gapContextMenu, setGapContextMenu] = useState<TrackGapMenuAnchor | null>(null);
   const [hoveredGapAction, setHoveredGapAction] = useState<"close-gap" | "close-all" | null>(null);
 
   const gapMenuLaneElements = useMemo(
-    () => (gapContextMenu ? (tracks.find(([t]) => t === gapContextMenu.track)?.[1] ?? []) : null),
-    [gapContextMenu, tracks],
+    () =>
+      gapContextMenu?.sessionEpoch === sessionEpoch
+        ? (tracks.find(([t]) => t === gapContextMenu.track)?.[1] ?? [])
+        : null,
+    [gapContextMenu, sessionEpoch, tracks],
   );
   const gapMenuModel = useMemo(() => {
     if (!gapContextMenu || !gapMenuLaneElements) return null;
@@ -99,7 +104,12 @@ export function useTrackGapMenu({
   }, [gapContextMenu, gapMenuLaneElements, hoveredGapAction]);
 
   const closeTrackGap = useCallback(() => {
-    if (!gapContextMenu || !gapMenuLaneElements) return;
+    if (
+      !gapContextMenu ||
+      !gapMenuLaneElements ||
+      gapContextMenu.sessionEpoch !== usePlayerStore.getState().timelineSessionEpoch
+    )
+      return;
     commitCloseTrackGap(gapMenuLaneElements, gapContextMenu.time, {
       elements: expandedElementsRef.current,
       trackOrder: trackOrderRef.current,
@@ -117,7 +127,12 @@ export function useTrackGapMenu({
     onMoveElements,
   ]);
   const closeAllTrackGaps = useCallback(() => {
-    if (!gapMenuLaneElements) return;
+    if (
+      !gapContextMenu ||
+      !gapMenuLaneElements ||
+      gapContextMenu.sessionEpoch !== usePlayerStore.getState().timelineSessionEpoch
+    )
+      return;
     commitCloseAllTrackGaps(gapMenuLaneElements, {
       elements: expandedElementsRef.current,
       trackOrder: trackOrderRef.current,
@@ -126,6 +141,7 @@ export function useTrackGapMenu({
       onMoveElements,
     });
   }, [
+    gapContextMenu,
     gapMenuLaneElements,
     expandedElementsRef,
     trackOrderRef,
@@ -134,15 +150,22 @@ export function useTrackGapMenu({
     onMoveElements,
   ]);
 
-  const openGapMenu = useCallback((anchor: TrackGapMenuAnchor) => {
+  const openGapMenu = useCallback((anchor: Omit<TrackGapMenuAnchor, "sessionEpoch">) => {
     setHoveredGapAction(null);
-    setGapContextMenu(anchor);
+    setGapContextMenu({
+      ...anchor,
+      sessionEpoch: usePlayerStore.getState().timelineSessionEpoch,
+    });
   }, []);
   const dismissGapMenu = useCallback(() => {
     setHoveredGapAction(null);
     setGapContextMenu(null);
   }, []);
 
+  useEffect(() => {
+    if (gapContextMenu && gapContextMenu.sessionEpoch !== sessionEpoch) dismissGapMenu();
+  }, [dismissGapMenu, gapContextMenu, sessionEpoch]);
+
   return {
     gapMenuModel,
     gapHighlight,