@kolisachint/hoocode-tui 0.4.157 → 0.4.158

package/dist/components/editor.js

@@ -125,7 +125,23 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
             // in a narrow terminal). Re-wrap it at grapheme granularity.
             // The segment remains logically atomic for cursor
             // movement / editing — the split is purely visual for word-wrap layout.
-            const subChunks = wordWrapLine(grapheme, maxWidth);
+            const subSegments = [...baseSegmenter.segment(grapheme)];
+            if (subSegments.length <= 1) {
+                // Nothing left to split: a single grapheme wider than the editor
+                // (a double-width character or emoji in a very narrow terminal).
+                // Emit it on its own chunk and let it overflow — recursing here
+                // would re-enter with identical arguments and never terminate.
+                const end = charIndex + grapheme.length;
+                if (chunkStart < charIndex) {
+                    chunks.push({ text: line.slice(chunkStart, charIndex), startIndex: chunkStart, endIndex: charIndex });
+                }
+                chunks.push({ text: grapheme, startIndex: charIndex, endIndex: end });
+                chunkStart = end;
+                currentWidth = 0;
+                wrapOppIndex = -1;
+                continue;
+            }
+            const subChunks = wordWrapLine(grapheme, maxWidth, subSegments);
             for (let j = 0; j < subChunks.length - 1; j++) {
                 const sc = subChunks[j];
                 chunks.push({ text: sc.text, startIndex: charIndex + sc.startIndex, endIndex: charIndex + sc.endIndex });
@@ -147,10 +163,21 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
             wrapOppWidth = currentWidth;
         }
     }
-    // Push final chunk.
-    chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
+    // Push final chunk, unless the line was already fully consumed (an atomic
+    // oversized grapheme ends exactly on the line end and needs no empty tail).
+    if (chunkStart < line.length || chunks.length === 0) {
+        chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
+    }
     return chunks;
 }
+export const DEFAULT_EDITOR_BORDER_CHARS = {
+    horizontal: "─",
+    vertical: "│",
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+};
 const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
     minPrimaryColumnWidth: 12,
     maxPrimaryColumnWidth: 32,
