gloomberb 0.16.2 → 0.16.4

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

@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useRef } from "react";
-import { Box } from "../../../../ui";
+import { memo, useCallback, useMemo, useRef, type RefObject } from "react";
+import { Box, type BoxRenderable, type LiveBoxFrame } from "../../../../ui";
 import { resolveOccludedPaneIds } from "../pane-occlusion";
 import type {
   DockDividerLayout,
@@ -9,7 +9,8 @@ import type {
   ResolvedPane,
 } from "../../../../layout/pane-manager";
 import { colors } from "../../../../theme/colors";
-import { constrainFloatingRectToBounds } from "../drag";
+import { constrainFloatingRectToBounds, sameRect } from "../drag";
+import { useLiveBoxFrame, useLiveDrag, useLiveResizeRect, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import { pathKey } from "../../window-edit/mode";
 import { FloatingPaneWrapper } from "../../floating-pane";
 import { PaneContent } from "../../pane/content";
@@ -17,7 +18,6 @@ import { PaneWrapper } from "../../pane";
 import type { PaneHeaderQuickSetting } from "../../pane/header";
 import { hasPaneFooterContent, PaneFooterKeys, PaneFooterProvider } from "../../pane/footer";
 import { resolvePaneBodyFrame, shouldReservePaneFooter } from "../../pane/sizing";
-import type { DividerPreviewState } from "../native/window-state";
 
 type ShellMouseHandler = (event: any) => void;
 
@@ -28,10 +28,8 @@ interface VisibleFloatingPane {
 
 interface ShellPaneLayersProps {
   contentHeight: number;
-  dividerPreview: DividerPreviewState | null;
   dockDividerLayouts: DockDividerLayout[];
   dockLeafLayouts: DockLeafLayout[];
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
   focusedPaneId: string | null;
   getPaneTitle: (pane: ResolvedPane) => string;
   getPaneQuickSettings: (paneId: string) => PaneHeaderQuickSetting[];
@@ -43,6 +41,7 @@ interface ShellPaneLayersProps {
   handleNativePaneMouseDown: (paneId: string, event: any) => void;
   handlePaneAction: (paneId: string, rect: LayoutBounds, event: any) => void;
   hoveredPaneId: string | null;
+  live: LiveDragStore;
   menuPaneId: string | null;
   nativeContextMenu?: boolean;
   nativePaneChrome: boolean;
@@ -61,14 +60,375 @@ interface ShellPaneLayersProps {
   windowModePaneId: string | null;
 }
 
+/**
+ * What a pane's chrome calls back into the shell. One stable object that
+ * always reaches the shell's current handlers, so a pane layer re-renders only
+ * when something it draws changed, not whenever the shell does.
+ */
+interface PaneLayerActions {
+  paneMouseDown: (paneId: string, event: any) => void;
+  hover: (paneId: string) => void;
+  dockedDragStart: (paneId: string, rect: LayoutBounds, event: any) => void;
+  floatingDragStart: (paneId: string, rect: FloatingRect, event: any) => void;
+  floatResizeStart: (paneId: string, rect: FloatingRect, event: any) => void;
+  drag: ShellMouseHandler;
+  contextMenu: (paneId: string, rect: LayoutBounds, event: any) => void;
+  menu: (paneId: string, rect: LayoutBounds, event: any) => void;
+  closeMouseDown: (paneId: string, event: any) => void;
+  /** Also the failure card's Close: keep it stable, the pane body is memoized on it. */
+  close: (paneId: string) => void;
+  restoreFullscreen: ShellMouseHandler;
+  dividerDragStart: (divider: DockDividerLayout, event: any) => void;
+}
+
+interface PaneLayerProps {
+  pane: ResolvedPane;
+  rect: LayoutBounds;
+  title: string;
+  focused: boolean;
+  windowModeSelected: boolean;
+  showActions: boolean;
+  /** Fully covered (terminal only): skip drawing, keep the tree mounted. */
+  hidden: boolean;
+  inView: boolean;
+  fullscreen: boolean;
+  /** Whether the header can start a move: not in fullscreen. */
+  movable: boolean;
+  nativePaneChrome: boolean;
+  nativeContextMenu: boolean;
+  getPaneQuickSettings: (paneId: string) => PaneHeaderQuickSetting[];
+  actions: PaneLayerActions;
+}
+
 const EMPTY_OCCLUSION: ReadonlySet<string> = new Set();
+const selectFloatingDragActive = (geometry: LiveDragGeometry) => geometry.floating !== null;
+const selectNothing = () => null;
+const selectNoDrag = () => false;
+
+function usePaneQuickSettings(getPaneQuickSettings: PaneLayerProps["getPaneQuickSettings"], paneId: string) {
+  return useMemo(() => getPaneQuickSettings(paneId), [getPaneQuickSettings, paneId]);
+}
+
+const DockedPaneLayer = memo(function DockedPaneLayer({
+  pane,
+  rect,
+  title,
+  focused,
+  windowModeSelected,
+  showActions,
+  hidden,
+  inView,
+  fullscreen,
+  movable,
+  nativePaneChrome,
+  nativeContextMenu,
+  getPaneQuickSettings,
+  actions,
+}: PaneLayerProps) {
+  const paneId = pane.instance.instanceId;
+  const quickSettings = usePaneQuickSettings(getPaneQuickSettings, paneId);
+  const nativeMove = nativePaneChrome && movable;
+  return (
+    <Box
+      position="absolute"
+      left={rect.x}
+      top={rect.y}
+      width={rect.width}
+      height={rect.height}
+      visible={!hidden}
+    >
+      <PaneFooterProvider>
+        {(footer) => {
+          const showFooter = hasPaneFooterContent(footer);
+          const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+          const bodyFrame = resolvePaneBodyFrame({
+            width: rect.width,
+            height: rect.height,
+            nativePaneChrome,
+            footerVisible: reserveFooter || showFooter,
+            reserveFooter,
+          });
+          return (
+            <PaneWrapper
+              paneId={paneId}
+              title={title}
+              focused={focused}
+              width={rect.width}
+              height={rect.height}
+              locked={pane.instance.locked === true}
+              showActions={showActions}
+              quickSettings={quickSettings}
+              topRule={rect.y > 0.01}
+              windowModeSelected={windowModeSelected}
+              footer={footer}
+              onMouseDownCapture={nativePaneChrome ? (event) => actions.paneMouseDown(paneId, event) : undefined}
+              onHeaderMouseMove={() => actions.hover(paneId)}
+              onHeaderMouseDown={nativeMove ? (event) => actions.dockedDragStart(paneId, rect, event) : undefined}
+              onHeaderMouseDrag={nativeMove ? actions.drag : undefined}
+              onHeaderMouseDragEnd={nativeMove ? actions.drag : undefined}
+              onHeaderContextMenu={nativePaneChrome && nativeContextMenu ? (event) => actions.contextMenu(paneId, rect, event) : undefined}
+              onActionMouseDown={(event) => actions.menu(paneId, rect, event)}
+              fullscreen={fullscreen}
+              onRestoreMouseDown={fullscreen ? actions.restoreFullscreen : undefined}
+            >
+              <PaneFooterKeys paneId={paneId} footer={footer} focused={focused} />
+              <PaneContent
+                component={pane.def.component}
+                paneId={paneId}
+                paneType={pane.instance.paneId}
+                title={title}
+                focused={focused}
+                width={bodyFrame.width ?? 1}
+                height={bodyFrame.height ?? 1}
+                inView={inView}
+                closePane={actions.close}
+              />
+            </PaneWrapper>
+          );
+        }}
+      </PaneFooterProvider>
+    </Box>
+  );
+});
+
+const FloatingPaneFrame = memo(function FloatingPaneFrame({
+  pane,
+  rect,
+  title,
+  focused,
+  windowModeSelected,
+  showActions,
+  hidden,
+  inView,
+  fullscreen,
+  movable,
+  nativePaneChrome,
+  nativeContextMenu,
+  getPaneQuickSettings,
+  actions,
+  zIndex,
+  frameRef,
+  contentPinned = false,
+}: PaneLayerProps & {
+  rect: FloatingRect;
+  zIndex: number;
+  /** Desktop: the frame a resize sizes outside React. */
+  frameRef?: RefObject<BoxRenderable | null>;
+  /** Desktop: a resize is under way, so the content keeps the size it last rendered at. */
+  contentPinned?: boolean;
+}) {
+  const paneId = pane.instance.instanceId;
+  const quickSettings = usePaneQuickSettings(getPaneQuickSettings, paneId);
+  const nativeMove = nativePaneChrome && movable;
+  return (
+    <PaneFooterProvider>
+      {(footer) => {
+        const showFooter = hasPaneFooterContent(footer);
+        const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+        const bodyFrame = resolvePaneBodyFrame({
+          width: rect.width,
+          height: rect.height,
+          nativePaneChrome,
+          footerVisible: reserveFooter || showFooter,
+          reserveFooter,
+        });
+        return (
+          <FloatingPaneWrapper
+            paneId={paneId}
+            title={title}
+            x={rect.x}
+            y={rect.y}
+            width={rect.width}
+            height={rect.height}
+            zIndex={zIndex}
+            hidden={hidden}
+            focused={focused}
+            windowModeSelected={windowModeSelected}
+            locked={pane.instance.locked === true}
+            showActions={showActions}
+            quickSettings={quickSettings}
+            footer={footer}
+            onMouseDownCapture={nativePaneChrome ? (event) => actions.paneMouseDown(paneId, event) : undefined}
+            onHeaderMouseMove={() => actions.hover(paneId)}
+            onHeaderMouseDown={nativeMove ? (event) => actions.floatingDragStart(paneId, rect, event) : undefined}
+            onHeaderMouseDrag={nativeMove ? actions.drag : undefined}
+            onHeaderMouseDragEnd={nativeMove ? actions.drag : undefined}
+            onHeaderContextMenu={nativePaneChrome && nativeContextMenu ? (event) => actions.contextMenu(paneId, rect, event) : undefined}
+            onActionMouseDown={(event) => actions.menu(paneId, rect, event)}
+            onCloseMouseDown={fullscreen ? undefined : (event) => actions.closeMouseDown(paneId, event)}
+            onRestoreMouseDown={fullscreen ? actions.restoreFullscreen : undefined}
+            fullscreen={fullscreen}
+            onResizeMouseDown={nativeMove ? (event) => actions.floatResizeStart(paneId, rect, event) : undefined}
+            onResizeMouseDrag={nativeMove ? actions.drag : undefined}
+            onResizeMouseDragEnd={nativeMove ? actions.drag : undefined}
+            frameRef={frameRef}
+          >
+            <PaneFooterKeys paneId={paneId} footer={footer} focused={focused} />
+            <PaneContent
+              component={pane.def.component}
+              paneId={paneId}
+              paneType={pane.instance.paneId}
+              title={title}
+              focused={focused}
+              width={bodyFrame.width ?? 1}
+              height={bodyFrame.height ?? 1}
+              inView={inView}
+              onClose={actions.close}
+              closePane={actions.close}
+              pinned={contentPinned}
+            />
+          </FloatingPaneWrapper>
+        );
+      }}
+    </PaneFooterProvider>
+  );
+});
+
+/**
+ * A floating pane, drawn at its layout rect or where a drag has it right now.
+ * On the desktop a move never renders: the pane's layer is promoted at the
+ * press and each frame of the move only writes its transform (see
+ * `useLiveBoxFrame`), so nothing inside it re-renders, lays out or repaints
+ * until the release commits the new position. A resize writes the frame's
+ * size the same way, on the same layer, and the header, body and footer
+ * stretch with it; the content keeps its size and renders at the new one a
+ * few times a second (`useLiveResizeRect`). Every terminal frame redraws it
+ * at the drag's rect.
+ */
+const FloatingPaneLayer = memo(function FloatingPaneLayer({
+  live,
+  rect,
+  width,
+  contentHeight,
+  zIndex,
+  ...frame
+}: PaneLayerProps & { rect: FloatingRect; zIndex: number; live: LiveDragStore; width: number; contentHeight: number }) {
+  const paneId = frame.pane.instance.instanceId;
+  const slide = frame.nativePaneChrome;
+  const selectRedraw = useCallback((geometry: LiveDragGeometry) => {
+    if (geometry.floating?.paneId !== paneId) return null;
+    // A desktop move or resize follows by restyling the pane instead.
+    if (slide && (geometry.paneDrag?.paneId === paneId || geometry.paneResize?.paneId === paneId)) return null;
+    return geometry.floating.rect;
+  }, [paneId, slide]);
+  const dragRect = useLiveDrag(live, selectRedraw);
+  const selectResizing = useCallback((geometry: LiveDragGeometry) => (
+    slide && geometry.paneResize?.paneId === paneId
+  ), [paneId, slide]);
+  const resizing = useLiveDrag(live, selectResizing);
+  const layerRef = useRef<BoxRenderable | null>(null);
+  const frameOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    // A resize keeps the pane on its own layer too: the panes it uncovers or
+    // covers never repaint, only the pane does.
+    if (geometry.paneResize?.paneId === paneId) return { dx: 0, dy: 0 };
+    if (geometry.paneDrag?.paneId !== paneId) return null;
+    const moving = geometry.floating?.paneId === paneId ? geometry.floating.rect : null;
+    // Promoted from the press, so the first move already only slides it.
+    if (!moving) return { dx: 0, dy: 0 };
+    const at = constrainFloatingRectToBounds(moving, width, contentHeight);
+    return { dx: at.x - rect.x, dy: at.y - rect.y };
+  } : null), [contentHeight, paneId, rect.x, rect.y, slide, width]);
+  useLiveBoxFrame(live, layerRef, frameOf);
+  const frameRef = useRef<BoxRenderable | null>(null);
+  const sizeOf = useMemo(() => (slide ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    if (geometry.paneResize?.paneId !== paneId || geometry.floating?.paneId !== paneId) return null;
+    const at = constrainFloatingRectToBounds(geometry.floating.rect, width, contentHeight);
+    return { width: at.width, height: at.height };
+  } : null), [contentHeight, paneId, slide, width]);
+  useLiveBoxFrame(live, frameRef, sizeOf);
+  const resizeRect = useLiveResizeRect(live, paneId, slide);
+  const preview = dragRect
+    ? constrainFloatingRectToBounds(dragRect, width, contentHeight)
+    : resizeRect && !sameRect(resizeRect, rect)
+      ? constrainFloatingRectToBounds(resizeRect, width, contentHeight)
+      : rect;
+  const content = (
+    <FloatingPaneFrame
+      {...frame}
+      rect={preview}
+      zIndex={zIndex}
+      frameRef={slide ? frameRef : undefined}
+      contentPinned={resizing}
+    />
+  );
+  if (!slide) return content;
+  return (
+    <Box
+      ref={layerRef}
+      position="absolute"
+      left={0}
+      top={0}
+      width={0}
+      height={0}
+      zIndex={zIndex}
+    >
+      {content}
+    </Box>
+  );
+});
+
+/**
+ * A tiled split's divider, which follows the pointer while it is dragged: on
+ * the desktop by restyling itself each move, in the terminal by redrawing.
+ */
+const DockDividerLayer = memo(function DockDividerLayer({
+  divider,
+  resizing,
+  live,
+  nativePaneChrome,
+  actions,
+}: {
+  divider: DockDividerLayout;
+  /** Window mode is resizing this split from the keyboard. */
+  resizing: boolean;
+  live: LiveDragStore;
+  nativePaneChrome: boolean;
+  actions: PaneLayerActions;
+}) {
+  const dividerPathKey = pathKey(divider.path);
+  const selectDragged = useCallback((geometry: LiveDragGeometry) => (
+    geometry.divider?.pathKey === dividerPathKey
+  ), [dividerPathKey]);
+  const selectRect = useCallback((geometry: LiveDragGeometry) => (
+    geometry.divider?.pathKey === dividerPathKey ? geometry.divider.rect : null
+  ), [dividerPathKey]);
+  const dragged = useLiveDrag(live, selectDragged);
+  const previewRect = useLiveDrag(live, nativePaneChrome ? selectNothing : selectRect);
+  const boxRef = useRef<BoxRenderable | null>(null);
+  const frameOf = useMemo(() => (nativePaneChrome ? (geometry: LiveDragGeometry): LiveBoxFrame | null => {
+    const at = geometry.divider?.pathKey === dividerPathKey ? geometry.divider.rect : null;
+    return at ? { dx: at.x - divider.rect.x, dy: at.y - divider.rect.y } : null;
+  } : null), [divider.rect.x, divider.rect.y, dividerPathKey, nativePaneChrome]);
+  useLiveBoxFrame(live, boxRef, frameOf);
+  const active = dragged || resizing;
+  const rect = previewRect ?? divider.rect;
+  return (
+    <Box
+      ref={boxRef}
+      position="absolute"
+      left={rect.x}
+      top={rect.y}
+      width={rect.width}
+      height={rect.height}
+      zIndex={active ? 2 : 1}
+      backgroundColor={active ? colors.borderFocused : colors.border}
+      {...(nativePaneChrome ? {
+        "data-gloom-role": "dock-divider",
+        "data-axis": divider.axis,
+        "data-active": active ? "true" : "false",
+        style: { "--divider-color": active ? colors.borderFocused : colors.border } as any,
+      } : {})}
+      onMouseDown={nativePaneChrome ? (event: any) => actions.dividerDragStart(divider, event) : undefined}
+      onMouseDrag={nativePaneChrome ? actions.drag : undefined}
+      onMouseDragEnd={nativePaneChrome ? actions.drag : undefined}
+    />
+  );
+});
 
 export function ShellPaneLayers({
   contentHeight,
-  dividerPreview,
   dockDividerLayouts,
   dockLeafLayouts,
-  dragFloatingRect,
   focusedPaneId,
   getPaneTitle,
   getPaneQuickSettings,
@@ -80,8 +440,9 @@ export function ShellPaneLayers({
   handleNativePaneMouseDown,
   handlePaneAction,
   hoveredPaneId,
+  live,
   menuPaneId,
-  nativeContextMenu,
+  nativeContextMenu = false,
   nativePaneChrome,
   overlayOpen,
   paneMap,
@@ -116,12 +477,75 @@ export function ShellPaneLayers({
   // Skipping the draw is a terminal concern: desktop pane chrome is DOM, where
   // the compositor already skips covered windows, and a drag keeps everything
   // drawn so the preview never reveals a blank spot.
-  const occludedPaneIds = nativePaneChrome || dragFloatingRect ? EMPTY_OCCLUSION : coveredPaneIds;
-  // The failure card's Close. Stable, so a focus or layout change does not
-  // re-render every memoized pane body.
-  const closePaneRef = useRef(handleFloatingClose);
-  closePaneRef.current = handleFloatingClose;
-  const closePane = useCallback((paneId: string) => closePaneRef.current(paneId), []);
+  const floatingDragActive = useLiveDrag(live, nativePaneChrome ? selectNoDrag : selectFloatingDragActive);
+  const occludedPaneIds = nativePaneChrome || floatingDragActive ? EMPTY_OCCLUSION : coveredPaneIds;
+  const fullscreenRect = useMemo(() => ({ x: 0, y: 0, width, height: contentHeight }), [contentHeight, width]);
+
+  const handlersRef = useRef({
+    handleFloatingClose,
+    handleFloatingCloseMouseDown,
+    handleRestoreFullscreen,
+    handleNativeDrag,
+    handleNativePaneContextMenu,
+    handleNativePaneMouseDown,
+    handlePaneAction,
+    setHoveredPaneIfChanged,
+    startNativeDividerDrag,
+    startNativeDockedDrag,
+    startNativeFloatingDrag,
+    startNativeFloatResize,
+  });
+  handlersRef.current = {
+    handleFloatingClose,
+    handleFloatingCloseMouseDown,
+    handleRestoreFullscreen,
+    handleNativeDrag,
+    handleNativePaneContextMenu,
+    handleNativePaneMouseDown,
+    handlePaneAction,
+    setHoveredPaneIfChanged,
+    startNativeDividerDrag,
+    startNativeDockedDrag,
+    startNativeFloatingDrag,
+    startNativeFloatResize,
+  };
+  // Only called from events, never while rendering, so reading the latest handlers is safe.
+  const actions = useMemo<PaneLayerActions>(() => ({
+    paneMouseDown: (paneId, event) => handlersRef.current.handleNativePaneMouseDown(paneId, event),
+    hover: (paneId) => handlersRef.current.setHoveredPaneIfChanged(paneId),
+    dockedDragStart: (paneId, rect, event) => handlersRef.current.startNativeDockedDrag(paneId, rect, event),
+    floatingDragStart: (paneId, rect, event) => handlersRef.current.startNativeFloatingDrag(paneId, rect, event),
+    floatResizeStart: (paneId, rect, event) => handlersRef.current.startNativeFloatResize(paneId, rect, event),
+    drag: (event) => handlersRef.current.handleNativeDrag(event),
+    contextMenu: (paneId, rect, event) => handlersRef.current.handleNativePaneContextMenu(paneId, rect, event),
+    menu: (paneId, rect, event) => handlersRef.current.handlePaneAction(paneId, rect, event),
+    closeMouseDown: (paneId, event) => handlersRef.current.handleFloatingCloseMouseDown(paneId, event),
+    close: (paneId) => handlersRef.current.handleFloatingClose(paneId),
+    restoreFullscreen: (event) => handlersRef.current.handleRestoreFullscreen(event),
+    dividerDragStart: (divider, event) => handlersRef.current.startNativeDividerDrag(divider, event),
+  }), []);
+
+  const layerProps = (pane: ResolvedPane, rect: LayoutBounds): PaneLayerProps => {
+    const paneId = pane.instance.instanceId;
+    const focused = focusedPaneId === paneId && (!overlayOpen || menuPaneId === paneId);
+    const fullscreen = transientFocusActive && paneId === transientFocusPaneId;
+    return {
+      pane,
+      rect,
+      title: getPaneTitle(pane),
+      focused,
+      windowModeSelected: windowModePaneId === paneId,
+      showActions: focused || hoveredPaneId === paneId || menuPaneId === paneId,
+      hidden: occludedPaneIds.has(paneId),
+      inView: !coveredPaneIds.has(paneId),
+      fullscreen,
+      movable: !transientFocusActive,
+      nativePaneChrome,
+      nativeContextMenu,
+      getPaneQuickSettings,
+      actions,
+    };
+  };
 
   return (
     <>
@@ -129,182 +553,39 @@ export function ShellPaneLayers({
         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 isFullscreenBase = transientFocusActive && leaf.instanceId === transientFocusPaneId;
-        const focused = focusedPaneId === leaf.instanceId && (!overlayOpen || menuPaneId === leaf.instanceId);
-        const windowModeSelected = windowModePaneId === leaf.instanceId;
-        const showActions = focused || hoveredPaneId === leaf.instanceId || menuPaneId === leaf.instanceId;
-        const title = getPaneTitle(pane);
         return (
-          <Box
+          <DockedPaneLayer
             key={`dock:${leaf.instanceId}`}
-            position="absolute"
-            left={rect.x}
-            top={rect.y}
-            width={rect.width}
-            height={rect.height}
-            visible={!occludedPaneIds.has(leaf.instanceId)}
-          >
-            <PaneFooterProvider>
-              {(footer) => {
-                const showFooter = hasPaneFooterContent(footer);
-                const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
-                const renderFooter = reserveFooter || showFooter;
-                const bodyFrame = resolvePaneBodyFrame({
-                  width: rect.width,
-                  height: rect.height,
-                  nativePaneChrome,
-                  footerVisible: renderFooter,
-                  reserveFooter,
-                });
-                return (
-                  <PaneWrapper
-                    paneId={leaf.instanceId}
-                    title={title}
-                    focused={focused}
-                    width={rect.width}
-                    height={rect.height}
-                    locked={pane.instance.locked === true}
-                    showActions={showActions}
-                    quickSettings={getPaneQuickSettings(leaf.instanceId)}
-                    topRule={rect.y > 0.01}
-                    windowModeSelected={windowModeSelected}
-                    footer={footer}
-                    onMouseDownCapture={nativePaneChrome ? (event) => handleNativePaneMouseDown(leaf.instanceId, event) : undefined}
-                    onHeaderMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
-                    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)}
-                    fullscreen={isFullscreenBase}
-                    onRestoreMouseDown={isFullscreenBase ? handleRestoreFullscreen : undefined}
-                  >
-                    <PaneFooterKeys paneId={leaf.instanceId} footer={footer} focused={focused} />
-                    <PaneContent
-                      component={pane.def.component}
-                      paneId={pane.instance.instanceId}
-                      paneType={pane.instance.paneId}
-                      title={title}
-                      focused={focused}
-                      width={bodyFrame.width ?? 1}
-                      height={bodyFrame.height ?? 1}
-                      inView={!coveredPaneIds.has(leaf.instanceId)}
-                      closePane={closePane}
-                    />
-                  </PaneWrapper>
-                );
-              }}
-            </PaneFooterProvider>
-          </Box>
+            {...layerProps(pane, transientFocusActive ? fullscreenRect : leaf.rect)}
+          />
         );
       })}
 
       {visibleFloatingPanes.map(({ pane, rect }) => {
         if (transientFocusActive && pane.instance.instanceId !== transientFocusPaneId) return null;
-        const isFullscreenBase = transientFocusActive && pane.instance.instanceId === transientFocusPaneId;
-        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);
-        const windowModeSelected = windowModePaneId === pane.instance.instanceId;
-        const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuPaneId === pane.instance.instanceId;
-        const title = getPaneTitle(pane);
         return (
-          <PaneFooterProvider key={`float:${pane.instance.instanceId}`}>
-            {(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 (
-                <FloatingPaneWrapper
-                  paneId={pane.instance.instanceId}
-                  title={title}
-                  x={preview.x}
-                  y={preview.y}
-                  width={preview.width}
-                  height={preview.height}
-                  zIndex={pane.floating?.zIndex ?? 50}
-                  hidden={occludedPaneIds.has(pane.instance.instanceId)}
-                  focused={focused}
-                  windowModeSelected={windowModeSelected}
-                  locked={pane.instance.locked === true}
-                  showActions={showActions}
-                  quickSettings={getPaneQuickSettings(pane.instance.instanceId)}
-                  footer={footer}
-                  onMouseDownCapture={nativePaneChrome ? (event) => handleNativePaneMouseDown(pane.instance.instanceId, event) : undefined}
-                  onHeaderMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
-                  onHeaderMouseDown={nativePaneChrome && !isFullscreenBase ? (event) => startNativeFloatingDrag(pane.instance.instanceId, preview, event) : undefined}
-                  onHeaderMouseDrag={nativePaneChrome && !isFullscreenBase ? handleNativeDrag : undefined}
-                  onHeaderMouseDragEnd={nativePaneChrome && !isFullscreenBase ? handleNativeDrag : undefined}
-                  onHeaderContextMenu={nativePaneChrome && nativeContextMenu === true ? (event) => handleNativePaneContextMenu(pane.instance.instanceId, preview, event) : undefined}
-                  onActionMouseDown={(event) => handlePaneAction(pane.instance.instanceId, preview, event)}
-                  onCloseMouseDown={isFullscreenBase ? undefined : (event) => handleFloatingCloseMouseDown(pane.instance.instanceId, event)}
-                  onRestoreMouseDown={isFullscreenBase ? handleRestoreFullscreen : undefined}
-                  fullscreen={isFullscreenBase}
-                  onResizeMouseDown={nativePaneChrome && !isFullscreenBase ? (event) => startNativeFloatResize(pane.instance.instanceId, preview, event) : undefined}
-                  onResizeMouseDrag={nativePaneChrome && !isFullscreenBase ? handleNativeDrag : undefined}
-                  onResizeMouseDragEnd={nativePaneChrome && !isFullscreenBase ? handleNativeDrag : undefined}
-                >
-                  <PaneFooterKeys paneId={pane.instance.instanceId} footer={footer} focused={focused} />
-                  <PaneContent
-                    component={pane.def.component}
-                    paneId={pane.instance.instanceId}
-                    paneType={pane.instance.paneId}
-                    title={title}
-                    focused={focused}
-                    width={bodyFrame.width ?? 1}
-                    height={bodyFrame.height ?? 1}
-                    inView={!coveredPaneIds.has(pane.instance.instanceId)}
-                    onClose={handleFloatingClose}
-                    closePane={closePane}
-                  />
-                </FloatingPaneWrapper>
-              );
-            }}
-          </PaneFooterProvider>
-        );
-      })}
-
-      {dockDividerLayouts.map((divider) => {
-        if (transientFocusActive) return null;
-        const dividerPathKey = pathKey(divider.path);
-        const previewActive = dividerPreview?.pathKey === dividerPathKey;
-        const active = previewActive || windowModeDockResizePathKey === dividerPathKey;
-        const rect = previewActive ? dividerPreview.rect : divider.rect;
-        return (
-          <Box
-            key={`divider:${divider.path.join(".")}`}
-            position="absolute"
-            left={rect.x}
-            top={rect.y}
-            width={rect.width}
-            height={rect.height}
-            zIndex={active ? 2 : 1}
-            backgroundColor={active ? colors.borderFocused : colors.border}
-            {...(nativePaneChrome ? {
-              "data-gloom-role": "dock-divider",
-              "data-axis": divider.axis,
-              "data-active": active ? "true" : "false",
-              style: { "--divider-color": active ? colors.borderFocused : colors.border } as any,
-            } : {})}
-            onMouseDown={nativePaneChrome ? (event: any) => startNativeDividerDrag(divider, event) : undefined}
-            onMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
-            onMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}
+          <FloatingPaneLayer
+            key={`float:${pane.instance.instanceId}`}
+            {...layerProps(pane, transientFocusActive ? fullscreenRect : rect)}
+            rect={transientFocusActive ? fullscreenRect : rect}
+            zIndex={pane.floating?.zIndex ?? 50}
+            live={live}
+            width={width}
+            contentHeight={contentHeight}
           />
         );
       })}
+
+      {!transientFocusActive && dockDividerLayouts.map((divider) => (
+        <DockDividerLayer
+          key={`divider:${divider.path.join(".")}`}
+          divider={divider}
+          resizing={windowModeDockResizePathKey === pathKey(divider.path)}
+          live={live}
+          nativePaneChrome={nativePaneChrome}
+          actions={actions}
+        />
+      ))}
     </>
   );
 }