@oh-my-pi/pi-tui 17.0.8 → 17.1.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## [Unreleased]
 
+## [17.1.0] - 2026-07-24
+
+### Added
+
+- Added Text.setStyleFn() to apply foreground stylers at render time, allowing components to dynamically re-resolve colors after invalidation instead of baking in the palette active at construction.
+
+### Fixed
+
+- Fixed an issue where exiting or tearing down the TUI left the terminal in cursor-key/keypad application mode (DECCKM), which broke arrow keys in the parent shell. Both stop() and emergencyTerminalRestore() now correctly emit standard rmkx resets.
+
+## [17.0.9] - 2026-07-23
+
+### Added
+
+- Added `SelectList.setMaxVisible()` so hosts can refit the visible row budget to available height after construction.
+
 ## [17.0.8] - 2026-07-22
 
 ### Fixed

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

@@ -6,6 +6,8 @@ export declare class Input implements Component, Focusable {
     #private;
     /** Rendered before the editable area; set to "" for chrome-less embedding. */
     prompt: string;
+    /** Render the editable value as bullets while retaining the real value internally. */
+    mask: boolean;
     onSubmit?: (value: string) => void;
     onEscape?: () => void;
     /** Focusable interface - set by TUI when focus changes */

package/dist/types/components/select-list.d.ts

@@ -43,13 +43,14 @@ export interface SelectListLayoutOptions {
 export declare class SelectList implements Component, MouseRoutable {
     #private;
     private readonly items;
-    private readonly maxVisible;
     private readonly theme;
     private readonly layout;
     onSelect?: (item: SelectItem) => void;
     onCancel?: () => void;
     onSelectionChange?: (item: SelectItem) => void;
     constructor(items: ReadonlyArray<SelectItem>, maxVisible: number, theme: SelectListTheme, layout?: SelectListLayoutOptions);
+    /** Refit the visible row budget (hosts clamp the list to available height). */
+    setMaxVisible(rows: number): void;
     setFilter(filter: string): void;
     setSelectedIndex(index: number): void;
     /** Resolve a 0-based rendered-line index to a filtered-item index. */

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

@@ -1,6 +1,12 @@
 import type { Component } from "../tui.js";
 /**
- * Text component - displays multi-line text with word wrapping
+ * Text component - displays multi-line text with word wrapping.
+ *
+ * Foreground colors may be supplied lazily via {@link setStyleFn} instead of
+ * baked into `text`: the styler runs at render time, so a caller that
+ * invalidates the component on a theme change (see the coding-agent's
+ * `onThemeChange` handler) re-resolves the color against the now-active theme
+ * rather than replaying the palette active when the component was constructed.
  */
 export declare class Text implements Component {
     #private;
@@ -9,6 +15,13 @@ export declare class Text implements Component {
     getText(): string;
     setText(text: string): boolean;
     setCustomBgFn(customBgFn?: (text: string) => string): void;
+    /**
+     * Supply a foreground styler applied to the text at render time (e.g. a
+     * theme color resolver). Unlike baking the color into `text`, the styler
+     * re-runs on every render, so invalidating the component after a theme
+     * change re-resolves the color against the active theme.
+     */
+    setStyleFn(styleFn?: (text: string) => string): this;
     invalidate(): void;
     render(width: number): readonly string[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "17.0.8",
+	"version": "17.1.0",
 	"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": "17.0.8",
-		"@oh-my-pi/pi-utils": "17.0.8",
+		"@oh-my-pi/pi-natives": "17.1.0",
+		"@oh-my-pi/pi-utils": "17.1.0",
 		"lru-cache": "11.5.2",
 		"marked": "^18.0.6"
 	},

package/src/components/input.ts

@@ -30,6 +30,8 @@ export class Input implements Component, Focusable {
 	#useTerminalCursor = false;
 	/** Rendered before the editable area; set to "" for chrome-less embedding. */
 	prompt = "> ";
+	/** Render the editable value as bullets while retaining the real value internally. */
+	mask = false;
 	onSubmit?: (value: string) => void;
 	onEscape?: () => void;
 
@@ -415,9 +417,15 @@ export class Input implements Component, Focusable {
 			return [prompt];
 		}
 
-		const cursorIndex = this.#cursor;
+		let cursorIndex = this.#cursor;
 		// Ensure we always have a grapheme to invert at the cursor (space at end).
-		const displayValue = cursorIndex >= this.#value.length ? `${this.#value} ` : this.#value;
+		let visibleValue = this.#value;
+		if (this.mask) {
+			const graphemes = [...segmenter.segment(this.#value)];
+			visibleValue = "•".repeat(graphemes.length);
+			cursorIndex = graphemes.filter(grapheme => grapheme.index < this.#cursor).length;
+		}
+		const displayValue = this.#cursor >= this.#value.length ? `${visibleValue} ` : visibleValue;
 
 		const totalCols = visibleWidth(displayValue);
 		const cursorCols = visibleWidth(displayValue.slice(0, cursorIndex));

package/src/components/select-list.ts

@@ -84,6 +84,7 @@ type SelectItemLayout =
 	  };
 
 export class SelectList implements Component, MouseRoutable {
+	#maxVisible: number;
 	#filteredItems: ReadonlyArray<SelectItem>;
 	#filterQuery = "";
 	#selectedIndex: number = 0;
@@ -97,13 +98,19 @@ export class SelectList implements Component, MouseRoutable {
 
 	constructor(
 		private readonly items: ReadonlyArray<SelectItem>,
-		private readonly maxVisible: number,
+		maxVisible: number,
 		private readonly theme: SelectListTheme,
 		private readonly layout: SelectListLayoutOptions = {},
 	) {
+		this.#maxVisible = Math.max(1, Math.trunc(maxVisible));
 		this.#filteredItems = items;
 	}
 
+	/** Refit the visible row budget (hosts clamp the list to available height). */
+	setMaxVisible(rows: number): void {
+		this.#maxVisible = Math.max(1, Math.trunc(rows));
+	}
+
 	setFilter(filter: string): void {
 		this.#setFilter(filter, true);
 	}
@@ -168,7 +175,7 @@ export class SelectList implements Component, MouseRoutable {
 		const wrapEnabled = this.layout.wrapDescription === true;
 		// `maxVisible` is the picker's visual row budget. For non-wrap layouts
 		// every item is one row, so the budget matches the original item count.
-		const visualBudget = this.maxVisible;
+		const visualBudget = this.#maxVisible;
 
 		// Compute per-item visual row counts at the conservative width (i.e.
 		// assume the scrollbar column might be reserved). For non-wrap layouts
@@ -256,12 +263,12 @@ export class SelectList implements Component, MouseRoutable {
 		}
 		// PageUp - jump up by one visible page
 		else if (kb.matches(keyData, "tui.select.pageUp")) {
-			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.maxVisible);
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.#maxVisible);
 			this.#notifySelectionChange();
 		}
 		// PageDown - jump down by one visible page
 		else if (kb.matches(keyData, "tui.select.pageDown")) {
-			this.#selectedIndex = Math.min(this.#filteredItems.length - 1, this.#selectedIndex + this.maxVisible);
+			this.#selectedIndex = Math.min(this.#filteredItems.length - 1, this.#selectedIndex + this.#maxVisible);
 			this.#notifySelectionChange();
 		}
 		// Enter
@@ -459,12 +466,12 @@ export class SelectList implements Component, MouseRoutable {
 
 	#shouldRenderSearchStatus(): boolean {
 		return (
-			this.layout.overflowSearch !== false && (this.items.length > this.maxVisible || this.#filterQuery.length > 0)
+			this.layout.overflowSearch !== false && (this.items.length > this.#maxVisible || this.#filterQuery.length > 0)
 		);
 	}
 
 	#canEditSearch(): boolean {
-		return this.layout.overflowSearch !== false && this.items.length > this.maxVisible;
+		return this.layout.overflowSearch !== false && this.items.length > this.#maxVisible;
 	}
 
 	#handleSearchInput(keyData: string): boolean {

package/src/components/text.ts

@@ -11,13 +11,20 @@ import {
 } from "../utils";
 
 /**
- * Text component - displays multi-line text with word wrapping
+ * Text component - displays multi-line text with word wrapping.
+ *
+ * Foreground colors may be supplied lazily via {@link setStyleFn} instead of
+ * baked into `text`: the styler runs at render time, so a caller that
+ * invalidates the component on a theme change (see the coding-agent's
+ * `onThemeChange` handler) re-resolves the color against the now-active theme
+ * rather than replaying the palette active when the component was constructed.
  */
 export class Text implements Component {
 	#text: string;
 	#paddingX: number; // Left/right padding
 	#paddingY: number; // Top/bottom padding
 	#customBgFn?: (text: string) => string;
+	#styleFn?: (text: string) => string;
 
 	#ignoreTight = false;
 
@@ -64,6 +71,21 @@ export class Text implements Component {
 		this.#cachedLines = undefined;
 	}
 
+	/**
+	 * Supply a foreground styler applied to the text at render time (e.g. a
+	 * theme color resolver). Unlike baking the color into `text`, the styler
+	 * re-runs on every render, so invalidating the component after a theme
+	 * change re-resolves the color against the active theme.
+	 */
+	setStyleFn(styleFn?: (text: string) => string): this {
+		this.#styleFn = styleFn;
+		this.#cachedText = undefined;
+		this.#cachedWidth = undefined;
+		this.#cachedWidthEpoch = undefined;
+		this.#cachedLines = undefined;
+		return this;
+	}
+
 	invalidate(): void {
 		this.#cachedText = undefined;
 		this.#cachedWidth = undefined;
@@ -93,7 +115,7 @@ export class Text implements Component {
 		}
 
 		// Replace tabs with 3 spaces
-		const normalizedText = replaceTabs(this.#text);
+		const normalizedText = replaceTabs(this.#styleFn ? this.#styleFn(this.#text) : this.#text);
 
 		// Calculate content width (subtract left/right margins)
 		const paddingX = this.#ignoreTight ? this.#paddingX : getPaddingX(this.#paddingX);

package/src/terminal.ts

@@ -312,6 +312,7 @@ export function emergencyTerminalRestore(): void {
 			process.stdout.write(
 				"\x1b[?2026l" + // End synchronized output
 					"\x1b[?7h" + // Restore autowrap
+					"\x1b[?1l\x1b>" + // Restore normal cursor-key + keypad mode (rmkx, #6374)
 					"\x1b[?2004l" + // Disable bracketed paste
 					"\x1b[?2031l" + // Disable Mode 2031 appearance notifications
 					"\x1b[?2048l" + // Disable in-band resize notifications
@@ -625,6 +626,15 @@ export class ProcessTerminal implements Terminal {
 		// Enable bracketed paste mode - terminal will wrap pastes in \x1b[200~ ... \x1b[201~
 		this.#safeWrite("\x1b[?2004h");
 
+		// Force normal cursor-key (DECCKM) and numeric-keypad mode (terminfo
+		// `rmkx` = "\x1b[?1l\x1b>"). omp decodes both CSI ("\x1b[A") and SS3
+		// ("\x1bOA") arrow encodings, so it never enables application mode
+		// itself — but a prior program that left the TTY in application-cursor-
+		// keys mode makes arrows arrive as SS3. Normalizing on entry keeps input
+		// in the predictable default state; stop() restores the same on exit.
+		// See #6374.
+		this.#safeWrite("\x1b[?1l\x1b>");
+
 		// Set up resize handler immediately. The OS refreshes process.stdout
 		// dimensions before firing `resize`, so it is authoritative for geometry:
 		// reconcile any stale cached DEC 2048 report before notifying the renderer.
@@ -1376,6 +1386,13 @@ export class ProcessTerminal implements Terminal {
 		// begin/end halves of a frame. Safe no-ops on terminals that ignored them.
 		this.#safeWrite("\x1b[?2026l\x1b[?7h");
 
+		// Restore normal cursor-key (DECCKM) and numeric-keypad mode (terminfo
+		// `rmkx`). Symmetric with the normalize in start(): a TTY-sharing child
+		// can leave the terminal in application-cursor-keys mode, and without
+		// this reset the parent shell inherits SS3 arrows so Up/Down history
+		// navigation stays broken after omp exits (#6374).
+		this.#safeWrite("\x1b[?1l\x1b>");
+
 		// Disable bracketed paste mode
 		this.#safeWrite("\x1b[?2004l");
 		this.#safeWrite("\x1b[?5522l");