@f5-sales-demo/pi-tui 21.45.3 → 21.46.2

package/README.md

@@ -346,6 +346,7 @@ const list = new SelectList(
  ],
  5, // maxVisible
  theme, // SelectListTheme
+ { presentation: "compact-with-selected-detail" },
 );
 
 list.onSelect = (item) => console.log("Selected:", item);
@@ -354,6 +355,10 @@ list.onSelectionChange = (item) => console.log("Highlighted:", item);
 list.setFilter("opt"); // Filter items
 ```
 
+Every list chooses a presentation contract. Use `compact-with-selected-detail` for dense one-line rows; when a
+selected label or description does not fit, `SelectList` adds its complete wrapped value below the rows. Use
+`wrapped-prose` when every visible item should wrap instead of truncating.
+
 **Controls:**
 
 - Arrow keys: Navigate

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@f5-sales-demo/pi-tui",
-	"version": "21.45.3",
+	"version": "21.46.2",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/f5-sales-demo/xcsh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@f5-sales-demo/pi-natives": "21.45.3",
-		"@f5-sales-demo/pi-utils": "21.45.3",
+		"@f5-sales-demo/pi-natives": "21.46.2",
+		"@f5-sales-demo/pi-utils": "21.46.2",
 		"marked": "18.0.11"
 	},
 	"devDependencies": {

package/src/components/editor.ts

@@ -24,9 +24,11 @@ import {
 import { SelectList, type SelectListLayoutOptions, type SelectListTheme } from "./select-list";
 
 const SLASH_COMMAND_SELECT_LIST_LAYOUT: SelectListLayoutOptions = {
+	presentation: "compact-with-selected-detail",
 	minPrimaryColumnWidth: 12,
 	maxPrimaryColumnWidth: 32,
 };
+const FILE_SELECT_LIST_LAYOUT: SelectListLayoutOptions = { presentation: "compact-with-selected-detail" };
 
 function sanitizeLoadedText(text: string): string {
 	return replaceTabs(text.replace(/\r\n/g, "\n").replace(/\r/g, "\n"))
@@ -2442,7 +2444,7 @@ export class Editor implements Component, Focusable {
 		prefix: string,
 		items: Array<{ value: string; label: string; description?: string }>,
 	): SelectList {
-		const layout = prefix.startsWith("/") ? SLASH_COMMAND_SELECT_LIST_LAYOUT : undefined;
+		const layout = prefix.startsWith("/") ? SLASH_COMMAND_SELECT_LIST_LAYOUT : FILE_SELECT_LIST_LAYOUT;
 		return new SelectList(items, this.#autocompleteMaxVisible, this.#theme.selectList, layout);
 	}
 

package/src/components/select-list.ts

@@ -2,7 +2,7 @@ import { getKeybindings } from "../keybindings";
 import { type MouseRoutable, routeSelectListMouse, type SgrMouseEvent } from "../mouse";
 import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
-import { Ellipsis, padding, replaceTabs, truncateToWidth, visibleWidth } from "../utils";
+import { Ellipsis, padding, replaceTabs, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 
 const DEFAULT_PRIMARY_COLUMN_WIDTH = 32;
 const PRIMARY_COLUMN_GAP = 2;
@@ -44,6 +44,7 @@ export interface SelectListTruncatePrimaryContext {
 }
 
 export interface SelectListLayoutOptions {
+	presentation: "wrapped-prose" | "compact-with-selected-detail";
 	minPrimaryColumnWidth?: number;
 	maxPrimaryColumnWidth?: number;
 	truncatePrimary?: (context: SelectListTruncatePrimaryContext) => string;
@@ -63,8 +64,11 @@ export class SelectList implements Component, MouseRoutable {
 		private readonly items: ReadonlyArray<SelectItem>,
 		private readonly maxVisible: number,
 		private readonly theme: SelectListTheme,
-		private readonly layout: SelectListLayoutOptions = {},
+		private readonly layout: SelectListLayoutOptions,
 	) {
+		if (layout.presentation !== "wrapped-prose" && layout.presentation !== "compact-with-selected-detail") {
+			throw new TypeError("SelectList requires an explicit wrapped-prose or compact-with-selected-detail policy.");
+		}
 		this.#filteredItems = items;
 	}
 
@@ -114,6 +118,7 @@ export class SelectList implements Component, MouseRoutable {
 
 	render(width: number): string[] {
 		const lines: string[] = [];
+		let selectedDetailLines: string[] = [];
 		this.#hitRows = [];
 
 		// If no items match filter, show message
@@ -138,11 +143,37 @@ export class SelectList implements Component, MouseRoutable {
 
 			const isSelected = i === this.#selectedIndex;
 			const descriptionText = item.description ? sanitizeSingleLine(item.description) : undefined;
-			const rendered = this.#renderItem(item, isSelected, width, descriptionText, primaryColumnWidth);
+			if (this.layout.presentation === "wrapped-prose") {
+				for (const rendered of this.#renderWrappedItem(item, isSelected, width, descriptionText)) {
+					this.#hitRows[lines.length] = i;
+					lines.push(
+						!isSelected && i === this.#hoveredIndex && this.theme.hovered
+							? this.theme.hovered(rendered)
+							: rendered,
+					);
+				}
+				continue;
+			}
+
+			const rendered = this.#renderCompactItem(item, isSelected, width, descriptionText, primaryColumnWidth);
 			this.#hitRows[lines.length] = i;
 			lines.push(
-				!isSelected && i === this.#hoveredIndex && this.theme.hovered ? this.theme.hovered(rendered) : rendered,
+				!isSelected && i === this.#hoveredIndex && this.theme.hovered
+					? this.theme.hovered(rendered.line)
+					: rendered.line,
 			);
+			if (isSelected && rendered.omitted) {
+				const detail = descriptionText
+					? `${this.#getDisplayValue(item)} — ${descriptionText}`
+					: this.#getDisplayValue(item);
+				selectedDetailLines = wrapTextWithAnsi(detail, Math.max(1, width - 2)).map(detailLine =>
+					this.theme.description(`  ${detailLine}`),
+				);
+			}
+		}
+		for (const detailLine of selectedDetailLines) {
+			this.#hitRows[lines.length] = undefined;
+			lines.push(detailLine);
 		}
 
 		// Add scroll indicators if needed
