gloomberb 0.9.2 → 0.9.3

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}

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,17 +104,17 @@ 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 bodyFrame = resolvePaneBodyFrame({
-                  width: leaf.rect.width,
-                  height: leaf.rect.height,
+                  width: rect.width,
+                  height: rect.height,
                   nativePaneChrome,
                   reserveFooter,
                 });
@@ -115,18 +123,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 +153,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);
@@ -203,6 +214,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;
 }

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

@@ -41,6 +41,7 @@ interface UseShellTerminalPointerRuntimeOptions {
   selectWindowModePane: (paneId: string) => void;
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
   setMenuState: Dispatch<SetStateAction<ActionMenuState | null>>;
+  transientFocusActive: boolean;
   visibleFloatingPanes: VisibleFloatingPane[];
   width: number;
   windowMode: WindowEditState | null;
@@ -79,6 +80,7 @@ export function useShellTerminalPointerRuntime({
   selectWindowModePane,
   setHoveredMenuItemId,
   setMenuState,
+  transientFocusActive,
   visibleFloatingPanes,
   width,
   windowMode,
@@ -132,25 +134,27 @@ export function useShellTerminalPointerRuntime({
         return;
       }
 
-      for (const divider of dockDividerLayouts) {
-        if (!pointInRect(divider.rect, event.x, shellY)) continue;
-        dragRef.current = {
-          type: "divider",
-          path: divider.path,
-          axis: divider.axis,
-          startX: preciseX,
-          startY: preciseShellY,
-          startRatio: divider.ratio,
-          bounds: divider.bounds,
-        };
-        updateDividerPreview({
-          pathKey: divider.path.join("."),
-          rect: divider.rect,
-          ratio: divider.ratio,
-        });
-        event.stopPropagation();
-        event.preventDefault();
-        return;
+      if (!transientFocusActive) {
+        for (const divider of dockDividerLayouts) {
+          if (!pointInRect(divider.rect, event.x, shellY)) continue;
+          dragRef.current = {
+            type: "divider",
+            path: divider.path,
+            axis: divider.axis,
+            startX: preciseX,
+            startY: preciseShellY,
+            startRatio: divider.ratio,
+            bounds: divider.bounds,
+          };
+          updateDividerPreview({
+            pathKey: divider.path.join("."),
+            rect: divider.rect,
+            ratio: divider.ratio,
+          });
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
       }
 
       for (const leaf of dockLeafLayouts) {
@@ -279,6 +283,11 @@ export function useShellTerminalPointerRuntime({
           event.preventDefault();
           return;
         }
+        if (relativeY === 0 && transientFocusActive) {
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
         if (relativeY === 0) {
           dragRef.current = {
             type: "pane-drag",
@@ -317,6 +326,7 @@ export function useShellTerminalPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    transientFocusActive,
     updateDividerPreview,
     updateDragFloatingRect,
     visibleFloatingPanes,

package/src/components/layout/shell/window-mode/index.ts

@@ -13,6 +13,7 @@ import {
   applyWindowEditDirection,
   cycleWindowEditFocus,
   cycleWindowEditPane,
+  cycleWindowEditTarget,
   directionFromWindowEditKey,
   getWindowEditPaneIds,
   normalizeWindowEditFocus,
@@ -72,7 +73,10 @@ export function useShellWindowMode({
   );
   const windowModePaneId = windowMode?.paneId;
   const activeLayout = windowMode?.previewLayout ?? visibleLayout;
-  const windowModePaneIds = useMemo(() => getWindowEditPaneIds(activeLayout), [activeLayout]);
+  const windowModePaneIds = useMemo(
+    () => getWindowEditPaneIds(activeLayout, bounds, dockGeometryOptions),
+    [activeLayout, bounds, dockGeometryOptions],
+  );
   const windowModeDockMovePreview = useMemo(
     () => resolveWindowEditDockMovePreview(windowMode, bounds, dockGeometryOptions),
     [bounds, dockGeometryOptions, windowMode],
@@ -210,12 +214,16 @@ export function useShellWindowMode({
       }
     } else if (name === "w") {
       setWindowMode((current) => current
-        ? cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+        ? current.mode === "move" && current.focus.kind === "dock-move"
+          ? cycleWindowEditTarget(current, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+          : cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
         : current);
     } else if (name === "tab") {
       setWindowMode((current) => current
         ? current.mode === "move"
-          ? cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+          ? current.focus.kind === "dock-move"
+            ? cycleWindowEditTarget(current, bounds, dockGeometryOptions, event.shift ? -1 : 1)
+            : cycleWindowEditPane(current, windowModePaneIds, bounds, dockGeometryOptions, event.shift ? -1 : 1)
           : {
               ...current,
               focus: cycleWindowEditFocus(

package/src/components/layout/shell/window-mode/overlays.tsx

@@ -40,6 +40,13 @@ interface ShellWindowModeOverlaysProps {
   windowModeDockMovePreview: WindowEditDockMovePreview | null;
 }
 
+function getHighlightedPaneId(windowMode: WindowEditState | null, focusedPaneId: string | null): string | null {
+  if (windowMode?.mode === "move" && windowMode.focus.kind === "dock-move") {
+    return windowMode.focus.targetId;
+  }
+  return windowMode?.paneId ?? focusedPaneId;
+}
+
 function windowModeBannerKey(windowMode: WindowEditState): string {
   const focusKey = windowMode.focus.kind === "dock-move"
     ? `${windowMode.focus.targetId}:${windowMode.focus.position}`
@@ -69,7 +76,7 @@ export function ShellWindowModeOverlays({
   windowMode,
   windowModeDockMovePreview,
 }: ShellWindowModeOverlaysProps) {
-  const highlightedPaneId = windowMode?.paneId ?? focusedPaneId;
+  const highlightedPaneId = getHighlightedPaneId(windowMode, focusedPaneId);
   const highlightedFloatingPane = highlightedPaneId
     ? visibleFloatingPanes.find((entry) => entry.pane.instance.instanceId === highlightedPaneId)
     : null;