@pablozaiden/terminatui 0.2.0 → 0.3.0

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;
                 }

package/src/tui/adapters/opentui/keyboard.ts

@@ -0,0 +1,61 @@
+import { useKeyboard } from "@opentui/react";
+import type { KeyEvent } from "@opentui/core";
+import { useCallback, useMemo, useRef } from "react";
+import type { KeyboardAdapter, KeyboardEvent, KeyHandler } from "../types.ts";
+
+function normalizeKeyEvent(key: KeyEvent): KeyboardEvent {
+    return {
+        name: key.name,
+        sequence: key.sequence,
+        ctrl: key.ctrl,
+        shift: key.shift,
+        meta: key.meta,
+    };
+}
+
+export function useOpenTuiKeyboardAdapter(): KeyboardAdapter {
+    const handlerStackRef = useRef<{ id: string; handler: KeyHandler }[]>([]);
+    const globalHandlerRef = useRef<KeyHandler | null>(null);
+
+    const setActiveHandler = useCallback((id: string, handler: KeyHandler) => {
+        handlerStackRef.current = handlerStackRef.current.filter((h) => h.id !== id);
+        handlerStackRef.current.push({ id, handler });
+
+        return () => {
+            handlerStackRef.current = handlerStackRef.current.filter((h) => h.id !== id);
+        };
+    }, []);
+
+    const setGlobalHandler = useCallback((handler: KeyHandler) => {
+        const previous = globalHandlerRef.current;
+        globalHandlerRef.current = handler;
+
+        return () => {
+            globalHandlerRef.current = previous;
+        };
+    }, []);
+
+    useKeyboard((key: KeyEvent) => {
+        const event = normalizeKeyEvent(key);
+
+        if (globalHandlerRef.current) {
+            const handled = globalHandlerRef.current(event);
+            if (handled) {
+                return;
+            }
+        }
+
+        const activeHandler = handlerStackRef.current[handlerStackRef.current.length - 1];
+        if (activeHandler) {
+            activeHandler.handler(event);
+        }
+    });
+
+    return useMemo(
+        () => ({
+            setActiveHandler,
+            setGlobalHandler,
+        }),
+        [setActiveHandler, setGlobalHandler]
+    );
+}

package/src/tui/adapters/types.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+import type {
+    ButtonProps,
+    CodeHighlightProps,
+    CodeProps,
+    ContainerProps,
+    FieldProps,
+    LabelProps,
+    MenuButtonProps,
+    MenuItemProps,
+    OverlayProps,
+    PanelProps,
+    ScrollViewProps,
+    SelectProps,
+    SpacerProps,
+    SpinnerProps,
+    TextInputProps,
+    ValueProps,
+} from "../semantic/types.ts";
+
+export interface KeyboardEvent {
+    name: string;
+    sequence?: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    meta?: boolean;
+}
+
+export type KeyHandler = (event: KeyboardEvent) => boolean;
+
+export interface KeyboardAdapter {
+    setActiveHandler: (id: string, handler: KeyHandler) => () => void;
+    setGlobalHandler: (handler: KeyHandler) => () => void;
+}
+
+export interface RendererConfig {
+    useAlternateScreen?: boolean;
+}
+
+export interface RendererComponents {
+    Field: (props: FieldProps) => ReactNode;
+    Button: (props: ButtonProps) => ReactNode;
+    MenuButton: (props: MenuButtonProps) => ReactNode;
+    MenuItem: (props: MenuItemProps) => ReactNode;
+
+    Container: (props: ContainerProps) => ReactNode;
+    Panel: (props: PanelProps) => ReactNode;
+    ScrollView: (props: ScrollViewProps) => ReactNode;
+
+    Overlay: (props: OverlayProps) => ReactNode;
+    Spacer: (props: SpacerProps) => ReactNode;
+    Spinner: (props: SpinnerProps) => ReactNode;
+
+    Label: (props: LabelProps) => ReactNode;
+    Value: (props: ValueProps) => ReactNode;
+    Code: (props: CodeProps) => ReactNode;
+    CodeHighlight: (props: CodeHighlightProps) => ReactNode;
+
+    TextInput: (props: TextInputProps) => ReactNode;
+    Select: (props: SelectProps) => ReactNode;
+}
+
+export interface Renderer {
+    initialize: () => Promise<void>;
+    render: (node: ReactNode) => void;
+    destroy: () => void;
+    supportCustomRendering: () => boolean;
+
+    keyboard: KeyboardAdapter;
+    components: RendererComponents;
+}

package/src/tui/components/ActionButton.tsx

@@ -1,36 +0,0 @@
-import { Theme } from "../theme.ts";
-
-interface ActionButtonProps {
-    /** Button label */
-    label: string;
-    /** Whether this button is selected */
-    isSelected: boolean;
-    /** Optional spinner frame for loading state */
-    spinnerFrame?: string;
-}
-
-/**
- * Action button displayed at the bottom of a config form.
- */
-export function ActionButton({ label, isSelected, spinnerFrame }: ActionButtonProps) {
-    const prefix = isSelected ? "► " : "  ";
-    const displayLabel = spinnerFrame ? `${spinnerFrame} ${label}...` : `[ ${label} ]`;
-    
-    if (isSelected) {
-        return (
-            <box marginTop={1}>
-                <text fg="#000000" bg={Theme.actionButton}>
-                    {prefix}{displayLabel}
-                </text>
-            </box>
-        );
-    }
-
-    return (
-        <box marginTop={1}>
-            <text fg={Theme.actionButton}>
-                {prefix}{displayLabel}
-            </text>
-        </box>
-    );
-}

package/src/tui/components/CommandSelector.tsx

