@hyperframes/studio 0.7.59 → 0.7.60

package/dist/index.js

@@ -2915,6 +2915,7 @@ function FileManagerProvider({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    observeProjectFileVersion,
     updateEditingFileContent,
     revealSourceOffset,
     openSourceForSelection,
@@ -2951,6 +2952,7 @@ function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,
@@ -2984,6 +2986,7 @@ function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,
@@ -6920,6 +6923,20 @@ var StudioSaveNetworkError = class extends Error {
     this.name = "StudioSaveNetworkError";
   }
 };
+var StudioFileConflictError = class extends StudioSaveHttpError {
+  filePath;
+  currentVersion;
+  currentContent;
+  attemptedContent;
+  constructor(input) {
+    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, key) {
   const record = value;
   const property = record[key];
@@ -7093,14 +7110,14 @@ async function saveProjectFilesWithHistory({
     const writtenPaths = [];
     try {
       for (const path of changedPaths) {
-        await writeFile(path, snapshots[path].after);
+        await writeFile(path, snapshots[path].after, snapshots[path].before);
         writtenPaths.push(path);
       }
       await recordEdit({ label, kind, coalesceKey, coalesceMs, files: snapshots });
     } 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(
@@ -24480,11 +24497,11 @@ async function buildCandidateEdit(live, deps, mutate, sourceSnapshot) {
 function isCutoverResult(value) {
   return "status" in value;
 }
-async function rollbackWrite(targetPath, originalContent, deps, cause) {
+async function rollbackWrite(targetPath, originalContent, expectedCurrentContent, deps, cause) {
   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(
@@ -24497,7 +24514,7 @@ async function writeAndRecord(after, targetPath, originalContent, deps, options)
   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);
   }
@@ -24511,7 +24528,7 @@ async function writeAndRecord(after, targetPath, originalContent, deps, options)
     });
     return null;
   } catch (error) {
-    return rollbackWrite(targetPath, originalContent, deps, asCutoverError(error));
+    return rollbackWrite(targetPath, originalContent, after, deps, asCutoverError(error));
   }
 }
 function refreshCommittedEdit(after, deps, options) {
@@ -36177,33 +36194,39 @@ function FlatSelectRow({
   return /* @__PURE__ */ jsxs75("div", { className: "group flex min-h-[30px] items-center justify-between", children: [
     /* @__PURE__ */ jsx88("span", { className: `text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`, children: label }),
     /* @__PURE__ */ jsxs75("span", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs75("label", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx88(
-          "select",
-          {
-            value,
-            disabled,
-            "aria-label": ariaLabel || label || void 0,
-            onChange: (e) => {
-              track("select", trackName);
-              onChange(e.target.value);
-            },
-            className: `appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`,
-            children: renderedOptions.map((option) => /* @__PURE__ */ jsx88("option", { value: option.value, children: option.label }, option.value))
-          }
-        ),
-        /* @__PURE__ */ jsx88(
-          "svg",
-          {
-            width: "10",
-            height: "10",
-            viewBox: "0 0 10 10",
-            fill: "currentColor",
-            className: "flex-shrink-0 text-panel-text-5",
-            children: /* @__PURE__ */ jsx88("path", { d: "M2 3l3 4 3-4z" })
-          }
-        )
-      ] }),
+      /* @__PURE__ */ jsxs75(
+        "label",
+        {
+          className: `flex items-center gap-1.5 border-b pb-px ${tier === "explicitCustom" ? "border-panel-accent/30 group-hover:border-panel-accent/70" : "border-panel-border-input/50 group-hover:border-panel-border-input"}`,
+          children: [
+            /* @__PURE__ */ jsx88(
+              "select",
+              {
+                value,
+                disabled,
+                "aria-label": ariaLabel || label || void 0,
+                onChange: (e) => {
+                  track("select", trackName);
+                  onChange(e.target.value);
+                },
+                className: `appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`,
+                children: renderedOptions.map((option) => /* @__PURE__ */ jsx88("option", { value: option.value, children: option.label }, option.value))
+              }
+            ),
+            /* @__PURE__ */ jsx88(
+              "svg",
+              {
+                width: "10",
+                height: "10",
+                viewBox: "0 0 10 10",
+                fill: "currentColor",
+                className: "flex-shrink-0 text-panel-text-5",
+                children: /* @__PURE__ */ jsx88("path", { d: "M2 3l3 4 3-4z" })
+              }
+            )
+          ]
+        }
+      ),
       tier === "explicitCustom" && onReset && /* @__PURE__ */ jsx88(
         "button",
         {
@@ -36244,7 +36267,7 @@ function FlatRow({
         "span",
         {
           "data-flat-row-value": "true",
-          className: `min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${tier === "explicitCustom" ? "border-transparent group-hover:border-panel-accent/35" : "border-transparent group-hover:border-panel-border-input"}`,
+          className: `min-w-0 border-b pb-px font-mono text-[11px] ${VALUE_TIER_VALUE_CLASS[tier]} ${tier === "explicitCustom" ? "border-panel-accent/30 group-hover:border-panel-accent/70" : "border-panel-border-input/50 group-hover:border-panel-border-input"}`,
           children: /* @__PURE__ */ jsx89(
             CommitField,
             {
@@ -36680,7 +36703,7 @@ function FlatTextFieldEditor({
           children: "Weight"
         }
       ),
-      /* @__PURE__ */ jsxs77("label", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs77("label", { className: "flex items-center gap-1.5 border-b border-panel-border-input/50 pb-px hover:border-panel-border-input", children: [
         /* @__PURE__ */ jsx90(
           "select",
           {
@@ -37912,7 +37935,7 @@ function FlatTimingRow({
   };
   const cell = (label, value, onCommit) => /* @__PURE__ */ jsxs82("div", { className: "grid gap-px", children: [
     /* @__PURE__ */ jsx95("span", { className: "text-[9px] text-panel-text-4", children: label }),
-    /* @__PURE__ */ jsx95("span", { className: "border-b border-transparent font-mono text-[11px] text-panel-text-0 hover:border-panel-border-input", children: /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx95("span", { className: "border-b border-panel-border-input/50 font-mono text-[11px] text-panel-text-0 hover:border-panel-border-input", children: /* @__PURE__ */ jsx95(
       CommitField,
       {
         value,
@@ -38724,7 +38747,7 @@ function FlatColorGradingSection({
                 track("select", "Custom LUT");
                 applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
               },
-              className: "bg-transparent font-mono text-[10px] text-panel-text-3 outline-none",
+              className: "border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-none hover:border-panel-border-input",
               children: [
                 /* @__PURE__ */ jsx98("option", { value: "", children: "None" }),
                 lutAssets.map((asset) => /* @__PURE__ */ jsx98("option", { value: asset, children: asset.split("/").pop() ?? asset }, asset))
@@ -38876,7 +38899,7 @@ function FlatColorGradingSection({
               onSetApplyScope(e.target.value);
             },
             disabled: applyBusy,
-            className: "bg-transparent font-mono text-[11px] text-panel-text-0 outline-none disabled:opacity-50",
+            className: "border-b border-panel-border-input/50 bg-transparent font-mono text-[11px] text-panel-text-0 outline-none hover:border-panel-border-input disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx98("option", { value: "source-file", children: "Current file media" }),
               /* @__PURE__ */ jsx98("option", { value: "project", children: "All project media" })
@@ -40765,7 +40788,7 @@ var FileTree = memo33(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState119, useCallback as useCallback141, useRef as useRef119, useMemo as useMemo49, useEffect as useEffect100, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useState as useState119, useCallback as useCallback141, useRef as useRef119, useMemo as useMemo50, useEffect as useEffect100, useLayoutEffect as useLayoutEffect4 } from "react";
 
 // src/components/renders/useRenderQueue.ts
 import { useState as useState64, useEffect as useEffect52, useCallback as useCallback58, useRef as useRef63, useMemo as useMemo31 } from "react";
@@ -42174,7 +42197,9 @@ function usePanelLayout(initialState2) {
   const trackedSetRightPanelTab = useCallback62(
     (tab) => {
       if (tab === "design" || tab === "layers") {
-        setRightInspectorPanes((panes) => ({ ...panes, [tab]: true }));
+        setRightInspectorPanes(
+          STUDIO_FLAT_INSPECTOR_ENABLED ? { design: tab === "design", layers: tab === "layers" } : (panes) => ({ ...panes, [tab]: true })
+        );
       }
       setRightPanelTab(tab);
       trackStudioEvent("tab_switch", { panel: "right_panel", tab });
@@ -42188,6 +42213,9 @@ function usePanelLayout(initialState2) {
       return next;
     });
   }, []);
+  const setExclusiveRightInspectorPane = useCallback62((pane) => {
+    setRightInspectorPanes({ design: pane === "design", layers: pane === "layers" });
+  }, []);
   return {
     leftWidth,
     setLeftWidth,
@@ -42201,6 +42229,7 @@ function usePanelLayout(initialState2) {
     setRightPanelTab: trackedSetRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -42209,7 +42238,24 @@ function usePanelLayout(initialState2) {
 }
 
 // src/hooks/useFileManager.ts
-import { useState as useState70, useCallback as useCallback65, useRef as useRef71 } from "react";
+import { useState as useState70, useCallback as useCallback65, useMemo as useMemo34, useRef as useRef71 } from "react";
+
+// src/utils/studioFileVersion.ts
+async function studioFileContentVersion(content) {
+  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}"`;
+}
+async function studioExpectedFileVersion(versions, path, expectedContent) {
+  if (expectedContent !== void 0) return studioFileContentVersion(expectedContent);
+  return versions.get(path);
+}
+function createStudioWriteToken() {
+  return globalThis.crypto.randomUUID();
+}
 
 // src/hooks/useFileTree.ts
 import { useState as useState69, useCallback as useCallback63, useEffect as useEffect55, useMemo as useMemo33 } from "react";
@@ -42354,6 +42400,17 @@ function useFileManager({
   const projectIdRef = useRef71(projectId);
   projectIdRef.current = projectId;
   const importedFontAssetsRef = useRef71([]);
+  const fileVersionScope = useMemo34(
+    () => ({ projectId, versions: /* @__PURE__ */ new Map() }),
+    [projectId]
+  );
+  const fileVersions = fileVersionScope.versions;
+  const observeProjectFileVersion = useCallback65(
+    (path, version) => {
+      fileVersions.set(path, version);
+    },
+    [fileVersions]
+  );
   const {
     projectDir,
     fileTree,
@@ -42373,14 +42430,35 @@ function useFileManager({
       if (!response.ok) throw new Error(`Failed to read ${path}`);
       const data = await response.json();
       if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
+      fileVersions.set(path, data.version ?? response.headers.get("etag"));
       return data.content;
     },
-    [projectId]
+    [fileVersions, projectId]
   );
   const writeProjectFile = useCallback65(
-    async (path, content) => {
+    async (path, content, expectedContent) => {
       if (!projectId) throw new Error("No active project");
       const writeProjectId = projectId;
+      let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
+      if (expectedVersion === void 0) {
+        const preflight = await fetch(
+          `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`
+        );
+        if (preflight.ok) {
+          const data = await preflight.json();
+          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`);
+        }
+      }
+      const writeToken = createStudioWriteToken();
       await retryStudioSave(async () => {
         let response;
         try {
@@ -42388,7 +42466,11 @@ function useFileManager({
             `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
             {
               method: "PUT",
-              headers: { "Content-Type": "text/plain" },
+              headers: {
+                "Content-Type": "text/plain",
+                "X-Hyperframes-Write-Token": writeToken,
+                ...expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }
+              },
               body: content
             }
           );
@@ -42397,13 +42479,32 @@ function useFileManager({
             cause: error
           });
         }
+        if (response.status === 409) {
+          const conflict = await response.json().catch(() => null);
+          const currentVersion = conflict?.currentVersion ?? null;
+          if (currentVersion && conflict?.currentContent === content) {
+            fileVersions.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();
+        const version = result.version ?? response.headers.get("etag");
+        if (!version)
+          throw new Error(`Save response for ${path} did not include a content version`);
+        fileVersions.set(path, version);
       });
       if (projectIdRef.current === writeProjectId && editingPathRef.current === path) {
         setEditingFile({ path, content });
       }
     },
-    [projectId]
+    [fileVersions, projectId]
   );
   const updateEditingFileContent = useCallback65((path, content) => {
     if (editingPathRef.current === path) {
@@ -42418,9 +42519,10 @@ function useFileManager({
       );
       if (!response.ok) throw new Error(`Failed to read ${path}`);
       const data = await response.json();
+      fileVersions.set(path, data.version ?? response.headers.get("etag"));
       return typeof data.content === "string" ? data.content : "";
     },
-    [projectId]
+    [fileVersions, projectId]
   );
   const { saveRafRef, handleContentChange } = useEditorSave({
     editingPathRef,
@@ -42450,13 +42552,14 @@ function useFileManager({
         return r.json();
       }).then((data) => {
         if (data.content != null) {
+          fileVersions.set(path, data.version ?? null);
           setEditingFile({ path, content: data.content });
         }
       }).catch((err) => {
         showToast(err instanceof Error ? err.message : `Failed to load ${path}`, "error");
       });
     },
-    [showToast]
+    [fileVersions, showToast]
   );
   const openSourceForSelection = useCallback65(
     (sourceFile, target) => {
@@ -42477,6 +42580,7 @@ function useFileManager({
       }).then((r) => r.json()).then((data) => {
         if (requestId !== revealRequestIdRef.current) return;
         if (data.content != null) {
+          fileVersions.set(sourceFile, data.version ?? null);
           setEditingFile({ path: sourceFile, content: data.content });
           const match = findTagByTarget(data.content, target);
           setRevealSourceOffset(match ? match.start : null);
@@ -42484,7 +42588,7 @@ function useFileManager({
       }).catch(() => {
       });
     },
-    [editingFile?.content]
+    [editingFile?.content, fileVersions]
   );
   const uploadProjectFiles = useCallback65(
     async (files, dir) => {
@@ -42689,6 +42793,7 @@ function useFileManager({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    observeProjectFileVersion,
     updateEditingFileContent,
     // Click-to-source
     revealSourceOffset,
@@ -42751,7 +42856,8 @@ function createDomEditSaveQueue(options = {}) {
       return result;
     } catch (error) {
       consecutiveFailures += 1;
-      if (consecutiveFailures >= failureThreshold) open(error);
+      if (getStudioSaveStatusCode(error) === 409 || consecutiveFailures >= failureThreshold)
+        open(error);
       throw error;
     }
   };
@@ -42991,7 +43097,7 @@ 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", {
@@ -43136,7 +43242,10 @@ async function splitHtmlElement(projectId, targetPath, patchTarget, splitTime, n
     }
   );
   if (!response.ok) throw new Error("Split request failed");
-  return await response.json();
+  const data = await response.json();
+  const version = data.version ?? response.headers.get("etag");
+  if (!version) throw new Error("Split response did not include a content version");
+  return { ...data, version };
 }
 async function splitGsapAnimations(projectId, targetPath, originalId, newId, splitTime, elementStart, elementDuration) {
   const response = await fetch(
@@ -43164,6 +43273,7 @@ async function splitGsapAnimations(projectId, targetPath, originalId, newId, spl
   const data = await response.json();
   return {
     content: data.ok && data.after ? data.after : null,
+    version: data.version ?? response.headers.get("etag") ?? void 0,
     skippedSelectors: data.skippedSelectors
   };
 }
@@ -43174,9 +43284,9 @@ function getOriginalContent(originals, path) {
   }
   return original;
 }
-async function restoreFilesToOriginal(originals, paths, writeProjectFile) {
-  for (const path of paths) {
-    await writeProjectFile(path, getOriginalContent(originals, path));
+async function restoreFilesToOriginal(originals, snapshots, writeProjectFile) {
+  for (const [path, snapshot] of snapshots) {
+    await writeProjectFile(path, getOriginalContent(originals, path), snapshot.after);
   }
 }
 async function readOriginalFiles(pid, elements, activeCompPath) {
@@ -43189,21 +43299,28 @@ async function readOriginalFiles(pid, elements, activeCompPath) {
   }
   return originals;
 }
-async function splitElementsAtTime(pid, elements, splitTime, activeCompPath, originals, snapshots, writeProjectFile) {
+async function splitElementsAtTime(pid, elements, splitTime, activeCompPath, originals, snapshots, writeProjectFile, observeProjectFileVersion) {
   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;
 }
-async function executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile) {
+async function executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile, observeProjectFileVersion) {
   const patchTarget = buildPatchTarget(element);
   if (!patchTarget) throw new Error("Clip is missing a patchable target.");
   const targetPath = element.sourceFile || activeCompPath || "index.html";
@@ -43225,6 +43342,7 @@ async function executeSplit(pid, element, splitTime, activeCompPath, writeProjec
   if (!splitResult.changed) {
     return { targetPath, originalContent, patchedContent: originalContent, changed: false };
   }
+  observeProjectFileVersion?.(targetPath, splitResult.version);
   let patchedContent = typeof splitResult.content === "string" ? splitResult.content : originalContent;
   let skippedSelectors;
   if (element.domId) {
@@ -43239,9 +43357,10 @@ async function executeSplit(pid, element, splitTime, activeCompPath, writeProjec
         element.duration
       );
       if (gsapResult.content) patchedContent = gsapResult.content;
+      if (gsapResult.version) observeProjectFileVersion?.(targetPath, gsapResult.version);
       if (gsapResult.skippedSelectors?.length) skippedSelectors = gsapResult.skippedSelectors;
     } catch (gsapError) {
-      await writeProjectFile(targetPath, originalContent);
+      await writeProjectFile(targetPath, originalContent, patchedContent);
       throw gsapError;
     }
   }
@@ -43252,6 +43371,7 @@ function useRazorSplit({
   activeCompPath,
   showToast,
   writeProjectFile,
+  observeProjectFileVersion,
   recordEdit,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -43270,7 +43390,14 @@ function useRazorSplit({
       const pid = projectIdRef.current;
       if (!pid || !canSplitElementAt(element, splitTime)) return;
       try {
-        const { targetPath, originalContent, patchedContent, changed, skippedSelectors } = await executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile);
+        const { targetPath, originalContent, patchedContent, changed, skippedSelectors } = await executeSplit(
+          pid,
+          element,
+          splitTime,
+          activeCompPath,
+          writeProjectFile,
+          observeProjectFileVersion
+        );
         if (!changed) {
           showToast("Failed to split clip \u2014 playhead may be outside the clip", "error");
           return;
@@ -43305,6 +43432,7 @@ function useRazorSplit({
       recordEdit,
       showToast,
       writeProjectFile,
+      observeProjectFileVersion,
       domEditSaveTimestampRef,
       reloadPreview,
       forceReloadSdkSession,
@@ -43312,6 +43440,7 @@ function useRazorSplit({
     ]
   );
   const handleRazorSplitAll = useCallback68(
+    // fallow-ignore-next-line complexity
     async (splitTime) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
@@ -43333,7 +43462,8 @@ function useRazorSplit({
           activeCompPath,
           originals,
           finalSnapshots,
-          writeProjectFile
+          writeProjectFile,
+          observeProjectFileVersion
         );
         if (splitCount === 0) return;
         domEditSaveTimestampRef.current = Date.now();
@@ -43348,7 +43478,7 @@ function useRazorSplit({
         showToast(`Split ${splitCount} clips at ${splitTime.toFixed(2)}s`, "info");
       } catch (error) {
         try {
-          await restoreFilesToOriginal(originals, finalSnapshots.keys(), writeProjectFile);
+          await restoreFilesToOriginal(originals, finalSnapshots, writeProjectFile);
         } catch {
         }
         const message = error instanceof Error ? error.message : "Failed to split clips";
@@ -43360,6 +43490,7 @@ function useRazorSplit({
       recordEdit,
       showToast,
       writeProjectFile,
+      observeProjectFileVersion,
       domEditSaveTimestampRef,
       reloadPreview,
       forceReloadSdkSession,
@@ -44059,6 +44190,7 @@ function useTimelineEditing({
   timelineElements,
   showToast,
   writeProjectFile,
+  observeProjectFileVersion,
   recordEdit,
   domEditSaveTimestampRef,
   reloadPreview,
@@ -44440,6 +44572,7 @@ function useTimelineEditing({
     activeCompPath,
     showToast,
     writeProjectFile,
+    observeProjectFileVersion,
     recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,
@@ -46576,7 +46709,7 @@ 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) {
             showToast(
@@ -46854,7 +46987,7 @@ function useGroupCommits(params) {
 }
 
 // src/hooks/useGsapScriptCommits.ts
-import { useCallback as useCallback87, useMemo as useMemo34, useRef as useRef83 } from "react";
+import { useCallback as useCallback87, useMemo as useMemo35, useRef as useRef83 } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapRuntimePatch.ts
@@ -48101,7 +48234,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     if (!result) return;
     await finalizeSuccessfulMutation(pid, compositionPath, last.selection, last.mutation, targetPath, result, options);
   }, [showToast, finalizeSuccessfulMutation]);
-  const commitMutation = useMemo34(() => {
+  const commitMutation = useMemo35(() => {
     const serializeFile = (file, task) => {
       if (writeProjectFile) {
         return serializeStudioFileMutation(writeProjectFile, file, task);
@@ -48166,7 +48299,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
     },
     [activeProjectId]
   );
-  const sdkDeps = useMemo34(
+  const sdkDeps = useMemo35(
     () => writeProjectFile ? {
       editHistory: { recordEdit: editHistory.recordEdit },
       writeProjectFile,
@@ -50426,7 +50559,7 @@ function useStudioSdkSessions(projectId, activeCompPath, domEditSaveTimestampRef
 }
 
 // src/hooks/useBlockHandlers.ts
-import { useCallback as useCallback96, useMemo as useMemo35, useRef as useRef89, useState as useState76 } from "react";
+import { useCallback as useCallback96, useMemo as useMemo36, useRef as useRef89, useState as useState76 } from "react";
 
 // src/utils/blockInstaller.ts
 function getMaxZIndexFromIframe(iframe) {
@@ -50565,7 +50698,7 @@ function useBlockHandlers({
   setRightPanelTab
 }) {
   const [activeBlockParams, setActiveBlockParams] = useState76(null);
-  const blockCtx = useMemo35(
+  const blockCtx = useMemo36(
     () => ({
       activeCompPath: blockCtxDeps.activeCompPath,
       timelineElements: blockCtxDeps.timelineElements,
@@ -52255,7 +52388,7 @@ function useFrameCapture({
 }
 
 // src/hooks/useLintModal.ts
-import { useState as useState81, useCallback as useCallback104, useEffect as useEffect71, useRef as useRef96, useMemo as useMemo36 } from "react";
+import { useState as useState81, useCallback as useCallback104, useEffect as useEffect71, useRef as useRef96, useMemo as useMemo37 } from "react";
 function parseFinding(f) {
   return {
     severity: f.severity === "error" ? "error" : "warning",
@@ -52327,8 +52460,8 @@ function useLintModal(projectId, refreshKey) {
     },
     [backgroundFindings]
   );
-  const findingsByElement = useMemo36(() => groupFindings((f) => f.elementId), [groupFindings]);
-  const findingsByFile = useMemo36(() => groupFindings((f) => f.file), [groupFindings]);
+  const findingsByElement = useMemo37(() => groupFindings((f) => f.elementId), [groupFindings]);
+  const findingsByFile = useMemo37(() => groupFindings((f) => f.file), [groupFindings]);
   useEffect71(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
@@ -52687,7 +52820,7 @@ function useStudioUrlState({
 }
 
 // src/hooks/useStudioContextValue.ts
-import { useCallback as useCallback108, useMemo as useMemo37, useRef as useRef99, useState as useState84 } from "react";
+import { useCallback as useCallback108, useMemo as useMemo38, useRef as useRef99, useState as useState84 } from "react";
 function buildStudioContextValue(input) {
   return {
     projectId: input.projectId,
@@ -52712,7 +52845,7 @@ function buildStudioContextValue(input) {
   };
 }
 function useInspectorState(rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, isGestureRecording) {
-  return useMemo37(() => {
+  return useMemo38(() => {
     const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
     const layersPanelActive = STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.layers;
     const designPanelActive = STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.design;
@@ -52774,7 +52907,7 @@ function useGlobalFileDrop(handleTimelineFileDrop) {
 import { useRef as useRef100 } from "react";
 
 // src/contexts/PanelLayoutContext.tsx
-import { createContext as createContext8, useContext as useContext8, useMemo as useMemo38 } from "react";
+import { createContext as createContext8, useContext as useContext8, useMemo as useMemo39 } from "react";
 import { jsx as jsx114 } from "react/jsx-runtime";
 var PanelLayoutContext = createContext8(null);
 function usePanelLayoutContext() {
@@ -52796,6 +52929,7 @@ function PanelLayoutProvider({
     setRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -52803,7 +52937,7 @@ function PanelLayoutProvider({
   },
   children
 }) {
-  const stable = useMemo38(
+  const stable = useMemo39(
     () => ({
       leftWidth,
       setLeftWidth,
@@ -52817,6 +52951,7 @@ function PanelLayoutProvider({
       setRightPanelTab,
       rightInspectorPanes,
       toggleRightInspectorPane,
+      setExclusiveRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,
@@ -52835,6 +52970,7 @@ function PanelLayoutProvider({
       setRightPanelTab,
       rightInspectorPanes,
       toggleRightInspectorPane,
+      setExclusiveRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,
@@ -52850,7 +52986,7 @@ import {
   useCallback as useCallback109,
   useContext as useContext9,
   useEffect as useEffect73,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useState as useState85
 } from "react";
 import { jsx as jsx115 } from "react/jsx-runtime";
@@ -52880,7 +53016,7 @@ function useViewModeState() {
     setMode(mode);
     writeViewModeToUrl(mode);
   }, []);
-  return useMemo39(() => ({ viewMode, setViewMode }), [viewMode, setViewMode]);
+  return useMemo40(() => ({ viewMode, setViewMode }), [viewMode, setViewMode]);
 }
 var ViewModeContext = createContext9(null);
 function useViewMode() {
@@ -54056,7 +54192,7 @@ function useGestureCommit({
 }
 
 // src/components/editor/GestureTrailOverlay.tsx
-import { memo as memo36, useMemo as useMemo40 } from "react";
+import { memo as memo36, useMemo as useMemo41 } from "react";
 import { Fragment as Fragment36, jsx as jsx117, jsxs as jsxs101 } from "react/jsx-runtime";
 var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
   samples,
@@ -54068,7 +54204,7 @@ var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
   mode,
   accentColor = "#3CE6AC"
 }) {
-  const trailPoints = useMemo40(() => {
+  const trailPoints = useMemo41(() => {
     if (!canvasRect) return "";
     if (trail && trail.length > 1) {
       return trail.map((p) => `${p.x - canvasRect.left},${p.y - canvasRect.top}`).join(" ");
@@ -54076,7 +54212,7 @@ var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
     if (samples.length === 0) return "";
     return samples.filter((s) => s.properties.x != null && s.properties.y != null).map((s) => `${s.properties.x},${s.properties.y}`).join(" ");
   }, [samples, trail, sampleCount, canvasRect?.left, canvasRect?.top]);
-  const simplifiedPath = useMemo40(() => {
+  const simplifiedPath = useMemo41(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return "";
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -54088,7 +54224,7 @@ var GestureTrailOverlay = memo36(function GestureTrailOverlay2({
     if (pts.length === 0) return "";
     return pts.map((p) => `${p.x},${p.y}`).join(" ");
   }, [simplifiedPoints]);
-  const diamondPositions = useMemo40(() => {
+  const diamondPositions = useMemo41(() => {
     if (!simplifiedPoints || simplifiedPoints.size === 0) return [];
     const pts = [];
     for (const [pct, props] of simplifiedPoints) {
@@ -54411,7 +54547,7 @@ var CompositionsTab = memo37(function CompositionsTab2({
 });
 
 // src/components/sidebar/AssetsTab.tsx
-import { memo as memo38, useState as useState93, useCallback as useCallback115, useRef as useRef106, useMemo as useMemo42, useEffect as useEffect81 } from "react";
+import { memo as memo38, useState as useState93, useCallback as useCallback115, useRef as useRef106, useMemo as useMemo43, useEffect as useEffect81 } from "react";
 
 // src/components/sidebar/assetHelpers.ts
 function getCategory(path) {
@@ -54781,7 +54917,7 @@ function AudioRow({
 }
 
 // src/components/sidebar/GlobalAssetsView.tsx
-import { useEffect as useEffect78, useMemo as useMemo41, useState as useState90 } from "react";
+import { useEffect as useEffect78, useMemo as useMemo42, useState as useState90 } from "react";
 import { jsx as jsx121, jsxs as jsxs105 } from "react/jsx-runtime";
 function globalAssetRows(records, query = "") {
   const q = query.trim().toLowerCase();
@@ -54808,7 +54944,7 @@ function GlobalAssetsView({ searchQuery }) {
       cancelled = true;
     };
   }, []);
-  const rows = useMemo41(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
+  const rows = useMemo42(() => globalAssetRows(records ?? [], searchQuery), [records, searchQuery]);
   if (records === null) {
     return /* @__PURE__ */ jsx121("p", { className: "px-4 py-3 text-[11px] text-panel-text-5", children: "Loading global assets\u2026" });
   }
@@ -55220,8 +55356,8 @@ var AssetsTab = memo38(function AssetsTab2({
     }
   }, []);
   const elements = usePlayerStore((s) => s.elements);
-  const usedPaths = useMemo42(() => deriveUsedPaths(elements), [elements]);
-  const mediaAssets = useMemo42(() => {
+  const usedPaths = useMemo43(() => deriveUsedPaths(elements), [elements]);
+  const mediaAssets = useMemo43(() => {
     const media = assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a));
     const all = filterByUsage(media, usedPaths, usageFilter);
     if (!searchQuery) return all;
@@ -55233,7 +55369,7 @@ var AssetsTab = memo38(function AssetsTab2({
       return rec?.description?.toLowerCase().includes(q);
     });
   }, [assets, searchQuery, manifest, usageFilter, usedPaths]);
-  const categorized = useMemo42(() => {
+  const categorized = useMemo43(() => {
     const groups = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
       const cat = getCategory(a);
@@ -55248,12 +55384,12 @@ var AssetsTab = memo38(function AssetsTab2({
     }
     return groups;
   }, [mediaAssets, usedPaths]);
-  const counts = useMemo42(() => {
+  const counts = useMemo43(() => {
     const c = { all: mediaAssets.length };
     for (const cat of FILTER_ORDER) c[cat] = categorized[cat].length;
     return c;
   }, [mediaAssets, categorized]);
-  const usageCounts = useMemo42(
+  const usageCounts = useMemo43(
     () => countUsage(
       assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
       usedPaths
@@ -55500,7 +55636,7 @@ import { memo as memo39, useState as useState95, useCallback as useCallback116,
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/hooks/useBlockCatalog.ts
-import { useState as useState94, useEffect as useEffect82, useMemo as useMemo43 } from "react";
+import { useState as useState94, useEffect as useEffect82, useMemo as useMemo44 } from "react";
 
 // src/utils/blockCategories.ts
 import {
@@ -55554,7 +55690,7 @@ function useBlockCatalog() {
       cancelled = true;
     };
   }, []);
-  const filteredBlocks = useMemo43(() => {
+  const filteredBlocks = useMemo44(() => {
     let result = blocks;
     if (category) {
       result = result.filter((b) => b.category === category);
@@ -56564,7 +56700,7 @@ function StudioLeftSidebar({
 }
 
 // src/components/StudioRightPanel.tsx
-import { useCallback as useCallback134, useEffect as useEffect89, useMemo as useMemo45, useRef as useRef114 } from "react";
+import { useCallback as useCallback134, useEffect as useEffect89, useMemo as useMemo46, useRef as useRef114 } from "react";
 
 // src/components/editor/LayersPanel.tsx
 import { memo as memo41, useState as useState99, useCallback as useCallback120, useEffect as useEffect84, useRef as useRef110 } from "react";
@@ -59241,7 +59377,7 @@ function SlideshowPanel({ scenes, onPersist, onPersistNotes }) {
 }
 
 // src/components/panels/VariablesPanel.tsx
-import { memo as memo47, useCallback as useCallback130, useEffect as useEffect88, useMemo as useMemo44, useState as useState109 } from "react";
+import { memo as memo47, useCallback as useCallback130, useEffect as useEffect88, useMemo as useMemo45, useState as useState109 } from "react";
 
 // src/hooks/useVariablesPersist.ts
 import { useCallback as useCallback127 } from "react";
@@ -59945,22 +60081,22 @@ var VariablesPanel = memo47(function VariablesPanel2({
     domEditSaveTimestampRef,
     publishSdkSession
   });
-  const declarations = useMemo44(
+  const declarations = useMemo45(
     () => sdkSession?.getVariableDeclarations() ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const usage = useMemo44(
+  const usage = useMemo45(
     () => sdkSession?.getVariableUsage() ?? null,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, refreshKey, revision]
   );
-  const issues = useMemo44(
+  const issues = useMemo45(
     () => previewValues && sdkSession ? sdkSession.validateVariableValues(previewValues) : [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
   );
-  const effectiveValues = useMemo44(
+  const effectiveValues = useMemo45(
     () => sdkSession?.getVariableValues(previewValues ?? void 0) ?? {},
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sdkSession, previewValues, refreshKey, revision]
@@ -60617,6 +60753,7 @@ function StudioRightPanel({
     setRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     handlePanelResizeStart,
     handlePanelResizeMove,
     handlePanelResizeEnd
@@ -60722,7 +60859,7 @@ function StudioRightPanel({
   );
   const renderJobs = renderQueue.jobs;
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-  const slideshowScenes = useMemo45(() => {
+  const slideshowScenes = useMemo46(() => {
     try {
       const win = previewIframeRef.current?.contentWindow;
       return (win?.__clipManifest?.scenes ?? []).map((s) => ({
@@ -60742,6 +60879,10 @@ function StudioRightPanel({
       setRightPanelTab(pane);
       return;
     }
+    if (STUDIO_FLAT_INSPECTOR_ENABLED) {
+      setExclusiveRightInspectorPane(pane);
+      return;
+    }
     toggleRightInspectorPane(pane);
   };
   const handleApplyColorGradingScope = useCallback134(
@@ -61033,7 +61174,7 @@ function StudioRightPanel({
               domEditSaveTimestampRef,
               recordEdit
             }
-          ) : layersPaneOpen && designPaneOpen ? /* @__PURE__ */ jsxs124("div", { ref: splitContainerRef, className: "flex h-full min-h-0 min-w-0 flex-col", children: [
+          ) : layersPaneOpen && designPaneOpen && !STUDIO_FLAT_INSPECTOR_ENABLED ? /* @__PURE__ */ jsxs124("div", { ref: splitContainerRef, className: "flex h-full min-h-0 min-w-0 flex-col", children: [
             /* @__PURE__ */ jsx144(
               "div",
               {
@@ -61856,7 +61997,7 @@ function useProjectSignaturePoll(projectId, currentSignature, onChange) {
 }
 
 // src/components/storyboard/StoryboardLoaded.tsx
-import { useEffect as useEffect98, useMemo as useMemo48, useState as useState116 } from "react";
+import { useEffect as useEffect98, useMemo as useMemo49, useState as useState116 } from "react";
 
 // src/components/storyboard/StoryboardDirection.tsx
 import { jsx as jsx146, jsxs as jsxs126 } from "react/jsx-runtime";
@@ -62106,7 +62247,7 @@ function StoryboardScriptPanel({ script }) {
 }
 
 // src/components/storyboard/StoryboardSourceEditor.tsx
-import { useCallback as useCallback138, useEffect as useEffect95, useMemo as useMemo46, useRef as useRef118, useState as useState113 } from "react";
+import { useCallback as useCallback138, useEffect as useEffect95, useMemo as useMemo47, useRef as useRef118, useState as useState113 } from "react";
 import { marked } from "marked";
 import DOMPurify from "dompurify";
 import { jsx as jsx152, jsxs as jsxs130 } from "react/jsx-runtime";
@@ -62165,7 +62306,7 @@ function useMarkdownPreview(source) {
     const id = window.setTimeout(() => setDebounced(source), 200);
     return () => window.clearTimeout(id);
   }, [source]);
-  return useMemo46(() => {
+  return useMemo47(() => {
     const html2 = marked.parse(debounced, { async: false });
     DOMPurify.addHook("afterSanitizeAttributes", hardenLinks);
     try {
@@ -62484,7 +62625,7 @@ function StatusRow({
 }
 
 // src/components/storyboard/useFrameComments.ts
-import { useCallback as useCallback140, useEffect as useEffect97, useMemo as useMemo47, useState as useState115 } from "react";
+import { useCallback as useCallback140, useEffect as useEffect97, useMemo as useMemo48, useState as useState115 } from "react";
 
 // src/components/storyboard/frameComments.ts
 var FRAME_COMMENTS_PATH = ".hyperframes/frame-comments.json";
@@ -62565,7 +62706,7 @@ function useFrameComments(frames) {
   const setDraft = useCallback140((index, text) => {
     setDrafts((prev) => ({ ...prev, [index]: text }));
   }, []);
-  const draftCount = useMemo47(
+  const draftCount = useMemo48(
     () => Object.values(drafts).filter((text) => text.trim().length > 0).length,
     [drafts]
   );
@@ -62606,7 +62747,7 @@ function StoryboardLoaded({
   useEffect98(() => {
     void refreshPending();
   }, [data.signature, refreshPending]);
-  const sourceFiles = useMemo48(() => {
+  const sourceFiles = useMemo49(() => {
     const files = [{ path: data.path, label: data.path }];
     if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
     return files;
@@ -62958,7 +63099,7 @@ function StudioApp() {
   const isPlaying = usePlayerStore((s) => s.isPlaying);
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   const activePreviewUrl = activeCompPath ? `/api/projects/${projectId}/preview/comp/${activeCompPath}` : null;
-  const effectiveTimelineDuration = useMemo49(() => {
+  const effectiveTimelineDuration = useMemo50(() => {
     const maxEnd = timelineElements.length > 0 ? Math.max(...timelineElements.map((el) => el.start + el.duration)) : 0;
     return Math.max(timelineDuration, maxEnd);
   }, [timelineDuration, timelineElements]);
@@ -62980,7 +63121,7 @@ function StudioApp() {
     domEditSaveTimestampRef,
     setRefreshKey
   });
-  const masterCompPath = useMemo49(
+  const masterCompPath = useMemo50(
     () => resolveMasterCompositionPath(fileManager.fileTree),
     [fileManager.fileTree]
   );
@@ -63018,6 +63159,7 @@ function StudioApp() {
     timelineElements,
     showToast,
     writeProjectFile: fileManager.writeProjectFile,
+    observeProjectFileVersion: fileManager.observeProjectFileVersion,
     recordEdit: editHistory.recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,
@@ -63296,7 +63438,7 @@ function StudioApp() {
     handlePreviewIframeRef,
     refreshPreviewDocumentVersion
   });
-  const timelineToolbar = useMemo49(
+  const timelineToolbar = useMemo50(
     () => /* @__PURE__ */ jsx157(
       TimelineToolbar,
       {