gloomberb 0.16.2 → 0.16.3

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,
@@ -24,6 +23,7 @@ import {
 } 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 +58,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 +74,97 @@ 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 sameRect(a: LayoutBounds, b: LayoutBounds): boolean {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+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 on the move follows by restyling itself (`move`); its
+    // start and end, a resize and every terminal frame redraw through React.
+    const follows = nativePaneChrome
+      && floating !== null
+      && current.floating?.paneId === floating.paneId
+      && current.paneDrag?.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 });
+  }, [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,

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,10 @@ import { tickerLinkMenuItems } from "./ticker-link-menu";
 import {
   makeSnapGuides,
   resolveExternalDockPreview,
-  resolveHoverOverlay,
 } from "./drag";
 import { resolveAppHeaderHeightCells } from "./chrome";
 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";
@@ -134,10 +133,6 @@ export function Shell({
   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 +160,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,
@@ -261,9 +255,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 +266,7 @@ export function Shell({
     width,
   }), [
     contentHeight,
-    dragFloatingRect,
+    live,
     nativePaneChrome,
     overlayOpen,
     transientFocusActive,
@@ -279,7 +274,7 @@ export function Shell({
     width,
   ]);
   useShellCursorOcclusionGuard({
-    occlusionRects: cursorOcclusionRects,
+    resolveOcclusionRects: resolveCursorOcclusionRects,
     shellRef,
   });
 
@@ -460,29 +455,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],
@@ -824,12 +796,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 +832,7 @@ export function Shell({
         handleNativePaneMouseDown={handleNativePaneMouseDown}
         handlePaneAction={handlePaneAction}
         hoveredPaneId={hoveredPaneId}
+        live={live}
         menuPaneId={menuState?.paneId ?? null}
         nativeContextMenu={nativeContextMenu}
         nativePaneChrome={nativePaneChrome}
@@ -868,9 +856,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 +871,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/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;
 }