@hyperframes/studio 0.5.7 → 0.6.0-alpha.10

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,10 +1,20 @@
-import { memo, useState, useCallback, type ReactNode } from "react";
-import { useMountEffect } from "../../hooks/useMountEffect";
+import {
+  memo,
+  useState,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+  type ReactNode,
+} from "react";
 import { CompositionsTab } from "./CompositionsTab";
 import { AssetsTab } from "./AssetsTab";
 import { FileTree } from "../editor/FileTree";
 
-type SidebarTab = "compositions" | "assets" | "code";
+export type SidebarTab = "compositions" | "assets" | "code";
+
+export interface LeftSidebarHandle {
+  selectTab: (tab: SidebarTab) => void;
+}
 
 const STORAGE_KEY = "hf-studio-sidebar-tab";
 
@@ -36,189 +46,194 @@ interface LeftSidebarProps {
   onLint?: () => void;
   linting?: boolean;
   onToggleCollapse?: () => void;
+  takeoverContent?: ReactNode;
 }
 
-export const LeftSidebar = memo(function LeftSidebar({
-  width = 240,
-  projectId,
-  compositions,
-  assets,
-  activeComposition,
-  onSelectComposition,
-  onImportFiles,
-  fileTree: fileProp,
-  editingFile,
-  onSelectFile,
-  onCreateFile,
-  onCreateFolder,
-  onDeleteFile,
-  onRenameFile,
-  onDuplicateFile,
-  onMoveFile,
-  codeChildren,
-  onLint,
-  linting,
-  onToggleCollapse,
-}: LeftSidebarProps) {
-  const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
+export const LeftSidebar = memo(
+  forwardRef<LeftSidebarHandle, LeftSidebarProps>(function LeftSidebar(
+    {
+      width = 240,
+      projectId,
+      compositions,
+      assets,
+      activeComposition,
+      onSelectComposition,
+      onImportFiles,
+      fileTree: fileProp,
+      editingFile,
+      onSelectFile,
+      onCreateFile,
+      onCreateFolder,
+      onDeleteFile,
+      onRenameFile,
+      onDuplicateFile,
+      onMoveFile,
+      codeChildren,
+      onLint,
+      linting,
+      onToggleCollapse,
+      takeoverContent,
+    },
+    ref,
+  ) {
+    const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
 
-  const selectTab = useCallback((t: SidebarTab) => {
-    setTab(t);
-    localStorage.setItem(STORAGE_KEY, t);
-  }, []);
+    const selectTab = useCallback((t: SidebarTab) => {
+      setTab(t);
+      localStorage.setItem(STORAGE_KEY, t);
+    }, []);
 
-  // Keyboard shortcuts: Cmd+1 for Compositions, Cmd+2 for Assets
-  useMountEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (!e.metaKey && !e.ctrlKey) return;
-      if (e.key === "1") {
-        e.preventDefault();
-        selectTab("compositions");
-      }
-      if (e.key === "2") {
-        e.preventDefault();
-        selectTab("assets");
-      }
-    };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
-  });
+    useImperativeHandle(ref, () => ({ selectTab }), [selectTab]);
 
-  return (
-    <div
-      className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
-      style={{ width }}
-    >
-      {/* Tabs — Code first */}
-      <div className="flex border-b border-neutral-800/50 flex-shrink-0">
-        <button
-          type="button"
-          onClick={() => selectTab("code")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "code"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
-        >
-          Code
-        </button>
-        <button
-          type="button"
-          onClick={() => selectTab("compositions")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "compositions"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
-        >
-          Compositions
-        </button>
-        <button
-          type="button"
-          onClick={() => selectTab("assets")}
-          className={`flex-1 py-2 text-[11px] font-medium transition-colors ${
-            tab === "assets"
-              ? "text-neutral-200 border-b-2 border-studio-accent"
-              : "text-neutral-500 hover:text-neutral-400"
-          }`}
-        >
-          Assets
-        </button>
-        {onToggleCollapse && (
-          <button
-            type="button"
-            onClick={onToggleCollapse}
-            className="mx-1 my-1 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-            title="Hide sidebar"
-            aria-label="Hide sidebar"
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="m14 7-5 5 5 5" />
-              <path d="M19 4v16" />
-            </svg>
-          </button>
-        )}
-      </div>
+    return (
+      <div
+        className="flex flex-col h-full bg-neutral-950 border-r border-neutral-800/50"
+        style={{ width }}
+      >
+        {takeoverContent ? (
+          <div className="flex min-h-0 flex-1">{takeoverContent}</div>
+        ) : (
+          <>
+            {/* Tabs — Code first */}
+            <div className="border-b border-neutral-800/50 px-3 py-3 flex-shrink-0">
+              <div className="flex items-center gap-2">
+                <div
+                  className="grid min-w-0 flex-1 gap-0.5 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+                  style={{ gridTemplateColumns: "1fr 1fr 1fr" }}
+                >
+                  <button
+                    type="button"
+                    onClick={() => selectTab("code")}
+                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                      tab === "code"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:text-neutral-200"
+                    }`}
+                  >
+                    Code
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => selectTab("compositions")}
+                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                      tab === "compositions"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:text-neutral-200"
+                    }`}
+                  >
+                    Comps
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => selectTab("assets")}
+                    className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                      tab === "assets"
+                        ? "bg-neutral-800 text-white"
+                        : "text-neutral-500 hover:text-neutral-200"
+                    }`}
+                  >
+                    Assets
+                  </button>
+                </div>
+                {onToggleCollapse && (
+                  <button
+                    type="button"
+                    onClick={onToggleCollapse}
+                    className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
+                    title="Hide sidebar"
+                    aria-label="Hide sidebar"
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="m14 7-5 5 5 5" />
+                      <path d="M19 4v16" />
+                    </svg>
+                  </button>
+                )}
+              </div>
+            </div>
 
-      {/* Tab content */}
-      {tab === "compositions" && (
-        <CompositionsTab
-          projectId={projectId}
-          compositions={compositions}
-          activeComposition={activeComposition}
-          onSelect={onSelectComposition}
-        />
-      )}
-      {tab === "assets" && (
-        <AssetsTab
-          projectId={projectId}
-          assets={assets}
-          onImport={onImportFiles}
-          onDelete={onDeleteFile}
-          onRename={onRenameFile}
-        />
-      )}
-      {tab === "code" && (
-        <div className="flex flex-1 min-h-0">
-          {(fileProp?.length ?? 0) > 0 && (
-            <div className="w-[160px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
-              <FileTree
-                files={fileProp ?? []}
-                activeFile={editingFile?.path ?? null}
-                onSelectFile={onSelectFile ?? (() => {})}
-                onCreateFile={onCreateFile}
-                onCreateFolder={onCreateFolder}
-                onDeleteFile={onDeleteFile}
-                onRenameFile={onRenameFile}
-                onDuplicateFile={onDuplicateFile}
-                onMoveFile={onMoveFile}
-                onImportFiles={onImportFiles}
+            {/* Tab content */}
+            {tab === "compositions" && (
+              <CompositionsTab
+                projectId={projectId}
+                compositions={compositions}
+                activeComposition={activeComposition}
+                onSelect={onSelectComposition}
               />
-            </div>
-          )}
-          <div className="flex-1 overflow-hidden min-w-0">
-            {codeChildren ?? (
-              <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
-                Select a file to edit
+            )}
+            {tab === "assets" && (
+              <AssetsTab
+                projectId={projectId}
+                assets={assets}
+                onImport={onImportFiles}
+                onDelete={onDeleteFile}
+                onRename={onRenameFile}
+              />
+            )}
+            {tab === "code" && (
+              <div className="flex flex-1 min-h-0">
+                {(fileProp?.length ?? 0) > 0 && (
+                  <div className="w-[160px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
+                    <FileTree
+                      files={fileProp ?? []}
+                      activeFile={editingFile?.path ?? null}
+                      onSelectFile={onSelectFile ?? (() => {})}
+                      onCreateFile={onCreateFile}
+                      onCreateFolder={onCreateFolder}
+                      onDeleteFile={onDeleteFile}
+                      onRenameFile={onRenameFile}
+                      onDuplicateFile={onDuplicateFile}
+                      onMoveFile={onMoveFile}
+                      onImportFiles={onImportFiles}
+                    />
+                  </div>
+                )}
+                <div className="flex-1 overflow-hidden min-w-0">
+                  {codeChildren ?? (
+                    <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+                      Select a file to edit
+                    </div>
+                  )}
+                </div>
               </div>
             )}
-          </div>
-        </div>
-      )}
 
-      {/* Lint button pinned at the bottom */}
-      {onLint && (
-        <div className="border-t border-neutral-800 p-2 flex-shrink-0">
-          <button
-            onClick={onLint}
-            disabled={linting}
-            className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 hover:text-amber-300 hover:bg-neutral-800 transition-colors disabled:opacity-40"
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <path d="M9 11l3 3L22 4" />
-              <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
-            </svg>
-            {linting ? "Linting…" : "Lint"}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-});
+            {/* Lint button pinned at the bottom */}
+            {onLint && (
+              <div className="border-t border-neutral-800 p-2 flex-shrink-0">
+                <button
+                  onClick={onLint}
+                  disabled={linting}
+                  className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 hover:text-amber-300 hover:bg-neutral-800 transition-colors disabled:opacity-40"
+                >
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M9 11l3 3L22 4" />
+                    <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
+                  </svg>
+                  {linting ? "Linting…" : "Lint"}
+                </button>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    );
+  }),
+);

package/src/hooks/usePersistentEditHistory.test.ts

@@ -0,0 +1,256 @@
+import { describe, expect, it } from "vitest";
+import { createEmptyEditHistory } from "../utils/editHistory";
+import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
+import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+import {
+  createPersistentEditHistoryController,
+  createPersistentEditHistoryStore,
+} from "./usePersistentEditHistory";
+
+describe("createPersistentEditHistoryController", () => {
+  it("records history and reloads it for the same project", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const first = await createPersistentEditHistoryController({
+      projectId: "project-1",
+      storage,
+      now: () => 100,
+      onChange: () => {},
+    });
+
+    await first.recordEdit({
+      label: "Move layer",
+      kind: "manual",
+      files: { "index.html": { before: "a", after: "b" } },
+    });
+
+    const second = await createPersistentEditHistoryController({
+      projectId: "project-1",
+      storage,
+      now: () => 200,
+      onChange: () => {},
+    });
+
+    expect(second.snapshot().canUndo).toBe(true);
+    expect(second.snapshot().undoLabel).toBe("Move layer");
+    expect(second.snapshot().undoPaths).toEqual(["index.html"]);
+  });
+
+  it("undo applies files through the provided callback and persists redo state", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const controller = await createPersistentEditHistoryController({
+      projectId: "project-1",
+      storage,
+      now: () => 100,
+      onChange: () => {},
+    });
+    await controller.recordEdit({
+      label: "Move layer",
+      kind: "manual",
+      files: { "index.html": { before: "a", after: "b" } },
+    });
+
+    const result = await controller.undo({
+      readFile: async (path) => {
+        expect(path).toBe("index.html");
+        return "b";
+      },
+      writeFile: async (path, content) => {
+        expect(path).toBe("index.html");
+        expect(content).toBe("a");
+      },
+    });
+    expect(result.ok).toBe(true);
+    expect(result.paths).toEqual(["index.html"]);
+
+    expect(controller.snapshot().canUndo).toBe(false);
+    expect(controller.snapshot().canRedo).toBe(true);
+    expect(controller.snapshot().redoPaths).toEqual(["index.html"]);
+  });
+
+  it("keeps in-memory history when storage saves fail", async () => {
+    const storage: EditHistoryStorageAdapter = {
+      async get() {
+        return null;
+      },
+      async set() {
+        throw new Error("IndexedDB unavailable");
+      },
+      async delete() {},
+    };
+    const controller = await createPersistentEditHistoryController({
+      projectId: "project-1",
+      storage,
+      now: () => 100,
+      onChange: () => {},
+    });
+
+    await expect(
+      controller.recordEdit({
+        label: "Move layer",
+        kind: "manual",
+        files: { "index.html": { before: "a", after: "b" } },
+      }),
+    ).resolves.toBeUndefined();
+
+    expect(controller.snapshot().canUndo).toBe(true);
+  });
+
+  it("serializes concurrent record edits against the latest state", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    let timestamp = 100;
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => timestamp++,
+      onChange: () => {},
+    });
+
+    await Promise.all([
+      store.recordEdit({
+        label: "Move layer",
+        kind: "manual",
+        files: { "index.html": { before: "a", after: "b" } },
+      }),
+      store.recordEdit({
+        label: "Resize layer",
+        kind: "manual",
+        files: { "index.html": { before: "b", after: "c" } },
+      }),
+    ]);
+
+    expect(store.snapshot().state.undo.map((entry) => entry.label)).toEqual([
+      "Move layer",
+      "Resize layer",
+    ]);
+  });
+
+  it("still coalesces concurrent source edits that share a coalesce key", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    let timestamp = 100;
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => timestamp++,
+      onChange: () => {},
+    });
+
+    await Promise.all([
+      store.recordEdit({
+        label: "Edit source",
+        kind: "source",
+        coalesceKey: "source:index.html",
+        files: { "index.html": { before: "a", after: "b" } },
+      }),
+      store.recordEdit({
+        label: "Edit source",
+        kind: "source",
+        coalesceKey: "source:index.html",
+        files: { "index.html": { before: "b", after: "c" } },
+      }),
+    ]);
+
+    expect(store.snapshot().state.undo).toHaveLength(1);
+    expect(store.snapshot().state.undo[0].files["index.html"].before).toBe("a");
+    expect(store.snapshot().state.undo[0].files["index.html"].after).toBe("c");
+  });
+
+  it("reads undo hashes from the live top entry during queued undo calls", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    let timestamp = 100;
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => timestamp++,
+      onChange: () => {},
+    });
+    await store.recordEdit({
+      label: "Edit first file",
+      kind: "manual",
+      files: { "first.html": { before: "first-before", after: "first-after" } },
+    });
+    await store.recordEdit({
+      label: "Edit second file",
+      kind: "manual",
+      files: { "second.html": { before: "second-before", after: "second-after" } },
+    });
+
+    const files: Record<string, string> = {
+      "first.html": "first-after",
+      "second.html": "second-after",
+    };
+    const readPaths: string[] = [];
+
+    await Promise.all([
+      store.undo({
+        readFile: async (path) => {
+          readPaths.push(path);
+          return files[path];
+        },
+        writeFile: async (path, content) => {
+          files[path] = content;
+        },
+      }),
+      store.undo({
+        readFile: async (path) => {
+          readPaths.push(path);
+          return files[path];
+        },
+        writeFile: async (path, content) => {
+          files[path] = content;
+        },
+      }),
+    ]);
+
+    expect(readPaths).toEqual(["second.html", "first.html"]);
+    expect(files).toEqual({
+      "first.html": "first-before",
+      "second.html": "second-before",
+    });
+    expect(store.snapshot().canUndo).toBe(false);
+    expect(store.snapshot().canRedo).toBe(true);
+  });
+
+  it("rolls back files when an undo write fails partway through", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => 100,
+      onChange: () => {},
+    });
+    await store.recordEdit({
+      label: "Edit files",
+      kind: "manual",
+      files: {
+        "first.html": { before: "first-before", after: "first-after" },
+        "second.html": { before: "second-before", after: "second-after" },
+      },
+    });
+
+    const files: Record<string, string> = {
+      "first.html": "first-after",
+      "second.html": "second-after",
+    };
+    const result = store.undo({
+      readFile: async (path) => files[path],
+      writeFile: async (path, content) => {
+        if (path === "second.html" && content === "second-before") {
+          throw new Error("write failed");
+        }
+        files[path] = content;
+      },
+    });
+
+    await expect(result).rejects.toThrow("write failed");
+    expect(files).toEqual({
+      "first.html": "first-after",
+      "second.html": "second-after",
+    });
+    expect(store.snapshot().undoLabel).toBe("Edit files");
+    expect(store.snapshot().canRedo).toBe(false);
+  });
+});