@pablozaiden/terminatui 0.2.0 → 0.3.0-beta-1

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

@@ -0,0 +1,15 @@
+import { Text } from "ink";
+import type { PanelProps } from "../../../semantic/types.ts";
+
+export function Panel({ title, children }: PanelProps) {
+    return (
+        <>
+            {title ? (
+                <Text bold>
+                    {title}
+                </Text>
+            ) : null}
+            {children}
+        </>
+    );
+}

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

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

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

@@ -0,0 +1,44 @@
+import InkSelectInput from "ink-select-input";
+import { Text } from "ink";
+import { useMemo } from "react";
+import type { SelectProps } from "../../../semantic/types.ts";
+
+type Item = { label: string; value: string };
+
+type ItemComponentProps = {
+    isSelected?: boolean;
+    label: string;
+};
+
+function ItemComponent({ label }: ItemComponentProps) {
+    // ink-select-input already provides its own selection marker.
+    // Keep this as plain text to avoid double-marking.
+    return <Text>{label}</Text>;
+}
+
+export function Select({ options, value, focused, onChange, onSubmit }: SelectProps) {
+    const items = useMemo(
+        () => options.map((o) => ({ label: o.label, value: o.value }) as Item),
+        [options]
+    );
+
+    const initialIndex = Math.max(
+        0,
+        options.findIndex((o) => o.value === value)
+    );
+
+    // Force remount so ink-select-input respects updated initialIndex.
+    const key = `${value}:${options.length}`;
+
+    return (
+        <InkSelectInput
+            key={key}
+            items={items}
+            isFocused={focused}
+            initialIndex={initialIndex}
+            itemComponent={ItemComponent}
+            onHighlight={(item) => onChange(item.value)}
+            onSelect={() => onSubmit?.()}
+        />
+    );
+}

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

@@ -0,0 +1,15 @@
+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/Spinner.tsx

@@ -0,0 +1,5 @@
+import type { SpinnerProps } from "../../../semantic/types.ts";
+
+export function Spinner(_: SpinnerProps) {
+    return null;
+}

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

@@ -0,0 +1,22 @@
+import InkTextInput from "ink-text-input";
+import { Text } from "ink";
+import type { TextInputProps } from "../../../semantic/types.ts";
+
+export function TextInput({ value, placeholder, focused, onChange, onSubmit }: TextInputProps) {
+    // ink-text-input renders nothing if you pass empty placeholder; provide a minimal hint.
+    const hint = placeholder ?? "";
+
+    return (
+        <Text>
+            <InkTextInput
+                value={value}
+                placeholder={hint}
+                focus={focused}
+                onChange={onChange}
+                onSubmit={() => {
+                    onSubmit?.();
+                }}
+            />
+        </Text>
+    );
+}

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

@@ -0,0 +1,7 @@
+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/ink/keyboard.ts

