@pablozaiden/terminatui 0.3.0 → 0.4.0

package/src/tui/modals/CliModal.tsx

@@ -1,82 +0,0 @@
-import { useActiveKeyHandler } from "../hooks/useActiveKeyHandler.ts";
-import { Container } from "../semantic/Container.tsx";
-import { ScrollView } from "../semantic/ScrollView.tsx";
-import { ModalBase } from "../components/ModalBase.tsx";
-import { useClipboardProvider } from "../hooks/useClipboardProvider.ts";
-import { Label } from "../semantic/Label.tsx";
-import { Value } from "../semantic/Value.tsx";
-import type { ModalComponent, ModalDefinition } from "../registry.ts";
-
-export interface CliModalParams {
-    command: string;
-}
-
-export class CliModal implements ModalDefinition<CliModalParams> {
-    static readonly Id = "cli";
-
-    getId(): string {
-        return CliModal.Id;
-    }
-
-    component(): ModalComponent<CliModalParams> {
-        return function CliModalComponentWrapper({ params, onClose }: { params: CliModalParams; onClose: () => void; }) {
-            return (
-                <CliModalView
-                    command={params.command}
-                    visible={true}
-                    onClose={onClose}
-                />
-            );
-        };
-    }
-}
-
-interface CliModalViewProps extends CliModalParams {
-    /** Whether the modal is visible */
-    visible: boolean;
-    /** Called when the modal should close */
-    onClose: () => void;
-}
-
-/**
- * Modal displaying the CLI command equivalent of the current config.
- */
-function CliModalView({
-    command,
-    visible,
-    onClose,
-}: CliModalViewProps) {
-    // Register clipboard provider for CLI command
-    useClipboardProvider(
-        () => ({ content: command, label: "CLI" }),
-        visible
-    );
-
-    // Handle Enter to close (Esc is handled globally)
-    useActiveKeyHandler(
-        (event) => {
-            if (event.name === "return" || event.name === "enter") {
-                onClose();
-                return true;
-            }
-            return false;
-        },
-        { enabled: visible }
-    );
-
-    if (!visible) {
-        return null;
-    }
-
-    return (
-        <ModalBase title="CLI Command" width="80%" height={10} top={4} left={4}>
-            <ScrollView axis="horizontal" height={3}>
-                <Container>
-                    <Value>{command}</Value>
-                </Container>
-            </ScrollView>
-
-            <Label color="mutedText">Enter or Esc to close</Label>
-        </ModalBase>
-    );
-}

package/src/tui/modals/EditorModal.tsx

