gloomberb 0.16.2 → 0.16.4

package/src/components/layout/shell/drag/slide.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from "react";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../../theme/font-scale";
+
+/**
+ * Desktop: draws a box laid out at the shell's corner at cell (x, y) with a
+ * transform, so placing it somewhere else never lays anything out.
+ */
+export function placeStyle(x: number, y: number): CSSProperties {
+  return { transform: `translate3d(${x * WEB_CELL_WIDTH}px, ${y * WEB_CELL_HEIGHT}px, 0)` };
+}

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

@@ -41,11 +41,11 @@ import { tickerLinkMenuItems } from "./ticker-link-menu";
 import {
   makeSnapGuides,
   resolveExternalDockPreview,
-  resolveHoverOverlay,
 } from "./drag";
 import { resolveAppHeaderHeightCells } from "./chrome";
+import { useAppChromeShown } from "../presentation";
 import { useShellWindowMode } from "./window-mode";
-import { useShellNativeSurfaceWindowState } from "./native/surfaces";
+import { ShellNativeSurfaceSync } from "./native/surfaces";
 import { ShellWindowModeOverlays } from "./window-mode/overlays";
 import { ShellPaneLayers } from "./pane/layers";
 import { paneMenuButtonAnchor, ShellActionMenuOverlay, type ActionMenuState } from "./action-menu-overlay";
@@ -59,14 +59,17 @@ import {
   useShellResolvedPanes,
   useShellVisibleLayout,
 } from "./layout-state";
+import { restoreShellHiddenPanes } from "./visible-layout";
 import { AuthDialogHost } from "../../../plugins/builtin/cloud/auth-dialog";
 import { DeviceSignInDialogHost } from "../../../plugins/builtin/cloud/device-signin-dialog";
+import { McpConnectDialogHost } from "../../../plugins/builtin/cloud/mcp-connect/dialog";
 import { BrokerSignInDialogHost } from "../../../brokers/signed-in/sign-in-dialog";
 import { FeedbackDialogHost } from "../../feedback-dialog";
 import { FormModalHost } from "../../form-modal";
 import type { AppTickerRepositoryPort } from "../../../core/app-service-ports";
 import type { DataProvider } from "../../../types/data-provider";
 import { useShellPaneActions } from "./pane/actions";
