gloomberb 0.16.2 → 0.16.4

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

@@ -63,6 +63,10 @@ const DOCK_DIVIDER_SIZE = 1;
 export const PANE_DRAG_THRESHOLD = 2;
 export const PRECISE_PANE_DRAG_THRESHOLD = 0.15;
 
+export function sameRect(a: LayoutBounds, b: LayoutBounds): boolean {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 export function pointInRect(rect: LayoutBounds, x: number, y: number): boolean {
   return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
 }
@@ -212,6 +216,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 +234,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,193 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState, 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, sameRect, 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 pane being resized, from mouse down to release. */
+  paneResize: { paneId: string } | 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,
+  paneResize: 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 && a.width === b.width && a.height === b.height;
+}
+
+/**
+ * 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. A render of the caller during
+ * the drag may write the box's laid-out size again, so it is drawn back after
+ * every one.
+ */
+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]);
+  useLayoutEffect(() => {
+    if (drawn.current) box.current?.setLiveFrame?.(drawn.current);
+  });
+}
+
+/** How often a pane being resized on the desktop draws its content at the new size. */
+const RESIZE_CONTENT_INTERVAL_MS = 100;
+
+/**
+ * Desktop: the rect a floating pane being resized draws its content at. Its
+ * frame follows every move on its own (`useLiveBoxFrame`); the content, which
+ * charts and tables lay out for one size, catches up with it at most every
+ * `RESIZE_CONTENT_INTERVAL_MS`, and once more after the last move. Null when
+ * the pane is not being resized, or has not changed size yet.
+ */
+export function useLiveResizeRect(store: LiveDragStore, paneId: string, enabled: boolean): FloatingRect | null {
+  const [rect, setRect] = useState<FloatingRect | null>(null);
+  // What `rect` holds, so a move never queues a state update that changes nothing.
+  const shown = useRef<FloatingRect | null>(null);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    // The size the content was last drawn at in this resize; the press's own first.
+    let drawn: FloatingRect | null = null;
+    const show = (next: FloatingRect | null) => {
+      if (shown.current === next) return;
+      shown.current = next;
+      setRect(next);
+    };
+    const resizing = () => {
+      const { paneResize, floating } = store.get();
+      return paneResize?.paneId === paneId && floating?.paneId === paneId ? floating.rect : null;
+    };
+    const catchUp = () => {
+      timer = null;
+      const next = resizing();
+      if (!next || (drawn && sameRect(next, drawn))) return;
+      drawn = next;
+      show(next);
+    };
+    const follow = () => {
+      const next = resizing();
+      if (!next) {
+        // Released or put back: the layout's rect draws it, in the same commit.
+        if (timer !== null) clearTimeout(timer);
+        timer = null;
+        drawn = null;
+        show(null);
+        return;
+      }
+      if (!drawn) drawn = next;
+      else if (timer === null && !sameRect(next, drawn)) timer = setTimeout(catchUp, RESIZE_CONTENT_INTERVAL_MS);
+    };
+    const unsubscribe = store.subscribeMotion(follow);
+    return () => {
+      unsubscribe();
+      if (timer !== null) clearTimeout(timer);
+    };
+  }, [enabled, paneId, store]);
+  return enabled ? rect : null;
+}
+
+/** 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;
+}

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

@@ -6,7 +6,6 @@ import {
   type MutableRefObject,
   type SetStateAction,
 } from "react";
-import { useRafCallback } from "../../../../react/use-raf-callback";
 import {
   type DockDividerLayout,
   type DockGeometryOptions,
@@ -19,11 +18,13 @@ import type { LayoutConfig } from "../../../../types/config";
 import {
   constrainFloatingRectToBounds,
   makeSnapGuides,
+  sameRect,
   type DragPreview,
   type PaneDragRectState,
 } from "./index";
 import type { ActionMenuState } from "../action-menu-overlay";
 import type { DividerPreviewState } from "../native/window-state";
+import { createLiveDragStore, IDLE_DRAG, type LiveDragStore } from "./live";
 import type { WindowEditState } from "../../window-edit/mode";
 import { useShellActiveDrag } from "../active-drag";
 import { useShellNativePointerRuntime } from "../native/pointer-runtime";
@@ -58,6 +59,9 @@ export interface ShellMouseEvent {
   button?: number;
   preciseX?: number;
   preciseY?: number;
+  /** Desktop: where the browser predicts the pointer a moment later, for drawing only. */
+  predictedX?: number;
+  predictedY?: number;
   /** Whether a later handler has claimed this pointer interaction. */
   isDefaultPrevented?: () => boolean;
   stopPropagation: () => void;
