@hyperframes/studio 0.8.144 → 0.8.146

package/src/components/editor/propertyPanelFont.tsx

@@ -290,7 +290,7 @@ export function FontFamilyField({
         setFontNotice("No supported font files were imported.");
       }
     } catch {
-      setFontNotice("Font import failed — the files were not added. Try again.");
+      setFontNotice("Font import failed. The files were not added. Try again.");
     } finally {
       setImportingFonts(false);
     }
@@ -389,10 +389,10 @@ export function FontFamilyField({
         } else {
           // Committing an un-imported family would render a silent fallback,
           // so surface the failure and keep the current font instead.
-          setFontNotice(`Couldn't import "${option.family}" — the font was not applied.`);
+          setFontNotice(`Couldn't import "${option.family}", so the font was not applied.`);
         }
       } catch {
-        setFontNotice(`Couldn't import "${option.family}" — the font was not applied.`);
+        setFontNotice(`Couldn't import "${option.family}", so the font was not applied.`);
       } finally {
         setImportingFonts(false);
       }

package/src/components/editor/propertyPanelFxBandRuler.tsx

@@ -49,7 +49,7 @@ export function FxBandRuler({ band, at }: FxBandRulerProps) {
           return (
             <span
               key={range.name}
-              title={`${range.name} — ${range.says}`}
+              title={`${range.name}: ${range.says}`}
               className={
                 range.name === here.name
                   ? "hf-fx-ruler-band bg-panel-accent"
@@ -65,7 +65,7 @@ export function FxBandRuler({ band, at }: FxBandRulerProps) {
         })}
       </div>
       <p className="hf-fx-ruler-label truncate pt-0.5 text-[9px] text-panel-text-2">
-        <span className="hf-fx-ruler-name text-panel-text-1">{here.name}</span> — {here.says}
+        <span className="hf-fx-ruler-name text-panel-text-1">{here.name}</span>: {here.says}
       </p>
     </div>
   );

package/src/components/editor/propertyPanelFxNodeOpenBody.tsx

