@pablozaiden/terminatui 0.3.0-beta-1 → 0.4.0

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

@@ -1,13 +0,0 @@
-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/components/CommandSelector.tsx

@@ -1,119 +0,0 @@
-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 */
-    command: Command;
-    /** Display label (defaults to command name) */
-    label?: string;
-    /** Description (defaults to command description) */
-    description?: string;
-}
-
-interface CommandSelectorProps {
-    /** Commands to display */
-    commands: CommandItem[];
-    /** Currently selected index */
-    selectedIndex: number;
-    /** Called when selection changes */
-    onSelectionChange: (index: number) => void;
-    /** Called when a command is selected */
-    onSelect: (command: Command) => void;
-    /** Breadcrumb path for nested commands */
-    breadcrumb?: string[];
-}
-
-/**
- * Command selection menu.
- */
-export function CommandSelector({
-    commands,
-    selectedIndex,
-    onSelectionChange,
-    onSelect,
-    breadcrumb,
-}: CommandSelectorProps) {
-    // 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;
-        }
-
-        if (key.name === "up") {
-            const newIndex = Math.max(selectedIndex - 1, 0);
-            onSelectionChange(newIndex);
-            return true;
-        }
-
-        // Enter to select command
-        if (key.name === "return" || key.name === "enter") {
-            const selected = commands[selectedIndex];
-            if (selected) {
-                onSelect(selected.command);
-            }
-            return true;
-        }
-
-        return false;
-    });
-
-    const title = breadcrumb?.length 
-        ? `Select Command (${breadcrumb.join(" › ")})`
-        : "Select Command";
-
-    return (
-        <Container flexDirection="column" flex={1} justifyContent="center" alignItems="center" gap={1}>
-            <Panel
-                flexDirection="column"
-                title={title}
-                padding={undefined}
-                width={60}
-                focused
-            >
-                <Container flexDirection="column" gap={1}>
-                    {commands.map((item, idx) => {
-                        const isSelected = idx === selectedIndex;
-                        const label = item.label ?? item.command.displayName ?? item.command.name;
-                        const description = item.description ?? item.command.description;
-
-                        const modeIndicator = getModeIndicator(item.command);
-
-                        return (
-                            <MenuItem
-                                key={item.command.name}
-                                label={label}
-                                description={description}
-                                suffix={modeIndicator}
-                                selected={isSelected}
-                                onActivate={() => onSelect(item.command)}
-                            />
-                        );
-                    })}
-                </Container>
-            </Panel>
-
-            <Label color="mutedText">↑/↓ Navigate • Enter Select • Esc {breadcrumb?.length ? "Back" : "Exit"}</Label>
-        </Container>
-    );
-}
-
-/**
- * Get mode indicator for a command (e.g., "[cli]", "[tui]", "→" for subcommands).
- */
-function getModeIndicator(command: Command): string {
-    // Show navigation indicator for container commands with navigable subcommands
-    // (excluding commands that don't support TUI)
-    const navigableSubCommands = command.subCommands?.filter((sub) => sub.supportsTui()) ?? [];
-    if (navigableSubCommands.length > 0) {
-        return "→";
-    }
-    
-    return "";
-}

package/src/tui/components/ConfigForm.tsx

