@hyperframes/studio 0.7.57 → 0.7.59

package/src/hooks/useElementLifecycleOps.ts

@@ -11,11 +11,24 @@ import {
   readHfId,
   type DomEditSelection,
 } from "../components/editor/domEditing";
+import { LAYER_REVEAL_PRIOR_POSITION_ATTR } from "../player/lib/timelineElementHelpers";
+import {
+  beginLayerRevealCommit,
+  beginLayerZPersist,
+  completeLayerRevealCommit,
+  rollbackLayerRevealCommit,
+  type LayerRevealCommitOwnership,
+} from "../components/editor/useLayerRevealOverride";
 import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditCommitTypes";
+import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 
 interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
-  /** Route delete through SDK when session resolves the hf-id; returns true if handled. */
-  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
+  /** Route delete through SDK when session resolves the hf-id. */
+  onTrySdkDelete?: (
+    hfId: string,
+    originalContent: string,
+    targetPath: string,
+  ) => Promise<CutoverResult>;
   /** Resolver-shadow tripwire for the reordered targets (telemetry-only, decoupled from cutover). */
   onReorderShadow?: (targets: string[]) => void;
   /** Resync the SDK session after a server-fallback delete. */
@@ -25,6 +38,36 @@ interface UseElementLifecycleOpsParams extends DomEditCommitBaseParams {
   onElementDeleted?: (selection: DomEditSelection) => void;
 }
 
