@svelterm/core 0.1.0 → 0.21.0

package/dist/src/render/paint.js

@@ -1,19 +1,40 @@
+import { SvtRegionNode, childrenWithPseudos, hasBooleanAttribute } from '../renderer/node.js';
 import { renderBorder } from './border.js';
 import { paintTextContent } from './paint-text.js';
+import { blendColor } from '../css/color.js';
+import { stringWidth } from '../layout/unicode.js';
+import { bumpPaintGeneration, paintGeneration } from './generation.js';
+import { ensureImageLoading, paintImage } from './image.js';
+import { renderScrollbar, renderHScrollbar } from './scrollbar.js';
+import { dispatchEvent } from '../input/dispatch.js';
+import { selectOptions, selectedIndex } from '../input/select.js';
 const DEFAULT_VISUALS = {
     fg: 'default', bg: 'default',
     bold: false, italic: false, underline: false, strikethrough: false, dim: false,
 };
 const NO_SCROLL = { x: 0, y: 0 };
-export function paint(root, buffer, styles, layout) {
-    paintNode(root, buffer, styles, layout, DEFAULT_VISUALS, null, NO_SCROLL);
+export function paint(root, buffer, styles, layout, damageClip) {
+    // Damage-clipped paints repaint a region, not the whole tree — nodes
+    // outside the damage keep their cached cursor positions.
+    if (!damageClip)
+        bumpPaintGeneration();
+    paintNode(root, buffer, styles, layout, DEFAULT_VISUALS, null, NO_SCROLL, damageClip);
 }
-function paintNode(node, buffer, styles, layout, inherited, clip, scroll) {
+function paintNode(node, buffer, styles, layout, inherited, clip, scroll, damageClip) {
     if (node.nodeType === 'comment')
         return;
     const visuals = resolveVisuals(node, styles, inherited);
     const rawBox = layout?.get(node.id);
     const box = rawBox ? applyScroll(rawBox, scroll) : undefined;
+    // Skip nodes entirely outside the damage region
+    if (damageClip && box && !boxesOverlap(box, damageClip))
+        return;
+    // Cull subtrees fully outside the active clip: every cell write is
+    // clipped anyway, so this can't change output — it skips the walk.
+    // (In-flow descendants sit inside their ancestor's box; positioned
+    // ones offset from their parent, so they leave with it.)
+    if (clip && box && box.width > 0 && box.height > 0 && !boxesOverlap(box, clip))
+        return;
     // Check display:none — element and all descendants are invisible and take no space
     const ownStyle = node.nodeType === 'element' ? styles?.get(node.id) : undefined;
     const parentStyle = node.parent ? styles?.get(node.parent.id) : undefined;
@@ -29,19 +50,49 @@ function paintNode(node, buffer, styles, layout, inherited, clip, scroll) {
         return;
     }
     if (node.nodeType === 'element' && box && !isHidden) {
-        fillBackground(buffer, box, visuals, clip);
-        if (ownStyle && ownStyle.borderStyle !== 'none') {
-            renderBorder(buffer, box, ownStyle);
+        const hideEmptyCell = ownStyle?.emptyCells === 'hide'
+            && ownStyle.display === 'table-cell' && isEmptyCell(node);
+        if (!hideEmptyCell) {
+            fillBackground(buffer, box, visuals, clip, ownStyle);
+            if (ownStyle && ownStyle.borderStyle !== 'none') {
+                renderBorder(buffer, box, ownStyle);
+            }
+        }
+        if (node.tag === 'img') {
+            ensureImageLoading(node);
+            paintImage(node, buffer, box, clip);
+            return; // replaced element — no children render
         }
         if (node.tag === 'hr') {
             paintHorizontalRule(buffer, box, visuals, clip);
             return;
         }
+        if (node.tag === 'progress' || node.tag === 'meter') {
+            paintValueBar(node, buffer, box, visuals, clip);
+            return; // fallback content is not rendered, as in browsers
+        }
+        if (node.tag === 'select') {
+            paintSelect(node, buffer, box, visuals, clip);
+            return; // options render through the select's own label
+        }
         if (node.tag === 'li') {
             paintListMarker(node, buffer, box, visuals, clip);
         }
+        if (node.tag === 'summary') {
+            paintSummaryMarker(node, buffer, box, visuals, clip);
+        }
         if (node.tag === 'input' && box) {
-            paintInput(node, buffer, box, visuals, clip);
+            const inputType = node.attributes.get('type');
+            if (inputType === 'checkbox' || inputType === 'radio') {
+                paintCheckable(node, buffer, box, visuals, clip);
+            }
+            else {
+                paintInput(node, buffer, box, visuals, clip);
+            }
+        }
+        if (node instanceof SvtRegionNode) {
+            paintRegion(node, buffer, box, clip);
+            return;
         }
     }
     // Determine clip and scroll for children
@@ -49,16 +100,101 @@ function paintNode(node, buffer, styles, layout, inherited, clip, scroll) {
     let childScroll = scroll;
     if (node.nodeType === 'element' && box) {
         const ownStyle = styles?.get(node.id);
-        if (ownStyle && ownStyle.overflow !== 'visible') {
-            childClip = intersectClip(clip, box);
+        if (node.tag === 'root') {
+            // Root clips to the terminal viewport (buffer bounds)
+            childClip = intersectClip(clip, { x: 0, y: 0, width: buffer.width, height: buffer.height });
+        }
+        else if (ownStyle && ownStyle.overflow !== 'visible') {
+            // Clip to the content box, inside any border — otherwise
+            // scrolled content paints over the border cells.
+            const inset = (ownStyle.borderStyle && ownStyle.borderStyle !== 'none') ? 1 : 0;
+            childClip = intersectClip(clip, {
+                x: box.x + inset, y: box.y + inset,
+                width: Math.max(0, box.width - inset * 2),
+                height: Math.max(0, box.height - inset * 2),
+            });
         }
         if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
             childScroll = { x: scroll.x + node.scrollLeft, y: scroll.y + node.scrollTop };
         }
     }
-    for (const child of node.children) {
-        paintNode(child, buffer, styles, layout, visuals, childClip, childScroll);
+    for (const child of childrenWithPseudos(node)) {
+        paintNode(child, buffer, styles, layout, visuals, childClip, childScroll, damageClip);
+    }
+    // Render scrollbar overlays for scrollable containers
+    const now = Date.now();
+    const showVScroll = node.nodeType === 'element' && node.scrollbarVisibleUntil > now;
+    const showHScroll = node.nodeType === 'element' && node.hScrollbarVisibleUntil > now;
+    if (showVScroll || showHScroll) {
+        const nodeBox = layout?.get(node.id);
+        let contentHeight = 0;
+        let contentWidth = 0;
+        if (nodeBox && layout) {
+            // Scroll frames reuse the same layout map — walking a huge
+            // list's children every scrollbar frame would dominate paint.
+            const extent = cachedContentExtent(node, layout, nodeBox);
+            contentHeight = extent.height;
+            contentWidth = extent.width;
+        }
+        const visibleMs = 600;
+        const fadeMs = 400;
+        if (showVScroll) {
+            const remaining = node.scrollbarVisibleUntil - now;
+            const opacity = remaining > fadeMs ? 1 : remaining / fadeMs;
+            if (node.tag === 'root') {
+                renderScrollbar(buffer, 0, 0, buffer.width, buffer.height, contentHeight, node.scrollTop, opacity);
+            }
+            else if (box) {
+                renderScrollbar(buffer, box.x, box.y, box.width, box.height, contentHeight, node.scrollTop, opacity);
+            }
+        }
+        if (showHScroll && !showVScroll) {
+            const remaining = node.hScrollbarVisibleUntil - now;
+            const opacity = remaining > fadeMs ? 1 : remaining / fadeMs;
+            if (node.tag === 'root') {
+                renderHScrollbar(buffer, 0, 0, buffer.width, buffer.height, contentWidth, node.scrollLeft, opacity);
+            }
+            else if (box) {
+                renderHScrollbar(buffer, box.x, box.y, box.width, box.height, contentWidth, node.scrollLeft, opacity);
+            }
+        }
+    }
+}
+/** Content extents per (layout map, node) — valid as long as the layout is. */
+const extentCache = new WeakMap();
+function cachedContentExtent(node, layout, nodeBox) {
+    let perNode = extentCache.get(layout);
+    if (!perNode) {
+        perNode = new Map();
+        extentCache.set(layout, perNode);
     }
+    const cached = perNode.get(node.id);
+    if (cached)
+        return cached;
+    let height = 0;
+    let width = 0;
+    const walk = (n) => {
+        const cBox = layout.get(n.id);
+        if (cBox) {
+            height = Math.max(height, cBox.y - nodeBox.y + cBox.height);
+            width = Math.max(width, cBox.x - nodeBox.x + cBox.width);
+        }
+        for (const child of n.children)
+            walk(child);
+    };
+    for (const child of node.children)
+        walk(child);
+    const extent = { width, height };
+    perNode.set(node.id, extent);
+    return extent;
+}
+/** A table cell is empty (for empty-cells: hide) if it has no element children and no visible text. */
+function isEmptyCell(node) {
+    return node.children.every(child => child.nodeType === 'text' && (child.textContent ?? '').trim() === '');
+}
+function boxesOverlap(a, b) {
+    return a.x < b.x + b.width && a.x + a.width > b.x
+        && a.y < b.y + b.height && a.y + a.height > b.y;
 }
 function applyScroll(box, scroll) {
     if (scroll.x === 0 && scroll.y === 0)
@@ -70,17 +206,58 @@ function paintText(node, buffer, box, visuals, clip, parentStyle, parentBox, sty
         return;
     paintTextContent(node, buffer, box, visuals, styles, layout, clip);
 }
-function fillBackground(buffer, box, visuals, clip) {
+function fillBackground(buffer, box, visuals, clip, style) {
     if (visuals.bg === 'default')
         return;
-    for (let row = box.y; row < box.y + box.height; row++) {
-        for (let col = box.x; col < box.x + box.width; col++) {
+    // For inner-facing block-character borders, the border cells' bg should
+    // stop AT the stroke, not extend past it. Skip the entire border-cell ring
+    // so the stroke is the visible outer edge of the colored area. The stroke
+    // glyph still paints its 1/8 or 1/2 cell mark on a transparent cell.
+    const skipBorderRing = style ? isInnerFacingBlockBorder(style) : false;
+    // For borders with blank corners (no corner glyph), the corner cells stay
+    // transparent so bg doesn't leak through the gap.
+    const skipCorners = style ? hasBlankCorners(style) : false;
+    const left = box.x;
+    const right = box.x + box.width - 1;
+    const top = box.y;
+    const bottom = box.y + box.height - 1;
+    const bgHasAlpha = visuals.bg.startsWith('#') && visuals.bg.length === 9;
+    for (let row = top; row <= bottom; row++) {
+        for (let col = left; col <= right; col++) {
             if (clip && !inClip(col, row, clip))
                 continue;
-            buffer.setCell(col, row, { bg: visuals.bg });
+            if (skipBorderRing && isBorderCell(col, row, left, right, top, bottom))
+                continue;
+            if (skipCorners && isCorner(col, row, left, right, top, bottom))
+                continue;
+            const bg = bgHasAlpha
+                ? blendColor(buffer.getCell(col, row)?.bg ?? 'default', visuals.bg)
+                : visuals.bg;
+            buffer.setCell(col, row, { bg });
         }
     }
 }
+function isInnerFacingBlockBorder(style) {
+    const bs = style.borderStyle;
+    return bs === 'eighth-cell-inner' || bs === 'half-cell-inner';
+}
+function hasBlankCorners(style) {
+    if (style.borderCorner !== 'none')
+        return false;
+    // Only eighth-cell-inner has blank corners in the default configuration:
+    // the stroke sits at the inner edge, so the corner cell has nothing to
+    // draw and the bg should not leak through.
+    // eighth-cell-outer extends top/bottom strokes through corners by default
+    // (see renderBlockBorder), so the bg should fill the corner cells too.
+    // half-cell-* use quadrant/L corner glyphs.
+    return style.borderStyle === 'eighth-cell-inner';
+}
+function isBorderCell(col, row, left, right, top, bottom) {
+    return col === left || col === right || row === top || row === bottom;
+}
+function isCorner(col, row, left, right, top, bottom) {
+    return (col === left || col === right) && (row === top || row === bottom);
+}
 function paintListMarker(node, buffer, box, visuals, clip) {
     const parent = node.parent;
     if (!parent)
@@ -94,13 +271,55 @@ function paintListMarker(node, buffer, box, visuals, clip) {
     else {
         marker = '• ';
     }
+    // Paint marker before the content (offset left by marker width)
+    const markerX = box.x - marker.length;
     for (let i = 0; i < marker.length; i++) {
-        const cx = box.x + i;
+        const cx = markerX + i;
+        if (cx < 0)
+            continue;
         if (clip && !inClip(cx, box.y, clip))
             continue;
         buffer.setCell(cx, box.y, { char: marker[i], fg: visuals.fg, dim: visuals.dim });
     }
 }
+/** The selected option's label with a cycle indicator: "label ▾". */
+function paintSelect(node, buffer, box, visuals, clip) {
+    const option = selectOptions(node)[selectedIndex(node)];
+    const text = `${option ? option.textContent.trim() : ''} ▾`;
+    for (let i = 0; i < Math.min(text.length, box.width); i++) {
+        const col = box.x + i;
+        if (clip && !inClip(col, box.y, clip))
+            continue;
+        buffer.setCell(col, box.y, {
+            char: text[i], fg: visuals.fg, bg: visuals.bg,
+            bold: visuals.bold, dim: visuals.dim,
+        });
+    }
+}
+/** Disclosure triangle in the summary's marker padding: ▶ closed, ▼ open. */
+function paintSummaryMarker(node, buffer, box, visuals, clip) {
+    const details = node.parent;
+    const open = details?.tag === 'details' && hasBooleanAttribute(details, 'open');
+    if (clip && !inClip(box.x, box.y, clip))
+        return;
+    buffer.setCell(box.x, box.y, { char: open ? '▼' : '▶', fg: visuals.fg });
+}
+/** Checkbox → [x]/[ ], radio → (•)/( ), coloured by the element's visuals. */
+function paintCheckable(node, buffer, box, visuals, clip) {
+    const checked = hasBooleanAttribute(node, 'checked');
+    const glyphs = node.attributes.get('type') === 'radio'
+        ? (checked ? '(•)' : '( )')
+        : (checked ? '[x]' : '[ ]');
+    for (let i = 0; i < glyphs.length; i++) {
+        const col = box.x + i;
+        if (clip && !inClip(col, box.y, clip))
+            continue;
+        buffer.setCell(col, box.y, {
+            char: glyphs[i], fg: visuals.fg, bg: visuals.bg,
+            bold: visuals.bold, dim: visuals.dim,
+        });
+    }
+}
 function paintInput(node, buffer, box, visuals, clip) {
     const value = node.attributes.get('value') ?? '';
     const isFocused = node.attributes.has('data-focused');
@@ -160,19 +379,18 @@ function paintInput(node, buffer, box, visuals, clip) {
             buffer.setCell(cx, contentY, { char: '…', fg: visuals.fg, dim: true });
         }
     }
-    // Cursor (inverted colors)
+    // Publish the text-cursor screen position so the post-paint emitter
+    // can drive the real terminal cursor. No cell is painted — the real
+    // cursor brings its own blink and shape.
     if (isFocused) {
-        const cursorScreenX = contentX + (cursor - scrollOffset);
-        if (cursorScreenX >= contentX && cursorScreenX <= contentX + contentW) {
-            const cursorChar = cursor < value.length ? value[cursor] : ' ';
-            if (!clip || inClip(cursorScreenX, contentY, clip)) {
-                buffer.setCell(cursorScreenX, contentY, {
-                    char: cursorChar,
-                    fg: visuals.bg !== 'default' ? visuals.bg : 'black',
-                    bg: visuals.fg !== 'default' ? visuals.fg : 'white',
-                });
-            }
-        }
+        // Cursor cell offset = cell width of the text before it (wide
+        // glyphs take two columns), not its code-unit index.
+        const cursorCells = stringWidth(value.substring(0, cursor));
+        const cursorScreenX = contentX + (cursorCells - scrollOffset);
+        const inViewport = cursorScreenX >= contentX
+            && cursorScreenX <= contentX + contentW
+            && (!clip || inClip(cursorScreenX, contentY, clip));
+        node.cache.cursorScreen = { x: cursorScreenX, y: contentY, inViewport, generation: paintGeneration() };
     }
 }
 function resolvePadVal(v) {
@@ -180,6 +398,42 @@ function resolvePadVal(v) {
         return v;
     return 0;
 }
+/** Left-partial block glyphs by eighths (index 1–7). */
+const PARTIAL_BLOCKS = ['', '▏', '▎', '▍', '▌', '▋', '▊', '▉'];
+/** <progress>/<meter>: filled blocks for value, light shade for the track. */
+function paintValueBar(node, buffer, box, visuals, clip) {
+    const ratio = valueBarRatio(node);
+    const fillCells = ratio * box.width;
+    let fullCells = Math.floor(fillCells);
+    let eighths = Math.round((fillCells - fullCells) * 8);
+    if (eighths === 8) {
+        fullCells++;
+        eighths = 0;
+    }
+    for (let r = 0; r < box.height; r++) {
+        for (let c = 0; c < box.width; c++) {
+            const col = box.x + c;
+            const row = box.y + r;
+            if (clip && !inClip(col, row, clip))
+                continue;
+            const char = c < fullCells ? '█'
+                : (c === fullCells && eighths > 0) ? PARTIAL_BLOCKS[eighths]
+                    : '░';
+            buffer.setCell(col, row, { char, fg: visuals.fg, bg: visuals.bg });
+        }
+    }
+}
+/** Fraction filled, from value/max (progress) or value within min/max (meter). */
+function valueBarRatio(node) {
+    const value = parseFloat(node.attributes.get('value') ?? '');
+    if (isNaN(value))
+        return 0; // indeterminate
+    const min = node.tag === 'meter' ? (parseFloat(node.attributes.get('min') ?? '') || 0) : 0;
+    const max = parseFloat(node.attributes.get('max') ?? '') || 1;
+    if (max <= min)
+        return 0;
+    return Math.max(0, Math.min(1, (value - min) / (max - min)));
+}
 function paintHorizontalRule(buffer, box, visuals, clip) {
     for (let col = box.x; col < box.x + box.width; col++) {
         if (clip && !inClip(col, box.y, clip))
@@ -187,6 +441,31 @@ function paintHorizontalRule(buffer, box, visuals, clip) {
         buffer.setCell(col, box.y, { char: '─', fg: visuals.fg, dim: true });
     }
 }
+/**
+ * Paint an svt-region. Fires `resize` if the allocated cell dimensions
+ * have changed since the last paint, then calls the consumer-registered
+ * cell source for each cell of the region's box (local coordinates) and
+ * writes the returned cell into the buffer at the absolute position.
+ */
+function paintRegion(node, buffer, box, clip) {
+    node.notifyAllocatedSize(box.width, box.height, (cols, rows) => {
+        dispatchEvent(node, 'resize', { cols, rows });
+    });
+    node.lastBoxX = box.x;
+    node.lastBoxY = box.y;
+    const cellSource = node.getCellSource();
+    if (!cellSource)
+        return;
+    for (let r = 0; r < box.height; r++) {
+        for (let c = 0; c < box.width; c++) {
+            const x = box.x + c;
+            const y = box.y + r;
+            if (clip && !inClip(x, y, clip))
+                continue;
+            buffer.setCell(x, y, cellSource(c, r));
+        }
+    }
+}
 function inClip(col, row, clip) {
     return col >= clip.x && col < clip.x + clip.width
         && row >= clip.y && row < clip.y + clip.height;
@@ -207,9 +486,10 @@ function resolveVisuals(node, styles, inherited) {
     if (!own)
         return inherited;
     const hyperlink = node.tag === 'a' ? node.attributes.get('href') : inherited.hyperlink;
+    const opacity = own.opacity;
     return {
-        fg: own.fg !== 'default' ? own.fg : inherited.fg,
-        bg: own.bg !== 'default' ? own.bg : inherited.bg,
+        fg: applyOpacity(own.fg !== 'default' ? own.fg : inherited.fg, opacity),
+        bg: applyOpacity(own.bg !== 'default' ? own.bg : inherited.bg, opacity),
         bold: own.bold || inherited.bold,
         italic: own.italic || inherited.italic,
         underline: own.underline || inherited.underline,
@@ -218,3 +498,21 @@ function resolveVisuals(node, styles, inherited) {
         hyperlink,
     };
 }
+/** Fold a numeric opacity into the colour's alpha channel. */
+function applyOpacity(color, opacity) {
+    if (opacity >= 1 || color === 'default')
+        return color;
+    const hex = color.startsWith('#') ? color : nominalHex(color);
+    if (!hex)
+        return color;
+    const existing = hex.length === 9 ? parseInt(hex.slice(7, 9), 16) / 255 : 1;
+    const alpha = Math.round(existing * opacity * 255);
+    return hex.slice(0, 7) + alpha.toString(16).padStart(2, '0');
+}
+const NOMINAL_HEX = {
+    black: '#000000', red: '#cd0000', green: '#00cd00', yellow: '#cdcd00',
+    blue: '#0000ee', magenta: '#cd00cd', cyan: '#00cdcd', white: '#e5e5e5',
+};
+function nominalHex(name) {
+    return NOMINAL_HEX[name] ?? null;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Minimal PNG decoder for <img>: 8-bit RGB/RGBA/greyscale/palette, no
+ * interlace, inflate via node:zlib — no dependencies. Half-block
+ * rendering needs pixels, not fidelity; anything fancier should be
+ * converted before shipping to a terminal anyway.
+ */
+export interface DecodedImage {
+    width: number;
+    height: number;
+    /** Row-major RGBA, 4 bytes per pixel. */
+    rgba: Uint8Array;
+}
+export declare function decodePng(data: Uint8Array): DecodedImage;

package/dist/src/render/png.js

@@ -0,0 +1,145 @@
+/**
+ * Minimal PNG decoder for <img>: 8-bit RGB/RGBA/greyscale/palette, no
+ * interlace, inflate via node:zlib — no dependencies. Half-block
+ * rendering needs pixels, not fidelity; anything fancier should be
+ * converted before shipping to a terminal anyway.
+ */
+import { inflateSync } from 'node:zlib';
+const SIGNATURE = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+/** Bytes per pixel for the colour types we support. */
+const CHANNELS = { 0: 1, 2: 3, 3: 1, 6: 4 };
+export function decodePng(data) {
+    for (let i = 0; i < SIGNATURE.length; i++) {
+        if (data[i] !== SIGNATURE[i])
+            throw new Error('Not a PNG file');
+    }
+    let width = 0;
+    let height = 0;
+    let colourType = -1;
+    let palette = null;
+    const idat = [];
+    let offset = 8;
+    while (offset + 8 <= data.length) {
+        const length = readU32(data, offset);
+        const type = String.fromCharCode(...data.slice(offset + 4, offset + 8));
+        const body = data.slice(offset + 8, offset + 8 + length);
+        if (type === 'IHDR') {
+            width = readU32(body, 0);
+            height = readU32(body, 4);
+            const bitDepth = body[8];
+            colourType = body[9];
+            if (bitDepth !== 8)
+                throw new Error(`PNG bit depth ${bitDepth} not supported (8 only)`);
+            if (!(colourType in CHANNELS))
+                throw new Error(`PNG colour type ${colourType} not supported`);
+            if (body[12] !== 0)
+                throw new Error('Interlaced PNG not supported');
+        }
+        else if (type === 'PLTE') {
+            palette = body;
+        }
+        else if (type === 'IDAT') {
+            idat.push(body);
+        }
+        else if (type === 'IEND') {
+            break;
+        }
+        offset += 12 + length;
+    }
+    if (width === 0 || height === 0 || idat.length === 0)
+        throw new Error('Truncated PNG');
+    const channels = CHANNELS[colourType];
+    const raw = inflateSync(concat(idat));
+    const stride = width * channels;
+    const unfiltered = unfilter(raw, width, height, channels);
+    const rgba = new Uint8Array(width * height * 4);
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const src = y * stride + x * channels;
+            const dst = (y * width + x) * 4;
+            switch (colourType) {
+                case 6:
+                    rgba.set(unfiltered.slice(src, src + 4), dst);
+                    break;
+                case 2:
+                    rgba.set(unfiltered.slice(src, src + 3), dst);
+                    rgba[dst + 3] = 255;
+                    break;
+                case 0: {
+                    const grey = unfiltered[src];
+                    rgba[dst] = grey;
+                    rgba[dst + 1] = grey;
+                    rgba[dst + 2] = grey;
+                    rgba[dst + 3] = 255;
+                    break;
+                }
+                case 3: {
+                    const index = unfiltered[src] * 3;
+                    rgba[dst] = palette?.[index] ?? 0;
+                    rgba[dst + 1] = palette?.[index + 1] ?? 0;
+                    rgba[dst + 2] = palette?.[index + 2] ?? 0;
+                    rgba[dst + 3] = 255;
+                    break;
+                }
+            }
+        }
+    }
+    return { width, height, rgba };
+}
+/** Undo per-row PNG filters (types 0–4). */
+function unfilter(raw, width, height, channels) {
+    const stride = width * channels;
+    const out = new Uint8Array(stride * height);
+    for (let y = 0; y < height; y++) {
+        const filter = raw[y * (stride + 1)];
+        const rowIn = raw.slice(y * (stride + 1) + 1, (y + 1) * (stride + 1));
+        const rowOut = out.subarray(y * stride, (y + 1) * stride);
+        const prev = y > 0 ? out.subarray((y - 1) * stride, y * stride) : null;
+        for (let i = 0; i < stride; i++) {
+            const left = i >= channels ? rowOut[i - channels] : 0;
+            const up = prev ? prev[i] : 0;
+            const upLeft = prev && i >= channels ? prev[i - channels] : 0;
+            let value = rowIn[i];
+            switch (filter) {
+                case 1:
+                    value += left;
+                    break;
+                case 2:
+                    value += up;
+                    break;
+                case 3:
+                    value += Math.floor((left + up) / 2);
+                    break;
+                case 4:
+                    value += paeth(left, up, upLeft);
+                    break;
+            }
+            rowOut[i] = value & 0xff;
+        }
+    }
+    return out;
+}
+function paeth(a, b, c) {
+    const p = a + b - c;
+    const pa = Math.abs(p - a);
+    const pb = Math.abs(p - b);
+    const pc = Math.abs(p - c);
+    if (pa <= pb && pa <= pc)
+        return a;
+    if (pb <= pc)
+        return b;
+    return c;
+}
+function readU32(data, offset) {
+    return (data[offset] << 24 | data[offset + 1] << 16 | data[offset + 2] << 8 | data[offset + 3]) >>> 0;
+}
+function concat(parts) {
+    const total = parts.reduce((sum, p) => sum + p.length, 0);
+    const out = new Uint8Array(total);
+    let offset = 0;
+    for (const part of parts) {
+        out.set(part, offset);
+        offset += part.length;
+    }
+    return out;
+}

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

@@ -1,3 +1,9 @@
 import { CellBuffer } from './buffer.js';
-import { LayoutBox } from '../layout/engine.js';
-export declare function renderScrollbar(buffer: CellBuffer, box: LayoutBox, contentHeight: number, scrollTop: number): void;
+/**
+ * Render a vertical scrollbar overlay on the rightmost column.
+ */
+export declare function renderScrollbar(buffer: CellBuffer, viewportX: number, viewportY: number, viewportWidth: number, viewportHeight: number, contentHeight: number, scrollTop: number, opacity: number): void;
+/**
+ * Render a horizontal scrollbar overlay on the bottom row.
+ */
+export declare function renderHScrollbar(buffer: CellBuffer, viewportX: number, viewportY: number, viewportWidth: number, viewportHeight: number, contentWidth: number, scrollLeft: number, opacity: number): void;