@elizaos/tui 2.0.0-alpha.10

package/dist/components/select-list.js

@@ -0,0 +1,151 @@
+import { getEditorKeybindings } from "../keybindings.js";
+import { truncateToWidth } from "../utils.js";
+const normalizeToSingleLine = (text) => text.replace(/[\r\n]+/g, " ").trim();
+export class SelectList {
+    items = [];
+    filteredItems = [];
+    selectedIndex = 0;
+    maxVisible = 5;
+    theme;
+    onSelect;
+    onCancel;
+    onSelectionChange;
+    constructor(items, maxVisible, theme) {
+        this.items = items;
+        this.filteredItems = items;
+        this.maxVisible = maxVisible;
+        this.theme = theme;
+    }
+    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;
+        }
+        // Calculate visible range with scrolling
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), this.filteredItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, this.filteredItems.length);
+        // 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;
+            let line = "";
+            if (isSelected) {
+                // Use arrow indicator for selection - entire line uses selectedText color
+                const prefixWidth = 2; // "→ " is 2 characters visually
+                const displayValue = item.label || item.value;
+                if (descriptionSingleLine && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefixWidth - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description using visible widths
+                    const descriptionStart = prefixWidth + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                        // Apply selectedText to entire line content
+                        line = this.theme.selectedText(`→ ${truncatedValue}${spacing}${truncatedDesc}`);
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefixWidth - 2;
+                        line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefixWidth - 2;
+                    line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+                }
+            }
+            else {
+                const displayValue = item.label || item.value;
+                const prefix = "  ";
+                if (descriptionSingleLine && width > 40) {
+                    // Calculate how much space we have for value + description
+                    const maxValueWidth = Math.min(30, width - prefix.length - 4);
+                    const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+                    const spacing = " ".repeat(Math.max(1, 32 - truncatedValue.length));
+                    // Calculate remaining space for description
+                    const descriptionStart = prefix.length + truncatedValue.length + spacing.length;
+                    const remainingWidth = width - descriptionStart - 2; // -2 for safety
+                    if (remainingWidth > 10) {
+                        const truncatedDesc = truncateToWidth(descriptionSingleLine, remainingWidth, "");
+                        const descText = this.theme.description(spacing + truncatedDesc);
+                        line = prefix + truncatedValue + descText;
+                    }
+                    else {
+                        // Not enough space for description
+                        const maxWidth = width - prefix.length - 2;
+                        line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                    }
+                }
+                else {
+                    // No description or not enough width
+                    const maxWidth = width - prefix.length - 2;
+                    line = prefix + truncateToWidth(displayValue, maxWidth, "");
+                }
+            }
+            lines.push(line);
+        }
+        // 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;
+    }
+    handleInput(keyData) {
+        const kb = getEditorKeybindings();
+        // Up arrow - wrap to bottom when at top
+        if (kb.matches(keyData, "selectUp")) {
+            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, "selectDown")) {
+            this.selectedIndex = this.selectedIndex === this.filteredItems.length - 1 ? 0 : this.selectedIndex + 1;
+            this.notifySelectionChange();
+        }
+        // Enter
+        else if (kb.matches(keyData, "selectConfirm")) {
+            const selectedItem = this.filteredItems[this.selectedIndex];
+            if (selectedItem && this.onSelect) {
+                this.onSelect(selectedItem);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "selectCancel")) {
+            if (this.onCancel) {
+                this.onCancel();
+            }
+        }
+    }
+    notifySelectionChange() {
+        const selectedItem = this.filteredItems[this.selectedIndex];
+        if (selectedItem && this.onSelectionChange) {
+            this.onSelectionChange(selectedItem);
+        }
+    }
+    getSelectedItem() {
+        const item = this.filteredItems[this.selectedIndex];
+        return item || null;
+    }
+}

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

