@oh-my-pi/pi-tui 16.0.10 → 16.1.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 ## [Unreleased]
 
+## [16.1.0] - 2026-06-19
+
+### Added
+
+- `Box` now accepts an optional `border` (box-drawing glyphs + colorizer) and exposes `setBorder()`, drawing a colored outline around its padded/background content. The border is automatically dropped at widths too narrow to frame so a bordered box never overflows its given width.
+
+## [16.0.11] - 2026-06-19
+
+### Breaking Changes
+
+- Removed `getIndentation` and `getIndentationNoescape` exported utilities
+- Tab-related operations no longer respect per-file or globally configured indentation settings
+
+### Changed
+
+- Standardized tab expansion to use a fixed display width instead of configurable settings
+- Removed support for custom tab width configuration in text rendering and input handling
+
+### Fixed
+
+- Corrected logic in string truncation to prevent improper truncation of short strings
+- Fixed a one-frame transcript flash during a non-multiplexer resize drag: while the drag borrowed the alternate screen and painted only the viewport, any ordinary (non-forced) render from a still-animating block — a tool spinner tick, a streamed token, a cursor blink — fell through to the deferred geometry-rebuild full paint, which left the alternate screen to repaint the whole transcript on the normal screen for a single frame before the next SIGWINCH re-entered the viewport fast path, so a live tool block flashed in and vanished. Ordinary renders mid-drag now stay on the viewport fast path; only forced renders (tool finalization, reset, image reconciliation) still preempt it.
+
 ## [16.0.10] - 2026-06-18
 
 ### Fixed

package/dist/types/components/box.d.ts

@@ -1,4 +1,16 @@
 import type { Component } from "../tui";
+/** Box-drawing glyphs plus an optional colorizer for an outline drawn around a {@link Box}. */
+export interface BoxBorder {
+    chars: {
+        topLeft: string;
+        topRight: string;
+        bottomLeft: string;
+        bottomRight: string;
+        horizontal: string;
+        vertical: string;
+    };
+    color?: (text: string) => string;
+}
 /**
  * Box component - a container that applies padding and background to all children
  */
@@ -6,13 +18,14 @@ export declare class Box implements Component {
     #private;
     children: Component[];
     setIgnoreTight(ignore: boolean): this;
-    constructor(paddingX?: number, paddingY?: number, bgFn?: (text: string) => string);
+    constructor(paddingX?: number, paddingY?: number, bgFn?: (text: string) => string, border?: BoxBorder);
     addChild(component: Component): void;
     removeChild(component: Component): void;
     clear(): void;
     setPaddingX(paddingX: number): void;
     setPaddingY(paddingY: number): void;
     setBgFn(bgFn?: (text: string) => string): void;
+    setBorder(border?: BoxBorder): void;
     invalidate(): void;
     render(width: number): readonly string[];
 }

package/dist/types/utils.d.ts

@@ -1,6 +1,6 @@
 import { Ellipsis, type ExtractSegmentsResult, type SliceResult } from "@oh-my-pi/pi-natives";
 export { Ellipsis } from "@oh-my-pi/pi-natives";
-export { getDefaultTabWidth, getIndentation } from "@oh-my-pi/pi-utils";
+export { DEFAULT_TAB_WIDTH } from "@oh-my-pi/pi-utils";
 export type TextSizingScale = 1 | 2 | 3;
 export type TextSizingVerticalAlign = "top" | "bottom" | "center";
 export type TextSizingHorizontalAlign = "left" | "right" | "center";
