@pablozaiden/terminatui 0.3.0 → 0.4.1

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

package/src/tui/context/KeyboardContext.tsx

@@ -1,132 +0,0 @@
-import {
-    createContext,
-    useContext,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-    type ReactNode,
-} from "react";
-import type { KeyboardEvent, KeyHandler } from "../adapters/types.ts";
-import { useRenderer } from "./RendererContext.tsx";
-
-function useRendererKeyboard() {
-    return useRenderer().keyboard;
-}
-
-
-export type GlobalKeyHandler = (event: KeyboardEvent) => boolean;
-
-interface KeyboardContextValue {
-    /**
-     * Set the active handler (only one at a time - the topmost screen/modal).
-     * Returns unregister function.
-     */
-    setActiveHandler: (id: string, handler: KeyHandler) => () => void;
-
-    /**
-     * Set the global handler (processed before active handler).
-     * Only one global handler is supported.
-     * Returns unregister function.
-     */
-    setGlobalHandler: (handler: GlobalKeyHandler) => () => void;
-
-    /**
-     * Temporarily capture input (e.g. while an Ink TextInput is focused).
-     *
-     * While captured, only the global handler can receive events; the active handler
-     * stack is skipped. This prevents screens from doing extra work on every
-     * character typed.
-     */
-    setInputCaptured: (captured: boolean) => void;
-}
-
-const KeyboardContext = createContext<KeyboardContextValue | null>(null);
-
-interface KeyboardProviderProps {
-    children: ReactNode;
-}
-
-/**
- * Provider that coordinates keyboard handling with a simple model:
- * 1. Global handler processes keys first (for app-wide shortcuts like Ctrl+L, Ctrl+Y, Esc)
- * 2. If not handled, the active handler (topmost screen/modal) gets the key
- * 
- * Only ONE active handler is registered at a time - when a modal opens, it becomes
- * the active handler; when it closes, the previous handler is restored.
- */
-export function KeyboardProvider({ children }: KeyboardProviderProps) {
-    const keyboard = useRendererKeyboard();
-
-    const handlerStackRef = useRef<{ id: string; handler: KeyHandler }[]>([]);
-    const globalHandlerRef = useRef<GlobalKeyHandler | null>(null);
-    const inputCapturedRef = useRef(false);
-
-    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: GlobalKeyHandler) => {
-        const previous = globalHandlerRef.current;
-        globalHandlerRef.current = handler;
-
-        return () => {
-            globalHandlerRef.current = previous;
-        };
-    }, []);
-
-    useEffect(() => {
-        const unregister = keyboard.setGlobalHandler((event: KeyboardEvent) => {
-            if (globalHandlerRef.current?.(event)) {
-                return true;
-            }
-
-            if (inputCapturedRef.current) {
-                return false;
-            }
-
-            const activeHandler = handlerStackRef.current[handlerStackRef.current.length - 1];
-            if (activeHandler) {
-                return activeHandler.handler(event);
-            }
-
-            return false;
-        });
-
-        return () => {
-            unregister();
-        };
-    }, [keyboard]);
-
-    const setInputCaptured = useCallback((captured: boolean) => {
-        inputCapturedRef.current = captured;
-    }, []);
-
-    const value = useMemo<KeyboardContextValue>(
-        () => ({ setActiveHandler, setGlobalHandler, setInputCaptured }),
-        [setActiveHandler, setGlobalHandler, setInputCaptured]
-    );
-
-    return (
-        <KeyboardContext.Provider value={value}>
-            {children}
-        </KeyboardContext.Provider>
-    );
-}
-
-/**
- * Access the keyboard context.
- * @throws Error if used outside of KeyboardProvider
- */
-export function useKeyboardContext(): KeyboardContextValue {
-    const context = useContext(KeyboardContext);
-    if (!context) {
-        throw new Error("useKeyboardContext must be used within a KeyboardProvider");
-    }
-    return context;
-}

