@hyperframes/studio 0.7.75 → 0.7.77

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../../player";
 import { usePlayerStore } from "../../player/store/playerStore";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
@@ -10,8 +11,15 @@ import {
 } from "../../contexts/DomEditContext";
 import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler";
 import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache";
+import { elementCacheKeys } from "../../hooks/gsapKeyframeCacheHelpers";
 import { resolveKeyframeRetime } from "../editor/keyframeRetime";
+import type { DomEditSelection } from "../editor/domEditingTypes";
 import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+import {
+  getTimelineElementIdentity,
+  splitTimelineElementKey,
+} from "../../player/lib/timelineElementHelpers";
+import type { TimelineKeyframeTarget } from "../../player/components/timelineKeyframeIdentity";
 
 export interface TimelineEditCallbackDeps {
   handleTimelineElementMove: (
@@ -46,15 +54,14 @@ interface TimelineCachedKeyframe {
   percentage: number;
   tweenPercentage?: number;
   propertyGroup?: string;
+  animationId?: string;
 }
 
 /**
  * Resolve a rendered timeline diamond back to the animation that authored it.
- * Flat tweens use synthesized diamonds, so a mixed flat tween may have neither
- * a property group nor real keyframes. The cache currently carries a property
- * group, not an animation id, so resolution is safe only when that group has a
- * single candidate. Ambiguous candidates remain unresolved rather than
- * retiming an arbitrary tween.
+ * Prefer the animation identity carried by the rendered keyframe. Legacy cache
+ * entries without one are safe only when their property group has one candidate;
+ * ambiguous candidates remain unresolved rather than retiming an arbitrary tween.
  */
 export function resolveTimelineKeyframeTarget(
   pct: number,
@@ -63,6 +70,14 @@ export function resolveTimelineKeyframeTarget(
 ): { animId: string; tweenPct: number } | null {
   const kf = keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2);
   if (!kf) return null;
+  const identifiedAnimation = kf.animationId
+    ? animations.find((animation) => animation.id === kf.animationId)
+    : undefined;
+  if (kf.animationId) {
+    return identifiedAnimation
+      ? { animId: identifiedAnimation.id, tweenPct: kf.tweenPercentage ?? pct }
+      : null;
+  }
   const group = kf?.propertyGroup;
   const candidates = group
     ? animations.filter((animation) => animation.propertyGroup === group)
@@ -98,22 +113,69 @@ export function useTimelineEditCallbacks({
     handleGsapResizeKeyframedTween,
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
+    handleGsapAddKeyframeBatch,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     buildDomSelectionForTimelineElement,
   } = useDomEditActionsContext();
 
+  const resolveElementAnimations = useCallback(
+    (elementKey: string): GsapAnimation[] => {
+      const { gsapAnimations } = usePlayerStore.getState();
+      const { sourceFile, domId } = splitTimelineElementKey(elementKey);
+      const scope = sourceFile ?? activeCompPath ?? "index.html";
+      // elementCacheKeys owns the key-variant list the writers use; reading it
+      // back by hand here is how the two sides drift.
+      for (const key of elementCacheKeys(scope, domId)) {
+        const animations = gsapAnimations.get(key);
+        if (animations) return animations;
+      }
+      return [];
+    },
+    [activeCompPath],
+  );
+
   // Resolve a timeline-diamond callback's clip-% to the keyframe's anim id + its
   // tween-relative percentage (shared by the delete/move keyframe callbacks): the
   // diamond reports a clip-% but the script ops key on the tween-%. Prefers the
   // anim in the keyframe's property group, falling back to the first keyframed one.
   const resolveKeyframeTarget = useCallback(
-    // fallow-ignore-next-line complexity
-    (pct: number): { animId: string; tweenPct: number } | null => {
-      const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
-      return resolveTimelineKeyframeTarget(pct, cached?.keyframes ?? [], selectedGsapAnimations);
+    (
+      elementKey: string,
+      target: TimelineKeyframeTarget,
+      animations: GsapAnimation[] = selectedGsapAnimations,
+    ): { animId: string; tweenPct: number } | null => {
+      const carriesIdentity =
+        target.propertyGroup !== undefined ||
+        target.tweenPercentage !== undefined ||
+        target.animationId !== undefined;
+      // The clicked element's own cache: the diamond context menu can open on an
+      // element that is not the selected one, and reading the selection's cache
+      // there resolves against the wrong element.
+      const keyframeCache = usePlayerStore.getState().keyframeCache;
+      const cached =
+        keyframeCache.get(elementKey) ??
+        keyframeCache.get(splitTimelineElementKey(elementKey).domId);
+      return resolveTimelineKeyframeTarget(
+        target.percentage,
+        carriesIdentity ? [target] : (cached?.keyframes ?? []),
+        animations,
+      );
+    },
+    [selectedGsapAnimations],
+  );
+
+  const removeKeyframeTarget = useCallback(
+    (animationId: string, percentage: number, selectionOverride?: DomEditSelection | null) => {
+      // A flat tween's two diamonds are SYNTHESIZED endpoints, not authored
+      // keyframes, so "remove keyframe" has nothing to remove. Escalating to a
+      // whole-animation delete here destroyed the authored tween and its source
+      // comment on a single click, with no undo beyond the editor's own stack.
+      // Always post remove-keyframe: the writer refuses it for a flat tween
+      // (`changed:false`, file untouched), which is the correct no-op.
+      handleGsapRemoveKeyframe(animationId, percentage, undefined, selectionOverride);
     },
-    [domEditSelection?.id, selectedGsapAnimations],
+    [handleGsapRemoveKeyframe],
   );
 
   return useMemo(
@@ -127,22 +189,59 @@ export function useTimelineEditCallbacks({
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
-      onDeleteAllKeyframes: () => {
+      onDeleteAllKeyframes: (element) => {
         // Hold the element where it is (collapse keyframes to a static set) rather
         // than deleting the whole animation — deleting strands a stale GSAP base
         // that the next drag adds to, flinging the element off-screen.
-        const anim = selectedGsapAnimations.find((a) => a.keyframes);
-        if (!anim) return;
-        handleGsapRemoveAllKeyframes(anim.id);
+        const elementKey = getTimelineElementIdentity(element);
+        // Every keyframed tween on the layer, not just the first: a layer with
+        // position AND opacity keyframes left the second one keyframed, so
+        // "Delete All Keyframes" visibly did half the job.
+        const anims = resolveElementAnimations(elementKey).filter(
+          (animation) => animation.keyframes,
+        );
+        if (anims.length === 0) return;
+        void buildDomSelectionForTimelineElement(element).then(async (selection) => {
+          if (!selection) return;
+          // Serial: each removal rewrites the same source file, so dispatching
+          // them together would have the later writes read a pre-edit document.
+          for (const anim of anims) await handleGsapRemoveAllKeyframes(anim.id, selection);
+        });
       },
-      onDeleteKeyframe: (_elId: string, pct: number) => {
-        const target = resolveKeyframeTarget(pct);
-        if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct);
+      onDeleteKeyframe: (elId, keyframe) => {
+        const animations = resolveElementAnimations(elId);
+        const target = resolveKeyframeTarget(elId, keyframe, animations);
+        if (!target) return;
+        const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId);
+        if (!element) {
+          removeKeyframeTarget(target.animId, target.tweenPct);
+          return;
+        }
+        // Persist through the CLICKED element's own selection so a deletion on a
+        // non-selected element (especially one in a different source file) commits
+        // against the right element instead of the current domEditSelection.
+        void buildDomSelectionForTimelineElement(element).then((selection) => {
+          if (selection) removeKeyframeTarget(target.animId, target.tweenPct, selection);
+        });
       },
-      // Retime the keyframe to the playhead, preserving its value + ease.
-      onMoveKeyframeToPlayhead: (_elId: string, pct: number) => {
-        const target = resolveKeyframeTarget(pct);
-        if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct);
+      // Retime the keyframe to the playhead, preserving its value + ease. The
+      // clicked element owns the whole write: its animations resolve the target,
+      // its selection commits it, and its animation computes the playhead
+      // percentage. Mixing frames here retimed against the selected element's
+      // tween and wrote the result into the clicked element's file.
+      onMoveKeyframeToPlayhead: (element, keyframe) => {
+        const elementKey = getTimelineElementIdentity(element);
+        const animations = resolveElementAnimations(elementKey);
+        const target = resolveKeyframeTarget(elementKey, keyframe, animations);
+        const animation = target
+          ? animations.find((candidate) => candidate.id === target.animId)
+          : undefined;
+        if (!target || !animation) return;
+        void buildDomSelectionForTimelineElement(element).then((selection) => {
+          if (selection) {
+            handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct, selection, animation);
+          }
+        });
       },
       // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives
       // the dragged keyframe's anim + tween-%. We convert the clip-% drop to an
@@ -152,14 +251,19 @@ export function useTimelineEditCallbacks({
       // resizes the tween — position/duration grow so the dragged keyframe lands at
       // the drop while every other keyframe keeps its absolute time (value+ease too).
       // fallow-ignore-next-line complexity
-      onMoveKeyframe: (_elId: string, fromClipPct: number, toClipPct: number) => {
-        const target = resolveKeyframeTarget(fromClipPct);
-        const sel = domEditSelection;
-        if (!target || !sel) return;
-        const anim = selectedGsapAnimations.find((a) => a.id === target.animId);
+      onMoveKeyframe: async (elId, keyframe, toClipPct) => {
+        const animations = resolveElementAnimations(elId);
+        const target = resolveKeyframeTarget(elId, keyframe, animations);
+        if (!target) return false;
+        // The dragged diamond's OWN element, not the selected one: a drag on a
+        // non-selected clip has to read that clip's animations and commit
+        // through that clip's selection, or it retimes whatever is selected.
+        const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId);
+        const sel = element ? await buildDomSelectionForTimelineElement(element) : domEditSelection;
+        if (!sel) return false;
+        const anim = animations.find((a) => a.id === target.animId);
         const tweenStart = anim ? resolveTweenStart(anim) : null;
-        if (!anim || tweenStart === null) return;
-        const tweenDuration = anim.duration ?? resolveTweenDuration(anim);
+        if (!anim || tweenStart === null) return Promise.resolve(false);
         const sourceFile = sel.sourceFile || activeCompPath || "index.html";
         const { elements, domClipChildren } = usePlayerStore.getState();
         const { elStart, elDuration } = resolveClipTimingBasis(
@@ -168,6 +272,7 @@ export function useTimelineEditCallbacks({
           elements,
           domClipChildren,
         );
+        const tweenDuration = resolveTweenDuration(anim, elDuration);
         const dropAbsTime = elStart + (toClipPct / 100) * elDuration;
         const decision = resolveKeyframeRetime({
           keyframes: anim.keyframes?.keyframes ?? [],
@@ -177,35 +282,37 @@ export function useTimelineEditCallbacks({
           dropAbsTime,
         });
         if (decision.kind === "move" && decision.toTweenPct != null) {
-          handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct);
+          return handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct, sel);
         } else if (
           decision.kind === "resize" &&
           decision.pctRemap &&
           decision.position != null &&
           decision.duration != null
         ) {
-          if (anim.keyframes) {
-            handleGsapResizeKeyframedTween(
+          // An empty remap means a FLAT tween's synthesized boundary: there is no
+          // keyframe node to re-key, only the window to move. Sending it through
+          // the keyframed-resize writer would rewrite the authored flat tween into
+          // keyframes form as a side effect of a pure position/duration change, so
+          // dispatch update-meta and leave the tween as the author wrote it.
+          if (decision.pctRemap.length === 0) {
+            // Report the write's real settlement, like every other branch here:
+            // answering `true` while the meta update is still in flight tells the
+            // diamond the retime landed, so a rejected write never snaps back.
+            return handleGsapUpdateMeta(
               target.animId,
-              decision.position,
-              decision.duration,
-              decision.pctRemap,
+              { position: decision.position, duration: decision.duration },
+              sel,
             );
-          } else {
-            // resize-keyframed-tween requires an authored `keyframes` AST node
-            // and intentionally no-ops for a flat tween. Update its real tween
-            // window through the metadata writer (and SDK cutover path) instead.
-            handleGsapUpdateMeta(target.animId, {
-              position: decision.position,
-              duration: decision.duration,
-            });
           }
+          return handleGsapResizeKeyframedTween(
+            target.animId,
+            decision.position,
+            decision.duration,
+            decision.pctRemap,
+            sel,
+          );
         }
-      },
-      onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {
-        for (const anim of selectedGsapAnimations) {
-          if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease });
-        }
+        return Promise.resolve(false);
       },
       // fallow-ignore-next-line complexity
       onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
@@ -214,18 +321,49 @@ export function useTimelineEditCallbacks({
           el.duration > 0
             ? Math.max(0, Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100)))
             : 0;
-        const anim = selectedGsapAnimations.find((a) => a.keyframes);
-        if (anim?.keyframes) {
-          const existing = anim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1);
-          if (existing) {
-            handleGsapRemoveKeyframe(anim.id, existing.percentage);
+        // Same frame for read and write: the toggled element's animations decide
+        // add-vs-remove, and its selection is what the mutation commits through.
+        const animations = resolveElementAnimations(getTimelineElementIdentity(el));
+        void buildDomSelectionForTimelineElement(el).then((selection) => {
+          if (!selection) return;
+          const anim = animations.find((a) => a.keyframes);
+          if (anim?.keyframes) {
+            const existing = anim.keyframes.keyframes.find(
+              (k) => Math.abs(k.percentage - pct) <= 1,
+            );
+            if (existing) {
+              handleGsapRemoveKeyframe(anim.id, existing.percentage, undefined, selection);
+            } else {
+              handleGsapAddKeyframe(anim.id, pct, "x", 0, selection);
+            }
           } else {
-            handleGsapAddKeyframe(anim.id, pct, "x", 0);
+            const flatAnim = animations.find((a) => !a.keyframes);
+            if (flatAnim) {
+              void handleGsapConvertToKeyframes(
+                flatAnim.id,
+                undefined,
+                undefined,
+                undefined,
+                selection,
+              );
+            }
           }
-        } else {
-          const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
-          if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
+        });
+      },
+      onTogglePropertyGroupKeyframe: async (element, target) => {
+        const selection = await buildDomSelectionForTimelineElement(element);
+        if (!selection) return;
+        if (target.remove) {
+          removeKeyframeTarget(target.animationId, target.tweenPercentage, selection);
+          return;
         }
+        await handleGsapAddKeyframeBatch(
+          target.animationId,
+          target.tweenPercentage,
+          target.properties,
+          undefined,
+          selection,
+        );
       },
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -240,14 +378,16 @@ export function useTimelineEditCallbacks({
       handleRazorSplit,
       handleRazorSplitAll,
       handleGsapRemoveAllKeyframes,
+      resolveElementAnimations,
       resolveKeyframeTarget,
+      removeKeyframeTarget,
       selectedGsapAnimations,
-      handleGsapRemoveKeyframe,
       handleGsapMoveKeyframeToPlayhead,
       handleGsapMoveKeyframe,
       handleGsapResizeKeyframedTween,
       handleGsapUpdateMeta,
       handleGsapAddKeyframe,
+      handleGsapAddKeyframeBatch,
       handleGsapConvertToKeyframes,
       buildDomSelectionForTimelineElement,
       projectId,

package/src/contexts/TimelineEditContext.tsx

@@ -40,10 +40,10 @@ export function TimelineEditProvider({
       value.onRazorSplitAll,
       value.onDeleteKeyframe,
       value.onDeleteAllKeyframes,
-      value.onChangeKeyframeEase,
       value.onMoveKeyframeToPlayhead,
       value.onMoveKeyframe,
       value.onToggleKeyframeAtPlayhead,
+      value.onTogglePropertyGroupKeyframe,
     ],
   );
   return <TimelineEditContext.Provider value={memoized}>{children}</TimelineEditContext.Provider>;

package/src/hooks/deleteSelectedKeyframes.ts

@@ -1,5 +1,5 @@
 import { usePlayerStore } from "../player/store/playerStore";
-import { selectedKeyframePercentagesForElement } from "../utils/keyframeSelection";
+import { timelineKeyframeTargetFromSelectionKey } from "../player/components/timelineKeyframeIdentity";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 
 let deleteKeyframesCommitCounter = 0;
@@ -18,18 +18,34 @@ export function deleteSelectedKeyframes(session: {
   ) => void;
 }): void {
   const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
-  const animation = session.selectedGsapAnimations.find((anim) => anim.keyframes);
-  if (!animation) return;
-  // Only the active element's keyframes; a stale cross-element selection must not delete here.
-  const percentages = selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId);
+  if (!selectedElementId) return;
+  const keyframedAnimations = session.selectedGsapAnimations.filter((anim) => anim.keyframes);
+  // A collapsed selection key (an ungrouped animation) carries no animation id,
+  // so it only resolves when there is exactly one keyframed animation it could
+  // mean. Taking the first of several deletes an arbitrary tween's keyframe.
+  const fallbackAnimation = keyframedAnimations.length === 1 ? keyframedAnimations[0] : undefined;
+  const animationsById = new Map(keyframedAnimations.map((animation) => [animation.id, animation]));
+  const removals = new Map<string, { animationId: string; percentage: number }>();
+  for (const key of selectedKeyframes) {
+    const target = timelineKeyframeTargetFromSelectionKey(selectedElementId, key);
+    if (!target) continue;
+    const animation = target.animationId
+      ? animationsById.get(target.animationId)
+      : fallbackAnimation;
+    if (!animation) continue;
+    const percentage = target.tweenPercentage ?? target.percentage;
+    removals.set(`${animation.id}\0${percentage}`, { animationId: animation.id, percentage });
+  }
+  const targets = [...removals.values()];
+  if (targets.length === 0) return;
   const coalesceOptions = {
     coalesceKey: `delete-keyframes:${++deleteKeyframesCommitCounter}`,
     coalesceMs: Number.POSITIVE_INFINITY,
   };
-  for (const [index, pct] of percentages.entries()) {
-    session.handleGsapRemoveKeyframe(animation.id, pct, {
+  for (const [index, target] of targets.entries()) {
+    session.handleGsapRemoveKeyframe(target.animationId, target.percentage, {
       ...coalesceOptions,
-      ...(index === percentages.length - 1 ? { softReload: true } : { skipReload: true }),
+      ...(index === targets.length - 1 ? { softReload: true } : { skipReload: true }),
     });
   }
 }

package/src/hooks/gsapDragCommit.ts

@@ -12,7 +12,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
-import { computeElementPercentage } from "./gsapShared";
+import { computeElementPercentage, idSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
@@ -117,7 +117,7 @@ export async function materializeIfDynamic(
     const allScanned = scanAllRuntimeKeyframes(iframe);
     if (allScanned.size === 0) return;
     const allElements = Array.from(allScanned.entries()).map(([id, data]) => ({
-      selector: `#${id}`,
+      selector: idSelector(id),
       keyframes: data.keyframes,
       easeEach: data.easeEach,
     }));

package/src/hooks/gsapDragPositionCommit.ts

@@ -2,6 +2,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { KEYFRAME_PCT_MATCH, resolveEditableTweenDuration } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import {
@@ -11,6 +12,31 @@ import {
   materializeIfDynamic,
 } from "./gsapDragCommit";
 
+/**
+ * The tween's keyframes with one inserted at `percentage`. Any existing keyframe
+ * within {@link KEYFRAME_PCT_MATCH} of the insert is REPLACED, not kept: the
+ * server takes a replace-with-keyframes list verbatim, so an append-only build
+ * could hand it two keyframes a fraction of a percent apart. The invariant lives
+ * here rather than in each caller's own pre-check, which is how the two callers
+ * ended up with different tolerances in the first place.
+ */
+export function buildTemporalArcKeyframes(
+  anim: GsapAnimation,
+  percentage: number,
+  properties: Record<string, number>,
+) {
+  return [
+    ...(anim.keyframes?.keyframes ?? [])
+      .filter((keyframe) => Math.abs(keyframe.percentage - percentage) > KEYFRAME_PCT_MATCH)
+      .map((keyframe) => ({
+        percentage: keyframe.percentage,
+        properties: { ...keyframe.properties },
+        ...(keyframe.ease ? { ease: keyframe.ease } : {}),
+      })),
+    { percentage, properties },
+  ].sort((a, b) => a.percentage - b.percentage);
+}
+
 async function extendTweenAndAddKeyframe(
   selection: DomEditSelection,
   anim: GsapAnimation,
@@ -143,7 +169,7 @@ async function commitFlatViaKeyframes(
 ): Promise<void> {
   const ct = usePlayerStore.getState().currentTime;
   const ts = resolveTweenStart(anim);
-  const td = resolveTweenDuration(anim);
+  const td = resolveEditableTweenDuration(anim, selection);
   const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
   const outsideRange =
     activeKeyframePct == null && ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
@@ -184,8 +210,13 @@ async function commitFlatViaKeyframes(
       { label: "Convert to keyframes for drag", skipReload: true, coalesceKey },
     );
     const fresh = callbacks.fetchAnimations ? await callbacks.fetchAnimations() : [];
+    // By id first: a target with several tweens (two `to`s on the same selector)
+    // matches the selector lookup on whichever one happens to be first, and the
+    // extend-and-add below would then rewrite a tween the drag never touched.
     const converted =
-      fresh.find((a) => a.targetSelector === anim.targetSelector && a.keyframes) ?? anim;
+      fresh.find((a) => a.id === anim.id && a.keyframes) ??
+      fresh.find((a) => a.targetSelector === anim.targetSelector && a.keyframes) ??
+      anim;
     const convertedStart = resolveTweenStart(converted) ?? ts;
     const convertedDur = resolveTweenDuration(converted) || td;
     await extendTweenAndAddKeyframe(
@@ -259,13 +290,61 @@ export async function commitGsapPositionFromDrag(
 
   const backfillDefaults: Record<string, number> = { x: baseGsapX, y: baseGsapY };
   const ct = usePlayerStore.getState().currentTime;
+  if (anim.arcPath?.enabled) {
+    const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+    const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
+    const keyframes = anim.keyframes?.keyframes ?? [];
+    // Same tolerance as applyArcKeyframeAtPlayhead and isMotionPathEndpoint. A
+    // tighter one here meant a drag that landed a fraction of a percent off an
+    // authored waypoint skipped the update-point branch and appended instead.
+    const pointIndex = keyframes.findIndex(
+      (kf) => Math.abs(kf.percentage - pct) <= KEYFRAME_PCT_MATCH,
+    );
+    if (pointIndex >= 0) {
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "update-motion-path-point",
+          animationId: anim.id,
+          pointIndex,
+          x: newX,
+          y: newY,
+        },
+        { label: "Move layer (waypoint)", softReload: true, beforeReload: restoreOffset },
+      );
+      setActiveKeyframePct(null);
+      parkPlayheadOnKeyframe(anim, pct);
+      return;
+    }
+
+    const tweenStart = resolveTweenStart(anim);
+    // Clip-wide, same as applyArcKeyframeAtPlayhead: authoring GSAP's 0.5s
+    // default here would collapse a duration-less arc's window on drag.
+    const tweenDuration = resolveEditableTweenDuration(anim, selection);
+    if (tweenStart === null || tweenDuration <= 0 || keyframes.length < 2) return;
+    const temporalKeyframes = buildTemporalArcKeyframes(anim, pct, { x: newX, y: newY });
+    await callbacks.commitMutation(
+      selection,
+      {
+        type: "replace-with-keyframes",
+        animationId: anim.id,
+        targetSelector: anim.targetSelector,
+        position: roundTo3(tweenStart),
+        duration: roundTo3(tweenDuration),
+        keyframes: temporalKeyframes,
+        ease: "none",
+      },
+      { label: "Move layer (new keyframe)", softReload: true, beforeReload: restoreOffset },
+    );
+    return;
+  }
   if (anim.keyframes) {
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
     const effectiveAnim = newId ? { ...anim, id: newId } : anim;
     const dragProps: Record<string, number> = { x: newX, y: newY };
 
     const ts = resolveTweenStart(effectiveAnim);
-    const td = resolveTweenDuration(effectiveAnim);
+    const td = resolveEditableTweenDuration(effectiveAnim, selection);
     const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
     const hasSelectedKeyframe = usePlayerStore.getState().activeKeyframePct != null;
     if (outsideRange && !hasSelectedKeyframe) {
@@ -293,7 +372,7 @@ export async function commitGsapPositionFromDrag(
   } else if (anim.method === "from" || anim.method === "fromTo") {
     const ct = usePlayerStore.getState().currentTime;
     const ts = resolveTweenStart(anim);
-    const td = resolveTweenDuration(anim);
+    const td = resolveEditableTweenDuration(anim, selection);
     const hasSelectedKeyframe = usePlayerStore.getState().activeKeyframePct != null;
     const outsideRange =
       !hasSelectedKeyframe && ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
@@ -313,7 +392,7 @@ export async function commitGsapPositionFromDrag(
 
       if (existingPosAnim?.keyframes) {
         const posTs = resolveTweenStart(existingPosAnim);
-        const posTd = resolveTweenDuration(existingPosAnim);
+        const posTd = resolveEditableTweenDuration(existingPosAnim, selection);
         if (posTs !== null) {
           await extendTweenAndAddKeyframe(
             selection,