@hyperframes/studio 0.8.78 → 0.8.80

package/src/hooks/useFrameCapture.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { liveTime, usePlayerStore } from "../player";
+import { useFrameCapture } from "./useFrameCapture";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let renders = 0;
+let capture: ReturnType<typeof useFrameCapture>;
+
+function Harness() {
+  renders += 1;
+  capture = useFrameCapture({
+    projectId: "p",
+    activeCompPath: null,
+    showToast: () => {},
+    waitForPendingDomEditSaves: async () => {},
+  });
+  return null;
+}
+
+const shownTime = () => new URL(capture.captureFrameHref).searchParams.get("t");
+
+let host: HTMLDivElement;
+let root: Root;
+
+beforeEach(async () => {
+  usePlayerStore.setState({ isPlaying: false, currentTime: 2 });
+  renders = 0;
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  await act(async () => root.render(React.createElement(Harness)));
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  host.remove();
+});
+
+describe("useFrameCapture", () => {
+  it("does not re-render on playback frames", () => {
+    usePlayerStore.setState({ isPlaying: true });
+    const before = renders;
+    act(() => {
+      for (let i = 1; i <= 30; i++) liveTime.notify(2 + i / 60);
+    });
+    expect(renders).toBe(before);
+  });
+
+  it("points the capture at the live playhead while playing", () => {
+    usePlayerStore.setState({ isPlaying: true });
+    act(() => liveTime.notify(7.5));
+    act(() => capture.refreshCaptureFrameTime());
+    expect(shownTime()).toBe("7.500");
+  });
+
+  it("points the capture at the store time while paused", () => {
+    act(() => liveTime.notify(7.5));
+    usePlayerStore.setState({ isPlaying: false, currentTime: 3 });
+    act(() => capture.refreshCaptureFrameTime());
+    expect(shownTime()).toBe("3.000");
+  });
+});

package/src/hooks/useFrameCapture.ts

