@hyperframes/studio 0.8.134 → 0.8.135

package/src/utils/gsapLiveRetime.realGsap.test.ts

@@ -17,9 +17,11 @@ const BEFORE = [
 const SAMPLES = Array.from({ length: 25 }, (_, i) => i * 0.25);
 
 /** Runs a composition script and binds its timeline at `at`, as the preview's runtime does. */
-function play(script: string, at = 0, nested = "") {
+function play(script: string, at = 0, nested = "", registered = "") {
   const win = { __timelines: {} as Record<string, gsap.core.Timeline> };
   new Function("gsap", "window", script)(gsap, win);
+  // Another composition's script, which registers its own timeline beside this one.
+  new Function("gsap", "window", registered)(gsap, win);
   const timeline = win.__timelines.t!;
   // The runtime nests each sub-composition's timeline into its host's; the script does not know them...
   const sub = gsap.timeline().to({}, { duration: 6.7 });
@@ -52,12 +54,12 @@ const shownNow = () =>
   );
 
 /** A preview iframe whose live script is `script`, built and bound. */
-function preview(script: string, nested = "") {
+function preview(script: string, nested = "", registered = "") {
   const tag = document.createElement("script");
   tag.type = "text/plain"; // the runtime already ran it; happy-dom must not run it again
   tag.textContent = script;
   document.body.appendChild(tag);
-  const { win, timeline } = play(script, 0, nested);
+  const { win, timeline } = play(script, 0, nested, registered);
   const rebind = vi.fn();
   // The runtime hooks a rebind needs; a soft reload would also need `gsap`, which this preview lacks.
   Object.assign(win, { __hfForceTimelineRebind: rebind, __player: { seek: vi.fn() } });
@@ -245,6 +247,14 @@ it.each([
     after: script('tl.to("#a", { x: 100, duration: 1 }, 3);'),
     nested: 'sub.to("#a", { x: 50, duration: 1 }, 2);',
   },
+  {
+    name: "another composition's timeline on the moved tween's element",
+    path: "rerun",
+    before: script('tl.to("#a", { x: 100, duration: 1 }, 0);'),
+    after: script('tl.to("#a", { x: 100, duration: 1 }, 3);'),
+    registered:
+      'window.__timelines.scene = gsap.timeline({ paused: true }).to("#a", { x: 50, duration: 1 }, 2);',
+  },
   {
     name: "a delayed tween that GSAP orders after the moved one",
     path: "rerun",
@@ -300,7 +310,7 @@ it.each([
   },
   {
     name: "a move of a sub-composition's host",
-    path: "rerun",
+    path: "retime",
     before: script('tl.to("#a", { y: 40, duration: 1 }, 0);'),
     after: script('tl.to("#a", { y: 40, duration: 1 }, 2);'),
     setup: () => {
@@ -311,17 +321,10 @@ it.each([
   },
   {
     name: "a tween on an element inside a sub-composition's host",
-    path: "rerun",
-    before: script('tl.to("#a", { y: 40, duration: 1 }, 0);'),
-    after: script('tl.to("#a", { y: 40, duration: 1 }, 2);'),
-    setup: () => inComposition("t", inComposition("scene", document.getElementById("a")!)),
-  },
-  {
-    name: "a tween on an element of the timeline's own composition",
     path: "retime",
     before: script('tl.to("#a", { y: 40, duration: 1 }, 0);'),
     after: script('tl.to("#a", { y: 40, duration: 1 }, 2);'),
-    setup: () => inComposition("t", document.getElementById("a")!),
+    setup: () => inComposition("t", inComposition("scene", document.getElementById("a")!)),
   },
   {
     name: "a set and a tween on one element that round to the same start",
@@ -358,10 +361,10 @@ it.each([
   },
 ])(
   "after a drop over $name, the live preview equals a fresh load or the script re-runs",
-  async ({ before, after, nested = "", at = 0, path, setup, unplayed }) => {
+  async ({ before, after, nested = "", registered = "", at = 0, path, setup, unplayed }) => {
     setup?.();
     const error = vi.spyOn(console, "error");
-    const live = preview(before, nested);
+    const live = preview(before, nested, registered);
     // Played through once, then parked: every tween has recorded its start values.
     if (!unplayed) live.timeline.totalTime(live.timeline.duration(), false);
     live.timeline.totalTime(at, false);
@@ -371,7 +374,7 @@ it.each([
       const shown = shownNow();
       const got = observe(live.timeline);
       live.timeline.revert();
-      const fresh = play(after, at, nested).timeline;
+      const fresh = play(after, at, nested, registered).timeline;
       expect(shown).toEqual(shownNow());
       expect(got).toEqual(observe(fresh));
     }
@@ -433,6 +436,18 @@ it("reloads the preview, and says so, when moving the live tweens throws", async
   expect(error).toHaveBeenCalledTimes(1);
 });
 
+it("re-runs a script that does not parse as a classic script, such as one with an import", () => {
+  const before = script('import "./setup.js";', 'tl.to("#a", { x: 1, duration: 1 }, 0);');
+  const after = script('import "./setup.js";', 'tl.to("#a", { x: 1, duration: 1 }, 1);');
+  expect(planLiveRetime(before, after).kind).toBe("rerun");
+});
+
+it("re-runs the script when the edit also flips an operator in a tween's value", () => {
+  const before = script('tl.to("#a", { x: window.innerWidth - 40, duration: 1 }, 0);');
+  const after = script('tl.to("#a", { x: window.innerWidth + 40, duration: 1 }, 1);');
+  expect(planLiveRetime(before, after).kind).toBe("rerun");
+});
+
 it("re-runs the script when the edit also joins two words of code", () => {
   const before = script('tl.to("#a", { x: 1, duration: 1 }, 0);', "var b = typeof a;");
   const after = script('tl.to("#a", { x: 1, duration: 1 }, 1);', "var b = typeofa;");
@@ -514,6 +529,15 @@ it("syncs a timeline move by moving the live tweens and rebinding, without re-ru
   expect(document.querySelectorAll("script")).toHaveLength(1);
 });
 
+it("moves the live tweens when the preview runs the saved script re-printed without its comments", async () => {
+  const live = preview(BEFORE);
+  const saved = `// Seams between sections.\n${moveA().replaceAll('"', "'")}\n/* end */`;
+
+  const reloadPreview = await dropInto(live.iframe, saved);
+
+  expect(reloadPreview).not.toHaveBeenCalled();
+});
+
 it("moves the live tweens when the preview runs a reformatted copy of the saved script", async () => {
   const live = preview(BEFORE);
   live.tag.textContent = reformatted(BEFORE);

package/src/utils/gsapLiveRetime.ts

@@ -1,5 +1,5 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
+import { parseGsapScriptAcorn, scriptShape } from "@hyperframes/parsers/gsap-parser-acorn";
 import { hasExplicitTime } from "@hyperframes/parsers/gsap-writer-acorn";
 import { RUNTIME_FILLER } from "@hyperframes/core/runtime/protocol";
 import {
@@ -30,19 +30,14 @@ export type LiveRetimePlan =
 
 const RERUN = { kind: "rerun" } as const;
 
-/** The preview runs a reformatted copy of the script: compare code, not its layout. */
-const withoutLayout = (code: string) =>
-  code
-    .replace(/\s+/g, " ")
-    .replace(/ ?([^\w$ ]) ?/g, "$1")
-    .trim();
-
 function untimedShape(animation: GsapAnimation): string {
   const { id: _id, position: _p, resolvedStart: _s, duration: _d, ...rest } = animation;
   // An offset into the text, which moves when the preview reformats its copy of the script.
   const provenance = rest.provenance && { ...rest.provenance, sourceRange: undefined };
   return JSON.stringify({ ...rest, provenance }, (_key, value) =>
-    typeof value === "string" && value.startsWith("__raw:") ? withoutLayout(value) : value,
+    typeof value === "string" && value.startsWith("__raw:")
+      ? (scriptShape(`(${value.slice(6)}\n)`) ?? value)
+      : value,
   );
 }
 
@@ -55,13 +50,22 @@ const placedAlone = (animation: GsapAnimation) =>
 const lengthOf = (animation: GsapAnimation) =>
   animation.method === "set" ? 0 : animation.durationUnresolved ? undefined : animation.duration;
 
-/** A timing edit rewrites numbers only; anything else may be code the parser does not read. */
-const withoutNumbers = (script: string) =>
-  withoutLayout(script.replace(/(?<![\w$#.])\d*\.?\d+/g, "0"));
+/** The last two script shapes, by text: a repeat drag starts from the script the last one saved. */
+const shapes = new Map<string, string | null>();
+
+function shapeOf(code: string): string | null {
+  const shape = shapes.has(code) ? (shapes.get(code) as string | null) : scriptShape(code, true);
+  shapes.delete(code);
+  shapes.set(code, shape);
+  if (shapes.size > 2) shapes.delete(shapes.keys().next().value!);
+  return shape;
+}
 
 /** Decides, from the two scripts alone, whether a saved edit moved tweens and nothing else. */
 export function planLiveRetime(before: string, after: string): LiveRetimePlan {
-  if (withoutNumbers(before) !== withoutNumbers(after)) return RERUN;
+  // The preview runs the script re-printed by the bundler; a timing edit rewrites numbers only.
+  const shape = shapeOf(before);
+  if (shape === null || shape !== shapeOf(after)) return RERUN;
   const keys = timelineKeys(after);
   if (keys.length !== 1 || timelineKeys(before).join() !== keys.join()) return RERUN;
   const was = parseGsapScriptAcorn(before).animations.filter(onTimeline);
@@ -180,16 +184,6 @@ function sharesOneStretch(tweens: TweenTiming[]): boolean {
   return stretch > 0 && fits;
 }
 
-/** The runtime places a sub-composition's timeline at its host's start once; moving the host leaves it there. */
-function inOrHostsSubComposition(target: unknown, ownId: string): boolean {
-  const element = target as Element;
-  const owner = element.closest?.("[data-composition-id]");
-  return (
-    (owner != null && owner.getAttribute("data-composition-id") !== ownId) ||
-    element.querySelector?.("[data-composition-id]") != null
-  );
-}
-
 /** Tweens on one element still start in the order they did, an equal start in script order. */
 const keepsOrder = (tweens: TweenTiming[]) =>
   tweens.every(
@@ -204,6 +198,7 @@ function movesKeepEachElementsHistory(
   timeline: LiveTimeline,
   plan: LiveRetime,
   children: LiveTween[],
+  registry: unknown[],
 ): boolean {
   const byElement = new Map<unknown, number[]>();
   children.forEach((child, i) => {
@@ -216,7 +211,6 @@ function movesKeepEachElementsHistory(
   const moved = new Set<unknown>();
   for (const [target, indexes] of byElement) {
     if (!indexes.some((i) => plan.tweens[i]!.moved)) continue;
-    if (inOrHostsSubComposition(target, plan.key)) return false;
     const tweens = indexes.map((i) => plan.tweens[i]!);
     // GSAP adds delays to the schedule unstretched; a shift keeps every length.
     const shifted = tweens.every((t) => t.duration === t.wasDuration);
@@ -224,13 +218,26 @@ function movesKeepEachElementsHistory(
     if (!keepsOrder(tweens) || !sharesOneStretch(tweens) || !(shifted || undelayed)) return false;
     moved.add(target);
   }
-  return !timeline
-    .getChildren(false, false, true)
-    .some((sub) =>
-      sub
-        .getChildren(true, true, false)
-        .some((tween) => tween.targets?.().some((t) => moved.has(t))),
+  return !animatedElsewhere(timeline, registry, moved);
+}
+
+/** Whether a timeline other than `own` (nested in it, or another registered one) animates any of `targets`. */
+function animatedElsewhere(own: LiveTimeline, registry: unknown[], targets: Set<unknown>): boolean {
+  const seen = new Set<unknown>([own]);
+  const visit = (timeline: LiveTimeline): boolean => {
+    if (seen.has(timeline)) return false;
+    seen.add(timeline);
+    return (
+      timeline
+        .getChildren(false, true, false)
+        .some((tween) => tween.targets?.().some((target) => targets.has(target))) ||
+      timeline.getChildren(false, false, true).some(visit)
     );
+  };
+  const timelines = registry.filter(
+    (entry): entry is LiveTimeline => typeof (entry as LiveTimeline)?.getChildren === "function",
+  );
+  return own.getChildren(false, false, true).some(visit) || timelines.some(visit);
 }
 
 /**
@@ -245,7 +252,8 @@ export function applyLiveRetime(iframe: HTMLIFrameElement | null, plan: LiveReti
   const children = pairedLiveTweens(timeline, plan);
   if (!children) return false;
   if (plan.tweens.some((t) => t.moved)) {
-    if (!movesKeepEachElementsHistory(timeline, plan, children)) return false;
+    const registry = Object.values(win?.__timelines ?? {});
+    if (!movesKeepEachElementsHistory(timeline, plan, children, registry)) return false;
     // Re-added in script order: GSAP orders equal starts by when they were added, as a fresh run does.
     const bySource = plan.tweens
       .map((t, i) => ({ ...t, tween: children[i]! }))

package/src/utils/gsapSoftReload.test.ts

@@ -1,5 +1,7 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
+import { patchRuntimeTweenInPlace } from "../hooks/gsapRuntimePatch";
 import { afterEach, describe, it, expect, vi } from "vitest";
 import {
   readNestedFiles,
@@ -70,6 +72,29 @@ function buildMockIframe(overrides: Record<string, unknown> = {}) {
   };
 }
 
+/** A mock iframe whose document holds one GSAP script and one composition root; `byId` answers id selectors. */
+function iframeWithComposition(script: string, root: Element, byId: Record<string, Element> = {}) {
+  const scriptEl = document.createElement("script");
+  scriptEl.textContent = script;
+  const container = document.createElement("div");
+  container.appendChild(scriptEl);
+  const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
+  (iframe as unknown as { contentDocument: unknown }).contentDocument = {
+    querySelectorAll: (sel: string) =>
+      sel === "script:not([src])"
+        ? [scriptEl]
+        : sel.includes("composition-id")
+          ? [root]
+          : byId[sel]
+            ? [byId[sel]]
+            : [],
+    createElement: (tag: string) => document.createElement(tag),
+    body: container,
+    head: document.createElement("div"),
+  };
+  return iframe;
+}
+
 describe("applySoftReload", () => {
   it('returns "cannot-soft-reload" when iframe is null', () => {
     expect(applySoftReload(null, SCRIPT_TEXT)).toBe("cannot-soft-reload");
@@ -127,23 +152,13 @@ describe("applySoftReload", () => {
     orphan.style.cssText = "left: 1240px; top: 200px; transform: translate(449px, 0px)";
     Object.assign(orphan, { _gsap: {} }); // GSAP cache marker (set by gsap.set)
 
-    const scriptEl = document.createElement("script");
-    scriptEl.textContent = 'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });';
-    const container = document.createElement("div");
-    container.appendChild(scriptEl);
-
     const root = document.createElement("div");
     root.setAttribute("data-composition-id", "root");
     root.appendChild(orphan);
-
-    const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
-    (iframe as unknown as { contentDocument: unknown }).contentDocument = {
-      querySelectorAll: (sel: string) =>
-        sel === "script:not([src])" ? [scriptEl] : sel.includes("composition-id") ? [root] : [],
-      createElement: (tag: string) => document.createElement(tag),
-      body: container,
-      head: document.createElement("div"),
-    };
+    const iframe = iframeWithComposition(
+      'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });',
+      root,
+    );
 
     applySoftReload(iframe, SCRIPT_TEXT);
 
@@ -151,6 +166,37 @@ describe("applySoftReload", () => {
     expect(orphan.style.left).toBe("1240px"); // authored CSS base preserved
   });
 
+  it("clears what a standalone gsap.set wrote once the new script no longer sets it", () => {
+    // An undo of a Design-panel W edit on an animated box removes its gsap.set width.
+    const target = document.createElement("div");
+    target.id = "target";
+    target.style.cssText = "left: 10px; width: 300px";
+    Object.assign(target, { _gsap: {} });
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "root");
+    root.appendChild(target);
+    const iframe = iframeWithComposition(
+      `window.__timelines = window.__timelines || {};
+const tl = gsap.timeline({ paused: true });
+tl.to("#target", { x: 100 });
+gsap.set("#target", { width: 300 });
+window.__timelines["root"] = tl;`,
+      root,
+      { "#target": target },
+    );
+    const restored = `window.__timelines = window.__timelines || {};
+const tl = gsap.timeline({ paused: true });
+tl.to("#target", { x: 100 });
+window.__timelines["root"] = tl;`;
+
+    applySoftReload(iframe, restored, {
+      authoredHtml: `<html><body><div data-composition-id="root"><div id="target" style="left: 10px"></div></div><script>${restored}</script></body></html>`,
+    });
+
+    expect(target.style.width).toBe("");
+    expect(target.style.left).toBe("10px");
+  });
+
   it("wraps execution in __hfSuppressSceneMutations when available", () => {
     let suppressionCalled = false;
     const { iframe } = buildMockIframe({
@@ -917,3 +963,41 @@ describe("applySoftReload over a composition's own markup", () => {
     expect(applySoftReload(iframe, SCRIPT_TEXT)).toBe("cannot-soft-reload");
   });
 });
+
+describe("a gsap.set a live patch applied", () => {
+  it("is cleared by the next soft reload once the new script no longer sets it, and only once", () => {
+    const markup = `<div data-composition-id="root"><div id="a" style="left: 10px"></div></div>`;
+    const doc = document.implementation.createHTMLDocument("");
+    doc.body.innerHTML = `${markup}<script>window.__timelines["root"]=gsap.timeline();</script>`;
+    const set = (target: HTMLElement | HTMLElement[], vars: Record<string, unknown>) => {
+      for (const el of [target].flat()) {
+        if (vars.clearProps) el.removeAttribute("style");
+        else for (const [k, v] of Object.entries(vars)) el.style.setProperty(k, `${v}px`);
+      }
+    };
+    const iframe = {
+      contentDocument: doc,
+      contentWindow: {
+        gsap: { timeline: () => {}, set },
+        __hfForceTimelineRebind: () => {},
+        __timelines: {},
+        __player: { getTime: () => 0, seek: () => {} },
+      },
+    } as unknown as HTMLIFrameElement;
+    const el = doc.getElementById("a")!;
+    const reload = () => {
+      const script = `window.__timelines["root"]=gsap.timeline();gsap.set("#a",{width:300});`;
+      applySoftReload(iframe, script, { authoredHtml: `${markup}<script>${script}</script>` });
+    };
+
+    // W 300, then H 200, then a commit that removes height from the set.
+    patchRuntimeTweenInPlace(iframe, "#a", { kind: "global-set", props: { width: 300 } });
+    patchRuntimeTweenInPlace(iframe, "#a", { kind: "global-set", props: { height: 200 } });
+    reload();
+    expect([el.style.height, el.style.left]).toEqual(["", "10px"]);
+
+    el.style.height = "50px";
+    reload();
+    expect(el.style.height).toBe("50px");
+  });
+});

package/src/utils/gsapSoftReload.ts

@@ -2,7 +2,13 @@ import { COLOR_GRADING_SOURCE_HIDDEN_ATTR } from "@hyperframes/core/color-gradin
 import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 import { findAuthoredElement } from "./authoredSource";
 import { applyAuthoredInlineOpacity, readStampedAuthoredOpacity } from "./authoredOpacity";
-import { authoringFile, collectResetTargets, compositionFile, fileDocs } from "./softReloadTargets";
+import {
+  authoringFile,
+  collectResetTargets,
+  compositionFile,
+  fileDocs,
+  forgetLiveSets,
+} from "./softReloadTargets";
 
 type IframeWindow = Window & {
   __timelines?: Record<string, { kill?: () => void; pause?: () => void }>;
@@ -370,7 +376,12 @@ export function applySoftReload(
   // fallow-ignore-next-line complexity
   const doReload = () => {
     const timelines = win.__timelines;
-    const targets = collectResetTargets(win, doc, targetKeys);
+    const targets = collectResetTargets(
+      win,
+      doc,
+      targetKeys,
+      staleScripts.map((script) => script.textContent ?? ""),
+    );
 
     // Kill ONLY the target composition's timeline(s) — leaving every other
     // composition's timeline (and its children on the global timeline) intact.
@@ -423,6 +434,7 @@ export function applySoftReload(
         }
       }
     }
+    forgetLiveSets(targets);
 
     for (const script of staleScripts) script.remove();
 

package/src/utils/gsapUndoRestore.test.ts

@@ -19,6 +19,7 @@ import {
   diffSoftReloadableRestore,
   showRestoreInPlace,
 } from "./gsapUndoRestore";
+import { recordLiveSet } from "./softReloadTargets";
 import { applyPatch } from "./sourcePatcher";
 import { beginStudioManualEditGesture } from "../components/editor/manualEdits";
 import { studioManualEditSavesIn } from "../components/editor/manualEditsDom";
@@ -215,10 +216,16 @@ describe("applyUndoRestoreToPreview", () => {
   describe("an undo that re-runs a changed script matches a fresh load of the restored file", () => {
     const script = (extra: string) => `window.__timelines["root"]=gsap.timeline();${extra}`;
     const root = (body: string) => `<div data-composition-id="root">${body}</div>`;
-    const undoScriptEdit = (live: string, authored: string, edit: string) => {
+    const undoScriptEdit = (
+      live: string,
+      authored: string,
+      edit: string,
+      patchedLive?: (doc: Document) => void,
+    ) => {
       const { iframe, contentWindow, doc } = buildLiveIframe(
-        `${root(live)}<script>${script(edit)}</script>`,
+        `${root(live)}<script>${script(patchedLive ? "" : edit)}</script>`,
       );
+      patchedLive?.(doc);
       const clearProps = (targets: HTMLElement[]) =>
         targets.forEach((t) => t.removeAttribute("style"));
       Object.assign(contentWindow.gsap, { set: clearProps });
@@ -243,6 +250,18 @@ describe("applyUndoRestoreToPreview", () => {
       expect(doc.getElementById("a")!.getAttribute("style")).toBe("width: 300px");
     });
 
+    it("drops the width a W edit set live, though the preview never ran its gsap.set", () => {
+      // The Design panel applies W to the live element and writes the set only to the file.
+      const doc = undoScriptEdit(
+        `<div id="a" style="left: 10px; width: 300px">t</div>`,
+        `<div id="a" style="left: 10px">t</div>`,
+        `gsap.set("#a",{width:300});`,
+        (live) => recordLiveSet(live.getElementById("a")!, { width: 300 }),
+      );
+      const { style } = doc.getElementById("a")!;
+      expect([style.width, style.left]).toEqual(["", "10px"]);
+    });
+
     it("keeps the authored inline rotation of an element GSAP moved", () => {
       const doc = undoScriptEdit(
         `<div id="r" style="left: 10px; transform: translate(116px, 72px) rotate(20deg)">t</div>`,

package/src/utils/softReloadTargets.ts

@@ -1,4 +1,5 @@
 // Which elements a GSAP soft reload resets, what their tweens wrote, and which file writes each.
+import { parseGsapScript } from "@hyperframes/parsers/gsap-parser";
 import { parseSavedSource } from "./authoredSource";
 import { elementTargets } from "./elementGsap";
 
@@ -49,6 +50,7 @@ export function collectResetTargets(
   win: { __timelines?: Record<string, unknown> },
   doc: Document,
   targetKeys: string[],
+  outgoingScripts: readonly string[] = [],
 ): Map<Element, Set<string>> {
   const targets = new Map<Element, Set<string>>();
   const timelines = (win.__timelines ?? {}) as Record<string, TweenLike | undefined>;
@@ -61,6 +63,8 @@ export function collectResetTargets(
     } catch {}
   }
   sweepHeldElements(doc, targetKeys, others, targets);
+  addLiveSetTargets(doc, targetKeys, targets);
+  for (const script of outgoingScripts) addStandaloneSetTargets(doc, script, targets);
   return targets;
 }
 
@@ -105,6 +109,58 @@ function sweepHeldElements(
   }
 }
 
+// What a live patch set on each element since its last reload; no script in the preview ran it.
+const liveSets = new WeakMap<Document, Map<Element, Set<string>>>();
+
+export function recordLiveSet(el: Element, vars: Record<string, unknown>): void {
+  const byElement = liveSets.get(el.ownerDocument) ?? new Map<Element, Set<string>>();
+  liveSets.set(el.ownerDocument, byElement);
+  const props = byElement.get(el) ?? new Set<string>();
+  for (const prop of tweenedProps(vars)) props.add(prop);
+  byElement.set(el, props);
+}
+
+function addLiveSetTargets(
+  doc: Document,
+  targetKeys: string[],
+  targets: Map<Element, Set<string>>,
+): void {
+  const roots = new Set<Element | null | undefined>(targetKeys.map((k) => compositionRoot(doc, k)));
+  for (const [el, props] of liveSets.get(doc) ?? []) {
+    if (!roots.has(el) && !roots.has(el.parentElement?.closest("[data-composition-id]"))) continue;
+    const seen = targets.get(el) ?? new Set<string>();
+    for (const prop of props) seen.add(prop);
+    targets.set(el, seen);
+  }
+}
+
+export function forgetLiveSets(reset: Map<Element, unknown>): void {
+  for (const el of reset.keys()) liveSets.get(el.ownerDocument)?.delete(el);
+}
+
+/** Adds what each standalone `gsap.set` in the outgoing script wrote, which no timeline child records. */
+function addStandaloneSetTargets(
+  doc: Document,
+  outgoingScript: string,
+  targets: Map<Element, Set<string>>,
+): void {
+  if (!outgoingScript.includes("gsap.set(")) return;
+  for (const set of parseGsapScript(outgoingScript).animations) {
+    if (set.method !== "set" || !set.global) continue;
+    let els: Element[];
+    try {
+      els = [...doc.querySelectorAll(set.targetSelector)];
+    } catch {
+      continue;
+    }
+    for (const el of els) {
+      const seen = targets.get(el) ?? new Set<string>();
+      for (const prop of tweenedProps(set.properties)) seen.add(prop);
+      targets.set(el, seen);
+    }
+  }
+}
+
 // Each file a reset element may be written in, parsed at most once per reload: the reloaded
 // composition's own file is the one just written, any other comes from the caller.
 export function fileDocs(