@hyperframes/studio 0.8.137 → 0.8.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.137",
+  "version": "0.8.138",
   "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.137",
-    "@hyperframes/sdk": "0.8.137",
-    "@hyperframes/player": "0.8.137",
-    "@hyperframes/parsers": "0.8.137",
-    "@hyperframes/studio-server": "0.8.137",
-    "@hyperframes/shader-transitions": "0.8.137"
+    "@hyperframes/parsers": "0.8.138",
+    "@hyperframes/core": "0.8.138",
+    "@hyperframes/player": "0.8.138",
+    "@hyperframes/sdk": "0.8.138",
+    "@hyperframes/shader-transitions": "0.8.138",
+    "@hyperframes/studio-server": "0.8.138"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -73,6 +73,7 @@
     "@types/react-dom": "19",
     "@vitejs/plugin-react": "^4.0.0",
     "chokidar": "^4.0.3",
+    "esbuild": "^0.25.12",
     "fake-indexeddb": "^6.2.5",
     "puppeteer-core": "^25.2.1",
     "tailwindcss": "^4.3.3",
@@ -81,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.137"
+    "@hyperframes/producer": "0.8.138"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -357,11 +357,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
   });
   const frameCapture = useStableHandlers(frameCaptureResult, projectId);
-  const {
-    consoleErrors,
-    setConsoleErrors,
-    resetErrors: resetConsoleErrors,
-  } = useConsoleErrorCapture(previewIframe);
+  const { consoleErrors, setConsoleErrors } = useConsoleErrorCapture(previewIframe);
   const fileDrop = useGlobalFileDrop(timelineEditing.handleTimelineFileDrop);
   const handleToggleRecordingRef = useRef<(method?: "button" | "keyboard") => void>(() => {});
   const domEditSessionRef = useRef(domEditSession);
@@ -385,10 +381,9 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
       previewIframeRef.current = iframe;
       usePreviewIframeStore.getState().setIframe(iframe);
       appHotkeys.syncPreviewHotkeys(iframe);
-      resetConsoleErrors();
       refreshPreviewDocumentVersion();
     },
-    [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion],
+    [appHotkeys, refreshPreviewDocumentVersion],
   );
   const rightPanel = useRightPanelIntent();
   const { inspectorPanelActive, shouldShowMotionPath, shouldShowSelectedDomBounds } =

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

@@ -306,4 +306,29 @@ describe("LayersPanel preview promotion", () => {
     expect(collectedRootIds()).toEqual(["a"]);
     fetchSpy.mockRestore();
   });
+
+  it("a row press starts no text selection, so dragging a row leaves no letters highlighted", () => {
+    const doc = new Window().document;
+    doc.body.innerHTML = `<div data-composition-id="a"><div id="back"></div><div id="front"></div></div>`;
+    const iframe = document.createElement("iframe");
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    const item = (id: string) =>
+      ({
+        key: id,
+        element: doc.getElementById(id),
+        label: id,
+        depth: 0,
+        childCount: 0,
+        id,
+      }) as unknown as DomEditLayerItem;
+    mocks.collect.mockReset().mockReturnValue([item("back"), item("front")]);
+    mocks.previewIframeRef.current = iframe;
+    usePreviewIframeStore.setState({ iframe });
+    act(() => root.render(createElement(LayersPanel)));
+    act(() => void iframe.dispatchEvent(new Event("load")));
+
+    const rows = [...host.querySelectorAll("[data-layer-index]")];
+    expect(rows).toHaveLength(2);
+    expect(rows.every((row) => row.closest(".select-none"))).toBe(true);
+  });
 });

package/src/components/editor/LayersPanel.tsx

@@ -433,7 +433,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
       </div>
       <div
         ref={scrollContainerRef}
-        className="relative min-h-0 flex-1 overflow-y-auto py-1"
+        className="relative min-h-0 flex-1 select-none overflow-y-auto py-1"
         onPointerMove={handleContainerPointerMove}
         onPointerUp={handleContainerPointerUp}
         onPointerCancel={handleContainerPointerUp}

