@hyperframes/studio 0.8.115 → 0.8.116

package/src/hooks/gsapParsedTween.test.ts

@@ -0,0 +1,62 @@
+// @vitest-environment happy-dom
+import { gsap } from "gsap";
+import { afterEach, describe, expect, it } from "vitest";
+import { findParsedTween, parsedImplicitEndValue } from "./gsapParsedTween";
+import { liveTween, previewWith, tween } from "./gsapParsedTween.test-helpers";
+
+type Parsed = Parameters<typeof parsedImplicitEndValue>[0];
+const el = document.createElement("div");
+const part = (start: number, ends?: Record<string, [number, number]>) =>
+  liveTween(el, { start, duration: 1, vars: { x: 0 }, ends });
+const keyframed = (parts: unknown[]) =>
+  liveTween(el, { start: 0, duration: 2, vars: { keyframes: [] } }, { parts }) as Parsed;
+
+describe("parsedImplicitEndValue", () => {
+  it("reads a flat tween's own start and end", () => {
+    const value = parsedImplicitEndValue(part(0, { x: [-60, 0] }) as Parsed);
+    expect([value("x", "start"), value("x", "end")]).toEqual([-60, 0]);
+  });
+
+  it("reads a keyframed tween's start from its first part and its end from its last", () => {
+    const value = parsedImplicitEndValue(
+      keyframed([part(0, { x: [0, 50] }), part(1, { x: [50, 120] })]),
+    );
+    expect([value("x", "start"), value("x", "end")]).toEqual([0, 120]);
+  });
+
+  it("refuses when the part nearest that end is not initialised, rather than read an earlier one", () => {
+    const value = parsedImplicitEndValue(keyframed([part(0, { x: [0, 50] }), part(1)]));
+    expect(value("x", "end")).toBeNull();
+  });
+
+  it("has no value without a parsed tween", () => {
+    expect(parsedImplicitEndValue(null)("x", "start")).toBeNull();
+  });
+});
+
+describe("findParsedTween", () => {
+  afterEach(() => document.body.replaceChildren());
+
+  it("takes the flat tween an edit names, not a keyframed tween at the same start", () => {
+    const fade = liveTween(el, { start: 0, duration: 2, vars: { keyframes: {}, ease: "none" } });
+    const slide = liveTween(el, { start: 0, duration: 2, vars: { x: 300 } });
+    const edit = tween({ method: "to", properties: { x: 300 }, resolvedStart: 0, duration: 2 });
+    expect(findParsedTween(previewWith(el, [fade, slide]), el, edit)).toBe(slide);
+  });
+
+  it("parses a to() tween the playhead has not reached, from its authored start", () => {
+    const box = document.body.appendChild(document.createElement("div"));
+    box.id = "box";
+    const timeline = gsap.timeline({ paused: true }).to(box, { x: 300, duration: 1 }, 2);
+    timeline.seek(0.5);
+    gsap.set(box, { x: 40 });
+    const iframe = { contentWindow: { __timelines: { main: timeline }, gsap } };
+    const edit = tween({ method: "to", properties: { x: 300 }, resolvedStart: 2, duration: 1 });
+
+    const parsed = findParsedTween(iframe as unknown as HTMLIFrameElement, box, edit);
+
+    expect(parsedImplicitEndValue(parsed)("x", "start")).toBe(0);
+    expect([gsap.getProperty(box, "x"), timeline.time()]).toEqual([40, 0.5]);
+    timeline.kill();
+  });
+});

package/src/hooks/gsapParsedTween.ts

