@hyperframes/studio 0.8.105 → 0.8.107

package/src/hooks/useDomEditSession.ts

@@ -24,6 +24,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMembers";
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
+import { useLivePreviewIframe } from "./useLivePreviewIframe";
 // Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
@@ -86,14 +87,13 @@ export function useDomEditSession({
   importedFontAssetsRef,
   projectDir,
   projectIdRef,
-  previewIframe,
+  previewIframe: hostPreviewIframe,
   refreshKey,
   previewDocumentVersion,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
   syncPreviewHotkeys,
   reloadPreview,
-  setRefreshKey: _setRefreshKey,
   openSourceForSelection,
   sdkSession,
   publishSdkSession,
@@ -103,7 +103,7 @@ export function useDomEditSession({
 }: UseDomEditSessionParams) {
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const previewCaptionEditMode = captionEditMode && !readOnlyPreview;
-  void _setRefreshKey;
+  const previewIframe = useLivePreviewIframe(hostPreviewIframe);
   const {
     domEditSelection,
     domEditGroupSelections,
@@ -170,32 +170,13 @@ export function useDomEditSession({
     refreshDomEditSelectionFromPreview,
   });
   // ── GSAP cache (hoisted so both useGsapScriptCommits and useDomEditWiring share the same instance) ──
-
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
 
-  // ── GSAP script commits ──
-
   const {
     commitMutation: gsapCommitMutation,
-    updateGsapProperty,
-    updateGsapMeta,
-    deleteGsapAnimation,
-    deleteAllForSelector,
-    addGsapAnimation,
-    addGsapProperty,
-    removeGsapProperty,
-    updateGsapFromProperty,
-    addGsapFromProperty,
-    removeGsapFromProperty,
-    addKeyframe,
-    addKeyframeBatch,
-    removeKeyframe,
-    moveKeyframe,
-    resizeKeyframedTween,
-    convertToKeyframes,
-    removeAllKeyframes,
     setArcPath,
     updateArcSegment,
+    ...gsapScriptEdits
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
@@ -211,8 +192,6 @@ export function useDomEditSession({
     forceReloadSdkSession,
   });
 
-  // ── DOM commit handlers ──
-
   const {
     resolveImportedFontAsset,
     handleDomStyleCommit,
@@ -222,6 +201,7 @@ export function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -308,7 +288,6 @@ export function useDomEditSession({
   });
 
   // ── Element groups (wrap selected elements in a data-hf-group div) ──
-
   const { groupSelection, ungroupSelection } = useGroupCommits({
     activeCompPath,
     showToast,
@@ -383,7 +362,6 @@ export function useDomEditSession({
   }, [domEditSelectionRef, ungroupSelection, setActiveGroupElement, showToast]);
 
   // ── Wiring: selection sync, GSAP cache, preview sync, selection handlers ──
-
   const {
     onClickToSource,
     selectedGsapAnimations,
@@ -430,23 +408,7 @@ export function useDomEditSession({
     applyDomSelection,
     buildDomSelectionFromTarget,
     openSourceForSelection,
-    updateGsapProperty,
-    updateGsapMeta,
-    deleteGsapAnimation,
-    deleteAllForSelector,
-    addGsapAnimation,
-    addGsapProperty,
-    removeGsapProperty,
-    updateGsapFromProperty,
-    addGsapFromProperty,
-    removeGsapFromProperty,
-    addKeyframe,
-    addKeyframeBatch,
-    removeKeyframe,
-    moveKeyframe,
-    resizeKeyframedTween,
-    convertToKeyframes,
-    removeAllKeyframes,
+    ...gsapScriptEdits,
     handleDomManualEditsReset,
   });
   const {
@@ -492,8 +454,8 @@ export function useDomEditSession({
     handleDomBoxSizeCommit,
     handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
-    addGsapAnimation,
-    convertToKeyframes,
+    addGsapAnimation: gsapScriptEdits.addGsapAnimation,
+    convertToKeyframes: gsapScriptEdits.convertToKeyframes,
     setArcPath,
     updateArcSegment,
   });
@@ -532,6 +494,7 @@ export function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,

package/src/hooks/useDomEditTextCommits.ts

@@ -1,10 +1,6 @@
 import { useCallback, useRef } from "react";
 import { normalizeDomEditStyleValue } from "../utils/studioHelpers";
-import {
-  injectPreviewGoogleFont,
-  injectPreviewImportedFont,
-  ensureImportedFontFace,
-} from "../utils/studioFontHelpers";
+import { injectPreviewGoogleFont, injectPreviewImportedFont } from "../utils/studioFontHelpers";
 import {
   buildDomEditRichTextPatchOperation,
   findElementForSelection,
@@ -99,6 +95,7 @@ export function useDomEditTextCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
   } = useDomEditAttributeCommits({
     activeCompPath,
     previewIframeRef,
@@ -354,9 +351,7 @@ export function useDomEditTextCommits({
           await persistDomEditOperations(selection, textCommit.operations, {
             label: "Edit text",
             skipRefresh: true,
-            prepareContent: importedFont
-              ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-              : undefined,
+            importedFont: importedFont ?? undefined,
           });
         },
         shouldRevert: () => isLatestTextCommit(),
@@ -485,6 +480,7 @@ export function useDomEditTextCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,

package/src/hooks/useDomGeometryCommits.ts

@@ -32,7 +32,13 @@ export interface UseDomGeometryCommitsParams {
   commitPositionPatchToHtml: (
     selection: DomEditSelection,
     patches: PatchOperation[],
-    options: { label: string; coalesceKey: string; coalesceMs?: number; skipRefresh?: boolean },
+    options: {
+      label: string;
+      coalesceKey: string;
+      coalesceMs?: number;
+      skipRefresh?: boolean;
+      deferRender?: boolean;
+    },
   ) => Promise<void>;
   readOnlyPreview: boolean;
 }
@@ -65,6 +71,7 @@ export function useDomGeometryCommits({
       next: { width: number; height: number },
       offset?: { x: number; y: number },
       restore?: () => void,
+      undoKey?: string,
     ) => {
       if (readOnlyPreview) return Promise.resolve();
       const element = selection.element;
@@ -80,7 +87,9 @@ export function useDomGeometryCommits({
       if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
-        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
+        ...(undoKey
+          ? { coalesceKey: undoKey, coalesceMs: Number.POSITIVE_INFINITY, deferRender: true }
+          : { coalesceKey: `box-size:${getDomEditTargetKey(selection)}` }),
       }).catch((error) => {
         restoreStudioBoxSize(element, beforeSize);
         if (offset) restoreStudioPathOffset(element, beforeOffset);

package/src/hooks/useEditHistoryActions.paint.test.tsx

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { act, createElement } from "react";
+import { act, createElement, type ReactElement } from "react";
 import { createRoot } from "react-dom/client";
 import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
@@ -10,6 +10,11 @@ import {
   openProjectHistory,
   type StudioApiAdapter,
 } from "@hyperframes/studio-server";
+import { useDomEditNudge } from "../components/editor/useDomEditNudge";
+import { DomEditProvider, useDomEditActionsContext } from "../contexts/DomEditContext";
+import { __resetForTests as resetNudgeKeys } from "../utils/canvasNudgeGate";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
+import { makeSelection } from "./domSelectionTestHarness";
 import { useEditHistoryActions } from "./useEditHistoryActions";
 import { usePersistentEditHistory } from "./usePersistentEditHistory";
 import { usePreviewPersistence } from "./usePreviewPersistence";
@@ -19,6 +24,7 @@ const page = (left: string, top = "0px") =>
 const BEFORE = page("10px");
 const AFTER = page("50px");
 const OUTSIDE = page("50px", "99px");
+const NUDGED = page("51px");
 
 const cleanup: Array<() => unknown> = [];
 let scratch = "";
@@ -78,14 +84,15 @@ async function studio() {
       showToast: () => {},
       syncHistoryPreviewAfterApply: persistence.syncHistoryPreviewAfterApply,
       showHistoryRestoreNow: persistence.showHistoryRestoreNow,
-      waitForPendingDomEditSaves: persistence.waitForPendingDomEditSaves,
+      waitForPendingDomEditSaves: persistence.settlePendingEdits,
     });
     return null;
   }
   const root = createRoot(document.createElement("div"));
   await act(async () => root.render(createElement(Harness)));
   cleanup.push(() => act(() => root.unmount()));
-  const box = () => iframe.contentDocument!.getElementById("box")!.style.left;
+  const element = (id: string) => iframe.contentDocument!.getElementById(id)!;
+  const box = () => element("box").style.left;
   const other = () => iframe.contentDocument!.getElementById("other")!.style.top;
   const show = (html: string) => {
     iframe.contentDocument!.documentElement.innerHTML = new DOMParser().parseFromString(
@@ -105,8 +112,16 @@ async function studio() {
     );
     await vi.waitFor(() => expect(history.undoLabel).toBe("Move layer"));
   };
+  /** Mounts `ui` beside Studio, as the canvas is, for the rest of the test. */
+  const mount = (ui: ReactElement) => {
+    const canvas = createRoot(document.createElement("div"));
+    act(() => canvas.render(ui));
+    cleanup.push(() => act(() => canvas.unmount()));
+  };
   return {
     history: () => history,
+    element,
+    mount,
     persistence: () => persistence,
     actions: () => actions,
     box,
@@ -164,3 +179,107 @@ it("an undo after an outside write ends with the preview showing the file the se
   expect(s.other()).toBe("0px");
   expect(s.box()).toBe("50px");
 });
+
+/** The canvas's arrow-key nudge on the box; `save` stands in for the burst's save once the keys stop. */
+function Nudge({ target, save }: { target: HTMLElement; save: () => Promise<void> }) {
+  const selection = makeSelection("Box", target);
+  const ref = <T,>(current: T) => ({ current });
+  useDomEditNudge({
+    selection,
+    groupSelections: [],
+    allowCanvasMovement: true,
+    selectionRef: ref(selection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 100, height: 40, editScaleX: 1, editScaleY: 1 }),
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    onManualDragStartRef: ref(() => {}),
+    onBlockedMoveRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(save),
+    onGroupPathOffsetCommitRef: ref(async () => {}),
+  });
+  return null;
+}
+
+it("an undo pressed while a nudge waits for more keys never shows the move before it undone", async () => {
+  const s = await studio();
+  await s.edit();
+  resetNudgeKeys();
+  const save = vi.fn(async () => {
+    writeFileSync(s.path, NUDGED);
+    await s.history().recordEdit({
+      label: "Move layer",
+      files: { "index.html": { before: AFTER, after: NUDGED } },
+    });
+  });
+  s.mount(createElement(Nudge, { target: s.element("box"), save }));
+  act(() => {
+    window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", cancelable: true }));
+  });
+
+  const undone = s.actions().undo();
+  expect(s.box()).toBe("50px");
+  await act(() => undone);
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(s.file()).toBe(AFTER);
+  expect(s.box()).toBe("50px");
+});
+
+it("an undo pressed while a queued save fails undoes the edit before it, file and box alike", async () => {
+  const s = await studio();
+  await s.edit();
+  const box = s.element("box");
+  let fail!: () => void;
+  const handleDomStyleCommit = vi.fn(async () => {
+    box.style.left = "70px";
+    try {
+      await s.persistence().queueDomEditSave(async () => {
+        await new Promise<void>((resolve) => (fail = resolve));
+        throw new Error("The save failed.");
+      });
+    } catch (error) {
+      box.style.left = "50px";
+      throw error;
+    }
+  });
+  let actions!: ReturnType<typeof useDomEditActionsContext>;
+  function Canvas() {
+    actions = useDomEditActionsContext();
+    return null;
+  }
+  const value = { handleDomStyleCommit } as unknown as Parameters<
+    typeof DomEditProvider
+  >[0]["value"];
+  s.mount(
+    <DomEditProvider value={value}>
+      <Canvas />
+    </DomEditProvider>,
+  );
+  const failed = actions.handleDomStyleCommit("left", "70px");
+
+  const undone = s.actions().undo();
+  await vi.waitFor(() => expect(fail).toBeTypeOf("function"));
+  fail();
+  await expect(failed).rejects.toThrow("The save failed.");
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+});
+
+it("an undo pressed while a tracked timeline edit fails still undoes the edit before it", async () => {
+  const s = await studio();
+  await s.edit();
+  let fail!: () => void;
+  const timelineEdit = trackedStudioEdit(
+    () => new Promise<void>((_, reject) => (fail = () => reject(new Error("The save failed.")))),
+  );
+  const failed = timelineEdit();
+
+  const undone = s.actions().undo();
+  fail();
+  await expect(failed).rejects.toThrow("The save failed.");
+  await act(() => undone);
+  expect(s.file()).toBe(BEFORE);
+  expect(s.box()).toBe("10px");
+});

package/src/hooks/useGsapAwareEditing.ts

@@ -93,6 +93,7 @@ export interface UseGsapAwareEditingParams {
     next: { width: number; height: number },
     offset?: { x: number; y: number },
     restore?: () => void,
+    undoKey?: string,
   ) => Promise<void>;
   commitPositionPatchToHtml: ElementOffsetStagerDeps["commitPositionPatchToHtml"];
   // GSAP script commit ops (from useGsapScriptCommits)
@@ -394,12 +395,11 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
               );
               assertGsapEditPersisted(outcome);
-              cropUndoKey = coalesceKey;
-              // What the resize actually did, not what its animations suggest
-              // it would do. An element whose scale is an instant hold has a
-              // scale-group tween and still commits width/height, so guessing
-              // from the tweens withheld an offset nobody had written and the
-              // element snapped back to its authored position on every drag.
+              // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.
+              if (outcome.status === "element-size")
+                await handleDomBoxSizeCommit(selection, next, undefined, undefined, coalesceKey);
+              else cropUndoKey = coalesceKey;
+              // What the resize did, not what its tweens suggest: a scale hold still commits a size.
               const ownsDragOffset =
                 outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -30,6 +30,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { MutationResult } from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
+import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
 
 // ── applyPreviewSync (pure preview-sync decision) ────────────────────────────
 
@@ -426,6 +427,24 @@ function mockFetchResult(over: Partial<MutationResult> = {}): void {
   );
 }
 
+describe("a GSAP script commit", () => {
+  it("counts as a pending edit from its call until it lands, so a quick Cmd+Z waits for it", async () => {
+    mockFetchResult();
+    const deps = renderCommitHook();
+    let committed!: Promise<unknown>;
+    act(() => {
+      committed = deps.api.commitMutation(
+        selection,
+        { type: "remove-all-keyframes", animationId: "a" },
+        { label: "Remove all keyframes" },
+      );
+    });
+    expect(hasStudioPendingEdits()).toBe(true);
+    await act(async () => void (await committed));
+    expect(hasStudioPendingEdits()).toBe(false);
+  });
+});
+
 describe("runCommit — instantPatch wiring", () => {
   it("explains a deliberate mutation that the server safely rejected as unchanged", async () => {
     mockFetchResult({ changed: false });

package/src/hooks/useGsapScriptCommits.ts

@@ -7,6 +7,7 @@ import { applySoftReload, extractGsapScriptText } from "../utils/gsapSoftReload"
 import type { SoftReloadResult } from "../utils/gsapSoftReload";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { serializeStudioFileMutation } from "../utils/studioFileMutationCoordinator";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 import {
   getStudioSaveErrorMessage,
   isStudioSaveErrorAlreadyToasted,
@@ -416,20 +417,20 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
       }
       return run();
     };
-    const commit: CommitMutation = (selection, mutation, options) => {
+    const commit: CommitMutation = trackedStudioEdit((selection, mutation, options) => {
       if (!activeProjectId) return Promise.resolve();
       const file = selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(file, options.serializeKey, () =>
         runCommit(activeProjectId, activeCompPath, file, selection, mutation, options),
       );
-    };
-    commit.batch = (calls, options) => {
+    }) as CommitMutation;
+    commit.batch = trackedStudioEdit((calls: CommitMutationCall[], options: CommitMutationOptions) => {
       if (!activeProjectId) return Promise.resolve();
       const file = calls[0]?.selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(file, options.serializeKey, () =>
         runBatchCommit(activeProjectId, activeCompPath, file, calls, options),
       );
-    };
+    });
     return commit;
   }, [runCommit, runBatchCommit, activeCompPath, activeProjectId, writeProjectFile]);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);

package/src/hooks/useGsapTweenCache.ts

@@ -336,8 +336,7 @@ export function usePopulateKeyframeCacheForFile(
     // fallow-ignore-next-line complexity
     const tryRuntimeScan = () => {
       if (runtimeScanDoneRef.current === `kf-cache:${projectId}:${sf}:${version}`) return true;
-      const iframe =
-        iframeRef?.current ?? document.querySelector<HTMLIFrameElement>("iframe[src*='/preview/']");
+      const iframe = iframeRef?.current;
       if (!iframe) return false;
       // Clip dims per element so the scan converts tween-relative keyframes to
       // clip-relative (matching the static path) instead of timeline-relative.

package/src/hooks/useInlineTextEdit.test.tsx

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { PreviewReadOnlyProvider } from "../components/editor/previewReadOnlyContext";
 import { useInlineTextEdit, type InlineTextEditControls } from "./useInlineTextEdit";
+import { applyUndoRestoreToPreview } from "../utils/gsapUndoRestore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -643,3 +644,29 @@ describe("useInlineTextEdit with styled runs", () => {
     act(() => root.unmount());
   });
 });
+
+describe("an undo that lands while a text edit is open", () => {
+  it("marks the edit as drawing nothing, so the undo reverts the move and keeps the edit", () => {
+    const wrap = (body: string) => `<html><body>${body}</body></html>`;
+    const moved = `<h1 id="t" style="translate: 90px 60px">Title</h1>`;
+    document.body.innerHTML = moved;
+    const element = document.getElementById("t")!;
+    const { controls, root } = mount();
+    act(() => {
+      controls().start(element);
+    });
+    const contentWindow = { __player: { seek: vi.fn() }, __hfStudioManualEditsApply: vi.fn() };
+    const iframe = { contentWindow, contentDocument: document } as unknown as HTMLIFrameElement;
+    const files = {
+      "index.html": { previous: wrap(moved), restored: wrap(`<h1 id="t">Title</h1>`) },
+    };
+
+    expect(element.getAttribute("data-hf-studio-manual-edit-gesture")).toMatch(/:edit$/);
+    expect(applyUndoRestoreToPreview(iframe, "index.html", files, 0, vi.fn())).toBe("soft");
+
+    expect(element.style.getPropertyValue("translate")).toBe("");
+    expect(element.getAttribute("contenteditable")).toBe("true");
+    expect(element.style.getPropertyValue("outline")).not.toBe("");
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useInlineTextEdit.ts

@@ -1,6 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { sanitizeRichTextChildren } from "@hyperframes/core/rich-text-sanitize";
 import { usePreviewReadOnly } from "../components/editor/previewReadOnlyContext";
+import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
+import {
+  beginStudioManualEditGesture,
+  endStudioManualEditGesture,
+  countStudioManualEditSave,
+} from "../components/editor/manualEditsDom";
 
 /**
  * Editing an element's text where it sits, in the composition itself.
@@ -43,6 +49,8 @@ export interface InlineTextEditSession {
   outline: string;
   /** The element's own outline offset, restored with the outline. */
   outlineOffset: string;
+  /** Holds the preview on screen while the edit is open. */
+  gesture?: string;
 }
 
 /** The live markup to persist and the session snapshot to restore on failure. */
@@ -86,7 +94,7 @@ export function useInlineTextEdit({
   onPause,
 }: {
   /** Where the edited text goes. The caller owns persistence. */
-  onCommit: (commit: InlineTextEditCommit) => void;
+  onCommit: (commit: InlineTextEditCommit) => unknown;
   /** Stop playback, so the element is not animating under the caret. */
   onPause?: () => void;
 }): InlineTextEditControls {
@@ -106,6 +114,7 @@ export function useInlineTextEdit({
       framesRef.current = null;
     }
     openRef.current = null;
+    endStudioManualEditGesture(open.element, open.gesture);
     setSession(null);
     // An element removed from the document mid-session is not an error, it is
     // just nothing left to clean up.
@@ -132,6 +141,7 @@ export function useInlineTextEdit({
         original: element.innerHTML,
         outline: element.style.outline,
         outlineOffset: element.style.outlineOffset,
+        gesture: beginStudioManualEditGesture(element, "edit"),
       };
       // Drawn on the element itself, not in Studio's overlay above it. This is
       // the only mark that says the caret is in the TEXT rather than the
@@ -168,10 +178,16 @@ export function useInlineTextEdit({
     // saved rather than something the server will quietly cut down.
     sanitizeRichTextChildren(open.element);
     const html = open.element.innerHTML;
-    teardown();
-    // After teardown, so the commit path's own resync does not fight an
-    // element that is still editable.
-    onCommit({ element: open.element, html, previousHtml: open.original });
+    // Counted and pending before the edit closes, so a reload waits for the save, not the mark.
+    let save: (saving: unknown) => void = () => {};
+    trackStudioPendingEdit(new Promise((resolve) => (save = resolve)));
+    const commitText = () => {
+      teardown();
+      // After teardown, so the commit path's own resync does not fight an
+      // element that is still editable.
+      return onCommit({ element: open.element, html, previousHtml: open.original });
+    };
+    save(countStudioManualEditSave(open.element, commitText));
   }, [onCommit, teardown]);
 
   const cancel = useCallback(() => {

package/src/hooks/useKeyframeKeyboard.test.tsx

@@ -86,6 +86,21 @@ describe("keyframe shortcuts", () => {
     window.removeEventListener("keydown", playback);
   });
 
+  describe("with a focused picker", () => {
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    afterEach(() => picker.remove());
+
+    it("leaves K to a focused picker that owns typing, like a font combobox", () => {
+      const onAddKeyframe = mountKeyframeKeyboard(true);
+      document.body.append(picker);
+      picker.focus();
+
+      expect(press("k").defaultPrevented).toBe(false);
+      expect(onAddKeyframe).not.toHaveBeenCalled();
+    });
+  });
+
   it("K stays playback's stop key when no keyframeable element is selected", () => {
     const playback = vi.fn();
     window.addEventListener("keydown", playback);

package/src/hooks/useKeyframeKeyboard.ts

@@ -1,23 +1,17 @@
 import { useEffect, useCallback } from "react";
 import { STUDIO_PLAIN_KEYS } from "../player/components/studioShortcuts";
+import { isTypingTarget } from "../utils/typingTarget";
 
 interface KeyframeKeyboardOptions {
   enabled: boolean;
   onAddKeyframe?: () => void;
 }
 
-function isTextInput(el: Element | null): boolean {
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return (el as HTMLElement).isContentEditable === true;
-}
-
 export function useKeyframeKeyboard({ enabled, onAddKeyframe }: KeyframeKeyboardOptions): void {
   const handler = useCallback(
     (e: KeyboardEvent) => {
       if (!enabled || !onAddKeyframe) return;
-      if (isTextInput(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return; // never shadow browser/system combos
       if (e.key.toLowerCase() !== STUDIO_PLAIN_KEYS.addKeyframe) return;
       // K is also playback's stop key: claiming it here keeps playback from also pausing.

package/src/hooks/useLivePreviewIframe.ts

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from "react";
+import { onPreviewPromoted } from "../player/sceneSwap";
+
+/** The one source for which preview is on screen: the host's iframe, then each reload promoted in its place. */
+export function useLivePreviewIframe(host: HTMLIFrameElement | null): HTMLIFrameElement | null {
+  const [promoted, setPromoted] = useState<{ host: HTMLIFrameElement; live: HTMLIFrameElement }>();
+  const live = host && promoted?.host === host ? promoted.live : host;
+  const liveRef = useRef(live);
+  liveRef.current = live;
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!host) return;
+    return onPreviewPromoted(host.ownerDocument, ({ retired, live: next }) => {
+      if (retired === liveRef.current) setPromoted({ host, live: next });
+    });
+  }, [host]);
+  return live;
+}