package/src/hooks/useConsoleErrorCapture.test.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, expect, it } from "vitest";
+import { STUDIO_PREVIEW_ERRORS } from "@hyperframes/core/studio-preview-mark";
+import { useConsoleErrorCapture } from "./useConsoleErrorCapture";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let capture: ReturnType<typeof useConsoleErrorCapture>;
+function Harness({ iframe }: { iframe: HTMLIFrameElement }) {
+  capture = useConsoleErrorCapture(iframe);
+  return null;
+}
+
+function previewFrame() {
+  const previewWindow = Object.assign(new EventTarget(), { console: { error: () => undefined } });
+  const iframe = document.createElement("iframe");
+  Object.defineProperty(iframe, "contentWindow", { get: () => previewWindow });
+  return { iframe, previewWindow };
+}
+
+const shown = () => capture.consoleErrors?.map((finding) => finding.message);
+
+let root: Root | null = null;
+afterEach(async () => {
+  await act(async () => root?.unmount());
+  root = null;
+});
+
+it("shows the errors a preview raised before its load, once each", async () => {
+  const raisedBeforeLoad = "Uncaught Error: GSAP could not load from a or b";
+  const { iframe, previewWindow } = previewFrame();
+
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(React.createElement(Harness, { iframe })));
+  Object.assign(previewWindow, { [STUDIO_PREVIEW_ERRORS]: [raisedBeforeLoad] });
+  await act(async () => iframe.dispatchEvent(new Event("load")));
+
+  expect(shown()).toEqual([raisedBeforeLoad]);
+});
+
+it("shows a loaded preview's errors once when the capture attaches to it twice", async () => {
+  const raised = "Uncaught Error: GSAP could not load from a or b";
+  const { iframe, previewWindow } = previewFrame();
+  Object.assign(previewWindow, { [STUDIO_PREVIEW_ERRORS]: [raised] });
+
+  root = createRoot(document.createElement("div"));
+  const harness = React.createElement(Harness, { iframe });
+  await act(async () => root?.render(React.createElement(React.StrictMode, null, harness)));
+
+  expect(shown()).toEqual([raised]);
+});
+
+it("keeps listening after reading a preview's very long error list", async () => {
+  const { iframe, previewWindow } = previewFrame();
+  const raised = Array.from({ length: 200_000 }, (_, i) => `Uncaught Error: ${i}`);
+  Object.assign(previewWindow, { [STUDIO_PREVIEW_ERRORS]: raised });
+
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(React.createElement(Harness, { iframe })));
+  const live = new ErrorEvent("error", { message: "Uncaught Error: raised after attach" });
+  await act(async () => previewWindow.dispatchEvent(live));
+
+  expect(shown()?.length).toBe(raised.length + 1);
+  expect(shown()?.at(-1)).toBe("Uncaught Error: raised after attach");
+});
+
+it("clears a document's errors when its load replaces it, and when the preview goes away", async () => {
+  const { iframe, previewWindow } = previewFrame();
+  const NullableHarness = ({ frame }: { frame: HTMLIFrameElement | null }) => {
+    capture = useConsoleErrorCapture(frame);
+    return null;
+  };
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(React.createElement(NullableHarness, { frame: iframe })));
+  await act(async () =>
+    previewWindow.dispatchEvent(new ErrorEvent("error", { message: "Uncaught Error: old" })),
+  );
+  Object.assign(previewWindow, { [STUDIO_PREVIEW_ERRORS]: ["Uncaught Error: new"] });
+  await act(async () => iframe.dispatchEvent(new Event("load")));
+  expect(shown()).toEqual(["Uncaught Error: new"]);
+
+  await act(async () => root?.render(React.createElement(NullableHarness, { frame: null })));
+  expect(capture.consoleErrors).toBeNull();
+});

package/src/hooks/useConsoleErrorCapture.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { STUDIO_PREVIEW_ERRORS } from "@hyperframes/core/studio-preview-mark";
 import type { LintFinding } from "../components/LintModal";
 
 /**
@@ -16,6 +17,7 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
+    resetErrors();
     if (!previewIframe) return;
 
     let patchedWin: (Window & typeof globalThis) | null = null;
@@ -40,49 +42,43 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
 
     const attachErrorCapture = () => {
       detachErrorCapture();
+      resetErrors();
       try {
         const win = previewIframe.contentWindow as (Window & typeof globalThis) | null;
         if (!win) return;
         if ((win as unknown as Record<string, unknown>).__hfErrorCapture) return;
         (win as unknown as Record<string, unknown>).__hfErrorCapture = true;
         patchedWin = win;
-        origConsoleError = win.console.error.bind(win.console);
-        win.console.error = function (...args: unknown[]) {
-          origConsoleError!(...args);
-          const text = args.map((a) => (a instanceof Error ? a.message : String(a))).join(" ");
-          if (text.includes("favicon")) return;
+        const record = (texts: readonly string[]) => {
+          if (texts.length === 0) return;
           consoleErrorsRef.current = [
             ...consoleErrorsRef.current,
-            { severity: "error", message: text },
+            ...texts.map((message) => ({ severity: "error" as const, message })),
           ];
           setConsoleErrors([...consoleErrorsRef.current]);
         };
-        errorHandler = (e: ErrorEvent) => {
-          const text = e.message || String(e);
-          consoleErrorsRef.current = [
-            ...consoleErrorsRef.current,
-            { severity: "error", message: text },
-          ];
-          setConsoleErrors([...consoleErrorsRef.current]);
+        origConsoleError = win.console.error.bind(win.console);
+        win.console.error = function (...args: unknown[]) {
+          origConsoleError!(...args);
+          const text = args.map((a) => (a instanceof Error ? a.message : String(a))).join(" ");
+          if (!text.includes("favicon")) record([text]);
         };
+        errorHandler = (e: ErrorEvent) => record([e.message || String(e)]);
         win.addEventListener("error", errorHandler);
+        const raised: unknown = Reflect.get(win, STUDIO_PREVIEW_ERRORS);
+        if (Array.isArray(raised)) record(raised.map(String));
       } catch {
         /* same-origin only */
       }
     };
 
     attachErrorCapture();
