fix(studio): the preview reloads when any write a commit saved is not patched on screen

packages/studio/src/hooks/gsapScriptCommitTypes.ts

@@ -44,7 +44,7 @@ export interface CommitMutationOptions {
    * error handling — a failed write still throws.
    */
   deferPreviewSync?: boolean;
-  /** Shares an in-place patch miss with the final render of one multi-write action. */
+  /** Carries a deferred write not yet on screen (no patch, or a missed one) to the final render. */
   previewFallbackLatch?: { pending: boolean };
   beforeReload?: () => void;
   /**

packages/studio/src/hooks/useGsapScriptCommits.test.tsx

@@ -30,7 +30,11 @@ vi.mock("../utils/studioTelemetry", () => ({
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import type { MutationResult } from "./gsapScriptCommitTypes";
+import type {
+  CommitMutationCall,
+  CommitMutationOptions,
+  MutationResult,
+} from "./gsapScriptCommitTypes";
 import { persistSdkSerialize } from "../utils/sdkCutover";
 import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
 import { hasStudioPendingEdits } from "../utils/studioPendingEdits";
@@ -211,6 +215,34 @@ describe("applyPreviewSync", () => {
     expect(applySoftReload).toHaveBeenCalledTimes(1);
   });
 
+  it("carries a deferred write with no instant patch into the final batch render", () => {
+    const previewFallbackLatch = { pending: false };
+    applySoftReload.mockReturnValue("applied");
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    const group = {
+      label: "Move animated layer (group)",
+      softReload: true,
+      previewFallbackLatch,
+    };
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, deferPreviewSync: true },
+      vi.fn(),
+    );
+    expect(previewFallbackLatch.pending).toBe(true);
+    expect(applySoftReload).not.toHaveBeenCalled();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { ...group, instantPatch: { selector: "#final", change: { kind: "set", props: { x: 2 } } } },
+      vi.fn(),
+    );
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+  });
+
   it("falls back immediately when a deferred patch miss has no final-render latch", () => {
     patchRuntimeTweenInPlace.mockReturnValue(false);
     applySoftReload.mockReturnValue("applied");
@@ -416,6 +448,16 @@ function renderCommitHook(
 
 const selection: DomEditSelection = { id: "a", selector: "#a" } as DomEditSelection;
 
+async function commitBatch(calls: CommitMutationCall[], options: CommitMutationOptions) {
+  const deps = renderCommitHook();
+  const batch = deps.api.commitMutation.batch;
+  if (!batch) throw new Error("batch capability missing");
+  await act(async () => {
+    await batch(calls, options);
+  });
+  return deps;
+}
+
 function mockFetchResult(over: Partial<MutationResult> = {}): void {
   const body: MutationResult = {
     ok: true,
@@ -553,6 +595,32 @@ describe("runCommit — instantPatch wiring", () => {
     expect(deps.reloadPreview).not.toHaveBeenCalled();
   });
 
+  it("batch where a write without an instant patch soft-reloads instead of patching the rest", async () => {
+    // A corner resize saves size (no in-place patch) and position (patched) in one batch.
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    applySoftReload.mockReturnValue("applied");
+    mockFetchResult({ changed: true });
+    const position = { selector: "#a", change: { kind: "set" as const, props: { x: 10 } } };
+    const deps = await commitBatch(
+      [
+        {
+          selection,
+          mutation: { type: "update-property", property: "width", value: 300 },
+          options: { label: "Resize layer" },
+        },
+        {
+          selection,
+          mutation: { type: "update-property", property: "x", value: 10 },
+          options: { label: "Resize layer", instantPatch: position },
+        },
+      ],
+      { label: "Resize layer", softReload: true },
+    );
+
+    expect(applySoftReload).toHaveBeenCalledTimes(1);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+
   it("no-op commit whose instant patch MISSES soft-reloads (never full-reloads)", async () => {
     // Server contract: gsap-mutations returns scriptText on EVERY response,
     // including changed:false — so the fallback re-runs the identical script

packages/studio/src/hooks/useGsapScriptCommits.ts

@@ -268,7 +268,8 @@ export function applyPreviewSync(
   nestedFiles?: Map<string, string> | null,
 ): void {
   const patches = instantPatchesFor(options);
-  let needsFallback = options.previewFallbackLatch?.pending === true;
+  const writtenWithoutPatch = patches.length === 0;
+  let needsFallback = options.previewFallbackLatch?.pending === true || writtenWithoutPatch;
   if (patches.length > 0) {
     const deferSeek = options.deferPreviewSync === true;
     const missed = patches.find(
@@ -410,13 +411,14 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (!result) return;
     trackKeyframeCommit(mutations, result, options, calls.map((call) => call.options));
     options.onResult?.(result);
-    // Each call brings its own fast-path patch; the batch wrote them all, so the
-    // preview sync applies them all rather than just the last call's.
-    const instantPatches = calls
-      .map(({ options: callOptions }) => callOptions.instantPatch)
-      .filter((patch) => patch !== undefined);
+    // The batch wrote every call, so patch in place only when every call brought a patch; one
+    // without (a resize's size write) needs the reload, or the preview keeps the old value.
+    const instantPatches = calls.flatMap(({ options: callOptions }) =>
+      callOptions.instantPatch ? [callOptions.instantPatch] : [],
+    );
     const { instantPatch: _instantPatch, ...batchOptions } = options;
-    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, instantPatches.length > 0 ? { ...batchOptions, instantPatches } : batchOptions);
+    const allPatched = instantPatches.length === calls.length;
+    await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, allPatched ? { ...batchOptions, instantPatches } : batchOptions);
   }, [showToast, finalizeSuccessfulMutation]);
 
   // Every GSAP-script commit is a read-modify-write of one file. Overlapping