package/src/tui/hooks/useActiveKeyHandler.ts

@@ -1,75 +0,0 @@
-import { useEffect, useId, useRef } from "react";
-import { useKeyboardContext } from "../context/KeyboardContext.tsx";
-import type { KeyHandler } from "../adapters/types.ts";
-
-interface UseActiveKeyHandlerOptions {
-    /**
-     * Whether the handler is currently enabled.
-     * When false, the handler is unregistered.
-     * @default true
-     */
-    enabled?: boolean;
-}
-
-/**
- * Register as the active keyboard handler.
- * 
- * Only ONE handler is active at a time - the most recently registered enabled handler.
- * When a modal opens and calls this hook, it becomes the active handler.
- * When it unmounts or becomes disabled, the previous handler is restored.
- * 
- * The handler receives keys AFTER global shortcuts (Ctrl+L, Ctrl+Y, Esc) are processed.
- * Return true from the handler if the key was handled.
- * 
- * @param handler - Callback invoked on keyboard events. Return true if handled.
- * @param options - Optional configuration (e.g., enabled flag).
- * 
- * @example
- * ```tsx
- * // In a screen component
- * useActiveKeyHandler((event) => {
- *     if (event.name === "return" || event.name === "enter") {
- *         onSelect();
- *         return true;
- *     }
- *     return false;
- * });
- * 
- * // In a modal - becomes active when visible
- * useActiveKeyHandler(
- *     (event) => {
- *         if (event.name === "escape") {
- *             onClose();
- *             return true;
- *         }
- *         return false;
- *     },
- *     { enabled: visible }
- * );
- * ```
- */
-export function useActiveKeyHandler(
-    handler: KeyHandler,
-    options: UseActiveKeyHandlerOptions = {}
-): void {
-    const { enabled = true } = options;
-    const { setActiveHandler } = useKeyboardContext();
-    const id = useId();
-    const handlerRef = useRef(handler);
-    
-    // Keep ref updated without triggering re-registration
-    handlerRef.current = handler;
-
-    useEffect(() => {
-        if (!enabled) {
-            return;
-        }
-
-        // Register a stable wrapper that calls the current handler
-        const unregister = setActiveHandler(id, (event) => handlerRef.current(event));
-        return unregister;
-    }, [id, enabled, setActiveHandler]);
-}
-
-// Re-export types for convenience
-export type { KeyHandler };

package/src/tui/hooks/useClipboard.ts

@@ -1,81 +0,0 @@
-import { useCallback, useState } from "react";
-import * as fs from "fs";
-
-
-function copyWithOsc52(text: string): boolean {
-    try {
-        const cleanText = Bun.stripANSI(text);
-        const base64 = Buffer.from(cleanText).toString("base64");
-        const osc52 = `\x1b]52;c;${base64}\x07`;
-
-        try {
-            const fd = fs.openSync("/dev/tty", "w");
-            fs.writeSync(fd, osc52);
-            fs.closeSync(fd);
-        } catch {
-            process.stdout.write(osc52);
-        }
-
-        return true;
-    } catch {
-        return false;
-    }
-}
-
-async function copyWithPbcopy(text: string): Promise<boolean> {
-    try {
-        const cleanText = Bun.stripANSI(text);
-        const proc = Bun.spawn(["pbcopy"], {
-            stdin: "pipe",
-            stdout: "ignore",
-            stderr: "ignore",
-        });
-
-        proc.stdin.write(cleanText);
-        proc.stdin.end();
-
-        const exitCode = await proc.exited;
-        return exitCode === 0;
-    } catch {
-        return false;
-    }
-}
-
-export async function copyToClipboard(text: string): Promise<boolean> {
-    if (process.env["TERM_PROGRAM"] === "Apple_Terminal") {
-        return await copyWithPbcopy(text);
-    }
-
-    return copyWithOsc52(text);
-}
-
-export interface UseClipboardResult {
-    /** Last action message for status display */
-    lastAction: string;
-    /** Set the last action message */
-    setLastAction: (action: string) => void;
-    /** Copy and set a success message */
-    copyWithMessage: (text: string, label: string) => void;
-}
-
-/**
- * Hook for clipboard operations using OSC 52.
- * Works in most modern terminal emulators.
- */
-export function useClipboard(): UseClipboardResult {
-    const [lastAction, setLastAction] = useState("");
-
-    const copyWithMessage = useCallback((text: string, label: string) => {
-        void (async () => {
-            const success = await copyToClipboard(text);
-            if (!success) {
-                return;
-            }
-
-            setLastAction(`✓ ${label} copied to clipboard`);
-            setTimeout(() => setLastAction(""), 2000);
-        })();
-    }, []);
-
-    return { lastAction, setLastAction, copyWithMessage };
-}

