@hyperframes/studio 0.8.127 → 0.8.128

package/dist/index.js

@@ -9,6 +9,7 @@ import {
   STUDIO_PREVIEW_FPS,
   applyPreviewVariablesToUrl,
   clampToDuration,
+  collectElementPatches,
   computePinnedZoomPercent,
   createTimelineResetState,
   effectiveThumbnailMode,
@@ -26,6 +27,7 @@ import {
   liveTime,
   panelsInZone,
   parseDockLayout,
+  patchElements,
   readStudioUiPreferences,
   secondsToFrame,
   stepFrameTime,
@@ -37,7 +39,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-246VB2G3.js";
+} from "./chunk-DRVWEPO5.js";
 import {
   Button,
   ContextMenu,
@@ -102,7 +104,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   studioApiFetch
-} from "./chunk-3F47EFCT.js";
+} from "./chunk-7UQWVN52.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
@@ -162,7 +164,7 @@ import {
   splitTimelineElementKey,
   toHexColor,
   wrapTimeline
-} from "./chunk-5EKWJZLM.js";
+} from "./chunk-TDWGXBUT.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -2779,7 +2781,6 @@ function resolveTimelineResize(input, edge, clientX) {
   const clampedDelta = clamp2(deltaTime, minDelta, maxDelta);
   return applyClipStartTrimDelta(input, clampedDelta);
 }