@@ -1,174 +0,0 @@
-import { useRef, useEffect, type ReactNode } from "react";
-import { Field } from "../semantic/Field.tsx";
-import { MenuButton } from "../semantic/MenuButton.tsx";
-import { Panel } from "../semantic/Panel.tsx";
-import { ScrollView, type ScrollViewRef } from "../semantic/ScrollView.tsx";
-import { Container } from "../semantic/Container.tsx";
-import { useActiveKeyHandler } from "../hooks/useActiveKeyHandler.ts";
-import type { KeyboardEvent } from "../adapters/types.ts";
-import type { FieldConfig } from "./types.ts";
-
-interface ConfigFormProps {
-    /** Title for the form border */
-    title: string;
-    /** Field configurations */
-    fieldConfigs: FieldConfig[];
-    /** Current values */
-    values: Record<string, unknown>;
-    /** Currently selected index */
-    selectedIndex: number;
-    /** Whether the form is focused */
-    focused: boolean;
-    /** Called when selection changes */
-    onSelectionChange: (index: number) => void;
-    /** Called when a field should be edited */
-    onEditField: (fieldKey: string) => void;
-    /** Called when the action button is pressed */
-    onAction: () => void;
-    /** Function to get display value for a field */
-    getDisplayValue?: (key: string, value: unknown, type: string) => string;
-    /** The action button component */
-    actionButton: ReactNode;
-    /** Optional additional buttons rendered before the main action button */
-    additionalButtons?: { label: string; onPress: () => void }[];
-    /** Optional handler for additional keys (called before default handling) */
-    onKeyDown?: (event: KeyboardEvent) => boolean;
-}
-
-/**
- * Default display value formatter.
- */
-function defaultGetDisplayValue(_key: string, value: unknown, type: string): string {
-    if (type === "boolean") {
-        return value ? "True" : "False";
-    }
-    const strValue = String(value ?? "");
-    if (strValue === "") {
-        return "(empty)";
-    }
-    return strValue.length > 60 ? strValue.substring(0, 57) + "..." : strValue;
-}
-
-/**
- * Generic config form that renders fields from a schema.
- */
-export function ConfigForm({
-    title,
-    fieldConfigs,
-    values,
-    selectedIndex,
-    focused,
-    onSelectionChange,
-    onEditField,
-    onAction,
-    getDisplayValue = defaultGetDisplayValue,
-    actionButton,
-    additionalButtons = [],
-    onKeyDown,
-}: ConfigFormProps) {
-    const scrollViewRef = useRef<ScrollViewRef | null>(null);
-    const totalItems = fieldConfigs.length + additionalButtons.length + 1; // fields + additional buttons + action button
-
-    // Auto-scroll to keep selected item visible
-    useEffect(() => {
-        scrollViewRef.current?.scrollToIndex(selectedIndex);
-    }, [selectedIndex]);
-
-    // Handle keyboard events (only when focused)
-    useActiveKeyHandler(
-        (event: KeyboardEvent) => {
-            // Let parent handle first if provided
-            if (onKeyDown?.(event)) {
-                return true;
-            }
-
-            const key = event;
-
-            // Arrow key navigation
-            if (key.name === "down") {
-                const newIndex = Math.min(selectedIndex + 1, totalItems - 1);
-                onSelectionChange(newIndex);
-                return true;
-            }
-
-            if (key.name === "up") {
-                const newIndex = Math.max(selectedIndex - 1, 0);
-                onSelectionChange(newIndex);
-                return true;
-            }
-
-            // Enter to edit field, press additional button, or run action
-            if (key.name === "return" || key.name === "enter") {
-                if (selectedIndex < fieldConfigs.length) {
-                    // It's a field
-                    const fieldConfig = fieldConfigs[selectedIndex];
-                    if (fieldConfig) {
-                        onEditField(fieldConfig.key);
-                    }
-                } else if (selectedIndex < fieldConfigs.length + additionalButtons.length) {
-                    // It's an additional button
-                    const buttonIndex = selectedIndex - fieldConfigs.length;
-                    additionalButtons[buttonIndex]?.onPress();
-                } else {
-                    // It's the main action button
-                    onAction();
-                }
-                return true;
-            }
-
-            return false;
-        },
-        { enabled: focused }
-    );
-
-    return (
-        <Panel
-            title={title}
-            focused={focused}
-            flex={1}
-            padding={1}
-            flexDirection="column"
-        >
-            <ScrollView
-                axis="vertical"
-                flex={1}
-                scrollRef={(ref) => {
-                    scrollViewRef.current = ref;
-                }}
-            >
-                <Container flexDirection="column" gap={0}>
-                    {fieldConfigs.map((field, idx) => {
-                        const isSelected = idx === selectedIndex;
-                        const displayValue = getDisplayValue(
-                            field.key,
-                            values[field.key],
-                            field.type
-                        );
-
-                        return (
-                            <Field
-                                key={field.key}
-                                label={field.label}
-                                value={displayValue}
-                                selected={isSelected}
-                            />
-                        );
-                    })}
-
-                    {additionalButtons.map((btn, idx) => {
-                        const buttonSelectedIndex = fieldConfigs.length + idx;
-                        return (
-                            <MenuButton
-                                key={btn.label}
-                                label={btn.label}
-                                selected={selectedIndex === buttonSelectedIndex}
-                            />
-                        );
-                    })}
-
-                    {actionButton}
-                </Container>
-            </ScrollView>
-        </Panel>
-    );
-}

package/src/tui/components/Header.tsx

@@ -1,32 +0,0 @@
-import { Container } from "../semantic/Container.tsx";
-import { Label } from "../semantic/Label.tsx";
-import { Spacer } from "../semantic/Spacer.tsx";
-
-interface HeaderProps {
-    /** Application name */
-    name: string;
-    /** Application version */
-    version: string;
-    /** Optional breadcrumb path (e.g., ["run", "config"]) */
-    breadcrumb?: string[];
-}
-
-/**
- * Application header with name, version, and optional breadcrumb.
- */
-export function Header({ name, version, breadcrumb }: HeaderProps) {
-    const breadcrumbStr = breadcrumb?.length ? ` › ${breadcrumb.join(" › ")}` : "";
-
-    return (
-        <Container flexDirection="column" noShrink>
-            <Container flexDirection="row" justifyContent="space-between">
-                <Label color="mutedText" bold>
-                    {name}
-                    {breadcrumbStr}
-                </Label>
-                <Label color="mutedText">v{version}</Label>
-            </Container>
-            <Spacer size={1} />
-        </Container>
-    );
-}

