@hyperframes/studio 0.8.185 → 0.8.186

package/dist/index.html

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

package/dist/index.js

@@ -72983,6 +72983,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
+import { htmlInCanvasForm } from "@hyperframes/core/html-in-canvas";
 import { useState as useState109, useEffect as useEffect106, useCallback as useCallback95, useRef as useRef119, useMemo as useMemo69 } from "react";
 
 // src/components/renders/serverError.ts
@@ -73206,6 +73207,9 @@ function markFeedbackDismissed() {
 }
 
 // src/components/renders/useRenderQueue.ts
+function canPreviewMotionBlur() {
+  return typeof document !== "undefined" && htmlInCanvasForm() !== null;
+}
 function hiddenIdsKey(projectId) {
   return `hf-studio-hidden-renders:${projectId}`;
 }
@@ -73320,7 +73324,8 @@ function useRenderQueue(projectId, activeCompPathRef) {
       const body = {
         fps,
         quality,
-        format
+        format,
+        previewMotionBlur: canPreviewMotionBlur()
       };
       if (browserTelemetryAllowed()) {
         body.telemetryDistinctId = getAnonymousId();

package/package.json

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

package/src/components/renders/useRenderQueue.ts

@@ -1,3 +1,4 @@
+import { htmlInCanvasForm } from "@hyperframes/core/html-in-canvas";
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import type { CanvasResolution } from "@hyperframes/parsers";
@@ -10,6 +11,11 @@ import { ffmpegInstallMessage, useFfmpegStatus } from "./useFfmpegStatus";
 import { requestStudioFeedback, type FeedbackContext } from "../feedback/feedbackTrigger";
 import { studioApiFetch } from "../../utils/studioApiFetch";
 
+// WYSIWYG: the preview iframe runs in this browser, so a render blurs only if this one can.
+function canPreviewMotionBlur(): boolean {
+  return typeof document !== "undefined" && htmlInCanvasForm() !== null;
+}
+
 export interface RenderJob {
   id: string;
   status: "rendering" | "complete" | "failed" | "cancelled";
@@ -238,10 +244,12 @@ export function useRenderQueue(
         gpu?: boolean;
         telemetryDistinctId?: string;
         telemetryOptOut?: boolean;
+        previewMotionBlur: boolean;
       } = {
         fps,
         quality,
         format,
+        previewMotionBlur: canPreviewMotionBlur(),
       };
       // The id is MINTED by getAnonymousId(), so calling it unconditionally
       // created a telemetry identity for a profile that had opted out — and

package/src/components/renders/useRenderQueueMotionBlur.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment happy-dom
+
+// WYSIWYG: a render only blurs what the Studio preview could show, and only the browser knows
+// whether it has html-in-canvas. The request body is how it tells the server.
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { startRenderAndReadBody, type MountedQueue } from "./renderQueueTestHarness";
+
+vi.mock("../../telemetry/events", () => ({ trackStudioRenderStart: vi.fn() }));
+
+const { useRenderQueue } = await import("./useRenderQueue");
+
+let queue: MountedQueue | null = null;
+
+async function startRenderBody(): Promise<Record<string, unknown>> {
+  const started = await startRenderAndReadBody(useRenderQueue, {
+    opts: { fps: 30, quality: "standard", format: "mp4" },
+  });
+  queue = started.queue;
+  return started.body;
+}
+
+function stubHtmlInCanvas(members: string[]): void {
+  vi.stubGlobal(
+    "CanvasRenderingContext2D",
+    class {
+      drawElementImage(): void {}
+    },
+  );
+  const proto = HTMLCanvasElement.prototype as unknown as Record<string, unknown>;
+  for (const name of ["requestPaint", ...members]) proto[name] = () => {};
+}
+
+afterEach(() => {
+  queue?.unmount();
+  queue = null;
+  document.body.innerHTML = "";
+  for (const name of ["requestPaint", "layoutSubtree", "updateElementGeometry"]) {
+    delete (HTMLCanvasElement.prototype as unknown as Record<string, unknown>)[name];
+  }
+  vi.unstubAllGlobals();
+});
+
+describe("render request previewMotionBlur", () => {
+  it("is false in a browser without html-in-canvas", async () => {
+    expect((await startRenderBody())["previewMotionBlur"]).toBe(false);
+  });
+
+  it.each([
+    ["the layoutsubtree form", "layoutSubtree"],
+    ["the content=drawable form", "updateElementGeometry"],
+  ])("is true in a browser with html-in-canvas in %s", async (_name, member) => {
+    stubHtmlInCanvas([member]);
+    expect((await startRenderBody())["previewMotionBlur"]).toBe(true);
+  });
+
+  it("is false when html-in-canvas has neither known form", async () => {
+    stubHtmlInCanvas([]);
+    expect((await startRenderBody())["previewMotionBlur"]).toBe(false);
+  });
+});