@@ -193,13 +224,13 @@ export class SelectList implements Component, MouseRoutable {
 		}
 	}
 
-	#renderItem(
+	#renderCompactItem(
 		item: SelectItem,
 		isSelected: boolean,
 		width: number,
 		descriptionSingleLine: string | undefined,
 		primaryColumnWidth: number,
-	): string {
+	): { line: string; omitted: boolean } {
 		const prefix = isSelected
 			? `${this.theme.symbols.cursor} `
 			: padding(visibleWidth(this.theme.symbols.cursor) + 1);
@@ -216,22 +247,47 @@ export class SelectList implements Component, MouseRoutable {
 
 			if (remainingWidth > MIN_DESCRIPTION_WIDTH) {
 				const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, Ellipsis.Omit);
+				const omitted =
+					visibleWidth(this.#getDisplayValue(item)) > maxPrimaryWidth ||
+					visibleWidth(descriptionSingleLine) > remainingWidth;
 				if (isSelected) {
-					return this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);
+					return {
+						line: this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`),
+						omitted,
+					};
 				}
 
 				const descText = this.theme.description(spacing + truncatedDesc);
-				return prefix + truncatedValue + descText;
+				return { line: prefix + truncatedValue + descText, omitted };
 			}
 		}
 
 		const maxWidth = width - prefixWidth - 2;
 		const truncatedValue = this.#truncatePrimary(item, isSelected, maxWidth, maxWidth);
+		const omitted = visibleWidth(this.#getDisplayValue(item)) > maxWidth || descriptionSingleLine !== undefined;
 		if (isSelected) {
-			return this.theme.selectedText(`${prefix}${truncatedValue}`);
+			return { line: this.theme.selectedText(`${prefix}${truncatedValue}`), omitted };
 		}
 
-		return prefix + truncatedValue;
+		return { line: prefix + truncatedValue, omitted };
+	}
+
+	#renderWrappedItem(
+		item: SelectItem,
+		isSelected: boolean,
+		width: number,
+		descriptionSingleLine: string | undefined,
+	): string[] {
+		const cursor = `${this.theme.symbols.cursor} `;
+		const prefixWidth = visibleWidth(cursor);
+		const content = descriptionSingleLine
+			? `${this.#getDisplayValue(item)} — ${descriptionSingleLine}`
+			: this.#getDisplayValue(item);
+		return wrapTextWithAnsi(content, Math.max(1, width - prefixWidth - 2)).map((wrapped, index) => {
+			const prefix = index === 0 && isSelected ? cursor : padding(prefixWidth);
+			const line = `${prefix}${wrapped}`;
+			return isSelected ? this.theme.selectedText(line) : line;
+		});
 	}
 
 	#getPrimaryColumnWidth(): number {

package/src/terminal.ts

@@ -106,6 +106,7 @@ export interface Terminal {
 	 * Fires when the detected appearance changes, including the initial detection.
 	 */
 	onAppearanceChange(callback: (appearance: TerminalAppearance) => void): void;
+	onFocusChange?(callback: (focused: boolean) => void): void;
 
 	/** The last detected terminal appearance, or undefined if not yet known. */
 	get appearance(): TerminalAppearance | undefined;
@@ -132,6 +133,8 @@ export class ProcessTerminal implements Terminal {
 	#writeLogPath = $env.PI_TUI_WRITE_LOG || "";
 	#windowsVTInputRestore?: () => void;
 	#appearanceCallbacks: Array<(appearance: TerminalAppearance) => void> = [];
+	#focusCallbacks: Array<(focused: boolean) => void> = [];
+	#focused = true;
 	#appearance: TerminalAppearance | undefined;
 	#osc11Pending = false;
 	#osc11QueryQueued = false;
@@ -162,6 +165,10 @@ export class ProcessTerminal implements Terminal {
 		this.#appearanceCallbacks.push(callback);
 	}
 
+	onFocusChange(callback: (focused: boolean) => void): void {
+		this.#focusCallbacks.push(callback);
+	}
+
 	start(onInput: (data: string) => void, onResize: () => void, onDisconnect?: () => void): void {
 		this.#resizeHandler = onResize;
 		this.#disconnectHandler = onDisconnect;
@@ -184,6 +191,7 @@ export class ProcessTerminal implements Terminal {
 
 		// Enable bracketed paste mode - terminal will wrap pastes in \x1b[200~ ... \x1b[201~
 		this.#safeWrite("\x1b[?2004h");
+		this.#safeWrite("\x1b[?1004h");
 
 		// Set up resize handler immediately
 		process.stdout.on("resize", this.#resizeHandler);
@@ -319,6 +327,14 @@ export class ProcessTerminal implements Terminal {
 
 		// Forward individual sequences to the input handler
 		this.#stdinBuffer.on("data", (sequence: string) => {
+			if (sequence === "\x1b[I" || sequence === "\x1b[O") {
+				const focused = sequence === "\x1b[I";
+				if (focused !== this.#focused) {
+					this.#focused = focused;
+					for (const callback of this.#focusCallbacks) callback(focused);
+				}
+				return;
+			}
 			// Kitty protocol response — always swallow, enable protocol on first match
 			const kittyMatch = sequence.match(kittyResponsePattern);
 			if (kittyMatch) {
@@ -593,6 +609,7 @@ export class ProcessTerminal implements Terminal {
 
 		// Disable bracketed paste mode
 		this.#safeWrite("\x1b[?2004l");
+		this.#safeWrite("\x1b[?1004l");
 
 		// Disable Mode 2031 appearance change notifications
 		this.#safeWrite("\x1b[?2031l");