@@ -0,0 +1,50 @@
+import type { Component } from "../tui.js";
+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. */
+    submenu?: (currentValue: string, done: (selectedValue?: 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 maxVisible;
+    private onChange;
+    private onCancel;
+    private searchInput?;
+    private searchEnabled;
+    private submenuComponent;
+    private submenuItemIndex;
+    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;
+    invalidate(): void;
+    render(width: number): string[];
+    private renderMainList;
+    handleInput(data: string): void;
+    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,MAAM,WAAW,CAAC;AAI3C,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,uFAAuF;IACvF,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC,EAAE,MAAM,KAAK,IAAI,KAAK,SAAS,CAAC;CACtF;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,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;gBAG9C,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;IAclC,oCAAoC;IACpC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAO/C,UAAU,IAAI,IAAI;IAIlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;IAS/B,OAAO,CAAC,cAAc;IA8EtB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IA+B/B,OAAO,CAAC,YAAY;IAwBpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;CAanB"}

package/dist/components/settings-list.js

@@ -0,0 +1,184 @@
+import { fuzzyFilter } from "../fuzzy.js";
+import { getEditorKeybindings } from "../keybindings.js";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+import { Input } from "./input.js";
+export class SettingsList {
+    items;
+    filteredItems;
+    theme;
+    selectedIndex = 0;
+    maxVisible;
+    onChange;
+    onCancel;
+    searchInput;
+    searchEnabled;
+    // Submenu state
+    submenuComponent = null;
+    submenuItemIndex = 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;
+        }
+    }
+    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.searchEnabled ? this.filteredItems : this.items;
+        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 = Math.max(0, Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), displayItems.length - this.maxVisible));
+        const endIndex = Math.min(startIndex + this.maxVisible, displayItems.length);
+        // Calculate max label width for alignment
+        const maxLabelWidth = Math.min(30, 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;
+    }
+    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 = getEditorKeybindings();
+        const displayItems = this.searchEnabled ? this.filteredItems : this.items;
+        if (kb.matches(data, "selectUp")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === 0 ? displayItems.length - 1 : this.selectedIndex - 1;
+        }
+        else if (kb.matches(data, "selectDown")) {
+            if (displayItems.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === displayItems.length - 1 ? 0 : this.selectedIndex + 1;
+        }
+        else if (kb.matches(data, "selectConfirm") || data === " ") {
+            this.activateItem();
+        }
+        else if (kb.matches(data, "selectCancel")) {
+            this.onCancel();
+        }
+        else if (this.searchEnabled && this.searchInput) {
+            const sanitized = data.replace(/ /g, "");
+            if (!sanitized) {
+                return;
+            }
+            this.searchInput.handleInput(sanitized);
+            this.applyFilter(this.searchInput.getValue());
+        }
+    }
+    activateItem() {
+        const item = this.searchEnabled ? this.filteredItems[this.selectedIndex] : this.items[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) => {
+                if (selectedValue !== undefined) {
+                    item.currentValue = selectedValue;
+                    this.onChange(item.id, selectedValue);
+                }
+                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;
+        // Restore selection to the item that opened the submenu
+        if (this.submenuItemIndex !== null) {
+            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));
+    }
+}

package/dist/components/spacer.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from "../tui.js";
+/**
+ * Spacer component that renders empty lines
+ */
+export declare class Spacer implements Component {
+    private lines;
+    constructor(lines?: number);
+    setLines(lines: number): void;
+    invalidate(): void;
+    render(_width: number): string[];
+}
+//# sourceMappingURL=spacer.d.ts.map

package/dist/components/spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacer.d.ts","sourceRoot":"","sources":["../../src/components/spacer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,qBAAa,MAAO,YAAW,SAAS;IACvC,OAAO,CAAC,KAAK,CAAS;gBAEV,KAAK,GAAE,MAAU;IAI7B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B,UAAU,IAAI,IAAI;IAIlB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE;CAOhC"}

package/dist/components/spacer.js

@@ -0,0 +1,22 @@
+/**
+ * Spacer component that renders empty lines
+ */
+export class Spacer {
+    lines;
+    constructor(lines = 1) {
+        this.lines = lines;
+    }
+    setLines(lines) {
+        this.lines = lines;
+    }
+    invalidate() {
+        // No cached state to invalidate currently
+    }
+    render(_width) {
+        const result = [];
+        for (let i = 0; i < this.lines; i++) {
+            result.push("");
+        }
+        return result;
+    }
+}

