@dex-ai/vue-tui 0.1.10

package/src/text-buffer.ts

@@ -0,0 +1,609 @@
+import type { KeyEvent } from "./input";
+import { ref, computed, type Ref, type ComputedRef } from "@vue/runtime-core";
+
+// ---------------------------------------------------------------------------
+// TextBuffer — multi-line text editing state machine
+// ---------------------------------------------------------------------------
+
+/** Standard action names the text buffer understands. */
+export type BufferAction =
+	| "insert"
+	| "backspace"
+	| "delete"
+	| "newline"
+	| "clear"
+	| "moveLeft"
+	| "moveRight"
+	| "moveUp"
+	| "moveDown"
+	| "moveHome"
+	| "moveEnd";
+
+/**
+ * Result of a key/action being processed by the text buffer.
+ *
+ * - `"handled"`   — key was consumed; cursor moved or buffer mutated.
+ * - `"boundary"`  — key would have navigated past the start/end of the
+ *                   buffer (e.g. Up at row 0, Down at last row).
+ *                   Consumers (e.g. history navigation) can use this signal
+ *                   to take over.
+ * - `"unhandled"` — key was not recognized by the buffer.
+ */
+export type BufferKeyResult = "handled" | "boundary" | "unhandled";
+
+/**
+ * Convenience helper: treat `"handled"` or `"boundary"` as "key was consumed".
+ */
+export function isKeyHandled(result: BufferKeyResult): boolean {
+	return result !== "unhandled";
+}
+
+// ---------------------------------------------------------------------------
+// Paste buffer — unified storage for pasted text and images
+// ---------------------------------------------------------------------------
+
+/** A paste entry: either multi-line text or binary image data. */
+export type PasteEntry =
+	| { type: "text"; content: string; lineCount: number }
+	| { type: "image"; data: Uint8Array; mediaType: string };
+
+/** A slot in the paste buffer — tracks an individual paste with display index. */
+export interface PasteSlot {
+	/** Unique ID used in sentinel markers. */
+	id: number;
+	/** Sequential display index (1-based, per-type). Text pastes: "Pasted N lines", images: "Image #N". */
+	index: number;
+	/** The paste payload. */
+	entry: PasteEntry;
+}
+
+/** @deprecated Backwards-compatible alias — use PasteSlot instead. */
+export type PasteToken = PasteSlot;
+
+/** @deprecated Backwards-compatible alias — use PasteSlot instead. */
+export type ImageToken = PasteSlot;
+
+// ---------------------------------------------------------------------------
+// Sentinel system — inline markers in buffer text
+// ---------------------------------------------------------------------------
+
+/** Unified sentinel pattern: \x00SLOT:id\x00 */
+const SENTINEL_RE = /\x00SLOT:(\d+)\x00/g;
+
+/** Create a sentinel string for a slot ID. */
+function slotSentinel(id: number): string {
+	return `\x00SLOT:${id}\x00`;
+}
+
+/** Info about a sentinel found at a position. */
+interface SentinelInfo {
+	start: number;
+	end: number;
+	id: number;
+}
+
+/** Check if a character at a position in a string is inside any sentinel. */
+function findSentinelAt(line: string, col: number): SentinelInfo | null {
+	SENTINEL_RE.lastIndex = 0;
+	let match: RegExpExecArray | null;
+	while ((match = SENTINEL_RE.exec(line)) !== null) {
+		const start = match.index;
+		const end = start + match[0].length;
+		if (col >= start && col < end) {
+			return { start, end, id: parseInt(match[1]!, 10) };
+		}
+	}
+	return null;
+}
+
+/** Find the sentinel immediately before a cursor position. */
+function findSentinelBefore(line: string, col: number): SentinelInfo | null {
+	SENTINEL_RE.lastIndex = 0;
+	let match: RegExpExecArray | null;
+	while ((match = SENTINEL_RE.exec(line)) !== null) {
+		const start = match.index;
+		const end = start + match[0].length;
+		if (end === col) {
+			return { start, end, id: parseInt(match[1]!, 10) };
+		}
+	}
+	return null;
+}
+
+/** Find the sentinel immediately after a cursor position. */
+function findSentinelAfter(line: string, col: number): SentinelInfo | null {
+	SENTINEL_RE.lastIndex = 0;
+	let match: RegExpExecArray | null;
+	while ((match = SENTINEL_RE.exec(line)) !== null) {
+		const start = match.index;
+		const end = start + match[0].length;
+		if (start === col) {
+			return { start, end, id: parseInt(match[1]!, 10) };
+		}
+	}
+	return null;
+}
+
+// ---------------------------------------------------------------------------
+// TextBuffer interface
+// ---------------------------------------------------------------------------
+
+export interface TextBuffer {
+	/** The lines of text in the buffer. */
+	lines: Ref<string[]>;
+	/** Current cursor row (0-indexed). */
+	cursorRow: Ref<number>;
+	/** Current cursor column (0-indexed). */
+	cursorCol: Ref<number>;
+	/** The full buffer value as a single string (lines joined with \n). */
+	value: ComputedRef<string>;
+	/** The resolved text value with paste sentinels expanded (images stripped). */
+	resolvedValue: ComputedRef<string>;
+	/** The paste buffer — ordered list of all paste/image slots. */
+	pasteBuffer: Ref<PasteSlot[]>;
+
+	/** @deprecated Use pasteBuffer instead. Provides a Map view for backward compat. */
+	pasteTokens: Ref<Map<number, PasteSlot>>;
+	/** @deprecated Use pasteBuffer instead. Provides a Map view for backward compat. */
+	imageTokens: Ref<Map<number, PasteSlot>>;
+
+	// Mutations
+	insert(text: string): void;
+	/** Insert a text paste at cursor position. Returns the slot ID. */
+	insertPaste(text: string): number;
+	/** Insert an image paste at cursor position. Returns the slot ID. */
+	insertImage(data: Uint8Array, mediaType: string): number;
+	backspace(): void;
+	delete(): void;
+	newline(): void;
+	clear(): void;
+	/** Set the buffer to the given text, replacing all content. Cursor moves to end. */
+	setValue(text: string): void;
+
+	// Navigation
+	moveLeft(): void;
+	moveRight(): void;
+	moveUp(): void;
+	moveDown(): void;
+	moveHome(): void;
+	moveEnd(): void;
+
+	/**
+	 * Handle a KeyEvent — maps keys to mutations/navigation.
+	 *
+	 * Returns:
+	 * - `"handled"`   if the key was consumed (cursor moved, text inserted, etc.)
+	 * - `"boundary"`  if the key was a navigation that cannot advance further
+	 *                  (Up at row 0, Down at last row). Consumers can use this
+	 *                  to trigger external behavior like history recall.
+	 * - `"unhandled"` if the buffer does not handle this key (caller should).
+	 */
+	handleKey(key: KeyEvent): BufferKeyResult;
+
+	/**
+	 * Handle a named action — directly invoke a buffer operation.
+	 * Returns `"handled"`, `"boundary"`, or `"unhandled"` (same semantics as handleKey).
+	 */
+	handleAction(action: string, key?: KeyEvent): BufferKeyResult;
+}
+
+export interface TextBufferOptions {
+	/** Allow multi-line input. Default: true */
+	multiline?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Implementation
+// ---------------------------------------------------------------------------
+
+export function createTextBuffer(options?: TextBufferOptions): TextBuffer {
+	const multiline = options?.multiline ?? true;
+
+	const lines: Ref<string[]> = ref([""]);
+	const cursorRow: Ref<number> = ref(0);
+	const cursorCol: Ref<number> = ref(0);
+	const pasteBuffer: Ref<PasteSlot[]> = ref([]);
+	let nextSlotId = 1;
+	let nextIndex = 0;
+
+	const value: ComputedRef<string> = computed(() => lines.value.join("\n"));
+
+	/** Resolve paste sentinels → actual text content; image sentinels → empty string. */
+	const resolvedValue: ComputedRef<string> = computed(() => {
+		const raw = lines.value.join("\n");
+		const slots = pasteBuffer.value;
+		if (slots.length === 0) return raw;
+		const slotMap = new Map(slots.map((s) => [s.id, s]));
+		return raw.replace(SENTINEL_RE, (_, idStr: string) => {
+			const id = parseInt(idStr, 10);
+			const slot = slotMap.get(id);
+			if (!slot) return "";
+			if (slot.entry.type === "text") return slot.entry.content;
+			// Images are stripped from text — they become separate content blocks on submit
+			return "";
+		});
+	});
+
+	// Backwards-compatible Map views
+	const pasteTokens: Ref<Map<number, PasteSlot>> = computed(() => {
+		const map = new Map<number, PasteSlot>();
+		for (const slot of pasteBuffer.value) {
+			if (slot.entry.type === "text") map.set(slot.id, slot);
+		}
+		return map;
+	}) as unknown as Ref<Map<number, PasteSlot>>;
+
+	const imageTokens: Ref<Map<number, PasteSlot>> = computed(() => {
+		const map = new Map<number, PasteSlot>();
+		for (const slot of pasteBuffer.value) {
+			if (slot.entry.type === "image") map.set(slot.id, slot);
+		}
+		return map;
+	}) as unknown as Ref<Map<number, PasteSlot>>;
+
+	function currentLine(): string {
+		return lines.value[cursorRow.value] ?? "";
+	}
+
+	function setLine(row: number, content: string): void {
+		const updated = [...lines.value];
+		updated[row] = content;
+		lines.value = updated;
+	}
+
+	/** Remove a slot from the paste buffer. */
+	function removeSlot(id: number): void {
+		pasteBuffer.value = pasteBuffer.value.filter((s) => s.id !== id);
+	}
+
+	// ─── Mutations ──────────────────────────────────────────────
+
+	function insert(text: string): void {
+		// If cursor is inside a sentinel, remove it first
+		const line = currentLine();
+		const sentinel = findSentinelAt(line, cursorCol.value);
+		if (sentinel) {
+			removeSlot(sentinel.id);
+			setLine(
+				cursorRow.value,
+				line.slice(0, sentinel.start) + line.slice(sentinel.end),
+			);
+			cursorCol.value = sentinel.start;
+		}
+		const updatedLine = currentLine();
+		setLine(
+			cursorRow.value,
+			updatedLine.slice(0, cursorCol.value) +
+				text +
+				updatedLine.slice(cursorCol.value),
+		);
+		cursorCol.value += text.length;
+	}
+
+	function insertPaste(text: string): number {
+		const id = nextSlotId++;
+		const lineCount = text.split("\n").length;
+		nextIndex++;
+		const slot: PasteSlot = {
+			id,
+			index: nextIndex,
+			entry: { type: "text", content: text, lineCount },
+		};
+		pasteBuffer.value = [...pasteBuffer.value, slot];
+
+		const sentinel = slotSentinel(id);
+		const line = currentLine();
+		setLine(
+			cursorRow.value,
+			line.slice(0, cursorCol.value) + sentinel + line.slice(cursorCol.value),
+		);
+		cursorCol.value += sentinel.length;
+		return id;
+	}
+
+	function insertImage(data: Uint8Array, mediaType: string): number {
+		const id = nextSlotId++;
+		nextIndex++;
+		const slot: PasteSlot = {
+			id,
+			index: nextIndex,
+			entry: { type: "image", data, mediaType },
+		};
+		pasteBuffer.value = [...pasteBuffer.value, slot];
+
+		const sentinel = slotSentinel(id);
+		const line = currentLine();
+		setLine(
+			cursorRow.value,
+			line.slice(0, cursorCol.value) + sentinel + line.slice(cursorCol.value),
+		);
+		cursorCol.value += sentinel.length;
+		return id;
+	}
+
+	function backspace(): void {
+		if (cursorCol.value > 0) {
+			const line = currentLine();
+			// Check if we're backspacing into a sentinel
+			const sentinel = findSentinelBefore(line, cursorCol.value);
+			if (sentinel) {
+				// Remove entire sentinel + slot
+				removeSlot(sentinel.id);
+				setLine(
+					cursorRow.value,
+					line.slice(0, sentinel.start) + line.slice(sentinel.end),
+				);
+				cursorCol.value = sentinel.start;
+			} else {
+				// Check if cursor is inside a sentinel
+				const inside = findSentinelAt(line, cursorCol.value - 1);
+				if (inside) {
+					removeSlot(inside.id);
+					setLine(
+						cursorRow.value,
+						line.slice(0, inside.start) + line.slice(inside.end),
+					);
+					cursorCol.value = inside.start;
+				} else {
+					setLine(
+						cursorRow.value,
+						line.slice(0, cursorCol.value - 1) + line.slice(cursorCol.value),
+					);
+					cursorCol.value--;
+				}
+			}
+		} else if (cursorRow.value > 0) {
+			// Join with previous line
+			const updated = [...lines.value];
+			const prevLine = updated[cursorRow.value - 1] ?? "";
+			const currLine = updated[cursorRow.value] ?? "";
+			const newCol = prevLine.length;
+			updated[cursorRow.value - 1] = prevLine + currLine;
+			updated.splice(cursorRow.value, 1);
+			lines.value = updated;
+			cursorRow.value--;
+			cursorCol.value = newCol;
+		}
+	}
+
+	function del(): void {
+		const line = currentLine();
+		if (cursorCol.value < line.length) {
+			// Check if we're deleting into a sentinel
+			const sentinel = findSentinelAfter(line, cursorCol.value);
+			if (sentinel) {
+				// Remove entire sentinel + slot
+				removeSlot(sentinel.id);
+				setLine(
+					cursorRow.value,
+					line.slice(0, sentinel.start) + line.slice(sentinel.end),
+				);
+			} else {
+				// Check if cursor is inside a sentinel
+				const inside = findSentinelAt(line, cursorCol.value);
+				if (inside) {
+					removeSlot(inside.id);
+					setLine(
+						cursorRow.value,
+						line.slice(0, inside.start) + line.slice(inside.end),
+					);
+					cursorCol.value = inside.start;
+				} else {
+					setLine(
+						cursorRow.value,
+						line.slice(0, cursorCol.value) + line.slice(cursorCol.value + 1),
+					);
+				}
+			}
+		} else if (cursorRow.value < lines.value.length - 1) {
+			// Join with next line
+			const updated = [...lines.value];
+			const nextLine = updated[cursorRow.value + 1] ?? "";
+			updated[cursorRow.value] = line + nextLine;
+			updated.splice(cursorRow.value + 1, 1);
+			lines.value = updated;
+		}
+	}
+
+	function newline(): void {
+		if (!multiline) return;
+		const line = currentLine();
+		const before = line.slice(0, cursorCol.value);
+		const after = line.slice(cursorCol.value);
+		const updated = [...lines.value];
+		updated[cursorRow.value] = before;
+		updated.splice(cursorRow.value + 1, 0, after);
+		lines.value = updated;
+		cursorRow.value++;
+		cursorCol.value = 0;
+	}
+
+	function clear(): void {
+		lines.value = [""];
+		cursorRow.value = 0;
+		cursorCol.value = 0;
+		pasteBuffer.value = [];
+		nextIndex = 0;
+	}
+
+	function setValue(text: string): void {
+		const newLines = text.split("\n");
+		lines.value = newLines;
+		cursorRow.value = newLines.length - 1;
+		cursorCol.value = (newLines[newLines.length - 1] ?? "").length;
+	}
+
+	// ─── Navigation ─────────────────────────────────────────────
+
+	function moveLeft(): void {
+		if (cursorCol.value > 0) {
+			// Check if stepping left enters a sentinel — skip over the whole thing
+			const line = currentLine();
+			const sentinel = findSentinelAt(line, cursorCol.value - 1);
+			if (sentinel) {
+				cursorCol.value = sentinel.start;
+			} else {
+				cursorCol.value--;
+			}
+		} else if (cursorRow.value > 0) {
+			cursorRow.value--;
+			cursorCol.value = (lines.value[cursorRow.value] ?? "").length;
+		}
+	}
+
+	function moveRight(): void {
+		const lineLen = currentLine().length;
+		if (cursorCol.value < lineLen) {
+			// Check if stepping right enters a sentinel — skip over the whole thing
+			const line = currentLine();
+			const sentinel = findSentinelAfter(line, cursorCol.value);
+			if (sentinel) {
+				cursorCol.value = sentinel.end;
+			} else {
+				cursorCol.value++;
+			}
+		} else if (cursorRow.value < lines.value.length - 1) {
+			cursorRow.value++;
+			cursorCol.value = 0;
+		}
+	}
+
+	function moveUp(): void {
+		if (cursorRow.value > 0) {
+			cursorRow.value--;
+			const lineLen = (lines.value[cursorRow.value] ?? "").length;
+			cursorCol.value = Math.min(cursorCol.value, lineLen);
+		}
+	}
+
+	function moveDown(): void {
+		if (cursorRow.value < lines.value.length - 1) {
+			cursorRow.value++;
+			const lineLen = (lines.value[cursorRow.value] ?? "").length;
+			cursorCol.value = Math.min(cursorCol.value, lineLen);
+		}
+	}
+
+	function moveHome(): void {
+		cursorCol.value = 0;
+	}
+
+	function moveEnd(): void {
+		cursorCol.value = currentLine().length;
+	}
+
+	// ─── Key handler ────────────────────────────────────────────
+
+	function handleKey(key: KeyEvent): BufferKeyResult {
+		switch (key.name) {
+			case "left":
+				moveLeft();
+				return "handled";
+			case "right":
+				moveRight();
+				return "handled";
+			case "up":
+				if (cursorRow.value === 0) return "boundary";
+				moveUp();
+				return "handled";
+			case "down":
+				if (cursorRow.value === lines.value.length - 1) return "boundary";
+				moveDown();
+				return "handled";
+			case "home":
+				moveHome();
+				return "handled";
+			case "end":
+				moveEnd();
+				return "handled";
+			case "backspace":
+				backspace();
+				return "handled";
+			case "delete":
+				del();
+				return "handled";
+			case "enter":
+				return "unhandled"; // let app handle (submit, newline, etc.)
+			case "char":
+				if (key.char) {
+					insert(key.char);
+					return "handled";
+				}
+				return "unhandled";
+			default:
+				return "unhandled";
+		}
+	}
+
+	function handleAction(action: string, key?: KeyEvent): BufferKeyResult {
+		switch (action) {
+			case "insert":
+				if (key?.char) {
+					insert(key.char);
+					return "handled";
+				}
+				return "unhandled";
+			case "backspace":
+				backspace();
+				return "handled";
+			case "delete":
+				del();
+				return "handled";
+			case "newline":
+				newline();
+				return "handled";
+			case "clear":
+				clear();
+				return "handled";
+			case "moveLeft":
+				moveLeft();
+				return "handled";
+			case "moveRight":
+				moveRight();
+				return "handled";
+			case "moveUp":
+				if (cursorRow.value === 0) return "boundary";
+				moveUp();
+				return "handled";
+			case "moveDown":
+				if (cursorRow.value === lines.value.length - 1) return "boundary";
+				moveDown();
+				return "handled";
+			case "moveHome":
+				moveHome();
+				return "handled";
+			case "moveEnd":
+				moveEnd();
+				return "handled";
+			default:
+				return "unhandled";
+		}
+	}
+
+	return {
+		lines,
+		cursorRow,
+		cursorCol,
+		value,
+		resolvedValue,
+		pasteBuffer,
+		pasteTokens,
+		imageTokens,
+		insert,
+		insertPaste,
+		insertImage,
+		backspace,
+		delete: del,
+		newline,
+		clear,
+		setValue,
+		moveLeft,
+		moveRight,
+		moveUp,
+		moveDown,
+		moveHome,
+		moveEnd,
+		handleKey,
+		handleAction,
+	};
+}

package/src/theme.ts

@@ -0,0 +1,44 @@
+import type { Theme } from "./style";
+
+export const defaultTheme: Theme = {
+  colors: {
+    accent: "\x1b[38;5;75m", // soft blue
+    success: "\x1b[38;5;78m", // soft green
+    warn: "\x1b[38;5;214m", // soft orange
+    error: "\x1b[31m", // red
+    muted: "\x1b[38;5;245m", // medium gray
+    subtle: "\x1b[38;5;242m", // dark gray
+    text: "\x1b[37m", // white
+
+    // Background colors
+    "bg-accent": "\x1b[48;5;75m",
+    "bg-success": "\x1b[48;5;78m",
+    "bg-warn": "\x1b[48;5;214m",
+    "bg-error": "\x1b[41m",
+    "bg-muted": "\x1b[48;5;245m",
+    "bg-subtle": "\x1b[48;5;242m",
+    "bg-text": "\x1b[47m",
+
+    // Diff colors
+    "diff-add": "\x1b[38;5;114m", // soft green foreground
+    "diff-del": "\x1b[38;5;210m", // soft red/pink foreground
+    "bg-diff-add": "\x1b[48;5;22m", // dark green background
+    "bg-diff-del": "\x1b[48;5;52m", // dark red background
+
+    // Special
+    reverse: "\x1b[7m",
+  },
+  symbols: {
+    divider: "─",
+    prompt: "❯",
+    bullet: "●",
+    spinner: ["◆", "◇"],
+  },
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+  italic: "\x1b[3m",
+  underline: "\x1b[4m",
+  strikethrough: "\x1b[9m",
+  reverse: "\x1b[7m",
+};