@hyperframes/studio 0.8.94 → 0.8.96

package/src/player/components/TimelineProvider.tsx

@@ -51,6 +51,7 @@ export type TimelineCanvasState = Omit<
   playheadRef: React.RefObject<HTMLDivElement | null>;
   laneGapStrips: TimelineLaneGapStrips[];
   dropPreview: TimelineDropPlacement | null;
+  acceptsMediaDrop: boolean;
   setRangeSelection: (value: TimelineRangeSelection | null) => void;
   setResizingClip: (value: ResizingClipState | null) => void;
   setDraggedClip: (value: TimelineLaneBaseProps["draggedClip"]) => void;

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

@@ -12,6 +12,8 @@ import { configureTimelineTestViewport } from "./timelineTestViewport";
 
 (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const ROW0_MID_Y = getTimelineRowTop(0) + TRACK_H / 2;
+
 interface DropTransfer {
   types: string[];
   files: File[];
@@ -124,7 +126,7 @@ describe("useTimelineAssetDrop", () => {
     const parent = document.createElement("div");
     const child = document.createElement("div");
     parent.append(child);
-    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, ROW0_MID_Y)));
     act(() =>
       view.api.handleAssetDragLeave({
         relatedTarget: child,
@@ -160,8 +162,8 @@ describe("useTimelineAssetDrop", () => {
     const transfer = assetTransfer(JSON.stringify({ path: "/media/hero.mp4" }));
 
     act(() => {
-      view.api.handleAssetDragOver(dragEvent(transfer, 80, 100));
-      view.api.handleAssetDrop(dragEvent(transfer, 80, 100));
+      view.api.handleAssetDragOver(dragEvent(transfer, 80, ROW0_MID_Y));
+      view.api.handleAssetDrop(dragEvent(transfer, 80, ROW0_MID_Y));
     });
 
     // pps=40, clientX=80 -> 2s, far from the 50s playhead: proves start tracks
@@ -175,12 +177,12 @@ describe("useTimelineAssetDrop", () => {
     const view = renderHarness(onAssetDrop, 1);
     const transfer = assetTransfer("not-json");
 
-    act(() => view.api.handleAssetDragOver(dragEvent(transfer, 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(transfer, 400, ROW0_MID_Y)));
     expect(view.api.isDragOver).toBe(true);
     view.rerender(2);
     expect(view.api.isDragOver).toBe(false);
 
-    act(() => view.api.handleAssetDrop(dragEvent(transfer, 400, 100)));
+    act(() => view.api.handleAssetDrop(dragEvent(transfer, 400, ROW0_MID_Y)));
     expect(onAssetDrop).not.toHaveBeenCalled();
     act(() => view.root.unmount());
   });
@@ -202,8 +204,8 @@ describe("useTimelineAssetDrop", () => {
     };
 
     act(() => {
-      view.api.handleAssetDragOver(dragEvent(transfer, 400, 100));
-      view.api.handleAssetDrop(dragEvent(transfer, 400, 100));
+      view.api.handleAssetDragOver(dragEvent(transfer, 400, ROW0_MID_Y));
+      view.api.handleAssetDrop(dragEvent(transfer, 400, ROW0_MID_Y));
     });
 
     expect(onAssetDrop).not.toHaveBeenCalled();
@@ -214,7 +216,7 @@ describe("useTimelineAssetDrop", () => {
 
   it("clears an escaped drag after StrictMode effect replay", () => {
     const view = renderHarness(vi.fn(), 1, { strict: true });
-    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, ROW0_MID_Y)));
     expect(view.api.isDragOver).toBe(true);
 
     act(() => window.dispatchEvent(new Event("dragend")));
@@ -227,11 +229,11 @@ describe("useTimelineAssetDrop", () => {
     const view = renderHarness(onAssetDrop);
     const payload = JSON.stringify({ path: "assets/a.png" });
 
-    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer(payload), 400, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer(payload), 400, ROW0_MID_Y)));
     const preview = view.api.dropPreview;
     expect(preview).toEqual({ start: 10, track: 0 });
 
-    act(() => view.api.handleAssetDrop(dragEvent(assetTransfer(payload), 400, 100)));
+    act(() => view.api.handleAssetDrop(dragEvent(assetTransfer(payload), 400, ROW0_MID_Y)));
     expect(onAssetDrop).toHaveBeenCalledExactlyOnceWith("assets/a.png", preview);
     expect(view.api.dropPreview).toBeNull();
     act(() => view.root.unmount());
@@ -239,8 +241,8 @@ describe("useTimelineAssetDrop", () => {
 
   it("moves the preview with the pointer and drops it when the drag leaves", () => {
     const view = renderHarness(vi.fn());
-    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, 100)));
-    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 800, 100)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 400, ROW0_MID_Y)));
+    act(() => view.api.handleAssetDragOver(dragEvent(assetTransfer("{}"), 800, ROW0_MID_Y)));
     expect(view.api.dropPreview?.start).toBe(20);
 
     act(() =>

package/src/player/components/timelineLayout.test.ts

@@ -19,6 +19,7 @@ import {
   getTimelineBeatEntries,
 } from "./timelineLayout";
 import { generateTicks, getTimelineMajorTickInterval } from "./timelineRulerGeometry";
+import { resolveInsertRow } from "./timelineCollision";
 import { getTimelineRenderTimeRange } from "./timelineViewportGeometry";
 
 describe("horizontal timeline window", () => {
@@ -124,27 +125,27 @@ describe("variable timeline row geometry", () => {
 
 describe("collapsed timeline row geometry characterization", () => {
   it.each([
-    [0, 74],
-    [1, 122],
-    [4, 266],
+    [0, 32],
+    [1, 80],
+    [4, 224],
   ])("keeps row %i at content y=%i", (row, expectedTop) => {
     expect(getTimelineRowTop(row)).toBe(expectedTop);
   });
 
   it.each([
-    [74, 0],
-    [86, 0.25],
-    [146, 1.5],
-    [290, 4.5],
+    [32, 0],
+    [44, 0.25],
+    [104, 1.5],
+    [248, 4.5],
   ])("maps content y=%i to fractional row %f", (contentY, expectedRow) => {
     expect(getTimelineRowFromY(contentY)).toBe(expectedRow);
   });
 
   it.each([
-    [0, 146],
-    [1, 194],
-    [3, 290],
-    [5, 386],
+    [0, 80],
+    [1, 128],
+    [3, 224],
+    [5, 320],
   ])("keeps the %i-track canvas height at %i", (trackCount, expectedHeight) => {
     expect(getTimelineCanvasHeight(baseRows(trackCount))).toBe(expectedHeight);
   });
@@ -294,6 +295,34 @@ describe("host track padding", () => {
   });
 });
 
+describe("default track pads", () => {
+  const rows = [TRACK_H, TRACK_H, TRACK_H];
+  const lastLaneBottom = RULER_H + 8 + 3 * TRACK_H;
+
+  it("sits the first row 8px under the ruler and leaves one track below the last", () => {
+    expect(getTimelineRowTop(0)).toBe(RULER_H + 8);
+    expect(getTimelineCanvasHeight(rows)).toBe(lastLaneBottom + TRACK_H);
+  });
+
+  it("opens a new track from anywhere in the bottom lane", () => {
+    const drop = {
+      rectLeft: 0,
+      rectTop: 0,
+      scrollLeft: 0,
+      scrollTop: 0,
+      contentOrigin: GUTTER,
+      pixelsPerSecond: 100,
+      rowHeights: rows,
+      trackOrder: [0, 1, 2],
+    };
+    for (const y of [lastLaneBottom, getTimelineCanvasHeight(rows) - 1]) {
+      expect(resolveTimelineAssetDrop(drop, GUTTER, y).track).toBe(3);
+      expect(resolveInsertRow(getTimelineRowFromY(y, rows), rows.length)).toBe(3);
+    }
+    expect(resolveTimelineAssetDrop(drop, GUTTER, lastLaneBottom - 1).track).toBe(2);
+  });
+});
+
 describe("getTimelineScrubTime", () => {
   const at = (clientX: number, duration = 10) =>
     getTimelineScrubTime({

package/src/player/components/timelineLayout.ts

@@ -58,13 +58,13 @@ export function getTimelineLaneTop(laneIndex: number): number {
  * Default breathing room INSIDE the scroll area (CapCut-style). A host overrides
  * it per Timeline; rows always read TimelineRowGeometry.padding, never these.
  *
- * - TRACKS_TOP_PAD: empty space between the (sticky) ruler and the first track
- *   (~half a track height) so the first clip isn't jammed under the ruler.
- * - TRACKS_BOTTOM_PAD: empty space below the last track (~1.5 track heights),
- *   enough to comfortably drag a clip into the void to create a new bottom lane.
+ * - TRACKS_TOP_PAD: empty space between the (sticky) ruler and the first track,
+ *   just enough that the first clip isn't jammed under the ruler.
+ * - TRACKS_BOTTOM_PAD: one empty track below the last, drawn as a ghost lane;
+ *   dropping a clip or file there creates a new bottom track.
  */
-export const TRACKS_TOP_PAD = 50;
-export const TRACKS_BOTTOM_PAD = Math.round(TRACK_H * 1.5);
+export const TRACKS_TOP_PAD = 8;
+export const TRACKS_BOTTOM_PAD = TRACK_H;
 export interface TimelineTrackPadding {
   top?: number;
   bottom?: number;

package/src/player/components/useTimelineProviderState.tsx

@@ -66,7 +66,7 @@ export function useTimelineProviderState({
   showAudioEffects = true,
   showKeyframes = true,
   trackPadding,
-  sessionEpoch = 0,
+  sessionEpoch: sessionEpochProp,
   previewIframeRef,
   onZIndexReorder,
 }: TimelineProps = {}): TimelineContextValue {
@@ -108,6 +108,7 @@ export function useTimelineProviderState({
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   const timelineSessionEpoch = usePlayerStore((s) => s.timelineSessionEpoch);
+  const sessionEpoch = sessionEpochProp ?? timelineSessionEpoch;
   const setFocusedEaseSegment = usePlayerStore((s) => s.setFocusedEaseSegment);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
   const playheadRef = useRef<HTMLDivElement>(null);
@@ -433,6 +434,7 @@ export function useTimelineProviderState({
     marqueeRect,
     laneGapStrips,
     dropPreview: assetDrop.dropPreview,
+    acceptsMediaDrop: !!(onFileDrop || onAssetDrop),
     theme,
     showAudioEffects,
     displayTrackOrder: displayLayout.displayTrackOrder,

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();