@hyperframes/studio 0.7.90 → 0.7.93

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -24,21 +24,16 @@ import {
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
+import {
+  assertGsapEditPersisted,
+  directEditOutcomeForProperties,
+  GsapEditBlockedError,
+} from "./gsapEditOutcome";
+import type { CommitMutation, CommitMutationCall } from "./gsapScriptCommitTypes";
 
 interface CommitAnimatedPropertyDeps {
   selectedGsapAnimations: GsapAnimation[];
-  gsapCommitMutation:
-    | ((
-        selection: DomEditSelection,
-        mutation: Record<string, unknown>,
-        options: {
-          label: string;
-          coalesceKey?: string;
-          softReload?: boolean;
-          skipReload?: boolean;
-        },
-      ) => Promise<void>)
-    | null;
+  gsapCommitMutation: CommitMutation | null;
   addGsapAnimation: (
     selection: DomEditSelection,
     method: "to" | "from" | "set" | "fromTo",
@@ -68,6 +63,8 @@ function pickBestAnimation(
   if (candidates.length === 0) return undefined;
   if (candidates.length === 1) return candidates[0];
   const currentTime = usePlayerStore.getState().currentTime;
+  // Intentional multi-signal ranking: group match, selector specificity, and playhead overlap.
+  // fallow-ignore-next-line complexity
   const scored = candidates.map((a) => {
     let score = 0;
     if (a.keyframes) score += 10;
@@ -107,7 +104,7 @@ async function maybeAutoKeyframeSet(
   );
 }
 
-type Commit = NonNullable<CommitAnimatedPropertyDeps["gsapCommitMutation"]>;
+type Commit = CommitMutation;
 
 /** Undo-history label for a static-set commit, from the group it writes. */
 const STATIC_SET_LABELS: Partial<Record<ReturnType<typeof classifyPropertyGroup>, string>> = {
@@ -137,6 +134,17 @@ async function commitSetProps(
   animations: GsapAnimation[],
   commit: Commit,
 ): Promise<void> {
+  const call = buildSetPropsCall(selection, setAnim, propEntries, selector);
+  await commit(call.selection, call.mutation, call.options);
+  await maybeAutoKeyframeSet(selection, setAnim, animations, commit);
+}
+
+function buildSetPropsCall(
+  selection: DomEditSelection,
+  setAnim: GsapAnimation,
+  propEntries: [string, number | string][],
+  selector: string | null,
+): CommitMutationCall {
   const properties = Object.fromEntries(propEntries);
   const numericProps: SetPatchProps = {};
   for (const [k, v] of propEntries) {
@@ -152,16 +160,15 @@ async function commitSetProps(
           },
         }
       : undefined;
-  await commit(
+  return {
     selection,
-    { type: "update-properties", animationId: setAnim.id, properties },
-    {
+    mutation: { type: "update-properties", animationId: setAnim.id, properties },
+    options: {
       label: staticSetLabel(propEntries),
       softReload: true,
       ...(instantPatch ? { instantPatch } : {}),
     },
-  );
-  await maybeAutoKeyframeSet(selection, setAnim, animations, commit);
+  };
 }
 
 /**
@@ -177,7 +184,25 @@ async function commitStaticSet(
   animations: GsapAnimation[],
   commit: Commit,
 ): Promise<void> {
-  if (!selector) return;
+  const calls = planStaticSetCalls(selection, propEntries, selector, animations);
+  const only = calls[0];
+  if (!only) return;
+  if (calls.length === 1) {
+    await commit(only.selection, only.mutation, only.options);
+    return;
+  }
+  if (!commit.batch) {
+    throw new Error("Atomic GSAP property batch is unavailable");
+  }
+  await commit.batch(calls, {
+    label: staticSetLabel(propEntries),
+    softReload: true,
+  });
+}
+
+function groupStaticSetEntries(
+  propEntries: [string, number | string][],
+): Map<string, [string, number | string][]> {
   // One commit per PROPERTY GROUP, each into a static write that owns that group —
   // never a live tween, and never a foreign-group write (a width edit used to
   // merge into the element's position set, producing a mixed write the split
@@ -191,9 +216,22 @@ async function commitStaticSet(
     batch.push(entry);
     byGroup.set(group, batch);
   }
-  const staticWrites = animations.filter(
-    (a) => isInstantHold(a) && tweenTargetsElement(a.targetSelector, selector, selection.element),
-  );
+  return byGroup;
+}
+
+function planStaticSetCalls(
+  selection: DomEditSelection,
+  propEntries: [string, number | string][],
+  selector: string | null,
+  animations: GsapAnimation[],
+): CommitMutationCall[] {
+  const byGroup = groupStaticSetEntries(propEntries);
+  const staticWrites = selector
+    ? animations.filter(
+        (a) =>
+          isInstantHold(a) && tweenTargetsElement(a.targetSelector, selector, selection.element),
+      )
+    : [];
   // Resolve every group's target BEFORE committing anything, and coalesce
   // groups that land on the SAME write into one commit: the snapshot is captured
   // once, so if two groups resolved to one legacy mixed write, a first
@@ -209,13 +247,12 @@ async function commitStaticSet(
       newSetBatches.push(batch);
     }
   }
-  for (const [targetWrite, batch] of byTargetWrite) {
-    await commitSetProps(selection, targetWrite, batch, selector, animations, commit);
-  }
-  // Fresh adds don't reshape existing sets, so their ids can't go stale.
-  for (const batch of newSetBatches) {
-    await addGlobalStaticSet(selection, batch, commit);
-  }
+  return [
+    ...[...byTargetWrite].map(([targetWrite, batch]) =>
+      buildSetPropsCall(selection, targetWrite, batch, selector),
+    ),
+    ...newSetBatches.map((batch) => buildGlobalStaticSetCall(selection, batch)),
+  ];
 }
 
 /**
@@ -241,11 +278,10 @@ function findGroupOwningStaticWrite(
  * the timeline (matches the manual-drag UX). The global-set instant patch applies
  * it straight to the element so the first edit shows with no soft-reload flash.
  */
-async function addGlobalStaticSet(
+function buildGlobalStaticSetCall(
   selection: DomEditSelection,
   batch: [string, number | string][],
-  commit: Commit,
-): Promise<void> {
+): CommitMutationCall {
   const numericProps: SetPatchProps = {};
   for (const [k, v] of batch) {
     if (typeof v === "number") numericProps[k as keyof SetPatchProps] = v;
@@ -254,10 +290,10 @@ async function addGlobalStaticSet(
   // selector is the bare class an id-less element yields, which would hold every
   // sibling. No one-element form means no write at all (see writeTargetSelector).
   const target = writeTargetSelector(selection);
-  if (!target) return;
-  await commit(
+  if (!target) throw new GsapEditBlockedError("no-selector");
+  return {
     selection,
-    {
+    mutation: {
       type: "add",
       targetSelector: target,
       method: "set",
@@ -265,7 +301,7 @@ async function addGlobalStaticSet(
       properties: Object.fromEntries(batch),
       global: true,
     },
-    {
+    options: {
       label: staticSetLabel(batch),
       softReload: true,
       ...(Object.keys(numericProps).length > 0
@@ -277,7 +313,7 @@ async function addGlobalStaticSet(
           }
         : {}),
     },
-  );
+  };
 }
 
 /** Convert-if-flat, then write ALL props into ONE keyframe at the playhead. */
@@ -393,11 +429,19 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
   const { selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache } = deps;
 
   const commitAnimatedProperties = useCallback(
+    // This is the single routing boundary for set, keyframe, whole-tween, and first-group writes.
+    // fallow-ignore-next-line complexity
     async (selection: DomEditSelection, props: Record<string, number | string>): Promise<void> => {
       if (!gsapCommitMutation) return;
       const propEntries = Object.entries(props);
       if (propEntries.length === 0) return;
       const primaryProp = propEntries[0]![0];
+      assertGsapEditPersisted(
+        directEditOutcomeForProperties(
+          selectedGsapAnimations,
+          new Set(propEntries.map(([property]) => property)),
+        ),
+      );
 
       const iframe = previewIframeRef.current;
       const selector = selectorFromSelection(selection);
@@ -407,6 +451,9 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
         selector,
         primaryProp,
       );
+      if (!anim && !writeTargetSelector(selection)) {
+        throw new GsapEditBlockedError("no-selector");
+      }
       // Whether the element is animated at all. A 3D edit only creates/edits
       // keyframes when it IS — a static element (no keyframes on any of its tweens)
       // gets a `tl.set`, never new keyframes (matches manual drag / resize / rotate).
@@ -461,12 +508,15 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
           return;
         }
 
-        // Existing static hold on a NON-animated element — merge the props into the
-        // same write (maybeAutoKeyframeSet no-ops when nothing else is keyframed).
-        if (anim && isInstantHold(anim)) {
-          await commitSetProps(
+        // Static element (no keyframes anywhere) — persist as a `tl.set`, never
+        // keyframes (incl. the no-animation case, which creates a fresh set).
+        // Route the complete property set through the group-aware planner even
+        // when pickBestAnimation found one existing set: a mixed X+width edit
+        // must update the position set AND create a size set atomically rather
+        // than contaminating the first set with a foreign property group.
+        if (!elementHasKeyframes) {
+          await commitStaticSet(
             selection,
-            anim,
             propEntries,
             selector,
             selectedGsapAnimations,
@@ -475,11 +525,12 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
           return;
         }
 
-        // Static element (no keyframes anywhere) — persist as a `tl.set`, never
-        // keyframes (incl. the no-animation case, which creates a fresh set).
-        if (!elementHasKeyframes) {
-          await commitStaticSet(
+        // Existing static hold on an otherwise animated element — merge the props
+        // into the same write, then auto-keyframe it against the sibling tween.
+        if (anim && isInstantHold(anim)) {
+          await commitSetProps(
             selection,
+            anim,
             propEntries,
             selector,
             selectedGsapAnimations,
@@ -498,7 +549,7 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
         // one-element form the edit is dropped rather than written onto every
         // class sibling (see writeTargetSelector).
         const newTweenTarget = writeTargetSelector(selection);
-        if (selector && newTweenTarget) {
+        if (newTweenTarget) {
           const template = selectedGsapAnimations.find((a) => !!a.keyframes);
           const tStart = template ? (resolveTweenStart(template) ?? 0) : 0;
           const tDur = template ? resolveTweenDuration(template) || 1 : 1;
@@ -528,9 +579,10 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
           );
           return;
         }
+        throw new GsapEditBlockedError("no-selector");
+      } catch (error) {
         bumpGsapCache();
-      } catch {
-        bumpGsapCache();
+        throw error;
       }
     },
     [selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache],

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

@@ -0,0 +1,215 @@
+// @vitest-environment happy-dom
+
+import React, { act, useRef, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TextAreaField } from "../components/editor/propertyPanelSections";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
+import { usePlayerStore } from "../player/store/playerStore";
+import { useAppHotkeys } from "./useAppHotkeys";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const timelineDelete = vi.fn(async () => undefined);
+const domDelete = vi.fn(async () => undefined);
+const keyframeDelete = vi.fn();
+const textCommits = vi.fn();
+let root: Root | null = null;
+
+function parentWithTextChild(): DomEditSelection {
+  const element = document.createElement("section");
+  element.id = "selected-card";
+  const child = document.createElement("span");
+  child.textContent = "Kicker";
+  element.append(child);
+  return {
+    element,
+    id: "selected-card",
+    selector: "#selected-card",
+    selectorIndex: 0,
+    label: "Selected card",
+    tagName: "section",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 320, height: 180 },
+    textContent: "Kicker",
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [
+      {
+        key: "child:0:span",
+        label: "Content",
+        value: "Kicker",
+        tagName: "span",
+        attributes: [],
+        inlineStyles: {},
+        computedStyles: {},
+        source: "child",
+        sourceChildIndex: 0,
+      },
+    ],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: false,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+function Harness() {
+  const [value, setValue] = useState("Kicker");
+  const [selectionRefreshed, setSelectionRefreshed] = useState(false);
+  const selectionRef = useRef<DomEditSelection | null>(parentWithTextChild());
+  const clearSelectionRef = useRef<() => void>(() => undefined);
+  const saveTimestampRef = useRef(0);
+  const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
+
+  useAppHotkeys({
+    handleTimelineElementDelete: timelineDelete,
+    handleTimelineElementSplit: vi.fn(async () => undefined),
+    handleDomEditElementDelete: domDelete,
+    domEditSelectionRef: selectionRef,
+    clearDomSelectionRef: clearSelectionRef,
+    editHistory: {
+      undo: vi.fn(async () => ({ ok: false })),
+      redo: vi.fn(async () => ({ ok: false })),
+      state: { undo: [], redo: [] },
+    },
+    readOptionalProjectFile: vi.fn(async () => ""),
+    readProjectFile: vi.fn(async () => ""),
+    writeProjectFile: vi.fn(async () => undefined),
+    domEditSaveTimestampRef: saveTimestampRef,
+    showToast: vi.fn(),
+    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    leftSidebarRef,
+    handleCopy: vi.fn(() => false),
+    handlePaste: vi.fn(async () => undefined),
+    handleCut: vi.fn(async () => false),
+    onResetKeyframes: vi.fn(() => false),
+    onDeleteSelectedKeyframes: keyframeDelete,
+  });
+
+  return (
+    <>
+      <TextAreaField
+        label="Content"
+        value={value}
+        onCommit={(next) => {
+          textCommits(next);
+          setValue(next);
+          // Text persistence rebuilds the selected parent's text-field model
+          // from the preview. Model that refresh: it must not transfer keyboard
+          // ownership away from the still-mounted Content editor.
+          setSelectionRefreshed(true);
+        }}
+      />
+      <button type="button" data-testid="canvas" data-selection-refreshed={selectionRefreshed}>
+        Canvas
+      </button>
+    </>
+  );
+}
+
+function setTextareaValue(textarea: HTMLTextAreaElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")?.set;
+  if (!setter) throw new Error("expected native textarea value setter");
+  setter.call(textarea, value);
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  textarea.setSelectionRange(value.length, value.length);
+}
+
+function pressBackspace(target: HTMLElement): KeyboardEvent {
+  const event = new KeyboardEvent("keydown", {
+    key: "Backspace",
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+  return event;
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  timelineDelete.mockClear();
+  domDelete.mockClear();
+  keyframeDelete.mockClear();
+  textCommits.mockClear();
+  usePlayerStore.getState().reset();
+  usePlayerStore.getState().setElements([
+    {
+      id: "selected-card",
+      tag: "section",
+      start: 0,
+      duration: 10,
+      track: 0,
+    },
+  ]);
+  usePlayerStore.getState().setSelectedElementId("selected-card");
+});
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+  vi.useRealTimers();
+});
+
+describe("useAppHotkeys text-field ownership", () => {
+  it("keeps two Backspaces in a child text editor across its scheduled save", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    act(() => root?.render(<Harness />));
+
+    const textarea = host.querySelector("textarea");
+    const canvas = host.querySelector<HTMLButtonElement>('[data-testid="canvas"]');
+    if (!textarea || !canvas) throw new Error("expected text editor and canvas target");
+
+    textarea.focus();
+    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+
+    const first = pressBackspace(textarea);
+    act(() => setTextareaValue(textarea, "Kicke"));
+    act(() => vi.advanceTimersByTime(120));
+
+    expect(first.defaultPrevented).toBe(false);
+    expect(textCommits).toHaveBeenLastCalledWith("Kicke");
+    expect(canvas.dataset.selectionRefreshed).toBe("true");
+    expect(document.activeElement).toBe(textarea);
+    expect(textarea.selectionStart).toBe(5);
+    expect(textarea.selectionEnd).toBe(5);
+
+    const second = pressBackspace(textarea);
+    act(() => setTextareaValue(textarea, "Kick"));
+    act(() => vi.advanceTimersByTime(120));
+
+    expect(second.defaultPrevented).toBe(false);
+    expect(textarea.value).toBe("Kick");
+    expect(textCommits.mock.calls).toEqual([["Kicke"], ["Kick"]]);
+    expect(document.activeElement).toBe(textarea);
+    expect(textarea.selectionStart).toBe(4);
+    expect(textarea.selectionEnd).toBe(4);
+    expect(timelineDelete).not.toHaveBeenCalled();
+    expect(domDelete).not.toHaveBeenCalled();
+    expect(keyframeDelete).not.toHaveBeenCalled();
+
+    canvas.focus();
+    const canvasDelete = pressBackspace(canvas);
+
+    expect(canvasDelete.defaultPrevented).toBe(true);
+    expect(timelineDelete).toHaveBeenCalledTimes(1);
+    expect(domDelete).not.toHaveBeenCalled();
+    expect(keyframeDelete).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useDomEditSession.test.tsx

@@ -57,9 +57,9 @@ const recordResolverParity = vi.fn<(...args: unknown[]) => Promise<void>>(async
 const capturedOnReorderShadow: { fn: ((targets: string[]) => void) | undefined } = {
   fn: undefined,
 };
-
 const domEditSelectionRef: { current: DomEditSelection | null } = { current: null };
 const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
+
 vi.mock("../utils/sdkResolverShadow", () => ({
   runResolverShadow: vi.fn(),
   recordResolverParity: (...args: unknown[]) => recordResolverParity(...args),

package/src/hooks/useDomEditSession.ts

@@ -537,11 +537,11 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     commitAnimatedProperty,
     commitAnimatedProperties,
     handleSetArcPath,
-    handleUpdateSegmentEase,
     handleUpdateArcSegment,
     handleUnroll,
     invalidateGsapCache: bumpGsapCache,

package/src/hooks/useDomGeometryCommits.test.tsx

@@ -0,0 +1,61 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import {
+  applyStudioBoxSize,
+  applyStudioPathOffset,
+  applyStudioRotation,
+  readStudioBoxSize,
+  readStudioPathOffset,
+  readStudioRotation,
+} from "../components/editor/manualEdits";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("useDomGeometryCommits rollback", () => {
+  it("restores every optimistic geometry mutation when persistence rejects", async () => {
+    const element = document.createElement("div");
+    element.id = "box";
+    document.body.append(element);
+    applyStudioPathOffset(element, { x: 10, y: 20 });
+    applyStudioBoxSize(element, { width: 100, height: 80 });
+    applyStudioRotation(element, { angle: 15 });
+    const selection = {
+      id: "box",
+      selector: "#box",
+      element,
+    } as unknown as DomEditSelection;
+    const failure = new Error("save failed");
+    const commitPositionPatchToHtml = vi.fn().mockRejectedValue(failure);
+    let commits: ReturnType<typeof useDomGeometryCommits> | null = null;
+    const host = document.createElement("div");
+    const root = createRoot(host);
+
+    function Probe() {
+      commits = useDomGeometryCommits({
+        previewIframeRef: { current: null },
+        showToast: vi.fn(),
+        commitPositionPatchToHtml,
+      });
+      return null;
+    }
+
+    act(() => root.render(<Probe />));
+    await expect(commits!.handleDomPathOffsetCommit(selection, { x: 50, y: 60 })).rejects.toBe(
+      failure,
+    );
+    await expect(
+      commits!.handleDomBoxSizeCommit(selection, { width: 200, height: 160 }, { x: 30, y: 40 }),
+    ).rejects.toBe(failure);
+    await expect(commits!.handleDomRotationCommit(selection, { angle: 45 })).rejects.toBe(failure);
+
+    expect(readStudioPathOffset(element)).toEqual({ x: 10, y: 20 });
+    expect(readStudioBoxSize(element)).toEqual({ width: 100, height: 80 });
+    expect(readStudioRotation(element)).toEqual({ angle: 15 });
+    act(() => root.unmount());
+  });
+});

package/src/hooks/useDomGeometryCommits.ts

@@ -4,6 +4,12 @@ import {
   applyStudioPathOffset,
   applyStudioBoxSize,
   applyStudioRotation,
+  captureStudioPathOffset,
+  captureStudioBoxSize,
+  captureStudioRotation,
+  restoreStudioPathOffset,
+  restoreStudioBoxSize,
+  restoreStudioRotation,
   clearStudioPathOffset,
   clearStudioBoxSize,
   clearStudioRotation,
@@ -51,10 +57,14 @@ export function useDomGeometryCommits({
         showToast(error.message, "error");
         return Promise.reject(error);
       }
+      const before = captureStudioPathOffset(selection.element);
       applyStudioPathOffset(selection.element, next);
       return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
         label: "Move layer",
         coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
+      }).catch((error) => {
+        restoreStudioPathOffset(selection.element, before);
+        throw error;
       });
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast],
@@ -71,6 +81,8 @@ export function useDomGeometryCommits({
         showToast(error.message, "error");
         return Promise.reject(error);
       }
+      const beforeSize = captureStudioBoxSize(selection.element);
+      const beforeOffset = offset ? captureStudioPathOffset(selection.element) : null;
       applyStudioBoxSize(selection.element, next);
       // Anchored-corner resize (NW/NE/SW) also moves the element to keep the
       // opposite corner fixed. Apply the offset and emit BOTH patch sets in a
@@ -86,6 +98,10 @@ export function useDomGeometryCommits({
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
+      }).catch((error) => {
+        restoreStudioBoxSize(selection.element, beforeSize);
+        if (beforeOffset) restoreStudioPathOffset(selection.element, beforeOffset);
+        throw error;
       });
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast],
@@ -98,10 +114,14 @@ export function useDomGeometryCommits({
         showToast(error.message, "error");
         return Promise.reject(error);
       }
+      const before = captureStudioRotation(selection.element);
       applyStudioRotation(selection.element, next);
       return commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
         label: "Rotate layer",
         coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
+      }).catch((error) => {
+        restoreStudioRotation(selection.element, before);
+        throw error;
       });
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast],