@hyperframes/studio 0.8.115 → 0.8.116

package/src/hooks/gsapResizeIntercept.test.ts

@@ -7,7 +7,8 @@ import { observeGsapGesture } from "./gsapGestureOutcome";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { CommitMutation } from "./gsapScriptCommitTypes";
 import { computeCurrentPercentage } from "./gsapDragCommit";
-import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
+import { commitSizeAtPlayhead, tryGsapResizeIntercept } from "./gsapResizeIntercept";
+import { liveTween, previewWith, tween } from "./gsapParsedTween.test-helpers";
 
 vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
@@ -15,6 +16,8 @@ afterEach(() => {
   vi.clearAllMocks();
   vi.restoreAllMocks();
   usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  // One #clip per test: leftovers would make every tween on it look shared.
+  document.body.innerHTML = "";
 });
 
 /**
@@ -42,10 +45,18 @@ function fakeIframe(el: HTMLElement, gsapValues: Record<string, number>) {
   // The element's OPACITY intro tween lives on the timeline: unfiltered
   // capture would pick `opacity` up via the other-tween sweep.
   const opacityIntro = { targets: () => [el], vars: { opacity: 0, duration: 0.8 } };
+  const scaleIntro = liveTween(
+    el,
+    { start: 0.2, duration: 0.8, vars: { scale: 0.9 }, ends: { scaleX: [0.9, 1] } },
+    { from: true },
+  );
   return {
     contentWindow: {
-      __timelines: { main: { getChildren: () => [opacityIntro] } },
-      gsap: { getProperty: (_el: Element, prop: string) => gsapValues[prop] ?? 0 },
+      __timelines: { main: { getChildren: () => [opacityIntro, scaleIntro] } },
+      gsap: {
+        getProperty: (_el: Element, prop: string) => gsapValues[prop] ?? 0,
+        defaults: () => ({ ease: "power1.out" }),
+      },
     },
     contentDocument: document,
   } as unknown as HTMLIFrameElement;
@@ -295,24 +306,26 @@ async function runResize(
   return committed;
 }
 
-it("scale-route resize converts via the group filter and commits scale, not width/height", async () => {
+it("scale-route resize keyframes scale through the group filter, not width/height", async () => {
   const el = makeGradedElement();
   const iframe = fakeIframe(el, { scale: 1, scaleX: 1, scaleY: 1, opacity: 0, rotation: 0 });
   // uniform: 800/640 === 450/360
   const committed = await runResize(el, iframe, { width: 800, height: 450 });
 
-  const convert = committed.find((m) => m.type === "convert-to-keyframes");
-  expect(convert).toBeDefined();
-  const fromValues = convert!.resolvedFromValues as Record<string, number>;
-  // Group filter: the opacity intro tween must NOT leak into the conversion.
-  expect(fromValues).not.toHaveProperty("opacity");
-  expect(fromValues).toHaveProperty("scale");
+  const keyframes = committed.find((m) => m.type === "replace-with-keyframes")?.keyframes as
+    | Array<{ properties: Record<string, number> }>
+    | undefined;
+  // Group filter: the opacity intro tween must NOT leak into the scale keyframes.
+  expect(keyframes?.some((k) => "opacity" in k.properties)).toBe(false);
+  expect(keyframes?.some((k) => "scale" in k.properties)).toBe(true);
 
   // Every committed property is scale-group — the resize never writes
   // width/height for a scale-driven element (the double-apply bug class).
   const allProps = committed.flatMap((m) => [
     ...Object.keys((m.properties as Record<string, unknown>) ?? {}),
-    ...Object.keys((m.resolvedFromValues as Record<string, unknown>) ?? {}),
+    ...((m.keyframes as Array<{ properties: object }>) ?? []).flatMap((k) =>
+      Object.keys(k.properties),
+    ),
   ]);
   expect(allProps).not.toContain("width");
   expect(allProps).not.toContain("height");
@@ -560,6 +573,45 @@ it("hands the size to the element's CSS when its only tween is a fade", async ()
   expect(commitMutation).not.toHaveBeenCalled();
 });
 
+it.each([
+  ["stays put", { x: 0, y: 0 }, { width: 300 }, undefined],
+  ["moves", { x: -40, y: 0 }, { width: 300, x: 10, y: 0 }, true],
+])(
+  "a size written at the playhead carries the anchor only when the box %s",
+  async (_, offset, written, owns) => {
+    const selection = titleSelection();
+    const el = selection.element;
+    el.setAttribute("data-hf-drag-gsap-base-x", "50");
+    el.setAttribute("data-hf-drag-gsap-base-y", "0");
+    const slide = tween({
+      id: "#title-to-0",
+      targetSelector: "#title",
+      propertyGroup: undefined,
+      method: "to",
+      properties: { x: 100, width: 320 },
+      resolvedStart: 0,
+      duration: 2,
+      ease: "none",
+    });
+    usePlayerStore.setState({ currentTime: 1 });
+    const commitMutation = vi.fn();
+    const live = liveTween(el, { start: 0, duration: 2, vars: slide.properties });
+
+    const outcome = await commitSizeAtPlayhead(
+      selection,
+      slide,
+      { width: 300 },
+      previewWith(el, [live]),
+      offset,
+      { commitMutation },
+    );
+
+    expect(outcome.ownsDragOffset).toBe(owns);
+    const mutation = commitMutation.mock.calls[0]![1];
+    expect(mutation.keyframes[0].properties).toEqual(written);
+  },
+);
+
 it.each([
   [5, 1],
   [0.5, 1],

package/src/hooks/gsapResizeIntercept.ts

@@ -14,43 +14,34 @@ import {
 } from "../components/editor/manualEditsTypes";
 import { setElementGsapPosition, setElementGsapScale } from "../utils/elementGsap";
 import { usePlayerStore } from "../player/store/playerStore";
-import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
+import { readGsapProperty } from "./gsapRuntimeReaders";
 import {
   commitStaticGsapPosition,
   commitStaticGsapSize,
-  commitKeyframedSizeFromResize,
   computeCurrentPercentage,
   findExistingPositionWrite,
   findSizeSetAnimation,
-  materializeIfDynamic,
 } from "./gsapDragCommit";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import { computeDraggedGsapPosition, restoreDragOffset } from "./draggedGsapPosition";
 import { pickClosestToPlayhead, readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
-import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
-import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutcome";
+import {
+  animationWritesAnyProperty,
+  assertGsapEditPersisted,
+  type GsapEditOutcome,
+} from "./gsapEditOutcome";
+import { commitValueAtPlayhead } from "./gsapValueAtPlayhead";
 import { preflightGsapResizeIntercept, resizeRoute } from "./gsapResizePreflight";
 
-const IDENTITY_ONE_PROPS = new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
 const SIZE_PROPS = new Set(["width", "height"]);
-
-/** Build identity (zero / one) values for each property in `source`. */
-function synthesizeIdentityProps(
-  source: Record<string, number | string>,
-): Record<string, number | string> {
-  const id: Record<string, number | string> = {};
-  for (const [k, v] of Object.entries(source)) {
-    if (typeof v === "number") id[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-    else id[k] = v;
-  }
-  return id;
-}
+const POSITION_XY = new Set(["x", "y"]);
 
 /**
  * The element's box before the resize draft ran, in CSS pixels.
@@ -72,6 +63,51 @@ function originalBoxSize(
   return Number.isFinite(inline) && inline > 0 ? inline : null;
 }
 
+/** The box's width and height before the draft, for a size tween that animates only one. */
+function preGestureBoxSize(el: HTMLElement): Record<string, number> {
+  const width = originalBoxSize(el, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, "width");
+  const height = originalBoxSize(el, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, "height");
+  return { ...(width != null && { width }), ...(height != null && { height }) };
+}
+
+/** A size write at the playhead. When the same tween animates position, the resize's anchor move
+ *  goes into this one write: a second write to the tween in the same gesture would plan on stale ids. */
+export async function commitSizeAtPlayhead(
+  selection: DomEditSelection,
+  anim: GsapAnimation,
+  size: Record<string, number>,
+  iframe: HTMLIFrameElement | null,
+  dragOffset: { x: number; y: number } | undefined,
+  callbacks: GsapDragCommitCallbacks,
+): Promise<GsapEditOutcome> {
+  const selector = selectorFromSelection(selection);
+  const moves = !!dragOffset && (dragOffset.x !== 0 || dragOffset.y !== 0) && !!selector;
+  const anchor =
+    moves && animationWritesAnyProperty(anim, POSITION_XY)
+      ? computeDraggedGsapPosition(
+          selection.element,
+          dragOffset,
+          readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 },
+        )
+      : null;
+  const written = await commitValueAtPlayhead(
+    selection,
+    anim,
+    anchor ? { ...size, x: anchor.newX, y: anchor.newY } : size,
+    iframe,
+    callbacks,
+    {
+      label: "Resize",
+      backfill: {
+        ...preGestureBoxSize(selection.element),
+        ...(anchor && { x: anchor.baseGsapX, y: anchor.baseGsapY }),
+      },
+      ...(anchor && { beforeReload: () => restoreDragOffset(selection.element) }),
+    },
+  );
+  return written.status === "persisted" && anchor ? { ...written, ownsDragOffset: true } : written;
+}
+
 /**
  * Whether this tween already states scale as `scaleX`/`scaleY`.
  *
@@ -98,6 +134,7 @@ export async function tryGsapResizeIntercept(
   iframe: HTMLIFrameElement | null,
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+  dragOffset?: { x: number; y: number },
 ): Promise<GsapEditOutcome> {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
@@ -120,7 +157,7 @@ export async function tryGsapResizeIntercept(
     postSplitFetch,
   );
 
-  let anim =
+  const anim =
     resolved?.anim && animationWritesAnyProperty(resolved.anim, resizeProperties)
       ? resolved.anim
       : null;
@@ -166,15 +203,11 @@ export async function tryGsapResizeIntercept(
       );
       if (animatedTween) {
         logResize("intercept-route", { route: "keyframed-size", tweenId: animatedTween.id });
-        const handled = await commitKeyframedSizeFromResize(
-          selection,
-          size,
-          sel,
-          sizeSet,
-          animatedTween,
-          { commitMutation, fetchAnimations: fetchFallbackAnimations },
-        );
-        if (handled) return { status: "persisted" };
+        const sized = { width: roundToLayoutPx(size.width), height: roundToLayoutPx(size.height) };
+        return commitSizeAtPlayhead(selection, animatedTween, sized, iframe, dragOffset, {
+          commitMutation,
+          fetchAnimations: fetchFallbackAnimations,
+        });
       }
     }
 
@@ -196,16 +229,10 @@ export async function tryGsapResizeIntercept(
 
   const { activeKeyframePct, setActiveKeyframePct } = usePlayerStore.getState();
   const pct = activeKeyframePct ?? computeCurrentPercentage(selection, anim);
-  if (activeKeyframePct != null) setActiveKeyframePct(null);
   const selector = selectorFromSelection(selection);
-  // Scope every capture to the resize group — same contract as the rotation
-  // intercept. Unfiltered, an opacity-touching intro tween on the element
-  // would ride into resize conversions/backfills (the Fix-2 bake class).
-  const runtimeProps = selector
-    ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup)
-    : {};
 
   let resizeProps: Record<string, number>;
+  let resizeBackfill: Record<string, number>;
   let scaleDraftEl: HTMLElement | null = null;
   let scaleDraftDropPoint: { x: number; y: number } | null = null;
   /** The scale this commit is putting on the element, for the finalize step. */
