tinky 1.6.0 → 1.7.0

package/lib/core/cell-buffer.d.ts

@@ -4,11 +4,7 @@
  * This stores terminal cells in compact parallel arrays and keeps ANSI styles
  * as small numeric IDs via StyleRegistry.
  */
-export interface AnsiCode {
-    type: "ansi";
-    code: string;
-    endCode: string;
-}
+import { type AnsiCode } from "../types/ansi.js";
 export interface CellBufferSize {
     width: number;
     height: number;
@@ -45,6 +41,11 @@ export declare class CellBuffer {
      * Marks whether trailing spaces on a touched cell should be preserved.
      */
     preserveTrailingSpace: Uint8Array;
+    /**
+     * Marks whether a row has been touched by any write operation.
+     * Used to optimize isRowEqual/diffing.
+     */
+    rowTouched: Uint8Array;
     constructor(size?: CellBufferSize, styleRegistry?: StyleRegistry);
     resize(width: number, height: number): void;
     clear(styleId?: number): void;
@@ -53,6 +54,7 @@ export declare class CellBuffer {
      */
     index(x: number, y: number): number;
     setCell(x: number, y: number, ch: string, charWidth: number, styleId: number, preserveTrailing?: boolean): void;
+    fill(x: number, y: number, length: number, char: string, charWidth: number, styleId: number): void;
     isRowEqual(other: CellBuffer, row: number): boolean;
     isEqual(other: CellBuffer): boolean;
     /**

package/lib/core/cell-buffer.js

@@ -69,6 +69,11 @@ export class CellBuffer {
      * Marks whether trailing spaces on a touched cell should be preserved.
      */
     preserveTrailingSpace = new Uint8Array(0);
+    /**
+     * Marks whether a row has been touched by any write operation.
+     * Used to optimize isRowEqual/diffing.
+     */
+    rowTouched = new Uint8Array(0);
     constructor(size = { width: 0, height: 0 }, styleRegistry) {
         this.styleRegistry = styleRegistry ?? new StyleRegistry();
         this.resize(size.width, size.height);
@@ -88,6 +93,7 @@ export class CellBuffer {
         this.styleIds = new Uint32Array(size);
         this.touched = new Uint8Array(size);
         this.preserveTrailingSpace = new Uint8Array(size);
+        this.rowTouched = new Uint8Array(nextHeight);
     }
     clear(styleId = 0) {
         const size = this.width * this.height;
@@ -96,6 +102,13 @@ export class CellBuffer {
         this.styleIds.fill(styleId, 0, size);
         this.touched.fill(0, 0, size);
         this.preserveTrailingSpace.fill(0, 0, size);
+        // Only rows with default style (0) are considered "untouched" for optimization
+        if (styleId === 0) {
+            this.rowTouched.fill(0);
+        }
+        else {
+            this.rowTouched.fill(1);
+        }
     }
     /**
      * Converts `(x, y)` coordinates to a linear index in parallel arrays.
@@ -117,6 +130,7 @@ export class CellBuffer {
         this.styleIds[cellIndex] = styleId;
         this.touched[cellIndex] = 1;
         this.preserveTrailingSpace[cellIndex] = preserveTrailing ? 1 : 0;
+        this.rowTouched[y] = 1;
         if (width > 1) {
             for (let i = 1; i < width; i++) {
                 const continuationIndex = cellIndex + i;
@@ -130,6 +144,33 @@ export class CellBuffer {
             }
         }
     }
+    fill(x, y, length, char, charWidth, styleId) {
+        if (y < 0 || y >= this.height || length <= 0) {
+            return;
+        }
+        const startX = Math.max(0, x);
+        const endX = Math.min(this.width, x + length);
+        const fillLength = endX - startX;
+        if (fillLength <= 0) {
+            return;
+        }
+        const start = this.index(startX, y);
+        // Optimized path for single-width characters (common for background/borders)
+        if (charWidth === 1) {
+            const end = start + fillLength;
+            this.chars.fill(char, start, end);
+            this.widths.fill(1, start, end);
+            this.styleIds.fill(styleId, start, end);
+            this.touched.fill(1, start, end);
+            this.preserveTrailingSpace.fill(0, start, end);
+            this.rowTouched[y] = 1;
+            return;
+        }
+        // Fallback for multi-width characters
+        for (let i = 0; i < fillLength; i += charWidth) {
+            this.setCell(startX + i, y, char, charWidth, styleId, false);
+        }
+    }
     isRowEqual(other, row) {
         if (this.width !== other.width || this.height !== other.height) {
             return false;
@@ -137,8 +178,20 @@ export class CellBuffer {
         if (row < 0 || row >= this.height) {
             return false;
         }
+        // Optimization: if both rows are untouched (empty/default), they are equal
+        if (!this.rowTouched[row] && !other.rowTouched[row]) {
+            return true;
+        }
+        const thisRightEdge = this.getRowRightEdge(row);
+        const otherRightEdge = other.getRowRightEdge(row);
+        if (thisRightEdge !== otherRightEdge) {
+            return false;
+        }
+        if (thisRightEdge === 0) {
+            return true;
+        }
         const start = row * this.width;
-        const end = start + this.width;
+        const end = start + thisRightEdge;
         for (let index = start; index < end; index++) {
             if (this.styleIds[index] !== other.styleIds[index]) {
                 return false;
@@ -149,12 +202,6 @@ export class CellBuffer {
             if (this.chars[index] !== other.chars[index]) {
                 return false;
             }
-            if (this.touched[index] !== other.touched[index]) {
-                return false;
-            }
-            if (this.preserveTrailingSpace[index] !== other.preserveTrailingSpace[index]) {
-                return false;
-            }
         }
         return true;
     }
@@ -180,6 +227,9 @@ export class CellBuffer {
         if (row < 0 || row >= this.height) {
             return 0;
         }
+        if (!this.rowTouched[row]) {
+            return 0;
+        }
         const offset = row * width;
         for (let x = width - 1; x >= 0; x--) {
             const index = offset + x;
@@ -279,10 +329,18 @@ export class CellBuffer {
      * Serializes the entire buffer into a multi-line ANSI string.
      */
     toString() {
-        const lines = [];
+        const out = [];
         for (let row = 0; row < this.height; row++) {
-            lines.push(this.serializeRow(row));
+            if (row > 0) {
+                out.push("\n");
+            }
+            const rightEdge = this.getRowRightEdge(row);
+            if (rightEdge === 0) {
+                continue;
+            }
+            const { activeStyleId } = this.appendStyledRange(row, 0, rightEdge, out, 0, 0);
+            this.appendCloseActiveStyle(out, activeStyleId);
         }
-        return lines.join("\n");
+        return out.join("");
     }
 }

package/lib/core/cell-log-update-run.d.ts

@@ -4,7 +4,8 @@ import { type CellBuffer } from "./cell-buffer.js";
  * Run-diff renderer for interactive terminal output.
  *
  * Compared with line-diff mode, this renderer diffs cell buffers and emits
- * minimal cursor movement + text writes for changed runs.
+ * minimal cursor movement + text writes for changed runs. It entirely skips
+ * terminal writes when consecutive frames are identical.
  */
 export interface CellLogUpdateRunOptions {
     /** Enables diff updates. Set `false` to force full-frame redraws. */

package/lib/core/cell-log-update-run.js

@@ -348,29 +348,24 @@ const create = (stream, options = {}) => {
         const prevCount = previousHeight + 1;
         const nextCount = nextHeight + 1;
         const visibleCount = nextHeight;
-        const chunks = [];
-        if (nextCount < prevCount) {
-            chunks.push(ansiEscapes.eraseLines(prevCount - nextCount + 1));
-            chunks.push(ansiEscapes.cursorUp(visibleCount));
-        }
-        else {
-            chunks.push(ansiEscapes.cursorUp(prevCount - 1));
-        }
+        const rowChunks = [];
+        let hasDiff = false;
         const width = nextBuffer.width;
         // Incremental path: process one row at a time and emit minimal writes.
         for (let row = 0; row < visibleCount; row++) {
             if (prevBuffer.isRowEqual(nextBuffer, row)) {
-                chunks.push(ansiEscapes.cursorNextLine);
+                rowChunks.push(ansiEscapes.cursorNextLine);
                 continue;
             }
-            chunks.push(cursorToColumn(0));
+            hasDiff = true;
+            rowChunks.push(cursorToColumn(0));
             const nextEnd = nextBuffer.getRowRightEdge(row);
             const prevEnd = prevBuffer.getRowRightEdge(row);
             const tailClear = prevEnd > nextEnd;
             const scanEnd = tailClear ? nextEnd : Math.max(nextEnd, prevEnd);
             if (scanEnd === 0 && tailClear) {
-                chunks.push(ansiEscapes.eraseEndLine);
-                chunks.push(ansiEscapes.cursorNextLine);
+                rowChunks.push(ansiEscapes.eraseEndLine);
+                rowChunks.push(ansiEscapes.cursorNextLine);
                 continue;
             }
             let segments = computeSegments(prevBuffer, nextBuffer, row, scanEnd);
@@ -378,20 +373,20 @@ const create = (stream, options = {}) => {
                 segments = mergeByGapThreshold(segments, mergeThreshold);
             }
             if (segments.length > maxSegmentsBeforeFullRow) {
-                const full = nextBuffer.appendStyledRange(row, 0, nextEnd, chunks, 0, 0);
+                const full = nextBuffer.appendStyledRange(row, 0, nextEnd, rowChunks, 0, 0);
                 let activeStyleId = full.activeStyleId;
-                activeStyleId = nextBuffer.appendCloseActiveStyle(chunks, activeStyleId);
+                activeStyleId = nextBuffer.appendCloseActiveStyle(rowChunks, activeStyleId);
                 if (tailClear) {
-                    chunks.push(ansiEscapes.eraseEndLine);
+                    rowChunks.push(ansiEscapes.eraseEndLine);
                 }
-                chunks.push(ansiEscapes.cursorNextLine);
+                rowChunks.push(ansiEscapes.cursorNextLine);
                 continue;
             }
             if (segments.length === 0) {
                 if (tailClear) {
-                    chunks.push(ansiEscapes.eraseEndLine);
+                    rowChunks.push(ansiEscapes.eraseEndLine);
                 }
-                chunks.push(ansiEscapes.cursorNextLine);
+                rowChunks.push(ansiEscapes.cursorNextLine);
                 continue;
             }
             let cursorX = 0;
@@ -399,14 +394,14 @@ const create = (stream, options = {}) => {
             if (mergeStrategy === "cost") {
                 const plan = planRowOpsWithCostModel(nextBuffer, styleLenCache, row, segments, nextEnd, tailClear, overwriteGapPenaltyBytes);
                 if (plan.useFullRow) {
-                    const full = nextBuffer.appendStyledRange(row, 0, nextEnd, chunks, activeStyleId, cursorX);
+                    const full = nextBuffer.appendStyledRange(row, 0, nextEnd, rowChunks, activeStyleId, cursorX);
                     cursorX = full.cursorX;
                     activeStyleId = full.activeStyleId;
-                    activeStyleId = nextBuffer.appendCloseActiveStyle(chunks, activeStyleId);
+                    activeStyleId = nextBuffer.appendCloseActiveStyle(rowChunks, activeStyleId);
                     if (tailClear) {
-                        chunks.push(ansiEscapes.eraseEndLine);
+                        rowChunks.push(ansiEscapes.eraseEndLine);
                     }
-                    chunks.push(ansiEscapes.cursorNextLine);
+                    rowChunks.push(ansiEscapes.cursorNextLine);
                     continue;
                 }
                 for (const op of plan.ops) {
@@ -418,15 +413,15 @@ const create = (stream, options = {}) => {
                         }
                         if (delta > 0) {
                             if (op.method === "abs") {
-                                chunks.push(cursorToColumn(toX));
+                                rowChunks.push(cursorToColumn(toX));
                             }
                             else {
-                                chunks.push(cursorForward(delta));
+                                rowChunks.push(cursorForward(delta));
                             }
                             cursorX = toX;
                         }
                         else {
-                            chunks.push(cursorToColumn(toX));
+                            rowChunks.push(cursorToColumn(toX));
                             cursorX = toX;
                         }
                         continue;
@@ -442,14 +437,14 @@ const create = (stream, options = {}) => {
                     if (start !== cursorX) {
                         const move = chooseHorizontalMove(cursorX, start);
                         if (move.method === "abs") {
-                            chunks.push(cursorToColumn(start));
+                            rowChunks.push(cursorToColumn(start));
                         }
                         else {
-                            chunks.push(cursorForward(start - cursorX));
+                            rowChunks.push(cursorForward(start - cursorX));
                         }
                         cursorX = start;
                     }
-                    const result = nextBuffer.appendStyledRange(row, start, end, chunks, activeStyleId, cursorX);
+                    const result = nextBuffer.appendStyledRange(row, start, end, rowChunks, activeStyleId, cursorX);
                     cursorX = result.cursorX;
                     activeStyleId = result.activeStyleId;
                 }
@@ -466,33 +461,46 @@ const create = (stream, options = {}) => {
                     }
                     const delta = segStart - cursorX;
                     if (delta > 0) {
-                        chunks.push(cursorForward(delta));
+                        rowChunks.push(cursorForward(delta));
                         cursorX = segStart;
                     }
                     else if (delta < 0) {
-                        chunks.push(cursorToColumn(segStart));
+                        rowChunks.push(cursorToColumn(segStart));
                         cursorX = segStart;
                     }
-                    const result = nextBuffer.appendStyledRange(row, segStart, segEnd, chunks, activeStyleId, cursorX);
+                    const result = nextBuffer.appendStyledRange(row, segStart, segEnd, rowChunks, activeStyleId, cursorX);
                     cursorX = result.cursorX;
                     activeStyleId = result.activeStyleId;
                 }
             }
-            activeStyleId = nextBuffer.appendCloseActiveStyle(chunks, activeStyleId);
+            activeStyleId = nextBuffer.appendCloseActiveStyle(rowChunks, activeStyleId);
             if (tailClear) {
                 if (cursorX !== nextEnd) {
                     const move = chooseHorizontalMove(cursorX, nextEnd);
                     if (move.method === "abs") {
-                        chunks.push(cursorToColumn(nextEnd));
+                        rowChunks.push(cursorToColumn(nextEnd));
                     }
                     else {
-                        chunks.push(cursorForward(Math.max(0, nextEnd - cursorX)));
+                        rowChunks.push(cursorForward(Math.max(0, nextEnd - cursorX)));
                     }
                 }
-                chunks.push(ansiEscapes.eraseEndLine);
+                rowChunks.push(ansiEscapes.eraseEndLine);
             }
-            chunks.push(ansiEscapes.cursorNextLine);
+            rowChunks.push(ansiEscapes.cursorNextLine);
+        }
+        if (!hasDiff && nextCount === prevCount) {
+            previousHeight = nextHeight;
+            return;
+        }
+        const chunks = [];
+        if (nextCount < prevCount) {
+            chunks.push(ansiEscapes.eraseLines(prevCount - nextCount + 1));
+            chunks.push(ansiEscapes.cursorUp(visibleCount));
+        }
+        else {
+            chunks.push(ansiEscapes.cursorUp(prevCount - 1));
         }
+        chunks.push(...rowChunks);
         stream.write(chunks.join(""));
         previousHeight = nextHeight;
     });

package/lib/core/cell-output.d.ts

@@ -3,11 +3,18 @@
  */
 import { type CellBuffer } from "./cell-buffer.js";
 import { type Clip, type OutputLike, type OutputWriteOptions } from "./output.js";
+import { type AnsiCode } from "../types/ansi.js";
 export declare class CellOutput implements OutputLike {
     private readonly clips;
+    private readonly styleIdByRef;
+    private lastStyleRef;
+    private lastStyleId;
     readonly buffer: CellBuffer;
     constructor(buffer: CellBuffer);
     clip(clip: Clip): void;
     unclip(): void;
+    fill(x: number, y: number, length: number, char: string, charWidth: number, styles: AnsiCode[]): void;
+    private resolveStyleId;
+    private writePlainLine;
     write(x: number, y: number, text: string, options: OutputWriteOptions): void;
 }

package/lib/core/cell-output.js

@@ -5,8 +5,38 @@ import sliceAnsi from "slice-ansi";
 import stringWidth from "string-width";
 import widestLine from "widest-line";
 import { styledCharsFromTokens, tokenize } from "@alcalzone/ansi-tokenize";
+const ESC = "\u001b";
+const isPrintableAsciiText = (value) => {
+    for (let index = 0; index < value.length; index++) {
+        const code = value.charCodeAt(index);
+        if (code === 10) {
+            continue;
+        }
+        if (code < 0x20 || code > 0x7e) {
+            return false;
+        }
+    }
+    return true;
+};
+const getCharWidth = (value, widthCache) => {
+    if (value.length === 1 &&
+        value.charCodeAt(0) >= 0x20 &&
+        value.charCodeAt(0) <= 0x7e) {
+        return 1;
+    }
+    const cached = widthCache.get(value);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const width = Math.max(1, stringWidth(value));
+    widthCache.set(value, width);
+    return width;
+};
 export class CellOutput {
     clips = [];
+    styleIdByRef = new WeakMap();
+    lastStyleRef;
+    lastStyleId = 0;
     buffer;
     constructor(buffer) {
         this.buffer = buffer;
@@ -17,6 +47,74 @@ export class CellOutput {
     unclip() {
         this.clips.pop();
     }
+    fill(x, y, length, char, charWidth, styles) {
+        if (length <= 0) {
+            return;
+        }
+        const visualLength = length * charWidth;
+        let startX = x;
+        let endX = x + visualLength;
+        const row = y;
+        const clip = this.clips.at(-1);
+        if (clip) {
+            const clipY1 = clip.y1 ?? 0;
+            // Clipping logic: y2 is exclusive boundary
+            if (clip.y2 !== undefined && row >= clip.y2) {
+                return;
+            }
+            if (row < clipY1) {
+                return;
+            }
+            const clipX1 = clip.x1 ?? 0;
+            startX = Math.max(startX, clipX1);
+            if (clip.x2 !== undefined) {
+                endX = Math.min(endX, clip.x2);
+            }
+        }
+        const fillVisualLength = endX - startX;
+        if (fillVisualLength <= 0) {
+            return;
+        }
+        const styleId = this.buffer.styleRegistry.getId(styles);
+        this.buffer.fill(startX, row, fillVisualLength, char, charWidth, styleId);
+    }
+    resolveStyleId(styles) {
+        if (styles.length === 0) {
+            return 0;
+        }
+        if (styles === this.lastStyleRef) {
+            return this.lastStyleId;
+        }
+        const byRef = this.styleIdByRef.get(styles);
+        if (byRef !== undefined) {
+            this.lastStyleRef = styles;
+            this.lastStyleId = byRef;
+            return byRef;
+        }
+        const styleId = this.buffer.styleRegistry.getId(styles);
+        this.styleIdByRef.set(styles, styleId);
+        this.lastStyleRef = styles;
+        this.lastStyleId = styleId;
+        return styleId;
+    }
+    writePlainLine(line, writeX, row, preserveLineTrailingSpaces, widthCache) {
+        let offsetX = writeX;
+        for (const value of line) {
+            const charWidth = getCharWidth(value, widthCache);
+            if (offsetX < 0) {
+                offsetX += charWidth;
+                continue;
+            }
+            if (offsetX >= this.buffer.width) {
+                break;
+            }
+            if (offsetX + charWidth > this.buffer.width) {
+                break;
+            }
+            this.buffer.setCell(offsetX, row, value, charWidth, 0, preserveLineTrailingSpaces);
+            offsetX += charWidth;
+        }
+    }
     write(x, y, text, options) {
         const { transformers } = options;
         if (!text) {
@@ -28,7 +126,27 @@ export class CellOutput {
         // Match Output.get() semantics: transformed lines may intentionally keep
         // trailing spaces (for alignment or visual effects), so mark them.
         const preserveLineTrailingSpaces = transformers.length > 0;
+        const widthCache = new Map();
         const clip = this.clips.at(-1);
+        if (!clip &&
+            transformers.length === 0 &&
+            !text.includes(ESC) &&
+            isPrintableAsciiText(text)) {
+            let offsetY = 0;
+            for (const line of lines) {
+                const row = writeY + offsetY;
+                if (row < 0) {
+                    offsetY++;
+                    continue;
+                }
+                if (row >= this.buffer.height) {
+                    break;
+                }
+                this.writePlainLine(line, writeX, row, preserveLineTrailingSpaces, widthCache);
+                offsetY++;
+            }
+            return;
+        }
         if (clip) {
             const clipHorizontally = typeof clip.x1 === "number" && typeof clip.x2 === "number";
             const clipVertically = typeof clip.y1 === "number" && typeof clip.y2 === "number";
@@ -83,10 +201,16 @@ export class CellOutput {
             for (const transformer of transformers) {
                 transformedLine = transformer(transformedLine, lineIndex);
             }
+            if (!transformedLine.includes(ESC) &&
+                isPrintableAsciiText(transformedLine)) {
+                this.writePlainLine(transformedLine, writeX, row, preserveLineTrailingSpaces, widthCache);
+                offsetY++;
+                continue;
+            }
             const styledChars = styledCharsFromTokens(tokenize(transformedLine));
             let offsetX = writeX;
             for (const char of styledChars) {
-                const charWidth = Math.max(1, stringWidth(char.value));
+                const charWidth = getCharWidth(char.value, widthCache);
                 if (offsetX < 0) {
                     offsetX += charWidth;
                     continue;
@@ -97,7 +221,7 @@ export class CellOutput {
                 if (offsetX + charWidth > this.buffer.width) {
                     break;
                 }
-                const styleId = this.buffer.styleRegistry.getId(char.styles);
+                const styleId = this.resolveStyleId(char.styles);
                 this.buffer.setCell(offsetX, row, char.value, charWidth, styleId, preserveLineTrailingSpaces);
                 offsetX += charWidth;
             }

package/lib/core/output.d.ts

@@ -1,5 +1,6 @@
 import { type OutputTransformer } from "./render-node-to-output.js";
 import { type Dimension } from "../utils/dimension.js";
+import { type AnsiCode } from "../types/ansi.js";
 /**
  * Options for writing text to an output target.
  */
@@ -27,6 +28,7 @@ export interface OutputLike {
     write(x: number, y: number, text: string, options: OutputWriteOptions): void;
     clip(clip: Clip): void;
     unclip(): void;
+    fill(x: number, y: number, length: number, char: string, charWidth: number, styles: AnsiCode[]): void;
 }
 /**
  * "Virtual" output class
@@ -65,6 +67,7 @@ export declare class Output implements OutputLike {
      * Removes the last clipping area, restoring the previous one.
      */
     unclip(): void;
+    fill(x: number, y: number, length: number, char: string, _charWidth: number, styles: AnsiCode[]): void;
     /**
      * Generates the final output string and its height.
      *

package/lib/core/output.js

@@ -63,6 +63,18 @@ export class Output {
             type: "unclip",
         });
     }
+    fill(x, y, length, char, _charWidth, styles) {
+        if (length <= 0) {
+            return;
+        }
+        const prefix = styles.map((style) => style.code).join("");
+        const suffix = [...styles]
+            .reverse()
+            .map((style) => style.endCode)
+            .join("");
+        const text = prefix + char.repeat(length) + suffix;
+        this.write(x, y, text, { transformers: [] });
+    }
     /**
      * Generates the final output string and its height.
      *

package/lib/core/render-border.d.ts

@@ -1,13 +1,3 @@
 import { type DOMNode } from "./dom.js";
 import { type OutputLike } from "./output.js";
-/**
- * Renders the border for a DOM node.
- * Calculates border dimensions and draws border characters with specified
- * styles.
- *
- * @param x - The x-coordinate (column) where the border starts.
- * @param y - The y-coordinate (row) where the border starts.
- * @param node - The DOM node for which to render the border.
- * @param output - The output instance to write the border to.
- */
 export declare const renderBorder: (x: number, y: number, node: DOMNode, output: OutputLike) => void;

package/lib/core/render-border.js

@@ -1,82 +1,91 @@
 import { boxStyles } from "./box-styles.js";
 import ansis from "ansis";
-import { colorize } from "../utils/colorize.js";
-/**
- * Renders the border for a DOM node.
- * Calculates border dimensions and draws border characters with specified
- * styles.
- *
- * @param x - The x-coordinate (column) where the border starts.
- * @param y - The y-coordinate (row) where the border starts.
- * @param node - The DOM node for which to render the border.
- * @param output - The output instance to write the border to.
- */
+import stringWidth from "string-width";
+import { getStyle } from "../utils/colorize.js";
+// Helper to resolve styles once
+const resolveBorderStyles = (color, dim) => {
+    const styles = [];
+    if (dim) {
+        styles.push({
+            type: "ansi",
+            code: ansis.dim.open,
+            endCode: ansis.dim.close,
+        });
+    }
+    const colorStyle = getStyle(color, "foreground");
+    if (colorStyle) {
+        styles.push(colorStyle);
+    }
+    return styles;
+};
 export const renderBorder = (x, y, node, output) => {
-    if (node.style.borderStyle) {
-        const layout = node.taffyNode?.tree.getLayout(node.taffyNode.id);
-        const width = layout?.width ?? 0;
-        const height = layout?.height ?? 0;
-        const box = typeof node.style.borderStyle === "string"
-            ? boxStyles[node.style.borderStyle]
-            : node.style.borderStyle;
-        const topBorderColor = node.style.borderTopColor ?? node.style.borderColor;
-        const bottomBorderColor = node.style.borderBottomColor ?? node.style.borderColor;
-        const leftBorderColor = node.style.borderLeftColor ?? node.style.borderColor;
-        const rightBorderColor = node.style.borderRightColor ?? node.style.borderColor;
-        const dimTopBorderColor = node.style.borderTopDimColor ?? node.style.borderDimColor;
-        const dimBottomBorderColor = node.style.borderBottomDimColor ?? node.style.borderDimColor;
-        const dimLeftBorderColor = node.style.borderLeftDimColor ?? node.style.borderDimColor;
-        const dimRightBorderColor = node.style.borderRightDimColor ?? node.style.borderDimColor;
-        const showTopBorder = node.style.borderTop !== false;
-        const showBottomBorder = node.style.borderBottom !== false;
-        const showLeftBorder = node.style.borderLeft !== false;
-        const showRightBorder = node.style.borderRight !== false;
-        const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
-        let topBorder = showTopBorder
-            ? colorize((showLeftBorder ? box.topLeft : "") +
-                box.top.repeat(contentWidth) +
-                (showRightBorder ? box.topRight : ""), topBorderColor, "foreground")
-            : undefined;
-        if (showTopBorder && dimTopBorderColor) {
-            topBorder = ansis.dim(topBorder);
-        }
-        let verticalBorderHeight = height;
-        if (showTopBorder) {
-            verticalBorderHeight -= 1;
-        }
-        if (showBottomBorder) {
-            verticalBorderHeight -= 1;
-        }
-        let leftBorder = (colorize(box.left, leftBorderColor, "foreground") + "\n").repeat(verticalBorderHeight);
-        if (dimLeftBorderColor) {
-            leftBorder = ansis.dim(leftBorder);
+    const { borderStyle } = node.style;
+    if (!borderStyle) {
+        return;
+    }
+    const layout = node.taffyNode?.tree.getLayout(node.taffyNode.id);
+    const width = layout?.width ?? 0;
+    const height = layout?.height ?? 0;
+    const box = typeof borderStyle === "string" ? boxStyles[borderStyle] : borderStyle;
+    const { borderColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, borderDimColor, borderTopDimColor, borderBottomDimColor, borderLeftDimColor, borderRightDimColor, } = node.style;
+    const showTopBorder = node.style.borderTop !== false;
+    const showBottomBorder = node.style.borderBottom !== false;
+    const showLeftBorder = node.style.borderLeft !== false;
+    const showRightBorder = node.style.borderRight !== false;
+    const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
+    // Top Border
+    if (showTopBorder) {
+        const styles = resolveBorderStyles(borderTopColor ?? borderColor, borderTopDimColor ?? borderDimColor);
+        if (showLeftBorder) {
+            output.fill(x, y, 1, box.topLeft, stringWidth(box.topLeft), styles);
         }
-        let rightBorder = (colorize(box.right, rightBorderColor, "foreground") + "\n").repeat(verticalBorderHeight);
-        if (dimRightBorderColor) {
-            rightBorder = ansis.dim(rightBorder);
+        if (contentWidth > 0) {
+            output.fill(x + (showLeftBorder ? 1 : 0), y, contentWidth, box.top, stringWidth(box.top), styles);
         }
-        let bottomBorder = showBottomBorder
-            ? colorize((showLeftBorder ? box.bottomLeft : "") +
-                box.bottom.repeat(contentWidth) +
-                (showRightBorder ? box.bottomRight : ""), bottomBorderColor, "foreground")
-            : undefined;
-        if (showBottomBorder && dimBottomBorderColor) {
-            bottomBorder = ansis.dim(bottomBorder);
+        if (showRightBorder) {
+            output.fill(x + width - 1, y, 1, box.topRight, stringWidth(box.topRight), styles);
         }
-        const offsetY = showTopBorder ? 1 : 0;
-        if (topBorder) {
-            output.write(x, y, topBorder, { transformers: [] });
+    }
+    // Vertical Borders
+    let verticalBorderHeight = height;
+    if (showTopBorder)
+        verticalBorderHeight -= 1;
+    if (showBottomBorder)
+        verticalBorderHeight -= 1;
+    if (verticalBorderHeight > 0) {
+        const offsetY = y + (showTopBorder ? 1 : 0);
+        // Optimization: Resolve styles once
+        const leftStyles = showLeftBorder
+            ? resolveBorderStyles(borderLeftColor ?? borderColor, borderLeftDimColor ?? borderDimColor)
+            : [];
+        const rightStyles = showRightBorder
+            ? resolveBorderStyles(borderRightColor ?? borderColor, borderRightDimColor ?? borderDimColor)
+            : [];
+        // Optimization: Calculate widths once
+        const leftWidth = showLeftBorder ? stringWidth(box.left) : 0;
+        const rightWidth = showRightBorder ? stringWidth(box.right) : 0;
+        for (let i = 0; i < verticalBorderHeight; i++) {
+            const row = offsetY + i;
+            if (showLeftBorder) {
+                output.fill(x, row, 1, box.left, leftWidth, leftStyles);
+            }
+            if (showRightBorder) {
+                output.fill(x + width - 1, row, 1, box.right, rightWidth, rightStyles);
+            }
         }
+    }
+    // Bottom Border
+    if (showBottomBorder) {
+        const styles = resolveBorderStyles(borderBottomColor ?? borderColor, borderBottomDimColor ?? borderDimColor);
+        const bottomY = y + height - 1;
         if (showLeftBorder) {
-            output.write(x, y + offsetY, leftBorder, { transformers: [] });
+            output.fill(x, bottomY, 1, box.bottomLeft, stringWidth(box.bottomLeft), styles);
         }
-        if (showRightBorder) {
-            output.write(x + width - 1, y + offsetY, rightBorder, {
-                transformers: [],
-            });
+        if (contentWidth > 0) {
+            output.fill(x + (showLeftBorder ? 1 : 0), bottomY, contentWidth, box.bottom, stringWidth(box.bottom), styles);
         }
-        if (bottomBorder) {
-            output.write(x, y + height - 1, bottomBorder, { transformers: [] });
+        if (showRightBorder) {
+            output.fill(x + width - 1, bottomY, 1, box.bottomRight, stringWidth(box.bottomRight), styles);
         }
     }
 };

package/lib/core/render.d.ts

@@ -76,6 +76,7 @@ export interface RenderOptions {
      *   - `{ strategy: "run" }` (or omitted strategy) enables run-diff rendering.
      *
      * Runtime notes:
+     * - In `run` strategy, terminal writes are skipped entirely when frames are unchanged.
      * - In `debug` mode, Tinky always writes full frames.
      * - In screen-reader mode, Tinky uses the screen-reader output path.
      * - In CI mode, Tinky avoids cursor-diff updates.

package/lib/core/renderer.js

@@ -1,5 +1,6 @@
 import { renderNodeToOutput, renderNodeToScreenReaderOutput, } from "./render-node-to-output.js";
-import { Output } from "./output.js";
+import { CellBuffer } from "./cell-buffer.js";
+import { CellOutput } from "./cell-output.js";
 /**
  * Renders the DOM tree to a string output.
  *
@@ -27,31 +28,33 @@ export const renderer = (node, isScreenReaderEnabled) => {
             };
         }
         const layout = node.taffyNode.tree.getLayout(node.taffyNode.id);
-        const output = new Output({
+        const buffer = new CellBuffer({
             width: layout.width,
             height: layout.height,
         });
+        const output = new CellOutput(buffer);
         renderNodeToOutput(node, output, {
             skipStaticElements: true,
         });
         let staticOutput;
         if (node.staticNode?.taffyNode) {
             const staticLayout = node.staticNode.taffyNode.tree.getLayout(node.staticNode.taffyNode.id);
-            staticOutput = new Output({
+            const staticBuffer = new CellBuffer({
                 width: staticLayout.width,
                 height: staticLayout.height,
             });
+            staticOutput = new CellOutput(staticBuffer);
             renderNodeToOutput(node.staticNode, staticOutput, {
                 skipStaticElements: false,
             });
         }
-        const { output: generatedOutput, height: outputHeight } = output.get();
+        const generatedOutput = buffer.toString();
         return {
             output: generatedOutput,
-            outputHeight,
+            outputHeight: buffer.height,
             // Newline at the end is needed, because static output doesn't have one,
             // so interactive output will override last line of static output
-            staticOutput: staticOutput ? `${staticOutput.get().output}\n` : "",
+            staticOutput: staticOutput ? `${staticOutput.buffer.toString()}\n` : "",
         };
     }
     return {

package/lib/core/tinky.d.ts

@@ -153,7 +153,6 @@ export declare class Tinky {
      * Handles string generation, static output, screen reader logic, and writing.
      */
     onRender: () => void;
-    private isRunFrameEqual;
     /**
      * Swaps front and back buffers. After swap, the caller's newly-rendered
      * frame becomes the front buffer. The old front becomes the back buffer

package/lib/core/tinky.js

@@ -5,6 +5,7 @@ import { isCI } from "../utils/check-ci.js";
 import autoBind from "auto-bind";
 import { onExit } from "../utils/signal-exit.js";
 import { patchConsole } from "../utils/patch-console.js";
+import { advanceSquashTextEpoch } from "../utils/squash-text-nodes.js";
 import { LegacyRoot } from "react-reconciler/constants.js";
 import wrapAnsi from "wrap-ansi";
 import { reconciler } from "./reconciler.js";
@@ -202,6 +203,8 @@ export class Tinky {
         if (this.rootNode.taffyNode === undefined) {
             return;
         }
+        // Keep text-squash cache scoped to one layout/render cycle.
+        advanceSquashTextEpoch();
         const terminalWidth = this.getTerminalWidth();
         const { tree } = this.rootNode.taffyNode;
         const rootStyle = tree.getStyle(this.rootNode.taffyNode.id);
@@ -255,9 +258,7 @@ export class Tinky {
                     this.swapRunBuffers();
                 }
             }
-            else if (this.frontBuffer &&
-                this.cellLog &&
-                !this.isRunFrameEqual(buffer)) {
+            else if (this.frontBuffer && this.cellLog) {
                 this.cellLog(this.frontBuffer, buffer);
                 this.swapRunBuffers();
             }
@@ -342,9 +343,6 @@ export class Tinky {
         this.lastOutput = output;
         this.lastOutputHeight = outputHeight;
     };
-    isRunFrameEqual(nextBuffer) {
-        return this.frontBuffer?.isEqual(nextBuffer) ?? false;
-    }
     /**
      * Swaps front and back buffers. After swap, the caller's newly-rendered
      * frame becomes the front buffer. The old front becomes the back buffer

package/lib/types/ansi.d.ts

@@ -0,0 +1,5 @@
+export interface AnsiCode {
+    type: "ansi";
+    code: string;
+    endCode: string;
+}

package/lib/types/ansi.js

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

package/lib/utils/colorize.d.ts

@@ -20,5 +20,10 @@ type ColorType = "foreground" | "background";
  * @param type - Whether to apply the color to the foreground or background.
  * @returns The colorized string.
  */
+import { type AnsiCode } from "../types/ansi.js";
+/**
+ * Gets the ANSI style for a color.
+ */
+export declare const getStyle: (color: string | undefined, type: ColorType) => AnsiCode | undefined;
 export declare const colorize: (str: string, color: string | undefined, type: ColorType) => string;
 export {};

package/lib/utils/colorize.js

@@ -5,49 +5,71 @@ const isNamedColor = (color) => {
     return color in ansis;
 };
 /**
- * Applies a color to a string using Ansis.
- * Supports named colors, hex codes, RGB values, and ANSI-256 color codes.
- *
- * @param str - The string to colorize.
- * @param color - The color to apply.
- * @param type - Whether to apply the color to the foreground or background.
- * @returns The colorized string.
+ * Gets the ANSI style for a color.
  */
-export const colorize = (str, color, type) => {
+export const getStyle = (color, type) => {
     if (!color) {
-        return str;
+        return undefined;
     }
     if (isNamedColor(color)) {
         if (type === "foreground") {
-            return ansis[color](str);
+            return {
+                type: "ansi",
+                code: ansis[color].open,
+                endCode: ansis[color].close,
+            };
         }
         const methodName = `bg${color.charAt(0).toUpperCase() + color.slice(1)}`;
-        return ansis[methodName](str);
+        return {
+            type: "ansi",
+            code: ansis[methodName].open,
+            endCode: ansis[methodName].close,
+        };
     }
     if (color.startsWith("#")) {
-        return type === "foreground"
-            ? ansis.hex(color)(str)
-            : ansis.bgHex(color)(str);
+        const style = type === "foreground" ? ansis.hex(color) : ansis.bgHex(color);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
     }
     if (color.startsWith("ansi256")) {
         const matches = ansiRegex.exec(color);
         if (!matches) {
-            return str;
+            return undefined;
         }
         const value = Number(matches[1]);
-        return type === "foreground" ? ansis.fg(value)(str) : ansis.bg(value)(str);
+        const style = type === "foreground" ? ansis.fg(value) : ansis.bg(value);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
     }
     if (color.startsWith("rgb")) {
         const matches = rgbRegex.exec(color);
         if (!matches) {
-            return str;
+            return undefined;
         }
         const firstValue = Number(matches[1]);
         const secondValue = Number(matches[2]);
         const thirdValue = Number(matches[3]);
-        return type === "foreground"
-            ? ansis.rgb(firstValue, secondValue, thirdValue)(str)
-            : ansis.bgRgb(firstValue, secondValue, thirdValue)(str);
+        const style = type === "foreground"
+            ? ansis.rgb(firstValue, secondValue, thirdValue)
+            : ansis.bgRgb(firstValue, secondValue, thirdValue);
+        return {
+            type: "ansi",
+            code: style.open,
+            endCode: style.close,
+        };
+    }
+    return undefined;
+};
+export const colorize = (str, color, type) => {
+    const style = getStyle(color, type);
+    if (style) {
+        return style.code + str + style.endCode;
     }
     return str;
 };

package/lib/utils/render-background.js

@@ -1,4 +1,4 @@
-import { colorize } from "./colorize.js";
+import { getStyle } from "./colorize.js";
 /**
  * Renders the background color of a node to the output.
  *
@@ -25,8 +25,9 @@ export const renderBackground = (x, y, node, output) => {
         return;
     }
     // Create background fill for each row
-    const backgroundLine = colorize(" ".repeat(contentWidth), node.style.backgroundColor, "background");
+    const style = getStyle(node.style.backgroundColor, "background");
+    const styles = style ? [style] : [];
     for (let row = 0; row < contentHeight; row++) {
-        output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, { transformers: [] });
+        output.fill(x + leftBorderWidth, y + topBorderHeight + row, contentWidth, " ", 1, styles);
     }
 };

package/lib/utils/squash-text-nodes.d.ts

@@ -1,4 +1,9 @@
 import { type DOMElement } from "../core/dom.js";
+/**
+ * Advances the squash cache epoch.
+ * Cached results are valid only within one layout/render cycle.
+ */
+export declare const advanceSquashTextEpoch: () => number;
 /**
  * Consolidates multiple text nodes into a single string.
  * Useful for combining adjacent text nodes to minimize write operations.

package/lib/utils/squash-text-nodes.js

@@ -1,3 +1,13 @@
+const cache = new WeakMap();
+let currentEpoch = 0;
+/**
+ * Advances the squash cache epoch.
+ * Cached results are valid only within one layout/render cycle.
+ */
+export const advanceSquashTextEpoch = () => {
+    currentEpoch += 1;
+    return currentEpoch;
+};
 /**
  * Consolidates multiple text nodes into a single string.
  * Useful for combining adjacent text nodes to minimize write operations.
@@ -7,7 +17,11 @@
  * @returns The consolidated text string.
  */
 export const squashTextNodes = (node) => {
-    let text = "";
+    const cached = cache.get(node);
+    if (cached && cached.epoch === currentEpoch) {
+        return cached.text;
+    }
+    const parts = [];
     for (let index = 0; index < node.childNodes.length; index++) {
         const childNode = node.childNodes[index];
         if (childNode === undefined) {
@@ -30,7 +44,9 @@ export const squashTextNodes = (node) => {
                 nodeText = childNode.internal_transform(nodeText, index);
             }
         }
-        text += nodeText;
+        parts.push(nodeText);
     }
+    const text = parts.join("");
+    cache.set(node, { epoch: currentEpoch, text });
     return text;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinky",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "React for CLIs, re-imagined with the Taffy engine",
   "keywords": [
     "react",
@@ -32,6 +32,7 @@
   ],
   "scripts": {
     "test": "bun test",
+    "benchmark": "bun run benchmark/index.ts",
     "build": "tsc && npm run docs",
     "lint": "eslint src/**/*.ts",
     "prepublish": "npm run build",
@@ -82,6 +83,7 @@
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "husky": "^9.1.7",
+    "ink": "^6.7.0",
     "jiti": "^2.6.1",
     "lint-staged": "^16.2.7",
     "prettier": "^3.7.4",