@@ -0,0 +1,243 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { elementTargets } from "../utils/elementGsap";
+import { resolveTweenStart } from "../utils/globalTimeCompiler";
+import type { ImplicitEndValue } from "./gsapValueAtPlayhead";
+
+// GSAP 3 internals: a property tween in a tween's `_pt` chain; CSSPlugin keeps its own under `d._pt`.
+interface PropTween {
+  p?: string;
+  s?: number;
+  c?: number;
+  d?: { _pt?: PropTween };
+  _next?: PropTween;
+}
+interface ParsedTween {
+  _pt?: PropTween;
+  _from?: boolean;
+  _initted?: boolean;
+  vars?: Record<string, unknown>;
+  parent?: {
+    vars?: { defaults?: { ease?: unknown } };
+    time?: () => number;
+    seek?: (time: number, suppressEvents?: boolean) => unknown;
+    getChildren?: (nested?: boolean, tweens?: boolean, timelines?: boolean) => ParsedTween[];
+  };
+  timeline?: { getChildren?: () => ParsedTween[] };
+  targets?: () => unknown[];
+  startTime?: () => number;
+  duration?: () => number;
+}
+interface GsapWindow {
+  gsap?: {
+    defaults?: () => { ease?: unknown };
+    getProperty?: (target: Element, prop: string) => unknown;
+    set?: (target: Element, vars: Record<string, unknown>) => void;
+    parseEase?: (name: string) => unknown;
+  };
+  __timelines?: Record<string, { getChildren?: (nested: boolean) => ParsedTween[] }>;
+}
+
+// `scale` parses into the two longhands, which always share a start and end for a `scale` tween.
+const PARSED_NAME: Record<string, string> = { scale: "scaleX", rotate: "rotation" };
+
+function findPropTween(pt: PropTween | undefined, prop: string): PropTween | null {
+  for (let node = pt; node; node = node._next) {
+    if (node.p === prop && typeof node.s === "number" && typeof node.c === "number") return node;
+    const nested = findPropTween(node.d?._pt, prop);
+    if (nested) return nested;
+  }
+  return null;
+}
+
+/** `[start, end]` of `prop` in one initialised tween; a from() tween runs its pair backwards. */
+function endsIn(tween: ParsedTween, prop: string): [number, number] | null {
+  const pt = findPropTween(tween._pt, PARSED_NAME[prop] ?? prop);
+  if (!pt) return null;
+  const pair: [number, number] = [pt.s!, pt.s! + pt.c!];
+  return tween._from ? [pair[1], pair[0]] : pair;
+}
+
+/** The live tween GSAP built from `anim`: same element, start and channels, parsed. */
+// fallow-ignore-next-line complexity
+export function findParsedTween(
+  iframe: HTMLIFrameElement | null,
+  element: Element,
+  anim: GsapAnimation,
+): ParsedTween | null {
+  const win = iframe?.contentWindow as GsapWindow | null;
+  const start = resolveTweenStart(anim);
+  if (!win?.__timelines || start == null) return null;
+  const steps = anim.keyframes?.keyframes.map((kf) => kf.properties) ?? [anim.properties];
+  const props = [...new Set(steps.flatMap((step) => Object.keys(step)))];
+  const keyframed = Boolean(anim.keyframes);
+  for (const timeline of Object.values(win.__timelines)) {
+    for (const tween of timeline?.getChildren?.(true) ?? []) {
+      const targets = (tween.targets?.() ?? []) as Array<{ id?: unknown }>;
+      if (!targets.includes(element) && !targets.some((t) => element.id && t.id === element.id))
+        continue;
+      if (!startsAt(tween, start)) continue;
+      const vars = tween.vars ?? {};
+      const carries = keyframed ? "keyframes" in vars : props.some((p) => p in vars);
+      if (!carries || !((tween.duration?.() ?? 0) > 0)) continue;
+      parseUnplayed(win, element, tween, props);
+      return tween;
+    }
+  }
+  return null;
+}
+
+/** GSAP's startTime() counts the tween's `delay`; the file's parse does not. */
+function startsAt(tween: ParsedTween, start: number): boolean {
+  const delay = Number(tween.vars?.delay) || 0;
+  return Math.abs((tween.startTime?.() ?? Number.NaN) - delay - start) <= 1e-3;
+}
+
+/** `anim` timed as GSAP runs it: its start with any delay, a duration it leaves to GSAP filled in. */
+export function withLiveTiming(anim: GsapAnimation, tween: ParsedTween | null): GsapAnimation {
+  const start = tween?.startTime?.();
+  return {
+    ...anim,
+    ...(Number.isFinite(start) && { resolvedStart: start }),
+    ...(anim.duration == null && tween && { duration: tween.duration?.() }),
+  };
+}
+
+/** GSAP parses a to() tween only when the playhead first passes it, and a soft reload resets that.
+ *  Play its timeline from the tween's start (so earlier tweens set its start value) to its end and
+ *  back, its channels cleared first; then restore every styled element's attributes and GSAP cache. */
+function parseUnplayed(win: GsapWindow, element: Element, tween: ParsedTween, props: string[]) {
+  const seek = !isParsed(tween) && seekable(win, tween);
+  if (!seek) return;
+  const { parent, gsap } = seek;
+  const before = layerStates(tween, element);
+  const now = parent.time();
+  const start = tween.startTime?.() ?? 0;
+  gsap.set(element, { clearProps: props.join(",") });
+  // Re-read now, so GSAP rebuilds its transform cache from the cleared element before the seek.
+  for (const p of props) gsap.getProperty(element, p);
+  try {
+    parent.seek(start, true);
+    parent.seek(start + (tween.duration?.() ?? 0), true);
+  } finally {
+    parent.seek(now, true);
+    restore(before);
+  }
+}
+
+function isParsed(tween: ParsedTween): boolean {
+  const parts = tween.timeline?.getChildren?.() ?? [];
+  return Boolean(tween._initted) && parts.every((part) => part._initted);
+}
+
+type GsapTools = {
+  getProperty: (el: Element, p: string) => unknown;
+  set: (el: Element, v: Record<string, unknown>) => void;
+};
+
+function seekable(win: GsapWindow, tween: ParsedTween) {
+  const { parent } = tween;
+  const gsap = win.gsap;
+  if (!parent?.seek || !parent.time || !gsap?.getProperty || !gsap.set) return null;
+  return {
+    parent: { seek: parent.seek.bind(parent), time: parent.time.bind(parent) },
+    gsap: { getProperty: gsap.getProperty.bind(gsap), set: gsap.set.bind(gsap) } as GsapTools,
+  };
+}
+
+type Layer = Element & { _gsap?: Record<string, unknown> };
+
+function layerStates(tween: ParsedTween, element: Element) {
+  const layers = new Set<Layer>([element]);
+  for (const child of tween.parent?.getChildren?.(true, true, false) ?? [])
+    for (const target of elementTargets(child)) layers.add(target);
+  return [...layers].map((layer) => ({
+    layer,
+    attributes: new Map([...layer.attributes].map((a) => [a.name, a.value])),
+    cache: layer._gsap && { ...layer._gsap },
+  }));
+}
+
+function restore(states: ReturnType<typeof layerStates>) {
+  for (const { layer, attributes, cache } of states) {
+    restoreAttributes(layer, attributes);
+    if (cache && layer._gsap) restoreCache(layer._gsap, cache);
+  }
+}
+
+function restoreAttributes(layer: Element, attributes: Map<string, string>) {
+  for (const { name } of [...layer.attributes])
+    if (!attributes.has(name)) layer.removeAttribute(name);
+  for (const [name, value] of attributes)
+    if (layer.getAttribute(name) !== value) layer.setAttribute(name, value);
+}
+
+function restoreCache(live: Record<string, unknown>, cache: Record<string, unknown>) {
+  for (const key of Object.keys(live)) if (!(key in cache)) delete live[key];
+  Object.assign(live, cache);
+}
+
+/** Start and end values from GSAP's own parse of the tween, as loaded from the file. Null when
+ *  GSAP has not initialised that part of the tween yet: the caller refuses rather than guess. */
+export function parsedImplicitEndValue(tween: ParsedTween | null): ImplicitEndValue {
+  return (prop, end) => {
+    if (!tween) return null;
+    for (const part of partsFrom(tween, end)) {
+      const pair = endsIn(part, prop);
+      if (pair) return end === "start" ? pair[0] : pair[1];
+      // The nearest part animating `prop` is not initialised: an earlier one would be a wrong value.
+      if (prop in (part.vars ?? {})) return null;
+    }
+    return null;
+  };
+}
+
+/** A keyframed tween's parts, nearest `end` first; a flat tween is its own one part. */
+function partsFrom(tween: ParsedTween, end: "start" | "end"): ParsedTween[] {
+  const parts = tween.timeline?.getChildren?.() ?? [];
+  if (parts.length === 0) return [tween];
+  return end === "start" ? parts : [...parts].reverse();
+}
+
+/** The ease GSAP resolved for a flat tween that authors none: its timeline's default, else GSAP's. */
+export function parsedTweenEase(iframe: HTMLIFrameElement | null, tween: ParsedTween | null) {
+  if (!tween) return null;
+  const win = iframe?.contentWindow as GsapWindow | null;
+  const ease =
+    tween.vars?.ease ?? tween.parent?.vars?.defaults?.ease ?? win?.gsap?.defaults?.().ease;
+  if (typeof ease === "string") return ease;
+  const named = (name: string) => win?.gsap?.parseEase?.(name) === ease;
+  return typeof ease === "function" ? (BUILT_IN_EASES.find(named) ?? null) : null;
+}
+
+// GSAP holds a resolved ease, its own default included, as the function parseEase returns.
+const BUILT_IN_EASES = [
+  "none",
+  ...[
+    "power1",
+    "power2",
+    "power3",
+    "power4",
+    "sine",
+    "expo",
+    "circ",
+    "back",
+    "elastic",
+    "bounce",
+  ].flatMap((e) => [`${e}.in`, `${e}.out`, `${e}.inOut`]),
+];
+
+/** An array of keyframe steps at the exact percentages GSAP times them; the parse rounds them. */
+export function withExactStepTimes(anim: GsapAnimation, tween: ParsedTween | null): GsapAnimation {
+  const data = anim.keyframes;
+  const parts = tween?.timeline?.getChildren?.() ?? [];
+  const total = tween?.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;
+  const keyframes = data.keyframes.map((kf, i) => ({
+    ...kf,
+    percentage: Math.round(ends[i]! * 100000) / 1000,
+  }));
+  return { ...anim, keyframes: { ...data, keyframes } };
+}