@@ -262,6 +289,7 @@ export async function tryGsapResizeIntercept(
     resizeProps = useScaleLonghands
       ? { scaleX: newScaleX, scaleY: newScaleY }
       : { scale: newScaleX };
+    resizeBackfill = { scaleX: liveScaleX, scaleY: liveScaleY };
     logResize("intercept-route", {
       route: "scale-tween",
       cssW,
@@ -295,6 +323,7 @@ export async function tryGsapResizeIntercept(
       width: roundToLayoutPx(size.width),
       height: roundToLayoutPx(size.height),
     };
+    resizeBackfill = preGestureBoxSize(selection.element);
   }
   // Finalize a scale-route commit: tear down the gesture's inline width/height
   // draft (leaving it applied compounds with the committed scale — the element
@@ -404,10 +433,12 @@ export async function tryGsapResizeIntercept(
     );
     if (positionTween) {
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
-      await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, selector, {
-        commitMutation,
-        fetchAnimations: fetchFallbackAnimations,
-      });
+      assertGsapEditPersisted(
+        await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, {
+          commitMutation,
+          fetchAnimations: fetchFallbackAnimations,
+        }),
+      );
       return true;
     }
     const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
@@ -435,135 +466,14 @@ export async function tryGsapResizeIntercept(
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
-  const ct = usePlayerStore.getState().currentTime;
-  const ts = resolveTweenStart(anim);
-  const td = tweenDuration;
-  const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01); // Convert flat tweens to keyframes only for in-range resizes.
-  // Outside-range uses the extend path which handles everything atomically.
-  if (!outsideRange) {
-    // fallow-ignore-next-line code-duplication
-    if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
-      const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
-      if (newId) anim = { ...anim, id: newId };
-    } else if (!anim.keyframes) {
-      const resolvedFromValues = selector
-        ? readAllAnimatedProperties(iframe, selector, anim, resizeGroup)
-        : undefined;
-      await commitMutation(
-        selection,
-        { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
-        { label: "Convert to keyframes for resize" },
-      );
-      if (fetchFallbackAnimations) {
-        const fresh = await fetchFallbackAnimations();
-        const refreshed = fresh.find(
-          (a) => a.targetSelector === anim!.targetSelector && a.keyframes,
-        );
-        if (refreshed) anim = refreshed;
-      }
-    }
-  }
-
-  // A NON-uniform scale must also take the full-rewrite path: it mixes
-  // scaleX/scaleY into a tween whose existing keyframes may carry the uniform
-  // `scale` shorthand, and GSAP's percentage keyframes animate each property
-  // name independently — a shorthand/longhand mix would leave the old `scale`
-  // sub-tween running against the new scaleX/scaleY. The rewrite below
-  // normalizes every keyframe to the longhands. For an in-range resize the
-  // min/max window math below degenerates to the tween's own start/duration,
-  // so timing is unchanged.
-  if ((outsideRange || useScaleLonghands) && ts !== null) {
-    // For flat tweens, synthesize the keyframes from the tween's properties
-    const kfs =
-      anim.keyframes?.keyframes ??
-      (() => {
-        const fromProps =
-          anim.method === "from" || anim.method === "fromTo"
-            ? { ...anim.properties }
-            : synthesizeIdentityProps(anim.properties);
-        const toProps =
-          anim.method === "from"
-            ? synthesizeIdentityProps(anim.properties)
-            : { ...anim.properties };
-        return [
-          { percentage: 0, properties: fromProps },
-          { percentage: 100, properties: toProps },
-        ];
-      })();
-    const newStart = Math.min(ct, ts);
-    const newEnd = Math.max(ct, ts + td);
-    const newDuration = Math.max(0.01, newEnd - newStart);
-    const existingKfs = kfs;
-    const remapped: Array<{ percentage: number; properties: Record<string, number | string> }> = [];
-    for (const kf of existingKfs) {
-      const absTime = ts + (kf.percentage / 100) * td;
-      const newPct = Math.round(((absTime - newStart) / newDuration) * 1000) / 10;
-      const props = { ...kf.properties };
-      // Normalize the uniform `scale` shorthand to longhands when this commit
-      // writes scaleX/scaleY, so the tween never mixes the two forms.
-      if (nonUniformScale && "scale" in props) {
-        const uniform = props.scale;
-        if (typeof uniform === "number") {
-          props.scaleX = uniform;
-          props.scaleY = uniform;
-        }
-        delete props.scale;
-      }
-      // Only backfill properties that the animation already had (x, y, scale).
-      // Don't backfill width/height — they should only appear on the resize keyframe.
-      for (const k of Object.keys(resizeProps)) {
-        if (k in props) continue;
-        if (k === "width" || k === "height") continue;
-        props[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-      }
-      remapped.push({ percentage: newPct, properties: props });
-    }
-    const targetPct = Math.round(((ct - newStart) / newDuration) * 1000) / 10;
-    // An in-range rewrite can land on an existing keyframe's percentage —
-    // merge into it instead of emitting a duplicate step.
-    const collidingKf = remapped.find((kf) => Math.abs(kf.percentage - targetPct) < 0.05);
-    if (collidingKf) Object.assign(collidingKf.properties, resizeProps);
-    else remapped.push({ percentage: targetPct, properties: resizeProps });
-    remapped.sort((a, b) => a.percentage - b.percentage);
-
-    await commitMutation(
-      selection,
-      {
-        type: "replace-with-keyframes",
-        animationId: anim.id,
-        targetSelector: anim.targetSelector,
-        position: roundTo3(newStart),
-        duration: roundTo3(newDuration),
-        keyframes: remapped,
-      },
-      {
-        label: outsideRange
-          ? `Resize (extended to ${ct.toFixed(2)}s)`
-          : `Resize (keyframe ${Math.round(((ct - newStart) / newDuration) * 1000) / 10}%)`,
-        softReload: true,
-        ...(!collidingKf ? { keyframeAction: "add" as const } : {}),
-      },
-    );
-    return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
-  }
-
-  const backfillDefaults: Record<string, number> = {};
-  for (const k of Object.keys(runtimeProps)) {
-    if (SIZE_PROPS.has(k)) continue;
-    backfillDefaults[k] = IDENTITY_ONE_PROPS.has(k) ? 1 : 0;
-  }
-
-  await commitMutation(
-    selection,
-    {
-      type: "add-keyframe",
-      animationId: anim.id,
-      percentage: pct,
-      properties: resizeProps,
-      backfillDefaults,
-    },
-    { label: `Resize (keyframe ${pct}%)`, softReload: true },
-  );
+  const callbacks = { commitMutation, fetchAnimations: fetchFallbackAnimations };
+  if (resizeGroup === "size")
+    return commitSizeAtPlayhead(selection, anim, resizeProps, iframe, dragOffset, callbacks);
+  const written = await commitValueAtPlayhead(selection, anim, resizeProps, iframe, callbacks, {
+    label: "Resize",
+    backfill: resizeBackfill,
+  });
+  if (written.status !== "persisted") return written;
   return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
 }
 

