@hyperframes/studio 0.7.78 → 0.7.80

package/src/hooks/gsapShared.writeTarget.test.ts

@@ -0,0 +1,289 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { parseGsapScript } from "@hyperframes/core/gsap-parser";
+import { addAnimationWithKeyframesToScript } from "@hyperframes/parsers/gsap-writer-acorn";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { buildStableSelector, getSelectorIndex } from "../components/editor/domEditingDom";
+import { resolveSelectorElementIds, tweenTargetsElement, writeTargetSelector } from "./gsapShared";
+import { commitKeyframeAtTimeImpl } from "./gsapKeyframeCommit";
+import { promoteSetToKeyframes } from "./useEnableKeyframes";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/**
+ * A selection built the way production builds it (getDomLayerPatchTarget), so
+ * the class-only case under test is the real one: buildStableSelector hands back
+ * a BARE class for an element with no id / hf-id / composition id.
+ */
+function selectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+/** Five class-only siblings — the shape that made one add collapse the timeline. */
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+const BASE_SCRIPT = `
+const tl = gsap.timeline({ paused: true });
+tl.to("#scene", { opacity: 1, duration: 0.5 }, 0);
+`.trim();
+
+const KEYFRAMES = [
+  { percentage: 0, properties: { x: 0 } },
+  { percentage: 100, properties: { x: 40 } },
+];
+
+/** Author the selector into a real script and read the tween's targets back. */
+function roundTripTargets(selector: string): { script: string; targets: string[] } {
+  const { script } = addAnimationWithKeyframesToScript(BASE_SCRIPT, selector, 0, 1, KEYFRAMES);
+  const added = parseGsapScript(script).animations.find((a) => a.targetSelector === selector);
+  if (!added) throw new Error(`written selector did not re-parse: ${selector}`);
+  return { script, targets: resolveSelectorElementIds(added.targetSelector, document) };
+}
+
+describe("writeTargetSelector", () => {
+  it("addresses exactly one element when the only identity is a shared class", () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+
+    // Precondition: this is the defect's input — a bare class hitting all five.
+    expect(selection.selector).toBe(".group");
+    expect(document.querySelectorAll(".group")).toHaveLength(5);
+
+    const written = writeTargetSelector(selection);
+
+    expect(written).toBeTruthy();
+    expect(document.querySelectorAll(written!)).toHaveLength(1);
+    expect(document.querySelector(written!)).toBe(groups[2]);
+  });
+
+  it("keeps a unique #id target", () => {
+    document.body.innerHTML = `<div id="box" class="card"></div>`;
+    const el = document.querySelector<HTMLElement>("#box")!;
+
+    expect(writeTargetSelector(selectionFor(el))).toBe("#box");
+  });
+
+  it("prefers data-hf-id over a generated structural selector", () => {
+    document.body.innerHTML = `
+      <div id="scene"><div class="group"></div><div class="group" data-hf-id="hf-42"></div></div>
+    `;
+    const el = document.querySelectorAll<HTMLElement>(".group")[1]!;
+
+    const written = writeTargetSelector(selectionFor(el));
+
+    expect(written).toBe('[data-hf-id="hf-42"]');
+    expect(document.querySelector(written!)).toBe(el);
+  });
+
+  it("keeps an already-unique class selector as authored", () => {
+    document.body.innerHTML = `<div id="scene"><div class="header"></div></div>`;
+    const el = document.querySelector<HTMLElement>(".header")!;
+
+    expect(writeTargetSelector(selectionFor(el))).toBe(".header");
+  });
+
+  it("hands identity back to a data-hf-id ancestor part way up a deep chain", () => {
+    // Mixed identity: the walk must step past the id-less <section>, stop at the
+    // data-hf-id row, and NOT keep climbing to #outer.
+    document.body.innerHTML = `
+      <div id="outer">
+        <header></header>
+        <section>
+          <div data-hf-id="mid">
+            <div class="cell"></div>
+            <div class="cell"></div>
+            <div class="cell"></div>
+          </div>
+        </section>
+      </div>
+    `;
+    const el = document.querySelectorAll<HTMLElement>(".cell")[2]!;
+
+    const written = writeTargetSelector(selectionFor(el));
+
+    expect(written).toBe('[data-hf-id="mid"] > div:nth-child(3)');
+    expect(document.querySelectorAll(written!)).toHaveLength(1);
+    expect(document.querySelector(written!)).toBe(el);
+  });
+
+  it("falls through to the structural walk when the selection's selector is not valid CSS", () => {
+    document.body.innerHTML = `<div id="scene"><div></div><div></div></div>`;
+    const el = document.querySelectorAll<HTMLElement>("#scene > div")[1]!;
+    // querySelectorAll throws on this, so the "does it match exactly one?" rung
+    // must read as a miss rather than crashing the add.
+    const selection = { ...selectionFor(el), selector: "div[unclosed" } as DomEditSelection;
+
+    expect(writeTargetSelector(selection)).toBe("#scene > div:nth-child(2)");
+  });
+
+  it("returns null when a live DOM is present and no rung addresses one element", () => {
+    document.body.innerHTML = `<div id="scene"><div class="group"></div><div class="group"></div></div>`;
+    const el = document.querySelectorAll<HTMLElement>(".group")[1]!;
+    const selection = selectionFor(el);
+    expect(selection.selector).toBe(".group");
+    // Detached between selecting and committing: ownerDocument still resolves,
+    // but there is no parent to count a :nth-child position in. Returning
+    // ".group" here would re-author the very selector this function replaces.
+    el.remove();
+
+    expect(writeTargetSelector(selection)).toBeNull();
+  });
+
+  it("still returns the selection's own selector when there is no DOM to check against", () => {
+    const selection = {
+      selector: ".group",
+      sourceFile: "index.html",
+    } as unknown as DomEditSelection;
+
+    expect(writeTargetSelector(selection)).toBe(".group");
+  });
+});
+
+describe("writeTargetSelector — write/read round trip", () => {
+  it("re-parses and attributes the new tween to the one element it targeted", () => {
+    const groups = mountGroupSiblings();
+    // Ids let resolveSelectorElementIds name the attributed elements; the
+    // SELECTION still has none, so the write path still faces the bare class.
+    groups.forEach((el, i) => el.setAttribute("id", `group-${i}`));
+    const selection = { ...selectionFor(groups[2]), id: undefined } as DomEditSelection;
+
+    const written = writeTargetSelector(selection);
+    const { targets } = roundTripTargets(written!);
+
+    expect(targets).toEqual(["group-2"]);
+  });
+
+  it("does not widen the add to the element's four class siblings", () => {
+    const groups = mountGroupSiblings();
+    groups.forEach((el, i) => el.setAttribute("id", `group-${i}`));
+    const selection = { ...selectionFor(groups[0]), id: undefined } as DomEditSelection;
+
+    // The old bare-class write attributed the one add to every sibling — the
+    // attribution blow-up behind "one add collapsed the timeline to a single row".
+    expect(roundTripTargets(".group").targets).toHaveLength(5);
+
+    expect(roundTripTargets(writeTargetSelector(selection)!).targets).toHaveLength(1);
+  });
+});
+
+describe("existingTweenTargetSelector", () => {
+  it("keeps the narrowed target when a replace re-authors the tween", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+    const commitMutation = vi.fn(async () => undefined);
+    // A tween a previous add already narrowed to one sibling. Re-deriving the
+    // target from the selection would widen it back to all five.
+    const setAnim = {
+      id: "a1",
+      targetSelector: "#scene > div:nth-child(3)",
+      method: "set",
+      position: 0,
+      properties: { x: 10 },
+    };
+
+    await promoteSetToKeyframes({ commitMutation } as never, selection, setAnim as never, 0, null);
+
+    const mutation = commitMutation.mock.calls[0]?.[0] as { targetSelector: string };
+    expect(mutation.targetSelector).toBe("#scene > div:nth-child(3)");
+    expect(document.querySelectorAll(mutation.targetSelector)).toHaveLength(1);
+  });
+
+  it("falls back to the selection when the tween's own target did not resolve", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[2]);
+    const commitMutation = vi.fn(async () => undefined);
+    const setAnim = {
+      id: "a1",
+      targetSelector: "targets[i]",
+      hasUnresolvedSelector: true,
+      method: "set",
+      position: 0,
+      properties: { x: 10 },
+    };
+
+    await promoteSetToKeyframes({ commitMutation } as never, selection, setAnim as never, 0, null);
+
+    const mutation = commitMutation.mock.calls[0]?.[0] as { targetSelector: string };
+    expect(mutation.targetSelector).toBe(".group");
+  });
+});
+
+describe("commitKeyframeAtTimeImpl — new-tween target", () => {
+  it("authors a one-element selector when no tween exists at the playhead", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[3]);
+    const commitMutation = vi.fn(async () => undefined);
+
+    await commitKeyframeAtTimeImpl(selection, 1, [], { x: 12 }, commitMutation);
+
+    const mutation = commitMutation.mock.calls[0]?.[1] as { targetSelector: string };
+    expect(mutation.targetSelector).not.toBe(".group");
+    expect(document.querySelectorAll(mutation.targetSelector)).toHaveLength(1);
+    expect(document.querySelector(mutation.targetSelector)).toBe(groups[3]);
+  });
+});
+
+describe("tweenTargetsElement", () => {
+  it("matches a tween narrowed to this element by a selector the selection does not use", () => {
+    const groups = mountGroupSiblings();
+    groups[2]!.id = "narrowed";
+
+    // The write half authored "#narrowed"; the read half still has ".group".
+    expect(tweenTargetsElement("#narrowed", ".group", groups[2])).toBe(true);
+  });
+
+  it("does not hand an individual element the group tween it merely inherits", () => {
+    const groups = mountGroupSiblings();
+
+    // Selecting one sibling by its own address must not let an edit mutate the
+    // ".group" tween: that write moves all five, not the one being nudged.
+    expect(tweenTargetsElement(".group", "#scene > div:nth-child(3)", groups[2])).toBe(false);
+  });
+
+  it("still edits a group tween when the group itself is the selection", () => {
+    const groups = mountGroupSiblings();
+
+    expect(tweenTargetsElement(".group", ".group", groups[0])).toBe(true);
+  });
+
+  it("does not match a target that is not a selector matches() understands", () => {
+    const groups = mountGroupSiblings();
+
+    expect(tweenTargetsElement("div[unclosed", ".group", groups[0])).toBe(false);
+  });
+});
+
+describe("commitKeyframeAtTimeImpl — no one-element target", () => {
+  it("drops the keyframe rather than authoring the bare class", async () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[3]!);
+    groups[3]!.remove();
+    const commitMutation = vi.fn(async () => undefined);
+
+    await commitKeyframeAtTimeImpl(selection, 1, [], { x: 12 }, commitMutation);
+
+    expect(commitMutation).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/gsapTweenSynth.test.ts

@@ -54,31 +54,86 @@ describe("synthesizeFlatTweenKeyframes", () => {
   });
 });
 