-    const handleLoad = () => {
-      consoleErrorsRef.current = [];
-      setConsoleErrors(null);
-      attachErrorCapture();
-    };
-    previewIframe.addEventListener("load", handleLoad);
+    previewIframe.addEventListener("load", attachErrorCapture);
     return () => {
-      previewIframe.removeEventListener("load", handleLoad);
+      previewIframe.removeEventListener("load", attachErrorCapture);
       detachErrorCapture();
     };
-  }, [previewIframe]);
+  }, [previewIframe, resetErrors]);
 
-  return { consoleErrors, setConsoleErrors, resetErrors };
+  return { consoleErrors, setConsoleErrors };
 }

package/src/styles/studio.css

@@ -45,4 +45,13 @@ body {
    */
   height: 100vh;
   height: 100dvh;
+  /*
+   * Nothing may overflow #root. Dockview parks hidden panel overlays below
+   * the dock, which made the document ~2x the viewport tall; body's
+   * overflow:hidden only blocks user scrolling, so scrollIntoView, focus()
+   * and find-in-page still scrolled the viewport and cut off the header
+   * (repro: select a clip, open the Grade group). `clip`, not `hidden`,
+   * which is itself programmatically scrollable.
+   */
+  overflow: clip;
 }

package/src/utils/gsapUndoRestore.browser.test.ts

@@ -5,7 +5,7 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import puppeteer, { type Browser } from "puppeteer-core";
-import { build } from "vite";
+import { build, type Plugin } from "esbuild";
 import { afterAll, beforeAll, expect, it, vi } from "vitest";
 import { findSystemChrome } from "../../vite.browser";
 import { writeFixture } from "../../tests/e2e/edit-accuracy/grid.mjs";
@@ -18,20 +18,29 @@ let browser: Browser;
 let undoBundle: string;
 let softReloadBundle: string;
 
+// recast imports these, and its code that uses them is dropped from the bundle. A new
+// built-in fails the build instead of turning into an empty module the way Vite makes it.
+const emptyNodeBuiltins: Plugin = {
+  name: "empty-node-builtins",
+  setup(build) {
+    build.onResolve({ filter: /^(node:)?(fs|os)$/ }, ({ path }) => ({ path, namespace: "empty" }));
+    build.onLoad({ filter: /.*/, namespace: "empty" }, () => ({ contents: "module.exports = {}" }));
+  },
+};
+
 async function bundle(file: string, name: string): Promise<string> {
   const out = await build({
-    configFile: false,
-    logLevel: "silent",
-    resolve: {
-      alias: { canvas: fileURLToPath(new URL("../shims/canvasBrowserStub.js", import.meta.url)) },
-    },
-    build: {
-      write: false,
-      minify: false,
-      lib: { entry: fileURLToPath(new URL(file, import.meta.url)), formats: ["iife"], name },
-    },
+    entryPoints: [fileURLToPath(new URL(file, import.meta.url))],
+    bundle: true,
+    write: false,
+    platform: "browser",
+    format: "iife",
+    globalName: name,
+    alias: { canvas: fileURLToPath(new URL("../shims/canvasBrowserStub.js", import.meta.url)) },
+    plugins: [emptyNodeBuiltins],
+    define: { "import.meta.env": "{}" },
   });
-  return (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0].code;
+  return out.outputFiles[0]!.text;
 }
 
 beforeAll(async () => {