@hyperframes/studio 0.8.126 → 0.8.127

package/dist/index.js

@@ -166,7 +166,7 @@ import {
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
-import { memo as memo33, useCallback as useCallback74 } from "react";
+import { memo as memo33, useCallback as useCallback75 } from "react";
 
 // src/components/nle/PreviewPane.tsx
 import { useCallback as useCallback52, useRef as useRef58, useSyncExternalStore as useSyncExternalStore4 } from "react";
@@ -4736,7 +4736,7 @@ function parsePercentageKeyframes(kfObj) {
       if (!entry2 || typeof entry2 !== "object") return;
       const percentage = steps.length > 1 ? Math.round(i / (steps.length - 1) * 1e3) / 10 : 0;
       const properties = collectAnimatableKeyframeProperties(entry2);
-      if (Object.keys(properties).length > 0) keyframes.push({ percentage, properties });
+      if (Object.keys(properties).length > 0) keyframes.push({ percentage, properties, step: i });
     });
     return keyframes.length > 0 ? { keyframes } : null;
   }
@@ -29547,7 +29547,7 @@ var BUILT_IN_EASES = [
 function withExactStepTimes(anim, tween) {
   const data = anim.keyframes;
   const parts = tween?.timeline?.getChildren?.() ?? [];
-  const total = tween?.duration?.() ?? 0;
+  const total = tween?.timeline?.duration?.() ?? 0;
   if (data?.format !== "object-array" || parts.length !== data.keyframes.length || !(total > 0))
     return anim;
   const ends = parts.map((part) => ((part.startTime?.() ?? 0) + (part.duration?.() ?? 0)) / total);
@@ -29558,6 +29558,20 @@ function withExactStepTimes(anim, tween) {
   }));
   return { ...anim, keyframes: { ...data, keyframes } };
 }
+function nearestKeyframeIndex(keyframes, pct) {
+  let best = -1;
+  keyframes.forEach((kf, i) => {
+    const off = Math.abs(kf.percentage - pct);
+    if (off <= KEYFRAME_PCT_MATCH && (best < 0 || off < Math.abs(keyframes[best].percentage - pct)))
+      best = i;
+  });
+  return best;
+}
+function exactKeyframePct(anim, tween, pct) {
+  const authored = anim.keyframes?.keyframes ?? [];
+  const i = nearestKeyframeIndex(authored, pct);
+  return withExactStepTimes(anim, tween).keyframes?.keyframes[i]?.percentage ?? pct;
+}
 
 // src/components/editor/gsapAnimatesProperty.ts
 var gsapRendersTransform = (el) => !!el._gsap?.renderTransform;
@@ -34317,7 +34331,7 @@ function TimelinePane({
 }
 
 // src/components/nle/PreviewOverlays.tsx
-import { useCallback as useCallback66 } from "react";
+import { useCallback as useCallback67 } from "react";
 
 // src/captions/components/CaptionOverlay.tsx
 import { memo as memo25, useEffect as useEffect43, useState as useState40, useCallback as useCallback54, useRef as useRef60 } from "react";
@@ -44855,114 +44869,6 @@ function TopologyLens({ iframeRef, activeCompositionPath }) {
   );
 }
 
-// src/utils/keyframeUsage.ts
-function keyframeUsageActions(mutations, semanticActions) {
-  const actions = /* @__PURE__ */ new Set();
-  for (const [index, mutation] of mutations.entries()) {
-    const semanticAction = semanticActions?.[index];
-    if (semanticAction) {
-      actions.add(semanticAction);
-      continue;
-    }
-    switch (mutation.type) {
-      case "add-keyframe":
-      case "add-with-keyframes":
-        actions.add("add");
-        break;
-      case "convert-to-keyframes":
-        actions.add("convert");
-        break;
-      case "remove-all-keyframes":
-        actions.add("remove_all");
-        break;
-    }
-  }
-  return actions;
-}
-function trackKeyframeUsage(action, property) {
-  trackStudioEvent("keyframe", property === void 0 ? { action } : { action, property });
-}
-function primaryKeyframeAction(actions) {
-  return ["add", "convert", "remove_all", "reset"].find((action) => actions.has(action));
-}
-function changedMutationIndices(result, count, options) {
-  if (!result.ok || result.changed !== true) return [];
-  const changes = count === 1 ? [true] : result.mutationChanges;
-  if (!Array.isArray(changes) || changes.length !== count || changes.some((value) => typeof value !== "boolean"))
-    return [];
-  return changes.flatMap(
-    (changed, index) => changed && options?.[index]?.keyframeTelemetry !== false ? [index] : []
-  );
-}
-function trackKeyframeCommit(mutations, result, options, memberOptions) {
-  if (!result.ok || result.changed !== true || options.keyframeTelemetry === false) return;
-  const indices = changedMutationIndices(result, mutations.length, memberOptions);
-  const actions = keyframeUsageActions(
-    indices.map((index) => mutations[index]),
-    indices.map(
-      (index) => memberOptions?.[index]?.keyframeAction ?? (mutations.length === 1 ? options.keyframeAction : void 0)
-    )
-  );
-  const action = primaryKeyframeAction(actions);
-  if (action) trackKeyframeUsage(action, action === "add" ? options.keyframeProperty : void 0);
-}
-
-// src/hooks/gsapGestureOutcome.ts
-function observeGsapGesture(writer) {
-  const edit = adoptingStudioPendingEdit();
-  const join = (run) => edit ? edit.within(run) : run();
-  let changed = false;
-  let pendingResults = 0;
-  const actions = /* @__PURE__ */ new Set();
-  const observe = (calls, options) => {
-    pendingResults += 1;
-    return {
-      ...options,
-      ...edit && { pendingEdit: edit },
-      keyframeTelemetry: false,
-      onResult: (result) => {
-        pendingResults -= 1;
-        options.onResult?.(result);
-        if (!result.ok || result.changed !== true) return;
-        changed = true;
-        edit?.markSaved();
-        const members = changedMutationIndices(
-          result,
-          calls.length,
-          calls.map((call) => call.options)
-        ).map((index) => calls[index]);
-        for (const action of keyframeUsageActions(
-          members.map((call) => call.mutation),
-          members.map((call) => call.options.keyframeAction)
-        ))
-          actions.add(action);
-      }
-    };
-  };
-  let commit2 = null;
-  if (writer) {
-    commit2 = (selection, mutation, options) => join(() => writer(selection, mutation, observe([{ selection, mutation, options }], options)));
-    if (writer.batch) {
-      const batch = writer.batch;
-      commit2.batch = (calls, options) => join(() => batch(calls, observe(calls, options)));
-    }
-  }
-  return {
-    commit: commit2,
-    drawKeepingUndone: (draw) => edit ? edit.drawKeepingUndone(draw) : draw(),
-    recordDomResult: (result) => {
-      changed ||= result?.changed === true;
-      if (result?.changed) edit?.markSaved();
-    },
-    finish: (domChanged = false) => {
-      if (pendingResults !== 0) return { ok: true, changed: false };
-      const action = primaryKeyframeAction(actions);
-      if (action) trackKeyframeUsage(action);
-      return { ok: true, changed: changed || domChanged };
-    }
-  };
-}
-
 // src/hooks/gsapKeyframeCacheHelpers.ts
 function sameEntries(before, after) {
   if (before.size !== after.size) return false;
@@ -45126,6 +45032,171 @@ function writeKeyframeCache(sourceFile, elementId2, data) {
 // src/components/editor/MotionPathOverlay.tsx
 import { memo as memo29, useEffect as useEffect59, useRef as useRef75, useState as useState52 } from "react";
 
+// src/hooks/useGsapInteractionFailureTelemetry.ts
+import { useCallback as useCallback65 } from "react";
+
+// src/hooks/gsapEditOutcome.ts
+import { editabilityForProvenance } from "@hyperframes/core/gsap-parser";
+var GSAP_EDIT_BLOCK_COPY = {
+  "no-selector": "This layer needs a stable selector before Studio can save the edit.",
+  "unroll-required": "This motion comes from a helper or loop. Choose Unroll to edit it explicitly.",
+  "source-uneditable": "This animation is computed at runtime. Edit the animation in the Code tab.",
+  "keyframes-uneditable": "Studio can't add this edit to the animation's keyframes. Edit this animation in the Code tab.",
+  "mixed-files": "These layers are animated in different files. Move each file's layers separately."
+};
+var STEP_LIST = "This animation's keyframes have a step";
+var IN_CODE = "Edit them in the Code tab.";
+var GSAP_EDIT_DETAIL_COPY = {
+  "array-step-delay": `${STEP_LIST} with its own delay, which Studio can't keep while it edits them. ${IN_CODE}`,
+  "array-step-callback": `${STEP_LIST} that runs code as it plays (like onComplete), which an edit would run again. ${IN_CODE}`,
+  "array-step-config": `${STEP_LIST} with its own tween setting (like repeat or stagger), which Studio can't keep while it edits them. ${IN_CODE}`,
+  "array-step-computed": `${STEP_LIST} whose value comes from code, which Studio can't keep while it edits them. ${IN_CODE}`,
+  "array-step-relative": `${STEP_LIST} with a relative value (like "+=40"), which an edit would apply again. ${IN_CODE}`,
+  "array-step-random": `${STEP_LIST} with a random() value, which an edit would roll again. ${IN_CODE}`
+};
+function gsapEditBlockMessage(reason, detail) {
+  return (detail && GSAP_EDIT_DETAIL_COPY[detail]) ?? GSAP_EDIT_BLOCK_COPY[reason];
+}
+var GsapEditBlockedError = class extends Error {
+  constructor(reason, detail) {
+    super(gsapEditBlockMessage(reason, detail));
+    this.reason = reason;
+    this.detail = detail;
+    this.name = "GsapEditBlockedError";
+  }
+  reason;
+  detail;
+};
+function assertGsapEditPersisted(outcome) {
+  if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
+}
+async function saveMove(outcome, saveOnElement) {
+  if (outcome.status === "element-offset") return saveOnElement();
+  assertGsapEditPersisted(outcome);
+}
+function assertGsapAnimationDirectlyEditable(animation) {
+  const editability = editabilityForProvenance(animation.provenance);
+  if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");
+  if (editability === "source") {
+    throw new GsapEditBlockedError("source-uneditable", "provenance-runtime-dynamic");
+  }
+  if (animation.hasUnresolvedKeyframes) {
+    throw new GsapEditBlockedError("source-uneditable", "unresolved-keyframes");
+  }
+  if (animation.hasUnresolvedSelector) {
+    throw new GsapEditBlockedError("source-uneditable", "unresolved-selector");
+  }
+}
+function isGsapEditBlockedError(error) {
+  return error instanceof GsapEditBlockedError;
+}
+function animationWritesAnyProperty(animation, properties) {
+  return Object.keys(animation.properties ?? {}).some((property) => properties.has(property)) || Object.keys(animation.fromProperties ?? {}).some((property) => properties.has(property)) || !!animation.keyframes?.keyframes.some(
+    (keyframe) => Object.keys(keyframe.properties).some((property) => properties.has(property))
+  );
+}
+function directEditOutcomeForProperties(animations, properties) {
+  try {
+    for (const animation of animations) {
+      if (animationWritesAnyProperty(animation, properties)) {
+        assertGsapAnimationDirectlyEditable(animation);
+      }
+    }
+    return { status: "persisted" };
+  } catch (error) {
+    if (isGsapEditBlockedError(error))
+      return { status: "blocked", reason: error.reason, detail: error.detail };
+    throw error;
+  }
+}
+
+// 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 DomEditPersistPreparedWriteError = class extends Error {
+  alreadyToasted = true;
+  constructor(targetPath) {
+    super(`The edit saved but its follow-up write to ${targetPath} did not`);
+    this.name = "DomEditPersistPreparedWriteError";
+  }
+};
+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 wasAlreadyToasted(error) {
+  return (error instanceof DomEditPersistUnsafeValueError || error instanceof DomEditPersistPreparedWriteError || error instanceof StudioSaveHttpError) && error.alreadyToasted;
+}
+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
+  });
+  if (wasAlreadyToasted(error)) 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/useGsapInteractionFailureTelemetry.ts
+function failureToast(error, toast) {
+  if (!toast || wasAlreadyToasted(error)) return null;
+  return isGsapEditBlockedError(error) ? error.message : "Failed to save animated edit.";
+}
+function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
+  return useCallback65(
+    (error, selection, mutationType, label, toast) => {
+      const report = isGsapEditBlockedError(error) ? trackStudioEditBlocked : trackStudioSaveFailure;
+      report({
+        source: "gsap_commit",
+        error,
+        filePath: selection?.sourceFile ?? activeCompPath ?? "index.html",
+        mutationType,
+        label,
+        targetId: selection?.id,
+        targetSelector: selection?.selector,
+        targetSourceFile: selection?.sourceFile
+      });
+      const message = failureToast(error, toast !== false);
+      if (message) showToast(message, "error");
+    },
+    [activeCompPath, showToast]
+  );
+}
+
 // src/hooks/gestureTransaction.ts
 var transactionCounter = 0;
 var transactionCommits = /* @__PURE__ */ new WeakSet();
@@ -45282,69 +45353,8 @@ function findSizeSetAnimation(animations, selector, element) {
   ) ?? null;
 }
 
-// src/hooks/gsapEditOutcome.ts
-import { editabilityForProvenance } from "@hyperframes/core/gsap-parser";
-var GSAP_EDIT_BLOCK_COPY = {
-  "no-selector": "This layer needs a stable selector before Studio can save the edit.",
-  "unroll-required": "This motion comes from a helper or loop. Choose Unroll to edit it explicitly.",
-  "source-uneditable": "This animation is computed at runtime. Edit the animation in the Code tab.",
-  "keyframes-uneditable": "Studio can't add this edit to the animation's keyframes. Edit this animation in the Code tab.",
-  "mixed-files": "These layers are animated in different files. Move each file's layers separately."
-};
-var GsapEditBlockedError = class extends Error {
-  constructor(reason, detail) {
-    super(GSAP_EDIT_BLOCK_COPY[reason]);
-    this.reason = reason;
-    this.detail = detail;
-    this.name = "GsapEditBlockedError";
-  }
-  reason;
-  detail;
-};
-function assertGsapEditPersisted(outcome) {
-  if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
-}
-async function saveMove(outcome, saveOnElement) {
-  if (outcome.status === "element-offset") return saveOnElement();
-  assertGsapEditPersisted(outcome);
-}
-function assertGsapAnimationDirectlyEditable(animation) {
-  const editability = editabilityForProvenance(animation.provenance);
-  if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");
-  if (editability === "source") {
-    throw new GsapEditBlockedError("source-uneditable", "provenance-runtime-dynamic");
-  }
-  if (animation.hasUnresolvedKeyframes) {
-    throw new GsapEditBlockedError("source-uneditable", "unresolved-keyframes");
-  }
-  if (animation.hasUnresolvedSelector) {
-    throw new GsapEditBlockedError("source-uneditable", "unresolved-selector");
-  }
-}
-function isGsapEditBlockedError(error) {
-  return error instanceof GsapEditBlockedError;
-}
-function animationWritesAnyProperty(animation, properties) {
-  return Object.keys(animation.properties ?? {}).some((property) => properties.has(property)) || Object.keys(animation.fromProperties ?? {}).some((property) => properties.has(property)) || !!animation.keyframes?.keyframes.some(
-    (keyframe) => Object.keys(keyframe.properties).some((property) => properties.has(property))
-  );
-}
-function directEditOutcomeForProperties(animations, properties) {
-  try {
-    for (const animation of animations) {
-      if (animationWritesAnyProperty(animation, properties)) {
-        assertGsapAnimationDirectlyEditable(animation);
-      }
-    }
-    return { status: "persisted" };
-  } catch (error) {
-    if (isGsapEditBlockedError(error))
-      return { status: "blocked", reason: error.reason, detail: error.detail };
-    throw error;
-  }
-}
-
 // src/hooks/gsapDragCommit.ts
+import { isTweenConfigKey } from "@hyperframes/parsers/gsap-constants";
 function newTweenTarget(selection) {
   return writeTargetSelector(selection);
 }
@@ -45398,6 +45408,28 @@ async function materializeIfDynamic(anim, iframe, commitMutation, selection) {
   void selection;
   throw new GsapEditBlockedError("source-uneditable", "geometry-unresolved-source");
 }
+function stepBlock([key2, value]) {
+  if (key2 === "delay") return "array-step-delay";
+  if (/^on[A-Z]/.test(key2)) return "array-step-callback";
+  if (isTweenConfigKey(key2)) return "array-step-config";
+  if (typeof value === "number") return null;
+  return STEP_VALUE_BLOCKS.find(([pattern]) => pattern.test(value))?.[1] ?? null;
+}
+var STEP_VALUE_BLOCKS = [
+  [/^__raw:/, "array-step-computed"],
+  [/random\(/, "array-step-random"],
+  [/[-+*/]=/, "array-step-relative"]
+];
+function stepListBlock(anim) {
+  const data = anim.keyframes;
+  if (data?.format !== "object-array") return null;
+  const entries = data.keyframes.flatMap((kf) => Object.entries(kf.properties));
+  return entries.map(stepBlock).find(Boolean) ?? null;
+}
+function refuseStepListRewrite(anim) {
+  const step = stepListBlock(anim);
+  if (step) throw new GsapEditBlockedError("keyframes-uneditable", step);
+}
 async function commitStaticGsapPosition(selection, studioOffset, gsapPos, selector, existingSet, callbacks) {
   const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
   if (existingSet) {
@@ -45535,6 +45567,7 @@ async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, ifr
   };
   let effectiveAnim = anim;
   if (anim.keyframes) {
+    refuseStepListRewrite(anim);
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
     if (newId) effectiveAnim = { ...anim, id: newId };
   }
@@ -45577,53 +45610,6 @@ async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, ifr
   );
 }
 
-// src/hooks/gsapWholePropertyOffsetCommit.ts
-async function commitWholePropertyOffset(selection, anim, newValues, currentPct, iframe, callbacks, label) {
-  let effectiveAnim = anim;
-  if (anim.keyframes) {
-    const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
-    if (newId) effectiveAnim = { ...anim, id: newId };
-  }
-  const ts = resolveTweenStart(effectiveAnim);
-  const td = resolveTweenDuration(effectiveAnim);
-  const keys = Object.keys(newValues);
-  const at = (props, key2) => typeof props[key2] === "number" ? props[key2] : PROPERTY_DEFAULTS[key2] ?? 0;
-  const kfs = effectiveAnim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(effectiveAnim)?.keyframes;
-  if (!kfs || kfs.length === 0) {
-    await callbacks.commitMutation(
-      selection,
-      { type: "update-properties", animationId: effectiveAnim.id, properties: newValues },
-      { label, softReload: true }
-    );
-    return;
-  }
-  const nearest = kfs.reduce(
-    (best, kf) => Math.abs(kf.percentage - currentPct) < Math.abs(best.percentage - currentPct) ? kf : best
-  );
-  const shifted = kfs.map((kf) => {
-    const properties = { ...kf.properties };
-    for (const key2 of keys) {
-      properties[key2] = roundTo3(
-        at(properties, key2) + (newValues[key2] - at(nearest.properties, key2))
-      );
-    }
-    return { percentage: kf.percentage, properties, ...kf.ease ? { ease: kf.ease } : {} };
-  });
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "replace-with-keyframes",
-      animationId: effectiveAnim.id,
-      targetSelector: effectiveAnim.targetSelector,
-      position: roundTo3(ts ?? 0),
-      duration: roundTo3(td || 1),
-      keyframes: shifted,
-      ...keyframeEases(effectiveAnim)
-    },
-    { label, softReload: true }
-  );
-}
-
 // src/components/editor/motionPathGeometry.ts
 function nodeCentre(n, home, pScale) {
   const grow2 = (to, now2, share) => to === void 0 ? 0 : (to - now2) * share;
@@ -45674,7 +45660,7 @@ function buildMotionPathGeometry(read2, base2 = { x: 0, y: 0 }) {
     if (!at) return;
     nodes.push({
       ...at,
-      ref: isArc ? { type: "waypoint", index: i } : { type: "keyframe", pct: kf.percentage }
+      ref: isArc ? { type: "waypoint", index: i } : { type: "keyframe", pct: kf.percentage, ...kf.step == null ? {} : { step: kf.step } }
     });
   });
   if (nodes.length < 2) return null;
@@ -45939,6 +45925,386 @@ function MotionPathLine(props) {
   ] });
 }
 
