@hyperframes/studio 0.8.192 → 0.8.194

package/dist/assets/{index-BYbFcRR0.js → index-D9kA6JUX.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-CHu83hHM.js";/*!
+import{n as Qi}from"./index-CAQ7OcNJ.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/{chunk-6SXUUBPD.js → chunk-ORLUDHTU.js}

@@ -1028,7 +1028,8 @@ function sceneSwapFor(iframe) {
       () => deadline.abort(new Error("the preview took too long to swap")),
       SCENE_SWAP_MS
     );
-    cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
+    const onCancel = () => deadline.abort(cancel?.reason);
+    cancel?.addEventListener("abort", onCancel, { once: true });
     const swapping = (async () => {
       const response = await studioApiFetch(url, { signal: deadline.signal });
       if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
@@ -1043,6 +1044,7 @@ function sceneSwapFor(iframe) {
       await Promise.race([swapping, expired]);
     } finally {
       clearTimeout(timer);
+      cancel?.removeEventListener("abort", onCancel);
     }
     iframe.dispatchEvent(new Event(SCENES_SWAPPED));
   };

package/dist/index.html

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

package/dist/index.js

@@ -48,7 +48,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-6SXUUBPD.js";
+} from "./chunk-ORLUDHTU.js";
 import {
   Button,
   ContextMenu,
@@ -17608,7 +17608,7 @@ async function writeProjectFilesWithHistoryInQueue({
 
 // src/utils/gsapSoftReload.ts
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR as COLOR_GRADING_SOURCE_HIDDEN_ATTR2 } from "@hyperframes/core/color-grading";
-import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
+import { GSAP_BASE_URL_META, motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 
 // src/utils/authoredSource.ts
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
@@ -17870,6 +17870,12 @@ function fileDocs(ownFile, written, nestedFiles) {
 
 // src/utils/gsapSoftReload.ts
 var pendingReadyRetry = null;
+function previewMotionPathUrl(doc, version) {
+  const baseUrl = doc.head.querySelector(
+    `meta[name="${GSAP_BASE_URL_META}"]`
+  )?.content;
+  return motionPathPluginUrl(version, baseUrl);
+}
 function ensureMotionPathPluginLoaded(iframe) {
   if (pendingReadyRetry) window.removeEventListener("message", pendingReadyRetry);
   pendingReadyRetry = null;
@@ -17900,7 +17906,7 @@ function ensureMotionPathPluginLoaded(iframe) {
   try {
     win.__hfMotionPathPluginLoading = true;
     const pluginScript = doc.createElement("script");
-    pluginScript.src = motionPathPluginUrl(win.gsap?.version);
+    pluginScript.src = previewMotionPathUrl(doc, win.gsap?.version);
     const finalize = () => {
       win.__hfMotionPathPluginLoading = false;
       try {
@@ -18086,7 +18092,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
       }
       win.__hfMotionPathPluginLoading = true;
       const pluginScript = doc.createElement("script");
-      pluginScript.src = motionPathPluginUrl(win.gsap?.version);
+      pluginScript.src = previewMotionPathUrl(doc, win.gsap?.version);
       pluginScript.onload = () => {
         win.__hfMotionPathPluginLoading = false;
         executeScript();
@@ -98684,7 +98690,7 @@ function levelOf(settings) {
   return settings.shutterDeg > STRONG_ABOVE ? "strong" : "subtle";
 }
 function patchForLevel(level) {
-  return level === "off" ? { enabled: false } : { enabled: true, ...LEVEL_SETTINGS[level] };
+  return level === "off" ? { enabled: false, events: false } : { enabled: true, events: true, ...LEVEL_SETTINGS[level] };
 }
 
 // src/components/panels/MotionBlurPanel.tsx

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-6SXUUBPD.js";
+} from "./chunk-ORLUDHTU.js";
 import "./chunk-7HZGKFFU.js";
 import "./chunk-T43DM7Q6.js";
 import "./chunk-MLKGABMK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.192",
+  "version": "0.8.194",
   "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.192",
-    "@hyperframes/parsers": "0.8.192",
-    "@hyperframes/player": "0.8.192",
-    "@hyperframes/sdk": "0.8.192",
-    "@hyperframes/shader-transitions": "0.8.192",
-    "@hyperframes/studio-server": "0.8.192"
+    "@hyperframes/parsers": "0.8.194",
+    "@hyperframes/core": "0.8.194",
+    "@hyperframes/sdk": "0.8.194",
+    "@hyperframes/shader-transitions": "0.8.194",
+    "@hyperframes/player": "0.8.194",
+    "@hyperframes/studio-server": "0.8.194"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.192"
+    "@hyperframes/producer": "0.8.194"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/panels/MotionBlurPanel.test.tsx

@@ -130,20 +130,29 @@ describe("MotionBlurPanel", () => {
     expect(html).toContain('data-motion-blur-samples="64"');
   });
 
-  it("Off removes data-motion-blur and leaves every other setting on the root", async () => {
+  it("Off removes data-motion-blur and its events, and leaves the other settings on the root", async () => {
     const host = await mount(
       ' data-motion-blur="on" data-motion-blur-shutter="720" data-motion-blur-samples="64" data-motion-blur-tier="filter" data-motion-blur-events="on"',
     );
     await click(radio(host, "Off"));
     const html = files["index.html"] ?? "";
     expect(html).not.toContain('data-motion-blur="on"');
-    for (const kept of ['shutter="720"', 'samples="64"', 'tier="filter"', 'events="on"']) {
+    expect(html).not.toContain("data-motion-blur-events");
+    for (const kept of ['shutter="720"', 'samples="64"', 'tier="filter"']) {
       expect(html).toContain(`data-motion-blur-${kept}`);
     }
   });
 
+  it("turns the events attribute on with Subtle and Strong, so callback-driven motion is found", async () => {
+    const host = await mount();
+    await click(radio(host, "Subtle"));
+    expect(files["index.html"]).toContain('data-motion-blur-events="on"');
+    await click(radio(host, "Strong"));
+    expect(files["index.html"]).toContain('data-motion-blur-events="on"');
+  });
+
   it("writes nothing when the chosen level is already set", async () => {
-    const host = await mount(' data-motion-blur="on"');
+    const host = await mount(' data-motion-blur="on" data-motion-blur-events="on"');
     await click(radio(host, "Subtle"));
     expect(writeProjectFile).not.toHaveBeenCalled();
   });

package/src/components/panels/motionBlurPanelModel.test.ts

@@ -130,9 +130,19 @@ describe("levelOf and patchForLevel", () => {
   });
 
   it("sets Subtle to the default blur and Strong to the maximum, and leaves the rest alone for Off", () => {
-    expect(patchForLevel("subtle")).toEqual({ enabled: true, shutterDeg: 240, samples: null });
-    expect(patchForLevel("strong")).toEqual({ enabled: true, shutterDeg: 720, samples: 64 });
-    expect(patchForLevel("off")).toEqual({ enabled: false });
+    expect(patchForLevel("subtle")).toEqual({
+      enabled: true,
+      events: true,
+      shutterDeg: 240,
+      samples: null,
+    });
+    expect(patchForLevel("strong")).toEqual({
+      enabled: true,
+      events: true,
+      shutterDeg: 720,
+      samples: 64,
+    });
+    expect(patchForLevel("off")).toEqual({ enabled: false, events: false });
   });
 
   it("reads back as the level that was chosen", () => {

package/src/components/panels/motionBlurPanelModel.ts

@@ -92,7 +92,9 @@ export function levelOf(settings: MotionBlurSettings): BlurLevel {
   return settings.shutterDeg > STRONG_ABOVE ? "strong" : "subtle";
 }
 
-/** What choosing `level` changes; Off leaves the shutter, samples and every other setting where they were. */
+/** What choosing `level` changes; blur on turns events on too, and Off leaves the shutter, samples and the rest alone. */
 export function patchForLevel(level: BlurLevel): Partial<MotionBlurSettings> {
-  return level === "off" ? { enabled: false } : { enabled: true, ...LEVEL_SETTINGS[level] };
+  return level === "off"
+    ? { enabled: false, events: false }
+    : { enabled: true, events: true, ...LEVEL_SETTINGS[level] };
 }

package/src/player/sceneSwap.test.ts

@@ -98,6 +98,28 @@ describe("sceneSwapFor", () => {
     expect(swap).not.toHaveBeenCalled();
   });
 
+  it("leaves no listener on the caller's cancel signal once swaps settle, so a swapped film can be freed", async () => {
+    vi.spyOn(globalThis, "fetch").mockImplementation(async () => new Response("<html></html>"));
+    const cancel = new AbortController();
+    const live = new Set<unknown>();
+    const { signal } = cancel;
+    const add = signal.addEventListener.bind(signal);
+    const remove = signal.removeEventListener.bind(signal);
+    signal.addEventListener = ((type: string, listener: EventListener, options?: unknown) => {
+      live.add(listener);
+      add(type, listener, options as AddEventListenerOptions);
+    }) as AbortSignal["addEventListener"];
+    signal.removeEventListener = ((type: string, listener: EventListener, options?: unknown) => {
+      live.delete(listener);
+      remove(type, listener, options as EventListenerOptions);
+    }) as AbortSignal["removeEventListener"];
+    const { iframe } = swappableIframe();
+    const refused = swappableIframe(vi.fn(async () => Promise.reject(new Error("refused")))).iframe;
+    for (let n = 0; n < 3; n++) await sceneSwapFor(iframe)!("/preview", () => true, signal);
+    await expect(sceneSwapFor(refused)!("/preview", () => true, signal)).rejects.toThrow("refused");
+    expect(live.size).toBe(0);
+  });
+
   it("swaps a document that arrives in time", async () => {
     vi.spyOn(globalThis, "fetch").mockImplementation(async () => new Response("<html></html>"));
     const { iframe, swap } = swappableIframe();

package/src/player/sceneSwap.ts

@@ -88,7 +88,8 @@ export function sceneSwapFor(
       () => deadline.abort(new Error("the preview took too long to swap")),
       SCENE_SWAP_MS,
     );
-    cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
+    const onCancel = () => deadline.abort(cancel?.reason);
+    cancel?.addEventListener("abort", onCancel, { once: true });
     const swapping = (async () => {
       const response = await studioApiFetch(url, { signal: deadline.signal });
       if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
@@ -104,6 +105,7 @@ export function sceneSwapFor(
       await Promise.race([swapping, expired]);
     } finally {
       clearTimeout(timer);
+      cancel?.removeEventListener("abort", onCancel);
     }
     iframe.dispatchEvent(new Event(SCENES_SWAPPED));
   };

package/src/utils/gsapSoftReload.test.ts

@@ -318,6 +318,28 @@ window.__timelines["root"] = tl;`;
     expect(contentWindow.__hfMotionPathPluginLoading).toBe(false);
   });
 
+  it("loads a missing soft-reload plugin from the iframe mirror and reports its failure", () => {
+    const { iframe, contentWindow } = buildMockIframe({
+      gsap: { timeline: vi.fn(), registerPlugin: vi.fn(), version: "3.14.2" },
+    });
+    const head = iframe.contentDocument!.head;
+    const meta = document.createElement("meta");
+    meta.name = "hyperframes-gsap-base-url";
+    meta.content = "http://localhost:8080/vendor/npm";
+    head.appendChild(meta);
+    const onAsyncFailure = vi.fn();
+    expect(applySoftReload(iframe, MOTION_PATH_SCRIPT_TEXT, { onAsyncFailure })).toBe("applied");
+    const plugin = head.querySelector("script");
+    expect(plugin?.src).toBe(
+      "http://localhost:8080/vendor/npm/gsap@3.14.2/dist/MotionPathPlugin.min.js",
+    );
+    plugin?.onerror?.(new Event("error"));
+    expect(onAsyncFailure).toHaveBeenCalledTimes(1);
+    expect(contentWindow.__hfForceTimelineRebind).not.toHaveBeenCalled();
+    expect(contentWindow.__hfMotionPathPluginLoading).toBe(false);
+    expect(head.querySelectorAll("script")).toHaveLength(1);
+  });
+
   it('returns "cannot-soft-reload" when multiple GSAP scripts exist (ambiguous)', () => {
     const script1 = document.createElement("script");
     script1.textContent = "const tl = gsap.timeline({ paused: true });";
@@ -490,6 +512,26 @@ describe("ensureMotionPathPluginLoaded", () => {
     );
   });
 
+  it("preloads from the iframe mirror once, retaining the runtime version", () => {
+    const { iframe, appendedScripts, contentWindow, registerPlugin } = buildBootstrapIframe({
+      gsap: { version: "3.14.2", registerPlugin: vi.fn() },
+    });
+    const meta = document.createElement("meta");
+    meta.name = "hyperframes-gsap-base-url";
+    meta.content = "http://localhost:8080/vendor/npm";
+    iframe.contentDocument!.head.appendChild(meta);
+    ensureMotionPathPluginLoaded(iframe);
+    ensureMotionPathPluginLoaded(iframe);
+    expect(appendedScripts).toHaveLength(1);
+    expect(appendedScripts[0]!.src).toBe(
+      "http://localhost:8080/vendor/npm/gsap@3.14.2/dist/MotionPathPlugin.min.js",
+    );
+    appendedScripts[0]!.onerror?.(new Event("error"));
+    expect(contentWindow.__hfMotionPathPluginLoading).toBe(false);
+    expect(registerPlugin).not.toHaveBeenCalled();
+    expect(appendedScripts).toHaveLength(1);
+  });
+
   it("appends the plugin script once and registers it on load", () => {
     const { iframe, contentWindow, appendedScripts, registerPlugin } = buildBootstrapIframe();
     ensureMotionPathPluginLoaded(iframe);

package/src/utils/gsapSoftReload.ts

@@ -1,5 +1,5 @@
 import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
-import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
+import { GSAP_BASE_URL_META, motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 import { findAuthoredElement } from "./authoredSource";
 import { applyAuthoredInlineOpacity, readStampedAuthoredOpacity } from "./authoredOpacity";
 import {
@@ -50,6 +50,13 @@ type IframeWindow = Window & {
 // At most one preview waits for its runtime; a newer load replaces it, so a frame that never boots is not kept alive.
 let pendingReadyRetry: ((event: MessageEvent) => void) | null = null;
 
+function previewMotionPathUrl(doc: Document, version?: string): string {
+  const baseUrl = doc.head.querySelector<HTMLMetaElement>(
+    `meta[name="${GSAP_BASE_URL_META}"]`,
+  )?.content;
+  return motionPathPluginUrl(version, baseUrl);
+}
+
 export function ensureMotionPathPluginLoaded(iframe: HTMLIFrameElement | null): void {
   if (pendingReadyRetry) window.removeEventListener("message", pendingReadyRetry);
   pendingReadyRetry = null;
@@ -86,7 +93,7 @@ export function ensureMotionPathPluginLoaded(iframe: HTMLIFrameElement | null):
   try {
     win.__hfMotionPathPluginLoading = true;
     const pluginScript = doc.createElement("script");
-    pluginScript.src = motionPathPluginUrl(win.gsap?.version);
+    pluginScript.src = previewMotionPathUrl(doc, win.gsap?.version);
     const finalize = () => {
       win.__hfMotionPathPluginLoading = false;
       try {
@@ -480,7 +487,7 @@ export function applySoftReload(
       }
       win.__hfMotionPathPluginLoading = true;
       const pluginScript = doc.createElement("script");
-      pluginScript.src = motionPathPluginUrl(win.gsap?.version);
+      pluginScript.src = previewMotionPathUrl(doc, win.gsap?.version);
       pluginScript.onload = () => {
         win.__hfMotionPathPluginLoading = false;
         executeScript();