gloomberb 0.9.1 → 0.9.3

package/src/components/layout/shell/index.test.tsx

@@ -2,8 +2,14 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { TestDialogProvider, testRender } from "../../../renderers/opentui/test-utils";
 import { openTuiUiHost } from "../../../renderers/opentui/ui-host";
 import type { ReactNode } from "react";
-import { act, useReducer } from "react";
-import { AppContext, appReducer, createInitialState } from "../../../state/app/context";
+import { act, useReducer, useState } from "react";
+import {
+  AppContext,
+  appReducer,
+  createInitialState,
+  resolveTickerForPane,
+  usePaneTicker,
+} from "../../../state/app/context";
 import { cloneLayout, createDefaultConfig, TICKER_RESEARCH_PANE_ID, type LayoutConfig } from "../../../types/config";
 import type { PluginRegistry } from "../../../plugins/registry";
 import type { PaneProps } from "../../../types/plugin";
@@ -14,6 +20,8 @@ import {
   resolveAppHeaderHeightCells,
   Shell,
 } from "./index";
+import { resolvePaneFocusSourceLayout } from "./fullscreen";
+import { TransientLayoutProvider, useTransientLayout, type TransientLayoutState } from "../transient-layout";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -133,6 +141,44 @@ async function renderShellForWindowModeTest(
   return { actions, registry };
 }
 
+function CaptureTransientLayout({
+  controls,
+}: {
+  controls: { transientLayout: TransientLayoutState | null };
+}) {
+  const { transientLayout } = useTransientLayout();
+  controls.transientLayout = transientLayout;
+  return null;
+}
+
+function ShellTransientHarness({
+  initialState,
+  registry,
+  controls,
+}: {
+  initialState: ReturnType<typeof createInitialState>;
+  registry: PluginRegistry;
+  controls: {
+    dispatch?: (action: ShellTestAction) => void;
+    state?: ReturnType<typeof createInitialState>;
+    transientLayout: TransientLayoutState | null;
+  };
+}) {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+  controls.dispatch = dispatch;
+  controls.state = state;
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <TransientLayoutProvider>
+        <TestDialogProvider>
+          <Shell pluginRegistry={registry} />
+        </TestDialogProvider>
+        <CaptureTransientLayout controls={controls} />
+      </TransientLayoutProvider>
+    </AppContext>
+  );
+}
+
 function findUpdateLayout(actions: ShellTestAction[]) {
   return actions.find((action) => action.type === "UPDATE_LAYOUT");
 }
