@hyperframes/studio 0.8.79 → 0.8.81

package/src/hooks/useBlockHandlers.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useBlockHandlers, type UseBlockHandlersResult } from "./useBlockHandlers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../utils/blockInstaller", () => ({
+  addBlockToProject: async (opts: { showToast: (message: string) => void }) => {
+    opts.showToast("Installing catalog items needs hyperframes preview");
+    return null;
+  },
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("useBlockHandlers", () => {
+  it("leaves only the error toast when an install fails", async () => {
+    const events: string[] = [];
+    let nextId = 0;
+    const showToast = (message: string) => {
+      events.push(`show ${message}`);
+      return ++nextId;
+    };
+    const dismissToast = (id: number) => events.push(`dismiss ${id}`);
+    let handlers: UseBlockHandlersResult | undefined;
+    function Harness() {
+      handlers = useBlockHandlers({
+        projectId: "demo",
+        blockCtxDeps: {
+          activeCompPath: null,
+          timelineElements: [],
+          readProjectFile: async () => "",
+          writeProjectFile: async () => {},
+          recordEdit: async () => {},
+          refreshFileTree: async () => {},
+          reloadPreview: () => {},
+          showToast,
+          dismissToast,
+        },
+        previewIframeRef: { current: null },
+        setRightCollapsed: () => {},
+        setRightPanelTab: () => {},
+      });
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+
+    await act(async () => {
+      handlers!.handleAddBlock("x-post");
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(events).toEqual([
+      "show Adding x-post…",
+      "show Installing catalog items needs hyperframes preview",
+      "dismiss 1",
+    ]);
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useBlockHandlers.ts

@@ -23,7 +23,8 @@ interface BlockCtxDeps {
   }) => Promise<void>;
   refreshFileTree: () => Promise<void>;
   reloadPreview: () => void;
-  showToast: (message: string, tone?: "error" | "info") => void;
+  showToast: (message: string, tone?: "error" | "info") => number;
+  dismissToast: (id: number) => void;
 }
 
 interface UseBlockHandlersParams {
@@ -87,21 +88,23 @@ export function useBlockHandlers({
   // Block installs hit the server and end in a full preview reload; without a
   // guard, repeat drops while one is in flight stack duplicate installs.
   const installingBlockRef = useRef(false);
+  const { showToast, dismissToast } = blockCtxDeps;
   const runBlockInstall = useCallback(
     async <T>(blockName: string, install: () => Promise<T>): Promise<T | null> => {
       if (installingBlockRef.current) {
-        blockCtx.showToast("A block is already installing — one moment…", "info");
+        showToast("A block is already installing — one moment…", "info");
         return null;
       }
       installingBlockRef.current = true;
-      blockCtx.showToast(`Adding ${blockName}…`, "info");
+      const progress = showToast(`Adding ${blockName}…`, "info");
       try {
         return await install();
       } finally {
         installingBlockRef.current = false;
+        dismissToast(progress);
       }
     },
-    [blockCtx],
+    [showToast, dismissToast],
   );
 
   const handleAddBlock = useCallback(

package/src/hooks/useDomEditAttributeCommits.ts

@@ -29,15 +29,6 @@ interface DataAttributeCommitOptions {
   skipRefresh: boolean;
   refreshAfter?: boolean;
   onSettled?: (ok: boolean) => void;
-  /**
-   * Undo grouping for a gesture that spans several commits.
-   *
-   * Without it the key is derived from the prefix, attribute and element, and the
-   * window is history's own 300ms — so a drag's moves and the release that ends it
-   * landed in different entries, and a drag slower than the window split further.
-   * A caller that knows a gesture is in progress passes one key for all of it.
-   */
-  coalesce?: { key: string; ms: number };
   /**
    * Apply to the preview and stop there — no file write, no history entry.
    *
@@ -150,9 +141,7 @@ export function useDomEditAttributeCommits({
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
       const fullAttr = resolveFullAttrName(attr, true);
-      const commitKey =
-        options.coalesce?.key ??
-        `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`;
+      const commitKey = `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`;
       const isLatestCommit = bumpDomEditCommitMapVersion(
         domAttributeCommitVersionRef.current,
         commitKey,
@@ -184,7 +173,6 @@ export function useDomEditAttributeCommits({
               persistDomEditOperations(domEditSelection, [op], {
                 label: options.label,
                 coalesceKey: commitKey,
-                ...(options.coalesce ? { coalesceMs: options.coalesce.ms } : {}),
                 skipRefresh: options.skipRefresh,
               }),
         shouldRevert: () => isLatestCommit(),
@@ -338,14 +326,13 @@ export function useDomEditAttributeCommits({
       attr: string,
       value: string | null,
       onSettled?: (ok: boolean) => void,
-      live?: { coalesce?: { key: string; ms: number }; previewOnly?: boolean },
+      live?: { previewOnly?: boolean },
     ) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
         coalescePrefix: "attr-live",
         skipRefresh: true,
         onSettled,
-        ...(live?.coalesce ? { coalesce: live.coalesce } : {}),
         ...(live?.previewOnly ? { previewOnly: true } : {}),
       });
     },
@@ -362,13 +349,12 @@ export function useDomEditAttributeCommits({
    * edit computes from a pre-edit value and appears to do nothing.
    */
   const handleDomAttributeQuietCommit = useCallback(
-    async (attr: string, value: string | null, coalesce?: { key: string; ms: number }) => {
+    async (attr: string, value: string | null) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
         coalescePrefix: "attr-quiet",
         skipRefresh: true,
         refreshAfter: true,
-        ...(coalesce ? { coalesce } : {}),
       });
     },
     [commitDataAttribute],

package/src/hooks/useDomEditSession.ts

@@ -511,6 +511,7 @@ export function useDomEditSession({
     handlePreviewCanvasPointerLeave,
     applyDomSelection,
     clearDomSelection,
+    refreshDomEditSelectionFromPreview,
     handleDomStyleCommit,
     handleDomStyleCommitForSelection,
     handleDomAttributeCommit,

package/src/hooks/useEditHistoryActions.ts

@@ -33,7 +33,7 @@ export interface UseEditHistoryActionsOptions {
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: (restore: Pick<HistoryResult, "paths" | "files">) => Promise<void>;
   waitForPendingDomEditSaves: () => Promise<void>;
-  onAfterUndoRedo?: () => void;
+  onAfterUndoRedo?: (restore: Pick<HistoryResult, "paths" | "files">) => void;
   /** Active composition path — decides whether undo/redo must resync the SDK session. */
   activeCompPath?: string | null;
   /** Reloads the SDK session after a revert of the active comp, past the self-write suppress window. */
@@ -84,11 +84,12 @@ export function useEditHistoryActions({
         return;
       }
       if (result.ok && result.label) {
-        onAfterUndoRedo?.();
+        const restore = { paths: result.paths, files: result.files };
+        onAfterUndoRedo?.(restore);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
         }
-        await syncHistoryPreviewAfterApply({ paths: result.paths, files: result.files });
+        await syncHistoryPreviewAfterApply(restore);
         showToast(result.label, "info");
       }
     },

package/src/hooks/useExternalFileChangeCoordinator.test.tsx

@@ -94,6 +94,55 @@ describe("external file change coordinator", () => {
     expect(refreshFileTree).toHaveBeenCalledOnce();
   });
 
+  it("refreshes the file tree but not Preview for a file the preview never loaded", async () => {
+    const order: string[] = [];
+    await mountCoordinator({
+      reloadPreview: () => order.push("preview"),
+      reloadSdkSession: () => order.push("sdk"),
+      refreshFileTree: () => {
+        order.push("tree");
+      },
+    });
+    await act(async () =>
+      handler?.({ path: "notes.md", content: "notes", version: "v1", affectsPreview: false }),
+    );
+    expect(order).toEqual(["sdk", "tree"]);
+  });
+
+  it("still reloads Preview when a notes change replaces a waiting film change", async () => {
+    let release = () => {};
+    const inFlight = new Promise<void>((resolve) => (release = resolve));
+    const reloadPreview = vi.fn();
+    const reloadSdkSession = vi.fn();
+    const onAcceptedPersistedFileChange = vi.fn();
+    let drains = 0;
+    await mountCoordinator({
+      reloadPreview,
+      reloadSdkSession,
+      onAcceptedPersistedFileChange,
+      drainPendingChanges: async () => {
+        if (drains++ === 0) await inFlight;
+        return { status: "clean" as const };
+      },
+    });
+    await act(async () => handler?.({ path: "index.html", content: "a", version: "v1" }));
+    await act(async () =>
+      handler?.({
+        path: "scene.html",
+        content: "b",
+        version: "v2",
+        affectedCompositions: ["scene.html"],
+      }),
+    );
+    await act(async () =>
+      handler?.({ path: "notes.md", content: "c", version: "v3", affectsPreview: false }),
+    );
+    await act(async () => release());
+    expect(reloadPreview).toHaveBeenCalledTimes(2);
+    expect(reloadSdkSession).toHaveBeenLastCalledWith("scene.html");
+    expect(onAcceptedPersistedFileChange).toHaveBeenLastCalledWith("scene.html", ["scene.html"]);
+  });
+
   it("does not refresh the tree for a suppressed self-write echo", async () => {
     const refreshFileTree = vi.fn();
     await mountCoordinator({ refreshFileTree });

package/src/hooks/useExternalFileChangeCoordinator.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
 import {
   readFileChangeAffectedCompositions,
+  readFileChangeAffectsPreview,
   readFileChangeField,
   readStudioFileChangePath,
 } from "../components/editor/manualEdits";
@@ -231,9 +232,12 @@ export function useExternalFileChangeCoordinator({
   }, [loadConflictSnapshot, projectId, recoveryFilePath]);
 
   const reloadAcceptedGeneration = useCallback(
-    (path: string) => {
-      logReload("reload", { path, by: "external-change coordinator" });
-      reloadPreview();
+    (path: string, affectsPreview = true) => {
+      logReload(affectsPreview ? "reload" : "file-tree only", {
+        path,
+        by: "external-change coordinator",
+      });
+      if (affectsPreview) reloadPreview();
       reloadSdkSession(path);
       // Fire-and-forget: a failed refresh leaves the tree as stale as it was,
       // which is the status quo this exists to improve on, not a new failure
@@ -279,7 +283,7 @@ export function useExternalFileChangeCoordinator({
         if (!mountedRef.current || generation !== generationRef.current) return;
         setBlocked(null);
         onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(payload));
-        reloadAcceptedGeneration(path);
+        reloadAcceptedGeneration(path, readFileChangeAffectsPreview(payload));
         return;
       }
       const content = readFileChangeContent(payload);
@@ -410,7 +414,12 @@ export function useExternalFileChangeCoordinator({
         return;
       }
 
-      pendingPayloadRef.current = { payload };
+      const waiting = pendingPayloadRef.current?.payload;
+      const waitingChangeOutranksThis =
+        waiting != null &&
+        readFileChangeAffectsPreview(waiting) &&
+        !readFileChangeAffectsPreview(payload);
+      if (!waitingChangeOutranksThis) pendingPayloadRef.current = { payload };
       void startDrainLoop();
     },
     [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange],
@@ -456,7 +465,7 @@ export function useExternalFileChangeCoordinator({
       await deleteConflictSnapshot?.(projectId, path);
       setBlocked(null);
       onAcceptedPersistedFileChange(path, readFileChangeAffectedCompositions(current.payload));
-      reloadAcceptedGeneration(path);
+      reloadAcceptedGeneration(path, readFileChangeAffectsPreview(current.payload));
     },
     [
       deleteConflictSnapshot,

package/src/hooks/useLintModal.test.tsx

@@ -69,6 +69,21 @@ describe("useLintModal hasLintError", () => {
   });
 });
 
+describe("useLintModal lintFindingCount", () => {
+  it("counts findings, not files, with the result open and after it closes", async () => {
+    const findings = ["a", "b", "c"].map((message) => ({
+      severity: "warning",
+      message,
+      file: "index.html",
+    }));
+    await mountWithLint(async () => ({ json: async () => ({ findings }) }));
+    expect(latest?.lintFindingCount).toBe(3);
+    act(() => latest?.closeLintModal());
+    expect(latest?.findingsByFile.size).toBe(1);
+    expect(latest?.lintFindingCount).toBe(3);
+  });
+});
+
 describe("useLintModal background lint", () => {
   it("waits for the live preview to boot before asking the server to lint", async () => {
     usePlayerStore.setState({ previewBooted: false });

package/src/hooks/useLintModal.ts

@@ -98,8 +98,10 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
 
   const findingsByElement = useMemo(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo(() => groupFindings((f) => f.file), [groupFindings]);
-  // Reads the list the badge count reads: the manual result when present, else the background one.
-  const hasLintError = (lintModal ?? backgroundFindings).some((f) => f.severity === "error");
+  // The badge counts findings, not files: the manual result when present, else the background one.
+  const badgeFindings = lintModal ?? backgroundFindings;
+  const lintFindingCount = badgeFindings.length;
+  const hasLintError = badgeFindings.some((f) => f.severity === "error");
 
   // Sync lint findings directly to the player store — eliminates the
   // mirroring useEffect that was previously in App.tsx.
@@ -115,6 +117,7 @@ export function useLintModal(projectId: string | null, refreshKey?: number) {
     backgroundFindings,
     findingsByElement,
     findingsByFile,
+    lintFindingCount,
     hasLintError,
   };
 }

package/src/hooks/useProjectCompositionVariables.ts

@@ -51,7 +51,7 @@ async function readGroup(
  * full parse, so large projects don't pay N openComposition calls.
  */
 export function useProjectCompositionVariables(
-  fileTree: string[],
+  compositionPaths: string[],
   excludePath: string | null,
   readProjectFile: (path: string) => Promise<string>,
   refreshKey: unknown,
@@ -60,7 +60,7 @@ export function useProjectCompositionVariables(
 
   useEffect(() => {
     let cancelled = false;
-    const htmlFiles = fileTree.filter((p) => p.endsWith(".html") && p !== excludePath);
+    const htmlFiles = compositionPaths.filter((p) => p !== excludePath);
 
     void (async () => {
       const out: CompositionVariableGroup[] = [];
@@ -75,7 +75,7 @@ export function useProjectCompositionVariables(
       cancelled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fileTree, excludePath, readProjectFile, refreshKey]);
+  }, [compositionPaths, excludePath, readProjectFile, refreshKey]);
 
   return groups;
 }

package/src/hooks/useTimelineEditing.ts

@@ -11,6 +11,7 @@ import {
   playbackStartAttributeForElement,
   persistTimelineEdit,
   formatTimelineAttributeNumber,
+  formatTimelineMediaOffset,
   extendRootDurationIfNeeded,
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
@@ -313,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
@@ -436,7 +437,7 @@ export function useTimelineEditing({
     checkEditable,
   });
 
-  const { revertLive: revertElementFxLive, ...setElementFxAttribute } = useSetElementAttribute({
+  const setElementFxAttribute = useSetElementAttribute({
     projectIdRef,
     activeCompPath,
     showToast,
@@ -447,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,
@@ -550,7 +549,7 @@ export function useTimelineEditing({
       // no flat twin, only a domClipChildren entry, so both are checked.
       setQuiet: track(
         guard(audioGroupMembers, setAudioGroupAttribute.setQuiet, (reason, groupId, attr) => {
-          revertAudioGroupLive(groupId, attr);
+          setAudioGroupAttribute.revertLive(groupId, attr);
           return refused(reason);
         }),
       ),
@@ -562,7 +561,7 @@ export function useTimelineEditing({
           (element) => [element],
           setElementFxAttribute.setQuiet,
           (reason, element, attr) => {
-            revertElementFxLive(element, attr);
+            setElementFxAttribute.revertLive(element, attr);
             return refused(reason);
           },
         ),
@@ -591,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/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

@@ -277,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");

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