@hyperframes/studio 0.8.5 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.5",
-    "@hyperframes/parsers": "0.8.5",
-    "@hyperframes/player": "0.8.5",
-    "@hyperframes/sdk": "0.8.5",
-    "@hyperframes/studio-server": "0.8.5"
+    "@hyperframes/core": "0.8.6",
+    "@hyperframes/parsers": "0.8.6",
+    "@hyperframes/player": "0.8.6",
+    "@hyperframes/sdk": "0.8.6",
+    "@hyperframes/studio-server": "0.8.6"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -68,7 +68,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.5"
+    "@hyperframes/producer": "0.8.6"
   },
   "peerDependencies": {
     "react": "19",

package/src/player/hooks/useExpandedTimelineElements.test.ts

@@ -1,12 +1,19 @@
-import { describe, expect, it } from "vitest";
+// @vitest-environment happy-dom
+
+import React, { act, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
 import {
   buildExpandedElements,
   resolveTimelineExpansionRawId,
+  useExpandedTimelineElements,
 } from "./useExpandedTimelineElements";
 import { buildTimelineElementKey } from "../lib/timelineElementHelpers";
-import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import type { ClipManifestClip } from "../lib/playbackTypes";
 
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 const clip = (over: Partial<ClipManifestClip>): ClipManifestClip => ({
   id: "x",
   label: "x",
@@ -31,6 +38,19 @@ const el = (over: Partial<TimelineElement>): TimelineElement => ({
   ...over,
 });
 
+function TimelineExpansionHarness({ onValue }: { onValue: (value: TimelineElement[]) => void }) {
+  const value = useExpandedTimelineElements();
+  useEffect(() => {
+    onValue(value);
+  }, [onValue, value]);
+  return null;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
 describe("buildExpandedElements", () => {
   it("rebases a 1-level child onto its sub-comp host (start + sourceFile)", () => {
     // host s3 at absolute 16 → stats-panel.html; children live in that file.
@@ -357,7 +377,7 @@ describe("buildExpandedElements", () => {
   it("keeps the host row present at every playhead position (keyframe lane repro)", () => {
     // Live repro with no drag at all: seek 0 gave 3 diamonds, seek 7.68 gave 0,
     // seek 0.2 gave 3. Diamonds render per row from keyframeCache.get(elementKey),
-    // so the whole lane went with the host row whenever the paused drill-in
+    // so the whole lane went with the host row whenever the store-time drill-in
     // substituted it for its children.
     const elements = [
       el({ id: "scene", domId: "scene", key: "index.html#scene", start: 0, duration: 12 }),
@@ -371,7 +391,6 @@ describe("buildExpandedElements", () => {
     for (const currentTime of [0, 7.68, 0.2]) {
       const rawId = resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime,
         manifest,
         parentMap,
@@ -424,13 +443,12 @@ describe("buildExpandedElements", () => {
 });
 
 describe("resolveTimelineExpansionRawId", () => {
-  it("returns null when paused inside a childless top-level clip", () => {
+  it("returns null inside a childless top-level clip", () => {
     const manifest = [clip({ id: "title", start: 0, duration: 4 })];
 
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime: 2,
         manifest,
         parentMap: new Map(),
@@ -438,7 +456,7 @@ describe("resolveTimelineExpansionRawId", () => {
     ).toBeNull();
   });
 
-  it("auto-expands an active composition with children when paused and nothing is selected", () => {
+  it("auto-expands an active composition with children when nothing is selected", () => {
     const manifest = [
       clip({ id: "scene", start: 1, duration: 5 }),
       clip({ id: "headline", start: 1.5, duration: 2 }),
@@ -448,7 +466,6 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime: 2,
         manifest,
         parentMap,
@@ -468,7 +485,6 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime: 12,
         manifest,
         parentMap,
@@ -491,7 +507,6 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime: 5,
         manifest,
         parentMap,
@@ -499,7 +514,7 @@ describe("resolveTimelineExpansionRawId", () => {
     ).toBe("second");
   });
 
-  it("auto-expands the innermost active nested composition when paused", () => {
+  it("auto-expands the innermost active nested composition", () => {
     const manifest = [
       clip({ id: "outer", start: 0, duration: 10 }),
       clip({ id: "inner", start: 2, duration: 5 }),
@@ -513,7 +528,6 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: false,
         currentTime: 3.5,
         manifest,
         parentMap,
@@ -521,7 +535,7 @@ describe("resolveTimelineExpansionRawId", () => {
     ).toBe("inner");
   });
 
-  it("does not auto-expand an active composition while playing", () => {
+  it("resolves an active composition from the current store time", () => {
     const manifest = [
       clip({ id: "scene", start: 0, duration: 5 }),
       clip({ id: "headline", start: 1, duration: 2 }),
@@ -531,15 +545,49 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: null,
-        isPlaying: true,
         currentTime: 2,
         manifest,
         parentMap,
       }),
-    ).toBeNull();
+    ).toBe("scene");
+  });
+
+  it("keeps inline children visible when the master timeline is playing", () => {
+    const elements = [
+      el({ id: "scene", domId: "scene", key: "index.html#scene", start: 0, duration: 5 }),
+    ];
+    const manifest = [
+      clip({ id: "scene", start: 0, duration: 5, compositionSrc: "scene.html" }),
+      clip({ id: "headline", start: 1, duration: 2 }),
+    ];
+    const parentMap = new Map([["headline", "scene"]]);
+    let rows: TimelineElement[] | undefined;
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+
+    act(() => {
+      usePlayerStore.setState({
+        elements,
+        clipManifest: manifest,
+        clipParentMap: parentMap,
+        currentTime: 2,
+        isPlaying: true,
+      });
+      root.render(
+        React.createElement(TimelineExpansionHarness, {
+          onValue: (value) => (rows = value),
+        }),
+      );
+    });
+
+    expect(usePlayerStore.getState().isPlaying).toBe(true);
+    expect(rows?.map((row) => row.domId ?? row.id)).toEqual(["scene", "headline"]);
+
+    act(() => root.unmount());
   });
 
-  it("keeps selected elements ahead of paused active composition auto-expansion", () => {
+  it("keeps selected elements ahead of active composition auto-expansion", () => {
     const manifest = [
       clip({ id: "scene", start: 0, duration: 6 }),
       clip({ id: "headline", start: 1, duration: 2 }),
@@ -553,7 +601,6 @@ describe("resolveTimelineExpansionRawId", () => {
     expect(
       resolveTimelineExpansionRawId({
         selectedElementId: "caption",
-        isPlaying: false,
         currentTime: 1.5,
         manifest,
         parentMap,

package/src/player/hooks/useExpandedTimelineElements.ts

@@ -35,7 +35,6 @@ function resolveRawId(
 
 interface TimelineExpansionRawIdInput {
   selectedElementId: string | null;
-  isPlaying: boolean;
   currentTime: number;
   manifest: ClipManifestClip[];
   parentMap: Map<string, string>;
@@ -97,14 +96,12 @@ function findActiveExpandableCompositionId(
 
 export function resolveTimelineExpansionRawId({
   selectedElementId,
-  isPlaying,
   currentTime,
   manifest,
   parentMap,
 }: TimelineExpansionRawIdInput): string | null {
   const selectedRawId = resolveRawId(selectedElementId, manifest, parentMap);
   if (selectedRawId) return selectedRawId;
-  if (isPlaying) return null;
   return findActiveExpandableCompositionId(currentTime, manifest, parentMap);
 }
 
@@ -334,7 +331,7 @@ export function buildExpandedElements(
       : (el.key ?? el.id) === parentKey;
 
   // ADDITIVE drill-in: the host row stays and its children are appended under
-  // it. Expansion is also triggered by the playhead alone (paused auto-expand),
+  // it. Expansion is also triggered by the playhead alone (active auto-expand),
   // so substituting the host row made it vanish on an ordinary seek, and with
   // it the host's keyframe lane, since diamonds render per row from
   // `keyframeCache.get(elementKey)`. The synthetic fractional lanes above sit
@@ -356,13 +353,14 @@ export function useExpandedTimelineElements(): TimelineElement[] {
   const clipParentMap = usePlayerStore((s) => s.clipParentMap);
   const domClipChildren = usePlayerStore((s) => s.domClipChildren);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
-  const isPlaying = usePlayerStore((s) => s.isPlaying);
   const currentTime = usePlayerStore((s) => s.currentTime);
 
-  // Resolve which raw clip drives expansion. This reads currentTime (for paused
-  // auto-expand) so it re-runs each scrub tick, but it's a cheap manifest scan and
-  // its RESULT only changes when the playhead crosses a composition boundary. Keying
-  // the expensive build below on these ids (not raw currentTime) avoids re-allocating
+  // Resolve which raw clip drives expansion from the store's committed playhead
+  // time. The RAF loop keeps live time out of React and Zustand during playback,
+  // so this target deliberately stays stable until the loop commits or a seek /
+  // pause updates the store. The scan re-runs on scrub ticks, but its RESULT only
+  // changes when the playhead crosses a composition boundary. Keying the expensive
+  // build below on these ids (not raw currentTime) avoids re-allocating
   // expandedElements — and cascading TimelineClip re-renders — on every tick.
   const { rawId, selectedRawId } = useMemo(() => {
     if (!clipManifest || clipManifest.length === 0 || clipParentMap.size === 0) {
@@ -371,14 +369,13 @@ export function useExpandedTimelineElements(): TimelineElement[] {
     return {
       rawId: resolveTimelineExpansionRawId({
         selectedElementId,
-        isPlaying,
         currentTime,
         manifest: clipManifest,
         parentMap: clipParentMap,
       }),
       selectedRawId: resolveRawId(selectedElementId, clipManifest, clipParentMap),
     };
-  }, [clipManifest, clipParentMap, selectedElementId, isPlaying, currentTime]);
+  }, [clipManifest, clipParentMap, selectedElementId, currentTime]);
 
   return useMemo(() => {
     if (!clipManifest || clipManifest.length === 0 || clipParentMap.size === 0) {