@@ -0,0 +1,97 @@
+import { useInput, type Key } from "ink";
+import { useCallback, useMemo, useRef } from "react";
+import type { KeyboardAdapter, KeyboardEvent, KeyHandler } from "../types.ts";
+
+function normalizeKeyName(input: string, key: Key): KeyboardEvent {
+    const event: KeyboardEvent = {
+        name: input,
+        sequence: input,
+        ctrl: Boolean(key.ctrl),
+        shift: Boolean(key.shift),
+        meta: Boolean(key.meta),
+    };
+
+    if (key.return) {
+        event.name = "return";
+    } else if (key.escape) {
+        event.name = "escape";
+    } else if (key.backspace) {
+        event.name = "backspace";
+    } else if (key.delete) {
+        // Terminals often send escape sequences for “Delete” that some libraries
+        // expose as `delete`, others as `del`. Keep it normalized.
+        event.name = "delete";
+    } else if (key.tab) {
+        event.name = "tab";
+    } else if (key.upArrow) {
+        event.name = "up";
+    } else if (key.downArrow) {
+        event.name = "down";
+    } else if (key.leftArrow) {
+        event.name = "left";
+    } else if (key.rightArrow) {
+        event.name = "right";
+    } else if (key.pageUp) {
+        event.name = "pageup";
+    } else if (key.pageDown) {
+        event.name = "pagedown";
+    } else if (key.home) {
+        event.name = "home";
+    } else if (key.end) {
+        event.name = "end";
+    }
+
+    // Normalize enter -> return (some code checks either)
+    if (event.name === "enter") {
+        event.name = "return";
+    }
+
+    return event;
+}
+
+export function useInkKeyboardAdapter(): KeyboardAdapter {
+    const handlerStackRef = useRef<{ id: string; handler: KeyHandler }[]>([]);
+    const globalHandlerRef = useRef<KeyHandler | null>(null);
+
+    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: KeyHandler) => {
+        const previous = globalHandlerRef.current;
+        globalHandlerRef.current = handler;
+
+        return () => {
+            globalHandlerRef.current = previous;
+        };
+    }, []);
+
+    useInput((input, key) => {
+        const event = normalizeKeyName(input, key);
+
+        if (globalHandlerRef.current) {
+            const handled = globalHandlerRef.current(event);
+            if (handled) {
+                return;
+            }
+        }
+
+        const activeHandler = handlerStackRef.current[handlerStackRef.current.length - 1];
+        if (activeHandler) {
+            activeHandler.handler(event);
+        }
+    });
+
+    return useMemo(
+        () => ({
+            setActiveHandler,
+            setGlobalHandler,
+        }),
+        [setActiveHandler, setGlobalHandler]
+    );
+}

package/src/tui/adapters/ink/utils.ts

@@ -0,0 +1,16 @@
+export function toPlainText(node: unknown): string {
+    if (node === null || node === undefined || typeof node === "boolean") {
+        return "";
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(toPlainText).join("");
+    }
+    if (typeof node === "object" && node && "props" in node) {
+        const anyNode = node as any;
+        return toPlainText(anyNode.props?.children);
+    }
+    return "";
+}

package/src/tui/adapters/opentui/OpenTuiRenderer.tsx

