@hyperframes/studio 0.7.59 → 0.7.60

package/src/hooks/usePanelLayout.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePanelLayout } from "./usePanelLayout";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.doUnmock("../components/editor/manualEditingAvailability");
+  vi.resetModules();
+});
+
+function renderPanelLayoutWith(hook: typeof usePanelLayout) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  let current: ReturnType<typeof usePanelLayout> | null = null;
+
+  function Harness() {
+    current = hook();
+    return null;
+  }
+
+  act(() => {
+    root.render(React.createElement(Harness));
+  });
+
+  return {
+    getState: (): ReturnType<typeof usePanelLayout> => {
+      if (!current) throw new Error("usePanelLayout did not render");
+      return current;
+    },
+    unmount: () => act(() => root.unmount()),
+  };
+}
+
+function renderPanelLayout() {
+  return renderPanelLayoutWith(usePanelLayout);
+}
+
+describe("usePanelLayout — right inspector panes", () => {
+  it("toggleRightInspectorPane independently flips one pane, allowing both open at once", () => {
+    const harness = renderPanelLayout();
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    act(() => harness.getState().toggleRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    harness.unmount();
+  });
+
+  it("toggleRightInspectorPane refuses to turn off the last remaining pane", () => {
+    const harness = renderPanelLayout();
+    act(() => harness.getState().toggleRightInspectorPane("design"));
+    // Only "design" was on; toggling it off would leave both false — guarded.
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+    harness.unmount();
+  });
+
+  it("setExclusiveRightInspectorPane is radio-style — selecting one turns the other off", () => {
+    const harness = renderPanelLayout();
+    act(() => harness.getState().toggleRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    act(() => harness.getState().setExclusiveRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: false });
+
+    act(() => harness.getState().setExclusiveRightInspectorPane("design"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    harness.unmount();
+  });
+
+  it("setRightPanelTab additively opens a pane when the flat inspector is off (legacy behavior)", async () => {
+    vi.resetModules();
+    vi.doMock("../components/editor/manualEditingAvailability", async () => {
+      const actual = await vi.importActual<
+        typeof import("../components/editor/manualEditingAvailability")
+      >("../components/editor/manualEditingAvailability");
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: false };
+    });
+    const { usePanelLayout: usePanelLayoutFlatOff } = await import("./usePanelLayout");
+    const harness = renderPanelLayoutWith(usePanelLayoutFlatOff);
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    act(() => harness.getState().setRightPanelTab("layers"));
+    // Legacy (split-view) behavior: additive, both panes end up open.
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    harness.unmount();
+  });
+
+  it("setRightPanelTab is flat-aware: exclusivity holds for callers other than a direct in-panel tab click", async () => {
+    vi.resetModules();
+    vi.doMock("../components/editor/manualEditingAvailability", async () => {
+      const actual = await vi.importActual<
+        typeof import("../components/editor/manualEditingAvailability")
+      >("../components/editor/manualEditingAvailability");
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: true };
+    });
+    const { usePanelLayout: usePanelLayoutFlatOn } = await import("./usePanelLayout");
+    const harness = renderPanelLayoutWith(usePanelLayoutFlatOn);
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    // Element-select / block-params-close / header Inspector-button callers
+    // all reach setRightPanelTab directly, not through the in-panel tab
+    // click's own setExclusiveRightInspectorPane call — this must still
+    // enforce exclusivity under the flat flag, or both tabs end up
+    // highlighted while only one pane actually renders.
+    act(() => harness.getState().setRightPanelTab("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: false });
+
+    harness.unmount();
+  });
+});

package/src/hooks/usePanelLayout.ts

@@ -6,6 +6,7 @@ import type {
 } from "../utils/studioHelpers";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { STUDIO_FLAT_INSPECTOR_ENABLED } from "../components/editor/manualEditingAvailability";
 
 export interface InitialPanelLayoutState {
   rightCollapsed?: boolean | null;
@@ -80,7 +81,20 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
   const trackedSetRightPanelTab = useCallback(
     (tab: RightPanelTab) => {
       if (tab === "design" || tab === "layers") {
-        setRightInspectorPanes((panes) => ({ ...panes, [tab]: true }));
+        // Flat inspector: Layers always renders full-height by itself (see
+        // StudioRightPanel's render gate), so this MUST land on the same
+        // radio-style exclusivity setExclusiveRightInspectorPane enforces for
+        // the direct in-panel tab click — every OTHER path that reaches here
+        // (element select, closing block-params, the header Inspector
+        // button, and this function's own callers outside an active
+        // inspector tab) would otherwise additively leave both panes `true`
+        // and reproduce the "both tabs highlight, only one renders" bug this
+        // still-additive branch used to cause under the flat flag.
+        setRightInspectorPanes(
+          STUDIO_FLAT_INSPECTOR_ENABLED
+            ? { design: tab === "design", layers: tab === "layers" }
+            : (panes) => ({ ...panes, [tab]: true }),
+        );
       }
       setRightPanelTab(tab);
       trackStudioEvent("tab_switch", { panel: "right_panel", tab });
@@ -96,6 +110,14 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     });
   }, []);
 
+  // Radio-style variant for the flat inspector: Layers always renders full-
+  // height by itself there (never split-shared with Design), so leaving both
+  // panes independently toggleable would highlight both tabs as "active"
+  // while only one actually shows. Selecting one turns the other off.
+  const setExclusiveRightInspectorPane = useCallback((pane: RightInspectorPane) => {
+    setRightInspectorPanes({ design: pane === "design", layers: pane === "layers" });
+  }, []);
+
   return {
     leftWidth,
     setLeftWidth,
@@ -109,6 +131,7 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     setRightPanelTab: trackedSetRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,

package/src/hooks/usePreviewPersistence.ts

@@ -133,7 +133,10 @@ export function usePreviewPersistence({
   if (!domEditSaveQueueRef.current) {
     domEditSaveQueueRef.current = createDomEditSaveQueue({
       onOpen: (event) => {
-        const message = "Auto-save is paused. Check your connection.";
+        const message =
+          event.statusCode === 409
+            ? "Save paused: this file changed elsewhere. Reload and review the latest version before reapplying your edit."
+            : "Auto-save is paused. Check your connection.";
         setDomEditSaveQueuePaused(message);
         showToastRef.current(message, "error");
         trackStudioEvent("save_queue_paused", {

package/src/hooks/useRazorSplit.history.test.tsx

@@ -76,9 +76,10 @@ function mountRazorSplit(opts: { gsap?: boolean; previewStamp?: boolean } = {}):
         // Mirror the server: rewrites the GSAP script for the new id, writes to
         // disk, returns the final content.
         disk["index.html"] = SPLIT_GSAP;
-        return new Response(JSON.stringify({ ok: true, after: SPLIT_GSAP }), {
+        const version = `"test-gsap-${SPLIT_GSAP.length}"`;
+        return new Response(JSON.stringify({ ok: true, after: SPLIT_GSAP, version }), {
           status: 200,
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", ETag: version },
         });
       }
       // The fixture has no GSAP script — mirror the server's 400 response.
@@ -89,9 +90,16 @@ function mountRazorSplit(opts: { gsap?: boolean; previewStamp?: boolean } = {}):
     }
     if (u.includes("/file-mutations/split-element/")) {
       disk["index.html"] = SPLIT;
+      const version = `"test-split-${SPLIT.length}"`;
       return new Response(
-        JSON.stringify({ ok: true, changed: true, content: SPLIT, newId: "clip1-split" }),
-        { status: 200, headers: { "Content-Type": "application/json" } },
+        JSON.stringify({
+          ok: true,
+          changed: true,
+          content: SPLIT,
+          newId: "clip1-split",
+          version,
+        }),
+        { status: 200, headers: { "Content-Type": "application/json", ETag: version } },
       );
     }
     if (u.includes("/files/")) {

package/src/hooks/useRazorSplit.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../player";
+import { useRazorSplit } from "./useRazorSplit";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+describe("useRazorSplit mutation versions", () => {
+  afterEach(() => vi.restoreAllMocks());
+
+  it("observes each out-of-band mutation version before the OCC writer runs", async () => {
+    const original = '<div id="clip" data-start="0" data-duration="4">Clip</div>';
+    const htmlSplit =
+      '<div id="clip" data-start="0" data-duration="2">Clip</div><div id="clip-split" data-start="2" data-duration="2">Clip</div>';
+    const final = `${htmlSplit}<script>window.__timelines = {}</script>`;
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const url = String(input);
+      if (url.includes("/files/")) return jsonResponse({ content: original });
+      if (url.includes("/file-mutations/split-element/")) {
+        return jsonResponse({ ok: true, changed: true, content: htmlSplit, version: '"v-html"' });
+      }
+      if (url.includes("/gsap-mutations/")) {
+        return jsonResponse({ ok: true, changed: true, after: final, version: '"v-gsap"' });
+      }
+      throw new Error(`Unexpected request: ${url}`);
+    });
+
+    const order: string[] = [];
+    const observeProjectFileVersion = vi.fn((path: string, version: string | null) => {
+      order.push(`observe:${path}:${version}`);
+    });
+    const writeProjectFile = vi.fn(async () => {
+      order.push("write");
+    });
+    const recordEdit = vi.fn().mockResolvedValue(undefined);
+    let split: ((element: TimelineElement, splitTime: number) => Promise<void>) | undefined;
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+
+    function Harness() {
+      split = useRazorSplit({
+        projectId: "p1",
+        activeCompPath: "index.html",
+        showToast: vi.fn(),
+        writeProjectFile,
+        observeProjectFileVersion,
+        recordEdit,
+        domEditSaveTimestampRef: { current: 0 },
+        reloadPreview: vi.fn(),
+      }).handleRazorSplit;
+      return null;
+    }
+
+    await act(async () => root.render(React.createElement(Harness)));
+    await act(async () => {
+      await split?.(
+        {
+          id: "clip",
+          domId: "clip",
+          hfId: "clip",
+          tag: "div",
+          start: 0,
+          duration: 4,
+          track: 0,
+          timingSource: "authored",
+        },
+        2,
+      );
+    });
+
+    expect(order).toEqual(['observe:index.html:"v-html"', 'observe:index.html:"v-gsap"', "write"]);
+    expect(writeProjectFile).toHaveBeenCalledWith("index.html", final, original);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+
+    act(() => root.unmount());
+    container.remove();
+  });
+});

package/src/hooks/useRazorSplit.testHelpers.ts

@@ -36,10 +36,11 @@ export function createSplitFetchMock(
       onSplit?.(path, JSON.parse(String(init?.body)) as SplitBody);
       // Return content that differs from the original so `changed` is true.
       const after = `${disk[path]}<!--split-->`;
+      const version = `"test-${path}-${after.length}"`;
       disk[path] = after; // server writes the split to disk
-      return new Response(JSON.stringify({ ok: true, changed: true, content: after }), {
+      return new Response(JSON.stringify({ ok: true, changed: true, content: after, version }), {
         status: 200,
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ETag: version },
       });
     }
     if (u.includes("/files/")) {

package/src/hooks/useRazorSplit.ts

@@ -16,7 +16,8 @@ interface UseRazorSplitOptions {
   projectId: string | null;
   activeCompPath: string | null;
   showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
+  observeProjectFileVersion?: (path: string, version: string | null) => void;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   reloadPreview: () => void;
@@ -48,7 +49,7 @@ async function splitHtmlElement(
   newId: string,
   elementStart: number,
   elementDuration: number,
-): Promise<{ ok: boolean; changed?: boolean; content?: string }> {
+): Promise<{ ok: boolean; changed?: boolean; content?: string; version: string }> {
   const response = await fetch(
     `/api/projects/${projectId}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
     {
@@ -64,9 +65,18 @@ async function splitHtmlElement(
     },
   );
   if (!response.ok) throw new Error("Split request failed");
-  return (await response.json()) as { ok: boolean; changed?: boolean; content?: string };
+  const data = (await response.json()) as {
+    ok: boolean;
+    changed?: boolean;
+    content?: string;
+    version?: string;
+  };
+  const version = data.version ?? response.headers.get("etag");
+  if (!version) throw new Error("Split response did not include a content version");
+  return { ...data, version };
 }
 
+// fallow-ignore-next-line complexity
 async function splitGsapAnimations(
   projectId: string,
   targetPath: string,
@@ -75,7 +85,7 @@ async function splitGsapAnimations(
   splitTime: number,
   elementStart: number,
   elementDuration: number,
-): Promise<{ content: string | null; skippedSelectors?: string[] }> {
+): Promise<{ content: string | null; version?: string; skippedSelectors?: string[] }> {
   const response = await fetch(
     `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(targetPath)}`,
     {
@@ -101,10 +111,12 @@ async function splitGsapAnimations(
   const data = (await response.json()) as {
     ok?: boolean;
     after?: string;
+    version?: string;
     skippedSelectors?: string[];
   };
   return {
     content: data.ok && data.after ? data.after : null,
+    version: data.version ?? response.headers.get("etag") ?? undefined,
     skippedSelectors: data.skippedSelectors,
   };
 }
@@ -119,11 +131,11 @@ function getOriginalContent(originals: ReadonlyMap<string, string>, path: string
 
 async function restoreFilesToOriginal(
   originals: ReadonlyMap<string, string>,
-  paths: Iterable<string>,
-  writeProjectFile: (path: string, content: string) => Promise<void>,
+  snapshots: ReadonlyMap<string, { before: string; after: string }>,
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
 ): Promise<void> {
-  for (const path of paths) {
-    await writeProjectFile(path, getOriginalContent(originals, path));
+  for (const [path, snapshot] of snapshots) {
+    await writeProjectFile(path, getOriginalContent(originals, path), snapshot.after);
   }
 }
 
@@ -149,17 +161,25 @@ async function splitElementsAtTime(
   activeCompPath: string | null,
   originals: ReadonlyMap<string, string>,
   snapshots: Map<string, { before: string; after: string }>,
-  writeProjectFile: (path: string, content: string) => Promise<void>,
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+  observeProjectFileVersion?: (path: string, version: string | null) => void,
 ): Promise<number> {
   let count = 0;
   for (const element of elements) {
-    const result = await executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile);
+    const result = await executeSplit(
+      pid,
+      element,
+      splitTime,
+      activeCompPath,
+      writeProjectFile,
+      observeProjectFileVersion,
+    );
     if (!result.changed) continue;
     snapshots.set(result.targetPath, {
       before: getOriginalContent(originals, result.targetPath),
       after: result.patchedContent,
     });
-    await writeProjectFile(result.targetPath, result.patchedContent);
+    await writeProjectFile(result.targetPath, result.patchedContent, result.patchedContent);
     count++;
   }
   return count;
@@ -171,7 +191,8 @@ async function executeSplit(
   element: TimelineElement,
   splitTime: number,
   activeCompPath: string | null,
-  writeProjectFile: (path: string, content: string) => Promise<void>,
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+  observeProjectFileVersion?: (path: string, version: string | null) => void,
 ): Promise<{
   targetPath: string;
   originalContent: string;
@@ -209,6 +230,7 @@ async function executeSplit(
   if (!splitResult.changed) {
     return { targetPath, originalContent, patchedContent: originalContent, changed: false };
   }
+  observeProjectFileVersion?.(targetPath, splitResult.version);
 
   let patchedContent =
     typeof splitResult.content === "string" ? splitResult.content : originalContent;
@@ -226,11 +248,12 @@ async function executeSplit(
         element.duration,
       );
       if (gsapResult.content) patchedContent = gsapResult.content;
+      if (gsapResult.version) observeProjectFileVersion?.(targetPath, gsapResult.version);
       if (gsapResult.skippedSelectors?.length) skippedSelectors = gsapResult.skippedSelectors;
     } catch (gsapError) {
       // GSAP mutation failed — the HTML split already wrote to disk.
       // Restore the original content to avoid a corrupt half-split state.
-      await writeProjectFile(targetPath, originalContent);
+      await writeProjectFile(targetPath, originalContent, patchedContent);
       throw gsapError;
     }
   }
@@ -243,6 +266,7 @@ export function useRazorSplit({
   activeCompPath,
   showToast,
   writeProjectFile,
+  observeProjectFileVersion,
   recordEdit,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -265,7 +289,14 @@ export function useRazorSplit({
 
       try {
         const { targetPath, originalContent, patchedContent, changed, skippedSelectors } =
-          await executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile);
+          await executeSplit(
+            pid,
+            element,
+            splitTime,
+            activeCompPath,
+            writeProjectFile,
+            observeProjectFileVersion,
+          );
 
         if (!changed) {
           showToast("Failed to split clip — playhead may be outside the clip", "error");
@@ -305,6 +336,7 @@ export function useRazorSplit({
       recordEdit,
       showToast,
       writeProjectFile,
+      observeProjectFileVersion,
       domEditSaveTimestampRef,
       reloadPreview,
       forceReloadSdkSession,
@@ -312,8 +344,8 @@ export function useRazorSplit({
     ],
   );
 
-  // fallow-ignore-next-line complexity
   const handleRazorSplitAll = useCallback(
+    // fallow-ignore-next-line complexity
     async (splitTime: number) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -338,6 +370,7 @@ export function useRazorSplit({
           originals,
           finalSnapshots,
           writeProjectFile,
+          observeProjectFileVersion,
         );
         if (splitCount === 0) return;
 
@@ -358,7 +391,7 @@ export function useRazorSplit({
         // Best-effort rollback — a failing restore write must not swallow the
         // original error's toast, which is what tells the user the split failed.
         try {
-          await restoreFilesToOriginal(originals, finalSnapshots.keys(), writeProjectFile);
+          await restoreFilesToOriginal(originals, finalSnapshots, writeProjectFile);
         } catch {
           /* leave disk as-is; the original failure is reported below */
         }
@@ -371,6 +404,7 @@ export function useRazorSplit({
       recordEdit,
       showToast,
       writeProjectFile,
+      observeProjectFileVersion,
       domEditSaveTimestampRef,
       reloadPreview,
       forceReloadSdkSession,

package/src/hooks/useTimelineEditing.ts

@@ -46,6 +46,7 @@ export function useTimelineEditing({
   timelineElements,
   showToast,
   writeProjectFile,
+  observeProjectFileVersion,
   recordEdit,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -503,6 +504,7 @@ export function useTimelineEditing({
     activeCompPath,
     showToast,
     writeProjectFile,
+    observeProjectFileVersion,
     recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,

package/src/hooks/useTimelineEditingTypes.ts

@@ -31,7 +31,8 @@ export interface UseTimelineEditingOptions {
   activeCompPath: string | null;
   timelineElements: TimelineElement[];
   showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
+  observeProjectFileVersion?: (path: string, version: string | null) => void;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: MutableRefObject<number>;
   reloadPreview: () => void;

package/src/hooks/useTimelineGroupEditing.ts

@@ -60,7 +60,7 @@ interface UseTimelineGroupEditingOptions {
   sdkSession?: Composition | null;
   publishSdkSession?: PublishSdkSession;
   showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
 }
 
 function targetPathFor(element: TimelineElement, activeCompPath: string | null): string {

package/src/utils/domEditSaveQueue.test.ts

@@ -114,4 +114,23 @@ describe("dom edit save queue", () => {
     expect(onOpen).not.toHaveBeenCalled();
     queue.destroy();
   });
+
+  it("pauses immediately on a file conflict instead of retrying stale work", async () => {
+    const onOpen = vi.fn();
+    const queue = createDomEditSaveQueue({ failureThreshold: 5, onOpen });
+
+    await expect(
+      queue.enqueue(async () => {
+        throw new StudioSaveHttpError("File changed elsewhere", 409);
+      }),
+    ).rejects.toThrow("File changed elsewhere");
+
+    expect(onOpen).toHaveBeenCalledWith({
+      consecutiveFailures: 1,
+      errorMessage: "File changed elsewhere",
+      statusCode: 409,
+    });
+    await expect(queue.enqueue(async () => {})).rejects.toThrow("Auto-save is paused");
+    queue.destroy();
+  });
 });

package/src/utils/domEditSaveQueue.ts

@@ -59,7 +59,8 @@ export function createDomEditSaveQueue(options: DomEditSaveQueueOptions = {}): D
       return result;
     } catch (error) {
       consecutiveFailures += 1;
-      if (consecutiveFailures >= failureThreshold) open(error);
+      if (getStudioSaveStatusCode(error) === 409 || consecutiveFailures >= failureThreshold)
+        open(error);
       throw error;
     }
   };

package/src/utils/sdkCutover.test.ts

@@ -223,7 +223,7 @@ describe("sdkCutoverPersist", () => {
       target: "hf-abc",
       styles: { color: "red", opacity: "0.5" },
     });
-    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html></html>");
+    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html></html>", "before");
     expect(deps.reloadPreview).toHaveBeenCalled();
   });
 
@@ -852,7 +852,11 @@ describe("sdkDeletePersist", () => {
     const result = await sdkDeletePersist("hf-abc", "before", "/comp.html", session, deps);
     expect(result.status).toBe("committed");
     expect(session!.removeElement).toHaveBeenCalledWith("hf-abc");
-    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html>after</html>");
+    expect(deps.writeProjectFile).toHaveBeenCalledWith(
+      "/comp.html",
+      "<html>after</html>",
+      "before",
+    );
   });
 
   it("records edit history with before/after diff", async () => {
@@ -937,7 +941,11 @@ describe("sdkTimingPersist", () => {
       duration: 5,
       trackIndex: 1,
     });
-    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html>after</html>");
+    expect(deps.writeProjectFile).toHaveBeenCalledWith(
+      "/comp.html",
+      "<html>after</html>",
+      "<html>before</html>",
+    );
   });
 
   it("captures before-state before setTiming dispatch", async () => {
@@ -1158,7 +1166,11 @@ describe("sdkGsapTweenPersist", () => {
       "hf-box",
       expect.objectContaining({ method: "to" }),
     );
-    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html>after</html>");
+    expect(deps.writeProjectFile).toHaveBeenCalledWith(
+      "/comp.html",
+      "<html>after</html>",
+      "<html>before</html>",
+    );
   });
 
   it("returns false for kind=add when element not found", async () => {
@@ -1262,7 +1274,11 @@ describe("sdkGsapKeyframePersist", () => {
       position: 50,
       value: { opacity: 0.5 },
     });
-    expect(deps.writeProjectFile).toHaveBeenCalledWith("/comp.html", "<html>after</html>");
+    expect(deps.writeProjectFile).toHaveBeenCalledWith(
+      "/comp.html",
+      "<html>after</html>",
+      "<html>before</html>",
+    );
     expect(deps.reloadPreview).toHaveBeenCalled();
   });