+// src/utils/keyframeUsage.ts
+function keyframeUsageActions(mutations, semanticActions) {
+  const actions = /* @__PURE__ */ new Set();
+  for (const [index, mutation] of mutations.entries()) {
+    const semanticAction = semanticActions?.[index];
+    if (semanticAction) {
+      actions.add(semanticAction);
+      continue;
+    }
+    switch (mutation.type) {
+      case "add-keyframe":
+      case "add-with-keyframes":
+        actions.add("add");
+        break;
+      case "convert-to-keyframes":
+        actions.add("convert");
+        break;
+      case "remove-all-keyframes":
+        actions.add("remove_all");
+        break;
+    }
+  }
+  return actions;
+}
+function trackKeyframeUsage(action, property) {
+  trackStudioEvent("keyframe", property === void 0 ? { action } : { action, property });
+}
+function primaryKeyframeAction(actions) {
+  return ["add", "convert", "remove_all", "reset"].find((action) => actions.has(action));
+}
+function changedMutationIndices(result, count, options) {
+  if (!result.ok || result.changed !== true) return [];
+  const changes = count === 1 ? [true] : result.mutationChanges;
+  if (!Array.isArray(changes) || changes.length !== count || changes.some((value) => typeof value !== "boolean"))
+    return [];
+  return changes.flatMap(
+    (changed, index) => changed && options?.[index]?.keyframeTelemetry !== false ? [index] : []
+  );
+}
+function trackKeyframeCommit(mutations, result, options, memberOptions) {
+  if (!result.ok || result.changed !== true || options.keyframeTelemetry === false) return;
+  const indices = changedMutationIndices(result, mutations.length, memberOptions);
+  const actions = keyframeUsageActions(
+    indices.map((index) => mutations[index]),
+    indices.map(
+      (index) => memberOptions?.[index]?.keyframeAction ?? (mutations.length === 1 ? options.keyframeAction : void 0)
+    )
+  );
+  const action = primaryKeyframeAction(actions);
+  if (action) trackKeyframeUsage(action, action === "add" ? options.keyframeProperty : void 0);
+}
+
+// src/hooks/gsapGestureOutcome.ts
+function observeGsapGesture(writer) {
+  const edit = adoptingStudioPendingEdit();
+  const join = (run) => edit ? edit.within(run) : run();
+  let changed = false;
+  let pendingResults = 0;
+  const actions = /* @__PURE__ */ new Set();
+  const observe = (calls, options) => {
+    pendingResults += 1;
+    return {
+      ...options,
+      ...edit && { pendingEdit: edit },
+      keyframeTelemetry: false,
+      onResult: (result) => {
+        pendingResults -= 1;
+        options.onResult?.(result);
+        if (!result.ok || result.changed !== true) return;
+        changed = true;
+        edit?.markSaved();
+        const members = changedMutationIndices(
+          result,
+          calls.length,
+          calls.map((call) => call.options)
+        ).map((index) => calls[index]);
+        for (const action of keyframeUsageActions(
+          members.map((call) => call.mutation),
+          members.map((call) => call.options.keyframeAction)
+        ))
+          actions.add(action);
+      }
+    };
+  };
+  let commit2 = null;
+  if (writer) {
+    commit2 = (selection, mutation, options) => join(() => writer(selection, mutation, observe([{ selection, mutation, options }], options)));
+    if (writer.batch) {
+      const batch = writer.batch;
+      commit2.batch = (calls, options) => join(() => batch(calls, observe(calls, options)));
+    }
+  }
+  return {
+    commit: commit2,
+    drawKeepingUndone: (draw) => edit ? edit.drawKeepingUndone(draw) : draw(),
+    recordDomResult: (result) => {
+      changed ||= result?.changed === true;
+      if (result?.changed) edit?.markSaved();
+    },
+    finish: (domChanged = false) => {
+      if (pendingResults !== 0) return { ok: true, changed: false };
+      const action = primaryKeyframeAction(actions);
+      if (action) trackKeyframeUsage(action);
+      return { ok: true, changed: changed || domChanged };
+    }
+  };
+}
+
+// src/hooks/gsapTweenReach.ts
+function tweenReach(animation, el) {
+  const doc = el?.ownerDocument;
+  if (!el?.isConnected || !doc || animation.hasUnresolvedSelector) return "unknown";
+  let hits;
+  try {
+    hits = [...doc.querySelectorAll(animation.targetSelector)];
+  } catch {
+    return "unknown";
+  }
+  if (!hits.includes(el)) return "elsewhere";
+  return hits.length === 1 ? "own" : "shared";
+}
+function tweensForThisElement(selection, animations) {
+  return animations.filter((a) => {
+    const reach = tweenReach(a, selection.element);
+    return reach === "own" || reach === "unknown";
+  });
+}
+
+// src/hooks/gsapValueAtPlayhead.ts
+var PERCENTAGE_SEGMENT_EASE = "power1.inOut";
+var ARRAY_STEP_EASE = "none";
+var roundPct2 = (pct) => Math.round(pct * 1e3) / 1e3;
+var isLinear = (ease) => !ease || ease === "none" || ease === "linear";
+function refuse(reason) {
+  return { ok: false, reason };
+}
+function normalize(edit) {
+  const { anim } = edit;
+  const data = anim.keyframes;
+  if (data) {
+    if (data.format === "simple-array") return { reason: "simple-array-keyframes" };
+    const arrayStep = data.format === "object-array";
+    const blocked = stepListBlock(anim);
+    if (blocked) return { reason: blocked };
+    return {
+      runEase: data.ease ?? anim.ease,
+      keyframes: data.keyframes.map((kf) => ({
+        ...kf,
+        properties: { ...kf.properties },
+        ...arrayStep ? { ease: kf.ease ?? ARRAY_STEP_EASE } : {}
+      })),
+      ...data.easeEach && !arrayStep ? { easeEach: data.easeEach } : {}
+    };
+  }
+  const easeEach = anim.ease ?? edit.parsedEase;
+  if (!easeEach) return { reason: "unknown-ease" };
+  const to = { percentage: 100, properties: { ...anim.properties } };
+  if (anim.method === "to") return { keyframes: [to], easeEach };
+  if (anim.method === "fromTo") {
+    return { keyframes: [{ percentage: 0, properties: { ...anim.fromProperties } }, to], easeEach };
+  }
+  if (anim.method === "from") {
+    const end = {};
+    for (const prop of Object.keys(anim.properties)) {
+      const value = edit.implicitEndValue(prop, "end");
+      if (value == null) return { reason: "implicit-end-unknown" };
+      end[prop] = value;
+    }
+    return {
+      keyframes: [
+        { percentage: 0, properties: { ...anim.properties } },
+        { percentage: 100, properties: end }
+      ],
+      easeEach
+    };
+  }
+  return { reason: "not-a-tween" };
+}
+function valueAt(keyframes, prop, side) {
+  const carrying = keyframes.filter((kf2) => kf2.properties[prop] != null);
+  const kf = side === "first" ? carrying[0] : carrying.at(-1);
+  return kf ? { percentage: kf.percentage, value: kf.properties[prop] } : null;
+}
+var keyframeAt = (keyframes, percentage) => keyframes[nearestKeyframeIndex(keyframes, percentage)];
+function upsert(keyframes, percentage, properties, ease) {
+  const hit = keyframeAt(keyframes, percentage);
+  if (hit) {
+    Object.assign(hit.properties, properties);
+    return hit;
+  }
+  const added = { percentage, properties, ...ease ? { ease } : {} };
+  keyframes.push(added);
+  return added;
+}
+function heldEnds(norm, end, implicit, backfilled) {
+  const props = new Set(norm.keyframes.flatMap((kf) => Object.keys(kf.properties)));
+  const held = {};
+  for (const prop of props) {
+    const known = valueAt(norm.keyframes, prop, end === "start" ? "first" : "last");
+    const value = known && (end === "end" || known.percentage <= 0) ? known.value : backfilled[prop] ?? implicit(prop, "start");
+    if (value == null) return null;
+    held[prop] = value;
+  }
+  return held;
+}
+function holdOmittedChannels(steps, implicit, backfilled) {
+  const props = new Set(steps.flatMap((kf) => Object.keys(kf.properties)));
+  for (const prop of props) {
+    let held;
+    for (const kf of steps) {
+      if (kf.properties[prop] != null) held = kf.properties[prop];
+      else {
+        held ??= backfilled[prop] ?? implicit(prop, "start");
+        if (held == null) return false;
+        kf.properties[prop] = held;
+      }
+    }
+  }
+  return true;
+}
+function planValueAtPlayhead(edit) {
+  const { anim, values } = edit;
+  const start = resolveTweenStart(anim);
+  const duration = resolveTweenDuration(anim);
+  if (start == null || !(duration > 0)) return refuse("no-timing");
+  const norm = normalize(edit);
+  if ("reason" in norm) return refuse(norm.reason);
+  const keyframes = norm.keyframes;
+  const authored = keyframes.length;
+  const steps = anim.keyframes?.format === "object-array" ? [...keyframes] : [];
+  if ("scaleX" in values || "scaleY" in values) {
+    for (const kf of keyframes) {
+      const { scale, ...rest } = kf.properties;
+      if (scale != null) kf.properties = { scaleX: scale, scaleY: scale, ...rest };
+    }
+  }
+  const backfilled = {};
+  const pauseStepsHoldThePrevious = new Set(
+    steps.filter((kf) => Object.keys(kf.properties).length === 0)
+  );
+  for (const [prop, value] of Object.entries(edit.backfill ?? {})) {
+    if (!(prop in values) || keyframes.some((kf) => kf.properties[prop] != null)) continue;
+    if (edit.holdFromStart && !keyframes.some((kf) => kf.percentage <= 0))
+      keyframes.unshift({ percentage: 0, properties: {} });
+    for (const kf of keyframes) if (!pauseStepsHoldThePrevious.has(kf)) kf.properties[prop] = value;
+    backfilled[prop] = value;
+  }
+  if (Object.keys(values).some((prop) => !keyframes.some((kf) => kf.properties[prop] != null)))
+    return refuse("implicit-end-unknown");
+  let position = start;
+  let span = duration;
+  const pct = "percentage" in edit.at ? edit.at.percentage : roundPct2((edit.at.time - start) / duration * 100);
+  const eased = !isLinear(norm.runEase);
+  if (pct >= -KEYFRAME_PCT_MATCH && pct <= 100 + KEYFRAME_PCT_MATCH) {
+    const at = Math.min(100, Math.max(0, pct));
+    const hit = keyframeAt(keyframes, at);
+    const onKeyframe = "percentage" in edit.at || hit?.percentage === 0 || hit?.percentage === 100;
+    if (eased && !(hit && onKeyframe)) return refuse("eased-keyframes");
+    const next = [...keyframes].sort((a, b) => a.percentage - b.percentage).find((kf) => kf.percentage > at + KEYFRAME_PCT_MATCH);
+    upsert(keyframes, at, { ...values }, next?.ease);
+  } else {
+    if (eased) return refuse("eased-keyframes");
+    const time = edit.at.time;
+    const before = time < start;
+    const held = heldEnds(norm, before ? "start" : "end", edit.implicitEndValue, backfilled);
+    if (!held) return refuse("implicit-end-unknown");
+    position = before ? time : start;
+    span = before ? start + duration - time : time - start;
+    for (const kf of keyframes) {
+      kf.percentage = roundPct2(
+        (start + kf.percentage / 100 * duration - position) / span * 100
+      );
+    }
+    const oldEdge = roundPct2(((before ? start : start + duration) - position) / span * 100);
+    const linear = isLinear(norm.easeEach ?? PERCENTAGE_SEGMENT_EASE) ? void 0 : "none";
+    const edge = upsert(keyframes, oldEdge, held, linear);
+    if (before && linear) edge.ease ??= linear;
+    upsert(keyframes, before ? 0 : 100, { ...held, ...values }, before ? void 0 : linear);
+  }
+  if (!holdOmittedChannels(steps, edit.implicitEndValue, backfilled))
+    return refuse("implicit-end-unknown");
+  keyframes.sort((a, b) => a.percentage - b.percentage);
+  return {
+    ok: true,
+    mutation: {
+      type: "replace-with-keyframes",
+      animationId: anim.id,
+      targetSelector: anim.targetSelector,
+      position: roundTo3(position),
+      duration: roundTo3(span),
+      keyframes,
+      ...norm.runEase ? { ease: norm.runEase } : {},
+      ...norm.easeEach ? { easeEach: norm.easeEach } : {}
+    },
+    added: keyframes.length > authored
+  };
+}
+function planValueEdit(selection, anim, values, iframe, { backfill, holdFromStart } = {}) {
+  if (tweenReach(anim, selection.element) === "shared") return refuse("shared-tween");
+  const { activeKeyframePct, currentTime } = usePlayerStore.getState();
+  const tween = findParsedTween(iframe, selection.element, anim);
+  const timed = withExactStepTimes(anim, tween);
+  return planValueAtPlayhead({
+    anim: withLiveTiming(timed, tween),
+    at: activeKeyframePct != null ? { percentage: exactKeyframePct(anim, tween, activeKeyframePct) } : { time: currentTime },
+    values,
+    backfill,
+    holdFromStart,
+    implicitEndValue: parsedImplicitEndValue(tween),
+    parsedEase: parsedTweenEase(iframe, tween)
+  });
+}
+async function commitValueAtPlayhead(selection, anim, values, iframe, callbacks, options) {
+  await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
+  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+  const tween = findParsedTween(iframe, selection.element, anim);
+  const parkAt = activeKeyframePct == null ? null : exactKeyframePct(anim, tween, activeKeyframePct);
+  const plan = planValueEdit(selection, anim, values, iframe, options);
+  if (!plan.ok) return { status: "blocked", reason: "keyframes-uneditable", detail: plan.reason };
+  await callbacks.commitMutation(selection, plan.mutation, {
+    label: options.label,
+    softReload: true,
+    beforeReload: options.beforeReload,
+    ...plan.added && { keyframeAction: "add" }
+  });
+  if (parkAt != null) {
+    setActiveKeyframePct(null);
+    parkPlayheadOnKeyframe(anim, parkAt);
+  }
+  return { status: "persisted" };
+}
+
+// src/hooks/gsapWholePropertyOffsetCommit.ts
+async function commitWholePropertyOffset(selection, anim, newValues, currentPct, iframe, callbacks, label) {
+  let effectiveAnim = anim;
+  if (anim.keyframes) {
+    refuseStepListRewrite(anim);
+    const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
+    if (newId) effectiveAnim = { ...anim, id: newId };
+  }
+  const ts = resolveTweenStart(effectiveAnim);
+  const td = resolveTweenDuration(effectiveAnim);
+  const keys = Object.keys(newValues);
+  const at = (props, key2) => typeof props[key2] === "number" ? props[key2] : PROPERTY_DEFAULTS[key2] ?? 0;
+  const kfs = effectiveAnim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(effectiveAnim)?.keyframes;
+  if (!kfs || kfs.length === 0) {
+    await callbacks.commitMutation(
+      selection,
+      { type: "update-properties", animationId: effectiveAnim.id, properties: newValues },
+      { label, softReload: true }
+    );
+    return;
+  }
+  const nearest = kfs.reduce(
+    (best, kf) => Math.abs(kf.percentage - currentPct) < Math.abs(best.percentage - currentPct) ? kf : best
+  );
+  const shifted = kfs.map((kf) => {
+    const properties = { ...kf.properties };
+    for (const key2 of keys) {
+      properties[key2] = roundTo3(
+        at(properties, key2) + (newValues[key2] - at(nearest.properties, key2))
+      );
+    }
+    return { percentage: kf.percentage, properties, ...kf.ease ? { ease: kf.ease } : {} };
+  });
+  await callbacks.commitMutation(
+    selection,
+    {
+      type: "replace-with-keyframes",
+      animationId: effectiveAnim.id,
+      targetSelector: effectiveAnim.targetSelector,
+      position: roundTo3(ts ?? 0),
+      duration: roundTo3(td || 1),
+      keyframes: shifted,
+      ...keyframeEases(effectiveAnim)
+    },
+    { label, softReload: true }
+  );
+}
+
 // src/components/editor/motionPathCommit.ts
 var NEW_PATH_DURATION = 1.5;
 function motionPathCommitOptions(label, method) {
@@ -45957,6 +46323,37 @@ function commitNode(ref, x, y, animationId, commit2) {
     motionPathCommitOptions(ref.type === "keyframe" ? "Move keyframe" : "Move waypoint", "drag")
   );
 }
