@bindtty/renderer-terminal 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,32 @@
+# @bindtty/renderer-terminal
+
+Terminal renderer package for BindTTY.
+
+Renders `LayoutNode` trees into ANSI terminal output:
+
+```
+LayoutNode → Frame → cell diff → ANSI patch string
+```
+
+## Features
+
+- `createTerminalRenderer()` — stateful renderer with previous frame cache
+- `renderer.render(layoutTree, options)` — paint → diff → ANSI
+- `renderer.reset()` — clear previous frame (for resize/clear screen)
+- Default focused inverse style with `focusStyle: "none"` opt-out
+- Cell-level diff for minimal ANSI output
+- Wide-cell frame model for CJK, common emoji, and combining marks
+- Placeholder cells for wide grapheme continuation columns
+
+## Usage
+
+```ts
+import { createTerminalRenderer } from "@bindtty/renderer-terminal";
+
+const renderer = createTerminalRenderer();
+const ansi = renderer.render(layoutTree, {
+  viewport: { width: 80, height: 24 },
+  isFocused: (mounted) => interaction.isFocused(mounted)
+});
+stdout.write(ansi);
+```

package/dist/ansi.d.ts

@@ -0,0 +1,2 @@
+import type { FramePatch } from "./types.js";
+export declare function encodeAnsiPatch(patch: FramePatch): string;

package/dist/ansi.js

@@ -0,0 +1,90 @@
+const RESET = "\x1b[0m";
+const foregroundColors = new Map([
+    ["black", 30],
+    ["red", 31],
+    ["green", 32],
+    ["yellow", 33],
+    ["blue", 34],
+    ["magenta", 35],
+    ["cyan", 36],
+    ["white", 37],
+    ["gray", 90],
+    ["brightBlack", 90],
+    ["brightRed", 91],
+    ["brightGreen", 92],
+    ["brightYellow", 93],
+    ["brightBlue", 94],
+    ["brightMagenta", 95],
+    ["brightCyan", 96],
+    ["brightWhite", 97]
+]);
+const backgroundColors = new Map([
+    ["black", 40],
+    ["red", 41],
+    ["green", 42],
+    ["yellow", 43],
+    ["blue", 44],
+    ["magenta", 45],
+    ["cyan", 46],
+    ["white", 47],
+    ["gray", 100],
+    ["brightBlack", 100],
+    ["brightRed", 101],
+    ["brightGreen", 102],
+    ["brightYellow", 103],
+    ["brightBlue", 104],
+    ["brightMagenta", 105],
+    ["brightCyan", 106],
+    ["brightWhite", 107]
+]);
+export function encodeAnsiPatch(patch) {
+    if (patch.changes.length === 0) {
+        return "";
+    }
+    let output = "";
+    for (const change of [...patch.changes].sort((left, right) => left.y - right.y || left.x - right.x)) {
+        if (change.cell.width === 0) {
+            continue;
+        }
+        output += moveCursor(change.x, change.y);
+        output += RESET;
+        output += encodeStyle(change.cell.style);
+        output += change.cell.char;
+    }
+    return output.length === 0 ? "" : output + RESET;
+}
+function moveCursor(x, y) {
+    return `\x1b[${y + 1};${x + 1}H`;
+}
+function encodeStyle(style) {
+    const codes = [];
+    if (style.bold === true) {
+        codes.push(1);
+    }
+    if (style.dim === true) {
+        codes.push(2);
+    }
+    if (style.italic === true) {
+        codes.push(3);
+    }
+    if (style.underline === true) {
+        codes.push(4);
+    }
+    if (style.inverse === true) {
+        codes.push(7);
+    }
+    if (style.foreground !== undefined) {
+        codes.push(readColorCode(foregroundColors, style.foreground, "foreground"));
+    }
+    if (style.background !== undefined) {
+        codes.push(readColorCode(backgroundColors, style.background, "background"));
+    }
+    return codes.length === 0 ? "" : `\x1b[${codes.join(";")}m`;
+}
+function readColorCode(colors, color, kind) {
+    const code = colors.get(color);
+    if (code === undefined) {
+        throw new Error(`Unsupported ${kind} color: ${color}`);
+    }
+    return code;
+}

