@m4ike1/ion-tui 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.d.ts","sourceRoot":"","sources":["../../src/components/select-list.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAU/E,MAAM,WAAW,UAAU;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACzC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,gCAAgC;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACvC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,gCAAgC,KAAK,MAAM,CAAC;CACxE;AAED,qBAAa,UAAW,YAAW,SAAS;IAC3C,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,aAAa,CAAoB;IACzC,OAAO,CAAC,aAAa,CAAa;IAClC,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,UAAU,CAAa;IAC/B,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,MAAM,CAA0B;IAEjC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAEtD,YAAY,KAAK,EAAE,UAAU,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,GAAE,uBAA4B,EAMhH;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAI9B;IAED,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAEpC;IAED,UAAU,IAAI,IAAI,CAEjB;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAgC9B;IAED,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,mBAAmB,GAAG,SAAS,CAkCjE;IAED,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAyBjC;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,UAAU;IAuClB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,qBAAqB;IAO7B,eAAe,IAAI,UAAU,GAAG,IAAI,CAGnC;CACD","sourcesContent":["import { getKeybindings } from \"../keybindings.ts\";\nimport type { Component, TuiMouseEvent, TuiMouseEventResult } from \"../tui.ts\";\nimport { truncateToWidth, visibleWidth } from \"../utils.ts\";\n\nconst DEFAULT_PRIMARY_COLUMN_WIDTH = 32;\nconst PRIMARY_COLUMN_GAP = 2;\nconst MIN_DESCRIPTION_WIDTH = 10;\n\nconst normalizeToSingleLine = (text: string): string => text.replace(/[\\r\\n]+/g, \" \").trim();\nconst clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(value, max));\n\nexport interface SelectItem {\n\tvalue: string;\n\tlabel: string;\n\tdescription?: string;\n}\n\nexport interface SelectListTheme {\n\tselectedPrefix: (text: string) => string;\n\tselectedText: (text: string) => string;\n\tdescription: (text: string) => string;\n\tscrollInfo: (text: string) => string;\n\tnoMatch: (text: string) => string;\n}\n\nexport interface SelectListTruncatePrimaryContext {\n\ttext: string;\n\tmaxWidth: number;\n\tcolumnWidth: number;\n\titem: SelectItem;\n\tisSelected: boolean;\n}\n\nexport interface SelectListLayoutOptions {\n\tminPrimaryColumnWidth?: number;\n\tmaxPrimaryColumnWidth?: number;\n\ttruncatePrimary?: (context: SelectListTruncatePrimaryContext) => string;\n}\n\nexport class SelectList implements Component {\n\tprivate items: SelectItem[] = [];\n\tprivate filteredItems: SelectItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate mousePressedIndex: number | undefined;\n\tprivate maxVisible: number = 5;\n\tprivate theme: SelectListTheme;\n\tprivate layout: SelectListLayoutOptions;\n\n\tpublic onSelect?: (item: SelectItem) => void;\n\tpublic onCancel?: () => void;\n\tpublic onSelectionChange?: (item: SelectItem) => void;\n\n\tconstructor(items: SelectItem[], maxVisible: number, theme: SelectListTheme, layout: SelectListLayoutOptions = {}) {\n\t\tthis.items = items;\n\t\tthis.filteredItems = items;\n\t\tthis.maxVisible = maxVisible;\n\t\tthis.theme = theme;\n\t\tthis.layout = layout;\n\t}\n\n\tsetFilter(filter: string): void {\n\t\tthis.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));\n\t\t// Reset selection when filter changes\n\t\tthis.selectedIndex = 0;\n\t}\n\n\tsetSelectedIndex(index: number): void {\n\t\tthis.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));\n\t}\n\n\tinvalidate(): void {\n\t\t// No cached state to invalidate currently\n\t}\n\n\trender(width: number): string[] {\n\t\tconst lines: string[] = [];\n\n\t\t// If no items match filter, show message\n\t\tif (this.filteredItems.length === 0) {\n\t\t\tlines.push(this.theme.noMatch(\"  No matching commands\"));\n\t\t\treturn lines;\n\t\t}\n\n\t\tconst primaryColumnWidth = this.getPrimaryColumnWidth();\n\n\t\t// Calculate visible range with scrolling\n\t\tconst { startIndex, endIndex } = this.getVisibleRange();\n\n\t\t// Render visible items\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = this.filteredItems[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst descriptionSingleLine = item.description ? normalizeToSingleLine(item.description) : undefined;\n\t\t\tlines.push(this.renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth));\n\t\t}\n\n\t\t// Add scroll indicators if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredItems.length) {\n\t\t\tconst scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;\n\t\t\t// Truncate if too long for terminal\n\t\t\tlines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, \"\")));\n\t\t}\n\n\t\treturn lines;\n\t}\n\n\thandleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {\n\t\tif (this.filteredItems.length === 0) return undefined;\n\t\tif (event.type === \"wheel\" && event.wheelDelta) {\n\t\t\tconst delta = event.wheelDelta < 0 ? -1 : 1;\n\t\t\tconst previousIndex = this.selectedIndex;\n\t\t\tthis.selectedIndex = Math.max(0, Math.min(this.filteredItems.length - 1, this.selectedIndex + delta));\n\t\t\tif (this.selectedIndex !== previousIndex) this.notifySelectionChange();\n\t\t\treturn { handled: true, render: this.selectedIndex !== previousIndex };\n\t\t}\n\t\t// Hover must not change selection: the visible range is centered on it.\n\t\tif (event.button !== \"left\" || (event.type !== \"press\" && event.type !== \"click\")) return undefined;\n\t\tconst { startIndex, endIndex } = this.getVisibleRange();\n\t\tconst itemIndex = startIndex + event.y;\n\t\tif (itemIndex < startIndex || itemIndex >= endIndex) return undefined;\n\n\t\tif (event.type === \"press\") {\n\t\t\tthis.mousePressedIndex = itemIndex;\n\t\t\tif (this.selectedIndex !== itemIndex) {\n\t\t\t\tthis.selectedIndex = itemIndex;\n\t\t\t\tthis.notifySelectionChange();\n\t\t\t}\n\t\t\treturn { handled: true, focus: true };\n\t\t}\n\t\tif (event.type === \"click\") {\n\t\t\tconst clickedIndex = this.mousePressedIndex ?? itemIndex;\n\t\t\tthis.mousePressedIndex = undefined;\n\t\t\tconst changed = this.selectedIndex !== clickedIndex;\n\t\t\tthis.selectedIndex = clickedIndex;\n\t\t\tif (changed) this.notifySelectionChange();\n\t\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\t\tif (selectedItem) this.onSelect?.(selectedItem);\n\t\t\treturn { handled: true };\n\t\t}\n\t\treturn undefined;\n\t}\n\n\thandleInput(keyData: string): void {\n\t\tconst kb = getKeybindings();\n\t\t// Up arrow - wrap to bottom when at top\n\t\tif (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;\n\t\t\tthis.notifySelectionChange();\n\t\t}\n\t\t// Down arrow - wrap to top when at bottom\n\t\telse if (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tthis.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t\tthis.notifySelectionChange();\n\t\t}\n\t\t// Enter\n\t\telse if (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\t\tif (selectedItem && this.onSelect) {\n\t\t\t\tthis.onSelect(selectedItem);\n\t\t\t}\n\t\t}\n\t\t// Escape or Ctrl+C\n\t\telse if (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\tif (this.onCancel) {\n\t\t\t\tthis.onCancel();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate getVisibleRange(): { startIndex: number; endIndex: number } {\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible),\n\t\t);\n\t\treturn {\n\t\t\tstartIndex,\n\t\t\tendIndex: Math.min(startIndex + this.maxVisible, this.filteredItems.length),\n\t\t};\n\t}\n\n\tprivate renderItem(\n\t\titem: SelectItem,\n\t\tisSelected: boolean,\n\t\twidth: number,\n\t\tdescriptionSingleLine: string | undefined,\n\t\tprimaryColumnWidth: number,\n\t): string {\n\t\tconst prefix = isSelected ? \"→ \" : \"  \";\n\t\tconst prefixWidth = visibleWidth(prefix);\n\n\t\tif (descriptionSingleLine && width > 40) {\n\t\t\tconst effectivePrimaryColumnWidth = Math.max(1, Math.min(primaryColumnWidth, width - prefixWidth - 4));\n\t\t\tconst maxPrimaryWidth = Math.max(1, effectivePrimaryColumnWidth - PRIMARY_COLUMN_GAP);\n\t\t\tconst truncatedValue = this.truncatePrimary(item, isSelected, maxPrimaryWidth, effectivePrimaryColumnWidth);\n\t\t\tconst truncatedValueWidth = visibleWidth(truncatedValue);\n\t\t\tconst spacing = \" \".repeat(Math.max(1, effectivePrimaryColumnWidth - truncatedValueWidth));\n\t\t\tconst descriptionStart = prefixWidth + truncatedValueWidth + spacing.length;\n\t\t\tconst remainingWidth = width - descriptionStart - 2; // -2 for safety\n\n\t\t\tif (remainingWidth > MIN_DESCRIPTION_WIDTH) {\n\t\t\t\tconst truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, \"\");\n\t\t\t\tif (isSelected) {\n\t\t\t\t\treturn this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);\n\t\t\t\t}\n\n\t\t\t\tconst descText = this.theme.description(spacing + truncatedDesc);\n\t\t\t\treturn prefix + truncatedValue + descText;\n\t\t\t}\n\t\t}\n\n\t\tconst maxWidth = width - prefixWidth - 2;\n\t\tconst truncatedValue = this.truncatePrimary(item, isSelected, maxWidth, maxWidth);\n\t\tif (isSelected) {\n\t\t\treturn this.theme.selectedText(`${prefix}${truncatedValue}`);\n\t\t}\n\n\t\treturn prefix + truncatedValue;\n\t}\n\n\tprivate getPrimaryColumnWidth(): number {\n\t\tconst { min, max } = this.getPrimaryColumnBounds();\n\t\tconst widestPrimary = this.filteredItems.reduce((widest, item) => {\n\t\t\treturn Math.max(widest, visibleWidth(this.getDisplayValue(item)) + PRIMARY_COLUMN_GAP);\n\t\t}, 0);\n\n\t\treturn clamp(widestPrimary, min, max);\n\t}\n\n\tprivate getPrimaryColumnBounds(): { min: number; max: number } {\n\t\tconst rawMin =\n\t\t\tthis.layout.minPrimaryColumnWidth ?? this.layout.maxPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;\n\t\tconst rawMax =\n\t\t\tthis.layout.maxPrimaryColumnWidth ?? this.layout.minPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;\n\n\t\treturn {\n\t\t\tmin: Math.max(1, Math.min(rawMin, rawMax)),\n\t\t\tmax: Math.max(1, Math.max(rawMin, rawMax)),\n\t\t};\n\t}\n\n\tprivate truncatePrimary(item: SelectItem, isSelected: boolean, maxWidth: number, columnWidth: number): string {\n\t\tconst displayValue = this.getDisplayValue(item);\n\t\tconst truncatedValue = this.layout.truncatePrimary\n\t\t\t? this.layout.truncatePrimary({\n\t\t\t\t\ttext: displayValue,\n\t\t\t\t\tmaxWidth,\n\t\t\t\t\tcolumnWidth,\n\t\t\t\t\titem,\n\t\t\t\t\tisSelected,\n\t\t\t\t})\n\t\t\t: truncateToWidth(displayValue, maxWidth, \"\");\n\n\t\treturn truncateToWidth(truncatedValue, maxWidth, \"\");\n\t}\n\n\tprivate getDisplayValue(item: SelectItem): string {\n\t\treturn item.label || item.value;\n\t}\n\n\tprivate notifySelectionChange(): void {\n\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\tif (selectedItem && this.onSelectionChange) {\n\t\t\tthis.onSelectionChange(selectedItem);\n\t\t}\n\t}\n\n\tgetSelectedItem(): SelectItem | null {\n\t\tconst item = this.filteredItems[this.selectedIndex];\n\t\treturn item || null;\n\t}\n}\n"]}

