@oh-my-pi/pi-tui 18.2.4 → 18.2.5

package/src/components/layout/split-pane.ts

@@ -0,0 +1,349 @@
+import type { MouseRoutable, SgrMouseEvent } from "../../mouse";
+import type { Component } from "../../tui";
+import { visibleWidth } from "../../utils";
+import {
+	isLayoutComponent,
+	isLayoutMouseRoutable,
+	type LayoutAlignment,
+	type LayoutContent,
+	layoutDecorationText,
+	type LayoutDecoration,
+	type LayoutRect,
+	layoutRatio,
+	layoutSize,
+	optionalLayoutSize,
+	uniqueLayoutComponents,
+} from "./geometry";
+import { Row } from "./row";
+
+/** Pane selected when a split collapses below its width constraints. */
+export type PaneSide = "left" | "right";
+
+/** Fixed or proportional sizing constraints for the left pane. */
+export interface SplitPaneSize {
+	fixed?: number;
+	ratio?: number;
+	min?: number;
+	max?: number;
+}
+
+/** Construction options for {@link SplitPane}. */
+export interface SplitPaneOptions {
+	left: LayoutContent;
+	right: LayoutContent;
+	leftSize?: SplitPaneSize;
+	rightMinWidth?: number;
+	splitAt?: number;
+	narrowPane?: PaneSide;
+	height?: number;
+	prefix?: LayoutDecoration;
+	divider?: LayoutDecoration;
+	suffix?: LayoutDecoration;
+	align?: LayoutAlignment;
+}
+
+/** Resolved pane mode and local rectangles for a width. */
+export interface SplitPaneGeometry {
+	mode: "split" | "narrow";
+	left?: LayoutRect;
+	right?: LayoutRect;
+	dividerCol?: number;
+}
+
+/** A pane hit translated into the pane child's local coordinates. */
+export interface SplitPaneHit {
+	pane: PaneSide;
+	content: LayoutContent;
+	line: number;
+	col: number;
+	rect: LayoutRect;
+}
+
+interface SplitMeasureMemo {
+	width: number;
+	prefix: string;
+	divider: string;
+	suffix: string;
+	geometry: SplitPaneGeometry;
+}
+
+/**
+ * Adaptive two-pane layout over {@link Row}. It owns width bounds, an optional
+ * narrow fallback, exact height budgets, and pane-local mouse translation.
+ */
+export class SplitPane implements Component, MouseRoutable {
+	readonly #left: LayoutContent;
+	readonly #right: LayoutContent;
+	readonly #row: Row;
+	#leftSize: SplitPaneSize;
+	#rightMinWidth: number;
+	#splitAt: number;
+	#narrowPane: PaneSide | undefined;
+	#height: number | undefined;
+	#prefix: LayoutDecoration | undefined;
+	#divider: LayoutDecoration | undefined;
+	#suffix: LayoutDecoration | undefined;
+	#align: LayoutAlignment;
+	#lastGeometry: SplitPaneGeometry = { mode: "split" };
+	#measureMemo: SplitMeasureMemo | undefined;
+	#rowMode: "split" | PaneSide = "split";
+	#rowLeftWidth = -1;
+
+	constructor(options: SplitPaneOptions) {
+		this.#left = options.left;
+		this.#right = options.right;
+		this.#leftSize = {
+			fixed: optionalLayoutSize(options.leftSize?.fixed),
+			ratio: options.leftSize?.ratio === undefined ? undefined : layoutRatio(options.leftSize.ratio, 0),
+			min: optionalLayoutSize(options.leftSize?.min),
+			max: optionalLayoutSize(options.leftSize?.max),
+		};
+		this.#rightMinWidth = layoutSize(options.rightMinWidth);
+		this.#splitAt = layoutSize(options.splitAt);
+		this.#narrowPane = options.narrowPane;
+		this.#height = optionalLayoutSize(options.height);
+		this.#prefix = options.prefix;
+		this.#divider = options.divider;
+		this.#suffix = options.suffix;
+		this.#align = options.align ?? "start";
+		this.#row = new Row({
+			children: [
+				{ content: this.#left, grow: 1, align: this.#align },
+				{ content: this.#right, grow: 1, align: this.#align },
+			],
+			height: this.#height,
+			prefix: this.#prefix,
+			gap: this.#divider,
+			suffix: this.#suffix,
+			align: this.#align,
+		});
+	}
+
+	/** Concrete pane children exposed to the debug tree. */
+	get debugChildren(): readonly Component[] {
+		return uniqueLayoutComponents([this.#left, this.#right]);
+	}
+
+	/** Mode used by the last render. */
+	get mode(): "split" | "narrow" {
+		return this.#lastGeometry.mode;
+	}
+
+	/** Left-pane content width from the last render. */
+	get leftWidth(): number {
+		return this.#lastGeometry.left?.width ?? 0;
+	}
+
+	/** Right-pane content width from the last render. */
+	get rightWidth(): number {
+		return this.#lastGeometry.right?.width ?? 0;
+	}
+
+	/** Column where the divider begins in the last split render. */
+	get dividerCol(): number | undefined {
+		return this.#lastGeometry.dividerCol;
+	}
+
+	/** Set the exact pane row budget, or clear it to use natural height. */
+	setHeight(height: number | undefined): void {
+		const next = optionalLayoutSize(height);
+		if (next === this.#height) return;
+		this.#height = next;
+		this.#measureMemo = undefined;
+		this.#row.setHeight(this.#height);
+	}
+
+	/** Change which pane is shown in narrow mode; `undefined` disables collapse. */
+	setNarrowPane(pane: PaneSide | undefined): void {
+		if (pane === this.#narrowPane) return;
+		this.#narrowPane = pane;
+		this.#measureMemo = undefined;
+	}
+
+	/** Update fixed/proportional left-pane constraints. */
+	setLeftSize(size: SplitPaneSize): void {
+		const next: SplitPaneSize = {
+			fixed: optionalLayoutSize(size.fixed),
+			ratio: size.ratio === undefined ? undefined : layoutRatio(size.ratio, 0),
+			min: optionalLayoutSize(size.min),
+			max: optionalLayoutSize(size.max),
+		};
+		if (
+			next.fixed === this.#leftSize.fixed &&
+			next.ratio === this.#leftSize.ratio &&
+			next.min === this.#leftSize.min &&
+			next.max === this.#leftSize.max
+		) {
+			return;
+		}
+		this.#leftSize = next;
+		this.#measureMemo = undefined;
+	}
+
+	/** Update the minimum width at which both panes may be shown. */
+	setSplitAt(width: number): void {
+		const next = layoutSize(width);
+		if (next === this.#splitAt) return;
+		this.#splitAt = next;
+		this.#measureMemo = undefined;
+	}
+
+	/** Update the minimum content width reserved for the right pane. */
+	setRightMinWidth(width: number): void {
+		const next = layoutSize(width);
+		if (next === this.#rightMinWidth) return;
+		this.#rightMinWidth = next;
+		this.#measureMemo = undefined;
+	}
+
+	/** Update outer and divider decorations. */
+	setDecorations(
+		prefix: LayoutDecoration | undefined,
+		divider: LayoutDecoration | undefined,
+		suffix: LayoutDecoration | undefined,
+	): void {
+		if (prefix === this.#prefix && divider === this.#divider && suffix === this.#suffix) return;
+		this.#prefix = prefix;
+		this.#divider = divider;
+		this.#suffix = suffix;
+		this.#measureMemo = undefined;
+	}
+
+	/** Resolve split/narrow geometry without rendering either pane. */
+	measure(width: number): SplitPaneGeometry {
+		width = layoutSize(width);
+		const prefix = layoutDecorationText(this.#prefix);
+		const divider = layoutDecorationText(this.#divider);
+		const suffix = layoutDecorationText(this.#suffix);
+		const memo = this.#measureMemo;
+		if (
+			memo &&
+			memo.width === width &&
+			memo.prefix === prefix &&
+			memo.divider === divider &&
+			memo.suffix === suffix
+		) {
+			return memo.geometry;
+		}
+		const prefixWidth = visibleWidth(prefix);
+		const dividerWidth = visibleWidth(divider);
+		const suffixWidth = visibleWidth(suffix);
+		const splitAvailable = Math.max(0, width - prefixWidth - dividerWidth - suffixWidth);
+		const leftMinimum = layoutSize(this.#leftSize.min);
+		const leftMaximum =
+			this.#leftSize.max === undefined
+				? Number.MAX_SAFE_INTEGER
+				: Math.max(leftMinimum, layoutSize(this.#leftSize.max));
+		const canSplit =
+			this.#narrowPane === undefined ||
+			(width >= this.#splitAt && splitAvailable >= leftMinimum + this.#rightMinWidth);
+		if (!canSplit) {
+			const available = Math.max(0, width - prefixWidth - suffixWidth);
+			const rect: LayoutRect = { row: 0, col: prefixWidth, width: available, height: this.#height ?? 0 };
+			const geometry: SplitPaneGeometry =
+				this.#narrowPane === "right" ? { mode: "narrow", right: rect } : { mode: "narrow", left: rect };
+			this.#measureMemo = { width, prefix, divider, suffix, geometry };
+			return geometry;
+		}
+
+		const desired =
+			this.#leftSize.fixed !== undefined
+				? this.#leftSize.fixed
+				: Math.floor(width * layoutRatio(this.#leftSize.ratio, 0.5));
+		const maximumForRight = Math.max(0, splitAvailable - this.#rightMinWidth);
+		const leftWidth = Math.max(0, Math.min(leftMaximum, maximumForRight, Math.max(leftMinimum, desired)));
+		const rightWidth = Math.max(0, splitAvailable - leftWidth);
+		const geometry: SplitPaneGeometry = {
+			mode: "split",
+			left: { row: 0, col: prefixWidth, width: leftWidth, height: this.#height ?? 0 },
+			right: {
+				row: 0,
+				col: prefixWidth + leftWidth + dividerWidth,
+				width: rightWidth,
+				height: this.#height ?? 0,
+			},
+			dividerCol: prefixWidth + leftWidth,
+		};
+		this.#measureMemo = { width, prefix, divider, suffix, geometry };
+		return geometry;
+	}
+
+	/** Translate a split-local point into pane-local coordinates. */
+	locate(line: number, col: number): SplitPaneHit | undefined {
+		const panes: readonly [PaneSide, LayoutContent, LayoutRect | undefined][] = [
+			["left", this.#left, this.#lastGeometry.left],
+			["right", this.#right, this.#lastGeometry.right],
+		];
+		for (const [pane, content, rect] of panes) {
+			if (!rect) continue;
+			if (line < rect.row || line >= rect.row + rect.height || col < rect.col || col >= rect.col + rect.width)
+				continue;
+			return { pane, content, line: line - rect.row, col: col - rect.col, rect };
+		}
+		return undefined;
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		const hit = this.locate(line, col);
+		if (hit && isLayoutMouseRoutable(hit.content)) hit.content.routeMouse(event, hit.line, hit.col);
+	}
+
+	setIgnoreTight(ignore: boolean): this {
+		for (const child of uniqueLayoutComponents([this.#left, this.#right])) child.setIgnoreTight?.(ignore);
+		return this;
+	}
+
+	invalidate(): void {
+		this.#row.invalidate();
+		const visibleLeft = this.#lastGeometry.left !== undefined;
+		const visibleRight = this.#lastGeometry.right !== undefined;
+		if (!visibleLeft && isLayoutComponent(this.#left)) this.#left.invalidate?.();
+		if (!visibleRight && isLayoutComponent(this.#right) && this.#right !== this.#left) this.#right.invalidate?.();
+	}
+
+	dispose(): void {
+		for (const child of uniqueLayoutComponents([this.#left, this.#right])) child.dispose?.();
+	}
+
+	render(width: number): readonly string[] {
+		const measured = this.measure(width);
+		this.#row.setHeight(this.#height);
+		if (measured.mode === "split") {
+			this.#row.setDecorations(this.#prefix, this.#divider, this.#suffix);
+			const leftWidth = measured.left?.width ?? 0;
+			if (this.#rowMode !== "split" || leftWidth !== this.#rowLeftWidth) {
+				this.#row.setChildren([
+					{ content: this.#left, width: leftWidth, align: this.#align },
+					{ content: this.#right, grow: 1, minWidth: this.#rightMinWidth, align: this.#align },
+				]);
+				this.#rowMode = "split";
+				this.#rowLeftWidth = leftWidth;
+			}
+		} else {
+			const pane = this.#narrowPane ?? "left";
+			if (this.#rowMode !== pane) {
+				const content = pane === "right" ? this.#right : this.#left;
+				this.#row.setChildren([{ content, grow: 1, align: this.#align }]);
+				this.#rowMode = pane;
+				this.#rowLeftWidth = -1;
+			}
+			this.#row.setDecorations(this.#prefix, undefined, this.#suffix);
+		}
+		const lines = this.#row.render(width);
+		if (measured.mode === "split") {
+			const left = this.#row.childRect(0);
+			const right = this.#row.childRect(1);
+			this.#lastGeometry = {
+				mode: "split",
+				left,
+				right,
+				dividerCol: left ? left.col + left.width : measured.dividerCol,
+			};
+		} else {
+			const rect = this.#row.childRect(0);
+			this.#lastGeometry =
+				this.#narrowPane === "right" ? { mode: "narrow", right: rect } : { mode: "narrow", left: rect };
+		}
+		return lines;
+	}
+}

package/src/components/layout/stack.ts

@@ -0,0 +1,261 @@
+import type { MouseRoutable, SgrMouseEvent } from "../../mouse";
+import type { Component } from "../../tui";
+import { padding } from "../../utils";
+import {
+	allocateLayoutSpace,
+	equalLayoutInsets,
+	fitLayoutLine,
+	isLayoutMouseRoutable,
+	layoutAlignmentOffset,
+	type LayoutAlignment,
+	type LayoutContent,
+	layoutInsets,
+	type LayoutInsets,
+	type LayoutRect,
+	layoutSize,
+	optionalLayoutSize,
+	renderLayoutContent,
+	uniqueLayoutComponents,
+} from "./geometry";
+
+/** One child and its vertical row-budget constraints. */
+export interface StackChild {
+	content: LayoutContent;
+	height?: number;
+	grow?: number;
+	minHeight?: number;
+	maxHeight?: number;
+	padding?: LayoutInsets;
+	align?: LayoutAlignment;
+}
+
+/** Construction options for {@link Stack}. */
+export interface StackOptions {
+	children: readonly StackChild[];
+	height?: number;
+	align?: LayoutAlignment;
+}
+
+/** A stack hit translated into the child's local coordinates. */
+export interface StackHit {
+	index: number;
+	content: LayoutContent;
+	line: number;
+	col: number;
+	rect: LayoutRect;
+}
+
+interface StackMemo {
+	width: number;
+	height: number | undefined;
+	heights: readonly number[];
+	lines: readonly (readonly string[])[];
+	result: readonly string[];
+}
+
+function sameChild(left: StackChild, right: StackChild): boolean {
+	return (
+		left.content === right.content &&
+		left.height === right.height &&
+		left.grow === right.grow &&
+		left.minHeight === right.minHeight &&
+		left.maxHeight === right.maxHeight &&
+		left.align === right.align &&
+		equalLayoutInsets(left.padding, right.padding)
+	);
+}
+
+/**
+ * Vertical component layout with fixed and growing regions, exact height
+ * budgets, ANSI-aware clipping, padding, and local mouse translation.
+ */
+export class Stack implements Component, MouseRoutable {
+	#children: StackChild[];
+	#height: number | undefined;
+	#align: LayoutAlignment;
+	#frames: LayoutRect[] = [];
+	#memo: StackMemo | undefined;
+	#ignoreTight = false;
+
+	constructor(options: StackOptions) {
+		this.#children = options.children.map(child => ({ ...child, padding: { ...child.padding } }));
+		this.#height = optionalLayoutSize(options.height);
+		this.#align = options.align ?? "start";
+	}
+
+	/** Concrete component children exposed to the debug tree. */
+	get debugChildren(): readonly Component[] {
+		return uniqueLayoutComponents(this.#children.map(child => child.content));
+	}
+
+	/** Last-rendered content rectangle for `index`, excluding its padding. */
+	childRect(index: number): LayoutRect | undefined {
+		return this.#frames[index];
+	}
+
+	/** Replace the stack's children without recreating the layout component. */
+	setChildren(children: readonly StackChild[]): void {
+		if (
+			children.length === this.#children.length &&
+			children.every((child, index) => sameChild(child, this.#children[index]!))
+		) {
+			return;
+		}
+		this.#children = children.map(child => ({ ...child, padding: { ...child.padding } }));
+		if (this.#ignoreTight) {
+			for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+				child.setIgnoreTight?.(true);
+			}
+		}
+		this.#memo = undefined;
+	}
+
+	/** Set the exact total row budget, or clear it to use natural height. */
+	setHeight(height: number | undefined): void {
+		const next = optionalLayoutSize(height);
+		if (next === this.#height) return;
+		this.#height = next;
+		this.#memo = undefined;
+	}
+
+	setIgnoreTight(ignore: boolean): this {
+		if (ignore === this.#ignoreTight) return this;
+		this.#ignoreTight = ignore;
+		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+			child.setIgnoreTight?.(ignore);
+		}
+		this.#memo = undefined;
+		return this;
+	}
+
+	invalidate(): void {
+		this.#memo = undefined;
+		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+			child.invalidate?.();
+		}
+	}
+
+	dispose(): void {
+		for (const child of uniqueLayoutComponents(this.#children.map(item => item.content))) {
+			child.dispose?.();
+		}
+	}
+
+	/** Translate a stack-local point into a child's local coordinates. */
+	locate(line: number, col: number): StackHit | undefined {
+		for (let index = 0; index < this.#frames.length; index++) {
+			const rect = this.#frames[index];
+			if (!rect) continue;
+			if (line < rect.row || line >= rect.row + rect.height || col < rect.col || col >= rect.col + rect.width)
+				continue;
+			return {
+				index,
+				content: this.#children[index]!.content,
+				line: line - rect.row,
+				col: col - rect.col,
+				rect,
+			};
+		}
+		return undefined;
+	}
+
+	routeMouse(event: SgrMouseEvent, line: number, col: number): void {
+		const hit = this.locate(line, col);
+		if (hit && isLayoutMouseRoutable(hit.content)) hit.content.routeMouse(event, hit.line, hit.col);
+	}
+
+	render(width: number): readonly string[] {
+		width = layoutSize(width);
+		const insets = this.#children.map(child => layoutInsets(child.padding));
+		let heights = this.#children.map(child => {
+			if (child.height !== undefined) return layoutSize(child.height);
+			return this.#height !== undefined && layoutSize(child.grow) > 0 ? layoutSize(child.minHeight) : -1;
+		});
+		const childLines: (readonly string[])[] = Array.from({ length: this.#children.length }, () => []);
+		const rendered = this.#children.map(() => false);
+
+		for (let index = 0; index < this.#children.length; index++) {
+			if ((heights[index] ?? -1) >= 0) continue;
+			const inset = insets[index]!;
+			const contentWidth = Math.max(0, width - inset.left - inset.right);
+			const lines =
+				contentWidth > 0 ? renderLayoutContent(this.#children[index]!.content, contentWidth, undefined) : [];
+			childLines[index] = lines;
+			rendered[index] = true;
+			heights[index] = lines.length + inset.top + inset.bottom;
+		}
+
+		const naturalTotal = heights.reduce((sum, height) => sum + Math.max(0, height), 0);
+		heights = allocateLayoutSpace(
+			this.#children.map((child, index) => ({
+				fixed:
+					child.height !== undefined || this.#height === undefined || layoutSize(child.grow) === 0
+						? heights[index]
+						: undefined,
+				grow: child.grow,
+				min: child.minHeight,
+				max: child.maxHeight,
+			})),
+			this.#height ?? naturalTotal,
+		);
+
+		for (let index = 0; index < this.#children.length; index++) {
+			if (rendered[index] || (heights[index] ?? 0) <= 0) continue;
+			const inset = insets[index]!;
+			const contentWidth = Math.max(0, width - inset.left - inset.right);
+			const contentHeight = Math.max(0, (heights[index] ?? 0) - inset.top - inset.bottom);
+			childLines[index] =
+				contentWidth > 0 ? renderLayoutContent(this.#children[index]!.content, contentWidth, contentHeight) : [];
+			rendered[index] = true;
+		}
+
+		let row = 0;
+		this.#frames = this.#children.map((_child, index) => {
+			const inset = insets[index]!;
+			const allocated = heights[index] ?? 0;
+			const rect: LayoutRect = {
+				row: row + inset.top,
+				col: inset.left,
+				width: Math.max(0, width - inset.left - inset.right),
+				height: Math.max(0, allocated - inset.top - inset.bottom),
+			};
+			row += allocated;
+			return rect;
+		});
+
+		const memo = this.#memo;
+		if (
+			memo &&
+			memo.width === width &&
+			memo.height === this.#height &&
+			memo.heights.length === heights.length &&
+			memo.heights.every((value, index) => value === heights[index]) &&
+			memo.lines.length === childLines.length &&
+			memo.lines.every((lines, index) => lines === childLines[index])
+		) {
+			return memo.result;
+		}
+
+		const result: string[] = [];
+		for (let index = 0; index < this.#children.length; index++) {
+			const child = this.#children[index]!;
+			const inset = insets[index]!;
+			const allocated = heights[index] ?? 0;
+			const viewportHeight = Math.max(0, allocated - inset.top - inset.bottom);
+			const lines = childLines[index]!;
+			const visibleHeight = Math.min(viewportHeight, lines.length);
+			const offset = layoutAlignmentOffset(viewportHeight - visibleHeight, child.align ?? this.#align);
+			for (let line = 0; line < allocated; line++) {
+				const childLine = line - inset.top - offset;
+				const content = childLine >= 0 && childLine < visibleHeight ? (lines[childLine] ?? "") : "";
+				const innerWidth = Math.max(0, width - inset.left - inset.right);
+				result.push(
+					fitLayoutLine(padding(inset.left) + fitLayoutLine(content, innerWidth) + padding(inset.right), width),
+				);
+			}
+		}
+		while (this.#height !== undefined && result.length < this.#height) result.push(padding(width));
+		this.#memo = { width, height: this.#height, heights, lines: childLines, result };
+		return result;
+	}
+}

package/src/components/markdown.ts

@@ -2061,17 +2061,8 @@ export class Markdown implements Component {
 			return EMPTY_RENDER_LINES;
 		}
 
-		// Replace tabs with spaces, then repair orphan fences in final mode.
-		const tabbed = replaceTabs(this.#text);
-		const normalizedText = this.transientRenderCache ? tabbed : repairOrphanClosingFence(tabbed);
-		if (!this.transientRenderCache && normalizedText.length < tabbed.length) {
-			// repairOrphanClosingFence deleted bytes this frame (orphan fence
-			// removed): the guard-scan memo's checked region is no longer
-			// byte-identical, and a cached false verdict may have been based
-			// on the very CR/ref-def line that was deleted. Invalidate so the
-			// next #lexTokens re-derives on the repaired buffer.
-			this.#lastScanValid = false;
-		}
+		// Fast-path inputs only: signature first, so the append-only branch below
+		// can return without scanning the whole document for tabs.
 		const signature = this.#renderSignature(width, paddingX);
 		// B+ fast path: an append-only, same-line delta re-renders ONLY the
 		// last content row (the paragraph's trailing wrapped row) with the
@@ -2197,7 +2188,20 @@ export class Markdown implements Component {
 			// Hazard → disarm until the next real render re-captures.
 			this.#fastTail = undefined;
 		}
-		// Replace tabs with 3 spaces for consistent rendering
+		// Normalize only after the append-only branch: the fast path above
+		// returns without ever reading these, so streaming frames skip the
+		// whole-document tab scan/copy (the delta-only replaceTabs inside the
+		// branch is the only tab work a streamed frame pays).
+		const tabbed = this.#text.includes("\t") ? replaceTabs(this.#text) : this.#text;
+		const normalizedText = this.transientRenderCache ? tabbed : repairOrphanClosingFence(tabbed);
+		if (!this.transientRenderCache && normalizedText.length < tabbed.length) {
+			// repairOrphanClosingFence deleted bytes this frame (orphan fence
+			// removed): the guard-scan memo's checked region is no longer
+			// byte-identical, and a cached false verdict may have been based
+			// on the very CR/ref-def line that was deleted. Invalidate so the
+			// next #lexTokens re-derives on the repaired buffer.
+			this.#lastScanValid = false;
+		}
 
 		// L2: module-level LRU — survives component disposal/recreation across
 		// session-tree navigations. Key encodes every dimension that affects the