@oh-my-pi/pi-tui 9.6.0 → 9.6.3

package/README.md

@@ -542,16 +542,16 @@ interface Terminal {
 ## Utilities
 
 ```typescript
-import { visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui";
+import { Ellipsis, visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@oh-my-pi/pi-tui";
 
 // Get visible width of string (ignoring ANSI codes, uses Bun.stringWidth)
 const width = visibleWidth("\x1b[31mHello\x1b[0m"); // 5
 
 // Truncate string to width (preserving ANSI codes, adds ellipsis)
-const truncated = truncateToWidth("Hello World", 8); // "Hello..."
+const truncated = truncateToWidth("Hello World", 8); // "Hello…" (default: Ellipsis.Unicode)
 
 // Truncate without ellipsis
-const truncatedNoEllipsis = truncateToWidth("Hello World", 8, ""); // "Hello Wo"
+const truncatedNoEllipsis = truncateToWidth("Hello World", 8, Ellipsis.Omit); // "Hello Wo"
 
 // Wrap text to width (Bun.wrapAnsi word wrap, trims line ends, preserves ANSI)
 const lines = wrapTextWithAnsi("This is a long line that needs wrapping", 20);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oh-my-pi/pi-tui",
-	"version": "9.6.0",
+	"version": "9.6.3",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"type": "module",
 	"main": "./src/index.ts",
@@ -47,7 +47,7 @@
 		"bun": ">=1.3.7"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "9.6.0",
+		"@oh-my-pi/pi-natives": "9.6.3",
 		"@types/mime-types": "^3.0.1",
 		"chalk": "^5.6.2",
 		"marked": "^17.0.1",

package/src/components/editor.ts

@@ -516,7 +516,7 @@ export class Editor implements Component, Focusable {
 				result.push(topLeft + content + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);
 			} else {
 				// Status too long - truncate it
-				const truncated = truncateToWidth(content, topFillWidth - 1, this.borderColor(this.theme.symbols.ellipsis));
+				const truncated = truncateToWidth(content, topFillWidth - 1);
 				const truncatedWidth = visibleWidth(truncated);
 				const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
 				result.push(topLeft + truncated + this.borderColor(box.horizontal.repeat(fillWidth)) + topRight);

package/src/components/select-list.ts

@@ -1,7 +1,7 @@
 import { matchesKey } from "../keys";
 import type { SymbolTheme } from "../symbols";
 import type { Component } from "../tui";
-import { padding, truncateToWidth, visibleWidth } from "../utils";
+import { Ellipsis, padding, truncateToWidth, visibleWidth } from "../utils";
 
 export interface SelectItem {
 	value: string;
@@ -83,7 +83,7 @@ export class SelectList implements Component {
 				if (item.description && width > 40) {
 					// Calculate how much space we have for value + description
 					const maxValueWidth = Math.min(30, width - prefixWidth - 4);
-					const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+					const truncatedValue = truncateToWidth(displayValue, maxValueWidth, Ellipsis.Omit);
 					const spacing = padding(Math.max(1, 32 - truncatedValue.length));
 
 					// Calculate remaining space for description using visible widths
@@ -91,18 +91,18 @@ export class SelectList implements Component {
 					const remainingWidth = width - descriptionStart - 2; // -2 for safety
 
 					if (remainingWidth > 10) {
-						const truncatedDesc = truncateToWidth(item.description, remainingWidth, "");
+						const truncatedDesc = truncateToWidth(item.description, remainingWidth, Ellipsis.Omit);
 						// Apply selectedText to entire line content
 						line = this.theme.selectedText(`${prefix}${truncatedValue}${spacing}${truncatedDesc}`);
 					} else {
 						// Not enough space for description
 						const maxWidth = width - prefixWidth - 2;
-						line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, "")}`);
+						line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, Ellipsis.Omit)}`);
 					}
 				} else {
 					// No description or not enough width
 					const maxWidth = width - prefixWidth - 2;
-					line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, "")}`);
+					line = this.theme.selectedText(`${prefix}${truncateToWidth(displayValue, maxWidth, Ellipsis.Omit)}`);
 				}
 			} else {
 				const displayValue = item.label || item.value;
@@ -111,7 +111,7 @@ export class SelectList implements Component {
 				if (item.description && width > 40) {
 					// Calculate how much space we have for value + description
 					const maxValueWidth = Math.min(30, width - prefix.length - 4);
-					const truncatedValue = truncateToWidth(displayValue, maxValueWidth, "");
+					const truncatedValue = truncateToWidth(displayValue, maxValueWidth, Ellipsis.Omit);
 					const spacing = padding(Math.max(1, 32 - truncatedValue.length));
 
 					// Calculate remaining space for description
@@ -119,18 +119,18 @@ export class SelectList implements Component {
 					const remainingWidth = width - descriptionStart - 2; // -2 for safety
 
 					if (remainingWidth > 10) {
-						const truncatedDesc = truncateToWidth(item.description, remainingWidth, "");
+						const truncatedDesc = truncateToWidth(item.description, remainingWidth, Ellipsis.Omit);
 						const descText = this.theme.description(spacing + truncatedDesc);
 						line = prefix + truncatedValue + descText;
 					} else {
 						// Not enough space for description
 						const maxWidth = width - prefix.length - 2;
-						line = prefix + truncateToWidth(displayValue, maxWidth, "");
+						line = prefix + truncateToWidth(displayValue, maxWidth, Ellipsis.Omit);
 					}
 				} else {
 					// No description or not enough width
 					const maxWidth = width - prefix.length - 2;
-					line = prefix + truncateToWidth(displayValue, maxWidth, "");
+					line = prefix + truncateToWidth(displayValue, maxWidth, Ellipsis.Omit);
 				}
 			}
 
@@ -141,7 +141,7 @@ export class SelectList implements Component {
 		if (startIndex > 0 || endIndex < this.filteredItems.length) {
 			const scrollText = `  (${this.selectedIndex + 1}/${this.filteredItems.length})`;
 			// Truncate if too long for terminal
-			lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, "")));
+			lines.push(this.theme.scrollInfo(truncateToWidth(scrollText, width - 2, Ellipsis.Omit)));
 		}
 
 		return lines;

