gloomberb 0.9.2 → 0.9.4

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 { AsciiText, Box, Text, compactContextMenuItems, useContextMenu, useUiHost, type BoxRenderable } from "../../../ui";
+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,12 @@ import {
   useShellVisibleLayout,
 } from "./layout-state";
 import { useShellPaneActions } from "./pane/actions";
+import { resolvePaneFocusSourceLayout } from "./fullscreen";
+import { useTransientLayout } from "../transient-layout";
+import {
+  resolveShellCursorOcclusionRects,
+  useShellCursorOcclusionGuard,
+} from "./cursor-occlusion";
 
 export { resolveAppHeaderHeightCells } from "./chrome";
 export { buildNativeWindowState } from "./native/window-state";
@@ -70,6 +77,13 @@ interface ShellProps {
   commandBarNativeOccluder?: LayoutBounds | null;
 }
 
+interface TransientFocusLayoutState {
+  paneId: string;
+  layout: LayoutConfig;
+  sourceLayoutIndex: number;
+  active: boolean;
+}
+
 export function Shell({
   pluginRegistry,
   desktopWindowBridge,
@@ -86,11 +100,13 @@ 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();
   const { showContextMenu } = useContextMenu();
   const { width, height } = useViewport();
+  const shellRef = useRef<BoxRenderable | null>(null);
 
   const appHeaderHeight = resolveAppHeaderHeightCells({ titleBarOverlay, cellHeightPx });
   const contentHeight = Math.max(1, height - appHeaderHeight - (statusBarVisible ? 1 : 0));
@@ -103,6 +119,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);
@@ -110,7 +129,11 @@ export function Shell({
   }, []);
   const overlayOpen = commandBarOpen || dialogOpen || !!menuState;
 
-  const dragRuntime = useShellDragRuntimeState({ contentHeight, width });
+  const dragRuntime = useShellDragRuntimeState({
+    contentHeight,
+    throttleFloatingPreview: nativePaneChrome,
+    width,
+  });
   const {
     cancelActiveDrag,
     dividerPreview,
@@ -149,7 +172,7 @@ export function Shell({
   }, [dispatch]);
 
   const {
-    activeLayout,
+    activeLayout: windowModeLayout,
     nativeWindowModePanelRect,
     selectWindowModePane,
     startWindowMode,
@@ -171,6 +194,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,
@@ -184,6 +218,27 @@ export function Shell({
     pluginRegistry,
     width,
   });
+  const cursorOcclusionRects = useMemo(() => resolveShellCursorOcclusionRects({
+    contentHeight,
+    dragFloatingRect,
+    nativePaneChrome,
+    overlayOpen,
+    transientFocusActive,
+    visibleFloatingPanes,
+    width,
+  }), [
+    contentHeight,
+    dragFloatingRect,
+    nativePaneChrome,
+    overlayOpen,
+    transientFocusActive,
+    visibleFloatingPanes,
+    width,
+  ]);
+  useShellCursorOcclusionGuard({
+    occlusionRects: cursorOcclusionRects,
+    shellRef,
+  });
 
   const {
     closeAllFloatingPanes,
@@ -211,6 +266,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 +377,7 @@ export function Shell({
     overlayOpen,
     popOutFocusedPane,
     startWindowMode,
+    toggleFocusedPaneFullscreen,
     toggleFocusedPaneFloating,
   });
 
@@ -333,6 +485,7 @@ export function Shell({
     closePaneMenu,
     contentHeight,
     dispatch,
+    dockGeometryOptions,
     dockDividerLayouts,
     dockLeafLayouts,
     dragRuntime,
@@ -349,6 +502,7 @@ export function Shell({
     setHoveredMenuItemId,
     setMenuState,
     snapGuides,
+    transientFocusActive,
     updateWindowModePreviewLayout,
     visibleFloatingPanes,
     visibleLayout,
@@ -361,8 +515,13 @@ export function Shell({
 
   return (
     <Box
+      ref={shellRef}
       flexDirection="row"
       flexGrow={1}
+      flexShrink={1}
+      flexBasis={0}
+      minWidth={0}
+      minHeight={0}
       height={nativePaneChrome ? undefined : contentHeight}
       position={nativePaneChrome ? "relative" : undefined}
       overflow="hidden"
@@ -409,6 +568,8 @@ export function Shell({
         startNativeDockedDrag={startNativeDockedDrag}
         startNativeFloatingDrag={startNativeFloatingDrag}
         startNativeFloatResize={startNativeFloatResize}
+        transientFocusActive={transientFocusActive}
+        transientFocusPaneId={transientFocusPaneId}
         visibleFloatingPanes={visibleFloatingPanes}
         width={width}
         windowModeDockResizePathKey={windowModeDockResizePathKey}

package/src/components/layout/shell/layout-state.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, test } from "bun:test";
+import { getDockedPaneIds } from "../../../plugins/pane-manager";
+import { createPaneInstance, type LayoutConfig } from "../../../types/config";
+import { resolveShellVisibleLayout } from "./visible-layout";
+
+describe("shell visible layout", () => {
+  test("removes unregistered pane types before resolving dock geometry", () => {
+    const layout: LayoutConfig = {
+      dockRoot: {
+        kind: "split",
+        axis: "horizontal",
+        ratio: 0.5,
+        first: { kind: "pane", instanceId: "missing:main" },
+        second: { kind: "pane", instanceId: "chat:main" },
+      },
+      instances: [
+        createPaneInstance("missing-plugin", { instanceId: "missing:main" }),
+        createPaneInstance("chat", { instanceId: "chat:main" }),
+      ],
+      floating: [],
+      detached: [],
+    };
+
+    const visibleLayout = resolveShellVisibleLayout(
+      layout,
+      new Set(),
+      new Map([["chat", true]]),
+    );
+
+    expect(visibleLayout.instances.map((instance) => instance.instanceId)).toEqual(["chat:main"]);
+    expect(getDockedPaneIds(visibleLayout)).toEqual(["chat:main"]);
+  });
+});

package/src/components/layout/shell/layout-state.ts

@@ -6,8 +6,9 @@ import {
   type ResolvedPane,
 } from "../../../plugins/pane-manager";
 import type { PluginRegistry } from "../../../plugins/registry";
-import { removePaneInstances, type LayoutConfig } from "../../../types/config";
+import type { LayoutConfig } from "../../../types/config";
 import { constrainFloatingRectToBounds } from "./drag";
+import { resolveShellVisibleLayout } from "./visible-layout";
 
 interface ShellVisibleLayoutOptions {
   disabledPlugins: readonly string[];
@@ -34,15 +35,9 @@ export function useShellVisibleLayout({
     return paneIds;
   }, [disabledPlugins, pluginRegistry]);
 
-  const hiddenInstanceIds = useMemo(() => (
-    layout.instances
-      .filter((instance) => disabledPaneIds.has(instance.paneId))
-      .map((instance) => instance.instanceId)
-  ), [disabledPaneIds, layout.instances]);
-
   const visibleLayout = useMemo(
-    () => (hiddenInstanceIds.length > 0 ? removePaneInstances(layout, hiddenInstanceIds) : layout),
-    [hiddenInstanceIds, layout],
+    () => resolveShellVisibleLayout(layout, disabledPaneIds, pluginRegistry.panes),
+    [disabledPaneIds, layout, pluginRegistry.panes],
   );
 
   return { disabledPaneIds, visibleLayout };

package/src/components/layout/shell/native/pointer-runtime.ts

@@ -20,6 +20,7 @@ interface UseShellNativePointerRuntimeOptions {
   selectWindowModePane: (paneId: string) => void;
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
   setMenuState: Dispatch<SetStateAction<ActionMenuState | null>>;
+  transientFocusActive: boolean;
   windowMode: WindowEditState | null;
 }
 
@@ -35,6 +36,7 @@ export function useShellNativePointerRuntime({
   selectWindowModePane,
   setHoveredMenuItemId,
   setMenuState,
+  transientFocusActive,
   windowMode,
 }: UseShellNativePointerRuntimeOptions) {
   const {
@@ -69,6 +71,7 @@ export function useShellNativePointerRuntime({
   const startNativeFloatingDrag = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
     if (windowMode) return;
+    if (transientFocusActive) return;
     if (event.button === 2) return;
 
     const pointer = getShellPointer(event);
@@ -83,11 +86,12 @@ export function useShellNativePointerRuntime({
     };
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, updateDragFloatingRect, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDockedDrag = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
     if (windowMode) return;
+    if (transientFocusActive) return;
     if (event.button === 2) return;
 
     const pointer = getShellPointer(event);
@@ -101,10 +105,11 @@ export function useShellNativePointerRuntime({
       origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
     };
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, windowMode]);
 
   const startNativeFloatResize = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
+    if (transientFocusActive) return;
 
     const pointer = getShellPointer(event);
     if (windowMode) {
@@ -122,10 +127,11 @@ export function useShellNativePointerRuntime({
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.stopPropagation();
     event.preventDefault();
-  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, updateDragFloatingRect, windowMode]);
+  }, [dragRef, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDividerDrag = useCallback((divider: DockDividerLayout, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
+    if (transientFocusActive) return;
 
     const pointer = getShellPointer(event);
     if (menuState) {
@@ -148,7 +154,7 @@ export function useShellNativePointerRuntime({
     });
     event.stopPropagation();
     event.preventDefault();
-  }, [dragRef, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, updateDividerPreview]);
+  }, [dragRef, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, transientFocusActive, updateDividerPreview]);
 
   const handlePaneAction = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (windowMode) return;

package/src/components/layout/shell/pane/layers.tsx

@@ -48,6 +48,8 @@ interface ShellPaneLayersProps {
   startNativeDockedDrag: (paneId: string, rect: LayoutBounds, event: any) => void;
   startNativeFloatingDrag: (paneId: string, rect: FloatingRect, event: any) => void;
   startNativeFloatResize: (paneId: string, rect: FloatingRect, event: any) => void;
+  transientFocusActive: boolean;
+  transientFocusPaneId: string | null;
   visibleFloatingPanes: VisibleFloatingPane[];
   width: number;
   windowModeDockResizePathKey: string | null;
@@ -79,6 +81,8 @@ export function ShellPaneLayers({
   startNativeDockedDrag,
   startNativeFloatingDrag,
   startNativeFloatResize,
+  transientFocusActive,
+  transientFocusPaneId,
   visibleFloatingPanes,
   width,
   windowModeDockResizePathKey,
@@ -87,8 +91,12 @@ export function ShellPaneLayers({
   return (
     <>
       {dockLeafLayouts.map((leaf) => {
+        if (transientFocusActive && leaf.instanceId !== transientFocusPaneId) return null;
         const pane = paneMap.get(leaf.instanceId);
         if (!pane) return null;
+        const rect = transientFocusActive
+          ? { x: 0, y: 0, width, height: contentHeight }
+          : leaf.rect;
         const focused = focusedPaneId === leaf.instanceId && (!overlayOpen || menuPaneId === leaf.instanceId);
         const windowModeSelected = windowModePaneId === leaf.instanceId;
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuPaneId === leaf.instanceId;
@@ -96,18 +104,21 @@ export function ShellPaneLayers({
           <Box
             key={`dock:${leaf.instanceId}`}
             position="absolute"
-            left={leaf.rect.x}
-            top={leaf.rect.y}
-            width={leaf.rect.width}
-            height={leaf.rect.height}
+            left={rect.x}
+            top={rect.y}
+            width={rect.width}
+            height={rect.height}
           >
             <PaneFooterProvider>
               {(footer) => {
-                const reserveFooter = shouldReservePaneFooter(nativePaneChrome, hasPaneFooterContent(footer));
+                const showFooter = hasPaneFooterContent(footer);
+                const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+                const renderFooter = reserveFooter || showFooter;
                 const bodyFrame = resolvePaneBodyFrame({
-                  width: leaf.rect.width,
-                  height: leaf.rect.height,
+                  width: rect.width,
+                  height: rect.height,
                   nativePaneChrome,
+                  footerVisible: renderFooter,
                   reserveFooter,
                 });
                 return (
@@ -115,18 +126,18 @@ export function ShellPaneLayers({
                     paneId={leaf.instanceId}
                     title={getPaneTitle(pane)}
                     focused={focused}
-                    width={leaf.rect.width}
-                    height={leaf.rect.height}
+                    width={rect.width}
+                    height={rect.height}
                     showActions={showActions}
                     windowModeSelected={windowModeSelected}
                     footer={footer}
                     onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(leaf.instanceId, event) : undefined}
                     onMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
-                    onHeaderMouseDown={nativePaneChrome ? (event) => startNativeDockedDrag(leaf.instanceId, leaf.rect, event) : undefined}
-                    onHeaderMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
-                    onHeaderMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
-                    onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(leaf.instanceId, leaf.rect, event) : undefined}
-                    onActionMouseDown={(event) => handlePaneAction(leaf.instanceId, leaf.rect, event)}
+                    onHeaderMouseDown={nativePaneChrome && !transientFocusActive ? (event) => startNativeDockedDrag(leaf.instanceId, rect, event) : undefined}
+                    onHeaderMouseDrag={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
+                    onHeaderMouseDragEnd={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
+                    onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(leaf.instanceId, rect, event) : undefined}
+                    onActionMouseDown={(event) => handlePaneAction(leaf.instanceId, rect, event)}
                   >
                     <PaneContent
                       component={pane.def.component}
@@ -145,7 +156,10 @@ export function ShellPaneLayers({
       })}
 
       {visibleFloatingPanes.map(({ pane, rect }) => {
-        const preview = dragFloatingRect?.paneId === pane.instance.instanceId
+        if (transientFocusActive && pane.instance.instanceId !== transientFocusPaneId) return null;
+        const preview = transientFocusActive
+          ? { x: 0, y: 0, width, height: contentHeight }
+          : dragFloatingRect?.paneId === pane.instance.instanceId
           ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
           : rect;
         const focused = focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuPaneId === pane.instance.instanceId);
@@ -154,11 +168,14 @@ export function ShellPaneLayers({
         return (
           <PaneFooterProvider key={`float:${pane.instance.instanceId}`}>
             {(footer) => {
-              const reserveFooter = shouldReservePaneFooter(nativePaneChrome, hasPaneFooterContent(footer));
+              const showFooter = hasPaneFooterContent(footer);
+              const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+              const renderFooter = reserveFooter || showFooter;
               const bodyFrame = resolvePaneBodyFrame({
                 width: preview.width,
                 height: preview.height,
                 nativePaneChrome,
+                footerVisible: renderFooter,
                 reserveFooter,
               });
               return (
@@ -203,6 +220,7 @@ export function ShellPaneLayers({
       })}
 
       {dockDividerLayouts.map((divider) => {
+        if (transientFocusActive) return null;
         const dividerPathKey = pathKey(divider.path);
         const previewActive = dividerPreview?.pathKey === dividerPathKey;
         const active = previewActive || windowModeDockResizePathKey === dividerPathKey;

package/src/components/layout/shell/pane/management-shortcuts.ts

@@ -25,6 +25,7 @@ interface ShellPaneManagementShortcutOptions {
   overlayOpen: boolean;
   popOutFocusedPane(): boolean;
   startWindowMode(paneId?: string, mode?: WindowEditMode): void;
+  toggleFocusedPaneFullscreen(): boolean;
   toggleFocusedPaneFloating(): boolean;
 }
 
@@ -42,6 +43,7 @@ export function useShellPaneManagementShortcuts({
   overlayOpen,
   popOutFocusedPane,
   startWindowMode,
+  toggleFocusedPaneFullscreen,
   toggleFocusedPaneFloating,
 }: ShellPaneManagementShortcutOptions): void {
   const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
@@ -53,6 +55,20 @@ export function useShellPaneManagementShortcuts({
   }, [overlayOpen]);
 
   useShortcut((event) => {
+    const shortcut = resolvePaneManagementShortcut(event);
+    if (shortcut === "toggle-fullscreen" && !overlayOpen) {
+      if (!inputCaptured || inputCaptureAllowsPaneManagementShortcut(shortcut, event)) {
+        if (hasActiveDrag()) {
+          cancelActiveDrag();
+        }
+        if (toggleFocusedPaneFullscreen()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+
     const isEscape = event.name === "escape" || event.name === "esc";
     if (isEscape) {
       const doubleEscapeState = doubleEscapeCloseRef.current;
@@ -91,6 +107,9 @@ export function useShellPaneManagementShortcuts({
       case "settings":
         handled = openFocusedPaneSettings();
         break;
+      case "toggle-fullscreen":
+        handled = toggleFocusedPaneFullscreen();
+        break;
       case "toggle-floating":
         handled = toggleFocusedPaneFloating();
         break;

package/src/components/layout/shell/shortcuts.ts

@@ -2,6 +2,7 @@ import type { KeyEventLike } from "../../../react/input";
 
 export const PANE_MANAGEMENT_ACCELERATORS = {
   settings: "CmdOrCtrl+,",
+  fullscreen: "CmdOrCtrl+Shift+F",
   toggleFloating: "CmdOrCtrl+Shift+D",
   popOut: "CmdOrCtrl+Shift+O",
   copyScreenshot: "CmdOrCtrl+Shift+C",
@@ -15,6 +16,7 @@ export const PANE_MANAGEMENT_ACCELERATORS = {
 
 export type PaneManagementShortcut =
   | "settings"
+  | "toggle-fullscreen"
   | "toggle-floating"
   | "pop-out"
   | "copy-screenshot"
@@ -38,6 +40,7 @@ export function resolvePaneManagementShortcut(
   if (!shifted || event.alt) return null;
   if (name === "c") return "copy-screenshot";
   if (name === "d") return "toggle-floating";
+  if (name === "f") return "toggle-fullscreen";
   if (name === "o") return "pop-out";
   if (name === "l") return "layout-actions";
   if (name === "g") return "gridlock-all";
@@ -50,6 +53,7 @@ export function inputCaptureAllowsPaneManagementShortcut(
   shortcut: PaneManagementShortcut,
   event: Pick<KeyEventLike, "meta" | "super" | "targetEditable">,
 ): boolean {
+  if (shortcut === "toggle-fullscreen") return event.meta || event.super === true;
   if (shortcut !== "close" && shortcut !== "close-all-floating") return false;
   return event.meta || event.super || event.targetEditable !== true;
 }