fix(studio): undoing a crop leaves a GSAP-animated layer where its file puts it

Author: miguel-heygen

packages/studio/src/utils/gsapSoftReload.ts

@@ -195,6 +195,7 @@ export interface SoftReloadOptions {
   currentTimeOverride?: number;
   /** After-write file HTML — the primary source for the authored opacity and transform restore. */
   authoredHtml?: string;
+  reparse?: Element[];
 }
 
 /**
@@ -251,7 +252,7 @@ export function applySoftReload(
   scriptText: string,
   options: SoftReloadOptions = {},
 ): SoftReloadResult {
-  const { onAsyncFailure, currentTimeOverride, authoredHtml } = options;
+  const { onAsyncFailure, currentTimeOverride, authoredHtml, reparse = [] } = options;
   if (!iframe || !scriptText) return "cannot-soft-reload";
 
   const win = iframe.contentWindow as IframeWindow | null;
@@ -329,7 +330,7 @@ export function applySoftReload(
   // fallow-ignore-next-line complexity
   const doReload = () => {
     const timelines = win.__timelines;
-    const allTargets: Element[] = [];
+    const allTargets: Element[] = [...reparse];
 
     // Kill ONLY the target composition's timeline(s) — leaving every other
     // composition's timeline (and its children on the global timeline) intact.

packages/studio/src/utils/gsapUndoRestore.browser.test.ts

@@ -0,0 +1,94 @@
+// Real Chrome: the box GSAP and a stylesheet translate produce together is what no DOM emulation computes.
+import { mkdtempSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import puppeteer, { type Browser } from "puppeteer-core";
+import { build } from "vite";
+import { afterAll, beforeAll, expect, it } from "vitest";
+import { findSystemChrome } from "../../vite.browser";
+import { writeFixture } from "../../tests/e2e/edit-accuracy/grid.mjs";
+
+const require = createRequire(import.meta.url);
+const CROP = "inset(0px 40px 0px 0px)";
+let browser: Browser;
+let undoBundle: string;
+
+beforeAll(async () => {
+  const executablePath = findSystemChrome();
+  if (!executablePath) throw new Error("no Chrome found: set HYPERFRAMES_BROWSER_PATH");
+  browser = await puppeteer.launch({ executablePath, headless: true, args: ["--no-sandbox"] });
+  const out = await build({
+    configFile: false,
+    logLevel: "silent",
+    resolve: {
+      alias: { canvas: fileURLToPath(new URL("../shims/canvasBrowserStub.js", import.meta.url)) },
+    },
+    build: {
+      write: false,
+      minify: false,
+      lib: {
+        entry: fileURLToPath(new URL("./gsapUndoRestore.ts", import.meta.url)),
+        formats: ["iife"],
+        name: "hfUndo",
+      },
+    },
+  });
+  undoBundle = (Array.isArray(out) ? out[0]! : (out as { output: [{ code: string }] })).output[0]
+    .code;
+}, 60_000);
+
+afterAll(() => browser?.close());
+
+it.each([
+  { gsap: "hold", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "px", rotation: 0 },
+  { gsap: "tween", placement: "xpercent", rotation: 30 },
+])("an undone crop leaves a $gsap $placement r$rotation layer where it was", async (spec) => {
+  const dir = join(mkdtempSync(join(tmpdir(), "undo-gsap-")), "case");
+  writeFixture({ gesture: "crop", nesting: "root", zoom: 100, ...spec }, dir);
+  const restored = readFileSync(join(dir, "index.html"), "utf8");
+  const previous = restored.replace(
+    `<div id="target"`,
+    `<div id="target" style="clip-path: ${CROP}"`,
+  );
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1920, height: 1080 });
+  await page.setRequestInterception(true);
+  page.on("request", (request) =>
+    request.url().endsWith("/gsap.min.js")
+      ? request.respond({ body: readFileSync(require.resolve("gsap/dist/gsap.min.js"), "utf8") })
+      : request.continue(),
+  );
+  await page.setContent(restored, { waitUntil: "load" });
+  await page.evaluate(readFileSync(require.resolve("@hyperframes/core/runtime"), "utf8"));
+  await page.waitForFunction(() => "__player" in window);
+  await page.evaluate(undoBundle);
+
+  const box = () =>
+    page.evaluate(() => {
+      const { left, top, width, height } = document
+        .getElementById("target")!
+        .getBoundingClientRect();
+      return [left, top, width, height].map((n) => Math.round(n * 100) / 100);
+    });
+  await page.evaluate(() =>
+    (window as unknown as { __player: { seek(t: number): void } }).__player.seek(1),
+  );
+  const before = await box();
+  const outcome = await page.evaluate(
+    (files, crop) => {
+      document.getElementById("target")!.style.setProperty("clip-path", crop);
+      const undo = (window as unknown as { hfUndo: typeof import("./gsapUndoRestore") }).hfUndo;
+      const iframe = { contentDocument: document, contentWindow: window } as HTMLIFrameElement;
+      return undo.applyUndoRestoreToPreview(iframe, "index.html", files, 1, () => {});
+    },
+    { "index.html": { previous, restored } },
+    CROP,
+  );
+
+  expect(outcome).toBe("soft");
+  expect(await box()).toEqual(before);
+  await page.close();
+});

packages/studio/src/utils/gsapUndoRestore.ts

@@ -338,9 +338,10 @@ export function showRestoreInPlace(
  *      element — so a canvas-position revert lands on the live DOM the runtime's
  *      seek-reapply reads from, not just on disk.
  *   2. The runtime refresh depends on what changed:
- *      - GSAP script text actually CHANGED between previous and restored → the
- *        restored script is re-run in place via applySoftReload (re-seeks to
- *        `currentTime`, re-folds manual edits).
+ *      - GSAP script text actually CHANGED between previous and restored, or a
+ *        synced element was parsed by GSAP → the restored script is re-run in
+ *        place via applySoftReload (re-seeks to `currentTime`, re-folds manual
+ *        edits, re-parses those elements); several scripts can't, so it reloads.
  *      - Script unchanged or absent (the overwhelmingly common undo: z-order,
  *        lane move, timing shift, style tweak) → NO script execution — the
  *        blink-free finalization only (seek + __hfForceTimelineRebind + manual
@@ -383,12 +384,20 @@ export function applyUndoRestoreToPreview(
   const active = files[activeDocPath];
   const restoredScript = active ? extractGsapScriptText(active.restored) : null;
   const previousScript = active ? extractGsapScriptText(active.previous) : null;
-  if (restoredScript && restoredScript !== previousScript) {
+  const reparse = plan.scripted
+    ? plan.targets.map(({ live }) => live).filter((el) => "_gsap" in el)
+    : [];
+  if (reparse.length && !restoredScript) {
+    reloadPreview();
+    return "full";
+  }
+  if (restoredScript && (restoredScript !== previousScript || reparse.length)) {
     syncStaleEditMarks(doc, active);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
       authoredHtml: active.restored,
+      reparse,
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();