@svelterm/core 0.1.0

package/dist/src/render/ansi.js

@@ -0,0 +1,108 @@
+const ESC = '\x1b';
+const CSI = `${ESC}[`;
+function expandHex(color) {
+    if (color.length === 4) {
+        return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+    }
+    return color;
+}
+export function moveTo(col, row) {
+    return `${CSI}${row};${col}H`;
+}
+export function clearScreen() {
+    return `${CSI}2J`;
+}
+export function hideCursor() {
+    return `${CSI}?25l`;
+}
+export function showCursor() {
+    return `${CSI}?25h`;
+}
+export function enterAltScreen() {
+    return `${CSI}?1049h`;
+}
+export function exitAltScreen() {
+    return `${CSI}?1049l`;
+}
+export function resetStyle() {
+    return `${CSI}0m`;
+}
+export function bold() {
+    return `${CSI}1m`;
+}
+export function dim() {
+    return `${CSI}2m`;
+}
+export function italic() {
+    return `${CSI}3m`;
+}
+export function underline() {
+    return `${CSI}4m`;
+}
+export function strikethrough() {
+    return `${CSI}9m`;
+}
+export function fgColor(color) {
+    const code = ANSI_FG[color];
+    if (code !== undefined)
+        return `${CSI}${code}m`;
+    if (color.startsWith('#')) {
+        const hex = expandHex(color);
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `${CSI}38;2;${r};${g};${b}m`;
+    }
+    return '';
+}
+export function bgColor(color) {
+    const code = ANSI_BG[color];
+    if (code !== undefined)
+        return `${CSI}${code}m`;
+    if (color.startsWith('#')) {
+        const hex = expandHex(color);
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `${CSI}48;2;${r};${g};${b}m`;
+    }
+    return '';
+}
+const ANSI_FG = {
+    black: 30, red: 31, green: 32, yellow: 33,
+    blue: 34, magenta: 35, cyan: 36, white: 37,
+    default: 39,
+};
+export function hyperlinkOpen(url) {
+    return `\x1b]8;;${url}\x1b\\`;
+}
+export function hyperlinkClose() {
+    return `\x1b]8;;\x1b\\`;
+}
+export function enableMouse() {
+    return `${CSI}?1006h${CSI}?1003h`; // enable SGR mode, then any-event tracking
+}
+export function disableMouse() {
+    return `${CSI}?1003l${CSI}?1006l`;
+}
+export function setCursorShape(shape) {
+    const code = shape === 'block' ? 2 : shape === 'underline' ? 4 : 6;
+    return `${CSI}${code} q`;
+}
+export function enableBracketedPaste() {
+    return `${CSI}?2004h`;
+}
+export function disableBracketedPaste() {
+    return `${CSI}?2004l`;
+}
+export function beginSyncUpdate() {
+    return `${CSI}?2026h`;
+}
+export function endSyncUpdate() {
+    return `${CSI}?2026l`;
+}
+const ANSI_BG = {
+    black: 40, red: 41, green: 42, yellow: 43,
+    blue: 44, magenta: 45, cyan: 46, white: 47,
+    default: 49,
+};

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

@@ -0,0 +1,4 @@
+import { CellBuffer } from './buffer.js';
+import { LayoutBox } from '../layout/engine.js';
+import { ResolvedStyle } from '../css/compute.js';
+export declare function renderBorder(buffer: CellBuffer, box: LayoutBox, style: ResolvedStyle): void;

package/dist/src/render/border.js

