@hyperframes/studio 0.8.136 → 0.8.138

package/dist/ui.d.ts

@@ -93,9 +93,10 @@ interface TooltipProps {
     }>;
     /** Hover delay in ms. */
     delay?: number;
+    disabled?: boolean;
     side?: "top" | "bottom" | "left" | "right";
 }
-declare function Tooltip({ label, children, delay, side }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ label, children, delay, side, disabled, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Studio's tailwind-merge config: teaches it the two scales `theme.css`

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-NM7BXNZ7.js";
+} from "./chunk-LOVBLSMR.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.136",
+  "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.136",
-    "@hyperframes/sdk": "0.8.136",
-    "@hyperframes/shader-transitions": "0.8.136",
-    "@hyperframes/player": "0.8.136",
-    "@hyperframes/studio-server": "0.8.136",
-    "@hyperframes/parsers": "0.8.136"
+    "@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.136"
+    "@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/components/ui/Tooltip.tsx

@@ -14,6 +14,7 @@ interface TooltipProps {
   children: ReactElement<{ "aria-describedby"?: string }>;
   /** Hover delay in ms. */
   delay?: number;
+  disabled?: boolean;
   side?: "top" | "bottom" | "left" | "right";
 }
 
@@ -21,16 +22,22 @@ interface TooltipProps {
 const SIDE_OFFSET = 6;
 const VIEWPORT_MARGIN = 8;
 
-export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipProps) {
+export function Tooltip({
+  label,
+  children,
+  delay = 400,
+  side = "top",
+  disabled = false,
+}: TooltipProps) {
   const [open, setOpen] = useState(false);
   const boxRef = useRef<HTMLSpanElement>(null);
   const tooltipId = useId();
 
   return (
-    <BaseTooltip.Root open={open} onOpenChange={setOpen}>
+    <BaseTooltip.Root open={open} onOpenChange={setOpen} disabled={disabled}>
       <BaseTooltip.Trigger delay={delay} render={<span ref={boxRef} className="contents" />}>
         {cloneElement(children, {
-          "aria-describedby": open ? tooltipId : children.props["aria-describedby"],
+          "aria-describedby": open && !disabled ? tooltipId : children.props["aria-describedby"],
         })}
       </BaseTooltip.Trigger>
       <BaseTooltip.Portal>

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/player/components/ClipPeakMarks.test.tsx

@@ -3,6 +3,9 @@ import { act } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { createHappyDomRootHarness } from "./testRootHarness";
 import { ClipPeakMarks } from "./ClipPeakMarks";
+import { TimelineClip } from "./TimelineClip";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { configurable: true, value: true });
 
 const harness = createHappyDomRootHarness();
 
@@ -13,29 +16,70 @@ async function render(url: string, bins: number[], gain: number) {
   );
   const host = document.createElement("div");
   document.body.appendChild(host);
-  await act(async () => {
-    harness.mount(host).render(
-      <ClipPeakMarks peaksUrl={url} sourceWindow={{ mediaStart: 0, sourceSpan: 2 }} gain={gain}>
+  const root = harness.mount(host);
+  const view = (volume: number) => (
+    <TimelineClip
+      el={{ id: "audio", tag: "audio", start: 0, duration: 2, track: 0 }}
+      pps={16}
+      clipY={0}
+      isSelected={false}
+      isHovered={false}
+      hasCustomContent
+      capabilities={{ canMove: true, canTrimStart: true, canTrimEnd: true }}
+      isComposition={false}
+      tabIndex={0}
+      onHoverStart={() => {}}
+      onHoverEnd={() => {}}
+      onClick={() => {}}
+      onDoubleClick={() => {}}
+    >
+      <ClipPeakMarks peaksUrl={url} sourceWindow={{ mediaStart: 0, sourceSpan: 2 }} gain={volume}>
         <span>wave</span>
-      </ClipPeakMarks>,
-    );
-  });
+      </ClipPeakMarks>
+    </TimelineClip>
+  );
+  await act(async () => root.render(view(gain)));
   await act(async () => {});
   vi.unstubAllGlobals();
-  return host;
+  return { host, setGain: async (value: number) => act(async () => root.render(view(value))) };
 }
 
 describe("ClipPeakMarks", () => {
-  it("paints red marks and the peak on a clip that redlines", async () => {
-    const host = await render("/api/projects/p/peaks/loud.mp4", [0.2, 0.98], 1);
+  it("uses a plain warning and describes the focused clip with the numeric peak", async () => {
+    const { host } = await render("/api/projects/p/peaks/loud.mp4", [0.2, 0.98], 1);
     expect(host.textContent).toContain("wave");
     expect(host.querySelector("[data-testid=clip-peak-marks]")?.textContent).toContain(
-      "▲ peaks −0.2 dBFS",
+      "▲ Too loud",
     );
+    expect(host.querySelector("[data-peak-text]")?.textContent).not.toContain("dBFS");
+    const clip = host.querySelector("button")!;
+    await act(async () => clip.focus());
+    await vi.waitFor(() =>
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(
+        "Peaks −0.2 dBFS at this volume; export lowers the whole mix",
+      ),
+    );
+    expect(clip.getAttribute("aria-describedby")).toBe(
+      document.querySelector('[role="tooltip"]')?.id,
+    );
+    expect(host.querySelectorAll("button")).toHaveLength(1);
+  });
+
+  it("removes the focused warning when volume becomes quiet without replacing the clip", async () => {
+    const { host, setGain } = await render("/api/projects/p/peaks/changing.mp4", [1, 1], 1);
+    const clip = host.querySelector("button")!;
+    await act(async () => clip.focus());
+    await vi.waitFor(() => expect(document.querySelector('[role="tooltip"]')).not.toBeNull());
+    await setGain(0.25);
+    await vi.waitFor(() => expect(document.querySelector('[role="tooltip"]')).toBeNull());
+    expect(clip.getAttribute("aria-describedby")).toBeNull();
+    expect(document.activeElement).toBe(clip);
+    expect(host.querySelector("button")).toBe(clip);
+    expect(host.querySelector("[data-peak-badge]")).toBeNull();
   });
 
   it("paints nothing on a quiet clip", async () => {
-    const host = await render("/api/projects/p/peaks/quiet.mp4", [0.25, 0.25], 1);
+    const { host } = await render("/api/projects/p/peaks/quiet.mp4", [0.25, 0.25], 1);
     expect(host.querySelector("[data-testid=clip-peak-marks]")).toBeNull();
   });
 });

package/src/player/components/ClipPeakMarks.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState, type ReactNode } from "react";
+import { useContext, useEffect, useState, type ReactNode } from "react";
 import { clipPeakRuns, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
 import { loadPeakMap } from "./clipPeakMap";
+import { ClipPeakDescriptionContext } from "./ClipPeakTooltip";
 
 const dbText = (db: number) => `${db < 0 ? "−" : "+"}${Math.abs(db).toFixed(1)} dBFS`;
 
@@ -30,15 +31,20 @@ export function ClipPeakMarks({
   const { runs, peakDbfs } = map
     ? clipPeakRuns(map, sourceWindow, gain)
     : { runs: [], peakDbfs: null };
+  const detail =
+    runs.length > 0 && peakDbfs !== null
+      ? `Peaks ${dbText(peakDbfs)} at this volume; export lowers the whole mix`
+      : null;
+  const setDetail = useContext(ClipPeakDescriptionContext);
+  useEffect(() => {
+    setDetail?.(detail);
+    return () => setDetail?.(null);
+  }, [detail, setDetail]);
   return (
-    <div className="relative h-full w-full">
+    <div className="relative isolate h-full w-full">
       {children}
-      {runs.length > 0 && peakDbfs !== null && (
-        <div
-          className="pointer-events-none absolute inset-0"
-          data-testid="clip-peak-marks"
-          title={`Peaks ${dbText(peakDbfs)} at this volume; export lowers the whole mix`}
-        >
+      {detail !== null && (
+        <div className="pointer-events-none absolute inset-0" data-testid="clip-peak-marks">
           {runs.map((run) => (
             <div
               key={run.from}
@@ -50,10 +56,10 @@ export function ClipPeakMarks({
             />
           ))}
           <span
-            className="absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400"
+            className="pointer-events-auto absolute right-4 bottom-1 font-mono text-[9px] leading-none text-red-400"
             data-peak-badge
           >
-            ▲<span data-peak-text> peaks {dbText(peakDbfs)}</span>
+            ▲<span data-peak-text> Too loud</span>
           </span>
         </div>
       )}

package/src/player/components/ClipPeakTooltip.tsx

@@ -0,0 +1,21 @@
+import { cloneElement, createContext, useState, type ReactElement } from "react";
+import { Tooltip } from "../../components/ui/Tooltip";
+
+export const ClipPeakDescriptionContext = createContext<((detail: string | null) => void) | null>(
+  null,
+);
+
+export function ClipPeakTooltip({
+  children,
+}: {
+  children: ReactElement<{ title?: string; "aria-describedby"?: string }>;
+}) {
+  const [detail, setDetail] = useState<string | null>(null);
+  return (
+    <ClipPeakDescriptionContext.Provider value={setDetail}>
+      <Tooltip label={detail ?? ""} disabled={detail === null}>
+        {cloneElement(children, { title: detail === null ? children.props.title : undefined })}
+      </Tooltip>
+    </ClipPeakDescriptionContext.Provider>
+  );
+}

package/src/player/components/Timeline.test.ts

@@ -87,11 +87,8 @@ describe("timeline viewport geometry", () => {
   });
 });
 
-/** The track's content row: a clip's parent, past its `display: contents` wrapper. */
 function trackContentOf(clip: HTMLElement | null | undefined): HTMLElement | null {
-  let row = clip?.parentElement ?? null;
-  while (row?.style.display === "contents") row = row.parentElement;
-  return row;
+  return clip?.closest<HTMLElement>('[role="gridcell"]') ?? null;
 }
 
 function getHorizontalGeometry(host: HTMLElement, clipId: string, tickLabel: string) {

package/src/player/components/TimelineClip.tsx

@@ -16,6 +16,7 @@ import { ClipBadges } from "./ClipBadges";
 import { linkLabelColor } from "./linkLabelColor";
 import { OutOfSyncBadge } from "./OutOfSyncBadge";
 import { clipSpeedSuffix } from "./clipToolAttrs";
+import { ClipPeakTooltip } from "./ClipPeakTooltip";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -128,7 +129,7 @@ export const TimelineClip = memo(function TimelineClip({
     ...passengerStyle,
   };
 
-  return (
+  const clip = (
     <button
       type="button"
       data-clip={isGestureActor ? undefined : "true"}
@@ -256,4 +257,5 @@ export const TimelineClip = memo(function TimelineClip({
       )}
     </button>
   );
+  return isAudioClip || el.hasAudio ? <ClipPeakTooltip>{clip}</ClipPeakTooltip> : clip;
 });

package/src/styles/components.css

@@ -314,14 +314,18 @@
   display: none;
 }
 
+[data-peak-badge] {
+  z-index: 20;
+}
+
 .audible-video-wave [data-peak-badge] {
   top: 50%;
+  bottom: auto;
   right: var(--timeline-clip-radius);
   translate: 0 -50%;
   padding: 1px 3px;
   border-radius: 3px;
   background: var(--timeline-clip-chip-audio-bg);
-  z-index: 20;
 }
 
 .timeline-clip.is-audio.is-hovered {

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 () => {