gloomberb 0.10.4 → 0.10.5

package/src/renderers/opentui/dialog-host.tsx

@@ -1,103 +1,302 @@
-import type { ReactNode } from "react";
-import { useMemo } from "react";
+/** @jsxImportSource @opentui/react */
+import { RGBA, type Renderable } from "@opentui/core";
+import { flushSync, useKeyboard, useRenderer } from "@opentui/react";
 import {
-  DialogProvider as OpenTuiDialogProvider,
-  type AlertContext as OpenTuiAlertContext,
-  type AlertOptions as OpenTuiAlertOptions,
-  type PromptContext as OpenTuiPromptContext,
-  type PromptOptions as OpenTuiPromptOptions,
-  useDialog as useOpenTuiDialog,
-  useDialogState as useOpenTuiDialogState,
-} from "@opentui-ui/dialog/react";
-import { DialogHostProvider, type DialogApi } from "../../ui/dialog";
-
-function renderDialogContent(content: unknown, context: Record<string, unknown>): ReactNode {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { colors } from "../../theme/colors";
+import {
+  DialogHostProvider,
+  type AlertContext,
+  type DialogApi,
+  type PromptContext,
+} from "../../ui/dialog";
+
+type DialogSize = "small" | "medium" | "large" | "full";
+
+interface DialogStyle {
+  width?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  [key: string]: unknown;
+}
+
+interface DialogRecord {
+  id: string;
+  content: unknown;
+  kind: "alert" | "prompt";
+  size?: DialogSize;
+  style?: DialogStyle;
+  closeOnEscape?: boolean;
+  closeOnClickOutside?: boolean;
+  settle(value: unknown): void;
+}
+
+export interface OpenTuiDialogHostProviderProps {
+  children: ReactNode;
+  size?: DialogSize;
+  sizePresets?: Partial<Record<DialogSize, number>>;
+  closeOnEscape?: boolean;
+  closeOnClickOutside?: boolean;
+  dialogOptions?: { style?: DialogStyle };
+  backdropColor?: string;
+  backdropOpacity?: number;
+}
+
+let nextDialogId = 1;
+
+function renderDialogContent(content: unknown, context: AlertContext | PromptContext<unknown>): ReactNode {
   return typeof content === "function"
-    ? (content as (context: Record<string, unknown>) => ReactNode)(context)
+    ? (content as (context: AlertContext | PromptContext<unknown>) => ReactNode)(context)
     : content as ReactNode;
 }
 
-function normalizeDialogId(value: unknown): string | undefined {
-  return typeof value === "string" || typeof value === "number" ? String(value) : undefined;
+function dialogWidth(
+  size: DialogSize,
+  terminalWidth: number,
+  sizePresets: OpenTuiDialogHostProviderProps["sizePresets"],
+): number {
+  const customWidth = sizePresets?.[size];
+  const requestedWidth = customWidth && customWidth > 0
+    ? customWidth
+    : size === "small"
+      ? 40
+      : size === "large"
+        ? 80
+        : size === "full"
+          ? terminalWidth - 4
+          : 60;
+  return Math.max(1, Math.min(requestedWidth, terminalWidth - 2));
 }
 
-function OpenTuiDialogContentBridge({
+function backdrop(color: string, opacity: number): RGBA {
+  const value = RGBA.fromHex(color);
+  value.a = Math.max(0, Math.min(opacity, 1));
+  return value;
+}
+
+function DialogLayer({
+  api,
+  close,
+  containerOptions,
   dialog,
-  dialogId,
-  children,
+  dimensions,
+  index,
+  isTopmost,
 }: {
-  dialog: DialogApi;
-  dialogId: string | undefined;
-  children: ReactNode;
+  api: DialogApi;
+  close(id: string, value?: unknown): void;
+  containerOptions: Omit<OpenTuiDialogHostProviderProps, "children">;
+  dialog: DialogRecord;
+  dimensions: { width: number; height: number };
+  index: number;
+  isTopmost: boolean;
 }) {
-  const isTopmost = useOpenTuiDialogState(
-    (state) => normalizeDialogId(state.topDialog?.id) === dialogId,
-  );
-  return (
-    <DialogHostProvider
-      dialog={dialog}
-      isOpen={true}
-      dialogId={dialogId}
-      keyboardEnabled={isTopmost}
-    >
-      {children}
-    </DialogHostProvider>
-  );
-}
+  const effectiveSize = dialog.size ?? containerOptions.size ?? "medium";
+  const providerStyle = containerOptions.dialogOptions?.style ?? {};
+  const style = { ...providerStyle, ...dialog.style };
+  const viewportWidth = Math.max(1, dimensions.width - 2);
+  const viewportHeight = Math.max(1, dimensions.height - 2);
+  const width = typeof style.width === "number"
+    ? Math.max(1, Math.min(style.width, viewportWidth))
+    : dialogWidth(effectiveSize, dimensions.width, containerOptions.sizePresets);
+  const maxWidth = typeof style.maxWidth === "number"
+    ? Math.max(1, Math.min(style.maxWidth, viewportWidth))
+    : viewportWidth;
+  const maxHeight = typeof style.maxHeight === "number"
+    ? Math.max(1, Math.min(style.maxHeight, viewportHeight))
+    : viewportHeight;
+  const closeOnEscape = dialog.closeOnEscape ?? containerOptions.closeOnEscape ?? true;
+  const closeOnClickOutside = dialog.closeOnClickOutside
+    ?? containerOptions.closeOnClickOutside
+    ?? false;
+  const zIndex = 9_998 + index * 2;
+
+  useKeyboard((event) => {
+    if (!isTopmost || !closeOnEscape || event.name !== "escape") return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    close(dialog.id);
+  });
 
-function OpenTuiDialogBridge({ children }: { children: ReactNode }) {
-  const openTuiDialog = useOpenTuiDialog();
-  const isOpen = useOpenTuiDialogState((state) => state.isOpen);
-  const dialog = useMemo<DialogApi>(() => {
-    const wrapAlertOptions = (options: Record<string, unknown>): OpenTuiAlertOptions => ({
-      ...options,
-      content: (context: OpenTuiAlertContext) => {
-        const dialogId = normalizeDialogId(context.dialogId);
-        return (
-          <OpenTuiDialogContentBridge dialog={dialog} dialogId={dialogId}>
-            {renderDialogContent(options.content, { ...context, dialogId })}
-          </OpenTuiDialogContentBridge>
-        );
-      },
-    });
-
-    const wrapPromptOptions = <T,>(options: Record<string, unknown>): OpenTuiPromptOptions<T> => ({
-      ...options,
-      content: (context: OpenTuiPromptContext<T>) => {
-        const dialogId = normalizeDialogId(context.dialogId);
-        return (
-          <OpenTuiDialogContentBridge dialog={dialog} dialogId={dialogId}>
-            {renderDialogContent(options.content, { ...context, dialogId })}
-          </OpenTuiDialogContentBridge>
-        );
-      },
-    });
-
-    return {
-      alert: (options) => openTuiDialog.alert(wrapAlertOptions(options)),
-      prompt: <T,>(options: Record<string, unknown>) => openTuiDialog.prompt<T>(wrapPromptOptions<T>(options)),
+  const context = dialog.kind === "prompt"
+    ? {
+      dialogId: dialog.id,
+      dismiss: () => close(dialog.id),
+      resolve: (value: unknown) => close(dialog.id, value),
+    }
+    : {
+      dialogId: dialog.id,
+      dismiss: () => close(dialog.id),
     };
-  }, [openTuiDialog]);
 
   return (
-    <DialogHostProvider dialog={dialog} isOpen={isOpen}>
-      {children}
-    </DialogHostProvider>
+    <>
+      <box
+        position="absolute"
+        left={0}
+        top={0}
+        width={dimensions.width}
+        height={dimensions.height}
+        zIndex={zIndex}
+        backgroundColor={backdrop(
+          containerOptions.backdropColor ?? colors.bg,
+          containerOptions.backdropOpacity ?? 0.8,
+        )}
+      />
+      <box
+        position="absolute"
+        left={0}
+        top={0}
+        width={dimensions.width}
+        height={dimensions.height}
+        zIndex={zIndex + 1}
+        alignItems="center"
+        justifyContent="center"
+        onMouseDown={() => {
+          if (isTopmost && closeOnClickOutside) close(dialog.id);
+        }}
+      >
+        <box
+          {...style as any}
+          width={width}
+          maxWidth={maxWidth}
+          maxHeight={maxHeight}
+          border={style.border ?? true}
+          borderStyle={style.borderStyle ?? "single"}
+          borderColor={style.borderColor ?? colors.borderFocused}
+          backgroundColor={style.backgroundColor ?? colors.bg}
+          paddingX={style.paddingX ?? 2}
+          paddingY={style.paddingY ?? 1}
+          onMouseDown={(event: { stopPropagation(): void }) => event.stopPropagation()}
+        >
+          <DialogHostProvider
+            dialog={api}
+            isOpen={true}
+            dialogId={dialog.id}
+            keyboardEnabled={isTopmost}
+          >
+            {renderDialogContent(dialog.content, context)}
+          </DialogHostProvider>
+        </box>
+      </box>
+    </>
   );
 }
 
 export function OpenTuiDialogHostProvider({
   children,
-  ...props
-}: {
-  children: ReactNode;
-  [key: string]: unknown;
-}) {
+  ...containerOptions
+}: OpenTuiDialogHostProviderProps) {
+  const renderer = useRenderer();
+  const [dimensions, setDimensions] = useState(() => ({
+    width: renderer.width,
+    height: renderer.height,
+  }));
+  const [dialogs, setDialogs] = useState<DialogRecord[]>([]);
+  const dialogsRef = useRef<DialogRecord[]>([]);
+  const savedFocusRef = useRef<Renderable | null>(null);
+  const mountedRef = useRef(true);
+
+  const publish = useCallback((next: DialogRecord[]) => {
+    dialogsRef.current = next;
+    if (mountedRef.current) flushSync(() => setDialogs(next));
+  }, []);
+
+  const close = useCallback((id: string, value?: unknown) => {
+    const current = dialogsRef.current;
+    const target = current.find((dialog) => dialog.id === id);
+    if (!target) return;
+    const next = current.filter((dialog) => dialog.id !== id);
+    publish(next);
+    target.settle(value);
+    if (next.length === 0) {
+      const savedFocus = savedFocusRef.current;
+      savedFocusRef.current = null;
+      queueMicrotask(() => {
+        try {
+          savedFocus?.focus();
+        } catch {
+          // The previously focused renderable may have unmounted with the dialog.
+        }
+      });
+    }
+  }, [publish]);
+
+  const open = useCallback(<T,>(kind: DialogRecord["kind"], options: Record<string, unknown>) => (
+    new Promise<T | undefined>((resolve) => {
+      if (dialogsRef.current.length === 0) {
+        savedFocusRef.current = renderer.currentFocusedRenderable;
+        savedFocusRef.current?.blur();
+      }
+      let settled = false;
+      const record: DialogRecord = {
+        id: `gloom-dialog-${nextDialogId++}`,
+        kind,
+        content: options.content,
+        size: options.size as DialogSize | undefined,
+        style: options.style as DialogStyle | undefined,
+        closeOnEscape: options.closeOnEscape as boolean | undefined,
+        closeOnClickOutside: options.closeOnClickOutside as boolean | undefined,
+        settle(value) {
+          if (settled) return;
+          settled = true;
+          resolve(value as T | undefined);
+        },
+      };
+      publish([...dialogsRef.current, record]);
+    })
+  ), [publish, renderer]);
+
+  const api = useMemo<DialogApi>(() => ({
+    alert: async (options) => {
+      await open<void>("alert", options);
+    },
+    prompt: <T,>(options: Record<string, unknown>) => open<T>("prompt", options),
+  }), [open]);
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      setDimensions({ width: renderer.width, height: renderer.height });
+    };
+    renderer.on("resize", updateDimensions);
+    return () => {
+      renderer.off("resize", updateDimensions);
+    };
+  }, [renderer]);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      for (const dialog of dialogsRef.current) dialog.settle(undefined);
+      dialogsRef.current = [];
+      savedFocusRef.current = null;
+    };
+  }, []);
+
   return (
-    <OpenTuiDialogProvider {...props}>
-      <OpenTuiDialogBridge>
+    <DialogHostProvider dialog={api} isOpen={dialogs.length > 0}>
+      <box position="relative" width={dimensions.width} height={dimensions.height}>
         {children}
-      </OpenTuiDialogBridge>
-    </OpenTuiDialogProvider>
+        {dialogs.map((dialog, index) => (
+          <DialogLayer
+            key={dialog.id}
+            api={api}
+            close={close}
+            containerOptions={containerOptions}
+            dialog={dialog}
+            dimensions={dimensions}
+            index={index}
+            isTopmost={index === dialogs.length - 1}
+          />
+        ))}
+      </box>
+    </DialogHostProvider>
   );
 }

