From a423c9300eed506ae344f05c7bb86fb18e4fe85e Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Sun, 26 Jul 2026 02:23:27 +0200
Subject: [PATCH] refactor(studio): read animation cache keys through their
 owner

The timeline-element animation lookup rebuilt the three cache-key variants
by hand. elementCacheKeys already owns that list for the writers, so this
reader takes it from there instead of drifting from it.
---
 .../src/components/nle/useTimelineEditCallbacks.ts | 14 ++++++++------
 .../studio/src/hooks/gsapKeyframeCacheHelpers.ts   |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
index fa80561bb..f6e6f68f9 100644
--- a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
+++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
@@ -11,6 +11,7 @@ import {
 } from "../../contexts/DomEditContext";
 import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler";
 import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache";
+import { elementCacheKeys } from "../../hooks/gsapKeyframeCacheHelpers";
 import { resolveKeyframeRetime } from "../editor/keyframeRetime";
 import type { DomEditSelection } from "../editor/domEditingTypes";
 import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
@@ -121,12 +122,13 @@ export function useTimelineEditCallbacks({
       const { gsapAnimations } = usePlayerStore.getState();
       const { sourceFile, domId } = splitTimelineElementKey(elementKey);
       const scope = sourceFile ?? activeCompPath ?? "index.html";
-      return (
-        gsapAnimations.get(`${scope}#${domId}`) ??
-        gsapAnimations.get(`index.html#${domId}`) ??
-        gsapAnimations.get(domId) ??
-        []
-      );
+      // elementCacheKeys owns the key-variant list the writers use; reading it
+      // back by hand here is how the two sides drift.
+      for (const key of elementCacheKeys(scope, domId)) {
+        const animations = gsapAnimations.get(key);
+        if (animations) return animations;
+      }
+      return [];
     },
     [activeCompPath],
   );
diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
index 1e806a029..efe0941df 100644
--- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
+++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
@@ -113,7 +113,8 @@ export function clearKeyframeCacheForFile(sourceFile: string): void {
   }
 }
 
-function elementCacheKeys(sourceFile: string, elementId: string): string[] {
+/** Every cache key a write for this element sets, in read-preference order. */
+export function elementCacheKeys(sourceFile: string, elementId: string): string[] {
   return sourceFile === "index.html"
     ? [`index.html#${elementId}`, elementId]
     : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];