ink-prompt 0.1.2

package/dist/components/MultilineInput/__tests__/TextRenderer.test.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { TextRenderer, wrapLines } from '../TextRenderer.js';
+describe('wrapLines', () => {
+    describe('no wrapping needed', () => {
+        it('returns single line unchanged when shorter than width', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 5 };
+            const result = wrapLines(buffer, cursor, 80);
+            expect(result.visualLines).toEqual(['hello']);
+            expect(result.cursorVisualRow).toBe(0);
+            expect(result.cursorVisualCol).toBe(5);
+        });
+        it('returns multiple lines unchanged when all shorter than width', () => {
+            const buffer = { lines: ['hello', 'world'] };
+            const cursor = { line: 1, column: 3 };
+            const result = wrapLines(buffer, cursor, 80);
+            expect(result.visualLines).toEqual(['hello', 'world']);
+            expect(result.cursorVisualRow).toBe(1);
+            expect(result.cursorVisualCol).toBe(3);
+        });
+        it('handles empty buffer', () => {
+            const buffer = { lines: [''] };
+            const cursor = { line: 0, column: 0 };
+            const result = wrapLines(buffer, cursor, 80);
+            expect(result.visualLines).toEqual(['']);
+            expect(result.cursorVisualRow).toBe(0);
+            expect(result.cursorVisualCol).toBe(0);
+        });
+    });
+    describe('wrapping single line', () => {
+        it('wraps line exceeding width', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 0 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.visualLines).toEqual(['abcde', 'fghij']);
+        });
+        it('wraps line into multiple visual lines', () => {
+            const buffer = { lines: ['abcdefghijklmno'] };
+            const cursor = { line: 0, column: 0 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.visualLines).toEqual(['abcde', 'fghij', 'klmno']);
+        });
+        it('handles exact width match (no extra empty line)', () => {
+            const buffer = { lines: ['abcde'] };
+            const cursor = { line: 0, column: 5 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.visualLines).toEqual(['abcde']);
+        });
+    });
+    describe('cursor position in wrapped lines', () => {
+        it('cursor on first visual row', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 3 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.cursorVisualRow).toBe(0);
+            expect(result.cursorVisualCol).toBe(3);
+        });
+        it('cursor on second visual row', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 7 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.cursorVisualRow).toBe(1);
+            expect(result.cursorVisualCol).toBe(2);
+        });
+        it('cursor at wrap boundary (end of first visual row)', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 5 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.cursorVisualRow).toBe(1);
+            expect(result.cursorVisualCol).toBe(0);
+        });
+        it('cursor at end of wrapped line', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 10 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.cursorVisualRow).toBe(1);
+            expect(result.cursorVisualCol).toBe(5);
+        });
+    });
+    describe('wrapping multiple lines', () => {
+        it('wraps only the line that exceeds width', () => {
+            const buffer = { lines: ['hi', 'abcdefghij'] };
+            const cursor = { line: 0, column: 0 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.visualLines).toEqual(['hi', 'abcde', 'fghij']);
+        });
+        it('cursor on second logical line that wraps', () => {
+            const buffer = { lines: ['hi', 'abcdefghij'] };
+            const cursor = { line: 1, column: 7 };
+            const result = wrapLines(buffer, cursor, 5);
+            expect(result.visualLines).toEqual(['hi', 'abcde', 'fghij']);
+            expect(result.cursorVisualRow).toBe(2);
+            expect(result.cursorVisualCol).toBe(2);
+        });
+        it('handles multiple wrapped lines', () => {
+            const buffer = { lines: ['abcdefg', 'hijklmn'] };
+            const cursor = { line: 1, column: 5 };
+            const result = wrapLines(buffer, cursor, 4);
+            expect(result.visualLines).toEqual(['abcd', 'efg', 'hijk', 'lmn']);
+            expect(result.cursorVisualRow).toBe(3);
+            expect(result.cursorVisualCol).toBe(1);
+        });
+    });
+});
+describe('TextRenderer', () => {
+    describe('basic rendering', () => {
+        it('renders single line', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor }));
+            expect(container.textContent).toContain('hello');
+        });
+        it('renders multiple lines', () => {
+            const buffer = { lines: ['hello', 'world'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor }));
+            expect(container.textContent).toContain('hello');
+            expect(container.textContent).toContain('world');
+        });
+        it('renders empty buffer', () => {
+            const buffer = { lines: [''] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor }));
+            // Should render cursor as a space in empty buffer
+            expect(container.textContent).toContain(' ');
+        });
+        it('renders empty lines between content', () => {
+            const buffer = { lines: ['first line', '', 'second line'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, showCursor: false }));
+            // Should preserve empty line structure
+            expect(container.textContent).toBe('first line second line');
+        });
+    });
+    describe('cursor display', () => {
+        it('shows cursor at start of line', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, showCursor: true }));
+            // Cursor highlights the first character 'h'
+            expect(container.textContent).toBe('hello');
+        });
+        it('shows cursor at end of line', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 5 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, showCursor: true }));
+            // Cursor at end shows a space after 'hello'
+            expect(container.textContent).toBe('hello ');
+        });
+        it('shows cursor in middle of line', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 2 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, showCursor: true }));
+            // Cursor highlights the character at position 2 ('l')
+            expect(container.textContent).toBe('hello');
+        });
+        it('hides cursor when showCursor is false', () => {
+            const buffer = { lines: ['hello'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, showCursor: false }));
+            expect(container.textContent).toBe('hello');
+        });
+    });
+    describe('word wrapping in render', () => {
+        it('renders wrapped lines', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 0 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, width: 5 }));
+            // Both visual lines should be present
+            expect(container.textContent).toContain('abcde');
+            expect(container.textContent).toContain('fghij');
+        });
+        it('shows cursor correctly on wrapped line', () => {
+            const buffer = { lines: ['abcdefghij'] };
+            const cursor = { line: 0, column: 7 };
+            const { container } = render(_jsx(TextRenderer, { buffer: buffer, cursor: cursor, width: 5, showCursor: true }));
+            // Cursor at position 7 wraps to second visual row, column 2
+            // The cursor highlights character 'h' at that position
+            expect(container.textContent).toContain('abcde');
+            expect(container.textContent).toContain('fghij');
+        });
+    });
+});

