@hyperframes/studio 0.8.58 → 0.8.59

package/src/player/components/TimelineOverlays.tsx

@@ -4,7 +4,7 @@ import { EditPopover } from "./EditModal";
 import { KeyframeDiamondContextMenu } from "./KeyframeDiamondContextMenu";
 import { ClipContextMenu } from "./ClipContextMenu";
 import { TrackGapContextMenu } from "./TrackGapContextMenu";
-import { TimelineShortcutHint } from "./TimelineShortcutHint";
+import { TimelineShortcutHint as TimelineShortcutHintImpl } from "./TimelineShortcutHint";
 import { copyTextToClipboard } from "../../utils/clipboard";
 import { trackStudioSegmentEaseEdit } from "../../telemetry/events";
 import { useTimelineContext } from "./TimelineProvider";
@@ -17,7 +17,6 @@ interface TimelineContextTargetInput {
   elements: readonly TimelineElement[];
 }
 
-/** The captured project session and current selection jointly own a context target. */
 export function resolveTimelineContextElement({
   capturedElement,
   targetSessionEpoch,
@@ -31,192 +30,192 @@ export function resolveTimelineContextElement({
   return elements.find((element) => (element.key ?? element.id) === identity) ?? null;
 }
 
-// The timeline's floating overlays, rendered as siblings above the scroll area:
-// the shortcut hint, the range-edit popover, the keyframe-diamond context menu,
-// and the clip context menu.
-export function TimelineOverlays() {
+export function TimelineShortcutHintOverlay() {
+  const { state } = useTimelineContext();
+  const { showShortcutHint, showPopover, rangeSelection, theme } = state.overlays;
+  if (!showShortcutHint || showPopover || rangeSelection) return null;
+  return <TimelineShortcutHintImpl theme={theme} />;
+}
+
+export function TimelineEditPopoverOverlay() {
+  const { state } = useTimelineContext();
+  const { showPopover, rangeSelection, setShowPopover, setRangeSelection } = state.overlays;
+  if (!showPopover || !rangeSelection) return null;
+  return (
+    <EditPopover
+      rangeStart={rangeSelection.start}
+      rangeEnd={rangeSelection.end}
+      anchorX={rangeSelection.anchorX}
+      anchorY={rangeSelection.anchorY}
+      onClose={() => {
+        setShowPopover(false);
+        setRangeSelection(null);
+      }}
+    />
+  );
+}
+
+export function TimelineKeyframeMenuOverlay() {
   const { state, actions } = useTimelineContext();
-  const overlayProps = state.overlays;
-  const {
-    elements,
-    elementsRef,
-    theme,
-    showShortcutHint,
-    showPopover,
-    rangeSelection,
-    setShowPopover,
-    setRangeSelection,
-    kfContextMenu,
-    setKfContextMenu,
-    onDeleteKeyframe,
-    onDeleteAllKeyframes,
-    onMoveKeyframeToPlayhead,
-    clipContextMenu,
-    setClipContextMenu,
-    currentTime,
-    onSplitElement,
-    pinZoomBeforeEdit,
-    onDeleteElement,
-    onCopyClip,
-    onPasteClip,
-    onDuplicateClip,
-    canPasteClip,
-    gapContextMenu,
-    onDismissGapContextMenu,
-    onCloseTrackGap,
-    onCloseAllTrackGaps,
-    onHoverGapAction,
-  } = overlayProps;
+  const overlay = state.overlays;
+  const { kfContextMenu, setKfContextMenu } = overlay;
   const { selectedElementId, sessionEpoch, keyframeCache } = state;
-  const kfTargetSessionEpoch = kfContextMenu?.sessionEpoch;
-  const clipTargetSessionEpoch = clipContextMenu?.sessionEpoch;
-  const keyframeElement = kfContextMenu
+  const targetEpoch = kfContextMenu?.sessionEpoch;
+  const element = kfContextMenu
     ? resolveTimelineContextElement({
         capturedElement: kfContextMenu.element,
-        targetSessionEpoch: kfTargetSessionEpoch,
+        targetSessionEpoch: targetEpoch,
         sessionEpoch,
         selectedElementId,
-        elements,
+        elements: overlay.elements,
       })
     : null;
-  const clipElement = clipContextMenu
+  useEffect(() => {
+    if (kfContextMenu && !element) setKfContextMenu(null);
+  }, [element, kfContextMenu, setKfContextMenu]);
+  if (!kfContextMenu || !element) return null;
+  const readCurrentElement = () =>
+    resolveTimelineContextElement({
+      capturedElement: element,
+      targetSessionEpoch: targetEpoch,
+      sessionEpoch,
+      selectedElementId,
+      elements: overlay.elementsRef.current,
+    });
+  const menu = kfContextMenu;
+  return (
+    <KeyframeDiamondContextMenu
+      state={{ ...menu, element }}
+      onClose={() => setKfContextMenu(null)}
+      onDelete={(...args) => {
+        if (readCurrentElement()) overlay.onDeleteKeyframe?.(...args);
+      }}
+      onDeleteAll={(_element, animationId) => {
+        const current = readCurrentElement();
+        if (current) overlay.onDeleteAllKeyframes?.(current, animationId);
+      }}
+      onMoveToPlayhead={
+        overlay.onMoveKeyframeToPlayhead
+          ? (_element, ...args) => {
+              const current = readCurrentElement();
+              if (current) overlay.onMoveKeyframeToPlayhead?.(current, ...args);
+            }
+          : undefined
+      }
+      onEditEase={
+        // Routed to the same focused-ease-segment path a segment click takes,
+        // so the menu advertises the editor that exists rather than growing a
+        // second one. Offered only for a keyframe that names a tween to focus.
+        menu.animationId !== undefined && menu.tweenPercentage !== undefined
+          ? (elementId, keyframe) => {
+              if (keyframe.animationId === undefined || keyframe.tweenPercentage === undefined)
+                return;
+              actions.setFocusedEaseSegment({
+                animationId: keyframe.animationId,
+                collidingAnimationTargets: keyframe.collidingAnimationTargets,
+                tweenPercentage: keyframe.tweenPercentage,
+                elementId,
+              });
+              trackStudioSegmentEaseEdit({ action: "open" });
+            }
+          : undefined
+      }
+      onCopyProperties={(elementId, keyframe) => {
+        const entry = keyframeCache.get(elementId);
+        // Match the existing keyframe lookup tolerance so copied properties
+        // follow the same nearby-keyframe selection as the editor.
+        const keyframeValue = entry?.keyframes.find(
+          (item) => Math.abs(item.percentage - keyframe.percentage) < 0.5,
+        );
+        if (!keyframeValue) return false;
+        return copyTextToClipboard(JSON.stringify(keyframeValue.properties, null, 2));
+      }}
+    />
+  );
+}
+
+export function TimelineClipMenuOverlay() {
+  const { state } = useTimelineContext();
+  const overlay = state.overlays;
+  const { clipContextMenu, setClipContextMenu } = overlay;
+  const { selectedElementId, sessionEpoch } = state;
+  const targetEpoch = clipContextMenu?.sessionEpoch;
+  const element = clipContextMenu
     ? resolveTimelineContextElement({
         capturedElement: clipContextMenu.element,
-        targetSessionEpoch: clipTargetSessionEpoch,
+        targetSessionEpoch: targetEpoch,
         sessionEpoch,
         selectedElementId,
-        elements,
+        elements: overlay.elements,
       })
     : null;
-  const readCurrentElement = (element: TimelineElement, targetSessionEpoch: number | undefined) =>
+  useEffect(() => {
+    if (clipContextMenu && !element) setClipContextMenu(null);
+  }, [element, clipContextMenu, setClipContextMenu]);
+  if (!clipContextMenu || !element) return null;
+  const readCurrentElement = () =>
     resolveTimelineContextElement({
       capturedElement: element,
-      targetSessionEpoch,
+      targetSessionEpoch: targetEpoch,
       sessionEpoch,
       selectedElementId,
-      elements: elementsRef.current,
+      elements: overlay.elementsRef.current,
     });
+  const menu = clipContextMenu;
+  return (
+    <ClipContextMenu
+      x={menu.x}
+      y={menu.y}
+      element={element}
+      currentTime={overlay.currentTime}
+      onClose={() => setClipContextMenu(null)}
+      onSplit={(_element, time) => {
+        const current = readCurrentElement();
+        if (current) overlay.onSplitElement?.(current, time);
+      }}
+      onDelete={() => {
+        const current = readCurrentElement();
+        if (!current) return;
+        overlay.pinZoomBeforeEdit();
+        overlay.onDeleteElement?.(current);
+      }}
+      onCopy={overlay.onCopyClip}
+      onPaste={overlay.onPasteClip}
+      onDuplicate={overlay.onDuplicateClip}
+      canPaste={overlay.canPasteClip?.() ?? false}
+    />
+  );
+}
 
-  useEffect(() => {
-    if (kfContextMenu && !keyframeElement) setKfContextMenu(null);
-  }, [keyframeElement, kfContextMenu, setKfContextMenu]);
-
-  useEffect(() => {
-    if (clipContextMenu && !clipElement) setClipContextMenu(null);
-  }, [clipContextMenu, clipElement, setClipContextMenu]);
+export function TimelineGapMenuOverlay() {
+  const { state } = useTimelineContext();
+  const menu = state.overlays.gapContextMenu;
+  const overlay = state.overlays;
+  if (!menu) return null;
+  return (
+    <TrackGapContextMenu
+      x={menu.x}
+      y={menu.y}
+      gapWidth={menu.gapWidth}
+      canCloseGap={menu.canCloseGap}
+      canCloseAllGaps={menu.canCloseAllGaps}
+      hasAnyGaps={menu.hasAnyGaps}
+      onClose={overlay.onDismissGapContextMenu}
+      onCloseGap={overlay.onCloseTrackGap}
+      onCloseAllGaps={overlay.onCloseAllTrackGaps}
+      onHoverAction={overlay.onHoverGapAction}
+    />
+  );
+}
 
+export function TimelineOverlays() {
   return (
     <>
-      {showShortcutHint && !showPopover && !rangeSelection && (
-        <TimelineShortcutHint theme={theme} />
-      )}
-
-      {showPopover && rangeSelection && (
-        <EditPopover
-          rangeStart={rangeSelection.start}
-          rangeEnd={rangeSelection.end}
-          anchorX={rangeSelection.anchorX}
-          anchorY={rangeSelection.anchorY}
-          onClose={() => {
-            setShowPopover(false);
-            setRangeSelection(null);
-          }}
-        />
-      )}
-
-      {kfContextMenu && keyframeElement && (
-        <KeyframeDiamondContextMenu
-          state={{ ...kfContextMenu, element: keyframeElement }}
-          onClose={() => setKfContextMenu(null)}
-          onDelete={(...args) => {
-            if (!readCurrentElement(keyframeElement, kfTargetSessionEpoch)) return;
-            onDeleteKeyframe?.(...args);
-          }}
-          onDeleteAll={(_element, animationId) => {
-            const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
-            if (element) onDeleteAllKeyframes?.(element, animationId);
-          }}
-          onMoveToPlayhead={
-            onMoveKeyframeToPlayhead
-              ? (_element, ...args) => {
-                  const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
-                  if (element) onMoveKeyframeToPlayhead(element, ...args);
-                }
-              : undefined
-          }
-          // Routed to the same focused-ease-segment path a segment click takes,
-          // so the menu advertises the editor that exists rather than growing a
-          // second one. Offered only for a keyframe that names a tween to focus.
-          onEditEase={
-            kfContextMenu.animationId !== undefined && kfContextMenu.tweenPercentage !== undefined
-              ? (elementId, keyframe) => {
-                  if (
-                    keyframe.animationId === undefined ||
-                    keyframe.tweenPercentage === undefined
-                  ) {
-                    return;
-                  }
-                  actions.setFocusedEaseSegment({
-                    animationId: keyframe.animationId,
-                    collidingAnimationTargets: keyframe.collidingAnimationTargets,
-                    tweenPercentage: keyframe.tweenPercentage,
-                    elementId,
-                  });
-                  trackStudioSegmentEaseEdit({ action: "open" });
-                }
-              : undefined
-          }
-          onCopyProperties={(elementId, keyframe) => {
-            const entry = keyframeCache.get(elementId);
-            // Tolerance match on clip-%, the same basis the cache is keyed on —
-            // an exact float compare misses a keyframe the menu just opened over.
-            const kf = entry?.keyframes.find(
-              (item) => Math.abs(item.percentage - keyframe.percentage) < 0.5,
-            );
-            if (!kf) return false;
-            return copyTextToClipboard(JSON.stringify(kf.properties, null, 2));
-          }}
-        />
-      )}
-
-      {clipContextMenu && clipElement && (
-        <ClipContextMenu
-          x={clipContextMenu.x}
-          y={clipContextMenu.y}
-          element={clipElement}
-          currentTime={currentTime}
-          onClose={() => setClipContextMenu(null)}
-          onSplit={(_element, time) => {
-            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
-            if (element) onSplitElement?.(element, time);
-          }}
-          onDelete={() => {
-            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
-            if (!element) return;
-            pinZoomBeforeEdit();
-            onDeleteElement?.(element);
-          }}
-          onCopy={onCopyClip}
-          onPaste={onPasteClip}
-          onDuplicate={onDuplicateClip}
-          canPaste={canPasteClip?.() ?? false}
-        />
-      )}
-
-      {gapContextMenu && (
-        <TrackGapContextMenu
-          x={gapContextMenu.x}
-          y={gapContextMenu.y}
-          gapWidth={gapContextMenu.gapWidth}
-          canCloseGap={gapContextMenu.canCloseGap}
-          canCloseAllGaps={gapContextMenu.canCloseAllGaps}
-          hasAnyGaps={gapContextMenu.hasAnyGaps}
-          onClose={onDismissGapContextMenu}
-          onCloseGap={onCloseTrackGap}
-          onCloseAllGaps={onCloseAllTrackGaps}
-          onHoverAction={onHoverGapAction}
-        />
-      )}
+      <TimelineShortcutHintOverlay />
+      <TimelineEditPopoverOverlay />
+      <TimelineKeyframeMenuOverlay />
+      <TimelineClipMenuOverlay />
+      <TimelineGapMenuOverlay />
     </>
   );
 }

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

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineContextValue } from "./TimelineProvider";
+import { TimelineContextProvider, useTimelineContext } from "./TimelineProvider";
+import { TimelineClipMenu, TimelineLanes, TimelinePlayhead, TimelineRuler } from "./TimelineParts";
+import { createHappyDomRootHarness } from "./testRootHarness";
+
+vi.mock("./TimelineRuler", () => ({
+  TimelineRuler: () => <div data-testid="timeline-ruler" />,
+}));
+vi.mock("./TimelineLanes", () => ({
+  TimelineLanes: ({ renderClipContent }: { renderClipContent?: unknown }) => {
+    const { state } = useTimelineContext();
+    return (
+      <div data-testid="timeline-clip">
+        {state.elements[0]?.id}
+        {renderClipContent ? <span data-testid="lane-render-bridge" /> : null}
+      </div>
+    );
+  },
+}));
+
+const { mount } = createHappyDomRootHarness();
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("Timeline parts composition", () => {
+  it("reads a shared provider context when composed without Timeline or Frame", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = mount(host);
+    const onSplitElement = vi.fn();
+    const element = { id: "clip-a", key: "clip-a", tag: "video", start: 0, duration: 2, track: 0 };
+    const value = {
+      state: {
+        timelineReady: true,
+        elements: [element],
+        selectedElementId: "clip-a",
+        sessionEpoch: 1,
+        keyframeCache: new Map(),
+        canvas: { isScrubbing: false } as TimelineContextValue["state"]["canvas"],
+        overlays: {
+          elements: [element],
+          elementsRef: { current: [element] },
+          theme: {} as TimelineContextValue["state"]["overlays"]["theme"],
+          showShortcutHint: false,
+          showPopover: false,
+          rangeSelection: null,
+          setShowPopover: vi.fn(),
+          setRangeSelection: vi.fn(),
+          kfContextMenu: null,
+          setKfContextMenu: vi.fn(),
+          onDeleteKeyframe: vi.fn(),
+          onDeleteAllKeyframes: vi.fn(),
+          onMoveKeyframeToPlayhead: vi.fn(),
+          clipContextMenu: { x: 10, y: 10, element, sessionEpoch: 1 },
+          setClipContextMenu: vi.fn(),
+          currentTime: 1,
+          onSplitElement,
+          pinZoomBeforeEdit: vi.fn(),
+          gapContextMenu: null,
+          onDismissGapContextMenu: vi.fn(),
+          onCloseTrackGap: vi.fn(),
+          onCloseAllTrackGaps: vi.fn(),
+          onHoverGapAction: vi.fn(),
+        },
+      },
+      actions: {
+        renderClipContent: vi.fn(),
+        renderClipOverlay: undefined,
+        setFocusedEaseSegment: vi.fn(),
+      },
+      meta: { razorGuide: null } as TimelineContextValue["meta"],
+    } satisfies TimelineContextValue;
+
+    try {
+      act(() => {
+        root.render(
+          <TimelineContextProvider value={value}>
+            <TimelineRuler />
+            <TimelineLanes />
+            <TimelinePlayhead />
+            <TimelineClipMenu />
+          </TimelineContextProvider>,
+        );
+      });
+
+      expect(host.querySelector("[data-testid='timeline-ruler']")).not.toBeNull();
+      expect(host.querySelector("[data-testid='timeline-clip']")?.textContent).toBe("clip-a");
+      expect(host.querySelector("[data-testid='lane-render-bridge']")).not.toBeNull();
+      expect(document.querySelector("[role='menu'][aria-label='Clip actions']")).not.toBeNull();
+    } finally {
+      act(() => root.unmount());
+    }
+  });
+});

package/src/player/components/TimelineParts.tsx

@@ -0,0 +1,74 @@
+import { TimelineCanvas as TimelineCanvasImpl } from "./TimelineCanvas";
+import {
+  TimelineClipMenuOverlay as TimelineClipMenuImpl,
+  TimelineEditPopoverOverlay as TimelineEditPopoverImpl,
+  TimelineGapMenuOverlay as TimelineGapMenuImpl,
+  TimelineKeyframeMenuOverlay as TimelineKeyframeMenuImpl,
+  TimelineShortcutHintOverlay as TimelineShortcutHintImpl,
+} from "./TimelineOverlays";
+import { TimelineLanes as TimelineLanesImpl } from "./TimelineLanes";
+import { PlayheadIndicator } from "./PlayheadIndicator";
+import { useTimelineContext } from "./TimelineProvider";
+import { TimelineEmptyState } from "./TimelineEmptyState";
+import { TimelineRulerPart } from "./TimelineRulerPart";
+
+/** The provider-backed canvas shell. */
+export function TimelineFrame() {
+  return <TimelineCanvasImpl />;
+}
+
+/** The provider-backed ruler. */
+export const TimelineRuler = TimelineRulerPart;
+
+/**
+ * The provider-backed lane renderer. TimelineFrame remains the composed Studio
+ * canvas; this part is exported for hosts that own the canvas arrangement.
+ */
+export function TimelineLanes() {
+  const { state, actions } = useTimelineContext();
+  const props = state.canvas;
+  return (
+    <TimelineLanesImpl
+      {...props}
+      renderClipContent={actions.renderClipContent}
+      renderClipOverlay={actions.renderClipOverlay}
+    />
+  );
+}
+
+/** The provider-backed playhead indicator. */
+export function TimelinePlayhead() {
+  const { state } = useTimelineContext();
+  const props = state.canvas;
+  return <PlayheadIndicator scrubbing={props.isScrubbing} />;
+}
+
+/** The provider-backed razor guide. */
+export function TimelineRazorGuide() {
+  const { meta } = useTimelineContext();
+  return meta.razorGuide;
+}
+
+/** The composed overlay surface used by the Studio variant. */
+export { TimelineOverlays } from "./TimelineOverlays";
+
+export function TimelineEmptyStatePart() {
+  const { meta } = useTimelineContext();
+  return <TimelineEmptyState {...meta.emptyState} />;
+}
+
+export function TimelineShortcutHint() {
+  return <TimelineShortcutHintImpl />;
+}
+export function TimelineEditPopover() {
+  return <TimelineEditPopoverImpl />;
+}
+export function TimelineClipMenu() {
+  return <TimelineClipMenuImpl />;
+}
+export function TimelineKeyframeMenu() {
+  return <TimelineKeyframeMenuImpl />;
+}
+export function TimelineGapMenu() {
+  return <TimelineGapMenuImpl />;
+}

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

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Timeline } from "./Timeline";
+import { usePlayerStore } from "../store/playerStore";
+import { useTimelineContext } from "./TimelineProvider";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
+function TimelinePartsVariant() {
+  const { meta } = useTimelineContext();
+  return React.createElement(
+    "div",
+    meta.containerProps,
+    React.createElement(
+      "div",
+      meta.viewportProps,
+      React.createElement(Timeline.Frame),
+      React.createElement(Timeline.RazorGuide),
+    ),
+    React.createElement(Timeline.Overlays),
+  );
+}
+
+describe("Timeline provider boundary", () => {
+  it("keeps the composed Timeline markup equal to its provider parts", () => {
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [{ id: "parity-clip", tag: "div", start: 0, duration: 2, track: 0 }],
+    });
+    const composedHost = document.createElement("div");
+    const partsHost = document.createElement("div");
+    document.body.append(composedHost, partsHost);
+    const composedRoot = createRoot(composedHost);
+    const partsRoot = createRoot(partsHost);
+    act(() => {
+      composedRoot.render(React.createElement(Timeline));
+      partsRoot.render(
+        React.createElement(Timeline.Provider, null, React.createElement(TimelinePartsVariant)),
+      );
+    });
+    const normalizeMarkup = (markup: string) =>
+      markup.replaceAll(/timeline-lanes_[^"]+/g, "timeline-lanes");
+    expect(normalizeMarkup(partsHost.innerHTML)).toBe(normalizeMarkup(composedHost.innerHTML));
+    act(() => {
+      composedRoot.unmount();
+      partsRoot.unmount();
+    });
+  });
+});

package/src/player/components/TimelineProvider.tsx

@@ -17,6 +17,8 @@ import type { Rect } from "../../utils/marqueeGeometry";
 import type { ResizingClipState } from "./useTimelineClipDrag";
 import type { TimelineLaneBaseProps } from "./timelineLaneProps";
 import type { TimelineLaneGapStrips } from "./useTimelineGapHighlights";
+import type { MultiDragPreviewInput } from "./timelineMultiDragPreview";
+import type { TimelineSnapTarget } from "./timelineSnapping";
 import type { TimelineElement } from "../store/playerStore";
 import type { KeyframeCacheEntry } from "../store/keyframeSlice";
 import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
@@ -24,6 +26,10 @@ import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import type { KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
 import { useTimelineProviderState } from "./useTimelineProviderState";
+import {
+  TimelineEditProvider,
+  useTimelineEditContextValue,
+} from "../../contexts/TimelineEditContext";
 
 export type TimelineCanvasState = Omit<
   TimelineLaneBaseProps,
@@ -51,6 +57,13 @@ export type TimelineCanvasState = Omit<
   beatDragging: boolean;
   onResizeElement: TimelineEditCallbacks["onResizeElement"];
   onMoveElement: TimelineEditCallbacks["onMoveElement"];
+  draggedElement: TimelineElement | null;
+  snapGuide: TimelineSnapTarget | null;
+  multiDragPreview: MultiDragPreviewInput | null;
+  onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
+  onTogglePropertyGroupKeyframe: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onRazorSplit: TimelineEditCallbacks["onRazorSplit"];
+  onRazorSplitAll: TimelineEditCallbacks["onRazorSplitAll"];
 };
 
 export interface ClipContextMenuState {
@@ -166,6 +179,18 @@ export interface TimelineContextValue {
 const TimelineContext = createContext<TimelineContextValue | null>(null);
 
 export function TimelineProvider({ children, ...props }: TimelineProps & { children: ReactNode }) {
+  const editContext = useTimelineEditContextValue();
+  if (!editContext) {
+    return (
+      <TimelineEditProvider value={props}>
+        <TimelineProviderState {...props}>{children}</TimelineProviderState>
+      </TimelineEditProvider>
+    );
+  }
+  return <TimelineProviderState {...props}>{children}</TimelineProviderState>;
+}
+
+function TimelineProviderState({ children, ...props }: TimelineProps & { children: ReactNode }) {
   const value = useTimelineProviderState(props);
   return <TimelineContext.Provider value={value}>{children}</TimelineContext.Provider>;
 }

package/src/player/components/TimelineRazorInteraction.tsx

@@ -50,7 +50,7 @@ export function useTimelineRazorInteraction({
   return { razorGuideX, updateRazorGuide, clearRazorGuide, splitAllAtPointer };
 }
 
-export function TimelineRazorGuide({ x }: { x: number }) {
+export function TimelineRazorGuideOverlay({ x }: { x: number }) {
   return (
     <div
       className="absolute top-0 bottom-0 pointer-events-none z-10"