@oh-my-pi/pi-tui 13.2.0 → 13.3.0

package/README.md

@@ -94,7 +94,7 @@ Container that applies padding and background color to all children.
 const box = new Box(
 	1, // paddingX (default: 1)
 	1, // paddingY (default: 1)
-	(text) => chalk.bgGray(text) // optional background function
+	(text) => chalk.bgGray(text), // optional background function
 );
 box.addChild(new Text("Content"));
 box.setBgFn((text) => chalk.bgBlue(text)); // Change background dynamically
@@ -109,7 +109,7 @@ const text = new Text(
 	"Hello World", // text content
 	1, // paddingX (default: 1)
 	1, // paddingY (default: 1)
-	(text) => chalk.bgGray(text) // optional background function
+	(text) => chalk.bgGray(text), // optional background function
 );
 text.setText("Updated text");
 text.setCustomBgFn((text) => chalk.bgBlue(text));
@@ -123,7 +123,7 @@ Single-line text that truncates to fit viewport width. Useful for status lines a
 const truncated = new TruncatedText(
 	"This is a very long line that will be truncated...",
 	0, // paddingX (default: 0)
-	0 // paddingY (default: 0)
+	0, // paddingY (default: 0)
 );
 ```
 
@@ -269,7 +269,7 @@ const md = new Markdown(
 	1, // paddingY
 	theme, // MarkdownTheme
 	defaultStyle, // optional DefaultTextStyle
-	2 // optional code block indent (spaces)
+	2, // optional code block indent (spaces)
 );
 md.setText("Updated markdown");
 ```
@@ -291,7 +291,7 @@ const loader = new Loader(
 	tui, // TUI instance for render updates
 	(s) => chalk.cyan(s), // spinner color function
 	(s) => chalk.gray(s), // message color function
-	"Loading..." // message (default: "Loading...")
+	"Loading...", // message (default: "Loading...")
 );
 loader.start();
 loader.setMessage("Still loading...");
@@ -307,7 +307,7 @@ const loader = new CancellableLoader(
 	tui, // TUI instance for render updates
 	(s) => chalk.cyan(s), // spinner color function
 	(s) => chalk.gray(s), // message color function
-	"Working..." // message
+	"Working...", // message
 );
 loader.onAbort = () => done(null); // Called when user presses Escape
 doAsyncWork(loader.signal).then(done);
@@ -345,7 +345,7 @@ const list = new SelectList(
 		{ value: "opt2", label: "Option 2", description: "Second option" },
 	],
 	5, // maxVisible
-	theme // SelectListTheme
+	theme, // SelectListTheme
 );
 
 list.onSelect = (item) => console.log("Selected:", item);
@@ -390,7 +390,7 @@ const settings = new SettingsList(
 	10, // maxVisible
 	theme, // SettingsListTheme
 	(id, newValue) => console.log(`${id} changed to ${newValue}`),
-	() => console.log("Cancelled")
+	() => console.log("Cancelled"),
 );
 settings.updateValue("theme", "light");
 ```
@@ -428,7 +428,7 @@ const image = new Image(
 	base64Data, // base64-encoded image data
 	"image/png", // MIME type
 	theme, // ImageTheme
-	options // optional ImageOptions
+	options, // optional ImageOptions
 );
 tui.addChild(image);
 ```
