@hyperframes/studio 0.8.96 → 0.8.98

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

@@ -3,6 +3,7 @@ import { act } from "react";
 import { describe, expect, it, vi, type Mock } from "vitest";
 import { createRoot } from "react-dom/client";
 import { TimelineAutomationLane } from "./TimelineAutomationLane";
+import { TimelineReadOnlyContext } from "./timelineReadOnly";
 import { PAD_X } from "./automationLaneGeometry";
 import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
@@ -1965,3 +1966,25 @@ describe("TimelineAutomationLane — a read-only lane offers nothing to grab", (
     expect(container.querySelector("[data-automation-readonly-note]")).toBeNull();
   });
 });
+
+describe("TimelineAutomationLane inside a read-only timeline", () => {
+  it("reports a point drag and a double-click once each, and writes nothing", () => {
+    const onReadOnlyPress = vi.fn();
+    const props = laneProps({ automation: ramp, readOnly: true });
+    const { container } = render(
+      <TimelineReadOnlyContext.Provider value={onReadOnlyPress}>
+        <TimelineAutomationLane {...props} />
+      </TimelineReadOnlyContext.Provider>,
+    );
+    const svg = container.querySelector("svg")!;
+    stubBox(svg, BOX);
+    fire(svg, "pointerdown", at(0, 1));
+    fire(svg, "pointermove", at(1, 0.6));
+    fire(svg, "pointermove", at(2, 0.4));
+    fire(svg, "pointerup", at(2, 0.4));
+    expect(onReadOnlyPress).toHaveBeenCalledTimes(1);
+    fire(svg, "dblclick", at(2, 0.4));
+    expect(onReadOnlyPress).toHaveBeenCalledTimes(2);
+    expect(props.onCommit).not.toHaveBeenCalled();
+  });
+});

package/src/player/components/TimelineClipDiamonds.tsx

@@ -11,6 +11,7 @@ import {
   type TimelineKeyframeRetimeHandle,
 } from "./useTimelineKeyframeHandlers";
 import { timelineKeyframeFocusId } from "./timelineNavigationIdentity";
