@dungle-scrubs/tallow 0.9.3 → 0.9.6

package/node_modules/@mariozechner/pi-tui/src/components/image.ts

@@ -1,12 +1,3 @@
-/**
- * Image component for the TUI.
- * Renders images via Kitty/iTerm2 protocols with optional border framing.
- * Preserves aspect ratio and avoids small-image upscaling.
- *
- * @module
- */
-
-import { type BorderStyle, ROUNDED } from "../border-styles.js";
 import {
 	getCapabilities,
 	getImageDimensions,
@@ -15,24 +6,6 @@ import {
 	renderImage,
 } from "../terminal-image.js";
 import type { Component } from "../tui.js";
-import { hyperlink } from "../utils.js";
-
-/**
- * Pending file path for the next Image instance.
- * Set by external code (e.g. a tool_result hook) before Image construction.
- * Consumed once by the next Image constructor, then cleared.
- */
-let pendingFilePath: string | undefined;
-
-/**
- * Set the file path for the next Image instance to be constructed.
- * Called before Image creation so the component can render a clickable link.
- *
- * @param path - Absolute file path, or undefined to clear
- */
-export function setNextImageFilePath(path: string | undefined): void {
-	pendingFilePath = path;
-}
 
 export interface ImageTheme {
 	fallbackColor: (str: string) => string;
@@ -44,54 +17,8 @@ export interface ImageOptions {
 	filename?: string;
 	/** Kitty image ID. If provided, reuses this ID (for animations/updates). */
 	imageId?: number;
-	/** Show a border around the image. Default: true. */
-	border?: boolean;
-	/** Border style. Default: ROUNDED. */
-	borderStyle?: BorderStyle;
-	/** Color function for border characters. */
-	borderColorFn?: (str: string) => string;
-	/** Absolute file path — enables a clickable OSC 8 file:// link below the image. */
-	filePath?: string;
-}
-
-/** Default fraction of terminal rows available for images when no explicit maxHeightCells is set. */
-const DEFAULT_MAX_HEIGHT_RATIO = 0.9;
-
-/** Minimum dynamic max height when terminal row count is available. */
-const MIN_DYNAMIC_MAX_HEIGHT_CELLS = 10;
-
-/** Border overhead: │ + space on each side = 4 columns. */
-const BORDER_OVERHEAD = 4;
-
-/**
- * Calculate a dynamic default max image height from terminal size.
- *
- * Uses a high percentage of the current terminal height to avoid unnecessary
- * downscaling while still preventing images from consuming the full viewport.
- * Returns undefined when terminal row count is unavailable, which disables the
- * height cap unless explicitly provided via options.maxHeightCells.
- *
- * @returns Dynamic max height in terminal rows, or undefined
- */
-function getDefaultMaxHeightCells(): number | undefined {
-	const terminalRows = process.stdout.rows;
-	if (!terminalRows || terminalRows <= 0) return undefined;
-	return Math.max(
-		MIN_DYNAMIC_MAX_HEIGHT_CELLS,
-		Math.floor(terminalRows * DEFAULT_MAX_HEIGHT_RATIO)
-	);
 }
 
-/**
- * TUI component that renders an inline image using terminal graphics protocols.
- * Falls back to a text placeholder when the terminal lacks image support.
- *
- * Features:
- * - Dynamic height cap (~90% of terminal rows) by default (overridable via maxHeightCells)
- * - Small images not upscaled beyond native pixel width
- * - Rounded border frame by default (configurable or disableable)
- * - Kitty warping fix: omits r= param so terminal auto-calculates rows
- */
 export class Image implements Component {
 	private base64Data: string;
 	private mimeType: string;
@@ -117,46 +44,24 @@ export class Image implements Component {
 		this.dimensions = dimensions ||
 			getImageDimensions(base64Data, mimeType) || { widthPx: 800, heightPx: 600 };
 		this.imageId = options.imageId;
-
-		// Auto-consume pending file path if not explicitly provided
-		if (!this.options.filePath && pendingFilePath) {
-			this.options = { ...this.options, filePath: pendingFilePath };
-			pendingFilePath = undefined;
-		}
 	}
 
-	/**
-	 * Get the Kitty image ID used by this image (if any).
-	 * @returns Image ID or undefined
-	 */
+	/** Get the Kitty image ID used by this image (if any). */
 	getImageId(): number | undefined {
 		return this.imageId;
 	}
 
-	/** Clears cached render output so the next render() recomputes. */
 	invalidate(): void {
 		this.cachedLines = undefined;
 		this.cachedWidth = undefined;
 	}
 
-	/**
-	 * Render the image into terminal lines.
-	 *
-	 * @param width - Available terminal width in columns
-	 * @returns Array of strings (lines) for the TUI to output
-	 */
 	render(width: number): string[] {
 		if (this.cachedLines && this.cachedWidth === width) {
 			return this.cachedLines;
 		}
 
-		const showBorder = this.options.border === true;
-		// Ignore maxWidthCells from upstream — it's hardcoded to 60 in
-		// pi-coding-agent and squashes landscape images. Use the full
-		// available terminal width instead; height capping and natural-width
-		// clamping in calculateImageLayout prevent oversized output.
-		const maxWidth = this.getSafeMaxWidthCells(width, showBorder);
-		const maxHeight = this.options.maxHeightCells ?? getDefaultMaxHeightCells();
+		const maxWidth = Math.min(width - 2, this.options.maxWidthCells ?? 60);
 
 		const caps = getCapabilities();
 		let lines: string[];
@@ -164,23 +69,32 @@ export class Image implements Component {
 		if (caps.images) {
 			const result = renderImage(this.base64Data, this.dimensions, {
 				maxWidthCells: maxWidth,
-				maxHeightCells: maxHeight,
 				imageId: this.imageId,
 			});
 
 			if (result) {
+				// Store the image ID for later cleanup
 				if (result.imageId) {
 					this.imageId = result.imageId;
 				}
 
-				lines = showBorder
-					? this.buildBorderedImage(result.sequence, result.rows, result.columns)
-					: this.buildUnborderedImage(result.sequence, result.rows, result.columns);
+				// Return `rows` lines so TUI accounts for image height
+				// First (rows-1) lines are empty (TUI clears them)
+				// Last line: move cursor back up, then output image sequence
+				lines = [];
+				for (let i = 0; i < result.rows - 1; i++) {
+					lines.push("");
+				}
+				// Move cursor up to first row, then output image
+				const moveUp = result.rows > 1 ? `\x1b[${result.rows - 1}A` : "";
+				lines.push(moveUp + result.sequence);
 			} else {
-				lines = this.buildFallback(showBorder);
+				const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
+				lines = [this.theme.fallbackColor(fallback)];
 			}
 		} else {
-			lines = this.buildFallback(showBorder);
+			const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
+			lines = [this.theme.fallbackColor(fallback)];
 		}
 
 		this.cachedLines = lines;
@@ -188,128 +102,4 @@ export class Image implements Component {
 
 		return lines;
 	}
-
-	/**
-	 * Resolve a safe image width budget from the current pane width.
-	 *
-	 * Keeps width math deterministic for ultra-narrow panes by enforcing a
-	 * minimum of 1 cell after reserved spacing and optional border overhead.
-	 *
-	 * @param width - Current pane width in terminal columns
-	 * @param showBorder - Whether bordered rendering is enabled
-	 * @returns Positive max width in cells for `renderImage`
-	 */
-	private getSafeMaxWidthCells(width: number, showBorder: boolean): number {
-		const borderCols = showBorder ? BORDER_OVERHEAD : 0;
-		const availableWidth = Math.floor(width) - 2 - borderCols;
-		return Math.max(1, availableWidth);
-	}
-
-	/**
-	 * Wraps visible text in an OSC 8 file:// hyperlink if filePath is set.
-	 * Returns the text unchanged when no filePath is configured.
-	 *
-	 * @param text - Visible content to wrap (spaces, border chars, etc.)
-	 * @returns Text optionally wrapped in OSC 8 escape sequences
-	 */
-	private wrapFileLink(text: string): string {
-		if (!this.options.filePath) return text;
-		return hyperlink(`file://${encodeURI(this.options.filePath)}`, text);
-	}
-
-	/**
-	 * Builds image output without a border (original behavior).
-	 * First N-1 lines are filled with OSC 8–wrapped spaces (when filePath
-	 * is set) so the image area is a clickable link in the text layer.
-	 * Last line moves cursor up and outputs the image escape sequence.
-	 *
-	 * @param sequence - Terminal escape sequence for the image
-	 * @param rows - Number of terminal rows the image occupies
-	 * @param columns - Number of terminal columns the image occupies
-	 * @returns Lines array for the TUI
-	 */
-	private buildUnborderedImage(sequence: string, rows: number, columns: number): string[] {
-		const lines: string[] = [];
-		const filler = this.wrapFileLink(" ".repeat(columns));
-		for (let i = 0; i < rows - 1; i++) {
-			lines.push(filler);
-		}
-		const moveUp = rows > 1 ? `\x1b[${rows - 1}A` : "";
-		lines.push(`${this.wrapFileLink(" ".repeat(columns))}${moveUp}\x1b[${columns}D${sequence}`);
-		return lines;
-	}
-
-	/**
-	 * Builds image output wrapped in a border.
-	 * Border characters occupy the text layer; the image fills the inner
-	 * cell range via the graphics layer (Kitty/iTerm2).
-	 *
-	 * The last content line outputs a full bordered row (text layer), then
-	 * repositions the cursor back to the first content row and places the
-	 * image sequence. The graphics layer draws over the inner spaces while
-	 * border characters at the edges remain visible.
-	 *
-	 * @param sequence - Terminal escape sequence for the image
-	 * @param rows - Number of terminal rows the image occupies
-	 * @param columns - Number of terminal columns the image occupies
-	 * @returns Lines array for the TUI
-	 */
-	private buildBorderedImage(sequence: string, rows: number, columns: number): string[] {
-		const style = this.options.borderStyle ?? ROUNDED;
-		const colorFn = this.options.borderColorFn ?? ((s: string) => s);
-
-		const innerWidth = columns;
-		const totalWidth = innerWidth + BORDER_OVERHEAD;
-
-		const top = colorFn(style.topLeft + style.horizontal.repeat(totalWidth - 2) + style.topRight);
-		const bottom = colorFn(
-			style.bottomLeft + style.horizontal.repeat(totalWidth - 2) + style.bottomRight
-		);
-		const leftBorder = `${colorFn(style.vertical)} `;
-		const rightBorder = ` ${colorFn(style.vertical)}`;
-		const emptyInner = this.wrapFileLink(" ".repeat(innerWidth));
-		const borderedLine = leftBorder + emptyInner + rightBorder;
-
-		const lines: string[] = [top];
-
-		// Bordered empty lines — image fills the inner area via the graphics layer
-		for (let i = 0; i < rows - 1; i++) {
-			lines.push(borderedLine);
-		}
-
-		// Last content line: full bordered text, then reposition cursor for image placement.
-		// CUU (cursor up) + CUB (cursor backward) positions to column 2 of the first content row.
-		const moveUp = rows > 1 ? `\x1b[${rows - 1}A` : "";
-		const moveToImageStart = `\x1b[${totalWidth - 2}D`;
-		lines.push(borderedLine + moveUp + moveToImageStart + sequence);
-
-		lines.push(bottom);
-
-		return lines;
-	}
-
-	/**
-	 * Builds fallback text when the terminal doesn't support images.
-	 * Optionally wrapped in a border for visual consistency.
-	 *
-	 * @param showBorder - Whether to wrap the fallback in a border
-	 * @returns Lines array for the TUI
-	 */
-	private buildFallback(showBorder: boolean): string[] {
-		const fallback = imageFallback(this.mimeType, this.dimensions, this.options.filename);
-		const text = this.theme.fallbackColor(fallback);
-
-		if (showBorder) {
-			const style = this.options.borderStyle ?? ROUNDED;
-			const colorFn = this.options.borderColorFn ?? ((s: string) => s);
-			const innerWidth = fallback.length + 2; // 1 space padding each side
-			const top = colorFn(style.topLeft + style.horizontal.repeat(innerWidth) + style.topRight);
-			const bottom = colorFn(
-				style.bottomLeft + style.horizontal.repeat(innerWidth) + style.bottomRight
-			);
-			return [top, `${colorFn(style.vertical)} ${text} ${colorFn(style.vertical)}`, bottom];
-		}
-
-		return [text];
-	}
 }

package/node_modules/@mariozechner/pi-tui/src/components/input.ts

@@ -1,8 +1,15 @@
-import { getEditorKeybindings } from "../keybindings.js";
+import { getKeybindings } from "../keybindings.js";
+import { decodeKittyPrintable } from "../keys.js";
 import { KillRing } from "../kill-ring.js";
 import { type Component, CURSOR_MARKER, type Focusable } from "../tui.js";
 import { UndoStack } from "../undo-stack.js";
-import { getSegmenter, isPunctuationChar, isWhitespaceChar, visibleWidth } from "../utils.js";
+import {
+	getSegmenter,
+	isPunctuationChar,
+	isWhitespaceChar,
+	sliceByColumn,
+	visibleWidth,
+} from "../utils.js";
 
 const segmenter = getSegmenter();
 
@@ -81,69 +88,69 @@ export class Input implements Component, Focusable {
 			return;
 		}
 
-		const kb = getEditorKeybindings();
+		const kb = getKeybindings();
 
 		// Escape/Cancel
-		if (kb.matches(data, "selectCancel")) {
+		if (kb.matches(data, "tui.select.cancel")) {
 			if (this.onEscape) this.onEscape();
 			return;
 		}
 
 		// Undo
-		if (kb.matches(data, "undo")) {
+		if (kb.matches(data, "tui.editor.undo")) {
 			this.undo();
 			return;
 		}
 
 		// Submit
-		if (kb.matches(data, "submit") || data === "\n") {
+		if (kb.matches(data, "tui.input.submit") || data === "\n") {
 			if (this.onSubmit) this.onSubmit(this.value);
 			return;
 		}
 
 		// Deletion
-		if (kb.matches(data, "deleteCharBackward")) {
+		if (kb.matches(data, "tui.editor.deleteCharBackward")) {
 			this.handleBackspace();
 			return;
 		}
 
-		if (kb.matches(data, "deleteCharForward")) {
+		if (kb.matches(data, "tui.editor.deleteCharForward")) {
 			this.handleForwardDelete();
 			return;
 		}
 
-		if (kb.matches(data, "deleteWordBackward")) {
+		if (kb.matches(data, "tui.editor.deleteWordBackward")) {
 			this.deleteWordBackwards();
 			return;
 		}
 
-		if (kb.matches(data, "deleteWordForward")) {
+		if (kb.matches(data, "tui.editor.deleteWordForward")) {
 			this.deleteWordForward();
 			return;
 		}
 
-		if (kb.matches(data, "deleteToLineStart")) {
+		if (kb.matches(data, "tui.editor.deleteToLineStart")) {
 			this.deleteToLineStart();
 			return;
 		}
 
-		if (kb.matches(data, "deleteToLineEnd")) {
+		if (kb.matches(data, "tui.editor.deleteToLineEnd")) {
 			this.deleteToLineEnd();
 			return;
 		}
 
 		// Kill ring actions
-		if (kb.matches(data, "yank")) {
+		if (kb.matches(data, "tui.editor.yank")) {
 			this.yank();
 			return;
 		}
-		if (kb.matches(data, "yankPop")) {
+		if (kb.matches(data, "tui.editor.yankPop")) {
 			this.yankPop();
 			return;
 		}
 
 		// Cursor movement
-		if (kb.matches(data, "cursorLeft")) {
+		if (kb.matches(data, "tui.editor.cursorLeft")) {
 			this.lastAction = null;
 			if (this.cursor > 0) {
 				const beforeCursor = this.value.slice(0, this.cursor);
@@ -154,7 +161,7 @@ export class Input implements Component, Focusable {
 			return;
 		}
 
-		if (kb.matches(data, "cursorRight")) {
+		if (kb.matches(data, "tui.editor.cursorRight")) {
 			this.lastAction = null;
 			if (this.cursor < this.value.length) {
 				const afterCursor = this.value.slice(this.cursor);
@@ -165,28 +172,38 @@ export class Input implements Component, Focusable {
 			return;
 		}
 
-		if (kb.matches(data, "cursorLineStart")) {
+		if (kb.matches(data, "tui.editor.cursorLineStart")) {
 			this.lastAction = null;
 			this.cursor = 0;
 			return;
 		}
 
-		if (kb.matches(data, "cursorLineEnd")) {
+		if (kb.matches(data, "tui.editor.cursorLineEnd")) {
 			this.lastAction = null;
 			this.cursor = this.value.length;
 			return;
 		}
 
-		if (kb.matches(data, "cursorWordLeft")) {
+		if (kb.matches(data, "tui.editor.cursorWordLeft")) {
 			this.moveWordBackwards();
 			return;
 		}
 
-		if (kb.matches(data, "cursorWordRight")) {
+		if (kb.matches(data, "tui.editor.cursorWordRight")) {
 			this.moveWordForwards();
 			return;
 		}
 
+		// Kitty CSI-u printable character (e.g. \x1b[97u for 'a').
+		// Terminals with Kitty protocol flag 1 (disambiguate) send CSI-u for all keys,
+		// including plain printable characters. Decode before the control-char check
+		// since CSI-u sequences contain \x1b which would be rejected.
+		const kittyPrintable = decodeKittyPrintable(data);
+		if (kittyPrintable !== undefined) {
+			this.insertCharacter(kittyPrintable);
+			return;
+		}
+
 		// Regular character input - accept printable characters including Unicode,
 		// but reject control characters (C0: 0x00-0x1F, DEL: 0x7F, C1: 0x80-0x9F)
 		const hasControlChars = [...data].some((ch) => {
@@ -421,7 +438,11 @@ export class Input implements Component, Focusable {
 		this.pushUndo();
 
 		// Clean the pasted text - remove newlines and carriage returns
-		const cleanText = pastedText.replace(/\r\n/g, "").replace(/\r/g, "").replace(/\n/g, "");
+		const cleanText = pastedText
+			.replace(/\r\n/g, "")
+			.replace(/\r/g, "")
+			.replace(/\n/g, "")
+			.replace(/\t/g, "    ");
 
 		// Insert at cursor position
 		this.value = this.value.slice(0, this.cursor) + cleanText + this.value.slice(this.cursor);
@@ -443,56 +464,43 @@ export class Input implements Component, Focusable {
 
 		let visibleText = "";
 		let cursorDisplay = this.cursor;
+		const totalWidth = visibleWidth(this.value);
 
-		if (this.value.length < availableWidth) {
+		if (totalWidth < availableWidth) {
 			// Everything fits (leave room for cursor at end)
 			visibleText = this.value;
 		} else {
 			// Need horizontal scrolling
-			// Reserve one character for cursor if it's at the end
+			// Reserve one column for cursor if it's at the end
 			const scrollWidth = this.cursor === this.value.length ? availableWidth - 1 : availableWidth;
-			const halfWidth = Math.floor(scrollWidth / 2);
-
-			const findValidStart = (start: number) => {
-				while (start < this.value.length) {
-					const charCode = this.value.charCodeAt(start);
-					// this is low surrogate, not a valid start
-					if (charCode >= 0xdc00 && charCode < 0xe000) {
-						start++;
-						continue;
-					}
-					break;
+			const cursorCol = visibleWidth(this.value.slice(0, this.cursor));
+
+			if (scrollWidth > 0) {
+				const halfWidth = Math.floor(scrollWidth / 2);
+				let startCol = 0;
+
+				if (cursorCol < halfWidth) {
+					// Cursor near start
+					startCol = 0;
+				} else if (cursorCol > totalWidth - halfWidth) {
+					// Cursor near end
+					startCol = Math.max(0, totalWidth - scrollWidth);
+				} else {
+					// Cursor in middle
+					startCol = Math.max(0, cursorCol - halfWidth);
 				}
-				return start;
-			};
-
-			const findValidEnd = (end: number) => {
-				while (end > 0) {
-					const charCode = this.value.charCodeAt(end - 1);
-					// this is high surrogate, might be split.
-					if (charCode >= 0xd800 && charCode < 0xdc00) {
-						end--;
-						continue;
-					}
-					break;
-				}
-				return end;
-			};
-
-			if (this.cursor < halfWidth) {
-				// Cursor near start
-				visibleText = this.value.slice(0, findValidEnd(scrollWidth));
-				cursorDisplay = this.cursor;
-			} else if (this.cursor > this.value.length - halfWidth) {
-				// Cursor near end
-				const start = findValidStart(this.value.length - scrollWidth);
-				visibleText = this.value.slice(start);
-				cursorDisplay = this.cursor - start;
+
+				visibleText = sliceByColumn(this.value, startCol, scrollWidth, true);
+				const beforeCursor = sliceByColumn(
+					this.value,
+					startCol,
+					Math.max(0, cursorCol - startCol),
+					true
+				);
+				cursorDisplay = beforeCursor.length;
 			} else {
-				// Cursor in middle
-				const start = findValidStart(this.cursor - halfWidth);
-				visibleText = this.value.slice(start, findValidEnd(start + scrollWidth));
-				cursorDisplay = halfWidth;
+				visibleText = "";
+				cursorDisplay = 0;
 			}
 		}