gloomberb 0.9.3 → 0.9.5

package/src/components/onboarding/onboarding-steps.tsx

@@ -1,8 +1,6 @@
-import { useMemo } from "react";
 import { AsciiText, Box, Span, Strong, Text, TextAttributes, useUiHost } from "../../ui";
 import { colors } from "../../theme/colors";
 import { themes } from "../../theme/themes";
-import type { PluginRegistry } from "../../plugins/registry";
 import { detectShortcutPlatform, formatPrimaryShortcut, getShortcutDisplayMode } from "../../utils/shortcut-labels";
 export { PortfolioStep, type PortfolioSub } from "./portfolio-step";
 
@@ -95,7 +93,7 @@ export function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[
   );
 }
 
-export function ShortcutsStep({ pluginRegistry }: { pluginRegistry: PluginRegistry }) {
+export function ShortcutsStep() {
   const uiHost = useUiHost();
   const shortcutPlatform = detectShortcutPlatform();
   const shortcutDisplayMode = getShortcutDisplayMode(uiHost.kind);
@@ -109,30 +107,12 @@ export function ShortcutsStep({ pluginRegistry }: { pluginRegistry: PluginRegist
     { key: "q", desc: "Quit" },
   ];
 
-  const commandPrefixes = useMemo(() => {
-    const builtIn = [
-      { key: "DES AAPL", desc: "Open security details" },
-      { key: "TH", desc: "Switch theme" },
-      { key: "PL", desc: "Toggle plugins" },
-      { key: "PS", desc: "Edit the current window settings" },
-      { key: "HELP", desc: "Open the help window" },
-    ];
-
-    const builtInKeys = new Set(builtIn.map((entry) => entry.key.split(" ")[0]));
-    const pluginPrefixes: { key: string; desc: string }[] = [];
-
-    for (const [, template] of pluginRegistry.paneTemplates) {
-      if (!template.shortcut) continue;
-      if (builtInKeys.has(template.shortcut.prefix)) continue;
-      const label = template.shortcut.argPlaceholder
-        ? `${template.shortcut.prefix} <${template.shortcut.argPlaceholder}>`
-        : template.shortcut.prefix;
-      pluginPrefixes.push({ key: label, desc: template.label });
-    }
-
-    pluginPrefixes.sort((a, b) => a.key.localeCompare(b.key));
-    return [...builtIn, ...pluginPrefixes];
-  }, [pluginRegistry]);
+  const commandPrefixes = [
+    { key: "DES AAPL", desc: "Open security details" },
+    { key: "TH", desc: "Switch theme" },
+    { key: "PL", desc: "Toggle plugins" },
+    { key: "HELP", desc: "Open the help window" },
+  ];
 
   const COL = 20;
 
@@ -152,7 +132,7 @@ export function ShortcutsStep({ pluginRegistry }: { pluginRegistry: PluginRegist
 
       <Box height={2} />
       <Box height={1}>
-        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Command-bar prefixes"}</Text>
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{"Basic command prefixes"}</Text>
       </Box>
       <Box height={1} />
       <Box height={1}>

package/src/components/onboarding/onboarding-wizard.test.tsx

@@ -93,11 +93,14 @@ afterEach(async () => {
 });
 
 describe("OnboardingWizard", () => {
-  test("uses backspace to go back when not editing and keeps backspace for text deletion while editing", async () => {
+  test("skips manual portfolio naming and shows compact starter shortcuts", async () => {
     const pluginRegistry = {
       allPlugins: new Map(),
       brokers: new Map(),
-      paneTemplates: new Map(),
+      paneTemplates: new Map([[
+        "ai",
+        { label: "AI Screener", shortcut: { prefix: "AI", argPlaceholder: "prompt" } },
+      ]]),
       getPaneTemplatePluginId: () => undefined,
       tickerRepository: createTickerRepository(),
       persistence: { resources: undefined },
@@ -132,16 +135,14 @@ describe("OnboardingWizard", () => {
     expect(frame).toContain("Create Manual Portfolio");
 
     await emitKeypress(testSetup, { name: "return", sequence: "\r" });
-    frame = await waitForFrameToContain("Main Portfolio");
-    expect(frame).toContain("Main Portfolio");
-
-    await act(async () => {
-      testSetup!.mockInput.pressBackspace();
-      await testSetup!.renderOnce();
-    });
-    frame = testSetup.captureCharFrame();
-    expect(frame).toContain("Main Portfoli");
-    expect(frame).not.toContain("Create Manual Portfolio");
+    frame = await waitForFrameToContain("After launch shortcuts");
+    expect(frame).toContain("Basic command prefixes");
+    expect(frame).toContain("DES AAPL");
+    expect(frame).toContain("HELP");
+    expect(frame).not.toContain("Name your portfolio");
+    expect(frame).not.toContain("Command-bar prefixes");
+    expect(frame).not.toContain("AI <prompt>");
+    expect(frame).not.toContain("AI Screener");
   });
 
   test("waits for broker positions to import before completing onboarding", async () => {

package/src/components/onboarding/onboarding-wizard.tsx

@@ -36,7 +36,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
   const [themeIdx, setThemeIdx] = useState(0);
   const [portfolioSub, setPortfolioSub] = useState<PortfolioSub>("choose");
   const [portfolioOptionIdx, setPortfolioOptionIdx] = useState(0);
-  const [portfolioName, setPortfolioName] = useState("Main Portfolio");
+  const portfolioName = "Main Portfolio";
   const [brokerValues, setBrokerValues] = useState<Record<string, Record<string, string>>>({});
   const [selectedBrokerId, setSelectedBrokerId] = useState<string | null>(null);
   const [brokerFieldIdx, setBrokerFieldIdx] = useState(0);
@@ -255,8 +255,6 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
             choices={portfolioChoices}
             optionIdx={portfolioOptionIdx}
             onOptionSelect={setPortfolioOptionIdx}
-            portfolioName={portfolioName}
-            onNameChange={setPortfolioName}
             selectedBrokerId={selectedBrokerId}
             brokerFields={activeBrokerFields}
             brokerFieldIdx={brokerFieldIdx}
@@ -270,7 +268,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
           />
         )}
         {step === "shortcuts" && (
-          <ShortcutsStep pluginRegistry={pluginRegistry} />
+          <ShortcutsStep />
         )}
         {step === "ready" && (
           <ReadyStep

package/src/components/onboarding/portfolio-step/index.tsx

@@ -2,7 +2,6 @@ import { BrokerFieldsPanel } from "./broker-fields-panel";
 import { BrokerSetupPanel } from "./broker-setup-panel";
 import { BrokerSyncPanel } from "./broker-sync-panel";
 import { PortfolioChoicePanel } from "./choose-panel";
-import { ManualPortfolioNamePanel } from "./manual-name-panel";
 import type { PortfolioStepProps, PortfolioSub } from "./types";
 
 export type { PortfolioSub };
@@ -18,17 +17,6 @@ export function PortfolioStep(props: PortfolioStepProps) {
     );
   }
 
-  if (props.sub === "manual-name") {
-    return (
-      <ManualPortfolioNamePanel
-        portfolioName={props.portfolioName}
-        onNameChange={props.onNameChange}
-        editing={props.editing}
-        inputRef={props.inputRef}
-      />
-    );
-  }
-
   if (props.sub === "broker-setup" && props.selectedBrokerId) {
     return (
       <BrokerSetupPanel

package/src/components/onboarding/portfolio-step/types.ts

@@ -3,15 +3,13 @@ import type { InputRenderable } from "../../../ui";
 import type { BrokerConfigField } from "../../../types/broker";
 import type { ListViewItem } from "../../ui";
 
-export type PortfolioSub = "choose" | "manual-name" | "broker-setup" | "broker-fields" | "broker-sync";
+export type PortfolioSub = "choose" | "broker-setup" | "broker-fields" | "broker-sync";
 
 export interface PortfolioStepProps {
   sub: PortfolioSub;
   choices: ListViewItem[];
   optionIdx: number;
   onOptionSelect: (idx: number) => void;
-  portfolioName: string;
-  onNameChange: (name: string) => void;
   selectedBrokerId: string | null;
   brokerFields: BrokerConfigField[];
   brokerFieldIdx: number;

package/src/components/onboarding/wizard-keyboard.ts

@@ -74,9 +74,7 @@ export function useOnboardingKeyboard({
     if (editingField) {
       if (event.name === "return") {
         setEditingField(false);
-        if (portfolioSub === "manual-name") {
-          nextStep();
-        } else if (portfolioSub === "broker-fields" && selectedBrokerId) {
+        if (portfolioSub === "broker-fields" && selectedBrokerId) {
           const currentField = activeBrokerFields[brokerFieldIdx];
           if (!currentField) {
             void syncSelectedBroker();
@@ -125,8 +123,7 @@ export function useOnboardingKeyboard({
           if (choice.id === "manual") {
             resetBrokerSync();
             setSelectedBrokerId(null);
-            setPortfolioSub("manual-name");
-            setEditingField(true);
+            nextStep();
           } else {
             resetBrokerSync();
             setSelectedBrokerId(choice.id);

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,11 +2,10 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState,
   type ReactNode,
   type RefObject,
 } from "react";
-import { Box, type ScrollBoxRenderable } from "../ui";
+import { Box, useUiCapabilities, type ScrollBoxRenderable } from "../ui";
 import { isPlainKeyboardEvent } from "../utils/keyboard";
 
 function listenToScrollBarChange(
@@ -56,15 +55,23 @@ export function TableViewFrame({
   after,
   children,
 }: TableViewFrameProps) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const nativeFlexibleFrame = nativePaneChrome === true;
+
   return (
     <Box
       flexDirection="column"
-      flexGrow={height == null ? 1 : undefined}
-      flexShrink={height == null ? undefined : 0}
+      flexGrow={nativeFlexibleFrame || height == null ? 1 : undefined}
+      flexShrink={nativeFlexibleFrame ? 1 : height == null ? undefined : 0}
+      flexBasis={nativeFlexibleFrame ? 0 : undefined}
       width={width}
-      height={height}
+      height={nativeFlexibleFrame ? undefined : height}
+      minWidth={nativeFlexibleFrame ? 0 : undefined}
+      minHeight={nativeFlexibleFrame ? 0 : undefined}
+      maxHeight={nativeFlexibleFrame ? "100%" : undefined}
       backgroundColor={backgroundColor}
       overflow="hidden"
+      data-gloom-role="table-view-frame"
     >
       {before}
       {children}
@@ -106,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;
@@ -136,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,14 +40,13 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   headerScrollId,
   bodyScrollId,
   getItemKey,
   isSelected,
   onSelect,
   onActivate,
+  onTableMouseDown,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
@@ -60,6 +59,9 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   emptyStateHint,
   virtualize = true,
   overscan = 3,
+  columnGap = 1,
+  horizontalPadding = 1,
+  fillAvailableWidth = true,
   showHorizontalScrollbar = true,
   scrollToIndex,
   scrollToIndexAlign = "nearest",
@@ -105,17 +107,21 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     ],
   );
   const { endIndex, startIndex, viewportHeight, visibleItems } = tableWindow;
-  const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
+  const tableWidth = useMemo(
+    () => getTableWidth(columns, columnGap, horizontalPadding),
+    [columnGap, columns, horizontalPadding],
+  );
   const {
     contentWidth: measuredContentWidth,
     viewportWidth: measuredViewportWidth,
     measureContentWidth,
   } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
   const horizontalScrollbarVisible = showHorizontalScrollbar
-    && hasMeaningfulTableHorizontalOverflow(tableWidth, measuredViewportWidth);
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, measuredViewportWidth, columnGap);
+  const contentWidth = fillAvailableWidth ? measuredContentWidth : tableWidth;
   const displayColumns = useMemo(
-    () => expandTableColumns(columns, measuredContentWidth),
-    [columns, measuredContentWidth],
+    () => expandTableColumns(columns, contentWidth, columnGap, horizontalPadding),
+    [columnGap, columns, contentWidth, horizontalPadding],
   );
   const handleRowMouseDown =
     useDoubleClickActivation<DataTableRowPointerTarget<T>>({
@@ -264,8 +270,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
         <Box
           flexDirection="row"
           height={1}
-          {...tableContentWidthProps(measuredContentWidth)}
-          paddingX={1}
+          {...tableContentWidthProps(contentWidth)}
+          paddingX={horizontalPadding}
           backgroundColor={colors.panel}
         >
           {displayColumns.map((column) => {
@@ -283,10 +289,11 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
             return (
               <Box
                 key={column.id}
-                width={column.width + 1}
+                width={column.width + columnGap}
                 backgroundColor={column.headerBackgroundColor ?? colors.panel}
                 onMouseDown={(event: any) => {
                   focusPane();
+                  onTableMouseDown?.(event);
                   event.preventDefault();
                   onHeaderClick(column.id);
                 }}
@@ -315,6 +322,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
         focusable={false}
         onMouseDown={() => {
           focusPane();
+          onTableMouseDown?.({});
         }}
         onSizeChange={measureContentWidth}
       >
@@ -339,11 +347,12 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                       key={getItemKey(item, index)}
                       flexDirection="row"
                       height={1}
-                      {...tableContentWidthProps(measuredContentWidth)}
-                      paddingX={1}
+                      {...tableContentWidthProps(contentWidth)}
+                      paddingX={horizontalPadding}
                       backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
                       onMouseDown={(event: any) => {
                         focusPane();
+                        onTableMouseDown?.(event);
                         event.preventDefault();
                       }}
                     >
@@ -358,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,
@@ -367,24 +375,22 @@ 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
                     key={getItemKey(item, index)}
                     flexDirection="row"
                     height={1}
-                    {...tableContentWidthProps(measuredContentWidth)}
-                    paddingX={1}
+                    {...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);
                       if (onRowMouseDown?.(item, index, event) === true) {
                         return;
                       }
@@ -404,10 +410,11 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                       return (
                         <Box
                           key={column.id}
-                          width={column.width + 1}
+                          width={column.width + columnGap}
                           backgroundColor={cell.backgroundColor ?? rowBg}
                           onMouseDown={(event: any) => {
                             focusPane();
+                            onTableMouseDown?.(event);
                             if (cell.onMouseDown) {
                               cell.onMouseDown(event);
                               return;