@hyperframes/studio 0.8.53-desktop.0 → 0.8.53

package/src/components/renders/RenderQueueItem.tsx

@@ -2,6 +2,8 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 import { memo, useCallback, useState } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { Button } from "../ui/Button";
+import { IconButton } from "../ui/IconButton";
+import { Tooltip } from "../ui/Tooltip";
 import type { RenderJob } from "./useRenderQueue";
 
 interface RenderQueueItemProps {
@@ -66,7 +68,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         setVideoReady(false);
         setConfirmingDelete(false);
       }}
-      className="px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150 hover:bg-panel-hover/30"
+      className="px-3 py-2.5 border-b border-border last:border-0 transition-colors duration-150 hover:bg-hover/30"
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover.
@@ -77,8 +79,8 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           disabled={!isComplete}
           aria-label={isComplete ? `Open ${job.filename} in a new tab` : undefined}
           className={[
-            "w-20 h-[45px] rounded-md overflow-hidden bg-panel-input shrink-0 relative",
-            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent",
+            "w-20 h-[45px] rounded-md overflow-hidden bg-input shrink-0 relative",
+            "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-accent",
             isComplete ? "cursor-pointer" : "cursor-default",
           ].join(" ")}
         >
@@ -108,17 +110,17 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {isRendering && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse motion-reduce:animate-none" />
+              <div className="w-2 h-2 rounded-full bg-accent animate-pulse motion-reduce:animate-none" />
             </div>
           )}
           {job.status === "failed" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-red-400" />
+              <div className="w-2 h-2 rounded-full bg-danger" />
             </div>
           )}
           {job.status === "cancelled" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-neutral-600" />
+              <div className="w-2 h-2 rounded-full bg-text-5" />
             </div>
           )}
         </button>
