@dui-toolkit/plugin-tui 0.1.1-next.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jesus Alcala
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.mts

@@ -0,0 +1,227 @@
+import { DuiPlugin } from "@bdocs/dui";
+
+//#region src/widget.d.ts
+/**
+ * Base widget interface — every widget implements this.
+ *
+ * Widgets are pure renderers: they receive state and return an ANSI string.
+ * No side effects, no mutation. The engine handles focus, input routing,
+ * and re-rendering.
+ */
+type WidgetType = "text-input" | "select-list" | "modal" | "status-bar" | "custom";
+interface WidgetState {
+  /** Widget unique id. */
+  id: string;
+  /** Widget type. */
+  type: WidgetType;
+  /** Whether this widget can receive focus. */
+  focusable: boolean;
+  /** Whether this widget is currently focused. */
+  focused: boolean;
+  /** Whether this widget is visible. */
+  visible: boolean;
+  /** Widget-specific state. */
+  data: Record<string, unknown>;
+}
+interface WidgetRenderOptions {
+  /** Available width in columns. */
+  width: number;
+  /** Available height in rows. */
+  height: number;
+  /** Whether the widget is focused. */
+  focused: boolean;
+  /** Theme overrides. */
+  theme?: Record<string, string>;
+}
+interface WidgetInputEvent {
+  /** Key name (e.g. "a", "Enter", "ArrowUp", "Tab"). */
+  key: string;
+  /** Raw character (for printable keys). */
+  char?: string;
+  /** Modifier flags. */
+  ctrl?: boolean;
+  shift?: boolean;
+  alt?: boolean;
+}
+interface Widget<TData = Record<string, unknown>> {
+  /** Widget unique id. */
+  id: string;
+  /** Widget type. */
+  type: WidgetType;
+  /** Whether this widget can receive focus. */
+  focusable: boolean;
+  /** Whether this widget is visible. */
+  visible: boolean;
+  /** Get current state. */
+  getState(): WidgetState;
+  /** Render to ANSI string. */
+  render(opts: WidgetRenderOptions): string;
+  /** Handle input event. Returns true if the event was consumed. */
+  handleInput(event: WidgetInputEvent): boolean;
+  /** Update widget data. */
+  setData(data: Partial<TData>): void;
+  /** Get widget data. */
+  getData(): TData;
+  /** Set focused state. */
+  setFocused(focused: boolean): void;
+  /** Set visible state. */
+  setVisible(visible: boolean): void;
+}
+declare abstract class BaseWidget<TData = Record<string, unknown>> implements Widget<TData> {
+  id: string;
+  type: WidgetType;
+  focusable: boolean;
+  visible: boolean;
+  protected focused: boolean;
+  protected data: TData;
+  constructor(id: string, type: WidgetType, data: TData, focusable?: boolean);
+  getState(): WidgetState;
+  abstract render(opts: WidgetRenderOptions): string;
+  abstract handleInput(event: WidgetInputEvent): boolean;
+  setData(data: Partial<TData>): void;
+  getData(): TData;
+  setFocused(focused: boolean): void;
+  setVisible(visible: boolean): void;
+}
+//#endregion
+//#region src/widgets/text-input.d.ts
+interface TextInputData {
+  /** Current text value. */
+  value: string;
+  /** Placeholder when empty. */
+  placeholder: string;
+  /** Maximum length (0 = unlimited). */
+  maxLength: number;
+  /** Whether the input is read-only. */
+  readOnly: boolean;
+  /** Mask character for password fields (null = plain text). */
+  mask: string | null;
+  /** Callback when value changes. */
+  onChange?: (value: string) => void;
+  /** Callback when Enter is pressed. */
+  onSubmit?: (value: string) => void;
+}
+interface TextInputOptions {
+  placeholder?: string;
+  maxLength?: number;
+  readOnly?: boolean;
+  mask?: string | null;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+}
+declare class TextInput extends BaseWidget<TextInputData> {
+  private cursorPos;
+  constructor(id: string, opts?: TextInputOptions);
+  /** Set the text value programmatically. */
+  setValue(value: string): void;
+  /** Get the current text value. */
+  getValue(): string;
+  render(opts: WidgetRenderOptions): string;
+  handleInput(event: WidgetInputEvent): boolean;
+}
+//#endregion
+//#region src/widgets/select-list.d.ts
+interface SelectItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  /** Optional description shown dimmed. */
+  description?: string;
+}
+interface SelectListData {
+  items: SelectItem[];
+  selectedIndex: number;
+  scrollOffset: number;
+  /** Filter query (empty = no filter). */
+  filter: string;
+  /** Whether filter mode is active. */
+  filterActive: boolean;
+  /** Callback when selection changes. */
+  onSelect?: (item: SelectItem, index: number) => void;
+  /** Callback when Enter is pressed. */
+  onSubmit?: (item: SelectItem, index: number) => void;
+}
+interface SelectListOptions {
+  items: SelectItem[];
+  onSelect?: (item: SelectItem, index: number) => void;
+  onSubmit?: (item: SelectItem, index: number) => void;
+}
+declare class SelectList extends BaseWidget<SelectListData> {
+  constructor(id: string, opts: SelectListOptions);
+  /** Get the currently selected item. */
+  getSelected(): SelectItem | undefined;
+  /** Get all items matching the current filter. */
+  private getFilteredItems;
+  /** Set items programmatically. */
+  setItems(items: SelectItem[]): void;
+  render(opts: WidgetRenderOptions): string;
+  handleInput(event: WidgetInputEvent): boolean;
+}
+//#endregion
+//#region src/widgets/modal.d.ts
+interface ModalAction {
+  label: string;
+  value: string;
+  /** Whether this is the primary (highlighted) action. */
+  primary?: boolean;
+}
+interface ModalData {
+  title: string;
+  content: string;
+  actions: ModalAction[];
+  selectedAction: number;
+  /** Callback when an action is selected. */
+  onAction?: (action: ModalAction) => void;
+  /** Callback when Escape is pressed. */
+  onCancel?: () => void;
+}
+interface ModalOptions {
+  title: string;
+  content: string;
+  actions?: Array<string | ModalAction>;
+  onAction?: (action: ModalAction) => void;
+  onCancel?: () => void;
+}
+declare class Modal extends BaseWidget<ModalData> {
+  constructor(id: string, opts: ModalOptions);
+  render(opts: WidgetRenderOptions): string;
+  handleInput(event: WidgetInputEvent): boolean;
+}
+//#endregion
+//#region src/widgets/status-bar.d.ts
+type StatusBarStyle = "default" | "info" | "success" | "warning" | "error";
+interface StatusBarSection {
+  text: string;
+  style?: StatusBarStyle;
+  /** Keyboard hint to show (e.g. "Ctrl+S"). */
+  shortcut?: string;
+}
+interface StatusBarData {
+  left: string;
+  center: string;
+  right: string;
+  sections: StatusBarSection[];
+}
+interface StatusBarOptions {
+  left?: string;
+  center?: string;
+  right?: string;
+  sections?: StatusBarSection[];
+}
+declare class StatusBar extends BaseWidget<StatusBarData> {
+  constructor(id: string, opts?: StatusBarOptions);
+  /** Update status bar text. */
+  update(opts: {
+    left?: string;
+    center?: string;
+    right?: string;
+    sections?: StatusBarSection[];
+  }): void;
+  render(opts: WidgetRenderOptions): string;
+  handleInput(): boolean;
+}
+//#endregion
+//#region src/plugin.d.ts
+declare const tuiPlugin: DuiPlugin;
+//#endregion
+export { BaseWidget, Modal, type ModalAction, type ModalData, type ModalOptions, type SelectItem, SelectList, type SelectListData, type SelectListOptions, StatusBar, type StatusBarData, type StatusBarOptions, type StatusBarSection, type StatusBarStyle, TextInput, type TextInputData, type TextInputOptions, type Widget, type WidgetInputEvent, type WidgetRenderOptions, type WidgetState, type WidgetType, tuiPlugin };

