@hyperframes/studio 0.8.184 → 0.8.186

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BABXr78Q.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

@@ -26696,7 +26696,7 @@ var GUARDRAIL_LINES = [
   "- Make a targeted change to this element only, unless the request is a timeline edit.",
   "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
   "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
-  "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
+  "- For timeline edits (trim, split, speed, volume, copy, swap), use the `hyperframes timeline` edit commands (`hyperframes-cli` skill) or the exact attribute forms in the `hyperframes` skill's `references/format.md`.",
   "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors."
 ];
 function formatBoundingBox(bounds) {
@@ -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.184",
+  "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.184",
-    "@hyperframes/parsers": "0.8.184",
-    "@hyperframes/sdk": "0.8.184",
-    "@hyperframes/shader-transitions": "0.8.184",
-    "@hyperframes/studio-server": "0.8.184",
-    "@hyperframes/player": "0.8.184"
+    "@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.184"
+    "@hyperframes/producer": "0.8.186"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/audioFxTelemetry.ts

@@ -198,7 +198,7 @@ export function trackEqChanged(band: string, value: number): void {
  *
  * This is how agent-applied effects become visible at all. An agent asked to
  * fix a mix does not drive the panel — it edits the composition HTML, or runs
- * `scripts/carve.mjs`, and the rack simply finds the result already present.
+ * `skills/media-use/audio/scripts/carve.mjs`, and the rack simply finds the result already present.
  * None of the events above will ever fire for that work.
  *
  * So the panel reports the shape of what it was handed, and how many edits this

package/src/components/editor/domEditingAgentPrompt.test.ts

@@ -81,7 +81,7 @@ describe("buildElementAgentPrompt", () => {
         "- Make a targeted change to this element only, unless the request is a timeline edit.",
         "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
         "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
-        "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
+        "- For timeline edits (trim, split, speed, volume, copy, swap), use the `hyperframes timeline` edit commands (`hyperframes-cli` skill) or the exact attribute forms in the `hyperframes` skill's `references/format.md`.",
         "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
       ].join("\n"),
     );
@@ -164,7 +164,7 @@ describe("buildPickerAgentPrompt", () => {
       "- Make a targeted change to this element only, unless the request is a timeline edit.",
       "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
       "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
-      "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
+      "- For timeline edits (trim, split, speed, volume, copy, swap), use the `hyperframes timeline` edit commands (`hyperframes-cli` skill) or the exact attribute forms in the `hyperframes` skill's `references/format.md`.",
       "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
     ].join("\n");
     expect(domPrompt.endsWith(guardrails)).toBe(true);

package/src/components/editor/domEditingAgentPrompt.ts

@@ -31,7 +31,7 @@ const GUARDRAIL_LINES = [
   "- Make a targeted change to this element only, unless the request is a timeline edit.",
   "- Preserve the rest of the composition and its timing, except what a timeline edit changes.",
   "- Do not modify other elements' data-* attributes or positioning, except where the requested timeline edit requires it (split, retime, reorder, copy a group, swap media).",
-  "- For timeline edits (trim, split, speed, volume, copy, swap), follow the creator-editing-recipes reference of the hyperframes-core skill and use its exact attribute forms.",
+  "- For timeline edits (trim, split, speed, volume, copy, swap), use the `hyperframes timeline` edit commands (`hyperframes-cli` skill) or the exact attribute forms in the `hyperframes` skill's `references/format.md`.",
   "- Prefer existing inline styles or existing CSS rules for this element over adding unrelated selectors.",
 ];
 

package/src/components/editor/useFxChainObserved.ts

@@ -16,7 +16,7 @@ import type { DomEditSelection } from "./domEditingTypes";
 /**
  * This is the only way agent-applied effects become visible. An agent asked to
  * fix a mix does not drive this panel — it edits the composition HTML, or runs
- * `scripts/carve.mjs`, and the rack simply finds the work already done. Not
+ * `skills/media-use/audio/scripts/carve.mjs`, and the rack simply finds the work already done. Not
  * one of the panel's own events fires for any of it.
  *
  * So: watch the chain's shape, and report it when it changes without a panel

package/src/components/feedback/projectProvenance.ts

@@ -3,7 +3,7 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 // How this project came to exist, and roughly what shape it is.
 //
 // A crash report says what broke. It does not say what the user was working ON,
-// and "a project made by /faceless-explainer with 14 compositions and 60 assets"
+// and "a project made by /slideshow with 14 compositions and 60 assets"
 // reproduces a crash that "Cannot read properties of undefined" never will.
 //
 // Held at module scope on purpose: a crash unmounts the React tree, so anything

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);
+  });
+});

package/src/utils/previewSafeMargins.test.ts

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from "node:fs";
+import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
 import {
@@ -8,7 +8,7 @@ import {
   safeBoxInsetPercent,
 } from "./previewSafeMargins";
 
-const SKILL_PATH = join(import.meta.dirname, "../../../../skills/hyperframes-studio/SKILL.md");
+const SKILL_PATH = join(import.meta.dirname, "../../../../skills/hyperframes/SKILL.md");
 
 describe("safe boxes", () => {
   it("are the 90% and 80% boxes, inset 5% and 10% from every edge", () => {
@@ -17,15 +17,15 @@ describe("safe boxes", () => {
   });
 });
 
-// Skipped until the hyperframes-studio skill exists on this branch.
-describe.runIf(existsSync(SKILL_PATH))("hyperframes-studio skill matches the constants", () => {
-  it("has a safe-margins line naming both percentages", () => {
+describe("the hyperframes skill matches the constants", () => {
+  it("has a safe-box line naming both percentages", () => {
     const skill = readFileSync(SKILL_PATH, "utf8");
     const line = skill
       .split("\n")
       .find(
         (l) =>
-          /\bsafe margins?\b/i.test(l) &&
+          /action-safe/i.test(l) &&
+          /title-safe/i.test(l) &&
           l.includes(`${ACTION_SAFE_PERCENT}%`) &&
           l.includes(`${TITLE_SAFE_PERCENT}%`),
       );