@colmbus72/yeehaw 0.1.0

package/dist/components/Header.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, Text } from 'ink';
+import figlet from 'figlet';
+// Convert hex to RGB
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+// Interpolate between two colors
+function interpolateColor(color1, color2, factor) {
+    const r = Math.round(color1.r + (color2.r - color1.r) * factor);
+    const g = Math.round(color1.g + (color2.g - color1.g) * factor);
+    const b = Math.round(color1.b + (color2.b - color1.b) * factor);
+    return `rgb(${r},${g},${b})`;
+}
+// Generate gradient colors for each line
+function generateGradient(lines, baseColor) {
+    const rgb = hexToRgb(baseColor);
+    if (!rgb)
+        return lines.map(() => baseColor);
+    // Calculate luminance to detect dark colors
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    let startRgb;
+    let endRgb;
+    if (luminance < 0.3) {
+        // Dark color: go from a lighter tint down to the base color
+        // Lift toward white while preserving hue
+        const liftFactor = 2.5;
+        startRgb = {
+            r: Math.min(255, Math.round(rgb.r * liftFactor + 40)),
+            g: Math.min(255, Math.round(rgb.g * liftFactor + 40)),
+            b: Math.min(255, Math.round(rgb.b * liftFactor + 40)),
+        };
+        endRgb = rgb;
+    }
+    else {
+        // Light/medium color: go from base to a darker version
+        startRgb = rgb;
+        endRgb = {
+            r: Math.round(rgb.r * 0.3),
+            g: Math.round(rgb.g * 0.3),
+            b: Math.round(rgb.b * 0.3),
+        };
+    }
+    return lines.map((_, i) => {
+        const factor = i / Math.max(lines.length - 1, 1);
+        return interpolateColor(startRgb, endRgb, factor);
+    });
+}
+// Tumbleweed mascot art
+const TUMBLEWEED = [
+    ' ░ ░▒░ ░▒░',
+    '░▒ · ‿ · ▒░',
+    '▒░ ▒░▒░ ░▒',
+    ' ░▒░ ░▒░ ░',
+];
+// Brownish tan color to complement yeehaw gold
+const TUMBLEWEED_COLOR = '#b8860b';
+export function Header({ text, subtitle, summary, color }) {
+    const [ascii, setAscii] = useState('');
+    useEffect(() => {
+        figlet.text(text.toUpperCase(), { font: 'ANSI Shadow' }, (err, result) => {
+            if (!err && result) {
+                setAscii(result);
+            }
+        });
+    }, [text]);
+    const lines = ascii.split('\n').filter(line => line.trim() !== '');
+    const baseColor = color || '#f0c040'; // Default yeehaw gold
+    const gradientColors = generateGradient(lines, baseColor);
+    // Show tumbleweed only for the main "yeehaw" title
+    const showTumbleweed = text.toLowerCase() === 'yeehaw';
+    // Vertically center tumbleweed next to ASCII art
+    const tumbleweedTopPadding = Math.max(0, Math.floor((lines.length - TUMBLEWEED.length) / 2));
+    return (_jsxs(Box, { flexDirection: "column", paddingTop: 1, paddingLeft: 2, children: [_jsxs(Box, { flexDirection: "row", children: [showTumbleweed && (_jsxs(Box, { flexDirection: "column", marginRight: 2, children: [Array(tumbleweedTopPadding).fill(null).map((_, i) => (_jsx(Text, { children: " " }, `pad-${i}`))), TUMBLEWEED.map((line, i) => (_jsx(Text, { color: TUMBLEWEED_COLOR, children: line }, `tumbleweed-${i}`)))] })), _jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { color: gradientColors[i], children: line }, i))) })] }), (subtitle || summary) && (_jsxs(Box, { gap: 2, children: [subtitle && _jsx(Text, { dimColor: true, children: subtitle }), summary && _jsxs(Text, { color: "gray", children: ["- ", summary] })] }))] }));
+}

package/dist/components/HelpOverlay.d.ts