@@ -0,0 +1,115 @@
+import { createCliRenderer, type CliRenderer } from "@opentui/core";
+import { createRoot, type Root } from "@opentui/react";
+import { useLayoutEffect, type ReactNode } from "react";
+import { SemanticColors } from "../../theme.ts";
+import type { Renderer, RendererConfig } from "../types.ts";
+import { useOpenTuiKeyboardAdapter } from "./keyboard.ts";
+import { Button } from "./components/Button.tsx";
+import { Code } from "./components/Code.tsx";
+import { CodeHighlight } from "./components/CodeHighlight.tsx";
+import { Container } from "./components/Container.tsx";
+import { Field } from "./components/Field.tsx";
+import { Label } from "./components/Label.tsx";
+import { MenuButton } from "./components/MenuButton.tsx";
+import { MenuItem } from "./components/MenuItem.tsx";
+import { Overlay } from "./components/Overlay.tsx";
+import { Spacer } from "./components/Spacer.tsx";
+import { Spinner } from "./components/Spinner.tsx";
+import { Panel } from "./components/Panel.tsx";
+import { ScrollView as OpenTuiScrollView } from "./components/ScrollView.tsx";
+import { Select } from "./components/Select.tsx";
+import { TextInput } from "./components/TextInput.tsx";
+import { Value } from "./components/Value.tsx";
+
+export class OpenTuiRenderer implements Renderer {
+    private renderer: CliRenderer | null = null;
+    private root: Root | null = null;
+
+    private activeKeyboardAdapter: Renderer["keyboard"] | null = null;
+
+    public keyboard: Renderer["keyboard"] = {
+        setActiveHandler: (id, handler) => {
+            return this.activeKeyboardAdapter?.setActiveHandler(id, handler) ?? (() => {});
+        },
+        setGlobalHandler: (handler) => {
+            return this.activeKeyboardAdapter?.setGlobalHandler(handler) ?? (() => {});
+        },
+    };
+
+    public components: Renderer["components"] = {
+        Field,
+        Button,
+        MenuButton,
+        MenuItem,
+        Container,
+        Panel,
+        ScrollView: OpenTuiScrollView,
+
+        Overlay,
+        Spacer,
+        Spinner,
+        Label,
+        Value,
+        Code,
+        CodeHighlight,
+
+        Select,
+        TextInput,
+    };
+
+    constructor(private readonly config: RendererConfig) {}
+
+    async initialize(): Promise<void> {
+        this.renderer = await createCliRenderer({
+            useAlternateScreen: this.config.useAlternateScreen ?? true,
+            useConsole: false,
+            exitOnCtrlC: true,
+            backgroundColor: SemanticColors.background,
+            useMouse: true,
+            enableMouseMovement: true,
+            openConsoleOnError: false,
+        });
+
+        this.root = createRoot(this.renderer);
+    }
+
+    render(node: ReactNode): void {
+        if (!this.root) {
+            throw new Error("OpenTuiRenderer not initialized");
+        }
+
+        this.root.render(
+            <KeyboardBridge
+                onReady={(keyboard) => {
+                    this.activeKeyboardAdapter = keyboard;
+                }}
+            >
+                {node}
+            </KeyboardBridge>
+        );
+
+        this.renderer?.start();
+    }
+
+    destroy(): void {
+        this.renderer?.destroy();
+        this.renderer = null;
+        this.root = null;
+    }
+}
+
+function KeyboardBridge({
+    children,
+    onReady,
+}: {
+    children: ReactNode;
+    onReady: (keyboard: ReturnType<typeof useOpenTuiKeyboardAdapter>) => void;
+}) {
+    const keyboard = useOpenTuiKeyboardAdapter();
+
+    useLayoutEffect(() => {
+        onReady(keyboard);
+    }, [onReady, keyboard]);
+
+    return <>{children}</>;
+}

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

