fix: allow standalone timeline rendering (#1617)

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

@@ -1,5 +1,11 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach } from "vitest";
 import { describe, it, expect } from "vitest";
 import {
+  Timeline,
   formatTimelineTickLabel,
   generateTicks,
   getDefaultDroppedTrack,
@@ -14,6 +20,41 @@ import {
 } from "./Timeline";
 import { RULER_H, TRACK_H } from "./timelineLayout";
 import { formatTime } from "../lib/time";
+import { usePlayerStore } from "../store/playerStore";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
+describe("Timeline provider boundary", () => {
+  it("renders the public Timeline export without TimelineEditProvider", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    Object.defineProperty(host, "clientWidth", {
+      configurable: true,
+      value: 640,
+    });
+
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [{ id: "clip-1", tag: "div", start: 0, duration: 2, track: 0 }],
+    });
+
+    const root = createRoot(host);
+
+    expect(() => {
+      act(() => {
+        root.render(React.createElement(Timeline));
+      });
+    }).not.toThrow();
+
+    act(() => root.unmount());
+  });
+});
 
 describe("generateTicks", () => {
   it("returns empty arrays for duration <= 0", () => {

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

@@ -21,7 +21,7 @@ import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./us
 import type { TrackVisualStyle } from "./timelineIcons";
 import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { isMusicTrack } from "../../utils/timelineInspector";
 
 function ClipLabel({ element, color }: { element: TimelineElement; color: string }) {
@@ -151,7 +151,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   beatAnalysis,
 }: TimelineCanvasProps) {
   const { onResizeElement, onMoveElement, onRazorSplit, onRazorSplitAll } =
-    useTimelineEditContext();
+    useTimelineEditContextOptional();
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 
 // Props a parent (e.g. NLELayout) may pass to <Timeline> to intercept edits —
@@ -15,7 +15,7 @@ export type TimelineEditOverrides = Pick<
 export function useResolvedTimelineEditCallbacks(
   overrides: TimelineEditOverrides,
 ): TimelineEditCallbacks {
-  const ctx = useTimelineEditContext();
+  const ctx = useTimelineEditContextOptional();
   const { onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement } = overrides;
   return useMemo(
     () => ({