@@ -0,0 +1,7 @@
+import { type HotkeyScope } from '../lib/hotkeys.js';
+interface HelpOverlayProps {
+    scope: HotkeyScope;
+    focusedPanel?: string;
+}
+export declare function HelpOverlay({ scope, focusedPanel }: HelpOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HelpOverlay.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { getHotkeysGrouped } from '../lib/hotkeys.js';
+function HotkeyRow({ hotkey }) {
+    return (_jsxs(Box, { gap: 2, children: [_jsx(Box, { width: 12, children: _jsx(Text, { color: "cyan", children: hotkey.key }) }), _jsx(Text, { children: hotkey.description })] }));
+}
+function HotkeySection({ title, hotkeys }) {
+    if (hotkeys.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: title }), hotkeys.map((h, i) => (_jsx(HotkeyRow, { hotkey: h }, `${h.key}-${i}`)))] }));
+}
+export function HelpOverlay({ scope, focusedPanel }) {
+    const grouped = getHotkeysGrouped(scope, focusedPanel);
+    // Also include list navigation if we're in a view with lists
+    const listHotkeys = scope !== 'global' ? getHotkeysGrouped('list').navigation : [];
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "double", borderColor: "yellow", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "yellow", children: "Keyboard Shortcuts" }), _jsx(HotkeySection, { title: "Navigation", hotkeys: [...grouped.navigation, ...listHotkeys] }), _jsx(HotkeySection, { title: "Actions", hotkeys: grouped.action }), _jsx(HotkeySection, { title: "System", hotkeys: grouped.system }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press ? to close" }) })] }));
+}

package/dist/components/List.d.ts

@@ -0,0 +1,17 @@
+export interface ListItem {
+    id: string;
+    label: string;
+    status?: 'active' | 'inactive' | 'error';
+    meta?: string;
+}
+interface ListProps {
+    items: ListItem[];
+    focused?: boolean;
+    selectedIndex?: number;
+    onSelect?: (item: ListItem) => void;
+    onAction?: (item: ListItem) => void;
+    onHighlight?: (item: ListItem | null) => void;
+    onSelectionChange?: (index: number) => void;
+}
+export declare function List({ items, focused, selectedIndex: controlledIndex, onSelect, onAction, onHighlight, onSelectionChange }: ListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/List.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function List({ items, focused = false, selectedIndex: controlledIndex, onSelect, onAction, onHighlight, onSelectionChange }) {
+    const [internalIndex, setInternalIndex] = useState(0);
+    // Use controlled index if provided, otherwise internal
+    const selectedIndex = controlledIndex ?? internalIndex;
+    const setSelectedIndex = (indexOrFn) => {
+        const newIndex = typeof indexOrFn === 'function' ? indexOrFn(selectedIndex) : indexOrFn;
+        if (controlledIndex === undefined) {
+            setInternalIndex(newIndex);
+        }
+        onSelectionChange?.(newIndex);
+    };
+    useEffect(() => {
+        if (items.length > 0 && onHighlight) {
+            onHighlight(items[selectedIndex] ?? null);
+        }
+    }, [selectedIndex, items, onHighlight]);
+    useInput((input, key) => {
+        if (!focused)
+            return;
+        if (input === 'j' || key.downArrow) {
+            setSelectedIndex((i) => Math.min(i + 1, items.length - 1));
+        }
+        if (input === 'k' || key.upArrow) {
+            setSelectedIndex((i) => Math.max(i - 1, 0));
+        }
+        if (input === 'g') {
+            setSelectedIndex(0);
+        }
+        if (input === 'G') {
+            setSelectedIndex(items.length - 1);
+        }
+        if (key.return && items[selectedIndex] && onSelect) {
+            onSelect(items[selectedIndex]);
+        }
+        if (input === 's' && items[selectedIndex] && onAction) {
+            onAction(items[selectedIndex]);
+        }
+    });
+    if (items.length === 0) {
+        return _jsx(Text, { dimColor: true, children: "No items" });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, index) => {
+            const isSelected = index === selectedIndex && focused;
+            const statusColor = item.status === 'active' ? 'green' :
+                item.status === 'error' ? 'red' : 'gray';
+            // Yeehaw brand gold for selection
+            const selectionColor = '#f0c040';
+            return (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: isSelected ? selectionColor : undefined, children: isSelected ? '›' : ' ' }, "arrow"), _jsx(Text, { color: isSelected ? selectionColor : undefined, bold: isSelected, children: item.label }, "label"), item.status && (_jsx(Text, { color: statusColor, children: "\u25CF" }, "status")), item.meta && (_jsx(Text, { dimColor: true, children: item.meta }, "meta"))] }, item.id));
+        }) }));
+}

package/dist/components/Markdown.d.ts

