@hyperframes/studio 0.8.52 → 0.8.53

package/src/components/dock/dockLayoutStore.ts

@@ -25,6 +25,8 @@ export interface DockSnapshot {
   /** Open panels whose tab is showing and whose group is not hidden. */
   visiblePanels: ReadonlySet<PanelId>;
   activePanel: PanelId | null;
+  /** The tab each group shows, so a restored layout still records what every side column last showed. */
+  groupActivePanels?: readonly PanelId[];
 }
 
 type LastActive = Partial<Record<PanelZone, PanelId>>;
@@ -53,13 +55,17 @@ export const useDockLayoutStore = create<DockLayoutState>((set, get) => ({
   lastActive: {},
   pendingActivation: null,
   attach: (controller) => set({ controller }),
-  detach: () => set({ controller: null }),
+  detach: () => set({ controller: null, lastActive: {} }),
   sync: (snapshot) =>
     set((state) => {
+      const lastActive = { ...state.lastActive };
+      for (const id of snapshot.groupActivePanels ?? []) {
+        const zone = PANEL_DEFINITIONS[id].zone;
+        if (zone !== "center") lastActive[zone] = id;
+      }
       const { activePanel } = snapshot;
-      if (!activePanel) return snapshot;
-      const zone = PANEL_DEFINITIONS[activePanel].zone;
-      return { ...snapshot, lastActive: { ...state.lastActive, [zone]: activePanel } };
+      if (activePanel) lastActive[PANEL_DEFINITIONS[activePanel].zone] = activePanel;
+      return { ...snapshot, lastActive };
     }),
   takePendingActivation: () => {
     const { pendingActivation } = get();
@@ -89,3 +95,14 @@ export const useDockLayoutStore = create<DockLayoutState>((set, get) => ({
   },
   resetLayout: () => get().controller?.reset(),
 }));
+
+/** The panel of `zone` the user is looking at: the last one focused if still showing, else any showing. */
+export function visiblePanelInZone(
+  zone: PanelZone,
+  lastActive: LastActive,
+  visiblePanels: ReadonlySet<PanelId>,
+): PanelId | null {
+  const last = lastActive[zone];
+  if (last && visiblePanels.has(last)) return last;
+  return panelsInZone(zone).find((id) => visiblePanels.has(id)) ?? null;
+}

package/src/components/editor/SnapToolbar.test.tsx

@@ -5,7 +5,6 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { useAppHotkeys } from "../../hooks/useAppHotkeys";
 import { usePlayerStore } from "../../player/store/playerStore";
-import type { LeftSidebarHandle } from "../sidebar/LeftSidebar";
 import type { DomEditSelection } from "./domEditing";
 import { SnapToolbar } from "./SnapToolbar";
 import { usePreviewGuidesStore } from "./previewGuidesStore";
@@ -31,7 +30,6 @@ function renderToolbar(onSnapChange = vi.fn()) {
 function AppHotkeyHarness() {
   const domEditSelectionRef = useRef<DomEditSelection | null>(null);
   const clearDomSelectionRef = useRef<() => void>(() => undefined);
-  const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
 
   useAppHotkeys({
     handleTimelineElementsDelete: vi.fn(async () => {}),
@@ -50,7 +48,6 @@ function AppHotkeyHarness() {
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
-    leftSidebarRef,
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),

package/src/components/nle/NLEContext.tsx

@@ -4,17 +4,11 @@ import { useTimelinePlayer, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
 import type { CompositionLevel } from "./CompositionBreadcrumb";
 import { useCompositionStack } from "./useCompositionStack";
-import { MIN_TIMELINE_H, fitTimelineHeight } from "../../utils/fitPanels";
 import { setCompositionSourceMap } from "../editor/domEditingDom";
 import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
-import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 import { createStableContext } from "../../utils/hmrStableContext";
 
-// Timeline gets a generous default height so the preview isn't oversized and the
-// tracks have room to breathe (CapCut-style). Users can still drag the divider.
-const DEFAULT_TIMELINE_H = 360;
-
 export function shouldDisableTimelineWhileCompositionLoading(compositionLoading: boolean): boolean {
   return compositionLoading;
 }
@@ -34,10 +28,6 @@ export interface NLEContextValue {
   handleDrillDown: (element: TimelineElement) => void;
   compIdToSrc: Map<string, string>;
   // layout state
-  timelineH: number;
-  setTimelineH: React.Dispatch<React.SetStateAction<number>>;
-  persistTimelineH: (height: number) => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
   // composition loading
   compositionLoading: boolean;
   setCompositionLoading: (loading: boolean) => void;
@@ -256,35 +246,6 @@ export function NLEProvider({
     });
   }, [compIdToSrc]);
 
-  // Resizable timeline height — persisted alongside zoom/pan so the user's
-  // workspace layout survives reloads.
-  const [timelineH, setTimelineH] = useState(() => {
-    const stored = readStudioUiPreferences().timelineHeight;
-    return stored !== undefined && stored >= MIN_TIMELINE_H ? stored : DEFAULT_TIMELINE_H;
-  });
-  const persistTimelineH = useCallback((height: number) => {
-    writeStudioUiPreferences({ timelineHeight: Math.round(height) });
-  }, []);
-  const containerRef = useRef<HTMLDivElement>(null);
-  // A height persisted on a tall window can exceed this window's container and
-  // collapse the flex-1 preview to 0px. Observing the container rather than
-  // clamping once at mount is what makes a window RESIZED after load behave the
-  // same as one loaded at that size: dragging 760 -> 520 tall used to leave the
-  // timeline at its stored 429px and the preview at 47px.
-  useEffect(() => {
-    const element = containerRef.current;
-    if (!element || typeof ResizeObserver === "undefined") return;
-    const reconcile = () => {
-      const containerH = element.getBoundingClientRect().height;
-      if (!containerH) return;
-      setTimelineH((prev) => fitTimelineHeight(containerH, prev));
-    };
-    reconcile();
-    const observer = new ResizeObserver(reconcile);
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, []);
-
   const hasLoadedOnceRef = useRef(false);
   const [compositionLoading, setCompositionLoadingRaw] = useState(true);
   const setCompositionLoading = useCallback((loading: boolean) => {
@@ -317,10 +278,6 @@ export function NLEProvider({
     handleNavigateComposition,
     handleDrillDown,
     compIdToSrc,
-    timelineH,
-    setTimelineH,
-    persistTimelineH,
-    containerRef,
     compositionLoading,
     setCompositionLoading,
     timelineDisabled,

package/src/components/nle/TimelinePane.tsx

@@ -2,7 +2,6 @@ import { useCallback, type ReactNode } from "react";
 import { Timeline } from "../../player";
 import type { TimelineElement } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
-import { TimelineResizeDivider } from "./TimelineResizeDivider";
 import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
 import { trackStudioExpandedClipEdit } from "../../telemetry/events";
 import { useNLEContext } from "./NLEContext";
@@ -132,10 +131,6 @@ export function TimelinePane({
     handleDrillDown,
     compositionStack,
     updateCompositionStack,
-    timelineH,
-    setTimelineH,
-    persistTimelineH,
-    containerRef,
     timelineDisabled,
     timelineSessionEpoch,
   } = useNLEContext();
@@ -254,72 +249,56 @@ export function TimelinePane({
   );
 
   return (
-    <>
-      <TimelineResizeDivider
-        timelineH={timelineH}
-        setTimelineH={setTimelineH}
-        persistTimelineH={persistTimelineH}
-        containerRef={containerRef}
-        disabled={timelineDisabled}
-      />
-
-      {/* Timeline section — inner padding (not margin) keeps the divider's
-          height math exact while giving the panel a gap from the shell edges. */}
+    <div className="relative flex h-full flex-col" aria-disabled={timelineDisabled || undefined}>
       <div
-        className="relative flex flex-col shrink-0 px-px pb-px"
-        style={{ height: timelineH }}
-        aria-disabled={timelineDisabled || undefined}
+        className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
+        onDoubleClick={(e) => {
+          if ((e.target as HTMLElement).closest("[data-clip]")) return;
+          if (timelineDisabled) return;
+          if (compositionStack.length > 1) {
+            updateCompositionStack((prev) => prev.slice(0, -1));
+          }
+        }}
       >
+        <div className="shrink-0">{timelineToolbar}</div>
+        <Timeline
+          sessionEpoch={timelineSessionEpoch}
+          onSeek={seek}
+          onDrillDown={handleDrillDown}
+          renderClipContent={renderClipContent}
+          onFileDrop={onFileDrop}
+          onDeleteElement={handleDeleteElement}
+          onAssetDrop={onAssetDrop}
+          onBlockDrop={onBlockDrop}
+          onCompositionDrop={onCompositionDrop}
+          onMoveElement={handleMoveElement}
+          onMoveElements={handleMoveElements}
+          onResizeElement={handleResizeElement}
+          onResizeElements={handleResizeElements}
+          onBlockedEditAttempt={onBlockedEditAttempt}
+          onSplitElement={handleSplitElement}
+          onSelectElement={onSelectTimelineElement}
+          onCopyClip={onCopyClip}
+          onPasteClip={onPasteClip}
+          onDuplicateClip={onDuplicateClip}
+          canPasteClip={canPasteClip}
+        />
+      </div>
+      {timelineFooter && <div className="shrink-0">{timelineFooter}</div>}
+      {timelineDisabled && (
         <div
-          className="flex flex-col flex-1 min-h-0 overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
-          onDoubleClick={(e) => {
-            if ((e.target as HTMLElement).closest("[data-clip]")) return;
-            if (timelineDisabled) return;
-            if (compositionStack.length > 1) {
-              updateCompositionStack((prev) => prev.slice(0, -1));
-            }
-          }}
+          className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"
+          data-testid="timeline-loading-disabled-overlay"
+          role="status"
+          onPointerDown={(event) => event.preventDefault()}
+          onDragOver={(event) => event.preventDefault()}
+          onDrop={(event) => event.preventDefault()}
         >
-          <div className="shrink-0">{timelineToolbar}</div>
-          <Timeline
-            sessionEpoch={timelineSessionEpoch}
-            onSeek={seek}
-            onDrillDown={handleDrillDown}
-            renderClipContent={renderClipContent}
-            onFileDrop={onFileDrop}
-            onDeleteElement={handleDeleteElement}
-            onAssetDrop={onAssetDrop}
-            onBlockDrop={onBlockDrop}
-            onCompositionDrop={onCompositionDrop}
-            onMoveElement={handleMoveElement}
-            onMoveElements={handleMoveElements}
-            onResizeElement={handleResizeElement}
-            onResizeElements={handleResizeElements}
-            onBlockedEditAttempt={onBlockedEditAttempt}
-            onSplitElement={handleSplitElement}
-            onSelectElement={onSelectTimelineElement}
-            onCopyClip={onCopyClip}
-            onPasteClip={onPasteClip}
-            onDuplicateClip={onDuplicateClip}
-            canPasteClip={canPasteClip}
-          />
+          <span className="rounded-md bg-neutral-900/90 px-2.5 py-1 text-[11px] text-neutral-400">
+            Loading composition…
+          </span>
         </div>
-        {timelineFooter && <div className="shrink-0">{timelineFooter}</div>}
-        {timelineDisabled && (
-          <div
-            className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"
-            data-testid="timeline-loading-disabled-overlay"
-            role="status"
-            onPointerDown={(event) => event.preventDefault()}
-            onDragOver={(event) => event.preventDefault()}
-            onDrop={(event) => event.preventDefault()}
-          >
-            <span className="rounded-md bg-neutral-900/90 px-2.5 py-1 text-[11px] text-neutral-400">
-              Loading composition…
-            </span>
-          </div>
-        )}
-      </div>
-    </>
+      )}
+    </div>
   );
 }

package/src/components/panels/SlideshowPanel.tsx

@@ -156,7 +156,7 @@ export function makeSlideshowNotesController(): NotesController {
 // ── Component ─────────────────────────────────────────────────────────────
 
 export interface SlideshowPanelProps {
-  /** Scenes from the live clip manifest (passed from StudioRightPanel). */
+  /** Scenes from the live clip manifest (passed from StudioRightPanels). */
   scenes: import("./slideshowPanelHelpers").SceneInfo[];
   /**
    * Called with the updated manifest after every discrete edit (toggle, add,

package/src/components/panels/VariablesPanel.tsx

@@ -246,7 +246,7 @@ const EMPTY_STATE = (
   </p>
 );
 
-// Panel orchestrator — JSX conditionals per section, same shape as StudioRightPanel.
+// Panel orchestrator — JSX conditionals per section, same shape as StudioRightPanels.
 // fallow-ignore-next-line complexity
 export const VariablesPanel = memo(function VariablesPanel({
   sdkSession,

package/src/components/renders/RenderQueue.test.tsx

@@ -3,7 +3,11 @@
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from "vitest";
-import { RenderQueue } from "./RenderQueue";
+import { RenderQueue, type StartRenderHandler } from "./RenderQueue";
+import { getPersistedRenderSettings } from "./renderSettings";
+import { buttonBase, buttonSizes, buttonVariants, cn } from "../ui";
+import { isTypingTarget } from "../../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
 import type { FfmpegStatus } from "./useFfmpegStatus";
 
 // Encoder availability arrives as a prop (useRenderQueue owns the probe), so
@@ -18,6 +22,9 @@ let root: Root | null = null;
 beforeEach(() => {
   ffmpegStatus = { ok: true };
   recheck.mockClear();
+  // The format, frame-rate and quality controls write through to the real
+  // store, so each case has to start from the shipped defaults.
+  localStorage.clear();
 });
 
 afterEach(() => {
@@ -26,7 +33,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function mountRenderQueue(onStartRender: Mock) {
+function mountRenderQueue(
+  onStartRender: Mock<StartRenderHandler>,
+  compositionDimensions = { width: 1920, height: 1080 },
+) {
   const host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
@@ -39,7 +49,7 @@ function mountRenderQueue(onStartRender: Mock) {
         onClearCompleted={vi.fn()}
         onStartRender={onStartRender}
         isRendering={false}
-        compositionDimensions={{ width: 1920, height: 1080 }}
+        compositionDimensions={compositionDimensions}
         ffmpeg={ffmpegStatus}
         ffmpegChecking={false}
         onRecheckFfmpeg={recheck}
@@ -49,37 +59,135 @@ function mountRenderQueue(onStartRender: Mock) {
   return host;
 }
 
-describe("RenderQueue resolution submission", () => {
-  it("submits the canonical landscape 4K preset selected by the user", () => {
-    const onStartRender = vi.fn();
-    const host = mountRenderQueue(onStartRender);
-    const resolutionSelect = [...host.querySelectorAll("select")].find((select) =>
-      [...select.options].some((option) => option.textContent?.startsWith("4K")),
+/** Base UI moves focus a task later than React renders; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+function fire(el: Element, type: string, key?: string) {
+  const event =
+    key === undefined
+      ? new MouseEvent(type, { bubbles: true })
+      : new KeyboardEvent(type, { bubbles: true, key });
+  act(() => void el.dispatchEvent(event));
+}
+
+function triggerFor(host: HTMLElement, label: string): HTMLElement {
+  const trigger = host.querySelector<HTMLElement>(`[role="combobox"][aria-label="${label}"]`);
+  if (!trigger) throw new Error(`no select labelled ${label}`);
+  return trigger;
+}
+
+/** Opens a Select and arrows down `steps` items before committing, the way a keyboard user
+ * does. happy-dom does not synthesise the click Space would trigger, so it is dispatched here. */
+async function chooseByArrowing(trigger: HTMLElement, steps: number) {
+  fire(trigger, "keydown", " ");
+  fire(trigger, "keyup", " ");
+  act(() => trigger.click());
+  await settle();
+  for (let i = 0; i < steps; i += 1) {
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+  }
+  fire(document.activeElement ?? document.body, "keydown", "Enter");
+  await settle();
+}
+
+function exportButtonIn(host: HTMLElement): HTMLButtonElement {
+  const button = host.querySelector<HTMLButtonElement>('[data-testid="renders-export"]');
+  if (!button) throw new Error("export button did not render");
+  return button;
+}
+
+describe("RenderQueue controls", () => {
+  it("has no native select left in the panel", () => {
+    // R8. The four format / resolution / frame-rate / quality controls are the
+    // shared Select now; a native one would bring back an OS popup that no
+    // token can reach.
+    expect(mountRenderQueue(vi.fn()).querySelector("select")).toBeNull();
+  });
+
+  it("wears exactly the header Export's recipe, plus the full width", () => {
+    // AE3. Set equality, not "contains": the bug this replaces was an extra
+    // `text-[11px]` on this button, which `cn` resolved by dropping the size
+    // recipe's `text-step-12` and left the two Exports a type step apart.
+    const shared = cn(buttonBase, buttonVariants.primary, buttonSizes.md);
+    const classes = new Set(exportButtonIn(mountRenderQueue(vi.fn())).className.split(/\s+/));
+
+    expect(classes).toEqual(new Set([...shared.split(/\s+/), "w-full"]));
+  });
+
+  it("classifies the format Select the way it classified the native one (KTD13)", async () => {
+    const host = mountRenderQueue(vi.fn());
+    const reference = document.createElement("select");
+    document.body.append(reference);
+    await settle();
+
+    const trigger = triggerFor(host, "Format");
+
+    // Both true, not merely equal: two falses would agree and prove nothing.
+    expect(isTypingTarget(reference)).toBe(true);
+    expect(shouldIgnorePlaybackShortcutTarget(reference)).toBe(true);
+    expect(isTypingTarget(trigger)).toBe(isTypingTarget(reference));
+    expect(shouldIgnorePlaybackShortcutTarget(trigger)).toBe(
+      shouldIgnorePlaybackShortcutTarget(reference),
     );
-    if (!resolutionSelect) throw new Error("resolution selector did not render");
+  });
+
+  it("submits the canonical landscape 4K preset selected by the user", async () => {
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
+    const host = mountRenderQueue(onStartRender);
 
+    // Auto, 1080p, 4K: two steps down from the default.
+    await chooseByArrowing(triggerFor(host, "Resolution"), 2);
     act(() => {
-      resolutionSelect.value = "4k";
-      resolutionSelect.dispatchEvent(new Event("change", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    const exportButton = [...host.querySelectorAll("button")].find(
-      (button) => button.textContent === "Export",
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+  });
+
+  it("refuses a resolution the composition cannot reach, and says why", async () => {
+    // 1080p on a 1280x720 comp is a 1.5x scale, which the producer rejects; the
+    // option stays listed (its label explains why) but the keyboard skips it.
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
+    const host = mountRenderQueue(onStartRender, { width: 1280, height: 720 });
+    const trigger = triggerFor(host, "Resolution");
+
+    fire(trigger, "keydown", " ");
+    fire(trigger, "keyup", " ");
+    act(() => trigger.click());
+    await settle();
+    const blocked = [...document.querySelectorAll('[role="option"]')].filter((option) =>
+      option.hasAttribute("data-disabled"),
     );
-    if (!exportButton) throw new Error("export button did not render");
+    expect(blocked).toHaveLength(1);
+    expect(blocked[0]?.textContent).toContain("not an integer scale of 1280×720");
+
+    fire(document.activeElement ?? document.body, "keydown", "ArrowDown");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Enter");
+    await settle();
+    fire(document.activeElement ?? document.body, "keydown", "Escape");
+    await settle();
     act(() => {
-      exportButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      exportButtonIn(host).dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
-    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "landscape-4k", 30);
+    expect(onStartRender).toHaveBeenCalledWith("mp4", "standard", "auto", 30);
   });
-});
 
-function exportButtonIn(host: HTMLElement): HTMLButtonElement {
-  const button = [...host.querySelectorAll("button")].find((b) => b.textContent === "Export");
-  if (!button) throw new Error("export button did not render");
-  return button;
-}
+  it("persists a changed format as the literal union value", async () => {
+    const host = mountRenderQueue(vi.fn());
+
+    // MP4, MOV, WebM: one step down commits "mov", not the label "MOV (ProRes)".
+    await chooseByArrowing(triggerFor(host, "Format"), 1);
+
+    expect(getPersistedRenderSettings()).toEqual({
+      format: "mov",
+      quality: "standard",
+      fps: 30,
+    });
+  });
+});
 
 describe("RenderQueue Export button", () => {
   it("leaves the font size to the shared Button", () => {
@@ -97,7 +205,7 @@ describe("RenderQueue FFmpeg gate", () => {
       hint: "brew install ffmpeg",
       command: "brew install ffmpeg",
     };
-    const onStartRender = vi.fn();
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
     const host = mountRenderQueue(onStartRender);
 
     expect(host.textContent).toContain("FFmpeg not found");
@@ -130,7 +238,7 @@ describe("RenderQueue FFmpeg gate", () => {
   // as "not installed" would lock Export for setups that render fine.
   it("leaves Export usable when the probe returns no answer", () => {
     ffmpegStatus = null;
-    const onStartRender = vi.fn();
+    const onStartRender: Mock<StartRenderHandler> = vi.fn();
     const host = mountRenderQueue(onStartRender);
 
     expect(host.textContent).not.toContain("FFmpeg not found");