@@ -0,0 +1,60 @@
+const BORDER_SETS = {
+    single: { topLeft: '┌', topRight: '┐', bottomLeft: '└', bottomRight: '┘', horizontal: '─', vertical: '│' },
+    double: { topLeft: '╔', topRight: '╗', bottomLeft: '╚', bottomRight: '╝', horizontal: '═', vertical: '║' },
+    rounded: { topLeft: '╭', topRight: '╮', bottomLeft: '╰', bottomRight: '╯', horizontal: '─', vertical: '│' },
+    heavy: { topLeft: '┏', topRight: '┓', bottomLeft: '┗', bottomRight: '┛', horizontal: '━', vertical: '┃' },
+};
+export function renderBorder(buffer, box, style) {
+    if (style.borderStyle === 'none')
+        return;
+    const chars = BORDER_SETS[style.borderStyle];
+    if (!chars)
+        return;
+    const fg = style.borderColor !== 'default' ? style.borderColor : undefined;
+    const { x, y, width, height } = box;
+    const top = style.borderTop;
+    const right = style.borderRight;
+    const bottom = style.borderBottom;
+    const left = style.borderLeft;
+    // Corners (only where two adjacent sides meet)
+    if (top && left)
+        buffer.setCell(x, y, { char: chars.topLeft, fg });
+    if (top && right)
+        buffer.setCell(x + width - 1, y, { char: chars.topRight, fg });
+    if (bottom && left)
+        buffer.setCell(x, y + height - 1, { char: chars.bottomLeft, fg });
+    if (bottom && right)
+        buffer.setCell(x + width - 1, y + height - 1, { char: chars.bottomRight, fg });
+    // Top edge
+    if (top) {
+        const startCol = left ? x + 1 : x;
+        const endCol = right ? x + width - 1 : x + width;
+        for (let col = startCol; col < endCol; col++) {
+            buffer.setCell(col, y, { char: chars.horizontal, fg });
+        }
+    }
+    // Bottom edge
+    if (bottom) {
+        const startCol = left ? x + 1 : x;
+        const endCol = right ? x + width - 1 : x + width;
+        for (let col = startCol; col < endCol; col++) {
+            buffer.setCell(col, y + height - 1, { char: chars.horizontal, fg });
+        }
+    }
+    // Left edge
+    if (left) {
+        const startRow = top ? y + 1 : y;
+        const endRow = bottom ? y + height - 1 : y + height;
+        for (let row = startRow; row < endRow; row++) {
+            buffer.setCell(x, row, { char: chars.vertical, fg });
+        }
+    }
+    // Right edge
+    if (right) {
+        const startRow = top ? y + 1 : y;
+        const endRow = bottom ? y + height - 1 : y + height;
+        for (let row = startRow; row < endRow; row++) {
+            buffer.setCell(x + width - 1, row, { char: chars.vertical, fg });
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+export interface Cell {
+    char: string;
+    fg: string;
+    bg: string;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    dim: boolean;
+    hyperlink?: string;
+}
+export declare class CellBuffer {
+    readonly width: number;
+    readonly height: number;
+    private cells;
+    constructor(width: number, height: number);
+    clear(): void;
+    getCell(col: number, row: number): Cell | undefined;
+    setCell(col: number, row: number, cell: Partial<Cell>): void;
+    writeText(col: number, row: number, text: string, style?: Partial<Cell>): void;
+    clone(): CellBuffer;
+}
+export declare function cellsEqual(a: Cell, b: Cell): boolean;

package/dist/src/render/buffer.js

@@ -0,0 +1,70 @@
+const EMPTY_CELL = {
+    char: ' ', fg: 'default', bg: 'default',
+    bold: false, italic: false, underline: false,
+    strikethrough: false, dim: false,
+};
+export class CellBuffer {
+    width;
+    height;
+    cells;
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.cells = new Array(width * height);
+        this.clear();
+    }
+    clear() {
+        for (let i = 0; i < this.cells.length; i++) {
+            this.cells[i] = { ...EMPTY_CELL };
+        }
+    }
+    getCell(col, row) {
+        if (col < 0 || col >= this.width || row < 0 || row >= this.height)
+            return undefined;
+        return this.cells[row * this.width + col];
+    }
+    setCell(col, row, cell) {
+        if (col < 0 || col >= this.width || row < 0 || row >= this.height)
+            return;
+        const idx = row * this.width + col;
+        const existing = this.cells[idx];
+        this.cells[idx] = {
+            char: cell.char ?? existing.char,
+            fg: cell.fg ?? existing.fg,
+            bg: cell.bg ?? existing.bg,
+            bold: cell.bold ?? existing.bold,
+            italic: cell.italic ?? existing.italic,
+            underline: cell.underline ?? existing.underline,
+            strikethrough: cell.strikethrough ?? existing.strikethrough,
+            dim: cell.dim ?? existing.dim,
+            hyperlink: cell.hyperlink ?? existing.hyperlink,
+        };
+    }
+    writeText(col, row, text, style) {
+        for (let i = 0; i < text.length; i++) {
+            this.setCell(col + i, row, {
+                char: text[i],
+                fg: style?.fg,
+                bg: style?.bg,
+                bold: style?.bold,
+                italic: style?.italic,
+                underline: style?.underline,
+                strikethrough: style?.strikethrough,
+                dim: style?.dim,
+            });
+        }
+    }
+    clone() {
+        const copy = new CellBuffer(this.width, this.height);
+        for (let i = 0; i < this.cells.length; i++) {
+            copy.cells[i] = { ...this.cells[i] };
+        }
+        return copy;
+    }
+}
+export function cellsEqual(a, b) {
+    return a.char === b.char && a.fg === b.fg && a.bg === b.bg
+        && a.bold === b.bold && a.italic === b.italic
+        && a.underline === b.underline && a.strikethrough === b.strikethrough
+        && a.dim === b.dim && a.hyperlink === b.hyperlink;
+}

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

@@ -0,0 +1,19 @@
+import { TermNode } from '../renderer/node.js';
+import { RenderQueue } from './queue.js';
+/**
+ * RenderContext tracks mutations and determines the minimum rendering path.
+ * Each renderer method calls the appropriate onX method, which enqueues
+ * the minimum work needed.
+ */
+export declare class RenderContext {
+    readonly queue: RenderQueue;
+    onScheduleRender?: () => void;
+    onSetText(node: TermNode, newText: string): void;
+    onSetAttribute(node: TermNode, key: string, value: string): void;
+    onRemoveAttribute(node: TermNode, key: string): void;
+    onInsert(parent: TermNode, child: TermNode): void;
+    onRemove(child: TermNode, parent: TermNode): void;
+    onScroll(node: TermNode): void;
+    onResize(): void;
+    private invalidateDescendantStyles;
+}

package/dist/src/render/context.js

@@ -0,0 +1,98 @@
+import { RenderQueue } from './queue.js';
+/**
+ * RenderContext tracks mutations and determines the minimum rendering path.
+ * Each renderer method calls the appropriate onX method, which enqueues
+ * the minimum work needed.
+ */
+export class RenderContext {
+    queue = new RenderQueue();
+    onScheduleRender;
+    onSetText(node, newText) {
+        const oldText = node.text ?? '';
+        node.text = newText;
+        if (oldText.length === newText.length) {
+            this.queue.enqueuePaintOnly(node);
+        }
+        else {
+            this.queue.enqueueLayoutBubble(node);
+        }
+        this.onScheduleRender?.();
+    }
+    onSetAttribute(node, key, value) {
+        if (key === 'class') {
+            if (node.cache.classAttr === value)
+                return; // no change
+            node.cache.classAttr = value;
+            node.invalidateStyle();
+            this.queue.enqueueStyleResolve(node);
+            // Also invalidate descendants — descendant selectors may change
+            this.invalidateDescendantStyles(node);
+        }
+        else if (key === 'id' || key === 'data-focused' || key === 'data-hovered') {
+            node.invalidateStyle();
+            this.queue.enqueueStyleResolve(node);
+        }
+        else {
+            this.queue.enqueuePaintOnly(node);
+        }
+        node.attributes.set(key, value);
+        this.onScheduleRender?.();
+    }
+    onRemoveAttribute(node, key) {
+        node.attributes.delete(key);
+        if (key === 'class' || key === 'id' || key === 'data-focused' || key === 'data-hovered') {
+            node.cache.classAttr = '';
+            node.invalidateStyle();
+            this.queue.enqueueStyleResolve(node);
+            this.invalidateDescendantStyles(node);
+        }
+        this.onScheduleRender?.();
+    }
+    onInsert(parent, child) {
+        // New node needs full computation
+        child.invalidateAll();
+        this.queue.enqueueStyleResolve(child);
+        // Parent needs re-layout
+        if (hasFixedDimensions(parent)) {
+            this.queue.enqueueLayoutSubtree(parent);
+        }
+        else {
+            this.queue.enqueueLayoutBubble(parent);
+        }
+        this.onScheduleRender?.();
+    }
+    onRemove(child, parent) {
+        if (hasFixedDimensions(parent)) {
+            this.queue.enqueueLayoutSubtree(parent);
+        }
+        else {
+            this.queue.enqueueLayoutBubble(parent);
+        }
+        // Paint the area where the removed node was
+        this.queue.enqueuePaintOnly(parent);
+        this.onScheduleRender?.();
+    }
+    onScroll(node) {
+        this.queue.setFullRecompute();
+        this.onScheduleRender?.();
+    }
+    onResize() {
+        this.queue.setFullRecompute();
+        this.onScheduleRender?.();
+    }
+    invalidateDescendantStyles(node) {
+        for (const child of node.children) {
+            if (child.nodeType === 'element') {
+                child.invalidateStyle();
+                this.queue.enqueueStyleResolve(child);
+                this.invalidateDescendantStyles(child);
+            }
+        }
+    }
+}
+function hasFixedDimensions(node) {
+    const style = node.cache.resolvedStyle;
+    if (!style)
+        return false;
+    return style.width !== null && style.height !== null;
+}

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

@@ -0,0 +1,2 @@
+import { CellBuffer } from './buffer.js';
+export declare function diffBuffers(prev: CellBuffer | null, next: CellBuffer): string;

package/dist/src/render/diff.js

@@ -0,0 +1,53 @@
+import { cellsEqual } from './buffer.js';
+import * as ansi from './ansi.js';
+export function diffBuffers(prev, next) {
+    const parts = [];
+    let lastStyle = null;
+    let currentHyperlink = undefined;
+    for (let row = 0; row < next.height; row++) {
+        for (let col = 0; col < next.width; col++) {
+            const cell = next.getCell(col, row);
+            const prevCell = prev?.getCell(col, row);
+            if (prevCell && cellsEqual(prevCell, cell))
+                continue;
+            parts.push(ansi.moveTo(col + 1, row + 1));
+            const styleCode = buildStyleCode(cell);
+            if (styleCode !== lastStyle) {
+                parts.push(ansi.resetStyle());
+                parts.push(styleCode);
+                lastStyle = styleCode;
+            }
+            if (cell.hyperlink !== currentHyperlink) {
+                if (currentHyperlink)
+                    parts.push(ansi.hyperlinkClose());
+                if (cell.hyperlink)
+                    parts.push(ansi.hyperlinkOpen(cell.hyperlink));
+                currentHyperlink = cell.hyperlink;
+            }
+            parts.push(cell.char);
+        }
+    }
+    if (currentHyperlink)
+        parts.push(ansi.hyperlinkClose());
+    if (parts.length > 0)
+        parts.push(ansi.resetStyle());
+    return parts.join('');
+}
+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());
+    return parts.join('');
+}

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

