gloomberb 0.2.0 → 0.3.1

package/src/components/ui/fields.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useRef, useState, type RefObject } from "react";
+import type { InputRenderable } from "@opentui/core";
+import { colors } from "../../theme/colors";
+
+export interface TextFieldProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  focused?: boolean;
+  width?: number;
+  inputRef?: RefObject<InputRenderable | null>;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  hint?: string;
+  type?: "text" | "password";
+  backgroundColor?: string;
+  textColor?: string;
+  placeholderColor?: string;
+  onMouseDown?: () => void;
+}
+
+const PASSWORD_MASK_CHAR = "*";
+
+function maskPassword(value: string): string {
+  return PASSWORD_MASK_CHAR.repeat(value.length);
+}
+
+export function TextField({
+  label,
+  value,
+  placeholder,
+  focused,
+  width,
+  inputRef,
+  onChange,
+  onSubmit,
+  hint,
+  type = "text",
+  backgroundColor = colors.bg,
+  textColor = colors.text,
+  placeholderColor = colors.textDim,
+  onMouseDown,
+}: TextFieldProps) {
+  const localInputRef = useRef<InputRenderable>(null);
+  const resolvedInputRef = inputRef ?? localInputRef;
+  const currentValueRef = useRef(value ?? "");
+  const [cursorOffset, setCursorOffset] = useState((value ?? "").length);
+  const isPassword = type === "password";
+  const currentValue = value ?? "";
+  const maskedValue = maskPassword(currentValue);
+  const maskedDisplay = maskedValue.length > 0 ? maskedValue : (placeholder ?? "");
+  const maskedTextColor = maskedValue.length > 0 ? textColor : placeholderColor;
+
+  useEffect(() => {
+    currentValueRef.current = currentValue;
+    setCursorOffset(resolvedInputRef.current?.cursorOffset ?? currentValue.length);
+  }, [currentValue, resolvedInputRef]);
+
+  const syncCursorOffset = (fallbackValue = currentValueRef.current) => {
+    setCursorOffset(resolvedInputRef.current?.cursorOffset ?? fallbackValue.length);
+  };
+
+  const maskedCursorOffset = currentValue.length > 0
+    ? Math.max(0, Math.min(cursorOffset, currentValue.length))
+    : 0;
+  const maskedBefore = maskedDisplay.slice(0, maskedCursorOffset);
+  const maskedCursorChar = maskedDisplay[maskedCursorOffset] ?? " ";
+  const maskedAfter = maskedDisplay.slice(maskedCursorOffset + (maskedCursorOffset < maskedDisplay.length ? 1 : 0));
+
+  return (
+    <box flexDirection="column">
+      {label && (
+        <box height={1}>
+          <text fg={placeholderColor}>{label}</text>
+        </box>
+      )}
+      <box height={1} onMouseDown={() => {
+        onMouseDown?.();
+        resolvedInputRef.current?.focus?.();
+      }}>
+        <input
+          ref={resolvedInputRef}
+          width={width}
+          value={value}
+          placeholder={isPassword ? "" : placeholder}
+          focused={focused}
+          textColor={isPassword ? backgroundColor : textColor}
+          placeholderColor={placeholderColor}
+          backgroundColor={backgroundColor}
+          selectionBg={isPassword ? backgroundColor : undefined}
+          selectionFg={isPassword ? backgroundColor : undefined}
+          showCursor={!isPassword}
+          onCursorChange={() => syncCursorOffset()}
+          onInput={(nextValue) => {
+            currentValueRef.current = nextValue;
+            syncCursorOffset(nextValue);
+            onChange?.(nextValue);
+          }}
+          onChange={(nextValue) => {
+            currentValueRef.current = nextValue;
+            syncCursorOffset(nextValue);
+            onChange?.(nextValue);
+          }}
+          onSubmit={() => onSubmit?.(currentValueRef.current)}
+        />
+        {isPassword && (
+          <box
+            position="absolute"
+            left={0}
+            top={0}
+            height={1}
+            width={width}
+            onMouseDown={() => {
+              onMouseDown?.();
+              resolvedInputRef.current?.focus?.();
+            }}
+          >
+            <text fg={maskedTextColor}>
+              {maskedBefore}
+              {focused && (
+                <span bg={maskedTextColor} fg={backgroundColor}>{maskedCursorChar}</span>
+              )}
+              {focused ? maskedAfter : maskedDisplay.slice(maskedBefore.length)}
+            </text>
+          </box>
+        )}
+      </box>
+      {hint && (
+        <box height={1}>
+          <text fg={colors.textMuted}>{hint}</text>
+        </box>
+      )}
+    </box>
+  );
+}
+
+export interface SearchFieldProps extends Omit<TextFieldProps, "label"> {
+  label?: string;
+}
+
+export function SearchField({
+  label = "Search",
+  hint = "Type to filter",
+  ...props
+}: SearchFieldProps) {
+  return <TextField label={label} hint={hint} placeholder={props.placeholder ?? "Search..."} {...props} />;
+}
+
+function sanitizeNumberInput(value: string, allowDecimal: boolean, allowNegative: boolean): string {
+  const allowed = allowDecimal ? /[0-9.-]/g : /[0-9-]/g;
+  let next = (value.match(allowed) ?? []).join("");
+
+  if (!allowNegative) next = next.replace(/-/g, "");
+  if (allowNegative) next = next.replace(/(?!^)-/g, "");
+
+  if (allowDecimal) {
+    const [whole, ...rest] = next.split(".");
+    next = rest.length === 0 ? next : `${whole}.${rest.join("")}`;
+  } else {
+    next = next.replace(/\./g, "");
+  }
+
+  return next;
+}
+
+export interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "onSubmit"> {
+  allowDecimal?: boolean;
+  allowNegative?: boolean;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+}
+
+export function NumberField({
+  allowDecimal = true,
+  allowNegative = false,
+  onChange,
+  onSubmit,
+  ...props
+}: NumberFieldProps) {
+  return (
+    <TextField
+      {...props}
+      onChange={(nextValue) => onChange?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
+      onSubmit={(nextValue) => onSubmit?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
+    />
+  );
+}

package/src/components/ui/frame.tsx

@@ -0,0 +1,73 @@
+import { TextAttributes } from "@opentui/core";
+import type { ReactNode } from "react";
+import { colors } from "../../theme/colors";
+
+export interface SectionProps {
+  title?: string;
+  children: ReactNode;
+}
+
+export function Section({ title, children }: SectionProps) {
+  return (
+    <box flexDirection="column">
+      {title && (
+        <>
+          <box height={1}>
+            <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title}</text>
+          </box>
+          <box height={1} />
+        </>
+      )}
+      {children}
+    </box>
+  );
+}
+
+export interface FieldRowProps {
+  label: string;
+  value: string;
+  valueColor?: string;
+  valueAttributes?: number;
+}
+
+export function FieldRow({
+  label,
+  value,
+  valueColor,
+  valueAttributes = 0,
+}: FieldRowProps) {
+  return (
+    <box flexDirection="row" height={1}>
+      <box width={16}>
+        <text fg={colors.textDim}>{label}</text>
+      </box>
+      <text fg={valueColor ?? colors.text} attributes={valueAttributes}>{value}</text>
+    </box>
+  );
+}
+
+export interface DialogFrameProps {
+  title: string;
+  children: ReactNode;
+  footer?: string;
+}
+
+export function DialogFrame({ title, children, footer }: DialogFrameProps) {
+  return (
+    <box flexDirection="column">
+      <box height={1}>
+        <text fg={colors.text} attributes={TextAttributes.BOLD}>{title}</text>
+      </box>
+      <box height={1} />
+      {children}
+      {footer && (
+        <>
+          <box height={1} />
+          <box height={1}>
+            <text fg={colors.textMuted}>{footer}</text>
+          </box>
+        </>
+      )}
+    </box>
+  );
+}

package/src/components/ui/index.ts

@@ -0,0 +1,53 @@
+export { ListView } from "./list-view";
+export type { ListViewItem, ListViewProps, ListRowState } from "./list-view";
+
+export { DataTable } from "./data-table";
+export type {
+  DataTableCell,
+  DataTableColumn,
+  DataTableProps,
+} from "./data-table";
+
+export { Tabs } from "./tabs";
+export type { TabItem, TabsProps } from "./tabs";
+
+export { Button, IconButton } from "./button";
+export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button";
+
+export { Checkbox, Switch, RadioGroup, SegmentedControl } from "./toggle";
+export type {
+  CheckboxProps,
+  SwitchProps,
+  RadioGroupProps,
+  RadioOption,
+  SegmentedControlProps,
+  SegmentedControlOption,
+} from "./toggle";
+
+export { TextField, SearchField, NumberField } from "./fields";
+export type {
+  TextFieldProps,
+  SearchFieldProps,
+  NumberFieldProps,
+} from "./fields";
+
+export { StatusBadge, Notice, EmptyState } from "./status";
+export type {
+  StatusBadgeProps,
+  NoticeProps,
+  EmptyStateProps,
+  StatusTone,
+} from "./status";
+
+export { Section, FieldRow, DialogFrame } from "./frame";
+export type { SectionProps, FieldRowProps, DialogFrameProps } from "./frame";
+
+export { ExternalLink, openUrl } from "./external-link";
+
+export { Spinner, ProgressBar, SkeletonRow, LoadingBlock } from "./loading";
+export type {
+  SpinnerProps,
+  ProgressBarProps,
+  SkeletonRowProps,
+  LoadingBlockProps,
+} from "./loading";

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

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { colors, hoverBg } from "../../theme/colors";
+
+export interface ListViewItem {
+  id: string;
+  label: string;
+  description?: string;
+  detail?: string;
+  disabled?: boolean;
+}
+
+export interface ListRowState {
+  selected: boolean;
+  hovered: boolean;
+  disabled: boolean;
+}
+
+export interface ListViewProps {
+  items: ListViewItem[];
+  selectedIndex: number;
+  scrollIndex?: number;
+  onSelect?: (index: number) => void;
+  onActivate?: (item: ListViewItem, index: number) => void;
+  renderRow?: (item: ListViewItem, state: ListRowState, index: number) => ReactNode;
+  getRowBackgroundColor?: (item: ListViewItem, state: ListRowState, index: number) => string | undefined;
+  showSelectedDescription?: boolean;
+  emptyMessage?: string;
+  bgColor?: string;
+  selectedBgColor?: string;
+  hoverBgColor?: string;
+  height?: number;
+  flexGrow?: number;
+  scrollable?: boolean;
+  autoScrollToIndex?: boolean;
+}
+
+function DefaultRow({
+  item,
+  selected,
+}: {
+  item: ListViewItem;
+  selected: boolean;
+}) {
+  return (
+    <box flexDirection="row" justifyContent="space-between" width="100%">
+      <box flexDirection="row">
+        <text fg={selected ? colors.selectedText : colors.textDim}>
+          {selected ? "\u25b8 " : "  "}
+        </text>
+        <text
+          fg={selected ? colors.text : colors.textDim}
+          attributes={selected ? TextAttributes.BOLD : 0}
+        >
+          {item.label}
+        </text>
+      </box>
+      {item.detail && (
+        <text fg={selected ? colors.textMuted : colors.textMuted}>{item.detail}</text>
+      )}
+    </box>
+  );
+}
+
+export function ListView({
+  items,
+  selectedIndex,
+  scrollIndex,
+  onSelect,
+  onActivate,
+  renderRow,
+  getRowBackgroundColor,
+  showSelectedDescription = false,
+  emptyMessage = "Nothing to show.",
+  bgColor,
+  selectedBgColor,
+  hoverBgColor,
+  height,
+  flexGrow,
+  scrollable = false,
+  autoScrollToIndex = true,
+}: ListViewProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const baseBg = bgColor ?? colors.bg;
+  const activeBg = selectedBgColor ?? colors.selected;
+  const rowHoverBg = hoverBgColor ?? hoverBg();
+  const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
+  const activeScrollIndex = scrollIndex ?? selectedIndex;
+
+  useEffect(() => {
+    if (!scrollable || !autoScrollToIndex || activeScrollIndex < 0) return;
+    const sb = scrollRef.current;
+    if (!sb) return;
+    const safeIndex = Math.min(activeScrollIndex, items.length - 1);
+    const viewportH = Math.max(sb.viewport.height, 1);
+    if (safeIndex < sb.scrollTop) {
+      sb.scrollTo(safeIndex);
+    } else if (safeIndex >= sb.scrollTop + viewportH) {
+      sb.scrollTo(safeIndex - viewportH + 1);
+    }
+  }, [activeScrollIndex, autoScrollToIndex, items.length, scrollable]);
+
+  useEffect(() => {
+    if (!scrollable) return;
+    const sb = scrollRef.current;
+    if (!sb) return;
+    sb.verticalScrollBar.visible = items.length > sb.viewport.height;
+  }, [items.length, height, flexGrow, scrollable]);
+
+  if (items.length === 0) {
+    return (
+      <box height={1}>
+        <text fg={colors.textDim}>{emptyMessage}</text>
+      </box>
+    );
+  }
+
+  const rows = items.map((item, index) => {
+    const selected = index === selectedIndex;
+    const hovered = index === hoveredIndex && !selected;
+    const disabled = item.disabled === true;
+    const state = { selected, hovered, disabled };
+    const rowBg = getRowBackgroundColor?.(item, state, index)
+      ?? (selected ? activeBg : hovered ? rowHoverBg : baseBg);
+
+    return (
+      <box
+        key={item.id}
+        height={1}
+        backgroundColor={rowBg}
+        onMouseMove={() => {
+          if (!disabled) setHoveredIndex(index);
+        }}
+        onMouseDown={() => {
+          if (disabled) return;
+          onSelect?.(index);
+          onActivate?.(item, index);
+        }}
+      >
+        {renderRow
+          ? renderRow(item, state, index)
+          : <DefaultRow item={item} selected={selected} />}
+      </box>
+    );
+  });
+
+  return (
+    <box flexDirection="column" height={height} flexGrow={flexGrow}>
+      {scrollable ? (
+        <scrollbox ref={scrollRef} height={height} flexGrow={flexGrow} scrollY focusable={false}>
+          {rows}
+        </scrollbox>
+      ) : rows}
+
+      {showSelectedDescription && selectedItem?.description && (
+        <>
+          <box height={1} />
+          <box>
+            <text fg={colors.textDim}>{"    "}{selectedItem.description}</text>
+          </box>
+        </>
+      )}
+    </box>
+  );
+}

package/src/components/ui/loading.tsx

@@ -0,0 +1,70 @@
+import "opentui-spinner/react";
+import { colors } from "../../theme/colors";
+
+export interface SpinnerProps {
+  label?: string;
+}
+
+export function Spinner({ label }: SpinnerProps) {
+  return (
+    <box flexDirection="row" gap={1}>
+      <spinner name="dots" color={colors.textDim} />
+      {label && <text fg={colors.textDim}>{label}</text>}
+    </box>
+  );
+}
+
+export interface ProgressBarProps {
+  value: number;
+  max?: number;
+  width?: number;
+  label?: string;
+}
+
+export function ProgressBar({
+  value,
+  max = 1,
+  width = 20,
+  label,
+}: ProgressBarProps) {
+  const ratio = Math.max(0, Math.min(1, max === 0 ? 0 : value / max));
+  const filled = Math.round(ratio * width);
+  const bar = `${"\u2588".repeat(filled)}${"\u2591".repeat(Math.max(0, width - filled))}`;
+
+  return (
+    <box flexDirection="column">
+      <box height={1}>
+        <text fg={colors.borderFocused}>{bar}</text>
+        {label && <text fg={colors.textDim}>{` ${label}`}</text>}
+      </box>
+    </box>
+  );
+}
+
+export interface SkeletonRowProps {
+  width?: number;
+}
+
+export function SkeletonRow({ width = 24 }: SkeletonRowProps) {
+  return (
+    <box height={1}>
+      <text fg={colors.textMuted}>{"\u2592".repeat(width)}</text>
+    </box>
+  );
+}
+
+export interface LoadingBlockProps {
+  label?: string;
+  lines?: number;
+}
+
+export function LoadingBlock({ label, lines = 2 }: LoadingBlockProps) {
+  return (
+    <box flexDirection="column" gap={1}>
+      <Spinner label={label} />
+      {Array.from({ length: lines }, (_, index) => (
+        <SkeletonRow key={index} width={24 - index * 3} />
+      ))}
+    </box>
+  );
+}

package/src/components/ui/status.tsx

@@ -0,0 +1,83 @@
+import { TextAttributes } from "@opentui/core";
+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;
+  hint?: string;
+}
+
+export function EmptyState({ title, message, hint }: EmptyStateProps) {
+  return (
+    <box flexDirection="column">
+      <box height={1}>
+        <text fg={colors.textDim}>{title}</text>
+      </box>
+      {message && (
+        <box height={1}>
+          <text fg={colors.textMuted}>{message}</text>
+        </box>
+      )}
+      {hint && (
+        <box height={1}>
+          <text fg={colors.textMuted}>{hint}</text>
+        </box>
+      )}
+    </box>
+  );
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,47 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../theme/colors";
+
+export interface TabItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  activeValue: string;
+  onSelect: (value: string) => void;
+  compact?: boolean;
+}
+
+export function Tabs({ tabs, activeValue, onSelect, compact = false }: TabsProps) {
+  return (
+    <box flexDirection="row" height={compact ? 1 : 2}>
+      {tabs.map((tab) => {
+        const active = tab.value === activeValue;
+        const tabWidth = tab.label.length + 2;
+
+        return (
+          <box
+            key={tab.value}
+            width={tabWidth + 2}
+            flexDirection="column"
+            alignItems="center"
+            onMouseDown={(event) => {
+              event.preventDefault();
+              if (!tab.disabled) onSelect(tab.value);
+            }}
+          >
+            <text
+              fg={tab.disabled ? colors.textMuted : active ? colors.text : colors.textDim}
+              attributes={active ? TextAttributes.BOLD : 0}
+            >
+              {tab.label}
+            </text>
+            {!compact && <text fg={active ? colors.borderFocused : colors.bg}>{"▔".repeat(tabWidth)}</text>}
+          </box>
+        );
+      })}
+    </box>
+  );
+}