@hyperframes/studio 0.8.123 → 0.8.125

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

@@ -0,0 +1,67 @@
+// @vitest-environment happy-dom
+import { createRequire } from "node:module";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { act, type ReactNode } from "react";
+import { compile } from "tailwindcss";
+import { describe, expect, it } from "vitest";
+import { createHappyDomRootHarness } from "./testRootHarness";
+import { AudibleVideoClipContent } from "./AudibleVideoClipContent";
+
+const harness = createHappyDomRootHarness();
+const STYLES_DIR = path.resolve(__dirname, "../../styles");
+const TAILWIND_DIR = path.dirname(
+  createRequire(import.meta.url).resolve("tailwindcss/package.json"),
+);
+
+async function studioCss() {
+  const load = async (id: string, base: string) => {
+    const file =
+      id === "tailwindcss" ? path.join(TAILWIND_DIR, "index.css") : path.resolve(base, id);
+    return { path: file, base: path.dirname(file), content: readFileSync(file, "utf8") };
+  };
+  const compiled = await compile(readFileSync(path.join(STYLES_DIR, "studio.css"), "utf8"), {
+    base: STYLES_DIR,
+    loadStylesheet: load,
+  });
+  return compiled.build([]);
+}
+
+async function renderStrip(wave: ReactNode) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  await act(async () => {
+    harness
+      .mount(host)
+      .render(<AudibleVideoClipContent thumbnail={<span>frames</span>} waveform={wave} />);
+  });
+  return host;
+}
+
+describe("AudibleVideoClipContent", () => {
+  it("draws the sound on the audio clip's own surface, under half the clip", async () => {
+    const host = await renderStrip(<span>wave</span>);
+    const strip = host.querySelector<HTMLElement>('[data-testid="audible-video-wave"]');
+    expect(strip?.textContent).toBe("wave");
+    expect(strip?.style.backgroundColor).toBe("var(--timeline-clip-audio-bg)");
+    expect(strip?.style.height).toBe("50%");
+    expect(strip?.previousElementSibling?.getAttribute("style")).toContain("bottom: 50%");
+  });
+
+  it("keeps only the peak mark in the strip, above the waveform canvas layer", async () => {
+    const style = document.createElement("style");
+    style.textContent = await studioCss();
+    document.head.appendChild(style);
+    const host = await renderStrip(
+      <span data-peak-badge>
+        ▲<span data-peak-text> peaks +0.7 dBFS</span>
+      </span>,
+    );
+    const badge = host.querySelector<HTMLElement>("[data-peak-badge]")!;
+    const text = host.querySelector<HTMLElement>("[data-peak-text]")!;
+    expect(getComputedStyle(text).display).toBe("none");
+    // The waveform canvas sits in a z-index 10 layer (AudioWaveform).
+    expect(Number(getComputedStyle(badge).zIndex)).toBeGreaterThan(10);
+    style.remove();
+  });
+});

