@nghyane/arcane-tui 0.1.0

package/src/buffer/render.ts

@@ -0,0 +1,149 @@
+import type { Buffer, CellChange } from "./buffer.js";
+import { DEFAULT_STYLE, hasColor, Mod, type Style, unpackRgb } from "./cell.js";
+
+function styleEquals(a: Style, b: Style): boolean {
+	return a.fg === b.fg && a.bg === b.bg && a.mods === b.mods && a.link === b.link;
+}
+
+function emitStyleDiff(prev: Style, next: Style, parts: string[]): void {
+	// Check if reset is simpler
+	const needReset =
+		(prev.mods & ~next.mods) !== 0 ||
+		(hasColor(prev.fg) && !hasColor(next.fg)) ||
+		(hasColor(prev.bg) && !hasColor(next.bg));
+
+	if (needReset) {
+		parts.push("\x1b[0m");
+		// After reset, emit everything in next that isn't default
+		if (next.mods) emitMods(0, next.mods, parts);
+		if (hasColor(next.fg)) {
+			const [r, g, b] = unpackRgb(next.fg);
+			parts.push(`\x1b[38;2;${r};${g};${b}m`);
+		}
+		if (hasColor(next.bg)) {
+			const [r, g, b] = unpackRgb(next.bg);
+			parts.push(`\x1b[48;2;${r};${g};${b}m`);
+		}
+	} else {
+		if (prev.fg !== next.fg) {
+			if (hasColor(next.fg)) {
+				const [r, g, b] = unpackRgb(next.fg);
+				parts.push(`\x1b[38;2;${r};${g};${b}m`);
+			} else {
+				parts.push("\x1b[39m");
+			}
+		}
+		if (prev.bg !== next.bg) {
+			if (hasColor(next.bg)) {
+				const [r, g, b] = unpackRgb(next.bg);
+				parts.push(`\x1b[48;2;${r};${g};${b}m`);
+			} else {
+				parts.push("\x1b[49m");
+			}
+		}
+		if (prev.mods !== next.mods) {
+			emitMods(prev.mods, next.mods, parts);
+		}
+	}
+
+	if (prev.link !== next.link) {
+		if (next.link) {
+			parts.push(`\x1b]8;;${next.link}\x07`);
+		} else {
+			parts.push("\x1b]8;;\x07");
+		}
+	}
+}
+
+function emitMods(prev: number, next: number, parts: string[]): void {
+	const added = next & ~prev;
+	const removed = prev & ~next;
+
+	if (added & Mod.Bold) parts.push("\x1b[1m");
+	if (added & Mod.Dim) parts.push("\x1b[2m");
+	if (added & Mod.Italic) parts.push("\x1b[3m");
+	if (added & Mod.Underline) parts.push("\x1b[4m");
+	if (added & Mod.Blink) parts.push("\x1b[5m");
+	if (added & Mod.Reverse) parts.push("\x1b[7m");
+	if (added & Mod.Hidden) parts.push("\x1b[8m");
+	if (added & Mod.Strikethrough) parts.push("\x1b[9m");
+
+	if (removed & Mod.Bold) parts.push("\x1b[22m");
+	if (removed & Mod.Dim) parts.push("\x1b[22m");
+	if (removed & Mod.Italic) parts.push("\x1b[23m");
+	if (removed & Mod.Underline) parts.push("\x1b[24m");
+	if (removed & Mod.Blink) parts.push("\x1b[25m");
+	if (removed & Mod.Reverse) parts.push("\x1b[27m");
+	if (removed & Mod.Hidden) parts.push("\x1b[28m");
+	if (removed & Mod.Strikethrough) parts.push("\x1b[29m");
+}
+
+export function renderDiff(changes: CellChange[], _width: number): string {
+	if (changes.length === 0) return "";
+
+	const sorted = [...changes].sort((a, b) => (a.row !== b.row ? a.row - b.row : a.col - b.col));
+
+	const parts: string[] = [];
+	let curRow = -1;
+	let curCol = -1;
+	let curStyle: Style = { ...DEFAULT_STYLE };
+
+	for (const change of sorted) {
+		const { col, row, cell } = change;
+
+		// Skip placeholder cells
+		if (cell.width === 0) continue;
+
+		// Cursor positioning
+		if (row !== curRow || col !== curCol) {
+			// 1-based positioning
+			parts.push(`\x1b[${row + 1};${col + 1}H`);
+			curRow = row;
+			curCol = col;
+		}
+
+		// Style changes
+		if (!styleEquals(curStyle, cell.style)) {
+			emitStyleDiff(curStyle, cell.style, parts);
+			curStyle = { ...cell.style };
+		}
+
+		parts.push(cell.char);
+		curCol += cell.width;
+	}
+
+	parts.push("\x1b[0m");
+	return parts.join("");
+}
+
+export function renderBuffer(buf: Buffer): string[] {
+	const lines: string[] = [];
+
+	for (let row = 0; row < buf.height; row++) {
+		const parts: string[] = [];
+		let curStyle: Style = { ...DEFAULT_STYLE };
+
+		for (let col = 0; col < buf.width; col++) {
+			const cell = buf.get(col, row);
+
+			// Skip placeholders
+			if (cell.width === 0) continue;
+
+			if (!styleEquals(curStyle, cell.style)) {
+				emitStyleDiff(curStyle, cell.style, parts);
+				curStyle = { ...cell.style };
+			}
+
+			parts.push(cell.char);
+		}
+
+		// Reset at end of line
+		if (!styleEquals(curStyle, DEFAULT_STYLE)) {
+			parts.push("\x1b[0m");
+		}
+
+		lines.push(parts.join(""));
+	}
+
+	return lines;
+}

