@hyperframes/studio 0.8.105 → 0.8.107

package/src/components/editor/propertyPanelFont.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import {
   googleFontStylesheetUrl,
   POPULAR_GOOGLE_FONT_FAMILIES,
@@ -19,6 +19,7 @@ import {
   type LocalFontData,
 } from "./propertyPanelHelpers";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { runWhenInputIdle } from "./overlayFrameLoop";
 
 /* ------------------------------------------------------------------ */
 /*  Font helper functions                                              */
@@ -117,6 +118,62 @@ function loadImportedFontStylesheet(asset: ImportedFontAsset): void {
   document.head.appendChild(style);
 }
 
+type FontLists = {
+  loaded: boolean;
+  google: readonly string[];
+  googleKeys: ReadonlySet<string>;
+  installed: string[];
+};
+
+let fontLists: FontLists = {
+  loaded: false,
+  google: POPULAR_GOOGLE_FONT_FAMILIES,
+  googleKeys: new Set(POPULAR_GOOGLE_FONT_FAMILIES.map((f) => f.toLowerCase())),
+  installed: [],
+};
+let fontListsRequest: Promise<void> | null = null;
+const fontListListeners = new Set<() => void>();
+
+async function fetchFontList(url: string): Promise<string[]> {
+  const data = (await (await fetch(url)).json()) as { fonts?: unknown };
+  if (!Array.isArray(data.fonts)) throw new Error(`${url} returned no font list`);
+  return data.fonts as string[];
+}
+
+function loadFontLists(): void {
+  if (fontLists.loaded) return;
+  fontListsRequest ??= Promise.all([
+    fetchFontList("/api/fonts"),
+    fetchFontList("/api/fonts/google"),
+  ])
+    .then(([installed, google]) => {
+      const names = google.concat(POPULAR_GOOGLE_FONT_FAMILIES);
+      const families: string[] = [];
+      const googleKeys = new Set<string>();
+      let next = 0;
+      runWhenInputIdle((timeLeft) => {
+        while (next < names.length && timeLeft() > 0) {
+          const batch = names.slice(next, next + 200);
+          next += batch.length;
+          families.push(...uniqueFontFamilies(batch, googleKeys));
+        }
+        if (next < names.length) return false;
+        fontLists = { loaded: true, google: families, googleKeys, installed };
+        for (const listener of fontListListeners) listener();
+        return true;
+      });
+    })
+    .catch(() => {
+      fontListsRequest = null;
+    });
+}
+
+function subscribeFontLists(listener: () => void): () => void {
+  fontListListeners.add(listener);
+  loadFontLists();
+  return () => fontListListeners.delete(listener);
+}
+
 /* ------------------------------------------------------------------ */
 /*  FontFamilyField                                                    */
 /* ------------------------------------------------------------------ */
@@ -146,9 +203,8 @@ export function FontFamilyField({
   const [activeIndex, setActiveIndex] = useState(-1);
   const [localFonts, setLocalFonts] = useState<string[]>([]);
   const [localFontData, setLocalFontData] = useState<LocalFontData[]>([]);
-  const [googleFonts, setGoogleFonts] = useState<string[]>(() => [...POPULAR_GOOGLE_FONT_FAMILIES]);
+  const lists = useSyncExternalStore(subscribeFontLists, () => fontLists);
   const [loadingLocalFonts, setLoadingLocalFonts] = useState(false);
-  const [loadingGoogleFonts, setLoadingGoogleFonts] = useState(false);
   const [importingFonts, setImportingFonts] = useState(false);
   const [fontNotice, setFontNotice] = useState<string | null>(null);
   const canQueryLocalFonts =
@@ -175,46 +231,18 @@ export function FontFamilyField({
   }, [open]);
 
   useEffect(() => {
-    let cancelled = false;
-    void fetch("/api/fonts")
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data: { fonts?: string[] } | null) => {
-        if (cancelled || !Array.isArray(data?.fonts)) return;
-        setLocalFonts((cur) => uniqueFontFamilies([...cur, ...data.fonts!]));
-      })
-      .catch(() => undefined);
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    let cancelled = false;
-    setLoadingGoogleFonts(true);
-    void fetch("/api/fonts/google")
-      .then((r) => (r.ok ? r.json() : null))
-      .then((data: { fonts?: string[] } | null) => {
-        if (cancelled || !Array.isArray(data?.fonts)) return;
-        setGoogleFonts(uniqueFontFamilies([...data.fonts!, ...POPULAR_GOOGLE_FONT_FAMILIES]));
-      })
-      .catch(() => undefined)
-      .finally(() => {
-        if (!cancelled) setLoadingGoogleFonts(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+    if (open) loadFontLists();
+  }, [open]);
 
   useEffect(() => {
-    if (googleFonts.some((f) => f.toLowerCase() === currentFamily.toLowerCase())) {
+    if (lists.googleKeys.has(currentFamily.toLowerCase())) {
       loadGoogleFontStylesheet(currentFamily);
     }
     const imported = importedFonts.find(
       (f) => f.family.toLowerCase() === currentFamily.toLowerCase(),
     );
     if (imported) loadImportedFontStylesheet(imported);
-  }, [currentFamily, googleFonts, importedFonts]);
+  }, [currentFamily, lists, importedFonts]);
 
   const loadBrowserLocalFonts = async () => {
     if (!canQueryLocalFonts || !window.queryLocalFonts) {
@@ -278,24 +306,19 @@ export function FontFamilyField({
   const options = useMemo(() => {
     if (!open) return [];
     const documentFonts = collectDocumentFontFamilies();
-    const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
-    const taggedLocal = localFonts.map(
-      (family): FontOption => ({
-        family,
-        source: googleSet.has(family.toLowerCase()) ? "Google" : "Local",
-      }),
-    );
     return sortFontOptions(
       uniqueFontOptions([
         { family: currentFamily, source: "Current" },
         ...documentFonts.map((f): FontOption => ({ family: f, source: "Document" })),
         ...projectFontAssets,
-        ...googleFonts.map((f): FontOption => ({ family: f, source: "Google" })),
-        ...taggedLocal,
+        ...lists.google.map((f): FontOption => ({ family: f, source: "Google" })),
+        ...[...lists.installed, ...localFonts].map(
+          (f): FontOption => ({ family: f, source: "Local" }),
+        ),
         ...DEFAULT_FONT_FAMILIES.map((f): FontOption => ({ family: f, source: "System" })),
       ]),
     );
-  }, [open, currentFamily, googleFonts, localFonts, projectFontAssets]);
+  }, [open, currentFamily, lists, localFonts, projectFontAssets]);
 
   const filteredOptions = useMemo(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));
@@ -392,7 +415,7 @@ export function FontFamilyField({
           type="text"
           value={query}
           disabled={disabled}
-          placeholder={loadingGoogleFonts ? "Loading Google Fonts..." : "Search fonts"}
+          placeholder={lists.loaded ? "Search fonts" : "Loading Google Fonts..."}
           onChange={(e) => {
             setQuery(e.target.value);
             setActiveIndex(-1);

package/src/components/editor/propertyPanelHelpers.ts

@@ -125,8 +125,7 @@ export function localFontSortScore(font: LocalFontData): number {
   return 3;
 }
 
-export function uniqueFontFamilies(values: string[]): string[] {
-  const seen = new Set<string>();
+export function uniqueFontFamilies(values: string[], seen = new Set<string>()): string[] {
   return values.reduce<string[]>((result, value) => {
     const family = value.trim();
     if (!family) return result;

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { isVideoAudible } from "../../player/lib/timelineElementHelpers";
 import { Check, ClipboardList, Film, Music, Scissors } from "../../icons/SystemIcons";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -22,23 +23,29 @@ import {
   audioGainToFaderPosition,
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
 export function MediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
 }: {
+  projectId?: string | null;
   projectDir: string | null;
   element: DomEditSelection;
   styles: Record<string, string>;
   onSetStyle: (prop: string, value: string) => void | Promise<unknown>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   onRemoveBackground?: (
     inputPath: string,
     options: {
@@ -62,7 +69,11 @@ export function MediaSection({
 
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted"),
+  });
 
   const playbackRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
 
@@ -96,13 +107,7 @@ export function MediaSection({
     setCreatePlate(false);
   }, [srcAttr]);
 
-  const applyCutoutResult = async (result: BackgroundRemovalResult) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
 
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
@@ -115,13 +120,8 @@ export function MediaSection({
         quality,
         onProgress: setRemoveProgress,
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({
-        status: "complete",
-        progress: 100,
-        stage: "Applied cutout",
-        ...result,
-      });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -320,9 +320,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Muted"
                   value={hasMuted ? "on" : "off"}
-                  onChange={(next) => {
-                    void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
-                  }}
+                  onChange={(next) => void commitMutedToggle(mediaEdit, next === "on")}
                   options={[
                     { label: "On", value: "on" },
                     { label: "Off", value: "off" },
@@ -337,15 +335,7 @@ export function MediaSection({
                 <SegmentedControl
                   trackName="Has audio track"
                   value={hasAudio ? "yes" : "no"}
-                  onChange={(next) => {
-                    if (next === "yes") {
-                      void onSetAttribute("has-audio", "true");
-                      void onSetHtmlAttribute("muted", null);
-                    } else {
-                      void onSetAttribute("has-audio", "");
-                      void onSetHtmlAttribute("muted", "true");
-                    }
-                  }}
+                  onChange={(next) => void commitHasAudioToggle(mediaEdit, next === "yes")}
                   options={[
                     { label: "Yes", value: "yes" },
                     { label: "No", value: "no" },

package/src/components/editor/propertyPanelTypes.ts

@@ -3,6 +3,7 @@ import type { ArcPathSegment, GsapAnimation } from "@hyperframes/parsers/gsap-pa
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
 import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
 
 export interface BackgroundRemovalProgress {
   status: "processing" | "complete" | "failed";
@@ -68,6 +69,7 @@ export interface PropertyPanelProps {
     value: string | null,
   ) => Promise<{ changedFiles: number; changedElements: number }>;
   onSetHtmlAttribute: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeBatch: CommitDomAttributeBatch;
   onRemoveBackground?: (
     inputPath: string,
     options: {

package/src/components/editor/studioCodeTheme.test.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8");
+const source = read("./studioCodeTheme.ts");
+const themeCss = read("../../styles/theme.css");
+
+describe("the code editor theme", () => {
+  it("takes every colour from a token theme.css declares", () => {
+    const used = [...source.matchAll(/var\((--color-[\w-]+)\)/g)].map((match) => match[1]!);
+    expect(used.length).toBeGreaterThan(20);
+    for (const token of new Set(used)) expect(themeCss, token).toContain(`${token}:`);
+  });
+
+  it("paints no literal colour of its own", () => {
+    expect(source).not.toMatch(
+      /#[\da-f]{3,8}\b|\b(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(|"(white|black|red|orange|yellow|green|blue|purple|pink|gray|grey|silver|lime|cyan|magenta)"/i,
+    );
+  });
+});

package/src/components/editor/studioCodeTheme.ts

@@ -0,0 +1,99 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+// One Dark's layout on Studio's tokens: every colour is a theme.css variable, so the editor
+// follows the light or dark theme the page paints with no editor reconfiguration.
+const editorTheme = EditorView.theme({
+  "&": { height: "100%", color: "var(--color-text-0)", backgroundColor: "var(--color-surface)" },
+  ".cm-scroller": { overflow: "auto" },
+  ".cm-content": { caretColor: "var(--color-text-0)" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--color-text-0)" },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+    { backgroundColor: "var(--color-on)" },
+  ".cm-activeLine": { backgroundColor: "var(--color-hover)" },
+  ".cm-selectionMatch": {
+    backgroundColor: "transparent",
+    outline: "1px solid var(--color-text-muted)",
+  },
+  ".cm-searchMatch": {
+    backgroundColor: "transparent",
+    outline: "1px solid var(--color-text-muted)",
+  },
+  ".cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: "transparent",
+    outline: "2px solid var(--color-accent-ink)",
+  },
+  "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+    backgroundColor: "var(--color-on)",
+  },
+  ".cm-gutters": {
+    backgroundColor: "var(--color-surface)",
+    color: "var(--color-text-muted)",
+    border: "none",
+  },
+  ".cm-activeLineGutter": { backgroundColor: "var(--color-hover)", color: "var(--color-text-2)" },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "transparent",
+    border: "none",
+    color: "var(--color-text-2)",
+  },
+  ".cm-panels": { backgroundColor: "var(--color-raised)", color: "var(--color-text-0)" },
+  ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--color-border)" },
+  ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--color-border)" },
+  ".cm-textfield": {
+    backgroundColor: "var(--color-input)",
+    color: "var(--color-text-0)",
+    border: "1px solid var(--color-border-input)",
+  },
+  ".cm-button": {
+    backgroundImage: "none",
+    backgroundColor: "var(--color-hover)",
+    color: "var(--color-text-0)",
+    border: "1px solid var(--color-border)",
+  },
+  "&.cm-editor .cm-button:active": {
+    backgroundImage: "none",
+    backgroundColor: "var(--color-press)",
+  },
+  ".cm-specialChar": { color: "var(--color-danger-ink)" },
+});
+
+const highlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: "var(--color-code-keyword)" },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: "var(--color-code-name)",
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: "var(--color-code-function)" },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "var(--color-code-constant)" },
+  { tag: [t.definition(t.name), t.separator], color: "var(--color-text-0)" },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: "var(--color-code-type)",
+  },
+  {
+    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.special(t.string)],
+    color: "var(--color-code-operator)",
+  },
+  { tag: [t.meta, t.comment], color: "var(--color-code-comment)" },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: "var(--color-code-comment)", textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: "var(--color-code-name)" },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "var(--color-code-constant)" },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: "var(--color-code-string)" },
+  { tag: t.invalid, color: "var(--color-danger-ink)" },
+]);
+
+export const studioCodeTheme = [editorTheme, syntaxHighlighting(highlightStyle)];

package/src/components/editor/useDomEditNudge.test.tsx

@@ -6,6 +6,7 @@ import { installReactActEnvironment, makeSelection } from "../../hooks/domSelect
 import { useDomEditNudge, type UseDomEditNudgeParams } from "./useDomEditNudge";
 import { CANVAS_NUDGE_COMMIT_DEBOUNCE_MS, CANVAS_NUDGE_STEP_PX } from "./domEditNudge";
 import { __resetForTests } from "../../utils/canvasNudgeGate";
+import { flushStudioPendingEdits, hasStudioPendingEdits } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 
@@ -27,6 +28,7 @@ const REST_RECT: OverlayRect = {
 // Stable across renders on purpose: the test targets the `selection` identity
 // key specifically, so `groupSelections` must not itself be a source of churn.
 const EMPTY_GROUP_SELECTIONS: DomEditSelection[] = [];
+let flushNudge = () => {};
 
 function Harness({
   selection,
@@ -35,7 +37,7 @@ function Harness({
   selection: DomEditSelection | null;
   onPathOffsetCommit: UseDomEditNudgeParams["onPathOffsetCommitRef"]["current"];
 }) {
-  useDomEditNudge({
+  flushNudge = useDomEditNudge({
     selection,
     groupSelections: EMPTY_GROUP_SELECTIONS,
     allowCanvasMovement: true,
@@ -49,7 +51,7 @@ function Harness({
     onBlockedMoveRef: makeRef(() => {}),
     onPathOffsetCommitRef: makeRef(onPathOffsetCommit),
     onGroupPathOffsetCommitRef: makeRef(async () => {}),
-  });
+  }).flushNudge;
   return null;
 }
 
@@ -124,6 +126,37 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
     element.remove();
   });
 
+  it("leaves arrows on a focused slider alone", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const element = document.createElement("div");
+    element.id = "dot-a";
+    const slider = document.createElement("div");
+    slider.setAttribute("role", "slider");
+    document.body.append(element, slider);
+    const commit = vi.fn();
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => {
+      slider.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }),
+      );
+      vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10);
+    });
+    expect(commit).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    host.remove();
+    element.remove();
+    slider.remove();
+  });
+
   it("still flushes the burst when the selection actually changes to a different element", () => {
     const host = document.createElement("div");
     document.body.append(host);
@@ -228,6 +261,51 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
   });
 });
 
+describe("useDomEditNudge — a focused native player owns the arrow keys", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  let root: ReturnType<typeof createRoot> | null = null;
+  afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+    document.body.innerHTML = "";
+    vi.useRealTimers();
+  });
+
+  it.each(["video", "audio"])(
+    "does not nudge the selection while a <%s controls> has focus",
+    (tag) => {
+      root = createRoot(document.body.appendChild(document.createElement("div")));
+      const element = document.body.appendChild(document.createElement("div"));
+      element.id = "dot";
+      const player = document.body.appendChild(document.createElement(tag));
+      player.setAttribute("controls", "");
+      const commit = vi.fn();
+      act(() => {
+        root?.render(
+          React.createElement(Harness, {
+            selection: makeSelection("Dot", element),
+            onPathOffsetCommit: commit,
+          }),
+        );
+      });
+      const event = new KeyboardEvent("keydown", {
+        key: "ArrowRight",
+        bubbles: true,
+        cancelable: true,
+      });
+      act(() => {
+        player.dispatchEvent(event);
+        vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10);
+      });
+      expect(event.defaultPrevented).toBe(false);
+      expect(commit).not.toHaveBeenCalled();
+    },
+  );
+});
+
 describe("useDomEditNudge carries the route its press chose", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -260,3 +338,88 @@ describe("useDomEditNudge carries the route its press chose", () => {
     element.remove();
   });
 });
+
+describe("useDomEditNudge — undo right after a burst", () => {
+  it("undo's drain commits a burst still inside its debounce and waits for its save", async () => {
+    __resetForTests();
+    vi.useFakeTimers();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-undo";
+    let saved!: () => void;
+    const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+
+    let drained = false;
+    const drain = flushStudioPendingEdits().then(() => (drained = true));
+    expect(commit).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(drained).toBe(false);
+    saved();
+    await drain;
+    expect(drained).toBe(true);
+    act(() => root.unmount());
+  });
+
+  it("counts the burst as a pending edit from its first key until its save lands", async () => {
+    __resetForTests();
+    vi.useFakeTimers();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-pending";
+    let saved!: () => void;
+    const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    expect(hasStudioPendingEdits()).toBe(false);
+    act(() => dispatchArrowRight());
+    expect(hasStudioPendingEdits()).toBe(true);
+    act(() => vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+    expect(commit).toHaveBeenCalledTimes(1);
+    expect(hasStudioPendingEdits()).toBe(true);
+    vi.useRealTimers();
+    saved();
+    await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+    act(() => root.unmount());
+  });
+});
+
+describe("useDomEditNudge — a commit that throws", () => {
+  it("still ends the burst's pending edit, so undo and export never wait on it", async () => {
+    __resetForTests();
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    const element = document.body.appendChild(document.createElement("div"));
+    element.id = "dot-throws";
+    const commit = vi.fn(() => {
+      throw new Error("The commit threw.");
+    });
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+    expect(hasStudioPendingEdits()).toBe(true);
+    expect(() => flushNudge()).toThrow("The commit threw.");
+    await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+    act(() => root.unmount());
+  });
+});