@@ -71,88 +75,96 @@ export interface VisibleFloatingPane {
 
 export interface ShellDragRuntimeState {
   cancelActiveDrag: () => void;
-  dividerPreview: DividerPreviewState | null;
-  dividerPreviewRef: MutableRefObject<DividerPreviewState | null>;
-  dockPreview: DragPreview | null;
-  dockPreviewRef: MutableRefObject<DragPreview | null>;
-  dragCursor: { x: number; y: number } | null;
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
   dragRef: MutableRefObject<DragMode | null>;
   hasActiveDrag: () => boolean;
-  setDragCursor: Dispatch<SetStateAction<{ x: number; y: number } | null>>;
+  /** Positions that follow the pointer, outside React state. */
+  live: LiveDragStore;
+  /** The tiled pane whose drop grid is under the pointer. */
+  setHoverTarget: (targetId: string | null) => void;
+  startDrag: (drag: DragMode) => void;
   updateDividerPreview: (next: DividerPreviewState | null) => void;
   updateDockPreview: (next: DragPreview | null) => void;
   updateDragFloatingRect: (next: { paneId: string; rect: FloatingRect } | null) => void;
 }
 
+function sameDragPreview(a: DragPreview | null, b: DragPreview | null): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.kind !== b.kind || !sameRect(a.rect, b.rect)) return false;
+  if (a.kind === "snap" && b.kind === "snap") return a.position === b.position;
+  if (a.kind === "dock" && b.kind === "dock") {
+    const [x, y] = [a.target, b.target];
+    if (x.kind === "frame" && y.kind === "frame") return x.edge === y.edge;
+    if (x.kind === "leaf" && y.kind === "leaf") return x.targetId === y.targetId && x.position === y.position;
+  }
+  return false;
+}
+
 export function useShellDragRuntimeState({
   contentHeight,
-  throttleFloatingPreview = false,
+  nativePaneChrome,
   width,
 }: {
   contentHeight: number;
-  throttleFloatingPreview?: boolean;
+  nativePaneChrome: boolean;
   width: number;
 }): ShellDragRuntimeState {
   const dragRef = useRef<DragMode | null>(null);
-  const [dragFloatingRect, setDragFloatingRect] = useState<{ paneId: string; rect: FloatingRect } | null>(null);
-  const pendingDragFloatingRectRef = useRef<{ paneId: string; rect: FloatingRect } | null>(null);
-  const [dragCursor, setDragCursor] = useState<{ x: number; y: number } | null>(null);
-  const [dividerPreview, setDividerPreview] = useState<DividerPreviewState | null>(null);
-  const [dockPreview, setDockPreview] = useState<DragPreview | null>(null);
-  const dividerPreviewRef = useRef<DividerPreviewState | null>(null);
-  const dockPreviewRef = useRef<DragPreview | null>(null);
-  const flushDragFloatingRect = useRafCallback(() => {
-    setDragFloatingRect(pendingDragFloatingRectRef.current);
-  });
+  const [live] = useState(createLiveDragStore);
 
   const updateDragFloatingRect = useCallback((next: { paneId: string; rect: FloatingRect } | null) => {
-    const constrainedNext = next
+    const current = live.get();
+    const floating = next
       ? { paneId: next.paneId, rect: constrainFloatingRectToBounds(next.rect, width, contentHeight) }
       : null;
-    pendingDragFloatingRectRef.current = constrainedNext;
-    if (!next) {
-      setDragFloatingRect(null);
-      return;
-    }
-    if (!throttleFloatingPreview) {
-      setDragFloatingRect(constrainedNext);
-      return;
-    }
-    flushDragFloatingRect();
-  }, [contentHeight, flushDragFloatingRect, throttleFloatingPreview, width]);
+    // A desktop pane being moved or resized follows by restyling itself
+    // (`move`); its start and end, and every terminal frame, redraw through React.
+    const follows = nativePaneChrome
+      && floating !== null
+      && current.floating?.paneId === floating.paneId
+      && (current.paneDrag?.paneId === floating.paneId || current.paneResize?.paneId === floating.paneId);
+    if (follows) live.move({ floating });
+    else live.set({ floating });
+  }, [contentHeight, live, nativePaneChrome, width]);
+
+  const setHoverTarget = useCallback((targetId: string | null) => {
+    live.set({ hoverTargetId: targetId });
+  }, [live]);
 
   const updateDividerPreview = useCallback((next: DividerPreviewState | null) => {
-    dividerPreviewRef.current = next;
-    setDividerPreview(next);
-  }, []);
+    const current = live.get().divider;
+    // The desktop divider follows by restyling itself; React hears only that it started or ended.
+    if (nativePaneChrome && next && current?.pathKey === next.pathKey) live.move({ divider: next });
+    else live.set({ divider: next });
+  }, [live, nativePaneChrome]);
 
   const updateDockPreview = useCallback((next: DragPreview | null) => {
-    dockPreviewRef.current = next;
-    setDockPreview(next);
-  }, []);
+    // Recomputed on every move; only a different target is news.
+    if (sameDragPreview(live.get().dockPreview, next)) return;
+    live.set({ dockPreview: next });
+  }, [live]);
+
+  const startDrag = useCallback((drag: DragMode) => {
+    dragRef.current = drag;
+    live.set({
+      paneDrag: drag.type === "pane-drag" ? { paneId: drag.paneId, mode: drag.mode } : null,
+      paneResize: drag.type === "float-resize" ? { paneId: drag.paneId } : null,
+    });
+  }, [live]);
 
   const cancelActiveDrag = useCallback(() => {
     dragRef.current = null;
-    updateDragFloatingRect(null);
-    setDragCursor(null);
-    updateDividerPreview(null);
-    updateDockPreview(null);
-  }, [updateDividerPreview, updateDockPreview, updateDragFloatingRect]);
+    live.set(IDLE_DRAG);
+  }, [live]);
 
   const hasActiveDrag = useCallback(() => dragRef.current != null, []);
 
   return {
     cancelActiveDrag,
-    dividerPreview,
-    dividerPreviewRef,
-    dockPreview,
-    dockPreviewRef,
-    dragCursor,
-    dragFloatingRect,
     dragRef,
     hasActiveDrag,
-    setDragCursor,
+    live,
+    setHoverTarget,
+    startDrag,
     updateDividerPreview,
     updateDockPreview,
     updateDragFloatingRect,