@oh-my-pi/pi-tui 15.10.4 → 15.10.5

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+## [15.10.5] - 2026-06-08
+
+### Added
+
+- Added `atomicTokenPattern` to `Editor`: when set to a global regex matching placeholder tokens such as `[Image #1, 800x600]` or `[Paste #2, +30 lines]`, a single backspace or forward-delete landing anywhere on a token removes the whole token instead of corrupting it into stray text.
+
+### Changed
+
+- Changed the large-paste placeholder label from `[paste #N +X lines]`/`[paste #N Y chars]` to `[Paste #N, +X lines]`/`[Paste #N, Y chars]`.
+
+### Fixed
+
+- Fixed pasting large text lagging the prompt for hundreds of milliseconds before the `[paste #N …]` placeholder appeared. `StdinBuffer` assembled bracketed pastes by re-concatenating and re-scanning the entire accumulated buffer on every incoming stdin chunk (`#pasteBuffer += chunk; indexOf(END)`), which is O(n²) in the paste size and dominates when the terminal/PTY delivers the paste in many small reads (SSH, tmux, slow hosts) — a 1 MB paste at 1 KB chunks cost ~33 ms and 5 MB ~740 ms. Chunks are now collected in an array and joined once when the end marker arrives, with a short overlap tail carried across chunk boundaries so a marker split between two reads is still detected without rescanning, making assembly O(n) (~1 ms for 5 MB). The `Editor` paste cleaner also dropped its `split("").filter().join("")` per-code-unit array allocation in favor of a single control-character regex pass (~20× faster on large pastes).
+
 ## [15.10.4] - 2026-06-08
 
 ### Fixed

package/dist/types/components/editor.d.ts

@@ -37,6 +37,12 @@ export declare class Editor implements Component, Focusable {
     decorateText: ((text: string) => string) | undefined;
     borderColor: (str: string) => string;
     onAutocompleteUpdate?: () => void;
+    /** Optional pattern matching atomic placeholder tokens (e.g. `[Image #1, 800x600]` or
+     *  `[Paste #2, +30 lines]`) that the editor treats as indivisible: a backspace or forward-delete
+     *  landing on any character of a token removes the whole token instead of corrupting it into
+     *  stray text. MUST be a global regex; the editor recompiles a private copy so its `lastIndex`
+     *  is never shared with the caller. */
+    atomicTokenPattern: RegExp | undefined;
     onSubmit?: (text: string) => void;
     onAltEnter?: (text: string) => void;
     onChange?: (text: string) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "15.10.4",
+	"version": "15.10.5",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "15.10.4",
-		"@oh-my-pi/pi-utils": "15.10.4",
+		"@oh-my-pi/pi-natives": "15.10.5",
+		"@oh-my-pi/pi-utils": "15.10.5",
 		"lru-cache": "11.5.1",
 		"marked": "^18.0.4"
 	},

package/src/components/editor.ts