@@ -245,11 +245,11 @@ export function FxNodeOpenBody({
           onClick={onToggleDetails}
         >
           <span aria-hidden="true">{details ? "▾" : "▸"}</span>
-          Details — {registryDef.label}
+          Details: {registryDef.label}
         </button>
       ) : (
         <p className="hf-fx-node-mechanism border-t border-panel-border-input px-1.5 pt-1 font-mono text-[9px] uppercase tracking-wide text-panel-text-2">
-          Details — {registryDef.label}
+          Details: {registryDef.label}
         </p>
       )}
       {details || !oneKnob ? (

package/src/components/editor/propertyPanelTimingSection.tsx

@@ -84,7 +84,7 @@ export function TimingSection({
       </div>
       {derived && (
         <p className="mt-2 text-[10px] leading-snug text-neutral-500">
-          Inferred from this element’s animation — edit to pin an explicit clip range.
+          Inferred from this element’s animation. Edit to pin an explicit clip range.
         </p>
       )}
     </Section>

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -71,7 +71,7 @@ export function createTransformCommitHandlers({
       await commitAnimatedTransformValue(
         axis,
         parsed,
-        "This element's position can't be edited here yet — it is driven by its animation",
+        "This element's position can't be edited here yet: its animation drives it",
       )
     )
       return;
@@ -97,7 +97,7 @@ export function createTransformCommitHandlers({
       return;
     }
     if (hasGsapAnimation) {
-      showToast?.("This element's size can't be edited here yet — it is driven by its animation");
+      showToast?.("This element's size can't be edited here yet: its animation drives it");
       return;
     }
     const current = readStudioBoxSize(element.element);
@@ -124,7 +124,7 @@ export function createTransformCommitHandlers({
       await commitAnimatedTransformValue(
         "rotation",
         parsed,
-        "This element's rotation can't be edited here yet — it is driven by its animation",
+        "This element's rotation can't be edited here yet: its animation drives it",
       )
     )
       return;

package/src/components/editor/useColorGradingController.ts

@@ -352,7 +352,7 @@ export function useColorGradingController({
         const reverted = confirmedGradingRef.current;
         latestGradingRef.current = reverted;
         setGrading(reverted);
-        setRuntimeStatus({ state: "unavailable", message: "Save failed — reverted" });
+        setRuntimeStatus({ state: "unavailable", message: "Save failed, changes reverted" });
       };
       // The callback is the primary result signal; the rejection path supports
       // other setAttributeLive implementations.

package/src/components/panels/SlideshowSubPanels.tsx

@@ -489,7 +489,7 @@ export function HotspotTool({
         )}
         {sequences.length === 0 && (
           <p className="text-[10px] text-neutral-500 italic">
-            Create a branch in the Branches section first — hotspots jump to a branch.
+            Create a branch in the Branches section first. Hotspots jump to a branch.
           </p>
         )}
         <label className="text-[11px] text-neutral-400">Hotspot label</label>
@@ -508,7 +508,7 @@ export function HotspotTool({
           onChange={(e) => setTargetSequenceId(e.target.value)}
           aria-label="Target branch sequence"
         >
-          <option value="">— select branch —</option>
+          <option value="">Select branch</option>
           {sequences.map((seq) => (
             <option key={seq.id} value={seq.id}>
               {seq.label}

package/src/components/panels/VariablesBindElement.tsx

@@ -220,7 +220,7 @@ export function VariablesBindElement({
               {existingDecl.default !== undefined && (
                 <span className="font-mono"> ({String(existingDecl.default)})</span>
               )}
-              , not the element's own — binding won't change "{trimmedId}".
+              , not the element's own, so binding won't change "{trimmedId}".
             </p>
           )}
           <div className="flex items-center justify-end gap-2">

package/src/components/panels/VariablesPanel.tsx

@@ -235,7 +235,7 @@ function HandoffFooter({
 
 const EMPTY_STATE = (
   <p className="text-[10px] leading-relaxed text-neutral-500">
-    No variables declared. Variables make parts of this composition dynamic — declare them here (or
+    No variables declared. Variables make parts of this composition dynamic. Declare them here (or
     in <code className="font-mono">data-composition-variables</code>), read them with{" "}
     <code className="font-mono">getVariables()</code>, and pass values at render time with{" "}
     <code className="font-mono">--variables</code>.
@@ -437,7 +437,7 @@ export const VariablesPanel = memo(function VariablesPanel({
       const wanted = action.declaration(id).type;
       if (existing && existing.type !== wanted) {
         showToast(
-          `"${id}" is already a ${existing.type} variable — pick another id for this ${wanted} binding`,
+          `"${id}" is already a ${existing.type} variable. Pick another id for this ${wanted} binding`,
           "error",
         );
         return;
@@ -508,7 +508,7 @@ export const VariablesPanel = memo(function VariablesPanel({
         />
         {usage?.scanIncomplete && (
           <p className="text-[9px] text-neutral-600">
-            Scripts access variables dynamically — usage info may be incomplete.
+            Scripts access variables dynamically, so usage info may be incomplete.
           </p>
         )}
         {declarations.length > 0 && (

package/src/components/renders/GpuEncodingToggle.tsx

@@ -0,0 +1,28 @@
+export function GpuEncodingToggle({
+  format,
+  checked,
+  disabled,
+  onToggle,
+}: {
+  format: "mp4" | "webm" | "mov";
+  checked: boolean;
+  disabled: boolean;
+  onToggle: () => void;
+}) {
+  // GPU encoders exist for H.264/H.265 only, so only MP4 can use one.
+  if (format !== "mp4") return null;
+  return (
+    <label
+      className={`flex items-center gap-2 text-step-10 text-text-4 ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}`}
+    >
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={onToggle}
+        className="accent-studio-accent"
+      />
+      <span>Use GPU encoding</span>
+    </label>
+  );
+}

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

@@ -142,7 +142,7 @@ describe("RenderQueue controls", () => {
       exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30, false);
   });
 
   it("refuses a resolution the composition cannot reach, and says why", async () => {
@@ -172,7 +172,23 @@ describe("RenderQueue controls", () => {
       exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30, false);
+  });
+
+  it("exports with GPU encoding once the box is ticked, and remembers it", () => {
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
+    const host = mountRenderQueue(onStartRender);
+    const gpu = [...host.querySelectorAll("label")].find((label) =>
+      label.textContent?.includes("Use GPU encoding"),
+    );
+
+    act(() => gpu?.querySelector("input")?.click());
+    act(() => {
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30, true);
+    expect(getPersistedRenderSettings().gpu).toBe(true);
   });
 
   it("persists a changed format as the literal union value", async () => {
@@ -185,7 +201,9 @@ describe("RenderQueue controls", () => {
       format: "mov",
       quality: "standard",
       fps: 30,
+      gpu: false,
     });
+    expect(host.textContent).not.toContain("Use GPU encoding");
   });
 });
 

package/src/components/renders/RenderQueue.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from "../ui/Tooltip";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
+import { GpuEncodingToggle } from "./GpuEncodingToggle";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 
 export interface CompositionDimensions {
@@ -23,6 +24,7 @@ export type StartRenderHandler = (
   quality: "draft" | "standard" | "high",
   resolution: ResolutionPreset | "auto",
   fps: 24 | 30 | 60,
+  gpu?: boolean,
 ) => void | Promise<void>;
 
 export interface RenderQueueProps {
@@ -129,7 +131,7 @@ function scaleOptionLabel(
   // Explain *why* an option is disabled instead of greying it silently:
   // the preset must be an exact integer upscale of the authored size.
   if (dims && !scaleApplies(scale, dims)) {
-    return `${base} — not an integer scale of ${dims.width}×${dims.height}`;
+    return `${base} (not an integer scale of ${dims.width}×${dims.height})`;
   }
   return base;
 }
@@ -246,7 +248,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
                 .map((f) => (
                   <p key={f} className="text-step-9 text-text-4 leading-relaxed">
                     <span className="text-text-3 font-medium">{FORMAT_INFO[f].label}</span>
-                    {" — "}
+                    {": "}
                     {FORMAT_INFO[f].desc}
                   </p>
                 ))}
@@ -303,6 +305,7 @@ function FormatExportButton({
   const [quality, setQuality] = useState<"draft" | "standard" | "high">(persisted.quality);
   const [resolution, setResolution] = useState<RenderScale>("auto");
   const [fps, setFps] = useState<24 | 30 | 60>(persisted.fps);
+  const [gpu, setGpu] = useState(persisted.gpu);
 
   // Only a definite "not installed" blocks Export. A null status means the
   // probe gave no answer, and refusing to export on no answer would break
@@ -385,6 +388,15 @@ function FormatExportButton({
           </div>
         )}
       </div>
+      <GpuEncodingToggle
+        format={format}
+        checked={gpu}
+        disabled={isRendering}
+        onToggle={() => {
+          setGpu(!gpu);
+          persistRenderSettings(format, quality, fps, !gpu);
+        }}
+      />
       <Button
         variant="primary"
         size="md"
@@ -398,7 +410,7 @@ function FormatExportButton({
           if (isRendering || missingFfmpeg) return;
           const outputResolution = resolveResolution(resolution, compositionDimensions);
           trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
-          void onStartRender(format, quality, outputResolution, fps);
+          void onStartRender(format, quality, outputResolution, fps, gpu);
         }}
         // Width only. A type size or a weight here would win the merge against
         // the size recipe and leave this Export a step away from the header's

package/src/components/renders/RenderQueuePanel.tsx

@@ -29,7 +29,7 @@ export const RenderQueuePanel = memo(function RenderQueuePanel() {
       ffmpeg={renderQueue.ffmpeg}
       ffmpegChecking={renderQueue.ffmpegChecking}
       onRecheckFfmpeg={renderQueue.recheckFfmpeg}
-      onStartRender={async (format, quality, resolution, fps) => {
+      onStartRender={async (format, quality, resolution, fps, gpu) => {
         await waitForPendingDomEditSaves();
         // No `composition`: startRender targets the active one by default.
         await renderQueue.startRender({
@@ -37,6 +37,7 @@ export const RenderQueuePanel = memo(function RenderQueuePanel() {
           quality,
           format,
           resolution,
+          gpu,
           // Render what the user is previewing: active variable overrides
           // from the Variables panel ride along (undefined = defaults).
           variables: usePreviewVariablesStore.getState().values ?? undefined,

package/src/components/renders/renderSettings.ts

@@ -4,6 +4,7 @@ export interface PersistedRenderSettings {
   format: "mp4" | "webm" | "mov";
   quality: "draft" | "standard" | "high";
   fps: 24 | 30 | 60;
+  gpu: boolean;
 }
 
 export function getPersistedRenderSettings(): PersistedRenderSettings {
@@ -17,21 +18,23 @@ export function getPersistedRenderSettings(): PersistedRenderSettings {
           ? parsed.quality
           : "standard",
         fps: [24, 30, 60].includes(parsed.fps) ? parsed.fps : 30,
+        gpu: parsed.gpu === true,
       };
     }
   } catch {
     /* ignore */
   }
-  return { format: "mp4", quality: "standard", fps: 30 };
+  return { format: "mp4", quality: "standard", fps: 30, gpu: false };
 }
 
 export function persistRenderSettings(
   format: PersistedRenderSettings["format"],
   quality: PersistedRenderSettings["quality"],
   fps: PersistedRenderSettings["fps"],
+  gpu: boolean = getPersistedRenderSettings().gpu,
 ): void {
   try {
-    localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format, quality, fps }));
+    localStorage.setItem(RENDER_SETTINGS_KEY, JSON.stringify({ format, quality, fps, gpu }));
   } catch {
     /* ignore */
   }

package/src/components/renders/useRenderQueue.ts

@@ -32,6 +32,7 @@ export interface StartRenderOptions {
   format?: "mp4" | "webm" | "mov";
   /** `"auto"` (default) renders at the composition's authored dimensions. */
   resolution?: ResolutionPreset | "auto";
+  gpu?: boolean;
   /**
    * Render a specific composition file. Omit it to render the composition the
    * user currently has open — only the sidebar's per-composition Render button
@@ -234,6 +235,7 @@ export function useRenderQueue(
         resolution?: string;
         composition?: string;
         variables?: Record<string, unknown>;
+        gpu?: boolean;
         telemetryDistinctId?: string;
         telemetryOptOut?: boolean;
       } = {
@@ -258,6 +260,7 @@ export function useRenderQueue(
       }
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;
+      if (opts.gpu) body.gpu = true;
       if (opts.variables && Object.keys(opts.variables).length > 0) {
         body.variables = opts.variables;
       }
@@ -379,7 +382,7 @@ export function useRenderQueue(
       try {
         const res = await studioApiFetch(`/api/render/${jobId}/cancel`, { method: "POST" });
         if (!res.ok && res.status !== 404) {
-          setActionError("Couldn't cancel on the server — the render may still be running.");
+          setActionError("Couldn't cancel on the server. The render may still be running.");
           return;
         }
         // Reconcile with the status the route reports: if the render actually
@@ -393,7 +396,7 @@ export function useRenderQueue(
           }
         }
       } catch {
-        setActionError("Couldn't reach the server to cancel — the render may still be running.");
+        setActionError("Couldn't reach the server to cancel. The render may still be running.");
       }
     },
     [closeActiveEventSource, loadRenders],
@@ -406,7 +409,7 @@ export function useRenderQueue(
       try {
         const res = await studioApiFetch(`/api/render/${jobId}`, { method: "DELETE" });
         if (!res.ok) {
-          setActionError("Couldn't delete the render — it's still on disk.");
+          setActionError("Couldn't delete the render. It's still on disk.");
           return;
         }
       } catch {

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

@@ -53,3 +53,15 @@ describe("render target composition", () => {
     expect(body["composition"]).toBeUndefined();
   });
 });
+
+describe("GPU encoding", () => {
+  it("asks the server for GPU encoding when the export asks for it", async () => {
+    const body = await renderBody(null, { format: "mp4", gpu: true });
+    expect(body["gpu"]).toBe(true);
+  });
+
+  it("leaves GPU encoding off by default", async () => {
+    const body = await renderBody(null, { format: "mp4" });
+    expect(body["gpu"]).toBeUndefined();
+  });
+});

package/src/components/sidebar/AssetCard.tsx

@@ -209,7 +209,7 @@ export function AssetCard({
         draggable
         role="button"
         tabIndex={0}
-        aria-label={`${name} — open, drag to timeline, right-click for actions`}
+        aria-label={`${name}: open, drag to timeline, right-click for actions`}
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
         onKeyDown={(e) => {
@@ -337,7 +337,7 @@ export function FontRow({
         draggable
         role="button"
         tabIndex={0}
-        aria-label={`${name} — copy path, drag to timeline, right-click for actions`}
+        aria-label={`${name}: copy path, drag to timeline, right-click for actions`}
         onClick={() => onCopy(asset)}
         onKeyDown={(e) => {
           if (e.target !== e.currentTarget) return;

package/src/components/sidebar/AudioRow.tsx

@@ -208,7 +208,7 @@ export function AudioRow({
         onPointerUp={handlePointerUp}
         role="button"
         tabIndex={0}
-        aria-label={`${name} — open, drag to timeline, right-click for actions`}
+        aria-label={`${name}: open, drag to timeline, right-click for actions`}
         onKeyDown={(e) => {
           // Only when the row itself is focused — keydowns bubbling from the
           // inner controls (play button) must keep their native activation.

package/src/components/sidebar/BlocksTab.tsx

@@ -197,7 +197,7 @@ function formatCompositionContext(ctx: CompositionContext): string {
       `Elements visible at ${formatTime(ctx.currentTime)}:`,
       ...visibleNow.map(
         (el) =>
-          `- ${el.label || el.id} (track ${el.track}, ${formatTime(el.start)}–${formatTime(el.start + el.duration)}${el.compositionSrc ? `, src: ${el.compositionSrc}` : ""})`,
+          `- ${el.label || el.id} (track ${el.track}, ${formatTime(el.start)} to ${formatTime(el.start + el.duration)}${el.compositionSrc ? `, src: ${el.compositionSrc}` : ""})`,
       ),
     );
   }
@@ -232,7 +232,7 @@ function buildAgentPrompt(
     transitions: [
       `Using /hyperframes, add the "${title}" transition (registry: ${name}) between my scenes.`,
       `${description}`,
-      `Place this transition at the cut point between the current scene and the next. Set the duration to 0.5–1s, position it at the scene boundary on the timeline, and make sure the z-index is above both scenes. Adjust colors to match my palette.`,
+      `Place this transition at the cut point between the current scene and the next. Set the duration to 0.5 to 1s, position it at the scene boundary on the timeline, and make sure the z-index is above both scenes. Adjust colors to match my palette.`,
     ].join("\n\n"),
     effects: [
       `Using /hyperframes, add the "${title}" effect (registry: ${name}) as an overlay on my composition.`,

package/src/components/sidebar/CompositionsTab.tsx

@@ -380,8 +380,8 @@ function CompCard({
           <span className="text-[11px] font-medium text-neutral-300 truncate">{name}</span>
           {isRoot && (
             <span
-              aria-label="Root composition — opens automatically on load"
-              title="Root composition — opens automatically on load"
+              aria-label="Root composition: opens automatically on load"
+              title="Root composition: opens automatically on load"
               className="flex-shrink-0 rounded-full bg-neutral-700/60 px-1.5 py-px text-[8px] font-bold uppercase tracking-wide text-neutral-300"
             >
               Root

package/src/components/sidebar/PromptPreviewModal.tsx

@@ -55,7 +55,7 @@ export function PromptPreviewModal({
         ref={containerRef}
         role="dialog"
         aria-modal="true"
-        aria-label={`Ask agent — ${title}`}
+        aria-label={`Ask agent: ${title}`}
         tabIndex={-1}
         className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden"
         onClick={(e) => e.stopPropagation()}

package/src/hooks/timelineAudioGroupCreate.ts

@@ -181,7 +181,7 @@ export async function createAudioGroupAndAssignMembers({
   // then persists `sources: [groupId]` on success, so a quiet no-op leaves the
   // carve aimed at a group that does not exist.
   if (elements.length < 2) {
-    throw new Error(`Cannot group ${elements.length} clip(s) — a group needs at least two`);
+    throw new Error(`Cannot group ${elements.length} clip(s): a group needs at least two`);
   }
   if (!GROUP_ID_PATTERN.test(groupId)) {
     throw new Error(`Invalid audio group id ${JSON.stringify(groupId)}`);

package/src/hooks/timelineEditingHelpers.ts

@@ -236,7 +236,7 @@ export function applyTimelineMoveAttributes(
 ): string {
   if (!Number.isFinite(start) || !Number.isFinite(duration)) {
     console.warn(
-      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}) — patch skipped`,
+      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}). Patch skipped`,
     );
     return original;
   }

package/src/hooks/useBlockHandlers.ts

@@ -92,7 +92,7 @@ export function useBlockHandlers({
   const runBlockInstall = useCallback(
     async <T>(blockName: string, install: () => Promise<T>): Promise<T | null> => {
       if (installingBlockRef.current) {
-        showToast("A block is already installing — one moment…", "info");
+        showToast("A block is already installing. One moment…", "info");
         return null;
       }
       installingBlockRef.current = true;

package/src/hooks/useConsoleErrorCapture.test.tsx

@@ -4,6 +4,7 @@ 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 { announcePreviewDocumentLoaded } from "../player/sceneSwap";
 import { useConsoleErrorCapture } from "./useConsoleErrorCapture";
 
 Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
@@ -36,7 +37,7 @@ it("shows the errors a preview raised before its load, once each", async () => {
   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")));
+  await act(async () => announcePreviewDocumentLoaded(iframe));
 
   expect(shown()).toEqual([raisedBeforeLoad]);
 });
@@ -79,9 +80,27 @@ it("clears a document's errors when its load replaces it, and when the preview g
     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")));
+  await act(async () => announcePreviewDocumentLoaded(iframe));
   expect(shown()).toEqual(["Uncaught Error: new"]);
 
   await act(async () => root?.render(React.createElement(NullableHarness, { frame: null })));
   expect(capture.consoleErrors).toBeNull();
+  await act(async () => announcePreviewDocumentLoaded(iframe));
+  expect(capture.consoleErrors).toBeNull();
+});
+
+it("keeps a page's errors through its own late load, and clears them for the next announced page", async () => {
+  const { iframe, previewWindow } = previewFrame();
+  root = createRoot(document.createElement("div"));
+  await act(async () => root?.render(React.createElement(Harness, { iframe })));
+  await act(async () =>
+    previewWindow.dispatchEvent(new ErrorEvent("error", { message: "Uncaught Error: kept" })),
+  );
+
+  await act(async () => iframe.dispatchEvent(new Event("load")));
+  expect(shown()).toEqual(["Uncaught Error: kept"]);
+
+  Object.assign(previewWindow, { [STUDIO_PREVIEW_ERRORS]: ["Uncaught Error: new page"] });
+  await act(async () => announcePreviewDocumentLoaded(iframe));
+  expect(shown()).toEqual(["Uncaught Error: new page"]);
 });

package/src/hooks/useConsoleErrorCapture.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { STUDIO_PREVIEW_ERRORS } from "@hyperframes/core/studio-preview-mark";
+import { onPreviewDocumentLoaded } from "../player/sceneSwap";
 import type { LintFinding } from "../components/LintModal";
 
 /**
@@ -73,9 +74,9 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
     };
 
     attachErrorCapture();
-    previewIframe.addEventListener("load", attachErrorCapture);
+    const stopLoaded = onPreviewDocumentLoaded(previewIframe, attachErrorCapture);
     return () => {
-      previewIframe.removeEventListener("load", attachErrorCapture);
+      stopLoaded();
       detachErrorCapture();
     };
   }, [previewIframe, resetErrors]);

package/src/hooks/useDomEditSession.ts

@@ -340,7 +340,7 @@ export function useDomEditSession({
     if (members.some((m) => isAudioDomElement(m.element))) {
       showToast(
         members.every((m) => isAudioDomElement(m.element))
-          ? "Audio clips group into a bus — use FX on the track header"
+          ? "Audio clips group into a bus. Use FX on the track header"
           : "Can't group audio clips with layout elements",
         "info",
       );

package/src/hooks/useEditorSave.ts

@@ -93,7 +93,7 @@ export function useEditorSave({
       ) {
         lastFailureToastAtRef.current = now;
         showToast(
-          `Couldn't save ${path} — your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
+          `Couldn't save ${path}. Your latest edits are NOT persisted. Check the preview server; editing again retries the save.`,
           "error",
         );
       }

package/src/hooks/useFrameCapture.ts

@@ -95,7 +95,7 @@ export function useFrameCapture({
         } catch (fetchErr) {
           clearTimeout(timeout);
           if (fetchErr instanceof DOMException && fetchErr.name === "AbortError") {
-            throw new Error("Capture timed out — the server took too long to respond");
+            throw new Error("Capture timed out: the server took too long to respond");
           }
           throw fetchErr;
         }