gloomberb 0.9.4 → 0.9.5

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

@@ -73,8 +73,6 @@ export interface DataTableViewProps<
     | "scrollRef"
     | "syncHeaderScroll"
     | "onBodyScrollActivity"
-    | "hoveredIdx"
-    | "setHoveredIdx"
     | "isSelected"
     | "onSelect"
     | "onActivate"
@@ -97,8 +95,6 @@ export interface DataTableViewProps<
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
   onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
   onRootKeyDown?: (
     event: DataTableKeyEvent,
@@ -125,8 +121,6 @@ export function DataTableView<
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
   onRootKeyDown,
   resetScrollKey,
@@ -137,15 +131,11 @@ export function DataTableView<
   const {
     effectiveHeaderScrollRef,
     effectiveScrollRef,
-    effectiveHoveredIdx,
-    effectiveSetHoveredIdx,
     effectiveSyncHeaderScroll,
   } = useTableViewState({
     headerScrollRef,
     scrollRef,
     syncHeaderScroll,
-    hoveredIdx,
-    setHoveredIdx,
   });
   const [cursorIndex, setCursorIndex] = useState<number | null>(null);
   const pendingCommitRef = useRef(false);
@@ -532,8 +522,6 @@ export function DataTableView<
         scrollRef={effectiveScrollRef}
         syncHeaderScroll={effectiveSyncHeaderScroll}
         onBodyScrollActivity={handleBodyScrollActivity}
-        hoveredIdx={effectiveHoveredIdx}
-        setHoveredIdx={effectiveSetHoveredIdx}
         scrollToIndex={effectiveScrollToIndex}
         scrollToIndexVersion={scrollToIndexVersion + selectionScrollVersion}
         isSelected={isItemSelected}

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

@@ -18,7 +18,7 @@ interface FloatingPaneWrapperProps {
   windowModeSelected?: boolean;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
-  onMouseMove?: (event: any) => void;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -63,7 +63,7 @@ export function FloatingPaneWrapper({
   windowModeSelected = false,
   showActions = false,
   onMouseDown,
-  onMouseMove,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -104,7 +104,6 @@ export function FloatingPaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
     >
       <PaneHeader
         title={title}
@@ -113,6 +112,7 @@ export function FloatingPaneWrapper({
         windowModeSelected={windowModeSelected}
         floating
         showActions={showActions}
+        onHeaderMouseMove={onHeaderMouseMove}
         onHeaderMouseDown={onHeaderMouseDown}
         onHeaderMouseDrag={onHeaderMouseDrag}
         onHeaderMouseDragEnd={onHeaderMouseDragEnd}

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

@@ -14,6 +14,7 @@ interface PaneHeaderProps {
   windowModeSelected?: boolean;
   floating?: boolean;
   showActions?: boolean;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -111,6 +112,7 @@ export function PaneHeader({
   windowModeSelected = false,
   floating = false,
   showActions = false,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -143,6 +145,7 @@ export function PaneHeader({
         data-focused={focused ? "true" : "false"}
         data-window-mode-selected={windowModeSelected ? "true" : "false"}
         onMouseDown={onHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
         onMouseDrag={onHeaderMouseDrag}
         onMouseDragEnd={onHeaderMouseDragEnd}
         onContextMenu={onHeaderContextMenu}
@@ -226,6 +229,7 @@ export function PaneHeader({
         backgroundColor={backgroundColor}
         flexDirection="row"
         onMouseDown={handleTerminalHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
         onMouseDrag={onHeaderMouseDrag}
         onMouseDragEnd={onHeaderMouseDragEnd}
       >
@@ -263,6 +267,7 @@ export function PaneHeader({
       backgroundColor={backgroundColor}
       flexDirection="row"
       onMouseDown={handleTerminalHeaderMouseDown}
+      onMouseMove={onHeaderMouseMove}
       onMouseDrag={onHeaderMouseDrag}
       onMouseDragEnd={onHeaderMouseDragEnd}
     >

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

@@ -16,7 +16,7 @@ interface PaneWrapperProps {
   flexGrow?: number;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
-  onMouseMove?: (event: any) => void;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -36,7 +36,7 @@ export function PaneWrapper({
   flexGrow,
   showActions = false,
   onMouseDown,
-  onMouseMove,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -76,7 +76,6 @@ export function PaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
     >
       {title && (
         <PaneHeader
@@ -85,6 +84,7 @@ export function PaneWrapper({
           focused={focused}
           windowModeSelected={windowModeSelected}
           showActions={showActions}
+          onHeaderMouseMove={onHeaderMouseMove}
           onHeaderMouseDown={onHeaderMouseDown}
           onHeaderMouseDrag={onHeaderMouseDrag}
           onHeaderMouseDragEnd={onHeaderMouseDragEnd}

package/src/components/layout/shell/action-menu-overlay.tsx

@@ -52,7 +52,7 @@ export function ShellActionMenuOverlay({
             height={1}
             width={innerWidth}
             backgroundColor={hovered ? colors.selected : colors.panel}
-            onMouseMove={() => onHoverItem(item.id)}
+            onMouseOver={() => onHoverItem(item.id)}
             onMouseDown={(mouseEvent: any) => {
               mouseEvent.stopPropagation();
               mouseEvent.preventDefault();

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

@@ -23,6 +23,8 @@ interface ResolveShellCursorOcclusionRectsOptions {
   width: number;
 }
 
+const MAX_RENDERABLE_ANCESTOR_DEPTH = 256;
+
 export function resolveShellCursorOcclusionRects({
   contentHeight,
   dragFloatingRect,
@@ -102,7 +104,13 @@ function readRenderableBounds(renderable: unknown): LayoutBounds | null {
 
 function readRenderablePaneId(renderable: unknown): string | null {
   let current = renderable;
-  while (current && typeof current === "object") {
+  const seen = new Set<object>();
+  let depth = 0;
+
+  while (current && typeof current === "object" && !seen.has(current)) {
+    if (depth >= MAX_RENDERABLE_ANCESTOR_DEPTH) return null;
+    seen.add(current);
+    depth += 1;
     const record = current as Record<string, unknown>;
     const paneId = record["data-gloom-pane-id"];
     if (typeof paneId === "string") return paneId;

package/src/components/layout/shell/index.tsx

@@ -525,7 +525,14 @@ export function Shell({
       height={nativePaneChrome ? undefined : contentHeight}
       position={nativePaneChrome ? "relative" : undefined}
       overflow="hidden"
-      {...(!nativePaneChrome ? { onMouse: handleMouse } : {})}
+      {...(!nativePaneChrome
+        ? {
+          onMouseDown: handleMouse,
+          onMouseDrag: handleMouse,
+          onMouseDragEnd: handleMouse,
+          onMouseUp: handleMouse,
+        }
+        : {})}
     >
       <Box
         position="absolute"

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

@@ -132,7 +132,7 @@ export function ShellPaneLayers({
                     windowModeSelected={windowModeSelected}
                     footer={footer}
                     onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(leaf.instanceId, event) : undefined}
-                    onMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
+                    onHeaderMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
                     onHeaderMouseDown={nativePaneChrome && !transientFocusActive ? (event) => startNativeDockedDrag(leaf.instanceId, rect, event) : undefined}
                     onHeaderMouseDrag={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
                     onHeaderMouseDragEnd={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
@@ -192,7 +192,7 @@ export function ShellPaneLayers({
                   showActions={showActions}
                   footer={footer}
                   onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(pane.instance.instanceId, event) : undefined}
-                  onMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
+                  onHeaderMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
                   onHeaderMouseDown={nativePaneChrome ? (event) => startNativeFloatingDrag(pane.instance.instanceId, preview, event) : undefined}
                   onHeaderMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
                   onHeaderMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}

package/src/components/layout/status-bar.tsx

@@ -364,7 +364,7 @@ function CommandBarHint({
     <Text
       fg={hovered ? colors.text : colors.textDim}
       {...(!nativePaneChrome ? { bg: hovered ? hoverBg() : undefined } : {})}
-      onMouseMove={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
+      onMouseOver={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
       onMouseDown={openCommandBar}
       {...(nativePaneChrome ? { "data-gloom-interactive": "true" } : {})}
     >
@@ -385,7 +385,7 @@ function NativeGridlockTip({
       <Text
         fg={hoveredControl === "gridlock-tip" ? colors.textBright : colors.borderFocused}
         attributes={TextAttributes.BOLD}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
         onMouseDown={handleGridlockTip}
         data-gloom-interactive="true"
       >
@@ -393,7 +393,7 @@ function NativeGridlockTip({
       </Text>
       <Text
         fg={hoveredControl === "gridlock-tip-dismiss" ? colors.text : colors.textDim}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
         onMouseDown={dismissGridlockTip}
         data-gloom-interactive="true"
       >
@@ -415,14 +415,14 @@ function TerminalGridlockTip({
       <Box width={1} />
       <Box
         backgroundColor={hoveredControl === "gridlock-tip" ? hoverBg() : colors.header}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
         onMouseDown={handleGridlockTip}
       >
         <Text fg={colors.headerText}> Gridlock All </Text>
       </Box>
       <Text
         fg={hoveredControl === "gridlock-tip-dismiss" ? colors.text : colors.textDim}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
         onMouseDown={dismissGridlockTip}
       >
         {" x"}

package/src/components/pane-settings-dialog/desktop.tsx

@@ -183,7 +183,7 @@ function DesktopSettingsRow({
       flexDirection="column"
       minHeight={field.description ? undefined : 2}
       backgroundColor={hovered || selected ? desktopHoverSurface() : "transparent"}
-      onMouseMove={onHover}
+      onMouseOver={onHover}
       onMouseDown={field.type === "select" ? undefined : (event: any) => {
         event.stopPropagation?.();
         event.preventDefault?.();

package/src/components/price-performance.tsx

@@ -157,7 +157,7 @@ export function PriceReturnTable({
             height={1}
             width={width}
             backgroundColor={row.selected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
-            onMouseMove={() => onSelectSymbol(row.symbol)}
+            onMouseOver={() => onSelectSymbol(row.symbol)}
             onMouseDown={(event: any) => {
               onFocusInteraction?.(event);
               onSelectSymbol(row.symbol);

package/src/components/price-sparkline/view.tsx

@@ -10,7 +10,7 @@ import {
 import { colors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import type { PricePoint } from "../../types/financials";
-import { computeBitmapSize } from "../chart/native/chart-rasterizer";
+import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../chart/native/bitmap-support";
 import { renderSparklineBitmap } from "./bitmap";
 import {
   buildSamples,
@@ -90,22 +90,21 @@ function TerminalPriceSparkline({
   const { nativeCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const nativeRenderer = useNativeRenderer();
   const rendererResolution = nativeRenderer.resolution;
+  const rendererCapabilities = nativeRenderer.capabilities;
   const rendererTerminalWidth = nativeRenderer.terminalWidth;
   const rendererTerminalHeight = nativeRenderer.terminalHeight;
   const bitmap = useMemo(() => {
-    if (!nativeCharts || values.length < 2) return null;
-    const scale = Math.max(1, pixelRatio);
-    const bitmapSize = rendererResolution && rendererTerminalWidth > 0 && rendererTerminalHeight > 0
-      ? computeBitmapSize(
-        { x: 0, y: 0, width, height },
-        rendererResolution,
-        rendererTerminalWidth,
-        rendererTerminalHeight,
-      )
-      : {
-          pixelWidth: Math.max(1, Math.round(width * cellWidthPx * scale)),
-          pixelHeight: Math.max(1, Math.round(height * cellHeightPx * scale)),
-        };
+    if (values.length < 2 || !shouldRenderNativeBitmap(nativeRenderer, nativeCharts === true)) return null;
+    const bitmapSize = resolveNativeBitmapSize({
+      width,
+      height,
+      resolution: rendererResolution,
+      terminalWidth: rendererTerminalWidth,
+      terminalHeight: rendererTerminalHeight,
+      cellWidthPx,
+      cellHeightPx,
+      pixelRatio,
+    });
     return renderSparklineBitmap(values, bitmapSize.pixelWidth, bitmapSize.pixelHeight, color, { area, compact: height <= 1 });
   }, [
     area,
@@ -114,7 +113,9 @@ function TerminalPriceSparkline({
     color,
     height,
     nativeCharts,
+    nativeRenderer,
     pixelRatio,
+    rendererCapabilities,
     rendererResolution,
     rendererTerminalHeight,
     rendererTerminalWidth,

package/src/components/speedometer-gauge/terminal.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { Box, ChartSurface, Span, Text, TextAttributes, useNativeRenderer, useUiCapabilities } from "../../ui";
-import { computeBitmapSize, type NativeChartBitmap } from "../chart/native/chart-rasterizer";
+import type { NativeChartBitmap } from "../chart/native/chart-rasterizer";
+import { resolveNativeBitmapSize, shouldRenderNativeBitmap } from "../chart/native/bitmap-support";
 import { drawCircle, drawLine, parseHex } from "../chart/native/raster/primitives";
 import { colors } from "../../theme/colors";
 import {
@@ -203,29 +204,29 @@ export function TerminalSpeedometerGauge({
   const labelRow = useMemo(() => renderLabelRow(gaugeWidth, min, max, segments), [gaugeWidth, max, min, segments]);
   const tickRow = useMemo(() => renderTickRow(gaugeWidth, min, max), [gaugeWidth, max, min]);
   const arcRows = useMemo(() => renderArcRows(value, min, max, gaugeWidth, segments), [gaugeWidth, max, min, segments, value]);
+  const rendererCapabilities = nativeRenderer.capabilities;
   const rendererResolution = nativeRenderer.resolution;
   const rendererTerminalWidth = nativeRenderer.terminalWidth;
   const rendererTerminalHeight = nativeRenderer.terminalHeight;
   const bitmap = useMemo<NativeChartBitmap | null>(() => {
-    if (!nativeCharts) return null;
-    const bitmapSize = rendererResolution && rendererTerminalWidth > 0 && rendererTerminalHeight > 0
-      ? computeBitmapSize(
-        { x: 0, y: 0, width: gaugeWidth, height: arcRows.length },
-        rendererResolution,
-        rendererTerminalWidth,
-        rendererTerminalHeight,
-      )
-      : null;
-    const scale = Math.max(1, pixelRatio);
-    const pixelWidth = bitmapSize?.pixelWidth ?? Math.max(1, Math.round(gaugeWidth * cellWidthPx * scale));
-    const pixelHeight = bitmapSize?.pixelHeight ?? Math.max(1, Math.round(arcRows.length * cellHeightPx * scale));
+    if (!shouldRenderNativeBitmap(nativeRenderer, nativeCharts === true)) return null;
+    const bitmapSize = resolveNativeBitmapSize({
+      width: gaugeWidth,
+      height: arcRows.length,
+      resolution: rendererResolution,
+      terminalWidth: rendererTerminalWidth,
+      terminalHeight: rendererTerminalHeight,
+      cellWidthPx,
+      cellHeightPx,
+      pixelRatio,
+    });
     return renderGaugeBitmap(
       value,
       min,
       max,
       segments,
-      pixelWidth,
-      pixelHeight,
+      bitmapSize.pixelWidth,
+      bitmapSize.pixelHeight,
     );
   }, [
     arcRows.length,
@@ -235,7 +236,9 @@ export function TerminalSpeedometerGauge({
     max,
     min,
     nativeCharts,
+    nativeRenderer,
     pixelRatio,
+    rendererCapabilities,
     rendererResolution,
     rendererTerminalHeight,
     rendererTerminalWidth,

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

@@ -2,7 +2,6 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState,
   type ReactNode,
   type RefObject,
 } from "react";
@@ -114,23 +113,16 @@ export function useTableViewState({
   headerScrollRef,
   scrollRef,
   syncHeaderScroll,
-  hoveredIdx,
-  setHoveredIdx,
 }: {
   headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
 }) {
   const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
   const internalScrollRef = useRef<ScrollBoxRenderable>(null);
-  const [internalHoveredIdx, setInternalHoveredIdx] = useState<number | null>(null);
 
   const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
   const effectiveScrollRef = scrollRef ?? internalScrollRef;
-  const effectiveHoveredIdx = hoveredIdx !== undefined ? hoveredIdx : internalHoveredIdx;
-  const effectiveSetHoveredIdx = setHoveredIdx ?? setInternalHoveredIdx;
 
   const defaultSyncHeaderScroll = useCallback(() => {
     const body = effectiveScrollRef.current;
@@ -144,8 +136,6 @@ export function useTableViewState({
   return {
     effectiveHeaderScrollRef,
     effectiveScrollRef,
-    effectiveHoveredIdx,
-    effectiveSetHoveredIdx,
     effectiveSyncHeaderScroll: syncHeaderScroll ?? defaultSyncHeaderScroll,
   };
 }

package/src/components/ticker/list-table-view.tsx

@@ -56,8 +56,6 @@ export interface TickerListTableViewProps {
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
   onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
   onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
   onVisibleRangeChange?: (range: TickerListVisibleRange) => void;
@@ -119,8 +117,6 @@ export function TickerListTableView({
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
   onRootKeyDown,
   onVisibleRangeChange,
@@ -187,7 +183,7 @@ export function TickerListTableView({
     ticker: TickerRecord,
     column: ColumnConfig,
     _index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: { selected: boolean },
   ) => {
     const financials = financialsMap.get(ticker.metadata.ticker);
     if (column.id === PRICE_SPARKLINE_COLUMN_ID) {
@@ -279,8 +275,6 @@ export function TickerListTableView({
       scrollRef={effectiveScrollRef}
       syncHeaderScroll={syncHeaderScroll}
       onBodyScrollActivity={handleBodyScrollActivity}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       keyboardNavigation={keyboardNavigation}
       onRootKeyDown={onRootKeyDown}
       resetScrollKey={resetScrollKey}

package/src/components/ticker/list-table.test.tsx

@@ -32,8 +32,6 @@ const manyTickers: TickerRecord[] = Array.from({ length: 1000 }, (_, index) => (
   },
 }));
 
-function noop(_index: number | null): void {}
-
 function resolveCell(_column: ColumnConfig, ticker: TickerRecord, _financials: TickerFinancials | undefined): TickerTableCell {
   resolveCellCallCount += 1;
   return { text: ticker.metadata.ticker };
@@ -69,8 +67,6 @@ function LargeTickerListTableHarness() {
         columns={columns}
         tickers={manyTickers}
         cursorSymbol={cursorSymbol}
-        hoveredIdx={null}
-        setHoveredIdx={noop}
         setCursorSymbol={setCursorSymbol}
         resolveCell={resolveCell}
         financialsMap={financialsMap}

package/src/components/ui/data-table/opentui/index.tsx

@@ -40,8 +40,6 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   headerScrollId,
   bodyScrollId,
   getItemKey,
@@ -369,8 +367,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                 }
 
                 const selected = isSelected(item, index);
-                const hovered = hoveredIdx === index && !selected;
-                const rowState = { selected, hovered };
+                const rowState = { selected };
                 const rowBackgroundColor = getRowBackgroundColor?.(
                   item,
                   index,
@@ -378,9 +375,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                 );
                 const rowBg = selected
                   ? colors.selected
-                  : hovered
-                    ? hoverBg()
-                    : rowBackgroundColor ?? colors.bg;
+                  : rowBackgroundColor ?? colors.bg;
+                const rowHoverBg = selected ? undefined : hoverBg();
 
                 return (
                   <Box
@@ -390,10 +386,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                     {...tableContentWidthProps(contentWidth)}
                     paddingX={horizontalPadding}
                     backgroundColor={rowBg}
+                    hoverBackgroundColor={rowHoverBg}
                     data-gloom-context-menu-surface={rowContextMenuSurface ? "true" : undefined}
-                    onMouseMove={() => {
-                      if (hoveredIdx !== index) setHoveredIdx(index);
-                    }}
                     onMouseDown={(event: any) => {
                       focusPane();
                       onTableMouseDown?.(event);

package/src/components/ui/data-table/types.ts

@@ -29,6 +29,10 @@ export interface DataTableSectionHeader {
 
 export type DataTableScrollAlign = "nearest" | "center";
 
+export interface DataTableRowState {
+  selected: boolean;
+}
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -42,8 +46,6 @@ export interface DataTableProps<
   scrollRef: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll: () => void;
   onBodyScrollActivity: () => void;
-  hoveredIdx: number | null;
-  setHoveredIdx: (index: number | null) => void;
   headerScrollId?: string;
   bodyScrollId?: string;
   getItemKey: (item: T, index: number) => string;
@@ -58,7 +60,7 @@ export interface DataTableProps<
     item: T,
     column: C,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => DataTableCell;
   renderSectionHeader?: (
     item: T,
@@ -67,7 +69,7 @@ export interface DataTableProps<
   getRowBackgroundColor?: (
     item: T,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => string | undefined;
   emptyContent?: ReactNode;
   bodyAfter?: ReactNode;

package/src/components/ui/list-view.tsx

@@ -166,7 +166,7 @@ export function ListView({
         key={item.id}
         height={1}
         backgroundColor={rowBg}
-        onMouseMove={() => {
+        onMouseOver={() => {
           if (!disabled) {
             setHoveredIndex((current) => (current === index ? current : index));
             if (selectOnHover) onSelect?.(index);

package/src/components/ui/tabs.tsx

@@ -287,7 +287,6 @@ function OpenTuiTabs({
             flexDirection="row"
             backgroundColor={active && variant === "pill" ? palette.activeBg : hovered ? palette.hoverBg : undefined}
             onMouseOver={startHover}
-            onMouseMove={startHover}
             onMouseOut={endHover}
             onMouseDown={selectTab}
             onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
@@ -319,7 +318,7 @@ function OpenTuiTabs({
           width={addWidth}
           height={1}
           backgroundColor={hoveredValue === "__add__" ? palette.hoverBg : undefined}
-          onMouseMove={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
+          onMouseOver={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
           onMouseOut={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
           onMouseDown={(event: TabPointerEvent) => {
             event.preventDefault();

package/src/components/ui/ui.test.tsx

@@ -51,7 +51,6 @@ function DataTableActivationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
 
   return (
     <DataTable
@@ -64,8 +63,6 @@ function DataTableActivationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => selectedId === row.id}
       onSelect={(row) => {
@@ -89,7 +86,6 @@ function DataTableSectionHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows: SectionTableRow[] = [
     { kind: "header", id: "macro", label: "Macro Releases" },
     { kind: "row", id: "cpi", name: "CPI" },
@@ -106,8 +102,6 @@ function DataTableSectionHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => row.kind === "row" && row.id === selectedId}
       onSelect={(row) => {
@@ -211,7 +205,6 @@ function DataTableColumnGapHarness() {
 function DataTableVirtualizationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows = Array.from({ length: 100 }, (_, index) => ({
     id: `row-${index}`,
     name: `Row ${index}`,
@@ -237,8 +230,6 @@ function DataTableVirtualizationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={() => false}
       onSelect={() => {}}