@pablozaiden/terminatui 0.3.0 → 0.4.0

package/src/tui/utils/jsonTokenizer.ts

@@ -0,0 +1,98 @@
+import type { CodeTokenType } from "../semantic/types.ts";
+
+/**
+ * A single token in a JSON line.
+ */
+export type JsonToken = { type: Exclude<CodeTokenType, "unknown">; value: string };
+
+/**
+ * A line of JSON tokens.
+ */
+export type JsonLineTokens = JsonToken[];
+
+/**
+ * Tokenize a JavaScript value into lines of syntax-highlighted JSON tokens.
+ * 
+ * This is a pure behavioral helper with no React dependencies.
+ * Adapters can use this to build their own rendering.
+ */
+export function tokenizeJsonValue(value: unknown, indent = 0): JsonLineTokens[] {
+    const pad = "  ".repeat(indent);
+    const padToken = (): JsonToken => ({ type: "punctuation", value: pad });
+
+    if (value === null) {
+        return [[padToken(), { type: "null", value: "null" }]];
+    }
+    if (typeof value === "boolean") {
+        return [[padToken(), { type: "boolean", value: String(value) }]];
+    }
+    if (typeof value === "number") {
+        return [[padToken(), { type: "number", value: String(value) }]];
+    }
+    if (typeof value === "string") {
+        return [[padToken(), { type: "string", value: JSON.stringify(value) }]];
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return [[padToken(), { type: "punctuation", value: "[]" }]];
+        }
+        const lines: JsonLineTokens[] = [[padToken(), { type: "punctuation", value: "[" }]];
+        value.forEach((item, idx) => {
+            const itemLines = tokenizeJsonValue(item, indent + 1);
+            const isLast = idx === value.length - 1;
+            itemLines.forEach((line, lineIdx) => {
+                if (lineIdx === itemLines.length - 1 && !isLast) {
+                    lines.push([...line, { type: "punctuation", value: "," }]);
+                } else {
+                    lines.push(line);
+                }
+            });
+        });
+        lines.push([padToken(), { type: "punctuation", value: "]" }]);
+        return lines;
+    }
+    if (typeof value === "object") {
+        const entries = Object.entries(value);
+        if (entries.length === 0) {
+            return [[padToken(), { type: "punctuation", value: "{}" }]];
+        }
+        const lines: JsonLineTokens[] = [[padToken(), { type: "punctuation", value: "{" }]];
+        const innerPad = "  ".repeat(indent + 1);
+
+        entries.forEach(([key, val], idx) => {
+            const valLines = tokenizeJsonValue(val, indent + 1);
+            const isLast = idx === entries.length - 1;
+
+            // First value line - prepend key
+            const firstValLine = valLines[0] ?? [];
+            // Remove the padding from value's first line (we'll add our own with the key)
+            const valTokens = firstValLine.filter((t) => t.value !== "  ".repeat(indent + 1));
+
+            const keyLine: JsonLineTokens = [
+                { type: "punctuation", value: innerPad },
+                { type: "key", value: `"${key}"` },
+                { type: "punctuation", value: ": " },
+                ...valTokens,
+            ];
+
+            if (valLines.length === 1) {
+                // Single line value
+                if (!isLast) keyLine.push({ type: "punctuation", value: "," });
+                lines.push(keyLine);
+            } else {
+                // Multi-line value
+                lines.push(keyLine);
+                valLines.slice(1, -1).forEach((line) => lines.push(line));
+                const lastLine = valLines[valLines.length - 1] ?? [];
+                if (!isLast) {
+                    lines.push([...lastLine, { type: "punctuation", value: "," }]);
+                } else {
+                    lines.push(lastLine);
+                }
+            }
+        });
+        lines.push([padToken(), { type: "punctuation", value: "}" }]);
+        return lines;
+    }
+    return [];
+}

package/src/tui/utils/schemaToFields.ts

@@ -1,5 +1,5 @@
 import type { OptionSchema, OptionDef } from "../../types/command.ts";
