@pablozaiden/terminatui 0.2.0 → 0.3.0

package/src/tui/components/CliModal.tsx

@@ -1,81 +0,0 @@
-import { Theme } from "../theme.ts";
-import { useKeyboardHandler, KeyboardPriority } from "../hooks/useKeyboardHandler.ts";
-
-interface CliModalProps {
-    /** CLI command to display */
-    command: string;
-    /** Whether the modal is visible */
-    visible: boolean;
-    /** Called when the modal should close */
-    onClose: () => void;
-    /** Called when the command should be copied */
-    onCopy?: (content: string, label: string) => void;
-}
-
-/**
- * Modal displaying the CLI command equivalent of the current config.
- */
-export function CliModal({
-    command,
-    visible,
-    onClose,
-    onCopy,
-}: CliModalProps) {
-    // Modal keyboard handler
-    useKeyboardHandler(
-        (event) => {
-            const { key } = event;
-            
-            if (key.name === "escape" || key.name === "return" || key.name === "enter") {
-                onClose();
-                event.stopPropagation();
-                return;
-            }
-
-            // Y to copy
-            if (key.name === "y") {
-                onCopy?.(command, "CLI command");
-                event.stopPropagation();
-                return;
-            }
-        },
-        KeyboardPriority.Modal,
-        { enabled: visible, modal: true }
-    );
-
-    if (!visible) {
-        return null;
-    }
-
-    return (
-        <box
-            position="absolute"
-            top={4}
-            left={4}
-            width="80%"
-            height={10}
-            backgroundColor={Theme.overlay}
-            border={true}
-            borderStyle="rounded"
-            borderColor={Theme.overlayTitle}
-            padding={1}
-            flexDirection="column"
-            gap={1}
-            zIndex={20}
-        >
-            <text fg={Theme.overlayTitle}>
-                <strong>CLI Command</strong>
-            </text>
-
-            <scrollbox scrollX={true} height={3}>
-                <text fg={Theme.value}>
-                    {command}
-                </text>
-            </scrollbox>
-
-            <text fg={Theme.statusText}>
-                Ctrl+Y to copy • Enter or Esc to close
-            </text>
-        </box>
-    );
-}

package/src/tui/components/EditorModal.tsx

