@dungle-scrubs/tallow 0.8.21 → 0.8.23

package/packages/tallow-tui/src/__tests__/image-component.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it } from "bun:test";
+import { Image, type ImageTheme } from "../components/image.js";
+import { withCapabilityEnv } from "../test-utils/capability-env.js";
+
+const IDENTITY_THEME: ImageTheme = {
+	fallbackColor: (text) => text,
+};
+
+/**
+ * Extract Kitty `c=<columns>` param from rendered image lines.
+ *
+ * @param lines - Rendered TUI lines from Image.render
+ * @returns Parsed Kitty column count, or null if sequence not present
+ */
+function getKittyColumns(lines: readonly string[]): number | null {
+	for (const line of lines) {
+		const start = line.indexOf("\x1b_G");
+		if (start < 0) {
+			continue;
+		}
+		const match = line.slice(start).match(/c=(\d+)/);
+		if (match) {
+			return Number(match[1]);
+		}
+	}
+	return null;
+}
+
+describe("Image component narrow-pane rendering", () => {
+	it("applies one safe width contract for border and no-border rendering", () => {
+		withCapabilityEnv({ TERM_PROGRAM: "kitty" }, () => {
+			const dimensions = { widthPx: 4000, heightPx: 2500 };
+			const cases = [
+				{ border: false, expectedColumns: 1, width: 1 },
+				{ border: false, expectedColumns: 6, width: 8 },
+				{ border: false, expectedColumns: 18, width: 20 },
+				{ border: true, expectedColumns: 1, width: 1 },
+				{ border: true, expectedColumns: 2, width: 8 },
+				{ border: true, expectedColumns: 14, width: 20 },
+			] as const;
+
+			for (const testCase of cases) {
+				const image = new Image(
+					"AA==",
+					"image/png",
+					IDENTITY_THEME,
+					{ border: testCase.border, maxHeightCells: 200 },
+					dimensions
+				);
+				const lines = image.render(testCase.width);
+				expect(lines.length).toBeGreaterThan(0);
+				expect(getKittyColumns(lines)).toBe(testCase.expectedColumns);
+			}
+		});
+	});
+
+	it("renders portrait images at narrow widths with valid positive geometry", () => {
+		withCapabilityEnv({ TERM_PROGRAM: "kitty" }, () => {
+			const image = new Image(
+				"AA==",
+				"image/png",
+				IDENTITY_THEME,
+				{ border: false, maxHeightCells: 200 },
+				{ widthPx: 1179, heightPx: 2556 }
+			);
+
+			for (const width of [8, 12, 20, 30]) {
+				const lines = image.render(width);
+				expect(lines.some((line) => line.includes("\x1b_G"))).toBe(true);
+				const columns = getKittyColumns(lines);
+				expect(columns).not.toBeNull();
+				expect(columns).toBeGreaterThanOrEqual(1);
+			}
+		});
+	});
+
+	it("renders landscape images in narrow panes for both border modes", () => {
+		withCapabilityEnv({ TERM_PROGRAM: "kitty" }, () => {
+			const dimensions = { widthPx: 2400, heightPx: 1200 };
+			for (const border of [false, true]) {
+				const image = new Image(
+					"AA==",
+					"image/png",
+					IDENTITY_THEME,
+					{ border, maxHeightCells: 200 },
+					dimensions
+				);
+				const lines = image.render(12);
+				expect(lines.length).toBeGreaterThan(0);
+				expect(getKittyColumns(lines)).toBeGreaterThanOrEqual(1);
+			}
+		});
+	});
+
+	it("degrades safely for ultra-narrow pane widths", () => {
+		withCapabilityEnv({ TERM_PROGRAM: "kitty" }, () => {
+			for (const border of [false, true]) {
+				const image = new Image(
+					"AA==",
+					"image/png",
+					IDENTITY_THEME,
+					{ border, maxHeightCells: 200 },
+					{ widthPx: 1200, heightPx: 1800 }
+				);
+
+				expect(() => image.render(0)).not.toThrow();
+				expect(() => image.render(1)).not.toThrow();
+				expect(getKittyColumns(image.render(0))).toBe(1);
+				expect(getKittyColumns(image.render(1))).toBe(1);
+			}
+		});
+	});
+});

package/packages/tallow-tui/src/__tests__/keys.test.ts

