@pablozaiden/terminatui 0.2.0 → 0.3.0-beta-1

package/src/tui/components/ConfigForm.tsx

@@ -1,8 +1,11 @@
 import { useRef, useEffect, type ReactNode } from "react";
-import type { ScrollBoxRenderable } from "@opentui/core";
-import { Theme } from "../theme.ts";
-import { FieldRow } from "./FieldRow.tsx";
-import { useKeyboardHandler, KeyboardPriority } from "../hooks/useKeyboardHandler.ts";
+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 {
@@ -26,6 +29,10 @@ interface ConfigFormProps {
     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;
 }
 
 /**
@@ -56,72 +63,80 @@ export function ConfigForm({
     onAction,
     getDisplayValue = defaultGetDisplayValue,
     actionButton,
+    additionalButtons = [],
+    onKeyDown,
 }: ConfigFormProps) {
-    const borderColor = focused ? Theme.borderFocused : Theme.border;
-    const scrollboxRef = useRef<ScrollBoxRenderable>(null);
-    const totalFields = fieldConfigs.length + 1; // +1 for action button
+    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(() => {
-        if (scrollboxRef.current) {
-            scrollboxRef.current.scrollTo(selectedIndex);
-        }
+        scrollViewRef.current?.scrollToIndex(selectedIndex);
     }, [selectedIndex]);
 
-    // Handle keyboard events at Focused priority (only when focused)
-    useKeyboardHandler(
-        (event) => {
-            const { key } = event;
+    // 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, totalFields - 1);
+                const newIndex = Math.min(selectedIndex + 1, totalItems - 1);
                 onSelectionChange(newIndex);
-                event.stopPropagation();
-                return;
+                return true;
             }
 
             if (key.name === "up") {
                 const newIndex = Math.max(selectedIndex - 1, 0);
                 onSelectionChange(newIndex);
-                event.stopPropagation();
-                return;
+                return true;
             }
 
-            // Enter to edit field or run action
+            // Enter to edit field, press additional button, or run action
             if (key.name === "return" || key.name === "enter") {
-                if (selectedIndex === fieldConfigs.length) {
-                    onAction();
-                } else {
+                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();
                 }
-                event.stopPropagation();
-                return;
+                return true;
             }
+
+            return false;
         },
-        KeyboardPriority.Focused,
         { enabled: focused }
     );
 
     return (
-        <box
-            flexDirection="column"
-            border={true}
-            borderStyle="rounded"
-            borderColor={borderColor}
+        <Panel
             title={title}
-            flexGrow={1}
+            focused={focused}
+            flex={1}
             padding={1}
+            flexDirection="column"
         >
-            <scrollbox
-                ref={scrollboxRef}
-                scrollY={true}
-                flexGrow={1}
+            <ScrollView
+                axis="vertical"
+                flex={1}
+                scrollRef={(ref) => {
+                    scrollViewRef.current = ref;
+                }}
             >
-                <box flexDirection="column" gap={0}>
+                <Container flexDirection="column" gap={0}>
                     {fieldConfigs.map((field, idx) => {
                         const isSelected = idx === selectedIndex;
                         const displayValue = getDisplayValue(
@@ -131,18 +146,29 @@ export function ConfigForm({
                         );
 
                         return (
-                            <FieldRow
+                            <Field
                                 key={field.key}
                                 label={field.label}
                                 value={displayValue}
-                                isSelected={isSelected}
+                                selected={isSelected}
+                            />
+                        );
+                    })}
+
+                    {additionalButtons.map((btn, idx) => {
+                        const buttonSelectedIndex = fieldConfigs.length + idx;
+                        return (
+                            <MenuButton
+                                key={btn.label}
+                                label={btn.label}
+                                selected={selectedIndex === buttonSelectedIndex}
                             />
                         );
                     })}
 
                     {actionButton}
-                </box>
-            </scrollbox>
-        </box>
+                </Container>
+            </ScrollView>
+        </Panel>
     );
 }

package/src/tui/components/FieldRow.tsx

@@ -1,30 +0,0 @@
-import { Theme } from "../theme.ts";
-
-interface FieldRowProps {
-    /** Field label */
-    label: string;
-    /** Field value to display */
-    value: string;
-    /** Whether this row is selected */
-    isSelected: boolean;
-}
-
-/**
- * A single row in a config form displaying a field label and value.
- */
-export function FieldRow({ label, value, isSelected }: FieldRowProps) {
-    const prefix = isSelected ? "► " : "  ";
-    const labelColor = isSelected ? Theme.borderFocused : Theme.label;
-    const valueColor = isSelected ? Theme.value : Theme.statusText;
-
-    return (
-        <box flexDirection="row" gap={1}>
-            <text fg={labelColor}>
-                {prefix}{label}:
-            </text>
-            <text fg={valueColor}>
-                {value}
-            </text>
-        </box>
-    );
-}

