hyperframes 0.7.28 → 0.7.30

package/dist/studio/index.js

@@ -3,6 +3,7 @@ import {
   buildDomEditPatchTarget,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
+  buildTextFieldChildLocator,
   collectDomEditLayerItems,
   domEditSelectionToFacts,
   findElementForSelection,
@@ -12,13 +13,14 @@ import {
   getDomLayerPatchTarget,
   isElementComputedVisible,
   isElementVisibleThroughAncestors,
+  isHtmlElement,
   isTextEditableSelection,
   readHfId,
   resolveAllVisualDomEditTargets,
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-AN2EWWK3.js";
+} from "./chunk-JND3XUJL.js";
 
 // src/components/nle/NLELayout.tsx
 import {
@@ -769,7 +771,7 @@ function readTimelineDurationFromDocument(doc) {
   }
   return maxEnd;
 }
-function isHtmlElement(el) {
+function isHtmlElement2(el) {
   const HtmlElementCtor = el.ownerDocument.defaultView?.HTMLElement ?? globalThis.HTMLElement;
   return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
 }
@@ -837,10 +839,10 @@ function getImplicitTimelineLayerLabel(el) {
   return getTimelineElementDisplayLabel({ tag: el.tagName });
 }
 function getTimelineElementSelector(el) {
-  if (isHtmlElement(el) && el.id) return `#${CSS.escape(el.id)}`;
+  if (isHtmlElement2(el) && el.id) return `#${CSS.escape(el.id)}`;
   const compId = el.getAttribute("data-composition-id");
   if (compId) return `[data-composition-id="${CSS.escape(compId)}"]`;
-  if (isHtmlElement(el)) {
+  if (isHtmlElement2(el)) {
     const classes = el.className.split(/\s+/).filter(Boolean);
     const firstClass = classes.find((className) => className !== "clip") ?? classes[0];
     if (firstClass) return `.${CSS.escape(firstClass)}`;
@@ -923,7 +925,7 @@ function findTimelineDomNodeForClip(doc, clip, fallbackIndex, usedNodes = /* @__
   return candidates[fallbackIndex] ?? null;
 }
 function isImplicitTimelineLayerCandidate(root, el) {
-  if (!isHtmlElement(el)) return false;
+  if (!isHtmlElement2(el)) return false;
   if (isTimelineIgnoredElement(el)) return false;
   if (el.parentElement !== root) return false;
   const tagName = el.tagName.toLowerCase();
@@ -1600,27 +1602,28 @@ async function flushEvents() {
     clearTimeout(timeout);
   }
 }
+function flushViaBeacon() {
+  if (flushTimer) {
+    clearInterval(flushTimer);
+    flushTimer = null;
+  }
+  if (queue.length === 0) return;
+  const batch = queue.map((e) => ({
+    event: e.event,
+    properties: { ...e.properties, $ip: null },
+    distinct_id: getDistinctId(),
+    timestamp: e.timestamp
+  }));
+  queue = [];
+  const body = JSON.stringify({ api_key: POSTHOG_API_KEY, batch });
+  try {
+    navigator.sendBeacon(`${POSTHOG_HOST}/batch/`, body);
+  } catch {
+  }
+}
 if (typeof window !== "undefined") {
   window.addEventListener("visibilitychange", () => {
-    if (document.visibilityState === "hidden") {
-      if (flushTimer) {
-        clearInterval(flushTimer);
-        flushTimer = null;
-      }
-      if (queue.length === 0) return;
-      const batch = queue.map((e) => ({
-        event: e.event,
-        properties: { ...e.properties, $ip: null },
-        distinct_id: getDistinctId(),
-        timestamp: e.timestamp
-      }));
-      queue = [];
-      const body = JSON.stringify({ api_key: POSTHOG_API_KEY, batch });
-      try {
-        navigator.sendBeacon(`${POSTHOG_HOST}/batch/`, body);
-      } catch {
-      }
-    }
+    if (document.visibilityState === "hidden") flushViaBeacon();
   });
 }
 
@@ -12763,24 +12766,34 @@ function Section({
       children: /* @__PURE__ */ jsx31("path", { d: "M2 3l3 4 3-4z" })
     }
   );
-  return /* @__PURE__ */ jsxs24("section", { className: "min-w-0 border-t border-panel-border", children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex w-full items-center gap-2 px-4 py-2.5", children: [
-      /* @__PURE__ */ jsxs24(
-        "button",
-        {
-          type: "button",
-          onClick: () => setCollapsed((v) => !v),
-          className: "flex min-w-0 flex-1 items-center justify-between gap-2 text-left",
-          children: [
-            /* @__PURE__ */ jsx31("h3", { className: "text-[12px] font-semibold text-panel-text-1", children: title }),
-            collapseIcon
-          ]
-        }
-      ),
-      accessory && /* @__PURE__ */ jsx31("div", { className: "flex flex-shrink-0 items-center", children: accessory })
-    ] }),
-    !collapsed && /* @__PURE__ */ jsx31("div", { className: "px-4 pb-3", children })
-  ] });
+  return /* @__PURE__ */ jsxs24(
+    "section",
+    {
+      className: "min-w-0 border-t border-panel-border",
+      "data-panel-section": slugifyPanelSectionTitle(title),
+      children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex w-full items-center gap-2 px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs24(
+            "button",
+            {
+              type: "button",
+              onClick: () => setCollapsed((v) => !v),
+              className: "flex min-w-0 flex-1 items-center justify-between gap-2 text-left",
+              children: [
+                /* @__PURE__ */ jsx31("h3", { className: "text-[12px] font-semibold text-panel-text-1", children: title }),
+                collapseIcon
+              ]
+            }
+          ),
+          accessory && /* @__PURE__ */ jsx31("div", { className: "flex flex-shrink-0 items-center", children: accessory })
+        ] }),
+        !collapsed && /* @__PURE__ */ jsx31("div", { className: "px-4 pb-3", children })
+      ]
+    }
+  );
+}
+function slugifyPanelSectionTitle(title) {
+  return title.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
 }
 
 // src/components/editor/propertyPanelTransformCommit.ts
