@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/components/StudioHeader.tsx

@@ -1,11 +1,10 @@
-import { useRef, type MouseEvent } from "react";
-import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
-import { getHistoryShortcutLabel } from "../utils/studioHelpers";
+import type { MouseEvent } from "react";
+import { Camera } from "../icons/SystemIcons";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useViewMode, type StudioViewMode } from "../contexts/ViewModeContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { Tooltip } from "./ui";
+import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
+import { Dock } from "./dock/Dock";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -41,8 +40,8 @@ function HyperframesLogo() {
           y2="37.482"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
         <linearGradient
           id="hf-g1"
@@ -52,8 +51,8 @@ function HyperframesLogo() {
           y2="6.303"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
       </defs>
       {/* heygen label */}
@@ -139,76 +138,18 @@ function HyperframesLogo() {
   );
 }
 
-const VIEW_MODE_OPTIONS: Array<{ mode: StudioViewMode; label: string }> = [
-  { mode: "storyboard", label: "Storyboard" },
-  { mode: "timeline", label: "Preview" },
-];
-
-/** Segmented control switching the main stage between storyboard and preview. */
-export function ViewModeToggle() {
-  const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
-
-  const selectMode = (mode: StudioViewMode) => {
-    if (mode === viewMode) return;
-    if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
-  };
-
-  // Complete APG tabs pattern: roving tabIndex + arrow-key navigation.
-  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-    e.preventDefault();
-    const dir = e.key === "ArrowLeft" ? -1 : 1;
-    const next = (index + dir + VIEW_MODE_OPTIONS.length) % VIEW_MODE_OPTIONS.length;
-    tabRefs.current[next]?.focus();
-    selectMode(VIEW_MODE_OPTIONS[next].mode);
-  };
-
-  return (
-    <div
-      className="flex items-center gap-0.5 rounded-md bg-neutral-800 p-0.5"
-      role="tablist"
-      aria-label="Studio view"
-    >
-      {VIEW_MODE_OPTIONS.map(({ mode, label }, index) => {
-        const active = viewMode === mode;
-        return (
-          <button
-            key={mode}
-            ref={(el) => {
-              tabRefs.current[index] = el;
-            }}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            tabIndex={active ? 0 : -1}
-            onClick={() => selectMode(mode)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            className={`rounded px-3 py-1 text-[11px] font-medium transition-colors active:scale-[0.98] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
-              active ? "bg-neutral-200 text-neutral-900" : "text-neutral-400 hover:text-neutral-200"
-            }`}
-          >
-            {label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 /**
  * Does the header's Inspector button open the panel, or close it?
  *
- * Takes the EFFECTIVE collapse state, so a panel the window has railed away
- * counts as closed even though the user's stored intent still says open. The
- * argument name is the guard: passing raw intent here is the bug this exists
- * to keep out.
+ * The dock has no separate "railed by window width" state (it shrinks panels,
+ * never auto-hides the group), so `rightCollapsed` here is already the state
+ * that decides whether the panel is actually showing.
  */
 export function shouldOpenInspector(
-  effectiveRightCollapsed: boolean,
+  rightCollapsed: boolean,
   inspectorPanelActive: boolean,
 ): boolean {
-  return effectiveRightCollapsed || !inspectorPanelActive;
+  return rightCollapsed || !inspectorPanelActive;
 }
 
 // fallow-ignore-next-line complexity
@@ -222,165 +163,121 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
-  // effectiveRightCollapsed, not the raw intent: in the auto-railed state the
-  // intent is still "open" while the panel is hidden, so branching on intent
-  // made this button write rightCollapsed=true — and that value is synced into
-  // the shareable Studio URL, so a dead click would rewrite a link.
-  const { effectiveRightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  const { projectId, renderQueue } = useStudioShellContext();
+  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
-    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
+    <div className="flex items-center justify-between h-10 px-3 bg-surface border-b border-border-strong shrink-0">
       {/* Left: logo + project name */}
       <div className="flex items-center gap-3">
         <HyperframesLogo />
-        <span className="text-neutral-700 select-none" aria-hidden="true">
+        <span className="text-text-5 select-none" aria-hidden="true">
           |
         </span>
-        <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
+        <span className="text-step-11 font-medium text-text-1">{projectId}</span>
       </div>
-      {/* Center: storyboard / preview toggle */}
-      <ViewModeToggle />
       {/* Right: toolbar buttons */}
-      <div className="flex items-center gap-1.5">
-        <Tooltip
-          label={
-            editHistory.undoLabel
-              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
-              : `Undo (${getHistoryShortcutLabel("undo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "undo" });
-              void handleUndo();
-            }}
-            disabled={!editHistory.canUndo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canUndo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Undo"
-          >
-            <RotateCcw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip
-          label={
-            editHistory.redoLabel
-              ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
-              : `Redo (${getHistoryShortcutLabel("redo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "redo" });
-              void handleRedo();
-            }}
-            disabled={!editHistory.canRedo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canRedo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Redo"
-          >
-            <RotateCw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
-          <a
-            href={captureFrameHref}
-            download={captureFrameFilename}
-            onClick={(e) => {
-              if (capturing) {
-                e.preventDefault();
-                return;
-              }
-              trackStudioEvent("toolbar_action", { action: "capture_frame" });
-              handleCaptureFrameClick(e);
-            }}
-            onFocus={refreshCaptureFrameTime}
-            onPointerDown={refreshCaptureFrameTime}
-            aria-disabled={capturing || undefined}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium transition-colors ${
-              capturing
-                ? "text-neutral-600 cursor-default"
-                : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.98]"
-            }`}
-            aria-label={capturing ? "Capturing frame" : "Capture current frame"}
-          >
-            {capturing ? (
-              <svg
-                className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
-                viewBox="0 0 24 24"
-                fill="none"
-                aria-hidden="true"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
+      <div className="flex items-center gap-3">
+        <div className="flex h-ctl items-center divide-x divide-border-strong overflow-hidden rounded-md border border-border-strong bg-bg-2">
+          <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
+            {/* A real download link, so it wears Button's recipe rather than being
+              one: `download` on an <a> is what saves the frame, and no <button>
+              can do that. `enabled:` never matches a link, so the ghost
+              variant's hover look is repeated unprefixed here. */}
+            <a
+              href={captureFrameHref}
+              download={captureFrameFilename}
+              onClick={(e) => {
+                if (capturing) {
+                  e.preventDefault();
+                  return;
+                }
+                trackStudioEvent("toolbar_action", { action: "capture_frame" });
+                handleCaptureFrameClick(e);
+              }}
+              onFocus={refreshCaptureFrameTime}
+              onPointerDown={refreshCaptureFrameTime}
+              aria-disabled={capturing || undefined}
+              className={cn(
+                buttonBase,
+                buttonVariants.ghost,
+                buttonSizes.md,
+                "h-full rounded-none max-[1000px]:px-2",
+                capturing
+                  ? "text-text-4 cursor-default"
+                  : "hover:bg-hover hover:text-text-0 active:scale-[0.98]",
+              )}
+              aria-label={capturing ? "Capturing frame" : "Capture current frame"}
+            >
+              {capturing ? (
+                <svg
+                  className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+              ) : (
+                <Camera size={14} />
+              )}
+              <span className="max-[1000px]:hidden">{capturing ? "Capturing…" : "Capture"}</span>
+            </a>
+          </Tooltip>
+          <Tooltip label="Inspector" side="bottom">
+            <Button
+              variant="ghost"
+              aria-label="Inspector"
+              aria-pressed={inspectorButtonActive}
+              className={cn(
+                "h-full rounded-none",
+                inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent",
+              )}
+              icon={
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
                   stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            ) : (
-              <Camera size={14} />
-            )}
-            <span>{capturing ? "Capturing…" : "Capture"}</span>
-          </a>
-        </Tooltip>
-        <Tooltip label="Inspector" side="bottom">
-          <button
-            type="button"
-            onClick={() => {
-              if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
-                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
-                setRightPanelTab("design");
-                setRightCollapsed(false);
-                return;
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
+                </svg>
               }
-              trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
-              // Keep the current selection when collapsing the Inspector — closing
-              // the panel shouldn't deselect the element.
-              setRightCollapsed(true);
-            }}
-            aria-pressed={inspectorButtonActive}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
-              inspectorButtonActive
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
-            }`}
-            aria-label="Inspector"
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
+              onClick={() => {
+                if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
+                  trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
+                  setRightPanelTab("design");
+                  setRightCollapsed(false);
+                  return;
+                }
+                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
+                // Keep the current selection when collapsing the Inspector — closing
+                // the panel shouldn't deselect the element.
+                setRightCollapsed(true);
+              }}
             >
-              <circle cx="12" cy="12" r="10" />
-              <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-            </svg>
-            Inspector
-          </button>
-        </Tooltip>
+              Inspector
+            </Button>
+          </Tooltip>
+        </div>
+        <Dock.WindowMenu />
         <Tooltip
           label={
             ffmpegMissing
@@ -391,8 +288,9 @@ export function StudioHeader({
           }
           side="bottom"
         >
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            data-testid="header-export"
             disabled={isRendering}
             onClick={() => {
               if (isRendering) return;
@@ -406,10 +304,9 @@ export function StudioHeader({
               if (ffmpegMissing) return;
               onExport?.();
             }}
-            className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isRendering ? "Rendering…" : "Export"}
-          </button>
+          </Button>
         </Tooltip>
       </div>
     </div>

package/src/components/StudioLeftPanels.tsx

@@ -0,0 +1,202 @@
+import { useCallback, type ReactNode } from "react";
+import { SourceEditor } from "./editor/SourceEditor";
+import { FileTree } from "./editor/FileTree";
+import { MediaPreview } from "./MediaPreview";
+import { AssetsTab } from "./sidebar/AssetsTab";
+import { BlocksTab, type BlockPreviewInfo } from "./sidebar/BlocksTab";
+import { CompositionsPanel } from "./sidebar/CompositionsPanel";
+import { SidebarLintButton } from "./sidebar/SidebarLintButton";
+import { Dock } from "./dock/Dock";
+import { useDockLayoutStore } from "./dock/dockLayoutStore";
+import { isMediaFile } from "../utils/mediaTypes";
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { useFileManagerContext } from "../contexts/FileManagerContext";
+import { getPersistedRenderSettings } from "./renders/renderSettings";
+
+interface StudioLeftPanelsProps {
+  onSelectComposition: (comp: string) => void;
+  onAddBlock: (blockName: string) => void;
+  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
+  onLint: () => void;
+  linting: boolean;
+  lintFindingCount?: number;
+  lintHasError?: boolean;
+  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
+  onAddAssetToTimeline?: (path: string) => void;
+  onAddCompositionToTimeline?: (path: string) => void;
+}
+
+function PanelColumn({ footer, children }: { footer: ReactNode; children: ReactNode }) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950">
+      <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      {footer}
+    </div>
+  );
+}
+
+// fallow-ignore-next-line complexity
+export function StudioLeftPanels({
+  onSelectComposition,
+  onAddBlock,
+  onPreviewBlock,
+  onLint,
+  linting,
+  lintFindingCount,
+  lintHasError,
+  lintFindingsByFile,
+  onAddAssetToTimeline,
+  onAddCompositionToTimeline,
+}: StudioLeftPanelsProps) {
+  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
+  const {
+    compositions,
+    assets,
+    editingFile,
+    fileTree,
+    revealSourceOffset,
+    handleFileSelect,
+    handleCreateFile,
+    handleCreateFolder,
+    handleDeleteFile,
+    handleRenameFile,
+    handleDuplicateFile,
+    handleMoveFile,
+    handleImportFiles,
+    handleContentChange,
+  } = useFileManagerContext();
+
+  const handleRenderComposition = useCallback(
+    async (comp: string) => {
+      // startRender refuses without an encoder and reports why as a row in the
+      // Renders panel, which may be closed or behind another tab: bring it up.
+      if (renderQueue.ffmpegMissing) {
+        useDockLayoutStore.getState().activatePanel("renders");
+        return;
+      }
+      await waitForPendingDomEditSaves();
+      const { format, quality, fps } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps });
+    },
+    [renderQueue, waitForPendingDomEditSaves],
+  );
+
+  const importFiles = async (files: FileList, dir?: string) => {
+    await handleImportFiles(files, dir);
+  };
+  const lintButton = (
+    <SidebarLintButton
+      onLint={onLint}
+      linting={linting}
+      findingCount={lintFindingCount}
+      hasError={lintHasError}
+    />
+  );
+
+  return (
+    <>
+      <Dock.Panel id="compositions">
+        <PanelColumn footer={lintButton}>
+          <CompositionsPanel
+            projectId={projectId}
+            compositions={compositions}
+            activeComposition={editingFile?.path ?? null}
+            onSelect={onSelectComposition}
+            onAddToTimeline={onAddCompositionToTimeline}
+            onRenderComposition={handleRenderComposition}
+            isRendering={renderQueue.isRendering}
+            lintFindingsByFile={lintFindingsByFile}
+          />
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="assets">
+        <PanelColumn footer={lintButton}>
+          <AssetsTab
+            projectId={projectId}
+            assets={assets}
+            onImport={importFiles}
+            onDelete={handleDeleteFile}
+            onRename={handleRenameFile}
+            onAddAssetToTimeline={onAddAssetToTimeline}
+          />
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="code">
+        <PanelColumn footer={lintButton}>
+          <div className="flex min-h-0 flex-1">
+            {fileTree.length > 0 && (
+              <div className="w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto">
+                <FileTree
+                  files={fileTree}
+                  activeFile={editingFile?.path ?? null}
+                  onSelectFile={handleFileSelect}
+                  onCreateFile={handleCreateFile}
+                  onCreateFolder={handleCreateFolder}
+                  onDeleteFile={handleDeleteFile}
+                  onRenameFile={handleRenameFile}
+                  onDuplicateFile={handleDuplicateFile}
+                  onMoveFile={handleMoveFile}
+                  onImportFiles={importFiles}
+                  lintFindingsByFile={lintFindingsByFile}
+                />
+              </div>
+            )}
+            <div className="flex-1 overflow-hidden min-w-0">
+              <CodeBody
+                projectId={projectId}
+                editingFile={editingFile}
+                revealOffset={revealSourceOffset}
+                onChange={handleContentChange}
+              />
+            </div>
+          </div>
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="catalog">
+        <PanelColumn footer={lintButton}>
+          <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
+        </PanelColumn>
+      </Dock.Panel>
+    </>
+  );
+}
+
+function CodeBody({
+  projectId,
+  editingFile,
+  revealOffset,
+  onChange,
+}: {
+  projectId: string;
+  editingFile: { path: string; content: string | null } | null;
+  revealOffset: React.ComponentProps<typeof SourceEditor>["revealOffset"];
+  onChange: (content: string) => void;
+}) {
+  if (!editingFile) {
+    return (
+      <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+        Select a file to edit
+      </div>
+    );
+  }
+  if (isMediaFile(editingFile.path)) {
+    return <MediaPreview projectId={projectId} filePath={editingFile.path} />;
+  }
+  // Never mount the editor on unloaded content: a keystroke would autosave an
+  // empty document over the real file.
+  if (editingFile.content == null) {
+    return (
+      <div className="flex h-full items-center justify-center text-[11px] text-neutral-600">
+        Loading {editingFile.path}…
+      </div>
+    );
+  }
+  return (
+    <SourceEditor
+      content={editingFile.content}
+      filePath={editingFile.path}
+      onChange={onChange}
+      revealOffset={revealOffset}
+    />
+  );
+}

package/src/components/StudioOverlays.tsx

@@ -77,7 +77,7 @@ export function StudioOverlays({
       )}
       {/* One bottom-right stack so the feedback card and toasts queue instead
           of covering each other. Empty when nothing is showing. */}
-      <div className="absolute bottom-6 right-6 z-[91] flex flex-col items-end gap-2">
+      <div className="absolute bottom-6 right-6 z-91 flex flex-col items-end gap-2">
         {toasts.map((toast) => (
           <StudioToast
             key={toast.id}