hyperframes 0.8.115 → 0.8.116

package/dist/studio/index.js

@@ -71,6 +71,10 @@ import {
 } from "./chunk-5VSXRGIX.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_SDK_CUTOVER_ENABLED,
+  STUDIO_SDK_CUTOVER_FAMILIES,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
   buildDomEditRichTextPatchOperation,
@@ -88,13 +92,16 @@ import {
   getDomEditTargetKey,
   getDomLayerPatchTarget,
   isElementComputedVisible,
+  isSdkFamilyEnabled,
   isTextEditableSelection,
   liveLayerElement,
+  manualEditingAvailability_exports,
   readHfId,
   resolveAllVisualDomEditTargets,
   resolveDomEditSelection,
-  serializeDomEditTextFields
-} from "./chunk-TXZMMOMA.js";
+  serializeDomEditTextFields,
+  studioApiFetch
+} from "./chunk-3F47EFCT.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
@@ -155,9 +162,7 @@ import {
   toHexColor,
   wrapTimeline
 } from "./chunk-5EKWJZLM.js";
-import {
-  __export
-} from "./chunk-PZ5AY32C.js";
+import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
 import { memo as memo33, useCallback as useCallback74 } from "react";
@@ -545,7 +550,7 @@ async function flushEvents() {
   const controller = new AbortController();
   const timeout = setTimeout(() => controller.abort(), FLUSH_TIMEOUT_MS);
   try {
-    await fetch(`${POSTHOG_HOST}/batch/`, {
+    await studioApiFetch(`${POSTHOG_HOST}/batch/`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ api_key: POSTHOG_API_KEY2, batch }),
@@ -4218,8 +4223,8 @@ function useAbandonEditsOnReadOnly(readOnly, abandon) {
     if (readOnly) abandonNow();
   }, [readOnly]);
 }
-function reportPressOnTravel(start, refuse, threshold = 4) {
-  if (!refuse) return;
+function reportPressOnTravel(start, refuse2, threshold = 4) {
+  if (!refuse2) return;
   const stop2 = () => {
     window.removeEventListener("pointermove", onMove, true);
     window.removeEventListener("pointerup", stop2, true);
@@ -4229,7 +4234,7 @@ function reportPressOnTravel(start, refuse, threshold = 4) {
     if (Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) < threshold)
       return;
     stop2();
-    refuse();
+    refuse2();
   };
   window.addEventListener("pointermove", onMove, true);
   window.addEventListener("pointerup", stop2, true);
@@ -4359,6 +4364,10 @@ var PROPERTY_DEFAULTS = {
   width: 100,
   height: 100
 };
+function keyframeEases(anim) {
+  if (!anim.keyframes) return { easeEach: anim.ease };
+  return { ease: anim.ease, easeEach: anim.keyframes.easeEach };
+}
 function isInstantHold(animation) {
   return animation.method === "set" || (animation.method === "to" || animation.method === "fromTo") && resolveTweenDuration(animation) === 0;
 }
@@ -6736,7 +6745,7 @@ function flush() {
 }
 function send(url, payload) {
   try {
-    void fetch(url, {
+    void studioApiFetch(url, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: payload,
@@ -11634,6 +11643,7 @@ function asElement(target) {
 // src/utils/studioPendingEdits.ts
 var STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
 var pendingEdits = /* @__PURE__ */ new Map();
+var NOT_SAVED = () => Promise.resolve(false);
 var adopting = false;
 function waitForPostBlurEffects() {
   return new Promise((resolve) => setTimeout(resolve, 0));
@@ -11677,7 +11687,7 @@ function trackStudioPendingEdit(result) {
   if (!result) return void 0;
   const promise = Promise.resolve(result);
   if (adopting) return promise;
-  pendingEdits.set(promise, { revert: null });
+  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED });
   promise.then(
     () => pendingEdits.delete(promise),
     () => pendingEdits.delete(promise)
@@ -11696,6 +11706,8 @@ function beginStudioPendingEdit(revert) {
   const promise = trackStudioPendingEdit(new Promise((resolve) => settle = resolve));
   const entry2 = pendingEdits.get(promise);
   entry2.revert = revert;
+  let landed = Promise.resolve(false);
+  entry2.landed = () => landed;
   return {
     settle,
     reverted: () => entry2.revert === null && revert !== null,
@@ -11703,7 +11715,12 @@ function beginStudioPendingEdit(revert) {
     adopt(start) {
       adopting = true;
       try {
-        return start();
+        const committed = start();
+        landed = Promise.resolve(committed).then(
+          () => true,
+          () => false
+        );
+        return committed;
       } catch (error) {
         settle();
         throw error;
@@ -11713,14 +11730,19 @@ function beginStudioPendingEdit(revert) {
     }
   };
 }
-function revertNewestStudioPendingEdit() {
+function paintBackNewestStudioPendingEdit() {
   const newest = [...pendingEdits.values()].at(-1);
   const revert = newest?.revert;
   if (!newest || !revert) return null;
   newest.revert = null;
-  return revert();
+  return { showAgain: revert(), landed: newest.landed };
 }
-async function flushStudioPendingEdits() {
+function revertNewestStudioPendingEdit() {
+  return paintBackNewestStudioPendingEdit()?.showAgain ?? null;
+}
+async function flushStudioPendingEdits({
+  onlyCurrent = false
+} = {}) {
   const active = focusedField();
   if (active) {
     active.blur();
@@ -11731,10 +11753,12 @@ async function flushStudioPendingEdits() {
   window.dispatchEvent(
     new CustomEvent(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail })
   );
+  const current = onlyCurrent ? new Set(pendingEdits.keys()) : null;
+  const waiting = () => [...pendingEdits.keys()].filter((edit) => !current || current.has(edit));
   let conflict;
   let firstFailure;
-  while (detail.promises.length > 0 || pendingEdits.size > 0) {
-    const promises = [...detail.promises, ...pendingEdits.keys()];
+  while (detail.promises.length > 0 || waiting().length > 0) {
+    const promises = [...detail.promises, ...waiting()];
     detail.promises = [];
     const batchFailures = inspectDrainFailures(await Promise.allSettled(promises));
     conflict ??= batchFailures.conflict;
@@ -11774,6 +11798,7 @@ var SAVES_AN_EDIT = {
   handleDomAttributeBatchCommit: true,
   handleDomPathOffsetCommit: true,
   handleDomGroupPathOffsetCommit: true,
+  handleDomGroupMoveBy: true,
   handleDomZIndexReorderCommit: true,
   handleDomBoxSizeCommit: true,
   handleDomRotationCommit: true,
@@ -11894,6 +11919,7 @@ function DomEditProvider({
     handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
+    handleDomGroupMoveBy,
     handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -11983,6 +12009,7 @@ function DomEditProvider({
       handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomGroupMoveBy,
       handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
@@ -12059,6 +12086,7 @@ function DomEditProvider({
       handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomGroupMoveBy,
       handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
@@ -14543,8 +14571,8 @@ function TimelineProvider({
   useLayoutEffect6(() => {
     onReadOnlyPressRef.current = onReadOnlyPress;
   });
-  const refuse = useCallback24(() => onReadOnlyPressRef.current?.(), []);
-  const readOnlyPress = readOnly ? refuse : null;
+  const refuse2 = useCallback24(() => onReadOnlyPressRef.current?.(), []);
+  const readOnlyPress = readOnly ? refuse2 : null;
   return /* @__PURE__ */ jsx24(TimelineReadOnlyContext.Provider, { value: readOnlyPress, children: /* @__PURE__ */ jsx24(TimelineEditProvider, { value: readOnly ? NO_EDITS : editContext ?? props, children: /* @__PURE__ */ jsx24(TimelineProviderState, { ...props, children }) }) });
 }
 function TimelineProviderState({ children, ...props }) {
@@ -15591,6 +15619,15 @@ var ThumbnailScheduler = class {
     entry2.controller = controller;
     this.activeByBucket[bucket]++;
     this.activeByKind[entry2.request.kind]++;
+    let slotFree = false;
+    const freeSlot = () => {
+      if (slotFree) return;
+      slotFree = true;
+      this.activeByBucket[bucket]--;
+      this.activeByKind[entry2.request.kind]--;
+      this.pump();
+    };
+    controller.signal.addEventListener("abort", freeSlot, { once: true });
     this.notify(entry2);
     const pending2 = this.loadWithTimeout(entry2, controller);
     void pending2.then((result) => this.acceptResult(entry2, controller, result)).catch((reason) => {
@@ -15608,8 +15645,7 @@ var ThumbnailScheduler = class {
       this.evictFailures();
     }).finally(() => {
       if (entry2.controller === controller) entry2.controller = null;
-      this.activeByBucket[bucket]--;
-      this.activeByKind[entry2.request.kind]--;
+      freeSlot();
       this.pump();
     });
   }
@@ -15906,7 +15942,7 @@ async function loadWaveform(audioUrl, waveformUrl, signal) {
   return waveformUrl ? await fetchWaveformPeaks(waveformUrl, signal) : await decodeWaveformPeaks(audioUrl, signal);
 }
 async function fetchWaveformPeaks(url, signal) {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Waveform request failed (${response.status})`);
   const data = await response.json();
   if (typeof data !== "object" || data === null || !("peaks" in data) || !Array.isArray(data.peaks) || !data.peaks.every((peak) => typeof peak === "number")) {
@@ -15915,7 +15951,7 @@ async function fetchWaveformPeaks(url, signal) {
   return data.peaks;
 }
 async function decodeWaveformPeaks(url, signal) {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Audio request failed (${response.status})`);
   const buffer = await response.arrayBuffer();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");
@@ -16722,7 +16758,9 @@ function serializeStudioFileMutations(writer, targetPaths, task) {
 
 // src/utils/studioFileHistory.ts
 async function readProjectFileContent(pid, path) {
-  const response = await fetch(buildProjectApiPath(pid, `/files/${encodeURIComponent(path)}`));
+  const response = await studioApiFetch(
+    buildProjectApiPath(pid, `/files/${encodeURIComponent(path)}`)
+  );
   if (!response.ok) {
     throw await createStudioSaveHttpError(response, `Failed to read ${path}`);
   }
@@ -16929,8 +16967,8 @@ function addTweenTargets(tween, targets) {
     targets.set(el, seen);
   }
 }
-function collectResetTargets(win, doc, targetKeys, reparse = []) {
-  const targets = new Map(reparse.map((el) => [el, /* @__PURE__ */ new Set()]));
+function collectResetTargets(win, doc, targetKeys) {
+  const targets = /* @__PURE__ */ new Map();
   const timelines = win.__timelines ?? {};
   const others = new Set(
     Object.entries(timelines).flatMap(([key2, tl]) => targetKeys.includes(key2) ? [] : [tl])
@@ -17090,7 +17128,7 @@ function timelineKeys(scriptText) {
   return [...scriptText.matchAll(/__timelines\s*\[\s*["'`]([^"'`]+)["'`]\s*\]/g)].map((m) => m[1]).filter((key2) => key2 !== "__proxied");
 }
 function applySoftReload(iframe, scriptText, options = {}) {
-  const { onAsyncFailure, currentTimeOverride, authoredHtml, reparse = [] } = options;
+  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
   const win = iframe.contentWindow;
   const doc = iframe.contentDocument;
@@ -17120,7 +17158,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
   const readAuthoredOpacity = (el) => findAuthoredStyle(el)?.opacity ?? readStampedAuthoredOpacity(el);
   const doReload = () => {
     const timelines = win.__timelines;
-    const targets = collectResetTargets(win, doc, targetKeys, reparse);
+    const targets = collectResetTargets(win, doc, targetKeys);
     if (timelines) {
       for (const key2 of targetKeys) {
         const tl = timelines[key2];
@@ -17289,7 +17327,7 @@ var GsapPreviewConvergenceError = class extends Error {
 var GsapOwnershipProtocolError = class extends GsapPreviewConvergenceError {
 };
 async function requireGsapOwnershipProtocol(projectId) {
-  const response = await fetch(
+  const response = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-capabilities`
   );
   if (!response.ok) {
@@ -17300,18 +17338,18 @@ async function requireGsapOwnershipProtocol(projectId) {
     throw new GsapOwnershipProtocolError("Invalid GSAP mutation capability response");
   }
 }
-async function rollbackOwnedMutation(projectId, targetPath, expected, restore) {
+async function rollbackOwnedMutation(projectId, targetPath, expected, restore2) {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
   }
-  const response = await fetch(
+  const response = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutation-rollback/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
       // Deliberately unclaimed: a rollback runs because a mutation did not
       // converge, so let the restored file reload the preview.
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ expected, restore })
+      body: JSON.stringify({ expected, restore: restore2 })
     }
   );
   if (!response.ok) {
@@ -17343,7 +17381,7 @@ function readMutationError(value, fallback) {
 async function postGsapMutation(projectId, filePath, mutation, fallback) {
   let response;
   try {
-    response = await fetch(
+    response = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
       {
         method: "POST",
@@ -17370,7 +17408,7 @@ async function readFileContent(projectId, targetPath) {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
   }
-  const response = await fetch(
+  const response = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(targetPath)}`
   );
   if (!response.ok) {
@@ -20480,6 +20518,10 @@ function normalizeDomEditStyleValue(property, value) {
 function isImageBackgroundValue(value) {
   return /^url\(/i.test(value.trim());
 }
+function cssPropertyName(property) {
+  if (property.startsWith("--")) return property;
+  return property.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`).replace(/^ms-/, "-ms-");
+}
 function isManualGeometryStyleProperty(property) {
   return property === "left" || property === "top" || property === "width" || property === "height";
 }
@@ -20626,7 +20668,7 @@ function isPlainRecord(value) {
 }
 async function resolveAssetHasAudio(projectId, assetPath) {
   try {
-    const response = await fetch(mediaMetadataUrl(projectId, assetPath));
+    const response = await studioApiFetch(mediaMetadataUrl(projectId, assetPath));
     if (!response.ok) return null;
     const data = await response.json();
     const metadata = isPlainRecord(data) ? data.metadata : void 0;
@@ -22356,7 +22398,7 @@ function TimelineTrackRow({
         ),
         propertyRows.map((row) => {
           const group = row.propertyGroup;
-          const keyframeCount = row.items.filter((item) => item.kind === "keyframe").length;
+          const keyframeCount2 = row.items.filter((item) => item.kind === "keyframe").length;
           const easeCount = row.items.filter((item) => item.kind === "ease").length;
           return (
             // ponytail: aria-owns maps this hidden logical row onto the two visible
@@ -22387,7 +22429,7 @@ function TimelineTrackRow({
                       "aria-colindex": 2,
                       "aria-owns": timelineLogicalRowCellId(lanesId, row.id, "content"),
                       children: [
-                        keyframeCount,
+                        keyframeCount2,
                         " keyframes, ",
                         easeCount,
                         " ease controls"
@@ -24125,7 +24167,7 @@ var peakMapRequests = /* @__PURE__ */ new Map();
 function loadPeakMap(url) {
   const pending2 = peakMapRequests.get(url);
   if (pending2) return pending2;
-  const request = fetch(url).then((res) => res.ok ? res.json() : null).then((body) => isPeakMap(body) ? body : null).catch(() => null);
+  const request = studioApiFetch(url).then((res) => res.ok ? res.json() : null).then((body) => isPeakMap(body) ? body : null).catch(() => null);
   peakMapRequests.set(url, request);
   return request;
 }
@@ -24200,7 +24242,7 @@ function isNormalizePlan(value) {
     (key2) => typeof Reflect.get(value, key2) === "number"
   );
 }
-async function requestNormalizePlan(projectId, el, fetchImpl = fetch) {
+async function requestNormalizePlan(projectId, el, fetchImpl = studioApiFetch) {
   const origin2 = window.location.origin;
   const relative = resolvePreviewRelative(
     resolveMediaPreviewUrl(el.src ?? "", projectId, origin2),
@@ -25257,7 +25299,7 @@ async function measureCarve(doc, voices, strength, bed) {
   const Ctor = window.OfflineAudioContext ?? window.webkitOfflineAudioContext;
   if (!Ctor) return null;
   const decode = async (relative, clock) => {
-    const res = await fetch(new URL(relative, doc.baseURI).href);
+    const res = await studioApiFetch(new URL(relative, doc.baseURI).href);
     const buffer = await new Ctor(1, 1, DECODE_SAMPLE_RATE).decodeAudioData(
       await res.arrayBuffer()
     );
@@ -27147,7 +27189,7 @@ function compositionThumbnailRequest(url, projectId, { sessionEpoch = 0, priorit
   };
 }
 async function loadCompositionImage(url, signal) {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
   const blob = await response.blob();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");
@@ -29921,7 +29963,7 @@ function sceneSwapFor(iframe) {
     );
     cancel?.addEventListener("abort", () => deadline.abort(cancel.reason), { once: true });
     const swapping = (async () => {
-      const response = await fetch(url, { signal: deadline.signal });
+      const response = await studioApiFetch(url, { signal: deadline.signal });
       if (!response.ok) throw new Error(`preview request failed with ${response.status}`);
       const html2 = await response.text();
       if (!isCurrent()) throw new Error("superseded by a newer reload");
@@ -31048,7 +31090,9 @@ function useTimelinePlayer({
     const slot = previewGeneration();
     const isCurrent = () => gen === refreshGenRef.current && slot === previewGeneration();
     const swap = sceneSwapFor(iframe);
-    if (!swap || isRefreshingRef.current) return reloadWholeFilm(url.toString());
+    const swapWouldReplaceGestureNode = !!iframe.contentDocument && isStudioManualEditGestureLiveIn(iframe.contentDocument);
+    if (!swap || isRefreshingRef.current || swapWouldReplaceGestureNode)
+      return reloadWholeFilm(url.toString());
     swap(url.toString(), isCurrent, cancel.signal).catch((error) => {
       if (!isCurrent()) return;
       logReload("scene-swap-refused", { reason: String(error) });
@@ -31363,7 +31407,7 @@ function NLEProvider({
     setCompIdToSrc(emptyMap);
     setCompositionSourceMap(emptyMap);
     onCompIdToSrcChangeRef.current?.(emptyMap);
-    fetch(buildProjectApiPath(projectId, `/files/index.html`), {
+    studioApiFetch(buildProjectApiPath(projectId, `/files/index.html`), {
       signal: controller.signal
     }).then((r) => {
       if (!r.ok) throw new Error(`HTTP ${r.status}`);
@@ -31899,7 +31943,7 @@ function renderPosterForNextOpen(projectId) {
     priority: "overscan",
     discardWhenReleased: true,
     load: async (signal) => {
-      await (await fetch(url, { signal })).arrayBuffer();
+      await (await studioApiFetch(url, { signal })).arrayBuffer();
       return { value: { kind: "image", url, aspect: 16 / 9 }, weight: 0 };
     }
   };
@@ -35897,7 +35941,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-D7VYFJJD.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-OL7GLSS4.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -36563,6 +36607,13 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
     baseGsapY
   };
 }
+function restoreDragOffset(element) {
+  const origin2 = (axis) => Number.parseFloat(element.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "") || 0;
+  element.style.setProperty("--hf-studio-offset-x", `${origin2("x")}px`);
+  element.style.setProperty("--hf-studio-offset-y", `${origin2("y")}px`);
+  element.removeAttribute("data-hf-drag-initial-offset-x");
+  element.removeAttribute("data-hf-drag-initial-offset-y");
+}
 
 // src/components/editor/plainTranslate.ts
 var TOKEN = /\s*(?:(\d*\.?\d+(?:e[-+]?\d+)?)(px|%)?|([a-z]+)\(|([-+*/(),]))/giy;
@@ -36723,11 +36774,11 @@ function getRectCenter(element) {
   if (!finiteRect(rect) || rect.width <= 0 && rect.height <= 0) {
     return null;
   }
-  let point = {
-    x: rect.left + rect.width / 2,
-    y: rect.top + rect.height / 2
-  };
-  let win = element.ownerDocument.defaultView;
+  const point = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  return toTopScreenPoint(element.ownerDocument, point);
+}
+function toTopScreenPoint(doc, point) {
+  let win = doc.defaultView;
   while (win) {
     const frameElement = getFrameElement(win);
     if (!frameElement) break;
@@ -38427,14 +38478,14 @@ function createDomEditOverlayGestureHandlers(opts) {
         hasMember: !!member,
         inlineStyle: sel.element.getAttribute("style")
       });
-      const restore = () => {
+      const restore2 = () => {
         if (!g.manualEditDragToken || !isStudioManualEditGestureCurrent(sel.element, g.manualEditDragToken))
           return;
         restoreStudioBoxSize(sel.element, g.initialBoxSize);
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
       void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore)
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? void 0, restore2)
       ).then((result) => trackPreviewEditResult("resize", "drag", result)).catch((error) => {
         logGestureCommitFailure("resize commit failed", error);
       }).finally(() => {
@@ -41580,77 +41631,6 @@ function isDomEditPersistOutcome(value) {
   return typeof Reflect.get(value, "sourceFile") === "string" && typeof Reflect.get(value, "version") === "string" && typeof Reflect.get(value, "changed") === "boolean";
 }
 
-// src/components/editor/manualEditingAvailability.ts
-var manualEditingAvailability_exports = {};
-__export(manualEditingAvailability_exports, {
-  STUDIO_FLAT_INSPECTOR_ENABLED: () => STUDIO_FLAT_INSPECTOR_ENABLED,
-  STUDIO_SDK_CUTOVER_ENABLED: () => STUDIO_SDK_CUTOVER_ENABLED,
-  STUDIO_SDK_CUTOVER_FAMILIES: () => STUDIO_SDK_CUTOVER_FAMILIES,
-  STUDIO_SDK_RESOLVER_SHADOW_ENABLED: () => STUDIO_SDK_RESOLVER_SHADOW_ENABLED,
-  resolveStudioBooleanEnvFlag: () => resolveStudioBooleanEnvFlag
-});
-
-// src/utils/sdkCutoverPolicy.ts
-var STUDIO_SDK_OPERATION_FAMILIES = [
-  "dom",
-  "timing",
-  "gsap-animation",
-  "gsap-keyframe",
-  "lifecycle"
-];
-function resolveEnabledSdkFamilies(env2, masterEnabled) {
-  if (!masterEnabled) return /* @__PURE__ */ new Set();
-  const raw = env2["VITE_STUDIO_SDK_CUTOVER_FAMILIES"];
-  if (typeof raw !== "string" || raw.trim() === "") return new Set(STUDIO_SDK_OPERATION_FAMILIES);
-  const requested = raw.split(",").map((family) => family.trim()).filter(Boolean);
-  const known = new Set(STUDIO_SDK_OPERATION_FAMILIES);
-  const unknown = requested.filter((family) => !known.has(family));
-  if (unknown.length > 0) {
-    throw new Error(`Unknown Studio SDK cutover families: ${unknown.join(", ")}`);
-  }
-  return new Set(requested);
-}
-function isSdkFamilyEnabled(masterEnabled, configured, family) {
-  return masterEnabled && (configured?.has(family) ?? true);
-}
-
-// src/components/editor/manualEditingAvailability.ts
-var TRUTHY_ENV_VALUES = /* @__PURE__ */ new Set(["1", "true", "yes", "on", "enabled"]);
-var FALSY_ENV_VALUES = /* @__PURE__ */ new Set(["0", "false", "no", "off", "disabled"]);
-function resolveStudioBooleanEnvFlag(env2, names, fallback) {
-  for (const name of names) {
-    const value = env2[name];
-    if (typeof value === "boolean") return value;
-    if (typeof value !== "string") continue;
-    const normalized = value.trim().toLowerCase();
-    if (!normalized) continue;
-    if (TRUTHY_ENV_VALUES.has(normalized)) return true;
-    if (FALSY_ENV_VALUES.has(normalized)) return false;
-  }
-  return fallback;
-}
-var runtimeEnv = typeof window !== "undefined" ? window.__HF_STUDIO_ENV__ ?? {} : {};
-var env = { ...import.meta.env ?? {}, ...runtimeEnv };
-var STUDIO_SDK_CUTOVER_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
-  true
-);
-var STUDIO_SDK_CUTOVER_FAMILIES = resolveEnabledSdkFamilies(
-  env,
-  STUDIO_SDK_CUTOVER_ENABLED
-);
-var STUDIO_SDK_RESOLVER_SHADOW_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_SDK_RESOLVER_SHADOW_ENABLED"],
-  true
-);
-var STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
-  env,
-  ["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
-  true
-);
-
 // src/utils/sdkOpMapping.ts
 function patchOpsToSdkEditOps(hfId, ops) {
   const result = [];
@@ -42772,7 +42752,7 @@ function useElementLifecycleOps({
           writeFile: writeProjectFile,
           recordEdit: editHistory.recordEdit,
           rewrite: async (originalContent) => {
-            const removeResponse = await fetch(
+            const removeResponse = await studioApiFetch(
               buildProjectApiPath(
                 pid,
                 `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`
@@ -44716,7 +44696,9 @@ 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."
+  "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) {
@@ -44943,62 +44925,6 @@ async function commitStaticGsapSize(selection, size, selector, existingSet, call
     { label: "Resize layer", softReload: true }
   );
 }
-function positiveOr(n, fallback) {
-  return Number.isFinite(n) && n > 0 ? roundToLayoutPx(n) : fallback;
-}
-function resolvePriorSize(sizeSet, el, fallbackW, fallbackH) {
-  if (sizeSet) {
-    return {
-      width: positiveOr(Number(sizeSet.properties.width), fallbackW),
-      height: positiveOr(Number(sizeSet.properties.height), fallbackH)
-    };
-  }
-  const ow = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR) ?? "");
-  const oh = Number.parseFloat(el?.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR) ?? "");
-  return { width: positiveOr(ow, fallbackW), height: positiveOr(oh, fallbackH) };
-}
-async function commitKeyframedSizeFromResize(selection, size, selector, sizeSet, animatedTween, callbacks) {
-  const ts = resolveTweenStart(animatedTween) ?? 0;
-  const td = resolveTweenDuration(animatedTween);
-  if (!(td > 0)) return false;
-  const newW = roundToLayoutPx(size.width);
-  const newH = roundToLayoutPx(size.height);
-  const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
-  const ct = usePlayerStore.getState().currentTime;
-  const pct = Math.max(0, Math.min(100, Math.round((ct - ts) / td * 1e3) / 10));
-  const pcts = new Set(
-    animatedTween.keyframes?.keyframes.map((k) => k.percentage) ?? [0, 100]
-  );
-  pcts.add(0);
-  pcts.add(100);
-  pcts.add(pct);
-  const keyframes = Array.from(pcts).sort((a, b) => a - b).map((p) => ({
-    percentage: p,
-    properties: Math.abs(p - pct) < 0.05 ? { width: newW, height: newH } : { ...prior }
-  }));
-  const addLabel = `Resize (size keyframe ${pct.toFixed(0)}%)`;
-  const target = newTweenTarget(selection);
-  if (!target) return false;
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-with-keyframes",
-      targetSelector: target,
-      position: roundTo3(ts),
-      duration: roundTo3(td),
-      keyframes
-    },
-    sizeSet ? { label: addLabel, skipReload: true } : { label: addLabel, softReload: true }
-  );
-  if (sizeSet) {
-    await callbacks.commitMutation(
-      selection,
-      { type: "delete", animationId: sizeSet.id },
-      { label: "Resize layer", softReload: true }
-    );
-  }
-  return true;
-}
 async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, iframe, selector, callbacks) {
   const el = selection.element;
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
@@ -45023,7 +44949,6 @@ async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, ifr
   }
   const ts = resolveTweenStart(effectiveAnim);
   const td = resolveTweenDuration(effectiveAnim);
-  const ease = effectiveAnim.keyframes?.easeEach ?? effectiveAnim.ease;
   let kfs = effectiveAnim.keyframes?.keyframes ?? [];
   if (kfs.length === 0) {
     const fromProps = effectiveAnim.fromProperties ?? {};
@@ -45055,7 +44980,7 @@ async function commitWholePathOffset(selection, anim, studioOffset, gsapPos, ifr
       position: roundTo3(ts ?? 0),
       duration: roundTo3(td || 1),
       keyframes: shifted,
-      ease
+      ...keyframeEases(effectiveAnim)
     },
     { label: "Move animation path", softReload: true, beforeReload: restoreOffset }
   );
@@ -45070,7 +44995,6 @@ async function commitWholePropertyOffset(selection, anim, newValues, currentPct,
   }
   const ts = resolveTweenStart(effectiveAnim);
   const td = resolveTweenDuration(effectiveAnim);
-  const ease = effectiveAnim.keyframes?.easeEach ?? effectiveAnim.ease;
   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;
@@ -45103,7 +45027,7 @@ async function commitWholePropertyOffset(selection, anim, newValues, currentPct,
       position: roundTo3(ts ?? 0),
       duration: roundTo3(td || 1),
       keyframes: shifted,
-      ease
+      ...keyframeEases(effectiveAnim)
     },
     { label, softReload: true }
   );
@@ -46261,7 +46185,7 @@ import { useCallback as useCallback68, useMemo as useMemo45 } from "react";
 import { useEffect as useEffect62, useMemo as useMemo44, useRef as useRef78, useState as useState55, useCallback as useCallback67 } from "react";
 
 // src/hooks/gsapRuntimeBridge.ts
-import { isXYPositionWrite } from "@hyperframes/parsers/gsap-constants";
+import { isXYPositionWrite, PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
 
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
@@ -46367,183 +46291,404 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
   return result;
 }
 
-// src/hooks/gsapDragPositionCommit.ts
-import { PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
-function buildTemporalArcKeyframes(anim, percentage, properties) {
-  return [
-    ...(anim.keyframes?.keyframes ?? []).filter((keyframe) => Math.abs(keyframe.percentage - percentage) > KEYFRAME_PCT_MATCH).map((keyframe) => ({
-      percentage: keyframe.percentage,
-      properties: { ...keyframe.properties },
-      ...keyframe.ease ? { ease: keyframe.ease } : {}
-    })),
-    { percentage, properties }
-  ].sort((a, b) => a.percentage - b.percentage);
+// src/utils/elementGsap.ts
+function gsapOf(element) {
+  return element.ownerDocument.defaultView?.gsap;
 }
-async function extendTweenAndAddKeyframe(selection, anim, properties, targetTime, tweenStart, tweenDuration, callbacks, beforeReload, backfillDefaults) {
-  const tweenEnd = tweenStart + tweenDuration;
-  const newStart = Math.min(targetTime, tweenStart);
-  const newEnd = Math.max(targetTime, tweenEnd);
-  const newDuration = Math.max(0.01, newEnd - newStart);
-  const existingKfs = anim.keyframes?.keyframes ?? [];
-  const remappedKfs = [];
-  for (const kf of existingKfs) {
-    const absTime = tweenStart + kf.percentage / 100 * tweenDuration;
-    const newPct = Math.round((absTime - newStart) / newDuration * 1e3) / 10;
-    const props = { ...kf.properties };
-    for (const k of Object.keys(properties)) {
-      if (!(k in props) && backfillDefaults?.[k] != null) props[k] = backfillDefaults[k];
-    }
-    remappedKfs.push({ percentage: newPct, properties: props });
-  }
-  const targetPct = Math.round((targetTime - newStart) / newDuration * 1e3) / 10;
-  remappedKfs.push({ percentage: targetPct, properties });
-  remappedKfs.sort((a, b) => a.percentage - b.percentage);
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "replace-with-keyframes",
-      animationId: anim.id,
-      targetSelector: anim.targetSelector,
-      position: roundTo3(newStart),
-      duration: roundTo3(newDuration),
-      keyframes: remappedKfs
-    },
-    {
-      label: `Move layer (extended keyframe)`,
-      keyframeAction: "add",
-      softReload: true,
-      beforeReload
-    }
-  );
+function setElementGsapPosition(element, x, y) {
+  const gsap3 = gsapOf(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { x, y });
+  return true;
 }
-async function commitKeyframedPosition(selection, anim, properties, callbacks, beforeReload, backfillDefaults) {
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-  const computedPct = computeCurrentPercentage(selection, anim);
-  const pct = activeKeyframePct ?? computedPct;
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties,
-      ...backfillDefaults ? { backfillDefaults } : {}
-    },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload }
+function setElementGsapScale(element, x, y) {
+  const gsap3 = gsapOf(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
+function elementTargets(tween) {
+  return (tween.targets?.() ?? []).filter(
+    (t2) => Boolean(t2?.style && t2.nodeType)
   );
-  if (activeKeyframePct != null) {
-    setActiveKeyframePct(null);
-    parkPlayheadOnKeyframe(anim, pct);
+}
+
+// src/hooks/gsapParsedTween.ts
+var PARSED_NAME = { scale: "scaleX", rotate: "rotation" };
+function findPropTween(pt, prop) {
+  for (let node = pt; node; node = node._next) {
+    if (node.p === prop && typeof node.s === "number" && typeof node.c === "number") return node;
+    const nested = findPropTween(node.d?._pt, prop);
+    if (nested) return nested;
   }
+  return null;
 }
-function resolveDragRuntime(iframe, selector) {
-  if (!iframe || !selector) return null;
-  const win = iframe.contentWindow;
-  const gsap3 = win?.gsap;
-  if (typeof gsap3?.getProperty !== "function" || typeof gsap3.set !== "function") return null;
-  let el = null;
+function endsIn(tween, prop) {
+  const pt = findPropTween(tween._pt, PARSED_NAME[prop] ?? prop);
+  if (!pt) return null;
+  const pair = [pt.s, pt.s + pt.c];
+  return tween._from ? [pair[1], pair[0]] : pair;
+}
+function findParsedTween(iframe, element, anim) {
+  const win = iframe?.contentWindow;
+  const start = resolveTweenStart(anim);
+  if (!win?.__timelines || start == null) return null;
+  const steps = anim.keyframes?.keyframes.map((kf) => kf.properties) ?? [anim.properties];
+  const props = [...new Set(steps.flatMap((step) => Object.keys(step)))];
+  const keyframed = Boolean(anim.keyframes);
+  for (const timeline of Object.values(win.__timelines)) {
+    for (const tween of timeline?.getChildren?.(true) ?? []) {
+      const targets = tween.targets?.() ?? [];
+      if (!targets.includes(element) && !targets.some((t2) => element.id && t2.id === element.id))
+        continue;
+      if (!startsAt(tween, start)) continue;
+      const vars = tween.vars ?? {};
+      const carries = keyframed ? "keyframes" in vars : props.some((p) => p in vars);
+      if (!carries || !((tween.duration?.() ?? 0) > 0)) continue;
+      parseUnplayed(win, element, tween, props);
+      return tween;
+    }
+  }
+  return null;
+}
+function startsAt(tween, start) {
+  const delay2 = Number(tween.vars?.delay) || 0;
+  return Math.abs((tween.startTime?.() ?? Number.NaN) - delay2 - start) <= 1e-3;
+}
+function withLiveTiming(anim, tween) {
+  const start = tween?.startTime?.();
+  return {
+    ...anim,
+    ...Number.isFinite(start) && { resolvedStart: start },
+    ...anim.duration == null && tween && { duration: tween.duration?.() }
+  };
+}
+function parseUnplayed(win, element, tween, props) {
+  const seek = !isParsed(tween) && seekable(win, tween);
+  if (!seek) return;
+  const { parent, gsap: gsap3 } = seek;
+  const before = layerStates(tween, element);
+  const now2 = parent.time();
+  const start = tween.startTime?.() ?? 0;
+  gsap3.set(element, { clearProps: props.join(",") });
+  for (const p of props) gsap3.getProperty(element, p);
   try {
-    el = iframe.contentDocument?.querySelector(selector) ?? null;
-  } catch {
-    return null;
+    parent.seek(start, true);
+    parent.seek(start + (tween.duration?.() ?? 0), true);
+  } finally {
+    parent.seek(now2, true);
+    restore(before);
   }
-  if (!el) return null;
-  const timelines = win?.__timelines;
-  const mainTl = timelines ? Object.values(timelines)[0] : void 0;
-  if (typeof mainTl?.seek !== "function") return null;
+}
+function isParsed(tween) {
+  const parts = tween.timeline?.getChildren?.() ?? [];
+  return Boolean(tween._initted) && parts.every((part) => part._initted);
+}
+function seekable(win, tween) {
+  const { parent } = tween;
+  const gsap3 = win.gsap;
+  if (!parent?.seek || !parent.time || !gsap3?.getProperty || !gsap3.set) return null;
   return {
-    gsapLib: gsap3,
-    el,
-    mainTl
-  };
+    parent: { seek: parent.seek.bind(parent), time: parent.time.bind(parent) },
+    gsap: { getProperty: gsap3.getProperty.bind(gsap3), set: gsap3.set.bind(gsap3) }
+  };
+}
+function layerStates(tween, element) {
+  const layers = /* @__PURE__ */ new Set([element]);
+  for (const child of tween.parent?.getChildren?.(true, true, false) ?? [])
+    for (const target of elementTargets(child)) layers.add(target);
+  return [...layers].map((layer) => ({
+    layer,
+    attributes: new Map([...layer.attributes].map((a) => [a.name, a.value])),
+    cache: layer._gsap && { ...layer._gsap }
+  }));
 }
-async function commitFlatViaKeyframes(selection, anim, properties, callbacks, beforeReload, iframe, selector, backfillDefaults) {
-  const ct = usePlayerStore.getState().currentTime;
-  const ts = resolveTweenStart(anim);
-  const td = resolveEditableTweenDuration(anim, selection);
-  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-  const outsideRange = activeKeyframePct == null && ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
-  const resolvedFromValues = {};
-  const runtime = resolveDragRuntime(iframe, selector);
-  if (runtime && ts !== null) {
-    const { gsapLib, el, mainTl } = runtime;
-    const draggedValues = {};
-    const channelsTheClearWipes = /* @__PURE__ */ new Set([
-      ...Object.keys(properties),
-      ...PROPERTY_GROUPS.position
-    ]);
-    for (const key2 of channelsTheClearWipes) {
-      const v = Number(gsapLib.getProperty(el, key2));
-      if (Number.isFinite(v)) draggedValues[key2] = v;
+function restore(states) {
+  for (const { layer, attributes, cache: cache2 } of states) {
+    restoreAttributes(layer, attributes);
+    if (cache2 && layer._gsap) restoreCache(layer._gsap, cache2);
+  }
+}
+function restoreAttributes(layer, attributes) {
+  for (const { name } of [...layer.attributes])
+    if (!attributes.has(name)) layer.removeAttribute(name);
+  for (const [name, value] of attributes)
+    if (layer.getAttribute(name) !== value) layer.setAttribute(name, value);
+}
+function restoreCache(live, cache2) {
+  for (const key2 of Object.keys(live)) if (!(key2 in cache2)) delete live[key2];
+  Object.assign(live, cache2);
+}
+function parsedImplicitEndValue(tween) {
+  return (prop, end) => {
+    if (!tween) return null;
+    for (const part of partsFrom(tween, end)) {
+      const pair = endsIn(part, prop);
+      if (pair) return end === "start" ? pair[0] : pair[1];
+      if (prop in (part.vars ?? {})) return null;
     }
-    try {
-      gsapLib.set(el, { clearProps: Object.keys(properties).join(",") });
-      mainTl.seek(ts);
-      for (const key2 of Object.keys(properties)) {
-        const v = Number(gsapLib.getProperty(el, key2));
-        if (Number.isFinite(v)) resolvedFromValues[key2] = roundTo3(v);
-      }
-      mainTl.seek(ct);
-    } catch {
-      for (const key2 of Object.keys(resolvedFromValues)) delete resolvedFromValues[key2];
-    } finally {
-      if (Object.keys(draggedValues).length > 0) gsapLib.set(el, draggedValues);
+    return null;
+  };
+}
+function partsFrom(tween, end) {
+  const parts = tween.timeline?.getChildren?.() ?? [];
+  if (parts.length === 0) return [tween];
+  return end === "start" ? parts : [...parts].reverse();
+}
+function parsedTweenEase(iframe, tween) {
+  if (!tween) return null;
+  const win = iframe?.contentWindow;
+  const ease = tween.vars?.ease ?? tween.parent?.vars?.defaults?.ease ?? win?.gsap?.defaults?.().ease;
+  if (typeof ease === "string") return ease;
+  const named = (name) => win?.gsap?.parseEase?.(name) === ease;
+  return typeof ease === "function" ? BUILT_IN_EASES.find(named) ?? null : null;
+}
+var BUILT_IN_EASES = [
+  "none",
+  ...[
+    "power1",
+    "power2",
+    "power3",
+    "power4",
+    "sine",
+    "expo",
+    "circ",
+    "back",
+    "elastic",
+    "bounce"
+  ].flatMap((e) => [`${e}.in`, `${e}.out`, `${e}.inOut`])
+];
+function withExactStepTimes(anim, tween) {
+  const data = anim.keyframes;
+  const parts = tween?.timeline?.getChildren?.() ?? [];
+  const total = tween?.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);
+  if (ends.some((end) => !Number.isFinite(end))) return anim;
+  const keyframes = data.keyframes.map((kf, i) => ({
+    ...kf,
+    percentage: Math.round(ends[i] * 1e5) / 1e3
+  }));
+  return { ...anim, keyframes: { ...data, keyframes } };
+}
+
+// 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 (!isLinear(anim.ease) || !isLinear(data.ease)) return { reason: "eased-keyframes" };
+    if (data.format === "simple-array") return { reason: "simple-array-keyframes" };
+    const arrayStep = data.format === "object-array";
+    return {
+      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
+    };
   }
-  if (outsideRange && ts !== null) {
-    const coalesceKey2 = `gsap:convert-drag:${anim.id}`;
-    await callbacks.commitMutation(
-      selection,
-      {
-        type: "convert-to-keyframes",
-        animationId: anim.id,
-        ...Object.keys(resolvedFromValues).length > 0 ? { resolvedFromValues } : {}
-      },
-      { label: "Convert to keyframes for drag", skipReload: true, coalesceKey: coalesceKey2 }
-    );
-    const fresh = callbacks.fetchAnimations ? await callbacks.fetchAnimations() : [];
-    const converted = fresh.find((a) => a.id === anim.id && a.keyframes) ?? fresh.find((a) => a.targetSelector === anim.targetSelector && a.keyframes) ?? anim;
-    const convertedStart = resolveTweenStart(converted) ?? ts;
-    const convertedDur = resolveTweenDuration(converted) || td;
-    await extendTweenAndAddKeyframe(
-      selection,
-      converted,
-      properties,
-      ct,
-      convertedStart,
-      convertedDur,
-      callbacks,
-      beforeReload
-    );
-    return;
+  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;
+}
+function upsert(keyframes, percentage, properties, ease) {
+  const hit = keyframes.find((kf) => Math.abs(kf.percentage - percentage) <= KEYFRAME_PCT_MATCH);
+  if (hit) {
+    Object.assign(hit.properties, properties);
+    return hit;
   }
-  const coalesceKey = `gsap:convert-drag:${anim.id}`;
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "convert-to-keyframes",
-      animationId: anim.id,
-      ...Object.keys(resolvedFromValues).length > 0 ? { resolvedFromValues } : {}
-    },
-    { label: "Convert to keyframes for drag", skipReload: true, coalesceKey }
-  );
-  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
-  const editedSelected = activeKeyframePct != null;
-  if (editedSelected) setActiveKeyframePct(null);
-  await callbacks.commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
+  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);
+  if (pct >= -KEYFRAME_PCT_MATCH && pct <= 100 + KEYFRAME_PCT_MATCH) {
+    const at = Math.min(100, Math.max(0, pct));
+    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 {
+    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,
-      percentage: pct,
-      properties,
-      ...backfillDefaults ? { backfillDefaults } : {}
-    },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload, coalesceKey }
+      targetSelector: anim.targetSelector,
+      position: roundTo3(position),
+      duration: roundTo3(span),
+      keyframes,
+      ...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 [
+    ...(anim.keyframes?.keyframes ?? []).filter((keyframe) => Math.abs(keyframe.percentage - percentage) > KEYFRAME_PCT_MATCH).map((keyframe) => ({
+      percentage: keyframe.percentage,
+      properties: { ...keyframe.properties },
+      ...keyframe.ease ? { ease: keyframe.ease } : {}
+    })),
+    { percentage, properties }
+  ].sort((a, b) => a.percentage - b.percentage);
+}
+function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, iframe) {
+  if (anim.arcPath?.enabled) return { status: "persisted" };
+  const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+    selection.element,
+    studioOffset,
+    gsapPos
   );
-  if (editedSelected) parkPlayheadOnKeyframe(anim, pct);
+  const plan = planValueEdit(selection, anim, { x: newX, y: newY }, iframe, {
+    backfill: { x: baseGsapX, y: baseGsapY }
+  });
+  return plan.ok ? { status: "persisted" } : { status: "blocked", reason: "keyframes-uneditable", detail: plan.reason };
 }
-async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos, iframe, selector, callbacks) {
+async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos, iframe, callbacks) {
   const el = selection.element;
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
@@ -46558,8 +46703,6 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
     el.removeAttribute("data-hf-drag-initial-offset-x");
     el.removeAttribute("data-hf-drag-initial-offset-y");
   };
-  const backfillDefaults = { x: baseGsapX, y: baseGsapY };
-  const ct = usePlayerStore.getState().currentTime;
   if (anim.arcPath?.enabled) {
     const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
     const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
@@ -46581,11 +46724,12 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
       );
       setActiveKeyframePct(null);
       parkPlayheadOnKeyframe(anim, pct);
-      return;
+      return { status: "persisted" };
     }
     const tweenStart = resolveTweenStart(anim);
     const tweenDuration = resolveEditableTweenDuration(anim, selection);
-    if (tweenStart === null || tweenDuration <= 0 || keyframes.length < 2) return;
+    if (tweenStart === null || tweenDuration <= 0 || keyframes.length < 2)
+      return { status: "persisted" };
     const temporalKeyframes = buildTemporalArcKeyframes(anim, pct, { x: newX, y: newY });
     await callbacks.commitMutation(
       selection,
@@ -46605,171 +46749,12 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
         beforeReload: restoreOffset
       }
     );
-    return;
-  }
-  if (anim.keyframes) {
-    const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
-    const effectiveAnim = newId ? { ...anim, id: newId } : anim;
-    const dragProps = { x: newX, y: newY };
-    const ts = resolveTweenStart(effectiveAnim);
-    const td = resolveEditableTweenDuration(effectiveAnim, selection);
-    const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
-    const hasSelectedKeyframe = usePlayerStore.getState().activeKeyframePct != null;
-    if (outsideRange && !hasSelectedKeyframe) {
-      await extendTweenAndAddKeyframe(
-        selection,
-        effectiveAnim,
-        dragProps,
-        ct,
-        ts,
-        td,
-        callbacks,
-        restoreOffset,
-        backfillDefaults
-      );
-    } else {
-      await commitKeyframedPosition(
-        selection,
-        effectiveAnim,
-        dragProps,
-        callbacks,
-        restoreOffset,
-        backfillDefaults
-      );
-    }
-  } else if (anim.method === "from" || anim.method === "fromTo") {
-    const ct2 = usePlayerStore.getState().currentTime;
-    const ts = resolveTweenStart(anim);
-    const td = resolveEditableTweenDuration(anim, selection);
-    const hasSelectedKeyframe = usePlayerStore.getState().activeKeyframePct != null;
-    const outsideRange = !hasSelectedKeyframe && ts !== null && td > 0 && (ct2 < ts - 0.01 || ct2 > ts + td + 0.01);
-    const dragProps = { x: newX, y: newY };
-    if (outsideRange && ts !== null) {
-      await callbacks.commitMutation(
-        selection,
-        { type: "split-into-property-groups", animationId: anim.id },
-        { label: "Split from() for drag", skipReload: true }
-      );
-      const allAnims = callbacks.fetchAnimations ? await callbacks.fetchAnimations() : [];
-      const existingPosAnim = allAnims.find(
-        (a) => a.propertyGroup === "position" && a.targetSelector === anim.targetSelector
-      );
-      if (existingPosAnim?.keyframes) {
-        const posTs = resolveTweenStart(existingPosAnim);
-        const posTd = resolveEditableTweenDuration(existingPosAnim, selection);
-        if (posTs !== null) {
-          await extendTweenAndAddKeyframe(
-            selection,
-            existingPosAnim,
-            { x: newX, y: newY },
-            ct2,
-            posTs,
-            posTd,
-            callbacks,
-            restoreOffset,
-            backfillDefaults
-          );
-          return;
-        }
-      }
-      const newStart = Math.min(ct2, ts);
-      const newEnd = Math.max(ct2, ts + td);
-      const newDuration = Math.max(0.01, newEnd - newStart);
-      const dragBefore = ct2 < ts;
-      const origStartPct = Math.round((ts - newStart) / newDuration * 1e3) / 10;
-      const origEndPct = Math.round((ts + td - newStart) / newDuration * 1e3) / 10;
-      const keyframes = [];
-      if (dragBefore) {
-        keyframes.push({ percentage: 0, properties: { x: newX, y: newY } });
-        if (origStartPct > 0.5 && origStartPct < 99.5) {
-          keyframes.push({ percentage: origStartPct, properties: { x: 0, y: 0 } });
-        }
-        keyframes.push({ percentage: 100, properties: { x: 0, y: 0 } });
-      } else {
-        keyframes.push({ percentage: 0, properties: { x: 0, y: 0 } });
-        if (origEndPct > 0.5 && origEndPct < 99.5) {
-          keyframes.push({ percentage: origEndPct, properties: { x: 0, y: 0 } });
-        }
-        keyframes.push({ percentage: 100, properties: { x: newX, y: newY } });
-      }
-      keyframes.sort((a, b) => a.percentage - b.percentage);
-      const baseKf = {
-        targetSelector: anim.targetSelector,
-        position: roundTo3(newStart),
-        duration: roundTo3(newDuration),
-        keyframes
-      };
-      await callbacks.commitMutation(
-        selection,
-        existingPosAnim ? { type: "replace-with-keyframes", animationId: existingPosAnim.id, ...baseKf } : { type: "add-with-keyframes", ...baseKf },
-        {
-          label: "Move layer (from extended)",
-          keyframeAction: "add",
-          softReload: true,
-          beforeReload: restoreOffset
-        }
-      );
-    } else {
-      const coalesceKey = `gsap:convert-drag:${anim.id}`;
-      await callbacks.commitMutation(
-        selection,
-        {
-          type: "convert-to-keyframes",
-          animationId: anim.id
-        },
-        { label: "Convert from() for drag", skipReload: true, coalesceKey }
-      );
-      const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
-      const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
-      if (activeKeyframePct != null) setActiveKeyframePct(null);
-      await callbacks.commitMutation(
-        selection,
-        {
-          type: "add-keyframe",
-          animationId: anim.id,
-          percentage: pct,
-          properties: dragProps,
-          ...backfillDefaults ? { backfillDefaults } : {}
-        },
-        {
-          label: `Move layer (keyframe ${pct}%)`,
-          softReload: true,
-          beforeReload: restoreOffset,
-          coalesceKey
-        }
-      );
-    }
-  } else {
-    await commitFlatViaKeyframes(
-      selection,
-      anim,
-      { x: newX, y: newY },
-      callbacks,
-      restoreOffset,
-      iframe,
-      selector,
-      backfillDefaults
-    );
-  }
-}
-
-// 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";
+    return { status: "persisted" };
   }
-  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";
+  return commitValueAtPlayhead(selection, anim, { x: newX, y: newY }, iframe, callbacks, {
+    label: "Move layer",
+    backfill: { x: baseGsapX, y: baseGsapY },
+    beforeReload: restoreOffset
   });
 }
 
@@ -46795,40 +46780,59 @@ function animHasPosition(anim) {
 function findGsapPositionAnimation(animations, selector) {
   if (animations.length === 0) return null;
   const currentTime = usePlayerStore.getState().currentTime;
-  const scored = animations.filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1).map((a) => {
+  const scored = animations.filter(animHasPosition).map((a) => {
     let score = 0;
-    if (animHasPosition(a)) score += 10;
     if (a.keyframes) score += 5;
     if (selector && a.targetSelector === selector) score += 8;
     else if (a.targetSelector.includes(",")) score -= 5;
-    const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-    const dur = a.duration ?? 0;
-    if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 50;
-    else
-      score -= Math.round(
-        Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5
-      );
-    return { anim: a, score };
+    return { anim: a, score: score + playheadProximity(a, currentTime) };
   });
   scored.sort((a, b) => b.score - a.score);
-  return scored[0]?.anim ?? animations[0];
+  return scored[0]?.anim ?? null;
+}
+function playheadProximity(a, currentTime) {
+  const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+  const dur = a.duration ?? 0;
+  if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) return 50;
+  return -Math.round(Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5);
+}
+function statesValueAt(anim, time) {
+  const duration = resolveTweenDuration(anim);
+  if (!(duration > 0)) return false;
+  const pct = (time - (resolveTweenStart(anim) ?? 0)) / duration * 100;
+  const near3 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
+  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near3(kf.percentage));
+  if (anim.method === "from") return near3(0);
+  return near3(100) || anim.method === "fromTo" && near3(0);
 }
 function pickClosestToPlayhead(anims) {
   if (anims.length <= 1) return anims[0] ?? null;
   const ct = usePlayerStore.getState().currentTime;
   return anims.reduce((best, a) => {
-    const s = resolveTweenStart(a) ?? 0;
-    const e = s + resolveTweenDuration(a);
-    const dist = ct >= s && ct <= e ? 0 : Math.min(Math.abs(ct - s), Math.abs(ct - e));
-    const bestS = resolveTweenStart(best) ?? 0;
-    const bestE = bestS + resolveTweenDuration(best);
-    const bestDist = ct >= bestS && ct <= bestE ? 0 : Math.min(Math.abs(ct - bestS), Math.abs(ct - bestE));
+    const dist = playheadDistance(a, ct);
+    const bestDist = playheadDistance(best, ct);
     if (dist < bestDist) return a;
-    if (dist === bestDist && (a.keyframes?.keyframes.length ?? 0) > (best.keyframes?.keyframes.length ?? 0))
-      return a;
+    const stated = dist === 0 && bestDist === 0 ? statedValueWinner(a, best, ct) : null;
+    if (stated) return stated;
+    if (dist === bestDist && keyframeCount(a) > keyframeCount(best)) return a;
     return best;
   });
 }
+function playheadDistance(anim, time) {
+  const s = resolveTweenStart(anim) ?? 0;
+  const e = s + resolveTweenDuration(anim);
+  return time >= s && time <= e ? 0 : Math.min(Math.abs(time - s), Math.abs(time - e));
+}
+function statedValueWinner(a, b, time) {
+  const [mine, theirs] = [statesValueAt(a, time), statesValueAt(b, time)];
+  if (mine !== theirs) return mine ? a : b;
+  const [s, bS] = [resolveTweenStart(a) ?? 0, resolveTweenStart(b) ?? 0];
+  if (mine && s !== bS) return s > bS ? a : b;
+  return null;
+}
+function keyframeCount(anim) {
+  return anim.keyframes?.keyframes.length ?? 0;
+}
 
 // src/hooks/gsapElementMatch.ts
 function getAnimationsForElement(animations, target, element) {
@@ -46858,40 +46862,19 @@ function getAnimationsForElement(animations, target, element) {
 // src/hooks/gsapRuntimeBridge.ts
 var POSITION_CHANNEL_SET = new Set(POSITION_CHANNELS);
 var ROTATION_CHANNEL_SET = new Set(ROTATION_CHANNELS);
-async function resolveGroupTween(group, animations, selection, commitMutation, fetchFallbackAnimations) {
-  const groupAnims = animations.filter((a) => a.propertyGroup === group);
-  const groupAnim = pickClosestToPlayhead(groupAnims);
-  if (groupAnim) return { anim: groupAnim, animations };
-  const legacyMixed = animations.find((a) => !a.propertyGroup);
-  if (legacyMixed) {
-    await commitMutation(
-      selection,
-      { type: "split-into-property-groups", animationId: legacyMixed.id },
-      { label: "Split mixed tween into property groups", skipReload: true }
-    );
-    if (fetchFallbackAnimations) {
-      const fresh = await fetchFallbackAnimations();
-      const freshGroupAnim = fresh.find((a) => a.propertyGroup === group);
-      if (freshGroupAnim) return { anim: freshGroupAnim, animations: fresh };
-    }
-  }
-  if (!legacyMixed && fetchFallbackAnimations) {
-    const fresh = await fetchFallbackAnimations();
-    const freshGroupAnim = fresh.find((a) => a.propertyGroup === group);
-    if (freshGroupAnim) return { anim: freshGroupAnim, animations: fresh };
-    const freshLegacy = fresh.find((a) => !a.propertyGroup);
-    if (freshLegacy) {
-      await commitMutation(
-        selection,
-        { type: "split-into-property-groups", animationId: freshLegacy.id },
-        { label: "Split mixed tween into property groups", skipReload: true }
-      );
-      const reFetched = await fetchFallbackAnimations();
-      const reFetchedGroup = reFetched.find((a) => a.propertyGroup === group);
-      if (reFetchedGroup) return { anim: reFetchedGroup, animations: reFetched };
-    }
-  }
-  return null;
+async function resolveGroupTween(group, animations, _selection, _commitMutation, fetchFallbackAnimations) {
+  const inGroup = (list) => {
+    const tagged = list.filter((a) => a.propertyGroup === group);
+    const props = new Set(PROPERTY_GROUPS[group]);
+    const mixed = list.filter((a) => !a.propertyGroup && animationWritesAnyProperty(a, props));
+    return pickClosestToPlayhead(tagged.length > 0 ? tagged : mixed);
+  };
+  const anim = inGroup(animations);
+  if (anim) return { anim, animations };
+  if (!fetchFallbackAnimations) return null;
+  const fresh = await fetchFallbackAnimations();
+  const freshAnim = inGroup(fresh);
+  return freshAnim ? { anim: freshAnim, animations: fresh } : null;
 }
 var writesPosition = (a) => animationWritesAnyProperty(a, POSITION_CHANNEL_SET);
 function positionedOnlyBySharedTween(selection, animations) {
@@ -46939,6 +46922,36 @@ function oneUndoStep(commit) {
   const coalesceKey = `gsap:drag:${++dragGestureCounter}`;
   return (selection, mutation, options) => commit(selection, mutation, { ...options, coalesceKey, coalesceMs: Number.POSITIVE_INFINITY });
 }
+var isPositionWriteOf = (selector) => (a) => a.targetSelector === selector && isXYPositionWrite(a);
+function positionWriteKeeper(animations, selector) {
+  const dupes = animations.filter(isPositionWriteOf(selector));
+  if (dupes.length < 2 || dupes.filter((a) => !isInstantHold(a)).length > 1) return null;
+  return dupes.find((a) => a.keyframes) ?? dupes.find((a) => (a.duration ?? 0) > 0) ?? dupes[0];
+}
+function dragRoute(posAnim, iframe, selector, altKey) {
+  const hasNonHold = hasNonHoldTweenForElement(iframe, selector, void 0, POSITION_CHANNELS);
+  const hasKeyframedPosTween = !!posAnim?.keyframes && resolveTweenDuration(posAnim) > 0;
+  if (!hasNonHold && !hasKeyframedPosTween) return "static";
+  return altKey || !usePlayerStore.getState().autoKeyframeEnabled ? "whole-path" : "at-playhead";
+}
+async function planDrag(selection, offset, allAnimations, iframe, options) {
+  const selector = selectorFromSelection(selection);
+  if (!selector) return { status: "blocked", reason: "no-selector" };
+  const own = tweensForThisElement(selection, allAnimations);
+  const keeper = positionWriteKeeper(own, selector);
+  const animations = keeper ? own.filter((a) => a === keeper || !isPositionWriteOf(selector)(a)) : own;
+  const resolved2 = await resolveGroupTween("position", animations, selection, async () => {
+  });
+  const posAnim = resolved2?.anim ?? findGsapPositionAnimation(animations, selector);
+  const route = dragRoute(posAnim, iframe, selector, options.altKey);
+  if (route === "static") return { status: "persisted" };
+  if (!posAnim) {
+    return { status: "blocked", reason: "source-uneditable", detail: "no-position-tween" };
+  }
+  if (route === "whole-path") return { status: "persisted" };
+  const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+  return gsapPositionFromDragOutcome(selection, posAnim, offset, gsapPos, iframe);
+}
 async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, gestureCommit, fetchAllAnimations, options) {
   if (!options?.preflightPassed) {
     const preflight = await preflightGsapDragIntercept(
@@ -46948,7 +46961,10 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
       fetchAllAnimations,
       options?.group
     );
-    if (preflight.status !== "persisted" || options?.preflightOnly) return preflight;
+    if (preflight.status !== "persisted") return preflight;
+    if (options?.preflightOnly) {
+      return options.group ? planDrag(selection, offset, allAnimations, iframe, options) : preflight;
+    }
   }
   const animations = tweensForThisElement(selection, allAnimations);
   const fetchFallbackAnimations = fetchAllAnimations && (async () => tweensForThisElement(selection, await fetchAllAnimations()));
@@ -46956,12 +46972,10 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
   if (!selector) return { status: "blocked", reason: "no-selector" };
   const commitMutation = oneUndoStep(gestureCommit);
   let workingAnimations = animations;
-  const isPosWrite = (a) => a.targetSelector === selector && isXYPositionWrite(a);
-  if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
+  if (animations.filter(isPositionWriteOf(selector)).length > 1 && fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
-    const dupes = fresh.filter(isPosWrite);
-    if (dupes.length > 1) {
-      const keeper = dupes.find((a) => a.keyframes) ?? dupes.find((a) => (a.duration ?? 0) > 0) ?? dupes[0];
+    const keeper = positionWriteKeeper(fresh, selector);
+    if (keeper) {
       await commitMutation(
         selection,
         {
@@ -46994,9 +47008,8 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
     }
   }
   const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
-  const hasNonHold = hasNonHoldTweenForElement(iframe, selector, void 0, POSITION_CHANNELS);
-  const hasKeyframedPosTween = !!posAnim?.keyframes && resolveTweenDuration(posAnim) > 0;
-  if (!hasNonHold && !hasKeyframedPosTween) {
+  const route = dragRoute(posAnim, iframe, selector, options?.altKey);
+  if (route === "static") {
     const existingSet = posAnim && isInstantHold(posAnim) && posAnim.targetSelector === selector ? posAnim : findExistingPositionWrite(resolvedAnimations, selector, selection.element);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
@@ -47009,19 +47022,20 @@ async function tryGsapDragIntercept(selection, offset, allAnimations, iframe, ge
   }
   if (fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
-    const freshMatch = fresh.find(
-      (a) => a.targetSelector === posAnim.targetSelector && a.propertyGroup === posAnim.propertyGroup && isXYPositionWrite(a) === isXYPositionWrite(posAnim)
+    const freshMatch = fresh.find((a) => a.id === posAnim.id) ?? pickClosestToPlayhead(
+      fresh.filter(
+        (a) => a.targetSelector === posAnim.targetSelector && a.propertyGroup === posAnim.propertyGroup && isXYPositionWrite(a) === isXYPositionWrite(posAnim)
+      )
     );
     if (freshMatch && freshMatch.id !== posAnim.id) {
       posAnim = freshMatch;
     }
   }
   const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
-  const autoKeyframeEnabled = usePlayerStore.getState().autoKeyframeEnabled;
-  if (options?.altKey || !autoKeyframeEnabled) {
+  if (route === "whole-path") {
     await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
   } else {
-    await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
+    return commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, cbs);
   }
   return { status: "persisted" };
 }
@@ -47065,7 +47079,9 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
   const resolvedAnimations = resolved2?.animations ?? workingAnimations;
   let anim = resolved2?.anim && animationWritesAnyProperty(resolved2.anim, ROTATION_CHANNEL_SET) ? resolved2.anim : null;
   if (!anim) {
-    anim = workingAnimations.find((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET)) ?? null;
+    anim = pickClosestToPlayhead(
+      workingAnimations.filter((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET))
+    );
   }
   const newRotation = roundTo3(angle);
   if (!anim || isInstantHold(anim)) {
@@ -47089,35 +47105,14 @@ async function tryGsapRotationIntercept(selection, angle, animations, iframe, co
     );
     return { status: "persisted" };
   }
-  if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
-    const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
-    if (newId) anim = { ...anim, id: newId };
-  } else if (!anim.keyframes) {
-    const resolvedFromValues = selector ? readAllAnimatedProperties(iframe, selector, anim, "rotation") : void 0;
-    await commitMutation(
-      selection,
-      { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
-      { label: "Convert to keyframes for rotation", skipReload: true }
-    );
-  }
-  const runtimeProps = readAllAnimatedProperties(iframe, selector, anim, "rotation");
-  const backfillDefaults = { ...runtimeProps };
-  if (!("rotation" in runtimeProps)) {
-    backfillDefaults.rotation = readGsapProperty(iframe, selector, "rotation") ?? 0;
-  }
-  const properties = { ...runtimeProps, rotation: newRotation };
-  await commitMutation(
+  return commitValueAtPlayhead(
     selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties,
-      backfillDefaults
-    },
-    { label: `Rotate (keyframe ${pct}%)`, softReload: true }
+    anim,
+    { rotation: newRotation },
+    iframe,
+    { commitMutation, fetchAnimations: fetchFallbackAnimations },
+    { label: "Rotate", backfill: { rotation: newRotation }, holdFromStart: true }
   );
-  return { status: "persisted" };
 }
 
 // src/hooks/keyframeCacheAstLoad.ts
@@ -47141,7 +47136,7 @@ function fetchParsedAnimations(projectId, sourceFile, options = {}) {
 async function requestParsedAnimations(projectId, sourceFile) {
   if (!isPreviewBooted(projectId) && !await whenPreviewBooted(projectId)) return null;
   try {
-    const res = await fetch(
+    const res = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,
       // Always revalidate; an unchanged file answers 304. No per-call timestamp
       // (a deterministic-render no-no).
@@ -47433,8 +47428,8 @@ var MIN_TWEEN_DURATION = 0.01;
 var round33 = (n) => Math.round(n * 1e3) / 1e3;
 var clamp5 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
 function resolveFlatTweenBoundaryRetime(opts) {
-  const { keyframeCount, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
-  if (keyframeCount > 0) return null;
+  const { keyframeCount: keyframeCount2, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
+  if (keyframeCount2 > 0) return null;
   if (draggedTweenPct !== 0 && draggedTweenPct !== 100) return { kind: "noop" };
   const draggedTime = draggedTweenPct === 0 ? tweenStart : tweenEnd;
   if (Math.abs(dropAbsTime - draggedTime) <= EPSILON_TIME) return { kind: "noop" };
@@ -49368,7 +49363,7 @@ function StudioAgentTools() {
       // fetches the URL itself.
       probeFrame: async (url) => {
         try {
-          const response = await fetch(url, { method: "HEAD" });
+          const response = await studioApiFetch(url, { method: "HEAD" });
           return { ok: response.ok, status: response.status };
         } catch {
           return { ok: false, status: 0 };
@@ -50779,6 +50774,23 @@ function useRenderClipContent({
   );
 }
 
+// src/hooks/useThumbnailStill.ts
+import { useMemo as useMemo49 } from "react";
+var LOADING = Object.freeze({ status: "loading" });
+var FAILED = Object.freeze({ status: "failed" });
+function useThumbnailStill(url, projectId, { sessionEpoch = 0, priority = "visible" } = {}) {
+  const request = useMemo49(
+    () => url ? compositionThumbnailRequest(url, projectId, { sessionEpoch, priority }) : null,
+    [priority, projectId, sessionEpoch, url]
+  );
+  const snapshot3 = useThumbnailLease(request);
+  const ready = snapshot3.status === "ready" && snapshot3.value.kind === "image" ? snapshot3.value.url : null;
+  return useMemo49(
+    () => ready ? { status: "ready", url: ready } : snapshot3.status === "error" ? FAILED : LOADING,
+    [ready, snapshot3.status]
+  );
+}
+
 // src/components/editor/SourceEditor.tsx
 import { useRef as useRef82, useCallback as useCallback76, useEffect as useEffect68, memo as memo35 } from "react";
 import {
@@ -51002,13 +51014,13 @@ var SourceEditor = memo35(function SourceEditor2({
 });
 
 // src/components/editor/PropertyPanel.tsx
-import { memo as memo39, useMemo as useMemo64, useRef as useRef113, useState as useState101 } from "react";
+import { memo as memo39, useMemo as useMemo65, useRef as useRef113, useState as useState101 } from "react";
 
 // src/components/editor/InspectorHeaderActions.tsx
 import { Eye as Eye3, EyeSlash as EyeSlash2 } from "@phosphor-icons/react";
 
 // src/contexts/DesignPanelInputContext.tsx
-import { useCallback as useCallback77, useContext as useContext12, useMemo as useMemo49 } from "react";
+import { useCallback as useCallback77, useContext as useContext12, useMemo as useMemo50 } from "react";
 
 // src/utils/designInputTracking.ts
 var COALESCE_WINDOW_MS = 600;
@@ -51051,7 +51063,7 @@ function DesignPanelInputProvider({
   children
 }) {
   const parent = useContext12(DesignPanelInputContext);
-  const value = useMemo49(
+  const value = useMemo50(
     () => ({ ui: ui ?? parent.ui, section: section ?? parent.section }),
     [ui, section, parent.ui, parent.section]
   );
@@ -52716,7 +52728,7 @@ function MediaSection({
 import { isHfColorGradingActive as isHfColorGradingActive2 } from "@hyperframes/core/color-grading";
 
 // src/components/editor/propertyPanelColorGradingControls.tsx
-import { useMemo as useMemo50, useRef as useRef87, useState as useState63 } from "react";
+import { useMemo as useMemo51, useRef as useRef87, useState as useState63 } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading2
@@ -53160,7 +53172,7 @@ function ColorGradingControls({
   const [detailSettings, setDetailSettings] = useState63(null);
   const [lutImporting, setLutImporting] = useState63(false);
   const [lutImportError, setLutImportError] = useState63(null);
-  const lutAssets = useMemo50(
+  const lutAssets = useMemo51(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
@@ -53440,7 +53452,7 @@ function ColorGradingControls({
 }
 
 // src/components/editor/useColorGradingController.ts
-import { useCallback as useCallback82, useEffect as useEffect75, useMemo as useMemo51, useRef as useRef89, useState as useState65 } from "react";
+import { useCallback as useCallback82, useEffect as useEffect75, useMemo as useMemo52, useRef as useRef89, useState as useState65 } from "react";
 import {
   HF_COLOR_GRADING_ATTR as HF_COLOR_GRADING_ATTR3,
   hasHfColorGradingAuthoredValues,
@@ -53803,7 +53815,7 @@ function useColorGradingController({
     state: "pending",
     message: "Waiting for runtime"
   }));
-  const selectedAssetPath = useMemo51(
+  const selectedAssetPath = useMemo52(
     () => selectedMediaAssetPath(element, projectId),
     [element, projectId]
   );
@@ -53850,7 +53862,7 @@ function useColorGradingController({
       trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
     };
   }, [identityKey]);
-  const target = useMemo51(
+  const target = useMemo52(
     () => ({
       id: element.id ?? null,
       hfId: element.hfId ?? null,
@@ -53871,7 +53883,7 @@ function useColorGradingController({
       return;
     }
     const controller = new AbortController();
-    fetch(cacheKey, { signal: controller.signal }).then(async (response) => {
+    studioApiFetch(cacheKey, { signal: controller.signal }).then(async (response) => {
       if (!response.ok) return { ok: false };
       const data = await response.json();
       return { ok: true, metadata: data?.metadata ?? null };
@@ -54830,7 +54842,7 @@ function ColorField({
 }
 
 // src/components/editor/propertyPanelFont.tsx
-import { useEffect as useEffect77, useMemo as useMemo52, useRef as useRef91, useState as useState67, useSyncExternalStore as useSyncExternalStore8 } from "react";
+import { useEffect as useEffect77, useMemo as useMemo53, useRef as useRef91, useState as useState67, useSyncExternalStore as useSyncExternalStore8 } from "react";
 
 // src/components/editor/fontAssets.ts
 var FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -54945,7 +54957,7 @@ var fontLists = {
 var fontListsRequest = null;
 var fontListListeners = /* @__PURE__ */ new Set();
 async function fetchFontList(url) {
-  const data = await (await fetch(url)).json();
+  const data = await (await studioApiFetch(url)).json();
   if (!Array.isArray(data.fonts)) throw new Error(`${url} returned no font list`);
   return data.fonts;
 }
@@ -55076,13 +55088,13 @@ function FontFamilyField({
       setImportingFonts(false);
     }
   };
-  const projectFontAssets = useMemo52(
+  const projectFontAssets = useMemo53(
     () => uniqueFontOptions(
       importedFonts.map((f) => ({ family: f.family, source: "Imported" }))
     ),
     [importedFonts]
   );
-  const options = useMemo52(() => {
+  const options = useMemo53(() => {
     if (!open) return [];
     const documentFonts = collectDocumentFontFamilies();
     return sortFontOptions(
@@ -55098,7 +55110,7 @@ function FontFamilyField({
       ])
     );
   }, [open, currentFamily, lists, localFonts, projectFontAssets]);
-  const filteredOptions = useMemo52(() => {
+  const filteredOptions = useMemo53(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));
     if (query.trim()) return matches.slice(0, 200);
     const bySource = /* @__PURE__ */ new Map();
@@ -55128,7 +55140,7 @@ function FontFamilyField({
   };
   const importSystemFont = async (family) => {
     if (!onImportFonts) return null;
-    const response = await fetch(`/api/fonts/file?family=${encodeURIComponent(family)}`);
+    const response = await studioApiFetch(`/api/fonts/file?family=${encodeURIComponent(family)}`);
     if (!response.ok) return null;
     const blob = await response.blob();
     const ext2 = response.headers.get("Content-Disposition")?.match(/\.(\w+)"?$/)?.[1] ?? "ttf";
@@ -55334,7 +55346,7 @@ function FontFamilyField({
 import { useEffect as useEffect79 } from "react";
 
 // src/components/panels/VariablesBindElement.tsx
-import { useMemo as useMemo53, useState as useState69 } from "react";
+import { useMemo as useMemo54, useState as useState69 } from "react";
 
 // src/components/panels/VariablesValueControls.tsx
 import { useState as useState68 } from "react";
@@ -55616,7 +55628,7 @@ function VariablesBindElement({
 }) {
   const [activeKey, setActiveKey] = useState69(null);
   const [idDraft, setIdDraft] = useState69("");
-  const actions = useMemo53(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
+  const actions = useMemo54(() => buildBindActions(selection, sdkSession), [selection, sdkSession]);
   if (actions.length === 0) return null;
   const active = actions.find((a) => a.key === activeKey) ?? null;
   const trimmedId = sanitizeId(idDraft);
@@ -55727,7 +55739,7 @@ function uniqueId(base2, existing) {
 }
 
 // src/contexts/VariablePromoteContext.tsx
-import { useContext as useContext13, useEffect as useEffect78, useMemo as useMemo54, useState as useState70 } from "react";
+import { useContext as useContext13, useEffect as useEffect78, useMemo as useMemo55, useState as useState70 } from "react";
 import { jsx as jsx129 } from "react/jsx-runtime";
 var VariablePromoteContext = createStableContext(
   "VariablePromoteContext",
@@ -55750,15 +55762,15 @@ function VariablePromoteProvider({
     if (!session) return;
     return session.on("change", () => setRevision((r) => r + 1));
   }, [session]);
-  const actions = useMemo54(() => {
+  const actions = useMemo55(() => {
     if (!session || !selection) return [];
     return buildBindActions(selection, session);
   }, [session, selection, revision]);
-  const declarations = useMemo54(() => {
+  const declarations = useMemo55(() => {
     if (!session) return [];
     return session.getVariableDeclarations();
   }, [session, revision]);
-  const value = useMemo54(
+  const value = useMemo55(
     () => ({ session, selection, actions, declarations, persist: persist2, onPersistError }),
     [session, selection, actions, declarations, persist2, onPersistError]
   );
@@ -55767,7 +55779,7 @@ function VariablePromoteProvider({
 function useVariablePromoteChannel(channel) {
   const ctx3 = useContext13(VariablePromoteContext);
   const key2 = channel.kind === "style" ? `style:${channel.prop}` : channel.kind;
-  return useMemo54(() => {
+  return useMemo55(() => {
     if (!ctx3 || !ctx3.session || !ctx3.selection?.hfId) return null;
     const { session, selection, actions, declarations, persist: persist2, onPersistError } = ctx3;
     const hfId = selection.hfId;
@@ -56191,7 +56203,7 @@ function insertGradientStop(model, position) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
-import { useMemo as useMemo55, useRef as useRef92, useState as useState71 } from "react";
+import { useMemo as useMemo56, useRef as useRef92, useState as useState71 } from "react";
 
 // src/components/icons/ReverseGradientIcon.tsx
 import { jsx as jsx131, jsxs as jsxs97 } from "react/jsx-runtime";
@@ -56266,8 +56278,8 @@ function ImageFillField({
   const fileInputRef = useRef92(null);
   const [uploading, setUploading] = useState71(false);
   const [uploadError, setUploadError] = useState71(null);
-  const imageAssets = useMemo55(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
-  const selectedAsset = useMemo55(
+  const imageAssets = useMemo56(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
+  const selectedAsset = useMemo56(
     () => resolveSelectedAsset(value, sourceFile, imageAssets),
     [imageAssets, sourceFile, value]
   );
@@ -57734,7 +57746,7 @@ import { useCallback as useCallback87, 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 useMemo56, useRef as useRef95, useState as useState75 } from "react";
+import { memo as memo37, useCallback as useCallback86, useEffect as useEffect82, useMemo as useMemo57, useRef as useRef95, useState as useState75 } from "react";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
 
 // src/components/editor/gsapAnimationHelpers.ts
@@ -58275,21 +58287,21 @@ var AnimationCard = memo37(function AnimationCard2({
     segment?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     pendingAutoScrollRef.current = false;
   }, [expandedKfPct]);
-  const usedProps = useMemo56(
+  const usedProps = useMemo57(
     () => new Set(Object.keys(animation.properties)),
     [animation.properties]
   );
-  const availableProps = useMemo56(
+  const availableProps = useMemo57(
     () => SUPPORTED_PROPS.filter(
       (p) => !usedProps.has(p) && (animation.method === "set" || !BOOLEAN_PROPS.has(p))
     ),
     [usedProps, animation.method]
   );
-  const usedFromProps = useMemo56(
+  const usedFromProps = useMemo57(
     () => new Set(Object.keys(animation.fromProperties ?? {})),
     [animation.fromProperties]
   );
-  const availableFromProps = useMemo56(
+  const availableFromProps = useMemo57(
     () => SUPPORTED_PROPS.filter((p) => !usedFromProps.has(p) && !BOOLEAN_PROPS.has(p)),
     [usedFromProps]
   );
@@ -58336,7 +58348,7 @@ var AnimationCard = memo37(function AnimationCard2({
   const easeName = (animation.keyframes ? animation.keyframes.easeEach : void 0) ?? animation.ease ?? "none";
   const easeLabel = easeName.startsWith("custom(") ? "Custom curve" : EASE_LABELS[easeName] ?? easeName;
   const endTime = typeof animation.position === "number" ? animation.position + (animation.duration ?? 0) : animation.position;
-  const summary = useMemo56(() => buildTweenSummary(animation), [animation]);
+  const summary = useMemo57(() => buildTweenSummary(animation), [animation]);
   const setKeys = Object.keys(animation.properties);
   if (animation.method === "set" && // `every` is vacuously true on an empty bag — require at least one key so a
   // property-less set doesn't masquerade as a position row.
@@ -59484,7 +59496,7 @@ function PropertyPanel3dTransform({
 }
 
 // src/components/editor/PropertyPanelFlat.tsx
-import { useEffect as useEffect103, useMemo as useMemo63, useRef as useRef112, useState as useState100 } from "react";
+import { useEffect as useEffect103, useMemo as useMemo64, useRef as useRef112, useState as useState100 } from "react";
 import { useShallow as useShallow2 } from "zustand/react/shallow";
 
 // src/components/editor/audioFxSummary.ts
@@ -61654,7 +61666,7 @@ function motionSectionLabel(args) {
 }
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
-import { useMemo as useMemo59, useState as useState88 } from "react";
+import { useMemo as useMemo60, useState as useState88 } from "react";
 import {
   HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR11,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
@@ -61674,7 +61686,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/components/editor/propertyPanelFxSection.tsx
-import { useCallback as useCallback90, useEffect as useEffect90, useMemo as useMemo58, useRef as useRef100, useState as useState86 } from "react";
+import { useCallback as useCallback90, useEffect as useEffect90, useMemo as useMemo59, useRef as useRef100, useState as useState86 } from "react";
 
 // src/components/editor/audioFxRevealTarget.ts
 import { parseAutomationTarget as parseAutomationTarget2 } from "@hyperframes/core/audio-automation";
@@ -62632,7 +62644,7 @@ function FxEqModule({
 import { getAudioFxPreset as getAudioFxPreset4 } from "@hyperframes/core/audio-fx-presets";
 
 // src/components/editor/propertyPanelFxNodeRow.tsx
-import { useMemo as useMemo57, useState as useState85 } from "react";
+import { useMemo as useMemo58, useState as useState85 } from "react";
 import {
   defaultAudioFxParams as defaultAudioFxParams4,
   getAudioFxDef as getAudioFxDef4
@@ -63069,11 +63081,11 @@ function FxNodeRow({
 }) {
   const trackInput = useTrackDesignInput();
   const registryDef = getAudioFxDef4(node.type);
-  const def = useMemo57(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
+  const def = useMemo58(() => registryDef ? plainDef(registryDef) : null, [registryDef]);
   const primary = registryDef ? primaryParamOf(registryDef) : null;
   const profile = getAudioFxProfile2(node.type);
-  const derived = useMemo57(() => profileParam(node.type), [node.type]);
-  const onlyPrimary = useMemo57(
+  const derived = useMemo58(() => profileParam(node.type), [node.type]);
+  const onlyPrimary = useMemo58(
     () => def && primary ? { ...def, params: def.params.filter((p) => p.key === primary) } : def,
     [def, primary]
   );
@@ -63745,12 +63757,12 @@ function FxSection({
     [chain.nodes, mutate, onRemoveNodeAutomation, trackKind]
   );
   const [carveOpen, setCarveOpen] = useState86(true);
-  const carveNodes = useMemo58(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
-  const handBuilt = useMemo58(
+  const carveNodes = useMemo59(() => chain.nodes.filter((n) => n.fromCarve), [chain.nodes]);
+  const handBuilt = useMemo59(
     () => chain.nodes.map((node, i) => ({ node, i })).filter(({ node }) => !node.fromCarve && !node.fromEq),
     [chain.nodes]
   );
-  const runs = useMemo58(() => {
+  const runs = useMemo59(() => {
     const out = [];
     for (const item of handBuilt) {
       const preset = item.node.fromPreset;
@@ -63761,8 +63773,8 @@ function FxSection({
     return out;
   }, [handBuilt]);
   const [collapsedRuns, setCollapsedRuns] = useState86(/* @__PURE__ */ new Set());
-  const eqIds = useMemo58(() => audioEqIds(chain), [chain]);
-  const positions = useMemo58(() => {
+  const eqIds = useMemo59(() => audioEqIds(chain), [chain]);
+  const positions = useMemo59(() => {
     const map = /* @__PURE__ */ new Map();
     let at = (showCarve ? 1 : 0) + eqIds.length;
     for (const { i } of handBuilt) map.set(i, ++at);
@@ -64192,7 +64204,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
     if (cached5?.src === src) return cached5;
     const Ctor = window.OfflineAudioContext ?? window.webkitOfflineAudioContext;
     if (!Ctor) return null;
-    const res = await fetch(new URL(src, doc.baseURI).href);
+    const res = await studioApiFetch(new URL(src, doc.baseURI).href);
     const buffer = await new Ctor(1, 1, DECODE_SAMPLE_RATE2).decodeAudioData(
       await res.arrayBuffer()
     );
@@ -64391,7 +64403,7 @@ function AudioFxGroup({
   const removeNodeAutomation = (nodeId) => removeNodesAutomation([nodeId]);
   const [analysing, setAnalysing] = useState88(false);
   const storeElements = usePlayerStore((s) => s.elements);
-  const signalPath = useMemo59(() => {
+  const signalPath = useMemo60(() => {
     const doc = element.element?.ownerDocument;
     return audioFxSignalPath(
       element.tagName?.toLowerCase(),
@@ -65064,7 +65076,7 @@ function createGsapLivePreview(iframeRef) {
 }
 
 // src/components/editor/propertyPanelFlatColorGradingSection.tsx
-import { useEffect as useEffect100, useMemo as useMemo61, useRef as useRef111, useState as useState96 } from "react";
+import { useEffect as useEffect100, useMemo as useMemo62, useRef as useRef111, useState as useState96 } from "react";
 import {
   HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading as normalizeHfColorGrading6,
@@ -65099,7 +65111,7 @@ function presetPreviewHandlers({
 import { useState as useState92 } from "react";
 
 // src/components/editor/propertyPanelColorCurveGraph.tsx
-import { useMemo as useMemo60, useRef as useRef104 } from "react";
+import { useMemo as useMemo61, useRef as useRef104 } from "react";
 import {
   compileHfColorCurve,
   compileHfHueCurve,
@@ -65287,8 +65299,8 @@ function CurveGraph({
   onCancel
 }) {
   const pointerRef = useRef104(null);
-  const samples = useMemo60(() => samplesFor(points, tab), [points, tab]);
-  const path = useMemo60(() => curvePath(samples, tab), [samples, tab]);
+  const samples = useMemo61(() => samplesFor(points, tab), [points, tab]);
+  const path = useMemo61(() => curvePath(samples, tab), [samples, tab]);
   const selectRelativePoint = (offset) => {
     if (points.length === 0) return;
     const current = selectedIndex ?? (offset > 0 ? -1 : 0);
@@ -67078,14 +67090,14 @@ function FlatColorGradingSection({
   const lutInputRef = useRef111(null);
   const [lutOpen, setLutOpen] = useState96(false);
   const [detailSettingsOpen, setDetailSettingsOpen] = useState96(null);
-  const lutAssets = useMemo61(
+  const lutAssets = useMemo62(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets]
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? lut.src.split("/").pop() ?? lut.src : null;
-  const resolvedGrading = useMemo61(() => resolveColorGrading(grading), [grading]);
-  const secondaryInputGrading = useMemo61(
+  const resolvedGrading = useMemo62(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo62(
     () => resolveColorGrading({
       intensity: 1,
       adjust: resolvedGrading.adjust,
@@ -67103,7 +67115,7 @@ function FlatColorGradingSection({
     ]
   );
   const actions = createColorGradingActions(grading, onCommitColorGrading);
-  const scopesRefreshKey = useMemo61(() => serializeHfColorGrading2(grading), [grading]);
+  const scopesRefreshKey = useMemo62(() => serializeHfColorGrading2(grading), [grading]);
   useEffect100(() => {
     if (presetPreviews.status === "idle") onRequestPresetPreviews();
   }, [onRequestPresetPreviews, presetPreviews.status]);
@@ -68233,7 +68245,7 @@ function FlatEffectsSection({
 import { useState as useState99 } from "react";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState98, useEffect as useEffect102, useMemo as useMemo62 } from "react";
+import { useState as useState98, useEffect as useEffect102, useMemo as useMemo63 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -68291,7 +68303,7 @@ function getCategoryColors(category) {
 var catalogCache = null;
 var catalogRequest = null;
 function loadCatalog() {
-  catalogRequest ??= fetch("/api/registry/blocks").then((response) => {
+  catalogRequest ??= studioApiFetch("/api/registry/blocks").then((response) => {
     if (!response.ok) throw new Error("Failed to load catalog");
     return response.json();
   }).then((items) => {
@@ -68332,7 +68344,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo62(() => {
+  const filteredBlocks = useMemo63(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -68648,7 +68660,7 @@ function PropertyPanelFlat({
     onSetAttributeQuiet ?? onSetAttributeLive,
     linkedSpeed
   );
-  const audioGroupLabel = useMemo63(() => {
+  const audioGroupLabel = useMemo64(() => {
     const doc = element.element?.ownerDocument;
     const id = element.id;
     if (!doc || !id) return void 0;
@@ -69214,12 +69226,12 @@ var PropertyPanel = memo39(function PropertyPanel2(props) {
   const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
   const iframeRef = previewIframeRef ?? { current: null };
   const gsapAnimIdForMemo = element ? gsapAnimations?.find((a) => a.keyframes)?.id ?? gsapAnimations?.[0]?.id ?? null : null;
-  const gsapRuntimeValues = useMemo64(
+  const gsapRuntimeValues = useMemo65(
     () => element ? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
     [gsapAnimIdForMemo, gsapAnimations, element, currentTime]
   );
-  const gsapBorderRadius = useMemo64(
+  const gsapBorderRadius = useMemo65(
     () => element ? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef) : null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [gsapRuntimeValues, gsapAnimations, element, currentTime]
@@ -69596,11 +69608,11 @@ var PropertyPanel = memo39(function PropertyPanel2(props) {
 });
 
 // src/components/editor/FileTree.tsx
-import { memo as memo41, useState as useState103, useCallback as useCallback92, useMemo as useMemo66, useRef as useRef115 } from "react";
+import { memo as memo41, useState as useState103, useCallback as useCallback92, useMemo as useMemo67, useRef as useRef115 } 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 useMemo65, useRef as useRef114, useEffect as useEffect104 } from "react";
+import { memo as memo40, useState as useState102, useCallback as useCallback91, useMemo as useMemo66, useRef as useRef114, useEffect as useEffect104 } from "react";
 import {
   PencilSimple,
   Copy,
@@ -70103,7 +70115,7 @@ var TreeFolder = memo40(function TreeFolder2({
 }) {
   const [isOpen, setIsOpen] = useState102(defaultOpen);
   const toggle = useCallback91(() => setIsOpen((v) => !v), []);
-  const children = useMemo65(() => sortChildren(node.children), [node.children]);
+  const children = useMemo66(() => sortChildren(node.children), [node.children]);
   const Chevron = isOpen ? ChevronDown : ChevronRight;
   const isDragOver = dragOverFolder === node.fullPath;
   const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
@@ -70234,8 +70246,8 @@ var FileTree = memo41(function FileTree2({
   onImportFiles,
   lintFindingsByFile
 }) {
-  const tree = useMemo66(() => buildTree(files), [files]);
-  const children = useMemo66(() => sortChildren(tree.children), [tree]);
+  const tree = useMemo67(() => buildTree(files), [files]);
+  const children = useMemo67(() => sortChildren(tree.children), [tree]);
   const [contextMenu, setContextMenu] = useState103(null);
   const [inlineInput, setInlineInput] = useState103(null);
   const [deleteTarget, setDeleteTarget] = useState103(null);
@@ -70502,7 +70514,7 @@ var FileTree = memo41(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState158, useCallback as useCallback194, useRef as useRef187, useMemo as useMemo88 } from "react";
+import { useState as useState158, useCallback as useCallback194, useRef as useRef187, useMemo as useMemo89 } from "react";
 
 // src/hooks/useStableHandlers.ts
 import { useRef as useRef116 } from "react";
@@ -70534,9 +70546,9 @@ function useStableHandlers(value, scope) {
 }
 
 // src/hooks/useShellSlices.ts
-import { useMemo as useMemo67 } from "react";
+import { useMemo as useMemo68 } from "react";
 function useHistoryFlags({ canUndo, canRedo, undoLabel, redoLabel }) {
-  return useMemo67(
+  return useMemo68(
     () => ({ canUndo, canRedo, undoLabel, redoLabel }),
     [canUndo, canRedo, undoLabel, redoLabel]
   );
@@ -70552,7 +70564,7 @@ function useToolbarSession(session) {
     handleGsapConvertToKeyframes,
     handleGsapRemoveKeyframe
   } = session;
-  return useMemo67(
+  return useMemo68(
     () => ({
       domEditSelection,
       selectedGsapAnimations,
@@ -70625,7 +70637,7 @@ function useRightPanelIntent() {
 }
 
 // src/components/renders/useRenderQueue.ts
-import { useState as useState105, useEffect as useEffect107, useCallback as useCallback95, useRef as useRef119, useMemo as useMemo68 } from "react";
+import { useState as useState105, useEffect as useEffect107, useCallback as useCallback95, useRef as useRef119, useMemo as useMemo69 } from "react";
 
 // src/components/renders/serverError.ts
 async function readServerError(res) {
@@ -70665,7 +70677,7 @@ function parseStatus(body) {
 }
 async function probe() {
   try {
-    const res = await fetch("/api/environment/ffmpeg");
+    const res = await studioApiFetch("/api/environment/ffmpeg");
     return res.ok ? parseStatus(await res.json()) : null;
   } catch {
     return null;
@@ -70889,7 +70901,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
   const loadRenders = useCallback95(async () => {
     if (!projectId) return;
     try {
-      const res = await fetch(buildProjectApiPath(projectId, `/renders`));
+      const res = await studioApiFetch(buildProjectApiPath(projectId, `/renders`));
       if (!res.ok) {
         setLoadError(`Couldn't load render history (server error ${res.status}).`);
         return;
@@ -70976,7 +70988,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       }
       let res;
       try {
-        res = await fetch(buildProjectApiPath(projectId, `/render`), {
+        res = await studioApiFetch(buildProjectApiPath(projectId, `/render`), {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(body)
@@ -71069,7 +71081,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
         )
       );
       try {
-        const res = await fetch(`/api/render/${jobId}/cancel`, { method: "POST" });
+        const res = await studioApiFetch(`/api/render/${jobId}/cancel`, { method: "POST" });
         if (!res.ok && res.status !== 404) {
           setActionError("Couldn't cancel on the server \u2014 the render may still be running.");
           return;
@@ -71091,7 +71103,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       setActionError(null);
       closeActiveEventSource(jobId);
       try {
-        const res = await fetch(`/api/render/${jobId}`, { method: "DELETE" });
+        const res = await studioApiFetch(`/api/render/${jobId}`, { method: "DELETE" });
         if (!res.ok) {
           setActionError("Couldn't delete the render \u2014 it's still on disk.");
           return;
@@ -71148,7 +71160,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
     };
   }, [projectId]);
   const isRendering = jobs.some((j) => j.status === "rendering");
-  return useMemo68(
+  return useMemo69(
     () => ({
       jobs,
       isRendering,
@@ -71574,7 +71586,7 @@ async function captureProjectProvenance(projectId, files, compositions) {
   };
   if (!scaffolded) return;
   try {
-    const res = await fetch(
+    const res = await studioApiFetch(
       buildProjectApiPath(projectId, `/files/${encodeURIComponent(CONFIG_FILE)}`)
     );
     if (!res.ok) return;
@@ -72195,7 +72207,7 @@ function ProjectUnreachableBanner({ projectId }) {
   const [served, setServed] = useState110(null);
   useEffect110(() => {
     let cancelled = false;
-    fetch("/api/projects").then((res) => res.ok ? res.json() : { projects: [] }).then((data) => {
+    studioApiFetch("/api/projects").then((res) => res.ok ? res.json() : { projects: [] }).then((data) => {
       if (!cancelled) setServed(data.projects ?? []);
     }).catch(() => {
       if (!cancelled) setServed([]);
@@ -72305,11 +72317,14 @@ function useCaptionSync(projectId) {
     }
     const seqAtSave = editSeqRef.current;
     const overrides = buildOverrides(state.model);
-    fetch(buildProjectApiPath(pid, `/files/${encodeURIComponent("caption-overrides.json")}`), {
-      method: "PUT",
-      headers: { "Content-Type": "text/plain", ...studioWriteHeaders() },
-      body: JSON.stringify(overrides, null, 2)
-    }).then((res) => {
+    studioApiFetch(
+      buildProjectApiPath(pid, `/files/${encodeURIComponent("caption-overrides.json")}`),
+      {
+        method: "PUT",
+        headers: { "Content-Type": "text/plain", ...studioWriteHeaders() },
+        body: JSON.stringify(overrides, null, 2)
+      }
+    ).then((res) => {
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       if (editSeqRef.current === seqAtSave) pendingRef.current = false;
       const s = useCaptionStore.getState();
@@ -72362,7 +72377,7 @@ function useCaptionSync(projectId) {
     if (!pid) return;
     let data;
     try {
-      const res = await fetch(
+      const res = await studioApiFetch(
         buildProjectApiPath(pid, `/files/${encodeURIComponent("caption-overrides.json")}`)
       );
       if (!res.ok) return;
@@ -72418,13 +72433,15 @@ function useCaptionSync(projectId) {
 }
 
 // src/hooks/usePersistentEditHistory.ts
-import { useCallback as useCallback99, useEffect as useEffect111, useMemo as useMemo69, useRef as useRef126, useState as useState111 } from "react";
+import { useCallback as useCallback99, useEffect as useEffect111, useMemo as useMemo70, useRef as useRef126, useState as useState111 } from "react";
 var EMPTY3 = { entries: [], back: null, forward: null };
 var OWN_ENTRIES_KEPT = 100;
 function createOwnHistory() {
   const own = /* @__PURE__ */ new Map();
   let next = null;
   let changes = 0;
+  let claimed = { count: 0, id: "" };
+  const undoneIds = /* @__PURE__ */ new Set();
   const remember = (id, files) => {
     const known = own.get(id) ?? {};
     for (const [path, { before, after }] of Object.entries(files)) {
@@ -72445,7 +72462,15 @@ function createOwnHistory() {
       if (seen === changes) next = { undo: view.back, redo: view.forward };
     },
     changes: () => changes,
+    claimCount: () => claimed.count,
+    claimedAfter: (count) => claimed.count > count && claimed.id ? claimed.id : null,
+    targetFor: (id, pressedAt) => !id || !undoneIds.has(id) ? id : claimed.count > pressedAt ? false : null,
+    noteClaim: (id) => {
+      claimed = { count: claimed.count + 1, id };
+    },
     stepped: (entry2) => {
+      if (entry2.undoes) undoneIds.add(entry2.undoes);
+      if (undoneIds.size > OWN_ENTRIES_KEPT) undoneIds.delete(undoneIds.values().next().value);
       const undone = entry2.undoes ? own.get(entry2.undoes) : void 0;
       if (!undone) return;
       const swapped = Object.entries(undone).map(([path, f]) => [
@@ -72461,14 +72486,15 @@ function createOwnHistory() {
       const paths = files ? Object.keys(files) : [];
       if (!files || paths.length !== step.paths.length || !paths.every((p) => step.paths.includes(p)))
         return null;
-      const restore = paths.map((path) => [
+      const restore2 = paths.map((path) => [
         path,
         { previous: files[path].after, restored: files[path].before }
       ]);
-      return { id: step.id, files: Object.fromEntries(restore) };
+      return { id: step.id, files: Object.fromEntries(restore2) };
     },
     clear: () => {
       own.clear();
+      undoneIds.clear();
       next = null;
       changes += 1;
     }
@@ -72478,8 +72504,14 @@ var DEFAULT_COALESCE_MS = 300;
 function historyUrl(projectId, path = "") {
   return `/api/projects/${encodeURIComponent(projectId)}/history${path}`;
 }
+async function cantUndo(paths) {
+  return { ok: false, reason: "content-mismatch", paths: paths ?? [] };
+}
+function unionPaths(...lists) {
+  return [...new Set(lists.flatMap((list) => list ?? []))];
+}
 async function post(url, body, headers = {}) {
-  const response = await fetch(url, {
+  const response = await studioApiFetch(url, {
     method: "POST",
     headers: { "Content-Type": "application/json", ...headers },
     body: JSON.stringify(body)
@@ -72538,9 +72570,10 @@ function usePersistentEditHistory({ projectId }) {
   const refresh = useCallback99(async () => {
     if (!projectId) return;
     const seen = own.changes();
-    const response = await fetch(historyUrl(projectId)).catch(() => null);
-    const next = response?.ok ? await response.json() : EMPTY3;
+    const response = await studioApiFetch(historyUrl(projectId)).catch(() => null);
+    const next = response?.ok ? await response.json().catch(() => null) : EMPTY3;
     if (projectIdRef.current !== projectId) return;
+    if (!next) return console.error("The history's reply was unreadable.");
     setView(next);
     own.offered(seen, next);
   }, [projectId, own]);
@@ -72563,7 +72596,10 @@ function usePersistentEditHistory({ projectId }) {
         ...coalesceKey && { coalesceKey, idleMs: coalesceMs ?? DEFAULT_COALESCE_MS }
       });
       const claimed = claimHeld(reply, label);
-      if (claimed) own.remember(claimed, files);
+      if (claimed) {
+        own.remember(claimed, files);
+        own.noteClaim(claimed);
+      }
       heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
       await refresh();
     },
@@ -72572,14 +72608,17 @@ function usePersistentEditHistory({ projectId }) {
   const step = useCallback99(
     async (direction, callbacks) => {
       if (!projectId) return { ok: false, reason: "empty" };
+      const candidate = direction === "undo" && callbacks.claimedAfter !== void 0 ? own.claimedAfter(callbacks.claimedAfter) : null;
       const next = direction === "undo" ? view.back : view.forward;
-      const paths = [.../* @__PURE__ */ new Set([...next?.paths ?? [], ...heldClaimRef.current?.paths ?? []])];
+      const stepPaths = candidate ? Object.keys(own.afterOf(candidate)) : next?.paths;
+      const paths = unionPaths(stepPaths, heldClaimRef.current?.paths);
+      const pressedAt = own.claimCount();
       own.overtake();
-      const run = async () => {
+      const attempt = async (target) => {
         const previous = await readAll(paths, callbacks.readFile);
         const posted = await post(
-          historyUrl(projectId, "/step"),
-          { direction: direction === "undo" ? "back" : "forward" },
+          historyUrl(projectId, target ? "/undo" : "/step"),
+          target ? { entryId: target } : { direction: direction === "undo" ? "back" : "forward" },
           studioWriteHeaders()
         );
         heldClaimRef.current = null;
@@ -72606,6 +72645,10 @@ function usePersistentEditHistory({ projectId }) {
           )
         };
       };
+      const run = () => {
+        const target = own.targetFor(candidate, pressedAt);
+        return target === false ? cantUndo(stepPaths) : attempt(target);
+      };
       return callbacks.serialize ? callbacks.serialize(paths, run) : run();
     },
     [projectId, view, refresh, own]
@@ -72616,7 +72659,7 @@ function usePersistentEditHistory({ projectId }) {
   }, [own, refresh]);
   const undo = useCallback99((callbacks) => step("undo", callbacks), [step]);
   const redo = useCallback99((callbacks) => step("redo", callbacks), [step]);
-  const state = useMemo69(() => {
+  const state = useMemo70(() => {
     const backAt = Math.max(view.back?.endedAt ?? 0, heldClaimRef.current?.at ?? 0);
     const redoAt = redoneAt(view);
     return {
@@ -72637,6 +72680,7 @@ function usePersistentEditHistory({ projectId }) {
     undo,
     redo,
     predict: own.predict,
+    claims: own.claimCount,
     noteOutsideChange
   };
 }
@@ -72701,7 +72745,7 @@ function usePanelLayout(initialState2) {
 import { useState as useState113, useCallback as useCallback104, useRef as useRef130 } from "react";
 
 // src/hooks/useFileTree.ts
-import { useState as useState112, useCallback as useCallback101, useEffect as useEffect113, useMemo as useMemo70, useRef as useRef128 } from "react";
+import { useState as useState112, useCallback as useCallback101, useEffect as useEffect113, useMemo as useMemo71, useRef as useRef128 } from "react";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
   const [fetched, setFetched] = useState112(null);
@@ -72714,7 +72758,7 @@ function useFileTree({ projectId, projectIdRef }) {
     if (!projectId) return;
     let cancelled = false;
     setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
-    fetch(buildProjectApiPath(projectId)).then((r) => {
+    studioApiFetch(buildProjectApiPath(projectId)).then((r) => {
       if (!r.ok) throw new Error(`tree fetch failed: ${r.status}`);
       return r.json();
     }).then((data) => {
@@ -72747,7 +72791,7 @@ function useFileTree({ projectId, projectIdRef }) {
     refreshAbortRef.current = controller;
     let data;
     try {
-      const res = await fetch(buildProjectApiPath(pid), { signal: controller.signal });
+      const res = await studioApiFetch(buildProjectApiPath(pid), { signal: controller.signal });
       data = await res.json();
     } catch (err) {
       if (err instanceof DOMException && err.name === "AbortError") return;
@@ -72765,11 +72809,11 @@ function useFileTree({ projectId, projectIdRef }) {
       );
     }
   }, [projectIdRef]);
-  const assets = useMemo70(
+  const assets = useMemo71(
     () => fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
     [fileTree]
   );
-  const fontAssets = useMemo70(
+  const fontAssets = useMemo71(
     () => (projectId ? assets : []).filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
@@ -72913,9 +72957,18 @@ function useEditorSave({
 }
 
 // src/hooks/useProjectFileWriter.ts
-import { useCallback as useCallback103, useMemo as useMemo71 } from "react";
+import { useCallback as useCallback103, useMemo as useMemo72 } from "react";
+async function fetchProjectFile(projectId, path, query) {
+  if (!projectId) throw new Error("No active project");
+  const response = await studioApiFetch(
+    `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}${query}`
+  );
+  if (!response.ok) throw new Error(`Failed to read ${path}`);
+  const data = await response.json();
+  return { content: data.content, version: data.version ?? response.headers.get("etag") };
+}
 function useProjectFileWriter({ projectId }) {
-  const fileVersionScope = useMemo71(
+  const fileVersionScope = useMemo72(
     () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
     [projectId]
   );
@@ -72928,28 +72981,18 @@ function useProjectFileWriter({ projectId }) {
   );
   const readProjectFile = useCallback103(
     async (path) => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = await response.json();
-      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return data.content;
+      const { content, version } = await fetchProjectFile(projectId, path, "");
+      if (typeof content !== "string") throw new Error(`Missing file contents for ${path}`);
+      fileVersions.set(path, version);
+      return content;
     },
     [fileVersions, projectId]
   );
   const readOptionalProjectFile = useCallback103(
     async (path) => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = await response.json();
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return typeof data.content === "string" ? data.content : "";
+      const { content, version } = await fetchProjectFile(projectId, path, "?optional=1");
+      fileVersions.set(path, version);
+      return typeof content === "string" ? content : "";
     },
     [fileVersions, projectId]
   );
@@ -72959,7 +73002,7 @@ function useProjectFileWriter({ projectId }) {
       const writeProjectId = projectId;
       let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
       if (expectedVersion === void 0) {
-        const preflight = await fetch(
+        const preflight = await studioApiFetch(
           `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`
         );
         if (preflight.ok) {
@@ -72979,7 +73022,7 @@ function useProjectFileWriter({ projectId }) {
       await retryStudioSave(async () => {
         let response;
         try {
-          response = await fetch(
+          response = await studioApiFetch(
             `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
             {
               method: "PUT",
@@ -73020,7 +73063,7 @@ function useProjectFileWriter({ projectId }) {
     },
     [fileVersions, projectId]
   );
-  return useMemo71(
+  return useMemo72(
     () => ({
       fileVersions,
       readProjectFile,
@@ -73124,7 +73167,7 @@ function useFileManager({
         setEditingFile({ path, content: null });
         return;
       }
-      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`).then((r) => {
+      studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`).then((r) => {
         if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
         return r.json();
       }).then((data) => {
@@ -73152,9 +73195,12 @@ function useFileManager({
       const requestId = ++revealRequestIdRef.current;
       const controller = new AbortController();
       revealAbortRef.current = controller;
-      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`, {
-        signal: controller.signal
-      }).then((r) => r.json()).then((data) => {
+      studioApiFetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`,
+        {
+          signal: controller.signal
+        }
+      ).then((r) => r.json()).then((data) => {
         if (requestId !== revealRequestIdRef.current) return;
         if (data.content != null) {
           fileVersions.set(sourceFile, data.version ?? null);
@@ -73178,7 +73224,7 @@ function useFileManager({
       }
       const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
       try {
-        const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
+        const res = await studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
           method: "POST",
           body: formData
         });
@@ -73218,7 +73264,7 @@ function useFileManager({
       if (path.endsWith(".html")) {
         content = '<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n</head>\n<body>\n\n</body>\n</html>\n';
       }
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
         {
           method: "POST",
@@ -73241,7 +73287,7 @@ function useFileManager({
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path + "/.gitkeep")}`,
         {
           method: "POST",
@@ -73263,7 +73309,7 @@ function useFileManager({
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
         {
           method: "DELETE"
@@ -73284,7 +73330,7 @@ function useFileManager({
     async (oldPath, newPath) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(
+      const res = await studioApiFetch(
         `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(oldPath)}`,
         {
           method: "PATCH",
@@ -73310,7 +73356,7 @@ function useFileManager({
     async (path) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
+      const res = await studioApiFetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ path })
@@ -73619,18 +73665,17 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
   const active = files[activeDocPath];
   const restoredScript = active ? extractGsapScriptText(active.restored) : null;
   const previousScript = active ? extractGsapScriptText(active.previous) : null;
-  const reparse = plan.scripted ? plan.targets.map(({ live }) => live).filter((el) => "_gsap" in el) : [];
-  if (reparse.length && !restoredScript) {
+  const reparse = plan.scripted && plan.targets.some(({ live }) => "_gsap" in live);
+  if (reparse && !restoredScript) {
     reloadPreview();
     return "full";
   }
-  if (restoredScript && (restoredScript !== previousScript || reparse.length)) {
+  if (restoredScript && (restoredScript !== previousScript || reparse)) {
     syncStaleEditMarks(doc, active);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
       authoredHtml: active.restored,
-      reparse,
       nestedFiles
     });
     if (result === "cannot-soft-reload") {
@@ -73799,8 +73844,9 @@ function usePreviewPersistence({
     if (result.status !== "clean") throw result.error;
   }, [drainPendingDomEditSaves]);
   const settlePendingEdits = useCallback105(async () => {
-    await flushStudioPendingEdits();
-    await domEditSaveQueueRef.current?.waitForIdle();
+    const queued = domEditSaveQueueRef.current?.waitForIdle();
+    await flushStudioPendingEdits({ onlyCurrent: true });
+    await queued;
   }, []);
   const resetDomEditSaveQueueBreaker = useCallback105(() => {
     domEditSaveQueueRef.current?.reset();
@@ -73825,20 +73871,20 @@ function usePreviewPersistence({
   );
   applyStudioManualEditsToPreviewRef.current = applyStudioManualEditsToPreview;
   const syncHistoryPreviewAfterApply = useCallback105(
-    async (restore) => {
+    async (restore2) => {
       const projectId = usePlayerStore.getState().timelineProjectId;
       const nestedFiles = await settleNestedReads(
-        projectId ? readUndoNestedFiles(
+        readUndoNestedFiles(
           previewIframeRef.current,
           activeCompPathRef.current,
-          restore.files,
-          (path) => readProjectFileContent(projectId, path)
-        ) : null
+          restore2.files,
+          (path) => projectId ? readProjectFileContent(projectId, path) : Promise.reject(new Error("No project is open to read nested files from."))
+        )
       );
       const strategy = applyUndoRestoreToPreview(
         previewIframeRef.current,
         activeCompPathRef.current,
-        restore.files,
+        restore2.files,
         usePlayerStore.getState().currentTime,
         reloadPreview,
         nestedFiles
@@ -73952,7 +73998,7 @@ function buildAtomicCutIntents(elements, splitTime, activeCompPath) {
   return [...byPath.values()].sort((a, b) => a.path.localeCompare(b.path));
 }
 async function readFileVersion(projectId, path) {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(projectId, `/files/${encodeURIComponent(path)}`)
   );
   if (!response.ok) throw new Error(`Failed to read ${path} before cut (${response.status})`);
@@ -73971,14 +74017,17 @@ async function requestAtomicCut(projectId, intents) {
   }
   const transactionToken = `cut:${crypto.randomUUID()}`;
   markStudioWriteToken(transactionToken);
-  const response = await fetch(buildProjectApiPath(projectId, "/file-mutations/split-batch"), {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "X-Hyperframes-Write-Token": transactionToken
-    },
-    body: JSON.stringify({ files, transactionToken })
-  });
+  const response = await studioApiFetch(
+    buildProjectApiPath(projectId, "/file-mutations/split-batch"),
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Hyperframes-Write-Token": transactionToken
+      },
+      body: JSON.stringify({ files, transactionToken })
+    }
+  );
   const body = await response.json().catch(() => null);
   if (!response.ok || body?.ok !== true || !Array.isArray(body.files)) {
     const prefix = response.status === 409 ? "Cut conflict" : "Cut failed";
@@ -74046,7 +74095,7 @@ function errorOf(value) {
   return typeof value.error === "string" ? value.error : null;
 }
 async function readVersion(projectId, path) {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(projectId, `/files/${encodeURIComponent(path)}`)
   );
   const body = await response.json().catch(() => null);
@@ -74060,7 +74109,7 @@ async function requestFreezeFrame(input) {
   const expectedVersion = await readVersion(input.projectId, input.path);
   const transactionToken = `freeze:${crypto.randomUUID()}`;
   markStudioWriteToken(transactionToken);
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(input.projectId, "/file-mutations/freeze-frame"),
     {
       method: "POST",
@@ -74315,7 +74364,7 @@ function resolveDropTrack(input) {
 
 // src/utils/timelineCompositionInsert.ts
 async function insertTimelineComposition(input) {
-  const current = await fetch(
+  const current = await studioApiFetch(
     buildProjectApiPath(input.projectId, `/files/${encodeURIComponent(input.targetPath)}`)
   );
   if (!current.ok) {
@@ -74323,7 +74372,7 @@ async function insertTimelineComposition(input) {
   }
   const snapshot3 = await current.json();
   if (typeof snapshot3.version !== "string") throw new Error("Missing composition file version");
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(
       input.projectId,
       `/file-mutations/insert-composition/${encodeURIComponent(input.targetPath)}`
@@ -74656,10 +74705,10 @@ function useTimelineEditRefusal(canEdit, showToast) {
   );
 }
 function useTimelineEditGate(canEdit, showToast) {
-  const refuse = useTimelineEditRefusal(canEdit, showToast);
+  const refuse2 = useTimelineEditRefusal(canEdit, showToast);
   return useCallback110(
-    (targets) => refuse(targets) === null,
-    [refuse]
+    (targets) => refuse2(targets) === null,
+    [refuse2]
   );
 }
 
@@ -75261,7 +75310,7 @@ function useTimelineDeleteOps({
                 }
                 return patchTarget;
               });
-              const removeResponse = await fetch(
+              const removeResponse = await studioApiFetch(
                 buildProjectApiPath(
                   pid,
                   `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`
@@ -75892,11 +75941,11 @@ function assertAudioGroupEditable(checkEditable, elements) {
     throw new Error("Timeline edit blocked");
   }
 }
-function patchLiveAudioGroupState(iframe, elements, groupId, activeCompPath, restore) {
+function patchLiveAudioGroupState(iframe, elements, groupId, activeCompPath, restore2) {
   for (const element of elements) {
     const target = findTimelineElementInIframe(iframe, element, activeCompPath);
     if (!target) continue;
-    const next = restore ? restore.get(element) ?? null : groupId;
+    const next = restore2 ? restore2.get(element) ?? null : groupId;
     if (next) target.setAttribute(HF_AUDIO_GROUP_ATTR5, next);
     else target.removeAttribute(HF_AUDIO_GROUP_ATTR5);
   }
@@ -76896,9 +76945,9 @@ function useTimelineEditing({
     handleTimelineGroupResize: track2(
       guard((changes) => changes.map((c) => c.element), groupEditing.handleTimelineGroupResize)
     ),
-    restoreLiveLanes: (restore) => {
-      setElementFxAttribute.restoreLive(restore);
-      setAudioGroupAttribute2.restoreLive(restore);
+    restoreLiveLanes: (restore2) => {
+      setElementFxAttribute.restoreLive(restore2);
+      setAudioGroupAttribute2.restoreLive(restore2);
     }
   };
   return useStableHandlers(editing, projectId);
@@ -76958,7 +77007,7 @@ function useAskAgentModal({
       if (!pid) return;
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       try {
-        const response = await fetch(
+        const response = await studioApiFetch(
           buildProjectApiPath(pid, `/files/${encodeURIComponent(targetPath)}`)
         );
         if (!response.ok) return;
@@ -78014,7 +78063,7 @@ async function assignGsapTargetAutoIdIfNeeded({
     showToast?.("Couldn't assign element id because the patch contains invalid values", "error");
     return false;
   }
-  const res = await fetch(
+  const res = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
@@ -78080,7 +78129,7 @@ function isAtomicElementPatchFile(value) {
 async function patchElementBatches(projectId, batches) {
   const body = JSON.stringify({ batches });
   try {
-    const response = await fetch(
+    const response = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
       {
         method: "POST",
@@ -78120,7 +78169,7 @@ function batchesAreInlineStyleOnly(batches) {
   );
 }
 async function postPatchElement(projectId, targetPath, body, showToast) {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(
       projectId,
       `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`
@@ -78418,7 +78467,13 @@ var IMAGE_BACKGROUND_FIT = [
   ["background-repeat", "no-repeat"],
   ["background-size", "contain"]
 ];
-async function commitDomStyles(context, selection, styles) {
+async function commitDomStyles(context, selection, stylesInEitherCase) {
+  const styles = Object.fromEntries(
+    Object.entries(stylesInEitherCase).map(([property, value]) => [
+      cssPropertyName(property),
+      value
+    ])
+  );
   const entries = Object.entries(styles);
   if (entries.length === 0) return domEditCommitDeclined("no-selection");
   if (entries.some(([property]) => isManualGeometryStyleProperty(property)))
@@ -78855,7 +78910,7 @@ function useDomEditTextCommits({
     persistDomEditOperations
   });
   const handleDomStyleCommitForSelection = useCallback130(
-    (selection, property, value) => commitDomStyles(
+    (selection, propertyOrStylesAsOnePatch, value = "") => commitDomStyles(
       {
         activeCompPath,
         previewIframeRef,
@@ -78866,7 +78921,7 @@ function useDomEditTextCommits({
         resync: refreshDomEditSelectionFromPreview
       },
       selection,
-      { [property]: value }
+      typeof propertyOrStylesAsOnePatch === "string" ? { [propertyOrStylesAsOnePatch]: value } : propertyOrStylesAsOnePatch
     ),
     [
       activeCompPath,
@@ -78953,24 +79008,24 @@ function useDomEditTextCommits({
         if (element.isConnected && element.innerHTML === html2) element.innerHTML = previousHtml;
       };
       if (latestReadOnlyPreviewRef.current) return putBack();
-      const refuse = (reason) => {
+      const refuse2 = (reason) => {
         console.error("[Studio] text edit not saved:", reason, element);
         showToast(`Couldn't save the text edit: ${reason}`, "error");
         putBack();
       };
       const doc = previewIframeRef.current?.contentDocument;
       if (!doc || !element.isConnected || element.ownerDocument !== doc) {
-        return refuse("the text's element is gone from the preview");
+        return refuse2("the text's element is gone from the preview");
       }
       const selection = await buildDomSelectionFromTarget(element, {
         exactTarget: true,
         skipSourceProbe: true
       });
       if (selection?.element !== element) {
-        return refuse("this text was not found in the composition's source");
+        return refuse2("this text was not found in the composition's source");
       }
       if (!canCommitInlineTextSelection(selection, element)) {
-        return refuse("this text can't be edited in place");
+        return refuse2("this text can't be edited in place");
       }
       const isLatestTextCommit = bumpDomEditCommitMapVersion(
         domTextCommitVersionRef.current,
@@ -79229,18 +79284,18 @@ var ELEMENT_OFFSET_REFUSED = {
   anchored: "This layer is anchored from its right or bottom edge. Move it in the Code tab.",
   percent: "This layer's position is set in percent. Move it in the Code tab."
 };
-function gsapOf(el) {
+function gsapOf2(el) {
   return el.ownerDocument.defaultView?.gsap;
 }
 function settleGsapDraftAtGestureStart(el) {
-  const gsap3 = gsapOf(el);
+  const gsap3 = gsapOf2(el);
   const x = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "");
   const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
   if (gsap3 && Number.isFinite(x) && Number.isFinite(y)) gsap3.set(el, { x, y });
 }
 function refuseGsapTakeover(el, showToast) {
   if (!gsapHoldsTranslate(el)) return;
-  gsapOf(el)?.set(el, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+  gsapOf2(el)?.set(el, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
   showToast(GSAP_TOOK_OVER, "error");
   throw markStudioSaveErrorAlreadyToasted(new Error(GSAP_TOOK_OVER));
 }
@@ -79331,7 +79386,7 @@ function useDomGeometryCommits({
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
   );
   const handleDomBoxSizeCommit = useCallback131(
-    (selection, next, offset, restore, undoKey) => {
+    (selection, next, offset, restore2, undoKey) => {
       if (readOnlyPreview) return Promise.resolve(void 0);
       const element = selection.element;
       const beforeSize = captureStudioBoxSize(element);
@@ -79349,7 +79404,7 @@ function useDomGeometryCommits({
         restoreStudioBoxSize(element, beforeSize);
         if (offset) restoreStudioPathOffset(element, beforeOffset);
         crop?.revert();
-        restore?.();
+        restore2?.();
         throw error;
       });
     },
@@ -79672,7 +79727,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
     writeFile: deps.writeProjectFile,
     recordEdit: deps.editHistory.recordEdit,
     rewrite: async (originalContent) => {
-      const mutateResponse = await fetch(
+      const mutateResponse = await studioApiFetch(
         buildProjectApiPath(pid, `/file-mutations/${route}/${encodeURIComponent(targetPath)}`),
         {
           method: "POST",
@@ -79749,7 +79804,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback139, useMemo as useMemo72, useRef as useRef148 } from "react";
+import { useCallback as useCallback139, useMemo as useMemo73, useRef as useRef148 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -79943,6 +79998,11 @@ function createKeyedSerializer() {
   };
 }
 
+// src/hooks/gsapScriptCommitTypes.ts
+function gsapWriteFile(selection, activeCompPath) {
+  return selection.sourceFile || activeCompPath || "index.html";
+}
+
 // src/hooks/useGsapAnimationOps.ts
 import { useCallback as useCallback134 } from "react";
 function useGsapAnimationOps({
@@ -80862,7 +80922,7 @@ function useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToa
 
 // src/hooks/useGsapScriptCommits.ts
 async function mutateGsapScript(projectId, sourceFile, mutation) {
-  const res = await fetch(
+  const res = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
@@ -80876,7 +80936,7 @@ async function mutateGsapScript(projectId, sourceFile, mutation) {
   return result;
 }
 async function mutateGsapScriptBatch(projectId, sourceFile, mutations) {
-  const res = await fetch(
+  const res = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations-batch/${encodeURIComponent(sourceFile)}`,
     {
       method: "POST",
@@ -81105,7 +81165,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     const { instantPatch: _instantPatch, ...batchOptions } = options;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
-  const commitMutation = useMemo72(() => {
+  const commitMutation = useMemo73(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
         return serializeStudioFileMutation(writeProjectFile, file, task);
@@ -81122,7 +81182,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     };
     const commit = trackedStudioEdit((selection, mutation, options) => {
       if (!activeProjectId) return Promise.resolve();
-      const file = selection.sourceFile || activeCompPath || "index.html";
+      const file = gsapWriteFile(selection, activeCompPath);
       return serializeCommit(
         file,
         options.serializeKey,
@@ -81131,7 +81191,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     });
     commit.batch = trackedStudioEdit((calls, options) => {
       if (!activeProjectId) return Promise.resolve();
-      const file = calls[0]?.selection.sourceFile || activeCompPath || "index.html";
+      const file = calls[0] ? gsapWriteFile(calls[0].selection, activeCompPath) : "index.html";
       return serializeCommit(
         file,
         options.serializeKey,
@@ -81170,7 +81230,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [activeProjectId]
   );
-  const sdkDeps = useMemo72(
+  const sdkDeps = useMemo73(
     () => writeProjectFile ? {
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
@@ -81363,13 +81423,13 @@ function useGsapAnimationFetchFallback(projectId) {
 
 // src/hooks/useGsapInteractionFailureTelemetry.ts
 import { useCallback as useCallback141 } from "react";
-function failureToast(error) {
-  if (wasAlreadyToasted(error)) return null;
+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) => {
+    (error, selection, mutationType, label, toast) => {
       const report = isGsapEditBlockedError(error) ? trackStudioEditBlocked : trackStudioSaveFailure;
       report({
         source: "gsap_commit",
@@ -81381,7 +81441,7 @@ function useGsapInteractionFailureTelemetry(activeCompPath, showToast) {
         targetSelector: selection?.selector,
         targetSourceFile: selection?.sourceFile
       });
-      const message = failureToast(error);
+      const message = failureToast(error, toast !== false);
       if (message) showToast(message, "error");
     },
     [activeCompPath, showToast]
@@ -81835,17 +81895,29 @@ function useDomEditWiring(params) {
 
 // src/hooks/useGsapAwareGroupMove.ts
 import { useCallback as useCallback144 } from "react";
-var groupDragCommitCounter = 0;
-function firstPreflightFailure(results, updates) {
+
+// src/hooks/gsapGroupPreflight.ts
+function firstPreflightFailure(results, updates, savedOnElement, activeCompPath) {
   for (const [index, result] of results.entries()) {
     if (result.status !== "rejected") continue;
     const selection = updates[index]?.selection;
     if (selection) return { error: result.reason, selection };
   }
-  return null;
+  return secondFile(updates, savedOnElement, activeCompPath);
+}
+function secondFile(updates, savedOnElement, activeCompPath) {
+  const scripted = updates.filter(({ selection }) => !savedOnElement.has(selection));
+  const fileOf = (s) => gsapWriteFile(s, activeCompPath);
+  const file = scripted[0] && fileOf(scripted[0].selection);
+  const other = scripted.find(({ selection }) => fileOf(selection) !== file);
+  return other ? { error: new GsapEditBlockedError("mixed-files"), selection: other.selection } : null;
 }
+
+// src/hooks/useGsapAwareGroupMove.ts
+var groupDragCommitCounter = 0;
 function useGsapAwareGroupMove({
   gsapCommitMutation,
+  activeCompPath,
   previewIframeRef,
   makeFetchFallback,
   trackGsapInteractionFailure,
@@ -81853,15 +81925,16 @@ function useGsapAwareGroupMove({
   showToast
 }) {
   const handleGsapAwareGroupPathOffsetCommit = useCallback144(
-    async (updates) => {
+    async (updates, options = {}) => {
       const writes = observeGsapGesture(gsapCommitMutation);
       const writer = writes.commit;
       if (!writer) return { ok: true, changed: false };
+      const toastRefusal = options.refusalToast !== false;
       const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
       let renderOnCommit = false;
       const previewFallbackLatch = { pending: false };
-      const withGroupOptions = (options) => ({
-        ...options,
+      const withGroupOptions = (options2) => ({
+        ...options2,
         coalesceKey,
         coalesceMs: Number.POSITIVE_INFINITY,
         deferPreviewSync: !renderOnCommit,
@@ -81882,23 +81955,24 @@ function useGsapAwareGroupMove({
           label: "Move animated layer (group)"
         });
       };
-      const coalescedCommit = (selection, mutation, options) => {
-        queued.push({ selection, mutation, options: withGroupOptions(options) });
+      const coalescedCommit = (selection, mutation, options2) => {
+        queued.push({ selection, mutation, options: withGroupOptions(options2) });
         return Promise.resolve();
       };
       const preflightAnimations = /* @__PURE__ */ new Map();
       const offsetMembers = /* @__PURE__ */ new Map();
       const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection, plainTranslate }) => {
+        updates.map(async ({ selection, next, plainTranslate }) => {
           if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
-            refuseGsapTakeover(selection.element, showToast);
+            refuseGsapTakeover(selection.element, toastRefusal ? showToast : () => {
+            });
             return void offsetMembers.set(selection, true);
           }
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
             selection,
-            { x: 0, y: 0 },
+            next,
             animations,
             previewIframeRef.current,
             coalescedCommit,
@@ -81909,13 +81983,19 @@ function useGsapAwareGroupMove({
           assertGsapEditPersisted(outcome);
         })
       );
-      const preflightFailure = firstPreflightFailure(preflightResults, updates);
+      const preflightFailure = firstPreflightFailure(
+        preflightResults,
+        updates,
+        offsetMembers,
+        activeCompPath
+      );
       if (preflightFailure) {
         trackGsapInteractionFailure(
           preflightFailure.error,
           preflightFailure.selection,
           "drag",
-          "Move animated layer (group)"
+          "Move animated layer (group)",
+          toastRefusal
         );
         throw preflightFailure.error;
       }
@@ -81967,6 +82047,7 @@ function useGsapAwareGroupMove({
     },
     [
       gsapCommitMutation,
+      activeCompPath,
       previewIframeRef,
       makeFetchFallback,
       trackGsapInteractionFailure,
@@ -81980,23 +82061,6 @@ function useGsapAwareGroupMove({
 // src/hooks/useGsapAwareEditing.ts
 import { useCallback as useCallback146 } from "react";
 
-// src/utils/elementGsap.ts
-function gsapOf2(element) {
-  return element.ownerDocument.defaultView?.gsap;
-}
-function setElementGsapPosition(element, x, y) {
-  const gsap3 = gsapOf2(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { x, y });
-  return true;
-}
-function setElementGsapScale(element, x, y) {
-  const gsap3 = gsapOf2(element);
-  if (!gsap3?.set) return false;
-  gsap3.set(element, { scaleX: x, scaleY: y });
-  return true;
-}
-
 // src/hooks/gsapResizePreflight.ts
 function resizeRoute(animations, fetchedAnimations) {
   const allKnownAnimations = [...animations, ...fetchedAnimations];
@@ -82028,16 +82092,8 @@ function preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnim
 }
 
 // src/hooks/gsapResizeIntercept.ts
-var IDENTITY_ONE_PROPS = /* @__PURE__ */ new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
 var SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
-function synthesizeIdentityProps(source) {
-  const id = {};
-  for (const [k, v] of Object.entries(source)) {
-    if (typeof v === "number") id[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-    else id[k] = v;
-  }
-  return id;
-}
+var POSITION_XY = /* @__PURE__ */ new Set(["x", "y"]);
 function originalBoxSize(el, measuredAttr, inlineProperty) {
   const measured = Number.parseFloat(el?.getAttribute(measuredAttr) ?? "");
   if (Number.isFinite(measured) && measured > 0) return measured;
@@ -82046,6 +82102,36 @@ function originalBoxSize(el, measuredAttr, inlineProperty) {
   );
   return Number.isFinite(inline) && inline > 0 ? inline : null;
 }
+function preGestureBoxSize(el) {
+  const width = originalBoxSize(el, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, "width");
+  const height = originalBoxSize(el, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, "height");
+  return { ...width != null && { width }, ...height != null && { height } };
+}
+async function commitSizeAtPlayhead(selection, anim, size, iframe, dragOffset, callbacks) {
+  const selector = selectorFromSelection(selection);
+  const moves = !!dragOffset && (dragOffset.x !== 0 || dragOffset.y !== 0) && !!selector;
+  const anchor2 = moves && animationWritesAnyProperty(anim, POSITION_XY) ? computeDraggedGsapPosition(
+    selection.element,
+    dragOffset,
+    readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 }
+  ) : null;
+  const written = await commitValueAtPlayhead(
+    selection,
+    anim,
+    anchor2 ? { ...size, x: anchor2.newX, y: anchor2.newY } : size,
+    iframe,
+    callbacks,
+    {
+      label: "Resize",
+      backfill: {
+        ...preGestureBoxSize(selection.element),
+        ...anchor2 && { x: anchor2.baseGsapX, y: anchor2.baseGsapY }
+      },
+      ...anchor2 && { beforeReload: () => restoreDragOffset(selection.element) }
+    }
+  );
+  return written.status === "persisted" && anchor2 ? { ...written, ownsDragOffset: true } : written;
+}
 function tweenUsesScaleLonghands(anim) {
   const isLonghand = (name) => name === "scaleX" || name === "scaleY";
   const inKeyframes = (anim?.keyframes?.keyframes ?? []).some(
@@ -82053,7 +82139,7 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
-async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations) {
+async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
@@ -82069,7 +82155,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     commitMutation,
     postSplitFetch
   );
-  let anim = resolved2?.anim && animationWritesAnyProperty(resolved2.anim, resizeProperties) ? resolved2.anim : null;
+  const anim = resolved2?.anim && animationWritesAnyProperty(resolved2.anim, resizeProperties) ? resolved2.anim : null;
   logResize("intercept-enter", {
     hasScaleGroup: resizeGroup === "scale",
     resizeGroup,
@@ -82093,15 +82179,11 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
-        const handled = await commitKeyframedSizeFromResize(
-          selection,
-          size,
-          sel,
-          sizeSet,
-          animatedTween,
-          { commitMutation, fetchAnimations: fetchFallbackAnimations }
-        );
-        if (handled) return { status: "persisted" };
+        const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
+        return commitSizeAtPlayhead(selection, animatedTween, sized, iframe, dragOffset, {
+          commitMutation,
+          fetchAnimations: fetchFallbackAnimations
+        });
       }
     }
     logResize("intercept-route", { route: "static-size-set", hadSizeSet: !!sizeSet, resizeGroup });
@@ -82117,10 +82199,9 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   }
   const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
   const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
-  if (activeKeyframePct != null) setActiveKeyframePct(null);
   const selector = selectorFromSelection(selection);
-  const runtimeProps = selector ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup) : {};
   let resizeProps;
+  let resizeBackfill;
   let scaleDraftEl = null;
   let scaleDraftDropPoint = null;
   let committedScale = null;
@@ -82140,6 +82221,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     nonUniformScale = uniformDrift > 0.5;
     useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
     resizeProps = useScaleLonghands ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    resizeBackfill = { scaleX: liveScaleX, scaleY: liveScaleY };
     logResize("intercept-route", {
       route: "scale-tween",
       cssW,
@@ -82161,6 +82243,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       width: roundToLayoutPx(size.width),
       height: roundToLayoutPx(size.height)
     };
+    resizeBackfill = preGestureBoxSize(selection.element);
   }
   const finalizeScaleResizeCommit = async () => {
     if (!scaleDraftEl) return false;
@@ -82206,10 +82289,12 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     );
     if (positionTween) {
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
-      await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, selector, {
-        commitMutation,
-        fetchAnimations: fetchFallbackAnimations
-      });
+      assertGsapEditPersisted(
+        await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, {
+          commitMutation,
+          fetchAnimations: fetchFallbackAnimations
+        })
+      );
       return true;
     }
     const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
@@ -82232,102 +82317,14 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     );
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
-  const ct = usePlayerStore.getState().currentTime;
-  const ts = resolveTweenStart(anim);
-  const td = tweenDuration;
-  const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
-  if (!outsideRange) {
-    if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
-      const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
-      if (newId) anim = { ...anim, id: newId };
-    } else if (!anim.keyframes) {
-      const resolvedFromValues = selector ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup) : void 0;
-      await commitMutation(
-        selection,
-        { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
-        { label: "Convert to keyframes for resize" }
-      );
-      if (fetchFallbackAnimations) {
-        const fresh = await fetchFallbackAnimations();
-        const refreshed = fresh.find(
-          (a) => a.targetSelector === anim.targetSelector && a.keyframes
-        );
-        if (refreshed) anim = refreshed;
-      }
-    }
-  }
-  if ((outsideRange || useScaleLonghands) && ts !== null) {
-    const kfs = anim.keyframes?.keyframes ?? (() => {
-      const fromProps = anim.method === "from" || anim.method === "fromTo" ? { ...anim.properties } : synthesizeIdentityProps(anim.properties);
-      const toProps = anim.method === "from" ? synthesizeIdentityProps(anim.properties) : { ...anim.properties };
-      return [
-        { percentage: 0, properties: fromProps },
-        { percentage: 100, properties: toProps }
-      ];
-    })();
-    const newStart = Math.min(ct, ts);
-    const newEnd = Math.max(ct, ts + td);
-    const newDuration = Math.max(0.01, newEnd - newStart);
-    const existingKfs = kfs;
-    const remapped = [];
-    for (const kf of existingKfs) {
-      const absTime = ts + kf.percentage / 100 * td;
-      const newPct = Math.round((absTime - newStart) / newDuration * 1e3) / 10;
-      const props = { ...kf.properties };
-      if (nonUniformScale && "scale" in props) {
-        const uniform = props.scale;
-        if (typeof uniform === "number") {
-          props.scaleX = uniform;
-          props.scaleY = uniform;
-        }
-        delete props.scale;
-      }
-      for (const k of Object.keys(resizeProps)) {
-        if (k in props) continue;
-        if (k === "width" || k === "height") continue;
-        props[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-      }
-      remapped.push({ percentage: newPct, properties: props });
-    }
-    const targetPct = Math.round((ct - newStart) / newDuration * 1e3) / 10;
-    const collidingKf = remapped.find((kf) => Math.abs(kf.percentage - targetPct) < 0.05);
-    if (collidingKf) Object.assign(collidingKf.properties, resizeProps);
-    else remapped.push({ percentage: targetPct, properties: resizeProps });
-    remapped.sort((a, b) => a.percentage - b.percentage);
-    await commitMutation(
-      selection,
-      {
-        type: "replace-with-keyframes",
-        animationId: anim.id,
-        targetSelector: anim.targetSelector,
-        position: roundTo3(newStart),
-        duration: roundTo3(newDuration),
-        keyframes: remapped
-      },
-      {
-        label: outsideRange ? `Resize (extended to ${ct.toFixed(2)}s)` : `Resize (keyframe ${Math.round((ct - newStart) / newDuration * 1e3) / 10}%)`,
-        softReload: true,
-        ...!collidingKf ? { keyframeAction: "add" } : {}
-      }
-    );
-    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
-  }
-  const backfillDefaults = {};
-  for (const k of Object.keys(runtimeProps)) {
-    if (SIZE_PROPS.has(k)) continue;
-    backfillDefaults[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-  }
-  await commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties: resizeProps,
-      backfillDefaults
-    },
-    { label: `Resize (keyframe ${pct}%)`, softReload: true }
-  );
+  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations };
+  if (resizeGroup === "size")
+    return commitSizeAtPlayhead(selection, anim, resizeProps, iframe, dragOffset, callbacks);
+  const written = await commitValueAtPlayhead(selection, anim, resizeProps, iframe, callbacks, {
+    label: "Resize",
+    backfill: resizeBackfill
+  });
+  if (written.status !== "persisted") return written;
   return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
 }
 
@@ -82690,6 +82687,7 @@ function useGsapAwareEditing({
   domEditSelection,
   selectedGsapAnimations,
   gsapCommitMutation,
+  activeCompPath,
   previewIframeRef,
   showToast,
   bumpGsapCache,
@@ -82753,6 +82751,7 @@ function useGsapAwareEditing({
   );
   const handleGsapAwareGroupPathOffsetCommit = useGsapAwareGroupMove({
     gsapCommitMutation,
+    activeCompPath,
     previewIframeRef,
     makeFetchFallback,
     trackGsapInteractionFailure,
@@ -82760,10 +82759,10 @@ function useGsapAwareEditing({
     showToast
   });
   const handleGsapAwareBoxSizeCommit = useCallback146(
-    async (selection, next, offset, restore = () => void 0) => {
+    async (selection, next, offset, restore2 = () => void 0) => {
       const writes = observeGsapGesture(gsapCommitMutation);
       if (!gsapWritesBox(selection.element)) {
-        const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
+        const result = await handleDomBoxSizeCommit(selection, next, offset, restore2);
         return writes.finish(result?.changed === true);
       }
       let targetAnimations;
@@ -82771,7 +82770,7 @@ function useGsapAwareEditing({
         const ownedAnimations = getGsapAnimationsForSelection(selection);
         targetAnimations = Array.isArray(ownedAnimations) ? ownedAnimations : await ownedAnimations;
       } catch (error) {
-        restore();
+        restore2();
         trackGsapInteractionFailure(error, selection, "resize", "Resize animated layer");
         throw error;
       }
@@ -82832,7 +82831,8 @@ function useGsapAwareEditing({
                 targetAnimations,
                 previewIframeRef.current,
                 commitMutation2,
-                makeFetchFallback(selection)
+                makeFetchFallback(selection),
+                offset
               );
               assertGsapEditPersisted(outcome);
               if (outcome.status === "element-size") {
@@ -82876,7 +82876,7 @@ function useGsapAwareEditing({
         },
         restore: () => {
           anchorMove?.rollback();
-          restore();
+          restore2();
         },
         skipPixelAssert: hasLivePositionTween
       });
@@ -83089,7 +83089,7 @@ function reportSelectionPublishError(error) {
   console.warn("[Studio] Failed to update agent selection context", error);
 }
 function putSelection(projectId, selection, signal) {
-  return fetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
+  return studioApiFetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ selection }),
@@ -83205,7 +83205,7 @@ function useKeyframeEaseCommits({
 }
 
 // src/hooks/useCommitPreflightCapabilities.ts
-import { useEffect as useEffect122, useMemo as useMemo73, useRef as useRef153, useState as useState119 } from "react";
+import { useEffect as useEffect122, useMemo as useMemo74, useRef as useRef153, useState as useState119 } from "react";
 function runCommitPreflights(selection, fileAnimations, iframe, group) {
   const target = { id: selection.id ?? null, selector: selection.selector ?? null };
   const animations = getAnimationsForElement(fileAnimations, target, selection.element);
@@ -83274,7 +83274,7 @@ function useCommitPreflightCapabilities({
       });
     }
   }, [enabled, projectId, selection, groupSelections, version]);
-  return useMemo73(() => {
+  return useMemo74(() => {
     void parseTick;
     if (!enabled || !projectId) return { selection, groupSelections };
     const group = groupSelections.length > 1;
@@ -83322,6 +83322,70 @@ function useLivePreviewIframe2(host) {
   return live;
 }
 
+// src/components/editor/domGroupMoveBy.ts
+function toScreen(doc, delta) {
+  const origin2 = toTopScreenPoint(doc, { x: 0, y: 0 });
+  const moved = toTopScreenPoint(doc, delta);
+  if (!origin2 || !moved) throw new Error("The preview has no measurable size.");
+  return { x: moved.x - origin2.x, y: moved.y - origin2.y };
+}
+function memberFor(selection, scale) {
+  const { element } = selection;
+  const box = element.getBoundingClientRect();
+  const result = createManualOffsetDragMember({
+    key: selection.id ?? selection.selector ?? selection.label,
+    selection,
+    element,
+    rect: {
+      left: box.left,
+      top: box.top,
+      width: box.width,
+      height: box.height,
+      editScaleX: scale.x,
+      editScaleY: scale.y
+    },
+    gesture: "drag"
+  });
+  if (!result.ok) throw new Error(result.reason);
+  return result.member;
+}
+async function moveDomGroupBy(moves, commitGroup) {
+  const moving = moves.filter(({ delta }) => delta.x !== 0 || delta.y !== 0);
+  if (moving.length === 0) return;
+  const selections = moving.map(({ selection }) => selection);
+  if (!canCanvasNudgeTargets(selections)) {
+    const blocked = selections.find((s) => !s.capabilities.canApplyManualOffset);
+    throw new Error(blocked?.capabilities.reasonIfDisabled ?? `${blocked?.label} can't be moved.`);
+  }
+  const screens = moving.map(
+    ({ selection, delta }) => toScreen(selection.element.ownerDocument, delta)
+  );
+  const members = [];
+  try {
+    for (const selection of selections)
+      members.push(memberFor(selection, toScreen(selection.element.ownerDocument, { x: 1, y: 1 })));
+  } catch (error) {
+    restoreManualOffsetDragMembers(members);
+    throw error;
+  }
+  const updates = members.map((member, index) => ({
+    selection: member.selection,
+    next: applyManualOffsetDragCommit(member, screens[index].x, screens[index].y),
+    plainTranslate: member.plainTranslate
+  }));
+  try {
+    await countStudioManualEditSave(members[0].element, () => commitGroup(updates));
+  } catch (error) {
+    for (const member of members) {
+      if (isStudioManualEditGestureCurrent(member.element, member.gestureToken))
+        restoreStudioPathOffset(member.element, member.initialPathOffset);
+    }
+    throw error;
+  } finally {
+    endManualOffsetDragMembers(members);
+  }
+}
+
 // src/hooks/useDomEditSession.ts
 function useDomEditSession({
   projectId,
@@ -83674,6 +83738,7 @@ function useDomEditSession({
     domEditSelection,
     selectedGsapAnimations,
     gsapCommitMutation,
+    activeCompPath,
     previewIframeRef,
     showToast,
     bumpGsapCache,
@@ -83688,6 +83753,13 @@ function useDomEditSession({
     setArcPath,
     updateArcSegment
   });
+  const handleDomGroupMoveBy = useCallback148(
+    (moves) => moveDomGroupBy(
+      moves,
+      (updates) => handleGsapAwareGroupPathOffsetCommit(updates, { refusalToast: false })
+    ),
+    [handleGsapAwareGroupPathOffsetCommit]
+  );
   const { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases } = useKeyframeEaseCommits({ gsapCommitMutation, domEditSelectionRef });
   const committable = useCommitPreflightCapabilities({
     projectId,
@@ -83725,6 +83797,7 @@ function useDomEditSession({
     handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
+    handleDomGroupMoveBy,
     handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit: handleGsapAwareBoxSizeCommit,
     handleDomRotationCommit: handleGsapAwareRotationCommit,
@@ -83873,7 +83946,7 @@ async function readProjectFileOptional(projectId, path) {
   let res;
   const fetchStarted = performance.now();
   try {
-    res = await fetch(
+    res = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`
     );
   } catch {
@@ -84458,8 +84531,10 @@ function useExternalFileChangeCoordinator({
     },
     [projectId, pendingTimelineEditPathRef, startDrainLoop, onAcceptedPersistedFileChange]
   );
+  const processChangeRef = useRef156(processChange);
+  processChangeRef.current = processChange;
   useEffect127(() => {
-    const handler = (delivery) => processChange(decodeFileChange(delivery));
+    const handler = (delivery) => processChangeRef.current(decodeFileChange(delivery));
     const adapter = testHotAdapter();
     if (adapter) {
       adapter.on("hf:file-change", handler);
@@ -84470,7 +84545,7 @@ function useExternalFileChangeCoordinator({
       return () => import.meta.hot?.off?.("hf:file-change", handler);
     }
     return sseFileChangeChannel(handler);
-  }, [processChange]);
+  }, []);
   const retry = useCallback150(async () => {
     const current = blockedRef.current;
     if (!current || current.status === "conflict" || current.recovered) return;
@@ -84617,7 +84692,7 @@ function useStudioExternalFileChanges({
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback152, useMemo as useMemo74, useRef as useRef157, useState as useState123 } from "react";
+import { useCallback as useCallback152, useMemo as useMemo75, useRef as useRef157, useState as useState123 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -84646,7 +84721,7 @@ async function installRegistryItem({
   blockName,
   showToast
 }) {
-  const response = await fetch(buildProjectApiPath(projectId, `/registry/install`), {
+  const response = await studioApiFetch(buildProjectApiPath(projectId, `/registry/install`), {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ blockName })
@@ -84811,7 +84886,7 @@ function useBlockHandlers({
   setRightPanelTab
 }) {
   const [activeBlockParams, setActiveBlockParams] = useState123(null);
-  const blockCtx = useMemo74(
+  const blockCtx = useMemo75(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
       timelineElements: blockCtxDeps.timelineElements,
@@ -85178,7 +85253,7 @@ function dispatchPlainKey(event, key2, cb) {
 }
 
 // src/hooks/useEditHistoryActions.ts
-import { useCallback as useCallback153, useMemo as useMemo75 } from "react";
+import { useCallback as useCallback153, useMemo as useMemo76 } from "react";
 function useEditHistoryActions({
   editHistory,
   readOptionalProjectFile,
@@ -85205,20 +85280,25 @@ function useEditHistoryActions({
       const noun = direction === "undo" ? "Undo" : "Redo";
       const predicted = editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
-      const pendingEditShown = !predictedShown && direction === "undo" ? revertNewestStudioPendingEdit() : null;
-      const putBack = predictedShown ?? pendingEditShown;
+      const pendingEditShown = !predictedShown && direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
+      const putBack = predictedShown ?? pendingEditShown?.showAgain;
+      const claimedAfter = direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : void 0;
       let result = { ok: false, reason: "failed" };
       let serverSteppedShown = false;
+      let revertIsTheUndo = false;
       try {
         await waitForPendingDomEditSaves();
+        revertIsTheUndo = Boolean(pendingEditShown && !await pendingEditShown.landed());
+        if (revertIsTheUndo) return;
         result = await editHistory[direction]({
           readFile: readHistoryFile,
-          serialize: serializeHistoryFiles
+          serialize: serializeHistoryFiles,
+          claimedAfter
         });
         const stepped = Boolean(result.ok && result.label);
         serverSteppedShown = predictedShown ? stepped && result.undoes === predicted?.id : stepped && Boolean(pendingEditShown);
       } finally {
-        if (putBack && !serverSteppedShown) putBack();
+        if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
       }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
@@ -85233,12 +85313,12 @@ function useEditHistoryActions({
       }
       if (result.ok && result.label) {
         const files = serverSteppedShown && predictedShown ? fromShown(result.files, predicted.files) : result.files;
-        const restore = { paths: result.paths, files };
-        onAfterUndoRedo?.(restore);
+        const restore2 = { paths: result.paths, files };
+        onAfterUndoRedo?.(restore2);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
         }
-        await syncHistoryPreviewAfterApply(restore);
+        await syncHistoryPreviewAfterApply(restore2);
         showToast(result.label, "info");
       }
     },
@@ -85257,7 +85337,7 @@ function useEditHistoryActions({
   );
   const undo = useCallback153(() => apply("undo"), [apply]);
   const redo = useCallback153(() => apply("redo"), [apply]);
-  return useMemo75(() => ({ undo, redo }), [undo, redo]);
+  return useMemo76(() => ({ undo, redo }), [undo, redo]);
 }
 function fromShown(files, shown2) {
   if (!files) return files;
@@ -86252,7 +86332,7 @@ function useCaptionDetection({
       if (!captionSrcPath) return;
       activating = true;
       const srcPath = captionSrcPath;
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`)).then((r) => r.json()).then((data) => {
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`)).then((r) => r.json()).then((data) => {
         if (!data.content || !doc || !win || useCaptionStore.getState().isEditMode) return;
         const root = doc.querySelector("[data-composition-id]");
         const w = parseInt(root?.getAttribute("data-width") ?? "1920", 10);
@@ -86365,7 +86445,7 @@ function useConsoleErrorCapture(previewIframe) {
 }
 
 // src/hooks/useFrameCapture.ts
-import { useMemo as useMemo76, useState as useState125, useCallback as useCallback157, useRef as useRef162 } from "react";
+import { useMemo as useMemo77, useState as useState125, useCallback as useCallback157, useRef as useRef162 } from "react";
 function useFrameCapture({
   projectId,
   activeCompPath,
@@ -86417,7 +86497,10 @@ function useFrameCapture({
         const controller = new AbortController();
         const timeout = setTimeout(() => controller.abort(), 3e4);
         try {
-          const response = await fetch(href, { cache: "no-store", signal: controller.signal });
+          const response = await studioApiFetch(href, {
+            cache: "no-store",
+            signal: controller.signal
+          });
           clearTimeout(timeout);
           if (!response.ok) {
             let msg = `Capture failed (${response.status})`;
@@ -86453,7 +86536,7 @@ function useFrameCapture({
     },
     [activeCompPath, playheadTime, projectId, showToast, waitForPendingDomEditSaves]
   );
-  const captureFrameHref = useMemo76(
+  const captureFrameHref = useMemo77(
     () => projectId ? buildFrameCaptureUrl({
       projectId,
       compositionPath: activeCompPath,
@@ -86473,7 +86556,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState126, useCallback as useCallback158, useEffect as useEffect131, useRef as useRef163, useMemo as useMemo77 } from "react";
+import { useState as useState126, useCallback as useCallback158, useEffect as useEffect131, useRef as useRef163, useMemo as useMemo78 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -86484,7 +86567,7 @@ function parseFinding(f) {
   };
 }
 async function fetchLintFindings(projectId) {
-  const res = await fetch(buildProjectApiPath(projectId, `/lint`));
+  const res = await studioApiFetch(buildProjectApiPath(projectId, `/lint`));
   const data = await res.json();
   return (data.findings ?? []).map(parseFinding);
 }
@@ -86546,8 +86629,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [backgroundFindings]
   );
-  const findingsByElement = useMemo77(() => groupFindings((f) => f.elementId), [groupFindings]);
-  const findingsByFile = useMemo77(() => groupFindings((f) => f.file), [groupFindings]);
+  const findingsByElement = useMemo78(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo78(() => groupFindings((f) => f.file), [groupFindings]);
   const badgeFindings = lintModal ?? backgroundFindings;
   const lintFindingCount = badgeFindings.length;
   const hasLintError = badgeFindings.some((f) => f.severity === "error");
@@ -87012,16 +87095,16 @@ function useStudioUrlState({
 }
 
 // src/hooks/useEffectiveTimelineDuration.ts
-import { useMemo as useMemo78 } from "react";
+import { useMemo as useMemo79 } from "react";
 function useEffectiveTimelineDuration(timelineDuration2, timelineElements) {
-  return useMemo78(
+  return useMemo79(
     () => getEffectiveTimelineDuration(timelineDuration2, timelineElements),
     [timelineDuration2, timelineElements]
   );
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback161, useMemo as useMemo79 } from "react";
+import { useCallback as useCallback161, useMemo as useMemo80 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -87049,7 +87132,7 @@ function buildStudioContextValue(input) {
   };
 }
 function useInspectorState(rightPanel, isPlaying, domEditSelection, isGestureRecording) {
-  return useMemo79(() => {
+  return useMemo80(() => {
     const inspectorPanelActive = rightPanel === "layers" || rightPanel === "design";
     return {
       inspectorPanelActive,
@@ -87095,7 +87178,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 import { memo as memo44, useContext as useContext15 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
-import { useContext as useContext14, useMemo as useMemo80 } from "react";
+import { useContext as useContext14, useMemo as useMemo81 } from "react";
 import { jsx as jsx199 } from "react/jsx-runtime";
 var PanelLayoutContext = createStableContext("PanelLayoutContext", null);
 function usePanelLayoutContext() {
@@ -87107,7 +87190,7 @@ function PanelLayoutProvider({
   value: { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab },
   children
 }) {
-  const stable = useMemo80(
+  const stable = useMemo81(
     () => ({ rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab }),
     [rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab]
   );
@@ -88179,7 +88262,7 @@ function useGestureCommit({
 import { useLayoutEffect as useLayoutEffect13, useRef as useRef168 } from "react";
 
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo45, useMemo as useMemo81 } from "react";
+import { memo as memo45, useMemo as useMemo82 } from "react";
 import { Fragment as Fragment57, jsx as jsx203, jsxs as jsxs162 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo45(function GestureTrailOverlay2({
   samples,
@@ -88191,7 +88274,7 @@ var GestureTrailOverlay = memo45(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo81(() => {
+  const trailPoints = useMemo82(() => {
     if (!canvasRect) return "";
     if (trail2 && trail2.length > 1) {
       return trail2.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -88199,7 +88282,7 @@ var GestureTrailOverlay = memo45(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail2, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo81(() => {
+  const simplifiedPath = useMemo82(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -88211,7 +88294,7 @@ var GestureTrailOverlay = memo45(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo81(() => {
+  const diamondPositions = useMemo82(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -88319,7 +88402,7 @@ function useGestureTrailOverlay({
 }
 
 // src/hooks/useStudioSidePanels.tsx
-import { useMemo as useMemo87 } from "react";
+import { useMemo as useMemo88 } from "react";
 
 // src/components/StudioLeftPanels.tsx
 import { memo as memo49, useCallback as useCallback171 } from "react";
@@ -88441,7 +88524,7 @@ function MediaPreview({ projectId, filePath }) {
 }
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo46, useState as useState137, useCallback as useCallback167, useRef as useRef172, useMemo as useMemo83, useEffect as useEffect140 } from "react";
+import { memo as memo46, useState as useState137, useCallback as useCallback167, useRef as useRef172, useMemo as useMemo84, useEffect as useEffect140 } from "react";
 
 // src/components/ui/SearchInput.tsx
 import { jsx as jsx206, jsxs as jsxs164 } from "react/jsx-runtime";
@@ -89053,7 +89136,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect137, useMemo as useMemo82, useState as useState134 } from "react";
+import { useEffect as useEffect137, useMemo as useMemo83, useState as useState134 } from "react";
 import { jsx as jsx209, jsxs as jsxs167 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -89071,7 +89154,7 @@ function GlobalAssetsView({ searchQuery }) {
   const [records, setRecords] = useState134(null);
   useEffect137(() => {
     let cancelled = false;
-    fetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
+    studioApiFetch("/api/assets/global").then((r) => r.ok ? r.json() : { assets: [] }).then((d) => {
       if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);
     }).catch(() => {
       if (!cancelled) setRecords([]);
@@ -89080,7 +89163,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo82(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo83(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx209("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -89592,7 +89675,7 @@ var AssetsTab = memo46(function AssetsTab2({
   useEffect140(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
-    fetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`)).then((r) => {
+    studioApiFetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`)).then((r) => {
       if (!r.ok) {
         manifest404Ref.current.add(projectId);
         return "";
@@ -89642,12 +89725,12 @@ var AssetsTab = memo46(function AssetsTab2({
     setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3e3);
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo83(() => deriveUsedPaths(elements), [elements]);
-  const allMediaAssets = useMemo83(
+  const usedPaths = useMemo84(() => deriveUsedPaths(elements), [elements]);
+  const allMediaAssets = useMemo84(
     () => assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
     [assets]
   );
-  const mediaAssets = useMemo83(() => {
+  const mediaAssets = useMemo84(() => {
     const all = filterByUsage(allMediaAssets, usedPaths, usageFilter);
     if (!searchQuery) return all;
     const q = searchQuery.toLowerCase();
@@ -89657,7 +89740,7 @@ var AssetsTab = memo46(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [allMediaAssets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo83(() => {
+  const categorized = useMemo84(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -89672,12 +89755,12 @@ var AssetsTab = memo46(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo83(() => {
+  const counts = useMemo84(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo83(
+  const usageCounts = useMemo84(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -90337,7 +90420,7 @@ function BlockCard({
 }
 
 // src/components/sidebar/CompositionsTab.tsx
-import { memo as memo48, useCallback as useCallback170, useEffect as useEffect143, useLayoutEffect as useLayoutEffect15, useMemo as useMemo84, useRef as useRef175, useState as useState140 } from "react";
+import { memo as memo48, useCallback as useCallback170, useEffect as useEffect143, useLayoutEffect as useLayoutEffect15, useMemo as useMemo85, useRef as useRef175, useState as useState140 } from "react";
 import { jsx as jsx215, jsxs as jsxs172 } from "react/jsx-runtime";
 var DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 var CARD_W = 80;
@@ -90479,7 +90562,7 @@ function CompCard({
   const thumbnailUrl2 = compositionCardThumbnailUrl(projectId, comp, contentRevision);
   const [thumbnailBox, nearViewport] = useNearViewport();
   const timelineSessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
-  const thumbnailRequest = useMemo84(
+  const thumbnailRequest = useMemo85(
     () => previewBooted && nearViewport ? compositionThumbnailRequest(thumbnailUrl2, projectId, {
       sessionEpoch: timelineSessionEpoch,
       rich: true
@@ -94102,7 +94185,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo58, useCallback as useCallback183, useEffect as useEffect151, useMemo as useMemo85, useState as useState154 } from "react";
+import { memo as memo58, useCallback as useCallback183, useEffect as useEffect151, useMemo as useMemo86, useState as useState154 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback180 } from "react";
@@ -94798,22 +94881,22 @@ var VariablesPanel = memo58(function VariablesPanel2({
     reloadPreview,
     publishSdkSession
   });
-  const declarations = useMemo85(
+  const declarations = useMemo86(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo85(
+  const usage = useMemo86(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo85(
+  const issues = useMemo86(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo85(
+  const effectiveValues = useMemo86(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -95128,15 +95211,15 @@ function useSlideshowPersist({
 }
 
 // src/hooks/useSlideshowTabState.ts
-import { useMemo as useMemo86 } from "react";
+import { useMemo as useMemo87 } from "react";
 import { SLIDESHOW_ISLAND_TYPE as SLIDESHOW_ISLAND_TYPE2, slideshowIslandRegex as slideshowIslandRegex2 } from "@hyperframes/core/slideshow";
 function useSlideshowTabState(params) {
   const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
-  const isSlideshowComposition = useMemo86(() => {
+  const isSlideshowComposition = useMemo87(() => {
     if (!editingFileContent || !editingFileContent.includes(SLIDESHOW_ISLAND_TYPE2)) return false;
     return slideshowIslandRegex2("i").test(editingFileContent);
   }, [editingFileContent]);
-  const slideshowScenes = useMemo86(() => {
+  const slideshowScenes = useMemo87(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -95313,7 +95396,7 @@ function useRemoveBackground(projectId, refreshFileTree, showToast) {
   return useCallback186(
     // fallow-ignore-next-line complexity
     async (inputPath, options) => {
-      const response = await fetch(
+      const response = await studioApiFetch(
         `/api/projects/${encodeURIComponent(projectId)}/media/remove-background`,
         {
           method: "POST",
@@ -95751,7 +95834,7 @@ import { Fragment as Fragment66, jsx as jsx236, jsxs as jsxs189 } from "react/js
 function useStudioSidePanels(left, right, projectId) {
   const stableLeft = useStableHandlers(left, projectId);
   const stableRight = useStableHandlers(right, projectId);
-  return useMemo87(
+  return useMemo88(
     () => /* @__PURE__ */ jsxs189(Fragment66, { children: [
       /* @__PURE__ */ jsx236(StudioLeftPanels, { ...stableLeft }),
       /* @__PURE__ */ jsx236(StudioRightPanels, { ...stableRight })
@@ -95890,7 +95973,7 @@ async function extendKeyframedTweenToPlayhead(session, sel, anim, currentTime, d
       position: extended.position,
       duration: extended.duration,
       keyframes: extended.keyframes,
-      ease: anim.ease
+      ...keyframeEases(anim)
     },
     {
       label: "Add keyframe",
@@ -96770,7 +96853,7 @@ function StudioSplash({ waiting }) {
 import { useEffect as useEffect155, useState as useState156 } from "react";
 async function resolveHashProject(id) {
   try {
-    const res = await fetch(`/api/projects/${encodeURIComponent(id)}`);
+    const res = await studioApiFetch(`/api/projects/${encodeURIComponent(id)}`);
     if (res.ok) return { outcome: "ok", status: res.status };
     return { outcome: res.status === 404 ? "missing" : "unknown", status: res.status };
   } catch {
@@ -96782,7 +96865,7 @@ function replaceProjectHash(projectId) {
 }
 async function firstProjectId() {
   try {
-    const res = await fetch("/api/projects");
+    const res = await studioApiFetch("/api/projects");
     const data = await res.json();
     return data.projects?.[0]?.id ?? null;
   } catch {
@@ -96809,7 +96892,7 @@ function useServerConnection() {
       retryTimer = window.setTimeout(tryConnect, 2e3);
     }
     function tryConnect() {
-      fetch("/api/projects").then((r) => r.json()).then(async (data) => {
+      studioApiFetch("/api/projects").then((r) => r.json()).then(async (data) => {
         if (cancelled) return;
         if (hashProjectId) {
           const verdict = await resolveHashProject(hashProjectId);
@@ -96953,7 +97036,7 @@ function useCompositionContentLoader({
       if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`)).then(async (r) => {
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`)).then(async (r) => {
         if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
         return r.json();
       }).then((data) => {
@@ -97074,7 +97157,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     setRefreshKey
   });
   const fileManager = useStableHandlers(fileManagerResult, projectId);
-  const masterCompPath = useMemo88(
+  const masterCompPath = useMemo89(
     () => resolveMasterCompositionPath(fileManager.compositions),
     [fileManager.compositions]
   );
@@ -97178,7 +97261,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   } = useStableHandlers(blockHandlersResult, projectId);
   const dismissBlockParams = useCallback194(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
-  const layout = useMemo88(
+  const layout = useMemo89(
     () => ({ ...panelLayout, setRightPanelTab }),
     [panelLayout, setRightPanelTab]
   );
@@ -97227,9 +97310,9 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handleDuplicate,
     onResetKeyframes: () => resetKeyframesRef.current(),
     onDeleteSelectedKeyframes: () => deleteSelectedKeyframesRef.current(),
-    onAfterUndoRedo: (restore) => {
+    onAfterUndoRedo: (restore2) => {
       invalidateGsapCacheRef.current();
-      timelineEditing.restoreLiveLanes(restore);
+      timelineEditing.restoreLiveLanes(restore2);
     },
     onGroupSelection: () => domEditSessionRef.current.handleGroupSelection(),
     onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
@@ -97403,7 +97486,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo88(
+  const timelineToolbar = useMemo89(
     () => /* @__PURE__ */ jsx244(
       TimelineToolbar,
       {
@@ -97912,7 +97995,7 @@ function findElementBlock(html2, elementId2) {
 }
 
 // src/hooks/useDomStyleCommit.ts
-import { useCallback as useCallback196, useMemo as useMemo89, useRef as useRef189, useState as useState160 } from "react";
+import { useCallback as useCallback196, useMemo as useMemo90, useRef as useRef189, useState as useState160 } from "react";
 var noop = () => {
 };
 function useDomStyleCommit({
@@ -97928,7 +98011,7 @@ function useDomStyleCommit({
   const [queue2] = useState160(createDomEditSaveQueue);
   useMountEffect(() => () => queue2.destroy());
   const versions = useRef189(/* @__PURE__ */ new Map()).current;
-  const editHistory = useMemo89(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo90(() => ({ recordEdit }), [recordEdit]);
   const persistDomEditOperations = useDomEditPersist({
     activeCompPath,
     previewIframeRef: iframeRef,
@@ -97960,7 +98043,7 @@ function useDomStyleCommit({
 }
 
 // src/hooks/useDomGeometryCommit.ts
-import { useCallback as useCallback197, useMemo as useMemo90, useRef as useRef190, useState as useState161 } from "react";
+import { useCallback as useCallback197, useMemo as useMemo91, useRef as useRef190, useState as useState161 } from "react";
 var noop2 = () => {
 };
 var NO_SELECTED_ANIMATIONS = [];
@@ -97976,7 +98059,7 @@ function useDomGeometryCommit({
   const projectIdRef = useRef190(projectId);
   projectIdRef.current = projectId;
   const pending2 = useRef190(/* @__PURE__ */ new Set()).current;
-  const editHistory = useMemo90(() => ({ recordEdit }), [recordEdit]);
+  const editHistory = useMemo91(() => ({ recordEdit }), [recordEdit]);
   const reload = useCallback197(
     () => reloadPreview ? reloadPreview() : iframeRef.current?.contentWindow?.location.reload(),
     [reloadPreview, iframeRef]
@@ -98033,6 +98116,7 @@ function useDomGeometryCommit({
     domEditSelection: null,
     selectedGsapAnimations: NO_SELECTED_ANIMATIONS,
     gsapCommitMutation: gsap3.commitMutation,
+    activeCompPath,
     previewIframeRef: iframeRef,
     showToast,
     bumpGsapCache,
@@ -98048,10 +98132,10 @@ function useDomGeometryCommit({
     updateArcSegment: gsap3.updateArcSegment
   });
   const saved2 = useCallback197(
-    async (commit, restore = noop2) => {
+    async (commit, restore2 = noop2) => {
       const refusal2 = !projectIdRef.current ? "No project is open" : !isPreviewBooted(projectIdRef.current) ? "The preview for this project has not loaded yet" : null;
       if (refusal2) {
-        restore();
+        restore2();
         showToast(refusal2, "error");
         throw new Error(refusal2);
       }
@@ -98065,11 +98149,11 @@ function useDomGeometryCommit({
     },
     [pending2, showToast]
   );
-  return useMemo90(
+  return useMemo91(
     () => ({
       commitPathOffset: (selection, next, modifiers) => saved2(() => handleGsapAwarePathOffsetCommit(selection, next, modifiers)),
       commitGroupPathOffset: (updates) => saved2(() => handleGsapAwareGroupPathOffsetCommit(updates)),
-      commitBoxSize: (selection, next, offset, restore) => saved2(() => handleGsapAwareBoxSizeCommit(selection, next, offset, restore), restore),
+      commitBoxSize: (selection, next, offset, restore2) => saved2(() => handleGsapAwareBoxSizeCommit(selection, next, offset, restore2), restore2),
       commitRotation: (selection, next) => saved2(() => handleGsapAwareRotationCommit(selection, next)),
       waitForPendingSaves: () => Promise.allSettled([...pending2]).then(noop2)
     }),
@@ -98093,6 +98177,7 @@ export {
   AudioMeterStrip,
   AudioWaveform,
   Button,
+  ColorField,
   CompositionBreadcrumb,
   CompositionThumbnail,
   ConnectedDomEditOverlay,
@@ -98104,6 +98189,7 @@ export {
   EditorShell,
   ExternalFileConflictBanner,
   FileTree,
+  GradientField,
   GridOverlay,
   HyperframesLoader,
   HyperframesLogo,
@@ -98223,6 +98309,7 @@ export {
   useProjectFileWriter,
   useRenderClipContent,
   useRenderQueue,
+  useThumbnailStill,
   useTimelineContext,
   useTimelineEditing,
   useTimelinePlayer