@@ -1,177 +0,0 @@
-import { useState, useEffect } from "react";
-import type { SelectOption } from "@opentui/core";
-import { Theme } from "../theme.ts";
-import { useKeyboardHandler, KeyboardPriority } from "../hooks/useKeyboardHandler.ts";
-import type { FieldConfig } from "./types.ts";
-
-interface EditorModalProps {
-    /** The key of the field being edited */
-    fieldKey: string | null;
-    /** The current value of the field */
-    currentValue: unknown;
-    /** Whether the modal is visible */
-    visible: boolean;
-    /** Called when the user submits a new value */
-    onSubmit: (value: unknown) => void;
-    /** Called when the user cancels editing */
-    onCancel: () => void;
-    /** Field configurations */
-    fieldConfigs: FieldConfig[];
-}
-
-/**
- * Modal for editing field values.
- * Supports text, number, enum, and boolean types.
- */
-export function EditorModal({
-    fieldKey,
-    currentValue,
-    visible,
-    onSubmit,
-    onCancel,
-    fieldConfigs,
-}: EditorModalProps) {
-    const [inputValue, setInputValue] = useState("");
-    const [selectIndex, setSelectIndex] = useState(0);
-
-    // Reset state when field changes
-    useEffect(() => {
-        if (fieldKey && visible) {
-            setInputValue(String(currentValue ?? ""));
-
-            // For enums, find current index
-            const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
-            if (fieldConfig?.options) {
-                const idx = fieldConfig.options.findIndex((o) => o.value === currentValue);
-                setSelectIndex(idx >= 0 ? idx : 0);
-            }
-        }
-    }, [fieldKey, currentValue, visible, fieldConfigs]);
-
-    // Modal keyboard handler - blocks all keys from bubbling out of the modal
-    useKeyboardHandler(
-        (event) => {
-            if (event.key.name === "escape") {
-                onCancel();
-            }
-        },
-        KeyboardPriority.Modal,
-        { enabled: visible, modal: true }
-    );
-
-    if (!visible || !fieldKey) {
-        return null;
-    }
-
-    const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
-    if (!fieldConfig) {
-        return null;
-    }
-
-    const isEnum = fieldConfig.type === "enum" && fieldConfig.options;
-    const isBoolean = fieldConfig.type === "boolean";
-    const isNumber = fieldConfig.type === "number";
-
-    const handleInputSubmit = (value: string) => {
-        if (isNumber) {
-            onSubmit(parseInt(value.replace(/[^0-9-]/g, ""), 10) || 0);
-        } else {
-            onSubmit(value);
-        }
-    };
-
-    const handleSelectIndexChange = (index: number, _option: SelectOption | null) => {
-        setSelectIndex(index);
-    };
-
-    const handleSelectSubmit = (_index: number, option: SelectOption | null) => {
-        if (option) {
-            onSubmit(option.value);
-        }
-    };
-
-    const handleBooleanSubmit = (_index: number, option: SelectOption | null) => {
-        if (option) {
-            onSubmit(option.value === true);
-        }
-    };
-
-    // Boolean uses select with True/False options
-    const booleanOptions: SelectOption[] = [
-        { name: "False", description: "", value: false },
-        { name: "True", description: "", value: true },
-    ];
-
-    return (
-        <box
-            position="absolute"
-            top={4}
-            left={6}
-            width="60%"
-            height={12}
-            backgroundColor={Theme.overlay}
-            border={true}
-            borderStyle="rounded"
-            borderColor={Theme.overlayTitle}
-            padding={1}
-            flexDirection="column"
-            gap={1}
-            zIndex={20}
-        >
-            <text fg={Theme.overlayTitle}>
-                <strong>Edit: {fieldConfig.label}</strong>
-            </text>
-
-            {isEnum && fieldConfig.options && (
-                <select
-                    options={fieldConfig.options.map((o) => ({
-                        name: o.name,
-                        value: o.value,
-                        description: "",
-                    }))}
-                    selectedIndex={selectIndex}
-                    focused={true}
-                    onChange={handleSelectIndexChange}
-                    onSelect={handleSelectSubmit}
-                    showScrollIndicator={true}
-                    showDescription={false}
-                    height={6}
-                    width="100%"
-                    wrapSelection={true}
-                    selectedBackgroundColor="#61afef"
-                    selectedTextColor="#1e2127"
-                />
-            )}
-
-            {isBoolean && (
-                <select
-                    options={booleanOptions}
-                    selectedIndex={currentValue ? 1 : 0}
-                    focused={true}
-                    onSelect={handleBooleanSubmit}
-                    showScrollIndicator={false}
-                    showDescription={false}
-                    height={2}
-                    width="100%"
-                    wrapSelection={true}
-                    selectedBackgroundColor="#61afef"
-                    selectedTextColor="#1e2127"
-                />
-            )}
-
-            {!isEnum && !isBoolean && (
-                <input
-                    value={inputValue}
-                    placeholder={fieldConfig.placeholder ?? `Enter ${fieldConfig.label.toLowerCase()}...`}
-                    focused={true}
-                    onInput={(value) => setInputValue(value)}
-                    onSubmit={handleInputSubmit}
-                />
-            )}
-
-            <text fg={Theme.statusText}>
-                Enter to save, Esc to cancel
-            </text>
-        </box>
-    );
-}

package/src/tui/components/LogsPanel.tsx

