@claude-code-kit/ui 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,284 @@
+import { Color } from '@claude-code-kit/ink-renderer';
+export * from '@claude-code-kit/ink-renderer';
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type DividerProps = {
+    width?: number;
+    color?: Color;
+    char?: string;
+    padding?: number;
+    title?: string;
+};
+declare function Divider({ width, color, char, padding, title }: DividerProps): React.ReactNode;
+
+type Props$2 = {
+    ratio: number;
+    width: number;
+    fillColor?: Color;
+    emptyColor?: Color;
+};
+declare function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor }: Props$2): React.ReactNode;
+
+type Status = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'loading';
+type Props$1 = {
+    status: Status;
+    withSpace?: boolean;
+};
+declare function StatusIcon({ status, withSpace }: Props$1): React.ReactNode;
+
+type StatusLineSegment = {
+    content: string;
+    color?: Color;
+    flex?: boolean;
+};
+type StatusLineProps = {
+    segments?: StatusLineSegment[];
+    text?: string;
+    paddingX?: number;
+    gap?: number;
+    borderStyle?: 'none' | 'single' | 'round';
+    borderColor?: Color;
+};
+declare function StatusLine({ segments, text, paddingX, gap, borderStyle, borderColor, }: StatusLineProps): React.ReactNode;
+declare function useStatusLine(updater: () => StatusLineSegment[] | string, deps: unknown[], intervalMs?: number): StatusLineSegment[] | string;
+
+type CommandResult = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'skip';
+};
+type CommandOnDone = (result?: string) => void;
+type CommandBase = {
+    name: string;
+    description: string;
+    aliases?: string[];
+    isHidden?: boolean;
+    isEnabled?: () => boolean;
+    argumentHint?: string;
+};
+type LocalCommand = CommandBase & {
+    type: 'local';
+    execute: (args: string) => Promise<CommandResult> | CommandResult;
+};
+type JSXCommand = CommandBase & {
+    type: 'jsx';
+    render: (onDone: CommandOnDone, args: string) => React.ReactNode;
+};
+type Command$1 = LocalCommand | JSXCommand;
+
+declare class CommandRegistry {
+    private commands;
+    register(...commands: Command$1[]): void;
+    get(name: string): Command$1 | undefined;
+    getAll(): Command$1[];
+    getVisible(): Command$1[];
+    parse(input: string): {
+        command: Command$1;
+        args: string;
+    } | null;
+    getSuggestions(partial: string): Command$1[];
+}
+declare function createCommandRegistry(commands: Command$1[]): CommandRegistry;
+
+declare function defineCommand(cmd: Command$1): Command$1;
+declare function defineLocalCommand(cmd: Omit<LocalCommand, 'type'>): LocalCommand;
+declare function defineJSXCommand(cmd: Omit<JSXCommand, 'type'>): JSXCommand;
+
+declare const exitCommand: Command$1;
+declare const helpCommand: (registry: {
+    getVisible: () => Command$1[];
+}) => Command$1;
+declare const clearCommand: Command$1;
+
+/**
+ * Zod schema for keybindings.json configuration.
+ * Used for validation and JSON schema generation.
+ */
+
+/**
+ * Valid context names where keybindings can be applied.
+ */
+declare const KEYBINDING_CONTEXTS: readonly ["Global", "Chat", "Autocomplete", "Confirmation", "Help", "Transcript", "HistorySearch", "Task", "ThemePicker", "Settings", "Tabs", "Attachments", "Footer", "MessageSelector", "DiffDialog", "ModelPicker", "Select", "Plugin", "Scroll"];
+
+/**
+ * Core types for the keybinding system.
+ */
+
+type KeybindingContextName = (typeof KEYBINDING_CONTEXTS)[number];
+type KeybindingBlock = {
+    context: KeybindingContextName;
+    bindings: Record<string, string | null>;
+};
+
+type Options = {
+    /** Which context this binding belongs to (default: 'Global') */
+    context?: KeybindingContextName;
+    /** Only handle when active (like useInput's isActive) */
+    isActive?: boolean;
+};
+/**
+ * Ink-native hook for handling a keybinding.
+ *
+ * The handler stays in the component (React way).
+ * The binding (keystroke → action) comes from config.
+ *
+ * Supports chord sequences (e.g., "ctrl+k ctrl+s"). When a chord is started,
+ * the hook will manage the pending state automatically.
+ *
+ * Uses stopImmediatePropagation() to prevent other handlers from firing
+ * once this binding is handled.
+ *
+ * @example
+ * ```tsx
+ * useKeybinding('app:toggleTodos', () => {
+ *   setShowTodos(prev => !prev)
+ * }, { context: 'Global' })
+ * ```
+ */
+declare function useKeybinding(action: string, handler: () => void | false | Promise<void>, options?: Options): void;
+/**
+ * Handle multiple keybindings in one hook (reduces useInput calls).
+ *
+ * Supports chord sequences. When a chord is started, the hook will
+ * manage the pending state automatically.
+ *
+ * @example
+ * ```tsx
+ * useKeybindings({
+ *   'chat:submit': () => handleSubmit(),
+ *   'chat:cancel': () => handleCancel(),
+ * }, { context: 'Chat' })
+ * ```
+ */
+declare function useKeybindings(handlers: Record<string, () => void | false | Promise<void>>, options?: Options): void;
+
+/**
+ * Setup utilities for integrating KeybindingProvider into the app.
+ *
+ * Loads both default bindings and user-defined bindings from
+ * ~/.claude/keybindings.json, with hot-reload support when the file changes.
+ */
+
+type Props = {
+    children: React.ReactNode;
+    /** Optional callback invoked when keybinding warnings are present */
+    onWarnings?: (message: string, isError: boolean) => void;
+};
+/**
+ * Keybinding provider with default + user bindings and hot-reload support.
+ *
+ * Usage: Wrap your app with this provider to enable keybinding support.
+ *
+ * ```tsx
+ * <KeybindingSetup>
+ *   <App ... />
+ * </KeybindingSetup>
+ * ```
+ *
+ * Features:
+ * - Loads default bindings from code
+ * - Merges with user bindings from ~/.claude/keybindings.json
+ * - Watches for file changes and reloads automatically (hot-reload)
+ * - User bindings override defaults (later entries win)
+ * - Chord support with automatic timeout
+ */
+declare function KeybindingSetup({ children, onWarnings }: Props): React.ReactNode;
+
+declare const DEFAULT_BINDINGS: KeybindingBlock[];
+
+type Command = {
+    name: string;
+    description: string;
+};
+type PromptInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    prefix?: string;
+    prefixColor?: string;
+    disabled?: boolean;
+    commands?: Command[];
+    onCommandSelect?: (name: string) => void;
+    history?: string[];
+};
+declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, }: PromptInputProps): React.ReactNode;
+
+type SpinnerProps = {
+    label?: string;
+    verb?: string;
+    verbs?: string[];
+    color?: string;
+    showElapsed?: boolean;
+};
+declare function Spinner({ label, verb, verbs, color, showElapsed, }: SpinnerProps): React.ReactNode;
+
+type SelectOption<T = string> = {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type SelectProps<T = string> = {
+    options: SelectOption<T>[];
+    defaultValue?: T;
+    onChange: (value: T) => void;
+    onCancel?: () => void;
+    title?: string;
+    maxVisible?: number;
+};
+type MultiSelectProps<T = string> = Omit<SelectProps<T>, 'onChange'> & {
+    selectedValues?: T[];
+    onToggle: (value: T) => void;
+    onConfirm: (values: T[]) => void;
+};
+declare function Select<T = string>({ options, defaultValue, onChange, onCancel, title, maxVisible, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T = string>({ options, selectedValues, onToggle, onConfirm, onCancel, title, maxVisible, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type Message = {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp?: number;
+};
+type MessageListProps = {
+    messages: Message[];
+    streamingContent?: string | null;
+    renderMessage?: (message: Message) => React.ReactNode;
+};
+declare function MessageList({ messages, streamingContent, renderMessage, }: MessageListProps): React.ReactNode;
+
+type StreamingTextProps = {
+    text: string;
+    speed?: number;
+    interval?: number;
+    onComplete?: () => void;
+    color?: string;
+};
+declare function StreamingText({ text, speed, interval, onComplete, color, }: StreamingTextProps): React.ReactNode;
+
+type REPLCommand = {
+    name: string;
+    description: string;
+    onExecute: (args: string) => void;
+};
+type REPLProps = {
+    onSubmit: (message: string) => Promise<void> | void;
+    onExit?: () => void;
+    messages: Message[];
+    isLoading?: boolean;
+    streamingContent?: string | null;
+    commands?: REPLCommand[];
+    model?: string;
+    statusSegments?: StatusLineSegment[];
+    prefix?: string;
+    placeholder?: string;
+    history?: string[];
+    renderMessage?: (message: Message) => React.ReactNode;
+    spinner?: React.ReactNode;
+};
+declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React.ReactNode;
+
+export { type Command$1 as Command, type CommandBase, type CommandOnDone, CommandRegistry, type CommandResult, DEFAULT_BINDINGS, Divider, type JSXCommand, KeybindingSetup, type LocalCommand, type Message, MessageList, type MessageListProps, MultiSelect, type MultiSelectProps, ProgressBar, PromptInput, REPL, type REPLProps, Select, type SelectOption, type SelectProps, Spinner, StatusIcon, StatusLine, type StatusLineProps, type StatusLineSegment, StreamingText, type StreamingTextProps, clearCommand, createCommandRegistry, defineCommand, defineJSXCommand, defineLocalCommand, exitCommand, helpCommand, useKeybinding, useKeybindings, useStatusLine };

package/dist/index.d.ts

@@ -0,0 +1,284 @@
+import { Color } from '@claude-code-kit/ink-renderer';
+export * from '@claude-code-kit/ink-renderer';
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type DividerProps = {
+    width?: number;
+    color?: Color;
+    char?: string;
+    padding?: number;
+    title?: string;
+};
+declare function Divider({ width, color, char, padding, title }: DividerProps): React.ReactNode;
+
+type Props$2 = {
+    ratio: number;
+    width: number;
+    fillColor?: Color;
+    emptyColor?: Color;
+};
+declare function ProgressBar({ ratio: inputRatio, width, fillColor, emptyColor }: Props$2): React.ReactNode;
+
+type Status = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'loading';
+type Props$1 = {
+    status: Status;
+    withSpace?: boolean;
+};
+declare function StatusIcon({ status, withSpace }: Props$1): React.ReactNode;
+
+type StatusLineSegment = {
+    content: string;
+    color?: Color;
+    flex?: boolean;
+};
+type StatusLineProps = {
+    segments?: StatusLineSegment[];
+    text?: string;
+    paddingX?: number;
+    gap?: number;
+    borderStyle?: 'none' | 'single' | 'round';
+    borderColor?: Color;
+};
+declare function StatusLine({ segments, text, paddingX, gap, borderStyle, borderColor, }: StatusLineProps): React.ReactNode;
+declare function useStatusLine(updater: () => StatusLineSegment[] | string, deps: unknown[], intervalMs?: number): StatusLineSegment[] | string;
+
+type CommandResult = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'skip';
+};
+type CommandOnDone = (result?: string) => void;
+type CommandBase = {
+    name: string;
+    description: string;
+    aliases?: string[];
+    isHidden?: boolean;
+    isEnabled?: () => boolean;
+    argumentHint?: string;
+};
+type LocalCommand = CommandBase & {
+    type: 'local';
+    execute: (args: string) => Promise<CommandResult> | CommandResult;
+};
+type JSXCommand = CommandBase & {
+    type: 'jsx';
+    render: (onDone: CommandOnDone, args: string) => React.ReactNode;
+};
+type Command$1 = LocalCommand | JSXCommand;
+
+declare class CommandRegistry {
+    private commands;
+    register(...commands: Command$1[]): void;
+    get(name: string): Command$1 | undefined;
+    getAll(): Command$1[];
+    getVisible(): Command$1[];
+    parse(input: string): {
+        command: Command$1;
+        args: string;
+    } | null;
+    getSuggestions(partial: string): Command$1[];
+}
+declare function createCommandRegistry(commands: Command$1[]): CommandRegistry;
+
+declare function defineCommand(cmd: Command$1): Command$1;
+declare function defineLocalCommand(cmd: Omit<LocalCommand, 'type'>): LocalCommand;
+declare function defineJSXCommand(cmd: Omit<JSXCommand, 'type'>): JSXCommand;
+
+declare const exitCommand: Command$1;
+declare const helpCommand: (registry: {
+    getVisible: () => Command$1[];
+}) => Command$1;
+declare const clearCommand: Command$1;
+
+/**
+ * Zod schema for keybindings.json configuration.
+ * Used for validation and JSON schema generation.
+ */
+
+/**
+ * Valid context names where keybindings can be applied.
+ */
+declare const KEYBINDING_CONTEXTS: readonly ["Global", "Chat", "Autocomplete", "Confirmation", "Help", "Transcript", "HistorySearch", "Task", "ThemePicker", "Settings", "Tabs", "Attachments", "Footer", "MessageSelector", "DiffDialog", "ModelPicker", "Select", "Plugin", "Scroll"];
+
+/**
+ * Core types for the keybinding system.
+ */
+
+type KeybindingContextName = (typeof KEYBINDING_CONTEXTS)[number];
+type KeybindingBlock = {
+    context: KeybindingContextName;
+    bindings: Record<string, string | null>;
+};
+
+type Options = {
+    /** Which context this binding belongs to (default: 'Global') */
+    context?: KeybindingContextName;
+    /** Only handle when active (like useInput's isActive) */
+    isActive?: boolean;
+};
+/**
+ * Ink-native hook for handling a keybinding.
+ *
+ * The handler stays in the component (React way).
+ * The binding (keystroke → action) comes from config.
+ *
+ * Supports chord sequences (e.g., "ctrl+k ctrl+s"). When a chord is started,
+ * the hook will manage the pending state automatically.
+ *
+ * Uses stopImmediatePropagation() to prevent other handlers from firing
+ * once this binding is handled.
+ *
+ * @example
+ * ```tsx
+ * useKeybinding('app:toggleTodos', () => {
+ *   setShowTodos(prev => !prev)
+ * }, { context: 'Global' })
+ * ```
+ */
+declare function useKeybinding(action: string, handler: () => void | false | Promise<void>, options?: Options): void;
+/**
+ * Handle multiple keybindings in one hook (reduces useInput calls).
+ *
+ * Supports chord sequences. When a chord is started, the hook will
+ * manage the pending state automatically.
+ *
+ * @example
+ * ```tsx
+ * useKeybindings({
+ *   'chat:submit': () => handleSubmit(),
+ *   'chat:cancel': () => handleCancel(),
+ * }, { context: 'Chat' })
+ * ```
+ */
+declare function useKeybindings(handlers: Record<string, () => void | false | Promise<void>>, options?: Options): void;
+
+/**
+ * Setup utilities for integrating KeybindingProvider into the app.
+ *
+ * Loads both default bindings and user-defined bindings from
+ * ~/.claude/keybindings.json, with hot-reload support when the file changes.
+ */
+
+type Props = {
+    children: React.ReactNode;
+    /** Optional callback invoked when keybinding warnings are present */
+    onWarnings?: (message: string, isError: boolean) => void;
+};
+/**
+ * Keybinding provider with default + user bindings and hot-reload support.
+ *
+ * Usage: Wrap your app with this provider to enable keybinding support.
+ *
+ * ```tsx
+ * <KeybindingSetup>
+ *   <App ... />
+ * </KeybindingSetup>
+ * ```
+ *
+ * Features:
+ * - Loads default bindings from code
+ * - Merges with user bindings from ~/.claude/keybindings.json
+ * - Watches for file changes and reloads automatically (hot-reload)
+ * - User bindings override defaults (later entries win)
+ * - Chord support with automatic timeout
+ */
+declare function KeybindingSetup({ children, onWarnings }: Props): React.ReactNode;
+
+declare const DEFAULT_BINDINGS: KeybindingBlock[];
+
+type Command = {
+    name: string;
+    description: string;
+};
+type PromptInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    prefix?: string;
+    prefixColor?: string;
+    disabled?: boolean;
+    commands?: Command[];
+    onCommandSelect?: (name: string) => void;
+    history?: string[];
+};
+declare function PromptInput({ value, onChange, onSubmit, placeholder, prefix, prefixColor, disabled, commands, onCommandSelect, history, }: PromptInputProps): React.ReactNode;
+
+type SpinnerProps = {
+    label?: string;
+    verb?: string;
+    verbs?: string[];
+    color?: string;
+    showElapsed?: boolean;
+};
+declare function Spinner({ label, verb, verbs, color, showElapsed, }: SpinnerProps): React.ReactNode;
+
+type SelectOption<T = string> = {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+};
+type SelectProps<T = string> = {
+    options: SelectOption<T>[];
+    defaultValue?: T;
+    onChange: (value: T) => void;
+    onCancel?: () => void;
+    title?: string;
+    maxVisible?: number;
+};
+type MultiSelectProps<T = string> = Omit<SelectProps<T>, 'onChange'> & {
+    selectedValues?: T[];
+    onToggle: (value: T) => void;
+    onConfirm: (values: T[]) => void;
+};
+declare function Select<T = string>({ options, defaultValue, onChange, onCancel, title, maxVisible, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T = string>({ options, selectedValues, onToggle, onConfirm, onCancel, title, maxVisible, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type Message = {
+    id: string;
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp?: number;
+};
+type MessageListProps = {
+    messages: Message[];
+    streamingContent?: string | null;
+    renderMessage?: (message: Message) => React.ReactNode;
+};
+declare function MessageList({ messages, streamingContent, renderMessage, }: MessageListProps): React.ReactNode;
+
+type StreamingTextProps = {
+    text: string;
+    speed?: number;
+    interval?: number;
+    onComplete?: () => void;
+    color?: string;
+};
+declare function StreamingText({ text, speed, interval, onComplete, color, }: StreamingTextProps): React.ReactNode;
+
+type REPLCommand = {
+    name: string;
+    description: string;
+    onExecute: (args: string) => void;
+};
+type REPLProps = {
+    onSubmit: (message: string) => Promise<void> | void;
+    onExit?: () => void;
+    messages: Message[];
+    isLoading?: boolean;
+    streamingContent?: string | null;
+    commands?: REPLCommand[];
+    model?: string;
+    statusSegments?: StatusLineSegment[];
+    prefix?: string;
+    placeholder?: string;
+    history?: string[];
+    renderMessage?: (message: Message) => React.ReactNode;
+    spinner?: React.ReactNode;
+};
+declare function REPL({ onSubmit, onExit, messages, isLoading, streamingContent, commands, model, statusSegments, prefix, placeholder, history: externalHistory, renderMessage, spinner, }: REPLProps): React.ReactNode;
+
+export { type Command$1 as Command, type CommandBase, type CommandOnDone, CommandRegistry, type CommandResult, DEFAULT_BINDINGS, Divider, type JSXCommand, KeybindingSetup, type LocalCommand, type Message, MessageList, type MessageListProps, MultiSelect, type MultiSelectProps, ProgressBar, PromptInput, REPL, type REPLProps, Select, type SelectOption, type SelectProps, Spinner, StatusIcon, StatusLine, type StatusLineProps, type StatusLineSegment, StreamingText, type StreamingTextProps, clearCommand, createCommandRegistry, defineCommand, defineJSXCommand, defineLocalCommand, exitCommand, helpCommand, useKeybinding, useKeybindings, useStatusLine };