@oh-my-pi/pi-tui 3.13.1337 → 3.15.0

package/README.md

@@ -154,9 +154,52 @@ input.getValue();
 Multi-line text editor with autocomplete, file completion, and paste handling.
 
 ```typescript
+interface SymbolTheme {
+	cursor: string;
+	ellipsis: string;
+	boxRound: {
+		topLeft: string;
+		topRight: string;
+		bottomLeft: string;
+		bottomRight: string;
+		horizontal: string;
+		vertical: string;
+	};
+	boxSharp: {
+		topLeft: string;
+		topRight: string;
+		bottomLeft: string;
+		bottomRight: string;
+		horizontal: string;
+		vertical: string;
+		teeDown: string;
+		teeUp: string;
+		teeLeft: string;
+		teeRight: string;
+		cross: string;
+	};
+	table: {
+		topLeft: string;
+		topRight: string;
+		bottomLeft: string;
+		bottomRight: string;
+		horizontal: string;
+		vertical: string;
+		teeDown: string;
+		teeUp: string;
+		teeLeft: string;
+		teeRight: string;
+		cross: string;
+	};
+	quoteBorder: string;
+	hrChar: string;
+	spinnerFrames: string[];
+}
+
 interface EditorTheme {
 	borderColor: (str: string) => string;
 	selectList: SelectListTheme;
+	symbols: SymbolTheme;
 }
 
 const editor = new Editor(theme);
@@ -206,6 +249,7 @@ interface MarkdownTheme {
 	strikethrough: (text: string) => string;
 	underline: (text: string) => string;
 	highlightCode?: (code: string, lang?: string) => string[];
+	symbols: SymbolTheme;
 }
 
 interface DefaultTextStyle {
@@ -289,6 +333,7 @@ interface SelectListTheme {
 	description: (text: string) => string;
 	scrollInfo: (text: string) => string;
 	noMatch: (text: string) => string;
+	symbols: SymbolTheme;
 }
 
 const list = new SelectList(

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "3.13.1337",
+	"version": "3.15.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "src/index.ts",

package/src/components/editor.ts

@@ -25,6 +25,7 @@ import {
 	isShiftEnter,
 	isTab,
 } from "../keys";
+import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
 import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils";
 import { SelectList, type SelectListTheme } from "./select-list";
@@ -46,6 +47,7 @@ interface LayoutLine {
 export interface EditorTheme {
 	borderColor: (str: string) => string;
 	selectList: SelectListTheme;
+	symbols: SymbolTheme;
 }
 
 export interface EditorTopBorder {
@@ -181,11 +183,12 @@ export class Editor implements Component {
 		this.lastWidth = width;
 
 		// Box-drawing characters for rounded corners
-		const topLeft = this.borderColor("╭─");
-		const topRight = this.borderColor("─╮");
-		const bottomLeft = this.borderColor("╰─");
-		const bottomRight = this.borderColor("─╯");
-		const horizontal = this.borderColor("─");
+		const box = this.theme.symbols.boxRound;
+		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal}`);
+		const topRight = this.borderColor(`${box.horizontal}${box.topRight}`);
+		const bottomLeft = this.borderColor(`${box.bottomLeft}${box.horizontal}`);
+		const bottomRight = this.borderColor(`${box.horizontal}${box.bottomRight}`);
+		const horizontal = this.borderColor(box.horizontal);
 
 		// Layout the text - content area is width minus 6 for borders (3 left + 3 right)
 		const contentAreaWidth = width - 6;
