@hyperframes/studio 0.8.93 → 0.8.95

package/src/player/components/useTimelineTrackLayout.ts

@@ -10,6 +10,7 @@ import {
   TRACK_H,
   createTimelineRowGeometry,
   type TimelineRowGeometry,
+  type TimelineTrackPadding,
   trackHeights,
   type TimelineTrackHeightClip,
 } from "./timelineLayout";
@@ -164,7 +165,10 @@ function useTimelineRowHeights(
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
   groups: readonly TimelineTrackGroupInfo[],
+  trackPadding: TimelineTrackPadding | undefined,
 ) {
+  const padTop = trackPadding?.top;
+  const padBottom = trackPadding?.bottom;
   const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
   const expandedLaneOwnerIds = usePlayerStore((s) => s.expandedLaneOwnerIds);
   const { laneCounts, rowGeometry } = useMemo(() => {
@@ -207,9 +211,12 @@ function useTimelineRowHeights(
       rowGeometry: createTimelineRowGeometry(
         tracks.map(([track]) => track),
         rowHeights,
+        { top: padTop, bottom: padBottom },
       ),
     };
   }, [
+    padTop,
+    padBottom,
     expandedClipIds,
     expandedLaneOwnerIds,
     gsapAnimations,
@@ -233,6 +240,7 @@ export function useTimelineTrackLayout(
   gsapAnimations: Map<string, GsapAnimation[]>,
   selectedElementId: string | null,
   selectedElementIds: ReadonlySet<string>,
+  trackPadding?: TimelineTrackPadding,
 ) {
   const { tracks, trackStyles, trackOrder, groups, trackGroupOf } =
     useTimelineTrackDerivations(expandedElements);
@@ -244,6 +252,7 @@ export function useTimelineTrackLayout(
     selectedElementId,
     selectedElementIds,
     groups,
+    trackPadding,
   );
 
   return {
@@ -305,8 +314,8 @@ export function useTimelineDisplayLayout(
   const displayTrackOrder = useDisplayTrackOrder(draggedClip, trackOrder);
   const displayRowHeights = useDisplayRowHeights(displayTrackOrder, rowGeometry);
   const displayRowGeometry = useMemo(
-    () => createTimelineRowGeometry(displayTrackOrder, displayRowHeights),
-    [displayTrackOrder, displayRowHeights],
+    () => createTimelineRowGeometry(displayTrackOrder, displayRowHeights, rowGeometry.padding),
+    [displayTrackOrder, displayRowHeights, rowGeometry.padding],
   );
   return {
     displayTrackOrder,

package/src/player/components/useTimelineVirtualRows.test.tsx

@@ -171,4 +171,36 @@ describe("useTimelineVirtualRows", () => {
 
     act(() => root.unmount());
   });
+
+  it("offsets the mounted range by the geometry's own top pad", () => {
+    const keys = Array.from({ length: 1_000 }, (_, index) => index);
+    const topPad = 200 * 48;
+    const geometry = createTimelineRowGeometry(
+      keys,
+      keys.map(() => 48),
+      { top: topPad },
+    );
+    const scroll = createScrollElement(RULER_H + topPad + 300 * 48);
+    const scrollRef = { current: scroll };
+    let rows: ReturnType<typeof useTimelineVirtualRows> = [];
+
+    function Probe() {
+      rows = useTimelineVirtualRows({
+        enabled: true,
+        scrollRef,
+        viewport: viewport(scroll),
+        rowGeometry: geometry,
+        sessionEpoch: 1,
+        pinnedRowKeys: [],
+      });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe)));
+    act(() => {});
+    expect(rows.some((row) => row.index === 300)).toBe(true);
+    expect(rows.some((row) => row.index === 500)).toBe(false);
+    act(() => root.unmount());
+  });
 });

package/src/player/components/useTimelineVirtualRows.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, type RefObject } from "react";
 import { defaultRangeExtractor, useVirtualizer, type Range } from "@tanstack/react-virtual";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import type { TimelineScrollViewportSnapshot } from "./useTimelineScrollViewport";
-import { RULER_H, TRACKS_TOP_PAD, type TimelineRowGeometry } from "./timelineLayout";
+import { RULER_H, type TimelineRowGeometry } from "./timelineLayout";
 
 export interface TimelineVirtualRow {
   readonly index: number;
@@ -84,7 +84,7 @@ export function useTimelineVirtualRows({
     getItemKey,
     overscan: TIMELINE_VIEWPORT_BUDGETS.rowOverscanPerSide,
     rangeExtractor,
-    scrollMargin: RULER_H + TRACKS_TOP_PAD,
+    scrollMargin: RULER_H + rowGeometry.padding.top,
     initialRect: { width: viewport.clientWidth, height: viewport.clientHeight },
     initialOffset,
   });

package/src/utils/gsapSoftReload.test.ts

@@ -426,8 +426,8 @@ describe("ensureMotionPathPluginLoaded", () => {
 // to its AUTHORED value — from the after-write file HTML when provided, else
 // from the parse-time stamp. Otherwise a runtime transient (the color-grading
 // hide's 0, a mid-flight tween value) becomes a permanent tween bound.
-describe("applySoftReload authored-opacity restore", () => {
-  function buildIframeWithTarget(el: HTMLElement, overrides: Record<string, unknown> = {}) {
+describe("applySoftReload authored-style restore", () => {
+  function buildIframeWithTarget(el: Element, overrides: Record<string, unknown> = {}) {
     const scriptEl = document.createElement("script");
     scriptEl.textContent =
       'const tl = gsap.timeline({ paused: true }); tl.to("#box", { opacity: 0.5 });';
@@ -532,4 +532,53 @@ describe("applySoftReload authored-opacity restore", () => {
 
     expect(restoreOpacity(el)).toBe("");
   });
+
+  it("restores the file's inline translate, rotate and scale and drops GSAP's transform", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-hf-id", "hf-1");
+    el.style.cssText =
+      "left: 10px; translate: none; rotate: none; scale: none; transform: translate(9px, 9px)";
+    const { iframe } = buildIframeWithTarget(el);
+    const authoredHtml = `<html><body><div data-hf-id="hf-1" style="translate: 60px 40px; rotate: 15deg; scale: 1.5"></div></body></html>`;
+    expect(applySoftReload(iframe, SCRIPT_TEXT, { authoredHtml })).toBe("applied");
+    const read = (prop: string) => el.style.getPropertyValue(prop);
+    expect(["translate", "rotate", "scale", "transform"].map(read)).toEqual([
+      "60px 40px",
+      "15deg",
+      "1.5",
+      "",
+    ]);
+  });
+
+  it("keeps an SVG child's authored inline transform", () => {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    el.setAttribute("data-hf-id", "hf-1");
+    el.setAttribute("style", "transform: translate(9px, 9px) rotate(20deg)");
+    const { iframe } = buildIframeWithTarget(el);
+    const authoredHtml = `<html><body><svg><rect data-hf-id="hf-1" style="transform: rotate(20deg)"></rect></svg></body></html>`;
+    applySoftReload(iframe, SCRIPT_TEXT, { authoredHtml });
+    expect(el.style.transform).toBe("rotate(20deg)");
+  });
+
+  it("the finalize seek cannot paint the killed timeline over the restored transform", () => {
+    const el = document.createElement("div");
+    el.style.cssText = "translate: none; transform: translate3d(77.5px, 40px, 0px)";
+    const children = [{ targets: () => [el] }];
+    const killed = {
+      kill: vi.fn(),
+      getChildren: () => children,
+      clear: () => void children.splice(0),
+    };
+    // The runtime still seeks the timeline it captured at load until the rebind swaps it.
+    const seek = () =>
+      children.forEach(() => (el.style.transform = "translate3d(77.5px, 0px, 0px)"));
+    let transformAtRebind: string | null = null;
+    const { iframe } = buildIframeWithTarget(el, {
+      __timelines: { root: killed },
+      __player: { getTime: () => 1, seek },
+      __hfForceTimelineRebind: () => (transformAtRebind = el.style.transform),
+    });
+    applySoftReload(iframe, SCRIPT_TEXT);
+    expect(transformAtRebind).toBe("");
+  });
 });

package/src/utils/gsapSoftReload.ts

@@ -131,6 +131,18 @@ function verifyTimelinesPopulated(win: IframeWindow, targetKeys: string[]): bool
   return Object.keys(timelines).filter((k) => k !== "__proxied").length > 0;
 }
 
+// GSAP masks a folded CSS translate/rotate/scale with `none`; a fresh load has only what the file authors.
+function restoreAuthoredTransforms(
+  style: CSSStyleDeclaration,
+  authored: CSSStyleDeclaration | null,
+) {
+  style.transform = authored?.transform ?? "";
+  if (!authored) return;
+  for (const prop of ["translate", "rotate", "scale"]) {
+    style.setProperty(prop, authored.getPropertyValue(prop));
+  }
+}
+
 /**
  * Outcome of a soft-reload attempt. Callers must distinguish PERMANENT failures
  * (the preview genuinely can't be soft-updated — escalate to a full reload) from
@@ -181,7 +193,7 @@ export interface SoftReloadOptions {
   onAsyncFailure?: () => void;
   /** Seek target for the rebuilt timeline; defaults to the iframe player time. */
   currentTimeOverride?: number;
-  /** After-write file HTML — the primary source for authored-opacity restore. */
+  /** After-write file HTML — the primary source for the authored opacity and transform restore. */
   authoredHtml?: string;
 }
 
@@ -299,7 +311,7 @@ export function applySoftReload(
   // parse-time stamp (data-hf-authored-opacity, installAuthoredOpacityCapture)
   // covers elements the file lookup can't resolve. Parsed lazily, at most once.
   let authoredDoc: Document | null | undefined;
-  const findAuthoredSource = (el: HTMLElement): Element | null => {
+  const findAuthoredStyle = (el: HTMLElement): CSSStyleDeclaration | null => {
     if (authoredDoc === undefined) {
       try {
         authoredDoc = authoredHtml ? parseSavedSource(authoredHtml) : null;
@@ -307,13 +319,12 @@ export function applySoftReload(
         authoredDoc = null;
       }
     }
-    return authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
-  };
-  const readAuthoredOpacity = (el: HTMLElement): string | null => {
-    const source = findAuthoredSource(el);
-    if (source instanceof HTMLElement) return source.style.opacity;
-    return readStampedAuthoredOpacity(el);
+    const source = authoredDoc ? findAuthoredElement(authoredDoc, el) : null;
+    // The parsed file lives in this realm, so instanceof holds here, unlike for the iframe nodes below.
+    return source instanceof HTMLElement || source instanceof SVGElement ? source.style : null;
   };
+  const readAuthoredOpacity = (el: HTMLElement): string | null =>
+    findAuthoredStyle(el)?.opacity ?? readStampedAuthoredOpacity(el);
 
   // fallow-ignore-next-line complexity
   const doReload = () => {
@@ -327,6 +338,7 @@ export function applySoftReload(
         const tl = timelines[key] as
           | {
               kill?: () => void;
+              clear?: () => void;
               getChildren?: (deep: boolean) => Array<{ targets?: () => Element[] }>;
             }
           | undefined;
@@ -341,6 +353,8 @@ export function applySoftReload(
           } catch {}
         }
         try {
+          // kill() keeps the children, and the finalize seek renders this timeline until the rebind swaps it.
+          tl.clear?.();
           tl.kill?.();
         } catch {}
         delete timelines[key];
@@ -369,7 +383,7 @@ export function applySoftReload(
     // Reset GSAP's internal transform cache so from() tweens don't read stale
     // end values. `clearProps: "all"` is needed to flush the cache, but it also
     // nukes the element's CSS base (position, width, height, etc.) from the
-    // HTML `style=""` attribute. Save → clear → restore → strip `transform`.
+    // HTML `style=""` attribute. Save → clear → restore → authored transform props.
     if (allTargets.length > 0 && win.gsap?.set) {
       const saved: Array<[HTMLElement, string]> = [];
       for (const el of allTargets) {
@@ -384,7 +398,7 @@ export function applySoftReload(
       for (const [el, css] of saved) {
         const s = el.style;
         s.cssText = css;
-        s.removeProperty("transform");
+        restoreAuthoredTransforms(s, findAuthoredStyle(el));
         // The restored cssText carries RUNTIME opacity, not authored opacity:
         // a mid-flight tween's interpolated value, or the color-grading hide
         // (`opacity: 0 !important`). The re-run script's tweens re-initialize

package/src/utils/gsapUndoRestore.test.ts

@@ -161,6 +161,55 @@ 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 undoScriptEdit = (live: string, authored: string, edit: string) => {
+      const { iframe, contentWindow, doc } = buildLiveIframe(
+        `${live}<script>${script(edit)}</script>`,
+      );
+      const clearProps = (targets: HTMLElement[]) =>
+        targets.forEach((t) => t.removeAttribute("style"));
+      Object.assign(contentWindow.gsap, { set: clearProps });
+      for (const el of doc.querySelectorAll("[style*=transform]")) Object.assign(el, { _gsap: {} });
+      const files = {
+        [ROOT]: {
+          previous: wrap(`${authored}<script>${script(edit)}</script>`),
+          restored: wrap(`${authored}<script>${script("")}</script>`),
+        },
+      };
+      expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn())).toBe("soft");
+      return doc;
+    };
+
+    it("drops the size marks a resize left on the live element", () => {
+      const doc = undoScriptEdit(
+        `<div id="a" data-hf-studio-box-size="true" style="width: 502px; --hf-studio-width: 502px; --hf-studio-height: 334px">t</div>`,
+        `<div id="a" style="width: 300px">t</div>`,
+        `tl.set("#a",{width:502,height:334},0);`,
+      );
+      expect(doc.getElementById("a")!.hasAttribute("data-hf-studio-box-size")).toBe(false);
+      expect(doc.getElementById("a")!.getAttribute("style")).toBe("width: 300px");
+    });
+
+    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>`,
+        `<div id="r" style="left: 10px; transform: rotate(20deg)">t</div>`,
+        `gsap.set("#r",{x:116,y:72});`,
+      );
+      expect(doc.getElementById("r")!.style.transform).toBe("rotate(20deg)");
+    });
+
+    it("drops the translate mask GSAP wrote over a stylesheet translate", () => {
+      const doc = undoScriptEdit(
+        `<h1 id="t" style="opacity: 0.5; translate: none; transform: translate(116px, -113px)">t</h1>`,
+        `<h1 id="t">t</h1>`,
+        `gsap.set("#t",{x:116,y:-113});`,
+      );
+      expect(doc.getElementById("t")!.style.getPropertyValue("translate")).toBe("");
+    });
+  });
+
   it("full-reloads without partially restoring when any changed live target is missing", () => {
     const { iframe, doc } = buildLiveIframe(`<div id="a" style="z-index: 8">a</div>`);
     const reloadPreview = vi.fn();

package/src/utils/gsapUndoRestore.ts

@@ -8,6 +8,8 @@ import {
   extractGsapScriptText,
   findGsapScriptElements,
 } from "./gsapSoftReload";
+import { findAuthoredElement, parseSavedSource } from "./authoredSource";
+import { STUDIO_EDIT_ATTRS } from "../components/editor/manualEditsSeekReapply";
 import { markScenesStale } from "../player/sceneSwap";
 
 type PreviewWindow = Window & {
@@ -135,6 +137,17 @@ function syncElementAttributes(target: Element, source: Element): void {
   }
 }
 
+// A gesture folded into the script leaves marks on the live element that every seek would re-impose.
+function syncStaleEditMarks(doc: Document, restored: string): void {
+  const restoredDoc = parseSavedSource(restored);
+  for (const live of doc.querySelectorAll(STUDIO_EDIT_ATTRS.map((attr) => `[${attr}]`).join())) {
+    const source = findAuthoredElement(restoredDoc, live);
+    if (source && STUDIO_EDIT_ATTRS.some((a) => live.getAttribute(a) !== source.getAttribute(a))) {
+      syncElementAttributes(live, source);
+    }
+  }
+}
+
 function readGsapScriptTexts(html: string): string[] {
   const doc = new DOMParser().parseFromString(html, "text/html");
   return findGsapScriptElements(doc).map((script) => script.textContent ?? "");
@@ -248,9 +261,11 @@ export function applyUndoRestoreToPreview(
   const restoredScript = extractGsapScriptText(restored);
   const previousScript = extractGsapScriptText(previous);
   if (restoredScript && restoredScript !== previousScript) {
+    syncStaleEditMarks(doc, restored);
     const result = applySoftReload(iframe, restoredScript, {
       onAsyncFailure: reloadPreview,
       currentTimeOverride: currentTime,
+      authoredHtml: restored,
     });
     if (result === "cannot-soft-reload") {
       reloadPreview();