@@ -17,14 +17,10 @@ export interface TextSizingOptions {
  */
 export declare function encodeTextSized(text: string, options?: TextSizingOptions): string;
 export declare function sliceWithWidth(line: string, startCol: number, length: number, strict?: boolean | null): SliceResult;
-export declare function truncateToWidth(text: string, maxWidth: number, ellipsisKind?: Ellipsis | null, pad?: boolean | null): string;
+export declare function truncateToWidth(text: string, maxWidth: number, ellipsisKind?: Ellipsis | null | "", pad?: boolean | null): string;
 export declare function wrapTextWithAnsi(text: string, width: number): string[];
 export declare function extractSegments(line: string, beforeEnd: number, afterStart: number, afterLen: number, strictAfter: boolean): ExtractSegmentsResult;
-/**
- * Tab width in columns for `file`, using `process.cwd()` as the project root for relative paths.
- */
-export declare function getIndentationNoescape(file?: string): number;
-export declare function replaceTabs(text: string, file?: string): string;
+export declare function replaceTabs(text: string): string;
 /**
  * Returns a string of n spaces. Uses a pre-allocated buffer for efficiency.
  */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "16.0.10",
+	"version": "16.1.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "16.0.10",
-		"@oh-my-pi/pi-utils": "16.0.10",
+		"@oh-my-pi/pi-natives": "16.1.0",
+		"@oh-my-pi/pi-utils": "16.1.0",
 		"lru-cache": "11.5.1",
 		"marked": "^18.0.5"
 	},

package/src/components/box.ts

@@ -4,10 +4,24 @@ import { applyBackgroundToLine, getPaddingX, padding, visibleWidth } from "../ut
 type Cache = {
 	width: number;
 	bgSample: string | undefined;
+	borderSample: string | undefined;
 	childLines: (readonly string[])[];
 	result: string[];
 };
 
+/** Box-drawing glyphs plus an optional colorizer for an outline drawn around a {@link Box}. */
+export interface BoxBorder {
+	chars: {
+		topLeft: string;
+		topRight: string;
+		bottomLeft: string;
+		bottomRight: string;
+		horizontal: string;
+		vertical: string;
+	};
+	color?: (text: string) => string;
+}
+
 /**
  * Box component - a container that applies padding and background to all children
  */