package/dist/diff.d.ts

@@ -0,0 +1,2 @@
+import type { Frame, FramePatch } from "./types.js";
+export declare function diffFrames(previous: Frame | null, next: Frame): FramePatch;

package/dist/diff.js

@@ -0,0 +1,140 @@
+export function diffFrames(previous, next) {
+    if (previous === null ||
+        previous.width !== next.width ||
+        previous.height !== next.height) {
+        return createFullFramePatch(next);
+    }
+    const dirtyCells = new Set();
+    for (let y = 0; y < next.height; y += 1) {
+        for (let x = 0; x < next.width; x += 1) {
+            const index = y * next.width + x;
+            const previousCell = previous.cells[index];
+            const nextCell = next.cells[index];
+            if (nextCell && (!previousCell || !cellsEqual(previousCell, nextCell))) {
+                markChangedCell(dirtyCells, previous, next, x, y);
+            }
+        }
+    }
+    const dirtyCoordinates = Array.from(dirtyCells)
+        .map(parseCellKey)
+        .sort((left, right) => left.y - right.y || left.x - right.x);
+    if (!hasVisibleChange(dirtyCoordinates, previous, next)) {
+        return {
+            width: next.width,
+            height: next.height,
+            changes: []
+        };
+    }
+    const changes = dirtyCoordinates
+        .flatMap(({ x, y }) => {
+        const cell = next.cells[y * next.width + x];
+        return cell
+            ? [{
+                    x,
+                    y,
+                    cell: cloneCell(cell)
+                }]
+            : [];
+    });
+    return {
+        width: next.width,
+        height: next.height,
+        changes
+    };
+}
+function hasVisibleChange(coordinates, previous, next) {
+    return coordinates.some(({ x, y }) => {
+        const index = y * next.width + x;
+        const nextCell = next.cells[index];
+        const previousCell = previous.cells[index];
+        return (nextCell !== undefined &&
+            normalizeWidth(nextCell) !== 0 &&
+            (!previousCell || !cellsEqual(previousCell, nextCell)));
+    });
+}
+function createFullFramePatch(frame) {
+    const changes = [];
+    for (let y = 0; y < frame.height; y += 1) {
+        for (let x = 0; x < frame.width; x += 1) {
+            const cell = frame.cells[y * frame.width + x];
+            if (cell) {
+                changes.push({
+                    x,
+                    y,
+                    cell: cloneCell(cell)
+                });
+            }
+        }
+    }
+    return {
+        width: frame.width,
+        height: frame.height,
+        changes
+    };
+}
+function markChangedCell(dirtyCells, previous, next, x, y) {
+    mark(dirtyCells, next, x, y);
+    markWideRange(dirtyCells, previous, x, y);
+    markWideRange(dirtyCells, next, x, y);
+}
+function markWideRange(dirtyCells, frame, x, y) {
+    const cell = frame.cells[y * frame.width + x];
+    if (!cell) {
+        return;
+    }
+    if (cell.width === 2) {
+        mark(dirtyCells, frame, x, y);
+        mark(dirtyCells, frame, x + 1, y);
+        return;
+    }
+    if (cell.width === 0) {
+        mark(dirtyCells, frame, x - 1, y);
+        mark(dirtyCells, frame, x, y);
+    }
+}
+function mark(dirtyCells, frame, x, y) {
+    if (Number.isInteger(x) &&
+        Number.isInteger(y) &&
+        x >= 0 &&
+        y >= 0 &&
+        x < frame.width &&
+        y < frame.height) {
+        dirtyCells.add(`${y}:${x}`);
+    }
+}
+function parseCellKey(key) {
+    const [y, x] = key.split(":").map(Number);
+    return {
+        x: x ?? 0,
+        y: y ?? 0
+    };
+}
+function cellsEqual(left, right) {
+    return (left.char === right.char &&
+        normalizeWidth(left) === normalizeWidth(right) &&
+        stylesEqual(left.style, right.style));
+}
+function stylesEqual(left, right) {
+    return (left.foreground === right.foreground &&
+        left.background === right.background &&
+        normalizeBoolean(left.bold) === normalizeBoolean(right.bold) &&
+        normalizeBoolean(left.dim) === normalizeBoolean(right.dim) &&
+        normalizeBoolean(left.italic) === normalizeBoolean(right.italic) &&
+        normalizeBoolean(left.underline) === normalizeBoolean(right.underline) &&
+        normalizeBoolean(left.inverse) === normalizeBoolean(right.inverse));
+}
+function normalizeBoolean(value) {
+    return value === true;
+}
+function cloneCell(cell) {
+    return {
+        char: cell.char,
+        style: { ...cell.style },
+        width: normalizeWidth(cell)
+    };
+}
+function normalizeWidth(cell) {
+    return cell.width === 0 || cell.width === 1 || cell.width === 2
+        ? cell.width
+        : 1;
+}

