@svelterm/core 0.1.0 → 0.23.0

package/dist/src/render/incremental-paint.js

@@ -1,94 +1,67 @@
-import { renderBorder } from './border.js';
-import { paintTextContent } from './paint-text.js';
+import { paint } from './paint.js';
 /**
- * Repaint only specific nodes' cells in the buffer.
- * Clears the old area and writes the new content.
- * Handles text-align, text-overflow, and white-space from ancestors.
+ * Repaint only the region affected by dirty nodes.
+ *
+ * Computes the union bounding box of all dirty nodes, clears that
+ * region, then does a full repaint of the entire tree clipped to
+ * that region. This correctly handles overlapping elements like
+ * parent borders, list markers in padding areas, and z-indexed
+ * siblings.
  */
 export function paintNodes(nodes, buffer, styles, layout, root) {
+    if (nodes.size === 0)
+        return;
+    // Compute dirty region — union of all dirty nodes' current and previous boxes
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
     for (const node of nodes) {
         const box = layout.get(node.id);
-        if (!box)
-            continue;
-        const oldBox = node.cache.layoutBox;
-        if (oldBox)
-            clearArea(buffer, oldBox);
-        if (node.nodeType === 'text') {
-            paintTextShared(node, buffer, box, styles, layout);
+        if (box) {
+            minX = Math.min(minX, box.x);
+            minY = Math.min(minY, box.y);
+            maxX = Math.max(maxX, box.x + box.width);
+            maxY = Math.max(maxY, box.y + box.height);
         }
-        else if (node.nodeType === 'element') {
-            paintElementNode(node, buffer, box, styles, layout);
+        const oldBox = node.cache.layoutBox;
+        if (oldBox) {
+            minX = Math.min(minX, oldBox.x);
+            minY = Math.min(minY, oldBox.y);
+            maxX = Math.max(maxX, oldBox.x + oldBox.width);
+            maxY = Math.max(maxY, oldBox.y + oldBox.height);
         }
     }
-}
-function paintElementNode(node, buffer, box, styles, layout) {
-    const style = styles.get(node.id);
-    if (!style || style.display === 'none')
+    if (minX >= maxX || minY >= maxY)
         return;
-    // Background fill
-    const visuals = resolveInheritedVisuals(node, styles);
-    // Element's own style overrides inherited
-    const bg = style.bg !== 'default' ? style.bg : visuals.bg;
-    if (bg !== 'default') {
-        for (let row = box.y; row < box.y + box.height; row++) {
-            for (let col = box.x; col < box.x + box.width; col++) {
-                buffer.setCell(col, row, { bg });
+    // Expand dirty region to include parent borders and list marker padding
+    // that may overlap the dirty area
+    for (const node of nodes) {
+        let parent = node.parent;
+        while (parent) {
+            const parentBox = layout.get(parent.id);
+            if (parentBox) {
+                minX = Math.min(minX, parentBox.x);
+                minY = Math.min(minY, parentBox.y);
+                maxX = Math.max(maxX, parentBox.x + parentBox.width);
+                maxY = Math.max(maxY, parentBox.y + parentBox.height);
             }
+            parent = parent.parent;
         }
     }
-    // Border
-    if (style.borderStyle !== 'none') {
-        renderBorder(buffer, box, style);
-    }
-    // Repaint text children
-    for (const child of node.children) {
-        const childBox = layout.get(child.id);
-        if (!childBox)
-            continue;
-        if (child.nodeType === 'text') {
-            paintTextShared(child, buffer, childBox, styles, layout);
-        }
-        else if (child.nodeType === 'element') {
-            paintElementNode(child, buffer, childBox, styles, layout);
-        }
-    }
-}
-function paintTextShared(node, buffer, box, styles, layout) {
-    const visuals = resolveInheritedVisuals(node, styles);
-    paintTextContent(node, buffer, box, visuals, styles, layout);
-}
-function clearArea(buffer, box) {
-    for (let row = box.y; row < box.y + box.height; row++) {
-        for (let col = box.x; col < box.x + box.width; col++) {
-            buffer.setCell(col, row, { char: ' ', fg: 'default', bg: 'default', bold: false, italic: false, underline: false, strikethrough: false, dim: false });
-        }
-    }
-}
-function resolveInheritedVisuals(node, styles) {
-    const result = { fg: 'default', bg: 'default', bold: false, italic: false, underline: false, strikethrough: false, dim: false };
-    let current = node.parent;
-    while (current) {
-        const style = styles.get(current.id);
-        if (style) {
-            if (result.fg === 'default' && style.fg !== 'default')
-                result.fg = style.fg;
-            if (result.bg === 'default' && style.bg !== 'default')
-                result.bg = style.bg;
-            if (!result.bold && style.bold)
-                result.bold = true;
-            if (!result.italic && style.italic)
-                result.italic = true;
-            if (!result.underline && style.underline)
-                result.underline = true;
-            if (!result.strikethrough && style.strikethrough)
-                result.strikethrough = true;
-            if (!result.dim && style.dim)
-                result.dim = true;
-        }
-        if (!result.hyperlink && current.tag === 'a') {
-            result.hyperlink = current.attributes.get('href');
+    // Clamp to buffer bounds
+    minX = Math.max(0, minX);
+    minY = Math.max(0, minY);
+    maxX = Math.min(buffer.width, maxX);
+    maxY = Math.min(buffer.height, maxY);
+    // Clear the dirty region
+    for (let row = minY; row < maxY; row++) {
+        for (let col = minX; col < maxX; col++) {
+            buffer.setCell(col, row, {
+                char: ' ', fg: 'default', bg: 'default',
+                bold: false, italic: false, underline: false,
+                strikethrough: false, dim: false, inverse: false,
+            });
         }
-        current = current.parent;
     }
-    return result;
+    // Full repaint of the entire tree, clipped to the dirty region
+    const clip = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    paint(root, buffer, styles, layout, clip);
 }

package/dist/src/render/inline.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Inline-mode screen driver. The app renders into the main buffer at the
+ * shell's cursor position; rows above the render origin belong to the
+ * terminal's scrollback and are never touched again. All cursor movement
+ * is relative — the origin's absolute position is unknown by design.
+ *
+ * Growth emits real newlines at the bottom row (LF scrolls where CUD
+ * cannot); shrinking erases to end of screen; archiving (`releaseTop`)
+ * just moves the comparison window down — the released rows are already
+ * on the terminal exactly as they should stay.
+ */
+import { CellBuffer } from './buffer.js';
+export declare class InlineScreen {
+    /** Last painted content, padded with blanks to `physicalRows`. */
+    private prev;
+    /** Lines the zone has realised on the terminal. */
+    private physicalRows;
+    /** Rows the last buffer actually occupied (≤ physicalRows). */
+    private contentHeight;
+    /** Cursor position relative to the live-zone origin. */
+    private cursorRow;
+    /** -1 when unknown (wrap-pending after writing the last column). */
+    private cursorCol;
+    /** 1-based screen row of zone row 0, from a CPR query; null = unknown. */
+    private originRow;
+    /** ANSI that makes the terminal's live zone match `next`. */
+    render(next: CellBuffer): string;
+    /** Record where the zone starts on screen (1-based, from CPR). */
+    setOriginRow(row: number): void;
+    /** The cursor's current row within the zone (for CPR origin math). */
+    cursorZoneRow(): number;
+    /**
+     * Map a 0-based screen row (mouse coordinates) to a zone row, or
+     * null when unknown or outside the live content. Growth past the
+     * screen bottom scrolls the zone up, so the effective origin is
+     * clamped to keep the zone's bottom on screen.
+     */
+    screenRowToZone(screenRow: number, screenHeight: number): number | null;
+    /**
+     * Forget the zone entirely — after a suspend the shell owned the
+     * screen, so the next render starts a fresh zone at the cursor.
+     */
+    reset(): void;
+    /** Hand the top `n` rows to the terminal's scrollback. */
+    releaseTop(n: number): void;
+    /** Place the terminal cursor at live-zone coordinates. */
+    moveCursorTo(col: number, row: number): string;
+    /** Leave the cursor on a fresh line after the content. */
+    finish(): string;
+    /** Relative row movement, tracking the new position. */
+    private moveRow;
+    /** Realise new physical lines with LF so the terminal scrolls. */
+    private grow;
+    /**
+     * Blank everything below `height`. The physical lines stay realised
+     * (as empties) so regrowth reuses them instead of scrolling new ones.
+     */
+    private eraseBelow;
+}

package/dist/src/render/inline.js

@@ -0,0 +1,219 @@
+/**
+ * Inline-mode screen driver. The app renders into the main buffer at the
+ * shell's cursor position; rows above the render origin belong to the
+ * terminal's scrollback and are never touched again. All cursor movement
+ * is relative — the origin's absolute position is unknown by design.
+ *
+ * Growth emits real newlines at the bottom row (LF scrolls where CUD
+ * cannot); shrinking erases to end of screen; archiving (`releaseTop`)
+ * just moves the comparison window down — the released rows are already
+ * on the terminal exactly as they should stay.
+ */
+import { CellBuffer, cellsEqual } from './buffer.js';
+import * as ansi from './ansi.js';
+import { stringWidth } from '../layout/unicode.js';
+const CSI = '\x1b[';
+export class InlineScreen {
+    /** Last painted content, padded with blanks to `physicalRows`. */
+    prev = null;
+    /** Lines the zone has realised on the terminal. */
+    physicalRows = 0;
+    /** Rows the last buffer actually occupied (≤ physicalRows). */
+    contentHeight = 0;
+    /** Cursor position relative to the live-zone origin. */
+    cursorRow = 0;
+    /** -1 when unknown (wrap-pending after writing the last column). */
+    cursorCol = 0;
+    /** 1-based screen row of zone row 0, from a CPR query; null = unknown. */
+    originRow = null;
+    /** ANSI that makes the terminal's live zone match `next`. */
+    render(next) {
+        const parts = [];
+        if (this.prev && this.prev.width !== next.width) {
+            // Width changed: the terminal may have rewrapped our rows.
+            // Erase and repaint the whole zone in place — best effort.
+            parts.push(this.moveRow(0), '\r', `${CSI}0J`);
+            this.cursorCol = 0;
+            this.prev = null;
+        }
+        if (next.height > this.physicalRows)
+            parts.push(this.grow(next.height));
+        if (next.height < this.contentHeight)
+            parts.push(this.eraseBelow(next.height));
+        let lastStyle = null;
+        for (let row = 0; row < next.height; row++) {
+            for (let col = 0; col < next.width; col++) {
+                const cell = next.getCell(col, row);
+                const prevCell = this.prev?.getCell(col, row);
+                if (prevCell && cellsEqual(prevCell, cell))
+                    continue;
+                // Continuation cell of a wide glyph — the glyph writes it
+                if (cell.char === '')
+                    continue;
+                if (this.cursorRow !== row || this.cursorCol !== col) {
+                    parts.push(this.moveRow(row), `${CSI}${col + 1}G`);
+                }
+                const styleCode = buildStyleCode(cell);
+                if (styleCode !== lastStyle) {
+                    parts.push(ansi.resetStyle(), styleCode);
+                    lastStyle = styleCode;
+                }
+                parts.push(cell.char);
+                const advance = Math.max(1, stringWidth(cell.char));
+                this.cursorCol = col + advance >= next.width ? -1 : col + advance;
+            }
+        }
+        if (lastStyle !== null)
+            parts.push(ansi.resetStyle());
+        this.prev = padToHeight(next, this.physicalRows);
+        this.contentHeight = next.height;
+        return parts.join('');
+    }
+    /** Record where the zone starts on screen (1-based, from CPR). */
+    setOriginRow(row) {
+        this.originRow = row;
+    }
+    /** The cursor's current row within the zone (for CPR origin math). */
+    cursorZoneRow() {
+        return Math.max(0, this.cursorRow);
+    }
+    /**
+     * Map a 0-based screen row (mouse coordinates) to a zone row, or
+     * null when unknown or outside the live content. Growth past the
+     * screen bottom scrolls the zone up, so the effective origin is
+     * clamped to keep the zone's bottom on screen.
+     */
+    screenRowToZone(screenRow, screenHeight) {
+        if (this.originRow === null)
+            return null;
+        const effectiveOrigin = Math.min(this.originRow, screenHeight - this.physicalRows + 1);
+        const zoneRow = screenRow - (effectiveOrigin - 1);
+        if (zoneRow < 0 || zoneRow >= this.contentHeight)
+            return null;
+        return zoneRow;
+    }
+    /**
+     * Forget the zone entirely — after a suspend the shell owned the
+     * screen, so the next render starts a fresh zone at the cursor.
+     */
+    reset() {
+        this.prev = null;
+        this.physicalRows = 0;
+        this.contentHeight = 0;
+        this.cursorRow = 0;
+        this.cursorCol = 0;
+        this.originRow = null;
+    }
+    /** Hand the top `n` rows to the terminal's scrollback. */
+    releaseTop(n) {
+        if (n <= 0)
+            return;
+        const count = Math.min(n, this.contentHeight);
+        if (this.prev)
+            this.prev = dropTopRows(this.prev, count);
+        this.physicalRows -= count;
+        this.contentHeight -= count;
+        this.cursorRow -= count;
+        if (this.originRow !== null)
+            this.originRow += count;
+    }
+    /** Place the terminal cursor at live-zone coordinates. */
+    moveCursorTo(col, row) {
+        const out = this.moveRow(row) + `${CSI}${col + 1}G`;
+        this.cursorCol = col;
+        return out;
+    }
+    /** Leave the cursor on a fresh line after the content. */
+    finish() {
+        let out;
+        if (this.contentHeight < this.physicalRows) {
+            out = this.moveRow(this.contentHeight) + '\r';
+        }
+        else {
+            out = this.moveRow(Math.max(0, this.physicalRows - 1)) + '\r\n';
+            this.cursorRow = this.physicalRows;
+        }
+        this.cursorCol = 0;
+        return out + ansi.showCursor();
+    }
+    /** Relative row movement, tracking the new position. */
+    moveRow(row) {
+        const delta = row - this.cursorRow;
+        this.cursorRow = row;
+        if (delta === 0)
+            return '';
+        return delta > 0 ? `${CSI}${delta}B` : `${CSI}${-delta}A`;
+    }
+    /** Realise new physical lines with LF so the terminal scrolls. */
+    grow(height) {
+        const parts = [];
+        if (this.physicalRows > 0)
+            parts.push(this.moveRow(this.physicalRows - 1));
+        parts.push('\r');
+        const count = this.physicalRows === 0 ? height - 1 : height - this.physicalRows;
+        for (let i = 0; i < count; i++)
+            parts.push('\n');
+        this.cursorRow = height - 1;
+        this.cursorCol = 0;
+        this.physicalRows = height;
+        this.prev = this.prev && padToHeight(this.prev, height);
+        return parts.join('');
+    }
+    /**
+     * Blank everything below `height`. The physical lines stay realised
+     * (as empties) so regrowth reuses them instead of scrolling new ones.
+     */
+    eraseBelow(height) {
+        const out = this.moveRow(height) + '\r' + `${CSI}0J`;
+        this.cursorCol = 0;
+        if (this.prev)
+            this.prev = blankBelow(this.prev, height);
+        return out;
+    }
+}
+function padToHeight(buffer, height) {
+    if (buffer.height >= height)
+        return buffer;
+    const next = new CellBuffer(buffer.width, height);
+    copyRows(buffer, next, 0, buffer.height, 0);
+    return next;
+}
+function dropTopRows(buffer, count) {
+    const next = new CellBuffer(buffer.width, Math.max(0, buffer.height - count));
+    copyRows(buffer, next, count, buffer.height, -count);
+    return next;
+}
+function blankBelow(buffer, fromRow) {
+    const next = new CellBuffer(buffer.width, buffer.height);
+    copyRows(buffer, next, 0, Math.min(fromRow, buffer.height), 0);
+    return next;
+}
+function copyRows(from, to, start, end, offset) {
+    for (let row = start; row < end; row++) {
+        for (let col = 0; col < from.width; col++) {
+            const cell = from.getCell(col, row);
+            if (cell)
+                to.setCell(col, row + offset, cell);
+        }
+    }
+}
+function buildStyleCode(cell) {
+    const parts = [];
+    if (cell.fg !== 'default')
+        parts.push(ansi.fgColor(cell.fg));
+    if (cell.bg !== 'default')
+        parts.push(ansi.bgColor(cell.bg));
+    if (cell.bold)
+        parts.push(ansi.bold());
+    if (cell.dim)
+        parts.push(ansi.dim());
+    if (cell.italic)
+        parts.push(ansi.italic());
+    if (cell.underline)
+        parts.push(ansi.underline());
+    if (cell.strikethrough)
+        parts.push(ansi.strikethrough());
+    if (cell.inverse)
+        parts.push(ansi.inverse());
+    return parts.join('');
+}

package/dist/src/render/kitty-graphics.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Kitty graphics protocol: transmit RGBA pixels and place them scaled to
+ * a cell box, for crisp `<img>` rendering on supporting terminals. The
+ * half-block path (render/image.ts) stays the default; this activates
+ * only when capability detection reports graphics support.
+ *
+ * Protocol: commands are APC sequences `ESC _ G <key=val,...> ; <base64>
+ * ESC \`. Payloads chunk into ≤4096 base64 chars with `m=1` on every
+ * segment but the last.
+ */
+import type { DecodedImage } from './png.js';
+export declare function graphicsSupported(xtversion: string | null): boolean;
+/**
+ * Transmit (but don't display) an image's pixels under an id, for later
+ * placement. Chunked so no single APC exceeds the protocol limit.
+ */
+export declare function transmitImage(imageId: number, image: DecodedImage): string;
+/**
+ * Place a transmitted image at the current cursor position, scaled to
+ * `cols`×`rows` cells, without moving the cursor (`C=1`).
+ */
+export declare function placeImage(imageId: number, placementId: number, cols: number, rows: number): string;
+/** Delete one placement, leaving the transmitted image data intact. */
+export declare function deletePlacement(imageId: number, placementId: number): string;

package/dist/src/render/kitty-graphics.js

@@ -0,0 +1,58 @@
+/**
+ * Kitty graphics protocol: transmit RGBA pixels and place them scaled to
+ * a cell box, for crisp `<img>` rendering on supporting terminals. The
+ * half-block path (render/image.ts) stays the default; this activates
+ * only when capability detection reports graphics support.
+ *
+ * Protocol: commands are APC sequences `ESC _ G <key=val,...> ; <base64>
+ * ESC \`. Payloads chunk into ≤4096 base64 chars with `m=1` on every
+ * segment but the last.
+ */
+const APC = '\x1b_G';
+const ST = '\x1b\\';
+const CHUNK = 4096;
+/** Terminals that speak the kitty graphics protocol (by XTVERSION name). */
+const GRAPHICS_TERMINALS = /kitty|ghostty|wezterm/i;
+export function graphicsSupported(xtversion) {
+    return xtversion !== null && GRAPHICS_TERMINALS.test(xtversion);
+}
+/** Base64 of the image's RGBA bytes. */
+function encodePayload(image) {
+    if (typeof Buffer !== 'undefined')
+        return Buffer.from(image.rgba).toString('base64');
+    let binary = '';
+    for (const byte of image.rgba)
+        binary += String.fromCharCode(byte);
+    return btoa(binary);
+}
+/**
+ * Transmit (but don't display) an image's pixels under an id, for later
+ * placement. Chunked so no single APC exceeds the protocol limit.
+ */
+export function transmitImage(imageId, image) {
+    const payload = encodePayload(image);
+    const control = `a=t,f=32,i=${imageId},s=${image.width},v=${image.height}`;
+    if (payload.length <= CHUNK) {
+        return `${APC}${control},m=0;${payload}${ST}`;
+    }
+    const parts = [];
+    for (let offset = 0; offset < payload.length; offset += CHUNK) {
+        const chunk = payload.slice(offset, offset + CHUNK);
+        const more = offset + CHUNK < payload.length ? 1 : 0;
+        // The control keys only need to appear on the first chunk
+        const head = offset === 0 ? `${control},m=${more}` : `m=${more}`;
+        parts.push(`${APC}${head};${chunk}${ST}`);
+    }
+    return parts.join('');
+}
+/**
+ * Place a transmitted image at the current cursor position, scaled to
+ * `cols`×`rows` cells, without moving the cursor (`C=1`).
+ */
+export function placeImage(imageId, placementId, cols, rows) {
+    return `${APC}a=p,i=${imageId},p=${placementId},c=${cols},r=${rows},C=1;${ST}`;
+}
+/** Delete one placement, leaving the transmitted image data intact. */
+export function deletePlacement(imageId, placementId) {
+    return `${APC}a=d,d=i,i=${imageId},p=${placementId};${ST}`;
+}

package/dist/src/render/paint-text.js

@@ -1,42 +1,60 @@
-import { wrapText, truncateText } from '../layout/text.js';
+import { wrapText, truncateText, truncateMiddle } from '../layout/text.js';
+import { graphemes, charWidth, stringWidth } from '../layout/unicode.js';
+import { parseAnsiText } from './ansi-text.js';
+import { blendColor } from '../css/color.js';
 /**
  * Paint a text node's content into the buffer, respecting inherited
  * text-align, white-space, text-overflow from ancestors.
  */
 export function paintTextContent(node, buffer, box, visuals, styles, layout, clip) {
-    const text = node.text ?? '';
+    let text = node.text ?? '';
     if (!text)
         return;
     if (box.width === 0 && box.height === 0)
         return;
+    // <svt-ansi> content is pre-styled — its own SGR codes win
+    if (node.parent?.tag === 'svt-ansi') {
+        paintAnsiContent(text, buffer, box, clip);
+        return;
+    }
     // Find text properties from the ancestor that sets them
     const alignResult = findAncestorWithBox(node, styles, layout, s => s.textAlign !== 'left' ? s.textAlign : undefined);
     const align = alignResult?.value ?? 'left';
     const whiteSpace = findAncestorProp(node, styles, s => s.whiteSpace !== 'normal' ? s.whiteSpace : undefined) ?? 'normal';
     const textOverflow = findAncestorProp(node, styles, s => s.textOverflow !== 'clip' ? s.textOverflow : undefined) ?? 'clip';
+    const textTransform = findAncestorProp(node, styles, s => s.textTransform !== 'none' ? s.textTransform : undefined);
+    if (textTransform === 'uppercase')
+        text = text.toUpperCase();
+    else if (textTransform === 'lowercase')
+        text = text.toLowerCase();
+    else if (textTransform === 'capitalize')
+        text = text.replace(/\b\w/g, c => c.toUpperCase());
     const noWrap = whiteSpace === 'nowrap';
-    const ellipsis = textOverflow === 'ellipsis';
+    const wordBreak = findAncestorProp(node, styles, s => s.wordBreak !== 'normal' ? s.wordBreak : undefined) ?? 'normal';
     // For truncation, use the alignment container's inner width
     const alignBox = alignResult?.box;
     const parentBox = node.parent ? layout.get(node.parent.id) : undefined;
     const truncWidth = alignBox ? innerWidth(alignBox, node, styles, layout) : (parentBox?.width ?? box.width);
     // Determine text lines
     let lines;
-    if (noWrap && ellipsis) {
+    if (noWrap && textOverflow === 'ellipsis') {
         lines = [truncateText(text, truncWidth)];
     }
+    else if (noWrap && textOverflow === 'ellipsis-middle') {
+        lines = [truncateMiddle(text, truncWidth)];
+    }
     else if (noWrap) {
         lines = [text.substring(0, truncWidth)];
     }
     else {
-        lines = wrapText(text, box.width > 0 ? box.width : buffer.width);
+        lines = wrapText(text, box.width > 0 ? box.width : buffer.width, wordBreak);
     }
     // Compute starting x with text-align
     let startX = box.x;
     if (align !== 'left' && alignBox) {
         const inW = innerWidth(alignBox, node, styles, layout);
         const inX = innerX(alignBox, node, styles, layout);
-        const textWidth = lines[0]?.length ?? 0;
+        const textWidth = lines[0] ? stringWidth(lines[0]) : 0;
         if (align === 'center') {
             startX = inX + Math.floor((inW - textWidth) / 2);
         }
@@ -44,24 +62,37 @@ export function paintTextContent(node, buffer, box, visuals, styles, layout, cli
             startX = inX + inW - textWidth;
         }
     }
+    const fgHasAlpha = visuals.fg.startsWith('#') && visuals.fg.length === 9;
+    const bgHasAlpha = visuals.bg.startsWith('#') && visuals.bg.length === 9;
     for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-        const line = lines[lineIdx];
         const y = box.y + lineIdx;
-        for (let i = 0; i < line.length; i++) {
-            const cx = startX + i;
-            if (clip && (cx < clip.x || cx >= clip.x + clip.width || y < clip.y || y >= clip.y + clip.height))
-                continue;
-            buffer.setCell(cx, y, {
-                char: line[i],
-                fg: visuals.fg,
-                bg: visuals.bg,
-                bold: visuals.bold,
-                italic: visuals.italic,
-                underline: visuals.underline,
-                strikethrough: visuals.strikethrough,
-                dim: visuals.dim,
-                hyperlink: visuals.hyperlink,
-            });
+        let cx = startX;
+        for (const glyph of graphemes(lines[lineIdx])) {
+            const width = Math.max(1, charWidth(glyph));
+            const cells = [{ x: cx, char: glyph }];
+            // A wide glyph owns its neighbour cell via an empty continuation
+            for (let extra = 1; extra < width; extra++)
+                cells.push({ x: cx + extra, char: '' });
+            for (const { x, char } of cells) {
+                if (clip && (x < clip.x || x >= clip.x + clip.width || y < clip.y || y >= clip.y + clip.height))
+                    continue;
+                // An alpha bg was already composited by the ancestor's fill —
+                // the cell beneath holds the blended value; don't blend twice.
+                const under = buffer.getCell(x, y)?.bg ?? 'default';
+                const bg = bgHasAlpha ? under : visuals.bg;
+                buffer.setCell(x, y, {
+                    char,
+                    fg: fgHasAlpha ? blendColor(bg !== 'default' ? bg : under, visuals.fg) : visuals.fg,
+                    bg,
+                    bold: visuals.bold,
+                    italic: visuals.italic,
+                    underline: visuals.underline,
+                    strikethrough: visuals.strikethrough,
+                    dim: visuals.dim,
+                    hyperlink: visuals.hyperlink,
+                });
+            }
+            cx += width;
         }
     }
 }
@@ -106,6 +137,21 @@ function innerWidth(alignBox, node, styles, layout) {
     const inset = findBorderInset(alignBox, node, styles, layout);
     return alignBox.width - inset * 2;
 }
+/** Paint <svt-ansi> content: cells carry their own SGR styling. */
+function paintAnsiContent(text, buffer, box, clip) {
+    const lines = parseAnsiText(text);
+    for (let row = 0; row < lines.length; row++) {
+        const y = box.y + row;
+        if (clip && (y < clip.y || y >= clip.y + clip.height))
+            continue;
+        for (let col = 0; col < lines[row].length; col++) {
+            const x = box.x + col;
+            if (clip && (x < clip.x || x >= clip.x + clip.width))
+                continue;
+            buffer.setCell(x, y, lines[row][col]);
+        }
+    }
+}
 /** Find the border inset of the ancestor that owns alignBox. */
 function findBorderInset(alignBox, node, styles, layout) {
     let current = node.parent;

package/dist/src/render/paint.d.ts

@@ -2,4 +2,11 @@ import { TermNode } from '../renderer/node.js';
 import { CellBuffer } from './buffer.js';
 import { ResolvedStyle } from '../css/compute.js';
 import { LayoutBox } from '../layout/engine.js';
-export declare function paint(root: TermNode, buffer: CellBuffer, styles?: Map<number, ResolvedStyle>, layout?: Map<number, LayoutBox>): void;
+interface ClipRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare function paint(root: TermNode, buffer: CellBuffer, styles?: Map<number, ResolvedStyle>, layout?: Map<number, LayoutBox>, damageClip?: ClipRect): void;
+export {};