@hyperframes/studio 0.8.140 → 0.8.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.140",
+  "version": "0.8.141",
   "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.140",
-    "@hyperframes/parsers": "0.8.140",
-    "@hyperframes/sdk": "0.8.140",
-    "@hyperframes/player": "0.8.140",
-    "@hyperframes/studio-server": "0.8.140",
-    "@hyperframes/shader-transitions": "0.8.140"
+    "@hyperframes/core": "0.8.141",
+    "@hyperframes/player": "0.8.141",
+    "@hyperframes/parsers": "0.8.141",
+    "@hyperframes/sdk": "0.8.141",
+    "@hyperframes/shader-transitions": "0.8.141",
+    "@hyperframes/studio-server": "0.8.141"
   },
   "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.140"
+    "@hyperframes/producer": "0.8.141"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -344,6 +344,22 @@ describe("NLEPreview", () => {
       view.cleanup();
     });
 
+    it("tells the preview how large it shows once a zoom settles, which the player cannot see", () => {
+      const view = renderPreview();
+      const frame = view.host.querySelector<HTMLElement>('[data-testid="mock-player"]')!;
+      const postMessage = vi.fn();
+      Object.defineProperty(frame, "contentWindow", { value: { postMessage } });
+      Object.defineProperty(frame, "offsetWidth", { value: 800 });
+      frame.getBoundingClientRect = () => ({ width: 1600 }) as DOMRect;
+
+      pinchIn(view, 10);
+      expect(postMessage).toHaveBeenLastCalledWith(
+        expect.objectContaining({ action: "set-display-scale", scale: 2 }),
+        "*",
+      );
+      view.cleanup();
+    });
+
     it("says how far it is zoomed, shows where in the frame, and Fit puts it back", () => {
       const view = renderPreview();
       expect([chip(view), navigator(view)]).toEqual([null, null]);

package/src/components/nle/NLEPreview.tsx

@@ -12,6 +12,7 @@ import {
   type RefObject,
 } from "react";
 import { Player } from "../../player";
+import { postFrameDisplayScale } from "../../player/lib/runtimeProtocol";
 import type { NLEContextValue } from "./NLEContext";
 import {
   DEFAULT_PREVIEW_ZOOM,
@@ -158,6 +159,7 @@ export const NLEPreview = memo(function NLEPreview({
 
   const zoomRef = useRef<PreviewZoomState>(DEFAULT_PREVIEW_ZOOM);
   const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(DEFAULT_PREVIEW_ZOOM);
+  useEffect(() => postFrameDisplayScale(previewIframeRef.current), [settledZoom]);
   const hudRef = useRef<HTMLDivElement>(null);
   const hudTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

package/src/components/sidebar/CompositionsTab.thumbnails.test.tsx

@@ -247,6 +247,49 @@ describe("composition card thumbnails", () => {
     expect(URL.revokeObjectURL).not.toHaveBeenCalledWith("blob:frame-2");
   });
 
+  it("tell a hover preview how large it shows, so its videos are not copied at source size", () => {
+    vi.useFakeTimers();
+    try {
+      const host = mount();
+      const card = host.querySelector<HTMLElement>('[aria-label^="Open composition"]')!;
+      act(() => {
+        card.dispatchEvent(
+          new MouseEvent("pointerover", { bubbles: true, relatedTarget: document.body }),
+        );
+      });
+      act(() => vi.advanceTimersByTime(300));
+      const frame = host.querySelector("iframe")!;
+      const postMessage = vi.fn();
+      Object.defineProperty(frame, "contentWindow", { value: { postMessage } });
+      Object.defineProperty(frame, "offsetWidth", { value: 1920 });
+      frame.getBoundingClientRect = () => ({ width: 80 }) as DOMRect;
+      act(() => {
+        frame.dispatchEvent(new Event("load"));
+      });
+      expect(postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({ action: "set-display-scale", scale: 80 / 1920 }),
+        "*",
+      );
+
+      // A module-script composition starts listening only after load, then says it is ready.
+      postMessage.mockClear();
+      act(() => {
+        window.dispatchEvent(
+          new MessageEvent("message", {
+            source: frame.contentWindow,
+            data: { source: "hf-preview", type: "ready" },
+          }),
+        );
+      });
+      expect(postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({ action: "set-display-scale", scale: 80 / 1920 }),
+        "*",
+      );
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it("show a fallback when the render fails, and retry it at the next content revision", async () => {
     const host = mount();
     renders[0]!.answer(500);

package/src/components/sidebar/CompositionsTab.tsx

@@ -13,6 +13,7 @@ import {
   THUMBNAIL_SEEK_TIME_SECONDS,
 } from "../../player/components/CompositionThumbnail";
 import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
+import { postFrameDisplayScale } from "../../player/lib/runtimeProtocol";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { thumbnailRevisionOf } from "../../player/store/thumbnailSlice";
 import { encodePreviewPath } from "../../player/components/thumbnailUtils";
@@ -258,6 +259,22 @@ function CompCard({
     if (hovered) requestIframePlaybackSync(true);
   }, [hovered, requestIframePlaybackSync]);
 
+  useEffect(() => {
+    if (livePreviewLoaded) postFrameDisplayScale(iframeRef.current);
+  }, [livePreviewLoaded, previewScale]);
+
+  useEffect(() => {
+    if (!hovered) return;
+    const onRuntimeReady = (event: MessageEvent) => {
+      const frame = iframeRef.current;
+      if (frame && event.source === frame.contentWindow && event.data?.type === "ready") {
+        postFrameDisplayScale(frame);
+      }
+    };
+    window.addEventListener("message", onRuntimeReady);
+    return () => window.removeEventListener("message", onRuntimeReady);
+  }, [hovered]);
+
   useEffect(() => {
     return () => {
       if (hoverTimer.current) clearTimeout(hoverTimer.current);

package/src/player/lib/runtimeProtocol.ts

@@ -1,4 +1,5 @@
 import {
+  frameDisplayScale,
   inspectRuntimeProtocol,
   runtimeProtocolMetadata,
   type RuntimeProtocolInspection,
@@ -34,6 +35,11 @@ export function postRuntimeControlMessage(
   target?.postMessage(createRuntimeControlMessage(action, payload, fps), "*");
 }
 
+export function postFrameDisplayScale(iframe: HTMLIFrameElement | null | undefined): void {
+  const scale = iframe && frameDisplayScale(iframe);
+  if (scale) postRuntimeControlMessage(iframe.contentWindow, "set-display-scale", { scale });
+}
+
 export function inspectStudioRuntimeMessage(value: unknown): RuntimeProtocolInspection {
   return inspectRuntimeProtocol(value, 30);
 }