@dex-ai/vue-tui 0.1.10

package/src/input.ts

@@ -0,0 +1,603 @@
+// ---------------------------------------------------------------------------
+// Raw terminal input — escape sequence parsing + stdin management
+// ---------------------------------------------------------------------------
+
+export interface KeyEvent {
+	/** Named key: "up", "down", "left", "right", "enter", "backspace", "delete",
+	 *  "home", "end", "tab", "escape", or "char" for printable characters. */
+	name: string;
+	/** The printable character (only set when name === "char"). */
+	char?: string | undefined;
+	/** Shift modifier was held. */
+	shift?: boolean | undefined;
+	/** Alt/Meta modifier was held. */
+	alt?: boolean | undefined;
+	/** Ctrl modifier was held. */
+	ctrl?: boolean | undefined;
+	/** The raw escape sequence / byte string. */
+	raw: string;
+}
+
+export type KeyHandler = (key: KeyEvent) => void;
+
+export interface RawInputHandle {
+	/** Teardown: restore stdin raw mode, remove data listener. */
+	destroy(): void;
+}
+
+/**
+ * Parse a raw stdin data chunk into a KeyEvent.
+ */
+export function parseKey(str: string): KeyEvent {
+	// Ctrl key combos (0x01 - 0x1a)
+	if (str.length === 1 && str.charCodeAt(0) >= 1 && str.charCodeAt(0) <= 26) {
+		const code = str.charCodeAt(0);
+		switch (code) {
+			case 0x01:
+				return { name: "home", ctrl: true, raw: str };
+			case 0x03:
+				return { name: "c", ctrl: true, raw: str };
+			case 0x04:
+				return { name: "delete", ctrl: true, raw: str };
+			case 0x05:
+				return { name: "end", ctrl: true, raw: str };
+			case 0x09:
+				return { name: "tab", raw: str };
+			case 0x0d:
+				return { name: "enter", raw: str };
+			default: {
+				const ch = String.fromCharCode(code + 96); // 0x01='a', 0x02='b', etc.
+				return { name: ch, ctrl: true, raw: str };
+			}
+		}
+	}
+
+	// Enter (newline)
+	if (str === "\r" || str === "\n") {
+		return { name: "enter", raw: str };
+	}
+
+	// Backspace
+	if (str === "\x7f" || str === "\b") {
+		return { name: "backspace", raw: str };
+	}
+
+	// Alt+Enter
+	if (str === "\x1b\r" || str === "\x1b\n") {
+		return { name: "enter", alt: true, raw: str };
+	}
+
+	// Escape alone
+	if (str === "\x1b") {
+		return { name: "escape", raw: str };
+	}
+
+	// CSI sequences: \x1b[...
+	if (str.startsWith("\x1b[")) {
+		// Kitty keyboard protocol: \x1b[<keycode>;<modifier>u or \x1b[<keycode>u
+		const kittyMatch = str.match(/^\x1b\[(\d+)(?:;(\d+))?u$/);
+		if (kittyMatch) {
+			const keycode = parseInt(kittyMatch[1]!, 10);
+			const modifier = kittyMatch[2] ? parseInt(kittyMatch[2], 10) : 1;
+			const shift = (modifier - 1) & 1 ? true : undefined;
+			const alt = (modifier - 1) & 2 ? true : undefined;
+			const ctrl = (modifier - 1) & 4 ? true : undefined;
+
+			// Map keycodes to named keys
+			switch (keycode) {
+				case 13:
+					return { name: "enter", shift, alt, ctrl, raw: str };
+				case 27:
+					return { name: "escape", shift, alt, ctrl, raw: str };
+				case 9:
+					return { name: "tab", shift, alt, ctrl, raw: str };
+				case 127:
+					return { name: "backspace", shift, alt, ctrl, raw: str };
+				default:
+					// Printable ASCII range — treat as character
+					if (keycode >= 32 && keycode <= 126) {
+						const ch = String.fromCharCode(keycode);
+						const name = ctrl ? ch : "char";
+						return {
+							name,
+							char: ctrl ? undefined : ch,
+							shift,
+							alt,
+							ctrl,
+							raw: str,
+						};
+					}
+					return { name: "unknown", shift, alt, ctrl, raw: str };
+			}
+		}
+
+		switch (str) {
+			case "\x1b[A":
+				return { name: "up", raw: str };
+			case "\x1b[B":
+				return { name: "down", raw: str };
+			case "\x1b[C":
+				return { name: "right", raw: str };
+			case "\x1b[D":
+				return { name: "left", raw: str };
+			case "\x1b[H":
+				return { name: "home", raw: str };
+			case "\x1b[F":
+				return { name: "end", raw: str };
+			case "\x1b[Z":
+				return { name: "tab", shift: true, raw: str };
+			case "\x1b[3~":
+				return { name: "delete", raw: str };
+			case "\x1b[2~":
+				return { name: "insert", raw: str };
+			case "\x1b[5~":
+				return { name: "pageup", raw: str };
+			case "\x1b[6~":
+				return { name: "pagedown", raw: str };
+
+			// Ctrl+Arrow (non-kitty protocol) — \x1b[1;5* sequences
+			case "\x1b[1;5A":
+				return { name: "up", ctrl: true, raw: str };
+			case "\x1b[1;5B":
+				return { name: "down", ctrl: true, raw: str };
+			case "\x1b[1;5C":
+				return { name: "right", ctrl: true, raw: str };
+			case "\x1b[1;5D":
+				return { name: "left", ctrl: true, raw: str };
+
+			default:
+				// Unknown CSI sequence
+				return { name: "unknown", raw: str };
+		}
+	}
+
+	// Alt + printable char: \x1b followed by a char
+	if (str.length === 2 && str[0] === "\x1b") {
+		return { name: "char", char: str[1], alt: true, raw: str };
+	}
+
+	// Other escape sequences we don't handle
+	if (str.startsWith("\x1b")) {
+		return { name: "unknown", raw: str };
+	}
+
+	// Printable character(s)
+	return { name: "char", char: str, raw: str };
+}
+
+// ---------------------------------------------------------------------------
+// Bracketed paste mode constants
+// ---------------------------------------------------------------------------
+
+const PASTE_START = "\x1b[200~";
+const PASTE_END = "\x1b[201~";
+
+/** Minimum length for a multi-line paste to trigger paste event (vs direct insert). */
+const PASTE_THRESHOLD = 40;
+
+/**
+ * Detect whether raw stdin data is a bracketed paste and extract the content,
+ * or detect a multi-line paste heuristic (contains \n and >= threshold chars).
+ * Returns the paste content if detected, or null if it's a normal key.
+ */
+export function detectPaste(str: string): string | null {
+	// Bracketed paste mode: \x1b[200~...content...\x1b[201~
+	if (str.startsWith(PASTE_START)) {
+		const endIdx = str.indexOf(PASTE_END);
+		if (endIdx !== -1) {
+			return str.slice(PASTE_START.length, endIdx);
+		}
+		// No end marker — treat everything after start as paste content
+		return str.slice(PASTE_START.length);
+	}
+
+	// Heuristic fallback: multi-line text >= threshold
+	if (str.includes("\n") && str.length >= PASTE_THRESHOLD) {
+		return str;
+	}
+
+	return null;
+}
+
+// ---------------------------------------------------------------------------
+// System clipboard reading
+// ---------------------------------------------------------------------------
+
+import { spawnSync } from "node:child_process";
+
+/** Clipboard content — either text or binary image data. */
+export type ClipboardContent =
+	| { type: "text"; text: string }
+	| { type: "image"; data: Uint8Array; mediaType: string };
+
+/**
+ * Query available MIME types on the clipboard.
+ * Returns an array of type strings, or empty array on failure.
+ */
+function getClipboardTypes(): string[] {
+	const platform = process.platform;
+	try {
+		if (platform === "linux" && process.env.WAYLAND_DISPLAY) {
+			const result = spawnSync("wl-paste", ["--list-types"], {
+				encoding: "utf-8",
+				timeout: 2000,
+				stdio: ["pipe", "pipe", "pipe"],
+			});
+			if (result.status === 0 && result.stdout) {
+				return result.stdout.trim().split("\n").filter(Boolean);
+			}
+		} else if (platform === "linux") {
+			const result = spawnSync(
+				"xclip",
+				["-selection", "clipboard", "-t", "TARGETS", "-o"],
+				{
+					encoding: "utf-8",
+					timeout: 2000,
+					stdio: ["pipe", "pipe", "pipe"],
+				},
+			);
+			if (result.status === 0 && result.stdout) {
+				return result.stdout.trim().split("\n").filter(Boolean);
+			}
+		} else if (platform === "darwin") {
+			// macOS: use osascript to check clipboard info
+			const result = spawnSync("osascript", ["-e", "clipboard info"], {
+				encoding: "utf-8",
+				timeout: 2000,
+				stdio: ["pipe", "pipe", "pipe"],
+			});
+			if (result.status === 0 && result.stdout) {
+				// Returns lines like "«class PNGf», 12345"
+				const types: string[] = [];
+				for (const line of result.stdout.split(",")) {
+					if (line.includes("PNGf") || line.includes("png"))
+						types.push("image/png");
+					if (line.includes("TIFF") || line.includes("tiff"))
+						types.push("image/tiff");
+					if (line.includes("JPEG") || line.includes("jpeg"))
+						types.push("image/jpeg");
+					if (
+						line.includes("utf-8") ||
+						line.includes("ut16") ||
+						line.includes("TEXT")
+					)
+						types.push("text/plain");
+				}
+				return types;
+			}
+		}
+	} catch {
+		// ignore
+	}
+	return [];
+}
+
+/** Known image MIME types we support. */
+const IMAGE_TYPES = [
+	"image/png",
+	"image/jpeg",
+	"image/gif",
+	"image/webp",
+	"image/tiff",
+];
+
+/**
+ * Read image data from the clipboard as raw bytes.
+ * Automatically downscales large images (>4MB or >1920px) for API compatibility.
+ * Returns the data + mediaType, or null if not available.
+ */
+function readClipboardImage(): { data: Uint8Array; mediaType: string } | null {
+	const platform = process.platform;
+	// Pick the best image type available
+	const types = getClipboardTypes();
+	const imageType = types.find((t) => IMAGE_TYPES.includes(t));
+	if (!imageType) return null;
+
+	let raw: { data: Uint8Array; mediaType: string } | null = null;
+
+	try {
+		if (platform === "linux" && process.env.WAYLAND_DISPLAY) {
+			const result = spawnSync(
+				"wl-paste",
+				["--no-newline", "--type", imageType],
+				{
+					timeout: 5000,
+					stdio: ["pipe", "pipe", "pipe"],
+					maxBuffer: 50 * 1024 * 1024, // 50MB
+				},
+			);
+			if (result.status === 0 && result.stdout && result.stdout.length > 0) {
+				raw = { data: new Uint8Array(result.stdout), mediaType: imageType };
+			}
+		} else if (platform === "linux") {
+			const result = spawnSync(
+				"xclip",
+				["-selection", "clipboard", "-t", imageType, "-o"],
+				{
+					timeout: 5000,
+					stdio: ["pipe", "pipe", "pipe"],
+					maxBuffer: 50 * 1024 * 1024,
+				},
+			);
+			if (result.status === 0 && result.stdout && result.stdout.length > 0) {
+				raw = { data: new Uint8Array(result.stdout), mediaType: imageType };
+			}
+		} else if (platform === "darwin") {
+			// macOS: use osascript to write clipboard image to temp file, then read it
+			const tmpPath = `/tmp/dex-clipboard-${Date.now()}.png`;
+			const script = `
+        set theFile to POSIX file "${tmpPath}"
+        try
+          set imgData to the clipboard as «class PNGf»
+          set fp to open for access theFile with write permission
+          write imgData to fp
+          close access fp
+        on error
+          return "error"
+        end try
+        return "ok"
+      `;
+			const result = spawnSync("osascript", ["-e", script], {
+				encoding: "utf-8",
+				timeout: 5000,
+				stdio: ["pipe", "pipe", "pipe"],
+			});
+			if (result.status === 0 && result.stdout?.trim() === "ok") {
+				const { readFileSync, unlinkSync } = require("node:fs");
+				try {
+					const data = readFileSync(tmpPath);
+					unlinkSync(tmpPath);
+					raw = { data: new Uint8Array(data), mediaType: "image/png" };
+				} catch {
+					return null;
+				}
+			}
+		}
+	} catch {
+		// ignore
+	}
+
+	if (!raw) return null;
+
+	// Downscale large images to keep within provider content-length limits
+	return downscaleImage(raw.data, raw.mediaType);
+}
+
+/** Max image dimension (width or height) — images larger than 1920px get downscaled. */
+const MAX_IMAGE_DIMENSION = 1920;
+/** Max image byte size before we attempt to compress/downscale (4MB). */
+const MAX_IMAGE_BYTES = 4 * 1024 * 1024;
+
+/**
+ * Attempt to downscale/compress image data to fit within provider limits.
+ * Uses ImageMagick's `convert` (or macOS `sips`) to resize images that are
+ * larger than 1920px on their longest side, and re-compress to reduce byte size.
+ * Returns the original data if no resizing tools are available.
+ */
+function downscaleImage(
+	data: Uint8Array,
+	mediaType: string,
+): { data: Uint8Array; mediaType: string } {
+	// If already small enough, skip
+	if (data.length <= MAX_IMAGE_BYTES) return { data, mediaType };
+
+	const platform = process.platform;
+	try {
+		if (platform === "darwin") {
+			// macOS: use sips to resize. Write to temp, resize, read back
+			const { writeFileSync, readFileSync, unlinkSync } = require("node:fs");
+			const tmpIn = `/tmp/dex-resize-in-${Date.now()}.png`;
+			const tmpOut = `/tmp/dex-resize-out-${Date.now()}.jpg`;
+			writeFileSync(tmpIn, data);
+			// sips can resize by longest side and output JPEG for compression
+			spawnSync(
+				"sips",
+				[
+					"--resampleHeightWidthMax",
+					String(MAX_IMAGE_DIMENSION),
+					"--setProperty",
+					"format",
+					"jpeg",
+					"--setProperty",
+					"formatOptions",
+					"80",
+					tmpIn,
+					"--out",
+					tmpOut,
+				],
+				{ timeout: 10000, stdio: "pipe" },
+			);
+			try {
+				const resized = readFileSync(tmpOut);
+				unlinkSync(tmpIn);
+				unlinkSync(tmpOut);
+				return { data: new Uint8Array(resized), mediaType: "image/jpeg" };
+			} catch {
+				try {
+					unlinkSync(tmpIn);
+				} catch {}
+				try {
+					unlinkSync(tmpOut);
+				} catch {}
+			}
+		} else {
+			// Linux/other: use ImageMagick convert via stdin/stdout
+			const result = spawnSync(
+				"convert",
+				[
+					"-", // read from stdin
+					"-resize",
+					`${MAX_IMAGE_DIMENSION}x${MAX_IMAGE_DIMENSION}>`, // only shrink
+					"-quality",
+					"80",
+					"jpeg:-", // output JPEG to stdout
+				],
+				{
+					input: Buffer.from(data),
+					timeout: 10000,
+					maxBuffer: 50 * 1024 * 1024,
+					stdio: ["pipe", "pipe", "pipe"],
+				},
+			);
+			if (result.status === 0 && result.stdout && result.stdout.length > 0) {
+				return { data: new Uint8Array(result.stdout), mediaType: "image/jpeg" };
+			}
+		}
+	} catch {
+		// Resizing unavailable — return original
+	}
+	return { data, mediaType };
+}
+
+/**
+ * Read text from the system clipboard using platform-native commands.
+ * Returns the text content or null if reading fails.
+ */
+function readClipboardText(): string | null {
+	const platform = process.platform;
+	let cmd: string;
+	let args: string[];
+
+	if (platform === "darwin") {
+		cmd = "pbpaste";
+		args = [];
+	} else if (platform === "linux") {
+		if (process.env.WAYLAND_DISPLAY) {
+			cmd = "wl-paste";
+			args = ["--no-newline"];
+		} else {
+			cmd = "xclip";
+			args = ["-selection", "clipboard", "-o"];
+		}
+	} else if (platform === "win32") {
+		cmd = "powershell.exe";
+		args = ["-NoProfile", "-Command", "Get-Clipboard"];
+	} else {
+		return null;
+	}
+
+	try {
+		const result = spawnSync(cmd, args, {
+			encoding: "utf-8",
+			timeout: 2000,
+			stdio: ["pipe", "pipe", "pipe"],
+		});
+		if (result.status === 0 && result.stdout) {
+			return result.stdout;
+		}
+		if (platform === "linux" && !process.env.WAYLAND_DISPLAY) {
+			const fallback = spawnSync("xsel", ["--clipboard", "--output"], {
+				encoding: "utf-8",
+				timeout: 2000,
+				stdio: ["pipe", "pipe", "pipe"],
+			});
+			if (fallback.status === 0 && fallback.stdout) {
+				return fallback.stdout;
+			}
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Read from the system clipboard. Detects whether content is an image or text.
+ * Prefers image if available (since text is usually also offered as a target
+ * even for image data — e.g. file path). Returns null if clipboard is empty.
+ */
+export function readClipboard(): ClipboardContent | null {
+	const types = getClipboardTypes();
+	const hasImage = types.some((t) => IMAGE_TYPES.includes(t));
+	const hasText = types.some(
+		(t) =>
+			t.startsWith("text/") ||
+			t === "UTF8_STRING" ||
+			t === "STRING" ||
+			t === "TEXT",
+	);
+
+	// Prefer image if only image is present or if image types exist without plain text indicators
+	// But if both text and image exist, check if text is just a file path (short) → prefer image
+	if (hasImage) {
+		const img = readClipboardImage();
+		if (img) return { type: "image", ...img };
+	}
+
+	if (hasText) {
+		const text = readClipboardText();
+		if (text) return { type: "text", text };
+	}
+
+	// Fallback: try text read without type detection
+	const text = readClipboardText();
+	if (text) return { type: "text", text };
+
+	return null;
+}
+
+/**
+ * Set up raw stdin input and call `handler` for each parsed key event.
+ *
+ * @param handler Called for each key press
+ * @param stdin   Optional stdin stream (defaults to process.stdin)
+ */
+export function createRawInput(
+	handler: KeyHandler,
+	stdin?: NodeJS.ReadStream,
+): RawInputHandle {
+	const stream = stdin ?? process.stdin;
+
+	if (stream.isTTY) {
+		stream.setRawMode(true);
+	}
+	stream.resume();
+
+	const onData = (data: Buffer): void => {
+		const str = data.toString();
+
+		// Check for bracketed paste / heuristic paste before normal key parsing
+		const pasteContent = detectPaste(str);
+		if (pasteContent !== null) {
+			handler({ name: "paste", char: pasteContent, raw: str });
+			return;
+		}
+
+		const key = parseKey(str);
+
+		// Ctrl+V — read from system clipboard and emit as paste event
+		if (key.name === "v" && key.ctrl) {
+			const clipboard = readClipboard();
+			if (clipboard) {
+				if (clipboard.type === "text") {
+					handler({ name: "paste", char: clipboard.text, raw: str });
+				} else {
+					// Image paste — encode in char as JSON for transport through KeyEvent
+					handler({
+						name: "paste-image",
+						char: JSON.stringify({
+							data: Buffer.from(clipboard.data).toString("base64"),
+							mediaType: clipboard.mediaType,
+						}),
+						raw: str,
+					});
+				}
+			}
+			return;
+		}
+
+		handler(key);
+	};
+
+	stream.on("data", onData);
+
+	return {
+		destroy(): void {
+			stream.removeListener("data", onData);
+			if (stream.isTTY) {
+				stream.setRawMode(false);
+			}
+			stream.pause();
+		},
+	};
+}