@hyperframes/studio 0.7.78 → 0.7.80

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

@@ -60,12 +60,14 @@ const OPACITY = animation("opacity-tween", "visual", [
 ]);
 
 interface RenderHeaderOptions {
+  keyframeClip?: TimelineElement;
   animations?: GsapAnimation[];
   clipCount?: number;
   currentTime?: number;
   expanded?: boolean;
   onSeek?: (time: number) => void;
   onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onToggleTrackHidden?: TimelineEditCallbacks["onToggleTrackHidden"];
 }
 
 function renderHeader(options: RenderHeaderOptions = {}): {
@@ -80,10 +82,14 @@ function renderHeader(options: RenderHeaderOptions = {}): {
     act(() => {
       root.render(
         <TimelineTrackHeader
-          trackNumber={0}
+          // A real fractional z-order sort key, so a label built from it would
+          // read out "track 0.16666666666666666".
+          trackNumber={1 / 6}
+          trackDisplayNumber={1}
           trackLabel="Hero card"
+          lanesId="timeline-lanes-track-0"
           contentOrigin={LABEL_COL_W}
-          keyframeClip={ELEMENT}
+          keyframeClip={next.keyframeClip ?? ELEMENT}
           clipCount={next.clipCount ?? 1}
           isExpanded={next.expanded !== false}
           animations={next.animations ?? [POSITION, OPACITY]}
@@ -92,7 +98,7 @@ function renderHeader(options: RenderHeaderOptions = {}): {
           isAudioTrack={false}
           theme={defaultTimelineTheme}
           onToggleClipExpanded={vi.fn()}
-          onToggleTrackHidden={vi.fn()}
+          onToggleTrackHidden={next.onToggleTrackHidden ?? vi.fn()}
           onTogglePropertyGroupKeyframe={next.onTogglePropertyGroupKeyframe}
           onSeek={next.onSeek}
         />,
@@ -110,6 +116,53 @@ function click(host: HTMLElement, label: string) {
 }
 
 describe("TimelineTrackHeader", () => {
+  // An expanded sub-composition child sits on the MASTER timeline at a
+  // host-absolute start, but its tweens are parsed from its own file and are
+  // local to it. Feeding the raw start straight into the clip-% math put every
+  // lane keyframe far outside the clip.
+  it("keeps an expanded sub-comp child's lane percentages inside the clip", () => {
+    const child: TimelineElement = {
+      id: "pill",
+      tag: "div",
+      start: 16.5,
+      duration: 2,
+      track: 0,
+      expandedParentStart: 16,
+      sourceFile: "scene.html",
+    };
+    const local: GsapAnimation = {
+      id: "pill-tween",
+      targetSelector: "#pill",
+      method: "to",
+      position: 0.5,
+      resolvedStart: 0.5,
+      duration: 2,
+      properties: {},
+      propertyGroup: "position",
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { x: 0 } },
+          { percentage: 100, properties: { x: 100 } },
+        ],
+      },
+    };
+    // Playhead at the clip's midpoint (master time), so the 100% keyframe is
+    // ahead of it. On the raw host-absolute basis every keyframe rebased to a
+    // large negative percentage and nothing was ever ahead of the playhead.
+    const view = renderHeader({
+      keyframeClip: child,
+      animations: [local],
+      currentTime: 17.5,
+    });
+
+    expect(
+      view.host.querySelector<HTMLButtonElement>('button[aria-label="Next Position keyframe"]')
+        ?.disabled,
+    ).toBe(false);
+    act(() => view.root.unmount());
+  });
+
   // The header shows one clip's lanes, so how many clips the track holds is
   // otherwise invisible from the label column. A single-clip track stays silent.
   it("shows the track's clip count only once the track holds more than one clip", () => {
@@ -125,10 +178,27 @@ describe("TimelineTrackHeader", () => {
   // in every disclosure state — a hover-gated eye is unusable by keyboard.
   it("keeps the visibility eye mounted whether the layer is expanded or collapsed", () => {
     const view = renderHeader({ expanded: true });
-    expect(view.host.querySelector('button[aria-label="Hide track 0"]')).not.toBeNull();
+    expect(view.host.querySelector('button[aria-label="Hide track 1"]')).not.toBeNull();
 
     view.rerender({ expanded: false });
-    expect(view.host.querySelector('button[aria-label="Hide track 0"]')).not.toBeNull();
+    expect(view.host.querySelector('button[aria-label="Hide track 1"]')).not.toBeNull();
+    act(() => view.root.unmount());
+  });
+
+  // trackNumber is a fractional z-order sort key, so building the label from it
+  // made screen readers announce "Hide track 0.16666666666666666". The display
+  // number is label-only; the toggle still routes by the real key.
+  it("announces the display track number but toggles with the real fractional key", () => {
+    const onToggleTrackHidden = vi.fn();
+    const view = renderHeader({ onToggleTrackHidden });
+    const eye = view.host.querySelector<HTMLButtonElement>('button[aria-label="Hide track 1"]');
+
+    expect(eye).not.toBeNull();
+    expect(eye?.title).toBe("Hide track 1");
+    expect(view.host.innerHTML).not.toContain("0.16666666666666666");
+
+    act(() => eye?.click());
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(1 / 6, true);
     act(() => view.root.unmount());
   });
 

package/src/player/components/TimelineTrackHeader.tsx

@@ -4,6 +4,7 @@ import { Music } from "../../icons/SystemIcons";
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { clipTimingStart } from "../../hooks/gsapShared";
 import { LayerDisclosureRow } from "./LayerDisclosureRow";
 import { TrackClipCount } from "./TrackClipCount";
 import { LABEL_COL_W, LANE_H, getTimelineLaneTop } from "./timelineLayout";
@@ -14,10 +15,21 @@ import {
   type TimelinePropertyLane,
 } from "./trackHeaderLaneState";
 import { valueReadout } from "./trackHeaderLaneValues";
+import { trackDisplaySuffix } from "./timelineTrackDisplay";
 
 interface TimelineTrackHeaderProps {
+  /** The track's real key: a FRACTIONAL z-order sort value. Routes callbacks;
+   *  never shown or announced. */
   trackNumber: number;
+  /** The track's 1-based position in the rendered order: the only number safe
+   *  to put in a label. Announcing `trackNumber` read out "track
+   *  0.16666666666666666". Null when the key has no row, which drops the number
+   *  from the label rather than inventing one (see trackDisplayNumber). */
+  trackDisplayNumber: number | null;
   trackLabel: string;
+  /** Id of the canvas-side lanes element the disclosure caret expands. Minted by
+   *  TimelineLanes, which is the one place that sees both subtrees. */
+  lanesId: string;
   contentOrigin: number;
   /** The track's active keyframe clip (selected, else primary) — the one whose
    *  disclosure + property rows this header shows, whether expanded or not. */
@@ -39,16 +51,21 @@ interface TimelineTrackHeaderProps {
 function VisibilityButton({
   hidden,
   trackNumber,
+  trackDisplayNumber,
   visible,
   onToggle,
 }: {
   hidden: boolean;
   trackNumber: number;
+  trackDisplayNumber: number | null;
   visible: boolean;
   onToggle: TimelineEditCallbacks["onToggleTrackHidden"];
 }) {
   if (!visible) return <span aria-hidden="true" className="h-6 w-6 shrink-0" />;
-  const label = hidden ? `Show track ${trackNumber}` : `Hide track ${trackNumber}`;
+  // Display number in the text, real key in the callback. The two must not be
+  // conflated in either direction.
+  const suffix = trackDisplaySuffix(trackDisplayNumber);
+  const label = hidden ? `Show track${suffix}` : `Hide track${suffix}`;
   return (
     <button
       type="button"
@@ -76,6 +93,7 @@ function VisibilityButton({
 // count, eye. Not deprecated — it is the live path for every track without lanes.
 function PlainTrackHeader({
   trackNumber,
+  trackDisplayNumber,
   trackLabel,
   clipCount,
   showTrackLabel,
@@ -85,6 +103,7 @@ function PlainTrackHeader({
 }: Pick<
   TimelineTrackHeaderProps,
   | "trackNumber"
+  | "trackDisplayNumber"
   | "trackLabel"
   | "clipCount"
   | "isTrackHidden"
@@ -105,6 +124,7 @@ function PlainTrackHeader({
       <VisibilityButton
         hidden={isTrackHidden}
         trackNumber={trackNumber}
+        trackDisplayNumber={trackDisplayNumber}
         visible
         onToggle={onToggleTrackHidden}
       />
@@ -262,7 +282,9 @@ function PropertyGroupHeaderRow({
 
 export function TimelineTrackHeader({
   trackNumber,
+  trackDisplayNumber,
   trackLabel,
+  lanesId,
   contentOrigin,
   keyframeClip,
   clipCount,
@@ -281,13 +303,14 @@ export function TimelineTrackHeader({
     ? ((currentTime - keyframeClip.start) / keyframeClip.duration) * 100
     : 0;
   const lanes = keyframeClip
-    ? getTimelinePropertyLanes(animations, keyframeClip.start, keyframeClip.duration)
+    ? // clipTimingStart, not the raw start: an expanded sub-comp child's start is
+      // host-absolute while its tweens are local to its own file.
+      getTimelinePropertyLanes(animations, clipTimingStart(keyframeClip), keyframeClip.duration)
     : [];
   // Label mode = keyframe view; the label column stays LABEL_COL_W (Timeline.tsx
   // owns the gutter past it, so a 0% diamond isn't clipped by this panel).
   const showTrackLabel = contentOrigin >= LABEL_COL_W;
   const isKeyframeLayer = !!keyframeClip && lanes.length > 0;
-  const lanesId = `timeline-lanes-track-${trackNumber}`;
 
   return (
     <div
@@ -307,6 +330,7 @@ export function TimelineTrackHeader({
       {!keyframeClip || lanes.length === 0 ? (
         <PlainTrackHeader
           trackNumber={trackNumber}
+          trackDisplayNumber={trackDisplayNumber}
           trackLabel={trackLabel}
           clipCount={clipCount}
           showTrackLabel={showTrackLabel}
@@ -333,29 +357,35 @@ export function TimelineTrackHeader({
             <VisibilityButton
               hidden={isTrackHidden}
               trackNumber={trackNumber}
+              trackDisplayNumber={trackDisplayNumber}
               visible
               onToggle={onToggleTrackHidden}
             />
           </LayerDisclosureRow>
-          {/* Always mounted so the caret's aria-controls resolves in both states. */}
-          <div id={lanesId}>
-            {isExpanded &&
-              lanes.map((lane, laneIndex) => (
-                <PropertyGroupHeaderRow
-                  key={lane.group}
-                  lane={lane}
-                  laneIndex={laneIndex}
-                  isLastLane={laneIndex === lanes.length - 1}
-                  expandedElement={keyframeClip}
-                  currentTime={currentTime}
-                  clipPercentage={clipPercentage}
-                  gutterBackground={theme.gutterBackground}
-                  columnWidth={showTrackLabel ? LABEL_COL_W : contentOrigin}
-                  onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
-                  onSeek={onSeek}
-                />
-              ))}
-          </div>
+          {/* The caret expands TWO disjoint subtrees: these label-column rows,
+              which carry the per-lane keyframe controls, and the diamond lanes
+              on the canvas. `lanesId` names the canvas lanes (rendered by
+              TimelineLanes), because that is what a sighted user watches appear
+              and what following the reference has to land on. These rows are not
+              empty and are not the target; they are absolutely positioned inside
+              the sticky column, which is what made a wrapper HERE compute to
+              0x0 and hold no diamonds. */}
+          {isExpanded &&
+            lanes.map((lane, laneIndex) => (
+              <PropertyGroupHeaderRow
+                key={lane.group}
+                lane={lane}
+                laneIndex={laneIndex}
+                isLastLane={laneIndex === lanes.length - 1}
+                expandedElement={keyframeClip}
+                currentTime={currentTime}
+                clipPercentage={clipPercentage}
+                gutterBackground={theme.gutterBackground}
+                columnWidth={showTrackLabel ? LABEL_COL_W : contentOrigin}
+                onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
+                onSeek={onSeek}
+              />
+            ))}
         </>
       )}
     </div>

package/src/player/components/timelineDiamondTypes.ts

@@ -4,6 +4,7 @@
  * keyframe-identity helper live here; the rendering lives there.
  */
 import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 export interface TimelineDiamondKeyframe {
   percentage: number;
@@ -13,9 +14,8 @@ export interface TimelineDiamondKeyframe {
   animationId?: string;
   properties: Record<string, number | string>;
   ease?: string;
-  /** Set when 2+ source animations collide at this percentage (a single inline
-   *  ease button can't target one): the collapsed row hides the button here. */
-  easeAmbiguous?: boolean;
+  /** Source animation/keyframe targets that collide at this clip percentage. */
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
 }
 
 interface KeyframeCacheEntry {
@@ -116,5 +116,6 @@ export function keyframeTarget(keyframe: TimelineDiamondKeyframe): TimelineKeyfr
     tweenPercentage: keyframe.tweenPercentage,
     propertyGroup: keyframe.propertyGroup,
     animationId: keyframe.animationId,
+    collidingAnimationTargets: keyframe.collidingAnimationTargets,
   };
 }

package/src/player/components/timelineKeyframeIdentity.ts

@@ -1,8 +1,11 @@
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
+
 export interface TimelineKeyframeTarget {
   percentage: number;
   tweenPercentage?: number;
   propertyGroup?: string;
   animationId?: string;
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
 }
 
 /**

package/src/player/components/timelineLaneProps.ts

@@ -0,0 +1,86 @@
+import { type ReactNode } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
+import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import type { TimelineTheme } from "./timelineTheme";
+import type { TrackVisualStyle } from "./timelineIcons";
+import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
+
+/**
+ * Props shared by the scroll container ({@link import("./TimelineCanvas")}) and
+ * the lane renderer ({@link import("./TimelineLanes")}). TimelineCanvas passes
+ * these straight through via spread, so they are declared once here and both
+ * prop types compose from this base — no duplicated prop list. Kept in its own
+ * module so neither side has to import the other just to name the contract.
+ */
+export interface TimelineLaneBaseProps {
+  pps: number;
+  contentOrigin: number;
+  contentGutter: number;
+  trackContentWidth: number;
+  theme: TimelineTheme;
+  displayTrackOrder: number[];
+  rowHeights: readonly number[];
+  trackOrder: number[];
+  tracks: [number, TimelineElement[]][];
+  trackStyles: Map<number, TrackVisualStyle>;
+  laneCounts: ReadonlyMap<string, number>;
+  selectedElementId: string | null;
+  selectedElementIds: Set<string>;
+  hoveredClip: string | null;
+  draggedClip: DraggedClipState | null;
+  blockedClipRef: React.RefObject<BlockedClipState | null>;
+  suppressClickRef: React.RefObject<boolean>;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
+  renderClipContent?: (
+    element: TimelineElement,
+    style: { clip: string; label: string },
+  ) => ReactNode;
+  renderClipOverlay?: (element: TimelineElement) => ReactNode;
+  onDrillDown?: (element: TimelineElement) => void;
+  onSelectElement?: (element: TimelineElement | null) => void;
+  setHoveredClip: (key: string | null) => void;
+  setShowPopover: (v: boolean) => void;
+  setRangeSelection: (v: null) => void;
+  setResizingClip: (v: ResizingClipState | null) => void;
+  setDraggedClip: (v: DraggedClipState | null) => void;
+  setSelectedElementId: (id: string | null) => void;
+  syncClipDragAutoScroll: (x: number, y: number) => void;
+  shiftClickClipRef: React.RefObject<{
+    element: TimelineElement;
+    anchorX: number;
+    anchorY: number;
+  } | null>;
+  getPreviewElement: (element: TimelineElement) => TimelineElement;
+  getTrackStyle: (tag: string) => TrackVisualStyle;
+  keyframeCache?: Map<string, KeyframeCacheEntry>;
+  gsapAnimations: Map<string, GsapAnimation[]>;
+  selectedKeyframes: Set<string>;
+  currentTime: number;
+  onSeek?: (time: number) => void;
+  onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onClickKeyframe?: (element: TimelineElement, target: TimelineKeyframeTarget) => void;
+  onShiftClickKeyframe?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onContextMenuKeyframe?: (
+    e: React.MouseEvent,
+    elementId: string,
+    target: TimelineKeyframeTarget,
+  ) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    keyframe: TimelineKeyframeTarget,
+    toClipPercentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => Promise<boolean>;
+  onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
+  /**
+   * Right-click on EMPTY lane space (not on a clip — those preventDefault
+   * before this fires — not the gutter/ruler, not below the lanes). `time` is
+   * the timeline time (seconds) under the pointer on that lane.
+   */
+  onContextMenuLane?: (e: React.MouseEvent, track: number, time: number) => void;
+  beatAnalysis?: MusicBeatAnalysis | null;
+}

package/src/player/components/timelineTrackDisplay.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { timelineTrackOrder, trackDisplayNumber, trackDisplaySuffix } from "./timelineTrackDisplay";
+
+describe("timelineTrackOrder", () => {
+  it("is the ascending distinct key order, fractional sub-comp keys included", () => {
+    const elements = [{ track: 1 }, { track: 0 }, { track: 1 / 6 }, { track: 1 }];
+
+    expect(timelineTrackOrder(elements)).toEqual([0, 1 / 6, 1]);
+  });
+});
+
+describe("trackDisplayNumber", () => {
+  it("is the key's 1-based row, not the fractional key itself", () => {
+    const order = timelineTrackOrder([{ track: 0 }, { track: 1 / 6 }, { track: 1 }]);
+
+    expect(trackDisplayNumber(order, 1 / 6)).toBe(2);
+    expect(trackDisplayNumber(order, 1)).toBe(3);
+  });
+
+  it("is null for a key with no row rather than a plausible-looking one", () => {
+    // The old end-row fallback announced "track 4" for a track the user cannot
+    // see at row 4, and nothing upstream could tell that apart from a real row.
+    expect(trackDisplayNumber([0, 1, 2], 7)).toBeNull();
+  });
+});
+
+describe("trackDisplaySuffix", () => {
+  it("names the row when there is one", () => {
+    expect(`Hide track${trackDisplaySuffix(3)}`).toBe("Hide track 3");
+  });
+
+  it("drops the number entirely when there is no row", () => {
+    expect(`Hide track${trackDisplaySuffix(null)}`).toBe("Hide track");
+  });
+});

package/src/player/components/timelineTrackDisplay.ts

@@ -0,0 +1,38 @@
+/**
+ * The one owner of "what track number does the user see".
+ *
+ * `TimelineElement.track` is a z-order SORT key, not a row number: an expanded
+ * sub-composition child gets a synthesized fractional key (`host.track + n /
+ * (siblings + 2)`, see `useExpandedTimelineElements`), so putting it in a string
+ * announces "Hide track 0.16666666666666666". Every user-visible track number,
+ * whether it is rendered by a component or baked into an undo-history label,
+ * routes through here; the raw key stays in callbacks and lookups only.
+ */
+
+/** Ascending distinct track keys, the row order the timeline renders in. */
+export function timelineTrackOrder(elements: readonly { track: number }[]): number[] {
+  return [...new Set(elements.map((element) => element.track))].sort((a, b) => a - b);
+}
+
+/**
+ * A track key's 1-based display row, or null when the key is not in
+ * `trackOrder` at all.
+ *
+ * Both callers build `trackOrder` from the same elements the key came from, so
+ * null is unreachable by construction today. It is null rather than a number
+ * because the only numbers available to return (the end row, the last row) are
+ * indistinguishable from a real answer: a label would announce a row the user
+ * can see is wrong, and nothing upstream would ever learn it had guessed.
+ */
+export function trackDisplayNumber(trackOrder: readonly number[], track: number): number | null {
+  const row = trackOrder.indexOf(track);
+  return row < 0 ? null : row + 1;
+}
+
+/**
+ * The `" 3"` in `Hide track 3`, empty when there is no display row to name.
+ * Announcing "Hide track" is thin; announcing an invented row is wrong.
+ */
+export function trackDisplaySuffix(displayNumber: number | null): string {
+  return displayNumber === null ? "" : ` ${displayNumber}`;
+}

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

@@ -36,72 +36,92 @@ const FLAT_TWEEN_TARGET: TimelineKeyframeTarget = {
   animationId: "position-tween",
 };
 
+const COLLIDING_TARGET: TimelineKeyframeTarget = {
+  ...FLAT_TWEEN_TARGET,
+  collidingAnimationTargets: [
+    { animationId: "position-tween", tweenPercentage: 100 },
+    { animationId: "scale-tween", tweenPercentage: 75 },
+  ],
+};
+
 afterEach(() => {
   document.body.innerHTML = "";
   trackStudioSegmentEaseEdit.mockClear();
   usePlayerStore.setState({ focusedEaseSegment: null });
 });
 
-describe("useTimelineKeyframeHandlers", () => {
-  it("tracks opening the segment ease editor when a timeline segment is selected", () => {
-    let onSelectSegment: ((elementId: string, target: TimelineKeyframeTarget) => void) | undefined;
-
-    function Harness() {
-      ({ onSelectSegment } = useTimelineKeyframeHandlers({
+/**
+ * Mount the hook on its own and hand back the handlers it returned, with the
+ * options every test shares already filled in. Each test overrides only the
+ * inputs its assertion is about.
+ */
+function mountHandlers(options: Partial<Parameters<typeof useTimelineKeyframeHandlers>[0]> = {}) {
+  const handlers: Partial<ReturnType<typeof useTimelineKeyframeHandlers>> = {};
+
+  function Harness() {
+    Object.assign(
+      handlers,
+      useTimelineKeyframeHandlers({
         expandedElements: [ELEMENT],
         keyframeCache: new Map(),
         setSelectedElementId: vi.fn(),
         setKfContextMenu: vi.fn(),
         toggleSelectedKeyframe: vi.fn(),
-      }));
-      return null;
-    }
+        ...options,
+      }),
+    );
+    return null;
+  }
+
+  return { root: mountReactHarness(<Harness />), handlers };
+}
 
-    const root = mountReactHarness(<Harness />);
-    act(() => onSelectSegment?.(ELEMENT.id, TARGET));
+describe("useTimelineKeyframeHandlers", () => {
+  it("tracks opening the segment ease editor when a timeline segment is selected", () => {
+    const { root, handlers } = mountHandlers();
+    act(() => handlers.onSelectSegment?.(ELEMENT.id, TARGET));
 
     expect(trackStudioSegmentEaseEdit).toHaveBeenCalledOnce();
     expect(trackStudioSegmentEaseEdit).toHaveBeenCalledWith({ action: "open" });
     act(() => root.unmount());
   });
 
+  it("focuses a merged segment with its colliding animation targets", () => {
+    const { root, handlers } = mountHandlers();
+    act(() => handlers.onSelectSegment?.(ELEMENT.id, COLLIDING_TARGET));
+
+    expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
+      animationId: "position-tween",
+      collidingAnimationTargets: [
+        { animationId: "position-tween", tweenPercentage: 100 },
+        { animationId: "scale-tween", tweenPercentage: 75 },
+      ],
+      tweenPercentage: 100,
+      elementId: ELEMENT.id,
+    });
+    act(() => root.unmount());
+  });
+
   it("focuses a flat tween segment without seeking, while keyframe clicks still seek", () => {
     const onSeek = vi.fn();
     const onSelectElement = vi.fn();
     const setSelectedElementId = vi.fn();
-    let onClickKeyframe:
-      | ((el: TimelineElement, target: TimelineKeyframeTarget) => void)
-      | undefined;
-    let onSelectSegment: ((elementId: string, target: TimelineKeyframeTarget) => void) | undefined;
-
-    function Harness() {
-      ({ onClickKeyframe, onSelectSegment } = useTimelineKeyframeHandlers({
-        expandedElements: [ELEMENT],
-        keyframeCache: new Map(),
-        onSelectElement,
-        onSeek,
-        setSelectedElementId,
-        setKfContextMenu: vi.fn(),
-        toggleSelectedKeyframe: vi.fn(),
-      }));
-      return null;
-    }
-
-    const root = mountReactHarness(<Harness />);
+    const { root, handlers } = mountHandlers({ onSelectElement, onSeek, setSelectedElementId });
 
     // Selecting a segment must NOT move the playhead.
-    act(() => onSelectSegment?.(ELEMENT.id, FLAT_TWEEN_TARGET));
+    act(() => handlers.onSelectSegment?.(ELEMENT.id, FLAT_TWEEN_TARGET));
     expect(onSeek).not.toHaveBeenCalled();
     expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
       animationId: "position-tween",
       tweenPercentage: 100,
       elementId: ELEMENT.id,
     });
+    expect(usePlayerStore.getState().focusedEaseSegment?.collidingAnimationTargets).toBeUndefined();
     expect(setSelectedElementId).toHaveBeenCalledWith(ELEMENT.id);
     expect(onSelectElement).toHaveBeenCalledWith(ELEMENT);
 
     // Clicking the keyframe itself still seeks to it (start 1 + 50% of 2 = 2).
-    act(() => onClickKeyframe?.(ELEMENT, TARGET));
+    act(() => handlers.onClickKeyframe?.(ELEMENT, TARGET));
     expect(onSeek).toHaveBeenCalledExactlyOnceWith(2);
     act(() => root.unmount());
   });

package/src/player/components/useTimelineKeyframeHandlers.ts

@@ -65,6 +65,7 @@ export function useTimelineKeyframeHandlers({
       if (target.animationId !== undefined && target.tweenPercentage !== undefined) {
         usePlayerStore.getState().setFocusedEaseSegment({
           animationId: target.animationId,
+          collidingAnimationTargets: target.collidingAnimationTargets,
           tweenPercentage: target.tweenPercentage,
           elementId: elId,
         });

package/src/player/components/useTimelineRangeSelection.ts

@@ -268,6 +268,11 @@ export function useTimelineRangeSelection({
       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);
         return;
       }