@@ -1,207 +0,0 @@
-import { useState, useEffect } from "react";
-import type { FieldConfig } from "../components/types.ts";
-import { ModalBase } from "../components/ModalBase.tsx";
-import { useActiveKeyHandler } from "../hooks/useActiveKeyHandler.ts";
-import { Select } from "../semantic/Select.tsx";
-import { TextInput } from "../semantic/TextInput.tsx";
-import { Label } from "../semantic/Label.tsx";
-import type { ModalComponent, ModalDefinition } from "../registry.ts";
-import { useKeyboardContext } from "../context/KeyboardContext.tsx";
-
-export interface EditorModalParams {
-    fieldKey: string;
-    currentValue: unknown;
-    fieldConfigs: FieldConfig[];
-    onSubmit: (value: unknown) => void;
-    onCancel: () => void;
-}
-
-export class EditorModal implements ModalDefinition<EditorModalParams> {
-    static readonly Id = "property-editor";
-
-    getId(): string {
-        return EditorModal.Id;
-    }
-
-    component(): ModalComponent<EditorModalParams> {
-        return function EditorModalComponentWrapper({ params, onClose }: { params: EditorModalParams; onClose: () => void; }) {
-            return (
-                <EditorModalView
-                    fieldKey={params.fieldKey}
-                    currentValue={params.currentValue}
-                    visible={true}
-                    onSubmit={(value) => {
-                        params.onSubmit?.(value);
-                    }}
-                    onCancel={() => {
-                        params.onCancel?.();
-                        onClose();
-                    }}
-                    fieldConfigs={params.fieldConfigs}
-                />
-            );
-        };
-    }
-}
-
-interface EditorModalViewProps {
-    /** Whether the modal is visible */
-    visible: boolean;
-}
-
-/**
- * Modal for editing field values.
- * Supports text, number, enum, and boolean types.
- * 
- * Note: This modal uses native OpenTUI input/select components that handle
- * keyboard events internally. The modal registers as the active handler to
- * block the underlying screen from receiving events, even though most key
- * handling is done by the native components.
- */
-interface EditorModalViewProps extends EditorModalParams {
-    /** Whether the modal is visible */
-    visible: boolean;
-}
-
-function EditorModalView({
-    fieldKey,
-    currentValue,
-    visible,
-    onSubmit,
-    onCancel,
-    fieldConfigs,
-}: EditorModalViewProps) {
-    const { setInputCaptured } = useKeyboardContext();
-    const [inputValue, setInputValue] = useState("");
-    const [selectIndex, setSelectIndex] = useState(0);
-
-    // Reset state when field changes
-    useEffect(() => {
-        if (fieldKey && visible) {
-            setInputValue(String(currentValue ?? ""));
-
-            // For enums/booleans, find current index
-            const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
-            if (fieldConfig?.type === "boolean") {
-                setSelectIndex(currentValue ? 1 : 0);
-            } else if (fieldConfig?.options) {
-                const idx = fieldConfig.options.findIndex((o) => o.value === currentValue);
-                setSelectIndex(idx >= 0 ? idx : 0);
-            }
-        }
-    }, [fieldKey, currentValue, visible, fieldConfigs]);
-
-    // While the editor is open, avoid extra per-keystroke work by preventing the
-    // underlying screen from receiving key events.
-    useEffect(() => {
-        if (!visible || !fieldKey) {
-            return;
-        }
-
-        setInputCaptured(true);
-        return () => {
-            setInputCaptured(false);
-        };
-    }, [visible, fieldKey, setInputCaptured]);
-
-    // Register as active handler to block underlying screen from receiving events.
-    // The native input/select components handle Enter internally via onSubmit/onSelect,
-    // so we don't need to handle it here.
-    useActiveKeyHandler(
-        (event) => {
-            if (event.name === "return" || event.name === "enter") {
-                return true;
-            }
-
-            if (event.name === "escape") {
-                onCancel();
-                return true;
-            }
-
-            return false;
-        },
-        { enabled: visible && Boolean(fieldKey) }
-    );
-
-    if (!visible || !fieldKey) {
-        return null;
-    }
-
-    const fieldConfig = fieldConfigs.find((f) => f.key === fieldKey);
-    if (!fieldConfig) {
-        return null;
-    }
-
-    const isNumber = fieldConfig.type === "number";
-
-    const handleInputSubmit = (value: string) => {
-        if (isNumber) {
-            onSubmit(parseInt(value.replace(/[^0-9-]/g, ""), 10) || 0);
-            onCancel();
-            return;
-        }
-
-        onSubmit(value);
-        onCancel();
-    };
-
-    const selectOptions =
-        fieldConfig.type === "boolean"
-            ? [
-                  { label: "False", value: "false" },
-                  { label: "True", value: "true" },
-              ]
-            : fieldConfig.type === "enum"
-              ? (fieldConfig.options ?? []).map((o) => ({
-                    label: o.name,
-                    value: String(o.value),
-                }))
-              : null;
-
-    const usesSelect = selectOptions !== null;
-
-    const handleSelectSubmit = () => {
-        const selected = selectOptions?.[selectIndex];
-        if (!selected) {
-            return;
-        }
-
-        if (fieldConfig.type === "boolean") {
-            onSubmit(selected.value === "true");
-            onCancel();
-            return;
-        }
-
-        onSubmit(selected.value);
-        onCancel();
-    };
-
-    return (
-        <ModalBase title={`Edit: ${fieldConfig.label}`} width="60%" height={12} top={4} left={6}>
-            {usesSelect && selectOptions && (
-                <Select
-                    options={selectOptions}
-                    value={selectOptions[selectIndex]?.value ?? selectOptions[0]?.value ?? ""}
-                    focused={true}
-                    onChange={(next) => {
-                        const idx = selectOptions.findIndex((o) => o.value === next);
-                        setSelectIndex(idx >= 0 ? idx : 0);
-                    }}
-                    onSubmit={handleSelectSubmit}
-                />
-            )}
-
-            {!usesSelect && (
-                <TextInput
-                    value={inputValue}
-                    placeholder={fieldConfig.placeholder ?? `Enter ${fieldConfig.label.toLowerCase()}...`}
-                    focused={true}
-                    onChange={(value) => setInputValue(value)}
-                    onSubmit={() => handleInputSubmit(inputValue)}
-                />
-            )}
-
-            <Label color="mutedText">Enter to save, Esc to cancel</Label>
-        </ModalBase>
-    );
-}