package/dist/components/select-list.js

@@ -0,0 +1,206 @@
+import { getKeybindings } from "../keybindings.js";
+import { truncateToWidth, visibleWidth } from "../utils.js";
+const DEFAULT_PRIMARY_COLUMN_WIDTH = 32;
+const PRIMARY_COLUMN_GAP = 2;
+const MIN_DESCRIPTION_WIDTH = 10;
+const normalizeToSingleLine = (text) => text.replace(/[\r\n]+/g, " ").trim();
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+export class SelectList {
+    items = [];
+    filteredItems = [];
+    selectedIndex = 0;
+    mousePressedIndex;
+    maxVisible = 5;
+    theme;
+    layout;
+    onSelect;
+    onCancel;
+    onSelectionChange;
+    constructor(items, maxVisible, theme, layout = {}) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+        this.layout = layout;
+    }
+    setFilter(filter) {
+        this.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));
+        // Reset selection when filter changes
+        this.selectedIndex = 0;
+    }
+    setSelectedIndex(index) {
+        this.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(width) {
+        const lines = [];
+        // If no items match filter, show message
+        if (this.filteredItems.length === 0) {
+            lines.push(this.theme.noMatch("  No matching commands"));
+            return lines;
+        }
+        const primaryColumnWidth = this.getPrimaryColumnWidth();
+        // Calculate visible range with scrolling
+        const { startIndex, endIndex } = this.getVisibleRange();
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const descriptionSingleLine = item.description ? normalizeToSingleLine(item.description) : undefined;
+            lines.push(this.renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth));
+        }
+        // Add scroll indicators if needed
+        if (startIndex > 0 || endIndex < this.filteredItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
+            // Truncate if too long for terminal
+            lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
+        }
+        return lines;
+    }
+    handleMouse(event) {
+        if (this.filteredItems.length === 0)
+            return undefined;
+        if (event.type === "wheel" && event.wheelDelta) {
+            const delta = event.wheelDelta < 0 ? -1 : 1;
+            const previousIndex = this.selectedIndex;
+            this.selectedIndex = Math.max(0, Math.min(this.filteredItems.length - 1, this.selectedIndex + delta));
+            if (this.selectedIndex !== previousIndex)
+                this.notifySelectionChange();
+            return { handled: true, render: this.selectedIndex !== previousIndex };
+        }
+        // Hover must not change selection: the visible range is centered on it.
+        if (event.button !== "left" || (event.type !== "press" && event.type !== "click"))
+            return undefined;
+        const { startIndex, endIndex } = this.getVisibleRange();
+        const itemIndex = startIndex + event.y;
+        if (itemIndex < startIndex || itemIndex >= endIndex)
+            return undefined;
+        if (event.type === "press") {
+            this.mousePressedIndex = itemIndex;
+            if (this.selectedIndex !== itemIndex) {
+                this.selectedIndex = itemIndex;
+                this.notifySelectionChange();
+            }
+            return { handled: true, focus: true };
+        }
+        if (event.type === "click") {
+            const clickedIndex = this.mousePressedIndex ?? itemIndex;
+            this.mousePressedIndex = undefined;
+            const changed = this.selectedIndex !== clickedIndex;
+            this.selectedIndex = clickedIndex;
+            if (changed)
+                this.notifySelectionChange();
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem)
+                this.onSelect?.(selectedItem);
+            return { handled: true };
+        }
+        return undefined;
+    }
+    handleInput(keyData) {
+        const kb = getKeybindings();
+        // Up arrow - wrap to bottom when at top
+        if (kb.matches(keyData, "tui.select.up")) {
+            this.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;
+            this.notifySelectionChange();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (kb.matches(keyData, "tui.select.down")) {
+            this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Enter
+        else if (kb.matches(keyData, "tui.select.confirm")) {
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem && this.onSelect) {
+                this.onSelect(selectedItem);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "tui.select.cancel")) {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+    getVisibleRange() {
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible));
+        return {
+            startIndex,
+            endIndex: Math.min(startIndex + this.maxVisible, this.filteredItems.length),
+        };
+    }
+    renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth) {
+        const prefix = isSelected ? "→ " : "  ";
+        const prefixWidth = visibleWidth(prefix);
+        if (descriptionSingleLine && width > 40) {
+            const effectivePrimaryColumnWidth = Math.max(1, Math.min(primaryColumnWidth, width - prefixWidth - 4));
+            const maxPrimaryWidth = Math.max(1, effectivePrimaryColumnWidth - PRIMARY_COLUMN_GAP);
+            const truncatedValue = this.truncatePrimary(item, isSelected, maxPrimaryWidth, effectivePrimaryColumnWidth);
+            const truncatedValueWidth = visibleWidth(truncatedValue);
+            const spacing = " ".repeat(Math.max(1, effectivePrimaryColumnWidth - truncatedValueWidth));
+            const descriptionStart = prefixWidth + truncatedValueWidth + spacing.length;
+            const remainingWidth = width - descriptionStart - 2; // -2 for safety
+            if (remainingWidth > MIN_DESCRIPTION_WIDTH) {
+                const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                if (isSelected) {
+                    return this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);
+                }
+                const descText = this.theme.description(spacing + truncatedDesc);
+                return prefix + truncatedValue + descText;
+            }
+        }
+        const maxWidth = width - prefixWidth - 2;
+        const truncatedValue = this.truncatePrimary(item, isSelected, maxWidth, maxWidth);
+        if (isSelected) {
+            return this.theme.selectedText(`${prefix}${truncatedValue}`);
+        }
+        return prefix + truncatedValue;
+    }
+    getPrimaryColumnWidth() {
+        const { min, max } = this.getPrimaryColumnBounds();
+        const widestPrimary = this.filteredItems.reduce((widest, item) => {
+            return Math.max(widest, visibleWidth(this.getDisplayValue(item)) + PRIMARY_COLUMN_GAP);
+        }, 0);
+        return clamp(widestPrimary, min, max);
+    }
+    getPrimaryColumnBounds() {
+        const rawMin = this.layout.minPrimaryColumnWidth ?? this.layout.maxPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;
+        const rawMax = this.layout.maxPrimaryColumnWidth ?? this.layout.minPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;
+        return {
+            min: Math.max(1, Math.min(rawMin, rawMax)),
+            max: Math.max(1, Math.max(rawMin, rawMax)),
+        };
+    }
+    truncatePrimary(item, isSelected, maxWidth, columnWidth) {
+        const displayValue = this.getDisplayValue(item);
+        const truncatedValue = this.layout.truncatePrimary
+            ? this.layout.truncatePrimary({
+                text: displayValue,
+                maxWidth,
+                columnWidth,
+                item,
+                isSelected,
+            })
+            : truncateToWidth(displayValue, maxWidth, "");
+        return truncateToWidth(truncatedValue, maxWidth, "");
+    }
+    getDisplayValue(item) {
+        return item.label || item.value;
+    }
+    notifySelectionChange() {
+        const selectedItem = this.filteredItems[this.selectedIndex];
+        if (selectedItem && this.onSelectionChange) {
+            this.onSelectionChange(selectedItem);
+        }
+    }
+    getSelectedItem() {
+        const item = this.filteredItems[this.selectedIndex];
+        return item || null;
+    }
+}
+//# sourceMappingURL=select-list.js.map

