@sayknow-cli/tui 0.5.10 → 0.5.11

package/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## [Unreleased]
 
-## [0.5.10] - 2026-09-10
+## [0.5.11] - 2026-09-10
+
+### Added
+
+- `SettingsList` accepts an optional `descriptionRows` constructor argument to reserve a fixed description-area height (default `0`, no change for existing callers).
 
 ## [0.5.7] - 2026-09-10
 

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

@@ -22,7 +22,7 @@ export interface SettingsListTheme {
 }
 export declare class SettingsList implements Component {
     #private;
-    constructor(items: SettingItem[], maxVisible: number, theme: SettingsListTheme, onChange: (id: string, newValue: string) => void, onCancel: () => void, onSelectionChange?: (item: SettingItem | undefined) => void);
+    constructor(items: SettingItem[], maxVisible: number, theme: SettingsListTheme, onChange: (id: string, newValue: string) => void, onCancel: () => void, onSelectionChange?: (item: SettingItem | undefined) => void, descriptionRows?: number);
     /** Update an item's currentValue */
     updateValue(id: string, newValue: string): void;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@sayknow-cli/tui",
-	"version": "0.5.10",
+	"version": "0.5.11",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://sayknow-cli.com",
 	"author": "jaybeyond",
@@ -38,8 +38,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@sayknow-cli/natives": "0.5.10",
-		"@sayknow-cli/utils": "0.5.10",
+		"@sayknow-cli/natives": "0.5.11",
+		"@sayknow-cli/utils": "0.5.11",
 		"lru-cache": "11.3.6",
 		"marked": "^18.0.3"
 	},

package/src/components/settings-list.ts

@@ -33,6 +33,7 @@ export class SettingsList implements Component {
 	#onChange: (id: string, newValue: string) => void;
 	#onCancel: () => void;
 	#onSelectionChange?: (item: SettingItem | undefined) => void;
+	#descriptionRows: number;
 
 	// Submenu state
 	#submenuComponent: Component | null = null;
@@ -45,6 +46,7 @@ export class SettingsList implements Component {
 		onChange: (id: string, newValue: string) => void,
 		onCancel: () => void,
 		onSelectionChange?: (item: SettingItem | undefined) => void,
+		descriptionRows = 0,
 	) {
 		this.#items = items;
 		this.#maxVisible = maxVisible;
@@ -52,6 +54,7 @@ export class SettingsList implements Component {
 		this.#onChange = onChange;
 		this.#onCancel = onCancel;
 		this.#onSelectionChange = onSelectionChange;
+		this.#descriptionRows = Math.max(0, descriptionRows);
 		this.#notifySelectionChange();
 	}
 
@@ -147,9 +150,18 @@ export class SettingsList implements Component {
 			lines.push(this.#theme.hint(truncateToWidth(scrollText, width - 2, Ellipsis.Omit)));
 		}
 
-		// Add description for selected item
+		// Add description for selected item. Some hosts reserve a fixed
+		// description area so keyboard navigation does not resize the TUI when
+		// moving between described and undescribed rows.
 		const selectedItem = this.#items[this.#selectedIndex];
-		if (selectedItem?.description) {
+		if (this.#descriptionRows > 0) {
+			lines.push("");
+			const wrappedDesc = selectedItem?.description ? wrapTextWithAnsi(selectedItem.description, width - 4) : [];
+			for (let i = 0; i < this.#descriptionRows; i++) {
+				const line = wrappedDesc[i] ?? "";
+				lines.push(line ? this.#theme.description(`  ${line}`) : "");
+			}
+		} else if (selectedItem?.description) {
 			lines.push("");
 			const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
 			for (const line of wrappedDesc) {