@@ -16,19 +16,28 @@ export function useFrameCapture({
   showToast,
   waitForPendingDomEditSaves,
 }: UseFrameCaptureParams) {
-  const [captureFrameTime, setCaptureFrameTime] = useState(0);
+  const [captureFrameTime, setCaptureFrameTime] = useState(
+    () => usePlayerStore.getState().currentTime,
+  );
   const [capturing, setCapturing] = useState(false);
   const capturingRef = useRef(false);
+  const livePlayheadRef = useRef(captureFrameTime);
 
-  useMountEffect(() => {
-    setCaptureFrameTime(usePlayerStore.getState().currentTime);
-    return liveTime.subscribe(setCaptureFrameTime);
-  });
+  useMountEffect(() =>
+    liveTime.subscribe((time) => {
+      livePlayheadRef.current = time;
+    }),
+  );
 
-  const refreshCaptureFrameTime = useCallback(() => {
-    setCaptureFrameTime(usePlayerStore.getState().currentTime);
+  const playheadTime = useCallback(() => {
+    const { isPlaying, currentTime } = usePlayerStore.getState();
+    return isPlaying ? livePlayheadRef.current : currentTime;
   }, []);
 
+  const refreshCaptureFrameTime = useCallback(() => {
+    setCaptureFrameTime(playheadTime());
+  }, [playheadTime]);
+
   const handleCaptureFrameClick = useCallback(
     async (event: MouseEvent<HTMLAnchorElement>) => {
       if (!projectId) return;
@@ -39,7 +48,7 @@ export function useFrameCapture({
       capturingRef.current = true;
       setCapturing(true);
       try {
-        const time = usePlayerStore.getState().currentTime;
+        const time = playheadTime();
         setCaptureFrameTime(time);
         await Promise.race([
           waitForPendingDomEditSaves(),
@@ -91,7 +100,7 @@ export function useFrameCapture({
         setCapturing(false);
       }
     },
-    [activeCompPath, projectId, showToast, waitForPendingDomEditSaves],
+    [activeCompPath, playheadTime, projectId, showToast, waitForPendingDomEditSaves],
   );
 
   const captureFrameHref = projectId

package/src/hooks/usePersistentEditHistory.test.ts

@@ -1,4 +1,5 @@
 // @vitest-environment happy-dom
+// fallow-ignore-file code-duplication
 import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
 import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
@@ -103,8 +104,7 @@ it("a drag's edits under one key undo as one step, even before the drag goes idl
       }),
     );
   }
-  // The held drag is not in the history's list yet: only its own paths say what to read before the step.
-  expect(hook().undoLabel).toBeUndefined();
+  await vi.waitFor(() => expect(hook().undoLabel).toBe("Dragged Title"));
   const undone = await act(() => hook().undo({ readFile }));
   expect(undone).toMatchObject({
     ok: true,

package/src/hooks/usePersistentEditHistory.ts

@@ -120,11 +120,11 @@ function redoneAt(view: HistoryView): number | null {
   return view.entries.find((entry) => entry.id === undo?.undoes)?.endedAt ?? null;
 }
 
-/** Studio's undo over the server's project history: an edit claims what it wrote; Cmd+Z steps every writer's. */
+/** Studio's undo over the server's project history: an edit claims what it wrote; Cmd+Z steps the person's. */
 export function usePersistentEditHistory({ projectId }: UsePersistentEditHistoryOptions) {
   const [view, setView] = useState<HistoryView>(EMPTY);
   const [loaded, setLoaded] = useState(false);
-  // A coalescing claim stays on the server until its drag goes idle, so it is not in `view` yet.
+  // A coalescing claim the server just took, until `refresh()` brings its entry into `view`.
   const heldClaimRef = useRef<{ paths: string[]; at: number } | null>(null);
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;

package/src/hooks/useTimelineEditing.test.tsx

@@ -131,6 +131,7 @@ function renderTimelineEditingHook(input: {
   elementsDelete: ReturnType<typeof useTimelineEditing>["handleTimelineElementsDelete"];
   handleAutoGroupCarveSources: ReturnType<typeof useTimelineEditing>["handleAutoGroupCarveSources"];
   setAudioGroupAttribute: ReturnType<typeof useTimelineEditing>["setAudioGroupAttribute"];
+  setElementFxAttribute: ReturnType<typeof useTimelineEditing>["setElementFxAttribute"];
   unmount: () => void;
 } {
   let move: ReturnType<typeof useTimelineEditing>["handleTimelineElementMove"] | null = null;
@@ -146,6 +147,7 @@ function renderTimelineEditingHook(input: {
   let setAudioGroupAttribute:
     | ReturnType<typeof useTimelineEditing>["setAudioGroupAttribute"]
     | null = null;
+  let latest: ReturnType<typeof useTimelineEditing> | null = null;
 
   function Harness() {
     const commitRef = useRef(input.onZIndexCommit);
@@ -176,6 +178,7 @@ function renderTimelineEditingHook(input: {
     elementsDelete = hook.handleTimelineElementsDelete;
     handleAutoGroupCarveSources = hook.handleAutoGroupCarveSources;
     setAudioGroupAttribute = hook.setAudioGroupAttribute;
+    latest = hook;
     return null;
   }
 
@@ -197,6 +200,8 @@ function renderTimelineEditingHook(input: {
     elementsDelete,
     handleAutoGroupCarveSources,
     setAudioGroupAttribute,
+    setElementFxAttribute: (latest as unknown as ReturnType<typeof useTimelineEditing>)
+      .setElementFxAttribute,
     unmount,
   };
 }
@@ -1910,3 +1915,57 @@ describe("useTimelineEditing: handler identity is stable across renders", () =>
     unmount();
   });
 });
+
+describe("useTimelineEditing effect saves report what happened", () => {
+  const LOCKED = { blocked: true as const, reason: "Reserved by an agent" };
+
+  it("resolves a saved clip effect as saved", async () => {
+    const { clip, setElementFxAttribute, writeProjectFile, unmount } = setupSingleClipHarness();
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await setElementFxAttribute.setQuiet(clip, "data-hf-audio-fx", "echo", "Apply");
+    });
+    expect(outcome).toEqual({ status: "saved" });
+    expect(writeProjectFile).toHaveBeenCalled();
+    unmount();
+  });
+
+  it("resolves a clip effect on a locked clip as refused, with the host's reason", async () => {
+    const { clip, setElementFxAttribute, writeProjectFile, unmount } = setupSingleClipHarness({
+      canEdit: () => LOCKED,
+    });
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await setElementFxAttribute.setQuiet(clip, "data-hf-audio-fx", "echo", "Apply");
+    });
+    expect(outcome).toEqual({ status: "refused", reason: "Reserved by an agent" });
+    expect(writeProjectFile).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it("resolves a clip effect whose write fails as failed", async () => {
+    const { clip, setElementFxAttribute, writeProjectFile, unmount } = setupSingleClipHarness();
+    writeProjectFile.mockRejectedValue(new Error("disk full"));
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await setElementFxAttribute.setQuiet(clip, "data-hf-audio-fx", "echo", "Apply");
+    });
+    expect(outcome).toEqual({ status: "failed", reason: expect.stringContaining("disk full") });
+    unmount();
+  });
+
+  it("resolves a group audio effect on a locked group as refused", async () => {
+    const member = timelineElement({ id: "clip", track: 0, zIndex: 0 });
+    usePlayerStore.getState().setElements([{ ...member, audioGroup: "hf-group" }]);
+    const { setAudioGroupAttribute, writeProjectFile, unmount } = setupSingleClipHarness({
+      canEdit: () => LOCKED,
+    });
+    let outcome: unknown;
+    await act(async () => {
+      outcome = await setAudioGroupAttribute.setQuiet("hf-group", "data-volume", "0.5", "Volume");
+    });
+    expect(outcome).toEqual({ status: "refused", reason: "Reserved by an agent" });
+    expect(writeProjectFile).not.toHaveBeenCalled();
+    unmount();
+  });
+});

package/src/hooks/useTimelineEditing.ts

@@ -11,6 +11,7 @@ import {
   playbackStartAttributeForElement,
   persistTimelineEdit,
   formatTimelineAttributeNumber,
+  formatTimelineMediaOffset,
   extendRootDurationIfNeeded,
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
@@ -33,15 +34,19 @@ import {
 } from "./timelineTrackVisibility";
 import { useTimelineGroupEditing } from "./useTimelineGroupEditing";
 import { useBlockedTimelineEditToast } from "./useBlockedTimelineEditToast";
-import { useTimelineEditGate } from "./timelineEditPermission";
+import {
+  useTimelineEditGate,
+  useTimelineEditRefusal,
+  type TimelineEditOutcome,
+} from "./timelineEditPermission";
 import { serializeZLaneGesture } from "../components/nle/zLaneGesture";
 import { cutoverCommittedOrThrow, sdkTimingPersist } from "../utils/sdkCutover";
 import type { TimelineMoveUpdates, UseTimelineEditingOptions } from "./useTimelineEditingTypes";
 import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
-type GuardedTimelineHandler = (...args: never[]) => Promise<void>;
+type GuardedTimelineHandler = (...args: never[]) => Promise<unknown>;
 type GuardedTimelineResolver = (...args: never[]) => readonly TimelineElement[];
-type GuardedTimelineRefusal = (...args: never[]) => void;
+type GuardedTimelineRefusal = (reason: string, ...args: never[]) => unknown;
 
 interface GuardedTimelineEntry {
   resolveTargets: GuardedTimelineResolver;
@@ -74,17 +79,18 @@ export function useTimelineEditing({
   const editQueueRef = useRef(Promise.resolve());
   const track = useTrackPendingTimelineEdit();
   const checkEditable = useTimelineEditGate(canEdit, showToast);
-  const checkEditableRef = useRef(checkEditable);
-  checkEditableRef.current = checkEditable;
+  const refuseEdit = useTimelineEditRefusal(canEdit, showToast);
+  const refuseEditRef = useRef(refuseEdit);
+  refuseEditRef.current = refuseEdit;
   const guardedRef = useRef(new WeakMap<GuardedTimelineHandler, GuardedTimelineEntry>());
   // Refuses (no call, no write, no history entry) when any target is
   // blocked; otherwise runs fn as before. Cached by fn identity — like
   // track() — so a fresh closure here doesn't defeat track's own cache.
   const guard = useCallback(
-    <H extends (...args: never[]) => Promise<void>>(
+    <H extends (...args: never[]) => Promise<unknown>>(
       resolveTargets: (...args: Parameters<H>) => readonly TimelineElement[],
       fn: H,
-      onRefused?: (...args: Parameters<H>) => void,
+      onRefused?: (reason: string, ...args: Parameters<H>) => Awaited<ReturnType<H>>,
     ): H => {
       const key = fn as unknown as GuardedTimelineHandler;
       const cached = guardedRef.current.get(key);
@@ -97,10 +103,9 @@ export function useTimelineEditing({
       entry.resolveTargets = resolveTargets as unknown as GuardedTimelineResolver;
       entry.onRefused = onRefused as unknown as GuardedTimelineRefusal | undefined;
       entry.wrapped = ((...args: Parameters<H>) => {
-        if (!checkEditableRef.current(entry.resolveTargets(...(args as never[])))) {
-          entry.onRefused?.(...(args as never[]));
-          return Promise.resolve();
-        }
+        const reason = refuseEditRef.current(entry.resolveTargets(...(args as never[])));
+        if (reason !== null)
+          return Promise.resolve(entry.onRefused?.(reason, ...(args as never[])));
         return fn(...args);
       }) as H as unknown as GuardedTimelineHandler;
       guardedRef.current.set(key, entry);
@@ -309,7 +314,7 @@ export function useTimelineEditing({
       ];
       if (updates.playbackStart != null) {
         const liveAttr = playbackStartAttributeForElement(element);
-        liveAttrs.push([liveAttr, formatTimelineAttributeNumber(updates.playbackStart)]);
+        liveAttrs.push([liveAttr, formatTimelineMediaOffset(updates.playbackStart)]);
       }
       patchIframeDomTiming(previewIframeRef.current, element, liveAttrs, activeCompPath);
       // Snapshot the duration BEFORE the optimistic updates below so a failed
@@ -432,7 +437,7 @@ export function useTimelineEditing({
     checkEditable,
   });
 
-  const { revertLive: revertElementFxLive, ...setElementFxAttribute } = useSetElementAttribute({
+  const setElementFxAttribute = useSetElementAttribute({
     projectIdRef,
     activeCompPath,
     showToast,
@@ -443,18 +448,16 @@ export function useTimelineEditing({
     isRecordingRef,
   });
 
-  const { revertLive: revertAudioGroupLive, ...setAudioGroupAttribute } = useSetAudioGroupAttribute(
-    {
-      projectIdRef,
-      activeCompPath,
-      showToast,
-      writeProjectFile,
-      recordEdit,
-      previewIframeRef,
-      pendingTimelineEditPathRef,
-      isRecordingRef,
-    },
-  );
+  const setAudioGroupAttribute = useSetAudioGroupAttribute({
+    projectIdRef,
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    previewIframeRef,
+    pendingTimelineEditPathRef,
+    isRecordingRef,
+  });
 
   const { handleTimelineElementsDelete, handleTimelineElementDelete } = useTimelineDeleteOps({
     projectIdRef,
@@ -500,6 +503,25 @@ export function useTimelineEditing({
     forceReloadSdkSession,
   });
 
+  const refused = (reason: string): TimelineEditOutcome => ({ status: "refused", reason });
+  const audioGroupMembers = (groupId: string): TimelineElement[] => {
+    const state = usePlayerStore.getState();
+    const flatMembers = state.elements.filter((el) => el.audioGroup === groupId);
+    const domMembers = state.domClipChildren
+      .filter((child) => child.audioGroup === groupId)
+      .map(
+        (child): TimelineElement => ({
+          id: child.id,
+          domId: child.id,
+          tag: "div",
+          start: 0,
+          duration: 0,
+          track: -1,
+        }),
+      );
+    return [...flatMembers, ...domMembers];
+  };
+
   // Every write-handler is tracked here, the one place all hand edits
   // converge, so undo never races a write; canEdit gates the same point.
   // Coverage boundary: see the PR body, not every kind resolves an element.
@@ -526,27 +548,10 @@ export function useTimelineEditing({
       // (timelineAudioGroupVolume.ts): a sub-composition's group members have
       // no flat twin, only a domClipChildren entry, so both are checked.
       setQuiet: track(
-        guard(
-          (groupId) => {
-            const state = usePlayerStore.getState();
-            const flatMembers = state.elements.filter((el) => el.audioGroup === groupId);
-            const domMembers = state.domClipChildren
-              .filter((child) => child.audioGroup === groupId)
-              .map(
-                (child): TimelineElement => ({
-                  id: child.id,
-                  domId: child.id,
-                  tag: "div",
-                  start: 0,
-                  duration: 0,
-                  track: -1,
-                }),
-              );
-            return [...flatMembers, ...domMembers];
-          },
-          setAudioGroupAttribute.setQuiet,
-          (groupId, attr) => revertAudioGroupLive(groupId, attr),
-        ),
+        guard(audioGroupMembers, setAudioGroupAttribute.setQuiet, (reason, groupId, attr) => {
+          setAudioGroupAttribute.revertLive(groupId, attr);
+          return refused(reason);
+        }),
       ),
     },
     setElementFxAttribute: {
@@ -555,7 +560,10 @@ export function useTimelineEditing({
         guard(
           (element) => [element],
           setElementFxAttribute.setQuiet,
-          (element, attr) => revertElementFxLive(element, attr),
+          (reason, element, attr) => {
+            setElementFxAttribute.revertLive(element, attr);
+            return refused(reason);
+          },
         ),
       ),
     },
@@ -582,5 +590,9 @@ export function useTimelineEditing({
     handleTimelineGroupResize: track(
       guard((changes) => changes.map((c) => c.element), groupEditing.handleTimelineGroupResize),
     ),
+    restoreLiveLanes: (restore: Parameters<typeof setElementFxAttribute.restoreLive>[0]) => {
+      setElementFxAttribute.restoreLive(restore);
+      setAudioGroupAttribute.restoreLive(restore);
+    },
   };
 }

package/src/hooks/useTimelineGroupEditing.ts

@@ -13,6 +13,7 @@ import {
   buildTimelineResizeTimingPatch,
   extendRootDurationIfNeeded,
   formatTimelineAttributeNumber,
+  formatTimelineMediaOffset,
   patchIframeDomTiming,
   playbackStartAttributeForElement,
   persistTimelineBatchEdit,
@@ -377,7 +378,7 @@ export function useTimelineGroupEditing({
         ];
         if (change.playbackStart != null) {
           const liveAttr = playbackStartAttributeForElement(change.element);
-          liveAttrs.push([liveAttr, formatTimelineAttributeNumber(change.playbackStart)]);
+          liveAttrs.push([liveAttr, formatTimelineMediaOffset(change.playbackStart)]);
         }
         patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs, activeCompPath);
       }

package/src/hooks/useToast.ts

@@ -50,7 +50,7 @@ export function useToast() {
   );
 
   const showToast = useCallback(
-    (message: string, tone: AppToast["tone"] = "error") => {
+    (message: string, tone: AppToast["tone"] = "error"): number => {
       const id = nextToastId++;
       setToasts((prev) => {
         const next = [...prev, { id, message, tone }];
@@ -65,6 +65,7 @@ export function useToast() {
         const timer = setTimeout(() => dismissToast(id), AUTO_DISMISS_MS);
         timersRef.current.set(id, timer);
       }
+      return id;
     },
     [clearTimer, dismissToast],
   );

package/src/index.ts

@@ -162,6 +162,7 @@ export type { StudioPendingEditsDrainResult } from "./utils/studioPendingEdits";
 export type {
   CanEditTimelineElement,
   TimelineEditPermission,
+  TimelineEditOutcome,
 } from "./hooks/timelineEditPermission";
 export { useEditHistoryActions } from "./hooks/useEditHistoryActions";
 export type {

package/src/player/components/ImageThumbnail.tsx

@@ -2,8 +2,8 @@ import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
-import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
-import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
+import { decodeImageThumbnail } from "../lib/thumbnailImageDecoder";
+import { computeThumbnailStrip } from "./thumbnailUtils";
 
 export interface ImageThumbnailProps {
   imageSrc: string;
@@ -35,16 +35,7 @@ export const ImageThumbnail = memo(function ImageThumbnail({
       kind: "image" as const,
       priority,
       rich,
-      load: async (signal: AbortSignal) => {
-        const aspect = await probeImageAspect(imageSrc, signal, true);
-        return {
-          value: { kind: "image" as const, url: imageSrc, aspect },
-          weight:
-            TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalWidth *
-            TIMELINE_VIEWPORT_BUDGETS.posterMaxPhysicalHeight *
-            4,
-        };
-      },
+      load: (signal: AbortSignal) => decodeImageThumbnail(imageSrc, signal),
     }),
     [imageSrc, priority, projectId, rich, sessionEpoch],
   );

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

@@ -127,6 +127,11 @@ describe("preview errors", () => {
     root = null;
   });
 
+  it("puts the preview on the player's once-a-second paused heartbeat", async () => {
+    const { player } = await mountPlayer();
+    expect(player.hasAttribute("low-power-idle")).toBe(true);
+  });
+
   it("attaches lifecycle listeners before navigating the player", async () => {
     await mountPlayer();
     const srcIndex = lifecycleLog.indexOf("src");
@@ -272,6 +277,29 @@ describe("ready to show", () => {
     expect(onReadyToShowChange).toHaveBeenLastCalledWith(false);
   });
 
+  it("can show a document whose player was ready and painted before its load event", async () => {
+    const onReadyToShowChange = vi.fn();
+    const { player } = await mountPlayer({ onReadyToShowChange });
+    const el = Object.assign(player as TestHyperframesPlayer, { ready: true, painted: true });
+
+    act(() => {
+      el.dispatchEvent(new Event("ready"));
+      el.dispatchEvent(new Event("painted"));
+      el.iframeElement.dispatchEvent(new Event("load"));
+    });
+    await twoFrames();
+    expect(onReadyToShowChange).toHaveBeenLastCalledWith(true);
+
+    for (const state of [
+      { ready: false, painted: true },
+      { ready: true, painted: false },
+    ]) {
+      Object.assign(el, state);
+      act(() => void el.iframeElement.dispatchEvent(new Event("load")));
+      expect(onReadyToShowChange).toHaveBeenLastCalledWith(false);
+    }
+  });
+
   it("marks the preview booted when it can show and play, not at ready", async () => {
     usePlayerStore.setState({ previewBooted: false });
     const { player } = await mountPlayer({});

package/src/player/components/Player.tsx

@@ -39,6 +39,8 @@ interface PlayerProps {
 
 interface HyperframesPlayerElement extends HTMLElement {
   iframeElement: HTMLIFrameElement;
+  ready?: boolean;
+  painted?: boolean;
 }
 
 const MEDIA_HAVE_FUTURE_DATA = 3;
@@ -245,8 +247,8 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           setLoaded(true);
           setPreviewError(null);
           setShaderTransitionLoading(false);
-          setCompositionLoading(true);
-          setPainted(false);
+          setCompositionLoading(!player.ready);
+          setPainted(Boolean(player.painted));
           // Reveal animation on reload (hot-reload, composition switch)
           if (loadCountRef.current > 1) {
             container.classList.remove("preview-revealing");
@@ -317,6 +319,7 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
 
         player.setAttribute("shader-capture-scale", "1");
         player.setAttribute("shader-loading", "player");
+        player.setAttribute("low-power-idle", "");
         player.setAttribute("width", String(portrait ? 1080 : 1920));
         player.setAttribute("height", String(portrait ? 1920 : 1080));
         player.style.width = "100%";

package/src/player/components/TimelineAutomationLane.test.tsx

@@ -338,6 +338,24 @@ describe("TimelineAutomationLane", () => {
     );
   });
 
+  it("drops the dragged position when the save does not land", async () => {
+    const onCommit = vi.fn(async () => ({ status: "refused" as const, reason: "Locked" }));
+    const { container } = render(
+      <TimelineAutomationLane {...laneProps({ automation: ramp, onCommit })} />,
+    );
+    const svg = container.querySelector("svg")!;
+    stubBox(svg, { left: 0, top: 0, width: 400, height: 48 });
+    const before = Number(container.querySelectorAll("circle")[0]!.getAttribute("cx"));
+    fire(svg, "pointerdown", { clientX: 0, clientY: 6 });
+    fire(svg, "pointermove", { clientX: 160, clientY: 40 });
+    fire(svg, "pointerup", { clientX: 160, clientY: 40 });
+    await act(async () => {});
+    expect(Number(container.querySelectorAll("circle")[0]!.getAttribute("cx"))).toBeCloseTo(
+      before,
+      5,
+    );
+  });
+
   it("follows the prop again once the store catches up", () => {
     const { container, rerender } = renderRerenderable(
       <TimelineAutomationLane {...laneProps({ automation: ramp })} />,
@@ -359,6 +377,25 @@ describe("TimelineAutomationLane", () => {
     expect(Number(circles[0]!.getAttribute("cx"))).toBeCloseTo(PAD + 300, 0);
   });
 
+  it("commits the dragged points when an older save lands mid-drag", () => {
+    const onCommit = vi.fn(async (_next: HfAutomation) => ({ status: "saved" as const }));
+    const { container, rerender } = renderRerenderable(
+      <TimelineAutomationLane {...laneProps({ automation: ramp, onCommit })} />,
+    );
+    const svg = container.querySelector("svg")!;
+    stubBox(svg, { left: 0, top: 0, width: 400, height: 48 });
+    fire(svg, "pointerdown", { clientX: 0, clientY: 6 });
+    fire(svg, "pointermove", { clientX: 160, clientY: 40 });
+    fire(svg, "pointerup", { clientX: 160, clientY: 40 });
+    const older = onCommit.mock.calls[0]![0];
+    fire(svg, "pointerdown", { clientX: 160, clientY: 40 });
+    fire(svg, "pointermove", { clientX: 320, clientY: 40 });
+    rerender(<TimelineAutomationLane {...laneProps({ automation: older, onCommit })} />);
+    fire(svg, "pointerup", { clientX: 320, clientY: 40 });
+    const released = onCommit.mock.calls[1]![0];
+    expect(released.lanes[0]!.points[0]!.t).toBeGreaterThan(older.lanes[0]!.points[0]!.t + 1);
+  });
+
   it("keeps lane order when editing, so the view does not switch parameters", () => {
     // The displayed lane defaults to the first one. Moving the edited lane to
     // the end of the list swapped the lane out from under the pointer on the
@@ -1627,6 +1664,7 @@ describe("TimelineAutomationLane stretch", () => {
     const reverted = (props.onPreview.mock.calls.at(-1)?.[0] as HfAutomation | undefined)?.lanes[0]
       ?.points;
     expect(reverted).toEqual(stretchable.lanes[0]?.points);
+    expect(props.onPreview.mock.calls.at(-1)?.[1]).toBe(true);
     expect(onRangeSelect).toHaveBeenLastCalledWith(0.5, 2.5, 0, 1);
   });