@@ -1,6 +1,9 @@
-import { Theme } from "../theme.ts";
-import { useKeyboardHandler, KeyboardPriority } from "../hooks/useKeyboardHandler.ts";
+import { useActiveKeyHandler } from "../hooks/useActiveKeyHandler.ts";
 import type { Command } from "../../core/command.ts";
+import { MenuItem } from "../semantic/MenuItem.tsx";
+import { Container } from "../semantic/Container.tsx";
+import { Panel } from "../semantic/Panel.tsx";
+import { Label } from "../semantic/Label.tsx";
 
 interface CommandItem {
     /** The command object */
@@ -20,8 +23,6 @@ interface CommandSelectorProps {
     onSelectionChange: (index: number) => void;
     /** Called when a command is selected */
     onSelect: (command: Command) => void;
-    /** Called when user wants to exit */
-    onExit: () => void;
     /** Breadcrumb path for nested commands */
     breadcrumb?: string[];
 }
@@ -34,114 +35,72 @@ export function CommandSelector({
     selectedIndex,
     onSelectionChange,
     onSelect,
-    onExit,
     breadcrumb,
 }: CommandSelectorProps) {
-    // Keyboard handler for navigation
-    useKeyboardHandler(
-        (event) => {
-            const { key } = event;
+    // Active keyboard handler for navigation
+    useActiveKeyHandler((key) => {
+        // Arrow key navigation
+        if (key.name === "down") {
+            const newIndex = Math.min(selectedIndex + 1, commands.length - 1);
+            onSelectionChange(newIndex);
+            return true;
+        }
 
-            // Arrow key navigation
-            if (key.name === "down") {
-                const newIndex = Math.min(selectedIndex + 1, commands.length - 1);
-                onSelectionChange(newIndex);
-                event.stopPropagation();
-                return;
-            }
+        if (key.name === "up") {
+            const newIndex = Math.max(selectedIndex - 1, 0);
+            onSelectionChange(newIndex);
+            return true;
+        }
 
-            if (key.name === "up") {
-                const newIndex = Math.max(selectedIndex - 1, 0);
-                onSelectionChange(newIndex);
-                event.stopPropagation();
-                return;
+        // Enter to select command
+        if (key.name === "return" || key.name === "enter") {
+            const selected = commands[selectedIndex];
+            if (selected) {
+                onSelect(selected.command);
             }
+            return true;
+        }
 
-            // Enter to select command
-            if (key.name === "return" || key.name === "enter") {
-                const selected = commands[selectedIndex];
-                if (selected) {
-                    onSelect(selected.command);
-                }
-                event.stopPropagation();
-                return;
-            }
-
-            // Escape to exit or go back
-            if (key.name === "escape") {
-                onExit();
-                event.stopPropagation();
-                return;
-            }
-        },
-        KeyboardPriority.Focused
-    );
+        return false;
+    });
 
     const title = breadcrumb?.length 
         ? `Select Command (${breadcrumb.join(" › ")})`
         : "Select Command";
 
     return (
-        <box
-            flexDirection="column"
-            flexGrow={1}
-            justifyContent="center"
-            alignItems="center"
-            gap={1}
-        >
-            <box
+        <Container flexDirection="column" flex={1} justifyContent="center" alignItems="center" gap={1}>
+            <Panel
                 flexDirection="column"
-                border={true}
-                borderStyle="rounded"
-                borderColor={Theme.borderFocused}
                 title={title}
-                paddingLeft={3}
-                paddingRight={3}
-                paddingTop={1}
-                paddingBottom={1}
-                minWidth={60}
+                padding={undefined}
+                width={60}
+                focused
             >
-                <box flexDirection="column" gap={1}>
+                <Container flexDirection="column" gap={1}>
                     {commands.map((item, idx) => {
                         const isSelected = idx === selectedIndex;
-                        const prefix = isSelected ? "► " : "  ";
                         const label = item.label ?? item.command.displayName ?? item.command.name;
                         const description = item.description ?? item.command.description;
 
-                        // Show mode indicators
                         const modeIndicator = getModeIndicator(item.command);
 
-                        if (isSelected) {
-                            return (
-                                <box key={item.command.name} flexDirection="column">
-                                    <text fg="#000000" bg="cyan">
-                                        {prefix}{label} {modeIndicator}
-                                    </text>
-                                    <text fg={Theme.label}>
-                                        {"    "}{description}
-                                    </text>
-                                </box>
-                            );
-                        }
-
                         return (
-                            <box key={item.command.name} flexDirection="column">
-                                <text fg={Theme.value}>
-                                    {prefix}{label} {modeIndicator}
-                                </text>
-                                <text fg={Theme.border}>
-                                    {"    "}{description}
-                                </text>
-                            </box>
+                            <MenuItem
+                                key={item.command.name}
+                                label={label}
+                                description={description}
+                                suffix={modeIndicator}
+                                selected={isSelected}
+                                onActivate={() => onSelect(item.command)}
+                            />
                         );
                     })}
-                </box>
-            </box>
+                </Container>
+            </Panel>
 
-            <text fg={Theme.label}>
-                ↑↓ Navigate • Enter Select • Esc {breadcrumb?.length ? "Back" : "Exit"}
-            </text>
-        </box>
+            <Label color="mutedText">↑/↓ Navigate • Enter Select • Esc {breadcrumb?.length ? "Back" : "Exit"}</Label>
+        </Container>
     );
 }
 
@@ -156,11 +115,5 @@ function getModeIndicator(command: Command): string {
         return "→";
     }
     
-    const cli = command.supportsCli();
-    const tui = command.supportsTui();
-    
-    if (cli && tui) return "";
-    if (cli) return "[cli]";
-    if (tui) return "[tui]";
     return "";
 }