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

package/src/App.tsx

@@ -1,16 +1,25 @@
-import { useState, useCallback, useRef, useEffect, useMemo, type ReactNode } from "react";
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
 import { useMountEffect } from "./hooks/useMountEffect";
 import { NLELayout } from "./components/nle/NLELayout";
 import { SourceEditor } from "./components/editor/SourceEditor";
 import { LeftSidebar } from "./components/sidebar/LeftSidebar";
 import { RenderQueue } from "./components/renders/RenderQueue";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
-import { CompositionThumbnail, VideoThumbnail, usePlayerStore } from "./player";
+import { CompositionThumbnail, VideoThumbnail, liveTime, usePlayerStore } from "./player";
 import { AudioWaveform } from "./player/components/AudioWaveform";
 import type { TimelineElement } from "./player";
 import { LintModal } from "./components/LintModal";
 import type { LintFinding } from "./components/LintModal";
 import { MediaPreview } from "./components/MediaPreview";
+import { RotateCcw, RotateCw } from "./icons/SystemIcons";
 import { FONT_EXT, isMediaFile } from "./utils/mediaTypes";
 import {
   buildTimelineAssetId,
@@ -29,6 +38,7 @@ import { useCaptionStore } from "./captions/store";
 import { useCaptionSync } from "./captions/hooks/useCaptionSync";
 import { parseCaptionComposition } from "./captions/parser";
 import { copyTextToClipboard } from "./utils/clipboard";
+import { usePersistentEditHistory } from "./hooks/usePersistentEditHistory";
 import {
   applyPatchByTarget,
   readAttributeByTarget,
@@ -50,6 +60,8 @@ import {
   setTimelineEditorHintDismissed,
   shouldHandleTimelineToggleHotkey,
 } from "./utils/timelineDiscovery";
+import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "./utils/frameCapture";
+import { Camera } from "./icons/SystemIcons";
 import { PropertyPanel } from "./components/editor/PropertyPanel";
 import { googleFontStylesheetUrl } from "./components/editor/fontCatalog";
 import {
@@ -74,6 +86,7 @@ import {
   type DomEditTextField,
   type DomEditSelection,
 } from "./components/editor/domEditing";
+import { saveProjectFilesWithHistory } from "./utils/studioFileHistory";
 
 interface EditingFile {
   path: string;
@@ -85,6 +98,10 @@ interface AppToast {
   tone: "error" | "info";
 }
 
+function getTimelineElementLabel(element: TimelineElement): string {
+  return element.label || element.id || element.tag;
+}
+
 type RightPanelTab = "design" | "renders";
 
 const GENERIC_FONT_FAMILIES = new Set([
@@ -257,6 +274,29 @@ function getEventTargetElement(target: EventTarget | null): HTMLElement | null {
   return null;
 }
 
+function shouldIgnoreHistoryShortcut(target: EventTarget | null): boolean {
+  const el = getEventTargetElement(target);
+  if (!el) return false;
+  return Boolean(
+    el.closest("input, textarea, select, [contenteditable='true'], [role='textbox'], .cm-editor"),
+  );
+}
+
+function getHistoryShortcutLabel(action: "undo" | "redo"): string {
+  const isMac =
+    typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+  const modifier = isMac ? "Cmd" : "Ctrl";
+  return action === "undo" ? `${modifier}+Z` : `${modifier}+Shift+Z`;
+}
+
+function getDomEditCoalesceKey(
+  selection: Pick<DomEditSelection, "id" | "selector" | "sourceFile">,
+  action: "move" | "resize",
+): string {
+  const target = selection.id || selection.selector || "selection";
+  return `${action}:${selection.sourceFile || "index.html"}:${target}`;
+}
+
 function findMatchingTimelineElementId(
   selection: Pick<
     DomEditSelection,
@@ -734,6 +774,7 @@ export function StudioApp() {
   const [globalDragOver, setGlobalDragOver] = useState(false);
   const [appToast, setAppToast] = useState<AppToast | null>(null);
   const [timelineVisible, setTimelineVisible] = useState(true);
+  const [captureFrameTime, setCaptureFrameTime] = useState(0);
   const [timelineEditorHintDismissed, setTimelineEditorHintState] = useState(
     getTimelineEditorHintDismissed,
   );
@@ -776,6 +817,26 @@ export function StudioApp() {
   const toggleTimelineVisibility = useCallback(() => {
     setTimelineVisible((visible) => !visible);
   }, []);
+  const toggleLeftSidebar = useCallback(() => {
+    setLeftCollapsed((collapsed) => !collapsed);
+  }, []);
+  const refreshCaptureFrameTime = useCallback(() => {
+    setCaptureFrameTime(usePlayerStore.getState().currentTime);
+  }, []);
+
+  useMountEffect(() => {
+    setCaptureFrameTime(usePlayerStore.getState().currentTime);
+    return liveTime.subscribe(setCaptureFrameTime);
+  });
+
+  const captureFrameHref = projectId
+    ? buildFrameCaptureUrl({
+        projectId,
+        compositionPath: activeCompPath,
+        currentTime: captureFrameTime,
+      })
+    : "#";
+  const captureFrameFilename = buildFrameCaptureFilename(activeCompPath, captureFrameTime);
   useMountEffect(() => () => {
     if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
   });
@@ -843,7 +904,7 @@ export function StudioApp() {
         return (
           <CompositionThumbnail
             previewUrl={`/api/projects/${pid}/preview/comp/${compSrc}`}
-            label={el.id || el.tag}
+            label={getTimelineElementLabel(el)}
             labelColor={style.label}
             accentColor={style.clip}
             seekTime={0}
@@ -858,7 +919,7 @@ export function StudioApp() {
         return (
           <CompositionThumbnail
             previewUrl={activePreviewUrl}
-            label={el.id || el.tag}
+            label={getTimelineElementLabel(el)}
             labelColor={style.label}
             accentColor={style.clip}
             selector={el.selector}
@@ -896,7 +957,7 @@ export function StudioApp() {
           <AudioWaveform
             audioUrl={audioUrl}
             waveformUrl={waveformUrl}
-            label={el.id || el.tag}
+            label={getTimelineElementLabel(el)}
             labelColor={style.label}
           />
         );
@@ -909,7 +970,7 @@ export function StudioApp() {
         return (
           <VideoThumbnail
             videoSrc={mediaSrc}
-            label={el.id || el.tag}
+            label={getTimelineElementLabel(el)}
             labelColor={style.label}
             duration={el.duration}
           />
@@ -920,7 +981,7 @@ export function StudioApp() {
         return (
           <CompositionThumbnail
             previewUrl={`/api/projects/${pid}/preview`}
-            label={el.id || el.tag}
+            label={getTimelineElementLabel(el)}
             labelColor={style.label}
             accentColor={style.clip}
             selector={el.selector}
@@ -1004,6 +1065,28 @@ export function StudioApp() {
           >
             +
           </button>
+          <button
+            type="button"
+            onClick={toggleTimelineVisibility}
+            className="ml-1 flex h-7 w-7 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-neutral-900 hover:text-neutral-200"
+            title={getTimelineToggleTitle(true)}
+            aria-label="Hide timeline editor"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M5 7h14" />
+              <path d="m8 11 4 4 4-4" />
+            </svg>
+          </button>
         </div>
       </div>
     </div>
@@ -1090,29 +1173,62 @@ export function StudioApp() {
 
   const editingPathRef = useRef(editingFile?.path);
   editingPathRef.current = editingFile?.path;
+  const editHistory = usePersistentEditHistory({ projectId });
 
-  const handleContentChange = useCallback((content: string) => {
+  const readProjectFile = useCallback(async (path: string): Promise<string> => {
     const pid = projectIdRef.current;
-    if (!pid) return;
-    const path = editingPathRef.current;
-    if (!path) return;
-
-    // Debounce the server write (600ms)
-    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-    saveTimerRef.current = setTimeout(() => {
-      fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
-        method: "PUT",
-        headers: { "Content-Type": "text/plain" },
-        body: content,
-      })
-        .then(() => {
-          if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
-          refreshTimerRef.current = setTimeout(() => setRefreshKey((k) => k + 1), 600);
-        })
-        .catch(() => {});
-    }, 600);
+    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 writeProjectFile = useCallback(async (path: string, content: string): Promise<void> => {
+    const pid = projectIdRef.current;
+    if (!pid) throw new Error("No active project");
+    const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
+      method: "PUT",
+      headers: { "Content-Type": "text/plain" },
+      body: content,
+    });
+    if (!response.ok) throw new Error(`Failed to save ${path}`);
+    if (editingPathRef.current === path) {
+      setEditingFile({ path, content });
+    }
   }, []);
 
+  const handleContentChange = useCallback(
+    (content: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const path = editingPathRef.current;
+      if (!path) return;
+
+      // Debounce the server write (600ms)
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(() => {
+        saveProjectFilesWithHistory({
+          projectId: pid,
+          label: "Edit source",
+          kind: "source",
+          coalesceKey: `source:${path}`,
+          files: { [path]: content },
+          readFile: readProjectFile,
+          writeFile: writeProjectFile,
+          recordEdit: editHistory.recordEdit,
+        })
+          .then(() => {
+            if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+            refreshTimerRef.current = setTimeout(() => setRefreshKey((k) => k + 1), 600);
+          })
+          .catch(() => {});
+      }, 600);
+    },
+    [editHistory.recordEdit, readProjectFile, writeProjectFile],
+  );
+
   const handleTimelineElementMove = useCallback(
     async (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => {
       const pid = projectIdRef.current;
@@ -1191,25 +1307,19 @@ export function StudioApp() {
         throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
       }
 
-      const saveResponse = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-        {
-          method: "PUT",
-          headers: { "Content-Type": "text/plain" },
-          body: patchedContent,
-        },
-      );
-      if (!saveResponse.ok) {
-        throw new Error(`Failed to save ${targetPath}`);
-      }
-
-      if (editingPathRef.current === targetPath) {
-        setEditingFile({ path: targetPath, content: patchedContent });
-      }
+      await saveProjectFilesWithHistory({
+        projectId: pid,
+        label: "Move timeline clip",
+        kind: "timeline",
+        files: { [targetPath]: patchedContent },
+        readFile: async () => originalContent,
+        writeFile: writeProjectFile,
+        recordEdit: editHistory.recordEdit,
+      });
 
       setRefreshKey((k) => k + 1);
     },
-    [activeCompPath, timelineElements],
+    [activeCompPath, editHistory.recordEdit, timelineElements, writeProjectFile],
   );
 
   const handleTimelineElementResize = useCallback(
@@ -1281,25 +1391,19 @@ export function StudioApp() {
         throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
       }
 
-      const saveResponse = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-        {
-          method: "PUT",
-          headers: { "Content-Type": "text/plain" },
-          body: patchedContent,
-        },
-      );
-      if (!saveResponse.ok) {
-        throw new Error(`Failed to save ${targetPath}`);
-      }
-
-      if (editingPathRef.current === targetPath) {
-        setEditingFile({ path: targetPath, content: patchedContent });
-      }
+      await saveProjectFilesWithHistory({
+        projectId: pid,
+        label: "Resize timeline clip",
+        kind: "timeline",
+        files: { [targetPath]: patchedContent },
+        readFile: async () => originalContent,
+        writeFile: writeProjectFile,
+        recordEdit: editHistory.recordEdit,
+      });
 
       setRefreshKey((k) => k + 1);
     },
-    [activeCompPath],
+    [activeCompPath, editHistory.recordEdit, writeProjectFile],
   );
 
   const showToast = useCallback((message: string, tone: AppToast["tone"] = "error") => {
@@ -1308,6 +1412,42 @@ export function StudioApp() {
     toastTimerRef.current = setTimeout(() => setAppToast(null), 4000);
   }, []);
 
+  const handleCaptureFrameClick = useCallback(
+    async (event: MouseEvent<HTMLAnchorElement>) => {
+      if (!projectId) return;
+      event.preventDefault();
+
+      const currentTime = usePlayerStore.getState().currentTime;
+      setCaptureFrameTime(currentTime);
+      const href = buildFrameCaptureUrl({
+        projectId,
+        compositionPath: activeCompPath,
+        currentTime,
+      });
+      const filename = buildFrameCaptureFilename(activeCompPath, currentTime);
+
+      try {
+        const response = await fetch(href, { cache: "no-store" });
+        if (!response.ok) {
+          throw new Error(`Capture failed (${response.status})`);
+        }
+        const blob = await response.blob();
+        const blobUrl = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = blobUrl;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(blobUrl), 0);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Capture failed";
+        showToast(message);
+      }
+    },
+    [activeCompPath, projectId, showToast],
+  );
+
   const handleTimelineElementDelete = useCallback(
     async (element: TimelineElement) => {
       const pid = projectIdRef.current;
@@ -1388,21 +1528,15 @@ export function StudioApp() {
           });
         }
 
-        const saveResponse = await fetch(
-          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "text/plain" },
-            body: patchedContent,
-          },
-        );
-        if (!saveResponse.ok) {
-          throw new Error(`Failed to save ${targetPath}`);
-        }
-
-        if (editingPathRef.current === targetPath) {
-          setEditingFile({ path: targetPath, content: patchedContent });
-        }
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: "Delete timeline clip",
+          kind: "timeline",
+          files: { [targetPath]: patchedContent },
+          readFile: async () => originalContent,
+          writeFile: writeProjectFile,
+          recordEdit: editHistory.recordEdit,
+        });
 
         usePlayerStore
           .getState()
@@ -1419,7 +1553,7 @@ export function StudioApp() {
         showToast(message);
       }
     },
-    [activeCompPath, showToast, timelineElements],
+    [activeCompPath, editHistory.recordEdit, showToast, timelineElements, writeProjectFile],
   );
 
   const handleBlockedTimelineEdit = useCallback(
@@ -1472,6 +1606,63 @@ export function StudioApp() {
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection]);
 
+  const handleUndo = useCallback(async () => {
+    const result = await editHistory.undo({
+      readFile: readProjectFile,
+      writeFile: writeProjectFile,
+    });
+    if (!result.ok && result.reason === "content-mismatch") {
+      showToast("File changed outside Studio. Undo history was not applied.", "info");
+      return;
+    }
+    if (result.ok && result.label) {
+      clearDomSelection();
+      setRefreshKey((key) => key + 1);
+      showToast(`Undid ${result.label}`, "info");
+    }
+  }, [clearDomSelection, editHistory, readProjectFile, showToast, writeProjectFile]);
+
+  const handleRedo = useCallback(async () => {
+    const result = await editHistory.redo({
+      readFile: readProjectFile,
+      writeFile: writeProjectFile,
+    });
+    if (!result.ok && result.reason === "content-mismatch") {
+      showToast("File changed outside Studio. Redo history was not applied.", "info");
+      return;
+    }
+    if (result.ok && result.label) {
+      clearDomSelection();
+      setRefreshKey((key) => key + 1);
+      showToast(`Redid ${result.label}`, "info");
+    }
+  }, [clearDomSelection, editHistory, readProjectFile, showToast, writeProjectFile]);
+
+  const handleUndoRef = useRef(handleUndo);
+  const handleRedoRef = useRef(handleRedo);
+  handleUndoRef.current = handleUndo;
+  handleRedoRef.current = handleRedo;
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      if (shouldIgnoreHistoryShortcut(event.target)) return;
+      const key = event.key.toLowerCase();
+      if (key === "z" && !event.shiftKey) {
+        event.preventDefault();
+        void handleUndoRef.current();
+        return;
+      }
+      if ((key === "z" && event.shiftKey) || (event.ctrlKey && !event.metaKey && key === "y")) {
+        event.preventDefault();
+        void handleRedoRef.current();
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
   const buildDomSelectionFromTarget = useCallback(
     (target: HTMLElement, options?: { preferClipAncestor?: boolean }) => {
       if (isMasterView) {
@@ -1570,6 +1761,8 @@ export function StudioApp() {
       selection: DomEditSelection,
       operations: Parameters<typeof applyPatchByTarget>[2][],
       options?: {
+        label?: string;
+        coalesceKey?: string;
         skipRefresh?: boolean;
         prepareContent?: (html: string, sourceFile: string) => string;
         shouldSave?: () => boolean;
@@ -1604,21 +1797,16 @@ export function StudioApp() {
         throw new Error(`Unable to patch ${selection.selector ?? selection.id ?? "selection"}`);
       }
 
-      const saveResponse = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-        {
-          method: "PUT",
-          headers: { "Content-Type": "text/plain" },
-          body: patchedContent,
-        },
-      );
-      if (!saveResponse.ok) {
-        throw new Error(`Failed to save ${targetPath}`);
-      }
-
-      if (editingPathRef.current === targetPath) {
-        setEditingFile({ path: targetPath, content: patchedContent });
-      }
+      await saveProjectFilesWithHistory({
+        projectId: pid,
+        label: options?.label ?? "Edit layer",
+        kind: "manual",
+        coalesceKey: options?.coalesceKey,
+        files: { [targetPath]: patchedContent },
+        readFile: async () => originalContent,
+        writeFile: writeProjectFile,
+        recordEdit: editHistory.recordEdit,
+      });
 
       if (options?.skipRefresh) {
         domEditSaveTimestampRef.current = Date.now();
@@ -1626,7 +1814,7 @@ export function StudioApp() {
         setRefreshKey((k) => k + 1);
       }
     },
-    [activeCompPath],
+    [activeCompPath, editHistory.recordEdit, writeProjectFile],
   );
 
   const handleDomMoveCommit = useCallback(
@@ -1637,7 +1825,11 @@ export function StudioApp() {
           ...buildDomEditMovePatchOperations(next.left, next.top),
           ...buildOppositeEdgePatchOperations(selection, "both"),
         ],
-        { skipRefresh: true },
+        {
+          skipRefresh: true,
+          label: "Move layer",
+          coalesceKey: getDomEditCoalesceKey(selection, "move"),
+        },
       );
     },
     [persistDomEditOperations],
@@ -1655,7 +1847,11 @@ export function StudioApp() {
           ...buildDomEditResizePatchOperations(next.width, next.height),
           ...buildOppositeEdgePatchOperations(selection, "both"),
         ],
-        { skipRefresh: true },
+        {
+          skipRefresh: true,
+          label: "Resize layer",
+          coalesceKey: getDomEditCoalesceKey(selection, "resize"),
+        },
       );
     },
     [persistDomEditOperations],
@@ -1681,7 +1877,10 @@ export function StudioApp() {
       element.style.setProperty(operation.property, operation.value);
     }
 
-    await persistDomEditOperations(selection, operations, { skipRefresh: true });
+    await persistDomEditOperations(selection, operations, {
+      skipRefresh: true,
+      label: "Make layer movable",
+    });
 
     const refreshed = doc ? findElementForSelection(doc, selection, selection.sourceFile) : element;
     if (refreshed) {
@@ -1744,6 +1943,7 @@ export function StudioApp() {
         );
       }
       await persistDomEditOperations(domEditSelection, operations, {
+        label: "Edit layer style",
         skipRefresh: true,
         prepareContent: importedFont
           ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
@@ -1788,6 +1988,7 @@ export function StudioApp() {
         domEditSelection,
         [buildDomEditTextPatchOperation(nextContent)],
         {
+          label: "Edit text",
           skipRefresh: true,
           shouldSave: () => domTextCommitVersionRef.current === commitVersion,
         },
@@ -1840,6 +2041,7 @@ export function StudioApp() {
 
       const importedFont = options?.importedFont ?? null;
       await persistDomEditOperations(selection, [buildDomEditTextPatchOperation(nextContent)], {
+        label: "Edit text",
         skipRefresh: true,
         prepareContent: importedFont
           ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
@@ -2285,21 +2487,15 @@ export function StudioApp() {
           }),
         );
 
-        const saveResponse = await fetch(
-          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "text/plain" },
-            body: patchedContent,
-          },
-        );
-        if (!saveResponse.ok) {
-          throw new Error(`Failed to save ${targetPath}`);
-        }
-
-        if (editingPathRef.current === targetPath) {
-          setEditingFile({ path: targetPath, content: patchedContent });
-        }
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: "Add timeline asset",
+          kind: "timeline",
+          files: { [targetPath]: patchedContent },
+          readFile: async () => originalContent,
+          writeFile: writeProjectFile,
+          recordEdit: editHistory.recordEdit,
+        });
 
         setRefreshKey((k) => k + 1);
       } catch (error) {
@@ -2308,7 +2504,7 @@ export function StudioApp() {
         showToast(message);
       }
     },
-    [activeCompPath, showToast, timelineElements],
+    [activeCompPath, editHistory.recordEdit, showToast, timelineElements, writeProjectFile],
   );
 
   const handleTimelineFileDrop = useCallback(
@@ -2621,54 +2817,54 @@ export function StudioApp() {
         {/* Right: toolbar buttons */}
         <div className="flex items-center gap-1.5">
           <button
-            onClick={() => setLeftCollapsed((v) => !v)}
+            type="button"
+            onClick={() => void handleUndo()}
+            disabled={!editHistory.canUndo}
             className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
-              !leftCollapsed
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "bg-transparent border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800"
+              editHistory.canUndo
+                ? "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
+                : "border-neutral-900 text-neutral-700"
             }`}
-            title={leftCollapsed ? "Show sidebar" : "Hide sidebar"}
+            title={
+              editHistory.undoLabel
+                ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
+                : `Undo (${getHistoryShortcutLabel("undo")})`
+            }
+            aria-label="Undo"
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <rect x="3" y="3" width="18" height="18" rx="2" />
-              <path d="M9 3v18" />
-            </svg>
+            <RotateCcw size={14} />
           </button>
           <button
             type="button"
-            onClick={toggleTimelineVisibility}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors ${
-              timelineVisible
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "text-neutral-300 border-neutral-700 hover:border-neutral-500 hover:bg-neutral-800"
+            onClick={() => void handleRedo()}
+            disabled={!editHistory.canRedo}
+            className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
+              editHistory.canRedo
+                ? "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
+                : "border-neutral-900 text-neutral-700"
             }`}
-            title={getTimelineToggleTitle(timelineVisible)}
-            aria-label={timelineVisible ? "Hide timeline editor" : "Show timeline editor"}
+            title={
+              editHistory.redoLabel
+                ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
+                : `Redo (${getHistoryShortcutLabel("redo")})`
+            }
+            aria-label="Redo"
           >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-            >
-              <rect x="3" y="13" width="18" height="8" rx="1" />
-              <line x1="3" y1="9" x2="21" y2="9" />
-              <line x1="3" y1="5" x2="21" y2="5" />
-            </svg>
-            <span>Timeline</span>
+            <RotateCw size={14} />
           </button>
+          <a
+            href={captureFrameHref}
+            download={captureFrameFilename}
+            onClick={handleCaptureFrameClick}
+            onFocus={refreshCaptureFrameTime}
+            onPointerDown={refreshCaptureFrameTime}
+            className="h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border border-neutral-700 text-neutral-300 transition-colors hover:border-neutral-500 hover:bg-neutral-800"
+            title="Capture current frame"
+            aria-label="Capture current frame"
+          >
+            <Camera size={14} />
+            <span>Capture</span>
+          </a>
           <button
             onClick={() => {
               if (rightCollapsed || rightPanelTab !== "design") {
@@ -2704,7 +2900,32 @@ export function StudioApp() {
       {/* Main content: sidebar + preview + right panel */}
       <div className="flex flex-1 min-h-0">
         {/* Left sidebar: Compositions + Assets (resizable, collapsible) */}
-        {!leftCollapsed && (
+        {leftCollapsed ? (
+          <div className="flex w-10 flex-shrink-0 flex-col items-center border-r border-neutral-800/50 bg-neutral-950 pt-1">
+            <button
+              type="button"
+              onClick={toggleLeftSidebar}
+              className="flex h-8 w-8 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="Show sidebar"
+              aria-label="Show 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="M5 4v16" />
+                <path d="m10 7 5 5-5 5" />
+              </svg>
+            </button>
+          </div>
+        ) : (
           <LeftSidebar
             width={leftWidth}
             projectId={projectId}
@@ -2751,6 +2972,7 @@ export function StudioApp() {
             }
             onLint={handleLint}
             linting={linting}
+            onToggleCollapse={toggleLeftSidebar}
           />
         )}