@@ -1,86 +0,0 @@
-import { Theme } from "../theme.ts";
-import { LogLevel, type LogEntry } from "../hooks/useLogStream.ts";
-
-// Colors for different log levels
-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",
-};
-
-interface LogsPanelProps {
-    /** Log entries to display */
-    logs: LogEntry[];
-    /** Whether the panel is visible */
-    visible: boolean;
-    /** Whether the panel is focused */
-    focused: boolean;
-    /** Whether to expand to fill available space */
-    expanded?: boolean;
-}
-
-/**
- * Panel displaying log entries with color-coded levels.
- */
-export function LogsPanel({
-    logs,
-    visible,
-    focused,
-    expanded = false,
-}: LogsPanelProps) {
-    if (!visible) {
-        return null;
-    }
-
-    const borderColor = focused ? Theme.borderFocused : Theme.border;
-    const title = `Logs - ${logs.length}`;
-
-    // When expanded, grow to fill. Otherwise fixed height.
-    const boxProps = expanded
-        ? { flexGrow: 1 }
-        : { height: 10, flexShrink: 0 };
-
-    return (
-        <box
-            flexDirection="column"
-            border={true}
-            borderStyle="rounded"
-            borderColor={borderColor}
-            title={title}
-            padding={1}
-            {...boxProps}
-        >
-            <scrollbox
-                scrollY={true}
-                flexGrow={1}
-                stickyScroll={true}
-                stickyStart="bottom"
-                focused={focused}
-            >
-                <box flexDirection="column" gap={0}>
-                    {logs.map((log, idx) => {
-                        const color = LogColors[log.level] ?? Theme.statusText;
-                        // Strip ANSI codes but preserve line breaks
-                        const sanitized = typeof Bun !== "undefined"
-                            ? Bun.stripANSI(log.message).trim()
-                            : log.message.replace(/\x1B\[[0-9;]*[a-zA-Z]/g, "").trim();
-
-                        return (
-                            <text key={`${log.timestamp.getTime()}-${idx}`} fg={color}>
-                                {sanitized}
-                            </text>
-                        );
-                    })}
-
-                    {logs.length === 0 && (
-                        <text fg={Theme.label}>No logs yet...</text>
-                    )}
-                </box>
-            </scrollbox>
-        </box>
-    );
-}

package/src/tui/components/index.ts

@@ -1,13 +0,0 @@
-export { FieldRow } from "./FieldRow.tsx";
-export { ActionButton } from "./ActionButton.tsx";
-export { Header } from "./Header.tsx";
-export { StatusBar } from "./StatusBar.tsx";
-export { LogsPanel } from "./LogsPanel.tsx";
-export { ResultsPanel } from "./ResultsPanel.tsx";
-export { ConfigForm } from "./ConfigForm.tsx";
-export { EditorModal } from "./EditorModal.tsx";
-export { CliModal } from "./CliModal.tsx";
-export { CommandSelector } from "./CommandSelector.tsx";
-export { JsonHighlight, type JsonHighlightProps } from "./JsonHighlight.tsx";
-
-export type { FieldType, FieldOption, FieldConfig } from "./types.ts";

package/src/tui/context/index.ts

@@ -1,7 +0,0 @@
-export {
-    KeyboardProvider,
-    useKeyboardContext,
-    KeyboardPriority,
-    type KeyboardEvent,
-    type KeyboardHandler,
-} from "./KeyboardContext.tsx";

package/src/tui/hooks/index.ts

@@ -1,35 +0,0 @@
-export {
-    useKeyboardHandler,
-    KeyboardPriority,
-    type KeyboardEvent,
-} from "./useKeyboardHandler.ts";
-
-export {
-    useClipboard,
-    type UseClipboardResult,
-} from "./useClipboard.ts";
-
-export {
-    useSpinner,
-    type UseSpinnerResult,
-} from "./useSpinner.ts";
-
-export {
-    useConfigState,
-    type UseConfigStateOptions,
-    type UseConfigStateResult,
-} from "./useConfigState.ts";
-
-export {
-    useCommandExecutor,
-    type UseCommandExecutorResult,
-} from "./useCommandExecutor.ts";
-
-export {
-    useLogStream,
-    LogLevel,
-    type LogEntry,
-    type LogEvent,
-    type LogSource,
-    type UseLogStreamResult,
-} from "./useLogStream.ts";

package/src/tui/hooks/useKeyboardHandler.ts

@@ -1,91 +0,0 @@
-import { useEffect, useId, useRef } from "react";
-import {
-    useKeyboardContext,
-    KeyboardPriority,
-    type KeyboardHandler,
-    type KeyboardEvent,
-} from "../context/KeyboardContext.tsx";
-
-interface UseKeyboardHandlerOptions {
-    /**
-     * Whether the handler is currently enabled.
-     * When false, the handler is unregistered.
-     * Useful for conditionally handling keys only when focused.
-     * @default true
-     */
-    enabled?: boolean;
-
-    /**
-     * When true, automatically calls stopPropagation() after the handler runs,
-     * blocking keys from reaching lower-priority handlers.
-     * Does NOT block OpenTUI primitives (input/select) from receiving keys.
-     * Use this for modal dialogs that should capture keyboard focus.
-     * @default false
-     */
-    modal?: boolean;
-}
-
-/**
- * Register a keyboard handler with the KeyboardProvider.
- *
- * @param handler - Callback invoked on keyboard events.
- *   - Call `event.stopPropagation()` to stop our handlers from receiving the event.
- *   - Call `event.key.preventDefault()` to also block OpenTUI primitives.
- * @param priority - Handler priority level. Higher priorities are called first.
- * @param options - Optional configuration (e.g., enabled flag, modal behavior).
- *
- * @example
- * ```tsx
- * // Modal handler - blocks lower-priority handlers but lets OpenTUI primitives work
- * useKeyboardHandler(
- *     (event) => {
- *         if (event.key.name === "escape") {
- *             onClose();
- *         }
- *         // Other keys pass through to <input>/<select> but not to ConfigForm
- *     },
- *     KeyboardPriority.Modal,
- *     { enabled: isVisible, modal: true }
- * );
- * ```
- */
-export function useKeyboardHandler(
-    handler: KeyboardHandler,
-    priority: KeyboardPriority,
-    options: UseKeyboardHandlerOptions = {}
-): void {
-    const { enabled = true, modal = false } = options;
-    const { register, unregister } = useKeyboardContext();
-    const id = useId();
-    
-    // Keep handler ref stable to avoid re-registrations on every render
-    const handlerRef = useRef(handler);
-    handlerRef.current = handler;
-
-    // Keep modal ref stable
-    const modalRef = useRef(modal);
-    modalRef.current = modal;
-
-    useEffect(() => {
-        if (!enabled) {
-            unregister(id);
-            return;
-        }
-
-        // Register with a stable wrapper that calls the current handler
-        register(id, (event: KeyboardEvent) => {
-            handlerRef.current(event);
-            // For modals, always stop propagation to our handlers (but not OpenTUI primitives)
-            if (modalRef.current) {
-                event.stopPropagation();
-            }
-        }, priority);
-
-        return () => {
-            unregister(id);
-        };
-    }, [id, priority, enabled, register, unregister]);
-}
-
-export { KeyboardPriority };
-export type { KeyboardEvent };

package/src/tui/hooks/useLogStream.ts

@@ -1,96 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-/**
- * Log levels for display styling.
- */
-export enum LogLevel {
-    Silly = "silly",
-    Trace = "trace",
-    Debug = "debug",
-    Info = "info",
-    Warn = "warn",
-    Error = "error",
-    Fatal = "fatal",
-}
-
-/**
- * Log entry for display.
- */
-export interface LogEntry {
-    timestamp: Date;
-    level: LogLevel;
-    message: string;
-}
-
-/**
- * Log event emitted by the log source.
- */
-export interface LogEvent {
-    level: LogLevel;
-    message: string;
-}
-
-/**
- * Log source that can be subscribed to.
- */
-export interface LogSource {
-    /** Subscribe to log events, returns unsubscribe function */
-    subscribe: (callback: (event: LogEvent) => void) => () => void;
-}
-
-export interface UseLogStreamResult {
-    /** All collected log entries */
-    logs: LogEntry[];
-    /** Clear all logs */
-    clearLogs: () => void;
-    /** Add a log entry manually */
-    addLog: (level: LogLevel, message: string) => void;
-}
-
-/**
- * Hook for subscribing to a log stream.
- * 
- * @param source - Optional log source to subscribe to
- * @returns Log stream state and functions
- * 
- * @example
- * ```tsx
- * const { logs, clearLogs } = useLogStream(myLogSource);
- * ```
- */
-export function useLogStream(source?: LogSource): UseLogStreamResult {
-    const [logs, setLogs] = useState<LogEntry[]>([]);
-
-    // Subscribe to log source
-    useEffect(() => {
-        if (!source) return;
-
-        const unsubscribe = source.subscribe((event: LogEvent) => {
-            setLogs((prev) => {
-                const newEntry: LogEntry = {
-                    timestamp: new Date(),
-                    level: event.level,
-                    message: event.message,
-                };
-                return [...prev, newEntry];
-            });
-        });
-
-        return () => {
-            unsubscribe?.();
-        };
-    }, [source]);
-
-    const clearLogs = useCallback(() => {
-        setLogs([]);
-    }, []);
-
-    const addLog = useCallback((level: LogLevel, message: string) => {
-        setLogs((prev) => [
-            ...prev,
-            { timestamp: new Date(), level, message },
-        ]);
-    }, []);
-
-    return { logs, clearLogs, addLog };
-}

package/src/tui/index.ts

@@ -1,65 +0,0 @@
-// Main TUI components
-export { TuiApp } from "./TuiApp.tsx";
-export { TuiApplication, type TuiApplicationConfig, type CustomField } from "./TuiApplication.tsx";
-
-// Theme
-export { Theme, type ThemeColors } from "./theme.ts";
-
-// Context
-export {
-    KeyboardProvider,
-    useKeyboardContext,
-    KeyboardPriority,
-    type KeyboardEvent,
-    type KeyboardHandler,
-} from "./context/index.ts";
-
-// Hooks
-export {
-    useKeyboardHandler,
-    useClipboard,
-    useSpinner,
-    useConfigState,
-    useCommandExecutor,
-    useLogStream,
-    LogLevel,
-    type UseClipboardResult,
-    type UseSpinnerResult,
-    type UseConfigStateOptions,
-    type UseConfigStateResult,
-    type UseCommandExecutorResult,
-    type LogEntry,
-    type LogEvent,
-    type LogSource,
-    type UseLogStreamResult,
-} from "./hooks/index.ts";
-
-// Components
-export {
-    FieldRow,
-    ActionButton,
-    Header,
-    StatusBar,
-    LogsPanel,
-    ResultsPanel,
-    ConfigForm,
-    EditorModal,
-    CliModal,
-    CommandSelector,
-    JsonHighlight,
-    type FieldType,
-    type FieldOption,
-    type FieldConfig,
-    type JsonHighlightProps,
-} from "./components/index.ts";
-
-// Utilities
-export {
-    schemaToFieldConfigs,
-    groupFieldConfigs,
-    getFieldDisplayValue,
-    buildCliCommand,
-} from "./utils/index.ts";
-
-// Legacy export for backward compatibility
-export * from "./app.ts";

package/src/tui/utils/index.ts

@@ -1,13 +0,0 @@
-export {
-    schemaToFieldConfigs,
-    groupFieldConfigs,
-    getFieldDisplayValue,
-} from "./schemaToFields.ts";
-
-export { buildCliCommand } from "./buildCliCommand.ts";
-
-export {
-    loadPersistedParameters,
-    savePersistedParameters,
-    clearPersistedParameters,
-} from "./parameterPersistence.ts";

package/src/types/index.ts

@@ -1 +0,0 @@
-export * from "./command.ts";

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["ESNext"],
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-    "jsxImportSource": "@opentui/react",
-    "allowJs": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noUncheckedIndexedAccess": true,
-    "esModuleInterop": true,
-    "types": ["bun"]
-  },
-  "include": ["src/**/*", "examples/**/*"]
-}