gloomberb 0.6.1 → 0.7.1

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

@@ -1,18 +1,20 @@
-import { Box, ScrollBox, Text, useUiHost } from "../../ui";
+import { Box, ScrollBox, Text, useNativeRenderer, useUiHost } from "../../ui";
 import { useCallback, useEffect, useMemo, useState, type ComponentType, type ReactNode, type RefObject } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import type { ColumnConfig } from "../../types/config";
 import { useAppDispatch, usePaneInstance } from "../../state/app-context";
 import { useViewport } from "../../react/input";
 import { padTo } from "../../utils/format";
-import { useRafCallback } from "../../react/use-raf-callback";
 import { measurePerf } from "../../utils/perf-marks";
 import { useDoubleClickActivation } from "../use-double-click-activation";
+import { useScrollBoxScrollActivity } from "../table-view-shared";
 import { EmptyState } from "./status";
 import {
   expandTableColumns,
   getTableWidth,
+  hasMeaningfulTableHorizontalOverflow,
   tableContentWidthProps,
   useMeasuredTableContentWidth,
 } from "./table-layout";
@@ -154,9 +156,11 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
   scrollToIndexAlign = "nearest",
   scrollToIndexVersion = 0,
 }: DataTableProps<T, C>) {
+  useThemeColors();
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const appViewport = useViewport();
+  const nativeRenderer = useNativeRenderer();
   const [scrollVersion, setScrollVersion] = useState(0);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
   const measuredViewportHeight = scrollRef.current?.viewport?.height;
@@ -199,10 +203,16 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
     ],
   );
   const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