package/dist/components/select-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-list.js","sourceRoot":"","sources":["../../src/components/select-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { getKeybindings } from \"../keybindings.ts\";\nimport type { Component, TuiMouseEvent, TuiMouseEventResult } from \"../tui.ts\";\nimport { truncateToWidth, visibleWidth } from \"../utils.ts\";\n\nconst DEFAULT_PRIMARY_COLUMN_WIDTH = 32;\nconst PRIMARY_COLUMN_GAP = 2;\nconst MIN_DESCRIPTION_WIDTH = 10;\n\nconst normalizeToSingleLine = (text: string): string => text.replace(/[\\r\\n]+/g, \" \").trim();\nconst clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(value, max));\n\nexport interface SelectItem {\n\tvalue: string;\n\tlabel: string;\n\tdescription?: string;\n}\n\nexport interface SelectListTheme {\n\tselectedPrefix: (text: string) => string;\n\tselectedText: (text: string) => string;\n\tdescription: (text: string) => string;\n\tscrollInfo: (text: string) => string;\n\tnoMatch: (text: string) => string;\n}\n\nexport interface SelectListTruncatePrimaryContext {\n\ttext: string;\n\tmaxWidth: number;\n\tcolumnWidth: number;\n\titem: SelectItem;\n\tisSelected: boolean;\n}\n\nexport interface SelectListLayoutOptions {\n\tminPrimaryColumnWidth?: number;\n\tmaxPrimaryColumnWidth?: number;\n\ttruncatePrimary?: (context: SelectListTruncatePrimaryContext) => string;\n}\n\nexport class SelectList implements Component {\n\tprivate items: SelectItem[] = [];\n\tprivate filteredItems: SelectItem[] = [];\n\tprivate selectedIndex: number = 0;\n\tprivate mousePressedIndex: number | undefined;\n\tprivate maxVisible: number = 5;\n\tprivate theme: SelectListTheme;\n\tprivate layout: SelectListLayoutOptions;\n\n\tpublic onSelect?: (item: SelectItem) => void;\n\tpublic onCancel?: () => void;\n\tpublic onSelectionChange?: (item: SelectItem) => void;\n\n\tconstructor(items: SelectItem[], maxVisible: number, theme: SelectListTheme, layout: SelectListLayoutOptions = {}) {\n\t\tthis.items = items;\n\t\tthis.filteredItems = items;\n\t\tthis.maxVisible = maxVisible;\n\t\tthis.theme = theme;\n\t\tthis.layout = layout;\n\t}\n\n\tsetFilter(filter: string): void {\n\t\tthis.filteredItems = this.items.filter((item) => item.value.toLowerCase().startsWith(filter.toLowerCase()));\n\t\t// Reset selection when filter changes\n\t\tthis.selectedIndex = 0;\n\t}\n\n\tsetSelectedIndex(index: number): void {\n\t\tthis.selectedIndex = Math.max(0, Math.min(index, this.filteredItems.length - 1));\n\t}\n\n\tinvalidate(): void {\n\t\t// No cached state to invalidate currently\n\t}\n\n\trender(width: number): string[] {\n\t\tconst lines: string[] = [];\n\n\t\t// If no items match filter, show message\n\t\tif (this.filteredItems.length === 0) {\n\t\t\tlines.push(this.theme.noMatch(\"  No matching commands\"));\n\t\t\treturn lines;\n\t\t}\n\n\t\tconst primaryColumnWidth = this.getPrimaryColumnWidth();\n\n\t\t// Calculate visible range with scrolling\n\t\tconst { startIndex, endIndex } = this.getVisibleRange();\n\n\t\t// Render visible items\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = this.filteredItems[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst descriptionSingleLine = item.description ? normalizeToSingleLine(item.description) : undefined;\n\t\t\tlines.push(this.renderItem(item, isSelected, width, descriptionSingleLine, primaryColumnWidth));\n\t\t}\n\n\t\t// Add scroll indicators if needed\n\t\tif (startIndex > 0 || endIndex < this.filteredItems.length) {\n\t\t\tconst scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;\n\t\t\t// Truncate if too long for terminal\n\t\t\tlines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, \"\")));\n\t\t}\n\n\t\treturn lines;\n\t}\n\n\thandleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {\n\t\tif (this.filteredItems.length === 0) return undefined;\n\t\tif (event.type === \"wheel\" && event.wheelDelta) {\n\t\t\tconst delta = event.wheelDelta < 0 ? -1 : 1;\n\t\t\tconst previousIndex = this.selectedIndex;\n\t\t\tthis.selectedIndex = Math.max(0, Math.min(this.filteredItems.length - 1, this.selectedIndex + delta));\n\t\t\tif (this.selectedIndex !== previousIndex) this.notifySelectionChange();\n\t\t\treturn { handled: true, render: this.selectedIndex !== previousIndex };\n\t\t}\n\t\t// Hover must not change selection: the visible range is centered on it.\n\t\tif (event.button !== \"left\" || (event.type !== \"press\" && event.type !== \"click\")) return undefined;\n\t\tconst { startIndex, endIndex } = this.getVisibleRange();\n\t\tconst itemIndex = startIndex + event.y;\n\t\tif (itemIndex < startIndex || itemIndex >= endIndex) return undefined;\n\n\t\tif (event.type === \"press\") {\n\t\t\tthis.mousePressedIndex = itemIndex;\n\t\t\tif (this.selectedIndex !== itemIndex) {\n\t\t\t\tthis.selectedIndex = itemIndex;\n\t\t\t\tthis.notifySelectionChange();\n\t\t\t}\n\t\t\treturn { handled: true, focus: true };\n\t\t}\n\t\tif (event.type === \"click\") {\n\t\t\tconst clickedIndex = this.mousePressedIndex ?? itemIndex;\n\t\t\tthis.mousePressedIndex = undefined;\n\t\t\tconst changed = this.selectedIndex !== clickedIndex;\n\t\t\tthis.selectedIndex = clickedIndex;\n\t\t\tif (changed) this.notifySelectionChange();\n\t\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\t\tif (selectedItem) this.onSelect?.(selectedItem);\n\t\t\treturn { handled: true };\n\t\t}\n\t\treturn undefined;\n\t}\n\n\thandleInput(keyData: string): void {\n\t\tconst kb = getKeybindings();\n\t\t// Up arrow - wrap to bottom when at top\n\t\tif (kb.matches(keyData, \"tui.select.up\")) {\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? this.filteredItems.length - 1 : this.selectedIndex - 1;\n\t\t\tthis.notifySelectionChange();\n\t\t}\n\t\t// Down arrow - wrap to top when at bottom\n\t\telse if (kb.matches(keyData, \"tui.select.down\")) {\n\t\t\tthis.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t\tthis.notifySelectionChange();\n\t\t}\n\t\t// Enter\n\t\telse if (kb.matches(keyData, \"tui.select.confirm\")) {\n\t\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\t\tif (selectedItem && this.onSelect) {\n\t\t\t\tthis.onSelect(selectedItem);\n\t\t\t}\n\t\t}\n\t\t// Escape or Ctrl+C\n\t\telse if (kb.matches(keyData, \"tui.select.cancel\")) {\n\t\t\tif (this.onCancel) {\n\t\t\t\tthis.onCancel();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate getVisibleRange(): { startIndex: number; endIndex: number } {\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible),\n\t\t);\n\t\treturn {\n\t\t\tstartIndex,\n\t\t\tendIndex: Math.min(startIndex + this.maxVisible, this.filteredItems.length),\n\t\t};\n\t}\n\n\tprivate renderItem(\n\t\titem: SelectItem,\n\t\tisSelected: boolean,\n\t\twidth: number,\n\t\tdescriptionSingleLine: string | undefined,\n\t\tprimaryColumnWidth: number,\n\t): string {\n\t\tconst prefix = isSelected ? \"→ \" : \"  \";\n\t\tconst prefixWidth = visibleWidth(prefix);\n\n\t\tif (descriptionSingleLine && width > 40) {\n\t\t\tconst effectivePrimaryColumnWidth = Math.max(1, Math.min(primaryColumnWidth, width - prefixWidth - 4));\n\t\t\tconst maxPrimaryWidth = Math.max(1, effectivePrimaryColumnWidth - PRIMARY_COLUMN_GAP);\n\t\t\tconst truncatedValue = this.truncatePrimary(item, isSelected, maxPrimaryWidth, effectivePrimaryColumnWidth);\n\t\t\tconst truncatedValueWidth = visibleWidth(truncatedValue);\n\t\t\tconst spacing = \" \".repeat(Math.max(1, effectivePrimaryColumnWidth - truncatedValueWidth));\n\t\t\tconst descriptionStart = prefixWidth + truncatedValueWidth + spacing.length;\n\t\t\tconst remainingWidth = width - descriptionStart - 2; // -2 for safety\n\n\t\t\tif (remainingWidth > MIN_DESCRIPTION_WIDTH) {\n\t\t\t\tconst truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, \"\");\n\t\t\t\tif (isSelected) {\n\t\t\t\t\treturn this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);\n\t\t\t\t}\n\n\t\t\t\tconst descText = this.theme.description(spacing + truncatedDesc);\n\t\t\t\treturn prefix + truncatedValue + descText;\n\t\t\t}\n\t\t}\n\n\t\tconst maxWidth = width - prefixWidth - 2;\n\t\tconst truncatedValue = this.truncatePrimary(item, isSelected, maxWidth, maxWidth);\n\t\tif (isSelected) {\n\t\t\treturn this.theme.selectedText(`${prefix}${truncatedValue}`);\n\t\t}\n\n\t\treturn prefix + truncatedValue;\n\t}\n\n\tprivate getPrimaryColumnWidth(): number {\n\t\tconst { min, max } = this.getPrimaryColumnBounds();\n\t\tconst widestPrimary = this.filteredItems.reduce((widest, item) => {\n\t\t\treturn Math.max(widest, visibleWidth(this.getDisplayValue(item)) + PRIMARY_COLUMN_GAP);\n\t\t}, 0);\n\n\t\treturn clamp(widestPrimary, min, max);\n\t}\n\n\tprivate getPrimaryColumnBounds(): { min: number; max: number } {\n\t\tconst rawMin =\n\t\t\tthis.layout.minPrimaryColumnWidth ?? this.layout.maxPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;\n\t\tconst rawMax =\n\t\t\tthis.layout.maxPrimaryColumnWidth ?? this.layout.minPrimaryColumnWidth ?? DEFAULT_PRIMARY_COLUMN_WIDTH;\n\n\t\treturn {\n\t\t\tmin: Math.max(1, Math.min(rawMin, rawMax)),\n\t\t\tmax: Math.max(1, Math.max(rawMin, rawMax)),\n\t\t};\n\t}\n\n\tprivate truncatePrimary(item: SelectItem, isSelected: boolean, maxWidth: number, columnWidth: number): string {\n\t\tconst displayValue = this.getDisplayValue(item);\n\t\tconst truncatedValue = this.layout.truncatePrimary\n\t\t\t? this.layout.truncatePrimary({\n\t\t\t\t\ttext: displayValue,\n\t\t\t\t\tmaxWidth,\n\t\t\t\t\tcolumnWidth,\n\t\t\t\t\titem,\n\t\t\t\t\tisSelected,\n\t\t\t\t})\n\t\t\t: truncateToWidth(displayValue, maxWidth, \"\");\n\n\t\treturn truncateToWidth(truncatedValue, maxWidth, \"\");\n\t}\n\n\tprivate getDisplayValue(item: SelectItem): string {\n\t\treturn item.label || item.value;\n\t}\n\n\tprivate notifySelectionChange(): void {\n\t\tconst selectedItem = this.filteredItems[this.selectedIndex];\n\t\tif (selectedItem && this.onSelectionChange) {\n\t\t\tthis.onSelectionChange(selectedItem);\n\t\t}\n\t}\n\n\tgetSelectedItem(): SelectItem | null {\n\t\tconst item = this.filteredItems[this.selectedIndex];\n\t\treturn item || null;\n\t}\n}\n"]}

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

