@denizokcu/haze 0.1.1 → 0.2.0

package/dist/ui/components/TextInput.js

@@ -50,7 +50,59 @@ function compactPasteBlocksForDisplay(value, blocks) {
     displayValue += value.slice(offset);
     return displayValue;
 }
-export function TextInput({ placeholder, disabled, mask, historyItems = [], recordHistory = true, suggestions = [], suggestionMode = 'slash', submitOnEmpty = false, onHistoryAdd, onCancel, onEscape, onSubmit }) {
+function valueCursorForDisplayCursor(blocks, displayCursor) {
+    let valueCursor = displayCursor;
+    let displayOffset = 0;
+    for (const block of [...blocks].sort((a, b) => a.start - b.start)) {
+        const placeholderLength = pastePlaceholder(block).length;
+        const displayStart = block.start - displayOffset;
+        const displayEnd = displayStart + placeholderLength;
+        if (displayCursor <= displayStart)
+            break;
+        if (displayCursor <= displayEnd)
+            return block.end;
+        const compactedLength = block.end - block.start - placeholderLength;
+        valueCursor += compactedLength;
+        displayOffset += compactedLength;
+    }
+    return valueCursor;
+}
+function wrapDisplayValue(displayValue, width) {
+    const wrapWidth = Math.max(1, width);
+    const lines = [];
+    let start = 0;
+    let text = '';
+    for (let index = 0; index < displayValue.length; index += 1) {
+        const char = displayValue[index];
+        if (char === '\n') {
+            lines.push({ text, start, end: index });
+            start = index + 1;
+            text = '';
+            continue;
+        }
+        if (text.length >= wrapWidth) {
+            lines.push({ text, start, end: index });
+            start = index;
+            text = '';
+        }
+        text += char;
+    }
+    lines.push({ text, start, end: displayValue.length });
+    return lines;
+}
+function cursorPosition(lines, displayCursor) {
+    const foundIndex = lines.findIndex((line, index) => {
+        const isLast = index === lines.length - 1;
+        if (line.start === line.end)
+            return displayCursor === line.start;
+        const nextLineStartsAfterNewline = lines[index + 1]?.start === line.end + 1;
+        return displayCursor >= line.start && (displayCursor < line.end || (nextLineStartsAfterNewline && displayCursor === line.end) || (isLast && displayCursor <= line.end));
+    });
+    const lineIndex = Math.max(0, foundIndex);
+    const line = lines[lineIndex] ?? lines[0] ?? { start: 0, end: 0 };
+    return { lineIndex, column: Math.max(0, Math.min(displayCursor - line.start, line.end - line.start)) };
+}
+export function TextInput({ placeholder, disabled, mask, historyItems = [], recordHistory = true, suggestions = [], suggestionMode = 'slash', submitOnEmpty = false, width = 80, onHistoryAdd, onCancel, onEscape, onSubmit }) {
     const [value, setValue] = useState('');
     const [cursor, setCursor] = useState(0);
     const [pasteBlocks, setPasteBlocks] = useState([]);
@@ -59,6 +111,7 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
     const historyIndex = useRef(null);
     const draft = useRef('');
     const nextPasteId = useRef(1);
+    const preferredColumn = useRef(null);
     useEffect(() => {
         history.current = historyItems;
     }, [historyItems]);
@@ -74,6 +127,7 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
         }
     }, [disabled]);
     function setInput(next, nextCursor = next.length, nextPasteBlocks = []) {
+        preferredColumn.current = null;
         setValue(next);
         setCursor(Math.max(0, Math.min(nextCursor, next.length)));
         setPasteBlocks(nextPasteBlocks);
@@ -105,6 +159,24 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
         .slice(0, 8);
     const activeSuggestionIndex = Math.min(selectedSuggestionIndex, Math.max(0, filteredSuggestions.length - 1));
     const activeSuggestion = filteredSuggestions[activeSuggestionIndex];
+    const displayValue = mask ? '•'.repeat(value.length) : compactPasteBlocksForDisplay(value, pasteBlocks);
+    const displayCursor = mask ? cursor : displayCursorForValueCursor(pasteBlocks, cursor);
+    const inputWidth = Math.max(1, width - 2);
+    const wrappedLines = wrapDisplayValue(displayValue, inputWidth);
+    const currentCursorPosition = cursorPosition(wrappedLines, displayCursor);
+    function moveCursorToDisplayPosition(nextDisplayCursor) {
+        const clampedDisplayCursor = Math.max(0, Math.min(nextDisplayCursor, displayValue.length));
+        setCursor(mask ? clampedDisplayCursor : valueCursorForDisplayCursor(pasteBlocks, clampedDisplayCursor));
+    }
+    function moveCursorVertically(direction) {
+        const targetLine = wrappedLines[currentCursorPosition.lineIndex + direction];
+        if (!targetLine)
+            return false;
+        const column = preferredColumn.current ?? currentCursorPosition.column;
+        preferredColumn.current = column;
+        moveCursorToDisplayPosition(Math.min(targetLine.start + column, targetLine.end));
+        return true;
+    }
     function submitValue(submitted, historyValue = submitted) {
         if (recordHistory && historyValue) {
             if (history.current[history.current.length - 1] !== historyValue)
@@ -146,10 +218,12 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
             return;
         }
         if (key.leftArrow) {
+            preferredColumn.current = null;
             setCursor(current => Math.max(0, current - 1));
             return;
         }
         if (key.rightArrow) {
+            preferredColumn.current = null;
             setCursor(current => Math.min(value.length, current + 1));
             return;
         }
@@ -158,6 +232,9 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
                 setSelectedSuggestionIndex(current => Math.max(0, current - 1));
                 return;
             }
+            if (filteredSuggestions.length === 0 && moveCursorVertically(-1))
+                return;
+            preferredColumn.current = null;
             if (history.current.length === 0)
                 return;
             if (historyIndex.current === null) {
@@ -174,6 +251,9 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
                 setSelectedSuggestionIndex(current => Math.min(filteredSuggestions.length - 1, current + 1));
                 return;
             }
+            if (filteredSuggestions.length === 0 && moveCursorVertically(1))
+                return;
+            preferredColumn.current = null;
             if (historyIndex.current === null)
                 return;
             if (historyIndex.current < history.current.length - 1) {
@@ -198,10 +278,12 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
             return;
         }
         if (key.ctrl && input === 'a') {
+            preferredColumn.current = null;
             setCursor(0);
             return;
         }
         if (key.ctrl && input === 'e') {
+            preferredColumn.current = null;
             setCursor(value.length);
             return;
         }
@@ -211,10 +293,16 @@ export function TextInput({ placeholder, disabled, mask, historyItems = [], reco
             replaceInput(cursor, cursor, input);
         }
     });
