@hyperframes/studio 0.8.107 → 0.8.109

package/src/components/editor/mediaLinkEdits.ts

@@ -0,0 +1,282 @@
+import { HF_AUDIO_AUTOMATION_ATTR } from "@hyperframes/core/audio-automation";
+import { MEDIA_LINK_ATTR, SYNC_ORIGIN_ATTR, mintLinkId } from "@hyperframes/core/media-link";
+import { sameCompositionScope, type TimelineElement } from "../../player/store/timelineElement";
+import { mediaAssetIdentity, sharesLinkGroup } from "../../player/components/audioClipLink";
+import {
+  applyPatchByTarget,
+  findTagByTarget,
+  readAttributeByTarget,
+  type PatchOperation,
+  type PatchTarget,
+} from "../../utils/sourcePatcher";
+import { collectHtmlIds } from "../../utils/studioHelpers";
+import { generateId } from "../../utils/generateId";
+import {
+  COPIED_TIMING_ATTRS,
+  MOVED_SOUND_ATTRS,
+  firstFreeName,
+  formatAttrs,
+  insertBeforeTarget,
+  readAuthoredSrc,
+  splitAutomation,
+} from "./mediaAudioEdits";
+
+const LINK_PROPERTY = MEDIA_LINK_ATTR.slice("data-".length);
+const HIDDEN_ATTR = "data-hidden";
+const SYNC_ORIGIN_PROPERTY = SYNC_ORIGIN_ATTR.slice("data-".length);
+const SYNC_TOLERANCE_S = 1e-3;
+
+const dataOp = (property: string, value: string | null): PatchOperation => ({
+  type: "attribute",
+  property: property.startsWith("data-") ? property.slice("data-".length) : property,
+  value,
+});
+
+const htmlOp = (property: string, value: string | null): PatchOperation => ({
+  type: "html-attribute",
+  property,
+  value,
+});
+
+function applyOps(source: string, target: PatchTarget, ops: readonly PatchOperation[]): string {
+  return ops.reduce((html, op) => applyPatchByTarget(html, target, op), source);
+}
+
+function mintLinkIdForSource(source: string): string {
+  const links = Array.from(
+    source.matchAll(/\bdata-(?:link|sync-origin)=["']([^"']+)["']/g),
+    (match) => match[1] ?? "",
+  );
+  return mintLinkId([...collectHtmlIds(source), ...links]);
+}
+
+/** Write (or with `null`, remove) `data-link` on every target. */
+export function setLinkInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  linkId: string | null,
+): string {
+  return targets.reduce(
+    (html, target) => applyPatchByTarget(html, target, dataOp(LINK_PROPERTY, linkId)),
+    source,
+  );
+}
+
+/** Link the targets under one freshly minted id, which is also their sync origin. */
+export function linkInSource(source: string, targets: readonly PatchTarget[]): string {
+  const linkId = mintLinkIdForSource(source);
+  return targets.reduce(
+    (html, target) =>
+      applyOps(html, target, [dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId)]),
+    source,
+  );
+}
+
+/** Remove one element (open tag through its matching close tag) and its line's indentation. */
+export function removeElementInSource(source: string, target: PatchTarget): string {
+  const match = findTagByTarget(source, target);
+  if (!match) return source;
+  const tagName = /^<([a-zA-Z][\w-]*)/.exec(match.tag)?.[1]?.toLowerCase() ?? "";
+  const closing = `</${tagName}>`;
+  const closeAt = match.tag.endsWith("/>")
+    ? -1
+    : source.toLowerCase().indexOf(closing, match.end + 1);
+  let end = closeAt >= 0 ? closeAt + closing.length : match.end + 1;
+  let start = match.start;
+  const lineStart = source.lastIndexOf("\n", start) + 1;
+  if (/^[ \t]*$/.test(source.slice(lineStart, start)) && source[end] === "\n") {
+    start = lineStart;
+    end += 1;
+  }
+  return source.slice(0, start) + source.slice(end);
+}
+
+function hasBooleanAttr(source: string, target: PatchTarget, name: string): boolean {
+  const tag = findTagByTarget(source, target)?.tag ?? "";
+  return new RegExp(`\\s${name}(?=[\\s=/>]|$)`, "i").test(tag);
+}
+
+export interface DetachAudioResult {
+  html: string;
+  audioId: string;
+  linkId: string;
+}
+
+/**
+ * Detach audio: insert a linked `<audio>` over the same file and window, move the
+ * sound attributes onto it, and mute the video. Renders identically.
+ */
+export function detachAudioInSource(
+  source: string,
+  input: { target: PatchTarget; videoId: string | null; track: number },
+): DetachAudioResult | null {
+  const { target } = input;
+  if (!findTagByTarget(source, target)) return null;
+  const linkId = mintLinkIdForSource(source);
+  const audioId = firstFreeName(
+    `${input.videoId || "video"}-audio`,
+    new Set(collectHtmlIds(source)),
+  );
+
+  const moved: Array<[string, string]> = [];
+  const videoOps: PatchOperation[] = [htmlOp("muted", "true"), dataOp("has-audio", null)];
+  for (const name of MOVED_SOUND_ATTRS) {
+    const value = readAttributeByTarget(source, target, name);
+    if (value === undefined) continue;
+    moved.push([name, value]);
+    videoOps.push(dataOp(name, null));
+  }
+  const automation = readAttributeByTarget(source, target, HF_AUDIO_AUTOMATION_ATTR);
+  if (automation !== undefined) {
+    const { videoKeeps, audioTakes } = splitAutomation(automation);
+    moved.push([HF_AUDIO_AUTOMATION_ATTR, audioTakes]);
+    videoOps.push(dataOp(HF_AUDIO_AUTOMATION_ATTR, videoKeeps));
+  }
+  videoOps.push(dataOp(LINK_PROPERTY, linkId), dataOp(SYNC_ORIGIN_PROPERTY, linkId));
+
+  const timing: Array<[string, string]> = [];
+  for (const name of COPIED_TIMING_ATTRS) {
+    const value = readAttributeByTarget(source, target, name);
+    if (value !== undefined) timing.push([`data-${name}`, value]);
+  }
+  const attrs: Array<[string, string]> = [
+    ["id", audioId],
+    ["data-hf-id", `hf-${generateId()}`],
+    ["class", "clip"],
+    ["src", readAuthoredSrc(source, target)],
+    ...timing,
+    ["data-track-index", String(input.track)],
+    [MEDIA_LINK_ATTR, linkId],
+    [SYNC_ORIGIN_ATTR, linkId],
+    ...moved,
+  ];
+  if (hasBooleanAttr(source, target, "loop")) attrs.push(["loop", ""]);
+  if (hasBooleanAttr(source, target, HIDDEN_ATTR)) attrs.push([HIDDEN_ATTR, ""]);
+  const inserted = insertBeforeTarget(source, target, `<audio ${formatAttrs(attrs)}></audio>`);
+  return { html: applyOps(inserted, target, videoOps), audioId, linkId };
+}
+
+/**
+ * Merge back: move the audio's sound attributes onto its video, unmute the
+ * video, drop the link, and delete the audio. The inverse of detach.
+ */
+export function mergeAudioInSource(
+  source: string,
+  input: { videoTarget: PatchTarget; audioTarget: PatchTarget },
+): string | null {
+  const { videoTarget, audioTarget } = input;
+  if (!findTagByTarget(source, videoTarget) || !findTagByTarget(source, audioTarget)) return null;
+  const assetOf = (target: PatchTarget) =>
+    mediaAssetIdentity({ src: readAuthoredSrc(source, target) });
+  const videoAsset = assetOf(videoTarget);
+  if (!videoAsset || videoAsset !== assetOf(audioTarget)) return null;
+  const hiddenOf = (target: PatchTarget) => hasBooleanAttr(source, target, HIDDEN_ATTR);
+  if (hiddenOf(videoTarget) !== hiddenOf(audioTarget)) return null;
+  const videoOps: PatchOperation[] = [];
+  for (const name of MOVED_SOUND_ATTRS) {
+    const value = readAttributeByTarget(source, audioTarget, name);
+    videoOps.push(dataOp(name, value ?? null));
+  }
+  const automation = readAttributeByTarget(source, audioTarget, HF_AUDIO_AUTOMATION_ATTR);
+  if (automation !== undefined) videoOps.push(dataOp(HF_AUDIO_AUTOMATION_ATTR, automation));
+  videoOps.push(
+    htmlOp("muted", null),
+    dataOp(LINK_PROPERTY, null),
+    dataOp(SYNC_ORIGIN_PROPERTY, null),
+    dataOp("has-audio", "true"),
+  );
+  return applyOps(removeElementInSource(source, audioTarget), videoTarget, videoOps);
+}
+
+type TimedElement = Pick<
+  TimelineElement,
+  "id" | "key" | "tag" | "src" | "start" | "duration" | "playbackStart" | "playbackRate" | "link"
+> &
+  Pick<TimelineElement, "muted" | "hasAudio" | "hidden" | "sourceFile" | "compositionScope">;
+
+const tagOf = (el: Pick<TimelineElement, "tag">) => el.tag.trim().toLowerCase();
+const keyOf = (el: Pick<TimelineElement, "id" | "key">) => el.key ?? el.id;
+const near = (a: number, b: number) => Math.abs(a - b) <= SYNC_TOLERANCE_S;
+
+function hasIdenticalTiming(a: TimedElement, b: TimedElement): boolean {
+  return (
+    near(a.start, b.start) &&
+    near(a.duration, b.duration) &&
+    near(a.playbackStart ?? 0, b.playbackStart ?? 0) &&
+    near(a.playbackRate ?? 1, b.playbackRate ?? 1)
+  );
+}
+
+const sameAssetInScope = (a: TimedElement, b: TimedElement) => {
+  const asset = mediaAssetIdentity(a);
+  return asset !== null && asset === mediaAssetIdentity(b) && sameCompositionScope(a, b);
+};
+
+/** A video whose sound is on the video itself: what Detach audio acts on. */
+export function canDetachAudio(el: TimedElement): boolean {
+  return tagOf(el) === "video" && el.muted !== true && el.hasAudio === true;
+}
+
+/**
+ * The (muted video, audio) pair Merge back acts on, found from either member:
+ * same file, and linked to each other or with identical timing.
+ */
+export function findMergePair<T extends TimedElement>(
+  element: T,
+  elements: readonly T[],
+): { video: T; audio: T } | null {
+  const isVideo = tagOf(element) === "video";
+  if (!isVideo && tagOf(element) !== "audio") return null;
+  const partnerTag = isVideo ? "audio" : "video";
+  const candidates = elements.filter(
+    (el) =>
+      keyOf(el) !== keyOf(element) && tagOf(el) === partnerTag && sameAssetInScope(el, element),
+  );
+  const partner =
+    candidates.find((el) => sharesLinkGroup(el, element)) ??
+    candidates.find((el) => hasIdenticalTiming(el, element));
+  if (!partner) return null;
+  const video = isVideo ? element : partner;
+  const audio = isVideo ? partner : element;
+  if ((video.hidden === true) !== (audio.hidden === true)) return null;
+  return video.muted === true ? { video, audio } : null;
+}
+
+/** Exactly one video and one audio, same file, identical timing, not already linked together. */
+export function canLinkPair(selected: readonly TimedElement[]): boolean {
+  if (selected.length !== 2) return false;
+  const [a, b] = selected;
+  if (!a || !b) 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);
+}
+
+type TrackedElement = Pick<TimelineElement, "tag" | "track" | "start" | "duration"> & {
+  authoredTrack?: number;
+};
+
+/**
+ * The detached audio's track: the first audio-only track below every visual
+ * track that is free for the clip's window, else a new track at the bottom.
+ */
+export function pickDetachedAudioTrack(
+  elements: readonly TrackedElement[],
+  window: { start: number; duration: number },
+): number {
+  const trackOf = (el: TrackedElement) => el.authoredTrack ?? el.track;
+  const visualTracks = elements.filter((el) => tagOf(el) !== "audio").map(trackOf);
+  const lowestAudio = Math.max(-1, ...visualTracks) + 1;
+  const end = window.start + window.duration;
+  const allTracks = elements.map(trackOf);
+  const bottom = Math.max(lowestAudio - 1, ...allTracks) + 1;
+  for (let track = lowestAudio; track < bottom; track += 1) {
+    const occupants = elements.filter((el) => trackOf(el) === track);
+    const free = occupants.every(
+      (el) => tagOf(el) === "audio" && (el.start >= end || el.start + el.duration <= window.start),
+    );
+    if (free) return track;
+  }
+  return bottom;
+}

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

