@hyperframes/studio 0.8.127 → 0.8.128

package/dist/player.js

@@ -1,8 +1,8 @@
 import {
   Player
-} from "./chunk-246VB2G3.js";
+} from "./chunk-DRVWEPO5.js";
 import "./chunk-5VSXRGIX.js";
-import "./chunk-5EKWJZLM.js";
+import "./chunk-TDWGXBUT.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Player

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.127",
+  "version": "0.8.128",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.127",
-    "@hyperframes/sdk": "0.8.127",
-    "@hyperframes/player": "0.8.127",
-    "@hyperframes/core": "0.8.127",
-    "@hyperframes/shader-transitions": "0.8.127",
-    "@hyperframes/studio-server": "0.8.127"
+    "@hyperframes/player": "0.8.128",
+    "@hyperframes/parsers": "0.8.128",
+    "@hyperframes/sdk": "0.8.128",
+    "@hyperframes/shader-transitions": "0.8.128",
+    "@hyperframes/studio-server": "0.8.128",
+    "@hyperframes/core": "0.8.128"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.127"
+    "@hyperframes/producer": "0.8.128"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.tsx

@@ -11,7 +11,7 @@ import {
   isPlayheadWithinTween,
   type EnableKeyframesSession,
 } from "../hooks/useEnableKeyframes";
