@hyperframes/studio 0.8.133 → 0.8.135

package/src/components/editor/useDomEditNudge.test.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 // @vitest-environment happy-dom
 import React, { act } from "react";
@@ -7,7 +8,11 @@ import { installReactActEnvironment, makeSelection } from "../../hooks/domSelect
 import { useDomEditNudge, type UseDomEditNudgeParams } from "./useDomEditNudge";
 import { CANVAS_NUDGE_COMMIT_DEBOUNCE_MS, CANVAS_NUDGE_STEP_PX } from "./domEditNudge";
 import { __resetForTests } from "../../utils/canvasNudgeGate";
-import { flushStudioPendingEdits, hasStudioPendingEdits } from "../../utils/studioPendingEdits";
+import {
+  flushStudioPendingEdits,
+  hasStudioPendingEdits,
+  trackedStudioEdit,
+} from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import type { OverlayRect } from "./domEditOverlayGeometry";
 
@@ -392,23 +397,32 @@ describe("useDomEditNudge pauses playback before it snapshots the timelines", ()
   });
 });
 
+/** A burst-ready Harness on a fresh element, under fake timers. */
+function mountBurstHarness(
+  id: string,
+  onPathOffsetCommit: UseDomEditNudgeParams["onPathOffsetCommitRef"]["current"],
+) {
+  __resetForTests();
+  vi.useFakeTimers();
+  const root = createRoot(document.body.appendChild(document.createElement("div")));
+  const element = document.body.appendChild(document.createElement("div"));
+  element.id = id;
+  act(() => {
+    root.render(
+      React.createElement(Harness, {
+        selection: makeSelection("Dot", element),
+        onPathOffsetCommit,
+      }),
+    );
+  });
+  return root;
+}
+
 describe("useDomEditNudge — undo right after a burst", () => {
   it("undo's drain commits a burst still inside its debounce and waits for its save", async () => {
-    __resetForTests();
-    vi.useFakeTimers();
-    const root = createRoot(document.body.appendChild(document.createElement("div")));
-    const element = document.body.appendChild(document.createElement("div"));
-    element.id = "dot-undo";
     let saved!: () => void;
     const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
-    act(() => {
-      root.render(
-        React.createElement(Harness, {
-          selection: makeSelection("Dot", element),
-          onPathOffsetCommit: commit,
-        }),
-      );
-    });
+    const root = mountBurstHarness("dot-undo", commit);
     act(() => dispatchArrowRight());
 
     let drained = false;
@@ -424,21 +438,9 @@ describe("useDomEditNudge — undo right after a burst", () => {
   });
 
   it("counts the burst as a pending edit from its first key until its save lands", async () => {
-    __resetForTests();
-    vi.useFakeTimers();
-    const root = createRoot(document.body.appendChild(document.createElement("div")));
-    const element = document.body.appendChild(document.createElement("div"));
-    element.id = "dot-pending";
     let saved!: () => void;
     const commit = vi.fn(() => new Promise<void>((resolve) => (saved = resolve)));
-    act(() => {
-      root.render(
-        React.createElement(Harness, {
-          selection: makeSelection("Dot", element),
-          onPathOffsetCommit: commit,
-        }),
-      );
-    });
+    const root = mountBurstHarness("dot-pending", commit);
     expect(hasStudioPendingEdits()).toBe(false);
     act(() => dispatchArrowRight());
     expect(hasStudioPendingEdits()).toBe(true);
@@ -452,6 +454,25 @@ describe("useDomEditNudge — undo right after a burst", () => {
   });
 });
 
+describe("useDomEditNudge — a Design-panel edit during a burst", () => {
+  it("commits the burst before the panel edit, so one undo takes back the panel edit", async () => {
+    const order: string[] = [];
+    const root = mountBurstHarness("dot-panel", async () => void order.push("nudge"));
+    try {
+      act(() => dispatchArrowRight());
+      const panelEdit = trackedStudioEdit(async () => void order.push("width"), {
+        afterOlderSaves: true,
+      })();
+      vi.useRealTimers();
+      await panelEdit;
+      expect(order).toEqual(["nudge", "width"]);
+    } finally {
+      vi.useRealTimers();
+      act(() => root.unmount());
+    }
+  });
+});
+
 describe("useDomEditNudge — a commit that throws", () => {
   it("still ends the burst's pending edit, so undo and export never wait on it", async () => {
     __resetForTests();

package/src/components/ui/cn.ts

@@ -3,6 +3,7 @@
  * invents (`text-step-*`, `ctl`/`ctl-sm`/`ctl-lg`) so overrides replace, not stack.
  */
 
+import type { CnFunction } from "cn";
 import { createCn } from "cn/config";
 
 /** `text-step-11`, `text-step-9`, … — the type scale from `theme.css`. */
@@ -11,7 +12,7 @@ const isTypeStep = (value: string) => /^step-\d+$/.test(value);
 /** `ctl`, `ctl-sm`, `ctl-lg` — the control heights from `theme.css`. */
 const isControlSize = (value: string) => /^ctl(-sm|-lg)?$/.test(value);
 
-export const cn = createCn({
+export const cn: CnFunction = createCn({
   extend: {
     classGroups: {
       "font-size": [{ text: [isTypeStep] }],

package/src/contexts/DomEditContext.tsx

@@ -107,7 +107,9 @@ function trackEditCommits(actions: DomEditActionsValue): DomEditActionsValue {
   const tracked: Record<string, unknown> = { ...actions };
   for (const key of Object.keys(SAVES_AN_EDIT) as Array<keyof typeof SAVES_AN_EDIT>) {
     if (!SAVES_AN_EDIT[key]) continue;
-    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown);
+    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown, {
+      afterOlderSaves: true,
+    });
   }
   return tracked as unknown as DomEditActionsValue;
 }

package/src/hooks/draggedGsapPosition.test.ts

@@ -0,0 +1,34 @@
+// @vitest-environment happy-dom
+import { expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { freezeDragStamp, restoreDragOffset } from "./draggedGsapPosition";
+import { commitStaticGsapPosition } from "./gsapDragCommit";
+
+function stamp(element: HTMLElement, base: { x: number; y: number }) {
+  element.setAttribute("data-hf-drag-gsap-base-x", String(base.x));
+  element.setAttribute("data-hf-drag-gsap-base-y", String(base.y));
+  element.setAttribute("data-hf-drag-initial-offset-x", "0");
+  element.setAttribute("data-hf-drag-initial-offset-y", "0");
+}
+
+// A resize released at x 60 moves its anchor by -50; the next drag presses before that write is planned.
+it("a commit that outlives its gesture uses the gesture's stamp, not the next one's", async () => {
+  const element = document.createElement("div");
+  stamp(element, { x: 60, y: 37.5 });
+  const frozen = freezeDragStamp(element);
+  stamp(element, { x: 10, y: 4 });
+  const commitMutation = vi.fn();
+
+  await commitStaticGsapPosition(
+    { id: "target", selector: "#target", element } as DomEditSelection,
+    { x: -50, y: -33.5 },
+    { x: 0, y: 0 },
+    "#target",
+    null,
+    { commitMutation, stamp: frozen },
+  );
+
+  expect(commitMutation.mock.calls[0]![1].properties).toEqual({ x: 10, y: 4 });
+  restoreDragOffset(element, frozen);
+  expect(element.getAttribute("data-hf-drag-initial-offset-x")).toBe("0");
+});

package/src/hooks/draggedGsapPosition.ts

@@ -36,10 +36,35 @@ export function readCssRotation(element: HTMLElement, withRotate = true): number
   }
 }
 
+export interface DragStamp {
+  origX: number;
+  origY: number;
+  baseX: number;
+  baseY: number;
+  frozen?: boolean;
+}
+
+/** The drag-start attributes as they are now; NaN for an absent base. */
+export function readDragStamp(element: HTMLElement): DragStamp {
+  const read = (name: string) => Number.parseFloat(element.getAttribute(name) ?? "");
+  return {
+    origX: read("data-hf-drag-initial-offset-x") || 0,
+    origY: read("data-hf-drag-initial-offset-y") || 0,
+    baseX: read("data-hf-drag-gsap-base-x"),
+    baseY: read("data-hf-drag-gsap-base-y"),
+  };
+}
+
+/** A gesture's stamp read at its release, for commits that finish after the next gesture re-stamps the element. */
+export const freezeDragStamp = (element: HTMLElement): DragStamp => ({
+  ...readDragStamp(element),
+  frozen: true,
+});
+
 /**
  * Translate a studio drag offset into absolute GSAP x/y, accounting for the
  * element's rotation and its drag-start base pose. Reads the drag-start
- * attributes stamped by `createManualOffsetDragMember`
+ * stamp (`readDragStamp` by default) set by `createManualOffsetDragMember`
  * (`data-hf-drag-initial-offset-*`, `data-hf-drag-gsap-base-*`); `fallbackBase`
  * is used when the base attributes are absent (e.g. a static element that GSAP
  * hasn't given an x/y yet).
@@ -52,22 +77,19 @@ export function computeDraggedGsapPosition(
   element: HTMLElement,
   studioOffset: { x: number; y: number },
   fallbackBase: { x: number; y: number },
+  stamp: DragStamp = readDragStamp(element),
 ): { newX: number; newY: number; baseGsapX: number; baseGsapY: number } {
   const rotStyle = element.style.getPropertyValue("--hf-studio-rotation");
   const rotDeg = Number.parseFloat(rotStyle) || 0;
   const rad = (-rotDeg * Math.PI) / 180;
   const cos = Math.cos(rad);
   const sin = Math.sin(rad);
-  const origX = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const deltaX = studioOffset.x - origX;
-  const deltaY = studioOffset.y - origY;
+  const deltaX = studioOffset.x - stamp.origX;
+  const deltaY = studioOffset.y - stamp.origY;
   const adjX = deltaX * cos - deltaY * sin;
   const adjY = deltaX * sin + deltaY * cos;
-  const parsedBaseX = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-x") ?? "");
-  const parsedBaseY = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-y") ?? "");
-  const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
-  const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
+  const baseGsapX = Number.isFinite(stamp.baseX) ? stamp.baseX : fallbackBase.x;
+  const baseGsapY = Number.isFinite(stamp.baseY) ? stamp.baseY : fallbackBase.y;
   return {
     newX: roundTo3(baseGsapX + adjX),
     newY: roundTo3(baseGsapY + adjY),
@@ -76,12 +98,15 @@ export function computeDraggedGsapPosition(
   };
 }
 
-/** Puts the drag's preview offset back once the written position renders instead. */
-export function restoreDragOffset(element: HTMLElement): void {
-  const origin = (axis: "x" | "y") =>
-    Number.parseFloat(element.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "") || 0;
-  element.style.setProperty("--hf-studio-offset-x", `${origin("x")}px`);
-  element.style.setProperty("--hf-studio-offset-y", `${origin("y")}px`);
+/** Puts the drag's preview offset back once the written position renders instead. A frozen stamp's
+ *  gesture is over: the attributes belong to the one after it. */
+export function restoreDragOffset(
+  element: HTMLElement,
+  stamp: DragStamp = readDragStamp(element),
+): void {
+  if (stamp.frozen) return;
+  element.style.setProperty("--hf-studio-offset-x", `${stamp.origX}px`);
+  element.style.setProperty("--hf-studio-offset-y", `${stamp.origY}px`);
   element.removeAttribute("data-hf-drag-initial-offset-x");
   element.removeAttribute("data-hf-drag-initial-offset-y");
 }

package/src/hooks/gsapDragCommit.ts

@@ -12,7 +12,12 @@ import {
 } from "../utils/globalTimeCompiler";
 import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { computeElementPercentage, keyframeEases, writeTargetSelector } from "./gsapShared";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import {
+  computeDraggedGsapPosition,
+  readDragStamp,
+  restoreDragOffset,
+  type DragStamp,
+} from "./draggedGsapPosition";
 import type { CommitMutation } from "./gsapScriptCommitTypes";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
 import { setPatchFromUpdateProperty } from "./gsapDragStaticSetHelpers";
@@ -26,6 +31,8 @@ export {
 export interface GsapDragCommitCallbacks {
   commitMutation: CommitMutation;
   fetchAnimations?: () => Promise<GsapAnimation[]>;
+  /** The gesture's drag stamp, when its commit can outlive it; else read from the element. */
+  stamp?: DragStamp;
 }
 
 /**
@@ -169,7 +176,12 @@ export async function commitStaticGsapPosition(
   existingSet: GsapAnimation | null,
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
-  const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
+  const { newX, newY } = computeDraggedGsapPosition(
+    selection.element,
+    studioOffset,
+    gsapPos,
+    callbacks.stamp,
+  );
   if (existingSet) {
     if (existingSet.keyframes) {
       // Keyframed zero-duration hold (drag-path corruption): can't update-property
@@ -344,22 +356,17 @@ export async function commitWholePathOffset(
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
     gsapPos,
+    stamp,
   );
   const deltaX = newX - baseGsapX;
   // fallow-ignore-next-line code-duplication
   const deltaY = newY - baseGsapY;
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
 
   // fallow-ignore-next-line code-duplication
   let effectiveAnim = anim;

package/src/hooks/gsapDragPositionCommit.ts

@@ -9,7 +9,11 @@ import {
 import { KEYFRAME_PCT_MATCH, playsNear } from "./gsapShared";
 import { progressAtTime, runEaseOf, timeAtProgress } from "../utils/gsapKeyframeEases";
 import { roundTo3 } from "../utils/rounding";
-import { computeDraggedGsapPosition } from "./draggedGsapPosition";
+import {
+  computeDraggedGsapPosition,
+  readDragStamp,
+  restoreDragOffset,
+} from "./draggedGsapPosition";
 import {
   type GsapDragCommitCallbacks,
   computeCurrentPercentage,
@@ -117,20 +121,15 @@ export async function commitGsapPositionFromDrag(
   callbacks: GsapDragCommitCallbacks,
 ): Promise<GsapEditOutcome> {
   const el = selection.element;
+  const stamp = callbacks.stamp ?? readDragStamp(el);
   // fallow-ignore-next-line code-duplication
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,
     gsapPos,
+    stamp,
   );
-  const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
-  const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
-  const restoreOffset = () => {
-    el.style.setProperty("--hf-studio-offset-x", `${origX}px`);
-    el.style.setProperty("--hf-studio-offset-y", `${origY}px`);
-    el.removeAttribute("data-hf-drag-initial-offset-x");
-    el.removeAttribute("data-hf-drag-initial-offset-y");
-  };
+  const restoreOffset = () => restoreDragOffset(el, stamp);
 
   if (anim.arcPath?.enabled) {
     const { activeKeyframePct, currentTime, setActiveKeyframePct } = usePlayerStore.getState();

package/src/hooks/gsapPlaybackTestHarness.ts

@@ -0,0 +1,28 @@
+import { gsap } from "gsap";
+
+type KeyframeMutation = {
+  duration: number;
+  ease?: string;
+  easeEach?: string;
+  keyframes: Array<{
+    percentage: number;
+    properties: Record<string, number | string>;
+    ease?: string;
+  }>;
+};
+
+/** Plays a replace-with-keyframes mutation in real GSAP and reads `x` at `time` seconds. */
+export function xAtTime(mutation: KeyframeMutation, time: number): number {
+  const target = { x: 0, y: 0, opacity: 1 };
+  const frames: Record<string, unknown> = mutation.easeEach ? { easeEach: mutation.easeEach } : {};
+  for (const kf of mutation.keyframes) {
+    frames[`${kf.percentage}%`] = { ...kf.properties, ...(kf.ease ? { ease: kf.ease } : {}) };
+  }
+  const vars = {
+    duration: mutation.duration,
+    keyframes: frames,
+    ...(mutation.ease ? { ease: mutation.ease } : {}),
+  };
+  gsap.timeline({ paused: true }).to(target, vars, 0).seek(time);
+  return target.x;
+}

package/src/hooks/gsapResizeIntercept.test.ts

@@ -1,5 +1,5 @@
 // @vitest-environment happy-dom
-import { afterEach, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
@@ -182,6 +182,7 @@ it("reuses the ownership parse instead of fetching a resolved size group twice",
   await expect(
     tryGsapResizeIntercept(
       selection,
+      // fallow-ignore-next-line code-duplication
       { width: 344, height: 344 },
       [],
       null,
@@ -573,6 +574,76 @@ it("hands the size to the element's CSS when its only tween is a fade", async ()
   expect(commitMutation).not.toHaveBeenCalled();
 });
 
+describe("the first resize of a keyframed element under auto-record", () => {
+  const positionKeys = {
+    id: "#title-to-1-position",
+    targetSelector: "#title",
+    propertyGroup: "position",
+    method: "to",
+    properties: {},
+    keyframes: { keyframes: [{ percentage: 0, properties: { x: 300, y: 200 } }] },
+    position: 1,
+    resolvedStart: 1,
+    duration: 3,
+  } as unknown as GsapAnimation;
+
+  it("writes a size key at the playhead in one mutation and hands the draft size to GSAP", async () => {
+    usePlayerStore.setState({ currentTime: 2 });
+    const commitMutation = vi.fn();
+    const selection = titleSelection();
+    selection.element.setAttribute("data-hf-studio-box-size", "true");
+
+    // fallow-ignore-next-line code-duplication
+    const handled = await tryGsapResizeIntercept(
+      selection,
+      { width: 424.2, height: 237 },
+      [positionKeys],
+      null,
+      commitMutation,
+    );
+
+    expect(handled).toEqual({ status: "persisted" });
+    expect(commitMutation.mock.calls.map((call) => call[1])).toEqual([
+      {
+        type: "add-with-keyframes",
+        targetSelector: "#title",
+        position: 2,
+        duration: 1,
+        keyframes: [{ percentage: 0, properties: { width: 424, height: 237 } }],
+      },
+    ]);
+    expect(selection.element.hasAttribute("data-hf-studio-box-size")).toBe(false);
+  });
+
+  const fadeKeys = {
+    ...positionKeys,
+    id: "#title-to-1-visual",
+    propertyGroup: "visual",
+    keyframes: { keyframes: [{ percentage: 0, properties: { opacity: 0 } }] },
+  } as unknown as GsapAnimation;
+
+  it.each([
+    ["with auto-record off", positionKeys, false],
+    ["on an element whose only keyframes fade it", fadeKeys, true],
+  ])("hands the size to CSS %s", async (_, keyed, autoKeyframeEnabled) => {
+    usePlayerStore.setState({ autoKeyframeEnabled });
+    const commitMutation = vi.fn();
+    try {
+      const handled = await tryGsapResizeIntercept(
+        titleSelection(),
+        { width: 424, height: 237 },
+        [keyed],
+        null,
+        commitMutation,
+      );
+      expect(handled).toEqual({ status: "element-size" });
+      expect(commitMutation).not.toHaveBeenCalled();
+    } finally {
+      usePlayerStore.setState({ autoKeyframeEnabled: true });
+    }
+  });
+});
+
 it.each([
   ["stays put", { x: 0, y: 0 }, { width: 300 }, undefined],
   ["moves", { x: -40, y: 0 }, { width: 300, x: 10, y: 0 }, true],