diff --git a/packages/cli/src/server/studioServer.ts b/packages/cli/src/server/studioServer.ts
index c134fb1034..344f2acef0 100644
--- a/packages/cli/src/server/studioServer.ts
+++ b/packages/cli/src/server/studioServer.ts
@@ -24,6 +24,7 @@ import {
   createStudioApi,
   createProjectSignature,
   createBackgroundRemovalJob,
+  consumeFileWriteReceipt,
   getMimeType,
   type StudioApiAdapter,
   type ResolvedProject,
@@ -636,7 +637,10 @@ export function createStudioServer(options: StudioServerOptions): StudioServer {
   app.get("/api/events", (c) => {
     return streamSSE(c, async (stream) => {
       const listener = (path: string) => {
-        stream.writeSSE({ event: "file-change", data: JSON.stringify({ path }) }).catch(() => {});
+        const receipt = consumeFileWriteReceipt(resolve(projectDir, path));
+        stream
+          .writeSSE({ event: "file-change", data: JSON.stringify(receipt ?? { path }) })
+          .catch(() => {});
       };
       watcher.addListener(listener);
       while (true) {
diff --git a/packages/studio-server/src/helpers/fileVersion.test.ts b/packages/studio-server/src/helpers/fileVersion.test.ts
new file mode 100644
index 0000000000..3ecd0fbdb0
--- /dev/null
+++ b/packages/studio-server/src/helpers/fileVersion.test.ts
@@ -0,0 +1,29 @@
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  consumeFileWriteReceipt,
+  fileContentVersion,
+  recordFileWriteReceipt,
+  resetFileWriteReceipts,
+} from "./fileVersion";
+
+afterEach(resetFileWriteReceipts);
+
+describe("file versions and write receipts", () => {
+  it("produces a strong quoted SHA-256 ETag", () => {
+    expect(fileContentVersion("abc")).toBe(
+      '"sha256:ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"',
+    );
+  });
+
+  it("attaches each API write identity to exactly one watcher echo", () => {
+    const receipt = {
+      path: "index.html",
+      version: fileContentVersion("after"),
+      writeToken: "write-1",
+    };
+    recordFileWriteReceipt("/project/index.html", receipt);
+
+    expect(consumeFileWriteReceipt("/project/index.html")).toEqual(receipt);
+    expect(consumeFileWriteReceipt("/project/index.html")).toBeNull();
+  });
+});
diff --git a/packages/studio-server/src/helpers/fileVersion.ts b/packages/studio-server/src/helpers/fileVersion.ts
new file mode 100644
index 0000000000..ab95e866b5
--- /dev/null
+++ b/packages/studio-server/src/helpers/fileVersion.ts
@@ -0,0 +1,51 @@
+import { createHash, randomUUID } from "node:crypto";
+
+export interface FileWriteReceipt {
+  path: string;
+  version: string;
+  writeToken: string;
+}
+
+interface StoredReceipt extends FileWriteReceipt {
+  recordedAt: number;
+}
+
+const RECEIPT_TTL_MS = 10_000;
+const receipts = new Map<string, StoredReceipt[]>();
+
+/** Strong content version used as both the JSON version and HTTP ETag. */
+export function fileContentVersion(content: string): string {
+  return `"sha256:${createHash("sha256").update(content, "utf8").digest("hex")}"`;
+}
+
+export function createWriteToken(requestToken?: string): string {
+  const token = requestToken?.trim();
+  return token && token.length <= 200 ? token : randomUUID();
+}
+
+export function recordFileWriteReceipt(absPath: string, receipt: FileWriteReceipt): void {
+  const now = Date.now();
+  const current = (receipts.get(absPath) ?? []).filter(
+    (entry) => now - entry.recordedAt < RECEIPT_TTL_MS,
+  );
+  current.push({ ...receipt, recordedAt: now });
+  receipts.set(absPath, current);
+}
+
+/** Attach one API write's identity to the corresponding filesystem-watch echo. */
+export function consumeFileWriteReceipt(absPath: string): FileWriteReceipt | null {
+  const now = Date.now();
+  const current = (receipts.get(absPath) ?? []).filter(
+    (entry) => now - entry.recordedAt < RECEIPT_TTL_MS,
+  );
+  const receipt = current.shift() ?? null;
+  if (current.length > 0) receipts.set(absPath, current);
+  else receipts.delete(absPath);
+  if (!receipt) return null;
+  const { path, version, writeToken } = receipt;
+  return { path, version, writeToken };
+}
+
+export function resetFileWriteReceipts(): void {
+  receipts.clear();
+}
diff --git a/packages/studio-server/src/index.ts b/packages/studio-server/src/index.ts
index 4211df1db6..d663a21035 100644
--- a/packages/studio-server/src/index.ts
+++ b/packages/studio-server/src/index.ts
@@ -12,6 +12,11 @@ export type {
 } from "./types.js";
 export { isSafePath, walkDir } from "./helpers/safePath.js";
 export { getMimeType, MIME_TYPES } from "./helpers/mime.js";
+export {
+  consumeFileWriteReceipt,
+  fileContentVersion,
+  type FileWriteReceipt,
+} from "./helpers/fileVersion.js";
 export { buildSubCompositionHtml } from "./helpers/subComposition.js";
 export { getElementScreenshotClip, type ScreenshotClip } from "./helpers/screenshotClip.js";
 export {
diff --git a/packages/studio-server/src/routes/files.test.ts b/packages/studio-server/src/routes/files.test.ts
index 6df7cf3672..dd937e769c 100644
--- a/packages/studio-server/src/routes/files.test.ts
+++ b/packages/studio-server/src/routes/files.test.ts
@@ -13,10 +13,16 @@ import { tmpdir } from "node:os";
 import { join } from "node:path";
 import { registerFileRoutes } from "./files";
 import type { StudioApiAdapter } from "../types";
+import {
+  consumeFileWriteReceipt,
+  fileContentVersion,
+  resetFileWriteReceipts,
+} from "../helpers/fileVersion";
 
 const tempDirs: string[] = [];
 
 afterEach(() => {
+  resetFileWriteReceipts();
   for (const dir of tempDirs.splice(0)) {
     rmSync(dir, { recursive: true, force: true });
   }
@@ -80,6 +86,98 @@ describe("registerFileRoutes", () => {
     expect(response.status).toBe(404);
   });
 
+  it("returns the same strong content version in JSON and ETag", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+
+    const response = await app.request("http://localhost/projects/demo/files/index.html");
+    const payload = (await response.json()) as { content?: string; version?: string };
+
+    expect(payload.version).toBe(fileContentVersion(payload.content!));
+    expect(response.headers.get("etag")).toBe(payload.version);
+  });
+
+  it("requires If-Match for updates and preserves the current bytes", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+
+    const response = await app.request("http://localhost/projects/demo/files/index.html", {
+      method: "PUT",
+      body: "stale overwrite",
+    });
+
+    expect(response.status).toBe(428);
+    expect(readFileSync(join(projectDir, "index.html"), "utf-8")).toBe(
+      "<html><body>Preview</body></html>",
+    );
+  });
+
+  it("requires an explicit create precondition for missing files", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+
+    const response = await app.request("http://localhost/projects/demo/files/new.html", {
+      method: "PUT",
+      body: "new bytes",
+    });
+
+    expect(response.status).toBe(428);
+    expect(() => readFileSync(join(projectDir, "new.html"), "utf-8")).toThrow();
+  });
+
+  it("creates a missing file only when it is still missing", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+
+    const created = await app.request("http://localhost/projects/demo/files/new.html", {
+      method: "PUT",
+      headers: { "If-None-Match": "*" },
+      body: "new bytes",
+    });
+
+    expect(created.status).toBe(200);
+    expect(readFileSync(join(projectDir, "new.html"), "utf-8")).toBe("new bytes");
+
+    const raced = await app.request("http://localhost/projects/demo/files/new.html", {
+      method: "PUT",
+      headers: { "If-None-Match": "*" },
+      body: "overwrite",
+    });
+    const payload = (await raced.json()) as { currentContent?: string; currentVersion?: string };
+
+    expect(raced.status).toBe(409);
+    expect(payload.currentContent).toBe("new bytes");
+    expect(payload.currentVersion).toBe(fileContentVersion("new bytes"));
+    expect(readFileSync(join(projectDir, "new.html"), "utf-8")).toBe("new bytes");
+  });
+
+  it("returns 409 with the current version/content for a stale writer", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+    const current = "newer external bytes";
+    writeFileSync(join(projectDir, "index.html"), current);
+
+    const response = await app.request("http://localhost/projects/demo/files/index.html", {
+      method: "PUT",
+      headers: { "If-Match": fileContentVersion("older bytes") },
+      body: "stale overwrite",
+    });
+    const payload = (await response.json()) as {
+      currentVersion?: string;
+      currentContent?: string;
+    };
+
+    expect(response.status).toBe(409);
+    expect(payload.currentVersion).toBe(fileContentVersion(current));
+    expect(payload.currentContent).toBe(current);
+    expect(readFileSync(join(projectDir, "index.html"), "utf-8")).toBe(current);
+  });
+
   it("backs up the previous file content before PUT overwrite", async () => {
     const projectDir = createProjectDir();
     writeFileSync(join(projectDir, "index.html"), "before");
@@ -88,12 +186,29 @@ describe("registerFileRoutes", () => {
 
     const response = await app.request("http://localhost/projects/demo/files/index.html", {
       method: "PUT",
+      headers: {
+        "If-Match": fileContentVersion("before"),
+        "X-Hyperframes-Write-Token": "studio-write-1",
+      },
       body: "after",
     });
-    const payload = (await response.json()) as { path?: string; backupPath?: string };
+    const payload = (await response.json()) as {
+      path?: string;
+      version?: string;
+      writeToken?: string;
+      backupPath?: string;
+    };
 
     expect(response.status).toBe(200);
     expect(payload.path).toBe("index.html");
+    expect(payload.version).toBe(fileContentVersion("after"));
+    expect(payload.writeToken).toBe("studio-write-1");
+    expect(response.headers.get("etag")).toBe(payload.version);
+    expect(consumeFileWriteReceipt(join(projectDir, "index.html"))).toEqual({
+      path: "index.html",
+      version: payload.version,
+      writeToken: "studio-write-1",
+    });
     expect(payload.backupPath).toMatch(/^\.hyperframes\/backup\//);
     expect(readFileSync(join(projectDir, payload.backupPath!), "utf-8")).toBe("before");
     expect(readFileSync(join(projectDir, "index.html"), "utf-8")).toBe("after");
@@ -238,6 +353,41 @@ describe("registerFileRoutes", () => {
     expect(existsSync(join(projectDir, ".hyperframes", "backup"))).toBe(false);
   });
 
+  it("returns the new strong version after a split-element mutation", async () => {
+    const projectDir = createProjectDir();
+    writeFileSync(
+      join(projectDir, "index.html"),
+      '<div id="clip" data-start="0" data-duration="4">Clip</div>',
+    );
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+
+    const response = await app.request(
+      "http://localhost/projects/demo/file-mutations/split-element/index.html",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          target: { id: "clip" },
+          splitTime: 2,
+          newId: "clip-split",
+          elementStart: 0,
+          elementDuration: 4,
+        }),
+      },
+    );
+    const payload = (await response.json()) as {
+      changed?: boolean;
+      content?: string;
+      version?: string;
+    };
+
+    expect(response.status).toBe(200);
+    expect(payload.changed).toBe(true);
+    expect(payload.version).toBe(fileContentVersion(payload.content!));
+    expect(response.headers.get("etag")).toBe(payload.version);
+  });
+
   // A realistic sub-composition: markup + GSAP wrapped in a <template>, tweens
   // targeting element variables resolved from querySelector, with interleaved
   // gsap.set() calls. This is the shape every scaffolded composition uses.
@@ -465,6 +615,7 @@ const tl = gsap.timeline({ paused: true });
       ok: boolean;
       mutated?: boolean;
       after: string;
+      version?: string;
       parsed: { animations: Array<{ fromProperties?: Record<string, number | string> }> };
     };
 
@@ -472,6 +623,8 @@ const tl = gsap.timeline({ paused: true });
     expect(result.ok).toBe(true);
     expect(result.mutated).toBe(true);
     expect(result.after).toContain("opacity: 0.2");
+    expect(result.version).toBe(fileContentVersion(result.after));
+    expect(res.headers.get("etag")).toBe(result.version);
     expect(result.parsed.animations[0].fromProperties?.opacity).toBe(0.2);
     // x unchanged
     expect(result.parsed.animations[0].fromProperties?.x).toBe(-50);
diff --git a/packages/studio-server/src/routes/files.ts b/packages/studio-server/src/routes/files.ts
index 8aceab9aa7..34c7dfc3c5 100644
--- a/packages/studio-server/src/routes/files.ts
+++ b/packages/studio-server/src/routes/files.ts
@@ -22,6 +22,11 @@ import { generateWaveformCache } from "../helpers/waveform.js";
 import { validateUploadedMediaBuffer } from "../helpers/mediaValidation.js";
 import { isSafePath, resolveWithinProject } from "../helpers/safePath.js";
 import { backupPathForResponse, snapshotBeforeWrite } from "../helpers/backupJournal.js";
+import {
+  createWriteToken,
+  fileContentVersion,
+  recordFileWriteReceipt,
+} from "../helpers/fileVersion.js";
 import {
   findUnsafeDomPatchValues,
   findUnsafeMutationValues,
@@ -103,6 +108,7 @@ interface RouteContext {
     path: string;
     query: (name: string) => string | undefined;
   };
+  header: (name: string, value: string) => void;
   json: (data: unknown, status?: number) => Response;
 }
 
@@ -987,9 +993,11 @@ async function applyGsapMutations(
     after: newHtml,
     scriptText: block.scriptText,
     path: res.filePath,
+    version: fileContentVersion(newHtml),
     backupPath,
   };
   if (skippedSelectors.size > 0) responsePayload.skippedSelectors = [...skippedSelectors];
+  c.header("ETag", responsePayload.version as string);
   return c.json(responsePayload);
 }
 
@@ -1768,7 +1776,9 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
     }
 
     const content = readFileSync(res.absPath, "utf-8");
-    return c.json({ filename: res.filePath, content });
+    const version = fileContentVersion(content);
+    c.header("ETag", version);
+    return c.json({ filename: res.filePath, content, version });
   });
 
   // ── Write (overwrite) ──
@@ -1777,15 +1787,47 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
     const res = await resolveProjectFile(c, adapter);
     if ("error" in res) return res.error;
 
-    ensureDir(res.absPath);
     const body = await c.req.text();
+    const existed = existsSync(res.absPath);
+    const currentContent = existed ? readFileSync(res.absPath, "utf-8") : null;
+    const currentVersion = currentContent === null ? null : fileContentVersion(currentContent);
+    const expectedVersion = c.req.header("If-Match")?.trim() ?? null;
+    const createOnly = c.req.header("If-None-Match")?.trim() === "*";
+    if (expectedVersion === null && !createOnly) {
+      return c.json(
+        { error: "precondition required", path: res.filePath, currentVersion, currentContent },
+        428,
+      );
+    }
+    if (
+      (createOnly && existed) ||
+      (expectedVersion !== null && expectedVersion !== currentVersion)
+    ) {
+      return c.json(
+        {
+          error: "file conflict",
+          path: res.filePath,
+          currentVersion,
+          currentContent,
+        },
+        409,
+      );
+    }
+
+    ensureDir(res.absPath);
     const backup = snapshotBeforeWrite(res.project.dir, res.absPath);
     if (backup.error) console.warn(`Failed to create backup for ${res.filePath}: ${backup.error}`);
     writeFileSync(res.absPath, body, "utf-8");
+    const version = fileContentVersion(body);
+    const writeToken = createWriteToken(c.req.header("X-Hyperframes-Write-Token"));
+    recordFileWriteReceipt(res.absPath, { path: res.filePath, version, writeToken });
+    c.header("ETag", version);
 
     return c.json({
       ok: true,
       path: res.filePath,
+      version,
+      writeToken,
       backupPath: backupPathForResponse(res.project.dir, backup.backupPath),
     });
   });