package/dist/components/MultilineInput/__tests__/integration.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MultilineInput/__tests__/integration.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { MultilineInputCore } from '../index.js';
+/**
+ * Integration tests for MultilineInputCore.
+ *
+ * These tests validate the component's rendering and props behavior.
+ * We test MultilineInputCore instead of MultilineInput to avoid requiring
+ * the Ink runtime (useInput, useStdout hooks).
+ *
+ * Keyboard handling is thoroughly tested via KeyHandler.test.ts.
+ * State management is tested via useTextInput.test.ts.
+ */
+describe('MultilineInputCore', () => {
+    describe('Submission', () => {
+        it('clears input after submit', () => {
+            const onSubmit = vi.fn();
+            const onChange = vi.fn();
+            // Simulate controlled usage: value is managed by parent
+            let value = 'hello world';
+            const { rerender, container } = render(_jsx(MultilineInputCore, { value: value, onSubmit: onSubmit, onChange: onChange }));
+            // Simulate submit: parent receives value, then clears
+            onSubmit(value);
+            value = '';
+            rerender(_jsx(MultilineInputCore, { value: value, onSubmit: onSubmit, onChange: onChange }));
+            // After rerender, input should be empty
+            expect(container.textContent).toContain(' '); // Cursor in empty buffer
+            expect(onChange).toHaveBeenCalledWith('');
+        });
+    });
+    describe('Rendering', () => {
+        it('renders empty input with cursor', () => {
+            const { container } = render(_jsx(MultilineInputCore, {}));
+            // Cursor shows as a space in empty buffer
+            expect(container.textContent).toContain(' ');
+        });
+        it('renders with initial value', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "hello" }));
+            expect(container.textContent).toContain('hello');
+        });
+        it('renders multiline value', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "line1\\nline2" }));
+            expect(container.textContent).toContain('line1');
+            expect(container.textContent).toContain('line2');
+        });
+        it('shows cursor at end of value', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "hi" }));
+            // Cursor at end shows as a space after the text
+            expect(container.textContent).toBe('hi ');
+        });
+        it('hides cursor when showCursor is false', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "hello", showCursor: false }));
+            expect(container.textContent).toBe('hello');
+        });
+    });
+    describe('Props', () => {
+        it('accepts width prop for word wrapping', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "abcdefghij", width: 5 }));
+            // Should wrap at width 5
+            expect(container.textContent).toContain('abcde');
+            expect(container.textContent).toContain('fghij');
+        });
+        it('calls onChange on initial render with value', () => {
+            const onChange = vi.fn();
+            render(_jsx(MultilineInputCore, { value: "test", onChange: onChange }));
+            // onChange is called with the initial value
+            expect(onChange).toHaveBeenCalledWith('test');
+        });
+    });
+    describe('Placeholder', () => {
+        it('shows placeholder when empty and cursor hidden', () => {
+            const { container } = render(_jsx(MultilineInputCore, { placeholder: "Type here...", showCursor: false }));
+            expect(container.textContent).toContain('Type here...');
+        });
+        it('does not show placeholder when showCursor is true', () => {
+            const { container } = render(_jsx(MultilineInputCore, { placeholder: "Type here...", showCursor: true }));
+            // Shows cursor (as space) instead, not placeholder
+            expect(container.textContent).toContain(' ');
+            expect(container.textContent).not.toContain('Type here...');
+        });
+        it('does not show placeholder when has value', () => {
+            const { container } = render(_jsx(MultilineInputCore, { value: "hello", placeholder: "Type here...", showCursor: false }));
+            expect(container.textContent).toContain('hello');
+            expect(container.textContent).not.toContain('Type here...');
+        });
+    });
+});