package/dist/components/text.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from "../tui.js";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export declare class Text implements Component {
+    private text;
+    private paddingX;
+    private paddingY;
+    private customBgFn?;
+    private cachedText?;
+    private cachedWidth?;
+    private cachedLines?;
+    constructor(text?: string, paddingX?: number, paddingY?: number, customBgFn?: (text: string) => string);
+    setText(text: string): void;
+    setCustomBgFn(customBgFn?: (text: string) => string): void;
+    invalidate(): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/components/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,qBAAa,IAAK,YAAW,SAAS;IACrC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAC,CAA2B;IAG9C,OAAO,CAAC,UAAU,CAAC,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAEnB,IAAI,GAAE,MAAW,EAAE,QAAQ,GAAE,MAAU,EAAE,QAAQ,GAAE,MAAU,EAAE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM;IAOhH,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAO3B,aAAa,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI;IAO1D,UAAU,IAAI,IAAI;IAMlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CA6D/B"}

package/dist/components/text.js

@@ -0,0 +1,88 @@
+import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "../utils.js";
+/**
+ * Text component - displays multi-line text with word wrapping
+ */
+export class Text {
+    text;
+    paddingX; // Left/right padding
+    paddingY; // Top/bottom padding
+    customBgFn;
+    // Cache for rendered output
+    cachedText;
+    cachedWidth;
+    cachedLines;
+    constructor(text = "", paddingX = 1, paddingY = 1, customBgFn) {
+        this.text = text;
+        this.paddingX = paddingX;
+        this.paddingY = paddingY;
+        this.customBgFn = customBgFn;
+    }
+    setText(text) {
+        this.text = text;
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    setCustomBgFn(customBgFn) {
+        this.customBgFn = customBgFn;
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    invalidate() {
+        this.cachedText = undefined;
+        this.cachedWidth = undefined;
+        this.cachedLines = undefined;
+    }
+    render(width) {
+        // Check cache
+        if (this.cachedLines && this.cachedText === this.text && this.cachedWidth === width) {
+            return this.cachedLines;
+        }
+        // Don't render anything if there's no actual text
+        if (!this.text || this.text.trim() === "") {
+            const result = [];
+            this.cachedText = this.text;
+            this.cachedWidth = width;
+            this.cachedLines = result;
+            return result;
+        }
+        // Replace tabs with 3 spaces
+        const normalizedText = this.text.replace(/\t/g, "   ");
+        // Calculate content width (subtract left/right margins)
+        const contentWidth = Math.max(1, width - this.paddingX * 2);
+        // Wrap text (this preserves ANSI codes but does NOT pad)
+        const wrappedLines = wrapTextWithAnsi(normalizedText, contentWidth);
+        // Add margins and background to each line
+        const leftMargin = " ".repeat(this.paddingX);
+        const rightMargin = " ".repeat(this.paddingX);
+        const contentLines = [];
+        for (const line of wrappedLines) {
+            // Add margins
+            const lineWithMargins = leftMargin + line + rightMargin;
+            // Apply background if specified (this also pads to full width)
+            if (this.customBgFn) {
+                contentLines.push(applyBackgroundToLine(lineWithMargins, width, this.customBgFn));
+            }
+            else {
+                // No background - just pad to width with spaces
+                const visibleLen = visibleWidth(lineWithMargins);
+                const paddingNeeded = Math.max(0, width - visibleLen);
+                contentLines.push(lineWithMargins + " ".repeat(paddingNeeded));
+            }
+        }
+        // Add top/bottom padding (empty lines)
+        const emptyLine = " ".repeat(width);
+        const emptyLines = [];
+        for (let i = 0; i < this.paddingY; i++) {
+            const line = this.customBgFn ? applyBackgroundToLine(emptyLine, width, this.customBgFn) : emptyLine;
+            emptyLines.push(line);
+        }
+        const result = [...emptyLines, ...contentLines, ...emptyLines];
+        // Update cache
+        this.cachedText = this.text;
+        this.cachedWidth = width;
+        this.cachedLines = result;
+        return result.length > 0 ? result : [""];
+    }
+}

package/dist/components/toast.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Toast component for displaying temporary notifications.
+ */
+import type { Component } from "../tui.js";
+/**
+ * Toast severity levels.
+ */
+export type ToastType = "info" | "success" | "warning" | "error";
+/**
+ * Theme functions for Toast styling.
+ */
+export interface ToastTheme {
+    /** Style function for info toasts */
+    info: (text: string) => string;
+    /** Style function for success toasts */
+    success: (text: string) => string;
+    /** Style function for warning toasts */
+    warning: (text: string) => string;
+    /** Style function for error toasts */
+    error: (text: string) => string;
+    /** Optional border character (default: "│") */
+    borderChar?: string;
+    /** Optional icon for each type */
+    icons?: {
+        info?: string;
+        success?: string;
+        warning?: string;
+        error?: string;
+    };
+}
+/**
+ * Options for Toast configuration.
+ */
+export interface ToastOptions {
+    /** Theme for styling the toast */
+    theme?: ToastTheme;
+    /** Toast type/severity (default: "info") */
+    type?: ToastType;
+    /** Whether to show an icon (default: true) */
+    showIcon?: boolean;
+    /** Whether to show a border (default: true) */
+    showBorder?: boolean;
+    /** Horizontal padding inside the toast (default: 1) */
+    paddingX?: number;
+}
+/**
+ * Toast component for displaying temporary notification messages.
+ *
+ * Features:
+ * - Multiple severity levels (info, success, warning, error)
+ * - Optional icons
+ * - Configurable border
+ * - Theming support
+ */
+export declare class Toast implements Component {
+    private message;
+    private type;
+    private theme;
+    private showIcon;
+    private showBorder;
+    private paddingX;
+    private cachedMessage?;
+    private cachedType?;
+    private cachedWidth?;
+    private cachedLines?;
+    constructor(message: string, options?: ToastOptions);
+    setMessage(message: string): void;
+    setType(type: ToastType): void;
+    setTheme(theme: ToastTheme): void;
+    invalidate(): void;
+    render(width: number): string[];
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,qCAAqC;IACrC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,wCAAwC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,wCAAwC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,sCAAsC;IACtC,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,KAAK,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;CACF;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC5B,kCAAkC;IAClC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAwBD;;;;;;;;GAQG;AACH,qBAAa,KAAM,YAAW,SAAS;IACtC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,IAAI,CAAY;IACxB,OAAO,CAAC,KAAK,CAAa;IAC1B,OAAO,CAAC,QAAQ,CAAU;IAC1B,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,UAAU,CAAC,CAAY;IAC/B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAW;gBAEnB,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IASvD,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI;IAK9B,QAAQ,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAKjC,UAAU,IAAI,IAAI;IAOlB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE;CAyD/B"}