hyperframes 0.7.52 → 0.7.54

package/dist/studio/index.js

@@ -20,7 +20,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-BA66NM4L.js";
+} from "./chunk-SOTCF4DF.js";
 
 // src/components/nle/NLELayout.tsx
 import {
@@ -12319,6 +12319,19 @@ function getTimelineToggleTitle(timelineVisible) {
   return `${timelineVisible ? "Hide" : "Show"} timeline editor (${TIMELINE_TOGGLE_SHORTCUT_LABEL})`;
 }
 
+// src/utils/gsapSoftReload.ts
+import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-grading";
+
+// src/utils/authoredOpacity.ts
+import { COLOR_GRADING_AUTHORED_OPACITY_ATTR } from "@hyperframes/core/color-grading";
+function readStampedAuthoredOpacity(element) {
+  return element.getAttribute(COLOR_GRADING_AUTHORED_OPACITY_ATTR);
+}
+function applyAuthoredInlineOpacity(style, authored) {
+  if (authored === "") style.removeProperty("opacity");
+  else style.setProperty("opacity", authored);
+}
+
 // src/utils/gsapSoftReload.ts
 var MOTION_PATH_PLUGIN_CDN = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js";
 function ensureMotionPathPluginLoaded(iframe) {
@@ -12379,7 +12392,8 @@ function verifyTimelinesPopulated(win, targetKeys) {
   }
   return Object.keys(timelines).filter((k) => k !== "__proxied").length > 0;
 }
-function applySoftReload(iframe, scriptText, onAsyncFailure, currentTimeOverride) {
+function applySoftReload(iframe, scriptText, options = {}) {
+  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
   const win = iframe.contentWindow;
   const doc = iframe.contentDocument;
@@ -12398,6 +12412,25 @@ function applySoftReload(iframe, scriptText, onAsyncFailure, currentTimeOverride
   if (gsapScripts.length > 1 && staleScripts.length === 0) return "cannot-soft-reload";
   const currentTime = currentTimeOverride ?? win.__player?.getTime?.() ?? 0;
   let deferredToAsync = false;
+  let authoredDoc;
+  const findAuthoredSource = (el) => {
+    if (authoredDoc === void 0) {
+      try {
+        authoredDoc = authoredHtml ? new DOMParser().parseFromString(authoredHtml, "text/html") : null;
+      } catch {
+        authoredDoc = null;
+      }
+    }
+    if (!authoredDoc) return null;
+    const hfId = el.getAttribute("data-hf-id");
+    if (hfId) return authoredDoc.querySelector(`[data-hf-id="${hfId}"]`);
+    return el.id ? authoredDoc.getElementById(el.id) : null;
+  };
+  const readAuthoredOpacity = (el) => {
+    const source = findAuthoredSource(el);
+    if (source instanceof HTMLElement) return source.style.opacity;
+    return readStampedAuthoredOpacity(el);
+  };
   const doReload = () => {
     const timelines = win.__timelines;
     const allTargets = [];
@@ -12432,8 +12465,8 @@ function applySoftReload(iframe, scriptText, onAsyncFailure, currentTimeOverride
     if (allTargets.length > 0 && win.gsap?.set) {
       const saved = [];
       for (const el of allTargets) {
-        const s = el.style;
-        if (s?.cssText != null) saved.push([el, s.cssText]);
+        const styled = el;
+        if (styled.style?.cssText != null) saved.push([styled, styled.style.cssText]);
       }
       try {
         win.gsap.set(allTargets, { clearProps: "all" });
@@ -12441,9 +12474,14 @@ function applySoftReload(iframe, scriptText, onAsyncFailure, currentTimeOverride
       }
       for (const [el, css2] of saved) {
         const s = el.style;
-        if (!s) continue;
         s.cssText = css2;
         s.removeProperty("transform");
+        const authored = readAuthoredOpacity(el);
+        if (authored !== null) {
+          applyAuthoredInlineOpacity(s, authored);
+        } else if (el.hasAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR) && s.getPropertyValue("opacity") === "0" && s.getPropertyPriority("opacity") === "important") {
+          s.removeProperty("opacity");
+        }
       }
     }
     for (const script of staleScripts) script.remove();
@@ -31263,6 +31301,22 @@ function seekToCurrent(iframe, timeline) {
   const currentTime = typeof player?.getTime === "function" ? player.getTime() : typeof timeline.time === "function" ? timeline.time() : 0;
   player?.seek?.(Number.isFinite(currentTime) ? currentTime : 0);
 }
+function changeTouchesOpacity(change) {
+  if (change.kind === "set" || change.kind === "global-set")
+    return change.props.opacity !== void 0;
+  if (change.kind === "keyframes") return change.keyframes.some((step) => "opacity" in step);
+  return "opacity" in change.props;
+}
+function restoreAuthoredOpacityForCapture(tween) {
+  const targets = typeof tween.targets === "function" ? tween.targets() : [];
+  for (const target of targets ?? []) {
+    const el = target;
+    if (!el?.style || typeof el.getAttribute !== "function") continue;
+    const authored = readStampedAuthoredOpacity(el);
+    if (authored === null) continue;
+    applyAuthoredInlineOpacity(el.style, authored);
+  }
+}
 function applyChange(tween, change) {
   if (change.kind === "set") return patchSet(tween, change.props);
   if (change.kind === "keyframes") return patchKeyframes(tween, change.keyframes);
@@ -31283,10 +31337,10 @@ function patchRuntimeTweenInPlace(iframe, selector, change, compositionId) {
     );
     if (!resolved) return false;
     const { tween, timeline } = resolved;
+    if (changeTouchesOpacity(change)) restoreAuthoredOpacityForCapture(tween);
     if (!applyChange(tween, change)) return false;
     if (change.kind !== "keyframe-rebuild") {
       tween.invalidate?.();
-      timeline.invalidate?.();
     }
     seekToCurrent(iframe, timeline);
     return true;
@@ -32167,9 +32221,13 @@ async function mutateGsapScript(projectId, sourceFile, mutation) {
   if (!result.ok) throw new Error(`Failed to update GSAP in ${sourceFile}`);
   return result;
 }
-function softReloadOrEscalate(iframe, scriptText, reloadPreview, origin) {
+function softReloadOrEscalate(iframe, scriptText, reloadPreview, origin, authoredHtml) {
   const currentTime = usePlayerStore.getState().currentTime;
-  const result = applySoftReload(iframe, scriptText, reloadPreview, currentTime);
+  const result = applySoftReload(iframe, scriptText, {
+    onAsyncFailure: reloadPreview,
+    currentTimeOverride: currentTime,
+    authoredHtml
+  });
   if (result === "applied") return;
   trackStudioEvent("gsap_soft_reload_outcome", {
     origin,
@@ -32189,7 +32247,13 @@ function applyPreviewSync(iframe, result, options, reloadPreview) {
     trackStudioEvent("gsap_instant_patch_fallback", { selector: options.instantPatch.selector });
   }
   if (options.softReload && result.scriptText) {
-    softReloadOrEscalate(iframe, result.scriptText, reloadPreview, "preview_sync");
+    softReloadOrEscalate(
+      iframe,
+      result.scriptText,
+      reloadPreview,
+      "preview_sync",
+      result.after ?? void 0
+    );
   } else {
     reloadPreview();
   }
@@ -32214,7 +32278,12 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       if (options.skipReload) return;
       throw error;
     }
-    if (result.changed === false) return;
+    if (result.changed === false) {
+      if (!options.skipReload && options.instantPatch) {
+        applyPreviewSync(previewIframeRef.current, result, options, reloadPreview);
+      }
+      return;
+    }
     domEditSaveTimestampRef.current = Date.now();
     if (result.before != null && result.after != null) {
       await editHistory.recordEdit({ label: options.label, kind: "manual", coalesceKey: options.coalesceKey, files: { [targetPath]: { before: result.before, after: result.after } } });
@@ -32241,7 +32310,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     (after) => {
       const script = extractGsapScriptText(after);
       if (script) {
-        softReloadOrEscalate(previewIframeRef.current, script, reloadPreview, "sdk_refresh");
+        softReloadOrEscalate(previewIframeRef.current, script, reloadPreview, "sdk_refresh", after);
       } else {
         reloadPreview();
       }
@@ -32319,6 +32388,21 @@ import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup2 } from "@hyperframes/core/gsap-parser";
+import {
+  COLOR_GRADING_SOURCE_HIDDEN_ATTR as COLOR_GRADING_SOURCE_HIDDEN_ATTR2,
+  HF_COLOR_GRADING_CANVAS_ID_PREFIX
+} from "@hyperframes/core/color-grading";
+function readLiveGsapValue(gsap2, el, prop) {
+  if (prop === "opacity" && el.getAttribute(COLOR_GRADING_SOURCE_HIDDEN_ATTR2) != null && el.id) {
+    const canvas = el.ownerDocument.getElementById(HF_COLOR_GRADING_CANVAS_ID_PREFIX + el.id);
+    const win = el.ownerDocument.defaultView;
+    if (canvas && win) {
+      const val = Number(win.getComputedStyle(canvas).opacity);
+      if (Number.isFinite(val)) return val;
+    }
+  }
+  return Number(gsap2.getProperty(el, prop));
+}
 function readGsapProperty(iframe, selector, prop) {
   if (!selector) return null;
   const gsap2 = getIframeGsap(iframe);
@@ -32326,7 +32410,7 @@ function readGsapProperty(iframe, selector, prop) {
   const el = queryIframeElement(iframe, selector);
   if (!el) return null;
   try {
-    const val = Number(gsap2.getProperty(el, prop));
+    const val = readLiveGsapValue(gsap2, el, prop);
     if (!Number.isFinite(val)) return null;
     return POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
   } catch {
@@ -32376,13 +32460,10 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   } else {
     for (const p of Object.keys(anim.properties)) propKeys.add(p);
   }
-  if (group) {
-    for (const p of propKeys) {
-      if (classifyPropertyGroup2(p) !== group) propKeys.delete(p);
-    }
-  }
-  for (const prop of propKeys) {
-    const val = Number(gsap2.getProperty(el, prop));
+  const inGroup = (p) => !group || classifyPropertyGroup2(p) === group;
+  const groupedPropKeys = new Set([...propKeys].filter(inGroup));
+  for (const prop of groupedPropKeys) {
+    const val = readLiveGsapValue(gsap2, el, prop);
     if (Number.isFinite(val)) {
       result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
     }
@@ -32402,14 +32483,14 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
           const vars = child.vars;
           if (!vars) continue;
           for (const k of Object.keys(vars)) {
-            if (!GSAP_CONFIG_KEYS.has(k)) otherTweenProps.add(k);
+            if (!GSAP_CONFIG_KEYS.has(k) && inGroup(k)) otherTweenProps.add(k);
           }
         }
       }
     }
   } catch {
   }
-  for (const p of propKeys) otherTweenProps.delete(p);
+  for (const p of groupedPropKeys) otherTweenProps.delete(p);
   const UNIVERSAL_BASELINE = {
     opacity: 1,
     scale: 1,
@@ -32434,11 +32515,11 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
     sepia: 0,
     invert: 0
   };
-  const allTweenedProps = /* @__PURE__ */ new Set([...propKeys, ...otherTweenProps]);
+  const allTweenedProps = /* @__PURE__ */ new Set([...groupedPropKeys, ...otherTweenProps]);
   for (const [prop, defaultVal] of Object.entries(UNIVERSAL_BASELINE)) {
     if (prop in result) continue;
     if (!allTweenedProps.has(prop)) continue;
-    const val = Number(gsap2.getProperty(el, prop));
+    const val = readLiveGsapValue(gsap2, el, prop);
     if (Number.isFinite(val) && Math.round(val * 1e3) !== Math.round(defaultVal * 1e3)) {
       result[prop] = roundTo3(val);
     }
@@ -32467,6 +32548,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   }
   for (const prop of COMPUTED_BASELINE) {
     if (prop in result) continue;
+    if (!inGroup(prop)) continue;
     if (otherTweenProps.has(prop)) continue;
     const gsapVal = Number(gsap2.getProperty(el, prop));
     if (!Number.isFinite(gsapVal)) continue;
@@ -33437,169 +33519,6 @@ async function tryGsapDragIntercept(selection, offset, animations, iframe, commi
   }
   return true;
 }
-var IDENTITY_ONE_PROPS = /* @__PURE__ */ new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
-function synthesizeIdentityProps(source) {
-  const id = {};
-  for (const [k, v] of Object.entries(source)) {
-    if (typeof v === "number") id[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-    else id[k] = v;
-  }
-  return id;
-}
-async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations) {
-  const hasScaleGroup = animations.some((a) => a.propertyGroup === "scale");
-  const resizeGroup = hasScaleGroup ? "scale" : "size";
-  const resolved = await resolveGroupTween(
-    resizeGroup,
-    animations,
-    selection,
-    commitMutation,
-    fetchFallbackAnimations
-  );
-  let anim = resolved?.anim ?? null;
-  if (!anim || anim.method === "set") {
-    const sel = selectorFromSelection(selection);
-    if (!sel) return false;
-    const sizeSet = anim?.method === "set" ? anim : findSizeSetAnimation(animations, sel);
-    if (resizeGroup === "size") {
-      const animatedTween = pickClosestToPlayhead(
-        animations.filter((a) => a.method !== "set" && resolveTweenDuration(a) > 0)
-      );
-      if (animatedTween) {
-        const handled = await commitKeyframedSizeFromResize(
-          selection,
-          size,
-          sel,
-          sizeSet,
-          animatedTween,
-          { commitMutation, fetchAnimations: fetchFallbackAnimations }
-        );
-        if (handled) return true;
-      }
-    }
-    await commitStaticGsapSize(selection, size, sel, sizeSet, {
-      commitMutation,
-      fetchAnimations: fetchFallbackAnimations
-    });
-    return true;
-  }
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
-  if (activeKeyframePct != null) setActiveKeyframePct(null);
-  const coalesceKey = `gsap:resize:${anim.id}`;
-  const selector = selectorFromSelection(selection);
-  const runtimeProps = selector ? readAllAnimatedProperties(iframe, selector, anim) : {};
-  let resizeProps;
-  if (resizeGroup === "scale") {
-    const el = iframe?.contentDocument?.querySelector(selector ?? "");
-    const origW = Number.parseFloat(el?.getAttribute("data-hf-studio-original-width") ?? "");
-    const cssW = Number.isFinite(origW) && origW > 0 ? origW : 200;
-    const newScale = roundTo3(size.width / cssW);
-    resizeProps = { scale: newScale };
-  } else {
-    resizeProps = {
-      width: Math.round(size.width),
-      height: Math.round(size.height)
-    };
-  }
-  if (!usePlayerStore.getState().autoKeyframeEnabled) {
-    if (activeKeyframePct != null) setActiveKeyframePct(null);
-    await commitWholePropertyOffset(
-      selection,
-      anim,
-      resizeProps,
-      pct,
-      iframe,
-      { commitMutation, fetchAnimations: fetchFallbackAnimations },
-      "Resize animation"
-    );
-    return true;
-  }
-  const ct = usePlayerStore.getState().currentTime;
-  const ts = resolveTweenStart(anim);
-  const td = resolveTweenDuration(anim);
-  const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
-  if (!outsideRange) {
-    if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
-      const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
-      if (newId) anim = { ...anim, id: newId };
-    } else if (!anim.keyframes) {
-      const resolvedFromValues = selector ? readAllAnimatedProperties(iframe, selector, anim) : void 0;
-      await commitMutation(
-        selection,
-        { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
-        { label: "Convert to keyframes for resize", skipReload: true, coalesceKey }
-      );
-      if (fetchFallbackAnimations) {
-        const fresh = await fetchFallbackAnimations();
-        const refreshed = fresh.find(
-          (a) => a.targetSelector === anim.targetSelector && a.keyframes
-        );
-        if (refreshed) anim = refreshed;
-      }
-    }
-  }
-  if (outsideRange && ts !== null) {
-    const kfs = anim.keyframes?.keyframes ?? (() => {
-      const fromProps = anim.method === "from" || anim.method === "fromTo" ? { ...anim.properties } : synthesizeIdentityProps(anim.properties);
-      const toProps = anim.method === "from" ? synthesizeIdentityProps(anim.properties) : { ...anim.properties };
-      return [
-        { percentage: 0, properties: fromProps },
-        { percentage: 100, properties: toProps }
-      ];
-    })();
-    const newStart = Math.min(ct, ts);
-    const newEnd = Math.max(ct, ts + td);
-    const newDuration = Math.max(0.01, newEnd - newStart);
-    const existingKfs = kfs;
-    const remapped = [];
-    for (const kf of existingKfs) {
-      const absTime = ts + kf.percentage / 100 * td;
-      const newPct = Math.round((absTime - newStart) / newDuration * 1e3) / 10;
-      const props = { ...kf.properties };
-      for (const k of Object.keys(resizeProps)) {
-        if (k in props) continue;
-        if (k === "width" || k === "height") continue;
-        props[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-      }
-      remapped.push({ percentage: newPct, properties: props });
-    }
-    const targetPct = Math.round((ct - newStart) / newDuration * 1e3) / 10;
-    remapped.push({ percentage: targetPct, properties: resizeProps });
-    remapped.sort((a, b) => a.percentage - b.percentage);
-    await commitMutation(
-      selection,
-      {
-        type: "replace-with-keyframes",
-        animationId: anim.id,
-        targetSelector: anim.targetSelector,
-        position: roundTo3(newStart),
-        duration: roundTo3(newDuration),
-        keyframes: remapped
-      },
-      { label: `Resize (extended to ${ct.toFixed(2)}s)`, softReload: true, coalesceKey }
-    );
-    return true;
-  }
-  const SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
-  const backfillDefaults = {};
-  for (const k of Object.keys(runtimeProps)) {
-    if (SIZE_PROPS.has(k)) continue;
-    backfillDefaults[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-  }
-  await commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties: resizeProps,
-      backfillDefaults
-    },
-    { label: `Resize (keyframe ${pct}%)`, softReload: true, coalesceKey }
-  );
-  return true;
-}
 async function tryGsapRotationIntercept(selection, angle, animations, iframe, commitMutation, fetchFallbackAnimations) {
   const selector = selectorFromSelection(selection);
   if (!selector) return false;
@@ -34558,6 +34477,256 @@ function useDomEditWiring({
 // src/hooks/useGsapAwareEditing.ts
 import { useCallback as useCallback72 } from "react";
 
+// src/utils/elementGsap.ts
+function gsapOf(element) {
+  return element.ownerDocument.defaultView?.gsap;
+}
+function setElementGsapPosition(element, x, y) {
+  const gsap2 = gsapOf(element);
+  if (!gsap2?.set) return false;
+  gsap2.set(element, { x, y });
+  return true;
+}
+function readElementGsapNumber(element, prop) {
+  const value = Number(gsapOf(element)?.getProperty?.(element, prop));
+  return Number.isFinite(value) ? value : null;
+}
+
+// src/hooks/gsapResizeIntercept.ts
+var IDENTITY_ONE_PROPS = /* @__PURE__ */ new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
+function synthesizeIdentityProps(source) {
+  const id = {};
+  for (const [k, v] of Object.entries(source)) {
+    if (typeof v === "number") id[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
+    else id[k] = v;
+  }
+  return id;
+}
+async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations) {
+  const hasScaleGroup = animations.some((a) => a.propertyGroup === "scale");
+  const resizeGroup = hasScaleGroup ? "scale" : "size";
+  const resolved = await resolveGroupTween(
+    resizeGroup,
+    animations,
+    selection,
+    commitMutation,
+    fetchFallbackAnimations
+  );
+  let anim = resolved?.anim ?? null;
+  if (!anim || anim.method === "set") {
+    const sel = selectorFromSelection(selection);
+    if (!sel) return false;
+    const sizeSet = anim?.method === "set" ? anim : findSizeSetAnimation(animations, sel);
+    if (resizeGroup === "size") {
+      const animatedTween = pickClosestToPlayhead(
+        animations.filter((a) => a.method !== "set" && resolveTweenDuration(a) > 0)
+      );
+      if (animatedTween) {
+        const handled = await commitKeyframedSizeFromResize(
+          selection,
+          size,
+          sel,
+          sizeSet,
+          animatedTween,
+          { commitMutation, fetchAnimations: fetchFallbackAnimations }
+        );
+        if (handled) return true;
+      }
+    }
+    await commitStaticGsapSize(selection, size, sel, sizeSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations
+    });
+    return true;
+  }
+  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
+  if (activeKeyframePct != null) setActiveKeyframePct(null);
+  const coalesceKey = `gsap:resize:${anim.id}`;
+  const selector = selectorFromSelection(selection);
+  const runtimeProps = selector ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup) : {};
+  let resizeProps;
+  let scaleDraftEl = null;
+  let scaleDraftDropPoint = null;
+  let nonUniformScale = false;
+  if (resizeGroup === "scale") {
+    const el = iframe?.contentDocument?.querySelector(selector ?? "");
+    const origW = Number.parseFloat(el?.getAttribute("data-hf-studio-original-width") ?? "");
+    const origH = Number.parseFloat(el?.getAttribute("data-hf-studio-original-height") ?? "");
+    const cssW = Number.isFinite(origW) && origW > 0 ? origW : 200;
+    const cssH = Number.isFinite(origH) && origH > 0 ? origH : cssW;
+    const rawLiveScaleX = readGsapProperty(iframe, selector ?? null, "scaleX") ?? 1;
+    const rawLiveScaleY = readGsapProperty(iframe, selector ?? null, "scaleY") ?? 1;
+    const liveScaleX = rawLiveScaleX > 0 ? rawLiveScaleX : 1;
+    const liveScaleY = rawLiveScaleY > 0 ? rawLiveScaleY : 1;
+    const newScaleX = roundTo3(size.width * liveScaleX / cssW);
+    const newScaleY = roundTo3(size.height * liveScaleY / cssH);
+    nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
+    resizeProps = nonUniformScale ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    scaleDraftEl = el;
+    if (el) {
+      const dropRect = el.getBoundingClientRect();
+      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+    }
+  } else {
+    resizeProps = {
+      width: Math.round(size.width),
+      height: Math.round(size.height)
+    };
+  }
+  const finalizeScaleResizeCommit = async () => {
+    if (!scaleDraftEl) return;
+    clearStudioBoxSize(scaleDraftEl);
+    if (!scaleDraftDropPoint || !selector) return;
+    const hasLivePositionTween = hasNonHoldTweenForElement(
+      iframe,
+      selector,
+      void 0,
+      POSITION_CHANNELS
+    );
+    if (hasLivePositionTween) {
+      return;
+    }
+    const post = scaleDraftEl.getBoundingClientRect();
+    const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
+    if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
+    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) return;
+    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    const corrected = {
+      x: Math.round(gsapPos.x + residual.x),
+      y: Math.round(gsapPos.y + residual.y)
+    };
+    setElementGsapPosition(scaleDraftEl, corrected.x, corrected.y);
+    const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved?.animations ?? animations;
+    const existingSet = findExistingPositionWrite(currentAnimations, selector);
+    await commitStaticGsapPosition(
+      selection,
+      { x: corrected.x - gsapPos.x, y: corrected.y - gsapPos.y },
+      gsapPos,
+      selector,
+      existingSet,
+      {
+        commitMutation,
+        fetchAnimations: fetchFallbackAnimations
+      }
+    );
+  };
+  if (!usePlayerStore.getState().autoKeyframeEnabled) {
+    if (activeKeyframePct != null) setActiveKeyframePct(null);
+    await commitWholePropertyOffset(
+      selection,
+      anim,
+      resizeProps,
+      pct,
+      iframe,
+      { commitMutation, fetchAnimations: fetchFallbackAnimations },
+      "Resize animation"
+    );
+    await finalizeScaleResizeCommit();
+    return true;
+  }
+  const ct = usePlayerStore.getState().currentTime;
+  const ts = resolveTweenStart(anim);
+  const td = resolveTweenDuration(anim);
+  const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
+  if (!outsideRange) {
+    if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
+      const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
+      if (newId) anim = { ...anim, id: newId };
+    } else if (!anim.keyframes) {
+      const resolvedFromValues = selector ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup) : void 0;
+      await commitMutation(
+        selection,
+        { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
+        { label: "Convert to keyframes for resize", skipReload: true, coalesceKey }
+      );
+      if (fetchFallbackAnimations) {
+        const fresh = await fetchFallbackAnimations();
+        const refreshed = fresh.find(
+          (a) => a.targetSelector === anim.targetSelector && a.keyframes
+        );
+        if (refreshed) anim = refreshed;
+      }
+    }
+  }
+  if ((outsideRange || nonUniformScale) && ts !== null) {
+    const kfs = anim.keyframes?.keyframes ?? (() => {
+      const fromProps = anim.method === "from" || anim.method === "fromTo" ? { ...anim.properties } : synthesizeIdentityProps(anim.properties);
+      const toProps = anim.method === "from" ? synthesizeIdentityProps(anim.properties) : { ...anim.properties };
+      return [
+        { percentage: 0, properties: fromProps },
+        { percentage: 100, properties: toProps }
+      ];
+    })();
+    const newStart = Math.min(ct, ts);
+    const newEnd = Math.max(ct, ts + td);
+    const newDuration = Math.max(0.01, newEnd - newStart);
+    const existingKfs = kfs;
+    const remapped = [];
+    for (const kf of existingKfs) {
+      const absTime = ts + kf.percentage / 100 * td;
+      const newPct = Math.round((absTime - newStart) / newDuration * 1e3) / 10;
+      const props = { ...kf.properties };
+      if (nonUniformScale && "scale" in props) {
+        const uniform = props.scale;
+        if (typeof uniform === "number") {
+          props.scaleX = uniform;
+          props.scaleY = uniform;
+        }
+        delete props.scale;
+      }
+      for (const k of Object.keys(resizeProps)) {
+        if (k in props) continue;
+        if (k === "width" || k === "height") continue;
+        props[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
+      }
+      remapped.push({ percentage: newPct, properties: props });
+    }
+    const targetPct = Math.round((ct - newStart) / newDuration * 1e3) / 10;
+    const collidingKf = remapped.find((kf) => Math.abs(kf.percentage - targetPct) < 0.05);
+    if (collidingKf) Object.assign(collidingKf.properties, resizeProps);
+    else remapped.push({ percentage: targetPct, properties: resizeProps });
+    remapped.sort((a, b) => a.percentage - b.percentage);
+    await commitMutation(
+      selection,
+      {
+        type: "replace-with-keyframes",
+        animationId: anim.id,
+        targetSelector: anim.targetSelector,
+        position: roundTo3(newStart),
+        duration: roundTo3(newDuration),
+        keyframes: remapped
+      },
+      {
+        label: outsideRange ? `Resize (extended to ${ct.toFixed(2)}s)` : `Resize (keyframe ${Math.round((ct - newStart) / newDuration * 1e3) / 10}%)`,
+        softReload: true,
+        coalesceKey
+      }
+    );
+    await finalizeScaleResizeCommit();
+    return true;
+  }
+  const SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
+  const backfillDefaults = {};
+  for (const k of Object.keys(runtimeProps)) {
+    if (SIZE_PROPS.has(k)) continue;
+    backfillDefaults[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
+  }
+  await commitMutation(
+    selection,
+    {
+      type: "add-keyframe",
+      animationId: anim.id,
+      percentage: pct,
+      properties: resizeProps,
+      backfillDefaults
+    },
+    { label: `Resize (keyframe ${pct}%)`, softReload: true, coalesceKey }
+  );
+  await finalizeScaleResizeCommit();
+  return true;
+}
+
 // src/hooks/useAnimatedPropertyCommit.ts
 import { useCallback as useCallback71 } from "react";
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -34593,6 +34762,19 @@ async function maybeAutoKeyframeSet(selection, setAnim, animations, commit) {
     { label: "Keyframe 3D transform", softReload: true }
   );
 }
+var STATIC_SET_LABELS = {
+  position: "Move layer",
+  scale: "Resize layer",
+  size: "Resize layer",
+  rotation: "Rotate layer",
+  visual: "Set opacity",
+  other: "Set 3D transform"
+};
+function staticSetLabel(propEntries) {
+  const groups = new Set(propEntries.map(([k]) => classifyPropertyGroup3(k)));
+  const only = groups.size === 1 ? [...groups][0] : void 0;
+  return only && STATIC_SET_LABELS[only] || "Set properties";
+}
 async function commitSetProps(selection, setAnim, propEntries, selector, animations, commit) {
   const properties = Object.fromEntries(propEntries);
   const numericProps = {};
@@ -34609,19 +34791,47 @@ async function commitSetProps(selection, setAnim, propEntries, selector, animati
   await commit(
     selection,
     { type: "update-properties", animationId: setAnim.id, properties },
-    { label: "Set 3D transform", softReload: true, ...instantPatch ? { instantPatch } : {} }
+    {
+      label: staticSetLabel(propEntries),
+      softReload: true,
+      ...instantPatch ? { instantPatch } : {}
+    }
   );
   await maybeAutoKeyframeSet(selection, setAnim, animations, commit);
 }
 async function commitStaticSet(selection, propEntries, selector, animations, commit) {
   if (!selector) return;
-  const existingSet = animations.find((a) => a.method === "set" && a.targetSelector === selector);
-  if (existingSet) {
-    await commitSetProps(selection, existingSet, propEntries, selector, animations, commit);
-    return;
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const entry of propEntries) {
+    const group = classifyPropertyGroup3(entry[0]);
+    const batch = byGroup.get(group) ?? [];
+    batch.push(entry);
+    byGroup.set(group, batch);
+  }
+  const sets = animations.filter((a) => a.method === "set" && a.targetSelector === selector);
+  const byTargetSet = /* @__PURE__ */ new Map();
+  const newSetBatches = [];
+  for (const [group, batch] of byGroup) {
+    const existingSet = findGroupOwningSet(sets, group);
+    if (existingSet) {
+      byTargetSet.set(existingSet, [...byTargetSet.get(existingSet) ?? [], ...batch]);
+    } else {
+      newSetBatches.push(batch);
+    }
+  }
+  for (const [targetSet, batch] of byTargetSet) {
+    await commitSetProps(selection, targetSet, batch, selector, animations, commit);
   }
+  for (const batch of newSetBatches) {
+    await addGlobalStaticSet(selection, batch, selector, commit);
+  }
+}
+function findGroupOwningSet(sets, group) {
+  return sets.find((a) => a.propertyGroup === group) ?? sets.find((a) => Object.keys(a.properties).some((k) => classifyPropertyGroup3(k) === group));
+}
+async function addGlobalStaticSet(selection, batch, selector, commit) {
   const numericProps = {};
-  for (const [k, v] of propEntries) {
+  for (const [k, v] of batch) {
     if (typeof v === "number") numericProps[k] = v;
   }
   await commit(
@@ -34631,11 +34841,11 @@ async function commitStaticSet(selection, propEntries, selector, animations, com
       targetSelector: selector,
       method: "set",
       position: 0,
-      properties: Object.fromEntries(propEntries),
+      properties: Object.fromEntries(batch),
       global: true
     },
     {
-      label: "Set 3D transform",
+      label: staticSetLabel(batch),
       softReload: true,
       ...Object.keys(numericProps).length > 0 ? {
         instantPatch: {
@@ -42135,8 +42345,8 @@ function cropRectFromInsets(rect, insets, scaleX, scaleY) {
 function readElementCropInsets(element) {
   const inline = element.style.getPropertyValue("clip-path").trim();
   const value = inline || element.ownerDocument.defaultView?.getComputedStyle(element).clipPath.trim() || "";
-  const parsed = parseInsetClipPathSides(value === "none" ? "" : value);
-  return parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+  if (!value || value === "none") return { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+  return parseInsetClipPathSides(value);
 }
 function clampInset(value, max) {
   if (!Number.isFinite(value)) return 0;
@@ -42180,9 +42390,62 @@ function resolveCropInsetFromMoveDrag(input) {
 }
 function hugRectForElement(rect, element) {
   const insets = readElementCropInsets(element);
-  if (insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0) return rect;
+  if (!insets || insets.top <= 0 && insets.right <= 0 && insets.bottom <= 0 && insets.left <= 0)
+    return rect;
   return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
 }
+function readElementCropFrame(element, overlayRect) {
+  const editX = overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
+  const editY = overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
+  const aabb = {
+    angleDeg: 0,
+    left: overlayRect.left,
+    top: overlayRect.top,
+    width: overlayRect.width,
+    height: overlayRect.height,
+    scaleX: editX,
+    scaleY: editY
+  };
+  let transform = "";
+  try {
+    transform = element.ownerDocument.defaultView?.getComputedStyle(element).transform ?? "";
+  } catch {
+    return aabb;
+  }
+  if (!transform || transform === "none") return aabb;
+  const m = /^matrix\(([^)]+)\)$/.exec(transform);
+  if (!m) return aabb;
+  const [a, b, c, d] = m[1].split(",").map((v) => Number.parseFloat(v));
+  if (![a, b, c, d].every(Number.isFinite)) return aabb;
+  const elScaleX = Math.hypot(a, b);
+  const det = a * d - b * c;
+  const elScaleY = elScaleX !== 0 ? det / elScaleX : 1;
+  if (elScaleX <= 0 || elScaleY <= 0) return aabb;
+  const angleDeg = Math.atan2(b, a) * 180 / Math.PI;
+  const scaleX = elScaleX * editX;
+  const scaleY = elScaleY * editY;
+  const width = element.offsetWidth * scaleX;
+  const height = element.offsetHeight * scaleY;
+  if (!(width > 0) || !(height > 0)) return aabb;
+  const cx = overlayRect.left + overlayRect.width / 2;
+  const cy = overlayRect.top + overlayRect.height / 2;
+  return {
+    angleDeg,
+    left: cx - width / 2,
+    top: cy - height / 2,
+    width,
+    height,
+    scaleX,
+    scaleY
+  };
+}
+function rotateDeltaIntoFrame(deltaX, deltaY, angleDeg) {
+  if (angleDeg === 0) return { deltaX, deltaY };
+  const rad = -angleDeg * Math.PI / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return { deltaX: deltaX * cos - deltaY * sin, deltaY: deltaX * sin + deltaY * cos };
+}
 
 // src/components/editor/domEditOverlayGeometry.ts
 function isElementVisibleForOverlay(el) {
@@ -42501,14 +42764,16 @@ function focusDomEditOverlayElement(element) {
 function resolveDomEditResizeGesture(input) {
   const scaleX = input.scaleX > 0 ? input.scaleX : 1;
   const scaleY = input.scaleY > 0 ? input.scaleY : 1;
+  const contentScaleX = input.contentScaleX !== void 0 && input.contentScaleX > 0 ? input.contentScaleX : 1;
+  const contentScaleY = input.contentScaleY !== void 0 && input.contentScaleY > 0 ? input.contentScaleY : 1;
   if (input.uniform) {
-    const deltaX = input.dx / scaleX;
-    const deltaY = input.dy / scaleY;
+    const deltaX = input.dx / (scaleX * contentScaleX);
+    const deltaY = input.dy / (scaleY * contentScaleY);
     const delta = Math.abs(deltaX) >= Math.abs(deltaY) ? deltaX : deltaY;
     const side = Math.max(1, Math.max(input.actualWidth, input.actualHeight) + delta);
     return {
-      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX),
-      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY),
+      overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, side * scaleX * contentScaleX),
+      overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, side * scaleY * contentScaleY),
       width: side,
       height: side
     };
@@ -42516,8 +42781,8 @@ function resolveDomEditResizeGesture(input) {
   return {
     overlayWidth: Math.max(MIN_RESIZE_EDGE_PX, input.originWidth + input.dx),
     overlayHeight: Math.max(MIN_RESIZE_EDGE_PX, input.originHeight + input.dy),
-    width: Math.max(1, input.actualWidth + input.dx / scaleX),
-    height: Math.max(1, input.actualHeight + input.dy / scaleY)
+    width: Math.max(1, input.actualWidth + input.dx / (scaleX * contentScaleX)),
+    height: Math.max(1, input.actualHeight + input.dy / (scaleY * contentScaleY))
   };
 }
 function pointerAngleDegrees(centerX, centerY, x, y) {
@@ -42769,7 +43034,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-H7LDFIJ7.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-2ECJK24D.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -43584,8 +43849,26 @@ function startGesture(kind, e, opts, options) {
     return false;
   const size = readStudioBoxSize(sel.element);
   const rotation = { angle: readGsapRotation(sel.element) + readStudioRotation(sel.element).angle };
-  const actualWidth = size.width > 0 ? size.width : rect.width / rect.editScaleX;
-  const actualHeight = size.height > 0 ? size.height : rect.height / rect.editScaleY;
+  const layoutWidth = sel.element.offsetWidth;
+  const layoutHeight = sel.element.offsetHeight;
+  const actualWidth = size.width > 0 ? size.width : layoutWidth > 0 ? layoutWidth : rect.width / rect.editScaleX;
+  const actualHeight = size.height > 0 ? size.height : layoutHeight > 0 ? layoutHeight : rect.height / rect.editScaleY;
+  const rawContentScaleX = rect.width / (rect.editScaleX * actualWidth);
+  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;
@@ -43642,6 +43925,9 @@ function startGesture(kind, e, opts, options) {
     actualRotation: rotation.angle,
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
+    contentScaleX,
+    contentScaleY,
+    resizeAnchor,
     manualEditDragToken,
     snapContext
   };
@@ -43649,6 +43935,11 @@ function startGesture(kind, e, opts, options) {
 }
 
 // src/components/editor/useDomEditOverlayGestures.ts
+function restoreResizeAnchorPin(element, g) {
+  const anchor = g.resizeAnchor;
+  if (!anchor || anchor.pinX === 0 && anchor.pinY === 0) return;
+  setElementGsapPosition(element, anchor.baseGsapX, anchor.baseGsapY);
+}
 function createDomEditOverlayGestureHandlers(opts) {
   const setDraftOverlayRect = (next) => {
     opts.setOverlayRect(next);
@@ -43751,7 +44042,8 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualAngle: g.actualRotation,
         snap: e.shiftKey
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
+      const draftViaGsap = applyRotationDraftViaGsap(sel.element, rotated.angle);
+      if (!draftViaGsap) {
         applyStudioRotationDraft(sel.element, rotated);
       }
       return;
@@ -43843,11 +44135,27 @@ function createDomEditOverlayGestureHandlers(opts) {
         actualHeight: g.actualHeight,
         scaleX: g.editScaleX,
         scaleY: g.editScaleY,
+        contentScaleX: g.contentScaleX,
+        contentScaleY: g.contentScaleY,
         dx,
         dy,
         uniform: e.shiftKey
       });
       applyStudioBoxSizeDraft(sel.element, nextSize);
+      const anchor = g.resizeAnchor;
+      if (anchor) {
+        const pinned = sel.element.getBoundingClientRect();
+        const nextPinX = anchor.pinX + (anchor.anchorX - pinned.x);
+        const nextPinY = anchor.pinY + (anchor.anchorY - pinned.y);
+        if (setElementGsapPosition(
+          sel.element,
+          anchor.baseGsapX + nextPinX,
+          anchor.baseGsapY + nextPinY
+        )) {
+          anchor.pinX = nextPinX;
+          anchor.pinY = nextPinY;
+        }
+      }
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
       const refreshed = overlayEl && iframe ? toOverlayRect(overlayEl, iframe, sel.element) : null;
@@ -43931,6 +44239,7 @@ function createDomEditOverlayGestureHandlers(opts) {
       return;
     }
     if (g.kind === "resize" && movedDistance < BLOCKED_MOVE_THRESHOLD_PX) {
+      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       if (box) {
@@ -43957,7 +44266,8 @@ function createDomEditOverlayGestureHandlers(opts) {
           restoreStudioRotation(sel.element, g.initialRotation);
         }
       };
-      if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
+      const rotationChanged = hasDomEditRotationChanged(g.actualRotation, finalRotation.angle);
+      if (!rotationChanged) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
@@ -43965,10 +44275,13 @@ function createDomEditOverlayGestureHandlers(opts) {
       if (!applyRotationDraftViaGsap(sel.element, finalRotation.angle)) {
         applyStudioRotation(sel.element, finalRotation);
       }
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation)).catch(() => {
+      void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation)).catch((error) => {
+        console.error("rotate commit failed", error);
         if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           restoreRotation();
-      }).finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+      }).finally(() => {
+        endStudioManualEditGesture(sel.element, g.manualEditDragToken);
+      });
     } else if (g.kind === "drag") {
       const dx = g.lastSnappedDx ?? e.clientX - g.startX;
       const dy = g.lastSnappedDy ?? e.clientY - g.startY;
@@ -44002,9 +44315,12 @@ function createDomEditOverlayGestureHandlers(opts) {
       opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);
       applyStudioBoxSize(sel.element, finalSize);
-      void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize)).catch(() => {
-        if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
+      void Promise.resolve(opts.onBoxSizeCommitRef.current(sel, finalSize)).catch((error) => {
+        console.error("resize commit failed", error);
+        if (g.manualEditDragToken && isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken)) {
+          restoreResizeAnchorPin(sel.element, g);
           restoreStudioBoxSize(sel.element, g.initialBoxSize);
+        }
       }).finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
     }
   };
@@ -44021,6 +44337,7 @@ function createDomEditOverlayGestureHandlers(opts) {
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "box-size" && sel) {
+      restoreResizeAnchorPin(sel.element, g);
       restoreStudioBoxSize(sel.element, g.initialBoxSize);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
       restoreGestureOverlayRect(g);
@@ -44248,51 +44565,43 @@ function DomEditCropHandles({
 }) {
   const gestureRef = useRef89(null);
   const [dragging, setDragging] = useState79(false);
-  const [state, setState] = useState79(() => {
-    const parsed = readElementCropInsets(selection.element);
-    return {
-      element: selection.element,
-      insets: {
-        top: parsed.top,
-        right: parsed.right,
-        bottom: parsed.bottom,
-        left: parsed.left
-      },
-      radius: parsed.radius
-    };
-  });
+  const cropStateFor = (element) => {
+    const parsed = readElementCropInsets(element);
+    const { radius, ...insets } = parsed ?? { top: 0, right: 0, bottom: 0, left: 0, radius: 0 };
+    return { element, croppable: parsed !== null, insets, radius };
+  };
+  const [state, setState] = useState79(() => cropStateFor(selection.element));
   if (state.element !== selection.element) {
-    const liveInsets = readElementCropInsets(selection.element);
-    setState({
-      element: selection.element,
-      insets: {
-        top: liveInsets.top,
-        right: liveInsets.right,
-        bottom: liveInsets.bottom,
-        left: liveInsets.left
-      },
-      radius: liveInsets.radius
-    });
+    setState(cropStateFor(selection.element));
   }
   const hasCrop = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
-  const committedRef = useRef89(null);
-  committedRef.current = hasCrop ? buildInsetClipPathSides(state.insets, state.radius) : null;
   const liftedRef = useRef89(false);
+  const preLiftInlineClipRef = useRef89("");
+  const committedClipRef = useRef89(null);
   useEffect62(() => {
     const el = selection.element;
+    if (readElementCropInsets(el) === null) return;
+    preLiftInlineClipRef.current = el.style.getPropertyValue("clip-path");
+    committedClipRef.current = null;
     el.style.setProperty("clip-path", "none");
     liftedRef.current = true;
     return () => {
       liftedRef.current = false;
-      if (committedRef.current) el.style.setProperty("clip-path", committedRef.current);
+      const committed = committedClipRef.current;
+      const restore = committed !== null ? committed || null : preLiftInlineClipRef.current || null;
+      if (restore) el.style.setProperty("clip-path", restore);
       else el.style.removeProperty("clip-path");
     };
   }, [selection.element]);
-  const scaleX = overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
-  const scaleY = overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
-  const width = overlayRect.width / scaleX;
-  const height = overlayRect.height / scaleY;
-  const cropRect = cropRectFromInsets(overlayRect, state.insets, scaleX, scaleY);
+  const frame = readElementCropFrame(selection.element, overlayRect);
+  const width = frame.width / frame.scaleX;
+  const height = frame.height / frame.scaleY;
+  const cropRect = cropRectFromInsets(
+    { left: 0, top: 0, width: frame.width, height: frame.height },
+    state.insets,
+    frame.scaleX,
+    frame.scaleY
+  );
   const startCropGesture = (edge, event) => {
     if (!onStyleCommit) return;
     event.preventDefault();
@@ -44304,7 +44613,10 @@ function DomEditCropHandles({
       startX: event.clientX,
       startY: event.clientY,
       startInsets: state.insets,
-      didMove: false
+      didMove: false,
+      angleDeg: frame.angleDeg,
+      scaleX: frame.scaleX,
+      scaleY: frame.scaleY
     };
     setDragging(true);
   };
@@ -44313,12 +44625,17 @@ function DomEditCropHandles({
     if (!gesture || gesture.pointerId !== event.pointerId) return;
     event.preventDefault();
     event.stopPropagation();
+    const local = rotateDeltaIntoFrame(
+      event.clientX - gesture.startX,
+      event.clientY - gesture.startY,
+      gesture.angleDeg
+    );
     const drag = {
       startInsets: gesture.startInsets,
-      deltaX: event.clientX - gesture.startX,
-      deltaY: event.clientY - gesture.startY,
-      scaleX,
-      scaleY
+      deltaX: local.deltaX,
+      deltaY: local.deltaY,
+      scaleX: gesture.scaleX,
+      scaleY: gesture.scaleY
     };
     const nextInsets = gesture.edge === "move" ? resolveCropInsetFromMoveDrag(drag) : resolveCropInsetFromEdgeDrag({ ...drag, edge: gesture.edge, width, height });
     gesture.didMove = true;
@@ -44336,9 +44653,12 @@ function DomEditCropHandles({
     const reLift = () => {
       if (liftedRef.current) el.style.setProperty("clip-path", "none");
     };
-    void Promise.resolve(
-      onStyleCommit?.("clip-path", buildInsetClipPathSides(state.insets, state.radius))
-    ).then(reLift, reLift);
+    const committedValue = buildInsetClipPathSides(state.insets, state.radius);
+    const cropped = state.insets.top > 0 || state.insets.right > 0 || state.insets.bottom > 0 || state.insets.left > 0;
+    void Promise.resolve(onStyleCommit?.("clip-path", committedValue)).then(() => {
+      committedClipRef.current = cropped ? committedValue : "";
+      reLift();
+    }, reLift);
   };
   const cancelCropGesture = (event) => {
     const gesture = gestureRef.current;
@@ -44349,101 +44669,104 @@ function DomEditCropHandles({
     setDragging(false);
     setState((prev) => ({ ...prev, insets: gesture.startInsets }));
   };
-  return /* @__PURE__ */ jsxs81(Fragment30, { children: [
-    hasCrop && /* @__PURE__ */ jsx97(
-      "div",
-      {
-        className: "pointer-events-none absolute overflow-hidden",
-        style: {
-          left: overlayRect.left,
-          top: overlayRect.top,
-          width: overlayRect.width,
-          height: overlayRect.height
-        },
-        children: /* @__PURE__ */ jsx97(
+  if (!state.croppable) return null;
+  return /* @__PURE__ */ jsxs81(
+    "div",
+    {
+      "data-dom-edit-crop-frame": "true",
+      className: "pointer-events-none absolute",
+      style: {
+        left: frame.left,
+        top: frame.top,
+        width: frame.width,
+        height: frame.height,
+        transform: frame.angleDeg !== 0 ? `rotate(${frame.angleDeg}deg)` : void 0
+      },
+      children: [
+        hasCrop && /* @__PURE__ */ jsx97("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsx97(
           "div",
           {
             className: "absolute",
             style: {
-              left: cropRect.left - overlayRect.left,
-              top: cropRect.top - overlayRect.top,
+              left: cropRect.left,
+              top: cropRect.top,
               width: cropRect.width,
               height: cropRect.height,
               boxShadow: "0 0 0 100000px rgba(8, 8, 12, 0.6)"
             }
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx97(
-      "div",
-      {
-        "aria-hidden": "true",
-        className: "pointer-events-none absolute border border-dashed border-studio-accent",
-        style: {
-          left: cropRect.left,
-          top: cropRect.top,
-          width: cropRect.width,
-          height: cropRect.height
-        },
-        children: dragging && /* @__PURE__ */ jsxs81(Fragment30, { children: [
-          /* @__PURE__ */ jsx97("div", { className: "absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" }),
-          /* @__PURE__ */ jsx97("div", { className: "absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" }),
-          /* @__PURE__ */ jsx97("div", { className: "absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" }),
-          /* @__PURE__ */ jsx97("div", { className: "absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" })
-        ] })
-      }
-    ),
-    hasCrop && /* @__PURE__ */ jsx97(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Reposition crop",
-        "data-dom-edit-crop-handle": "true",
-        className: "pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",
-        style: {
-          left: cropRect.left + cropRect.width / 2,
-          top: cropRect.top + cropRect.height / 2,
-          width: 22,
-          height: 22,
-          transform: "translate(-50%, -50%)",
-          cursor: "move",
-          touchAction: "none"
-        },
-        onPointerDown: (event) => startCropGesture("move", event),
-        onPointerMove: updateCropGesture,
-        onPointerUp: finishCropGesture,
-        onPointerCancel: cancelCropGesture
-      }
-    ),
-    EDGES.map((edge) => {
-      const vertical = edge === "left" || edge === "right";
-      const place = edgeHandlePlacement(edge, cropRect);
-      return /* @__PURE__ */ jsx97(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Crop ${edge}`,
-          "data-dom-edit-crop-handle": "true",
-          className: "pointer-events-auto absolute rounded-full bg-studio-accent shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",
-          style: {
-            left: place.left,
-            top: place.top,
-            width: vertical ? 5 : 26,
-            height: vertical ? 26 : 5,
-            transform: place.transform,
-            cursor: vertical ? "ew-resize" : "ns-resize",
-            touchAction: "none"
-          },
-          onPointerDown: (event) => startCropGesture(edge, event),
-          onPointerMove: updateCropGesture,
-          onPointerUp: finishCropGesture,
-          onPointerCancel: cancelCropGesture
-        },
-        edge
-      );
-    })
-  ] });
+        ) }),
+        /* @__PURE__ */ jsx97(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute border border-dashed border-studio-accent",
+            style: {
+              left: cropRect.left,
+              top: cropRect.top,
+              width: cropRect.width,
+              height: cropRect.height
+            },
+            children: dragging && /* @__PURE__ */ jsxs81(Fragment30, { children: [
+              /* @__PURE__ */ jsx97("div", { className: "absolute inset-y-0 left-1/3 w-px bg-studio-accent/40" }),
+              /* @__PURE__ */ jsx97("div", { className: "absolute inset-y-0 left-2/3 w-px bg-studio-accent/40" }),
+              /* @__PURE__ */ jsx97("div", { className: "absolute inset-x-0 top-1/3 h-px bg-studio-accent/40" }),
+              /* @__PURE__ */ jsx97("div", { className: "absolute inset-x-0 top-2/3 h-px bg-studio-accent/40" })
+            ] })
+          }
+        ),
+        hasCrop && /* @__PURE__ */ jsx97(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Reposition crop",
+            "data-dom-edit-crop-handle": "true",
+            className: "pointer-events-auto absolute rounded-full border-2 border-studio-accent bg-studio-accent/30 shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",
+            style: {
+              left: cropRect.left + cropRect.width / 2,
+              top: cropRect.top + cropRect.height / 2,
+              width: 22,
+              height: 22,
+              transform: "translate(-50%, -50%)",
+              cursor: "move",
+              touchAction: "none"
+            },
+            onPointerDown: (event) => startCropGesture("move", event),
+            onPointerMove: updateCropGesture,
+            onPointerUp: finishCropGesture,
+            onPointerCancel: cancelCropGesture
+          }
+        ),
+        EDGES.map((edge) => {
+          const vertical = edge === "left" || edge === "right";
+          const place = edgeHandlePlacement(edge, cropRect);
+          return /* @__PURE__ */ jsx97(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Crop ${edge}`,
+              "data-dom-edit-crop-handle": "true",
+              className: "pointer-events-auto absolute rounded-full bg-studio-accent shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",
+              style: {
+                left: place.left,
+                top: place.top,
+                width: vertical ? 5 : 26,
+                height: vertical ? 26 : 5,
+                transform: place.transform,
+                cursor: vertical ? "ew-resize" : "ns-resize",
+                touchAction: "none"
+              },
+              onPointerDown: (event) => startCropGesture(edge, event),
+              onPointerMove: updateCropGesture,
+              onPointerUp: finishCropGesture,
+              onPointerCancel: cancelCropGesture
+            },
+            edge
+          );
+        })
+      ]
+    }
+  );
 }
 
 // src/components/editor/DomEditRotateHandle.tsx
@@ -44891,6 +45214,14 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     const target = event.target;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
     if (!hoverSelectionRef.current && onMarqueeSelectRef.current && compRect.width > 0) {
+      const iframe = iframeRef.current;
+      const freshTarget = iframe ? getPreviewTargetFromPointer(
+        iframe,
+        event.clientX,
+        event.clientY,
+        activeCompositionPathRef.current
+      ) : null;
+      if (freshTarget) return;
       const overlayEl = overlayRef.current;
       if (overlayEl) {
         const oRect = overlayEl.getBoundingClientRect();