@svelterm/core 0.1.0

package/dist/src/layout/engine.js

@@ -0,0 +1,455 @@
+import { computeMainStart, computeItemGap, computeCrossOffset } from './flex.js';
+import { measureText } from './text.js';
+import { resolveSize, constrain } from './size.js';
+/** Flatten display:contents elements, promoting their children. */
+function flattenContents(children, styles) {
+    const result = [];
+    for (const child of children) {
+        if (child.nodeType === 'element' && styles.get(child.id)?.display === 'contents') {
+            result.push(...flattenContents(child.children, styles));
+        }
+        else {
+            result.push(child);
+        }
+    }
+    return result;
+}
+export function computeLayout(root, styles, availWidth, availHeight) {
+    const boxes = new Map();
+    layoutNode(root, styles, boxes, 0, 0, availWidth, availHeight);
+    return boxes;
+}
+function layoutNode(node, styles, boxes, x, y, availWidth, availHeight) {
+    if (node.nodeType === 'text')
+        return layoutText(node, boxes, x, y, availWidth, styles);
+    if (node.nodeType === 'comment')
+        return { width: 0, height: 0 };
+    if (node.nodeType === 'fragment')
+        return layoutFragment(node, styles, boxes, x, y, availWidth, availHeight);
+    return layoutElement(node, styles, boxes, x, y, availWidth, availHeight);
+}
+function layoutText(node, boxes, x, y, availWidth = Infinity, styles) {
+    const text = node.text ?? '';
+    const parentStyle = node.parent ? styles?.get(node.parent.id) : undefined;
+    const preserveWhitespace = parentStyle?.whiteSpace === 'pre';
+    // Skip empty text and inter-element whitespace.
+    // Whitespace-only text between element siblings is formatting, not content.
+    // Preserve whitespace-only text that is the sole child (e.g. grid rows of spaces).
+    const isInterElementWhitespace = !preserveWhitespace
+        && text.trim() === ''
+        && node.parent?.children.some(c => c.nodeType === 'element');
+    if (text === '' || isInterElementWhitespace) {
+        boxes.set(node.id, { x, y, width: 0, height: 0 });
+        return { width: 0, height: 0 };
+    }
+    // Check parent's whiteSpace
+    const noWrap = parentStyle?.whiteSpace === 'nowrap';
+    const wrapWidth = noWrap ? Infinity : (availWidth > 0 ? availWidth : Infinity);
+    const measured = measureText(text, wrapWidth);
+    boxes.set(node.id, { x, y, width: measured.width, height: measured.height });
+    return measured;
+}
+function layoutFragment(node, styles, boxes, x, y, availWidth, availHeight) {
+    return layoutBlockFlow(node.children, styles, boxes, x, y, availWidth, availHeight);
+}
+function layoutElement(node, styles, boxes, x, y, availWidth, availHeight) {
+    const style = styles.get(node.id);
+    if (style?.display === 'none')
+        return { width: 0, height: 0 };
+    // display: contents — element is invisible to layout, children promoted
+    if (style?.display === 'contents') {
+        return layoutBlockFlow(node.children, styles, boxes, x, y, availWidth, availHeight);
+    }
+    // Absolute positioning: use top/left offsets relative to parent, don't consume space in flow
+    if (style?.position === 'absolute' || style?.position === 'fixed') {
+        const absX = x + (style.left ?? 0);
+        const absY = y + (style.top ?? 0);
+        return layoutAbsolute(node, styles, boxes, absX, absY, availWidth, availHeight, style);
+    }
+    let margin = {
+        top: resolvePadding(style?.marginTop, availWidth),
+        right: resolvePadding(style?.marginRight, availWidth),
+        bottom: resolvePadding(style?.marginBottom, availWidth),
+        left: resolvePadding(style?.marginLeft, availWidth),
+    };
+    const borderWidth = (style?.borderStyle && style.borderStyle !== 'none') ? 1 : 0;
+    const inset = {
+        top: resolvePadding(style?.paddingTop, availWidth) + borderWidth,
+        right: resolvePadding(style?.paddingRight, availWidth) + borderWidth,
+        bottom: resolvePadding(style?.paddingBottom, availWidth) + borderWidth,
+        left: resolvePadding(style?.paddingLeft, availWidth) + borderWidth,
+    };
+    // Resolve auto margins for centering
+    const nodeWidthForAutoMargin = resolveSize(style?.width, availWidth);
+    if (margin.left === -1 && margin.right === -1 && nodeWidthForAutoMargin !== null) {
+        const remaining = availWidth - nodeWidthForAutoMargin;
+        margin = { ...margin, left: Math.floor(remaining / 2), right: Math.ceil(remaining / 2) };
+    }
+    else {
+        if (margin.left === -1)
+            margin = { ...margin, left: 0 };
+        if (margin.right === -1)
+            margin = { ...margin, right: 0 };
+    }
+    const boxX = x + margin.left;
+    const boxY = y + margin.top;
+    const explicitWidth = resolveSize(style?.width, availWidth - margin.left - margin.right);
+    const nodeWidth = explicitWidth !== null ? Math.min(explicitWidth, availWidth - margin.left - margin.right) : null;
+    const nodeHeight = resolveSize(style?.height, availHeight - margin.top - margin.bottom);
+    const innerW = (nodeWidth ?? (availWidth - margin.left - margin.right)) - inset.left - inset.right;
+    const innerH = (nodeHeight ?? (availHeight - margin.top - margin.bottom)) - inset.top - inset.bottom;
+    const display = style?.display ?? 'block';
+    let content;
+    if (display === 'flex') {
+        content = positionChildren(node.children, styles, boxes, boxX + inset.left, boxY + inset.top, innerW, innerH, style?.flexDirection ?? 'column', style?.gap ?? 0, style?.justifyContent ?? 'start', style?.alignItems ?? 'start', style?.flexWrap ?? 'nowrap');
+    }
+    else if (display === 'table') {
+        content = layoutTable(node, styles, boxes, boxX + inset.left, boxY + inset.top, innerW, innerH);
+    }
+    else if (display === 'grid' && style) {
+        content = layoutGrid(node, styles, boxes, boxX + inset.left, boxY + inset.top, innerW, innerH, style);
+    }
+    else {
+        // block or inline — use block flow (inline children flow horizontally within)
+        content = layoutBlockFlow(node.children, styles, boxes, boxX + inset.left, boxY + inset.top, innerW, innerH);
+    }
+    // Block elements fill parent width; inline/inline-block shrink-wrap to content.
+    // Flex/grid children are sized by the flex/grid algorithm, so they shrink-wrap.
+    const parentDisplay = node.parent ? styles.get(node.parent.id)?.display : undefined;
+    const isFlexOrGridChild = parentDisplay === 'flex' || parentDisplay === 'grid';
+    const isBlock = (display === 'block' || display === 'flex' || display === 'grid' || display === 'table')
+        && !isFlexOrGridChild;
+    const autoWidth = isBlock
+        ? (availWidth - margin.left - margin.right)
+        : content.width + inset.left + inset.right;
+    // Input/textarea have intrinsic minimum height of 1 row for the value text
+    const intrinsicHeight = (node.tag === 'input' || node.tag === 'textarea')
+        ? Math.max(content.height, 1)
+        : content.height;
+    const autoHeight = intrinsicHeight + inset.top + inset.bottom;
+    const finalWidth = constrain(nodeWidth ?? autoWidth, style?.minWidth, style?.maxWidth);
+    const finalHeight = constrain(nodeHeight ?? autoHeight, style?.minHeight, style?.maxHeight);
+    boxes.set(node.id, { x: boxX, y: boxY, width: finalWidth, height: finalHeight });
+    // Return outer size including margin
+    return { width: finalWidth + margin.left + margin.right, height: finalHeight + margin.top + margin.bottom };
+}
+function layoutAbsolute(node, styles, boxes, x, y, availWidth, availHeight, style) {
+    const borderWidth = (style.borderStyle && style.borderStyle !== 'none') ? 1 : 0;
+    const inset = {
+        top: resolvePadding(style.paddingTop, availWidth) + borderWidth,
+        right: resolvePadding(style.paddingRight, availWidth) + borderWidth,
+        bottom: resolvePadding(style.paddingBottom, availWidth) + borderWidth,
+        left: resolvePadding(style.paddingLeft, availWidth) + borderWidth,
+    };
+    const nodeWidth = resolveSize(style.width, availWidth);
+    const nodeHeight = resolveSize(style.height, availHeight);
+    const innerW = (nodeWidth ?? availWidth) - inset.left - inset.right;
+    const innerH = (nodeHeight ?? availHeight) - inset.top - inset.bottom;
+    const content = positionChildren(node.children, styles, boxes, x + inset.left, y + inset.top, innerW, innerH, style.flexDirection ?? 'column', style.gap ?? 0, style.justifyContent ?? 'start', style.alignItems ?? 'start');
+    const finalWidth = constrain(nodeWidth ?? (content.width + inset.left + inset.right), style.minWidth, style.maxWidth);
+    const finalHeight = constrain(nodeHeight ?? (content.height + inset.top + inset.bottom), style.minHeight, style.maxHeight);
+    boxes.set(node.id, { x, y, width: finalWidth, height: finalHeight });
+    // Return zero size — absolute elements don't consume space in flow
+    return { width: 0, height: 0 };
+}
+/** Resolve a padding/margin value that may be a number or a % string */
+function resolvePadding(value, availWidth) {
+    if (value === undefined)
+        return 0;
+    if (typeof value === 'number')
+        return value;
+    return resolveSize(value, availWidth) ?? 0;
+}
+function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
+    // Layout absolute children first
+    for (const child of children) {
+        const s = styles.get(child.id);
+        if (s?.position === 'absolute' || s?.position === 'fixed') {
+            layoutNode(child, styles, boxes, x, y, availW, availH);
+        }
+    }
+    let cursorX = x;
+    let cursorY = y;
+    let lineHeight = 0;
+    let maxWidth = 0;
+    let prevBlockMarginBottom = 0;
+    const flatChildren = flattenContents(children, styles);
+    for (const child of flatChildren) {
+        if (child.nodeType === 'comment')
+            continue;
+        const s = styles.get(child.id);
+        if (s?.display === 'none')
+            continue;
+        if (s?.position === 'absolute' || s?.position === 'fixed')
+            continue;
+        const isInline = child.nodeType === 'text' || s?.display === 'inline' || s?.display === 'inline-block';
+        if (isInline) {
+            // Flow horizontally
+            const size = layoutNode(child, styles, boxes, cursorX, cursorY, availW - (cursorX - x), availH);
+            cursorX += size.width;
+            lineHeight = Math.max(lineHeight, size.height);
+            maxWidth = Math.max(maxWidth, cursorX - x);
+            prevBlockMarginBottom = 0;
+        }
+        else {
+            // Block element — new line first if we have inline content
+            if (cursorX > x) {
+                cursorY += lineHeight;
+                cursorX = x;
+                lineHeight = 0;
+            }
+            // Margin collapsing: adjacent vertical margins collapse to the larger
+            const childMarginTop = resolvePadding(s?.marginTop, availW);
+            if (prevBlockMarginBottom > 0 && childMarginTop > 0) {
+                const collapsed = Math.max(prevBlockMarginBottom, childMarginTop);
+                const overlap = prevBlockMarginBottom + childMarginTop - collapsed;
+                cursorY -= overlap;
+            }
+            const size = layoutNode(child, styles, boxes, x, cursorY, availW, availH - (cursorY - y));
+            cursorY += size.height;
+            maxWidth = Math.max(maxWidth, size.width);
+            prevBlockMarginBottom = resolvePadding(s?.marginBottom, availW);
+        }
+    }
+    // Account for trailing inline content
+    if (cursorX > x) {
+        cursorY += lineHeight;
+    }
+    return { width: maxWidth, height: cursorY - y };
+}
+function layoutTable(node, styles, boxes, x, y, availW, availH) {
+    // Collect rows and cells
+    const rows = [];
+    for (const child of node.children) {
+        if (child.tag === 'tr') {
+            const cells = child.children.filter(c => c.tag === 'td' || c.tag === 'th');
+            rows.push(cells);
+        }
+    }
+    if (rows.length === 0)
+        return { width: 0, height: 0 };
+    const numCols = Math.max(...rows.map(r => r.length));
+    const colWidths = new Array(numCols).fill(0);
+    // First pass: measure all cells to find max column widths
+    for (const row of rows) {
+        for (let col = 0; col < row.length; col++) {
+            const cell = row[col];
+            const size = layoutNode(cell, styles, boxes, 0, 0, availW, availH);
+            colWidths[col] = Math.max(colWidths[col], size.width);
+        }
+    }
+    // Add 2 cells padding between columns
+    const colGap = 2;
+    // Second pass: position cells with aligned columns
+    let rowY = y;
+    for (const row of rows) {
+        let colX = x;
+        let rowHeight = 0;
+        // Layout the tr element
+        const trNode = node.children.find(c => c.tag === 'tr' && c.children.includes(row[0]));
+        for (let col = 0; col < row.length; col++) {
+            const cell = row[col];
+            const size = layoutNode(cell, styles, boxes, colX, rowY, colWidths[col], availH);
+            // Table cells fill their column width
+            const cellBox = boxes.get(cell.id);
+            if (cellBox && cellBox.width < colWidths[col])
+                cellBox.width = colWidths[col];
+            rowHeight = Math.max(rowHeight, size.height);
+            colX += colWidths[col] + colGap;
+        }
+        if (trNode) {
+            const trWidth = colWidths.reduce((sum, w) => sum + w, 0) + colGap * (numCols - 1);
+            boxes.set(trNode.id, { x, y: rowY, width: trWidth, height: rowHeight });
+        }
+        rowY += rowHeight;
+    }
+    const totalWidth = colWidths.reduce((sum, w) => sum + w, 0) + colGap * Math.max(0, numCols - 1);
+    return { width: totalWidth, height: rowY - y };
+}
+function layoutGrid(node, styles, boxes, x, y, availW, availH, style) {
+    const children = node.children.filter(c => c.nodeType === 'element' && styles.get(c.id)?.display !== 'none');
+    if (children.length === 0)
+        return { width: 0, height: 0 };
+    const colWidths = parseGridTemplate(style.gridTemplateColumns ?? '', availW);
+    const rowHeights = parseGridTemplate(style.gridTemplateRows ?? '', availH);
+    const numCols = colWidths.length || 1;
+    const gap = style.gap ?? 0;
+    let rowY = y;
+    let maxWidth = 0;
+    let col = 0;
+    let rowIdx = 0;
+    let currentRowHeight = 0; // auto-computed from content
+    for (const child of children) {
+        if (col >= numCols) {
+            const explicitH = rowHeights[rowIdx];
+            rowY += (explicitH ?? currentRowHeight) + gap;
+            col = 0;
+            rowIdx++;
+            currentRowHeight = 0;
+        }
+        const colX = x + colWidths.slice(0, col).reduce((sum, w) => sum + w + gap, 0);
+        const colW = colWidths[col] ?? availW;
+        const explicitRowH = rowHeights[rowIdx];
+        const size = layoutNode(child, styles, boxes, colX, rowY, colW, explicitRowH ?? (availH - (rowY - y)));
+        // Grid children fill their column width
+        const childBox = boxes.get(child.id);
+        if (childBox && childBox.width < colW)
+            childBox.width = colW;
+        currentRowHeight = Math.max(currentRowHeight, size.height);
+        maxWidth = Math.max(maxWidth, colX - x + colW);
+        col++;
+    }
+    const finalRowH = rowHeights[rowIdx] ?? currentRowHeight;
+    return { width: maxWidth, height: (rowY - y) + finalRowH };
+}
+function parseGridTemplate(template, availW) {
+    if (!template)
+        return [];
+    const parts = template.trim().split(/\s+/);
+    const widths = [];
+    const frParts = [];
+    let fixedTotal = 0;
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (part.endsWith('cell')) {
+            const w = Math.round(parseFloat(part));
+            widths.push(w);
+            fixedTotal += w;
+        }
+        else if (part.endsWith('%')) {
+            const w = Math.floor(availW * parseFloat(part) / 100);
+            widths.push(w);
+            fixedTotal += w;
+        }
+        else if (part.endsWith('fr')) {
+            const fr = parseFloat(part);
+            widths.push(0); // placeholder
+            frParts.push({ index: i, fr });
+        }
+        else {
+            widths.push(0);
+        }
+    }
+    // Distribute remaining space to fr units
+    if (frParts.length > 0) {
+        const totalFr = frParts.reduce((sum, p) => sum + p.fr, 0);
+        const remaining = Math.max(0, availW - fixedTotal);
+        for (const { index, fr } of frParts) {
+            widths[index] = Math.floor(remaining * fr / totalFr);
+        }
+    }
+    return widths;
+}
+function positionChildren(children, styles, boxes, innerX, innerY, innerW, innerH, dir, gap, justify, align, wrap = 'nowrap') {
+    // Layout absolute children first (they don't affect flow)
+    for (const child of children) {
+        const s = styles.get(child.id);
+        if (s?.position === 'absolute' || s?.position === 'fixed') {
+            layoutNode(child, styles, boxes, innerX, innerY, innerW, innerH);
+        }
+    }
+    // Flatten display:contents children into the list
+    const flatChildren = flattenContents(children, styles);
+    const visible = flatChildren.filter(c => {
+        if (c.nodeType === 'comment')
+            return false;
+        const s = styles.get(c.id);
+        if (s?.display === 'none')
+            return false;
+        if (s?.position === 'absolute' || s?.position === 'fixed')
+            return false;
+        return true;
+    });
+    if (visible.length === 0)
+        return { width: 0, height: 0 };
+    // Pre-measure to filter out zero-size items (e.g. whitespace text nodes)
+    const measured = visible.map(child => ({
+        child,
+        size: layoutNode(child, styles, boxes, 0, 0, innerW, innerH),
+    }));
+    const nonEmpty = measured.filter(({ size }) => size.width > 0 || size.height > 0);
+    if (nonEmpty.length === 0)
+        return { width: 0, height: 0 };
+    // Sort by order property, then handle reverse
+    const sorted = [...nonEmpty].sort((a, b) => {
+        const orderA = styles.get(a.child.id)?.order ?? 0;
+        const orderB = styles.get(b.child.id)?.order ?? 0;
+        return orderA - orderB;
+    });
+    const isReverse = dir === 'row-reverse' || dir === 'column-reverse';
+    const baseDir = (dir === 'row' || dir === 'row-reverse') ? 'row' : 'column';
+    const orderedItems = isReverse ? sorted.reverse() : sorted;
+    const ordered = orderedItems.map(item => item.child);
+    // Use pre-measured sizes, overridden by flex-basis when set
+    const sizes = orderedItems.map(item => {
+        const s = styles.get(item.child.id);
+        const basis = s?.flexBasis;
+        if (basis !== undefined && basis !== 'auto') {
+            const basisValue = typeof basis === 'number' ? basis : 0;
+            return baseDir === 'row'
+                ? { width: basisValue, height: item.size.height }
+                : { width: item.size.width, height: basisValue };
+        }
+        return item.size;
+    });
+    const growValues = ordered.map(child => styles.get(child.id)?.flexGrow ?? 0);
+    const shrinkValues = ordered.map(child => styles.get(child.id)?.flexShrink ?? 1);
+    const totalGrow = growValues.reduce((a, b) => a + b, 0);
+    const totalMain = sizes.reduce((sum, s, i) => {
+        return sum + (baseDir === 'row' ? s.width : s.height) + (i > 0 ? gap : 0);
+    }, 0);
+    const availMain = baseDir === 'row' ? innerW : innerH;
+    const freeSpace = Math.max(0, availMain - totalMain);
+    const overflow = Math.max(0, totalMain - availMain);
+    const hasGrow = totalGrow > 0;
+    const totalShrink = overflow > 0 ? shrinkValues.reduce((a, b) => a + b, 0) : 0;
+    // Position
+    let mainPos = computeMainStart(justify, freeSpace, ordered.length, hasGrow);
+    const itemGap = computeItemGap(justify, gap, freeSpace, ordered.length, hasGrow);
+    let contentWidth = 0;
+    let contentHeight = 0;
+    let crossPos = 0;
+    let lineHeight = 0;
+    for (let i = 0; i < ordered.length; i++) {
+        let mainSize = baseDir === 'row' ? sizes[i].width : sizes[i].height;
+        if (hasGrow && growValues[i] > 0) {
+            mainSize += Math.floor(freeSpace * growValues[i] / totalGrow);
+        }
+        if (overflow > 0 && totalShrink > 0 && shrinkValues[i] > 0) {
+            mainSize -= Math.floor(overflow * shrinkValues[i] / totalShrink);
+            mainSize = Math.max(0, mainSize);
+        }
+        // Wrap check
+        if (wrap === 'wrap' && mainPos + mainSize > availMain && i > 0) {
+            crossPos += lineHeight + gap;
+            mainPos = 0;
+            lineHeight = 0;
+        }
+        const crossSize = baseDir === 'row' ? sizes[i].height : sizes[i].width;
+        const crossAvail = baseDir === 'row' ? innerH : innerW;
+        // Check align-self
+        const childStyle = styles.get(ordered[i].id);
+        const selfAlign = childStyle?.alignSelf !== 'auto'
+            ? childStyle?.alignSelf ?? align
+            : align;
+        const crossOffset = computeCrossOffset(selfAlign, crossAvail, crossSize);
+        const finalCx = baseDir === 'row' ? innerX + mainPos : innerX + crossOffset;
+        const finalCy = baseDir === 'row' ? innerY + crossPos + crossOffset : innerY + mainPos;
+        const childAvailW = baseDir === 'row' ? mainSize : innerW;
+        const childAvailH = baseDir === 'row' ? innerH : mainSize;
+        layoutNode(ordered[i], styles, boxes, finalCx, finalCy, childAvailW, childAvailH);
+        // Override main-axis size for flex-grown/shrunk items
+        const box = boxes.get(ordered[i].id);
+        if (box) {
+            if (baseDir === 'row' && box.width !== mainSize)
+                box.width = mainSize;
+            if (baseDir === 'column' && box.height !== mainSize)
+                box.height = mainSize;
+        }
+        lineHeight = Math.max(lineHeight, baseDir === 'row' ? sizes[i].height : sizes[i].width);
+        mainPos += mainSize + (i < ordered.length - 1 ? itemGap : 0);
+        contentWidth = baseDir === 'row' ? Math.max(contentWidth, mainPos) : Math.max(contentWidth, sizes[i].width);
+        contentHeight = baseDir === 'row' ? crossPos + lineHeight : mainPos;
+    }
+    return { width: contentWidth, height: contentHeight };
+}

