hyperframes 0.8.103 → 0.8.104

package/dist/studio/index.js

@@ -31840,15 +31840,6 @@ function applyStudioRotation(element, rotation) {
     composeStudioRotationValue(element, `var(${STUDIO_ROTATION_PROP}, 0deg)`)
   );
 }
-function applyStudioRotationDraft(element, rotation) {
-  promoteInlineForTransform(element);
-  writeStudioRotationVars(element, rotation, { updateBase: false });
-  element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
-  element.style.setProperty(
-    "rotate",
-    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`)
-  );
-}
 
 // src/components/editor/manualEditsSeekReapply.ts
 function queryStudioElements(doc, attr) {
@@ -31986,6 +31977,8 @@ function captureStudioBoxSize(element) {
 function captureStudioRotation(element) {
   return {
     rotate: element.style.getPropertyValue("rotate"),
+    transform: element.style.getPropertyValue("transform"),
+    display: element.style.getPropertyValue("display"),
     transformOrigin: element.style.getPropertyValue("transform-origin"),
     studioRotation: element.style.getPropertyValue(STUDIO_ROTATION_PROP),
     marker: element.getAttribute(STUDIO_ROTATION_ATTR),
@@ -32381,6 +32374,29 @@ function installStudioManualEditSeekReapply(win, apply) {
 }
 
 // src/hooks/draggedGsapPosition.ts
+var cssValue = (style, prop) => {
+  const value = style.getPropertyValue(prop).trim();
+  return value === "none" ? "" : value;
+};
+function readCssRotation(element, withRotate = true) {
+  const view = element.ownerDocument.defaultView;
+  if (!view) return 0;
+  const style = view.getComputedStyle(element);
+  const rotate2 = withRotate ? cssValue(style, "rotate") : "";
+  const scale = cssValue(style, "scale");
+  const transform = cssValue(style, "transform");
+  const angle = (list) => {
+    if (!list) return 0;
+    const m = new view.DOMMatrix(list);
+    return Math.atan2(m.b, m.a) * 180 / Math.PI;
+  };
+  const folded = [rotate2 && `rotate(${rotate2})`, scale && `scale(${scale.split(/\s+/).join(",")})`];
+  try {
+    return angle([...folded, transform].join(" ").trim());
+  } catch {
+    return angle(transform);
+  }
+}
 function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
   const rotStyle = element.style.getPropertyValue("--hf-studio-rotation");
   const rotDeg = Number.parseFloat(rotStyle) || 0;
@@ -32407,6 +32423,144 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
 
 // src/hooks/gsapRuntimeKeyframes.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
+
+// src/components/editor/manualEditsDomPatches.ts
+function collectInlineStyleOps(element, properties, ops) {
+  for (const prop of properties) {
+    const val = element.style.getPropertyValue(prop);
+    if (val) ops.push({ type: "inline-style", property: prop, value: val });
+  }
+}
+function collectAttributeOps(element, attrNames, ops) {
+  for (const attr of attrNames) {
+    const val = element.getAttribute(attr);
+    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
+  }
+}
+function appendTransformDisplayOps(element, ops) {
+  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
+  if (val !== null) {
+    ops.push({ type: "inline-style", property: "display", value: val || null });
+    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
+  }
+}
+function buildPathOffsetPatches(element) {
+  const ops = [];
+  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
+  const inlineTranslate = element.style.getPropertyValue("translate");
+  const hasOffsetVars = element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) || element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
+  const translateValue = inlineTranslate && inlineTranslate !== "none" ? inlineTranslate : hasOffsetVars ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)` : null;
+  if (translateValue) {
+    ops.push({ type: "inline-style", property: "translate", value: translateValue });
+  }
+  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
+  collectAttributeOps(
+    element,
+    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
+    ops
+  );
+  collectInlineStyleOps(element, ["display"], ops);
+  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
+  return ops;
+}
+function buildClearPathOffsetPatches(element) {
+  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+  const ops = [
+    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
+    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
+    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
+    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+var BOX_SIZE_STYLE_PROPS = [
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "flex-basis",
+  "flex-grow",
+  "flex-shrink",
+  "box-sizing",
+  "scale",
+  "transform-origin",
+  "display"
+];
+var BOX_SIZE_ORIG_ATTRS = [
+  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
+  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
+  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
+  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
+  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
+  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
+  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
+  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
+  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
+  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
+  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
+  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
+  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
+  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
+];
+function buildBoxSizePatches(element) {
+  const ops = [];
+  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
+  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
+  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
+  collectAttributeOps(
+    element,
+    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
+    ops
+  );
+  return ops;
+}
+function buildClearBoxSizePatches(element) {
+  const ops = [
+    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
+    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
+    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
+  ];
+  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
+    const origVal = element.getAttribute(attrName);
+    if (origVal !== null && styleProp) {
+      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
+    }
+    ops.push({ type: "attribute", property: attrName, value: null });
+  }
+  return ops;
+}
+function buildClearRotationPatches(element) {
+  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  const origRotationTransformOrigin = element.getAttribute(
+    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
+  );
+  const ops = [
+    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
+    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
+    {
+      type: "inline-style",
+      property: "transform-origin",
+      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
+    },
+    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+
+// src/hooks/gsapRuntimeKeyframes.ts
 var FLAT_SKIP_KEYS = /* @__PURE__ */ new Set([
   "ease",
   "duration",
@@ -32621,9 +32775,32 @@ function gsapWritesChannels(el, channels) {
     )
   );
 }
+var ROTATION_CHANNELS = [
+  ...["rotation", "rotationX", "rotationY", "rotationZ"],
+  ...["rotate", "rotateX", "rotateY", "rotateZ"]
+];
+var gsapRendersTransform = (el) => !!el._gsap?.renderTransform;
 function gsapWritesPosition(el) {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, MOVE_CHANNELS);
+}
+function gsapWritesRotation(el) {
+  return gsapRendersTransform(el) || gsapWritesChannels(el, ROTATION_CHANNELS);
+}
+function gsapHoldsTranslate(el) {
   const cache2 = el._gsap;
-  return !!cache2?.renderTransform || gsapWritesChannels(el, MOVE_CHANNELS);
+  return ["x", "y", "xPercent", "yPercent"].some(
+    (key2) => !!Number.parseFloat(String(cache2?.[key2]))
+  );
+}
+var BOX_CHANNELS = [
+  ...BOX_SIZE_STYLE_PROPS.map(
+    (prop) => prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+  ),
+  "scaleX",
+  "scaleY"
+];
+function gsapWritesBox(el) {
+  return gsapWritesPosition(el) || gsapWritesChannels(el, BOX_CHANNELS);
 }
 function elementHasNonHoldTween(el, channels) {
   const win = el.ownerDocument.defaultView;
@@ -32760,8 +32937,11 @@ function translatePatch(p) {
 function writeTranslatePx(el, p) {
   el.style.setProperty("translate", formatTranslatePx(p));
 }
-function readMoveOffset(el) {
-  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+function readMoveOffset(el, plainTranslate = !gsapWritesPosition(el)) {
+  return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
+}
+function readShownRotation(el) {
+  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
 }
 
 // src/components/editor/manualOffsetDrag.ts
@@ -32778,17 +32958,6 @@ function applyOffsetDragDraftViaGsap(element, offset, baseGsap) {
   gsap3.set(element, { x: newX, y: newY });
   return true;
 }
-function applyRotationDraftViaGsap(element, angle) {
-  const gsap3 = getOffsetDragGsap(element);
-  if (!gsap3) return false;
-  element.style.setProperty("rotate", "none");
-  gsap3.set(element, { rotation: angle });
-  return true;
-}
-function readGsapRotation(element) {
-  const gsap3 = getOffsetDragGsap(element);
-  return gsap3 ? Number(gsap3.getProperty(element, "rotation")) || 0 : 0;
-}
 var DEFAULT_OFFSET_PROBE_PX = 100;
 var MIN_PROBE_VECTOR_LENGTH_PX = 0.01;
 var MIN_MATRIX_DETERMINANT = 1e-6;
@@ -32936,7 +33105,8 @@ function resolveManualOffsetForPointerDelta(input) {
   };
 }
 function createManualOffsetDragMember(input) {
-  const plainTranslate = !!input.gesture && !gsapWritesPosition(input.element);
+  const gsapOwns = input.gesture === "resize" ? gsapWritesBox : gsapWritesPosition;
+  const plainTranslate = !!input.gesture && !gsapOwns(input.element);
   const initialOffset = plainTranslate ? readTranslatePx(input.element) : readAppliedStudioPathOffset(input.element);
   if (!finitePoint(initialOffset))
     return { ok: false, reason: UNREADABLE_TRANSLATE, selection: input.selection };
@@ -33102,6 +33272,94 @@ function resumeGsapTimelines(element) {
   win.__player?.seek?.(t);
 }
 
+// src/components/editor/rotationDraft.ts
+function lastRuleTransform(element) {
+  let value = "";
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules = [];
+    try {
+      rules = Array.from(sheet.cssRules);
+    } catch {
+    }
+    for (const rule of rules) {
+      const declared = rule.style?.getPropertyValue("transform");
+      if (declared && element.matches(rule.selectorText)) value = declared;
+    }
+  }
+  return value;
+}
+function translatingTransform(element) {
+  const view = element.ownerDocument.defaultView;
+  const computed = view?.getComputedStyle(element).transform ?? "none";
+  const m = computed === "none" ? null : new view.DOMMatrix(computed);
+  if (!m || m.m41 === 0 && m.m42 === 0) return "";
+  const value = element.style.getPropertyValue("transform") || lastRuleTransform(element);
+  return value === "none" ? "" : value;
+}
+var TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
+var OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;
+function readCssRotationTarget(element) {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const inline = style?.display === "inline";
+  const transform = translatingTransform(element);
+  if (!transform) {
+    const share2 = readCssRotation(element, false);
+    return { property: "rotate", before: "", after: "", share: share2, sign: 1, inline };
+  }
+  const parts = splitTopLevelWhitespace(transform);
+  const lead = parts.findIndex((part) => !TRANSLATE.test(part));
+  const split = lead < 0 ? parts.length : lead;
+  const rest = parts.slice(split);
+  if (OWN_TURN.test(rest[0] ?? "")) rest.shift();
+  const [before, after] = [parts.slice(0, split).join(" "), rest.join(" ")];
+  const [sx = 1, sy = sx] = splitTopLevelWhitespace(style?.getPropertyValue("scale") ?? "").map(
+    Number.parseFloat
+  );
+  const inlineStyle = element.style;
+  const saved2 = [
+    inlineStyle.getPropertyValue("transform"),
+    inlineStyle.getPropertyPriority("transform")
+  ];
+  inlineStyle.setProperty("transform", `${before} ${after}`.trim() || "none");
+  const share = readCssRotation(element);
+  inlineStyle.setProperty("transform", saved2[0] ?? "", saved2[1] ?? "");
+  return { property: "transform", before, after, share, sign: sx * sy < 0 ? -1 : 1, inline };
+}
+function applyCssRotation(element, angle, target = readCssRotationTarget(element)) {
+  const turn = `${roundTo3(target.sign * (angle - target.share))}deg`;
+  const value = target.property === "rotate" ? turn : [target.before, `rotate(${turn})`, target.after].filter(Boolean).join(" ");
+  const patches = [
+    { type: "inline-style", property: target.property, value }
+  ];
+  if (target.inline) {
+    patches.unshift({ type: "inline-style", property: "display", value: "inline-block" });
+  }
+  for (const patch of patches) element.style.setProperty(patch.property, patch.value);
+  return patches;
+}
+function restorePlainRotation(element, snapshot3) {
+  restoreStudioRotation(element, snapshot3);
+  element.style.setProperty("transform", snapshot3.transform);
+  element.style.setProperty("display", snapshot3.display);
+}
+function applyRotationDraft(element, angle, plain) {
+  if (plain) return void applyCssRotation(element, angle, plain);
+  element.style.setProperty("rotate", "none");
+  getOffsetDragGsap(element)?.set(element, { rotation: angle });
+}
+function restoreRotationDraft(element, angle, snapshot3, plain) {
+  if (plain) return restorePlainRotation(element, snapshot3);
+  getOffsetDragGsap(element)?.set(element, {
+    rotation: angle - (Number.parseFloat(snapshot3.studioRotation) || 0)
+  });
+  restoreStudioRotation(element, snapshot3);
+}
+function readRotationBase(element, plain) {
+  if (plain) return readCssRotation(element);
+  const gsapRotation = Number(getOffsetDragGsap(element)?.getProperty(element, "rotation") ?? 0);
+  return gsapRotation + readStudioRotation(element).angle;
+}
+
 // src/components/editor/domEditResizeLocal.ts
 var MIN_RESIZE_LOCAL_PX = 1;
 var DEGENERATE_START_DIST_PX = 3;
@@ -33215,27 +33473,6 @@ function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRe
   };
 }
 
-// src/utils/elementGsap.ts
-function gsapOf(element) {
-  return element.ownerDocument.defaultView?.gsap;
-}
-function setElementGsapPosition(element, x, y) {
-  const gsap3 = gsapOf(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { x, y });
-  return true;
-}
-function setElementGsapScale(element, x, y) {
-  const gsap3 = gsapOf(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { scaleX: x, scaleY: y });
-  return true;
-}
-function readElementGsapNumber(element, prop) {
-  const value = Number(gsapOf(element)?.getProperty?.(element, prop));
-  return Number.isFinite(value) ? value : null;
-}
-
 // src/components/editor/snapEngine.ts
 var SNAP_THRESHOLD_PX = 6;
 var SNAP_ENGAGE_TRAVEL_PX = 4;
@@ -33806,18 +34043,6 @@ function startGesture(kind, e, opts, options) {
   const rawContentScaleY = rect.height / (rect.editScaleY * actualHeight);
   const contentScaleX = Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY = Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
-  let resizeAnchor;
-  if (kind === "resize") {
-    const startBcr = sel.element.getBoundingClientRect();
-    resizeAnchor = {
-      anchorX: startBcr.x,
-      anchorY: startBcr.y,
-      baseGsapX: readElementGsapNumber(sel.element, "x") ?? 0,
-      baseGsapY: readElementGsapNumber(sel.element, "y") ?? 0,
-      pinX: 0,
-      pinY: 0
-    };
-  }
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken;
   let pathOffsetMember;
@@ -33845,12 +34070,14 @@ function startGesture(kind, e, opts, options) {
         key: selectionCacheKey(sel),
         selection: sel,
         element: sel.element,
-        rect
+        rect,
+        gesture: "resize"
       });
       if (result.ok) {
         pathOffsetMember = result.member;
         initialPathOffset = result.member.initialPathOffset;
         manualEditDragToken = result.member.gestureToken;
+        if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
         manualEditDragToken = beginStudioManualEditGesture(sel.element);
       }
@@ -33858,8 +34085,9 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken = beginStudioManualEditGesture(sel.element);
     }
   }
-  const gsapRotation = pathOffsetMember?.plainTranslate ? 0 : readGsapRotation(sel.element);
-  const rotation = { angle: gsapRotation + readStudioRotation(sel.element).angle };
+  const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
+  const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
+  const rotation = { angle: readRotationBase(sel.element, plain) };
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
@@ -33897,11 +34125,11 @@ function startGesture(kind, e, opts, options) {
     actualWidth,
     actualHeight,
     actualRotation: rotation.angle,
+    plainRotation,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     contentScaleX,
     contentScaleY,
-    resizeAnchor,
     manualEditDragToken,
     snapContext,
     resizeHandle: kind === "resize" ? options?.resizeHandle ?? "se" : void 0,
@@ -34156,9 +34384,7 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualAngle: g.actualRotation,
         snap: e.shiftKey
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
-        applyStudioRotationDraft(sel.element, rotated);
-      }
+      applyRotationDraft(sel.element, rotated.angle, g.plainRotation);
       return;
     }
     if (g.kind === "drag") {
@@ -34293,7 +34519,8 @@ function createDomEditOverlayGestureHandlers(opts) {
       );
       const updates = groupG.members.map((member) => ({
         selection: member.selection,
-        next: applyManualOffsetDragCommit(member, dx, dy)
+        next: applyManualOffsetDragCommit(member, dx, dy),
+        plainTranslate: member.plainTranslate
       }));
       logDrag("drop", {
         pointer: `${Math.round(rawDx)},${Math.round(rawDy)}`,
@@ -34366,20 +34593,20 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualAngle: g.actualRotation,
         snap: e.shiftKey
       });
-      const restoreRotation = () => {
-        if (!applyRotationDraftViaGsap(sel.element, g.actualRotation)) {
-          restoreStudioRotation(sel.element, g.initialRotation);
-        }
-      };
+      const restoreRotation = () => restoreRotationDraft(
+        sel.element,
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotation !== null
+      );
       if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
       }