package/dist/index.mjs

@@ -0,0 +1,589 @@
+import { stripAnsi, visibleLength } from "@bdocs/dui";
+import { readFileSync } from "node:fs";
+//#region src/widget.ts
+var BaseWidget = class {
+	id;
+	type;
+	focusable;
+	visible;
+	focused = false;
+	data;
+	constructor(id, type, data, focusable = true) {
+		this.id = id;
+		this.type = type;
+		this.focusable = focusable;
+		this.visible = true;
+		this.data = data;
+	}
+	getState() {
+		return {
+			id: this.id,
+			type: this.type,
+			focusable: this.focusable,
+			focused: this.focused,
+			visible: this.visible,
+			data: this.data
+		};
+	}
+	setData(data) {
+		Object.assign(this.data, data);
+	}
+	getData() {
+		return this.data;
+	}
+	setFocused(focused) {
+		this.focused = focused;
+	}
+	setVisible(visible) {
+		this.visible = visible;
+	}
+};
+//#endregion
+//#region src/widgets/text-input.ts
+/**
+* Text Input widget — editable single-line text field.
+*
+* Features:
+*   - Cursor navigation (left/right, home/end)
+*   - Insert/delete (backspace, delete)
+*   - Placeholder text when empty
+*   - Focus ring
+*   - Value change callback
+*
+* @example
+* ```ts
+* const input = new TextInput("name", { placeholder: "Enter name..." });
+* input.render({ width: 40, height: 3, focused: true });
+* ```
+*/
+var TextInput = class extends BaseWidget {
+	cursorPos = 0;
+	constructor(id, opts = {}) {
+		super(id, "text-input", {
+			value: "",
+			placeholder: opts.placeholder ?? "",
+			maxLength: opts.maxLength ?? 0,
+			readOnly: opts.readOnly ?? false,
+			mask: opts.mask ?? null,
+			onChange: opts.onChange,
+			onSubmit: opts.onSubmit
+		});
+	}
+	/** Set the text value programmatically. */
+	setValue(value) {
+		const max = this.data.maxLength;
+		this.data.value = max > 0 ? value.slice(0, max) : value;
+		this.cursorPos = this.data.value.length;
+		this.data.onChange?.(this.data.value);
+	}
+	/** Get the current text value. */
+	getValue() {
+		return this.data.value;
+	}
+	render(opts) {
+		if (!this.visible) return "";
+		const { width } = opts;
+		const value = this.data.mask ? this.data.mask.repeat(this.data.value.length) : this.data.value;
+		const display = value || this.data.placeholder;
+		const isEmpty = !value;
+		const cursorInDisplay = this.cursorPos;
+		let before = display.slice(0, cursorInDisplay);
+		let cursor = display[cursorInDisplay] || " ";
+		let after = display.slice(cursorInDisplay + 1);
+		const maxVisible = width - 4;
+		if (visibleLength(display) > maxVisible) {
+			const start = Math.max(0, cursorInDisplay - Math.floor(maxVisible / 2));
+			before = display.slice(start, cursorInDisplay);
+			cursor = display[cursorInDisplay] || " ";
+			after = display.slice(cursorInDisplay + 1, start + maxVisible);
+		}
+		const lines = [];
+		lines.push(`┌${"─".repeat(width - 2)}┐`);
+		const isFocused = this.focused;
+		const placeholder = this.data.placeholder;
+		let content;
+		if (isEmpty && !isFocused) {
+			content = ` ${placeholder}`.padEnd(width - 2).slice(0, width - 2);
+			content = `\x1b[2m${content}\x1b[22m`;
+		} else if (isEmpty && isFocused) content = ` \x1b[7m \x1b[27m`.padEnd(width - 2).slice(0, width - 2);
+		else {
+			const left = before;
+			const right = after;
+			content = ` ${left}${isFocused ? `\x1b[7m${cursor}\x1b[27m` : cursor}${right}`;
+			const visLen = visibleLength(left) + 1 + visibleLength(right);
+			const pad = Math.max(0, width - 2 - visLen - 1);
+			content += " ".repeat(pad);
+			content = content.slice(0, width - 2);
+		}
+		const border = isFocused ? "\x1B[36m" : "\x1B[2m";
+		const reset = "\x1B[0m";
+		lines.push(`${border}│${reset}${content}${border}│${reset}`);
+		lines.push(`${border}└${"─".repeat(width - 2)}┘${reset}`);
+		return lines.join("\n");
+	}
+	handleInput(event) {
+		if (!this.focused || this.data.readOnly) return false;
+		const { key, char, ctrl } = event;
+		switch (key) {
+			case "ArrowLeft":
+				if (this.cursorPos > 0) this.cursorPos--;
+				return true;
+			case "ArrowRight":
+				if (this.cursorPos < this.data.value.length) this.cursorPos++;
+				return true;
+			case "Home":
+				this.cursorPos = 0;
+				return true;
+			case "End":
+				this.cursorPos = this.data.value.length;
+				return true;
+			case "Backspace":
+				if (this.cursorPos > 0) {
+					this.data.value = this.data.value.slice(0, this.cursorPos - 1) + this.data.value.slice(this.cursorPos);
+					this.cursorPos--;
+					this.data.onChange?.(this.data.value);
+				}
+				return true;
+			case "Delete":
+				if (this.cursorPos < this.data.value.length) {
+					this.data.value = this.data.value.slice(0, this.cursorPos) + this.data.value.slice(this.cursorPos + 1);
+					this.data.onChange?.(this.data.value);
+				}
+				return true;
+			case "Enter":
+				this.data.onSubmit?.(this.data.value);
+				return true;
+			case "a":
+				if (ctrl) {
+					this.cursorPos = 0;
+					return true;
+				}
+				break;
+			case "e":
+				if (ctrl) {
+					this.cursorPos = this.data.value.length;
+					return true;
+				}
+				break;
+			case "u":
+				if (ctrl) {
+					this.data.value = "";
+					this.cursorPos = 0;
+					this.data.onChange?.(this.data.value);
+					return true;
+				}
+				break;
+		}
+		if (char && char.length === 1 && char >= " ") {
+			const max = this.data.maxLength;
+			if (max > 0 && this.data.value.length >= max) return true;
+			this.data.value = this.data.value.slice(0, this.cursorPos) + char + this.data.value.slice(this.cursorPos);
+			this.cursorPos++;
+			this.data.onChange?.(this.data.value);
+			return true;
+		}
+		return false;
+	}
+};
+//#endregion
+//#region src/widgets/select-list.ts
+/**
+* Select List widget — scrollable list with single selection.
+*
+* Features:
+*   - Arrow key navigation
+*   - Scroll when list exceeds viewport
+*   - Selection highlighting
+*   - Search/filter mode
+*   - Disabled items
+*
+* @example
+* ```ts
+* const list = new SelectList("files", {
+*   items: [
+*     { label: "index.ts", value: "src/index.ts" },
+*     { label: "app.ts", value: "src/app.ts" },
+*   ],
+* });
+* ```
+*/
+var SelectList = class extends BaseWidget {
+	constructor(id, opts) {
+		super(id, "select-list", {
+			items: opts.items,
+			selectedIndex: 0,
+			scrollOffset: 0,
+			filter: "",
+			filterActive: false,
+			onSelect: opts.onSelect,
+			onSubmit: opts.onSubmit
+		});
+	}
+	/** Get the currently selected item. */
+	getSelected() {
+		return this.getFilteredItems()[this.data.selectedIndex];
+	}
+	/** Get all items matching the current filter. */
+	getFilteredItems() {
+		if (!this.data.filter) return this.data.items;
+		const q = this.data.filter.toLowerCase();
+		return this.data.items.filter((item) => item.label.toLowerCase().includes(q) || item.value.toLowerCase().includes(q));
+	}
+	/** Set items programmatically. */
+	setItems(items) {
+		this.data.items = items;
+		this.data.selectedIndex = 0;
+		this.data.scrollOffset = 0;
+		this.data.filter = "";
+		this.data.filterActive = false;
+	}
+	render(opts) {
+		if (!this.visible) return "";
+		const { width, height } = opts;
+		const items = this.getFilteredItems();
+		const isFocused = this.focused;
+		const maxVisible = height - (this.data.filterActive ? 2 : 0) - 2;
+		const lines = [];
+		const header = this.data.filterActive ? ` 🔍 ${this.data.filter}█` : ` 📋 ${items.length} item(s)`;
+		lines.push(header);
+		const start = this.data.scrollOffset;
+		for (let i = 0; i < maxVisible; i++) {
+			const idx = start + i;
+			if (idx >= items.length) {
+				lines.push(`  ${" ".repeat(width - 4)}`);
+				continue;
+			}
+			const item = items[idx];
+			const isSelected = idx === this.data.selectedIndex;
+			const isDisabled = item.disabled;
+			let prefix;
+			let label;
+			if (isSelected && isFocused) {
+				prefix = " ▸ ";
+				label = `\x1b[7m ${item.label} \x1b[27m`;
+			} else if (isSelected) {
+				prefix = " ▸ ";
+				label = ` ${item.label} `;
+			} else if (isDisabled) {
+				prefix = "   ";
+				label = `\x1b[2m${item.label}\x1b[22m`;
+			} else {
+				prefix = "   ";
+				label = ` ${item.label}`;
+			}
+			const maxLabelWidth = width - 4 - visibleLength(prefix);
+			if (visibleLength(label) > maxLabelWidth) label = label.slice(0, maxLabelWidth - 1) + "…";
+			lines.push(`${prefix}${label}`);
+		}
+		if (items.length > maxVisible) {
+			const scrollPercent = Math.round((start + maxVisible) / items.length * 100);
+			lines.push(`  ── ${scrollPercent}% ──`);
+		}
+		return lines.join("\n");
+	}
+	handleInput(event) {
+		if (!this.focused) return false;
+		const { key, char, ctrl } = event;
+		const items = this.getFilteredItems();
+		const maxVisible = 10;
+		if (this.data.filterActive) {
+			if (key === "Escape") {
+				this.data.filterActive = false;
+				this.data.filter = "";
+				return true;
+			}
+			if (key === "Enter") {
+				this.data.filterActive = false;
+				return true;
+			}
+			if (key === "Backspace") {
+				this.data.filter = this.data.filter.slice(0, -1);
+				this.data.selectedIndex = 0;
+				this.data.scrollOffset = 0;
+				return true;
+			}
+			if (char && char.length === 1) {
+				this.data.filter += char;
+				this.data.selectedIndex = 0;
+				this.data.scrollOffset = 0;
+				return true;
+			}
+			return false;
+		}
+		switch (key) {
+			case "ArrowUp":
+				if (this.data.selectedIndex > 0) {
+					this.data.selectedIndex--;
+					if (this.data.selectedIndex < this.data.scrollOffset) this.data.scrollOffset = this.data.selectedIndex;
+				}
+				this.data.onSelect?.(items[this.data.selectedIndex], this.data.selectedIndex);
+				return true;
+			case "ArrowDown":
+				if (this.data.selectedIndex < items.length - 1) {
+					this.data.selectedIndex++;
+					if (this.data.selectedIndex >= this.data.scrollOffset + maxVisible) this.data.scrollOffset = this.data.selectedIndex - maxVisible + 1;
+				}
+				this.data.onSelect?.(items[this.data.selectedIndex], this.data.selectedIndex);
+				return true;
+			case "Home":
+				this.data.selectedIndex = 0;
+				this.data.scrollOffset = 0;
+				this.data.onSelect?.(items[0], 0);
+				return true;
+			case "End":
+				this.data.selectedIndex = items.length - 1;
+				if (items.length > maxVisible) this.data.scrollOffset = items.length - maxVisible;
+				this.data.onSelect?.(items[this.data.selectedIndex], this.data.selectedIndex);
+				return true;
+			case "Enter": {
+				const sel = items[this.data.selectedIndex];
+				if (sel && !sel.disabled) this.data.onSubmit?.(sel, this.data.selectedIndex);
+				return true;
+			}
+			case "/":
+				this.data.filterActive = true;
+				this.data.filter = "";
+				return true;
+			case "j":
+				if (ctrl) {
+					this.data.selectedIndex = Math.min(items.length - 1, this.data.selectedIndex + maxVisible);
+					if (this.data.selectedIndex >= this.data.scrollOffset + maxVisible) this.data.scrollOffset = this.data.selectedIndex - maxVisible + 1;
+					return true;
+				}
+				break;
+			case "k":
+				if (ctrl) {
+					this.data.selectedIndex = Math.max(0, this.data.selectedIndex - maxVisible);
+					if (this.data.selectedIndex < this.data.scrollOffset) this.data.scrollOffset = this.data.selectedIndex;
+					return true;
+				}
+				break;
+		}
+		return false;
+	}
+};
+//#endregion
+//#region src/widgets/modal.ts
+/**
+* Modal widget — overlay dialog with backdrop and action buttons.
+*
+* Features:
+*   - Title bar
+*   - Content area (text or child widget)
+*   - Action buttons (OK, Cancel, custom)
+*   - Backdrop dimming
+*   - Focus trapping
+*
+* @example
+* ```ts
+* const modal = new Modal("confirm", {
+*   title: "Delete file?",
+*   content: "This action cannot be undone.",
+*   actions: ["Delete", "Cancel"],
+* });
+* ```
+*/
+var Modal = class extends BaseWidget {
+	constructor(id, opts) {
+		const actions = (opts.actions ?? ["OK", "Cancel"]).map((a) => typeof a === "string" ? {
+			label: a,
+			value: a.toLowerCase(),
+			primary: a === "OK"
+		} : a);
+		super(id, "modal", {
+			title: opts.title,
+			content: opts.content,
+			actions,
+			selectedAction: 0,
+			onAction: opts.onAction,
+			onCancel: opts.onCancel
+		});
+		const primaryIdx = actions.findIndex((a) => a.primary);
+		if (primaryIdx >= 0) this.data.selectedAction = primaryIdx;
+	}
+	render(opts) {
+		if (!this.visible) return "";
+		const { width, height } = opts;
+		const { title, content, actions, selectedAction } = this.data;
+		const isFocused = this.focused;
+		const modalWidth = Math.min(width - 4, 60);
+		const modalHeight = Math.min(height - 4, 20);
+		const lines = [];
+		const backdropLines = Math.max(0, Math.floor((height - modalHeight) / 2));
+		for (let i = 0; i < backdropLines; i++) lines.push("");
+		const titlePad = modalWidth - 4 - visibleLength(title);
+		lines.push(`  ╔${"═".repeat(modalWidth - 4)}╗`);
+		lines.push(`  ║ ${title}${" ".repeat(Math.max(0, titlePad))} ║`);
+		lines.push(`  ╠${"═".repeat(modalWidth - 4)}╣`);
+		const contentLines = content.split("\n");
+		const maxContentLines = modalHeight - 6;
+		for (let i = 0; i < maxContentLines; i++) {
+			const line = contentLines[i] ?? "";
+			const visLen = visibleLength(line);
+			const pad = Math.max(0, modalWidth - 4 - visLen);
+			lines.push(`  ║ ${line}${" ".repeat(pad)} ║`);
+		}
+		lines.push(`  ╠${"═".repeat(modalWidth - 4)}╣`);
+		const actionStr = actions.map((a, i) => {
+			if (i === selectedAction && isFocused) return `\x1b[7m ${a.label} \x1b[27m`;
+			if (a.primary) return `\x1b[1m${a.label}\x1b[22m`;
+			return ` ${a.label} `;
+		}).join("  ");
+		const actionPad = Math.max(0, modalWidth - 4 - visibleLength(stripAnsi(actionStr)));
+		lines.push(`  ║ ${actionStr}${" ".repeat(actionPad)} ║`);
+		lines.push(`  ╚${"═".repeat(modalWidth - 4)}╝`);
+		for (let i = 0; i < backdropLines; i++) lines.push("");
+		return lines.join("\n");
+	}
+	handleInput(event) {
+		if (!this.focused) return false;
+		const { key } = event;
+		const { actions } = this.data;
+		switch (key) {
+			case "ArrowLeft":
+				this.data.selectedAction = (this.data.selectedAction - 1 + actions.length) % actions.length;
+				return true;
+			case "ArrowRight":
+				this.data.selectedAction = (this.data.selectedAction + 1) % actions.length;
+				return true;
+			case "Enter": {
+				const action = actions[this.data.selectedAction];
+				if (action) this.data.onAction?.(action);
+				return true;
+			}
+			case "Escape":
+				this.data.onCancel?.();
+				return true;
+			case "Tab":
+				this.data.selectedAction = (this.data.selectedAction + 1) % actions.length;
+				return true;
+		}
+		return false;
+	}
+};
+//#endregion
+//#region src/widgets/status-bar.ts
+/**
+* Status Bar widget — fixed bottom bar with sections.
+*
+* Features:
+*   - Left / center / right sections
+*   - Styled sections (success, warning, error, info)
+*   - Keyboard shortcut hints
+*   - Auto-ellipsis for overflow
+*
+* @example
+* ```ts
+* const bar = new StatusBar("main-bar", {
+*   left: "Ready",
+*   center: "index.ts",
+*   right: "Ln 42, Col 5",
+*   sections: [
+*     { text: "git:main", style: "info" },
+*     { text: "3 errors", style: "error" },
+*   ],
+* });
+* ```
+*/
+const STYLE_MAP = {
+	default: {
+		fg: "\x1B[0m",
+		bg: "\x1B[48;2;50;50;60m"
+	},
+	info: {
+		fg: "\x1B[38;2;88;166;255m",
+		bg: "\x1B[48;2;30;40;60m"
+	},
+	success: {
+		fg: "\x1B[38;2;34;197;94m",
+		bg: "\x1B[48;2;20;50;30m"
+	},
+	warning: {
+		fg: "\x1B[38;2;234;179;8m",
+		bg: "\x1B[48;2;60;50;20m"
+	},
+	error: {
+		fg: "\x1B[38;2;220;38;38m",
+		bg: "\x1B[48;2;60;20;20m"
+	}
+};
+var StatusBar = class extends BaseWidget {
+	constructor(id, opts = {}) {
+		super(id, "status-bar", {
+			left: opts.left ?? "",
+			center: opts.center ?? "",
+			right: opts.right ?? "",
+			sections: opts.sections ?? []
+		}, false);
+	}
+	/** Update status bar text. */
+	update(opts) {
+		if (opts.left !== void 0) this.data.left = opts.left;
+		if (opts.center !== void 0) this.data.center = opts.center;
+		if (opts.right !== void 0) this.data.right = opts.right;
+		if (opts.sections !== void 0) this.data.sections = opts.sections;
+	}
+	render(opts) {
+		if (!this.visible) return "";
+		const { width } = opts;
+		const { left, center, right, sections } = this.data;
+		const bg = "\x1B[48;2;40;40;50m";
+		const reset = "\x1B[0m";
+		const parts = [];
+		for (const sec of sections) {
+			const style = STYLE_MAP[sec.style ?? "default"];
+			parts.push(`${style.bg}${style.fg} ${sec.text} ${reset}`);
+		}
+		if (left) parts.push(`${bg}\x1b[1m ${left} ${reset}`);
+		if (center) parts.push(`${bg}\x1b[2m ${center} ${reset}`);
+		if (right) parts.push(`${bg} ${right} ${reset}`);
+		let bar = parts.join("");
+		const visLen = visibleLength(stripAnsi(bar));
+		const pad = Math.max(0, width - visLen);
+		bar += " ".repeat(pad);
+		if (stripAnsi(bar).length > width) bar = bar.slice(0, width);
+		return `${bg}${" ".repeat(width)}${reset}\r${bar}`;
+	}
+	handleInput() {
+		return false;
+	}
+};
+//#endregion
+//#region src/plugin.ts
+/**
+* @dui-toolkit/plugin-tui — DuiPlugin definition.
+*/
+const pkgVersion = JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version;
+const DEFAULTS = {
+	"tui.focusRing": "#58a6ff",
+	"tui.border": "#646478",
+	"tui.borderFocused": "#58a6ff",
+	"tui.placeholder": "#8b949e",
+	"tui.selected": "#58a6ff",
+	"tui.selectedBg": "#1a1a2e",
+	"tui.disabled": "#484848",
+	"tui.modalBackdrop": "#000000",
+	"tui.statusBarBg": "#282830",
+	"tui.statusBarFg": "#e0e0e0"
+};
+const tuiPlugin = {
+	name: "@dui-toolkit/plugin-tui",
+	version: pkgVersion,
+	description: "TUI widget toolkit — text inputs, select lists, modals, status bars for @bdocs/dui.",
+	tags: [
+		"tui",
+		"widget",
+		"input",
+		"modal"
+	],
+	homepage: "https://github.com/bdocs/dui/tree/main/packages/dui-tui",
+	author: "DUI Toolkit",
+	peerDependencies: { dui: "^0.6.0" },
+	setup(api) {
+		for (const [slot, defaultColor] of Object.entries(DEFAULTS)) api.registerThemeSlot(slot, defaultColor);
+		api.shared.set("renderer", "tui");
+		return () => {};
+	}
+};
+//#endregion
+export { BaseWidget, Modal, SelectList, StatusBar, TextInput, tuiPlugin };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@dui-toolkit/plugin-tui",
+  "version": "0.1.1-next.0",
+  "description": "TUI widget toolkit plugin for @bdocs/dui — text inputs, select lists, modals, status bars, and more.",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "keywords": [
+    "terminal",
+    "tui",
+    "widget",
+    "input",
+    "select",
+    "modal",
+    "statusbar"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@bdocs/dui": "0.7.0-next.2"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsdown": "^0.21.7",
+    "typescript": "^5.9.3",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "build": "tsdown --config-loader unrun",
+    "dev": "tsdown --watch --config-loader unrun",
+    "test": "vitest run"
+  }
+}