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

package/package.json

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

package/src/components/editor.ts

@@ -26,7 +26,7 @@ import {
 	isTab,
 } from "../keys";
 import type { Component } from "../tui";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils";
+import { getSegmenter, isPunctuationChar, isWhitespaceChar, truncateToWidth, visibleWidth } from "../utils";
 import { SelectList, type SelectListTheme } from "./select-list";
 
 const segmenter = getSegmenter();
@@ -48,6 +48,13 @@ export interface EditorTheme {
 	selectList: SelectListTheme;
 }
 
+export interface EditorTopBorder {
+	/** The status content (already styled) */
+	content: string;
+	/** Visible width of the content */
+	width: number;
+}
+
 export class Editor implements Component {
 	private state: EditorState = {
 		lines: [""],
@@ -85,6 +92,9 @@ export class Editor implements Component {
 	public onChange?: (text: string) => void;
 	public disableSubmit: boolean = false;
 
+	// Custom top border (for status line integration)
+	private topBorderContent?: EditorTopBorder;
+
 	constructor(theme: EditorTheme) {
 		this.theme = theme;
 		this.borderColor = theme.borderColor;
@@ -94,6 +104,14 @@ export class Editor implements Component {
 		this.autocompleteProvider = provider;
 	}
 
+	/**
+	 * Set custom content for the top border (e.g., status line).
+	 * Pass undefined to use the default plain border.
+	 */
+	setTopBorder(content: EditorTopBorder | undefined): void {
+		this.topBorderContent = content;
+	}
+
 	/**
 	 * Add a prompt to history for up/down arrow navigation.
 	 * Called after successful submission.
@@ -162,20 +180,45 @@ export class Editor implements Component {
 		// Store width for cursor navigation
 		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("─");
 
-		// Layout the text - use full width
-		const layoutLines = this.layoutText(width);
+		// Layout the text - content area is width minus 6 for borders (3 left + 3 right)
+		const contentAreaWidth = width - 6;
+		const layoutLines = this.layoutText(contentAreaWidth);
 
 		const result: string[] = [];
 
-		// Render top border
-		result.push(horizontal.repeat(width));
+		// Render top border: ╭─ [status content] ────────────────╮
+		// Reserve: 2 for "╭─", 2 for "─╮" = 4 total for corners
+		const topFillWidth = width - 4;
+		if (this.topBorderContent) {
+			const { content, width: statusWidth } = this.topBorderContent;
+			if (statusWidth <= topFillWidth) {
+				// Status fits - add fill after it
+				const fillWidth = topFillWidth - statusWidth;
+				result.push(topLeft + content + this.borderColor("─".repeat(fillWidth)) + topRight);
+			} else {
+				// Status too long - truncate it
+				const truncated = truncateToWidth(content, topFillWidth - 1, this.borderColor("…"));
+				const truncatedWidth = visibleWidth(truncated);
+				const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
+				result.push(topLeft + truncated + this.borderColor("─".repeat(fillWidth)) + topRight);
+			}
+		} else {
+			result.push(topLeft + horizontal.repeat(topFillWidth) + topRight);
+		}
 
 		// Render each layout line
+		// Content area is width - 6 (for "│  " prefix and "  │" suffix borders)
+		const lineContentWidth = width - 6;
 		for (const layoutLine of layoutLines) {
 			let displayText = layoutLine.text;
-			let lineVisibleWidth = visibleWidth(layoutLine.text);
+			let displayWidth = visibleWidth(layoutLine.text);
 
 			// Add cursor if this line has it
 			if (layoutLine.hasCursor && layoutLine.cursorPos !== undefined) {
@@ -190,16 +233,14 @@ export class Editor implements Component {
 					const restAfter = after.slice(firstGrapheme.length);
 					const cursor = `\x1b[7m${firstGrapheme}\x1b[0m`;
 					displayText = before + cursor + restAfter;
-					// lineVisibleWidth stays the same - we're replacing, not adding
+					// displayWidth stays the same - we're replacing, not adding
 				} else {
-					// Cursor is at the end - check if we have room for the space
-					if (lineVisibleWidth < width) {
-						// We have room - add highlighted space
-						const cursor = "\x1b[7m \x1b[0m";
-						displayText = before + cursor;
-						// lineVisibleWidth increases by 1 - we're adding a space
-						lineVisibleWidth = lineVisibleWidth + 1;
-					} else {
+					// Cursor is at the end - add thin blinking bar cursor
+					// The ▏ character has width 1
+					const cursor = "\x1b[5m▏\x1b[0m";
+					displayText = before + cursor;
+					displayWidth += 1; // Account for cursor width
+					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
 						const beforeGraphemes = [...segmenter.segment(before)];
@@ -212,22 +253,26 @@ export class Editor implements Component {
 								.map((g) => g.segment)
 								.join("");
 							displayText = beforeWithoutLast + cursor;
+							displayWidth -= 1; // Back to original width (reverse video replaces, doesn't add)
 						}
-						// lineVisibleWidth stays the same
 					}
 				}
 			}
 
-			// Calculate padding based on actual visible width
-			const padding = " ".repeat(Math.max(0, width - lineVisibleWidth));
+			// All lines have consistent 6-char borders (3 left + 3 right)
+			const isLastLine = layoutLine === layoutLines[layoutLines.length - 1];
+			const padding = " ".repeat(Math.max(0, lineContentWidth - displayWidth));
 
-			// Render the line (no side borders, just horizontal lines above and below)
-			result.push(displayText + padding);
+			if (isLastLine) {
+				// Last line: "╰─ " (3) + content + padding + " ─╯" (3) = 6 chars border
+				result.push(`${bottomLeft} ${displayText}${padding} ${bottomRight}`);
+			} else {
+				const leftBorder = this.borderColor("│  ");
+				const rightBorder = this.borderColor("  │");
+				result.push(leftBorder + displayText + padding + rightBorder);
+			}
 		}
 
-		// Render bottom border
-		result.push(horizontal.repeat(width));
-
 		// Add autocomplete list if active
 		if (this.isAutocompleting && this.autocompleteList) {
 			const autocompleteResult = this.autocompleteList.render(width);
@@ -1284,7 +1329,7 @@ export class Editor implements Component {
 https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19536643416/job/559322883
 17 this job fails with https://github.com/EsotericSoftware/spine-runtimes/actions/runs/19
 536643416/job/55932288317 havea  look at .gi
-	 */
+    */
 	private forceFileAutocomplete(): void {
 		if (!this.autocompleteProvider) return;
 

package/src/index.ts

@@ -10,7 +10,7 @@ export {
 // Components
 export { Box } from "./components/box";
 export { CancellableLoader } from "./components/cancellable-loader";
-export { Editor, type EditorTheme } from "./components/editor";
+export { Editor, type EditorTheme, type EditorTopBorder } from "./components/editor";
 export { Image, type ImageOptions, type ImageTheme } from "./components/image";
 export { Input } from "./components/input";
 export { Loader } from "./components/loader";

package/src/tui.ts

@@ -123,6 +123,10 @@ export class TUI extends Container {
 		this.terminal.stop();
 	}
 
+	getWidth(): number {
+		return this.terminal.columns;
+	}
+
 	requestRender(force = false): void {
 		if (force) {
 			this.previousLines = [];