@hyperframes/studio 0.7.57 → 0.7.59

package/src/hooks/useDomEditCommits.ts

@@ -12,11 +12,7 @@ import {
 import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
-import type {
-  CommitDomEditPatchBatches,
-  DomEditPatchBatch,
-  PersistDomEditOperations,
-} from "./domEditCommitTypes";
+import type { CommitDomEditPatchBatches, PersistDomEditOperations } from "./domEditCommitTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import {
   DomEditPersistUnsafeValueError,
@@ -27,32 +23,16 @@ import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
-import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
-import { readProjectFileContent } from "../utils/studioFileHistory";
-
-// ── Helpers ──
-
-function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
-  return fields.map((field) => field.path).join(", ");
-}
-
-function getErrorDetail(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
-async function readErrorResponseBody(
-  response: Response,
-): Promise<{ error?: string; fields?: string[] } | null> {
-  const contentType = response.headers.get("content-type") ?? "";
-  if (!contentType.includes("application/json")) return null;
-  return (await response.json().catch(() => null)) as { error?: string; fields?: string[] } | null;
-}
-
-function formatPatchRejectionMessage(body: { error?: string; fields?: string[] } | null): string {
-  if (!body?.error) return "Couldn't save edit";
-  return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
-}
-
+import {
+  AtomicElementPatchConvergenceError,
+  batchesAreInlineStyleOnly,
+  formatPatchRejectionMessage,
+  formatUnsafeFieldList,
+  getErrorDetail,
+  patchElementBatches,
+  readErrorResponseBody,
+} from "./useDomEditCommitsHelpers";
+import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
@@ -61,88 +41,11 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-/** Human-readable identifier for a batch patch target (for the unmatched warning). */
-function describeBatchPatchTarget(patch: DomEditPatchBatch["patches"][number]): string {
-  return patch.target.id ?? patch.target.hfId ?? patch.target.selector ?? "(unaddressed)";
-}
-
-/**
- * Surface server-reported unmatched patches. The matched subset already
- * persisted, so this must NOT throw (a throw would roll back applied state) —
- * warn and emit save-failure telemetry with a distinct reason instead.
- */
-function reportUnmatchedBatchPatches(batch: DomEditPatchBatch, matched: boolean[]): void {
-  const unmatchedIds = batch.patches
-    .filter((_, index) => matched[index] === false)
-    .map(describeBatchPatchTarget);
-  if (unmatchedIds.length === 0) return;
-  console.warn(
-    `[studio] z-index reorder: server could not match ${unmatchedIds.length} patch target(s) in ` +
-      `${batch.sourceFile} (their z-order will revert on reload):`,
-    unmatchedIds.join(", "),
-  );
-  trackStudioSaveFailure({
-    source: "dom_edit",
-    error: new Error(`Batch patch target(s) unmatched: ${unmatchedIds.join(", ")}`),
-    filePath: batch.sourceFile,
-    mutationType: "z-reorder-unmatched",
-  });
-}
-
-async function patchElementBatch(projectId: string, batch: DomEditPatchBatch) {
-  const before = await readProjectFileContent(projectId, batch.sourceFile);
-  const response = await fetch(
-    `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-elements-batch/${encodeURIComponent(batch.sourceFile)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ patches: batch.patches }),
-    },
-  );
-  if (!response.ok) {
-    const rejection = await readErrorResponseBody(response);
-    throw new StudioSaveHttpError(formatPatchRejectionMessage(rejection), response.status);
-  }
-  const result = (await response.json()) as {
-    changed?: boolean;
-    matched?: boolean[];
-    content?: string;
-  };
-  if (Array.isArray(result.matched)) reportUnmatchedBatchPatches(batch, result.matched);
-  return {
-    sourceFile: batch.sourceFile,
-    changed: result.changed === true,
-    // Skip-reload safety: the persist is only provably in sync with the live
-    // DOM when the server confirmed EVERY patch target matched. A missing /
-    // short matched[] is treated as unknown (false) so the caller falls back
-    // to reloading rather than silently diverging from disk.
-    allMatched:
-      Array.isArray(result.matched) &&
-      result.matched.length === batch.patches.length &&
-      result.matched.every(Boolean),
-    before,
-    after: typeof result.content === "string" ? result.content : before,
-  };
-}
-
-/**
- * A batch is reload-skippable only when it is style-only: every operation is an
- * `inline-style` write. The z-reorder commit applies those exact styles to the
- * live iframe DOM synchronously, so persisting them adds nothing the preview
- * doesn't already show. Any other op type (attribute / text-content / …) can
- * have server-side semantics the live DOM hasn't mirrored — reload for those.
- */
-function batchesAreInlineStyleOnly(batches: DomEditPatchBatch[]): boolean {
-  return batches.every((batch) =>
-    batch.patches.every((patch) => patch.operations.every((op) => op.type === "inline-style")),
-  );
-}
-
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
-  queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
+  queueDomEditSave: <T>(save: () => Promise<T>) => Promise<T>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
@@ -168,16 +71,20 @@ export interface UseDomEditCommitsParams {
    * path, whose session is already current) so a later SDK edit doesn't
    * serialize the pre-write doc and revert the server's change. */
   forceReloadSdkSession?: () => void;
-  /** Stage 7 Step 3c: called before the server-side patch path; returns true if SDK handled it. */
+  /** Stage 7 Step 3c: called before the server-side patch path. */
   onTrySdkPersist?: (
     selection: DomEditSelection,
     operations: PatchOperation[],
     originalContent: string,
     targetPath: string,
     options?: { label?: string; coalesceKey?: string; skipRefresh?: boolean },
-  ) => Promise<boolean>;
-  /** Stage 7 §3.1: called before the server-side delete path; returns true if SDK handled it. */
-  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
+  ) => Promise<CutoverResult>;
+  /** Stage 7 §3.1: called before the server-side delete path. */
+  onTrySdkDelete?: (
+    hfId: string,
+    originalContent: string,
+    targetPath: string,
+  ) => Promise<CutoverResult>;
   /** Resolver-shadow tripwire for z-index reorder targets (telemetry-only, decoupled from cutover). */
   onReorderShadow?: (targets: string[]) => void;
 }
@@ -272,18 +179,17 @@ export function useDomEditCommits({
       // 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.
-      if (
-        onTrySdkPersist &&
-        !options?.prepareContent &&
-        (await onTrySdkPersist(selection, operations, originalContent, targetPath, {
+      if (onTrySdkPersist && !options?.prepareContent) {
+        const cutover = await onTrySdkPersist(selection, operations, originalContent, targetPath, {
           label: options?.label,
           coalesceKey: options?.coalesceKey,
           skipRefresh: options?.skipRefresh,
-        }))
-      ) {
-        // SDK handled it — its in-memory doc is already current, so do NOT
-        // forceReload (that would echo-reload the session we just wrote).
-        return;
+        });
+        if (cutoverCommittedOrThrow(cutover)) {
+          // SDK handled it — its in-memory doc is already current, so do NOT
+          // forceReload (that would echo-reload the session we just wrote).
+          return;
+        }
       }
 
       // Mark the save timestamp before the file write so the SSE file-change
@@ -382,48 +288,59 @@ export function useDomEditCommits({
 
   const commitDomEditPatchBatches: CommitDomEditPatchBatches = useCallback(
     (batches, options) =>
-      queueDomEditSave(async () => {
-        const pid = projectIdRef.current;
-        if (!pid) throw new Error("No active project");
-        const unsafeFields = batches.flatMap((batch) =>
-          batch.patches.flatMap((patch) => findUnsafeDomPatchValues(patch)),
-        );
-        if (unsafeFields.length > 0) {
-          showToast("Couldn't save edit because it contains invalid layout values", "error");
-          throw new DomEditPersistUnsafeValueError(
-            `DOM patch contains unsafe values: ${formatUnsafeFieldList(unsafeFields)}`,
-            { alreadyToasted: true },
+      queueDomEditSave(
+        // One queued transaction owns validation, persistence, history, reload,
+        // and its durable result; splitting those phases risks partial commits.
+        // fallow-ignore-next-line complexity
+        async () => {
+          const pid = projectIdRef.current;
+          if (!pid) throw new Error("No active project");
+          const unsafeFields = batches.flatMap((batch) =>
+            batch.patches.flatMap((patch) => findUnsafeDomPatchValues(patch)),
           );
-        }
+          if (unsafeFields.length > 0) {
+            showToast("Couldn't save edit because it contains invalid layout values", "error");
+            throw new DomEditPersistUnsafeValueError(
+              `DOM patch contains unsafe values: ${formatUnsafeFieldList(unsafeFields)}`,
+              { alreadyToasted: true },
+            );
+          }
 
-        domEditSaveTimestampRef.current = Date.now();
-        const results = await Promise.all(batches.map((batch) => patchElementBatch(pid, batch)));
-        const files = Object.fromEntries(
-          results
-            .filter((result) => result.changed)
-            .map((result) => [result.sourceFile, { before: result.before, after: result.after }]),
-        );
-        if (Object.keys(files).length === 0) return;
-        await editHistory.recordEdit({
-          label: options.label,
-          kind: "manual",
-          coalesceKey: options.coalesceKey,
-          files,
-        });
-        forceReloadSdkSession?.();
-        // A z-only reorder already applied its inline styles to the live iframe
-        // DOM (and the store) synchronously, so remounting the iframe here only
-        // produces a visible blink. Skip the reload when the caller asked for it
-        // AND the persist is provably in sync: style-only ops, every target
-        // matched. Any unmatched patch means the live DOM now shows state disk
-        // doesn't hold — reload so the preview reconverges. (The SSE/file-watcher
-        // reload is independently suppressed by domEditSaveTimestampRef above.)
-        const skipSafe =
-          options.skipReload === true &&
-          batchesAreInlineStyleOnly(batches) &&
-          results.every((result) => result.allMatched);
-        if (!skipSafe) reloadPreview();
-      }).catch((error) => {
+          domEditSaveTimestampRef.current = Date.now();
+          const atomicResult = await patchElementBatches(pid, batches);
+          const allMatched =
+            atomicResult.durable && atomicResult.files.every((result) => result.allMatched);
+          const files = Object.fromEntries(
+            atomicResult.files
+              .filter((result) => result.changed)
+              .map((result) => [result.sourceFile, { before: result.before, after: result.after }]),
+          );
+          const changed = Object.keys(files).length > 0;
+          if (changed) {
+            await editHistory.recordEdit({
+              label: options.label,
+              kind: "manual",
+              coalesceKey: options.coalesceKey,
+              coalesceMs: options.coalesceMs,
+              files,
+            });
+            forceReloadSdkSession?.();
+          }
+          const durable = allMatched;
+          // A z-only reorder already applied its inline styles to the live iframe
+          // DOM (and the store) synchronously, so remounting the iframe here only
+          // produces a visible blink. Skip the reload when the caller asked for it
+          // AND the persist is provably in sync: style-only ops, every target
+          // matched. Any unmatched patch means the live DOM now shows state disk
+          // doesn't hold — reload so the preview reconverges. (The SSE/file-watcher
+          // reload is independently suppressed by domEditSaveTimestampRef above.)
+          const skipSafe =
+            options.skipReload === true && batchesAreInlineStyleOnly(batches) && durable;
+          if (!durable || (changed && !skipSafe)) reloadPreview();
+          return { durable, allMatched, changed };
+        },
+      ).catch((error) => {
+        if (error instanceof AtomicElementPatchConvergenceError) reloadPreview();
         const alreadyToasted =
           (error instanceof StudioSaveHttpError ||
             error instanceof DomEditPersistUnsafeValueError) &&
@@ -458,6 +375,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
@@ -520,6 +438,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -0,0 +1,158 @@
+import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import type { DomEditPatchBatch } from "./domEditCommitTypes";
+import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
+
+export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
+  return fields.map((field) => field.path).join(", ");
+}
+
+export function getErrorDetail(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export async function readErrorResponseBody(
+  response: Response,
+): Promise<{ error?: string; fields?: string[] } | null> {
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) return null;
+  return (await response.json().catch(() => null)) as { error?: string; fields?: string[] } | null;
+}
+
+export function formatPatchRejectionMessage(
+  body: { error?: string; fields?: string[] } | null,
+): string {
+  if (!body?.error) return "Couldn't save edit";
+  return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
+}
+
+/** Human-readable identifier for a batch patch target (for the unmatched warning). */
+function describeBatchPatchTarget(patch: DomEditPatchBatch["patches"][number]): string {
+  return patch.target.id ?? patch.target.hfId ?? patch.target.selector ?? "(unaddressed)";
+}
+
+/**
+ * Surface server-reported unmatched patches. The server atomically refuses the
+ * whole multi-file gesture; the caller uses `durable: false` to roll back and
+ * reload, so report the refusal without turning it into a second failure.
+ */
+function reportUnmatchedBatchPatches(batch: DomEditPatchBatch, matched: boolean[]): void {
+  const unmatchedIds = batch.patches
+    .filter((_, index) => matched[index] === false)
+    .map(describeBatchPatchTarget);
+  if (unmatchedIds.length === 0) return;
+  console.warn(
+    `[studio] z-index reorder: server could not match ${unmatchedIds.length} patch target(s) in ` +
+      `${batch.sourceFile} (the whole z-order gesture will revert on reload):`,
+    unmatchedIds.join(", "),
+  );
+  trackStudioSaveFailure({
+    source: "dom_edit",
+    error: new Error(`Batch patch target(s) unmatched: ${unmatchedIds.join(", ")}`),
+    filePath: batch.sourceFile,
+    mutationType: "z-reorder-unmatched",
+  });
+}
+
+interface AtomicElementPatchFile {
+  sourceFile: string;
+  changed: boolean;
+  matched?: boolean[];
+  before: string;
+  after: string;
+}
+
+export class AtomicElementPatchConvergenceError extends Error {
+  constructor(message: string, options?: { cause?: unknown }) {
+    super(message, options);
+    this.name = "AtomicElementPatchConvergenceError";
+  }
+}
+
+// Keep the atomic response contract in one guard so callers do not compose validity.
+// fallow-ignore-next-line complexity
+function isAtomicElementPatchFile(value: unknown): value is AtomicElementPatchFile {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "sourceFile" in value &&
+    typeof value.sourceFile === "string" &&
+    "changed" in value &&
+    typeof value.changed === "boolean" &&
+    (!("matched" in value) ||
+      (Array.isArray(value.matched) &&
+        value.matched.every((matched) => typeof matched === "boolean"))) &&
+    "before" in value &&
+    typeof value.before === "string" &&
+    "after" in value &&
+    typeof value.after === "string" &&
+    value.changed === (value.before !== value.after)
+  );
+}
+
+// This is the single client owner for dispatching and validating the aggregate
+// atomic endpoint. Splitting validation from the request would weaken that wire contract.
+// fallow-ignore-next-line complexity
+export async function patchElementBatches(projectId: string, batches: DomEditPatchBatch[]) {
+  const body = JSON.stringify({ batches });
+  try {
+    const response = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+      },
+    );
+    if (!response.ok) {
+      const rejection = await readErrorResponseBody(response);
+      throw new StudioSaveHttpError(formatPatchRejectionMessage(rejection), response.status);
+    }
+    const result: unknown = await response.json().catch(() => null);
+    if (
+      typeof result !== "object" ||
+      result === null ||
+      !("durable" in result) ||
+      typeof result.durable !== "boolean" ||
+      !("files" in result) ||
+      !Array.isArray(result.files) ||
+      result.files.length !== batches.length ||
+      !result.files.every(isAtomicElementPatchFile) ||
+      (!result.durable && result.files.some((file) => file.changed))
+    ) {
+      throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
+    }
+    const files = result.files.map((file, index) => {
+      const batch = batches[index];
+      const matched = file.matched ?? [];
+      if (
+        !batch ||
+        file.sourceFile !== batch.sourceFile ||
+        (matched.length !== 0 && matched.length !== batch.patches.length)
+      ) {
+        throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
+      }
+      reportUnmatchedBatchPatches(batch, matched);
+      return {
+        ...file,
+        matched,
+        allMatched: matched.length === batch.patches.length && matched.every(Boolean),
+      };
+    });
+    return { durable: result.durable, files };
+  } catch (error) {
+    throw new AtomicElementPatchConvergenceError(getErrorDetail(error), { cause: error });
+  }
+}
+
+/**
+ * A batch is reload-skippable only when it is style-only: every operation is an
+ * `inline-style` write. The z-reorder commit applies those exact styles to the
+ * live iframe DOM synchronously, so persisting them adds nothing the preview
+ * doesn't already show. Any other op type (attribute / text-content / …) can
+ * have server-side semantics the live DOM hasn't mirrored — reload for those.
+ */
+export function batchesAreInlineStyleOnly(batches: DomEditPatchBatch[]): boolean {
+  return batches.every((batch) =>
+    batch.patches.every((patch) => patch.operations.every((op) => op.type === "inline-style")),
+  );
+}

package/src/hooks/useDomEditSession.test.tsx

@@ -231,7 +231,9 @@ describe("onReorderShadow source filter", () => {
         setRightPanelTab: vi.fn(),
         showToast: vi.fn(),
         refreshPreviewDocumentVersion: vi.fn(),
-        queueDomEditSave: vi.fn(async (save: () => Promise<void>) => save()),
+        queueDomEditSave: vi.fn(async <T,>(save: () => Promise<T>) => save()) as <T>(
+          save: () => Promise<T>,
+        ) => Promise<T>,
         readProjectFile,
         writeProjectFile: vi.fn(async () => {}),
         updateEditingFileContent: vi.fn(),

package/src/hooks/useDomEditSession.ts

@@ -7,7 +7,7 @@ import type { RightPanelTab } from "../utils/studioHelpers";
 import type { PatchTarget } from "../utils/sourcePatcher";
 import type { SidebarTab } from "../components/sidebar/LeftSidebar";
 import type { Composition } from "@hyperframes/sdk";
-import { sdkCutoverPersist, sdkDeletePersist } from "../utils/sdkCutover";
+import { sdkCutoverPersist, sdkDeletePersist, type PublishSdkSession } from "../utils/sdkCutover";
 import { runResolverShadow, recordResolverParity } from "../utils/sdkResolverShadow";
 import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
@@ -43,7 +43,7 @@ export interface UseDomEditSessionParams {
   setRightPanelTab: (tab: RightPanelTab) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
   refreshPreviewDocumentVersion: () => void;
-  queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
+  queueDomEditSave: <T>(save: () => Promise<T>) => Promise<T>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   updateEditingFileContent: (path: string, content: string) => void;
@@ -67,6 +67,7 @@ export interface UseDomEditSessionParams {
   selectSidebarTab?: (tab: SidebarTab) => void;
   getSidebarTab?: () => SidebarTab;
   sdkSession?: Composition | null;
+  publishSdkSession?: PublishSdkSession;
   forceReloadSdkSession?: () => void;
 }
 
@@ -108,10 +109,10 @@ export function useDomEditSession({
   selectSidebarTab,
   getSidebarTab,
   sdkSession,
+  publishSdkSession,
   forceReloadSdkSession,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
-
   // ── Selection ──
 
   const {
@@ -178,7 +179,6 @@ export function useDomEditSession({
     previewDocumentVersion,
     refreshDomEditSelectionFromPreview,
   });
-
   // ── GSAP cache (hoisted so both useGsapScriptCommits and useDomEditWiring share the same instance) ──
 
   const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
@@ -217,6 +217,7 @@ export function useDomEditSession({
     onFileContentChanged: updateEditingFileContent,
     showToast,
     sdkSession,
+    publishSdkSession,
     writeProjectFile,
     forceReloadSdkSession,
   });
@@ -229,6 +230,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -260,8 +262,13 @@ export function useDomEditSession({
       ? (selection, operations, originalContent, targetPath, options) => {
           // Resolver shadow runs regardless of the cutover flag — decoupled tripwire.
           // Pass originalContent so the runtime-node filter can suppress hf-ids
-          // absent from source (script-created nodes the SDK can't model).
-          runResolverShadow(sdkSession, selection.hfId, operations, originalContent);
+          // absent from source (script-created nodes the SDK can't model), and
+          // the paths so cross-file edits (session models only the active comp)
+          // skip instead of emitting structural element_not_found noise.
+          runResolverShadow(sdkSession, selection.hfId, operations, originalContent, {
+            targetPath,
+            compositionPath: activeCompPath,
+          });
           return sdkCutoverPersist(
             selection,
             operations,
@@ -274,6 +281,8 @@ export function useDomEditSession({
               reloadPreview,
               domEditSaveTimestampRef,
               compositionPath: activeCompPath,
+              readProjectFile,
+              publishSession: publishSdkSession,
             },
             options,
           );
@@ -287,6 +296,8 @@ export function useDomEditSession({
             reloadPreview,
             domEditSaveTimestampRef,
             compositionPath: activeCompPath,
+            readProjectFile,
+            publishSession: publishSdkSession,
           })
       : undefined,
     // Resolver shadow for the z-index reorder edit: it takes the server path (no
@@ -524,6 +535,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,

package/src/hooks/useDomEditTextCommits.ts

@@ -145,15 +145,19 @@ export function useDomEditTextCommits({
   const domTextCommitVersionRef = useRef(0);
   const domStyleCommitVersionRef = useRef(new Map<string, number>());
 
-  const { handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomHtmlAttributeCommit } =
-    useDomEditAttributeCommits({
-      activeCompPath,
-      previewIframeRef,
-      showToast,
-      domEditSelection,
-      refreshDomEditSelectionFromPreview,
-      persistDomEditOperations,
-    });
+  const {
+    handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
+    handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
+  } = useDomEditAttributeCommits({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    domEditSelection,
+    refreshDomEditSelectionFromPreview,
+    persistDomEditOperations,
+  });
 
   const handleDomStyleCommit = useCallback(
     async (property: string, value: string) => {
@@ -471,6 +475,7 @@ export function useDomEditTextCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,