@@ -201,13 +204,13 @@ export class Editor implements Component {
 			if (statusWidth <= topFillWidth) {
 				// Status fits - add fill after it
 				const fillWidth = topFillWidth - statusWidth;
-				result.push(topLeft + content + this.borderColor("─".repeat(fillWidth)) + topRight);
+				result.push(topLeft + content + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
 			} else {
 				// Status too long - truncate it
-				const truncated = truncateToWidth(content, topFillWidth - 1, this.borderColor("…"));
+				const truncated = truncateToWidth(content, topFillWidth - 1, this.borderColor(this.theme.symbols.ellipsis));
 				const truncatedWidth = visibleWidth(truncated);
 				const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
-				result.push(topLeft + truncated + this.borderColor("─".repeat(fillWidth)) + topRight);
+				result.push(topLeft + truncated + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
 			}
 		} else {
 			result.push(topLeft + horizontal.repeat(topFillWidth) + topRight);
@@ -236,10 +239,10 @@ export class Editor implements Component {
 					// displayWidth stays the same - we're replacing, not adding
 				} else {
 					// Cursor is at the end - add thin blinking bar cursor
-					// The ▏ character has width 1
-					const cursor = "\x1b[5m▏\x1b[0m";
+					const cursorChar = this.theme.symbols.inputCursor;
+					const cursor = `\x1b[5m${cursorChar}\x1b[0m`;
 					displayText = before + cursor;
-					displayWidth += 1; // Account for cursor width
+					displayWidth += visibleWidth(cursorChar);
 					if (displayWidth > lineContentWidth) {
 						// Line is at full width - use reverse video on last grapheme if possible
 						// or just show cursor at the end without adding space
@@ -267,8 +270,8 @@ export class Editor implements Component {
 				// Last line: "╰─ " (3) + content + padding + " ─╯" (3) = 6 chars border
 				result.push(`${bottomLeft} ${displayText}${padding} ${bottomRight}`);
 			} else {
-				const leftBorder = this.borderColor("│  ");
-				const rightBorder = this.borderColor("  │");
+				const leftBorder = this.borderColor(`${box.vertical}  `);
+				const rightBorder = this.borderColor(`  ${box.vertical}`);
 				result.push(leftBorder + displayText + padding + rightBorder);
 			}
 		}

package/src/components/loader.ts

@@ -15,9 +15,13 @@ export class Loader extends Text {
 		private spinnerColorFn: (str: string) => string,
 		private messageColorFn: (str: string) => string,
 		private message: string = "Loading...",
+		spinnerFrames?: string[],
 	) {
 		super("", 1, 0);
 		this.ui = ui;
+		if (spinnerFrames && spinnerFrames.length > 0) {
+			this.frames = spinnerFrames;
+		}
 		this.start();
 	}
 

package/src/components/markdown.ts

@@ -1,4 +1,5 @@
 import { marked, type Token } from "marked";
+import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
 import { applyBackgroundToLine, visibleWidth, wrapTextWithAnsi } from "../utils";
 
@@ -41,6 +42,7 @@ export interface MarkdownTheme {
 	strikethrough: (text: string) => string;
 	underline: (text: string) => string;
 	highlightCode?: (code: string, lang?: string) => string[];
+	symbols: SymbolTheme;
 }
 
 export class Markdown implements Component {
@@ -301,7 +303,10 @@ export class Markdown implements Component {
 				const quoteText = this.renderInlineTokens(token.tokens || []);
 				const quoteLines = quoteText.split("\n");
 				for (const quoteLine of quoteLines) {
-					lines.push(this.theme.quoteBorder("│ ") + this.theme.quote(this.theme.italic(quoteLine)));
+					lines.push(
+						this.theme.quoteBorder(`${this.theme.symbols.quoteBorder} `) +
+							this.theme.quote(this.theme.italic(quoteLine)),
+					);
 				}
 				if (nextTokenType !== "space") {
 					lines.push(""); // Add spacing after blockquotes (unless space token follows)
@@ -310,7 +315,7 @@ export class Markdown implements Component {
 			}
 
 			case "hr":
-				lines.push(this.theme.hr("─".repeat(Math.min(width, 80))));
+				lines.push(this.theme.hr(this.theme.symbols.hrChar.repeat(Math.min(width, 80))));
 				if (nextTokenType !== "space") {
 					lines.push(""); // Add spacing after horizontal rules (unless space token follows)
 				}
@@ -595,9 +600,13 @@ export class Markdown implements Component {
 			}
 		}
 
+		const t = this.theme.symbols.table;
+		const h = t.horizontal;
+		const v = t.vertical;
+
 		// Render top border
-		const topBorderCells = columnWidths.map((w) => "─".repeat(w));
-		lines.push(`┌─${topBorderCells.join("─┬─")}─┐`);
+		const topBorderCells = columnWidths.map((w) => h.repeat(w));
+		lines.push(`${t.topLeft}${h}${topBorderCells.join(`${h}${t.teeDown}${h}`)}${h}${t.topRight}`);
 
 		// Render header with wrapping
 		const headerCellLines: string[][] = token.header.map((cell, i) => {
@@ -612,12 +621,12 @@ export class Markdown implements Component {
 				const padded = text + " ".repeat(Math.max(0, columnWidths[colIdx] - visibleWidth(text)));
 				return this.theme.bold(padded);
 			});
-			lines.push(`│ ${rowParts.join(" │ ")} │`);
+			lines.push(`${v} ${rowParts.join(` ${v} `)} ${v}`);
 		}
 
 		// Render separator
-		const separatorCells = columnWidths.map((w) => "─".repeat(w));
-		lines.push(`├─${separatorCells.join("─┼─")}─┤`);
+		const separatorCells = columnWidths.map((w) => h.repeat(w));
+		lines.push(`${t.teeRight}${h}${separatorCells.join(`${h}${t.cross}${h}`)}${h}${t.teeLeft}`);
 
 		// Render rows with wrapping
 		for (const row of token.rows) {
@@ -632,13 +641,13 @@ export class Markdown implements Component {
 					const text = cellLines[lineIdx] || "";
 					return text + " ".repeat(Math.max(0, columnWidths[colIdx] - visibleWidth(text)));
 				});
-				lines.push(`│ ${rowParts.join(" │ ")} │`);
+				lines.push(`${v} ${rowParts.join(` ${v} `)} ${v}`);
 			}
 		}
 
 		// Render bottom border
-		const bottomBorderCells = columnWidths.map((w) => "─".repeat(w));
-		lines.push(`└─${bottomBorderCells.join("─┴─")}─┘`);
+		const bottomBorderCells = columnWidths.map((w) => h.repeat(w));
+		lines.push(`${t.bottomLeft}${h}${bottomBorderCells.join(`${h}${t.teeUp}${h}`)}${h}${t.bottomRight}`);
 
 		lines.push(""); // Add spacing after table
 		return lines;

package/src/components/select-list.ts

@@ -1,6 +1,7 @@
 import { isArrowDown, isArrowUp, isCtrlC, isEnter, isEscape } from "../keys";
+import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
-import { truncateToWidth } from "../utils";
+import { truncateToWidth, visibleWidth } from "../utils";
 
 export interface SelectItem {
 	value: string;
@@ -14,6 +15,7 @@ export interface SelectListTheme {
 	description: (text: string) => string;
 	scrollInfo: (text: string) => string;
 	noMatch: (text: string) => string;
+	symbols: SymbolTheme;
 }
 
 export class SelectList implements Component {
@@ -74,7 +76,8 @@ export class SelectList implements Component {
 			let line = "";
 			if (isSelected) {
 				// Use arrow indicator for selection - entire line uses selectedText color
-				const prefixWidth = 2; // "→ " is 2 characters visually
+				const prefix = `${this.theme.symbols.cursor} `;
+				const prefixWidth = visibleWidth(prefix);
 				const displayValue = item.label || item.value;
 
 				if (item.description && width > 40) {
@@ -90,20 +93,20 @@ export class SelectList implements Component {
 					if (remainingWidth > 10) {
 						const truncatedDesc = truncateToWidth(item.description, remainingWidth, "");
 						// Apply selectedText to entire line content
-						line = this.theme.selectedText(`→ ${truncatedValue}${spacing}${truncatedDesc}`);
+						line = this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);
 					} else {
 						// Not enough space for description
 						const maxWidth = width - prefixWidth - 2;
-						line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+						line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, "")}`);
 					}
 				} else {
 					// No description or not enough width
 					const maxWidth = width - prefixWidth - 2;
-					line = this.theme.selectedText(`→ ${truncateToWidth(displayValue, maxWidth, "")}`);
+					line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, "")}`);
 				}
 			} else {
 				const displayValue = item.label || item.value;
-				const prefix = "  ";
+				const prefix = " ".repeat(visibleWidth(`${this.theme.symbols.cursor} `));
 
 				if (item.description && width > 40) {
 					// Calculate how much space we have for value + description

package/src/index.ts

@@ -61,6 +61,7 @@ export {
 	isTab,
 	Keys,
 } from "./keys";
+export type { BoxSymbols, SymbolTheme } from "./symbols";
 // Terminal interface and implementations
 export { emergencyTerminalRestore, ProcessTerminal, type Terminal } from "./terminal";
 // Terminal image support

package/src/symbols.ts

@@ -0,0 +1,25 @@
+export interface BoxSymbols {
+	topLeft: string;
+	topRight: string;
+	bottomLeft: string;
+	bottomRight: string;
+	horizontal: string;
+	vertical: string;
+	teeDown: string;
+	teeUp: string;
+	teeLeft: string;
+	teeRight: string;
+	cross: string;
+}
+
+export interface SymbolTheme {
+	cursor: string;
+	inputCursor: string;
+	ellipsis: string;
+	boxRound: Omit<BoxSymbols, "teeDown" | "teeUp" | "teeLeft" | "teeRight" | "cross">;
+	boxSharp: BoxSymbols;
+	table: BoxSymbols;
+	quoteBorder: string;
+	hrChar: string;
+	spinnerFrames: string[];
+}