@hyperframes/studio 0.7.78 → 0.7.80

package/src/hooks/gsapKeyframeCacheHelpers.test.ts

@@ -3,8 +3,8 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
 import {
   clearKeyframeCacheForElement,
-  clearKeyframeCacheForFile,
   pruneKeyframeCacheToFiles,
+  replaceKeyframeCacheForFile,
   updateKeyframeCacheFromParsed,
 } from "./gsapKeyframeCacheHelpers";
 
@@ -70,48 +70,6 @@ describe("clearKeyframeCacheForElement", () => {
   });
 });
 
-describe("clearKeyframeCacheForFile", () => {
-  it("clears the prefixed, fallback, and bare keys for every element of the file", () => {
-    seed("comp.html#a");
-    seed("index.html#a");
-    seed("a");
-    seed("comp.html#b");
-    seed("b");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    for (const key of ["comp.html#a", "index.html#a", "a", "comp.html#b", "b"]) {
-      expect(cache().has(key)).toBe(false);
-    }
-  });
-
-  // Several composition files re-scan concurrently, so a clear that walked the
-  // index.html alias would delete rows a sibling file had just written.
-  it("leaves an index.html-owned element alone when another file re-scans", () => {
-    seed("index.html#title");
-    seed("title");
-    seed("comp.html#a");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    expect(cache().has("index.html#title")).toBe(true);
-    expect(cache().has("title")).toBe(true);
-    expect(cache().has("comp.html#a")).toBe(false);
-  });
-
-  it("leaves entries that belong to a different source file", () => {
-    seed("comp.html#a");
-    seed("a");
-    seed("other.html#z");
-    seed("z");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    expect(cache().has("other.html#z")).toBe(true);
-    expect(cache().has("z")).toBe(true);
-  });
-});
-
 describe("pruneKeyframeCacheToFiles", () => {
   // Switching composition leaves the previous comp's elements cached with no
   // owner left to clear them: each file only ever clears its own entries.
@@ -152,9 +110,140 @@ describe("pruneKeyframeCacheToFiles", () => {
     expect(cache().has("index.html#hero")).toBe(true);
     expect(cache().has("comp.html#a")).toBe(true);
   });
+
+  // The prune runs immediately before the atomic repopulate on every
+  // composition switch. One notification per stale element put every subscriber
+  // through a cache that was progressively emptier, which is the flash the
+  // atomic repopulate exists to avoid.
+  it("drops every stale file in one notification", () => {
+    seed("old.html#a");
+    seed("old.html#b");
+    seed("older.html#c");
+    seed("kept.html#k");
+    let notifications = 0;
+    const unsubscribe = usePlayerStore.subscribe(() => {
+      notifications += 1;
+    });
+
+    pruneKeyframeCacheToFiles(["kept.html"]);
+    unsubscribe();
+
+    expect(notifications).toBe(1);
+    expect([...cache().keys()]).toEqual(["kept.html#k"]);
+  });
+
+  // A prune that finds nothing stale must not hand subscribers a fresh Map
+  // identity: every keyframe consumer re-renders on cache identity alone.
+  it("does not publish when nothing is stale", () => {
+    seed("kept.html#k");
+    const before = cache();
+    let notifications = 0;
+    const unsubscribe = usePlayerStore.subscribe(() => {
+      notifications += 1;
+    });
+
+    pruneKeyframeCacheToFiles(["kept.html"]);
+    unsubscribe();
+
+    expect(notifications).toBe(0);
+    expect(cache()).toBe(before);
+  });
+});
+
+describe("replaceKeyframeCacheForFile", () => {
+  it("publishes complete keyframe and animation maps in one notification", () => {
+    const staleEntry = entry();
+    const otherEntry = entry();
+    const staleAnimation = animWithKeyframes("stale");
+    const freshAnimation = animWithKeyframes("fresh");
+    usePlayerStore.setState({
+      keyframeCache: new Map([
+        ["scene.html#stale", staleEntry],
+        ["index.html#stale", staleEntry],
+        ["stale", staleEntry],
+        ["other.html#other", otherEntry],
+        ["other", otherEntry],
+      ]),
+      gsapAnimations: new Map([
+        ["scene.html#stale", [staleAnimation]],
+        ["index.html#stale", [staleAnimation]],
+        ["stale", [staleAnimation]],
+        ["other.html#other", [staleAnimation]],
+        ["other", [staleAnimation]],
+      ]),
+    });
+    const snapshots: Array<{ cacheKeys: string[]; animationKeys: string[] }> = [];
+    const unsubscribe = usePlayerStore.subscribe((state) => {
+      snapshots.push({
+        cacheKeys: [...state.keyframeCache.keys()].sort(),
+        animationKeys: [...state.gsapAnimations.keys()].sort(),
+      });
+    });
+
+    replaceKeyframeCacheForFile(
+      "scene.html",
+      new Map([["fresh", entry()]]),
+      new Map([["fresh", [freshAnimation]]]),
+    );
+    unsubscribe();
+
+    expect(snapshots).toEqual([
+      {
+        cacheKeys: ["fresh", "index.html#fresh", "other", "other.html#other", "scene.html#fresh"],
+        animationKeys: [
+          "fresh",
+          "index.html#fresh",
+          "other",
+          "other.html#other",
+          "scene.html#fresh",
+        ],
+      },
+    ]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#fresh")).toEqual([
+      freshAnimation,
+    ]);
+  });
 });
 
 describe("updateKeyframeCacheFromParsed", () => {
+  it("records colliding animation targets with their own tween percentages", () => {
+    const animation = (
+      id: string,
+      propertyGroup: string,
+      properties: Record<string, number>,
+      percentage: number,
+      resolvedStart: number,
+    ): GsapAnimation => ({
+      ...animWithKeyframes(id),
+      targetSelector: "#hero",
+      propertyGroup,
+      resolvedStart,
+      keyframes: { format: "percentage", keyframes: [{ percentage, properties }] },
+    });
+
+    usePlayerStore.setState({
+      elements: [{ id: "hero", domId: "hero", tag: "div", start: 0, duration: 4, track: 0 }],
+    });
+
+    updateKeyframeCacheFromParsed(
+      [
+        animation("hero-position", "position", { x: 100 }, 50, 0.5),
+        animation("hero-visual", "visual", { opacity: 1 }, 80, 0.2),
+        animation("hero-position", "position", { y: 50 }, 25, 0.75),
+        animation("hero-scale", "scale", { scale: 2 }, 60, 0.4),
+      ],
+      "scene.html",
+      "hero",
+      {},
+    );
+
+    expect(cache().get("scene.html#hero")?.keyframes[0]?.collidingAnimationTargets).toEqual([
+      { animationId: "hero-position", tweenPercentage: 50 },
+      { animationId: "hero-visual", tweenPercentage: 80 },
+      { animationId: "hero-scale", tweenPercentage: 60 },
+    ]);
+  });
+
   it("serializes a multi-keyframe tween with a stable shape and animation identity", () => {
     const animation: GsapAnimation = {
       ...animWithKeyframes("hero"),
@@ -276,6 +365,69 @@ describe("updateKeyframeCacheFromParsed", () => {
     expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]);
   });
 
+  // `#stat3 .block` animates the BLOCK inside #stat3, not #stat3. An unanchored
+  // `^#([\w-]+)/` prefix match filed it under "stat3", which both stole the
+  // child's diamonds and collided with #stat3's own tween at the shared
+  // percentage (dropping #stat3's ease as ambiguous).
+  it("attributes a descendant selector to the child, not to its ancestor", () => {
+    const parent: GsapAnimation = {
+      id: "stat3-fromTo",
+      targetSelector: "#stat3",
+      method: "fromTo",
+      position: 8.88,
+      resolvedStart: 8.88,
+      duration: 0.25,
+      fromProperties: { y: 20 },
+      properties: { y: 0 },
+      ease: "power2.out",
+      propertyGroup: "position",
+    };
+    const child: GsapAnimation = {
+      id: "block-from",
+      targetSelector: "#stat3 .block",
+      method: "from",
+      position: 9.13,
+      resolvedStart: 9.13,
+      duration: 0.3,
+      properties: { opacity: 0 },
+      ease: "power2.in",
+      propertyGroup: "visual",
+    };
+    usePlayerStore.setState({
+      elements: [
+        { id: "stat3-clip", domId: "stat3", tag: "div", start: 8.88, duration: 1, track: 0 },
+      ],
+    });
+    const doc = {
+      querySelectorAll: (selector: string) =>
+        (selector === "#stat3 .block"
+          ? [{ id: "stat3-block" }]
+          : []) as unknown as NodeListOf<Element>,
+    } as unknown as Document;
+
+    updateKeyframeCacheFromParsed([parent, child], "scene.html", "stat3", {}, doc);
+
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3")).toEqual([parent]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#stat3-block")).toEqual([child]);
+    // With the collision gone, #stat3's own curve survives instead of being
+    // deleted as an ambiguous same-percentage merge.
+    const parentKeyframes = cache().get("scene.html#stat3")?.keyframes ?? [];
+    expect(parentKeyframes.at(-1)?.ease).toBe("power2.out");
+    expect(parentKeyframes.some((keyframe) => "easeAmbiguous" in keyframe)).toBe(false);
+  });
+
+  it("attributes a descendant selector to nothing when there is no document", () => {
+    const child: GsapAnimation = {
+      ...animWithKeyframes("block-from"),
+      targetSelector: "#stat3 .block",
+    };
+
+    updateKeyframeCacheFromParsed([child], "scene.html", "stat3", {});
+
+    expect(cache().has("scene.html#stat3")).toBe(false);
+    expect(usePlayerStore.getState().gsapAnimations.has("scene.html#stat3")).toBe(false);
+  });
+
   it("does not cache a flat tween without animatable numeric properties", () => {
     const animation: GsapAnimation = {
       id: "flat-box",

package/src/hooks/gsapKeyframeCacheHelpers.ts

@@ -4,66 +4,148 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
-import { idFromSelector, toClipKeyframes } from "./gsapShared";
-import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
+import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
+import {
+  deduplicateKeyframes,
+  synthesizeFlatTweenKeyframes,
+  type MergeableKeyframe,
+} from "./gsapTweenSynth";
+
+/** Both cache maps mid-edit, before the single store publish. */
+export interface KeyframeCacheDraft {
+  keyframeCache: Map<string, KeyframeCacheEntry>;
+  gsapAnimations: Map<string, GsapAnimation[]>;
+}
+
+function sameEntries<V>(before: ReadonlyMap<string, V>, after: ReadonlyMap<string, V>): boolean {
+  if (before.size !== after.size) return false;
+  for (const [key, value] of before) {
+    if (after.get(key) !== value) return false;
+  }
+  return true;
+}
+
+/**
+ * Every multi-key cache writer publishes through here: clone both maps once,
+ * let the caller edit the drafts, publish once. The per-key store setters turned
+ * one logical refresh into N notifications, and every subscriber that rendered
+ * in between saw a cache that was half the old file and half the new one. The
+ * identity check keeps an edit that changed nothing from allocating fresh maps
+ * and re-rendering every subscriber, which is the guard the per-key setters used
+ * to carry individually.
+ */
+export function publishKeyframeCache(edit: (draft: KeyframeCacheDraft) => void): void {
+  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+  const draft: KeyframeCacheDraft = {
+    keyframeCache: new Map(keyframeCache),
+    gsapAnimations: new Map(gsapAnimations),
+  };
+  edit(draft);
+  if (
+    sameEntries(keyframeCache, draft.keyframeCache) &&
+    sameEntries(gsapAnimations, draft.gsapAnimations)
+  )
+    return;
+  usePlayerStore.setState({
+    keyframeCache: draft.keyframeCache,
+    gsapAnimations: draft.gsapAnimations,
+  });
+}
 
 export function updateKeyframeCacheFromParsed(
   animations: GsapAnimation[],
   targetPath: string,
   selectionId: string | undefined,
   mutation: Record<string, unknown>,
+  doc?: Document | null,
 ): void {
-  const { setKeyframeCache, elements } = usePlayerStore.getState();
+  const { elements, domClipChildren } = usePlayerStore.getState();
   const idsWithKeyframes = new Set<string>();
-  const merged = new Map<string, KeyframeCacheEntry>();
+  // Attributed keyframes only: everything in here came from a parsed tween via
+  // toClipKeyframes, so the merge can rely on the source identity. It widens
+  // back into KeyframeCacheEntry on the way to the store, which also holds the
+  // runtime scan's unattributed keyframes.
+  const merged = new Map<string, KeyframeCacheEntry & { keyframes: MergeableKeyframe[] }>();
   const sourceAnimations = new Map<string, GsapAnimation[]>();
   for (const anim of animations) {
-    const id = idFromSelector(anim.targetSelector);
     const kfSource =
       anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? [];
-    if (!id || kfSource.length === 0) continue;
-    idsWithKeyframes.add(id);
-    // Every tween that fed keyframeCache also lands in gsapAnimations, group or
-    // not: a mixed-group tween (`{ x, opacity }` classifies to undefined) used to
-    // cache diamonds with no source animation behind them, so the collapsed row
-    // drew keyframes the expanded lanes couldn't render. Lane consumers do the
-    // group filtering themselves (animationContributesLane).
-    sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]);
-
-    // Convert tween-relative percentages to clip-relative so diamonds
-    // render at the correct position within the timeline clip.
-    const timelineEl = elements.find(
-      (el) => el.domId === id || (el.key ?? el.id) === `${targetPath}#${id}`,
-    );
-    const clipKeyframes = toClipKeyframes(
-      kfSource,
-      anim,
-      timelineEl?.start ?? 0,
-      timelineEl?.duration ?? 1,
-    );
-
-    const existing = merged.get(id);
-    if (existing) {
-      // deduplicateKeyframes owns the same-% merge (including the easeAmbiguous
-      // flag downstream lanes read); a second copy of that rule here is how the
-      // two writers drift.
-      existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
-    } else {
-      merged.set(id, {
-        ...anim.keyframes,
-        format: anim.keyframes?.format ?? "percentage",
-        keyframes: clipKeyframes,
-      });
+    if (kfSource.length === 0) continue;
+    // Attribute the tween to every element it actually animates. A leading-id
+    // match filed `#stat3 .block` under `#stat3`: the child's diamonds landed on
+    // its ancestor AND collided with the ancestor's own tween at the shared
+    // percentage, which the same-% merge then resolved by dropping the ease.
+    for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
+      idsWithKeyframes.add(id);
+      // Every tween that fed keyframeCache also lands in gsapAnimations, group or
+      // not: a mixed-group tween (`{ x, opacity }` classifies to undefined) used to
+      // cache diamonds with no source animation behind them, so the collapsed row
+      // drew keyframes the expanded lanes couldn't render. Lane consumers do the
+      // group filtering themselves (animationContributesLane).
+      sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]);
+
+      // Convert tween-relative percentages to clip-relative so diamonds
+      // render at the correct position within the timeline clip. The basis comes
+      // from the shared resolver, so this writer agrees with the AST load on both
+      // the sub-comp host fallback and the tween's own time frame.
+      const { elStart, elDuration } = resolveClipTimingBasis(
+        id,
+        targetPath,
+        elements,
+        domClipChildren,
+      );
+      const clipKeyframes = toClipKeyframes(kfSource, anim, elStart, elDuration);
+
+      const existing = merged.get(id);
+      if (existing) {
+        // deduplicateKeyframes owns the same-% merge (including the colliding
+        // animation targets downstream lanes read); a second copy of that rule
+        // here is how the two writers drift.
+        existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
+      } else {
+        merged.set(id, {
+          ...anim.keyframes,
+          format: anim.keyframes?.format ?? "percentage",
+          keyframes: clipKeyframes,
+        });
+      }
     }
   }
-  for (const [id, entry] of merged) {
-    for (const key of elementCacheKeys(targetPath, id)) setKeyframeCache(key, entry);
-    writeGsapAnimationsForElement(targetPath, id, sourceAnimations.get(id));
+  const mutationSelector = (mutation as { targetSelector?: string }).targetSelector;
+  const mutated = mutationSelector ? resolveSelectorElementIds(mutationSelector, doc) : [];
+  const targetIds = mutated.length > 0 ? mutated : selectionId ? [selectionId] : [];
+  publishKeyframeCache((draft) => {
+    for (const [id, entry] of merged) {
+      writeElementIntoDraft(draft, targetPath, id, entry, sourceAnimations.get(id));
+    }
+    for (const targetId of targetIds) {
+      if (!idsWithKeyframes.has(targetId)) deleteElementFromDraft(draft, targetPath, targetId);
+    }
+  });
+}
+
+function writeElementIntoDraft(
+  draft: KeyframeCacheDraft,
+  sourceFile: string,
+  elementId: string,
+  entry: KeyframeCacheEntry,
+  animations: GsapAnimation[] | undefined,
+): void {
+  for (const key of elementCacheKeys(sourceFile, elementId)) {
+    draft.keyframeCache.set(key, entry);
+    if (animations) draft.gsapAnimations.set(key, animations);
+    else draft.gsapAnimations.delete(key);
   }
-  const targetId =
-    idFromSelector((mutation as { targetSelector?: string }).targetSelector) ?? selectionId;
-  if (targetId && !idsWithKeyframes.has(targetId)) {
-    clearKeyframeCacheForElement(targetPath, targetId);
+}
+
+function deleteElementFromDraft(
+  draft: KeyframeCacheDraft,
+  sourceFile: string,
+  elementId: string,
+): void {
+  for (const key of elementCacheKeys(sourceFile, elementId)) {
+    draft.keyframeCache.delete(key);
+    draft.gsapAnimations.delete(key);
   }
 }
 
@@ -76,50 +158,37 @@ export function updateKeyframeCacheFromParsed(
  * preview overlay) fall back to the bare id when an element has no
  * source-prefixed key — so a clear that drops only the prefixed keys leaves the
  * bare entry behind and those readers keep showing keyframes the element no
- * longer has. Each delete is guarded by `has` so an absent key doesn't allocate
- * a new cache map and re-render every subscriber.
+ * longer has. publishKeyframeCache skips the store write entirely when none of
+ * the keys were present, so an absent element doesn't re-render every
+ * subscriber.
  */
 export function clearKeyframeCacheForElement(sourceFile: string, elementId: string): void {
-  const { keyframeCache, setKeyframeCache, gsapAnimations, setGsapAnimations } =
-    usePlayerStore.getState();
-  const keys = elementCacheKeys(sourceFile, elementId);
-  for (const key of keys) {
-    if (keyframeCache.has(key)) setKeyframeCache(key, undefined);
-    if (gsapAnimations.has(key)) setGsapAnimations(key, undefined);
-  }
+  publishKeyframeCache((draft) => deleteElementFromDraft(draft, sourceFile, elementId));
 }
 
-/**
- * Clear every cached element of `sourceFile` before a full re-scan repopulates
- * it. Only the file's OWN prefixed keys name the ids to clear: every write sets
- * the prefixed key (see elementCacheKeys), so the file's elements are all
- * reachable that way, and clearKeyframeCacheForElement then takes the
- * index.html alias and the bare key with them — an element whose keyframes were
- * removed (and so is absent from the re-scan) leaves no stale bare entry
- * behind. Reading the alias prefix here instead would collect ids owned by
- * OTHER files, and several files re-scan concurrently, so this file's clear
- * would wipe the entries a sibling file had just written.
- */
-export function clearKeyframeCacheForFile(sourceFile: string): void {
-  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
+function cachedElementIdsForFile(
+  sourceFile: string,
+  keyframeCache: ReadonlyMap<string, KeyframeCacheEntry>,
+  gsapAnimations: ReadonlyMap<string, GsapAnimation[]>,
+): Set<string> {
   const sfPrefix = `${sourceFile}#`;
   const ids = new Set<string>();
   for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
     if (!key.startsWith(sfPrefix)) continue;
     ids.add(key.slice(sfPrefix.length));
   }
-  for (const id of ids) {
-    clearKeyframeCacheForElement(sourceFile, id);
-  }
+  return ids;
 }
 
 /**
  * Drop every cached element owned by a file that is no longer on screen. Each
- * file only ever clears its OWN entries (see clearKeyframeCacheForFile), so
+ * file only ever writes its OWN prefixed entries (see elementCacheKeys), so
  * switching composition left the previous composition's elements cached forever
- * — 240 entries per switch on a 120-clip comp, in both keyframeCache and
- * gsapAnimations, with nothing to evict them. Called once before a re-scan, with
- * the full set of files that scan covers.
+ * (240 entries per switch on a 120-clip comp, in both keyframeCache and
+ * gsapAnimations, with nothing to evict them). Called once before a re-scan,
+ * with the full set of files that scan covers, and it publishes once: the prune
+ * runs immediately before the atomic repopulate, so a per-element publish here
+ * would reintroduce the empty-cache flash that repopulate was made to avoid.
  */
 export function pruneKeyframeCacheToFiles(files: readonly string[]): void {
   const keep = new Set(files);
@@ -127,8 +196,8 @@ export function pruneKeyframeCacheToFiles(files: readonly string[]): void {
   const stale = new Map<string, Set<string>>();
   for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
     const hash = key.indexOf("#");
-    // Bare-id aliases carry no owner; clearKeyframeCacheForElement takes them
-    // with their prefixed key, so skipping them here loses nothing.
+    // Bare-id aliases carry no owner; deleteElementFromDraft takes them with
+    // their prefixed key, so skipping them here loses nothing.
     if (hash < 0) continue;
     const sourceFile = key.slice(0, hash);
     if (keep.has(sourceFile)) continue;
@@ -136,9 +205,25 @@ export function pruneKeyframeCacheToFiles(files: readonly string[]): void {
     ids.add(key.slice(hash + 1));
     stale.set(sourceFile, ids);
   }
-  for (const [sourceFile, ids] of stale) {
-    for (const id of ids) clearKeyframeCacheForElement(sourceFile, id);
-  }
+  publishKeyframeCache((draft) => {
+    for (const [sourceFile, ids] of stale) {
+      for (const id of ids) deleteElementFromDraft(draft, sourceFile, id);
+    }
+  });
+}
+
+/**
+ * The source-scoped key that names one element across panels and the store
+ * (focused ease segment, keyframe cache reads). Four call sites built this
+ * string by hand and two of them omitted the index.html fallback, so an element
+ * with no sourceFile was addressed as `#box` by one panel and `index.html#box`
+ * by another and the two never matched. One builder keeps them on one key.
+ */
+export function scopedElementKey(element: {
+  sourceFile?: string | null;
+  id?: string | null;
+}): string {
+  return `${element.sourceFile || "index.html"}#${element.id}`;
 }
 
 /** Every cache key a write for this element sets, in read-preference order. */
@@ -148,15 +233,37 @@ export function elementCacheKeys(sourceFile: string, elementId: string): string[
     : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
 }
 
+/** Replace one file's complete cache snapshot with one atomic store publish. */
+export function replaceKeyframeCacheForFile(
+  sourceFile: string,
+  entries: ReadonlyMap<string, KeyframeCacheEntry>,
+  animationsByElement: ReadonlyMap<string, GsapAnimation[]>,
+): void {
+  publishKeyframeCache((draft) => {
+    for (const id of cachedElementIdsForFile(
+      sourceFile,
+      draft.keyframeCache,
+      draft.gsapAnimations,
+    )) {
+      deleteElementFromDraft(draft, sourceFile, id);
+    }
+    for (const [id, entry] of entries) {
+      writeElementIntoDraft(draft, sourceFile, id, entry, animationsByElement.get(id));
+    }
+  });
+}
+
 export function writeGsapAnimationsForElement(
   sourceFile: string,
   elementId: string,
   animations: GsapAnimation[] | undefined,
 ): void {
-  const { setGsapAnimations } = usePlayerStore.getState();
-  for (const key of elementCacheKeys(sourceFile, elementId)) {
-    setGsapAnimations(key, animations);
-  }
+  publishKeyframeCache((draft) => {
+    for (const key of elementCacheKeys(sourceFile, elementId)) {
+      if (animations) draft.gsapAnimations.set(key, animations);
+      else draft.gsapAnimations.delete(key);
+    }
+  });
 }
 
 function buildCacheKey(sourceFile: string, elementId: string): string {

package/src/hooks/gsapKeyframeCommit.ts

@@ -1,7 +1,7 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { absoluteToPercentageForAnimation, findTweenAtTime } from "../utils/globalTimeCompiler";
-import { PROPERTY_DEFAULTS, selectorFromSelection } from "./gsapShared";
+import { PROPERTY_DEFAULTS, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import { roundToCenti } from "../utils/rounding";
 
 type CommitFn = (
@@ -22,6 +22,9 @@ export async function commitKeyframeAtTimeImpl(
   properties: Record<string, number | string>,
   commitMutation: CommitFn,
 ): Promise<void> {
+  // Matching an authored tween is a string compare against what the author
+  // wrote, so it keeps using the selection's own selector; the NEW tween below
+  // is authored with the one-element form instead.
   const selector = selectorFromSelection(selection);
   if (!selector) return;
 
@@ -60,12 +63,18 @@ export async function commitKeyframeAtTimeImpl(
       },
     );
   } else {
+    // Null means the live DOM could not prove any one-element form. Falling
+    // back to the author's own selector would write the group-collapsing
+    // target this narrowing exists to prevent, so the keyframe is dropped
+    // instead (see writeTargetSelector).
+    const target = writeTargetSelector(selection);
+    if (!target) return;
     const defaultDuration = 0.5;
     await commitMutation(
       selection,
       {
         type: "add-with-keyframes" as const,
-        targetSelector: selector,
+        targetSelector: target,
         position: absoluteTime,
         duration: defaultDuration,
         keyframes: [

package/src/hooks/gsapResizeIntercept.ts

@@ -79,7 +79,7 @@ export async function tryGsapResizeIntercept(
   if (!anim || isInstantHold(anim)) {
     const sel = selectorFromSelection(selection);
     if (!sel) return false;
-    const sizeSet = anim ?? findSizeSetAnimation(animations, sel);
+    const sizeSet = anim ?? findSizeSetAnimation(animations, sel, selection.element);
 
     // If the element is animated (has a real tween, not just a static size
     // hold), keyframe the size at the playhead so other keyframes keep theirs —
@@ -242,7 +242,7 @@ export async function tryGsapResizeIntercept(
     const currentAnimations = fetchFallbackAnimations
       ? await fetchFallbackAnimations()
       : (resolved?.animations ?? animations);
-    const existingSet = findExistingPositionWrite(currentAnimations, selector);
+    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
     // Delta chosen so the drag-path math composes back to exactly `corrected`
     // (no drag scratch attrs exist during a resize, so base = gsapPos).
     await commitStaticGsapPosition(