@hyperframes/studio 0.8.123 → 0.8.125

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.123",
+  "version": "0.8.125",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.123",
-    "@hyperframes/parsers": "0.8.123",
-    "@hyperframes/player": "0.8.123",
-    "@hyperframes/sdk": "0.8.123",
-    "@hyperframes/shader-transitions": "0.8.123",
-    "@hyperframes/studio-server": "0.8.123"
+    "@hyperframes/parsers": "0.8.125",
+    "@hyperframes/player": "0.8.125",
+    "@hyperframes/core": "0.8.125",
+    "@hyperframes/sdk": "0.8.125",
+    "@hyperframes/shader-transitions": "0.8.125",
+    "@hyperframes/studio-server": "0.8.125"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.123"
+    "@hyperframes/producer": "0.8.125"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/OpenInDesktopButton.dom.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 /**
- * "Edit with Framey": shown only where the preview server answers on macOS; a press opens the project in the app,
+ * "Edit with Framey": shown where the preview server has the app or its download to offer; a press opens the project in the app,
  * or introduces Framey with the download while the app cannot take it or is missing.
  */
 import React, { act } from "react";
@@ -45,7 +45,7 @@ async function mount(): Promise<HTMLElement> {
 
 const downloadHref = () =>
   [...document.querySelectorAll("a")]
-    .find((a) => a.textContent?.includes("Get HyperFrames Studio"))
+    .find((a) => a.textContent?.includes("Get the desktop app"))
     ?.getAttribute("href");
 
 const button = () =>
@@ -68,31 +68,48 @@ it("stays hidden where the server has no hand-off (the desktop's own Studio)", a
   expect(button()).toBeNull();
 });
 