@@ -0,0 +1,141 @@
+/**
+ * Tests for tallow-tui key parsing: parseKey, matchesKey, isKeyRelease, isKeyRepeat.
+ */
+import { describe, expect, it } from "bun:test";
+import { isKeyRelease, isKeyRepeat, matchesKey, parseKey } from "../keys.js";
+
+// ── parseKey ─────────────────────────────────────────────────────────────────
+
+describe("parseKey", () => {
+	it("parses printable ASCII letter", () => {
+		expect(parseKey("a")).toBe("a");
+	});
+
+	it("parses enter (carriage return)", () => {
+		expect(parseKey("\r")).toBe("enter");
+	});
+
+	it("parses escape", () => {
+		expect(parseKey("\x1b")).toBe("escape");
+	});
+
+	it("parses tab", () => {
+		expect(parseKey("\t")).toBe("tab");
+	});
+
+	it("parses space", () => {
+		expect(parseKey(" ")).toBe("space");
+	});
+
+	it("parses arrow up", () => {
+		expect(parseKey("\x1b[A")).toBe("up");
+	});
+
+	it("parses arrow down", () => {
+		expect(parseKey("\x1b[B")).toBe("down");
+	});
+
+	it("parses arrow right", () => {
+		expect(parseKey("\x1b[C")).toBe("right");
+	});
+
+	it("parses arrow left", () => {
+		expect(parseKey("\x1b[D")).toBe("left");
+	});
+
+	it("parses ctrl+c", () => {
+		expect(parseKey("\x03")).toBe("ctrl+c");
+	});
+
+	it("parses backspace (DEL)", () => {
+		expect(parseKey("\x7f")).toBe("backspace");
+	});
+
+	it("parses backspace (BS)", () => {
+		expect(parseKey("\x08")).toBe("backspace");
+	});
+
+	it("parses home", () => {
+		expect(parseKey("\x1b[H")).toBe("home");
+	});
+
+	it("parses end", () => {
+		expect(parseKey("\x1b[F")).toBe("end");
+	});
+
+	it("parses delete", () => {
+		expect(parseKey("\x1b[3~")).toBe("delete");
+	});
+
+	it("parses shift+tab", () => {
+		expect(parseKey("\x1b[Z")).toBe("shift+tab");
+	});
+
+	it("parses ctrl+space", () => {
+		expect(parseKey("\x00")).toBe("ctrl+space");
+	});
+
+	it("returns undefined for unrecognized sequences", () => {
+		expect(parseKey("\x1b[999z")).toBeUndefined();
+	});
+});
+
+// ── matchesKey ───────────────────────────────────────────────────────────────
+
+describe("matchesKey", () => {
+	it("matches arrow up", () => {
+		expect(matchesKey("\x1b[A", "up")).toBe(true);
+	});
+
+	it("matches enter", () => {
+		expect(matchesKey("\r", "enter")).toBe(true);
+	});
+
+	it("matches escape", () => {
+		expect(matchesKey("\x1b", "escape")).toBe(true);
+	});
+
+	it("rejects non-matching key", () => {
+		expect(matchesKey("\x1b[A", "down")).toBe(false);
+	});
+
+	it("matches tab", () => {
+		expect(matchesKey("\t", "tab")).toBe(true);
+	});
+
+	it("matches backspace", () => {
+		expect(matchesKey("\x7f", "backspace")).toBe(true);
+	});
+});
+
+// ── isKeyRelease ─────────────────────────────────────────────────────────────
+
+describe("isKeyRelease", () => {
+	it("returns false for regular ASCII input", () => {
+		expect(isKeyRelease("a")).toBe(false);
+	});
+
+	it("returns false for legacy arrow sequences", () => {
+		expect(isKeyRelease("\x1b[A")).toBe(false);
+	});
+
+	it("returns false for empty string", () => {
+		expect(isKeyRelease("")).toBe(false);
+	});
+});
+
+// ── isKeyRepeat ──────────────────────────────────────────────────────────────
+
+describe("isKeyRepeat", () => {
+	it("returns false for regular ASCII input", () => {
+		expect(isKeyRepeat("a")).toBe(false);
+	});
+
+	it("returns false for legacy arrow sequences", () => {
+		expect(isKeyRepeat("\x1b[A")).toBe(false);
+	});
+
+	it("returns false for empty string", () => {
+		expect(isKeyRepeat("")).toBe(false);
+	});
+});

package/packages/tallow-tui/src/__tests__/render.test.ts