-describe("deduplicateKeyframes ease ambiguity", () => {
-  it("flags a same-% collision from different animations (different eases)", () => {
+describe("deduplicateKeyframes colliding animation targets", () => {
+  it("records each animation's tween percentage in first-seen order", () => {
     const merged = deduplicateKeyframes([
-      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
-      { percentage: 45, properties: { opacity: 1 }, ease: "power2.out", animationId: "#a-visual" },
+      {
+        percentage: 45,
+        tweenPercentage: 20,
+        properties: { x: 10 },
+        ease: "power2.in",
+        animationId: "#a-position",
+      },
+      {
+        percentage: 45,
+        tweenPercentage: 80,
+        properties: { opacity: 1 },
+        ease: "power2.out",
+        animationId: "#a-visual",
+      },
     ]);
     const kf = merged.find((k) => k.percentage === 45);
-    expect(kf?.easeAmbiguous).toBe(true);
+    expect(kf?.collidingAnimationTargets).toEqual([
+      { animationId: "#a-position", tweenPercentage: 20 },
+      { animationId: "#a-visual", tweenPercentage: 80 },
+    ]);
   });
 
-  it("flags a cross-animation collision even when the raw eases match", () => {
-    // The button can still only target one arbitrary animation, and each may
-    // inherit a different easeEach/animation ease that raw comparison misses.
+  it("deduplicates three colliding animations while preserving first-seen order", () => {
     const merged = deduplicateKeyframes([
-      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
-      { percentage: 45, properties: { opacity: 1 }, ease: "power2.in", animationId: "#a-visual" },
+      {
+        percentage: 45,
+        tweenPercentage: 20,
+        properties: { x: 10 },
+        ease: "power2.in",
+        animationId: "#a-position",
+      },
+      {
+        percentage: 45,
+        tweenPercentage: 80,
+        properties: { opacity: 1 },
+        ease: "power2.in",
+        animationId: "#a-visual",
+      },
+      {
+        percentage: 45,
+        tweenPercentage: 40,
+        properties: { y: 20 },
+        ease: "power2.out",
+        animationId: "#a-position",
+      },
+      {
+        percentage: 45,
+        tweenPercentage: 60,
+        properties: { scale: 2 },
+        ease: "power2.in",
+        animationId: "#a-scale",
+      },
+    ]);
+    expect(merged.find((k) => k.percentage === 45)?.collidingAnimationTargets).toEqual([
+      { animationId: "#a-position", tweenPercentage: 20 },
+      { animationId: "#a-visual", tweenPercentage: 80 },
+      { animationId: "#a-scale", tweenPercentage: 60 },
     ]);
-    expect(merged.find((k) => k.percentage === 45)?.easeAmbiguous).toBe(true);
   });
 
-  it("does not flag a same-% collision within a single animation", () => {
+  it("leaves the collision set undefined within a single animation", () => {
     const merged = deduplicateKeyframes([
-      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
-      { percentage: 45, properties: { y: 20 }, ease: "power2.out", animationId: "#a-position" },
+      {
+        percentage: 45,
+        tweenPercentage: 20,
+        properties: { x: 10 },
+        ease: "power2.in",
+        animationId: "#a-position",
+      },
+      {
+        percentage: 45,
+        tweenPercentage: 80,
+        properties: { y: 20 },
+        ease: "power2.out",
+        animationId: "#a-position",
+      },
     ]);
-    expect(merged.find((k) => k.percentage === 45)?.easeAmbiguous).toBeFalsy();
+    expect(merged.find((k) => k.percentage === 45)?.collidingAnimationTargets).toBeUndefined();
   });
 });

package/src/hooks/gsapTweenSynth.ts

@@ -1,7 +1,7 @@
 import type {
   GsapAnimation,
   GsapKeyframesData,
-  GsapPercentageKeyframe,
+  SourcedGsapPercentageKeyframe,
 } from "@hyperframes/core/gsap-parser";
 import { PROPERTY_DEFAULTS } from "./gsapShared";
 
@@ -22,33 +22,60 @@ export function isStaticPositionHold(anim: GsapAnimation): boolean {
   return propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y");
 }
 
-export function deduplicateKeyframes<
-  T extends GsapPercentageKeyframe & { animationId?: string; easeAmbiguous?: boolean },
->(keyframes: T[]): T[] {
+export interface AnimationKeyframeTarget {
+  animationId: string;
+  tweenPercentage: number;
+}
+
+function accumulateCollidingAnimationTargets(
+  keyframe: AnimationKeyframeTarget & {
+    collidingAnimationTargets?: AnimationKeyframeTarget[];
+  },
+  incoming: AnimationKeyframeTarget,
+): void {
+  const primaryId = keyframe.animationId;
+  // One tween meeting itself is not a collision. Both identity fields are
+  // required by the parameter types rather than guarded at runtime: a keyframe
+  // that arrives without them cannot be attributed to a tween at all, and an
+  // early return here would silently record no collision and let the inline
+  // ease button edit an arbitrary one of the tweens that met at this
+  // percentage. The compiler now refuses the incomplete keyframe instead.
+  if (primaryId === incoming.animationId) return;
+  const collisionTargets = keyframe.collidingAnimationTargets;
+  if (collisionTargets?.some((target) => target.animationId === incoming.animationId)) return;
+  keyframe.collidingAnimationTargets = [
+    ...(collisionTargets === undefined || collisionTargets.length === 0
+      ? [{ animationId: primaryId, tweenPercentage: keyframe.tweenPercentage }]
+      : collisionTargets),
+    { animationId: incoming.animationId, tweenPercentage: incoming.tweenPercentage },
+  ];
+}
+
+/**
+ * What a keyframe looks like once it has been attributed to its source tween
+ * and is ready to be merged with the other tweens landing on the same row. The
+ * runtime scan produces unattributed keyframes and they never reach a merge, so
+ * they are deliberately not this type.
+ */
+export type MergeableKeyframe = SourcedGsapPercentageKeyframe & {
+  propertyGroup?: string;
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
+};
+
+export function deduplicateKeyframes<T extends MergeableKeyframe>(keyframes: T[]): T[] {
   const byPct = new Map<number, T>();
   for (const kf of keyframes) {
     const existing = byPct.get(kf.percentage);
     if (existing) {
       existing.properties = { ...existing.properties, ...kf.properties };
-      // Two DIFFERENT source animations with a keyframe at the same clip %: a
-      // single inline ease button can only target one of them, and which one is
-      // arbitrary (each may also inherit a different easeEach/animation ease, so
-      // comparing raw keyframe eases isn't enough). Flag it so the collapsed row
-      // hides the button there and the user edits per-lane instead.
-      if (
-        existing.animationId !== undefined &&
-        kf.animationId !== undefined &&
-        existing.animationId !== kf.animationId
-      ) {
-        existing.easeAmbiguous = true;
-      }
-      // Whichever tween iterated last used to win `ease`, so the merged
-      // keyframe carried an arbitrary one of the colliding curves. Readers that
-      // do not check easeAmbiguous (drag readouts, lane hints) then showed a
-      // curve belonging to a different animation than the one an edit targets.
-      // Drop it instead: ambiguous means "no single ease", and the flag is the
-      // only honest answer.
-      if (existing.easeAmbiguous) delete existing.ease;
+      accumulateCollidingAnimationTargets(existing, kf);
+      // Whichever tween iterated last used to win `ease`, so the merged keyframe
+      // carried an arbitrary one of the colliding curves. Readers that show a
+      // single curve (drag readouts, lane hints, the inline ease button) then
+      // displayed one belonging to a different animation than the one an edit
+      // targets. A collision means "no single ease", and dropping it is the only
+      // honest answer; collidingAnimationTargets still names every tween there.
+      if ((existing.collidingAnimationTargets?.length ?? 0) > 1) delete existing.ease;
       else if (kf.ease) existing.ease = kf.ease;
     } else {
       byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });

package/src/hooks/keyframeCacheAstLoad.ts

@@ -1,60 +1,22 @@
 /**
- * Reading a composition file's GSAP tweens into the keyframe cache: fetch,
- * selector -> element id resolution, and the clip-relative timing basis.
+ * Reading a composition file's GSAP tweens into the keyframe cache: fetch and
+ * selector -> element id resolution.
  * Split from useGsapTweenCache to keep that file under the 600-line limit.
  */
 import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
-import {
-  clearKeyframeCacheForFile,
-  elementCacheKeys,
-  writeGsapAnimationsForElement,
-} from "./gsapKeyframeCacheHelpers";
-import { idFromSelector, toClipKeyframes } from "./gsapShared";
+import { replaceKeyframeCacheForFile } from "./gsapKeyframeCacheHelpers";
+import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
 import {
   deduplicateKeyframes,
   isStaticPositionHold,
   synthesizeFlatTweenKeyframes,
+  type MergeableKeyframe,
 } from "./gsapTweenSynth";
 
-/**
- * Resolve a tween's target selector to the ids of the element(s) it animates.
- * A bare `#id` resolves directly; anything else (a class like `.dot`, a group
- * `.a, .b`, or a descendant selector) is matched against the live preview DOM so
- * class/selector tweens (e.g. `gsap.from(".dot", {stagger})`) attribute to every
- * element they animate — not just one parsed from the string. Falls back to a
- * leading `#id` when there's no DOM (so the cache still populates pre-iframe).
- */
-// fallow-ignore-next-line complexity
-export function resolveSelectorElementIds(
-  selector: string,
-  doc: Document | null | undefined,
-): string[] {
-  // A whole-selector id match (either shape) addresses exactly one element.
-  const bareId = /^(#[\w-]+|\[id="(?:\\.|[^"\\])*"\])$/.test(selector)
-    ? idFromSelector(selector)
-    : null;
-  if (bareId) return [bareId];
-  if (!doc) {
-    const lead = idFromSelector(selector);
-    return lead ? [lead] : [];
-  }
-  const ids = new Set<string>();
-  for (const part of selector.split(",")) {
-    const sel = part.trim();
-    if (!sel) continue;
-    try {
-      for (const el of Array.from(doc.querySelectorAll(sel))) {
-        if (el.id) ids.add(el.id);
-      }
-    } catch {
-      const lead = idFromSelector(sel);
-      if (lead) ids.add(lead);
-    }
-  }
-  return Array.from(ids);
-}
+export { resolveSelectorElementIds };
+
 /**
  * The slice of the parse response callers actually read. The endpoint returns
  * the full `ParsedGsap` (preamble/postamble and all), but nothing downstream of
@@ -103,37 +65,6 @@ export async function fetchParsedAnimations(
   }
 }
 
-/**
- * Clip-relative timing basis for an element. Sub-composition internals (e.g. pills
- * inside a scene) aren't timeline clips themselves — they're derived at expand time
- * — so they're absent from `elements`. Without a basis, elDuration defaulted to 1
- * and clip-relative keyframe percentages blew past 100% (rendering off the clip).
- * Fall back to the sub-comp HOST's bounds, resolved via domClipChildren (the host's
- * data-composition-src is stripped in the rendered DOM, so we can't query it).
- */
-export function resolveClipTimingBasis(
-  elementId: string,
-  sourceFile: string,
-  elements: ReadonlyArray<{
-    domId?: string;
-    key?: string;
-    id: string;
-    start: number;
-    duration: number;
-  }>,
-  domClipChildren: ReadonlyArray<{ id: string; hostId: string }>,
-): { elStart: number; elDuration: number } {
-  const direct = elements.find(
-    (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
-  );
-  if (direct) return { elStart: direct.start, elDuration: direct.duration };
-  const hostId = domClipChildren.find((c) => c.id === elementId)?.hostId;
-  const host = hostId
-    ? elements.find((el) => el.domId === hostId || (el.key ?? el.id) === `index.html#${hostId}`)
-    : undefined;
-  return { elStart: host?.start ?? 0, elDuration: host?.duration ?? 1 };
-}
-
 /**
  * Read one composition file's tweens into the keyframe cache. Split out of the
  * hook so the effect can run it per file without re-nesting the whole body.
@@ -146,10 +77,8 @@ export async function populateKeyframeCacheFromAst(
 ): Promise<void> {
   const parsed = await fetchParsedAnimations(projectId, sf);
   if (!parsed) return;
-  const { setKeyframeCache } = usePlayerStore.getState();
-  clearKeyframeCacheForFile(sf);
   const { elements, domClipChildren } = usePlayerStore.getState();
-  const mergedByElement = new Map<string, GsapKeyframesData>();
+  const mergedByElement = new Map<string, GsapKeyframesData<MergeableKeyframe>>();
   const sourceByElement = new Map<string, GsapAnimation[]>();
   for (const anim of parsed.animations) {
     if (anim.hasUnresolvedKeyframes) continue;
@@ -174,8 +103,5 @@ export async function populateKeyframeCacheFromAst(
       }
     }
   }
-  for (const [id, kfData] of mergedByElement) {
-    for (const key of elementCacheKeys(sf, id)) setKeyframeCache(key, kfData);
-    writeGsapAnimationsForElement(sf, id, sourceByElement.get(id));
-  }
+  replaceKeyframeCacheForFile(sf, mergedByElement, sourceByElement);
 }