-  const { contentWidth, measureContentWidth } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
+  const {
+    contentWidth: measuredContentWidth,
+    viewportWidth: measuredViewportWidth,
+    measureContentWidth,
+  } = useMeasuredTableContentWidth(tableWidth, headerScrollRef, scrollRef);
+  const horizontalScrollbarVisible = showHorizontalScrollbar
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, measuredViewportWidth);
   const displayColumns = useMemo(
-    () => expandTableColumns(columns, contentWidth),
-    [columns, contentWidth],
+    () => expandTableColumns(columns, measuredContentWidth),
+    [columns, measuredContentWidth],
   );
   const handleRowMouseDown =
     useDoubleClickActivation<DataTableRowPointerTarget<T>>({
@@ -221,9 +231,13 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
       setScrollVersion((current) => current + 1);
     }
     onBodyScrollActivity();
-  }, [onBodyScrollActivity, virtualize]);
-  const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
-  const scheduleHeaderScrollSync = useRafCallback(syncHeaderScroll);
+    nativeRenderer.requestRender();
+  }, [nativeRenderer, onBodyScrollActivity, virtualize]);
+  useScrollBoxScrollActivity({
+    scrollRef,
+    onVerticalScroll: handleBodyScrollActivity,
+    onHorizontalScroll: syncHeaderScroll,
+  });
   const focusPane = useCallback(() => {
     if (!paneInstanceId) return;
     dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
@@ -269,17 +283,18 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
   useEffect(() => {
     if (headerScrollRef.current) {
       headerScrollRef.current.horizontalScrollBar.visible = false;
-      if (!showHorizontalScrollbar) {
+      if (!horizontalScrollbarVisible) {
         headerScrollRef.current.scrollLeft = 0;
       }
     }
     if (scrollRef.current) {
-      scrollRef.current.horizontalScrollBar.visible = showHorizontalScrollbar;
-      if (!showHorizontalScrollbar) {
+      scrollRef.current.horizontalScrollBar.visible = horizontalScrollbarVisible;
+      scrollRef.current.verticalScrollBar.visible = items.length > scrollRef.current.viewport.height;
+      if (!horizontalScrollbarVisible) {
         scrollRef.current.scrollLeft = 0;
       }
     }
-  }, [columns.length, headerScrollRef, items.length, scrollRef, showHorizontalScrollbar]);
+  }, [columns.length, headerScrollRef, horizontalScrollbarVisible, items.length, measuredViewportHeight, scrollRef]);
 
   useEffect(() => {
     if (applyScrollToIndex()) return;
@@ -318,7 +333,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
         <Box
           flexDirection="row"
           height={1}
-          {...tableContentWidthProps(contentWidth)}
+          {...tableContentWidthProps(measuredContentWidth)}
           paddingX={1}
           backgroundColor={colors.panel}
         >
@@ -368,11 +383,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
         focusable={false}
         onMouseDown={() => {
           focusPane();
-          scheduleHeaderScrollSync();
         }}
-        onMouseUp={scheduleBodyScrollActivity}
-        onMouseDrag={scheduleBodyScrollActivity}
-        onMouseScroll={scheduleBodyScrollActivity}
         onSizeChange={measureContentWidth}
       >
         {items.length === 0 ? (
@@ -396,7 +407,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
                       key={getItemKey(item, index)}
                       flexDirection="row"
                       height={1}
-                      {...tableContentWidthProps(contentWidth)}
+                      {...tableContentWidthProps(measuredContentWidth)}
                       paddingX={1}
                       backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
                       onMouseDown={(event) => {
@@ -433,7 +444,7 @@ function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
                     key={getItemKey(item, index)}
                     flexDirection="row"
                     height={1}
-                    {...tableContentWidthProps(contentWidth)}
+                    {...tableContentWidthProps(measuredContentWidth)}
                     paddingX={1}
                     backgroundColor={rowBg}
                     onMouseMove={() => {

package/src/components/ui/frame.tsx

@@ -2,6 +2,7 @@ import { Box, Text, useUiHost } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { type ComponentType, type ReactNode } from "react";
 import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 
 export interface DialogFrameProps {
   title: string;
@@ -11,6 +12,7 @@ export interface DialogFrameProps {
 }
 
 export function DialogFrame({ title, children, footer, showTitleDivider = true }: DialogFrameProps) {
+  useThemeColors();
   const HostDialogFrame = useUiHost().DialogFrame as ComponentType<DialogFrameProps> | undefined;
   if (HostDialogFrame) {
     return (

package/src/components/ui/index.ts

@@ -6,7 +6,6 @@ export { DataTable } from "./data-table";
 export type { DataTableCell, DataTableColumn, DataTableProps } from "./data-table";
 
 export { Button } from "./button";
-
 export { ShortcutHint } from "./shortcut-hint";
 
 export { MultiSelectDialogButton, MultiSelectDialogContent } from "./multi-select-dialog";

package/src/components/ui/page-stack-view.tsx

@@ -1,8 +1,11 @@
 import { Box, Text, TextAttributes, useUiHost } from "../../ui";
 import { useShortcut } from "../../react/input";
-import { type ComponentType, type ReactNode } from "react";
+import { useCallback, type ComponentType, type ReactNode } from "react";
 import { colors } from "../../theme/colors";
-import { isDetailBackNavigationKey } from "../../utils/back-navigation";
+import {
+  isDetailBackNavigationKey,
+  isMouseBackNavigationEvent,
+} from "../../utils/back-navigation";
 
 export interface PageStackViewProps {
   focused: boolean;
@@ -41,13 +44,29 @@ export function PageStackView({
     );
   }
 
+  const goBack = useCallback((event?: {
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    event?.stopPropagation?.();
+    event?.preventDefault?.();
+    onBack();
+  }, [onBack]);
+
   useShortcut((event) => {
     if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
-    event.stopPropagation?.();
-    event.preventDefault?.();
-    onBack();
+    goBack(event);
   });
 
+  const handleMouseDown = useCallback((event: {
+    button?: unknown;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+  }) => {
+    if (!focused || !detailOpen || !isMouseBackNavigationEvent(event)) return;
+    goBack(event);
+  }, [detailOpen, focused, goBack]);
+
   if (!detailOpen) {
     return (
       <Box flexDirection="column" flexGrow={1} overflow="hidden">
@@ -57,16 +76,26 @@ export function PageStackView({
   }
 
   return (
-    <Box flexDirection="column" flexGrow={1} overflow="hidden">
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      overflow="hidden"
+      onMouseDown={handleMouseDown}
+    >
       <Box height={1} flexDirection="row">
         <Box
           onMouseDown={(event) => {
-            event.preventDefault?.();
-            event.stopPropagation?.();
-            onBack();
+            goBack(event);
           }}
+          backgroundColor={colors.selected}
         >
-          <Text fg={colors.textBright}>{`← ${backLabel}`}</Text>
+          <Text
+            fg={colors.selectedText}
+            bg={colors.selected}
+            attributes={TextAttributes.BOLD}
+          >
+            {`← ${backLabel}`}
+          </Text>
         </Box>
         {detailTitle ? (
           <>

package/src/components/ui/table-layout.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from "bun:test";
+import {
+  buildTableGridTemplateColumns,
+  getTableWidth,
+  hasMeaningfulTableHorizontalOverflow,
+} from "./table-layout";
+
+describe("table layout", () => {
+  test("detects only meaningful horizontal table overflow", () => {
+    const tableWidth = getTableWidth([
+      { width: 12 },
+      { width: 8 },
+    ]);
+
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, 0)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 1)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 2)).toBe(true);
+  });
+
+  test("keeps non-flex web table columns fixed", () => {
+    const template = buildTableGridTemplateColumns([
+      { width: 4, align: "right" },
+      { width: 40, flexGrow: 1 },
+      { width: 24 },
+      { width: 5, align: "right" },
+    ]);
+
+    expect(template).toBe(
+      "minmax(4ch, 4ch) minmax(14ch, 40fr) minmax(8ch, 24ch) minmax(5ch, 5ch)",
+    );
+  });
+
+  test("keeps proportional web table columns when no column is flexible", () => {
+    const template = buildTableGridTemplateColumns([
+      { width: 12 },
+      { width: 8, align: "right" },
+    ]);
+
+    expect(template).toBe("minmax(8ch, 12fr) minmax(8ch, 8fr)");
+  });
+});

package/src/components/ui/table-layout.ts

@@ -1,15 +1,22 @@
 import { useCallback, useEffect, useState, type RefObject } from "react";
 import type { ScrollBoxRenderable } from "../../ui";
 
-interface TableWidthColumn {
+export interface TableWidthColumn {
   width: number;
   flexGrow?: number;
+  align?: string;
 }
 
+const TRAILING_COLUMN_GUTTER_WIDTH = 1;
+
 export function getTableWidth(columns: readonly TableWidthColumn[]): number {
   return columns.reduce((sum, column) => sum + column.width + 1, 2);
 }
 
+export function hasMeaningfulTableHorizontalOverflow(tableWidth: number, viewportWidth: number): boolean {
+  return viewportWidth > 0 && tableWidth - viewportWidth > TRAILING_COLUMN_GUTTER_WIDTH;
+}
+
 export function expandTableColumns<C extends TableWidthColumn>(
   columns: readonly C[],
   targetWidth: number,
@@ -26,6 +33,43 @@ export function expandTableColumns<C extends TableWidthColumn>(
   });
 }
 
+function normalizedColumnWidth(column: TableWidthColumn): number {
+  return Math.max(1, Math.floor(column.width));
+}
+
+function columnMinCh(column: TableWidthColumn): number {
+  const width = normalizedColumnWidth(column);
+  if ((column.flexGrow ?? 0) > 0) {
+    return Math.max(8, Math.min(18, Math.floor(width * 0.35)));
+  }
+  if (column.align === "right") {
+    return Math.max(3, Math.min(width, 8));
+  }
+  if (width >= 16) {
+    return Math.max(8, Math.min(16, Math.floor(width * 0.35)));
+  }
+  return Math.max(1, Math.min(width, 8));
+}
+
+function columnFlexWeight(column: TableWidthColumn): number {
+  const flexGrow = column.flexGrow ?? 0;
+  const baseWeight = normalizedColumnWidth(column);
+  return flexGrow > 0 ? baseWeight * Math.max(1, flexGrow) : baseWeight;
+}
+
+export function buildTableGridTemplateColumns(columns: readonly TableWidthColumn[]): string {
+  const hasFlexColumn = columns.some((column) => (column.flexGrow ?? 0) > 0);
+  return columns
+    .map((column) => {
+      const width = normalizedColumnWidth(column);
+      if (!hasFlexColumn || (column.flexGrow ?? 0) > 0) {
+        return `minmax(${columnMinCh(column)}ch, ${columnFlexWeight(column)}fr)`;
+      }
+      return `minmax(${columnMinCh(column)}ch, ${width}ch)`;
+    })
+    .join(" ");
+}
+
 export function useMeasuredTableContentWidth(
   tableWidth: number,
   headerScrollRef: RefObject<ScrollBoxRenderable | null> | undefined,
@@ -34,9 +78,9 @@ export function useMeasuredTableContentWidth(
   const [viewportWidth, setViewportWidth] = useState(0);
 
   const measureContentWidth = useCallback(() => {
-    const nextWidth = scrollRef?.current?.viewport?.width
-      ?? headerScrollRef?.current?.viewport?.width
-      ?? 0;
+    const bodyWidth = scrollRef?.current?.viewport?.width || scrollRef?.current?.width || 0;
+    const headerWidth = headerScrollRef?.current?.viewport?.width || headerScrollRef?.current?.width || 0;
+    const nextWidth = bodyWidth || headerWidth;
     setViewportWidth((current) => current === nextWidth ? current : nextWidth);
   }, [headerScrollRef, scrollRef]);
   const scheduleContentWidthMeasure = useCallback(() => {
@@ -48,6 +92,7 @@ export function useMeasuredTableContentWidth(
 
   return {
     contentWidth: Math.max(tableWidth, viewportWidth),
+    viewportWidth,
     measureContentWidth: scheduleContentWidthMeasure,
   };
 }

package/src/components/ui/tabs.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useShortcut } from "../../react/input";
 import { Box, ScrollBox, Text, useUiHost } from "../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
@@ -21,6 +22,8 @@ export interface TabsProps {
   closeMode?: "active" | "always";
   addLabel?: string;
   onAdd?: () => void;
+  focused?: boolean;
+  keyboardNavigation?: boolean;
 }
 
 const WHEEL_DELTA_PER_CELL = 8;
@@ -34,6 +37,8 @@ export function Tabs({
   closeMode = "always",
   addLabel = "+",
   onAdd,
+  focused = false,
+  keyboardNavigation = true,
 }: TabsProps) {
   const ui = useUiHost();
   const NativeTabs = ui.Tabs;
@@ -51,6 +56,34 @@ export function Tabs({
     closeFg: colors.textMuted,
     addFg: colors.textMuted,
   };
+  const selectAdjacentTab = useCallback((direction: -1 | 1) => {
+    const enabledTabs = tabs.filter((tab) => !tab.disabled);
+    if (enabledTabs.length === 0) return;
+
+    const activeIndex = enabledTabs.findIndex((tab) => tab.value === activeValue);
+    const nextIndex = activeIndex >= 0
+      ? Math.max(0, Math.min(activeIndex + direction, enabledTabs.length - 1))
+      : direction > 0 ? 0 : enabledTabs.length - 1;
+    const nextTab = enabledTabs[nextIndex];
+    if (!nextTab || nextTab.value === activeValue) return;
+    onSelect(nextTab.value);
+  }, [activeValue, onSelect, tabs]);
+
+  useShortcut((event) => {
+    if (event.ctrl || event.meta || event.alt || event.targetEditable) return;
+
+    if (event.name === "h" || event.name === "left") {
+      event.preventDefault();
+      event.stopPropagation();
+      selectAdjacentTab(-1);
+      return;
+    }
+    if (event.name === "l" || event.name === "right") {
+      event.preventDefault();
+      event.stopPropagation();
+      selectAdjacentTab(1);
+    }
+  }, { enabled: focused && keyboardNavigation });
 
   if (NativeTabs) {
     return (