@@ -0,0 +1,179 @@
+/**
+ * TUI component snapshot tests.
+ *
+ * Renders components to plaintext and compares against snapshots.
+ * Run `bun test --update-snapshots` to regenerate after intentional changes.
+ */
+import { describe, expect, it } from "bun:test";
+import { renderSnapshot } from "../../../../test-utils/virtual-terminal.js";
+import { BorderedBox } from "../components/bordered-box.js";
+import { Markdown, type MarkdownTheme } from "../components/markdown.js";
+import { Text } from "../components/text.js";
+import { TruncatedText } from "../components/truncated-text.js";
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/** Identity theme — all styling functions return input unchanged. */
+const identityTheme: MarkdownTheme = {
+	heading: (t) => t,
+	link: (t) => t,
+	linkUrl: (t) => t,
+	code: (t) => t,
+	codeBlock: (t) => t,
+	codeBlockBorder: (t) => t,
+	quote: (t) => t,
+	quoteBorder: (t) => t,
+	hr: (t) => t,
+	listBullet: (t) => t,
+	bold: (t) => t,
+	italic: (t) => t,
+	strikethrough: (t) => t,
+	underline: (t) => t,
+};
+
+// ════════════════════════════════════════════════════════════════
+// Text
+// ════════════════════════════════════════════════════════════════
+
+describe("Text", () => {
+	it("renders plain text at width 40", () => {
+		const text = new Text("Hello, world!", 0, 0);
+		expect(renderSnapshot(text, 40)).toMatchSnapshot();
+	});
+
+	it("wraps long text at narrow width", () => {
+		const text = new Text("This is a longer piece of text that should wrap at narrow widths", 0, 0);
+		expect(renderSnapshot(text, 20)).toMatchSnapshot();
+	});
+
+	it("renders with padding", () => {
+		const text = new Text("Padded text", 2, 1);
+		expect(renderSnapshot(text, 40)).toMatchSnapshot();
+	});
+
+	it("handles empty text", () => {
+		const text = new Text("", 0, 0);
+		expect(renderSnapshot(text, 40)).toMatchSnapshot();
+	});
+
+	it("handles multiline text", () => {
+		const text = new Text("Line one\nLine two\nLine three", 0, 0);
+		expect(renderSnapshot(text, 40)).toMatchSnapshot();
+	});
+});
+
+// ════════════════════════════════════════════════════════════════
+// Markdown
+// ════════════════════════════════════════════════════════════════
+
+/** Create a Markdown component with identity theme and no padding. */
+function md(text: string): Markdown {
+	return new Markdown(text, 0, 0, identityTheme);
+}
+
+describe("Markdown", () => {
+	it("renders heading", () => {
+		expect(renderSnapshot(md("# Hello World"), 40)).toMatchSnapshot();
+	});
+
+	it("renders paragraph text", () => {
+		expect(
+			renderSnapshot(md("Some paragraph text that should be rendered normally."), 40)
+		).toMatchSnapshot();
+	});
+
+	it("renders code block", () => {
+		expect(renderSnapshot(md("```ts\nconst x = 1;\nconst y = 2;\n```"), 40)).toMatchSnapshot();
+	});
+
+	it("renders unordered list", () => {
+		expect(renderSnapshot(md("- Item one\n- Item two\n- Item three"), 40)).toMatchSnapshot();
+	});
+
+	it("renders ordered list", () => {
+		expect(renderSnapshot(md("1. First\n2. Second\n3. Third"), 40)).toMatchSnapshot();
+	});
+
+	it("renders blockquote", () => {
+		expect(renderSnapshot(md("> This is a quote"), 40)).toMatchSnapshot();
+	});
+
+	it("renders at narrow width (20)", () => {
+		expect(
+			renderSnapshot(
+				md("# Hello World\n\nSome paragraph text that should wrap at this narrow width."),
+				20
+			)
+		).toMatchSnapshot();
+	});
+
+	it("renders inline formatting", () => {
+		expect(renderSnapshot(md("Text with **bold** and *italic* and `code`."), 60)).toMatchSnapshot();
+	});
+
+	it("renders horizontal rule", () => {
+		expect(renderSnapshot(md("Above\n\n---\n\nBelow"), 40)).toMatchSnapshot();
+	});
+
+	it("handles empty content", () => {
+		expect(renderSnapshot(md(""), 40)).toMatchSnapshot();
+	});
+});
+
+// ════════════════════════════════════════════════════════════════
+// BorderedBox
+// ════════════════════════════════════════════════════════════════
+
+describe("BorderedBox", () => {
+	it("renders content with default border", () => {
+		const box = new BorderedBox(["Hello", "World"]);
+		expect(renderSnapshot(box, 30)).toMatchSnapshot();
+	});
+
+	it("renders with title", () => {
+		const box = new BorderedBox(["Content line"], { title: "My Box" });
+		expect(renderSnapshot(box, 30)).toMatchSnapshot();
+	});
+
+	it("renders with custom padding", () => {
+		const box = new BorderedBox(["Padded"], { paddingX: 3 });
+		expect(renderSnapshot(box, 30)).toMatchSnapshot();
+	});
+
+	it("handles empty content", () => {
+		const box = new BorderedBox([]);
+		expect(renderSnapshot(box, 30)).toMatchSnapshot();
+	});
+
+	it("handles very narrow width", () => {
+		const box = new BorderedBox(["Some content"]);
+		// At width 5, inner width = 5 - 2 - 2 = 1
+		expect(renderSnapshot(box, 5)).toMatchSnapshot();
+	});
+});
+
+// ════════════════════════════════════════════════════════════════
+// TruncatedText
+// ════════════════════════════════════════════════════════════════
+
+describe("TruncatedText", () => {
+	it("renders short text without truncation", () => {
+		const tt = new TruncatedText("Short");
+		expect(renderSnapshot(tt, 40)).toMatchSnapshot();
+	});
+
+	it("truncates long text", () => {
+		const tt = new TruncatedText("This text is much too long to fit in a narrow terminal");
+		expect(renderSnapshot(tt, 20)).toMatchSnapshot();
+	});
+
+	it("renders with padding", () => {
+		const tt = new TruncatedText("Padded", 2, 1);
+		expect(renderSnapshot(tt, 30)).toMatchSnapshot();
+	});
+
+	it("handles multiline text (takes first line)", () => {
+		const tt = new TruncatedText("First line\nSecond line");
+		expect(renderSnapshot(tt, 40)).toMatchSnapshot();
+	});
+});