@@ -0,0 +1,60 @@
+import type { Component, TuiMouseEvent, TuiMouseEventResult } from "../tui.ts";
+export interface SettingItem {
+    /** Unique identifier for this setting */
+    id: string;
+    /** Display label (left side) */
+    label: string;
+    /** Optional description shown when selected */
+    description?: string;
+    /** Current value to display (right side) */
+    currentValue: string;
+    /** If provided, Enter/Space cycles through these values */
+    values?: string[];
+    /** If provided, Enter opens this submenu. Receives current value and done callback.
+     *  done() accepts an optional selectedValue and an optional navigateTo id to move the cursor after close. */
+    submenu?: (currentValue: string, done: (selectedValue?: string, options?: {
+        navigateTo?: string;
+    }) => void) => Component;
+}
+export interface SettingsListTheme {
+    label: (text: string, selected: boolean) => string;
+    value: (text: string, selected: boolean) => string;
+    description: (text: string) => string;
+    cursor: string;
+    hint: (text: string) => string;
+}
+export interface SettingsListOptions {
+    enableSearch?: boolean;
+}
+export declare class SettingsList implements Component {
+    private items;
+    private filteredItems;
+    private theme;
+    private selectedIndex;
+    private mousePressedIndex;
+    private maxVisible;
+    private onChange;
+    private onCancel;
+    private searchInput?;
+    private searchEnabled;
+    private submenuComponent;
+    private submenuItemIndex;
+    private navigateAfterClose;
+    constructor(items: SettingItem[], maxVisible: number, theme: SettingsListTheme, onChange: (id: string, newValue: string) => void, onCancel: () => void, options?: SettingsListOptions);
+    /** Update an item's currentValue */
+    updateValue(id: string, newValue: string): void;
+    /** Move selection to the item with the given id (no-op if not found). */
+    selectItem(id: string): void;
+    invalidate(): void;
+    render(width: number): string[];
+    private renderMainList;
+    handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
+    handleInput(data: string): void;
+    private getDisplayItems;
+    private getVisibleRange;
+    private activateItem;
+    private closeSubmenu;
+    private applyFilter;
+    private addHintLine;
+}
+//# sourceMappingURL=settings-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings-list.d.ts","sourceRoot":"","sources":["../../src/components/settings-list.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAI/E,MAAM,WAAW,WAAW;IAC3B,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,YAAY,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;iHAC6G;IAC7G,OAAO,CAAC,EAAE,CACT,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,KACrE,SAAS,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;IACnD,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;IACnD,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IACnC,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,qBAAa,YAAa,YAAW,SAAS;IAC7C,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,iBAAiB,CAAqB;IAC9C,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,QAAQ,CAAyC;IACzD,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAQ;IAC5B,OAAO,CAAC,aAAa,CAAU;IAG/B,OAAO,CAAC,gBAAgB,CAA0B;IAClD,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,kBAAkB,CAAuB;IAEjD,YACC,KAAK,EAAE,WAAW,EAAE,EACpB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,EAChD,QAAQ,EAAE,MAAM,IAAI,EACpB,OAAO,GAAE,mBAAwB,EAYjC;IAED,oCAAoC;IACpC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAK9C;IAED,yEAAyE;IACzE,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAM3B;IAED,UAAU,IAAI,IAAI,CAEjB;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAO9B;IAED,OAAO,CAAC,cAAc;IA0EtB,WAAW,CAAC,KAAK,EAAE,aAAa,GAAG,mBAAmB,GAAG,SAAS,CAyCjE;IAED,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CA4B9B;IAED,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;CAanB","sourcesContent":["import { fuzzyFilter } from \"../fuzzy.ts\";\nimport { getKeybindings } from \"../keybindings.ts\";\nimport type { Component, TuiMouseEvent, TuiMouseEventResult } from \"../tui.ts\";\nimport { truncateToWidth, visibleWidth, wrapTextWithAnsi } from \"../utils.ts\";\nimport { Input } from \"./input.ts\";\n\nexport interface SettingItem {\n\t/** Unique identifier for this setting */\n\tid: string;\n\t/** Display label (left side) */\n\tlabel: string;\n\t/** Optional description shown when selected */\n\tdescription?: string;\n\t/** Current value to display (right side) */\n\tcurrentValue: string;\n\t/** If provided, Enter/Space cycles through these values */\n\tvalues?: string[];\n\t/** If provided, Enter opens this submenu. Receives current value and done callback.\n\t *  done() accepts an optional selectedValue and an optional navigateTo id to move the cursor after close. */\n\tsubmenu?: (\n\t\tcurrentValue: string,\n\t\tdone: (selectedValue?: string, options?: { navigateTo?: string }) => void,\n\t) => Component;\n}\n\nexport interface SettingsListTheme {\n\tlabel: (text: string, selected: boolean) => string;\n\tvalue: (text: string, selected: boolean) => string;\n\tdescription: (text: string) => string;\n\tcursor: string;\n\thint: (text: string) => string;\n}\n\nexport interface SettingsListOptions {\n\tenableSearch?: boolean;\n}\n\nexport class SettingsList implements Component {\n\tprivate items: SettingItem[];\n\tprivate filteredItems: SettingItem[];\n\tprivate theme: SettingsListTheme;\n\tprivate selectedIndex = 0;\n\tprivate mousePressedIndex: number | undefined;\n\tprivate maxVisible: number;\n\tprivate onChange: (id: string, newValue: string) => void;\n\tprivate onCancel: () => void;\n\tprivate searchInput?: Input;\n\tprivate searchEnabled: boolean;\n\n\t// Submenu state\n\tprivate submenuComponent: Component | null = null;\n\tprivate submenuItemIndex: number | null = null;\n\tprivate navigateAfterClose: string | null = null;\n\n\tconstructor(\n\t\titems: SettingItem[],\n\t\tmaxVisible: number,\n\t\ttheme: SettingsListTheme,\n\t\tonChange: (id: string, newValue: string) => void,\n\t\tonCancel: () => void,\n\t\toptions: SettingsListOptions = {},\n\t) {\n\t\tthis.items = items;\n\t\tthis.filteredItems = items;\n\t\tthis.maxVisible = maxVisible;\n\t\tthis.theme = theme;\n\t\tthis.onChange = onChange;\n\t\tthis.onCancel = onCancel;\n\t\tthis.searchEnabled = options.enableSearch ?? false;\n\t\tif (this.searchEnabled) {\n\t\t\tthis.searchInput = new Input();\n\t\t}\n\t}\n\n\t/** Update an item's currentValue */\n\tupdateValue(id: string, newValue: string): void {\n\t\tconst item = this.items.find((i) => i.id === id);\n\t\tif (item) {\n\t\t\titem.currentValue = newValue;\n\t\t}\n\t}\n\n\t/** Move selection to the item with the given id (no-op if not found). */\n\tselectItem(id: string): void {\n\t\tconst items = this.searchEnabled ? this.filteredItems : this.items;\n\t\tconst index = items.findIndex((i) => i.id === id);\n\t\tif (index !== -1) {\n\t\t\tthis.selectedIndex = index;\n\t\t}\n\t}\n\n\tinvalidate(): void {\n\t\tthis.submenuComponent?.invalidate?.();\n\t}\n\n\trender(width: number): string[] {\n\t\t// If submenu is active, render it instead\n\t\tif (this.submenuComponent) {\n\t\t\treturn this.submenuComponent.render(width);\n\t\t}\n\n\t\treturn this.renderMainList(width);\n\t}\n\n\tprivate renderMainList(width: number): string[] {\n\t\tconst lines: string[] = [];\n\n\t\tif (this.searchEnabled && this.searchInput) {\n\t\t\tlines.push(...this.searchInput.render(width));\n\t\t\tlines.push(\"\");\n\t\t}\n\n\t\tif (this.items.length === 0) {\n\t\t\tlines.push(this.theme.hint(\"  No settings available\"));\n\t\t\tif (this.searchEnabled) {\n\t\t\t\tthis.addHintLine(lines, width);\n\t\t\t}\n\t\t\treturn lines;\n\t\t}\n\n\t\tconst displayItems = this.getDisplayItems();\n\t\tif (displayItems.length === 0) {\n\t\t\tlines.push(truncateToWidth(this.theme.hint(\"  No matching settings\"), width));\n\t\t\tthis.addHintLine(lines, width);\n\t\t\treturn lines;\n\t\t}\n\n\t\t// Calculate visible range with scrolling\n\t\tconst { startIndex, endIndex } = this.getVisibleRange(displayItems);\n\n\t\t// Calculate max label width for alignment\n\t\tconst maxLabelWidth = Math.min(36, Math.max(...this.items.map((item) => visibleWidth(item.label))));\n\n\t\t// Render visible items\n\t\tfor (let i = startIndex; i < endIndex; i++) {\n\t\t\tconst item = displayItems[i];\n\t\t\tif (!item) continue;\n\n\t\t\tconst isSelected = i === this.selectedIndex;\n\t\t\tconst prefix = isSelected ? this.theme.cursor : \"  \";\n\t\t\tconst prefixWidth = visibleWidth(prefix);\n\n\t\t\t// Pad label to align values\n\t\t\tconst labelPadded = item.label + \" \".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));\n\t\t\tconst labelText = this.theme.label(labelPadded, isSelected);\n\n\t\t\t// Calculate space for value\n\t\t\tconst separator = \"  \";\n\t\t\tconst usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);\n\t\t\tconst valueMaxWidth = width - usedWidth - 2;\n\n\t\t\tconst valueText = this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, \"\"), isSelected);\n\n\t\t\tlines.push(truncateToWidth(prefix + labelText + separator + valueText, width));\n\t\t}\n\n\t\t// Add scroll indicator if needed\n\t\tif (startIndex > 0 || endIndex < displayItems.length) {\n\t\t\tconst scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;\n\t\t\tlines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, \"\")));\n\t\t}\n\n\t\t// Add description for selected item\n\t\tconst selectedItem = displayItems[this.selectedIndex];\n\t\tif (selectedItem?.description) {\n\t\t\tlines.push(\"\");\n\t\t\tconst wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);\n\t\t\tfor (const line of wrappedDesc) {\n\t\t\t\tlines.push(this.theme.description(`  ${line}`));\n\t\t\t}\n\t\t}\n\n\t\t// Add hint\n\t\tthis.addHintLine(lines, width);\n\n\t\treturn lines;\n\t}\n\n\thandleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {\n\t\tif (this.submenuComponent) {\n\t\t\tconst result = this.submenuComponent.handleMouse?.(event);\n\t\t\treturn result ? { ...result, focus: true } : undefined;\n\t\t}\n\n\t\tif (this.searchEnabled && this.searchInput) {\n\t\t\tif (event.y === 0) {\n\t\t\t\tconst result = this.searchInput.handleMouse?.(event);\n\t\t\t\treturn result ? { ...result, focus: true } : undefined;\n\t\t\t}\n\t\t\tif (event.y === 1) return undefined;\n\t\t}\n\n\t\tconst displayItems = this.getDisplayItems();\n\t\tif (displayItems.length === 0) return undefined;\n\t\tif (event.type === \"wheel\" && event.wheelDelta) {\n\t\t\tconst delta = event.wheelDelta < 0 ? -1 : 1;\n\t\t\tconst previousIndex = this.selectedIndex;\n\t\t\tthis.selectedIndex = Math.max(0, Math.min(displayItems.length - 1, this.selectedIndex + delta));\n\t\t\treturn { handled: true, render: this.selectedIndex !== previousIndex };\n\t\t}\n\t\t// Hover must not change selection: the visible range is centered on it.\n\t\tif (event.button !== \"left\" || (event.type !== \"press\" && event.type !== \"click\")) return undefined;\n\n\t\tconst rowOffset = this.searchEnabled ? 2 : 0;\n\t\tconst { startIndex, endIndex } = this.getVisibleRange(displayItems);\n\t\tconst itemIndex = startIndex + event.y - rowOffset;\n\t\tif (itemIndex < startIndex || itemIndex >= endIndex) return undefined;\n\t\tif (event.type === \"press\") {\n\t\t\tthis.mousePressedIndex = itemIndex;\n\t\t\tthis.selectedIndex = itemIndex;\n\t\t\treturn { handled: true, focus: true };\n\t\t}\n\t\tif (event.type === \"click\") {\n\t\t\tthis.selectedIndex = this.mousePressedIndex ?? itemIndex;\n\t\t\tthis.mousePressedIndex = undefined;\n\t\t\tthis.activateItem();\n\t\t\treturn { handled: true };\n\t\t}\n\t\treturn undefined;\n\t}\n\n\thandleInput(data: string): void {\n\t\t// If submenu is active, delegate all input to it\n\t\t// The submenu's onCancel (triggered by escape) will call done() which closes it\n\t\tif (this.submenuComponent) {\n\t\t\tthis.submenuComponent.handleInput?.(data);\n\t\t\treturn;\n\t\t}\n\n\t\t// Main list input handling\n\t\tconst kb = getKeybindings();\n\t\tconst displayItems = this.getDisplayItems();\n\t\tif (kb.matches(data, \"tui.select.up\")) {\n\t\t\tif (displayItems.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;\n\t\t} else if (kb.matches(data, \"tui.select.down\")) {\n\t\t\tif (displayItems.length === 0) return;\n\t\t\tthis.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;\n\t\t} else if (\n\t\t\tkb.matches(data, \"tui.select.confirm\") ||\n\t\t\t(data === \" \" && (!this.searchEnabled || this.searchInput?.getValue().length === 0))\n\t\t) {\n\t\t\tthis.activateItem();\n\t\t} else if (kb.matches(data, \"tui.select.cancel\")) {\n\t\t\tthis.onCancel();\n\t\t} else if (this.searchEnabled && this.searchInput) {\n\t\t\tthis.searchInput.handleInput(data);\n\t\t\tthis.applyFilter(this.searchInput.getValue());\n\t\t}\n\t}\n\n\tprivate getDisplayItems(): SettingItem[] {\n\t\treturn this.searchEnabled ? this.filteredItems : this.items;\n\t}\n\n\tprivate getVisibleRange(displayItems: readonly SettingItem[]): { startIndex: number; endIndex: number } {\n\t\tconst startIndex = Math.max(\n\t\t\t0,\n\t\t\tMath.min(this.selectedIndex - Math.floor(this.maxVisible / 2), displayItems.length - this.maxVisible),\n\t\t);\n\t\treturn { startIndex, endIndex: Math.min(startIndex + this.maxVisible, displayItems.length) };\n\t}\n\n\tprivate activateItem(): void {\n\t\tconst item = this.getDisplayItems()[this.selectedIndex];\n\t\tif (!item) return;\n\n\t\tif (item.submenu) {\n\t\t\t// Open submenu, passing current value so it can pre-select correctly\n\t\t\tthis.submenuItemIndex = this.selectedIndex;\n\t\t\tthis.submenuComponent = item.submenu(\n\t\t\t\titem.currentValue,\n\t\t\t\t(selectedValue?: string, options?: { navigateTo?: string }) => {\n\t\t\t\t\tif (selectedValue !== undefined) {\n\t\t\t\t\t\titem.currentValue = selectedValue;\n\t\t\t\t\t\tthis.onChange(item.id, selectedValue);\n\t\t\t\t\t}\n\t\t\t\t\tif (options?.navigateTo) {\n\t\t\t\t\t\tthis.navigateAfterClose = options.navigateTo;\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeSubmenu();\n\t\t\t\t},\n\t\t\t);\n\t\t} else if (item.values && item.values.length > 0) {\n\t\t\t// Cycle through values\n\t\t\tconst currentIndex = item.values.indexOf(item.currentValue);\n\t\t\tconst nextIndex = (currentIndex + 1) % item.values.length;\n\t\t\tconst newValue = item.values[nextIndex];\n\t\t\titem.currentValue = newValue;\n\t\t\tthis.onChange(item.id, newValue);\n\t\t}\n\t}\n\n\tprivate closeSubmenu(): void {\n\t\tthis.submenuComponent = null;\n\t\tif (this.navigateAfterClose !== null) {\n\t\t\tconst id = this.navigateAfterClose;\n\t\t\tthis.navigateAfterClose = null;\n\t\t\tthis.submenuItemIndex = null;\n\t\t\tthis.selectItem(id);\n\t\t\t// Open the target item's submenu automatically\n\t\t\tthis.activateItem();\n\t\t} else if (this.submenuItemIndex !== null) {\n\t\t\t// Restore selection to the item that opened the submenu\n\t\t\tthis.selectedIndex = this.submenuItemIndex;\n\t\t\tthis.submenuItemIndex = null;\n\t\t}\n\t}\n\n\tprivate applyFilter(query: string): void {\n\t\tthis.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);\n\t\tthis.selectedIndex = 0;\n\t}\n\n\tprivate addHintLine(lines: string[], width: number): void {\n\t\tlines.push(\"\");\n\t\tlines.push(\n\t\t\ttruncateToWidth(\n\t\t\t\tthis.theme.hint(\n\t\t\t\t\tthis.searchEnabled\n\t\t\t\t\t\t? \"  Type to search · Enter/Space to change · Esc to cancel\"\n\t\t\t\t\t\t: \"  Enter/Space to change · Esc to cancel\",\n\t\t\t\t),\n\t\t\t\twidth,\n\t\t\t),\n\t\t);\n\t}\n}\n"]}