-      if (!applyRotationDraftViaGsap(sel.element, finalRotation.angle)) {
-        applyStudioRotation(sel.element, finalRotation);
-      }
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation)).catch((error) => {
+      applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
+      const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
+      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit)).catch((error) => {
         logGestureCommitFailure("rotate commit failed", error);
         if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           restoreRotation();
@@ -34408,7 +34635,10 @@ function createDomEditOverlayGestureHandlers(opts) {
         box.style.top = `${nextBoxTop}px`;
       }
       void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, { altKey: e.altKey })
+        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+          altKey: e.altKey,
+          plainTranslate: g.pathOffsetMember.plainTranslate
+        })
       ).catch(() => {
         if (g.pathOffsetMember?.gestureToken && isStudioManualEditGestureCurrent(sel.element, g.pathOffsetMember.gestureToken))
           restoreStudioPathOffset(sel.element, g.initialPathOffset);
@@ -34466,11 +34696,12 @@ function createDomEditOverlayGestureHandlers(opts) {
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {
-      applyRotationDraftViaGsap(
+      restoreRotationDraft(
         sel.element,
-        g.actualRotation - (Number.parseFloat(g.initialRotation.studioRotation) || 0)
+        g.actualRotation,
+        g.initialRotation,
+        g.plainRotation !== null
       );
-      restoreStudioRotation(sel.element, g.initialRotation);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
     }
     opts.blockedMoveRef.current = null;
@@ -34549,10 +34780,13 @@ function useDomEditNudge(params) {
     if (session.timer) clearTimeout(session.timer);
     const updates = session.members.map((member) => ({
       selection: member.selection,
-      next: applyManualOffsetNudgeCommit(member, session.accum)
+      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);
+    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)) {
@@ -36340,7 +36574,7 @@ function useInlineTextEdit({
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        cancel();
+        commit();
       }
     };
     const onBlur = () => commit();
@@ -36368,7 +36602,7 @@ function useInlineTextEdit({
       element.removeEventListener("dragover", onDragOver);
       element.removeEventListener("drop", onDrop);
     };
-  }, [session, commit, cancel]);
+  }, [session, commit]);
   const commitRef = useRef66(commit);
   commitRef.current = commit;
   useEffect46(() => () => commitRef.current(), []);
@@ -42566,7 +42800,6 @@ function getAnimationsForElement(animations, target, element) {
 
 // src/hooks/gsapRuntimeBridge.ts
 var POSITION_CHANNEL_SET = new Set(POSITION_CHANNELS);
-var ROTATION_CHANNELS = ["rotation", "rotationX", "rotationY", "rotationZ"];
 var ROTATION_CHANNEL_SET = new Set(ROTATION_CHANNELS);
 async function resolveGroupTween(group, animations, selection, commitMutation, fetchFallbackAnimations) {
   const groupAnims = animations.filter((a) => a.propertyGroup === group);
@@ -48023,14 +48256,16 @@ function createTransformCommitHandlers({
       "This element's position can't be edited here yet \u2014 it is driven by its animation"
     ))
       return;
-    const current = readMoveOffset(element.element);
+    const plainTranslate = !gsapWritesPosition(element.element);
+    const current = readMoveOffset(element.element, plainTranslate);
     if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
       return void showToast?.(UNREADABLE_TRANSLATE);
     await Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y
-      })
+      onSetManualOffset(
+        element,
+        { x: axis === "x" ? parsed : current.x, y: axis === "y" ? parsed : current.y },
+        { plainTranslate }
+      )
     );
   };
   const commitManualSize = async (axis, nextValue) => {
@@ -65119,7 +65354,7 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const manualSize = readStudioBoxSize(element.element);
   const resolvedWidth = manualSize.width > 0 ? manualSize.width : parsePxMetricValue(styles.width ?? "") ?? element.boundingBox.width;
   const resolvedHeight = manualSize.height > 0 ? manualSize.height : parsePxMetricValue(styles.height ?? "") ?? element.boundingBox.height;
-  const manualRotation = readStudioRotation(element.element);
+  const manualRotation = readShownRotation(element.element);
   const elStart = Number.parseFloat(element?.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(element?.dataAttributes?.duration ?? "1") || 0;
   const currentPct = elDuration > 0 ? (currentTime - elStart) / elDuration * 100 : 0;
@@ -74448,16 +74683,26 @@ function applyElementPositionOffset(el, gestureOffset) {
 }
 
 // src/hooks/elementOffsetStager.ts
+var GSAP_TOOK_OVER = "The animation took over this layer's position during the move, so it was not saved.";
 var ELEMENT_OFFSET_REFUSED = {
   anchored: "This layer is anchored from its right or bottom edge. Move it in the Code tab.",
   percent: "This layer's position is set in percent. Move it in the Code tab."
 };
+function gsapOf(el) {
+  return el.ownerDocument.defaultView?.gsap;
+}
 function settleGsapDraftAtGestureStart(el) {
-  const gsap3 = el.ownerDocument.defaultView?.gsap;
+  const gsap3 = gsapOf(el);
   const x = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "");
   const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
   if (gsap3 && Number.isFinite(x) && Number.isFinite(y)) gsap3.set(el, { x, y });
 }
+function refuseGsapTakeover(el, showToast) {
+  if (!gsapHoldsTranslate(el)) return;
+  gsapOf(el)?.set(el, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+  showToast(GSAP_TOOK_OVER, "error");
+  throw markStudioSaveErrorAlreadyToasted(new Error(GSAP_TOOK_OVER));
+}
 var plainMoveCounter = 0;
 function stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey) {
   const style = selection.element.style;
@@ -74475,10 +74720,11 @@ function stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesc
   });
   return { save, rollback };
 }