package/dist/frame.d.ts

@@ -0,0 +1,13 @@
+import type { Cell, CellStyle, Frame } from "./types.js";
+export declare function createFrame(width: number, height: number): Frame;
+export declare function getCell(frame: Frame, x: number, y: number): Cell | undefined;
+export declare function setCell(frame: Frame, x: number, y: number, cell: Cell): boolean;
+export declare function transformCellStyle(frame: Frame, x: number, y: number, transform: (style: CellStyle) => CellStyle): boolean;
+export declare function writeText(frame: Frame, x: number, y: number, text: string, style?: CellStyle): number;
+export declare function frameToLines(frame: Frame): string[];
+export declare function frameToDebugLines(frame: Frame): string[];
+export declare function createBlankCell(style?: CellStyle): Cell;
+export declare function createTextCell(text: string, width: 1 | 2, style?: CellStyle): Cell;
+export declare function createPlaceholderCell(style?: CellStyle): Cell;
+export declare function isPlaceholderCell(cell: Cell): boolean;
+export declare function isWideLeadingCell(cell: Cell): boolean;

package/dist/frame.js

@@ -0,0 +1,227 @@
+import { segmentText } from "@bindtty/text";
+export function createFrame(width, height) {
+    const normalizedWidth = toNonNegativeInteger(width);
+    const normalizedHeight = toNonNegativeInteger(height);
+    const cellCount = normalizedWidth * normalizedHeight;
+    const cells = [];
+    for (let index = 0; index < cellCount; index += 1) {
+        cells.push(createBlankCell());
+    }
+    return {
+        width: normalizedWidth,
+        height: normalizedHeight,
+        cells
+    };
+}
+export function getCell(frame, x, y) {
+    if (!isInsideFrame(frame, x, y)) {
+        return undefined;
+    }
+    return frame.cells[getCellIndex(frame, x, y)];
+}
+export function setCell(frame, x, y, cell) {
+    if (!isInsideFrame(frame, x, y)) {
+        return false;
+    }
+    const clonedCell = cloneCell(cell);
+    const width = clonedCell.width ?? 1;
+    if (width === 0) {
+        throw new Error("Invalid placeholder cell: use wide text writes to create placeholders");
+    }
+    if (width > 1 && x + width > frame.width) {
+        throw new Error("Invalid wide cell: cell width exceeds frame bounds");
+    }
+    clearCellsForWrite(frame, x, y, width);
+    setCellRaw(frame, x, y, clonedCell);
+    for (let offset = 1; offset < width; offset += 1) {
+        setCellRaw(frame, x + offset, y, createPlaceholderCell(clonedCell.style));
+    }
+    return true;
+}
+export function transformCellStyle(frame, x, y, transform) {
+    const cell = getCell(frame, x, y);
+    if (!cell) {
+        return false;
+    }
+    setCellRaw(frame, x, y, {
+        char: cell.char,
+        style: transform(cell.style),
+        width: cell.width
+    });
+    return true;
+}
+export function writeText(frame, x, y, text, style = {}) {
+    const firstLine = text.split("\n", 1)[0] ?? "";
+    let written = 0;
+    let cursorX = x;
+    for (const segment of segmentText(firstLine)) {
+        if (segment.width <= 0) {
+            continue;
+        }
+        if (canDrawWholeSegment(frame, cursorX, y, segment.width)) {
+            clearCellsForWrite(frame, cursorX, y, segment.width);
+            setCellRaw(frame, cursorX, y, {
+                char: segment.text,
+                style,
+                width: segment.width
+            });
+            for (let offset = 1; offset < segment.width; offset += 1) {
+                setCellRaw(frame, cursorX + offset, y, createPlaceholderCell(style));
+            }
+            written += segment.width;
+        }
+        cursorX += segment.width;
+    }
+    return written;
+}
+export function frameToLines(frame) {
+    const lines = [];
+    for (let y = 0; y < frame.height; y += 1) {
+        let line = "";
+        for (let x = 0; x < frame.width; x += 1) {
+            const cell = getCell(frame, x, y);
+            line += cell?.width === 0 ? "" : cell?.char ?? " ";
+        }
+        lines.push(line);
+    }
+    return lines;
+}
+export function frameToDebugLines(frame) {
+    const lines = [];
+    for (let y = 0; y < frame.height; y += 1) {
+        let line = "";
+        for (let x = 0; x < frame.width; x += 1) {
+            const cell = getCell(frame, x, y);
+            line += cell?.width === 0 ? "·" : cell?.char ?? " ";
+        }
+        lines.push(line);
+    }
+    return lines;
+}
+export function createBlankCell(style = {}) {
+    return {
+        char: " ",
+        style: cloneStyle(style),
+        width: 1
+    };
+}
+export function createTextCell(text, width, style = {}) {
+    assertValidCell(text, width);
+    return {
+        char: text,
+        style: cloneStyle(style),
+        width
+    };
+}
+export function createPlaceholderCell(style = {}) {
+    return {
+        char: "",
+        style: cloneStyle(style),
+        width: 0
+    };
+}
+export function isPlaceholderCell(cell) {
+    return cell.width === 0;
+}
+export function isWideLeadingCell(cell) {
+    return cell.width === 2;
+}
+function cloneCell(cell) {
+    const width = normalizeWidth(cell);
+    const char = width === 0 ? cell.char : normalizeChar(cell.char);
+    assertValidCell(char, width);
+    return {
+        char: width === 0 ? "" : char,
+        style: cloneStyle(cell.style),
+        width
+    };
+}
+function cloneStyle(style) {
+    return { ...style };
+}
+function setCellRaw(frame, x, y, cell) {
+    if (!isInsideFrame(frame, x, y)) {
+        return false;
+    }
+    const clonedCell = cloneCell(cell);
+    const width = clonedCell.width ?? 1;
+    if (width > 1 && x + width > frame.width) {
+        throw new Error("Invalid wide cell: cell width exceeds frame bounds");
+    }
+    frame.cells[getCellIndex(frame, x, y)] = clonedCell;
+    return true;
+}
+function normalizeChar(char) {
+    return char.length > 0 ? char : " ";
+}
+function normalizeWidth(cell) {
+    if (cell.width === 0 || cell.width === 1 || cell.width === 2) {
+        return cell.width;
+    }
+    return 1;
+}
+function assertValidCell(char, width) {
+    if (width === 0) {
+        if (char !== "") {
+            throw new Error("Invalid placeholder cell: char must be empty");
+        }
+        return;
+    }
+    const segments = segmentText(char);
+    if (segments.length !== 1) {
+        throw new Error("Invalid text cell: char must be a single grapheme");
+    }
+    const [segment] = segments;
+    if (!segment || segment.width !== width) {
+        throw new Error(`Invalid text cell: char display width ${segment?.width ?? 0} does not match cell width ${width}`);
+    }
+}
+function canDrawWholeSegment(frame, x, y, width) {
+    return (Number.isInteger(x) &&
+        Number.isInteger(y) &&
+        y >= 0 &&
+        y < frame.height &&
+        x >= 0 &&
+        x + width <= frame.width);
+}
+function clearCellsForWrite(frame, x, y, width) {
+    for (let col = x; col < x + width; col += 1) {
+        clearWideCellAt(frame, col, y);
+    }
+}
+function clearWideCellAt(frame, x, y) {
+    const cell = getCell(frame, x, y);
+    if (!cell) {
+        return;
+    }
+    if (cell.width === 2) {
+        setCellRaw(frame, x, y, createBlankCell());
+        setCellRaw(frame, x + 1, y, createBlankCell());
+        return;
+    }
+    if (cell.width === 0) {
+        const leadingX = findWideLeadingCell(frame, x, y);
+        if (leadingX !== null) {
+            setCellRaw(frame, leadingX, y, createBlankCell());
+            setCellRaw(frame, leadingX + 1, y, createBlankCell());
+        }
+    }
+}
+function findWideLeadingCell(frame, x, y) {
+    const previous = getCell(frame, x - 1, y);
+    return previous?.width === 2 ? x - 1 : null;
+}
+function getCellIndex(frame, x, y) {
+    return y * frame.width + x;
+}
+function isInsideFrame(frame, x, y) {
+    return (Number.isInteger(x) &&
+        Number.isInteger(y) &&
+        x >= 0 &&
+        y >= 0 &&
+        x < frame.width &&
+        y < frame.height);
+}
+function toNonNegativeInteger(value) {
+    return Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { createBlankCell, createFrame, createPlaceholderCell, createTextCell, frameToDebugLines, frameToLines, getCell, isPlaceholderCell, isWideLeadingCell, setCell, writeText } from "./frame.js";
+export { encodeAnsiPatch } from "./ansi.js";
+export { diffFrames } from "./diff.js";
+export { paintLayout } from "./paint.js";
+export { createTerminalRenderer } from "./renderer.js";
+export type { Cell, CellChange, CellStyle, Frame, FramePatch, RenderOptions, TerminalRenderer } from "./types.js";
+export type { PaintOptions } from "./paint.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+export { createBlankCell, createFrame, createPlaceholderCell, createTextCell, frameToDebugLines, frameToLines, getCell, isPlaceholderCell, isWideLeadingCell, setCell, writeText } from "./frame.js";
+export { encodeAnsiPatch } from "./ansi.js";
+export { diffFrames } from "./diff.js";
+export { paintLayout } from "./paint.js";
+export { createTerminalRenderer } from "./renderer.js";

package/dist/paint.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutNode, LayoutViewport } from "@bindtty/layout";
+import type { Frame } from "./types.js";
+export interface PaintOptions {
+    viewport: LayoutViewport;
+    isFocused?: (mounted: LayoutNode["mounted"]) => boolean;
+}
+export declare function paintLayout(root: LayoutNode | null, options: PaintOptions): Frame;