@@ -19920,7 +19933,7 @@ var FileTree = memo24(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState92, useCallback as useCallback108, useRef as useRef90, useMemo as useMemo37, useEffect as useEffect67, useLayoutEffect as useLayoutEffect3 } from "react";
+import { useState as useState92, useCallback as useCallback109, useRef as useRef91, useMemo as useMemo37, useEffect as useEffect67, useLayoutEffect as useLayoutEffect3 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState37, useEffect as useEffect26, useCallback as useCallback32, useRef as useRef35, useMemo as useMemo18 } from "react";
@@ -21271,10 +21284,12 @@ import { useState as useState43, useCallback as useCallback38, useRef as useRef4
 var STUDIO_SAVE_ATTEMPT_PROPERTY = "__studioSaveAttempt";
 var StudioSaveHttpError = class extends Error {
   statusCode;
-  constructor(message, statusCode) {
+  alreadyToasted;
+  constructor(message, statusCode, options = {}) {
     super(message);
     this.name = "StudioSaveHttpError";
     this.statusCode = statusCode;
+    this.alreadyToasted = options.alreadyToasted ?? false;
   }
 };
 var StudioSaveNetworkError = class extends Error {
@@ -21358,7 +21373,7 @@ function buildStudioSaveFailureProperties(input) {
 function trackStudioSaveFailure(input) {
   trackStudioEvent("save_failure", buildStudioSaveFailureProperties(input));
 }
-async function createStudioSaveHttpError(response, fallbackMessage) {
+async function createStudioSaveHttpError(response, fallbackMessage, options = {}) {
   let body = "";
   try {
     body = await response.text();
@@ -21367,7 +21382,7 @@ async function createStudioSaveHttpError(response, fallbackMessage) {
   }
   const detail = body.trim().slice(0, 300);
   const message = detail ? `${fallbackMessage} (${response.status}): ${detail}` : `${fallbackMessage} (${response.status})`;
-  return new StudioSaveHttpError(message, response.status);
+  return new StudioSaveHttpError(message, response.status, options);
 }
 async function retryStudioSave(operation, options = {}) {
   const retries = options.retries ?? 3;
@@ -22453,6 +22468,42 @@ function sdkResolverShadowCheck(session, hfId, ops, sourceContent) {
     if (inverse.length > 0) session.applyPatches(inverse);
   }
 }
+var attemptCounts = {};
+function recordAttempt(opLabel) {
+  attemptCounts[opLabel] = (attemptCounts[opLabel] ?? 0) + 1;
+  ensureAttemptFlushScheduled();
+}
+function flushAttemptCounts() {
+  const keys = Object.keys(attemptCounts);
+  if (keys.length === 0) return null;
+  const snapshot = {};
+  for (const key of keys) {
+    snapshot[key] = attemptCounts[key];
+    delete attemptCounts[key];
+  }
+  return snapshot;
+}
+var ATTEMPT_FLUSH_INTERVAL_MS = 5 * 6e4;
+var attemptFlushTimer = null;
+var attemptVisibilityHandler = null;
+function flushAndEmitAttempts() {
+  const counts = flushAttemptCounts();
+  if (counts === null) return;
+  trackStudioEvent("sdk_resolver_shadow_attempt", { counts: JSON.stringify(counts) });
+}
+function ensureAttemptFlushScheduled() {
+  if (!attemptFlushTimer) {
+    attemptFlushTimer = setInterval(flushAndEmitAttempts, ATTEMPT_FLUSH_INTERVAL_MS);
+  }
+  if (!attemptVisibilityHandler && typeof document !== "undefined") {
+    attemptVisibilityHandler = () => {
+      if (document.visibilityState !== "hidden") return;
+      flushAndEmitAttempts();
+      flushViaBeacon();
+    };
+    document.addEventListener("visibilitychange", attemptVisibilityHandler);
+  }
+}
 function redactValue(value) {
   if (value == null) return value;
   return `[redacted len=${value.length}]`;
@@ -22468,6 +22519,7 @@ function runResolverShadow(session, hfId, ops, sourceContent) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!hfId) return;
   try {
+    recordAttempt("dom-edit");
     const mismatches = sdkResolverShadowCheck(session, hfId, ops, sourceContent);
     if (mismatches.length === 0) return;
     const isElementNotFound = mismatches.some((m) => m.kind === "element_not_found");
@@ -22497,6 +22549,7 @@ async function recordResolverParity(session, hfId, opLabel, readSource) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !hfId) return;
   try {
+    recordAttempt(opLabel);
     if (resolveSnapshot(session, hfId)) return;
     const sessionElementCount = session.getElements().length;
     let source;
@@ -22536,6 +22589,7 @@ function recordAnimationResolverParity(session, animationId, opLabel) {
   if (!STUDIO_SDK_RESOLVER_SHADOW_ENABLED) return;
   if (!session || !animationId) return;
   try {
+    recordAttempt(opLabel);
     const elements = session.getElements();
     const resolves = elements.some((el) => el.animationIds.includes(animationId));
     if (resolves) return;
@@ -22674,6 +22728,9 @@ function hasUnsafeHtmlAttributeOp(ops) {
     (op) => op.type === "html-attribute" && (!isAllowedHtmlAttribute(op.property) || op.value !== null && !isSafeAttributeValue(op.property, op.value))
   );
 }
+function hasChildScopedOp(ops) {
+  return ops.some((op) => op.childSelector !== void 0);
+}
 function hasTextContentOp(ops) {
   return ops.some((op) => op.type === "text-content");
 }
@@ -22697,7 +22754,8 @@ function shouldDeclineTextCutoverForTarget(target, ops) {
   return tag !== null && NON_HTML_CHILD_TAGS.has(tag);
 }
 function shouldUseSdkCutover(flagEnabled, hasSession, hfId, ops) {
-  return flagEnabled && hasSession && !!hfId && ops.length > 0 && ops.every((o) => CUTOVER_OP_TYPES.has(o.type)) && !ops.some(mapsToReservedAttr) && !hasUnsafeHtmlAttributeOp(ops);
+  return flagEnabled && hasSession && !!hfId && ops.length > 0 && ops.every((o) => CUTOVER_OP_TYPES.has(o.type)) && // SDK edit ops target only the element hfId; child-scoped patch ops need the server path.
+  !hasChildScopedOp(ops) && !ops.some(mapsToReservedAttr) && !hasUnsafeHtmlAttributeOp(ops);
 }
 
 // src/utils/sdkCutover.ts
@@ -23382,7 +23440,7 @@ function useTimelineEditing({
 }
 
 // src/hooks/useDomEditSession.ts
-import { useCallback as useCallback64 } from "react";
+import { useCallback as useCallback65 } from "react";
 
 // src/hooks/useAskAgentModal.ts
 import { useState as useState45, useCallback as useCallback42, useRef as useRef45, useEffect as useEffect29 } from "react";
@@ -23540,6 +23598,65 @@ function removePointerEventsOverride(style) {
   } catch {
   }
 }
+var pointerEventsInheritanceFallbackByDocument = /* @__PURE__ */ new WeakMap();
+function needsPointerEventsInheritanceFallback(doc, win) {
+  const cached2 = pointerEventsInheritanceFallbackByDocument.get(doc);
+  if (cached2 !== void 0) return cached2;
+  const parent = doc.createElement("div");
+  const child = doc.createElement("div");
+  parent.style.pointerEvents = "none";
+  parent.appendChild(child);
+  const host = doc.body ?? doc.documentElement;
+  if (!host) return false;
+  host.appendChild(parent);
+  const needsFallback = win.getComputedStyle(child).pointerEvents !== "none";
+  parent.remove();
+  pointerEventsInheritanceFallbackByDocument.set(doc, needsFallback);
+  return needsFallback;
+}
+function hasOwnPointerEventsOverride(el, win) {
+  const value = win.getComputedStyle(el).pointerEvents;
+  return value !== "" && value !== "inherit" && value !== "unset";
+}
+function inheritsPointerEventsNoneFromAncestor(el, win) {
+  let current = el.parentElement;
+  while (current) {
+    if (win.getComputedStyle(current).pointerEvents === "none") {
+      let descendant = el;
+      while (descendant && descendant !== current) {
+        if (hasOwnPointerEventsOverride(descendant, win)) {
+          return win.getComputedStyle(descendant).pointerEvents === "none";
+        }
+        descendant = descendant.parentElement;
+      }
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+function hasAuthorPointerEventsNone(el) {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return false;
+  if (win.getComputedStyle(el).pointerEvents === "none") return true;
+  if (!needsPointerEventsInheritanceFallback(el.ownerDocument, win)) return false;
+  return inheritsPointerEventsNoneFromAncestor(el, win);
+}
+function collectPointerEventsNoneTargets(elements) {
+  const disabled = /* @__PURE__ */ new WeakSet();
+  for (const entry of elements) {
+    if (isHtmlElement(entry) && hasAuthorPointerEventsNone(entry)) {
+      disabled.add(entry);
+    }
+  }
+  return disabled;
+}
+function filterAuthorInteractiveTargets(elements, activeCompositionPath) {
+  const pointerEventsNoneTargets = collectPointerEventsNoneTargets(elements);
+  return resolveAllVisualDomEditTargets(elements, { activeCompositionPath }).filter(
+    (el) => !pointerEventsNoneTargets.has(el)
+  );
+}
 function findGroupAtPoint(doc, x, y) {
   let best = null;
   let bestArea = Infinity;
@@ -23577,20 +23694,24 @@ function getPreviewTargetFromPointer(iframe, clientX, clientY, activeComposition
   if (!doc || !win) return null;
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return null;
-  const overrideStyle = forcePointerEventsAuto(doc);
+  let overrideStyle = forcePointerEventsAuto(doc);
   try {
     if (typeof doc.elementsFromPoint === "function") {
-      const candidates = resolveAllVisualDomEditTargets(
-        doc.elementsFromPoint(localPointer.x, localPointer.y),
-        { activeCompositionPath }
-      );
+      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+      removePointerEventsOverride(overrideStyle);
+      overrideStyle = null;
+      const candidates = filterAuthorInteractiveTargets(elements, activeCompositionPath);
       const visualTarget = candidates.find((el) => !isFullBleedTarget(el, localPointer.viewport)) ?? null;
       if (visualTarget) return visualTarget;
     }
+    removePointerEventsOverride(overrideStyle);
+    overrideStyle = null;
     const groupHit = findGroupAtPoint(doc, localPointer.x, localPointer.y);
-    if (groupHit && getDomLayerPatchTarget(groupHit, activeCompositionPath)) return groupHit;
+    if (groupHit && !hasAuthorPointerEventsNone(groupHit) && getDomLayerPatchTarget(groupHit, activeCompositionPath))
+      return groupHit;
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
+    if (hasAuthorPointerEventsNone(fallback)) return null;
     if (!isElementComputedVisible(fallback)) return null;
     if (isFullBleedTarget(fallback, localPointer.viewport)) return null;
     return fallback;
@@ -23610,15 +23731,21 @@ function getAllPreviewTargetsFromPointer(iframe, clientX, clientY, activeComposi
   if (!doc || !win) return [];
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return [];
-  const overrideStyle = forcePointerEventsAuto(doc);
+  let overrideStyle = forcePointerEventsAuto(doc);
   try {
     if (typeof doc.elementsFromPoint === "function") {
-      return resolveAllVisualDomEditTargets(doc.elementsFromPoint(localPointer.x, localPointer.y), {
-        activeCompositionPath
-      }).filter((el) => !isFullBleedTarget(el, localPointer.viewport));
+      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+      removePointerEventsOverride(overrideStyle);
+      overrideStyle = null;
+      return filterAuthorInteractiveTargets(elements, activeCompositionPath).filter(
+        (el) => !isFullBleedTarget(el, localPointer.viewport)
+      );
     }
     const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
     if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return [];
+    removePointerEventsOverride(overrideStyle);
+    overrideStyle = null;
+    if (hasAuthorPointerEventsNone(fallback)) return [];
     if (!isElementComputedVisible(fallback)) return [];
     if (isFullBleedTarget(fallback, localPointer.viewport)) return [];
     return [fallback];
@@ -23730,6 +23857,7 @@ function useDomSelection({
   const domEditGroupSelectionsRef = useRef46(domEditGroupSelections);
   const domEditHoverSelectionRef = useRef46(domEditHoverSelection);
   const activeGroupElementRef = useRef46(activeGroupElement);
+  const compositionIdentityRef = useRef46({ activeCompPath, projectId });
   domEditSelectionRef.current = domEditSelection;
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
@@ -23791,6 +23919,8 @@ function useDomSelection({
   }, [applyDomSelection]);
   const setActiveGroupElement = useCallback43(
     (el) => {
+      if (activeGroupElementRef.current === el) return;
+      activeGroupElementRef.current = el;
       setActiveGroupElementState(el);
       applyDomSelection(null, { revealPanel: false });
     },
@@ -23963,6 +24093,14 @@ function useDomSelection({
   useEffect30(() => {
     updateDomEditHoverSelection(null);
   }, [activeCompPath, projectId, previewIframe, refreshKey, updateDomEditHoverSelection]);
+  useEffect30(() => {
+    const previous = compositionIdentityRef.current;
+    if (previous.activeCompPath === activeCompPath && previous.projectId === projectId) return;
+    compositionIdentityRef.current = { activeCompPath, projectId };
+    activeGroupElementRef.current = null;
+    setActiveGroupElementState(null);
+    applyDomSelection(null, { revealPanel: false });
+  }, [activeCompPath, projectId, applyDomSelection]);
   useEffect30(() => {
     if (!domEditHoverSelection) return;
     const shouldClear = captionEditMode || domEditSelectionsTargetSame(domEditHoverSelection, domEditSelection) || domEditSelectionInGroup(domEditGroupSelections, domEditHoverSelection) || !domEditHoverSelection.element.isConnected;
@@ -24076,6 +24214,15 @@ function usePreviewInteraction({
 }) {
   const cycleRef = useRef47(null);
   const lastDownRef = useRef47(null);
+  const pausePreviewPlayback = useCallback44(() => {
+    const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
+    const playerStore = usePlayerStore.getState();
+    playerStore.setIsPlaying(false);
+    if (pausedTime != null) {
+      playerStore.setCurrentTime(pausedTime);
+      liveTime.notify(pausedTime);
+    }
+  }, [previewIframeRef]);
   const handlePreviewCanvasMouseDown = useCallback44(
     // fallow-ignore-next-line complexity
     async (e, options) => {
@@ -24084,8 +24231,15 @@ function usePreviewInteraction({
       const lastDown = lastDownRef.current;
       const isDoubleClick = e.detail >= 2 || lastDown != null && downTs - lastDown.t < DOUBLE_CLICK_MS && Math.hypot(e.clientX - lastDown.x, e.clientY - lastDown.y) < DOUBLE_CLICK_RADIUS_PX;
       lastDownRef.current = { t: downTs, x: e.clientX, y: e.clientY };
+      const wasPlaying = usePlayerStore.getState().isPlaying;
+      pausePreviewPlayback();
+      const resumeIfNothingSelected = () => {
+        if (wasPlaying) usePlayerStore.getState().setIsPlaying(true);
+      };
       if (isDoubleClick && !e.shiftKey) {
         const hit = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY);
+        const cycle = cycleRef.current;
+        const hasStackCycleAtSpot = cycle !== null && cycle.candidates.length > 1 && Math.hypot(e.clientX - cycle.x, e.clientY - cycle.y) < CYCLE_RADIUS_PX && downTs - cycle.at < CYCLE_WINDOW_MS;
         if (hit?.element.hasAttribute("data-hf-group")) {
           e.preventDefault();
           e.stopPropagation();
@@ -24098,6 +24252,13 @@ function usePreviewInteraction({
           applyDomSelection(child ?? hit);
           return;
         }
+        if (hit && !hasStackCycleAtSpot && !hit.element.hasAttribute("data-composition-src") && !hit.element.hasAttribute("data-composition-file")) {
+          e.preventDefault();
+          e.stopPropagation();
+          cycleRef.current = null;
+          applyDomSelection(hit);
+          return;
+        }
       }
       const now = Date.now();
       const prev = cycleRef.current;
@@ -24108,8 +24269,11 @@ function usePreviewInteraction({
         cycleRef.current = null;
         const nextSelection2 = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
           preferClipAncestor: options?.preferClipAncestor ?? false
-        });
-        if (!nextSelection2) return;
+        }) ?? options?.hoverSelection ?? null;
+        if (!nextSelection2) {
+          resumeIfNothingSelected();
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
         applyDomSelection(nextSelection2, { additive: true });
@@ -24134,9 +24298,11 @@ function usePreviewInteraction({
           activeGroupElement: null
         });
       }
+      nextSelection = nextSelection ?? options?.hoverSelection ?? null;
       if (!nextSelection) {
         cycleRef.current = null;
         applyDomSelection(null, { revealPanel: false });
+        resumeIfNothingSelected();
         return;
       }
       e.preventDefault();
@@ -24153,6 +24319,7 @@ function usePreviewInteraction({
       captionEditMode,
       compositionLoading,
       onClickToSource,
+      pausePreviewPlayback,
       resolveAllDomSelectionsFromPreviewPoint,
       resolveDomSelectionFromPreviewPoint,
       setActiveGroupElement
@@ -24192,14 +24359,8 @@ function usePreviewInteraction({
     [showToast]
   );
   const handleDomManualDragStart = useCallback44(() => {
-    const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
-    const playerStore = usePlayerStore.getState();
-    playerStore.setIsPlaying(false);
-    if (pausedTime != null) {
-      playerStore.setCurrentTime(pausedTime);
-      liveTime.notify(pausedTime);
-    }
-  }, [previewIframeRef]);
+    pausePreviewPlayback();
+  }, [pausePreviewPlayback]);
   return {
     handlePreviewCanvasMouseDown,
     handlePreviewCanvasPointerMove,
@@ -24210,7 +24371,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback49, useRef as useRef49 } from "react";
+import { useCallback as useCallback50, useRef as useRef50 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -24282,6 +24443,66 @@ ${css2}
 ${html2}`;
 }
 
+// src/hooks/domEditPersistFailure.ts
+var DomEditPersistUnresolvableError = class extends Error {
+  constructor(targetPath) {
+    super(`Couldn't find this element in the source file (${targetPath})`);
+    this.name = "DomEditPersistUnresolvableError";
+  }
+};
+var DomEditPersistUnsafeValueError = class extends Error {
+  alreadyToasted;
+  constructor(message, options = {}) {
+    super(message);
+    this.name = "DomEditPersistUnsafeValueError";
+    this.alreadyToasted = options.alreadyToasted ?? false;
+  }
+};
+var DomEditPersistUnsupportedTextStructureError = class extends Error {
+  constructor() {
+    super("Couldn't save this text structure change");
+    this.name = "DomEditPersistUnsupportedTextStructureError";
+  }
+};
+function summarizeOperations(operations) {
+  return operations.map((op) => `${op.type}:${op.property}`).join(", ");
+}
+function getTargetTuple(selection) {
+  return {
+    hfId: selection.hfId,
+    id: selection.id,
+    selector: selection.selector,
+    selectorIndex: selection.selectorIndex,
+    sourceFile: selection.sourceFile
+  };
+}
+function getErrorDetail(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function getSelectionLabel(selection) {
+  return selection.label || selection.selector || selection.id || "this element";
+}
+function reportDomEditPersistFailure(selection, operations, error, showToast) {
+  const detail = getErrorDetail(error);
+  console.warn("[Studio] DOM edit persist failed", {
+    target: getTargetTuple(selection),
+    operations: summarizeOperations(operations),
+    error: detail
+  });
+  const wasAlreadyToasted = (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) && error.alreadyToasted;
+  if (wasAlreadyToasted) {
+    return;
+  }
+  showToast(`Couldn't save "${getSelectionLabel(selection)}": ${detail}`, "error");
+}
+function warnDomEditPersistNoOp(selection, operations) {
+  console.warn("[Studio] DOM edit persist no-op", {
+    target: getTargetTuple(selection),
+    operations: summarizeOperations(operations),
+    detail: "Server matched the target but reported no change even though the client believed the value changed."
+  });
+}
+
 // src/hooks/useDomEditPositionPatchCommit.ts
 import { useCallback as useCallback45 } from "react";
 function useDomEditPositionPatchCommit({
@@ -24319,114 +24540,154 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
+import { useCallback as useCallback47, useRef as useRef49 } from "react";
+
+// src/hooks/domEditTextFieldCommitOps.ts
+function hasSameKeysInSamePositions(originalFields, nextFields) {
+  return originalFields.every((field, index) => nextFields[index]?.key === field.key);
+}
+function inlineStyleValue(styles, property) {
+  return Object.prototype.hasOwnProperty.call(styles, property) ? styles[property] : null;
+}
+function inlineStyleProperties(originalStyles, nextStyles) {
+  return Array.from(/* @__PURE__ */ new Set([...Object.keys(originalStyles), ...Object.keys(nextStyles)]));
+}
+function buildTextFieldChildOperations(originalFields, nextFields) {
+  if (originalFields.length !== nextFields.length) return null;
+  if (!hasSameKeysInSamePositions(originalFields, nextFields)) return null;
+  if (nextFields.some((field) => field.source === "text-node")) return null;
+  if (nextFields.some((field) => field.source !== "child")) return null;
+  if (originalFields.some((field) => field.source !== "child")) return null;
+  const originalByKey = new Map(originalFields.map((field) => [field.key, field]));
+  const operations = [];
+  for (const nextField of nextFields) {
+    const originalField = originalByKey.get(nextField.key);
+    const locator = buildTextFieldChildLocator(originalFields, nextField.key);
+    if (!originalField || !locator) return null;
+    if (nextField.value !== originalField.value) {
+      operations.push(buildDomEditTextPatchOperation(nextField.value, locator));
+    }
+    for (const property of inlineStyleProperties(
+      originalField.inlineStyles,
+      nextField.inlineStyles
+    )) {
+      const originalValue = inlineStyleValue(originalField.inlineStyles, property);
+      const nextValue = inlineStyleValue(nextField.inlineStyles, property);
+      if (nextValue !== originalValue) {
+        operations.push(buildDomEditStylePatchOperation(property, nextValue, locator));
+      }
+    }
+  }
+  return operations;
+}
+
+// src/hooks/domEditCommitRunner.ts
+function bumpDomEditCommitVersion(versionRef) {
+  const commitVersion = versionRef.current + 1;
+  versionRef.current = commitVersion;
+  return () => versionRef.current === commitVersion;
+}
+function bumpDomEditCommitMapVersion(versionMap, versionKey) {
+  const commitVersion = (versionMap.get(versionKey) ?? 0) + 1;
+  versionMap.set(versionKey, commitVersion);
+  return () => versionMap.get(versionKey) === commitVersion;
+}
+async function runDomEditCommit(config) {
+  config.capture();
+  config.apply();
+  try {
+    await config.persist();
+  } catch (error) {
+    if (config.shouldRevert(error)) {
+      config.revert();
+    }
+    config.onError(error);
+  }
+  if (!config.shouldResync()) return;
+  await config.resync();
+}
+
+// src/hooks/useDomEditAttributeCommits.ts
 import { useCallback as useCallback46, useRef as useRef48 } from "react";
-function applyPreviewAttribute(doc, selection, activeCompPath, attr, value, options = {}) {
-  if (!doc) return;
-  const el = findElementForSelection(doc, selection, activeCompPath);
-  if (!el) return;
-  const fullAttr = options.prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
-  if (value === null || value === "" || options.removeFalse && value === "false") {
+function resolveFullAttrName(attr, prefixData) {
+  return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
+}
+function setOrRemovePreviewAttribute(el, fullAttr, value) {
+  if (value === null) {
     el.removeAttribute(fullAttr);
   } else {
     el.setAttribute(fullAttr, value);
   }
 }
-function useDomEditTextCommits({
+function findPreviewAttributeElement(doc, selection, activeCompPath) {
+  if (!doc) return null;
+  return findElementForSelection(doc, selection, activeCompPath);
+}
+function captureAttributeElement(doc, selection, activeCompPath, fullAttr) {
+  const el = findPreviewAttributeElement(doc, selection, activeCompPath);
+  if (!el) return null;
+  return { element: el, previousValue: el.getAttribute(fullAttr) };
+}
+function useDomEditAttributeCommits({
   activeCompPath,
   previewIframeRef,
+  showToast,
   domEditSelection,
-  applyDomSelection,
   refreshDomEditSelectionFromPreview,
-  buildDomSelectionFromTarget,
-  persistDomEditOperations,
-  resolveImportedFontAsset
+  persistDomEditOperations
 }) {
-  const domTextCommitVersionRef = useRef48(0);
-  const handleDomStyleCommit = useCallback46(
-    async (property, value) => {
-      if (!domEditSelection) return;
-      if (isManualGeometryStyleProperty(property)) return;
-      if (!domEditSelection.capabilities.canEditStyles) return;
-      const importedFont = property === "font-family" ? resolveImportedFontAsset(value) : null;
-      const iframe = previewIframeRef.current;
-      const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) {
-          el.style.setProperty(property, normalizeDomEditStyleValue(property, value));
-          if (property === "font-family") {
-            injectPreviewGoogleFont(doc, value);
-            if (importedFont) injectPreviewImportedFont(doc, importedFont);
-          }
-          if (property === "background-image" && isImageBackgroundValue(value)) {
-            el.style.setProperty("background-position", "center");
-            el.style.setProperty("background-repeat", "no-repeat");
-            el.style.setProperty("background-size", "contain");
-          }
-        }
-      }
-      const operations = [
-        buildDomEditStylePatchOperation(property, normalizeDomEditStyleValue(property, value))
-      ];
-      if (property === "background-image" && isImageBackgroundValue(value)) {
-        operations.push(
-          buildDomEditStylePatchOperation("background-position", "center"),
-          buildDomEditStylePatchOperation("background-repeat", "no-repeat"),
-          buildDomEditStylePatchOperation("background-size", "contain")
-        );
-      }
-      const skipRefresh = property !== "z-index";
-      try {
-        await persistDomEditOperations(domEditSelection, operations, {
-          label: "Edit layer style",
-          skipRefresh,
-          prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
-        });
-      } catch {
-      }
-      refreshDomEditSelectionFromPreview(domEditSelection);
-    },
-    [
-      activeCompPath,
-      domEditSelection,
-      persistDomEditOperations,
-      refreshDomEditSelectionFromPreview,
-      resolveImportedFontAsset,
-      previewIframeRef
-    ]
-  );
+  const domAttributeCommitVersionRef = useRef48(/* @__PURE__ */ new Map());
   const commitDataAttribute = useCallback46(
     async (attr, value, options) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
-      applyPreviewAttribute(
-        iframe?.contentDocument,
-        domEditSelection,
-        activeCompPath,
-        attr,
-        value,
-        {
-          prefixData: true
-        }
+      const fullAttr = resolveFullAttrName(attr, true);
+      const commitKey = `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`;
+      const isLatestCommit = bumpDomEditCommitMapVersion(
+        domAttributeCommitVersionRef.current,
+        commitKey
       );
       const op = { type: "attribute", property: attr, value };
-      try {
-        await persistDomEditOperations(domEditSelection, [op], {
+      let editedElement = null;
+      let previousValue = null;
+      await runDomEditCommit({
+        capture: () => {
+          const captured = captureAttributeElement(
+            iframe?.contentDocument,
+            domEditSelection,
+            activeCompPath,
+            fullAttr
+          );
+          if (!captured) return;
+          editedElement = captured.element;
+          previousValue = captured.previousValue;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          const nextValue = value === null || value === "" ? null : value;
+          setOrRemovePreviewAttribute(editedElement, fullAttr, nextValue);
+        },
+        persist: () => persistDomEditOperations(domEditSelection, [op], {
           label: options.label,
-          coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
+          coalesceKey: commitKey,
           skipRefresh: options.skipRefresh
-        });
-      } catch {
-      }
-      if (options.refreshAfter) {
-        refreshDomEditSelectionFromPreview(domEditSelection);
-      }
+        }),
+        shouldRevert: () => isLatestCommit(),
+        revert: () => {
+          if (!editedElement) return;
+          setOrRemovePreviewAttribute(editedElement, fullAttr, previousValue);
+        },
+        onError: (error) => reportDomEditPersistFailure(domEditSelection, [op], error, showToast),
+        shouldResync: () => isLatestCommit() && !!options.refreshAfter,
+        resync: () => refreshDomEditSelectionFromPreview(domEditSelection)
+      });
     },
     [
       activeCompPath,
       domEditSelection,
       persistDomEditOperations,
       refreshDomEditSelectionFromPreview,
+      showToast,
       previewIframeRef
     ]
   );
@@ -24436,7 +24697,6 @@ function useDomEditTextCommits({
         label: `Edit ${attr.replace(/-/g, " ")}`,
         coalescePrefix: "attr",
         skipRefresh: false,
-        warningMessage: "[Studio] Attribute persist failed:",
         refreshAfter: true
       });
     },
@@ -24447,8 +24707,7 @@ function useDomEditTextCommits({
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
         coalescePrefix: "attr-live",
-        skipRefresh: true,
-        warningMessage: "[Studio] Live attribute persist failed:"
+        skipRefresh: true
       });
     },
     [commitDataAttribute]
@@ -24457,76 +24716,242 @@ function useDomEditTextCommits({
     async (attr, value) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
-      applyPreviewAttribute(
-        iframe?.contentDocument,
-        domEditSelection,
-        activeCompPath,
-        attr,
-        value,
-        {
-          removeFalse: true
-        }
+      const commitKey = `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`;
+      const isLatestCommit = bumpDomEditCommitMapVersion(
+        domAttributeCommitVersionRef.current,
+        commitKey
       );
       const op = { type: "html-attribute", property: attr, value };
-      try {
-        await persistDomEditOperations(domEditSelection, [op], {
+      let editedElement = null;
+      let previousValue = null;
+      await runDomEditCommit({
+        capture: () => {
+          const captured = captureAttributeElement(
+            iframe?.contentDocument,
+            domEditSelection,
+            activeCompPath,
+            attr
+          );
+          if (!captured) return;
+          editedElement = captured.element;
+          previousValue = captured.previousValue;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          const nextValue = value === null || value === "false" ? null : value;
+          setOrRemovePreviewAttribute(editedElement, attr, nextValue);
+        },
+        persist: () => persistDomEditOperations(domEditSelection, [op], {
           label: `Edit ${attr}`,
-          coalesceKey: `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
+          coalesceKey: commitKey,
           skipRefresh: false
-        });
-      } catch {
-      }
-      refreshDomEditSelectionFromPreview(domEditSelection);
+        }),
+        shouldRevert: () => isLatestCommit(),
+        revert: () => {
+          if (!editedElement) return;
+          setOrRemovePreviewAttribute(editedElement, attr, previousValue);
+        },
+        onError: (error) => reportDomEditPersistFailure(domEditSelection, [op], error, showToast),
+        shouldResync: () => isLatestCommit(),
+        resync: () => refreshDomEditSelectionFromPreview(domEditSelection)
+      });
+    },
+    [
+      activeCompPath,
+      domEditSelection,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      showToast,
+      previewIframeRef
+    ]
+  );
+  return {
+    handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
+    handleDomHtmlAttributeCommit
+  };
+}
+
+// src/hooks/useDomEditTextCommits.ts
+function buildDomStyleCommitOperations(property, value, isImageBackgroundCommit) {
+  const operations = [
+    buildDomEditStylePatchOperation(property, normalizeDomEditStyleValue(property, value))
+  ];
+  if (isImageBackgroundCommit) {
+    operations.push(
+      buildDomEditStylePatchOperation("background-position", "center"),
+      buildDomEditStylePatchOperation("background-repeat", "no-repeat"),
+      buildDomEditStylePatchOperation("background-size", "contain")
+    );
+  }
+  return operations;
+}
+function buildNextDomTextFields(textFields, value, fieldKey) {
+  if (textFields.length === 0) return [];
+  return textFields.map((field) => field.key === fieldKey ? { ...field, value } : field);
+}
+function planDomTextCommit(originalTextFields, nextTextFields, plainTextContent) {
+  const usesSerializedTextFields = nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child");
+  const nextContent = usesSerializedTextFields ? serializeDomEditTextFields(nextTextFields) : plainTextContent;
+  const childOperations = usesSerializedTextFields ? buildTextFieldChildOperations(originalTextFields, nextTextFields) : null;
+  const operations = childOperations ?? (usesSerializedTextFields ? [] : [buildDomEditTextPatchOperation(nextContent)]);
+  return {
+    usesSerializedTextFields,
+    nextContent,
+    childOperations,
+    operations
+  };
+}
+async function resyncDomTextSelectionFromPreview(doc, selection, activeCompPath, buildDomSelectionFromTarget, applyDomSelection) {
+  if (!doc) return;
+  const refreshed = findElementForSelection(doc, selection, activeCompPath);
+  if (!refreshed) return;
+  const nextSelection = await buildDomSelectionFromTarget(refreshed);
+  if (!nextSelection) return;
+  applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+}
+function useDomEditTextCommits({
+  activeCompPath,
+  previewIframeRef,
+  showToast,
+  domEditSelection,
+  applyDomSelection,
+  refreshDomEditSelectionFromPreview,
+  buildDomSelectionFromTarget,
+  persistDomEditOperations,
+  resolveImportedFontAsset
+}) {
+  const domTextCommitVersionRef = useRef49(0);
+  const domStyleCommitVersionRef = useRef49(/* @__PURE__ */ new Map());
+  const { handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomHtmlAttributeCommit } = useDomEditAttributeCommits({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    domEditSelection,
+    refreshDomEditSelectionFromPreview,
+    persistDomEditOperations
+  });
+  const handleDomStyleCommit = useCallback47(
+    async (property, value) => {
+      if (!domEditSelection) return;
+      if (isManualGeometryStyleProperty(property)) return;
+      if (!domEditSelection.capabilities.canEditStyles) return;
+      const styleCommitKey = `${getDomEditTargetKey(domEditSelection)}:${property}`;
+      const isLatestStyleCommit = bumpDomEditCommitMapVersion(
+        domStyleCommitVersionRef.current,
+        styleCommitKey
+      );
+      const importedFont = property === "font-family" ? resolveImportedFontAsset(value) : null;
+      const iframe = previewIframeRef.current;
+      const doc = iframe?.contentDocument;
+      const normalizedValue = normalizeDomEditStyleValue(property, value);
+      const isImageBackgroundCommit = property === "background-image" && isImageBackgroundValue(value);
+      let editedElement = null;
+      let previousInlineValue = null;
+      const operations = buildDomStyleCommitOperations(property, value, isImageBackgroundCommit);
+      const skipRefresh = property !== "z-index";
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInlineValue = el.style.getPropertyValue(property);
+        },
+        apply: () => {
+          if (!editedElement) return;
+          editedElement.style.setProperty(property, normalizedValue);
+          if (property === "font-family" && doc) {
+            injectPreviewGoogleFont(doc, value);
+            if (importedFont) injectPreviewImportedFont(doc, importedFont);
+          }
+          if (isImageBackgroundCommit) {
+            editedElement.style.setProperty("background-position", "center");
+            editedElement.style.setProperty("background-repeat", "no-repeat");
+            editedElement.style.setProperty("background-size", "contain");
+          }
+        },
+        persist: () => persistDomEditOperations(domEditSelection, operations, {
+          label: "Edit layer style",
+          skipRefresh,
+          prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
+        }),
+        shouldRevert: () => isLatestStyleCommit(),
+        revert: () => {
+          if (!editedElement || previousInlineValue === null) return;
+          if (previousInlineValue === "") {
+            editedElement.style.removeProperty(property);
+          } else {
+            editedElement.style.setProperty(property, previousInlineValue);
+          }
+        },
+        onError: (error) => reportDomEditPersistFailure(domEditSelection, operations, error, showToast),
+        shouldResync: isLatestStyleCommit,
+        resync: () => refreshDomEditSelectionFromPreview(domEditSelection)
+      });
     },
     [
       activeCompPath,
       domEditSelection,
       persistDomEditOperations,
       refreshDomEditSelectionFromPreview,
+      resolveImportedFontAsset,
+      showToast,
       previewIframeRef
     ]
   );
-  const handleDomTextCommit = useCallback46(
+  const handleDomTextCommit = useCallback47(
     async (value, fieldKey) => {
       if (!domEditSelection) return;
       if (!isTextEditableSelection(domEditSelection)) return;
-      const commitVersion = domTextCommitVersionRef.current + 1;
-      domTextCommitVersionRef.current = commitVersion;
-      const nextTextFields = domEditSelection.textFields.length > 0 ? domEditSelection.textFields.map(
-        (field) => field.key === fieldKey ? { ...field, value } : field
-      ) : [];
-      const nextContent = nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child") ? serializeDomEditTextFields(nextTextFields) : value;
+      const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
+      const nextTextFields = buildNextDomTextFields(domEditSelection.textFields, value, fieldKey);
+      const textCommit = planDomTextCommit(domEditSelection.textFields, nextTextFields, value);
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) {
-          if (nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child")) {
-            el.innerHTML = nextContent;
+      let editedElement = null;
+      let previousInnerHtml = null;
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInnerHtml = el.innerHTML;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          if (textCommit.usesSerializedTextFields) {
+            editedElement.innerHTML = textCommit.nextContent;
           } else {
-            el.textContent = value;
+            editedElement.textContent = value;
           }
-        }
-      }
-      await persistDomEditOperations(
-        domEditSelection,
-        [buildDomEditTextPatchOperation(nextContent)],
-        {
-          label: "Edit text",
-          skipRefresh: true,
-          shouldSave: () => domTextCommitVersionRef.current === commitVersion
-        }
-      );
-      if (domTextCommitVersionRef.current !== commitVersion) return;
-      if (doc) {
-        const refreshed = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (refreshed) {
-          const nextSelection = await buildDomSelectionFromTarget(refreshed);
-          if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+        },
+        persist: async () => {
+          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
+            throw new DomEditPersistUnsupportedTextStructureError();
           }
-        }
-      }
+          await persistDomEditOperations(domEditSelection, textCommit.operations, {
+            label: "Edit text",
+            skipRefresh: true,
+            shouldSave: isLatestTextCommit
+          });
+        },
+        shouldRevert: () => isLatestTextCommit(),
+        revert: () => {
+          if (!editedElement || previousInnerHtml === null) return;
+          editedElement.innerHTML = previousInnerHtml;
+        },
+        onError: (error) => reportDomEditPersistFailure(domEditSelection, textCommit.operations, error, showToast),
+        shouldResync: isLatestTextCommit,
+        resync: () => resyncDomTextSelectionFromPreview(
+          doc,
+          domEditSelection,
+          activeCompPath,
+          buildDomSelectionFromTarget,
+          applyDomSelection
+        )
+      });
     },
     [
       activeCompPath,
@@ -24534,49 +24959,74 @@ function useDomEditTextCommits({
       buildDomSelectionFromTarget,
       domEditSelection,
       persistDomEditOperations,
-      previewIframeRef
+      previewIframeRef,
+      showToast
     ]
   );
-  const commitDomTextFields = useCallback46(
+  const commitDomTextFields = useCallback47(
     async (selection, nextTextFields, options) => {
-      const nextContent = nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child") ? serializeDomEditTextFields(nextTextFields) : nextTextFields[0]?.value ?? "";
+      const textCommit = planDomTextCommit(
+        selection.textFields,
+        nextTextFields,
+        nextTextFields[0]?.value ?? ""
+      );
       const iframe = previewIframeRef.current;
       const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, selection, activeCompPath);
-        if (el) {
-          if (nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child")) {
-            el.innerHTML = nextContent;
+      let editedElement = null;
+      let previousInnerHtml = null;
+      const importedFont = options?.importedFont ?? null;
+      await runDomEditCommit({
+        capture: () => {
+          if (!doc) return;
+          const el = findElementForSelection(doc, selection, activeCompPath);
+          if (!el) return;
+          editedElement = el;
+          previousInnerHtml = el.innerHTML;
+        },
+        apply: () => {
+          if (!editedElement) return;
+          if (textCommit.usesSerializedTextFields) {
+            editedElement.innerHTML = textCommit.nextContent;
           } else {
-            el.textContent = nextContent;
+            editedElement.textContent = textCommit.nextContent;
           }
-        }
-      }
-      const importedFont = options?.importedFont ?? null;
-      await persistDomEditOperations(selection, [buildDomEditTextPatchOperation(nextContent)], {
-        label: "Edit text",
-        skipRefresh: true,
-        prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
-      });
-      if (doc) {
-        const refreshed = findElementForSelection(doc, selection, activeCompPath);
-        if (refreshed) {
-          const nextSelection = await buildDomSelectionFromTarget(refreshed);
-          if (nextSelection) {
-            applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+        },
+        persist: async () => {
+          if (textCommit.usesSerializedTextFields && textCommit.childOperations === null) {
+            throw new DomEditPersistUnsupportedTextStructureError();
           }
-        }
-      }
+          await persistDomEditOperations(selection, textCommit.operations, {
+            label: "Edit text",
+            skipRefresh: true,
+            prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
+          });
+        },
+        shouldRevert: () => true,
+        revert: () => {
+          if (!editedElement || previousInnerHtml === null) return;
+          editedElement.innerHTML = previousInnerHtml;
+        },
+        onError: (error) => reportDomEditPersistFailure(selection, textCommit.operations, error, showToast),
+        shouldResync: () => true,
+        resync: () => resyncDomTextSelectionFromPreview(
+          doc,
+          selection,
+          activeCompPath,
+          buildDomSelectionFromTarget,
+          applyDomSelection
+        )
+      });
     },
     [
       activeCompPath,
       applyDomSelection,
       buildDomSelectionFromTarget,
       persistDomEditOperations,
-      previewIframeRef
+      previewIframeRef,
+      showToast
     ]
   );
-  const handleDomTextFieldStyleCommit = useCallback46(
+  const handleDomTextFieldStyleCommit = useCallback47(
     async (fieldKey, property, value) => {
       if (!domEditSelection) return;
       const field = domEditSelection.textFields.find((entry) => entry.key === fieldKey);
@@ -24617,7 +25067,7 @@ function useDomEditTextCommits({
       previewIframeRef
     ]
   );
-  const handleDomAddTextField = useCallback46(
+  const handleDomAddTextField = useCallback47(
     async (afterFieldKey) => {
       if (!domEditSelection) return null;
       if (!domEditSelection.textFields.some((field) => field.source === "child")) return null;
@@ -24637,7 +25087,7 @@ function useDomEditTextCommits({
     },
     [commitDomTextFields, domEditSelection]
   );
-  const handleDomRemoveTextField = useCallback46(
+  const handleDomRemoveTextField = useCallback47(
     async (fieldKey) => {
       if (!domEditSelection) return;
       const field = domEditSelection.textFields.find((entry) => entry.key === fieldKey);
@@ -24665,7 +25115,7 @@ function useDomEditTextCommits({
 }
 
 // src/hooks/useDomGeometryCommits.ts
-import { useCallback as useCallback47 } from "react";
+import { useCallback as useCallback48 } from "react";
 
 // src/components/editor/manualEditsDomPatches.ts
 function collectInlineStyleOps(element, properties, ops) {
@@ -24874,7 +25324,7 @@ function useDomGeometryCommits({
   showToast,
   commitPositionPatchToHtml
 }) {
-  const handleDomPathOffsetCommit = useCallback47(
+  const handleDomPathOffsetCommit = useCallback48(
     (selection, next) => {
       const gsapTargeted = isElementGsapTargeted(previewIframeRef.current, selection.element);
       if (gsapTargeted) {
@@ -24890,7 +25340,7 @@ function useDomGeometryCommits({
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast]
   );
-  const handleDomBoxSizeCommit = useCallback47(
+  const handleDomBoxSizeCommit = useCallback48(
     (selection, next) => {
       if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
@@ -24905,7 +25355,7 @@ function useDomGeometryCommits({
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast]
   );
-  const handleDomRotationCommit = useCallback47(
+  const handleDomRotationCommit = useCallback48(
     (selection, next) => {
       if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
@@ -24920,7 +25370,7 @@ function useDomGeometryCommits({
     },
     [commitPositionPatchToHtml, previewIframeRef, showToast]
   );
-  const handleDomManualEditsReset = useCallback47(
+  const handleDomManualEditsReset = useCallback48(
     (selection) => {
       const element = selection.element;
       const clearPatches = [
@@ -24948,7 +25398,7 @@ function useDomGeometryCommits({
 }
 
 // src/hooks/useElementLifecycleOps.ts
-import { useCallback as useCallback48 } from "react";
+import { useCallback as useCallback49 } from "react";
 function useElementLifecycleOps({
   activeCompPath,
   showToast,
@@ -24964,7 +25414,7 @@ function useElementLifecycleOps({
   commitPositionPatchToHtml,
   onElementDeleted
 }) {
-  const handleDomEditElementDelete = useCallback48(
+  const handleDomEditElementDelete = useCallback49(
     // fallow-ignore-next-line complexity
     async (selection) => {
       const pid = projectIdRef.current;
@@ -25046,7 +25496,7 @@ function useElementLifecycleOps({
       writeProjectFile
     ]
   );
-  const handleDomZIndexReorderCommit = useCallback48(
+  const handleDomZIndexReorderCommit = useCallback49(
     (entries) => {
       if (entries.length === 0) return;
       onReorderShadow?.(
@@ -25326,6 +25776,9 @@ async function assignGsapTargetAutoIdIfNeeded({
 function formatUnsafeFieldList(fields) {
   return fields.map((field) => field.path).join(", ");
 }
+function getErrorDetail2(error) {
+  return error instanceof Error ? error.message : String(error);
+}
 async function readErrorResponseBody(response) {
   const contentType = response.headers.get("content-type") ?? "";
   if (!contentType.includes("application/json")) return null;
@@ -25358,7 +25811,7 @@ function useDomEditCommits({
   onTrySdkDelete,
   onReorderShadow
 }) {
-  const resolveImportedFontAsset = useCallback49(
+  const resolveImportedFontAsset = useCallback50(
     (fontFamilyValue) => {
       const family = primaryFontFamilyValue(fontFamilyValue);
       if (!family) return null;
@@ -25378,8 +25831,8 @@ function useDomEditCommits({
     },
     [fileTree, projectId, importedFontAssetsRef]
   );
-  const reportedUnresolvableRef = useRef49(/* @__PURE__ */ new Set());
-  const persistDomEditOperations = useCallback49(
+  const reportedUnresolvableRef = useRef50(/* @__PURE__ */ new Set());
+  const persistDomEditOperations = useCallback50(
     // fallow-ignore-next-line complexity
     async (selection, operations, options) => {
       const pid = projectIdRef.current;
@@ -25404,7 +25857,9 @@ function useDomEditCommits({
       if (unsafeFields.length > 0) {
         const fields = formatUnsafeFieldList(unsafeFields);
         showToast("Couldn't save edit because it contains invalid layout values", "error");
-        throw new Error(`DOM patch contains unsafe values: ${fields}`);
+        throw new DomEditPersistUnsafeValueError(`DOM patch contains unsafe values: ${fields}`, {
+          alreadyToasted: true
+        });
       }
       if (onTrySdkPersist && !options?.prepareContent && await onTrySdkPersist(selection, operations, originalContent, targetPath, {
         label: options?.label,
@@ -25424,7 +25879,9 @@ function useDomEditCommits({
       );
       if (!patchResponse.ok) {
         showToast(formatPatchRejectionMessage(await readErrorResponseBody(patchResponse)), "error");
-        throw await createStudioSaveHttpError(patchResponse, `Failed to patch ${targetPath}`);
+        throw await createStudioSaveHttpError(patchResponse, `Failed to patch ${targetPath}`, {
+          alreadyToasted: true
+        });
       }
       const patchData = await patchResponse.json();
       if (!patchData.changed) {
@@ -25439,15 +25896,25 @@ function useDomEditCommits({
               composition: activeCompPath ?? void 0
             });
           }
+          throw new DomEditPersistUnresolvableError(targetPath);
         }
+        warnDomEditPersistNoOp(selection, operations);
         return;
       }
       const patchedContent = typeof patchData.content === "string" ? patchData.content : originalContent;
       let finalContent = patchedContent;
       if (options?.prepareContent) {
-        finalContent = options.prepareContent(patchedContent, targetPath);
-        if (finalContent !== patchedContent) {
-          await writeProjectFile(targetPath, finalContent);
+        const preparedContent = options.prepareContent(patchedContent, targetPath);
+        if (preparedContent !== patchedContent) {
+          try {
+            await writeProjectFile(targetPath, preparedContent);
+            finalContent = preparedContent;
+          } catch (error) {
+            showToast(
+              `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail2(error)}`,
+              "error"
+            );
+          }
         }
       }
       await editHistory.recordEdit({
@@ -25491,7 +25958,8 @@ function useDomEditCommits({
     refreshDomEditSelectionFromPreview,
     buildDomSelectionFromTarget,
     persistDomEditOperations,
-    resolveImportedFontAsset
+    resolveImportedFontAsset,
+    showToast
   });
   const commitPositionPatchToHtml = useDomEditPositionPatchCommit({
     activeCompPath,
@@ -25544,7 +26012,7 @@ function useDomEditCommits({
 }
 
 // src/hooks/useGroupCommits.ts
-import { useCallback as useCallback50 } from "react";
+import { useCallback as useCallback51 } from "react";
 function computeGroupGeometry(members) {
   const boxes = members.map((m) => ({
     target: buildDomEditPatchTarget(m),
@@ -25604,7 +26072,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
 }
 function useGroupCommits(params) {
   const { activeCompPath, showToast, projectIdRef } = params;
-  const groupSelection = useCallback50(
+  const groupSelection = useCallback51(
     async (members) => {
       const pid = projectIdRef.current;
       if (!pid || members.length === 0) return null;
@@ -25633,7 +26101,7 @@ function useGroupCommits(params) {
     },
     [activeCompPath, projectIdRef, showToast, params]
   );
-  const ungroupSelection = useCallback50(
+  const ungroupSelection = useCallback51(
     async (group) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -25657,7 +26125,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback56, useMemo as useMemo21, useRef as useRef51 } from "react";
+import { useCallback as useCallback57, useMemo as useMemo21, useRef as useRef52 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapKeyframeCacheHelpers.ts
@@ -26163,7 +26631,7 @@ function createKeyedSerializer() {
 }
 
 // src/hooks/useGsapAnimationOps.ts
-import { useCallback as useCallback51 } from "react";
+import { useCallback as useCallback52 } from "react";
 function useGsapAnimationOps({
   projectIdRef,
   activeCompPath,
@@ -26173,7 +26641,7 @@ function useGsapAnimationOps({
   sdkSession,
   sdkDeps
 }) {
-  const updateGsapMeta = useCallback51(
+  const updateGsapMeta = useCallback52(
     async (selection, animationId, updates) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26194,7 +26662,7 @@ function useGsapAnimationOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const deleteGsapAnimation = useCallback51(
+  const deleteGsapAnimation = useCallback52(
     async (selection, animationId) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26215,7 +26683,7 @@ function useGsapAnimationOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const deleteAllForSelector = useCallback51(
+  const deleteAllForSelector = useCallback52(
     async (selection, targetSelector) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26236,7 +26704,7 @@ function useGsapAnimationOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const addGsapAnimation = useCallback51(
+  const addGsapAnimation = useCallback52(
     // fallow-ignore-next-line complexity
     async (selection, method, _currentTime) => {
       const { selector, autoId } = ensureElementAddressable(selection);
@@ -26298,7 +26766,7 @@ function useGsapAnimationOps({
     },
     [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession, sdkDeps]
   );
-  const addWithKeyframes = useCallback51(
+  const addWithKeyframes = useCallback52(
     async (selection, targetSelector, position, duration, keyframes, ease, label = "Add animation with keyframes") => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26330,7 +26798,7 @@ function useGsapAnimationOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const replaceWithKeyframes = useCallback51(
+  const replaceWithKeyframes = useCallback52(
     async (selection, animationId, targetSelector, position, duration, keyframes, ease, label = "Replace animation with keyframes") => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26375,9 +26843,9 @@ function useGsapAnimationOps({
 }
 
 // src/hooks/useGsapArcPathOps.ts
-import { useCallback as useCallback52 } from "react";
+import { useCallback as useCallback53 } from "react";
 function useGsapArcPathOps(commitMutationSafely) {
-  const setArcPath = useCallback52(
+  const setArcPath = useCallback53(
     (selection, animationId, config) => {
       commitMutationSafely(
         selection,
@@ -26387,7 +26855,7 @@ function useGsapArcPathOps(commitMutationSafely) {
     },
     [commitMutationSafely]
   );
-  const updateArcSegment = useCallback52(
+  const updateArcSegment = useCallback53(
     (selection, animationId, segmentIndex, update) => {
       commitMutationSafely(
         selection,
@@ -26397,7 +26865,7 @@ function useGsapArcPathOps(commitMutationSafely) {
     },
     [commitMutationSafely]
   );
-  const removeArcPath = useCallback52(
+  const removeArcPath = useCallback53(
     (selection, animationId) => {
       commitMutationSafely(
         selection,
@@ -26411,7 +26879,7 @@ function useGsapArcPathOps(commitMutationSafely) {
 }
 
 // src/hooks/useGsapKeyframeOps.ts
-import { useCallback as useCallback53 } from "react";
+import { useCallback as useCallback54 } from "react";
 
 // src/utils/optimisticUpdate.ts
 async function executeOptimistic(options) {
@@ -26502,7 +26970,7 @@ function useGsapKeyframeOps({
   sdkSession,
   sdkDeps
 }) {
-  const addKeyframe = useCallback53(
+  const addKeyframe = useCallback54(
     (selection, animationId, percentage, property, value) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = {
@@ -26563,7 +27031,7 @@ function useGsapKeyframeOps({
     },
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps]
   );
-  const addKeyframeBatch = useCallback53(
+  const addKeyframeBatch = useCallback54(
     async (selection, animationId, percentage, properties) => {
       if (sdkSession && sdkDeps) {
         const sourceFile = selection.sourceFile || activeCompPath || "index.html";
@@ -26586,7 +27054,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const removeKeyframe = useCallback53(
+  const removeKeyframe = useCallback54(
     (selection, animationId, percentage) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = { type: "remove-keyframe", animationId, percentage };
@@ -26627,7 +27095,7 @@ function useGsapKeyframeOps({
     },
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps]
   );
-  const moveKeyframe = useCallback53(
+  const moveKeyframe = useCallback54(
     (selection, animationId, fromPercentage, toPercentage) => {
       const mutation = { type: "move-keyframe", animationId, fromPercentage, toPercentage };
       void commitMutation(selection, mutation, {
@@ -26639,7 +27107,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, trackGsapSaveFailure]
   );
-  const resizeKeyframedTween = useCallback53(
+  const resizeKeyframedTween = useCallback54(
     (selection, animationId, position, duration, pctRemap) => {
       const mutation = {
         type: "resize-keyframed-tween",
@@ -26657,7 +27125,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, trackGsapSaveFailure]
   );
-  const convertToKeyframes = useCallback53(
+  const convertToKeyframes = useCallback54(
     async (selection, animationId, resolvedFromValues, duration) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -26681,7 +27149,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const removeAllKeyframes = useCallback53(
+  const removeAllKeyframes = useCallback54(
     async (selection, animationId) => {
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       const elementId = selection.id ?? selection.selector?.match(/^#([\w-]+)/)?.[1] ?? null;
@@ -26704,7 +27172,7 @@ function useGsapKeyframeOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const commitKeyframeAtTime = useCallback53(
+  const commitKeyframeAtTime = useCallback54(
     (selection, absoluteTime, animations, properties) => commitKeyframeAtTimeImpl(selection, absoluteTime, animations, properties, commitMutation),
     [commitMutation]
   );
@@ -26721,7 +27189,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback54, useEffect as useEffect31, useRef as useRef50 } from "react";
+import { useCallback as useCallback55, useEffect as useEffect31, useRef as useRef51 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -26737,11 +27205,11 @@ function mergeTweenProperties(sdkSession, animationId, edited, kind) {
   }
 }
 function useGsapPropertyDebounce(commitMutationSafely, sdk) {
-  const pendingPropertyEditRef = useRef50(null);
-  const debounceTimerRef = useRef50(null);
-  const sdkRef = useRef50(sdk);
+  const pendingPropertyEditRef = useRef51(null);
+  const debounceTimerRef = useRef51(null);
+  const sdkRef = useRef51(sdk);
   sdkRef.current = sdk;
-  const flushPendingPropertyEdit = useCallback54(async () => {
+  const flushPendingPropertyEdit = useCallback55(async () => {
     const pending = pendingPropertyEditRef.current;
     if (!pending) return;
     pendingPropertyEditRef.current = null;
@@ -26774,7 +27242,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
       }
     );
   }, [commitMutationSafely]);
-  const updateGsapProperty = useCallback54(
+  const updateGsapProperty = useCallback55(
     (selection, animationId, property, value) => {
       pendingPropertyEditRef.current = { selection, animationId, property, value };
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
@@ -26790,7 +27258,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
       void flushPendingPropertyEdit();
     };
   }, [flushPendingPropertyEdit]);
-  const addGsapProperty = useCallback54(
+  const addGsapProperty = useCallback55(
     // fallow-ignore-next-line complexity
     async (selection, animationId, property) => {
       let defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
@@ -26834,7 +27302,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeProperty = useCallback54(
+  const removeProperty = useCallback55(
     async (selection, animationId, property, from) => {
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
@@ -26870,11 +27338,11 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeGsapProperty = useCallback54(
+  const removeGsapProperty = useCallback55(
     (selection, animationId, property) => removeProperty(selection, animationId, property, false),
     [removeProperty]
   );
-  const updateGsapFromProperty = useCallback54(
+  const updateGsapFromProperty = useCallback55(
     async (selection, animationId, property, value) => {
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
@@ -26913,7 +27381,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const addGsapFromProperty = useCallback54(
+  const addGsapFromProperty = useCallback55(
     async (selection, animationId, property) => {
       const defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
@@ -26947,7 +27415,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeGsapFromProperty = useCallback54(
+  const removeGsapFromProperty = useCallback55(
     (selection, animationId, property) => removeProperty(selection, animationId, property, true),
     [removeProperty]
   );
@@ -26962,12 +27430,12 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
 }
 
 // src/hooks/useSafeGsapCommitMutation.ts
-import { useCallback as useCallback55 } from "react";
+import { useCallback as useCallback56 } from "react";
 function getGsapMutationType(mutation) {
   return typeof mutation.type === "string" ? mutation.type : "gsap";
 }
 function useGsapSaveFailureTelemetry(activeCompPath) {
-  return useCallback55(
+  return useCallback56(
     (error, selection, mutation, label) => {
       trackStudioSaveFailure({
         source: "gsap_commit",
@@ -26984,7 +27452,7 @@ function useGsapSaveFailureTelemetry(activeCompPath) {
   );
 }
 function useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast) {
-  return useCallback55(
+  return useCallback56(
     (selection, mutation, options) => (
       // Return the chain so awaiting consumers (gesture commit, enable-keyframes)
       // run their post-actions AFTER the server save settles, not immediately.
@@ -27043,8 +27511,8 @@ function applyPreviewSync(iframe, result, options, reloadPreview) {
   }
 }
 function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, writeProjectFile, forceReloadSdkSession }) {
-  const serializerRef = useRef51(createKeyedSerializer());
-  const runCommit = useCallback56(async (selection, mutation, options) => {
+  const serializerRef = useRef52(createKeyedSerializer());
+  const runCommit = useCallback57(async (selection, mutation, options) => {
     const pid = projectIdRef.current;
     if (!pid) return;
     const unsafeFields = findUnsafeMutationValues(mutation);
@@ -27075,7 +27543,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     applyPreviewSync(previewIframeRef.current, result, options, reloadPreview);
     onCacheInvalidate();
   }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, forceReloadSdkSession]);
-  const commitMutation = useCallback56(
+  const commitMutation = useCallback57(
     (selection, mutation, options) => {
       const file = selection.sourceFile || activeCompPath || "index.html";
       const key = options.serializeKey ?? `gsap-file:${file}`;
@@ -27085,7 +27553,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
   );
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
   const commitMutationSafely = useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast);
-  const sdkRefresh = useCallback56(
+  const sdkRefresh = useCallback57(
     (after) => {
       const script = extractGsapScriptText(after);
       if (script) {
@@ -27097,11 +27565,11 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [previewIframeRef, reloadPreview, onCacheInvalidate]
   );
-  const serializeByFile = useCallback56(
+  const serializeByFile = useCallback57(
     (key, task) => serializerRef.current(key, task),
     []
   );
-  const readProjectFileContent = useCallback56(
+  const readProjectFileContent = useCallback57(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
@@ -27162,7 +27630,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
 }
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect32, useMemo as useMemo22, useRef as useRef52, useState as useState47, useCallback as useCallback57 } from "react";
+import { useEffect as useEffect32, useMemo as useMemo22, useRef as useRef53, useState as useState47, useCallback as useCallback58 } from "react";
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 
 // src/hooks/gsapRuntimeReaders.ts
@@ -28556,8 +29024,8 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
   const [allAnimations, setAllAnimations] = useState47([]);
   const [multipleTimelines, setMultipleTimelines] = useState47(false);
   const [unsupportedTimelinePattern, setUnsupportedTimelinePattern] = useState47(false);
-  const lastFetchKeyRef = useRef52("");
-  const retryTimerRef = useRef52(null);
+  const lastFetchKeyRef = useRef53("");
+  const retryTimerRef = useRef53(null);
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
@@ -28735,7 +29203,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
 }
 function useGsapCacheVersion() {
   const [version, setVersion] = useState47(0);
-  const bump = useCallback57(() => setVersion((v) => v + 1), []);
+  const bump = useCallback58(() => setVersion((v) => v + 1), []);
   return { version, bump };
 }
 function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeRef) {
@@ -28743,9 +29211,9 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
   const domClipChildrenKey = usePlayerStore(
     (s) => s.domClipChildren.map((c) => `${c.id}<${c.hostId}`).join("|")
   );
-  const lastFetchKeyRef = useRef52("");
-  const runtimeScanDoneRef = useRef52("");
-  const astFetchDoneRef = useRef52("");
+  const lastFetchKeyRef = useRef53("");
+  const runtimeScanDoneRef = useRef53("");
+  const astFetchDoneRef = useRef53("");
   useEffect32(() => {
     const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}:${domClipChildrenKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
@@ -28848,10 +29316,10 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
 }
 
 // src/hooks/useDomEditWiring.ts
-import { useCallback as useCallback61, useEffect as useEffect34, useRef as useRef55 } from "react";
+import { useCallback as useCallback62, useEffect as useEffect34, useRef as useRef56 } from "react";
 
 // src/hooks/useDomEditPreviewSync.ts
-import { useEffect as useEffect33, useRef as useRef53 } from "react";
+import { useEffect as useEffect33, useRef as useRef54 } from "react";
 function useDomEditPreviewSync({
   previewIframe,
   activeCompPath,
@@ -28917,7 +29385,7 @@ function useDomEditPreviewSync({
     applyStudioManualEditsToPreviewRef,
     gsapCacheVersion
   ]);
-  const openSourceRef = useRef53(openSourceForSelection);
+  const openSourceRef = useRef54(openSourceForSelection);
   openSourceRef.current = openSourceForSelection;
   useEffect33(
     // fallow-ignore-next-line complexity
@@ -28936,7 +29404,7 @@ function useDomEditPreviewSync({
 }
 
 // src/hooks/useGsapAnimationFetchFallback.ts
-import { useCallback as useCallback58 } from "react";
+import { useCallback as useCallback59 } from "react";
 var COLD_PARSE_RETRIES = 5;
 var COLD_PARSE_DELAY_MS = 120;
 var FETCH_ERROR_RETRIES = 1;
@@ -28948,7 +29416,7 @@ function selectElementAnimationsOrRetry(parsed, target) {
   return { kind: "resolved", animations: getAnimationsForElement(parsed.animations, target) };
 }
 function useGsapAnimationFetchFallback(projectId, gsapSourceFile) {
-  return useCallback58(
+  return useCallback59(
     (selection) => async () => {
       if (!projectId) return [];
       const target = { id: selection.id ?? null, selector: selection.selector ?? null };
@@ -28974,9 +29442,9 @@ function useGsapAnimationFetchFallback(projectId, gsapSourceFile) {
 }
 
 // src/hooks/useGsapInteractionFailureTelemetry.ts
-import { useCallback as useCallback59 } from "react";
+import { useCallback as useCallback60 } from "react";
 function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
-  return useCallback59(
+  return useCallback60(
     (error, selection, mutationType, label) => {
       trackStudioSaveFailure({
         source: "gsap_commit",
@@ -28995,7 +29463,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
 }
 
 // src/hooks/useGsapSelectionHandlers.ts
-import { useCallback as useCallback60, useRef as useRef54 } from "react";
+import { useCallback as useCallback61, useRef as useRef55 } from "react";
 function useGsapSelectionHandlers({
   domEditSelection,
   updateGsapProperty,
@@ -29018,9 +29486,9 @@ function useGsapSelectionHandlers({
   handleDomManualEditsReset,
   selectedGsapAnimations
 }) {
-  const lastSelectionRef = useRef54(null);
+  const lastSelectionRef = useRef55(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
-  const trackGsapHandlerFailure = useCallback60(
+  const trackGsapHandlerFailure = useCallback61(
     (error, selection, mutationType, label) => {
       trackStudioSaveFailure({
         source: "gsap_commit",
@@ -29035,14 +29503,14 @@ function useGsapSelectionHandlers({
     },
     []
   );
-  const handleGsapUpdateProperty = useCallback60(
+  const handleGsapUpdateProperty = useCallback61(
     (animId, prop, value) => {
       if (!domEditSelection) return;
       updateGsapProperty(domEditSelection, animId, prop, value);
     },
     [domEditSelection, updateGsapProperty]
   );
-  const handleGsapUpdateMeta = useCallback60(
+  const handleGsapUpdateMeta = useCallback61(
     (animId, updates, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29050,7 +29518,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, updateGsapMeta]
   );
-  const handleGsapDeleteAnimation = useCallback60(
+  const handleGsapDeleteAnimation = useCallback61(
     (animId) => {
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29058,7 +29526,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, deleteGsapAnimation]
   );
-  const handleGsapDeleteAllForElement = useCallback60(
+  const handleGsapDeleteAllForElement = useCallback61(
     (targetSelector) => {
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29067,7 +29535,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, deleteAllForSelector]
   );
-  const handleGsapAddAnimation = useCallback60(
+  const handleGsapAddAnimation = useCallback61(
     (method) => {
       if (!domEditSelection) return;
       void addGsapAnimation(domEditSelection, method, usePlayerStore.getState().currentTime).catch(
@@ -29081,42 +29549,42 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, addGsapAnimation, handleDomManualEditsReset, trackGsapHandlerFailure]
   );
-  const handleGsapAddProperty = useCallback60(
+  const handleGsapAddProperty = useCallback61(
     (animId, prop) => {
       if (!domEditSelection) return;
       addGsapProperty(domEditSelection, animId, prop);
     },
     [domEditSelection, addGsapProperty]
   );
-  const handleGsapRemoveProperty = useCallback60(
+  const handleGsapRemoveProperty = useCallback61(
     (animId, prop) => {
       if (!domEditSelection) return;
       removeGsapProperty(domEditSelection, animId, prop);
     },
     [domEditSelection, removeGsapProperty]
   );
-  const handleGsapUpdateFromProperty = useCallback60(
+  const handleGsapUpdateFromProperty = useCallback61(
     (animId, prop, value) => {
       if (!domEditSelection) return;
       updateGsapFromProperty(domEditSelection, animId, prop, value);
     },
     [domEditSelection, updateGsapFromProperty]
   );
-  const handleGsapAddFromProperty = useCallback60(
+  const handleGsapAddFromProperty = useCallback61(
     (animId, prop) => {
       if (!domEditSelection) return;
       addGsapFromProperty(domEditSelection, animId, prop);
     },
     [domEditSelection, addGsapFromProperty]
   );
-  const handleGsapRemoveFromProperty = useCallback60(
+  const handleGsapRemoveFromProperty = useCallback61(
     (animId, prop) => {
       if (!domEditSelection) return;
       removeGsapFromProperty(domEditSelection, animId, prop);
     },
     [domEditSelection, removeGsapFromProperty]
   );
-  const handleGsapAddKeyframe = useCallback60(
+  const handleGsapAddKeyframe = useCallback61(
     (animId, percentage, property, value, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29125,7 +29593,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, addKeyframe]
   );
-  const handleGsapAddKeyframeBatch = useCallback60(
+  const handleGsapAddKeyframeBatch = useCallback61(
     (animId, percentage, properties) => {
       if (!domEditSelection) return Promise.resolve();
       return addKeyframeBatch(domEditSelection, animId, percentage, properties).catch((error) => {
@@ -29134,7 +29602,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, addKeyframeBatch, trackGsapHandlerFailure]
   );
-  const handleGsapRemoveKeyframe = useCallback60(
+  const handleGsapRemoveKeyframe = useCallback61(
     (animId, percentage, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29143,7 +29611,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, removeKeyframe]
   );
-  const handleGsapMoveKeyframeToPlayhead = useCallback60(
+  const handleGsapMoveKeyframeToPlayhead = useCallback61(
     (animId, fromPercentage, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29154,7 +29622,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, selectedGsapAnimations, moveKeyframe]
   );
-  const handleGsapMoveKeyframe = useCallback60(
+  const handleGsapMoveKeyframe = useCallback61(
     (animId, fromPercentage, toPercentage, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29163,7 +29631,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, moveKeyframe]
   );
-  const handleGsapResizeKeyframedTween = useCallback60(
+  const handleGsapResizeKeyframedTween = useCallback61(
     (animId, position, duration, pctRemap, selectionOverride) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
@@ -29172,7 +29640,7 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, resizeKeyframedTween]
   );
-  const handleGsapConvertToKeyframes = useCallback60(
+  const handleGsapConvertToKeyframes = useCallback61(
     (animId, resolvedFromValues, duration) => {
       if (!domEditSelection) return Promise.resolve();
       return convertToKeyframes(domEditSelection, animId, resolvedFromValues, duration).catch(
@@ -29188,14 +29656,14 @@ function useGsapSelectionHandlers({
     },
     [domEditSelection, convertToKeyframes, trackGsapHandlerFailure]
   );
-  const handleGsapRemoveAllKeyframes = useCallback60(
+  const handleGsapRemoveAllKeyframes = useCallback61(
     (animId) => {
       if (!domEditSelection) return;
       removeAllKeyframes(domEditSelection, animId);
     },
     [domEditSelection, removeAllKeyframes]
   );
-  const handleResetSelectedElementKeyframes = useCallback60(() => {
+  const handleResetSelectedElementKeyframes = useCallback61(() => {
     if (!domEditSelection) return false;
     const withKeyframes = selectedGsapAnimations.find((a) => a.keyframes);
     if (!withKeyframes) return false;
@@ -29266,7 +29734,7 @@ function useDomEditWiring({
   removeAllKeyframes,
   handleDomManualEditsReset
 }) {
-  const onClickToSource = useCallback61(
+  const onClickToSource = useCallback62(
     (selection) => {
       if (!openSourceForSelection || !selectSidebarTab) return;
       if (!selection.sourceFile) return;
@@ -29288,7 +29756,7 @@ function useDomEditWiring({
     const key = matchKey ? matchKey.key ?? matchKey.id : null;
     if (key && key !== selectedElementId) setSelectedElementId(key);
   }, [domEditSelection?.id]);
-  const prevRefreshKeyRef = useRef55(refreshKey);
+  const prevRefreshKeyRef = useRef56(refreshKey);
   useEffect34(() => {
     if (refreshKey !== prevRefreshKeyRef.current) {
       prevRefreshKeyRef.current = refreshKey;
@@ -29366,10 +29834,10 @@ function useDomEditWiring({
 }
 
 // src/hooks/useGsapAwareEditing.ts
-import { useCallback as useCallback63 } from "react";
+import { useCallback as useCallback64 } from "react";
 
 // src/hooks/useAnimatedPropertyCommit.ts
-import { useCallback as useCallback62 } from "react";
+import { useCallback as useCallback63 } from "react";
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
 function pickBestAnimation(animations, selector, property) {
   const targetGroup = property ? classifyPropertyGroup3(property) : void 0;
@@ -29539,7 +30007,7 @@ async function commitKeyframeProps(selection, anim, props, propEntries, primaryP
 }
 function useAnimatedPropertyCommit(deps) {
   const { selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache } = deps;
-  const commitAnimatedProperties = useCallback62(
+  const commitAnimatedProperties = useCallback63(
     async (selection, props) => {
       if (!gsapCommitMutation) return;
       const propEntries = Object.entries(props);
@@ -29638,7 +30106,7 @@ function useAnimatedPropertyCommit(deps) {
     },
     [selectedGsapAnimations, gsapCommitMutation, previewIframeRef, bumpGsapCache]
   );
-  const commitAnimatedProperty = useCallback62(
+  const commitAnimatedProperty = useCallback63(
     (selection, property, value) => commitAnimatedProperties(selection, { [property]: value }),
     [commitAnimatedProperties]
   );
@@ -29661,7 +30129,7 @@ function useGsapAwareEditing({
   setArcPath,
   updateArcSegment
 }) {
-  const handleGsapAwarePathOffsetCommit = useCallback63(
+  const handleGsapAwarePathOffsetCommit = useCallback64(
     async (selection, next, modifiers) => {
       if (gsapCommitMutation) {
         try {
@@ -29688,7 +30156,7 @@ function useGsapAwareEditing({
       trackGsapInteractionFailure
     ]
   );
-  const handleGsapAwareGroupPathOffsetCommit = useCallback63(
+  const handleGsapAwareGroupPathOffsetCommit = useCallback64(
     async (updates) => {
       if (!gsapCommitMutation) return;
       for (const { selection, next } of updates) {
@@ -29709,7 +30177,7 @@ function useGsapAwareEditing({
     },
     [gsapCommitMutation, previewIframeRef, makeFetchFallback, trackGsapInteractionFailure]
   );
-  const handleGsapAwareBoxSizeCommit = useCallback63(
+  const handleGsapAwareBoxSizeCommit = useCallback64(
     async (selection, next) => {
       if (gsapCommitMutation) {
         try {
@@ -29738,7 +30206,7 @@ function useGsapAwareEditing({
       trackGsapInteractionFailure
     ]
   );
-  const handleGsapAwareRotationCommit = useCallback63(
+  const handleGsapAwareRotationCommit = useCallback64(
     async (selection, next) => {
       if (gsapCommitMutation) {
         try {
@@ -29772,21 +30240,21 @@ function useGsapAwareEditing({
     previewIframeRef,
     bumpGsapCache
   });
-  const handleSetArcPath = useCallback63(
+  const handleSetArcPath = useCallback64(
     (animId, config) => {
       if (!domEditSelection) return;
       setArcPath(domEditSelection, animId, config);
     },
     [domEditSelection, setArcPath]
   );
-  const handleUpdateArcSegment = useCallback63(
+  const handleUpdateArcSegment = useCallback64(
     (animId, segmentIndex, update) => {
       if (!domEditSelection) return;
       updateArcSegment(domEditSelection, animId, segmentIndex, update);
     },
     [domEditSelection, updateArcSegment]
   );
-  const noopCommit = useCallback63(async () => {
+  const noopCommit = useCallback64(async () => {
   }, []);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(null);
   const safeGsapCommit = useSafeGsapCommitMutation(
@@ -29794,14 +30262,14 @@ function useGsapAwareEditing({
     trackGsapSaveFailure,
     showToast
   );
-  const commitMutation = useCallback63(
+  const commitMutation = useCallback64(
     async (mutation, options) => {
       if (!domEditSelection) return;
       await safeGsapCommit(domEditSelection, mutation, options);
     },
     [domEditSelection, safeGsapCommit]
   );
-  const handleUnroll = useCallback63(() => {
+  const handleUnroll = useCallback64(() => {
     void commitMutation(
       { type: "unroll-timeline" },
       { label: "Unroll to literal tweens", softReload: true }
@@ -29822,7 +30290,7 @@ function useGsapAwareEditing({
 }
 
 // src/hooks/useStudioSelectionPublisher.ts
-import { useEffect as useEffect35, useRef as useRef56 } from "react";
+import { useEffect as useEffect35, useRef as useRef57 } from "react";
 
 // src/utils/studioSelectionSnapshot.ts
 function round32(value) {
@@ -29912,8 +30380,8 @@ function useStudioSelectionPublisher({
   previewDocumentVersion,
   refreshDomEditSelectionFromPreview
 }) {
-  const lastSelectionRefreshKeyRef = useRef56(refreshKey);
-  const pendingSelectionRefreshKeyRef = useRef56(null);
+  const lastSelectionRefreshKeyRef = useRef57(refreshKey);
+  const pendingSelectionRefreshKeyRef = useRef57(null);
   useEffect35(() => {
     if (!projectId) return;
     const selection = domEditSelection?.element.isConnected ? buildStudioSelectionSnapshot({
@@ -30164,7 +30632,7 @@ function useDomEditSession({
     clearDomSelection,
     forceReloadSdkSession
   });
-  const handleGroupSelection = useCallback64(() => {
+  const handleGroupSelection = useCallback65(() => {
     const group = domEditGroupSelectionsRef.current;
     const single = domEditSelectionRef.current;
     const members = group.length > 0 ? group : single ? [single] : [];
@@ -30175,7 +30643,7 @@ function useDomEditSession({
     trackStudioEvent("group", { action: "create", count: members.length });
     void groupSelection(members);
   }, [domEditGroupSelectionsRef, domEditSelectionRef, groupSelection, showToast]);
-  const handleUngroupSelection = useCallback64(() => {
+  const handleUngroupSelection = useCallback65(() => {
     const sel = domEditSelectionRef.current;
     if (!sel?.element.hasAttribute("data-hf-group")) {
       showToast("Select a group to ungroup", "info");
@@ -30295,7 +30763,7 @@ function useDomEditSession({
     setArcPath,
     updateArcSegment
   });
-  const handleUpdateKeyframeEase = useCallback64(
+  const handleUpdateKeyframeEase = useCallback65(
     (animationId, percentage, ease) => {
       const sel = domEditSelectionRef.current;
       if (!sel) return;
@@ -30313,7 +30781,7 @@ function useDomEditSession({
     },
     [gsapCommitMutation, domEditSelectionRef]
   );
-  const handleSetAllKeyframeEases = useCallback64(
+  const handleSetAllKeyframeEases = useCallback65(
     (animationId, ease) => {
       const sel = domEditSelectionRef.current;
       if (!sel) return;
@@ -30415,7 +30883,7 @@ function useDomEditSession({
 }
 
 // src/hooks/useSdkSession.ts
-import { useState as useState48, useEffect as useEffect36, useCallback as useCallback65 } from "react";
+import { useState as useState48, useEffect as useEffect36, useCallback as useCallback66 } from "react";
 import { openComposition } from "@hyperframes/sdk";
 async function readProjectFileOptional(projectId, path) {
   if (path.includes("\0") || path.includes("..")) return void 0;
@@ -30494,7 +30962,7 @@ function useSdkSession(projectId, activeCompPath, domEditSaveTimestampRef) {
       compRef.current?.dispose();
     };
   }, [projectId, activeCompPath, reloadToken]);
-  const forceReload = useCallback65(() => setReloadToken((t) => t + 1), []);
+  const forceReload = useCallback66(() => setReloadToken((t) => t + 1), []);
   return { session, forceReload };
 }
 
@@ -30512,7 +30980,7 @@ function useSdkSelectionSync(session, domEditSelection, domEditGroupSelections)
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback66, useMemo as useMemo23, useState as useState49 } from "react";
+import { useCallback as useCallback67, useMemo as useMemo23, useState as useState49 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -30680,7 +31148,7 @@ function useBlockHandlers({
       blockCtxDeps.showToast
     ]
   );
-  const handleAddBlock = useCallback66(
+  const handleAddBlock = useCallback67(
     (blockName) => {
       if (!projectId) return;
       void (async () => {
@@ -30706,7 +31174,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef, setRightCollapsed, setRightPanelTab]
   );
-  const handleTimelineBlockDrop = useCallback66(
+  const handleTimelineBlockDrop = useCallback67(
     (blockName, placement) => {
       if (!projectId) return;
       void addBlockToProject({
@@ -30720,7 +31188,7 @@ function useBlockHandlers({
     },
     [projectId, blockCtx, previewIframeRef]
   );
-  const handlePreviewBlockDrop = useCallback66(
+  const handlePreviewBlockDrop = useCallback67(
     (blockName, position) => {
       if (!projectId) return;
       void addBlockToProject({
@@ -30744,7 +31212,7 @@ function useBlockHandlers({
 }
 
 // src/hooks/useAppHotkeys.ts
-import { useCallback as useCallback67, useEffect as useEffect38, useRef as useRef57 } from "react";
+import { useCallback as useCallback68, useEffect as useEffect38, useRef as useRef58 } from "react";
 function iframeContentWindow(iframe) {
   try {
     return iframe?.contentWindow ?? null;
@@ -30951,9 +31419,9 @@ function useAppHotkeys({
   activeCompPath,
   forceReloadSdkSession
 }) {
-  const previewHotkeyWindowRef = useRef57(null);
-  const previewHistoryCleanupRef = useRef57(null);
-  const handleTimelineToggleHotkey = useCallback67(
+  const previewHotkeyWindowRef = useRef58(null);
+  const previewHistoryCleanupRef = useRef58(null);
+  const handleTimelineToggleHotkey = useCallback68(
     (event) => {
       if (!shouldHandleTimelineToggleHotkey(event)) return;
       event.preventDefault();
@@ -30961,18 +31429,18 @@ function useAppHotkeys({
     },
     [toggleTimelineVisibility]
   );
-  const readHistoryFile = useCallback67(
+  const readHistoryFile = useCallback68(
     (path) => path === STUDIO_MOTION_PATH ? readOptionalProjectFile(path) : readProjectFile(path),
     [readOptionalProjectFile, readProjectFile]
   );
-  const writeHistoryFile = useCallback67(
+  const writeHistoryFile = useCallback68(
     async (path, content) => {
       domEditSaveTimestampRef.current = Date.now();
       await writeProjectFile(path, content);
     },
     [domEditSaveTimestampRef, writeProjectFile]
   );
-  const applyHistory = useCallback67(
+  const applyHistory = useCallback68(
     async (direction) => {
       if (tryApplyBeatHistory(direction, editHistory.state, showToast)) return;
       await waitForPendingDomEditSaves();
@@ -31008,9 +31476,9 @@ function useAppHotkeys({
       forceReloadSdkSession
     ]
   );
-  const handleUndo = useCallback67(() => applyHistory("undo"), [applyHistory]);
-  const handleRedo = useCallback67(() => applyHistory("redo"), [applyHistory]);
-  const cbRef = useRef57(null);
+  const handleUndo = useCallback68(() => applyHistory("undo"), [applyHistory]);
+  const handleRedo = useCallback68(() => applyHistory("redo"), [applyHistory]);
+  const cbRef = useRef58(null);
   cbRef.current = {
     toggleTimelineVisibility,
     handleTimelineElementDelete,
@@ -31030,7 +31498,7 @@ function useAppHotkeys({
     domEditSelectionRef,
     showToast
   };
-  const handleAppKeyDown = useCallback67((event) => {
+  const handleAppKeyDown = useCallback68((event) => {
     const cb = cbRef.current;
     if (shouldHandleTimelineToggleHotkey(event)) {
       event.preventDefault();
@@ -31048,7 +31516,7 @@ function useAppHotkeys({
     window.addEventListener("keydown", handleAppKeyDown, true);
     return () => window.removeEventListener("keydown", handleAppKeyDown, true);
   }, [handleAppKeyDown]);
-  const syncPreviewTimelineHotkey = useCallback67(
+  const syncPreviewTimelineHotkey = useCallback68(
     (iframe) => {
       const nextWindow = iframeContentWindow(iframe);
       if (previewHotkeyWindowRef.current === nextWindow) return;
@@ -31073,7 +31541,7 @@ function useAppHotkeys({
     },
     [handleAppKeyDown]
   );
-  const handleHistoryHotkey = useCallback67((event) => {
+  const handleHistoryHotkey = useCallback68((event) => {
     if (!(event.metaKey || event.ctrlKey) || shouldIgnoreHistoryShortcut(event.target)) return;
     handleUndoRedoKey(
       event,
@@ -31081,7 +31549,7 @@ function useAppHotkeys({
       () => void cbRef.current.handleRedo()
     );
   }, []);
-  const syncPreviewHistoryHotkey = useCallback67(
+  const syncPreviewHistoryHotkey = useCallback68(
     (iframe) => {
       previewHistoryCleanupRef.current?.();
       previewHistoryCleanupRef.current = null;
@@ -31120,7 +31588,7 @@ function useAppHotkeys({
 }
 
 // src/hooks/useClipboard.ts
-import { useCallback as useCallback68, useRef as useRef58 } from "react";
+import { useCallback as useCallback69, useRef as useRef59 } from "react";
 
 // src/utils/clipboardPayload.ts
 function insertAsSibling(source, newHtml, selector, selectorIndex) {
@@ -31235,10 +31703,10 @@ function useClipboard({
   handleDomEditElementDelete,
   previewIframeRef
 }) {
-  const clipboardRef = useRef58(null);
-  const projectIdRef = useRef58(projectId);
+  const clipboardRef = useRef59(null);
+  const projectIdRef = useRef59(projectId);
   projectIdRef.current = projectId;
-  const handleCopy = useCallback68(() => {
+  const handleCopy = useCallback69(() => {
     const { selectedElementId, elements } = usePlayerStore.getState();
     if (selectedElementId) {
       const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
@@ -31288,7 +31756,7 @@ function useClipboard({
     }
     return false;
   }, [activeCompPath, domEditSelectionRef, previewIframeRef, showToast]);
-  const handlePaste = useCallback68(async () => {
+  const handlePaste = useCallback69(async () => {
     const payload = clipboardRef.current;
     if (!payload) {
       showToast("Nothing to paste.", "info");
@@ -31344,7 +31812,7 @@ function useClipboard({
     showToast,
     writeProjectFile
   ]);
-  const handleCut = useCallback68(async () => {
+  const handleCut = useCallback69(async () => {
     const copied = handleCopy();
     if (!copied) return false;
     const { selectedElementId, elements } = usePlayerStore.getState();
@@ -31719,11 +32187,11 @@ function useCaptionDetection({
 }
 
 // src/hooks/useRenderClipContent.ts
-import { useCallback as useCallback70 } from "react";
+import { useCallback as useCallback71 } from "react";
 import { createElement } from "react";
 
 // src/player/components/AudioWaveform.tsx
-import { memo as memo25, useRef as useRef59, useState as useState50, useCallback as useCallback69, useEffect as useEffect40 } from "react";
+import { memo as memo25, useRef as useRef60, useState as useState50, useCallback as useCallback70, useEffect as useEffect40 } from "react";
 import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
 var BAR_W = 2;
 var GAP = 1;
@@ -31771,9 +32239,9 @@ var AudioWaveform = memo25(function AudioWaveform2({
   trimStartFraction,
   trimEndFraction
 }) {
-  const containerRef = useRef59(null);
-  const barsRef = useRef59(null);
-  const roRef = useRef59(null);
+  const containerRef = useRef60(null);
+  const barsRef = useRef60(null);
+  const roRef = useRef60(null);
   const cacheKey = waveformUrl ?? audioUrl;
   const [peaks, setPeaks] = useState50(peaksCache.get(cacheKey) ?? null);
   useEffect40(() => {
@@ -31800,7 +32268,7 @@ var AudioWaveform = memo25(function AudioWaveform2({
       cancelled = true;
     };
   }, [audioUrl, waveformUrl, cacheKey, peaks]);
-  const draw = useCallback69(() => {
+  const draw = useCallback70(() => {
     const container = containerRef.current;
     const barsEl = barsRef.current;
     if (!container || !barsEl || !peaks) return;
@@ -31821,7 +32289,7 @@ var AudioWaveform = memo25(function AudioWaveform2({
     }
     barsEl.innerHTML = html2;
   }, [peaks, trimStartFraction, trimEndFraction]);
-  const setContainerRef = useCallback69(
+  const setContainerRef = useCallback70(
     (el) => {
       roRef.current?.disconnect();
       containerRef.current = el;
@@ -31912,7 +32380,7 @@ function useRenderClipContent({
   activePreviewUrl,
   effectiveTimelineDuration
 }) {
-  return useCallback70(
+  return useCallback71(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
     (el, style) => {
@@ -31977,11 +32445,11 @@ function useRenderClipContent({
 }
 
 // src/hooks/useConsoleErrorCapture.ts
-import { useCallback as useCallback71, useEffect as useEffect41, useRef as useRef60, useState as useState51 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect41, useRef as useRef61, useState as useState51 } from "react";
 function useConsoleErrorCapture(previewIframe) {
   const [consoleErrors, setConsoleErrors] = useState51(null);
-  const consoleErrorsRef = useRef60([]);
-  const resetErrors = useCallback71(() => {
+  const consoleErrorsRef = useRef61([]);
+  const resetErrors = useCallback72(() => {
     consoleErrorsRef.current = [];
     setConsoleErrors(null);
   }, []);
@@ -32050,7 +32518,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useState as useState52, useCallback as useCallback72 } from "react";
+import { useState as useState52, useCallback as useCallback73 } from "react";
 
 // src/utils/projectRouting.ts
 var PROJECT_HASH_PREFIX = "#project/";
@@ -32137,10 +32605,10 @@ function useFrameCapture({
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
     return liveTime.subscribe(setCaptureFrameTime);
   });
-  const refreshCaptureFrameTime = useCallback72(() => {
+  const refreshCaptureFrameTime = useCallback73(() => {
     setCaptureFrameTime(usePlayerStore.getState().currentTime);
   }, []);
-  const handleCaptureFrameClick = useCallback72(
+  const handleCaptureFrameClick = useCallback73(
     async (event) => {
       if (!projectId) return;
       event.preventDefault();
@@ -32210,7 +32678,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState53, useCallback as useCallback73, useEffect as useEffect42, useRef as useRef61, useMemo as useMemo24 } from "react";
+import { useState as useState53, useCallback as useCallback74, useEffect as useEffect42, useRef as useRef62, useMemo as useMemo24 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -32224,8 +32692,8 @@ function useLintModal(projectId, refreshKey) {
   const [lintModal, setLintModal] = useState53(null);
   const [linting, setLinting] = useState53(false);
   const [backgroundFindings, setBackgroundFindings] = useState53([]);
-  const autoLintRanRef = useRef61(false);
-  const runLint = useCallback73(
+  const autoLintRanRef = useRef62(false);
+  const runLint = useCallback74(
     async (opts) => {
       if (!projectId) return;
       if (!opts?.background) setLinting(true);
@@ -32250,8 +32718,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [projectId]
   );
-  const handleLint = useCallback73(() => runLint(), [runLint]);
-  const prevProjectIdRef = useRef61(projectId);
+  const handleLint = useCallback74(() => runLint(), [runLint]);
+  const prevProjectIdRef = useRef62(projectId);
   useEffect42(() => {
     if (projectId !== prevProjectIdRef.current) {
       autoLintRanRef.current = false;
@@ -32266,8 +32734,8 @@ function useLintModal(projectId, refreshKey) {
     const timer = setTimeout(() => void runLint({ background: true }), 1e3);
     return () => clearTimeout(timer);
   }, [projectId, refreshKey, runLint]);
-  const closeLintModal = useCallback73(() => setLintModal(null), []);
-  const groupFindings = useCallback73(
+  const closeLintModal = useCallback74(() => setLintModal(null), []);
+  const groupFindings = useCallback74(
     (keyFn) => {
       const map = /* @__PURE__ */ new Map();
       for (const f of backgroundFindings) {
@@ -32321,11 +32789,11 @@ function useCompositionDimensions() {
 }
 
 // src/hooks/useToast.ts
-import { useState as useState55, useCallback as useCallback74, useRef as useRef62 } from "react";
+import { useState as useState55, useCallback as useCallback75, useRef as useRef63 } from "react";
 function useToast() {
   const [appToast, setAppToast] = useState55(null);
-  const timerRef = useRef62(null);
-  const showToast = useCallback74((message, tone = "error") => {
+  const timerRef = useRef63(null);
+  const showToast = useCallback75((message, tone = "error") => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setAppToast({ message, tone });
     timerRef.current = setTimeout(() => setAppToast(null), 4e3);
@@ -32333,7 +32801,7 @@ function useToast() {
   useMountEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   });
-  const dismissToast = useCallback74(() => {
+  const dismissToast = useCallback75(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setAppToast(null);
   }, []);
@@ -32341,7 +32809,7 @@ function useToast() {
 }
 
 // src/hooks/useStudioUrlState.ts
-import { useCallback as useCallback75, useEffect as useEffect43, useRef as useRef63, useState as useState56 } from "react";
+import { useCallback as useCallback76, useEffect as useEffect43, useRef as useRef64, useState as useState56 } from "react";
 
 // src/utils/studioUrlState.ts
 var VALID_TABS = ["layers", "design", "renders"];
@@ -32465,13 +32933,13 @@ function useStudioUrlState({
   initialState: initialState2
 }) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef63(initialState2.currentTime == null);
-  const hydratedInitialTimeRef = useRef63(initialState2.currentTime == null);
-  const hydratedSelectionRef = useRef63(initialState2.selection == null);
+  const hydratedSeekRef = useRef64(initialState2.currentTime == null);
+  const hydratedInitialTimeRef = useRef64(initialState2.currentTime == null);
+  const hydratedSelectionRef = useRef64(initialState2.selection == null);
   const [selectionHydrated, setSelectionHydrated] = useState56(initialState2.selection == null);
-  const pendingSelectionRef = useRef63(initialState2.selection);
-  const stableTimeRef = useRef63(initialState2.currentTime);
-  const buildUrlState = useCallback75(
+  const pendingSelectionRef = useRef64(initialState2.selection);
+  const stableTimeRef = useRef64(initialState2.currentTime);
+  const buildUrlState = useCallback76(
     () => ({
       activeCompPath,
       currentTime: stableTimeRef.current,
@@ -32482,7 +32950,7 @@ function useStudioUrlState({
     }),
     [activeCompPath, domEditSelection, rightCollapsed, rightPanelTab, timelineVisible]
   );
-  const applyUrlSelection = useCallback75(
+  const applyUrlSelection = useCallback76(
     (selection) => {
       if (!selection) {
         applyDomSelection(null, { revealPanel: false });
@@ -32598,7 +33066,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback76, useMemo as useMemo25, useRef as useRef64, useState as useState57 } from "react";
+import { useCallback as useCallback77, useMemo as useMemo25, useRef as useRef65, useState as useState57 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -32643,22 +33111,22 @@ function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, i
 }
 function useDragOverlay(onImportFiles) {
   const [active, setActive] = useState57(false);
-  const counterRef = useRef64(0);
-  const onDragOver = useCallback76((e) => {
+  const counterRef = useRef65(0);
+  const onDragOver = useCallback77((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
   }, []);
-  const onDragEnter = useCallback76((e) => {
+  const onDragEnter = useCallback77((e) => {
     if (!e.dataTransfer.types.includes("Files")) return;
     e.preventDefault();
     counterRef.current++;
     setActive(true);
   }, []);
-  const onDragLeave = useCallback76(() => {
+  const onDragLeave = useCallback77(() => {
     counterRef.current--;
     if (counterRef.current === 0) setActive(false);
   }, []);
-  const onDrop = useCallback76(
+  const onDrop = useCallback77(
     (e) => {
       counterRef.current = 0;
       setActive(false);
@@ -32742,7 +33210,7 @@ function PanelLayoutProvider({
 // src/contexts/ViewModeContext.tsx
 import {
   createContext as createContext5,
-  useCallback as useCallback77,
+  useCallback as useCallback78,
   useContext as useContext5,
   useEffect as useEffect44,
   useMemo as useMemo27,
@@ -32771,7 +33239,7 @@ function useViewModeState() {
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
   }, []);
-  const setViewMode = useCallback77((mode) => {
+  const setViewMode = useCallback78((mode) => {
     setMode(mode);
     writeViewModeToUrl(mode);
   }, []);
@@ -33134,10 +33602,10 @@ function StudioHeader({
 }
 
 // src/hooks/useGestureCommit.ts
-import { useState as useState60, useCallback as useCallback79, useRef as useRef66, useEffect as useEffect46 } from "react";
+import { useState as useState60, useCallback as useCallback80, useRef as useRef67, useEffect as useEffect46 } from "react";
 
 // src/hooks/useGestureRecording.ts
-import { useCallback as useCallback78, useEffect as useEffect45, useRef as useRef65, useState as useState59 } from "react";
+import { useCallback as useCallback79, useEffect as useEffect45, useRef as useRef66, useState as useState59 } from "react";
 function readBasePosition(element, iframeEl) {
   let baseOpacity = 1;
   let baseScale = 1;
@@ -33256,10 +33724,10 @@ function createRecordingRefs() {
 function useGestureRecording() {
   const [isRecording, setIsRecording] = useState59(false);
   const [recordingDuration, setRecordingDuration] = useState59(0);
-  const isRecordingRef = useRef65(false);
-  const refs = useRef65(createRecordingRefs());
-  const samplesRef = useRef65(refs.current.samples);
-  const trailRef = useRef65(refs.current.trail);
+  const isRecordingRef = useRef66(false);
+  const refs = useRef66(createRecordingRefs());
+  const samplesRef = useRef66(refs.current.samples);
+  const trailRef = useRef66(refs.current.trail);
   useEffect45(() => {
     const r = refs.current;
     return () => {
@@ -33268,7 +33736,7 @@ function useGestureRecording() {
       isRecordingRef.current = false;
     };
   }, []);
-  const startRecording = useCallback78(
+  const startRecording = useCallback79(
     (element, iframeEl, elementEndTime) => {
       if (isRecordingRef.current) return;
       isRecordingRef.current = true;
@@ -33368,7 +33836,7 @@ function useGestureRecording() {
     []
     // No deps — uses refs only for all mutable state
   );
-  const stopRecording = useCallback78(() => {
+  const stopRecording = useCallback79(() => {
     if (!isRecordingRef.current) return [];
     isRecordingRef.current = false;
     const r = refs.current;
@@ -33398,7 +33866,7 @@ function useGestureRecording() {
     setIsRecording(false);
     return frozen;
   }, []);
-  const clearSamples = useCallback78(() => {
+  const clearSamples = useCallback79(() => {
     const r = refs.current;
     r.samples = [];
     r.trail = [];
@@ -33651,13 +34119,13 @@ function useGestureCommit({
 }) {
   const gestureRecording = useGestureRecording();
   const [gestureState, setGestureState] = useState60("idle");
-  const gestureStateRef = useRef66("idle");
-  const recordingAutoStopRef = useRef66(void 0);
-  const recordingStartTimeRef = useRef66(0);
-  const commitInFlightRef = useRef66(false);
-  const capturedSelectionRef = useRef66(null);
+  const gestureStateRef = useRef67("idle");
+  const recordingAutoStopRef = useRef67(void 0);
+  const recordingStartTimeRef = useRef67(0);
+  const commitInFlightRef = useRef67(false);
+  const capturedSelectionRef = useRef67(null);
   useEffect46(() => () => clearInterval(recordingAutoStopRef.current), []);
-  const stopAndCommitRecording = useCallback79(async () => {
+  const stopAndCommitRecording = useCallback80(async () => {
     clearInterval(recordingAutoStopRef.current);
     if (commitInFlightRef.current) {
       return;
@@ -33809,7 +34277,7 @@ function useGestureCommit({
       commitInFlightRef.current = false;
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
-  const handleToggleRecording = useCallback79(() => {
+  const handleToggleRecording = useCallback80(() => {
     if (gestureStateRef.current === "recording") {
       void stopAndCommitRecording();
       return;
@@ -33967,20 +34435,20 @@ var GestureTrailOverlay = memo26(function GestureTrailOverlay2({
 });
 
 // src/components/StudioLeftSidebar.tsx
-import { useCallback as useCallback85 } from "react";
+import { useCallback as useCallback86 } from "react";
 
 // src/components/sidebar/LeftSidebar.tsx
 import {
   memo as memo30,
   useState as useState67,
-  useCallback as useCallback84,
+  useCallback as useCallback85,
   useImperativeHandle,
-  useRef as useRef71,
+  useRef as useRef72,
   forwardRef as forwardRef3
 } from "react";
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo27, useCallback as useCallback80, useEffect as useEffect47, useRef as useRef67, useState as useState61 } from "react";
+import { memo as memo27, useCallback as useCallback81, useEffect as useEffect47, useRef as useRef68, useState as useState61 } from "react";
 import { jsx as jsx69, jsxs as jsxs58 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -34048,10 +34516,10 @@ function CompCard({
 }) {
   const [hovered, setHovered] = useState61(false);
   const [stageSize, setStageSize] = useState61(DEFAULT_PREVIEW_STAGE);
-  const iframeRef = useRef67(null);
-  const hoverTimer = useRef67(null);
-  const syncTimer = useRef67(null);
-  const requestIframePlaybackSync = useCallback80((shouldPlay) => {
+  const iframeRef = useRef68(null);
+  const hoverTimer = useRef68(null);
+  const syncTimer = useRef68(null);
+  const requestIframePlaybackSync = useCallback81((shouldPlay) => {
     if (syncTimer.current) {
       clearTimeout(syncTimer.current);
       syncTimer.current = null;
@@ -34209,7 +34677,7 @@ var CompositionsTab = memo27(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo28, useState as useState64, useCallback as useCallback82, useRef as useRef69, useMemo as useMemo29, useEffect as useEffect50 } from "react";
+import { memo as memo28, useState as useState64, useCallback as useCallback83, useRef as useRef70, useMemo as useMemo29, useEffect as useEffect50 } from "react";
 
 // src/components/ui/VideoFrameThumbnail.tsx
 import { useState as useState62, useEffect as useEffect48 } from "react";
@@ -34351,7 +34819,7 @@ var CATEGORY_LABELS = {
 var FILTER_ORDER = ["audio", "images", "video", "fonts"];
 
 // src/components/sidebar/AudioRow.tsx
-import { useState as useState63, useRef as useRef68, useEffect as useEffect49, useCallback as useCallback81 } from "react";
+import { useState as useState63, useRef as useRef69, useEffect as useEffect49, useCallback as useCallback82 } from "react";
 import { Fragment as Fragment20, jsx as jsx72, jsxs as jsxs60 } from "react/jsx-runtime";
 function AudioRow({
   projectId,
@@ -34366,11 +34834,11 @@ function AudioRow({
   const [contextMenu, setContextMenu] = useState63(null);
   const [playing, setPlaying] = useState63(false);
   const [bars, setBars] = useState63([]);
-  const audioRef = useRef68(null);
-  const actxRef = useRef68(null);
-  const analyserRef = useRef68(null);
-  const sourceRef = useRef68(null);
-  const animRef = useRef68(0);
+  const audioRef = useRef69(null);
+  const actxRef = useRef69(null);
+  const analyserRef = useRef69(null);
+  const sourceRef = useRef69(null);
+  const animRef = useRef69(0);
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
@@ -34409,7 +34877,7 @@ function AudioRow({
     }
     return () => cancelAnimationFrame(animRef.current);
   }, [playing]);
-  const togglePlay = useCallback81(async () => {
+  const togglePlay = useCallback82(async () => {
     if (playing) {
       audioRef.current?.pause();
       setPlaying(false);
@@ -34646,13 +35114,13 @@ var AssetsTab = memo28(function AssetsTab2({
   onDelete,
   onRename
 }) {
-  const fileInputRef = useRef69(null);
+  const fileInputRef = useRef70(null);
   const [dragOver, setDragOver] = useState64(false);
   const [copiedPath, setCopiedPath] = useState64(null);
   const [activeFilter, setActiveFilter] = useState64("all");
   const [searchQuery, setSearchQuery] = useState64("");
   const [manifest, setManifest] = useState64(/* @__PURE__ */ new Map());
-  const manifest404Ref = useRef69(/* @__PURE__ */ new Set());
+  const manifest404Ref = useRef70(/* @__PURE__ */ new Set());
   const assetsKey = assets.join("|");
   useEffect50(() => {
     if (manifest404Ref.current.has(projectId)) return;
@@ -34681,7 +35149,7 @@ var AssetsTab = memo28(function AssetsTab2({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
-  const handleDrop = useCallback82(
+  const handleDrop = useCallback83(
     (e) => {
       e.preventDefault();
       setDragOver(false);
@@ -34689,7 +35157,7 @@ var AssetsTab = memo28(function AssetsTab2({
     },
     [onImport]
   );
-  const handleCopyPath = useCallback82(async (path) => {
+  const handleCopyPath = useCallback83(async (path) => {
     const copied = await copyTextToClipboard(path);
     if (copied) {
       setCopiedPath(path);
@@ -34938,7 +35406,7 @@ var AssetsTab = memo28(function AssetsTab2({
 });
 
 // src/components/sidebar/BlocksTab.tsx
-import { memo as memo29, useState as useState66, useCallback as useCallback83, useRef as useRef70, useEffect as useEffect52 } from "react";
+import { memo as memo29, useState as useState66, useCallback as useCallback84, useRef as useRef71, useEffect as useEffect52 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
@@ -35232,16 +35700,16 @@ function BlockCard({
 }) {
   const [hovered, setHovered] = useState66(false);
   const [adding, setAdding] = useState66(false);
-  const hoverTimer = useRef70(null);
+  const hoverTimer = useRef71(null);
   const colors = getCategoryColors(category);
   const needsWebGL = tags?.includes("html-in-canvas") || tags?.includes("webgl");
-  const handleEnter = useCallback83(() => {
+  const handleEnter = useCallback84(() => {
     hoverTimer.current = setTimeout(() => {
       setHovered(true);
       onPreview?.({ videoUrl, posterUrl, title });
     }, 300);
   }, [onPreview, videoUrl, posterUrl, title]);
-  const handleLeave = useCallback83(() => {
+  const handleLeave = useCallback84(() => {
     if (hoverTimer.current) {
       clearTimeout(hoverTimer.current);
       hoverTimer.current = null;
@@ -35254,7 +35722,7 @@ function BlockCard({
       if (hoverTimer.current) clearTimeout(hoverTimer.current);
     };
   }, []);
-  const handleAdd = useCallback83(
+  const handleAdd = useCallback84(
     (e) => {
       e.stopPropagation();
       if (adding || !onAdd) return;
@@ -35265,7 +35733,7 @@ function BlockCard({
     [onAdd, adding]
   );
   const { activeCompPath, compositionDimensions } = useStudioShellContext();
-  const handleShowPrompt = useCallback83(
+  const handleShowPrompt = useCallback84(
     (e) => {
       e.stopPropagation();
       const state = usePlayerStore.getState();
@@ -35403,11 +35871,11 @@ function PromptPreviewModal({
 }) {
   const [value, setValue] = useState66(prompt);
   const [copied, setCopied] = useState66(false);
-  const textareaRef = useRef70(null);
+  const textareaRef = useRef71(null);
   useEffect52(() => {
     requestAnimationFrame(() => textareaRef.current?.focus());
   }, []);
-  const handleCopy = useCallback83(() => {
+  const handleCopy = useCallback84(() => {
     navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
@@ -35530,14 +35998,14 @@ var LeftSidebar = memo30(
     takeoverContent
   }, ref) {
     const [tab, setTab] = useState67(getPersistedTab);
-    const tabRef = useRef71(tab);
+    const tabRef = useRef72(tab);
     tabRef.current = tab;
-    const selectTab = useCallback84((t) => {
+    const selectTab = useCallback85((t) => {
       setTab(t);
       localStorage.setItem(STORAGE_KEY, t);
       trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
     }, []);
-    const getTab = useCallback84(() => tabRef.current, []);
+    const getTab = useCallback85(() => tabRef.current, []);
     useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
     return /* @__PURE__ */ jsx75(
       "div",
@@ -35843,7 +36311,7 @@ function StudioLeftSidebar({
     handleImportFiles,
     handleContentChange
   } = useFileManagerContext();
-  const handleRenderComposition = useCallback85(
+  const handleRenderComposition = useCallback86(
     async (comp) => {
       await waitForPendingDomEditSaves();
       const { format, quality, fps } = getPersistedRenderSettings();
@@ -35937,10 +36405,10 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioPreviewArea.tsx
-import { useState as useState76, useMemo as useMemo33, useCallback as useCallback92 } from "react";
+import { useState as useState76, useMemo as useMemo33, useCallback as useCallback93 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
-import { memo as memo31, useState as useState68, useCallback as useCallback86, useRef as useRef72 } from "react";
+import { memo as memo31, useState as useState68, useCallback as useCallback87, useRef as useRef73 } from "react";
 
 // src/captions/keyboard.ts
 var CAPTION_NUDGE_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
@@ -36129,10 +36597,10 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const clearSelection = useCaptionStore((s) => s.clearSelection);
   const [wordBoxes, setWordBoxes] = useState68([]);
-  const overlayRef = useRef72(null);
-  const modelRef = useRef72(model);
+  const overlayRef = useRef73(null);
+  const modelRef = useRef73(model);
   modelRef.current = model;
-  const interactionRef = useRef72(null);
+  const interactionRef = useRef73(null);
   useMountEffect(() => {
     if (!isEditMode) return;
     let prevBoxes = [];
@@ -36185,14 +36653,14 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
       window.removeEventListener("keydown", handleKeyDown);
     };
   });
-  const getCssScale = useCallback86(() => {
+  const getCssScale = useCallback87(() => {
     const iframe = iframeRef.current;
     if (!iframe) return 1;
     const rect = iframe.getBoundingClientRect();
     const nativeW = parseFloat(iframe.style.width) || rect.width;
     return rect.width / nativeW;
   }, [iframeRef]);
-  const startMove = useCallback86(
+  const startMove = useCallback87(
     (groupIndex, wordIndex, segmentId, e) => {
       e.stopPropagation();
       e.currentTarget.setPointerCapture(e.pointerId);
@@ -36216,7 +36684,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
     },
     [iframeRef]
   );
-  const startScale = useCallback86(
+  const startScale = useCallback87(
     (groupIndex, wordIndex, segmentId, e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -36244,7 +36712,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
     },
     [iframeRef, getCssScale]
   );
-  const startRotate = useCallback86(
+  const startRotate = useCallback87(
     (box, e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -36268,14 +36736,14 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
     },
     [iframeRef]
   );
-  const getIframeWin = useCallback86(() => {
+  const getIframeWin = useCallback87(() => {
     try {
       return iframeRef.current?.contentWindow ?? null;
     } catch {
       return null;
     }
   }, [iframeRef]);
-  const handlePointerMove = useCallback86(
+  const handlePointerMove = useCallback87(
     (e) => {
       const i = interactionRef.current;
       if (!i) return;
@@ -36301,7 +36769,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
     },
     [getCssScale, getIframeWin]
   );
-  const handlePointerUp = useCallback86(() => {
+  const handlePointerUp = useCallback87(() => {
     const i = interactionRef.current;
     if (i) {
       const win = getIframeWin();
@@ -36309,7 +36777,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
       interactionRef.current = null;
     }
   }, [getIframeWin]);
-  const handleBackgroundClick = useCallback86(
+  const handleBackgroundClick = useCallback87(
     (e) => {
       if (e.target === e.currentTarget) clearSelection();
     },
@@ -36419,7 +36887,7 @@ var CaptionOverlay = memo31(function CaptionOverlay2({ iframeRef }) {
 });
 
 // src/captions/components/CaptionTimeline.tsx
-import { memo as memo32, useCallback as useCallback87, useRef as useRef73 } from "react";
+import { memo as memo32, useCallback as useCallback88, useRef as useRef74 } from "react";
 import { jsx as jsx79, jsxs as jsxs67 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "#3CE6AC",
@@ -36442,8 +36910,8 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const updateSegmentTiming = useCaptionStore((s) => s.updateSegmentTiming);
   const splitGroup = useCaptionStore((s) => s.splitGroup);
-  const dragRef = useRef73(null);
-  const handleEdgePointerDown = useCallback87(
+  const dragRef = useRef74(null);
+  const handleEdgePointerDown = useCallback88(
     (e, segId, edge, originalStart, originalEnd) => {
       e.stopPropagation();
       e.preventDefault();
@@ -36452,7 +36920,7 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
     },
     []
   );
-  const handlePointerMove = useCallback87(
+  const handlePointerMove = useCallback88(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -36469,24 +36937,24 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
     },
     [pixelsPerSecond, updateSegmentTiming]
   );
-  const handlePointerUp = useCallback87(() => {
+  const handlePointerUp = useCallback88(() => {
     dragRef.current = null;
   }, []);
-  const handleBlockClick = useCallback87(
+  const handleBlockClick = useCallback88(
     (e, segId) => {
       e.stopPropagation();
       selectSegment(segId, e.shiftKey);
     },
     [selectSegment]
   );
-  const handleBlockDoubleClick = useCallback87(
+  const handleBlockDoubleClick = useCallback88(
     (e, groupId, segId) => {
       e.stopPropagation();
       splitGroup(groupId, segId);
     },
     [splitGroup]
   );
-  const handleTrackClick = useCallback87(
+  const handleTrackClick = useCallback88(
     (e) => {
       if (!onSeek) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -36564,10 +37032,10 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
 });
 
 // src/components/editor/DomEditOverlay.tsx
-import { memo as memo35, useEffect as useEffect53, useMemo as useMemo31, useRef as useRef77, useState as useState71 } from "react";
+import { memo as memo35, useEffect as useEffect53, useMemo as useMemo31, useRef as useRef78, useState as useState71 } from "react";
 
 // src/components/editor/marqueeCommit.ts
-import { useCallback as useCallback88, useRef as useRef74, useState as useState69 } from "react";
+import { useCallback as useCallback89, useRef as useRef75, useState as useState69 } from "react";
 
 // src/utils/marqueeGeometry.ts
 function rectsOverlap(a, b) {
@@ -36758,10 +37226,10 @@ async function runMarqueeIntersection(rect, iframe, overlayEl, activeComposition
   return hits;
 }
 function useMarqueeGestures(deps) {
-  const marqueeRef = useRef74(null);
+  const marqueeRef = useRef75(null);
   const [marqueeRect, setMarqueeRect] = useState69(null);
   const [candidateRects, setCandidateRects] = useState69([]);
-  const commitMarquee = useCallback88(
+  const commitMarquee = useCallback89(
     async (rect, additive) => {
       const iframe = deps.iframeRef.current;
       const overlay = deps.overlayRef.current;
@@ -36772,7 +37240,7 @@ function useMarqueeGestures(deps) {
     },
     [deps.iframeRef, deps.overlayRef, deps.onMarqueeSelectRef, deps.activeCompositionPathRef]
   );
-  const onPointerMove = useCallback88(
+  const onPointerMove = useCallback89(
     (event) => {
       const m = marqueeRef.current;
       if (m) {
@@ -36805,7 +37273,7 @@ function useMarqueeGestures(deps) {
     },
     [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef]
   );
-  const onPointerUp = useCallback88(
+  const onPointerUp = useCallback89(
     (event) => {
       const m = marqueeRef.current;
       if (m) {
@@ -36835,7 +37303,7 @@ function useMarqueeGestures(deps) {
     },
     [deps.gestures, commitMarquee, deps.onMarqueeSelectRef]
   );
-  const onPointerCancel = useCallback88(() => {
+  const onPointerCancel = useCallback89(() => {
     if (marqueeRef.current) {
       marqueeRef.current = null;
       setMarqueeRect(null);
@@ -36934,7 +37402,7 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 }
 
 // src/components/editor/useDomEditOverlayRects.ts
-import { useRef as useRef75, useState as useState70 } from "react";
+import { useRef as useRef76, useState as useState70 } from "react";
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -36955,13 +37423,13 @@ function useDomEditOverlayRects({
   const [hoverRect, setHoverRectState] = useState70(null);
   const [groupOverlayItems, setGroupOverlayItemsState] = useState70([]);
   const [childRects, setChildRectsState] = useState70([]);
-  const overlayRectRef = useRef75(null);
-  const hoverRectRef = useRef75(null);
-  const groupOverlayItemsRef = useRef75([]);
-  const resolvedElementRef = useRef75(null);
-  const resolvedHoverElementRef = useRef75(null);
-  const resolvedGroupElementRef = useRef75(/* @__PURE__ */ new Map());
-  const childRectsRef = useRef75([]);
+  const overlayRectRef = useRef76(null);
+  const hoverRectRef = useRef76(null);
+  const groupOverlayItemsRef = useRef76([]);
+  const resolvedElementRef = useRef76(null);
+  const resolvedHoverElementRef = useRef76(null);
+  const resolvedGroupElementRef = useRef76(/* @__PURE__ */ new Map());
+  const childRectsRef = useRef76([]);
   const setOverlayRect = (next) => {
     if (rectsEqual(overlayRectRef.current, next)) return;
     overlayRectRef.current = next;
@@ -37154,7 +37622,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-EK7R7R4G.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-UIQZJCOA.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -37820,7 +38288,7 @@ function readPositiveDimension2(value) {
   return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
 }
 var IGNORED_TAGS = /* @__PURE__ */ new Set(["script", "style", "link", "meta", "base", "template", "br", "wbr"]);
-function isHtmlElement2(node) {
+function isHtmlElement3(node) {
   return node.nodeType === 1;
 }
 function collectVisibleElements(root, excludeElements, maxItems) {
@@ -37828,7 +38296,7 @@ function collectVisibleElements(root, excludeElements, maxItems) {
   const visit = (el) => {
     if (result.length >= maxItems) return;
     for (const child of Array.from(el.children)) {
-      if (!isHtmlElement2(child)) continue;
+      if (!isHtmlElement3(child)) continue;
       if (IGNORED_TAGS.has(child.tagName.toLowerCase())) continue;
       if (child.hasAttribute("data-composition-id")) continue;
       if (excludeElements.has(child)) continue;
@@ -38305,7 +38773,8 @@ function createDomEditOverlayGestureHandlers(opts) {
       restoreGestureOverlayRect(g);
       opts.suppressNextBoxClickRef.current = true;
       opts.onCanvasMouseDown(e, {
-        preferClipAncestor: false
+        preferClipAncestor: false,
+        hoverSelection: opts.hoverSelectionRef.current
       });
       return;
     }
@@ -38417,7 +38886,7 @@ function createDomEditOverlayGestureHandlers(opts) {
 }
 
 // src/components/editor/SnapGuideOverlay.tsx
-import { memo as memo33, useRef as useRef76 } from "react";
+import { memo as memo33, useRef as useRef77 } from "react";
 import { jsx as jsx82, jsxs as jsxs69 } from "react/jsx-runtime";
 var MAX_GUIDES = 6;
 var MAX_SPACING_GUIDES = 4;
@@ -38429,12 +38898,12 @@ var SnapGuideOverlay = memo33(function SnapGuideOverlay2({
   overlayWidth,
   overlayHeight
 }) {
-  const guideElsRef = useRef76([]);
-  const spacingElsRef = useRef76([]);
-  const spacingLabelElsRef = useRef76([]);
-  const overlayWidthRef = useRef76(overlayWidth);
+  const guideElsRef = useRef77([]);
+  const spacingElsRef = useRef77([]);
+  const spacingLabelElsRef = useRef77([]);
+  const overlayWidthRef = useRef77(overlayWidth);
   overlayWidthRef.current = overlayWidth;
-  const overlayHeightRef = useRef76(overlayHeight);
+  const overlayHeightRef = useRef77(overlayHeight);
   overlayHeightRef.current = overlayHeight;
   useMountEffect(() => {
     let frame = 0;
@@ -38616,9 +39085,9 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
   onRotationCommit,
   onMarqueeSelect
 }) {
-  const overlayRef = useRef77(null);
-  const boxRef = useRef77(null);
-  const onMarqueeSelectRef = useRef77(onMarqueeSelect);
+  const overlayRef = useRef78(null);
+  const boxRef = useRef78(null);
+  const onMarqueeSelectRef = useRef78(onMarqueeSelect);
   onMarqueeSelectRef.current = onMarqueeSelect;
   const selectionShapeStyles = (() => {
     const fallback = {
@@ -38642,39 +39111,39 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       return fallback;
     }
   })();
-  const gestureRef = useRef77(null);
-  const groupGestureRef = useRef77(null);
-  const blockedMoveRef = useRef77(null);
-  const suppressNextBoxClickRef = useRef77(false);
-  const suppressNextBoxMouseDownRef = useRef77(false);
-  const suppressNextOverlayMouseDownRef = useRef77(false);
-  const snapGuidesRef = useRef77(null);
-  const rafPausedRef = useRef77(false);
-  const selectionRef = useRef77(selection);
+  const gestureRef = useRef78(null);
+  const groupGestureRef = useRef78(null);
+  const blockedMoveRef = useRef78(null);
+  const suppressNextBoxClickRef = useRef78(false);
+  const suppressNextBoxMouseDownRef = useRef78(false);
+  const suppressNextOverlayMouseDownRef = useRef78(false);
+  const snapGuidesRef = useRef78(null);
+  const rafPausedRef = useRef78(false);
+  const selectionRef = useRef78(selection);
   selectionRef.current = selection;
-  const activeCompositionPathRef = useRef77(activeCompositionPath);
+  const activeCompositionPathRef = useRef78(activeCompositionPath);
   activeCompositionPathRef.current = activeCompositionPath;
-  const groupSelectionsRef = useRef77(groupSelections);
+  const groupSelectionsRef = useRef78(groupSelections);
   groupSelectionsRef.current = groupSelections;
-  const hoverSelectionRef = useRef77(hoverSelection);
+  const hoverSelectionRef = useRef78(hoverSelection);
   hoverSelectionRef.current = hoverSelection;
-  const onPathOffsetCommitRef = useRef77(onPathOffsetCommit);
+  const onPathOffsetCommitRef = useRef78(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
-  const onGroupPathOffsetCommitRef = useRef77(onGroupPathOffsetCommit);
+  const onGroupPathOffsetCommitRef = useRef78(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = onGroupPathOffsetCommit;
-  const onBoxSizeCommitRef = useRef77(onBoxSizeCommit);
+  const onBoxSizeCommitRef = useRef78(onBoxSizeCommit);
   onBoxSizeCommitRef.current = onBoxSizeCommit;
-  const onRotationCommitRef = useRef77(onRotationCommit);
+  const onRotationCommitRef = useRef78(onRotationCommit);
   onRotationCommitRef.current = onRotationCommit;
-  const onBlockedMoveRef = useRef77(onBlockedMove);
+  const onBlockedMoveRef = useRef78(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
-  const onManualDragStartRef = useRef77(onManualDragStart);
+  const onManualDragStartRef = useRef78(onManualDragStart);
   onManualDragStartRef.current = onManualDragStart;
-  const onCanvasPointerMoveRef = useRef77(onCanvasPointerMove);
+  const onCanvasPointerMoveRef = useRef78(onCanvasPointerMove);
   onCanvasPointerMoveRef.current = onCanvasPointerMove;
-  const onCanvasPointerLeaveRef = useRef77(onCanvasPointerLeave);
+  const onCanvasPointerLeaveRef = useRef78(onCanvasPointerLeave);
   onCanvasPointerLeaveRef.current = onCanvasPointerLeave;
-  const onSelectionChangeRef = useRef77(onSelectionChange);
+  const onSelectionChangeRef = useRef78(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const {
     overlayRect,
@@ -38729,7 +39198,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     frame = requestAnimationFrame(update);
     return () => cancelAnimationFrame(frame);
   });
-  const offCanvasElementsRef = useRef77(/* @__PURE__ */ new Map());
+  const offCanvasElementsRef = useRef78(/* @__PURE__ */ new Map());
   const [offCanvasRects, setOffCanvasRects] = useState71([]);
   useEffect53(() => {
     const iframe = iframeRef.current;
@@ -38766,6 +39235,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     iframeRef,
     boxRef,
     selectionRef,
+    hoverSelectionRef,
     overlayRectRef,
     groupOverlayItemsRef,
     gestureRef,
@@ -38815,7 +39285,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
     }
     const target = event.target;
     if (target?.closest('[data-dom-edit-selection-box="true"]')) return;
-    onCanvasMouseDown(event, { preferClipAncestor: false });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
     if (event.shiftKey) {
       suppressNextBoxMouseDownRef.current = true;
       suppressNextBoxClickRef.current = true;
@@ -38869,7 +39339,7 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
       event.stopPropagation();
       return;
     }
-    onCanvasMouseDown(event, { preferClipAncestor: false });
+    onCanvasMouseDown(event, { hoverSelection: hoverSelectionRef.current });
   };
   const suppressBoxMouseDown = (e) => {
     if (!suppressNextBoxMouseDownRef.current) return;
@@ -39074,10 +39544,10 @@ var DomEditOverlay = memo35(function DomEditOverlay2({
 });
 
 // src/components/editor/MotionPathOverlay.tsx
-import { memo as memo36, useEffect as useEffect55, useRef as useRef80, useState as useState73 } from "react";
+import { memo as memo36, useEffect as useEffect55, useRef as useRef81, useState as useState73 } from "react";
 
 // src/contexts/DomEditContext.tsx
-import { createContext as createContext6, useCallback as useCallback89, useContext as useContext6, useMemo as useMemo32, useRef as useRef78 } from "react";
+import { createContext as createContext6, useCallback as useCallback90, useContext as useContext6, useMemo as useMemo32, useRef as useRef79 } from "react";
 import { jsx as jsx85 } from "react/jsx-runtime";
 var DomEditActionsContext = createContext6(null);
 var DomEditSelectionContext = createContext6(null);
@@ -39176,9 +39646,9 @@ function DomEditProvider({
   },
   children
 }) {
-  const commitMutationRef = useRef78(commitMutation);
+  const commitMutationRef = useRef79(commitMutation);
   commitMutationRef.current = commitMutation;
-  const stableCommitMutation = useCallback89(
+  const stableCommitMutation = useCallback90(
     (mutation, options) => commitMutationRef.current(mutation, options),
     []
   );
@@ -39533,7 +40003,7 @@ function commitCreatePath(targetSelector, position, x, y, commit) {
 }
 
 // src/components/editor/useMotionPathData.ts
-import { useEffect as useEffect54, useRef as useRef79, useState as useState72 } from "react";
+import { useEffect as useEffect54, useRef as useRef80, useState as useState72 } from "react";
 function transformTranslate(el) {
   const t = el.ownerDocument?.defaultView?.getComputedStyle(el).transform;
   if (!t || t === "none") return { x: 0, y: 0 };
@@ -39599,7 +40069,7 @@ function hasMotionPathPlugin(iframe) {
 function useMotionPathData(iframeRef, selector) {
   const [rect, setRect] = useState72(null);
   const [geometry, setGeometry] = useState72(null);
-  const resolvedForRef = useRef79(null);
+  const resolvedForRef = useRef80(null);
   const geometryResolved = resolvedForRef.current === selector;
   const [visibleInPreview, setVisibleInPreview] = useState72(true);
   const [home, setHome] = useState72(null);
@@ -39696,8 +40166,8 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
   const armed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
   const setMotionPathCreateAvailable = usePlayerStore((s) => s.setMotionPathCreateAvailable);
-  const dragRef = useRef80(null);
-  const parkTimerRef = useRef80(void 0);
+  const dragRef = useRef81(null);
+  const parkTimerRef = useRef81(void 0);
   const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
   useEffect55(() => () => clearTimeout(parkTimerRef.current), [animId]);
   const createMode = geometryResolved && !geometry && Boolean(selection?.element) && !isPlaying;
@@ -40025,7 +40495,7 @@ var MotionPathOverlay = memo36(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo37, useCallback as useCallback90, useEffect as useEffect56, useRef as useRef81, useState as useState74 } from "react";
+import { memo as memo37, useCallback as useCallback91, useEffect as useEffect56, useRef as useRef82, useState as useState74 } from "react";
 import { MagnetStraight, GridFour, Path } from "@phosphor-icons/react";
 import { jsx as jsx88, jsxs as jsxs73 } from "react/jsx-runtime";
 var SNAP_DEFAULTS = {
@@ -40049,9 +40519,9 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
   const motionPathCreateAvailable = usePlayerStore((s) => s.motionPathCreateAvailable);
   const motionPathArmed = usePlayerStore((s) => s.motionPathArmed);
   const setMotionPathArmed = usePlayerStore((s) => s.setMotionPathArmed);
-  const popoverRef = useRef81(null);
-  const gridButtonRef = useRef81(null);
-  const updatePrefs = useCallback90(
+  const popoverRef = useRef82(null);
+  const gridButtonRef = useRef82(null);
+  const updatePrefs = useCallback91(
     (patch) => {
       setPrefs((prev) => {
         const next = { ...prev, ...patch };
@@ -40062,10 +40532,10 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
     },
     [onSnapChange]
   );
-  const toggleSnap = useCallback90(() => {
+  const toggleSnap = useCallback91(() => {
     updatePrefs({ snapEnabled: !prefs.snapEnabled });
   }, [prefs.snapEnabled, updatePrefs]);
-  const toggleGrid = useCallback90(() => {
+  const toggleGrid = useCallback91(() => {
     updatePrefs({ gridVisible: !prefs.gridVisible });
   }, [prefs.gridVisible, updatePrefs]);
   useEffect56(() => {
@@ -40190,7 +40660,7 @@ var SnapToolbar = memo37(function SnapToolbar2({ onSnapChange }) {
 });
 
 // src/components/StudioFeedbackBar.tsx
-import { memo as memo38, useState as useState75, useCallback as useCallback91, useRef as useRef82, useEffect as useEffect57 } from "react";
+import { memo as memo38, useState as useState75, useCallback as useCallback92, useRef as useRef83, useEffect as useEffect57 } from "react";
 import { Fragment as Fragment29, jsx as jsx89, jsxs as jsxs74 } from "react/jsx-runtime";
 var DEFAULT_FEEDBACK_INTERVAL = 10;
 var AUTO_DISMISS_MS = 2e4;
@@ -40249,8 +40719,8 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
   const [comment, setComment] = useState75("");
   const [submitted, setSubmitted] = useState75(false);
   const [exiting, setExiting] = useState75(false);
-  const inputRef = useRef82(null);
-  const dismissTimerRef = useRef82(null);
+  const inputRef = useRef83(null);
+  const dismissTimerRef = useRef83(null);
   useEffect57(() => {
     incrementSessionCount();
     const showTimer = setTimeout(() => {
@@ -40274,12 +40744,12 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
       inputRef.current.focus();
     }
   }, [rating]);
-  const handleDismiss = useCallback91(() => {
+  const handleDismiss = useCallback92(() => {
     setExiting(true);
     markPrompted();
     setTimeout(() => setVisible(false), 300);
   }, []);
-  const handleSubmit = useCallback91(() => {
+  const handleSubmit = useCallback92(() => {
     if (rating === null) return;
     trackStudioFeedback({
       rating,
@@ -40292,7 +40762,7 @@ var StudioFeedbackBar = memo38(function StudioFeedbackBar2() {
       setTimeout(() => setVisible(false), 300);
     }, 1500);
   }, [rating, comment]);
-  const handleRating = useCallback91((n) => {
+  const handleRating = useCallback92((n) => {
     setRating(n);
     if (dismissTimerRef.current) {
       clearTimeout(dismissTimerRef.current);
@@ -40490,7 +40960,7 @@ function StudioPreviewArea({
       snapToGrid: p.snapToGrid ?? false
     };
   });
-  const resolveKeyframeTarget = useCallback92(
+  const resolveKeyframeTarget = useCallback93(
     (pct) => {
       const cached2 = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
       const kf = cached2?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
@@ -40712,17 +41182,17 @@ function StudioPreviewArea({
 
 // src/components/StudioRightPanel.tsx
 import {
-  useCallback as useCallback102,
+  useCallback as useCallback103,
   useMemo as useMemo34,
-  useRef as useRef87,
+  useRef as useRef88,
   useState as useState85
 } from "react";
 
 // src/components/editor/LayersPanel.tsx
-import { memo as memo39, useState as useState78, useCallback as useCallback94, useEffect as useEffect58, useRef as useRef84 } from "react";
+import { memo as memo39, useState as useState78, useCallback as useCallback95, useEffect as useEffect58, useRef as useRef85 } from "react";
 
 // src/components/editor/useLayerDrag.ts
-import { useRef as useRef83, useState as useState77, useCallback as useCallback93 } from "react";
+import { useRef as useRef84, useState as useState77, useCallback as useCallback94 } from "react";
 var DRAG_THRESHOLD_PX2 = 4;
 function isLayerDraggable(layer) {
   if (!(layer.selector || layer.id)) return false;
@@ -40789,10 +41259,10 @@ function useLayerDrag({
   onReorder,
   onSingleSibling
 }) {
-  const dragRef = useRef83(null);
+  const dragRef = useRef84(null);
   const [dragKey, setDragKey] = useState77(null);
   const [insertionLineY, setInsertionLineY] = useState77(null);
-  const handleRowPointerDown = useCallback93(
+  const handleRowPointerDown = useCallback94(
     (layerIndex, e) => {
       if (e.button !== 0) return;
       const layer = visibleLayers[layerIndex];
@@ -40819,7 +41289,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef, onSingleSibling]
   );
-  const handleContainerPointerMove = useCallback93(
+  const handleContainerPointerMove = useCallback94(
     (e) => {
       const drag = dragRef.current;
       if (!drag) return;
@@ -40845,7 +41315,7 @@ function useLayerDrag({
     },
     [visibleLayers, scrollContainerRef]
   );
-  const handleContainerPointerUp = useCallback93(() => {
+  const handleContainerPointerUp = useCallback94(() => {
     const drag = dragRef.current;
     dragRef.current = null;
     setDragKey(null);
@@ -40919,10 +41389,10 @@ var LayersPanel = memo39(function LayersPanel2() {
   } = useDomEditContext();
   const [layers, setLayers] = useState78([]);
   const [collapsed, setCollapsed] = useState78({});
-  const prevDocVersionRef = useRef84(0);
-  const scrollContainerRef = useRef84(null);
+  const prevDocVersionRef = useRef85(0);
+  const scrollContainerRef = useRef85(null);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
-  const collectLayers = useCallback94(() => {
+  const collectLayers = useCallback95(() => {
     const iframe = previewIframeRef.current;
     if (!iframe) return;
     let doc = null;
@@ -40961,7 +41431,7 @@ var LayersPanel = memo39(function LayersPanel2() {
       return () => clearTimeout(timer);
     }
   }, [compositionLoading, collectLayers]);
-  const resolveSelection = useCallback94(
+  const resolveSelection = useCallback95(
     (layer) => {
       let el = layer.element;
       if (!el.isConnected) {
@@ -40981,7 +41451,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [activeCompPath, isMasterView, previewIframeRef, activeGroupElement]
   );
-  const seekToLayer = useCallback94(
+  const seekToLayer = useCallback95(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -41010,7 +41480,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [currentTime, resolveSelection, timelineElements]
   );
-  const handleSelectLayer = useCallback94(
+  const handleSelectLayer = useCallback95(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (!selection) return;
@@ -41019,7 +41489,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, applyDomSelection, seekToLayer]
   );
-  const handleLayerDoubleClick = useCallback94(
+  const handleLayerDoubleClick = useCallback95(
     async (layer) => {
       const selection = await resolveSelection(layer);
       if (selection?.element.hasAttribute("data-hf-group")) {
@@ -41030,7 +41500,7 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, setActiveGroupElement, handleSelectLayer]
   );
-  const handleLayerHover = useCallback94(
+  const handleLayerHover = useCallback95(
     async (layer) => {
       if (!layer) {
         updateDomEditHoverSelection(null);
@@ -41041,11 +41511,11 @@ var LayersPanel = memo39(function LayersPanel2() {
     },
     [resolveSelection, updateDomEditHoverSelection]
   );
-  const toggleCollapse = useCallback94((key, e) => {
+  const toggleCollapse = useCallback95((key, e) => {
     e.stopPropagation();
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   }, []);
-  const handleReorder = useCallback94(
+  const handleReorder = useCallback95(
     (event) => {
       const { siblingLayers, fromIndex, toIndex } = event;
       const reordered = [...siblingLayers];
@@ -41069,7 +41539,7 @@ var LayersPanel = memo39(function LayersPanel2() {
   );
   const selectedKey = domEditSelection ? getDomEditLayerKey(domEditSelection) : null;
   const visibleLayers = getVisibleLayers(layers, collapsed);
-  const handleSingleSibling = useCallback94(() => {
+  const handleSingleSibling = useCallback95(() => {
     showToast("Only one layer at this level", "info");
   }, [showToast]);
   const {
@@ -41269,10 +41739,10 @@ function getVisibleLayers(layers, collapsed) {
 }
 
 // src/captions/components/CaptionPropertyPanel.tsx
-import { memo as memo41, useCallback as useCallback96, useState as useState79 } from "react";
+import { memo as memo41, useCallback as useCallback97, useState as useState79 } from "react";
 
 // src/captions/components/CaptionAnimationPanel.tsx
-import { memo as memo40, useCallback as useCallback95 } from "react";
+import { memo as memo40, useCallback as useCallback96 } from "react";
 
 // src/captions/components/shared.tsx
 import { jsx as jsx92, jsxs as jsxs77 } from "react/jsx-runtime";
@@ -41435,25 +41905,25 @@ var CaptionAnimationPanel = memo40(function CaptionAnimationPanel2() {
   }
   const group = resolvedGroupId ? model?.groups.get(resolvedGroupId) : void 0;
   const animation = group?.animation;
-  const handleEntranceChange = useCallback95(
+  const handleEntranceChange = useCallback96(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "entrance", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleHighlightChange = useCallback95(
+  const handleHighlightChange = useCallback96(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "highlight", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleExitChange = useCallback95(
+  const handleExitChange = useCallback96(
     (update) => {
       if (resolvedGroupId) updateGroupAnimation(resolvedGroupId, "exit", update);
     },
     [resolvedGroupId, updateGroupAnimation]
   );
-  const handleApplyToAll = useCallback95(() => {
+  const handleApplyToAll = useCallback96(() => {
     if (animation) applyAnimationToAll(animation);
   }, [animation, applyAnimationToAll]);
   if (!group || !resolvedGroupId || !animation) {
@@ -41531,7 +42001,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
     ...groupStyle,
     ...segmentOverrides
   };
-  const applyToIframeDom = useCallback96(
+  const applyToIframeDom = useCallback97(
     (updates) => {
       const iframe = iframeRef.current;
       if (!iframe || !model) return;
@@ -41605,7 +42075,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
     },
     [iframeRef, model, selectedSegmentIds]
   );
-  const handleStyleChange = useCallback96(
+  const handleStyleChange = useCallback97(
     (updates) => {
       if (selectedGroupId) {
         updateGroupStyle(selectedGroupId, updates);
@@ -41705,7 +42175,7 @@ var CaptionPropertyPanel = memo41(function CaptionPropertyPanel2({
 });
 
 // src/components/editor/BlockParamsPanel.tsx
-import { memo as memo42, useState as useState80, useCallback as useCallback97 } from "react";
+import { memo as memo42, useState as useState80, useCallback as useCallback98 } from "react";
 import { jsx as jsx95, jsxs as jsxs80 } from "react/jsx-runtime";
 var BlockParamsPanel = memo42(function BlockParamsPanel2({
   blockTitle,
@@ -41720,7 +42190,7 @@ var BlockParamsPanel = memo42(function BlockParamsPanel2({
     }
     return initial;
   });
-  const handleChange = useCallback97((key, value) => {
+  const handleChange = useCallback98((key, value) => {
     setValues((prev) => ({ ...prev, [key]: value }));
   }, []);
   return /* @__PURE__ */ jsxs80("div", { className: "flex flex-col h-full", children: [
@@ -41830,10 +42300,10 @@ function ParamControl({
 }
 
 // src/components/renders/RenderQueue.tsx
-import { memo as memo44, useState as useState82, useRef as useRef85, useEffect as useEffect59 } from "react";
+import { memo as memo44, useState as useState82, useRef as useRef86, useEffect as useEffect59 } from "react";
 
 // src/components/renders/RenderQueueItem.tsx
-import { memo as memo43, useCallback as useCallback98, useState as useState81 } from "react";
+import { memo as memo43, useCallback as useCallback99, useState as useState81 } from "react";
 import { Fragment as Fragment31, jsx as jsx96, jsxs as jsxs81 } from "react/jsx-runtime";
 function formatDuration(ms) {
   if (ms < 1e3) return `${ms}ms`;
@@ -41853,10 +42323,10 @@ var RenderQueueItem = memo43(function RenderQueueItem2({
 }) {
   const [hovered, setHovered] = useState81(false);
   const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
-  const handleOpen = useCallback98(() => {
+  const handleOpen = useCallback99(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
-  const handleDownload = useCallback98(
+  const handleDownload = useCallback99(
     (e) => {
       e.stopPropagation();
       const a = document.createElement("a");
@@ -42045,7 +42515,7 @@ var FORMAT_INFO = {
 };
 function FormatInfoTooltip({ format }) {
   const [open, setOpen] = useState82(false);
-  const timeoutRef = useRef85(void 0);
+  const timeoutRef = useRef86(void 0);
   const show = () => {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -42212,7 +42682,7 @@ var RenderQueue = memo44(function RenderQueue2({
   isRendering,
   compositionDimensions
 }) {
-  const listRef = useRef85(null);
+  const listRef = useRef86(null);
   useEffect59(() => {
     if (listRef.current) {
       listRef.current.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" });
@@ -42295,11 +42765,11 @@ var RenderQueue = memo44(function RenderQueue2({
 });
 
 // src/components/panels/SlideshowPanel.tsx
-import { useState as useState84, useEffect as useEffect60, useCallback as useCallback100, useRef as useRef86 } from "react";
+import { useState as useState84, useEffect as useEffect60, useCallback as useCallback101, useRef as useRef87 } from "react";
 import { parseSlideshowManifest } from "@hyperframes/core/slideshow";
 
 // src/components/panels/SlideshowSubPanels.tsx
-import { useState as useState83, useCallback as useCallback99, useId } from "react";
+import { useState as useState83, useCallback as useCallback100, useId } from "react";
 import { jsx as jsx98, jsxs as jsxs83 } from "react/jsx-runtime";
 function SectionHeader({
   children,
@@ -42484,7 +42954,7 @@ function BranchTree({
 }) {
   const [newLabel, setNewLabel] = useState83("");
   const inputId = useId();
-  const handleCreate = useCallback99(() => {
+  const handleCreate = useCallback100(() => {
     const label = newLabel.trim();
     if (!label) return;
     onCreateSequence(label);
@@ -42545,7 +43015,7 @@ function BranchItem({
 }) {
   const [editing, setEditing] = useState83(false);
   const [draft, setDraft] = useState83(seq.label);
-  const commitRename = useCallback99(() => {
+  const commitRename = useCallback100(() => {
     const label = draft.trim();
     if (label && label !== seq.label) onRename(seq.id, label);
     setEditing(false);
@@ -42643,7 +43113,7 @@ function HotspotTool({
   const selectedElementId = domEditSelection?.element?.id ?? null;
   const selectedHfId = domEditSelection?.hfId ?? null;
   const elementKey = selectedElementId || selectedHfId;
-  const handleMakeHotspot = useCallback99(() => {
+  const handleMakeHotspot = useCallback100(() => {
     if (!selectedSceneId || !targetSequenceId || !elementKey) return;
     const id = `hotspot-${elementKey}-${generateId()}`;
     const label = hotspotLabel.trim() || elementKey;
@@ -42932,8 +43402,8 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   );
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
-  const manifestRef = useRef86(manifest);
-  const notesCtrlRef = useRef86(makeSlideshowNotesController());
+  const manifestRef = useRef87(manifest);
+  const notesCtrlRef = useRef87(makeSlideshowNotesController());
   useEffect60(() => {
     if (!compHtml) {
       notesCtrlRef.current.flush();
@@ -42947,7 +43417,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     manifestRef.current = parsed;
     setSelectedSequenceId(null);
   }, [compHtml]);
-  const applyManifest = useCallback100(
+  const applyManifest = useCallback101(
     async (next) => {
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
       setManifest(merged);
@@ -42960,7 +43430,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [onPersist]
   );
-  const applyNotesManifest = useCallback100(
+  const applyNotesManifest = useCallback101(
     (next) => {
       setManifest(next);
       manifestRef.current = next;
@@ -42974,7 +43444,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
       ctrl.flush();
     };
   }, []);
-  const toggleSection = useCallback100((key) => {
+  const toggleSection = useCallback101((key) => {
     setExpandedSections((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
@@ -42988,25 +43458,25 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const activeSlides = selectedSequenceId ? (manifest.slideSequences ?? []).find((s) => s.id === selectedSequenceId)?.slides ?? [] : manifest.slides;
   const selectedSlide = activeSlides.find((s) => s.sceneId === selectedSceneId);
   const sequences = manifest.slideSequences ?? [];
-  const handleSelectBranchSlide = useCallback100((sequenceId, sceneId) => {
+  const handleSelectBranchSlide = useCallback101((sequenceId, sceneId) => {
     setSelectedSceneId(sceneId);
     setSelectedSequenceId(sequenceId);
   }, []);
-  const handleToggleSlide = useCallback100(
+  const handleToggleSlide = useCallback101(
     (sceneId) => {
       applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleReorder = useCallback100(
+  const handleReorder = useCallback101(
     (sceneId, dir) => {
       applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleSetNotes = useCallback100(
+  const handleSetNotes = useCallback101(
     (notes) => {
       if (!selectedSceneId) return;
       applyNotesManifest(
@@ -43015,7 +43485,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyNotesManifest]
   );
-  const handleMarkFragment = useCallback100(() => {
+  const handleMarkFragment = useCallback101(() => {
     if (!selectedSceneId) return;
     applyManifest(
       addFragment(
@@ -43027,7 +43497,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     ).catch(() => {
     });
   }, [selectedSceneId, selectedSequenceId, currentTime, applyManifest]);
-  const handleRemoveFragment = useCallback100(
+  const handleRemoveFragment = useCallback101(
     (time) => {
       if (!selectedSceneId) return;
       applyManifest(
@@ -43037,7 +43507,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSceneId, selectedSequenceId, applyManifest]
   );
-  const handleCreateSequence = useCallback100(
+  const handleCreateSequence = useCallback101(
     (label) => {
       const id = `seq-${generateId()}`;
       applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {
@@ -43045,14 +43515,14 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleRenameSequence = useCallback100(
+  const handleRenameSequence = useCallback101(
     (id, label) => {
       applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {
       });
     },
     [applyManifest]
   );
-  const handleDeleteSequence = useCallback100(
+  const handleDeleteSequence = useCallback101(
     (id) => {
       const seq = (manifestRef.current.slideSequences ?? []).find((s) => s.id === id);
       const count = seq?.slides.length ?? 0;
@@ -43066,7 +43536,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAssign = useCallback100(
+  const handleAssign = useCallback101(
     (sequenceId, sceneId, assign) => {
       applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch(
         () => {
@@ -43075,7 +43545,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [applyManifest]
   );
-  const handleAddHotspot = useCallback100(
+  const handleAddHotspot = useCallback101(
     (sceneId, hotspot) => {
       applyManifest(
         addHotspot(manifestRef.current, sceneId, hotspot, selectedSequenceId ?? void 0)
@@ -43084,7 +43554,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     },
     [selectedSequenceId, applyManifest]
   );
-  const handleRemoveHotspot = useCallback100(
+  const handleRemoveHotspot = useCallback101(
     (sceneId, hotspotId) => {
       applyManifest(
         removeHotspot(manifestRef.current, sceneId, hotspotId, selectedSequenceId ?? void 0)
@@ -43188,7 +43658,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/hooks/useSlideshowPersist.ts
-import { useCallback as useCallback101 } from "react";
+import { useCallback as useCallback102 } from "react";
 
 // src/utils/setSlideshowManifest.ts
 import {
@@ -43245,7 +43715,7 @@ function useSlideshowPersist({
   domEditSaveTimestampRef,
   coalesceKey
 }) {
-  return useCallback101(
+  return useCallback102(
     async (manifest) => {
       if (!sdkSession) return;
       const path = activeCompPath ?? "index.html";
@@ -43382,8 +43852,8 @@ function StudioRightPanel({
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes"
   });
   const [layersPanePercent, setLayersPanePercent] = useState85(40);
-  const splitContainerRef = useRef87(null);
-  const splitDragRef = useRef87(null);
+  const splitContainerRef = useRef88(null);
+  const splitDragRef = useRef88(null);
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
   const slideshowScenes = useMemo34(() => {
@@ -43408,7 +43878,7 @@ function StudioRightPanel({
     }
     toggleRightInspectorPane(pane);
   };
-  const handleInspectorSplitResizeStart = useCallback102(
+  const handleInspectorSplitResizeStart = useCallback103(
     (event) => {
       event.preventDefault();
       event.currentTarget.setPointerCapture(event.pointerId);
@@ -43421,7 +43891,7 @@ function StudioRightPanel({
     },
     [layersPanePercent]
   );
-  const handleInspectorSplitResizeMove = useCallback102((event) => {
+  const handleInspectorSplitResizeMove = useCallback103((event) => {
     const drag = splitDragRef.current;
     if (!drag || drag.height <= 0) return;
     const deltaPercent = (event.clientY - drag.startY) / drag.height * 100;
@@ -43431,7 +43901,7 @@ function StudioRightPanel({
     );
     setLayersPanePercent(next);
   }, []);
-  const handleInspectorSplitResizeEnd = useCallback102(() => {
+  const handleInspectorSplitResizeEnd = useCallback103(() => {
     splitDragRef.current = null;
   }, []);
   const propertyPanel = /* @__PURE__ */ jsx100(
@@ -43619,10 +44089,10 @@ function StudioRightPanel({
 }
 
 // src/components/TimelineToolbar.tsx
-import { useRef as useRef88 } from "react";
+import { useRef as useRef89 } from "react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback103 } from "react";
+import { useCallback as useCallback104 } from "react";
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
   const own = Object.keys(anim.properties ?? {});
@@ -43832,7 +44302,7 @@ async function applyArcWaypointAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback103(async () => {
+  return useCallback104(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -43891,7 +44361,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect61, useCallback as useCallback104 } from "react";
+import { useEffect as useEffect61, useCallback as useCallback105 } from "react";
 function isTextInput(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -43908,7 +44378,7 @@ function useKeyframeKeyboard({
   onToggleExpand,
   onNudgeKeyframe
 }) {
-  const handler = useCallback104(
+  const handler = useCallback105(
     (e) => {
       if (!enabled) return;
       if (isTextInput(document.activeElement)) return;
@@ -43970,7 +44440,7 @@ function useKeyframeKeyboard({
 import { jsx as jsx101, jsxs as jsxs86 } from "react/jsx-runtime";
 function useKeyframeToggle(session) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const sessionRef = useRef88(session);
+  const sessionRef = useRef89(session);
   sessionRef.current = session;
   const onToggle = useEnableKeyframes(
     sessionRef
@@ -44195,13 +44665,13 @@ function TimelineToolbar({
 }
 
 // src/hooks/useStoryboard.ts
-import { useCallback as useCallback105, useEffect as useEffect62, useState as useState86 } from "react";
+import { useCallback as useCallback106, useEffect as useEffect62, useState as useState86 } from "react";
 function useStoryboard(projectId) {
   const [data, setData] = useState86(null);
   const [loading, setLoading] = useState86(true);
   const [error, setError] = useState86(null);
   const [reloadKey, setReloadKey] = useState86(0);
-  const reload = useCallback105(() => setReloadKey((k) => k + 1), []);
+  const reload = useCallback106(() => setReloadKey((k) => k + 1), []);
   useEffect62(() => {
     if (!projectId) return;
     let cancelled = false;
@@ -44425,7 +44895,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback106, useEffect as useEffect64, useMemo as useMemo35, useRef as useRef89, useState as useState88 } from "react";
+import { useCallback as useCallback107, useEffect as useEffect64, useMemo as useMemo35, useRef as useRef90, useState as useState88 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx108, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -44455,7 +44925,7 @@ function useEditableFile(path, onSaved) {
       cancelled = true;
     };
   }, [path, readProjectFile]);
-  const save = useCallback106(() => {
+  const save = useCallback107(() => {
     if (saving) return;
     setSaving(true);
     setError(null);
@@ -44474,7 +44944,7 @@ function hardenLinks(node) {
 }
 function useMarkdownPreview(source) {
   const [debounced, setDebounced] = useState88(source);
-  const primed = useRef89(false);
+  const primed = useRef90(false);
   useEffect64(() => {
     if (!primed.current && source !== "") {
       primed.current = true;
@@ -44580,7 +45050,7 @@ function StoryboardSourceEditor({
 }
 
 // src/components/storyboard/StoryboardFrameFocus.tsx
-import { useCallback as useCallback107, useEffect as useEffect65, useState as useState89 } from "react";
+import { useCallback as useCallback108, useEffect as useEffect65, useState as useState89 } from "react";
 import { setFrameStatus, setFrameVoiceover } from "@hyperframes/core/storyboard";
 import { jsx as jsx109, jsxs as jsxs92 } from "react/jsx-runtime";
 function StoryboardFrameFocus({
@@ -44598,7 +45068,7 @@ function StoryboardFrameFocus({
   const [draft, setDraft] = useState89(frame.voiceover ?? "");
   const [busy, setBusy] = useState89(false);
   const [error, setError] = useState89(null);
-  const applyEdit = useCallback107(
+  const applyEdit = useCallback108(
     async (edit) => {
       if (busy) return;
       setBusy(true);
@@ -44997,7 +45467,7 @@ function useServerConnection() {
 import { jsx as jsx113, jsxs as jsxs96 } from "react/jsx-runtime";
 function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
-  const initialUrlStateRef = useRef90(readStudioUrlStateFromWindow());
+  const initialUrlStateRef = useRef91(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
   useEffect67(() => {
     if (resolving || waitingForServer) return;
@@ -45015,10 +45485,10 @@ function StudioApp() {
   const [refreshKey, setRefreshKey] = useState92(0);
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState92(0);
   const [blockPreview, setBlockPreview] = useState92(null);
-  const previewIframeRef = useRef90(null);
-  const activeCompPathRef = useRef90(activeCompPath);
+  const previewIframeRef = useRef91(null);
+  const activeCompPathRef = useRef91(activeCompPath);
   activeCompPathRef.current = activeCompPath;
-  const leftSidebarRef = useRef90(null);
+  const leftSidebarRef = useRef91(null);
   const renderQueue = useRenderQueue(projectId);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
@@ -45033,8 +45503,8 @@ function StudioApp() {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
-  const refreshTimersRef = useRef90([]);
-  const refreshPreviewDocumentVersion = useCallback108(() => {
+  const refreshTimersRef = useRef91([]);
+  const refreshPreviewDocumentVersion = useCallback109(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
     setPreviewDocumentVersion((v) => v + 1);
@@ -45052,7 +45522,7 @@ function StudioApp() {
   const [timelineVisible, setTimelineVisible] = useState92(
     () => initialUrlStateRef.current.timelineVisible ?? readStudioUiPreferences().timelineVisible ?? true
   );
-  const toggleTimelineVisibility = useCallback108(() => {
+  const toggleTimelineVisibility = useCallback109(() => {
     setTimelineVisible((v) => {
       writeStudioUiPreferences({ timelineVisible: !v });
       return !v;
@@ -45064,10 +45534,10 @@ function StudioApp() {
     rightPanelTab: initialUrlStateRef.current.rightPanelTab
   });
   const editHistory = usePersistentEditHistory({ projectId });
-  const domEditSaveTimestampRef = useRef90(0);
-  const pendingTimelineEditPathRef = useRef90(/* @__PURE__ */ new Set());
-  const isGestureRecordingRef = useRef90(false);
-  const reloadPreview = useCallback108(() => setRefreshKey((k) => k + 1), []);
+  const domEditSaveTimestampRef = useRef91(0);
+  const pendingTimelineEditPathRef = useRef91(/* @__PURE__ */ new Set());
+  const isGestureRecordingRef = useRef91(false);
+  const reloadPreview = useCallback109(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -45136,18 +45606,18 @@ function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const clearDomSelectionRef = useRef90(() => {
+  const clearDomSelectionRef = useRef91(() => {
   });
-  const domEditSelectionBridgeRef = useRef90(null);
-  const handleDomEditElementDeleteRef = useRef90(
+  const domEditSelectionBridgeRef = useRef91(null);
+  const handleDomEditElementDeleteRef = useRef91(
     async () => {
     }
   );
   const domEditDeleteBridge = (s) => handleDomEditElementDeleteRef.current(s);
-  const resetKeyframesRef = useRef90(() => false);
-  const deleteSelectedKeyframesRef = useRef90(() => {
+  const resetKeyframesRef = useRef91(() => false);
+  const deleteSelectedKeyframesRef = useRef91(() => {
   });
-  const invalidateGsapCacheRef = useRef90(() => {
+  const invalidateGsapCacheRef = useRef91(() => {
   });
   const { handleCopy, handlePaste, handleCut } = useClipboard({
     projectId,
@@ -45190,7 +45660,7 @@ function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: STUDIO_KEYFRAMES_ENABLED ? () => handleToggleRecordingRef.current() : void 0
   });
-  const sidebarTabRef = useRef90({
+  const sidebarTabRef = useRef91({
     select: (t) => leftSidebarRef.current?.selectTab(t),
     get: () => leftSidebarRef.current?.getTab() ?? "compositions"
   });
@@ -45283,9 +45753,9 @@ function StudioApp() {
     resetErrors: resetConsoleErrors
   } = useConsoleErrorCapture(previewIframe);
   const dragOverlay = useDragOverlay(fileManager.handleImportFiles);
-  const handleToggleRecordingRef = useRef90(() => {
+  const handleToggleRecordingRef = useRef91(() => {
   });
-  const domEditSessionRef = useRef90(domEditSession);
+  const domEditSessionRef = useRef91(domEditSession);
   domEditSessionRef.current = domEditSession;
   const { gestureState, gestureRecording, handleToggleRecording } = useGestureCommit({
     domEditSessionRef,
@@ -45294,7 +45764,7 @@ function StudioApp() {
     isGestureRecordingRef
   });
   handleToggleRecordingRef.current = handleToggleRecording;
-  const canvasRectRef = useRef90(null);
+  const canvasRectRef = useRef91(null);
   useLayoutEffect3(() => {
     if (gestureState !== "recording" || !previewIframe) {
       canvasRectRef.current = null;
@@ -45303,7 +45773,7 @@ function StudioApp() {
     const r = previewIframe.getBoundingClientRect();
     canvasRectRef.current = { left: r.left, top: r.top, width: r.width, height: r.height };
   }, [gestureState, previewIframe]);
-  const handlePreviewIframeRef = useCallback108(
+  const handlePreviewIframeRef = useCallback109(
     (iframe) => {
       previewIframeRef.current = iframe;
       setPreviewIframe(iframe);
@@ -45314,7 +45784,7 @@ function StudioApp() {
     },
     [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion]
   );
-  const handleSelectComposition = useCallback108(
+  const handleSelectComposition = useCallback109(
     (comp) => {
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       fileManager.setEditingFile({ path: comp, content: null });
@@ -45520,18 +45990,18 @@ function StudioApp() {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState93, useCallback as useCallback109, useRef as useRef91 } from "react";
+import { useState as useState93, useCallback as useCallback110, useRef as useRef92 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState93(false);
   const [pickedElement, setPickedElement] = useState93(null);
-  const activeOverrideRef = useRef91(null);
-  const getActiveIframe = useCallback109(() => {
+  const activeOverrideRef = useRef92(null);
+  const getActiveIframe = useCallback110(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback109((el) => {
+  const setActiveIframe = useCallback110((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback109(() => {
+  const enablePick = useCallback110(() => {
     try {
       getActiveIframe()?.contentWindow?.postMessage(
         { source: "hf-parent", type: "control", action: "enable-pick-mode" },
@@ -45541,7 +46011,7 @@ function useElementPicker(iframeRef, options) {
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback109(() => {
+  const disablePick = useCallback110(() => {
     try {
       getActiveIframe()?.contentWindow?.postMessage(
         { source: "hf-parent", type: "control", action: "disable-pick-mode" },
@@ -45551,7 +46021,7 @@ function useElementPicker(iframeRef, options) {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback109(() => {
+  const clearPick = useCallback110(() => {
     setPickedElement(null);
   }, []);
   useMountEffect(() => {
@@ -45603,9 +46073,9 @@ function useElementPicker(iframeRef, options) {
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   });
-  const optionsRef = useRef91(options);
+  const optionsRef = useRef92(options);
   optionsRef.current = options;
-  const syncToSource = useCallback109(
+  const syncToSource = useCallback110(
     (elementId, selector, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles || !elementId) return;
@@ -45621,7 +46091,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback109(
+  const setStyle = useCallback110(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -45663,7 +46133,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback109(
+  const setDataAttr = useCallback110(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -45691,7 +46161,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback109(
+  const setTextContent = useCallback110(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -45714,7 +46184,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const activeIframeRef = useRef91(null);
+  const activeIframeRef = useRef92(null);
   activeIframeRef.current = getActiveIframe();
   return {
     isPickMode,