+function nodeDropLabel(ref) {
+  if (ref.type !== "keyframe") return "Move waypoint";
+  return usePlayerStore.getState().autoKeyframeEnabled ? "Move keyframe" : "Move animation path";
+}
+function commitNodeDrop(drop) {
+  const { ref, at, anim, selection, iframe, commitMutation } = drop;
+  if (ref.type !== "keyframe" || !anim || !selection)
+    return commitNode(ref, at.x, at.y, drop.animId, commitMutation);
+  const writes = observeGsapGesture((_sel, mutation, options) => commitMutation(mutation, options));
+  const callbacks = { commitMutation: writes.commit };
+  let done;
+  const store = usePlayerStore.getState();
+  const step = ref.step == null ? void 0 : anim.keyframes?.keyframes[ref.step];
+  const pct = step?.percentage ?? ref.pct;
+  if (store.autoKeyframeEnabled) {
+    const selected = store.activeKeyframePct;
+    store.setActiveKeyframePct(pct);
+    const live = readGsapPositionFromIframe(iframe, selectorFor(selection) ?? "");
+    done = commitValueAtPlayhead(selection, anim, at, iframe, callbacks, {
+      label: nodeDropLabel(ref),
+      backfill: live ?? void 0
+    }).then(assertGsapEditPersisted).catch((error) => {
+      usePlayerStore.getState().setActiveKeyframePct(selected);
+      throw error;
+    });
+  } else {
+    const label = nodeDropLabel(ref);
+    done = commitWholePropertyOffset(selection, anim, at, pct, iframe, callbacks, label);
+  }
+  return done.then(() => trackPreviewEditResult("motion_path", "drag", writes.finish()));
+}
 function commitAddWaypoint(animationId, index, x, y, commit2) {
   return commit2(
     { type: "add-motion-path-point", animationId, index, x, y },
@@ -46145,6 +46542,8 @@ function interpolatedKeyframePct(a, b, t2) {
 }
 var NODE_PX = 6;
 var DRAG_THRESHOLD_PX2 = 3;
+var noToast = () => {
+};
 var MotionPathOverlay = memo29(function MotionPathOverlay2({
   iframeRef,
   selection,
@@ -46158,6 +46557,11 @@ var MotionPathOverlay = memo29(function MotionPathOverlay2({
     handleGsapRemoveAllKeyframes,
     handleGsapMoveKeyframeToPlayhead
   } = useDomEditContext();
+  const shell = useStudioShellContextOptional();
+  const reportFailure = useGsapInteractionFailureTelemetry(
+    shell?.activeCompPath ?? null,
+    shell?.showToast ?? noToast
+  );
   const { rect, geometry, geometryResolved, visibleInPreview, home, pScale } = useMotionPathData(
     iframeRef,
     selectorFor(selection)
@@ -46346,22 +46750,16 @@ var MotionPathOverlay = memo29(function MotionPathOverlay2({
     }
     if (x === Math.round(d.initX) && y === Math.round(d.initY)) return;
     const anim = d.ref.type === "keyframe" ? selectedGsapAnimations?.find((a) => a.id === animId) : void 0;
-    if (d.ref.type === "keyframe" && anim && selection && !usePlayerStore.getState().autoKeyframeEnabled) {
-      const writes = observeGsapGesture(
-        (_sel, mutation, options) => commitMutation(mutation, options)
-      );
-      void commitWholePropertyOffset(
-        selection,
-        anim,
-        { x, y },
-        d.ref.pct,
-        iframeRef.current,
-        { commitMutation: writes.commit },
-        "Move animation path"
-      ).then(() => trackPreviewEditResult("motion_path", "drag", writes.finish()));
-    } else {
-      void commitNode(d.ref, x, y, animId, commitMutation);
-    }
+    const label = nodeDropLabel(d.ref);
+    commitNodeDrop({
+      ref: d.ref,
+      at: { x, y },
+      animId,
+      anim,
+      selection,
+      iframe: iframeRef.current,
+      commitMutation
+    }).catch((error) => reportFailure(error, selection, "drag", label));
     if (d.ref.type === "keyframe" && anim) {
       parkPlayheadOnKeyframe(anim, d.ref.pct);
     }
@@ -46506,7 +46904,7 @@ var MotionPathOverlay = memo29(function MotionPathOverlay2({
 });
 
 // src/components/editor/SnapToolbar.tsx
-import { memo as memo30, useCallback as useCallback65, useEffect as useEffect60, useRef as useRef76, useState as useState53 } from "react";
+import { memo as memo30, useCallback as useCallback66, useEffect as useEffect60, useRef as useRef76, useState as useState53 } from "react";
 import { MagnetStraight, GridFour, Path, Ruler, FrameCorners } from "@phosphor-icons/react";
 import { jsx as jsx106, jsxs as jsxs77 } from "react/jsx-runtime";
 var SnapToolbar = memo30(function SnapToolbar2() {
@@ -46521,24 +46919,24 @@ var SnapToolbar = memo30(function SnapToolbar2() {
   const gridSpacingAtFocus = useRef76(null);
   const currentGridSpacing = useRef76(prefs.gridSpacing);
   currentGridSpacing.current = prefs.gridSpacing;
-  const settleGridSpacing = useCallback65(() => {
+  const settleGridSpacing = useCallback66(() => {
     const previous = gridSpacingAtFocus.current;
     gridSpacingAtFocus.current = null;
     if (previous !== null && previous !== currentGridSpacing.current)
       trackPreviewFeatureUsed("grid_spacing", "field");
   }, []);
   useEffect60(() => settleGridSpacing, [settleGridSpacing]);
-  const updatePrefs = useCallback65(
+  const updatePrefs = useCallback66(
     (patch) => {
       actions.setSnapPrefs(patch);
     },
     [actions]
   );
-  const toggleSnap = useCallback65(() => {
+  const toggleSnap = useCallback66(() => {
     updatePrefs({ snapEnabled: !prefs.snapEnabled });
     trackPreviewFeatureUsed("snapping", "button");
   }, [prefs.snapEnabled, updatePrefs]);
-  const toggleGrid = useCallback65(() => {
+  const toggleGrid = useCallback66(() => {
     updatePrefs({ gridVisible: !prefs.gridVisible });
     trackPreviewFeatureUsed("grid", "button");
   }, [prefs.gridVisible, updatePrefs]);
@@ -46819,13 +47217,13 @@ function PreviewOverlays({
   const captionModelPresent = useCaptionStore((state) => state.model !== null);
   const captionDismissed = useCaptionStore((state) => state.dismissed);
   const captionSyncError = useCaptionStore((state) => state.syncError);
-  const exitCaptionMode = useCallback66(() => {
+  const exitCaptionMode = useCallback67(() => {
     const store = useCaptionStore.getState();
     store.clearSelection();
     store.setDismissed(true);
     store.setEditMode(false);
   }, []);
-  const enterCaptionMode = useCallback66(() => {
+  const enterCaptionMode = useCallback67(() => {
     const store = useCaptionStore.getState();
     store.setDismissed(false);
     store.setEditMode(true);
@@ -46938,10 +47336,10 @@ function PreviewOverlays({
 }
 
 // src/components/nle/useTimelineEditCallbacks.ts
-import { useCallback as useCallback68, useMemo as useMemo45 } from "react";
+import { useCallback as useCallback69, useMemo as useMemo45 } from "react";
 
 // src/hooks/useGsapTweenCache.ts
-import { useEffect as useEffect62, useMemo as useMemo44, useRef as useRef77, useState as useState55, useCallback as useCallback67 } from "react";
+import { useEffect as useEffect62, useMemo as useMemo44, useRef as useRef77, useState as useState55, useCallback as useCallback68 } from "react";
 
 // src/hooks/gsapRuntimeBridge.ts
 import { isXYPositionWrite, PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
@@ -47050,204 +47448,6 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   return result;
 }
 
-// src/hooks/gsapTweenReach.ts
-function tweenReach(animation, el) {
-  const doc = el?.ownerDocument;
-  if (!el?.isConnected || !doc || animation.hasUnresolvedSelector) return "unknown";
-  let hits;
-  try {
-    hits = [...doc.querySelectorAll(animation.targetSelector)];
-  } catch {
-    return "unknown";
-  }
-  if (!hits.includes(el)) return "elsewhere";
-  return hits.length === 1 ? "own" : "shared";
-}
-function tweensForThisElement(selection, animations) {
-  return animations.filter((a) => {
-    const reach = tweenReach(a, selection.element);
-    return reach === "own" || reach === "unknown";
-  });
-}
-
-// src/hooks/gsapValueAtPlayhead.ts
-var PERCENTAGE_SEGMENT_EASE = "power1.inOut";
-var ARRAY_STEP_EASE = "none";
-var roundPct2 = (pct) => Math.round(pct * 1e3) / 1e3;
-var isLinear = (ease) => !ease || ease === "none" || ease === "linear";
-function refuse(reason) {
-  return { ok: false, reason };
-}
-function normalize(edit) {
-  const { anim } = edit;
-  const data = anim.keyframes;
-  if (data) {
-    if (data.format === "simple-array") return { reason: "simple-array-keyframes" };
-    const arrayStep = data.format === "object-array";
-    return {
-      runEase: data.ease ?? anim.ease,
-      keyframes: data.keyframes.map((kf) => ({
-        ...kf,
-        properties: { ...kf.properties },
-        ...arrayStep ? { ease: kf.ease ?? ARRAY_STEP_EASE } : {}
-      })),
-      ...data.easeEach && !arrayStep ? { easeEach: data.easeEach } : {}
-    };
-  }
-  const easeEach = anim.ease ?? edit.parsedEase;
-  if (!easeEach) return { reason: "unknown-ease" };
-  const to = { percentage: 100, properties: { ...anim.properties } };
-  if (anim.method === "to") return { keyframes: [to], easeEach };
-  if (anim.method === "fromTo") {
-    return { keyframes: [{ percentage: 0, properties: { ...anim.fromProperties } }, to], easeEach };
-  }
-  if (anim.method === "from") {
-    const end = {};
-    for (const prop of Object.keys(anim.properties)) {
-      const value = edit.implicitEndValue(prop, "end");
-      if (value == null) return { reason: "implicit-end-unknown" };
-      end[prop] = value;
-    }
-    return {
-      keyframes: [
-        { percentage: 0, properties: { ...anim.properties } },
-        { percentage: 100, properties: end }
-      ],
-      easeEach
-    };
-  }
-  return { reason: "not-a-tween" };
-}
-function valueAt(keyframes, prop, side) {
-  const carrying = keyframes.filter((kf2) => kf2.properties[prop] != null);
-  const kf = side === "first" ? carrying[0] : carrying.at(-1);
-  return kf ? { percentage: kf.percentage, value: kf.properties[prop] } : null;
-}
-var keyframeAt = (keyframes, percentage) => keyframes.find((kf) => Math.abs(kf.percentage - percentage) <= KEYFRAME_PCT_MATCH);
-function upsert(keyframes, percentage, properties, ease) {
-  const hit = keyframeAt(keyframes, percentage);
-  if (hit) {
-    Object.assign(hit.properties, properties);
-    return hit;
-  }
-  const added = { percentage, properties, ...ease ? { ease } : {} };
-  keyframes.push(added);
-  return added;
-}
-function heldEnds(norm, end, implicit, backfilled) {
-  const props = new Set(norm.keyframes.flatMap((kf) => Object.keys(kf.properties)));
-  const held = {};
-  for (const prop of props) {
-    const known = valueAt(norm.keyframes, prop, end === "start" ? "first" : "last");
-    const value = known && (end === "end" || known.percentage <= 0) ? known.value : backfilled[prop] ?? implicit(prop, "start");
-    if (value == null) return null;
-    held[prop] = value;
-  }
-  return held;
-}
-function planValueAtPlayhead(edit) {
-  const { anim, values } = edit;
-  const start = resolveTweenStart(anim);
-  const duration = resolveTweenDuration(anim);
-  if (start == null || !(duration > 0)) return refuse("no-timing");
-  const norm = normalize(edit);
-  if ("reason" in norm) return refuse(norm.reason);
-  const keyframes = norm.keyframes;
-  const authored = keyframes.length;
-  if ("scaleX" in values || "scaleY" in values) {
-    for (const kf of keyframes) {
-      const { scale, ...rest } = kf.properties;
-      if (scale != null) kf.properties = { scaleX: scale, scaleY: scale, ...rest };
-    }
-  }
-  const backfilled = {};
-  for (const [prop, value] of Object.entries(edit.backfill ?? {})) {
-    if (!(prop in values) || keyframes.some((kf) => kf.properties[prop] != null)) continue;
-    if (edit.holdFromStart && !keyframes.some((kf) => kf.percentage <= 0))
-      keyframes.unshift({ percentage: 0, properties: {} });
-    for (const kf of keyframes) kf.properties[prop] = value;
-    backfilled[prop] = value;
-  }
-  if (Object.keys(values).some((prop) => !keyframes.some((kf) => kf.properties[prop] != null)))
-    return refuse("implicit-end-unknown");
-  let position = start;
-  let span = duration;
-  const pct = "percentage" in edit.at ? edit.at.percentage : roundPct2((edit.at.time - start) / duration * 100);
-  const eased = !isLinear(norm.runEase);
-  if (pct >= -KEYFRAME_PCT_MATCH && pct <= 100 + KEYFRAME_PCT_MATCH) {
-    const at = Math.min(100, Math.max(0, pct));
-    const hit = keyframeAt(keyframes, at);
-    if (eased && hit?.percentage !== 0 && hit?.percentage !== 100) return refuse("eased-keyframes");
-    const next = [...keyframes].sort((a, b) => a.percentage - b.percentage).find((kf) => kf.percentage > at + KEYFRAME_PCT_MATCH);
-    upsert(keyframes, at, { ...values }, next?.ease);
-  } else {
-    if (eased) return refuse("eased-keyframes");
-    const time = edit.at.time;
-    const before = time < start;
-    const held = heldEnds(norm, before ? "start" : "end", edit.implicitEndValue, backfilled);
-    if (!held) return refuse("implicit-end-unknown");
-    position = before ? time : start;
-    span = before ? start + duration - time : time - start;
-    for (const kf of keyframes) {
-      kf.percentage = roundPct2(
-        (start + kf.percentage / 100 * duration - position) / span * 100
-      );
-    }
-    const oldEdge = roundPct2(((before ? start : start + duration) - position) / span * 100);
-    const linear = isLinear(norm.easeEach ?? PERCENTAGE_SEGMENT_EASE) ? void 0 : "none";
-    const edge = upsert(keyframes, oldEdge, held, linear);
-    if (before && linear) edge.ease ??= linear;
-    upsert(keyframes, before ? 0 : 100, { ...held, ...values }, before ? void 0 : linear);
-  }
-  keyframes.sort((a, b) => a.percentage - b.percentage);
-  return {
-    ok: true,
-    mutation: {
-      type: "replace-with-keyframes",
-      animationId: anim.id,
-      targetSelector: anim.targetSelector,
-      position: roundTo3(position),
-      duration: roundTo3(span),
-      keyframes,
-      ...norm.runEase ? { ease: norm.runEase } : {},
-      ...norm.easeEach ? { easeEach: norm.easeEach } : {}
-    },
-    added: keyframes.length > authored
-  };
-}
-function planValueEdit(selection, anim, values, iframe, { backfill, holdFromStart } = {}) {
-  if (tweenReach(anim, selection.element) === "shared") return refuse("shared-tween");
-  const { activeKeyframePct, currentTime } = usePlayerStore.getState();
-  const tween = findParsedTween(iframe, selection.element, anim);
-  const timed = withExactStepTimes(anim, tween);
-  return planValueAtPlayhead({
-    anim: withLiveTiming(timed, tween),
-    at: activeKeyframePct != null ? { percentage: activeKeyframePct } : { time: currentTime },
-    values,
-    backfill,
-    holdFromStart,
-    implicitEndValue: parsedImplicitEndValue(tween),
-    parsedEase: parsedTweenEase(iframe, tween)
-  });
-}
-async function commitValueAtPlayhead(selection, anim, values, iframe, callbacks, options) {
-  await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-  const plan = planValueEdit(selection, anim, values, iframe, options);
-  if (!plan.ok) return { status: "blocked", reason: "keyframes-uneditable", detail: plan.reason };
-  await callbacks.commitMutation(selection, plan.mutation, {
-    label: options.label,
-    softReload: true,
-    beforeReload: options.beforeReload,
-    ...plan.added && { keyframeAction: "add" }
-  });
-  if (activeKeyframePct != null) {
-    setActiveKeyframePct(null);
-    parkPlayheadOnKeyframe(anim, activeKeyframePct);
-  }
-  return { status: "persisted" };
-}
-
 // src/hooks/gsapDragPositionCommit.ts
 function buildTemporalArcKeyframes(anim, percentage, properties) {
   return [
@@ -47455,7 +47655,10 @@ async function planDrag(selection, offset, allAnimations, iframe, options) {
   if (!posAnim) {
     return { status: "blocked", reason: "source-uneditable", detail: "no-position-tween" };
   }
-  if (route === "whole-path") return { status: "persisted" };
+  if (route === "whole-path") {
+    const step = stepListBlock(posAnim);
+    return step ? { status: "blocked", reason: "keyframes-uneditable", detail: step } : { status: "persisted" };
+  }
   const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
   return gsapPositionFromDragOutcome(selection, posAnim, offset, gsapPos, iframe);
 }
@@ -47849,7 +48052,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
 }
 function useGsapCacheVersion() {
   const [version, setVersion] = useState55(0);
-  const bump = useCallback67(() => setVersion((v) => v + 1), []);
+  const bump = useCallback68(() => setVersion((v) => v + 1), []);
   return { version, bump };
 }
 function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeRef) {
@@ -48037,7 +48240,7 @@ function useTimelineEditCallbacks({
     handleGsapRemoveAllKeyframes,
     buildDomSelectionForTimelineElement
   } = useDomEditActionsContext();
-  const resolveElementAnimations = useCallback68(
+  const resolveElementAnimations = useCallback69(
     (elementKey3) => {
       const { gsapAnimations } = usePlayerStore.getState();
       const { sourceFile, domId } = splitTimelineElementKey(elementKey3);
@@ -48050,7 +48253,7 @@ function useTimelineEditCallbacks({
     },
     [activeCompPath]
   );
-  const resolveKeyframeTarget = useCallback68(
+  const resolveKeyframeTarget = useCallback69(
     (elementKey3, target, animations = selectedGsapAnimations) => {
       const carriesIdentity = target.propertyGroup !== void 0 || target.tweenPercentage !== void 0 || target.animationId !== void 0;
       const keyframeCache = usePlayerStore.getState().keyframeCache;
@@ -48063,7 +48266,7 @@ function useTimelineEditCallbacks({
     },
     [selectedGsapAnimations]
   );
-  const removeKeyframeTarget = useCallback68(
+  const removeKeyframeTarget = useCallback69(
     (animationId, percentage, selectionOverride) => {
       handleGsapRemoveKeyframe(animationId, percentage, void 0, selectionOverride);
     },
@@ -48276,7 +48479,7 @@ function useTimelineEditCallbacks({
 }
 
 // src/captions/components/CaptionTimeline.tsx
-import { memo as memo32, useCallback as useCallback69 } from "react";
+import { memo as memo32, useCallback as useCallback70 } from "react";
 import { jsx as jsx109, jsxs as jsxs79 } from "react/jsx-runtime";
 var GROUP_COLORS = [
   "#3CE6AC",
@@ -48299,14 +48502,14 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
   const selectedSegmentIds = useCaptionStore((s) => s.selectedSegmentIds);
   const selectSegment = useCaptionStore((s) => s.selectSegment);
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const handleBlockClick = useCallback69(
+  const handleBlockClick = useCallback70(
     (e, segId) => {
       e.stopPropagation();
       selectSegment(segId, e.shiftKey);
     },
     [selectSegment]
   );
-  const handleBlockKeyDown = useCallback69(
+  const handleBlockKeyDown = useCallback70(
     (e, segId) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -48316,7 +48519,7 @@ var CaptionTimeline = memo32(function CaptionTimeline2({
     },
     [selectSegment]
   );
-  const handleTrackClick = useCallback69(
+  const handleTrackClick = useCallback70(
     (e) => {
       if (!onSeek) return;
       const rect = e.currentTarget.getBoundingClientRect();
@@ -48524,7 +48727,7 @@ function useTimelineSelectionPreviewSync({
 }
 
 // src/webmcp/StudioAgentTools.tsx
-import { useCallback as useCallback70, useEffect as useEffect65, useMemo as useMemo47 } from "react";
+import { useCallback as useCallback71, useEffect as useEffect65, useMemo as useMemo47 } from "react";
 
 // src/webmcp/useStudioAgentTools.ts
 import { useEffect as useEffect64, useRef as useRef79 } from "react";
@@ -49816,7 +50019,7 @@ function StudioAgentTools() {
     studioEditLifecycle.activateProject(projectId);
     return () => studioEditLifecycle.reset();
   }, [projectId]);
-  const getSnapshot = useCallback70(() => {
+  const getSnapshot = useCallback71(() => {
     const player = usePlayerStore.getState();
     return {
       projectId,
@@ -49931,7 +50134,7 @@ function StudioAgentTools() {
 // src/components/dock/Dock.tsx
 import {
   createContext as createContext6,
-  useCallback as useCallback73,
+  useCallback as useCallback74,
   useContext as useContext11,
   useEffect as useEffect66,
   useRef as useRef80,
@@ -50020,7 +50223,7 @@ function installDockAccessibility(api, root) {
 }
 
 // src/components/dock/DockStripActions.tsx
-import { useCallback as useCallback71, useSyncExternalStore as useSyncExternalStore6 } from "react";
+import { useCallback as useCallback72, useSyncExternalStore as useSyncExternalStore6 } from "react";
 import { CornersIn, CornersOut, DotsThree, X as X2 } from "@phosphor-icons/react";
 
 // src/components/dock/dockLayoutStore.ts
@@ -50087,7 +50290,7 @@ function DockStripActions({
   panels,
   isGroupActive
 }) {
-  const subscribe2 = useCallback71(
+  const subscribe2 = useCallback72(
     (onChange) => {
       const subscription = containerApi.onDidMaximizedGroupChange(onChange);
       return () => subscription.dispose();
@@ -50145,7 +50348,7 @@ function DockStripActions({
 }
 
 // src/components/dock/DockTab.tsx
-import { useCallback as useCallback72, useSyncExternalStore as useSyncExternalStore7 } from "react";
+import { useCallback as useCallback73, useSyncExternalStore as useSyncExternalStore7 } from "react";
 import {
   BracketsCurly,
   ChartBarHorizontal,
@@ -50175,7 +50378,7 @@ var TAB_ICONS = {
   slideshow: Presentation
 };
 function DockTab({ api }) {
-  const subscribe2 = useCallback72(
+  const subscribe2 = useCallback73(
     (onChange) => {
       const subscription = api.onDidTitleChange(onChange);
       return () => subscription.dispose();
@@ -50400,7 +50603,7 @@ function useSlots() {
 function PanelSlot({ api }) {
   const { registerSlot } = useSlots();
   const id = api.id;
-  const ref = useCallback73(
+  const ref = useCallback74(
     (element) => {
       if (isPanelId(id)) registerSlot(id, element);
     },
@@ -50479,7 +50682,7 @@ function Root({
   children
 }) {
   const [slots, setSlots] = useState56({});
-  const registerSlot = useCallback73((id, element) => {
+  const registerSlot = useCallback74((id, element) => {
     setSlots((prev) => {
       if (prev[id] === (element ?? void 0)) return prev;
       const next = { ...prev };
@@ -50491,7 +50694,7 @@ function Root({
   const disposeRef = useRef80(() => {
   });
   useEffect66(() => () => disposeRef.current(), []);
-  const onReady = useCallback73(
+  const onReady = useCallback74(
     ({ api }) => {
       disposeRef.current();
       const options = { panels, storageKey, dockWidth };
@@ -50693,7 +50896,7 @@ var EditorShell = memo33(function EditorShell2({
   const { domEditSelection, domEditGroupSelections } = useDomEditSelectionContext();
   const selectedElementId = usePlayerStore((state) => state.selectedElementId);
   const selectedElementIds = usePlayerStore((state) => state.selectedElementIds);
-  const reportTimelineSelectionNotFound = useCallback74(() => {
+  const reportTimelineSelectionNotFound = useCallback75(() => {
     showToast("The selected clip is not available in the preview yet.", "info");
   }, [showToast]);
   useTimelineSelectionPreviewSync({
@@ -50801,10 +51004,10 @@ function EditorShellBody({
   splitShortcut
 }) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
-  const seekCaptionTime = useCallback74((time) => {
+  const seekCaptionTime = useCallback75((time) => {
     usePlayerStore.getState().requestSeek(time);
   }, []);
-  const handleKeyDown = useCallback74(
+  const handleKeyDown = useCallback75(
     (e) => {
       if (e.key === "Escape" && compositionStack.length > 1) {
         updateCompositionStack((prev) => prev.slice(0, -1));
@@ -51044,7 +51247,7 @@ var ImageThumbnail = memo34(function ImageThumbnail2({
 });
 
 // src/hooks/useRenderClipContent.ts
-import { useCallback as useCallback75 } from "react";
+import { useCallback as useCallback76 } from "react";
 import { createElement } from "react";
 
 // src/player/components/TextClipContent.tsx
@@ -51223,7 +51426,7 @@ function useRenderClipContent({
   const sessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
   const thumbnailRevisions = usePlayerStore((s) => s.thumbnailRevisions);
   const elements = usePlayerStore((s) => s.elements);
-  return useCallback75(
+  return useCallback76(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
     (el, style, context = { priority: "visible", rich: false }) => {
@@ -51354,7 +51557,7 @@ function useThumbnailStill(url, projectId, { sessionEpoch = 0, priority = "visib
 }
 
 // src/components/editor/SourceEditor.tsx
-import { useRef as useRef81, useCallback as useCallback76, useEffect as useEffect68, memo as memo35 } from "react";
+import { useRef as useRef81, useCallback as useCallback77, useEffect as useEffect68, memo as memo35 } from "react";
 import {
   EditorView as EditorView2,
   keymap,
@@ -51514,7 +51717,7 @@ var SourceEditor = memo35(function SourceEditor2({
   onChangeRef.current = onChange;
   const contentRef = useRef81(content);
   contentRef.current = content;
-  const mountEditor = useCallback76(
+  const mountEditor = useCallback77(
     (node) => {
       if (editorRef.current) {
         editorRef.current.destroy();
@@ -51582,7 +51785,7 @@ import { memo as memo39, useMemo as useMemo65, useRef as useRef112, useState as
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
 
 // src/contexts/DesignPanelInputContext.tsx
-import { useCallback as useCallback77, useContext as useContext12, useMemo as useMemo50 } from "react";
+import { useCallback as useCallback78, useContext as useContext12, useMemo as useMemo50 } from "react";
 
 // src/utils/designInputTracking.ts
 var COALESCE_WINDOW_MS = 600;
@@ -51633,7 +51836,7 @@ function DesignPanelInputProvider({
 }
 function useTrackDesignInput() {
   const { ui, section } = useContext12(DesignPanelInputContext);
-  return useCallback77(
+  return useCallback78(
     (control, name) => trackDesignInput({ ui, section, control, name }),
     [ui, section]
   );
@@ -52238,13 +52441,13 @@ function buildElementInfoText(element, sourceLabel, gsapAnimations, previewIfram
 }
 
 // src/components/editor/propertyPanelPrimitives.tsx
-import { useCallback as useCallback79, useEffect as useEffect71, useRef as useRef84, useState as useState60 } from "react";
+import { useCallback as useCallback80, useEffect as useEffect71, useRef as useRef84, useState as useState60 } from "react";
 
 // src/components/editor/propertyPanelCommitField.tsx
 import { useEffect as useEffect70, useRef as useRef83, useState as useState59 } from "react";
 
 // src/components/editor/useInspectorGestureTransaction.ts
-import { useCallback as useCallback78, useEffect as useEffect69, useRef as useRef82, useState as useState58 } from "react";
+import { useCallback as useCallback79, useEffect as useEffect69, useRef as useRef82, useState as useState58 } from "react";
 function isPromiseCommit(result) {
   return Boolean(result && typeof result.then === "function");
 }
@@ -52278,13 +52481,13 @@ function useInspectorGestureTransaction({
   }
   previewRef.current = onPreview;
   commitRef.current = onCommit;
-  const begin = useCallback78(() => {
+  const begin = useCallback79(() => {
     if (!activeRef.current) {
       generationRef.current += 1;
       activeRef.current = { before: sourceRef.current, latest: sourceRef.current };
     }
   }, []);
-  const preview = useCallback78((value) => {
+  const preview = useCallback79((value) => {
     if (!activeRef.current) {
       generationRef.current += 1;
       activeRef.current = { before: sourceRef.current, latest: sourceRef.current };
@@ -52292,7 +52495,7 @@ function useInspectorGestureTransaction({
     activeRef.current.latest = value;
     previewRef.current(value);
   }, []);
-  const rollbackCommit = useCallback78((active, generation) => {
+  const rollbackCommit = useCallback79((active, generation) => {
     if (generation !== generationRef.current) return;
     pendingRef.current = null;
     if (awaitingSourceAckRef.current?.generation === generation) {
@@ -52301,7 +52504,7 @@ function useInspectorGestureTransaction({
     sourceRef.current = active.before;
     previewRef.current(active.before);
   }, []);
-  const settle = useCallback78(() => {
+  const settle = useCallback79(() => {
     const active = activeRef.current;
     activeRef.current = null;
     if (active && !Object.is(active.before, active.latest)) {
@@ -52327,7 +52530,7 @@ function useInspectorGestureTransaction({
       }
     }
   }, [rollbackCommit]);
-  const cancel = useCallback78(() => {
+  const cancel = useCallback79(() => {
     generationRef.current += 1;
     const active = activeRef.current;
     activeRef.current = null;
@@ -52575,14 +52778,14 @@ function MetricField({
 }) {
   const track2 = useTrackDesignInput();
   const scrubRef = useRef84(null);
-  const commit2 = useCallback79(
+  const commit2 = useCallback80(
     (nextValue) => {
       if (nextValue !== value) track2("metric", label);
       return onCommit(nextValue);
     },
     [label, onCommit, track2, value]
   );
-  const handleScrubPointerDown = useCallback79(
+  const handleScrubPointerDown = useCallback80(
     (e) => {
       if (disabled || !scrub) return;
       const parsed = parseFloat(value);
@@ -52592,7 +52795,7 @@ function MetricField({
     },
     [disabled, scrub, value]
   );
-  const handleScrubPointerMove = useCallback79(
+  const handleScrubPointerMove = useCallback80(
     (e) => {
       const state = scrubRef.current;
       if (!state) return;
@@ -52601,7 +52804,7 @@ function MetricField({
     },
     [commit2]
   );
-  const handleScrubPointerUp = useCallback79(() => {
+  const handleScrubPointerUp = useCallback80(() => {
     scrubRef.current = null;
   }, []);
   const scrubProps = scrub && !disabled ? {
@@ -53297,7 +53500,7 @@ import {
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingSlider.tsx
-import { useCallback as useCallback80, useEffect as useEffect73, useRef as useRef85, useState as useState62 } from "react";
+import { useCallback as useCallback81, useEffect as useEffect73, useRef as useRef85, useState as useState62 } from "react";
 import { jsx as jsx124, jsxs as jsxs90 } from "react/jsx-runtime";
 var SLIDER_THUMB_SIZE = 10;
 var SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
@@ -53346,11 +53549,11 @@ function ColorGradingSliderControl({
     },
     []
   );
-  const clampDraft = useCallback80(
+  const clampDraft = useCallback81(
     (nextValue) => clampNumber2(nextValue, min, max),
     [max, min]
   );
-  const setLocalDraft = useCallback80(
+  const setLocalDraft = useCallback81(
     (nextValue) => {
       const clamped = clampDraft(nextValue);
       const source = valueRef.current;
@@ -53360,7 +53563,7 @@ function ColorGradingSliderControl({
     },
     [clampDraft, scale]
   );
-  const commitDraft = useCallback80(
+  const commitDraft = useCallback81(
     (nextValue) => {
       const clamped = setLocalDraft(nextValue);
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
@@ -53372,7 +53575,7 @@ function ColorGradingSliderControl({
     },
     [label, onCommit, setLocalDraft, track2]
   );
-  const scheduleCommit = useCallback80(
+  const scheduleCommit = useCallback81(
     (nextValue) => {
       const clamped = setLocalDraft(nextValue);
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
@@ -53384,7 +53587,7 @@ function ColorGradingSliderControl({
   );
   const draft = draftState?.source === value ? draftState.value : value;
   const inputValue = inputDraft?.source === value ? inputDraft.value : formatNumericInput(draft, scale);
-  const commitInputDraft = useCallback80(() => {
+  const commitInputDraft = useCallback81(() => {
     const parsed = parseNumericInput(inputValue, scale);
     if (parsed === null) {
       interactionChangedRef.current = false;
@@ -53393,7 +53596,7 @@ function ColorGradingSliderControl({
     }
     commitDraft(parsed);
   }, [commitDraft, inputValue, scale]);
-  const nudge = useCallback80(
+  const nudge = useCallback81(
     (direction) => {
       interactionChangedRef.current = true;
       commitDraft(draft + step * direction);
@@ -54014,7 +54217,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback82, useEffect as useEffect75, useMemo as useMemo52, useRef as useRef88, useState as useState65 } from "react";
+import { useCallback as useCallback83, useEffect as useEffect75, useMemo as useMemo52, useRef as useRef88, useState as useState65 } from "react";
 import {
   HF_COLOR_GRADING_ATTR as HF_COLOR_GRADING_ATTR3,
   hasHfColorGradingAuthoredValues,
@@ -54024,7 +54227,7 @@ import {
 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/useColorGradingPreviews.ts
-import { useCallback as useCallback81, useEffect as useEffect74, useRef as useRef87, useState as useState64 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect74, useRef as useRef87, useState as useState64 } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
   HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS,
@@ -54199,14 +54402,14 @@ function useColorGradingPreviews({
     request,
     target
   ]);
-  const stopAnimatedPreview = useCallback81(() => {
+  const stopAnimatedPreview = useCallback82(() => {
     const session = animatedRef.current;
     if (!session) return;
     animatedRef.current = null;
     if (session.timer !== null) window.clearTimeout(session.timer);
     session.stopPlayback();
   }, []);
-  const previewColorGrading = useCallback81(
+  const previewColorGrading = useCallback82(
     (next, options) => {
       stopAnimatedPreview();
       postColorGrading(next ?? gradingRef.current);
@@ -54253,7 +54456,7 @@ function useColorGradingPreviews({
     [gradingRef, postColorGrading, previewIframeRef, stopAnimatedPreview, target]
   );
   useEffect74(() => stopAnimatedPreview, [identityKey, stopAnimatedPreview]);
-  const requestPreviews = useCallback81(
+  const requestPreviews = useCallback82(
     (kind, effects) => {
       setRequest((current) => ({
         kind,
@@ -54263,12 +54466,12 @@ function useColorGradingPreviews({
     },
     []
   );
-  const requestPresetPreviews = useCallback81(() => requestPreviews("presets"), [requestPreviews]);
-  const requestEffectPreviews = useCallback81(
+  const requestPresetPreviews = useCallback82(() => requestPreviews("presets"), [requestPreviews]);
+  const requestEffectPreviews = useCallback82(
     (effects) => requestPreviews("effects", effects),
     [requestPreviews]
   );
-  const captureGradedFrame = useCallback81(
+  const captureGradedFrame = useCallback82(
     async ({
       grading: requestedGrading = gradingRef.current
     } = {}) => {
@@ -54433,7 +54636,7 @@ function useColorGradingController({
     }),
     [element.hfId, element.id, element.selector, element.selectorIndex]
   );
-  const refreshRuntimeStatus = useCallback82(() => {
+  const refreshRuntimeStatus = useCallback83(() => {
     setRuntimeStatus(readRuntimeColorGradingStatus(previewIframeRef?.current, target));
   }, [previewIframeRef, target]);
   useEffect75(() => {
@@ -54462,11 +54665,11 @@ function useColorGradingController({
     });
     return () => controller.abort();
   }, [projectId, selectedAssetPath]);
-  const clearStatusTimers = useCallback82(() => {
+  const clearStatusTimers = useCallback83(() => {
     for (const timer of statusTimersRef.current) clearTimeout(timer);
     statusTimersRef.current = [];
   }, []);
-  const scheduleRuntimeStatusRefresh = useCallback82(() => {
+  const scheduleRuntimeStatusRefresh = useCallback83(() => {
     clearStatusTimers();
     statusTimersRef.current = RUNTIME_STATUS_REFRESH_DELAYS.map(
       (delay2) => window.setTimeout(refreshRuntimeStatus, delay2)
@@ -54475,7 +54678,7 @@ function useColorGradingController({
   useEffect75(() => {
     refreshRuntimeStatus();
   }, [refreshRuntimeStatus]);
-  const persistColorGradingValue = useCallback82(
+  const persistColorGradingValue = useCallback83(
     (value, attemptedGrading, attemptIdentityKey, isLatestAttempt, setAttributeLive) => {
       const applySettled = (ok) => {
         if (identityKeyRef.current !== attemptIdentityKey) return;
@@ -54499,7 +54702,7 @@ function useColorGradingController({
     },
     []
   );
-  const flushPendingPersist = useCallback82(() => {
+  const flushPendingPersist = useCallback83(() => {
     if (persistTimerRef.current) {
       clearTimeout(persistTimerRef.current);
       persistTimerRef.current = null;
@@ -54527,7 +54730,7 @@ function useColorGradingController({
       void flushPendingPersist();
     };
   }, [clearStatusTimers, flushPendingPersist]);
-  const postColorGrading = useCallback82(
+  const postColorGrading = useCallback83(
     (nextGrading) => {
       postRuntimeControlMessage(previewIframeRef?.current?.contentWindow, "set-color-grading", {
         target,
@@ -54544,7 +54747,7 @@ function useColorGradingController({
     previewIframeRef,
     postColorGrading
   });
-  const postCompare = useCallback82(
+  const postCompare = useCallback83(
     (enabled) => {
       postRuntimeControlMessage(
         previewIframeRef?.current?.contentWindow,
@@ -54596,7 +54799,7 @@ function useColorGradingController({
     },
     [postCompare]
   );
-  const commitColorGrading = useCallback82(
+  const commitColorGrading = useCallback83(
     (nextGrading) => {
       latestGradingRef.current = nextGrading;
       setGrading(nextGrading);
@@ -54638,7 +54841,7 @@ function useColorGradingController({
       scheduleRuntimeStatusRefresh
     ]
   );
-  const commitCompare = useCallback82(
+  const commitCompare = useCallback83(
     (enabled) => {
       const nextEnabled = enabled && isHfColorGradingActive(grading);
       setCompareEnabled(nextEnabled);
@@ -54648,7 +54851,7 @@ function useColorGradingController({
     },
     [grading, postColorGrading, postCompare, scheduleRuntimeStatusRefresh]
   );
-  const applyToScope = useCallback82(async () => {
+  const applyToScope = useCallback83(async () => {
     if (!onApplyScope || applyBusy) return;
     setApplyBusy(true);
     try {
@@ -54897,7 +55100,7 @@ function ColorGradingSection({
 import { useEffect as useEffect81, useRef as useRef93, useState as useState74 } from "react";
 
 // src/components/editor/propertyPanelColor.tsx
-import { useCallback as useCallback83, useEffect as useEffect76, useLayoutEffect as useLayoutEffect12, useRef as useRef89, useState as useState66 } from "react";
+import { useCallback as useCallback84, useEffect as useEffect76, useLayoutEffect as useLayoutEffect12, useRef as useRef89, useState as useState66 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx127, jsxs as jsxs93 } from "react/jsx-runtime";
 var COLOR_PICKER_SIZE = { width: 292, height: 386 };
@@ -55032,13 +55235,13 @@ function ColorField({
   const saturationPercent = Math.round(hsv.saturation * 100);
   const brightnessPercent = Math.round(hsv.value * 100);
   const alphaPercent = Math.round(draftColor.alpha * 100);
-  const updateColorDraft = useCallback83((nextValue, source) => {
+  const updateColorDraft = useCallback84((nextValue, source) => {
     const nextColor = parseCssColor(nextValue);
     if (!nextColor) return;
     setDraftColor(nextColor);
     if (source === "picker") setHexDraft(toHexColor(nextColor).toUpperCase());
   }, []);
-  const resolveColorGestureValue = useCallback83((nextValue) => {
+  const resolveColorGestureValue = useCallback84((nextValue) => {
     const source = nextValue.startsWith("#") ? "hex" : "picker";
     if (source === "hex" && !/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(nextValue)) return null;
     const nextColor = parseCssColor(nextValue);
@@ -55051,7 +55254,7 @@ function ColorField({
       })
     };
   }, []);
-  const persistColorValue = useCallback83(
+  const persistColorValue = useCallback84(
     (nextValue) => {
       if (nextValue !== value) track2("color", label);
       onCommit(nextValue);
@@ -55081,7 +55284,7 @@ function ColorField({
     setDraftColor(nextColor);
     setHexDraft(toHexColor(nextColor).toUpperCase());
   }, [value]);
-  const updatePanelPosition = useCallback83(() => {
+  const updatePanelPosition = useCallback84(() => {
     const anchor2 = buttonRef.current?.getBoundingClientRect();
     if (!anchor2) return;
     const measured = panelRef.current?.getBoundingClientRect();
@@ -57227,7 +57430,7 @@ function GradientField({
 }
 
 // src/components/editor/BorderRadiusEditor.tsx
-import { useCallback as useCallback84, useState as useState72 } from "react";
+import { useCallback as useCallback85, useState as useState72 } from "react";
 import { jsx as jsx135, jsxs as jsxs100 } from "react/jsx-runtime";
 var PREVIEW_W = 72;
 var PREVIEW_H = 52;
@@ -57254,7 +57457,7 @@ function BorderRadiusEditor({
   const sTR = scaleRadius(tr, maxVal);
   const sBR = scaleRadius(br, maxVal);
   const sBL = scaleRadius(bl, maxVal);
-  const handleCornerCommit = useCallback84(
+  const handleCornerCommit = useCallback85(
     (corner, raw) => {
       const v = parseNumericValue(raw) ?? 0;
       if (linked) {
@@ -57265,7 +57468,7 @@ function BorderRadiusEditor({
     },
     [linked, onCommit]
   );
-  const handleToggleLinked = useCallback84(() => {
+  const handleToggleLinked = useCallback85(() => {
     if (!linked && !uniform) {
       onCommit("all", tl);
     }
@@ -58304,11 +58507,11 @@ function TextSection({
 import { memo as memo38 } from "react";
 
 // src/components/editor/GsapAnimationList.tsx
-import { useCallback as useCallback87, useState as useState76 } from "react";
+import { useCallback as useCallback88, useState as useState76 } from "react";
 import { useShallow } from "zustand/react/shallow";
 
 // src/components/editor/AnimationCard.tsx
-import { memo as memo37, useCallback as useCallback86, useEffect as useEffect82, useMemo as useMemo57, useRef as useRef94, useState as useState75 } from "react";
+import { memo as memo37, useCallback as useCallback87, useEffect as useEffect82, useMemo as useMemo57, useRef as useRef94, useState as useState75 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -58346,7 +58549,7 @@ function buildTweenSummary(animation) {
 }
 
 // src/components/editor/ArcPathControls.tsx
-import { memo as memo36, useCallback as useCallback85 } from "react";
+import { memo as memo36, useCallback as useCallback86 } from "react";
 
 // src/components/editor/panelTokens.ts
 var P = {
@@ -58366,10 +58569,10 @@ var ArcPathControls = memo36(function ArcPathControls2({
   onToggleAutoRotate,
   disabled
 }) {
-  const handleToggle = useCallback85(() => {
+  const handleToggle = useCallback86(() => {
     onToggle(!arcPath.enabled);
   }, [arcPath.enabled, onToggle]);
-  const handleAutoRotate = useCallback85(() => {
+  const handleAutoRotate = useCallback86(() => {
     onToggleAutoRotate(!arcPath.autoRotate);
   }, [arcPath.autoRotate, onToggleAutoRotate]);
   if (segmentCount < 1) {
@@ -58867,7 +59070,7 @@ var AnimationCard = memo37(function AnimationCard2({
     () => SUPPORTED_PROPS.filter((p) => !usedFromProps.has(p) && !BOOLEAN_PROPS.has(p)),
     [usedFromProps]
   );
-  const commitProperty = useCallback86(
+  const commitProperty = useCallback87(
     (prop, raw) => {
       const value = parseNumericOrString(raw);
       onUpdateProperty(animation.id, prop, value);
@@ -58875,13 +59078,13 @@ var AnimationCard = memo37(function AnimationCard2({
     },
     [animation.id, onUpdateProperty, onLivePreviewEnd]
   );
-  const scrubProperty = useCallback86(
+  const scrubProperty = useCallback87(
     (prop, raw) => {
       onLivePreview?.(prop, parseNumericOrString(raw));
     },
     [onLivePreview]
   );
-  const commitFromProperty = useCallback86(
+  const commitFromProperty = useCallback87(
     (prop, raw) => {
       const value = parseNumericOrString(raw);
       onUpdateFromProperty?.(animation.id, prop, value);
@@ -58889,7 +59092,7 @@ var AnimationCard = memo37(function AnimationCard2({
     },
     [animation.id, onUpdateFromProperty, onLivePreviewEnd]
   );
-  const commitDuration = useCallback86(
+  const commitDuration = useCallback87(
     (raw) => {
       const num = Number(raw);
       if (Number.isFinite(num) && num >= 0)
@@ -58897,7 +59100,7 @@ var AnimationCard = memo37(function AnimationCard2({
     },
     [animation.id, onUpdateMeta]
   );
-  const commitPosition = useCallback86(
+  const commitPosition = useCallback87(
     (raw) => {
       const num = Number(raw);
       if (Number.isFinite(num) && num >= 0)
@@ -59352,7 +59555,7 @@ function GsapAnimationList({
     timelineSessionEpoch,
     selectedElementId
   }) && animations.some((animation) => animation.id === focusedEaseSegment.animationId) ? focusedEaseSegment : null;
-  const consumeFocusedEaseSegment = useCallback87(() => {
+  const consumeFocusedEaseSegment = useCallback88(() => {
     if (focusedHere) {
       usePlayerStore.getState().clearFocusedEaseSegment(focusedHere.nonce);
     }
@@ -62271,7 +62474,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback90, useEffect as useEffect90, useMemo as useMemo59, useRef as useRef99, useState as useState86 } from "react";
+import { useCallback as useCallback91, useEffect as useEffect90, useMemo as useMemo59, useRef as useRef99, useState as useState86 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -62351,7 +62554,7 @@ import { DEFAULT_CARVE as DEFAULT_CARVE2 } from "@hyperframes/core/audio-carve";
 import { fxAutomationTarget as fxAutomationTarget3 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxControls.tsx
-import { useCallback as useCallback88, useEffect as useEffect88, useRef as useRef98, useState as useState83 } from "react";
+import { useCallback as useCallback89, useEffect as useEffect88, useRef as useRef98, useState as useState83 } from "react";
 import { jsx as jsx160, jsxs as jsxs123 } from "react/jsx-runtime";
 function toSlider(p, value) {
   if (p.scale !== "log" || p.min <= 0) return value;
@@ -62410,7 +62613,7 @@ function FxParamRow({
   useEffect88(() => {
     setPending(null);
   }, [value]);
-  const handleNumber = useCallback88(
+  const handleNumber = useCallback89(
     (raw) => {
       const p = param;
       const next = Math.min(p.max, Math.max(p.min, raw));
@@ -62421,7 +62624,7 @@ function FxParamRow({
     },
     [param, onChange]
   );
-  const commit2 = useCallback88(() => {
+  const commit2 = useCallback89(() => {
     setDragging(false);
     if (!edited.current) return;
     edited.current = false;
@@ -62535,11 +62738,11 @@ function FxParams({
   onAutomate,
   onRemoveAutomation
 }) {
-  const set = useCallback88(
+  const set = useCallback89(
     (key2, value) => onChange({ ...params, [key2]: value }),
     [params, onChange]
   );
-  const commit2 = useCallback88(
+  const commit2 = useCallback89(
     (key2, value) => onCommit?.({ ...params, [key2]: value }),
     [params, onCommit]
   );
@@ -63071,7 +63274,7 @@ function CarveAnalysis({
 }
 
 // src/components/editor/propertyPanelFxEqModule.tsx
-import { useCallback as useCallback89, useEffect as useEffect89, useState as useState84 } from "react";
+import { useCallback as useCallback90, useEffect as useEffect89, useState as useState84 } from "react";
 import {
   audioEqSummary,
   HF_AUDIO_EQ_RANGE_DB
@@ -63162,8 +63365,8 @@ function FxEqModule({
   onCommit,
   onRemove
 }) {
-  const preview = useCallback89((name, gain) => onPreview(name, gain), [onPreview]);
-  const commit2 = useCallback89((name, gain) => onCommit(name, gain), [onCommit]);
+  const preview = useCallback90((name, gain) => onPreview(name, gain), [onPreview]);
+  const commit2 = useCallback90((name, gain) => onCommit(name, gain), [onCommit]);
   return /* @__PURE__ */ jsxs125(
     "div",
     {
@@ -64247,14 +64450,14 @@ function FxSection({
   const [adding, setAdding] = useState86(false);
   const [picking, setPicking] = useState86(false);
   const [openNode, setOpenNode] = useState86(0);
-  const mutate = useCallback90(
+  const mutate = useCallback91(
     (nodes, input, control = "button") => {
       onChainChange({ ...chain, nodes });
       if (input) trackInput(control, input);
     },
     [chain, onChainChange, trackInput]
   );
-  const previewNode = useCallback90(
+  const previewNode = useCallback91(
     (index, params) => onChainPreview?.({
       ...chain,
       nodes: chain.nodes.map((n, i) => i === index ? { ...n, params } : n)
@@ -64266,7 +64469,7 @@ function FxSection({
     onChainPreview,
     onAuditionTransport
   );
-  const applyPreset = useCallback90(
+  const applyPreset = useCallback91(
     (id) => {
       const next = applyPresetToChain(storedChain(), id, trackKind);
       if (!next) return;
@@ -64277,7 +64480,7 @@ function FxSection({
     },
     [storedChain, mutate, clearAudition, trackKind]
   );
-  const addJob = useCallback90(
+  const addJob = useCallback91(
     (job) => {
       clearAudition();
       trackNodeAdded(job.type, "job", job.id, { trackKind });
@@ -64287,7 +64490,7 @@ function FxSection({
     },
     [chain, mutate, clearAudition, trackKind]
   );
-  const addEffect = useCallback90(
+  const addEffect = useCallback91(
     (type) => {
       clearAudition();
       trackNodeAdded(type, "effect", null, { trackKind });
@@ -64297,11 +64500,11 @@ function FxSection({
     },
     [chain, mutate, clearAudition, trackKind]
   );
-  const updateNode = useCallback90(
+  const updateNode = useCallback91(
     (index, patch) => mutate(chain.nodes.map((n, i) => i === index ? { ...n, ...patch } : n)),
     [chain.nodes, mutate]
   );
-  const setRunAmount = useCallback90(
+  const setRunAmount = useCallback91(
     (items, amount, persist2 = true) => {
       const slots = new Set(items.map((item) => item.i));
       const next = {
@@ -64313,7 +64516,7 @@ function FxSection({
     },
     [chain, mutate, onChainPreview]
   );
-  const removeRun = useCallback90(
+  const removeRun = useCallback91(
     (items, presetId) => {
       const ids = items.map(({ node }) => node.id).filter((id) => Boolean(id));
       if (ids.length > 0 || presetId) onRemoveNodesAutomation?.(ids, presetId);
@@ -64327,7 +64530,7 @@ function FxSection({
     },
     [chain.nodes, mutate, onRemoveNodesAutomation, trackKind]
   );
-  const removeNode = useCallback90(
+  const removeNode = useCallback91(
     (index) => {
       const removed = chain.nodes[index];
       const removedId = removed?.id;
@@ -64393,7 +64596,7 @@ function FxSection({
       setPendingReveal(null);
     }
   }, [openNode, openEq, carveOpen, collapsedRuns, pendingReveal]);
-  const addEq = useCallback90(() => {
+  const addEq = useCallback91(() => {
     clearAudition();
     const { chain: next, eqId } = addAudioEq(chain);
     trackNodeAdded("eq", "eq", null, { trackKind });
@@ -64401,15 +64604,15 @@ function FxSection({
     setOpenEq(eqId);
     setAdding(false);
   }, [chain, mutate, clearAudition, trackKind]);
-  const previewEqBand = useCallback90(
+  const previewEqBand = useCallback91(
     (eqId, band, gain) => onChainPreview?.(setAudioEqBandGain(chain, eqId, band, gain)),
     [chain, onChainPreview]
   );
-  const commitEqBand = useCallback90(
+  const commitEqBand = useCallback91(
     (eqId, band, gain) => mutate(setAudioEqBandGain(chain, eqId, band, gain).nodes, "eq-gain", "slider"),
     [chain, mutate]
   );
-  const removeEq = useCallback90(
+  const removeEq = useCallback91(
     (eqId) => {
       const ids = chain.nodes.filter((node) => node.fromEq === eqId).map((node) => node.id).filter((id) => Boolean(id));
       if (ids.length > 0) onRemoveNodesAutomation?.(ids);
@@ -64417,7 +64620,7 @@ function FxSection({
     },
     [chain, mutate, onRemoveNodesAutomation]
   );
-  const moveNode = useCallback90(
+  const moveNode = useCallback91(
     (index, delta) => {
       const target = index + delta;
       if (target < 0 || target >= chain.nodes.length) return;
@@ -64430,7 +64633,7 @@ function FxSection({
     },
     [chain.nodes, mutate, trackKind]
   );
-  const closeMenus = useCallback90(
+  const closeMenus = useCallback91(
     (event) => {
       if (event.key !== "Escape" || !adding && !picking) return;
       event.stopPropagation();
@@ -70200,11 +70403,11 @@ var PropertyPanel = memo39(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo41, useState as useState103, useCallback as useCallback92, useMemo as useMemo67, useRef as useRef114 } from "react";
+import { memo as memo41, useState as useState103, useCallback as useCallback93, useMemo as useMemo67, useRef as useRef114 } from "react";
 import { Plus as Plus2, FolderSimplePlus as FolderSimplePlus2 } from "@phosphor-icons/react";
 
 // src/components/editor/FileTreeNodes.tsx
-import { memo as memo40, useState as useState102, useCallback as useCallback91, useMemo as useMemo66, useRef as useRef113, useEffect as useEffect104 } from "react";
+import { memo as memo40, useState as useState102, useCallback as useCallback92, useMemo as useMemo66, useRef as useRef113, useEffect as useEffect104 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -70706,7 +70909,7 @@ var TreeFolder = memo40(function TreeFolder2({
   lintFindingsByFile
 }) {
   const [isOpen, setIsOpen] = useState102(defaultOpen);
-  const toggle = useCallback91(() => setIsOpen((v) => !v), []);
+  const toggle = useCallback92(() => setIsOpen((v) => !v), []);
   const children = useMemo66(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
   const isDragOver = dragOverFolder === node.fullPath;
@@ -70846,7 +71049,7 @@ var FileTree = memo41(function FileTree2({
   const [dragOverFolder, setDragOverFolder] = useState103(null);
   const dragSourceRef = useRef114(null);
   const hasFileOps = !!(onCreateFile || onCreateFolder || onDeleteFile || onRenameFile || onDuplicateFile);
-  const handleContextMenu = useCallback92(
+  const handleContextMenu = useCallback93(
     (e, path, isFolder) => {
       if (!hasFileOps) return;
       e.preventDefault();
@@ -70854,8 +71057,8 @@ var FileTree = memo41(function FileTree2({
     },
     [hasFileOps]
   );
-  const handleCloseContextMenu = useCallback92(() => setContextMenu(null), []);
-  const handleNewFile = useCallback92(
+  const handleCloseContextMenu = useCallback93(() => setContextMenu(null), []);
+  const handleNewFile = useCallback93(
     (parentPath) => {
       setInlineInput({
         parentPath,
@@ -70870,7 +71073,7 @@ var FileTree = memo41(function FileTree2({
     },
     [onCreateFile]
   );
-  const handleNewFolder = useCallback92(
+  const handleNewFolder = useCallback93(
     (parentPath) => {
       setInlineInput({
         parentPath,
@@ -70885,7 +71088,7 @@ var FileTree = memo41(function FileTree2({
     },
     [onCreateFolder]
   );
-  const handleRename = useCallback92(
+  const handleRename = useCallback93(
     (path) => {
       const name = path.includes("/") ? path.slice(path.lastIndexOf("/") + 1) : path;
       const parentPath = path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
@@ -70906,13 +71109,13 @@ var FileTree = memo41(function FileTree2({
     },
     [onRenameFile]
   );
-  const handleDuplicate = useCallback92(
+  const handleDuplicate = useCallback93(
     (path) => {
       onDuplicateFile?.(path);
     },
     [onDuplicateFile]
   );
-  const handleDelete2 = useCallback92(
+  const handleDelete2 = useCallback93(
     (path) => {
       setDeleteTarget({
         path,
@@ -70923,24 +71126,24 @@ var FileTree = memo41(function FileTree2({
     },
     [contextMenu]
   );
-  const handleDeleteConfirm = useCallback92(() => {
+  const handleDeleteConfirm = useCallback93(() => {
     if (deleteTarget) {
       onDeleteFile?.(deleteTarget.path);
       setDeleteTarget(null);
     }
   }, [deleteTarget, onDeleteFile]);
-  const handleDeleteCancel = useCallback92(() => {
+  const handleDeleteCancel = useCallback93(() => {
     setDeleteTarget(null);
   }, []);
-  const handleDragStart = useCallback92((e, path) => {
+  const handleDragStart = useCallback93((e, path) => {
     dragSourceRef.current = path;
     e.dataTransfer.effectAllowed = "move";
     e.dataTransfer.setData("text/plain", path);
   }, []);
-  const handleDragOver = useCallback92((_e, folderPath) => {
+  const handleDragOver = useCallback93((_e, folderPath) => {
     setDragOverFolder(folderPath);
   }, []);
-  const handleDrop = useCallback92(
+  const handleDrop = useCallback93(
     (e, folderPath) => {
       if (e.dataTransfer.files.length > 0 && !dragSourceRef.current) {
         e.preventDefault();
@@ -70963,10 +71166,10 @@ var FileTree = memo41(function FileTree2({
     },
     [onMoveFile, onImportFiles]
   );
-  const handleDragLeave = useCallback92(() => {
+  const handleDragLeave = useCallback93(() => {
     setDragOverFolder(null);
   }, []);
-  const handleRootContextMenu = useCallback92(
+  const handleRootContextMenu = useCallback93(
     (e) => {
       if (!hasFileOps) return;
       if (e.target === e.currentTarget) {
@@ -71181,7 +71384,7 @@ function useToolbarSession(session) {
 }
 
 // src/hooks/useRightPanelIntents.ts
-import { useCallback as useCallback93, useEffect as useEffect105, useRef as useRef116 } from "react";
+import { useCallback as useCallback94, useEffect as useEffect105, useRef as useRef116 } from "react";
 function useSlideshowDockPanel(isSlideshowComposition) {
   const controller = useDockLayoutStore((state) => state.controller);
   const wasSlideshow = useRef116(false);
@@ -71203,7 +71406,7 @@ function useBlockParamsDismissal({
   }, [hasBlockParams, designVisible, onDismiss]);
 }
 function useDismissingTabSetter(setTab, dismissBlockParams) {
-  return useCallback93(
+  return useCallback94(
     (tab) => {
       if (tab !== "block-params") dismissBlockParams();
       setTab(tab);
@@ -71229,7 +71432,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState105, useEffect as useEffect107, useCallback as useCallback95, useRef as useRef118, useMemo as useMemo69 } from "react";
+import { useState as useState105, useEffect as useEffect107, useCallback as useCallback96, useRef as useRef118, useMemo as useMemo69 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -71247,7 +71450,7 @@ async function readServerError(res) {
 }
 
 // src/components/renders/useFfmpegStatus.ts
-import { useCallback as useCallback94, useEffect as useEffect106, useRef as useRef117, useState as useState104 } from "react";
+import { useCallback as useCallback95, useEffect as useEffect106, useRef as useRef117, useState as useState104 } from "react";
 function ffmpegInstallMessage(status) {
   const title = status?.title ?? "FFmpeg not found";
   const remedy = status?.command ?? status?.hint;
@@ -71285,7 +71488,7 @@ function useFfmpegStatus() {
       mounted.current = false;
     };
   }, []);
-  const run = useCallback94(async () => {
+  const run = useCallback95(async () => {
     setChecking(true);
     const next = await probe();
     cached4 = next;
@@ -71297,7 +71500,7 @@ function useFfmpegStatus() {
     if (cached4 !== null) return;
     void run();
   }, [run]);
-  const recheck = useCallback94(() => {
+  const recheck = useCallback95(() => {
     cached4 = null;
     void run();
   }, [run]);
@@ -71480,17 +71683,17 @@ function useRenderQueue(projectId, activeCompPathRef) {
   const activeJobRef = useRef118(null);
   const sessionJobs = useRef118(/* @__PURE__ */ new Map());
   const promptedJobIds = useRef118(/* @__PURE__ */ new Set());
-  const addSessionJob = useCallback95((job, settings) => {
+  const addSessionJob = useCallback96((job, settings) => {
     sessionJobs.current.set(job.id, settings);
     setJobs((prev) => [...prev, job]);
   }, []);
-  const closeActiveEventSource = useCallback95((jobId) => {
+  const closeActiveEventSource = useCallback96((jobId) => {
     if (jobId && activeJobRef.current !== jobId) return;
     eventSourceRef.current?.close();
     eventSourceRef.current = null;
     activeJobRef.current = null;
   }, []);
-  const loadRenders = useCallback95(async () => {
+  const loadRenders = useCallback96(async () => {
     if (!projectId) return;
     try {
       const res = await studioApiFetch(buildProjectApiPath(projectId, `/renders`));
@@ -71524,7 +71727,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
   useEffect107(() => {
     loadRenders();
   }, [loadRenders]);
-  const startRender = useCallback95(
+  const startRender = useCallback96(
     // fallow-ignore-next-line complexity
     async (opts = {}) => {
       if (!projectId) return;
@@ -71663,7 +71866,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     },
     [projectId, activeCompPathRef, closeActiveEventSource, addSessionJob, ffmpeg, ffmpegMissing]
   );
-  const cancelRender = useCallback95(
+  const cancelRender = useCallback96(
     async (jobId) => {
       setActionError(null);
       closeActiveEventSource(jobId);
@@ -71690,7 +71893,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     },
     [closeActiveEventSource, loadRenders]
   );
-  const deleteRender = useCallback95(
+  const deleteRender = useCallback96(
     async (jobId) => {
       setActionError(null);
       closeActiveEventSource(jobId);
@@ -71708,7 +71911,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     },
     [closeActiveEventSource]
   );
-  const clearCompleted = useCallback95(() => {
+  const clearCompleted = useCallback96(() => {
     setJobs((prev) => {
       const finished = prev.filter((j) => j.status !== "rendering");
       if (projectId && finished.length > 0) {
@@ -71719,7 +71922,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       return prev.filter((j) => j.status === "rendering");
     });
   }, [projectId]);
-  const dismissActionError = useCallback95(() => setActionError(null), []);
+  const dismissActionError = useCallback96(() => setActionError(null), []);
   useEffect107(() => {
     for (const job of jobs) {
       if (job.status === "rendering" || job.status === "cancelled") continue;
@@ -71798,7 +72001,7 @@ import { useRef as useRef120, useState as useState106 } from "react";
 import { XIcon, WarningIcon, CheckCircleIcon, CaretRightIcon } from "@phosphor-icons/react";
 
 // src/components/ui/useDialogBehavior.ts
-import { useEffect as useEffect108, useCallback as useCallback96, useRef as useRef119 } from "react";
+import { useEffect as useEffect108, useCallback as useCallback97, useRef as useRef119 } from "react";
 var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 function useDialogBehavior({
   open,
@@ -71811,7 +72014,7 @@ function useDialogBehavior({
   canCloseRef.current = canClose;
   const onCloseRef = useRef119(onClose);
   onCloseRef.current = onClose;
-  const requestClose = useCallback96(() => {
+  const requestClose = useCallback97(() => {
     const guard = canCloseRef.current;
     if (guard && !guard()) return;
     onCloseRef.current();
@@ -72156,7 +72359,7 @@ function toastSurface(isError) {
 }
 
 // src/components/feedback/StudioFeedbackCard.tsx
-import { memo as memo42, useState as useState108, useCallback as useCallback97, useRef as useRef122, useEffect as useEffect109 } from "react";
+import { memo as memo42, useState as useState108, useCallback as useCallback98, useRef as useRef122, useEffect as useEffect109 } from "react";
 
 // src/components/feedback/projectProvenance.ts
 var CONFIG_FILE = "hyperframes.json";
@@ -72243,13 +72446,13 @@ var StudioFeedbackCard = memo42(function StudioFeedbackCard2() {
   const timerRef = useRef122(null);
   const stateRef = useRef122({ request, rating, step });
   stateRef.current = { request, rating, step };
-  const clearTimer = useCallback97(() => {
+  const clearTimer = useCallback98(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const close = useCallback97(
+  const close = useCallback98(
     (via) => {
       const { request: req, rating: picked, step: at } = stateRef.current;
       if (!req) return;
@@ -72296,7 +72499,7 @@ var StudioFeedbackCard = memo42(function StudioFeedbackCard2() {
   useEffect109(() => {
     if (step === "comment") inputRef.current?.focus();
   }, [step]);
-  const submit = useCallback97(
+  const submit = useCallback98(
     (preset) => {
       const req = stateRef.current.request;
       if (!req) return;
@@ -72323,7 +72526,7 @@ var StudioFeedbackCard = memo42(function StudioFeedbackCard2() {
     },
     [rating, comment, followUp.id, close, clearTimer]
   );
-  const pickRating = useCallback97((n) => {
+  const pickRating = useCallback98((n) => {
     setRating(n);
     setFollowUp(followUpFor(n));
     setStep("comment");
@@ -72859,7 +73062,7 @@ function CompositionMissingBanner({ path }) {
 }
 
 // src/captions/hooks/useCaptionSync.ts
-import { useCallback as useCallback98, useRef as useRef124 } from "react";
+import { useCallback as useCallback99, useRef as useRef124 } from "react";
 function buildOverrides(model) {
   const entries = [];
   let globalWordIndex = 0;
@@ -72896,7 +73099,7 @@ function useCaptionSync(projectId) {
   const suppressSaveRef = useRef124(false);
   const pendingRef = useRef124(false);
   const editSeqRef = useRef124(0);
-  const save = useCallback98(() => {
+  const save = useCallback99(() => {
     const state = useCaptionStore.getState();
     if (!state.model || !state.sourceFilePath) {
       pendingRef.current = false;
@@ -72962,7 +73165,7 @@ function useCaptionSync(projectId) {
       useCaptionStore.getState().setRetrySave(null);
     };
   });
-  const loadOverrides = useCallback98(async () => {
+  const loadOverrides = useCallback99(async () => {
     const state = useCaptionStore.getState();
     if (!state.model || !state.sourceFilePath) return;
     const pid = projectIdRef.current;
@@ -73025,7 +73228,7 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback99, useEffect as useEffect111, useMemo as useMemo70, useRef as useRef125, useState as useState111 } from "react";
+import { useCallback as useCallback100, useEffect as useEffect111, useMemo as useMemo70, useRef as useRef125, useState as useState111 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
 var OWN_ENTRIES_KEPT = 100;
 function createOwnHistory() {
@@ -73159,7 +73362,7 @@ function usePersistentEditHistory({ projectId }) {
   const projectIdRef = useRef125(projectId);
   projectIdRef.current = projectId;
   const [own] = useState111(createOwnHistory);
-  const refresh2 = useCallback99(async () => {
+  const refresh2 = useCallback100(async () => {
     if (!projectId) return;
     const seen = own.changes();
     const response = await studioApiFetch(historyUrl(projectId)).catch(() => null);
@@ -73176,7 +73379,7 @@ function usePersistentEditHistory({ projectId }) {
     own.clear();
     void refresh2().finally(() => setLoaded(true));
   }, [refresh2, own]);
-  const recordEdit = useCallback99(
+  const recordEdit = useCallback100(
     async ({ label, coalesceKey, coalesceMs, files, created = [] }) => {
       if (!projectId) return;
       const paths = [...Object.keys(files), ...created];
@@ -73197,7 +73400,7 @@ function usePersistentEditHistory({ projectId }) {
     },
     [projectId, refresh2, own]
   );
-  const step = useCallback99(
+  const step = useCallback100(
     async (direction, callbacks) => {
       if (!projectId) return { ok: false, reason: "empty" };
       const candidate = direction === "undo" && callbacks.claimedAfter !== void 0 ? own.claimedAfter(callbacks.claimedAfter) : null;
@@ -73245,12 +73448,12 @@ function usePersistentEditHistory({ projectId }) {
     },
     [projectId, view, refresh2, own]
   );
-  const noteOutsideChange = useCallback99(() => {
+  const noteOutsideChange = useCallback100(() => {
     own.overtake();
     void refresh2();
   }, [own, refresh2]);
-  const undo = useCallback99((callbacks) => step("undo", callbacks), [step]);
-  const redo = useCallback99((callbacks) => step("redo", callbacks), [step]);
+  const undo = useCallback100((callbacks) => step("undo", callbacks), [step]);
+  const redo = useCallback100((callbacks) => step("redo", callbacks), [step]);
   const state = useMemo70(() => {
     const backAt = Math.max(view.back?.endedAt ?? 0, heldClaimRef.current?.at ?? 0);
     const redoAt = redoneAt(view);
@@ -73278,7 +73481,7 @@ function usePersistentEditHistory({ projectId }) {
 }
 
 // src/hooks/usePanelLayout.ts
-import { useCallback as useCallback100, useEffect as useEffect112, useRef as useRef126 } from "react";
+import { useCallback as useCallback101, useEffect as useEffect112, useRef as useRef126 } from "react";
 function panelForTab(tab) {
   return tab === "block-params" ? "design" : tab;
 }
@@ -73313,13 +73516,13 @@ function usePanelLayout(initialState2) {
   const visibleRight = visiblePanelInZone("right", lastActive, visiblePanels);
   const rightPanelTab = tabForPanel(visibleRight);
   const rightCollapsed = visibleRight === null;
-  const setRightPanelTab = useCallback100((tab) => {
+  const setRightPanelTab = useCallback101((tab) => {
     const store = useDockLayoutStore.getState();
     const shown2 = visiblePanelInZone("right", store.lastActive, store.visiblePanels);
     store.activatePanel(panelForTab(tab));
     if (tabForPanel(shown2) !== tab) trackStudioEvent("tab_switch", { panel: "right_panel", tab });
   }, []);
-  const setRightCollapsed = useCallback100((collapsed) => {
+  const setRightCollapsed = useCallback101((collapsed) => {
     const store = useDockLayoutStore.getState();
     if (!collapsed && visiblePanelInZone("right", store.lastActive, store.visiblePanels) === null) {
       store.activatePanel("design");
@@ -73334,10 +73537,10 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState113, useCallback as useCallback104, useRef as useRef129 } from "react";
+import { useState as useState113, useCallback as useCallback105, useRef as useRef129 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState112, useCallback as useCallback101, useEffect as useEffect113, useMemo as useMemo71, useRef as useRef127 } from "react";
+import { useState as useState112, useCallback as useCallback102, useEffect as useEffect113, useMemo as useMemo71, useRef as useRef127 } from "react";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
   const [fetched, setFetched] = useState112(null);
@@ -73374,7 +73577,7 @@ function useFileTree({ projectId, projectIdRef }) {
   }, [projectId]);
   const refreshRequestRef = useRef127(0);
   const refreshAbortRef = useRef127(null);
-  const refreshFileTree = useCallback101(async () => {
+  const refreshFileTree = useCallback102(async () => {
     const pid = projectIdRef.current;
     if (!pid) return;
     refreshAbortRef.current?.abort();
@@ -73425,7 +73628,7 @@ function useFileTree({ projectId, projectIdRef }) {
 }
 
 // src/hooks/useEditorSave.ts
-import { useCallback as useCallback102, useRef as useRef128 } from "react";
+import { useCallback as useCallback103, useRef as useRef128 } from "react";
 var FAILURE_BURST_MS = 5e3;
 function useEditorSave({
   editingPathRef,
@@ -73443,7 +73646,7 @@ function useEditorSave({
   const pendingCandidateRef = useRef128(null);
   const inFlightRef = useRef128(null);
   const inFlightCandidateRef = useRef128(null);
-  const reportFailure = useCallback102(
+  const reportFailure = useCallback103(
     (path, error) => {
       const now2 = Date.now();
       const properties = buildStudioSaveFailureProperties({
@@ -73473,7 +73676,7 @@ function useEditorSave({
     },
     [showToast]
   );
-  const persistCandidate = useCallback102(
+  const persistCandidate = useCallback103(
     (candidate) => {
       const task = saveProjectFilesWithHistory({
         projectId: candidate.projectId,
@@ -73504,7 +73707,7 @@ function useEditorSave({
     },
     [readProjectFile, recordEdit, reportFailure, setRefreshKey, writeProjectFile]
   );
-  const handleContentChange = useCallback102(
+  const handleContentChange = useCallback103(
     (content) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73520,7 +73723,7 @@ function useEditorSave({
     },
     [editingPathRef, projectIdRef, persistCandidate]
   );
-  const flushPendingSave = useCallback102(async () => {
+  const flushPendingSave = useCallback103(async () => {
     if (saveRafRef.current != null) {
       cancelAnimationFrame(saveRafRef.current);
       saveRafRef.current = null;
@@ -73534,7 +73737,7 @@ function useEditorSave({
     }
     return await inFlightRef.current ?? { status: "clean" };
   }, [persistCandidate]);
-  const discardPendingSave = useCallback102(() => {
+  const discardPendingSave = useCallback103(() => {
     if (saveRafRef.current != null) cancelAnimationFrame(saveRafRef.current);
     saveRafRef.current = null;
     pendingCandidateRef.current = null;
@@ -73549,7 +73752,7 @@ function useEditorSave({
 }
 
 // src/hooks/useProjectFileWriter.ts
-import { useCallback as useCallback103, useMemo as useMemo72 } from "react";
+import { useCallback as useCallback104, useMemo as useMemo72 } from "react";
 async function fetchProjectFile(projectId, path, query) {
   if (!projectId) throw new Error("No active project");
   const response = await studioApiFetch(
@@ -73565,13 +73768,13 @@ function useProjectFileWriter({ projectId }) {
     [projectId]
   );
   const fileVersions = fileVersionScope.versions;
-  const observeProjectFileVersion = useCallback103(
+  const observeProjectFileVersion = useCallback104(
     (path, version) => {
       fileVersions.set(path, version);
     },
     [fileVersions]
   );
-  const readProjectFile = useCallback103(
+  const readProjectFile = useCallback104(
     async (path) => {
       const { content, version } = await fetchProjectFile(projectId, path, "");
       if (typeof content !== "string") throw new Error(`Missing file contents for ${path}`);
@@ -73580,7 +73783,7 @@ function useProjectFileWriter({ projectId }) {
     },
     [fileVersions, projectId]
   );
-  const readOptionalProjectFile = useCallback103(
+  const readOptionalProjectFile = useCallback104(
     async (path) => {
       const { content, version } = await fetchProjectFile(projectId, path, "?optional=1");
       fileVersions.set(path, version);
@@ -73588,7 +73791,7 @@ function useProjectFileWriter({ projectId }) {
     },
     [fileVersions, projectId]
   );
-  const writeProjectFile = useCallback103(
+  const writeProjectFile = useCallback104(
     async (path, content, expectedContent) => {
       if (!projectId) throw new Error("No active project");
       const writeProjectId = projectId;
@@ -73703,12 +73906,12 @@ function useFileManager({
     assets,
     fontAssets
   } = useFileTree({ projectId, projectIdRef });
-  const updateEditingFileContent = useCallback104((path, content) => {
+  const updateEditingFileContent = useCallback105((path, content) => {
     if (editingPathRef.current === path) {
       setEditingFile({ path, content });
     }
   }, []);
-  const writeProjectFile = useCallback104(
+  const writeProjectFile = useCallback105(
     async (path, content, expectedContent) => {
       const writeProjectId = projectIdRef.current;
       await writeProjectFileRaw(path, content, expectedContent);
@@ -73728,7 +73931,7 @@ function useFileManager({
     showToast
   });
   const { saveRafRef, handleContentChange } = editorSave;
-  const overwriteExternalConflict = useCallback104(
+  const overwriteExternalConflict = useCallback105(
     async (conflict) => {
       await serializeStudioFileMutation(writeProjectFile, conflict.filePath, async () => {
         if (conflict.currentContent != null) {
@@ -73748,7 +73951,7 @@ function useFileManager({
   );
   const revealRequestIdRef = useRef129(0);
   const revealAbortRef = useRef129(null);
-  const handleFileSelect = useCallback104(
+  const handleFileSelect = useCallback105(
     (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73773,7 +73976,7 @@ function useFileManager({
     },
     [fileVersions, showToast]
   );
-  const openSourceForSelection = useCallback104(
+  const openSourceForSelection = useCallback105(
     (sourceFile, target) => {
       const pid = projectIdRef.current;
       if (!pid || !sourceFile) return;
@@ -73805,7 +74008,7 @@ function useFileManager({
     },
     [editingFile?.content, fileVersions]
   );
-  const uploadProjectFiles = useCallback104(
+  const uploadProjectFiles = useCallback105(
     async (files, dir) => {
       const pid = projectIdRef.current;
       const fileList = Array.from(files);
@@ -73848,7 +74051,7 @@ function useFileManager({
     },
     [refreshFileTree, setRefreshKey, showToast]
   );
-  const handleCreateFile = useCallback104(
+  const handleCreateFile = useCallback105(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73875,7 +74078,7 @@ function useFileManager({
     },
     [refreshFileTree, handleFileSelect, showToast]
   );
-  const handleCreateFolder = useCallback104(
+  const handleCreateFolder = useCallback105(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73897,7 +74100,7 @@ function useFileManager({
     },
     [refreshFileTree, showToast]
   );
-  const handleDeleteFile = useCallback104(
+  const handleDeleteFile = useCallback105(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73918,7 +74121,7 @@ function useFileManager({
     },
     [refreshFileTree, showToast]
   );
-  const handleRenameFile = useCallback104(
+  const handleRenameFile = useCallback105(
     async (oldPath, newPath) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73944,7 +74147,7 @@ function useFileManager({
     },
     [refreshFileTree, handleFileSelect, setRefreshKey, showToast]
   );
-  const handleDuplicateFile = useCallback104(
+  const handleDuplicateFile = useCallback105(
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -73966,13 +74169,13 @@ function useFileManager({
     [refreshFileTree, handleFileSelect, showToast]
   );
   const handleMoveFile = handleRenameFile;
-  const handleImportFiles = useCallback104(
+  const handleImportFiles = useCallback105(
     async (files, dir) => {
       return uploadProjectFiles(Array.from(files), dir);
     },
     [uploadProjectFiles]
   );
-  const handleImportFonts = useCallback104(
+  const handleImportFonts = useCallback105(
     async (files) => {
       const pid = projectIdRef.current;
       if (!pid) return [];
@@ -74041,7 +74244,7 @@ function useFileManager({
 }
 
 // src/hooks/usePreviewPersistence.ts
-import { useCallback as useCallback105, useRef as useRef130, useState as useState114 } from "react";
+import { useCallback as useCallback106, useRef as useRef130, useState as useState114 } from "react";
 
 // src/utils/gsapUndoRestore.ts
 import { isCompositionTemplate as isCompositionTemplate2 } from "@hyperframes/parsers/hf-ids";
@@ -74423,31 +74626,31 @@ function usePreviewPersistence({
       }
     });
   }
-  const queueDomEditSave = useCallback105((save) => {
+  const queueDomEditSave = useCallback106((save) => {
     return domEditSaveQueueRef.current?.enqueue(save) ?? save();
   }, []);
-  const drainPendingDomEditSaves = useCallback105(async () => {
+  const drainPendingDomEditSaves = useCallback106(async () => {
     return drainStudioSaveQueues(flushStudioPendingEdits, async () => {
       return await domEditSaveQueueRef.current?.waitForIdle() ?? { status: "clean" };
     });
   }, []);
-  const waitForPendingDomEditSaves = useCallback105(async () => {
+  const waitForPendingDomEditSaves = useCallback106(async () => {
     const result = await drainPendingDomEditSaves();
     if (result.status !== "clean") throw result.error;
   }, [drainPendingDomEditSaves]);
-  const settlePendingEdits = useCallback105(async () => {
+  const settlePendingEdits = useCallback106(async () => {
     const queued = domEditSaveQueueRef.current?.waitForIdle();
     await flushStudioPendingEdits({ onlyCurrent: true });
     await queued;
   }, []);
-  const resetDomEditSaveQueueBreaker = useCallback105(() => {
+  const resetDomEditSaveQueueBreaker = useCallback106(() => {
     domEditSaveQueueRef.current?.reset();
     setDomEditSaveQueuePaused(null);
   }, []);
   useMountEffect(() => () => {
     domEditSaveQueueRef.current?.destroy();
   });
-  const applyCurrentStudioManualEditsToPreview = useCallback105(
+  const applyCurrentStudioManualEditsToPreview = useCallback106(
     (iframe = previewIframeRef.current) => {
       if (!iframe) return;
       if (!readIframeDocument(iframe)) return;
@@ -74455,14 +74658,14 @@ function usePreviewPersistence({
     },
     [previewIframeRef]
   );
-  const applyStudioManualEditsToPreview = useCallback105(
+  const applyStudioManualEditsToPreview = useCallback106(
     async (iframe = previewIframeRef.current) => {
       applyCurrentStudioManualEditsToPreview(iframe);
     },
     [applyCurrentStudioManualEditsToPreview, previewIframeRef]
   );
   applyStudioManualEditsToPreviewRef.current = applyStudioManualEditsToPreview;
-  const syncHistoryPreviewAfterApply = useCallback105(
+  const syncHistoryPreviewAfterApply = useCallback106(
     async (restore2) => {
       const projectId = usePlayerStore.getState().timelineProjectId;
       const nestedFiles = await settleNestedReads(
@@ -74489,7 +74692,7 @@ function usePreviewPersistence({
     },
     [previewIframeRef, activeCompPathRef, reloadPreview]
   );
-  const showHistoryRestoreNow = useCallback105(
+  const showHistoryRestoreNow = useCallback106(
     (files) => {
       if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits()) return null;
       const iframe = previewIframeRef.current;
@@ -74524,11 +74727,11 @@ function usePreviewPersistence({
 }
 
 // src/hooks/usePreviewDocumentVersion.ts
-import { useCallback as useCallback106, useEffect as useEffect114, useRef as useRef131, useState as useState115 } from "react";
+import { useCallback as useCallback107, useEffect as useEffect114, useRef as useRef131, useState as useState115 } from "react";
 function usePreviewDocumentVersion() {
   const [previewDocumentVersion, setPreviewDocumentVersion] = useState115(0);
   const refreshTimersRef = useRef131([]);
-  const refresh2 = useCallback106(() => {
+  const refresh2 = useCallback107(() => {
     for (const id of refreshTimersRef.current) clearTimeout(id);
     refreshTimersRef.current = [];
     setPreviewDocumentVersion((v) => v + 1);
@@ -74547,10 +74750,10 @@ function usePreviewDocumentVersion() {
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback122, useRef as useRef139 } from "react";
+import { useCallback as useCallback123, useRef as useRef139 } from "react";
 
 // src/hooks/useRazorSplit.ts
-import { useCallback as useCallback108, useRef as useRef133 } from "react";
+import { useCallback as useCallback109, useRef as useRef133 } from "react";
 
 // src/utils/razorSplitTransaction.ts
 function targetIdentity(path, target) {
@@ -74676,7 +74879,7 @@ function runAtomicCutTransaction(input) {
 }
 
 // src/hooks/useFreezeFrame.ts
-import { useCallback as useCallback107, useRef as useRef132 } from "react";
+import { useCallback as useCallback108, useRef as useRef132 } from "react";
 function isFreezeFrameResponse(value) {
   if (typeof value !== "object" || value === null) return false;
   const body = value;
@@ -74727,7 +74930,7 @@ async function requestFreezeFrame(input) {
 function useFreezeFrame(options) {
   const optionsRef = useRef132(options);
   optionsRef.current = options;
-  return useCallback107(async (element, playhead) => {
+  return useCallback108(async (element, playhead) => {
     const opts = optionsRef.current;
     if (opts.isRecordingRef?.current) {
       opts.showToast("Cannot edit timeline while recording", "error");
@@ -74769,7 +74972,7 @@ function useRazorSplit({
 }) {
   const projectIdRef = useRef133(projectId);
   projectIdRef.current = projectId;
-  const synchronize = useCallback108(() => {
+  const synchronize = useCallback109(() => {
     let failure;
     try {
       forceReloadSdkSession?.();
@@ -74783,7 +74986,7 @@ function useRazorSplit({
     }
     if (failure) throw failure;
   }, [forceReloadSdkSession, reloadPreview]);
-  const runCut = useCallback108(
+  const runCut = useCallback109(
     async (elements, splitTime, mode) => {
       const pid = projectIdRef.current;
       if (!pid || elements.length === 0) return;
@@ -74823,7 +75026,7 @@ function useRazorSplit({
       writeProjectFile
     ]
   );
-  const handleRazorSplit = useCallback108(
+  const handleRazorSplit = useCallback109(
     async (element, splitTime) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -74851,7 +75054,7 @@ function useRazorSplit({
     },
     [isRecordingRef, runCut, showToast]
   );
-  const handleRazorSplitAll = useCallback108(
+  const handleRazorSplitAll = useCallback109(
     async (splitTime) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -74886,7 +75089,7 @@ function useRazorSplit({
 }
 
 // src/hooks/useTimelineAssetDropOps.ts
-import { useCallback as useCallback109 } from "react";
+import { useCallback as useCallback110 } from "react";
 
 // src/utils/timelineDropTrackInsert.ts
 function planDropTrackInsert(input) {
@@ -75049,7 +75252,7 @@ function useTimelineAssetDropOps({
   observeProjectFileVersion,
   checkEditable
 }) {
-  const dropAssetAt = useCallback109(
+  const dropAssetAt = useCallback110(
     // fallow-ignore-next-line complexity
     async (assetPath, placement, durationOverride, gesture = { placed: [], onNewTrack: false }) => {
       if (isRecordingRef?.current) {
@@ -75158,13 +75361,13 @@ function useTimelineAssetDropOps({
       checkEditable
     ]
   );
-  const handleTimelineAssetDrop = useCallback109(
+  const handleTimelineAssetDrop = useCallback110(
     async (assetPath, placement, durationOverride) => {
       await dropAssetAt(assetPath, placement, durationOverride);
     },
     [dropAssetAt]
   );
-  const handleTimelineFileDrop = useCallback109(
+  const handleTimelineFileDrop = useCallback110(
     // fallow-ignore-next-line complexity
     async (files, placement) => {
       if (isRecordingRef?.current) {
@@ -75214,7 +75417,7 @@ function useTimelineAssetDropOps({
       showToast
     ]
   );
-  const handleTimelineCompositionDrop = useCallback109(
+  const handleTimelineCompositionDrop = useCallback110(
     async (sourcePath, placement) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -75265,10 +75468,10 @@ function useTimelineAssetDropOps({
 }
 
 // src/hooks/timelineAudioGroupVolume.ts
-import { useCallback as useCallback111 } from "react";
+import { useCallback as useCallback112 } from "react";
 
 // src/hooks/timelineEditPermission.ts
-import { useCallback as useCallback110 } from "react";
+import { useCallback as useCallback111 } from "react";
 function projectForTimelineSave(isRecording, projectId, showToast) {
   if (isRecording) {
     showToast("Cannot edit timeline while recording", "error");
@@ -75288,7 +75491,7 @@ function timelineEditRefusal(canEdit, targets) {
   return null;
 }
 function useTimelineEditRefusal(canEdit, showToast) {
-  return useCallback110(
+  return useCallback111(
     (targets) => {
       const reason = timelineEditRefusal(canEdit, targets);
       if (reason !== null) showToast(reason, "error");
@@ -75299,7 +75502,7 @@ function useTimelineEditRefusal(canEdit, showToast) {
 }
 function useTimelineEditGate(canEdit, showToast) {
   const refuse2 = useTimelineEditRefusal(canEdit, showToast);
-  return useCallback110(
+  return useCallback111(
     (targets) => refuse2(targets) === null,
     [refuse2]
   );
@@ -75528,7 +75731,7 @@ function useSetAudioGroupAttribute({
   isRecordingRef
 }) {
   const liveLanes = useLiveLanes(projectIdRef, activeCompPath);
-  const setLive = useCallback111(
+  const setLive = useCallback112(
     (groupId, attr, value) => {
       const key2 = audioGroupAttributeLiveKey(groupId, attr);
       const target = previewIframeRef.current?.contentDocument?.getElementById(groupId);
@@ -75542,22 +75745,22 @@ function useSetAudioGroupAttribute({
     },
     [liveLanes, previewIframeRef, activeCompPath]
   );
-  const laneApply = useCallback111(
+  const laneApply = useCallback112(
     (groupId, attr) => ({
       preview: (value) => patchLiveGroupAttribute(previewIframeRef.current, groupId, attr, value),
       store: (value) => syncStoredGroupAttribute(groupId, attr, value)
     }),
     [previewIframeRef]
   );
-  const claimLive = useCallback111(
+  const claimLive = useCallback112(
     (groupId, attr, source) => liveLanes.claim(audioGroupAttributeLiveKey(groupId, attr), laneApply(groupId, attr), source),
     [liveLanes, laneApply]
   );
-  const revertLive = useCallback111(
+  const revertLive = useCallback112(
     (groupId, attr) => liveLanes.revert(audioGroupAttributeLiveKey(groupId, attr), laneApply(groupId, attr)),
     [liveLanes, laneApply]
   );
-  const setQuiet = useCallback111(
+  const setQuiet = useCallback112(
     async (groupId, attr, value, label) => {
       const project = projectIdRef.current;
       const pid = projectForTimelineSave(isRecordingRef?.current, project, showToast);
@@ -75611,7 +75814,7 @@ function useSetAudioGroupAttribute({
 }
 
 // src/hooks/timelineElementFxAttribute.ts
-import { useCallback as useCallback112 } from "react";
+import { useCallback as useCallback113 } from "react";
 function patchLiveElementAttribute(iframe, element, attr, value, activeCompPath) {
   const target = findTimelineElementInIframe(iframe, element, activeCompPath);
   if (!target) return;
@@ -75671,7 +75874,7 @@ function useSetElementAttribute({
   isRecordingRef
 }) {
   const liveLanes = useLiveLanes(projectIdRef, activeCompPath);
-  const setLive = useCallback112(
+  const setLive = useCallback113(
     (element, attr, value) => {
       const key2 = elementAttributeLiveKey(element, activeCompPath, attr);
       const target = findTimelineElementInIframe(previewIframeRef.current, element, activeCompPath);
@@ -75684,14 +75887,14 @@ function useSetElementAttribute({
     },
     [liveLanes, previewIframeRef, activeCompPath]
   );
-  const laneApply = useCallback112(
+  const laneApply = useCallback113(
     (element, attr) => ({
       preview: (value) => patchLiveElementAttribute(previewIframeRef.current, element, attr, value, activeCompPath),
       store: (value) => syncStoredElementAttribute(element, attr, value)
     }),
     [previewIframeRef, activeCompPath]
   );
-  const claimLive = useCallback112(
+  const claimLive = useCallback113(
     (element, attr) => liveLanes.claim(
       elementAttributeLiveKey(element, activeCompPath, attr),
       laneApply(element, attr),
@@ -75699,14 +75902,14 @@ function useSetElementAttribute({
     ),
     [liveLanes, laneApply, activeCompPath]
   );
-  const revertLive = useCallback112(
+  const revertLive = useCallback113(
     (element, attr) => liveLanes.revert(
       elementAttributeLiveKey(element, activeCompPath, attr),
       laneApply(element, attr)
     ),
     [liveLanes, laneApply, activeCompPath]
   );
-  const setQuiet = useCallback112(
+  const setQuiet = useCallback113(
     async (element, attr, value, label) => {
       const project = projectIdRef.current;
       const pid = projectForTimelineSave(isRecordingRef?.current, project, showToast);
@@ -75758,7 +75961,7 @@ function useSetElementAttribute({
 }
 
 // src/hooks/timelineElementsAttribute.ts
-import { useCallback as useCallback113 } from "react";
+import { useCallback as useCallback114 } from "react";
 function editsByFile(edits, activeCompPath) {
   const byFile = /* @__PURE__ */ new Map();
   for (const { element, value } of edits) {
@@ -75787,7 +75990,7 @@ function useSetElementsAttribute({
   pendingTimelineEditPathRef,
   isRecordingRef
 }) {
-  return useCallback113(
+  return useCallback114(
     async (edits, attr, label) => {
       const projectId = projectForTimelineSave(
         isRecordingRef?.current,
@@ -75838,7 +76041,7 @@ function useSetElementsAttribute({
 }
 
 // src/hooks/useTimelineDeleteOps.ts
-import { useCallback as useCallback114, useRef as useRef135 } from "react";
+import { useCallback as useCallback115, useRef as useRef135 } from "react";
 function applyRippleShifts(survivors, changes) {
   if (!changes) return survivors;
   const newStartByElement = new Map(changes.map((c) => [c.element, c.start]));
@@ -75866,7 +76069,7 @@ function useTimelineDeleteOps({
   handleTimelineGroupMove
 }) {
   const rippleNoticeShownRef = useRef135(false);
-  const handleTimelineElementsDelete = useCallback114(
+  const handleTimelineElementsDelete = useCallback115(
     // fallow-ignore-next-line complexity
     async (selection, alsoUnlink = []) => {
       if (isRecordingRef?.current) {
@@ -76002,7 +76205,7 @@ function useTimelineDeleteOps({
       handleTimelineGroupMove
     ]
   );
-  const handleTimelineElementDelete = useCallback114(
+  const handleTimelineElementDelete = useCallback115(
     async (element) => {
       await handleTimelineElementsDelete([element]);
     },
@@ -76012,13 +76215,13 @@ function useTimelineDeleteOps({
 }
 
 // src/hooks/useTimelineEditGuard.ts
-import { useCallback as useCallback115, useRef as useRef136 } from "react";
+import { useCallback as useCallback116, useRef as useRef136 } from "react";
 function useTimelineEditGuard(canEdit, showToast) {
   const refuseEdit = useTimelineEditRefusal(canEdit, showToast);
   const refuseEditRef = useRef136(refuseEdit);
   refuseEditRef.current = refuseEdit;
   const guardedRef = useRef136(/* @__PURE__ */ new WeakMap());
-  const guard = useCallback115(
+  const guard = useCallback116(
     (resolveTargets, fn, onRefused) => {
       const key2 = fn;
       const cached5 = guardedRef.current.get(key2);
@@ -76045,7 +76248,7 @@ function useTimelineEditGuard(canEdit, showToast) {
 }
 
 // src/hooks/useTimelineLinkEditing.ts
-import { useCallback as useCallback116 } from "react";
+import { useCallback as useCallback117 } from "react";
 
 // src/hooks/timelineLinkEditPlan.ts
 var keyOf15 = (el) => el.key ?? el.id;
@@ -76172,7 +76375,7 @@ function useTimelineLinkEditing({
   forceReloadSdkSession,
   handleTimelineElementsDelete
 }) {
-  const handleLinkEdit = useCallback116(
+  const handleLinkEdit = useCallback117(
     async (edit) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -76227,7 +76430,7 @@ function useTimelineLinkEditing({
       writeProjectFile
     ]
   );
-  const handleLinkedElementsDelete = useCallback116(
+  const handleLinkedElementsDelete = useCallback117(
     (selection) => {
       if (isLinkedSelectionOn()) return handleTimelineElementsDelete(withLinkPartners(selection));
       const removed = new Set(selection.map(keyOf16));
@@ -76238,11 +76441,11 @@ function useTimelineLinkEditing({
     },
     [handleTimelineElementsDelete]
   );
-  const handleLinkedElementDelete = useCallback116(
+  const handleLinkedElementDelete = useCallback117(
     (element) => handleLinkedElementsDelete([element]),
     [handleLinkedElementsDelete]
   );
-  const handleDeleteElementOnly = useCallback116(
+  const handleDeleteElementOnly = useCallback117(
     (element) => {
       const orphans = clipsToUnlink([element], usePlayerStore.getState().elements).filter(
         (el) => keyOf16(el) !== keyOf16(element)
@@ -76260,10 +76463,10 @@ function useTimelineLinkEditing({
 }
 
 // src/hooks/useTrackPendingTimelineEdit.ts
-import { useCallback as useCallback117, useRef as useRef137 } from "react";
+import { useCallback as useCallback118, useRef as useRef137 } from "react";
 function useTrackPendingTimelineEdit() {
   const wrappedRef = useRef137(/* @__PURE__ */ new WeakMap());
-  return useCallback117((fn) => {
+  return useCallback118((fn) => {
     const key2 = fn;
     const cached5 = wrappedRef.current.get(key2);
     if (cached5) return cached5;
@@ -76274,11 +76477,11 @@ function useTrackPendingTimelineEdit() {
 }
 
 // src/hooks/timelineAudioGroupCreate.ts
-import { useCallback as useCallback119 } from "react";
+import { useCallback as useCallback120 } from "react";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR5, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG6 } from "@hyperframes/core/audio-groups";
 
 // src/hooks/timelineTrackVisibility.ts
-import { useCallback as useCallback118 } from "react";
+import { useCallback as useCallback119 } from "react";
 function getTimelineElementTargetPath(element, activeCompPath) {
   return element.sourceFile || activeCompPath || "index.html";
 }
@@ -76429,7 +76632,7 @@ function useTimelineTrackVisibilityEditing({
   forceReloadSdkSession
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback118(
+  return useCallback119(
     async (track2, hidden, displayNumber) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -76483,7 +76686,7 @@ function useTimelineElementVisibilityEditing({
   forceReloadSdkSession
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback118(
+  return useCallback119(
     async (elementKey3, hidden) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -76658,7 +76861,7 @@ function useAudioGroupCarveAssignment({
   checkEditable
 }) {
   const timelineElements = usePlayerStore((state) => state.elements);
-  return useCallback119(
+  return useCallback120(
     async (clipIds, groupId, groupLabel2) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -76713,7 +76916,7 @@ function useAudioGroupCarveAssignment({
 }
 
 // src/hooks/useTimelineGroupEditing.ts
-import { useCallback as useCallback120 } from "react";
+import { useCallback as useCallback121 } from "react";
 function targetPathFor(element, activeCompPath) {
   return element.sourceFile || activeCompPath || "index.html";
 }
@@ -76752,7 +76955,7 @@ function useTimelineGroupEditing({
   showToast,
   writeProjectFile
 }) {
-  const enqueueGroupOperation = useCallback120(
+  const enqueueGroupOperation = useCallback121(
     (label, operation) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -76771,7 +76974,7 @@ function useTimelineGroupEditing({
     },
     [editQueueRef, isRecordingRef, projectIdRef, showToast]
   );
-  const persistServerBatch = useCallback120(
+  const persistServerBatch = useCallback121(
     async (projectId, label, batchChanges, coalesceKey, coalesceMs) => {
       await persistTimelineBatchEdit({
         projectId,
@@ -76794,7 +76997,7 @@ function useTimelineGroupEditing({
       writeProjectFile
     ]
   );
-  const trySdkBatchPersist = useCallback120(
+  const trySdkBatchPersist = useCallback121(
     async (input) => {
       const sharedPath = allChangesSharePath(input.changes, activeCompPath);
       const canUseSdk = !input.needsExtension && sharedPath !== null && input.eligible && input.sdkChanges.every((change) => change !== null);
@@ -76830,7 +77033,7 @@ function useTimelineGroupEditing({
       writeProjectFile
     ]
   );
-  const handleTimelineGroupMove = useCallback120(
+  const handleTimelineGroupMove = useCallback121(
     (changes, options) => {
       if (changes.length === 0) return Promise.resolve();
       for (const change of changes) {
@@ -76935,7 +77138,7 @@ function useTimelineGroupEditing({
       writeProjectFile
     ]
   );
-  const handleTimelineGroupResize = useCallback120(
+  const handleTimelineGroupResize = useCallback121(
     (changes, options) => {
       if (changes.length === 0) return Promise.resolve();
       for (const change of changes) {
@@ -77043,11 +77246,11 @@ function useTimelineGroupEditing({
 }
 
 // src/hooks/useBlockedTimelineEditToast.ts
-import { useCallback as useCallback121, useRef as useRef138 } from "react";
+import { useCallback as useCallback122, useRef as useRef138 } from "react";
 var BLOCKED_TOAST_INTERVAL_MS = 1500;
 function useBlockedTimelineEditToast(showToast) {
   const lastAtRef = useRef138(0);
-  return useCallback121(
+  return useCallback122(
     (_element, intent) => {
       const now2 = Date.now();
       if (now2 - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
@@ -77088,7 +77291,7 @@ function useTimelineEditing({
   const track2 = useTrackPendingTimelineEdit();
   const checkEditable = useTimelineEditGate(canEdit, showToast);
   const guard = useTimelineEditGuard(canEdit, showToast);
-  const enqueueEdit = useCallback122(
+  const enqueueEdit = useCallback123(
     (element, label, buildPatches, coalesceKey) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -77142,7 +77345,7 @@ function useTimelineEditing({
     showToast,
     writeProjectFile
   });
-  const handleTimelineElementMove = useCallback122(
+  const handleTimelineElementMove = useCallback123(
     // fallow-ignore-next-line complexity
     (element, updates) => {
       const commitMove = () => {
@@ -77248,7 +77451,7 @@ function useTimelineEditing({
       invalidateGsapCache
     ]
   );
-  const handleTimelineElementResize = useCallback122(
+  const handleTimelineElementResize = useCallback123(
     // fallow-ignore-next-line complexity
     (element, updates) => {
       const authoredStart = toAuthoredStart(element, updates.start);
@@ -77549,7 +77752,7 @@ function useTimelineEditing({
 }
 
 // src/hooks/timelineMoveAdapter.ts
-import { useCallback as useCallback123 } from "react";
+import { useCallback as useCallback124 } from "react";
 function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs) {
   return deps.handleTimelineGroupMove(
     edits.map(({ element, updates }) => ({
@@ -77566,7 +77769,7 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
   );
 }
 function useTimelineMoveEditsHandler(handleTimelineGroupMove) {
-  return useCallback123(
+  return useCallback124(
     async (edits, coalesceKey, operation = "timing", coalesceMs) => {
       const deps = { handleTimelineGroupMove };
       await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
@@ -77579,7 +77782,7 @@ function useTimelineMoveEditsHandler(handleTimelineGroupMove) {
 import { useCallback as useCallback148 } from "react";
 
 // src/hooks/useAskAgentModal.ts
-import { useState as useState117, useCallback as useCallback124, useRef as useRef140, useEffect as useEffect115 } from "react";
+import { useState as useState117, useCallback as useCallback125, useRef as useRef140, useEffect as useEffect115 } from "react";
 function useAskAgentModal({
   activeCompPath,
   projectDir,
@@ -77596,7 +77799,7 @@ function useAskAgentModal({
   const [copiedAgentPrompt, setCopiedAgentPrompt] = useState117(false);
   const [agentModalOpen, setAgentModalOpen] = useState117(false);
   const copiedAgentTimerRef = useRef140(null);
-  const preloadAgentPromptSnippet = useCallback124(
+  const preloadAgentPromptSnippet = useCallback125(
     async (selection) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -77618,7 +77821,7 @@ function useAskAgentModal({
     },
     [activeCompPath, domEditSelectionRef, projectIdRef]
   );
-  const handleAskAgent = useCallback124(() => {
+  const handleAskAgent = useCallback125(() => {
     if (!domEditSelection) return;
     setAgentPromptTagSnippet(void 0);
     setAgentPromptSelectionContext(void 0);
@@ -77626,7 +77829,7 @@ function useAskAgentModal({
     void preloadAgentPromptSnippet(domEditSelection);
     setAgentModalOpen(true);
   }, [domEditSelection, preloadAgentPromptSnippet]);
-  const handleAgentModalSubmit = useCallback124(
+  const handleAgentModalSubmit = useCallback125(
     async (userInstruction) => {
       if (!domEditSelection) return;
       const targetPath = domEditSelection.sourceFile || activeCompPath || "index.html";
@@ -77691,7 +77894,7 @@ function useAskAgentModal({
 }
 
 // src/hooks/useDomSelection.ts
-import { useState as useState118, useCallback as useCallback125, useRef as useRef141, useEffect as useEffect117 } from "react";
+import { useState as useState118, useCallback as useCallback126, useRef as useRef141, useEffect as useEffect117 } from "react";
 
 // src/utils/domEditHelpers.ts
 function domEditSelectionsTargetSame(a, b) {
@@ -77930,7 +78133,7 @@ function useDomSelection({
   domEditGroupSelectionsRef.current = domEditGroupSelections;
   domEditHoverSelectionRef.current = domEditHoverSelection;
   activeGroupElementRef.current = activeGroupElement;
-  const announceTimelineSelection2 = useCallback125(
+  const announceTimelineSelection2 = useCallback126(
     (group, primary, replaceSet) => announceTimelineSelection(
       {
         timelineElements,
@@ -77949,7 +78152,7 @@ function useDomSelection({
       timelineElements
     ]
   );
-  const applyDomSelection = useCallback125(
+  const applyDomSelection = useCallback126(
     // fallow-ignore-next-line complexity
     (selection, options) => {
       if (!selection) {
@@ -78006,10 +78209,10 @@ function useDomSelection({
     },
     [announceTimelineSelection2, setRightCollapsed, setRightPanelTab]
   );
-  const clearDomSelection = useCallback125(() => {
+  const clearDomSelection = useCallback126(() => {
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection]);
-  const setActiveGroupElement = useCallback125(
+  const setActiveGroupElement = useCallback126(
     (el) => {
       if (activeGroupElementRef.current === el) return;
       activeGroupElementRef.current = el;
@@ -78018,7 +78221,7 @@ function useDomSelection({
     },
     [applyDomSelection]
   );
-  const buildDomSelectionFromTarget = useCallback125(
+  const buildDomSelectionFromTarget = useCallback126(
     (target, options) => {
       return resolveDomEditSelection(target, {
         activeCompositionPath: activeCompPath,
@@ -78032,7 +78235,7 @@ function useDomSelection({
     },
     [activeCompPath, isMasterView, projectId]
   );
-  const resolveDomSelectionFromPreviewPoint = useCallback125(
+  const resolveDomSelectionFromPreviewPoint = useCallback126(
     // fallow-ignore-next-line complexity
     async (clientX, clientY, options) => {
       const iframe = previewIframeRef.current;
@@ -78057,7 +78260,7 @@ function useDomSelection({
     },
     [activeCompPath, buildDomSelectionFromTarget, captionEditMode, previewIframeRef]
   );
-  const resolveAllDomSelectionsFromPreviewPoint = useCallback125(
+  const resolveAllDomSelectionsFromPreviewPoint = useCallback126(
     // fallow-ignore-next-line complexity
     async (clientX, clientY) => {
       const iframe = previewIframeRef.current;
@@ -78076,12 +78279,12 @@ function useDomSelection({
     },
     [activeCompPath, buildDomSelectionFromTarget, captionEditMode, previewIframeRef]
   );
-  const updateDomEditHoverSelection = useCallback125((selection) => {
+  const updateDomEditHoverSelection = useCallback126((selection) => {
     if (domEditSelectionsTargetSame(domEditHoverSelectionRef.current, selection)) return;
     domEditHoverSelectionRef.current = selection;
     setDomEditHoverSelection(selection);
   }, []);
-  const buildDomSelectionForTimelineElement = useCallback125(
+  const buildDomSelectionForTimelineElement = useCallback126(
     // fallow-ignore-next-line complexity
     async (element) => {
       const iframe = previewIframeRef.current;
@@ -78104,7 +78307,7 @@ function useDomSelection({
     },
     [activeCompPath, buildDomSelectionFromTarget, compIdToSrc, isMasterView, previewIframeRef]
   );
-  const handleTimelineElementSelect = useCallback125(
+  const handleTimelineElementSelect = useCallback126(
     async (element) => {
       const seq = ++timelineSelectSeqRef.current;
       if (!element) {
@@ -78123,7 +78326,7 @@ function useDomSelection({
   );
   const refreshDomEditGroupSelectionsFromPreviewRef = useRef141(async () => {
   });
-  const refreshDomEditSelectionFromPreview = useCallback125(
+  const refreshDomEditSelectionFromPreview = useCallback126(
     // fallow-ignore-next-line complexity
     async (selection) => {
       const iframe = previewIframeRef.current;
@@ -78158,7 +78361,7 @@ function useDomSelection({
     },
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]
   );
-  const refreshDomEditGroupSelectionsFromPreview = useCallback125(
+  const refreshDomEditGroupSelectionsFromPreview = useCallback126(
     // fallow-ignore-next-line complexity
     async (selections) => {
       const iframe = previewIframeRef.current;
@@ -78217,7 +78420,7 @@ function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
   useStudioTestHooks({ previewIframeRef, buildDomSelectionFromTarget, applyDomSelection });
-  const applyMarqueeSelection = useCallback125(
+  const applyMarqueeSelection = useCallback126(
     // fallow-ignore-next-line complexity
     (selections, additive) => {
       logSelect("marquee", { hits: selections.length, additive });
@@ -78283,7 +78486,7 @@ function useDomSelection({
 }
 
 // src/hooks/usePreviewInteraction.ts
-import { useCallback as useCallback126, useRef as useRef142 } from "react";
+import { useCallback as useCallback127, useRef as useRef142 } from "react";
 var CYCLE_RADIUS_PX = 6;
 var CYCLE_WINDOW_MS = 600;
 var DOUBLE_CLICK_MS = 400;
@@ -78302,7 +78505,7 @@ function usePreviewInteraction({
 }) {
   const cycleRef = useRef142(null);
   const lastDownRef = useRef142(null);
-  const pausePreviewPlayback = useCallback126(() => {
+  const pausePreviewPlayback = useCallback127(() => {
     const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
     const playerStore = usePlayerStore.getState();
     playerStore.setIsPlaying(false);
@@ -78311,7 +78514,7 @@ function usePreviewInteraction({
       liveTime.notify(pausedTime);
     }
   }, [previewIframeRef]);
-  const handlePreviewCanvasMouseDown = useCallback126(
+  const handlePreviewCanvasMouseDown = useCallback127(
     // fallow-ignore-next-line complexity
     async (e, options) => {
       if (captionEditMode || compositionLoading) return;
@@ -78414,7 +78617,7 @@ function usePreviewInteraction({
       setActiveGroupElement
     ]
   );
-  const handlePreviewCanvasPointerMove = useCallback126(
+  const handlePreviewCanvasPointerMove = useCallback127(
     // fallow-ignore-next-line complexity
     async (e, options) => {
       if (captionEditMode || compositionLoading) {
@@ -78435,10 +78638,10 @@ function usePreviewInteraction({
       updateDomEditHoverSelection
     ]
   );
-  const handlePreviewCanvasPointerLeave = useCallback126(() => {
+  const handlePreviewCanvasPointerLeave = useCallback127(() => {
     updateDomEditHoverSelection(null);
   }, [updateDomEditHoverSelection]);
-  const handleBlockedDomMove = useCallback126(
+  const handleBlockedDomMove = useCallback127(
     (selection, reason) => {
       showToast(
         reason ?? selection.capabilities.reasonIfDisabled ?? "This element can't be adjusted directly from the preview.",
@@ -78447,7 +78650,7 @@ function usePreviewInteraction({
     },
     [showToast]
   );
-  const handleDomManualDragStart = useCallback126(() => {
+  const handleDomManualDragStart = useCallback127(() => {
     pausePreviewPlayback();
   }, [pausePreviewPlayback]);
   return {
@@ -78460,7 +78663,7 @@ function usePreviewInteraction({
 }
 
 // src/hooks/useDomEditCommits.ts
-import { useCallback as useCallback132 } from "react";
+import { useCallback as useCallback133 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues3 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/utils/studioFontHelpers.ts
@@ -78513,69 +78716,8 @@ function importedFontFaceCssFor(asset, sourceFile) {
   return importedFontFaceCss(asset, toRelativeProjectAssetPath(sourceFile, asset.path));
 }
 
-// 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 DomEditPersistPreparedWriteError = class extends Error {
-  alreadyToasted = true;
-  constructor(targetPath) {
-    super(`The edit saved but its follow-up write to ${targetPath} did not`);
-    this.name = "DomEditPersistPreparedWriteError";
-  }
-};
-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 wasAlreadyToasted(error) {
-  return (error instanceof DomEditPersistUnsafeValueError || error instanceof DomEditPersistPreparedWriteError || error instanceof StudioSaveHttpError) && error.alreadyToasted;
-}
-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
-  });
-  if (wasAlreadyToasted(error)) 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/useDomEditPersist.ts
-import { useCallback as useCallback127, useRef as useRef143 } from "react";
+import { useCallback as useCallback128, useRef as useRef143 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapScriptCommitHelpers.ts
@@ -78800,7 +78942,7 @@ function useDomEditPersist({
   onTrySdkPersist
 }) {
   const reportedUnresolvableRef = useRef143(/* @__PURE__ */ new Set());
-  const performPersistDomEditOperations = useCallback127(
+  const performPersistDomEditOperations = useCallback128(
     // fallow-ignore-next-line complexity
     async (selection, operations, options, expectedProjectId) => {
       if (projectIdRef.current !== expectedProjectId) {
@@ -78925,7 +79067,7 @@ function useDomEditPersist({
       previewIframeRef
     ]
   );
-  const persistDomEditOperations = useCallback127(
+  const persistDomEditOperations = useCallback128(
     (selection, operations, options) => {
       const expectedProjectId = projectIdRef.current;
       if (!expectedProjectId) return Promise.reject(new Error("No active project"));
@@ -78940,13 +79082,13 @@ function useDomEditPersist({
 }
 
 // src/hooks/useDomEditPositionPatchCommit.ts
-import { useCallback as useCallback128 } from "react";
+import { useCallback as useCallback129 } from "react";
 function useDomEditPositionPatchCommit({
   activeCompPath,
   persistDomEditOperations,
   showToast
 }) {
-  return useCallback128(
+  return useCallback129(
     (selection, patches, options) => {
       return persistDomEditOperations(selection, patches, {
         label: options.label,
@@ -78977,7 +79119,7 @@ function useDomEditPositionPatchCommit({
 }
 
 // src/hooks/useDomEditTextCommits.ts
-import { useCallback as useCallback130, useRef as useRef145 } from "react";
+import { useCallback as useCallback131, useRef as useRef145 } from "react";
 
 // src/hooks/refreshTimelineRowText.ts
 function refreshTimelineRowText(el) {
@@ -79129,7 +79271,7 @@ async function commitDomStyles(context, selection, stylesInEitherCase) {
 }
 
 // src/hooks/useDomEditAttributeCommits.ts
-import { useCallback as useCallback129, useRef as useRef144 } from "react";
+import { useCallback as useCallback130, useRef as useRef144 } from "react";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR6, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG8 } from "@hyperframes/core/audio-groups";
 function resolveFullAttrName(attr, prefixData) {
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
@@ -79181,7 +79323,7 @@ function useDomEditAttributeCommits({
   persistDomEditOperations
 }) {
   const domAttributeCommitVersionRef = useRef144(/* @__PURE__ */ new Map());
-  const commitDataAttribute = useCallback129(
+  const commitDataAttribute = useCallback130(
     async (attr, value, options) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
@@ -79241,7 +79383,7 @@ function useDomEditAttributeCommits({
       previewIframeRef
     ]
   );
-  const commitAttributeOps = useCallback129(
+  const commitAttributeOps = useCallback130(
     async (selection, ops, options) => {
       const iframe = previewIframeRef.current;
       const entries = ops.map((op) => ({
@@ -79311,7 +79453,7 @@ function useDomEditAttributeCommits({
       previewIframeRef
     ]
   );
-  const handleDomAttributesCommit = useCallback129(
+  const handleDomAttributesCommit = useCallback130(
     async (selection, attrs) => {
       await commitAttributeOps(
         selection,
@@ -79330,7 +79472,7 @@ function useDomEditAttributeCommits({
     },
     [commitAttributeOps]
   );
-  const handleDomAttributeBatchCommit = useCallback129(
+  const handleDomAttributeBatchCommit = useCallback130(
     (selection, ops, options) => commitAttributeOps(selection, ops, {
       label: options.label,
       coalescePrefix: "attr-batch",
@@ -79341,7 +79483,7 @@ function useDomEditAttributeCommits({
     }),
     [commitAttributeOps]
   );
-  const handleDomAttributeCommit = useCallback129(
+  const handleDomAttributeCommit = useCallback130(
     async (attr, value) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/-/g, " ")}`,
@@ -79352,7 +79494,7 @@ function useDomEditAttributeCommits({
     },
     [commitDataAttribute]
   );
-  const handleDomAttributeLiveCommit = useCallback129(
+  const handleDomAttributeLiveCommit = useCallback130(
     async (attr, value, onSettled, live) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
@@ -79364,7 +79506,7 @@ function useDomEditAttributeCommits({
     },
     [commitDataAttribute]
   );
-  const handleDomAttributeQuietCommit = useCallback129(
+  const handleDomAttributeQuietCommit = useCallback130(
     async (attr, value) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
@@ -79375,7 +79517,7 @@ function useDomEditAttributeCommits({
     },
     [commitDataAttribute]
   );
-  const handleDomHtmlAttributeCommit = useCallback129(
+  const handleDomHtmlAttributeCommit = useCallback130(
     async (attr, value) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
@@ -79492,7 +79634,7 @@ function useDomEditTextCommits({
     refreshDomEditSelectionFromPreview,
     persistDomEditOperations
   });
-  const handleDomStyleCommitForSelection = useCallback130(
+  const handleDomStyleCommitForSelection = useCallback131(
     (selection, propertyOrStylesAsOnePatch, value = "") => commitDomStyles(
       {
         activeCompPath,
@@ -79515,11 +79657,11 @@ function useDomEditTextCommits({
       previewIframeRef
     ]
   );
-  const handleDomStyleCommit = useCallback130(
+  const handleDomStyleCommit = useCallback131(
     (property, value) => domEditSelection ? handleDomStyleCommitForSelection(domEditSelection, property, value) : Promise.resolve(domEditCommitDeclined("no-selection")),
     [domEditSelection, handleDomStyleCommitForSelection]
   );
-  const handleDomTextCommitForSelection = useCallback130(
+  const handleDomTextCommitForSelection = useCallback131(
     async (selection, value, fieldKey) => {
       if (!isTextEditableSelection(selection)) {
         return domEditCommitDeclined("not-text-editable");
@@ -79581,11 +79723,11 @@ function useDomEditTextCommits({
       showToast
     ]
   );
-  const handleDomTextCommit = useCallback130(
+  const handleDomTextCommit = useCallback131(
     (value, fieldKey) => domEditSelection ? handleDomTextCommitForSelection(domEditSelection, value, fieldKey) : Promise.resolve(domEditCommitDeclined("no-selection")),
     [domEditSelection, handleDomTextCommitForSelection]
   );
-  const handleDomRichTextCommit = useCallback130(
+  const handleDomRichTextCommit = useCallback131(
     async ({ element, html: html2, previousHtml }) => {
       const putBack = () => {
         if (element.isConnected && element.innerHTML === html2) element.innerHTML = previousHtml;
@@ -79659,7 +79801,7 @@ function useDomEditTextCommits({
       showToast
     ]
   );
-  const commitDomTextFields = useCallback130(
+  const commitDomTextFields = useCallback131(
     async (selection, nextTextFields, options) => {
       const isLatestTextCommit = bumpDomEditCommitMapVersion(
         domTextCommitVersionRef.current,
@@ -79724,7 +79866,7 @@ function useDomEditTextCommits({
       showToast
     ]
   );
-  const handleDomTextFieldStyleCommit = useCallback130(
+  const handleDomTextFieldStyleCommit = useCallback131(
     async (fieldKey, property, value) => {
       if (!domEditSelection) return;
       const field = domEditSelection.textFields.find((entry2) => entry2.key === fieldKey);
@@ -79765,7 +79907,7 @@ function useDomEditTextCommits({
       previewIframeRef
     ]
   );
-  const handleDomAddTextField = useCallback130(
+  const handleDomAddTextField = useCallback131(
     async (afterFieldKey) => {
       if (!domEditSelection) return null;
       if (!domEditSelection.textFields.some((field) => field.source === "child")) return null;
@@ -79785,7 +79927,7 @@ function useDomEditTextCommits({
     },
     [commitDomTextFields, domEditSelection]
   );
-  const handleDomRemoveTextField = useCallback130(
+  const handleDomRemoveTextField = useCallback131(
     async (fieldKey) => {
       if (!domEditSelection) return;
       const field = domEditSelection.textFields.find((entry2) => entry2.key === fieldKey);
@@ -79819,7 +79961,7 @@ function useDomEditTextCommits({
 }
 
 // src/hooks/useDomGeometryCommits.ts
-import { useCallback as useCallback131 } from "react";
+import { useCallback as useCallback132 } from "react";
 
 // src/components/editor/elementPositionOffset.ts
 var layoutBox = (el) => ({
@@ -79962,7 +80104,7 @@ function useDomGeometryCommits({
   commitPositionPatchToHtml,
   readOnlyPreview
 }) {
-  const stageElementPositionOffset = useCallback131(
+  const stageElementPositionOffset = useCallback132(
     (selection, next, plainTranslate, coalesceKey) => stageElementOffset(
       { commitPositionPatchToHtml, showToast, readOnlyPreview },
       selection,
@@ -79972,7 +80114,7 @@ function useDomGeometryCommits({
     ),
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
   );
-  const handleDomBoxSizeCommit = useCallback131(
+  const handleDomBoxSizeCommit = useCallback132(
     (selection, next, offset, restore2, undoKey) => {
       if (readOnlyPreview) return Promise.resolve(void 0);
       const element = selection.element;
@@ -79997,11 +80139,11 @@ function useDomGeometryCommits({
     },
     [commitPositionPatchToHtml, readOnlyPreview]
   );
-  const handleDomRotationCommit = useCallback131(
+  const handleDomRotationCommit = useCallback132(
     (selection, next) => savePlainRotation({ commitPositionPatchToHtml, readOnlyPreview }, selection, next),
     [commitPositionPatchToHtml, readOnlyPreview]
   );
-  const handleDomManualEditsReset = useCallback131(
+  const handleDomManualEditsReset = useCallback132(
     (selection) => {
       const element = selection.element;
       const beforeOffset = captureStudioPathOffset(element);
@@ -80060,7 +80202,7 @@ function useDomEditCommits({
   onReorderShadow,
   readOnlyPreview
 }) {
-  const resolveImportedFontAsset = useCallback132(
+  const resolveImportedFontAsset = useCallback133(
     (fontFamilyValue) => {
       const family = primaryFontFamilyValue(fontFamilyValue);
       if (!family) return null;
@@ -80092,7 +80234,7 @@ function useDomEditCommits({
     forceReloadSdkSession,
     onTrySdkPersist
   });
-  const commitDomEditPatchBatches = useCallback132(
+  const commitDomEditPatchBatches = useCallback133(
     (batches, options) => {
       const expectedProjectId = projectIdRef.current;
       if (!expectedProjectId) return Promise.reject(new Error("No active project"));
@@ -80258,7 +80400,7 @@ function useDomEditCommits({
 }
 
 // src/hooks/useGroupCommits.ts
-import { useCallback as useCallback133 } from "react";
+import { useCallback as useCallback134 } from "react";
 function resolveAuthoredTrack(selection, timelineElements) {
   const id = findMatchingTimelineElementId(selection, timelineElements);
   if (!id) return void 0;
@@ -80337,7 +80479,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
 }
 function useGroupCommits(params) {
   const { activeCompPath, showToast, projectIdRef, timelineElements } = params;
-  const groupSelection = useCallback133(
+  const groupSelection = useCallback134(
     async (members) => {
       const pid = projectIdRef.current;
       if (!pid || members.length === 0) return null;
@@ -80366,7 +80508,7 @@ function useGroupCommits(params) {
     },
     [activeCompPath, projectIdRef, showToast, params, timelineElements]
   );
-  const ungroupSelection = useCallback133(
+  const ungroupSelection = useCallback134(
     async (group) => {
       const pid = projectIdRef.current;
       if (!pid) return;
@@ -80391,7 +80533,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback139, useMemo as useMemo73, useRef as useRef147 } from "react";
+import { useCallback as useCallback140, useMemo as useMemo73, useRef as useRef147 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -80591,7 +80733,7 @@ function gsapWriteFile(selection, activeCompPath) {
 }
 
 // src/hooks/useGsapAnimationOps.ts
-import { useCallback as useCallback134 } from "react";
+import { useCallback as useCallback135 } from "react";
 function useGsapAnimationOps({
   projectIdRef,
   activeCompPath,
@@ -80602,7 +80744,7 @@ function useGsapAnimationOps({
   sdkDeps,
   writeProjectFile
 }) {
-  const updateGsapMeta = useCallback134(
+  const updateGsapMeta = useCallback135(
     async (selection, animationId, updates) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -80623,7 +80765,7 @@ function useGsapAnimationOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const deleteGsapAnimation = useCallback134(
+  const deleteGsapAnimation = useCallback135(
     async (selection, animationId) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -80644,7 +80786,7 @@ function useGsapAnimationOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const deleteAllForSelector = useCallback134(
+  const deleteAllForSelector = useCallback135(
     async (selection, targetSelector) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -80665,7 +80807,7 @@ function useGsapAnimationOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const addGsapAnimation = useCallback134(
+  const addGsapAnimation = useCallback135(
     // fallow-ignore-next-line complexity
     async (selection, method, _currentTime) => {
       const address = ensureElementAddressable(selection);
@@ -80740,7 +80882,7 @@ function useGsapAnimationOps({
       writeProjectFile
     ]
   );
-  const addWithKeyframes = useCallback134(
+  const addWithKeyframes = useCallback135(
     async (selection, targetSelector, position, duration, keyframes, ease, label = "Add animation with keyframes") => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -80772,7 +80914,7 @@ function useGsapAnimationOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const replaceWithKeyframes = useCallback134(
+  const replaceWithKeyframes = useCallback135(
     async (selection, animationId, targetSelector, position, duration, keyframes, ease, label = "Replace animation with keyframes") => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -80817,9 +80959,9 @@ function useGsapAnimationOps({
 }
 
 // src/hooks/useGsapArcPathOps.ts
-import { useCallback as useCallback135 } from "react";
+import { useCallback as useCallback136 } from "react";
 function useGsapArcPathOps(commitMutationSafely) {
-  const setArcPath = useCallback135(
+  const setArcPath = useCallback136(
     (selection, animationId, config) => {
       commitMutationSafely(
         selection,
@@ -80829,7 +80971,7 @@ function useGsapArcPathOps(commitMutationSafely) {
     },
     [commitMutationSafely]
   );
-  const updateArcSegment = useCallback135(
+  const updateArcSegment = useCallback136(
     (selection, animationId, segmentIndex, update) => {
       commitMutationSafely(
         selection,
@@ -80839,7 +80981,7 @@ function useGsapArcPathOps(commitMutationSafely) {
     },
     [commitMutationSafely]
   );
-  const removeArcPath = useCallback135(
+  const removeArcPath = useCallback136(
     (selection, animationId) => {
       commitMutationSafely(
         selection,
@@ -80853,7 +80995,7 @@ function useGsapArcPathOps(commitMutationSafely) {
 }
 
 // src/hooks/useGsapKeyframeOps.ts
-import { useCallback as useCallback136 } from "react";
+import { useCallback as useCallback137 } from "react";
 
 // src/utils/optimisticUpdate.ts
 async function executeOptimistic(options) {
@@ -80954,7 +81096,7 @@ function useGsapKeyframeOps({
   sdkSession,
   sdkDeps
 }) {
-  const addKeyframe = useCallback136(
+  const addKeyframe = useCallback137(
     (selection, animationId, percentage, property, value) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = {
@@ -81019,7 +81161,7 @@ function useGsapKeyframeOps({
     },
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps]
   );
-  const addKeyframeBatch = useCallback136(
+  const addKeyframeBatch = useCallback137(
     async (selection, animationId, percentage, properties, commitOverrides) => {
       if (sdkSession && sdkDeps) {
         const sourceFile = selection.sourceFile || activeCompPath || "index.html";
@@ -81050,7 +81192,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const removeKeyframe = useCallback136(
+  const removeKeyframe = useCallback137(
     (selection, animationId, percentage, commitOverrides) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = { type: "remove-keyframe", animationId, percentage };
@@ -81090,7 +81232,7 @@ function useGsapKeyframeOps({
     },
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps]
   );
-  const moveKeyframe = useCallback136(
+  const moveKeyframe = useCallback137(
     async (selection, animationId, fromPercentage, toPercentage) => {
       const mutation = { type: "move-keyframe", animationId, fromPercentage, toPercentage };
       try {
@@ -81110,7 +81252,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, trackGsapSaveFailure]
   );
-  const resizeKeyframedTween = useCallback136(
+  const resizeKeyframedTween = useCallback137(
     async (selection, animationId, position, duration, pctRemap) => {
       const mutation = {
         type: "resize-keyframed-tween",
@@ -81136,7 +81278,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, trackGsapSaveFailure]
   );
-  const convertToKeyframes = useCallback136(
+  const convertToKeyframes = useCallback137(
     async (selection, animationId, resolvedFromValues, duration, commitOverrides = { softReload: true }) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -81164,7 +81306,7 @@ function useGsapKeyframeOps({
     },
     [commitMutation, activeCompPath, sdkSession, sdkDeps]
   );
-  const removeAllKeyframes = useCallback136(
+  const removeAllKeyframes = useCallback137(
     async (selection, animationId, action = "remove_all", telemetry = true) => {
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       const clearCache = () => {
@@ -81208,7 +81350,7 @@ function useGsapKeyframeOps({
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps]
   );
-  const commitKeyframeAtTime = useCallback136(
+  const commitKeyframeAtTime = useCallback137(
     (selection, absoluteTime, animations, properties) => commitKeyframeAtTimeImpl(selection, absoluteTime, animations, properties, commitMutation),
     [commitMutation]
   );
@@ -81225,7 +81367,7 @@ function useGsapKeyframeOps({
 }
 
 // src/hooks/useGsapPropertyDebounce.ts
-import { useCallback as useCallback137, useEffect as useEffect118, useRef as useRef146 } from "react";
+import { useCallback as useCallback138, useEffect as useEffect118, useRef as useRef146 } from "react";
 import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 var DEBOUNCE_MS = 150;
 function mergeTweenProperties(sdkSession, animationId, edited, kind) {
@@ -81245,7 +81387,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
   const debounceTimerRef = useRef146(null);
   const sdkRef = useRef146(sdk);
   sdkRef.current = sdk;
-  const flushPendingPropertyEdit = useCallback137(async () => {
+  const flushPendingPropertyEdit = useCallback138(async () => {
     const pending2 = pendingPropertyEditRef.current;
     if (!pending2) return;
     pendingPropertyEditRef.current = null;
@@ -81285,7 +81427,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
       sdkRef.current?.onFlushError?.(error, selection, mutation, label);
     }
   }, [commitMutationSafely]);
-  const updateGsapProperty = useCallback137(
+  const updateGsapProperty = useCallback138(
     (selection, animationId, property, value) => {
       pendingPropertyEditRef.current = { selection, animationId, property, value };
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
@@ -81301,7 +81443,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
       void flushPendingPropertyEdit();
     };
   }, [flushPendingPropertyEdit]);
-  const addGsapProperty = useCallback137(
+  const addGsapProperty = useCallback138(
     // fallow-ignore-next-line complexity
     async (selection, animationId, property) => {
       let defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
@@ -81345,7 +81487,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeProperty = useCallback137(
+  const removeProperty = useCallback138(
     async (selection, animationId, property, from) => {
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
@@ -81381,11 +81523,11 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeGsapProperty = useCallback137(
+  const removeGsapProperty = useCallback138(
     (selection, animationId, property) => removeProperty(selection, animationId, property, false),
     [removeProperty]
   );
-  const updateGsapFromProperty = useCallback137(
+  const updateGsapFromProperty = useCallback138(
     async (selection, animationId, property, value) => {
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
       if (sdkSession && sdkDeps) {
@@ -81424,7 +81566,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const addGsapFromProperty = useCallback137(
+  const addGsapFromProperty = useCallback138(
     async (selection, animationId, property) => {
       const defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
       const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
@@ -81458,7 +81600,7 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
     },
     [commitMutationSafely]
   );
-  const removeGsapFromProperty = useCallback137(
+  const removeGsapFromProperty = useCallback138(
     (selection, animationId, property) => removeProperty(selection, animationId, property, true),
     [removeProperty]
   );
@@ -81473,12 +81615,12 @@ function useGsapPropertyDebounce(commitMutationSafely, sdk) {
 }
 
 // src/hooks/useSafeGsapCommitMutation.ts
-import { useCallback as useCallback138 } from "react";
+import { useCallback as useCallback139 } from "react";
 function getGsapMutationType(mutation) {
   return typeof mutation.type === "string" ? mutation.type : "gsap";
 }
 function useGsapSaveFailureTelemetry(activeCompPath) {
-  return useCallback138(
+  return useCallback139(
     (error, selection, mutation, label) => {
       trackStudioSaveFailure({
         source: "gsap_commit",
@@ -81495,7 +81637,7 @@ function useGsapSaveFailureTelemetry(activeCompPath) {
   );
 }
 function useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast) {
-  return useCallback138(
+  return useCallback139(
     (selection, mutation, options) => (
       // Return the chain so awaiting consumers (gesture commit, enable-keyframes)
       // run their post-actions AFTER the server save settles, not immediately.
@@ -81669,7 +81811,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
   const activeCompPathRef = useRef147(activeCompPath);
   activeCompPathRef.current = activeCompPath;
   const serializerRef = useRef147(createKeyedSerializer());
-  const recordMutationEdit = useCallback139(async (targetPath, result, options) => {
+  const recordMutationEdit = useCallback140(async (targetPath, result, options) => {
     if (result.before == null || result.after == null) return;
     await editHistory.recordEdit({
       label: options.label,
@@ -81678,7 +81820,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       files: { [targetPath]: { before: result.before, after: result.after } }
     });
   }, [editHistory]);
-  const finalizeSuccessfulMutation = useCallback139(async (projectId, compositionPath, selection, mutation, targetPath, result, options) => {
+  const finalizeSuccessfulMutation = useCallback140(async (projectId, compositionPath, selection, mutation, targetPath, result, options) => {
     if (projectIdRef.current !== projectId) return;
     const previewIsActive = isActiveCommitTarget(
       projectIdRef,
@@ -81715,7 +81857,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       nestedFiles
     });
   }, [projectIdRef, previewIframeRef, reloadPreview, onCacheInvalidate, onFileContentChanged, forceReloadSdkSession, recordMutationEdit]);
-  const runCommit = useCallback139(async (pid, compositionPath, targetPath, selection, mutation, options) => {
+  const runCommit = useCallback140(async (pid, compositionPath, targetPath, selection, mutation, options) => {
     const result = await runMutationRequest(
       [mutation],
       options,
@@ -81727,7 +81869,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     options.onResult?.(result);
     await finalizeSuccessfulMutation(pid, compositionPath, selection, mutation, targetPath, result, options);
   }, [showToast, finalizeSuccessfulMutation]);
-  const runBatchCommit = useCallback139(async (pid, compositionPath, targetPath, calls, options) => {
+  const runBatchCommit = useCallback140(async (pid, compositionPath, targetPath, calls, options) => {
     const first = calls[0];
     const last = calls.at(-1);
     if (!first || !last) return;
@@ -81784,7 +81926,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     return commit2;
   }, [runCommit, runBatchCommit, activeCompPath, activeProjectId, writeProjectFile]);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
-  const handleGsapSaveFailure = useCallback139(
+  const handleGsapSaveFailure = useCallback140(
     (error, selection, mutation, label) => {
       trackGsapSaveFailure(error, selection, mutation, label);
       if (!isStudioSaveErrorAlreadyToasted(error)) {
@@ -81794,7 +81936,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     [showToast, trackGsapSaveFailure]
   );
   const commitMutationSafely = useSafeGsapCommitMutation(commitMutation, handleGsapSaveFailure);
-  const sdkRefresh = useCallback139(
+  const sdkRefresh = useCallback140(
     (after) => {
       const script = extractGsapScriptText(after);
       if (script) {
@@ -81806,7 +81948,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [previewIframeRef, reloadPreview, onCacheInvalidate]
   );
-  const readProjectFileContent2 = useCallback139(
+  const readProjectFileContent2 = useCallback140(
     (path) => {
       if (!activeProjectId) throw new Error("No active project");
       return readProjectFileContent(activeProjectId, path);
@@ -81959,7 +82101,7 @@ function useDomEditPreviewSync({
 }
 
 // src/hooks/useGsapAnimationFetchFallback.ts
-import { useCallback as useCallback140 } from "react";
+import { useCallback as useCallback141 } from "react";
 var FETCH_ERROR_RETRIES = 1;
 var FETCH_ERROR_DELAY_MS = 120;
 var delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -81987,7 +82129,7 @@ async function fetchElementAnimationsWithRetry(projectId, gsapSourceFile, target
   }
 }
 function useGsapAnimationFetchFallback(projectId) {
-  return useCallback140(
+  return useCallback141(
     (selection, options) => async () => {
       if (!projectId) return [];
       const target = { id: selection.id ?? null, selector: selection.selector ?? null };
@@ -82004,33 +82146,6 @@ function useGsapAnimationFetchFallback(projectId) {
   );
 }
 
-// src/hooks/useGsapInteractionFailureTelemetry.ts
-import { useCallback as useCallback141 } from "react";
-function failureToast(error, toast) {
-  if (!toast || wasAlreadyToasted(error)) return null;
-  return isGsapEditBlockedError(error) ? error.message : "Failed to save animated edit.";
-}
-function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
-  return useCallback141(
-    (error, selection, mutationType, label, toast) => {
-      const report = isGsapEditBlockedError(error) ? trackStudioEditBlocked : trackStudioSaveFailure;
-      report({
-        source: "gsap_commit",
-        error,
-        filePath: selection?.sourceFile ?? activeCompPath ?? "index.html",
-        mutationType,
-        label,
-        targetId: selection?.id,
-        targetSelector: selection?.selector,
-        targetSourceFile: selection?.sourceFile
-      });
-      const message = failureToast(error, toast !== false);
-      if (message) showToast(message, "error");
-    },
-    [activeCompPath, showToast]
-  );
-}
-
 // src/hooks/useGsapSelectionHandlers.ts
 import { useCallback as useCallback142, useRef as useRef149 } from "react";
 function useGsapSelectionHandlers({
@@ -83818,7 +83933,7 @@ var MANUAL_FLAGS = [
 function refusal(preflight, check) {
   const outcome = preflight?.[check];
   if (!outcome) return "";
-  return outcome.status === "blocked" ? GSAP_EDIT_BLOCK_COPY[outcome.reason] : null;
+  return outcome.status === "blocked" ? gsapEditBlockMessage(outcome.reason, outcome.detail) : null;
 }
 function narrowCapabilities(selection, preflight) {
   const resolved2 = resolvedOf(selection);