package/src/tui/modals/LogsModal.tsx

@@ -1,98 +0,0 @@
-import { useCallback } from "react";
-import { Container } from "../semantic/Container.tsx";
-import { ScrollView } from "../semantic/ScrollView.tsx";
-import { useActiveKeyHandler } from "../hooks/useActiveKeyHandler.ts";
-import { useClipboardProvider } from "../hooks/useClipboardProvider.ts";
-import { Label } from "../semantic/Label.tsx";
-import { LogColors } from "../components/logColors.ts";
-import { ModalBase } from "../components/ModalBase.tsx";
-import { useLogs } from "../context/LogsContext.tsx";
-import type { ModalComponent, ModalDefinition } from "../registry.ts";
-import { LogLevel } from "../../core/logger.ts";
-
-export interface LogsModalParams {}
-
-export class LogsModal implements ModalDefinition<LogsModalParams> {
-    static readonly Id = "logs";
-
-    getId(): string {
-        return LogsModal.Id;
-    }
-
-    component(): ModalComponent<LogsModalParams> {
-        return function LogsModalComponentWrapper({ params: _params, onClose }: { params: LogsModalParams; onClose: () => void; }) {
-            return (
-                <LogsModalView
-                    visible={true}
-                    onClose={onClose}
-                />
-            );
-        };
-    }
-}
-
-interface LogsModalViewProps {
-    /** Whether the panel is visible */
-    visible: boolean;
-    /** Callback when the modal is closed */
-    onClose: () => void;
-}
-
-/**
- * Panel displaying log entries with color-coded levels.
- */
-function LogsModalView({
-    visible,
-    onClose,
-}: LogsModalViewProps) {
-    const { logs } = useLogs();
-    // Handle Enter to close (Esc and Ctrl+L are handled globally)
-    useActiveKeyHandler(
-        (event) => {
-            if (event.name === "return" || event.name === "enter") {
-                onClose();
-                return true;
-            }
-            return false;
-        },
-        { enabled: visible }
-    );
-
-    // Register clipboard provider - logs content takes precedence when modal is open
-    useClipboardProvider(
-        useCallback(() => ({
-            content: logs.map((l) => l.message).join("\n"),
-            label: "Logs",
-        }), [logs]),
-        visible
-    );
-
-    if (!visible) {
-        return null;
-    }
-
-    const title = `Logs - ${logs.length}`;
-
-    return (
-        <ModalBase title={title} top={4} bottom={4} left={4} right={4}>
-            <ScrollView axis="vertical" flex={1} stickyToEnd={true} focused={true}>
-                <Container flexDirection="column" gap={0}>
-                    {logs.map((log, idx) => {
-                        const color = LogColors[log.level] ?? LogColors[LogLevel.info];
-                        const sanitized = Bun.stripANSI(log.message).trim();
-
-                        return (
-                            <Label key={`${log.timestamp.getTime()}-${idx}`}>
-                                <span fg={color}>{sanitized}</span>
-                            </Label>
-                        );
-                    })}
-
-                    {logs.length === 0 && (
-                        <Label color="mutedText">No logs yet...</Label>
-                    )}
-                </Container>
-            </ScrollView>
-        </ModalBase>
-    );
-}

package/src/tui/registry.ts

