@hyperframes/studio 0.6.91 → 0.6.93

package/src/components/editor/manualEditsDom.ts

@@ -277,14 +277,34 @@ export function applyStudioPathOffsetDraft(
 
   const isGsapAnimated = gsapAnimatesProperty(element, "x", "y");
   if (isGsapAnimated) {
-    // For GSAP-animated elements: use gsap.set for positioning (the timeline
-    // is paused during drag). Set translate:none explicitly to prevent
-    // double-counting with the transform.
     element.style.setProperty("translate", "none");
     const win = element.ownerDocument.defaultView as
-      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | (Window & {
+          gsap?: {
+            set: (el: Element, vars: Record<string, unknown>) => void;
+            getProperty: (el: Element, prop: string) => number;
+          };
+        })
       | null;
-    win?.gsap?.set(element, { x: offset.x, y: offset.y });
+    if (win?.gsap) {
+      const baseX = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-x") ?? "");
+      const baseY = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-y") ?? "");
+      const origX = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-x") ?? "");
+      const origY = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-y") ?? "");
+      const gsapBaseX = Number.isFinite(baseX)
+        ? baseX
+        : (win.gsap.getProperty(element, "x") as number);
+      const gsapBaseY = Number.isFinite(baseY)
+        ? baseY
+        : (win.gsap.getProperty(element, "y") as number);
+      if (!Number.isFinite(baseX))
+        element.setAttribute("data-hf-drag-gsap-base-x", String(gsapBaseX));
+      if (!Number.isFinite(baseY))
+        element.setAttribute("data-hf-drag-gsap-base-y", String(gsapBaseY));
+      const deltaX = offset.x - (Number.isFinite(origX) ? origX : 0);
+      const deltaY = offset.y - (Number.isFinite(origY) ? origY : 0);
+      win.gsap.set(element, { x: gsapBaseX + deltaX, y: gsapBaseY + deltaY });
+    }
   } else {
     // Non-GSAP elements: use CSS translate as before.
     element.style.setProperty(

package/src/components/editor/manualEditsDomPatches.test.ts

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
 import { describe, it, expect } from "vitest";

package/src/components/editor/manualEditsDomPatches.ts

@@ -72,7 +72,23 @@ function appendTransformDisplayOps(element: HTMLElement, ops: PatchOperation[]):
 
 export function buildPathOffsetPatches(element: HTMLElement): PatchOperation[] {
   const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP, "translate"], ops);
+  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
+  // When GSAP owns the element's transform, the live inline translate is kept
+  // at "none" (the offset lives in GSAP's cache — see applyStudioPathOffset).
+  // Persist the var() expression in that case, so a reload re-folds the offset.
+  const inlineTranslate = element.style.getPropertyValue("translate");
+  const hasOffsetVars =
+    element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) ||
+    element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
+  const translateValue =
+    inlineTranslate && inlineTranslate !== "none"
+      ? inlineTranslate
+      : hasOffsetVars
+        ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`
+        : null;
+  if (translateValue) {
+    ops.push({ type: "inline-style", property: "translate", value: translateValue });
+  }
   ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
   collectAttributeOps(
     element,

package/src/components/editor/manualEditsSnapshot.ts

@@ -183,6 +183,22 @@ export function restoreStudioPathOffset(
     STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
     previous.originalInlineTranslate,
   );
+
+  // Restore GSAP x/y if a draft was applied via gsap.set during drag
+  const baseX = element.getAttribute("data-hf-drag-gsap-base-x");
+  const baseY = element.getAttribute("data-hf-drag-gsap-base-y");
+  if (baseX != null || baseY != null) {
+    const win = element.ownerDocument.defaultView as
+      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | null;
+    if (win?.gsap) {
+      const x = Number.parseFloat(baseX ?? "0") || 0;
+      const y = Number.parseFloat(baseY ?? "0") || 0;
+      win.gsap.set(element, { x, y });
+    }
+    element.removeAttribute("data-hf-drag-gsap-base-x");
+    element.removeAttribute("data-hf-drag-gsap-base-y");
+  }
 }
 
 /* ── Clear functions ──────────────────────────────────────────────── */

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -13,6 +13,7 @@ type KeyframeEntry = Array<{
 interface PropertyPanel3dTransformProps {
   gsapRuntimeValues: Record<string, number>;
   gsapAnimId: string | null;
+  resolveAnimIdForProp?: (prop: string) => string | null;
   gsapKeyframes: KeyframeEntry;
   currentPct: number;
   elStart: number;
@@ -31,6 +32,7 @@ interface PropertyPanel3dTransformProps {
 export function PropertyPanel3dTransform({
   gsapRuntimeValues,
   gsapAnimId,
+  resolveAnimIdForProp,
   gsapKeyframes,
   currentPct,
   elStart,
@@ -41,6 +43,7 @@ export function PropertyPanel3dTransform({
   onRemoveKeyframe,
   onConvertToKeyframes,
 }: PropertyPanel3dTransformProps) {
+  const idFor = (prop: string) => resolveAnimIdForProp?.(prop) ?? gsapAnimId;
   return (
     <div className="mt-3 border-t border-neutral-800/40 pt-3">
       <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
@@ -72,8 +75,14 @@ export function PropertyPanel3dTransform({
                   void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
                 }
               }}
-              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+              onRemoveKeyframe={(pct) => {
+                const id = idFor("z");
+                if (id) onRemoveKeyframe?.(id, pct);
+              }}
+              onConvertToKeyframes={() => {
+                const id = idFor("z");
+                if (id) onConvertToKeyframes?.(id);
+              }}
             />
           )}
         </div>
@@ -102,8 +111,14 @@ export function PropertyPanel3dTransform({
                   void onCommitAnimatedProperty(element, "scale", gsapRuntimeValues?.scale ?? 1);
                 }
               }}
-              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+              onRemoveKeyframe={(pct) => {
+                const id = idFor("scale");
+                if (id) onRemoveKeyframe?.(id, pct);
+              }}
+              onConvertToKeyframes={() => {
+                const id = idFor("scale");
+                if (id) onConvertToKeyframes?.(id);
+              }}
             />
           )}
         </div>

package/src/components/editor/useOffScreenIndicators.ts

@@ -0,0 +1,197 @@
+/**
+ * Detects GSAP-animated elements whose center is outside the visible composition
+ * area and returns edge-clamped indicator positions for each.
+ */
+import { useRef, useState, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+
+export interface OffScreenIndicator {
+  key: string;
+  elementId: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface CompRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scaleX: number;
+  scaleY: number;
+}
+
+type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
+
+function isHtmlElement(node: unknown): node is HTMLElement {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    typeof (node as HTMLElement).getBoundingClientRect === "function" &&
+    typeof (node as HTMLElement).tagName === "string"
+  );
+}
+
+function collectGsapTargetElements(iframe: HTMLIFrameElement): HTMLElement[] {
+  const win = iframe.contentWindow as
+    | (Window & { __timelines?: Record<string, TimelineLike> })
+    | null;
+  if (!win) return [];
+
+  let timelines: Record<string, TimelineLike> | undefined;
+  try {
+    timelines = win.__timelines;
+  } catch {
+    return [];
+  }
+  if (!timelines) return [];
+
+  const seen = new Set<HTMLElement>();
+  for (const tl of Object.values(timelines)) {
+    if (!tl?.getChildren) continue;
+    try {
+      for (const child of tl.getChildren(true)) {
+        if (!child.targets) continue;
+        for (const t of child.targets()) {
+          if (isHtmlElement(t)) seen.add(t);
+        }
+      }
+    } catch {
+      // cross-origin or detached timeline — skip
+    }
+  }
+  return Array.from(seen);
+}
+
+function indicatorsEqual(a: OffScreenIndicator[], b: OffScreenIndicator[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const ai = a[i]!;
+    const bi = b[i]!;
+    if (
+      ai.key !== bi.key ||
+      Math.abs(ai.left - bi.left) > 0.5 ||
+      Math.abs(ai.top - bi.top) > 0.5 ||
+      Math.abs(ai.width - bi.width) > 0.5 ||
+      Math.abs(ai.height - bi.height) > 0.5
+    )
+      return false;
+  }
+  return true;
+}
+
+export function useOffScreenIndicators({
+  iframeRef,
+  overlayRef,
+  compRect,
+}: {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  compRect: CompRect;
+}): OffScreenIndicator[] {
+  const [indicators, setIndicators] = useState<OffScreenIndicator[]>([]);
+  const prevRef = useRef<OffScreenIndicator[]>([]);
+  const compRectRef = useRef(compRect);
+  compRectRef.current = compRect;
+
+  useMountEffect(() => {
+    let frame = 0;
+
+    const update = () => {
+      frame = requestAnimationFrame(update);
+
+      const iframe = iframeRef.current;
+      const overlayEl = overlayRef.current;
+      const cr = compRectRef.current;
+      if (!iframe || !overlayEl || cr.width <= 0 || cr.height <= 0) {
+        if (prevRef.current.length > 0) {
+          prevRef.current = [];
+          setIndicators([]);
+        }
+        return;
+      }
+
+      const iframeRect = iframe.getBoundingClientRect();
+      const overlayRect = overlayEl.getBoundingClientRect();
+
+      const doc = iframe.contentDocument;
+      const root =
+        doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
+      if (!root) return;
+
+      const declaredWidth =
+        Number.parseFloat(root.getAttribute("data-width") ?? "") || iframeRect.width;
+      const declaredHeight =
+        Number.parseFloat(root.getAttribute("data-height") ?? "") || iframeRect.height;
+      const rootScaleX = iframeRect.width / declaredWidth;
+      const rootScaleY = iframeRect.height / declaredHeight;
+
+      const targets = collectGsapTargetElements(iframe);
+      if (targets.length === 0) {
+        if (prevRef.current.length > 0) {
+          prevRef.current = [];
+          setIndicators([]);
+        }
+        return;
+      }
+
+      // Composition bounds in overlay coordinates
+      const compLeft = cr.left;
+      const compTop = cr.top;
+      const compRight = compLeft + cr.width;
+      const compBottom = compTop + cr.height;
+
+      const next: OffScreenIndicator[] = [];
+      const keyCounts = new Map<string, number>();
+
+      for (const el of targets) {
+        if (!el.isConnected) continue;
+
+        const elRect = el.getBoundingClientRect();
+        if (elRect.width <= 0 && elRect.height <= 0) continue;
+
+        // Element rect in overlay coordinates
+        const elLeft = iframeRect.left - overlayRect.left + elRect.left * rootScaleX;
+        const elTop = iframeRect.top - overlayRect.top + elRect.top * rootScaleY;
+        const elW = elRect.width * rootScaleX;
+        const elH = elRect.height * rootScaleY;
+
+        // Check if the element is fully inside the composition
+        if (
+          elLeft >= compLeft &&
+          elTop >= compTop &&
+          elLeft + elW <= compRight &&
+          elTop + elH <= compBottom
+        ) {
+          continue;
+        }
+
+        // Only elements with a real id attribute can be selected via getElementById
+        if (!el.id) continue;
+        const count = keyCounts.get(el.id) ?? 0;
+        keyCounts.set(el.id, count + 1);
+        const key = count > 0 ? `${el.id}:${count}` : el.id;
+        next.push({
+          key,
+          elementId: el.id,
+          left: elLeft,
+          top: elTop,
+          width: elW,
+          height: elH,
+        });
+      }
+
+      if (!indicatorsEqual(prevRef.current, next)) {
+        prevRef.current = next;
+        setIndicators(next);
+      }
+    };
+
+    frame = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  return indicators;
+}

package/src/components/nle/NLELayout.tsx

@@ -366,25 +366,27 @@ export const NLELayout = memo(function NLELayout({
       {/* Preview + player controls */}
       <div className="flex-1 min-h-0 flex flex-col">
         <div
-          className="flex-1 min-h-0 relative overflow-hidden"
+          className="flex-1 min-h-0 relative"
           data-preview-pan-surface="true"
           onDragOver={handlePreviewDragOver}
           onDragLeave={handlePreviewDragLeave}
           onDrop={handlePreviewDrop}
         >
-          <NLEPreview
-            projectId={projectId}
-            iframeRef={iframeRef}
-            onIframeLoad={onIframeLoad}
-            onCompositionLoadingChange={setCompositionLoading}
-            portrait={portrait}
-            directUrl={directUrl}
-            suppressLoadingOverlay={hasLoadedOnceRef.current}
-            onStageRef={handleStageRef}
-          />
-          {previewDragOver && (
-            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
-          )}
+          <div className="absolute inset-0 overflow-hidden">
+            <NLEPreview
+              projectId={projectId}
+              iframeRef={iframeRef}
+              onIframeLoad={onIframeLoad}
+              onCompositionLoadingChange={setCompositionLoading}
+              portrait={portrait}
+              directUrl={directUrl}
+              suppressLoadingOverlay={hasLoadedOnceRef.current}
+              onStageRef={handleStageRef}
+            />
+            {previewDragOver && (
+              <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+            )}
+          </div>
           {!isFullscreen && previewOverlay}
         </div>
         <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">

package/src/contexts/DomEditContext.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 
@@ -60,6 +61,7 @@ export function DomEditProvider({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,
@@ -133,6 +135,7 @@ export function DomEditProvider({
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
+      handleGsapDeleteAllForElement,
       handleGsapAddAnimation,
       handleGsapAddProperty,
       handleGsapRemoveProperty,
@@ -200,6 +203,7 @@ export function DomEditProvider({
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
+      handleGsapDeleteAllForElement,
       handleGsapAddAnimation,
       handleGsapAddProperty,
       handleGsapRemoveProperty,

package/src/hooks/gsapDragCommit.ts

@@ -11,8 +11,6 @@ import {
   resolveTweenStart,
   resolveTweenDuration,
 } from "../utils/globalTimeCompiler";
-import { readAllAnimatedProperties } from "./gsapRuntimeReaders";
-
 export interface GsapDragCommitCallbacks {
   commitMutation: (
     selection: DomEditSelection,
@@ -25,6 +23,7 @@ export interface GsapDragCommitCallbacks {
       beforeReload?: () => void;
     },
   ) => Promise<void>;
+  fetchAnimations?: () => Promise<GsapAnimation[]>;
 }
 
 // ── Percentage computation ─────────────────────────────────────────────────
@@ -114,7 +113,6 @@ async function extendTweenAndAddKeyframe(
   const newStart = Math.min(targetTime, tweenStart);
   const newEnd = Math.max(targetTime, tweenEnd);
   const newDuration = Math.max(0.01, newEnd - newStart);
-
   const existingKfs = anim.keyframes?.keyframes ?? [];
   const remappedKfs: Array<{ percentage: number; properties: Record<string, number | string> }> =
     [];
@@ -126,20 +124,15 @@ async function extendTweenAndAddKeyframe(
 
   const targetPct = Math.round(((targetTime - newStart) / newDuration) * 1000) / 10;
   remappedKfs.push({ percentage: targetPct, properties });
-  remappedKfs.sort((a, b) => a.percentage - b.percentage);
 
-  await callbacks.commitMutation(
-    selection,
-    { type: "delete", animationId: anim.id },
-    { label: "Extend tween range", skipReload: true },
-  );
+  remappedKfs.sort((a, b) => a.percentage - b.percentage);
 
-  const selector = anim.targetSelector;
   await callbacks.commitMutation(
     selection,
     {
-      type: "add-with-keyframes",
-      targetSelector: selector,
+      type: "replace-with-keyframes",
+      animationId: anim.id,
+      targetSelector: anim.targetSelector,
       position: Math.round(newStart * 1000) / 1000,
       duration: Math.round(newDuration * 1000) / 1000,
       keyframes: remappedKfs,
@@ -156,8 +149,8 @@ async function commitKeyframedPosition(
   callbacks: GsapDragCommitCallbacks,
   beforeReload?: () => void,
 ): Promise<void> {
-  const pct = computeCurrentPercentage(selection, anim);
-
+  const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
+  const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
   await callbacks.commitMutation(
     selection,
     {
@@ -168,6 +161,7 @@ async function commitKeyframedPosition(
     },
     { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
   );
+  if (activeKeyframePct != null) setActiveKeyframePct(null);
 }
 
 /**
@@ -182,10 +176,11 @@ async function commitFlatViaKeyframes(
   callbacks: GsapDragCommitCallbacks,
   beforeReload?: () => void,
 ): Promise<void> {
+  const coalesceKey = `gsap:convert-drag:${anim.id}`;
   await callbacks.commitMutation(
     selection,
     { type: "convert-to-keyframes", animationId: anim.id },
-    { label: "Convert to keyframes for drag", skipReload: true },
+    { label: "Convert to keyframes for drag", skipReload: true, coalesceKey },
   );
 
   const pct = computeCurrentPercentage(selection, anim);
@@ -198,7 +193,7 @@ async function commitFlatViaKeyframes(
       percentage: pct,
       properties,
     },
-    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload },
+    { label: `Move layer (keyframe ${pct}%)`, softReload: true, beforeReload, coalesceKey },
   );
 }
 
@@ -243,19 +238,20 @@ export async function commitGsapPositionFromDrag(
     el.removeAttribute("data-hf-drag-initial-offset-y");
   };
 
+  const ct = usePlayerStore.getState().currentTime;
   if (anim.keyframes) {
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);
     const effectiveAnim = newId ? { ...anim, id: newId } : anim;
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
+    const dragProps: Record<string, number> = { x: newX, y: newY };
 
-    const ct = usePlayerStore.getState().currentTime;
     const ts = resolveTweenStart(effectiveAnim);
     const td = resolveTweenDuration(effectiveAnim);
-    if (ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01)) {
+    const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
+    if (outsideRange) {
       await extendTweenAndAddKeyframe(
         selection,
         effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
+        dragProps,
         ct,
         ts,
         td,
@@ -263,32 +259,112 @@ export async function commitGsapPositionFromDrag(
         restoreOffset,
       );
     } else {
-      await commitKeyframedPosition(
+      await commitKeyframedPosition(selection, effectiveAnim, dragProps, callbacks, restoreOffset);
+    }
+  } else if (anim.method === "from" || anim.method === "fromTo") {
+    const ct = usePlayerStore.getState().currentTime;
+    const ts = resolveTweenStart(anim);
+    const td = resolveTweenDuration(anim);
+    const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01);
+    const dragProps: Record<string, number> = { x: newX, y: newY };
+
+    if (outsideRange && ts !== null) {
+      // Split the original from() tween into property groups first.
+      await callbacks.commitMutation(
         selection,
-        effectiveAnim,
-        { ...runtimeProps, x: newX, y: newY },
-        callbacks,
-        restoreOffset,
+        { type: "split-into-property-groups", animationId: anim.id },
+        { label: "Split from() for drag", skipReload: true },
+      );
+
+      const allAnims = callbacks.fetchAnimations ? await callbacks.fetchAnimations() : [];
+      const existingPosAnim = allAnims.find(
+        (a) => a.propertyGroup === "position" && a.targetSelector === anim.targetSelector,
+      );
+
+      if (existingPosAnim?.keyframes) {
+        // Extend the existing position tween
+        const posTs = resolveTweenStart(existingPosAnim);
+        const posTd = resolveTweenDuration(existingPosAnim);
+        if (posTs !== null) {
+          await extendTweenAndAddKeyframe(
+            selection,
+            existingPosAnim,
+            { x: newX, y: newY },
+            ct,
+            posTs,
+            posTd,
+            callbacks,
+            restoreOffset,
+          );
+          return;
+        }
+      }
+
+      // No existing position tween — create one
+      const newStart = Math.min(ct, ts);
+      const newEnd = Math.max(ct, ts + td);
+      const newDuration = Math.max(0.01, newEnd - newStart);
+      const dragBefore = ct < ts;
+      const origStartPct = Math.round(((ts - newStart) / newDuration) * 1000) / 10;
+      const origEndPct = Math.round(((ts + td - newStart) / newDuration) * 1000) / 10;
+
+      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
+        [];
+      if (dragBefore) {
+        keyframes.push({ percentage: 0, properties: { x: newX, y: newY } });
+        if (origStartPct > 0.5 && origStartPct < 99.5) {
+          keyframes.push({ percentage: origStartPct, properties: { x: 0, y: 0 } });
+        }
+        keyframes.push({ percentage: 100, properties: { x: 0, y: 0 } });
+      } else {
+        keyframes.push({ percentage: 0, properties: { x: 0, y: 0 } });
+        if (origEndPct > 0.5 && origEndPct < 99.5) {
+          keyframes.push({ percentage: origEndPct, properties: { x: 0, y: 0 } });
+        }
+        keyframes.push({ percentage: 100, properties: { x: newX, y: newY } });
+      }
+      keyframes.sort((a, b) => a.percentage - b.percentage);
+
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "add-with-keyframes",
+          targetSelector: anim.targetSelector,
+          position: Math.round(newStart * 1000) / 1000,
+          duration: Math.round(newDuration * 1000) / 1000,
+          keyframes,
+        },
+        { label: "Move layer (from extended)", softReload: true, beforeReload: restoreOffset },
+      );
+    } else {
+      // Inside tween range: convert then add keyframe at current time
+      const coalesceKey = `gsap:convert-drag:${anim.id}`;
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "convert-to-keyframes",
+          animationId: anim.id,
+        },
+        { label: "Convert from() for drag", skipReload: true, coalesceKey },
+      );
+      const pct = computeCurrentPercentage(selection, anim);
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "add-keyframe",
+          animationId: anim.id,
+          percentage: pct,
+          properties: dragProps,
+        },
+        {
+          label: `Move layer (keyframe ${pct}%)`,
+          softReload: true,
+          beforeReload: restoreOffset,
+          coalesceKey,
+        },
       );
     }
-  } else if (anim.method === "from" || anim.method === "fromTo") {
-    await callbacks.commitMutation(
-      selection,
-      {
-        type: "convert-to-keyframes",
-        animationId: anim.id,
-        resolvedFromValues: { x: newX, y: newY },
-      },
-      { label: "Move layer (keyframe rest)", softReload: true, beforeReload: restoreOffset },
-    );
   } else {
-    const runtimeProps = readAllAnimatedProperties(iframe, selector, anim);
-    await commitFlatViaKeyframes(
-      selection,
-      anim,
-      { ...runtimeProps, x: newX, y: newY },
-      callbacks,
-      restoreOffset,
-    );
+    await commitFlatViaKeyframes(selection, anim, { x: newX, y: newY }, callbacks, restoreOffset);
   }
 }