@f5xc-salesdemos/pi-tui 14.4.0 → 14.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@f5xc-salesdemos/pi-tui",
-	"version": "14.4.0",
+	"version": "14.5.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/f5xc-salesdemos/xcsh",
 	"author": "Can Boluk",
@@ -32,13 +32,13 @@
 		"check": "biome check . && bun run check:types",
 		"check:types": "tsgo -p tsconfig.json --noEmit",
 		"lint": "biome lint .",
-		"test": "bun test test/*.test.ts",
+		"test": "bun test --preload ./test/preload.ts test/*.test.ts",
 		"fix": "biome check --write --unsafe .",
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@f5xc-salesdemos/pi-natives": "14.4.0",
-		"@f5xc-salesdemos/pi-utils": "14.4.0",
+		"@f5xc-salesdemos/pi-natives": "14.5.0",
+		"@f5xc-salesdemos/pi-utils": "14.5.0",
 		"marked": "^17.0"
 	},
 	"devDependencies": {

package/src/components/editor.ts

@@ -421,7 +421,10 @@ export class Editor implements Component, Focusable {
 	getTopBorderAvailableWidth(terminalWidth: number): number {
 		const paddingX = this.#getEditorPaddingX();
 		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
-		return Math.max(0, terminalWidth - borderWidth * 2);
+		// When status content is present: left corner loses 1 dash, frame is 1 char narrower (gutter)
+		const topLeftWidth = this.#topBorderContent ? Math.max(1, borderWidth - 1) : borderWidth;
+		const gutter = this.#topBorderContent ? 1 : 0;
+		return Math.max(0, terminalWidth - gutter - topLeftWidth - borderWidth);
 	}
 
 	/**
@@ -676,18 +679,22 @@ export class Editor implements Component, Focusable {
 	}
 
 	render(width: number): string[] {
+		// When powerline status bar is present, reserve 1-char trailing gutter to match zsh
+		const effectiveWidth = this.#topBorderContent ? width - 1 : width;
 		const paddingX = this.#getEditorPaddingX();
 		const borderVisible = this.#borderVisible;
-		const promptGutter = this.#getPromptGutter(width, paddingX);
-		const contentAreaWidth = this.#getContentWidth(width, paddingX);
-		const layoutWidth = this.#getLayoutWidth(width, paddingX);
+		const promptGutter = this.#getPromptGutter(effectiveWidth, paddingX);
+		const contentAreaWidth = this.#getContentWidth(effectiveWidth, paddingX);
+		const layoutWidth = this.#getLayoutWidth(effectiveWidth, paddingX);
 		this.#lastLayoutWidth = layoutWidth;
 
 		// Box-drawing characters for rounded corners
 		const box = this.#theme.symbols.boxRound;
 		const borderWidth = this.#getHorizontalChromeWidth(paddingX);
-		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal.repeat(paddingX)}`);
-		const topRight = this.borderColor(`${box.horizontal.repeat(paddingX)}${box.topRight}`);
+		const topPad = this.#topBorderContent ? Math.max(0, paddingX - 1) : paddingX;
+		const topLeft = this.borderColor(`${box.topLeft}${box.horizontal.repeat(topPad)}`);
+		const topRightPad = this.#topBorderContent ? paddingX : paddingX;
+		const topRight = this.borderColor(`${box.horizontal.repeat(topRightPad)}${box.topRight}`);
 		const bottomLeft = this.borderColor(`${box.bottomLeft}${box.horizontal}${padding(Math.max(0, paddingX - 1))}`);
 		const horizontal = this.borderColor(box.horizontal);
 
@@ -700,8 +707,12 @@ export class Editor implements Component, Focusable {
 		const result: string[] = [];
 
 		if (borderVisible) {
-			// Render top border: ╭─ [status content] ────────────────╮
-			const topFillWidth = Math.max(0, width - borderWidth * 2);
+			// Render top border: ╭[status content]───────────────── ──╮
+			// When status content is present, topLeft has no padding (just ╭)
+			// but topRight still has paddingX dashes (──╮)
+			const topLeftWidth = this.#topBorderContent ? Math.max(1, borderWidth - 1) : borderWidth;
+			const topRightWidth = borderWidth;
+			const topFillWidth = Math.max(0, effectiveWidth - topLeftWidth - topRightWidth);
 			if (this.#topBorderContent) {
 				const { content, width: statusWidth } = this.#topBorderContent;
 				if (statusWidth <= topFillWidth) {
@@ -883,7 +894,7 @@ export class Editor implements Component, Focusable {
 
 		// Add autocomplete list if active
 		if (this.#autocompleteState && this.#autocompleteList) {
-			const autocompleteResult = this.#autocompleteList.render(width);
+			const autocompleteResult = this.#autocompleteList.render(effectiveWidth);
 			result.push(...autocompleteResult);
 		}
 

package/src/tui.ts

@@ -385,7 +385,7 @@ export class TUI extends Container {
 		for (const overlay of this.overlayStack) overlay.component.invalidate?.();
 	}
 
-	start(): void {
+	start(clearScreen = true): void {
 		this.#stopped = false;
 		this.terminal.start(
 			data => this.#handleInput(data),
@@ -394,7 +394,7 @@ export class TUI extends Container {
 		this.terminal.hideCursor();
 		this.#querySixelSupport();
 		this.#queryCellSize();
-		this.requestRender(true);
+		this.requestRender(clearScreen);
 	}
 
 	addInputListener(listener: InputListener): () => void {