package/dist/components/MultilineInput/__tests__/useTextInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MultilineInput/__tests__/useTextInput.test.js

@@ -0,0 +1,172 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { useTextInput } from '../useTextInput.js';
+describe('useTextInput', () => {
+    it('should initialize with empty buffer', () => {
+        const { result } = renderHook(() => useTextInput());
+        expect(result.current.value).toBe('');
+        expect(result.current.cursor).toEqual({ line: 0, column: 0 });
+    });
+    it('should initialize with initial value', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'Hello\nWorld' }));
+        expect(result.current.value).toBe('Hello\nWorld');
+        expect(result.current.cursor).toEqual({ line: 1, column: 5 }); // Cursor at end
+    });
+    it('should insert character', () => {
+        const { result } = renderHook(() => useTextInput());
+        act(() => {
+            result.current.insert('a');
+        });
+        expect(result.current.value).toBe('a');
+        expect(result.current.cursor).toEqual({ line: 0, column: 1 });
+    });
+    it('should delete character', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'abc' }));
+        act(() => {
+            result.current.delete();
+        });
+        expect(result.current.value).toBe('ab');
+        expect(result.current.cursor).toEqual({ line: 0, column: 2 });
+    });
+    it('should insert new line', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'abc' }));
+        // Move cursor to middle
+        act(() => {
+            result.current.moveCursor('left');
+        });
+        act(() => {
+            result.current.newLine();
+        });
+        expect(result.current.value).toBe('ab\nc');
+        expect(result.current.cursor).toEqual({ line: 1, column: 0 });
+    });
+    it('should move cursor', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'abc' }));
+        act(() => {
+            result.current.moveCursor('left');
+        });
+        expect(result.current.cursor).toEqual({ line: 0, column: 2 });
+    });
+    it('should support undo/redo', () => {
+        const { result } = renderHook(() => useTextInput());
+        act(() => {
+            result.current.insert('a');
+        });
+        expect(result.current.value).toBe('a');
+        act(() => {
+            result.current.undo();
+        });
+        expect(result.current.value).toBe('');
+        act(() => {
+            result.current.redo();
+        });
+        expect(result.current.value).toBe('a');
+    });
+    it('should remove backslash when deleted at end of line', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'hello\\' }));
+        // Cursor should be at end: { line: 0, column: 6 } (after the backslash)
+        expect(result.current.cursor).toEqual({ line: 0, column: 6 });
+        expect(result.current.value).toBe('hello\\');
+        // Delete the backslash
+        act(() => {
+            result.current.delete();
+        });
+        // The backslash should be removed
+        expect(result.current.value).toBe('hello');
+        expect(result.current.cursor).toEqual({ line: 0, column: 5 });
+        // Then add newline
+        act(() => {
+            result.current.newLine();
+        });
+        // Result should be 'hello' on first line, empty second line
+        expect(result.current.value).toBe('hello\n');
+        expect(result.current.cursor).toEqual({ line: 1, column: 0 });
+    });
+    it('should fail when delete and newLine are called separately (demonstrates the bug)', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'hello\\' }));
+        // Cursor should be at end: { line: 0, column: 6 } (after the backslash)
+        expect(result.current.cursor).toEqual({ line: 0, column: 6 });
+        expect(result.current.value).toBe('hello\\');
+        // Call delete and newLine in the same synchronous execution (as old KeyHandler did)
+        act(() => {
+            result.current.delete();
+            result.current.newLine(); // This will use the OLD state!
+        });
+        // BUG: The backslash is NOT removed because newLine uses old state
+        // This demonstrates why we need deleteAndNewLine
+        expect(result.current.value).toBe('hello\\\n');
+        expect(result.current.cursor).toEqual({ line: 1, column: 0 });
+    });
+    it('should correctly remove backslash using deleteAndNewLine action', () => {
+        const { result } = renderHook(() => useTextInput({ initialValue: 'hello\\' }));
+        // Cursor should be at end: { line: 0, column: 6 } (after the backslash)
+        expect(result.current.cursor).toEqual({ line: 0, column: 6 });
+        expect(result.current.value).toBe('hello\\');
+        // Use the combined action
+        act(() => {
+            result.current.deleteAndNewLine();
+        });
+        // The backslash should be removed and newline added
+        expect(result.current.value).toBe('hello\n');
+        expect(result.current.cursor).toEqual({ line: 1, column: 0 });
+    });
+    describe('visual navigation with width', () => {
+        // 25-char line with width=10 wraps into 3 visual lines
+        const longLine = '0123456789012345678901234';
+        it('should move cursor down within wrapped line', () => {
+            const { result } = renderHook(() => useTextInput({ initialValue: longLine, width: 10 }));
+            // Start at end of line (column 25)
+            expect(result.current.cursor).toEqual({ line: 0, column: 25 });
+            // Move to column 5 (visual row 0) - each move needs its own act()
+            for (let i = 0; i < 20; i++) {
+                act(() => {
+                    result.current.moveCursor('left');
+                });
+            }
+            expect(result.current.cursor).toEqual({ line: 0, column: 5 });
+            // Move down - should go to visual row 1, column 5 → buffer column 15
+            act(() => {
+                result.current.moveCursor('down');
+            });
+            expect(result.current.cursor).toEqual({ line: 0, column: 15 });
+        });
+        it('should move cursor up within wrapped line', () => {
+            const { result } = renderHook(() => useTextInput({ initialValue: longLine, width: 10 }));
+            // Start at end of line (column 25)
+            expect(result.current.cursor).toEqual({ line: 0, column: 25 });
+            // Move to column 15 (visual row 1, visual col 5)
+            for (let i = 0; i < 10; i++) {
+                act(() => {
+                    result.current.moveCursor('left');
+                });
+            }
+            expect(result.current.cursor).toEqual({ line: 0, column: 15 });
+            // Move up - should go to visual row 0, column 5 → buffer column 5
+            act(() => {
+                result.current.moveCursor('up');
+            });
+            expect(result.current.cursor).toEqual({ line: 0, column: 5 });
+        });
+        it('should move cursor between buffer lines crossing wrapped visual lines', () => {
+            const { result } = renderHook(() => useTextInput({ initialValue: longLine + '\nhello', width: 10 }));
+            // Cursor starts at end of 'hello' (line 1, column 5)
+            expect(result.current.cursor).toEqual({ line: 1, column: 5 });
+            // Move up - should go to last visual row of first line (visual row 2, col 5 → buffer col 25)
+            act(() => {
+                result.current.moveCursor('up');
+            });
+            // Visual row 2 only has 5 chars, so col 5 clamps to end of line
+            expect(result.current.cursor).toEqual({ line: 0, column: 25 });
+        });
+        it('should use buffer-line movement when width is not provided', () => {
+            const { result } = renderHook(() => useTextInput({ initialValue: longLine + '\nhello' }));
+            // Cursor starts at end of 'hello' (line 1, column 5)
+            expect(result.current.cursor).toEqual({ line: 1, column: 5 });
+            // Move up without width - should go to line 0, column 5 (buffer line movement)
+            act(() => {
+                result.current.moveCursor('up');
+            });
+            expect(result.current.cursor).toEqual({ line: 0, column: 5 });
+        });
+    });
+});

