hyperframes 0.8.102 → 0.8.104

package/dist/studio/index.js

@@ -67,7 +67,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-7X4XRP3L.js";
+} from "./chunk-HIGHVWYD.js";
 import {
   Button,
   ContextMenu,
@@ -133,13 +133,13 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-MTAVNAGW.js";
+} from "./chunk-46XP7J3B.js";
 import {
   buildProjectApiPath,
   buildProjectHash,
   parseProjectHashRoute,
   parseProjectIdFromHash
-} from "./chunk-S65AQH6M.js";
+} from "./chunk-DI4LCJHL.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -13768,11 +13768,7 @@ import { Fragment as Fragment17, useId as useId4, useMemo as useMemo30 } from "r
 import { memo as memo10 } from "react";
 
 // src/player/components/TimelineClipFades.tsx
-import {
-  useEffect as useEffect21,
-  useRef as useRef28,
-  useState as useState16
-} from "react";
+import { useEffect as useEffect21, useRef as useRef28, useState as useState16 } from "react";
 import {
   HF_AUDIO_FADE_IN_ATTR,
   HF_AUDIO_FADE_OUT_ATTR,
@@ -13781,7 +13777,9 @@ import {
 } from "@hyperframes/core/audio-fade";
 import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var HANDLE_SIZE = 10;
-var HANDLE_HIT = 16;
+var HANDLE_HIT = 24;
+var HANDLE_Z_ABOVE_CLIP_CONTENT = 30;
+var SUPPRESS_CLIP_NATIVE_TITLE = "";
 var DRAG_THRESHOLD_PX = 2;
 function TimelineClipFades({ el, pps, widthPx, showHandles }) {
   const { onSetElementAttributeLive, onSetElementAttributeQuiet, onRevertElementAttributeLive } = useTimelineEditContextOptional();
@@ -13868,29 +13866,36 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
       g.edge === "in" ? "Fade in" : "Fade out"
     );
   };
-  const onHandleKeyDown = (e) => {
-    const g = gesture.current;
-    if (e.key !== "Escape" || !g) return;
-    e.preventDefault();
-    gesture.current = null;
-    setDragging(null);
-    revertGesture(g);
-  };
+  useEffect21(() => {
+    if (dragging === null) return;
+    const cancelOnWindowEscape = (e) => {
+      const g = gesture.current;
+      if (e.key !== "Escape" || !g) return;
+      e.preventDefault();
+      e.stopPropagation();
+      gesture.current = null;
+      setDragging(null);
+      revertGesture(g);
+    };
+    window.addEventListener("keydown", cancelOnWindowEscape, { capture: true });
+    return () => window.removeEventListener("keydown", cancelOnWindowEscape, { capture: true });
+  });
   const showIn = fades.fadeIn > 0;
   const showOut = fades.fadeOut > 0;
   const handlesVisible = showHandles || dragging !== null;
   if (!showIn && !showOut && !handlesVisible) return null;
-  const handleStyle = (leftPx) => ({
+  const hitWidth = Math.min(HANDLE_HIT, widthPx / 2);
+  const handleStyle = (edge) => ({
     position: "absolute",
     top: -(HANDLE_HIT - HANDLE_SIZE) / 2 + 1,
-    left: leftPx - HANDLE_HIT / 2,
-    width: HANDLE_HIT,
+    left: edge === "in" ? 0 : widthPx - hitWidth,
+    width: hitWidth,
     height: HANDLE_HIT,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     cursor: "ew-resize",
-    zIndex: 6,
+    zIndex: HANDLE_Z_ABOVE_CLIP_CONTENT,
     opacity: handlesVisible ? 1 : 0,
     pointerEvents: handlesVisible && canEdit ? "auto" : "none",
     touchAction: "none",
@@ -13909,7 +13914,8 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           height: "100%",
           pointerEvents: "none",
           zIndex: 5,
-          overflow: "visible"
+          overflow: "hidden",
+          borderRadius: "inherit"
         },
         viewBox: `0 0 ${Math.max(widthPx, 1)} 100`,
         preserveAspectRatio: "none",
@@ -13972,13 +13978,12 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           direction: "in",
           value: fades.fadeIn,
           max: Math.max(0, el.duration - fades.fadeOut),
-          style: handleStyle(inPx),
+          style: handleStyle("in"),
           dragging: dragging === "in",
           onPointerDown: onHandlePointerDown("in"),
           onPointerMove: onHandlePointerMove,
           onPointerUp: (e) => finish(e, false),
-          onPointerCancel: (e) => finish(e, true),
-          onKeyDown: onHandleKeyDown
+          onPointerCancel: (e) => finish(e, true)
         }
       ),
       /* @__PURE__ */ jsx29(
@@ -13987,13 +13992,12 @@ function TimelineClipFades({ el, pps, widthPx, showHandles }) {
           direction: "out",
           value: fades.fadeOut,
           max: Math.max(0, el.duration - fades.fadeIn),
-          style: handleStyle(widthPx - outPx),
+          style: handleStyle("out"),
           dragging: dragging === "out",
           onPointerDown: onHandlePointerDown("out"),
           onPointerMove: onHandlePointerMove,
           onPointerUp: (e) => finish(e, false),
-          onPointerCancel: (e) => finish(e, true),
-          onKeyDown: onHandleKeyDown
+          onPointerCancel: (e) => finish(e, true)
         }
       )
     ] })
