gloomberb 0.16.2 → 0.16.3

package/src/components/layout/shell/active-drag.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import {
   floatAtRect,
   getRememberedFloatingRect,
@@ -7,6 +7,7 @@ import {
   type DockGeometryOptions,
   type DockLeafLayout,
   type DropTarget,
+  type FloatingRect,
   type LayoutBounds,
   type ResolvedPane,
 } from "../../../layout/pane-manager";
@@ -23,6 +24,7 @@ import {
   resolveHoverOverlay,
   resolvePaneDragFloatingRect,
   resolveSnapGuide,
+  type DragPreview,
 } from "./drag";
 import type { ShellDragRuntimeState, ShellMouseEvent } from "./drag/runtime";
 import type { WindowEditState } from "../window-edit/mode";
@@ -65,37 +67,74 @@ export function useShellActiveDrag({
   windowMode,
 }: UseShellActiveDragOptions) {
   const {
-    dividerPreviewRef,
-    dockPreviewRef,
+    cancelActiveDrag,
     dragRef,
-    setDragCursor,
+    live,
+    setHoverTarget,
     updateDividerPreview,
     updateDockPreview,
     updateDragFloatingRect,
   } = dragRuntime;
+  // What one drag keeps between moves: a docked pane's floating size, and the
+  // last drop it simulated, so a move over the same target computes nothing.
+  const memoRef = useRef<{
+    drag: unknown;
+    baseRect: FloatingRect | null;
+    dropKey: string | null;
+    drop: DragPreview | null;
+  }>({ drag: null, baseRect: null, dropKey: null, drop: null });
 
   return useCallback((event: ShellMouseEvent) => {
     const shellY = event.y - appHeaderHeight;
     const preciseX = event.preciseX ?? event.x;
     const preciseShellY = (event.preciseY ?? event.y) - appHeaderHeight;
+    // Drawn a moment ahead where the host predicts the pointer; hit tests and
+    // the release use where it is.
+    const drawX = event.predictedX ?? preciseX;
+    const drawShellY = event.predictedY != null ? event.predictedY - appHeaderHeight : preciseShellY;
     const hitX = precisePointer ? preciseX : event.x;
     const hitShellY = precisePointer ? preciseShellY : shellY;
     const dragThreshold = precisePointer ? PRECISE_PANE_DRAG_THRESHOLD : PANE_DRAG_THRESHOLD;
     const drag = dragRef.current;
     if (!drag) return;
     const baseLayout = windowMode?.previewLayout ?? visibleLayout;
+    const memo = memoRef.current;
+    if (memo.drag !== drag) {
+      memo.drag = drag;
+      memo.baseRect = null;
+      memo.dropKey = null;
+      memo.drop = null;
+    }
+    const dividerRatioAt = (x: number, y: number) => {
+      if (drag.type !== "divider") return 0;
+      const total = drag.axis === "horizontal" ? drag.bounds.width : drag.bounds.height;
+      const delta = drag.axis === "horizontal" ? x - drag.startX : y - drag.startY;
+      return Math.max(0.1, Math.min(0.9, drag.startRatio + (delta / Math.max(1, total))));
+    };
+    const dragBaseRect = () => {
+      if (drag.type !== "pane-drag") return null;
+      if (drag.mode === "floating") return drag.origRect;
+      memo.baseRect ??= getRememberedFloatingRect(baseLayout, drag.paneId, width, contentHeight, paneMap.get(drag.paneId)?.def);
+      return memo.baseRect;
+    };
+
+    if (event.type === "drag-cancel") {
+      // The window lost focus or the system took the pointer: put everything back.
+      cancelActiveDrag();
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
 
     if (event.type === "drag") {
       if (drag.type === "divider") {
-        const total = drag.axis === "horizontal" ? drag.bounds.width : drag.bounds.height;
-        const delta = drag.axis === "horizontal" ? preciseX - drag.startX : preciseShellY - drag.startY;
-        const nextRatio = Math.max(0.1, Math.min(0.9, drag.startRatio + (delta / Math.max(1, total))));
+        const nextRatio = dividerRatioAt(drawX, drawShellY);
         const nextRect = resolveDividerPreviewRect(drag.axis, drag.bounds, nextRatio, nativePaneChrome === true);
         updateDividerPreview({ pathKey: drag.path.join("."), rect: nextRect, ratio: nextRatio });
       } else if (drag.type === "pane-drag") {
         if (!isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold)) {
           updateDockPreview(null);
-          setDragCursor(null);
+          setHoverTarget(null);
           if (drag.mode === "floating") {
             updateDragFloatingRect({ paneId: drag.paneId, rect: drag.origRect });
           }
@@ -104,25 +143,22 @@ export function useShellActiveDrag({
           return;
         }
 
-        const pane = paneMap.get(drag.paneId);
-        const baseRect = drag.mode === "docked"
-          ? getRememberedFloatingRect(baseLayout, drag.paneId, width, contentHeight, pane?.def)
-          : drag.origRect;
-        const nextRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
+        const nextRect = resolvePaneDragFloatingRect(drag, dragBaseRect()!, drawX, drawShellY, width, contentHeight);
         updateDragFloatingRect({ paneId: drag.paneId, rect: nextRect });
-        setDragCursor({ x: hitX, y: hitShellY });
 
         const hoveredOverlay = resolveHoverOverlay(hitX, hitShellY, dockLeafLayouts, drag.paneId);
+        setHoverTarget(hoveredOverlay?.targetId ?? null);
         if (hoveredOverlay) {
           const hoveredCell = hoveredOverlay.cells.find((cell) => pointInRect(cell.rect, hitX, hitShellY));
           if (hoveredCell) {
-            const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
-            const simulation = simulateDrop(baseLayout, drag.paneId, target, bounds, dockGeometryOptions);
-            if (simulation.previewRect) {
-              updateDockPreview({ kind: "dock", target, rect: simulation.previewRect });
-            } else {
-              updateDockPreview(null);
+            const dropKey = `${hoveredOverlay.targetId}:${hoveredCell.position}`;
+            if (memo.dropKey !== dropKey) {
+              const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
+              const simulation = simulateDrop(baseLayout, drag.paneId, target, bounds, dockGeometryOptions);
+              memo.dropKey = dropKey;
+              memo.drop = simulation.previewRect ? { kind: "dock", target, rect: simulation.previewRect } : null;
             }
+            updateDockPreview(memo.drop);
           } else {
             updateDockPreview(null);
           }
@@ -143,9 +179,8 @@ export function useShellActiveDrag({
 
     if (event.type === "up" || event.type === "drag-end") {
       if (drag.type === "divider") {
-        const preview = dividerPreviewRef.current;
-        if (preview) {
-          const nextLayout = resizeSplitAtPath(baseLayout, drag.path, preview.ratio);
+        if (live.get().divider) {
+          const nextLayout = resizeSplitAtPath(baseLayout, drag.path, dividerRatioAt(preciseX, preciseShellY));
           if (windowMode) {
             updateWindowModePreviewLayout(nextLayout);
           } else {
@@ -157,15 +192,11 @@ export function useShellActiveDrag({
         const movedEnough = isMeaningfulPaneDrag(drag.startX, drag.startY, preciseX, preciseShellY, dragThreshold);
         if (!movedEnough) {
           updateDockPreview(null);
-          setDragCursor(null);
+          setHoverTarget(null);
           updateDragFloatingRect(null);
         } else {
-          const pane = paneMap.get(drag.paneId);
-          const baseRect = drag.mode === "docked"
-            ? getRememberedFloatingRect(baseLayout, drag.paneId, width, contentHeight, pane?.def)
-            : drag.origRect;
-          const releaseRect = resolvePaneDragFloatingRect(drag, baseRect, preciseX, preciseShellY, width, contentHeight);
-          const nextLayout = finalizePaneDragRelease(baseLayout, drag.paneId, releaseRect, dockPreviewRef.current);
+          const releaseRect = resolvePaneDragFloatingRect(drag, dragBaseRect()!, preciseX, preciseShellY, width, contentHeight);
+          const nextLayout = finalizePaneDragRelease(baseLayout, drag.paneId, releaseRect, live.get().dockPreview);
           if (windowMode) {
             updateWindowModePreviewLayout(nextLayout, drag.paneId);
           } else {
@@ -173,7 +204,7 @@ export function useShellActiveDrag({
           }
           focusPane(drag.paneId);
           updateDockPreview(null);
-          setDragCursor(null);
+          setHoverTarget(null);
           updateDragFloatingRect(null);
         }
       } else if (drag.type === "float-resize") {
@@ -185,27 +216,28 @@ export function useShellActiveDrag({
           persistLayout(nextLayout);
         }
         updateDragFloatingRect(null);
-        setDragCursor(null);
+        setHoverTarget(null);
       }
       dragRef.current = null;
+      live.set({ paneDrag: null });
       event.stopPropagation();
       event.preventDefault();
     }
   }, [
     appHeaderHeight,
     bounds,
+    cancelActiveDrag,
     contentHeight,
     dockGeometryOptions,
-    dividerPreviewRef,
     dockLeafLayouts,
-    dockPreviewRef,
     dragRef,
     focusPane,
+    live,
     nativePaneChrome,
     paneMap,
     persistLayout,
     precisePointer,
-    setDragCursor,
+    setHoverTarget,
     snapGuides,
     updateDividerPreview,
     updateDockPreview,

package/src/components/layout/shell/cursor-occlusion.ts

@@ -160,15 +160,16 @@ function shouldHideCursor({
 }
 
 export function useShellCursorOcclusionGuard({
-  occlusionRects,
+  resolveOcclusionRects,
   shellRef,
 }: {
-  occlusionRects: readonly ShellCursorOcclusionRect[];
+  /** Called on every terminal frame. */
+  resolveOcclusionRects: () => readonly ShellCursorOcclusionRect[];
   shellRef: RefObject<unknown>;
 }) {
   const nativeRenderer = useNativeRenderer();
-  const stateRef = useRef({ occlusionRects, shellRef });
-  stateRef.current = { occlusionRects, shellRef };
+  const stateRef = useRef({ resolveOcclusionRects, shellRef });
+  stateRef.current = { resolveOcclusionRects, shellRef };
 
   useEffect(() => {
     if (
@@ -186,7 +187,7 @@ export function useShellCursorOcclusionGuard({
       const shellBounds = readRenderableBounds(stateRef.current.shellRef.current);
       if (!shellBounds) return;
 
-      const terminalRects = stateRef.current.occlusionRects.map((rect) => toTerminalRect(shellBounds, rect));
+      const terminalRects = stateRef.current.resolveOcclusionRects().map((rect) => toTerminalRect(shellBounds, rect));
       if (terminalRects.length === 0) return;
 
       const cursorOwnerPaneId = readRenderablePaneId(nativeRenderer.currentFocusedEditor);

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

@@ -212,6 +212,16 @@ function makeOverlayCellRects(rect: LayoutBounds): HoverOverlay["cells"] {
   return cells;
 }
 
+/** The drop grid drawn over a docked pane while another pane is dragged onto it. */
+export function hoverOverlayForLeaf(leaf: DockLeafLayout): HoverOverlay {
+  const overlayRect = compactOverlayRect(leaf.rect);
+  return {
+    targetId: leaf.instanceId,
+    rect: overlayRect,
+    cells: makeOverlayCellRects(overlayRect),
+  };
+}
+
 export function resolveHoverOverlay(
   x: number,
   y: number,
@@ -220,13 +230,8 @@ export function resolveHoverOverlay(
 ): HoverOverlay | null {
   const targetLeaf = leaves.find((leaf) => leaf.instanceId !== draggedPaneId && pointInRect(leaf.rect, x, y));
   if (!targetLeaf) return null;
-  const overlayRect = compactOverlayRect(targetLeaf.rect);
-  if (!pointInRect(overlayRect, x, y)) return null;
-  return {
-    targetId: targetLeaf.instanceId,
-    rect: overlayRect,
-    cells: makeOverlayCellRects(overlayRect),
-  };
+  const overlay = hoverOverlayForLeaf(targetLeaf);
+  return pointInRect(overlay.rect, x, y) ? overlay : null;
 }
 
 export function resolveDividerPreviewRect(

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

@@ -0,0 +1,122 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type RefObject } from "react";
+import type { DockLeafLayout, FloatingRect } from "../../../../layout/pane-manager";
+import type { BoxRenderable, LiveBoxFrame } from "../../../../ui";
+import type { DividerPreviewState } from "../native/window-state";
+import { hoverOverlayForLeaf, type DragPreview, type HoverOverlay } from "./index";
+
+/**
+ * Where an in-progress drag is right now: the pane on the move, its floating
+ * rect, the divider line and the drop target. It lives outside React state,
+ * so the shell renders nothing while a drag follows the pointer.
+ */
+export interface LiveDragGeometry {
+  /** The pane being moved, from mouse down to release. */
+  paneDrag: { paneId: string; mode: "docked" | "floating" } | null;
+  /** The floating rect being moved or resized, already kept inside the shell. */
+  floating: { paneId: string; rect: FloatingRect } | null;
+  divider: DividerPreviewState | null;
+  /** The tiled pane whose drop grid is under the pointer during a pane move. */
+  hoverTargetId: string | null;
+  /** Where the release would dock or snap. */
+  dockPreview: DragPreview | null;
+}
+
+/**
+ * Two kinds of change. `set` is something React draws: a drag starting or
+ * ending, or a new drop target; it reaches every subscriber. `move` is the
+ * desktop following the pointer: it reaches only the elements that restyle
+ * themselves to follow it (`subscribeMotion`), so a move renders nothing. The
+ * terminal redraws cells, so it sends every change through `set`.
+ */
+export interface LiveDragStore {
+  get(): LiveDragGeometry;
+  set(patch: Partial<LiveDragGeometry>): void;
+  move(patch: Partial<LiveDragGeometry>): void;
+  subscribe(listener: () => void): () => void;
+  subscribeMotion(listener: () => void): () => void;
+}
+
+export const IDLE_DRAG: LiveDragGeometry = { paneDrag: null, floating: null, divider: null, hoverTargetId: null, dockPreview: null };
+
+export function createLiveDragStore(): LiveDragStore {
+  let geometry = IDLE_DRAG;
+  const listeners = new Set<() => void>();
+  const motionListeners = new Set<() => void>();
+  const apply = (patch: Partial<LiveDragGeometry>): boolean => {
+    let changed = false;
+    for (const key of Object.keys(patch) as Array<keyof LiveDragGeometry>) {
+      if (patch[key] !== geometry[key]) changed = true;
+    }
+    if (changed) geometry = { ...geometry, ...patch };
+    return changed;
+  };
+  const notify = (targets: Set<() => void>) => {
+    for (const listener of targets) listener();
+  };
+  return {
+    get: () => geometry,
+    set(patch) {
+      if (!apply(patch)) return;
+      notify(motionListeners);
+      notify(listeners);
+    },
+    move(patch) {
+      if (apply(patch)) notify(motionListeners);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => { listeners.delete(listener); };
+    },
+    subscribeMotion(listener) {
+      motionListeners.add(listener);
+      return () => { motionListeners.delete(listener); };
+    },
+  };
+}
+
+/** Re-renders the caller only when `select` returns something new; keep its result stable. */
+export function useLiveDrag<T>(store: LiveDragStore, select: (geometry: LiveDragGeometry) => T): T {
+  const getSnapshot = useCallback(() => select(store.get()), [select, store]);
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+
+function sameFrame(a: LiveBoxFrame | null, b: LiveBoxFrame | null): boolean {
+  if (a === null || b === null) return a === b;
+  return a.dx === b.dx && a.dy === b.dy;
+}
+
+/**
+ * Desktop: keeps `box` where the drag has it by restyling its element on every
+ * move (`setLiveFrame`), with no render. `frameOf` must be stable while its
+ * inputs are; a new one redraws the box once.
+ */
+export function useLiveBoxFrame(
+  store: LiveDragStore,
+  box: RefObject<BoxRenderable | null>,
+  frameOf: ((geometry: LiveDragGeometry) => LiveBoxFrame | null) | null,
+): void {
+  // What the element carries now, across re-subscriptions.
+  const drawn = useRef<LiveBoxFrame | null>(null);
+  useLayoutEffect(() => {
+    if (!frameOf) return;
+    const follow = () => {
+      const next = frameOf(store.get());
+      if (sameFrame(drawn.current, next)) return;
+      drawn.current = next;
+      box.current?.setLiveFrame?.(next);
+    };
+    follow();
+    return store.subscribeMotion(follow);
+  }, [box, frameOf, store]);
+}
+
+/** The drop grid under the pointer during a pane move. Re-renders only when the pointer enters another pane's grid. */
+export function useLiveHoverOverlay(store: LiveDragStore, leaves: DockLeafLayout[]): HoverOverlay | null {
+  const targetId = useLiveDrag(store, selectHoverTarget);
+  return useMemo(() => {
+    const leaf = targetId ? leaves.find((entry) => entry.instanceId === targetId) : undefined;
+    return leaf ? hoverOverlayForLeaf(leaf) : null;
+  }, [leaves, targetId]);
+}
+
+const selectHoverTarget = (geometry: LiveDragGeometry) => (geometry.paneDrag ? geometry.hoverTargetId : null);

package/src/components/layout/shell/drag/overlays.tsx

@@ -1,28 +1,76 @@
-import { Box } from "../../../../ui";
+import { useRef, type CSSProperties, type RefObject } from "react";
+import { Box, useUiCapabilities, type BoxRenderable, type LiveBoxFrame } from "../../../../ui";
 import { colors } from "../../../../theme/colors";
-import type { FloatingRect } from "../../../../layout/pane-manager";
+import type { DockLeafLayout, LayoutBounds } from "../../../../layout/pane-manager";
 import type { DragPreview, HoverOverlay } from "./index";
+import { useLiveBoxFrame, useLiveDrag, useLiveHoverOverlay, type LiveDragGeometry, type LiveDragStore } from "./live";
+import { placeStyle } from "./slide";
 
-export function ShellDragOverlays({
-  activeHoverOverlay,
-  activePaneDrag,
-  dockPreview,
-  dragFloatingRect,
-  effectiveDockPreview,
+const CELL_POSITIONS = ["top", "left", "center", "right", "bottom"] as const;
+
+function selectDockedOutline(geometry: LiveDragGeometry) {
+  const { paneDrag, floating } = geometry;
+  return paneDrag?.mode === "docked" && floating?.paneId === paneDrag.paneId ? floating.rect : null;
+}
+
+const selectDockPreview = (geometry: LiveDragGeometry) => geometry.dockPreview;
+const selectPaneDragActive = (geometry: LiveDragGeometry) => geometry.paneDrag !== null;
+const selectOutlineWidth = (geometry: LiveDragGeometry) => selectDockedOutline(geometry)?.width ?? null;
+const selectOutlineHeight = (geometry: LiveDragGeometry) => selectDockedOutline(geometry)?.height ?? null;
+
+function isActiveCell(dockPreview: DragPreview | null, overlay: HoverOverlay, position: string): boolean {
+  return dockPreview?.kind === "dock"
+    && dockPreview.target.kind === "leaf"
+    && dockPreview.target.targetId === overlay.targetId
+    && dockPreview.target.position === position;
+}
+
+export function ShellDragOverlays(props: {
+  dockLeafLayouts: DockLeafLayout[];
+  /** A pane from another window over this one's edge. */
+  externalDockPreview: DragPreview | null;
+  live: LiveDragStore;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
+  return nativePaneChrome ? <DesktopDragOverlays {...props} /> : <TerminalDragOverlays {...props} />;
+}
+
+/** A docked pane on the move is drawn as an outline at its floating size, until it is over a drop target. */
+function TerminalDockedDragOutline({ live }: { live: LiveDragStore }) {
+  const rect = useLiveDrag(live, selectDockedOutline);
+  if (!rect) return null;
+  return (
+    <Box
+      position="absolute"
+      left={rect.x}
+      top={rect.y}
+      width={rect.width}
+      height={rect.height}
+      border
+      borderStyle="single"
+      borderColor={colors.borderFocused}
+      backgroundColor={colors.panel}
+      zIndex={95}
+    />
+  );
+}
+
+function TerminalDragOverlays({
+  dockLeafLayouts,
+  externalDockPreview,
+  live,
 }: {
-  activeHoverOverlay: HoverOverlay | null;
-  activePaneDrag: { paneId: string; mode: "docked" | "floating" } | null;
-  dockPreview: DragPreview | null;
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
-  effectiveDockPreview: DragPreview | null;
+  dockLeafLayouts: DockLeafLayout[];
+  externalDockPreview: DragPreview | null;
+  live: LiveDragStore;
 }) {
+  const activeHoverOverlay = useLiveHoverOverlay(live, dockLeafLayouts);
+  const dockPreview = useLiveDrag(live, selectDockPreview);
+  const effectiveDockPreview = dockPreview ?? externalDockPreview;
   return (
     <>
       {activeHoverOverlay && activeHoverOverlay.cells.map((cell) => {
-        const active = dockPreview?.kind === "dock"
-          && dockPreview.target.kind === "leaf"
-          && dockPreview.target.targetId === activeHoverOverlay.targetId
-          && dockPreview.target.position === cell.position;
+        const active = isActiveCell(dockPreview, activeHoverOverlay, cell.position);
         return (
           <Box
             key={`cell:${activeHoverOverlay.targetId}:${cell.position}`}
@@ -40,24 +88,7 @@ export function ShellDragOverlays({
         );
       })}
 
-      {activePaneDrag
-        && activePaneDrag.mode === "docked"
-        && dragFloatingRect?.paneId === activePaneDrag.paneId
-        && !effectiveDockPreview
-        && (
-          <Box
-            position="absolute"
-            left={dragFloatingRect.rect.x}
-            top={dragFloatingRect.rect.y}
-            width={dragFloatingRect.rect.width}
-            height={dragFloatingRect.rect.height}
-            border
-            borderStyle="single"
-            borderColor={colors.borderFocused}
-            backgroundColor={colors.panel}
-            zIndex={95}
-          />
-        )}
+      {!effectiveDockPreview && <TerminalDockedDragOutline live={live} />}
 
       {effectiveDockPreview && (
         <Box
@@ -76,3 +107,116 @@ export function ShellDragOverlays({
     </>
   );
 }
+
+/**
+ * Desktop: an outline laid out at the shell's corner and drawn at `rect` by a
+ * transform, hidden by opacity, so a new drop target restyles it in place.
+ */
+function OutlineBox({
+  rect,
+  zIndex,
+  borderColor = colors.borderFocused,
+  backgroundColor = colors.panel,
+  role,
+  boxRef,
+  follows = false,
+}: {
+  rect: LayoutBounds | null;
+  zIndex: number;
+  borderColor?: string;
+  backgroundColor?: string;
+  role: string;
+  boxRef?: RefObject<BoxRenderable | null>;
+  /** Its position follows the pointer outside React (`useLiveBoxFrame`). */
+  follows?: boolean;
+}) {
+  const style: CSSProperties = {
+    ...(rect && !follows ? placeStyle(rect.x, rect.y) : undefined),
+    opacity: rect ? 1 : 0,
+    pointerEvents: "none",
+  };
+  return (
+    <Box
+      ref={boxRef}
+      position="absolute"
+      left={0}
+      top={0}
+      width={rect?.width ?? 0}
+      height={rect?.height ?? 0}
+      border
+      borderStyle="single"
+      borderColor={borderColor}
+      backgroundColor={backgroundColor}
+      zIndex={zIndex}
+      data-gloom-role={role}
+      style={style}
+    />
+  );
+}
+
+/**
+ * Desktop overlays of a pane move: the outline a docked pane drags around, the
+ * drop grid of the pane under the pointer and the dock or snap preview. They
+ * render when the drop target changes, never on a move: the outline follows
+ * the pointer by restyling itself.
+ */
+function DesktopDragOverlays({
+  dockLeafLayouts,
+  externalDockPreview,
+  live,
+}: {
+  dockLeafLayouts: DockLeafLayout[];
+  externalDockPreview: DragPreview | null;
+  live: LiveDragStore;
+}) {
+  const dragging = useLiveDrag(live, selectPaneDragActive);
+  if (!dragging && !externalDockPreview) return null;
+  return <DesktopDragOverlayLayers dockLeafLayouts={dockLeafLayouts} externalDockPreview={externalDockPreview} live={live} />;
+}
+
+function DesktopDragOverlayLayers({
+  dockLeafLayouts,
+  externalDockPreview,
+  live,
+}: {
+  dockLeafLayouts: DockLeafLayout[];
+  externalDockPreview: DragPreview | null;
+  live: LiveDragStore;
+}) {
+  const activeHoverOverlay = useLiveHoverOverlay(live, dockLeafLayouts);
+  const dockPreview = useLiveDrag(live, selectDockPreview);
+  const effectiveDockPreview = dockPreview ?? externalDockPreview;
+  const outlineWidth = useLiveDrag(live, selectOutlineWidth);
+  const outlineHeight = useLiveDrag(live, selectOutlineHeight);
+  const outlineRef = useRef<BoxRenderable | null>(null);
+  useLiveBoxFrame(live, outlineRef, followDockedOutline);
+  const outline = outlineWidth !== null && outlineHeight !== null && !effectiveDockPreview
+    ? { x: 0, y: 0, width: outlineWidth, height: outlineHeight }
+    : null;
+  return (
+    <>
+      {CELL_POSITIONS.map((position) => {
+        const cell = activeHoverOverlay?.cells.find((entry) => entry.position === position) ?? null;
+        const active = !!activeHoverOverlay && isActiveCell(dockPreview, activeHoverOverlay, position);
+        return (
+          <OutlineBox
+            key={position}
+            role="drop-cell"
+            rect={cell?.rect ?? null}
+            borderColor={active ? colors.borderFocused : colors.border}
+            backgroundColor={active ? colors.header : colors.panel}
+            zIndex={position === "center" ? 98 : 97}
+          />
+        );
+      })}
+      <OutlineBox role="drag-outline" rect={outline} zIndex={95} boxRef={outlineRef} follows />
+      <OutlineBox role="drop-preview" rect={effectiveDockPreview?.rect ?? null} zIndex={96} />
+    </>
+  );
+}
+
+/** The docked pane's outline sits where the drag has it; laid out at the shell's corner. */
+function followDockedOutline(geometry: LiveDragGeometry): LiveBoxFrame | null {
+  const rect = selectDockedOutline(geometry);
+  return rect ? { dx: rect.x, dy: rect.y } : null;
+}