package/src/hooks/gsapPositionDetection.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, describe, expect, it } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { usePlayerStore } from "../player/store/playerStore";
+import { tween } from "./gsapParsedTween.test-helpers";
+import { findGsapPositionAnimation, pickClosestToPlayhead } from "./gsapPositionDetection";
+
+afterEach(() => usePlayerStore.setState({ currentTime: 0 }));
+
+const slide = (
+  id: string,
+  resolvedStart: number,
+  duration: number,
+  fields: Partial<GsapAnimation> = {},
+) => tween({ id, method: "to", properties: { x: 10 }, resolvedStart, duration, ...fields });
+const keyed = (...percentages: number[]) => ({
+  keyframes: {
+    format: "object-array" as const,
+    keyframes: percentages.map((percentage) => ({ percentage, properties: { x: percentage } })),
+  },
+});
+
+describe("pickClosestToPlayhead", () => {
+  it.each([
+    ["the one spanning the playhead", 1.5, [slide("a", 0, 1), slide("b", 1, 1)], "b"],
+    ["the nearer end when none spans it", 5, [slide("a", 0, 1), slide("b", 2, 2)], "b"],
+    [
+      "the one whose file states the playhead's value",
+      1,
+      [slide("a", 0, 1), slide("b", 1, 1)],
+      "a",
+    ],
+    [
+      "the later one when both state it",
+      1,
+      [slide("a", 0, 2, keyed(0, 50, 100)), slide("b", 0.5, 1, keyed(0, 50, 100))],
+      "b",
+    ],
+    [
+      "the one with more keyframes on a tie",
+      5,
+      [slide("a", 0, 1, keyed(0, 100)), slide("b", 0, 1, keyed(0, 50, 100))],
+      "b",
+    ],
+  ])("picks %s", (_, time, anims, id) => {
+    usePlayerStore.setState({ currentTime: time });
+    expect(pickClosestToPlayhead(anims)?.id).toBe(id);
+  });
+});
+
+describe("findGsapPositionAnimation", () => {
+  it.each([
+    [
+      "the tween spanning the playhead",
+      1.5,
+      undefined,
+      [slide("a", 0, 1, keyed(0, 100)), slide("b", 1, 1)],
+      "b",
+    ],
+    ["the nearer tween", 9, undefined, [slide("a", 0, 1), slide("b", 6, 1)], "b"],
+    [
+      "the selected target's tween",
+      0.5,
+      "#box",
+      [slide("a", 0, 1, { targetSelector: "#card", ...keyed(0, 100) }), slide("b", 0, 1)],
+      "b",
+    ],
+    [
+      "a tween on one target over a shared one",
+      0.5,
+      undefined,
+      [slide("a", 0, 1, { targetSelector: "#box, #card" }), slide("b", 0, 1)],
+      "b",
+    ],
+  ])("prefers %s", (_, time, selector, anims, id) => {
+    usePlayerStore.setState({ currentTime: time });
+    expect(findGsapPositionAnimation(anims, selector)?.id).toBe(id);
+  });
+});

