@oh-my-pi/pi-tui 15.5.10 → 15.5.11

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

@@ -31,6 +31,10 @@ export declare class Editor implements Component, Focusable {
     cursorOverride: string | undefined;
     /** Display width of the cursorOverride glyph (needed because override may contain ANSI escapes). */
     cursorOverrideWidth: number | undefined;
+    /** Optional hook that styles displayed input text with zero-width ANSI escapes.
+     *  MUST preserve visible width (may only add SGR codes, never glyphs). Applied per
+     *  layout line to the user-text segments — never to the cursor glyph or inline hint. */
+    decorateText: ((text: string) => string) | undefined;
     borderColor: (str: string) => string;
     onAutocompleteUpdate?: () => void;
     onSubmit?: (text: string) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "15.5.10",
+	"version": "15.5.11",
 	"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.5.10",
-		"@oh-my-pi/pi-utils": "15.5.10",
+		"@oh-my-pi/pi-natives": "15.5.11",
+		"@oh-my-pi/pi-utils": "15.5.11",
 		"lru-cache": "11.3.6",
 		"marked": "^18.0.3"
 	},

package/src/components/editor.ts

@@ -325,6 +325,10 @@ export class Editor implements Component, Focusable {
 	cursorOverride: string | undefined;
 	/** Display width of the cursorOverride glyph (needed because override may contain ANSI escapes). */
 	cursorOverrideWidth: number | undefined;
+	/** Optional hook that styles displayed input text with zero-width ANSI escapes.
+	 *  MUST preserve visible width (may only add SGR codes, never glyphs). Applied per
+	 *  layout line to the user-text segments — never to the cursor glyph or inline hint. */
+	decorateText: ((text: string) => string) | undefined;
 	#promptGutter: string | undefined;
 
 	// Store last layout width for cursor navigation
@@ -583,6 +587,13 @@ export class Editor implements Component, Focusable {
 		return Math.max(1, this.#maxHeight - verticalChrome);
 	}
 
+	/** Apply the optional input decorator to a plain (ANSI-free) text segment.
+	 *  Decoration only adds zero-width SGR codes, so visible width is unchanged. */
+	#decorate(text: string): string {
+		const decorate = this.decorateText;
+		return decorate !== undefined && text.length > 0 ? decorate(text) : text;
+	}
+
 	#getStyledInputCursor(): { text: string; width: number } {
 		const cursorChar = this.#theme.symbols.inputCursor;
 		return { text: `\x1b[5m${cursorChar}\x1b[0m`, width: visibleWidth(cursorChar) };
@@ -732,6 +743,7 @@ export class Editor implements Component, Focusable {
 			let displayText = layoutLine.text;
 			let displayWidth = visibleWidth(layoutLine.text);
 			let cursorInPadding = false;
+			let decorated = false;
 			const showPromptGutter = promptGutter !== undefined && visibleIndex === 0;
 			const gutterText =
 				promptGutter === undefined ? "" : showPromptGutter ? promptGutter.firstLine : promptGutter.continuation;
@@ -809,7 +821,11 @@ export class Editor implements Component, Focusable {
 					const firstGrapheme = afterGraphemes[0]?.segment || "";
 					const restAfter = after.slice(firstGrapheme.length);
 					const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
-					displayText = before + marker + cursor + restAfter;
+					// Decorate the plain text on each side of the cursor glyph. The reverse-video
+					// reset (\x1b[0m) ends in "m" (a word char), so a boundary match on restAfter
+					// would fail in the whole-line fallback below — decorate the segments here.
+					displayText = this.#decorate(before) + marker + cursor + this.#decorate(restAfter);
+					decorated = true;
 					// displayWidth stays the same - we're replacing, not adding
 				} else if (this.cursorOverride) {
 					// Cursor override replaces the normal end-of-text cursor glyph
@@ -856,6 +872,13 @@ export class Editor implements Component, Focusable {
 				}
 			}
 
+			// No cursor on this line, or a branch that left the user text intact: decorate the
+			// whole line. CURSOR_MARKER and cursor glyphs begin with ESC, so word boundaries
+			// around a decorated keyword stay intact when matched against the assembled line.
+			if (!decorated) {
+				displayText = this.#decorate(displayText);
+			}
+
 			const linePad = padding(Math.max(0, lineContentWidth - displayWidth));
 
 			if (!borderVisible) {