@hyperframes/studio 0.8.106 → 0.8.107

package/src/hooks/gsapResizeIntercept.test.ts

@@ -529,7 +529,7 @@ function titleSelection(): DomEditSelection {
   return { id: "title", selector: "#title", element: el } as DomEditSelection;
 }
 
-it("writes a plain size on an element whose only tween is a fade", async () => {
+it("hands the size to the element's CSS when its only tween is a fade", async () => {
   const fade = {
     id: "#title-to-0-visual",
     targetSelector: "#title",
@@ -550,14 +550,6 @@ it("writes a plain size on an element whose only tween is a fade", async () => {
     commitMutation,
   );
 
-  expect(handled).toMatchObject({ status: "persisted" });
-  const mutations = commitMutation.mock.calls.map((call) => call[1] as { type: string });
-  expect(mutations.filter((m) => /keyframe/i.test(m.type))).toEqual([]);
-  expect(mutations).toContainEqual({
-    type: "add",
-    targetSelector: "#title",
-    method: "set",
-    position: 0,
-    properties: { width: 424, height: 237 },
-  });
+  expect(handled).toEqual({ status: "element-size" });
+  expect(commitMutation).not.toHaveBeenCalled();
 });

package/src/hooks/gsapResizeIntercept.ts

@@ -38,6 +38,7 @@ import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutc
 import { preflightGsapResizeIntercept, resizeRoute } from "./gsapResizePreflight";
 
 const IDENTITY_ONE_PROPS = new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
+const SIZE_PROPS = new Set(["width", "height"]);
 
 /** Build identity (zero / one) values for each property in `source`. */
 function synthesizeIdentityProps(
@@ -101,7 +102,7 @@ export async function tryGsapResizeIntercept(
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
-  const { resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
+  const { allKnownAnimations, resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
     animations,
     fetchedAnimations,
   );
@@ -131,6 +132,10 @@ export async function tryGsapResizeIntercept(
     size,
   });
   if (!anim || isInstantHold(anim)) {
+    const scriptWritesSize = allKnownAnimations.some((a) =>
+      animationWritesAnyProperty(a, SIZE_PROPS),
+    );
+    if (!scriptWritesSize) return { status: "element-size" };
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
     // A scale hold is not a size hold.
@@ -541,7 +546,6 @@ export async function tryGsapResizeIntercept(
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
-  const SIZE_PROPS = new Set(["width", "height"]);
   const backfillDefaults: Record<string, number> = {};
   for (const k of Object.keys(runtimeProps)) {
     if (SIZE_PROPS.has(k)) continue;

package/src/hooks/gsapResizeMixedTween.test.ts

@@ -163,6 +163,5 @@ it("leaves the drag offset to the caller when it commits size, not scale", async
     async () => [scaleHold],
   );
 
-  expect(outcome.status).toBe("persisted");
-  expect(outcome.status === "persisted" && outcome.ownsDragOffset).not.toBe(true);
+  expect(outcome.status).toBe("element-size");
 });

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -567,3 +567,58 @@ describe("tryGsapDragIntercept — motion paths", () => {
     );
   });
 });
+
+describe("tryGsapDragIntercept — position self-heal", () => {
+  const xyTween = {
+    ...stalePositionAnim,
+    id: "#puck-b-to-0-position",
+    position: 0,
+    resolvedStart: 0,
+  };
+  const centringSet = {
+    id: "#puck-b-set-0-position",
+    targetSelector: "#puck-b",
+    propertyGroup: "position",
+    method: "set",
+    properties: { xPercent: -50, yPercent: -50 },
+    position: 0,
+    duration: 0,
+  } as unknown as GsapAnimation;
+  const xySet = { ...centringSet, properties: { x: 10, y: 20 } } as GsapAnimation;
+  const liveTween = {
+    targets: () => [{ id: "puck-b" }],
+    vars: { x: -180, y: -60, duration: 2 },
+    duration: () => 2,
+    startTime: () => 0,
+  };
+
+  async function drag(second: GsapAnimation) {
+    usePlayerStore.setState({ currentTime: 1 });
+    const animations = [second, xyTween];
+    const commitMutation = vi.fn();
+    await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 30 },
+      animations,
+      fakeIframe("puck-b", [liveTween]),
+      commitMutation,
+      async () => animations,
+    );
+    return commitMutation.mock.calls.map(([, mutation]) => mutation);
+  }
+
+  it("keeps an xPercent/yPercent centring set and moves the x/y tween", async () => {
+    const mutations = await drag(centringSet);
+    expect(mutations.map((m) => m.type)).not.toContain("consolidate-position-writes");
+    expect(mutations.length).toBeGreaterThan(0);
+    expect(mutations.every((m) => m.animationId === xyTween.id)).toBe(true);
+  });
+
+  it("consolidates a second x/y write", async () => {
+    const mutations = await drag(xySet);
+    expect(mutations[0]).toMatchObject({
+      type: "consolidate-position-writes",
+      keepAnimationId: xyTween.id,
+    });
+  });
+});

package/src/hooks/gsapRuntimeBridge.ts

@@ -9,6 +9,7 @@
  * easing, or seek position.
  */
 import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import { isXYPositionWrite } from "@hyperframes/parsers/gsap-constants";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 
@@ -245,8 +246,7 @@ export async function tryGsapDragIntercept(
   // the live keyframed/real tween if present (else any), strip the rest, so the
   // commit below updates ONE write instead of fighting duplicates.
   let workingAnimations = animations;
-  const isPosWrite = (a: GsapAnimation) =>
-    a.targetSelector === selector && a.propertyGroup === "position";
+  const isPosWrite = (a: GsapAnimation) => a.targetSelector === selector && isXYPositionWrite(a);
   if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
     const dupes = fresh.filter(isPosWrite);
@@ -331,7 +331,9 @@ export async function tryGsapDragIntercept(
     const fresh = await fetchFallbackAnimations();
     const freshMatch = fresh.find(
       (a) =>
-        a.targetSelector === posAnim!.targetSelector && a.propertyGroup === posAnim!.propertyGroup,
+        a.targetSelector === posAnim!.targetSelector &&
+        a.propertyGroup === posAnim!.propertyGroup &&
+        isXYPositionWrite(a) === isXYPositionWrite(posAnim!),
     );
     if (freshMatch && freshMatch.id !== posAnim.id) {
       posAnim = freshMatch;

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -12,6 +12,7 @@ import { buildArcPath, type ArcPathConfig } from "@hyperframes/core/gsap-parser-
 import { parsePercentageKeyframes, toAbsoluteTime } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 import { BOX_SIZE_STYLE_PROPS } from "../components/editor/manualEditsDomPatches";
+import { gsapRendersTransform } from "../components/editor/gsapAnimatesProperty";
 
 /**
  * A GSAP tween's `vars` object — intentionally open: it mixes channel values
@@ -446,9 +447,6 @@ export const ROTATION_CHANNELS: string[] = [
   ...["rotate", "rotateX", "rotateY", "rotateZ"],
 ];
 
-const gsapRendersTransform = (el: Element) =>
-  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
-
 /** GSAP owns this element's position: a tween or hold writes it, or GSAP already renders its
  *  transform (a CSS translate would then apply twice). Everything else moves by plain CSS. */
 export function gsapWritesPosition(el: Element): boolean {

package/src/hooks/inspectorSaveReload.test.tsx

@@ -0,0 +1,107 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import {
+  makePreview,
+  mountPlayerWithPreview,
+  paintShadow,
+  resetPlayerStore,
+} from "../player/hooks/timelinePlayerTestHarness";
+import { useDomEditCommits } from "./useDomEditCommits";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+vi.mock("../utils/gsapSoftReload", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../utils/gsapSoftReload")>()),
+  ensureMotionPathPluginLoaded: vi.fn(),
+}));
+
+/** The project file; the patch route applies a colour to it, and each preview load serves it. */
+let color = "red";
+const card = () => `<div data-hf-id="hf-card" style="color: ${color}">Card</div>`;
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+  resetPlayerStore();
+});
+
+it("an inspector save made while a reload loads is not undone when that reload goes on screen", async () => {
+  color = "red";
+  let land = () => {};
+  const landed = new Promise<void>((resolve) => (land = resolve));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: string, init?: RequestInit) => {
+      if (!input.includes("/file-mutations/patch-element/"))
+        return Response.json({ content: card() });
+      await landed;
+      const { operations } = JSON.parse(String(init?.body)) as { operations: { value: string }[] };
+      color = operations[0]!.value;
+      return Response.json({ ok: true, changed: true, matched: true, content: card() });
+    }),
+  );
+  const live = makePreview(card());
+  const player = mountPlayerWithPreview(live);
+  const element = live.contentDocument!.querySelector<HTMLElement>("[data-hf-id]")!;
+  const selection = {
+    element,
+    label: "Card",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    textFields: [],
+    inlineStyles: { color: "red" },
+    computedStyles: {},
+    dataAttributes: {},
+    capabilities: { canSelect: true, canEditStyles: true },
+    hfId: "hf-card",
+    selector: '[data-hf-id="hf-card"]',
+    selectorIndex: 0,
+  } as unknown as DomEditSelection;
+  let commits: ReturnType<typeof useDomEditCommits> | null = null;
+  function Inspector() {
+    commits = useDomEditCommits({
+      activeCompPath: "index.html",
+      previewIframeRef: player.getApi().iframeRef,
+      showToast: () => {},
+      queueDomEditSave: (save) => save(),
+      writeProjectFile: async () => {},
+      editHistory: { recordEdit: async () => {} },
+      fileTree: [],
+      importedFontAssetsRef: { current: [] },
+      projectId: "p1",
+      projectIdRef: { current: "p1" },
+      reloadPreview: () => {},
+      domEditSelection: selection,
+      applyDomSelection: () => {},
+      clearDomSelection: () => {},
+      refreshDomEditSelectionFromPreview: () => {},
+      buildDomSelectionFromTarget: async () => null,
+      readOnlyPreview: false,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Inspector)));
+
+  act(() => player.getApi().refreshPlayer());
+  const beforeSave = makePreview(card(), "?_t=1");
+  let saved: Promise<unknown> = Promise.resolve();
+  act(() => void (saved = commits!.handleDomStyleCommit("color", "green")));
+  await act(async () => {
+    land();
+    await saved;
+  });
+  expect(color).toBe("green");
+
+  const requested = await paintShadow(player.getApi, beforeSave);
+  expect(player.getApi().iframeRef.current, "the file before the save").toBe(live);
+  const fresh = makePreview(card(), "?_t=2");
+  expect(await paintShadow(player.getApi, fresh)).toBeGreaterThan(requested);
+  expect(player.getApi().iframeRef.current).toBe(fresh);
+  act(() => root.unmount());
+  act(() => player.root.unmount());
+});

