@hyperframes/studio 0.5.0-alpha.10 → 0.5.0-alpha.11

package/src/components/nle/NLELayout.tsx

@@ -5,6 +5,10 @@ import type { TimelineElement } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb, type CompositionLevel } from "./CompositionBreadcrumb";
+import {
+  TIMELINE_TOGGLE_SHORTCUT_LABEL,
+  getTimelineToggleTitle,
+} from "../../utils/timelineDiscovery";
 
 interface NLELayoutProps {
   projectId: string;
@@ -198,6 +202,7 @@ export const NLELayout = memo(function NLELayout({
 
   // Resizable timeline height
   const [timelineH, setTimelineH] = useState(DEFAULT_TIMELINE_H);
+  const isTimelineVisible = timelineVisible ?? true;
   const isDragging = useRef(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -371,16 +376,11 @@ export const NLELayout = memo(function NLELayout({
               onNavigate={handleNavigateComposition}
             />
           )}
-          <PlayerControls
-            onTogglePlay={togglePlay}
-            onSeek={seek}
-            timelineVisible={timelineVisible ?? true}
-            onToggleTimeline={onToggleTimeline}
-          />
+          <PlayerControls onTogglePlay={togglePlay} onSeek={seek} />
         </div>
       </div>
 
-      {(timelineVisible ?? true) && (
+      {isTimelineVisible ? (
         <>
           {/* Resize divider */}
           <div
@@ -422,7 +422,42 @@ export const NLELayout = memo(function NLELayout({
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
           </div>
         </>
-      )}
+      ) : onToggleTimeline ? (
+        <div className="flex-shrink-0 border-t border-neutral-800/50 bg-neutral-950/96">
+          <div className="flex h-10 items-center justify-between px-3">
+            <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
+              Timeline
+            </div>
+            <button
+              type="button"
+              onClick={onToggleTimeline}
+              className="flex h-7 items-center gap-1.5 rounded-md border border-neutral-800 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-700 hover:bg-neutral-900 hover:text-neutral-100"
+              title={getTimelineToggleTitle(false)}
+              aria-label="Show timeline editor"
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.7"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <rect x="3" y="13" width="18" height="8" rx="1" />
+                <path d="M7 9h10" />
+                <path d="M8 5h8" />
+              </svg>
+              <span>Show</span>
+              <span className="hidden rounded bg-white/5 px-1 py-0.5 font-mono text-[9px] text-neutral-500 sm:inline">
+                {TIMELINE_TOGGLE_SHORTCUT_LABEL}
+              </span>
+            </button>
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 });

package/src/components/sidebar/LeftSidebar.tsx

@@ -35,6 +35,7 @@ interface LeftSidebarProps {
   codeChildren?: ReactNode;
   onLint?: () => void;
   linting?: boolean;
+  onToggleCollapse?: () => void;
 }
 
 export const LeftSidebar = memo(function LeftSidebar({
@@ -57,6 +58,7 @@ export const LeftSidebar = memo(function LeftSidebar({
   codeChildren,
   onLint,
   linting,
+  onToggleCollapse,
 }: LeftSidebarProps) {
   const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
 
@@ -89,43 +91,69 @@ export const LeftSidebar = memo(function LeftSidebar({
     >
       {/* Tabs — Code first */}
       <div className="border-b border-neutral-800/50 px-3 py-3 flex-shrink-0">
-        <div
-          className="grid gap-1 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
-          style={{ gridTemplateColumns: "0.9fr 1.25fr 0.9fr" }}
-        >
-          <button
-            type="button"
-            onClick={() => selectTab("code")}
-            className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold 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-2.5 py-2 text-[10px] font-semibold transition-all ${
-              tab === "compositions"
-                ? "bg-neutral-800 text-white"
-                : "text-neutral-500 hover:text-neutral-200"
-            }`}
-          >
-            Compositions
-          </button>
-          <button
-            type="button"
-            onClick={() => selectTab("assets")}
-            className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold transition-all ${
-              tab === "assets"
-                ? "bg-neutral-800 text-white"
-                : "text-neutral-500 hover:text-neutral-200"
-            }`}
+        <div className="flex items-center gap-2">
+          <div
+            className="grid min-w-0 flex-1 gap-1 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+            style={{ gridTemplateColumns: "0.9fr 1.25fr 0.9fr" }}
           >
-            Assets
-          </button>
+            <button
+              type="button"
+              onClick={() => selectTab("code")}
+              className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold 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-2.5 py-2 text-[10px] font-semibold transition-all ${
+                tab === "compositions"
+                  ? "bg-neutral-800 text-white"
+                  : "text-neutral-500 hover:text-neutral-200"
+              }`}
+            >
+              Compositions
+            </button>
+            <button
+              type="button"
+              onClick={() => selectTab("assets")}
+              className={`rounded-[14px] px-2.5 py-2 text-[10px] font-semibold 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>
 

package/src/hooks/usePersistentEditHistory.test.ts

@@ -0,0 +1,255 @@
+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(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);
+  });
+});