@hyperframes/studio 0.8.105 → 0.8.107

package/src/components/editor/useDomEditNudge.ts

@@ -7,8 +7,12 @@
  */
 import { useCallback, useEffect, useRef, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import { isTypingTarget } from "../../utils/typingTarget";
+import { ownsPlainKeys } from "../../utils/typingTarget";
 import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
+import {
+  addStudioPendingEditFlushListener,
+  trackStudioPendingEdit,
+} from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import {
   type GroupOverlayItem,
@@ -43,6 +47,7 @@ interface NudgeSession {
   /** Accumulated delta of the burst, in composition px. */
   accum: { x: number; y: number };
   timer: ReturnType<typeof setTimeout> | null;
+  endPendingEdit: (saved?: Promise<unknown>) => void;
 }
 
 export interface UseDomEditNudgeParams {
@@ -127,12 +132,12 @@ function resolveSingleNudgeTarget(
 
 /**
  * True when a keydown must not start/extend a nudge: canvas movement disabled,
- * a pointer gesture already owns the element, or the user is typing in a field.
+ * a pointer gesture already owns the element, or focus is in a field or a native player.
  */
 function shouldIgnoreNudgeKey(p: UseDomEditNudgeParams, event: KeyboardEvent): boolean {
   if (!p.allowCanvasMovement || event.defaultPrevented) return true;
   if (p.gestureRef.current || p.groupGestureRef.current || p.blockedMoveRef.current) return true;
-  return isTypingTarget(event.target);
+  return ownsPlainKeys(event.target);
 }
 
 export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: () => void } {
@@ -143,31 +148,37 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
   // Commit the pending burst: one source write per burst = one undo entry.
   // Mirrors the drag's onPointerUp — same commit callbacks, same failure
   // restore, same member teardown.
-  const commitSession = () => {
+  const commitSession = (): Promise<unknown> | undefined => {
     const session = sessionRef.current;
-    if (!session) return;
+    if (!session) return undefined;
     sessionRef.current = null;
     if (session.timer) clearTimeout(session.timer);
-    const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
-      selection: member.selection,
-      next: applyManualOffsetNudgeCommit(member, session.accum),
-      plainTranslate: member.plainTranslate,
-    }));
     const p = paramsRef.current;
-    const commit = session.isGroup
-      ? p.onGroupPathOffsetCommitRef.current(updates)
-      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
-          plainTranslate: updates[0].plainTranslate,
-        });
-    void Promise.resolve(commit)
-      .catch(() => {
-        for (const member of session.members) {
-          if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
-            restoreStudioPathOffset(member.element, member.initialPathOffset);
+    let saved: Promise<unknown> | undefined;
+    try {
+      const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
+        selection: member.selection,
+        next: applyManualOffsetNudgeCommit(member, session.accum),
+        plainTranslate: member.plainTranslate,
+      }));
+      const commit = session.isGroup
+        ? p.onGroupPathOffsetCommitRef.current(updates)
+        : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+            plainTranslate: updates[0].plainTranslate,
+          });
+      saved = Promise.resolve(commit)
+        .catch(() => {
+          for (const member of session.members) {
+            if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
+              restoreStudioPathOffset(member.element, member.initialPathOffset);
+            }
           }
-        }
-      })
-      .finally(() => endManualOffsetDragMembers(session.members));
+        })
+        .finally(() => endManualOffsetDragMembers(session.members));
+      return saved;
+    } finally {
+      session.endPendingEdit(saved);
+    }
   };
   const commitSessionRef = useRef(commitSession);
   commitSessionRef.current = commitSession;
@@ -179,6 +190,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (session.timer) clearTimeout(session.timer);
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
+    session.endPendingEdit();
   }, [params.allowCanvasMovement]);
 
   // Build drag members for the current target set — the same member snapshot a
@@ -205,7 +217,9 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (members.length === 0) return null;
     // Same side effect a drag start has (pauses preview playback).
     p.onManualDragStartRef.current?.();