package/dist/paint.js

@@ -0,0 +1,240 @@
+import { layoutText, readTextWrapMode, segmentText } from "@bindtty/text";
+import { createFrame, getCell, setCell, transformCellStyle } from "./frame.js";
+import { readPaintStyle, toBorderCellStyle, toCellStyle } from "./style.js";
+const BORDER = {
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+    horizontal: "─",
+    vertical: "│"
+};
+export function paintLayout(root, options) {
+    const frame = createFrame(options.viewport.width, options.viewport.height);
+    if (root) {
+        paintNode(frame, root, options, {
+            clip: {
+                x: 0,
+                y: 0,
+                width: options.viewport.width,
+                height: options.viewport.height
+            },
+            offsetX: 0,
+            offsetY: 0
+        });
+    }
+    return frame;
+}
+function paintNode(frame, node, options, context) {
+    const mounted = node.mounted;
+    const childContext = createChildContext(node, context);
+    if (mounted.kind !== "element") {
+        paintChildren(frame, node, options, childContext);
+        return;
+    }
+    switch (mounted.tag) {
+        case "screen":
+        case "vstack":
+        case "hstack":
+            paintChildren(frame, node, options, childContext);
+            paintFocusedState(frame, node, options, context);
+            return;
+        case "box":
+            paintBox(frame, node, mounted, context);
+            paintChildren(frame, node, options, childContext);
+            paintFocusedState(frame, node, options, context);
+            return;
+        case "text":
+            paintText(frame, node, mounted, context);
+            paintFocusedState(frame, node, options, context);
+            return;
+        case "spacer":
+            paintFocusedState(frame, node, options, context);
+            return;
+        case "button":
+        case "input":
+            throw new Error(`Unsupported paint element: ${mounted.tag}`);
+    }
+}
+function paintChildren(frame, node, options, context) {
+    for (const child of node.children) {
+        paintNode(frame, child, options, context);
+    }
+}
+function paintText(frame, node, mounted, context) {
+    if (node.rect.width <= 0 || node.rect.height <= 0) {
+        return;
+    }
+    const value = mounted.props.value;
+    const text = value === null || value === undefined ? "" : String(value);
+    const wrap = readTextWrapMode(mounted.props.wrap);
+    const textLayout = layoutText(text, {
+        width: node.rect.width,
+        wrap
+    });
+    const lines = textLayout.lines.slice(0, node.rect.height);
+    const style = toCellStyle(readPaintStyle(mounted.props));
+    for (let row = 0; row < lines.length; row += 1) {
+        writeTextClipped(frame, node.rect.x + context.offsetX, node.rect.y + row + context.offsetY, lines[row] ?? "", node.rect.width, style, context);
+    }
+}
+function paintBox(frame, node, mounted, context) {
+    const style = readPaintStyle(mounted.props);
+    if (style.background !== undefined) {
+        fillRect(frame, offsetRect(node.rect, context), {
+            background: style.background
+        }, context);
+    }
+    if (shouldPaintBorder(style.border)) {
+        paintBorder(frame, offsetRect(node.rect, context), toBorderCellStyle(style), context);
+    }
+}
+function fillRect(frame, rect, style, context) {
+    for (let y = rect.y; y < rect.y + rect.height; y += 1) {
+        for (let x = rect.x; x < rect.x + rect.width; x += 1) {
+            setCellClipped(frame, x, y, {
+                char: " ",
+                style,
+                width: 1
+            }, context);
+        }
+    }
+}
+function paintBorder(frame, rect, style, context) {
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) {
+        return;
+    }
+    if (width === 1) {
+        for (let row = y; row < y + height; row += 1) {
+            paintChar(frame, x, row, BORDER.vertical, style, context);
+        }
+        return;
+    }
+    if (height === 1) {
+        for (let col = x; col < x + width; col += 1) {
+            paintChar(frame, col, y, BORDER.horizontal, style, context);
+        }
+        return;
+    }
+    paintChar(frame, x, y, BORDER.topLeft, style, context);
+    paintChar(frame, x + width - 1, y, BORDER.topRight, style, context);
+    paintChar(frame, x, y + height - 1, BORDER.bottomLeft, style, context);
+    paintChar(frame, x + width - 1, y + height - 1, BORDER.bottomRight, style, context);
+    for (let col = x + 1; col < x + width - 1; col += 1) {
+        paintChar(frame, col, y, BORDER.horizontal, style, context);
+        paintChar(frame, col, y + height - 1, BORDER.horizontal, style, context);
+    }
+    for (let row = y + 1; row < y + height - 1; row += 1) {
+        paintChar(frame, x, row, BORDER.vertical, style, context);
+        paintChar(frame, x + width - 1, row, BORDER.vertical, style, context);
+    }
+}
+function paintChar(frame, x, y, char, style, context) {
+    setCellClipped(frame, x, y, {
+        char,
+        style,
+        width: 1
+    }, context);
+}
+function shouldPaintBorder(border) {
+    if (typeof border === "number") {
+        return border > 0;
+    }
+    return border === true;
+}
+function paintFocusedState(frame, node, options, context) {
+    if (options.isFocused?.(node.mounted) !== true) {
+        return;
+    }
+    if (node.mounted.kind === "element" &&
+        readPaintStyle(node.mounted.props).focusStyle === "none") {
+        return;
+    }
+    const { x, y, width, height } = offsetRect(node.rect, context);
+    for (let row = y; row < y + height; row += 1) {
+        for (let col = x; col < x + width; col += 1) {
+            if (!isInsideRect(context.clip, col, row)) {
+                continue;
+            }
+            const cell = getCell(frame, col, row);
+            if (cell) {
+                transformCellStyle(frame, col, row, (style) => ({
+                    ...style,
+                    inverse: true
+                }));
+            }
+        }
+    }
+}
+function writeTextClipped(frame, x, y, text, maxWidth, style, context) {
+    let written = 0;
+    let cursorX = x;
+    let usedWidth = 0;
+    for (const segment of segmentText(text)) {
+        if (segment.width <= 0) {
+            continue;
+        }
+        if (usedWidth + segment.width > maxWidth) {
+            break;
+        }
+        if (canDrawWholeSegment(cursorX, y, segment.width, context.clip)) {
+            setCellClipped(frame, cursorX, y, {
+                char: segment.text,
+                style,
+                width: segment.width
+            }, context);
+            written += segment.width;
+        }
+        cursorX += segment.width;
+        usedWidth += segment.width;
+    }
+    return written;
+}
+function canDrawWholeSegment(x, y, width, clip) {
+    return (y >= clip.y &&
+        y < clip.y + clip.height &&
+        x >= clip.x &&
+        x + width <= clip.x + clip.width);
+}
+function setCellClipped(frame, x, y, cell, context) {
+    if (!isInsideRect(context.clip, x, y)) {
+        return false;
+    }
+    return setCell(frame, x, y, cell);
+}
+function createChildContext(node, context) {
+    const nodeClip = node.clip ? offsetRect(node.clip, context) : context.clip;
+    const clip = intersectRects(context.clip, nodeClip);
+    return {
+        clip,
+        offsetX: context.offsetX - (node.scrollOffset?.x ?? 0),
+        offsetY: context.offsetY - (node.scrollOffset?.y ?? 0)
+    };
+}
+function offsetRect(rect, context) {
+    return {
+        x: rect.x + context.offsetX,
+        y: rect.y + context.offsetY,
+        width: rect.width,
+        height: rect.height
+    };
+}
+function intersectRects(first, second) {
+    const x = Math.max(first.x, second.x);
+    const y = Math.max(first.y, second.y);
+    const right = Math.min(first.x + first.width, second.x + second.width);
+    const bottom = Math.min(first.y + first.height, second.y + second.height);
+    return {
+        x,
+        y,
+        width: Math.max(0, right - x),
+        height: Math.max(0, bottom - y)
+    };
+}
+function isInsideRect(rect, x, y) {
+    return (x >= rect.x &&
+        y >= rect.y &&
+        x < rect.x + rect.width &&
+        y < rect.y + rect.height);
+}

