@sayknow-cli/tui 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## [Unreleased]
 
-## [0.6.4] - 2026-09-26
+## [0.6.6] - 2026-09-28
+
+### Added
+
+- `renderPetHalfBlocks(frame, skin, colorMode)` draws a Sayknow pet frame as half-block text (two pixel rows per terminal row, truecolor or 256 colors), for surfaces with no sixel/kitty image support.
 
 ## [0.5.12] - 2026-09-15
 ### Fixed

package/dist/types/components/editor.d.ts

@@ -70,6 +70,12 @@ export declare class Editor implements Component, Focusable {
     setBorderStyle(borderStyle: EditorBorderStyle): void;
     setClosedBorderBox(closedBorderBox: boolean): void;
     setPromptGutter(promptGutter: string | undefined): void;
+    /**
+     * Borderless rail: draw `glyph` in the current `borderColor` at the start of
+     * every input row (not just the first), followed by one space. Takes
+     * precedence over `setPromptGutter` and is ignored while the border is visible.
+     */
+    setRailGutter(glyph: string | undefined): void;
     setInputPrefix(inputPrefix: string | undefined): void;
     setPlaceholder(placeholder: string | undefined): void;
     /**

package/dist/types/components/sayknow-pet.d.ts

@@ -125,4 +125,11 @@ export declare function buildSayknowPixelFrames(options: {
     /** Color skin for the sprite palette (default "red"). */
     skin?: PetSkinId;
 }): SayknowPixelFrames;
+/**
+ * Draw a pet frame as text with half blocks, one terminal row per two pixel rows,
+ * so the same octopus shows up where no pixel protocol is available (the launch
+ * card). Fully transparent pixel rows at the top and bottom are cropped; columns
+ * are kept so every frame of the animation keeps the same width.
+ */
+export declare function renderPetHalfBlocks(frame: SayknowPixelFrameName, skin?: PetSkinId, colorMode?: "truecolor" | "256color"): string[];
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@sayknow-cli/tui",
-	"version": "0.6.4",
+	"version": "0.6.6",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://sayknow-cli.com",
 	"author": "jaybeyond",
@@ -38,8 +38,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@sayknow-cli/natives": "0.6.4",
-		"@sayknow-cli/utils": "0.6.4",
+		"@sayknow-cli/natives": "0.6.6",
+		"@sayknow-cli/utils": "0.6.6",
 		"lru-cache": "11.3.6",
 		"marked": "^18.0.3"
 	},

package/src/components/editor.ts