@@ -16,6 +30,7 @@ export class Box implements Component {
 	#paddingX: number;
 	#paddingY: number;
 	#bgFn?: (text: string) => string;
+	#border?: BoxBorder;
 
 	#ignoreTight = false;
 
@@ -28,10 +43,11 @@ export class Box implements Component {
 	// Cache for rendered output
 	#cached?: Cache;
 
-	constructor(paddingX = 1, paddingY = 1, bgFn?: (text: string) => string) {
+	constructor(paddingX = 1, paddingY = 1, bgFn?: (text: string) => string, border?: BoxBorder) {
 		this.#paddingX = paddingX;
 		this.#paddingY = paddingY;
 		this.#bgFn = bgFn;
+		this.#border = border;
 	}
 
 	addChild(component: Component): void {
@@ -72,6 +88,11 @@ export class Box implements Component {
 		// Don't invalidate here - we'll detect bgFn changes by sampling output
 	}
 
+	setBorder(border?: BoxBorder): void {
+		this.#border = border;
+		this.#invalidateCache();
+	}
+
 	#invalidateCache(): void {
 		this.#cached = undefined;
 	}
@@ -87,10 +108,18 @@ export class Box implements Component {
 		const children = this.children;
 		const count = children.length;
 		const paddingX = this.#ignoreTight ? this.#paddingX : getPaddingX(this.#paddingX);
-		const contentWidth = Math.max(1, width - paddingX * 2);
-		// bgFn output can change without the function reference changing (theme
-		// mutation); sample it so a silent palette swap still misses the cache.
+		// A border eats one column on each side; skip it unless the interior can still
+		// hold the horizontal padding plus at least one content column, so a bordered
+		// Box never overflows the width it was given.
+		const border = this.#border && width - 2 >= paddingX * 2 + 1 ? this.#border : undefined;
+		const innerWidth = border ? width - 2 : width;
+		const contentWidth = Math.max(1, innerWidth - paddingX * 2);
+		// bgFn / border output can change without the function reference changing
+		// (theme mutation); sample both so a silent palette swap still misses the cache.
 		const bgSample = this.#bgFn ? this.#bgFn("test") : undefined;
+		const borderSample = border
+			? `${border.color ? border.color("|") : "|"}${border.chars.topLeft}${border.chars.vertical}`
+			: undefined;
 
 		// Render every child every frame (renders may carry side effects); the
 		// memo only skips re-deriving the padded/background rows. Per the
@@ -101,6 +130,7 @@ export class Box implements Component {
 			cached !== undefined &&
 			cached.width === width &&
 			cached.bgSample === bgSample &&
+			cached.borderSample === borderSample &&
 			cached.childLines.length === count;
 		const childLines: (readonly string[])[] = new Array(count);
 		let contentRows = 0;
@@ -115,23 +145,39 @@ export class Box implements Component {
 		const result: string[] = [];
 		if (contentRows > 0) {
 			const leftPad = padding(paddingX);
+			const interior: string[] = [];
 			// Top padding
 			for (let i = 0; i < this.#paddingY; i++) {
-				result.push(this.#applyBg("", width));
+				interior.push(this.#applyBg("", innerWidth));
 			}
 			// Content
 			for (const lines of childLines) {
 				for (const line of lines) {
-					result.push(this.#applyBg(leftPad + line, width));
+					interior.push(this.#applyBg(leftPad + line, innerWidth));
 				}
 			}
 			// Bottom padding
 			for (let i = 0; i < this.#paddingY; i++) {
-				result.push(this.#applyBg("", width));
+				interior.push(this.#applyBg("", innerWidth));
+			}
+
+			if (border) {
+				const paint = border.color ?? (s => s);
+				const rule = border.chars.horizontal.repeat(Math.max(0, innerWidth));
+				const side = paint(border.chars.vertical);
+				result.push(paint(border.chars.topLeft + rule + border.chars.topRight));
+				for (const row of interior) {
+					result.push(side + row + side);
+				}
+				result.push(paint(border.chars.bottomLeft + rule + border.chars.bottomRight));
+			} else {
+				for (const row of interior) {
+					result.push(row);
+				}
 			}
 		}
 
-		this.#cached = { width, bgSample, childLines, result };
+		this.#cached = { width, bgSample, borderSample, childLines, result };
 		return result;
 	}
 

package/src/components/markdown.ts

@@ -222,6 +222,56 @@ markdownParser.setOptions({
 // never math. Inline extensions run before marked's escape tokenizer, so
 // `\(…\)` becomes math while a genuinely escaped `\$` is left to `escape` and
 // renders as a literal dollar.
+const CUSTOM_HR_START_REGEX = /(?:^|\n) {0,3}([-*_─━═=–—])[ \t]*(?:\1[ \t]*){2,}(?:\n+|$)/;
+const CUSTOM_HR_TOKENIZER_REGEX = /^ {0,3}([-*_─━═=–—])[ \t]*(?:\1[ \t]*){2,}(?:\n+|$)/;
+
+function getHrChar(char: string, hrChar: string): string {
+	const isAscii = hrChar === "-";
+	switch (char) {
+		case "=":
+			return "=";
+		case "═":
+			return isAscii ? "=" : "═";
+		case "━":
+			return isAscii ? "-" : "━";
+		case "─":
+			return isAscii ? "-" : "─";
+		case "–":
+			return isAscii ? "-" : "–";
+		case "—":
+			return isAscii ? "-" : "—";
+		default:
+			return hrChar;
+	}
+}
+
+const customHrExtension: TokenizerAndRendererExtension = {
+	name: "customHr",
+	level: "block",
+	start(src) {
+		const match = CUSTOM_HR_START_REGEX.exec(src);
+		if (!match) return undefined;
+		let idx = match.index;
+		if (src[idx] === "\n") {
+			idx += 1;
+		}
+		return idx;
+	},
+	tokenizer(src) {
+		const match = CUSTOM_HR_TOKENIZER_REGEX.exec(src);
+		if (match) {
+			return {
+				type: "hr",
+				raw: match[0],
+			};
+		}
+		return undefined;
+	},
+	renderer() {
+		return "";
+	},
+};
+
 const mathExtension: TokenizerAndRendererExtension = {
 	name: "math",
 	level: "inline",
@@ -332,7 +382,7 @@ const mathEnvBlockExtension: TokenizerAndRendererExtension = {
 		return (token as { text?: string }).text ?? "";
 	},
 };
-markdownParser.use({ extensions: [mathBlockExtension, mathEnvBlockExtension, mathExtension] });
+markdownParser.use({ extensions: [customHrExtension, mathBlockExtension, mathEnvBlockExtension, mathExtension] });
 
 // ---------------------------------------------------------------------------
 // Module-level LRU render cache
@@ -360,16 +410,14 @@ export function clearRenderCache(): void {
 }
 
 // Stable numeric IDs for structural theme/style objects (no ID field on type).
-// Symbol-keyed so the id travels with the object and is invisible to consumers.
-const kObjectId = Symbol("markdown.objectId");
-type WithObjectId = object & { [kObjectId]?: number };
+// WeakMap-keyed so the ID matches strict object identity and doesn't get copied by spread/cloning.
+const themeObjectIds = new WeakMap<object, number>();
 let nextObjectId = 0;
 function objectId(o: object): number {
-	const tagged = o as WithObjectId;
-	let id = tagged[kObjectId];
+	let id = themeObjectIds.get(o);
 	if (id === undefined) {
 		id = nextObjectId++;
-		tagged[kObjectId] = id;
+		themeObjectIds.set(o, id);
 	}
 	return id;
 }
@@ -1150,12 +1198,16 @@ export class Markdown implements Component {
 				break;
 			}
 
-			case "hr":
-				lines.push(this.#theme.hr(this.#theme.symbols.hrChar.repeat(Math.min(width, 80))));
+			case "hr": {
+				const raw = "raw" in token && typeof token.raw === "string" ? token.raw.trim() : "";
+				const char = raw[0] || "";
+				const fillChar = getHrChar(char, this.#theme.symbols.hrChar);
+				lines.push(this.#theme.hr(fillChar.repeat(Math.min(width, 80))));
 				if (nextTokenType && nextTokenType !== "space") {
 					lines.push(""); // Add spacing after horizontal rules (unless space token follows)
 				}
 				break;
+			}
 
 			case "html":
 				if ("raw" in token && typeof token.raw === "string") {

package/src/tui.ts

@@ -1005,11 +1005,6 @@ export class TUI extends Container {
 	// fast path (`#renderResizeViewport`) instead of an authoritative full
 	// paint, and no commit/window/diff state is advanced.
 	#resizeViewportActive = false;
-	// Set only by the resize callback's cheap-paint request. A concurrent
-	// caller-forced render (tool finalization, reset, image reconciliation) must
-	// not be downgraded to the throwaway viewport path just because a resize
-	// settle window is active.
-	#resizeViewportPaintPending = false;
 	// Quiet-window timer that ends the drag: its callback clears the flag and
 	// drives the one authoritative full paint. Reset on every resize event so it
 	// only fires once the drag stops. Cancelled on stop().
@@ -1792,7 +1787,6 @@ export class TUI extends Container {
 		// Any non-component-scoped request makes the pending frame a full one.
 		this.#pendingRenderComponentsOnly = false;
 		if (force) {
-			this.#resizeViewportPaintPending = false;
 			// Forced repaints landing inside the multiplexer resize debounce
 			// (e.g. `#finishSixelProbe`, image-budget eviction, a programmatic
 			// `requestRender(true)`) would paint into a still-reflowing pane
@@ -2471,16 +2465,30 @@ export class TUI extends Container {
 		// Strictly state-isolated: it never consumes #resizeEventPending nor
 		// advances any commit/window/diff field, so the authoritative full paint
 		// the settle timer queues reconciles as if these throwaway frames never
-		// ran. A visible overlay composites over the transcript and needs the
-		// whole window, so fall through to the normal forced paint when one is up
-		// (overlay resizes are not on the drag-cost hot path).
+		// ran. Two render sources reach here mid-drag and BOTH must stay on this
+		// path:
+		//   - the resize callback's own cheap paint after each SIGWINCH;
+		//   - an ordinary (non-forced) render from a live block that keeps
+		//     animating through the drag — a spinner tick, a streamed token, a
+		//     cursor blink — firing requestRender(false)/requestComponentRender.
+		//     #resizeEventPending is still set (the fast path never consumed it),
+		//     so without this branch the ordinary render falls through to the
+		//     geometry-rebuild full paint below, which LEAVES the borrowed
+		//     alternate screen to repaint the whole transcript on the normal
+		//     screen — then the next SIGWINCH re-enters the alt screen and paints
+		//     only the tail, so the block flashes in for one frame and vanishes.
+		// A forced render (tool finalization, reset, image reconciliation) must
+		// still preempt: it set #forceViewportRepaintOnNextRender via
+		// #prepareForcedRender and owns the next authoritative paint, so it falls
+		// through. A visible overlay composites over the transcript and needs the
+		// whole window, so it also falls through (overlay resizes are not on the
+		// drag-cost hot path).
 		if (
-			this.#resizeViewportPaintPending &&
 			this.#resizeViewportActive &&
+			!this.#forceViewportRepaintOnNextRender &&
 			this.#hasEverRendered &&
 			this.#getTopmostVisibleOverlay() === undefined
 		) {
-			this.#resizeViewportPaintPending = false;
 			this.#componentRenderTargets.clear();
 			this.#renderResizeViewport(width, height);
 			return;
@@ -3145,7 +3153,6 @@ export class TUI extends Container {
 
 	#requestResizeViewportPaint(): void {
 		if (this.#stopped) return;
-		this.#resizeViewportPaintPending = true;
 		this.#renderRequested = false;
 		this.#lastRenderAt = this.#renderScheduler.now();
 		this.#doRender();

package/src/utils.ts

@@ -7,11 +7,11 @@ import {
 	wrapTextWithAnsi as nativeWrapTextWithAnsi,
 	type SliceResult,
 } from "@oh-my-pi/pi-natives";
-import { getDefaultTabWidth, getIndentation } from "@oh-my-pi/pi-utils";
+import { DEFAULT_TAB_WIDTH } from "@oh-my-pi/pi-utils";
 
 export { Ellipsis } from "@oh-my-pi/pi-natives";
 
-export { getDefaultTabWidth, getIndentation } from "@oh-my-pi/pi-utils";
+export { DEFAULT_TAB_WIDTH } from "@oh-my-pi/pi-utils";
 
 export type TextSizingScale = 1 | 2 | 3;
 export type TextSizingVerticalAlign = "top" | "bottom" | "center";
@@ -74,35 +74,32 @@ export function encodeTextSized(text: string, options: TextSizingOptions = {}):
 }
 
 export function sliceWithWidth(line: string, startCol: number, length: number, strict?: boolean | null): SliceResult {
-	return nativeSliceWithWidth(line, startCol, length, strict ?? null, getDefaultTabWidth());
+	return nativeSliceWithWidth(line, startCol, length, strict ?? null, DEFAULT_TAB_WIDTH);
 }
 
 export function truncateToWidth(
 	text: string,
 	maxWidth: number,
-	ellipsisKind?: Ellipsis | null,
+	ellipsisKind?: Ellipsis | null | "",
 	pad?: boolean | null,
 ): string {
-	// Guard nullish napi inputs: napi-rs 3 on the Windows prebuilt rejects
-	// `null` for `Option<u8>` (Ellipsis) / `Option<bool>` (pad) (issue #848),
-	// and `maxWidth` is a required `u32` that throws on `null`/`undefined`
-	// everywhere. Pass concrete defaults that mirror the Rust `unwrap_or`s.
-	const safeWidth = Number.isFinite(maxWidth) ? Math.max(0, Math.trunc(maxWidth)) : 0;
-	let resolvedEllipsis: Ellipsis | null | undefined | string = ellipsisKind;
-	if (typeof resolvedEllipsis === "string") {
-		resolvedEllipsis = resolvedEllipsis === "" ? Ellipsis.Omit : Ellipsis.Unicode;
+	maxWidth = Math.max(0, maxWidth | 0);
+	// Fast path: every UTF-16 unit is at most 3 cells wide, so a string whose
+	// `length * 3` already fits within `safeWidth` cannot need truncation.
+	if (!pad && text.length * 3 <= maxWidth) {
+		return text;
 	}
 	return nativeTruncateToWidth(
 		text,
-		safeWidth,
-		resolvedEllipsis ?? Ellipsis.Unicode,
+		maxWidth,
+		(ellipsisKind === "" ? Ellipsis.Omit : ellipsisKind) ?? Ellipsis.Unicode,
 		pad ?? false,
-		getDefaultTabWidth(),
+		DEFAULT_TAB_WIDTH,
 	);
 }
 
 export function wrapTextWithAnsi(text: string, width: number): string[] {
-	return nativeWrapTextWithAnsi(text, width, getDefaultTabWidth());
+	return nativeWrapTextWithAnsi(text, width, DEFAULT_TAB_WIDTH);
 }
 
 export function extractSegments(
@@ -112,24 +109,17 @@ export function extractSegments(
 	afterLen: number,
 	strictAfter: boolean,
 ): ExtractSegmentsResult {
-	return nativeExtractSegments(line, beforeEnd, afterStart, afterLen, strictAfter, getDefaultTabWidth());
+	return nativeExtractSegments(line, beforeEnd, afterStart, afterLen, strictAfter, DEFAULT_TAB_WIDTH);
 }
 
 // Pre-allocated space buffer for padding
 const SPACE_BUFFER = " ".repeat(512);
 
-/**
- * Tab width in columns for `file`, using `process.cwd()` as the project root for relative paths.
- */
-export function getIndentationNoescape(file?: string): number {
-	return getIndentation(file, process.cwd());
-}
-
 /*
- * Replace tabs with configured spacing for consistent rendering.
+ * Replace tabs with the fixed display tab width for consistent rendering.
  */
-export function replaceTabs(text: string, file?: string): string {
-	return text.replaceAll("\t", " ".repeat(getIndentation(file)));
+export function replaceTabs(text: string): string {
+	return text.replaceAll("\t", " ".repeat(DEFAULT_TAB_WIDTH));
 }
 
 /**
@@ -186,7 +176,7 @@ export function visibleWidth(str: string): number {
 		for (let tabIndex = str.indexOf(TAB); tabIndex !== -1; tabIndex = str.indexOf(TAB, tabIndex + 1)) {
 			tabCount++;
 		}
-		if (tabCount > 0) width += tabCount * getDefaultTabWidth();
+		if (tabCount > 0) width += tabCount * DEFAULT_TAB_WIDTH;
 		return width;
 	}
 
@@ -203,7 +193,7 @@ export function visibleWidth(str: string): number {
 		}
 	}
 	if (i === str.length) {
-		return tabCount === 0 ? str.length : str.length + tabCount * (getDefaultTabWidth() - 1);
+		return tabCount === 0 ? str.length : str.length + tabCount * (DEFAULT_TAB_WIDTH - 1);
 	}
 
 	if (tabCount === 0) {
@@ -224,7 +214,7 @@ export function visibleWidth(str: string): number {
 	// the native scanner that traps under Bun 1.3.x GC/N-API load). It strips
 	// CSI/OSC to zero cells and shares the native engine's UAX#11 width tables.
 	let width = Bun.stringWidth(str, STRING_WIDTH_OPTS);
-	if (tabCount > 0) width += tabCount * getDefaultTabWidth();
+	if (tabCount > 0) width += tabCount * DEFAULT_TAB_WIDTH;
 
 	// OSC 66: add back each stripped span as `scale * (explicit w ?? payload
 	// width)`. Matched rather than replaced to avoid reallocating the string.