@@ -126,11 +128,9 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-panel-text-2 truncate">
-              {job.filename}
-            </span>
+            <span className="text-step-11 font-medium text-text-2 truncate">{job.filename}</span>
             {job.durationMs && (
-              <span className="text-[9px] text-panel-text-5 shrink-0">
+              <span className="text-step-9 text-text-5 shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -139,11 +139,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {isRendering && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
+                <span className="text-step-9 text-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-step-9 font-mono text-accent">{job.progress}%</span>
               </div>
               <div
-                className="w-full h-1 bg-panel-border rounded-full overflow-hidden"
+                className="w-full h-1 bg-border rounded-full overflow-hidden"
                 role="progressbar"
                 aria-valuenow={job.progress}
                 aria-valuemin={0}
@@ -151,7 +151,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 aria-label={`Render progress: ${job.progress}%`}
               >
                 <div
-                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
+                  className="h-full bg-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -159,14 +159,14 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status === "failed" && job.error && (
-            <span className="text-[9px] text-red-400 mt-0.5 block">{job.error}</span>
+            <span className="text-step-9 text-danger mt-0.5 block">{job.error}</span>
           )}
           {job.status === "cancelled" && (
-            <span className="text-[9px] text-panel-text-4 mt-0.5 block">Cancelled</span>
+            <span className="text-step-9 text-text-4 mt-0.5 block">Cancelled</span>
           )}
 
           {!isRendering && (
-            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-step-9 text-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -209,53 +209,58 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             </>
           ) : (
             <>
-              <button
-                onClick={isComplete ? handleDownload : undefined}
-                className={`p-1.5 min-w-6 min-h-6 rounded transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent ${
-                  isComplete
-                    ? "text-panel-text-5 hover:text-panel-accent"
-                    : "text-panel-text-5/30 cursor-default"
-                }`}
-                title={isComplete ? "Download" : undefined}
-                aria-label={`Download ${job.filename}`}
-                disabled={!isComplete}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
-                  <polyline points="7 10 12 15 17 10" />
-                  <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmingDelete(true);
-                }}
-                className="p-1.5 min-w-6 min-h-6 rounded-sm text-panel-text-5 hover:text-red-400 transition-colors outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-studio-accent"
-                title="Delete render file"
-                aria-label={`Delete ${job.filename}`}
-              >
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                >
-                  <path d="M18 6L6 18M6 6l12 12" />
-                </svg>
-              </button>
+              {/* The tooltip explains the control whether or not it is
+                  reachable; `disabled:` on the shared Button keeps pointer
+                  events alive precisely so a disabled one can still say why. */}
+              <Tooltip label={isComplete ? "Download" : "Available when the render finishes"}>
+                <IconButton
+                  size="sm"
+                  onClick={handleDownload}
+                  disabled={!isComplete}
+                  aria-label={`Download ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
+              <Tooltip label="Delete render file">
+                <IconButton
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmingDelete(true);
+                  }}
+                  aria-label={`Delete ${job.filename}`}
+                  icon={
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M18 6L6 18M6 6l12 12" />
+                    </svg>
+                  }
+                />
+              </Tooltip>
             </>
           )}
         </div>

package/src/components/ui/Select.tsx

@@ -11,6 +11,8 @@ import type { PreviewState } from "./Button";
 export interface SelectOption {
   label: string;
   value: string;
+  /** Offered but not choosable; the label stays visible so the reason stays visible too. */
+  disabled?: boolean;
 }
 
 export interface SelectProps {
@@ -81,11 +83,13 @@ export function Select({
                 <BaseSelect.Item
                   key={option.value}
                   value={option.value}
+                  disabled={option.disabled}
                   className={cn(
                     "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
                     "text-step-11 text-text-2 outline-hidden",
                     "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
                     "data-[selected]:text-text-0",
+                    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
                   )}
                 >
                   <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>

package/src/headerExports.test.tsx

@@ -0,0 +1,23 @@
+// @vitest-environment happy-dom
+// Imports the header logo and button size classes the way a host app does: by package name.
+import { createRoot } from "react-dom/client";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import { HyperframesLogo, buttonSizes } from "@hyperframes/studio";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe("header package exports", () => {
+  it("mounts the logo mark", async () => {
+    const el = document.createElement("div");
+    document.body.append(el);
+    const root = createRoot(el);
+    await act(async () => root.render(<HyperframesLogo />));
+    expect(el.querySelector("svg")).not.toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("exposes the button size classes a host reuses for matching chrome", () => {
+    expect(buttonSizes.md).toEqual(expect.any(String));
+  });
+});

package/src/hooks/useFileManager.ts

@@ -1,13 +1,18 @@
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useMemo, useRef } from "react";
 import type { EditingFile } from "../utils/studioHelpers";
 import { FONT_EXT, isMediaFile } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { findTagByTarget, type PatchTarget } from "../utils/sourcePatcher";
-import { StudioFileConflictError } from "../utils/studioSaveDiagnostics";
+import {
+  createStudioSaveHttpError,
+  retryStudioSave,
+  StudioFileConflictError,
+  StudioSaveNetworkError,
+} from "../utils/studioSaveDiagnostics";
+import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
 import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
-import { useProjectFileWriter } from "./useProjectFileWriter";
 
 // ── Types ──
 
@@ -45,13 +50,17 @@ export function useFileManager({
   projectIdRef.current = projectId;
 
   const importedFontAssetsRef = useRef<ImportedFontAsset[]>([]);
-  const {
-    fileVersions,
-    readProjectFile,
-    writeProjectFile: writeProjectFileRaw,
-    readOptionalProjectFile,
-    observeProjectFileVersion,
-  } = useProjectFileWriter({ projectId });
+  const fileVersionScope = useMemo(
+    () => ({ projectId, versions: new Map<string, string | null>() }),
+    [projectId],
+  );
+  const fileVersions = fileVersionScope.versions;
+  const observeProjectFileVersion = useCallback(
+    (path: string, version: string | null) => {
+      fileVersions.set(path, version);
+    },
+    [fileVersions],
+  );
 
   // ── File tree ──
 
@@ -65,24 +74,117 @@ export function useFileManager({
     fontAssets,
   } = useFileTree({ projectId, projectIdRef });
 
-  const updateEditingFileContent = useCallback((path: string, content: string) => {
-    if (editingPathRef.current === path) {
-      setEditingFile({ path, content });
-    }
-  }, []);
+  // ── Core file I/O ──
+
+  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; version?: string };
+      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;
+    },
+    [fileVersions, projectId],
+  );
 
-  // Studio's own editor tab mirrors whatever it just wrote, on top of the
-  // shared writer — a host mounting useProjectFileWriter directly has no
-  // editor tab and does not need this.
   const writeProjectFile = useCallback(
     async (path: string, content: string, expectedContent?: string): Promise<void> => {
-      const writeProjectId = projectIdRef.current;
-      await writeProjectFileRaw(path, content, expectedContent);
+      if (!projectId) throw new Error("No active project");
+      const writeProjectId = projectId;
+      let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
+      if (expectedVersion === undefined) {
+        const preflight = await fetch(
+          `/api/projects/${encodeURIComponent(writeProjectId)}/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`);
+        }
+      }
+      await retryStudioSave(async () => {
+        // Each request gets its own receipt identity. If a committed request loses its response,
+        // the retry can produce a second filesystem receipt that must be suppressed independently.
+        let response: Response;
+        try {
+          response = await fetch(
+            `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
+            {
+              method: "PUT",
+              headers: {
+                "Content-Type": "text/plain",
+                ...studioWriteHeaders(),
+                ...(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) {
+            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()) 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`);
+        fileVersions.set(path, version);
+      });
       if (projectIdRef.current === writeProjectId && editingPathRef.current === path) {
         setEditingFile({ path, content });
       }
     },
-    [writeProjectFileRaw],
+    [fileVersions, projectId],
+  );
+
+  const updateEditingFileContent = useCallback((path: string, content: string) => {
+    if (editingPathRef.current === path) {
+      setEditingFile({ path, 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; version?: string };
+      fileVersions.set(path, data.version ?? response.headers.get("etag"));
+      return typeof data.content === "string" ? data.content : "";
+    },
+    [fileVersions, projectId],
   );
 
   // ── Editor save (debounced content change) ──

package/src/hooks/usePersistentEditHistory.ts

@@ -33,7 +33,7 @@ interface ApplyCallbacks {
   serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
 }
 
-export interface UsePersistentEditHistoryOptions {
+interface UsePersistentEditHistoryOptions {
   projectId: string | null;
   storage?: EditHistoryStorageAdapter;
   now?: () => number;

package/src/hooks/useRightPanelIntents.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
 
-/** Opens the Slideshow panel when the file becomes a slideshow and closes it when it stops being one; a user's own close, and a restored layout's placement, stick. */
+/** Opens the Slideshow panel when the file becomes a slideshow, closes it when it stops being one.
+ * A user's own close, and a restored layout's placement, stick. */
 export function useSlideshowDockPanel(isSlideshowComposition: boolean) {
   const controller = useDockLayoutStore((state) => state.controller);
   const wasSlideshow = useRef(false);

package/src/hooks/useTimelineDeleteOps.test.tsx

@@ -5,8 +5,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../player";
 import { applyRippleShifts, useTimelineDeleteOps } from "./useTimelineDeleteOps";
 import { installReactActEnvironment, mountReactHarness } from "./domSelectionTestHarness";
-import { useTrackPendingTimelineEdit } from "./useTrackPendingTimelineEdit";
-import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
 
 installReactActEnvironment();
 
@@ -119,112 +117,3 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
     );
   });
 });
-
-// Regression: a delete's write can reach disk before its history entry is
-// recorded, so an Undo fired in that window found nothing to restore.
-// Fails without useTrackPendingTimelineEdit's wrap (see that file).
-describe("useTimelineDeleteOps: undo race", () => {
-  // data-composition-id (readRootCompositionDuration's key) plus a
-  // remove-element mock that actually drops hf-c: needed for a real diff.
-  const html = `<!DOCTYPE html><html data-composition-variables='[]'><body>
-<div data-hf-id="hf-stage" data-composition-id="main" data-duration="6">
-<div data-hf-id="hf-a" data-start="0" data-duration="2"></div>
-<div data-hf-id="hf-b" data-start="2" data-duration="2"></div>
-<div data-hf-id="hf-c" data-start="4" data-duration="2"></div>
-</div>
-</body></html>`;
-  const htmlAfterDeletingC = `<!DOCTYPE html><html data-composition-variables='[]'><body>
-<div data-hf-id="hf-stage" data-composition-id="main" data-duration="6">
-<div data-hf-id="hf-a" data-start="0" data-duration="2"></div>
-<div data-hf-id="hf-b" data-start="2" data-duration="2"></div>
-</div>
-</body></html>`;
-
-  beforeEach(() => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.includes("/file-mutations/remove-element/")) {
-          return new Response(JSON.stringify({ changed: true, content: htmlAfterDeletingC }), {
-            status: 200,
-          });
-        }
-        return new Response(JSON.stringify({ content: html }), { status: 200 });
-      }),
-    );
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = "";
-    vi.unstubAllGlobals();
-  });
-
-  // A manually-resolved gate stands in for the delete's write landing — a
-  // real timer raced the fix's own microtasks unpredictably (verified: it
-  // kept passing even with the fix's tracking call deleted).
-  function deferred<T>() {
-    let resolve!: (value: T) => void;
-    const promise = new Promise<T>((r) => (resolve = r));
-    return { promise, resolve };
-  }
-
-  function mountRaceHarness() {
-    const elements = [el("hf-a", 0, 2), el("hf-b", 2, 2), el("hf-c", 4, 2)];
-    const gate = deferred<void>();
-    const recordEdit = vi.fn(() => gate.promise);
-    let tracked: ((elements: TimelineElement[]) => Promise<void>) | null = null;
-    function Harness() {
-      const track = useTrackPendingTimelineEdit();
-      const hook = useTimelineDeleteOps({
-        projectIdRef: { current: "test-project" },
-        activeCompPath: "index.html",
-        timelineElements: elements,
-        showToast: vi.fn(),
-        writeProjectFile: vi.fn().mockResolvedValue(undefined),
-        recordEdit,
-        reloadPreview: vi.fn(),
-        previewIframeRef: { current: null },
-        handleTimelineGroupMove: vi.fn().mockResolvedValue(undefined),
-      });
-      tracked = track(hook.handleTimelineElementsDelete);
-      return null;
-    }
-    mountReactHarness(<Harness />);
-    // Deletes the LAST clip (not the middle one): only this shrinks the
-    // composition's furthest-clip-end duration, so the write actually
-    // differs from the original content and recordEdit is reached — the
-    // middle clip's delete leaves duration unchanged and is a no-op write.
-    return { gate, recordEdit, deleteSelection: () => tracked!([elements[2]]) };
-  }
-
-  it("the pending-edit flush waits while the delete's history write is still landing", async () => {
-    const { gate, recordEdit, deleteSelection } = mountRaceHarness();
-    const order: string[] = [];
-    const deletePromise = deleteSelection().then(() => order.push("deleted"));
-    // Let the delete run up to (and call) recordEdit, which is now gated —
-    // this is the exact window a fast Undo used to race into.
-    await vi.waitFor(() => expect(recordEdit).toHaveBeenCalled());
-    // No React state changes happen inside the flush itself here (no
-    // pending-edit-flush listeners are registered in this harness), so it
-    // does not need act()'s wrapping — only awaiting the delete's own
-    // resolution below does.
-    const flushPromise = flushStudioPendingEdits().then(() => order.push("flushed"));
-    await Promise.resolve();
-    await Promise.resolve();
-    expect(order).toEqual([]);
-    gate.resolve();
-    await deletePromise;
-    await flushPromise;
-    expect(order).toEqual(["deleted", "flushed"]);
-  });
-
-  it("the pending-edit flush resolves immediately once the delete has already finished", async () => {
-    const { gate, deleteSelection } = mountRaceHarness();
-    gate.resolve();
-    await deleteSelection();
-    await act(async () => {
-      await flushStudioPendingEdits();
-    });
-  });
-});