@hyperframes/studio 0.8.51 → 0.8.53-desktop.0

package/src/components/nle/TimelineResizeDivider.tsx

@@ -1,101 +0,0 @@
-import { useCallback, useRef } from "react";
-import { MIN_PREVIEW_H, MIN_TIMELINE_H, fitTimelineHeight } from "../../utils/fitPanels";
-
-/**
- * Horizontal drag/keyboard-resizable divider between the preview and the
- * timeline. Implements the separator pattern: ArrowUp grows the timeline,
- * ArrowDown shrinks it (mirrors the drag direction).
- */
-export function TimelineResizeDivider({
-  timelineH,
-  setTimelineH,
-  persistTimelineH,
-  containerRef,
-  disabled,
-}: {
-  timelineH: number;
-  setTimelineH: React.Dispatch<React.SetStateAction<number>>;
-  persistTimelineH: (h: number) => void;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-  disabled: boolean;
-}) {
-  const isDragging = useRef(false);
-  const timelineHRef = useRef(timelineH);
-  timelineHRef.current = timelineH;
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      if (disabled) return;
-      e.preventDefault();
-      isDragging.current = true;
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-    },
-    [disabled],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (disabled) return;
-      if (!isDragging.current || !containerRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const mouseY = e.clientY - rect.top;
-      setTimelineH(fitTimelineHeight(rect.height, rect.height - mouseY));
-    },
-    [disabled, containerRef, setTimelineH],
-  );
-
-  const handlePointerUp = useCallback(() => {
-    if (isDragging.current) persistTimelineH(timelineHRef.current);
-    isDragging.current = false;
-  }, [persistTimelineH]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (disabled) return;
-      if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-      e.preventDefault();
-      const containerH = containerRef.current?.getBoundingClientRect().height ?? 0;
-      const delta = e.key === "ArrowUp" ? 16 : -16;
-      setTimelineH((prev) => {
-        const next = fitTimelineHeight(containerH, prev + delta);
-        persistTimelineH(next);
-        return next;
-      });
-    },
-    [disabled, containerRef, setTimelineH, persistTimelineH],
-  );
-
-  return (
-    // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
-    // zone via the absolutely-positioned inner hit area so the layout gap stays
-    // at 3px while draggability is preserved over the full band.
-    <div
-      role="separator"
-      aria-orientation="horizontal"
-      aria-label="Resize timeline (arrow keys)"
-      aria-valuenow={Math.round(timelineH)}
-      aria-valuemin={MIN_TIMELINE_H}
-      aria-valuemax={Math.round(
-        (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
-      )}
-      tabIndex={0}
-      className="group relative h-[3px] shrink-0 cursor-row-resize z-10 outline-hidden focus-visible:bg-studio-accent/20"
-      style={{ touchAction: "none" }}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-      onPointerCancel={handlePointerUp}
-      onKeyDown={handleKeyDown}
-    >
-      {/* Expanded hit zone, deliberately asymmetric: 4px up into the transport
-          row's vertical centring slack, the 3px seam, then 3px down into the
-          timeline card's border + toolbar padding. It stops at 10px rather than
-          the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
-          there is: 28px transport buttons sit above and 28px toolbar buttons
-          below, and silently stealing their clicks is the worse bug. */}
-      <div className="absolute inset-x-0 top-[-4px] h-[10px]" />
-      {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
-      <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
-    </div>
-  );
-}

package/src/components/sidebar/LeftSidebar.storage.test.ts

@@ -1,28 +0,0 @@
-// @vitest-environment happy-dom
-
-import { afterEach, expect, it, vi } from "vitest";
-import { getPersistedTab } from "./LeftSidebar";
-
-vi.mock("../../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
-
-const originalDescriptor = Object.getOwnPropertyDescriptor(globalThis, "localStorage");
-
-afterEach(() => {
-  if (originalDescriptor) Object.defineProperty(globalThis, "localStorage", originalDescriptor);
-});
-
-it("falls back to the default tab when localStorage is blocked", () => {
-  // Chrome throws on the property read itself when site data is blocked for
-  // the document. This runs as a useState initializer, so throwing here takes
-  // Studio to the crash boundary.
-  Object.defineProperty(globalThis, "localStorage", {
-    configurable: true,
-    get() {
-      throw new Error(
-        "Failed to read the 'localStorage' property from 'Window': Access is denied for this document.",
-      );
-    },
-  });
-
-  expect(getPersistedTab()).toBe("compositions");
-});

package/src/components/sidebar/LeftSidebar.tsx

@@ -1,348 +0,0 @@
-import {
-  memo,
-  useState,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  forwardRef,
-  type ReactNode,
-} from "react";
-import { CompositionsTab } from "./CompositionsTab";
-import { AssetsTab } from "./AssetsTab";
-import { trackStudioEvent } from "../../utils/studioTelemetry";
-import { safeLocalStorage } from "../../utils/safeStorage";
-import { resolveMasterCompositionPath } from "../../utils/studioUrlState";
-import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
-import { FileTree } from "../editor/FileTree";
-import { Tooltip } from "../ui";
-
-export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
-
-export interface LeftSidebarHandle {
-  selectTab: (tab: SidebarTab) => void;
-  getTab: () => SidebarTab;
-}
-
-const STORAGE_KEY = "hf-studio-sidebar-tab";
-
-const SIDEBAR_TABS: Array<{ id: SidebarTab; label: string; tooltip: string }> = [
-  { id: "code", label: "Code", tooltip: "Source code editor" },
-  { id: "compositions", label: "Comps", tooltip: "Compositions and sub-compositions" },
-  { id: "assets", label: "Assets", tooltip: "Videos, images, audio, fonts" },
-  { id: "blocks", label: "Catalog", tooltip: "Browse blocks and components" },
-];
-
-// Both the `localStorage` reference and `getItem` itself can throw when the
-// browsing context is partitioned or site data is blocked — the same case
-// telemetry/config.ts documents. This runs as a `useState` initializer, so an
-// unguarded throw here takes the whole editor to the crash boundary rather
-// than losing one remembered tab.
-export function getPersistedTab(): SidebarTab {
-  let stored: string | null = null;
-  try {
-    stored = safeLocalStorage()?.getItem(STORAGE_KEY) ?? null;
-  } catch {
-    /* storage unavailable — fall back to the default tab */
-  }
-  if (stored === "assets") return "assets";
-  if (stored === "code") return "code";
-  if (stored === "blocks") return "blocks";
-  return "compositions";
-}
-
-interface LeftSidebarProps {
-  width?: number;
-  projectId: string;
-  compositions: string[];
-  assets: string[];
-  activeComposition: string | null;
-  onSelectComposition: (comp: string) => void;
-  onImportFiles?: (files: FileList, dir?: string) => void | Promise<void>;
-  fileTree?: string[];
-  editingFile?: { path: string; content: string | null } | null;
-  onSelectFile?: (path: string) => void;
-  onCreateFile?: (path: string) => void;
-  onCreateFolder?: (path: string) => void;
-  onDeleteFile?: (path: string) => void;
-  onRenameFile?: (oldPath: string, newPath: string) => void;
-  onDuplicateFile?: (path: string) => void;
-  onMoveFile?: (oldPath: string, newPath: string) => void;
-  codeChildren?: ReactNode;
-  onRenderComposition?: (comp: string) => void;
-  isRendering?: boolean;
-  onLint?: () => void;
-  linting?: boolean;
-  lintFindingCount?: number;
-  lintHasError?: boolean;
-  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
-  onToggleCollapse?: () => void;
-  onAddBlock?: (blockName: string) => void | Promise<void>;
-  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
-  takeoverContent?: ReactNode;
-  onAddAssetToTimeline?: (path: string) => void;
-  onAddCompositionToTimeline?: (path: string) => void;
-}
-
-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,
-      onRenderComposition,
-      isRendering,
-      onLint,
-      linting,
-      lintFindingCount,
-      lintHasError,
-      lintFindingsByFile,
-      onToggleCollapse,
-      onAddBlock,
-      onPreviewBlock,
-      takeoverContent,
-      onAddAssetToTimeline,
-      onAddCompositionToTimeline,
-    },
-    ref,
-  ) {
-    const [tab, setTab] = useState<SidebarTab>(getPersistedTab);
-    const tabRef = useRef(tab);
-    tabRef.current = tab;
-    const tablistRef = useRef<HTMLDivElement>(null);
-    const masterCompositionPath = useMemo(
-      () => resolveMasterCompositionPath(compositions),
-      [compositions],
-    );
-
-    const selectTab = useCallback((t: SidebarTab) => {
-      setTab(t);
-      try {
-        safeLocalStorage()?.setItem(STORAGE_KEY, t);
-      } catch {
-        /* storage unavailable — the tab just won't be remembered */
-      }
-      trackStudioEvent("tab_switch", { panel: "left_sidebar", tab: t });
-    }, []);
-
-    const getTab = useCallback(() => tabRef.current, []);
-
-    useImperativeHandle(ref, () => ({ selectTab, getTab }), [selectTab, getTab]);
-
-    // APG tabs pattern: Left/Right move focus AND selection between tabs.
-    const handleTablistKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-        e.preventDefault();
-        const ids = SIDEBAR_TABS.map((t) => t.id);
-        const idx = ids.indexOf(tabRef.current);
-        const next = ids[(idx + (e.key === "ArrowRight" ? 1 : -1) + ids.length) % ids.length];
-        selectTab(next);
-        tablistRef.current?.querySelector<HTMLButtonElement>(`[data-tab-id="${next}"]`)?.focus();
-      },
-      [selectTab],
-    );
-
-    return (
-      <div
-        className="flex flex-col h-full overflow-hidden rounded-lg border border-neutral-800/50 bg-neutral-950"
-        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 shrink-0">
-              <div className="flex items-center gap-2">
-                <div
-                  ref={tablistRef}
-                  role="tablist"
-                  aria-label="Sidebar panels"
-                  onKeyDown={handleTablistKeyDown}
-                  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 1fr" }}
-                >
-                  {SIDEBAR_TABS.map((t) => (
-                    <Tooltip key={t.id} label={t.tooltip} side="bottom">
-                      <button
-                        type="button"
-                        role="tab"
-                        data-tab-id={t.id}
-                        aria-selected={tab === t.id}
-                        aria-controls={`sidebar-panel-${t.id}`}
-                        tabIndex={tab === t.id ? 0 : -1}
-                        onClick={() => selectTab(t.id)}
-                        className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all active:scale-[0.97] ${
-                          tab === t.id
-                            ? "bg-neutral-800 text-white"
-                            : "text-neutral-500 hover:text-neutral-200"
-                        }`}
-                      >
-                        {t.label}
-                      </button>
-                    </Tooltip>
-                  ))}
-                </div>
-                {onToggleCollapse && (
-                  <button
-                    type="button"
-                    onClick={onToggleCollapse}
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
-                    title="Hide sidebar"
-                    aria-label="Hide sidebar"
-                  >
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      aria-hidden="true"
-                    >
-                      <path d="m14 7-5 5 5 5" />
-                      <path d="M19 4v16" />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            </div>
-
-            {/* Tab content */}
-            {tab === "compositions" && (
-              <div
-                id="sidebar-panel-compositions"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <CompositionsTab
-                  projectId={projectId}
-                  compositions={compositions}
-                  activeComposition={activeComposition}
-                  masterCompositionPath={masterCompositionPath}
-                  onSelect={onSelectComposition}
-                  onAddToTimeline={onAddCompositionToTimeline}
-                  onRenderComposition={onRenderComposition}
-                  isRendering={isRendering}
-                  lintFindingsByFile={lintFindingsByFile}
-                />
-              </div>
-            )}
-            {tab === "assets" && (
-              <div
-                id="sidebar-panel-assets"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <AssetsTab
-                  projectId={projectId}
-                  assets={assets}
-                  onImport={onImportFiles}
-                  onDelete={onDeleteFile}
-                  onRename={onRenameFile}
-                  onAddAssetToTimeline={onAddAssetToTimeline}
-                />
-              </div>
-            )}
-            {tab === "code" && (
-              <div id="sidebar-panel-code" role="tabpanel" className="flex flex-1 min-h-0">
-                {(fileProp?.length ?? 0) > 0 && (
-                  <div className="w-[160px] 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}
-                      lintFindingsByFile={lintFindingsByFile}
-                    />
-                  </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>
-            )}
-
-            {tab === "blocks" && (
-              <div
-                id="sidebar-panel-blocks"
-                role="tabpanel"
-                className="flex flex-col flex-1 min-h-0"
-              >
-                <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
-              </div>
-            )}
-
-            {/* Lint button pinned at the bottom */}
-            {onLint && (
-              <div className="border-t border-neutral-800 p-2 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 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] 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"}
-                  {!linting && lintFindingCount != null && lintFindingCount > 0 && (
-                    <span
-                      data-lint-badge={lintHasError ? "error" : "warning"}
-                      className={
-                        lintHasError
-                          ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none"
-                          : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400"
-                      }
-                    >
-                      {lintFindingCount}
-                      <span className="sr-only">
-                        {lintHasError
-                          ? " lint findings, including errors"
-                          : " lint findings, warnings only"}
-                      </span>
-                    </span>
-                  )}
-                </button>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    );
-  }),
-);

package/src/hooks/useInspectorSplitResize.ts

@@ -1,51 +0,0 @@
-import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
-
-const MIN_INSPECTOR_SPLIT_PERCENT = 20;
-const MAX_INSPECTOR_SPLIT_PERCENT = 75;
-
-export function useInspectorSplitResize() {
-  const [layersPanePercent, setLayersPanePercent] = useState(40);
-  const splitContainerRef = useRef<HTMLDivElement>(null);
-  const splitDragRef = useRef<{
-    startY: number;
-    startPercent: number;
-    height: number;
-  } | null>(null);
-
-  const handleInspectorSplitResizeStart = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.currentTarget.setPointerCapture(event.pointerId);
-      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
-      splitDragRef.current = {
-        startY: event.clientY,
-        startPercent: layersPanePercent,
-        height,
-      };
-    },
-    [layersPanePercent],
-  );
-
-  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
-    const drag = splitDragRef.current;
-    if (!drag || drag.height <= 0) return;
-    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
-    const next = Math.min(
-      MAX_INSPECTOR_SPLIT_PERCENT,
-      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
-    );
-    setLayersPanePercent(next);
-  }, []);
-
-  const handleInspectorSplitResizeEnd = useCallback(() => {
-    splitDragRef.current = null;
-  }, []);
-
-  return {
-    layersPanePercent,
-    splitContainerRef,
-    handleInspectorSplitResizeStart,
-    handleInspectorSplitResizeMove,
-    handleInspectorSplitResizeEnd,
-  };
-}

package/src/utils/fitPanels.test.ts

@@ -1,164 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  MIN_PREVIEW_H,
-  MIN_PREVIEW_W,
-  MIN_TIMELINE_H,
-  RAIL_W,
-  defaultPanelWidths,
-  fitPanelWidths,
-  fitTimelineHeight,
-} from "./fitPanels";
-
-function fitAt(viewportWidth: number) {
-  return fitPanelWidths(viewportWidth, defaultPanelWidths(viewportWidth));
-}
-
-describe("defaultPanelWidths", () => {
-  // Frozen literals, deliberately NOT compared against the live hook: the hook
-  // now delegates here, so asserting against it would be circular and would
-  // silently stop guarding the "wide windows are untouched" promise.
-  it.each([
-    [1680, 384, 424],
-    [1512, 384, 424],
-    [1280, 329, 364],
-  ])("keeps %ipx identical to the pre-change defaults", (vw, left, right) => {
-    expect(defaultPanelWidths(vw)).toEqual({ left, right });
-  });
-});
-
-describe("fitPanelWidths", () => {
-  it.each([1680, 1512, 1280])("leaves %ipx untouched by reconciliation", (vw) => {
-    const preferred = defaultPanelWidths(vw);
-    const fitted = fitPanelWidths(vw, preferred);
-    expect(fitted.left).toBe(preferred.left);
-    expect(fitted.right).toBe(preferred.right);
-    expect(fitted.autoCollapseLeft).toBe(false);
-    expect(fitted.autoCollapseRight).toBe(false);
-  });
-
-  it.each([1680, 1512, 1280, 1100, 960, 860, 760, 640, 560, 480])(
-    "never starves the preview at %ipx",
-    (vw) => {
-      expect(fitAt(vw).preview).toBeGreaterThanOrEqual(MIN_PREVIEW_W);
-    },
-  );
-
-  it("matches the projected preview widths from the plan", () => {
-    const projected: Array<[number, number]> = [
-      [1680, 866],
-      [1512, 698],
-      [1280, 581],
-      [1100, 499],
-      [960, 427],
-      [860, 360],
-      [760, 432],
-      [640, 592],
-      [560, 512],
-      [480, 432],
-    ];
-    for (const [vw, preview] of projected) {
-      expect({ vw, preview: fitAt(vw).preview }).toEqual({ vw, preview });
-    }
-  });
-
-  it("fits everything at its minimum at exactly 860, the derived threshold", () => {
-    const fitted = fitAt(860);
-    expect(fitted).toMatchObject({
-      left: 214,
-      right: 280,
-      preview: MIN_PREVIEW_W,
-      autoCollapseLeft: false,
-    });
-  });
-
-  it("rails the sidebar one pixel below the threshold", () => {
-    expect(fitAt(860).autoCollapseLeft).toBe(false);
-    expect(fitAt(859).autoCollapseLeft).toBe(true);
-    expect(fitAt(859).left).toBe(RAIL_W);
-  });
-
-  it("hides the inspector one pixel below its own threshold", () => {
-    expect(fitAt(700).autoCollapseRight).toBe(false);
-    expect(fitAt(700).right).toBeGreaterThan(0);
-    expect(fitAt(699).autoCollapseRight).toBe(true);
-    expect(fitAt(699).right).toBe(0);
-  });
-
-  it("never drives an EXPANDED sidebar below its usable minimum", () => {
-    // Guards the leftFloor/rightFloor split: the squeeze fallback may only reach
-    // the rail width when the panel is actually railed.
-    const fitted = fitPanelWidths(900, { left: 600, right: 600 });
-    expect(fitted.left).toBeGreaterThanOrEqual(200);
-    expect(fitted.right).toBeGreaterThanOrEqual(280);
-  });
-
-  it("caps a single panel at 40% of the window", () => {
-    expect(fitPanelWidths(1600, { left: 900, right: 280 }).left).toBe(640);
-  });
-
-  it("lets the preview floor win when the cap alone is not enough", () => {
-    // 40% of 1000 is 400, but 400 + 280 + 6 leaves the preview at 314.
-    const fitted = fitPanelWidths(1000, { left: 900, right: 280 });
-    expect(fitted.left).toBe(354);
-    expect(fitted.preview).toBe(MIN_PREVIEW_W);
-  });
-
-  it("survives a viewport narrower than the preview floor alone", () => {
-    const fitted = fitAt(300);
-    expect(fitted.preview).toBeGreaterThanOrEqual(0);
-    expect(Number.isNaN(fitted.preview)).toBe(false);
-    expect(fitted.left).toBe(RAIL_W);
-  });
-
-  it("returns preferences untouched before the shell is measured", () => {
-    const preferred = { left: 320, right: 400 };
-    expect(fitPanelWidths(0, preferred)).toMatchObject({ ...preferred, preview: 0 });
-    expect(fitPanelWidths(Number.NaN, preferred)).toMatchObject(preferred);
-  });
-
-  it("is idempotent, so a resize loop cannot oscillate", () => {
-    for (const vw of [1512, 1100, 860, 760, 560]) {
-      const once = fitPanelWidths(vw, defaultPanelWidths(vw));
-      const twice = fitPanelWidths(vw, once);
-      expect(twice).toEqual(once);
-    }
-  });
-});
-
-describe("fitTimelineHeight", () => {
-  it("keeps a height that fits", () => {
-    expect(fitTimelineHeight(717, 429)).toBe(429);
-  });
-
-  it("reclaims height for the preview when the shell shrinks", () => {
-    // The measured bug: mounted at 760 tall, dragged to 520. Preview was 47px.
-    expect(fitTimelineHeight(477, 429)).toBe(477 - MIN_PREVIEW_H);
-    expect(477 - fitTimelineHeight(477, 429)).toBeGreaterThanOrEqual(MIN_PREVIEW_H);
-  });
-
-  it("raises a too-small preference to the timeline minimum", () => {
-    expect(fitTimelineHeight(717, 10)).toBe(MIN_TIMELINE_H);
-  });
-
-  it("keeps the timeline usable when the shell is shorter than both minimums", () => {
-    expect(fitTimelineHeight(120, 429)).toBe(MIN_TIMELINE_H);
-  });
-
-  it("returns the preference before the shell is measured", () => {
-    expect(fitTimelineHeight(0, 429)).toBe(429);
-  });
-
-  it("is idempotent", () => {
-    const once = fitTimelineHeight(477, 429);
-    expect(fitTimelineHeight(477, once)).toBe(once);
-  });
-
-  it("would return the preferred height if callers kept one", () => {
-    // The helper is preference-preserving; the vertical CALLER still stores the
-    // clamped value, so a shrink-then-grow does not restore the old height the
-    // way panel widths do. Tracked as a known asymmetry, not fixed here.
-    const preferred = 429;
-    expect(fitTimelineHeight(477, preferred)).toBe(277);
-    expect(fitTimelineHeight(717, preferred)).toBe(429);
-  });
-});