package/dist/src/layout/flex.d.ts

@@ -0,0 +1,4 @@
+import { ResolvedStyle } from '../css/compute.js';
+export declare function computeMainStart(justify: ResolvedStyle['justifyContent'], freeSpace: number, count: number, hasGrow: boolean): number;
+export declare function computeItemGap(justify: ResolvedStyle['justifyContent'], gap: number, freeSpace: number, count: number, hasGrow: boolean): number;
+export declare function computeCrossOffset(align: ResolvedStyle['alignItems'], crossAvail: number, crossSize: number): number;

package/dist/src/layout/flex.js

@@ -0,0 +1,30 @@
+export function computeMainStart(justify, freeSpace, count, hasGrow) {
+    if (hasGrow || count === 0)
+        return 0;
+    switch (justify) {
+        case 'end': return freeSpace;
+        case 'center': return Math.floor(freeSpace / 2);
+        case 'space-around': return Math.floor(freeSpace / (count * 2));
+        case 'space-evenly': return Math.floor(freeSpace / (count + 1));
+        default: return 0;
+    }
+}
+export function computeItemGap(justify, gap, freeSpace, count, hasGrow) {
+    if (hasGrow)
+        return gap;
+    if (count <= 1)
+        return 0;
+    switch (justify) {
+        case 'space-between': return Math.floor(freeSpace / (count - 1));
+        case 'space-around': return Math.floor(freeSpace / count);
+        case 'space-evenly': return Math.floor(freeSpace / (count + 1));
+        default: return gap;
+    }
+}
+export function computeCrossOffset(align, crossAvail, crossSize) {
+    switch (align) {
+        case 'end': return crossAvail - crossSize;
+        case 'center': return Math.floor((crossAvail - crossSize) / 2);
+        default: return 0;
+    }
+}

