@hyperframes/studio 0.8.94 → 0.8.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.94",
+  "version": "0.8.96",
   "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.94",
-    "@hyperframes/shader-transitions": "0.8.94",
-    "@hyperframes/player": "0.8.94",
-    "@hyperframes/studio-server": "0.8.94",
-    "@hyperframes/parsers": "0.8.94",
-    "@hyperframes/sdk": "0.8.94"
+    "@hyperframes/core": "0.8.96",
+    "@hyperframes/player": "0.8.96",
+    "@hyperframes/parsers": "0.8.96",
+    "@hyperframes/sdk": "0.8.96",
+    "@hyperframes/studio-server": "0.8.96",
+    "@hyperframes/shader-transitions": "0.8.96"
   },
   "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.94"
+    "@hyperframes/producer": "0.8.96"
   },
   "peerDependencies": {
     "react": "19",

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

@@ -126,6 +126,69 @@ describe("DomEditCropHandles clip lift/restore", () => {
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(10px 30px 10px 10px)");
   });
 
+  it.each([
+    { name: "a crop edge", clip: "inset(10px)", handle: "Crop right", dx: -20, dy: 0 },
+    {
+      name: "the reposition handle on fractional insets",
+      clip: "inset(20px 0.42px 40px 0.03px)",
+      handle: "Reposition crop",
+      dx: 0,
+      dy: 10,
+    },
+  ])("commits nothing when $name is dragged back to where it started", (c) => {
+    const onStyleCommit = vi.fn();
+    render(makeEl("a", c.clip), onStyleCommit);
+    const handle = document.querySelector<HTMLButtonElement>(`[aria-label="${c.handle}"]`)!;
+    for (const [type, d] of [
+      ["pointerdown", 0],
+      ["pointermove", 1],
+      ["pointermove", 0],
+      ["pointerup", 0],
+    ] as const) {
+      const at = { clientX: 100 + d * c.dx, clientY: 50 + d * c.dy };
+      act(() =>
+        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 3, ...at })),
+      );
+    }
+    expect(onStyleCommit).not.toHaveBeenCalled();
+  });
+
+  it("commits where the pointer was released, even before its last move renders", () => {
+    const onStyleCommit = vi.fn();
+    render(makeEl("a", "inset(10px)"), onStyleCommit);
+    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
+    act(() => {
+      for (const [type, clientX] of [
+        ["pointerdown", 100],
+        ["pointermove", 90],
+        ["pointermove", 80],
+        ["pointerup", 80],
+      ] as const) {
+        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 4, clientX }));
+      }
+    });
+    expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
+  });
+
+  it("keeps a first crop on deselect when the release beats the last render", async () => {
+    const a = makeEl("a", "");
+    const { root } = render(a, (property, value) => void a.style.setProperty(property, value));
+    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
+    act(() => {
+      for (const [type, clientX] of [
+        ["pointerdown", 100],
+        ["pointermove", 90],
+        ["pointermove", 80],
+        ["pointerup", 80],
+      ] as const) {
+        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 5, clientX }));
+      }
+    });
+    await act(async () => undefined);
+    act(() => root.unmount());
+    expect(a.style.getPropertyValue("clip-path")).toBe("inset(0px 20px 0px 0px)");
+  });
+
   it("re-lifts when the crop commit rejects", async () => {
     const a = makeEl("a", "inset(10px)");
     const onStyleCommit = vi.fn((property: string, value: string) => {

package/src/components/editor/DomEditCropHandles.tsx

@@ -18,7 +18,7 @@ interface CropGestureState {
   startX: number;
   startY: number;
   startInsets: ClipPathInsetSides;
-  didMove: boolean;
+  insets: ClipPathInsetSides;
   /** Element frame captured at gesture start: pointer deltas rotate into it. */
   angleDeg: number;
   scaleX: number;
@@ -186,7 +186,7 @@ export function DomEditCropHandles({
       startX: event.clientX,
       startY: event.clientY,
       startInsets: state.insets,
-      didMove: false,
+      insets: state.insets,
       angleDeg: frame.angleDeg,
       scaleX: frame.scaleX,
       scaleY: frame.scaleY,
@@ -217,7 +217,7 @@ export function DomEditCropHandles({
       gesture.edge === "move"
         ? resolveCropInsetFromMoveDrag(drag)
         : resolveCropInsetFromEdgeDrag({ ...drag, edge: gesture.edge, width, height });
-    gesture.didMove = true;
+    gesture.insets = nextInsets;
     setState((prev) => ({ ...prev, insets: nextInsets }));
   };
 
@@ -234,7 +234,6 @@ export function DomEditCropHandles({
   const finishCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = endCropGesture(event);
     if (!gesture) return;
-    if (!gesture.didMove) return;
     // Commit to the file. The commit path re-applies the value to the live
     // element synchronously, so re-lift in the same turn to keep showing the full
     // content + dim while selected. Re-lift again on rejection so a failed commit
@@ -243,12 +242,10 @@ export function DomEditCropHandles({
     const reLift = () => {
       if (liftedRef.current) el.style.setProperty("clip-path", "none");
     };
-    const committedValue = buildInsetClipPathSides(state.insets, state.radius);
-    const cropped =
-      state.insets.top > 0 ||
-      state.insets.right > 0 ||
-      state.insets.bottom > 0 ||
-      state.insets.left > 0;
+    const { insets } = gesture;
+    const committedValue = buildInsetClipPathSides(insets, state.radius);
+    if (committedValue === buildInsetClipPathSides(gesture.startInsets, state.radius)) return;
+    const cropped = insets.top > 0 || insets.right > 0 || insets.bottom > 0 || insets.left > 0;
     const commit = onStyleCommit?.("clip-path", committedValue);
     // handleDomStyleCommit applies the persisted value to the live element
     // synchronously before its first await. Restore the crop-mode lift in this

package/src/components/editor/DomEditSelectionChrome.tsx

@@ -105,7 +105,7 @@ export function DomEditGroupChrome({
           cursor: !allowBodyDrag ? undefined : canManipulate && groupCanMove ? "move" : "default",
         }}
         onPointerDown={(e) => {
-          if (!canManipulate || e.shiftKey || !allowBodyDrag) return;
+          if (!canManipulate || !allowBodyDrag || (e.shiftKey && !groupCanMove)) return;
           gestures.startGroupDrag(e);
         }}
         onMouseDown={onBoxMouseDown}
@@ -218,12 +218,12 @@ export function DomEditSelectionChrome({
               e.stopPropagation();
               return;
             }
-            if (!allowBodyDrag || !canManipulate || e.shiftKey) return;
+            if (!allowBodyDrag || !canManipulate) return;
             if (selection.capabilities.canApplyManualOffset) {
               gestures.startGesture("drag", e);
               return;
             }
-            gestures.startBlockedMove(e, selection);
+            if (!e.shiftKey) gestures.startBlockedMove(e, selection);
           }}
           onMouseDown={onBoxMouseDown}
           onClick={onBoxClick}

package/src/components/editor/domEditOverlayGestures.ts

@@ -18,6 +18,20 @@ export type GestureKind = "drag" | "resize" | "rotate";
 export type ResizeHandle = "nw" | "ne" | "sw" | "se";
 
 export const BLOCKED_MOVE_THRESHOLD_PX = 4;
+
+export interface AxisLockedDelta {
+  dx: number;
+  dy: number;
+  lockedAxis?: "x" | "y";
+}
+
+export function lockDragToDominantAxis(dx: number, dy: number, shiftKey: boolean): AxisLockedDelta {
+  if (!shiftKey) return { dx, dy };
+  return Math.abs(dx) >= Math.abs(dy)
+    ? { dx, dy: 0, lockedAxis: "y" }
+    : { dx: 0, dy, lockedAxis: "x" };
+}
+
 const ROTATION_COMMIT_EPSILON_DEGREES = 0.05;
 const ROTATION_SNAP_DEGREES = 15;
 /**
@@ -73,6 +87,7 @@ export interface GestureState {
   snapContext?: SnapContext;
   lastSnappedDx?: number;
   lastSnappedDy?: number;
+  travelled?: boolean;
   /** Corner the resize gesture grabbed (resize gestures only). */
   resizeHandle?: ResizeHandle;
   /** Last anchoring translation applied during a corner resize (overlay px). */
@@ -96,6 +111,7 @@ export interface GroupGestureState {
   snapContext?: SnapContext;
   lastSnappedDx?: number;
   lastSnappedDy?: number;
+  travelled?: boolean;
 }
 
 export interface BlockedMoveState {

package/src/components/editor/groupDragMove.ts

@@ -6,7 +6,12 @@ import {
   SNAP_THRESHOLD_PX,
 } from "./snapEngine";
 import { applyManualOffsetDragDraft } from "./manualOffsetDrag";
-import type { GroupGestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+import {
+  lockDragToDominantAxis,
+  type AxisLockedDelta,
+  type GroupGestureState,
+  type UseDomEditOverlayGesturesOptions,
+} from "./domEditOverlayGestures";
 import type { GroupOverlayItem } from "./domEditOverlayGeometry";
 import {
   findNonRigidMembers,
@@ -33,7 +38,7 @@ export function createGroupDragMover(
   const snapGroupDelta = (
     groupG: GroupGestureState,
     e: React.PointerEvent<HTMLDivElement>,
-    proposed: { dx: number; dy: number },
+    proposed: AxisLockedDelta,
   ) => {
     const sc = groupG.snapContext;
     if (!sc?.snapEnabled || sc.targets.length === 0) return proposed;
@@ -52,6 +57,7 @@ export function createGroupDragMover(
       gridEdges: sc.gridEdges ?? undefined,
       threshold: SNAP_THRESHOLD_PX,
       disabled: e.altKey,
+      lockedAxis: proposed.lockedAxis,
     });
     const movingRect = {
       ...groupBounds,
@@ -75,10 +81,11 @@ export function createGroupDragMover(
       lastGesture = groupG;
       lastGroupPositions = {};
     }
-    const { dx, dy } = snapGroupDelta(groupG, e, {
-      dx: e.clientX - groupG.startX,
-      dy: e.clientY - groupG.startY,
-    });
+    const { dx, dy } = snapGroupDelta(
+      groupG,
+      e,
+      lockDragToDominantAxis(e.clientX - groupG.startX, e.clientY - groupG.startY, e.shiftKey),
+    );
     groupG.lastSnappedDx = dx;
     groupG.lastSnappedDy = dy;
 

package/src/components/editor/manualEditsSeekReapply.ts

@@ -67,7 +67,11 @@ function reapplyRotations(doc: Document): void {
 }
 
 // Every mark a reapply below acts on, the legacy double-prefixed ones included.
-const STUDIO_EDIT_ATTRS = [STUDIO_PATH_OFFSET_ATTR, STUDIO_BOX_SIZE_ATTR, STUDIO_ROTATION_ATTR]
+export const STUDIO_EDIT_ATTRS = [
+  STUDIO_PATH_OFFSET_ATTR,
+  STUDIO_BOX_SIZE_ATTR,
+  STUDIO_ROTATION_ATTR,
+]
   .flatMap((attr) => [attr, `data-${attr}`])
   .concat(STUDIO_MOTION_ATTR);
 // One selector each: Chrome answers a lone attribute selector without walking the DOM, a comma list it walks.

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

@@ -449,6 +449,62 @@ describe("GSAP-element drag — dot-a flies regressions", () => {
   });
 });
 
+describe("a stylesheet translate after a committed GSAP drag", () => {
+  function draggedTitle(css: string, oldOffsetChannel = false, withGsap = true) {
+    const window = new Window();
+    const style = window.document.createElement("style");
+    style.textContent = css;
+    window.document.head.append(style);
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    if (oldOffsetChannel) {
+      element.setAttribute("data-hf-studio-path-offset", "true");
+      element.style.setProperty(STUDIO_OFFSET_X_PROP, "30px");
+      element.style.setProperty(STUDIO_OFFSET_Y_PROP, "0px");
+      element.style.translate = `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`;
+    }
+    window.document.body.append(element);
+    element.getBoundingClientRect = () => new window.DOMRect(10, 20, 100, 50);
+    (window as unknown as { gsap: unknown }).gsap = withGsap && {
+      set: (el: HTMLElement, vars: { x?: number; y?: number }) =>
+        el.style.setProperty("transform", `translate(${vars.x ?? 0}px, ${vars.y ?? 0}px)`),
+      getProperty: () => 0,
+    };
+    const result = createManualOffsetDragMember({
+      key: "title",
+      selection: { element } as never,
+      element,
+      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+    });
+    if (!result.ok) throw new Error("member not created");
+    applyManualOffsetDragCommit(result.member, 40, 30);
+    if (withGsap) expect(element.style.getPropertyValue("translate")).toBe("none");
+    endManualOffsetDragMembers([result.member]);
+    return element;
+  }
+
+  it("stays masked, so it is not applied on top of the committed transform", () => {
+    expect(
+      draggedTitle("#title { translate: 0 -200px; }").style.getPropertyValue("translate"),
+    ).toBe("none");
+  });
+
+  it("stays masked for an element still on the old offset channel", () => {
+    const element = draggedTitle("#title { translate: 0 -200px; }", true);
+    expect(element.hasAttribute("data-hf-studio-path-offset")).toBe(false);
+    expect(element.style.getPropertyValue("translate")).toBe("none");
+  });
+
+  it("is not masked when GSAP does not own the position", () => {
+    const element = draggedTitle("#title { translate: 0 -200px; }", true, false);
+    expect(element.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+
+  it("is not left behind when nothing sits under the draft's mask", () => {
+    expect(draggedTitle("").style.getPropertyValue("translate")).toBe("");
+  });
+});
+
 describe("resumeGsapTimelines", () => {
   it("unpauses exactly the timelines the drag start paused, then re-seeks the player", () => {
     const window = new Window();

package/src/components/editor/manualOffsetDrag.ts

@@ -514,6 +514,7 @@ export function applyManualOffsetNudgeCommit(
 
 function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
   restoreStudioPathOffset(member.element, member.initialPathOffset);
+  getOffsetDragGsap(member.element)?.set(member.element, { ...member.baseGsap });
   endStudioManualEditGesture(member.element, member.gestureToken);
 }
 
@@ -525,6 +526,18 @@ export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]
   }
 }
 
+// Drop the draft's `translate: none` so the soft reload starts clean (#1673). When GSAP owns
+// the position it folded any translate into its transform, so one still showing applies twice.
+function settleDraftTranslate(element: HTMLElement, gsapOwnsPosition: boolean): void {
+  if (element.style.getPropertyValue("translate") === "none") {
+    element.style.removeProperty("translate");
+  }
+  if (!gsapOwnsPosition) return;
+  const view = element.ownerDocument.defaultView;
+  const underneath = view?.getComputedStyle(element).getPropertyValue("translate");
+  if (underneath && underneath !== "none") element.style.setProperty("translate", "none");
+}
+
 /** Teardown after a COMMITTED drag. */
 export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
@@ -533,23 +546,17 @@ export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): v
     member.element.removeAttribute("data-hf-drag-initial-offset-y");
     member.element.removeAttribute("data-hf-drag-gsap-base-x");
     member.element.removeAttribute("data-hf-drag-gsap-base-y");
-    // Clear the draft's `translate: none` so the soft reload starts clean —
-    // otherwise button-less pointermoves after the reload compute deltas
-    // from a stale base and fling the element off-screen (#1673).
     // Do NOT clearProps:"transform" — that nukes the committed GSAP position
     // and causes a visual snap-back before the soft reload re-applies it.
-    if (member.element.style.getPropertyValue("translate") === "none") {
-      member.element.style.removeProperty("translate");
-    }
+    const gsapOwnsPosition = Boolean(getOffsetDragGsap(member.element));
     // Migration: when GSAP owns the position (the committed value lives in the
     // GSAP transform), the legacy `--hf-studio-offset` CSS channel is obsolete.
     // Clear it on the LIVE element — otherwise the leftover `translate:
     // var(--hf-studio-offset)` composes with the GSAP transform and the element
     // renders offset by the stale value until a full page reload (the source is
     // already stripped). clearStudioPathOffset leaves `transform` untouched.
-    if (getOffsetDragGsap(member.element)) {
-      clearStudioPathOffset(member.element);
-    }
+    if (gsapOwnsPosition) clearStudioPathOffset(member.element);
+    settleDraftTranslate(member.element, gsapOwnsPosition);
     resumeGsapTimelines(member.element);
   }
 }