package/src/tui/components/ModalBase.tsx

@@ -1,38 +0,0 @@
-import type { ReactNode } from "react";
-import { Panel } from "../semantic/Panel.tsx";
-import { Container } from "../semantic/Container.tsx";
-import { Overlay } from "../semantic/Overlay.tsx";
-
-type Dim = number | `${number}%` | "auto";
-
-interface ModalBaseProps {
-    title?: string;
-    width?: Dim;
-    height?: Dim;
-    top?: Dim;
-    left?: Dim;
-    right?: Dim;
-    bottom?: Dim;
-    children: ReactNode;
-}
-
-export function ModalBase({
-    title,
-    width = "80%",
-    height = "auto",
-    top = 4,
-    left = 4,
-    right,
-    bottom,
-    children,
-}: ModalBaseProps) {
-    return (
-        <Overlay zIndex={20} top={top} left={left} right={right} bottom={bottom} width={width} height={height}>
-            <Panel title={title} border={true} flexDirection="column" flex={1} padding={1} surface="overlay">
-                <Container flexDirection="column" gap={1} flex={1}>
-                    {children}
-                </Container>
-            </Panel>
-        </Overlay>
-    );
-}

package/src/tui/components/ResultsPanel.tsx

@@ -1,84 +0,0 @@
-import type { ReactNode } from "react";
-import type { CommandResult } from "../../core/command.ts";
-import { Container } from "../semantic/Container.tsx";
-import { Panel } from "../semantic/Panel.tsx";
-import { ScrollView } from "../semantic/ScrollView.tsx";
-import { Label } from "../semantic/Label.tsx";
-import { Value } from "../semantic/Value.tsx";
-
-interface ResultsPanelProps {
-    /** The result to display */
-    result: CommandResult | null;
-    /** Error to display (if any) */
-    error: Error | null;
-    /** Whether the panel is focused */
-    focused: boolean;
-    /** Custom result renderer */
-    renderResult?: (result: CommandResult) => ReactNode;
-}
-
-/**
- * Panel displaying command execution results.
- */
-export function ResultsPanel({
-    result,
-    error,
-    focused,
-    renderResult,
-}: ResultsPanelProps) {
-
-    // Determine content to display
-    let content: ReactNode;
-
-    if (error) {
-        content = (
-            <Container flexDirection="column" gap={1}>
-                <Label color="error" bold>
-                    Error
-                </Label>
-                <Label color="error">{error.message}</Label>
-            </Container>
-        );
-    } else if (result) {
-        if (renderResult) {
-            const customContent = renderResult(result);
-
-            if (typeof customContent === "string" || typeof customContent === "number" || typeof customContent === "boolean") {
-                // Wrap primitive results so the renderer gets a text node
-                content = <Value>{String(customContent)}</Value>;
-            } else {
-                content = customContent as ReactNode;
-            }
-        } else {
-            // Default JSON display
-            content = (
-                <Container flexDirection="column" gap={1}>
-                    {result.message && (
-                        <Label color={result.success ? "success" : "error"}>{result.message}</Label>
-                    )}
-                    {result.data !== undefined && result.data !== null && (
-                        <Value>{JSON.stringify(result.data, null, 2)}</Value>
-                    )}
-                </Container>
-            );
-        }
-    } else {
-        content = <Label color="mutedText">No results yet...</Label>;
-    }
-
-    return (
-        <Panel
-            title="Results"
-            focused={focused}
-            flex={1}
-            padding={1}
-            flexDirection="column"
-        >
-            <ScrollView axis="vertical" flex={1} focused={focused}>
-                <Container flexDirection="column">
-                    {content}
-                </Container>
-            </ScrollView>
-        </Panel>
-    );
-}

package/src/tui/components/StatusBar.tsx

@@ -1,44 +0,0 @@
-import { Label } from "../semantic/Label.tsx";
-import { Spinner } from "../semantic/Spinner.tsx";
-import { Panel } from "../semantic/Panel.tsx";
-import { Container } from "../semantic/Container.tsx";
-
-interface StatusBarProps {
-    /** Status message to display */
-    status: string;
-    /** Whether the app is currently running a command */
-    isRunning?: boolean;
-    /** Whether to show keyboard shortcuts */
-    showShortcuts?: boolean;
-    /** Custom shortcuts string (defaults to standard shortcuts) */
-    shortcuts?: string;
-}
-
-/**
- * Status bar showing current status, spinner, and keyboard shortcuts.
- */
-export function StatusBar({
-    status,
-    isRunning = false,
-    showShortcuts = true,
-    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back",
-}: StatusBarProps) {
-    return (
-        <Panel dense border={true} flexDirection="column" gap={0} height={showShortcuts ? 4 : 2}>
-            <Container flexDirection="row" justifyContent="space-between" padding={{ left: 1, right: 1 }}>
-                <Container flexDirection="row">
-                    <Spinner active={isRunning} />
-                    <Label color="success" bold>
-                        {status}
-                    </Label>
-                </Container>
-            </Container>
-
-            {showShortcuts ? (
-                <Container padding={{ left: 1, right: 1 }}>
-                    <Label color="mutedText">{shortcuts}</Label>
-                </Container>
-            ) : null}
-        </Panel>
-    );
-}