package/dist/src/layout/incremental.d.ts

@@ -0,0 +1,8 @@
+import { TermNode } from '../renderer/node.js';
+import { ResolvedStyle } from '../css/compute.js';
+import { LayoutBox } from './engine.js';
+/**
+ * Incrementally re-layout only dirty subtrees.
+ * Falls back to full layout when dirty nodes affect auto-sized ancestors.
+ */
+export declare function computeLayoutIncremental(root: TermNode, styles: Map<number, ResolvedStyle>, existingLayout: Map<number, LayoutBox>, dirtyNodes: Set<TermNode>, availWidth: number, availHeight: number, onLayout?: () => void): Map<number, LayoutBox>;

package/dist/src/layout/incremental.js

@@ -0,0 +1,58 @@
+import { computeLayout } from './engine.js';
+/**
+ * Incrementally re-layout only dirty subtrees.
+ * Falls back to full layout when dirty nodes affect auto-sized ancestors.
+ */
+export function computeLayoutIncremental(root, styles, existingLayout, dirtyNodes, availWidth, availHeight, onLayout) {
+    if (dirtyNodes.size === 0)
+        return existingLayout;
+    // Check if any dirty node has an auto-sized ancestor — if so, full re-layout
+    // because the size change may propagate up
+    const needsFullLayout = [...dirtyNodes].some(node => hasAutoSizedAncestor(node, styles));
+    if (needsFullLayout) {
+        onLayout?.();
+        return computeLayout(root, styles, availWidth, availHeight);
+    }
+    // All dirty nodes are within fixed-size containers — only re-layout those subtrees
+    const result = new Map(existingLayout);
+    for (const dirtyNode of dirtyNodes) {
+        const boundary = findLayoutBoundary(dirtyNode, styles);
+        const boundaryBox = existingLayout.get(boundary.id);
+        if (!boundaryBox)
+            continue;
+        onLayout?.();
+        const subtreeLayout = computeLayout(boundary, styles, boundaryBox.width, boundaryBox.height);
+        // Merge subtree layout into result, adjusting positions
+        for (const [id, box] of subtreeLayout) {
+            result.set(id, {
+                x: box.x + boundaryBox.x,
+                y: box.y + boundaryBox.y,
+                width: box.width,
+                height: box.height,
+            });
+        }
+        // The boundary itself keeps its original position
+        result.set(boundary.id, boundaryBox);
+    }
+    return result;
+}
+function hasAutoSizedAncestor(node, styles) {
+    let current = node.parent;
+    while (current) {
+        const style = styles.get(current.id);
+        if (!style || style.width === null || style.height === null)
+            return true;
+        current = current.parent;
+    }
+    return false;
+}
+function findLayoutBoundary(node, styles) {
+    let current = node.parent;
+    while (current?.parent) {
+        const style = styles.get(current.id);
+        if (style && style.width !== null && style.height !== null)
+            return current;
+        current = current.parent;
+    }
+    return current ?? node;
+}

