@hyperframes/studio 0.8.96 → 0.8.97

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/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,
@@ -180,16 +184,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

@@ -37,4 +37,6 @@ export interface TimelineProps
   showAudioEffects?: boolean;
   showKeyframes?: boolean;
   trackPadding?: TimelineTrackPadding;
+  readOnly?: boolean;
+  onReadOnlyPress?: () => void;
 }

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;

package/src/player/components/useTimelineProviderState.tsx

@@ -27,7 +27,10 @@ import {
   useTimelineDisplayLayout,
   useTimelineTrackLayout,
 } from "./useTimelineTrackLayout";
-import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
+import {
+  cancelTimelineKeyframeRetime,
+  useTimelineKeyframeHandlers,
+} from "./useTimelineKeyframeHandlers";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
 import { useTimelineRazorInteraction } from "./TimelineRazorInteraction";
 import { useTimelinePerformanceTelemetry } from "./useTimelinePerformanceTelemetry";
@@ -40,6 +43,12 @@ import { useTimelineActiveClips } from "./useTimelineActiveClips";
 import { useTimelineLaneMoveRefresh } from "./useTimelineLaneMoveRefresh";
 import { useTimelineLogicalFocus } from "./useTimelineLogicalFocus";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import {
+  refuseWhenReadOnly,
+  useAbandonEditsOnReadOnly,
+  useTimelineReadOnlyPress,
+} from "./timelineReadOnly";
+import { cancelBeatDrag } from "./BeatStrip";
 export function useTimelineProviderState({
   onSeek,
   onDrillDown,
@@ -92,6 +101,14 @@ export function useTimelineProviderState({
   });
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
   const editContext = useTimelineEditContextOptional();
+  const readOnlyPress = useTimelineReadOnlyPress();
+  const oneShotEdits = refuseWhenReadOnly(readOnlyPress, {
+    onBlockedEditAttempt,
+    onRazorSplitAll,
+    onToggleTrackHidden: editContext.onToggleTrackHidden,
+    onTogglePropertyGroupKeyframe: editContext.onTogglePropertyGroupKeyframe,
+    onRazorSplit: editContext.onRazorSplit,
+  });
   const refreshAfterLaneMove = useTimelineLaneMoveRefresh();
   useMusicBeatAnalysis();
   const timelineElements = usePlayerStore((s) => s.elements);
@@ -198,7 +215,7 @@ export function useTimelineProviderState({
     onMoveElements: pinnedOnMoveElements,
     onResizeElement: pinnedOnResizeElement,
     onResizeElements: pinnedOnResizeElements,
-    onBlockedEditAttempt,
+    onBlockedEditAttempt: oneShotEdits.onBlockedEditAttempt,
     onSeek,
     setShowPopover,
     setRangeSelectionRef,
@@ -218,6 +235,7 @@ export function useTimelineProviderState({
     onBlockDrop: pinnedOnBlockDrop,
     onCompositionDrop: pinnedOnCompositionDrop,
     sessionEpoch,
+    readOnlyPress,
   });
   const displayLayout = useTimelineDisplayLayout(draggedClip, trackOrder, rowGeometry);
   const { resizingElementIds, getPreviewElement, draggedElement, multiDragPreview, snapGuide } =
@@ -337,7 +355,7 @@ export function useTimelineProviderState({
       scrollRef,
       contentOrigin,
       pixelsPerSecond: pps,
-      onSplitAll: onRazorSplitAll,
+      onSplitAll: oneShotEdits.onRazorSplitAll,
     });
   const overlaysProps = useTimelineOverlaysState({
     elements: timelineElements,
@@ -405,6 +423,14 @@ export function useTimelineProviderState({
     handlePointerCancel,
   } = overlaysProps;
   const { rangeSelection, setRangeSelection } = overlays;
+  useAbandonEditsOnReadOnly(readOnlyPress !== null, () => {
+    setDraggedClip(null);
+    cancelBeatDrag();
+    cancelTimelineKeyframeRetime(scrollRef.current);
+    setClipContextMenu(null);
+    setKfContextMenu(null);
+    overlays.onDismissGapContextMenu();
+  });
   const laneGapStrips = useTimelineGapHighlights({
     gapHighlight,
     tracks,
@@ -484,22 +510,24 @@ export function useTimelineProviderState({
     onClickKeyframe,
     onShiftClickKeyframe,
     onMoveKeyframe,
-    onContextMenuKeyframe,
-    onContextMenuClip,
-    onContextMenuLane: (e: React.MouseEvent, track: number, time: number) => {
-      if (draggedClip?.started || resizingClip) return;
-      setClipContextMenu(null);
-      openGapMenu({ x: e.clientX, y: e.clientY, track, time });
-    },
+    ...refuseWhenReadOnly(readOnlyPress, {
+      onContextMenuKeyframe,
+      onContextMenuClip,
+      onContextMenuLane: (e: React.MouseEvent, track: number, time: number) => {
+        if (draggedClip?.started || resizingClip) return;
+        setClipContextMenu(null);
+        openGapMenu({ x: e.clientX, y: e.clientY, track, time });
+      },
+    }),
     onResizeElement,
     onMoveElement,
     beatDragging,
     draggedElement,
     snapGuide,
     multiDragPreview,
-    onToggleTrackHidden: editContext.onToggleTrackHidden,
-    onTogglePropertyGroupKeyframe: editContext.onTogglePropertyGroupKeyframe,
-    onRazorSplit: editContext.onRazorSplit,
+    onToggleTrackHidden: oneShotEdits.onToggleTrackHidden,
+    onTogglePropertyGroupKeyframe: oneShotEdits.onTogglePropertyGroupKeyframe,
+    onRazorSplit: oneShotEdits.onRazorSplit,
     onRazorSplitAll: editContext.onRazorSplitAll,
   };
   const holdNewClipContent = timelineFocus.rowVirtualizationActive && viewport.isScrolling;
@@ -515,7 +543,7 @@ export function useTimelineProviderState({
   );
   const timelineMeta = buildTimelineShellMeta({
     isDragOver: assetDrop.isDragOver,
-    hasFileDrop: !!onFileDrop,
+    hasFileDrop: !!onFileDrop && !readOnlyPress,
     drop: {
       onDragOver: assetDrop.handleAssetDragOver,
       onDragLeave: assetDrop.handleAssetDragLeave,

package/src/player/hooks/useShadowPreviewReload.ts

@@ -118,9 +118,9 @@ export function useShadowPreviewReload({
       const liveTime = live?.getTime();
       const playing = usePlayerStore.getState().isPlaying;
       live?.pause();
-      // The store takes the new document's timeline only now that it is the one on screen.
-      pending.commit();
+      // The store takes the new document's timeline only now that it is the one on screen, and reads it there.
       iframeRef.current = shadow;
+      pending.commit();
       shadowIframeRef.current = null;
       attachIframeShortcutListeners();
       applyPreviewAudioState();