@earendil-works/pi-tui 0.84.4 → 0.85.1

package/dist/components/editor.js

@@ -1,7 +1,7 @@
 import { getKeybindings } from "../keybindings.js";
 import { decodePrintableKey, matchesKey } from "../keys.js";
 import { KillRing } from "../kill-ring.js";
-import { CURSOR_MARKER } from "../tui.js";
+import { CURSOR_MARKER, } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
 import { cjkBreakRegex, getGraphemeSegmenter, getWordSegmenter, isWhitespaceChar, sliceByColumn, visibleWidth, } from "../utils.js";
 import { findWordBackward, findWordForward } from "../word-navigation.js";
@@ -180,6 +180,12 @@ function buildDebouncePattern(triggerCharacters) {
 }
 function createScrollBorder(direction, hiddenLineCount, width) {
     const availableWidth = Math.max(0, width);
+    const label = ` ${direction} ${hiddenLineCount} more `;
+    const labelWidth = visibleWidth(label);
+    if (labelWidth + 2 <= availableWidth) {
+        const leftWidth = Math.floor((availableWidth - labelWidth) / 2);
+        return "─".repeat(leftWidth) + label + "─".repeat(availableWidth - leftWidth - labelWidth);
+    }
     const indicator = `─── ${direction} ${hiddenLineCount} more `;
     const remaining = availableWidth - visibleWidth(indicator);
     if (remaining >= 0)
@@ -199,8 +205,10 @@ export class Editor {
     tui;
     theme;
     paddingX = 0;
-    // Store last render width for cursor navigation
+    // Store last render geometry for cursor navigation and mouse hit-testing.
     lastWidth = 80;
+    renderedVisibleLineCount = 1;
+    renderedAutocompleteHeight = 0;
     // Vertical scrolling support
     scrollOffset = 0;
     // Border color (can be changed dynamically)
@@ -370,6 +378,14 @@ export class Editor {
     invalidate() {
         // No cached state to invalidate currently
     }
+    renderTopBorder(width, hiddenLineCount) {
+        const border = hiddenLineCount > 0 ? createScrollBorder("↑", hiddenLineCount, width) : "─".repeat(width);
+        return this.borderColor(border);
+    }
+    renderBottomBorder(width, hiddenLineCount) {
+        const border = hiddenLineCount > 0 ? createScrollBorder("↓", hiddenLineCount, width) : "─".repeat(width);
+        return this.borderColor(border);
+    }
     render(width) {
         const maxPadding = Math.max(0, Math.floor((width - 1) / 2));
         const paddingX = Math.min(this.paddingX, maxPadding);
@@ -379,7 +395,6 @@ export class Editor {
         const layoutWidth = Math.max(1, contentWidth - (paddingX ? 0 : 1));
         // Store for cursor navigation (must match wrapping width)
         this.lastWidth = layoutWidth;
-        const horizontal = this.borderColor("─");
         // Layout the text
         const layoutLines = this.layoutText(layoutWidth);
         // Calculate max visible lines: 30% of terminal height, minimum 5 lines
@@ -401,17 +416,12 @@ export class Editor {
         this.scrollOffset = Math.max(0, Math.min(this.scrollOffset, maxScrollOffset));
         // Get visible lines slice
         const visibleLines = layoutLines.slice(this.scrollOffset, this.scrollOffset + maxVisibleLines);
+        this.renderedVisibleLineCount = visibleLines.length;
         const result = [];
         const leftPadding = " ".repeat(paddingX);
         const rightPadding = leftPadding;
         // Render top border (with scroll indicator if scrolled down)
-        if (this.scrollOffset > 0) {
-            const border = createScrollBorder("↑", this.scrollOffset, width);
-            result.push(this.borderColor(border));
-        }
-        else {
-            result.push(horizontal.repeat(width));
-        }
+        result.push(this.renderTopBorder(width, this.scrollOffset));
         // Render each visible layout line
         // Emit hardware cursor marker when focused so TUI can position the
         // hardware cursor for IME candidate-window placement even while
@@ -456,16 +466,12 @@ export class Editor {
         }
         // Render bottom border (with scroll indicator if more content below)
         const linesBelow = layoutLines.length - (this.scrollOffset + visibleLines.length);
-        if (linesBelow > 0) {
-            const border = createScrollBorder("↓", linesBelow, width);
-            result.push(this.borderColor(border));
-        }
-        else {
-            result.push(horizontal.repeat(width));
-        }
+        result.push(this.renderBottomBorder(width, linesBelow));
         // Add autocomplete list if active
+        this.renderedAutocompleteHeight = 0;
         if (this.autocompleteState && this.autocompleteList) {
             const autocompleteResult = this.autocompleteList.render(contentWidth);
+            this.renderedAutocompleteHeight = autocompleteResult.length;
             for (const line of autocompleteResult) {
                 const lineWidth = visibleWidth(line);
                 const linePadding = " ".repeat(Math.max(0, contentWidth - lineWidth));
@@ -474,6 +480,67 @@ export class Editor {
         }
         return result;
     }
+    handleMouse(event) {
+        const autocompleteStartRow = this.renderedVisibleLineCount + 2;
+        if (this.autocompleteState &&
+            this.autocompleteList &&
+            event.y >= autocompleteStartRow &&
+            event.y < autocompleteStartRow + this.renderedAutocompleteHeight) {
+            const maxPadding = Math.max(0, Math.floor((event.width - 1) / 2));
+            const paddingX = Math.min(this.paddingX, maxPadding);
+            const contentWidth = Math.max(1, event.width - paddingX * 2);
+            const result = this.autocompleteList.handleMouse?.({
+                ...event,
+                x: event.x - paddingX,
+                y: event.y - autocompleteStartRow,
+                width: contentWidth,
+                height: this.renderedAutocompleteHeight,
+            });
+            return result ? { ...result, focus: true } : undefined;
+        }
+        // Leave press/drag/release unhandled so the renderer's screen-level text
+        // selection can run over the editor rows (drag to select, release to copy).
+        // The renderer synthesizes a click when press and release land on the same
+        // cell without movement, which is the gesture that positions the cursor.
+        if (event.type !== "click" || event.button !== "left")
+            return undefined;
+        if (event.y <= 0 || event.y > this.renderedVisibleLineCount)
+            return { handled: true, focus: true };
+        const visualLines = this.buildVisualLineMap(this.lastWidth);
+        const visualLineIndex = this.scrollOffset + event.y - 1;
+        const visualLine = visualLines[visualLineIndex];
+        if (!visualLine)
+            return { handled: true, focus: true };
+        const logicalLine = this.state.lines[visualLine.logicalLine] ?? "";
+        const chunkEnd = visualLine.startCol + visualLine.length;
+        const chunk = logicalLine.slice(visualLine.startCol, chunkEnd);
+        const maxPadding = Math.max(0, Math.floor((event.width - 1) / 2));
+        const paddingX = Math.min(this.paddingX, maxPadding);
+        const targetColumn = Math.max(0, event.x - paddingX);
+        let visibleColumn = 0;
+        let targetIndex = chunk.length;
+        let lastGraphemeIndex = 0;
+        for (const grapheme of this.segment(chunk, "grapheme")) {
+            const nextColumn = visibleColumn + visibleWidth(grapheme.segment);
+            lastGraphemeIndex = grapheme.index;
+            if (targetColumn < nextColumn) {
+                targetIndex = grapheme.index;
+                break;
+            }
+            visibleColumn = nextColumn;
+        }
+        const isLastSegment = visualLineIndex === visualLines.length - 1 ||
+            visualLines[visualLineIndex + 1]?.logicalLine !== visualLine.logicalLine;
+        if (!isLastSegment && targetIndex === chunk.length && chunk.length > 0)
+            targetIndex = lastGraphemeIndex;
+        this.state.cursorLine = visualLine.logicalLine;
+        this.setCursorCol(visualLine.startCol + targetIndex);
+        this.lastAction = null;
+        this.exitHistoryBrowsing();
+        if (this.autocompleteState)
+            this.updateAutocomplete();
+        return { handled: true, focus: true };
+    }
     handleInput(data) {
         const kb = getKeybindings();
         // Handle character jump mode (awaiting next character to jump to)
@@ -1804,7 +1871,20 @@ export class Editor {
     }
     createAutocompleteList(prefix, items) {
         const layout = prefix.startsWith("/") ? SLASH_COMMAND_SELECT_LIST_LAYOUT : undefined;
-        return new SelectList(items, this.autocompleteMaxVisible, this.theme.selectList, layout);
+        const list = new SelectList(items, this.autocompleteMaxVisible, this.theme.selectList, layout);
+        list.onSelect = (selected) => {
+            if (!this.autocompleteProvider)
+                return;
+            this.pushUndoSnapshot();
+            this.lastAction = null;
+            const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, selected, this.autocompletePrefix);
+            this.state.lines = result.lines;
+            this.state.cursorLine = result.cursorLine;
+            this.setCursorCol(result.cursorCol);
+            this.cancelAutocomplete();
+            this.onChange?.(this.getText());
+        };
+        return list;
     }
     tryTriggerAutocomplete(explicitTab = false) {
         this.requestAutocomplete({ force: false, explicitTab });