@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/StudioRightPanel.tsx

@@ -9,7 +9,7 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
-import { PanelTabButton } from "./PanelTabButton";
+import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
 import type { RenderJob } from "./renders/useRenderQueue";
 import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
@@ -339,6 +339,51 @@ export function StudioRightPanel({
 
   const renderQueuePanel = <RenderQueuePanel />;
 
+  // Slideshow appears only for a slideshow composition, so the strip is built
+  // rather than written out: a tab that is not in this list is not reachable by
+  // an arrow key either.
+  const inspectorTabs: RightPanelTabDescriptor[] = [
+    {
+      id: "design",
+      label: "Design",
+      tooltip: "Element styles and properties",
+      active: designPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("design"),
+    },
+    {
+      id: "layers",
+      label: "Layers",
+      tooltip: "Composition layer stack",
+      active: layersPaneOpen,
+      onSelect: () => handleInspectorPaneButtonClick("layers"),
+    },
+    {
+      id: "renders",
+      label: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders",
+      tooltip: "Render queue and exports",
+      active: rightPanelTab === "renders",
+      onSelect: () => setRightPanelTab("renders"),
+    },
+    ...(isSlideshowComposition
+      ? [
+          {
+            id: "slideshow",
+            label: "Slideshow",
+            tooltip: "Slideshow branching editor",
+            active: rightPanelTab === "slideshow",
+            onSelect: () => setRightPanelTab("slideshow"),
+          },
+        ]
+      : []),
+    {
+      id: "variables",
+      label: "Variables",
+      tooltip: "Template variables — declare, preview with values",
+      active: rightPanelTab === "variables",
+      onSelect: () => setRightPanelTab("variables"),
+    },
+  ];
+
   return (
     <>
       {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
@@ -347,7 +392,7 @@ export function StudioRightPanel({
         aria-label="Resize inspector panel"
         aria-orientation="vertical"
         tabIndex={0}
-        className="group relative w-[3px] flex-shrink-0 cursor-col-resize outline-none focus-visible:bg-studio-accent/20"
+        className="group relative w-[3px] shrink-0 cursor-col-resize outline-hidden focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("right", e)}
         onPointerMove={handlePanelResizeMove}
@@ -364,52 +409,19 @@ export function StudioRightPanel({
         {/* Asymmetric hit zone: 8px into the preview's p-2 gutter (the only dead
             space), the 3px seam, 2px into the card. Stops short of the 24px WCAG
             2.5.8 target because the next pixel each way is live. */}
-        <div className="absolute inset-y-0 -left-[8px] w-[13px]" />
+        <div className="absolute inset-y-0 left-[-8px] w-[13px]" />
         {/* Visible hairline */}
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
-        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
+        className="flex min-w-0 shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (
           <CaptionPropertyPanel iframeRef={previewIframeRef} />
         ) : (
           <>
-            <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
-              <PanelTabButton
-                label="Design"
-                tooltip="Element styles and properties"
-                active={designPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("design")}
-              />
-              <PanelTabButton
-                label="Layers"
-                tooltip="Composition layer stack"
-                active={layersPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("layers")}
-              />
-              <PanelTabButton
-                label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
-                tooltip="Render queue and exports"
-                active={rightPanelTab === "renders"}
-                onClick={() => setRightPanelTab("renders")}
-              />
-              {isSlideshowComposition && (
-                <PanelTabButton
-                  label="Slideshow"
-                  tooltip="Slideshow branching editor"
-                  active={rightPanelTab === "slideshow"}
-                  onClick={() => setRightPanelTab("slideshow")}
-                />
-              )}
-              <PanelTabButton
-                label="Variables"
-                tooltip="Template variables — declare, preview with values"
-                active={rightPanelTab === "variables"}
-                onClick={() => setRightPanelTab("variables")}
-              />
-            </div>
+            <RightPanelTabs tabs={inspectorTabs} activateOnFocus={STUDIO_FLAT_INSPECTOR_ENABLED} />
             <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {rightPanelTab === "block-params" && activeBlockParams ? (
                 <BlockParamsPanel
@@ -444,7 +456,7 @@ export function StudioRightPanel({
                     role="separator"
                     aria-label="Resize Layers and Design panes"
                     aria-orientation="horizontal"
-                    className="group flex h-2 flex-shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
+                    className="group flex h-2 shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
                     style={{ touchAction: "none" }}
                     onPointerDown={handleInspectorSplitResizeStart}
                     onPointerMove={handleInspectorSplitResizeMove}

package/src/components/StudioToast.tsx

@@ -30,7 +30,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
         }}
       >
         <span
-          className={`min-w-0 break-words leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
+          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
         >
           {message}
         </span>
@@ -38,7 +38,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
           <button
             type="button"
             onClick={onDismiss}
-            className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
+            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
             aria-label="Dismiss"
           >
             <svg

package/src/components/TimelineHistoryButtons.dom.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { cleanupMounted, mountHost } from "./ui/mountHost.testHelpers";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+const editHistory = {
+  canUndo: false,
+  canRedo: false,
+  undoLabel: undefined as string | undefined,
+  redoLabel: undefined as string | undefined,
+};
+const handleUndo = vi.fn();
+const handleRedo = vi.fn();
+const trackStudioEvent = vi.fn();
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ editHistory, handleUndo, handleRedo }),
+}));
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent }));
+
+const { TimelineHistoryButtons } = await import("./TimelineHistoryButtons");
+const { TimelineToolbar } = await import("./TimelineToolbar");
+
+beforeEach(() => {
+  Object.assign(editHistory, {
+    canUndo: false,
+    canRedo: false,
+    undoLabel: undefined,
+    redoLabel: undefined,
+  });
+  vi.clearAllMocks();
+});
+
+afterEach(cleanupMounted);
+
+const mount = mountHost;
+
+function button(host: HTMLElement, label: string): HTMLButtonElement {
+  const el = host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+  if (!el) throw new Error(`not rendered: ${label}`);
+  return el;
+}
+
+function click(el: HTMLElement): void {
+  act(() => {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+}
+
+it("calls handleUndo once and tracks the event when Undo is enabled", () => {
+  editHistory.canUndo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Undo"));
+
+  expect(handleUndo).toHaveBeenCalledTimes(1);
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "undo" });
+});
+
+it("calls handleRedo once and tracks the event when Redo is enabled", () => {
+  editHistory.canRedo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Redo"));
+
+  expect(handleRedo).toHaveBeenCalledTimes(1);
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "redo" });
+});
+
+it("disables both buttons and ignores clicks on an empty history", () => {
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(el.disabled).toBe(true);
+    expect(el.className).toContain("cursor-not-allowed");
+    click(el);
+  }
+  expect(handleUndo).not.toHaveBeenCalled();
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).not.toHaveBeenCalled();
+});
+
+it("leaves enabled buttons without the disabled attribute", () => {
+  editHistory.canUndo = true;
+  const el = button(mount(<TimelineHistoryButtons />), "Undo");
+
+  expect(el.disabled).toBe(false);
+  expect(el.className).not.toContain("cursor-not-allowed");
+});
+
+it("orders the toolbar Undo, Redo, Select, Razor", () => {
+  const host = mount(<TimelineToolbar />);
+  const labels = Array.from(host.querySelectorAll("button"))
+    .map((b) => b.getAttribute("aria-label"))
+    .filter((l) => l !== null)
+    .slice(0, 4);
+
+  expect(labels).toEqual(["Undo", "Redo", "Selection tool", "Razor tool"]);
+});
+
+it("classifies Undo and Redo for the hotkey filters at their new location (KTD13)", () => {
+  // The header's own version of this check dropped Undo/Redo when they moved
+  // here; a <button> is never a typing target and is always claimed by the
+  // playback filter, same as every other toolbar tool.
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(isTypingTarget(el), label).toBe(false);
+    expect(shouldIgnorePlaybackShortcutTarget(el), label).toBe(true);
+  }
+});

package/src/components/TimelineHistoryButtons.tsx

@@ -0,0 +1,54 @@
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { RotateCcw, RotateCw } from "../icons/SystemIcons";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import { historyTooltipLabel } from "../utils/studioHelpers";
+import { flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { Tooltip } from "./ui";
+
+interface HistoryButtonProps {
+  action: "undo" | "redo";
+  enabled: boolean;
+  label: string | undefined;
+  onClick: () => Promise<void> | void;
+}
+
+function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps) {
+  const Icon = action === "undo" ? RotateCcw : RotateCw;
+  return (
+    <Tooltip label={historyTooltipLabel(action, label)}>
+      <button
+        type="button"
+        aria-label={action === "undo" ? "Undo" : "Redo"}
+        disabled={!enabled}
+        className={enabled ? flatIdle : flatDisabled}
+        onClick={() => {
+          trackStudioEvent("toolbar_action", { action });
+          void onClick();
+        }}
+      >
+        <Icon size={16} />
+      </button>
+    </Tooltip>
+  );
+}
+
+/** Undo and Redo, on the one edit-history path the shell already owns. */
+export function TimelineHistoryButtons() {
+  const { editHistory, handleUndo, handleRedo } = useStudioShellContext();
+  return (
+    <>
+      <HistoryButton
+        action="undo"
+        enabled={editHistory.canUndo}
+        label={editHistory.undoLabel}
+        onClick={handleUndo}
+      />
+      <HistoryButton
+        action="redo"
+        enabled={editHistory.canRedo}
+        label={editHistory.redoLabel}
+        onClick={handleRedo}
+      />
+    </>
+  );
+}

package/src/components/TimelineToolbar.test.tsx

@@ -8,6 +8,14 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
 import { TimelineToolbar } from "./TimelineToolbar";
 
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    editHistory: { canUndo: false, canRedo: false },
+    handleUndo: vi.fn(),
+    handleRedo: vi.fn(),
+  }),
+}));
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {

package/src/components/TimelineToolbar.tsx

@@ -22,6 +22,8 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
@@ -186,19 +188,13 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
 
-  // CapCut-flat icon buttons: no per-button border/box chrome — a transparent
-  // 28px hit area with a subtle rounded hover wash, consistent 16px glyphs.
-  const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-  const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200 active:scale-[0.98]`;
-  const flatActive = `${flatBtn} bg-white/[0.08] text-neutral-100 active:scale-[0.98]`;
-  const flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
-
   return (
     // The "TIMELINE" label is dropped for CapCut-like density — the pane's
     // position (tracks right below) makes it self-evident.
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
+          <TimelineHistoryButtons />
           <Tooltip label="Selection tool (V)">
             <button
               type="button"
@@ -297,7 +293,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={
                 !onToggleKeyframe
                   ? flatDisabled
-                  : `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
+                  : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
                       keyframeState === "active"
                         ? "text-studio-accent"
                         : keyframeState === "inactive"
@@ -332,7 +328,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
               aria-label="Auto-record manual edits as keyframes"
               aria-pressed={autoKeyframeEnabled}
-              className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
+              className={`${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
                 autoKeyframeEnabled
                   ? "text-red-400 hover:text-red-300"
                   : "text-neutral-600 hover:text-neutral-400"
@@ -429,7 +425,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
                   }}
                   className={
                     canAdd
-                      ? `${flatBtn} text-neutral-400 hover:bg-white/[0.06] hover:text-[#22c55e] active:scale-[0.98]`
+                      ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]`
                       : flatDisabled
                   }
                 >
@@ -467,7 +463,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 thumbnailsVisible
                   ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
               }`}
             >
               <Image size={16} aria-hidden="true" />
@@ -480,7 +476,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 zoomMode === "fit"
                   ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
               }`}
             >
               Fit

package/src/components/dock/Dock.test.tsx

@@ -0,0 +1,260 @@
+// @vitest-environment happy-dom
+
+import React, { act, type ComponentProps } from "react";
+import type { DockviewApi } from "dockview-react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import * as dockLayout from "./dockLayout";
+import { Dock } from "./Dock";
+import { parseDockLayout } from "./dockLayoutSchema";
+import { useDockLayoutStore } from "./dockLayoutStore";
+import { PANEL_IDS } from "./panelRegistry";
+import { readStudioUiPreferences } from "../../utils/studioUiPreferences";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let dockApi: DockviewApi | null = null;
+vi.mock("dockview-react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("dockview-react")>();
+  return {
+    ...actual,
+    DockviewReact: (props: ComponentProps<typeof actual.DockviewReact>) =>
+      React.createElement(actual.DockviewReact, {
+        ...props,
+        onReady: (event) => {
+          dockApi = event.api;
+          props.onReady(event);
+        },
+      }),
+  };
+});
+
+const liveObservers = new Set<{ callback: () => void; target?: Element }>();
+class ResizeObserverStub {
+  private readonly entry: { callback: () => void; target?: Element };
+  constructor(callback: () => void) {
+    this.entry = { callback };
+  }
+  observe(target: Element) {
+    this.entry.target = target;
+    liveObservers.add(this.entry);
+  }
+  unobserve() {}
+  disconnect() {
+    liveObservers.delete(this.entry);
+  }
+}
+(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ResizeObserverStub;
+
+vi.mock("./dockLayout", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./dockLayout")>();
+  return { ...actual, applySideMinimums: vi.fn(actual.applySideMinimums) };
+});
+const applySideMinimums = vi.mocked(dockLayout.applySideMinimums);
+
+let root: Root | null = null;
+
+function mount(projectId: string | null) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <Dock.Root projectId={projectId}>
+        {PANEL_IDS.map((id) => (
+          <Dock.Panel key={id} id={id}>
+            <div data-testid={`content-${id}`}>{id}</div>
+          </Dock.Panel>
+        ))}
+      </Dock.Root>,
+    );
+  });
+  return host;
+}
+
+/** The persisted views of the group holding `id`, after the debounced write lands. */
+function persistedGroupOf(id: string): string | undefined {
+  act(() => {
+    vi.advanceTimersByTime(1000);
+  });
+  const grid = JSON.stringify(readStudioUiPreferences(undefined, "p1").dockLayout?.grid);
+  const groups = [...grid.matchAll(/"views":\[([^\]]*)\]/g)].map((m) => m[1]);
+  return groups.find((views) => views.includes(`"${id}"`));
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+});
+
+// The default Edit layout tabs [compositions|assets|code|catalog] into one
+// group and [design|layers|renders|variables] into another; dockview shows
+// only the active tab's content per group. `slideshow` is never part of the
+// default build — StudioRightPanels opens it itself when the file is one.
+const DEFAULT_OPEN = PANEL_IDS.filter((id) => id !== "slideshow");
+const DEFAULT_VISIBLE = ["preview", "timeline", "compositions", "design"];
+
+describe("Dock on React 19", () => {
+  it("mounts the default layout's ten panels, showing only each group's active tab", () => {
+    const host = mount("p1");
+    for (const id of DEFAULT_VISIBLE) {
+      expect(host.querySelector(`[data-testid="content-${id}"]`)).not.toBeNull();
+    }
+    for (const id of DEFAULT_OPEN.filter((id) => !DEFAULT_VISIBLE.includes(id))) {
+      expect(host.querySelector(`[data-testid="content-${id}"]`)).toBeNull();
+    }
+    expect(host.querySelector('[data-testid="content-slideshow"]')).toBeNull();
+    expect(useDockLayoutStore.getState().openPanels).toEqual(new Set(DEFAULT_OPEN));
+  });
+
+  it("persists a layout change per project and reads it back through the schema", () => {
+    mount("p1");
+    act(() => useDockLayoutStore.getState().closePanel("renders"));
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    const stored = readStudioUiPreferences(undefined, "p1").dockLayout;
+    const expected = DEFAULT_OPEN.filter((id) => id !== "renders");
+    expect(Object.keys(stored?.panels ?? {}).sort()).toEqual([...expected].sort());
+    expect(readStudioUiPreferences(undefined, "p2").dockLayout).toBeUndefined();
+  });
+
+  it("closes a panel and reopens it from the store, becoming its group's visible tab", async () => {
+    const host = mount("p1");
+    act(() => useDockLayoutStore.getState().closePanel("renders"));
+    expect(useDockLayoutStore.getState().openPanels.has("renders")).toBe(false);
+    expect(host.querySelector('[data-testid="content-renders"]')).toBeNull();
+    // dockview's own panel-active event dispatch resolves on a microtask, one
+    // tick after the synchronous store call returns; `act(async ...)` is what
+    // actually waits for it instead of asserting against pre-flush DOM.
+    await act(async () => {
+      useDockLayoutStore.getState().togglePanel("renders");
+      await Promise.resolve();
+    });
+    expect(useDockLayoutStore.getState().openPanels.has("renders")).toBe(true);
+    expect(host.querySelector('[data-testid="content-renders"]')).not.toBeNull();
+  });
+
+  it("reopens a closed panel as a tab of its zone's group, not a new group", () => {
+    mount("p1");
+    act(() => useDockLayoutStore.getState().closePanel("compositions"));
+    act(() => useDockLayoutStore.getState().togglePanel("compositions"));
+    expect(persistedGroupOf("compositions")).toContain('"assets"');
+  });
+
+  it("reopens a side panel next to the preview when its whole column was closed", () => {
+    mount("p1");
+    const { closePanel, togglePanel } = useDockLayoutStore.getState();
+    for (const id of ["compositions", "assets", "code", "catalog"] as const)
+      act(() => closePanel(id));
+    act(() => togglePanel("compositions"));
+    expect(useDockLayoutStore.getState().openPanels.has("compositions")).toBe(true);
+    expect(useDockLayoutStore.getState().visiblePanels.has("compositions")).toBe(true);
+  });
+
+  it("reopens the timeline as its own group, never as a tab of the preview", () => {
+    mount("p1");
+    act(() => useDockLayoutStore.getState().closePanel("timeline"));
+    act(() => useDockLayoutStore.getState().togglePanel("timeline"));
+    expect(persistedGroupOf("timeline")).not.toContain('"preview"');
+  });
+
+  it("restores the stored layout on the next mount instead of rebuilding the default", () => {
+    mount("p1");
+    act(() => useDockLayoutStore.getState().closePanel("renders"));
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    act(() => root?.unmount());
+    root = null;
+    document.body.innerHTML = "";
+
+    mount("p1");
+    expect(useDockLayoutStore.getState().openPanels.has("renders")).toBe(false);
+  });
+
+  it("falls back to the default layout when the stored one names an unknown panel", () => {
+    localStorage.setItem(
+      "hf-studio-ui-preferences:p1",
+      JSON.stringify({ dockLayout: { grid: {}, panels: { nope: {} } } }),
+    );
+    const host = mount("p1");
+    expect(host.querySelector('[data-testid="content-preview"]')).not.toBeNull();
+  });
+});
+
+describe("Dock wiring", () => {
+  it("re-applies the side minimums when a panel is dragged to another group", () => {
+    mount(null);
+    applySideMinimums.mockClear();
+    const preview = dockApi?.getPanel("preview");
+    const design = dockApi?.getPanel("design");
+    if (!preview || !design) throw new Error("default layout is missing panels");
+    act(() => design.api.moveTo({ group: preview.group }));
+    expect(applySideMinimums).toHaveBeenCalled();
+  });
+
+  it("makes the sashes keyboard-focusable separators", () => {
+    const host = mount(null);
+    const sashes = host.querySelectorAll<HTMLElement>('.dv-sash[role="separator"]');
+    expect(sashes.length).toBeGreaterThan(0);
+    for (const sash of sashes) expect(sash.tabIndex).toBe(0);
+  });
+
+  it("re-fits the side columns to the window width when it resizes", () => {
+    mount(null);
+    const innerWidth = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { value: 560, configurable: true });
+    try {
+      applySideMinimums.mockClear();
+      const dockObservers = [...liveObservers].filter(({ target }) =>
+        target?.classList.contains("hf-dock"),
+      );
+      act(() => dockObservers.forEach(({ callback }) => callback()));
+      expect(applySideMinimums).toHaveBeenCalledWith(expect.anything(), 560);
+    } finally {
+      Object.defineProperty(window, "innerWidth", { value: innerWidth, configurable: true });
+    }
+  });
+});
+
+describe("parseDockLayout", () => {
+  it("rejects shapes that are not a dock layout", () => {
+    expect(parseDockLayout(null)).toBeNull();
+    expect(parseDockLayout({ grid: {}, panels: {} })).toBeNull();
+    expect(
+      parseDockLayout({
+        grid: {
+          width: 1,
+          height: 1,
+          orientation: "HORIZONTAL",
+          root: { type: "leaf", data: { views: ["ghost"] } },
+        },
+        panels: { ghost: { id: "ghost", contentComponent: "panel" } },
+      }),
+    ).toBeNull();
+  });
+
+  const placed = (views: string[], panelIds: string[]) => ({
+    grid: {
+      width: 1,
+      height: 1,
+      orientation: "HORIZONTAL",
+      root: { type: "leaf", data: { views } },
+    },
+    panels: Object.fromEntries(panelIds.map((id) => [id, { id, contentComponent: "panel" }])),
+  });
+
+  it("rejects a view that has no panel entry and a panel that no view places", () => {
+    expect(parseDockLayout(placed(["preview", "design"], ["preview"]))).toBeNull();
+    expect(parseDockLayout(placed(["preview"], ["preview", "design"]))).toBeNull();
+    expect(parseDockLayout(placed(["preview", "design"], ["preview", "design"]))).not.toBeNull();
+  });
+});