@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/renders/RenderQueue.tsx

@@ -2,6 +2,11 @@ import { memo, useState, useRef, useEffect } from "react";
 import { RenderQueueItem } from "./RenderQueueItem";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 
+export interface CompositionDimensions {
+  width: number;
+  height: number;
+}
+
 type StartRenderHandler = (
   format: "mp4" | "webm" | "mov",
   quality: "draft" | "standard" | "high",
@@ -16,37 +21,97 @@ interface RenderQueueProps {
   onClearCompleted: () => void;
   onStartRender: StartRenderHandler;
   isRendering: boolean;
+  /**
+   * Authored dimensions of the active composition. Used to pick the
+   * matching preset (landscape / portrait / square) when the user selects
+   * a 1080p or 4K scale. `null` falls back to landscape (legacy default).
+   */
+  compositionDimensions?: CompositionDimensions | null;
 }
 
-// Indexing the table by `ResolutionPreset | "auto"` makes adding a new preset
-// to `core.types` (e.g. an 8K row) a TypeScript error here instead of a
-// silently missing dropdown entry. Order is fixed by the array below.
-const RESOLUTION_LABELS: Record<ResolutionPreset | "auto", { label: string; title: string }> = {
-  auto: { label: "Auto", title: "Render at the composition's authored resolution" },
-  landscape: { label: "1080p ↔", title: "1920×1080 landscape" },
-  portrait: { label: "1080p ↕", title: "1080×1920 portrait" },
-  "landscape-4k": {
-    label: "4K ↔",
-    title: "3840×2160 — supersamples a 1080p composition via Chrome DPR. Slower, larger files.",
-  },
-  "portrait-4k": {
-    label: "4K ↕",
-    title: "2160×3840 — supersamples a 1080p portrait composition via Chrome DPR.",
-  },
+// Orientation is derived from the composition's authored aspect ratio,
+// not chosen by the user — picking "1080p portrait" for a landscape comp
+// would just produce a wrong-aspect render.
+type RenderScale = "auto" | "1080p" | "4k";
+
+const SCALE_OPTION_ORDER: RenderScale[] = ["auto", "1080p", "4k"];
+
+const SCALE_LABEL: Record<RenderScale, string> = {
+  auto: "Auto",
+  "1080p": "1080p",
+  "4k": "4K",
 };
 
-const RESOLUTION_OPTION_ORDER: (ResolutionPreset | "auto")[] = [
-  "auto",
-  "landscape",
-  "portrait",
-  "landscape-4k",
-  "portrait-4k",
-];
+// Mirrors `CANVAS_DIMENSIONS` in @hyperframes/core. Studio can't import from
+// the core barrel (it transitively pulls in node:fs) and the values are stable.
+const CANVAS_DIMENSIONS: Record<ResolutionPreset, CompositionDimensions> = {
+  landscape: { width: 1920, height: 1080 },
+  portrait: { width: 1080, height: 1920 },
+  "landscape-4k": { width: 3840, height: 2160 },
+  "portrait-4k": { width: 2160, height: 3840 },
+  square: { width: 1080, height: 1080 },
+  "square-4k": { width: 2160, height: 2160 },
+};
+
+type CompAspect = "landscape" | "portrait" | "square";
 
-const RESOLUTION_OPTIONS = RESOLUTION_OPTION_ORDER.map((value) => ({
-  value,
-  ...RESOLUTION_LABELS[value],
-}));
+function compAspect(dims: CompositionDimensions | null | undefined): CompAspect {
+  // Missing dims fall through to landscape (legacy default — "landscape" was
+  // the first preset). Studio shows resolved dims inline, so the user can see
+  // when this fallback is in effect.
+  if (dims == null) return "landscape";
+  if (dims.width === dims.height) return "square";
+  return dims.height > dims.width ? "portrait" : "landscape";
+}
+
+function resolveResolution(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): ResolutionPreset | "auto" {
+  if (scale === "auto") return "auto";
+  const aspect = compAspect(dims);
+  if (scale === "1080p") return aspect;
+  return aspect === "landscape"
+    ? "landscape-4k"
+    : aspect === "portrait"
+      ? "portrait-4k"
+      : "square-4k";
+}
+
+function resolvedDimensions(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): CompositionDimensions | null {
+  if (scale === "auto") return dims ?? null;
+  const preset = resolveResolution(scale, dims);
+  return preset === "auto" ? null : CANVAS_DIMENSIONS[preset];
+}
+
+// Mirrors the producer's resolveDeviceScaleFactor validation
+// (renderOrchestrator.ts:608): the chosen preset must match the comp's aspect
+// ratio exactly (cross-multiplied), can't downsample, and must be an integer
+// scale factor. Without this guard the user can pick a preset that throws at
+// render time — e.g. 1080p on a 1080×1080 square or 1080p on a 1280×720 comp
+// (1.5× isn't integer).
+function scaleApplies(scale: RenderScale, dims: CompositionDimensions | null | undefined): boolean {
+  if (scale === "auto" || dims == null) return true;
+  const preset = resolveResolution(scale, dims);
+  if (preset === "auto") return true;
+  const target = CANVAS_DIMENSIONS[preset];
+  if (target.width * dims.height !== target.height * dims.width) return false;
+  if (target.width < dims.width) return false;
+  return Number.isInteger(target.width / dims.width);
+}
+
+function scaleOptionLabel(
+  scale: RenderScale,
+  dims: CompositionDimensions | null | undefined,
+): string {
+  const resolved = resolvedDimensions(scale, dims);
+  return resolved
+    ? `${SCALE_LABEL[scale]} · ${resolved.width}×${resolved.height}`
+    : SCALE_LABEL[scale];
+}
 
 const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string }> = {
   mp4: { label: "MP4", desc: "Best for general use. Smallest file, universal playback." },
@@ -127,9 +192,11 @@ const QUALITY_OPTIONS: {
 function FormatExportButton({
   onStartRender,
   isRendering,
+  compositionDimensions,
 }: {
   onStartRender: StartRenderHandler;
   isRendering: boolean;
+  compositionDimensions?: CompositionDimensions | null;
 }) {
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">("mp4");
   const [quality, setQuality] = useState<"draft" | "standard" | "high">("standard");
@@ -150,12 +217,11 @@ function FormatExportButton({
         value={resolution}
         onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
         disabled={isRendering}
-        title={RESOLUTION_OPTIONS.find((r) => r.value === resolution)?.title}
         className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
       >
-        {RESOLUTION_OPTIONS.map((r) => (
-          <option key={r.value} value={r.value} title={r.title}>
-            {r.label}
+        {SCALE_OPTION_ORDER.map((value) => (
+          <option key={value} value={value} disabled={!scaleApplies(value, compositionDimensions)}>
+            {scaleOptionLabel(value, compositionDimensions)}
           </option>
         ))}
       </select>
@@ -215,6 +281,7 @@ export const RenderQueue = memo(function RenderQueue({
   onClearCompleted,
   onStartRender,
   isRendering,
+  compositionDimensions,
 }: RenderQueueProps) {
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -241,7 +308,11 @@ export const RenderQueue = memo(function RenderQueue({
               Clear
             </button>
           )}
-          <FormatExportButton onStartRender={onStartRender} isRendering={isRendering} />
+          <FormatExportButton
+            onStartRender={onStartRender}
+            isRendering={isRendering}
+            compositionDimensions={compositionDimensions}
+          />
         </div>
       </div>
 

package/src/components/renders/useRenderQueue.ts

@@ -14,8 +14,14 @@ export interface RenderJob {
 // Mirrors `CanvasResolution` from @hyperframes/core. Kept local because
 // studio's tsconfig doesn't include node types, and the core barrel
 // transitively pulls in modules with `node:fs` imports. Drift risk is
-// low (4 string literals tied to a stable enum).
-export type ResolutionPreset = "landscape" | "portrait" | "landscape-4k" | "portrait-4k";
+// low (6 string literals kept in sync manually with CANVAS_DIMENSIONS).
+export type ResolutionPreset =
+  | "landscape"
+  | "portrait"
+  | "landscape-4k"
+  | "portrait-4k"
+  | "square"
+  | "square-4k";
 
 export interface StartRenderOptions {
   fps?: number;

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";
 
@@ -39,201 +49,191 @@ interface LeftSidebarProps {
   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,
-  takeoverContent,
-}: 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 }}
-    >
-      {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-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"
-                  }`}
+    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" }}
                 >
-                  Assets
-                </button>
+                  <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>
-              {onToggleCollapse && (
+            </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}
+                    />
+                  </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>
+            )}
+
+            {/* Lint button pinned at the bottom */}
+            {onLint && (
+              <div className="border-t border-neutral-800 p-2 flex-shrink-0">
                 <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"
+                  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="14"
-                    height="14"
+                    width="12"
+                    height="12"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
+                    strokeWidth="2"
                   >
-                    <path d="m14 7-5 5 5 5" />
-                    <path d="M19 4v16" />
+                    <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>
-
-          {/* 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}
-                  />
-                </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>
-          )}
-
-          {/* 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>
-  );
-});
+            )}
+          </>
+        )}
+      </div>
+    );
+  }),
+);