package/dist/src/layout/size.d.ts

@@ -0,0 +1,2 @@
+export declare function resolveSize(value: number | string | null | undefined, available: number): number | null;
+export declare function constrain(value: number, min: number | null | undefined, max: number | null | undefined): number;

package/dist/src/layout/size.js

@@ -0,0 +1,25 @@
+import { evaluateCalc } from '../css/calc.js';
+export function resolveSize(value, available) {
+    if (value === null || value === undefined)
+        return null;
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string') {
+        if (value.endsWith('%')) {
+            return Math.floor(available * parseFloat(value) / 100);
+        }
+        // calc(), min(), max(), clamp()
+        const calcResult = evaluateCalc(value, available);
+        if (calcResult !== null)
+            return calcResult;
+    }
+    return null;
+}
+export function constrain(value, min, max) {
+    let result = value;
+    if (min != null)
+        result = Math.max(result, min);
+    if (max != null)
+        result = Math.min(result, max);
+    return result;
+}

package/dist/src/layout/text.d.ts

@@ -0,0 +1,7 @@
+export declare function wrapText(text: string, width: number): string[];
+export declare function truncateText(text: string, width: number): string;
+export declare function truncateMiddle(text: string, width: number): string;
+export declare function measureText(text: string, availWidth: number): {
+    width: number;
+    height: number;
+};

