fix(studio): scope timeline ease focus lifecycle (#2710)

packages/studio/src/player/components/BeatStrip.test.tsx

@@ -51,8 +51,7 @@ function mountBeatStrip(renderTimeRange?: { start: number; end: number }) {
     scrollWidth: { configurable: true, value: 2_000 },
     scrollHeight: { configurable: true, value: 2_000 },
   });
-  viewport.getBoundingClientRect = () =>
-    ({ left: 0, right: 1_000, top: 0, bottom: 500, width: 1_000, height: 500 }) as DOMRect;
+  viewport.getBoundingClientRect = () => new DOMRect(0, 0, 1_000, 500);
   Object.assign(viewport, {
     setPointerCapture: vi.fn(),
     hasPointerCapture: vi.fn(() => true),
@@ -275,6 +274,74 @@ describe("BeatStrip gesture ownership", () => {
     expect(commitBeatEditsSpy).toHaveBeenCalledOnce();
   });
 
+  it("keeps the dragged beat pinned by time when another beat is inserted before it", () => {
+    const { root } = mountBeatStrip();
+    startBeatDrag();
+    act(() => {
+      window.dispatchEvent(
+        pointerEvent("pointermove", {
+          bubbles: true,
+          clientX: 140,
+          clientY: 100,
+          pointerId: 1,
+        }),
+      );
+      usePlayerStore.setState({
+        beatAnalysis: {
+          ...BEAT_ANALYSIS,
+          beatTimes: [0.5, 1, 3],
+          beatStrengths: [0.3, 0.5, 0.8],
+        },
+      });
+      root.render(<BeatStrip beatTimes={[0.5, 1, 3]} beatStrengths={[0.3, 0.5, 0.8]} pps={100} />);
+    });
+
+    const lefts = Array.from(
+      document.querySelectorAll<HTMLDivElement>('[title="Drag to move · double-click to delete"]'),
+      (beat) => beat.style.left,
+    );
+    expect(lefts).toContain("134px");
+
+    releaseBeatDrag(140);
+    expectCommittedBeatAt(1.4);
+  });
+
+  it("keeps the first pointer in control when a second touch starts", () => {
+    mountBeatStrip();
+    startBeatDrag();
+    const beats = document.querySelectorAll<HTMLDivElement>(
+      '[title="Drag to move · double-click to delete"]',
+    );
+    act(() => {
+      beats[1]?.dispatchEvent(
+        pointerEvent("pointerdown", {
+          bubbles: true,
+          button: 0,
+          clientX: 300,
+          clientY: 100,
+          pointerId: 2,
+        }),
+      );
+    });
+
+    releaseBeatDrag(140, 1);
+    expectCommittedBeatAt(1.4);
+  });
+
+  it("lets Escape bubble before cancelling the active drag", () => {
+    mountBeatStrip();
+    startBeatDrag();
+    const sawEscape = vi.fn();
+    document.addEventListener("keydown", sawEscape, { once: true });
+
+    act(() => {
+      firstBeat().dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    });
+
+    expect(sawEscape).toHaveBeenCalledOnce();
+    expectCancelledBeatDrag();
+  });
+
   it("does not autoscroll or mutate below the drag threshold", () => {
     const requestAnimationFrame = vi.fn(() => 1);
     vi.stubGlobal("requestAnimationFrame", requestAnimationFrame);

packages/studio/src/player/components/BeatStrip.tsx

@@ -18,7 +18,6 @@ const BEAT_HIT_W = 12; // grab width per beat (px)
 
 interface BeatDragActor {
   readonly pointerId: number;
-  readonly index: number;
   readonly startX: number;
   readonly clientX: number;
   readonly clientY: number;
@@ -68,7 +67,7 @@ function releaseBeatDragResources(actor: BeatDragActor): void {
   window.removeEventListener("pointerup", handleBeatDragPointerUp);
   window.removeEventListener("pointercancel", handleBeatDragPointerCancel);
   window.removeEventListener("lostpointercapture", handleBeatDragPointerCancel);
-  window.removeEventListener("keydown", handleBeatDragKeyDown, true);
+  window.removeEventListener("keydown", handleBeatDragKeyDown);
   window.removeEventListener("blur", cancelBeatDrag);
   try {
     if (actor.scroll.hasPointerCapture?.(actor.pointerId)) {
@@ -186,7 +185,6 @@ function handleBeatDragPointerCancel(event: PointerEvent): void {
 function handleBeatDragKeyDown(event: KeyboardEvent): void {
   if (event.key !== "Escape" || !beatDragActor) return;
   event.preventDefault();
-  event.stopPropagation();
   cancelBeatDrag();
 }
 
@@ -200,7 +198,6 @@ function resolveBeatDragViewport(
 
 function createBeatDragActor(
   event: React.PointerEvent<HTMLDivElement>,
-  index: number,
   originalTime: number,
   pixelsPerSecond: number,
   scroll: HTMLElement,
@@ -210,7 +207,6 @@ function createBeatDragActor(
   if (!musicElement?.src) return null;
   const actor: BeatDragActor = {
     pointerId: event.pointerId,
-    index,
     startX: event.clientX,
     clientX: event.clientX,
     clientY: event.clientY,
@@ -235,15 +231,31 @@ function activateBeatDrag(actor: BeatDragActor): void {
   window.addEventListener("pointerup", handleBeatDragPointerUp);
   window.addEventListener("pointercancel", handleBeatDragPointerCancel);
   window.addEventListener("lostpointercapture", handleBeatDragPointerCancel);
-  window.addEventListener("keydown", handleBeatDragKeyDown, true);
+  window.addEventListener("keydown", handleBeatDragKeyDown);
   window.addEventListener("blur", cancelBeatDrag);
-  unsubscribeBeatDragSession = usePlayerStore.subscribe((state) => {
+  unsubscribeBeatDragSession = usePlayerStore.subscribe((state, previous) => {
+    // Unlike gestures that can validate only at pointerup, beat drag must stop
+    // immediately when its music source disappears or changes mid-stream. This
+    // subscription owns that interruption; the identity guard keeps requestSeek's
+    // per-frame store writes allocation-free unless a source input changed.
+    if (
+      state.timelineSessionEpoch === previous.timelineSessionEpoch &&
+      state.timelineProjectId === previous.timelineProjectId &&
+      state.elements === previous.elements &&
+      state.beatAnalysis === previous.beatAnalysis &&
+      state.beatEdits === previous.beatEdits
+    ) {
+      return;
+    }
     if (!isBeatDragSourceCurrent(actor, state)) cancelBeatDrag();
   });
-  beatDragViewportObserver = new MutationObserver(() => {
-    if (!actor.scroll.isConnected) cancelBeatDrag();
-  });
-  beatDragViewportObserver.observe(document, { childList: true, subtree: true });
+  const viewportParent = actor.scroll.parentNode;
+  if (viewportParent) {
+    beatDragViewportObserver = new MutationObserver(() => {
+      if (!actor.scroll.isConnected) cancelBeatDrag();
+    });
+    beatDragViewportObserver.observe(viewportParent, { childList: true });
+  }
   try {
     actor.scroll.setPointerCapture?.(actor.pointerId);
   } catch {
@@ -256,14 +268,15 @@ function activateBeatDrag(actor: BeatDragActor): void {
 
 function beginBeatDrag(
   event: React.PointerEvent<HTMLDivElement>,
-  index: number,
   originalTime: number,
   pixelsPerSecond: number,
 ): void {
+  // One pointer owns the actor until a terminal event claims it. A second touch
+  // must not silently discard the first gesture and make its release a no-op.
+  if (beatDragActor) return;
   const scroll = resolveBeatDragViewport(event, pixelsPerSecond);
   if (!scroll) return;
-  cancelBeatDrag();
-  const actor = createBeatDragActor(event, index, originalTime, pixelsPerSecond, scroll);
+  const actor = createBeatDragActor(event, originalTime, pixelsPerSecond, scroll);
   if (actor) activateBeatDrag(actor);
 }
 
@@ -365,11 +378,14 @@ export const BeatStrip = memo(function BeatStrip({
   const projectId = usePlayerStore((state) => state.timelineProjectId);
 
   if (!beatTimes || beatsTooDense(beatTimes, pps)) return null;
+  const activeBeatIndex = activeActor
+    ? beatTimes.findIndex((time) => Math.abs(time - activeActor.originalTime) < 1e-3)
+    : -1;
   const drag =
     activeActor &&
     activeActor.sessionEpoch === sessionEpoch &&
     activeActor.projectId === projectId &&
-    Math.abs((beatTimes[activeActor.index] ?? Number.NaN) - activeActor.originalTime) < 1e-3
+    activeBeatIndex >= 0
       ? activeActor
       : null;
   const cy = BEAT_BAND_H / 2;
@@ -377,7 +393,7 @@ export const BeatStrip = memo(function BeatStrip({
     beatTimes,
     beatStrengths,
     renderTimeRange,
-    drag ? new Set([drag.index]) : undefined,
+    drag ? new Set([activeBeatIndex]) : undefined,
   );
 
   return (
@@ -390,7 +406,7 @@ export const BeatStrip = memo(function BeatStrip({
         const strength = Math.pow(Math.min(1, beatStrength ?? 0.5), 2.2);
         const r = 1.5 + strength * 2.5;
         const opacity = 0.25 + strength * 0.75;
-        const dxPx = drag?.index === i ? drag.dx : 0;
+        const dxPx = drag && activeBeatIndex === i ? drag.dx : 0;
         const x = t * pps + dxPx;
         return (
           <div
@@ -412,7 +428,7 @@ export const BeatStrip = memo(function BeatStrip({
               // selection (which otherwise "selects" the whole panel mid-drag).
               e.preventDefault();
               e.stopPropagation();
-              beginBeatDrag(e, i, t, pps);
+              beginBeatDrag(e, t, pps);
             }}
             onDoubleClick={(e) => {
               e.stopPropagation();

packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,4 +1,3 @@
-import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import type { TimelineElement } from "../store/playerStore";
@@ -30,7 +29,7 @@ interface KeyframeDiamondContextMenuProps {
   onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
 }
 
-export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
+export function KeyframeDiamondContextMenu({
   state,
   onClose,
   onDelete,
@@ -104,4 +103,4 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
     </div>,
     document.body,
   );
-});
+}

packages/studio/src/player/components/Timeline.test.ts

@@ -305,7 +305,6 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
-  // fallow-ignore-next-line code-duplication
   it("renders the gutter without legacy icons or hue dots", () => {
     const { host, root } = renderBasicTimeline();
 
@@ -404,8 +403,8 @@ describe("Timeline provider boundary", () => {
       );
     });
 
-    const viewport = host.querySelector('[aria-label="Timeline"]')?.firstElementChild;
-    expect(viewport).toBeInstanceOf(HTMLElement);
+    const viewport = host.querySelector<HTMLElement>("[data-timeline-scroll-viewport]");
+    expect(viewport).not.toBeNull();
     act(() => {
       viewport?.dispatchEvent(
         new MouseEvent("pointerdown", {

packages/studio/src/player/components/TimelineOverlays.test.ts

@@ -1,6 +1,21 @@
-import { describe, expect, it } from "vitest";
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
-import { resolveTimelineContextElement } from "./TimelineOverlays";
+import { usePlayerStore } from "../store/playerStore";
+import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
+import { TimelineOverlays, resolveTimelineContextElement } from "./TimelineOverlays";
+import { defaultTimelineTheme } from "./timelineTheme";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const roots: Root[] = [];
+afterEach(() => {
+  for (const root of roots.splice(0)) act(() => root.unmount());
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ selectedElementId: null, timelineSessionEpoch: 0 });
+});
 
 const captured: TimelineElement = {
   id: "child",
@@ -52,3 +67,95 @@ describe("resolveTimelineContextElement", () => {
     expect(resolveTimelineContextElement({ ...input, elements: [] })).toBeNull();
   });
 });
+
+function renderKeyframeOverlay(options: {
+  capturedElement: TimelineElement;
+  currentElement: TimelineElement;
+  setKfContextMenu?: ReturnType<typeof vi.fn>;
+  onDeleteAllKeyframes?: ReturnType<typeof vi.fn>;
+}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  roots.push(root);
+  const elements = [options.currentElement];
+  const setKfContextMenu = options.setKfContextMenu ?? vi.fn();
+  const onDeleteAllKeyframes = options.onDeleteAllKeyframes ?? vi.fn();
+  const menu: KeyframeDiamondContextMenuState = {
+    x: 10,
+    y: 10,
+    sessionEpoch: 2,
+    element: options.capturedElement,
+    elementId: options.capturedElement.key ?? options.capturedElement.id,
+    percentage: 50,
+    animationId: "child-position",
+  };
+
+  act(() => {
+    usePlayerStore.setState({
+      selectedElementId: options.capturedElement.key ?? options.capturedElement.id,
+      timelineSessionEpoch: 2,
+    });
+    root.render(
+      createElement(TimelineOverlays, {
+        elements,
+        elementsRef: { current: elements },
+        theme: defaultTimelineTheme,
+        showShortcutHint: false,
+        showPopover: false,
+        rangeSelection: null,
+        setShowPopover: vi.fn(),
+        setRangeSelection: vi.fn(),
+        kfContextMenu: menu,
+        setKfContextMenu,
+        onDeleteKeyframe: vi.fn(),
+        onDeleteAllKeyframes,
+        onMoveKeyframeToPlayhead: vi.fn(),
+        clipContextMenu: null,
+        setClipContextMenu: vi.fn(),
+        currentTime: 0,
+        onSplitElement: vi.fn(),
+        pinZoomBeforeEdit: vi.fn(),
+        onDeleteElement: vi.fn(),
+        gapContextMenu: null,
+        onDismissGapContextMenu: vi.fn(),
+        onCloseTrackGap: vi.fn(),
+        onCloseAllTrackGaps: vi.fn(),
+        onHoverGapAction: vi.fn(),
+      }),
+    );
+  });
+  return { setKfContextMenu, onDeleteAllKeyframes };
+}
+
+describe("TimelineOverlays context lifecycle", () => {
+  it("dismisses a keyframe menu when its selected target becomes stale", () => {
+    const setKfContextMenu = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: captured,
+      setKfContextMenu,
+    });
+
+    act(() => usePlayerStore.setState({ selectedElementId: "other" }));
+
+    expect(setKfContextMenu).toHaveBeenCalledExactlyOnceWith(null);
+  });
+
+  it("dispatches a menu action with the current model element", () => {
+    const current = { ...captured, start: 4, track: 7 };
+    const onDeleteAllKeyframes = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: current,
+      onDeleteAllKeyframes,
+    });
+    const button = Array.from(document.body.querySelectorAll("button")).find(
+      (candidate) => candidate.textContent === "Delete All Keyframes",
+    );
+
+    act(() => button?.click());
+
+    expect(onDeleteAllKeyframes).toHaveBeenCalledExactlyOnceWith(current, "child-position");
+  });
+});

packages/studio/src/player/components/timelineCallbacks.ts

@@ -74,7 +74,6 @@ export interface TimelineEditCallbacks {
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   onDeleteKeyframe?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
   onDeleteAllKeyframes?: (element: TimelineElement, animationId?: string) => void;
-  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
   onMoveKeyframeToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
   /** Drag-to-retime: `keyframe` identifies the dragged keyframe (its percentage
    *  is clip-relative), `toClipPercentage` is the neighbour-clamped drop. */

packages/studio/src/player/components/timelineClipDragGestureLifecycle.ts

@@ -388,7 +388,6 @@ export function mountTimelineClipDragGestureLifecycle({
     });
     if (!decision.cancel) return;
     event.preventDefault();
-    event.stopPropagation();
     blockedClipRef.current = null;
     cancelGesture({ suppressClick: decision.suppressClick });
   };
@@ -397,7 +396,7 @@ export function mountTimelineClipDragGestureLifecycle({
   window.addEventListener("pointerup", handleWindowPointerUp);
   window.addEventListener("pointercancel", handleWindowPointerCancel);
   window.addEventListener("lostpointercapture", handleLostPointerCapture);
-  window.addEventListener("keydown", handleWindowKeyDown, true);
+  window.addEventListener("keydown", handleWindowKeyDown);
   return () => {
     cancelGesture({ updateReact: false });
     cancelGestureRef.current = () => false;
@@ -405,6 +404,6 @@ export function mountTimelineClipDragGestureLifecycle({
     window.removeEventListener("pointerup", handleWindowPointerUp);
     window.removeEventListener("pointercancel", handleWindowPointerCancel);
     window.removeEventListener("lostpointercapture", handleLostPointerCapture);
-    window.removeEventListener("keydown", handleWindowKeyDown, true);
+    window.removeEventListener("keydown", handleWindowKeyDown);
   };
 }

packages/studio/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -169,7 +169,7 @@ function renderResizeHarness(
     },
     pressEscape() {
       act(() => {
-        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+        scroll.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
       });
     },
     unmount() {
@@ -430,8 +430,11 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
   it("Escape discards the projection and persists nothing", () => {
     const { h } = startGroupResize();
     expect(h.getResizeProjection()).toHaveLength(2);
+    const sawEscape = vi.fn();
+    document.addEventListener("keydown", sawEscape, { once: true });
 
     h.pressEscape();
+    expect(sawEscape).toHaveBeenCalledOnce();
     expect(h.getResizeProjection()).toHaveLength(0);
     expect(h.storeById("b").duration).toBe(3);
     expect(h.onResizeElement).not.toHaveBeenCalled();

packages/studio/src/player/components/useTimelineKeyframeHandlers.test.tsx

@@ -91,7 +91,7 @@ describe("useTimelineKeyframeHandlers", () => {
     const { root, handlers } = mountHandlers();
     act(() => handlers.onSelectSegment?.(ELEMENT.id, COLLIDING_TARGET));
 
-    expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
+    expect(usePlayerStore.getState().focusedEaseSegment).toMatchObject({
       animationId: "position-tween",
       collidingAnimationTargets: [
         { animationId: "position-tween", tweenPercentage: 100 },
@@ -112,7 +112,7 @@ describe("useTimelineKeyframeHandlers", () => {
     // Selecting a segment must NOT move the playhead.
     act(() => handlers.onSelectSegment?.(ELEMENT.id, FLAT_TWEEN_TARGET));
     expect(onSeek).not.toHaveBeenCalled();
-    expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
+    expect(usePlayerStore.getState().focusedEaseSegment).toMatchObject({
       animationId: "position-tween",
       tweenPercentage: 100,
       elementId: ELEMENT.id,

packages/studio/src/player/store/keyframeSlice.ts

@@ -22,6 +22,34 @@ export interface KeyframeCacheEntry {
   easeEach?: string;
 }
 
+export interface FocusedEaseSegment {
+  animationId: string;
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
+  tweenPercentage: number;
+  elementId: string;
+  projectId: string | null;
+  sessionEpoch: number;
+  nonce: number;
+}
+
+type FocusedEaseSegmentTarget = Omit<FocusedEaseSegment, "projectId" | "sessionEpoch" | "nonce">;
+
+interface TimelineSessionIdentity {
+  timelineProjectId: string | null;
+  timelineSessionEpoch: number;
+}
+
+export function isFocusedEaseRequestCurrent(
+  request: FocusedEaseSegment,
+  state: TimelineSessionIdentity & { selectedElementId: string | null },
+): boolean {
+  return (
+    request.projectId === state.timelineProjectId &&
+    request.sessionEpoch === state.timelineSessionEpoch &&
+    request.elementId === state.selectedElementId
+  );
+}
+
 export interface KeyframeSlice {
   /** Selected collapsed (`element:pct`) or expanded (`element:group:animation:clipPct`) diamonds. */
   selectedKeyframes: Set<string>;
@@ -35,22 +63,14 @@ export interface KeyframeSlice {
   /** Union-expand clips (keyframed clips are expanded by default on load). */
   expandClips: (ids: readonly string[]) => void;
 
-  /** elementId scopes the request to one element so a shared (class-selector)
-   * animation id can't open the ease editor on the wrong element. */
-  focusedEaseSegment: {
-    animationId: string;
-    collidingAnimationTargets?: AnimationKeyframeTarget[];
-    tweenPercentage: number;
-    elementId: string;
-  } | null;
-  setFocusedEaseSegment: (
-    target: {
-      animationId: string;
-      collidingAnimationTargets?: AnimationKeyframeTarget[];
-      tweenPercentage: number;
-      elementId: string;
-    } | null,
-  ) => void;
+  /**
+   * Project/session/element-scoped request. Its nonce is monotonic across store
+   * resets so a stale consumer can never collide with a later request.
+   */
+  focusedEaseSegment: FocusedEaseSegment | null;
+  focusedEaseRequestNonce: number;
+  setFocusedEaseSegment: (target: FocusedEaseSegmentTarget) => void;
+  clearFocusedEaseSegment: (nonce: number) => void;
 
   /** Keyframe data per element id, populated from parsed GSAP animations. */
   keyframeCache: Map<string, KeyframeCacheEntry>;
@@ -60,7 +80,10 @@ export interface KeyframeSlice {
   setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
 }
 
-export function createKeyframeSlice(set: StoreApi<KeyframeSlice>["setState"]): KeyframeSlice {
+export function createKeyframeSlice(
+  set: StoreApi<KeyframeSlice>["setState"],
+  getTimelineSessionIdentity: () => TimelineSessionIdentity,
+): KeyframeSlice {
   return {
     selectedKeyframes: new Set(),
     toggleSelectedKeyframe: (key) =>
@@ -97,7 +120,25 @@ export function createKeyframeSlice(set: StoreApi<KeyframeSlice>["setState"]): K
       }),
 
     focusedEaseSegment: null,
-    setFocusedEaseSegment: (target) => set({ focusedEaseSegment: target }),
+    focusedEaseRequestNonce: 0,
+    setFocusedEaseSegment: (target) =>
+      set((state) => {
+        const nonce = state.focusedEaseRequestNonce + 1;
+        const { timelineProjectId, timelineSessionEpoch } = getTimelineSessionIdentity();
+        return {
+          focusedEaseRequestNonce: nonce,
+          focusedEaseSegment: {
+            ...target,
+            projectId: timelineProjectId,
+            sessionEpoch: timelineSessionEpoch,
+            nonce,
+          },
+        };
+      }),
+    clearFocusedEaseSegment: (nonce) =>
+      set((state) =>
+        state.focusedEaseSegment?.nonce === nonce ? { focusedEaseSegment: null } : state,
+      ),
 
     keyframeCache: new Map(),
     setKeyframeCache: (elementId, data) =>

packages/studio/src/player/store/playerStore.test.ts

@@ -53,6 +53,82 @@ describe("usePlayerStore", () => {
     });
   });
 
+  describe("focused ease requests", () => {
+    it("stamps the current project session and only lets its nonce clear it", () => {
+      const store = usePlayerStore.getState();
+      store.beginTimelineSession("project-a");
+      store.setSelectedElementId("index.html#hero");
+      store.setFocusedEaseSegment({
+        elementId: "index.html#hero",
+        animationId: "animation-a",
+        tweenPercentage: 50,
+      });
+      const first = usePlayerStore.getState().focusedEaseSegment;
+      if (!first) throw new Error("expected focused ease request");
+      expect(first.projectId).toBe("project-a");
+      expect(first.sessionEpoch).toBeGreaterThan(0);
+      expect(first.nonce).toBeGreaterThan(0);
+
+      store.setFocusedEaseSegment({
+        elementId: "index.html#hero",
+        animationId: "animation-a",
+        tweenPercentage: 75,
+      });
+      const second = usePlayerStore.getState().focusedEaseSegment;
+      if (!second) throw new Error("expected replacement request");
+      expect(second.nonce).toBe(first.nonce + 1);
+
+      store.clearFocusedEaseSegment(first.nonce);
+      expect(usePlayerStore.getState().focusedEaseSegment).toBe(second);
+      store.clearFocusedEaseSegment(second.nonce);
+      expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+    });
+
+    it("clears a pending request when the project session changes", () => {
+      const store = usePlayerStore.getState();
+      store.beginTimelineSession("project-a");
+      store.setFocusedEaseSegment({
+        elementId: "index.html#hero",
+        animationId: "animation-a",
+        tweenPercentage: 50,
+      });
+
+      store.beginTimelineSession("project-b");
+      expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+    });
+
+    it("does not revive an old request after selecting away and back", () => {
+      const store = usePlayerStore.getState();
+      store.setSelectedElementId("index.html#a");
+      store.setFocusedEaseSegment({
+        elementId: "index.html#a",
+        animationId: "animation-a",
+        tweenPercentage: 50,
+      });
+
+      store.setSelectedElementId("index.html#b");
+      expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+      store.setSelectedElementId("index.html#a");
+      expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+    });
+
+    it("invalidates on a genuine selection-anchor change but not a same-anchor echo", () => {
+      const store = usePlayerStore.getState();
+      store.setSelection(new Set(["index.html#a", "index.html#b"]), "index.html#a");
+      store.setFocusedEaseSegment({
+        elementId: "index.html#a",
+        animationId: "animation-a",
+        tweenPercentage: 50,
+      });
+      const request = usePlayerStore.getState().focusedEaseSegment;
+
+      store.setSelectionAnchor("index.html#a");
+      expect(usePlayerStore.getState().focusedEaseSegment).toBe(request);
+      store.setSelectionAnchor("index.html#b");
+      expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+    });
+  });
+
   describe("setIsPlaying", () => {
     it("sets isPlaying to true", () => {
       usePlayerStore.getState().setIsPlaying(true);

packages/studio/src/player/store/playerStore.ts

@@ -352,7 +352,10 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   activeTool: "select",
   setActiveTool: (tool) => set({ activeTool: tool }),
 
-  ...createKeyframeSlice(set),
+  ...createKeyframeSlice(set, () => ({
+    timelineProjectId: get().timelineProjectId,
+    timelineSessionEpoch: get().timelineSessionEpoch,
+  })),
 
   activeKeyframePct: null,
   setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
@@ -541,6 +544,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
             selectedElementIds,
             activeKeyframePct: null,
             motionPathArmed: false,
+            focusedEaseSegment: null,
           }
         : { selectedElementId: id, selectedElementIds };
     }),
@@ -550,9 +554,16 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setSelectionAnchor: (id) =>
     set((s) => {
       if (id != null && s.selectedElementIds.size > 1 && s.selectedElementIds.has(id)) {
-        return { selectedElementId: id };
+        return {
+          selectedElementId: id,
+          focusedEaseSegment: id === s.selectedElementId ? s.focusedEaseSegment : null,
+        };
       }
-      return { selectedElementId: id, selectedElementIds: id ? new Set([id]) : new Set<string>() };
+      return {
+        selectedElementId: id,
+        selectedElementIds: id ? new Set([id]) : new Set<string>(),
+        focusedEaseSegment: id === s.selectedElementId ? s.focusedEaseSegment : null,
+      };
     }),
   updateElement: (elementId, updates) =>
     set((state) => ({
@@ -560,9 +571,9 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
         (el.key ?? el.id) === elementId ? { ...el, ...updates } : el,
       ),
     })),
-  // playbackRate, audioMuted, loopEnabled, zoomMode, and manualZoomPercent are
-  // intentionally absent from createTimelineResetState because they are user
-  // preferences that survive both source refreshes and project switches.
+  // UI preferences intentionally survive reset. So do timelineSessionEpoch and
+  // focusedEaseRequestNonce: the epoch advances only when project identity
+  // changes, while a monotonic nonce prevents collisions with stale consumers.
   beginTimelineSession: (projectId) =>
     set((state) => {
       if (state.timelineProjectId === projectId) return state;
@@ -575,18 +586,15 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   reset: () => set(createTimelineResetState()),
 }));
 
-// Bug-bash aid: expose the store so a reproduction can dump live state from the
-// console, e.g. `__playerStore.getState().selectedElementId`. Harmless read
-// handle; no behavioural effect.
-// Only in dev. `import.meta.env` may be undefined in non-Vite bundlers (Next.js
-// Turbopack), so guard the access like the telemetry client does.
 function isDevBuild(): boolean {
   try {
     return import.meta.env.DEV === true;
   } catch {
+    // Turbopack and other non-Vite bundlers may not provide import.meta.env.
     return false;
   }
 }
 if (isDevBuild() && typeof window !== "undefined") {
+  // Console handle for dumping live Studio state during bug-bash reproduction.
   (window as unknown as { __playerStore?: typeof usePlayerStore }).__playerStore = usePlayerStore;
 }