gloomberb 0.5.1 → 0.6.0

package/src/components/ui/external-link.tsx

@@ -1,17 +1,27 @@
-import { TextAttributes } from "@opentui/core";
-import { spawn } from "child_process";
+import { Box, Text } from "../../ui";
+import { TextAttributes } from "../../ui";
 import { colors } from "../../theme/colors";
+import { linkContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../../ui";
 
 export function openUrl(url: string) {
   if (!url.trim()) return;
 
-  const child = process.platform === "darwin"
-    ? spawn("open", [url], { detached: true, stdio: "ignore" })
-    : process.platform === "win32"
-      ? spawn("cmd", ["/c", "start", "", url], { detached: true, stdio: "ignore" })
-      : spawn("xdg-open", [url], { detached: true, stdio: "ignore" });
+  const browserWindow = (globalThis as { window?: { open?: (url: string, target?: string, features?: string) => void } }).window;
+  if (typeof browserWindow?.open === "function") {
+    browserWindow.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
 
-  child.unref();
+  if (typeof Bun !== "undefined" && typeof Bun.spawn === "function") {
+    const platform = typeof process !== "undefined" ? process.platform : "linux";
+    const command = platform === "darwin"
+      ? ["open", url]
+      : platform === "win32"
+        ? ["cmd", "/c", "start", "", url]
+        : ["xdg-open", url];
+    const child = Bun.spawn(command, { stdio: ["ignore", "ignore", "ignore"] });
+    child.unref();
+  }
 }
 
 function handleOpen(
@@ -32,14 +42,43 @@ export function ExternalLinkText(
     onOpen?: (url: string) => void;
   },
 ) {
+  const rendererHost = useRendererHost();
+  const { showContextMenu } = useContextMenu();
+  const { nativeContextMenu } = useUiCapabilities();
+  const resolvedOpen = onOpen === openUrl
+    ? (nextUrl: string) => {
+      void rendererHost.openExternal(nextUrl);
+    }
+    : onOpen;
+  const openLinkContextMenu = (event: { preventDefault?: () => void; stopPropagation?: () => void }) => showContextMenu(
+    { kind: "link", url, label },
+    linkContextMenuItems({
+      url,
+      open: resolvedOpen,
+      copy: (text) => { void rendererHost.copyText(text); },
+    }),
+    event,
+  );
   return (
-    <text
+    <Text
       fg={color}
       attributes={TextAttributes.UNDERLINE}
-      onMouseDown={(event: any) => handleOpen(url, onOpen, event)}
+      data-gloom-context-menu-surface="true"
+      onMouseDown={(event: any) => {
+        if (event.button === 2) {
+          if (nativeContextMenu !== true) {
+            void openLinkContextMenu(event);
+          }
+          return;
+        }
+        handleOpen(url, resolvedOpen, event);
+      }}
+      onContextMenu={(event: any) => {
+        void openLinkContextMenu(event);
+      }}
     >
       {label ?? url}
-    </text>
+    </Text>
   );
 }
 
@@ -52,8 +91,8 @@ export function ExternalLink(
   },
 ) {
   return (
-    <box height={1}>
+    <Box height={1}>
       <ExternalLinkText url={url} label={label} color={color} onOpen={onOpen} />
-    </box>
+    </Box>
   );
 }

package/src/components/ui/fields.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState, type RefObject } from "react";
-import type { InputRenderable } from "@opentui/core";
+import { Box, Input, Span, Text, useUiHost } from "../../ui";
+import { useEffect, useRef, useState, type ComponentType, type RefObject } from "react";
+import { type InputRenderable } from "../../ui";
 import { colors } from "../../theme/colors";
 
 export interface TextFieldProps {
@@ -13,6 +14,7 @@ export interface TextFieldProps {
   onSubmit?: (value: string) => void;
   hint?: string;
   type?: "text" | "password";
+  variant?: "default" | "plain";
   backgroundColor?: string;
   textColor?: string;
   placeholderColor?: string;
@@ -36,11 +38,35 @@ export function TextField({
   onSubmit,
   hint,
   type = "text",
+  variant = "default",
   backgroundColor = colors.bg,
   textColor = colors.text,
   placeholderColor = colors.textDim,
   onMouseDown,
 }: TextFieldProps) {
+  const HostTextField = useUiHost().TextField as ComponentType<TextFieldProps> | undefined;
+  if (HostTextField) {
+    return (
+      <HostTextField
+        label={label}
+        value={value}
+        placeholder={placeholder}
+        focused={focused}
+        width={width}
+        inputRef={inputRef}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        hint={hint}
+        type={type}
+        variant={variant}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        placeholderColor={placeholderColor}
+        onMouseDown={onMouseDown}
+      />
+    );
+  }
+
   const localInputRef = useRef<InputRenderable>(null);
   const resolvedInputRef = inputRef ?? localInputRef;
   const currentValueRef = useRef(value ?? "");
@@ -68,17 +94,17 @@ export function TextField({
   const maskedAfter = maskedDisplay.slice(maskedCursorOffset + (maskedCursorOffset < maskedDisplay.length ? 1 : 0));
 
   return (
-    <box flexDirection="column">
+    <Box flexDirection="column">
       {label && (
-        <box height={1}>
-          <text fg={placeholderColor}>{label}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={placeholderColor}>{label}</Text>
+        </Box>
       )}
-      <box height={1} onMouseDown={() => {
+      <Box height={1} onMouseDown={() => {
         onMouseDown?.();
         resolvedInputRef.current?.focus?.();
       }}>
-        <input
+        <Input
           ref={resolvedInputRef}
           width={width}
           value={value}
@@ -105,7 +131,7 @@ export function TextField({
           onSubmit={() => onSubmit?.(currentValueRef.current)}
         />
         {isPassword && (
-          <box
+          <Box
             position="absolute"
             left={0}
             top={0}
@@ -116,37 +142,25 @@ export function TextField({
               resolvedInputRef.current?.focus?.();
             }}
           >
-            <text fg={maskedTextColor} selectable={false}>
+            <Text fg={maskedTextColor} selectable={false}>
               {maskedBefore}
               {focused && (
-                <span bg={maskedTextColor} fg={backgroundColor}>{maskedCursorChar}</span>
+                <Span bg={maskedTextColor} fg={backgroundColor}>{maskedCursorChar}</Span>
               )}
               {focused ? maskedAfter : maskedDisplay.slice(maskedBefore.length)}
-            </text>
-          </box>
+            </Text>
+          </Box>
         )}
-      </box>
+      </Box>
       {hint && (
-        <box height={1}>
-          <text fg={colors.textMuted}>{hint}</text>
-        </box>
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{hint}</Text>
+        </Box>
       )}
-    </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("");

package/src/components/ui/frame.tsx

@@ -1,73 +1,40 @@
-import { TextAttributes } from "@opentui/core";
-import type { ReactNode } from "react";
+import { Box, Text, useUiHost } from "../../ui";
+import { TextAttributes } from "../../ui";
+import { type ComponentType, 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;
+  showTitleDivider?: boolean;
 }
 
-export function DialogFrame({ title, children, footer }: DialogFrameProps) {
+export function DialogFrame({ title, children, footer, showTitleDivider = true }: DialogFrameProps) {
+  const HostDialogFrame = useUiHost().DialogFrame as ComponentType<DialogFrameProps> | undefined;
+  if (HostDialogFrame) {
+    return (
+      <HostDialogFrame title={title} footer={footer} showTitleDivider={showTitleDivider}>
+        {children}
+      </HostDialogFrame>
+    );
+  }
+
   return (
-    <box flexDirection="column">
-      <box height={1}>
-        <text fg={colors.text} attributes={TextAttributes.BOLD}>{title}</text>
-      </box>
-      <box height={1} />
+    <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 height={1} />
+          <Box height={1}>
+            <Text fg={colors.textMuted}>{footer}</Text>
+          </Box>
         </>
       )}
-    </box>
+    </Box>
   );
 }

package/src/components/ui/index.ts

@@ -1,61 +1,26 @@
+
 export { ListView } from "./list-view";
-export type { ListViewItem, ListViewProps, ListRowState } from "./list-view";
+export type { ListViewItem } from "./list-view";
 
 export { DataTable } from "./data-table";
-export type {
-  DataTableCell,
-  DataTableColumn,
-  DataTableProps,
-  DataTableSectionHeader,
-} from "./data-table";
+export type { DataTableCell, DataTableColumn, DataTableProps } from "./data-table";
 
-export { Tabs } from "./tabs";
-export type { TabItem, TabsProps } from "./tabs";
+export { Button } from "./button";
 
-export { Button, IconButton } from "./button";
-export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button";
+export { ShortcutHint } from "./shortcut-hint";
 
-export { MultiSelectChips } from "./multi-select-chips";
-export type { MultiSelectChipsProps, MultiSelectChipOption } from "./multi-select-chips";
 export { MultiSelectDialogButton, MultiSelectDialogContent } from "./multi-select-dialog";
-export type { MultiSelectDialogButtonProps, MultiSelectDialogContentProps } from "./multi-select-dialog";
-export type { MultiSelectOption } from "./multi-select";
-
-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 { TextField, NumberField } from "./fields";
+
+export { getMessageComposerBlockHeight, MessageComposer } from "./message-composer";
+
+export { EmptyState } from "./status";
+
+export { DialogFrame } from "./frame";
 
 export { ExternalLink, ExternalLinkText, openUrl } from "./external-link";
+export { RemoteImage } from "./remote-image";
 export { PageStackView } from "./page-stack-view";
 
-export { Spinner, ProgressBar, SkeletonRow, LoadingBlock } from "./loading";
-export type {
-  SpinnerProps,
-  ProgressBarProps,
-  SkeletonRowProps,
-  LoadingBlockProps,
-} from "./loading";
+export { Spinner } from "./loading";

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

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { Box, ScrollBox, Text, useUiHost } from "../../ui";
+import { useEffect, useRef, useState, type ComponentType, type ReactNode } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
 
 export interface ListViewItem {
@@ -29,9 +30,13 @@ export interface ListViewProps {
   bgColor?: string;
   selectedBgColor?: string;
   hoverBgColor?: string;
+  rowGap?: number;
+  rowHeight?: number;
+  surface?: "framed" | "plain";
   height?: number;
   flexGrow?: number;
   scrollable?: boolean;
+  selectOnHover?: boolean;
   autoScrollToIndex?: boolean;
 }
 
@@ -43,22 +48,22 @@ function DefaultRow({
   selected: boolean;
 }) {
   return (
-    <box flexDirection="row" justifyContent="space-between" width="100%">
-      <box flexDirection="row">
-        <text fg={selected ? colors.selectedText : colors.textDim}>
+    <Box flexDirection="row" justifyContent="space-between" width="100%">
+      <Box flexDirection="row">
+        <Text fg={selected ? colors.selectedText : colors.textDim}>
           {selected ? "\u25b8 " : "  "}
-        </text>
-        <text
+        </Text>
+        <Text
           fg={selected ? colors.text : colors.textDim}
           attributes={selected ? TextAttributes.BOLD : 0}
         >
           {item.label}
-        </text>
-      </box>
+        </Text>
+      </Box>
       {item.detail && (
-        <text fg={selected ? colors.textMuted : colors.textMuted}>{item.detail}</text>
+        <Text fg={selected ? colors.textMuted : colors.textMuted}>{item.detail}</Text>
       )}
-    </box>
+    </Box>
   );
 }
 
@@ -75,11 +80,43 @@ export function ListView({
   bgColor,
   selectedBgColor,
   hoverBgColor,
+  rowGap,
+  rowHeight,
+  surface,
   height,
   flexGrow,
   scrollable = false,
+  selectOnHover = false,
   autoScrollToIndex = true,
 }: ListViewProps) {
+  const HostListView = useUiHost().ListView as ComponentType<ListViewProps> | undefined;
+  if (HostListView) {
+    return (
+      <HostListView
+        items={items}
+        selectedIndex={selectedIndex}
+        scrollIndex={scrollIndex}
+        onSelect={onSelect}
+        onActivate={onActivate}
+        renderRow={renderRow}
+        getRowBackgroundColor={getRowBackgroundColor}
+        showSelectedDescription={showSelectedDescription}
+        emptyMessage={emptyMessage}
+        bgColor={bgColor}
+        selectedBgColor={selectedBgColor}
+        hoverBgColor={hoverBgColor}
+        rowGap={rowGap}
+        rowHeight={rowHeight}
+        surface={surface}
+        height={height}
+        flexGrow={flexGrow}
+        scrollable={scrollable}
+        selectOnHover={selectOnHover}
+        autoScrollToIndex={autoScrollToIndex}
+      />
+    );
+  }
+
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const baseBg = bgColor ?? colors.bg;
@@ -110,9 +147,9 @@ export function ListView({
 
   if (items.length === 0) {
     return (
-      <box height={1}>
-        <text fg={colors.textDim}>{emptyMessage}</text>
-      </box>
+      <Box height={1}>
+        <Text fg={colors.textDim}>{emptyMessage}</Text>
+      </Box>
     );
   }
 
@@ -125,12 +162,15 @@ export function ListView({
       ?? (selected ? activeBg : hovered ? rowHoverBg : baseBg);
 
     return (
-      <box
+      <Box
         key={item.id}
         height={1}
         backgroundColor={rowBg}
         onMouseMove={() => {
-          if (!disabled) setHoveredIndex(index);
+          if (!disabled) {
+            setHoveredIndex((current) => (current === index ? current : index));
+            if (selectOnHover) onSelect?.(index);
+          }
         }}
         onMouseDown={() => {
           if (disabled) return;
@@ -141,26 +181,26 @@ export function ListView({
         {renderRow
           ? renderRow(item, state, index)
           : <DefaultRow item={item} selected={selected} />}
-      </box>
+      </Box>
     );
   });
 
   return (
-    <box flexDirection="column" height={height} flexGrow={flexGrow}>
+    <Box flexDirection="column" height={height} flexGrow={flexGrow}>
       {scrollable ? (
-        <scrollbox ref={scrollRef} height={height} flexGrow={flexGrow} scrollY focusable={false}>
+        <ScrollBox ref={scrollRef} height={height} flexGrow={flexGrow} scrollY focusable={false}>
           {rows}
-        </scrollbox>
+        </ScrollBox>
       ) : rows}
 
       {showSelectedDescription && selectedItem?.description && (
         <>
-          <box height={1} />
-          <box>
-            <text fg={colors.textDim}>{"    "}{selectedItem.description}</text>
-          </box>
+          <Box height={1} />
+          <Box>
+            <Text fg={colors.textDim}>{"    "}{selectedItem.description}</Text>
+          </Box>
         </>
       )}
-    </box>
+    </Box>
   );
 }

package/src/components/ui/loading.tsx

@@ -1,4 +1,4 @@
-import "opentui-spinner/react";
+import { Box, SpinnerMark, Text } from "../../ui";
 import { colors } from "../../theme/colors";
 
 export interface SpinnerProps {
@@ -7,64 +7,9 @@ export interface SpinnerProps {
 
 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>
+    <Box flexDirection="row" gap={1}>
+      <SpinnerMark name="dots" color={colors.textDim} />
+      {label && <Text fg={colors.textDim}>{label}</Text>}
+    </Box>
   );
 }