@hyperframes/studio 0.8.109 → 0.8.111

package/package.json

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

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

@@ -35,6 +35,19 @@ function makeEl(id: string, clip: string): HTMLElement {
   return el;
 }
 
+/** Presses at the first x, moves through the rest with their buttons, and lets go where the last held move was. */
+function dragCropRight(handle: HTMLElement, pointerId: number, points: [number, number][]) {
+  const [[start], ...moves] = points;
+  const release = moves.filter(([, buttons]) => buttons & 1).at(-1)?.[0] ?? start;
+  const send = (type: string, clientX: number, buttons: number) =>
+    handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId, buttons, clientX }));
+  act(() => {
+    send("pointerdown", start, 1);
+    for (const [x, buttons] of moves) send("pointermove", x, buttons);
+    send("pointerup", release, 0);
+  });
+}
+
 function render(
   el: HTMLElement,
   onStyleCommit: (property: string, value: string) => Promise<unknown> | void = () => undefined,
@@ -111,7 +124,14 @@ describe("DomEditCropHandles clip lift", () => {
     ] 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 })),
+        handle.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            buttons: type === "pointerup" ? 0 : 1,
+            pointerId: 3,
+            ...at,
+          }),
+        ),
       );
     }
     expect(onStyleCommit).not.toHaveBeenCalled();
@@ -121,16 +141,23 @@ describe("DomEditCropHandles clip lift", () => {
     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 }));
-      }
-    });
+    dragCropRight(handle, 4, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
+    expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
+  });
+
+  it("commits where the pointer let go, not at a buttonless move back at the press point", () => {
+    const onStyleCommit = vi.fn();
+    render(makeEl("a", "inset(10px)"), onStyleCommit);
+    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
+    dragCropRight(handle, 6, [
+      [100, 1],
+      [80, 1],
+      [100, 0],
+    ]);
     expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
   });
 
@@ -138,16 +165,11 @@ describe("DomEditCropHandles clip lift", () => {
     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 }));
-      }
-    });
+    dragCropRight(handle, 5, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
     await act(async () => undefined);
     act(() => root.unmount());
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(0px 20px 0px 0px)");
@@ -163,7 +185,14 @@ describe("DomEditCropHandles clip lift", () => {
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
     const press = (type: string, clientX: number) =>
       act(() =>
-        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, clientX })),
+        handle.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            buttons: type === "pointerup" ? 0 : 1,
+            pointerId: 1,
+            clientX,
+          }),
+        ),
       );
     press("pointerdown", 100);
     press("pointermove", 80);

package/src/components/editor/DomEditCropHandles.tsx

@@ -17,6 +17,7 @@ import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelp
 import { readCropFollowingResize } from "./cropResize";
 import { isCropBarTarget, useCropPresetBarStore } from "./cropPresetStore";
 import { CropPresetBar } from "./CropPresetBar";
