@hyperframes/studio 0.8.86 → 0.8.88

package/src/hooks/gsapRuntimeBridge.ts

@@ -33,6 +33,7 @@ import {
   readGsapPositionFromIframe,
 } from "./gsapPositionDetection";
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { getAnimationsForElement } from "./gsapElementMatch";
 import {
   animationWritesAnyProperty,
   directEditOutcomeForProperties,
@@ -133,17 +134,28 @@ export type { GsapDragCommitCallbacks };
  * Returns an explicit persisted/blocked outcome. Callers must reject blocked
  * outcomes so the gesture layer restores its runtime and overlay drafts.
  */
-// fallow-ignore-next-line complexity
 async function preflightGsapDragIntercept(
   selection: DomEditSelection,
   animations: GsapAnimation[],
   iframe: HTMLIFrameElement | null,
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+  group?: boolean,
 ): Promise<GsapEditOutcome> {
+  const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
+  return dragEditOutcome(selection, animations, iframe, fetchedAnimations, group);
+}
+
+/** The move commit's refusal rule, also run ahead of time to hide the move handles. */
+// fallow-ignore-next-line complexity
+export function dragEditOutcome(
+  selection: DomEditSelection,
+  animations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  fetchedAnimations: GsapAnimation[] = [],
+  group = false,
+): GsapEditOutcome {
   const selector = selectorFromSelection(selection);
   if (!selector) return { status: "blocked", reason: "no-selector" };
-
-  const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   // The fallback API currently represents both a definitive empty parse and an
   // exhausted fetch failure as `[]`. Keep the selected cache in the preflight
   // set as well: ignoring it would let a transient fetch failure bypass helper /
@@ -152,7 +164,12 @@ async function preflightGsapDragIntercept(
   const editability = directEditOutcomeForProperties(allKnownAnimations, POSITION_CHANNEL_SET);
   if (editability.status === "blocked") return editability;
   const sourceAnimations = fetchedAnimations.length > 0 ? fetchedAnimations : animations;
-  const posAnim = findGsapPositionAnimation(sourceAnimations, selector);
+  // In a group only a tween naming this member by id or by its own selector counts,
+  // so a class tween shared with id-selected members cannot take one member's write.
+  const positionSources = group
+    ? getAnimationsForElement(sourceAnimations, { id: selection.id ?? null, selector })
+    : sourceAnimations;
+  const posAnim = findGsapPositionAnimation(positionSources, selector);
   const hasLivePosition = hasNonHoldTweenForElement(iframe, selector, undefined, POSITION_CHANNELS);
 
   if (hasLivePosition && !posAnim) {
@@ -177,7 +194,12 @@ export async function tryGsapDragIntercept(
   iframe: HTMLIFrameElement | null,
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
-  options?: { altKey?: boolean; preflightOnly?: boolean; preflightPassed?: boolean },
+  options?: {
+    altKey?: boolean;
+    preflightOnly?: boolean;
+    preflightPassed?: boolean;
+    group?: boolean;
+  },
 ): Promise<GsapEditOutcome> {
   if (!options?.preflightPassed) {
     const preflight = await preflightGsapDragIntercept(
@@ -185,6 +207,7 @@ export async function tryGsapDragIntercept(
       animations,
       iframe,
       fetchFallbackAnimations,
+      options?.group,
     );
     if (preflight.status === "blocked" || options?.preflightOnly) return preflight;
   }
@@ -312,6 +335,41 @@ export { readGsapProperty, readAllAnimatedProperties };
 
 // ── Identity-prop synthesis ───────────────────────────────────────────────
 
+/** The rotation commit's refusal rule, also run ahead of time to hide the rotate handle. */
+export function preflightGsapRotationIntercept(
+  selection: DomEditSelection,
+  animations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  fetchedAnimations: GsapAnimation[] = [],
+): GsapEditOutcome {
+  const liveSelector = selectorFromSelection(selection);
+  if (!(liveSelector ?? writeTargetSelector(selection))) {
+    return { status: "blocked", reason: "no-selector" };
+  }
+  const editability = directEditOutcomeForProperties(
+    [...animations, ...fetchedAnimations],
+    ROTATION_CHANNEL_SET,
+  );
+  if (editability.status === "blocked") return editability;
+  const workingAnimations = animations.length > 0 ? animations : fetchedAnimations;
+  const hasSourceTween = workingAnimations.some((a) =>
+    animationWritesAnyProperty(a, ROTATION_CHANNEL_SET),
+  );
+  if (
+    !hasSourceTween &&
+    liveSelector &&
+    hasNonHoldTweenForElement(iframe, liveSelector, undefined, ROTATION_CHANNELS)
+  ) {
+    // Rotation twin of the position case above: live tween, no source match.
+    return {
+      status: "blocked",
+      reason: "source-uneditable",
+      detail: "live-rotation-no-source-tween",
+    };
+  }
+  return { status: "persisted" };
+}
+
 export async function tryGsapRotationIntercept(
   selection: DomEditSelection,
   angle: number,
@@ -320,16 +378,11 @@ export async function tryGsapRotationIntercept(
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
 ): Promise<GsapEditOutcome> {
-  const selector = selectorFromSelection(selection) ?? writeTargetSelector(selection);
-  if (!selector) return { status: "blocked", reason: "no-selector" };
-
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
+  const outcome = preflightGsapRotationIntercept(selection, animations, iframe, fetchedAnimations);
+  if (outcome.status === "blocked") return outcome;
+  const selector = (selectorFromSelection(selection) ?? writeTargetSelector(selection))!;
   const workingAnimations = animations.length > 0 ? animations : fetchedAnimations;
-  const editability = directEditOutcomeForProperties(
-    [...animations, ...fetchedAnimations],
-    ROTATION_CHANNEL_SET,
-  );
-  if (editability.status === "blocked") return editability;
   const postSplitFetch = workingAnimations.some((animation) => !animation.propertyGroup)
     ? fetchFallbackAnimations
     : undefined;
@@ -354,19 +407,6 @@ export async function tryGsapRotationIntercept(
       workingAnimations.find((a) => animationWritesAnyProperty(a, ROTATION_CHANNEL_SET)) ?? null;
   }
 
-  const liveSelector = selectorFromSelection(selection);
-  const hasLiveRotationTween = liveSelector
-    ? hasNonHoldTweenForElement(iframe, liveSelector, undefined, ROTATION_CHANNELS)
-    : false;
-  if (!anim && hasLiveRotationTween) {
-    // Rotation twin of the position case above: live tween, no source match.
-    return {
-      status: "blocked",
-      reason: "source-uneditable",
-      detail: "live-rotation-no-source-tween",
-    };
-  }
-
   // `angle` is the ABSOLUTE target rotation resolved by the gesture (gsap base +
   // pointer sweep) or the inspector — so it IS the new rotation. No base re-add: the
   // gesture's live preview already gsap.set this value (single source of truth).

package/src/hooks/keyframeCacheAstLoad.ts

@@ -53,12 +53,15 @@ function hasAnimations(value: unknown): value is ParsedGsapAnimations {
  */
 const inFlightParses = new Map<string, Promise<ParsedGsapAnimations | null>>();
 
+export const parseCacheKey = (projectId: string, sourceFile: string) =>
+  `${projectId}|${sourceFile}`;
+
 export function fetchParsedAnimations(
   projectId: string,
   sourceFile: string,
   options: { fresh?: boolean } = {},
 ): Promise<ParsedGsapAnimations | null> {
-  const key = `${projectId}|${sourceFile}`;
+  const key = parseCacheKey(projectId, sourceFile);
   if (options.fresh) inFlightParses.delete(key);
   const inFlight = inFlightParses.get(key);
   if (inFlight) return inFlight;

package/src/hooks/useAppHotkeys.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { dispatchModifierKey, dispatchPlainKey, type HotkeyCallbacks } from "./appHotkeysDispatch";
-import { usePlayerStore } from "../player/store/playerStore";
+import { liveTime, usePlayerStore } from "../player/store/playerStore";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { clearAutomationClipboard, copyRange } from "../player/components/automationClipboard";
 import { VOLUME_RANGE } from "@hyperframes/core/audio-automation";
@@ -60,6 +60,63 @@ afterEach(() => {
   });
 });
 
+describe("dispatchPlainKey — select leftward / rightward", () => {
+  const clips = [
+    { ...bgmElement, id: "early", key: "early", start: 0, track: 0 },
+    { ...bgmElement, id: "at", key: "at", start: 4, track: 1 },
+    { ...bgmElement, id: "late", key: "late", start: 7, track: 2 },
+  ];
+  beforeEach(() => usePlayerStore.setState({ elements: clips, currentTime: 4 }));
+
+  it("[ selects every clip starting before the playhead, on every track", () => {
+    const event = press("[");
+    dispatchPlainKey(event, "[", callbacks());
+    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["early"]);
+    expect(usePlayerStore.getState().selectedElementId).toBe("early");
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("uses the live playhead while playing, not the time stored at play start", () => {
+    usePlayerStore.setState({ isPlaying: true, currentTime: 0 });
+    liveTime.notify(8);
+    try {
+      dispatchPlainKey(press("["), "[", callbacks());
+      expect([...usePlayerStore.getState().selectedElementIds].sort()).toEqual([
+        "at",
+        "early",
+        "late",
+      ]);
+    } finally {
+      usePlayerStore.setState({ isPlaying: false });
+      liveTime.notify(0);
+    }
+  });
+
+  it("clears a clicked keyframe like any other selection change", () => {
+    usePlayerStore.setState({ activeKeyframePct: 50 });
+    dispatchPlainKey(press("]"), "]", callbacks());
+    expect(usePlayerStore.getState().activeKeyframePct).toBeNull();
+  });
+
+  it("] selects every clip starting at or after the playhead, on every track", () => {
+    dispatchPlainKey(press("]"), "]", callbacks());
+    const { selectedElementIds, selectedElementId } = usePlayerStore.getState();
+    expect([...selectedElementIds].sort()).toEqual(["at", "late"]);
+    expect(selectedElementId).toBe("at");
+  });
+
+  it("selects nothing when no clip is on that side", () => {
+    usePlayerStore.setState({
+      currentTime: 0,
+      selectedElementId: "late",
+      selectedElementIds: new Set(["late"]),
+    });
+    dispatchPlainKey(press("["), "[", callbacks());
+    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
+    expect(usePlayerStore.getState().selectedElementId).toBeNull();
+  });
+});
+
 describe("dispatchPlainKey — Delete arbitration", () => {
   const selectBgm = () =>
     usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });

package/src/hooks/useCommitPreflightCapabilities.ts

@@ -0,0 +1,147 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { dragEditOutcome, preflightGsapRotationIntercept } from "./gsapRuntimeBridge";
+import { preflightGsapResizeIntercept } from "./gsapResizePreflight";
+import { GSAP_EDIT_BLOCK_COPY, type GsapEditOutcome } from "./gsapEditOutcome";
+import { fetchParsedAnimations, parseCacheKey } from "./keyframeCacheAstLoad";
+import {
+  gsapSourceFileForSelection,
+  selectElementAnimationsOrRetry,
+} from "./useGsapAnimationFetchFallback";
+
+interface CommitPreflight {
+  offset: GsapEditOutcome;
+  size: GsapEditOutcome;
+  rotation: GsapEditOutcome;
+}
+
+function runCommitPreflights(
+  selection: DomEditSelection,
+  fileAnimations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  group: boolean,
+): CommitPreflight {
+  const target = { id: selection.id ?? null, selector: selection.selector ?? null };
+  const matched = selectElementAnimationsOrRetry(
+    { animations: fileAnimations },
+    target,
+    selection.element,
+  );
+  // A file the server parsed with no tweens at all is a definitive answer here.
+  const animations = matched.kind === "resolved" ? matched.animations : [];
+  return {
+    offset: dragEditOutcome(selection, animations, iframe, [], group),
+    size: preflightGsapResizeIntercept(selection, animations, iframe),
+    rotation: preflightGsapRotationIntercept(selection, animations, iframe),
+  };
+}
+
+// Studio can hand a narrowed copy back as a new selection; narrowing starts from the resolved one.
+const resolvedSelections = new WeakMap<DomEditSelection, DomEditSelection>();
+
+const resolvedOf = (selection: DomEditSelection) => resolvedSelections.get(selection) ?? selection;
+
+const MANUAL_FLAGS = [
+  ["canApplyManualOffset", "offset"],
+  ["canApplyManualSize", "size"],
+  ["canApplyManualRotation", "rotation"],
+] as const;
+
+/** Null when the commit would go through; "" while the check is still running. */
+function refusal(preflight: CommitPreflight | null, check: keyof CommitPreflight): string | null {
+  const outcome = preflight?.[check];
+  if (outcome?.status === "persisted") return null;
+  return outcome ? GSAP_EDIT_BLOCK_COPY[outcome.reason] : "";
+}
+
+/** Closes each manual flag whose commit Studio would refuse, and says why. */
+function narrowCapabilities(
+  selection: DomEditSelection,
+  preflight: CommitPreflight | null,
+): DomEditSelection {
+  const resolved = resolvedOf(selection);
+  const next = { ...resolved.capabilities };
+  const reasons: string[] = [];
+  for (const [flag, check] of MANUAL_FLAGS) {
+    const reason = refusal(preflight, check);
+    if (!next[flag] || reason === null) continue;
+    next[flag] = false;
+    reasons.push(reason);
+  }
+  if (reasons.length === 0) return resolved;
+  next.reasonIfDisabled = reasons.find(Boolean) || next.reasonIfDisabled;
+  if (!preflight) next.commitCheckPending = true;
+  const narrowed = { ...resolved, capabilities: next };
+  resolvedSelections.set(narrowed, resolved);
+  return narrowed;
+}
+
+interface FileParse {
+  version: number;
+  animations: GsapAnimation[] | null;
+}
+
+/**
+ * The one place selection capabilities learn what the GSAP commit would refuse,
+ * so chrome, nudge and group gates never offer an edit that snaps back.
+ */
+export function useCommitPreflightCapabilities({
+  projectId,
+  enabled,
+  selection,
+  groupSelections,
+  previewIframeRef,
+  version,
+}: {
+  projectId: string | null;
+  enabled: boolean;
+  selection: DomEditSelection | null;
+  groupSelections: DomEditSelection[];
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  version: number;
+}) {
+  // One parse per project file and version; the last good parse answers while a newer one loads.
+  const parsesRef = useRef(new Map<string, FileParse>());
+  const [parseTick, setParseTick] = useState(0);
+
+  useEffect(() => {
+    if (!enabled || !projectId) return;
+    const targets = selection ? [selection, ...groupSelections] : groupSelections;
+    for (const file of new Set(targets.map(gsapSourceFileForSelection))) {
+      const key = parseCacheKey(projectId, file);
+      const known = parsesRef.current.get(key);
+      if (known?.version === version) continue;
+      parsesRef.current.set(key, { version, animations: known?.animations ?? null });
+      void fetchParsedAnimations(projectId, file).then((parsed) => {
+        if (parsesRef.current.get(key)?.version !== version) return;
+        if (parsed) {
+          parsesRef.current.set(key, { version, animations: parsed.animations });
+          setParseTick((tick) => tick + 1);
+          return;
+        }
+        // A failed read is not an answer: keep the last one, and the next selection asks again.
+        if (known?.animations) parsesRef.current.set(key, known);
+        else parsesRef.current.delete(key);
+      });
+    }
+  }, [enabled, projectId, selection, groupSelections, version]);
+
+  return useMemo(() => {
+    void parseTick;
+    if (!enabled || !projectId) return { selection, groupSelections };
+    const group = groupSelections.length > 1;
+    const narrow = (target: DomEditSelection) => {
+      const file = gsapSourceFileForSelection(target);
+      const animations = parsesRef.current.get(parseCacheKey(projectId, file))?.animations;
+      const preflight = animations
+        ? runCommitPreflights(resolvedOf(target), animations, previewIframeRef.current, group)
+        : null;
+      return narrowCapabilities(target, preflight);
+    };
+    return {
+      selection: selection && narrow(selection),
+      groupSelections: groupSelections.map(narrow),
+    };
+  }, [enabled, projectId, selection, groupSelections, parseTick, previewIframeRef]);
+}

package/src/hooks/useDomEditCommits.ts

@@ -1,20 +1,15 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
-import { useCallback, useRef } from "react";
+import { useCallback } from "react";
 import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
 import { FONT_EXT } from "../utils/mediaTypes";
-
-import { trackStudioEvent } from "../utils/studioTelemetry";
 import { primaryFontFamilyValue } from "../utils/studioFontHelpers";
 import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
-import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
+import type { DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
-import type { CommitDomEditPatchBatches, PersistDomEditOperations } from "./domEditCommitTypes";
+import type { CommitDomEditPatchBatches } from "./domEditCommitTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
-import {
-  DomEditPersistUnsafeValueError,
-  DomEditPersistUnresolvableError,
-  warnDomEditPersistNoOp,
-} from "./domEditPersistFailure";
+import { DomEditPersistUnsafeValueError } from "./domEditPersistFailure";
+import { useDomEditPersist, type RecordEditInput } from "./useDomEditPersist";
 import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 import { useDomGeometryCommits } from "./useDomGeometryCommits";
@@ -24,19 +19,9 @@ import {
   batchesAreInlineStyleOnly,
   formatUnsafeFieldList,
   patchElementBatches,
-  postPatchElement,
-  writePreparedContent,
 } from "./useDomEditCommitsHelpers";
 import type { CutoverResult } from "../utils/sdkCutover";
-import { reseekPreviewRuntime } from "./timelineTrackVisibility";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
-import { readProjectFileContent } from "../utils/studioFileHistory";
-interface RecordEditInput {
-  label: string;
-  coalesceKey?: string;
-  coalesceMs?: number;
-  files: Record<string, { before: string; after: string }>;
-}
 
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
@@ -132,168 +117,18 @@ export function useDomEditCommits({
     [fileTree, projectId, importedFontAssetsRef],
   );
 
-  const reportedUnresolvableRef = useRef(new Set<string>());
-
-  // fallow-ignore-next-line complexity
-  const performPersistDomEditOperations = useCallback(
-    // fallow-ignore-next-line complexity
-    async (
-      selection: DomEditSelection,
-      operations: PatchOperation[],
-      options: Parameters<PersistDomEditOperations>[2],
-      expectedProjectId: string,
-    ) => {
-      if (projectIdRef.current !== expectedProjectId) {
-        throw new Error("Active project changed before the edit could be saved");
-      }
-      const pid = expectedProjectId;
-      if (options?.shouldSave && !options.shouldSave()) return;
-
-      const targetPath = selection.sourceFile || activeCompPath || "index.html";
-      const completePersistence = <T>(result: T, changed: boolean): T => {
-        if (options?.skipRefresh && changed) reseekPreviewRuntime(previewIframeRef.current);
-        return result;
-      };
-
-      const readTarget = async (): Promise<string | null> => {
-        const content = await readProjectFileContent(pid, targetPath);
-        if (projectIdRef.current !== expectedProjectId) {
-          throw new Error("Active project changed before the edit could be saved");
-        }
-        return options?.shouldSave && !options.shouldSave() ? null : content;
-      };
-
-      // Validate layout values BEFORE any persist path runs. The SDK cutover
-      // path (onTrySdkPersist) returns early on success, so leaving this check
-      // after it let invalid numeric values bypass the guard whenever the
-      // cutover flag was on.
-      const patchTarget = buildDomEditPatchTarget(selection);
-      const patchBody = { target: patchTarget, operations };
-      const unsafeFields = findUnsafeDomPatchValues(patchBody);
-      if (unsafeFields.length > 0) {
-        const fields = formatUnsafeFieldList(unsafeFields);
-        showToast("Couldn't save edit because it contains invalid layout values", "error");
-        throw new DomEditPersistUnsafeValueError(`DOM patch contains unsafe values: ${fields}`, {
-          alreadyToasted: true,
-        });
-      }
-
-      // Skip the SDK path when prepareContent is set (e.g. @font-face injection
-      // for a custom font): sdkCutoverPersist serializes only the patched DOM
-      // and would drop the injected content. Let the server path run prepareContent.
-      // The SDK joins the file queue itself and re-reads there; this read is only its fallback.
-      if (onTrySdkPersist && !options?.prepareContent) {
-        const originalContent = await readTarget();
-        if (originalContent === null) return;
-        const cutover = await onTrySdkPersist(selection, operations, originalContent, targetPath, {
-          label: options?.label,
-          coalesceKey: options?.coalesceKey,
-          skipRefresh: options?.skipRefresh,
-        });
-        if (cutover.status === "failed") throw cutover.error;
-        if (cutover.status === "committed") {
-          // SDK handled it — its in-memory doc is already current, so do NOT
-          // forceReload (that would echo-reload the session we just wrote).
-          return completePersistence(
-            { sourceFile: targetPath, version: cutover.version, changed: true },
-            true,
-          );
-        }
-      }
-
-      const history = {
-        label: options?.label ?? "Edit layer",
-        coalesceKey: options?.coalesceKey,
-        coalesceMs: options?.coalesceMs,
-      };
-      const prepare = options?.prepareContent;
-      // Read, server patch, follow-up write and history hold the file's queue, so no save lands between them.
-      const saved = await serializeStudioFileMutations(writeProjectFile, [targetPath], async () => {
-        const originalContent = await readTarget();
-        if (originalContent === null) return null;
-        const patchData = await postPatchElement(pid, targetPath, patchBody, showToast);
-        if (!patchData.changed) return { patchData, patchedContent: null, finalContent: null };
-
-        const patchedContent =
-          typeof patchData.content === "string" ? patchData.content : originalContent;
-        const finalContent = prepare
-          ? await writePreparedContent(
-              targetPath,
-              patchedContent,
-              prepare,
-              writeProjectFile,
-              showToast,
-            )
-          : patchedContent;
-
-        await editHistory.recordEdit({
-          ...history,
-          files: { [targetPath]: { before: originalContent, after: finalContent } },
-        });
-        return { patchData, patchedContent, finalContent };
-      });
-      if (saved === null) return;
-      const { patchData, patchedContent, finalContent } = saved;
-
-      if (finalContent === null) {
-        if (patchData.matched === false) {
-          const targetKey = selection.selector ?? selection.id ?? "selection";
-          if (!reportedUnresolvableRef.current.has(targetKey)) {
-            reportedUnresolvableRef.current.add(targetKey);
-            trackStudioEvent("save_skipped_unresolvable", {
-              target_id: selection.id ?? undefined,
-              target_selector: selection.selector ?? undefined,
-              target_source_file: selection.sourceFile ?? undefined,
-              composition: activeCompPath ?? undefined,
-            });
-          }
-          throw new DomEditPersistUnresolvableError(targetPath);
-        }
-        warnDomEditPersistNoOp(selection, operations);
-        return completePersistence(
-          typeof patchData.path === "string" && typeof patchData.version === "string"
-            ? { sourceFile: patchData.path, version: patchData.version, changed: false }
-            : undefined,
-          false,
-        );
-      }
-      forceReloadSdkSession?.();
-
-      if (!options?.skipRefresh) {
-        reloadPreview();
-      }
-      return completePersistence(
-        finalContent === patchedContent &&
-          typeof patchData.path === "string" &&
-          typeof patchData.version === "string"
-          ? { sourceFile: patchData.path, version: patchData.version, changed: true }
-          : undefined,
-        true,
-      );
-    },
-    [
-      activeCompPath,
-      editHistory,
-      writeProjectFile,
-      projectIdRef,
-      reloadPreview,
-      showToast,
-      forceReloadSdkSession,
-      onTrySdkPersist,
-      previewIframeRef,
-    ],
-  );
-
-  const persistDomEditOperations: PersistDomEditOperations = useCallback(
-    (selection, operations, options) => {
-      const expectedProjectId = projectIdRef.current;
-      if (!expectedProjectId) return Promise.reject(new Error("No active project"));
-      return queueDomEditSave(() =>
-        performPersistDomEditOperations(selection, operations, options, expectedProjectId),
-      );
-    },
-    [performPersistDomEditOperations, projectIdRef, queueDomEditSave],
-  );
+  const persistDomEditOperations = useDomEditPersist({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    queueDomEditSave,
+    writeProjectFile,
+    editHistory,
+    projectIdRef,
+    reloadPreview,
+    forceReloadSdkSession,
+    onTrySdkPersist,
+  });
 
   const commitDomEditPatchBatches: CommitDomEditPatchBatches = useCallback(
     (batches, options) => {