gloomberb 0.5.0 → 0.6.0

package/src/components/ui/native-select.tsx

@@ -0,0 +1,120 @@
+/// <reference lib="dom" />
+
+import { type CSSProperties } from "react";
+import { Box } from "../../ui";
+import { colors } from "../../theme/colors";
+
+export type NativeSelectElement = HTMLSelectElement & { showPicker?: () => void };
+
+export interface NativeSelectOption {
+  label: string;
+  value: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface NativeSelectProps {
+  value: string;
+  options: NativeSelectOption[];
+  width?: number | string;
+  includeUnsetOption?: boolean;
+  selectRef?: (element: NativeSelectElement | null) => void;
+  onFocus?: () => void;
+  onChange: (value: string) => void;
+}
+
+export function openNativeSelect(element: NativeSelectElement | null | undefined) {
+  if (!element) return;
+  element.focus();
+  try {
+    if (element.showPicker) {
+      element.showPicker();
+    } else {
+      element.click();
+    }
+  } catch {
+    element.click();
+  }
+}
+
+export function NativeSelect({
+  value,
+  options,
+  width = 184,
+  includeUnsetOption = false,
+  selectRef,
+  onFocus,
+  onChange,
+}: NativeSelectProps) {
+  const hasCurrentValue = options.some((option) => option.value === value);
+  const style: CSSProperties = {
+    width,
+    height: 28,
+    color: colors.text,
+    backgroundColor: "rgba(255, 255, 255, 0.06)",
+    border: `1px solid ${colors.border}`,
+    borderRadius: 6,
+    padding: "0 8px",
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05)",
+    cursor: "pointer",
+    font: "inherit",
+    letterSpacing: 0,
+    outline: "none",
+    appearance: "auto",
+    WebkitAppearance: "menulist",
+  };
+
+  return (
+    <Box
+      height="28px"
+      flexDirection="row"
+      alignItems="center"
+      onMouseDown={(event: any) => {
+        event.stopPropagation?.();
+      }}
+      onMouseUp={(event: any) => {
+        event.stopPropagation?.();
+      }}
+    >
+      <select
+        ref={selectRef}
+        value={value}
+        data-gloom-interactive="true"
+        onFocus={onFocus}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+        onKeyDown={(event) => {
+          if (
+            event.key === "ArrowUp"
+            || event.key === "ArrowDown"
+            || event.key === "ArrowLeft"
+            || event.key === "ArrowRight"
+            || event.key === "Enter"
+            || event.key === " "
+            || event.key === "Home"
+            || event.key === "End"
+            || event.key === "PageUp"
+            || event.key === "PageDown"
+          ) {
+            event.stopPropagation();
+          }
+        }}
+        onChange={(event) => {
+          onChange(event.currentTarget.value);
+        }}
+        style={style}
+      >
+        {includeUnsetOption && !hasCurrentValue && <option value="">Unset</option>}
+        {options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </Box>
+  );
+}

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

@@ -1,14 +1,16 @@
-import { useKeyboard } from "@opentui/react";
-import type { ReactNode } from "react";
+import { Box, Text, TextAttributes, useUiHost } from "../../ui";
+import { useShortcut } from "../../react/input";
+import { type ComponentType, type ReactNode } from "react";
 import { colors } from "../../theme/colors";
-import { isBackNavigationKey } from "../../utils/back-navigation";
+import { isDetailBackNavigationKey } from "../../utils/back-navigation";
 
-interface PageStackViewProps {
+export interface PageStackViewProps {
   focused: boolean;
   detailOpen: boolean;
   onBack: () => void;
   rootContent: ReactNode;
   detailContent: ReactNode;
+  detailTitle?: string;
   backLabel?: string;
   backHint?: string;
 }
@@ -19,11 +21,28 @@ export function PageStackView({
   onBack,
   rootContent,
   detailContent,
+  detailTitle,
   backLabel = "Back",
   backHint,
 }: PageStackViewProps) {
-  useKeyboard((event) => {
-    if (!focused || !detailOpen || !isBackNavigationKey(event)) return;
+  const HostPageStackView = useUiHost().PageStackView as ComponentType<PageStackViewProps> | undefined;
+  if (HostPageStackView) {
+    return (
+      <HostPageStackView
+        focused={focused}
+        detailOpen={detailOpen}
+        onBack={onBack}
+        rootContent={rootContent}
+        detailContent={detailContent}
+        detailTitle={detailTitle}
+        backLabel={backLabel}
+        backHint={backHint}
+      />
+    );
+  }
+
+  useShortcut((event) => {
+    if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
     event.stopPropagation?.();
     event.preventDefault?.();
     onBack();
@@ -31,30 +50,41 @@ export function PageStackView({
 
   if (!detailOpen) {
     return (
-      <box flexDirection="column" flexGrow={1}>
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
         {rootContent}
-      </box>
+      </Box>
     );
   }
 
   return (
-    <box flexDirection="column" flexGrow={1}>
-      <box height={1} flexDirection="row">
-        <box
+    <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box height={1} flexDirection="row">
+        <Box
           onMouseDown={(event) => {
             event.preventDefault?.();
             event.stopPropagation?.();
             onBack();
           }}
         >
-          <text fg={colors.textBright}>{`<- ${backLabel}`}</text>
-        </box>
-        <box flexGrow={1} />
-        {backHint ? <text fg={colors.textMuted}>{backHint}</text> : null}
-      </box>
-      <box flexDirection="column" flexGrow={1}>
+          <Text fg={colors.textBright}>{`← ${backLabel}`}</Text>
+        </Box>
+        {detailTitle ? (
+          <>
+            <Box width={1} flexShrink={0} />
+            <Box flexGrow={1} flexShrink={1} minWidth={0} overflow="hidden">
+              <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+                {detailTitle}
+              </Text>
+            </Box>
+          </>
+        ) : (
+          <Box flexGrow={1} />
+        )}
+        {backHint ? <Text fg={colors.textMuted}>{backHint}</Text> : null}
+      </Box>
+      <Box flexDirection="column" flexGrow={1} overflow="hidden">
         {detailContent}
-      </box>
-    </box>
+      </Box>
+    </Box>
   );
 }

package/src/components/ui/remote-image.tsx

@@ -0,0 +1,75 @@
+import { Box, ImageSurface, Text, useUiHost } from "../../ui";
+import { colors } from "../../theme/colors";
+import { ExternalLinkText } from "./external-link";
+import { normalizedHttpUrl } from "../../utils/url";
+
+export interface RemoteImageProps {
+  src: string;
+  alt?: string;
+  width: number;
+  height?: number;
+  label?: string;
+}
+
+function truncate(value: string, width: number): string {
+  if (width <= 0) return "";
+  if (value.length <= width) return value;
+  if (width <= 3) return value.slice(0, width);
+  return `${value.slice(0, width - 3)}...`;
+}
+
+export function RemoteImage({
+  src,
+  alt = "Image",
+  width,
+  height = 12,
+  label = "image",
+}: RemoteImageProps) {
+  const ui = useUiHost();
+  const resolvedWidth = Math.max(12, width);
+  const imageUrl = normalizedHttpUrl(src);
+  if (!imageUrl) return null;
+
+  if (ui.kind === "desktop-web") {
+    return (
+      <ImageSurface
+        src={imageUrl}
+        alt={alt}
+        width={resolvedWidth}
+        height={Math.max(4, height)}
+        border
+        borderColor={colors.border}
+        backgroundColor={colors.panel}
+        objectFit="contain"
+      >
+        <Box paddingX={1} paddingY={1} flexDirection="column" gap={1}>
+          <Text fg={colors.textDim}>{label}</Text>
+          <ExternalLinkText
+            url={imageUrl}
+            label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
+            color={colors.textBright}
+          />
+        </Box>
+      </ImageSurface>
+    );
+  }
+
+  return (
+    <Box
+      width={resolvedWidth}
+      minHeight={2}
+      border
+      borderColor={colors.border}
+      backgroundColor={colors.panel}
+      paddingX={1}
+      flexDirection="column"
+    >
+      <Text fg={colors.textDim}>{label}</Text>
+      <ExternalLinkText
+        url={imageUrl}
+        label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
+        color={colors.textBright}
+      />
+    </Box>
+  );
+}

package/src/components/ui/row-value-cache.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test } from "bun:test";
+import { createRowValueCache } from "./row-value-cache";
+
+describe("createRowValueCache", () => {
+  test("evicts least recently used entries", () => {
+    const cache = createRowValueCache<string, number>(2);
+    let calls = 0;
+
+    cache.get("AAPL", "v1", () => ++calls);
+    cache.get("MSFT", "v1", () => ++calls);
+    cache.get("AAPL", "v1", () => ++calls);
+    cache.get("NVDA", "v1", () => ++calls);
+    const recomputed = cache.get("MSFT", "v1", () => ++calls);
+
+    expect(recomputed).toBe(4);
+  });
+});

package/src/components/ui/row-value-cache.ts

@@ -0,0 +1,41 @@
+export interface RowValueCache<K, V> {
+  get(key: K, version: string, compute: () => V): V;
+  clear(): void;
+}
+
+interface CacheEntry<V> {
+  version: string;
+  value: V;
+}
+
+export function createRowValueCache<K, V>(maxEntries = 1000): RowValueCache<K, V> {
+  const entries = new Map<K, CacheEntry<V>>();
+  const safeMaxEntries = Math.max(1, maxEntries);
+
+  const touch = (key: K, entry: CacheEntry<V>) => {
+    entries.delete(key);
+    entries.set(key, entry);
+  };
+
+  return {
+    get(key: K, version: string, compute: () => V): V {
+      const cached = entries.get(key);
+      if (cached && cached.version === version) {
+        touch(key, cached);
+        return cached.value;
+      }
+
+      const entry = { version, value: compute() };
+      touch(key, entry);
+      while (entries.size > safeMaxEntries) {
+        const firstKey = entries.keys().next().value as K | undefined;
+        if (firstKey === undefined) break;
+        entries.delete(firstKey);
+      }
+      return entry.value;
+    },
+    clear(): void {
+      entries.clear();
+    },
+  };
+}

package/src/components/ui/shortcut-hint.tsx

@@ -0,0 +1,55 @@
+import { StyledText, Text, TextAttributes } from "../../ui";
+import { colors } from "../../theme/colors";
+
+export type ShortcutHintMouseEvent = {
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
+};
+
+export interface ShortcutHintProps {
+  hotkey: string;
+  label: string;
+  prefix?: string;
+  disabled?: boolean;
+  dataGloomRole?: string;
+  onPress?: (event?: ShortcutHintMouseEvent) => void;
+}
+
+export function getShortcutHintWidth(hotkey: string, label: string, prefix = ""): number {
+  return prefix.length + hotkey.length + label.length + 2;
+}
+
+function stopMouseEvent(event?: ShortcutHintMouseEvent) {
+  event?.stopPropagation?.();
+  event?.preventDefault?.();
+}
+
+export function ShortcutHint({
+  hotkey,
+  label,
+  prefix = "",
+  disabled = false,
+  dataGloomRole,
+  onPress,
+}: ShortcutHintProps) {
+  const interactive = !!onPress && !disabled;
+  const keyColor = disabled ? colors.textMuted : colors.textBright;
+  const labelColor = disabled ? colors.textMuted : colors.textDim;
+  const keyText = `[${hotkey}]`;
+
+  return (
+    <Text
+      width={getShortcutHintWidth(hotkey, label, prefix)}
+      content={new StyledText([
+        ...(prefix ? [{ text: prefix, fg: labelColor }] : []),
+        { text: keyText, fg: keyColor },
+        { text: label, fg: labelColor },
+      ])}
+      fg={disabled ? colors.textMuted : colors.textDim}
+      attributes={interactive ? TextAttributes.BOLD : 0}
+      onMouseDown={interactive ? stopMouseEvent : undefined}
+      onMouseUp={interactive ? onPress : undefined}
+      {...(dataGloomRole ? { "data-gloom-role": dataGloomRole } : {})}
+    />
+  );
+}

package/src/components/ui/status.tsx

@@ -1,61 +1,6 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text } from "../../ui";
 import { colors } from "../../theme/colors";
 
-export type StatusTone = "info" | "success" | "warning" | "danger" | "muted";
-
-function toneColors(tone: StatusTone) {
-  switch (tone) {
-    case "success":
-      return { fg: colors.positive, bg: colors.bg };
-    case "warning":
-      return { fg: "#f6c65b", bg: colors.bg };
-    case "danger":
-      return { fg: colors.negative, bg: colors.bg };
-    case "muted":
-      return { fg: colors.textMuted, bg: colors.bg };
-    case "info":
-    default:
-      return { fg: colors.textBright, bg: colors.bg };
-  }
-}
-
-export interface StatusBadgeProps {
-  label: string;
-  tone?: StatusTone;
-}
-
-export function StatusBadge({ label, tone = "info" }: StatusBadgeProps) {
-  const palette = toneColors(tone);
-  return (
-    <box backgroundColor={palette.bg}>
-      <text fg={palette.fg}>{` ${label} `}</text>
-    </box>
-  );
-}
-
-export interface NoticeProps {
-  title?: string;
-  message: string;
-  tone?: StatusTone;
-}
-
-export function Notice({ title, message, tone = "info" }: NoticeProps) {
-  const palette = toneColors(tone);
-
-  return (
-    <box flexDirection="column">
-      {title && (
-        <box height={1}>
-          <text fg={palette.fg} attributes={TextAttributes.BOLD}>{title}</text>
-        </box>
-      )}
-      <box height={1}>
-        <text fg={tone === "muted" ? colors.textDim : colors.text}>{message}</text>
-      </box>
-    </box>
-  );
-}
-
 export interface EmptyStateProps {
   title: string;
   message?: string;
@@ -64,20 +9,20 @@ export interface EmptyStateProps {
 
 export function EmptyState({ title, message, hint }: EmptyStateProps) {
   return (
-    <box flexDirection="column">
-      <box height={1}>
-        <text fg={colors.textDim}>{title}</text>
-      </box>
+    <Box flexDirection="column">
+      <Box height={1}>
+        <Text fg={colors.textDim}>{title}</Text>
+      </Box>
       {message && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{message}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{message}</Text>
+        </Box>
       )}
       {hint && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{hint}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{hint}</Text>
+        </Box>
       )}
-    </box>
+    </Box>
   );
 }

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

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState, type RefObject } from "react";
+import type { ScrollBoxRenderable } from "../../ui";
+
+interface TableWidthColumn {
+  width: number;
+  flexGrow?: number;
+}
+
+export function getTableWidth(columns: readonly TableWidthColumn[]): number {
+  return columns.reduce((sum, column) => sum + column.width + 1, 2);
+}
+
+export function expandTableColumns<C extends TableWidthColumn>(
+  columns: readonly C[],
+  targetWidth: number,
+): C[] {
+  const currentWidth = getTableWidth(columns);
+  const extraWidth = Math.floor(targetWidth) - currentWidth;
+  if (extraWidth <= 0) return [...columns];
+
+  const growIndex = columns.findIndex((column) => (column.flexGrow ?? 0) > 0);
+  if (growIndex < 0) return [...columns];
+
+  return columns.map((column, index) => {
+    return index === growIndex ? { ...column, width: column.width + extraWidth } : column;
+  });
+}
+
+export function useMeasuredTableContentWidth(
+  tableWidth: number,
+  headerScrollRef: RefObject<ScrollBoxRenderable | null> | undefined,
+  scrollRef: RefObject<ScrollBoxRenderable | null> | undefined,
+) {
+  const [viewportWidth, setViewportWidth] = useState(0);
+
+  const measureContentWidth = useCallback(() => {
+    const nextWidth = scrollRef?.current?.viewport?.width
+      ?? headerScrollRef?.current?.viewport?.width
+      ?? 0;
+    setViewportWidth((current) => current === nextWidth ? current : nextWidth);
+  }, [headerScrollRef, scrollRef]);
+  const scheduleContentWidthMeasure = useCallback(() => {
+    measureContentWidth();
+    queueMicrotask(measureContentWidth);
+  }, [measureContentWidth]);
+
+  useEffect(scheduleContentWidthMeasure);
+
+  return {
+    contentWidth: Math.max(tableWidth, viewportWidth),
+    measureContentWidth: scheduleContentWidthMeasure,
+  };
+}
+
+export function tableContentWidthProps(contentWidth: number) {
+  return {
+    width: contentWidth,
+  };
+}