-var MAX_HAND_EDIT_CLIPS = 3;
 function resolveBlockedTimelineEditIntent(input) {
   if (input.capabilities.canMove) {
     return null;
@@ -4348,52 +4349,6 @@ var useLinkedClipPreferences = create2((set) => ({
 }));
 var isLinkedSelectionOn = () => useLinkedClipPreferences.getState().linkedSelection;
 
-// src/player/components/timelineLinkSelection.ts
-function selectClipWithLinks(key2, altKey, setSelectedElementId) {
-  const state = usePlayerStore.getState();
-  if (altKey || !isLinkedSelectionOn()) {
-    state.setSelection([key2], key2);
-    return;
-  }
-  setSelectedElementId(key2);
-  const { selectedElementIds, elements } = usePlayerStore.getState();
-  const expanded = expandToLinkedMembers(selectedElementIds, elements);
-  if (expanded.size > selectedElementIds.size) state.setSelection(expanded, key2);
-}
-function toggleClipWithLinks(key2, altKey) {
-  const state = usePlayerStore.getState();
-  const element = state.elements.find((el) => (el.key ?? el.id) === key2);
-  const members = element ? linkedMembersOf(element, state.elements, !altKey && isLinkedSelectionOn()) : [];
-  const memberKeys = members.length > 0 ? members.map((el) => el.key ?? el.id) : [key2];
-  const next = new Set(state.selectedElementIds);
-  const removing = next.has(key2);
-  for (const memberKey of memberKeys) {
-    if (removing) next.delete(memberKey);
-    else next.add(memberKey);
-  }
-  state.setSelection(next, removing ? state.selectedElementId : key2);
-  const primary = usePlayerStore.getState().selectedElementId;
-  return state.elements.find((el) => (el.key ?? el.id) === primary) ?? null;
-}
-function exceedsHandEditLimit(grabbed, altKey, edge) {
-  const { selectedElementIds, elements } = usePlayerStore.getState();
-  const grabbedKey = grabbed.key ?? grabbed.id;
-  const keys = linkedGestureKeys(
-    selectedElementIds,
-    grabbed,
-    elements,
-    altKey,
-    isLinkedSelectionOn()
-  );
-  const changed = edge ? buildTimelineGroupResizeMembers(
-    elements,
-    dropMisalignedTrimPartners(keys, grabbed, elements, edge),
-    grabbedKey,
-    edge
-  ) : resolveGroupMovers(elements, keys, grabbedKey);
-  return (changed?.length ?? 1) > MAX_HAND_EDIT_CLIPS;
-}
-
 // src/player/components/timelineReadOnly.ts
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect7, useEffectEvent } from "react";
 var TimelineReadOnlyContext = createContext2(null);
@@ -4504,20 +4459,86 @@ function timelineEaseFocusId(elementId2, target) {
 import { useCallback as useCallback8, useMemo as useMemo6 } from "react";
 
 // src/player/components/TimelinePropertyLanes.tsx
-import { useMemo as useMemo3 } from "react";
+import {
+  useMemo as useMemo3
+} from "react";
 import {
   classifyPropertyGroup
 } from "@hyperframes/core/gsap-parser";
 
 // src/hooks/gsapShared.ts
 import { isHtmlElement as isHtmlElement2 } from "@hyperframes/core/runtime/dom-realm";
+import { getObjectArrayKeyframeTiming } from "@hyperframes/parsers/gsap-parser";
+
+// src/utils/gsapKeyframeEases.ts
+import gsap2 from "gsap";
+var PERCENTAGE_SEGMENT_EASE = "power1.inOut";
+var ARRAY_STEP_EASE = "none";
+var MOTION_PATH_RUN_EASE = "power1.out";
+function keyframedTweenEases(anim) {
+  const data = anim.keyframes;
+  const fallback = data?.format === "object-array" ? ARRAY_STEP_EASE : data?.easeEach ?? PERCENTAGE_SEGMENT_EASE;
+  return {
+    run: data ? data.ease ?? anim.ease ?? (data.fromMotionPath ? MOTION_PATH_RUN_EASE : void 0) : void 0,
+    segment: (arriving) => arriving.ease ?? fallback
+  };
+}
+function easeFunction(name) {
+  if (!name || name === "none" || name === "linear") return null;
+  return gsap2.parseEase(name) ?? null;
+}
+var runEaseOf = (anim) => keyframedTweenEases(anim).run;
+var SCAN_STEPS = 200;
+var BISECT_STEPS = 40;
+var timingEases = /* @__PURE__ */ new Map();
+function timingEase(runEase) {
+  if (!runEase) return null;
+  if (!timingEases.has(runEase)) {
+    const run = easeFunction(runEase);
+    const samples = Array.from(
+      { length: SCAN_STEPS + 1 },
+      (_, step) => run?.(step / SCAN_STEPS) ?? 0
+    );
+    const oneToOne = samples.every((v, i) => v >= 0 && v <= 1 && (i === 0 || v > samples[i - 1]));
+    timingEases.set(runEase, run && oneToOne ? run : null);
+  }
+  return timingEases.get(runEase) ?? null;
+}
+function progressAtTime(runEase, timePercentage) {
+  const run = timingEase(runEase);
+  return run ? run(timePercentage / 100) * 100 : timePercentage;
+}
+function timeAtProgress(runEase, percentage) {
+  const run = timingEase(runEase);
+  if (!run || percentage <= 0 || percentage >= 100) return percentage;
+  const target = percentage / 100;
+  let low = 0;
+  let high = 1;
+  for (let step = 1; step <= SCAN_STEPS; step++) {
+    if (run(step / SCAN_STEPS) >= target) {
+      low = (step - 1) / SCAN_STEPS;
+      high = step / SCAN_STEPS;
+      break;
+    }
+  }
+  for (let step = 0; step < BISECT_STEPS; step++) {
+    const mid = (low + high) / 2;
+    if (run(mid) >= target) high = mid;
+    else low = mid;
+  }
+  return high * 100;
+}
 
 // src/utils/globalTimeCompiler.ts
+import { GSAP_DEFAULT_DURATION } from "@hyperframes/parsers/gsap-parser";
 function absoluteToPercentage(time, tweenStart, tweenDuration) {
   if (tweenDuration <= 0) return 0;
   const raw = (time - tweenStart) / tweenDuration * 100;
   return Math.max(0, Math.min(100, Math.round(raw * 1e3) / 1e3));
 }
+function percentageToAbsolute(pct, tweenStart, tweenDuration) {
+  return tweenStart + pct / 100 * tweenDuration;
+}
 function isTimeWithinTween(time, tweenStart, tweenDuration) {
   return time >= tweenStart && time <= tweenStart + tweenDuration;
 }
@@ -4528,8 +4549,8 @@ function resolveTweenStart(animation) {
   if (!Number.isNaN(parsed)) return parsed;
   return null;
 }
-function resolveTweenDuration(animation, fallback = 0.5) {
-  return animation.duration ?? fallback;
+function resolveTweenDuration(animation) {
+  return animation.duration ?? GSAP_DEFAULT_DURATION;
 }
 function findTweenAtTime(time, animations, selector) {
   for (const anim of animations) {
@@ -4545,7 +4566,13 @@ function absoluteToPercentageForAnimation(time, animation) {
   const start = resolveTweenStart(animation);
   if (start === null) return null;
   const duration = resolveTweenDuration(animation);
-  return absoluteToPercentage(time, start, duration);
+  return progressAtTime(runEaseOf(animation), absoluteToPercentage(time, start, duration));
+}
+function percentageToAbsoluteForAnimation(pct, animation) {
+  const start = resolveTweenStart(animation);
+  if (start === null) return null;
+  const duration = resolveTweenDuration(animation);
+  return percentageToAbsolute(timeAtProgress(runEaseOf(animation), pct), start, duration);
 }
 function matchesSelector(tweenSelector, querySelector) {
   return tweenSelector.split(",").some((part) => part.trim() === querySelector);
@@ -4572,6 +4599,11 @@ function isInstantHold(animation) {
 }
 var SAFE_HASH_ID = /^-?[A-Za-z_][\w-]*$/;
 var KEYFRAME_PCT_MATCH = 1;
+function playsNear(anim, percentage, progress) {
+  const runEase = runEaseOf(anim);
+  const gap = timeAtProgress(runEase, percentage) - timeAtProgress(runEase, progress);
+  return Math.abs(gap) <= KEYFRAME_PCT_MATCH;
+}
 function idSelector(id) {
   return SAFE_HASH_ID.test(id) ? `#${id}` : `[id="${id.replace(/(["\\])/g, "\\$1")}"]`;
 }
@@ -4682,20 +4714,16 @@ function tweenTargetsElement(targetSelector, selector, element) {
   if (!element || !doc) return false;
   return matchesExactlyOne(doc, targetSelector, element);
 }
-function resolveEditableTweenDuration(animation, selection) {
-  const clipDuration2 = Number.parseFloat(selection.dataAttributes?.duration ?? "");
-  return resolveTweenDuration(
-    animation,
-    Number.isFinite(clipDuration2) && clipDuration2 > 0 ? clipDuration2 : 0.5
-  );
-}
 function computeElementPercentage(currentTime, selection, animation) {
   if (animation) {
     const start = resolveTweenStart(animation);
-    const duration = resolveEditableTweenDuration(animation, selection);
+    const duration = resolveTweenDuration(animation);
     if (duration <= 0) return 0;
     if (start !== null) {
-      return absoluteToPercentage(currentTime, start, duration);
+      return progressAtTime(
+        runEaseOf(animation),
+        absoluteToPercentage(currentTime, start, duration)
+      );
     }
   }
   const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
@@ -4732,11 +4760,16 @@ function parsePercentageKeyframes(kfObj) {
   let easeEach;
   if (Array.isArray(kfObj)) {
     const steps = kfObj;
+    const timing = getObjectArrayKeyframeTiming(
+      steps.map((entry2) => entry2?.duration)
+    );
+    if (!timing) return null;
     steps.forEach((entry2, i) => {
       if (!entry2 || typeof entry2 !== "object") return;
-      const percentage = steps.length > 1 ? Math.round(i / (steps.length - 1) * 1e3) / 10 : 0;
       const properties = collectAnimatableKeyframeProperties(entry2);
-      if (Object.keys(properties).length > 0) keyframes.push({ percentage, properties, step: i });
+      if (Object.keys(properties).length > 0) {
+        keyframes.push({ percentage: timing.percentages[i], properties, step: i });
+      }
     });
     return keyframes.length > 0 ? { keyframes } : null;
   }
@@ -4783,11 +4816,15 @@ function toClipPercentage(absoluteTime, clipStart2, clipDuration2, fallbackPerce
 }
 function toClipKeyframes(source, anim, clipStart2, clipDuration2) {
   const tweenStart = anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
-  const tweenDuration = anim.duration ?? clipDuration2;
+  const tweenDuration = resolveTweenDuration(anim);
   return source.map((keyframe) => ({
     ...keyframe,
     percentage: toClipPercentage(
-      toAbsoluteTime(tweenStart, tweenDuration, keyframe.percentage),
+      toAbsoluteTime(
+        tweenStart,
+        tweenDuration,
+        timeAtProgress(runEaseOf(anim), keyframe.percentage)
+      ),
       clipStart2,
       clipDuration2,
       keyframe.percentage
@@ -7109,10 +7146,22 @@ function subscribeTimelineKeyframeRetimePreview(source, listener2) {
   listener2(coordinator.preview);
   return () => coordinator.previewListeners.delete(listener2);
 }
+function retimedRunEase(actor) {
+  const id = actor.target.animationId;
+  if (id === void 0) return void 0;
+  const { gsapAnimations } = usePlayerStore.getState();
+  const animations = gsapAnimations.get(actor.elementId) ?? [...gsapAnimations.values()].flat();
+  const animation = animations.find((candidate) => candidate.id === id);
+  return animation ? runEaseOf(animation) : void 0;
+}
 function resolveRetimeTweenPercentage(actor, toClipPercentage2) {
   const animationKeyframes2 = actor.target.animationId === void 0 ? actor.keyframes : actor.keyframes.filter((keyframe) => keyframe.animationId === actor.target.animationId);
   const tweenPercentages = animationKeyframes2.map((keyframe) => keyframe.tweenPercentage).filter((value) => typeof value === "number");
-  const mapped = clipToTweenPercentage(animationKeyframes2, toClipPercentage2);
+  const runEase = retimedRunEase(actor);
+  const timed = animationKeyframes2.map(
+    (keyframe) => keyframe.tweenPercentage === void 0 ? keyframe : { ...keyframe, tweenPercentage: timeAtProgress(runEase, keyframe.tweenPercentage) }
+  );
+  const mapped = progressAtTime(runEase, clipToTweenPercentage(timed, toClipPercentage2));
   if (tweenPercentages.length === 0) return mapped;
   return Math.max(Math.min(...tweenPercentages), Math.min(Math.max(...tweenPercentages), mapped));
 }
@@ -7819,6 +7868,7 @@ function getTimelinePropertyLanes(animations, clipStart2, clipDuration2) {
   return Array.from(sourceGroups(animations), ([group, groupAnimations]) => ({
     group,
     animations: groupAnimations,
+    elementAnimations: animations,
     keyframes: groupKeyframes(groupAnimations, group, clipStart2, clipDuration2)
   })).filter((lane) => lane.keyframes.length > 0);
 }
@@ -7829,6 +7879,7 @@ function TimelinePropertyLanes({
   clipDuration: clipDuration2,
   clipLeftPx,
   clipWidthPx,
+  passengerStyle,
   accentColor,
   isSelected: isSelected2,
   currentPercentage,
@@ -7868,7 +7919,8 @@ function TimelinePropertyLanes({
         left: clipLeftPx,
         top: getTimelineLaneTop(laneIndex),
         width: clipWidthPx,
-        height: LANE_H
+        height: LANE_H,
+        ...passengerStyle
       },
       children: /* @__PURE__ */ jsx16(
         TimelineDiamondLane,
@@ -9145,6 +9197,13 @@ function computeStackingPatches(elements, editedKeys) {
   return patches;
 }
 
+// src/player/store/batchElementUpdates.ts
+function batchElementUpdates(run) {
+  const patches = collectElementPatches(run);
+  if (!patches || patches.size === 0) return;
+  usePlayerStore.setState((state) => ({ elements: patchElements(state.elements, patches) }));
+}
+
 // src/player/components/timelineOptimisticRevision.ts
 var revisionsByUpdater = /* @__PURE__ */ new WeakMap();
 function beginTimelineOptimisticGesture(updateElement, keys, scope = "timing") {
@@ -9170,11 +9229,13 @@ function isLatestTimelineOptimisticGesture(updateElement, gesture, key2, scope =
   return gesture.has(key2) && revisionsByUpdater.get(updateElement)?.get(scope)?.get(key2) === gesture.get(key2);
 }
 function rollbackLatestTimelineOptimisticGesture(updateElement, gesture, rollbacks) {
-  for (const rollback of rollbacks) {
-    if (isLatestTimelineOptimisticGesture(updateElement, gesture, rollback.key)) {
-      updateElement(rollback.key, rollback.updates);
+  batchElementUpdates(() => {
+    for (const rollback of rollbacks) {
+      if (isLatestTimelineOptimisticGesture(updateElement, gesture, rollback.key)) {
+        updateElement(rollback.key, rollback.updates);
+      }
     }
-  }
+  });
 }
 
 // src/components/nle/zLaneGesture.ts
@@ -9225,6 +9286,400 @@ function refreshAfterDurableLaneMove(pending2, deps) {
   });
 }
 
+// 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']",
+  "[role='dialog'][aria-modal='true']",
+  ".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 pendingEdits = /* @__PURE__ */ new Map();
+var historyClaims = () => 0;
+function setStudioPendingEditClaimClock(read2) {
+  historyClaims = read2 ?? (() => 0);
+}
+var NOT_SAVED = () => Promise.resolve(false);
+var adopting = null;
+function adoptingStudioPendingEdit() {
+  return adopting;
+}
+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 pendingEdits.size > 0 || focusedField() !== null;
+}
+function isStudioEditSaving() {
+  return pendingEdits.size > 0;
+}
+function afterStudioPendingEdits(run) {
+  let waiting = true;
+  const check = () => {
+    if (!waiting) return;
+    if (isStudioEditSaving()) {
+      void Promise.allSettled([...pendingEdits.keys()]).then(check);
+      return;
+    }
+    waiting = false;
+    run();
+  };
+  check();
+  return () => {
+    waiting = false;
+  };
+}
+function trackStudioPendingEdit(result) {
+  if (!result) return void 0;
+  const promise = Promise.resolve(result);
+  if (adopting) return promise;
+  pendingEdits.set(promise, {
+    revert: null,
+    landed: NOT_SAVED,
+    redraws: [],
+    showAgain: null,
+    claimsAtBegin: historyClaims()
+  });
+  promise.then(
+    () => pendingEdits.delete(promise),
+    () => pendingEdits.delete(promise)
+  );
+  return promise;
+}
+function trackedStudioEdit(edit) {
+  return (...args) => {
+    const result = edit(...args);
+    if (result instanceof Promise) trackStudioPendingEdit(result);
+    return result;
+  };
+}
+function beginStudioPendingEdit(revert) {
+  let settle;
+  const promise = trackStudioPendingEdit(new Promise((resolve) => settle = resolve));
+  const entry2 = pendingEdits.get(promise);
+  entry2.revert = revert;
+  let landed = Promise.resolve(false);
+  let saved2 = false;
+  entry2.landed = () => landed;
+  const inFlight = {
+    reverted: () => entry2.revert === null && revert !== null,
+    within(run) {
+      const outer = adopting;
+      adopting = inFlight;
+      try {
+        return run();
+      } finally {
+        adopting = outer;
+      }
+    },
+    drawUnlessUndone(draw) {
+      if (inFlight.reverted()) entry2.redraws.push(draw);
+      else draw();
+    },
+    drawKeepingUndone(draw) {
+      if (!inFlight.reverted()) return draw();
+      entry2.showAgain?.();
+      try {
+        return draw();
+      } finally {
+        entry2.showAgain = revert();
+      }
+    },
+    markSaved: () => void (saved2 = true)
+  };
+  return {
+    settle,
+    reverted: inFlight.reverted,
+    // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
+    adopt(start) {
+      try {
+        const committed = inFlight.within(start);
+        landed = Promise.resolve(committed).then(
+          () => true,
+          () => saved2
+        );
+        return committed;
+      } catch (error) {
+        settle();
+        throw error;
+      }
+    }
+  };
+}
+function paintBackNewestStudioPendingEdit() {
+  const newest = [...pendingEdits.values()].at(-1);
+  const revert = newest?.revert;
+  if (!newest || !revert) return null;
+  newest.revert = null;
+  newest.showAgain = revert();
+  return {
+    showAgain: () => {
+      newest.showAgain?.();
+      for (const redraw of newest.redraws.splice(0)) redraw();
+    },
+    landed: newest.landed,
+    claimsAtBegin: newest.claimsAtBegin
+  };
+}
+function revertNewestStudioPendingEdit() {
+  return paintBackNewestStudioPendingEdit()?.showAgain ?? null;
+}
+async function flushStudioPendingEdits({
+  onlyCurrent = false
+} = {}) {
+  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 })
+  );
+  const current = onlyCurrent ? new Set(pendingEdits.keys()) : null;
+  const waiting = () => [...pendingEdits.keys()].filter((edit) => !current || current.has(edit));
+  let conflict;
+  let firstFailure;
+  while (detail.promises.length > 0 || waiting().length > 0) {
+    const promises = [...detail.promises, ...waiting()];
+    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/player/components/timelineClipDragCommit.ts
 var keyOf6 = (e) => e.key ?? e.id;
 var round3 = (v) => Math.round(v * 1e3) / 1e3;
@@ -9237,11 +9692,11 @@ function moveStoreUpdates(edit) {
     detach: audioGroup === null
   };
 }
-function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coalesceMs) {
+function persistMoveEdits(edits, deps, coalesceKey, operation = "timing") {
   if (edits.length === 0) return Promise.resolve(true);
   edits = edits.map((e) => {
-    const start = clampToHostStart(e.element, e.updates.start);
-    return start === e.updates.start ? e : { ...e, updates: { ...e.updates, start } };
+    const start2 = clampToHostStart(e.element, e.updates.start);
+    return start2 === e.updates.start ? e : { ...e, updates: { ...e.updates, start: start2 } };
   });
   const { updateElement, onMoveElement, onMoveElements } = deps;
   if (!onMoveElements) {
@@ -9279,31 +9734,44 @@ function persistMoveEdits(edits, deps, coalesceKey, operation = "timing", coales
     }
     if (Object.keys(updates).length) updateElement(key2, updates);
   };
-  for (const e of edits) applyEdit(e);
+  const applyEdits = (reassert = false) => batchElementUpdates(() => edits.forEach((e) => applyEdit(e, reassert)));
+  applyEdits();
   const persistEdits = edits.map(
     (e) => e.persistTrack == null || e.persistTrack === e.updates.track ? e : { element: e.element, updates: { ...e.updates, track: e.persistTrack } }
   );
-  const persisted = onMoveElements ? onMoveElements(persistEdits, coalesceKey, operation, coalesceMs) : Promise.all(persistEdits.map((e) => Promise.resolve(onMoveElement?.(e.element, e.updates))));
-  return Promise.resolve(persisted).then(
+  const restorePrev = () => batchElementUpdates(() => {
+    for (const p of prev) {
+      const { audioGroup, ...timing } = p.updates;
+      const updates = {};
+      if (isLatestTimelineOptimisticGesture(updateElement, revision, p.key)) {
+        Object.assign(updates, timing);
+      }
+      if (isLatestTimelineOptimisticGesture(updateElement, membershipRevision, p.key, "membership"))
+        updates.audioGroup = audioGroup;
+      if (Object.keys(updates).length) updateElement(p.key, updates);
+    }
+  });
+  const saving = onMoveElements ? beginStudioPendingEdit(() => {
+    restorePrev();
+    return () => applyEdits(true);
+  }) : null;
+  const start = () => onMoveElements ? onMoveElements(persistEdits, coalesceKey, operation) : Promise.all(
+    persistEdits.map((e) => Promise.resolve(onMoveElement?.(e.element, e.updates)))
+  );
+  const persisted = saving ? saving.adopt(start) : start();
+  const done = Promise.resolve(persisted).then(
     () => {
-      for (const e of edits) applyEdit(e, true);
+      if (!saving?.reverted()) applyEdits(true);
       return true;
     },
     (error) => {
-      for (const p of prev) {
-        const { audioGroup, ...timing } = p.updates;
-        const updates = {};
-        if (isLatestTimelineOptimisticGesture(updateElement, revision, p.key)) {
-          Object.assign(updates, timing);
-        }
-        if (isLatestTimelineOptimisticGesture(updateElement, membershipRevision, p.key, "membership"))
-          updates.audioGroup = audioGroup;
-        if (Object.keys(updates).length) updateElement(p.key, updates);
-      }
+      if (!saving?.reverted()) restorePrev();
       console.error("[Timeline] Failed to persist clip edits", error);
       return false;
     }
   );
+  saving?.settle(done);
+  return done;
 }
 function resolveMultiSelection(drag, deps) {
   const dragKey = keyOf6(drag.element);
@@ -9488,7 +9956,7 @@ function commitTrackInsert(drag, deps, multi) {
     deps
   ).catch(() => void 0);
 }
-function commitZMirrorLaneMove(element, move, deps, coalesceKey, coalesceMs) {
+function commitZMirrorLaneMove(element, move, deps, coalesceKey) {
   if (move.kind === "move") {
     const edit = {
       element,
@@ -9496,14 +9964,14 @@ function commitZMirrorLaneMove(element, move, deps, coalesceKey, coalesceMs) {
       persistTrack: move.persistTrack
     };
     return refreshAfterDurableLaneMove(
-      persistMoveEdits([edit], deps, coalesceKey, "lane-reorder", coalesceMs),
+      persistMoveEdits([edit], deps, coalesceKey, "lane-reorder"),
       deps
     );
   }
   const built = buildTrackInsertEdits(element, element.start, move.insertRow, null, deps);
   if (!built || built.edits.length === 0) return Promise.resolve(false);
   return refreshAfterDurableLaneMove(
-    persistMoveEdits(built.edits, deps, coalesceKey, "track-insert", coalesceMs),
+    persistMoveEdits(built.edits, deps, coalesceKey, "track-insert"),
     deps
   );
 }
@@ -9539,13 +10007,15 @@ function commitTimelineGroupResize(session, updateElement, persist2) {
     updateElement,
     changes.map((change) => change.key)
   );
-  for (const change of changes) {
-    updateElement(change.key, {
-      start: change.start,
-      duration: change.duration,
-      playbackStart: change.playbackStart
-    });
-  }
+  batchElementUpdates(() => {
+    for (const change of changes) {
+      updateElement(change.key, {
+        start: change.start,
+        duration: change.duration,
+        playbackStart: change.playbackStart
+      });
+    }
+  });
   if (!persist2) {
     rollbackLatestTimelineOptimisticGesture(
       updateElement,
@@ -9554,7 +10024,6 @@ function commitTimelineGroupResize(session, updateElement, persist2) {
     );
     return;
   }
-  const coalesceKey = `clip-group-resize:${changes.map((change) => change.key).join(":")}`;
   Promise.resolve(
     persist2(
       changes.map((change) => ({
@@ -9562,8 +10031,7 @@ function commitTimelineGroupResize(session, updateElement, persist2) {
         start: change.start,
         duration: change.duration,
         playbackStart: change.playbackStart
-      })),
-      { coalesceKey }
+      }))
     )
   ).catch((error) => {
     rollbackLatestTimelineOptimisticGesture(
@@ -9684,7 +10152,7 @@ function mountTimelineClipDragGestureLifecycle({
       event.clientX - blocked.originClientX,
       event.clientY - blocked.originClientY
     );
-    const threshold = blocked.intent === "move" || blocked.intent === "edit-many" ? 4 : 2;
+    const threshold = blocked.intent === "move" ? 4 : 2;
     if (!blocked.started && distance < threshold) return;
     if (!blocked.started) {
       blocked.started = true;
@@ -10273,8 +10741,6 @@ function useTimelineClipDrag({
       if (!element || !getClipCapabilities(element).canMove) return;
       event.preventDefault();
       event.stopImmediatePropagation();
-      if (exceedsHandEditLimit(element, false, null))
-        return void onBlockedEditAttemptRef.current?.(element, "edit-many");
       setShowPopover(false);
       setRangeSelectionRef.current?.(null);
       const row = keyboardPickupInsertRow(
@@ -10544,6 +11010,36 @@ function useTimelineDragPreviewState(draggedClip, resizingClip, selectedElementI
 
 // src/player/components/useTimelineClipContextMenu.ts
 import { useCallback as useCallback12 } from "react";
+
+// src/player/components/timelineLinkSelection.ts
+function selectClipWithLinks(key2, altKey, setSelectedElementId) {
+  const state = usePlayerStore.getState();
+  if (altKey || !isLinkedSelectionOn()) {
+    state.setSelection([key2], key2);
+    return;
+  }
+  setSelectedElementId(key2);
+  const { selectedElementIds, elements } = usePlayerStore.getState();
+  const expanded = expandToLinkedMembers(selectedElementIds, elements);
+  if (expanded.size > selectedElementIds.size) state.setSelection(expanded, key2);
+}
+function toggleClipWithLinks(key2, altKey) {
+  const state = usePlayerStore.getState();
+  const element = state.elements.find((el) => (el.key ?? el.id) === key2);
+  const members = element ? linkedMembersOf(element, state.elements, !altKey && isLinkedSelectionOn()) : [];
+  const memberKeys = members.length > 0 ? members.map((el) => el.key ?? el.id) : [key2];
+  const next = new Set(state.selectedElementIds);
+  const removing = next.has(key2);
+  for (const memberKey of memberKeys) {
+    if (removing) next.delete(memberKey);
+    else next.add(memberKey);
+  }
+  state.setSelection(next, removing ? state.selectedElementId : key2);
+  const primary = usePlayerStore.getState().selectedElementId;
+  return state.elements.find((el) => (el.key ?? el.id) === primary) ?? null;
+}
+
+// src/player/components/useTimelineClipContextMenu.ts
 function useClipContextMenu(onSelectElement, dismissGapMenu, setClipContextMenu) {
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
@@ -11620,391 +12116,6 @@ import { useCallback as useCallback17 } from "react";
 
 // src/contexts/DomEditContext.tsx
 import { useCallback as useCallback16, useContext as useContext3, useMemo as useMemo12, useRef as useRef17 } 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']",
-  "[role='dialog'][aria-modal='true']",
-  ".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 pendingEdits = /* @__PURE__ */ new Map();
-var NOT_SAVED = () => Promise.resolve(false);
-var adopting = null;
-function adoptingStudioPendingEdit() {
-  return adopting;
-}
-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 pendingEdits.size > 0 || focusedField() !== null;
-}
-function isStudioEditSaving() {
-  return pendingEdits.size > 0;
-}
-function afterStudioPendingEdits(run) {
-  let waiting = true;
-  const check = () => {
-    if (!waiting) return;
-    if (isStudioEditSaving()) {
-      void Promise.allSettled([...pendingEdits.keys()]).then(check);
-      return;
-    }
-    waiting = false;
-    run();
-  };
-  check();
-  return () => {
-    waiting = false;
-  };
-}
-function trackStudioPendingEdit(result) {
-  if (!result) return void 0;
-  const promise = Promise.resolve(result);
-  if (adopting) return promise;
-  pendingEdits.set(promise, { revert: null, landed: NOT_SAVED, redraws: [], showAgain: null });
-  promise.then(
-    () => pendingEdits.delete(promise),
-    () => pendingEdits.delete(promise)
-  );
-  return promise;
-}
-function trackedStudioEdit(edit) {
-  return (...args) => {
-    const result = edit(...args);
-    if (result instanceof Promise) trackStudioPendingEdit(result);
-    return result;
-  };
-}
-function beginStudioPendingEdit(revert) {
-  let settle;
-  const promise = trackStudioPendingEdit(new Promise((resolve) => settle = resolve));
-  const entry2 = pendingEdits.get(promise);
-  entry2.revert = revert;
-  let landed = Promise.resolve(false);
-  let saved2 = false;
-  entry2.landed = () => landed;
-  const inFlight = {
-    reverted: () => entry2.revert === null && revert !== null,
-    within(run) {
-      const outer = adopting;
-      adopting = inFlight;
-      try {
-        return run();
-      } finally {
-        adopting = outer;
-      }
-    },
-    drawUnlessUndone(draw) {
-      if (inFlight.reverted()) entry2.redraws.push(draw);
-      else draw();
-    },
-    drawKeepingUndone(draw) {
-      if (!inFlight.reverted()) return draw();
-      entry2.showAgain?.();
-      try {
-        return draw();
-      } finally {
-        entry2.showAgain = revert();
-      }
-    },
-    markSaved: () => void (saved2 = true)
-  };
-  return {
-    settle,
-    reverted: inFlight.reverted,
-    // Only what `start` registers synchronously is adopted; a later write joins only through `within`.
-    adopt(start) {
-      try {
-        const committed = inFlight.within(start);
-        landed = Promise.resolve(committed).then(
-          () => true,
-          () => saved2
-        );
-        return committed;
-      } catch (error) {
-        settle();
-        throw error;
-      }
-    }
-  };
-}
-function paintBackNewestStudioPendingEdit() {
-  const newest = [...pendingEdits.values()].at(-1);
-  const revert = newest?.revert;
-  if (!newest || !revert) return null;
-  newest.revert = null;
-  newest.showAgain = revert();
-  return {
-    showAgain: () => {
-      newest.showAgain?.();
-      for (const redraw of newest.redraws.splice(0)) redraw();
-    },
-    landed: newest.landed
-  };
-}
-function revertNewestStudioPendingEdit() {
-  return paintBackNewestStudioPendingEdit()?.showAgain ?? null;
-}
-async function flushStudioPendingEdits({
-  onlyCurrent = false
-} = {}) {
-  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 })
-  );
-  const current = onlyCurrent ? new Set(pendingEdits.keys()) : null;
-  const waiting = () => [...pendingEdits.keys()].filter((edit) => !current || current.has(edit));
-  let conflict;
-  let firstFailure;
-  while (detail.promises.length > 0 || waiting().length > 0) {
-    const promises = [...detail.promises, ...waiting()];
-    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,
@@ -17540,20 +17651,32 @@ function requestGsapMutation(projectId, route, filePath, body) {
     }
   );
 }
-async function postGsapMutation(projectId, filePath, mutation, fallback) {
+async function postOwnedGsapMutation(route, projectId, filePath, body, fallback) {
   let response;
   try {
-    response = await requestGsapMutation(projectId, "gsap-mutations", filePath, mutation);
+    response = await requestGsapMutation(projectId, route, filePath, body);
   } catch (error) {
     throw new GsapPreviewConvergenceError(`${fallback}: mutation outcome unknown`, {
       cause: error
     });
   }
-  const body = await response.json().catch(() => null);
+  const payload = await response.json().catch(() => null);
   if (!response.ok) {
-    throw new GsapPreviewConvergenceError(readMutationError(body, fallback));
+    throw new GsapPreviewConvergenceError(readMutationError(payload, fallback));
   }
-  return readMutationStatus(body);
+  return readMutationStatus(payload);
+}
+function postGsapMutation(projectId, filePath, mutation, fallback) {
+  return postOwnedGsapMutation("gsap-mutations", projectId, filePath, mutation, fallback);
+}
+function postGsapMutations(projectId, filePath, mutations, fallback) {
+  return postOwnedGsapMutation(
+    "gsap-mutations-batch",
+    projectId,
+    filePath,
+    { mutations },
+    fallback
+  );
 }
 
 // src/hooks/timelineTimingSync.ts
@@ -17616,8 +17739,9 @@ function syncTimingEditPreview(iframe, outcome, currentTime, reloadPreview, rebi
   });
   if (result === "cannot-soft-reload") reloadPreview();
 }
+var UNMUTATED = { mutated: false, scriptText: null };
 async function finishTimelineTimingFallback(input) {
-  let outcome = { mutated: false, scriptText: null };
+  let outcome = UNMUTATED;
   if (input.gsapMutation) {
     try {
       outcome = await input.gsapMutation();
@@ -17644,7 +17768,14 @@ async function finishTimelineTimingFallback(input) {
     nestedFiles
   );
 }
-var GSAP_HISTORY_COALESCE_MS = 1e4;
+var UNTIL_NEXT_EDIT = Number.POSITIVE_INFINITY;
+var timingGestures = 0;
+function timingGestureStep(kind, given) {
+  return {
+    coalesceKey: given?.coalesceKey ?? `${kind}:${++timingGestures}`,
+    coalesceMs: UNTIL_NEXT_EDIT
+  };
+}
 async function rollbackMutatedFiles(projectId, ownedSteps, onError) {
   let convergenceRequired = false;
   for (let index = ownedSteps.length - 1; index >= 0; index -= 1) {
@@ -17675,7 +17806,7 @@ async function foldGsapMutationInQueue(input) {
   const ownedSteps = [];
   const runOwnedMutation = async (path, mutation) => {
     const pending2 = mutation();
-    if (!pending2) return { mutated: false, scriptText: null };
+    if (!pending2) return UNMUTATED;
     const status2 = await pending2;
     if (!status2.mutated) return status2;
     if (status2.before === void 0 || status2.after === void 0) {
@@ -17720,7 +17851,7 @@ async function foldGsapMutationInQueue(input) {
         await input.recordEdit({
           label: input.label,
           coalesceKey: input.coalesceKey,
-          coalesceMs: GSAP_HISTORY_COALESCE_MS,
+          coalesceMs: UNTIL_NEXT_EDIT,
           files
         });
       }
@@ -17737,37 +17868,31 @@ function foldGsapMutationIntoHistory(input) {
     () => foldGsapMutationInQueue(input)
   );
 }
+function shiftGsapMutation(elementId2, delta) {
+  if (delta === 0 || !elementId2) return null;
+  return { type: "shift-positions", targetSelector: `#${elementId2}`, delta };
+}
+function scaleGsapMutation(elementId2, oldStart, oldDuration, newStart, newDuration) {
+  if (!elementId2 || oldDuration <= 0 || newDuration <= 0) return null;
+  if (oldStart === newStart && oldDuration === newDuration) return null;
+  return {
+    type: "scale-positions",
+    targetSelector: `#${elementId2}`,
+    oldStart,
+    oldDuration,
+    newStart,
+    newDuration
+  };
+}
 async function shiftGsapPositions(projectId, filePath, elementId2, delta) {
-  if (delta === 0 || !elementId2) return { mutated: false, scriptText: null };
-  return postGsapMutation(
-    projectId,
-    filePath,
-    {
-      type: "shift-positions",
-      targetSelector: `#${elementId2}`,
-      delta
-    },
-    "shift-positions failed"
-  );
+  const mutation = shiftGsapMutation(elementId2, delta);
+  if (!mutation) return UNMUTATED;
+  return postGsapMutation(projectId, filePath, mutation, "shift-positions failed");
 }
 async function scaleGsapPositions(projectId, filePath, elementId2, oldStart, oldDuration, newStart, newDuration) {
-  if (!elementId2 || oldDuration <= 0 || newDuration <= 0)
-    return { mutated: false, scriptText: null };
-  if (oldStart === newStart && oldDuration === newDuration)
-    return { mutated: false, scriptText: null };
-  return postGsapMutation(
-    projectId,
-    filePath,
-    {
-      type: "scale-positions",
-      targetSelector: `#${elementId2}`,
-      oldStart,
-      oldDuration,
-      newStart,
-      newDuration
-    },
-    "scale-positions failed"
-  );
+  const mutation = scaleGsapMutation(elementId2, oldStart, oldDuration, newStart, newDuration);
+  if (!mutation) return UNMUTATED;
+  return postGsapMutation(projectId, filePath, mutation, "scale-positions failed");
 }
 function sdkTimingGsapSync(result) {
   const timelineText = (html2) => {
@@ -17844,11 +17969,17 @@ async function finishGroupTimingGsapFallback(input) {
         let mutated = false;
         let scriptText = null;
         let after;
+        const byPath = /* @__PURE__ */ new Map();
         for (const change of input.changes) {
+          const mutation = input.mutationFor(change);
+          if (!mutation) continue;
           const changePath = input.resolveChangePath(change.element);
+          byPath.set(changePath, [...byPath.get(changePath) ?? [], mutation]);
+        }
+        for (const [changePath, mutations] of byPath) {
           const status = await runOwnedMutation(
             changePath,
-            () => input.mutateChange(change, changePath)
+            () => postGsapMutations(input.projectId, changePath, mutations, input.errorLabel)
           );
           mutated = mutated || status.mutated;
           if (changePath === activePath) ({ scriptText, after } = status);
@@ -18015,10 +18146,10 @@ function resolveResizePlaybackStart(original, target, element, updates) {
     )
   };
 }
-function buildTimelineMoveTimingPatch(original, target, start, duration, track2, audioGroup) {
+function applyTimelineMoveAttributes(original, target, start, duration, track2, audioGroup) {
   if (!Number.isFinite(start) || !Number.isFinite(duration)) {
     console.warn(
-      `[Timeline] buildTimelineMoveTimingPatch: non-finite timing (start=${start}, duration=${duration}) \u2014 patch skipped`
+      `[Timeline] applyTimelineMoveAttributes: non-finite timing (start=${start}, duration=${duration}) \u2014 patch skipped`
     );
     return original;
   }
@@ -18040,9 +18171,16 @@ function buildTimelineMoveTimingPatch(original, target, start, duration, track2,
       property: "data-audio-group",
       value: null
     });
-  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
+  return patched;
+}
+function syncCompositionDurationToContent(source) {
+  return setCompositionDurationToContent(source, furthestClipEndFromSource(source));
+}
+function buildTimelineMoveTimingPatch(original, target, start, duration, track2, audioGroup) {
+  const patched = applyTimelineMoveAttributes(original, target, start, duration, track2, audioGroup);
+  return !(Number.isFinite(start) && Number.isFinite(duration)) ? patched : syncCompositionDurationToContent(patched);
 }
-function buildTimelineResizeTimingPatch(original, target, element, updates) {
+function applyTimelineResizeAttributes(original, target, element, updates) {
   const pbs = resolveResizePlaybackStart(original, target, element, updates);
   let patched = applyPatchByTarget(original, target, {
     type: "attribute",
@@ -18061,7 +18199,10 @@ function buildTimelineResizeTimingPatch(original, target, element, updates) {
       value: formatTimelineMediaOffset(pbs.value)
     });
   }
-  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
+  return patched;
+}
+function buildTimelineResizeTimingPatch(...args) {
+  return syncCompositionDurationToContent(applyTimelineResizeAttributes(...args));
 }
 async function persistTimelineEdit(input) {
   const targetPath = input.element.sourceFile || input.activeCompPath || "index.html";
@@ -18074,6 +18215,7 @@ async function persistTimelineEdit(input) {
     projectId: input.projectId,
     label: input.label,
     coalesceKey: input.coalesceKey,
+    coalesceMs: input.coalesceMs,
     files: {
       [targetPath]: (current) => {
         const patched = input.buildPatches(current, patchTarget);
@@ -18113,7 +18255,12 @@ async function persistTimelineBatchEdit(input) {
     changesByPath.set(targetPath, [...changesByPath.get(targetPath) ?? [], change]);
   }
   const buildFile = (targetPath) => (original) => {
-    const next = patchTimelineChangesInSource(original, targetPath, changesByPath.get(targetPath));
+    const patched = patchTimelineChangesInSource(
+      original,
+      targetPath,
+      changesByPath.get(targetPath)
+    );
+    const next = syncCompositionDurationToContent(patched);
     if (next !== original) input.pendingTimelineEditPathRef.current.add(targetPath);
     return next;
   };
@@ -18521,6 +18668,7 @@ import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 var TimelineClip = memo13(function TimelineClip2({
   el,
   pps,
+  passengerStyle,
   clipY,
   clipHeight,
   isSelected: isSelected2,
@@ -18592,7 +18740,8 @@ var TimelineClip = memo13(function TimelineClip2({
     font: "inherit",
     padding: 0,
     textAlign: "left",
-    transform: isDragging ? "translateY(-1px)" : void 0
+    transform: isDragging ? "translateY(-1px)" : void 0,
+    ...passengerStyle
   };
   return /* @__PURE__ */ jsxs20(
     "button",
@@ -18728,6 +18877,7 @@ function TimelineCompactDiamonds({
   beatsActive,
   accentColor,
   isSelected: isSelected2,
+  passengerStyle,
   currentTime,
   selectedKeyframes,
   rovingTargetId,
@@ -18748,7 +18898,8 @@ function TimelineCompactDiamonds({
         top: CLIP_Y,
         width,
         height: rowHeight - 2 * CLIP_Y,
-        zIndex: isSelected2 ? 11 : 6
+        zIndex: isSelected2 ? 11 : 6,
+        ...passengerStyle
       },
       children: /* @__PURE__ */ jsx34(
         TimelineClipDiamonds,
@@ -21850,7 +22001,6 @@ function LayerDisclosureRow({
 }
 
 // src/player/components/trackHeaderLaneValues.ts
-import gsap2 from "gsap";
 import {
   classifyPropertyGroup as classifyPropertyGroup2
 } from "@hyperframes/core/gsap-parser";
@@ -21858,24 +22008,25 @@ function roundValue(value) {
   return String(Math.round(value * 100) / 100);
 }
 function easedProgress(progress, animation, ease) {
-  const resolved2 = ease ?? animation.keyframes?.easeEach ?? animation.ease;
-  if (!resolved2 || resolved2 === "none") return progress;
-  return gsap2.parseEase(resolved2)?.(progress) ?? progress;
+  return easeFunction(keyframedTweenEases(animation).segment({ ease }))?.(progress) ?? progress;
 }
-function propertyStops(animation, property) {
-  return (animation.keyframes?.keyframes ?? []).filter((keyframe) => property in keyframe.properties).map((keyframe) => ({
+function propertyStops(animation, property, start) {
+  const stops = (animation.keyframes?.keyframes ?? []).filter((keyframe) => property in keyframe.properties).map((keyframe) => ({
     percentage: keyframe.percentage,
     value: keyframe.properties[property],
     ease: keyframe.ease
   }));
+  const first = stops[0];
+  if (!first || first.percentage <= 0 || typeof first.value !== "number") return stops;
+  return [{ percentage: 0, value: start ?? PROPERTY_DEFAULTS[property] ?? 0 }, ...stops];
 }
 function interpolableEnds(before, after) {
   if (typeof before.value !== "number" || typeof after.value !== "number") return null;
   if (before.percentage === after.percentage) return null;
   return { from: before.value, to: after.value };
 }
-function propertyValueAt(animation, property, tweenPercentage) {
-  const stops = propertyStops(animation, property);
+function propertyValueAt(animation, property, tweenPercentage, start) {
+  const stops = propertyStops(animation, property, start);
   const before = stops.filter((stop2) => stop2.percentage <= tweenPercentage).at(-1);
   const after = stops.find((stop2) => stop2.percentage >= tweenPercentage);
   if (!before) return after?.value;
@@ -21885,7 +22036,7 @@ function propertyValueAt(animation, property, tweenPercentage) {
   const progress = (tweenPercentage - before.percentage) / (after.percentage - before.percentage);
   return ends.from + (ends.to - ends.from) * easedProgress(progress, animation, after.ease);
 }
-function valuesAt(animation, group, tweenPercentage) {
+function valuesAt(animation, group, tweenPercentage, startValues = {}) {
   const propertyNames = /* @__PURE__ */ new Set();
   for (const keyframe of animation.keyframes?.keyframes ?? []) {
     for (const property of Object.keys(keyframe.properties)) {
@@ -21894,11 +22045,34 @@ function valuesAt(animation, group, tweenPercentage) {
   }
   const values = {};
   for (const property of propertyNames) {
-    const value = propertyValueAt(animation, property, tweenPercentage);
+    const value = propertyValueAt(animation, property, tweenPercentage, startValues[property]);
     if (value !== void 0) values[property] = value;
   }
   return values;
 }
+var endValue = (animation, property) => animation.keyframes?.keyframes.findLast((keyframe) => property in keyframe.properties)?.properties[property] ?? animation.properties[property];
+function valuesBefore(animation, animations) {
+  const start = resolveTweenStart(animation);
+  if (start == null) return {};
+  const endOf2 = (other) => (resolveTweenStart(other) ?? Infinity) + (other.method === "set" ? 0 : resolveTweenDuration(other));
+  const index = animations.indexOf(animation);
+  const finished = animations.filter((other, i) => {
+    if (other.method === "from" || i === index) return false;
+    return endOf2(other) < start || endOf2(other) === start && i < index;
+  }).sort((a, b) => endOf2(a) - endOf2(b));
+  const values = {};
+  for (const other of finished) {
+    const keyframes = other.keyframes?.keyframes ?? [{ properties: other.properties }];
+    for (const property of new Set(
+      keyframes.flatMap((keyframe) => Object.keys(keyframe.properties))
+    )) {
+      const value = endValue(other, property);
+      if (typeof value === "number") values[property] = value;
+      else delete values[property];
+    }
+  }
+  return values;
+}
 function groupLabel(group, properties) {
   if (group === "visual" && ("opacity" in properties || "autoAlpha" in properties)) {
     return "Opacity";
@@ -21975,7 +22149,12 @@ function resolveLaneHeaderState(lane, currentTime, clipPercentage) {
     currentTime,
     clipPercentage
   );
-  const values = animation ? valuesAt(animation, lane.group, tweenPercentage) : {};
+  const values = animation ? valuesAt(
+    animation,
+    lane.group,
+    tweenPercentage,
+    valuesBefore(animation, lane.elementAnimations)
+  ) : {};
   return {
     navigation,
     values,
@@ -23078,7 +23257,7 @@ function isIntentBlocked(intent, capabilities, onResizeElement, onMoveElement) {
   if (capabilities.readOnly) return true;
   return intent === "move" ? Boolean(onMoveElement) : Boolean(onResizeElement);
 }
-function resolvePointerDownAction(e, grabbed, capabilities, onResizeElement, onMoveElement) {
+function resolvePointerDownAction(e, capabilities, onResizeElement, onMoveElement) {
   if (e.button !== 0) return { kind: "ignore" };
   if (usePlayerStore.getState().activeTool === "razor") return { kind: "ignore" };
   if (isAdditiveClick(e)) return { kind: "ignore" };
@@ -23093,8 +23272,6 @@ function resolvePointerDownAction(e, grabbed, capabilities, onResizeElement, onM
     return { kind: "block", intent, rect };
   }
   if (!onMoveElement || !capabilities.canMove) return { kind: "ignore" };
-  if (exceedsHandEditLimit(grabbed, e.altKey, null))
-    return { kind: "block", intent: "edit-many", rect };
   return { kind: "move", rect };
 }
 function createClipGestureHandlers(el, elementKey3, previewElement, capabilities, deps) {
@@ -23117,17 +23294,6 @@ function createClipGestureHandlers(el, elementKey3, previewElement, capabilities
   const onResizeStart = (edge, e) => {
     if (!canStartResize(edge, e, capabilities, onResizeElement)) return;
     e.stopPropagation();
-    if (exceedsHandEditLimit(el, e.altKey, edge)) {
-      blockedClipRef.current = {
-        pointerId: e.pointerId,
-        element: el,
-        intent: "edit-many",
-        originClientX: e.clientX,
-        originClientY: e.clientY,
-        started: false
-      };
-      return;
-    }
     blockedClipRef.current = null;
     setShowPopover(false);
     setRangeSelection(null);
@@ -23145,7 +23311,7 @@ function createClipGestureHandlers(el, elementKey3, previewElement, capabilities
     });
   };
   const onPointerDown = (e) => {
-    const action = resolvePointerDownAction(e, el, capabilities, onResizeElement, onMoveElement);
+    const action = resolvePointerDownAction(e, capabilities, onResizeElement, onMoveElement);
     if (action.kind === "ignore") return;
     if (action.kind === "block") {
       blockedClipRef.current = {
@@ -23352,6 +23518,14 @@ function TimelineTransitionOverlays({
 
 // src/player/components/TimelineLanes.tsx
 import { jsx as jsx57, jsxs as jsxs37 } from "react/jsx-runtime";
+function passengerStyleAt(offsetPx) {
+  return {
+    transform: `translateX(${offsetPx}px)`,
+    opacity: 0.85,
+    zIndex: 20,
+    pointerEvents: "none"
+  };
+}
 function TimelineLanes({
   pps,
   contentOrigin,
@@ -23658,7 +23832,7 @@ function TimelineLanes({
                         isSelected2 || hoveredClip === clipKey || pinnedClipIdentities.has(clipKey)
                       );
                       const isPassenger = multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
-                      const passengerOffsetPx = isPassenger ? multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview) : 0;
+                      const passengerStyle = isPassenger ? passengerStyleAt(multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview)) : void 0;
                       const clipGestures = createClipGestureHandlers(
                         el,
                         elementKey3,
@@ -23690,6 +23864,7 @@ function TimelineLanes({
                           },
                           el: previewElement,
                           pps,
+                          passengerStyle,
                           clipY: CLIP_Y,
                           clipHeight: clipBarHeight,
                           isSelected: isSelected2,
@@ -23733,6 +23908,7 @@ function TimelineLanes({
                           beatsActive: beatStripOnTrack,
                           accentColor: clipStyle.accent,
                           isSelected: isSelected2,
+                          passengerStyle,
                           currentTime,
                           selectedKeyframes,
                           rovingTargetId: keyboard.rovingTargetId,
@@ -23754,6 +23930,7 @@ function TimelineLanes({
                           clipDuration: previewElement.duration,
                           clipLeftPx: previewElement.start * pps,
                           clipWidthPx: Math.max(previewElement.duration * pps, 4),
+                          passengerStyle,
                           accentColor: clipStyle.accent,
                           isSelected: isSelected2,
                           currentPercentage: previewElement.duration > 0 ? (currentTime - previewElement.start) / previewElement.duration * 100 : 0,
@@ -23769,31 +23946,11 @@ function TimelineLanes({
                         },
                         `${clipKey}-property-lanes`
                       );
-                      if (!isPassenger) {
-                        return /* @__PURE__ */ jsxs37(Fragment18, { children: [
-                          clip,
-                          compactDiamonds,
-                          propertyLanes
-                        ] }, clipKey);
-                      }
-                      return /* @__PURE__ */ jsxs37(
-                        "div",
-                        {
-                          className: "absolute inset-0",
-                          style: {
-                            transform: `translateX(${passengerOffsetPx}px)`,
-                            opacity: 0.85,
-                            zIndex: 20,
-                            pointerEvents: "none"
-                          },
-                          children: [
-                            clip,
-                            compactDiamonds,
-                            propertyLanes
-                          ]
-                        },
-                        clipKey
-                      );
+                      return /* @__PURE__ */ jsxs37(Fragment18, { children: [
+                        clip,
+                        compactDiamonds,
+                        propertyLanes
+                      ] }, clipKey);
                     }),
                     /* @__PURE__ */ jsx57(
                       TimelineTransitionOverlays,
@@ -29383,8 +29540,75 @@ var STUDIO_MANUAL_EDITS_WRAPPED_PROP = "__hfStudioManualEditsWrapped";
 var STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP = "__hfStudioManualEditsPlaybackFrame";
 var STUDIO_ROTATION_TRANSFORM_ORIGIN = "center center";
 
-// src/hooks/gsapRuntimeKeyframes.ts
+// src/hooks/gsapRuntimeMotionPath.ts
 import { buildArcPath } from "@hyperframes/core/gsap-parser-acorn";
+function isXY(p) {
+  return !!p && typeof p.x === "number" && typeof p.y === "number";
+}
+function coordsFromMotionPath(mp) {
+  if (!mp || typeof mp !== "object") return null;
+  const obj = mp;
+  const pathVal = Array.isArray(mp) ? mp : obj.path;
+  if (!Array.isArray(pathVal)) return null;
+  const coords = pathVal.filter(isXY).map((p) => ({ x: p.x, y: p.y }));
+  if (coords.length < 2) return null;
+  const curviness = typeof obj.curviness === "number" ? obj.curviness : 1;
+  const autoRotate = typeof obj.autoRotate === "number" ? obj.autoRotate : obj.autoRotate === true;
+  return { coords, curviness, autoRotate, isCubic: obj.type === "cubic" };
+}
+function readMotionPathTween(vars, runEase) {
+  const mp = coordsFromMotionPath(vars.motionPath);
+  const shape = mp && buildArcPath(mp.coords, mp.curviness, mp.autoRotate, mp.isCubic);
+  if (!shape) return null;
+  const n = shape.waypoints.length;
+  const keyframes = shape.waypoints.map((wp, i) => ({
+    percentage: n > 1 ? Math.round(i / (n - 1) * 100) : 0,
+    properties: { x: wp.x, y: wp.y }
+  }));
+  return { keyframes, arcPath: shape.arcPath, runEase: runEase ?? MOTION_PATH_RUN_EASE };
+}
+
+// src/hooks/gsapRuntimeTweenIndex.ts
+function matchesElement(tween, el) {
+  if (!tween.targets) return false;
+  for (const t2 of tween.targets()) {
+    if (t2 === el || el.id && t2.id === el.id) return true;
+  }
+  return false;
+}
+var tweenIndexes = null;
+function withTweenIndex(run) {
+  const outer = tweenIndexes;
+  tweenIndexes ??= /* @__PURE__ */ new WeakMap();
+  try {
+    return run();
+  } finally {
+    tweenIndexes = outer;
+  }
+}
+function indexTweens(children) {
+  const index = { byElement: /* @__PURE__ */ new Map(), byId: /* @__PURE__ */ new Map() };
+  const add = (map, key2, tween) => {
+    const list = map.get(key2);
+    if (!list) map.set(key2, [tween]);
+    else if (list.at(-1) !== tween) list.push(tween);
+  };
+  for (const tween of children) {
+    for (const target of tween.targets?.() ?? []) {
+      add(index.byElement, target, tween);
+      const id = target.id;
+      if (id) add(index.byId, id, tween);
+    }
+  }
+  return index;
+}
+function tweensTargeting(timeline, el) {
+  if (!timeline || typeof timeline !== "object" || !tweenIndexes)
+    return (timeline?.getChildren?.(true) ?? []).filter((tween) => matchesElement(tween, el));
+  let index = tweenIndexes.get(timeline);
+  if (!index) tweenIndexes.set(timeline, index = indexTweens(timeline.getChildren?.(true) ?? []));
+  return (el.id ? index.byId.get(el.id) : index.byElement.get(el)) ?? [];
+}
 
 // src/hooks/gsapParsedTween.ts
 var PARSED_NAME = { scale: "scaleX", rotate: "rotation" };
@@ -29547,14 +29771,13 @@ var BUILT_IN_EASES = [
 function withExactStepTimes(anim, tween) {
   const data = anim.keyframes;
   const parts = tween?.timeline?.getChildren?.() ?? [];
-  const total = tween?.timeline?.duration?.() ?? 0;
-  if (data?.format !== "object-array" || parts.length !== data.keyframes.length || !(total > 0))
-    return anim;
-  const ends = parts.map((part) => ((part.startTime?.() ?? 0) + (part.duration?.() ?? 0)) / total);
-  if (ends.some((end) => !Number.isFinite(end))) return anim;
+  if (data?.format !== "object-array" || parts.length !== data.keyframes.length) return anim;
+  const ends = parts.map((part) => (part.startTime?.() ?? 0) + (part.duration?.() ?? 0));
+  const total = Math.max(...ends);
+  if (!(total > 0) || ends.some((end) => !Number.isFinite(end))) return anim;
   const keyframes = data.keyframes.map((kf, i) => ({
     ...kf,
-    percentage: Math.round(ends[i] * 1e5) / 1e3
+    percentage: Math.round(ends[i] / total * 1e5) / 1e3
   }));
   return { ...anim, keyframes: { ...data, keyframes } };
 }
@@ -29716,23 +29939,9 @@ function timelinesOf(iframe) {
     return null;
   }
 }
-function isXY(p) {
-  return !!p && typeof p.x === "number" && typeof p.y === "number";
-}
 function isZeroDurationSet(duration) {
   return !(duration > 0);
 }
-function coordsFromMotionPath(mp) {
-  if (!mp || typeof mp !== "object") return null;
-  const obj = mp;
-  const pathVal = Array.isArray(mp) ? mp : obj.path;
-  if (!Array.isArray(pathVal)) return null;
-  const coords = pathVal.filter(isXY).map((p) => ({ x: p.x, y: p.y }));
-  if (coords.length < 2) return null;
-  const curviness = typeof obj.curviness === "number" ? obj.curviness : 1;
-  const autoRotate = typeof obj.autoRotate === "number" ? obj.autoRotate : obj.autoRotate === true;
-  return { coords, curviness, autoRotate, isCubic: obj.type === "cubic" };
-}
 function flatTweenKeyframes(vars) {
   const properties = {};
   for (const [k, v] of Object.entries(vars)) {
@@ -29746,33 +29955,19 @@ function flatTweenKeyframes(vars) {
     { percentage: 100, properties }
   ];
 }
+var stringOr = (value) => typeof value === "string" ? value : void 0;
 function readTween(vars) {
+  const runEase = stringOr(vars.ease);
   if (vars.keyframes && typeof vars.keyframes === "object") {
     const parsed = parsePercentageKeyframes(vars.keyframes);
-    if (parsed) return parsed;
-  }
-  const mp = coordsFromMotionPath(vars.motionPath);
-  if (mp) {
-    const shape = buildArcPath(mp.coords, mp.curviness, mp.autoRotate, mp.isCubic);
-    if (shape) {
-      const n = shape.waypoints.length;
-      const keyframes = shape.waypoints.map((wp, i) => ({
-        percentage: n > 1 ? Math.round(i / (n - 1) * 100) : 0,
-        properties: { x: wp.x, y: wp.y }
-      }));
-      return { keyframes, arcPath: shape.arcPath };
-    }
+    const keyframesEase = stringOr(vars.keyframes.ease);
+    if (parsed) return { ...parsed, runEase: keyframesEase ?? runEase };
   }
+  const path = readMotionPathTween(vars, runEase);
+  if (path) return path;
   const flat = flatTweenKeyframes(vars);
   return flat ? { keyframes: flat } : null;
 }
-function matchesElement(tween, el) {
-  if (!tween.targets) return false;
-  for (const t2 of tween.targets()) {
-    if (t2 === el || el.id && t2.id === el.id) return true;
-  }
-  return false;
-}
 function tweenTiming(tween) {
   const rawStart = typeof tween.startTime === "function" ? tween.startTime() : 0;
   const rawDur = typeof tween.duration === "function" ? tween.duration() : 0;
@@ -29904,8 +30099,8 @@ var GSAP_TRANSFORM_KEYS = new Set(
 function gsapWritesChannels(el, channels) {
   const win = el.ownerDocument.defaultView;
   return Object.values(win?.__timelines ?? {}).some(
-    (tl) => (tl?.getChildren?.(true) ?? []).some(
-      (tween) => !!tween.vars && matchesElement(tween, el) && (channels.some((ch) => ch in tween.vars) || keyframeVarsCarryChannel(tween.vars, channels))
+    (tl) => tweensTargeting(tl, el).some(
+      (tween) => !!tween.vars && (channels.some((ch) => ch in tween.vars) || keyframeVarsCarryChannel(tween.vars, channels))
     )
   );
 }
@@ -29950,8 +30145,8 @@ function elementHasNonHoldTween(el, channels) {
 function hasNonHoldTween(timelines, targetEl, channels, compositionId) {
   if (!timelines) return false;
   for (const tlId of compositionId ? [compositionId] : Object.keys(timelines)) {
-    for (const tween of timelines[tlId]?.getChildren?.(true) ?? []) {
-      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+    for (const tween of tweensTargeting(timelines[tlId], targetEl)) {
+      if (!tween.vars) continue;
       const dur = typeof tween.duration === "function" ? tween.duration() : 0;
       if (isZeroDurationSet(dur)) continue;
       if (channels && keyframeVarsCarryChannel(tween.vars, channels)) return true;
@@ -29961,16 +30156,17 @@ function hasNonHoldTween(timelines, targetEl, channels, compositionId) {
   }
   return false;
 }
-function toClipRelative(keyframes, tweenStart, tweenDuration, clip) {
+function toClipRelative(read2, tweenStart, tweenDuration, clip) {
+  const { keyframes, runEase } = read2;
   if (!clip || clip.duration <= 0) return keyframes;
   return keyframes.map((kf) => {
-    const abs = toAbsoluteTime(tweenStart, tweenDuration, kf.percentage);
+    const abs = toAbsoluteTime(tweenStart, tweenDuration, timeAtProgress(runEase, kf.percentage));
     return { ...kf, percentage: Math.round((abs - clip.start) / clip.duration * 1e5) / 1e3 };
   });
 }
 function buildEntry(read2, start, duration, clip) {
   return {
-    keyframes: toClipRelative(read2.keyframes, start, duration, clip),
+    keyframes: toClipRelative(read2, start, duration, clip),
     tweenStart: start,
     tweenDuration: duration,
     ...read2.easeEach ? { easeEach: read2.easeEach } : {},
@@ -31971,7 +32167,7 @@ function NLEProvider({
   }, [projectId, setCompIdToSrc]);
   useEffect37(() => {
     if (compIdToSrc.size === 0) return;
-    const patchElements = (elements) => {
+    const patchElements2 = (elements) => {
       const map = compIdToSrcRef.current;
       if (map.size === 0) return null;
       let patched2 = false;
@@ -31986,7 +32182,7 @@ function NLEProvider({
       });
       return patched2 ? updated : null;
     };
-    const patched = patchElements(usePlayerStore.getState().elements);
+    const patched = patchElements2(usePlayerStore.getState().elements);
     if (patched) usePlayerStore.getState().setElements(patched);
     let patching = false;
     return usePlayerStore.subscribe((state, prev) => {
@@ -31994,7 +32190,7 @@ function NLEProvider({
       if (state.elements === prev.elements || state.elements.length === 0) return;
       if (state.elements.every((el) => el.compositionSrc)) return;
       patching = true;
-      const result = patchElements(state.elements);
+      const result = patchElements2(state.elements);
       if (result) state.setElements(result);
       patching = false;
     });
@@ -36477,7 +36673,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-OL7GLSS4.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-IEVLO54Z.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -43729,14 +43925,7 @@ function useMirrorLaneMoveCommit() {
           // NO readZIndex / onStackingPatches: see the hook doc — the lane→z
           // stacking sync must not re-trigger and fight the just-set z values.
         },
-        coalesceKey,
-        // Unbounded fold window: this record lands only AFTER the z persist's
-        // server round-trip resolved, so the gap between the gesture's two
-        // records exceeds editHistory's 300ms default under real latency and
-        // the fold would silently split into two undo entries. The shared key
-        // is unique per gesture (zReorderCoalesceKey's gesture seq), so the
-        // unbounded window can never merge two distinct user actions.
-        Number.POSITIVE_INFINITY
+        coalesceKey
       );
     },
     [onMoveElements]
@@ -44869,7 +45058,23 @@ function TopologyLens({ iframeRef, activeCompositionPath }) {
   );
 }
 
+// src/utils/sameData.ts
+function sameData(a, b) {
+  if (Object.is(a, b)) return true;
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  if ("nodeType" in a || "nodeType" in b || Array.isArray(a) !== Array.isArray(b)) return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length) return false;
+  return keys.every((key2) => sameData(a[key2], b[key2]));
+}
+
 // src/hooks/gsapKeyframeCacheHelpers.ts
+function keepEqualEntries(before, draft) {
+  for (const [key2, value] of draft) {
+    const shown2 = before.get(key2);
+    if (shown2 !== void 0 && shown2 !== value && sameData(shown2, value)) draft.set(key2, shown2);
+  }
+}
 function sameEntries(before, after) {
   if (before.size !== after.size) return false;
   for (const [key2, value] of before) {
@@ -44884,6 +45089,8 @@ function publishKeyframeCache(edit) {
     gsapAnimations: new Map(gsapAnimations)
   };
   edit(draft);
+  keepEqualEntries(keyframeCache, draft.keyframeCache);
+  keepEqualEntries(gsapAnimations, draft.gsapAnimations);
   if (sameEntries(keyframeCache, draft.keyframeCache) && sameEntries(gsapAnimations, draft.gsapAnimations))
     return;
   usePlayerStore.setState({
@@ -44953,8 +45160,15 @@ function cachedElementIdsForFile(sourceFile, keyframeCache, gsapAnimations) {
   const sfPrefix = `${sourceFile}#`;
   const ids = /* @__PURE__ */ new Set();
   for (const key2 of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
-    if (!key2.startsWith(sfPrefix)) continue;
-    ids.add(key2.slice(sfPrefix.length));
+    if (key2.startsWith(sfPrefix)) ids.add(key2.slice(sfPrefix.length));
+  }
+  if (sourceFile !== "index.html") return ids;
+  for (const [key2, entry2] of keyframeCache) {
+    const hash = key2.indexOf("#");
+    const id = key2.slice(hash + 1);
+    if (hash > 0 && !key2.startsWith(sfPrefix) && keyframeCache.get(sfPrefix + id) === entry2) {
+      ids.delete(id);
+    }
   }
   return ids;
 }
@@ -45362,10 +45576,9 @@ function computeCurrentPercentage(selection, animation) {
   return computeElementPercentage(usePlayerStore.getState().currentTime, selection, animation);
 }
 function parkPlayheadOnKeyframe(anim, pct) {
-  const ts = resolveTweenStart(anim);
-  const td = resolveTweenDuration(anim);
-  if (ts == null || !td || td <= 0) return;
-  usePlayerStore.getState().requestSeek(roundTo3(ts + pct / 100 * td));
+  const time = percentageToAbsoluteForAnimation(pct, anim);
+  if (time === null || resolveTweenDuration(anim) <= 0) return;
+  usePlayerStore.getState().requestSeek(roundTo3(time));
 }
 async function replaceKeyframedPositionHold(selection, existingSet, properties, commitMutation) {
   const target = newTweenTarget(selection);
@@ -45740,7 +45953,7 @@ function findGsapPositionAnimation(animations, selector) {
 }
 function playheadProximity(a, currentTime) {
   const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-  const dur = a.duration ?? 0;
+  const dur = resolveTweenDuration(a);
   if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) return 50;
   return -Math.round(Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5);
 }
@@ -45749,7 +45962,9 @@ function statesValueAt(anim, time) {
   if (!(duration > 0)) return false;
   const pct = (time - (resolveTweenStart(anim) ?? 0)) / duration * 100;
   const near3 = (keyframe) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
-  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near3(kf.percentage));
+  const runEase = runEaseOf(anim);
+  if (anim.keyframes)
+    return anim.keyframes.keyframes.some((kf) => near3(timeAtProgress(runEase, kf.percentage)));
   if (anim.method === "from") return near3(0);
   return near3(100) || anim.method === "fromTo" && near3(0);
 }
@@ -46054,8 +46269,6 @@ function tweensForThisElement(selection, animations) {
 }
 
 // src/hooks/gsapValueAtPlayhead.ts
-var PERCENTAGE_SEGMENT_EASE = "power1.inOut";
-var ARRAY_STEP_EASE = "none";
 var roundPct2 = (pct) => Math.round(pct * 1e3) / 1e3;
 var isLinear = (ease) => !ease || ease === "none" || ease === "linear";
 function refuse(reason) {
@@ -46070,7 +46283,7 @@ function normalize(edit) {
     const blocked = stepListBlock(anim);
     if (blocked) return { reason: blocked };
     return {
-      runEase: data.ease ?? anim.ease,
+      runEase: runEaseOf(anim),
       keyframes: data.keyframes.map((kf) => ({
         ...kf,
         properties: { ...kf.properties },
@@ -47451,7 +47664,7 @@ function readAllAnimatedProperties(iframe, selector, anim, group) {
 // src/hooks/gsapDragPositionCommit.ts
 function buildTemporalArcKeyframes(anim, percentage, properties) {
   return [
-    ...(anim.keyframes?.keyframes ?? []).filter((keyframe) => Math.abs(keyframe.percentage - percentage) > KEYFRAME_PCT_MATCH).map((keyframe) => ({
+    ...linearArcKeyframes(anim).filter((keyframe) => Math.abs(keyframe.percentage - percentage) > KEYFRAME_PCT_MATCH).map((keyframe) => ({
       percentage: keyframe.percentage,
       properties: { ...keyframe.properties },
       ...keyframe.ease ? { ease: keyframe.ease } : {}
@@ -47459,6 +47672,35 @@ function buildTemporalArcKeyframes(anim, percentage, properties) {
     { percentage, properties }
   ].sort((a, b) => a.percentage - b.percentage);
 }
+function linearArcKeyframes(anim) {
+  const runEase = runEaseOf(anim);
+  return (anim.keyframes?.keyframes ?? []).map((keyframe) => ({
+    ...keyframe,
+    percentage: roundTo3(timeAtProgress(runEase, keyframe.percentage))
+  }));
+}
+function buildExtendedKeyframes(anim, currentTime, position, sourceDuration = resolveTweenDuration(anim), writeEase = runEaseOf(anim)) {
+  const oldStart = resolveTweenStart(anim) ?? 0;
+  const oldDuration = sourceDuration;
+  const newStart = Math.min(oldStart, currentTime);
+  const newEnd = Math.max(oldStart + oldDuration, currentTime);
+  const newDuration = roundTo3(newEnd - newStart);
+  const oldRunEase = runEaseOf(anim);
+  const toPct = (absoluteTime) => {
+    if (newDuration <= 0) return 0;
+    const progress = progressAtTime(writeEase, (absoluteTime - newStart) / newDuration * 100);
+    return Math.max(0, Math.min(100, Math.round(progress * 10) / 10));
+  };
+  const stops = anim.keyframes?.keyframes ?? [];
+  const rescaled = stops.map((stop2) => ({
+    percentage: toPct(oldStart + timeAtProgress(oldRunEase, stop2.percentage) / 100 * oldDuration),
+    properties: stop2.properties,
+    ...stop2.ease ? { ease: stop2.ease } : {}
+  }));
+  const added = { percentage: toPct(currentTime), properties: position };
+  const keyframes = [...rescaled, added].sort((a, b) => a.percentage - b.percentage);
+  return { position: roundTo3(newStart), duration: newDuration, keyframes };
+}
 function gsapPositionFromDragOutcome(selection, anim, studioOffset, gsapPos, iframe) {
   if (anim.arcPath?.enabled) return { status: "persisted" };
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
@@ -47487,12 +47729,38 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
     el.removeAttribute("data-hf-drag-initial-offset-y");
   };
   if (anim.arcPath?.enabled) {
-    const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+    const { activeKeyframePct, currentTime, setActiveKeyframePct } = usePlayerStore.getState();
+    const tweenStart = resolveTweenStart(anim);
+    const tweenDuration = resolveTweenDuration(anim);
+    if (activeKeyframePct === null && tweenStart !== null && !isTimeWithinTween(currentTime, tweenStart, tweenDuration)) {
+      const extended = buildExtendedKeyframes(
+        anim,
+        currentTime,
+        { x: newX, y: newY },
+        tweenDuration,
+        "none"
+      );
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "replace-with-keyframes",
+          animationId: anim.id,
+          targetSelector: anim.targetSelector,
+          ...extended,
+          ease: "none"
+        },
+        {
+          label: "Move layer (new keyframe)",
+          keyframeAction: "add",
+          softReload: true,
+          beforeReload: restoreOffset
+        }
+      );
+      return { status: "persisted" };
+    }
     const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
     const keyframes = anim.keyframes?.keyframes ?? [];
-    const pointIndex = keyframes.findIndex(
-      (kf) => Math.abs(kf.percentage - pct) <= KEYFRAME_PCT_MATCH
-    );
+    const pointIndex = keyframes.findIndex((kf) => playsNear(anim, kf.percentage, pct));
     if (pointIndex >= 0) {
       await callbacks.commitMutation(
         selection,
@@ -47509,11 +47777,10 @@ async function commitGsapPositionFromDrag(selection, anim, studioOffset, gsapPos
       parkPlayheadOnKeyframe(anim, pct);
       return { status: "persisted" };
     }
-    const tweenStart = resolveTweenStart(anim);
-    const tweenDuration = resolveEditableTweenDuration(anim, selection);
     if (tweenStart === null || tweenDuration <= 0 || keyframes.length < 2)
       return { status: "persisted" };
-    const temporalKeyframes = buildTemporalArcKeyframes(anim, pct, { x: newX, y: newY });
+    const timePct = roundTo3(timeAtProgress(runEaseOf(anim), pct));
+    const temporalKeyframes = buildTemporalArcKeyframes(anim, timePct, { x: newX, y: newY });
     await callbacks.commitMutation(
       selection,
       {
@@ -48010,19 +48277,7 @@ function useGsapAnimationsForElement(projectId, sourceFile, target, version, ifr
       if (isStaticPositionHold(anim)) continue;
       const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
       if (!kf) continue;
-      const tweenPos = anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
-      const tweenDur = anim.duration ?? elDuration;
-      for (const k of kf.keyframes) {
-        const absTime = toAbsoluteTime(tweenPos, tweenDur, k.percentage);
-        const clipPct = toClipPercentage(absTime, elStart, elDuration, k.percentage);
-        allKeyframes.push({
-          ...k,
-          percentage: clipPct,
-          tweenPercentage: k.percentage,
-          propertyGroup: anim.propertyGroup,
-          animationId: anim.id
-        });
-      }
+      allKeyframes.push(...toClipKeyframes(kf.keyframes, anim, elStart, elDuration));
       format = kf.format;
       if (kf.ease) ease = kf.ease;
       if (kf.easeEach) easeEach = kf.easeEach;
@@ -48074,11 +48329,11 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
     const files = Array.from(
       /* @__PURE__ */ new Set([sourceFile, ...compositionSrcKey ? compositionSrcKey.split("|") : []])
     );
-    const sameData = loadedRef.current.dataKey === dataKey;
-    const stale = sameData ? files.filter((sf) => !loadedRef.current.files.has(sf)) : files;
-    const covered = sameData ? /* @__PURE__ */ new Set([...loadedRef.current.files, ...files]) : new Set(files);
+    const sameData2 = loadedRef.current.dataKey === dataKey;
+    const stale = sameData2 ? files.filter((sf) => !loadedRef.current.files.has(sf)) : files;
+    const covered = sameData2 ? /* @__PURE__ */ new Set([...loadedRef.current.files, ...files]) : new Set(files);
     loadedRef.current = { dataKey, files: covered };
-    if (!sameData) pruneKeyframeCacheToFiles(files);
+    if (!sameData2) pruneKeyframeCacheToFiles(files);
     if (stale.length === 0) return;
     runtimeScanDoneRef.current = "";
     const doc = iframeRef?.current?.contentDocument;
@@ -48155,7 +48410,7 @@ function resolveFlatTweenBoundaryRetime(opts) {
   };
 }
 function resolveKeyframeRetime(opts) {
-  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
+  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime, runEase } = opts;
   if (tweenDuration <= 0) return { kind: "noop" };
   const tweenEnd = tweenStart + tweenDuration;
   const flatBoundary = resolveFlatTweenBoundaryRetime({
@@ -48167,7 +48422,8 @@ function resolveKeyframeRetime(opts) {
   });
   if (flatBoundary) return flatBoundary;
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
-    const toTweenPct = round33(clamp5((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100));
+    const dropTimePct = clamp5((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100);
+    const toTweenPct = round33(progressAtTime(runEase, dropTimePct));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT2) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
@@ -48185,8 +48441,9 @@ function resolveKeyframeRetime(opts) {
     }
   });
   const pctRemap = keyframes.map((kf, i) => {
-    const absTime = i === draggedIdx ? dropAbsTime : tweenStart + kf.percentage / 100 * tweenDuration;
-    return { from: kf.percentage, to: round33((absTime - newStart) / newDuration * 100) };
+    const absTime = i === draggedIdx ? dropAbsTime : tweenStart + timeAtProgress(runEase, kf.percentage) / 100 * tweenDuration;
+    const newTimePct = (absTime - newStart) / newDuration * 100;
+    return { from: kf.percentage, to: round33(progressAtTime(runEase, newTimePct)) };
   });
   return {
     kind: "resize",
@@ -48365,14 +48622,15 @@ function useTimelineEditCallbacks({
           elements,
           domClipChildren
         );
-        const tweenDuration = resolveTweenDuration(anim, elDuration);
+        const tweenDuration = resolveTweenDuration(anim);
         const dropAbsTime = elStart + toClipPct / 100 * elDuration;
         const decision = resolveKeyframeRetime({
           keyframes: anim.keyframes?.keyframes ?? [],
           draggedTweenPct: target.tweenPct,
           tweenStart,
           tweenDuration,
-          dropAbsTime
+          dropAbsTime,
+          runEase: runEaseOf(anim)
         });
         if (decision.kind === "move" && decision.toTweenPct != null) {
           return handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct, sel);
@@ -73362,6 +73620,7 @@ function usePersistentEditHistory({ projectId }) {
   const projectIdRef = useRef125(projectId);
   projectIdRef.current = projectId;
   const [own] = useState111(createOwnHistory);
+  const [pageKeyScope] = useState111(generateId);
   const refresh2 = useCallback100(async () => {
     if (!projectId) return;
     const seen = own.changes();
@@ -73379,6 +73638,10 @@ function usePersistentEditHistory({ projectId }) {
     own.clear();
     void refresh2().finally(() => setLoaded(true));
   }, [refresh2, own]);
+  useEffect111(() => {
+    setStudioPendingEditClaimClock(own.claimCount);
+    return () => setStudioPendingEditClaimClock(null);
+  }, [own]);
   const recordEdit = useCallback100(
     async ({ label, coalesceKey, coalesceMs, files, created = [] }) => {
       if (!projectId) return;
@@ -73388,7 +73651,10 @@ function usePersistentEditHistory({ projectId }) {
         label,
         paths,
         overwrote: await overwroteVersions(files),
-        ...coalesceKey && { coalesceKey, idleMs: coalesceMs ?? DEFAULT_COALESCE_MS }
+        ...coalesceKey && {
+          coalesceKey: `${pageKeyScope}:${coalesceKey}`,
+          idleMs: coalesceMs ?? DEFAULT_COALESCE_MS
+        }
       });
       const claimed = claimHeld(reply, label);
       if (claimed) {
@@ -73398,7 +73664,7 @@ function usePersistentEditHistory({ projectId }) {
       heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
       await refresh2();
     },
-    [projectId, refresh2, own]
+    [projectId, refresh2, own, pageKeyScope]
   );
   const step = useCallback100(
     async (direction, callbacks) => {
@@ -74665,6 +74931,10 @@ function usePreviewPersistence({
     [applyCurrentStudioManualEditsToPreview, previewIframeRef]
   );
   applyStudioManualEditsToPreviewRef.current = applyStudioManualEditsToPreview;
+  const heldPreviewDoc = useCallback106(() => {
+    const doc = previewIframeRef.current?.contentDocument;
+    return doc && isStudioManualEditGestureLiveIn(doc) ? doc : null;
+  }, [previewIframeRef]);
   const syncHistoryPreviewAfterApply = useCallback106(
     async (restore2) => {
       const projectId = usePlayerStore.getState().timelineProjectId;
@@ -74676,6 +74946,15 @@ function usePreviewPersistence({
           (path) => projectId ? readProjectFileContent(projectId, path) : Promise.reject(new Error("No project is open to read nested files from."))
         )
       );
+      const held = heldPreviewDoc();
+      if (held) {
+        const paths = restore2.paths ?? Object.keys(restore2.files ?? {});
+        afterStudioManualEditGestures(held, () => {
+          markScenesStale(previewIframeRef.current, paths);
+          reloadPreview();
+        });
+        return;
+      }
       const strategy = applyUndoRestoreToPreview(
         previewIframeRef.current,
         activeCompPathRef.current,
@@ -74690,21 +74969,23 @@ function usePreviewPersistence({
       }
       syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
     },
-    [previewIframeRef, activeCompPathRef, reloadPreview]
+    [previewIframeRef, activeCompPathRef, reloadPreview, heldPreviewDoc]
   );
   const showHistoryRestoreNow = useCallback106(
     (files) => {
-      if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits()) return null;
+      if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits() || heldPreviewDoc())
+        return null;
       const iframe = previewIframeRef.current;
       const now2 = () => usePlayerStore.getState().currentTime;
       const putBack = showRestoreInPlace(iframe, activeCompPathRef.current, files, now2());
       if (!putBack) return null;
       return () => {
-        if (putBack(now2())) syncStoredAutomationFromPreview(iframe?.contentDocument ?? null);
+        if (!heldPreviewDoc() && putBack(now2()))
+          syncStoredAutomationFromPreview(iframe?.contentDocument ?? null);
         else void syncHistoryPreviewAfterApply({ paths: Object.keys(files) });
       };
     },
-    [previewIframeRef, activeCompPathRef, syncHistoryPreviewAfterApply]
+    [previewIframeRef, activeCompPathRef, syncHistoryPreviewAfterApply, heldPreviewDoc]
   );
   useMountEffect(() => {
     void clearLegacyStudioMotionFile(_readOptionalProjectFile, _writeProjectFile);
@@ -74750,7 +75031,7 @@ function usePreviewDocumentVersion() {
 }
 
 // src/hooks/useTimelineEditing.ts
-import { useCallback as useCallback123, useRef as useRef139 } from "react";
+import { useRef as useRef139 } from "react";
 
 // src/hooks/useRazorSplit.ts
 import { useCallback as useCallback109, useRef as useRef133 } from "react";
@@ -76050,7 +76331,6 @@ function applyRippleShifts(survivors, changes) {
     return newStart != null ? { ...te, start: newStart } : te;
   });
 }
-var deleteGestureSeq = 0;
 function unlinkInSource(source, survivors) {
   const targets = survivors.map(buildPatchTarget).filter((target) => target !== null);
   return targets.length > 0 ? setLinkInSource(source, targets, null) : source;
@@ -76086,7 +76366,7 @@ function useTimelineDeleteOps({
         (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath
       );
       try {
-        const coalesceKey = `main-track-ripple-delete:${deleteGestureSeq++}`;
+        const step = timingGestureStep("main-track-ripple-delete");
         const deleteHistoryLabel = "Delete timeline clip";
         let rollbackDuration = () => {
         };
@@ -76095,7 +76375,7 @@ function useTimelineDeleteOps({
             projectId: pid,
             path: targetPath,
             label: deleteHistoryLabel,
-            coalesceKey,
+            ...step,
             writeFile: writeProjectFile,
             recordEdit,
             rewrite: async (originalContent) => {
@@ -76152,8 +76432,7 @@ function useTimelineDeleteOps({
         if (rippleChanges) {
           try {
             await handleTimelineGroupMove(rippleChanges, {
-              coalesceKey,
-              coalesceMs: Number.POSITIVE_INFINITY,
+              coalesceKey: step.coalesceKey,
               // Coalescing keeps the LAST entry's label; without this the undo
               // toast reads "Undid Move timeline clips" after a delete, naming
               // the ripple's mechanics instead of what the user actually did.
@@ -76281,7 +76560,7 @@ function planSyncEdit(edit) {
           property: "start",
           value: value2
         });
-        return setCompositionDurationToContent(moved, furthestClipEndFromSource(moved));
+        return syncCompositionDurationToContent(moved);
       }
     };
   }
@@ -76925,12 +77204,6 @@ function allChangesSharePath(changes, activeCompPath) {
   if (!firstPath) return null;
   return changes.every((change) => targetPathFor(change.element, activeCompPath) === firstPath) ? firstPath : null;
 }
-function moveCoalesceKey(changes) {
-  return `timeline-group-move:${changes.map((change) => change.element.hfId ?? change.element.id).join(",")}`;
-}
-function resizeCoalesceKey(changes) {
-  return `timeline-group-resize:${changes.map((change) => change.element.hfId ?? change.element.id).join(",")}`;
-}
 function toSdkTimingChanges(changes, timingUpdate) {
   return changes.map(
     (change) => change.element.hfId ? { hfId: change.element.hfId, timingUpdate: timingUpdate(change) } : null
@@ -77053,8 +77326,7 @@ function useTimelineGroupEditing({
       const rollbackDuration = captureDurationRollback(previewIframeRef.current);
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
       syncPreviewContentDuration(previewIframeRef.current);
-      const coalesceKey = options?.coalesceKey ?? moveCoalesceKey(changes);
-      const coalesceMs = options?.coalesceMs;
+      const { coalesceKey, coalesceMs } = timingGestureStep("timeline-group-move", options);
       const label = options?.label ?? "Move timeline clips";
       return enqueueGroupOperation(label, async (projectId) => {
         await options?.beforeTiming;
@@ -77077,7 +77349,7 @@ function useTimelineGroupEditing({
             label,
             changes.map((change) => ({
               element: change.element,
-              buildPatches: (original, target) => buildTimelineMoveTimingPatch(
+              buildPatches: (original, target) => applyTimelineMoveAttributes(
                 original,
                 target,
                 toAuthoredStart(change.element, change.start),
@@ -77105,12 +77377,7 @@ function useTimelineGroupEditing({
             changes,
             sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
-            mutateChange: (change, changePath) => {
-              const delta = change.start - change.element.start;
-              const domId = change.element.domId;
-              if (delta === 0 || !domId) return null;
-              return shiftGsapPositions(projectId, changePath, domId, delta);
-            }
+            mutationFor: (change) => shiftGsapMutation(change.element.domId, change.start - change.element.start)
           });
         } finally {
           invalidateGsapCache?.();
@@ -77159,8 +77426,7 @@ function useTimelineGroupEditing({
       const rollbackDuration = captureDurationRollback(previewIframeRef.current);
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
       syncPreviewContentDuration(previewIframeRef.current);
-      const coalesceKey = options?.coalesceKey ?? resizeCoalesceKey(changes);
-      const coalesceMs = options?.coalesceMs;
+      const { coalesceKey, coalesceMs } = timingGestureStep("timeline-group-resize", options);
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
         const sdk = await trySdkBatchPersist({
@@ -77181,7 +77447,7 @@ function useTimelineGroupEditing({
             "Resize timeline clips",
             changes.map((change) => ({
               element: change.element,
-              buildPatches: (original, target) => buildTimelineResizeTimingPatch(original, target, change.element, {
+              buildPatches: (original, target) => applyTimelineResizeAttributes(original, target, change.element, {
                 start: change.start,
                 duration: change.duration,
                 playbackStart: change.playbackStart
@@ -77205,20 +77471,13 @@ function useTimelineGroupEditing({
             changes,
             sdkGsap: sdk?.sdkGsap,
             resolveChangePath: (element) => targetPathFor(element, activeCompPath),
-            mutateChange: (change, changePath) => {
-              const domId = change.element.domId;
-              const timingChanged = change.start !== change.element.start || change.duration !== change.element.duration;
-              if (!timingChanged || !domId) return null;
-              return scaleGsapPositions(
-                projectId,
-                changePath,
-                domId,
-                toCompositionTime(change.element, change.element.start),
-                change.element.duration,
-                toCompositionTime(change.element, change.start),
-                change.duration
-              );
-            }
+            mutationFor: (change) => scaleGsapMutation(
+              change.element.domId,
+              toCompositionTime(change.element, change.element.start),
+              change.element.duration,
+              toCompositionTime(change.element, change.start),
+              change.duration
+            )
           });
         } finally {
           invalidateGsapCache?.();
@@ -77245,54 +77504,28 @@ function useTimelineGroupEditing({
   return { handleTimelineGroupMove, handleTimelineGroupResize };
 }
 
-// src/hooks/useBlockedTimelineEditToast.ts
-import { useCallback as useCallback122, useRef as useRef138 } from "react";
-var BLOCKED_TOAST_INTERVAL_MS = 1500;
-function useBlockedTimelineEditToast(showToast) {
-  const lastAtRef = useRef138(0);
-  return useCallback122(
-    (_element, intent) => {
-      const now2 = Date.now();
-      if (now2 - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
-      lastAtRef.current = now2;
-      showToast(
-        intent === "edit-many" ? `Select ${MAX_HAND_EDIT_CLIPS} or fewer clips to move or resize by hand, or describe the change.` : "This clip can't be moved or resized from the timeline yet.",
-        "info"
-      );
-    },
-    [showToast]
-  );
-}
-
-// src/hooks/useTimelineEditing.ts
-function useTimelineEditing({
-  projectId,
+// src/hooks/useTimelineClipTimingEditing.ts
+import { useCallback as useCallback122 } from "react";
+function useTimelineClipTimingEditing({
   activeCompPath,
   timelineElements,
   showToast,
   writeProjectFile,
-  observeProjectFileVersion,
   recordEdit,
   reloadPreview,
   previewIframeRef,
   pendingTimelineEditPathRef,
-  uploadProjectFiles,
   isRecordingRef,
   sdkSession,
   publishSdkSession,
   forceReloadSdkSession,
   invalidateGsapCache,
   handleDomZIndexReorderCommitRef,
-  canEdit
+  editQueueRef,
+  projectIdRef
 }) {
-  const projectIdRef = useRef139(projectId);
-  projectIdRef.current = projectId;
-  const editQueueRef = useRef139(Promise.resolve());
-  const track2 = useTrackPendingTimelineEdit();
-  const checkEditable = useTimelineEditGate(canEdit, showToast);
-  const guard = useTimelineEditGuard(canEdit, showToast);
-  const enqueueEdit = useCallback123(
-    (element, label, buildPatches, coalesceKey) => {
+  const enqueueEdit = useCallback122(
+    (element, label, buildPatches, step) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return Promise.resolve();
@@ -77309,7 +77542,7 @@ function useTimelineEditing({
           writeProjectFile,
           recordEdit,
           pendingTimelineEditPathRef,
-          coalesceKey
+          ...step
         })
       ).then(() => {
         forceReloadSdkSession?.();
@@ -77326,26 +77559,12 @@ function useTimelineEditing({
       pendingTimelineEditPathRef,
       showToast,
       isRecordingRef,
-      forceReloadSdkSession
+      forceReloadSdkSession,
+      editQueueRef,
+      projectIdRef
     ]
   );
-  const groupEditing = useTimelineGroupEditing({
-    activeCompPath,
-    editQueueRef,
-    forceReloadSdkSession,
-    invalidateGsapCache,
-    isRecordingRef,
-    pendingTimelineEditPathRef,
-    previewIframeRef,
-    projectIdRef,
-    recordEdit,
-    reloadPreview,
-    sdkSession,
-    publishSdkSession,
-    showToast,
-    writeProjectFile
-  });
-  const handleTimelineElementMove = useCallback123(
+  const handleTimelineElementMove = useCallback122(
     // fallow-ignore-next-line complexity
     (element, updates) => {
       const commitMove = () => {
@@ -77375,16 +77594,16 @@ function useTimelineEditing({
         const needsExtension = extendRootDurationIfNeeded(updates.start + element.duration);
         syncPreviewContentDuration(previewIframeRef.current);
         const buildMovePatches = (original, target) => {
-          const track3 = trackChanged ? updates.track : void 0;
+          const track2 = trackChanged ? updates.track : void 0;
           return buildTimelineMoveTimingPatch(
             original,
             target,
             authoredStart,
             element.duration,
-            track3
+            track2
           );
         };
-        const coalesceKey = `timeline-move:${element.hfId ?? element.id}`;
+        const step = timingGestureStep("timeline-move");
         const finishMoveGsapSync = (sdkGsap) => (
           // One GSAP sync per edit: the SDK commit's own (sdkGsap), else the server rewrite here.
           finishClipTimingFallback({
@@ -77394,14 +77613,14 @@ function useTimelineEditing({
             targetPath,
             domId: element.domId,
             label: "Move timeline clip",
-            coalesceKey,
+            coalesceKey: step.coalesceKey,
             recordEdit,
             writeProjectFile,
             edit: { kind: "shift", delta: updates.start - element.start },
             sdkGsap
           }).finally(() => invalidateGsapCache?.())
         );
-        const moveFallback = () => enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(
+        const moveFallback = () => enqueueEdit(element, "Move timeline clip", buildMovePatches, step).then(
           () => finishMoveGsapSync()
         );
         return reorderDone.then(() => {
@@ -77421,7 +77640,7 @@ function useTimelineEditing({
                 readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
                 publishSession: publishSdkSession
               },
-              { label: "Move timeline clip", coalesceKey, skipRefresh: true }
+              { label: "Move timeline clip", ...step, skipRefresh: true }
             ).then((result) => {
               if (!cutoverCommittedOrThrow(result)) return moveFallback();
               return finishMoveGsapSync(sdkTimingGsapSync(result));
@@ -77448,10 +77667,11 @@ function useTimelineEditing({
       timelineElements,
       handleDomZIndexReorderCommitRef,
       showToast,
-      invalidateGsapCache
+      invalidateGsapCache,
+      projectIdRef
     ]
   );
-  const handleTimelineElementResize = useCallback123(
+  const handleTimelineElementResize = useCallback122(
     // fallow-ignore-next-line complexity
     (element, updates) => {
       const authoredStart = toAuthoredStart(element, updates.start);
@@ -77472,7 +77692,7 @@ function useTimelineEditing({
         return buildTimelineResizeTimingPatch(original, target, element, updates);
       };
       const hasPbsAdjustment = updates.playbackStart != null || updates.start !== element.start && element.playbackStart != null;
-      const coalesceKey = `timeline-resize:${element.hfId ?? element.id}`;
+      const step = timingGestureStep("timeline-resize");
       const finishResizeGsapSync = (sdkGsap) => finishClipTimingFallback({
         iframe: previewIframeRef.current,
         reloadPreview,
@@ -77480,7 +77700,7 @@ function useTimelineEditing({
         targetPath,
         domId: element.domId,
         label: "Resize timeline clip",
-        coalesceKey,
+        coalesceKey: step.coalesceKey,
         recordEdit,
         writeProjectFile,
         edit: {
@@ -77490,7 +77710,7 @@ function useTimelineEditing({
         },
         sdkGsap
       }).finally(() => invalidateGsapCache?.());
-      const resizeFallback = () => enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(
+      const resizeFallback = () => enqueueEdit(element, "Resize timeline clip", buildResizePatches, step).then(
         () => finishResizeGsapSync()
       );
       const persistDone = sdkSession && element.hfId && !element.link && !hasPbsAdjustment && !needsExtension ? sdkTimingPersist(
@@ -77508,7 +77728,7 @@ function useTimelineEditing({
           readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
           publishSession: publishSdkSession
         },
-        { label: "Resize timeline clip", coalesceKey, skipRefresh: true }
+        { label: "Resize timeline clip", ...step, skipRefresh: true }
       ).then((result) => {
         if (!cutoverCommittedOrThrow(result)) return resizeFallback();
         return finishResizeGsapSync(sdkTimingGsapSync(result));
@@ -77529,9 +77749,90 @@ function useTimelineEditing({
       writeProjectFile,
       reloadPreview,
       showToast,
-      invalidateGsapCache
+      invalidateGsapCache,
+      projectIdRef
     ]
   );
+  return { handleTimelineElementMove, handleTimelineElementResize };
+}
+
+// src/hooks/useBlockedTimelineEditToast.ts
+import { useCallback as useCallback123, useRef as useRef138 } from "react";
+var BLOCKED_TOAST_INTERVAL_MS = 1500;
+function useBlockedTimelineEditToast(showToast) {
+  const lastAtRef = useRef138(0);
+  return useCallback123(
+    (_element) => {
+      const now2 = Date.now();
+      if (now2 - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
+      lastAtRef.current = now2;
+      showToast("This clip can't be moved or resized from the timeline yet.", "info");
+    },
+    [showToast]
+  );
+}
+
+// src/hooks/useTimelineEditing.ts
+function useTimelineEditing({
+  projectId,
+  activeCompPath,
+  timelineElements,
+  showToast,
+  writeProjectFile,
+  observeProjectFileVersion,
+  recordEdit,
+  reloadPreview,
+  previewIframeRef,
+  pendingTimelineEditPathRef,
+  uploadProjectFiles,
+  isRecordingRef,
+  sdkSession,
+  publishSdkSession,
+  forceReloadSdkSession,
+  invalidateGsapCache,
+  handleDomZIndexReorderCommitRef,
+  canEdit
+}) {
+  const projectIdRef = useRef139(projectId);
+  projectIdRef.current = projectId;
+  const editQueueRef = useRef139(Promise.resolve());
+  const track2 = useTrackPendingTimelineEdit();
+  const checkEditable = useTimelineEditGate(canEdit, showToast);
+  const guard = useTimelineEditGuard(canEdit, showToast);
+  const groupEditing = useTimelineGroupEditing({
+    activeCompPath,
+    editQueueRef,
+    forceReloadSdkSession,
+    invalidateGsapCache,
+    isRecordingRef,
+    pendingTimelineEditPathRef,
+    previewIframeRef,
+    projectIdRef,
+    recordEdit,
+    reloadPreview,
+    sdkSession,
+    publishSdkSession,
+    showToast,
+    writeProjectFile
+  });
+  const { handleTimelineElementMove, handleTimelineElementResize } = useTimelineClipTimingEditing({
+    activeCompPath,
+    timelineElements,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    reloadPreview,
+    previewIframeRef,
+    pendingTimelineEditPathRef,
+    isRecordingRef,
+    sdkSession,
+    publishSdkSession,
+    forceReloadSdkSession,
+    invalidateGsapCache,
+    handleDomZIndexReorderCommitRef,
+    editQueueRef,
+    projectIdRef
+  });
   const handleToggleTrackHidden = useTimelineTrackVisibilityEditing({
     projectIdRef,
     activeCompPath,
@@ -77753,7 +78054,7 @@ function useTimelineEditing({
 
 // src/hooks/timelineMoveAdapter.ts
 import { useCallback as useCallback124 } from "react";
-function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs) {
+function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps) {
   return deps.handleTimelineGroupMove(
     edits.map(({ element, updates }) => ({
       element,
@@ -77765,14 +78066,14 @@ function persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps,
       // ("timing") omit it so they stay eligible for the SDK fast path.
       track: operation === "timing" ? void 0 : updates.track
     })),
-    { coalesceKey, coalesceMs }
+    { coalesceKey }
   );
 }
 function useTimelineMoveEditsHandler(handleTimelineGroupMove) {
   return useCallback124(
-    async (edits, coalesceKey, operation = "timing", coalesceMs) => {
+    async (edits, coalesceKey, operation = "timing") => {
       const deps = { handleTimelineGroupMove };
-      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
+      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps);
     },
     [handleTimelineGroupMove]
   );
@@ -77902,6 +78203,9 @@ function domEditSelectionsTargetSame(a, b) {
   if (!a || !b) return false;
   return getDomEditTargetKey(a) === getDomEditTargetKey(b);
 }
+function domEditSelectionsEqual(a, b) {
+  return sameData(a, b);
+}
 function domEditSelectionInGroup(group, selection) {
   if (!selection) return false;
   return group.some((entry2) => domEditSelectionsTargetSame(entry2, selection));
@@ -78168,6 +78472,8 @@ function useDomSelection({
       const currentSelection = domEditSelectionRef.current;
       const previousGroup = domEditGroupSelectionsRef.current;
       const isRepeatedSingleSelection = !isAdditiveSelection && !options?.preserveGroup && previousGroup.length === 1 && domEditSelectionsTargetSame(currentSelection, selection) && domEditSelectionsTargetSame(previousGroup[0], selection);
+      const isUnchangedRefresh = options?.preserveGroup && currentSelection !== null && (previousGroup.length === 0 || previousGroup.includes(currentSelection)) && domEditSelectionsEqual(currentSelection, selection);
+      if (isUnchangedRefresh) return;
       if (isRepeatedSingleSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
@@ -78229,6 +78535,7 @@ function useDomSelection({
         preferClipAncestor: options?.preferClipAncestor,
         skipSourceProbe: options?.skipSourceProbe,
         exactTarget: options?.exactTarget,
+        previous: options?.previous,
         activeGroupElement: options && "activeGroupElement" in options ? options.activeGroupElement : activeGroupElementRef.current,
         projectId
       });
@@ -78351,7 +78658,7 @@ function useDomSelection({
         applyDomSelection(null, { revealPanel: false });
         return;
       }
-      const nextSelection = await buildDomSelectionFromTarget(element);
+      const nextSelection = await buildDomSelectionFromTarget(element, { previous: selection });
       if (nextSelection) {
         applyDomSelection(nextSelection, {
           revealPanel: false,
@@ -78376,7 +78683,7 @@ function useDomSelection({
       for (const selection of selections) {
         const element = findElementForSelection(doc, selection, activeCompPath);
         if (!element) continue;
-        const nextSelection2 = await buildDomSelectionFromTarget(element);
+        const nextSelection2 = await buildDomSelectionFromTarget(element, { previous: selection });
         if (nextSelection2) nextGroup.push(nextSelection2);
       }
       if (nextGroup.length === 0) return;
@@ -82052,7 +82359,9 @@ function useDomEditPreviewSync({
         applyDomSelection(null, { revealPanel: false });
         return;
       }
-      const nextSelection = await buildDomSelectionFromTarget(nextElement);
+      const nextSelection = await buildDomSelectionFromTarget(nextElement, {
+        previous: currentSelection
+      });
       if (nextSelection) {
         applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
       }
@@ -83223,19 +83532,17 @@ async function commitKeyframeProps(selection, anim, props, propEntries, primaryP
     const newStart = Math.min(ct, ts);
     const newEnd = Math.max(ct, ts + td);
     const newDuration = Math.max(0.01, newEnd - newStart);
+    const runEase = runEaseOf(anim);
+    const toNewPct = (absTime) => Math.round(progressAtTime(runEase, (absTime - newStart) / newDuration * 100) * 10) / 10;
     const remapped = kfs.map((kf) => {
-      const absTime = ts + kf.percentage / 100 * td;
-      const newPct = Math.round((absTime - newStart) / newDuration * 1e3) / 10;
+      const newPct = toNewPct(ts + timeAtProgress(runEase, kf.percentage) / 100 * td);
       const p = { ...kf.properties };
       for (const k of Object.keys(properties)) {
         if (!(k in p) && backfillDefaults[k] != null) p[k] = backfillDefaults[k];
       }
       return { percentage: newPct, properties: p };
     });
-    remapped.push({
-      percentage: Math.round((ct - newStart) / newDuration * 1e3) / 10,
-      properties
-    });
+    remapped.push({ percentage: toNewPct(ct), properties });
     remapped.sort((a, b) => a.percentage - b.percentage);
     await commit2(
       selection,
@@ -83924,6 +84231,19 @@ function runCommitPreflights(selection, fileAnimations, iframe, group) {
   };
 }
 var resolvedSelections = /* @__PURE__ */ new WeakMap();
+var checkedSelections = /* @__PURE__ */ new WeakMap();
+function checkedPreflight(resolved2, inputs) {
+  const known = checkedSelections.get(resolved2);
+  const same = known?.animations === inputs.animations && known.iframe === inputs.iframe && known.group === inputs.group && known.version === inputs.version;
+  if (same) return known;
+  const { animations, iframe, group } = inputs;
+  const checked = {
+    ...inputs,
+    preflight: runCommitPreflights(resolved2, animations, iframe, group)
+  };
+  checkedSelections.set(resolved2, checked);
+  return checked;
+}
 var resolvedOf = (selection) => resolvedSelections.get(selection) ?? selection;
 var MANUAL_FLAGS = [
   ["canApplyManualOffset", "offset"],
@@ -83986,17 +84306,21 @@ function useCommitPreflightCapabilities({
     void parseTick;
     if (!enabled || !projectId) return { selection, groupSelections };
     const group = groupSelections.length > 1;
+    const iframe = previewIframeRef.current;
     const narrow = (target) => {
       const file = gsapSourceFileForSelection(target);
       const animations = parsesRef.current.get(parseCacheKey(projectId, file))?.animations;
-      const preflight = animations ? runCommitPreflights(resolvedOf(target), animations, previewIframeRef.current, group) : null;
-      return narrowCapabilities(target, preflight);
+      if (!animations) return narrowCapabilities(target, null);
+      const inputs = { animations, iframe, group, version };
+      const checked = checkedPreflight(resolvedOf(target), inputs);
+      checked.narrowed ??= narrowCapabilities(target, checked.preflight);
+      return checked.narrowed;
     };
-    return {
+    return withTweenIndex(() => ({
       selection: selection && narrow(selection),
       groupSelections: groupSelections.map(narrow)
-    };
-  }, [enabled, projectId, selection, groupSelections, parseTick, previewIframeRef]);
+    }));
+  }, [enabled, projectId, selection, groupSelections, parseTick, previewIframeRef, version]);
 }
 
 // src/hooks/domEditDeleteMembers.ts
@@ -85956,11 +86280,11 @@ function useEditHistoryActions({
   const apply = useCallback153(
     async (direction) => {
       const noun = direction === "undo" ? "Undo" : "Redo";
-      const predicted = editHistory.predict?.(direction) ?? null;
+      const pendingEditShown = direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
+      const predicted = pendingEditShown ? null : editHistory.predict?.(direction) ?? null;
       const predictedShown = predicted ? showHistoryRestoreNow?.(predicted.files) ?? null : null;
-      const pendingEditShown = !predictedShown && direction === "undo" ? paintBackNewestStudioPendingEdit() : null;
       const putBack = predictedShown ?? pendingEditShown?.showAgain;
-      const claimedAfter = direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : void 0;
+      const claimedAfter = pendingEditShown?.claimsAtBegin ?? (direction === "undo" && hasStudioPendingEdits() ? editHistory.claims?.() : void 0);
       let result = { ok: false, reason: "failed" };
       let serverSteppedShown = false;
       let revertIsTheUndo = false;
@@ -85974,7 +86298,8 @@ function useEditHistoryActions({
           claimedAfter
         });
         const stepped = Boolean(result.ok && result.label);
-        serverSteppedShown = predictedShown ? stepped && result.undoes === predicted?.id : stepped && Boolean(pendingEditShown);
+        const editClaimed = pendingEditShown !== null && (editHistory.claims?.() ?? 0) > pendingEditShown.claimsAtBegin;
+        serverSteppedShown = predictedShown ? stepped && result.undoes === predicted?.id : stepped && editClaimed;
       } finally {
         if (putBack && !serverSteppedShown && !revertIsTheUndo) putBack();
       }
@@ -88972,7 +89297,7 @@ function useGestureCommit({
             );
           } else {
             const tweenStart = existingPositionTween.resolvedStart ?? 0;
-            const tweenDur = existingPositionTween.duration ?? duration;
+            const tweenDur = resolveTweenDuration(existingPositionTween);
             const tweenEnd = tweenStart + tweenDur;
             const recEnd = recStart + duration;
             const overlaps3 = recStart < tweenEnd + 0.05 && recEnd > tweenStart - 0.05;
@@ -96737,31 +97062,10 @@ function animatedProps(anim) {
   }
   return ["x", "y"];
 }
-function isPlayheadWithinTween(anim, currentTime, selection) {
+function isPlayheadWithinTween(anim, currentTime) {
   const start = resolveTweenStart(anim);
   if (start === null) return true;
-  const duration = selection ? resolveEditableTweenDuration(anim, selection) : resolveTweenDuration(anim);
-  return isTimeWithinTween(currentTime, start, duration);
-}
-function buildExtendedKeyframes(anim, currentTime, position, sourceDuration = resolveTweenDuration(anim)) {
-  const oldStart = resolveTweenStart(anim) ?? 0;
-  const oldDuration = sourceDuration;
-  const newStart = Math.min(oldStart, currentTime);
-  const newEnd = Math.max(oldStart + oldDuration, currentTime);
-  const newDuration = roundTo3(newEnd - newStart);
-  const toPct = (absoluteTime) => newDuration > 0 ? Math.max(
-    0,
-    Math.min(100, Math.round((absoluteTime - newStart) / newDuration * 1e3) / 10)
-  ) : 0;
-  const stops = anim.keyframes?.keyframes ?? [];
-  const rescaled = stops.map((stop2) => ({
-    percentage: toPct(oldStart + stop2.percentage / 100 * oldDuration),
-    properties: stop2.properties,
-    ...stop2.ease ? { ease: stop2.ease } : {}
-  }));
-  const added = { percentage: toPct(currentTime), properties: position };
-  const keyframes = [...rescaled, added].sort((a, b) => a.percentage - b.percentage);
-  return { position: roundTo3(newStart), duration: newDuration, keyframes };
+  return isTimeWithinTween(currentTime, start, resolveTweenDuration(anim));
 }
 async function replaceSetWithSingleKeyframe(session, sel, setAnim, t2, iframe, selector) {
   const position = readElementPosition(iframe, sel, setAnim);
@@ -96852,10 +97156,16 @@ async function extendKeyframedTweenToPlayhead(session, sel, anim, currentTime, d
     }
   );
 }
-async function applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe, commitOverrides) {
-  const duration = resolveEditableTweenDuration(kfAnim, sel);
+async function applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe, commitOverrides, liveTween) {
+  const keepAuthoredDuration = kfAnim.durationUnresolved === true;
+  if (keepAuthoredDuration) {
+    kfAnim = withLiveTiming(kfAnim, liveTween ?? findParsedTween(iframe, sel.element, kfAnim));
+  }
+  if (keepAuthoredDuration && kfAnim.duration == null) return;
+  const duration = resolveTweenDuration(kfAnim);
   const start = resolveTweenStart(kfAnim);
   if (start !== null && !isTimeWithinTween(t2, start, duration)) {
+    if (keepAuthoredDuration) return;
     await extendKeyframedTweenToPlayhead(
       session,
       sel,
@@ -96867,10 +97177,8 @@ async function applyKeyframeAtPlayhead(session, sel, kfAnim, t2, iframe, commitO
     );
     return;
   }
-  const pct = start === null ? computeElementPercentage(t2, sel) : absoluteToPercentage(t2, start, duration);
-  const existing = kfAnim.keyframes?.keyframes.find(
-    (k) => Math.abs(k.percentage - pct) <= KEYFRAME_PCT_MATCH
-  );
+  const pct = start === null ? computeElementPercentage(t2, sel) : absoluteToPercentageForAnimation(t2, kfAnim) ?? 0;
+  const existing = kfAnim.keyframes?.keyframes.find((k) => playsNear(kfAnim, k.percentage, pct));
   if (existing) {
     session.handleGsapRemoveKeyframe(kfAnim.id, existing.percentage);
     return;
@@ -96922,21 +97230,26 @@ async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t2, iframe) {
   const targetSelector = existingTweenTargetSelector(arcAnim, sel);
   if (!targetSelector) return;
   const start = resolveTweenStart(arcAnim) ?? 0;
-  const duration = resolveEditableTweenDuration(arcAnim, sel);
+  const duration = resolveTweenDuration(arcAnim);
   if (!isTimeWithinTween(t2, start, duration)) {
-    if (t2 > start) {
-      await session.commitMutation(
-        {
-          type: "update-meta",
-          animationId: arcAnim.id,
-          updates: { duration: roundTo3(t2 - start) }
-        },
-        { label: "Extend motion path", softReload: true }
-      );
-    }
+    const held = readElementPosition(iframe, sel, arcAnim);
+    if (t2 <= start || typeof held.x !== "number" || typeof held.y !== "number") return;
+    const extended = buildExtendedKeyframes(arcAnim, t2, { x: held.x, y: held.y }, duration, "none");
+    await session.commitMutation(
+      {
+        type: "replace-with-keyframes",
+        animationId: arcAnim.id,
+        targetSelector,
+        position: extended.position,
+        duration: extended.duration,
+        keyframes: extended.keyframes,
+        ease: "none"
+      },
+      { label: "Add keyframe", keyframeAction: "add", softReload: true }
+    );
     return;
   }
-  const nodes = arcAnim.keyframes?.keyframes ?? [];
+  const nodes = linearArcKeyframes(arcAnim);
   const playheadPercentage = absoluteToPercentage(t2, start, duration);
   const timedNodeIndex = nodes.findIndex(
     (node) => Math.abs(node.percentage - playheadPercentage) <= KEYFRAME_PCT_MATCH
@@ -96997,6 +97310,7 @@ function useEnableKeyframes(sessionRef) {
     } else if (setAnim) {
       await promoteSetToKeyframes(session, sel, setAnim, t2, iframe);
     } else if (flatAnim) {
+      const flatLive = flatAnim.durationUnresolved ? findParsedTween(iframe, sel.element, flatAnim) : void 0;
       enableKeyframesTransactionCounter += 1;
       const coalesceKey = `enable-keyframes:${flatAnim.id}:${enableKeyframesTransactionCounter}`;
       const convertCommitOverrides = {
@@ -97022,7 +97336,15 @@ function useEnableKeyframes(sessionRef) {
           // conversion splits into two undo entries under real latency.
           coalesceMs: Number.POSITIVE_INFINITY
         };
-        await applyKeyframeAtPlayhead(session, sel, converted, t2, iframe, applyCommitOverrides);
+        await applyKeyframeAtPlayhead(
+          session,
+          sel,
+          converted,
+          t2,
+          iframe,
+          applyCommitOverrides,
+          flatLive
+        );
       }
     } else {
       const position = readElementPosition(iframe, sel, null);
@@ -97331,7 +97653,9 @@ var NO_KEYFRAME_TOGGLE = {
 function isMotionPathEndpoint(animation, percentage) {
   if (!animation?.keyframes) return false;
   const keyframes = animation.keyframes.keyframes;
-  return Math.abs((keyframes[0]?.percentage ?? -Infinity) - percentage) <= KEYFRAME_PCT_MATCH || Math.abs((keyframes.at(-1)?.percentage ?? Infinity) - percentage) <= KEYFRAME_PCT_MATCH;
+  return [keyframes[0], keyframes.at(-1)].some(
+    (keyframe) => keyframe && playsNear(animation, keyframe.percentage, percentage)
+  );
 }
 function resolveKeyframeToggleState(session, currentTime) {
   if (!session?.domEditSelection) return NO_KEYFRAME_TOGGLE;
@@ -97341,13 +97665,13 @@ function resolveKeyframeToggleState(session, currentTime) {
   const animation = arcAnimation ?? session.selectedGsapAnimations.find((candidate) => candidate.keyframes && !candidate.arcPath);
   if (!animation?.keyframes) return NO_KEYFRAME_TOGGLE;
   const isMotionPath = Boolean(arcAnimation);
-  if (!isPlayheadWithinTween(animation, currentTime, session.domEditSelection)) {
+  if (!isPlayheadWithinTween(animation, currentTime)) {
     return { state: "inactive", isMotionPath, pathEndpoint: false, willExtend: true };
   }
   const percentage = computeElementPercentage(currentTime, session.domEditSelection, animation);
   const pathEndpoint = isMotionPathEndpoint(arcAnimation, percentage);
   const active = animation.keyframes.keyframes.some(
-    (keyframe) => Math.abs(keyframe.percentage - percentage) <= KEYFRAME_PCT_MATCH
+    (keyframe) => playsNear(animation, keyframe.percentage, percentage)
   );
   return {
     state: pathEndpoint ? "none" : active ? "active" : "inactive",