@@ -103,11 +103,11 @@ function mount(dataAttributes: Record<string, string>, alone = false, voices = 2
   return { host, onSetAttributeQuiet, onSetAttributeLive };
 }
 
-function mountGroup(memberStart: number) {
+function mountGroup(memberStart: number, memberTag: "audio" | "video" = "audio") {
   const bus = document.createElement("hf-audio-group");
   bus.id = "voiceover";
   document.body.append(bus);
-  const member = document.createElement("audio");
+  const member = document.createElement(memberTag);
   member.id = "vo-1";
   member.setAttribute("data-audio-group", "voiceover");
   member.setAttribute("data-start", String(memberStart));
@@ -649,6 +649,16 @@ describe("AudioFxGroup dynamic carve", () => {
       leaveShelf(host);
     });
 
+    it("seeks a group audition to an audible video member's span", () => {
+      act(() =>
+        usePlayerStore.setState({ isPlaying: false, currentTime: 2, requestedSeekTime: null }),
+      );
+      const host = mountGroup(7, "video");
+      hoverPreset(host);
+      expect(store().requestedSeekTime).toBe(7);
+      leaveShelf(host);
+    });
+
     it("leaves a transport the author started alone", () => {
       // Stopping their playback because they passed over a preset would be the
       // panel taking a decision nobody offered it.
@@ -1621,7 +1631,14 @@ describe("AudioFxGroup carve by default", () => {
 describe("AudioFxGroup carve source list", () => {
   /** Mount a bed alongside tracks named however the test needs. */
   const mountWith = (
-    tracks: { id: string; src?: string; start?: string; duration?: string }[],
+    tracks: {
+      id: string;
+      src?: string;
+      start?: string;
+      duration?: string;
+      tag?: "audio" | "video";
+      muted?: boolean;
+    }[],
     bedAttrs: Record<string, string> = {},
   ) => {
     const bed = document.createElement("audio");
@@ -1629,8 +1646,9 @@ describe("AudioFxGroup carve source list", () => {
     for (const [k, v] of Object.entries(bedAttrs)) bed.setAttribute(`data-${k}`, v);
     document.body.append(bed);
     for (const t of tracks) {
-      const el = document.createElement("audio");
+      const el = document.createElement(t.tag ?? "audio");
       el.id = t.id;
+      if (t.muted) el.setAttribute("muted", "");
       if (t.src) el.setAttribute("src", t.src);
       if (t.start !== undefined) el.setAttribute("data-start", t.start);
       if (t.duration !== undefined) el.setAttribute("data-duration", t.duration);
@@ -1660,6 +1678,16 @@ describe("AudioFxGroup carve source list", () => {
     return { host, options, boxes, onSetAttributeQuiet };
   };
 
+  it("offers an audible video as a voice and never a muted one", () => {
+    const { options } = mountWith([
+      { id: "a-roll", tag: "video" },
+      { id: "b-roll", tag: "video", muted: true },
+      { id: "narration" },
+    ]);
+    expect(options).toContain("a-roll");
+    expect(options).not.toContain("b-roll");
+  });
+
   it("reads the one voice out instead of offering a picker with one entry", () => {
     // A question with one answer is not a question. It is also the common case: a
     // narration and a bed, with a couple of stings that cannot be the voice.

package/src/components/editor/propertyPanelAudioFxGroup.tsx

@@ -54,6 +54,7 @@ import {
   resolveAudioGroups,
 } from "@hyperframes/core/audio-groups";
 import { useFxLevelling } from "./useFxLevelling.js";
+import { isCarveVoiceElement } from "./useFxCarveGrouping.js";
 
 function auditionSpan(startRaw: string | undefined, durationRaw: string | undefined) {
   const start = Number.parseFloat(startRaw ?? "");
@@ -70,8 +71,9 @@ function auditionSpansFor(element: DomEditSelection): AuditionSpan[] {
   if (element.tagName?.toLowerCase() !== HF_AUDIO_GROUP_TAG || !element.id) return [];
   const doc = element.element?.ownerDocument;
   if (!doc) return [];
-  return [...doc.querySelectorAll(`audio[${HF_AUDIO_GROUP_ATTR}]`)]
+  return [...doc.querySelectorAll(`[${HF_AUDIO_GROUP_ATTR}]`)]
     .filter((member) => member.getAttribute(HF_AUDIO_GROUP_ATTR) === element.id)
+    .filter(isCarveVoiceElement)
     .flatMap((member) => {
       const span = auditionSpan(
         member.getAttribute("data-start") ?? undefined,

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

@@ -652,7 +652,12 @@ function makeHandlers() {
         ops: PatchOperation[],
         options: BatchOptions,
       ) => Promise<boolean>
-    >(async () => true),
+    >(async (_selection, _ops, options) => {
+      options.prepareContent?.(
+        '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" data-start="2"></video></div>',
+      );
+      return true;
+    }),
   };
 }
 
@@ -871,14 +876,14 @@ describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the soun
     const [selection, ops, options] = onSetAttributeBatch.mock.calls[0] ?? [];
     expect(selection).toBe(element);
     expect(ops).toEqual([
-      htmlOp("src", "assets/cut.webm"),
       htmlOp("muted", "true"),
       dataOp("has-audio", null),
       dataOp("volume", null),
-      dataOp("link", "link"),
+      dataOp("link", "lk-1"),
+      dataOp("sync-origin", "lk-1"),
     ]);
     const source =
-      '<div data-composition-id="main"><video id="s1-bg" src="assets/cut.webm" muted data-start="2" data-duration="3" data-track-index="0" data-link="link"></video></div>';
+      '<div data-composition-id="main"><video id="s1-bg" src="assets/intro-loop.mp4" muted data-start="2" data-duration="3" data-track-index="0" data-link="lk-1"></video></div>';
     const prepared = options?.prepareContent?.(source) ?? "";
     const audio = new DOMParser()
       .parseFromString(prepared, "text/html")
@@ -886,7 +891,7 @@ describe.each<PanelKind>(["flat", "design"])("%s panel — cutout keeps the soun
     expect(audio?.getAttribute("src")).toBe("assets/intro-loop.mp4");
     expect(audio?.getAttribute("data-start")).toBe("2");
     expect(audio?.getAttribute("data-duration")).toBe("3");
-    expect(audio?.getAttribute("data-link")).toBe("link");
+    expect(audio?.getAttribute("data-link")).toBe("lk-1");
     expect(audio?.getAttribute("data-volume")).toBe("0.5");
     expect(text).toContain("Background removed. Sound kept on a linked audio track.");
   });

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -24,6 +24,7 @@ import {
   audioGainToText,
 } from "@hyperframes/core/audio-gain";
 import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { commitCutout, commitHasAudioToggle, commitMutedToggle } from "./mediaAudioEdits";
 
 // fallow-ignore-next-line complexity
@@ -56,6 +57,10 @@ export function MediaSection({
   ) => Promise<BackgroundRemovalResult>;
 }) {
   const track = useTrackDesignInput();
+  const setRate = withLinkedPlaybackRate(
+    onSetAttribute,
+    useLinkedSpeedCommit(element, onSetAttributeBatch),
+  );
   const isVideo = element.tagName === "video";
   const isAudio = element.tagName === "audio";
   const isImage = element.tagName === "img";
@@ -279,7 +284,7 @@ export function MediaSection({
                 displayValue={`${formatNumericValue(playbackRate)}x`}
                 formatDisplayValue={(next) => `${formatNumericValue(next / 100)}x`}
                 onCommit={(next) => {
-                  void onSetAttribute("playback-rate", formatNumericValue(next / 100));
+                  void setRate("playback-rate", formatNumericValue(next / 100));
                 }}
               />
             </div>

package/src/components/editor/useDomEditNudge.ts

@@ -11,7 +11,7 @@ import { ownsPlainKeys } from "../../utils/typingTarget";
 import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
 import {
   addStudioPendingEditFlushListener,
-  trackStudioPendingEdit,
+  beginStudioPendingEdit,
 } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -31,6 +31,7 @@ import {
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
   endManualOffsetDragMembers,
+  manualOffsetMoveRevert,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
@@ -47,7 +48,7 @@ interface NudgeSession {
   /** Accumulated delta of the burst, in composition px. */
   accum: { x: number; y: number };
   timer: ReturnType<typeof setTimeout> | null;
-  endPendingEdit: (saved?: Promise<unknown>) => void;
+  edit: ReturnType<typeof beginStudioPendingEdit>;
 }
 
 export interface UseDomEditNudgeParams {
@@ -161,11 +162,16 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
         next: applyManualOffsetNudgeCommit(member, session.accum),
         plainTranslate: member.plainTranslate,
       }));
-      const commit = session.isGroup
-        ? p.onGroupPathOffsetCommitRef.current(updates)
-        : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
-            plainTranslate: updates[0].plainTranslate,
-          });
+      const commit = session.edit.adopt(() =>
+        session.isGroup
+          ? p.onGroupPathOffsetCommitRef.current(updates)
+          : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, {
+              plainTranslate: updates[0].plainTranslate,
+            }),
+      );
+      if (session.edit.reverted())
+        for (const member of session.members)
+          restoreStudioPathOffset(member.element, member.initialPathOffset);
       saved = Promise.resolve(commit)
         .catch(() => {
           for (const member of session.members) {
@@ -177,7 +183,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
         .finally(() => endManualOffsetDragMembers(session.members));
       return saved;
     } finally {
-      session.endPendingEdit(saved);
+      session.edit.settle(saved);
     }
   };
   const commitSessionRef = useRef(commitSession);
@@ -190,7 +196,7 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (session.timer) clearTimeout(session.timer);
     restoreManualOffsetDragMembers(session.members);
     endManualOffsetDragMembers(session.members);
-    session.endPendingEdit();
+    session.edit.settle();
   }, [params.allowCanvasMovement]);
 
   // Build drag members for the current target set — the same member snapshot a
@@ -217,9 +223,8 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     if (members.length === 0) return null;
     // Same side effect a drag start has (pauses preview playback).
     p.onManualDragStartRef.current?.();
-    let endPendingEdit: NudgeSession["endPendingEdit"] = () => {};
-    trackStudioPendingEdit(new Promise<unknown>((resolve) => (endPendingEdit = resolve)));
-    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, endPendingEdit };
+    const edit = beginStudioPendingEdit(manualOffsetMoveRevert(members));
+    return { members, isGroup, accum: { x: 0, y: 0 }, timer: null, edit };
   };
 
   const handleKeyDown = (event: KeyboardEvent) => {

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -11,6 +11,7 @@ import {
   applyManualOffsetDragDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
+  manualOffsetMoveRevert,
 } from "./manualOffsetDrag";
 import { applyRotationDraft, restoreRotationDraft } from "./rotationDraft";
 import {
@@ -57,6 +58,7 @@ import { logResize, logResizeMove, logResizeSettle } from "../../utils/resizeDeb
 import { logDrag, logDragSettle, readDragPositions } from "../../utils/dragDebug";
 import { createGroupDragMover } from "./groupDragMove";
 import { DomEditSaveQueueOpenError } from "../../utils/domEditSaveQueue";
+import { beginStudioPendingEdit } from "../../utils/studioPendingEdits";
 
 function isTap(g: { startX: number; startY: number; travelled?: boolean }, e: React.PointerEvent) {
   return (
@@ -344,7 +346,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         ),
         at: readDragPositions(groupG.members),
       });
-      void Promise.resolve(opts.onGroupPathOffsetCommitRef.current(updates))
+      const groupEdit = beginStudioPendingEdit(manualOffsetMoveRevert(groupG.members));
+      const groupSaved = Promise.resolve(
+        groupEdit.adopt(() => opts.onGroupPathOffsetCommitRef.current(updates)),
+      )
         .catch(() => {
           for (const member of groupG.members) {
             if (
@@ -363,6 +368,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
           // so this is where a snap-back would show.
           logDragSettle("settle", groupG.members);
         });
+      groupEdit.settle(groupSaved);
       return;
     }
 
@@ -469,11 +475,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         box.style.left = `${nextBoxLeft}px`;
         box.style.top = `${nextBoxTop}px`;
       }
-      void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
-          altKey: e.altKey,
-          plainTranslate: g.pathOffsetMember.plainTranslate,
-        }),
+      const member = g.pathOffsetMember;
+      const edit = beginStudioPendingEdit(manualOffsetMoveRevert([member]));
+      const saved = Promise.resolve(
+        edit.adopt(() =>
+          opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+            altKey: e.altKey,
+            plainTranslate: member.plainTranslate,
+          }),
+        ),
       )
         .catch(() => {
           if (
@@ -485,6 +495,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         .finally(() => {
           if (g.pathOffsetMember) endManualOffsetDragMembers([g.pathOffsetMember]);
         });
+      edit.settle(saved);
     } else {
       opts.suppressNextBoxClickRef.current = true;
       const finalSize = readStudioBoxSize(sel.element);