@hyperframes/studio 0.8.95 → 0.8.97

package/dist/ui.d.ts

@@ -181,6 +181,8 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Ro
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
     sideOffset?: number;
+    /** Points the popup at its trigger. Off by default; the default gap from the trigger grows by the arrow's height. */
+    arrow?: boolean;
     /** Portal target. Pass the shadow root when the trigger lives in one. */
     container?: PortalContainer;
     /** Names the popup for assistive tech. */
@@ -193,7 +195,7 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof Popover$1.Ro
     className?: string;
     "data-preview-state"?: PopupPreviewState;
 }
-declare function Popover({ trigger, children, side, align, sideOffset, container, className, initialFocus, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: PopoverProps): react_jsx_runtime.JSX.Element;
+declare function Popover({ trigger, children, side, align, arrow, sideOffset, container, className, initialFocus, "aria-label": ariaLabel, "data-preview-state": previewState, ...root }: PopoverProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared field look (also used by NumberField and Select). Each interactive state is written

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-QZ6HNNFG.js";
+} from "./chunk-6GAO75IU.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

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

package/src/components/TimelineToolPicker.tsx

@@ -23,7 +23,7 @@ interface ToolRow {
 }
 
 /** One button for the active timeline tool; its menu switches tools or selects clips around the playhead. */
-export function TimelineToolPicker() {
+export function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const store = () => usePlayerStore.getState();
   const rows: ToolRow[] = [
@@ -41,21 +41,25 @@ export function TimelineToolPicker() {
       active: activeTool === "razor",
       run: () => store().setActiveTool("razor"),
     },
-    {
-      label: "Select leftward",
-      shortcut: "[",
-      icon: <ArrowLineLeft size={16} aria-hidden="true" />,
-      active: false,
-      run: () => store().selectLeftward(),
-    },
-    {
-      label: "Select rightward",
-      shortcut: "]",
-      icon: <ArrowLineRight size={16} aria-hidden="true" />,
-      active: false,
-      run: () => store().selectRightward(),
-    },
   ];
+  if (showSelectAroundPlayhead) {
+    rows.push(
+      {
+        label: "Select leftward",
+        shortcut: "[",
+        icon: <ArrowLineLeft size={16} aria-hidden="true" />,
+        active: false,
+        run: () => store().selectLeftward(),
+      },
+      {
+        label: "Select rightward",
+        shortcut: "]",
+        icon: <ArrowLineRight size={16} aria-hidden="true" />,
+        active: false,
+        run: () => store().selectRightward(),
+      },
+    );
+  }
   const current = rows.find((row) => row.active) ?? rows[0];
   return (
     <Menu

package/src/components/TimelineToolbar.test.tsx

@@ -8,6 +8,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
+import { dispatchPlainKey, type HotkeyCallbacks } from "../hooks/appHotkeysDispatch";
 import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
 
@@ -295,6 +296,67 @@ describe("TimelineToolbar history", () => {
   });
 });
 
+describe("TimelineToolbar tool menu", () => {
+  async function openMenuRows(props: Partial<React.ComponentProps<typeof TimelineToolbar>>) {
+    const { host, root } = renderToolbar(undefined, props);
+    const trigger = host.querySelector<HTMLButtonElement>('button[aria-label^="Timeline tool:"]')!;
+    await act(async () => {
+      trigger.click();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const rows = [...document.querySelectorAll('[role="menuitem"] > span:first-child')].map(
+      (label) => label.textContent,
+    );
+    act(() => root.unmount());
+    return rows;
+  }
+
+  it("lists Select, Split, Select leftward and Select rightward by default", async () => {
+    expect(await openMenuRows({})).toEqual([
+      "Select",
+      "Split",
+      "Select leftward",
+      "Select rightward",
+    ]);
+  });
+
+  it("lists only Select and Split when the host hides select around the playhead", async () => {
+    expect(await openMenuRows({ showSelectAroundPlayhead: false })).toEqual(["Select", "Split"]);
+  });
+
+  it.each([true, false])("[ and ] select around the playhead with the rows shown: %s", (shown) => {
+    usePlayerStore.setState({
+      currentTime: 4,
+      elements: [0, 4, 7].map((start, track) => ({
+        id: `c${start}`,
+        key: `c${start}`,
+        tag: "div",
+        start,
+        duration: 2,
+        track,
+      })),
+    });
+    const { root } = renderToolbar(undefined, { showSelectAroundPlayhead: shown });
+    const press = (key: string) =>
+      act(() =>
+        dispatchPlainKey(new KeyboardEvent("keydown", { key }), key, {} as HotkeyCallbacks),
+      );
+    try {
+      press("[");
+      expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["c0"]);
+      press("]");
+      expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual(["c4", "c7"]);
+    } finally {
+      act(() => root.unmount());
+      usePlayerStore.setState({
+        elements: [],
+        selectedElementId: null,
+        selectedElementIds: new Set(),
+      });
+    }
+  });
+});
+
 describe("TimelineToolbar add beat", () => {
   it("shows Add beat by default, as Studio does", () => {
     const { host, root } = renderToolbar();

package/src/components/TimelineToolbar.tsx

@@ -44,6 +44,7 @@ export interface TimelineToolbarProps {
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
   history?: TimelineHistoryButtonsProps;
   showHistory?: boolean;
+  showSelectAroundPlayhead?: boolean;
   showAddBeat?: boolean;
   /** Hides Add keyframe and auto-record, and turns off auto-record and the K shortcut with them. */
   showKeyframes?: boolean;
@@ -143,6 +144,7 @@ export function TimelineToolbar({
   onSplitElement,
   history,
   showHistory = true,
+  showSelectAroundPlayhead = true,
   showAddBeat = true,
   showKeyframes = true,
 }: TimelineToolbarProps) {
@@ -216,7 +218,7 @@ export function TimelineToolbar({
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
           {showHistory && <TimelineHistoryButtons {...history} />}
-          <TimelineToolPicker />
+          <TimelineToolPicker showSelectAroundPlayhead={showSelectAroundPlayhead} />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>

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/domEditing.test.ts

@@ -17,7 +17,7 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
 } from "./domEditing";
-import { normalizeTimelineCompositionSource } from "./domEditingDom";
+import { buildElementLabel, normalizeTimelineCompositionSource } from "./domEditingDom";
 
 function createDocument(markup: string): Document {
   const window = new Window();
@@ -925,6 +925,14 @@ describe("resolveDomEditSelection", () => {
     );
   });
 
+  it("names a repeated section by its authored id, not its runtime instance id", () => {
+    const document = createDocument(`
+      <div data-composition-id="benefit-fresh__hf2" data-hf-original-composition-id="benefit-fresh"></div>
+    `);
+
+    expect(buildElementLabel(document.querySelector("div") as HTMLElement)).toBe("Benefit Fresh");
+  });
+
   it("finds a composition host authored with a ./ path", () => {
     const document = createDocument(`
       <div data-composition-id="scene" data-composition-file="./compositions/scene.html"></div>

package/src/components/editor/domEditingDom.ts

@@ -312,7 +312,8 @@ function getPreferredClassSelector(el: HTMLElement): string | undefined {
 
 // fallow-ignore-next-line complexity
 export function buildElementLabel(el: HTMLElement): string {
-  const compositionId = el.getAttribute("data-composition-id");
+  const compositionId =
+    el.getAttribute("data-hf-original-composition-id") ?? el.getAttribute("data-composition-id");
   if (compositionId && compositionId !== "main") {
     return humanizeIdentifier(compositionId);
   }

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { expect, it } from "vitest";
+import { ensureImportedFontFace, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
+import { importedFontFaceCss, type ImportedFontAsset } from "./fontAssets";
+
+const face = (file: string, extra: Partial<ImportedFontAsset> = {}): ImportedFontAsset => ({
+  family: "Poppins",
+  path: `assets/fonts/Poppins/${file}`,
+  url: `/preview/assets/fonts/Poppins/${file}`,
+  ...extra,
+});
+
+it("a face with no weight or style is written as before", () => {
+  expect(importedFontFaceCss(face("Poppins-Bold.ttf"))).toBe(
+    '@font-face { font-family: "Poppins"; src: url("/preview/assets/fonts/Poppins/Poppins-Bold.ttf"); font-display: swap; }',
+  );
+});
+
+it("a face says which weight and style it draws, a variable file its weight range", () => {
+  expect(
+    importedFontFaceCss(face("Poppins-BoldItalic.ttf", { weight: "700", style: "italic" })),
+  ).toBe(
+    '@font-face { font-family: "Poppins"; src: url("/preview/assets/fonts/Poppins/Poppins-BoldItalic.ttf"); font-weight: 700; font-style: italic; font-display: swap; }',
+  );
+  expect(
+    importedFontFaceCss(face("Roboto-Variable.ttf", { weight: "100 900", style: "normal" })),
+  ).toContain("font-weight: 100 900; font-style: normal;");
+  expect(importedFontFaceCss(face("x.ttf", { weight: "700; color: red" }))).not.toContain(
+    "font-weight",
+  );
+});
+
+it("two weights of one family are both kept in the file and both drawn in the preview", () => {
+  const bold = face("Poppins-Bold.ttf", { weight: "700", style: "normal" });
+  const regular = face("Poppins-Regular.ttf", { weight: "400", style: "normal" });
+  const html = "<html><head></head><body></body></html>";
+  const saved = ensureImportedFontFace(
+    ensureImportedFontFace(html, bold, "index.html"),
+    regular,
+    "index.html",
+  );
+  expect(saved).toContain("font-weight: 700;");
+  expect(saved).toContain("font-weight: 400;");
+  expect(ensureImportedFontFace(saved, bold, "index.html")).toBe(saved);
+  injectPreviewImportedFont(document, bold);
+  injectPreviewImportedFont(document, regular);
+  injectPreviewImportedFont(document, bold);
+  expect(document.head.querySelectorAll("style")).toHaveLength(2);
+});
+
+it("a weight the browser would drop is left out, and a family cannot close the style block", () => {
+  for (const weight of ["0", "5000", "bold", "700;}"])
+    expect(importedFontFaceCss(face("x.ttf", { weight }))).not.toContain("font-weight");
+  expect(importedFontFaceCss(face("x.ttf", { weight: "1000" }))).toContain("font-weight: 1000;");
+  expect(importedFontFaceCss({ ...face("x.ttf"), family: "</style><b>x" })).not.toContain(
+    "</style>",
+  );
+});
+
+it("a file name with a replacement pattern is saved as written, not expanded into the page", () => {
+  const html = "<html><head></head><body>rest</body></html>";
+  const odd = { family: "Cash", path: "assets/Cash$'Font.ttf", url: "/Cash$'Font.ttf" };
+  const saved = ensureImportedFontFace(html, odd, "index.html");
+  expect(saved).toContain("Cash$'Font.ttf");
+  expect(saved.match(/<body>/g)).toHaveLength(1);
+  const again = ensureImportedFontFace(saved, { ...odd, path: "assets/Cash$&.ttf" }, "index.html");
+  expect(again).toContain("Cash$&.ttf");
+  expect(again.match(/<body>/g)).toHaveLength(1);
+});

package/src/components/editor/fontAssets.ts

@@ -2,6 +2,8 @@ export interface ImportedFontAsset {
   family: string;
   path: string;
   url: string;
+  weight?: string;
+  style?: "normal" | "italic";
 }
 
 const FONT_EXT_RE = /\.(eot|otf|ttc|ttf|woff2?)$/i;
@@ -9,7 +11,7 @@ const FONT_STYLE_SUFFIX_RE =
   /\s+(thin|extralight|extra light|light|regular|roman|medium|semibold|semi bold|bold|extrabold|extra bold|black|italic|oblique|variable)$/i;
 
 function cssString(value: string): string {
-  return JSON.stringify(value);
+  return JSON.stringify(value).replace(/</g, "\\3c ");
 }
 
 export function fontFamilyFromAssetPath(path: string): string {
@@ -28,5 +30,12 @@ export function fontFamilyFromAssetPath(path: string): string {
 }
 
 export function importedFontFaceCss(asset: ImportedFontAsset, url: string = asset.url): string {
-  return `@font-face { font-family: ${cssString(asset.family)}; src: url(${cssString(url)}); font-display: swap; }`;
+  const weight =
+    asset.weight && /^(?:[1-9]\d{0,2}|1000)(?: (?:[1-9]\d{0,2}|1000))?$/.test(asset.weight)
+      ? ` font-weight: ${asset.weight};`
+      : "";
+  const style = asset.style
+    ? ` font-style: ${asset.style === "italic" ? "italic" : "normal"};`
+    : "";
+  return `@font-face { font-family: ${cssString(asset.family)}; src: url(${cssString(url)});${weight}${style} font-display: swap; }`;
 }

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