-import type { FieldConfig, FieldType, FieldOption } from "../components/types.ts";
+import type { FieldConfig, FieldType, FieldOption } from "../semantic/types.ts";
 
 /**
  * Convert an option type to a field type.
@@ -75,8 +75,6 @@ export function schemaToFieldConfigs(schema: OptionSchema): FieldConfig[] {
             label: def.label ?? keyToLabel(key),
             type: optionTypeToFieldType(def),
             options: createFieldOptions(def),
-            placeholder: def.placeholder,
-            group: def.group,
         };
 
         fields.push(fieldConfig);
@@ -92,28 +90,6 @@ export function schemaToFieldConfigs(schema: OptionSchema): FieldConfig[] {
     return fields;
 }
 
-/**
- * Group field configs by their group property.
- * 
- * @param fields - Field configs to group
- * @returns Map of group name to field configs
- */
-export function groupFieldConfigs(
-    fields: FieldConfig[]
-): Map<string | undefined, FieldConfig[]> {
-    const groups = new Map<string | undefined, FieldConfig[]>();
-
-    for (const field of fields) {
-        const group = field.group;
-        if (!groups.has(group)) {
-            groups.set(group, []);
-        }
-        groups.get(group)!.push(field);
-    }
-
-    return groups;
-}
-
 /**
  * Get display value for a field.
  * 

package/src/tui/adapters/ink/components/Code.tsx

@@ -1,6 +0,0 @@
-import { Text } from "ink";
-import type { CodeProps } from "../../../semantic/types.ts";
-
-export function Code({ children }: CodeProps) {
-    return <Text color="gray">{children}</Text>;
-}

package/src/tui/adapters/ink/components/Container.tsx

@@ -1,5 +0,0 @@
-import type { ContainerProps } from "../../../semantic/types.ts";
-
-export function Container({ children }: ContainerProps) {
-    return <>{children}</>;
-}

package/src/tui/adapters/ink/components/Spacer.tsx

@@ -1,15 +0,0 @@
-import { Text } from "ink";
-import type { SpacerProps } from "../../../semantic/types.ts";
-
-export function Spacer({ size, axis }: SpacerProps) {
-    if (axis === "horizontal") {
-        return <Text>{" ".repeat(size)}</Text>;
-    }
-    return (
-        <>
-            {Array.from({ length: size }).map((_, idx) => (
-                <Text key={idx} />
-            ))}
-        </>
-    );
-}

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

@@ -1,7 +0,0 @@
-import { Text } from "ink";
-import type { ValueProps } from "../../../semantic/types.ts";
-import { toPlainText } from "../utils.ts";
-
-export function Value({ children }: ValueProps) {
-    return <Text color="magenta">{toPlainText(children)}</Text>;
-}

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

@@ -1,12 +0,0 @@
-import type { CodeProps } from "../../../semantic/types.ts";
-import { SemanticColors } from "../../../theme.ts";
-
-export function Code({ color = "code", children }: CodeProps) {
-    const fg = SemanticColors[color] ?? SemanticColors.code;
-
-    return (
-        <text fg={fg}>
-            {children}
-        </text>
-    );
-}

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

@@ -1,56 +0,0 @@
-import type { ReactNode } from "react";
-import type { ContainerProps, Spacing } from "../../../semantic/types.ts";
-
-function normalizePadding(padding: number | Spacing | undefined):
-    | { padding?: number; paddingTop?: number; paddingRight?: number; paddingBottom?: number; paddingLeft?: number }
-    | undefined {
-    if (padding === undefined) {
-        return undefined;
-    }
-
-    if (typeof padding === "number") {
-        return { padding };
-    }
-
-    return {
-        paddingTop: padding.top ?? 0,
-        paddingRight: padding.right ?? 0,
-        paddingBottom: padding.bottom ?? 0,
-        paddingLeft: padding.left ?? 0,
-    };
-}
-
-export function Container({
-    children,
-    flex,
-    width,
-    height,
-    flexDirection,
-    alignItems,
-    justifyContent,
-    gap,
-    padding,
-    noShrink,
-}: ContainerProps & { children?: ReactNode }) {
-    const resolvedPadding = normalizePadding(padding);
-
-    return (
-        <box
-            flexGrow={flex}
-            flexShrink={noShrink ? 0 : flex === undefined ? undefined : 1}
-            width={width as any}
-            height={height as any}
-            flexDirection={flexDirection as any}
-            alignItems={alignItems as any}
-            justifyContent={justifyContent as any}
-            gap={gap}
-            padding={resolvedPadding?.padding}
-            paddingTop={resolvedPadding?.paddingTop}
-            paddingRight={resolvedPadding?.paddingRight}
-            paddingBottom={resolvedPadding?.paddingBottom}
-            paddingLeft={resolvedPadding?.paddingLeft}
-        >
-            {children}
-        </box>
-    );
-}

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

@@ -1,5 +0,0 @@
-import type { SpacerProps } from "../../../semantic/types.ts";
-
-export function Spacer({ size, axis = "vertical" }: SpacerProps) {
-    return axis === "horizontal" ? <box width={size} flexShrink={0} /> : <box height={size} flexShrink={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>
-    );
-}