package/src/renderers/opentui/test-utils.tsx

@@ -1,5 +1,4 @@
 import { useMemo, type ReactNode } from "react";
-import { DialogProvider } from "@opentui-ui/dialog/react";
 import { testRender as openTuiTestRender } from "@opentui/react/test-utils";
 import { createRoot as openTuiCreateRoot, useRenderer } from "@opentui/react";
 import { UiHostProvider, type NativeRendererHost, type RendererHost } from "../../ui";
@@ -12,7 +11,7 @@ import { openTuiToastHost } from "./toast-host";
 
 export function TestDialogProvider({ children }: { children: ReactNode }) {
   return (
-    <DialogProvider
+    <OpenTuiDialogHostProvider
       dialogOptions={{
         style: {
           backgroundColor: colors.bg,
@@ -22,7 +21,7 @@ export function TestDialogProvider({ children }: { children: ReactNode }) {
       }}
     >
       {children}
-    </DialogProvider>
+    </OpenTuiDialogHostProvider>
   );
 }
 
@@ -55,9 +54,13 @@ function OpenTuiTestProviders({ children }: { children: ReactNode }) {
       <OpenTuiInputHostProvider>
         <ToastHostProvider host={openTuiToastHost}>
           <OpenTuiDialogHostProvider
-            backgroundColor={colors.bg}
-            containerBorderColor={colors.border}
-            focusedBorderColor={colors.borderFocused}
+            dialogOptions={{
+              style: {
+                backgroundColor: colors.bg,
+                borderColor: colors.borderFocused,
+                borderStyle: "single",
+              },
+            }}
           >
             {children}
           </OpenTuiDialogHostProvider>

package/src/renderers/opentui/toast-host.tsx

@@ -1,10 +1,139 @@
-import { Toaster, toast } from "@opentui-ui/toast/react";
-import type { ToastHost } from "../../ui/toast";
+/** @jsxImportSource @opentui/react */
+import { useTerminalDimensions } from "@opentui/react";
+import { useSyncExternalStore } from "react";
+import { colors } from "../../theme/colors";
+import type { ToastHost, ToastOptions } from "../../ui/toast";
+
+type ToastTone = "success" | "error" | "info";
+
+interface ToastRecord {
+  id: number;
+  body: string;
+  tone: ToastTone;
+  options?: ToastOptions;
+}
+
+let nextToastId = 1;
+let toasts: ToastRecord[] = [];
+const listeners = new Set<() => void>();
+const timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+function publish(): void {
+  for (const listener of listeners) listener();
+}
+
+function dismissToast(id: string | number): void {
+  const numericId = typeof id === "number" ? id : Number(id);
+  if (!Number.isFinite(numericId)) return;
+  const timer = timers.get(numericId);
+  if (timer) clearTimeout(timer);
+  timers.delete(numericId);
+  const next = toasts.filter((toast) => toast.id !== numericId);
+  if (next.length === toasts.length) return;
+  toasts = next;
+  publish();
+}
+
+function addToast(tone: ToastTone, body: string, options?: ToastOptions): number {
+  const id = nextToastId++;
+  toasts = [...toasts, { id, body, tone, options }];
+  publish();
+  const duration = options?.duration ?? 4_000;
+  if (Number.isFinite(duration) && duration > 0) {
+    timers.set(id, setTimeout(() => dismissToast(id), duration));
+  }
+  return id;
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function getSnapshot(): ToastRecord[] {
+  return toasts;
+}
+
+function toneColor(tone: ToastTone): string {
+  if (tone === "success") return colors.positive;
+  if (tone === "error") return colors.negative;
+  return colors.neutral;
+}
+
+function toneIcon(tone: ToastTone): string {
+  if (tone === "success") return "✓";
+  if (tone === "error") return "!";
+  return "i";
+}
+
+function ToastViewport({ position = "bottom-right" }: { position?: string }) {
+  const dimensions = useTerminalDimensions();
+  const visibleToasts = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const maxWidth = Math.max(1, Math.min(60, dimensions.width - 4));
+  const placement = position.startsWith("top") ? { top: 1 } : { bottom: 1 };
+  const horizontal = position.endsWith("left")
+    ? { left: 2 }
+    : position.endsWith("center")
+      ? { left: Math.max(0, Math.floor((dimensions.width - maxWidth) / 2)) }
+      : { right: 2 };
+
+  if (visibleToasts.length === 0) return null;
+
+  return (
+    <box
+      position="absolute"
+      {...placement}
+      {...horizontal}
+      width={maxWidth}
+      zIndex={9_900}
+      flexDirection="column"
+      gap={1}
+    >
+      {visibleToasts.slice(-4).map((toast) => (
+        <box
+          key={toast.id}
+          width="100%"
+          border
+          borderStyle="single"
+          borderColor={toneColor(toast.tone)}
+          backgroundColor={colors.panel}
+          paddingX={1}
+          flexDirection="row"
+          gap={1}
+        >
+          <text fg={toneColor(toast.tone)}>{toneIcon(toast.tone)}</text>
+          <text fg={colors.text} flexGrow={1} wrapMode="word">{toast.body}</text>
+          {toast.options?.action && (
+            <text
+              fg={colors.textBright}
+              attributes={1}
+              onMouseDown={(event) => {
+                event.stopPropagation();
+                toast.options?.action?.onClick();
+              }}
+            >
+              {`[${toast.options.action.label}]`}
+            </text>
+          )}
+          <text
+            fg={colors.textMuted}
+            onMouseDown={(event) => {
+              event.stopPropagation();
+              dismissToast(toast.id);
+            }}
+          >
+            ×
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}
 
 export const openTuiToastHost: ToastHost = {
-  Viewport: Toaster as ToastHost["Viewport"],
-  success: toast.success,
-  error: toast.error,
-  info: toast.info,
-  dismiss: toast.dismiss,
+  Viewport: ToastViewport,
+  success: (body, options) => addToast("success", body, options),
+  error: (body, options) => addToast("error", body, options),
+  info: (body, options) => addToast("info", body, options),
+  dismiss: dismissToast,
 };

package/src/renderers/opentui/ui-host.tsx

@@ -1,6 +1,5 @@
 import { RGBA, StyledText as OpenTuiStyledText, SyntaxStyle, TextAttributes as OpenTuiTextAttributes } from "@opentui/core";
-import { createElement, forwardRef, type ReactNode } from "react";
-import "opentui-spinner/react";
+import { createElement, forwardRef, useEffect, useState, type ReactNode } from "react";
 import { TextAttributes, type UiHost, type TextProps } from "../../ui/host";
 import { renderAsciiText } from "../../ui/ascii-font";
 import { OpenTuiImageSurface } from "./image/surface";
@@ -60,9 +59,26 @@ const OpenTuiBox = createOpenTuiPrimitive("box");
 const OpenTuiScrollBox = createOpenTuiPrimitive("scrollbox");
 const OpenTuiInput = createOpenTuiPrimitive("input");
 const OpenTuiTextarea = createOpenTuiPrimitive("textarea");
-const OpenTuiSpinnerMark = createOpenTuiPrimitive("spinner");
 const OpenTuiMediaSurface = createOpenTuiPrimitive("box");
 
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+const OpenTuiSpinnerMark = forwardRef<unknown, OpenTuiPrimitiveProps & { name?: string; color?: string }>(
+  function OpenTuiSpinnerMark({ name: _name, color, ...props }, ref) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+      const timer = setInterval(() => setFrame((current) => (current + 1) % SPINNER_FRAMES.length), 80);
+      return () => clearInterval(timer);
+    }, []);
+    return createElement("text" as any, {
+      ...props,
+      ref,
+      fg: color,
+      content: SPINNER_FRAMES[frame],
+    });
+  },
+);
+
 const OpenTuiText = forwardRef<unknown, TextProps>(function OpenTuiText({ children, ...props }, ref) {
   const textProps = stripTextProps(props);
   return createElement("text" as any, {