package/dist/src/layout/text.js

@@ -0,0 +1,52 @@
+export function wrapText(text, width) {
+    if (text === '')
+        return [''];
+    if (text.length <= width)
+        return [text];
+    const lines = [];
+    let remaining = text;
+    while (remaining.length > 0) {
+        if (remaining.length <= width) {
+            lines.push(remaining);
+            break;
+        }
+        // Find last space within width
+        let breakAt = remaining.lastIndexOf(' ', width);
+        if (breakAt <= 0) {
+            // No space found — hard break at width
+            breakAt = width;
+            lines.push(remaining.substring(0, breakAt));
+            remaining = remaining.substring(breakAt);
+        }
+        else {
+            lines.push(remaining.substring(0, breakAt));
+            remaining = remaining.substring(breakAt + 1); // skip the space
+        }
+    }
+    return lines;
+}
+export function truncateText(text, width) {
+    if (width <= 0)
+        return '';
+    if (text.length <= width)
+        return text;
+    if (width === 1)
+        return '…';
+    return text.substring(0, width - 1) + '…';
+}
+export function truncateMiddle(text, width) {
+    if (width <= 0)
+        return '';
+    if (text.length <= width)
+        return text;
+    if (width <= 3)
+        return text.substring(0, width - 1) + '…';
+    const half = Math.floor((width - 1) / 2);
+    const endLen = width - 1 - half;
+    return text.substring(0, half) + '…' + text.substring(text.length - endLen);
+}
+export function measureText(text, availWidth) {
+    const lines = wrapText(text, availWidth);
+    const maxLineWidth = lines.reduce((max, line) => Math.max(max, line.length), 0);
+    return { width: maxLineWidth, height: lines.length };
+}

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

@@ -0,0 +1,23 @@
+export declare function moveTo(col: number, row: number): string;
+export declare function clearScreen(): string;
+export declare function hideCursor(): string;
+export declare function showCursor(): string;
+export declare function enterAltScreen(): string;
+export declare function exitAltScreen(): string;
+export declare function resetStyle(): string;
+export declare function bold(): string;
+export declare function dim(): string;
+export declare function italic(): string;
+export declare function underline(): string;
+export declare function strikethrough(): string;
+export declare function fgColor(color: string): string;
+export declare function bgColor(color: string): string;
+export declare function hyperlinkOpen(url: string): string;
+export declare function hyperlinkClose(): string;
+export declare function enableMouse(): string;
+export declare function disableMouse(): string;
+export declare function setCursorShape(shape: 'block' | 'underline' | 'bar'): string;
+export declare function enableBracketedPaste(): string;
+export declare function disableBracketedPaste(): string;
+export declare function beginSyncUpdate(): string;
+export declare function endSyncUpdate(): string;