tinky 1.6.0 → 1.8.0

package/lib/components/Text.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useCallback } from "react";
 import { applyTextStyles, } from "../utils/apply-text-styles.js";
 import { AccessibilityContext } from "../contexts/AccessibilityContext.js";
 import { backgroundContext } from "../contexts/BackgroundContext.js";
@@ -41,7 +41,7 @@ export function Text({ color, backgroundColor, dimColor = false, bold = false, i
     if (childrenOrAriaLabel === undefined || childrenOrAriaLabel === null) {
         return null;
     }
-    const transform = (children) => {
+    const transform = useCallback((children) => {
         return applyTextStyles(children, {
             color,
             backgroundColor: effectiveBackgroundColor,
@@ -52,7 +52,16 @@ export function Text({ color, backgroundColor, dimColor = false, bold = false, i
             strikethrough,
             inverse,
         });
-    };
+    }, [
+        color,
+        effectiveBackgroundColor,
+        dimColor,
+        bold,
+        italic,
+        underline,
+        strikethrough,
+        inverse,
+    ]);
     if (isScreenReaderEnabled && ariaHidden) {
         return null;
     }

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/dom.d.ts

@@ -1,6 +1,7 @@
 import { type Styles } from "./styles.js";
 import { type OutputTransformer } from "./render-node-to-output.js";
 import { TaffyNode } from "./taffy-node.js";
+import { type SizeObserver } from "./size-observer.js";
 /**
  * Interface representing a node in the Tinky tree.
  */
@@ -74,6 +75,8 @@ export type DOMElement = {
     onRender?: () => void;
     /** Callback to trigger an immediate render. */
     onImmediateRender?: () => void;
+    /** Set of resize observers attached to this element. */
+    resizeObservers?: Set<SizeObserver>;
 } & TinkyNode;
 /**
  * Interface representing a text node in Tinky.

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/reconciler.js

@@ -5,6 +5,7 @@ import { createContext } from "react";
 import { createTextNode, appendChildNode, insertBeforeNode, removeChildNode, setStyle, setTextNodeValue, createNode, setAttribute, } from "./dom.js";
 import { applyStyles } from "./styles.js";
 import { process } from "../utils/node-adapter.js";
+import { removeSizeObserversInSubtree } from "./size-observer.js";
 // We need to conditionally perform devtools connection to avoid
 // accidentally breaking other third-party code.
 if (process?.env?.["DEV"] === "true") {
@@ -204,6 +205,7 @@ export const reconciler = createReconciler({
     insertInContainerBefore: insertBeforeNode,
     removeChildFromContainer(node, removeNode) {
         removeChildNode(node, removeNode);
+        removeSizeObserversInSubtree(removeNode);
         cleanupTaffyNode(removeNode.taffyNode);
     },
     commitUpdate(node, _type, oldProps, newProps) {
@@ -241,6 +243,7 @@ export const reconciler = createReconciler({
     },
     removeChild(node, removeNode) {
         removeChildNode(node, removeNode);
+        removeSizeObserversInSubtree(removeNode);
         cleanupTaffyNode(removeNode.taffyNode);
     },
     setCurrentUpdatePriority(newPriority) {

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;