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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## [Unreleased]
 
+## [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/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "17.0.8",
+	"version": "17.0.9",
 	"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.0.9",
+		"@oh-my-pi/pi-utils": "17.0.9",
 		"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 {