@@ -0,0 +1,10 @@
+import { TermNode } from '../renderer/node.js';
+import { CellBuffer } from './buffer.js';
+import { ResolvedStyle } from '../css/compute.js';
+import { LayoutBox } from '../layout/engine.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.
+ */
+export declare function paintNodes(nodes: Set<TermNode>, buffer: CellBuffer, styles: Map<number, ResolvedStyle>, layout: Map<number, LayoutBox>, root: TermNode): void;

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

@@ -0,0 +1,94 @@
+import { renderBorder } from './border.js';
+import { paintTextContent } from './paint-text.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.
+ */
+export function paintNodes(nodes, buffer, styles, layout, root) {
+    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);
+        }
+        else if (node.nodeType === 'element') {
+            paintElementNode(node, buffer, box, styles, layout);
+        }
+    }
+}
+function paintElementNode(node, buffer, box, styles, layout) {
+    const style = styles.get(node.id);
+    if (!style || style.display === 'none')
+        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 });
+            }
+        }
+    }
+    // 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');
+        }
+        current = current.parent;
+    }
+    return result;
+}

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

@@ -0,0 +1,29 @@
+/**
+ * Shared text painting logic used by both full and incremental paint.
+ * Single implementation prevents divergence.
+ */
+import { TermNode } from '../renderer/node.js';
+import { CellBuffer } from './buffer.js';
+import { ResolvedStyle } from '../css/compute.js';
+import { LayoutBox } from '../layout/engine.js';
+interface TextVisuals {
+    fg: string;
+    bg: string;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    dim: boolean;
+    hyperlink?: string;
+}
+/**
+ * Paint a text node's content into the buffer, respecting inherited
+ * text-align, white-space, text-overflow from ancestors.
+ */
+export declare function paintTextContent(node: TermNode, buffer: CellBuffer, box: LayoutBox, visuals: TextVisuals, styles: Map<number, ResolvedStyle>, layout: Map<number, LayoutBox>, clip?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null): void;
+export {};