@nghyane/arcane-tui 0.1.9 → 0.1.11

package/CHANGELOG.md

@@ -1,3 +1,9 @@
 # Changelog
 
 ## [Unreleased]
+
+## [0.1.11] - 2026-03-02
+
+### Added
+
+- `LeftBorderBox` component: renders children with a colored left border accent ([#51](https://github.com/nghyane/arcane/issues/51))

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@nghyane/arcane-tui",
-	"version": "0.1.9",
+	"version": "0.1.11",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/nghyane/arcane",
 	"author": "Can Bölük",

package/src/components/left-border-box.ts

@@ -0,0 +1,93 @@
+import type { Component } from "../tui";
+import { applyBackgroundToLine, padding } from "../utils";
+
+/**
+ * LeftBorderBox - a container that renders children with a colored left border accent
+ * and an optional full-width background.
+ *
+ * Used as a lighter alternative to full-background Box for tool outputs.
+ * The border character is colored via borderFn to indicate status.
+ */
+export class LeftBorderBox implements Component {
+	children: Component[] = [];
+	#borderFn: (char: string) => string;
+	#bgFn?: (text: string) => string;
+	#paddingLeft: number;
+	#paddingY: number;
+
+	constructor(paddingLeft = 1, paddingY = 0, borderFn?: (char: string) => string, bgFn?: (text: string) => string) {
+		this.#paddingLeft = paddingLeft;
+		this.#paddingY = paddingY;
+		this.#borderFn = borderFn ?? (s => s);
+		this.#bgFn = bgFn;
+	}
+
+	addChild(component: Component): void {
+		this.children.push(component);
+	}
+
+	removeChild(component: Component): void {
+		const index = this.children.indexOf(component);
+		if (index !== -1) {
+			this.children.splice(index, 1);
+		}
+	}
+
+	clear(): void {
+		this.children = [];
+	}
+
+	setBorderFn(borderFn: (char: string) => string): void {
+		this.#borderFn = borderFn;
+	}
+
+	setBgFn(bgFn?: (text: string) => string): void {
+		this.#bgFn = bgFn;
+	}
+
+	invalidate(): void {
+		for (const child of this.children) {
+			child.invalidate?.();
+		}
+	}
+
+	render(width: number): string[] {
+		if (this.children.length === 0) return [];
+
+		const border = this.#borderFn("┃");
+		const leftPad = padding(this.#paddingLeft);
+		// Border char takes 1 visible column + paddingLeft
+		const contentWidth = Math.max(1, width - 1 - this.#paddingLeft);
+
+		const childLines: string[] = [];
+		for (const child of this.children) {
+			childLines.push(...child.render(contentWidth));
+		}
+
+		if (childLines.length === 0) return [];
+
+		const result: string[] = [];
+
+		// Top padding
+		for (let i = 0; i < this.#paddingY; i++) {
+			result.push(this.#applyBg(border, width));
+		}
+
+		// Content
+		for (const line of childLines) {
+			result.push(this.#applyBg(`${border}${leftPad}${line}`, width));
+		}
+
+		// Bottom padding
+		for (let i = 0; i < this.#paddingY; i++) {
+			result.push(this.#applyBg(border, width));
+		}
+
+		return result;
+	}
+
+	#applyBg(line: string, width: number): string {
+		if (!this.#bgFn) return line;
+		return applyBackgroundToLine(line, width, this.#bgFn);
+	}
+}

package/src/components/markdown.ts

@@ -463,11 +463,15 @@ export class Markdown implements Component {
 					// For mailto: links, strip the prefix before comparing (autolinked emails have
 					// text="foo@bar.com" but href="mailto:foo@bar.com")
 					const hrefForComparison = token.href.startsWith("mailto:") ? token.href.slice(7) : token.href;
+					const osc8Open = TERMINAL.hyperlinks ? `\x1b]8;;${token.href}\x07` : "";
+					const osc8Close = TERMINAL.hyperlinks ? "\x1b]8;;\x07" : "";
 					if (token.text === token.href || token.text === hrefForComparison) {
-						result += this.#theme.link(this.#theme.underline(linkText)) + stylePrefix;
+						result += osc8Open + this.#theme.link(this.#theme.underline(linkText)) + osc8Close + stylePrefix;
 					} else {
 						result +=
+							osc8Open +
 							this.#theme.link(this.#theme.underline(linkText)) +
+							osc8Close +
 							this.#theme.linkUrl(` (${token.href})`) +
 							stylePrefix;
 					}

package/src/components/tab-bar.ts

@@ -10,7 +10,7 @@
  */
 import { matchesKey } from "../keys";
 import type { Component } from "../tui";
-import { wrapTextWithAnsi } from "../utils";
+import { truncateToWidth, visibleWidth } from "../utils";
 
 /** Tab definition */
 export interface Tab {
@@ -112,31 +112,64 @@ export class TabBar implements Component {
 
 	/** Render the tab bar, wrapping to multiple lines if needed */
 	render(width: number): string[] {
-		const parts: string[] = [];
+		const maxWidth = Math.max(1, width);
+		const chunks: string[] = [];
 
 		// Label prefix
-		parts.push(this.#theme.label(`${this.#label}:`));
-		parts.push("  ");
+		chunks.push(this.#theme.label(`${this.#label}:`));
+		chunks.push("  ");
 
 		// Tab buttons
 		for (let i = 0; i < this.#tabs.length; i++) {
 			const tab = this.#tabs[i];
 			if (i === this.#activeIndex) {
-				parts.push(this.#theme.activeTab(` ${tab.label} `));
+				chunks.push(this.#theme.activeTab(` ${tab.label} `));
 			} else {
-				parts.push(this.#theme.inactiveTab(` ${tab.label} `));
+				chunks.push(this.#theme.inactiveTab(` ${tab.label} `));
 			}
 			if (i < this.#tabs.length - 1) {
-				parts.push("  ");
+				chunks.push("  ");
 			}
 		}
 
 		// Navigation hint
-		parts.push("  ");
-		parts.push(this.#theme.hint("(tab to cycle)"));
+		chunks.push("  ");
+		chunks.push(this.#theme.hint("(tab to cycle)"));
 
-		const line = parts.join("");
-		const maxWidth = Math.max(1, width);
-		return wrapTextWithAnsi(line, maxWidth);
+		const lines: string[] = [];
+		let currentLine = "";
+		let currentWidth = 0;
+
+		for (const chunk of chunks) {
+			const chunkWidth = visibleWidth(chunk);
+			if (chunkWidth <= 0) {
+				continue;
+			}
+
+			if (chunkWidth > maxWidth) {
+				if (currentLine) {
+					lines.push(currentLine);
+					currentLine = "";
+					currentWidth = 0;
+				}
+				lines.push(truncateToWidth(chunk, maxWidth));
+				continue;
+			}
+
+			if (currentWidth > 0 && currentWidth + chunkWidth > maxWidth) {
+				lines.push(currentLine);
+				currentLine = "";
+				currentWidth = 0;
+			}
+
+			currentLine += chunk;
+			currentWidth += chunkWidth;
+		}
+
+		if (currentLine) {
+			lines.push(currentLine);
+		}
+
+		return lines.length > 0 ? lines : [""];
 	}
 }

package/src/index.ts

@@ -15,6 +15,7 @@ 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 { LeftBorderBox } from "./components/left-border-box";
 export { Loader } from "./components/loader";
 export { type DefaultTextStyle, Markdown, type MarkdownTheme } from "./components/markdown";
 export { type SelectItem, SelectList, type SelectListTheme } from "./components/select-list";

package/src/tui.ts

@@ -186,6 +186,7 @@ export class Container implements Component {
 	}
 
 	render(width: number): string[] {
+		width = Math.max(1, width);
 		const lines: string[] = [];
 		for (const child of this.children) {
 			lines.push(...child.render(width));