+import { reportPressOnTravel, useTimelineReadOnlyPress } from "./timelineReadOnly";
 import {
   DIAMOND_RATIO,
   keyframeTimeLabel,
@@ -92,6 +93,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
   // This lane only arms it and renders the preview it publishes.
   const rootRef = useRef<HTMLDivElement>(null);
   const retimeHandleRef = useRef<TimelineKeyframeRetimeHandle | null>(null);
+  const readOnlyPress = useTimelineReadOnlyPress();
   // Retime destinations already dispatched but not yet in the keyframe cache, so
   // a rapid second drag composes from where the first move left the keyframe
   // instead of the stale rendered value.
@@ -227,7 +229,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
       : null;
   const baseColor = isSelected ? accentColor : "var(--timeline-diamond-muted)";
   const baseOpacity = isSelected ? 0.4 : 0.25;
-  const canDrag = isSelected && !!onMoveKeyframe;
+  const canDrag = isSelected && !!onMoveKeyframe && !readOnlyPress;
 
   return (
     <div
@@ -285,7 +287,10 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
         const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
           if (e.button !== 0) return;
           e.stopPropagation();
-          if (!canDrag) return;
+          if (!canDrag) {
+            if (isSelected) reportPressOnTravel(e, readOnlyPress);
+            return;
+          }
           retimeHandleRef.current = beginTimelineKeyframeRetime({
             event: e,
             elementId,

package/src/player/components/TimelineFxButton.tsx

@@ -11,6 +11,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { useTimelineReadOnlyPress } from "./timelineReadOnly";
 import {
   enabledAudioFxNodes,
   parseAudioFxChain,
@@ -197,8 +198,10 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
   const transport = useAuditionTransport();
   /** Whether THIS audition lifted a mute, so only it puts one back. */
   const borrowedMute = useRef(false);
+  const readOnlyPress = useTimelineReadOnlyPress();
 
   const openAt = () => {
+    if (readOnlyPress) return readOnlyPress();
     setAnchorRect(buttonRef.current?.getBoundingClientRect() ?? null);
     setOpen(true);
   };

package/src/player/components/TimelineLanes.tsx

@@ -17,7 +17,7 @@ import {
 } from "./useTimelineTrackLayout";
 import { trackDisplayNumber, trackDisplaySuffix } from "./timelineTrackDisplay";
 import { clipTimingStart } from "../../hooks/gsapShared";
-import { getTimelineEditCapabilities } from "./timelineEditing";
+import { useTimelineClipCapabilities } from "./timelineReadOnly";
 import { CLIP_Y, TRACK_H } from "./timelineLayout";
 import { usePlayerStore } from "../store/playerStore";
 import { isMultiDragPassenger, multiDragPassengerOffsetPx } from "./timelineMultiDragPreview";
@@ -107,6 +107,7 @@ export function TimelineLanes({
   const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } =
     useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
+  const getClipCapabilities = useTimelineClipCapabilities();
   const transitionSeamsByTrack = useMemo(
     () =>
       deriveTimelineTransitionSeamsByTrack(tracks.flatMap(([, els]) => els.map(getPreviewElement))),
@@ -368,7 +369,7 @@ export function TimelineLanes({
                     // diamonds on their own bar instead.
                     const isTrackKeyframeClip = elementKey === keyframeClipKey;
                     const showsLanes = isTrackKeyframeClip && rowExpanded;
-                    const capabilities = getTimelineEditCapabilities(el);
+                    const capabilities = getClipCapabilities(el);
                     const isSelected =
                       selectedElementId === elementKey || selectedElementIds.has(elementKey);
                     const isComposition = !!el.compositionSrc;

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

@@ -71,11 +71,12 @@ describe("resolveTimelineContextElement", () => {
   });
 });
 
-function renderKeyframeOverlay(options: {
+function renderOverlay(options: {
   capturedElement: TimelineElement;
   currentElement: TimelineElement;
   setKfContextMenu?: ReturnType<typeof vi.fn>;
   onDeleteAllKeyframes?: ReturnType<typeof vi.fn>;
+  overlays?: Partial<TimelineOverlaysState>;
 }) {
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -117,6 +118,7 @@ function renderKeyframeOverlay(options: {
     onCloseTrackGap: vi.fn(),
     onCloseAllTrackGaps: vi.fn(),
     onHoverGapAction: vi.fn(),
+    ...options.overlays,
   } satisfies TimelineOverlaysState;
   const contextValue = {
     state: {
@@ -151,22 +153,24 @@ function renderKeyframeOverlay(options: {
     );
   }
 
+  const render = () =>
+    root.render(
+      createElement(TestTimelineContext, { value: contextValue }, createElement(TimelineOverlays)),
+    );
   act(() => {
     usePlayerStore.setState({
       selectedElementId: options.capturedElement.key ?? options.capturedElement.id,
       timelineSessionEpoch: 2,
     });
-    root.render(
-      createElement(TestTimelineContext, { value: contextValue }, createElement(TimelineOverlays)),
-    );
+    render();
   });
-  return { setKfContextMenu, onDeleteAllKeyframes };
+  return { setKfContextMenu, onDeleteAllKeyframes, rerender: () => act(render) };
 }
 
 describe("TimelineOverlays context lifecycle", () => {
   it("dismisses a keyframe menu when its selected target becomes stale", () => {
     const setKfContextMenu = vi.fn();
-    renderKeyframeOverlay({
+    renderOverlay({
       capturedElement: captured,
       currentElement: captured,
       setKfContextMenu,
@@ -180,7 +184,7 @@ describe("TimelineOverlays context lifecycle", () => {
   it("dispatches a menu action with the current model element", () => {
     const current = { ...captured, start: 4, track: 7 };
     const onDeleteAllKeyframes = vi.fn();
-    renderKeyframeOverlay({
+    renderOverlay({
       capturedElement: captured,
       currentElement: current,
       onDeleteAllKeyframes,
@@ -193,4 +197,23 @@ describe("TimelineOverlays context lifecycle", () => {
 
     expect(onDeleteAllKeyframes).toHaveBeenCalledExactlyOnceWith(current, "child-position");
   });
+
+  it("builds the host's clip menu items once for the current model element and lists them first", () => {
+    const current = { ...captured, start: 4, track: 7 };
+    const clipMenuItems = vi.fn(() => [{ id: "ask", label: "Ask", onSelect: vi.fn() }]);
+    const { rerender } = renderOverlay({
+      capturedElement: captured,
+      currentElement: current,
+      overlays: {
+        kfContextMenu: null,
+        clipContextMenu: { x: 10, y: 10, sessionEpoch: 2, element: captured },
+        clipMenuItems,
+      },
+    });
+
+    rerender();
+
+    expect(clipMenuItems).toHaveBeenCalledExactlyOnceWith(current);
+    expect(document.body.querySelector('[role="menuitem"]')?.textContent).toBe("Ask");
+  });
 });

package/src/player/components/TimelineOverlays.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import type { TimelineElement } from "../store/playerStore";
 import { EditPopover } from "./EditModal";
 import { KeyframeDiamondContextMenu } from "./KeyframeDiamondContextMenu";
@@ -152,6 +152,11 @@ export function TimelineClipMenuOverlay() {
   useEffect(() => {
     if (clipContextMenu && !element) setClipContextMenu(null);
   }, [element, clipContextMenu, setClipContextMenu]);
+  const { clipMenuItems } = overlay;
+  const hostItems = useMemo(
+    () => (element ? clipMenuItems?.(element) : undefined),
+    [clipMenuItems, element],
+  );
   if (!clipContextMenu || !element) return null;
   const readCurrentElement = () =>
     resolveTimelineContextElement({
@@ -183,6 +188,7 @@ export function TimelineClipMenuOverlay() {
       onPaste={overlay.onPasteClip}
       onDuplicate={overlay.onDuplicateClip}
       canPaste={overlay.canPasteClip?.() ?? false}
+      hostItems={hostItems}
     />
   );
 }

package/src/player/components/TimelineProvider.tsx

@@ -1,6 +1,9 @@
 import {
   createContext,
+  useCallback,
   useContext,
+  useLayoutEffect,
+  useRef,
   type ComponentProps,
   type CSSProperties,
   type MouseEvent,
@@ -26,6 +29,7 @@ import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
 import { useTimelineProviderState } from "./useTimelineProviderState";
+import { TimelineReadOnlyContext } from "./timelineReadOnly";
 import {
   TimelineEditProvider,
   useTimelineEditContextValue,
@@ -107,6 +111,7 @@ export interface TimelineOverlaysState {
   onPasteClip?: () => Promise<void>;
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
+  clipMenuItems?: TimelineProps["clipMenuItems"];
   gapContextMenu: TrackGapContextMenuState | null;
   onDismissGapContextMenu: () => void;
   onCloseTrackGap: () => void;
@@ -180,16 +185,28 @@ export interface TimelineContextValue {
 
 const TimelineContext = createContext<TimelineContextValue | null>(null);
 
-export function TimelineProvider({ children, ...props }: TimelineProps & { children: ReactNode }) {
+const NO_EDITS: TimelineEditCallbacks = {};
+
+export function TimelineProvider({
+  children,
+  readOnly = false,
+  onReadOnlyPress,
+  ...props
+}: TimelineProps & { children: ReactNode }) {
   const editContext = useTimelineEditContextValue();
-  if (!editContext) {
-    return (
-      <TimelineEditProvider value={props}>
+  const onReadOnlyPressRef = useRef(onReadOnlyPress);
+  useLayoutEffect(() => {
+    onReadOnlyPressRef.current = onReadOnlyPress;
+  });
+  const refuse = useCallback(() => onReadOnlyPressRef.current?.(), []);
+  const readOnlyPress = readOnly ? refuse : null;
+  return (
+    <TimelineReadOnlyContext.Provider value={readOnlyPress}>
+      <TimelineEditProvider value={readOnly ? NO_EDITS : (editContext ?? props)}>
         <TimelineProviderState {...props}>{children}</TimelineProviderState>
       </TimelineEditProvider>
-    );
-  }
-  return <TimelineProviderState {...props}>{children}</TimelineProviderState>;
+    </TimelineReadOnlyContext.Provider>
+  );
 }
 
 function TimelineProviderState({ children, ...props }: TimelineProps & { children: ReactNode }) {

package/src/player/components/TimelineTypes.ts

@@ -12,6 +12,15 @@ export interface TimelineClipRenderContext {
   rich: boolean;
 }
 
+export interface TimelineClipMenuItem {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
 export interface TimelineProps
   extends TimelineDropCallbacks, TimelineEditOverrides, TimelineStackingSyncProps {
   /** Project-scoped reset boundary; soft source refreshes retain the same epoch. */
@@ -33,8 +42,11 @@ export interface TimelineProps
   onPasteClip?: () => Promise<void>;
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
+  clipMenuItems?: (element: TimelineElement) => readonly TimelineClipMenuItem[];
   theme?: Partial<TimelineTheme>;
   showAudioEffects?: boolean;
   showKeyframes?: boolean;
   trackPadding?: TimelineTrackPadding;
+  readOnly?: boolean;
+  onReadOnlyPress?: () => void;
 }

package/src/player/components/menuKeyboardNav.ts

@@ -2,10 +2,10 @@ import { useEffect, type RefObject } from "react";
 
 /**
  * APG menu keyboard basics for the timeline context menus: focuses the first
- * menu item on open, moves focus with ArrowUp/ArrowDown/Home/End, and restores
- * focus to the previously focused element when the menu unmounts. Pair with
- * `role="menu"` on the container and `role="menuitem"` on the buttons
- * (dismiss/Escape handling stays in useContextMenuDismiss).
+ * menu item on open, moves focus with ArrowUp/ArrowDown/Home/End, and gives
+ * focus back to the element that held it at open, on unmount, unless an item moved
+ * it elsewhere. Pair with `role="menu"` on the container and `role="menuitem"`
+ * on the buttons (dismiss/Escape handling stays in useContextMenuDismiss).
  */
 export function useMenuKeyboardNav(menuRef: RefObject<HTMLDivElement | null>): void {
   useEffect(() => {
@@ -39,7 +39,14 @@ export function useMenuKeyboardNav(menuRef: RefObject<HTMLDivElement | null>): v
 
     return () => {
       menu.removeEventListener("keydown", onKeyDown);
-      if (previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
+      const active = document.activeElement;
+      const focusLeftWithMenu =
+        active === null || active === document.body || menu.contains(active);
+      if (
+        focusLeftWithMenu &&
+        previouslyFocused instanceof HTMLElement &&
+        document.contains(previouslyFocused)
+      ) {
         previouslyFocused.focus();
       }
     };

package/src/player/components/studioShortcuts.ts

@@ -53,7 +53,7 @@ export const DEFAULT_SHORTCUT_SECTIONS: readonly ShortcutSection[] = [
       { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
       { key: "⇧Click", label: "Razor tool: split all tracks" },
       { key: "[", label: "Select clips starting before the playhead" },
-      { key: "]", label: "Select clips starting at or after the playhead" },
+      { key: "]", label: "Select clips running at or after the playhead" },
       { key: "⌘G", label: "Group elements" },
       { key: "⌘⇧G", label: "Ungroup" },
       { key: "Del", label: "Delete selected element (no keyframe selected)" },

package/src/player/components/timelineClipGestureHandlers.ts

@@ -58,10 +58,12 @@ type PointerDownAction =
  */
 function isIntentBlocked(
   intent: BlockedTimelineEditIntent | null,
+  capabilities: TimelineEditCapabilities,
   onResizeElement: ClipGestureDeps["onResizeElement"],
   onMoveElement: ClipGestureDeps["onMoveElement"],
 ): intent is BlockedTimelineEditIntent {
   if (!intent) return false;
+  if (capabilities.readOnly) return true;
   return intent === "move" ? Boolean(onMoveElement) : Boolean(onResizeElement);
 }
 
@@ -88,7 +90,7 @@ function resolvePointerDownAction(
     handleWidth: CLIP_HANDLE_W,
     capabilities,
   });
-  if (isIntentBlocked(intent, onResizeElement, onMoveElement)) {
+  if (isIntentBlocked(intent, capabilities, onResizeElement, onMoveElement)) {
     return { kind: "block", intent, rect };
   }
 

package/src/player/components/timelineDragDrop.ts

@@ -23,6 +23,7 @@ interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   rowGeometryRef: RefObject<TimelineRowGeometry>;
   contentOrigin: number;
   sessionEpoch: number;
+  readOnlyPress?: (() => void) | null;
 }
 
 /**
@@ -132,6 +133,7 @@ export function useTimelineAssetDrop({
   onBlockDrop,
   onCompositionDrop,
   sessionEpoch,
+  readOnlyPress,
 }: UseTimelineAssetDropOptions) {
   const [isDragOver, setIsDragOver] = useState(false);
   const [dropPreview, setDropPreview] = useState<TimelineDropPlacement | null>(null);
@@ -140,6 +142,7 @@ export function useTimelineAssetDrop({
   );
   const autoScrollRafRef = useRef(0);
   const activeDropEpochRef = useRef<number | null>(null);
+  const refusedDragRef = useRef(false);
 
   const stopAutoScroll = useCallback(() => {
     dragPointerRef.current = null;
@@ -210,6 +213,12 @@ export function useTimelineAssetDrop({
       const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
       const hasComposition = types.includes(TIMELINE_COMPOSITION_MIME);
       if (!hasFiles && !hasAsset && !hasBlock && !hasComposition) return;
+      if (readOnlyPress) {
+        e.dataTransfer.dropEffect = "none";
+        if (!refusedDragRef.current) readOnlyPress();
+        refusedDragRef.current = true;
+        return;
+      }
       e.preventDefault();
       e.dataTransfer.dropEffect = "copy";
       activeDropEpochRef.current = sessionEpoch;
@@ -222,11 +231,12 @@ export function useTimelineAssetDrop({
       );
       syncAutoScroll(e.clientX, e.clientY);
     },
-    [resolveDropPlacement, sessionEpoch, syncAutoScroll],
+    [readOnlyPress, resolveDropPlacement, sessionEpoch, syncAutoScroll],
   );
 
   const clearDropPreview = useCallback(() => {
     activeDropEpochRef.current = null;
+    refusedDragRef.current = false;
     stopAutoScroll();
     setIsDragOver(false);
     setDropPreview(null);

package/src/player/components/timelineEditCapabilities.ts

@@ -2,6 +2,7 @@ export interface TimelineEditCapabilities {
   canMove: boolean;
   canTrimStart: boolean;
   canTrimEnd: boolean;
+  readOnly?: boolean;
 }
 
 function isDeterministicTimelineWindow(input: {

package/src/player/components/timelineMountTestEnv.ts

@@ -27,3 +27,27 @@ export function installTimelineMountEnv(): void {
     document.body.innerHTML = "";
   });
 }
+
+export const KEYFRAMED_CARD = new Map([
+  [
+    "card",
+    [
+      {
+        id: "card-position",
+        targetSelector: "#card",
+        method: "to" as const,
+        position: 0,
+        duration: 2,
+        properties: {},
+        propertyGroup: "position" as const,
+        keyframes: {
+          format: "percentage" as const,
+          keyframes: [
+            { percentage: 0, properties: { x: 0 } },
+            { percentage: 50, properties: { x: 100 } },
+          ],
+        },
+      },
+    ],
+  ],
+]);

package/src/player/components/timelineReadOnly.ts

@@ -0,0 +1,64 @@
+import { createContext, useContext, useEffect, useEffectEvent } from "react";
+import {
+  getTimelineEditCapabilities,
+  type TimelineEditCapabilities,
+} from "./timelineEditCapabilities";
+
+export const TimelineReadOnlyContext = createContext<(() => void) | null>(null);
+
+/** The refusal to report while the timeline is read-only; null while it is editable. */
+export function useTimelineReadOnlyPress(): (() => void) | null {
+  return useContext(TimelineReadOnlyContext);
+}
+
+const READ_ONLY_CLIP: TimelineEditCapabilities = {
+  canMove: false,
+  canTrimStart: false,
+  canTrimEnd: false,
+  readOnly: true,
+};
+
+/** Read-only locks every clip; its presses then take the blocked-edit path to the refusal. */
+export function useTimelineClipCapabilities(): typeof getTimelineEditCapabilities {
+  return useTimelineReadOnlyPress() ? () => READ_ONLY_CLIP : getTimelineEditCapabilities;
+}
+
+/** Read-only swaps each callback for the refusal: the press is reported instead of acted on. */
+export function refuseWhenReadOnly<T extends object>(
+  readOnlyPress: (() => void) | null,
+  callbacks: T,
+): T {
+  if (!readOnlyPress) return callbacks;
+  return Object.fromEntries(Object.keys(callbacks).map((key) => [key, readOnlyPress])) as T;
+}
+
+/** Once the switch into read-only lands, drop every edit already in flight without committing it. */
+export function useAbandonEditsOnReadOnly(readOnly: boolean, abandon: () => void): void {
+  const abandonNow = useEffectEvent(abandon);
+  useEffect(() => {
+    if (readOnly) abandonNow();
+  }, [readOnly]);
+}
+
+/** Reports once if the press that started at `start` travels far enough to have been a drag. */
+export function reportPressOnTravel(
+  start: { clientX: number; clientY: number },
+  refuse: (() => void) | null,
+  threshold = 4,
+): void {
+  if (!refuse) return;
+  const stop = () => {
+    window.removeEventListener("pointermove", onMove, true);
+    window.removeEventListener("pointerup", stop, true);
+    window.removeEventListener("pointercancel", stop, true);
+  };
+  const onMove = (event: PointerEvent) => {
+    if (Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) < threshold)
+      return;
+    stop();
+    refuse();
+  };
+  window.addEventListener("pointermove", onMove, true);
+  window.addEventListener("pointerup", stop, true);
+  window.addEventListener("pointercancel", stop, true);
+}

package/src/player/components/useAutomationLaneGestures.ts

@@ -26,6 +26,7 @@ import {
   type ShiftAxis,
 } from "./automationLaneDragMath";
 import { useAutomationSegmentDrag } from "./useAutomationSegmentDrag";
+import { reportPressOnTravel, useTimelineReadOnlyPress } from "./timelineReadOnly";
 
 /** How far a press may travel and still count as a click rather than a drag. */
 const CLICK_SLOP_PX = 3;
@@ -109,6 +110,7 @@ export function useAutomationLaneGestures({
   duration,
   rangeSelection,
 }: UseAutomationLaneGesturesInput): UseAutomationLaneGesturesResult {
+  const timelineReadOnlyPress = useTimelineReadOnlyPress();
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [curveIndex, setCurveIndex] = useState<number | null>(null);
   const [hint, setHint] = useState<string | null>(null);
@@ -267,6 +269,13 @@ export function useAutomationLaneGestures({
     [hitIndex, segmentDrag, segmentIndex],
   );
 
+  const reportLaneEditPress = useCallback(
+    (e: ReactPointerEvent<SVGSVGElement>) => {
+      if (gestureAt(e)) reportPressOnTravel(e, timelineReadOnlyPress);
+    },
+    [gestureAt, timelineReadOnlyPress],
+  );
+
   const onPointerDown = useCallback(
     (e: ReactPointerEvent<SVGSVGElement>): void => {
       if (e.button !== 0) return;
@@ -281,6 +290,7 @@ export function useAutomationLaneGestures({
       // so the field sat open until Enter however far away the next click landed.
       if (editing) commitEdit();
       if (readOnly) {
+        reportLaneEditPress(e);
         // The lane sits below the clip bar, so the timeline's selection handler
         // never sees this press; selecting here is the only way in. The press then
         // goes on to arm a range drag rather than being spent on the selection: a
@@ -323,6 +333,7 @@ export function useAutomationLaneGestures({
       gestureAt,
       lane,
       readOnly,
+      reportLaneEditPress,
       onSelect,
       rangeDrag,
       editing,
@@ -526,7 +537,7 @@ export function useAutomationLaneGestures({
 
   const onDoubleClick = useCallback(
     (e: ReactPointerEvent<SVGSVGElement>): void => {
-      if (readOnly) return;
+      if (readOnly) return timelineReadOnlyPress?.();
       e.stopPropagation();
       e.preventDefault();
       const onPoint = hitIndex(e.clientX, e.clientY);
@@ -550,7 +561,7 @@ export function useAutomationLaneGestures({
       const { t, v } = pointAt(e.clientX, e.clientY);
       commitPoints(mergeInsertPoint(lane.points, t, v), true);
     },
-    [lane, pointAt, commitPoints, readOnly, hitIndex, segmentIndex],
+    [lane, pointAt, commitPoints, readOnly, timelineReadOnlyPress, hitIndex, segmentIndex],
   );
 
   return {

package/src/player/components/useTimelineKeyframeHandlers.ts

@@ -93,6 +93,7 @@ interface TimelineKeyframeRetimeCoordinator {
    * is a viewport-wide question, not a per-keyframe one.
    */
   latest: PendingTimelineKeyframeRetime | null;
+  cancelActive: () => void;
 }
 
 type TimelineRetimePointerEvent = Pick<
@@ -115,6 +116,7 @@ function getRetimeCoordinator(owner: EventTarget): TimelineKeyframeRetimeCoordin
     preview: null,
     previewListeners: new Set(),
     latest: null,
+    cancelActive: () => {},
   };
   keyframeRetimeCoordinators.set(owner, coordinator);
   return coordinator;
@@ -186,6 +188,10 @@ export interface TimelineKeyframeRetimeHandle {
  * Starts a keyframe retime on the stable timeline viewport. The row/button is
  * only an entry point: window listeners own the gesture through virtualization.
  */
+export function cancelTimelineKeyframeRetime(viewport: HTMLElement | null): void {
+  if (viewport) keyframeRetimeCoordinators.get(viewport)?.cancelActive();
+}
+
 export function beginTimelineKeyframeRetime(
   input: TimelineKeyframeRetimeInput,
 ): TimelineKeyframeRetimeHandle {
@@ -256,6 +262,7 @@ export function beginTimelineKeyframeRetime(
     teardownListeners: null,
   };
   coordinator.actor = actor;
+  coordinator.cancelActive = () => cancel(actor);
 
   const matchesPointer = (event: TimelineRetimePointerEvent) =>
     actor.pointerId === null || event.pointerId === actor.pointerId;