@@ -417,6 +463,7 @@ describe("Shell", () => {
     expect(resolvePaneManagementShortcut({ ...base, name: "o", key: "o" })).toBe("pop-out");
     expect(resolvePaneManagementShortcut({ ...base, name: "c", key: "c" })).toBe("copy-screenshot");
     expect(resolvePaneManagementShortcut({ ...base, name: "l", key: "l" })).toBe("layout-actions");
+    expect(resolvePaneManagementShortcut({ ...base, name: "f", key: "f" })).toBe("toggle-fullscreen");
     expect(resolvePaneManagementShortcut({ ...base, name: "g", key: "g" })).toBe("gridlock-all");
     expect(resolvePaneManagementShortcut({ ...base, name: "m", key: "m" })).toBe("window-mode");
     expect(resolvePaneManagementShortcut({ ...base, name: "r", key: "r" })).toBe("window-resize-mode");
@@ -425,6 +472,352 @@ describe("Shell", () => {
     expect(resolvePaneManagementShortcut({ ...base, name: "d", key: "d", meta: false, super: false })).toBeNull();
   });
 
+  test("toggles the focused pane fullscreen without persisting layout", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-shortcut-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+      { width: 80, height: 18 },
+    );
+
+    expect(testSetup.captureCharFrame()).toContain("Main Portfolio");
+    expect(testSetup.captureCharFrame()).toContain("Ticker Research Body");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("captures the source layout for transient pane focus", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-layout-test");
+    const layout = cloneLayout(config.layout);
+    layout.dockRoot = { kind: "pane", instanceId: "portfolio-list:main" };
+    layout.floating = [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 32, height: 10, zIndex: 75 }];
+
+    const focusedLayout = resolvePaneFocusSourceLayout(layout, "ticker-detail:main");
+
+    expect(focusedLayout).toMatchObject({
+      dockRoot: { kind: "pane", instanceId: "portfolio-list:main" },
+      floating: [{ instanceId: "ticker-detail:main", x: 8, y: 2, width: 32, height: 10, zIndex: 75 }],
+    });
+    expect(focusedLayout).not.toBe(layout);
+    expect(focusedLayout?.instances.map((instance) => instance.instanceId)).toEqual(
+      layout.instances.map((instance) => instance.instanceId),
+    );
+  });
+
+  test("locks layout-changing mouse drags while fullscreen is active", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-drag-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+      { width: 80, height: 18 },
+    );
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    await act(async () => {
+      await testSetup!.mockMouse.drag(4, 0, 32, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("keeps focused pane local detail state when maximizing a floating pane", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-local-state-test");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    let openDetail: (() => void) | null = null;
+    const registry = createShellPluginRegistry({
+      tickerDetailComponent: () => {
+        const [detailOpen, setDetailOpen] = useState(false);
+        openDetail = () => setDetailOpen(true);
+        return <text>{detailOpen ? "Detail State" : "Table State"}</text>;
+      },
+    });
+    const floatingLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 40, height: 10, zIndex: 50 }],
+      detached: [],
+    };
+    await renderShellForWindowModeTest(
+      createShellStateWithLayout(config, floatingLayout, "ticker-detail:main"),
+      { registry, width: 80, height: 18 },
+    );
+
+    await act(async () => {
+      openDetail?.();
+      await testSetup!.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("etail State");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("etail State");
+    expect(frame).not.toContain("able State");
+  });
+
+  test("allows pane fullscreen shortcut while text input is captured on desktop", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-fullscreen-captured-input-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const dockedLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const { actions } = await renderShellForWindowModeTest(
+      {
+        ...createShellStateWithLayout(config, dockedLayout, "portfolio-list:main"),
+        inputCaptured: true,
+      },
+      { width: 80, height: 18 },
+    );
+
+    await emitKeypress({
+      name: "f",
+      key: "f",
+      meta: true,
+      super: true,
+      shift: true,
+      targetEditable: true,
+    } as any);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(actions.some((action) => action.type === "UPDATE_LAYOUT")).toBe(false);
+  });
+
+  test("keeps the transient focus layout available after switching saved layouts", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-transient-focus-layout-tab-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const defaultLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const monitorLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      instances: [{ ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    config.layout = cloneLayout(defaultLayout);
+    config.layouts = [
+      { name: "Default", layout: cloneLayout(defaultLayout), focusedPaneId: "portfolio-list:main" },
+      { name: "Monitor", layout: cloneLayout(monitorLayout), focusedPaneId: "ticker-detail:main" },
+    ];
+    config.activeLayoutIndex = 0;
+
+    const initialState = {
+      ...createInitialState(config),
+      focusedPaneId: "portfolio-list:main",
+      statusBarVisible: true,
+    };
+    const registry = createShellPluginRegistry();
+    const controls: {
+      dispatch?: (action: ShellTestAction) => void;
+      state?: ReturnType<typeof createInitialState>;
+      transientLayout: TransientLayoutState | null;
+    } = { transientLayout: null };
+
+    testSetup = await testRender(
+      <ShellTransientHarness initialState={initialState} registry={registry} controls={controls} />,
+      { width: 100, height: 18 },
+    );
+
+    await testSetup.renderOnce();
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfolio");
+    expect(frame).not.toContain("Ticker Research Body");
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+
+    await act(async () => {
+      controls.transientLayout?.onDeactivate?.();
+      controls.dispatch?.({ type: "SWITCH_LAYOUT", index: 1 });
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: false,
+    });
+
+    await act(async () => {
+      controls.transientLayout?.onActivate?.();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+  });
+
+  test("restores the focus source layout state when reactivating transient focus", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-transient-focus-state-test");
+    const mainPane = requireLayoutInstance(config, "portfolio-list:main");
+    const detailPane = requireLayoutInstance(config, "ticker-detail:main");
+    const defaultLayout = {
+      dockRoot: {
+        kind: "split" as const,
+        axis: "horizontal" as const,
+        ratio: 0.5,
+        first: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+        second: { kind: "pane" as const, instanceId: "ticker-detail:main" },
+      },
+      instances: [{ ...mainPane }, { ...detailPane }],
+      floating: [],
+      detached: [],
+    };
+    const monitorLayout = cloneLayout(defaultLayout);
+    config.layout = cloneLayout(defaultLayout);
+    config.layouts = [
+      {
+        name: "Default",
+        layout: cloneLayout(defaultLayout),
+        focusedPaneId: "ticker-detail:main",
+        paneState: {
+          "portfolio-list:main": { collectionId: "main", cursorSymbol: "MSTR" },
+          "ticker-detail:main": { activeTabId: "overview" },
+        },
+      },
+      {
+        name: "Monitor",
+        layout: monitorLayout,
+        focusedPaneId: "ticker-detail:main",
+        paneState: {
+          "portfolio-list:main": { collectionId: "main", cursorSymbol: null },
+          "ticker-detail:main": { activeTabId: "overview" },
+        },
+      },
+    ];
+    config.activeLayoutIndex = 0;
+    const registry = createShellPluginRegistry({
+      tickerDetailComponent: () => {
+        const { symbol } = usePaneTicker();
+        return <text>{`Ticker:${symbol ?? "none"}`}</text>;
+      },
+    });
+    const controls: {
+      dispatch?: (action: ShellTestAction) => void;
+      state?: ReturnType<typeof createInitialState>;
+      transientLayout: TransientLayoutState | null;
+    } = { transientLayout: null };
+
+    testSetup = await testRender(
+      <ShellTransientHarness
+        initialState={createInitialState(config)}
+        registry={registry}
+        controls={controls}
+      />,
+      { width: 100, height: 18 },
+    );
+
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("icker:MSTR");
+
+    await emitKeypress({ name: "f", ctrl: true, shift: true });
+    expect(testSetup.captureCharFrame()).toContain("icker:MSTR");
+
+    await act(async () => {
+      controls.transientLayout?.onDeactivate?.();
+      controls.dispatch?.({ type: "SWITCH_LAYOUT", index: 1 });
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: false,
+    });
+    expect(controls.state?.config.activeLayoutIndex).toBe(1);
+    expect(controls.state?.paneState["portfolio-list:main"]?.cursorSymbol).toBeNull();
+    expect(controls.state ? resolveTickerForPane(controls.state, "ticker-detail:main") : null).toBeNull();
+
+    await act(async () => {
+      controls.transientLayout?.onActivate?.();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(controls.transientLayout).toMatchObject({
+      id: "pane-focus",
+      active: true,
+    });
+    expect(controls.state?.config.activeLayoutIndex).toBe(0);
+    expect(controls.state?.paneState["portfolio-list:main"]?.cursorSymbol).toBe("MSTR");
+    expect(controls.state ? resolveTickerForPane(controls.state, "ticker-detail:main") : null).toBe("MSTR");
+  });
+
   test("exits window mode on Enter without changes", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-window-mode-resize-shortcut-test");
     const mainPane = requireLayoutInstance(config, "portfolio-list:main");

package/src/components/layout/shell/index.tsx

@@ -1,5 +1,5 @@
 import { AsciiText, Box, Text, compactContextMenuItems, useContextMenu, useUiHost } from "../../../ui";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRendererHost, useUiCapabilities } from "../../../ui";
 import { useViewport } from "../../../react/input";
 import { useDialogState } from "../../../ui/dialog";
@@ -8,6 +8,7 @@ import type { DesktopDockPreviewState, DesktopWindowBridge } from "../../../type
 import {
   getDockDividerLayouts,
   getDockLeafLayouts,
+  isPaneInLayout,
   type DockGeometryOptions,
   type LayoutBounds,
   type ResolvedPane,
@@ -58,6 +59,8 @@ import {
   useShellVisibleLayout,
 } from "./layout-state";
 import { useShellPaneActions } from "./pane/actions";
+import { resolvePaneFocusSourceLayout } from "./fullscreen";
+import { useTransientLayout } from "../transient-layout";
 
 export { resolveAppHeaderHeightCells } from "./chrome";
 export { buildNativeWindowState } from "./native/window-state";
@@ -70,6 +73,13 @@ interface ShellProps {
   commandBarNativeOccluder?: LayoutBounds | null;
 }
 
+interface TransientFocusLayoutState {
+  paneId: string;
+  layout: LayoutConfig;
+  sourceLayoutIndex: number;
+  active: boolean;
+}
+
 export function Shell({
   pluginRegistry,
   desktopWindowBridge,
@@ -86,6 +96,7 @@ export function Shell({
   const inputCaptured = useAppSelector((state) => state.inputCaptured);
   const statusBarVisible = useAppSelector(selectStatusBarVisible);
   const rendererHost = useRendererHost();
+  const { setTransientLayout } = useTransientLayout();
   const uiKind = useUiHost().kind;
   const shortcutDisplayMode = getShortcutDisplayMode(uiKind);
   const { nativePaneChrome = false, nativeContextMenu, precisePointer, titleBarOverlay, cellHeightPx } = useUiCapabilities();
@@ -103,6 +114,9 @@ export function Shell({
     setHoveredPaneId((current) => (current === paneId ? current : paneId));
   }, []);
   const [menuState, setMenuState] = useState<ActionMenuState | null>(null);
+  const [transientFocusLayoutState, setTransientFocusLayoutState] = useState<TransientFocusLayoutState | null>(null);
+  const transientFocusLayoutStateRef = useRef<TransientFocusLayoutState | null>(null);
+  transientFocusLayoutStateRef.current = transientFocusLayoutState;
   const [hoveredMenuItemId, setHoveredMenuItemId] = useState<string | null>(null);
   const closePaneMenu = useCallback(() => {
     setMenuState(null);
@@ -149,7 +163,7 @@ export function Shell({
   }, [dispatch]);
 
   const {
-    activeLayout,
+    activeLayout: windowModeLayout,
     nativeWindowModePanelRect,
     selectWindowModePane,
     startWindowMode,
@@ -171,6 +185,17 @@ export function Shell({
     visibleLayout,
     width,
   });
+  const transientFocusActive = !windowMode && transientFocusLayoutState?.active === true;
+  const activeLayout = transientFocusActive && transientFocusLayoutState
+    ? transientFocusLayoutState.layout
+    : windowModeLayout;
+  const transientFocusPaneId = transientFocusActive ? transientFocusLayoutState?.paneId ?? null : null;
+
+  useEffect(() => {
+    if (!windowMode || !transientFocusLayoutState) return;
+    transientFocusLayoutStateRef.current = null;
+    setTransientFocusLayoutState(null);
+  }, [transientFocusLayoutState, windowMode]);
 
   const {
     dockedPanes,
@@ -211,6 +236,102 @@ export function Shell({
     visibleLayout,
     width,
   });
+  const setTransientFocusLayout = useCallback((next: TransientFocusLayoutState | null) => {
+    transientFocusLayoutStateRef.current = next;
+    setTransientFocusLayoutState(next);
+  }, []);
+  const activateTransientFocusState = useCallback((current: TransientFocusLayoutState) => {
+    closePaneMenu();
+    setTransientFocusLayout({ ...current, active: true });
+    const sourceLayout = config.layouts[current.sourceLayoutIndex]?.layout;
+    if (
+      current.sourceLayoutIndex !== config.activeLayoutIndex
+      && sourceLayout
+      && isPaneInLayout(sourceLayout, current.paneId)
+    ) {
+      dispatch({ type: "SWITCH_LAYOUT", index: current.sourceLayoutIndex });
+    }
+    focusPane(current.paneId);
+  }, [closePaneMenu, config.activeLayoutIndex, config.layouts, dispatch, focusPane, setTransientFocusLayout]);
+  const toggleFocusedPaneFullscreen = useCallback(() => {
+    const current = transientFocusLayoutStateRef.current;
+    if (current?.active) {
+      setTransientFocusLayout(null);
+      return true;
+    }
+
+    if (
+      current
+      && current.paneId === focusedPaneId
+      && current.sourceLayoutIndex === config.activeLayoutIndex
+    ) {
+      activateTransientFocusState(current);
+      return true;
+    }
+
+    const nextLayout = resolvePaneFocusSourceLayout(visibleLayout, focusedPaneId);
+    if (!focusedPaneId || !nextLayout) {
+      pluginRegistry.notify({ body: "Focus a pane to make it fullscreen", type: "info" });
+      return false;
+    }
+
+    closePaneMenu();
+    setTransientFocusLayout({
+      paneId: focusedPaneId,
+      layout: nextLayout,
+      sourceLayoutIndex: config.activeLayoutIndex,
+      active: true,
+    });
+    focusPane(focusedPaneId);
+    return true;
+  }, [
+    activateTransientFocusState,
+    closePaneMenu,
+    config.activeLayoutIndex,
+    focusedPaneId,
+    focusPane,
+    pluginRegistry,
+    setTransientFocusLayout,
+    visibleLayout,
+  ]);
+  const activateTransientFocusLayout = useCallback(() => {
+    const current = transientFocusLayoutStateRef.current;
+    if (!current) return;
+    activateTransientFocusState(current);
+  }, [activateTransientFocusState]);
+  const deactivateTransientFocusLayout = useCallback(() => {
+    const current = transientFocusLayoutStateRef.current;
+    if (!current || !current.active) return;
+    closePaneMenu();
+    setTransientFocusLayout({ ...current, active: false });
+  }, [closePaneMenu, setTransientFocusLayout]);
+  const exitTransientFocusLayout = useCallback(() => {
+    closePaneMenu();
+    setTransientFocusLayout(null);
+  }, [closePaneMenu, setTransientFocusLayout]);
+
+  useEffect(() => {
+    setTransientLayout(
+      transientFocusLayoutState
+        ? {
+          id: "pane-focus",
+          label: "^F Focus",
+          active: transientFocusActive,
+          onActivate: activateTransientFocusLayout,
+          onDeactivate: deactivateTransientFocusLayout,
+          onExit: exitTransientFocusLayout,
+        }
+        : null,
+    );
+    return () => setTransientLayout(null);
+  }, [
+    activateTransientFocusLayout,
+    deactivateTransientFocusLayout,
+    exitTransientFocusLayout,
+    setTransientLayout,
+    transientFocusActive,
+    transientFocusLayoutState,
+  ]);
 
   useShellPaneManagementShortcuts({
     cancelActiveDrag,
@@ -226,6 +347,7 @@ export function Shell({
     overlayOpen,
     popOutFocusedPane,
     startWindowMode,
+    toggleFocusedPaneFullscreen,
     toggleFocusedPaneFloating,
   });
 
@@ -333,6 +455,7 @@ export function Shell({
     closePaneMenu,
     contentHeight,
     dispatch,
+    dockGeometryOptions,
     dockDividerLayouts,
     dockLeafLayouts,
     dragRuntime,
@@ -349,6 +472,7 @@ export function Shell({
     setHoveredMenuItemId,
     setMenuState,
     snapGuides,
+    transientFocusActive,
     updateWindowModePreviewLayout,
     visibleFloatingPanes,
     visibleLayout,
@@ -409,6 +533,8 @@ export function Shell({
         startNativeDockedDrag={startNativeDockedDrag}
         startNativeFloatingDrag={startNativeFloatingDrag}
         startNativeFloatResize={startNativeFloatResize}
+        transientFocusActive={transientFocusActive}
+        transientFocusPaneId={transientFocusPaneId}
         visibleFloatingPanes={visibleFloatingPanes}
         width={width}
         windowModeDockResizePathKey={windowModeDockResizePathKey}