@@ -368,6 +368,15 @@ export class Editor implements Component, Focusable {
 	#pastes: Map<number, string> = new Map();
 	#pasteCounter: number = 0;
 
+	/** Optional pattern matching atomic placeholder tokens (e.g. `[Image #1, 800x600]` or
+	 *  `[Paste #2, +30 lines]`) that the editor treats as indivisible: a backspace or forward-delete
+	 *  landing on any character of a token removes the whole token instead of corrupting it into
+	 *  stray text. MUST be a global regex; the editor recompiles a private copy so its `lastIndex`
+	 *  is never shared with the caller. */
+	atomicTokenPattern: RegExp | undefined;
+	#atomicTokenSource: string | undefined;
+	#atomicTokenRe: RegExp | undefined;
+
 	// Bracketed paste mode buffering
 	#pasteHandler = new BracketedPasteHandler();
 
@@ -1389,7 +1398,7 @@ export class Editor implements Component, Focusable {
 	#expandPasteMarkers(text: string): string {
 		let result = text;
 		for (const [pasteId, pasteContent] of this.#pastes) {
-			const markerRegex = new RegExp(`\\[paste #${pasteId}( (\\+\\d+ lines|\\d+ chars))?\\]`, "g");
+			const markerRegex = new RegExp(`\\[Paste #${pasteId}(?:, (?:\\+\\d+ lines|\\d+ chars))?\\]`, "g");
 			result = result.replace(markerRegex, () => pasteContent);
 		}
 		return result;
@@ -1627,11 +1636,10 @@ export class Editor implements Component, Focusable {
 			// Convert tabs to spaces (4 spaces per tab)
 			const tabExpandedText = cleanText.replace(/\t/g, "    ");
 
-			// Filter out non-printable characters except newlines
-			let filteredText = tabExpandedText
-				.split("")
-				.filter(char => char === "\n" || char.charCodeAt(0) >= 32)
-				.join("");
+			// Strip control characters except newline (tabs already expanded above,
+			// CRs already normalized). Single regex pass instead of split/filter/join
+			// to avoid allocating a per-code-unit array for large pastes.
+			let filteredText = tabExpandedText.replace(/[\x00-\x09\x0B-\x1F]/g, "");
 
 			// If pasting a file path (starts with /, ~, or .) and the character before
 			// the cursor is a word character, prepend a space for better readability
@@ -1654,11 +1662,11 @@ export class Editor implements Component, Focusable {
 				const pasteId = this.#pasteCounter;
 				this.#pastes.set(pasteId, filteredText);
 
-				// Insert marker like "[paste #1 +123 lines]" or "[paste #1 1234 chars]"
+				// Insert marker like "[Paste #1, +123 lines]" or "[Paste #1, 1234 chars]"
 				const marker =
 					pastedLines.length > 10
-						? `[paste #${pasteId} +${pastedLines.length} lines]`
-						: `[paste #${pasteId} ${totalChars} chars]`;
+						? `[Paste #${pasteId}, +${pastedLines.length} lines]`
+						: `[Paste #${pasteId}, ${totalChars} chars]`;
 				this.#insertTextAtCursor(marker);
 
 				return;
@@ -1727,26 +1735,72 @@ export class Editor implements Component, Focusable {
 		if (this.onSubmit) this.onSubmit(result);
 	}
 
+	/** Resolve the compiled, global copy of `atomicTokenPattern`, rebuilt only when the source changes. */
+	#getAtomicTokenRe(): RegExp | undefined {
+		const pattern = this.atomicTokenPattern;
+		if (pattern === undefined) {
+			this.#atomicTokenSource = undefined;
+			this.#atomicTokenRe = undefined;
+			return undefined;
+		}
+		if (pattern.source !== this.#atomicTokenSource) {
+			this.#atomicTokenSource = pattern.source;
+			this.#atomicTokenRe = new RegExp(
+				pattern.source,
+				pattern.flags.includes("g") ? pattern.flags : `${pattern.flags}g`,
+			);
+		}
+		return this.#atomicTokenRe;
+	}
+
+	/** Find an atomic token on `line` whose span contains column `col` (`start <= col < end`). */
+	#atomicTokenAt(line: string, col: number): { start: number; end: number } | undefined {
+		const re = this.#getAtomicTokenRe();
+		if (re === undefined) return undefined;
+		re.lastIndex = 0;
+		for (;;) {
+			const match = re.exec(line);
+			if (match === null) break;
+			if (match[0].length === 0) {
+				re.lastIndex = match.index + 1;
+				continue;
+			}
+			const start = match.index;
+			const end = start + match[0].length;
+			if (col < start) break;
+			if (col < end) return { start, end };
+		}
+		return undefined;
+	}
+
 	#handleBackspace(): void {
 		this.#historyIndex = -1; // Exit history browsing mode
 		this.#resetKillSequence();
 		this.#recordUndoState();
 
 		if (this.#state.cursorCol > 0) {
-			// Delete grapheme before cursor (handles emojis, combining characters, etc.)
 			const line = this.#state.lines[this.#state.cursorLine] || "";
-			const beforeCursor = line.slice(0, this.#state.cursorCol);
+			// An atomic placeholder token (image/paste marker) deletes as a unit, so a single
+			// backspace never leaves a half-eaten `[Paste #1, +30 lines` behind as stray text.
+			const token = this.#atomicTokenAt(line, this.#state.cursorCol - 1);
+			if (token !== undefined) {
+				this.#state.lines[this.#state.cursorLine] = line.slice(0, token.start) + line.slice(token.end);
+				this.#setCursorCol(token.start);
+			} else {
+				// Delete grapheme before cursor (handles emojis, combining characters, etc.)
+				const beforeCursor = line.slice(0, this.#state.cursorCol);
 
-			// Find the last grapheme in the text before cursor
-			const graphemes = [...segmenter.segment(beforeCursor)];
-			const lastGrapheme = graphemes[graphemes.length - 1];
-			const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
+				// Find the last grapheme in the text before cursor
+				const graphemes = [...segmenter.segment(beforeCursor)];
+				const lastGrapheme = graphemes[graphemes.length - 1];
+				const graphemeLength = lastGrapheme ? lastGrapheme.segment.length : 1;
 
-			const before = line.slice(0, this.#state.cursorCol - graphemeLength);
-			const after = line.slice(this.#state.cursorCol);
+				const before = line.slice(0, this.#state.cursorCol - graphemeLength);
+				const after = line.slice(this.#state.cursorCol);
 
-			this.#state.lines[this.#state.cursorLine] = before + after;
-			this.#setCursorCol(this.#state.cursorCol - graphemeLength);
+				this.#state.lines[this.#state.cursorLine] = before + after;
+				this.#setCursorCol(this.#state.cursorCol - graphemeLength);
+			}
 		} else if (this.#state.cursorLine > 0) {
 			// Merge with previous line
 			const currentLine = this.#state.lines[this.#state.cursorLine] || "";
@@ -2218,17 +2272,25 @@ export class Editor implements Component, Focusable {
 		const currentLine = this.#state.lines[this.#state.cursorLine] || "";
 
 		if (this.#state.cursorCol < currentLine.length) {
-			// Delete grapheme at cursor position (handles emojis, combining characters, etc.)
-			const afterCursor = currentLine.slice(this.#state.cursorCol);
+			// An atomic placeholder token (image/paste marker) deletes as a unit.
+			const token = this.#atomicTokenAt(currentLine, this.#state.cursorCol);
+			if (token !== undefined) {
+				this.#state.lines[this.#state.cursorLine] =
+					currentLine.slice(0, token.start) + currentLine.slice(token.end);
+				this.#setCursorCol(token.start);
+			} else {
+				// 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 firstGrapheme = graphemes[0];
-			const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
+				// Find the first grapheme at cursor
+				const graphemes = [...segmenter.segment(afterCursor)];
+				const firstGrapheme = graphemes[0];
+				const graphemeLength = firstGrapheme ? firstGrapheme.segment.length : 1;
 
-			const before = currentLine.slice(0, this.#state.cursorCol);
-			const after = currentLine.slice(this.#state.cursorCol + graphemeLength);
-			this.#state.lines[this.#state.cursorLine] = before + after;
+				const before = currentLine.slice(0, this.#state.cursorCol);
+				const after = currentLine.slice(this.#state.cursorCol + graphemeLength);
+				this.#state.lines[this.#state.cursorLine] = before + after;
+			}
 		} else if (this.#state.cursorLine < this.#state.lines.length - 1) {
 			// At end of line - merge with next line
 			const nextLine = this.#state.lines[this.#state.cursorLine + 1] || "";

package/src/stdin-buffer.ts

@@ -265,7 +265,8 @@ export class StdinBuffer extends EventEmitter<StdinBufferEventMap> {
 	#timeout?: NodeJS.Timeout;
 	readonly #timeoutMs: number;
 	#pasteMode: boolean = false;
-	#pasteBuffer: string = "";
+	#pasteChunks: string[] = [];
+	#pasteOverlap: string = "";
 	#pendingKittyPrintableCodepoint: number | undefined;
 
 	constructor(options: StdinBufferOptions = {}) {
@@ -302,24 +303,9 @@ export class StdinBuffer extends EventEmitter<StdinBufferEventMap> {
 		this.#buffer += str;
 
 		if (this.#pasteMode) {
-			this.#pasteBuffer += this.#buffer;
+			const chunk = this.#buffer;
 			this.#buffer = "";
-
-			const endIndex = this.#pasteBuffer.indexOf(BRACKETED_PASTE_END);
-			if (endIndex !== -1) {
-				const pastedContent = this.#pasteBuffer.slice(0, endIndex);
-				const remaining = this.#pasteBuffer.slice(endIndex + BRACKETED_PASTE_END.length);
-
-				this.#pasteMode = false;
-				this.#pasteBuffer = "";
-				this.#pendingKittyPrintableCodepoint = undefined;
-
-				this.emit("paste", pastedContent);
-
-				if (remaining.length > 0) {
-					this.process(remaining);
-				}
-			}
+			this.#consumePasteChunk(chunk);
 			return;
 		}
 
@@ -335,25 +321,12 @@ export class StdinBuffer extends EventEmitter<StdinBufferEventMap> {
 
 			this.#pendingKittyPrintableCodepoint = undefined;
 			this.#buffer = this.#buffer.slice(startIndex + BRACKETED_PASTE_START.length);
-			this.#pasteMode = true;
-			this.#pasteBuffer = this.#buffer;
+			const firstChunk = this.#buffer;
 			this.#buffer = "";
-
-			const endIndex = this.#pasteBuffer.indexOf(BRACKETED_PASTE_END);
-			if (endIndex !== -1) {
-				const pastedContent = this.#pasteBuffer.slice(0, endIndex);
-				const remaining = this.#pasteBuffer.slice(endIndex + BRACKETED_PASTE_END.length);
-
-				this.#pasteMode = false;
-				this.#pasteBuffer = "";
-				this.#pendingKittyPrintableCodepoint = undefined;
-
-				this.emit("paste", pastedContent);
-
-				if (remaining.length > 0) {
-					this.process(remaining);
-				}
-			}
+			this.#pasteMode = true;
+			this.#pasteChunks = [];
+			this.#pasteOverlap = "";
+			this.#consumePasteChunk(firstChunk);
 			return;
 		}
 
@@ -375,6 +348,42 @@ export class StdinBuffer extends EventEmitter<StdinBufferEventMap> {
 		}
 	}
 
+	/**
+	 * Consume one chunk of paste-mode input. Chunks are accumulated in an array
+	 * and only joined once the end marker arrives, so a large paste delivered in
+	 * many small terminal reads stays O(total) instead of the O(total^2) cost of
+	 * re-concatenating and rescanning the whole buffer on every chunk. A short
+	 * overlap tail (end-marker length - 1) is carried across chunk boundaries so
+	 * a marker split between two reads is still detected without rescanning.
+	 */
+	#consumePasteChunk(chunk: string): void {
+		const probe = this.#pasteOverlap + chunk;
+		if (probe.indexOf(BRACKETED_PASTE_END) === -1) {
+			this.#pasteChunks.push(chunk);
+			const keep = BRACKETED_PASTE_END.length - 1;
+			this.#pasteOverlap = probe.length > keep ? probe.slice(probe.length - keep) : probe;
+			return;
+		}
+
+		// End marker arrived: join once and split at its first occurrence,
+		// matching the prior indexOf-from-start semantics exactly.
+		const flat = this.#pasteChunks.length > 0 ? `${this.#pasteChunks.join("")}${chunk}` : chunk;
+		const endIndex = flat.indexOf(BRACKETED_PASTE_END);
+		const pastedContent = flat.slice(0, endIndex);
+		const remaining = flat.slice(endIndex + BRACKETED_PASTE_END.length);
+
+		this.#pasteMode = false;
+		this.#pasteChunks = [];
+		this.#pasteOverlap = "";
+		this.#pendingKittyPrintableCodepoint = undefined;
+
+		this.emit("paste", pastedContent);
+
+		if (remaining.length > 0) {
+			this.process(remaining);
+		}
+	}
+
 	#emitDataSequence(sequence: string): void {
 		const rawCodepoint = sequence.length === 1 ? sequence.codePointAt(0) : undefined;
 		if (rawCodepoint !== undefined && rawCodepoint === this.#pendingKittyPrintableCodepoint) {
@@ -409,7 +418,8 @@ export class StdinBuffer extends EventEmitter<StdinBufferEventMap> {
 		}
 		this.#buffer = "";
 		this.#pasteMode = false;
-		this.#pasteBuffer = "";
+		this.#pasteChunks = [];
+		this.#pasteOverlap = "";
 		this.#pendingKittyPrintableCodepoint = undefined;
 	}