package/src/components/settings-list.ts

@@ -1,6 +1,6 @@
 import { matchesKey } from "../keys";
 import type { Component } from "../tui";
-import { padding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
+import { Ellipsis, padding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../utils";
 
 export interface SettingItem {
 	/** Unique identifier for this setting */
@@ -108,7 +108,10 @@ export class SettingsList implements Component {
 			const usedWidth = prefixWidth + maxLabelWidth + visibleWidth(separator);
 			const valueMaxWidth = width - usedWidth - 2;
 
-			const valueText = this.theme.value(truncateToWidth(item.currentValue, valueMaxWidth, ""), isSelected);
+			const valueText = this.theme.value(
+				truncateToWidth(item.currentValue, valueMaxWidth, Ellipsis.Omit),
+				isSelected,
+			);
 
 			lines.push(prefix + labelText + separator + valueText);
 		}
@@ -116,7 +119,7 @@ export class SettingsList implements Component {
 		// Add scroll indicator if needed
 		if (startIndex > 0 || endIndex < this.items.length) {
 			const scrollText = `  (${this.selectedIndex + 1}/${this.items.length})`;
-			lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, "")));
+			lines.push(this.theme.hint(truncateToWidth(scrollText, width - 2, Ellipsis.Omit)));
 		}
 
 		// Add description for selected item

package/src/index.ts

@@ -85,4 +85,4 @@ export {
 } from "./terminal-image";
 export { type Component, Container, type OverlayHandle, type SizeValue, TUI } from "./tui";
 // Utilities
-export { padding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "./utils";
+export { Ellipsis, padding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "./utils";

package/src/keys.ts

@@ -18,6 +18,8 @@
  * - isKittyProtocolActive() - Query global Kitty protocol state
  */
 
+import { matchesKittySequence } from "@oh-my-pi/pi-natives";
+
 // =============================================================================
 // Global Kitty Protocol State
 // =============================================================================
@@ -620,26 +622,6 @@ export function parseKittySequence(data: string): ParsedKittySequence | null {
 	return null;
 }
 
-function matchesKittySequence(data: string, expectedCodepoint: number, expectedModifier: number): boolean {
-	const parsed = parseKittySequence(data);
-	if (!parsed) return false;
-	const actualMod = parsed.modifier & ~LOCK_MASK;
-	const expectedMod = expectedModifier & ~LOCK_MASK;
-
-	// Check if modifiers match
-	if (actualMod !== expectedMod) return false;
-
-	// Primary match: codepoint matches directly
-	if (parsed.codepoint === expectedCodepoint) return true;
-
-	// Alternate match: use base layout key for non-Latin keyboard layouts
-	// This allows Ctrl+С (Cyrillic) to match Ctrl+c (Latin) when terminal reports
-	// the base layout key (the key in standard PC-101 layout)
-	if (parsed.baseLayoutKey !== undefined && parsed.baseLayoutKey === expectedCodepoint) return true;
-
-	return false;
-}
-
 /**
  * Match xterm modifyOtherKeys format: CSI 27 ; modifiers ; keycode ~
  * This is used by terminals when Kitty protocol is not enabled.
@@ -666,23 +648,26 @@ function rawCtrlChar(letter: string): string {
 
 type ParsedKeyId = { key: string; ctrl: boolean; shift: boolean; alt: boolean };
 
-const PARSED_KEY_ID_CACHE = new Map<string, ParsedKeyId>();
+const PARSED_KEY_ID_CACHE = new Map<string, ParsedKeyId | null>();
 
-function parseKeyId(keyId: string): ParsedKeyId | null {
+function parseKeyIdSlow(keyId: string): ParsedKeyId | null {
 	const normalizedKeyId = keyId.toLowerCase();
-	const cached = PARSED_KEY_ID_CACHE.get(normalizedKeyId);
-	if (cached) return cached;
-
 	const parts = normalizedKeyId.split("+");
 	const key = parts[parts.length - 1];
 	if (!key) return null;
-	const parsed = {
+	return {
 		key,
 		ctrl: parts.includes("ctrl"),
 		shift: parts.includes("shift"),
 		alt: parts.includes("alt"),
 	};
-	PARSED_KEY_ID_CACHE.set(normalizedKeyId, parsed);
+}
+
+function parseKeyId(keyId: string): ParsedKeyId | null {
+	const cached = PARSED_KEY_ID_CACHE.get(keyId);
+	if (cached !== undefined) return cached;
+	const parsed = parseKeyIdSlow(keyId);
+	PARSED_KEY_ID_CACHE.set(keyId, parsed);
 	return parsed;
 }
 

package/src/symbols.ts

@@ -15,7 +15,6 @@ export interface BoxSymbols {
 export interface SymbolTheme {
 	cursor: string;
 	inputCursor: string;
-	ellipsis: string;
 	boxRound: Omit<BoxSymbols, "teeDown" | "teeUp" | "teeLeft" | "teeRight" | "cross">;
 	boxSharp: BoxSymbols;
 	table: BoxSymbols;

package/src/utils.ts

@@ -1,9 +1,6 @@
-import {
-	extractSegments as nativeExtractSegments,
-	sliceWithWidth as nativeSliceWithWidth,
-	truncateToWidth as nativeTruncateToWidth,
-	visibleWidth as nativeVisibleWidth,
-} from "@oh-my-pi/pi-natives";
+import { sliceWithWidth } from "@oh-my-pi/pi-natives";
+
+export { Ellipsis, extractSegments, sliceWithWidth, truncateToWidth } from "@oh-my-pi/pi-natives";
 
 // Pre-allocated space buffer for padding
 const SPACE_BUFFER = " ".repeat(512);
@@ -28,56 +25,53 @@ export function getSegmenter(): Intl.Segmenter {
 }
 
 // Cache for non-ASCII strings
-const WIDTH_CACHE_SIZE = 512;
-const widthCache = new Map<string, number>();
-const NATIVE_WIDTH_THRESHOLD = 256;
+//const WIDTH_CACHE_SIZE = 512;
+//const widthCache = new Map<string, number>();
 
 /**
  * Calculate the visible width of a string in terminal columns.
  */
-export function visibleWidth(str: string): number {
+export function visibleWidthRaw(str: string): number {
 	if (str.length === 0) {
 		return 0;
 	}
 
 	// Fast path: pure ASCII printable
 	let isPureAscii = true;
+	let tabLength = 0;
 	for (let i = 0; i < str.length; i++) {
 		const code = str.charCodeAt(i);
-		if (code < 0x20 || code > 0x7e) {
+		if (code === 9) {
+			tabLength += 3;
+		} else if (code < 0x20 || code > 0x7e) {
 			isPureAscii = false;
-			break;
 		}
 	}
 	if (isPureAscii) {
-		return str.length;
+		return str.length + tabLength;
 	}
+	return Bun.stringWidth(str) + tabLength;
+}
 
+/**
+ * Calculate the visible width of a string in terminal columns.
+ */
+export function visibleWidth(str: string): number {
+	if (str.length === 0) {
+		return 0;
+	}
+	return visibleWidthRaw(str);
+
+	// === Disabled cache ===
+
+	/*
 	// Check cache
 	const cached = widthCache.get(str);
 	if (cached !== undefined) {
 		return cached;
 	}
 
-	let width: number;
-	if (str.length <= NATIVE_WIDTH_THRESHOLD) {
-		// Normalize: tabs to 3 spaces, strip ANSI escape codes
-		let clean = str;
-		if (str.includes("\t")) {
-			clean = clean.replace(/\t/g, "   ");
-		}
-		if (clean.includes("\x1b")) {
-			// Strip SGR codes (\x1b[...m) and cursor codes (\x1b[...G/K/H/J)
-			clean = clean.replace(/\x1b\[[0-9;]*[mGKHJ]/g, "");
-			// Strip OSC 8 hyperlinks: \x1b]8;;URL\x07 and \x1b]8;;\x07
-			clean = clean.replace(/\x1b\]8;;[^\x07]*\x07/g, "");
-		}
-		width = Bun.stringWidth(clean);
-	} else {
-		width = nativeVisibleWidth(str);
-	}
-
-	// Cache result
+	const width = visibleWidthRaw(str);
 	if (widthCache.size >= WIDTH_CACHE_SIZE) {
 		const firstKey = widthCache.keys().next().value;
 		if (firstKey !== undefined) {
@@ -87,39 +81,7 @@ export function visibleWidth(str: string): number {
 	widthCache.set(str, width);
 
 	return width;
-}
-
-/**
- * Extract ANSI escape sequences from a string at the given position.
- */
-export function extractAnsiCode(str: string, pos: number): { code: string; length: number } | null {
-	if (pos >= str.length || str[pos] !== "\x1b") return null;
-
-	const next = str[pos + 1];
-
-	// CSI sequence: ESC [ ... m/G/K/H/J
-	if (next === "[") {
-		let j = pos + 2;
-		while (j < str.length && !/[mGKHJ]/.test(str[j]!)) j++;
-		if (j < str.length) return { code: str.substring(pos, j + 1), length: j + 1 - pos };
-		return null;
-	}
-
-	// OSC sequence: ESC ] ... BEL or ESC ] ... ST (ESC \)
-	// Used for hyperlinks (OSC 8), window titles, etc.
-	if (next === "]") {
-		let j = pos + 2;
-		while (j < str.length) {
-			if (str[j] === "\x07") return { code: str.substring(pos, j + 1), length: j + 1 - pos };
-			if (str[j] === "\x1b" && str[j + 1] === "\\") {
-				return { code: str.substring(pos, j + 2), length: j + 2 - pos };
-			}
-			j++;
-		}
-		return null;
-	}
-
-	return null;
+	*/
 }
 
 const WRAP_OPTIONS = { wordWrap: true, hard: true, trim: false } as const;
@@ -173,21 +135,6 @@ export function applyBackgroundToLine(line: string, width: number, bgFn: (text:
 	return bgFn(withPadding);
 }
 
-/**
- * Truncate text to fit within a maximum visible width, adding ellipsis if needed.
- * Optionally pad with spaces to reach exactly maxWidth.
- * Properly handles ANSI escape codes (they don't count toward width).
- *
- * @param text - Text to truncate (may contain ANSI codes)
- * @param maxWidth - Maximum visible width
- * @param ellipsis - Ellipsis string to append when truncating (default: "…")
- * @param pad - If true, pad result with spaces to exactly maxWidth (default: false)
- * @returns Truncated text, optionally padded to exactly maxWidth
- */
-export function truncateToWidth(text: string, maxWidth: number, ellipsis: string = "…", pad: boolean = false): string {
-	return nativeTruncateToWidth(text, maxWidth, ellipsis, pad);
-}
-
 /**
  * Extract a range of visible columns from a line. Handles ANSI codes and wide chars.
  * @param strict - If true, exclude wide chars at boundary that would extend past the range
@@ -195,29 +142,3 @@ export function truncateToWidth(text: string, maxWidth: number, ellipsis: string
 export function sliceByColumn(line: string, startCol: number, length: number, strict = false): string {
 	return sliceWithWidth(line, startCol, length, strict).text;
 }
-
-/** Like sliceByColumn but also returns the actual visible width of the result. */
-export function sliceWithWidth(
-	line: string,
-	startCol: number,
-	length: number,
-	strict = false,
-): { text: string; width: number } {
-	if (length <= 0) return { text: "", width: 0 };
-	return nativeSliceWithWidth(line, startCol, length, strict);
-}
-
-/**
- * Extract "before" and "after" segments from a line in a single pass.
- * Used for overlay compositing where we need content before and after the overlay region.
- * Preserves styling from before the overlay that should affect content after it.
- */
-export function extractSegments(
-	line: string,
-	beforeEnd: number,
-	afterStart: number,
-	afterLen: number,
-	strictAfter = false,
-): { before: string; beforeWidth: number; after: string; afterWidth: number } {
-	return nativeExtractSegments(line, beforeEnd, afterStart, afterLen, strictAfter);
-}