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

package/dist/index.d.mts

@@ -147,6 +147,8 @@ interface SelectListOptions {
   onSubmit?: (item: SelectItem, index: number) => void;
 }
 declare class SelectList extends BaseWidget<SelectListData> {
+  /** Height of the last render — lets handleInput scroll in the same viewport the user actually sees. */
+  private viewportHeight;
   constructor(id: string, opts: SelectListOptions);
   /** Get the currently selected item. */
   getSelected(): SelectItem | undefined;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { stripAnsi, visibleLength } from "@bdocs/dui";
+import { stripAnsi, truncateByCells, visibleLength } from "@bdocs/dui";
 import { readFileSync } from "node:fs";
 //#region src/widget.ts
 var BaseWidget = class {
@@ -109,11 +109,10 @@ var TextInput = class extends BaseWidget {
 		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 cursorChar = isFocused ? `\x1b[7m${cursor}\x1b[27m` : cursor;
+			const visLen = visibleLength(left) + visibleLength(cursorChar) + visibleLength(right);
+			const pad = Math.max(0, width - 2 - 1 - visLen);
+			content = ` ${left}${cursorChar}${right}${" ".repeat(pad)}`;
 		}
 		const border = isFocused ? "\x1B[36m" : "\x1B[2m";
 		const reset = "\x1B[0m";
@@ -208,6 +207,8 @@ var TextInput = class extends BaseWidget {
 * ```
 */
 var SelectList = class extends BaseWidget {
+	/** Height of the last render — lets handleInput scroll in the same viewport the user actually sees. */
+	viewportHeight = 10;
 	constructor(id, opts) {
 		super(id, "select-list", {
 			items: opts.items,
@@ -240,12 +241,13 @@ var SelectList = class extends BaseWidget {
 	render(opts) {
 		if (!this.visible) return "";
 		const { width, height } = opts;
+		this.viewportHeight = height;
 		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);
+		lines.push(truncateByCells(header, width));
 		const start = this.data.scrollOffset;
 		for (let i = 0; i < maxVisible; i++) {
 			const idx = start + i;
@@ -257,22 +259,15 @@ var SelectList = class extends BaseWidget {
 			const isSelected = idx === this.data.selectedIndex;
 			const isDisabled = item.disabled;
 			let prefix;
+			if (isSelected) prefix = " ▸ ";
+			else prefix = "   ";
+			const maxLabelWidth = Math.max(0, width - 4 - visibleLength(prefix));
+			const labelText = truncateByCells(item.label, maxLabelWidth);
 			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) + "…";
+			if (isSelected && isFocused) label = `\x1b[7m ${labelText} \x1b[27m`;
+			else if (isSelected) label = ` ${labelText} `;
+			else if (isDisabled) label = `\x1b[2m${labelText}\x1b[22m`;
+			else label = ` ${labelText}`;
 			lines.push(`${prefix}${label}`);
 		}
 		if (items.length > maxVisible) {
@@ -285,7 +280,7 @@ var SelectList = class extends BaseWidget {
 		if (!this.focused) return false;
 		const { key, char, ctrl } = event;
 		const items = this.getFilteredItems();
-		const maxVisible = 10;
+		const maxVisible = Math.max(1, this.viewportHeight - 2);
 		if (this.data.filterActive) {
 			if (key === "Escape") {
 				this.data.filterActive = false;
@@ -363,6 +358,52 @@ var SelectList = class extends BaseWidget {
 	}
 };
 //#endregion
+//#region src/utils.ts
+/**
+* Layout helpers shared by the TUI widgets.
+*
+* Widgets render ANSI strings whose visible width must fit inside a box /
+* bar region. Naïve `String#slice` indexes by UTF‑16 code units and breaks
+* when the string carries ANSI escape sequences (a trimmed escape code
+* corrupts terminal state) or wide glyphs (CJK / emoji). These helpers stay
+* cell-aware and never split an escape sequence.
+*/
+const CSI_RE = /\x1b\[[0-9;:<=>?]*[ -/]*[@-~]/;
+/**
+* Truncate an ANSI-wrapped string to `maxCells` terminal cells.
+*
+* Copies whole escape sequences through untouched so a truncation can never
+* split a `\x1b[...m` code mid-way (which would leak styling into the rest
+* of the screen). Reserves 1 cell for a `…` ellipsis when truncation occurs,
+* mirroring `truncateByCells` from `@bdocs/dui`. If the input fits within
+* `maxCells` it is returned verbatim.
+*/
+function truncateAnsi(text, maxCells) {
+	if (visibleLength(stripAnsi(text)) <= maxCells) return text;
+	if (maxCells <= 0) return "";
+	const target = Math.max(0, maxCells - 1);
+	let out = "";
+	let used = 0;
+	let rest = text;
+	while (rest.length > 0 && used < target) {
+		if (rest.startsWith("\x1B")) {
+			const m = CSI_RE.exec(rest);
+			if (m && m[0].length > 0) {
+				out += m[0];
+				rest = rest.slice(m[0].length);
+				continue;
+			}
+		}
+		const ch = rest.charAt(0);
+		const w = visibleLength(ch);
+		if (used + w > target) break;
+		out += ch;
+		used += w;
+		rest = rest.slice(1);
+	}
+	return out + "…";
+}
+//#endregion
 //#region src/widgets/modal.ts
 /**
 * Modal widget — overlay dialog with backdrop and action buttons.
@@ -411,26 +452,27 @@ var Modal = class extends BaseWidget {
 		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);
+		const innerWidth = Math.max(0, modalWidth - 6);
+		const safeTitle = truncateAnsi(title, innerWidth);
+		const titlePad = Math.max(0, innerWidth - visibleLength(stripAnsi(safeTitle)));
 		lines.push(`  ╔${"═".repeat(modalWidth - 4)}╗`);
-		lines.push(`  ║ ${title}${" ".repeat(Math.max(0, titlePad))} ║`);
+		lines.push(`  ║ ${safeTitle}${" ".repeat(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);
+			const line = truncateAnsi(contentLines[i] ?? "", innerWidth);
+			const pad = Math.max(0, innerWidth - visibleLength(stripAnsi(line)));
 			lines.push(`  ║ ${line}${" ".repeat(pad)} ║`);
 		}
 		lines.push(`  ╠${"═".repeat(modalWidth - 4)}╣`);
-		const actionStr = actions.map((a, i) => {
+		const safeActions = truncateAnsi(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)} ║`);
+		}).join("  "), innerWidth);
+		const actionPad = Math.max(0, innerWidth - visibleLength(stripAnsi(safeActions)));
+		lines.push(`  ║ ${safeActions}${" ".repeat(actionPad)} ║`);
 		lines.push(`  ╚${"═".repeat(modalWidth - 4)}╝`);
 		for (let i = 0; i < backdropLines; i++) lines.push("");
 		return lines.join("\n");
@@ -439,6 +481,7 @@ var Modal = class extends BaseWidget {
 		if (!this.focused) return false;
 		const { key } = event;
 		const { actions } = this.data;
+		if (actions.length === 0) return false;
 		switch (key) {
 			case "ArrowLeft":
 				this.data.selectedAction = (this.data.selectedAction - 1 + actions.length) % actions.length;
@@ -529,19 +572,25 @@ var StatusBar = class extends BaseWidget {
 		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) {
+		if (width <= 0) return "";
+		const leftSeg = sections.map((sec) => {
 			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 `${style.bg}${style.fg} ${sec.text} ${reset}`;
+		}).join("") + (left ? `${bg}\x1b[1m ${left} ${reset}` : "");
+		const centerSeg = center ? `${bg}\x1b[2m ${center} ${reset}` : "";
+		const rightSeg = right ? `${bg} ${right} ${reset}` : "";
+		const lw = visibleLength(stripAnsi(leftSeg));
+		const cw = visibleLength(stripAnsi(centerSeg));
+		const rw = visibleLength(stripAnsi(rightSeg));
+		let bar;
+		if (lw + cw + rw <= width) {
+			const rightStart = width - rw;
+			const centerStart = Math.min(Math.max(lw, Math.floor((width - cw) / 2)), rightStart - cw);
+			bar = `${leftSeg}${" ".repeat(Math.max(0, centerStart - lw))}${centerSeg}${" ".repeat(Math.max(0, rightStart - (centerStart + cw)))}${rightSeg}`;
+		} else bar = `${leftSeg}${centerSeg}${rightSeg}`;
+		bar = truncateAnsi(bar, width);
+		const used = visibleLength(stripAnsi(bar));
+		if (used < width) bar += " ".repeat(width - used);
 		return `${bg}${" ".repeat(width)}${reset}\r${bar}`;
 	}
 	handleInput() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dui-toolkit/plugin-tui",
-  "version": "0.1.1-next.0",
+  "version": "0.1.1-next.2",
   "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",
@@ -28,7 +28,7 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "@bdocs/dui": "0.7.0-next.2"
+    "@bdocs/dui": "0.7.0-next.4"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",