@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/hooks/usePanelLayout.ts

@@ -1,275 +1,70 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-import type {
-  RightInspectorPane,
-  RightInspectorPanes,
-  RightPanelTab,
-} from "../utils/studioHelpers";
-import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
+import { useCallback, useEffect, useRef } from "react";
+import type { RightPanelTab } from "../utils/studioHelpers";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { STUDIO_FLAT_INSPECTOR_ENABLED } from "../components/editor/manualEditingAvailability";
-import {
-  defaultPanelWidths,
-  fitPanelWidths,
-  railsEngaged,
-  type PanelWidths,
-} from "../utils/fitPanels";
-
-const NO_OVERRIDE = { left: false, right: false } as const;
+import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
+import { PANEL_DEFINITIONS, type PanelId } from "../components/dock/panelRegistry";
 
 export interface InitialPanelLayoutState {
   rightCollapsed?: boolean | null;
   rightPanelTab?: RightPanelTab | null;
 }
 
-type PanelSide = "left" | "right";
-
-function getInitialRightInspectorPanes(tab?: RightPanelTab | null): RightInspectorPanes {
-  if (tab === "layers") return { layers: true, design: false };
-  return { layers: false, design: true };
-}
-
-function readViewportWidth(): number {
-  return typeof window === "undefined" ? 1496 : window.innerWidth;
+/** The dock panel each legacy right-panel tab name opens; block params render inside Design. */
+function panelForTab(tab: RightPanelTab): PanelId {
+  return tab === "block-params" ? "design" : tab;
 }
 
-/**
- * What the user WANTS each panel to be, before the window gets a say. Stored
- * preferences win over the width-derived defaults; neither is clamped here —
- * `fitPanelWidths` owns every clamp so there is one place that decides.
- */
-function getPreferredPanelWidths(): PanelWidths {
-  const preferences = readStudioUiPreferences();
-  const defaults = defaultPanelWidths(readViewportWidth());
-  return {
-    left: preferences.leftWidth ?? defaults.left,
-    right: preferences.rightWidth ?? defaults.right,
-  };
+function tabForPanel(id: PanelId | null): RightPanelTab {
+  return id !== null && PANEL_DEFINITIONS[id].zone === "right" ? (id as RightPanelTab) : "design";
 }
 
+/** The right column as the rest of Studio reads it, backed by the dock's panel state. */
 export function usePanelLayout(initialState?: InitialPanelLayoutState) {
-  const [preferredWidths, setPreferredWidths] = useState(getPreferredPanelWidths);
-  const [viewportWidth, setViewportWidth] = useState(readViewportWidth);
-  const [leftCollapsed, setLeftCollapsed] = useState(
-    () => readStudioUiPreferences().leftCollapsed ?? false,
-  );
-  const [rightCollapsed, setRightCollapsed] = useState(initialState?.rightCollapsed ?? false);
-  const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
-    initialState?.rightPanelTab ?? "design",
-  );
-  const rightPanelTabRef = useRef(rightPanelTab);
-  rightPanelTabRef.current = rightPanelTab;
-  const [rightInspectorPanes, setRightInspectorPanes] = useState<RightInspectorPanes>(() =>
-    getInitialRightInspectorPanes(initialState?.rightPanelTab),
-  );
-  const rightInspectorPanesRef = useRef(rightInspectorPanes);
-  rightInspectorPanesRef.current = rightInspectorPanes;
-  // Set when the user explicitly reopens a panel the window had auto-collapsed,
-  // so the rail cannot immediately swallow it again. Cleared once the window is
-  // wide enough that auto-collapse is no longer in play.
-  const [autoCollapseOverride, setAutoCollapseOverride] = useState<{
-    left: boolean;
-    right: boolean;
-  }>(NO_OVERRIDE);
+  const controller = useDockLayoutStore((state) => state.controller);
+  const lastActive = useDockLayoutStore((state) => state.lastActive);
+  const visiblePanels = useDockLayoutStore((state) => state.visiblePanels);
 
-  // Reconciliation is a live window resize away, not a mount-time snapshot: a
-  // Studio loaded at 1440 and dragged to a half-screen used to keep its pixel
-  // widths and squeeze the preview to nothing.
+  const initialRef = useRef(initialState);
   useEffect(() => {
-    if (typeof window === "undefined") return;
-    const handleResize = () => {
-      const width = window.innerWidth;
-      setViewportWidth(width);
-      // Cleared here rather than in an effect watching derived state: the rail
-      // flags depend only on width, and width only changes in this handler.
-      if (!railsEngaged(width)) {
-        setAutoCollapseOverride((prev) => (prev.left || prev.right ? NO_OVERRIDE : prev));
-      }
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const fitted = fitPanelWidths(viewportWidth, preferredWidths, autoCollapseOverride);
-  const leftCollapsedByWidth = fitted.autoCollapseLeft;
-  const rightCollapsedByWidth = fitted.autoCollapseRight;
-
-  // Rendered widths, which the drag handles measure from so the seam does not
-  // jump when a panel is currently narrower than its stored preference.
-  const fittedRef = useRef(fitted);
-  fittedRef.current = fitted;
-
-  const panelDragRef = useRef<{
-    side: PanelSide;
-    startX: number;
-    startW: number;
-  } | null>(null);
-
-  // Preferred widths are also held in a ref so a burst of pointer moves or
-  // keyboard nudges inside one React batch accumulates, instead of every call
-  // in the batch reading the same pre-render value.
-  const preferredRef = useRef(preferredWidths);
-
-  const setPreferred = useCallback((side: PanelSide, width: number) => {
-    const next = Math.max(0, Math.round(width));
-    preferredRef.current = { ...preferredRef.current, [side]: next };
-    setPreferredWidths(preferredRef.current);
-    return next;
-  }, []);
-
-  /** Transient: moves the panel without touching the stored preference. */
-  const updatePanelWidth = useCallback(
-    (side: PanelSide, width: number) => {
-      setPreferred(side, width);
-    },
-    [setPreferred],
-  );
-
-  /**
-   * Durable: only an explicit drag or keyboard nudge writes a preference. A
-   * width the window forced on us is never persisted, so the user's real
-   * preference survives a temporary squeeze and returns when the window grows.
-   */
-  const commitPanelWidth = useCallback(
-    (side: PanelSide, width: number) => {
-      // Persist what the window will actually allow, not a raw pointer delta.
-      const candidate = { ...preferredRef.current, [side]: Math.max(0, Math.round(width)) };
-      const settled = fitPanelWidths(readViewportWidth(), candidate)[side];
-      setPreferred(side, settled);
-      writeStudioUiPreferences(side === "left" ? { leftWidth: settled } : { rightWidth: settled });
-    },
-    [setPreferred],
-  );
-
-  const adjustPanelWidth = useCallback(
-    (side: PanelSide, delta: number) => {
-      commitPanelWidth(side, preferredRef.current[side] + delta);
-    },
-    [commitPanelWidth],
-  );
-
-  // The toggle acts on what the user can SEE, not on stored intent. Toggling
-  // stored intent instead made the rail's "Show sidebar" button dead in the
-  // auto-collapsed state: intent was already false, so the click flipped it to
-  // true (persisting a collapse the user never asked for) while the rail stayed
-  // railed and nothing visibly happened.
-  const effectiveLeftCollapsedRef = useRef(false);
-  effectiveLeftCollapsedRef.current = leftCollapsed || leftCollapsedByWidth;
-
-  const toggleLeftSidebar = useCallback(() => {
-    const next = !effectiveLeftCollapsedRef.current;
-    setLeftCollapsed(next);
-    writeStudioUiPreferences({ leftCollapsed: next });
-    trackStudioEvent("panel_toggle", { panel: "left_sidebar", collapsed: next });
-    if (!next) setAutoCollapseOverride((prev) => ({ ...prev, left: true }));
-  }, []);
-
-  const setRightCollapsedWithOverride = useCallback((collapsed: boolean) => {
-    setRightCollapsed(collapsed);
-    if (!collapsed) {
-      setAutoCollapseOverride((prev) => (prev.right ? prev : { ...prev, right: true }));
+    if (!controller) return;
+    const { rightCollapsed, rightPanelTab } = initialRef.current ?? {};
+    initialRef.current = undefined;
+    const store = useDockLayoutStore.getState();
+    const wanted = rightPanelTab ? panelForTab(rightPanelTab) : null;
+    let unsubscribe = () => {};
+    if (wanted && store.openPanels.has(wanted)) {
+      store.activatePanel(wanted);
+    } else if (wanted === "slideshow") {
+      // The slideshow panel only opens once the composition loads and turns out to be one.
+      unsubscribe = useDockLayoutStore.subscribe((state) => {
+        if (!state.openPanels.has("slideshow")) return;
+        unsubscribe();
+        state.activatePanel("slideshow");
+      });
     }
+    if (rightCollapsed != null) store.setZoneVisible("right", !rightCollapsed);
+    return () => unsubscribe();
+  }, [controller]);
+
+  const visibleRight = visiblePanelInZone("right", lastActive, visiblePanels);
+  const rightPanelTab = tabForPanel(visibleRight);
+  const rightCollapsed = visibleRight === null;
+
+  const setRightPanelTab = useCallback((tab: RightPanelTab) => {
+    const store = useDockLayoutStore.getState();
+    const shown = visiblePanelInZone("right", store.lastActive, store.visiblePanels);
+    store.activatePanel(panelForTab(tab));
+    if (tabForPanel(shown) !== tab) trackStudioEvent("tab_switch", { panel: "right_panel", tab });
   }, []);
 
-  const handlePanelResizeStart = useCallback((side: PanelSide, e: React.PointerEvent) => {
-    e.preventDefault();
-    (e.target as HTMLElement).setPointerCapture(e.pointerId);
-    panelDragRef.current = {
-      side,
-      startX: e.clientX,
-      startW: fittedRef.current[side],
-    };
-  }, []);
-
-  const handlePanelResizeMove = useCallback(
-    (e: React.PointerEvent) => {
-      const drag = panelDragRef.current;
-      if (!drag) return;
-      const delta = e.clientX - drag.startX;
-      updatePanelWidth(drag.side, drag.startW + (drag.side === "left" ? delta : -delta));
-    },
-    [updatePanelWidth],
-  );
-
-  const handlePanelResizeEnd = useCallback(() => {
-    const side = panelDragRef.current?.side;
-    if (side) commitPanelWidth(side, preferredRef.current[side]);
-    panelDragRef.current = null;
-  }, [commitPanelWidth]);
-
-  const trackedSetRightPanelTab = useCallback(
-    (tab: RightPanelTab) => {
-      const paneAlreadySelected =
-        tab !== "design" && tab !== "layers"
-          ? true
-          : STUDIO_FLAT_INSPECTOR_ENABLED
-            ? rightInspectorPanesRef.current[tab] &&
-              !rightInspectorPanesRef.current[tab === "design" ? "layers" : "design"]
-            : rightInspectorPanesRef.current[tab];
-      if (rightPanelTabRef.current === tab && paneAlreadySelected) return;
-      rightPanelTabRef.current = tab;
-      if (tab === "design" || tab === "layers") {
-        // Flat inspector: Layers always renders full-height by itself (see
-        // StudioRightPanel's render gate), so this MUST land on the same
-        // radio-style exclusivity setExclusiveRightInspectorPane enforces for
-        // the direct in-panel tab click — every OTHER path that reaches here
-        // (element select, closing block-params, the header Inspector
-        // button, and this function's own callers outside an active
-        // inspector tab) would otherwise additively leave both panes `true`
-        // and reproduce the "both tabs highlight, only one renders" bug this
-        // still-additive branch used to cause under the flat flag.
-        const nextPanes = STUDIO_FLAT_INSPECTOR_ENABLED
-          ? { design: tab === "design", layers: tab === "layers" }
-          : { ...rightInspectorPanesRef.current, [tab]: true };
-        rightInspectorPanesRef.current = nextPanes;
-        setRightInspectorPanes(nextPanes);
-      }
-      setRightPanelTab(tab);
-      trackStudioEvent("tab_switch", { panel: "right_panel", tab });
-    },
-    [setRightPanelTab],
-  );
-
-  const toggleRightInspectorPane = useCallback((pane: RightInspectorPane) => {
-    setRightInspectorPanes((panes) => {
-      const next = { ...panes, [pane]: !panes[pane] };
-      if (!next.design && !next.layers) return panes;
-      return next;
-    });
-  }, []);
-
-  // Radio-style variant for the flat inspector: Layers always renders full-
-  // height by itself there (never split-shared with Design), so leaving both
-  // panes independently toggleable would highlight both tabs as "active"
-  // while only one actually shows. Selecting one turns the other off.
-  const setExclusiveRightInspectorPane = useCallback((pane: RightInspectorPane) => {
-    setRightInspectorPanes({ design: pane === "design", layers: pane === "layers" });
+  const setRightCollapsed = useCallback((collapsed: boolean) => {
+    const store = useDockLayoutStore.getState();
+    if (!collapsed && visiblePanelInZone("right", store.lastActive, store.visiblePanels) === null) {
+      store.activatePanel("design");
+      return;
+    }
+    store.setZoneVisible("right", !collapsed);
   }, []);
 
-  return {
-    leftWidth: fitted.left,
-    rightWidth: fitted.right,
-    adjustPanelWidth,
-    /**
-     * User intent. Persisted to localStorage; never written by auto-collapse.
-     * Deliberately read-only outside this hook: `toggleLeftSidebar` is the only
-     * writer, so it cannot be flipped without also clearing the rail override
-     * (which would open the sidebar and then immediately rail it again).
-     */
-    leftCollapsed,
-    /** User intent. Synced into the shareable URL; never written by auto-collapse. */
-    rightCollapsed,
-    setRightCollapsed: setRightCollapsedWithOverride,
-    /** What the shell actually renders: intent OR the window forcing a rail. */
-    effectiveLeftCollapsed: leftCollapsed || leftCollapsedByWidth,
-    effectiveRightCollapsed: rightCollapsed || rightCollapsedByWidth,
-    rightPanelTab,
-    setRightPanelTab: trackedSetRightPanelTab,
-    rightInspectorPanes,
-    toggleRightInspectorPane,
-    setExclusiveRightInspectorPane,
-    toggleLeftSidebar,
-    handlePanelResizeStart,
-    handlePanelResizeMove,
-    handlePanelResizeEnd,
-  };
+  return { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab };
 }

package/src/hooks/usePersistentEditHistory.ts

@@ -33,7 +33,7 @@ interface ApplyCallbacks {
   serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
 }
 
-interface UsePersistentEditHistoryOptions {
+export interface UsePersistentEditHistoryOptions {
   projectId: string | null;
   storage?: EditHistoryStorageAdapter;
   now?: () => number;

package/src/hooks/useProjectFileWriter.ts

@@ -0,0 +1,150 @@
+import { useCallback, useMemo } from "react";
+import {
+  createStudioSaveHttpError,
+  retryStudioSave,
+  StudioFileConflictError,
+  StudioSaveNetworkError,
+} from "../utils/studioSaveDiagnostics";
+import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
+
+export interface UseProjectFileWriterOptions {
+  projectId: string | null;
+}
+
+// The etag-guarded project-file read/write pair every Studio save path
+// shares. A host mounting hand editing outside Studio needs only this, not
+// the full file manager (file tree, editor tabs, uploads, font assets).
+export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions) {
+  const fileVersionScope = useMemo(
+    () => ({ projectId, versions: new Map<string, string | null>() }),
+    [projectId],
+  );
+  const fileVersions = fileVersionScope.versions;
+
+  const observeProjectFileVersion = useCallback(
+    (path: string, version: string | null) => {
+      fileVersions.set(path, version);
+    },
+    [fileVersions],
+  );
+
+  const readProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string; version?: string };
+      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
+      fileVersions.set(path, data.version ?? response.headers.get("etag"));
+      return data.content;
+    },
+    [fileVersions, projectId],
+  );
+
+  const readOptionalProjectFile = useCallback(
+    async (path: string): Promise<string> => {
+      if (!projectId) throw new Error("No active project");
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
+      );
+      if (!response.ok) throw new Error(`Failed to read ${path}`);
+      const data = (await response.json()) as { content?: string; version?: string };
+      fileVersions.set(path, data.version ?? response.headers.get("etag"));
+      return typeof data.content === "string" ? data.content : "";
+    },
+    [fileVersions, projectId],
+  );
+
+  const writeProjectFile = useCallback(
+    async (path: string, content: string, expectedContent?: string): Promise<void> => {
+      if (!projectId) throw new Error("No active project");
+      const writeProjectId = projectId;
+      let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
+      if (expectedVersion === undefined) {
+        const preflight = await fetch(
+          `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
+        );
+        if (preflight.ok) {
+          const data = (await preflight.json()) as { content?: string; version?: string };
+          throw new StudioFileConflictError({
+            filePath: path,
+            currentVersion: data.version ?? preflight.headers.get("etag"),
+            currentContent: data.content ?? null,
+            attemptedContent: content,
+          });
+        } else if (preflight.status === 404) {
+          expectedVersion = null;
+        } else {
+          throw await createStudioSaveHttpError(preflight, `Failed to read ${path} before save`);
+        }
+      }
+      // fallow-ignore-next-line complexity
+      await retryStudioSave(async () => {
+        // Each request gets its own receipt identity. If a committed request loses its response,
+        // the retry can produce a second filesystem receipt that must be suppressed independently.
+        let response: Response;
+        try {
+          response = await fetch(
+            `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
+            {
+              method: "PUT",
+              headers: {
+                "Content-Type": "text/plain",
+                ...studioWriteHeaders(),
+                ...(expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }),
+              },
+              body: content,
+            },
+          );
+        } catch (error) {
+          throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
+            cause: error,
+          });
+        }
+        if (response.status === 409) {
+          const conflict = (await response.json().catch(() => null)) as {
+            currentVersion?: string | null;
+            currentContent?: string | null;
+          } | null;
+          const currentVersion = conflict?.currentVersion ?? null;
+          if (currentVersion && conflict?.currentContent === content) {
+            fileVersions.set(path, currentVersion);
+            return;
+          }
+          throw new StudioFileConflictError({
+            filePath: path,
+            currentVersion,
+            currentContent: conflict?.currentContent ?? null,
+            attemptedContent: content,
+          });
+        }
+        if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
+        const result = (await response.json()) as { version?: string };
+        const version = result.version ?? response.headers.get("etag");
+        if (!version)
+          throw new Error(`Save response for ${path} did not include a content version`);
+        fileVersions.set(path, version);
+      });
+    },
+    [fileVersions, projectId],
+  );
+
+  return useMemo(
+    () => ({
+      fileVersions,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      observeProjectFileVersion,
+    }),
+    [
+      fileVersions,
+      readProjectFile,
+      writeProjectFile,
+      readOptionalProjectFile,
+      observeProjectFileVersion,
+    ],
+  );
+}

