@jecruz/merc-tui 0.1.3 → 0.1.6

package/dist/components/editor.js

@@ -3,9 +3,11 @@ import { decodePrintableKey, matchesKey } from "../keys.js";
 import { KillRing } from "../kill-ring.js";
 import { CURSOR_MARKER } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils.js";
+import { autocompleteBoundaryRegex, autocompleteSeparatorRegex, cjkBreakRegex, getGraphemeSegmenter, getWordSegmenter, isWhitespaceChar, sliceByColumn, visibleWidth, } from "../utils.js";
+import { findWordBackward, findWordForward } from "../word-navigation.js";
 import { SelectList } from "./select-list.js";
-const baseSegmenter = getSegmenter();
+const graphemeSegmenter = getGraphemeSegmenter();
+const wordSegmenter = getWordSegmenter();
 /** Regex matching paste markers like `[paste #1 +123 lines]` or `[paste #2 1234 chars]`. */
 const PASTE_MARKER_REGEX = /\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]/g;
 /** Non-global version for single-segment testing. */
@@ -21,7 +23,7 @@ function isPasteMarker(segment) {
  *
  * Only markers whose numeric ID exists in `validIds` are merged.
  */
-function segmentWithMarkers(text, validIds) {
+function segmentWithMarkers(text, baseSegmenter, validIds) {
     // Fast path: no paste markers in the text or no valid IDs.
     if (validIds.size === 0 || !text.includes("[paste #")) {
         return baseSegmenter.segment(text);
@@ -86,7 +88,7 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
         return [{ text: line, startIndex: 0, endIndex: line.length }];
     }
     const chunks = [];
-    const segments = preSegmented ?? [...baseSegmenter.segment(line)];
+    const segments = preSegmented ?? [...graphemeSegmenter.segment(line)];
     let currentWidth = 0;
     let chunkStart = 0;
     // Wrap opportunity: the position after the last whitespace before a non-whitespace
@@ -138,14 +140,23 @@ export function wordWrapLine(line, maxWidth, preSegmented) {
         }
         // Advance.
         currentWidth += gWidth;
-        // Record wrap opportunity: whitespace followed by non-whitespace.
-        // Multiple spaces join (no break between them); the break point is
-        // after the last space before the next word.
+        // Record wrap opportunity: whitespace followed by non-whitespace
+        // (multiple spaces join; the break point is after the last space),
+        // or at a boundary where either side is CJK (CJK allows breaking
+        // between any adjacent characters).
         const next = segments[i + 1];
         if (isWs && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
             wrapOppIndex = next.index;
             wrapOppWidth = currentWidth;
         }
+        else if (!isWs && next && !isWhitespaceChar(next.segment)) {
+            const isCjk = !isPasteMarker(grapheme) && cjkBreakRegex.test(grapheme);
+            const nextIsCjk = !isPasteMarker(next.segment) && cjkBreakRegex.test(next.segment);
+            if (isCjk || nextIsCjk) {
+                wrapOppIndex = next.index;
+                wrapOppWidth = currentWidth;
+            }
+        }
     }
     // Push final chunk.
     chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
@@ -156,6 +167,22 @@ const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
     maxPrimaryColumnWidth: 32,
 };
 const ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS = 20;
+// Unquoted completions end at whitespace or CJK punctuation; quoted paths may contain either.
+const unquotedAutocompleteSuffixRegex = new RegExp(`(?:(?!${autocompleteSeparatorRegex.source}).)*`, "u");
+// Trigger tokens may be wrapped in prose, e.g. "(@src/foo" or "`@src/foo".
+const autocompleteTokenStartSource = `${autocompleteBoundaryRegex.source}[([{<\`]*`;
+const symbolTriggerPattern = new RegExp(`${autocompleteTokenStartSource}(?:@"[^"]*|[@#]${unquotedAutocompleteSuffixRegex.source})$`, "u");
+const symbolDebouncePattern = new RegExp(`${autocompleteTokenStartSource}(?:@(?:"[^"]*|${unquotedAutocompleteSuffixRegex.source})|#${unquotedAutocompleteSuffixRegex.source})$`, "u");
+function createScrollBorder(direction, hiddenLineCount, width) {
+    const availableWidth = Math.max(0, width);
+    const indicator = `─── ${direction} ${hiddenLineCount} more `;
+    const remaining = availableWidth - visibleWidth(indicator);
+    if (remaining >= 0)
+        return indicator + "─".repeat(remaining);
+    const ellipsis = "...".slice(0, availableWidth);
+    const indicatorWidth = availableWidth - visibleWidth(ellipsis);
+    return sliceByColumn(indicator, 0, indicatorWidth, true) + ellipsis;
+}
 export class Editor {
     state = {
         lines: [""],
@@ -226,8 +253,8 @@ export class Editor {
         return new Set(this.pastes.keys());
     }
     /** Segment text with paste-marker awareness, only merging markers with valid IDs. */
-    segment(text) {
-        return segmentWithMarkers(text, this.validPasteIds());
+    segment(text, mode) {
+        return segmentWithMarkers(text, mode === "word" ? wordSegmenter : graphemeSegmenter, this.validPasteIds());
     }
     getPaddingX() {
         return this.paddingX;
@@ -370,14 +397,8 @@ export class Editor {
         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)));
-            }
+            const border = createScrollBorder("↑", this.scrollOffset, width);
+            result.push(this.borderColor(border));
         }
         else {
             result.push(horizontal.repeat(width));
@@ -400,7 +421,7 @@ export class Editor {
                 if (after.length > 0) {
                     // Cursor is on a character (grapheme) - replace it with highlighted version
                     // Get the first grapheme from 'after'
-                    const afterGraphemes = [...this.segment(after)];
+                    const afterGraphemes = [...this.segment(after, "grapheme")];
                     const firstGrapheme = afterGraphemes[0]?.segment || "";
                     const restAfter = after.slice(firstGrapheme.length);
                     const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
@@ -427,9 +448,8 @@ 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 indicator = `─── ↓ ${linesBelow} more `;
-            const remaining = width - visibleWidth(indicator);
-            result.push(this.borderColor(indicator + "─".repeat(Math.max(0, remaining))));
+            const border = createScrollBorder("↓", linesBelow, width);
+            result.push(this.borderColor(border));
         }
         else {
             result.push(horizontal.repeat(width));
@@ -734,7 +754,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line)]);
+                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line, "grapheme")]);
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
@@ -811,13 +831,13 @@ export class Editor {
         this.cancelAutocomplete();
         this.lastAction = null;
         this.exitHistoryBrowsing();
-        this.pastes.clear();
-        this.pasteCounter = 0;
         const normalized = this.normalizeText(text);
         // Push undo snapshot if content differs (makes programmatic changes undoable)
         if (this.getText() !== normalized) {
             this.pushUndoSnapshot();
         }
+        this.pastes.clear();
+        this.pasteCounter = 0;
         this.setTextInternal(normalized);
     }
     /**
@@ -914,13 +934,12 @@ export class Editor {
             else if (char === "@" || char === "#") {
                 const currentLine = this.state.lines[this.state.cursorLine] || "";
                 const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-                const charBeforeSymbol = textBeforeCursor[textBeforeCursor.length - 2];
-                if (textBeforeCursor.length === 1 || charBeforeSymbol === " " || charBeforeSymbol === "\t") {
+                if (symbolTriggerPattern.test(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
             }
             // Also auto-trigger when typing letters in a slash command or symbol completion context
-            else if (/[a-zA-Z0-9.\-_]/.test(char)) {
+            else if (/[a-zA-Z0-9.\-_]/.test(char) || cjkBreakRegex.test(char)) {
                 const currentLine = this.state.lines[this.state.cursorLine] || "";
                 const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
                 // Check if we're in a slash command (with or without space for arguments)
@@ -928,7 +947,7 @@ export class Editor {
                     this.tryTriggerAutocomplete();
                 }
                 // Check if we're in a symbol-based completion context like @ or #
-                else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+                else if (symbolTriggerPattern.test(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
             }
@@ -1049,7 +1068,7 @@ export class Editor {
             let line = this.state.lines[this.state.cursorLine] || "";
             const beforeCursor = line.slice(0, this.state.cursorCol);
             // Find the last grapheme in the text before cursor
-            const graphemes = [...this.segment(beforeCursor)];
+            const graphemes = [...this.segment(beforeCursor, "grapheme")];
             const lastGrapheme = graphemes[graphemes.length - 1];
             const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
             const isPastedSegment = PASTE_MARKER_SINGLE.exec(lastGrapheme.segment);
@@ -1057,15 +1076,20 @@ export class Editor {
                 const targetId = Number(isPastedSegment[1]);
                 this.pastes.delete(targetId);
                 this.pasteCounter--;
-                // Renumber higher paste IDs so the marker registry stays dense.
+                // Shift registry entries down in ascending id order, independent
+                // of marker order in the text ([paste #3] becomes [paste #2] when
+                // [paste #1] is removed).
+                const higherIds = [...this.pastes.keys()].filter((id) => id > targetId).sort((a, b) => a - b);
+                for (const id of higherIds) {
+                    this.pastes.set(id - 1, this.pastes.get(id));
+                    this.pastes.delete(id);
+                }
+                // Renumber markers with ids greater than the removed one.
                 this.state.lines = this.state.lines.map((line) => line.replace(PASTE_MARKER_REGEX, (fullMatch, idGroup, suffixGroup) => {
-                    const id = Number(idGroup);
-                    if (id <= targetId)
+                    const x = Number(idGroup);
+                    if (x <= targetId)
                         return fullMatch;
-                    const newText = `[paste #${id - 1}${suffixGroup}]`;
-                    this.pastes.set(id - 1, this.pastes.get(id) ?? newText);
-                    this.pastes.delete(id);
-                    return newText;
+                    return `[paste #${x - 1}${suffixGroup}]`;
                 }));
             }
             line = this.state.lines[this.state.cursorLine] || "";
@@ -1100,7 +1124,7 @@ export class Editor {
                 this.tryTriggerAutocomplete();
             }
             // Symbol-based completion context like @ or #
-            else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+            else if (symbolTriggerPattern.test(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -1150,7 +1174,7 @@ export class Editor {
         // Snap cursor to atomic segment boundary (e.g. paste markers)
         // so the cursor never lands in the middle of a multi-grapheme unit.
         // Single-grapheme segments don't need snapping.
-        const segments = [...this.segment(logicalLine)];
+        const segments = [...this.segment(logicalLine, "grapheme")];
         for (const seg of segments) {
             if (seg.index > this.state.cursorCol)
                 break;
@@ -1370,7 +1394,7 @@ export class Editor {
             // Delete grapheme at cursor position (handles emojis, combining characters, etc.)
             const afterCursor = currentLine.slice(this.state.cursorCol);
             // Find the first grapheme at cursor
-            const graphemes = [...this.segment(afterCursor)];
+            const graphemes = [...this.segment(afterCursor, "grapheme")];
             const firstGrapheme = graphemes[0];
             const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
             const before = currentLine.slice(0, this.state.cursorCol);
@@ -1399,7 +1423,7 @@ export class Editor {
                 this.tryTriggerAutocomplete();
             }
             // Symbol-based completion context like @ or #
-            else if (textBeforeCursor.match(/(?:^|[\s])[@#][^\s]*$/)) {
+            else if (symbolTriggerPattern.test(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
         }
@@ -1425,7 +1449,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, width, [...this.segment(line)]);
+                const chunks = wordWrapLine(line, width, [...this.segment(line, "grapheme")]);
                 for (const chunk of chunks) {
                     visualLines.push({
                         logicalLine: i,
@@ -1477,7 +1501,7 @@ export class Editor {
                 // Moving right - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol < currentLine.length) {
                     const afterCursor = currentLine.slice(this.state.cursorCol);
-                    const graphemes = [...this.segment(afterCursor)];
+                    const graphemes = [...this.segment(afterCursor, "grapheme")];
                     const firstGrapheme = graphemes[0];
                     this.setCursorCol(this.state.cursorCol + (firstGrapheme ? firstGrapheme.segment.length : 1));
                 }
@@ -1498,7 +1522,7 @@ export class Editor {
                 // Moving left - move by one grapheme (handles emojis, combining characters, etc.)
                 if (this.state.cursorCol > 0) {
                     const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-                    const graphemes = [...this.segment(beforeCursor)];
+                    const graphemes = [...this.segment(beforeCursor, "grapheme")];
                     const lastGrapheme = graphemes[graphemes.length - 1];
                     this.setCursorCol(this.state.cursorCol - (lastGrapheme ? lastGrapheme.segment.length : 1));
                 }
@@ -1547,40 +1571,10 @@ export class Editor {
             }
             return;
         }
-        const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const graphemes = [...this.segment(textBeforeCursor)];
-        let newCol = this.state.cursorCol;
-        // Skip trailing whitespace
-        while (graphemes.length > 0 &&
-            !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "") &&
-            isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "")) {
-            newCol -= graphemes.pop()?.segment.length || 0;
-        }
-        if (graphemes.length > 0) {
-            const lastGrapheme = graphemes[graphemes.length - 1]?.segment || "";
-            if (isPasteMarker(lastGrapheme)) {
-                // Paste marker is a single atomic word
-                newCol -= graphemes.pop()?.segment.length || 0;
-            }
-            else if (isPunctuationChar(lastGrapheme)) {
-                // Skip punctuation run
-                while (graphemes.length > 0 &&
-                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
-                    newCol -= graphemes.pop()?.segment.length || 0;
-                }
-            }
-            else {
-                // Skip word run
-                while (graphemes.length > 0 &&
-                    !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
-                    newCol -= graphemes.pop()?.segment.length || 0;
-                }
-            }
-        }
-        this.setCursorCol(newCol);
+        this.setCursorCol(findWordBackward(currentLine, this.state.cursorCol, {
+            segment: (text) => this.segment(text, "word"),
+            isAtomicSegment: isPasteMarker,
+        }));
     }
     /**
      * Yank (paste) the most recent kill ring entry at cursor position.
@@ -1684,14 +1678,16 @@ export class Editor {
         }
     }
     pushUndoSnapshot() {
-        this.undoStack.push(this.state);
+        this.undoStack.push({ state: this.state, pastes: this.pastes, pasteCounter: this.pasteCounter });
     }
     undo() {
         this.exitHistoryBrowsing();
         const snapshot = this.undoStack.pop();
         if (!snapshot)
             return;
-        Object.assign(this.state, snapshot);
+        Object.assign(this.state, snapshot.state);
+        this.pastes = snapshot.pastes;
+        this.pasteCounter = snapshot.pasteCounter;
         this.lastAction = null;
         this.preferredVisualCol = null;
         if (this.onChange) {
@@ -1737,41 +1733,10 @@ export class Editor {
             }
             return;
         }
-        const textAfterCursor = currentLine.slice(this.state.cursorCol);
-        const segments = this.segment(textAfterCursor);
-        const iterator = segments[Symbol.iterator]();
-        let next = iterator.next();
-        let newCol = this.state.cursorCol;
-        // Skip leading whitespace
-        while (!next.done && !isPasteMarker(next.value.segment) && isWhitespaceChar(next.value.segment)) {
-            newCol += next.value.segment.length;
-            next = iterator.next();
-        }
-        if (!next.done) {
-            const firstGrapheme = next.value.segment;
-            if (isPasteMarker(firstGrapheme)) {
-                // Paste marker is a single atomic word
-                newCol += firstGrapheme.length;
-            }
-            else if (isPunctuationChar(firstGrapheme)) {
-                // Skip punctuation run
-                while (!next.done && isPunctuationChar(next.value.segment) && !isPasteMarker(next.value.segment)) {
-                    newCol += next.value.segment.length;
-                    next = iterator.next();
-                }
-            }
-            else {
-                // Skip word run
-                while (!next.done &&
-                    !isWhitespaceChar(next.value.segment) &&
-                    !isPunctuationChar(next.value.segment) &&
-                    !isPasteMarker(next.value.segment)) {
-                    newCol += next.value.segment.length;
-                    next = iterator.next();
-                }
-            }
-        }
-        this.setCursorCol(newCol);
+        this.setCursorCol(findWordForward(currentLine, this.state.cursorCol, {
+            segment: (text) => this.segment(text, "word"),
+            isAtomicSegment: isPasteMarker,
+        }));
     }
     // Slash menu only allowed on the first line of the editor
     isSlashMenuAllowed() {
@@ -1885,7 +1850,7 @@ export class Editor {
         }
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const isSymbolAutocompleteContext = /(?:^|[ \t])(?:@(?:"[^"]*|[^\s]*)|#[^\s]*)$/.test(textBeforeCursor);
+        const isSymbolAutocompleteContext = symbolDebouncePattern.test(textBeforeCursor);
         return isSymbolAutocompleteContext ? ATTACHMENT_AUTOCOMPLETE_DEBOUNCE_MS : 0;
     }
     async runAutocompleteRequest(requestId, controller, snapshotText, snapshotLine, snapshotCol, options) {