@hyperframes/studio 0.8.58 → 0.8.60

package/src/player/components/TimelineGroupHeader.tsx

@@ -55,21 +55,24 @@ function GroupNameButton({
       // No `flex-1`: the row's control group owns the slack now (`ml-auto`), so
       // claiming it here would push the controls off the right edge — and the
       // count with them, since it rides inside this button.
-      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-white hover:text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+      className="flex h-6 min-w-0 items-center gap-1.5 rounded-sm border-0 bg-transparent p-0 text-left text-[11px] text-[var(--timeline-text-solid)] hover:text-[var(--timeline-accent)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
       onPointerDown={(event) => event.stopPropagation()}
       onClick={(event) => {
         event.stopPropagation();
         onOpenFxRack();
       }}
     >
-      <span aria-hidden="true" className="shrink-0 text-[12px] leading-none text-white/50">
+      <span
+        aria-hidden="true"
+        className="shrink-0 text-[12px] leading-none text-[var(--timeline-track-label)]"
+      >
         ▤
       </span>
       <span title={label} className="min-w-0 truncate text-left font-medium leading-tight">
         {label}
       </span>
       <span
-        className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
+        className="shrink-0 rounded-full bg-[var(--timeline-tick-major)] px-1 text-[9px] leading-[14px] tabular-nums text-[var(--timeline-handle)]"
         aria-hidden="true"
         title={`${memberCount} tracks`}
       >
@@ -103,7 +106,7 @@ export function TimelineGroupHeader({
       style={{
         width: columnWidth,
         height: TRACK_H,
-        color: "#ffffff",
+        color: "var(--timeline-text-solid)",
         background: theme.gutterBackground,
         borderRight: `1px solid ${theme.gutterBorder}`,
       }}
@@ -119,8 +122,10 @@ export function TimelineGroupHeader({
         // 13px mono, matching the property panel's preset-run caret
         // (`hf-fx-preset-run-caret`) — the same disclosure, so the same glyph
         // at the same size rather than a smaller one unique to this row.
-        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-          isExpanded ? "text-white" : "text-white/55 hover:text-white"
+        className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 font-mono text-[13px] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+          isExpanded
+            ? "text-[var(--timeline-text-solid)]"
+            : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
         }`}
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
@@ -157,8 +162,10 @@ export function TimelineGroupHeader({
             aria-label={`${isLaneOpen ? "Hide" : "Show"} ${label} lanes`}
             title={`${isLaneOpen ? "Hide" : "Show"} lanes`}
             // Anchored right, matching every other header's lane toggle.
-            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] ${
-              isLaneOpen ? "text-[#3CE6AC]" : "text-white/55 hover:text-white"
+            className={`ml-auto flex h-6 items-center justify-center gap-0.5 rounded border-0 bg-transparent px-1 text-[11px] leading-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)] ${
+              isLaneOpen
+                ? "text-[var(--timeline-accent)]"
+                : "text-[var(--timeline-handle)] hover:text-[var(--timeline-text-solid)]"
             }`}
             onPointerDown={(event) => event.stopPropagation()}
             onClick={(event) => {
@@ -167,7 +174,9 @@ export function TimelineGroupHeader({
             }}
           >
             <span aria-hidden="true">∿</span>
-            <span className="text-[9px] tabular-nums text-white/55">{laneCount}</span>
+            <span className="text-[9px] tabular-nums text-[var(--timeline-handle)]">
+              {laneCount}
+            </span>
           </button>
         )}
       </div>

package/src/player/components/TimelineGroupLaneLabels.tsx

@@ -64,7 +64,7 @@ export function TimelineGroupLaneLabels({
             key={lane.target}
             data-group-lane-label={lane.target}
             aria-label={`Show ${groupLabel} ${parts.name}${parts.param ? ` ${parts.param}` : ""} in the effect rack`}
-            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-white/65 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+            className="absolute left-0 flex items-center gap-1.5 overflow-hidden border-0 px-1.5 text-left text-[10px] text-[var(--timeline-text-secondary)] hover:text-[var(--timeline-text-solid)] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[var(--timeline-accent)]"
             style={{
               top: top + index * AUTOMATION_LANE_H,
               width: columnWidth,
@@ -79,16 +79,23 @@ export function TimelineGroupLaneLabels({
               onReveal?.(lane.target);
             }}
           >
-            <span aria-hidden="true" className="shrink-0 text-[11px] text-white/40">
+            <span
+              aria-hidden="true"
+              className="shrink-0 text-[11px] text-[var(--timeline-text-dim)]"
+            >
               ▤
             </span>
             <span className="flex min-w-0 flex-1 flex-col justify-center leading-tight">
-              <span className="truncate font-mono text-[9px] text-white/70">{parts.name}</span>
+              <span className="truncate font-mono text-[9px] text-[var(--timeline-text-bright)]">
+                {parts.name}
+              </span>
               {parts.param ? (
-                <span className="truncate font-mono text-[9px] text-white/40">{parts.param}</span>
+                <span className="truncate font-mono text-[9px] text-[var(--timeline-text-dim)]">
+                  {parts.param}
+                </span>
               ) : null}
             </span>
-            <span className="shrink-0 font-mono text-[9px] tabular-nums text-white/55">
+            <span className="shrink-0 font-mono text-[9px] tabular-nums text-[var(--timeline-handle)]">
               {value.toFixed(2)}
             </span>
           </button>

package/src/player/components/TimelineGroupRow.tsx

@@ -21,7 +21,7 @@ import { usePlayerStore } from "../store/playerStore";
 
 /** Accent rail on a group-owned lane — the same green the member rail uses, so
  *  "this belongs to the group" reads the same in both places (groups doc §5). */
-const GROUP_LANE_ACCENT = "#3CE6AC";
+const GROUP_LANE_ACCENT = "var(--timeline-accent)";
 
 interface TimelineGroupRowProps {
   index: number;

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

@@ -432,6 +432,20 @@ describe("TimelineLanes selection", () => {
 });
 
 describe("TimelineLanes clip thumbnails", () => {
+  it("keeps thumbnail content inside a selected clip", () => {
+    const selected = element("clip-a", TRACK_A);
+    const view = renderLanes({
+      elements: [selected],
+      selectedElementIds: new Set([selected.id]),
+      renderClipContent: () => <div className="absolute inset-0 bg-neutral-900" data-thumbnail />,
+    });
+
+    const clip = view.host.querySelector('[data-el-id="clip-a"]');
+    expect(clip?.classList.contains("is-selected")).toBe(true);
+    expect(clip?.querySelector("[data-thumbnail]")).not.toBeNull();
+    act(() => view.root.unmount());
+  });
+
   it("asks for the same frames at rest, hovered and selected", () => {
     const rich: unknown[] = [];
     const renderClipContent = vi.fn(

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());
+    }
+  });
+});