package/src/hooks/useAppHotkeys.previewForwarding.test.tsx

@@ -16,6 +16,7 @@ vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 const domDelete = vi.fn(async () => undefined);
 const historyUndo = vi.fn(async () => ({ ok: false }));
 const historyRedo = vi.fn(async () => ({ ok: false }));
+const settle = vi.fn(async () => undefined);
 let root: Root | null = null;
 let sync: ((iframe: HTMLIFrameElement | null) => void) | null = null;
 
@@ -49,7 +50,7 @@ function Harness() {
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
-    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    settlePendingEdits: settle,
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(() => false),
     handleCut: vi.fn(() => false),
@@ -69,6 +70,8 @@ afterEach(() => {
   domDelete.mockClear();
   historyUndo.mockClear();
   historyRedo.mockClear();
+  settle.mockReset();
+  settle.mockImplementation(async () => undefined);
   vi.mocked(trackStudioEvent).mockClear();
 });
 
@@ -122,6 +125,18 @@ describe("preview iframe hotkey forwarding", () => {
     expect(trackStudioEvent).toHaveBeenCalledWith("keyboard_shortcut", { action: "undo" });
   });
 
+  it("settles pending edits, failed ones included, before Cmd+Z steps the history", async () => {
+    let settled!: () => void;
+    settle.mockImplementation(
+      () => new Promise<undefined>((resolve) => (settled = () => resolve(undefined))),
+    );
+    await press(mountWithPreview(), { key: "z", ctrlKey: true });
+    expect(settle).toHaveBeenCalledTimes(1);
+    expect(historyUndo).not.toHaveBeenCalled();
+    await act(async () => settled());
+    expect(historyUndo).toHaveBeenCalledTimes(1);
+  });
+
   it.each([
     ["Shift+Cmd+Z", { key: "Z", metaKey: true, shiftKey: true }],
     ["Ctrl+Y", { key: "y", ctrlKey: true }],

package/src/hooks/useAppHotkeys.test.ts

@@ -61,6 +61,9 @@ afterEach(() => {
 });
 
 describe("keys on a focused slider", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
   const slider = () => {
     const el = document.createElement("div");
     el.setAttribute("role", "slider");
@@ -85,6 +88,20 @@ describe("keys on a focused slider", () => {
     expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
   });
 
+  it.each(["video", "audio"])("leaves Delete to a focused <%s controls>", (tag) => {
+    usePlayerStore.setState({
+      elements: [bgmElement],
+      selectedElementId: "bgm",
+      selectedElementIds: new Set(["bgm"]),
+    });
+    const player = document.body.appendChild(document.createElement(tag));
+    player.setAttribute("controls", "");
+    const cb = callbacks();
+    dispatchPlainKey(from(player, { key: "Delete" }), "delete", cb);
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+  });
+
   it("still undoes with Cmd+Z while a slider has focus", () => {
     const cb = callbacks();
     dispatchModifierKey(from(slider(), { key: "z", metaKey: true }), "z", cb);

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -86,7 +86,7 @@ function Harness() {
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
-    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    settlePendingEdits: vi.fn(async () => undefined),
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),

package/src/hooks/useAppHotkeys.ts

@@ -85,7 +85,7 @@ interface UseAppHotkeysParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: UseEditHistoryActionsOptions["syncHistoryPreviewAfterApply"];
   showHistoryRestoreNow?: UseEditHistoryActionsOptions["showHistoryRestoreNow"];
-  waitForPendingDomEditSaves: () => Promise<void>;
+  settlePendingEdits: () => Promise<void>;
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
@@ -124,7 +124,7 @@ export function useAppHotkeys({
   showToast,
   syncHistoryPreviewAfterApply,
   showHistoryRestoreNow,
-  waitForPendingDomEditSaves,
+  settlePendingEdits,
   handleCopy,
   handlePaste,
   handleCut,
@@ -151,7 +151,7 @@ export function useAppHotkeys({
     showToast,
     syncHistoryPreviewAfterApply,
     showHistoryRestoreNow,
-    waitForPendingDomEditSaves,
+    waitForPendingDomEditSaves: settlePendingEdits,
     onAfterUndoRedo,
     activeCompPath,
     forceReloadSdkSession,

package/src/hooks/useAutomationSelectionKeyboard.test.tsx

@@ -216,6 +216,23 @@ describe("useAutomationSelectionKeyboard", () => {
     input.remove();
   });
 
+  describe("with a focused picker", () => {
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    afterEach(() => picker.remove());
+
+    it("is inert while a picker that owns typing has focus", () => {
+      usePlayerStore
+        .getState()
+        .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 1, t1: 3 }));
+      const { onCommit } = setup({});
+      document.body.append(picker);
+      picker.focus();
+      key("Delete");
+      expect(onCommit).not.toHaveBeenCalled();
+    });
+  });
+
   it("Cmd+C copies the active selection", () => {
     clearAutomationClipboard();
     usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });

package/src/hooks/useAutomationSelectionKeyboard.ts

@@ -31,6 +31,7 @@ import {
   type HfAutomationLane,
 } from "@hyperframes/core/audio-automation";
 import { clampNumber } from "../utils/studioHelpers";
+import { isTypingTarget } from "../utils/typingTarget";
 import type { AutomationSelection } from "../player/store/automationSelectionSlice";
 import type {
   AutomationLaneBinding,
@@ -39,13 +40,6 @@ import type {
 
 type PlayerState = ReturnType<typeof usePlayerStore.getState>;
 
-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 instanceof HTMLElement && el.isContentEditable;
-}
-
 /**
  * A Cmd/Ctrl+<letter> chord. `e.key` is normalised because CapsLock makes it
  * "V"/"C", and useAppHotkeys already lowercases — a raw `e.key === "v"` test
@@ -302,7 +296,7 @@ function handleCopy(
  * dead key beats today's double write.
  */
 export function automationOwnsKey(e: KeyboardEvent): boolean {
-  if (isTextInput(document.activeElement)) return false;
+  if (isTypingTarget(document.activeElement)) return false;
   const state = usePlayerStore.getState();
   if (isChord(e, "c")) return state.automationSelection !== null;
   if (!isChord(e, "v")) return false;
@@ -340,7 +334,7 @@ export function useAutomationSelectionKeyboard({
 }): void {
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
-      if (isTextInput(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       // Somebody upstream already claimed this key. useAppHotkeys is on
       // window/capture so it always runs first, and it deliberately lets a
       // keyframe selection outrank an automation range on Delete — without

package/src/hooks/useDomEditAttributeCommits.ts

@@ -5,8 +5,11 @@ import {
   getDomEditTargetKey,
   type DomEditSelection,
 } from "../components/editor/domEditing";
-import type { PersistDomEditOperations } from "./domEditCommitTypes";
-import { reportDomEditPersistFailure } from "./domEditPersistFailure";
+import type { CommitDomAttributeBatch, PersistDomEditOperations } from "./domEditCommitTypes";
+import {
+  DomEditPersistPreparedWriteError,
+  reportDomEditPersistFailure,
+} from "./domEditPersistFailure";
 import { bumpDomEditCommitMapVersion, runDomEditCommit } from "./domEditCommitRunner";
 import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
@@ -54,6 +57,15 @@ export function resolveOptimisticAttributeValue(attr: string, value: string | nu
   return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
 }
 
+function previewAttributeName(op: PatchOperation): string {
+  return op.type === "attribute" ? resolveFullAttrName(op.property, true) : op.property;
+}
+
+function previewAttributeValue(op: PatchOperation): string | null {
+  if (op.type === "html-attribute") return resolveOptimisticAttributeValue(op.property, op.value);
+  return op.value === "" ? null : op.value;
+}
+
 function setOrRemovePreviewAttribute(
   el: HTMLElement,
   fullAttr: string,
@@ -209,7 +221,7 @@ export function useDomEditAttributeCommits({
     ],
   );
 
-  // Commits several data-* attributes on the SAME element in ONE persist call
+  // Commits several data-* and HTML attributes on the SAME element in ONE persist call
   // — needed when two attributes together describe a single logical value
   // (e.g. a pinned timing range's start+duration): committing them through two
   // separate sequential `commitDataAttribute` calls leaves a window where the
@@ -221,32 +233,30 @@ export function useDomEditAttributeCommits({
   // explicit, caller-supplied `selection` (not the "current" one) closes both
   // gaps — matching `onCommitAnimatedProperties`'s same-shaped fix for GSAP
   // property batches.
-  const commitDataAttributes = useCallback(
+  const commitAttributeOps = useCallback(
     async (
       selection: DomEditSelection,
-      attrs: Record<string, string | null>,
-      options: DataAttributeCommitOptions,
-    ) => {
+      ops: PatchOperation[],
+      options: DataAttributeCommitOptions & {
+        prepareContent?: (html: string) => string;
+        syncAutomation?: boolean;
+      },
+    ): Promise<boolean> => {
       const iframe = previewIframeRef.current;
-      const entries = Object.entries(attrs).map(([attr, value]) => ({
-        attr,
-        fullAttr: resolveFullAttrName(attr, true),
-        value,
+      const entries = ops.map((op) => ({
+        fullAttr: previewAttributeName(op),
+        value: previewAttributeValue(op),
       }));
-      const commitKey = `${options.coalescePrefix}:${entries
-        .map((entry) => entry.attr)
+      const commitKey = `${options.coalescePrefix}:${ops
+        .map((op) => op.property)
         .sort()
         .join(",")}:${getDomEditTargetKey(selection)}`;
       const isLatestCommit = bumpDomEditCommitMapVersion(
         domAttributeCommitVersionRef.current,
         commitKey,
       );
-      const ops: PatchOperation[] = entries.map((entry) => ({
-        type: "attribute",
-        property: entry.attr,
-        value: entry.value,
-      }));
       let captured: CapturedMultiAttributeElement | null = null;
+      let landed = false;
 
       await runDomEditCommit({
         capture: () => {
@@ -260,8 +270,7 @@ export function useDomEditAttributeCommits({
         apply: () => {
           if (!captured) return;
           for (const entry of entries) {
-            const nextValue = entry.value === null || entry.value === "" ? null : entry.value;
-            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, nextValue);
+            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, entry.value);
           }
         },
         persist: () =>
@@ -269,8 +278,10 @@ export function useDomEditAttributeCommits({
             label: options.label,
             coalesceKey: commitKey,
             skipRefresh: options.skipRefresh,
+            prepareContent: options.prepareContent,
           }),
-        shouldRevert: () => isLatestCommit(),
+        shouldRevert: (error) =>
+          isLatestCommit() && !(error instanceof DomEditPersistPreparedWriteError),
         revert: () => {
           if (!captured) return;
           for (const entry of entries) {
@@ -283,10 +294,19 @@ export function useDomEditAttributeCommits({
         },
         onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
-        resync: () => refreshDomEditSelectionFromPreview(selection),
-        onSettled: options.onSettled,
+        resync: () => {
+          refreshDomEditSelectionFromPreview(selection);
+          if (options.syncAutomation) {
+            syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
+          }
+        },
+        onSettled: (ok) => {
+          landed = ok;
+          options.onSettled?.(ok);
+        },
         onFinally: isLatestCommit.release,
       });
+      return landed;
     },
     [
       activeCompPath,
@@ -299,14 +319,35 @@ export function useDomEditAttributeCommits({
 
   const handleDomAttributesCommit = useCallback(
     async (selection: DomEditSelection, attrs: Record<string, string>) => {
-      await commitDataAttributes(selection, attrs, {
-        label: "Edit timing",
-        coalescePrefix: "attrs",
+      await commitAttributeOps(
+        selection,
+        Object.entries(attrs).map(([property, value]) => ({
+          type: "attribute",
+          property,
+          value,
+        })),
+        {
+          label: "Edit timing",
+          coalescePrefix: "attrs",
+          skipRefresh: false,
+          refreshAfter: true,
+        },
+      );
+    },
+    [commitAttributeOps],
+  );
+
+  const handleDomAttributeBatchCommit: CommitDomAttributeBatch = useCallback(
+    (selection, ops, options) =>
+      commitAttributeOps(selection, ops, {
+        label: options.label,
+        coalescePrefix: "attr-batch",
         skipRefresh: false,
         refreshAfter: true,
-      });
-    },
-    [commitDataAttributes],
+        syncAutomation: true,
+        prepareContent: options.prepareContent,
+      }),
+    [commitAttributeOps],
   );
 
   const handleDomAttributeCommit = useCallback(
@@ -438,5 +479,6 @@ export function useDomEditAttributeCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
   };
 }