-function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPreview }, selection, next, coalesceKey) {
+function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPreview }, selection, next, plainTranslate, coalesceKey) {
   const el = selection.element;
   if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => void 0 };
-  if (!gsapWritesPosition(el)) {
+  if (plainTranslate) {
+    refuseGsapTakeover(el, showToast);
     return stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey);
   }
   const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
@@ -74504,159 +74750,27 @@ function stageElementOffset({ commitPositionPatchToHtml, showToast, readOnlyPrev
   return { save, rollback };
 }
 
-// src/components/editor/manualEditsDomPatches.ts
-function collectInlineStyleOps(element, properties, ops) {
-  for (const prop of properties) {
-    const val = element.style.getPropertyValue(prop);
-    if (val) ops.push({ type: "inline-style", property: prop, value: val });
-  }
-}
-function collectAttributeOps(element, attrNames, ops) {
-  for (const attr of attrNames) {
-    const val = element.getAttribute(attr);
-    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
-  }
-}
-function appendTransformDisplayOps(element, ops) {
-  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
-  if (val !== null) {
-    ops.push({ type: "inline-style", property: "display", value: val || null });
-    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
-  }
-}
-function buildPathOffsetPatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
-  const inlineTranslate = element.style.getPropertyValue("translate");
-  const hasOffsetVars = element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) || element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-  const translateValue = inlineTranslate && inlineTranslate !== "none" ? inlineTranslate : hasOffsetVars ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)` : null;
-  if (translateValue) {
-    ops.push({ type: "inline-style", property: "translate", value: translateValue });
-  }
-  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
-    ops
-  );
-  collectInlineStyleOps(element, ["display"], ops);
-  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
-  return ops;
-}
-function buildClearPathOffsetPatches(element) {
-  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
-  const ops = [
-    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
-    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
-    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
-    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
-}
-var BOX_SIZE_STYLE_PROPS = [
-  "width",
-  "height",
-  "min-width",
-  "min-height",
-  "max-width",
-  "max-height",
-  "flex-basis",
-  "flex-grow",
-  "flex-shrink",
-  "box-sizing",
-  "scale",
-  "transform-origin",
-  "display"
-];
-var BOX_SIZE_ORIG_ATTRS = [
-  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
-  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
-  // Records a measurement rather than a style, so it restores nothing.
-  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
-  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
-  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
-  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
-  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
-  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
-  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
-  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
-  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
-  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
-  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
-  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
-  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
-  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
-];
-function buildBoxSizePatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
-  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
-    ops
-  );
-  return ops;
-}
-function buildClearBoxSizePatches(element) {
-  const ops = [
-    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
-    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
-    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
-  ];
-  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
-    const origVal = element.getAttribute(attrName);
-    if (origVal !== null && styleProp) {
-      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
+// src/hooks/plainRotation.ts
+var plainRotateCounter = 0;
+function savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next) {
+  if (readOnlyPreview) return Promise.resolve();
+  const { element } = selection;
+  const before = captureStudioRotation(element);
+  const patches = element.hasAttribute(STUDIO_ROTATION_ATTR) ? buildClearRotationPatches(element) : [];
+  if (patches.length) clearStudioRotation(element);
+  const drawn = applyCssRotation(element, next.angle, patches.length ? void 0 : next.plain);
+  patches.push(...drawn);
+  const turn = drawn.at(-1);
+  return commitPositionPatchToHtml(selection, patches, {
+    label: "Rotate layer",
+    coalesceKey: `rotate:${++plainRotateCounter}`,
+    coalesceMs: Number.POSITIVE_INFINITY
+  }).catch((error) => {
+    if (element.style.getPropertyValue(turn.property) === turn.value) {
+      restorePlainRotation(element, before);
     }
-    ops.push({ type: "attribute", property: attrName, value: null });
-  }
-  return ops;
-}
-var ROTATION_STYLE_PROPS = [
-  STUDIO_ROTATION_PROP,
-  "rotate",
-  "transform-origin",
-  "display"
-];
-var ROTATION_ORIG_ATTRS = [
-  STUDIO_ORIGINAL_ROTATE_ATTR,
-  STUDIO_ORIGINAL_INLINE_ROTATE_ATTR,
-  STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR,
-  STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR
-];
-function buildRotationPatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, ROTATION_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_ROTATION_ATTR, value: "true" });
-  collectAttributeOps(element, ROTATION_ORIG_ATTRS, ops);
-  return ops;
-}
-function buildClearRotationPatches(element) {
-  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
-  const origRotationTransformOrigin = element.getAttribute(
-    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
-  );
-  const ops = [
-    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
-    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
-    {
-      type: "inline-style",
-      property: "transform-origin",
-      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
-    },
-    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
+    throw error;
+  });
 }
 
 // src/hooks/gsapTargetCache.ts
@@ -74722,10 +74836,11 @@ function useDomGeometryCommits({
   readOnlyPreview
 }) {
   const stageElementPositionOffset = useCallback125(
-    (selection, next, coalesceKey) => stageElementOffset(
+    (selection, next, plainTranslate, coalesceKey) => stageElementOffset(
       { commitPositionPatchToHtml, showToast, readOnlyPreview },
       selection,
       next,
+      plainTranslate,
       coalesceKey
     ),
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
@@ -74748,49 +74863,36 @@ function useDomGeometryCommits({
     [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
   );
   const handleDomBoxSizeCommit = useCallback125(
-    (selection, next, offset) => {
+    (selection, next, offset, restore) => {
       if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      const beforeSize = captureStudioBoxSize(selection.element);
-      const beforeOffset = offset ? captureStudioPathOffset(selection.element) : null;
-      const stageCrop = prepareCropResize(selection.element);
-      applyStudioBoxSize(selection.element, next);
+      const element = selection.element;
+      const beforeSize = captureStudioBoxSize(element);
+      const beforeTranslate = element.style.getPropertyValue("translate");
+      const stageCrop = prepareCropResize(element);
+      applyStudioBoxSize(element, next);
       const crop = stageCrop();
-      const patches = buildBoxSizePatches(selection.element);
+      const patches = buildBoxSizePatches(element);
       if (crop) patches.push(crop.patch);
       if (offset) {
-        applyStudioPathOffset(selection.element, offset);
-        patches.push(...buildPathOffsetPatches(selection.element));
+        writeTranslatePx(element, offset);
+        patches.push(translatePatch(offset));
       }
       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);
+        restoreStudioBoxSize(element, beforeSize);
+        if (offset) element.style.setProperty("translate", beforeTranslate);
         crop?.revert();
+        restore?.();
         throw error;
       });
     },
-    [commitPositionPatchToHtml, previewIframeRef, showToast, readOnlyPreview]
+    [commitPositionPatchToHtml, readOnlyPreview]
   );
   const handleDomRotationCommit = useCallback125(
-    (selection, next) => {
-      if (readOnlyPreview) return Promise.resolve();
-      const gsapFallback = rejectGsapCssFallback(selection, previewIframeRef, showToast);
-      if (gsapFallback) return gsapFallback;
-      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, readOnlyPreview]
+    (selection, next) => savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next),
+    [commitPositionPatchToHtml, readOnlyPreview]
   );
   const handleDomManualEditsReset = useCallback125(
     (selection) => {
@@ -77239,6 +77341,23 @@ function useDomEditWiring(params) {
 // src/hooks/useGsapAwareEditing.ts
 import { useCallback as useCallback139 } from "react";
 
+// src/utils/elementGsap.ts
+function gsapOf2(element) {
+  return element.ownerDocument.defaultView?.gsap;
+}
+function setElementGsapPosition(element, x, y) {
+  const gsap3 = gsapOf2(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { x, y });
+  return true;
+}
+function setElementGsapScale(element, x, y) {
+  const gsap3 = gsapOf2(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
+
 // src/hooks/gsapResizePreflight.ts
 function resizeRoute(animations, fetchedAnimations) {
   const allKnownAnimations = [...animations, ...fetchedAnimations];
@@ -77943,6 +78062,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  handleDomRotationCommit,
   commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
@@ -77958,8 +78078,8 @@ function useGsapAwareEditing({
   );
   const handleGsapAwarePathOffsetCommit = useCallback139(
     async (selection, next, modifiers) => {
-      if (!gsapWritesPosition(selection.element))
-        return stageElementPositionOffset(selection, next).save();
+      if (modifiers?.plainTranslate ?? !gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next, true).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -77973,7 +78093,7 @@ function useGsapAwareEditing({
             makeFetchFallback(selection),
             modifiers
           );
-          await saveMove(outcome, () => stageElementPositionOffset(selection, next).save());
+          await saveMove(outcome, () => stageElementPositionOffset(selection, next, false).save());
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
@@ -78022,10 +78142,13 @@ function useGsapAwareEditing({
         return Promise.resolve();
       };
       const preflightAnimations = /* @__PURE__ */ new Map();
-      const offsetMembers = /* @__PURE__ */ new Set();
+      const offsetMembers = /* @__PURE__ */ new Map();
       const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection }) => {
-          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
+        updates.map(async ({ selection, plainTranslate }) => {
+          if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
+            refuseGsapTakeover(selection.element, showToast);
+            return void offsetMembers.set(selection, true);
+          }
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -78037,7 +78160,7 @@ function useGsapAwareEditing({
             void 0,
             { preflightOnly: true, group: true }
           );
-          if (outcome.status === "element-offset") offsetMembers.add(selection);
+          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
           assertGsapEditPersisted(outcome);
         })
       );
@@ -78056,8 +78179,9 @@ function useGsapAwareEditing({
       );
       for (const [index, { selection, next }] of updates.entries()) {
         renderOnCommit = index === lastScriptWrite;
-        if (offsetMembers.has(selection)) {
-          await stageElementPositionOffset(selection, next, coalesceKey).save();
+        const plain = offsetMembers.get(selection);
+        if (plain !== void 0) {
+          await stageElementPositionOffset(selection, next, plain, coalesceKey).save();
           continue;
         }
         try {
@@ -78094,11 +78218,14 @@ function useGsapAwareEditing({
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
-      stageElementPositionOffset
+      stageElementPositionOffset,
+      showToast
     ]
   );
   const handleGsapAwareBoxSizeCommit = useCallback139(
     async (selection, next, offset, restore = () => void 0) => {
+      if (!gsapWritesBox(selection.element))
+        return handleDomBoxSizeCommit(selection, next, offset, restore);
       let targetAnimations;
       try {
         const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -78169,7 +78296,8 @@ function useGsapAwareEditing({
                   makeFetchFallback(selection)
                 );
                 await saveMove(dragOutcome, async () => {
-                  anchorMove = stageElementPositionOffset(selection, offset, coalesceKey);
+                  const plain = !gsapWritesPosition(selection.element);
+                  anchorMove = stageElementPositionOffset(selection, offset, plain, coalesceKey);
                 });
               }
               logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
@@ -78179,13 +78307,7 @@ function useGsapAwareEditing({
               throw error;
             }
           }
-          logResize("dom-route", {
-            next,
-            offset: offset ?? null,
-            hadGsapMutation: !!gsapCommitMutation
-          });
-          logResizeSettle(selection.element, "dom-route");
-          await handleDomBoxSizeCommit(selection, next, offset);
+          throw new Error("Resize of a GSAP-owned box has no GSAP writer");
         },
         afterBufferedCommitsSaved: async () => {
           await anchorMove?.save();
@@ -78213,10 +78335,11 @@ function useGsapAwareEditing({
   );
   const handleGsapAwareRotationCommit = useCallback139(
     async (selection, next) => {
+      if (next.plain || !gsapWritesRotation(selection.element))
+        return handleDomRotationCommit(selection, next);
       if (gsapCommitMutation) {
         try {
-          const ownedAnimations = getGsapAnimationsForSelection(selection);
-          const targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
+          const targetAnimations = await getGsapAnimationsForSelection(selection);
           const outcome = await tryGsapRotationIntercept(
             selection,
             next.angle,
@@ -78237,7 +78360,8 @@ function useGsapAwareEditing({
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
-      getGsapAnimationsForSelection
+      getGsapAnimationsForSelection,
+      handleDomRotationCommit
     ]
   );
   const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
@@ -78779,6 +78903,7 @@ function useDomEditSession({
     stageElementPositionOffset,
     commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
@@ -79008,6 +79133,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
@@ -92909,7 +93035,6 @@ import { useCallback as useCallback189, useMemo as useMemo84, useRef as useRef18
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
-var noDomBoxSizeRoute = () => Promise.reject(new Error("Resize has no DOM route here"));
 function useDomGeometryCommit({
   projectId,
   iframeRef,
@@ -92962,15 +93087,12 @@ function useDomGeometryCommit({
     },
     [commitPositionPatchToHtml, queue2]
   );
-  const stageElementPositionOffset = useCallback189(
-    (selection, next, coalesceKey) => stageElementOffset(
-      { commitPositionPatchToHtml: commitWithFreshQueue, showToast },
-      selection,
-      next,
-      coalesceKey
-    ),
-    [commitWithFreshQueue, showToast]
-  );
+  const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } = useDomGeometryCommits({
+    previewIframeRef: iframeRef,
+    showToast,
+    commitPositionPatchToHtml: commitWithFreshQueue,
+    readOnlyPreview: false
+  });
   const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
   const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
   const {
@@ -92989,7 +93111,8 @@ function useDomGeometryCommit({
     makeFetchFallback,
     trackGsapInteractionFailure,
     stageElementPositionOffset,
-    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
     commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,