@pablozaiden/terminatui 0.1.2 → 0.3.0-beta-1

package/src/tui/adapters/opentui/OpenTuiRenderer.tsx

@@ -0,0 +1,115 @@
+import { createCliRenderer, type CliRenderer } from "@opentui/core";
+import { createRoot, type Root } from "@opentui/react";
+import { useLayoutEffect, type ReactNode } from "react";
+import { SemanticColors } from "../../theme.ts";
+import type { Renderer, RendererConfig } from "../types.ts";
+import { useOpenTuiKeyboardAdapter } from "./keyboard.ts";
+import { Button } from "./components/Button.tsx";
+import { Code } from "./components/Code.tsx";
+import { CodeHighlight } from "./components/CodeHighlight.tsx";
+import { Container } from "./components/Container.tsx";
+import { Field } from "./components/Field.tsx";
+import { Label } from "./components/Label.tsx";
+import { MenuButton } from "./components/MenuButton.tsx";
+import { MenuItem } from "./components/MenuItem.tsx";
+import { Overlay } from "./components/Overlay.tsx";
+import { Spacer } from "./components/Spacer.tsx";
+import { Spinner } from "./components/Spinner.tsx";
+import { Panel } from "./components/Panel.tsx";
+import { ScrollView as OpenTuiScrollView } from "./components/ScrollView.tsx";
+import { Select } from "./components/Select.tsx";
+import { TextInput } from "./components/TextInput.tsx";
+import { Value } from "./components/Value.tsx";
+
+export class OpenTuiRenderer implements Renderer {
+    private renderer: CliRenderer | null = null;
+    private root: Root | null = null;
+
+    private activeKeyboardAdapter: Renderer["keyboard"] | null = null;
+
+    public keyboard: Renderer["keyboard"] = {
+        setActiveHandler: (id, handler) => {
+            return this.activeKeyboardAdapter?.setActiveHandler(id, handler) ?? (() => {});
+        },
+        setGlobalHandler: (handler) => {
+            return this.activeKeyboardAdapter?.setGlobalHandler(handler) ?? (() => {});
+        },
+    };
+
+    public components: Renderer["components"] = {
+        Field,
+        Button,
+        MenuButton,
+        MenuItem,
+        Container,
+        Panel,
+        ScrollView: OpenTuiScrollView,
+
+        Overlay,
+        Spacer,
+        Spinner,
+        Label,
+        Value,
+        Code,
+        CodeHighlight,
+
+        Select,
+        TextInput,
+    };
+
+    constructor(private readonly config: RendererConfig) {}
+
+    async initialize(): Promise<void> {
+        this.renderer = await createCliRenderer({
+            useAlternateScreen: this.config.useAlternateScreen ?? true,
+            useConsole: false,
+            exitOnCtrlC: true,
+            backgroundColor: SemanticColors.background,
+            useMouse: true,
+            enableMouseMovement: true,
+            openConsoleOnError: false,
+        });
+
+        this.root = createRoot(this.renderer);
+    }
+
+    render(node: ReactNode): void {
+        if (!this.root) {
+            throw new Error("OpenTuiRenderer not initialized");
+        }
+
+        this.root.render(
+            <KeyboardBridge
+                onReady={(keyboard) => {
+                    this.activeKeyboardAdapter = keyboard;
+                }}
+            >
+                {node}
+            </KeyboardBridge>
+        );
+
+        this.renderer?.start();
+    }
+
+    destroy(): void {
+        this.renderer?.destroy();
+        this.renderer = null;
+        this.root = null;
+    }
+}
+
+function KeyboardBridge({
+    children,
+    onReady,
+}: {
+    children: ReactNode;
+    onReady: (keyboard: ReturnType<typeof useOpenTuiKeyboardAdapter>) => void;
+}) {
+    const keyboard = useOpenTuiKeyboardAdapter();
+
+    useLayoutEffect(() => {
+        onReady(keyboard);
+    }, [onReady, keyboard]);
+
+    return <>{children}</>;
+}

package/src/tui/adapters/opentui/components/Button.tsx