package/src/hooks/useRightPanelIntents.test.ts

@@ -0,0 +1,181 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useDockLayoutStore, type DockController } from "../components/dock/dockLayoutStore";
+import { PANEL_IDS, type PanelId } from "../components/dock/panelRegistry";
+import {
+  useBlockParamsDismissal,
+  useCaptionDesignFocus,
+  useDismissingTabSetter,
+  useRightPanelIntent,
+  useSlideshowDockPanel,
+} from "./useRightPanelIntents";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function controllerMock(): DockController {
+  return {
+    open: vi.fn(),
+    activate: vi.fn(),
+    close: vi.fn(),
+    setTitle: vi.fn(),
+    setGroupVisible: vi.fn(),
+    reset: vi.fn(),
+  };
+}
+
+function seed(state: {
+  open?: PanelId[];
+  visible?: PanelId[];
+  lastActive?: Partial<Record<"left" | "center" | "right", PanelId>>;
+}) {
+  const controller = controllerMock();
+  useDockLayoutStore.setState({
+    controller,
+    openPanels: new Set(state.open ?? PANEL_IDS.filter((id) => id !== "slideshow")),
+    visiblePanels: new Set(state.visible ?? []),
+    lastActive: state.lastActive ?? {},
+    activePanel: null,
+  });
+  return controller;
+}
+
+const mountedRoots: Array<() => void> = [];
+
+function mountHook<P>(hook: (props: P) => unknown, initial: P) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  mountedRoots.push(() => act(() => root.unmount()));
+  let latest: unknown;
+  function Harness({ props }: { props: P }) {
+    latest = hook(props);
+    return null;
+  }
+  const render = (props: P) => act(() => root.render(React.createElement(Harness, { props })));
+  render(initial);
+  return { render, value: () => latest, unmount: () => act(() => root.unmount()) };
+}
+
+afterEach(() => {
+  for (const unmount of mountedRoots.splice(0)) unmount();
+  vi.restoreAllMocks();
+  document.body.innerHTML = "";
+  useDockLayoutStore.setState({ controller: null });
+});
+
+describe("useSlideshowDockPanel", () => {
+  it("opens the panel when the file becomes a slideshow and closes it when it stops", () => {
+    const controller = seed({});
+    const view = mountHook(useSlideshowDockPanel, false);
+    expect(controller.open).not.toHaveBeenCalled();
+    view.render(true);
+    expect(controller.open).toHaveBeenCalledWith("slideshow");
+    act(() =>
+      useDockLayoutStore.setState({ openPanels: new Set<PanelId>(["design", "slideshow"]) }),
+    );
+    view.render(false);
+    expect(controller.close).toHaveBeenCalledWith("slideshow");
+  });
+
+  it("keeps a restored slideshow placement while the file is still loading", () => {
+    const controller = seed({ open: ["design", "slideshow"] });
+    const view = mountHook(useSlideshowDockPanel, false);
+    expect(controller.close).not.toHaveBeenCalled();
+    view.render(true);
+    expect(controller.open).not.toHaveBeenCalled();
+    view.render(false);
+    expect(controller.close).toHaveBeenCalledWith("slideshow");
+  });
+
+  it("leaves a slideshow panel that a restored layout already holds alone", () => {
+    const controller = seed({ open: ["design", "slideshow"] });
+    mountHook(useSlideshowDockPanel, true);
+    expect(controller.open).not.toHaveBeenCalled();
+  });
+
+  it("waits for the dock to mount, then opens the panel once", () => {
+    const controller = seed({});
+    useDockLayoutStore.setState({ controller: null });
+    mountHook(useSlideshowDockPanel, true);
+    expect(controller.open).not.toHaveBeenCalled();
+    act(() => useDockLayoutStore.setState({ controller }));
+    expect(controller.open).toHaveBeenCalledWith("slideshow");
+  });
+
+  it("does not reopen a panel the user closed while the file is still a slideshow", () => {
+    const controller = seed({});
+    const view = mountHook(useSlideshowDockPanel, true);
+    expect(controller.open).toHaveBeenCalledTimes(1);
+    act(() => useDockLayoutStore.setState({ openPanels: new Set<PanelId>(["design"]) }));
+    view.render(true);
+    expect(controller.open).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("useBlockParamsDismissal", () => {
+  const props = { hasBlockParams: true, onDismiss: vi.fn() };
+
+  it("keeps block params while the Design panel is showing", () => {
+    seed({ visible: ["design"] });
+    const onDismiss = vi.fn();
+    mountHook(useBlockParamsDismissal, { ...props, onDismiss });
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  it("dismisses block params when the Design panel is no longer showing", () => {
+    seed({ visible: ["design"] });
+    const onDismiss = vi.fn();
+    mountHook(useBlockParamsDismissal, { ...props, onDismiss });
+    act(() => useDockLayoutStore.setState({ visiblePanels: new Set<PanelId>(["layers"]) }));
+    expect(onDismiss).toHaveBeenCalled();
+  });
+});
+
+describe("useDismissingTabSetter", () => {
+  it("dismisses block params for any tab but block-params, then switches", () => {
+    const setTab = vi.fn();
+    const dismiss = vi.fn();
+    const view = mountHook(
+      ({ tab }: { tab: string }) => {
+        const set = useDismissingTabSetter(setTab, dismiss);
+        return () => set(tab);
+      },
+      { tab: "design" },
+    );
+    (view.value() as () => void)();
+    expect(dismiss).toHaveBeenCalledTimes(1);
+    expect(setTab).toHaveBeenCalledWith("design");
+    view.render({ tab: "block-params" });
+    (view.value() as () => void)();
+    expect(dismiss).toHaveBeenCalledTimes(1);
+    expect(setTab).toHaveBeenLastCalledWith("block-params");
+  });
+});
+
+describe("useCaptionDesignFocus", () => {
+  it("brings Design forward when caption editing starts over another right panel", () => {
+    seed({ visible: ["layers"], lastActive: { right: "layers" } });
+    const view = mountHook(useCaptionDesignFocus, false);
+    const activate = vi.spyOn(useDockLayoutStore.getState(), "activatePanel");
+    view.render(true);
+    expect(activate).toHaveBeenCalledWith("design");
+  });
+
+  it("leaves a collapsed right column alone", () => {
+    seed({ visible: [], lastActive: { right: "layers" } });
+    const activate = vi.spyOn(useDockLayoutStore.getState(), "activatePanel");
+    mountHook(useCaptionDesignFocus, true);
+    expect(activate).not.toHaveBeenCalled();
+  });
+});
+
+describe("useRightPanelIntent", () => {
+  it("still names the inspector panel while the right column is collapsed", () => {
+    seed({ visible: [], lastActive: { right: "design" } });
+    const view = mountHook(useRightPanelIntent, undefined);
+    expect(view.value()).toBe("design");
+  });
+});