package/src/tui/components/Header.tsx

@@ -1,4 +1,6 @@
-import { Theme } from "../theme.ts";
+import { Container } from "../semantic/Container.tsx";
+import { Label } from "../semantic/Label.tsx";
+import { Spacer } from "../semantic/Spacer.tsx";
 
 interface HeaderProps {
     /** Application name */
@@ -13,19 +15,18 @@ interface HeaderProps {
  * Application header with name, version, and optional breadcrumb.
  */
 export function Header({ name, version, breadcrumb }: HeaderProps) {
-    const breadcrumbStr = breadcrumb?.length 
-        ? ` › ${breadcrumb.join(" › ")}`
-        : "";
+    const breadcrumbStr = breadcrumb?.length ? ` › ${breadcrumb.join(" › ")}` : "";
 
     return (
-        <box flexDirection="row" justifyContent="space-between" marginBottom={1}>
-            <text fg={Theme.header}>
-                <strong>{name}</strong>
-                {breadcrumbStr}
-            </text>
-            <text fg={Theme.label}>
-                v{version}
-            </text>
-        </box>
+        <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/JsonHighlight.tsx

@@ -1,20 +1,14 @@
-import { Theme } from "../theme.ts";
+import { Container } from "../semantic/Container.tsx";
+import { CodeHighlight } from "../semantic/CodeHighlight.tsx";
+import type { CodeTokenType } from "../semantic/types.ts";
 
 /**
  * JSON syntax highlighting types and colors
  */
-type JsonTokenType = "key" | "string" | "number" | "boolean" | "null" | "punctuation";
+type JsonTokenType = Exclude<CodeTokenType, "unknown">;
 type JsonToken = { type: JsonTokenType; value: string };
 type JsonLineTokens = JsonToken[];
 
-const TOKEN_COLORS: Record<JsonTokenType, string> = {
-    key: "#61afef",      // blue
-    string: "#98c379",   // green
-    number: "#d19a66",   // orange
-    boolean: "#c678dd",  // purple
-    null: "#c678dd",     // purple
-    punctuation: Theme.label,
-};
 
 function tokenizeJson(value: unknown, indent = 0): JsonLineTokens[] {
     const pad = "  ".repeat(indent);
@@ -115,14 +109,13 @@ export interface JsonHighlightProps {
 export function JsonHighlight({ value }: JsonHighlightProps) {
     const lines = tokenizeJson(value);
     return (
-        <box flexDirection="column">
+        <Container flexDirection="column" gap={0}>
             {lines.map((tokens, lineIdx) => (
-                <text key={`json-${lineIdx}`}>
-                    {tokens.map((token, tokenIdx) => (
-                        <span key={tokenIdx} fg={TOKEN_COLORS[token.type]}>{token.value}</span>
-                    ))}
-                </text>
+                <CodeHighlight
+                    key={`json-${lineIdx}`}
+                    tokens={tokens.map((token) => ({ type: token.type, value: token.value }))}
+                />
             ))}
-        </box>
+        </Container>
     );
 }

package/src/tui/components/ModalBase.tsx

@@ -0,0 +1,38 @@
+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,6 +1,10 @@
 import type { ReactNode } from "react";
-import { Theme } from "../theme.ts";
 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 */
@@ -22,21 +26,18 @@ export function ResultsPanel({
     focused,
     renderResult,
 }: ResultsPanelProps) {
-    const borderColor = focused ? Theme.borderFocused : Theme.border;
 
     // Determine content to display
     let content: ReactNode;
 
     if (error) {
         content = (
-            <box flexDirection="column" gap={1}>
-                <text fg={Theme.error}>
-                    <strong>Error</strong>
-                </text>
-                <text fg={Theme.error}>
-                    {error.message}
-                </text>
-            </box>
+            <Container flexDirection="column" gap={1}>
+                <Label color="error" bold>
+                    Error
+                </Label>
+                <Label color="error">{error.message}</Label>
+            </Container>
         );
     } else if (result) {
         if (renderResult) {
@@ -44,50 +45,40 @@ export function ResultsPanel({
 
             if (typeof customContent === "string" || typeof customContent === "number" || typeof customContent === "boolean") {
                 // Wrap primitive results so the renderer gets a text node
-                content = (
-                    <text fg={Theme.value}>
-                        {String(customContent)}
-                    </text>
-                );
+                content = <Value>{String(customContent)}</Value>;
             } else {
                 content = customContent as ReactNode;
             }
         } else {
             // Default JSON display
             content = (
-                <box flexDirection="column" gap={1}>
+                <Container flexDirection="column" gap={1}>
                     {result.message && (
-                        <text fg={result.success ? Theme.success : Theme.error}>
-                            {result.message}
-                        </text>
+                        <Label color={result.success ? "success" : "error"}>{result.message}</Label>
                     )}
                     {result.data !== undefined && result.data !== null && (
-                        <text fg={Theme.value}>
-                            {JSON.stringify(result.data, null, 2)}
-                        </text>
+                        <Value>{JSON.stringify(result.data, null, 2)}</Value>
                     )}
-                </box>
+                </Container>
             );
         }
     } else {
-        content = (
-            <text fg={Theme.label}>No results yet...</text>
-        );
+        content = <Label color="mutedText">No results yet...</Label>;
     }
 
     return (
-        <box
-            flexDirection="column"
-            border={true}
-            borderStyle="rounded"
-            borderColor={borderColor}
+        <Panel
             title="Results"
+            focused={focused}
+            flex={1}
             padding={1}
-            flexGrow={1}
+            flexDirection="column"
         >
-            <scrollbox scrollY={true} flexGrow={1} focused={focused}>
-                {content}
-            </scrollbox>
-        </box>
+            <ScrollView axis="vertical" flex={1} focused={focused}>
+                <Container flexDirection="column">
+                    {content}
+                </Container>
+            </ScrollView>
+        </Panel>
     );
 }

package/src/tui/components/StatusBar.tsx

@@ -1,5 +1,7 @@
-import { Theme } from "../theme.ts";
-import { useSpinner } from "../hooks/useSpinner.ts";
+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 */
@@ -15,45 +17,28 @@ interface StatusBarProps {
 /**
  * Status bar showing current status, spinner, and keyboard shortcuts.
  */
-export function StatusBar({ 
-    status, 
-    isRunning = false, 
+export function StatusBar({
+    status,
+    isRunning = false,
     showShortcuts = true,
-    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back"
+    shortcuts = "L Logs • C CLI • Tab Switch • Ctrl+Y Copy • Esc Back",
 }: StatusBarProps) {
-    const { frame } = useSpinner(isRunning);
-    const spinner = isRunning ? `${frame} ` : "";
-    
     return (
-        <box
-            flexDirection="column"
-            gap={0}
-            border={true}
-            borderStyle="rounded"
-            borderColor={isRunning ? "#4ade80" : Theme.border}
-            flexShrink={0}
-        >
-            {/* Main status with spinner */}
-            <box
-                flexDirection="row"
-                justifyContent="space-between"
-                backgroundColor={isRunning ? "#1a1a2e" : undefined}
-                paddingLeft={1}
-                paddingRight={1}
-            >
-                <text fg={isRunning ? "#4ade80" : Theme.statusText}>
-                    {isRunning ? <strong>{spinner}{status}</strong> : <>{spinner}{status}</>}
-                </text>
-            </box>
-            
-            {/* Keyboard shortcuts */}
-            {showShortcuts && (
-                <box paddingLeft={1} paddingRight={1}>
-                    <text fg={Theme.label}>
-                        {shortcuts}
-                    </text>
-                </box>
-            )}
-        </box>
+        <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

@@ -0,0 +1,12 @@
+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/context/ClipboardContext.tsx

@@ -0,0 +1,87 @@
+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;
+}