package/src/hooks/gsapPositionDetection.ts

@@ -7,7 +7,7 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
-import { getIframeGsap, queryIframeElement } from "./gsapShared";
+import { getIframeGsap, KEYFRAME_PCT_MATCH, queryIframeElement } from "./gsapShared";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 
 // fallow-ignore-next-line complexity
@@ -47,52 +47,71 @@ export function findGsapPositionAnimation(
   if (animations.length === 0) return null;
   const currentTime = usePlayerStore.getState().currentTime;
 
-  const scored = animations
-    .filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1)
-    .map((a) => {
-      let score = 0;
-      if (animHasPosition(a)) score += 10;
-      if (a.keyframes) score += 5;
-      if (selector && a.targetSelector === selector) score += 8;
-      else if (a.targetSelector.includes(",")) score -= 5;
-      const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-      const dur = a.duration ?? 0;
-      if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 50;
-      else
-        score -= Math.round(
-          Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5,
-        );
-      return { anim: a, score };
-    });
+  const scored = animations.filter(animHasPosition).map((a) => {
+    let score = 0;
+    if (a.keyframes) score += 5;
+    if (selector && a.targetSelector === selector) score += 8;
+    else if (a.targetSelector.includes(",")) score -= 5;
+    return { anim: a, score: score + playheadProximity(a, currentTime) };
+  });
   scored.sort((a, b) => b.score - a.score);