package/src/player/components/AudibleVideoClipContent.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 
-/** Share of the clip height the sound strip takes under a video's thumbnails. */
-const AUDIBLE_VIDEO_WAVE_SHARE = 0.38;
+/** Share of the clip height the sound strip takes under a video's thumbnails: tall enough for the bars to read. */
+const AUDIBLE_VIDEO_WAVE_SHARE = 0.5;
+const AUDIO_CLIP_SURFACE = "var(--timeline-clip-audio-bg)";
 
 /** A video that carries sound: thumbnails on top, its waveform strip along the bottom. */
 export function AudibleVideoClipContent({
@@ -18,9 +19,9 @@ export function AudibleVideoClipContent({
         {thumbnail}
       </div>
       <div
-        className="absolute inset-x-0 bottom-0 bg-black/30"
+        className="audible-video-wave absolute inset-x-0 bottom-0"
         data-testid="audible-video-wave"
-        style={{ height: waveHeight }}
+        style={{ height: waveHeight, backgroundColor: AUDIO_CLIP_SURFACE }}
       >
         {waveform}
       </div>

package/src/player/components/AudioWaveform.tsx

@@ -26,6 +26,7 @@ const BAR_STEP = 3;
 
 export const rendersWaveform = (el: { tag: string }) => el.tag === "audio";
 const FADE_GHOST_OPACITY = 0.27;
+export const WAVEFORM_LAYER_Z = 10;
 
 type BarGeometry = { x: number; width: number; height: number; gain: number };
 
@@ -236,7 +237,7 @@ export const AudioWaveform = memo(function AudioWaveform({
 
   return (
     <div ref={rootRef} className="absolute inset-0">
-      <div className="absolute inset-0 overflow-hidden" style={{ zIndex: 10 }}>
+      <div className="absolute inset-0 overflow-hidden" style={{ zIndex: WAVEFORM_LAYER_Z }}>
         <canvas
           ref={setCanvasRef}
           className="absolute inset-x-0 bottom-0 w-full"

package/src/player/components/ClipPeakMarks.tsx

@@ -49,8 +49,11 @@ export function ClipPeakMarks({
               }}
             />
           ))}
-          <span className="absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400">
-            ▲ peaks {dbText(peakDbfs)}
+          <span
+            className="absolute top-0 right-1 font-mono text-[9px] leading-none text-red-400"
+            data-peak-badge
+          >
+            ▲<span data-peak-text> peaks {dbText(peakDbfs)}</span>
           </span>
         </div>
       )}

package/src/player/components/OutOfSyncBadge.tsx

@@ -105,7 +105,7 @@ export const OutOfSyncBadge = memo(function OutOfSyncBadge({ el }: { el: Timelin
         aria-label={`Out of sync with ${partnerName} by ${label} frames`}
         title={`Out of sync with ${partnerName} by ${label} — click for Move or Slip into Sync`}
         data-testid="out-of-sync-badge"
-        className="absolute bottom-0.5 left-1 z-[7] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums"
+        className="absolute bottom-0.5 left-1 z-[12] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums"
         onPointerDown={stop}
         onDoubleClick={stop}
         onClick={open}

package/src/player/components/Timeline.trackPadding.test.tsx

@@ -99,9 +99,7 @@ describe("Timeline trackPadding", () => {
     const clip = host.querySelector('[data-clip][data-el-id="c0"]')!;
     pointer(clip, "pointerdown", RULER_H + TRACK_H / 2);
     pointer(window, "pointermove", ROW1_MID);
-    const ghost = Array.from(
-      host.querySelectorAll<HTMLElement>(".absolute.pointer-events-none"),
-    ).find((el) => el.style.zIndex === "30" && !el.dataset.testid);
+    const ghost = host.querySelector<HTMLElement>('[data-testid="timeline-drag-landing"]');
     expect(top(ghost)).toBe(`${RULER_H + TRACK_H + CLIP_Y}px`);
     pointer(window, "pointermove", RULER_H + 3 * TRACK_H + TRACK_H / 2);
     const lane = host.querySelector<HTMLElement>("[data-timeline-new-track-lane]");

package/src/player/components/TimelineCanvas.tsx

@@ -134,6 +134,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
           lane + snapped start), parallel to the ghost. Hidden in insert mode. */}
       {draggedClip?.started && draggedClip.insertRow == null && draggedRowIndex >= 0 && (
         <div
+          data-testid="timeline-drag-landing"
           className="absolute pointer-events-none"
           style={{
             top: props.rowGeometry.getRowTop(draggedRowIndex) + CLIP_Y,

package/src/player/components/TimelineClip.filmstrip.test.tsx

@@ -6,6 +6,7 @@ import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 import { loadStylesheet, STYLES_DIR } from "../../styles/styleSources";
 import { cleanupMounted, trackedRoot } from "../../components/ui/mountHost.testHelpers";
 import { TimelineClip } from "./TimelineClip";
+import { WAVEFORM_LAYER_Z } from "./AudioWaveform";
 import { renderClipChildren } from "./timelineClipChildren";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 
@@ -23,6 +24,7 @@ beforeAll(async () => {
 afterEach(() => {
   cleanupMounted();
   usePlayerStore.getState().setLintFindingsByElement(new Map());
+  usePlayerStore.getState().setElements([]);
   document.body.innerHTML = "";
 });
 
@@ -153,4 +155,29 @@ describe("Filmstrip clips", () => {
     );
     expect(css).toMatch(/\.timeline-clip:not\(\.is-audio\)\s*\{\s*border-width:\s*0;/);
   });
+
+  const audioPillZ = () =>
+    Number(
+      css.match(/\.timeline-clip\.is-audio \.timeline-clip__label\s*\{[^}]*z-index:\s*(\d+)/)?.[1],
+    );
+
+  it("draws an audio clip's name pill over its waveform", () => {
+    expect(audioPillZ()).toBeGreaterThan(WAVEFORM_LAYER_Z);
+  });
+
+  it("keeps the out-of-sync badge over the audio name pill", () => {
+    const audio = {
+      id: "clip",
+      domId: "clip",
+      label: "City",
+      tag: "audio",
+      start: 1.7,
+      duration: 4,
+    };
+    const synced = { ...audio, track: 1, playbackStart: 0, syncOrigin: "lk-1" };
+    const video = { ...synced, id: "talk", domId: "talk", tag: "video", start: 1, track: 0 };
+    usePlayerStore.getState().setElements([video, synced]);
+    const badge = render("audio", synced, false).querySelector('[data-testid="out-of-sync-badge"]');
+    expect(Number(badge?.className.match(/\bz-\[(\d+)\]/)?.[1])).toBeGreaterThan(audioPillZ());
+  });
 });

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

@@ -3,6 +3,7 @@
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { WAVEFORM_LAYER_Z } from "./AudioWaveform";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { TimelineClipFades, useClipFadeDraft } from "./TimelineClipFades";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
@@ -298,7 +299,7 @@ describe("TimelineClipFades", () => {
   it("paints the handles above the clip's waveform and thumbnail layers", () => {
     const { host } = render(clip);
     const layer = host.querySelector<HTMLElement>('[data-testid="clip"]')?.firstElementChild;
-    expect(Number((layer as HTMLElement).style.zIndex)).toBeGreaterThan(10);
+    expect(Number((layer as HTMLElement).style.zIndex)).toBeGreaterThan(WAVEFORM_LAYER_Z);
   });
 
   it("splits a clip narrower than two targets between the handles", () => {

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

@@ -321,6 +321,20 @@ describe("guideIfSaved — a guide only where the clip saves", () => {
     expect(guideIfSaved(el, { start: 2.217 }, edge, 1440)).toBeNull();
   });
 
+  it("keeps the pointer's start when a move's snap would save off the target", () => {
+    // 1440 px/s: a 31/30 s clip whose end snaps to 3.25s would save at 2.22s and jump 4px on release.
+    const el = clip("a", 0, 1, 31 / 30, 0, "div");
+    const { drag } = horizontalDrag(el, 0.5, 0);
+    const context = {
+      ...ctx(undefined, [el]),
+      pps: 1440,
+      buildSnapTargets: () => [{ time: 3.25, type: "clip-edge" as const }],
+    };
+    const x = drag.originClientX + 1.22 * 1440;
+    const next = computeDragPreview(drag, x, drag.originClientY, context);
+    expect(next).toMatchObject({ previewStart: 2.22, snapTime: null, snapType: null });
+  });
+
   it("draws no guide for a move whose saved start misses the target", () => {
     const nested = { ...moodboard, parentCompositionStart: 1 / 30 };
     const { drag } = horizontalDrag(nested, 0.5, 0);
@@ -388,6 +402,23 @@ describe("computeResizePreview — composition source continuity", () => {
     expect(result).toMatchObject({ previewStart: 1.03, snapTime: null, snapType: null });
   });
 
+  it("keeps the pointer's end when a tail snap would save off the target", () => {
+    // 1440 px/s: snapping 1.125s + 2.12s to 3.25s needs a 2.125s duration, which saves 7px off.
+    const result = computeResizePreview(
+      {
+        element: clip("a", 0, 1.125, 2, 0, "div"),
+        edge: "end",
+        originClientX: 0,
+        previewStart: 1.125,
+        previewDuration: 2,
+        started: true,
+      },
+      173,
+      { scroll: fakeScroll(), pps: 1440, buildSnapTargets: () => [{ time: 3.25, type: "grid" }] },
+    );
+    expect(result).toMatchObject({ previewDuration: 2.12, snapTime: null, snapType: null });
+  });
+
   it("does not let a tail snap shrink a clip below the drag's minimum duration", () => {
     const result = computeResizePreview(
       {

package/src/player/components/timelineClipDragPreview.ts

@@ -241,7 +241,7 @@ export function computeDragPreview(
     drag.element.key ?? drag.element.id,
     !isMusicTrack(drag.element),
   );
-  const snap = snapMoveToTargets(
+  const snapped = snapMoveToTargets(
     nextMove.start,
     drag.element.duration,
     targets,
@@ -251,6 +251,11 @@ export function computeDragPreview(
     dragMaxStart + drag.element.duration,
     ctx.gridStep,
   );
+  // A snap the saved clip would miss jumps on release, so the clip stays where the pointer put it.
+  const target = snapTarget(snapped);
+  const missed =
+    target !== null && !guideIfSaved(drag.element, { start: snapped.start }, target, pps);
+  const snap = missed ? { start: nextMove.start, snapTime: null, snapType: null } : snapped;
   // A group moves rigidly: the grabbed clip stops where any mover would cross its host's start.
   const group = resolveGroupDrag(drag, ctx);
   const dragKey = drag.element.key ?? drag.element.id;
@@ -268,11 +273,7 @@ export function computeDragPreview(
     return { ...drag, started: true };
   }
   const { track: previewTrack, insertRow } = placement;
-  const target =
-    placement.start === snap.start && snap.snapTime !== null && snap.snapType !== null
-      ? { time: snap.snapTime, type: snap.snapType }
-      : null;
-  const guide = guideIfSaved(drag.element, { start: snap.start }, target, pps);
+  const guide = placement.start === snap.start ? snapTarget(snap) : null;
   return {
     ...drag,
     started: true,
@@ -289,6 +290,9 @@ export function computeDragPreview(
   };
 }
 
+const snapTarget = (s: { snapTime: number | null; snapType: TimelineSnapType | null }) =>
+  s.snapTime !== null && s.snapType !== null ? { time: s.snapTime, type: s.snapType } : null;
+
 /** A snap's guide, kept only when the clip's edge as its file will save it is within a pixel of it. */
 export function guideIfSaved(
   element: TimelineElement,
@@ -392,37 +396,38 @@ export function computeResizePreview(
   );
   const gridStep = ctx.gridStep ?? 0;
   let snap: TimelineSnapTarget | null = null;
-  if (trimTargets.length > 0 || gridStep > 0) {
-    const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
-    if (resize.edge === "end") {
-      const edgeTime = nextResize.start + nextResize.duration;
-      const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs, gridStep);
-      // Stay within [start+minDuration, maxEnd] so the snap can't create a
-      // degenerate clip or run past the source/composition limit.
-      const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
-      if (
-        target &&
-        snapped <= maxEnd + 1e-6 &&
-        snappedDuration >= resolveTimelineMinDuration() - 1e-6
-      ) {
-        // An edge already on the target still owns the guide; only move it when off.
-        if (snapped !== edgeTime) nextResize = { ...nextResize, duration: snappedDuration };
-        snap = guideIfSaved(resize.element, nextResize, target, pps);
-      }
-    } else {
-      const { time: snapped, target } = snapTimelineTime(
-        nextResize.start,
-        trimTargets,
-        snapSecs,
-        gridStep,
-      );
-      const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
-      const delta = snapped - nextResize.start;
-      const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
-      if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
-        if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
-        snap = guideIfSaved(resize.element, nextResize, target, pps);
-      }
+  const snapSecs = TIMELINE_SNAP_PX / Math.max(pps, 1);
+  if (resize.edge === "end") {
+    const edgeTime = nextResize.start + nextResize.duration;
+    const { time: snapped, target } = snapTimelineTime(edgeTime, trimTargets, snapSecs, gridStep);
+    // Stay within [start+minDuration, maxEnd] so the snap can't create a
+    // degenerate clip or run past the source/composition limit.
+    const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
+    if (
+      target &&
+      snapped <= maxEnd + 1e-6 &&
+      snappedDuration >= resolveTimelineMinDuration() - 1e-6
+    ) {
+      const onTarget =
+        snapped === edgeTime ? nextResize : { ...nextResize, duration: snappedDuration };
+      snap = guideIfSaved(resize.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
+    }
+  } else {
+    const { time: snapped, target } = snapTimelineTime(
+      nextResize.start,
+      trimTargets,
+      snapSecs,
+      gridStep,
+    );
+    const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
+    const delta = snapped - nextResize.start;
+    const bounds = clipStartTrimDeltaBounds(clip, minStart, resolveTimelineMinDuration());
+    if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
+      const onTarget =
+        snapped === nextResize.start ? nextResize : applyClipStartTrimDelta(clip, delta);
+      snap = guideIfSaved(resize.element, onTarget, target, pps);
+      if (snap) nextResize = onTarget;
     }
   }
 

package/src/player/hooks/useTimelinePlayer.seek.test.ts

@@ -406,6 +406,17 @@ describe("useTimelinePlayer preview frame (a trim's dragged edge)", () => {
     unmountWithAct(root);
   });
 
+  it("reads the playing transport's own time, not the playhead's, under a preview frame", () => {
+    const { api, root, adapter } = renderAttachedTimelinePlayer();
+    seekWithAct(api, 2);
+    setStorePlaying();
+    previewFrame(5);
+    adapter.seek(7);
+    act(() => api.pause());
+    expect(usePlayerStore.getState().currentTime).toBe(7);
+    unmountWithAct(root);
+  });
+
   it("leaves live playback alone", () => {
     const { api, root, adapter } = renderAttachedTimelinePlayer();
     seekWithAct(api, 2);

package/src/styles/components.css

@@ -308,6 +308,22 @@
   }
 }
 
+/* A video's sound strip is too short for the peak readout: only the mark stays, on a chip clear of the clip's
+   rounded corner and above the waveform canvas layer (z 10), below the fade handles (z 30). */
+.audible-video-wave [data-peak-text] {
+  display: none;
+}
+
+.audible-video-wave [data-peak-badge] {
+  top: 50%;
+  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 {
   background-color: var(--timeline-clip-audio-bg-hover);
 }
@@ -350,7 +366,6 @@
   position: absolute;
   top: 5px;
   left: 6px;
-  z-index: 6;
   width: fit-content;
   max-width: calc(100% - 22px);
   overflow: hidden;
@@ -411,6 +426,7 @@
 .timeline-clip.is-audio .timeline-clip__label {
   top: 11px;
   left: 9px;
+  z-index: 11;
   background: var(--timeline-clip-chip-audio-bg);
 }
 
@@ -936,8 +952,8 @@
   }
 }
 
-/* Framey on the header's "Edit with Framey" (OpenInDesktopButton.tsx): a wiggle on hover, a flight towards
- * the app while it opens. The eye follows the pointer from script. */
+/* Framey on the header's "Edit with Framey" (OpenInDesktopButton.tsx): a pulse as the page opens, a wiggle
+ * on hover, a flight towards the app while it opens. The eye follows the pointer from script. */
 @keyframes hf-framey-wiggle {
   0%,
   100% {
@@ -961,6 +977,19 @@
   }
 }
 
+@keyframes hf-framey-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 45%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
+.hf-framey-trigger {
+  animation: hf-framey-pulse 1.6s ease-out 3;
+}
+
 .hf-framey {
   transform-origin: 30% 30%;
 }
@@ -978,6 +1007,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .hf-framey-trigger,
   .hf-framey-trigger:hover .hf-framey,
   .hf-framey-trigger[data-opening] .hf-framey {
     animation: none;

package/src/utils/studioPendingEdits.test.ts

@@ -2,6 +2,7 @@
 import { describe, expect, it, vi } from "vitest";
 import {
   addStudioPendingEditFlushListener,
+  adoptingStudioPendingEdit,
   beginStudioPendingEdit,
   flushStudioPendingEdits,
   hasStudioPendingEdits,
@@ -312,3 +313,54 @@ describe("a drain of only the current edits", () => {
     landLater();
   });
 });
+
+describe("an edit undo painted back while it saves", () => {
+  function paintedBackEdit() {
+    const box = { look: "edited" };
+    const edit = beginStudioPendingEdit(() => {
+      const shown = box.look;
+      box.look = "start";
+      return () => (box.look = shown);
+    });
+    let landSave!: () => void;
+    const inFlight = edit.adopt(() => adoptingStudioPendingEdit())!;
+    edit.settle(new Promise<void>((resolve) => (landSave = resolve)));
+    const shown = paintBackNewestStudioPendingEdit()!;
+    return { box, inFlight, shown, landSave };
+  }
+
+  it("draws on the edit as shown, then shows it undone again in the same task", () => {
+    const { box, inFlight, shown, landSave } = paintedBackEdit();
+    let drawnOver = "";
+    inFlight.drawKeepingUndone(() => {
+      drawnOver = box.look;
+      box.look += "+size";
+    });
+    expect(drawnOver).toBe("edited");
+    expect(box.look).toBe("start");
+    shown.showAgain();
+    expect(box.look).toBe("edited+size");
+    landSave();
+  });
+
+  it("keeps a redraw until the edit is shown again", () => {
+    const { inFlight, shown, landSave } = paintedBackEdit();
+    const redraw = vi.fn();
+    inFlight.drawUnlessUndone(redraw);
+    expect(redraw).not.toHaveBeenCalled();
+    shown.showAgain();
+    expect(redraw).toHaveBeenCalledTimes(1);
+    landSave();
+  });
+});
+
+it("counts an edit whose later write failed as saved once an earlier write landed, so undo still steps it", async () => {
+  const edit = beginStudioPendingEdit(() => () => undefined);
+  const committed = edit.adopt(async () => {
+    adoptingStudioPendingEdit()!.markSaved();
+    throw new Error("the crop save failed");
+  });
+  edit.settle(committed.catch(() => undefined));
+  const shown = paintBackNewestStudioPendingEdit()!;
+  await expect(shown.landed()).resolves.toBe(true);
+});

package/src/utils/studioPendingEdits.ts

@@ -14,11 +14,25 @@ export type StudioEditRevert = () => () => void;
 interface PendingEdit {
   revert: StudioEditRevert | null;
   landed: () => Promise<boolean>;
+  redraws: Array<() => void>;
+  showAgain: (() => void) | null;
+}
+
+export interface StudioEditInFlight {
+  reverted: () => boolean;
+  within: <T>(run: () => T) => T;
+  drawUnlessUndone: (draw: () => void) => void;
+  drawKeepingUndone: <T>(draw: () => T) => T;
+  markSaved: () => void;
 }
 
 const pendingEdits = new Map<Promise<unknown>, PendingEdit>();
 const NOT_SAVED = () => Promise.resolve(false);
-let adopting = false;
+let adopting: StudioEditInFlight | null = null;
+
+export function adoptingStudioPendingEdit(): StudioEditInFlight | null {
+  return adopting;
+}
 
 function waitForPostBlurEffects(): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, 0));
@@ -73,7 +87,7 @@ export function trackStudioPendingEdit(
   if (!result) return undefined;
   const promise = Promise.resolve(result);
   if (adopting) return promise;
-  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED });
+  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED, redraws: [], showAgain: null });
   promise.then(
     () => pendingEdits.delete(promise),
     () => pendingEdits.delete(promise),
@@ -97,25 +111,49 @@ export function beginStudioPendingEdit(revert: StudioEditRevert | null) {
   const entry = pendingEdits.get(promise)!;
   entry.revert = revert;
   let landed = Promise.resolve(false);
+  let saved = false;
   entry.landed = () => landed;
+  const inFlight: StudioEditInFlight = {
+    reverted: () => entry.revert === null && revert !== null,
+    within(run) {
+      const outer = adopting;
+      adopting = inFlight;
+      try {
+        return run();
+      } finally {
+        adopting = outer;
+      }
+    },
+    drawUnlessUndone(draw) {
+      if (inFlight.reverted()) entry.redraws.push(draw);
+      else draw();
+    },
+    drawKeepingUndone(draw) {
+      if (!inFlight.reverted()) return draw();
+      entry.showAgain?.();
+      try {
+        return draw();
+      } finally {
+        entry.showAgain = revert!();
+      }
+    },
+    markSaved: () => void (saved = true),
+  };
   return {
     settle,
-    reverted: () => entry.revert === null && revert !== null,
-    // Only what `start` registers synchronously is adopted; a registration after an await is a newer edit.
+    reverted: inFlight.reverted,
+    // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
     adopt<T>(start: () => T): T {
-      adopting = true;
       try {
-        const committed = start();
+        const committed = inFlight.within(start);
         landed = Promise.resolve(committed).then(
           () => true,
-          () => false,
+          () => saved,
         );
         return committed;
       } catch (error) {
         settle();
         throw error;
-      } finally {
-        adopting = false;
       }
     },
   };
@@ -129,7 +167,14 @@ export function paintBackNewestStudioPendingEdit(): {
   const revert = newest?.revert;
   if (!newest || !revert) return null;
   newest.revert = null;
-  return { showAgain: revert(), landed: newest.landed };
+  newest.showAgain = revert();
+  return {
+    showAgain: () => {
+      newest.showAgain?.();
+      for (const redraw of newest.redraws.splice(0)) redraw();
+    },
+    landed: newest.landed,
+  };
 }
 
 export function revertNewestStudioPendingEdit(): (() => void) | null {