+import { useShellPaneLayoutMoves } from "./pane/new-layout";
 import { resolvePaneFocusSourceLayout } from "./fullscreen";
 import { useTransientLayout } from "../transient-layout";
 import {
@@ -115,7 +118,6 @@ export function Shell({
   const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
   const stateRef = useAppStateRef();
   const inputCaptured = useAppSelector((state) => state.inputCaptured);
-  const statusBarVisible = useAppSelector((state) => state.statusBarVisible);
   const rendererHost = useRendererHost();
   const { setTransientLayout } = useTransientLayout();
   const uiKind = useUiHost().kind;
@@ -127,17 +129,14 @@ export function Shell({
   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));
+  const chrome = useAppChromeShown();
+  const appHeaderHeight = chrome.header ? resolveAppHeaderHeightCells({ titleBarOverlay, cellHeightPx }) : 0;
+  const contentHeight = Math.max(1, height - appHeaderHeight - (chrome.statusBar ? 1 : 0));
   pluginRegistry.bindHost({ getTermSize: () => ({ width, height: contentHeight }) });
 
   const layout = useAppSelector((state) => state.config.layout);
   const dialogOpen = useDialogState((dialog) => dialog.isOpen);
   const [hoveredPaneId, setHoveredPaneId] = useState<string | null>(null);
-  const setHoveredPaneIfChanged = useCallback((paneId: string | null) => {
-    if (commandBarOpen) return;
-    setHoveredPaneId((current) => (current === paneId ? current : paneId));
-  }, [commandBarOpen]);
   const [menuState, setMenuState] = useState<ActionMenuState | null>(null);
   const [transientFocusLayoutState, setTransientFocusLayoutState] = useState<TransientFocusLayoutState | null>(null);
   const transientFocusLayoutStateRef = useRef<TransientFocusLayoutState | null>(null);
@@ -165,21 +164,20 @@ export function Shell({
     if (commandBarOpen) setHoveredPaneId(null);
   }, [commandBarOpen]);
 
-  const dragRuntime = useShellDragRuntimeState({
-    contentHeight,
-    throttleFloatingPreview: nativePaneChrome,
-    width,
-  });
+  const dragRuntime = useShellDragRuntimeState({ contentHeight, nativePaneChrome, width });
   const {
     cancelActiveDrag,
-    dividerPreview,
-    dockPreview,
-    dragCursor,
-    dragFloatingRect,
-    dragRef,
     hasActiveDrag,
+    live,
   } = dragRuntime;
 
+  // A pane dragged across other headers is not hovering them: re-rendering
+  // the layout for their menu buttons would only cost frames.
+  const setHoveredPaneIfChanged = useCallback((paneId: string | null) => {
+    if (commandBarOpen || hasActiveDrag()) return;
+    setHoveredPaneId((current) => (current === paneId ? current : paneId));
+  }, [commandBarOpen, hasActiveDrag]);
+
   const { disabledPaneIds, visibleLayout } = useShellVisibleLayout({
     disabledPlugins: config.disabledPlugins,
     layout,
@@ -195,7 +193,15 @@ export function Shell({
   ), [nativePaneChrome, cellHeightPx]);
   const bounds = useMemo<LayoutBounds>(() => ({ x: 0, y: 0, width, height: contentHeight }), [contentHeight, width]);
 
-  const persistLayout = useCallback((nextLayout: LayoutConfig, options?: { pushHistory?: boolean; focusedPaneId?: string | null }) => {
+  // Every edit here starts from the visible layout, so the panes it hides go
+  // back in before the layout is saved, rather than being deleted with it.
+  const persistLayout = useCallback((editedLayout: LayoutConfig, options?: { pushHistory?: boolean; focusedPaneId?: string | null }) => {
+    const nextLayout = restoreShellHiddenPanes(
+      stateRef.current.config.layout,
+      editedLayout,
+      disabledPaneIds,
+      pluginRegistry.panes,
+    );
     if (options?.pushHistory !== false) {
       dispatch({ type: "PUSH_LAYOUT_HISTORY" });
     }
@@ -209,7 +215,7 @@ export function Shell({
       currentState.paneState,
       hasFocusTarget ? (options.focusedPaneId ?? null) : currentState.focusedPaneId,
     ));
-  }, [dispatch, stateRef]);
+  }, [disabledPaneIds, dispatch, pluginRegistry, stateRef]);
 
   const focusPane = useCallback((paneId: string) => {
     dispatch({ type: "FOCUS_PANE", paneId });
@@ -261,9 +267,10 @@ export function Shell({
     pluginRegistry,
     width,
   });
-  const cursorOcclusionRects = useMemo(() => resolveShellCursorOcclusionRects({
+  // Read when the terminal draws a frame, so a pane on the move is covered where it is now.
+  const resolveCursorOcclusionRects = useCallback(() => resolveShellCursorOcclusionRects({
     contentHeight,
-    dragFloatingRect,
+    dragFloatingRect: live.get().floating,
     nativePaneChrome,
     overlayOpen,
     transientFocusActive,
@@ -271,7 +278,7 @@ export function Shell({
     width,
   }), [
     contentHeight,
-    dragFloatingRect,
+    live,
     nativePaneChrome,
     overlayOpen,
     transientFocusActive,
@@ -279,7 +286,7 @@ export function Shell({
     width,
   ]);
   useShellCursorOcclusionGuard({
-    occlusionRects: cursorOcclusionRects,
+    resolveOcclusionRects: resolveCursorOcclusionRects,
     shellRef,
   });
 
@@ -378,6 +385,32 @@ export function Shell({
     [focusedPaneId, togglePaneFullscreen],
   );
   useEffect(() => pluginRegistry.bindHost({ togglePaneFullscreen }), [pluginRegistry, togglePaneFullscreen]);
+  // A pane leaving its layout leaves fullscreen with it, so the focus layout never points at it.
+  const leaveTransientFocusForPane = useCallback((paneId: string) => {
+    if (transientFocusLayoutStateRef.current?.paneId === paneId) setTransientFocusLayout(null);
+  }, [setTransientFocusLayout]);
+  const {
+    movePaneBack,
+    movePaneToNewLayout,
+    paneLayoutMoveMenu,
+    togglePaneNewLayout,
+  } = useShellPaneLayoutMoves({
+    closePaneMenu,
+    dispatch,
+    keybindings,
+    leavePane: leaveTransientFocusForPane,
+    pluginRegistry,
+    shortcutDisplayMode,
+    stateRef,
+  });
+  const toggleFocusedPaneNewLayout = useCallback(
+    () => togglePaneNewLayout(focusedPaneId),
+    [focusedPaneId, togglePaneNewLayout],
+  );
+  useEffect(
+    () => pluginRegistry.bindHost({ movePaneBack, movePaneToNewLayout }),
+    [movePaneBack, movePaneToNewLayout, pluginRegistry],
+  );
   const activateTransientFocusLayout = useCallback(() => {
     const current = transientFocusLayoutStateRef.current;
     if (!current) return;
@@ -460,29 +493,6 @@ export function Shell({
     () => resolveExternalDockPreview(desktopDockPreview, bounds),
     [bounds, desktopDockPreview],
   );
-  const activePaneDrag = dragRef.current?.type === "pane-drag" ? dragRef.current : null;
-  const activeHoverOverlay = activePaneDrag && dragCursor
-    ? resolveHoverOverlay(dragCursor.x, dragCursor.y, dockLeafLayouts, activePaneDrag.paneId)
-    : null;
-  const effectiveDockPreview = dockPreview ?? externalDockPreview;
-  useShellNativeSurfaceWindowState({
-    activeHoverOverlay,
-    activePaneDrag,
-    appHeaderHeight,
-    commandBarNativeOccluder,
-    contentHeight,
-    dialogOpen,
-    dividerPreview,
-    dockDividerLayouts: screenDividerLayouts,
-    dockedPanes: screenDockedPanes,
-    dragFloatingRect,
-    effectiveDockPreview,
-    menuState,
-    nativeWindowModePanelRect,
-    visibleFloatingPanes: screenFloatingPanes,
-    width,
-    windowModeDockMovePreview,
-  });
 
   const titleState = useMemo(
     () => ({ config, paneState }) as Parameters<typeof resolveTickerForPane>[0],
@@ -579,6 +589,7 @@ export function Shell({
     startWindowMode,
     toggleFocusedPaneFullscreen,
     toggleFocusedPaneFloating,
+    toggleFocusedPaneNewLayout,
   });
 
   const openPaneMenu = useCallback((
@@ -645,6 +656,7 @@ export function Shell({
         toggle: () => { togglePaneFullscreen(paneId); },
       },
       paneFooterMenuItems(getPaneFooter(paneId)),
+      paneLayoutMoveMenu(paneId),
     );
     const showKitMenu = () => {
       const pluginItems = pluginRegistry.getContextMenuItems?.(context) ?? [];
@@ -686,7 +698,7 @@ export function Shell({
     void showContextMenu(context, items, event).then((shown) => {
       if (!shown) showKitMenu();
     });
-  }, [canExportPaneCsv, closePaneMenu, contentHeight, copyPaneScreenshot, desktopWindowBridge, exportPaneCsv, focusPane, getPaneTitle, handlePaneQuickSetting, nativePaneChrome, togglePaneFullscreen, openPaneSettings, paneAccelerators, paneMap, paneState, persistLayout, pluginRegistry, publicSharing, rendererHost.copyPngImage, sharePane, shortcutDisplayMode, showContextMenu, titleState, visibleLayout, width]);
+  }, [canExportPaneCsv, closePaneMenu, contentHeight, copyPaneScreenshot, desktopWindowBridge, exportPaneCsv, focusPane, getPaneTitle, handlePaneQuickSetting, nativePaneChrome, togglePaneFullscreen, openPaneSettings, paneAccelerators, paneLayoutMoveMenu, paneMap, paneState, persistLayout, pluginRegistry, publicSharing, rendererHost.copyPngImage, sharePane, shortcutDisplayMode, showContextMenu, titleState, visibleLayout, width]);
   openPaneMenuRef.current = openPaneMenu;
 
   // The open pane menu owns the keyboard, ahead of any pane however late it
@@ -802,6 +814,7 @@ export function Shell({
       <DeviceSignInDialogHost />
       <BrokerSignInDialogHost />
       <AuthDialogHost />
+      <McpConnectDialogHost />
       <FeedbackDialogHost />
       {dataProvider && tickerRepository && (
         <FormModalHost dataProvider={dataProvider} pluginRegistry={pluginRegistry} tickerRepository={tickerRepository} />
@@ -824,12 +837,27 @@ export function Shell({
         </Box>
       </Box>
 
+      <ShellNativeSurfaceSync
+        appHeaderHeight={appHeaderHeight}
+        commandBarNativeOccluder={commandBarNativeOccluder}
+        contentHeight={contentHeight}
+        dialogOpen={dialogOpen}
+        dockDividerLayouts={screenDividerLayouts}
+        dockedPanes={screenDockedPanes}
+        dockLeafLayouts={dockLeafLayouts}
+        externalDockPreview={externalDockPreview}
+        live={live}
+        menuState={menuState}
+        nativeWindowModePanelRect={nativeWindowModePanelRect}
+        visibleFloatingPanes={screenFloatingPanes}
+        width={width}
+        windowModeDockMovePreview={windowModeDockMovePreview}
+      />
+
       <ShellPaneLayers
         contentHeight={contentHeight}
-        dividerPreview={dividerPreview}
         dockDividerLayouts={dockDividerLayouts}
         dockLeafLayouts={dockLeafLayouts}
-        dragFloatingRect={dragFloatingRect}
         focusedPaneId={focusedPaneId}
         getPaneTitle={getPaneTitle}
         getPaneQuickSettings={getPaneQuickSettings}
@@ -845,6 +873,7 @@ export function Shell({
         handleNativePaneMouseDown={handleNativePaneMouseDown}
         handlePaneAction={handlePaneAction}
         hoveredPaneId={hoveredPaneId}
+        live={live}
         menuPaneId={menuState?.paneId ?? null}
         nativeContextMenu={nativeContextMenu}
         nativePaneChrome={nativePaneChrome}
@@ -868,9 +897,9 @@ export function Shell({
         contentHeight={contentHeight}
         dockGeometryOptions={dockGeometryOptions}
         dockLeafLayouts={screenDockLeafLayouts}
-        dragFloatingRect={dragFloatingRect}
         focusedPaneId={focusedPaneId}
         getPaneTitle={getPaneTitle}
+        live={live}
         menuOpen={!!menuState}
         nativePaneChrome={nativePaneChrome}
         nativeWindowModePanelRect={nativeWindowModePanelRect}
@@ -883,11 +912,9 @@ export function Shell({
       />
 
       <ShellDragOverlays
-        activeHoverOverlay={activeHoverOverlay}
-        activePaneDrag={activePaneDrag}
-        dockPreview={dockPreview}
-        dragFloatingRect={dragFloatingRect}
-        effectiveDockPreview={effectiveDockPreview}
+        dockLeafLayouts={dockLeafLayouts}
+        externalDockPreview={externalDockPreview}
+        live={live}
       />
 
       <ShellActionMenuOverlay

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

@@ -8,7 +8,7 @@ import {
 import type { PluginRegistry } from "../../../plugins/registry";
 import type { LayoutConfig } from "../../../types/config";
 import { constrainFloatingRectToBounds } from "./drag";
-import { resolveShellVisibleLayout } from "./visible-layout";
+import { collectDisabledPaneIds, resolveShellVisibleLayout } from "./visible-layout";
 
 interface ShellVisibleLayoutOptions {
   disabledPlugins: readonly string[];
@@ -24,16 +24,10 @@ export function useShellVisibleLayout({
   disabledPaneIds: Set<string>;
   visibleLayout: LayoutConfig;
 } {
-  const disabledPaneIds = useMemo(() => {
-    const pluginIds = new Set(disabledPlugins);
-    const paneIds = new Set<string>();
-    for (const pluginId of pluginIds) {
-      for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) {
-        paneIds.add(paneId);
-      }
-    }
-    return paneIds;
-  }, [disabledPlugins, pluginRegistry]);
+  const disabledPaneIds = useMemo(
+    () => collectDisabledPaneIds(pluginRegistry, disabledPlugins),
+    [disabledPlugins, pluginRegistry],
+  );
 
   const visibleLayout = useMemo(
     () => resolveShellVisibleLayout(layout, disabledPaneIds, pluginRegistry.panes),

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

@@ -15,7 +15,7 @@ import {
   type ShortcutDisplayMode,
 } from "../../../utils/shortcut-labels";
 import { PANE_MANAGEMENT_ACCELERATORS, type PaneManagementAccelerators } from "./shortcuts";
-import { t } from "../../../i18n";
+import { t, tf } from "../../../i18n";
 import { displayWidth } from "../../../utils/format";
 import { fireAndForget } from "../../../utils/fire-and-forget";
 
@@ -42,6 +42,14 @@ export interface PaneMenuQuickSetting {
   toggle: () => void;
 }
 
+/** Move to New Layout and Move Back as the pane menu offers them; either may be absent. */
+export interface PaneMenuLayoutMove {
+  /** Absent when the pane is alone in its layout. */
+  moveToNewLayout?: () => void;
+  /** Present when the pane was moved here from another layout. */
+  moveBack?: { layoutName: string; onSelect: () => void };
+}
+
 /**
  * The pane's own actions at the top of its menu: every footer hint with its
  * key, a footer shortcut such as `!`, then what the pane's kit controls add
@@ -93,6 +101,7 @@ export function menuForPane(
   quickSettings: PaneMenuQuickSetting[] = [],
   fullscreen?: { active: boolean; toggle: () => void },
   paneItems: ContextMenuItem[] = [],
+  layoutMove: PaneMenuLayoutMove = {},
 ): ContextMenuItem[] {
   const baseActions: ContextMenuItem[] = [...paneItems];
   if (baseActions.length > 0) baseActions.push(contextMenuDivider("pane:own-actions-divider"));
@@ -147,6 +156,24 @@ export function menuForPane(
     });
   }
 
+  if (layoutMove.moveToNewLayout) {
+    baseActions.push({
+      id: "move-to-new-layout",
+      label: "Move to New Layout",
+      accelerator: accelerators.newLayout,
+      onSelect: layoutMove.moveToNewLayout,
+    });
+  }
+  if (layoutMove.moveBack) {
+    baseActions.push({
+      id: "move-back",
+      label: tf("Move Back to {layout}", { layout: layoutMove.moveBack.layoutName }),
+      // The shortcut moves a pane back only when it is alone, where Move to New Layout is not offered.
+      accelerator: layoutMove.moveToNewLayout ? undefined : accelerators.newLayout,
+      onSelect: layoutMove.moveBack.onSelect,
+    });
+  }
+
   if (pane.floating) {
     baseActions.push({
       id: "dock",

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

@@ -42,7 +42,7 @@ export function useShellNativePointerRuntime({
   commandBarOpen = false,
 }: UseShellNativePointerRuntimeOptions) {
   const {
-    dragRef,
+    startDrag,
     updateDividerPreview,
     updateDragFloatingRect,
   } = dragRuntime;
@@ -87,17 +87,17 @@ export function useShellNativePointerRuntime({
 
     const pointer = getShellPointer(event);
     focusNativePane(paneId);
-    dragRef.current = {
+    startDrag({
       type: "pane-drag",
       paneId,
       mode: "floating",
       startX: pointer.x,
       startY: pointer.y,
       origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-    };
+    });
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.preventDefault();
-  }, [commandBarOpen, dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, updateDragFloatingRect, windowMode]);
+  }, [commandBarOpen, focusNativePane, getShellPointer, nativePaneChrome, startDrag, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDockedDrag = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
@@ -108,16 +108,16 @@ export function useShellNativePointerRuntime({
 
     const pointer = getShellPointer(event);
     focusNativePane(paneId);
-    dragRef.current = {
+    startDrag({
       type: "pane-drag",
       paneId,
       mode: "docked",
       startX: pointer.x,
       startY: pointer.y,
       origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-    };
+    });
     event.preventDefault();
-  }, [commandBarOpen, dragRef, focusNativePane, getShellPointer, nativePaneChrome, transientFocusActive, windowMode]);
+  }, [commandBarOpen, focusNativePane, getShellPointer, nativePaneChrome, startDrag, transientFocusActive, windowMode]);
 
   const startNativeFloatResize = useCallback((paneId: string, rect: FloatingRect, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
@@ -130,17 +130,17 @@ export function useShellNativePointerRuntime({
     } else {
       focusNativePane(paneId);
     }
-    dragRef.current = {
+    startDrag({
       type: "float-resize",
       paneId,
       startX: pointer.x,
       startY: pointer.y,
       origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-    };
+    });
     updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
     event.stopPropagation();
     event.preventDefault();
-  }, [commandBarOpen, dragRef, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, transientFocusActive, updateDragFloatingRect, windowMode]);
+  }, [commandBarOpen, focusNativePane, getShellPointer, nativePaneChrome, selectWindowModePane, startDrag, transientFocusActive, updateDragFloatingRect, windowMode]);
 
   const startNativeDividerDrag = useCallback((divider: DockDividerLayout, event: ShellMouseEvent) => {
     if (!nativePaneChrome) return;
@@ -152,7 +152,7 @@ export function useShellNativePointerRuntime({
       setMenuState(null);
       setHoveredMenuItemId(null);
     }
-    dragRef.current = {
+    startDrag({
       type: "divider",
       path: divider.path,
       axis: divider.axis,
@@ -160,7 +160,7 @@ export function useShellNativePointerRuntime({
       startY: pointer.y,
       startRatio: divider.ratio,
       bounds: divider.bounds,
-    };
+    });
     updateDividerPreview({
       pathKey: divider.path.join("."),
       rect: divider.rect,
@@ -168,7 +168,7 @@ export function useShellNativePointerRuntime({
     });
     event.stopPropagation();
     event.preventDefault();
-  }, [commandBarOpen, dragRef, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, transientFocusActive, updateDividerPreview]);
+  }, [commandBarOpen, getShellPointer, menuState, nativePaneChrome, setHoveredMenuItemId, setMenuState, startDrag, transientFocusActive, updateDividerPreview]);
 
   const handlePaneAction = useCallback((paneId: string, rect: LayoutBounds, event: ShellMouseEvent) => {
     if (commandBarOpen) return;

package/src/components/layout/shell/native/surfaces.ts

@@ -1,17 +1,18 @@
 import { useEffect, useMemo } from "react";
 import type {
   DockDividerLayout,
+  DockLeafLayout,
   FloatingRect,
   LayoutBounds,
   ResolvedPane,
 } from "../../../../layout/pane-manager";
 import { useNativeRenderer } from "../../../../ui";
 import type { DragPreview } from "../drag";
+import { IDLE_DRAG, useLiveDrag, useLiveHoverOverlay, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import {
   buildNativeTransientOccluders,
   buildNativeWindowState,
   resolveNativeDockDividers,
-  type DividerPreviewState,
 } from "./window-state";
 import type { WindowEditDockMovePreview } from "../../window-edit/presentation";
 
@@ -24,18 +25,18 @@ interface ShellNativeSurfaceMenuState {
   maxRows?: number;
 }
 
-interface UseShellNativeSurfaceWindowStateOptions {
-  activeHoverOverlay: Parameters<typeof buildNativeTransientOccluders>[0]["activeHoverOverlay"];
-  activePaneDrag: { paneId: string; mode: "docked" | "floating" } | null;
+interface ShellNativeSurfaceSyncProps {
   appHeaderHeight: number;
   commandBarNativeOccluder: LayoutBounds | null;
   contentHeight: number;
   dialogOpen: boolean;
-  dividerPreview: DividerPreviewState | null;
   dockDividerLayouts: DockDividerLayout[];
   dockedPanes: ResolvedPane[];
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
-  effectiveDockPreview: DragPreview | null;
+  /** The tiled panes a moving pane can be dropped on. */
+  dockLeafLayouts: DockLeafLayout[];
+  /** A pane from another window over this one's edge. */
+  externalDockPreview: DragPreview | null;
+  live: LiveDragStore;
   menuState: ShellNativeSurfaceMenuState | null;
   nativeWindowModePanelRect: LayoutBounds | null;
   visibleFloatingPanes: Array<{ pane: ResolvedPane; rect: FloatingRect }>;
@@ -43,26 +44,40 @@ interface UseShellNativeSurfaceWindowStateOptions {
   windowModeDockMovePreview: WindowEditDockMovePreview | null;
 }
 
-export function useShellNativeSurfaceWindowState({
-  activeHoverOverlay,
-  activePaneDrag,
+const NO_LEAVES: DockLeafLayout[] = [];
+const selectAll = (geometry: LiveDragGeometry) => geometry;
+const selectIdle = () => IDLE_DRAG;
+
+/**
+ * Keeps the native image surfaces clear of the layout. A component of its own,
+ * so following a drag redraws nothing but this.
+ */
+export function ShellNativeSurfaceSync({
   appHeaderHeight,
   commandBarNativeOccluder,
   contentHeight,
   dialogOpen,
-  dividerPreview,
   dockDividerLayouts,
   dockedPanes,
-  dragFloatingRect,
-  effectiveDockPreview,
+  dockLeafLayouts,
+  externalDockPreview,
+  live,
   menuState,
   nativeWindowModePanelRect,
   visibleFloatingPanes,
   width,
   windowModeDockMovePreview,
-}: UseShellNativeSurfaceWindowStateOptions) {
+}: ShellNativeSurfaceSyncProps): null {
   // Only terminal hosts draw kitty images that need to stay clear of the layout.
   const nativeSurfaceManager = useNativeRenderer().nativeSurfaceManager;
+  const {
+    paneDrag: activePaneDrag,
+    floating: dragFloatingRect,
+    divider: dividerPreview,
+    dockPreview,
+  } = useLiveDrag(live, nativeSurfaceManager ? selectAll : selectIdle);
+  const effectiveDockPreview = dockPreview ?? externalDockPreview;
+  const activeHoverOverlay = useLiveHoverOverlay(live, nativeSurfaceManager ? dockLeafLayouts : NO_LEAVES);
   const nativeTransientOccluders = useMemo(() => buildNativeTransientOccluders({
     activeHoverOverlay,
     activePaneDrag,
@@ -124,4 +139,5 @@ export function useShellNativeSurfaceWindowState({
   useEffect(() => {
     nativeSurfaceManager?.setWindowState(nativeWindowState);
   }, [nativeSurfaceManager, nativeWindowState]);
+  return null;
 }

package/src/components/layout/shell/pane/actions.ts

@@ -172,7 +172,8 @@ export function useShellPaneActions({
       paneTypes: pluginRegistry.panes,
       apply: persistLayout,
       notify: pluginRegistry.notify,
-      onRevert: () => pluginRegistry.updateLayout(visibleLayout),
+      // Back through the shell's save, which puts hidden panes back too.
+      onRevert: () => persistLayout(visibleLayout),
     });
     return true;
   }, [contentHeight, persistLayout, pluginRegistry, visibleLayout, width]);