@@ -1,102 +0,0 @@
-import type { ReactNode } from "react";
-import { CliModal } from "./modals/CliModal.tsx";
-import { EditorModal } from "./modals/EditorModal.tsx";
-import { LogsModal } from "./modals/LogsModal.tsx";
-import type { ScreenBase } from "./screens/ScreenBase";
-import { CommandSelectScreen } from "./screens/CommandSelectScreen";
-import { ConfigScreen } from "./screens/ConfigScreen";
-import { ErrorScreen } from "./screens/ErrorScreen";
-import { ResultsScreen } from "./screens/ResultsScreen";
-import { RunningScreen } from "./screens/RunningScreen";
-
-/**
- * Screen component type.
- * Screens receive no props - they get everything from context.
- */
-export type ScreenComponent = () => ReactNode;
-
-/**
- * Modal component type.
- * Modals receive their params and a close function.
- */
-export type ModalComponent<TParams> = (props: {
-    params: TParams;
-    onClose: () => void;
-}) => ReactNode;
-
-
-/**
- * Screen registry - maps route names to screen components.
- */
-const screenRegistry = new Map<string, ScreenComponent>();
-
-/**
- * Modal registry - maps modal IDs to modal components.
- */
-const modalRegistry = new Map<string, ModalComponent<any>>();
-
-/**
- * Register a screen component for a route.
- * Typically called at module load time.
- */
-
-export function registerScreen(screen: ScreenBase): void {
-    screenRegistry.set(screen.getRoute(), screen.component());
-}
-
-/**
- * Register a modal component for a modal ID.
- * Typically called at module load time.
- */
-export interface ModalDefinition<TParams> {
-    getId(): string;
-    component(): ModalComponent<TParams>;
-}
-
-export function registerModal<TParams>(modal: ModalDefinition<TParams>): void {
-    modalRegistry.set(modal.getId(), modal.component());
-}
-
-/**
- * Get a screen component by route.
- * Returns undefined if not registered.
- */
-export function getScreen(route: string): ScreenComponent | undefined {
-    return screenRegistry.get(route);
-}
-
-/**
- * Get a modal component by ID.
- * Returns undefined if not registered.
- */
-export function getModal<TParams>(id: string): ModalComponent<TParams> | undefined {
-    return modalRegistry.get(id);
-}
-
-/**
- * Get all registered screen routes.
- */
-export function getRegisteredScreens(): string[] {
-    return Array.from(screenRegistry.keys());
-}
-
-/**
- * Get all registered modal IDs.
- */
-export function getRegisteredModals(): string[] {
-    return Array.from(modalRegistry.keys());
-}
-
-export function registerAllScreens(): void {
-    registerScreen(new CommandSelectScreen());
-    registerScreen(new ConfigScreen());
-    registerScreen(new RunningScreen());
-    registerScreen(new ResultsScreen());
-    registerScreen(new ErrorScreen());
-}
-
-export function registerAllModals(): void {
-    registerModal(new EditorModal());
-    registerModal(new CliModal());
-    registerModal(new LogsModal());
-}

package/src/tui/screens/CommandSelectScreen.tsx