package/packages/tallow-tui/src/__tests__/stdin-buffer.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Tests for tallow-tui StdinBuffer: sequence extraction and event emission.
+ * Tests the public StdinBuffer class interface since extractCompleteSequences is private.
+ */
+import { describe, expect, it } from "bun:test";
+import { StdinBuffer } from "../stdin-buffer.js";
+
+/**
+ * Collects all 'data' events emitted by a StdinBuffer during a synchronous process() call.
+ * @param input - Raw input string to feed
+ * @returns Array of emitted sequence strings
+ */
+function collectSequences(input: string): string[] {
+	const sequences: string[] = [];
+	const buffer = new StdinBuffer({ timeout: 0 });
+	buffer.on("data", (seq: string) => sequences.push(seq));
+	buffer.process(input);
+	return sequences;
+}
+
+// ── StdinBuffer sequence extraction ──────────────────────────────────────────
+
+describe("StdinBuffer", () => {
+	it("emits single ASCII character", () => {
+		const seqs = collectSequences("a");
+		expect(seqs).toContain("a");
+	});
+
+	it("emits each character separately for plain text", () => {
+		const seqs = collectSequences("abc");
+		expect(seqs).toEqual(["a", "b", "c"]);
+	});
+
+	it("emits complete CSI arrow sequence as one unit", () => {
+		const seqs = collectSequences("\x1b[A");
+		expect(seqs).toEqual(["\x1b[A"]);
+	});
+
+	it("emits complete SGR sequence as one unit", () => {
+		const seqs = collectSequences("\x1b[31m");
+		expect(seqs).toEqual(["\x1b[31m"]);
+	});
+
+	it("handles escape followed by printable as separate events", () => {
+		// In legacy mode, ESC + letter can be alt+letter
+		const seqs = collectSequences("\x1ba");
+		expect(seqs.length).toBeGreaterThanOrEqual(1);
+	});
+
+	it("handles multiple CSI sequences in one chunk", () => {
+		const seqs = collectSequences("\x1b[A\x1b[B");
+		expect(seqs).toEqual(["\x1b[A", "\x1b[B"]);
+	});
+
+	it("handles mixed ASCII and escape sequences", () => {
+		const seqs = collectSequences("a\x1b[Ab");
+		expect(seqs).toEqual(["a", "\x1b[A", "b"]);
+	});
+
+	it("handles bracketed paste via paste event", () => {
+		const pastes: string[] = [];
+		const buffer = new StdinBuffer({ timeout: 0 });
+		buffer.on("paste", (content: string) => pastes.push(content));
+		buffer.process("\x1b[200~hello world\x1b[201~");
+		expect(pastes).toEqual(["hello world"]);
+	});
+
+	it("handles delete key sequence", () => {
+		const seqs = collectSequences("\x1b[3~");
+		expect(seqs).toEqual(["\x1b[3~"]);
+	});
+
+	it("emits empty string for empty input", () => {
+		const seqs = collectSequences("");
+		expect(seqs).toEqual([""]);
+	});
+
+	it("handles ctrl characters", () => {
+		const seqs = collectSequences("\x03"); // ctrl+c
+		expect(seqs).toEqual(["\x03"]);
+	});
+});