@@ -0,0 +1,8 @@
+interface MarkdownProps {
+    children: string;
+}
+/**
+ * Render markdown content in the terminal with formatting.
+ */
+export declare function Markdown({ children }: MarkdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Markdown.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { marked } from 'marked';
+// @ts-ignore - no types available
+import TerminalRenderer from 'marked-terminal';
+// Configure marked to use terminal renderer
+marked.setOptions({
+    renderer: new TerminalRenderer({
+        // Customize terminal rendering options
+        showSectionPrefix: false,
+        reflowText: true,
+        width: 80,
+    }),
+});
+/**
+ * Render markdown content in the terminal with formatting.
+ */
+export function Markdown({ children }) {
+    const rendered = marked.parse(children);
+    // marked-terminal returns a string with ANSI codes
+    // Ink's Text component will render these correctly
+    return _jsx(Text, { children: String(rendered).trim() });
+}

package/dist/components/Panel.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface PanelProps {
+    title: string;
+    children: ReactNode;
+    focused?: boolean;
+    width?: number | string;
+    hints?: string;
+}
+export declare function Panel({ title, children, focused, width, hints }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Panel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Panel({ title, children, focused = false, width, hints }) {
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: focused ? 'cyan' : 'gray', width: width, children: [_jsxs(Box, { paddingX: 1, marginBottom: 0, justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: focused ? 'cyan' : 'white', children: title }), focused && hints && (_jsx(Text, { color: "cyan", children: hints }))] }), _jsx(Box, { flexDirection: "column", paddingX: 1, children: children })] }));
+}

package/dist/components/PathInput.d.ts

