@hyperframes/studio 0.8.106 → 0.8.107

package/dist/index.js

@@ -41,6 +41,7 @@ import {
   isPreviewBooted,
   isRevealedAudioFxRequestCurrent,
   isTimelineIgnoredElement,
+  isVideoAudible,
   liveTime,
   panelsInZone,
   parseDockLayout,
@@ -67,7 +68,7 @@ import {
   whenPreviewBooted,
   wrapTimeline,
   writeStudioUiPreferences
-} from "./chunk-ICTZJPQQ.js";
+} from "./chunk-4OZC426H.js";
 import {
   Button,
   ContextMenu,
@@ -9976,7 +9977,395 @@ import { useCallback as useCallback16 } from "react";
 
 // src/contexts/DomEditContext.tsx
 import { useCallback as useCallback15, useContext as useContext3, useMemo as useMemo9, useRef as useRef16 } from "react";
+
+// src/utils/studioSaveDiagnostics.ts
+var STUDIO_SAVE_ATTEMPT_PROPERTY = "__studioSaveAttempt";
+var StudioSaveHttpError = class extends Error {
+  statusCode;
+  alreadyToasted;
+  constructor(message, statusCode, options = {}) {
+    super(message);
+    this.name = "StudioSaveHttpError";
+    this.statusCode = statusCode;
+    this.alreadyToasted = options.alreadyToasted ?? false;
+  }
+};
+var StudioSaveNetworkError = class extends Error {
+  constructor(message, options) {
+    super(message, options);
+    this.name = "StudioSaveNetworkError";
+  }
+};
+var StudioFileConflictError = class extends StudioSaveHttpError {
+  filePath;
+  currentVersion;
+  currentContent;
+  attemptedContent;
+  constructor(input) {
+    super(`Save conflict: ${input.filePath} changed outside this Studio session`, 409);
+    this.name = "StudioFileConflictError";
+    this.filePath = input.filePath;
+    this.currentVersion = input.currentVersion;
+    this.currentContent = input.currentContent;
+    this.attemptedContent = input.attemptedContent;
+  }
+};
+function readNumericProperty(value, key2) {
+  const record = value;
+  const property = record[key2];
+  return typeof property === "number" && Number.isFinite(property) ? property : void 0;
+}
+function createStudioSaveAbortError() {
+  if (typeof DOMException !== "undefined") return new DOMException("Save aborted", "AbortError");
+  const error = new Error("Save aborted");
+  error.name = "AbortError";
+  return error;
+}
+function throwIfStudioSaveAborted(signal) {
+  if (signal?.aborted) throw createStudioSaveAbortError();
+}
+function attachStudioSaveAttempt(error, attempt) {
+  if (!error || typeof error !== "object") return error;
+  try {
+    Object.defineProperty(error, STUDIO_SAVE_ATTEMPT_PROPERTY, {
+      value: attempt,
+      configurable: true
+    });
+  } catch {
+  }
+  return error;
+}
+function getStudioSaveErrorMessage(error) {
+  if (error instanceof Error && error.message) return error.message;
+  if (typeof error === "string" && error.trim()) return error;
+  return "Unknown save failure";
+}
+function markStudioSaveErrorAlreadyToasted(error) {
+  if (!error || typeof error !== "object") return error;
+  try {
+    Object.defineProperty(error, "alreadyToasted", { value: true, configurable: true });
+  } catch {
+  }
+  return error;
+}
+function isStudioSaveErrorAlreadyToasted(error) {
+  if (!error || typeof error !== "object") return false;
+  if (error.alreadyToasted === true) return true;
+  const cause = error.cause;
+  return cause !== error && isStudioSaveErrorAlreadyToasted(cause);
+}
+function getStudioSaveStatusCode(error) {
+  if (!error || typeof error !== "object") return void 0;
+  const direct = readNumericProperty(error, "statusCode") ?? readNumericProperty(error, "status") ?? readNumericProperty(error, "status_code");
+  if (direct != null) return direct;
+  const cause = error.cause;
+  if (cause && cause !== error) return getStudioSaveStatusCode(cause);
+  return void 0;
+}
+function getStudioSaveAttempt(error) {
+  if (!error || typeof error !== "object") return void 0;
+  const direct = readNumericProperty(error, STUDIO_SAVE_ATTEMPT_PROPERTY);
+  if (direct != null) return direct;
+  const cause = error.cause;
+  if (cause && cause !== error) return getStudioSaveAttempt(cause);
+  return void 0;
+}
+function isStudioSaveAbortError(error) {
+  return error instanceof Error && error.name === "AbortError";
+}
+function isRetryableStudioSaveError(error) {
+  if (isStudioSaveAbortError(error)) return false;
+  if (error instanceof StudioSaveNetworkError) return true;
+  const statusCode = getStudioSaveStatusCode(error);
+  if (statusCode == null) return false;
+  return statusCode === 408 || statusCode === 425 || statusCode === 429 || statusCode >= 500;
+}
+function buildStudioSaveFailureProperties(input) {
+  const statusCode = input.statusCode ?? getStudioSaveStatusCode(input.error) ?? null;
+  const attempt = input.attempt ?? getStudioSaveAttempt(input.error) ?? void 0;
+  return {
+    source: input.source,
+    error_message: getStudioSaveErrorMessage(input.error),
+    status_code: statusCode,
+    file_path: input.filePath ?? input.targetSourceFile ?? void 0,
+    mutation_type: input.mutationType ?? void 0,
+    attempt,
+    label: input.label ?? void 0,
+    target_id: input.targetId ?? void 0,
+    target_selector: input.targetSelector ?? void 0,
+    target_source_file: input.targetSourceFile ?? void 0,
+    block_detail: gsapBlockDetail(input.error)
+  };
+}
+function gsapBlockDetail(error) {
+  if (!(error instanceof Error) || error.name !== "GsapEditBlockedError") return void 0;
+  const detail = error.detail;
+  return typeof detail === "string" ? detail : void 0;
+}
+function trackStudioSaveFailure(input) {
+  trackStudioEvent("save_failure", buildStudioSaveFailureProperties(input));
+}
+function trackStudioEditBlocked(input) {
+  trackStudioEvent("edit_blocked", buildStudioSaveFailureProperties(input));
+}
+async function createStudioSaveHttpError(response, fallbackMessage, options = {}) {
+  let body = "";
+  try {
+    body = await response.text();
+  } catch {
+    body = "";
+  }
+  const detail = body.trim().slice(0, 300);
+  const message = detail ? `${fallbackMessage} (${response.status}): ${detail}` : `${fallbackMessage} (${response.status})`;
+  return new StudioSaveHttpError(message, response.status, options);
+}
+async function retryStudioSave(operation, options = {}) {
+  const retries = options.retries ?? 3;
+  const baseDelayMs = options.baseDelayMs ?? 500;
+  const maxDelayMs = options.maxDelayMs ?? 8e3;
+  const jitterRatio = options.jitterRatio ?? 0.25;
+  const random = options.random ?? Math.random;
+  const shouldRetry = options.shouldRetry ?? isRetryableStudioSaveError;
+  const sleep = options.sleep ?? ((delayMs, signal) => new Promise((resolve, reject) => {
+    throwIfStudioSaveAborted(signal);
+    const onAbort = () => {
+      globalThis.clearTimeout(timeout);
+      reject(createStudioSaveAbortError());
+    };
+    const timeout = globalThis.setTimeout(() => {
+      signal?.removeEventListener("abort", onAbort);
+      resolve();
+    }, delayMs);
+    signal?.addEventListener("abort", onAbort, { once: true });
+  }));
+  const maxAttempts = retries + 1;
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    try {
+      throwIfStudioSaveAborted(options.signal);
+      return await operation(attempt);
+    } catch (error) {
+      const failure = attachStudioSaveAttempt(error, attempt);
+      if (attempt >= maxAttempts || !shouldRetry(failure, attempt)) throw failure;
+      const retryIndex = attempt - 1;
+      const exponentialDelay = Math.min(baseDelayMs * 2 ** retryIndex, maxDelayMs);
+      const jitterSpan = exponentialDelay * jitterRatio;
+      const jitteredDelay = Math.round(exponentialDelay + (random() * 2 - 1) * jitterSpan);
+      const delayMs = Math.max(0, Math.min(maxDelayMs, jitteredDelay));
+      await sleep(delayMs, options.signal);
+    }
+  }
+  throw new Error("Save retry loop exited unexpectedly");
+}
+
+// src/utils/typingTarget.ts
+function isTypingTarget(target) {
+  const element = asElement(target);
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  return element.closest(TYPING_SELECTOR) !== null;
+}
+function ownsPlainKeys(target) {
+  return isTypingTarget(target) || asElement(target)?.closest(KEY_OWNING_CONTROLS) != null;
+}
+var KEY_OWNING_CONTROLS = "[role='slider'],video[controls],audio[controls]";
+var TYPING_SELECTOR = [
+  "input",
+  "textarea",
+  "select",
+  "[contenteditable]:not([contenteditable='false'])",
+  "[role='textbox']",
+  "[role='searchbox']",
+  "[role='combobox']",
+  // A switch is a button in the DOM, but the native checkbox it replaces was an
+  // `input` and matched above. Without this row the shared Toggle would let a
+  // global shortcut claim Space instead of flipping the control (KTD13).
+  "[role='switch']",
+  ".cm-editor"
+].join(",");
+function asElement(target) {
+  if (!target || typeof target !== "object") return null;
+  const candidate = target;
+  return typeof candidate.closest === "function" ? target : null;
+}
+
+// src/utils/studioPendingEdits.ts
+var STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
+var pendingEditPromises = /* @__PURE__ */ new Set();
+function waitForPostBlurEffects() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+function inspectDrainFailures(results) {
+  let firstFailure;
+  for (const result of results) {
+    if (result.status !== "rejected") continue;
+    if (result.reason instanceof StudioFileConflictError) return { conflict: result.reason };
+    firstFailure ??= result;
+  }
+  return { firstFailure };
+}
+function focusedField() {
+  const active = document.activeElement;
+  return active instanceof HTMLElement && isTypingTarget(active) ? active : null;
+}
+function hasStudioPendingEdits() {
+  return pendingEditPromises.size > 0 || focusedField() !== null;
+}
+function isStudioEditSaving() {
+  return pendingEditPromises.size > 0;
+}
+function afterStudioPendingEdits(run) {
+  let waiting = true;
+  const check = () => {
+    if (!waiting) return;
+    if (isStudioEditSaving()) {
+      void Promise.allSettled([...pendingEditPromises]).then(check);
+      return;
+    }
+    waiting = false;
+    run();
+  };
+  check();
+  return () => {
+    waiting = false;
+  };
+}
+function trackStudioPendingEdit(result) {
+  if (!result) return void 0;
+  const promise = Promise.resolve(result);
+  pendingEditPromises.add(promise);
+  promise.then(
+    () => pendingEditPromises.delete(promise),
+    () => pendingEditPromises.delete(promise)
+  );
+  return promise;
+}
+function trackedStudioEdit(edit) {
+  return (...args) => {
+    const result = edit(...args);
+    if (result instanceof Promise) trackStudioPendingEdit(result);
+    return result;
+  };
+}
+async function flushStudioPendingEdits() {
+  const active = focusedField();
+  if (active) {
+    active.blur();
+    await Promise.resolve();
+    await waitForPostBlurEffects();
+  }
+  const detail = { promises: [] };
+  window.dispatchEvent(
+    new CustomEvent(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail })
+  );
+  let conflict;
+  let firstFailure;
+  while (detail.promises.length > 0 || pendingEditPromises.size > 0) {
+    const promises = [...detail.promises, ...pendingEditPromises];
+    detail.promises = [];
+    const batchFailures = inspectDrainFailures(await Promise.allSettled(promises));
+    conflict ??= batchFailures.conflict;
+    firstFailure ??= batchFailures.firstFailure;
+  }
+  if (conflict) return { status: "conflict", error: conflict };
+  return firstFailure ? { status: "failed", error: firstFailure.reason } : { status: "clean" };
+}
+function addStudioPendingEditFlushListener(handler) {
+  const listener2 = (event) => {
+    const detail = event.detail;
+    if (!detail?.promises) return;
+    const promise = trackStudioPendingEdit(handler());
+    if (promise) detail.promises.push(promise);
+  };
+  window.addEventListener(STUDIO_FLUSH_PENDING_EDITS_EVENT, listener2);
+  return () => window.removeEventListener(STUDIO_FLUSH_PENDING_EDITS_EVENT, listener2);
+}
+
+// src/contexts/DomEditContext.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
+var SAVES_AN_EDIT = {
+  handleTimelineElementSelect: false,
+  handlePreviewCanvasMouseDown: false,
+  handlePreviewCanvasPointerMove: false,
+  handlePreviewCanvasPointerLeave: false,
+  applyDomSelection: false,
+  clearDomSelection: false,
+  refreshDomEditSelectionFromPreview: false,
+  handleDomStyleCommit: true,
+  handleDomStyleCommitForSelection: true,
+  handleDomAttributeCommit: true,
+  handleDomAttributeLiveCommit: false,
+  handleDomAttributeQuietCommit: true,
+  handleDomHtmlAttributeCommit: true,
+  handleDomAttributesCommit: true,
+  handleDomAttributeBatchCommit: true,
+  handleDomPathOffsetCommit: true,
+  handleDomGroupPathOffsetCommit: true,
+  handleDomZIndexReorderCommit: true,
+  handleDomBoxSizeCommit: true,
+  handleDomRotationCommit: true,
+  handleDomManualEditsReset: true,
+  handleDomTextCommit: true,
+  handleDomTextCommitForSelection: true,
+  handleDomRichTextCommit: true,
+  handleDomTextFieldStyleCommit: true,
+  handleDomAddTextField: true,
+  handleDomRemoveTextField: true,
+  getGsapAnimationsForSelection: false,
+  handleAskAgent: false,
+  handleAgentModalSubmit: false,
+  handleBlockedDomMove: false,
+  handleDomManualDragStart: false,
+  handleDomEditElementDelete: true,
+  handleGroupSelection: true,
+  handleUngroupSelection: true,
+  setActiveGroupElement: false,
+  buildDomSelectionFromTarget: false,
+  buildDomSelectionForTimelineElement: false,
+  updateDomEditHoverSelection: false,
+  resolveImportedFontAsset: false,
+  setAgentModalOpen: false,
+  setAgentPromptSelectionContext: false,
+  setAgentModalAnchorPoint: false,
+  handleGsapUpdateProperty: true,
+  handleGsapUpdateMeta: true,
+  handleGsapDeleteAnimation: true,
+  handleGsapDeleteAllForElement: true,
+  handleGsapAddAnimation: true,
+  handleGsapAddProperty: true,
+  handleGsapRemoveProperty: true,
+  handleGsapUpdateFromProperty: true,
+  handleGsapAddFromProperty: true,
+  handleGsapRemoveFromProperty: true,
+  handleGsapAddKeyframe: true,
+  handleGsapAddKeyframeBatch: true,
+  handleGsapRemoveKeyframe: true,
+  handleGsapMoveKeyframeToPlayhead: true,
+  handleGsapMoveKeyframe: true,
+  handleGsapResizeKeyframedTween: true,
+  handleGsapConvertToKeyframes: true,
+  handleGsapRemoveAllKeyframes: true,
+  handleResetSelectedElementKeyframes: true,
+  commitAnimatedProperty: true,
+  commitAnimatedProperties: true,
+  handleSetArcPath: true,
+  handleUpdateArcSegment: true,
+  handleUnroll: true,
+  invalidateGsapCache: false,
+  previewIframeRef: false,
+  commitMutation: true,
+  applyMarqueeSelection: false,
+  handleUpdateKeyframeEase: true,
+  handleUpdateSegmentEase: true,
+  handleSetAllKeyframeEases: true
+};
+function trackEditCommits(actions) {
+  const tracked = { ...actions };
+  for (const key2 of Object.keys(SAVES_AN_EDIT)) {
+    if (!SAVES_AN_EDIT[key2]) continue;
+    tracked[key2] = trackedStudioEdit(actions[key2]);
+  }
+  return tracked;
+}
 var DomEditActionsContext = createStableContext(
   "DomEditActionsContext",
   null
@@ -10028,6 +10417,7 @@ function DomEditProvider({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -10100,7 +10490,7 @@ function DomEditProvider({
     (mutation, options) => commitMutationRef.current(mutation, options),
     []
   );
-  const actions = useMemo9(
+  const untrackedActions = useMemo9(
     () => ({
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
@@ -10116,6 +10506,7 @@ function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -10191,6 +10582,7 @@ function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -10252,6 +10644,7 @@ function DomEditProvider({
       handleSetAllKeyframeEases
     ]
   );
+  const actions = useMemo9(() => trackEditCommits(untrackedActions), [untrackedActions]);
   const selection = useMemo9(
     () => ({
       domEditSelection,
@@ -11855,6 +12248,8 @@ var TIMELINE_VIEWPORT_BUDGETS = Object.freeze({
   frameIntervalP95Ms: 33.3,
   constrainedInteractionP95Ms: 75,
   constrainedFrameIntervalP95Ms: 75,
+  ciVirtualizedInteractionP95Ms: 58.3,
+  ciVirtualizedFrameIntervalP95Ms: 25,
   longTaskLimitMs: 50,
   constrainedLongTaskLimitMs: 300,
   memoryReturnToleranceRatio: 0.15,
@@ -16956,36 +17351,6 @@ import {
   resolveAutomationRange as resolveAutomationRange5
 } from "@hyperframes/core/audio-automation";
 
-// src/utils/typingTarget.ts
-function isTypingTarget(target) {
-  const element = asElement(target);
-  if (!element) return false;
-  if (element.isContentEditable) return true;
-  return element.closest(TYPING_SELECTOR) !== null;
-}
-function ownsPlainKeys(target) {
-  return isTypingTarget(target) || asElement(target)?.closest("[role='slider']") != null;
-}
-var TYPING_SELECTOR = [
-  "input",
-  "textarea",
-  "select",
-  "[contenteditable]:not([contenteditable='false'])",
-  "[role='textbox']",
-  "[role='searchbox']",
-  "[role='combobox']",
-  // A switch is a button in the DOM, but the native checkbox it replaces was an
-  // `input` and matched above. Without this row the shared Toggle would let a
-  // global shortcut claim Space instead of flipping the control (KTD13).
-  "[role='switch']",
-  ".cm-editor"
-].join(",");
-function asElement(target) {
-  if (!target || typeof target !== "object") return null;
-  const candidate = target;
-  return typeof candidate.closest === "function" ? target : null;
-}
-
 // src/utils/studioHelpers.ts
 function getTimelineElementLabel(element) {
   return element.label || element.id || element.tag;
@@ -17167,23 +17532,25 @@ function mediaMetadataUrl(projectId, assetPath) {
 }
 async function resolveDroppedAssetHasAudio(projectId, assetPath, kind) {
   if (kind !== "video") return false;
+  return await resolveAssetHasAudio(projectId, assetPath) === true;
+}
+function isPlainRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+async function resolveAssetHasAudio(projectId, assetPath) {
   try {
     const response = await fetch(mediaMetadataUrl(projectId, assetPath));
-    if (!response.ok) return false;
+    if (!response.ok) return null;
     const data = await response.json();
-    return data?.metadata?.hasAudio === true;
+    const metadata = isPlainRecord(data) ? data.metadata : void 0;
+    const hasAudio = isPlainRecord(metadata) ? metadata.hasAudio : void 0;
+    return typeof hasAudio === "boolean" ? hasAudio : null;
   } catch {
-    return false;
+    return null;
   }
 }
 
 // src/hooks/useAutomationSelectionKeyboard.ts
-function isTextInput(el) {
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return el instanceof HTMLElement && el.isContentEditable;
-}
 function isChord(e, letter) {
   return (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === letter;
 }
@@ -17286,7 +17653,7 @@ function handleCopy(e, state, lanes, sel) {
   return true;
 }
 function automationOwnsKey(e) {
-  if (isTextInput(document.activeElement)) return false;
+  if (isTypingTarget(document.activeElement)) return false;
   const state = usePlayerStore.getState();
   if (isChord(e, "c")) return state.automationSelection !== null;
   if (!isChord(e, "v")) return false;
@@ -17311,7 +17678,7 @@ function useAutomationSelectionKeyboard({
 }) {
   useEffect25(() => {
     const handler = (e) => {
-      if (isTextInput(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       if (e.defaultPrevented) return;
       const state = usePlayerStore.getState();
       if (handlePaste(e, state, lanes)) return;
@@ -19908,185 +20275,6 @@ function serializeStudioFileMutations(writer, targetPaths, task) {
   return acquire(0);
 }
 
-// src/utils/studioSaveDiagnostics.ts
-var STUDIO_SAVE_ATTEMPT_PROPERTY = "__studioSaveAttempt";
-var StudioSaveHttpError = class extends Error {
-  statusCode;
-  alreadyToasted;
-  constructor(message, statusCode, options = {}) {
-    super(message);
-    this.name = "StudioSaveHttpError";
-    this.statusCode = statusCode;
-    this.alreadyToasted = options.alreadyToasted ?? false;
-  }
-};
-var StudioSaveNetworkError = class extends Error {
-  constructor(message, options) {
-    super(message, options);
-    this.name = "StudioSaveNetworkError";
-  }
-};
-var StudioFileConflictError = class extends StudioSaveHttpError {
-  filePath;
-  currentVersion;
-  currentContent;
-  attemptedContent;
-  constructor(input) {
-    super(`Save conflict: ${input.filePath} changed outside this Studio session`, 409);
-    this.name = "StudioFileConflictError";
-    this.filePath = input.filePath;
-    this.currentVersion = input.currentVersion;
-    this.currentContent = input.currentContent;
-    this.attemptedContent = input.attemptedContent;
-  }
-};
-function readNumericProperty(value, key2) {
-  const record = value;
-  const property = record[key2];
-  return typeof property === "number" && Number.isFinite(property) ? property : void 0;
-}
-function createStudioSaveAbortError() {
-  if (typeof DOMException !== "undefined") return new DOMException("Save aborted", "AbortError");
-  const error = new Error("Save aborted");
-  error.name = "AbortError";
-  return error;
-}
-function throwIfStudioSaveAborted(signal) {
-  if (signal?.aborted) throw createStudioSaveAbortError();
-}
-function attachStudioSaveAttempt(error, attempt) {
-  if (!error || typeof error !== "object") return error;
-  try {
-    Object.defineProperty(error, STUDIO_SAVE_ATTEMPT_PROPERTY, {
-      value: attempt,
-      configurable: true
-    });
-  } catch {
-  }
-  return error;
-}
-function getStudioSaveErrorMessage(error) {
-  if (error instanceof Error && error.message) return error.message;
-  if (typeof error === "string" && error.trim()) return error;
-  return "Unknown save failure";
-}
-function markStudioSaveErrorAlreadyToasted(error) {
-  if (!error || typeof error !== "object") return error;
-  try {
-    Object.defineProperty(error, "alreadyToasted", { value: true, configurable: true });
-  } catch {
-  }
-  return error;
-}
-function isStudioSaveErrorAlreadyToasted(error) {
-  if (!error || typeof error !== "object") return false;
-  if (error.alreadyToasted === true) return true;
-  const cause = error.cause;
-  return cause !== error && isStudioSaveErrorAlreadyToasted(cause);
-}
-function getStudioSaveStatusCode(error) {
-  if (!error || typeof error !== "object") return void 0;
-  const direct = readNumericProperty(error, "statusCode") ?? readNumericProperty(error, "status") ?? readNumericProperty(error, "status_code");
-  if (direct != null) return direct;
-  const cause = error.cause;
-  if (cause && cause !== error) return getStudioSaveStatusCode(cause);
-  return void 0;
-}
-function getStudioSaveAttempt(error) {
-  if (!error || typeof error !== "object") return void 0;
-  const direct = readNumericProperty(error, STUDIO_SAVE_ATTEMPT_PROPERTY);
-  if (direct != null) return direct;
-  const cause = error.cause;
-  if (cause && cause !== error) return getStudioSaveAttempt(cause);
-  return void 0;
-}
-function isStudioSaveAbortError(error) {
-  return error instanceof Error && error.name === "AbortError";
-}
-function isRetryableStudioSaveError(error) {
-  if (isStudioSaveAbortError(error)) return false;
-  if (error instanceof StudioSaveNetworkError) return true;
-  const statusCode = getStudioSaveStatusCode(error);
-  if (statusCode == null) return false;
-  return statusCode === 408 || statusCode === 425 || statusCode === 429 || statusCode >= 500;
-}
-function buildStudioSaveFailureProperties(input) {
-  const statusCode = input.statusCode ?? getStudioSaveStatusCode(input.error) ?? null;
-  const attempt = input.attempt ?? getStudioSaveAttempt(input.error) ?? void 0;
-  return {
-    source: input.source,
-    error_message: getStudioSaveErrorMessage(input.error),
-    status_code: statusCode,
-    file_path: input.filePath ?? input.targetSourceFile ?? void 0,
-    mutation_type: input.mutationType ?? void 0,
-    attempt,
-    label: input.label ?? void 0,
-    target_id: input.targetId ?? void 0,
-    target_selector: input.targetSelector ?? void 0,
-    target_source_file: input.targetSourceFile ?? void 0,
-    block_detail: gsapBlockDetail(input.error)
-  };
-}
-function gsapBlockDetail(error) {
-  if (!(error instanceof Error) || error.name !== "GsapEditBlockedError") return void 0;
-  const detail = error.detail;
-  return typeof detail === "string" ? detail : void 0;
-}
-function trackStudioSaveFailure(input) {
-  trackStudioEvent("save_failure", buildStudioSaveFailureProperties(input));
-}
-function trackStudioEditBlocked(input) {
-  trackStudioEvent("edit_blocked", buildStudioSaveFailureProperties(input));
-}
-async function createStudioSaveHttpError(response, fallbackMessage, options = {}) {
-  let body = "";
-  try {
-    body = await response.text();
-  } catch {
-    body = "";
-  }
-  const detail = body.trim().slice(0, 300);
-  const message = detail ? `${fallbackMessage} (${response.status}): ${detail}` : `${fallbackMessage} (${response.status})`;
-  return new StudioSaveHttpError(message, response.status, options);
-}
-async function retryStudioSave(operation, options = {}) {
-  const retries = options.retries ?? 3;
-  const baseDelayMs = options.baseDelayMs ?? 500;
-  const maxDelayMs = options.maxDelayMs ?? 8e3;
-  const jitterRatio = options.jitterRatio ?? 0.25;
-  const random = options.random ?? Math.random;
-  const shouldRetry = options.shouldRetry ?? isRetryableStudioSaveError;
-  const sleep = options.sleep ?? ((delayMs, signal) => new Promise((resolve, reject) => {
-    throwIfStudioSaveAborted(signal);
-    const onAbort = () => {
-      globalThis.clearTimeout(timeout);
-      reject(createStudioSaveAbortError());
-    };
-    const timeout = globalThis.setTimeout(() => {
-      signal?.removeEventListener("abort", onAbort);
-      resolve();
-    }, delayMs);
-    signal?.addEventListener("abort", onAbort, { once: true });
-  }));
-  const maxAttempts = retries + 1;
-  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-    try {
-      throwIfStudioSaveAborted(options.signal);
-      return await operation(attempt);
-    } catch (error) {
-      const failure = attachStudioSaveAttempt(error, attempt);
-      if (attempt >= maxAttempts || !shouldRetry(failure, attempt)) throw failure;
-      const retryIndex = attempt - 1;
-      const exponentialDelay = Math.min(baseDelayMs * 2 ** retryIndex, maxDelayMs);
-      const jitterSpan = exponentialDelay * jitterRatio;
-      const jitteredDelay = Math.round(exponentialDelay + (random() * 2 - 1) * jitterSpan);
-      const delayMs = Math.max(0, Math.min(maxDelayMs, jitteredDelay));
-      await sleep(delayMs, options.signal);
-    }
-  }
-  throw new Error("Save retry loop exited unexpectedly");
-}
-
 // src/utils/studioFileHistory.ts
 async function readProjectFileContent(pid, path) {
   const response = await fetch(buildProjectApiPath(pid, `/files/${encodeURIComponent(path)}`));
@@ -20357,7 +20545,7 @@ function applySoftReloadFinalization(iframe, currentTime) {
   }
 }
 function applySoftReload(iframe, scriptText, options = {}) {
-  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
+  const { onAsyncFailure, currentTimeOverride, authoredHtml, reparse = [] } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
   const win = iframe.contentWindow;
   const doc = iframe.contentDocument;
@@ -20391,7 +20579,7 @@ function applySoftReload(iframe, scriptText, options = {}) {
   const readAuthoredOpacity = (el) => findAuthoredStyle(el)?.opacity ?? readStampedAuthoredOpacity(el);
   const doReload = () => {
     const timelines = win.__timelines;
-    const allTargets = [];
+    const allTargets = [...reparse];
     if (timelines) {
       for (const key2 of targetKeys) {
         const tl = timelines[key2];
@@ -24244,18 +24432,14 @@ var PLAYBACK_SHORTCUT_IGNORED_SELECTOR = [
   "a[href]",
   "[role='button']",
   "[role='checkbox']",
-  "[role='combobox']",
   "[role='menuitem']",
   // Base UI's menu radio item is a `<div>`, so `button` above no longer catches it.
   "[role='menuitemradio']",
   "[role='radio']",
-  "[role='slider']",
-  "[role='spinbutton']",
-  "[role='switch']",
-  "[role='textbox']"
+  "[role='spinbutton']"
 ].join(",");
 function shouldIgnorePlaybackShortcutTarget(target) {
-  if (isTypingTarget(target)) return true;
+  if (ownsPlainKeys(target)) return true;
   if (!target || typeof target !== "object") return false;
   const candidate = target;
   if (typeof candidate.closest !== "function") return false;
@@ -25729,6 +25913,7 @@ var STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP = "__hfStudioManualEditsPlaybackFram
 var STUDIO_ROTATION_TRANSFORM_ORIGIN = "center center";
 
 // src/components/editor/gsapAnimatesProperty.ts
+var gsapRendersTransform = (el) => !!el._gsap?.renderTransform;
 function gsapAnimatesProperty(el, ...props) {
   const win = el.ownerDocument.defaultView;
   if (!win?.__timelines) return false;
@@ -25785,11 +25970,136 @@ function splitTopLevelWhitespace(value) {
   return parts;
 }
 
+// src/components/editor/manualEditsDomPatches.ts
+function collectInlineStyleOps(element, properties, ops) {
+  for (const prop of properties) {
+    const val = element.style.getPropertyValue(prop);
+    if (val) ops.push({ type: "inline-style", property: prop, value: val });
+  }
+}
+function collectAttributeOps(element, attrNames, ops) {
+  for (const attr of attrNames) {
+    const val = element.getAttribute(attr);
+    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
+  }
+}
+function appendTransformDisplayOps(element, ops) {
+  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
+  if (val !== null) {
+    ops.push({ type: "inline-style", property: "display", value: val || null });
+    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
+  }
+}
+function buildClearPathOffsetPatches(element) {
+  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
+  const ops = [
+    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
+    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
+    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
+    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+var BOX_SIZE_STYLE_PROPS = [
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "flex-basis",
+  "flex-grow",
+  "flex-shrink",
+  "box-sizing",
+  "scale",
+  "transform-origin",
+  "display"
+];
+var BOX_SIZE_ORIG_ATTRS = [
+  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
+  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
+  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
+  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
+  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
+  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
+  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
+  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
+  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
+  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
+  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
+  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
+  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
+  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
+];
+function buildBoxSizePatches(element) {
+  const ops = [];
+  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
+  const withoutGsapScaleMask = gsapRendersTransform(element) ? BOX_SIZE_STYLE_PROPS.filter((prop) => prop !== "scale") : BOX_SIZE_STYLE_PROPS;
+  collectInlineStyleOps(element, withoutGsapScaleMask, ops);
+  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
+  collectAttributeOps(
+    element,
+    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
+    ops
+  );
+  return ops;
+}
+function buildClearBoxSizePatches(element) {
+  const ops = [
+    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
+    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
+    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
+  ];
+  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
+    const origVal = element.getAttribute(attrName);
+    if (origVal !== null && styleProp) {
+      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
+    }
+    ops.push({ type: "attribute", property: attrName, value: null });
+  }
+  return ops;
+}
+function buildClearRotationPatches(element) {
+  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
+  const origRotationTransformOrigin = element.getAttribute(
+    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
+  );
+  const ops = [
+    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
+    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
+    {
+      type: "inline-style",
+      property: "transform-origin",
+      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
+    },
+    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
+    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
+  ];
+  appendTransformDisplayOps(element, ops);
+  return ops;
+}
+
 // src/components/editor/manualEditsDom.ts
 var studioManualEditGestureId = 0;
-function beginStudioManualEditGesture(element) {
+var MOVE_DRAWS = ["translate", STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+var GESTURE_DRAWS = {
+  move: MOVE_DRAWS,
+  resize: [...MOVE_DRAWS, STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP, ...BOX_SIZE_STYLE_PROPS],
+  rotate: ["rotate", "transform", "transform-origin", "display", STUDIO_ROTATION_PROP],
+  edit: []
+};
+function beginStudioManualEditGesture(element, draws) {
   studioManualEditGestureId += 1;
-  const token = `gesture-${studioManualEditGestureId}`;
+  const token = `gesture-${studioManualEditGestureId}:${draws}`;
   element.setAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR, token);
   return token;
 }
@@ -25818,9 +26128,18 @@ var gestureSaves = /* @__PURE__ */ new WeakMap();
 function studioManualEditSavesIn(doc) {
   return gestureSaves.get(doc) ?? 0;
 }
-function noteStudioManualEditSave(element) {
+function countStudioManualEditSave(element, save) {
   const doc = element.ownerDocument;
-  gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  const count = () => void gestureSaves.set(doc, studioManualEditSavesIn(doc) + 1);
+  count();
+  const result = save();
+  void Promise.resolve(result).then(count, count);
+  return result;
+}
+function studioGestureDraws(element) {
+  const token = element.getAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
+  if (token === null) return null;
+  return GESTURE_DRAWS[token.split(":")[1]] ?? [];
 }
 function isStudioManualEditGestureActive(element) {
   return element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
@@ -26264,90 +26583,6 @@ function sceneSwapFor(iframe) {
   };
 }
 
-// src/utils/studioPendingEdits.ts
-var STUDIO_FLUSH_PENDING_EDITS_EVENT = "hf-studio-flush-pending-edits";
-var pendingEditPromises = /* @__PURE__ */ new Set();
-function waitForPostBlurEffects() {
-  return new Promise((resolve) => setTimeout(resolve, 0));
-}
-function inspectDrainFailures(results) {
-  let firstFailure;
-  for (const result of results) {
-    if (result.status !== "rejected") continue;
-    if (result.reason instanceof StudioFileConflictError) return { conflict: result.reason };
-    firstFailure ??= result;
-  }
-  return { firstFailure };
-}
-function focusedField() {
-  const active = document.activeElement;
-  return active instanceof HTMLElement && active.matches('input, textarea, select, [contenteditable="true"], [role="textbox"]') ? active : null;
-}
-function hasStudioPendingEdits() {
-  return pendingEditPromises.size > 0 || focusedField() !== null;
-}
-function isStudioEditSaving() {
-  return pendingEditPromises.size > 0;
-}
-function afterStudioPendingEdits(run) {
-  let waiting = true;
-  const check = () => {
-    if (!waiting) return;
-    if (isStudioEditSaving()) {
-      void Promise.allSettled([...pendingEditPromises]).then(check);
-      return;
-    }
-    waiting = false;
-    run();
-  };
-  check();
-  return () => {
-    waiting = false;
-  };
-}
-function trackStudioPendingEdit(result) {
-  if (!result) return void 0;
-  const promise = Promise.resolve(result);
-  pendingEditPromises.add(promise);
-  promise.then(
-    () => pendingEditPromises.delete(promise),
-    () => pendingEditPromises.delete(promise)
-  );
-  return promise;
-}
-async function flushStudioPendingEdits() {
-  const active = focusedField();
-  if (active) {
-    active.blur();
-    await Promise.resolve();
-    await waitForPostBlurEffects();
-  }
-  const detail = { promises: [] };
-  window.dispatchEvent(
-    new CustomEvent(STUDIO_FLUSH_PENDING_EDITS_EVENT, { detail })
-  );
-  let firstFailure;
-  while (detail.promises.length > 0 || pendingEditPromises.size > 0) {
-    const promises = [...detail.promises, ...pendingEditPromises];
-    detail.promises = [];
-    const results = await Promise.allSettled(promises);
-    const batchFailures = inspectDrainFailures(results);
-    if (batchFailures.conflict) return { status: "conflict", error: batchFailures.conflict };
-    firstFailure ??= batchFailures.firstFailure;
-  }
-  return firstFailure ? { status: "failed", error: firstFailure.reason } : { status: "clean" };
-}
-function addStudioPendingEditFlushListener(handler) {
-  const listener2 = (event) => {
-    const detail = event.detail;
-    if (!detail?.promises) return;
-    const promise = trackStudioPendingEdit(handler());
-    if (promise) detail.promises.push(promise);
-  };
-  window.addEventListener(STUDIO_FLUSH_PENDING_EDITS_EVENT, listener2);
-  return () => window.removeEventListener(STUDIO_FLUSH_PENDING_EDITS_EVENT, listener2);
-}
-
 // src/player/hooks/useShadowPreviewReload.ts
 var SHADOW_READY_TIMEOUT_MS = 15e3;
 var SHADOW_READY_BUDGETS = 3;
@@ -33045,125 +33280,6 @@ function computeDraggedGsapPosition(element, studioOffset, fallbackBase) {
 
 // src/hooks/gsapRuntimeKeyframes.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
-
-// src/components/editor/manualEditsDomPatches.ts
-function collectInlineStyleOps(element, properties, ops) {
-  for (const prop of properties) {
-    const val = element.style.getPropertyValue(prop);
-    if (val) ops.push({ type: "inline-style", property: prop, value: val });
-  }
-}
-function collectAttributeOps(element, attrNames, ops) {
-  for (const attr of attrNames) {
-    const val = element.getAttribute(attr);
-    if (val !== null) ops.push({ type: "attribute", property: attr, value: val });
-  }
-}
-function appendTransformDisplayOps(element, ops) {
-  const val = element.getAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR);
-  if (val !== null) {
-    ops.push({ type: "inline-style", property: "display", value: val || null });
-    ops.push({ type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: null });
-  }
-}
-function buildClearPathOffsetPatches(element) {
-  const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
-  const ops = [
-    { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: null },
-    { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: null },
-    { type: "inline-style", property: "translate", value: originalInlineTranslate || null },
-    { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
-}
-var BOX_SIZE_STYLE_PROPS = [
-  "width",
-  "height",
-  "min-width",
-  "min-height",
-  "max-width",
-  "max-height",
-  "flex-basis",
-  "flex-grow",
-  "flex-shrink",
-  "box-sizing",
-  "scale",
-  "transform-origin",
-  "display"
-];
-var BOX_SIZE_ORIG_ATTRS = [
-  [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
-  [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
-  // Records a measurement rather than a style, so it restores nothing.
-  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
-  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
-  [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
-  [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
-  [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
-  [STUDIO_ORIGINAL_MAX_HEIGHT_ATTR, "max-height"],
-  [STUDIO_ORIGINAL_FLEX_BASIS_ATTR, "flex-basis"],
-  [STUDIO_ORIGINAL_FLEX_GROW_ATTR, "flex-grow"],
-  [STUDIO_ORIGINAL_FLEX_SHRINK_ATTR, "flex-shrink"],
-  [STUDIO_ORIGINAL_BOX_SIZING_ATTR, "box-sizing"],
-  [STUDIO_ORIGINAL_SCALE_ATTR, "scale"],
-  [STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR, "transform-origin"],
-  [STUDIO_ORIGINAL_DISPLAY_ATTR, "display"],
-  [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, ""]
-];
-function buildBoxSizePatches(element) {
-  const ops = [];
-  collectInlineStyleOps(element, [STUDIO_WIDTH_PROP, STUDIO_HEIGHT_PROP], ops);
-  collectInlineStyleOps(element, BOX_SIZE_STYLE_PROPS, ops);
-  ops.push({ type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    BOX_SIZE_ORIG_ATTRS.map(([attr]) => attr),
-    ops
-  );
-  return ops;
-}
-function buildClearBoxSizePatches(element) {
-  const ops = [
-    { type: "inline-style", property: STUDIO_WIDTH_PROP, value: null },
-    { type: "inline-style", property: STUDIO_HEIGHT_PROP, value: null },
-    { type: "attribute", property: STUDIO_BOX_SIZE_ATTR, value: null }
-  ];
-  for (const [attrName, styleProp] of BOX_SIZE_ORIG_ATTRS) {
-    const origVal = element.getAttribute(attrName);
-    if (origVal !== null && styleProp) {
-      ops.push({ type: "inline-style", property: styleProp, value: origVal || null });
-    }
-    ops.push({ type: "attribute", property: attrName, value: null });
-  }
-  return ops;
-}
-function buildClearRotationPatches(element) {
-  const origInlineRotate = element.getAttribute(STUDIO_ORIGINAL_INLINE_ROTATE_ATTR);
-  const origRotationTransformOrigin = element.getAttribute(
-    STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR
-  );
-  const ops = [
-    { type: "inline-style", property: STUDIO_ROTATION_PROP, value: null },
-    { type: "inline-style", property: "rotate", value: origInlineRotate || null },
-    {
-      type: "inline-style",
-      property: "transform-origin",
-      value: origRotationTransformOrigin !== null ? origRotationTransformOrigin || null : null
-    },
-    { type: "attribute", property: STUDIO_ROTATION_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ROTATION_DRAFT_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_INLINE_ROTATE_ATTR, value: null },
-    { type: "attribute", property: STUDIO_ORIGINAL_ROTATION_TRANSFORM_ORIGIN_ATTR, value: null }
-  ];
-  appendTransformDisplayOps(element, ops);
-  return ops;
-}
-
-// src/hooks/gsapRuntimeKeyframes.ts
 var FLAT_SKIP_KEYS = /* @__PURE__ */ new Set([
   "ease",
   "duration",
@@ -33382,7 +33498,6 @@ var ROTATION_CHANNELS = [
   ...["rotation", "rotationX", "rotationY", "rotationZ"],
   ...["rotate", "rotateX", "rotateY", "rotateZ"]
 ];
-var gsapRendersTransform = (el) => !!el._gsap?.renderTransform;
 function gsapWritesPosition(el) {
   return gsapRendersTransform(el) || gsapWritesChannels(el, MOVE_CHANNELS);
 }
@@ -33756,7 +33871,10 @@ function createManualOffsetDragMember(input) {
     }
   }
   const initialPathOffset = captureStudioPathOffset(input.element);
-  const gestureToken = beginStudioManualEditGesture(input.element);
+  const gestureToken = beginStudioManualEditGesture(
+    input.element,
+    input.gesture === "resize" ? "resize" : "move"
+  );
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset, {
     scaleX: input.rect.editScaleX,
     scaleY: input.rect.editScaleY,
@@ -34710,10 +34828,13 @@ function startGesture(kind, e, opts, options) {
         manualEditDragToken = result.member.gestureToken;
         if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
-        manualEditDragToken = beginStudioManualEditGesture(sel.element);
+        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize");
       }
     } else {
-      manualEditDragToken = beginStudioManualEditGesture(sel.element);
+      manualEditDragToken = beginStudioManualEditGesture(
+        sel.element,
+        kind === "rotate" ? "rotate" : "resize"
+      );
     }
   }
   try {
@@ -35413,25 +35534,31 @@ function useDomEditNudge(params) {
   paramsRef.current = params;
   const commitSession = () => {
     const session = sessionRef.current;
-    if (!session) return;
+    if (!session) return void 0;
     sessionRef.current = null;
     if (session.timer) clearTimeout(session.timer);
-    const updates = session.members.map((member) => ({
-      selection: member.selection,
-      next: applyManualOffsetNudgeCommit(member, session.accum),
-      plainTranslate: member.plainTranslate
-    }));
     const p = paramsRef.current;
-    const commit = session.isGroup ? p.onGroupPathOffsetCommitRef.current(updates) : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
-      plainTranslate: updates[0].plainTranslate
-    });
-    void Promise.resolve(commit).catch(() => {
-      for (const member of session.members) {
-        if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
-          restoreStudioPathOffset(member.element, member.initialPathOffset);
+    let saved2;
+    try {
+      const updates = session.members.map((member) => ({
+        selection: member.selection,
+        next: applyManualOffsetNudgeCommit(member, session.accum),
+        plainTranslate: member.plainTranslate
+      }));
+      const commit = session.isGroup ? p.onGroupPathOffsetCommitRef.current(updates) : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+        plainTranslate: updates[0].plainTranslate
+      });
+      saved2 = Promise.resolve(commit).catch(() => {
+        for (const member of session.members) {
+          if (isStudioManualEditGestureCurrent(member.element, member.gestureToken)) {
+            restoreStudioPathOffset(member.element, member.initialPathOffset);
+          }
         }
-      }
-    }).finally(() => endManualOffsetDragMembers(session.members));
+      }).finally(() => endManualOffsetDragMembers(session.members));
+      return saved2;
+    } finally {
+      session.endPendingEdit(saved2);
+    }
   };
   const commitSessionRef = useRef64(commitSession);
   commitSessionRef.current = commitSession;
@@ -35442,6 +35569,7 @@ function useDomEditNudge(params) {
     if (session.timer) clearTimeout(session.timer);
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
+    session.endPendingEdit();
   }, [params.allowCanvasMovement]);
   const beginSession = (event) => {
     const p = paramsRef.current;
@@ -35461,7 +35589,10 @@ function useDomEditNudge(params) {
     }
     if (members.length === 0) return null;
     p.onManualDragStartRef.current?.();
-    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null };
+    let endPendingEdit = () => {
+    };
+    trackStudioPendingEdit(new Promise((resolve) => endPendingEdit = resolve));
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, endPendingEdit };
   };
   const handleKeyDown = (event) => {
     const p = paramsRef.current;
@@ -35483,14 +35614,18 @@ function useDomEditNudge(params) {
   useMountEffect(() => {
     const listener2 = (event) => handleKeyDownRef.current(event);
     window.addEventListener("keydown", listener2, true);
+    const stopCommitOnUndoDrain = addStudioPendingEditFlushListener(
+      () => commitSessionRef.current()
+    );
     return () => {
       window.removeEventListener("keydown", listener2, true);
+      stopCommitOnUndoDrain();
       commitSessionRef.current();
     };
   });
   const selectionKey = selectionIdentityKey(params.selection);
   const groupSelectionsKey = groupSelectionsIdentityKey(params.groupSelections);
-  useEffect44(() => () => commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
+  useEffect44(() => () => void commitSessionRef.current(), [selectionKey, groupSelectionsKey]);
   useEffect44(() => {
     const targets = params.groupSelections.length > 1 ? params.groupSelections : params.selection ? [params.selection] : [];
     if (!params.allowCanvasMovement || !canCanvasNudgeTargets(targets)) return;
@@ -37166,7 +37301,7 @@ function useInlineTextEdit({
         original: element.innerHTML,
         outline: element.style.outline,
         outlineOffset: element.style.outlineOffset,
-        gesture: beginStudioManualEditGesture(element)
+        gesture: beginStudioManualEditGesture(element, "edit")
       };
       element.style.outline = EDITING_OUTLINE;
       element.style.outlineOffset = "2px";
@@ -37194,9 +37329,11 @@ function useInlineTextEdit({
     let save = () => {
     };
     trackStudioPendingEdit(new Promise((resolve) => save = resolve));
-    noteStudioManualEditSave(open.element);
-    teardown();
-    save(onCommit({ element: open.element, html: html2, previousHtml: open.original }));
+    const commitText = () => {
+      teardown();
+      return onCommit({ element: open.element, html: html2, previousHtml: open.original });
+    };
+    save(countStudioManualEditSave(open.element, commitText));
   }, [onCommit, teardown]);
   const cancel = useCallback59(() => {
     const open = openRef.current;
@@ -37649,29 +37786,20 @@ var DomEditOverlay = memo26(function DomEditOverlay2({
     return () => onTextEditingChangeRef.current?.(false);
   }, [inlineText.editing]);
   const onPathOffsetCommitRef = useRef70(onPathOffsetCommit);
-  onPathOffsetCommitRef.current = (sel, ...rest) => {
-    noteStudioManualEditSave(sel.element);
-    return onPathOffsetCommit(sel, ...rest);
-  };
+  onPathOffsetCommitRef.current = (sel, ...rest) => countStudioManualEditSave(sel.element, () => onPathOffsetCommit(sel, ...rest));
   const onGroupPathOffsetCommitRef = useRef70(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = (updates) => {
-    if (updates[0]) noteStudioManualEditSave(updates[0].selection.element);
-    return onGroupPathOffsetCommit(updates);
+    const save = () => onGroupPathOffsetCommit(updates);
+    return updates[0] ? countStudioManualEditSave(updates[0].selection.element, save) : save();
   };
   const onBoxSizeCommitRef = useRef70(onBoxSizeCommit);
-  onBoxSizeCommitRef.current = (sel, ...rest) => {
-    noteStudioManualEditSave(sel.element);
-    return onBoxSizeCommit(sel, ...rest);
-  };
+  onBoxSizeCommitRef.current = (sel, ...rest) => countStudioManualEditSave(sel.element, () => onBoxSizeCommit(sel, ...rest));
   const onRotationCommitRef = useRef70(onRotationCommit);
-  onRotationCommitRef.current = (sel, next) => {
-    noteStudioManualEditSave(sel.element);
-    return onRotationCommit(sel, next);
-  };
+  onRotationCommitRef.current = (sel, next) => countStudioManualEditSave(sel.element, () => onRotationCommit(sel, next));
   const onStyleCommitRef = useRef70(onStyleCommit);
   onStyleCommitRef.current = onStyleCommit && ((property, value) => {
-    if (selectionRef.current) noteStudioManualEditSave(selectionRef.current.element);
-    return onStyleCommit(property, value);
+    const save = () => onStyleCommit(property, value);
+    return selectionRef.current ? countStudioManualEditSave(selectionRef.current.element, save) : save();
   });
   const onBlockedMoveRef = useRef70(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
@@ -42444,10 +42572,8 @@ var SnapToolbar = memo28(function SnapToolbar2() {
   useEffect55(() => {
     const handleKeyDown = (e) => {
       if (e.defaultPrevented) return;
-      const t2 = e.target;
-      if (t2 instanceof HTMLInputElement || t2 instanceof HTMLTextAreaElement) return;
-      if (t2 instanceof HTMLElement && t2.isContentEditable) return;
-      if (t2 instanceof HTMLIFrameElement) return;
+      if (ownsPlainKeys(e.target)) return;
+      if (e.target instanceof HTMLIFrameElement) return;
       if (e.key === "s" && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
         updatePrefs({ snapEnabled: !prefs.snapEnabled });
@@ -42824,6 +42950,9 @@ import { useCallback as useCallback67, useMemo as useMemo44 } from "react";
 // src/hooks/useGsapTweenCache.ts
 import { useEffect as useEffect57, useMemo as useMemo43, useRef as useRef77, useState as useState49, useCallback as useCallback66 } from "react";
 
+// src/hooks/gsapRuntimeBridge.ts
+import { isXYPositionWrite } from "@hyperframes/parsers/gsap-constants";
+
 // src/hooks/gsapRuntimeReaders.ts
 import { classifyPropertyGroup as classifyPropertyGroup3 } from "@hyperframes/core/gsap-parser";
 import {
@@ -43005,6 +43134,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
 }
 
 // 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) => ({
@@ -43099,7 +43229,11 @@ async function commitFlatViaKeyframes(selection, anim, properties, callbacks, be
   if (runtime && ts !== null) {
     const { gsapLib, el, mainTl } = runtime;
     const draggedValues = {};
-    for (const key2 of Object.keys(properties)) {
+    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;
     }
@@ -43573,7 +43707,7 @@ 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 && a.propertyGroup === "position";
+  const isPosWrite = (a) => a.targetSelector === selector && isXYPositionWrite(a);
   if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
     const dupes = fresh.filter(isPosWrite);
@@ -43627,7 +43761,7 @@ 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
+      (a) => a.targetSelector === posAnim.targetSelector && a.propertyGroup === posAnim.propertyGroup && isXYPositionWrite(a) === isXYPositionWrite(posAnim)
     );
     if (freshMatch && freshMatch.id !== posAnim.id) {
       posAnim = freshMatch;
@@ -48839,14 +48973,199 @@ import {
   audioGainToFaderPosition as audioGainToFaderPosition2,
   audioGainToText as audioGainToText2
 } from "@hyperframes/core/audio-gain";
+
+// src/components/editor/mediaAudioEdits.ts
+import {
+  HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR4,
+  RATE_TARGET,
+  parseAutomation as parseAutomation3,
+  serializeAutomation as serializeAutomation2
+} from "@hyperframes/core/audio-automation";
+import { HF_AUDIO_CARVE_ATTR as HF_AUDIO_CARVE_ATTR2 } from "@hyperframes/core/audio-carve";
+import { HF_AUDIO_FADE_IN_ATTR as HF_AUDIO_FADE_IN_ATTR2, HF_AUDIO_FADE_OUT_ATTR as HF_AUDIO_FADE_OUT_ATTR2 } from "@hyperframes/core/audio-fade";
+import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR4 } from "@hyperframes/core/audio-fx";
+import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR3 } from "@hyperframes/core/audio-groups";
+var MEDIA_LINK_ATTR = "data-link";
+var SOUND_KEPT_ON_LINKED_AUDIO_STAGE = "Background removed. Sound kept on a linked audio track.";
+var MOVED_SOUND_ATTRS = [
+  "data-volume",
+  HF_AUDIO_FADE_IN_ATTR2,
+  HF_AUDIO_FADE_OUT_ATTR2,
+  HF_AUDIO_FX_ATTR4,
+  HF_AUDIO_CARVE_ATTR2,
+  HF_AUDIO_GROUP_ATTR3
+];
+var COPIED_TIMING_ATTRS = [
+  "start",
+  "end",
+  "duration",
+  "media-start",
+  "playback-start",
+  "playback-rate",
+  "source-duration"
+];
+var htmlAttr = (property, value) => ({
+  type: "html-attribute",
+  property,
+  value
+});
+var dataAttr = (property, value) => ({
+  type: "attribute",
+  property,
+  value
+});
+function stripDataPrefix(name) {
+  return name.startsWith("data-") ? name.slice("data-".length) : name;
+}
+function probedHasAudioValue(probedHasAudio) {
+  if (probedHasAudio === null) return null;
+  return probedHasAudio ? "true" : "false";
+}
+function mutedToggleOps(input) {
+  const muted = htmlAttr("muted", input.nextMuted ? "true" : null);
+  if (!input.isVideo) return [muted];
+  const hasAudio = input.nextMuted ? null : probedHasAudioValue(input.probedHasAudio);
+  return [muted, dataAttr("has-audio", hasAudio)];
+}
+function hasAudioToggleOps(next) {
+  return next ? [dataAttr("has-audio", "true"), htmlAttr("muted", null)] : [dataAttr("has-audio", null), htmlAttr("muted", "true")];
+}
+function cutoutOps(input) {
+  const src = htmlAttr("src", input.cutoutSrc);
+  return input.isVideo ? [src, htmlAttr("muted", "true"), dataAttr("has-audio", null)] : [src];
+}
+function firstFreeName(base2, taken) {
+  if (!taken.has(base2)) return base2;
+  let n = 2;
+  while (taken.has(`${base2}-${n}`)) n += 1;
+  return `${base2}-${n}`;
+}
+function mintLinkId(doc) {
+  const taken = /* @__PURE__ */ new Set();
+  for (const el of Array.from(doc.querySelectorAll(`[id], [${MEDIA_LINK_ATTR}]`))) {
+    if (el.id) taken.add(el.id);
+    const link = el.getAttribute(MEDIA_LINK_ATTR);
+    if (link) taken.add(link);
+  }
+  return firstFreeName("link", taken);
+}
+function firstFreeTrackIndex(source) {
+  const used = new Set(
+    Array.from(source.matchAll(/\bdata-track-index=["'](-?\d+)["']/g), (m) => Number(m[1]))
+  );
+  let track2 = 0;
+  while (used.has(track2)) track2 += 1;
+  return track2;
+}
+function splitAutomation(raw) {
+  let lanes;
+  try {
+    lanes = parseAutomation3(raw).lanes;
+  } catch {
+    return { videoKeeps: null, audioTakes: raw };
+  }
+  const rateLanes = lanes.filter((lane) => lane.target === RATE_TARGET);
+  const soundLanes = lanes.filter((lane) => lane.target !== RATE_TARGET);
+  return {
+    videoKeeps: rateLanes.length > 0 ? serializeAutomation2({ version: 1, lanes: rateLanes }) : null,
+    audioTakes: serializeAutomation2({ version: 1, lanes: [...soundLanes, ...rateLanes] })
+  };
+}
+function formatAttrs(attrs) {
+  return attrs.map(([name, value]) => `${name}="${escapeHtmlAttribute(value)}"`).join(" ");
+}
+function insertBeforeTarget(source, target, markup) {
+  const match = findTagByTarget(source, target);
+  if (!match) return source;
+  const lineStart = source.lastIndexOf("\n", match.start) + 1;
+  const indent = /^[ \t]*$/.test(source.slice(lineStart, match.start)) ? source.slice(lineStart, match.start) : "";
+  const separator = indent ? `
+${indent}` : "";
+  return `${source.slice(0, match.start)}${markup}${separator}${source.slice(match.start)}`;
+}
+function buildKeepSoundCutoutEdit(input) {
+  const { video, target } = input;
+  const linkId = mintLinkId(video.ownerDocument);
+  const originalSrc = video.getAttribute("src") ?? "";
+  const movedSound = [];
+  const ops = [...cutoutOps({ isVideo: true, cutoutSrc: input.cutoutSrc })];
+  for (const name of MOVED_SOUND_ATTRS) {
+    const value = video.getAttribute(name);
+    if (value === null) continue;
+    movedSound.push([name, value]);
+    ops.push(dataAttr(stripDataPrefix(name), null));
+  }
+  const automation = video.getAttribute(HF_AUDIO_AUTOMATION_ATTR4);
+  if (automation !== null) {
+    const { videoKeeps, audioTakes } = splitAutomation(automation);
+    movedSound.push([HF_AUDIO_AUTOMATION_ATTR4, audioTakes]);
+    ops.push(dataAttr(stripDataPrefix(HF_AUDIO_AUTOMATION_ATTR4), videoKeeps));
+  }
+  ops.push(dataAttr(stripDataPrefix(MEDIA_LINK_ATTR), linkId));
+  const prepareContent = (source) => {
+    const audioId = firstFreeName(
+      `${input.videoId || "video"}-audio`,
+      new Set(collectHtmlIds(source))
+    );
+    const timing = [];
+    for (const name of COPIED_TIMING_ATTRS) {
+      const value = readAttributeByTarget(source, target, name);
+      if (value !== void 0) timing.push([`data-${name}`, value]);
+    }
+    const attrs = [
+      ["id", audioId],
+      ["data-hf-id", `hf-${generateId()}`],
+      ["class", "clip"],
+      ["src", originalSrc],
+      ...timing,
+      ["data-track-index", String(firstFreeTrackIndex(source))],
+      [MEDIA_LINK_ATTR, linkId],
+      ...movedSound
+    ];
+    return insertBeforeTarget(source, target, `<audio ${formatAttrs(attrs)}></audio>`);
+  };
+  return { ops, prepareContent };
+}
+var isVideoSelection = (element) => element.tagName === "video";
+async function commitMutedToggle(ctx3, nextMuted) {
+  const isVideo = isVideoSelection(ctx3.element);
+  const probedHasAudio = isVideo && !nextMuted && ctx3.projectId && ctx3.projectSrc ? await resolveAssetHasAudio(ctx3.projectId, ctx3.projectSrc) : null;
+  await ctx3.commit(ctx3.element, mutedToggleOps({ isVideo, nextMuted, probedHasAudio }), {
+    label: "Edit muted"
+  });
+}
+async function commitHasAudioToggle(ctx3, next) {
+  await ctx3.commit(ctx3.element, hasAudioToggleOps(next), { label: "Edit has audio" });
+}
+async function commitCutout(ctx3, cutoutSrc, keepSound) {
+  const isVideo = isVideoSelection(ctx3.element);
+  const label = "Remove background";
+  const keep = isVideo && keepSound;
+  const landed = keep ? await commitKeepSoundCutout(ctx3, cutoutSrc, label) : await ctx3.commit(ctx3.element, cutoutOps({ isVideo, cutoutSrc }), { label });
+  if (!landed) throw new Error("Couldn't apply the cutout");
+  return keep ? SOUND_KEPT_ON_LINKED_AUDIO_STAGE : "Applied cutout";
+}
+function commitKeepSoundCutout(ctx3, cutoutSrc, label) {
+  const edit = buildKeepSoundCutoutEdit({
+    video: ctx3.element.element,
+    videoId: ctx3.element.id ?? null,
+    target: buildDomEditPatchTarget(ctx3.element),
+    cutoutSrc
+  });
+  return ctx3.commit(ctx3.element, edit.ops, { label, prepareContent: edit.prepareContent });
+}
+
+// src/components/editor/propertyPanelMediaSection.tsx
 import { Fragment as Fragment31, jsx as jsx110, jsxs as jsxs77 } from "react/jsx-runtime";
 function MediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground
 }) {
   const track2 = useTrackDesignInput();
@@ -48860,7 +49179,11 @@ function MediaSection({
   const { mediaStart, mediaStartAttr } = readClipInPoint(element.dataAttributes);
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted")
+  });
   const playbackRate = Number.parseFloat(element.dataAttributes["playback-rate"] ?? "1") || 1;
   const objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
@@ -48880,13 +49203,7 @@ function MediaSection({
     setRemoveProgress(null);
     setCreatePlate(false);
   }, [srcAttr]);
-  const applyCutoutResult = async (result) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
     track2("button", "Remove background");
@@ -48898,13 +49215,8 @@ function MediaSection({
         quality,
         onProgress: setRemoveProgress
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({
-        status: "complete",
-        progress: 100,
-        stage: "Applied cutout",
-        ...result
-      });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -49109,9 +49421,7 @@ function MediaSection({
             {
               trackName: "Muted",
               value: hasMuted ? "on" : "off",
-              onChange: (next) => {
-                void onSetHtmlAttribute("muted", next === "on" ? "true" : null);
-              },
+              onChange: (next) => void commitMutedToggle(mediaEdit, next === "on"),
               options: [
                 { label: "On", value: "on" },
                 { label: "Off", value: "off" }
@@ -49127,15 +49437,7 @@ function MediaSection({
           {
             trackName: "Has audio track",
             value: hasAudio ? "yes" : "no",
-            onChange: (next) => {
-              if (next === "yes") {
-                void onSetAttribute("has-audio", "true");
-                void onSetHtmlAttribute("muted", null);
-              } else {
-                void onSetAttribute("has-audio", "");
-                void onSetHtmlAttribute("muted", "true");
-              }
-            },
+            onChange: (next) => void commitHasAudioToggle(mediaEdit, next === "yes"),
             options: [
               { label: "Yes", value: "yes" },
               { label: "No", value: "no" }
@@ -58136,14 +58438,14 @@ function motionSectionLabel(args) {
 // src/components/editor/propertyPanelAudioFxGroup.tsx
 import { useMemo as useMemo58, useState as useState81 } from "react";
 import {
-  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
+  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR7,
   HF_AUDIO_FX_DATA_KEY as HF_AUDIO_FX_DATA_KEY2,
   parseAudioFxChain as parseAudioFxChain4,
   serializeAudioFxChain as serializeAudioFxChain5
 } from "@hyperframes/core/audio-fx";
 import {
   classifyAudioName as classifyAudioName4,
-  HF_AUDIO_CARVE_ATTR as HF_AUDIO_CARVE_ATTR3,
+  HF_AUDIO_CARVE_ATTR as HF_AUDIO_CARVE_ATTR4,
   normalizeCarveSettings as normalizeCarveSettings2
 } from "@hyperframes/core/audio-carve";
 import {
@@ -60464,13 +60766,13 @@ function useFxChainObserved(element, chain, carve, automation, onSetAttributeQui
 // src/components/editor/useFxCarve.ts
 import { useEffect as useEffect86, useRef as useRef101 } from "react";
 import {
-  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR4,
+  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR5,
   serializeAudioFxChain as serializeAudioFxChain3
 } from "@hyperframes/core/audio-fx";
 import {
   clipsOverlap,
   DEFAULT_CARVE as DEFAULT_CARVE3,
-  HF_AUDIO_CARVE_ATTR as HF_AUDIO_CARVE_ATTR2
+  HF_AUDIO_CARVE_ATTR as HF_AUDIO_CARVE_ATTR3
 } from "@hyperframes/core/audio-carve";
 import { resolveAudioGroups as resolveAudioGroups3, resolveCarveSourceIds as resolveCarveSourceIds2 } from "@hyperframes/core/audio-groups";
 
@@ -60637,7 +60939,7 @@ async function dropCarveOutput(chain, automation, onSetAttributeQuiet) {
   const kept = chain.nodes.filter((n) => !n.fromCarve);
   if (kept.length !== chain.nodes.length) {
     await onSetAttributeQuiet(
-      HF_AUDIO_FX_ATTR4,
+      HF_AUDIO_FX_ATTR5,
       kept.length ? serializeAudioFxChain3({ version: 1, nodes: kept }) : null
     );
   }
@@ -60690,7 +60992,7 @@ function useFxCarve(element, chain, carve, automation, onSetAttributeQuiet, writ
     });
     const generatedOutputStands = Boolean(next?.enabled) && (next?.sources.length ?? 0) > 0;
     if (!generatedOutputStands) await dropCarveOutput(chain, automation, onSetAttributeQuiet);
-    await onSetAttributeQuiet(HF_AUDIO_CARVE_ATTR2, next ? JSON.stringify(next) : null);
+    await onSetAttributeQuiet(HF_AUDIO_CARVE_ATTR3, next ? JSON.stringify(next) : null);
     if (carveNeedsReanalysis(carve, next)) await analyse(next);
   };
   const autoCarveInFlight = useRef101(false);
@@ -60703,7 +61005,7 @@ function useFxCarve(element, chain, carve, automation, onSetAttributeQuiet, writ
   const persistMeasuredCarve = async (measured) => {
     const { bands, carved, duck, voiceMix } = measured;
     const { next, carvedNodes, duckNode } = mintCarveNodes(chain, carved, duck);
-    await onSetAttributeQuiet(HF_AUDIO_FX_ATTR4, serializeAudioFxChain3(next));
+    await onSetAttributeQuiet(HF_AUDIO_FX_ATTR5, serializeAudioFxChain3(next));
     const lanes = carveLanes(carvedNodes, duckNode, duck, voiceMix, bands);
     const carriedOver = withoutCarveLanes(automation, chain);
     if (lanes.length > 0 || carriedOver.lanes.length !== automation.lanes.length) {
@@ -60763,7 +61065,7 @@ function useFxCarve(element, chain, carve, automation, onSetAttributeQuiet, writ
 
 // src/components/editor/propertyPanelAudioFxGroup.tsx
 import {
-  HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR3,
+  HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR4,
   HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG4,
   resolveAudioGroups as resolveAudioGroups4
 } from "@hyperframes/core/audio-groups";
@@ -60771,7 +61073,7 @@ import {
 // src/components/editor/useFxLevelling.ts
 import { useRef as useRef102, useState as useState80 } from "react";
 import {
-  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR5,
+  HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR6,
   serializeAudioFxChain as serializeAudioFxChain4
 } from "@hyperframes/core/audio-fx";
 import { levellingResult, removeLevelling } from "@hyperframes/core/audio-leveller";
@@ -60816,7 +61118,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
       const result = measureLevelling(audio);
       if (!result) return;
       trackLeveller("run");
-      await onSetAttributeQuiet(HF_AUDIO_FX_ATTR5, serializeAudioFxChain4(result.chain));
+      await onSetAttributeQuiet(HF_AUDIO_FX_ATTR6, serializeAudioFxChain4(result.chain));
       const lane = result.lane;
       if (lane) {
         void onSetAttributeQuiet(
@@ -60835,7 +61137,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
   const stopLevelAudition = () => {
     setAuditioningLevel(false);
     void onSetAttributeLive(
-      HF_AUDIO_FX_ATTR5,
+      HF_AUDIO_FX_ATTR6,
       chain.nodes.length ? serializeAudioFxChain4(chain) : null
     );
     void onSetAttributeLive(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(automation) || null);
@@ -60847,7 +61149,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
       if (!audio || run !== auditionRun.current) return;
       const result = measureLevelling(audio);
       if (!result || run !== auditionRun.current) return;
-      void onSetAttributeLive(HF_AUDIO_FX_ATTR5, serializeAudioFxChain4(result.chain));
+      void onSetAttributeLive(HF_AUDIO_FX_ATTR6, serializeAudioFxChain4(result.chain));
       const lane = result.lane;
       if (lane) {
         void onSetAttributeLive(
@@ -60868,7 +61170,7 @@ function useFxLevelling(element, chain, automation, onSetAttributeQuiet, onSetAt
   const removeLeveller = () => {
     trackLeveller("removed");
     const { chain: next, removedTarget } = removeLevelling(chain);
-    void onSetAttributeQuiet(HF_AUDIO_FX_ATTR5, serializeAudioFxChain4(next));
+    void onSetAttributeQuiet(HF_AUDIO_FX_ATTR6, serializeAudioFxChain4(next));
     if (removedTarget) {
       void onSetAttributeQuiet(
         HF_AUDIO_AUTOMATION_ATTR,
@@ -60892,7 +61194,7 @@ function auditionSpansFor(element) {
   if (element.tagName?.toLowerCase() !== HF_AUDIO_GROUP_TAG4 || !element.id) return [];
   const doc = element.element?.ownerDocument;
   if (!doc) return [];
-  return [...doc.querySelectorAll(`audio[${HF_AUDIO_GROUP_ATTR3}]`)].filter((member) => member.getAttribute(HF_AUDIO_GROUP_ATTR3) === element.id).flatMap((member) => {
+  return [...doc.querySelectorAll(`audio[${HF_AUDIO_GROUP_ATTR4}]`)].filter((member) => member.getAttribute(HF_AUDIO_GROUP_ATTR4) === element.id).flatMap((member) => {
     const span = auditionSpan(
       member.getAttribute("data-start") ?? void 0,
       member.getAttribute("data-duration") ?? void 0
@@ -61038,7 +61340,7 @@ function AudioFxGroup({
         // bypassing an effect is applied to the running graph, so a reload would
         // only interrupt the audio to reach the same state.
         onSetAttributeQuiet(
-          HF_AUDIO_FX_ATTR6,
+          HF_AUDIO_FX_ATTR7,
           next.nodes.length ? serializeAudioFxChain5(next) : null
         )
       ),
@@ -61048,11 +61350,11 @@ function AudioFxGroup({
         // Live writes skip the preview refresh entirely, so dragging a knob no
         // longer reloads the composition and restarts playback on every pixel.
         // The gesture-end write above is the one that resyncs.
-        onSetAttributeLive(HF_AUDIO_FX_ATTR6, next.nodes.length ? serializeAudioFxChain5(next) : null)
+        onSetAttributeLive(HF_AUDIO_FX_ATTR7, next.nodes.length ? serializeAudioFxChain5(next) : null)
       ),
       carve,
       onCarveChange: (next) => void setCarve(next),
-      onCarvePreview: (next) => onSetAttributeLive(HF_AUDIO_CARVE_ATTR3, JSON.stringify(next)),
+      onCarvePreview: (next) => onSetAttributeLive(HF_AUDIO_CARVE_ATTR4, JSON.stringify(next)),
       sourceOptions,
       trackKind: classifyAudioName4(element.id, element.element?.getAttribute("src")),
       onLevel: () => void runLeveller(),
@@ -61072,7 +61374,7 @@ function AudioFxGroup({
 // src/components/editor/useVolumeAutomation.ts
 import {
   HF_AUDIO_AUTOMATION_DATA_KEY as HF_AUDIO_AUTOMATION_DATA_KEY2,
-  RATE_TARGET,
+  RATE_TARGET as RATE_TARGET2,
   resolveAutomationRange as resolveAutomationRange6,
   sampleAutomationLane as sampleAutomationLane9,
   VOLUME_TARGET as VOLUME_TARGET2
@@ -61105,7 +61407,7 @@ function useVolumeAutomation(element, currentTime, onSetAttributeQuiet) {
   const current = Number.isFinite(parsed) ? parsed : 1;
   const volume = laneBinding(VOLUME_TARGET2, current);
   const rateAttr = Number.parseFloat(element.dataAttributes?.["playback-rate"] ?? "");
-  const rate = laneBinding(RATE_TARGET, Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1);
+  const rate = laneBinding(RATE_TARGET2, Number.isFinite(rateAttr) && rateAttr > 0 ? rateAttr : 1);
   return {
     volumeAutomated: volume.automated,
     automatedVolumeValue: volume.automatedValue,
@@ -61260,12 +61562,14 @@ function finiteSeconds(seconds) {
 // src/components/editor/propertyPanelFlatMediaSection.tsx
 import { Fragment as Fragment43, jsx as jsx160, jsxs as jsxs122 } from "react/jsx-runtime";
 function FlatMediaSection({
+  projectId = null,
   projectDir,
   element,
   styles,
   onSetStyle,
   onSetAttribute,
   onSetHtmlAttribute,
+  onSetAttributeBatch,
   onRemoveBackground,
   volumeAutomated,
   onAutomateVolume,
@@ -61293,7 +61597,11 @@ function FlatMediaSection({
   const fadeMax = clipDuration2 > 0 ? clipDuration2 : 10;
   const hasLoop = el.hasAttribute("loop");
   const hasMuted = el.hasAttribute("muted");
-  const hasAudio = element.dataAttributes["has-audio"] === "true";
+  const hasAudio = isVideoAudible({
+    tag: el.tagName,
+    hasAudioAttr: element.dataAttributes["has-audio"],
+    muted: el.hasAttribute("muted")
+  });
   const objectFit = styles["object-fit"] || "contain";
   const objectPosition = styles["object-position"] || "center";
   const srcAttr = el.getAttribute("src") ?? "";
@@ -61309,13 +61617,7 @@ function FlatMediaSection({
     setRemoveProgress(null);
     setCreatePlate(false);
   }, [srcAttr]);
-  const applyCutoutResult = async (result) => {
-    await onSetHtmlAttribute("src", result.outputPath);
-    if (isVideo) {
-      await onSetAttribute("has-audio", "");
-      await onSetHtmlAttribute("muted", "true");
-    }
-  };
+  const mediaEdit = { element, projectId, projectSrc, commit: onSetAttributeBatch };
   const runBackgroundRemoval = async () => {
     if (!onRemoveBackground || !projectSrc || removeBusy) return;
     track2("button", "Remove background");
@@ -61327,8 +61629,8 @@ function FlatMediaSection({
         quality,
         onProgress: setRemoveProgress
       });
-      await applyCutoutResult(result);
-      setRemoveProgress({ status: "complete", progress: 100, stage: "Applied cutout", ...result });
+      const stage = await commitCutout(mediaEdit, result.outputPath, hasAudio);
+      setRemoveProgress({ status: "complete", progress: 100, stage, ...result });
     } catch (error) {
       setRemoveProgress({
         status: "failed",
@@ -61551,7 +61853,7 @@ function FlatMediaSection({
         {
           label: "Muted",
           checked: hasMuted,
-          onChange: (next) => void onSetHtmlAttribute("muted", next ? "true" : null)
+          onChange: (next) => void commitMutedToggle(mediaEdit, next)
         }
       ),
       isVideo && /* @__PURE__ */ jsx160(
@@ -61559,15 +61861,7 @@ function FlatMediaSection({
         {
           label: "Has audio track",
           checked: hasAudio,
-          onChange: (next) => {
-            if (next) {
-              void onSetAttribute("has-audio", "true");
-              void onSetHtmlAttribute("muted", null);
-            } else {
-              void onSetAttribute("has-audio", "");
-              void onSetHtmlAttribute("muted", "true");
-            }
-          }
+          onChange: (next) => void commitHasAudioToggle(mediaEdit, next)
         }
       )
     ] }),
@@ -65069,7 +65363,6 @@ function PropertyPanelFlat({
   clipboardCopied,
   onCopyElementInfo,
   projectId,
-  projectDir,
   assets,
   previewIframeRef,
   onClearSelection,
@@ -65081,8 +65374,6 @@ function PropertyPanelFlat({
   onSetAttributeLive,
   onSetAttributeQuiet,
   onApplyColorGradingScope,
-  onSetHtmlAttribute,
-  onRemoveBackground,
   onSetText,
   onSetTextFieldStyle,
   onPreviewTextFieldStyle,
@@ -65137,7 +65428,8 @@ function PropertyPanelFlat({
   onUnroll,
   onUpdateKeyframeEase,
   onUpdateSegmentEase,
-  onSetAllKeyframeEases
+  onSetAllKeyframeEases,
+  ...forwardedProps
 }) {
   const [openGroupId, setOpenGroupId] = useState93(
     () => isTextEditableSelection(element) ? "text" : showEditableSections ? "style" : sections.media ? "media" : (
@@ -65446,13 +65738,12 @@ function PropertyPanelFlat({
       content: /* @__PURE__ */ jsx172(
         FlatMediaSection,
         {
-          projectDir,
+          ...forwardedProps,
+          projectId,
           element,
           styles,
           onSetStyle,
           onSetAttribute,
-          onSetHtmlAttribute,
-          onRemoveBackground,
           ...volumeAutomation
         }
       )
@@ -65730,7 +66021,6 @@ import { createElement as createElement3 } from "react";
 var PropertyPanel = memo36(function PropertyPanel2(props) {
   const {
     projectId,
-    projectDir,
     assets,
     element,
     multiSelectCount = 0,
@@ -65744,8 +66034,6 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
     onSetAttribute,
     onSetAttributeLive,
     onApplyColorGradingScope,
-    onSetHtmlAttribute,
-    onRemoveBackground,
     onSetManualOffset,
     onSetManualSize,
     onSetManualRotation,
@@ -65984,18 +66272,7 @@ var PropertyPanel = memo36(function PropertyPanel2(props) {
         },
         selectionIdentityKey2(element)
       ),
-      sections.media && /* @__PURE__ */ jsx175(
-        MediaSection,
-        {
-          projectDir,
-          element,
-          styles,
-          onSetStyle,
-          onSetAttribute,
-          onSetHtmlAttribute,
-          onRemoveBackground
-        }
-      ),
+      sections.media && /* @__PURE__ */ jsx175(MediaSection, { ...props, element, styles }),
       sections.layout && /* @__PURE__ */ jsxs136(Section, { title: "Layout", icon: /* @__PURE__ */ jsx175(Move, { size: 15 }), children: [
         /* @__PURE__ */ jsxs136("div", { className: RESPONSIVE_GRID, children: [
           /* @__PURE__ */ jsxs136("div", { className: "flex items-center gap-1", children: [
@@ -69990,20 +70267,43 @@ function diffRestoreDocs(prevDoc, nextDoc) {
   });
   return prevRest === nextRest ? changedElementKeys : null;
 }
-function syncElementAttributes(target, source) {
+function syncElementAttributes(target, source, base2) {
+  const draws = base2 && studioGestureDraws(target);
+  const merged = draws ? keepDrawn(target, source, base2, draws) : source;
   for (const name of [...target.getAttributeNames()]) {
-    if (!source.hasAttribute(name)) target.removeAttribute(name);
+    if (!merged.hasAttribute(name)) target.removeAttribute(name);
   }
-  for (const name of source.getAttributeNames()) {
-    target.setAttribute(name, source.getAttribute(name) ?? "");
+  for (const name of merged.getAttributeNames()) {
+    target.setAttribute(name, merged.getAttribute(name) ?? "");
   }
 }
-function syncStaleEditMarks(doc, restored) {
-  const restoredDoc = parseSavedSource(restored);
+function keepDrawn(live, source, base2, draws) {
+  const merged = source.cloneNode(false);
+  const keepsMark = draws.includes("translate");
+  for (const name of live.getAttributeNames().filter((n) => n !== "style")) {
+    const value = live.getAttribute(name);
+    const mark = keepsMark && name === STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR;
+    if (mark || value !== base2.getAttribute(name)) merged.setAttribute(name, value);
+  }
+  keepDrawnStyle(live, base2, merged, draws);
+  return merged;
+}
+function keepDrawnStyle(live, base2, merged, draws) {
+  const value = (prop) => live.style.getPropertyValue(prop);
+  const drawn = (prop) => draws.includes(prop) || value(prop) !== base2.style.getPropertyValue(prop);
+  const props = /* @__PURE__ */ new Set([...Array.from(live.style), ...Array.from(base2.style), ...draws]);
+  for (const prop of [...props].filter(drawn)) {
+    if (value(prop))
+      merged.style.setProperty(prop, value(prop), live.style.getPropertyPriority(prop));
+    else merged.style.removeProperty(prop);
+  }
+}
+function syncStaleEditMarks(doc, file) {
+  const [restoredDoc, previousDoc] = [file.restored, file.previous].map(parseSavedSource);
   for (const live of doc.querySelectorAll(STUDIO_EDIT_ATTRS.map((attr) => `[${attr}]`).join())) {
     const source = findAuthoredElement(restoredDoc, live);
     if (source && STUDIO_EDIT_ATTRS.some((a) => live.getAttribute(a) !== source.getAttribute(a))) {
-      syncElementAttributes(live, source);
+      syncElementAttributes(live, source, findAuthoredElement(previousDoc, live) ?? void 0);
     }
   }
 }
@@ -70023,7 +70323,7 @@ function liveScopes(doc, path, isActive) {
   if (isActive) return [doc];
   return Array.from(doc.querySelectorAll(`[data-composition-file="${CSS.escape(path)}"]`));
 }
-function scopeTargets(scope, keys, restoredByKey) {
+function scopeTargets(scope, keys, restoredByKey, previousByKey) {
   const liveByKey = identityElementMap(scope);
   if (!liveByKey) return null;
   const targets = [];
@@ -70031,7 +70331,7 @@ function scopeTargets(scope, keys, restoredByKey) {
     const live = liveByKey.get(key2);
     const restored = restoredByKey.get(key2);
     if (!live || !restored || live.hasAttribute("data-hf-inner-root")) return null;
-    targets.push({ live, restored });
+    targets.push({ live, restored, previous: previousByKey.get(key2) });
   }
   return targets;
 }
@@ -70042,9 +70342,10 @@ function fileTargets(doc, path, isActive, file) {
   if (scripted === null) return null;
   const keys = diffRestoreDocs(prevDoc, nextDoc);
   const restoredByKey = identityElementMap(nextDoc);
-  if (!keys || !restoredByKey) return null;
+  const previousByKey = identityElementMap(prevDoc);
+  if (!keys || !restoredByKey || !previousByKey) return null;
   const found = liveScopes(doc, path, isActive).map(
-    (scope) => scopeTargets(scope, keys, restoredByKey)
+    (scope) => scopeTargets(scope, keys, restoredByKey, previousByKey)
   );
   if (!found.length || found.includes(null)) return null;
   return { targets: found.flat(), scripted };
@@ -70074,11 +70375,14 @@ function showRestoreInPlace(iframe, activeCompPath, files, currentTime) {
   const win = iframe?.contentWindow;
   const plan = doc && win ? planRestoreTargets(doc, activeCompPath ?? "index.html", files) : null;
   if (!iframe || !win || !plan || plan.scripted) return null;
-  const before = plan.targets.map(({ live }) => [live, live.cloneNode(false)]);
-  for (const { live, restored } of plan.targets) syncElementAttributes(live, restored);
+  const before = plan.targets.map(
+    ({ live, restored }) => [live, live.cloneNode(false), restored]
+  );
+  for (const { live, restored, previous } of plan.targets)
+    syncElementAttributes(live, restored, previous);
   const putBack = (time) => {
     if (iframe.contentDocument !== doc) return false;
-    for (const [live, attributes] of before) syncElementAttributes(live, attributes);
+    for (const [live, attributes, shown2] of before) syncElementAttributes(live, attributes, shown2);
     return finalizeInPlace(iframe, win, time);
   };
   if (finalizeInPlace(iframe, win, currentTime)) return putBack;
@@ -70099,16 +70403,23 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
     reloadPreview();
     return "full";
   }
-  for (const target of plan.targets) syncElementAttributes(target.live, target.restored);
+  for (const target of plan.targets)
+    syncElementAttributes(target.live, target.restored, target.previous);
   const active = files[activeDocPath];
   const restoredScript = active ? extractGsapScriptText(active.restored) : null;
   const previousScript = active ? extractGsapScriptText(active.previous) : null;
-  if (restoredScript && restoredScript !== previousScript) {
-    syncStaleEditMarks(doc, active.restored);
+  const reparse = plan.scripted ? plan.targets.map(({ live }) => live).filter((el) => "_gsap" in el) : [];
+  if (reparse.length && !restoredScript) {
+    reloadPreview();
+    return "full";
+  }
+  if (restoredScript && (restoredScript !== previousScript || reparse.length)) {
+    syncStaleEditMarks(doc, active);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
-      authoredHtml: active.restored
+      authoredHtml: active.restored,
+      reparse
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();
@@ -70122,11 +70433,11 @@ function applyUndoRestoreToPreview(iframe, activeCompPath, files, currentTime, r
 }
 
 // src/player/lib/automationStoreSync.ts
-import { HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR4 } from "@hyperframes/core/audio-automation";
-import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR7 } from "@hyperframes/core/audio-fx";
+import { HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR5 } from "@hyperframes/core/audio-automation";
+import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR8 } from "@hyperframes/core/audio-fx";
 import {
-  HF_AUDIO_FADE_IN_ATTR as HF_AUDIO_FADE_IN_ATTR2,
-  HF_AUDIO_FADE_OUT_ATTR as HF_AUDIO_FADE_OUT_ATTR2,
+  HF_AUDIO_FADE_IN_ATTR as HF_AUDIO_FADE_IN_ATTR3,
+  HF_AUDIO_FADE_OUT_ATTR as HF_AUDIO_FADE_OUT_ATTR3,
   readElementFades,
   readFadeSeconds as readFadeSeconds2
 } from "@hyperframes/core/audio-fade";
@@ -70134,8 +70445,8 @@ function syncedFields(doc, element, node) {
   const group = element.audioGroup ? groupInfoFor(doc, element.audioGroup) : null;
   const fades = readElementFades(node);
   return {
-    automation: node.getAttribute(HF_AUDIO_AUTOMATION_ATTR4) ?? void 0,
-    fxChain: node.getAttribute(HF_AUDIO_FX_ATTR7) ?? void 0,
+    automation: node.getAttribute(HF_AUDIO_AUTOMATION_ATTR5) ?? void 0,
+    fxChain: node.getAttribute(HF_AUDIO_FX_ATTR8) ?? void 0,
     fadeIn: storedFade(fades.fadeIn),
     fadeOut: storedFade(fades.fadeOut),
     audioGroupAutomation: group?.automation,
@@ -70161,10 +70472,10 @@ function syncStoredAutomationFromPreview(doc) {
 }
 var storedFade = (seconds) => seconds > 0 ? seconds : void 0;
 var STORED_FIELD = {
-  [HF_AUDIO_AUTOMATION_ATTR4]: (value) => ({ automation: value ?? void 0 }),
-  [HF_AUDIO_FX_ATTR7]: (value) => ({ fxChain: value ?? void 0 }),
-  [HF_AUDIO_FADE_IN_ATTR2]: (value) => ({ fadeIn: storedFade(readFadeSeconds2(value)) }),
-  [HF_AUDIO_FADE_OUT_ATTR2]: (value) => ({ fadeOut: storedFade(readFadeSeconds2(value)) })
+  [HF_AUDIO_AUTOMATION_ATTR5]: (value) => ({ automation: value ?? void 0 }),
+  [HF_AUDIO_FX_ATTR8]: (value) => ({ fxChain: value ?? void 0 }),
+  [HF_AUDIO_FADE_IN_ATTR3]: (value) => ({ fadeIn: storedFade(readFadeSeconds2(value)) }),
+  [HF_AUDIO_FADE_OUT_ATTR3]: (value) => ({ fadeOut: storedFade(readFadeSeconds2(value)) })
 };
 function syncStoredElementAttribute(target, attr, value) {
   const fields = STORED_FIELD[attr]?.(value);
@@ -70272,6 +70583,10 @@ function usePreviewPersistence({
     const result = await drainPendingDomEditSaves();
     if (result.status !== "clean") throw result.error;
   }, [drainPendingDomEditSaves]);
+  const settlePendingEdits = useCallback104(async () => {
+    await flushStudioPendingEdits();
+    await domEditSaveQueueRef.current?.waitForIdle();
+  }, []);
   const resetDomEditSaveQueueBreaker = useCallback104(() => {
     domEditSaveQueueRef.current?.reset();
     setDomEditSaveQueuePaused(null);
@@ -70335,6 +70650,7 @@ function usePreviewPersistence({
     queueDomEditSave,
     drainPendingDomEditSaves,
     waitForPendingDomEditSaves,
+    settlePendingEdits,
     domEditSaveQueuePaused,
     resetDomEditSaveQueueBreaker,
     applyCurrentStudioManualEditsToPreview,
@@ -71024,8 +71340,8 @@ function useTimelineEditGate(canEdit, showToast) {
 }
 
 // src/hooks/timelineAudioGroupVolume.ts
-import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR8 } from "@hyperframes/core/audio-fx";
-import { HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR5 } from "@hyperframes/core/audio-automation";
+import { HF_AUDIO_FX_ATTR as HF_AUDIO_FX_ATTR9 } from "@hyperframes/core/audio-fx";
+import { HF_AUDIO_AUTOMATION_ATTR as HF_AUDIO_AUTOMATION_ATTR6 } from "@hyperframes/core/audio-automation";
 
 // src/hooks/liveLanes.ts
 import { useRef as useRef132, useState as useState109 } from "react";
@@ -71164,8 +71480,8 @@ var GROUP_ATTR_TO_MIRROR = {
   "data-hidden": (value) => ({ audioGroupHidden: value !== null }),
   "data-volume": (value) => ({ audioGroupVolume: mirroredGroupVolume(value) }),
   "data-label": (value, groupId) => ({ audioGroupLabel: value ?? groupId }),
-  [HF_AUDIO_FX_ATTR8]: (value) => ({ audioGroupFxChain: value ?? void 0 }),
-  [HF_AUDIO_AUTOMATION_ATTR5]: (value) => ({ audioGroupAutomation: value ?? void 0 })
+  [HF_AUDIO_FX_ATTR9]: (value) => ({ audioGroupFxChain: value ?? void 0 }),
+  [HF_AUDIO_AUTOMATION_ATTR6]: (value) => ({ audioGroupAutomation: value ?? void 0 })
 };
 function syncStoredGroupAttribute(groupId, attr, value) {
   const toPatch = GROUP_ATTR_TO_MIRROR[attr];
@@ -71653,11 +71969,7 @@ function useTrackPendingTimelineEdit() {
     const key2 = fn;
     const cached5 = wrappedRef.current.get(key2);
     if (cached5) return cached5;
-    const wrapped = (...args) => {
-      const result = fn(...args);
-      trackStudioPendingEdit(result);
-      return result;
-    };
+    const wrapped = trackedStudioEdit(fn);
     wrappedRef.current.set(key2, wrapped);
     return wrapped;
   }, []);
@@ -71665,7 +71977,7 @@ function useTrackPendingTimelineEdit() {
 
 // src/hooks/timelineAudioGroupCreate.ts
 import { useCallback as useCallback114 } from "react";
-import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR4, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG5 } from "@hyperframes/core/audio-groups";
+import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR5, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG5 } from "@hyperframes/core/audio-groups";
 
 // src/hooks/timelineTrackVisibility.ts
 import { useCallback as useCallback113 } from "react";
@@ -71929,8 +72241,8 @@ function patchLiveAudioGroupState(iframe, elements, groupId, activeCompPath, res
     const target = findTimelineElementInIframe(iframe, element, activeCompPath);
     if (!target) continue;
     const next = restore ? restore.get(element) ?? null : groupId;
-    if (next) target.setAttribute(HF_AUDIO_GROUP_ATTR4, next);
-    else target.removeAttribute(HF_AUDIO_GROUP_ATTR4);
+    if (next) target.setAttribute(HF_AUDIO_GROUP_ATTR5, next);
+    else target.removeAttribute(HF_AUDIO_GROUP_ATTR5);
   }
   invalidateGroupInfoCache(iframe?.contentDocument);
 }
@@ -71938,7 +72250,7 @@ function captureAudioGroupState(iframe, elements, activeCompPath) {
   const prior = /* @__PURE__ */ new Map();
   for (const element of elements) {
     const target = findTimelineElementInIframe(iframe, element, activeCompPath);
-    prior.set(element, target?.getAttribute(HF_AUDIO_GROUP_ATTR4) ?? null);
+    prior.set(element, target?.getAttribute(HF_AUDIO_GROUP_ATTR5) ?? null);
   }
   return prior;
 }
@@ -71994,7 +72306,7 @@ async function createAudioGroupAndAssignMembers({
   reseekPreviewRuntime(previewIframe);
   const groupOperation = {
     type: "attribute",
-    property: HF_AUDIO_GROUP_ATTR4,
+    property: HF_AUDIO_GROUP_ATTR5,
     value: groupId
   };
   const groupPath = activeCompPath || "index.html";
@@ -73863,30 +74175,8 @@ function injectPreviewImportedFont(doc, asset) {
   style.textContent = importedFontFaceCss(asset);
   doc.head.appendChild(style);
 }
-function ensureImportedFontFace(html2, asset, sourceFile) {
-  const css2 = importedFontFaceCss(asset, toRelativeProjectAssetPath(sourceFile, asset.path));
-  if (html2.includes(css2)) return html2;
-  const styleRe = /<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i;
-  const styleMatch = styleRe.exec(html2);
-  if (styleMatch) {
-    const nextCss = `${styleMatch[2].trim()}
-${css2}`.trim();
-    return html2.replace(
-      styleMatch[0],
-      () => `<style data-hf-studio-fonts="true">
-${nextCss}
-</style>`
-    );
-  }
-  const styleTag = `<style data-hf-studio-fonts="true">
-${css2}
-</style>`;
-  if (/<\/head>/i.test(html2)) {
-    return html2.replace(/<\/head>/i, () => `  ${styleTag}
-  </head>`);
-  }
-  return `${styleTag}
-${html2}`;
+function importedFontFaceCssFor(asset, sourceFile) {
+  return importedFontFaceCss(asset, toRelativeProjectAssetPath(sourceFile, asset.path));
 }
 
 // src/hooks/domEditPersistFailure.ts
@@ -73904,6 +74194,13 @@ var DomEditPersistUnsafeValueError = class extends Error {
     this.alreadyToasted = options.alreadyToasted ?? false;
   }
 };
+var DomEditPersistPreparedWriteError = class extends Error {
+  alreadyToasted = true;
+  constructor(targetPath) {
+    super(`The edit saved but its follow-up write to ${targetPath} did not`);
+    this.name = "DomEditPersistPreparedWriteError";
+  }
+};
 function summarizeOperations(operations) {
   return operations.map((op) => `${op.type}:${op.property}`).join(", ");
 }
@@ -73923,7 +74220,7 @@ function getSelectionLabel(selection) {
   return selection.label || selection.selector || selection.id || "this element";
 }
 function wasAlreadyToasted(error) {
-  return (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) && error.alreadyToasted;
+  return (error instanceof DomEditPersistUnsafeValueError || error instanceof DomEditPersistPreparedWriteError || error instanceof StudioSaveHttpError) && error.alreadyToasted;
 }
 function reportDomEditPersistFailure(selection, operations, error, showToast) {
   const detail = getErrorDetail(error);
@@ -74154,16 +74451,16 @@ async function postPatchElement(projectId, targetPath, body, showToast) {
 }
 async function writePreparedContent(targetPath, patchedContent, prepare, writeProjectFile, showToast) {
   const preparedContent = prepare(patchedContent, targetPath);
-  if (preparedContent === patchedContent) return patchedContent;
+  if (preparedContent === patchedContent) return { content: patchedContent, failed: false };
   try {
     await writeProjectFile(targetPath, preparedContent, patchedContent);
-    return preparedContent;
+    return { content: preparedContent, failed: false };
   } catch (error) {
     showToast(
       `Saved, but couldn't finish updating ${targetPath}: ${getErrorDetail2(error)}`,
       "error"
     );
-    return patchedContent;
+    return { content: patchedContent, failed: true };
   }
 }
 
@@ -74191,7 +74488,8 @@ function useDomEditPersist({
       if (options?.shouldSave && !options.shouldSave()) return;
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       const completePersistence = (result, changed) => {
-        if (options?.skipRefresh && changed) reseekPreviewRuntime(previewIframeRef.current);
+        if (options?.skipRefresh && changed && !options.deferRender)
+          reseekPreviewRuntime(previewIframeRef.current);
         return result;
       };
       const readTarget = async () => {
@@ -74202,7 +74500,12 @@ function useDomEditPersist({
         return options?.shouldSave && !options.shouldSave() ? null : content;
       };
       const patchTarget = buildDomEditPatchTarget(selection);
-      const patchBody = { target: patchTarget, operations };
+      const font = options?.importedFont;
+      const patchBody = {
+        target: patchTarget,
+        operations,
+        ...font ? { fontFaceCss: importedFontFaceCssFor(font, targetPath) } : {}
+      };
       const unsafeFields = findUnsafeDomPatchValues2(patchBody);
       if (unsafeFields.length > 0) {
         const fields = formatUnsafeFieldList(unsafeFields);
@@ -74211,7 +74514,7 @@ function useDomEditPersist({
           alreadyToasted: true
         });
       }
-      if (onTrySdkPersist && !options?.prepareContent) {
+      if (onTrySdkPersist && !font && !options?.prepareContent) {
         const originalContent = await readTarget();
         if (originalContent === null) return;
         const cutover = await onTrySdkPersist(selection, operations, originalContent, targetPath, {
@@ -74233,19 +74536,22 @@ function useDomEditPersist({
         coalesceMs: options?.coalesceMs
       };
       const prepare = options?.prepareContent;
+      let preparedWriteFailed = false;
       const saved2 = await serializeStudioFileMutations(writeProjectFile, [targetPath], async () => {
         const originalContent = await readTarget();
         if (originalContent === null) return null;
         const patchData2 = await postPatchElement(pid, targetPath, patchBody, showToast);
         if (!patchData2.changed) return { patchData: patchData2, patchedContent: null, finalContent: null };
         const patchedContent2 = typeof patchData2.content === "string" ? patchData2.content : originalContent;
-        const finalContent2 = prepare ? await writePreparedContent(
+        const prepared = prepare ? await writePreparedContent(
           targetPath,
           patchedContent2,
           prepare,
           writeProjectFile,
           showToast
-        ) : patchedContent2;
+        ) : { content: patchedContent2, failed: false };
+        preparedWriteFailed = prepared.failed;
+        const finalContent2 = prepared.content;
         await editHistory.recordEdit({
           ...history2,
           files: { [targetPath]: { before: originalContent, after: finalContent2 } }
@@ -74278,10 +74584,12 @@ function useDomEditPersist({
       if (!options?.skipRefresh) {
         reloadPreview();
       }
-      return completePersistence(
+      const outcome = completePersistence(
         finalContent === patchedContent && typeof patchData.path === "string" && typeof patchData.version === "string" ? { sourceFile: patchData.path, version: patchData.version, changed: true } : void 0,
         true
       );
+      if (preparedWriteFailed) throw new DomEditPersistPreparedWriteError(targetPath);
+      return outcome;
     },
     [
       activeCompPath,
@@ -74299,9 +74607,10 @@ function useDomEditPersist({
     (selection, operations, options) => {
       const expectedProjectId = projectIdRef.current;
       if (!expectedProjectId) return Promise.reject(new Error("No active project"));
-      return queueDomEditSave(
+      const save = () => queueDomEditSave(
         () => performPersistDomEditOperations(selection, operations, options, expectedProjectId)
       );
+      return selection.element ? countStudioManualEditSave(selection.element, save) : save();
     },
     [performPersistDomEditOperations, projectIdRef, queueDomEditSave]
   );
@@ -74321,7 +74630,8 @@ function useDomEditPositionPatchCommit({
         label: options.label,
         coalesceKey: options.coalesceKey,
         coalesceMs: options.coalesceMs,
-        skipRefresh: options.skipRefresh ?? true
+        skipRefresh: options.skipRefresh ?? true,
+        deferRender: options.deferRender
       }).then(() => void 0).catch((error) => {
         if (error instanceof DomEditSaveQueueOpenError) throw error;
         if (!wasAlreadyToasted(error)) {
@@ -74457,7 +74767,7 @@ async function commitDomStyles(context, selection, styles) {
       label: "Edit layer style",
       // Inline styles are already live, so a reload would only blank the preview.
       skipRefresh: true,
-      prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
+      importedFont: importedFont ?? void 0
     }),
     shouldRevert: ownsAny,
     revert: () => {
@@ -74479,7 +74789,7 @@ async function commitDomStyles(context, selection, styles) {
 
 // src/hooks/useDomEditAttributeCommits.ts
 import { useCallback as useCallback123, useRef as useRef141 } from "react";
-import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR5, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG7 } from "@hyperframes/core/audio-groups";
+import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR6, HF_AUDIO_GROUP_TAG as HF_AUDIO_GROUP_TAG7 } from "@hyperframes/core/audio-groups";
 function resolveFullAttrName(attr, prefixData) {
   return prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
 }
@@ -74487,13 +74797,20 @@ function resolveOptimisticAttributeValue(attr, value) {
   if (value === null) return null;
   return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
 }
+function previewAttributeName(op) {
+  return op.type === "attribute" ? resolveFullAttrName(op.property, true) : op.property;
+}
+function previewAttributeValue(op) {
+  if (op.type === "html-attribute") return resolveOptimisticAttributeValue(op.property, op.value);
+  return op.value === "" ? null : op.value;
+}
 function setOrRemovePreviewAttribute(el, fullAttr, value) {
   if (value === null) {
     el.removeAttribute(fullAttr);
   } else {
     el.setAttribute(fullAttr, value);
   }
-  if (el.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG7 || fullAttr === HF_AUDIO_GROUP_ATTR5) {
+  if (el.tagName.toLowerCase() === HF_AUDIO_GROUP_TAG7 || fullAttr === HF_AUDIO_GROUP_ATTR6) {
     invalidateGroupInfoCache(el.ownerDocument);
   }
 }
@@ -74583,25 +74900,20 @@ function useDomEditAttributeCommits({
       previewIframeRef
     ]
   );
-  const commitDataAttributes = useCallback123(
-    async (selection, attrs, options) => {
+  const commitAttributeOps = useCallback123(
+    async (selection, ops, options) => {
       const iframe = previewIframeRef.current;
-      const entries = Object.entries(attrs).map(([attr, value]) => ({
-        attr,
-        fullAttr: resolveFullAttrName(attr, true),
-        value
+      const entries = ops.map((op) => ({
+        fullAttr: previewAttributeName(op),
+        value: previewAttributeValue(op)
       }));
-      const commitKey = `${options.coalescePrefix}:${entries.map((entry2) => entry2.attr).sort().join(",")}:${getDomEditTargetKey(selection)}`;
+      const commitKey = `${options.coalescePrefix}:${ops.map((op) => op.property).sort().join(",")}:${getDomEditTargetKey(selection)}`;
       const isLatestCommit = bumpDomEditCommitMapVersion(
         domAttributeCommitVersionRef.current,
         commitKey
       );
-      const ops = entries.map((entry2) => ({
-        type: "attribute",
-        property: entry2.attr,
-        value: entry2.value
-      }));
       let captured = null;
+      let landed = false;
       await runDomEditCommit({
         capture: () => {
           captured = captureMultiAttributeElement(
@@ -74614,16 +74926,16 @@ function useDomEditAttributeCommits({
         apply: () => {
           if (!captured) return;
           for (const entry2 of entries) {
-            const nextValue = entry2.value === null || entry2.value === "" ? null : entry2.value;
-            setOrRemovePreviewAttribute(captured.element, entry2.fullAttr, nextValue);
+            setOrRemovePreviewAttribute(captured.element, entry2.fullAttr, entry2.value);
           }
         },
         persist: () => persistDomEditOperations(selection, ops, {
           label: options.label,
           coalesceKey: commitKey,
-          skipRefresh: options.skipRefresh
+          skipRefresh: options.skipRefresh,
+          prepareContent: options.prepareContent
         }),
-        shouldRevert: () => isLatestCommit(),
+        shouldRevert: (error) => isLatestCommit() && !(error instanceof DomEditPersistPreparedWriteError),
         revert: () => {
           if (!captured) return;
           for (const entry2 of entries) {
@@ -74636,10 +74948,19 @@ function useDomEditAttributeCommits({
         },
         onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
-        resync: () => refreshDomEditSelectionFromPreview(selection),
-        onSettled: options.onSettled,
+        resync: () => {
+          refreshDomEditSelectionFromPreview(selection);
+          if (options.syncAutomation) {
+            syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
+          }
+        },
+        onSettled: (ok) => {
+          landed = ok;
+          options.onSettled?.(ok);
+        },
         onFinally: isLatestCommit.release
       });
+      return landed;
     },
     [
       activeCompPath,
@@ -74651,14 +74972,33 @@ function useDomEditAttributeCommits({
   );
   const handleDomAttributesCommit = useCallback123(
     async (selection, attrs) => {
-      await commitDataAttributes(selection, attrs, {
-        label: "Edit timing",
-        coalescePrefix: "attrs",
-        skipRefresh: false,
-        refreshAfter: true
-      });
+      await commitAttributeOps(
+        selection,
+        Object.entries(attrs).map(([property, value]) => ({
+          type: "attribute",
+          property,
+          value
+        })),
+        {
+          label: "Edit timing",
+          coalescePrefix: "attrs",
+          skipRefresh: false,
+          refreshAfter: true
+        }
+      );
     },
-    [commitDataAttributes]
+    [commitAttributeOps]
+  );
+  const handleDomAttributeBatchCommit = useCallback123(
+    (selection, ops, options) => commitAttributeOps(selection, ops, {
+      label: options.label,
+      coalescePrefix: "attr-batch",
+      skipRefresh: false,
+      refreshAfter: true,
+      syncAutomation: true,
+      prepareContent: options.prepareContent
+    }),
+    [commitAttributeOps]
   );
   const handleDomAttributeCommit = useCallback123(
     async (attr, value) => {
@@ -74759,7 +75099,8 @@ function useDomEditAttributeCommits({
     handleDomAttributeLiveCommit,
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
-    handleDomAttributesCommit
+    handleDomAttributesCommit,
+    handleDomAttributeBatchCommit
   };
 }
 
@@ -74799,7 +75140,8 @@ function useDomEditTextCommits({
     handleDomAttributeLiveCommit,
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
-    handleDomAttributesCommit
+    handleDomAttributesCommit,
+    handleDomAttributeBatchCommit
   } = useDomEditAttributeCommits({
     activeCompPath,
     previewIframeRef,
@@ -75010,7 +75352,7 @@ function useDomEditTextCommits({
           await persistDomEditOperations(selection, textCommit.operations, {
             label: "Edit text",
             skipRefresh: true,
-            prepareContent: importedFont ? (html2, sourceFile) => ensureImportedFontFace(html2, importedFont, sourceFile) : void 0
+            importedFont: importedFont ?? void 0
           });
         },
         shouldRevert: () => isLatestTextCommit(),
@@ -75122,6 +75464,7 @@ function useDomEditTextCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -75283,7 +75626,7 @@ function useDomGeometryCommits({
     [commitPositionPatchToHtml, readOnlyPreview, showToast]
   );
   const handleDomBoxSizeCommit = useCallback125(
-    (selection, next, offset, restore) => {
+    (selection, next, offset, restore, undoKey) => {
       if (readOnlyPreview) return Promise.resolve();
       const element = selection.element;
       const beforeSize = captureStudioBoxSize(element);
@@ -75296,7 +75639,7 @@ function useDomGeometryCommits({
       if (offset) patches.push(...writePlainMove(element, offset));
       return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
-        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`
+        ...undoKey ? { coalesceKey: undoKey, coalesceMs: Number.POSITIVE_INFINITY, deferRender: true } : { coalesceKey: `box-size:${getDomEditTargetKey(selection)}` }
       }).catch((error) => {
         restoreStudioBoxSize(element, beforeSize);
         if (offset) restoreStudioPathOffset(element, beforeOffset);
@@ -75492,6 +75835,7 @@ function useDomEditCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -75548,6 +75892,7 @@ function useDomEditCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -77037,7 +77382,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       }
       return run();
     };
-    const commit = (selection, mutation, options) => {
+    const commit = trackedStudioEdit((selection, mutation, options) => {
       if (!activeProjectId) return Promise.resolve();
       const file = selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(
@@ -77045,8 +77390,8 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
         options.serializeKey,
         () => runCommit(activeProjectId, activeCompPath, file, selection, mutation, options)
       );
-    };
-    commit.batch = (calls, options) => {
+    });
+    commit.batch = trackedStudioEdit((calls, options) => {
       if (!activeProjectId) return Promise.resolve();
       const file = calls[0]?.selection.sourceFile || activeCompPath || "index.html";
       return serializeCommit(
@@ -77054,7 +77399,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
         options.serializeKey,
         () => runBatchCommit(activeProjectId, activeCompPath, file, calls, options)
       );
-    };
+    });
     return commit;
   }, [runCommit, runBatchCommit, activeCompPath, activeProjectId, writeProjectFile]);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
@@ -77803,6 +78148,7 @@ 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)) {
@@ -77830,7 +78176,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
-  const { resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
+  const { allKnownAnimations, resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
     animations,
     fetchedAnimations
   );
@@ -77851,6 +78197,10 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     size
   });
   if (!anim || isInstantHold(anim)) {
+    const scriptWritesSize = allKnownAnimations.some(
+      (a) => animationWritesAnyProperty(a, SIZE_PROPS)
+    );
+    if (!scriptWritesSize) return { status: "element-size" };
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
     const sizeSet = resizeGroup === "size" ? anim ?? findSizeSetAnimation(workingAnimations, sel, selection.element) : findSizeSetAnimation(workingAnimations, sel, selection.element);
@@ -78080,7 +78430,6 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     );
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
-  const SIZE_PROPS = /* @__PURE__ */ new Set(["width", "height"]);
   const backfillDefaults = {};
   for (const k of Object.keys(runtimeProps)) {
     if (SIZE_PROPS.has(k)) continue;
@@ -78692,7 +79041,9 @@ function useGsapAwareEditing({
                 makeFetchFallback(selection)
               );
               assertGsapEditPersisted(outcome);
-              cropUndoKey = coalesceKey;
+              if (outcome.status === "element-size")
+                await handleDomBoxSizeCommit(selection, next, void 0, void 0, coalesceKey);
+              else cropUndoKey = coalesceKey;
               const ownsDragOffset = outcome.status === "persisted" && outcome.ownsDragOffset === true;
               logResize("intercept-handled", {
                 scaleRoute,
@@ -79306,6 +79657,7 @@ function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomTextCommit,
     handleDomTextCommitForSelection,
     handleDomRichTextCommit,
@@ -79570,6 +79922,7 @@ function useDomEditSession({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -81103,7 +81456,7 @@ function useAppHotkeys({
   showToast,
   syncHistoryPreviewAfterApply,
   showHistoryRestoreNow,
-  waitForPendingDomEditSaves,
+  settlePendingEdits,
   handleCopy: handleCopy2,
   handlePaste: handlePaste2,
   handleCut,
@@ -81127,7 +81480,7 @@ function useAppHotkeys({
     showToast,
     syncHistoryPreviewAfterApply,
     showHistoryRestoreNow,
-    waitForPendingDomEditSaves,
+    waitForPendingDomEditSaves: settlePendingEdits,
     onAfterUndoRedo,
     activeCompPath,
     forceReloadSdkSession
@@ -89472,6 +89825,10 @@ function makeSlideshowNotesController() {
     }
   };
 }
+function isPanelUndoKey(e) {
+  if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.key.toLowerCase() !== "z") return false;
+  return !isTypingTarget(e.target);
+}
 function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
   const { editingFile } = useFileManagerContext();
   const compHtml = editingFile?.content ?? null;
@@ -89677,13 +90034,10 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
     {
       className: "flex flex-col h-full overflow-y-auto text-text-0",
       onKeyDown: (e) => {
-        if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
-          const target = e.target instanceof HTMLElement ? e.target.tagName : "";
-          if (target === "TEXTAREA" || target === "INPUT") return;
-          e.preventDefault();
-          e.stopPropagation();
-          handleUndo();
-        }
+        if (!isPanelUndoKey(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        handleUndo();
       },
       children: [
         persistError && /* @__PURE__ */ jsxs173(
@@ -91235,6 +91589,7 @@ function StudioRightPanels({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -91357,6 +91712,7 @@ function StudioRightPanels({
           onSetStyle: handleDomStyleCommit,
           onSetAttribute: handleDomAttributeCommit,
           onSetAttributes: handleDomAttributesCommit,
+          onSetAttributeBatch: handleDomAttributeBatchCommit,
           onSetAttributeLive: setAttributeWhileDragging,
           onSetAttributeQuiet: handleDomAttributeQuietCommit,
           onApplyColorGradingScope: handleApplyColorGradingScope,
@@ -91800,17 +92156,11 @@ function useEnableKeyframes(sessionRef) {
 
 // src/hooks/useKeyframeKeyboard.ts
 import { useEffect as useEffect147, useCallback as useCallback183 } from "react";
-function isTextInput2(el) {
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return el.isContentEditable === true;
-}
 function useKeyframeKeyboard({ enabled, onAddKeyframe }) {
   const handler = useCallback183(
     (e) => {
       if (!enabled || !onAddKeyframe) return;
-      if (isTextInput2(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       if (e.metaKey || e.ctrlKey) return;
       if (e.key.toLowerCase() !== STUDIO_PLAIN_KEYS.addKeyframe) return;
       e.preventDefault();
@@ -92099,10 +92449,7 @@ function TimelineToolbar({
     const onKeyDown = (e) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      if (target?.isContentEditable) return;
-      const tag = target?.tagName?.toLowerCase() ?? "";
-      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (isTypingTarget(e.target)) return;
       const store = usePlayerStore.getState();
       store.setTimelineSnapEnabled(!store.timelineSnapEnabled);
     };
@@ -92841,7 +93188,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
     showHistoryRestoreNow: previewPersistence.showHistoryRestoreNow,
-    waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
+    settlePendingEdits: previewPersistence.settlePendingEdits,
     handleCopy: handleCopy2,
     handlePaste: handlePaste2,
     handleCut,
@@ -92900,9 +93247,10 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     readOnlyPreview
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
-  handleDomZIndexReorderCommitRef.current = domEditSession.handleDomZIndexReorderCommit;
+  const { handleDomZIndexReorderCommit: zCommit, handleDomEditElementDelete: del } = domEditSession;
+  handleDomZIndexReorderCommitRef.current = trackedStudioEdit(zCommit);
   clearDomSelectionRef.current = domEditSession.clearDomSelection;
-  handleDomEditElementDeleteRef.current = domEditSession.handleDomEditElementDelete;
+  handleDomEditElementDeleteRef.current = trackedStudioEdit(del);
   resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
   invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
   deleteSelectedKeyframesRef.current = () => deleteSelectedKeyframes(domEditSession);
@@ -93794,11 +94142,13 @@ export {
   buildGridSnapEdges,
   buildPickerAgentContextPreview,
   buildPickerAgentPrompt,
+  buildStudioTools,
   buttonBase,
   buttonSizes,
   buttonVariants,
   cn,
   collectSnapContext,
+  collectStudioLookScene,
   extractSnapTargets,
   fieldBase,
   fieldText,