package/dist/components/MultilineInput/index.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export interface MultilineInputProps {
+    /** Controlled text value */
+    value?: string;
+    /** Called when text changes */
+    onChange?: (value: string) => void;
+    /** Called when user submits (Enter without backslash) */
+    onSubmit?: (value: string) => void;
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Whether to show the cursor (defaults to true) */
+    showCursor?: boolean;
+    /** Terminal width for word wrapping */
+    width?: number;
+    /** Whether input is active/focused (defaults to true) */
+    isActive?: boolean;
+    /** Called whenever the cursor offset changes (flat index) */
+    onCursorChange?: (offset: number) => void;
+    /** Optional external cursor override (flat index) */
+    cursorOverride?: number;
+}
+/**
+ * Props for the core component (without Ink-specific hooks)
+ * This allows testing the rendering logic separately.
+ */
+export interface MultilineInputCoreProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    showCursor?: boolean;
+    width?: number;
+    onCursorChange?: (offset: number) => void;
+    cursorOverride?: number;
+}
+/**
+ * Core rendering component that can be tested without Ink runtime.
+ * Does not include useInput/useStdout hooks.
+ */
+export declare const MultilineInputCore: React.FC<MultilineInputCoreProps>;
+/**
+ * Full MultilineInput with Ink keyboard handling.
+ * This component uses Ink-specific hooks and must be rendered in an Ink context.
+ */
+export declare const MultilineInput: React.FC<MultilineInputProps>;