@@ -14008,11 +14012,10 @@ function FadeHandle({
   onPointerDown,
   onPointerMove,
   onPointerUp,
-  onPointerCancel,
-  onKeyDown
+  onPointerCancel
 }) {
   const label = direction === "in" ? "Fade in" : "Fade out";
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx29(Tooltip, { label: `${label} ${formatFadeSeconds(value)} s`, children: /* @__PURE__ */ jsx29(
     "div",
     {
       role: "slider",
@@ -14023,18 +14026,17 @@ function FadeHandle({
       "aria-valuenow": value,
       "aria-valuetext": `${formatFadeSeconds(value)}s`,
       "data-testid": `clip-fade-handle-${direction}`,
-      title: `${label}: ${formatFadeSeconds(value)}s \u2014 drag to change`,
+      title: SUPPRESS_CLIP_NATIVE_TITLE,
       style,
       onPointerDown,
       onPointerMove,
       onPointerUp,
       onPointerCancel,
-      onKeyDown,
       onClick: (e) => e.stopPropagation(),
       onDoubleClick: (e) => e.stopPropagation(),
       children: /* @__PURE__ */ jsx29(FadeDot, { active: dragging })
     }
-  );
+  ) });
 }
 function FadeDot({ active }) {
   return /* @__PURE__ */ jsx29(
@@ -14043,10 +14045,12 @@ function FadeDot({ active }) {
       "aria-hidden": "true",
       style: {
         display: "block",
+        flexShrink: 0,
+        pointerEvents: "none",
         width: HANDLE_SIZE,
         height: HANDLE_SIZE,
         borderRadius: "50%",
-        background: active ? "var(--timeline-fade-dot-active)" : "var(--clip-handle)",
+        background: "var(--timeline-fade-dot)",
         boxShadow: "0 0 0 1.5px var(--timeline-fade-dot-ring)",
         transform: active ? "scale(1.15)" : void 0,
         transition: "transform 80ms ease-out"
@@ -27804,10 +27808,11 @@ function usePreviewReadOnly() {
 function usePreviewReadOnlyReason() {
   return useContext8(PreviewReadOnlyContext).reason;
 }
-function useManualEditDisabledFlags(capabilities) {
+function useManualEditDisabledFlags(capabilities, offset = { x: 0, y: 0 }) {
   const { readOnly } = useContext8(PreviewReadOnlyContext);
+  const unreadable = !Number.isFinite(offset.x) || !Number.isFinite(offset.y);
   return {
-    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly,
+    manualOffsetEditingDisabled: !capabilities?.canApplyManualOffset || readOnly || unreadable,
     manualSizeEditingDisabled: !capabilities?.canApplyManualSize || readOnly,
     manualRotationEditingDisabled: !capabilities?.canApplyManualRotation || readOnly
   };
@@ -31301,7 +31306,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-NU6Z5QWA.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-AQBDFNUC.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -31835,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) {
@@ -31981,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),
@@ -32376,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;
@@ -32402,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",
@@ -32616,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;
@@ -32677,49 +32859,75 @@ function scanAllRuntimeKeyframes(iframe, clipById) {
 }
 
 // src/components/editor/plainTranslate.ts
-var TERM = /^(-?\d*\.?\d+(?:e[-+]?\d+)?)(px|%)$/i;
-var SIGN = { "+": 1, "-": -1 };
-function termPx(term, side) {
-  const match = TERM.exec(term ?? "");
-  return match ? Number(match[1]) * (match[2] === "%" ? side / 100 : 1) : null;
-}
-function resolveLength(value, side) {
-  const parts = (/^calc\((.*)\)$/.exec(value)?.[1] ?? value).split(" ");
-  if (parts.length % 2 === 0) return null;
-  let total = termPx(parts[0], side);
-  for (let i = 1; i < parts.length && total !== null; i += 2) {
-    const term = termPx(parts[i + 1], side);
-    const sign = SIGN[parts[i] ?? ""];
-    total = term === null || !sign ? null : total + sign * term;
-  }
-  return total;
-}
-function borderBox(cs, size, a, b) {
+var TOKEN = /\s*(?:(\d*\.?\d+(?:e[-+]?\d+)?)(px|%)?|([a-z]+)\(|([-+*/(),]))/giy;
+var FUNCTIONS = {
+  "(": ([a = Number.NaN]) => a,
+  "calc(": ([a = Number.NaN]) => a,
+  "min(": (args) => Math.min(...args),
+  "max(": (args) => Math.max(...args),
+  "clamp(": ([lo = Number.NaN, v = Number.NaN, hi = Number.NaN]) => Math.max(lo, Math.min(v, hi))
+};
+function tokenize(value, side) {
+  const tokens = [];
+  const end = value.trimEnd().length;
+  TOKEN.lastIndex = 0;
+  for (let m = TOKEN.exec(value); m; m = TOKEN.lastIndex < end ? TOKEN.exec(value) : null) {
+    if (m[1]) tokens.push(Number(m[1]) * (m[2] === "%" ? side / 100 : 1));
+    else tokens.push(m[3] ? `${m[3].toLowerCase()}(` : m[4] ?? "");
+  }
+  return TOKEN.lastIndex < end ? [] : tokens;
+}
+function evaluateLength(value, side) {
+  const tokens = tokenize(value, side);
+  let i = 0;
+  const next = () => tokens[i++];
+  const take = (...ops) => ops.includes(tokens[i]) && next();
+  function sum() {
+    let total2 = product();
+    for (let op = take("+", "-"); op; op = take("+", "-"))
+      total2 += (op === "+" ? 1 : -1) * product();
+    return total2;
+  }
+  function product() {
+    let total2 = unary();
+    for (let op = take("*", "/"); op; op = take("*", "/"))
+      total2 = op === "*" ? total2 * unary() : total2 / unary();
+    return total2;
+  }
+  function unary() {
+    return take("-") ? -unary() : atom();
+  }
+  function atom() {
+    const token = next();
+    if (typeof token === "number") return token;
+    const fn = FUNCTIONS[token ?? ""];
+    if (!fn) return Number.NaN;
+    const args = [sum()];
+    while (take(",")) args.push(sum());
+    return take(")") ? fn(args) : Number.NaN;
+  }
+  const total = tokens.length ? sum() : Number.NaN;
+  return i === tokens.length ? total : Number.NaN;
+}
+var CONTENT_BOXES = /* @__PURE__ */ new Set(["content-box", "fill-box"]);
+function referenceBox(cs, size, a, b) {
   const n = (prop) => Number.parseFloat(cs.getPropertyValue(prop)) || 0;
   const pad = n(`padding-${a}`) + n(`padding-${b}`) + n(`border-${a}-width`) + n(`border-${b}-width`);
-  return n(size) + (cs.boxSizing === "border-box" ? 0 : pad);
-}
-function resolveInTransform(el, x, y) {
-  const style = el.style;
-  const saved2 = [style.getPropertyValue("transform"), style.getPropertyPriority("transform")];
-  style.setProperty("transform", `translate(${x}, ${y})`, "important");
-  try {
-    const resolved2 = el.ownerDocument.defaultView?.getComputedStyle(el).transform ?? "";
-    const matrix = new DOMMatrixReadOnly(resolved2.startsWith("matrix") ? resolved2 : void 0);
-    return { x: matrix.m41, y: matrix.m42 };
-  } finally {
-    style.setProperty("transform", saved2[0] ?? "", saved2[1] ?? "");
-  }
+  const content = n(size) - (cs.boxSizing === "border-box" ? pad : 0);
+  return CONTENT_BOXES.has(cs.getPropertyValue("transform-box")) ? content : content + pad;
 }
 function readTranslatePx(el) {
   const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-  const value = el.style.getPropertyValue("translate") || cs?.translate || "none";
+  const value = cs?.translate || el.style.getPropertyValue("translate") || "none";
   if (value === "none") return { x: 0, y: 0 };
   const [x = "0px", y = "0px"] = splitTopLevelWhitespace(value);
-  const px = cs && resolveLength(x, borderBox(cs, "width", "left", "right"));
-  const py = cs && resolveLength(y, borderBox(cs, "height", "top", "bottom"));
-  return px != null && py != null ? { x: px, y: py } : resolveInTransform(el, x, y);
+  const side = (size, a, b) => cs ? referenceBox(cs, size, a, b) : 0;
+  return {
+    x: evaluateLength(x, side("width", "left", "right")),
+    y: evaluateLength(y, side("height", "top", "bottom"))
+  };
 }
+var UNREADABLE_TRANSLATE = "Studio can't read this layer's translate. Move it in the Code tab.";
 function formatTranslatePx(p) {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
 }
@@ -32729,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
@@ -32747,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;
@@ -32905,8 +33105,11 @@ 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 };
   const win = input.element.ownerDocument.defaultView;
   const gsapX = !plainTranslate && win?.gsap?.getProperty?.(input.element, "x") || 0;
   const gsapY = !plainTranslate && win?.gsap?.getProperty?.(input.element, "y") || 0;
@@ -33069,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;
@@ -33182,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;
@@ -33707,7 +33977,7 @@ function startGroupDrag(e, opts) {
       restoreManualOffsetDragMembers(members);
       e.preventDefault();
       e.stopPropagation();
-      opts.onBlockedMoveRef.current(result.selection);
+      opts.onBlockedMoveRef.current(result.selection, result.reason);
       return false;
     }
     members.push(result.member);
@@ -33773,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;
@@ -33799,7 +34057,7 @@ function startGesture(kind, e, opts, options) {
       gesture: "drag"
     });
     if (!result.ok) {
-      opts.onBlockedMoveRef.current(result.selection);
+      opts.onBlockedMoveRef.current(result.selection, result.reason);
       return false;
     }
     pathOffsetMember = result.member;
@@ -33812,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);
       }
@@ -33825,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;
@@ -33864,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,
@@ -34123,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") {
@@ -34260,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)}`,
@@ -34333,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();
@@ -34375,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);
@@ -34433,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;
@@ -34516,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)) {
@@ -34538,7 +34805,7 @@ function useDomEditNudge(params) {
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
   }, [params.allowCanvasMovement]);
-  const beginSession = () => {
+  const beginSession = (event) => {
     const p = paramsRef.current;
     const groupItems = p.groupOverlayItemsRef.current;
     const isGroup = groupItems.length > 1;
@@ -34549,7 +34816,8 @@ function useDomEditNudge(params) {
       const result = createManualOffsetDragMember({ ...target, gesture: "nudge" });
       if (!result.ok) {
         restoreManualOffsetDragMembers(members);
-        return null;
+        if (!event.repeat) p.onBlockedMoveRef.current(result.selection, result.reason);
+        return "refused";
       }
       members.push(result.member);
     }
@@ -34562,7 +34830,8 @@ function useDomEditNudge(params) {
     if (shouldIgnoreNudgeKey(p, event)) return;
     const delta = resolveCanvasNudgeDelta(event);
     if (!delta) return;
-    const session = sessionRef.current ?? beginSession();
+    const session = sessionRef.current ?? beginSession(event);
+    if (session === "refused") return void event.preventDefault();
     if (!session) return;
     sessionRef.current = session;
     event.preventDefault();
@@ -36305,7 +36574,7 @@ function useInlineTextEdit({
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        cancel();
+        commit();
       }
     };
     const onBlur = () => commit();
@@ -36333,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(), []);
@@ -36827,6 +37096,7 @@ var DomEditOverlay = memo25(function DomEditOverlay2({
     gestureRef,
     groupGestureRef,
     blockedMoveRef,
+    onBlockedMoveRef,
     onManualDragStartRef,
     onPathOffsetCommitRef,
     onGroupPathOffsetCommitRef
@@ -42530,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);
@@ -47987,12 +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) => {
@@ -49603,13 +49876,13 @@ function useColorGradingController({
   useEffect69(() => {
     setMediaMetadata(null);
     if (!selectedAssetPath) return;
-    const cacheKey = `${projectId}:${selectedAssetPath}`;
+    const cacheKey = mediaMetadataUrl(projectId, selectedAssetPath);
     if (MEDIA_METADATA_CACHE.has(cacheKey)) {
       setMediaMetadata(MEDIA_METADATA_CACHE.get(cacheKey) ?? null);
       return;
     }
     const controller = new AbortController();
-    fetch(mediaMetadataUrl(projectId, selectedAssetPath), { signal: controller.signal }).then(async (response) => {
+    fetch(cacheKey, { signal: controller.signal }).then(async (response) => {
       if (!response.ok) return { ok: false };
       const data = await response.json();
       return { ok: true, metadata: data?.metadata ?? null };
@@ -65060,7 +65333,8 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
     scale: 1,
     transformPerspective: 0
   };
-  const { manualOffsetEditingDisabled, manualSizeEditingDisabled, manualRotationEditingDisabled } = useManualEditDisabledFlags(element?.capabilities);
+  const manualOffset = element ? readMoveOffset(element.element) : { x: 0, y: 0 };
+  const { manualOffsetEditingDisabled, manualSizeEditingDisabled, manualRotationEditingDisabled } = useManualEditDisabledFlags(element?.capabilities, manualOffset);
   if (!element) {
     return /* @__PURE__ */ jsx175(
       PropertyPanelEmptyState,
@@ -65077,11 +65351,10 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
   const sourceLabel = element.id ? `#${element.id}` : element.selector ?? "";
   const sections = resolveEditingSections(domEditSelectionToFacts(element, gsapAnimations.length));
   const showEditableSections = element.capabilities.canEditStyles && sections.style;
-  const manualOffset = readMoveOffset(element.element);
   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;
@@ -73027,9 +73300,9 @@ function usePreviewInteraction({
     updateDomEditHoverSelection(null);
   }, [updateDomEditHoverSelection]);
   const handleBlockedDomMove = useCallback120(
-    (selection) => {
+    (selection, reason) => {
       showToast(
-        selection.capabilities.reasonIfDisabled ?? "This element can't be adjusted directly from the preview.",
+        reason ?? selection.capabilities.reasonIfDisabled ?? "This element can't be adjusted directly from the preview.",
         "info"
       );
     },
@@ -74410,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;
@@ -74437,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 };
@@ -74466,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
@@ -74684,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]
@@ -74710,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) => {
@@ -77201,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];
@@ -77905,6 +78062,7 @@ function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  handleDomRotationCommit,
   commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
@@ -77920,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);
@@ -77935,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;
@@ -77984,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(
@@ -77999,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);
         })
       );
@@ -78018,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 {
@@ -78056,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);
@@ -78131,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");
@@ -78141,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();
@@ -78175,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,
@@ -78199,7 +78360,8 @@ function useGsapAwareEditing({
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
-      getGsapAnimationsForSelection
+      getGsapAnimationsForSelection,
+      handleDomRotationCommit
     ]
   );
   const { commitAnimatedProperties: commitAnimatedPropertiesRaw } = useAnimatedPropertyCommit({
@@ -78741,6 +78903,7 @@ function useDomEditSession({
     stageElementPositionOffset,
     commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit
@@ -78970,6 +79133,7 @@ function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,
@@ -92871,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,
@@ -92924,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 {
@@ -92951,7 +93111,8 @@ function useDomGeometryCommit({
     makeFetchFallback,
     trackGsapInteractionFailure,
     stageElementPositionOffset,
-    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
     commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap3.addGsapAnimation,
     convertToKeyframes: gsap3.convertToKeyframes,