@nghyane/arcane-tui 0.1.10 → 0.1.12

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.10",
+	"version": "0.1.12",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/nghyane/arcane",
 	"author": "Can Bölük",
@@ -36,8 +36,8 @@
 		"test": "bun test test/*.test.ts"
 	},
 	"dependencies": {
-		"@nghyane/arcane-natives": "^0.1.7",
-		"@nghyane/arcane-utils": "^0.1.6",
+		"@nghyane/arcane-natives": "^0.1.8",
+		"@nghyane/arcane-utils": "^0.1.7",
 		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.6.2",
 		"marked": "^17.0.2",

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/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";