package/src/hooks/gsapResizeSweep.test.ts

@@ -23,57 +23,40 @@ import { classifyTweenPropertyGroup } from "@hyperframes/core/gsap-parser";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
+import { elTween, resetGsapEditState } from "./gsapParsedTween.test-helpers";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 
-afterEach(() => {
-  vi.restoreAllMocks();
-  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
-  document.body.innerHTML = "";
-});
+afterEach(resetGsapEditState);
 
 type Props = Record<string, number>;
 
-function tween(id: string, properties: Props, duration: number): GsapAnimation {
-  return {
-    id,
-    targetSelector: "#el",
-    propertyGroup: classifyTweenPropertyGroup(properties),
-    method: "to",
-    properties,
-    position: 0,
-    resolvedStart: 0,
-    duration,
-    ...(duration === 0 ? { extras: { immediateRender: "__raw:true" } } : {}),
-  } as unknown as GsapAnimation;
-}
-
 /** The dimensions an element's animations actually vary across. */
 const SCALE = {
   none: null,
-  "instant hold": () => tween("#el-scale", { scale: 1.2 }, 0),
-  tween: () => tween("#el-scale", { scale: 1.2 }, 2),
-  longhands: () => tween("#el-scale", { scaleX: 1.2, scaleY: 1.1 }, 2),
+  "instant hold": () => elTween("#el-scale", { scale: 1.2 }, 0),
+  tween: () => elTween("#el-scale", { scale: 1.2 }, 2),
+  longhands: () => elTween("#el-scale", { scaleX: 1.2, scaleY: 1.1 }, 2),
 } as const;
 const SIZE = {
   none: null,
-  "instant hold": () => tween("#el-size", { width: 300, height: 200 }, 0),
-  tween: () => tween("#el-size", { width: 300, height: 200 }, 2),
+  "instant hold": () => elTween("#el-size", { width: 300, height: 200 }, 0),
+  tween: () => elTween("#el-size", { width: 300, height: 200 }, 2),
 } as const;
 const POSITION = {
   none: null,
-  "static hold": () => tween("#el-position", { x: 40, y: 60 }, 0),
-  tween: () => tween("#el-position", { x: 40, y: 60 }, 2),
+  "static hold": () => elTween("#el-position", { x: 40, y: 60 }, 0),
+  tween: () => elTween("#el-position", { x: 40, y: 60 }, 2),
 } as const;
 const EXTRA = {
   none: null,
   // What a 3D card carries, and the shape that produced two same-group ids.
   "3d and rotation": () => [
-    tween("#el-other", { rotationY: -540, rotationX: 720, _auto: 0 }, 0),
-    tween("#el-rotation", { rotation: 720 }, 0),
-    tween("#el-other-2", { z: 50 }, 0),
+    elTween("#el-other", { rotationY: -540, rotationX: 720, _auto: 0 }, 0),
+    elTween("#el-rotation", { rotation: 720 }, 0),
+    elTween("#el-other-2", { z: 50 }, 0),
   ],
   // A tween that already spans two groups, which the resize has to split.
-  "a mixed tween": () => [tween("#el-mixed", { scale: 1.2, width: 300, height: 200 }, 0)],
+  "a mixed tween": () => [elTween("#el-mixed", { scale: 1.2, width: 300, height: 200 }, 0)],
 } as const;
 
 interface Recorded {
@@ -113,7 +96,7 @@ function fakeSource(initial: GsapAnimation[]) {
     current = [
       ...current.filter((animation) => animation.id !== id),
       ...[...byGroup].map(([group, properties]) =>
-        tween(`#el-split-${group}`, properties, target.duration ?? 0),
+        elTween(`#el-split-${group}`, properties, target.duration ?? 0),
       ),
     ];
   };
@@ -123,7 +106,7 @@ function fakeSource(initial: GsapAnimation[]) {
     if (mutation.type === "split-into-property-groups") return id && split(id);
     if (!id) {
       if (mutation.type === "add")
-        current = [...current, tween(`#el-added-${current.length}`, properties, 0)];
+        current = [...current, elTween(`#el-added-${current.length}`, properties, 0)];
       return;
     }
     mergeInto(id, properties);
@@ -224,7 +207,7 @@ it(`sweeps ${CASES.length} animated shapes without a stale id or a mixed tween`,
  */
 function scaleAt(id: string, position: number): GsapAnimation {
   return {
-    ...tween(id, { scale: 1 }, 2),
+    ...elTween(id, { scale: 1 }, 2),
     position,
     resolvedStart: position,
     keyframes: {

package/src/hooks/gsapRuntimeBridge.sharedTween.test.ts

@@ -121,7 +121,7 @@ describe("tryGsapDragIntercept: which tweens a word's drag may use", () => {
 });
 
 describe("tryGsapDragIntercept: one drag is one undo step", () => {
-  it("records the split and the move under one gesture key", async () => {
+  it("records the move under one gesture key, without splitting the mixed tween", async () => {
     document.body.innerHTML = `<div id="hero"></div>`;
     const hero = document.getElementById("hero")!;
     const mixed = {
@@ -133,12 +133,8 @@ describe("tryGsapDragIntercept: one drag is one undo step", () => {
       position: 0,
       resolvedStart: 0,
       duration: 1,
+      ease: "none",
     } as unknown as GsapAnimation;
-    const split = [
-      { ...mixed, id: "#hero-fromTo-0-position", propertyGroup: "position" },
-      { ...mixed, id: "#hero-fromTo-0-opacity", propertyGroup: "opacity" },
-    ] as GsapAnimation[];
-    let fetches = 0;
     const commitMutation = vi.fn();
     await tryGsapDragIntercept(
       { id: "hero", selector: "#hero", element: hero } as unknown as DomEditSelection,
@@ -146,10 +142,12 @@ describe("tryGsapDragIntercept: one drag is one undo step", () => {
       [mixed],
       null,
       commitMutation,
-      async () => (fetches++ === 0 ? [mixed] : split),
+      async () => [mixed],
     );
+    const types = commitMutation.mock.calls.map((call) => call[1].type);
     const options = commitMutation.mock.calls.map((call) => call[2]);
-    expect(options.length).toBeGreaterThan(1);
+    expect(types).not.toContain("split-into-property-groups");
+    expect(options.length).toBeGreaterThan(0);
     expect(new Set(options.map((o) => o.coalesceKey)).size).toBe(1);
     expect(options[0].coalesceKey).toMatch(/^gsap:drag:/);
     expect(options.every((o) => o.coalesceMs === Number.POSITIVE_INFINITY)).toBe(true);

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -23,7 +23,7 @@ function fakeIframe(elId: string, children: unknown[]): HTMLIFrameElement {
   return {
     contentWindow: {
       __timelines: { "index.html": timeline },
-      gsap: { getProperty: () => 0 },
+      gsap: { getProperty: () => 0, defaults: () => ({ ease: "power1.out" }) },
     },
     contentDocument: { querySelector: (sel: string) => (sel === `#${elId}` ? el : null) },
   } as unknown as HTMLIFrameElement;
@@ -451,7 +451,8 @@ describe("tryGsapDragIntercept — autoKeyframeEnabled toggle (#1808)", () => {
       fakeIframe("puck-b", []),
       commitMutation,
     );
-    return { handled, types: commitMutation.mock.calls.map(([, mutation]) => mutation.type) };
+    const mutations = commitMutation.mock.calls.map(([, mutation]) => mutation);
+    return { handled, mutations, types: mutations.map((mutation) => mutation.type) };
   }
 
   it("shifts the whole tween instead of adding a keyframe when the toggle is off", async () => {
@@ -461,10 +462,40 @@ describe("tryGsapDragIntercept — autoKeyframeEnabled toggle (#1808)", () => {
     expect(types).not.toContain("add-keyframe");
   });
 
-  it("still adds/updates a keyframe at the playhead when the toggle is on (default)", async () => {
-    const { handled, types } = await runAutoKeyframeDrag(true);
+  it("shifts a linear flat tween as keyframes that stay linear", async () => {
+    usePlayerStore.setState({ autoKeyframeEnabled: false, currentTime: 1 });
+    const commitMutation = vi.fn();
+    const linear = { ...stalePositionAnim, ease: "none" } as GsapAnimation;
+    const live = {
+      targets: () => [{ id: "puck-b" }],
+      vars: { x: -180, y: -60, ease: "none" },
+      duration: () => 2,
+      startTime: () => 1,
+    };
+    await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 0 },
+      [linear],
+      fakeIframe("puck-b", [live]),
+      commitMutation,
+    );
+    const [mutation] = commitMutation.mock.calls.map(([, m]) => m);
+    expect(mutation).toMatchObject({ type: "replace-with-keyframes", easeEach: "none" });
+    expect(mutation).not.toHaveProperty("ease", "none");
+  });
+
+  it("still changes only the keyframe at the playhead when the toggle is on (default)", async () => {
+    const { handled, mutations } = await runAutoKeyframeDrag(true);
     expect(handled).toEqual({ status: "persisted" });
-    expect(types).not.toContain("replace-with-keyframes");
+    expect(mutations).toEqual([
+      expect.objectContaining({
+        type: "replace-with-keyframes",
+        keyframes: [
+          { percentage: 0, properties: { x: 0, y: 0 } },
+          { percentage: 100, properties: { x: -50, y: 0 } },
+        ],
+      }),
+    ]);
   });
 });
 
@@ -540,7 +571,11 @@ describe("tryGsapDragIntercept — motion paths", () => {
         ],
         ease: "none",
       },
-      expect.objectContaining({ label: "Move layer (new keyframe)", softReload: true }),
+      expect.objectContaining({
+        label: "Move layer (new keyframe)",
+        keyframeAction: "add",
+        softReload: true,
+      }),
     );
     expect(commitMutation.mock.calls.map(([, mutation]) => mutation.type)).not.toContain(
       "add-motion-path-point",