@hyperframes/studio 0.8.84 → 0.8.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.84",
+  "version": "0.8.86",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.84",
-    "@hyperframes/parsers": "0.8.84",
-    "@hyperframes/player": "0.8.84",
-    "@hyperframes/shader-transitions": "0.8.84",
-    "@hyperframes/studio-server": "0.8.84",
-    "@hyperframes/sdk": "0.8.84"
+    "@hyperframes/core": "0.8.86",
+    "@hyperframes/sdk": "0.8.86",
+    "@hyperframes/player": "0.8.86",
+    "@hyperframes/studio-server": "0.8.86",
+    "@hyperframes/shader-transitions": "0.8.86",
+    "@hyperframes/parsers": "0.8.86"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.84"
+    "@hyperframes/producer": "0.8.86"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.test.tsx

@@ -24,17 +24,22 @@ vi.mock("../contexts/StudioContext", () => ({
 
 afterEach(() => {
   document.body.innerHTML = "";
-  usePlayerStore.setState({ autoKeyframeEnabled: true, thumbnailMode: "adaptive" });
+  usePlayerStore.setState({
+    autoKeyframeEnabled: true,
+    thumbnailMode: "adaptive",
+    zoomMode: "fit",
+  });
 });
 
 function renderToolbar(
   domEditSession?: React.ComponentProps<typeof TimelineToolbar>["domEditSession"],
+  props: Partial<React.ComponentProps<typeof TimelineToolbar>> = {},
 ) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   act(() => {
-    root.render(<TimelineToolbar domEditSession={domEditSession} />);
+    root.render(<TimelineToolbar domEditSession={domEditSession} {...props} />);
   });
   return { host, root };
 }
@@ -175,6 +180,52 @@ describe("TimelineToolbar — keyframes on audio tracks", () => {
     expect(button?.disabled).toBe(false);
     act(() => root.unmount());
   });
+
+  const keyframeControls = (host: HTMLElement) => [
+    host.querySelector('button[aria-label="Add keyframe at playhead"]'),
+    host.querySelector('button[aria-label="Auto-record manual edits as keyframes"]'),
+  ];
+  /** True when the keyframe shortcut claimed K, so playback never saw it. */
+  const pressK = () => {
+    const event = new KeyboardEvent("keydown", { key: "k", bubbles: true, cancelable: true });
+    act(() => {
+      window.dispatchEvent(event);
+    });
+    return event.defaultPrevented;
+  };
+
+  it("shows Add keyframe and auto-record, and K adds a keyframe, by default", () => {
+    const { host, root } = renderToolbar(sessionFor("div"));
+    expect(keyframeControls(host).every(Boolean)).toBe(true);
+    expect(pressK()).toBe(true);
+    act(() => root.unmount());
+  });
+
+  it("hides both controls for a host without keyframes, turns auto-record off and leaves K alone", () => {
+    const { host, root } = renderToolbar(sessionFor("div"), { showKeyframes: false });
+    expect(keyframeControls(host)).toEqual([null, null]);
+    expect(usePlayerStore.getState().autoKeyframeEnabled).toBe(false);
+    expect(pressK()).toBe(false);
+    act(() => root.unmount());
+  });
+});
+
+describe("TimelineToolbar Fit", () => {
+  it("shows Fit as a named icon and says whether fit is on", () => {
+    const { host, root } = renderToolbar();
+    const fit = () => host.querySelector('button[aria-label="Fit timeline to width"]');
+    expect(fit()?.textContent).toBe("");
+    expect(fit()?.querySelector("svg")).not.toBeNull();
+    act(() => fit()?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(fit()?.getAttribute("aria-pressed")).toBe("true");
+    act(() =>
+      host
+        .querySelector('button[aria-label="Zoom in"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    expect(fit()?.getAttribute("aria-pressed")).toBe("false");
+    act(() => root.unmount());
+  });
 });
 
 describe("TimelineToolbar audio meters", () => {

package/src/components/TimelineToolbar.tsx

@@ -1,5 +1,11 @@
 import { useEffect, useRef } from "react";
-import { Image, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
+import {
+  ArrowsOutLineHorizontal,
+  Image,
+  Magnet,
+  MagnifyingGlassMinus,
+  MagnifyingGlassPlus,
+} from "@phosphor-icons/react";
 import {
   useEnableKeyframes,
   isPlayheadWithinTween,
@@ -38,6 +44,8 @@ export interface TimelineToolbarProps {
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
   history?: TimelineHistoryButtonsProps;
   showAddBeat?: boolean;
+  /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
+  showKeyframes?: boolean;
 }
 
 interface KeyframeToggleState {
@@ -134,6 +142,7 @@ export function TimelineToolbar({
   onSplitElement,
   history,
   showAddBeat = true,
+  showKeyframes = true,
 }: TimelineToolbarProps) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
@@ -174,10 +183,14 @@ export function TimelineToolbar({
   // Wire the "Add keyframe (K)" shortcut the toolbar advertises. Active only when
   // there's a keyframeable selection; otherwise K stays JKL-pause in playback.
   useKeyframeKeyboard({
-    enabled: Boolean(onToggleKeyframe),
+    enabled: showKeyframes && Boolean(onToggleKeyframe),
     onAddKeyframe: onToggleKeyframe,
   });
 
+  useEffect(() => {
+    if (!showKeyframes) setAutoKeyframeEnabled(false);
+  }, [showKeyframes, setAutoKeyframeEnabled]);
+
   // "N" toggles timeline snapping (industry convention: Resolve/FCP).
   // Skip when typing in an input/contenteditable.
   useEffect(() => {
@@ -270,107 +283,110 @@ export function TimelineToolbar({
               </button>
             </Tooltip>
           )}
-          {/* Always rendered (CapCut-style): with no keyframeable selection the
-              button fades to a disabled state instead of unmounting, so the
-              toolbar layout never shifts. */}
-          <Tooltip
-            label={
-              keyframePathEndpoint
-                ? "Motion path endpoints cannot be removed"
-                : !onToggleKeyframe
-                  ? "Select an animated element to add keyframes"
-                  : keyframeIsMotionPath
-                    ? keyframeWillExtend
-                      ? "Extend motion path to playhead (K)"
-                      : keyframeState === "active"
-                        ? "Remove waypoint from motion path (K)"
-                        : "Add waypoint to motion path (K)"
-                    : keyframeState === "active"
-                      ? "Remove keyframe at playhead (K)"
-                      : keyframeState === "inactive"
+          {showKeyframes && (
+            <>
+              {/* With no keyframeable selection the button fades to disabled instead of
+              unmounting, so the toolbar layout never shifts (CapCut-style). */}
+              <Tooltip
+                label={
+                  keyframePathEndpoint
+                    ? "Motion path endpoints cannot be removed"
+                    : !onToggleKeyframe
+                      ? "Select an animated element to add keyframes"
+                      : keyframeIsMotionPath
                         ? keyframeWillExtend
-                          ? "Add keyframe at playhead, extends animation (K)"
-                          : "Add keyframe at playhead (K)"
-                        : "Add keyframe (K)"
-            }
-          >
-            <button
-              type="button"
-              disabled={!onToggleKeyframe}
-              onClick={onToggleKeyframe}
-              aria-label={
-                keyframePathEndpoint
-                  ? "Motion path endpoint"
-                  : keyframeIsMotionPath
-                    ? keyframeState === "active"
-                      ? "Remove motion path waypoint"
-                      : keyframeWillExtend
-                        ? "Extend motion path to playhead"
-                        : "Add motion path waypoint"
-                    : keyframeState === "active"
-                      ? "Remove keyframe at playhead"
-                      : "Add keyframe at playhead"
-              }
-              className={
-                !onToggleKeyframe
-                  ? flatDisabled
-                  : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
-                      keyframeState === "active"
-                        ? "text-studio-accent"
-                        : keyframeState === "inactive"
-                          ? "text-neutral-400 hover:text-studio-accent"
-                          : "text-neutral-600 hover:text-neutral-400"
-                    }`
-              }
-            >
-              <svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
-                {keyframeState === "active" ? (
-                  <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
-                ) : (
-                  <path
-                    d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.2"
-                  />
-                )}
-              </svg>
-            </button>
-          </Tooltip>
-          <Tooltip
-            label={
-              autoKeyframeEnabled
-                ? "Auto-record manual edits as keyframes (click to turn off)"
-                : "Manual edits will not be recorded as keyframes (click to turn on)"
-            }
-          >
-            <button
-              type="button"
-              onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
-              aria-label="Auto-record manual edits as keyframes"
-              aria-pressed={autoKeyframeEnabled}
-              className={`${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
-                autoKeyframeEnabled
-                  ? "text-red-400 hover:text-red-300"
-                  : "text-neutral-600 hover:text-neutral-400"
-              }`}
-            >
-              <svg width="16" height="16" viewBox="0 0 10 10" fill="none">
-                {/* Same diamond outline as the Add-keyframe icon, with a
+                          ? "Extend motion path to playhead (K)"
+                          : keyframeState === "active"
+                            ? "Remove waypoint from motion path (K)"
+                            : "Add waypoint to motion path (K)"
+                        : keyframeState === "active"
+                          ? "Remove keyframe at playhead (K)"
+                          : keyframeState === "inactive"
+                            ? keyframeWillExtend
+                              ? "Add keyframe at playhead, extends animation (K)"
+                              : "Add keyframe at playhead (K)"
+                            : "Add keyframe (K)"
+                }
+              >
+                <button
+                  type="button"
+                  disabled={!onToggleKeyframe}
+                  onClick={onToggleKeyframe}
+                  aria-label={
+                    keyframePathEndpoint
+                      ? "Motion path endpoint"
+                      : keyframeIsMotionPath
+                        ? keyframeState === "active"
+                          ? "Remove motion path waypoint"
+                          : keyframeWillExtend
+                            ? "Extend motion path to playhead"
+                            : "Add motion path waypoint"
+                        : keyframeState === "active"
+                          ? "Remove keyframe at playhead"
+                          : "Add keyframe at playhead"
+                  }
+                  className={
+                    !onToggleKeyframe
+                      ? flatDisabled
+                      : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
+                          keyframeState === "active"
+                            ? "text-studio-accent"
+                            : keyframeState === "inactive"
+                              ? "text-neutral-400 hover:text-studio-accent"
+                              : "text-neutral-600 hover:text-neutral-400"
+                        }`
+                  }
+                >
+                  <svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
+                    {keyframeState === "active" ? (
+                      <path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
+                    ) : (
+                      <path
+                        d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1.2"
+                      />
+                    )}
+                  </svg>
+                </button>
+              </Tooltip>
+              <Tooltip
+                label={
+                  autoKeyframeEnabled
+                    ? "Auto-record manual edits as keyframes (click to turn off)"
+                    : "Manual edits will not be recorded as keyframes (click to turn on)"
+                }
+              >
+                <button
+                  type="button"
+                  onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
+                  aria-label="Auto-record manual edits as keyframes"
+                  aria-pressed={autoKeyframeEnabled}
+                  className={`${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
+                    autoKeyframeEnabled
+                      ? "text-red-400 hover:text-red-300"
+                      : "text-neutral-600 hover:text-neutral-400"
+                  }`}
+                >
+                  <svg width="16" height="16" viewBox="0 0 10 10" fill="none">
+                    {/* Same diamond outline as the Add-keyframe icon, with a
                       record-style dot inside: filled = auto-recording,
                       hollow = manual edits won't be keyframed. */}
-                <path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
-                <circle
-                  cx="5"
-                  cy="5"
-                  r="1.8"
-                  fill={autoKeyframeEnabled ? "currentColor" : "none"}
-                  stroke="currentColor"
-                  strokeWidth="1"
-                />
-              </svg>
-            </button>
-          </Tooltip>
+                    <path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
+                    <circle
+                      cx="5"
+                      cy="5"
+                      r="1.8"
+                      fill={autoKeyframeEnabled ? "currentColor" : "none"}
+                      stroke="currentColor"
+                      strokeWidth="1"
+                    />
+                  </svg>
+                </button>
+              </Tooltip>
+            </>
+          )}
           {onSplitElement &&
             (() => {
               // Render the button unconditionally (disabled when unusable):
@@ -495,13 +511,15 @@ export function TimelineToolbar({
             <button
               type="button"
               onClick={() => setZoomMode("fit")}
+              aria-label="Fit timeline to width"
+              aria-pressed={zoomMode === "fit"}
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 zoomMode === "fit"
                   ? "bg-studio-accent/10 text-studio-accent"
                   : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
               }`}
             >
-              Fit
+              <ArrowsOutLineHorizontal size={16} aria-hidden="true" />
             </button>
           </Tooltip>
           <Tooltip label="Zoom out">

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -21,7 +21,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
   return (
     <nav
       aria-label="Composition navigation"
-      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0"
+      className="flex items-center gap-1 px-2 h-8 border-b border-hairline bg-bg-1 shrink-0"
     >
       {/* Back button — always goes to parent */}
       <button
@@ -33,7 +33,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-text-3 hover:text-text-0 hover:bg-hover active:scale-[0.98] transition-colors"
         title="Back (Esc, or double-click empty timeline)"
         aria-label="Back to parent composition"
       >
@@ -45,9 +45,9 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
         const isLast = i === stack.length - 1;
         return (
           <span key={level.id} className="flex items-center gap-1">
-            {i > 0 && <CaretRight size={10} className="text-neutral-600 shrink-0" />}
+            {i > 0 && <CaretRight size={10} className="text-text-4 shrink-0" />}
             {isLast ? (
-              <span className="text-xs text-neutral-200 font-medium">{level.label}</span>
+              <span className="text-xs text-text-1 font-medium">{level.label}</span>
             ) : (
               <button
                 type="button"
@@ -55,7 +55,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
                   trackStudioEvent("navigation", { action: "breadcrumb", target: level.label });
                   onNavigate(i);
                 }}
-                className="text-xs text-neutral-500 hover:text-neutral-200 transition-colors"
+                className="text-xs text-text-3 hover:text-text-1 transition-colors"
               >
                 {level.label}
               </button>

package/src/components/nle/useCompositionStack.test.tsx

@@ -3,6 +3,7 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { installReactActEnvironment } from "../../hooks/domSelectionTestHarness";
+import { liveTime, usePlayerStore } from "../../player/store/playerStore";
 import { useCompositionStack } from "./useCompositionStack";
 
 installReactActEnvironment();
@@ -111,3 +112,128 @@ describe("useCompositionStack — activating a composition by path", () => {
     act(() => root.unmount());
   });
 });
+
+describe("useCompositionStack — back to the master", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    usePlayerStore.getState().setCurrentTime(0);
+    usePlayerStore.getState().setIsPlaying(false);
+  });
+
+  const INTRO = { id: "intro", compositionSrc: "compositions/intro.html" };
+  const LOGO = { id: "logo", compositionSrc: "compositions/logo.html" };
+  const seek = (time: number) => act(() => usePlayerStore.getState().setCurrentTime(time));
+  const time = () => usePlayerStore.getState().currentTime;
+
+  async function mount(props: { projectId?: string; activeCompositionPath?: string | null } = {}) {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const seen = {} as { stack: ReturnType<typeof useCompositionStack> };
+    function Harness(p: { projectId: string; activeCompositionPath: string | null }) {
+      seen.stack = useCompositionStack(p);
+      return null;
+    }
+    const render = async (next: typeof props) => {
+      props = { ...props, ...next };
+      await act(async () => {
+        root.render(
+          <Harness
+            projectId={props.projectId ?? "p"}
+            activeCompositionPath={props.activeCompositionPath ?? null}
+          />,
+        );
+      });
+    };
+    await render({});
+    const run = async (step: (stack: ReturnType<typeof useCompositionStack>) => void) => {
+      await act(async () => step(seen.stack));
+    };
+    return { seen, render, run, unmount: () => act(() => root.unmount()) };
+  }
+
+  it("restores the master playhead from the breadcrumb after a two-level drill", async () => {
+    const { seen, run, unmount } = await mount();
+    seek(12);
+    await run((s) => s.handleDrillDown(INTRO));
+    seek(3);
+    await run((s) => s.handleDrillDown(LOGO));
+    expect(seen.stack.compositionStack.map((level) => level.label)).toEqual([
+      "Master",
+      "intro",
+      "logo",
+    ]);
+    await run((s) => s.handleNavigateComposition(0));
+    expect(time()).toBe(12);
+    unmount();
+  });
+
+  it("restores the master playhead when Escape or a timeline double-click goes back", async () => {
+    const { run, unmount } = await mount();
+    seek(12);
+    await run((s) => s.handleDrillDown(INTRO));
+    seek(3);
+    await run((s) => s.handleDrillDown(LOGO));
+    seek(1);
+    await run((s) => s.updateCompositionStack((prev) => prev.slice(0, -1)));
+    expect(time()).toBe(1);
+    await run((s) => s.updateCompositionStack((prev) => prev.slice(0, -1)));
+    expect(time()).toBe(12);
+    unmount();
+  });
+
+  it("restores the live master playhead when the drill happens during playback", async () => {
+    const { run, unmount } = await mount();
+    seek(4);
+    act(() => usePlayerStore.getState().setIsPlaying(true));
+    liveTime.notify(9);
+    await run((s) => s.handleDrillDown(INTRO));
+    act(() => usePlayerStore.getState().setIsPlaying(false));
+    seek(2);
+    await run((s) => s.handleNavigateComposition(0));
+    expect(time()).toBe(9);
+    unmount();
+  });
+
+  it("saves the master playhead at the first of two drills in one batch", async () => {
+    const { run, unmount } = await mount();
+    seek(12);
+    await run((s) => {
+      s.handleDrillDown(INTRO);
+      usePlayerStore.getState().setCurrentTime(7);
+      s.handleDrillDown(LOGO);
+    });
+    await run((s) => s.handleNavigateComposition(0));
+    expect(time()).toBe(12);
+    unmount();
+  });
+
+  it("restores a master playhead of exactly 0", async () => {
+    const { run, unmount } = await mount();
+    await run((s) => s.handleDrillDown(INTRO));
+    seek(3);
+    await run((s) => s.handleNavigateComposition(0));
+    expect(time()).toBe(0);
+    unmount();
+  });
+
+  it("restores the master playhead when the Comps panel goes there and back", async () => {
+    const { render, unmount } = await mount();
+    seek(30);
+    await render({ activeCompositionPath: "compositions/intro.html" });
+    seek(4);
+    await render({ activeCompositionPath: "index.html" });
+    expect(time()).toBe(30);
+    unmount();
+  });
+
+  it("does not carry one project's master playhead into another", async () => {
+    const { run, render, unmount } = await mount({ projectId: "a" });
+    seek(12);
+    await run((s) => s.handleDrillDown(INTRO));
+    seek(3);
+    await render({ projectId: "b" });
+    expect(time()).toBe(3);
+    unmount();
+  });
+});

package/src/components/nle/useCompositionStack.ts

@@ -1,7 +1,7 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 // Composition drill-down stack management for NLEContext/EditorShell
 import { useState, useCallback, useRef, useEffect } from "react";
-import { usePlayerStore } from "../../player/store/playerStore";
+import { liveTime, usePlayerStore } from "../../player/store/playerStore";
 import type { CompositionLevel } from "./CompositionBreadcrumb";
 import { encodePreviewPath } from "../../player/components/thumbnailUtils";
 
@@ -37,16 +37,30 @@ export function useCompositionStack({
   const onCompositionChangeRef = useRef(onCompositionChange);
   onCompositionChangeRef.current = onCompositionChange;
 
+  const masterSeekRef = useRef(0);
+  const masterSeekProjectRef = useRef<string | null>(null);
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+  const stackRef = useRef(compositionStack);
+
   const updateCompositionStack: typeof setCompositionStack = useCallback((action) => {
-    setCompositionStack((prev) => {
-      const next = typeof action === "function" ? action(prev) : action;
-      const id = next[next.length - 1]?.id;
-      queueMicrotask(() => onCompositionChangeRef.current?.(id === "master" ? null : id));
-      return next;
-    });
+    const prev = stackRef.current;
+    const next = typeof action === "function" ? action(prev) : action;
+    stackRef.current = next;
+    const player = usePlayerStore.getState();
+    if (prev.length === 1 && next.length > 1) {
+      masterSeekRef.current = player.isPlaying ? liveTime.latest() : player.currentTime;
+      masterSeekProjectRef.current = projectIdRef.current;
+    } else if (next.length === 1 && prev.length > 1) {
+      if (masterSeekProjectRef.current === projectIdRef.current) {
+        player.setCurrentTime(masterSeekRef.current);
+      }
+    }
+    setCompositionStack(next);
+    const id = next[next.length - 1]?.id;
+    queueMicrotask(() => onCompositionChangeRef.current?.(id === "master" ? null : id));
   }, []);
 
-  const masterSeekRef = useRef(0);
   const [compIdToSrc, setCompIdToSrc] = useState<Map<string, string>>(new Map());
 
   const compIdToSrcRef = useRef(compIdToSrc);
@@ -54,9 +68,6 @@ export function useCompositionStack({
 
   const handleNavigateComposition = useCallback(
     (index: number) => {
-      if (index === 0 && masterSeekRef.current > 0) {
-        usePlayerStore.getState().setCurrentTime(masterSeekRef.current);
-      }
       usePlayerStore.getState().setElements([]);
       updateCompositionStack((prev) => prev.slice(0, index + 1));
     },
@@ -67,7 +78,6 @@ export function useCompositionStack({
   const handleDrillDown = useCallback(
     (element: { id: string; compositionSrc?: string }) => {
       if (!element.compositionSrc) return;
-      masterSeekRef.current = usePlayerStore.getState().currentTime;
 
       const compId = element.id;
       let resolvedPath = compIdToSrcRef.current.get(compId);

package/src/compositionStackExport.test.ts

@@ -0,0 +1,7 @@
+import { expect, it } from "vitest";
+import { CompositionBreadcrumb, useCompositionStack } from "@hyperframes/studio";
+
+it("exports the composition stack hook beside the breadcrumb it feeds", () => {
+  expect(typeof useCompositionStack).toBe("function");
+  expect(typeof CompositionBreadcrumb).toBe("function");
+});

package/src/index.ts

@@ -9,6 +9,7 @@ export { DEFAULT_SHORTCUT_SECTIONS } from "./player/components/studioShortcuts";
 export type { ShortcutHint, ShortcutSection } from "./player/components/studioShortcuts";
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
+export { useCompositionStack } from "./components/nle/useCompositionStack";
 
 // Player (preview, timeline, playback controls)
 export {