-it("stays hidden when the server says it cannot open the app (not macOS)", async () => {
-  serve(Response.json({ available: false }));
+it("stays hidden when the app has no build for this machine (Windows)", async () => {
+  serve(Response.json({ available: false, handoff: true, downloadUrl: null }));
   await mount();
   expect(button()).toBeNull();
 });
 
+it("with the app installed but no download (Windows), shows only once the app can take the project", async () => {
+  serve(Response.json({ available: true, handoff: false, downloadUrl: null }));
+  await mount();
+  expect(button()).toBeNull();
+});
+
+it("opens the project in an installed app that has no download (Windows)", async () => {
+  serve(Response.json({ available: true, handoff: true, downloadUrl: null }), {
+    opened: true,
+    app: "the HyperFrames desktop app",
+  });
+  await mount();
+  await act(async () => button()!.click());
+  expect(posts).toBe(1);
+});
+
 it("while the app cannot take a project yet, introduces Framey with the download and opens nothing", async () => {
-  serve(Response.json({ available: true, handoff: false }), { opened: true });
+  const linux = `${DOWNLOAD}?os=linux`;
+  serve(Response.json({ available: true, handoff: false, downloadUrl: linux }), { opened: true });
   await mount();
   await act(async () => button()!.click());
   expect(posts).toBe(0);
   expect(document.body.textContent).toContain("Meet Framey");
-  expect(downloadHref()).toBe(DOWNLOAD);
+  expect(downloadHref()).toBe(linux);
 });
 
 it("opens the project in the app and says so", async () => {
-  serve(Response.json({ available: true, handoff: true }), {
+  serve(Response.json({ available: true, handoff: true, downloadUrl: DOWNLOAD }), {
     opened: true,
-    bundleId: "dev.hyperframes.desktop",
+    app: "the HyperFrames desktop app",
   });
   await mount();
   await act(async () => button()!.click());
   expect(posts).toBe(1);
   expect(showToast).toHaveBeenCalledWith(
-    "Framey is opening this project in HyperFrames Studio",
+    "Framey is opening this project in the HyperFrames desktop app",
     "info",
   );
   expect(button()!.dataset.opening).toBe("true");
@@ -100,7 +117,7 @@ it("opens the project in the app and says so", async () => {
 });
 
 it("introduces Framey and offers the download when the app is missing", async () => {
-  serve(Response.json({ available: true, handoff: true }), {
+  serve(Response.json({ available: true, handoff: true, downloadUrl: DOWNLOAD }), {
     opened: false,
     reason: "not-installed",
     downloadUrl: DOWNLOAD,

package/src/components/OpenInDesktopButton.tsx

@@ -8,7 +8,6 @@ import { Button, buttonBase, buttonSizes, buttonVariants, cn, Popover } from "./
 // "Edit with Framey": the preview server (`/api/open-in-desktop`) says whether to show it and whether the app can
 // take the project yet (its gate is the CLI's HANDOFF_READY); until then a press introduces Framey with the download.
 const ROUTE = "/api/open-in-desktop";
-const DOWNLOAD_URL = "https://hyperframes.dev/studio/download";
 /** How far the pupils travel towards the pointer, in the glyph's own units. */
 const GAZE = 2.2;
 /** Long enough for the flight to finish before the label comes back. */
@@ -16,15 +15,20 @@ const OPENING_MS = 1600;
 
 type OpenResult = { opened: true } | { opened: false; reason: string; downloadUrl: string };
 
-/** Null hides the button: no such route (the app's own Studio), or not macOS. */
-function useDesktopRoute(): { handoff: boolean } | null {
-  const [route, setRoute] = useState<{ handoff: boolean } | null>(null);
+type DesktopRoute = { handoff: boolean; downloadUrl: string | null };
+
+/** Null hides the button: no route (the app's own Studio), or nothing here to open or download. */
+function useDesktopRoute(): DesktopRoute | null {
+  const [route, setRoute] = useState<DesktopRoute | null>(null);
   useEffect(() => {
     let live = true;
     studioApiFetch(ROUTE)
       .then((res) => (res.ok ? res.json() : null))
-      .then((body: { available?: unknown; handoff?: unknown } | null) => {
-        if (live && body?.available === true) setRoute({ handoff: body.handoff === true });
+      .then((body: { available?: unknown; handoff?: unknown; downloadUrl?: unknown } | null) => {
+        if (!live || body?.available !== true) return;
+        const handoff = body.handoff === true;
+        const downloadUrl = typeof body.downloadUrl === "string" ? body.downloadUrl : null;
+        if (handoff || downloadUrl) setRoute({ handoff, downloadUrl });
       })
       .catch(() => {});
     return () => {
@@ -74,7 +78,7 @@ export function OpenInDesktopButton() {
   const open = async () => {
     if (!route.handoff) {
       trackStudioEvent("toolbar_action", { action: "open_in_desktop" });
-      setDownloadUrl(DOWNLOAD_URL);
+      setDownloadUrl(route.downloadUrl);
       return;
     }
     if (opening) return;
@@ -84,7 +88,7 @@ export function OpenInDesktopButton() {
       const res = await studioApiFetch(ROUTE, { method: "POST" });
       const result = (await res.json()) as OpenResult;
       if (result.opened) {
-        showToast("Framey is opening this project in HyperFrames Studio", "info");
+        showToast("Framey is opening this project in the HyperFrames desktop app", "info");
         await new Promise((done) => setTimeout(done, OPENING_MS));
       } else setDownloadUrl(result.downloadUrl);
     } catch {
@@ -114,11 +118,16 @@ export function OpenInDesktopButton() {
           variant="ghost"
           data-testid="header-open-in-desktop"
           data-opening={opening || undefined}
-          title="Open this project in HyperFrames Studio, the desktop app, and edit it with Framey"
-          className="hf-framey-trigger gap-1.5 pl-1.5"
-          icon={<FrameyGlyph size={20} className="hf-framey" eyeRef={eye} />}
+          title="Open this project in the HyperFrames desktop app and edit it with Framey"
+          className="hf-framey-trigger gap-1.5 border border-accent/40 bg-accent/10 pl-1 font-semibold text-text-0 enabled:hover:bg-accent/20"
+          icon={<FrameyGlyph size={24} className="hf-framey" eyeRef={eye} />}
         >
           {opening ? "Opening in the app…" : "Edit with Framey"}
+          {!opening && (
+            <span className="rounded-full bg-accent px-1.5 text-[10px] leading-4 font-bold text-on-accent">
+              New
+            </span>
+          )}
         </Button>
       }
     >
@@ -126,9 +135,7 @@ export function OpenInDesktopButton() {
         <FrameyGlyph size={36} />
         <p className="text-step-12 font-medium text-text-0">Meet Framey</p>
       </div>
-      <p className="mt-2 text-text-3">
-        I live in HyperFrames Studio, the free desktop app for macOS:
-      </p>
+      <p className="mt-2 text-balance text-text-3">I live in the free HyperFrames desktop app:</p>
       <ul className="mt-1.5 grid gap-1 text-text-1">
         <li>Chat to change anything in the video</li>
         <li>Draw on a frame to point at it</li>
@@ -145,7 +152,7 @@ export function OpenInDesktopButton() {
           className={cn(buttonBase, buttonVariants.primary, buttonSizes.md)}
           onClick={() => trackStudioEvent("toolbar_action", { action: "get_desktop_app" })}
         >
-          Get HyperFrames Studio
+          Get the desktop app
         </a>
       </div>
     </Popover>

package/src/components/editor/domEditOverlayGestures.ts

@@ -6,6 +6,7 @@ import type {
   StudioRotationSnapshot,
 } from "./manualEdits";
 import type { ManualOffsetDragMember } from "./manualOffsetDrag";
+import type { StudioElementLook } from "./gestureUndoRevert";
 import type { CssRotationTarget, RotationCommit } from "./rotationDraft";
 import type { GroupOverlayItem, OverlayRect } from "./domEditOverlayGeometry";
 import type { SnapContext } from "./snapTargetCollection";
@@ -57,6 +58,7 @@ export interface GestureState {
   initialPathOffset: StudioPathOffsetSnapshot;
   initialRotation: StudioRotationSnapshot;
   initialBoxSize: StudioBoxSizeSnapshot;
+  initialLook: StudioElementLook;
   pathOffsetMember?: ManualOffsetDragMember;
   originLeft: number;
   originTop: number;

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -9,6 +9,7 @@ import {
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
+import { readElementLook } from "./gestureUndoRevert";
 import { readCssRotationTarget, readRotationBase } from "./rotationDraft";
 import {
   beginStudioManualEditGesture,
@@ -179,6 +180,10 @@ export function startGesture(
     Number.isFinite(rawContentScaleX) && rawContentScaleX > 0 ? rawContentScaleX : 1;
   const contentScaleY =
     Number.isFinite(rawContentScaleY) && rawContentScaleY > 0 ? rawContentScaleY : 1;
+  const initialLook = readElementLook(
+    sel.element,
+    kind !== "drag" && !editsPlainCss(sel.element, kind === "rotate" ? "rotate" : "resize"),
+  );
   let initialPathOffset = captureStudioPathOffset(sel.element);
   let manualEditDragToken: string | undefined;
   let pathOffsetMember: ManualOffsetDragMember | undefined;
@@ -274,6 +279,7 @@ export function startGesture(
       initialPathOffset,
       initialRotation: captureStudioRotation(sel.element),
       initialBoxSize: captureStudioBoxSize(sel.element),
+      initialLook,
       pathOffsetMember,
       originLeft: rect.left,
       originTop: rect.top,

package/src/components/editor/dragUndoPaint.test.ts

@@ -1,15 +1,40 @@
 // @vitest-environment happy-dom
 import { afterEach, expect, it, vi } from "vitest";
+import { savePlainRotation } from "../../hooks/plainRotation";
 import type { DomEditSelection } from "./domEditing";
 import type { GestureState } from "./domEditOverlayGestures";
 import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
 import {
+  adoptingStudioPendingEdit,
   hasStudioPendingEdits,
   paintBackNewestStudioPendingEdit,
+  type StudioEditInFlight,
 } from "../../utils/studioPendingEdits";
 
+const gsapOwns = vi.hoisted(() => ({ on: false }));
+vi.mock("../../hooks/gsapRuntimeKeyframes", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../hooks/gsapRuntimeKeyframes")>()),
+  editsPlainCss: () => !gsapOwns.on,
+}));
+
+/** GSAP's own transform values per element, as `gsap.set` / `gsap.getProperty` see them. */
+function fakeGsap(start: Record<string, number>) {
+  const values = new Map<Element, Record<string, number>>();
+  const of = (el: Element) => values.get(el) ?? values.set(el, { ...start }).get(el)!;
+  gsapOwns.on = true;
+  Object.assign(window, {
+    gsap: {
+      set: (el: Element, props: Record<string, number>) => Object.assign(of(el), props),
+      getProperty: (el: Element, prop: string) => of(el)[prop] ?? 0,
+    },
+  });
+  return of;
+}
+
 afterEach(() => {
   document.body.innerHTML = "";
+  gsapOwns.on = false;
+  Reflect.deleteProperty(window, "gsap");
 });
 
 const ref = <T>(current: T) => ({ current });
@@ -24,7 +49,7 @@ const pointer = (x: number, y: number) => ({
 });
 
 /** Drags a box without GSAP 100 px right and 60 px down; its save waits for `save`. */
-function dragWithSaveRunning(save: Promise<void>) {
+function dragWithSaveRunning(save: Promise<void> | (() => Promise<void>)) {
   const element = document.createElement("div");
   element.style.setProperty("translate", "40px 30px");
   document.body.append(element);
@@ -39,7 +64,7 @@ function dragWithSaveRunning(save: Promise<void>) {
     rafPausedRef: ref(false),
     onManualDragStartRef: ref(vi.fn()),
     onBlockedMoveRef: ref(vi.fn()),
-    onPathOffsetCommitRef: ref(vi.fn(() => save)),
+    onPathOffsetCommitRef: ref(vi.fn(typeof save === "function" ? save : () => save)),
     snapGuidesRef: ref(null),
     groupGestureRef: ref(null),
     blockedMoveRef: ref(null),
@@ -69,3 +94,146 @@ it("a drag whose save is still running can be painted back at once, and shown ag
   await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
   expect(paintBackNewestStudioPendingEdit()).toBeNull();
 });
+
+/** Resizes or rotates a plain 240x160 box; the commit draws what it saves at once and its save waits for `save`. */
+function gestureWithSaveRunning(kind: "resize" | "rotate", save: Promise<void>) {
+  const element = document.createElement("div");
+  element.setAttribute(
+    "style",
+    "position: absolute; width: 240px; height: 160px; clip-path: inset(10px)",
+  );
+  document.body.append(element);
+  const selection = {
+    element,
+    capabilities: { canApplyManualSize: true, canApplyManualRotation: true },
+  };
+  const handlers = createDomEditOverlayGestureHandlers({
+    selectionRef: ref(selection as unknown as DomEditSelection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 }),
+    boxRef: ref(document.createElement("div")),
+    overlayRef: ref(null),
+    iframeRef: ref(null),
+    gestureRef: ref<GestureState | null>(null),
+    rafPausedRef: ref(false),
+    onBoxSizeCommitRef: ref(
+      vi.fn(() => {
+        element.style.setProperty("clip-path", "inset(15px)");
+        return save;
+      }),
+    ),
+    onRotationCommitRef: ref((sel: DomEditSelection, next: never) =>
+      savePlainRotation({ commitPositionPatchToHtml: () => save.then(() => undefined) }, sel, next),
+    ),
+    snapGuidesRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    setOverlayRect: vi.fn(),
+    suppressNextBoxClickRef: ref(false),
+    hoverSelectionRef: ref(null),
+    onCanvasMouseDown: vi.fn(),
+  } as never);
+  const start = kind === "resize" ? pointer(240, 160) : pointer(240, 80);
+  expect(handlers.startGesture(kind, start as never, { resizeHandle: "se" })).toBe(true);
+  const end = kind === "resize" ? pointer(300, 200) : pointer(120, 200);
+  handlers.onPointerMove(end as never);
+  handlers.onPointerUp(end as never);
+  return element;
+}
+
+it.each(["resize", "rotate"] as const)(
+  "a %s whose save is still running can be painted back at once, and shown again",
+  async (kind) => {
+    let saved!: () => void;
+    const element = gestureWithSaveRunning(kind, new Promise<void>((resolve) => (saved = resolve)));
+    const before = "position: absolute; width: 240px; height: 160px; clip-path: inset(10px)";
+    const edited = element.getAttribute("style");
+    expect(edited).not.toBe(before);
+
+    const shown = paintBackNewestStudioPendingEdit();
+    expect(element.getAttribute("style")).toBe(before);
+    expect(paintBackNewestStudioPendingEdit()).toBeNull();
+    shown!.showAgain();
+    expect(element.getAttribute("style")).toBe(edited);
+
+    saved();
+    await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+  },
+);
+
+it("a drag of a box GSAP positions is painted back to where GSAP had it, and shown again", async () => {
+  const gsapOf = fakeGsap({ x: 5, y: 7 });
+  let saved!: () => void;
+  const element = dragWithSaveRunning(new Promise<void>((resolve) => (saved = resolve)));
+  const moved = { ...gsapOf(element) };
+  expect(moved).not.toMatchObject({ x: 5, y: 7 });
+
+  const shown = paintBackNewestStudioPendingEdit();
+  expect(gsapOf(element)).toMatchObject({ x: 5, y: 7 });
+  shown!.showAgain();
+  expect(gsapOf(element)).toMatchObject({ x: moved.x, y: moved.y });
+
+  saved();
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+});
+
+it("a rotate of a box GSAP turns is painted back to GSAP's angle at press, and shown again", async () => {
+  const gsapOf = fakeGsap({ rotation: 10 });
+  let saved!: () => void;
+  const element = gestureWithSaveRunning(
+    "rotate",
+    new Promise<void>((resolve) => (saved = resolve)),
+  );
+  const turned = gsapOf(element).rotation;
+  expect(turned).not.toBe(10);
+
+  const shown = paintBackNewestStudioPendingEdit();
+  expect(gsapOf(element).rotation).toBe(10);
+  shown!.showAgain();
+  expect(gsapOf(element).rotation).toBe(turned);
+
+  saved();
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+});
+
+it("a GSAP drag saved as a left/top offset stays painted back while that offset is drawn", async () => {
+  fakeGsap({ x: 5, y: 7 });
+  let saved!: () => void;
+  let drawn!: Promise<void>;
+  const element = dragWithSaveRunning(() => {
+    const edit = adoptingStudioPendingEdit()!;
+    drawn = new Promise<void>((resolve) => (saved = resolve)).then(() =>
+      edit.drawKeepingUndone(() => void element.style.setProperty("left", "99px")),
+    );
+    return drawn;
+  });
+
+  const shown = paintBackNewestStudioPendingEdit();
+  saved();
+  await drawn;
+  expect(element.style.getPropertyValue("left")).toBe("");
+  shown!.showAgain();
+  expect(element.style.getPropertyValue("left")).toBe("99px");
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+});
+
+it("keeps a GSAP drag's base through every repaint of its undo, so its save adds the drag once", async () => {
+  const gsapOf = fakeGsap({ x: 5, y: 7 });
+  let edit!: StudioEditInFlight;
+  let release!: () => void;
+  const element = dragWithSaveRunning(() => {
+    edit = adoptingStudioPendingEdit()!;
+    return new Promise<void>((resolve) => (release = resolve));
+  });
+  const moved = { ...gsapOf(element) };
+
+  const shown = paintBackNewestStudioPendingEdit();
+  edit.drawKeepingUndone(() => undefined);
+  expect(gsapOf(element)).toMatchObject({ x: 5, y: 7 });
+  expect(element.getAttribute("data-hf-drag-gsap-base-x")).toBe("5");
+  shown!.showAgain();
+  expect(gsapOf(element)).toMatchObject({ x: moved.x, y: moved.y });
+  expect(element.getAttribute("data-hf-drag-gsap-base-x")).toBe("5");
+
+  release();
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+});

package/src/components/editor/gestureUndoRevert.ts

@@ -0,0 +1,104 @@
+import {
+  captureStudioPathOffset,
+  restoreStudioPathOffset,
+  type StudioPathOffsetSnapshot,
+} from "./manualEdits";
+import {
+  getOffsetDragGsap,
+  stampGestureBase,
+  type ManualOffsetDragMember,
+} from "./manualOffsetDrag";
+import type { StudioEditRevert } from "../../utils/studioPendingEdits";
+
+interface MemberPosition {
+  offset: StudioPathOffsetSnapshot;
+  gsap: { x: number; y: number } | null;
+  placement: string[];
+}
+
+// Where an element-offset move draws the element when no transform channel can take it.
+const PLACEMENT = ["position", "left", "top"];
+const placementOf = (element: HTMLElement) =>
+  PLACEMENT.map((prop) => element.style.getPropertyValue(prop));
+
+function showPlacement(element: HTMLElement, placement: string[]): void {
+  PLACEMENT.forEach((prop, i) => {
+    if (placement[i]) element.style.setProperty(prop, placement[i]!);
+    else element.style.removeProperty(prop);
+  });
+}
+
+function readMemberPosition(member: ManualOffsetDragMember): MemberPosition {
+  const gsap = member.plainTranslate ? null : getOffsetDragGsap(member.element);
+  return {
+    offset: captureStudioPathOffset(member.element),
+    gsap: gsap && {
+      x: Number(gsap.getProperty(member.element, "x")),
+      y: Number(gsap.getProperty(member.element, "y")),
+    },
+    placement: placementOf(member.element),
+  };
+}
+
+function showMemberPosition(member: ManualOffsetDragMember, position: MemberPosition): void {
+  restoreStudioPathOffset(member.element, position.offset);
+  showPlacement(member.element, position.placement);
+  if (position.gsap) getOffsetDragGsap(member.element)?.set(member.element, { ...position.gsap });
+  // The restore drops the gesture's base stamps; its save still reads them.
+  if (!member.plainTranslate)
+    stampGestureBase(member.element, member.initialOffset, member.baseGsap);
+}
+
+/** Undo's live revert of a move: its members at gesture start. */
+export function manualOffsetMoveRevert(members: ManualOffsetDragMember[]): StudioEditRevert {
+  const startPlacement = members.map((member) => placementOf(member.element));
+  return () => {
+    const shown = members.map(readMemberPosition);
+    members.forEach((member, i) =>
+      showMemberPosition(member, {
+        offset: member.initialPathOffset,
+        gsap: member.plainTranslate ? null : member.baseGsap,
+        placement: startPlacement[i]!,
+      }),
+    );
+    return () => members.forEach((member, i) => showMemberPosition(member, shown[i]!));
+  };
+}
+
+export interface StudioElementLook {
+  style: string | null;
+  gsap: Record<string, number> | null;
+}
+
+const GSAP_LOOK_PROPS = ["x", "y", "rotation", "scaleX", "scaleY"];
+
+/** Reads GSAP only for an element it owns: reading a plain one makes GSAP bake its CSS into a transform. */
+export function readElementLook(element: HTMLElement, gsapOwned: boolean): StudioElementLook {
+  const gsap = gsapOwned ? getOffsetDragGsap(element) : null;
+  return {
+    style: element.getAttribute("style"),
+    gsap:
+      gsap &&
+      Object.fromEntries(
+        GSAP_LOOK_PROPS.map((prop) => [prop, Number(gsap.getProperty(element, prop))]),
+      ),
+  };
+}
+
+function showElementLook(element: HTMLElement, look: StudioElementLook): void {
+  if (look.style === null) element.removeAttribute("style");
+  else element.setAttribute("style", look.style);
+  if (look.gsap) getOffsetDragGsap(element)?.set(element, { ...look.gsap });
+}
+
+/** Undo's live revert of a resize or rotate: the element as it looked at press. */
+export function elementLookRevert(
+  element: HTMLElement,
+  start: StudioElementLook,
+): StudioEditRevert {
+  return () => {
+    const shown = readElementLook(element, start.gsap !== null);
+    showElementLook(element, start);
+    return () => showElementLook(element, shown);
+  };
+}

package/src/components/editor/manualOffsetDrag.ts

@@ -13,7 +13,6 @@ import {
 import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, UNREADABLE_TRANSLATE, writeTranslatePx } from "./plainTranslate";
-import type { StudioEditRevert } from "../../utils/studioPendingEdits";
 
 interface OffsetDragGsap {
   set: (el: Element, vars: Record<string, number | string>) => void;
@@ -448,7 +447,7 @@ export function applyManualOffsetDragDraft(
  * the element flies off-screen the instant you drop it. The member holds the
  * true gesture-start values in JS, immune to the re-render.
  */
-function stampGestureBase(el: HTMLElement, initialOffset: Point, baseGsap: Point): void {
+export function stampGestureBase(el: HTMLElement, initialOffset: Point, baseGsap: Point): void {
   el.setAttribute("data-hf-drag-gsap-base-x", String(baseGsap.x));
   el.setAttribute("data-hf-drag-gsap-base-y", String(baseGsap.y));
   el.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
@@ -510,16 +509,6 @@ function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 
-/** Undo's live revert of a move: its members at gesture start. Null off the plain route, which GSAP draws. */
-export function manualOffsetMoveRevert(members: ManualOffsetDragMember[]): StudioEditRevert | null {
-  if (!members.every((member) => member.plainTranslate)) return null;
-  return () => {
-    const shown = members.map((member) => captureStudioPathOffset(member.element));
-    for (const member of members) restoreStudioPathOffset(member.element, member.initialPathOffset);
-    return () => members.forEach((member, i) => restoreStudioPathOffset(member.element, shown[i]!));
-  };
-}
-
 /** Roll back a FAILED drag to the exact gesture-start state. */
 export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {

package/src/components/editor/useDomEditNudge.ts

@@ -32,10 +32,10 @@ import {
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
-  manualOffsetMoveRevert,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
+import { manualOffsetMoveRevert } from "./gestureUndoRevert";
 import { isStudioManualEditGestureCurrent, restoreStudioPathOffset } from "./manualEdits";
 import {
   CANVAS_NUDGE_COMMIT_DEBOUNCE_MS,

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -12,8 +12,8 @@ import {
   applyManualOffsetDragDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
-  manualOffsetMoveRevert,
 } from "./manualOffsetDrag";
+import { manualOffsetMoveRevert, elementLookRevert } from "./gestureUndoRevert";
 import { applyRotationDraft, restoreRotationDraft } from "./rotationDraft";
 import {
   applyStudioBoxSize,
@@ -443,7 +443,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       // Hold the final angle while the commit lands.
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
       const commit = { ...finalRotation, plain: g.plainRotation };
-      void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved = Promise.resolve(edit.adopt(() => opts.onRotationCommitRef.current(sel, commit)))
         .then((result) => trackPreviewEditResult("rotate", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
@@ -454,6 +455,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
             restoreRotation();
         })
         .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
+      edit.settle(saved);
     } else if (g.kind === "drag") {
       // A moved drag (taps returned earlier) must not let the release click
       // re-select whatever now sits under the pointer — dropping over a
@@ -535,9 +537,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         restoreStudioBoxSize(sel.element, g.initialBoxSize);
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
-      void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member),
-      )
+      const commitSize = () =>
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member);
+      const edit = beginStudioPendingEdit(elementLookRevert(sel.element, g.initialLook));
+      const saved = Promise.resolve(edit.adopt(commitSize))
         .then((result) => trackPreviewEditResult("resize", "drag", result))
         .catch((error) => {
           logGestureCommitFailure("resize commit failed", error);
@@ -546,6 +549,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           if (member) endManualOffsetDragMembers([member]);
           else endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         });
+      edit.settle(saved);
       logResizeSettle(sel.element, "post-release");
     }
   };