-import { computeElementPercentage, KEYFRAME_PCT_MATCH } from "../hooks/gsapShared";
+import { computeElementPercentage, playsNear } from "../hooks/gsapShared";
 import { useKeyframeKeyboard } from "../hooks/useKeyframeKeyboard";
 import {
   getNextTimelineZoomPercent,
@@ -73,9 +73,8 @@ const NO_KEYFRAME_TOGGLE: KeyframeToggleState = {
 function isMotionPathEndpoint(animation: GsapAnimation | undefined, percentage: number): boolean {
   if (!animation?.keyframes) return false;
   const keyframes = animation.keyframes.keyframes;
-  return (
-    Math.abs((keyframes[0]?.percentage ?? -Infinity) - percentage) <= KEYFRAME_PCT_MATCH ||
-    Math.abs((keyframes.at(-1)?.percentage ?? Infinity) - percentage) <= KEYFRAME_PCT_MATCH
+  return [keyframes[0], keyframes.at(-1)].some(
+    (keyframe) => keyframe && playsNear(animation, keyframe.percentage, percentage),
   );
 }
 
@@ -93,14 +92,14 @@ function resolveKeyframeToggleState(
   if (!animation?.keyframes) return NO_KEYFRAME_TOGGLE;
 
   const isMotionPath = Boolean(arcAnimation);
-  if (!isPlayheadWithinTween(animation, currentTime, session.domEditSelection)) {
+  if (!isPlayheadWithinTween(animation, currentTime)) {
     return { state: "inactive", isMotionPath, pathEndpoint: false, willExtend: true };
   }
 
   const percentage = computeElementPercentage(currentTime, session.domEditSelection, animation);
   const pathEndpoint = isMotionPathEndpoint(arcAnimation, percentage);
-  const active = animation.keyframes.keyframes.some(
-    (keyframe) => Math.abs(keyframe.percentage - percentage) <= KEYFRAME_PCT_MATCH,
+  const active = animation.keyframes.keyframes.some((keyframe) =>
+    playsNear(animation, keyframe.percentage, percentage),
   );
   return {
     state: pathEndpoint ? "none" : active ? "active" : "inactive",

package/src/components/editor/commitPreflightHandles.test.tsx

@@ -207,6 +207,13 @@ async function select(animations: GsapAnimation[] | null, props: Partial<EditorP
   return view;
 }
 
+async function selectLoopedPair() {
+  const a = resolved(element("a"));
+  const b = resolved(element("b"));
+  const view = await select([loop({ x: 120 }, "#a")], { selection: a, groups: [a, b] });
+  return { a, b, ...view };
+}
+
 describe("handles follow what Studio would commit", () => {
   beforeEach(() => {
     HTMLElement.prototype.setPointerCapture = () => undefined;
@@ -442,6 +449,31 @@ describe("handles follow what Studio would commit", () => {
     expect(spies.onManualDragStart).not.toHaveBeenCalled();
   });
 
+  it("re-checks only the members that changed when the group is handed back anew", async () => {
+    const { a, b, seen, render } = await selectLoopedPair();
+    const [narrowedA, narrowedB] = seen.groups;
+
+    render({ selection: a, groups: [a, b] });
+    expect(seen.groups[0]).toBe(narrowedA);
+    expect(seen.groups[1]).toBe(narrowedB);
+    const movedA = resolved(a.element);
+    render({ selection: movedA, groups: [movedA, b] });
+    expect(seen.groups[0]).not.toBe(narrowedA);
+    expect(flags(seen.groups[0]!)[0]).toBe(false);
+    expect(seen.groups[1]).toBe(narrowedB);
+  });
+
+  it("checks again on a new cache version even when that re-read fails", async () => {
+    const { a, b, seen, render } = await selectLoopedPair();
+    const [narrowedA] = seen.groups;
+
+    parses.fetch.mockResolvedValueOnce(null);
+    render({ selection: a, groups: [a, b], version: 1 });
+    await settle();
+    expect(seen.groups[0]).not.toBe(narrowedA);
+    expect(flags(seen.groups[0]!)[0]).toBe(false);
+  });
+
   it.each([
     ["rotation", loop({ rotation: 90 }), [true, true, false], { dots: 4, rotate: false }],
     ["resize", loop({ width: 320, height: 90 }), [true, false, true], { dots: 0, rotate: true }],

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   collectDomEditLayerItems,
   resolveDomEditSelection,
@@ -100,6 +100,37 @@ describe("resolveDomEditSelection — hfId from data-hf-id", () => {
   });
 });
 
+describe("resolveDomEditSelection — source probe on re-resolve", () => {
+  afterEach(() => vi.unstubAllGlobals());
+  const probing = { activeCompositionPath: "index.html", isMasterView: true, projectId: "p" };
+
+  it("asks the server once per node and target; re-resolving the same pair keeps the answer", async () => {
+    const fetchMock = vi.fn(() =>
+      Promise.resolve({ ok: true, json: () => Promise.resolve({ exists: [false] }) }),
+    );
+    vi.stubGlobal("fetch", fetchMock);
+    const el = document.createElement("div");
+    el.id = "generated";
+    document.body.appendChild(el);
+
+    const first = await resolveDomEditSelection(el, probing);
+    const again = await resolveDomEditSelection(el, { ...probing, previous: first });
+    el.id = "renamed";
+    await resolveDomEditSelection(el, { ...probing, previous: again });
+    el.id = "generated";
+    const replaced = document.createElement("div");
+    replaced.id = "generated";
+    el.replaceWith(replaced);
+    await resolveDomEditSelection(replaced, { ...probing, previous: again });
+    replaced.remove();
+
+    expect(first?.existsInSource).toBe(false);
+    expect(again?.existsInSource).toBe(false);
+    expect(again?.capabilities.canMove).toBe(false);
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+});
+
 describe("resolveDomEditSelection — data-hf-group capture", () => {
   // <div id="parent"><div data-hf-group="Group 1"><div data-hf-group="Group 2">
   //   <span id="child"/></div></div></div>
@@ -236,17 +267,19 @@ describe("buildTextFieldChildLocator", () => {
   });
 });
 
-describe("collectDomEditLayerItems item budget", () => {
-  function documentWith(count: number): HTMLElement {
-    const root = document.createElement("div");
-    root.setAttribute("data-composition-id", "index.html");
-    for (let i = 0; i < count; i++) {
-      const child = document.createElement("div");
-      child.id = `el-${i}`;
-      root.append(child);
-    }
-    return root;
+function compositionWith(count: number, child: (el: HTMLElement, i: number) => void): HTMLElement {
+  const root = document.createElement("div");
+  root.setAttribute("data-composition-id", "index.html");
+  for (let i = 0; i < count; i++) {
+    const el = document.createElement("div");
+    child(el, i);
+    root.append(el);
   }
+  return root;
+}
+
+describe("collectDomEditLayerItems item budget", () => {
+  const documentWith = (count: number) => compositionWith(count, (el, i) => (el.id = `el-${i}`));
 
   it("returns the whole document by default", () => {
     // A default cap here silently truncated the marquee's candidate list: a drag
@@ -264,13 +297,7 @@ describe("collectDomEditLayerItems selector-index cost", () => {
   // Attached, unlike the fixture above: a detached subtree is invisible to
   // document.querySelectorAll, so the occurrence lookup would find nothing.
   function attachedRootWithSharedClass(count: number): HTMLElement {
-    const root = document.createElement("div");
-    root.setAttribute("data-composition-id", "index.html");
-    for (let i = 0; i < count; i++) {
-      const child = document.createElement("div");
-      child.className = "box";
-      root.append(child);
-    }
+    const root = compositionWith(count, (el) => (el.className = "box"));
     document.body.append(root);
     return root;
   }

package/src/components/editor/domEditingLayers.ts

@@ -1,4 +1,4 @@
-import { probeSourceElement } from "./probeSourceElement";
+import { knownSourceAnswer, probeSourceElement, type ProbeTarget } from "./probeSourceElement";
 import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
@@ -288,6 +288,7 @@ export async function resolveDomEditSelection(
     projectId?: string | null;
     skipSourceProbe?: boolean;
     exactTarget?: boolean;
+    previous?: DomEditSelection | null;
   },
 ): Promise<DomEditSelection | null> {
   if (!startEl) return null;
@@ -330,14 +331,14 @@ export async function resolveDomEditSelection(
       isCompositionRootLayer(current, doc, computedStyles);
     const textFields = collectDomEditTextFields(current);
     const isInsideLocked = Boolean(findClosestByAttribute(current, ["data-timeline-locked"]));
-    let existsInSource: boolean | undefined;
-    if (!options.skipSourceProbe && options.projectId && (current.id || selector || hfId)) {
-      const probeTarget: { id?: string; hfId?: string; selector?: string; selectorIndex?: number } =
-        {};
-      if (current.id) probeTarget.id = current.id;
-      if (hfId) probeTarget.hfId = hfId;
-      if (selector) probeTarget.selector = selector;
-      if (selectorIndex != null) probeTarget.selectorIndex = selectorIndex;
+    const probeTarget: ProbeTarget = {};
+    if (current.id) probeTarget.id = current.id;
+    if (hfId) probeTarget.hfId = hfId;
+    if (selector) probeTarget.selector = selector;
+    if (selectorIndex != null) probeTarget.selectorIndex = selectorIndex;
+    let existsInSource = knownSourceAnswer(options.previous, current, sourceFile, probeTarget);
+    const probe = existsInSource === undefined && !options.skipSourceProbe;
+    if (probe && options.projectId && (current.id || selector || hfId)) {
       existsInSource = await probeSourceElement(options.projectId, sourceFile, probeTarget);
     }
     const capabilities = resolveEditingAffordances(
@@ -380,6 +381,7 @@ export async function resolveDomEditSelection(
       computedStyles,
       textFields,
       capabilities,
+      existsInSource,
     };
   }
 

package/src/components/editor/domEditingTypes.ts

@@ -92,6 +92,7 @@ export interface DomEditSelection extends PatchTarget {
   computedStyles: Record<string, string>;
   textFields: DomEditTextField[];
   capabilities: DomEditCapabilities;
+  existsInSource?: boolean;
   gsapAnimations?: GsapAnimation[];
 }
 

package/src/components/editor/keyframeRetime.ts

@@ -14,6 +14,7 @@
  * Kept pure (no React/store/GSAP) so the trickiest math is unit-testable. The
  * caller supplies the resolved tween window + the drop's absolute time.
  */
+import { progressAtTime, timeAtProgress } from "../../utils/gsapKeyframeEases";
 
 export interface RetimeKeyframe {
   /** Tween-relative percentage (the writer/runtime key on this). */
@@ -92,6 +93,7 @@ function resolveFlatTweenBoundaryRetime(opts: {
  * - `draggedTweenPct`: identifies which keyframe is being dragged (closest match).
  * - `tweenStart` / `tweenDuration`: the tween's resolved absolute window.
  * - `dropAbsTime`: the drop's absolute time (handler converts clip-% → seconds).
+ * - `runEase`: the tween's run ease, which decides when each keyframe plays.
  */
 export function resolveKeyframeRetime(opts: {
   keyframes: ReadonlyArray<RetimeKeyframe>;
@@ -99,8 +101,9 @@ export function resolveKeyframeRetime(opts: {
   tweenStart: number;
   tweenDuration: number;
   dropAbsTime: number;
+  runEase?: string;
 }): KeyframeRetimeResult {
-  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
+  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime, runEase } = opts;
   if (tweenDuration <= 0) return { kind: "noop" };
   const tweenEnd = tweenStart + tweenDuration;
 
@@ -124,7 +127,8 @@ export function resolveKeyframeRetime(opts: {
     // Round here, not at the return: the no-op test below and the value written
     // to source must be the same number. The resize branch already rounds, so
     // this keeps both write paths at the authored 3dp precision.
-    const toTweenPct = round3(clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100));
+    const dropTimePct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
+    const toTweenPct = round3(progressAtTime(runEase, dropTimePct));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }
@@ -154,8 +158,11 @@ export function resolveKeyframeRetime(opts: {
   // survive verbatim (no rebuilt keyframes array).
   const pctRemap: KeyframePctRemap[] = keyframes.map((kf, i) => {
     const absTime =
-      i === draggedIdx ? dropAbsTime : tweenStart + (kf.percentage / 100) * tweenDuration;
-    return { from: kf.percentage, to: round3(((absTime - newStart) / newDuration) * 100) };
+      i === draggedIdx
+        ? dropAbsTime
+        : tweenStart + (timeAtProgress(runEase, kf.percentage) / 100) * tweenDuration;
+    const newTimePct = ((absTime - newStart) / newDuration) * 100;
+    return { from: kf.percentage, to: round3(progressAtTime(runEase, newTimePct)) };
   });
 
   return {

package/src/components/editor/probeSourceElement.ts

@@ -1,7 +1,23 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { studioApiFetch } from "../../utils/studioApiFetch";
+import type { DomEditSelection } from "./domEditingTypes";
 
-type ProbeTarget = { id?: string; hfId?: string; selector?: string; selectorIndex?: number };
+export type ProbeTarget = { id?: string; hfId?: string; selector?: string; selectorIndex?: number };
+
+export function knownSourceAnswer(
+  previous: DomEditSelection | null | undefined,
+  element: HTMLElement,
+  sourceFile: string,
+  target: ProbeTarget,
+): boolean | undefined {
+  if (!previous || previous.element !== element || previous.sourceFile !== sourceFile) return;
+  const same =
+    previous.id === target.id &&
+    previous.hfId === target.hfId &&
+    previous.selector === target.selector &&
+    previous.selectorIndex === target.selectorIndex;
+  return same ? previous.existsInSource : undefined;
+}
 
 interface PendingProbe {
   target: ProbeTarget;

package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx

@@ -79,24 +79,14 @@ function mountMirrorHarness(history: {
   moveCoalesceKeys: string[];
   records: RecordedWrite[];
 }) {
-  const record = (
-    label: string,
-    coalesceKey: string,
-    _coalesceMs: number | undefined,
-    after: string,
-  ) => {
+  const record = (label: string, coalesceKey: string, after: string) => {
     history.records.push({ label, coalesceKey, after });
     history.fileContent.current = after;
   };
 
-  const onMoveElements: TimelineEditCallbacks["onMoveElements"] = (
-    _edits,
-    coalesceKey,
-    _operation,
-    coalesceMs,
-  ) => {
+  const onMoveElements: TimelineEditCallbacks["onMoveElements"] = (_edits, coalesceKey) => {
     history.moveCoalesceKeys.push(coalesceKey ?? "<none>");
-    record("Move timeline clips", coalesceKey ?? "<none>", coalesceMs, "C-move");
+    record("Move timeline clips", coalesceKey ?? "<none>", "C-move");
   };
 
   const api: Partial<HarnessApi> = {};
@@ -104,7 +94,7 @@ function mountMirrorHarness(history: {
     const { handleDomZIndexReorderCommit } = useElementLifecycleOps(
       makeLifecycleOpsParams({
         commitDomEditPatchBatches: async (_batches, options) => {
-          record(options.label, options.coalesceKey, options.coalesceMs, "B-z");
+          record(options.label, options.coalesceKey, "B-z");
           return { durable: true, allMatched: true, changed: true };
         },
       }),

package/src/components/nle/useCanvasZOrderTimelineMirror.ts

@@ -163,13 +163,6 @@ function useMirrorLaneMoveCommit(): (
           // stacking sync must not re-trigger and fight the just-set z values.
         },
         coalesceKey,
-        // Unbounded fold window: this record lands only AFTER the z persist's
-        // server round-trip resolved, so the gap between the gesture's two
-        // records exceeds editHistory's 300ms default under real latency and
-        // the fold would silently split into two undo entries. The shared key
-        // is unique per gesture (zReorderCoalesceKey's gesture seq), so the
-        // unbounded window can never merge two distinct user actions.
-        Number.POSITIVE_INFINITY,
       );
     },
     [onMoveElements],

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -679,6 +679,33 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     view.unmount();
   });
 
+  it("retimes a duration-less tween's keyframe in the window GSAP plays it, not the clip", async () => {
+    const durationless = { ...authoredInteriorAnimation(), duration: undefined };
+    mocks.animations = [durationless];
+    usePlayerStore.setState({ gsapAnimations: new Map([["box", [durationless]]]) });
+    const view = renderCallbacks();
+
+    // GSAP plays it 0-0.5 s of the 1 s clip, so a drop at 0.4 s is 80% of the tween.
+    await view.callbacks.onMoveKeyframe?.(
+      "box",
+      {
+        percentage: 25,
+        propertyGroup: "position",
+        tweenPercentage: 50,
+        animationId: durationless.id,
+      },
+      40,
+    );
+
+    expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith(
+      durationless.id,
+      50,
+      80,
+      mocks.selection,
+    );
+    view.unmount();
+  });
+
   // A drag starts on whatever diamond the pointer is over, which need not be the
   // selected element. Resolving against the selection would retime the selected
   // element's tween and commit it through the selected element's file.
@@ -777,46 +804,4 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     expect(mocks.actions.handleGsapMoveKeyframe).not.toHaveBeenCalled();
     view.unmount();
   });
-
-  it("uses the clip timing basis when retiming a duration-less tween", async () => {
-    const durationless = {
-      ...authoredInteriorAnimation(),
-      position: 3.2,
-      resolvedStart: 3.2,
-      duration: undefined,
-    };
-    const wideElement = { ...element, start: 10.94, duration: 16.26 };
-    mocks.animations = [durationless];
-    usePlayerStore.setState({
-      elements: [wideElement],
-      gsapAnimations: new Map([["box", [durationless]]]),
-    });
-    const view = renderCallbacks();
-
-    await expect(
-      view.callbacks.onMoveKeyframe?.(
-        "box",
-        {
-          percentage: 19.1,
-          propertyGroup: "position",
-          tweenPercentage: 50,
-          animationId: durationless.id,
-        },
-        40,
-      ),
-    ).resolves.toBe(true);
-
-    // The whole point of the clip basis: the drop lands at 10.94 + 0.40 * 16.26 =
-    // 17.444s, and the duration-less tween borrows the clip's 16.26s window from
-    // its 3.2s start, so 17.444 - 3.2 over 16.26 is 87.601%. Any other basis (a
-    // zero-length tween, or the clip's own 0-100 %) produces a different number.
-    expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith(
-      durationless.id,
-      50,
-      expect.closeTo(87.601, 3),
-      mocks.selection,
-    );
-    expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled();
-    view.unmount();
-  });
 });

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -12,6 +12,7 @@ import {
   useDomEditSelectionContext,
 } from "../../contexts/DomEditContext";
 import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler";
+import { runEaseOf } from "../../utils/gsapKeyframeEases";
 import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache";
 import { elementCacheKeys } from "../../hooks/gsapKeyframeCacheHelpers";
 import { resolveKeyframeRetime } from "../editor/keyframeRetime";
@@ -32,7 +33,6 @@ export interface TimelineEditCallbackDeps {
     edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
     coalesceKey?: string,
     operation?: TimelineMoveOperation,
-    coalesceMs?: number,
   ) => Promise<void> | void;
   handleTimelineElementResize: (
     element: TimelineElement,
@@ -332,7 +332,7 @@ export function useTimelineEditCallbacks({
           elements,
           domClipChildren,
         );
-        const tweenDuration = resolveTweenDuration(anim, elDuration);
+        const tweenDuration = resolveTweenDuration(anim);
         const dropAbsTime = elStart + (toClipPct / 100) * elDuration;
         const decision = resolveKeyframeRetime({
           keyframes: anim.keyframes?.keyframes ?? [],
@@ -340,6 +340,7 @@ export function useTimelineEditCallbacks({
           tweenStart,
           tweenDuration,
           dropAbsTime,
+          runEase: runEaseOf(anim),
         });
         if (decision.kind === "move" && decision.toTweenPct != null) {
           return handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct, sel);

package/src/hooks/gsapDragCommit.ts

@@ -5,7 +5,11 @@
 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 {
+  percentageToAbsoluteForAnimation,
+  resolveTweenStart,
+  resolveTweenDuration,
+} from "../utils/globalTimeCompiler";
 import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { computeElementPercentage, keyframeEases, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
@@ -54,10 +58,9 @@ export function computeCurrentPercentage(
 // 1.2 start), so the post-commit reseek renders the element's base pose and the edit
 // looks like it snapped away. Keeping the playhead on the edited keyframe avoids that.
 export function parkPlayheadOnKeyframe(anim: GsapAnimation, pct: number): void {
-  const ts = resolveTweenStart(anim);
-  const td = resolveTweenDuration(anim);
-  if (ts == null || !td || td <= 0) return;
-  usePlayerStore.getState().requestSeek(roundTo3(ts + (pct / 100) * td));
+  const time = percentageToAbsoluteForAnimation(pct, anim);
+  if (time === null || resolveTweenDuration(anim) <= 0) return;
+  usePlayerStore.getState().requestSeek(roundTo3(time));
 }
 
 async function replaceKeyframedPositionHold(