+import { movesGesture } from "./domEditOverlayGestures";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -188,7 +189,7 @@ export function DomEditCropHandles({
 
   const updateCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!gesture || !movesGesture(gesture, event)) return;
     event.preventDefault();
     event.stopPropagation();
     const local = rotateDeltaIntoFrame(

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

@@ -196,6 +196,7 @@ function evt(clientX: number, clientY: number) {
     clientY,
     pointerId: 1,
     button: 0,
+    buttons: 1,
     altKey: false,
     shiftKey: false,
     preventDefault() {},

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

@@ -182,7 +182,10 @@ async function settle() {
 
 const fire = (target: Element, type: string, init: MouseEventInit = {}) => {
   act(() => {
-    target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, ...init }));
+    const buttons = type === "pointerdown" || type === "pointermove" ? 1 : 0;
+    target.dispatchEvent(
+      new MouseEvent(type, { bubbles: true, cancelable: true, buttons, ...init }),
+    );
   });
 };
 

package/src/components/editor/domEditOverlayGestures.ts

@@ -49,6 +49,7 @@ export interface GestureState {
   kind: GestureKind;
   mode: "path-offset" | "box-size" | "rotation";
   selection: DomEditSelection;
+  pointerId: number;
   startX: number;
   startY: number;
   centerX: number;
@@ -93,6 +94,7 @@ export interface GestureState {
 }
 
 export interface GroupGestureState {
+  pointerId: number;
   startX: number;
   startY: number;
   originItems: GroupOverlayItem[];
@@ -103,6 +105,14 @@ export interface GroupGestureState {
   travelled?: boolean;
 }
 
+/** Only the pressing pointer's moves with its button held drive a gesture, not Chromium's buttonless resends. */
+export function movesGesture(
+  gesture: { pointerId: number },
+  e: { pointerId: number; buttons: number },
+): boolean {
+  return e.pointerId === gesture.pointerId && (e.buttons & 1) === 1;
+}
+
 export interface BlockedMoveState {
   pointerId: number;
   startX: number;

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

@@ -177,6 +177,7 @@ describe("a rotate on a page that loads GSAP", () => {
       clientY,
       pointerId: 1,
       button: 0,
+      buttons: 1,
       shiftKey: false,
       preventDefault() {},
       stopPropagation() {},

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -119,6 +119,7 @@ export function startGroupDrag(
     e.currentTarget.setPointerCapture(e.pointerId);
     opts.rafPausedRef.current = true;
     opts.groupGestureRef.current = {
+      pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
       originItems: items,
@@ -265,6 +266,7 @@ export function startGesture(
       kind,
       mode,
       selection: sel,
+      pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
       centerX,

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

@@ -66,8 +66,24 @@ const byId = (iframe: HTMLIFrameElement | null, id: string) =>
   iframe!.contentDocument!.getElementById(id) as HTMLElement;
 const api = (): TimelinePlayerApi => player.getApi();
 
-function pointer(target: Element, type: string, x: number, y: number) {
-  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, clientX: x, clientY: y };
+function pointer(
+  target: Element,
+  type: string,
+  x: number,
+  y: number,
+  extra: PointerEventInit = {},
+) {
+  const buttons = type === "pointerdown" || type === "pointermove" ? 1 : 0;
+  const init = {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    buttons,
+    pointerId: 1,
+    clientX: x,
+    clientY: y,
+    ...extra,
+  };
   act(() => void target.dispatchEvent(new PointerEvent(type, init)));
 }
 
@@ -252,6 +268,27 @@ describe("a reload during a drag", () => {
   });
 });
 
+describe("a drag moves only with its own pointer pressed", () => {
+  it.each([
+    ["no button held, as Chromium sends after a layout change", { buttons: 0 }],
+    ["another pointer", { pointerId: 2 }],
+  ])(
+    "a move with %s at a fixed point leaves the drop where the pointer let go",
+    async (_, stray) => {
+      const { live, overlay, box } = mountEditor(false);
+      pointer(box, "pointerdown", 150, 150);
+      pointer(overlay, "pointermove", 170, 160);
+      pointer(overlay, "pointermove", 20, 20, stray);
+      pointer(overlay, "pointermove", 190, 170);
+      pointer(overlay, "pointermove", 20, 20, stray);
+      expect(byId(live, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      pointer(overlay, "pointerup", 190, 170);
+      await settle();
+      expect(file.title).toBe("translate: 40px 20px");
+    },
+  );
+});
+
 type Editor = ReturnType<typeof mountEditor>;
 
 describe("every way a drag ends without a drop clears its mark and promotes the held reload", () => {

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

@@ -35,18 +35,23 @@ function Overlay() {
       onPointerMove={marquee.onPointerMove}
       onPointerUp={marquee.onPointerUp}
     >
-      {marquee.marqueeRect && <div data-band />}
+      {marquee.marqueeRect && <div data-band data-width={marquee.marqueeRect.width} />}
     </div>
   );
 }
 
 const pointer = (type: string, clientX: number, clientY: number) =>
   act(() => {
-    document
-      .querySelector("[data-overlay]")!
-      .dispatchEvent(
-        new PointerEvent(type, { bubbles: true, button: 0, pointerId: 1, clientX, clientY }),
-      );
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent(type, {
+        bubbles: true,
+        buttons: type === "pointerup" ? 0 : 1,
+        button: 0,
+        pointerId: 1,
+        clientX,
+        clientY,
+      }),
+    );
   });
 const escape = () => {
   const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
@@ -86,6 +91,25 @@ it("an escape cancels a preview band while the pointer is still down, and stops
   expect(hostEscapes).toHaveLength(0);
 });
 
+it("a buttonless move back at the start does not shrink the band", () => {
+  pointer("pointerdown", 10, 10);
+  pointer("pointermove", 120, 90);
+  const band = () => document.querySelector<HTMLElement>("[data-band]")?.dataset.width;
+  expect(band()).toBe("110");
+  act(() => {
+    document.querySelector("[data-overlay]")!.dispatchEvent(
+      new PointerEvent("pointermove", {
+        bubbles: true,
+        pointerId: 1,
+        buttons: 0,
+        clientX: 10,
+        clientY: 10,
+      }),
+    );
+  });
+  expect(band()).toBe("110");
+});
+
 it("an escape with no band in flight still reaches the host", () => {
   const event = escape();
 
@@ -133,6 +157,7 @@ it("a reload promoted mid-band selects from the preview on screen, not the retir
         new PointerEvent(type, {
           bubbles: true,
           button: 0,
+          buttons: type === "pointerup" ? 0 : 1,
           pointerId: 1,
           clientX: x,
           clientY: y,

package/src/components/editor/marqueeCommit.ts

@@ -6,6 +6,7 @@ import { isElementComputedVisible } from "./domEditingElement";
 import { coversComposition } from "../../utils/studioPreviewHelpers";
 import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
 import { toVisibleOverlayRect } from "./domEditOverlayGeometry";
+import { movesGesture } from "./domEditOverlayGestures";
 
 interface MarqueeState {
   startX: number;
@@ -226,10 +227,23 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       window.removeEventListener("keydown", cancelBandBeforeHostEscape, { capture: true });
   }, [cancel]);
 
+  const showCandidates = useCallback(
+    (rect: Rect) => {
+      const iframe = deps.iframeRef.current;
+      const overlay = deps.overlayRef.current;
+      if (!iframe || !overlay) return;
+      const acp = deps.activeCompositionPathRef.current ?? "index.html";
+      candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
+      setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
+    },
+    [deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+  );
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;
       if (m) {
+        if (!movesGesture(m, event)) return;
         const oRect = deps.overlayRef.current?.getBoundingClientRect();
         if (!oRect) return;
         m.currentX = event.clientX - oRect.left;
@@ -248,18 +262,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
           height: Math.abs(m.currentY - m.startY),
         };
         setMarqueeRect(rect);
-        const iframe = deps.iframeRef.current;
-        const overlay = deps.overlayRef.current;
-        if (iframe && overlay) {
-          const acp = deps.activeCompositionPathRef.current ?? "index.html";
-          candidatesRef.current ??= collectMarqueeCandidates(iframe, overlay, acp);
-          setCandidateRects(hitsWithin(rect, candidatesRef.current).map((h) => h.rect));
-        }
+        showCandidates(rect);
         return;
       }
       deps.gestures?.onPointerMove(event);
     },
-    [deps.gestures, deps.overlayRef, deps.iframeRef, deps.activeCompositionPathRef],
+    [deps.gestures, deps.overlayRef, showCandidates],
   );
 
   const onPointerUp = useCallback(

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

@@ -10,6 +10,7 @@ import {
   pickDetachedAudioTrack,
   removeElementInSource,
   setLinkInSource,
+  sharesSourceFile,
 } from "./mediaLinkEdits";
 
 const automation = JSON.stringify({
@@ -192,6 +193,15 @@ describe("linkInSource", () => {
   });
 });
 
+describe("linkInSource without a sync origin", () => {
+  it("writes only data-link", () => {
+    const src = '<video id="v"></video><audio id="a"></audio>';
+    expect(linkInSource(src, [{ id: "v" }, { id: "a" }], { syncOrigin: false })).toBe(
+      '<video id="v" data-link="lk-1"></video><audio id="a" data-link="lk-1"></audio>',
+    );
+  });
+});
+
 describe("setLinkInSource", () => {
   it("writes and removes data-link on every target", () => {
     const src = '<video id="v"></video><audio id="a"></audio>';
@@ -248,9 +258,12 @@ describe("predicates", () => {
     expect(findMergePair(v, [v, el("a", "audio", { src: "other.mp4" })])).toBeNull();
   });
 
-  it("links exactly one video and one audio of the same file and timing", () => {
+  it("links exactly one unlinked video and one audio, whatever their timing or file", () => {
     expect(canLinkPair([el("v", "video"), el("a", "audio")])).toBe(true);
-    expect(canLinkPair([el("v", "video"), el("a", "audio", { start: 3 })])).toBe(false);
+    expect(canLinkPair([el("v", "video"), el("a", "audio", { start: 3, duration: 2 })])).toBe(true);
+    expect(canLinkPair([el("v", "video"), el("a", "audio", { src: "other.mp3" })])).toBe(true);
+    expect(canLinkPair([el("v", "video", { link: "x" }), el("a", "audio")])).toBe(false);
+    expect(canLinkPair([el("v", "video"), el("a", "audio", { link: "y" })])).toBe(false);
     expect(canLinkPair([el("v", "video"), el("w", "video")])).toBe(false);
     expect(canLinkPair([el("v", "video", { link: "x" }), el("a", "audio", { link: "x" })])).toBe(
       false,
@@ -266,16 +279,16 @@ describe("predicates compare the whole asset path", () => {
     const v = el("v", "video", { muted: true, ...one });
     const a = el("a", "audio", two);
     expect(findMergePair(v, [v, a])).toBeNull();
-    expect(canLinkPair([el("v", "video", one), el("a", "audio", two)])).toBe(false);
+    expect(sharesSourceFile([el("v", "video", one), el("a", "audio", two)])).toBe(false);
   });
 
   it("resolves each src against its own source file, and links only inside one", () => {
     const v = el("v", "video", { src: "../assets/talk.mp4", sourceFile: "scenes/a.html" });
     const a = el("a", "audio", { src: "./assets/talk.mp4", sourceFile: "index.html" });
     expect(canLinkPair([v, a])).toBe(false);
-    expect(
-      canLinkPair([v, { ...a, src: "../assets/./talk.mp4", sourceFile: "scenes/a.html" }]),
-    ).toBe(true);
+    expect(sharesSourceFile([v, a])).toBe(false);
+    const sameFileAudio = { ...a, src: "../assets/./talk.mp4", sourceFile: "scenes/a.html" };
+    expect(sharesSourceFile([v, sameFileAudio])).toBe(true);
   });
 
   it("does not take a same-id link from another source file as the merge partner", () => {

package/src/components/editor/mediaLinkEdits.ts

@@ -1,5 +1,10 @@
 import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
-import { MEDIA_LINK_ATTR, SYNC_ORIGIN_ATTR, mintLinkId } from "@hyperframes/core/media-link";
+import {
+  MEDIA_LINK_ATTR,
+  SYNC_ORIGIN_ATTR,
+  mintLinkId,
+  sourceZeroTime,
+} from "@hyperframes/core/media-link";
 import { sameCompositionScope, type TimelineElement } from "../../player/store/timelineElement";
 import { mediaAssetIdentity, sharesLinkGroup } from "../../player/components/audioClipLink";
 import {
@@ -62,14 +67,17 @@ export function setLinkInSource(
   );
 }
 
-/** Link the targets under one freshly minted id, which is also their sync origin. */
-export function linkInSource(source: string, targets: readonly PatchTarget[]): string {
+/** Link the targets under one fresh id, also their sync origin when they share a source file. */
+export function linkInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  options: { syncOrigin: boolean } = { syncOrigin: true },
+): string {
   const linkId = mintLinkIdForSource(source);
-  return targets.reduce(
-    (html, target) =>
-      applyOps(html, target, [dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId)]),
-    source,
-  );
+  const ops = options.syncOrigin
+    ? [dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId)]
+    : [dataOp(LINK_PROPERTY, linkId)];
+  return targets.reduce((html, target) => applyOps(html, target, ops), source);
 }
 
 /** Remove one element (open tag through its matching close tag) and its line's indentation. */
@@ -242,15 +250,28 @@ export function findMergePair<T extends TimedElement>(
   return video.muted === true ? { video, audio } : null;
 }
 
-/** Exactly one video and one audio, same file, identical timing, not already linked together. */
+/** One video and one audio in one composition, neither linked: timing and file don't matter. */
 export function canLinkPair(selected: readonly TimedElement[]): boolean {
   if (selected.length !== 2) return false;
   const [a, b] = selected;
-  if (!a || !b) return false;
+  if (!a || !b || a.link || b.link) return false;
   const tags = new Set([tagOf(a), tagOf(b)]);
-  if (!tags.has("video") || !tags.has("audio")) return false;
-  if (sharesLinkGroup(a, b)) return false;
-  return sameAssetInScope(a, b) && hasIdenticalTiming(a, b);
+  return tags.has("video") && tags.has("audio") && sameCompositionScope(a, b);
+}
+
+export function sharesSourceFile(selected: readonly TimedElement[]): boolean {
+  const [a, b] = selected;
+  return selected.length === 2 && !!a && !!b && sameAssetInScope(a, b);
+}
+
+export function isPairInSync(a: TimedElement, b: TimedElement): boolean {
+  const timing = (el: TimedElement) => ({
+    start: el.start,
+    mediaStart: el.playbackStart ?? 0,
+    playbackRate: el.playbackRate ?? 1,
+  });
+  const [x, y] = [timing(a), timing(b)];
+  return near(x.playbackRate, y.playbackRate) && near(sourceZeroTime(x), sourceZeroTime(y));
 }
 
 type TrackedElement = Pick<TimelineElement, "tag" | "track" | "start" | "duration"> & {

package/src/components/editor/previewReadOnly.overlay.test.tsx

@@ -105,7 +105,14 @@ function fixture(
 }
 
 const fire = (target: Element, type: string, init: MouseEventInit = {}) => {
-  const event = new MouseEvent(type, { bubbles: true, cancelable: true, button: 0, ...init });
+  const buttons = type === "pointerdown" || type === "pointermove" ? 1 : 0;
+  const event = new MouseEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    buttons,
+    ...init,
+  });
   act(() => {
     target.dispatchEvent(event);
   });

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

@@ -31,7 +31,7 @@ function gestureHarness(gesture: Partial<GestureState> | null, group: GroupGestu
   };
   const handlers = createDomEditOverlayGestureHandlers(opts as never);
   const pointer = (clientX: number, clientY: number, shiftKey: boolean) =>
-    ({ clientX, clientY, shiftKey, altKey: false }) as never;
+    ({ clientX, clientY, shiftKey, altKey: false, pointerId: 1, buttons: 1 }) as never;
   return { opts, handlers, pointer };
 }
 
@@ -41,6 +41,7 @@ function singleDrag() {
     {
       kind: "drag",
       mode: "path-offset",
+      pointerId: 1,
       selection: { element } as unknown as DomEditSelection,
       startX: 100,
       startY: 100,
@@ -57,7 +58,13 @@ function singleDrag() {
 }
 
 const groupGesture = () =>
-  ({ startX: 100, startY: 100, originItems: [], members: [] }) as unknown as GroupGestureState;
+  ({
+    pointerId: 1,
+    startX: 100,
+    startY: 100,
+    originItems: [],
+    members: [],
+  }) as unknown as GroupGestureState;
 
 describe("shift+drag locks a move to the axis the pointer travels further on", () => {
   it("keeps a mostly horizontal single drag on its row", () => {
@@ -278,6 +285,7 @@ function singleMemberDrag() {
     {
       kind: "drag",
       mode: "path-offset",
+      pointerId: 1,
       selection,
       startX: 100,
       startY: 100,
@@ -300,7 +308,13 @@ function singleMemberDrag() {
 function groupMemberDrag() {
   const a = draggableMember("a");
   const b = draggableMember("b");
-  const group = { startX: 100, startY: 100, originItems: [], members: [a.member, b.member] };
+  const group = {
+    pointerId: 1,
+    startX: 100,
+    startY: 100,
+    originItems: [],
+    members: [a.member, b.member],
+  };
   const harness = gestureHarness(null, group as unknown as GroupGestureState);
   return { ...harness, at: () => [a.at(), b.at()] };
 }

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -38,6 +38,7 @@ import {
   ROTATED_SNAP_BYPASS_DEGREES,
   hasDomEditRotationChanged,
   lockDragToDominantAxis,
+  movesGesture,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
 import { resolveCenterResizeSize } from "./domEditResizeLocal";
@@ -131,6 +132,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (!blockedMove && !g && !groupG) {
       opts.onCanvasPointerMoveRef.current(e, { preferClipAncestor: false });
     }
+    const held = g ?? groupG;
+    if (held && !movesGesture(held, e)) return;
 
     if (blockedMove) {
       const dx = e.clientX - blockedMove.startX;

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -72,6 +72,7 @@ export interface TimelineEditCallbackDeps {
       value: string | null,
       label: string,
     ) => Promise<TimelineEditOutcome | void>;
+    setMany?: TimelineEditCallbacks["onSetElementsAttributeQuiet"];
   };
 }
 
@@ -228,6 +229,7 @@ export function useTimelineEditCallbacks({
       onGroupClips: handleGroupClips,
       onSetElementAttributeLive: setElementFxAttribute?.setLive,
       onSetElementAttributeQuiet: setElementFxAttribute?.setQuiet,
+      onSetElementsAttributeQuiet: setElementFxAttribute?.setMany,
       onRevertElementAttributeLive: setElementFxAttribute?.revertLive,
       onBlockedEditAttempt: handleBlockedTimelineEdit,
       onSplitElement: handleTimelineElementSplit,

package/src/contexts/TimelineEditContext.tsx

@@ -37,6 +37,7 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onGroupClips: true,
   onSetElementAttributeLive: true,
   onSetElementAttributeQuiet: true,
+  onSetElementsAttributeQuiet: true,
   onRevertElementAttributeLive: true,
   onBlockedEditAttempt: true,
   onLinkEdit: true,