@@ -1885,17 +1927,28 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
       fallbackTiming,
     );
     if (!result.matched) {
-      return c.json({ ok: false, changed: false, content: originalContent, path: ctx.filePath });
+      const version = fileContentVersion(originalContent);
+      c.header("ETag", version);
+      return c.json({
+        ok: false,
+        changed: false,
+        content: originalContent,
+        path: ctx.filePath,
+        version,
+      });
     }
     const backup = snapshotBeforeWrite(ctx.project.dir, ctx.absPath);
     if (backup.error) console.warn(`Failed to create backup for ${ctx.filePath}: ${backup.error}`);
     writeFileSync(ctx.absPath, result.html, "utf-8");
+    const version = fileContentVersion(result.html);
+    c.header("ETag", version);
     return c.json({
       ok: true,
       changed: true,
       content: result.html,
       newId: result.newId,
       path: ctx.filePath,
+      version,
       backupPath: backupPathForResponse(ctx.project.dir, backup.backupPath),
     });
   });
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index ef83585d1b..5d65340ad3 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -168,6 +168,7 @@ export function StudioApp() {
     timelineElements,
     showToast,
     writeProjectFile: fileManager.writeProjectFile,
+    observeProjectFileVersion: fileManager.observeProjectFileVersion,
     recordEdit: editHistory.recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,
diff --git a/packages/studio/src/contexts/FileManagerContext.tsx b/packages/studio/src/contexts/FileManagerContext.tsx
index 13e61f51ac..c87885ebbb 100644
--- a/packages/studio/src/contexts/FileManagerContext.tsx
+++ b/packages/studio/src/contexts/FileManagerContext.tsx
@@ -30,6 +30,7 @@ export function FileManagerProvider({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    observeProjectFileVersion,
     updateEditingFileContent,
     revealSourceOffset,
     openSourceForSelection,
@@ -69,6 +70,7 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,
@@ -102,6 +104,7 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,
diff --git a/packages/studio/src/hooks/timelineEditingHelpers.ts b/packages/studio/src/hooks/timelineEditingHelpers.ts
index 7609d8a9f5..6da878d5b1 100644
--- a/packages/studio/src/hooks/timelineEditingHelpers.ts
+++ b/packages/studio/src/hooks/timelineEditingHelpers.ts
@@ -247,7 +247,7 @@ export interface PersistTimelineEditInput {
   activeCompPath: string | null;
   label: string;
   buildPatches: (original: string, target: PatchTarget) => string;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
@@ -293,7 +293,7 @@ export interface PersistTimelineBatchEditInput {
   activeCompPath: string | null;
   label: string;
   changes: PersistTimelineBatchChange[];
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
index 7d99cc9ce1..405ab94e3f 100644
--- a/packages/studio/src/hooks/useDomEditCommits.ts
+++ b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -93,7 +93,7 @@ export interface UseDomEditCommitsParams {
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
   queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
   fileTree: string[];
@@ -292,7 +292,7 @@ export function useDomEditCommits({
         const preparedContent = options.prepareContent(patchedContent, targetPath);
         if (preparedContent !== patchedContent) {
           try {
-            await writeProjectFile(targetPath, preparedContent);
+            await writeProjectFile(targetPath, preparedContent, patchedContent);
             finalContent = preparedContent;
           } catch (error) {
             // The patch above already landed on disk — only the prepareContent
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index 130095bb1b..a7dbd510e2 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -45,7 +45,7 @@ export interface UseDomEditSessionParams {
   refreshPreviewDocumentVersion: () => void;
   queueDomEditSave: (save: () => Promise<void>) => Promise<void>;
   readProjectFile: (path: string) => Promise<string>;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   updateEditingFileContent: (path: string, content: string) => void;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
diff --git a/packages/studio/src/hooks/useEditorSave.ts b/packages/studio/src/hooks/useEditorSave.ts
index 9c3ae7763a..f9e04a9774 100644
--- a/packages/studio/src/hooks/useEditorSave.ts
+++ b/packages/studio/src/hooks/useEditorSave.ts
@@ -14,7 +14,7 @@ interface UseEditorSaveOptions {
   editingPathRef: React.RefObject<string | undefined>;
   projectIdRef: React.RefObject<string | null>;
   readProjectFile: (path: string) => Promise<string>;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
diff --git a/packages/studio/src/hooks/useFileManager.ts b/packages/studio/src/hooks/useFileManager.ts
index 9fbc8cc20f..29d015d296 100644
--- a/packages/studio/src/hooks/useFileManager.ts
+++ b/packages/studio/src/hooks/useFileManager.ts
@@ -7,8 +7,10 @@ import { findTagByTarget, type PatchTarget } from "../utils/sourcePatcher";
 import {
   createStudioSaveHttpError,
   retryStudioSave,
+  StudioFileConflictError,
   StudioSaveNetworkError,
 } from "../utils/studioSaveDiagnostics";
+import { createStudioWriteToken, studioExpectedFileVersion } from "../utils/studioFileVersion";
 import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
 
@@ -50,6 +52,10 @@ export function useFileManager({
   projectIdRef.current = projectId;
 
   const importedFontAssetsRef = useRef<ImportedFontAsset[]>([]);
+  const fileVersionsRef = useRef(new Map<string, string | null>());
+  const observeProjectFileVersion = useCallback((path: string, version: string | null) => {
+    fileVersionsRef.current.set(path, version);
+  }, []);
 
   // ── File tree ──
 
@@ -71,33 +77,83 @@ export function useFileManager({
     if (!pid) throw new Error("No active project");
     const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
     if (!response.ok) throw new Error(`Failed to read ${path}`);
-    const data = (await response.json()) as { content?: string };
+    const data = (await response.json()) as { content?: string; version?: string };
     if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
+    fileVersionsRef.current.set(path, data.version ?? response.headers.get("etag"));
     return data.content;
   }, []);
 
-  const writeProjectFile = useCallback(async (path: string, content: string): Promise<void> => {
-    const pid = projectIdRef.current;
-    if (!pid) throw new Error("No active project");
-    await retryStudioSave(async () => {
-      let response: Response;
-      try {
-        response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-          method: "PUT",
-          headers: { "Content-Type": "text/plain" },
-          body: content,
-        });
-      } catch (error) {
-        throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
-          cause: error,
-        });
+  const writeProjectFile = useCallback(
+    async (path: string, content: string, expectedContent?: string): Promise<void> => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      let expectedVersion = await studioExpectedFileVersion(
+        fileVersionsRef.current,
+        path,
+        expectedContent,
+      );
+      if (expectedVersion === undefined) {
+        const preflight = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
+        if (preflight.ok) {
+          const data = (await preflight.json()) as { content?: string; version?: string };
+          throw new StudioFileConflictError({
+            filePath: path,
+            currentVersion: data.version ?? preflight.headers.get("etag"),
+            currentContent: data.content ?? null,
+            attemptedContent: content,
+          });
+        } else if (preflight.status === 404) {
+          expectedVersion = null;
+        } else {
+          throw await createStudioSaveHttpError(preflight, `Failed to read ${path} before save`);
+        }
       }
-      if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
-    });
-    if (editingPathRef.current === path) {
-      setEditingFile({ path, content });
-    }
-  }, []);
+      const writeToken = createStudioWriteToken();
+      await retryStudioSave(async () => {
+        let response: Response;
+        try {
+          response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
+            method: "PUT",
+            headers: {
+              "Content-Type": "text/plain",
+              "X-Hyperframes-Write-Token": writeToken,
+              ...(expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }),
+            },
+            body: content,
+          });
+        } catch (error) {
+          throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
+            cause: error,
+          });
+        }
+        if (response.status === 409) {
+          const conflict = (await response.json().catch(() => null)) as {
+            currentVersion?: string | null;
+            currentContent?: string | null;
+          } | null;
+          const currentVersion = conflict?.currentVersion ?? null;
+          if (currentVersion && conflict?.currentContent === content) {
+            fileVersionsRef.current.set(path, currentVersion);
+            return;
+          }
+          throw new StudioFileConflictError({
+            filePath: path,
+            currentVersion,
+            currentContent: conflict?.currentContent ?? null,
+            attemptedContent: content,
+          });
+        }
+        if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
+        const result = (await response.json()) as { version?: string };
+        const version = result.version ?? response.headers.get("etag");
+        if (!version)
+          throw new Error(`Save response for ${path} did not include a content version`);
+        fileVersionsRef.current.set(path, version);
+      });
+      if (editingPathRef.current === path) setEditingFile({ path, content });
+    },
+    [],
+  );
 
   const updateEditingFileContent = useCallback((path: string, content: string) => {
     if (editingPathRef.current === path) {
@@ -112,7 +168,8 @@ export function useFileManager({
       `/api/projects/${pid}/files/${encodeURIComponent(path)}?optional=1`,
     );
     if (!response.ok) throw new Error(`Failed to read ${path}`);
-    const data = (await response.json()) as { content?: string };
+    const data = (await response.json()) as { content?: string; version?: string };
+    fileVersionsRef.current.set(path, data.version ?? response.headers.get("etag"));
     return typeof data.content === "string" ? data.content : "";
   }, []);
 
@@ -151,8 +208,9 @@ export function useFileManager({
           if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
           return r.json();
         })
-        .then((data: { content?: string }) => {
+        .then((data: { content?: string; version?: string }) => {
           if (data.content != null) {
+            fileVersionsRef.current.set(path, data.version ?? null);
             setEditingFile({ path, content: data.content });
           }
         })
@@ -183,9 +241,10 @@ export function useFileManager({
         signal: controller.signal,
       })
         .then((r) => r.json())
-        .then((data: { content?: string }) => {
+        .then((data: { content?: string; version?: string }) => {
           if (requestId !== revealRequestIdRef.current) return;
           if (data.content != null) {
+            fileVersionsRef.current.set(sourceFile, data.version ?? null);
             setEditingFile({ path: sourceFile, content: data.content });
             const match = findTagByTarget(data.content, target);
             setRevealSourceOffset(match ? match.start : null);
@@ -412,6 +471,7 @@ export function useFileManager({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    observeProjectFileVersion,
     updateEditingFileContent,
 
     // Click-to-source
diff --git a/packages/studio/src/hooks/usePreviewPersistence.ts b/packages/studio/src/hooks/usePreviewPersistence.ts
index b6759485b9..475f8a2b31 100644
--- a/packages/studio/src/hooks/usePreviewPersistence.ts
+++ b/packages/studio/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", {
diff --git a/packages/studio/src/hooks/useRazorSplit.test.tsx b/packages/studio/src/hooks/useRazorSplit.test.tsx
new file mode 100644
index 0000000000..57e41115d3
--- /dev/null
+++ b/packages/studio/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();
+  });
+});
diff --git a/packages/studio/src/hooks/useRazorSplit.ts b/packages/studio/src/hooks/useRazorSplit.ts
index a263cac3b6..243771aeea 100644
--- a/packages/studio/src/hooks/useRazorSplit.ts
+++ b/packages/studio/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,
diff --git a/packages/studio/src/hooks/useTimelineEditing.ts b/packages/studio/src/hooks/useTimelineEditing.ts
index 82f7f4bb94..613a218476 100644
--- a/packages/studio/src/hooks/useTimelineEditing.ts
+++ b/packages/studio/src/hooks/useTimelineEditing.ts
@@ -52,6 +52,7 @@ export function useTimelineEditing({
   timelineElements,
   showToast,
   writeProjectFile,
+  observeProjectFileVersion,
   recordEdit,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -573,6 +574,7 @@ export function useTimelineEditing({
     activeCompPath,
     showToast,
     writeProjectFile,
+    observeProjectFileVersion,
     recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,
diff --git a/packages/studio/src/hooks/useTimelineEditingTypes.ts b/packages/studio/src/hooks/useTimelineEditingTypes.ts
index 88c4b480d3..dbc877a35d 100644
--- a/packages/studio/src/hooks/useTimelineEditingTypes.ts
+++ b/packages/studio/src/hooks/useTimelineEditingTypes.ts
@@ -30,7 +30,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;
diff --git a/packages/studio/src/hooks/useTimelineGroupEditing.ts b/packages/studio/src/hooks/useTimelineGroupEditing.ts
index a7ada65439..b2b4890346 100644
--- a/packages/studio/src/hooks/useTimelineGroupEditing.ts
+++ b/packages/studio/src/hooks/useTimelineGroupEditing.ts
@@ -50,7 +50,7 @@ interface UseTimelineGroupEditingOptions {
   sdkSession?: Composition | null;
   publishSdkSession?: (session: Composition) => void;
   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 {
diff --git a/packages/studio/src/utils/domEditSaveQueue.test.ts b/packages/studio/src/utils/domEditSaveQueue.test.ts
index ddc9f9dde1..33b82444e8 100644
--- a/packages/studio/src/utils/domEditSaveQueue.test.ts
+++ b/packages/studio/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();
+  });
 });
diff --git a/packages/studio/src/utils/domEditSaveQueue.ts b/packages/studio/src/utils/domEditSaveQueue.ts
index a3024892ee..a593d51a9f 100644
--- a/packages/studio/src/utils/domEditSaveQueue.ts
+++ b/packages/studio/src/utils/domEditSaveQueue.ts
@@ -58,7 +58,8 @@ export function createDomEditSaveQueue(options: DomEditSaveQueueOptions = {}): D
       if (!breakerOpen) consecutiveFailures = 0;
     } catch (error) {
       consecutiveFailures += 1;
-      if (consecutiveFailures >= failureThreshold) open(error);
+      if (getStudioSaveStatusCode(error) === 409 || consecutiveFailures >= failureThreshold)
+        open(error);
       throw error;
     }
   };
diff --git a/packages/studio/src/utils/sdkCutover.test.ts b/packages/studio/src/utils/sdkCutover.test.ts
index f8381c347e..ec96c7bae9 100644
--- a/packages/studio/src/utils/sdkCutover.test.ts
+++ b/packages/studio/src/utils/sdkCutover.test.ts
@@ -222,7 +222,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();
   });
 
@@ -616,7 +616,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 () => {
@@ -701,7 +705,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 () => {
@@ -927,7 +935,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 () => {
@@ -1031,7 +1043,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();
   });
 
diff --git a/packages/studio/src/utils/sdkEditTransaction.ts b/packages/studio/src/utils/sdkEditTransaction.ts
index fe74ab0f53..f7efd42c5e 100644
--- a/packages/studio/src/utils/sdkEditTransaction.ts
+++ b/packages/studio/src/utils/sdkEditTransaction.ts
@@ -19,7 +19,7 @@ export interface CutoverDeps {
       files: Record<string, { before: string; after: string }>;
     }) => Promise<void>;
   };
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   reloadPreview: () => void;
   domEditSaveTimestampRef: MutableRefObject<number>;
   refresh?: (after: string) => void;
@@ -162,13 +162,14 @@ function isCutoverResult(value: CandidateEdit | CutoverResult): value is Cutover
 async function rollbackWrite(
   targetPath: string,
   originalContent: string,
+  expectedCurrentContent: string,
   deps: CutoverDeps,
   cause: Error,
 ): Promise<Error> {
   try {
     deps.domEditSaveTimestampRef.current = Date.now();
     markSelfWrite(targetPath, originalContent);
-    await deps.writeProjectFile(targetPath, originalContent);
+    await deps.writeProjectFile(targetPath, originalContent, expectedCurrentContent);
     return cause;
   } catch (rollbackError) {
     return new AggregateError(
@@ -188,7 +189,7 @@ async function writeAndRecord(
   deps.domEditSaveTimestampRef.current = Date.now();
   markSelfWrite(targetPath, after);
   try {
-    await deps.writeProjectFile(targetPath, after);
+    await deps.writeProjectFile(targetPath, after, originalContent);
   } catch (error) {
     return asCutoverError(error);
   }
@@ -202,7 +203,7 @@ async function writeAndRecord(
     });
     return null;
   } catch (error) {
-    return rollbackWrite(targetPath, originalContent, deps, asCutoverError(error));
+    return rollbackWrite(targetPath, originalContent, after, deps, asCutoverError(error));
   }
 }
 
diff --git a/packages/studio/src/utils/studioFileHistory.ts b/packages/studio/src/utils/studioFileHistory.ts
index de65254b56..b767126e88 100644
--- a/packages/studio/src/utils/studioFileHistory.ts
+++ b/packages/studio/src/utils/studioFileHistory.ts
@@ -13,7 +13,7 @@ export interface RecordEditInput {
 export interface DomEditCommitBaseParams {
   activeCompPath: string | null;
   showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: ProjectFileWriter;
   domEditSaveTimestampRef: MutableRefObject<number>;
   editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
   projectIdRef: MutableRefObject<string | null>;
@@ -21,6 +21,8 @@ export interface DomEditCommitBaseParams {
   clearDomSelection: () => void;
 }
 
+type ProjectFileWriter = (path: string, content: string, expectedContent?: string) => Promise<void>;
+
 interface SaveProjectFilesWithHistoryInput {
   projectId: string;
   label: string;
@@ -29,7 +31,7 @@ interface SaveProjectFilesWithHistoryInput {
   coalesceMs?: number;
   files: Record<string, string>;
   readFile: (path: string) => Promise<string>;
-  writeFile: (path: string, content: string) => Promise<void>;
+  writeFile: ProjectFileWriter;
   recordEdit: (entry: RecordEditInput) => Promise<void>;
 }
 
@@ -69,7 +71,7 @@ export async function saveProjectFilesWithHistory({
   const writtenPaths: string[] = [];
   try {
     for (const path of changedPaths) {
-      await writeFile(path, snapshots[path].after);
+      await writeFile(path, snapshots[path].after, snapshots[path].before);
       writtenPaths.push(path);
     }
 
@@ -77,7 +79,7 @@ export async function saveProjectFilesWithHistory({
   } catch (error) {
     try {
       for (const path of writtenPaths.reverse()) {
-        await writeFile(path, snapshots[path].before);
+        await writeFile(path, snapshots[path].before, snapshots[path].after);
       }
     } catch (rollbackError) {
       throw new AggregateError(
diff --git a/packages/studio/src/utils/studioFileVersion.test.ts b/packages/studio/src/utils/studioFileVersion.test.ts
new file mode 100644
index 0000000000..e726a35ea5
--- /dev/null
+++ b/packages/studio/src/utils/studioFileVersion.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { studioExpectedFileVersion, studioFileContentVersion } from "./studioFileVersion";
+
+describe("studioFileContentVersion", () => {
+  it("matches the strong SHA-256 ETag format used by studio-server", async () => {
+    await expect(studioFileContentVersion("abc")).resolves.toBe(
+      '"sha256:ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"',
+    );
+  });
+
+  it("keeps a known-missing version distinct from known empty content", async () => {
+    const versions = new Map<string, string | null>([["missing.html", null]]);
+
+    expect(await studioExpectedFileVersion(versions, "missing.html", "")).toBeNull();
+    expect(await studioExpectedFileVersion(versions, "empty.html", "")).toBe(
+      await studioFileContentVersion(""),
+    );
+  });
+});
diff --git a/packages/studio/src/utils/studioFileVersion.ts b/packages/studio/src/utils/studioFileVersion.ts
new file mode 100644
index 0000000000..4441da62a3
--- /dev/null
+++ b/packages/studio/src/utils/studioFileVersion.ts
@@ -0,0 +1,23 @@
+/** Browser-safe SHA-256 version matching studio-server's strong ETag format. */
+export async function studioFileContentVersion(content: string): Promise<string> {
+  const bytes = new TextEncoder().encode(content);
+  const digest = await globalThis.crypto.subtle.digest("SHA-256", bytes);
+  const hex = Array.from(new Uint8Array(digest), (byte) => byte.toString(16).padStart(2, "0")).join(
+    "",
+  );
+  return `"sha256:${hex}"`;
+}
+
+/** Prefer the version observed during the read, including a known-missing file. */
+export async function studioExpectedFileVersion(
+  versions: ReadonlyMap<string, string | null>,
+  path: string,
+  expectedContent?: string,
+): Promise<string | null | undefined> {
+  if (versions.has(path)) return versions.get(path);
+  return expectedContent === undefined ? undefined : studioFileContentVersion(expectedContent);
+}
+
+export function createStudioWriteToken(): string {
+  return globalThis.crypto.randomUUID();
+}
diff --git a/packages/studio/src/utils/studioSaveDiagnostics.test.ts b/packages/studio/src/utils/studioSaveDiagnostics.test.ts
index 07172e22bd..7d110b59e2 100644
--- a/packages/studio/src/utils/studioSaveDiagnostics.test.ts
+++ b/packages/studio/src/utils/studioSaveDiagnostics.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
 import {
+  StudioFileConflictError,
   StudioSaveHttpError,
   StudioSaveNetworkError,
   buildStudioSaveFailureProperties,
@@ -8,6 +9,23 @@ import {
 } from "./studioSaveDiagnostics";
 
 describe("studio save diagnostics", () => {
+  it("preserves conflict versions and both sides for explicit recovery UI", () => {
+    const error = new StudioFileConflictError({
+      filePath: "index.html",
+      currentVersion: '"sha256:new"',
+      currentContent: "external",
+      attemptedContent: "local",
+    });
+
+    expect(getStudioSaveStatusCode(error)).toBe(409);
+    expect(error).toMatchObject({
+      filePath: "index.html",
+      currentVersion: '"sha256:new"',
+      currentContent: "external",
+      attemptedContent: "local",
+    });
+  });
+
   it("builds save_failure properties with stable diagnostics", () => {
     const error = new StudioSaveHttpError("Failed to save index.html (503)", 503);
 
diff --git a/packages/studio/src/utils/studioSaveDiagnostics.ts b/packages/studio/src/utils/studioSaveDiagnostics.ts
index 9424aba81e..fe1f488690 100644
--- a/packages/studio/src/utils/studioSaveDiagnostics.ts
+++ b/packages/studio/src/utils/studioSaveDiagnostics.ts
@@ -35,6 +35,27 @@ export class StudioSaveNetworkError extends Error {
   }
 }
 
+export class StudioFileConflictError extends StudioSaveHttpError {
+  readonly filePath: string;
+  readonly currentVersion: string | null;
+  readonly currentContent: string | null;
+  readonly attemptedContent: string;
+
+  constructor(input: {
+    filePath: string;
+    currentVersion: string | null;
+    currentContent: string | null;
+    attemptedContent: string;
+  }) {
+    super(`Save conflict: ${input.filePath} changed outside this Studio session`, 409);
+    this.name = "StudioFileConflictError";
+    this.filePath = input.filePath;
+    this.currentVersion = input.currentVersion;
+    this.currentContent = input.currentContent;
+    this.attemptedContent = input.attemptedContent;
+  }
+}
+
 function readNumericProperty(value: object, key: string): number | undefined {
   const record = value as Record<string, unknown>;
   const property = record[key];
diff --git a/packages/studio/vite.config.ts b/packages/studio/vite.config.ts
index f4099711fa..19ecac37ac 100644
--- a/packages/studio/vite.config.ts
+++ b/packages/studio/vite.config.ts
@@ -63,9 +63,20 @@ function devProjectApi(): Plugin {
     name: "studio-dev-api",
     configureServer(server): void {
       let _api: { fetch: (req: Request) => Promise<Response> } | null = null;
+      let _studioServerModule: {
+        createStudioApi: (adapter: ReturnType<typeof createViteAdapter>) => {
+          fetch: (req: Request) => Promise<Response>;
+        };
+        consumeFileWriteReceipt?: (path: string) => {
+          path: string;
+          version: string;
+          writeToken: string;
+        } | null;
+      } | null = null;
       const getApi = async () => {
         if (!_api) {
           const mod = await server.ssrLoadModule("@hyperframes/studio-server");
+          _studioServerModule = mod as typeof _studioServerModule;
           const adapter = createViteAdapter(dataDir, server);
           _api = mod.createStudioApi(adapter);
         }
@@ -159,7 +170,12 @@ function devProjectApi(): Plugin {
             filePath.endsWith(".json"))
         ) {
           console.log(`[Studio] File changed: ${filePath}`);
-          server.ws.send({ type: "custom", event: "hf:file-change", data: { path: filePath } });
+          const receipt = _studioServerModule?.consumeFileWriteReceipt?.(filePath) ?? null;
+          server.ws.send({
+            type: "custom",
+            event: "hf:file-change",
+            data: receipt ?? { path: filePath },
+          });
         }
       });
     },