package/dist/renderer.d.ts

@@ -0,0 +1,2 @@
+import type { TerminalRenderer } from "./types.js";
+export declare function createTerminalRenderer(): TerminalRenderer;

package/dist/renderer.js

@@ -0,0 +1,18 @@
+import { encodeAnsiPatch } from "./ansi.js";
+import { diffFrames } from "./diff.js";
+import { paintLayout } from "./paint.js";
+export function createTerminalRenderer() {
+    let previousFrame = null;
+    return {
+        render(root, options) {
+            const nextFrame = paintLayout(root, options);
+            const patch = diffFrames(previousFrame, nextFrame);
+            const ansi = encodeAnsiPatch(patch);
+            previousFrame = nextFrame;
+            return ansi;
+        },
+        reset() {
+            previousFrame = null;
+        }
+    };
+}

package/dist/style.d.ts

@@ -0,0 +1,9 @@
+import type { CellStyle } from "./types.js";
+export interface PaintStyle extends CellStyle {
+    border?: boolean | number;
+    borderColor?: string;
+    focusStyle?: "inverse" | "none";
+}
+export declare function readPaintStyle(props: Record<string, unknown>): PaintStyle;
+export declare function toCellStyle(style: PaintStyle): CellStyle;
+export declare function toBorderCellStyle(style: PaintStyle): CellStyle;

