gloomberb 0.16.2 → 0.16.4

package/src/components/command-bar/workflow/ops.ts

@@ -8,6 +8,7 @@ import { scopedBrokerContractIdentityKey } from "../../../utils/instrument-ident
 import { tickerSelectionFromSearchResult } from "../../../tickers/selection";
 import { tickerInstrumentLabel } from "../../../tickers/instrument-label";
 import type { PluginRegistry } from "../../../plugins/registry";
+import { PluginOffError } from "../../../plugins/plugin-off";
 import { formatTickerListInput } from "../../../tickers/list";
 import { PANE_LOCK_SETTING_KEY, setPaneLocked, updatePaneInstance, setPaneSettings } from "../../../pane-settings";
 import { TICKER_RESEARCH_PANE_ID } from "../../../types/config";
@@ -291,9 +292,10 @@ export async function createPaneTemplateOrThrow(
 
   const state = deps.getState();
   const pluginId = deps.pluginRegistry.getPaneTemplatePluginId(templateId);
-  if (pluginId && state.config.disabledPlugins.includes(pluginId)) {
-    throw new Error("Enable this plugin before creating its pane.");
-  }
+  // The template's plugin, or the plugin of the pane it opens (CHOKE opens a
+  // chart): a pane of a switched-off plugin would be added hidden.
+  const disabledOwner = deps.pluginRegistry.getDisabledPaneTemplateOwner(templateId, state.config.disabledPlugins);
+  if (disabledOwner) throw new PluginOffError(disabledOwner, getPaneTemplateDisplayLabel(template));
 
   const { context, resolvedOptions } = await resolvePaneTemplateOptions(template, options, deps);
 

package/src/components/data-table/export.ts

@@ -1,56 +1,11 @@
 import type { DataTableCell, DataTableColumn, DataTableProps } from "../ui";
 import { serializeCsv } from "../../utils/csv";
-
-/** What a cell draws for a missing value: a dash, a run of dashes, or the loading ellipsis. */
-const PLACEHOLDER = /^(?:[-\u2013\u2014]{1,3}|\u2026|\.\.\.)$/;
-
-/**
- * A number as a table draws it: sign, currency symbol, thousands commas,
- * decimals, a compact scale (12.3k, 1.20B) and a unit (%, x, bp, USD).
- */
-const DISPLAY_NUMBER = /^([+-]?)([A-Z]{0,3}[$\u20ac\u00a3\u00a5\u20b9\u20a9\u20bd\u20ba\u20aa\u20ab\u0e3f])?(?=\.?\d)(\d{1,3}(?:,\d{3})+|\d*)(?:\.(\d+))?([kKMBT])?(%|x| ?bps?| [A-Z]{3})?$/;
-
-const SCALE_DIGITS: Record<string, number> = { k: 3, K: 3, M: 6, B: 9, T: 12 };
-
-interface DisplayNumber {
-  /** Plain decimal text: no sign for positives, no commas, no scale letter. */
-  number: string;
-  /** What the column header has to name once the cells are bare numbers. */
-  unit: string;
-}
-
-const BLANK = "blank";
-
-/** Moves the decimal point right without going through a float, so 1.23B is exactly 1230000000. */
-function scaleDecimal(integer: string, fraction: string, digits: number): string {
-  const whole = `${integer}${fraction.padEnd(digits, "0").slice(0, digits)}`.replace(/^0+(?=\d)/, "") || "0";
-  const rest = fraction.slice(digits);
-  return rest ? `${whole}.${rest}` : whole;
-}
-
-function parseDisplayNumber(text: string): DisplayNumber | typeof BLANK | null {
-  // A direction arrow beside a signed move repeats the sign.
-  const trimmed = text.trim().replace(/\u2212/g, "-").replace(/\s*[\u2191\u2193]$/, "");
-  if (!trimmed || PLACEHOLDER.test(trimmed)) return BLANK;
-  const match = DISPLAY_NUMBER.exec(trimmed);
-  if (!match) return null;
-  const [, sign, currency = "", grouped, fraction = "", scale, unitText = ""] = match;
-  const integer = grouped!.replace(/,/g, "") || "0";
-  const digits = scale ? SCALE_DIGITS[scale]! : 0;
-  const magnitude = digits ? scaleDecimal(integer, fraction, digits) : fraction ? `${integer}.${fraction}` : integer;
-  const unit = unitText.trim().replace(/^bps$/, "bp");
-  return { number: `${sign === "-" ? "-" : ""}${magnitude}`, unit: [currency, unit].filter(Boolean).join(" ") };
-}
-
-/** Adds the unit the cells dropped, unless the header already names it. */
-function labelWithUnit(label: string, unit: string): string {
-  if (!unit) return label;
-  // A word unit has to stand alone: "Max" does not name x.
-  const named = unit === "bp" ? /\bbps?\b/i.test(label)
-    : /^[A-Za-z]+$/.test(unit) ? new RegExp(`\\b${unit}\\b`, "i").test(label)
-      : label.includes(unit);
-  return named ? label : `${label} (${unit})`;
-}
+import {
+  BLANK_DISPLAY as BLANK,
+  DISPLAY_PLACEHOLDER as PLACEHOLDER,
+  labelWithUnit,
+  parseDisplayNumber,
+} from "../../utils/display-number";
 
 function rawExportValue(value: NonNullable<DataTableCell["value"]> | null): unknown {
   if (value == null) return "";

package/src/components/data-table/view.tsx

@@ -9,7 +9,7 @@ import {
   type RefObject,
 } from "react";
 import type { ScrollBoxRenderable } from "../../ui";
-import { useShortcut } from "../../react/input";
+import { useBeforeShortcut, useShortcut } from "../../react/input";
 import { isPlainKey, isPlainKeyboardEvent } from "../../utils/keyboard";
 import { DataTable, type DataTableColumn, type DataTableProps } from "../ui";
 import { useDataTableSortMenu } from "./sort-menu";
@@ -42,6 +42,11 @@ function stopTableKey(event: DataTableKeyEvent) {
 
 const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
 
+/** The keys that step the cursor: a burst of them is what the commit delay collapses. */
+function isCursorStepKey(event: DataTableKeyEvent): boolean {
+  return isPlainKey(event, "j", "k", "down", "up", "home", "end", "pageup", "pagedown");
+}
+
 /** Shift+Left/Right or Ctrl+Left/Right, with no other modifier. */
 function horizontalScrollDirection(event: DataTableKeyEvent): -1 | 0 | 1 {
   if (event.name !== "left" && event.name !== "right") return 0;
@@ -108,7 +113,8 @@ export interface DataTableViewProps<
   /**
    * Fires immediately as the lightweight visual cursor moves. Expensive detail
    * work and persisted selection belong in selection.onChange, which is
-   * coalesced across keyboard repeats.
+   * coalesced across keyboard repeats and lands before any other key reaches
+   * a handler.
    */
   onCursorChange?: (
     item: T,
@@ -445,6 +451,24 @@ export function DataTableView<
     commitTarget(target, reason);
   }, [clearPendingCommit, commitTarget, getCommitTarget]);
 
+  const flushPendingCommit = useCallback(() => {
+    if (!pendingCommitRef.current) return;
+    const target = pendingCommitTargetRef.current;
+    clearPendingCommit();
+    lastKeyboardCommitAtRef.current = performance.now();
+    commitTarget(target, "keyboard");
+  }, [clearPendingCommit, commitTarget]);
+  const flushPendingCommitRef = useRef(flushPendingCommit);
+  flushPendingCommitRef.current = flushPendingCommit;
+
+  // The delay only coalesces a burst of steps. Any other key acts on the row
+  // under the cursor, so a step still waiting commits before the key reaches
+  // a handler, which reads the selection the pane holds.
+  useBeforeShortcut((event) => {
+    if (event.defaultPrevented || event.propagationStopped || isCursorStepKey(event)) return;
+    flushPendingCommitRef.current();
+  });
+
   const scheduleCommitIndex = useCallback((index: number) => {
     if (selection.kind === "none") return;
     const target = getCommitTarget(index);
@@ -464,14 +488,9 @@ export function DataTableView<
     pendingCommitTargetRef.current = target;
     pendingCommitTimerRef.current = setTimeout(() => {
       pendingCommitTimerRef.current = null;
-      pendingCommitRef.current = false;
-      const pendingTarget = pendingCommitTargetRef.current;
-      pendingCommitTargetRef.current = null;
-      clearSelectionScrollTarget();
-      lastKeyboardCommitAtRef.current = performance.now();
-      commitTarget(pendingTarget, "keyboard");
+      flushPendingCommitRef.current();
     }, DATA_TABLE_SELECTION_COMMIT_DELAY_MS);
-  }, [clearSelectionScrollTarget, commitIndexImmediately, commitTarget, getCommitTarget, selection.kind]);
+  }, [commitIndexImmediately, getCommitTarget, selection.kind]);
 
   const updateCursorIndex = useCallback((
     index: number,
@@ -672,7 +691,9 @@ export function DataTableView<
       event.preventDefault();
       return;
     }
-    if (tableProps.items.length === 0) return;
+    // Without a cursor there is nothing for these keys to move, so they stay
+    // free for the pane scroll keys to scroll the rows.
+    if (tableProps.items.length === 0 || selection.kind === "none") return;
 
     if (isPlainKey(event, "j", "down")) {
       stopTableKey(event);

package/src/components/layout/floating-pane.tsx

@@ -1,5 +1,5 @@
-import { Box, Text, useUiCapabilities } from "../../ui";
-import type { ReactNode } from "react";
+import { Box, Text, useUiCapabilities, type BoxRenderable } from "../../ui";
+import type { ReactNode, RefObject } from "react";
 import { colors, floatingPaneBg } from "../../theme/colors";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
 import { PaneHeader, type PaneHeaderQuickSetting } from "./pane/header";
@@ -37,6 +37,8 @@ interface FloatingPaneWrapperProps {
   onResizeMouseDrag?: (event: any) => void;
   onResizeMouseDragEnd?: (event: any) => void;
   footer?: CombinedPaneFooter | null;
+  /** The pane's frame, which a desktop resize sizes outside React; its header, body and footer stretch with it. */
+  frameRef?: RefObject<BoxRenderable | null>;
   children: ReactNode;
 }
 
@@ -88,6 +90,7 @@ export function FloatingPaneWrapper({
   onResizeMouseDrag,
   onResizeMouseDragEnd,
   footer,
+  frameRef,
   children,
 }: FloatingPaneWrapperProps) {
   const { nativePaneChrome } = useUiCapabilities();
@@ -100,6 +103,7 @@ export function FloatingPaneWrapper({
 
   return (
     <Box
+      ref={frameRef}
       position="absolute"
       top={y}
       left={x}

package/src/components/layout/market-summary.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { priceColor } from "../../theme/colors";
+import { priceColor, type ThemeColors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppVisible } from "../../state/app/activity";
 import { useAppSelector } from "../../state/app/context";
@@ -10,7 +10,8 @@ import { useQuoteStreaming } from "../../state/hooks/quote-streaming";
 import type { QuoteSubscriptionTarget } from "../../types/data-provider";
 import { formatPercentRaw } from "../../utils/format";
 import { formatMarketPrice, liveQuoteFormatOptions } from "../../market-data/market/format";
-import { getActiveQuoteDisplay, marketStateColor, marketStateCountdown, marketStateLabel } from "../../market-data/market/status";
+import { getSessionMoveDisplay, marketStateColor, marketStateCountdown, marketStateLabel } from "../../market-data/market/status";
+import type { Quote } from "../../types/financials";
 
 /**
  * SPY rides the shared feed. The snapshot poll only runs while the feed has
@@ -76,6 +77,25 @@ export function resolveMarketSummaryFit(options: {
   return { showBaseCurrency, showCountdown, showState, showSpy };
 }
 
+/**
+ * SPY in the header's one slot, beside the market state: the live quote while
+ * the regular session trades, and once it is over its close and the move to
+ * it, as `ticker SPY` headlines them. While a pre-market or after-hours
+ * session is open (PRE-MKT, AFTER-HRS) the slot is that session's print and
+ * its move from the close, so the figure is the session the label names.
+ */
+export function spySummary(quote: Quote | null | undefined, colors: ThemeColors): Pick<MarketSummary, "spyColor" | "spyText"> {
+  const display = getSessionMoveDisplay(quote);
+  // Fixed decimals and a percent slot as wide as "+0.53%", so a streamed tick
+  // never slides the market-state label or re-fits the cluster.
+  return {
+    spyColor: display?.change != null ? priceColor(display.change, colors) : colors.textDim,
+    spyText: display
+      ? `SPY ${formatMarketPrice(display.price, liveQuoteFormatOptions(quote, quote?.currency, "ETF"))} ${formatPercentRaw(display.changePercent).padStart(6)}`
+      : "SPY —",
+  };
+}
+
 export function useMarketSummary(): MarketSummary {
   const colors = useThemeColors();
   const appActive = useAppVisible();
@@ -112,13 +132,7 @@ export function useMarketSummary(): MarketSummary {
     return () => { clearInterval(id); };
   }, [appActive]);
 
-  const activeSpyQuote = getActiveQuoteDisplay(spyQuote);
-  const spyColor = activeSpyQuote?.change != null ? priceColor(activeSpyQuote.change, colors) : colors.textDim;
-  // Fixed decimals and a percent slot as wide as "+0.53%", so a streamed tick
-  // never slides the market-state label or re-fits the cluster.
-  const spyText = activeSpyQuote
-    ? `SPY ${formatMarketPrice(activeSpyQuote.price, liveQuoteFormatOptions(spyQuote, spyQuote?.currency, "ETF"))} ${formatPercentRaw(activeSpyQuote.changePercent).padStart(6)}`
-    : "SPY —";
+  const { spyColor, spyText } = spySummary(spyQuote, colors);
 
   const mktCountdown = mktState ? marketStateCountdown(mktState, now) : null;
   const marketLabelShort = mktState ? t(marketStateLabel(mktState)) : "";

package/src/components/layout/pane/content.tsx

@@ -1,8 +1,9 @@
-import { memo, Profiler, useCallback, type ReactNode } from "react";
+import { memo, Profiler, useCallback, useMemo, type ReactNode } from "react";
 import { useAppLanguage } from "../../../i18n/react";
 import { isPerfTraceEnabled, recordPerfSample } from "../../../utils/perf-marks";
 import { PaneInViewProvider } from "../../../state/app/activity";
 import { PaneInstanceProvider } from "../../../state/app/context";
+import { RemoteUiPaneScope } from "../../../remote/semantic-tree";
 import { useThemeColors } from "../../../theme/theme-context";
 import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import type { PaneDef } from "../../../types/plugin";
@@ -41,6 +42,13 @@ interface PaneContentProps {
   onClose?: (paneId: string) => void;
   /** Takes the pane out of its layout; the failure card offers it. Keep it stable: the content is memoized. */
   closePane?: (paneId: string) => void;
+  /**
+   * Desktop: lays the content out at `width` by `height` instead of filling
+   * the pane, while a resize sizes the pane's frame ahead of it. The content,
+   * and whatever measures it, then lays out again only when it renders at a
+   * new size.
+   */
+  pinned?: boolean;
 }
 
 export const PaneContent = memo(function PaneContent({
@@ -54,44 +62,53 @@ export const PaneContent = memo(function PaneContent({
   inView = true,
   onClose,
   closePane,
+  pinned = false,
 }: PaneContentProps) {
-  useAppLanguage();
-  useThemeColors();
+  // The pane reads text and colors while it renders, so either redraws it.
+  const language = useAppLanguage();
+  const theme = useThemeColors();
   const close = useCallback(() => {
     onClose?.(paneId);
   }, [onClose, paneId]);
   const closeFailedPane = useCallback(() => {
     closePane?.(paneId);
   }, [closePane, paneId]);
+  // Built again only when what the pane is given changes: pinning or
+  // unpinning the content box does not render the pane.
+  const body = useMemo(() => (
+    <PaneErrorBoundary paneType={paneType} title={title} onClose={closePane ? closeFailedPane : undefined}>
+      <PaneRenderTrace paneId={paneId} paneType={paneType}>
+        <Component
+          paneId={paneId}
+          paneType={paneType}
+          focused={focused}
+          width={width}
+          height={height}
+          close={onClose ? close : undefined}
+        />
+      </PaneRenderTrace>
+    </PaneErrorBoundary>
+  ), [Component, close, closeFailedPane, closePane, focused, height, language, onClose, paneId, paneType, theme, title, width]);
 
   return (
     <PaneInstanceProvider paneId={paneId}>
-      <PaneInViewProvider value={inView}>
-        <PaneKeyboardScrollController paneId={paneId} focused={focused} />
-        <Box
-          flexDirection="column"
-          flexGrow={1}
-          flexShrink={1}
-          flexBasis={0}
-          minWidth={0}
-          minHeight={0}
-          overflow="hidden"
-          data-gloom-role="pane-content"
-        >
-          <PaneErrorBoundary paneType={paneType} title={title} onClose={closePane ? closeFailedPane : undefined}>
-            <PaneRenderTrace paneId={paneId} paneType={paneType}>
-              <Component
-                paneId={paneId}
-                paneType={paneType}
-                focused={focused}
-                width={width}
-                height={height}
-                close={onClose ? close : undefined}
-              />
-            </PaneRenderTrace>
-          </PaneErrorBoundary>
-        </Box>
-      </PaneInViewProvider>
+      <RemoteUiPaneScope paneId={paneId}>
+        <PaneInViewProvider value={inView}>
+          <PaneKeyboardScrollController paneId={paneId} focused={focused} />
+          <Box
+            flexDirection="column"
+            {...(pinned
+              ? { width, height, flexGrow: 0, flexShrink: 0 }
+              : { flexGrow: 1, flexShrink: 1, flexBasis: 0 })}
+            minWidth={0}
+            minHeight={0}
+            overflow="hidden"
+            data-gloom-role="pane-content"
+          >
+            {body}
+          </Box>
+        </PaneInViewProvider>
+      </RemoteUiPaneScope>
     </PaneInstanceProvider>
   );
 });

package/src/components/layout/pane/cycle-order.ts

@@ -1,23 +1,14 @@
 import { getDockedPaneIds } from "../../../layout/pane-manager";
 import type { PluginRegistry } from "../../../plugins/registry";
 import { findPaneInstance, type LayoutConfig } from "../../../types/config";
-
-function disabledPaneTypes(pluginRegistry: PluginRegistry, disabledPlugins: readonly string[]): Set<string> {
-  const paneTypes = new Set<string>();
-  for (const pluginId of disabledPlugins) {
-    for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) {
-      paneTypes.add(paneId);
-    }
-  }
-  return paneTypes;
-}
+import { collectDisabledPaneIds } from "../shell/visible-layout";
 
 export function getVisiblePaneCycleOrder(
   layout: LayoutConfig,
   pluginRegistry: PluginRegistry,
   disabledPlugins: readonly string[],
 ): string[] {
-  const disabledTypes = disabledPaneTypes(pluginRegistry, disabledPlugins);
+  const disabledTypes = collectDisabledPaneIds(pluginRegistry, disabledPlugins);
   const isVisiblePane = (instanceId: string) => {
     const instance = findPaneInstance(layout, instanceId);
     return !!instance

package/src/components/layout/pane/header.tsx

@@ -174,10 +174,11 @@ export function PaneHeader({
 
   if (nativePaneChrome) {
     const ruleColor = visuallyFocused ? colors.borderFocused : colors.border;
+    // No width of its own: it stretches across its pane, so it follows a
+    // frame a resize sizes outside React.
     return (
       <Box
         height={titleBar?.rows ?? nativePaneHeaderRows()}
-        width={width}
         backgroundColor={backgroundColor}
         flexDirection="row"
         data-gloom-role="pane-header"

package/src/components/layout/pane/title.ts

@@ -13,7 +13,7 @@ import { canFollowTickerSource, isTickerLinkPeer } from "../../../layout/ticker-
 const LINK_GLYPH = "\u29c9";
 
 /** The title without the link suffix. */
-function getBasePaneDisplayTitle(
+export function getBasePaneDisplayTitle(
   state: Pick<AppState, "config" | "paneState">,
   instance: PaneInstanceConfig,
   paneDef: PaneDef,

package/src/components/layout/presentation.ts

@@ -0,0 +1,22 @@
+import { useAppSelector } from "../../state/app/context";
+import { useUiCapabilities } from "../../ui";
+
+/**
+ * Which app chrome is on screen. Presentation mode (`presentationMode` in the
+ * config) leaves the window to the panes: no header (the command prompt and
+ * the market summary) and no status bar (layout tabs, version, account and
+ * feedback). The header comes back while the command bar is open, as its
+ * prompt is where the command bar types, and stays in the desktop app, where
+ * it is the window's own title bar with its window controls.
+ */
+export function useAppChromeShown(): { header: boolean; statusBar: boolean } {
+  const { titleBarOverlay = false, nativeWindowChrome = true } = useUiCapabilities();
+  const windowTitleBar = titleBarOverlay && nativeWindowChrome;
+  const presentation = useAppSelector((state) => state.config.presentationMode === true);
+  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
+  const statusBarVisible = useAppSelector((state) => state.statusBarVisible);
+  return {
+    header: !presentation || commandBarOpen || windowTitleBar,
+    statusBar: statusBarVisible && !presentation,
+  };
+}

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, paneResize: 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,