@hyperframes/studio 0.8.52 → 0.8.53

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/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");
+  });
+});

package/src/hooks/useRightPanelIntents.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
+
+/** Opens the Slideshow panel when the file becomes a slideshow, closes it when it stops being one.
+ * A user's own close, and a restored layout's placement, stick. */
+export function useSlideshowDockPanel(isSlideshowComposition: boolean) {
+  const controller = useDockLayoutStore((state) => state.controller);
+  const wasSlideshow = useRef(false);
+  useEffect(() => {
+    if (!controller) return;
+    const inDock = useDockLayoutStore.getState().openPanels.has("slideshow");
+    if (isSlideshowComposition && !inDock) controller.open("slideshow");
+    if (!isSlideshowComposition && wasSlideshow.current && inDock) controller.close("slideshow");
+    wasSlideshow.current = isSlideshowComposition;
+  }, [isSlideshowComposition, controller]);
+}
+
+/** Block params replace the Design body until Design stops showing; picking another tab dismisses them elsewhere. */
+export function useBlockParamsDismissal({
+  hasBlockParams,
+  onDismiss,
+}: {
+  hasBlockParams: boolean;
+  onDismiss: () => void;
+}) {
+  const designVisible = useDockLayoutStore((state) => state.visiblePanels.has("design"));
+  useEffect(() => {
+    if (hasBlockParams && !designVisible) onDismiss();
+  }, [hasBlockParams, designVisible, onDismiss]);
+}
+
+/** Wraps a tab setter so any tab other than block-params first dismisses the block-params view. */
+export function useDismissingTabSetter<Tab extends string>(
+  setTab: (tab: Tab) => void,
+  dismissBlockParams: () => void,
+) {
+  return useCallback(
+    (tab: Tab) => {
+      if (tab !== "block-params") dismissBlockParams();
+      setTab(tab);
+    },
+    [setTab, dismissBlockParams],
+  );
+}
+
+/** Caption edit mode owns the Design panel: whenever the right column shows something else, bring Design back. */
+export function useCaptionDesignFocus(captionEditMode: boolean) {
+  const designVisible = useDockLayoutStore((state) => state.visiblePanels.has("design"));
+  const rightShown = useDockLayoutStore(
+    (state) => visiblePanelInZone("right", state.lastActive, state.visiblePanels) !== null,
+  );
+  useEffect(() => {
+    if (captionEditMode && rightShown && !designVisible) {
+      useDockLayoutStore.getState().activatePanel("design");
+    }
+  }, [captionEditMode, rightShown, designVisible]);
+}
+
+/** The right-column panel the user last focused, whether or not the column is currently showing. */
+export function useRightPanelIntent() {
+  return useDockLayoutStore((state) =>
+    visiblePanelInZone("right", state.lastActive, state.openPanels),
+  );
+}

package/src/hooks/useSlideshowTabState.test.ts

@@ -4,7 +4,6 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { useSlideshowTabState } from "./useSlideshowTabState";
-import type { RightPanelTab } from "../utils/studioHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -15,14 +14,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function renderHook(params: {
-  editingFileContent: string | null | undefined;
-  rightPanelTab: RightPanelTab;
-}) {
+function renderHook(params: { editingFileContent: string | null | undefined }) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
-  const setRightPanelTabCalls: RightPanelTab[] = [];
   let current: ReturnType<typeof useSlideshowTabState> | null = null;
 
   function Harness() {
@@ -30,8 +25,7 @@ function renderHook(params: {
       editingFileContent: params.editingFileContent,
       previewIframeRef: { current: null },
       refreshKey: 0,
-      rightPanelTab: params.rightPanelTab,
-      setRightPanelTab: (tab) => setRightPanelTabCalls.push(tab),
+      slideshowVisible: false,
     });
     return null;
   }
@@ -45,52 +39,36 @@ function renderHook(params: {
       if (!current) throw new Error("useSlideshowTabState did not render");
       return current;
     },
-    setRightPanelTabCalls,
     unmount: () => act(() => root.unmount()),
   };
 }
 
+// Whether "slideshow" stays the active dock tab across a file switch is
+// StudioRightPanels' own effect now (it opens/closes the dock panel), not
+// this hook's job — this only derives the two values that effect reads.
 describe("useSlideshowTabState", () => {
   it("detects a slideshow composition via the JSON island", () => {
-    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML });
     expect(harness.getState().isSlideshowComposition).toBe(true);
     harness.unmount();
   });
 
   it("reports false for a plain (non-slideshow) composition", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: PLAIN_HTML });
     expect(harness.getState().isSlideshowComposition).toBe(false);
     harness.unmount();
   });
 
   it("reports false when there is no editing file yet", () => {
-    const harness = renderHook({ editingFileContent: undefined, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: undefined });
     expect(harness.getState().isSlideshowComposition).toBe(false);
     harness.unmount();
   });
 
   it("still detects a malformed island — presence-only, not full manifest validation", () => {
     const malformed = `<html><body><script type="application/hyperframes-slideshow+json">{not valid json</script></body></html>`;
-    const harness = renderHook({ editingFileContent: malformed, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: malformed });
     expect(harness.getState().isSlideshowComposition).toBe(true);
     harness.unmount();
   });
-
-  it("bounces rightPanelTab off 'slideshow' to 'renders' on a non-slideshow composition", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "slideshow" });
-    expect(harness.setRightPanelTabCalls).toEqual(["renders"]);
-    harness.unmount();
-  });
-
-  it("does not bounce when the composition is a slideshow", () => {
-    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML, rightPanelTab: "slideshow" });
-    expect(harness.setRightPanelTabCalls).toEqual([]);
-    harness.unmount();
-  });
-
-  it("does not bounce a tab other than 'slideshow'", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "renders" });
-    expect(harness.setRightPanelTabCalls).toEqual([]);
-    harness.unmount();
-  });
 });