@gajae-code/tui 0.11.10 → 0.11.11

package/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## [0.11.10] - 2026-07-25
+## [0.11.11] - 2026-07-26
 
 ## [0.11.7] - 2026-07-22
 ### Fixed

package/dist/types/components/select-list.d.ts

@@ -45,6 +45,7 @@ export declare class SelectList implements Component {
     constructor(items: ReadonlyArray<SelectItem>, maxVisible: number, theme: SelectListTheme, layout?: SelectListLayoutOptions);
     setFilter(filter: string): void;
     setSelectedIndex(index: number): void;
+    handleNavigation(action: "tui.select.up" | "tui.select.down" | "tui.select.pageUp" | "tui.select.pageDown"): void;
     invalidate(): void;
     render(width: number): string[];
     handleInput(keyData: string): void;

package/dist/types/tui.d.ts

@@ -9,7 +9,7 @@ type InputListener = (data: string) => InputListenerResult;
  * Component interface - all components must implement this
  */
 export type MouseEvent = {
-    kind: "wheel" | "click";
+    kind: "wheel" | "click" | "drag" | "release";
     direction?: -1 | 1;
     button?: 0;
     /** Terminal cell coordinates, one-based. */
@@ -27,7 +27,7 @@ type OverlayMouseBounds = {
     termWidth: number;
     termHeight: number;
 };
-/** Parse xterm SGR mouse reports. Drag and button-release reports are ignored. */
+/** Parse xterm SGR mouse reports for wheel, left-click, drag, and release events. */
 export declare function parseSgrMouseEvent(data: string): MouseEvent | undefined;
 export interface Component {
     /**
@@ -230,6 +230,7 @@ export declare class TUI extends Container {
     }[];
     constructor(terminal: Terminal, showHardwareCursor?: boolean, options?: {
         enableMouse?: boolean;
+        copySelection?: (text: string) => void | Promise<void>;
     });
     dispose(): void;
     get fullRedraws(): number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@gajae-code/tui",
-	"version": "0.11.10",
+	"version": "0.11.11",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://gajae-code.com",
 	"author": "Yeachan-Heo and Gajae Code Contributors",
@@ -36,8 +36,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@gajae-code/natives": "0.11.10",
-		"@gajae-code/utils": "0.11.10",
+		"@gajae-code/natives": "0.11.11",
+		"@gajae-code/utils": "0.11.11",
 		"lru-cache": "11.3.6",
 		"marked": "18.0.6"
 	},

package/src/components/select-list.ts

@@ -92,6 +92,22 @@ export class SelectList implements Component {
 			this.#findEnabledIndex(clamped, 1, false) ?? this.#findEnabledIndex(clamped, -1, false) ?? -1;
 		this.#syncViewportToIndex(this.#selectedIndex >= 0 ? this.#selectedIndex : clamped);
 	}
+	handleNavigation(action: "tui.select.up" | "tui.select.down" | "tui.select.pageUp" | "tui.select.pageDown"): void {
+		switch (action) {
+			case "tui.select.up":
+				this.#moveSelection(-1);
+				break;
+			case "tui.select.down":
+				this.#moveSelection(1);
+				break;
+			case "tui.select.pageUp":
+				this.#movePage(-1);
+				break;
+			case "tui.select.pageDown":
+				this.#movePage(1);
+				break;
+		}
+	}
 
 	invalidate(): void {
 		// No cached state to invalidate currently

package/src/terminal.ts

@@ -3,7 +3,6 @@ import * as fs from "node:fs";
 import { $env, $flag, $pickenv } from "@gajae-code/utils";
 import { setKittyProtocolActive } from "./keys";
 import { StdinBuffer } from "./stdin-buffer";
-import { isUnderTerminalMultiplexer } from "./terminal-capabilities";
 
 const TERMINAL_PROGRESS_KEEPALIVE_MS = 1000;
 const TERMINAL_PROGRESS_ACTIVE_SEQUENCE = "\x1b]9;4;3\x07";
@@ -52,6 +51,7 @@ export function emergencyTerminalRestore(): void {
 			process.stdout.write(
 				"\x1b[?2004l" + // Disable bracketed paste
 					"\x1b[?1000l" + // Disable normal mouse reporting
+					"\x1b[?1002l" + // Disable button-event mouse reporting
 					"\x1b[?1006l" + // Disable SGR extended mouse reporting
 					"\x1b[?2031l" + // Disable Mode 2031 appearance notifications
 					"\x1b[<u" + // Pop kitty keyboard protocol
@@ -244,8 +244,11 @@ export class ProcessTerminal implements Terminal {
 	}
 
 	setMouseEnabled(enabled: boolean): void {
-		this.#mouseEnabled = enabled && !isUnderTerminalMultiplexer(Bun.env);
-		if (this.#started) this.#safeWrite(this.#mouseEnabled ? "\x1b[?1000h\x1b[?1006h" : "\x1b[?1000l\x1b[?1006l");
+		this.#mouseEnabled = enabled;
+		if (this.#started)
+			this.#safeWrite(
+				this.#mouseEnabled ? "\x1b[?1000l\x1b[?1002h\x1b[?1006h" : "\x1b[?1000l\x1b[?1002l\x1b[?1006l",
+			);
 	}
 
 	start(onInput: (data: string) => void, onResize: () => void): void {
@@ -271,8 +274,9 @@ export class ProcessTerminal implements Terminal {
 
 		// Enable bracketed paste mode - terminal will wrap pastes in \x1b[200~ ... \x1b[201~
 		this.#safeWrite("\x1b[?2004h");
-		// SGR mouse reporting is opt-in and never enabled inside tmux or screen.
-		if (this.#mouseEnabled) this.#safeWrite("\x1b[?1000h\x1b[?1006h");
+		// Button-event reporting preserves wheel input while also letting the TUI implement drag selection.
+		// Clear both tracking variants first so stale modes from another application cannot leak across startup.
+		this.#safeWrite(this.#mouseEnabled ? "\x1b[?1000l\x1b[?1002h\x1b[?1006h" : "\x1b[?1000l\x1b[?1002l\x1b[?1006l");
 
 		// Set up resize handler immediately
 		process.stdout.on("resize", this.#resizeHandler);
@@ -708,6 +712,7 @@ export class ProcessTerminal implements Terminal {
 		this.#mouseEnabled = false;
 		this.#safeWrite("\x1b[?2004l");
 		this.#safeWrite("\x1b[?1000l");
+		this.#safeWrite("\x1b[?1002l");
 		this.#safeWrite("\x1b[?1006l");
 
 		// Disable Mode 2031 appearance change notifications

package/src/tui.ts

@@ -38,6 +38,15 @@ const SEGMENT_RESET = "\x1b[0m";
  * diffing so `#previousLines` mirrors what was actually written.
  */
 const LINE_TERMINATOR = "\x1b[0m\x1b]8;;\x07";
+const MOUSE_SELECTION_SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+function stripTerminalControls(text: string): string {
+	return Bun.stripANSI(text)
+		.replace(/\x1b\][\s\S]*?(?:\x07|\x1b\\)/gu, "")
+		.replace(/\x1b[P_^X][\s\S]*?\x1b\\/gu, "")
+		.replace(/\x1b(?:\[[0-?]*[ -/]*[@-~]|[@-_])/gu, "")
+		.replace(/[\u0000-\u0008\u000b-\u001f\u007f]/gu, "");
+}
 
 type InputListenerResult = { consume?: boolean; data?: string } | undefined;
 type InputListener = (data: string) => InputListenerResult;
@@ -46,7 +55,7 @@ type InputListener = (data: string) => InputListenerResult;
  * Component interface - all components must implement this
  */
 export type MouseEvent = {
-	kind: "wheel" | "click";
+	kind: "wheel" | "click" | "drag" | "release";
 	direction?: -1 | 1;
 	button?: 0;
 	/** Terminal cell coordinates, one-based. */
@@ -66,7 +75,12 @@ type OverlayMouseBounds = {
 	termHeight: number;
 };
 
-/** Parse xterm SGR mouse reports. Drag and button-release reports are ignored. */
+type MouseSelectionPoint = {
+	line: number;
+	column: number;
+};
+
+/** Parse xterm SGR mouse reports for wheel, left-click, drag, and release events. */
 export function parseSgrMouseEvent(data: string): MouseEvent | undefined {
 	const match = data.match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/);
 	if (!match) return undefined;
@@ -76,11 +90,17 @@ export function parseSgrMouseEvent(data: string): MouseEvent | undefined {
 	const terminator = match[4];
 	if (![button, x, y].every(Number.isSafeInteger) || x < 1 || y < 1) return undefined;
 
-	if (button & 32 || terminator === "m") return undefined;
-	if (button === 64) return { kind: "wheel", direction: -1, x, y };
-	if (button === 65) return { kind: "wheel", direction: 1, x, y };
-	if (button === 0) return { kind: "click", button, x, y };
-	return undefined;
+	const baseButton = button & 3;
+	if (button & 64) {
+		if (terminator !== "M") return undefined;
+		if (baseButton === 0) return { kind: "wheel", direction: -1, x, y };
+		if (baseButton === 1) return { kind: "wheel", direction: 1, x, y };
+		return undefined;
+	}
+	if (baseButton !== 0) return undefined;
+	if (terminator === "m") return { kind: "release", button: 0, x, y };
+	if (button & 32) return { kind: "drag", button: 0, x, y };
+	return { kind: "click", button: 0, x, y };
 }
 
 export interface Component {
@@ -671,6 +691,9 @@ export class TUI extends Container {
 	#terminalUnavailable = false;
 	#bottomPinnedComponent: Component | null = null;
 	#pendingTerminalCleanup: Array<{ payload: string; onDelivered?: () => void }> = [];
+	#mouseSelectionStart: MouseSelectionPoint | null = null;
+	#mouseSelectionEnd: MouseSelectionPoint | null = null;
+	#mouseSelectionDragged = false;
 
 	#unsubscribeTabWidthChange?: () => void;
 	static #renderCounters: TuiRenderCounterSnapshot = {
@@ -720,7 +743,10 @@ export class TUI extends Container {
 	constructor(
 		terminal: Terminal,
 		showHardwareCursor?: boolean,
-		private readonly options: { enableMouse?: boolean } = {},
+		private readonly options: {
+			enableMouse?: boolean;
+			copySelection?: (text: string) => void | Promise<void>;
+		} = {},
 	) {
 		super();
 		this.terminal = terminal;
@@ -1491,8 +1517,11 @@ export class TUI extends Container {
 		if (mouse) {
 			// Coordinates outside the current terminal cannot name a visible cell.
 			if (mouse.x > this.terminal.columns || mouse.y > this.terminal.rows) return;
-			if (mouse.kind === "wheel") this.scrollViewportPages(mouse.direction!);
-			else {
+			if (mouse.kind === "wheel") {
+				this.#clearMouseSelection();
+				this.scrollViewportPages(mouse.direction!);
+			} else if (mouse.kind === "click") {
+				this.#beginMouseSelection(mouse);
 				const focusedOverlay = this.overlayStack.find(o => o.component === this.#focusedComponent);
 				if (focusedOverlay) {
 					if (!this.#isOverlayVisible(focusedOverlay)) {
@@ -1518,6 +1547,10 @@ export class TUI extends Container {
 						localY: mouse.y - bounds.row,
 					});
 				} else this.#focusedComponent?.handleMouse?.(mouse);
+			} else if (mouse.kind === "drag") {
+				this.#updateMouseSelection(mouse);
+			} else {
+				this.#finishMouseSelection(mouse);
 			}
 			this.requestRender(false, "mouse");
 			return;
@@ -1562,6 +1595,124 @@ export class TUI extends Container {
 		}
 	}
 
+	#mouseSelectionPoint(mouse: MouseEvent): MouseSelectionPoint {
+		return {
+			line: this.#viewportTopRow + mouse.y - 1,
+			column: mouse.x - 1,
+		};
+	}
+
+	#beginMouseSelection(mouse: MouseEvent): void {
+		if (!this.options.copySelection) return;
+		const point = this.#mouseSelectionPoint(mouse);
+		this.#mouseSelectionStart = point;
+		this.#mouseSelectionEnd = point;
+		this.#mouseSelectionDragged = false;
+	}
+
+	#updateMouseSelection(mouse: MouseEvent): void {
+		if (this.#mouseSelectionStart === null) return;
+		this.#mouseSelectionEnd = this.#mouseSelectionPoint(mouse);
+		this.#mouseSelectionDragged = true;
+	}
+
+	#finishMouseSelection(mouse: MouseEvent): void {
+		if (this.#mouseSelectionStart === null) return;
+		this.#mouseSelectionEnd = this.#mouseSelectionPoint(mouse);
+		if (!this.#mouseSelectionDragged || !this.options.copySelection) {
+			this.#clearMouseSelection();
+			return;
+		}
+		const text = this.#extractMouseSelection();
+		if (!text) {
+			this.#clearMouseSelection();
+			return;
+		}
+		try {
+			const result = this.options.copySelection(text);
+			if (result) void result.catch(() => {});
+		} catch {
+			// Clipboard failures are reported by the host callback and must not break terminal input.
+		}
+	}
+
+	#clearMouseSelection(): void {
+		this.#mouseSelectionStart = null;
+		this.#mouseSelectionEnd = null;
+		this.#mouseSelectionDragged = false;
+	}
+
+	#orderedMouseSelection(): { start: MouseSelectionPoint; end: MouseSelectionPoint } | null {
+		const start = this.#mouseSelectionStart;
+		const end = this.#mouseSelectionEnd;
+		if (start === null || end === null) return null;
+		if (start.line < end.line || (start.line === end.line && start.column <= end.column)) return { start, end };
+		return { start: end, end: start };
+	}
+
+	#mouseSelectionColumns(line: number, text: string): { start: number; end: number } | null {
+		const selection = this.#orderedMouseSelection();
+		if (selection === null || line < selection.start.line || line > selection.end.line) return null;
+		const lineWidth = visibleWidth(text);
+		let start = line === selection.start.line ? selection.start.column : 0;
+		let end = line === selection.end.line ? selection.end.column + 1 : lineWidth;
+		start = Math.max(0, Math.min(lineWidth, start));
+		end = Math.max(0, Math.min(lineWidth, end));
+
+		let column = 0;
+		for (const part of MOUSE_SELECTION_SEGMENTER.segment(text)) {
+			const next = column + Math.max(1, visibleWidth(part.segment));
+			if (column < start && start < next) start = column;
+			if (column < end && end < next) end = next;
+			column = next;
+		}
+		return { start, end };
+	}
+
+	#extractMouseSelection(): string {
+		const selection = this.#orderedMouseSelection();
+		if (selection === null) return "";
+		const selected: string[] = [];
+		for (let lineIndex = selection.start.line; lineIndex <= selection.end.line; lineIndex++) {
+			const line = this.#previousLines[lineIndex];
+			if (line === undefined || TERMINAL.isImageLine(line)) {
+				selected.push("");
+				continue;
+			}
+			const plain = stripTerminalControls(line);
+			const columns = this.#mouseSelectionColumns(lineIndex, plain);
+			if (columns === null || columns.end <= columns.start) {
+				selected.push("");
+				continue;
+			}
+			selected.push(sliceByColumn(plain, columns.start, columns.end - columns.start, false));
+		}
+		return selected.join("\n");
+	}
+
+	#applyMouseSelection(lines: string[]): string[] {
+		if (!this.#mouseSelectionDragged) return lines;
+		const selection = this.#orderedMouseSelection();
+		if (selection === null) return lines;
+		const highlighted = lines;
+		for (let lineIndex = selection.start.line; lineIndex <= selection.end.line; lineIndex++) {
+			const line = highlighted[lineIndex];
+			if (line === undefined || TERMINAL.isImageLine(line)) continue;
+			const plain = stripTerminalControls(line);
+			const width = visibleWidth(plain);
+			const columns = this.#mouseSelectionColumns(lineIndex, plain);
+			if (columns === null || columns.end <= columns.start) continue;
+			const before = sliceByColumn(line, 0, columns.start, false);
+			const selected = sliceByColumn(line, columns.start, columns.end - columns.start, false).replace(
+				/\x1b\[[0-9;]*m/gu,
+				control => `${control}\x1b[7m`,
+			);
+			const after = sliceByColumn(line, columns.end, Math.max(0, width - columns.end), false);
+			highlighted[lineIndex] = `${before}\x1b[7m${selected}\x1b[27m${after}`;
+		}
+		return highlighted;
+	}
+
 	#consumeCellSizeResponse(data: string): boolean {
 		// Response format: ESC [ 6 ; height ; width t
 		const match = data.match(/^\x1b\[6;(\d+);(\d+)t$/);
@@ -2180,6 +2331,8 @@ export class TUI extends Container {
 		const cursorPos = this.#extractCursorPosition(newLines, height);
 		this.#lastCursorPosition = cursorPos;
 
+		newLines = this.#applyMouseSelection(newLines);
+
 		// Terminate every non-image line so #previousLines mirrors emitted bytes
 		// (closes SGR + OSC 8 hyperlink state). Must run after cursor extraction
 		// because the marker is embedded mid-line, and before any diff/full render