-  return scored[0]?.anim ?? animations[0];
+  return scored[0]?.anim ?? null;
+}
+
+function playheadProximity(a: GsapAnimation, currentTime: number): number {
+  const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+  const dur = a.duration ?? 0;
+  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);
+}
+
+/** Whether the file states `anim`'s value at `time`; a tween's implicit start is GSAP's current value. */
+function statesValueAt(anim: GsapAnimation, time: number): boolean {
+  const duration = resolveTweenDuration(anim);
+  if (!(duration > 0)) return false;
+  const pct = ((time - (resolveTweenStart(anim) ?? 0)) / duration) * 100;
+  const near = (keyframe: number) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
+  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near(kf.percentage));
+  if (anim.method === "from") return near(0);
+  return near(100) || (anim.method === "fromTo" && near(0));
 }
 
 /**
  * From a set of candidate tweens, pick the one whose time range is closest to
  * the current playhead. A tween that *contains* the playhead wins outright;
  * otherwise the nearest endpoint wins. This ensures a drag at t=6s edits (or
- * extends) the 4s tween, not the 1.5s one. Tie-break: most keyframes (so a
- * gesture-recorded tween beats a stub when both are equidistant).
+ * extends) the 4s tween, not the 1.5s one. Ties: the one whose file states a value at the
+ * playhead (the later one, which renders, if both do), then most keyframes.
  */
 // fallow-ignore-next-line complexity
 export function pickClosestToPlayhead(anims: GsapAnimation[]): GsapAnimation | null {
   if (anims.length <= 1) return anims[0] ?? null;
   const ct = usePlayerStore.getState().currentTime;
   return anims.reduce((best, a) => {
-    const s = resolveTweenStart(a) ?? 0;
-    const e = s + resolveTweenDuration(a);
-    const dist = ct >= s && ct <= e ? 0 : Math.min(Math.abs(ct - s), Math.abs(ct - e));
-    const bestS = resolveTweenStart(best) ?? 0;
-    const bestE = bestS + resolveTweenDuration(best);
-    const bestDist =
-      ct >= bestS && ct <= bestE ? 0 : Math.min(Math.abs(ct - bestS), Math.abs(ct - bestE));
+    const dist = playheadDistance(a, ct);
+    const bestDist = playheadDistance(best, ct);
     if (dist < bestDist) return a;
-    if (
-      dist === bestDist &&
-      (a.keyframes?.keyframes.length ?? 0) > (best.keyframes?.keyframes.length ?? 0)
-    )
-      return a;
+    const stated = dist === 0 && bestDist === 0 ? statedValueWinner(a, best, ct) : null;
+    if (stated) return stated;
+    if (dist === bestDist && keyframeCount(a) > keyframeCount(best)) return a;
     return best;
   });
 }
