@oh-my-pi/pi-tui 13.3.13 → 13.4.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+## [13.4.0] - 2026-03-01
+
+### Added
+
+- Added `PI_TUI_RESIZE_CLEAR_STRATEGY` environment variable to control terminal behavior on resize: `viewport` (default) clears/redraws the viewport while preserving scrollback, or `scrollback` clears all history
+
+### Changed
+
+- Changed resize redraw behavior to use configurable clear semantics (`viewport` vs `scrollback`) while keeping full content rendering for scrollback navigation
+
+### Fixed
+
+- Fixed loader component rendering lines wider than terminal width, preventing text overflow and display artifacts
+
 ## [13.3.11] - 2026-02-28
 
 ### Fixed

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "13.3.13",
+	"version": "13.4.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Boluk",
@@ -33,8 +33,8 @@
 		"test": "bun test test/*.test.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "13.3.13",
-		"@oh-my-pi/pi-utils": "13.3.13",
+		"@oh-my-pi/pi-natives": "13.4.0",
+		"@oh-my-pi/pi-utils": "13.4.0",
 		"marked": "^17.0"
 	},
 	"devDependencies": {

package/src/components/loader.ts

@@ -1,4 +1,5 @@
 import type { TUI } from "../tui";
+import { sliceByColumn, visibleWidth } from "../utils";
 import { Text } from "./text";
 
 /**
@@ -26,7 +27,14 @@ export class Loader extends Text {
 	}
 
 	render(width: number): string[] {
-		return ["", ...super.render(width)];
+		const lines = ["", ...super.render(width)];
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			if (visibleWidth(line) > width) {
+				lines[i] = sliceByColumn(line, 0, width, true);
+			}
+		}
+		return lines;
 	}
 
 	start() {

package/src/index.ts

@@ -1,67 +1,40 @@
 // Core TUI interfaces and classes
 
 // Autocomplete support
-export {
-	type AutocompleteItem,
-	type AutocompleteProvider,
-	CombinedAutocompleteProvider,
-	type SlashCommand,
-} from "./autocomplete";
+export * from "./autocomplete";
 // Components
-export { Box } from "./components/box";
-export { CancellableLoader } from "./components/cancellable-loader";
-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";
-export { type DefaultTextStyle, Markdown, type MarkdownTheme } from "./components/markdown";
-export { type SelectItem, SelectList, type SelectListTheme } from "./components/select-list";
-export { type SettingItem, SettingsList, type SettingsListTheme } from "./components/settings-list";
-export { Spacer } from "./components/spacer";
-export { type Tab, TabBar, type TabBarTheme } from "./components/tab-bar";
-export { Text } from "./components/text";
-export { TruncatedText } from "./components/truncated-text";
+export * from "./components/box";
+export * from "./components/cancellable-loader";
+export * from "./components/editor";
+export * from "./components/image";
+export * from "./components/input";
+export * from "./components/loader";
+export * from "./components/markdown";
+export * from "./components/select-list";
+export * from "./components/settings-list";
+export * from "./components/spacer";
+export * from "./components/tab-bar";
+export * from "./components/text";
+export * from "./components/truncated-text";
 // Editor component interface (for custom editors)
-export type { EditorComponent } from "./editor-component";
+export type * from "./editor-component";
 // Fuzzy matching
-export { type FuzzyMatch, fuzzyFilter, fuzzyMatch } from "./fuzzy";
+export * from "./fuzzy";
 // Keybindings
-export {
-	DEFAULT_EDITOR_KEYBINDINGS,
-	type EditorAction,
-	type EditorKeybindingsConfig,
-	EditorKeybindingsManager,
-	getEditorKeybindings,
-	setEditorKeybindings,
-} from "./keybindings";
+export * from "./keybindings";
 // Kitty keyboard protocol helpers
-export {
-	isKeyRelease,
-	isKeyRepeat,
-	isKittyProtocolActive,
-	type KeyId,
-	matchesKey,
-	parseKey,
-	parseKittySequence,
-	setKittyProtocolActive,
-} from "./keys";
+export * from "./keys";
 // Mermaid diagram support
-export {
-	extractMermaidBlocks,
-	type MermaidImage,
-	type MermaidRenderOptions,
-	prerenderMermaidBlocks,
-	renderMermaidToPng,
-} from "./mermaid";
+export * from "./mermaid";
 // Input buffering for batch splitting
-export { StdinBuffer, type StdinBufferEventMap, type StdinBufferOptions } from "./stdin-buffer";
-export type { BoxSymbols, SymbolTheme } from "./symbols";
+export * from "./stdin-buffer";
+export type * from "./symbols";
 // Terminal interface and implementations
-export { emergencyTerminalRestore, ProcessTerminal, type Terminal, type TerminalAppearance } from "./terminal";
+export * from "./terminal";
 // Terminal image support
 export * from "./terminal-capabilities";
 // TTY ID
-export { getTerminalId, getTtyPath } from "./ttyid";
-export { type Component, Container, type OverlayHandle, type SizeValue, TUI } from "./tui";
+export * from "./ttyid";
+export * from "./tui";
 // Utilities
-export { Ellipsis, padding, replaceTabs, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "./utils";
+export * from "./utils";

package/src/tui.ts

@@ -11,6 +11,11 @@ import { extractSegments, sliceByColumn, sliceWithWidth, visibleWidth } from "./
 
 const SEGMENT_RESET = "\x1b[0m";
 
+type ResizeClearStrategy = "viewport" | "scrollback";
+
+function resolveResizeClearStrategy(value: string | undefined): ResizeClearStrategy {
+	return value?.toLowerCase() === "scrollback" ? "scrollback" : "viewport";
+}
 type InputListenerResult = { consume?: boolean; data?: string } | undefined;
 type InputListener = (data: string) => InputListenerResult;
 
@@ -217,6 +222,7 @@ export class TUI extends Container {
 	#cellSizeQueryPending = false;
 	#showHardwareCursor = process.env.PI_HARDWARE_CURSOR === "1";
 	#clearOnShrink = process.env.PI_CLEAR_ON_SHRINK === "1"; // Clear empty rows when content shrinks (default: off)
+	#resizeClearStrategy = resolveResizeClearStrategy(process.env.PI_TUI_RESIZE_CLEAR_STRATEGY); // Resize full-redraw strategy: viewport(default) or scrollback
 	#maxLinesRendered = 0; // Track terminal's working area (max lines ever rendered)
 	#previousViewportTop = 0; // Track previous viewport top for resize-aware cursor moves
 	#fullRedrawCount = 0;
@@ -885,19 +891,34 @@ export class TUI extends Container {
 		// Helper to clear scrollback and viewport and render all new lines
 		const fullRender = (clear: boolean): void => {
 			this.#fullRedrawCount += 1;
+			const isResizeRedraw = clear && (widthChanged || heightChanged);
+			const shouldRenderViewportOnly =
+				isResizeRedraw && this.#resizeClearStrategy === "viewport" && newLines.length <= this.#previousLines.length;
+			const renderFrom = shouldRenderViewportOnly ? Math.max(0, newLines.length - height) : 0;
+			const renderedLines = renderFrom > 0 ? newLines.slice(renderFrom) : newLines;
 			let buffer = "\x1b[?2026h"; // Begin synchronized output
-			if (clear) buffer += this.#clearScrollbackOnNextFullRender ? "\x1b[3J\x1b[H\x1b[0J" : "\x1b[H\x1b[0J"; // Home + clear from cursor (and optionally scrollback)
-			for (let i = 0; i < newLines.length; i++) {
+			if (clear) {
+				// Keep default home+erase-below semantics for non-resize redraws.
+				// On resize, choose behavior via PI_TUI_RESIZE_CLEAR_STRATEGY.
+				if (this.#clearScrollbackOnNextFullRender) buffer += "\x1b[3J\x1b[2J\x1b[H";
+				else if (isResizeRedraw && this.#resizeClearStrategy === "scrollback") buffer += "\x1b[3J\x1b[2J\x1b[H";
+				else if (isResizeRedraw) buffer += "\x1b[2J\x1b[H";
+				else buffer += "\x1b[H\x1b[0J";
+			}
+			for (let i = 0; i < renderedLines.length; i++) {
 				if (i > 0) buffer += "\r\n";
-				buffer += newLines[i];
+				buffer += renderedLines[i];
 			}
-			const renderCursorRow = Math.max(0, newLines.length - 1);
-			const cursorUpdate = this.#buildHardwareCursorSequence(cursorPos, newLines.length, renderCursorRow);
+			const renderCursorRow = Math.max(0, renderedLines.length - 1);
+			const renderCursorPos = cursorPos
+				? { row: Math.max(0, cursorPos.row - renderFrom), col: cursorPos.col }
+				: null;
+			const cursorUpdate = this.#buildHardwareCursorSequence(renderCursorPos, renderedLines.length, renderCursorRow);
 			buffer += cursorUpdate.sequence;
 			buffer += "\x1b[?2026l"; // End synchronized output
 			this.terminal.write(buffer);
-			this.#cursorRow = renderCursorRow;
-			this.#hardwareCursorRow = cursorUpdate.row;
+			this.#cursorRow = Math.max(0, newLines.length - 1);
+			this.#hardwareCursorRow = cursorUpdate.row + renderFrom;
 			// Reset max lines when clearing, otherwise track growth
 			if (clear) {
 				this.#maxLinesRendered = newLines.length;