@@ -0,0 +1,9 @@
+import type { Barn } from '../types.js';
+interface PathInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    barn?: Barn;
+}
+export declare function PathInput({ value, onChange, onSubmit, barn }: PathInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/PathInput.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { readdirSync, existsSync } from 'fs';
+import { join, dirname, basename } from 'path';
+import { homedir } from 'os';
+import { execaSync } from 'execa';
+import { hasValidSshConfig } from '../lib/config.js';
+function expandPath(path) {
+    if (path.startsWith('~/')) {
+        return join(homedir(), path.slice(2));
+    }
+    return path;
+}
+function getLocalCompletions(partialPath) {
+    if (!partialPath)
+        return [];
+    const expanded = expandPath(partialPath);
+    const dir = partialPath.endsWith('/') ? expanded : dirname(expanded);
+    const prefix = partialPath.endsWith('/') ? '' : basename(expanded);
+    try {
+        if (!existsSync(dir))
+            return [];
+        const entries = readdirSync(dir, { withFileTypes: true });
+        const matches = entries
+            .filter((e) => e.name.startsWith(prefix) && e.isDirectory())
+            .map((e) => e.name);
+        return matches;
+    }
+    catch {
+        return [];
+    }
+}
+function getRemoteCompletions(partialPath, barn) {
+    if (!partialPath)
+        return [];
+    // Verify barn has valid SSH config
+    if (!hasValidSshConfig(barn)) {
+        return []; // Can't do remote completion without SSH config
+    }
+    // Handle ~ expansion for display
+    const dir = partialPath.endsWith('/') ? partialPath : dirname(partialPath) || '~';
+    const prefix = partialPath.endsWith('/') ? '' : basename(partialPath);
+    try {
+        // Use SSH to list directories on the remote server
+        const result = execaSync('ssh', [
+            '-p', String(barn.port),
+            '-i', barn.identity_file,
+            '-o', 'BatchMode=yes',
+            '-o', 'ConnectTimeout=5',
+            `${barn.user}@${barn.host}`,
+            `ls -1d ${dir}/${prefix}*/ 2>/dev/null | xargs -n1 basename 2>/dev/null || true`
+        ], { timeout: 10000 });
+        const output = result.stdout.trim();
+        if (!output)
+            return [];
+        return output.split('\n').filter(Boolean);
+    }
+    catch {
+        return [];
+    }
+}
+export function PathInput({ value, onChange, onSubmit, barn }) {
+    const [cursorPos, setCursorPos] = useState(value.length);
+    const [completions, setCompletions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    // Update completions when value changes (debounced for remote)
+    useEffect(() => {
+        if (barn) {
+            // Remote completion - debounce
+            setLoading(true);
+            const timer = setTimeout(() => {
+                const results = getRemoteCompletions(value, barn);
+                setCompletions(results);
+                setLoading(false);
+            }, 300);
+            return () => clearTimeout(timer);
+        }
+        else {
+            // Local completion - immediate
+            setCompletions(getLocalCompletions(value));
+        }
+    }, [value, barn]);
+    useInput((input, key) => {
+        if (key.return) {
+            onSubmit(value);
+            return;
+        }
+        if (key.tab) {
+            // Tab completion
+            if (completions.length === 1) {
+                // Single match - complete it
+                const displayDir = value.endsWith('/') ? value : value.slice(0, value.lastIndexOf('/') + 1) || (barn ? '~/' : '');
+                const newPath = displayDir + completions[0] + '/';
+                onChange(newPath);
+                setCursorPos(newPath.length);
+            }
+            else if (completions.length > 1) {
+                // Multiple matches - find common prefix
+                const commonPrefix = completions.reduce((acc, curr) => {
+                    let i = 0;
+                    while (i < acc.length && i < curr.length && acc[i] === curr[i])
+                        i++;
+                    return acc.slice(0, i);
+                });
+                if (commonPrefix) {
+                    const displayDir = value.endsWith('/') ? value : value.slice(0, value.lastIndexOf('/') + 1) || (barn ? '~/' : '');
+                    const newPath = displayDir + commonPrefix;
+                    onChange(newPath);
+                    setCursorPos(newPath.length);
+                }
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (value.length > 0) {
+                const newValue = value.slice(0, -1);
+                onChange(newValue);
+                setCursorPos(Math.max(0, cursorPos - 1));
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            setCursorPos(Math.max(0, cursorPos - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            setCursorPos(Math.min(value.length, cursorPos + 1));
+            return;
+        }
+        // Regular character input
+        if (input && !key.ctrl && !key.meta) {
+            const newValue = value + input;
+            onChange(newValue);
+            setCursorPos(newValue.length);
+        }
+    });
+    // Show completions hint
+    const showHint = completions.length > 1 && completions.length <= 5;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { children: value }), _jsx(Text, { backgroundColor: "white", color: "black", children: " " }), loading && _jsx(Text, { dimColor: true, children: " (loading...)" })] }), showHint && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Tab: ", completions.join('  ')] }) }))] }));
+}

package/dist/components/ScrollableMarkdown.d.ts

@@ -0,0 +1,11 @@
+interface ScrollableMarkdownProps {
+    children: string;
+    focused?: boolean;
+    height?: number;
+}
+/**
+ * Scrollable markdown content panel.
+ * When focused, j/k or arrow keys scroll the content.
+ */
+export declare function ScrollableMarkdown({ children, focused, height, }: ScrollableMarkdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ScrollableMarkdown.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { marked } from 'marked';
+// @ts-ignore - no types available
+import TerminalRenderer from 'marked-terminal';
+// Configure marked to use terminal renderer
+marked.setOptions({
+    renderer: new TerminalRenderer({
+        showSectionPrefix: false,
+        reflowText: true,
+        width: 80,
+    }),
+});
+/**
+ * Scrollable markdown content panel.
+ * When focused, j/k or arrow keys scroll the content.
+ */
+export function ScrollableMarkdown({ children, focused = false, height = 20, }) {
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Reset scroll when content changes
+    useEffect(() => {
+        setScrollOffset(0);
+    }, [children]);
+    // Render markdown to string with ANSI codes
+    const rendered = String(marked.parse(children)).trim();
+    const lines = rendered.split('\n');
+    const totalLines = lines.length;
+    const visibleLines = height - 1; // Leave room for scroll indicator
+    useInput((input, key) => {
+        if (!focused)
+            return;
+        if (input === 'j' || key.downArrow) {
+            setScrollOffset((prev) => Math.min(prev + 1, Math.max(0, totalLines - visibleLines)));
+        }
+        if (input === 'k' || key.upArrow) {
+            setScrollOffset((prev) => Math.max(prev - 1, 0));
+        }
+        if (input === 'g') {
+            setScrollOffset(0);
+        }
+        if (input === 'G') {
+            setScrollOffset(Math.max(0, totalLines - visibleLines));
+        }
+        if (key.pageDown) {
+            setScrollOffset((prev) => Math.min(prev + visibleLines, Math.max(0, totalLines - visibleLines)));
+        }
+        if (key.pageUp) {
+            setScrollOffset((prev) => Math.max(prev - visibleLines, 0));
+        }
+    });
+    // Get visible slice of lines
+    const displayLines = lines.slice(scrollOffset, scrollOffset + visibleLines);
+    const showScrollIndicator = totalLines > visibleLines;
+    return (_jsxs(Box, { flexDirection: "column", height: height, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, children: displayLines.map((line, idx) => (_jsx(Text, { children: line || ' ' }, scrollOffset + idx))) }), showScrollIndicator && (_jsx(Box, { justifyContent: "flex-end", children: _jsxs(Text, { dimColor: true, children: ["[", scrollOffset + 1, "-", Math.min(scrollOffset + visibleLines, totalLines), "/", totalLines, "]", focused ? ' (j/k to scroll)' : ''] }) }))] }));
+}