+
+function playheadDistance(anim: GsapAnimation, time: number): number {
+  const s = resolveTweenStart(anim) ?? 0;
+  const e = s + resolveTweenDuration(anim);
+  return time >= s && time <= e ? 0 : Math.min(Math.abs(time - s), Math.abs(time - e));
+}
+
+function statedValueWinner(a: GsapAnimation, b: GsapAnimation, time: number) {
+  const [mine, theirs] = [statesValueAt(a, time), statesValueAt(b, time)];
+  if (mine !== theirs) return mine ? a : b;
+  const [s, bS] = [resolveTweenStart(a) ?? 0, resolveTweenStart(b) ?? 0];
+  if (mine && s !== bS) return s > bS ? a : b;
+  return null;
+}
+
+function keyframeCount(anim: GsapAnimation): number {
+  return anim.keyframes?.keyframes.length ?? 0;
+}

package/src/hooks/gsapResizeDropPoint.test.ts

@@ -148,17 +148,18 @@ function positionAnimation(
   } as unknown as GsapAnimation;
 }
 
-/** Every x/y a run wrote, in commit order. */
+/** Every x/y a run wrote AT THE PLAYHEAD (percentage 0 here), in commit order. */
 function persistedPositions(calls: unknown[][]): Array<{ x?: number; y?: number }> {
   const written: Array<{ x?: number; y?: number }> = [];
   for (const call of calls) {
     const mutation = call[1] as {
       properties?: Record<string, number>;
-      keyframes?: Array<{ properties: Record<string, number> }>;
+      keyframes?: Array<{ percentage: number; properties: Record<string, number> }>;
       x?: number;
       y?: number;
     };
-    const sources = [mutation.properties, ...(mutation.keyframes ?? []).map((k) => k.properties)];
+    const atPlayhead = (mutation.keyframes ?? []).filter((k) => k.percentage === 0);
+    const sources = [mutation.properties, ...atPlayhead.map((k) => k.properties)];
     if (mutation.x != null || mutation.y != null) written.push({ x: mutation.x, y: mutation.y });
     for (const source of sources) {
       if (source && (source.x != null || source.y != null))

package/src/hooks/gsapResizeElementSize.test.tsx

@@ -37,6 +37,7 @@ const widthTween = {
   position: 0,
   resolvedStart: 0,
   duration: 4,
+  ease: "none",
 } as unknown as GsapAnimation;
 
 function mount(animations: GsapAnimation[]) {

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -23,17 +23,13 @@
  * the way through. A sweep across rotations is what tells us it is.
  */
 import { afterEach, expect, it, vi } from "vitest";
-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);
 
 const LAYOUT = { left: 120, top: 520 };
 
@@ -57,20 +53,6 @@ function renderRect(pose: Pose, rotationDeg: number) {
 
 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;
-}
-
 interface Case {
   name: string;
   /** The element's untransformed CSS box. */
@@ -99,18 +81,24 @@ const ROTATIONS = [0, -8, 45, -47, 90, 180];
  * the size routes here however it looks from the animation list.
  */
 const ROUTES = {
-  "scale tween": { animations: () => [tween("#el-scale", { scale: 1 }, 2)], settles: true },
+  "scale tween": {
+    animations: () => [elTween("#el-scale", { scale: 1 }, 2, "none")],
+    settles: true,
+  },
   "scale longhands": {
-    animations: () => [tween("#el-scale", { scaleX: 1, scaleY: 1 }, 2)],
+    animations: () => [elTween("#el-scale", { scaleX: 1, scaleY: 1 }, 2, "none")],
     settles: true,
   },
-  "scale instant hold": { animations: () => [tween("#el-scale", { scale: 1 }, 0)], settles: false },
+  "scale instant hold": {
+    animations: () => [elTween("#el-scale", { scale: 1 }, 0, "none")],
+    settles: false,
+  },
   "size tween": {
-    animations: () => [tween("#el-size", { width: 630, height: 408 }, 2)],
+    animations: () => [elTween("#el-size", { width: 630, height: 408 }, 2, "none")],
     settles: false,
   },
   "size instant hold": {
-    animations: () => [tween("#el-size", { width: 630, height: 408 }, 0)],
+    animations: () => [elTween("#el-size", { width: 630, height: 408 }, 0, "none")],
     settles: false,
   },
 } as const;