@hyperframes/studio 0.8.133 → 0.8.135

package/src/hooks/useGestureCommit.test.tsx

@@ -10,6 +10,7 @@ import { mountReactHarness } from "./domSelectionTestHarness";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
 import { useGestureCommit } from "./useGestureCommit";
+import { xAtTime } from "./gsapPlaybackTestHarness";
 
 vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
@@ -243,6 +244,94 @@ it.each([
   },
 );
 
+const FROM_0_TO_100 = [
+  { percentage: 0, properties: { x: 0 } },
+  { percentage: 100, properties: { x: 100 } },
+];
+
+function positionTween(
+  duration: number,
+  eases: { ease?: string; easeEach?: string } = {},
+  keyframes = FROM_0_TO_100,
+) {
+  return {
+    id: "card-position",
+    targetSelector: "#card",
+    propertyGroup: "position",
+    method: "to",
+    properties: { x: 0, y: 0 },
+    resolvedStart: 0,
+    position: 0,
+    duration,
+    ...(eases.ease ? { ease: eases.ease } : {}),
+    keyframes: {
+      ...(eases.easeEach ? { easeEach: eases.easeEach } : {}),
+      keyframes,
+    },
+  } as unknown as GsapAnimation;
+}
+
+/** Records the mocked 1 s gesture (x 0, 50, 100) from 0 s over `tween`; resolves to the merge mutation. */
+async function recordMergeInto(tween: GsapAnimation) {
+  const writer = vi.fn(
+    async (_mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+      options.onResult?.({ ok: true, changed: true });
+    },
+  );
+  const hook = mountRecording(writer, [tween]);
+  act(() => hook().handleToggleRecording("button"));
+  await act(async () => {
+    hook().handleToggleRecording();
+    await vi.waitFor(() => expect(writer).toHaveBeenCalled());
+  });
+  expect(writer.mock.calls[0]![1]).toMatchObject({ label: "Gesture recording (merge)" });
+  return writer.mock.calls[0]![0] as unknown as Parameters<typeof xAtTime>[0] & {
+    type: string;
+    ease?: string;
+    easeEach?: string;
+  };
+}
+
+it("keeps the tween's eases when a recording merges into it", async () => {
+  const merge = await recordMergeInto(
+    positionTween(2, { ease: "back.out", easeEach: "power2.out" }),
+  );
+  expect(merge).toMatchObject({
+    type: "replace-with-keyframes",
+    ease: "back.out",
+    easeEach: "power2.out",
+  });
+  // Recorded segments the fitter left unset stay constant speed instead of taking easeEach.
+  expect(merge.keyframes.map((kf) => kf.ease)).toEqual([undefined, "none", "none", undefined]);
+});
+
+it("plays a recording merged into an eased tween at the times it was recorded", async () => {
+  const merge = await recordMergeInto(positionTween(3, { ease: "power2.out" }));
+  expect(xAtTime(merge, 0.5)).toBeCloseTo(50, 0);
+  expect(xAtTime(merge, 1)).toBeCloseTo(100, 0);
+});
+
+it("keeps recorded keyframes apart over the tail of a power4.out tween", async () => {
+  usePlayerStore.setState({ currentTime: 9 });
+  const merge = await recordMergeInto(positionTween(10, { ease: "power4.out" }));
+  expect(xAtTime(merge, 9.5)).toBeCloseTo(50, 0);
+});
+
+it("keeps a keyframe playing at 8.5 s when a recording covers 9-10 s of a power2.out tween", async () => {
+  usePlayerStore.setState({ currentTime: 9 });
+  const at8_5s = { percentage: 99.6625, properties: { x: 80 } };
+  const merge = await recordMergeInto(
+    positionTween(10, { ease: "power2.out" }, [FROM_0_TO_100[0]!, at8_5s, FROM_0_TO_100[1]!]),
+  );
+  expect(merge.keyframes).toContainEqual(at8_5s);
+  expect(xAtTime(merge, 8.5)).toBeCloseTo(80, 0);
+});
+
+it("writes merged keyframe percentages rounded, not as float noise", async () => {
+  const merge = await recordMergeInto(positionTween(3));
+  expect(merge.keyframes.map((kf) => kf.percentage)).toEqual([0, 16.667, 33.333, 100]);
+});
+
 it("keeps a pending recording isolated until its writer settles", async () => {
   let release!: () => void;
   const pending = new Promise<void>((resolve) => {

package/src/hooks/useGestureCommit.ts

@@ -16,8 +16,15 @@ import { trackPreviewEditResult } from "../utils/previewFeatureUsage";
 import { observeGsapGesture } from "./gsapGestureOutcome";
 import { roundTo3 } from "../utils/rounding";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
-import { isInstantHold, idSelector, writeTargetSelector, tweenTargetsElement } from "./gsapShared";
+import {
+  isInstantHold,
+  idSelector,
+  keyframeEases,
+  writeTargetSelector,
+  tweenTargetsElement,
+} from "./gsapShared";
 import { useStableHandlers } from "./useStableHandlers";
+import { progressAtTime, runEaseOf, timeAtProgress, warpsTime } from "../utils/gsapKeyframeEases";
 
 type RecordedKeyframe = {
   percentage: number;
@@ -269,25 +276,34 @@ export function useGestureCommit({
 
             if (overlaps) {
               const existingKfs = existingPositionTween.keyframes?.keyframes ?? [];
-              const rangeStartPct =
+              const startTimePct =
                 tweenDur > 0 ? Math.max(0, ((recStart - tweenStart) / tweenDur) * 100) : 0;
-              const rangeEndPct =
+              const endTimePct =
                 tweenDur > 0 ? Math.min(100, ((recEnd - tweenStart) / tweenDur) * 100) : 100;
+              const runEase = runEaseOf(existingPositionTween);
+              const roundPct = warpsTime(runEase) ? (pct: number) => pct : roundTo3;
 
               const preserved = existingKfs
-                .filter(
-                  (kf) => kf.percentage < rangeStartPct - 0.5 || kf.percentage > rangeEndPct + 0.5,
-                )
+                .filter((kf) => {
+                  const playsAt = timeAtProgress(runEase, kf.percentage);
+                  return playsAt < startTimePct - 0.5 || playsAt > endTimePct + 0.5;
+                })
                 .map((kf) => ({
                   percentage: kf.percentage,
                   properties: kf.properties,
                   ...(kf.ease ? { ease: kf.ease } : {}),
                 }));
 
-              const mapped = keyframes.map((kf) => ({
-                percentage: rangeStartPct + (kf.percentage / 100) * (rangeEndPct - rangeStartPct),
+              const constantSpeed = { ease: "none" };
+              const mapped = keyframes.map((kf, index) => ({
+                percentage: roundPct(
+                  progressAtTime(
+                    runEase,
+                    startTimePct + (kf.percentage / 100) * (endTimePct - startTimePct),
+                  ),
+                ),
                 properties: kf.properties,
-                ...(kf.ease ? { ease: kf.ease } : {}),
+                ...(kf.ease ? { ease: kf.ease } : index > 0 ? constantSpeed : {}),
               }));
 
               const merged = [...preserved, ...mapped].sort((a, b) => a.percentage - b.percentage);
@@ -303,6 +319,7 @@ export function useGestureCommit({
                       : tweenStart,
                   duration: tweenDur,
                   keyframes: merged,
+                  ...keyframeEases(existingPositionTween),
                 },
                 { label: "Gesture recording (merge)", softReload: true, keyframeAction: "add" },
               );

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -424,6 +424,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       expect.any(Function),
       undefined,
       expect.any(Function),
+      expect.objectContaining({ frozen: true }),
     );
     act(() => h.root.unmount());
   });

package/src/hooks/useGsapAwareEditing.ts

@@ -16,7 +16,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { tryGsapDragIntercept, tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import { computeDraggedGsapPosition, freezeDragStamp } from "./draggedGsapPosition";
 import { readGsapPositionFromIframe } from "./gsapPositionDetection";
 import { selectorFromSelection } from "./gsapShared";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
@@ -209,6 +209,7 @@ export function useGsapAwareEditing({
       restore: () => void = () => undefined,
       route?: { plainTranslate: boolean },
     ) => {
+      const stamp = freezeDragStamp(selection.element);
       const writes = observeGsapGesture(gsapCommitMutation);
       if (route?.plainTranslate ?? editsPlainCss(selection.element, "resize")) {
         const result = await handleDomBoxSizeCommit(selection, next, offset, restore);
@@ -256,6 +257,7 @@ export function useGsapAwareEditing({
             previewIframeRef.current,
             commitMutation,
             makeFetchFallback(selection),
+            { stamp },
           );
           // Saved after the size, under its undo key, so the two are one step.
           await saveMove(dragOutcome, async () => {
@@ -279,7 +281,12 @@ export function useGsapAwareEditing({
               x: 0,
               y: 0,
             };
-            const { newX, newY } = computeDraggedGsapPosition(selection.element, offset, gsapPos);
+            const { newX, newY } = computeDraggedGsapPosition(
+              selection.element,
+              offset,
+              gsapPos,
+              stamp,
+            );
             logResize("sync-settle", { gsapPos, offset, newX, newY });
             setElementGsapPosition(selection.element, newX, newY);
           });
@@ -297,6 +304,7 @@ export function useGsapAwareEditing({
                 makeFetchFallback(selection),
                 offset,
                 writes.drawKeepingUndone,
+                stamp,
               );
               assertGsapEditPersisted(outcome);
               // Saved before the buffered GSAP writes, so their reload stays the gesture's last render.

package/src/icons/SystemIcons.tsx

@@ -24,6 +24,9 @@ import {
   Link as PhLink,
   Eyedropper as PhEyedropper,
   Trash as PhTrash,
+  Image as PhImage,
+  BezierCurve,
+  FolderSimple,
 } from "@phosphor-icons/react";
 import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
 
@@ -75,3 +78,6 @@ export const Scissors = makeIcon(PhScissors);
 export const Link = makeIcon(PhLink);
 export const Eyedropper = makeIcon(PhEyedropper);
 export const Trash = makeIcon(PhTrash);
+export const ImageIcon = makeIcon(PhImage);
+export const Vector = makeIcon(BezierCurve);
+export const Folder = makeIcon(FolderSimple);

package/src/layersPanelExport.test.tsx

@@ -29,12 +29,17 @@ afterEach(() => {
 });
 
 /** The host's preview (title in front of bg, rows to match) and its edit session, mounted around the panel. */
-async function mountPanel(wrap: (panel: ReactNode) => ReactNode = (panel) => panel) {
+const TWO_BOXES =
+  '<div data-composition-id="main"><div id="bg" style="z-index:1"></div><div id="title" style="z-index:2"></div></div>';
+
+async function mountPanel(
+  wrap: (panel: ReactNode) => ReactNode = (panel) => panel,
+  picture = TWO_BOXES,
+) {
   const iframe = document.createElement("iframe");
   document.body.appendChild(iframe);
   const doc = iframe.contentDocument!;
-  doc.body.innerHTML =
-    '<div data-composition-id="main"><div id="bg" style="z-index:1"></div><div id="title" style="z-index:2"></div></div>';
+  doc.body.innerHTML = picture;
   usePlayerStore.setState({ elements: [clip("title", 0), clip("bg", 1)] });
   const session = {
     domEditSelection: null,
@@ -84,7 +89,7 @@ async function dragBackRowToFront() {
 it("lists, selects and reorders the host's preview layers through the host's session", async () => {
   const { doc, session, root } = await mountPanel();
 
-  expect(rowLabels()).toEqual(["DiTitle", "DiBg"]);
+  expect(rowLabels()).toEqual(["Title", "Bg"]);
 
   const rows = document.querySelectorAll<HTMLElement>("[data-layer-index]");
   await act(async () => rows[0]!.click());
@@ -113,3 +118,39 @@ it("mirrors the reorder into the timeline rows through the host's move handler",
   expect(bgTrack()).not.toBe(1);
   await act(async () => root.unmount());
 });
+
+it("puts a caret only on a group's row and starts each child's icon where its parent's label starts", async () => {
+  const { root } = await mountPanel(
+    undefined,
+    '<div data-composition-id="main"><h1 id="title" style="z-index:2">Hi</h1>' +
+      '<div id="intro" data-hf-group="Intro" style="z-index:1"><img id="logo">' +
+      '<div id="inner" data-hf-group="Inner"><img id="mark"></div></div>' +
+      '<div id="wrap" style="z-index:0"><div id="box"></div></div></div>',
+  );
+  const rows = [...document.querySelectorAll<HTMLElement>("[data-layer-index]")];
+  const byLabel = (label: string) => rows.find((row) => row.textContent?.startsWith(label))!;
+  const kind = (label: string) =>
+    byLabel(label).querySelector("[data-layer-kind]")?.getAttribute("data-layer-kind");
+  expect(["Title", "Intro", "Logo", "Inner", "Mark"].map(kind)).toEqual([
+    "text",
+    "group",
+    "image",
+    "group",
+    "image",
+  ]);
+  expect([kind("Wrap"), kind("Box")]).toEqual(["group", "shape"]);
+  expect(byLabel("Wrap").firstElementChild?.getAttribute("aria-label")).toBe("Collapse children");
+  const icons = ["Title", "Intro", "Logo", "Box"].map(
+    (l) => byLabel(l).querySelector("[data-layer-kind]")!.innerHTML,
+  );
+  expect(new Set(icons).size).toBe(4);
+  for (const row of rows.filter((r) => r.title)) {
+    expect(row.querySelector<HTMLElement>("[data-layer-kind]")!.title).toContain(row.title);
+  }
+  expect(byLabel("Title").firstElementChild?.hasAttribute("data-layer-kind")).toBe(true);
+  expect(byLabel("Intro").firstElementChild?.getAttribute("aria-label")).toBe("Collapse children");
+  expect(
+    ["Title", "Intro", "Logo", "Inner", "Mark"].map((l) => byLabel(l).style.paddingLeft),
+  ).toEqual(["8px", "8px", "56px", "56px", "104px"]);
+  await act(async () => root.unmount());
+});

package/src/utils/elementGsap.ts

@@ -8,7 +8,6 @@
 type ElementGsapWindow = Window & {
   gsap?: {
     set?: (target: Element, vars: Record<string, number>) => void;
-    getProperty?: (target: Element, prop: string) => unknown;
   };
 };
 
@@ -38,10 +37,12 @@ export function setElementGsapScale(element: HTMLElement, x: number, y: number):
   return true;
 }
 
-/** The element's GSAP numeric property, or null when unreadable. */
-export function readElementGsapNumber(element: HTMLElement, prop: string): number | null {
-  const value = Number(gsapOf(element)?.getProperty?.(element, prop));
-  return Number.isFinite(value) ? value : null;
+/** Set the element's GSAP width/height. Returns false when no runtime is reachable. */
+export function setElementGsapSize(element: HTMLElement, width: number, height: number): boolean {
+  const gsap = gsapOf(element);
+  if (!gsap?.set) return false;
+  gsap.set(element, { width, height });
+  return true;
 }
 
 /** The targets CSSPlugin styles: not plain objects (the runtime's filler) or XML-namespace elements. */

package/src/utils/gsapKeyframeEases.ts

@@ -50,6 +50,8 @@ function timingEase(runEase: string | undefined): ((progress: number) => number)
   return timingEases.get(runEase) ?? null;
 }
 
+export const warpsTime = (runEase: string | undefined) => timingEase(runEase) !== null;
+
 /** The keyframe progress (0-100) GSAP shows at `timePercentage` of a tween with this run ease. */
 export function progressAtTime(runEase: string | undefined, timePercentage: number): number {
   const run = timingEase(runEase);

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

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const reads = vi.hoisted(() => ({ shape: [] as string[] }));
+
+vi.mock("@hyperframes/parsers/gsap-parser-acorn", async (importOriginal) => {
+  const real = await importOriginal<typeof import("@hyperframes/parsers/gsap-parser-acorn")>();
+  return {
+    ...real,
+    scriptShape: (code: string, mask?: boolean) => (
+      reads.shape.push(code), real.scriptShape(code, mask)
+    ),
+  };
+});
+
+const { planLiveRetime } = await import("./gsapLiveRetime");
+
+const at = (start: number) =>
+  `var tl = gsap.timeline({ paused: true });\ntl.to("#a", { x: 1, duration: 1 }, ${start});\nwindow.__timelines["t"] = tl;`;
+
+describe("planLiveRetime", () => {
+  beforeEach(() => {
+    reads.shape.length = 0;
+  });
+
+  it("reads each script's shape once across two drags in a row", () => {
+    expect(planLiveRetime(at(0), at(1)).kind).toBe("retime");
+    expect(planLiveRetime(at(1), at(2)).kind).toBe("retime");
+
+    expect(reads.shape).toEqual([at(0), at(1), at(2)]);
+  });
+
+  it("keeps the live script's shape while saves land before the preview catches up", () => {
+    planLiveRetime(at(10), at(11));
+    planLiveRetime(at(10), at(12));
+    planLiveRetime(at(10), at(13));
+
+    expect(reads.shape).toEqual([at(10), at(11), at(12), at(13)]);
+  });
+});

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]! }))