package/dist/components/StatusBar.d.ts

@@ -0,0 +1,5 @@
+interface StatusBarProps {
+    view: 'global' | 'project';
+}
+export declare function StatusBar({ view }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StatusBar.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const globalShortcuts = [
+    { key: 'Enter', label: 'select' },
+    { key: 'Tab', label: 'switch panel' },
+    { key: 'n', label: 'new project' },
+    { key: 'c', label: 'claude' },
+    { key: '?', label: 'help' },
+];
+const projectShortcuts = [
+    { key: 'Enter', label: 'shell' },
+    { key: 'c', label: 'claude' },
+    { key: 'Tab', label: 'switch panel' },
+    { key: '?', label: 'help' },
+    { key: 'Esc', label: 'back' },
+];
+export function StatusBar({ view }) {
+    const shortcuts = view === 'global' ? globalShortcuts : projectShortcuts;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, justifyContent: "space-between", children: [_jsx(Box, { gap: 2, children: shortcuts.map((shortcut) => (_jsxs(Text, { children: [_jsxs(Text, { color: "cyan", children: ["[", shortcut.key, "]"] }), _jsx(Text, { dimColor: true, children: shortcut.label })] }, shortcut.key))) }), view === 'global' ? (_jsxs(Box, { gap: 2, children: [_jsxs(Text, { children: [_jsx(Text, { color: "yellow", children: "q" }), _jsx(Text, { dimColor: true, children: ":detach" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "red", children: "Q" }), _jsx(Text, { dimColor: true, children: ":quit all" })] })] })) : (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "q" }), _jsx(Text, { dimColor: true, children: ":back" })] }))] }));
+}

package/dist/components/TextArea.d.ts