@@ -1,162 +0,0 @@
-import { useState, useMemo, useCallback } from "react";
-import type { AnyCommand } from "../../core/command.ts";
-import { CommandSelector } from "../components/CommandSelector.tsx";
-import { useTuiApp } from "../context/TuiAppContext.tsx";
-import { useNavigation } from "../context/NavigationContext.tsx";
-import { useBackHandler } from "../hooks/useBackHandler.ts";
-import type { ScreenComponent } from "../registry.ts";
-import { loadPersistedParameters } from "../utils/parameterPersistence.ts";
-import { schemaToFieldConfigs } from "../utils/schemaToFields.ts";
-import type { OptionDef, OptionSchema } from "../../types/command.ts";
-import { ScreenBase } from "./ScreenBase.ts";
-import { type ConfigParams, ConfigScreen } from "./ConfigScreen.tsx";
-
-/**
- * Screen state stored in navigation params.
- */
-export interface CommandSelectParams {
-    commandPath: string[];
-}
-
-/**
- * Command selection screen.
- * Fully self-contained - gets all data from context and handles its own transitions.
- */
-export class CommandSelectScreen extends ScreenBase {
-    static readonly Id = "command-select";
-
-    getRoute(): string {
-        return CommandSelectScreen.Id;
-    }
-
-    override component(): ScreenComponent {
-        return function CommandSelectScreenComponent() {
-            const { name, commands } = useTuiApp();
-            const navigation = useNavigation();
-            
-            // Get params from navigation, with defaults
-            const params = (navigation.current.params ?? { commandPath: [] }) as CommandSelectParams;
-            const commandPath = params.commandPath ?? [];
-            
-            // Local selection state
-            const [selectedIndex, setSelectedIndex] = useState(0);
-
-            // Get current commands based on path
-            const currentCommands = useMemo<AnyCommand[]>(() => {
-                if (commandPath.length === 0) {
-                    return commands.filter((cmd) => cmd.supportsTui());
-                }
-
-                let current: AnyCommand[] = commands;
-                for (const pathPart of commandPath) {
-                    const found = current.find((c) => c.name === pathPart);
-                    if (found?.subCommands) {
-                        current = found.subCommands.filter((sub) => sub.supportsTui());
-                    } else {
-                        break;
-                    }
-                }
-                return current;
-            }, [commands, commandPath]);
-
-            // Build breadcrumb from path
-            const breadcrumb = useMemo(() => {
-                if (commandPath.length === 0) return undefined;
-
-                const displayNames: string[] = [];
-                let current: AnyCommand[] = commands;
-
-                for (const pathPart of commandPath) {
-                    const found = current.find((c) => c.name === pathPart);
-                    if (found) {
-                        displayNames.push(found.displayName ?? found.name);
-                        if (found.subCommands) {
-                            current = found.subCommands;
-                        }
-                    } else {
-                        displayNames.push(pathPart);
-                    }
-                }
-
-                return displayNames;
-            }, [commandPath, commands]);
-
-            const items = currentCommands.map((cmd) => ({
-                command: cmd,
-                label: cmd.displayName ?? cmd.name,
-                description: cmd.description,
-            }));
-
-            // Handle command selection - this screen decides where to go next
-            const handleSelect = useCallback((cmd: AnyCommand) => {
-                // If command has runnable subcommands, navigate deeper
-                if (cmd.subCommands && cmd.subCommands.some((c) => c.supportsTui())) {
-                    navigation.replace<CommandSelectParams>(CommandSelectScreen.Id, { commandPath: [...commandPath, cmd.name] });
-                    return;
-                }
-
-                // Otherwise, push to config screen
-                navigation.push<ConfigParams>(ConfigScreen.Id, {
-                    command: cmd,
-                    commandPath: [...commandPath, cmd.name],
-                    values: initializeConfigValues(name, cmd),
-                    fieldConfigs: schemaToFieldConfigs(cmd.options),
-                });
-            }, [navigation, commandPath, name]);
-
-            // Register back handler - this screen decides what back means
-            useBackHandler(useCallback(() => {
-                if (commandPath.length > 0) {
-                    // Go up one level
-                    navigation.replace<CommandSelectParams>(CommandSelectScreen.Id, { commandPath: commandPath.slice(0, -1) });
-                    return true; // We handled it
-                }
-                // At root - let navigation call onExit
-                return false;
-            }, [navigation, commandPath]));
-
-            return (
-                <CommandSelector
-                    commands={items}
-                    selectedIndex={selectedIndex}
-                    onSelectionChange={setSelectedIndex}
-                    onSelect={handleSelect}
-                    breadcrumb={breadcrumb}
-                />
-            );
-        };
-    }
-}
-
-/**
- * Initialize config values from defaults and persisted values.
- */
-function initializeConfigValues(appName: string, cmd: AnyCommand): Record<string, unknown> {
-    const defaults: Record<string, unknown> = {};
-    const optionDefs = cmd.options as OptionSchema;
-    
-    for (const [key, def] of Object.entries(optionDefs)) {
-        const typedDef = def as OptionDef;
-        if (typedDef.default !== undefined) {
-            defaults[key] = typedDef.default;
-        } else {
-            switch (typedDef.type) {
-                case "string":
-                    defaults[key] = typedDef.enum?.[0] ?? "";
-                    break;
-                case "number":
-                    defaults[key] = typedDef.min ?? 0;
-                    break;
-                case "boolean":
-                    defaults[key] = false;
-                    break;
-                case "array":
-                    defaults[key] = [];
-                    break;
-            }
-        }
-    }
-
-    const persisted = loadPersistedParameters(appName, cmd.name);
-    return { ...defaults, ...persisted };
-}