package/dist/components/settings-list.js

@@ -0,0 +1,252 @@
+import { fuzzyFilter } from "../fuzzy.js";
+import { getKeybindings } from "../keybindings.js";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+import { Input } from "./input.js";
+export class SettingsList {
+    items;
+    filteredItems;
+    theme;
+    selectedIndex = 0;
+    mousePressedIndex;
+    maxVisible;
+    onChange;
+    onCancel;
+    searchInput;
+    searchEnabled;
+    // Submenu state
+    submenuComponent = null;
+    submenuItemIndex = null;
+    navigateAfterClose = null;
+    constructor(items, maxVisible, theme, onChange, onCancel, options = {}) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+        this.onChange = onChange;
+        this.onCancel = onCancel;
+        this.searchEnabled = options.enableSearch ?? false;
+        if (this.searchEnabled) {
+            this.searchInput = new Input();
+        }
+    }
+    /** Update an item's currentValue */
+    updateValue(id, newValue) {
+        const item = this.items.find((i) => i.id === id);
+        if (item) {
+            item.currentValue = newValue;
+        }
+    }
+    /** Move selection to the item with the given id (no-op if not found). */
+    selectItem(id) {
+        const items = this.searchEnabled ? this.filteredItems : this.items;
+        const index = items.findIndex((i) => i.id === id);
+        if (index !== -1) {
+            this.selectedIndex = index;
+        }
+    }
+    invalidate() {
+        this.submenuComponent?.invalidate?.();
+    }
+    render(width) {
+        // If submenu is active, render it instead
+        if (this.submenuComponent) {
+            return this.submenuComponent.render(width);
+        }
+        return this.renderMainList(width);
+    }
+    renderMainList(width) {
+        const lines = [];
+        if (this.searchEnabled && this.searchInput) {
+            lines.push(...this.searchInput.render(width));
+            lines.push("");
+        }
+        if (this.items.length === 0) {
+            lines.push(this.theme.hint("  No settings available"));
+            if (this.searchEnabled) {
+                this.addHintLine(lines, width);
+            }
+            return lines;
+        }
+        const displayItems = this.getDisplayItems();
+        if (displayItems.length === 0) {
+            lines.push(truncateToWidth(this.theme.hint("  No matching settings"), width));
+            this.addHintLine(lines, width);
+            return lines;
+        }
+        // Calculate visible range with scrolling
+        const { startIndex, endIndex } = this.getVisibleRange(displayItems);
+        // Calculate max label width for alignment
+        const maxLabelWidth = Math.min(36, Math.max(...this.items.map((item) => visibleWidth(item.label))));
+        // Render visible items
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = displayItems[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const prefix = isSelected ? this.theme.cursor : "  ";
+            const prefixWidth = visibleWidth(prefix);
+            // Pad label to align values
+            const labelPadded = item.label + " ".repeat(Math.max(0, maxLabelWidth - visibleWidth(item.label)));
+            const labelText = this.theme.label(labelPadded, isSelected);
+            // Calculate space for value
+            const separator = "  ";
+            const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
+            const valueMaxWidth = width - usedWidth - 2;
+            const valueText = this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+            lines.push(truncateToWidth(prefix + labelText + separator + valueText, width));
+        }
+        // Add scroll indicator if needed
+        if (startIndex > 0 || endIndex < displayItems.length) {
+            const scrollText = `  (${this.selectedIndex + 1}/${displayItems.length})`;
+            lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+        }
+        // Add description for selected item
+        const selectedItem = displayItems[this.selectedIndex];
+        if (selectedItem?.description) {
+            lines.push("");
+            const wrappedDesc = wrapTextWithAnsi(selectedItem.description, width - 4);
+            for (const line of wrappedDesc) {
+                lines.push(this.theme.description(`  ${line}`));
+            }
+        }
+        // Add hint
+        this.addHintLine(lines, width);
+        return lines;
+    }
+    handleMouse(event) {
+        if (this.submenuComponent) {
+            const result = this.submenuComponent.handleMouse?.(event);
+            return result ? { ...result, focus: true } : undefined;
+        }
+        if (this.searchEnabled && this.searchInput) {
+            if (event.y === 0) {
+                const result = this.searchInput.handleMouse?.(event);
+                return result ? { ...result, focus: true } : undefined;
+            }
+            if (event.y === 1)
+                return undefined;
+        }
+        const displayItems = this.getDisplayItems();
+        if (displayItems.length === 0)
+            return undefined;
+        if (event.type === "wheel" && event.wheelDelta) {
+            const delta = event.wheelDelta < 0 ? -1 : 1;
+            const previousIndex = this.selectedIndex;
+            this.selectedIndex = Math.max(0, Math.min(displayItems.length - 1, this.selectedIndex + delta));
+            return { handled: true, render: this.selectedIndex !== previousIndex };
+        }
+        // Hover must not change selection: the visible range is centered on it.
+        if (event.button !== "left" || (event.type !== "press" && event.type !== "click"))
+            return undefined;
+        const rowOffset = this.searchEnabled ? 2 : 0;
+        const { startIndex, endIndex } = this.getVisibleRange(displayItems);
+        const itemIndex = startIndex + event.y - rowOffset;
+        if (itemIndex < startIndex || itemIndex >= endIndex)
+            return undefined;
+        if (event.type === "press") {
+            this.mousePressedIndex = itemIndex;
+            this.selectedIndex = itemIndex;
+            return { handled: true, focus: true };
+        }
+        if (event.type === "click") {
+            this.selectedIndex = this.mousePressedIndex ?? itemIndex;
+            this.mousePressedIndex = undefined;
+            this.activateItem();
+            return { handled: true };
+        }
+        return undefined;
+    }
+    handleInput(data) {
+        // If submenu is active, delegate all input to it
+        // The submenu's onCancel (triggered by escape) will call done() which closes it
+        if (this.submenuComponent) {
+            this.submenuComponent.handleInput?.(data);
+            return;
+        }
+        // Main list input handling
+        const kb = getKeybindings();
+        const displayItems = this.getDisplayItems();
+        if (kb.matches(data, "tui.select.up")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+        }
+        else if (kb.matches(data, "tui.select.down")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+        }
+        else if (kb.matches(data, "tui.select.confirm") ||
+            (data === " " && (!this.searchEnabled || this.searchInput?.getValue().length === 0))) {
+            this.activateItem();
+        }
+        else if (kb.matches(data, "tui.select.cancel")) {
+            this.onCancel();
+        }
+        else if (this.searchEnabled && this.searchInput) {
+            this.searchInput.handleInput(data);
+            this.applyFilter(this.searchInput.getValue());
+        }
+    }
+    getDisplayItems() {
+        return this.searchEnabled ? this.filteredItems : this.items;
+    }
+    getVisibleRange(displayItems) {
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), displayItems.length - this.maxVisible));
+        return { startIndex, endIndex: Math.min(startIndex + this.maxVisible, displayItems.length) };
+    }
+    activateItem() {
+        const item = this.getDisplayItems()[this.selectedIndex];
+        if (!item)
+            return;
+        if (item.submenu) {
+            // Open submenu, passing current value so it can pre-select correctly
+            this.submenuItemIndex = this.selectedIndex;
+            this.submenuComponent = item.submenu(item.currentValue, (selectedValue, options) => {
+                if (selectedValue !== undefined) {
+                    item.currentValue = selectedValue;
+                    this.onChange(item.id, selectedValue);
+                }
+                if (options?.navigateTo) {
+                    this.navigateAfterClose = options.navigateTo;
+                }
+                this.closeSubmenu();
+            });
+        }
+        else if (item.values && item.values.length > 0) {
+            // Cycle through values
+            const currentIndex = item.values.indexOf(item.currentValue);
+            const nextIndex = (currentIndex + 1) % item.values.length;
+            const newValue = item.values[nextIndex];
+            item.currentValue = newValue;
+            this.onChange(item.id, newValue);
+        }
+    }
+    closeSubmenu() {
+        this.submenuComponent = null;
+        if (this.navigateAfterClose !== null) {
+            const id = this.navigateAfterClose;
+            this.navigateAfterClose = null;
+            this.submenuItemIndex = null;
+            this.selectItem(id);
+            // Open the target item's submenu automatically
+            this.activateItem();
+        }
+        else if (this.submenuItemIndex !== null) {
+            // Restore selection to the item that opened the submenu
+            this.selectedIndex = this.submenuItemIndex;
+            this.submenuItemIndex = null;
+        }
+    }
+    applyFilter(query) {
+        this.filteredItems = fuzzyFilter(this.items, query, (item) => item.label);
+        this.selectedIndex = 0;
+    }
+    addHintLine(lines, width) {
+        lines.push("");
+        lines.push(truncateToWidth(this.theme.hint(this.searchEnabled
+            ? "  Type to search · Enter/Space to change · Esc to cancel"
+            : "  Enter/Space to change · Esc to cancel"), width));
+    }
+}
+//# sourceMappingURL=settings-list.js.map