@markusylisiurunen/tau 0.2.76 → 0.2.77

package/dist/tui/ui/components/editor.js

@@ -1,5 +1,7 @@
-import { getEditorKeybindings, matchesKey, SelectList, visibleWidth, } from "@mariozechner/pi-tui";
+import { decodeKittyPrintable, getEditorKeybindings, matchesKey, SelectList, truncateToWidth, visibleWidth, } from "@mariozechner/pi-tui";
 const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+const PASTE_MARKER_REGEX = /\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]/g;
+const PASTE_MARKER_SINGLE = /^\[paste #(\d+)( (\+\d+ lines|\d+ chars))?\]$/;
 const PUNCTUATION_REGEX = /[(){}[\]<>.,;:'"!?+\-=*/\\|&%^$#@~`]/;
 const CSI_PATTERN = "\\x1b\\[[0-9;]*[A-Za-z]";
 const OSC_PATTERN = "\\x1b\\][^\\x07]*(?:\\x07|\\x1b\\\\)";
@@ -13,6 +15,45 @@ function isWhitespaceChar(char) {
 function isPunctuationChar(char) {
     return PUNCTUATION_REGEX.test(char);
 }
+function isPasteMarker(segment) {
+    return segment.length >= 10 && PASTE_MARKER_SINGLE.test(segment);
+}
+function segmentWithMarkers(text, validIds) {
+    if (validIds.size === 0 || !text.includes("[paste #")) {
+        return segmenter.segment(text);
+    }
+    const markers = [];
+    for (const match of text.matchAll(PASTE_MARKER_REGEX)) {
+        const id = Number.parseInt(match[1] ?? "", 10);
+        if (!validIds.has(id))
+            continue;
+        markers.push({ start: match.index ?? 0, end: (match.index ?? 0) + match[0].length });
+    }
+    if (markers.length === 0) {
+        return segmenter.segment(text);
+    }
+    const baseSegments = segmenter.segment(text);
+    const result = [];
+    let markerIndex = 0;
+    for (const seg of baseSegments) {
+        while (markerIndex < markers.length && (markers[markerIndex]?.end ?? 0) <= seg.index) {
+            markerIndex++;
+        }
+        const marker = markerIndex < markers.length ? markers[markerIndex] : null;
+        if (marker && seg.index >= marker.start && seg.index < marker.end) {
+            if (seg.index === marker.start) {
+                result.push({
+                    segment: text.slice(marker.start, marker.end),
+                    index: marker.start,
+                    input: text,
+                });
+            }
+            continue;
+        }
+        result.push(seg);
+    }
+    return result;
+}
 function stripAnsiSequences(text) {
     if (!text.includes("\x1b"))
         return text;
@@ -25,6 +66,11 @@ function stripAnsiSequences(text) {
 function sanitizeInputText(text) {
     return text ? stripAnsiSequences(text) : text;
 }
+const SLASH_COMMAND_SELECT_LIST_LAYOUT = {
+    minPrimaryColumnWidth: 12,
+    maxPrimaryColumnWidth: 40,
+    truncatePrimary: ({ text, maxWidth }) => truncateToWidth(text, maxWidth, "…"),
+};
 /**
  * Split a line into word-wrapped chunks.
  * Wraps at word boundaries when possible, falling back to character-level
@@ -34,7 +80,7 @@ function sanitizeInputText(text) {
  * @param maxWidth - Maximum visible width per chunk
  * @returns Array of chunks with text and position information
  */
-function wordWrapLine(line, maxWidth) {
+function wordWrapLine(line, maxWidth, preSegmented) {
     if (!line || maxWidth <= 0) {
         return [{ text: "", startIndex: 0, endIndex: 0 }];
     }
@@ -43,141 +89,69 @@ function wordWrapLine(line, maxWidth) {
         return [{ text: line, startIndex: 0, endIndex: line.length }];
     }
     const chunks = [];
-    // Split into tokens (words and whitespace runs)
-    const tokens = [];
-    let currentToken = "";
-    let tokenStart = 0;
-    let inWhitespace = false;
-    let charIndex = 0;
-    for (const seg of segmenter.segment(line)) {
-        const grapheme = seg.segment;
-        const graphemeIsWhitespace = isWhitespaceChar(grapheme);
-        if (currentToken === "") {
-            inWhitespace = graphemeIsWhitespace;
-            tokenStart = charIndex;
-        }
-        else if (graphemeIsWhitespace !== inWhitespace) {
-            // Token type changed - save current token
-            tokens.push({
-                text: currentToken,
-                startIndex: tokenStart,
-                endIndex: charIndex,
-                isWhitespace: inWhitespace,
-            });
-            currentToken = "";
-            tokenStart = charIndex;
-            inWhitespace = graphemeIsWhitespace;
-        }
-        currentToken += grapheme;
-        charIndex += grapheme.length;
-    }
-    // Push final token
-    if (currentToken) {
-        tokens.push({
-            text: currentToken,
-            startIndex: tokenStart,
-            endIndex: charIndex,
-            isWhitespace: inWhitespace,
-        });
-    }
-    // Build chunks using word wrapping
-    let currentChunk = "";
+    const segments = preSegmented ?? [...segmenter.segment(line)];
     let currentWidth = 0;
-    let chunkStartIndex = 0;
-    let atLineStart = true; // Track if we're at the start of a line (for skipping whitespace)
-    for (const token of tokens) {
-        const tokenWidth = visibleWidth(token.text);
-        // Skip leading whitespace at line start
-        if (atLineStart && token.isWhitespace) {
-            chunkStartIndex = token.endIndex;
+    let chunkStart = 0;
+    let wrapOppIndex = -1;
+    let wrapOppWidth = 0;
+    for (let i = 0; i < segments.length; i++) {
+        const seg = segments[i];
+        if (!seg)
             continue;
-        }
-        atLineStart = false;
-        // If this single token is wider than maxWidth, we need to break it
-        if (tokenWidth > maxWidth) {
-            // First, push any accumulated chunk
-            if (currentChunk) {
+        const grapheme = seg.segment;
+        const graphemeWidth = visibleWidth(grapheme);
+        const charIndex = seg.index;
+        const isWhitespace = !isPasteMarker(grapheme) && isWhitespaceChar(grapheme);
+        if (currentWidth + graphemeWidth > maxWidth) {
+            if (wrapOppIndex >= 0 && currentWidth - wrapOppWidth + graphemeWidth <= maxWidth) {
                 chunks.push({
-                    text: currentChunk,
-                    startIndex: chunkStartIndex,
-                    endIndex: token.startIndex,
+                    text: line.slice(chunkStart, wrapOppIndex),
+                    startIndex: chunkStart,
+                    endIndex: wrapOppIndex,
                 });
-                currentChunk = "";
-                currentWidth = 0;
-                chunkStartIndex = token.startIndex;
-            }
-            // Break the long token by grapheme
-            let tokenChunk = "";
-            let tokenChunkWidth = 0;
-            let tokenChunkStart = token.startIndex;
-            let tokenCharIndex = token.startIndex;
-            for (const seg of segmenter.segment(token.text)) {
-                const grapheme = seg.segment;
-                const graphemeWidth = visibleWidth(grapheme);
-                if (tokenChunkWidth + graphemeWidth > maxWidth && tokenChunk) {
-                    chunks.push({
-                        text: tokenChunk,
-                        startIndex: tokenChunkStart,
-                        endIndex: tokenCharIndex,
-                    });
-                    tokenChunk = grapheme;
-                    tokenChunkWidth = graphemeWidth;
-                    tokenChunkStart = tokenCharIndex;
-                }
-                else {
-                    tokenChunk += grapheme;
-                    tokenChunkWidth += graphemeWidth;
-                }
-                tokenCharIndex += grapheme.length;
+                chunkStart = wrapOppIndex;
+                currentWidth -= wrapOppWidth;
             }
-            // Keep remainder as start of next chunk
-            if (tokenChunk) {
-                currentChunk = tokenChunk;
-                currentWidth = tokenChunkWidth;
-                chunkStartIndex = tokenChunkStart;
-            }
-            continue;
-        }
-        // Check if adding this token would exceed width
-        if (currentWidth + tokenWidth > maxWidth) {
-            // Push current chunk (trimming trailing whitespace for display)
-            const trimmedChunk = currentChunk.trimEnd();
-            if (trimmedChunk || chunks.length === 0) {
+            else if (chunkStart < charIndex) {
                 chunks.push({
-                    text: trimmedChunk,
-                    startIndex: chunkStartIndex,
-                    endIndex: chunkStartIndex + currentChunk.length,
+                    text: line.slice(chunkStart, charIndex),
+                    startIndex: chunkStart,
+                    endIndex: charIndex,
                 });
-            }
-            // Start new line - skip leading whitespace
-            atLineStart = true;
-            if (token.isWhitespace) {
-                currentChunk = "";
+                chunkStart = charIndex;
                 currentWidth = 0;
-                chunkStartIndex = token.endIndex;
             }
-            else {
-                currentChunk = token.text;
-                currentWidth = tokenWidth;
-                chunkStartIndex = token.startIndex;
-                atLineStart = false;
+            wrapOppIndex = -1;
+        }
+        if (graphemeWidth > maxWidth) {
+            const subChunks = wordWrapLine(grapheme, maxWidth);
+            for (let j = 0; j < subChunks.length - 1; j++) {
+                const subChunk = subChunks[j];
+                if (!subChunk)
+                    continue;
+                chunks.push({
+                    text: subChunk.text,
+                    startIndex: charIndex + subChunk.startIndex,
+                    endIndex: charIndex + subChunk.endIndex,
+                });
+            }
+            const lastSubChunk = subChunks[subChunks.length - 1];
+            if (lastSubChunk) {
+                chunkStart = charIndex + lastSubChunk.startIndex;
+                currentWidth = visibleWidth(lastSubChunk.text);
             }
+            wrapOppIndex = -1;
+            continue;
         }
-        else {
-            // Add token to current chunk
-            currentChunk += token.text;
-            currentWidth += tokenWidth;
+        currentWidth += graphemeWidth;
+        const next = segments[i + 1];
+        if (isWhitespace && next && (isPasteMarker(next.segment) || !isWhitespaceChar(next.segment))) {
+            wrapOppIndex = next.index;
+            wrapOppWidth = currentWidth;
         }
     }
-    // Push final chunk
-    if (currentChunk) {
-        chunks.push({
-            text: currentChunk,
-            startIndex: chunkStartIndex,
-            endIndex: line.length,
-        });
-    }
-    return chunks.length > 0 ? chunks : [{ text: "", startIndex: 0, endIndex: 0 }];
+    chunks.push({ text: line.slice(chunkStart), startIndex: chunkStart, endIndex: line.length });
+    return chunks;
 }
 export class Editor {
     state = {
@@ -193,7 +167,7 @@ export class Editor {
     // Autocomplete support
     autocompleteProvider;
     autocompleteList;
-    isAutocompleting = false;
+    autocompleteState = null;
     autocompletePrefix = "";
     // Paste tracking for large pastes
     pastes = new Map();
@@ -211,6 +185,15 @@ export class Editor {
         this.theme = theme;
         this.borderColor = theme.borderColor;
     }
+    validPasteIds() {
+        return new Set(this.pastes.keys());
+    }
+    segment(text) {
+        return segmentWithMarkers(text, this.validPasteIds());
+    }
+    normalizeText(text) {
+        return text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\t/g, "    ");
+    }
     /** Wraps text in cursor styling (inverse video). Override in subclasses for theme-aware cursor. */
     cursorStyle(text) {
         return `\x1b[7m${text}\x1b[0m`;
@@ -300,11 +283,11 @@ export class Editor {
                 const after = displayText.slice(layoutLine.cursorPos);
                 if (after.length > 0) {
                     // Cursor is on a character (grapheme) - replace it with highlighted version
-                    // Get the first grapheme from 'after'
-                    const afterGraphemes = [...segmenter.segment(after)];
-                    const firstGrapheme = afterGraphemes[0]?.segment || "";
-                    const restAfter = after.slice(firstGrapheme.length);
-                    displayText = before + this.cursorStyle(firstGrapheme) + restAfter;
+                    // Get the first segment from 'after'
+                    const afterSegments = [...this.segment(after)];
+                    const firstSegment = afterSegments[0]?.segment || "";
+                    const restAfter = after.slice(firstSegment.length);
+                    displayText = before + this.cursorStyle(firstSegment) + restAfter;
                     // lineVisibleWidth stays the same - we're replacing, not adding
                 }
                 else {
@@ -316,17 +299,17 @@ export class Editor {
                         lineVisibleWidth = lineVisibleWidth + 1;
                     }
                     else {
-                        // Line is at full width - use reverse video on last grapheme if possible
+                        // Line is at full width - use reverse video on last segment if possible
                         // or just show cursor at the end without adding space
-                        const beforeGraphemes = [...segmenter.segment(before)];
-                        if (beforeGraphemes.length > 0) {
-                            const lastGrapheme = beforeGraphemes[beforeGraphemes.length - 1]?.segment || "";
-                            // Rebuild 'before' without the last grapheme
-                            const beforeWithoutLast = beforeGraphemes
+                        const beforeSegments = [...this.segment(before)];
+                        if (beforeSegments.length > 0) {
+                            const lastSegment = beforeSegments[beforeSegments.length - 1]?.segment || "";
+                            // Rebuild 'before' without the last segment
+                            const beforeWithoutLast = beforeSegments
                                 .slice(0, -1)
                                 .map((g) => g.segment)
                                 .join("");
-                            displayText = beforeWithoutLast + this.cursorStyle(lastGrapheme);
+                            displayText = beforeWithoutLast + this.cursorStyle(lastSegment);
                         }
                         // lineVisibleWidth stays the same
                     }
@@ -340,7 +323,7 @@ export class Editor {
         // Render bottom border
         result.push(horizontal.repeat(width));
         // Add autocomplete list if active
-        if (this.isAutocompleting && this.autocompleteList) {
+        if (this.autocompleteState && this.autocompleteList) {
             const autocompleteResult = this.autocompleteList.render(width);
             result.push(...autocompleteResult);
         }
@@ -381,7 +364,7 @@ export class Editor {
             return;
         }
         // Handle autocomplete mode
-        if (this.isAutocompleting && this.autocompleteList) {
+        if (this.autocompleteState && this.autocompleteList) {
             if (kb.matches(data, "selectCancel")) {
                 this.cancelAutocomplete();
                 return;
@@ -434,7 +417,7 @@ export class Editor {
             }
         }
         // Tab - trigger completion
-        if (kb.matches(data, "tab") && !this.isAutocompleting) {
+        if (kb.matches(data, "tab") && !this.autocompleteState) {
             this.handleTabCompletion();
             return;
         }
@@ -538,6 +521,11 @@ export class Editor {
             this.insertCharacter(" ");
             return;
         }
+        const kittyPrintable = decodeKittyPrintable(data);
+        if (kittyPrintable !== undefined) {
+            this.insertCharacter(kittyPrintable);
+            return;
+        }
         // Regular characters
         if (data.charCodeAt(0) >= 32) {
             this.insertCharacter(data);
@@ -578,7 +566,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, contentWidth);
+                const chunks = wordWrapLine(line, contentWidth, [...this.segment(line)]);
                 for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
                     const chunk = chunks[chunkIndex];
                     if (!chunk)
@@ -660,8 +648,40 @@ export class Editor {
      * Used for programmatic insertion (e.g., clipboard image markers).
      */
     insertTextAtCursor(text) {
-        for (const char of text) {
-            this.insertCharacter(char);
+        this.insertTextAtCursorInternal(text);
+    }
+    insertTextAtCursorInternal(text) {
+        if (!text)
+            return;
+        const sanitized = sanitizeInputText(text);
+        if (!sanitized)
+            return;
+        this.historyIndex = -1;
+        const normalized = this.normalizeText(sanitized);
+        const insertedLines = normalized.split("\n");
+        const currentLine = this.state.lines[this.state.cursorLine] || "";
+        const beforeCursor = currentLine.slice(0, this.state.cursorCol);
+        const afterCursor = currentLine.slice(this.state.cursorCol);
+        if (insertedLines.length === 1) {
+            this.state.lines[this.state.cursorLine] = beforeCursor + normalized + afterCursor;
+            this.state.cursorCol += normalized.length;
+        }
+        else {
+            this.state.lines = [
+                ...this.state.lines.slice(0, this.state.cursorLine),
+                beforeCursor + (insertedLines[0] || ""),
+                ...insertedLines.slice(1, -1),
+                (insertedLines[insertedLines.length - 1] || "") + afterCursor,
+                ...this.state.lines.slice(this.state.cursorLine + 1),
+            ];
+            this.state.cursorLine += insertedLines.length - 1;
+            this.state.cursorCol = (insertedLines[insertedLines.length - 1] || "").length;
+        }
+        if (this.onChange) {
+            this.onChange(this.getText());
+        }
+        if (this.autocompleteState) {
+            this.updateAutocomplete();
         }
     }
     // All the editor methods from before...
@@ -679,7 +699,7 @@ export class Editor {
             this.onChange(this.getText());
         }
         // Check if we should trigger or update autocomplete
-        if (!this.isAutocompleting) {
+        if (!this.autocompleteState) {
             // Auto-trigger for "/" at the start of a line (slash commands)
             if (sanitized === "/" && this.isAtStartOfMessage()) {
                 this.tryTriggerAutocomplete();
@@ -698,11 +718,9 @@ export class Editor {
             else if (/[a-zA-Z0-9.\-_]/.test(sanitized)) {
                 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)
-                if (textBeforeCursor.trimStart().startsWith("/")) {
+                if (this.isInSlashCommandContext(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
-                // Check if we're in an @ mention context
                 else if (this.isMentionAutocompleteContext(textBeforeCursor)) {
                     this.tryTriggerAutocomplete();
                 }
@@ -716,11 +734,9 @@ export class Editor {
         this.historyIndex = -1; // Exit history browsing mode
         // Clean the pasted text
         const sanitizedText = sanitizeInputText(pastedText);
-        const cleanText = sanitizedText.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-        // Convert tabs to spaces (4 spaces per tab)
-        const tabExpandedText = cleanText.replace(/\t/g, "    ");
+        const cleanText = this.normalizeText(sanitizedText);
         // Filter out non-printable characters except newlines
-        let filteredText = tabExpandedText
+        let filteredText = cleanText
             .split("")
             .filter((char) => char === "\n" || char.charCodeAt(0) >= 32)
             .join("");
@@ -746,50 +762,10 @@ export class Editor {
             const marker = pastedLines.length > 32
                 ? `[paste #${pasteId} +${pastedLines.length} lines]`
                 : `[paste #${pasteId} ${totalChars} chars]`;
-            for (const char of marker) {
-                this.insertCharacter(char);
-            }
-            return;
-        }
-        if (pastedLines.length === 1) {
-            // Single line - just insert each character
-            const text = pastedLines[0] || "";
-            for (const char of text) {
-                this.insertCharacter(char);
-            }
+            this.insertTextAtCursorInternal(marker);
             return;
         }
-        // Multi-line paste - be very careful with array manipulation
-        const currentLine = this.state.lines[this.state.cursorLine] || "";
-        const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const afterCursor = currentLine.slice(this.state.cursorCol);
-        // Build the new lines array step by step
-        const newLines = [];
-        // Add all lines before current line
-        for (let i = 0; i < this.state.cursorLine; i++) {
-            newLines.push(this.state.lines[i] || "");
-        }
-        // Add the first pasted line merged with before cursor text
-        newLines.push(beforeCursor + (pastedLines[0] || ""));
-        // Add all middle pasted lines
-        for (let i = 1; i < pastedLines.length - 1; i++) {
-            newLines.push(pastedLines[i] || "");
-        }
-        // Add the last pasted line with after cursor text
-        newLines.push((pastedLines[pastedLines.length - 1] || "") + afterCursor);
-        // Add all lines after current line
-        for (let i = this.state.cursorLine + 1; i < this.state.lines.length; i++) {
-            newLines.push(this.state.lines[i] || "");
-        }
-        // Replace the entire lines array
-        this.state.lines = newLines;
-        // Update cursor position to end of pasted content
-        this.state.cursorLine += pastedLines.length - 1;
-        this.state.cursorCol = (pastedLines[pastedLines.length - 1] || "").length;
-        // Notify of change
-        if (this.onChange) {
-            this.onChange(this.getText());
-        }
+        this.insertTextAtCursorInternal(filteredText);
     }
     addNewLine() {
         this.historyIndex = -1; // Exit history browsing mode
@@ -813,7 +789,7 @@ export class Editor {
             const 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 = [...segmenter.segment(beforeCursor)];
+            const graphemes = [...this.segment(beforeCursor)];
             const lastGrapheme = graphemes[graphemes.length - 1];
             const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
             const before = line.slice(0, this.state.cursorCol - graphemeLength);
@@ -834,18 +810,16 @@ export class Editor {
             this.onChange(this.getText());
         }
         // Update or re-trigger autocomplete after backspace
-        if (this.isAutocompleting) {
+        if (this.autocompleteState) {
             this.updateAutocomplete();
         }
         else {
             // If autocomplete was cancelled (no matches), re-trigger if we're in a completable context
             const currentLine = this.state.lines[this.state.cursorLine] || "";
             const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-            // Slash command context
-            if (textBeforeCursor.trimStart().startsWith("/")) {
+            if (this.isInSlashCommandContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
-            // @ mention context
             else if (this.isMentionAutocompleteContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
@@ -928,7 +902,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 = [...segmenter.segment(afterCursor)];
+            const graphemes = [...this.segment(afterCursor)];
             const firstGrapheme = graphemes[0];
             const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
             const before = currentLine.slice(0, this.state.cursorCol);
@@ -945,17 +919,15 @@ export class Editor {
             this.onChange(this.getText());
         }
         // Update or re-trigger autocomplete after forward delete
-        if (this.isAutocompleting) {
+        if (this.autocompleteState) {
             this.updateAutocomplete();
         }
         else {
             const currentLine = this.state.lines[this.state.cursorLine] || "";
             const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-            // Slash command context
-            if (textBeforeCursor.trimStart().startsWith("/")) {
+            if (this.isInSlashCommandContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
-            // @ mention context
             else if (this.isMentionAutocompleteContext(textBeforeCursor)) {
                 this.tryTriggerAutocomplete();
             }
@@ -982,7 +954,7 @@ export class Editor {
             }
             else {
                 // Line needs wrapping - use word-aware wrapping
-                const chunks = wordWrapLine(line, width);
+                const chunks = wordWrapLine(line, width, [...this.segment(line)]);
                 for (const chunk of chunks) {
                     visualLines.push({
                         logicalLine: i,
@@ -1016,6 +988,18 @@ export class Editor {
         // Fallback: return last visual line
         return visualLines.length - 1;
     }
+    snapCursorToSegmentBoundary(logicalLine, movingUp) {
+        for (const seg of this.segment(logicalLine)) {
+            if (seg.index > this.state.cursorCol)
+                break;
+            if (seg.segment.length <= 1)
+                continue;
+            if (this.state.cursorCol < seg.index + seg.segment.length) {
+                this.state.cursorCol = movingUp ? seg.index : seg.index + seg.segment.length;
+                break;
+            }
+        }
+    }
     moveCursor(deltaLine, deltaCol) {
         const width = this.lastWidth;
         if (deltaLine !== 0) {
@@ -1035,6 +1019,7 @@ export class Editor {
                     const targetCol = targetVL.startCol + Math.min(visualCol, targetVL.length);
                     const logicalLine = this.state.lines[targetVL.logicalLine] || "";
                     this.state.cursorCol = Math.min(targetCol, logicalLine.length);
+                    this.snapCursorToSegmentBoundary(logicalLine, deltaLine < 0);
                 }
             }
         }
@@ -1044,7 +1029,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 = [...segmenter.segment(afterCursor)];
+                    const graphemes = [...this.segment(afterCursor)];
                     const firstGrapheme = graphemes[0];
                     this.state.cursorCol += firstGrapheme ? firstGrapheme.segment.length : 1;
                 }
@@ -1058,7 +1043,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 = [...segmenter.segment(beforeCursor)];
+                    const graphemes = [...this.segment(beforeCursor)];
                     const lastGrapheme = graphemes[graphemes.length - 1];
                     this.state.cursorCol -= lastGrapheme ? lastGrapheme.segment.length : 1;
                 }
@@ -1083,19 +1068,24 @@ export class Editor {
             return;
         }
         const textBeforeCursor = currentLine.slice(0, this.state.cursorCol);
-        const graphemes = [...segmenter.segment(textBeforeCursor)];
+        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 (isPunctuationChar(lastGrapheme)) {
+            if (isPasteMarker(lastGrapheme)) {
+                newCol -= graphemes.pop()?.segment.length || 0;
+            }
+            else if (isPunctuationChar(lastGrapheme)) {
                 // Skip punctuation run
                 while (graphemes.length > 0 &&
-                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1103,7 +1093,8 @@ export class Editor {
                 // Skip word run
                 while (graphemes.length > 0 &&
                     !isWhitespaceChar(graphemes[graphemes.length - 1]?.segment || "") &&
-                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "")) {
+                    !isPunctuationChar(graphemes[graphemes.length - 1]?.segment || "") &&
+                    !isPasteMarker(graphemes[graphemes.length - 1]?.segment || "")) {
                     newCol -= graphemes.pop()?.segment.length || 0;
                 }
             }
@@ -1121,20 +1112,28 @@ export class Editor {
             return;
         }
         const textAfterCursor = currentLine.slice(this.state.cursorCol);
-        const segments = segmenter.segment(textAfterCursor);
+        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 && isWhitespaceChar(next.value.segment)) {
-            this.state.cursorCol += next.value.segment.length;
+        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 (isPunctuationChar(firstGrapheme)) {
+            if (isPasteMarker(firstGrapheme)) {
+                newCol += firstGrapheme.length;
+            }
+            else if (isPunctuationChar(firstGrapheme)) {
                 // Skip punctuation run
-                while (!next.done && isPunctuationChar(next.value.segment)) {
-                    this.state.cursorCol += next.value.segment.length;
+                while (!next.done &&
+                    isPunctuationChar(next.value.segment) &&
+                    !isPasteMarker(next.value.segment)) {
+                    newCol += next.value.segment.length;
                     next = iterator.next();
                 }
             }
@@ -1142,20 +1141,29 @@ export class Editor {
                 // Skip word run
                 while (!next.done &&
                     !isWhitespaceChar(next.value.segment) &&
-                    !isPunctuationChar(next.value.segment)) {
-                    this.state.cursorCol += next.value.segment.length;
+                    !isPunctuationChar(next.value.segment) &&
+                    !isPasteMarker(next.value.segment)) {
+                    newCol += next.value.segment.length;
                     next = iterator.next();
                 }
             }
         }
+        this.state.cursorCol = newCol;
+    }
+    isSlashMenuAllowed() {
+        return this.state.lines.length === 1 && this.state.cursorLine === 0;
     }
     // Helper method to check if cursor is at start of message (for slash command detection)
     isAtStartOfMessage() {
+        if (!this.isSlashMenuAllowed())
+            return false;
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-        // At start if line is empty, only contains whitespace, or is just "/"
         return beforeCursor.trim() === "" || beforeCursor.trim() === "/";
     }
+    isInSlashCommandContext(textBeforeCursor) {
+        return this.isSlashMenuAllowed() && textBeforeCursor.trimStart().startsWith("/");
+    }
     isMentionAutocompleteContext(textBeforeCursor) {
         return /(?:^|[\s])@[^\s]*$/.test(textBeforeCursor);
     }
@@ -1164,11 +1172,44 @@ export class Editor {
         const beforeCursor = line.slice(0, cursorCol);
         return /(?:^|[\s])@@[a-z-]+:$/.test(beforeCursor);
     }
+    getAutocompleteMatchPrefix(prefix) {
+        if (prefix.startsWith("@@")) {
+            const mentionMatch = prefix.match(/^@@[^:\s]+:(.*)$/);
+            return mentionMatch ? (mentionMatch[1] ?? "") : prefix.slice(2);
+        }
+        if (prefix.startsWith("@") || prefix.startsWith("/")) {
+            return prefix.slice(1);
+        }
+        return prefix;
+    }
+    getBestAutocompleteMatchIndex(items, prefix) {
+        const matchPrefix = this.getAutocompleteMatchPrefix(prefix);
+        if (!matchPrefix)
+            return -1;
+        let firstPrefixIndex = -1;
+        for (let i = 0; i < items.length; i++) {
+            const value = items[i]?.value;
+            if (!value)
+                continue;
+            if (value === matchPrefix) {
+                return i;
+            }
+            if (firstPrefixIndex === -1 && value.startsWith(matchPrefix)) {
+                firstPrefixIndex = i;
+            }
+        }
+        return firstPrefixIndex;
+    }
+    createAutocompleteList(prefix, items) {
+        const layout = this.isInSlashCommandContext(prefix)
+            ? SLASH_COMMAND_SELECT_LIST_LAYOUT
+            : undefined;
+        return new SelectList(items, 5, this.theme.selectList, layout);
+    }
     // Autocomplete methods
     tryTriggerAutocomplete(explicitTab = false) {
         if (!this.autocompleteProvider)
             return;
-        // Check if we should trigger file completion on Tab
         if (explicitTab) {
             const provider = this.autocompleteProvider;
             const shouldTrigger = !provider.shouldTriggerFileCompletion ||
@@ -1180,8 +1221,12 @@ export class Editor {
         const suggestions = this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
         if (suggestions && suggestions.items.length > 0) {
             this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
-            this.isAutocompleting = true;
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
+            const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
+            if (bestMatchIndex >= 0) {
+                this.autocompleteList.setSelectedIndex(bestMatchIndex);
+            }
+            this.autocompleteState = "regular";
         }
         else {
             this.cancelAutocomplete();
@@ -1192,12 +1237,11 @@ export class Editor {
             return;
         const currentLine = this.state.lines[this.state.cursorLine] || "";
         const beforeCursor = currentLine.slice(0, this.state.cursorCol);
-        // Check if we're in a slash command context
-        if (beforeCursor.trimStart().startsWith("/") && !beforeCursor.trimStart().includes(" ")) {
+        if (this.isInSlashCommandContext(beforeCursor) && !beforeCursor.trimStart().includes(" ")) {
             this.handleSlashCommandCompletion();
         }
         else {
-            this.forceFileAutocomplete();
+            this.forceFileAutocomplete(true);
         }
     }
     handleSlashCommandCompletion() {
@@ -1208,10 +1252,9 @@ export class Editor {
   17 this job fails with https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19
   536643416/job/55932288317 havea  look at .gi
        */
-    forceFileAutocomplete() {
+    forceFileAutocomplete(explicitTab = false) {
         if (!this.autocompleteProvider)
             return;
-        // Check if provider supports force file suggestions via runtime check
         const provider = this.autocompleteProvider;
         if (typeof provider.getForceFileSuggestions !== "function") {
             this.tryTriggerAutocomplete(true);
@@ -1219,30 +1262,55 @@ export class Editor {
         }
         const suggestions = provider.getForceFileSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
         if (suggestions && suggestions.items.length > 0) {
+            if (explicitTab && suggestions.items.length === 1) {
+                const item = suggestions.items[0];
+                if (!item) {
+                    this.cancelAutocomplete();
+                    return;
+                }
+                const result = this.autocompleteProvider.applyCompletion(this.state.lines, this.state.cursorLine, this.state.cursorCol, item, suggestions.prefix);
+                this.state.lines = result.lines;
+                this.state.cursorLine = result.cursorLine;
+                this.state.cursorCol = result.cursorCol;
+                if (this.onChange)
+                    this.onChange(this.getText());
+                return;
+            }
             this.autocompletePrefix = suggestions.prefix;
-            this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
-            this.isAutocompleting = true;
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
+            const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
+            if (bestMatchIndex >= 0) {
+                this.autocompleteList.setSelectedIndex(bestMatchIndex);
+            }
+            this.autocompleteState = "force";
         }
         else {
             this.cancelAutocomplete();
         }
     }
     cancelAutocomplete() {
-        this.isAutocompleting = false;
+        this.autocompleteState = null;
         this.autocompleteList = undefined;
         this.autocompletePrefix = "";
     }
     isShowingAutocomplete() {
-        return this.isAutocompleting;
+        return this.autocompleteState !== null;
     }
     updateAutocomplete() {
-        if (!this.isAutocompleting || !this.autocompleteProvider)
+        if (!this.autocompleteState || !this.autocompleteProvider)
+            return;
+        if (this.autocompleteState === "force") {
+            this.forceFileAutocomplete();
             return;
+        }
         const suggestions = this.autocompleteProvider.getSuggestions(this.state.lines, this.state.cursorLine, this.state.cursorCol);
         if (suggestions && suggestions.items.length > 0) {
             this.autocompletePrefix = suggestions.prefix;
-            // Always create new SelectList to ensure update
-            this.autocompleteList = new SelectList(suggestions.items, 5, this.theme.selectList);
+            this.autocompleteList = this.createAutocompleteList(suggestions.prefix, suggestions.items);
+            const bestMatchIndex = this.getBestAutocompleteMatchIndex(suggestions.items, suggestions.prefix);
+            if (bestMatchIndex >= 0) {
+                this.autocompleteList.setSelectedIndex(bestMatchIndex);
+            }
         }
         else {
             this.cancelAutocomplete();