@hyperframes/studio 0.8.89 → 0.8.91

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-KU4F7QZ3.js";
+} from "./chunk-QPSOTK6M.js";
 import "./chunk-QZ6HNNFG.js";
 import "./chunk-S65AQH6M.js";
 import "./chunk-PZ5AY32C.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.89",
+  "version": "0.8.91",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.89",
-    "@hyperframes/sdk": "0.8.89",
-    "@hyperframes/shader-transitions": "0.8.89",
-    "@hyperframes/core": "0.8.89",
-    "@hyperframes/player": "0.8.89",
-    "@hyperframes/studio-server": "0.8.89"
+    "@hyperframes/parsers": "0.8.91",
+    "@hyperframes/player": "0.8.91",
+    "@hyperframes/shader-transitions": "0.8.91",
+    "@hyperframes/sdk": "0.8.91",
+    "@hyperframes/studio-server": "0.8.91",
+    "@hyperframes/core": "0.8.91"
   },
   "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.89"
+    "@hyperframes/producer": "0.8.91"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineToolbar.test.tsx

@@ -226,6 +226,18 @@ describe("TimelineToolbar Fit", () => {
     expect(fit()?.getAttribute("aria-pressed")).toBe("false");
     act(() => root.unmount());
   });
+
+  it("counts a zoom-in click as a person's zoom, so the timeline anchors it on the playhead", () => {
+    const { host, root } = renderToolbar();
+    const before = usePlayerStore.getState().userZoomCount;
+    act(() =>
+      host
+        .querySelector('button[aria-label="Zoom in"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+    expect(usePlayerStore.getState().userZoomCount).toBe(before + 1);
+    act(() => root.unmount());
+  });
 });
 
 describe("TimelineToolbar audio meters", () => {

package/src/components/editor/MotionPathOverlay.tsx

@@ -127,7 +127,11 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   // just in render, after the early returns) so the park-timer cleanup can key on
   // it: a pending park seek belongs to the OLD animation, so firing it after the
   // active animation changed would jump the playhead onto a stale keyframe.
-  const animId = editableAnimationId(selectedGsapAnimations ?? [], geometry?.kind ?? "linear");
+  const animId = editableAnimationId(
+    selectedGsapAnimations ?? [],
+    geometry?.kind ?? "linear",
+    selection,
+  );
   // Clear the debounced park timer on unmount AND whenever the active animation id
   // changes — not unmount-only, or a queued seek from the previous selection still
   // fires against the new one.

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

@@ -377,45 +377,32 @@ describe("handles follow what Studio would commit", () => {
     expect(flags(seen.selection)[0]).toBe(true);
   });
 
-  it("refuses a group move carried by one shared tween, while a single member stays movable", async () => {
+  // The per-element left/top channel supersedes the old refusal: each member saves its own move.
+  it("lets a group move carried by one shared tween through as each member's own offset", async () => {
     const dots = [element("dot-1", "dot"), element("dot-2", "dot")];
     const preview = livePreview(dots, { y: 40 });
     const stagger = tween({ y: 40 }, { targetSelector: ".dot", method: "from" } as never);
     const [a, b] = dots.map(resolved);
-    const { seen, overlay, spies, render } = await select([stagger], {
+    const { seen, overlay, spies } = await select([stagger], {
       selection: a!,
       groups: [a!, b!],
       preview,
     });
 
-    expect(seen.groups.map((s) => flags(s)[0])).toEqual([false, false]);
-    expect(seen.groups[0]?.capabilities.reasonIfDisabled).toBe(
-      GSAP_EDIT_BLOCK_COPY["source-uneditable"],
-    );
+    expect(seen.groups.map((s) => flags(s)[0])).toEqual([true, true]);
     fire(overlay().querySelector(BOX)!, "pointerdown", { clientX: 150, clientY: 150 });
-    expect(spies.onBlockedMove).toHaveBeenCalledTimes(1);
-    const commitList = getAnimationsForElement(
-      [stagger],
-      { id: "dot-1", selector: "#dot-1" },
-      dots[0],
-    );
+    expect(spies.onBlockedMove).not.toHaveBeenCalled();
     const groupPreflight = { preflightOnly: true, group: true };
     const commit = tryGsapDragIntercept(
       a!,
       { x: 0, y: 0 },
-      commitList,
+      [stagger],
       preview,
       vi.fn(),
       undefined,
       groupPreflight,
     );
-    expect(await commit).toMatchObject({
-      status: "blocked",
-      detail: "live-position-no-source-tween",
-    });
-
-    render({ selection: a!, preview });
-    expect(flags(seen.selection)[0]).toBe(true);
+    expect(await commit).toEqual({ status: "element-offset" });
   });
 
   it("toasts once on the primary press of a blocked element, before any travel", async () => {

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

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import { applyElementPositionOffset } from "./elementPositionOffset";
+
+// jsdom has no layout: offsets follow left/top unless the box is anchored elsewhere.
+function word(style: string, anchoredRight = false): HTMLElement {
+  const el = document.createElement("span");
+  el.setAttribute("style", style);
+  const px = (v: string) => Number.parseFloat(v) || 0;
+  Object.defineProperties(el, {
+    offsetLeft: { get: () => (anchoredRight ? 500 : 100 + px(el.style.left)) },
+    offsetTop: { get: () => 200 + px(el.style.top) },
+    offsetWidth: { get: () => 80 },
+    offsetHeight: { get: () => 40 },
+  });
+  el.setAttribute("data-hf-drag-initial-offset-x", "0");
+  el.setAttribute("data-hf-drag-initial-offset-y", "0");
+  document.body.append(el);
+  return el;
+}
+
+describe("applyElementPositionOffset", () => {
+  it("persists position for a static word the Layers panel lifted to relative", () => {
+    const el = word("position: relative");
+    el.setAttribute("data-hf-reveal-prior-pos", "static");
+    expect(applyElementPositionOffset(el, { x: 40, y: 20 })).toEqual([
+      { type: "inline-style", property: "position", value: "relative" },
+      { type: "inline-style", property: "left", value: "40px" },
+      { type: "inline-style", property: "top", value: "20px" },
+    ]);
+    expect(el.hasAttribute("data-hf-reveal-prior-pos")).toBe(false);
+  });
+
+  it("names percent positioning as the reason it refuses", () => {
+    const el = word("position: relative; left: 10%; top: 0px");
+    expect(applyElementPositionOffset(el, { x: 40, y: 20 })).toBe("percent");
+    expect(el.style.left).toBe("10%");
+  });
+
+  it("moves a static element by relative left/top", () => {
+    const el = word("");
+    expect(applyElementPositionOffset(el, { x: 40, y: 20 })).toEqual([
+      { type: "inline-style", property: "position", value: "relative" },
+      { type: "inline-style", property: "left", value: "40px" },
+      { type: "inline-style", property: "top", value: "20px" },
+    ]);
+  });
+
+  it("adds to left/top the element already has, so a second drag accumulates", () => {
+    const el = word("position: relative; left: 40px; top: 20px");
+    expect(applyElementPositionOffset(el, { x: 40, y: 20 })).toEqual([
+      { type: "inline-style", property: "left", value: "80px" },
+      { type: "inline-style", property: "top", value: "40px" },
+    ]);
+  });
+
+  it("refuses, leaving the element untouched, when left does not move the box", () => {
+    const el = word("position: absolute; right: 30px", true);
+    expect(applyElementPositionOffset(el, { x: 40, y: 20 })).toBe("anchored");
+    expect([el.style.left, el.style.top, el.style.right]).toEqual(["", "", "30px"]);
+  });
+});

package/src/components/editor/elementPositionOffset.ts

@@ -0,0 +1,64 @@
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import { LAYER_REVEAL_PRIOR_POSITION_ATTR } from "../../player/lib/timelineElementHelpers";
+
+interface LayoutBox {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+const layoutBox = (el: HTMLElement): LayoutBox => ({
+  left: el.offsetLeft,
+  top: el.offsetTop,
+  width: el.offsetWidth,
+  height: el.offsetHeight,
+});
+
+function readDragStart(el: HTMLElement, axis: "x" | "y"): number {
+  const value = Number.parseFloat(el.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "");
+  return Number.isFinite(value) ? value : 0;
+}
+
+export type ElementOffsetRefusal = "percent" | "anchored";
+
+/** Moves one element by adding to its own `left`/`top` (GSAP never parses them), or
+ *  names why not, leaving the element untouched. */
+export function applyElementPositionOffset(
+  el: HTMLElement,
+  gestureOffset: { x: number; y: number },
+): PatchOperation[] | ElementOffsetRefusal {
+  const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (!cs) return "anchored";
+  const dx = Math.round(gestureOffset.x - readDragStart(el, "x"));
+  const dy = Math.round(gestureOffset.y - readDragStart(el, "y"));
+  // A Layers-panel pick lifts a static element to relative for display only.
+  const lifted = el.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR) === "static";
+  const isStatic = lifted || !/^(relative|absolute|fixed|sticky)$/.test(cs.position);
+  if (!isStatic && (cs.left.endsWith("%") || cs.top.endsWith("%"))) return "percent";
+  const baseLeft = isStatic ? 0 : Number.parseFloat(cs.left) || 0;
+  const baseTop = isStatic ? 0 : Number.parseFloat(cs.top) || 0;
+  const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
+  const before = layoutBox(el);
+  if (isStatic) el.style.position = "relative";
+  el.style.left = `${Math.round(baseLeft) + dx}px`;
+  el.style.top = `${Math.round(baseTop) + dy}px`;
+  const after = layoutBox(el);
+  const shiftedExactly =
+    Math.abs(after.left - before.left - dx) <= 1 &&
+    Math.abs(after.top - before.top - dy) <= 1 &&
+    Math.abs(after.width - before.width) <= 1 &&
+    Math.abs(after.height - before.height) <= 1;
+  if (!shiftedExactly) {
+    Object.assign(el.style, previous);
+    return "anchored";
+  }
+  if (lifted) el.removeAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
+  return [
+    ...(isStatic
+      ? [{ type: "inline-style", property: "position", value: "relative" } as const]
+      : []),
+    { type: "inline-style", property: "left", value: el.style.left },
+    { type: "inline-style", property: "top", value: el.style.top },
+  ];
+}

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

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { describe, it, expect, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import { editableAnimationId } from "./motionPathSelection";
@@ -19,10 +20,13 @@ const anim = (over: Partial<GsapAnimation>): GsapAnimation =>
     ...over,
   }) as GsapAnimation;
 
+// The element the default `#el` tweens target.
+const elSel = { id: "el" } as never;
+
 describe("editableAnimationId", () => {
   it("picks the arc animation for an arc path", () => {
     const arc = anim({ id: "arc1", arcPath: { enabled: true, autoRotate: false, segments: [] } });
-    expect(editableAnimationId([anim({ id: "other" }), arc], "arc")).toBe("arc1");
+    expect(editableAnimationId([anim({ id: "other" }), arc], "arc", elSel)).toBe("arc1");
   });
 
   it("picks a position-keyframe animation for a linear path", () => {
@@ -34,7 +38,7 @@ describe("editableAnimationId", () => {
         keyframes: [{ percentage: 0, properties: { x: 0, y: 0 } }],
       } as never,
     });
-    expect(editableAnimationId([kf], "linear")).toBe("kf1");
+    expect(editableAnimationId([kf], "linear", elSel)).toBe("kf1");
   });
 
   it("returns null for dynamic (unresolved) tweens — read-only", () => {
@@ -43,7 +47,7 @@ describe("editableAnimationId", () => {
       arcPath: { enabled: true, autoRotate: false, segments: [] },
       hasUnresolvedKeyframes: true,
     });
-    expect(editableAnimationId([dyn], "arc")).toBeNull();
+    expect(editableAnimationId([dyn], "arc", elSel)).toBeNull();
   });
 
   it("returns null for non-literal (helper) provenance — read-only", () => {
@@ -52,11 +56,27 @@ describe("editableAnimationId", () => {
       arcPath: { enabled: true, autoRotate: false, segments: [] },
       provenance: { kind: "helper" } as never,
     });
-    expect(editableAnimationId([helper], "arc")).toBeNull();
+    expect(editableAnimationId([helper], "arc", elSel)).toBeNull();
+  });
+
+  it("leaves a tween that also moves the element's siblings read-only", () => {
+    document.body.innerHTML = `<span class="w" data-hf-id="w0">How</span><span class="w" data-hf-id="w1">we</span>`;
+    const word = document.querySelector<HTMLElement>('[data-hf-id="w0"]')!;
+    const stagger = anim({
+      id: "stagger",
+      targetSelector: ".w",
+      propertyGroup: "position",
+      keyframes: {
+        format: "percentage",
+        keyframes: [{ percentage: 0, properties: { x: 0, y: 0 } }],
+      } as never,
+    });
+    const wordSel = { selector: ".w", selectorIndex: 0, hfId: "w0", element: word } as never;
+    expect(editableAnimationId([stagger], "linear", wordSel)).toBeNull();
   });
 
   it("returns null when nothing matches", () => {
-    expect(editableAnimationId([anim({ id: "x" })], "linear")).toBeNull();
+    expect(editableAnimationId([anim({ id: "x" })], "linear", elSel)).toBeNull();
   });
 });
 

package/src/components/editor/motionPathSelection.ts

@@ -5,7 +5,7 @@
  */
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { DomEditSelection } from "./domEditing";
-import { writeTargetSelector } from "../../hooks/gsapShared";
+import { tweenTargetsElement, writeTargetSelector } from "../../hooks/gsapShared";
 
 /**
  * The selector the overlay both MEASURES the element by and authors a new
@@ -24,13 +24,20 @@ export function selectorFor(sel: DomEditSelection | null): string | null {
 
 /** The animation whose path is editable on-canvas: literal, statically resolved,
  *  and matching the rendered geometry kind. Returns null when the path can only
- *  be displayed (dynamic/helper tweens) — those nodes stay read-only. */
+ *  be displayed (dynamic/helper tweens, or a tween that also moves other
+ *  elements) — those nodes stay read-only and a press drags the element itself. */
 export function editableAnimationId(
   animations: GsapAnimation[],
   kind: "linear" | "arc",
+  sel: DomEditSelection | null,
 ): string | null {
+  const own = selectorFor(sel);
   const ok = (a: GsapAnimation) =>
-    !a.hasUnresolvedKeyframes && !a.hasUnresolvedSelector && !a.provenance;
+    !a.hasUnresolvedKeyframes &&
+    !a.hasUnresolvedSelector &&
+    !a.provenance &&
+    !!own &&
+    tweenTargetsElement(a.targetSelector, own, sel?.element);
   if (kind === "arc") return animations.find((a) => a.arcPath?.enabled && ok(a))?.id ?? null;
   const a = animations.find(
     (anim) =>

package/src/components/editor/useInlineTextEditing.tsx

@@ -61,10 +61,8 @@ export function useInlineTextEditing(
   const elementUnderPress = (event: { clientX: number; clientY: number }) => {
     const iframe = actions?.previewIframeRef?.current;
     if (!iframe) return null;
-    // Studio suppresses pointer events inside the composition so the canvas
-    // overlay can own input, which means a plain elementFromPoint only ever
-    // finds wrappers. This helper lifts that for the length of the hit test,
-    // and is the same one the canvas uses to decide what was clicked.
+    // The same hit test the canvas uses to decide what was clicked; a plain
+    // elementFromPoint only finds wrappers, since Studio suppresses pointer events.
     return getPreviewTargetFromPointer(
       iframe,
       event.clientX,

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

@@ -56,6 +56,14 @@ describe("liftElementToTop / restoreLiftedElement", () => {
     expect(el.style.zIndex).toBe("");
   });
 
+  it("keeps a position a move authored while the element was lifted", () => {
+    const el = makeEl();
+    const lift = liftElementToTop(el)!;
+    el.removeAttribute("data-hf-reveal-prior-pos");
+    restoreLiftedElement(el, lift);
+    expect(el.style.position).toBe("relative");
+  });
+
   it("a z-reorder commit consumes the lift: restore becomes a no-op", () => {
     const el = makeEl("3", "absolute");
     const lift = liftElementToTop(el)!;

package/src/components/editor/useLayerRevealOverride.ts

@@ -271,12 +271,13 @@ export function restoreLiftedElement(element: HTMLElement, lift: RevealLift): vo
     }
     return;
   }
+  const positionStillLifted = element.hasAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
   element.removeAttribute(LAYER_REVEAL_PRIOR_Z_ATTR);
   element.removeAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
   if (element.style.zIndex === LAYER_REVEAL_LIFT_Z) {
     restoreInline(element, "z-index", lift.priors.zIndex);
   }
-  if (lift.positionLifted && element.style.position === "relative") {
+  if (lift.positionLifted && positionStillLifted && element.style.position === "relative") {
     restoreInline(element, "position", lift.priors.position);
   }
 }

package/src/components/nle/NLEContext.tsx

@@ -21,7 +21,7 @@ export interface NLEContextValue {
   play: () => void;
   pause: () => void;
   togglePlay: () => void;
-  seek: (time: number, options?: { keepPlaying?: boolean }) => boolean;
+  seek: (time: number, options?: { keepPlaying?: boolean; follow?: boolean }) => boolean;
   refreshPlayer: () => void;
   onIframeLoad: () => void;
   // The hidden reload iframe NLEPreview renders next to the live one during a full reload.

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -149,6 +149,59 @@ function arrangeClickedCircle(): {
   return { circle, selection: selectionForElement(circle) };
 }
 
+// main 0 > intro 2 > logo 3 > badge 1: rows are master time, tweens are local.
+function nestedKeyframedRow(id: string, start: number, duration: number, host: number) {
+  const row: TimelineElement = {
+    id,
+    key: `compositions/${id}-parent.html#${id}`,
+    domId: id,
+    tag: "div",
+    start,
+    duration,
+    track: 0,
+    sourceFile: `compositions/${id}-parent.html`,
+    parentCompositionStart: host,
+  };
+  const anim: GsapAnimation = {
+    ...authoredInteriorAnimation(),
+    id: `${id}-to-position`,
+    targetSelector: `#${id}`,
+    position: start - host,
+    resolvedStart: start - host,
+    duration,
+  };
+  usePlayerStore.setState({
+    elements: [row],
+    gsapAnimations: new Map([[row.key!, [anim]]]),
+  });
+  return { row, anim };
+}
+
+describe("keyframe drags on nested rows", () => {
+  it.each([
+    ["logo", 5, 5, 2, 60],
+    ["badge", 6, 2, 5, 75],
+  ])("re-keys %s's middle keyframe inside its local tween", async (id, start, dur, host, pct) => {
+    const { row, anim } = nestedKeyframedRow(id, start, dur, host);
+    const view = renderCallbacks();
+    await act(async () => {
+      await view.callbacks.onMoveKeyframe?.(
+        row.key!,
+        { percentage: 50, propertyGroup: "position", tweenPercentage: 50, animationId: anim.id },
+        pct,
+      );
+    });
+    expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith(
+      anim.id,
+      50,
+      pct,
+      selectionForElement(row),
+    );
+    expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled();
+    view.unmount();
+  });
+});
+
 beforeEach(() => {
   vi.clearAllMocks();
   mocks.animations = [flatAnimation];

package/src/hooks/domEditPersistFailure.ts

@@ -46,6 +46,13 @@ function getSelectionLabel(selection: DomEditPersistFailureSelection): string {
   return selection.label || selection.selector || selection.id || "this element";
 }
 
+export function wasAlreadyToasted(error: unknown): boolean {
+  return (
+    (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) &&
+    error.alreadyToasted
+  );
+}
+
 export function reportDomEditPersistFailure(
   selection: DomEditPersistFailureSelection,
   operations: PatchOperation[],
@@ -59,12 +66,7 @@ export function reportDomEditPersistFailure(
     error: detail,
   });
 
-  const wasAlreadyToasted =
-    (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) &&
-    error.alreadyToasted;
-  if (wasAlreadyToasted) {
-    return;
-  }
+  if (wasAlreadyToasted(error)) return;
 
   showToast(`Couldn't save "${getSelectionLabel(selection)}": ${detail}`, "error");
 }

package/src/hooks/elementOffsetStager.ts

@@ -0,0 +1,65 @@
+import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
+import {
+  applyElementPositionOffset,
+  type ElementOffsetRefusal,
+} from "../components/editor/elementPositionOffset";
+import { LAYER_REVEAL_PRIOR_POSITION_ATTR } from "../player/lib/timelineElementHelpers";
+import type { PatchOperation } from "../utils/sourcePatcher";
+
+const ELEMENT_OFFSET_REFUSED: Record<ElementOffsetRefusal, string> = {
+  anchored: "This layer is anchored from its right or bottom edge. Move it in the Code tab.",
+  percent: "This layer's position is set in percent. Move it in the Code tab.",
+};
+
+export interface ElementOffsetStagerDeps {
+  commitPositionPatchToHtml: (
+    selection: DomEditSelection,
+    patches: PatchOperation[],
+    options: { label: string; coalesceKey: string; coalesceMs?: number },
+  ) => Promise<void>;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  readOnlyPreview?: boolean;
+}
+
+/** The drag draft moved GSAP's x/y; left/top carries the move now, so put them back. */
+function settleGsapDraftAtGestureStart(el: HTMLElement): void {
+  const gsap = (el.ownerDocument.defaultView as { gsap?: { set: (t: Element, v: object) => void } })
+    ?.gsap;
+  const x = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-x") ?? "");
+  const y = Number.parseFloat(el.getAttribute("data-hf-drag-gsap-base-y") ?? "");
+  if (gsap && Number.isFinite(x) && Number.isFinite(y)) gsap.set(el, { x, y });
+}
+
+/** Applies a shared-tween element's move live now; `save` persists it as left/top on that
+ *  element, `rollback` takes the live move back. Throws, after a toast, when it cannot. */
+export function stageElementOffset(
+  { commitPositionPatchToHtml, showToast, readOnlyPreview }: ElementOffsetStagerDeps,
+  selection: DomEditSelection,
+  next: { x: number; y: number },
+  coalesceKey?: string,
+): { save: () => Promise<void>; rollback: () => void } {
+  const el = selection.element;
+  if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => undefined };
+  const previous = { position: el.style.position, left: el.style.left, top: el.style.top };
+  const liftMarker = el.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
+  const result = applyElementPositionOffset(el, next);
+  if (!Array.isArray(result)) {
+    showToast(ELEMENT_OFFSET_REFUSED[result], "error");
+    throw new Error(ELEMENT_OFFSET_REFUSED[result]);
+  }
+  settleGsapDraftAtGestureStart(el);
+  const rollback = () => {
+    Object.assign(el.style, previous);
+    if (liftMarker !== null) el.setAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR, liftMarker);
+  };
+  const save = () =>
+    commitPositionPatchToHtml(selection, result, {
+      label: "Move layer",
+      coalesceKey: coalesceKey ?? `element-offset:${getDomEditTargetKey(selection)}`,
+      ...(coalesceKey && { coalesceMs: Number.POSITIVE_INFINITY }),
+    }).catch((error) => {
+      rollback();
+      throw error;
+    });
+  return { save, rollback };
+}

package/src/hooks/gestureTransaction.ts

@@ -14,7 +14,8 @@ export interface GestureTransaction {
   element: HTMLElement;
   label: string;
   settle(): void;
-  persist(commit: TxCommit): Promise<void>;
+  persist(commit: TxCommit, coalesceKey: string): Promise<void>;
+  afterBufferedCommitsSaved?(): Promise<void>;
   restore(): void;
   skipPixelAssert?: boolean;
 }
@@ -142,9 +143,10 @@ export function runGestureTransaction(tx: GestureTransaction): Promise<void> {
   };
 
   return tx
-    .persist(commit)
+    .persist(commit, coalesceKey)
     .then(async () => {
       reloadCount = await dispatchBufferedCommits(bufferedCommits);
+      await tx.afterBufferedCommitsSaved?.();
       const durationMs = Math.round(performance.now() - startedAt);
       logCommit("persisted", { label: tx.label, coalesceKey });
       if (before) {

package/src/hooks/gsapDragCommit.ts

@@ -29,6 +29,7 @@ export interface GsapDragCommitCallbacks {
     options: {
       label: string;
       coalesceKey?: string;
+      coalesceMs?: number;
       softReload?: boolean;
       skipReload?: boolean;
       beforeReload?: () => void;

package/src/hooks/gsapEditOutcome.ts

@@ -43,7 +43,8 @@ export type GsapEditOutcome =
        */
       ownsDragOffset?: boolean;
     }
-  | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail };
+  | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail }
+  | { status: "element-offset" };
 
 export const GSAP_EDIT_BLOCK_COPY: Record<GsapEditBlockReason, string> = {
   "no-selector": "This layer needs a stable selector before Studio can save the edit.",