-    const displayValue = mask ? '•'.repeat(value.length) : compactPasteBlocksForDisplay(value, pasteBlocks);
-    const displayCursor = mask ? cursor : displayCursorForValueCursor(pasteBlocks, cursor);
-    const beforeCursor = displayValue.slice(0, displayCursor);
-    const cursorChar = displayValue[displayCursor] ?? ' ';
-    const afterCursor = displayValue.slice(displayCursor + 1);
-    return _jsxs(Box, { flexDirection: "column", width: "100%", children: [filteredSuggestions.length > 0 && _jsx(Box, { flexDirection: "column", marginBottom: 1, children: filteredSuggestions.map((suggestion, index) => _jsxs(Text, { color: index === activeSuggestionIndex ? theme.success : theme.muted, wrap: "truncate-end", children: [index === activeSuggestionIndex ? '› ' : '  ', suggestion.value, _jsxs(Text, { color: theme.muted, children: [" ", suggestion.kind ?? 'command', suggestion.description ? ` — ${suggestion.description}` : ''] })] }, suggestion.value)) }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: theme.purple, children: "\u203A " }), value.length === 0 ? _jsxs(_Fragment, { children: [_jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { color: theme.muted, dimColor: true, children: [" ", placeholder ?? 'Type a message...'] })] }) : _jsxs(_Fragment, { children: [beforeCursor, _jsx(Text, { inverse: true, children: cursorChar }), afterCursor] })] })] });
+    const maxVisibleLines = 4;
+    const firstVisibleLine = Math.max(0, Math.min(currentCursorPosition.lineIndex - maxVisibleLines + 1, wrappedLines.length - maxVisibleLines));
+    const visibleLines = wrappedLines.slice(firstVisibleLine, firstVisibleLine + maxVisibleLines);
+    return _jsxs(Box, { flexDirection: "column", width: "100%", children: [filteredSuggestions.length > 0 && _jsx(Box, { flexDirection: "column", marginBottom: 1, children: filteredSuggestions.map((suggestion, index) => _jsxs(Text, { color: index === activeSuggestionIndex ? theme.success : theme.muted, wrap: "truncate-end", children: [index === activeSuggestionIndex ? '› ' : '  ', suggestion.value, _jsxs(Text, { color: theme.muted, children: [" ", suggestion.kind ?? 'command', suggestion.description ? ` — ${suggestion.description}` : ''] })] }, suggestion.value)) }), value.length === 0 ? _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: theme.purple, children: "\u203A " }), _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { color: theme.muted, dimColor: true, children: [" ", placeholder ?? 'Type a message...'] })] }) : visibleLines.map((line, index) => {
+                const absoluteLineIndex = firstVisibleLine + index;
+                const isCursorLine = absoluteLineIndex === currentCursorPosition.lineIndex;
+                const lineCursor = isCursorLine ? Math.max(0, Math.min(displayCursor - line.start, line.text.length)) : -1;
+                const beforeCursor = isCursorLine ? line.text.slice(0, lineCursor) : line.text;
+                const cursorChar = isCursorLine ? line.text[lineCursor] ?? ' ' : '';
+                const afterCursor = isCursorLine ? line.text.slice(lineCursor + 1) : '';
+                return _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { color: absoluteLineIndex === 0 ? theme.purple : theme.muted, children: absoluteLineIndex === 0 ? '› ' : '  ' }), isCursorLine ? _jsxs(_Fragment, { children: [beforeCursor, _jsx(Text, { inverse: true, children: cursorChar }), afterCursor] }) : line.text] }, `${line.start}-${absoluteLineIndex}`);
+            })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@denizokcu/haze",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A pragmatic agentic CLI for building apps from the terminal.",
   "type": "module",
   "license": "MIT",