@@ -443,7 +443,7 @@ Supports both slash commands and file paths.
 
 ```typescript
 import { CombinedAutocompleteProvider } from "@oh-my-pi/pi-tui";
-import { getProjectDir } from "@oh-my-pi/pi-utils/dirs";
+import { getProjectDir } from "@oh-my-pi/pi-utils";
 
 const provider = new CombinedAutocompleteProvider(
 	[
@@ -451,7 +451,7 @@ const provider = new CombinedAutocompleteProvider(
 		{ name: "clear", description: "Clear screen" },
 		{ name: "delete", description: "Delete last message" },
 	],
-	getProjectDir() // base path for file completion
+	getProjectDir(), // base path for file completion
 );
 
 editor.setAutocompleteProvider(provider);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "13.2.0",
+	"version": "13.3.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Boluk",
@@ -33,8 +33,8 @@
 		"test": "bun test test/*.test.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "13.2.0",
-		"@oh-my-pi/pi-utils": "13.2.0",
+		"@oh-my-pi/pi-natives": "13.3.0",
+		"@oh-my-pi/pi-utils": "13.3.0",
 		"@types/mime-types": "^3.0",
 		"chalk": "^5.6",
 		"marked": "^17.0",

package/src/autocomplete.ts

@@ -2,7 +2,7 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { fuzzyFind } from "@oh-my-pi/pi-natives";
-import { getProjectDir } from "@oh-my-pi/pi-utils/dirs";
+import { getProjectDir } from "@oh-my-pi/pi-utils";
 
 const PATH_DELIMITERS = new Set([" ", "\t", '"', "'", "="]);
 

package/src/components/editor.ts

@@ -1,4 +1,4 @@
-import { getProjectDir } from "@oh-my-pi/pi-utils/dirs";
+import { getProjectDir } from "@oh-my-pi/pi-utils";
 import type { AutocompleteProvider, CombinedAutocompleteProvider } from "../autocomplete";
 import { BracketedPasteHandler } from "../bracketed-paste";
 import { type EditorKeybindingsManager, getEditorKeybindings } from "../keybindings";

package/src/components/image.ts

@@ -56,7 +56,10 @@ export class Image implements Component {
 		let lines: string[];
 
 		if (TERMINAL.imageProtocol) {
-			const result = renderImage(this.#base64Data, this.#dimensions, { maxWidthCells: maxWidth });
+			const result = renderImage(this.#base64Data, this.#dimensions, {
+				maxWidthCells: maxWidth,
+				maxHeightCells: this.#options.maxHeightCells,
+			});
 
 			if (result) {
 				// Return `rows` lines so TUI accounts for image height

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/terminal-capabilities.ts

@@ -214,6 +214,35 @@ export function calculateImageRows(
 	return Math.max(1, rows);
 }
 
+function calculateImageFit(
+	imageDimensions: ImageDimensions,
+	options: ImageRenderOptions,
+	cellDims: CellDimensions,
+): { columns: number; rows: number } {
+	const maxColumns = options.maxWidthCells !== undefined ? Math.max(1, Math.floor(options.maxWidthCells)) : undefined;
+	const maxRows = options.maxHeightCells !== undefined ? Math.max(1, Math.floor(options.maxHeightCells)) : undefined;
+
+	if (maxColumns === undefined && maxRows === undefined) {
+		const columns = Math.max(1, Math.ceil(imageDimensions.widthPx / cellDims.widthPx));
+		const rows = Math.max(1, Math.ceil(imageDimensions.heightPx / cellDims.heightPx));
+		return { columns, rows };
+	}
+
+	const maxWidthPx = maxColumns !== undefined ? maxColumns * cellDims.widthPx : Number.POSITIVE_INFINITY;
+	const maxHeightPx = maxRows !== undefined ? maxRows * cellDims.heightPx : Number.POSITIVE_INFINITY;
+	const scale = Math.min(maxWidthPx / imageDimensions.widthPx, maxHeightPx / imageDimensions.heightPx);
+	const fittedWidthPx = imageDimensions.widthPx * scale;
+	const fittedHeightPx = imageDimensions.heightPx * scale;
+
+	const columns = Math.max(1, Math.floor(fittedWidthPx / cellDims.widthPx));
+	const rows = Math.max(1, Math.ceil(fittedHeightPx / cellDims.heightPx));
+
+	return {
+		columns: maxColumns !== undefined ? Math.min(columns, maxColumns) : columns,
+		rows: maxRows !== undefined ? Math.min(rows, maxRows) : rows,
+	};
+}
+
 export function getPngDimensions(base64Data: string): ImageDimensions | null {
 	try {
 		const buffer = Buffer.from(base64Data, "base64");
@@ -364,21 +393,23 @@ export function renderImage(
 		return null;
 	}
 
-	const maxWidth = options.maxWidthCells ?? 80;
-	const rows = calculateImageRows(imageDimensions, maxWidth, getCellDimensions());
+	const fit = calculateImageFit(imageDimensions, options, getCellDimensions());
 
 	if (TERMINAL.imageProtocol === ImageProtocol.Kitty) {
-		const sequence = encodeKitty(base64Data, { columns: maxWidth, rows });
-		return { sequence, rows };
+		const sequence = encodeKitty(base64Data, {
+			columns: fit.columns,
+			rows: fit.rows,
+		});
+		return { sequence, rows: fit.rows };
 	}
 
 	if (TERMINAL.imageProtocol === ImageProtocol.Iterm2) {
 		const sequence = encodeITerm2(base64Data, {
-			width: maxWidth,
+			width: fit.columns,
 			height: "auto",
 			preserveAspectRatio: options.preserveAspectRatio ?? true,
 		});
-		return { sequence, rows };
+		return { sequence, rows: fit.rows };
 	}
 
 	return null;

package/src/tui.ts

@@ -3,7 +3,7 @@
  */
 import * as fs from "node:fs";
 import * as path from "node:path";
-import { getCrashLogPath, getDebugLogPath } from "@oh-my-pi/pi-utils/dirs";
+import { getCrashLogPath, getDebugLogPath } from "@oh-my-pi/pi-utils";
 import { isKeyRelease, matchesKey } from "./keys";
 import type { Terminal } from "./terminal";
 import { setCellDimensions, TERMINAL } from "./terminal-capabilities";
@@ -188,6 +188,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));