package/src/components/box.ts

@@ -0,0 +1,144 @@
+import type { Component } from "../tui";
+import { applyBackgroundToLine, padding, visibleWidth } from "../utils";
+
+type Cache = {
+	key: bigint;
+	result: string[];
+};
+
+/**
+ * Box component - a container that applies padding and background to all children
+ */
+export class Box implements Component {
+	children: Component[] = [];
+	#paddingX: number;
+	#paddingY: number;
+	#bgFn?: (text: string) => string;
+
+	// Cache for rendered output
+	#cached?: Cache;
+
+	constructor(paddingX = 1, paddingY = 1, bgFn?: (text: string) => string) {
+		this.#paddingX = paddingX;
+		this.#paddingY = paddingY;
+		this.#bgFn = bgFn;
+	}
+
+	addChild(component: Component): void {
+		this.children.push(component);
+		this.#invalidateCache();
+	}
+
+	removeChild(component: Component): void {
+		const index = this.children.indexOf(component);
+		if (index !== -1) {
+			this.children.splice(index, 1);
+			this.#invalidateCache();
+		}
+	}
+
+	clear(): void {
+		this.children = [];
+		this.#invalidateCache();
+	}
+
+	setBgFn(bgFn?: (text: string) => string): void {
+		this.#bgFn = bgFn;
+		// Don't invalidate here - we'll detect bgFn changes by sampling output
+	}
+
+	#invalidateCache(): void {
+		this.#cached = undefined;
+	}
+
+	static #tmp = new Uint32Array(2);
+	#computeCacheKey(width: number, childLines: string[], bgSample: string | undefined): bigint {
+		Box.#tmp[0] = width;
+		Box.#tmp[1] = childLines.length;
+		let h = Bun.hash.xxHash64(Box.#tmp);
+		for (const line of childLines) {
+			Box.#tmp[0] = line.length;
+			h = Bun.hash.xxHash64(Box.#tmp, h);
+			h = Bun.hash.xxHash64(line, h);
+		}
+		h = Bun.hash.xxHash64(bgSample ?? "", h);
+		return h;
+	}
+
+	#matchCache(cacheKey: bigint): boolean {
+		return this.#cached?.key === cacheKey;
+	}
+
+	invalidate(): void {
+		this.#invalidateCache();
+		for (const child of this.children) {
+			child.invalidate?.();
+		}
+	}
+
+	render(width: number): string[] {
+		if (this.children.length === 0) {
+			return [];
+		}
+
+		const contentWidth = Math.max(1, width - this.#paddingX * 2);
+		const leftPad = padding(this.#paddingX);
+
+		// Render all children
+		const childLines: string[] = [];
+		for (const child of this.children) {
+			const lines = child.render(contentWidth);
+			for (const line of lines) {
+				childLines.push(leftPad + line);
+			}
+		}
+
+		if (childLines.length === 0) {
+			return [];
+		}
+
+		// Check if bgFn output changed by sampling
+		const bgSample = this.#bgFn ? this.#bgFn("test") : undefined;
+
+		const cacheKey = this.#computeCacheKey(width, childLines, bgSample);
+
+		// Check cache validity
+		if (this.#matchCache(cacheKey)) {
+			return this.#cached!.result;
+		}
+
+		// Apply background and padding
+		const result: string[] = [];
+
+		// Top padding
+		for (let i = 0; i < this.#paddingY; i++) {
+			result.push(this.#applyBg("", width));
+		}
+
+		// Content
+		for (const line of childLines) {
+			result.push(this.#applyBg(line, width));
+		}
+
+		// Bottom padding
+		for (let i = 0; i < this.#paddingY; i++) {
+			result.push(this.#applyBg("", width));
+		}
+
+		// Update cache
+		this.#cached = { key: cacheKey, result };
+
+		return result;
+	}
+
+	#applyBg(line: string, width: number): string {
+		const visLen = visibleWidth(line);
+		const padNeeded = Math.max(0, width - visLen);
+		const padded = line + padding(padNeeded);
+
+		if (this.#bgFn) {
+			return applyBackgroundToLine(padded, width, this.#bgFn);
+		}
+		return padded;
+	}
+}

package/src/components/cancellable-loader.ts

@@ -0,0 +1,39 @@
+import { matchesKey } from "../keys";
+import { Loader } from "./loader";
+
+/**
+ * Loader that can be cancelled with Escape.
+ * Extends Loader with an AbortSignal for cancelling async operations.
+ *
+ * @example
+ * const loader = new CancellableLoader(tui, cyan, dim, "Working...");
+ * loader.onAbort = () => done(null);
+ * doWork(loader.signal).then(done);
+ */
+export class CancellableLoader extends Loader {
+	#abortController = new AbortController();
+
+	/** Called when user presses Escape */
+	onAbort?: () => void;
+
+	/** AbortSignal that is aborted when user presses Escape */
+	get signal(): AbortSignal {
+		return this.#abortController.signal;
+	}
+
+	/** Whether the loader was aborted */
+	get aborted(): boolean {
+		return this.#abortController.signal.aborted;
+	}
+
+	handleInput(data: string): void {
+		if (matchesKey(data, "escape") || matchesKey(data, "esc")) {
+			this.#abortController.abort();
+			this.onAbort?.();
+		}
+	}
+
+	dispose(): void {
+		this.stop();
+	}
+}