@@ -0,0 +1,13 @@
+import type { ButtonProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Button({ label, selected, onActivate }: ButtonProps) {
+    const fg = selected ? SemanticColors.selectionText : SemanticColors.text;
+    const bg = selected ? SemanticColors.selectionBackground : undefined;
+
+    return (
+        <text fg={fg} bg={bg} {...({ onClick: onActivate })}>
+            {label}
+        </text>
+    );
+}

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

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

@@ -0,0 +1,24 @@
+import type { CodeHighlightProps, CodeTokenType } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+const TOKEN_COLORS: Record<CodeTokenType, string> = {
+    key: SemanticColors.primary,
+    string: SemanticColors.success,
+    number: "#d19a66",
+    boolean: "#c678dd",
+    null: "#c678dd",
+    punctuation: SemanticColors.mutedText,
+    unknown: SemanticColors.text,
+};
+
+export function CodeHighlight({ tokens }: CodeHighlightProps) {
+    return (
+        <text>
+            {tokens.map((token, tokenIdx) => (
+                <span key={tokenIdx} fg={TOKEN_COLORS[token.type] ?? SemanticColors.text}>
+                    {token.value}
+                </span>
+            ))}
+        </text>
+    );
+}

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

@@ -0,0 +1,56 @@
+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/Field.tsx

@@ -0,0 +1,18 @@
+import type { FieldProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Field({ label, value, selected, onActivate }: FieldProps) {
+    const prefix = selected ? "► " : "  ";
+    const labelColor = selected ? SemanticColors.focusBorder : SemanticColors.mutedText;
+    const valueColor = selected ? SemanticColors.value : SemanticColors.text;
+
+    return (
+        <box flexDirection="row" gap={1} {...({ onClick: onActivate })}>
+            <text fg={labelColor}>
+                {prefix}
+                {label}:
+            </text>
+            <text fg={valueColor}>{value}</text>
+        </box>
+    );
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { LabelProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function Label({ color = "text", bold, italic, wrap, children }: LabelProps & { children: ReactNode }) {
+    const fg = SemanticColors[color] ?? SemanticColors.text;
+
+    const content = bold ? <strong>{children}</strong> : children;
+
+    return (
+        <text fg={fg} {...({ wrap } as any)}>
+            {italic ? <em>{content}</em> : content}
+        </text>
+    );
+}

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

@@ -0,0 +1,14 @@
+import type { MenuButtonProps } from "../../../semantic/types.ts";
+import { MenuItem } from "./MenuItem.tsx";
+
+export function MenuButton({ label, selected, onActivate }: MenuButtonProps) {
+    return (
+        <box marginTop={1}>
+            <MenuItem
+                label={`[ ${label} ]`}
+                selected={selected}
+                onActivate={onActivate}
+            />
+        </box>
+    );
+}

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

@@ -0,0 +1,29 @@
+import type { MenuItemProps } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+export function MenuItem({
+    label,
+    description,
+    suffix,
+    selected,
+    onActivate,
+}: MenuItemProps) {
+    const prefix = selected ? "► " : "  ";
+    const displayLabel = suffix ? `${label} ${suffix}` : label;
+
+    const fg = selected ? SemanticColors.selectionText : SemanticColors.text;
+    const bg = selected ? SemanticColors.selectionBackground : undefined;
+
+    return (
+        <box flexDirection="column">
+            <text fg={fg} bg={bg} {...({ onClick: onActivate })}>
+                {prefix}{displayLabel}
+            </text>
+            {description ? (
+                <text fg={selected ? SemanticColors.text : SemanticColors.mutedText}>
+                    {"    "}{description}
+                </text>
+            ) : null}
+        </box>
+    );
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { OverlayProps } from "../../../semantic/types.ts";
+
+export function Overlay({
+    zIndex = 10,
+    top,
+    left,
+    right,
+    bottom,
+    width,
+    height,
+    children,
+}: OverlayProps & { children?: ReactNode }) {
+    return (
+        <box position="absolute" top={0} left={0} right={0} bottom={0} zIndex={zIndex}>
+            <box position="absolute" top={top as any} left={left as any} right={right as any} bottom={bottom as any} width={width as any} height={height as any}>
+                {children}
+            </box>
+        </box>
+    );
+}

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

@@ -0,0 +1,78 @@
+import type { ReactNode } from "react";
+import type { PanelProps, Spacing } from "../../../semantic/types.ts";
+import { SemanticColors } from "../../../theme.ts";
+
+function normalizePadding(
+    padding: number | Spacing | undefined,
+    opts: { dense: boolean }
+): { padding?: number; paddingTop?: number; paddingRight?: number; paddingBottom?: number; paddingLeft?: number } {
+    if (padding === undefined) {
+        return opts.dense
+            ? {
+                  padding: 0,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+              }
+            : { padding: 1 };
+    }
+
+    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 Panel({
+    title,
+    focused,
+    border = true,
+    surface = "panel",
+    dense = false,
+    children,
+    flex,
+    width,
+    height,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    gap,
+    padding,
+    noShrink,
+}: PanelProps & { children?: ReactNode }) {
+    const backgroundColor = surface === "overlay" ? SemanticColors.overlay : SemanticColors.panelBackground;
+
+    const borderColor = surface === "overlay" ? SemanticColors.warning : focused ? SemanticColors.focusBorder : SemanticColors.border;
+
+    const resolvedPadding = normalizePadding(padding, { dense });
+
+    return (
+        <box
+            border={border}
+            borderStyle={border ? "rounded" : undefined}
+            borderColor={borderColor}
+            title={title}
+            padding={resolvedPadding.padding}
+            paddingTop={resolvedPadding.paddingTop}
+            paddingRight={resolvedPadding.paddingRight}
+            paddingBottom={resolvedPadding.paddingBottom}
+            paddingLeft={resolvedPadding.paddingLeft}
+            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}
+            backgroundColor={backgroundColor}
+        >
+            {children}
+        </box>
+    );
+}