@@ -167,6 +194,8 @@ export class Editor {
     tui;
     theme;
     paddingX = 0;
+    border = "rule";
+    borderChars;
     // Store last render width for cursor navigation
     lastWidth = 80;
     // Vertical scrolling support
@@ -219,6 +248,8 @@ export class Editor {
         this.tui = tui;
         this.theme = theme;
         this.borderColor = theme.borderColor;
+        this.borderChars = { ...DEFAULT_EDITOR_BORDER_CHARS, ...theme.borderChars };
+        this.border = options.border ?? "rule";
         const paddingX = options.paddingX ?? 0;
         this.paddingX = Number.isFinite(paddingX) ? Math.max(0, Math.floor(paddingX)) : 0;
         const maxVisible = options.autocompleteMaxVisible ?? 5;
@@ -242,6 +273,15 @@ export class Editor {
             this.tui.requestRender();
         }
     }
+    getBorder() {
+        return this.border;
+    }
+    setBorder(border) {
+        if (this.border !== border) {
+            this.border = border;
+            this.tui.requestRender();
+        }
+    }
     getAutocompleteMaxVisible() {
         return this.autocompleteMaxVisible;
     }
@@ -321,19 +361,55 @@ export class Editor {
     invalidate() {
         // No cached state to invalidate currently
     }
+    /**
+     * Render a horizontal border, optionally carrying a scroll indicator.
+     * In box mode the bar is flanked by corners and padded so they stay aligned.
+     * @param edge - Which border to draw (selects arrow direction and corners)
+     * @param hidden - Number of layout lines hidden past this edge (0 = no indicator)
+     * @param barWidth - Width of the horizontal bar, excluding corners
+     * @param box - Whether to draw corners
+     */
+    renderBorder(edge, hidden, barWidth, box) {
+        const chars = this.borderChars;
+        let bar;
+        if (hidden > 0) {
+            const arrow = edge === "top" ? "↑" : "↓";
+            const indicator = `${chars.horizontal.repeat(3)} ${arrow} ${hidden} more `;
+            const remaining = barWidth - visibleWidth(indicator);
+            bar = remaining >= 0 ? indicator + chars.horizontal.repeat(remaining) : truncateToWidth(indicator, barWidth);
+        }
+        else {
+            bar = chars.horizontal.repeat(barWidth);
+        }
+        if (!box)
+            return this.borderColor(bar);
+        // Corners must stay aligned, so pad back any width lost to truncation.
+        bar += chars.horizontal.repeat(Math.max(0, barWidth - visibleWidth(bar)));
+        const left = edge === "top" ? chars.topLeft : chars.bottomLeft;
+        const right = edge === "top" ? chars.topRight : chars.bottomRight;
+        return this.borderColor(`${left}${bar}${right}`);
+    }
     render(width) {
-        const maxPadding = Math.max(0, Math.floor((width - 1) / 2));
+        // Box mode needs 2 columns for the side borders plus at least 1 content
+        // column; below that it degrades to rule mode rather than overflowing.
+        const box = this.border === "box" && width >= 4;
+        const borderWidth = box ? 1 : 0;
+        const innerWidth = Math.max(1, width - borderWidth * 2);
+        const maxPadding = Math.max(0, Math.floor((innerWidth - 1) / 2));
         const paddingX = Math.min(this.paddingX, maxPadding);
-        const contentWidth = Math.max(1, width - paddingX * 2);
+        const contentWidth = Math.max(1, innerWidth - paddingX * 2);
         // Prompt prefix reserves space on the first line
         const promptPrefixWidth = this.promptPrefix ? visibleWidth(`${this.promptPrefix} `) : 0;
-        // Layout width: with padding the cursor can overflow into it,
-        // without padding we reserve 1 column for the cursor.
+        // Layout width: in rule mode with padding the cursor can overflow into the
+        // padding, so no column is reserved. Without padding, or in box mode where
+        // the cursor must never overwrite the side border, we reserve one.
         // Also reserve space for prompt prefix on the first line.
-        const layoutWidth = Math.max(1, contentWidth - (paddingX ? 0 : 1) - promptPrefixWidth);
+        const cursorColumn = box || !paddingX ? 1 : 0;
+        const layoutWidth = Math.max(1, contentWidth - cursorColumn - promptPrefixWidth);
         // Store for cursor navigation (must match wrapping width)
         this.lastWidth = layoutWidth;
-        const horizontal = this.borderColor("─");
+        const barWidth = box ? width - 2 : width;
+        const vertical = box ? this.borderColor(this.borderChars.vertical) : "";
         // Layout the text
         const layoutLines = this.layoutText(layoutWidth);
         // Calculate max visible lines: 30% of terminal height, minimum 5 lines
@@ -359,19 +435,7 @@ export class Editor {
         const leftPadding = " ".repeat(paddingX);
         const rightPadding = leftPadding;
         // Render top border (with scroll indicator if scrolled down)
-        if (this.scrollOffset > 0) {
-            const indicator = `─── ↑ ${this.scrollOffset} more `;
-            const remaining = width - visibleWidth(indicator);
-            if (remaining >= 0) {
-                result.push(this.borderColor(indicator + "─".repeat(remaining)));
-            }
-            else {
-                result.push(this.borderColor(truncateToWidth(indicator, width)));
-            }
-        }
-        else {
-            result.push(horizontal.repeat(width));
-        }
+        result.push(this.renderBorder("top", this.scrollOffset, barWidth, box));
         // Render each visible layout line
         // Emit hardware cursor marker only when focused and not showing autocomplete
         const emitCursorMarker = this.focused && !this.autocompleteState;
@@ -402,7 +466,7 @@ export class Editor {
                     displayText = before + marker + cursor;
                     lineVisibleWidth = lineVisibleWidth + 1;
                     // If cursor overflows content width into the padding, flag it
-                    if (lineVisibleWidth > contentWidth && paddingX > 0) {
+                    if (!box && lineVisibleWidth > contentWidth && paddingX > 0) {
                         cursorInPadding = true;
                     }
                 }
@@ -416,26 +480,21 @@ export class Editor {
             // Calculate padding based on actual visible width
             const padding = " ".repeat(Math.max(0, contentWidth - lineVisibleWidth));
             const lineRightPadding = cursorInPadding ? rightPadding.slice(1) : rightPadding;
-            // Render the line (no side borders, just horizontal lines above and below)
-            result.push(`${leftPadding}${displayText}${padding}${lineRightPadding}`);
+            // Render the line (side borders only in box mode)
+            result.push(`${vertical}${leftPadding}${displayText}${padding}${lineRightPadding}${vertical}`);
         }
         // Render bottom border (with scroll indicator if more content below)
         const linesBelow = layoutLines.length - (this.scrollOffset + visibleLines.length);
-        if (linesBelow > 0) {
-            const indicator = `─── ↓ ${linesBelow} more `;
-            const remaining = width - visibleWidth(indicator);
-            result.push(this.borderColor(indicator + "─".repeat(Math.max(0, remaining))));
-        }
-        else {
-            result.push(horizontal.repeat(width));
-        }
+        result.push(this.renderBorder("bottom", linesBelow, barWidth, box));
         // Add autocomplete list if active
         if (this.autocompleteState && this.autocompleteList) {
             const autocompleteResult = this.autocompleteList.render(contentWidth);
+            // Align the dropdown to the inner text edge, not the outer box edge.
+            const acPadding = " ".repeat(borderWidth + paddingX);
             for (const line of autocompleteResult) {
                 const lineWidth = visibleWidth(line);
                 const linePadding = " ".repeat(Math.max(0, contentWidth - lineWidth));
-                result.push(`${leftPadding}${line}${linePadding}${rightPadding}`);
+                result.push(`${acPadding}${line}${linePadding}${acPadding}`);
             }
         }
         return result;