@@ -0,0 +1,17 @@
+interface TextAreaProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    height?: number;
+}
+/**
+ * Multiline text input component.
+ * - Enter: add newline
+ * - Ctrl+S: save/submit
+ * - Ctrl+D: also save/submit (alternative)
+ * - Backspace: delete character
+ * - Arrow keys: navigate
+ */
+export declare function TextArea({ value, onChange, onSubmit, placeholder, height, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextArea.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+/**
+ * Multiline text input component.
+ * - Enter: add newline
+ * - Ctrl+S: save/submit
+ * - Ctrl+D: also save/submit (alternative)
+ * - Backspace: delete character
+ * - Arrow keys: navigate
+ */
+export function TextArea({ value, onChange, onSubmit, placeholder, height = 8, }) {
+    const [cursorPos, setCursorPos] = useState(value.length);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    // Keep cursor in bounds when value changes
+    useEffect(() => {
+        if (cursorPos > value.length) {
+            setCursorPos(value.length);
+        }
+    }, [value, cursorPos]);
+    // Calculate cursor line for auto-scroll
+    const getCursorLine = () => {
+        const beforeCursor = value.slice(0, cursorPos);
+        return (beforeCursor.match(/\n/g) || []).length;
+    };
+    // Auto-scroll to keep cursor visible
+    useEffect(() => {
+        const cursorLine = getCursorLine();
+        const visibleLines = height - 2;
+        if (cursorLine < scrollOffset) {
+            setScrollOffset(cursorLine);
+        }
+        else if (cursorLine >= scrollOffset + visibleLines) {
+            setScrollOffset(cursorLine - visibleLines + 1);
+        }
+    }, [cursorPos, value, height]);
+    useInput((input, key) => {
+        // Ctrl+S or Ctrl+D to submit
+        if ((key.ctrl && input === 's') || (key.ctrl && input === 'd')) {
+            onSubmit?.(value);
+            return;
+        }
+        // Enter adds newline
+        if (key.return) {
+            const newValue = value.slice(0, cursorPos) + '\n' + value.slice(cursorPos);
+            onChange(newValue);
+            setCursorPos(cursorPos + 1);
+            return;
+        }
+        // Backspace
+        if (key.backspace || key.delete) {
+            if (cursorPos > 0) {
+                const newValue = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
+                onChange(newValue);
+                setCursorPos(cursorPos - 1);
+            }
+            return;
+        }
+        // Arrow keys for cursor movement
+        if (key.leftArrow) {
+            setCursorPos(Math.max(0, cursorPos - 1));
+            return;
+        }
+        if (key.rightArrow) {
+            setCursorPos(Math.min(value.length, cursorPos + 1));
+            return;
+        }
+        if (key.upArrow) {
+            const beforeCursor = value.slice(0, cursorPos);
+            const currentLineStart = beforeCursor.lastIndexOf('\n') + 1;
+            if (currentLineStart > 0) {
+                const posInLine = cursorPos - currentLineStart;
+                const prevLineEnd = currentLineStart - 1;
+                const prevLineStart = value.lastIndexOf('\n', prevLineEnd - 1) + 1;
+                const prevLineLength = prevLineEnd - prevLineStart;
+                const newPos = prevLineStart + Math.min(posInLine, prevLineLength);
+                setCursorPos(newPos);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            const nextLineStart = value.indexOf('\n', cursorPos);
+            if (nextLineStart !== -1) {
+                const currentLineStart = value.lastIndexOf('\n', cursorPos - 1) + 1;
+                const posInLine = cursorPos - currentLineStart;
+                const nextLineEnd = value.indexOf('\n', nextLineStart + 1);
+                const nextLineLength = (nextLineEnd === -1 ? value.length : nextLineEnd) - nextLineStart - 1;
+                const newPos = nextLineStart + 1 + Math.min(posInLine, nextLineLength);
+                setCursorPos(newPos);
+            }
+            return;
+        }
+        // Page up/down for scrolling
+        if (key.pageUp) {
+            setScrollOffset(Math.max(0, scrollOffset - (height - 2)));
+            return;
+        }
+        if (key.pageDown) {
+            const totalLines = (value.match(/\n/g) || []).length + 1;
+            setScrollOffset(Math.min(totalLines - 1, scrollOffset + (height - 2)));
+            return;
+        }
+        // Regular character input
+        if (input && !key.ctrl && !key.meta && input.charCodeAt(0) >= 32) {
+            const newValue = value.slice(0, cursorPos) + input + value.slice(cursorPos);
+            onChange(newValue);
+            setCursorPos(cursorPos + input.length);
+        }
+    });
+    // Render
+    const displayValue = value || '';
+    const showPlaceholder = !value && placeholder;
+    const lines = (showPlaceholder ? placeholder : displayValue).split('\n');
+    const totalLines = lines.length;
+    const visibleLines = height - 2;
+    // Calculate cursor position
+    let cursorLine = 0;
+    let cursorCol = 0;
+    if (!showPlaceholder && value) {
+        const beforeCursor = value.slice(0, cursorPos);
+        cursorLine = (beforeCursor.match(/\n/g) || []).length;
+        const lastNewline = beforeCursor.lastIndexOf('\n');
+        cursorCol = lastNewline === -1 ? cursorPos : cursorPos - lastNewline - 1;
+    }
+    // Get visible lines with scroll
+    const visibleStart = scrollOffset;
+    const visibleEnd = Math.min(scrollOffset + visibleLines, totalLines);
+    const displayLines = lines.slice(visibleStart, visibleEnd);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", padding: 1, height: height, children: [displayLines.map((line, displayIdx) => {
+                const actualLineIdx = visibleStart + displayIdx;
+                const isCursorLine = actualLineIdx === cursorLine && !showPlaceholder;
+                if (isCursorLine) {
+                    const before = line.slice(0, cursorCol);
+                    const cursorChar = line[cursorCol] || ' ';
+                    const after = line.slice(cursorCol + 1);
+                    return (_jsx(Box, { children: _jsxs(Text, { children: [before, _jsx(Text, { inverse: true, children: cursorChar }), after] }) }, actualLineIdx));
+                }
+                return (_jsx(Box, { children: _jsx(Text, { dimColor: showPlaceholder ? true : undefined, children: line || ' ' }) }, actualLineIdx));
+            }), totalLines > visibleLines && (_jsx(Box, { justifyContent: "flex-end", children: _jsxs(Text, { dimColor: true, children: ["[", visibleStart + 1, "-", visibleEnd, "/", totalLines, "]"] }) }))] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export { Header } from './Header.js';
+export { StatusBar } from './StatusBar.js';
+export { Panel } from './Panel.js';
+export { List, type ListItem } from './List.js';
+export { HelpOverlay } from './HelpOverlay.js';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export { Header } from './Header.js';
+export { StatusBar } from './StatusBar.js';
+export { Panel } from './Panel.js';
+export { List } from './List.js';
+export { HelpOverlay } from './HelpOverlay.js';