tuiuiu.js 1.0.43 → 1.0.44

package/dist/atoms/text-input.d.ts

@@ -64,6 +64,10 @@ export interface TextInputOptions {
     width?: number;
     /** Maximum number of lines to display (for textarea mode) */
     maxLines?: number;
+    /** Auto-grow height based on visual line count (up to maxLines) */
+    autoGrow?: boolean;
+    /** Show scrollbar when content exceeds maxLines (default: true) */
+    showScrollbar?: boolean;
     /** Show character count */
     showCharCount?: boolean;
     /** Enable word wrapping */
@@ -90,6 +94,15 @@ export declare function createTextInput(options?: TextInputOptions): {
     viewportOffset: () => number;
     isMultiline: () => boolean;
     handleInput: (input: string, key: Key) => void;
+    setLayout: (layout: {
+        width?: number;
+        wordWrap?: boolean;
+        maxLines?: number;
+        autoGrow?: boolean;
+    }) => void;
+    setCursorPosition: (pos: number, options?: {
+        scroll?: boolean;
+    }) => void;
     setValue: (v: string) => void;
     clear: () => void;
     focus: () => void;

package/dist/atoms/text-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/atoms/text-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAY,KAAK,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAIvD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACrC,mBAAmB;IACnB,WAAW,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,KAAK,CAAC;IAC5C,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9D,gCAAgC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,UAAU,EAAE,CA8EvF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,GAAE,gBAAqB;;;;;yBAuGhC,MAAM,OAAO,GAAG;kBAyO5B,MAAM;;;EAgBvB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,EACzC,OAAO,GAAE,gBAAqB,GAC7B,KAAK,CAgLP;AAED,YAAY,EAAE,gBAAgB,IAAI,cAAc,EAAE,CAAC;AAEnD;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,gBAAgB,GAAG,KAAK,CAG1D"}
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../src/atoms/text-input.ts"],"names":[],"mappings":"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"}

package/dist/atoms/text-input.js

@@ -18,7 +18,8 @@ import { Box, Text } from '../primitives/nodes.js';
 import { createSignal } from '../primitives/signal.js';
 import { useInput } from '../hooks/index.js';
 import { getTheme, getContrastColor } from '../core/theme.js';
-import { getChars } from '../core/capabilities.js';
+import { getChars, getRenderMode } from '../core/capabilities.js';
+import { stringWidth } from '../utils/text-utils.js';
 /**
  * Calculate visual lines based on width and wrapping
  * Preserves strict whitespace for editor behavior
@@ -89,12 +90,31 @@ export function getVisualLines(text, width, wrap) {
     }
     return lines;
 }
+function getCursorIndexFromColumn(text, column) {
+    if (column <= 0)
+        return 0;
+    let width = 0;
+    let index = 0;
+    for (const char of text) {
+        const charWidth = stringWidth(char);
+        if (width + charWidth > column)
+            break;
+        width += charWidth;
+        index += char.length;
+    }
+    return index;
+}
 /**
  * Create a TextInput state manager
  */
 export function createTextInput(options = {}) {
     const { initialValue = '', placeholder = '', password = false, maskChar = '*', multiline = false, maxLength, history = [], onChange, onSubmit, onCancel, isActive: isActiveProp = true, width = 80, // Default width for wrapping
-    maxLines, wordWrap = false, enterCreatesNewline = false, } = options;
+    maxLines, autoGrow = false, wordWrap = false, enterCreatesNewline = false, } = options;
+    let wrapWidth = width;
+    let wrapWordWrap = wordWrap;
+    let wrapMaxLines = maxLines;
+    let wrapAutoGrow = autoGrow;
+    let resolvedMaxLines = wrapAutoGrow ? (wrapMaxLines ?? 5) : wrapMaxLines;
     // Helper to check if input is currently active
     // Supports both static boolean and reactive getter function
     const checkIsActive = () => {
@@ -106,11 +126,61 @@ export function createTextInput(options = {}) {
     const [historyIndex, setHistoryIndex] = createSignal(-1);
     const [originalValue, setOriginalValue] = createSignal('');
     const [viewportOffset, setViewportOffset] = createSignal(0);
+    const [preferredColumn, setPreferredColumn] = createSignal(null);
+    const setLayout = (layout) => {
+        if (typeof layout.width === 'number') {
+            wrapWidth = Math.max(1, layout.width);
+        }
+        if (typeof layout.wordWrap === 'boolean') {
+            wrapWordWrap = layout.wordWrap;
+        }
+        if (layout.maxLines !== undefined) {
+            wrapMaxLines = layout.maxLines;
+        }
+        if (typeof layout.autoGrow === 'boolean') {
+            wrapAutoGrow = layout.autoGrow;
+        }
+        resolvedMaxLines = wrapAutoGrow ? (wrapMaxLines ?? 5) : wrapMaxLines;
+    };
+    const getCursorLineInfo = (val, cursor) => {
+        const visualLines = getVisualLines(val, wrapWidth, wrapWordWrap);
+        let lineIndex = 0;
+        let lineStart = visualLines[0]?.start ?? 0;
+        let lineText = visualLines[0]?.text ?? '';
+        for (let i = 0; i < visualLines.length; i++) {
+            const line = visualLines[i];
+            if (cursor >= line.start && cursor <= line.end) {
+                lineIndex = i;
+                lineStart = line.start;
+                lineText = line.text;
+                if (cursor < line.end || i === visualLines.length - 1) {
+                    break;
+                }
+            }
+        }
+        const column = stringWidth(lineText.slice(0, Math.max(0, cursor - lineStart)));
+        return { visualLines, lineIndex, lineStart, lineText, column };
+    };
+    const updatePreferredColumn = (val, cursor) => {
+        const { column } = getCursorLineInfo(val, cursor);
+        setPreferredColumn(column);
+    };
+    const setCursorPositionInternal = (pos, options) => {
+        const current = value();
+        const clamped = Math.max(0, Math.min(pos, current.length));
+        setCursorPosition(clamped);
+        if (options?.updatePreferredColumn !== false) {
+            updatePreferredColumn(current, clamped);
+        }
+        if (options?.scroll !== false) {
+            scrollToCursor(current, clamped);
+        }
+    };
     // Scroll to cursor helper
     const scrollToCursor = (val, cursor) => {
-        if (!maxLines)
+        if (!resolvedMaxLines)
             return; // No scrolling needed if no max height
-        const visualLines = getVisualLines(val, width, wordWrap);
+        const visualLines = getVisualLines(val, wrapWidth, wrapWordWrap);
         // Find visual line containing cursor
         let cursorLineFn = 0;
         // Fallback if cursor is at very end
@@ -148,8 +218,8 @@ export function createTextInput(options = {}) {
         if (cursorLineFn < currentOffset) {
             setViewportOffset(cursorLineFn);
         }
-        else if (cursorLineFn >= currentOffset + maxLines) {
-            setViewportOffset(cursorLineFn - maxLines + 1);
+        else if (cursorLineFn >= currentOffset + resolvedMaxLines) {
+            setViewportOffset(cursorLineFn - resolvedMaxLines + 1);
         }
     };
     // Word boundary detection
@@ -195,9 +265,8 @@ export function createTextInput(options = {}) {
             const newValue = currentValue.slice(0, pos) + '\n' + currentValue.slice(pos);
             setValue(newValue);
             const newPos = pos + 1;
-            setCursorPosition(newPos);
+            setCursorPositionInternal(newPos);
             setIsMultilineMode(true);
-            scrollToCursor(newValue, newPos);
             onChange?.(newValue);
             return;
         }
@@ -209,9 +278,8 @@ export function createTextInput(options = {}) {
                 const newValue = currentValue.slice(0, pos) + '\n' + currentValue.slice(pos);
                 setValue(newValue);
                 const newPos = pos + 1;
-                setCursorPosition(newPos);
+                setCursorPositionInternal(newPos);
                 setIsMultilineMode(true);
-                scrollToCursor(newValue, newPos);
                 onChange?.(newValue);
             }
             else {
@@ -231,13 +299,11 @@ export function createTextInput(options = {}) {
             if (key.ctrl) {
                 // Move to previous word boundary
                 const newPos = findPrevWordBoundary(currentValue, pos);
-                setCursorPosition(newPos);
-                scrollToCursor(currentValue, newPos);
+                setCursorPositionInternal(newPos);
             }
             else {
                 const newPos = Math.max(0, pos - 1);
-                setCursorPosition(newPos);
-                scrollToCursor(currentValue, newPos);
+                setCursorPositionInternal(newPos);
             }
             return;
         }
@@ -245,59 +311,83 @@ export function createTextInput(options = {}) {
             if (key.ctrl) {
                 // Move to next word boundary
                 const newPos = findNextWordBoundary(currentValue, pos);
-                setCursorPosition(newPos);
-                scrollToCursor(currentValue, newPos);
+                setCursorPositionInternal(newPos);
             }
             else {
                 const newPos = Math.min(currentValue.length, pos + 1);
-                setCursorPosition(newPos);
-                scrollToCursor(currentValue, newPos);
+                setCursorPositionInternal(newPos);
             }
             return;
         }
         // Home/End or Ctrl+A/E
         if (key.home || (key.ctrl && input === 'a')) {
-            setCursorPosition(0);
-            scrollToCursor(currentValue, 0);
+            setCursorPositionInternal(0);
             return;
         }
         if (key.end || (key.ctrl && input === 'e')) {
             const newPos = currentValue.length;
-            setCursorPosition(newPos);
-            scrollToCursor(currentValue, newPos);
-            return;
-        }
-        // History navigation
-        if (key.upArrow && history.length > 0) {
-            const currentIndex = historyIndex();
-            if (currentIndex === -1) {
-                setOriginalValue(currentValue);
-            }
-            const newIndex = Math.min(currentIndex + 1, history.length - 1);
-            setHistoryIndex(newIndex);
-            const historyValue = history[history.length - 1 - newIndex];
-            setValue(historyValue);
-            setCursorPosition(historyValue.length);
-            onChange?.(historyValue);
+            setCursorPositionInternal(newPos);
             return;
         }
-        if (key.downArrow && historyIndex() >= 0) {
-            const newIndex = historyIndex() - 1;
-            setHistoryIndex(newIndex);
-            if (newIndex < 0) {
-                const orig = originalValue();
-                setValue(orig);
-                setCursorPosition(orig.length);
-                onChange?.(orig);
+        if (key.upArrow) {
+            const { visualLines, lineIndex, column } = getCursorLineInfo(currentValue, pos);
+            const targetColumn = preferredColumn() ?? column;
+            if (lineIndex > 0) {
+                const targetLine = visualLines[lineIndex - 1];
+                const offset = getCursorIndexFromColumn(targetLine.text, targetColumn);
+                const newPos = Math.min(currentValue.length, targetLine.start + offset);
+                if (preferredColumn() === null) {
+                    setPreferredColumn(targetColumn);
+                }
+                setCursorPositionInternal(newPos, { updatePreferredColumn: false });
+                return;
             }
-            else {
+            if (history.length > 0) {
+                const currentIndex = historyIndex();
+                if (currentIndex === -1) {
+                    setOriginalValue(currentValue);
+                }
+                const newIndex = Math.min(currentIndex + 1, history.length - 1);
+                setHistoryIndex(newIndex);
                 const historyValue = history[history.length - 1 - newIndex];
                 setValue(historyValue);
-                setCursorPosition(historyValue.length);
+                setCursorPositionInternal(historyValue.length);
                 onChange?.(historyValue);
             }
             return;
         }
+        if (key.downArrow) {
+            const { visualLines, lineIndex, column } = getCursorLineInfo(currentValue, pos);
+            const targetColumn = preferredColumn() ?? column;
+            if (lineIndex < visualLines.length - 1) {
+                const targetLine = visualLines[lineIndex + 1];
+                const offset = getCursorIndexFromColumn(targetLine.text, targetColumn);
+                const newPos = Math.min(currentValue.length, targetLine.start + offset);
+                if (preferredColumn() === null) {
+                    setPreferredColumn(targetColumn);
+                }
+                setCursorPositionInternal(newPos, { updatePreferredColumn: false });
+                return;
+            }
+            if (historyIndex() >= 0) {
+                const newIndex = historyIndex() - 1;
+                setHistoryIndex(newIndex);
+                if (newIndex < 0) {
+                    const orig = originalValue();
+                    setValue(orig);
+                    setCursorPositionInternal(orig.length);
+                    onChange?.(orig);
+                }
+                else {
+                    const historyValue = history[history.length - 1 - newIndex];
+                    setValue(historyValue);
+                    setCursorPositionInternal(historyValue.length);
+                    onChange?.(historyValue);
+                }
+            }
+            return;
+        }
+        // History navigation
         // Deletion
         if (key.backspace) {
             if (pos > 0) {
@@ -306,14 +396,14 @@ export function createTextInput(options = {}) {
                     const boundary = findPrevWordBoundary(currentValue, pos);
                     const newValue = currentValue.slice(0, boundary) + currentValue.slice(pos);
                     setValue(newValue);
-                    setCursorPosition(boundary);
+                    setCursorPositionInternal(boundary);
                     onChange?.(newValue);
                 }
                 else {
                     // Delete single char
                     const newValue = currentValue.slice(0, pos - 1) + currentValue.slice(pos);
                     setValue(newValue);
-                    setCursorPosition(pos - 1);
+                    setCursorPositionInternal(pos - 1);
                     onChange?.(newValue);
                 }
             }
@@ -352,7 +442,7 @@ export function createTextInput(options = {}) {
             const startPos = lineStart >= 0 ? lineStart + 1 : 0;
             const newValue = currentValue.slice(0, startPos) + currentValue.slice(pos);
             setValue(newValue);
-            setCursorPosition(startPos);
+            setCursorPositionInternal(startPos);
             onChange?.(newValue);
             return;
         }
@@ -361,14 +451,14 @@ export function createTextInput(options = {}) {
             const boundary = findPrevWordBoundary(currentValue, pos);
             const newValue = currentValue.slice(0, boundary) + currentValue.slice(pos);
             setValue(newValue);
-            setCursorPosition(boundary);
+            setCursorPositionInternal(boundary);
             onChange?.(newValue);
             return;
         }
         // Ctrl+X - clear all (like Ctrl+C in some terminals)
         if (key.ctrl && input === 'x') {
             setValue('');
-            setCursorPosition(0);
+            setCursorPositionInternal(0);
             onChange?.('');
             return;
         }
@@ -383,12 +473,9 @@ export function createTextInput(options = {}) {
             }
             const newValue = currentValue.slice(0, pos) + input + currentValue.slice(pos);
             setValue(newValue);
-            setCursorPosition(pos + input.length);
+            setCursorPositionInternal(pos + input.length);
             setHistoryIndex(-1);
             onChange?.(newValue);
-            // Update scroll on input
-            const newPos = pos + input.length;
-            scrollToCursor(newValue, newPos);
         }
     };
     // handleInput is exposed to be registered during render phase
@@ -399,15 +486,18 @@ export function createTextInput(options = {}) {
         viewportOffset,
         isMultiline: isMultilineMode,
         handleInput, // Expose handler to be registered during render
+        setLayout,
+        setCursorPosition: (pos, options) => {
+            setCursorPositionInternal(pos, options);
+        },
         setValue: (v) => {
             setValue(v);
-            setCursorPosition(v.length);
-            scrollToCursor(v, v.length);
+            setCursorPositionInternal(v.length);
             onChange?.(v);
         },
         clear: () => {
             setValue('');
-            setCursorPosition(0);
+            setCursorPositionInternal(0);
             setHistoryIndex(-1);
             onChange?.('');
         },
@@ -422,6 +512,9 @@ export function createTextInput(options = {}) {
 export function renderTextInput(state, options = {}) {
     const theme = getTheme();
     const { placeholder = 'Type here...', password = false, maskChar = '*', cursorStyle = 'block', borderStyle = 'round', focusedBorderColor = theme.accents.info, unfocusedBorderColor = theme.borders.default, prompt = getChars().arrows.right, foreground = theme.accents.info, isActive = true, fullWidth = false, } = options;
+    const autoGrow = options.autoGrow ?? false;
+    const showScrollbar = options.showScrollbar ?? true;
+    const resolvedMaxLines = autoGrow ? (options.maxLines ?? 5) : options.maxLines;
     // Register input handler during render phase
     useInput(state.handleInput);
     const value = state.value();
@@ -431,7 +524,7 @@ export function renderTextInput(state, options = {}) {
     // Use passed specific wrapping options or defaults
     const width = options.width ?? 80;
     const wordWrap = options.wordWrap ?? false;
-    const maxLines = options.maxLines;
+    const maxLines = resolvedMaxLines;
     const showCharCount = options.showCharCount ?? false;
     // Build the input display with cursor
     const beforeCursor = displayValue.slice(0, cursor);
@@ -452,6 +545,13 @@ export function renderTextInput(state, options = {}) {
         boxStyle.borderColor = isActive ? focusedBorderColor : unfocusedBorderColor;
         boxStyle.paddingX = 1;
     }
+    const baseContentWidth = Math.max(1, (noBorder ? width - 2 : width - 6));
+    state.setLayout?.({
+        width: baseContentWidth,
+        wordWrap,
+        maxLines: options.maxLines,
+        autoGrow,
+    });
     const isMultiline = state.isMultiline() || displayValue.includes('\n') || options.multiline;
     // Use multiline path when any of these conditions are true
     const shouldUseMultiline = isMultiline || wordWrap || showCharCount;
@@ -461,16 +561,41 @@ export function renderTextInput(state, options = {}) {
         // Calculate actual content width for wrapping:
         // - Border: 2 chars (left + right)
         // - paddingX: 2 chars (left + right)
-        // - Prompt "❯ " or "│ ": 2 chars
-        const contentWidth = noBorder ? width - 2 : width - 6;
-        const lines = getVisualLines(displayValue, contentWidth, wordWrap);
+        // - Prompt plus space, or border plus space: 2 chars
+        const baseWidth = baseContentWidth;
+        let contentWidth = baseWidth;
+        let lines = getVisualLines(displayValue, contentWidth, wordWrap);
+        const hasOverflow = maxLines !== undefined && lines.length > maxLines;
+        const shouldShowScrollbar = showScrollbar && hasOverflow;
+        if (shouldShowScrollbar) {
+            contentWidth = Math.max(1, baseWidth - 1);
+            lines = getVisualLines(displayValue, contentWidth, wordWrap);
+            state.setLayout?.({
+                width: contentWidth,
+                wordWrap,
+                maxLines: options.maxLines,
+                autoGrow,
+            });
+        }
         // Viewport handling
+        const visibleCount = maxLines ? Math.min(maxLines, lines.length) : lines.length;
+        const maxOffset = Math.max(0, lines.length - visibleCount);
         let offset = state.viewportOffset();
+        if (offset > maxOffset) {
+            offset = maxOffset;
+        }
+        else if (offset < 0) {
+            offset = 0;
+        }
         let visibleLines = lines;
         // If maxLines is set, slice the lines
         if (maxLines) {
-            visibleLines = lines.slice(offset, offset + maxLines);
+            visibleLines = lines.slice(offset, offset + visibleCount);
         }
+        const padForScrollbar = shouldShowScrollbar;
+        const borderSize = noBorder ? 0 : 1;
+        const contentStartX = noBorder ? 0 : 2;
+        const contentStartY = borderSize;
         // Determine visual cursor position relative to viewport
         // We need to match the cursor index to a line and col
         let cursorLine = -1;
@@ -488,26 +613,66 @@ export function renderTextInput(state, options = {}) {
         }
         // Adjust cursorLine to be relative to visible window
         const relativeCursorLine = cursorLine - offset;
+        const chars = getChars();
+        const renderMode = getRenderMode();
+        const trackChar = renderMode === 'ascii' ? '|' : chars.scrollbar.track;
+        const thumbChar = renderMode === 'ascii' ? '#' : chars.scrollbar.thumb;
+        const scrollbarChars = [];
+        if (shouldShowScrollbar && visibleCount > 0) {
+            const thumbHeight = Math.max(1, Math.floor((visibleCount / lines.length) * visibleCount));
+            const thumbPosition = maxOffset > 0
+                ? Math.floor((offset / maxOffset) * (visibleCount - thumbHeight))
+                : 0;
+            for (let i = 0; i < visibleCount; i++) {
+                scrollbarChars.push(i >= thumbPosition && i < thumbPosition + thumbHeight ? thumbChar : trackChar);
+            }
+        }
+        const renderScrollbar = (index, isThumb) => {
+            if (!shouldShowScrollbar)
+                return null;
+            const color = isThumb
+                ? (isActive ? focusedBorderColor : unfocusedBorderColor)
+                : unfocusedBorderColor;
+            return Text({ color }, scrollbarChars[index] ?? ' ');
+        };
+        const handleMultilineClick = (event) => {
+            const lineIndex = event.y - contentStartY;
+            if (lineIndex < 0 || lineIndex >= visibleLines.length)
+                return;
+            const lineObj = visibleLines[lineIndex];
+            const linePrompt = lineIndex === 0 && offset === 0 ? prompt : chars.border.vertical;
+            const promptWidth = stringWidth(`${linePrompt} `);
+            const column = event.x - contentStartX - promptWidth;
+            const cursorOffset = getCursorIndexFromColumn(lineObj.text, column);
+            const nextCursor = Math.min(value.length, lineObj.start + cursorOffset);
+            state.setCursorPosition(nextCursor, { scroll: false });
+        };
         const renderedLines = visibleLines.map((lineObj, i) => {
             const lineIndex = offset + i; // Absolute line index
             const isCursorLine = lineIndex === cursorLine;
             const line = lineObj.text;
-            const linePrompt = i === 0 && offset === 0 ? prompt : getChars().border.vertical;
+            const linePrompt = i === 0 && offset === 0 ? prompt : chars.border.vertical;
+            const scrollbarChar = shouldShowScrollbar ? (scrollbarChars[i] ?? ' ') : '';
+            const isThumb = shouldShowScrollbar ? scrollbarChar === thumbChar : false;
             if (isCursorLine && isActive) {
                 // Ensure cursorCol is within bounds of this line
                 const safeCol = Math.min(Math.max(0, cursorCol), line.length);
                 const before = line.slice(0, safeCol);
                 const char = line[safeCol] || ' ';
                 const after = line.slice(safeCol + 1);
-                return Box({ flexDirection: 'row' }, Text({ color: foreground }, `${linePrompt} `), Text({}, before), Text({ backgroundColor: cursorBg, color: cursorFg }, char), Text({}, after));
+                const lineWidth = stringWidth(before + char + after);
+                const padCount = padForScrollbar ? Math.max(0, contentWidth - lineWidth) : 0;
+                return Box({ flexDirection: 'row' }, Text({ color: foreground }, `${linePrompt} `), Text({}, before), Text({ backgroundColor: cursorBg, color: cursorFg }, char), Text({}, after), padCount > 0 ? Text({}, ' '.repeat(padCount)) : null, renderScrollbar(i, isThumb));
             }
-            return Box({ flexDirection: 'row' }, Text({ color: foreground }, `${linePrompt} `), Text({}, line));
+            const lineWidth = stringWidth(line);
+            const padCount = padForScrollbar ? Math.max(0, contentWidth - lineWidth) : 0;
+            return Box({ flexDirection: 'row' }, Text({ color: foreground }, `${linePrompt} `), Text({}, line), padCount > 0 ? Text({}, ' '.repeat(padCount)) : null, renderScrollbar(i, isThumb));
         });
         if (showCharCount) {
             const countText = `${value.length}${options.maxLength ? '/' + options.maxLength : ''}`;
-            renderedLines.push(Box({ flexDirection: 'row', justifyContent: 'flex-end', paddingTop: 0 }, Text({ color: 'mutedForeground', dim: true }, countText)));
+            renderedLines.push(Box({ flexDirection: 'row', justifyContent: 'flex-end', paddingTop: 0 }, Text({ color: 'mutedForeground', dim: true }, countText), shouldShowScrollbar ? Text({}, ' ') : null));
         }
-        return Box(boxStyle, ...renderedLines);
+        return Box({ ...boxStyle, onClick: handleMultilineClick }, ...renderedLines);
     }
     // Single line - simple row layout
     const rowStyle = {
@@ -519,7 +684,20 @@ export function renderTextInput(state, options = {}) {
         rowStyle.borderColor = isActive ? focusedBorderColor : unfocusedBorderColor;
         rowStyle.paddingX = 1;
     }
-    return Box(rowStyle, Text({ color: foreground }, `${prompt} `), showPlaceholder
+    const handleSingleLineClick = (event) => {
+        const borderSize = noBorder ? 0 : 1;
+        const contentStartX = noBorder ? 0 : 2;
+        const contentStartY = borderSize;
+        const lineIndex = event.y - contentStartY;
+        if (lineIndex !== 0)
+            return;
+        const promptWidth = stringWidth(`${prompt} `);
+        const column = event.x - contentStartX - promptWidth;
+        const cursorOffset = getCursorIndexFromColumn(displayValue, column);
+        const nextCursor = Math.min(displayValue.length, cursorOffset);
+        state.setCursorPosition(nextCursor, { scroll: false });
+    };
+    return Box({ ...rowStyle, onClick: handleSingleLineClick }, Text({ color: foreground }, `${prompt} `), showPlaceholder
         ? Box({ flexDirection: 'row', flexGrow: fullWidth ? 1 : 0 }, Text({ color: 'mutedForeground', dim: true }, placeholder), isActive ? Text({ backgroundColor: cursorBg, color: cursorFg }, ' ') : Text({}, ''))
         : Box({ flexDirection: 'row', flexGrow: fullWidth ? 1 : 0 }, Text({}, beforeCursor), isActive
             ? Text({ backgroundColor: cursorBg, color: cursorFg }, cursorChar)