-    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null };
+    let endPendingEdit: NudgeSession["endPendingEdit"] = () => {};
+    trackStudioPendingEdit(new Promise<unknown>((resolve) => (endPendingEdit = resolve)));
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, endPendingEdit };
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {
@@ -231,8 +245,12 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     // Capture, like the other app-level key handlers, so a focused panel
     // can't swallow the nudge before it reaches us.
     window.addEventListener("keydown", listener, true);
+    const stopCommitOnUndoDrain = addStudioPendingEditFlushListener(() =>
+      commitSessionRef.current(),
+    );
     return () => {
       window.removeEventListener("keydown", listener, true);
+      stopCommitOnUndoDrain();
       commitSessionRef.current();
     };
   });
@@ -245,7 +263,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
   const selectionKey = selectionIdentityKey(params.selection);
   const groupSelectionsKey = groupSelectionsIdentityKey(params.groupSelections);
   // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => () => commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
+  useEffect(() => () => void commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
 
   // Claim the arrow keys from the playback frame-step while the selection is
   // nudgeable (see canvasNudgeGate — listener order is mount-dependent, so

package/src/components/editor/useInlineTextEditing.tsx

@@ -44,7 +44,7 @@ export function useInlineTextEditing(
 } {
   const actions = useDomEditActionsContextOptional();
   const inlineText = useInlineTextEdit({
-    onCommit: (commit) => void actions?.handleDomRichTextCommit(commit),
+    onCommit: (commit) => actions?.handleDomRichTextCommit(commit),
     onPause: () => usePlayerStore.getState().setIsPlaying(false),
   });
   const lastPressRef = useRef<PressMark | null>(null);

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

@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+import { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useMotionPathData } from "./useMotionPathData";
+import { resetOverlayFrameLoopForTests } from "./overlayFrameLoop";
+import { usePlayerStore } from "../../player/store/playerStore";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+const originalRaf = window.requestAnimationFrame;
+let frames: Array<() => void> = [];
+const runFrames = (count: number) => {
+  for (let i = 0; i < count; i++) {
+    const batch = frames;
+    frames = [];
+    act(() => {
+      for (const frame of batch) frame();
+      vi.advanceTimersByTime(16);
+    });
+  }
+};
+
+beforeEach(() => {
+  vi.useFakeTimers({
+    toFake: ["setTimeout", "clearTimeout", "setInterval", "clearInterval", "performance"],
+  });
+  window.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+    frames.push(() => callback(performance.now()))) as typeof window.requestAnimationFrame;
+  usePlayerStore.setState({ previewBooted: true, motionPathArmed: false });
+});
+
+afterEach(() => {
+  resetOverlayFrameLoopForTests();
+  window.requestAnimationFrame = originalRaf;
+  vi.useRealTimers();
+  usePlayerStore.setState({ previewBooted: false, motionPathArmed: false });
+  document.body.innerHTML = "";
+});
+
+it("reads no layout per frame until there is a path or a create ring to draw", () => {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const reads = vi.spyOn(iframe, "getBoundingClientRect");
+  function Probe() {
+    const ref = useRef(iframe);
+    useMotionPathData(ref, "#box");
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    act(() => root.render(<Probe />));
+    runFrames(10);
+    expect(reads).not.toHaveBeenCalled();
+
+    act(() => usePlayerStore.setState({ motionPathArmed: true }));
+    runFrames(10);
+    expect(reads).toHaveBeenCalled();
+  } finally {
+    act(() => root.unmount());
+  }
+});

package/src/components/editor/useMotionPathData.ts

@@ -3,6 +3,7 @@ import { readRuntimeKeyframes } from "../../hooks/gsapRuntimeKeyframes";
 import { isElementVisibleForOverlay } from "./domEditOverlayGeometry";
 import { buildMotionPathGeometry, type MotionPathGeometry } from "./motionPathGeometry";
 import { subscribeOverlayFrame } from "./overlayFrameLoop";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 type Rect = { left: number; top: number; width: number; height: number };
 
@@ -114,6 +115,8 @@ export function useMotionPathData(
   // Perspective magnification (1/m44) of the selected element — applied to the
   // path's offset points so depth (translateZ) elements' paths track on screen.
   const [pScale, setPScale] = useState(1);
+  const armed = usePlayerStore((s) => s.motionPathArmed);
+  const drawn = geometry !== null || armed;
 
   useEffect(() => {
     if (!selector) {
@@ -122,6 +125,7 @@ export function useMotionPathData(
       return;
     }
     setHome(null);
+    if (!drawn) return;
     const tick = () => {
       const el = iframeRef.current;
       if (el) {
@@ -155,7 +159,7 @@ export function useMotionPathData(
       }
     };
     return subscribeOverlayFrame(tick);
-  }, [selector, iframeRef]);
+  }, [selector, iframeRef, drawn]);
 
   useEffect(() => {
     if (!selector) {

package/src/components/panels/SlideshowPanel.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import {
   toggleMainLineSlide,
@@ -14,6 +16,7 @@ import {
   removeHotspot,
   safeParseManifest,
   makeSlideshowNotesController,
+  isPanelUndoKey,
 } from "./SlideshowPanel";
 import type { SlideshowManifest } from "@hyperframes/core/slideshow";
 
@@ -518,3 +521,27 @@ describe("makeSlideshowNotesController", () => {
     expect(persist).not.toHaveBeenCalled();
   });
 });
+
+describe("isPanelUndoKey", () => {
+  function undoFrom(html: string) {
+    document.body.innerHTML = `<div>${html}</div>`;
+    const target = document.body.firstElementChild!.firstElementChild!;
+    return { metaKey: true, ctrlKey: false, shiftKey: false, key: "z", target };
+  }
+
+  it("undoes the panel from a button or a slider", () => {
+    expect(isPanelUndoKey(undoFrom("<button>Add</button>"))).toBe(true);
+    expect(isPanelUndoKey(undoFrom('<div role="slider" tabindex="0"></div>'))).toBe(true);
+  });
+
+  it("leaves Cmd+Z to a text field, contenteditable and select included", () => {
+    expect(isPanelUndoKey(undoFrom("<input />"))).toBe(false);
+    expect(isPanelUndoKey(undoFrom('<p contenteditable="plaintext-only">Note</p>'))).toBe(false);
+    expect(isPanelUndoKey(undoFrom("<select><option>a</option></select>"))).toBe(false);
+  });
+
+  it("ignores Cmd+Shift+Z and a bare z", () => {
+    expect(isPanelUndoKey({ ...undoFrom("<button />"), shiftKey: true })).toBe(false);
+    expect(isPanelUndoKey({ ...undoFrom("<button />"), metaKey: false })).toBe(false);
+  });
+});

package/src/components/panels/SlideshowPanel.tsx

@@ -21,6 +21,7 @@ import { usePlayerStore } from "../../player";
 import { useDomEditSelectionContext } from "../../contexts/DomEditContext";
 import { useFileManagerContext } from "../../contexts/FileManagerContext";
 import { generateId } from "../../utils/generateId";
+import { isTypingTarget } from "../../utils/typingTarget";
 import {
   SectionHeader,
   SlideList,
@@ -153,6 +154,13 @@ export function makeSlideshowNotesController(): NotesController {
   };
 }
 
+export function isPanelUndoKey(
+  e: Pick<KeyboardEvent, "metaKey" | "ctrlKey" | "shiftKey" | "key" | "target">,
+): boolean {
+  if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.key.toLowerCase() !== "z") return false;
+  return !isTypingTarget(e.target);
+}
+
 // ── Component ─────────────────────────────────────────────────────────────
 
 export interface SlideshowPanelProps {
@@ -416,13 +424,10 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
       className="flex flex-col h-full overflow-y-auto text-text-0"
       onKeyDown={(e) => {
         // In-panel undo — scoped so it never fights the app-level file undo.
-        if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
-          const target = e.target instanceof HTMLElement ? e.target.tagName : "";
-          if (target === "TEXTAREA" || target === "INPUT") return;
-          e.preventDefault();
-          e.stopPropagation();
-          handleUndo();
-        }
+        if (!isPanelUndoKey(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        handleUndo();
       }}
     >
       {persistError && (

package/src/contexts/DomEditContext.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
+import { DomEditProvider, useDomEditActionsContext } from "./DomEditContext";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const cleanup: Array<() => void> = [];
+afterEach(() => cleanup.splice(0).forEach((step) => step()));
+
+/** A resize whose save is still running, committed through the actions the canvas and panels use. */
+function commitResize(save: Promise<void>) {
+  const handleDomBoxSizeCommit = vi.fn(() => save);
+  const value = { handleDomBoxSizeCommit } as unknown as Parameters<
+    typeof DomEditProvider
+  >[0]["value"];
+  let actions!: ReturnType<typeof useDomEditActionsContext>;
+  function Canvas() {
+    actions = useDomEditActionsContext();
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() =>
+    root.render(
+      <DomEditProvider value={value}>
+        <Canvas />
+      </DomEditProvider>,
+    ),
+  );
+  cleanup.push(() => act(() => root.unmount()));
+  const committed = actions.handleDomBoxSizeCommit(
+    {} as never,
+    { width: 300, height: 200 },
+    undefined,
+  );
+  return { committed, handleDomBoxSizeCommit };
+}
+
+it("undo waits for an edit committed before its save has written anything", async () => {
+  let finish!: () => void;
+  const { committed } = commitResize(new Promise<void>((resolve) => (finish = resolve)));
+  let drained = false;
+  const drain = flushStudioPendingEdits().then(() => (drained = true));
+  await new Promise((resolve) => setTimeout(resolve, 20));
+  expect(drained).toBe(false);
+  finish();
+  await drain;
+  await committed;
+  expect(drained).toBe(true);
+});
+
+it("an edit that fails is waited out and reported to the drain, like every tracked edit", async () => {
+  let fail!: (error: Error) => void;
+  const { committed } = commitResize(new Promise<void>((_, reject) => (fail = reject)));
+  const drain = flushStudioPendingEdits();
+  const failure = new Error("blocked");
+  fail(failure);
+  await expect(committed).rejects.toThrow("blocked");
+  await expect(drain).resolves.toEqual({ status: "failed", error: failure });
+});

package/src/contexts/DomEditContext.tsx

@@ -2,85 +2,88 @@
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 import { useCallback, useContext, useMemo, useRef, type ReactNode } from "react";
 import { createStableContext } from "../utils/hmrStableContext";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 
 type DomEditValue = ReturnType<typeof useDomEditSession>;
 
-export interface DomEditActionsValue extends Pick<
-  DomEditValue,
-  | "handleTimelineElementSelect"
-  | "handlePreviewCanvasMouseDown"
-  | "handlePreviewCanvasPointerMove"
-  | "handlePreviewCanvasPointerLeave"
-  | "applyDomSelection"
-  | "clearDomSelection"
-  | "refreshDomEditSelectionFromPreview"
-  | "handleDomStyleCommit"
-  | "handleDomStyleCommitForSelection"
-  | "handleDomAttributeCommit"
-  | "handleDomAttributeLiveCommit"
-  | "handleDomAttributeQuietCommit"
-  | "handleDomHtmlAttributeCommit"
-  | "handleDomAttributesCommit"
-  | "handleDomPathOffsetCommit"
-  | "handleDomGroupPathOffsetCommit"
-  | "handleDomZIndexReorderCommit"
-  | "handleDomBoxSizeCommit"
-  | "handleDomRotationCommit"
-  | "handleDomManualEditsReset"
-  | "handleDomTextCommit"
-  | "handleDomTextCommitForSelection"
-  | "handleDomRichTextCommit"
-  | "handleDomTextFieldStyleCommit"
-  | "handleDomAddTextField"
-  | "handleDomRemoveTextField"
-  | "getGsapAnimationsForSelection"
-  | "handleAskAgent"
-  | "handleAgentModalSubmit"
-  | "handleBlockedDomMove"
-  | "handleDomManualDragStart"
-  | "handleDomEditElementDelete"
-  | "handleGroupSelection"
-  | "handleUngroupSelection"
-  | "setActiveGroupElement"
-  | "buildDomSelectionFromTarget"
-  | "buildDomSelectionForTimelineElement"
-  | "updateDomEditHoverSelection"
-  | "resolveImportedFontAsset"
-  | "setAgentModalOpen"
-  | "setAgentPromptSelectionContext"
-  | "setAgentModalAnchorPoint"
-  | "handleGsapUpdateProperty"
-  | "handleGsapUpdateMeta"
-  | "handleGsapDeleteAnimation"
-  | "handleGsapDeleteAllForElement"
-  | "handleGsapAddAnimation"
-  | "handleGsapAddProperty"
-  | "handleGsapRemoveProperty"
-  | "handleGsapUpdateFromProperty"
-  | "handleGsapAddFromProperty"
-  | "handleGsapRemoveFromProperty"
-  | "handleGsapAddKeyframe"
-  | "handleGsapAddKeyframeBatch"
-  | "handleGsapRemoveKeyframe"
-  | "handleGsapMoveKeyframeToPlayhead"
-  | "handleGsapMoveKeyframe"
-  | "handleGsapResizeKeyframedTween"
-  | "handleGsapConvertToKeyframes"
-  | "handleGsapRemoveAllKeyframes"
-  | "handleResetSelectedElementKeyframes"
-  | "commitAnimatedProperty"
-  | "commitAnimatedProperties"
-  | "handleSetArcPath"
-  | "handleUpdateArcSegment"
-  | "handleUnroll"
-  | "invalidateGsapCache"
-  | "previewIframeRef"
-  | "commitMutation"
-  | "applyMarqueeSelection"
-  | "handleUpdateKeyframeEase"
-  | "handleUpdateSegmentEase"
-  | "handleSetAllKeyframeEases"
-> {}
+const SAVES_AN_EDIT = {
+  handleTimelineElementSelect: false,
+  handlePreviewCanvasMouseDown: false,
+  handlePreviewCanvasPointerMove: false,
+  handlePreviewCanvasPointerLeave: false,
+  applyDomSelection: false,
+  clearDomSelection: false,
+  refreshDomEditSelectionFromPreview: false,
+  handleDomStyleCommit: true,
+  handleDomStyleCommitForSelection: true,
+  handleDomAttributeCommit: true,
+  handleDomAttributeLiveCommit: false,
+  handleDomAttributeQuietCommit: true,
+  handleDomHtmlAttributeCommit: true,
+  handleDomAttributesCommit: true,
+  handleDomAttributeBatchCommit: true,
+  handleDomPathOffsetCommit: true,
+  handleDomGroupPathOffsetCommit: true,
+  handleDomZIndexReorderCommit: true,
+  handleDomBoxSizeCommit: true,
+  handleDomRotationCommit: true,
+  handleDomManualEditsReset: true,
+  handleDomTextCommit: true,
+  handleDomTextCommitForSelection: true,
+  handleDomRichTextCommit: true,
+  handleDomTextFieldStyleCommit: true,
+  handleDomAddTextField: true,
+  handleDomRemoveTextField: true,
+  getGsapAnimationsForSelection: false,
+  handleAskAgent: false,
+  handleAgentModalSubmit: false,
+  handleBlockedDomMove: false,
+  handleDomManualDragStart: false,
+  handleDomEditElementDelete: true,
+  handleGroupSelection: true,
+  handleUngroupSelection: true,
+  setActiveGroupElement: false,
+  buildDomSelectionFromTarget: false,
+  buildDomSelectionForTimelineElement: false,
+  updateDomEditHoverSelection: false,
+  resolveImportedFontAsset: false,
+  setAgentModalOpen: false,
+  setAgentPromptSelectionContext: false,
+  setAgentModalAnchorPoint: false,
+  handleGsapUpdateProperty: true,
+  handleGsapUpdateMeta: true,
+  handleGsapDeleteAnimation: true,
+  handleGsapDeleteAllForElement: true,
+  handleGsapAddAnimation: true,
+  handleGsapAddProperty: true,
+  handleGsapRemoveProperty: true,
+  handleGsapUpdateFromProperty: true,
+  handleGsapAddFromProperty: true,
+  handleGsapRemoveFromProperty: true,
+  handleGsapAddKeyframe: true,
+  handleGsapAddKeyframeBatch: true,
+  handleGsapRemoveKeyframe: true,
+  handleGsapMoveKeyframeToPlayhead: true,
+  handleGsapMoveKeyframe: true,
+  handleGsapResizeKeyframedTween: true,
+  handleGsapConvertToKeyframes: true,
+  handleGsapRemoveAllKeyframes: true,
+  handleResetSelectedElementKeyframes: true,
+  commitAnimatedProperty: true,
+  commitAnimatedProperties: true,
+  handleSetArcPath: true,
+  handleUpdateArcSegment: true,
+  handleUnroll: true,
+  invalidateGsapCache: false,
+  previewIframeRef: false,
+  commitMutation: true,
+  applyMarqueeSelection: false,
+  handleUpdateKeyframeEase: true,
+  handleUpdateSegmentEase: true,
+  handleSetAllKeyframeEases: true,
+} as const satisfies Partial<Record<keyof DomEditValue, boolean>>;
+
+export interface DomEditActionsValue extends Pick<DomEditValue, keyof typeof SAVES_AN_EDIT> {}
 
 export interface DomEditSelectionValue extends Pick<
   DomEditValue,
@@ -98,6 +101,15 @@ export interface DomEditSelectionValue extends Pick<
   | "agentPromptSelectionContext"
 > {}
 
+function trackEditCommits(actions: DomEditActionsValue): DomEditActionsValue {
+  const tracked: Record<string, unknown> = { ...actions };
+  for (const key of Object.keys(SAVES_AN_EDIT) as Array<keyof typeof SAVES_AN_EDIT>) {
+    if (!SAVES_AN_EDIT[key]) continue;
+    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown);
+  }
+  return tracked as unknown as DomEditActionsValue;
+}
+
 const DomEditActionsContext = createStableContext<DomEditActionsValue | null>(
   "DomEditActionsContext",
   null,
@@ -164,6 +176,7 @@ export function DomEditProvider({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -242,7 +255,7 @@ export function DomEditProvider({
     [],
   );
 
-  const actions = useMemo<DomEditActionsValue>(
+  const untrackedActions = useMemo<DomEditActionsValue>(
     () => ({
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
@@ -258,6 +271,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -333,6 +347,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -395,6 +410,8 @@ export function DomEditProvider({
     ],
   );
 
+  const actions = useMemo(() => trackEditCommits(untrackedActions), [untrackedActions]);
+
   const selection = useMemo<DomEditSelectionValue>(
     () => ({
       domEditSelection,

package/src/hooks/appHotkeysDispatch.ts

@@ -3,7 +3,7 @@ import { usePlayerStore } from "../player";
 import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { useDockLayoutStore } from "../components/dock/dockLayoutStore";
-import { isTypingTarget } from "../utils/typingTarget";
+import { isTypingTarget, ownsPlainKeys } from "../utils/typingTarget";
 import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
@@ -153,6 +153,7 @@ export function dispatchModifierKey(
  *  Delete arbitration between keyframes, an automation range and the clip can
  *  be asserted without standing up the whole hook. */
 export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): void {
+  if (ownsPlainKeys(event.target)) return;
   if (key === STUDIO_PLAIN_KEYS.fullscreen && !event.shiftKey && !event.altKey) {
     event.preventDefault();
     if (document.fullscreenElement) void document.exitFullscreen();