@@ -427,6 +427,7 @@ export class Editor implements Component, Focusable {
 	/** Display width of the cursorOverride glyph (needed because override may contain ANSI escapes). */
 	cursorOverrideWidth: number | undefined;
 	#promptGutter: string | undefined;
+	#railGutter: string | undefined;
 	#inputPrefix: string | undefined;
 	#inputPrefixWidth = 0;
 	#placeholder: string | undefined;
@@ -567,6 +568,16 @@ export class Editor implements Component, Focusable {
 		this.#invalidateLayoutCache();
 	}
 
+	/**
+	 * Borderless rail: draw `glyph` in the current `borderColor` at the start of
+	 * every input row (not just the first), followed by one space. Takes
+	 * precedence over `setPromptGutter` and is ignored while the border is visible.
+	 */
+	setRailGutter(glyph: string | undefined): void {
+		this.#railGutter = glyph;
+		this.#invalidateLayoutCache();
+	}
+
 	setInputPrefix(inputPrefix: string | undefined): void {
 		this.#inputPrefix = inputPrefix;
 		this.#inputPrefixWidth = inputPrefix ? visibleWidth(inputPrefix) : 0;
@@ -732,21 +743,32 @@ export class Editor implements Component, Focusable {
 	}
 
 	#getPromptGutterWidth(width: number, paddingX: number): number {
-		if (this.#borderVisible || !this.#promptGutter) return 0;
+		if (this.#borderVisible) return 0;
+		const gutterWidth = this.#railGutter
+			? visibleWidth(this.#railGutter) + 1
+			: this.#promptGutter
+				? visibleWidth(this.#promptGutter)
+				: 0;
+		if (gutterWidth === 0) return 0;
 		const chromeWidth = 2 * this.#getHorizontalChromeWidth(paddingX);
 		const availableWidth = Math.max(0, width - chromeWidth);
-		return Math.min(visibleWidth(this.#promptGutter), availableWidth);
+		return Math.min(gutterWidth, availableWidth);
 	}
 
 	#getPromptGutter(
 		width: number,
 		paddingX: number,
 	): { firstLine: string; continuation: string; width: number } | undefined {
-		if (this.#borderVisible || !this.#promptGutter) return undefined;
+		if (this.#borderVisible || !(this.#railGutter || this.#promptGutter)) return undefined;
 		const gutterWidth = this.#getPromptGutterWidth(width, paddingX);
 		if (gutterWidth === 0) return undefined;
+		if (this.#railGutter) {
+			// Colored at render time so mode/thinking border colors reach the rail.
+			const rail = this.borderColor(sliceByColumn(`${this.#railGutter} `, 0, gutterWidth, true));
+			return { firstLine: rail, continuation: rail, width: gutterWidth };
+		}
 		return {
-			firstLine: sliceByColumn(this.#promptGutter, 0, gutterWidth, true),
+			firstLine: sliceByColumn(this.#promptGutter ?? "", 0, gutterWidth, true),
 			continuation: padding(gutterWidth),
 			width: gutterWidth,
 		};
@@ -1559,6 +1581,7 @@ export class Editor implements Component, Focusable {
 				inputPrefixWidth: this.#inputPrefixWidth,
 				placeholder: this.#placeholder,
 				promptGutter: this.#promptGutter,
+				railGutter: this.#railGutter,
 				useTerminalCursor: this.#useTerminalCursor,
 				cursorOverride: this.cursorOverride,
 				cursorOverrideWidth: this.cursorOverrideWidth,

package/src/components/sayknow-pet.ts

@@ -433,3 +433,42 @@ export function buildSayknowPixelFrames(options: {
 
 	return { frames, protocol: options.protocol, widthPx, heightPx, columns, rows, rasterRows };
 }
+
+/**
+ * Draw a pet frame as text with half blocks, one terminal row per two pixel rows,
+ * so the same octopus shows up where no pixel protocol is available (the launch
+ * card). Fully transparent pixel rows at the top and bottom are cropped; columns
+ * are kept so every frame of the animation keeps the same width.
+ */
+export function renderPetHalfBlocks(
+	frame: SayknowPixelFrameName,
+	skin: PetSkinId = "red",
+	colorMode: "truecolor" | "256color" = "truecolor",
+): string[] {
+	const grid = PIXEL_GRIDS[frame];
+	const palette = PET_SKINS[skin].palette;
+	const opaque = (row: string): boolean => [...row].some(ch => palette[ch] != null);
+	let top = 0;
+	while (top < grid.length && !opaque(grid[top]!)) top++;
+	let bottom = grid.length - 1;
+	while (bottom > top && !opaque(grid[bottom]!)) bottom--;
+	const format = colorMode === "truecolor" ? "ansi-16m" : "ansi-256";
+	const fg = (rgb: Rgb): string => Bun.color(`rgb(${rgb[0]},${rgb[1]},${rgb[2]})`, format) ?? "";
+	const bg = (rgb: Rgb): string => fg(rgb).replace("\x1b[38;", "\x1b[48;");
+	const lines: string[] = [];
+	for (let row = top; row <= bottom; row += 2) {
+		const upper = grid[row]!;
+		const lower = row + 1 <= bottom ? grid[row + 1]! : "";
+		let line = "";
+		for (let col = 0; col < upper.length; col++) {
+			const up = palette[upper[col]!] ?? null;
+			const down = palette[lower[col] ?? "."] ?? null;
+			if (!up && !down) line += " ";
+			else if (up && down) line += `${fg(up)}${bg(down)}▀\x1b[0m`;
+			else if (up) line += `${fg(up)}▀\x1b[0m`;
+			else line += `${fg(down!)}▄\x1b[0m`;
+		}
+		lines.push(line);
+	}
+	return lines;
+}