@@ -0,0 +1,13 @@
+import type { ButtonProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Button({ label, selected, onActivate }: ButtonProps) {
+    const fg = selected ? SemanticColors.selectionText : SemanticColors.text;
+    const bg = selected ? SemanticColors.selectionBackground : undefined;
+
+    return (
+        <text fg={fg} bg={bg} {...({ onClick: onActivate })}>
+            {label}
+        </text>
+    );
+}

package/src/tui/adapters/opentui/components/Code.tsx

@@ -0,0 +1,12 @@
+import type { CodeProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Code({ color = "code", children }: CodeProps) {
+    const fg = SemanticColors[color] ?? SemanticColors.code;
+
+    return (
+        <text fg={fg}>
+            {children}
+        </text>
+    );
+}

package/src/tui/adapters/opentui/components/CodeHighlight.tsx

@@ -0,0 +1,24 @@
+import type { CodeHighlightProps, CodeTokenType } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+const TOKEN_COLORS: Record<CodeTokenType, string> = {
+    key: SemanticColors.primary,
+    string: SemanticColors.success,
+    number: "#d19a66",
+    boolean: "#c678dd",
+    null: "#c678dd",
+    punctuation: SemanticColors.mutedText,
+    unknown: SemanticColors.text,
+};
+
+export function CodeHighlight({ tokens }: CodeHighlightProps) {
+    return (
+        <text>
+            {tokens.map((token, tokenIdx) => (
+                <span key={tokenIdx} fg={TOKEN_COLORS[token.type] ?? SemanticColors.text}>
+                    {token.value}
+                </span>
+            ))}
+        </text>
+    );
+}

package/src/tui/adapters/opentui/components/Container.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import type { ContainerProps, Spacing } from "../../../semantic/types.ts";
+
+function normalizePadding(padding: number | Spacing | undefined):
+    | { padding?: number; paddingTop?: number; paddingRight?: number; paddingBottom?: number; paddingLeft?: number }
+    | undefined {
+    if (padding === undefined) {
+        return undefined;
+    }
+
+    if (typeof padding === "number") {
+        return { padding };
+    }
+
+    return {
+        paddingTop: padding.top ?? 0,
+        paddingRight: padding.right ?? 0,
+        paddingBottom: padding.bottom ?? 0,
+        paddingLeft: padding.left ?? 0,
+    };
+}
+
+export function Container({
+    children,
+    flex,
+    width,
+    height,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    gap,
+    padding,
+    noShrink,
+}: ContainerProps & { children?: ReactNode }) {
+    const resolvedPadding = normalizePadding(padding);
+
+    return (
+        <box
+            flexGrow={flex}
+            flexShrink={noShrink ? 0 : flex === undefined ? undefined : 1}
+            width={width as any}
+            height={height as any}
+            flexDirection={flexDirection as any}
+            alignItems={alignItems as any}
+            justifyContent={justifyContent as any}
+            gap={gap}
+            padding={resolvedPadding?.padding}
+            paddingTop={resolvedPadding?.paddingTop}
+            paddingRight={resolvedPadding?.paddingRight}
+            paddingBottom={resolvedPadding?.paddingBottom}
+            paddingLeft={resolvedPadding?.paddingLeft}
+        >
+            {children}
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/Field.tsx

@@ -0,0 +1,18 @@
+import type { FieldProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Field({ label, value, selected, onActivate }: FieldProps) {
+    const prefix = selected ? "► " : "  ";
+    const labelColor = selected ? SemanticColors.focusBorder : SemanticColors.mutedText;
+    const valueColor = selected ? SemanticColors.value : SemanticColors.text;
+
+    return (
+        <box flexDirection="row" gap={1} {...({ onClick: onActivate })}>
+            <text fg={labelColor}>
+                {prefix}
+                {label}:
+            </text>
+            <text fg={valueColor}>{value}</text>
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/Label.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { LabelProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Label({ color = "text", bold, italic, wrap, children }: LabelProps & { children: ReactNode }) {
+    const fg = SemanticColors[color] ?? SemanticColors.text;
+
+    const content = bold ? <strong>{children}</strong> : children;
+
+    return (
+        <text fg={fg} {...({ wrap } as any)}>
+            {italic ? <em>{content}</em> : content}
+        </text>
+    );
+}

package/src/tui/adapters/opentui/components/MenuButton.tsx

@@ -0,0 +1,14 @@
+import type { MenuButtonProps } from "../../../semantic/types.ts";
+import { MenuItem } from "./MenuItem.tsx";
+
+export function MenuButton({ label, selected, onActivate }: MenuButtonProps) {
+    return (
+        <box marginTop={1}>
+            <MenuItem
+                label={`[ ${label} ]`}
+                selected={selected}
+                onActivate={onActivate}
+            />
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/MenuItem.tsx

@@ -0,0 +1,29 @@
+import type { MenuItemProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function MenuItem({
+    label,
+    description,
+    suffix,
+    selected,
+    onActivate,
+}: MenuItemProps) {
+    const prefix = selected ? "► " : "  ";
+    const displayLabel = suffix ? `${label} ${suffix}` : label;
+
+    const fg = selected ? SemanticColors.selectionText : SemanticColors.text;
+    const bg = selected ? SemanticColors.selectionBackground : undefined;
+
+    return (
+        <box flexDirection="column">
+            <text fg={fg} bg={bg} {...({ onClick: onActivate })}>
+                {prefix}{displayLabel}
+            </text>
+            {description ? (
+                <text fg={selected ? SemanticColors.text : SemanticColors.mutedText}>
+                    {"    "}{description}
+                </text>
+            ) : null}
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/Overlay.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { OverlayProps } from "../../../semantic/types.ts";
+
+export function Overlay({
+    zIndex = 10,
+    top,
+    left,
+    right,
+    bottom,
+    width,
+    height,
+    children,
+}: OverlayProps & { children?: ReactNode }) {
+    return (
+        <box position="absolute" top={0} left={0} right={0} bottom={0} zIndex={zIndex}>
+            <box position="absolute" top={top as any} left={left as any} right={right as any} bottom={bottom as any} width={width as any} height={height as any}>
+                {children}
+            </box>
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/Panel.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import type { PanelProps, Spacing } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+function normalizePadding(
+    padding: number | Spacing | undefined,
+    opts: { dense: boolean }
+): { padding?: number; paddingTop?: number; paddingRight?: number; paddingBottom?: number; paddingLeft?: number } {
+    if (padding === undefined) {
+        return opts.dense
+            ? {
+                  padding: 0,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+              }
+            : { padding: 1 };
+    }
+
+    if (typeof padding === "number") {
+        return { padding };
+    }
+
+    return {
+        paddingTop: padding.top ?? 0,
+        paddingRight: padding.right ?? 0,
+        paddingBottom: padding.bottom ?? 0,
+        paddingLeft: padding.left ?? 0,
+    };
+}
+
+export function Panel({
+    title,
+    focused,
+    border = true,
+    surface = "panel",
+    dense = false,
+    children,
+    flex,
+    width,
+    height,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    gap,
+    padding,
+    noShrink,
+}: PanelProps & { children?: ReactNode }) {
+    const backgroundColor = surface === "overlay" ? SemanticColors.overlay : SemanticColors.panelBackground;
+
+    const borderColor = surface === "overlay" ? SemanticColors.warning : focused ? SemanticColors.focusBorder : SemanticColors.border;
+
+    const resolvedPadding = normalizePadding(padding, { dense });
+
+    return (
+        <box
+            border={border}
+            borderStyle={border ? "rounded" : undefined}
+            borderColor={borderColor}
+            title={title}
+            padding={resolvedPadding.padding}
+            paddingTop={resolvedPadding.paddingTop}
+            paddingRight={resolvedPadding.paddingRight}
+            paddingBottom={resolvedPadding.paddingBottom}
+            paddingLeft={resolvedPadding.paddingLeft}
+            flexGrow={flex}
+            flexShrink={noShrink ? 0 : flex === undefined ? undefined : 1}
+            width={width as any}
+            height={height as any}
+            flexDirection={flexDirection as any}
+            alignItems={alignItems as any}
+            justifyContent={justifyContent as any}
+            gap={gap}
+            backgroundColor={backgroundColor}
+        >
+            {children}
+        </box>
+    );
+}

package/src/tui/adapters/opentui/components/ScrollView.tsx

@@ -0,0 +1,85 @@
+import { useRef, type ReactNode } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type { ScrollViewProps, ScrollViewRef, Spacing } from "../../../semantic/types.ts";
+
+function normalizePadding(padding: number | Spacing | undefined): any {
+    if (padding === undefined) {
+        return undefined;
+    }
+
+    if (typeof padding === "number") {
+        return padding;
+    }
+
+    return {
+        top: padding.top ?? 0,
+        right: padding.right ?? 0,
+        bottom: padding.bottom ?? 0,
+        left: padding.left ?? 0,
+    };
+}
+
+export function ScrollView({
+    axis = "vertical",
+    stickyToEnd,
+    focused,
+    scrollRef: onScrollRef,
+    children,
+    flex,
+    width,
+    height,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    gap,
+    padding,
+}: ScrollViewProps & { children?: ReactNode }) {
+        const scrollRef = useRef<ScrollBoxRenderable>(null);
+
+        const imperativeApi: ScrollViewRef = {
+            scrollToTop: () => {
+                scrollRef.current?.scrollTo(0);
+            },
+            scrollToBottom: () => {
+                // No public "bottom" API in ScrollBoxRenderable; use large index.
+                scrollRef.current?.scrollTo(Number.MAX_SAFE_INTEGER);
+            },
+            scrollToIndex: (index: number) => {
+                scrollRef.current?.scrollTo(index);
+            },
+        };
+
+        // Provide the imperative API via callback.
+        if (onScrollRef) {
+            onScrollRef(imperativeApi);
+        }
+
+    const scrollY = axis === "vertical" || axis === "both";
+    const scrollX = axis === "horizontal" || axis === "both";
+
+    const resolvedStickyToEnd = stickyToEnd ? true : undefined;
+
+
+        return (
+            <scrollbox
+                ref={scrollRef}
+                scrollY={scrollY}
+                scrollX={scrollX}
+                focused={focused}
+                {...({ stickyToEnd: resolvedStickyToEnd })}
+                flexGrow={flex}
+                width={width as any}
+                height={height as any}
+            >
+                <box
+                    flexDirection={flexDirection as any}
+                    alignItems={alignItems as any}
+                    justifyContent={justifyContent as any}
+                    gap={gap}
+                    padding={normalizePadding(padding)}
+                >
+                    {children}
+                </box>
+            </scrollbox>
+        );
+}

package/src/tui/adapters/opentui/components/Select.tsx

@@ -0,0 +1,59 @@
+import type { SelectProps } from "../../../semantic/types.ts";
+import type { SelectOption as OpenTuiSelectOption } from "@opentui/core";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Select<TValue extends string>({
+    options,
+    value,
+    focused,
+    onChange,
+    onSubmit,
+}: SelectProps) {
+    const selectedIndex = Math.max(
+        0,
+        options.findIndex((opt) => opt.value === value)
+    );
+
+    return (
+        <select
+            options={
+                options.map(
+                    (opt): OpenTuiSelectOption => ({
+                        name: opt.label,
+                        description: "",
+                        value: opt.value,
+                    })
+                )
+            }
+            selectedIndex={selectedIndex}
+            focused={focused}
+            onChange={(idx: number) => {
+                const next = options[idx];
+                if (next) {
+                    onChange(next.value);
+                }
+            }}
+            onSelect={(idx: number, option: OpenTuiSelectOption | null) => {
+                if (option) {
+                    onChange(option.value as TValue);
+                } else {
+                    const next = options[idx];
+                    if (next) {
+                        onChange(next.value);
+                    }
+                }
+
+                // Only submit when OpenTUI triggers selection (Enter).
+                // Arrow navigation uses onChange only.
+                onSubmit?.();
+            }}
+            showScrollIndicator={false}
+            showDescription={false}
+            height={Math.min(options.length, 10)}
+            width="100%"
+            wrapSelection={true}
+            selectedBackgroundColor={SemanticColors.focusBorder}
+            selectedTextColor={SemanticColors.inverseText}
+        />
+    );
+}

package/src/tui/adapters/opentui/components/Spacer.tsx

@@ -0,0 +1,5 @@
+import type { SpacerProps } from "../../../semantic/types.ts";
+
+export function Spacer({ size, axis = "vertical" }: SpacerProps) {
+    return axis === "horizontal" ? <box width={size} flexShrink={0} /> : <box height={size} flexShrink={0} />;
+}

package/src/tui/adapters/opentui/components/Spinner.tsx

@@ -0,0 +1,12 @@
+import type { SpinnerProps } from "../../../semantic/types.ts";
+import { useSpinner } from "../hooks/useSpinner.ts";
+
+export function Spinner({ active }: SpinnerProps) {
+    const { frame } = useSpinner(active);
+
+    if (!active) {
+        return "";
+    }
+
+    return <text>{frame} </text>;
+}

package/src/tui/adapters/opentui/components/TextInput.tsx

@@ -0,0 +1,13 @@
+import type { TextInputProps } from "../../../semantic/types.ts";
+
+export function TextInput({ value, placeholder, focused, onChange, onSubmit }: TextInputProps) {
+    return (
+        <input
+            value={value}
+            placeholder={placeholder}
+            focused={focused}
+            onInput={(next: string) => onChange(next)}
+            onSubmit={() => onSubmit?.()}
+        />
+    );
+}

package/src/tui/adapters/opentui/components/Value.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { ValueProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Value({ color = "value", truncate, children }: ValueProps & { children: ReactNode }) {
+    const fg = SemanticColors[color] ?? SemanticColors.value;
+
+    return (
+        <text fg={fg} {...({ truncate })}>
+            {children}
+        </text>
+    );
+}

package/src/tui/{hooks → adapters/opentui/hooks}/useSpinner.ts

@@ -1,21 +1,13 @@
-import { useState, useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const SPINNER_INTERVAL = 80;
 
-export interface UseSpinnerResult {
-    /** Current frame index */
+interface UseSpinnerResult {
     frameIndex: number;
-    /** Current spinner character */
     frame: string;
 }
 
-/**
- * Hook for animated spinner.
- * 
- * @param active - Whether the spinner is active
- * @returns Spinner state with current frame
- */
 export function useSpinner(active: boolean): UseSpinnerResult {
     const [frameIndex, setFrameIndex] = useState(0);
 
@@ -27,7 +19,6 @@ export function useSpinner(active: boolean): UseSpinnerResult {
 
         const interval = setInterval(() => {
             setFrameIndex((prev) => {
-                // Reset to avoid overflow
                 if (prev >= Number.MAX_SAFE_INTEGER / 2) {
                     return 0;
                 }