package/src/tui/components/logColors.ts

@@ -1,12 +0,0 @@
-import { LogLevel } from "../../core/logger";
-
-// Shared colors for log levels used across debug views.
-export const LogColors: Record<LogLevel, string> = {
-    [LogLevel.silly]: "#8c8c8c",
-    [LogLevel.trace]: "#6dd6ff",
-    [LogLevel.debug]: "#7bdcb5",
-    [LogLevel.info]: "#d6dde6",
-    [LogLevel.warn]: "#f5c542",
-    [LogLevel.error]: "#f78888",
-    [LogLevel.fatal]: "#ff5c8d",
-};

package/src/tui/components/types.ts

@@ -1,30 +0,0 @@
-/**
- * Field type for TUI forms.
- */
-export type FieldType = "text" | "number" | "enum" | "boolean";
-
-/**
- * Option for enum/select fields.
- */
-export interface FieldOption {
-    name: string;
-    value: unknown;
-}
-
-/**
- * Field configuration for TUI forms.
- */
-export interface FieldConfig {
-    /** Field key (must match a key in values) */
-    key: string;
-    /** Display label */
-    label: string;
-    /** Field type */
-    type: FieldType;
-    /** Options for enum type */
-    options?: FieldOption[];
-    /** Placeholder text for input fields */
-    placeholder?: string;
-    /** Group name for organizing fields */
-    group?: string;
-}

package/src/tui/context/ClipboardContext.tsx

@@ -1,87 +0,0 @@
-import { createContext, useContext, useRef, useCallback, type ReactNode } from "react";
-
-/**
- * Clipboard content that can be provided by a screen or modal.
- */
-export interface ClipboardContent {
-    content: string;
-    label: string;
-}
-
-/**
- * Provider function that returns clipboard content or null.
- */
-export type ClipboardProvider = () => ClipboardContent | null;
-
-interface ClipboardContextValue {
-    /**
-     * Register a clipboard provider. Returns an unregister function.
-     * Providers are stacked - the most recently registered provider is checked first.
-     */
-    register: (id: string, provider: ClipboardProvider) => () => void;
-
-    /**
-     * Get clipboard content from the topmost provider that returns content.
-     */
-    getContent: () => ClipboardContent | null;
-}
-
-const ClipboardContext = createContext<ClipboardContextValue | null>(null);
-
-interface ClipboardProviderProps {
-    children: ReactNode;
-}
-
-/**
- * Provider that manages clipboard content providers from screens and modals.
- * Providers are stacked - modals register on top of screens, so modal content
- * takes precedence when copying.
- */
-export function ClipboardProviderComponent({ children }: ClipboardProviderProps) {
-    const providersRef = useRef<Map<string, ClipboardProvider>>(new Map());
-    const orderRef = useRef<string[]>([]);
-
-    const register = useCallback((id: string, provider: ClipboardProvider) => {
-        providersRef.current.set(id, provider);
-        // Add to end (most recent)
-        orderRef.current = orderRef.current.filter((i) => i !== id);
-        orderRef.current.push(id);
-
-        return () => {
-            providersRef.current.delete(id);
-            orderRef.current = orderRef.current.filter((i) => i !== id);
-        };
-    }, []);
-
-    const getContent = useCallback((): ClipboardContent | null => {
-        // Check providers in reverse order (most recent first)
-        for (let i = orderRef.current.length - 1; i >= 0; i--) {
-            const id = orderRef.current[i];
-            const provider = providersRef.current.get(id!);
-            if (provider) {
-                const content = provider();
-                if (content) {
-                    return content;
-                }
-            }
-        }
-        return null;
-    }, []);
-
-    return (
-        <ClipboardContext.Provider value={{ register, getContent }}>
-            {children}
-        </ClipboardContext.Provider>
-    );
-}
-
-/**
- * Access the clipboard context.
- */
-export function useClipboardContext(): ClipboardContextValue {
-    const context = useContext(ClipboardContext);
-    if (!context) {
-        throw new Error("useClipboardContext must be used within a ClipboardProviderComponent");
-    }
-    return context;
-}