@oh-my-pi/pi-tui 12.18.1 → 12.19.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## [Unreleased]
 
+## [12.19.0] - 2026-02-22
+
+### Added
+
+- Added `getTopBorderAvailableWidth()` method to calculate available width for top border content accounting for border characters and padding
+
+### Fixed
+
+- Fixed stale viewport rows appearing when terminal height increases by triggering full re-render on height changes
+
 ## [12.18.0] - 2026-02-21
 ### Fixed
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "12.18.1",
+	"version": "12.19.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Bölük",
@@ -33,8 +33,8 @@
 		"test": "bun test test/*.test.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "12.18.1",
-		"@oh-my-pi/pi-utils": "12.18.1",
+		"@oh-my-pi/pi-natives": "12.19.0",
+		"@oh-my-pi/pi-utils": "12.19.0",
 		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.6.2",
 		"marked": "^17.0.2",

package/src/bracketed-paste.ts

@@ -0,0 +1,47 @@
+const PASTE_START = "\x1b[200~";
+const PASTE_END = "\x1b[201~";
+
+export type PasteResult = { handled: false } | { handled: true; pasteContent?: string; remaining: string };
+
+/**
+ * Handles bracketed paste mode buffering for terminal input components.
+ *
+ * Bracketed paste mode wraps pasted content between start (\x1b[200~) and
+ * end (\x1b[201~) markers, which may arrive split across multiple chunks.
+ * This class buffers incoming data and assembles complete paste payloads.
+ */
+export class BracketedPasteHandler {
+	#buffer = "";
+	#active = false;
+
+	/**
+	 * Process incoming terminal data for bracketed paste sequences.
+	 *
+	 * @returns `{ handled: false }` if the data contains no paste sequence and
+	 *          should be processed normally. `{ handled: true }` if the data was
+	 *          consumed by paste buffering — `pasteContent` is set when a complete
+	 *          paste has been assembled; omitted when still buffering.
+	 */
+	process(data: string): PasteResult {
+		if (data.includes(PASTE_START)) {
+			this.#active = true;
+			this.#buffer = "";
+			data = data.replace(PASTE_START, "");
+		}
+
+		if (!this.#active) return { handled: false };
+
+		this.#buffer += data;
+
+		const endIndex = this.#buffer.indexOf(PASTE_END);
+		if (endIndex === -1) return { handled: true, remaining: "" };
+
+		const pasteContent = this.#buffer.substring(0, endIndex);
+		const remaining = this.#buffer.substring(endIndex + PASTE_END.length);
+
+		this.#buffer = "";
+		this.#active = false;
+
+		return { handled: true, pasteContent, remaining };
+	}
+}

package/src/components/editor.ts

@@ -1,5 +1,6 @@
 import { getProjectDir } from "@oh-my-pi/pi-utils/dirs";
 import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
+import { BracketedPasteHandler } from "../bracketed-paste";
 import { type EditorKeybindingsManager, getEditorKeybindings } from "../keybindings";
 import { matchesKey } from "../keys";
 import { KillRing } from "../kill-ring";
@@ -338,8 +339,7 @@ export class Editor implements Component, Focusable {
 	#pasteCounter: number = 0;
 
 	// Bracketed paste mode buffering
-	#pasteBuffer: string = "";
-	#isInPaste: boolean = false;
+	#pasteHandler = new BracketedPasteHandler();
 
 	// Prompt history for up/down navigation
 	#history: string[] = [];
@@ -379,6 +379,16 @@ export class Editor implements Component, Focusable {
 		this.#topBorderContent = content;
 	}
 
+	/**
+	 * Get the available width for top border content given a total terminal width.
+	 * Accounts for the border characters and horizontal padding.
+	 */
+	getTopBorderAvailableWidth(terminalWidth: number): number {
+		const paddingX = this.#getEditorPaddingX();
+		const borderWidth = paddingX + 1;
+		return Math.max(0, terminalWidth - borderWidth * 2);
+	}
+
 	/**
 	 * Use the real terminal cursor instead of rendering a cursor glyph.
 	 */
@@ -696,46 +706,15 @@ export class Editor implements Component, Focusable {
 		}
 
 		// Handle bracketed paste mode
-		// Start of paste: \x1b[200~
-		// End of paste: \x1b[201~
-
-		// Check if we're starting a bracketed paste
-		if (data.includes("\x1b[200~")) {
-			this.#isInPaste = true;
-			this.#pasteBuffer = "";
-			// Remove the start marker and keep the rest
-			data = data.replace("\x1b[200~", "");
-		}
-
-		// If we're in a paste, buffer the data
-		if (this.#isInPaste) {
-			// Append data to buffer first (end marker could be split across chunks)
-			this.#pasteBuffer += data;
-
-			// Check if the accumulated buffer contains the end marker
-			const endIndex = this.#pasteBuffer.indexOf("\x1b[201~");
-			if (endIndex !== -1) {
-				// Extract content before the end marker
-				const pasteContent = this.#pasteBuffer.substring(0, endIndex);
-
-				// Process the complete paste
-				this.#handlePaste(pasteContent);
-
-				// Reset paste state
-				this.#isInPaste = false;
-
-				// Process any remaining data after the end marker
-				const remaining = this.#pasteBuffer.substring(endIndex + 6); // 6 = length of \x1b[201~
-				this.#pasteBuffer = "";
-
-				if (remaining.length > 0) {
-					this.handleInput(remaining);
+		const paste = this.#pasteHandler.process(data);
+		if (paste.handled) {
+			if (paste.pasteContent !== undefined) {
+				this.#handlePaste(paste.pasteContent);
+				if (paste.remaining.length > 0) {
+					this.handleInput(paste.remaining);
 				}
-				return;
-			} else {
-				// Still accumulating, wait for more data
-				return;
 			}
+			return;
 		}
 
 		// Handle special key combinations first

package/src/components/input.ts

@@ -1,3 +1,4 @@
+import { BracketedPasteHandler } from "../bracketed-paste";
 import { getEditorKeybindings } from "../keybindings";
 import { KillRing } from "../kill-ring";
 import { type Component, CURSOR_MARKER, type Focusable } from "../tui";
@@ -23,8 +24,7 @@ export class Input implements Component, Focusable {
 	focused: boolean = false;
 
 	// Bracketed paste mode buffering
-	#pasteBuffer: string = "";
-	#isInPaste: boolean = false;
+	#pasteHandler = new BracketedPasteHandler();
 
 	// Kill ring for Emacs-style kill/yank operations
 	#killRing = new KillRing();
@@ -44,37 +44,12 @@ export class Input implements Component, Focusable {
 
 	handleInput(data: string): void {
 		// Handle bracketed paste mode
-		// Start of paste: \x1b[200~
-		// End of paste: \x1b[201~
-
-		// Check if we're starting a bracketed paste
-		if (data.includes("\x1b[200~")) {
-			this.#isInPaste = true;
-			this.#pasteBuffer = "";
-			data = data.replace("\x1b[200~", "");
-		}
-
-		// If we're in a paste, buffer the data
-		if (this.#isInPaste) {
-			// Check if this chunk contains the end marker
-			this.#pasteBuffer += data;
-
-			const endIndex = this.#pasteBuffer.indexOf("\x1b[201~");
-			if (endIndex !== -1) {
-				// Extract the pasted content
-				const pasteContent = this.#pasteBuffer.substring(0, endIndex);
-
-				// Process the complete paste
-				this.#handlePaste(pasteContent);
-
-				// Reset paste state
-				this.#isInPaste = false;
-
-				// Handle any remaining input after the paste marker
-				const remaining = this.#pasteBuffer.substring(endIndex + 6); // 6 = length of \x1b[201~
-				this.#pasteBuffer = "";
-				if (remaining) {
-					this.handleInput(remaining);
+		const paste = this.#pasteHandler.process(data);
+		if (paste.handled) {
+			if (paste.pasteContent !== undefined) {
+				this.#handlePaste(paste.pasteContent);
+				if (paste.remaining.length > 0) {
+					this.handleInput(paste.remaining);
 				}
 			}
 			return;

package/src/tui.ts

@@ -203,6 +203,7 @@ export class TUI extends Container {
 	terminal: Terminal;
 	#previousLines: string[] = [];
 	#previousWidth = 0;
+	#previousHeight = 0;
 	#focusedComponent: Component | null = null;
 	#inputListeners = new Set<InputListener>();
 
@@ -427,6 +428,7 @@ export class TUI extends Container {
 		if (force) {
 			this.#previousLines = [];
 			this.#previousWidth = -1; // -1 triggers widthChanged, forcing a full clear
+			this.#previousHeight = -1; // -1 triggers heightChanged, forcing a full clear
 			this.#cursorRow = 0;
 			this.#hardwareCursorRow = 0;
 			this.#maxLinesRendered = 0;
@@ -877,6 +879,7 @@ export class TUI extends Container {
 
 		// Width changed - need full re-render (line wrapping changes)
 		const widthChanged = this.#previousWidth !== 0 && this.#previousWidth !== width;
+		const heightChanged = this.#previousHeight !== 0 && this.#previousHeight !== height;
 
 		// Helper to clear scrollback and viewport and render all new lines
 		const fullRender = (clear: boolean): void => {
@@ -904,6 +907,7 @@ export class TUI extends Container {
 			this.#previousViewportTop = Math.max(0, this.#maxLinesRendered - height);
 			this.#previousLines = newLines;
 			this.#previousWidth = width;
+			this.#previousHeight = height;
 		};
 
 		const debugRedraw = process.env.PI_DEBUG_REDRAW === "1";
@@ -928,6 +932,13 @@ export class TUI extends Container {
 			return;
 		}
 
+		// Height changed - full re-render to clear newly revealed rows and avoid stale scrollback artifacts
+		if (heightChanged) {
+			logRedraw(`height changed (${this.#previousHeight} -> ${height})`);
+			fullRender(true);
+			return;
+		}
+
 		// Content shrunk below the working area and no overlays - re-render to clear empty rows.
 		// When an overlay is active, avoid clearing to reduce flicker and avoid resetting scrollback.
 		// Configurable via setClearOnShrink() or PI_CLEAR_ON_SHRINK=0 env var
@@ -997,6 +1008,7 @@ export class TUI extends Container {
 			this.#cursorRow = targetRow;
 			this.#previousLines = newLines;
 			this.#previousWidth = width;
+			this.#previousHeight = height;
 			this.#previousViewportTop = Math.max(0, this.#maxLinesRendered - height);
 			return;
 		}
@@ -1140,6 +1152,7 @@ export class TUI extends Container {
 		this.#previousViewportTop = Math.max(0, this.#maxLinesRendered - height);
 		this.#previousLines = newLines;
 		this.#previousWidth = width;
+		this.#previousHeight = height;
 	}
 
 	/**

package/src/utils.ts

@@ -31,15 +31,11 @@ export function getSegmenter(): Intl.Segmenter {
 	return segmenter;
 }
 
-// Cache for non-ASCII strings
-//const WIDTH_CACHE_SIZE = 512;
-//const widthCache = new Map<string, number>();
-
 /**
  * Calculate the visible width of a string in terminal columns.
  */
 export function visibleWidthRaw(str: string): number {
-	if (str.length === 0) {
+	if (!str) {
 		return 0;
 	}
 
@@ -64,31 +60,8 @@ export function visibleWidthRaw(str: string): number {
  * Calculate the visible width of a string in terminal columns.
  */
 export function visibleWidth(str: string): number {
-	if (str.length === 0) {
-		return 0;
-	}
+	if (!str) return 0;
 	return visibleWidthRaw(str);
-
-	// === Disabled cache ===
-
-	/*
-	// Check cache
-	const cached = widthCache.get(str);
-	if (cached !== undefined) {
-		return cached;
-	}
-
-	const width = visibleWidthRaw(str);
-	if (widthCache.size >= WIDTH_CACHE_SIZE) {
-		const firstKey = widthCache.keys().next().value;
-		if (firstKey !== undefined) {
-			widthCache.delete(firstKey);
-		}
-	}
-	widthCache.set(str, width);
-
-	return width;
-	*/
 }
 
 const makeBoolArray = (chars: string): ReadonlyArray<boolean> => {