package/dist/components/MultilineInput/index.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useCallback, useRef } from 'react';
+import { useInput, useStdout, useStdin, Box, Text } from 'ink';
+import { useTextInput } from './useTextInput.js';
+import { handleKey } from './KeyHandler.js';
+import { TextRenderer } from './TextRenderer.js';
+import { createBuffer } from './TextBuffer.js';
+import { log } from '../../utils/logger.js';
+/**
+ * Core rendering component that can be tested without Ink runtime.
+ * Does not include useInput/useStdout hooks.
+ */
+export const MultilineInputCore = ({ value, onChange, placeholder, showCursor = true, width = 80, onCursorChange, cursorOverride, }) => {
+    const textInput = useTextInput({ initialValue: value ?? '' });
+    // Handle cursor override
+    useEffect(() => {
+        if (cursorOverride !== undefined) {
+            textInput.setCursorOffset(cursorOverride);
+        }
+    }, [cursorOverride]);
+    // Notify parent of cursor change
+    // Use a ref to avoid dependency on onCursorChange callback identity
+    const onCursorChangeRef = useRef(onCursorChange);
+    useEffect(() => {
+        onCursorChangeRef.current = onCursorChange;
+    }, [onCursorChange]);
+    useEffect(() => {
+        if (onCursorChangeRef.current) {
+            onCursorChangeRef.current(textInput.cursorOffset);
+        }
+    }, [textInput.cursorOffset]);
+    // Sync external value changes
+    useEffect(() => {
+        if (value !== undefined && value !== textInput.value) {
+            textInput.setText(value);
+        }
+    }, [value]);
+    // Notify parent of changes
+    useEffect(() => {
+        onChange?.(textInput.value);
+    }, [textInput.value, onChange]);
+    // Create buffer for TextRenderer
+    const buffer = createBuffer(textInput.value);
+    // Show placeholder if empty and no cursor shown
+    const isEmpty = textInput.value === '';
+    const showPlaceholder = isEmpty && placeholder && !showCursor;
+    if (showPlaceholder) {
+        return _jsx("div", { style: { opacity: 0.5 }, children: placeholder });
+    }
+    return (_jsx(TextRenderer, { buffer: buffer, cursor: textInput.cursor, width: width, showCursor: showCursor }));
+};
+/**
+ * Full MultilineInput with Ink keyboard handling.
+ * This component uses Ink-specific hooks and must be rendered in an Ink context.
+ */
+export const MultilineInput = ({ value, onChange, onSubmit, placeholder, showCursor = true, width, isActive = true, onCursorChange, cursorOverride, }) => {
+    // Get terminal width from Ink if not provided
+    const { stdout } = useStdout();
+    const terminalWidth = width ?? stdout?.columns ?? 80;
+    // Track raw input for detecting Home/End keys
+    const { stdin } = useStdin();
+    const lastRawInput = useRef('');
+    // Listen for raw stdin data to capture escape sequences
+    useEffect(() => {
+        if (!stdin || !isActive)
+            return;
+        const handleData = (data) => {
+            lastRawInput.current = data.toString();
+        };
+        stdin.on('data', handleData);
+        return () => {
+            stdin.off('data', handleData);
+        };
+    }, [stdin, isActive]);
+    const textInput = useTextInput({ initialValue: value ?? '', width: terminalWidth });
+    // Handle cursor override
+    useEffect(() => {
+        if (cursorOverride !== undefined) {
+            textInput.setCursorOffset(cursorOverride);
+        }
+    }, [cursorOverride]);
+    // Notify parent of cursor change
+    const onCursorChangeRef = useRef(onCursorChange);
+    useEffect(() => {
+        onCursorChangeRef.current = onCursorChange;
+    }, [onCursorChange]);
+    useEffect(() => {
+        onCursorChangeRef.current?.(textInput.cursorOffset);
+    }, [textInput.cursorOffset]);
+    // Sync external value changes
+    useEffect(() => {
+        if (value !== undefined && value !== textInput.value) {
+            textInput.setText(value);
+        }
+    }, [value]);
+    // Notify parent of changes
+    useEffect(() => {
+        onChange?.(textInput.value);
+    }, [textInput.value, onChange]);
+    // Create buffer for TextRenderer and KeyHandler
+    const buffer = createBuffer(textInput.value);
+    // Create submit handler
+    const handleSubmit = useCallback(() => {
+        onSubmit?.(textInput.value);
+        textInput.setText(''); // Clear input after submit
+    }, [onSubmit, textInput.value, textInput.setText]);
+    // Create actions for KeyHandler
+    const actions = {
+        insert: textInput.insert,
+        delete: textInput.delete,
+        deleteForward: textInput.deleteForward,
+        newLine: textInput.newLine,
+        deleteAndNewLine: textInput.deleteAndNewLine,
+        moveCursor: textInput.moveCursor,
+        undo: textInput.undo,
+        redo: textInput.redo,
+        setText: textInput.setText,
+        submit: handleSubmit,
+    };
+    // Handle keyboard input
+    useInput((input, key) => {
+        log(`[USEINPUT] input="${input.replace(/[\x00-\x1F\x7F-\uFFFF]/g, c => `\\x${c.charCodeAt(0).toString(16)}`)}" key=${JSON.stringify(key)} rawLen=${lastRawInput.current?.length || 0}`);
+        handleKey(key, input, buffer, actions, textInput.cursor, lastRawInput.current);
+    }, { isActive });
+    // Show placeholder if empty and no cursor shown
+    const isEmpty = textInput.value === '';
+    const showPlaceholder = isEmpty && placeholder && !showCursor;
+    if (showPlaceholder) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: placeholder }) }));
+    }
+    return (_jsx(TextRenderer, { buffer: buffer, cursor: textInput.cursor, width: terminalWidth, showCursor: showCursor }));
+};