package/dist/style.js

@@ -0,0 +1,87 @@
+const kebabStyleAliases = new Map([
+    ["border-color", "borderColor"]
+]);
+export function readPaintStyle(props) {
+    const normalized = normalizePaintProps(props);
+    const style = {};
+    const color = readString(normalized, "color");
+    const foreground = readString(normalized, "foreground");
+    if (color !== undefined && foreground !== undefined) {
+        throw new Error("Duplicate paint prop: foreground / color");
+    }
+    if (color !== undefined) {
+        style.foreground = color;
+    }
+    if (foreground !== undefined) {
+        style.foreground = foreground;
+    }
+    setStringStyle(style, normalized, "background");
+    setStringStyle(style, normalized, "borderColor");
+    setBooleanStyle(style, normalized, "bold");
+    setBooleanStyle(style, normalized, "dim");
+    setBooleanStyle(style, normalized, "italic");
+    setBooleanStyle(style, normalized, "underline");
+    setBooleanStyle(style, normalized, "inverse");
+    const focusStyle = normalized.focusStyle;
+    if (focusStyle === "inverse" || focusStyle === "none") {
+        style.focusStyle = focusStyle;
+    }
+    const border = normalized.border;
+    if (typeof border === "boolean" || typeof border === "number") {
+        style.border = border;
+    }
+    return style;
+}
+export function toCellStyle(style) {
+    const cellStyle = {};
+    setDefinedString(cellStyle, "foreground", style.foreground);
+    setDefinedString(cellStyle, "background", style.background);
+    setTrueBoolean(cellStyle, "bold", style.bold);
+    setTrueBoolean(cellStyle, "dim", style.dim);
+    setTrueBoolean(cellStyle, "italic", style.italic);
+    setTrueBoolean(cellStyle, "underline", style.underline);
+    setTrueBoolean(cellStyle, "inverse", style.inverse);
+    return cellStyle;
+}
+export function toBorderCellStyle(style) {
+    return {
+        ...toCellStyle(style),
+        ...(style.borderColor === undefined ? {} : { foreground: style.borderColor })
+    };
+}
+function normalizePaintProps(props) {
+    const normalized = {};
+    for (const [name, value] of Object.entries(props)) {
+        const canonicalName = kebabStyleAliases.get(name) ?? name;
+        if (canonicalName in normalized && canonicalName !== name) {
+            throw new Error(`Duplicate paint prop: ${canonicalName} / ${name}`);
+        }
+        normalized[canonicalName] = value;
+    }
+    return normalized;
+}
+function readString(props, name) {
+    const value = props[name];
+    return typeof value === "string" ? value : undefined;
+}
+function setStringStyle(style, props, name) {
+    const value = readString(props, name);
+    if (value !== undefined) {
+        style[name] = value;
+    }
+}
+function setBooleanStyle(style, props, name) {
+    if (props[name] === true) {
+        style[name] = true;
+    }
+}
+function setDefinedString(style, name, value) {
+    if (value !== undefined) {
+        style[name] = value;
+    }
+}
+function setTrueBoolean(style, name, value) {
+    if (value === true) {
+        style[name] = true;
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+export interface Frame {
+    width: number;
+    height: number;
+    cells: Cell[];
+}
+export interface Cell {
+    char: string;
+    style: CellStyle;
+    width?: 0 | 1 | 2;
+}
+export interface CellStyle {
+    foreground?: string;
+    background?: string;
+    bold?: boolean;
+    dim?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    inverse?: boolean;
+}
+export interface FramePatch {
+    width: number;
+    height: number;
+    changes: CellChange[];
+}
+export interface CellChange {
+    x: number;
+    y: number;
+    cell: Cell;
+}
+export interface RenderOptions {
+    viewport: {
+        width: number;
+        height: number;
+    };
+    isFocused?: (mounted: import("@bindtty/vnode").MountedNode) => boolean;
+}
+export interface TerminalRenderer {
+    render(root: import("@bindtty/layout").LayoutNode | null, options: RenderOptions): string;
+    reset(): void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@bindtty/renderer-terminal",
+  "version": "0.1.0-alpha.1",
+  "type": "module",
+  "description": "Terminal renderer package for BindTTY.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build",
+    "test": "npm run build --workspace @bindtty/text && npm run build --workspace @bindtty/layout && npm run build && tsc -p test/tsconfig.json && node --test test/dist/*.test.js"
+  },
+  "dependencies": {
+    "@bindtty/layout": "0.1.0-alpha.1",
+    "@bindtty/text": "0.1.0-alpha.1"
+  },
+  "devDependencies": {
+    "@bindtty/signal": "0.1.0-alpha.1",
+    "@bindtty/vnode": "0.1.0-alpha.1",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lithdoo/BindTTY.git",
+    "directory": "packages/renderer-terminal"
+  },
+  "bugs": {
+    "url": "https://github.com/lithdoo/BindTTY/issues"
+  },
+  "homepage": "https://github.com/lithdoo/BindTTY/tree/main/packages/renderer-terminal#readme"
+}