@hyperframes/studio 0.8.170 → 0.8.172

package/dist/{chunk-4UHZLLQL.js → chunk-BLXESG6S.js}

@@ -1146,7 +1146,8 @@ var Player = forwardRef(
     onPainted,
     portrait,
     style,
-    suppressLoadingOverlay
+    suppressLoadingOverlay,
+    noLoadTimeout
   }, ref) => {
     const containerRef = useRef(null);
     const loadCountRef = useRef(0);
@@ -1204,6 +1205,7 @@ var Player = forwardRef(
           setCompositionLoading(true);
           loadStartedAtRef.current = performance.now();
           loadIdRef.current += 1;
+          player.removeAttribute("no-load-timeout");
           player.setAttribute("src", retryUrl.pathname + retryUrl.search);
         };
         retryPreviewRef.current = retryPreview;
@@ -1286,6 +1288,7 @@ var Player = forwardRef(
         player.setAttribute("shader-capture-scale", "1");
         player.setAttribute("shader-loading", "player");
         player.setAttribute("low-power-idle", "");
+        player.toggleAttribute("no-load-timeout", noLoadTimeout === true);
         player.setAttribute("width", String(portrait ? 1080 : 1920));
         player.setAttribute("height", String(portrait ? 1920 : 1080));
         player.style.width = "100%";

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-CV00F8qG.js"></script>
+    <script type="module" crossorigin src="/assets/index-CVxB8lqm.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DkQKsFxx.css">
   </head>
   <body>

package/dist/index.js

@@ -47,7 +47,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-4UHZLLQL.js";
+} from "./chunk-BLXESG6S.js";
 import {
   Button,
   ContextMenu,
@@ -30154,7 +30154,8 @@ function useTimelineSyncCallbacks({
   applyPreviewAudioState,
   onAdapterReady = revealAndCommit,
   isCurrent,
-  onLoadGiveUp
+  onLoadGiveUp,
+  hostOwnsDeadline
 }) {
   const processTimelineMessage = useCallback38(
     (data) => {
@@ -30291,6 +30292,7 @@ function useTimelineSyncCallbacks({
       };
       window.addEventListener("message", onMessage);
       stopWaitingRef.current = stopWaiting;
+      if (hostOwnsDeadline) return;
       probeIntervalRef.current = setTimeout(() => {
         if (!settled) {
           trySettle();
@@ -30300,7 +30302,14 @@ function useTimelineSyncCallbacks({
         revealIframe(iframeRef.current);
       }, 5e3);
     },
-    [initializeAdapter, iframeRef, probeIntervalRef, applyPreviewAudioState, onLoadGiveUp]
+    [
+      initializeAdapter,
+      iframeRef,
+      probeIntervalRef,
+      applyPreviewAudioState,
+      onLoadGiveUp,
+      hostOwnsDeadline
+    ]
   );
   const cancelPendingLoad = useCallback38(() => {
     if (probeIntervalRef.current) clearInterval(probeIntervalRef.current);
@@ -31697,7 +31706,8 @@ function useShadowPreviewReload({
     applyPreviewAudioState: () => {
     },
     onAdapterReady: markAdapterReady,
-    isCurrent: isCurrentShadow
+    isCurrent: isCurrentShadow,
+    hostOwnsDeadline: true
   });
   cancelPendingLoadRef.current = cancelPendingLoad;
   const onShadowReadyChange = useCallback39(
@@ -33928,6 +33938,7 @@ var NLEPreview = memo23(function NLEPreview2({
                           onPreviewError: (message) => onShadowError(slot.gen, message),
                           portrait,
                           suppressLoadingOverlay: true,
+                          noLoadTimeout: true,
                           style: SHADOW_IFRAME_STYLE
                         },
                         `${activeKey}-${slot.gen}`

package/dist/player.d.ts

@@ -16,6 +16,7 @@ interface PlayerProps {
     portrait?: boolean;
     style?: React.CSSProperties;
     suppressLoadingOverlay?: boolean;
+    noLoadTimeout?: boolean;
 }
 /**
  * Renders a composition preview using the <hyperframes-player> web component.

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-4UHZLLQL.js";
+} from "./chunk-BLXESG6S.js";
 import "./chunk-FF5DM7BQ.js";
 import "./chunk-T43DM7Q6.js";
 import "./chunk-MLKGABMK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.170",
+  "version": "0.8.172",
   "description": "",
   "repository": {
     "type": "git",
@@ -59,12 +59,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.170",
-    "@hyperframes/parsers": "0.8.170",
-    "@hyperframes/shader-transitions": "0.8.170",
-    "@hyperframes/player": "0.8.170",
-    "@hyperframes/studio-server": "0.8.170",
-    "@hyperframes/sdk": "0.8.170"
+    "@hyperframes/player": "0.8.172",
+    "@hyperframes/sdk": "0.8.172",
+    "@hyperframes/shader-transitions": "0.8.172",
+    "@hyperframes/core": "0.8.172",
+    "@hyperframes/studio-server": "0.8.172",
+    "@hyperframes/parsers": "0.8.172"
   },
   "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.170"
+    "@hyperframes/producer": "0.8.172"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/nle/NLEPreview.slowBoot.test.ts

@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options {"happyDOM":{"settings":{"disableIframePageLoading":true}}}
+
+import React, { act, createRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { NLEPreview } from "./NLEPreview";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  vi.useRealTimers();
+  document.body.innerHTML = "";
+});
+
+it("keeps a shadow reload whose runtime boots after 8 s, and its player comes ready", async () => {
+  await import("@hyperframes/player");
+  vi.useFakeTimers();
+  const onShadowError = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  await act(async () => {
+    root.render(
+      React.createElement(NLEPreview, {
+        projectId: "p",
+        iframeRef: createRef<HTMLIFrameElement>(),
+        onIframeLoad: () => {},
+        previewSlots: [
+          { gen: 0, role: "live" },
+          { gen: 1, role: "shadow", url: "/api/projects/p/preview?_t=1" },
+        ],
+        onShadowIframeLoad: () => {},
+        onShadowReadyChange: () => {},
+        onShadowError,
+        setShadowIframeNode: () => {},
+        resetPreviewSlots: () => {},
+      }),
+    );
+  });
+
+  const shadow = host.querySelectorAll<
+    HTMLElement & { iframeElement: HTMLIFrameElement; ready: boolean }
+  >("hyperframes-player")[1];
+  const iframe = shadow.iframeElement;
+  act(() => {
+    iframe.dispatchEvent(new Event("load"));
+  });
+  act(() => {
+    vi.advanceTimersByTime(10_000);
+  });
+  expect(onShadowError).not.toHaveBeenCalled();
+
+  Object.assign(iframe.contentWindow!, { __player: { getDuration: () => 9 } });
+  act(() => {
+    vi.advanceTimersByTime(1_000);
+  });
+  expect(onShadowError).not.toHaveBeenCalled();
+  expect(shadow.ready).toBe(true);
+  // The live slot keeps the player's own 8 s deadline.
+  expect(host.querySelector("hyperframes-player")?.hasAttribute("no-load-timeout")).toBe(false);
+  act(() => root.unmount());
+});

package/src/components/nle/NLEPreview.tsx

@@ -209,8 +209,7 @@ export const NLEPreview = memo(function NLEPreview({
 
   const updateCompositionSizeFromPreview = useCallback(() => {
     const next = readPreviewCompositionSize(previewIframeRef.current);
-    // Pure updater — the parent notification happens in the effect below
-    // (updaters may run more than once under Strict Mode / concurrent React).
+    // Pure updater; the effect below notifies the parent (Strict Mode may run updaters twice).
     setCompositionSize((prev) =>
       prev?.width === next?.width && prev?.height === next?.height ? prev : next,
     );
@@ -563,6 +562,7 @@ export const NLEPreview = memo(function NLEPreview({
                   onPreviewError={(message) => onShadowError(slot.gen, message)}
                   portrait={portrait}
                   suppressLoadingOverlay
+                  noLoadTimeout
                   style={SHADOW_IFRAME_STYLE}
                 />
               ),

package/src/player/components/Player.tsx

@@ -37,6 +37,7 @@ interface PlayerProps {
   portrait?: boolean;
   style?: React.CSSProperties;
   suppressLoadingOverlay?: boolean;
+  noLoadTimeout?: boolean;
 }
 
 interface HyperframesPlayerElement extends HTMLElement {
@@ -154,6 +155,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       portrait,
       style,
       suppressLoadingOverlay,
+      noLoadTimeout,
     },
     ref,
   ) => {
@@ -224,6 +226,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           setCompositionLoading(true);
           loadStartedAtRef.current = performance.now();
           loadIdRef.current += 1;
+          player.removeAttribute("no-load-timeout");
           player.setAttribute("src", retryUrl.pathname + retryUrl.search);
         };
         retryPreviewRef.current = retryPreview;
@@ -331,6 +334,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
         player.setAttribute("shader-capture-scale", "1");
         player.setAttribute("shader-loading", "player");
         player.setAttribute("low-power-idle", "");
+        player.toggleAttribute("no-load-timeout", noLoadTimeout === true);
         player.setAttribute("width", String(portrait ? 1080 : 1920));
         player.setAttribute("height", String(portrait ? 1920 : 1080));
         player.style.width = "100%";

package/src/player/hooks/useShadowPreviewReload.ts

@@ -49,7 +49,12 @@ function isDocumentHidden(): boolean {
 
 type UseShadowPreviewReloadParams = Omit<
   UseTimelineSyncCallbacksParams,
-  "probeIntervalRef" | "onAdapterReady" | "getAdapter" | "isCurrent" | "onLoadGiveUp"
+  | "probeIntervalRef"
+  | "onAdapterReady"
+  | "getAdapter"
+  | "isCurrent"
+  | "onLoadGiveUp"
+  | "hostOwnsDeadline"
 > & {
   getAdapter: (overrideIframe?: HTMLIFrameElement | null) => PlaybackAdapter | null;
   /** Runs right after a shadow becomes the live iframe (iframeRef already points at it). */
@@ -249,6 +254,7 @@ export function useShadowPreviewReload({
     applyPreviewAudioState: () => {},
     onAdapterReady: markAdapterReady,
     isCurrent: isCurrentShadow,
+    hostOwnsDeadline: true,
   });
   cancelPendingLoadRef.current = cancelPendingLoad;
 

package/src/player/hooks/useTimelinePlayer.shadowReload.test.ts

@@ -461,6 +461,31 @@ describe("shadow reload readiness and failure", () => {
     unmount(root);
   });
 
+  it("promotes a shadow whose runtime boots after Studio's own 5 s readiness wait", () => {
+    vi.useFakeTimers();
+    const onPreviewReloadFailed = vi.fn();
+    const { getApi, gen, root } = beginReload({ onPreviewReloadFailed });
+    const { win } = makeAdapterWindow();
+    const booting: Record<string, unknown> = { ...win, __player: undefined };
+    const iframe = makeFakeIframe(booting);
+    act(() => {
+      getApi().setShadowIframeNode(iframe);
+      getApi().onShadowIframeLoad(gen);
+    });
+
+    act(() => void vi.advanceTimersByTime(10_000));
+    booting.__player = win.__player;
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent("message", { data: { source: "hf-preview", type: "state" } }),
+      );
+      getApi().onShadowReadyChange(gen, true);
+    });
+    expect(getApi().iframeRef.current).toBe(iframe);
+    expect(onPreviewReloadFailed).not.toHaveBeenCalled();
+    unmount(root);
+  });
+
   it("gives a reload that replaces a slow one its own full set of budgets", () => {
     vi.useFakeTimers();
     vi.spyOn(console, "error").mockImplementation(() => {});

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -60,6 +60,7 @@ export interface UseTimelineSyncCallbacksParams {
   isCurrent?: (context?: number) => boolean;
   /** Fires when no adapter appeared within the wait window. */
   onLoadGiveUp?: (context?: number) => void;
+  hostOwnsDeadline?: boolean;
 }
 
 /**
@@ -163,6 +164,7 @@ export function useTimelineSyncCallbacks({
   onAdapterReady = revealAndCommit,
   isCurrent,
   onLoadGiveUp,
+  hostOwnsDeadline,
 }: UseTimelineSyncCallbacksParams) {
   // Convert a runtime timeline message (from iframe postMessage) into TimelineElements
   const processTimelineMessage = useCallback(
@@ -335,6 +337,7 @@ export function useTimelineSyncCallbacks({
       };
       window.addEventListener("message", onMessage);
       stopWaitingRef.current = stopWaiting;
+      if (hostOwnsDeadline) return;
 
       // Safety net: if no message arrives within 5s, try one last time then give up.
       probeIntervalRef.current = setTimeout(() => {
@@ -346,7 +349,14 @@ export function useTimelineSyncCallbacks({
         revealIframe(iframeRef.current);
       }, 5000) as unknown as ReturnType<typeof setInterval>;
     },
-    [initializeAdapter, iframeRef, probeIntervalRef, applyPreviewAudioState, onLoadGiveUp],
+    [
+      initializeAdapter,
+      iframeRef,
+      probeIntervalRef,
+      applyPreviewAudioState,
+      onLoadGiveUp,
+      hostOwnsDeadline,
+    ],
   );
 
   const cancelPendingLoad = useCallback(() => {