+// One coalesce key per z-reorder gesture. A monotonic counter — NOT Date.now()
+// / Math.random(), which the determinism rules forbid — matches the
+// laneChangeGestureSeq precedent in timelineClipDragCommit.ts: the key only has
+// to be unique per gesture and identical across the gesture's records.
+let zReorderGestureSeq = 0;
+
+/**
+ * Undo coalesce key for ONE z-reorder gesture — unique per call. The key
+ * carries the action kind + element ids for debuggability, plus a gesture
+ * sequence so two SEPARATE user actions (even the same action on the same
+ * selection) never share a key. That uniqueness is what makes the unbounded
+ * per-gesture coalesce window (see handleDomZIndexReorderCommit) safe: the
+ * fold can only ever merge records of the SAME gesture.
+ *
+ * Exported as THE single implementation of the key: the canvas z-order wiring
+ * (PreviewOverlays) mints it once per gesture and passes the same instance to
+ * both the z persist and the timeline lane mirror (useCanvasZOrderTimelineMirror)
+ * so editHistory folds the z write and the track write into one undo entry —
+ * recomputing the key per record would silently split the undo.
+ */
+export function zReorderCoalesceKey(
+  entries: ReadonlyArray<{ element: HTMLElement; id?: string; selector?: string }>,
+  actionKind?: string,
+): string {
+  const ids = entries
+    .map((e) => e.id ?? e.selector ?? e.element.getAttribute("data-hf-id") ?? "el")
+    .join(":");
+  return `z-reorder:${actionKind ?? "reorder"}:${ids}:g${zReorderGestureSeq++}`;
+}
+
 export function useElementLifecycleOps({
   activeCompPath,
   showToast,
@@ -59,7 +102,7 @@ export function useElementLifecycleOps({
 
         if (onTrySdkDelete && selection.hfId) {
           const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
-          if (handled) {
+          if (cutoverCommittedOrThrow(handled)) {
             clearDomSelection();
             usePlayerStore.getState().setSelectedElementId(null);
             showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
@@ -130,11 +173,11 @@ export function useElementLifecycleOps({
     ],
   );
 
-  // ponytail: z-index reorder folds every element patch for a source file in memory and sends
-  // one patch-elements-batch request, so each file is persisted with one atomic disk write.
+  // Z-index reorder folds patches by source file, then sends one aggregate cross-file
+  // patch-element-batches request. The server refuses the whole gesture on any unmatched
+  // target and rolls back earlier file writes if a later write fails.
   // No SDK reorder/reparent op exists; DOM sibling order stays server-authoritative if ever needed.
   const handleDomZIndexReorderCommit = useCallback(
-    // fallow-ignore-next-line complexity
     (
       entries: Array<{
         element: HTMLElement;
@@ -149,88 +192,143 @@ export function useElementLifecycleOps({
       actionKind?: string,
     ) => {
       if (entries.length === 0) return Promise.resolve();
-      // Resolver shadow (telemetry-only, decoupled from cutover): record whether
-      // the SDK resolves each reordered element — the reorderElements op's targets.
-      onReorderShadow?.(
-        entries.map((e) => readHfId(e.element)).filter((id): id is string => id != null),
-      );
-      // The default key carries the action kind so two DIFFERENT actions on the
-      // same element set (e.g. "bring-forward" then "send-backward" within the
-      // coalesce window) never merge into one undo step. Callers that share a
-      // gesture (lane moves) pass an explicit gestureCoalesceKey instead.
-      const coalesceKey =
-        gestureCoalesceKey ??
-        `z-reorder:${actionKind ?? "reorder"}:${entries.map((e) => e.id ?? e.selector ?? e.element.getAttribute("data-hf-id") ?? "el").join(":")}`;
-      const patchesBySourceFile = new Map<string, DomEditPatchBatch["patches"]>();
-      const rollbacks: Array<() => void> = [];
-      for (const entry of entries) {
-        const priorZIndex = entry.element.style.zIndex;
-        const priorPosition = entry.element.style.position;
-        const priorStoreEntry = entry.key
-          ? usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === entry.key)
-          : undefined;
-        let positionChanged = false;
-        entry.element.style.zIndex = String(entry.zIndex);
-        const patches: Array<{ type: "inline-style"; property: string; value: string }> = [
-          { type: "inline-style", property: "z-index", value: String(entry.zIndex) },
-        ];
+      // One async owner must bracket reveal tokens, optimistic DOM/store state,
+      // atomic persistence, rollback, and the final persistence-count release.
+      // Splitting those phases would make transaction ownership less explicit.
+      // fallow-ignore-next-line complexity
+      return (async () => {
+        const releaseZPersists = entries.map((entry) => beginLayerZPersist(entry.element));
         try {
-          const win = entry.element.ownerDocument?.defaultView;
-          if (win && win.getComputedStyle(entry.element).position === "static") {
-            entry.element.style.position = "relative";
-            positionChanged = true;
-            patches.push({ type: "inline-style", property: "position", value: "relative" });
+          // Resolver shadow (telemetry-only, decoupled from cutover): record whether
+          // the SDK resolves each reordered element — the reorderElements op's targets.
+          onReorderShadow?.(
+            entries.map((e) => readHfId(e.element)).filter((id): id is string => id != null),
+          );
+          // The default key carries the action kind so two DIFFERENT actions on the
+          // same element set (e.g. "bring-forward" then "send-backward" within the
+          // coalesce window) never merge into one undo step. Callers that share a
+          // gesture (lane moves) pass an explicit gestureCoalesceKey instead.
+          const coalesceKey = gestureCoalesceKey ?? zReorderCoalesceKey(entries, actionKind);
+          const patchesBySourceFile = new Map<string, DomEditPatchBatch["patches"]>();
+          const rollbacks: Array<() => void> = [];
+          const revealCommits: Array<{
+            element: HTMLElement;
+            ownership: LayerRevealCommitOwnership;
+          }> = [];
+          for (const entry of entries) {
+            const priorZIndex = entry.element.style.zIndex;
+            const priorPosition = entry.element.style.position;
+            const priorStoreEntry = entry.key
+              ? usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === entry.key)
+              : undefined;
+            let positionChanged = false;
+            // An active Layers-panel reveal lift on this element is consumed by
+            // this commit: the new z is the truth. Read the parked TRUE position
+            // for the static check below (the lift set a temporary
+            // position:relative that would otherwise mask the need to persist
+            // one), then drop the lift attributes so z readers stop reporting the
+            // stale prior (see useLayerRevealOverride / readLayerRevealPriorZ).
+            const liftPriorPosition = entry.element.getAttribute(LAYER_REVEAL_PRIOR_POSITION_ATTR);
+            const revealOwnership = beginLayerRevealCommit(entry.element);
+            if (revealOwnership) {
+              revealCommits.push({ element: entry.element, ownership: revealOwnership });
+            }
+            entry.element.style.zIndex = String(entry.zIndex);
+            const patches: Array<{ type: "inline-style"; property: string; value: string }> = [
+              { type: "inline-style", property: "z-index", value: String(entry.zIndex) },
+            ];
+            try {
+              const win = entry.element.ownerDocument?.defaultView;
+              const effectivePosition =
+                liftPriorPosition ??
+                (win ? win.getComputedStyle(entry.element).position : undefined);
+              if (effectivePosition === "static") {
+                entry.element.style.position = "relative";
+                positionChanged = true;
+                patches.push({ type: "inline-style", property: "position", value: "relative" });
+              }
+            } catch {
+              /* cross-origin or detached — skip */
+            }
+            if (entry.key) {
+              usePlayerStore
+                .getState()
+                .updateElement(entry.key, { zIndex: entry.zIndex, hasExplicitZIndex: true });
+            }
+            rollbacks.push(() => {
+              if (revealOwnership) {
+                rollbackLayerRevealCommit(entry.element, revealOwnership);
+              } else {
+                entry.element.style.zIndex = priorZIndex;
+                if (positionChanged) entry.element.style.position = priorPosition;
+              }
+              if (entry.key && priorStoreEntry) {
+                usePlayerStore.getState().updateElement(entry.key, {
+                  zIndex: priorStoreEntry.zIndex,
+                  hasExplicitZIndex: priorStoreEntry.hasExplicitZIndex,
+                });
+              }
+            });
+            const filePatches = patchesBySourceFile.get(entry.sourceFile) ?? [];
+            filePatches.push({
+              target: buildDomEditPatchTarget({
+                id: entry.id,
+                hfId: readHfId(entry.element),
+                selector: entry.selector,
+                selectorIndex: entry.selectorIndex,
+              }),
+              operations: patches,
+            });
+            patchesBySourceFile.set(entry.sourceFile, filePatches);
           }
-        } catch {
-          /* cross-origin or detached — skip */
-        }
-        if (entry.key) {
-          usePlayerStore
-            .getState()
-            .updateElement(entry.key, { zIndex: entry.zIndex, hasExplicitZIndex: true });
-        }
-        rollbacks.push(() => {
-          entry.element.style.zIndex = priorZIndex;
-          if (positionChanged) entry.element.style.position = priorPosition;
-          if (entry.key && priorStoreEntry) {
-            usePlayerStore.getState().updateElement(entry.key, {
-              zIndex: priorStoreEntry.zIndex,
-              hasExplicitZIndex: priorStoreEntry.hasExplicitZIndex,
+          const batches = [...patchesBySourceFile].map(([sourceFile, patches]) => ({
+            sourceFile,
+            patches,
+          }));
+          // Live z state changed with NO reload coming (skipReload below) — nudge
+          // DOM-derived views (Layers panel z-sort) to re-read the iframe.
+          usePlayerStore.getState().bumpZEditVersion();
+          const rollbackOptimisticState = () => {
+            for (const rollback of rollbacks) rollback();
+            usePlayerStore.getState().bumpZEditVersion();
+          };
+          // Resolves once every source-file batch is persisted so a same-file timing write
+          // can be ordered after it (see applyTimelineStackingReorder callers).
+          //
+          // skipReload: the live iframe DOM and the player store already hold the
+          // final z state (applied synchronously above), and the persisted patch is
+          // inline-style-only — a full iframe remount would only blink the preview.
+          // commitDomEditPatchBatches still falls back to reloading whenever the
+          // server reports an unmatched patch target (live DOM ≠ disk).
+          try {
+            const result = await commitDomEditPatchBatches(batches, {
+              label: "Reorder layers",
+              coalesceKey,
+              // Unbounded window: every key this commit records under is unique per
+              // gesture (zReorderCoalesceKey's gesture seq, or the lane drag's
+              // clip-lane-move:<seq>), so the fold can only merge records of the SAME
+              // gesture — and those records are separated by a server round-trip
+              // (move→z on a lane drag, z→lane-mirror on a canvas action), which
+              // under real network latency exceeds the 300ms default window.
+              coalesceMs: Number.POSITIVE_INFINITY,
+              skipReload: true,
             });
+            if (!result.durable) {
+              rollbackOptimisticState();
+              return result;
+            }
+            for (const { element, ownership } of revealCommits) {
+              completeLayerRevealCommit(element, ownership);
+            }
+            return result;
+          } catch (error) {
+            rollbackOptimisticState();
+            throw error;
           }
-        });
-        const filePatches = patchesBySourceFile.get(entry.sourceFile) ?? [];
-        filePatches.push({
-          target: buildDomEditPatchTarget({
-            id: entry.id,
-            hfId: readHfId(entry.element),
-            selector: entry.selector,
-            selectorIndex: entry.selectorIndex,
-          }),
-          operations: patches,
-        });
-        patchesBySourceFile.set(entry.sourceFile, filePatches);
-      }
-      const batches = [...patchesBySourceFile].map(([sourceFile, patches]) => ({
-        sourceFile,
-        patches,
-      }));
-      // Resolves once every source-file batch is persisted so a same-file timing write
-      // can be ordered after it (see applyTimelineStackingReorder callers).
-      //
-      // skipReload: the live iframe DOM and the player store already hold the
-      // final z state (applied synchronously above), and the persisted patch is
-      // inline-style-only — a full iframe remount would only blink the preview.
-      // commitDomEditPatchBatches still falls back to reloading whenever the
-      // server reports an unmatched patch target (live DOM ≠ disk).
-      return commitDomEditPatchBatches(batches, {
-        label: "Reorder layers",
-        coalesceKey,
-        skipReload: true,
-      }).catch((error) => {
-        for (const rollback of rollbacks) rollback();
-        throw error;
-      });
+        } finally {
+          for (const release of releaseZPersists) release();
+        }
+      })();
     },
     [commitDomEditPatchBatches, onReorderShadow],
   );

package/src/hooks/useFileManager.projectOwnership.test.tsx

@@ -0,0 +1,98 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("./useFileTree", () => ({
+  useFileTree: () => ({
+    projectDir: "",
+    fileTree: [],
+    setFileTree: vi.fn(),
+    fileTreeLoaded: true,
+    refreshFileTree: vi.fn(async () => {}),
+    compositions: [],
+    assets: [],
+    fontAssets: [],
+  }),
+}));
+
+vi.mock("./useEditorSave", () => ({
+  useEditorSave: () => ({
+    saveRafRef: { current: null },
+    handleContentChange: vi.fn(),
+  }),
+}));
+
+import { useFileManager } from "./useFileManager";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("useFileManager project ownership", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps delayed callbacks bound to the project that created them", async () => {
+    let resolveProjectARead: ((value: Response) => void) | undefined;
+    const projectARead = new Promise<Response>((resolve) => {
+      resolveProjectARead = resolve;
+    });
+    const fetchMock = vi.fn((url: string, init?: RequestInit) => {
+      if (url.includes("project-a") && !init?.method) return projectARead;
+      if (!init?.method) {
+        return Promise.resolve({
+          ok: true,
+          json: async () => ({ content: "PROJECT_B" }),
+        } as Response);
+      }
+      return Promise.resolve({ ok: true } as Response);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const captured: { manager: ReturnType<typeof useFileManager> | null } = { manager: null };
+    function Probe({ projectId }: { projectId: string }) {
+      captured.manager = useFileManager({
+        projectId,
+        showToast: vi.fn(),
+        recordEdit: vi.fn(async () => {}),
+        domEditSaveTimestampRef: { current: 0 },
+        setRefreshKey: vi.fn(),
+      });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a/../other?x=1" />));
+    const managerA = captured.manager;
+    if (!managerA) throw new Error("project A manager did not render");
+    const delayedRead = managerA.readProjectFile("index.html");
+
+    await act(async () => root.render(<Probe projectId="project-b#fragment" />));
+    const managerB = captured.manager;
+    if (!managerB) throw new Error("project B manager did not render");
+    expect(managerB.writeProjectFile).not.toBe(managerA.writeProjectFile);
+
+    resolveProjectARead?.({
+      ok: true,
+      json: async () => ({ content: "PROJECT_A" }),
+    } as Response);
+    await expect(delayedRead).resolves.toBe("PROJECT_A");
+    await managerA.writeProjectFile("index.html", "A_AFTER");
+    await expect(managerB.readProjectFile("index.html")).resolves.toBe("PROJECT_B");
+    await expect(managerB.readOptionalProjectFile("index.html")).resolves.toBe("PROJECT_B");
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
+    );
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-a%2F..%2Fother%3Fx%3D1/files/index.html",
+      expect.objectContaining({ method: "PUT", body: "A_AFTER" }),
+    );
+    expect(fetchMock).toHaveBeenCalledWith("/api/projects/project-b%23fragment/files/index.html");
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/projects/project-b%23fragment/files/index.html?optional=1",
+    );
+
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/useFileManager.ts

@@ -66,38 +66,48 @@ export function useFileManager({
 
   // ── Core file I/O ──
 
-  const readProjectFile = useCallback(async (path: string): Promise<string> => {
-    const pid = projectIdRef.current;
-    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 };
-    if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-    return data.content;
-  }, []);
+  const readProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string };
+      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
+      return data.content;
+    },
+    [projectId],
+  );
 
-  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): Promise<void> => {
+      if (!projectId) throw new Error("No active project");
+      const writeProjectId = projectId;
+      await retryStudioSave(async () => {
+        let response: Response;
+        try {
+          response = await fetch(
+            `/api/projects/${encodeURIComponent(writeProjectId)}/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,
+          });
+        }
+        if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
+      });
+      if (projectIdRef.current === writeProjectId && editingPathRef.current === path) {
+        setEditingFile({ path, content });
       }
-      if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
-    });
-    if (editingPathRef.current === path) {
-      setEditingFile({ path, content });
-    }
-  }, []);
+    },
+    [projectId],
+  );
 
   const updateEditingFileContent = useCallback((path: string, content: string) => {
     if (editingPathRef.current === path) {
@@ -105,16 +115,18 @@ export function useFileManager({
     }
   }, []);
 
-  const readOptionalProjectFile = useCallback(async (path: string): Promise<string> => {
-    const pid = projectIdRef.current;
-    if (!pid) throw new Error("No active project");
-    const response = await fetch(
-      `/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 };
-    return typeof data.content === "string" ? data.content : "";
-  }, []);
+  const readOptionalProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string };
+      return typeof data.content === "string" ? data.content : "";
+    },
+    [projectId],
+  );
 
   // ── Editor save (debounced content change) ──
 
@@ -146,7 +158,7 @@ export function useFileManager({
         setEditingFile({ path, content: null });
         return;
       }
-      fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`)
+      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`)
         .then((r) => {
           if (!r.ok) throw new Error(`Failed to load ${path} (${r.status})`);
           return r.json();
@@ -179,7 +191,7 @@ export function useFileManager({
       const requestId = ++revealRequestIdRef.current;
       const controller = new AbortController();
       revealAbortRef.current = controller;
-      fetch(`/api/projects/${pid}/files/${encodeURIComponent(sourceFile)}`, {
+      fetch(`/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(sourceFile)}`, {
         signal: controller.signal,
       })
         .then((r) => r.json())
@@ -211,7 +223,7 @@ export function useFileManager({
 
       const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
       try {
-        const res = await fetch(`/api/projects/${pid}/upload${qs}`, {
+        const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/upload${qs}`, {
           method: "POST",
           body: formData,
         });
@@ -251,11 +263,14 @@ export function useFileManager({
         content =
           '<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n</head>\n<body>\n\n</body>\n</html>\n';
       }
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-        method: "POST",
-        headers: { "Content-Type": "text/plain" },
-        body: content,
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "text/plain" },
+          body: content,
+        },
+      );
       if (res.ok) {
         await refreshFileTree();
         handleFileSelect(path);
@@ -273,7 +288,7 @@ export function useFileManager({
       const pid = projectIdRef.current;
       if (!pid) return;
       const res = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(path + "/.gitkeep")}`,
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path + "/.gitkeep")}`,
         {
           method: "POST",
           headers: { "Content-Type": "text/plain" },
@@ -295,9 +310,12 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-        method: "DELETE",
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(path)}`,
+        {
+          method: "DELETE",
+        },
+      );
       if (res.ok) {
         if (editingPathRef.current === path) setEditingFile(null);
         await refreshFileTree();
@@ -314,11 +332,14 @@ export function useFileManager({
     async (oldPath: string, newPath: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(oldPath)}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ newPath }),
-      });
+      const res = await fetch(
+        `/api/projects/${encodeURIComponent(pid)}/files/${encodeURIComponent(oldPath)}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ newPath }),
+        },
+      );
       if (res.ok) {
         if (editingPathRef.current === oldPath) {
           handleFileSelect(newPath);
@@ -338,7 +359,7 @@ export function useFileManager({
     async (path: string) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const res = await fetch(`/api/projects/${pid}/duplicate-file`, {
+      const res = await fetch(`/api/projects/${encodeURIComponent(pid)}/duplicate-file`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ path }),
@@ -367,17 +388,18 @@ export function useFileManager({
 
   const handleImportFonts = useCallback(
     async (files: FileList | File[]): Promise<ImportedFontAsset[]> => {
+      const pid = projectIdRef.current;
+      if (!pid) return [];
       const uploaded = await uploadProjectFiles(
         Array.from(files).filter((file) => FONT_EXT.test(file.name)),
         "assets/fonts",
       );
-      const pid = projectIdRef.current;
       const imported = uploaded
         .filter((asset) => FONT_EXT.test(asset))
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: `/api/projects/${pid}/preview/${asset}`,
+          url: `/api/projects/${encodeURIComponent(pid)}/preview/${asset}`,
         }));
       importedFontAssetsRef.current = [
         ...imported,