package/src/tui/hooks/useClipboardProvider.ts

@@ -1,42 +0,0 @@
-import { useEffect, useId } from "react";
-import { useClipboardContext, type ClipboardContent, type ClipboardProvider } from "../context/ClipboardContext.tsx";
-
-/**
- * Hook for registering a clipboard provider.
- * The provider is automatically registered when mounted and unregistered when unmounted.
- * 
- * @param provider - Function that returns clipboard content or null
- * @param enabled - Whether the provider is active (default: true)
- * 
- * @example
- * ```tsx
- * // In a screen component
- * useClipboardProvider(() => ({
- *     content: JSON.stringify(values, null, 2),
- *     label: "Config"
- * }));
- * 
- * // In a modal that may or may not have content
- * useClipboardProvider(() => {
- *     if (!hasContent) return null;
- *     return { content: data, label: "Modal Data" };
- * });
- * ```
- */
-export function useClipboardProvider(
-    provider: ClipboardProvider,
-    enabled: boolean = true
-): void {
-    const { register } = useClipboardContext();
-    const id = useId();
-
-    useEffect(() => {
-        if (!enabled) return;
-
-        const unregister = register(id, provider);
-        return unregister;
-    }, [id, provider, enabled, register]);
-}
-
-// Re-export types for convenience
-export type { ClipboardContent, ClipboardProvider };

package/src/tui/hooks/useGlobalKeyHandler.ts

@@ -1,54 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useKeyboardContext, type GlobalKeyHandler } from "../context/KeyboardContext.tsx";
-
-/**
- * Set the global keyboard handler.
- * 
- * The global handler receives ALL key events FIRST, before the active handler.
- * Use this for app-wide shortcuts like Ctrl+L (logs), Ctrl+Y (copy), Esc (back).
- * 
- * Return true from the handler if the key was handled (prevents active handler from receiving it).
- * 
- * Only ONE global handler is supported - typically set by the main app component.
- * 
- * @param handler - Callback invoked on all keyboard events. Return true if handled.
- * 
- * @example
- * ```tsx
- * // In TuiRoot
- * useGlobalKeyHandler((event) => {
- *     const key = event;
- *     
- *     if (key.ctrl && key.name === "l") {
- *         toggleLogs();
- *         return true;
- *     }
- *     
- *     if (key.name === "escape") {
- *         handleBack();
- *         return true;
- *     }
- *     
- *     return false; // Let active handler process
- * });
- * ```
- */
-export function useGlobalKeyHandler(handler: GlobalKeyHandler): void {
-    const { setGlobalHandler } = useKeyboardContext();
-    const handlerRef = useRef(handler);
-    
-    // Keep ref updated without triggering re-registration
-    handlerRef.current = handler;
-
-    useEffect(() => {
-        // Set a stable wrapper that calls the current handler
-        const unregister = setGlobalHandler((event) => handlerRef.current(event));
-
-        return () => {
-            unregister();
-        };
-    }, [setGlobalHandler]);
-}
-
-// Re-export types for convenience
-export type { GlobalKeyHandler };