@svelterm/core 0.1.0 → 0.21.0

package/dist/src/layout/engine.js

@@ -1,6 +1,80 @@
+import { SvtRegionNode, childrenWithPseudos } from '../renderer/node.js';
+import { NodeMap } from '../utils/node-map.js';
 import { computeMainStart, computeItemGap, computeCrossOffset } from './flex.js';
 import { measureText } from './text.js';
+import { measureAnsiText } from '../render/ansi-text.js';
+import { imageIntrinsicSize } from '../render/image.js';
 import { resolveSize, constrain } from './size.js';
+import { parseCellLength } from '../css/values.js';
+/**
+ * Check if two adjacent siblings both have borders on their shared edge.
+ * Returns true if the gap between them should be reduced by 1 to account
+ * for the visual spacing inherent in box-drawing border characters.
+ */
+function shouldAdjustBorderGap(prevStyle, nextStyle, direction) {
+    if (!prevStyle || !nextStyle)
+        return false;
+    if (prevStyle.borderStyle === 'none' || nextStyle.borderStyle === 'none')
+        return false;
+    if (direction === 'vertical') {
+        return prevStyle.borderBottom && nextStyle.borderTop;
+    }
+    else {
+        return prevStyle.borderRight && nextStyle.borderLeft;
+    }
+}
+/**
+ * Approximate auto min-size in the main flex axis (CSS Flexbox §4.5).
+ * Returns the smallest size the item can be without losing essential content:
+ * borders that occupy main-axis space + (1 cell if the item has children, else 0).
+ * overflow:hidden items can collapse to 0.
+ */
+function autoMinMainSize(node, style, baseDir) {
+    if (!style)
+        return 0;
+    if (style.overflow === 'hidden' || style.overflow === 'scroll')
+        return 0;
+    if (node.children.length === 0)
+        return 0;
+    const hasBorder = style.borderStyle && style.borderStyle !== 'none';
+    const borderMain = hasBorder
+        ? (baseDir === 'row'
+            ? (style.borderLeft ? 1 : 0) + (style.borderRight ? 1 : 0)
+            : (style.borderTop ? 1 : 0) + (style.borderBottom ? 1 : 0))
+        : 0;
+    return borderMain + 1;
+}
+/** Table-internal display values that need an anonymous table wrapper when
+ * they appear in normal block flow (§17.2.1). */
+function isTableInternal(node, styles) {
+    if (node.nodeType !== 'element')
+        return false;
+    const display = styles.get(node.id)?.display;
+    return display === 'table-row' || display === 'table-cell'
+        || display === 'table-row-group' || display === 'table-header-group'
+        || display === 'table-footer-group';
+}
+/** Inter-element whitespace and comments don't break a run of consecutive
+ * table-internal siblings. */
+function absorbsIntoTableRun(node, styles) {
+    if (isTableInternal(node, styles))
+        return true;
+    if (node.nodeType === 'comment')
+        return true;
+    return node.nodeType === 'text' && (node.text ?? '').trim() === '';
+}
+/** Collect the run of consecutive table-internal siblings starting at
+ * `start`, returning the run and the index of its last absorbed child. */
+function gatherTableRun(children, start, styles) {
+    const run = [];
+    let i = start;
+    while (i < children.length && absorbsIntoTableRun(children[i], styles)) {
+        if (isTableInternal(children[i], styles))
+            run.push(children[i]);
+        i++;
+    }
+    return { run, end: i - 1 };
+}
 /** Flatten display:contents elements, promoting their children. */
 function flattenContents(children, styles) {
     const result = [];
@@ -15,7 +89,7 @@ function flattenContents(children, styles) {
     return result;
 }
 export function computeLayout(root, styles, availWidth, availHeight) {
-    const boxes = new Map();
+    const boxes = new NodeMap();
     layoutNode(root, styles, boxes, 0, 0, availWidth, availHeight);
     return boxes;
 }
@@ -33,19 +107,38 @@ function layoutText(node, boxes, x, y, availWidth = Infinity, styles) {
     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) {
+    // Preserve whitespace between inline siblings (matching browser behaviour),
+    // but collapse between block-level siblings or inside flex/grid containers
+    // (where children are blockified).
+    if (text === '') {
         boxes.set(node.id, { x, y, width: 0, height: 0 });
         return { width: 0, height: 0 };
     }
+    if (!preserveWhitespace && text.trim() === '' && node.parent?.children.some(c => c.nodeType === 'element')) {
+        const parentDisplay = parentStyle?.display ?? 'block';
+        const isFlexOrGrid = parentDisplay === 'flex' || parentDisplay === 'grid';
+        const hasBlockSibling = node.parent.children.some(c => {
+            if (c.nodeType !== 'element')
+                return false;
+            const d = styles?.get(c.id)?.display ?? 'block';
+            return d !== 'inline';
+        });
+        if (isFlexOrGrid || hasBlockSibling) {
+            boxes.set(node.id, { x, y, width: 0, height: 0 });
+            return { width: 0, height: 0 };
+        }
+    }
+    // <svt-ansi> content is pre-styled and pre-formatted: measure with
+    // escape sequences stripped, no wrapping.
+    if (node.parent?.tag === 'svt-ansi') {
+        const measured = measureAnsiText(text);
+        boxes.set(node.id, { x, y, width: measured.width, height: measured.height });
+        return measured;
+    }
     // Check parent's whiteSpace
     const noWrap = parentStyle?.whiteSpace === 'nowrap';
     const wrapWidth = noWrap ? Infinity : (availWidth > 0 ? availWidth : Infinity);
-    const measured = measureText(text, wrapWidth);
+    const measured = measureText(text, wrapWidth, parentStyle?.wordBreak ?? 'normal');
     boxes.set(node.id, { x, y, width: measured.width, height: measured.height });
     return measured;
 }
@@ -58,7 +151,7 @@ function layoutElement(node, styles, boxes, x, y, availWidth, availHeight) {
         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);
+        return layoutBlockFlow(childrenWithPseudos(node), 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') {
@@ -73,12 +166,22 @@ function layoutElement(node, styles, boxes, x, y, availWidth, availHeight) {
         left: resolvePadding(style?.marginLeft, availWidth),
     };
     const borderWidth = (style?.borderStyle && style.borderStyle !== 'none') ? 1 : 0;
+    const collapsesPadding = isOuterFacingBorder(style?.borderStyle);
+    const collapsesMargin = isInnerFacingBorder(style?.borderStyle);
     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,
+        top: insetWithCollapse(style?.paddingTop, availWidth, style?.borderTop, borderWidth, collapsesPadding),
+        right: insetWithCollapse(style?.paddingRight, availWidth, style?.borderRight, borderWidth, collapsesPadding),
+        bottom: insetWithCollapse(style?.paddingBottom, availWidth, style?.borderBottom, borderWidth, collapsesPadding),
+        left: insetWithCollapse(style?.paddingLeft, availWidth, style?.borderLeft, borderWidth, collapsesPadding),
     };
+    if (collapsesMargin) {
+        margin = {
+            top: collapseMargin(margin.top, style?.borderTop, borderWidth),
+            right: collapseMargin(margin.right, style?.borderRight, borderWidth),
+            bottom: collapseMargin(margin.bottom, style?.borderBottom, borderWidth),
+            left: collapseMargin(margin.left, style?.borderLeft, borderWidth),
+        };
+    }
     // Resolve auto margins for centering
     const nodeWidthForAutoMargin = resolveSize(style?.width, availWidth);
     if (margin.left === -1 && margin.right === -1 && nodeWidthForAutoMargin !== null) {
@@ -93,17 +196,39 @@ function layoutElement(node, styles, boxes, x, y, availWidth, availHeight) {
     }
     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;
+    // Walk past display:contents ancestors to find the actual layout parent
+    let layoutParent = node.parent;
+    while (layoutParent && styles.get(layoutParent.id)?.display === 'contents') {
+        layoutParent = layoutParent.parent;
+    }
+    const parentDisplay = layoutParent ? styles.get(layoutParent.id)?.display : undefined;
+    const isFlexOrGridChild = parentDisplay === 'flex' || parentDisplay === 'grid';
+    const isContentBox = style?.boxSizing === 'content-box';
+    let explicitWidth = resolveSize(style?.width, availWidth - margin.left - margin.right);
+    if (explicitWidth !== null && isContentBox)
+        explicitWidth += inset.left + inset.right;
+    // Flex/grid children are sized by their parent algorithm, not clamped to available width
+    const nodeWidth = explicitWidth !== null
+        ? (isFlexOrGridChild ? explicitWidth : Math.min(explicitWidth, availWidth - margin.left - margin.right))
+        : null;
+    let nodeHeight = resolveSize(style?.height, availHeight - margin.top - margin.bottom);
+    if (nodeHeight !== null && isContentBox)
+        nodeHeight += inset.top + inset.bottom;
+    // Apply max-width/max-height to available space so children (e.g. flex-wrap) respect constraints
+    let effectiveW = nodeWidth ?? (availWidth - margin.left - margin.right);
+    if (style?.maxWidth != null && effectiveW > style.maxWidth)
+        effectiveW = style.maxWidth;
+    let effectiveH = nodeHeight ?? (availHeight - margin.top - margin.bottom);
+    if (style?.maxHeight != null && effectiveH > style.maxHeight)
+        effectiveH = style.maxHeight;
+    const innerW = effectiveW - inset.left - inset.right;
+    const innerH = effectiveH - 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');
+        content = positionChildren(childrenWithPseudos(node), 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') {
+    else if (display === 'table' || display === 'inline-table') {
         content = layoutTable(node, styles, boxes, boxX + inset.left, boxY + inset.top, innerW, innerH);
     }
     else if (display === 'grid' && style) {
@@ -111,41 +236,74 @@ function layoutElement(node, styles, boxes, x, y, availWidth, availHeight) {
     }
     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);
+        content = layoutBlockFlow(childrenWithPseudos(node), 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
+    // Paint primitives (svt-region) have no meaningful content size — they
+    // exist to fill an allocated cell area. Default to the parent's available
+    // box on both axes when no explicit dimension was given, like an
+    // intrinsically sized replaced element rather than a content-sized div.
+    const isFillPrimitive = node instanceof SvtRegionNode;
+    let autoWidth = isFillPrimitive || 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')
+    // <img> is a replaced element: intrinsic size from its pixels
+    // (1 px per column, 2 px per row for half-block rendering)
+    const intrinsicImage = node.tag === 'img' ? imageIntrinsicSize(node) : null;
+    if (intrinsicImage) {
+        autoWidth = Math.min(intrinsicImage.width + inset.left + inset.right, availWidth - margin.left - margin.right);
+    }
+    // A select shrink-wraps to its longest option label plus the " ▾" indicator
+    if (node.tag === 'select') {
+        autoWidth = Math.max(autoWidth, longestOptionLength(node) + 2 + inset.left + inset.right);
+    }
+    // Input/textarea/select have intrinsic minimum height of 1 row
+    const intrinsicHeight = (node.tag === 'input' || node.tag === 'textarea' || node.tag === 'select')
         ? Math.max(content.height, 1)
         : content.height;
-    const autoHeight = intrinsicHeight + inset.top + inset.bottom;
+    const autoHeight = isFillPrimitive
+        ? (availHeight - margin.top - margin.bottom)
+        : intrinsicImage
+            ? intrinsicImage.height + inset.top + inset.bottom
+            : 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 longestOptionLength(select) {
+    let longest = 0;
+    const walk = (node) => {
+        for (const child of node.children) {
+            if (child.nodeType !== 'element')
+                continue;
+            if (child.tag === 'option')
+                longest = Math.max(longest, child.textContent.trim().length);
+            else if (child.tag === 'optgroup')
+                walk(child);
+        }
+    };
+    walk(select);
+    return longest;
+}
 function layoutAbsolute(node, styles, boxes, x, y, availWidth, availHeight, style) {
     const borderWidth = (style.borderStyle && style.borderStyle !== 'none') ? 1 : 0;
+    const collapsesPadding = isOuterFacingBorder(style.borderStyle);
     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,
+        top: insetWithCollapse(style.paddingTop, availWidth, style.borderTop, borderWidth, collapsesPadding),
+        right: insetWithCollapse(style.paddingRight, availWidth, style.borderRight, borderWidth, collapsesPadding),
+        bottom: insetWithCollapse(style.paddingBottom, availWidth, style.borderBottom, borderWidth, collapsesPadding),
+        left: insetWithCollapse(style.paddingLeft, availWidth, style.borderLeft, borderWidth, collapsesPadding),
     };
     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 content = positionChildren(childrenWithPseudos(node), 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 });
@@ -160,6 +318,42 @@ function resolvePadding(value, availWidth) {
         return value;
     return resolveSize(value, availWidth) ?? 0;
 }
+/**
+ * Block-character border styles whose stroke faces outward.
+ * The unused (inner) portion of the border cell collapses with `padding`.
+ */
+function isOuterFacingBorder(borderStyle) {
+    return borderStyle === 'eighth-cell-outer' || borderStyle === 'half-cell-outer';
+}
+/**
+ * Block-character border styles whose stroke faces inward.
+ * The unused (outer) portion of the border cell collapses with `margin`.
+ */
+function isInnerFacingBorder(borderStyle) {
+    return borderStyle === 'eighth-cell-inner' || borderStyle === 'half-cell-inner';
+}
+/**
+ * Compute total inset on one side, applying the padding/border collapse rule when applicable.
+ * When the border absorbs padding, total inset = max(padding, borderWidth).
+ * Otherwise total inset = padding + borderWidth.
+ */
+function insetWithCollapse(padding, availWidth, sideHasBorder, borderWidth, collapses) {
+    const p = resolvePadding(padding, availWidth);
+    const sideBorder = sideHasBorder ? borderWidth : 0;
+    if (collapses && sideHasBorder)
+        return Math.max(p, sideBorder);
+    return p + sideBorder;
+}
+/**
+ * Apply the margin collapse rule for inner-facing borders on a single side.
+ * When the border absorbs margin: effective margin = max(margin - 1, 0).
+ * Caller must check the side actually has a border before calling.
+ */
+function collapseMargin(marginValue, sideHasBorder, borderWidth) {
+    if (!sideHasBorder || marginValue <= 0)
+        return marginValue;
+    return Math.max(marginValue - borderWidth, 0);
+}
 function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
     // Layout absolute children first
     for (const child of children) {
@@ -173,8 +367,10 @@ function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
     let lineHeight = 0;
     let maxWidth = 0;
     let prevBlockMarginBottom = 0;
+    let prevBlockStyle;
     const flatChildren = flattenContents(children, styles);
-    for (const child of flatChildren) {
+    for (let i = 0; i < flatChildren.length; i++) {
+        const child = flatChildren[i];
         if (child.nodeType === 'comment')
             continue;
         const s = styles.get(child.id);
@@ -182,7 +378,26 @@ function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
             continue;
         if (s?.position === 'absolute' || s?.position === 'fixed')
             continue;
-        const isInline = child.nodeType === 'text' || s?.display === 'inline' || s?.display === 'inline-block';
+        // Stray table-internal content (a <tr>/<td>/row-group outside a
+        // table) wraps in an anonymous table together with its consecutive
+        // table-internal siblings (§17.2.1).
+        if (isTableInternal(child, styles)) {
+            const { run, end } = gatherTableRun(flatChildren, i, styles);
+            i = end;
+            if (cursorX > x) {
+                cursorY += lineHeight;
+                cursorX = x;
+                lineHeight = 0;
+            }
+            const size = layoutTableChildren(run, undefined, styles, boxes, x, cursorY, availW, availH - (cursorY - y));
+            cursorY += size.height;
+            maxWidth = Math.max(maxWidth, size.width);
+            prevBlockMarginBottom = 0;
+            prevBlockStyle = undefined;
+            continue;
+        }
+        const isInline = child.nodeType === 'text' || s?.display === 'inline'
+            || s?.display === 'inline-block' || s?.display === 'inline-table';
         if (isInline) {
             // Flow horizontally
             const size = layoutNode(child, styles, boxes, cursorX, cursorY, availW - (cursorX - x), availH);
@@ -205,10 +420,15 @@ function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
                 const overlap = prevBlockMarginBottom + childMarginTop - collapsed;
                 cursorY -= overlap;
             }
+            // Border collapse: adjacent bordered blocks overlap by 1
+            if (shouldAdjustBorderGap(prevBlockStyle, s, 'vertical')) {
+                cursorY -= 1;
+            }
             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);
+            prevBlockStyle = s;
         }
     }
     // Account for trailing inline content
@@ -217,128 +437,632 @@ function layoutBlockFlow(children, styles, boxes, x, y, availW, availH) {
     }
     return { width: maxWidth, height: cursorY - y };
 }
-function layoutTable(node, styles, boxes, x, y, availW, availH) {
-    // Collect rows and cells
+function rawColspan(cell) {
+    const raw = cell.attributes.get('colspan');
+    if (!raw)
+        return 1;
+    const n = parseInt(raw);
+    // colspan=0 means "span remaining columns"; resolved against the table's
+    // numCols in buildTableGrid.
+    if (n === 0)
+        return 0;
+    return n > 0 ? n : 1;
+}
+function cellRowspan(cell) {
+    const raw = cell.attributes.get('rowspan');
+    if (!raw)
+        return 1;
+    const n = parseInt(raw);
+    return n > 0 ? n : 1;
+}
+function buildTableGrid(rows) {
+    // First pass: numCols treating colspan=0 as 1.
+    let numCols = 0;
+    const provisional = rows.map(() => []);
+    for (let r = 0; r < rows.length; r++) {
+        let col = 0;
+        for (const cell of rows[r].cells) {
+            while (provisional[r][col])
+                col++;
+            const cs = rawColspan(cell);
+            const span = cs === 0 ? 1 : cs;
+            const rspan = cellRowspan(cell);
+            for (let dr = 1; dr < rspan && r + dr < rows.length; dr++) {
+                for (let dc = 0; dc < span; dc++)
+                    provisional[r + dr][col + dc] = true;
+            }
+            col += span;
+            if (col > numCols)
+                numCols = col;
+        }
+    }
+    // Second pass: rebuild grid with colspan=0 expanded to fill remaining columns.
+    const occupied = rows.map(() => []);
+    const span = new Map();
+    for (let r = 0; r < rows.length; r++) {
+        let col = 0;
+        for (const cell of rows[r].cells) {
+            while (occupied[r][col])
+                col++;
+            const cs = rawColspan(cell);
+            const resolved = cs === 0 ? Math.max(1, numCols - col) : cs;
+            span.set(cell.id, resolved);
+            const rspan = cellRowspan(cell);
+            for (let dr = 1; dr < rspan && r + dr < rows.length; dr++) {
+                for (let dc = 0; dc < resolved; dc++)
+                    occupied[r + dr][col + dc] = true;
+            }
+            col += resolved;
+        }
+    }
+    return { occupied, numCols, span };
+}
+function cellColspan(grid, cell) {
+    return grid.span.get(cell.id) ?? 1;
+}
+/** True for content that acts as a table cell inside a row: real cells, plus
+ * stray text / elements that get an anonymous cell box per §17.2.1. */
+function isCellContent(node, styles) {
+    if (node.nodeType === 'text')
+        return (node.text ?? '').trim() !== '';
+    if (node.nodeType !== 'element')
+        return false;
+    const display = styles.get(node.id)?.display;
+    return display !== 'none' && !isRowLevelDisplay(display);
+}
+function isRowLevelDisplay(display) {
+    return display === 'table-row'
+        || display === 'table-row-group' || display === 'table-header-group'
+        || display === 'table-footer-group'
+        || display === 'table-caption' || display === 'table-column'
+        || display === 'table-column-group';
+}
+function cellsOfRow(trNode, styles) {
+    return trNode.children.filter(c => isCellContent(c, styles));
+}
+/**
+ * Group the children of a table or row-group into rows. Explicit table-rows
+ * keep their cells; a run of consecutive stray cell-content children forms
+ * one anonymous row (§17.2.1). Simplification vs the spec: each stray child
+ * is its own anonymous cell rather than coalescing consecutive inline
+ * content into one.
+ */
+function groupIntoRows(children, styles) {
     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);
+    let anonymous = [];
+    const flushAnonymous = () => {
+        if (anonymous.length > 0) {
+            rows.push({ trNode: null, cells: anonymous });
+            anonymous = [];
+        }
+    };
+    for (const child of children) {
+        if (child.nodeType === 'element' && styles.get(child.id)?.display === 'table-row') {
+            flushAnonymous();
+            rows.push({ trNode: child, cells: cellsOfRow(child, styles) });
+        }
+        else if (isCellContent(child, styles)) {
+            anonymous.push(child);
         }
     }
-    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) {
+    flushAnonymous();
+    return rows;
+}
+function collectTableRows(children, styles) {
+    // Per CSS 2.2 §17.5.2: header → bodies (in source order) → footer.
+    // Bare <tr> (or stray cell content) children of <table> form an implicit
+    // body, mirroring the browser HTML parser's auto-tbody insertion.
+    const headerRows = [];
+    const bodyRows = [];
+    const footerRows = [];
+    let strayRun = [];
+    const flushStray = () => {
+        if (strayRun.length > 0) {
+            bodyRows.push(...groupIntoRows(strayRun, styles));
+            strayRun = [];
+        }
+    };
+    for (const child of children) {
+        const display = child.nodeType === 'element' ? styles.get(child.id)?.display : undefined;
+        if (display === 'table-header-group') {
+            flushStray();
+            headerRows.push(...groupIntoRows(child.children, styles));
+        }
+        else if (display === 'table-footer-group') {
+            flushStray();
+            footerRows.push(...groupIntoRows(child.children, styles));
+        }
+        else if (display === 'table-row-group') {
+            flushStray();
+            bodyRows.push(...groupIntoRows(child.children, styles));
+        }
+        else {
+            // table-rows and stray cell content accumulate; captions/columns
+            // are filtered out inside groupIntoRows.
+            strayRun.push(child);
+        }
+    }
+    flushStray();
+    return [...headerRows, ...bodyRows, ...footerRows];
+}
+function findCaption(children, styles) {
+    return children.find(c => styles.get(c.id)?.display === 'table-caption');
+}
+function colSpanAttr(colNode) {
+    const raw = colNode.attributes.get('span');
+    if (!raw)
+        return 1;
+    const n = parseInt(raw);
+    return n > 0 ? n : 1;
+}
+function explicitWidth(node, styles) {
+    const w = styles.get(node.id)?.width;
+    return typeof w === 'number' && w > 0 ? w : 0;
+}
+function applyColHint(hints, col, span, width) {
+    if (width <= 0)
+        return;
+    for (let i = 0; i < span; i++) {
+        hints[col + i] = Math.max(hints[col + i] ?? 0, width);
+    }
+}
+function collectColHints(children, styles) {
+    // Walks <col> and <colgroup> in document order; returns per-column width
+    // hints (sparse). <col span> covers multiple columns; a <colgroup> with no
+    // <col> children covers `span` columns itself.
+    const hints = [];
+    let col = 0;
+    for (const child of children) {
+        const display = styles.get(child.id)?.display;
+        if (display === 'table-column') {
+            const span = colSpanAttr(child);
+            applyColHint(hints, col, span, explicitWidth(child, styles));
+            col += span;
+        }
+        else if (display === 'table-column-group') {
+            const colChildren = child.children.filter(c => styles.get(c.id)?.display === 'table-column');
+            if (colChildren.length === 0) {
+                const span = colSpanAttr(child);
+                applyColHint(hints, col, span, explicitWidth(child, styles));
+                col += span;
+            }
+            else {
+                for (const colNode of colChildren) {
+                    const span = colSpanAttr(colNode);
+                    applyColHint(hints, col, span, explicitWidth(colNode, styles));
+                    col += span;
+                }
+            }
+        }
+    }
+    return hints;
+}
+/**
+ * Horizontal/vertical gap between table tracks. The separate model uses
+ * border-spacing; the collapsed model overlaps tracks by one cell where
+ * adjacent border strokes would otherwise double up, so they coincide and
+ * merge into shared grid lines. A track boundary only collapses when cells
+ * are bordered on both of its sides (e.g. left+right for columns) — one-sided
+ * borders such as row separators already draw a single line and need no overlap.
+ */
+function tableGaps(tableStyle, rows, styles) {
+    if (tableStyle?.borderCollapse === 'collapse') {
+        return {
+            col: allCellsBordered(rows, styles, 'borderLeft', 'borderRight') ? -1 : 0,
+            row: allCellsBordered(rows, styles, 'borderTop', 'borderBottom') ? -1 : 0,
+        };
+    }
+    return { col: tableStyle?.borderSpacingH ?? 0, row: tableStyle?.borderSpacingV ?? 0 };
+}
+function allCellsBordered(rows, styles, ...sides) {
+    return rows.every(row => row.cells.every(cell => {
+        const style = styles.get(cell.id);
+        return style !== undefined && style.borderStyle !== 'none'
+            && sides.every(side => style[side]);
+    }));
+}
+function measureColumnWidths(rows, grid, styles, boxes, availW, availH, mode = 'auto') {
+    const colWidths = new Array(grid.numCols).fill(0);
+    // Only single-column cells contribute directly to column widths in this
+    // pass; colspan>1 cells are positioned later using the resolved widths.
+    // table-layout: fixed only consults the first row.
+    const lastRow = mode === 'fixed' ? Math.min(1, rows.length) : rows.length;
+    for (let r = 0; r < lastRow; r++) {
+        let col = 0;
+        for (const cell of rows[r].cells) {
+            while (grid.occupied[r][col])
+                col++;
+            const span = cellColspan(grid, cell);
+            if (span === 1) {
+                const size = layoutNode(cell, styles, boxes, 0, 0, availW, availH);
+                colWidths[col] = Math.max(colWidths[col], size.width);
+            }
+            col += span;
+        }
+    }
+    return colWidths;
+}
+function placeCaption(caption, styles, boxes, x, y, tableWidth, availH) {
+    const size = layoutNode(caption, styles, boxes, x, y, tableWidth, availH);
+    const captionBox = boxes.get(caption.id);
+    if (captionBox)
+        captionBox.width = tableWidth;
+    return size.height;
+}
+function spannedWidth(colWidths, col, span, colGap) {
+    let w = 0;
+    for (let i = 0; i < span; i++)
+        w += colWidths[col + i] ?? 0;
+    return w + colGap * Math.max(0, span - 1);
+}
+function shiftSubtreeY(node, boxes, dy) {
+    for (const child of node.children) {
+        const box = boxes.get(child.id);
+        if (box)
+            box.y += dy;
+        shiftSubtreeY(child, boxes, dy);
+    }
+}
+function applyVerticalAlign(cell, totalHeight, contentHeight, styles, boxes) {
+    const cellBox = boxes.get(cell.id);
+    if (cellBox)
+        cellBox.height = totalHeight;
+    const slack = totalHeight - contentHeight;
+    if (slack <= 0)
+        return;
+    const va = styles.get(cell.id)?.verticalAlign ?? 'top';
+    if (va === 'top')
+        return;
+    const dy = va === 'middle' ? Math.floor(slack / 2) : slack;
+    shiftSubtreeY(cell, boxes, dy);
+}
+function placeRows(rows, grid, styles, boxes, x, startY, colWidths, tableWidth, availH, gaps) {
+    const rowHeights = [];
+    const placed = [];
+    // Pass 1: lay out each cell, accumulate per-row height from non-rowspan cells.
+    let rowY = startY;
+    for (let r = 0; r < rows.length; r++) {
+        const { trNode, cells } = rows[r];
+        let col = 0;
         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
+        for (const cell of cells) {
+            while (grid.occupied[r][col]) {
+                colX += colWidths[col] + gaps.col;
+                col++;
+            }
+            const span = cellColspan(grid, cell);
+            const rspan = cellRowspan(cell);
+            const cellWidth = spannedWidth(colWidths, col, span, gaps.col);
+            const size = layoutNode(cell, styles, boxes, colX, rowY, cellWidth, availH);
             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 (cellBox && cellBox.width < cellWidth)
+                cellBox.width = cellWidth;
+            if (rspan === 1)
+                rowHeight = Math.max(rowHeight, size.height);
+            placed.push({ cell, rowIdx: r, rspan, contentHeight: size.height });
+            colX += cellWidth + gaps.col;
+            col += span;
         }
-        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 });
+        const trMinHeight = trNode ? styles.get(trNode.id)?.height : undefined;
+        if (typeof trMinHeight === 'number' && trMinHeight > rowHeight)
+            rowHeight = trMinHeight;
+        rowHeights.push(rowHeight);
+        if (trNode)
+            boxes.set(trNode.id, { x, y: rowY, width: tableWidth, height: rowHeight });
+        rowY += rowHeight + gaps.row;
+    }
+    // Pass 2: stretch each cell to its row's total height and apply vertical-align.
+    for (const { cell, rowIdx, rspan, contentHeight } of placed) {
+        let totalH = 0;
+        let spanRows = 0;
+        for (let r = 0; r < rspan && rowIdx + r < rows.length; r++) {
+            totalH += rowHeights[rowIdx + r];
+            spanRows++;
         }
-        rowY += rowHeight;
+        totalH += gaps.row * Math.max(0, spanRows - 1);
+        applyVerticalAlign(cell, totalH, contentHeight, styles, boxes);
+    }
+    return rowY - startY - (rows.length > 0 ? gaps.row : 0);
+}
+function layoutTable(node, styles, boxes, x, y, availW, availH) {
+    return layoutTableChildren(node.children, styles.get(node.id), styles, boxes, x, y, availW, availH);
+}
+/**
+ * Table layout over a list of children. Called with a table element's
+ * children and style, or — for anonymous tables wrapped around stray
+ * table-internal content (§17.2.1) — with the run of stray siblings and no
+ * style (anonymous tables get initial values, e.g. border-spacing 0).
+ */
+function layoutTableChildren(children, tableStyle, styles, boxes, x, y, availW, availH) {
+    const rows = collectTableRows(children, styles);
+    const caption = findCaption(children, styles);
+    if (rows.length === 0 && !caption)
+        return { width: 0, height: 0 };
+    const grid = buildTableGrid(rows);
+    const gaps = tableGaps(tableStyle, rows, styles);
+    const colWidths = measureColumnWidths(rows, grid, styles, boxes, availW, availH, tableStyle?.tableLayout ?? 'auto');
+    // <col>/<colgroup> widths act as a minimum (auto) or as the source of
+    // truth (fixed) for the column.
+    const colHints = collectColHints(children, styles);
+    for (let i = 0; i < colWidths.length; i++) {
+        if (colHints[i] !== undefined)
+            colWidths[i] = Math.max(colWidths[i], colHints[i]);
+    }
+    const colsWidth = colWidths.reduce((sum, w) => sum + w, 0)
+        + gaps.col * Math.max(0, colWidths.length - 1);
+    // Measure caption against availW so the table can grow to fit it.
+    let captionWidth = 0;
+    if (caption) {
+        const size = layoutNode(caption, styles, boxes, 0, 0, availW, availH);
+        captionWidth = size.width;
+    }
+    const tableWidth = Math.max(colsWidth, captionWidth);
+    const captionSide = caption ? styles.get(caption.id)?.captionSide ?? 'top' : 'top';
+    let rowY = y;
+    if (caption && captionSide === 'top') {
+        rowY += placeCaption(caption, styles, boxes, x, rowY, tableWidth, availH);
+    }
+    rowY += placeRows(rows, grid, styles, boxes, x, rowY, colWidths, tableWidth, availH, gaps);
+    if (caption && captionSide === 'bottom') {
+        rowY += placeCaption(caption, styles, boxes, x, rowY, tableWidth, availH);
     }
-    const totalWidth = colWidths.reduce((sum, w) => sum + w, 0) + colGap * Math.max(0, numCols - 1);
-    return { width: totalWidth, height: rowY - y };
+    return { width: tableWidth, 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');
+    const children = childrenWithPseudos(node).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 areas = style.gridTemplateAreas ? parseTemplateAreas(style.gridTemplateAreas) : null;
+    let colWidths = parseGridTemplate(style.gridTemplateColumns ?? '', availW);
+    if (colWidths.length === 0 && areas && areas.columnCount > 0) {
+        // Areas without a column template: split the width evenly
+        colWidths = Array(areas.columnCount).fill(Math.floor(availW / areas.columnCount));
+    }
     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
+    // Pre-compute border-adjusted gaps for grid children
+    let hGap = gap;
+    let vGap = gap;
+    if (children.length >= 2) {
+        // Check first two adjacent children for horizontal collapse
+        if (numCols >= 2 && shouldAdjustBorderGap(styles.get(children[0].id), styles.get(children[1].id), 'horizontal')) {
+            hGap = Math.max(-1, gap - 1);
+        }
+        // Check first child and first child of second row for vertical collapse
+        if (children.length > numCols && shouldAdjustBorderGap(styles.get(children[0].id), styles.get(children[numCols].id), 'vertical')) {
+            vGap = Math.max(-1, gap - 1);
+        }
+    }
+    // Pass 1: assign each child to a row/col and compute content-based row heights
+    const placements = [];
+    const computedRowHeights = [];
+    const cursor = { col: 0, row: 0 };
     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 childStyle = styles.get(child.id);
+        const area = childStyle?.gridArea ? areas?.byName.get(childStyle.gridArea) : undefined;
+        const placed = resolveGridPlacement(childStyle, area, cursor, numCols);
+        const colW = trackSpanSize(colWidths, placed.col, placed.span, hGap);
+        // Measure content height with unconstrained available height
+        const size = layoutNode(child, styles, boxes, 0, 0, colW, availH);
+        placements.push({ child, ...placed });
+        // Spanning content doesn't stretch individual tracks (matches columns)
+        if (placed.rowSpan === 1) {
+            computedRowHeights[placed.row] = Math.max(computedRowHeights[placed.row] ?? 0, size.height);
+        }
+    }
+    // Resolve final row track heights: template first, content otherwise
+    const totalRows = placements.reduce((max, p) => Math.max(max, p.row + p.rowSpan), 0);
+    const trackHeights = [];
+    for (let r = 0; r < totalRows; r++) {
+        trackHeights[r] = rowHeights[r] ?? computedRowHeights[r] ?? 0;
+    }
+    // Pass 2: layout each child at its final position
+    let maxWidth = 0;
+    for (const { child, col, span, row, rowSpan } of placements) {
+        const colX = x + trackOffset(colWidths, col, hGap);
+        const colW = trackSpanSize(colWidths, col, span, hGap);
+        const rowY = y + trackOffset(trackHeights, row, vGap);
+        const rh = trackSpanSize(trackHeights, row, rowSpan, vGap);
+        layoutNode(child, styles, boxes, colX, rowY, colW, rh);
         const childBox = boxes.get(child.id);
-        if (childBox && childBox.width < colW)
+        if (childBox) {
             childBox.width = colW;
-        currentRowHeight = Math.max(currentRowHeight, size.height);
+            childBox.height = rh;
+        }
         maxWidth = Math.max(maxWidth, colX - x + colW);
-        col++;
     }
-    const finalRowH = rowHeights[rowIdx] ?? currentRowHeight;
-    return { width: maxWidth, height: (rowY - y) + finalRowH };
+    const totalHeight = totalRows === 0 ? 0 : trackOffset(trackHeights, totalRows, vGap) - vGap;
+    return { width: maxWidth, height: totalHeight };
+}
+/**
+ * Where one grid item lands: a named area wins outright; otherwise
+ * explicit lines/spans combine with the auto-flow cursor, which only
+ * auto-placed and column-placed items advance.
+ */
+function resolveGridPlacement(childStyle, area, cursor, numCols) {
+    if (area) {
+        return {
+            col: area.colStart, span: area.colEnd - area.colStart,
+            row: area.rowStart, rowSpan: area.rowEnd - area.rowStart,
+        };
+    }
+    const span = childStyle?.gridColumnSpan ?? 1;
+    if (cursor.col >= numCols) {
+        cursor.col = 0;
+        cursor.row++;
+    }
+    const colStart = resolveGridColumnStart(childStyle, cursor.col, numCols);
+    const colEnd = resolveGridColumnEnd(childStyle, colStart, span, numCols);
+    const actualSpan = colEnd - colStart;
+    if (colStart > cursor.col)
+        cursor.col = colStart;
+    if (cursor.col + actualSpan > numCols) {
+        cursor.col = 0;
+        cursor.row++;
+    }
+    const row = childStyle?.gridRowStart != null ? childStyle.gridRowStart - 1 : cursor.row;
+    const rowSpan = childStyle?.gridRowEnd != null
+        ? Math.max(1, childStyle.gridRowEnd - 1 - row)
+        : (childStyle?.gridRowSpan ?? 1);
+    const col = cursor.col;
+    cursor.col += actualSpan;
+    return { col, span: actualSpan, row, rowSpan };
 }
-function parseGridTemplate(template, availW) {
+/**
+ * Parse the quoted rows of grid-template-areas into per-name rectangles.
+ * `.` cells are holes; a name repeated across cells spans their extent.
+ */
+function parseTemplateAreas(value) {
+    const byName = new Map();
+    let columnCount = 0;
+    const rows = [...value.matchAll(/"([^"]*)"|'([^']*)'/g)].map(m => (m[1] ?? m[2] ?? '').trim());
+    rows.forEach((rowText, rowIndex) => {
+        const names = rowText.split(/\s+/);
+        columnCount = Math.max(columnCount, names.length);
+        names.forEach((name, colIndex) => {
+            if (name === '.' || name === '')
+                return;
+            const area = byName.get(name);
+            if (!area) {
+                byName.set(name, { rowStart: rowIndex, rowEnd: rowIndex + 1, colStart: colIndex, colEnd: colIndex + 1 });
+            }
+            else {
+                area.rowStart = Math.min(area.rowStart, rowIndex);
+                area.rowEnd = Math.max(area.rowEnd, rowIndex + 1);
+                area.colStart = Math.min(area.colStart, colIndex);
+                area.colEnd = Math.max(area.colEnd, colIndex + 1);
+            }
+        });
+    });
+    return { byName, columnCount };
+}
+/** Resolve the start column for a grid item (0-indexed) */
+function resolveGridColumnStart(style, autoCol, numCols) {
+    if (!style)
+        return autoCol;
+    if (style.gridColumnStart != null)
+        return style.gridColumnStart - 1; // CSS lines are 1-indexed
+    return autoCol;
+}
+/** Resolve the end column for a grid item (0-indexed, exclusive) */
+function resolveGridColumnEnd(style, start, span, numCols) {
+    if (!style)
+        return start + span;
+    if (style.gridColumnEnd != null)
+        return style.gridColumnEnd - 1; // CSS lines are 1-indexed
+    return start + span;
+}
+/** Offset to the start of a grid track (works for either axis) */
+function trackOffset(trackSizes, track, gap) {
+    let offset = 0;
+    for (let i = 0; i < track; i++) {
+        offset += (trackSizes[i] ?? 0) + gap;
+    }
+    return offset;
+}
+/** Total size spanning multiple grid tracks including gaps between them */
+function trackSpanSize(trackSizes, startTrack, span, gap) {
+    let size = 0;
+    for (let i = startTrack; i < startTrack + span && i < trackSizes.length; i++) {
+        if (i > startTrack)
+            size += gap;
+        size += trackSizes[i];
+    }
+    return size;
+}
+function parseGridTemplate(template, availSize) {
     if (!template)
         return [];
-    const parts = template.trim().split(/\s+/);
-    const widths = [];
+    // Expand repeat() before splitting
+    const expanded = expandRepeat(template);
+    return resolveTrackSizes(splitTracks(expanded), availSize);
+}
+/** Split a track list on whitespace, keeping function arguments (minmax(a, b)) together */
+function splitTracks(input) {
+    const tracks = [];
+    let current = '';
+    let depth = 0;
+    for (const ch of input.trim()) {
+        if (ch === '(')
+            depth++;
+        if (ch === ')')
+            depth--;
+        if (/\s/.test(ch) && depth === 0) {
+            if (current) {
+                tracks.push(current);
+                current = '';
+            }
+        }
+        else {
+            current += ch;
+        }
+    }
+    if (current)
+        tracks.push(current);
+    return tracks;
+}
+/** Expand repeat(N, tracks...) into flat track list */
+function expandRepeat(template) {
+    return template.replace(/repeat\(\s*(\d+)\s*,\s*([^)]+)\)/g, (_match, countStr, tracks) => {
+        const count = parseInt(countStr);
+        const trackList = tracks.trim();
+        return Array(count).fill(trackList).join(' ');
+    });
+}
+function resolveTrackSizes(parts, availSize) {
+    const sizes = [];
     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;
+        const minmax = /^minmax\(([^,]+),(.+)\)$/.exec(part);
+        if (minmax) {
+            const min = resolveTrackLength(minmax[1].trim(), availSize) ?? 0;
+            const maxRaw = minmax[2].trim();
+            if (maxRaw.endsWith('fr')) {
+                sizes.push(0); // placeholder
+                frParts.push({ index: i, fr: parseFloat(maxRaw), min });
+            }
+            else {
+                const w = Math.max(min, resolveTrackLength(maxRaw, availSize) ?? 0);
+                sizes.push(w);
+                fixedTotal += w;
+            }
+            continue;
         }
-        else if (part.endsWith('%')) {
-            const w = Math.floor(availW * parseFloat(part) / 100);
-            widths.push(w);
-            fixedTotal += w;
+        const fixed = resolveTrackLength(part, availSize);
+        if (fixed !== null) {
+            sizes.push(fixed);
+            fixedTotal += fixed;
         }
         else if (part.endsWith('fr')) {
-            const fr = parseFloat(part);
-            widths.push(0); // placeholder
-            frParts.push({ index: i, fr });
+            sizes.push(0); // placeholder
+            frParts.push({ index: i, fr: parseFloat(part), min: 0 });
         }
         else {
-            widths.push(0);
+            sizes.push(0);
         }
     }
-    // Distribute remaining space to fr units
+    // Distribute remaining space to fr units, honouring minmax() minimums
     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);
+        const remaining = Math.max(0, availSize - fixedTotal);
+        for (const { index, fr, min } of frParts) {
+            sizes[index] = Math.max(min, Math.floor(remaining * fr / totalFr));
         }
     }
-    return widths;
+    return sizes;
+}
+/** A fixed track length in cells (cell/ch or %), or null for fr/auto/keywords */
+function resolveTrackLength(part, availSize) {
+    const cellLength = parseCellLength(part);
+    if (cellLength !== null)
+        return Math.round(cellLength);
+    if (part.endsWith('%'))
+        return Math.floor(availSize * parseFloat(part) / 100);
+    return null;
 }
 function positionChildren(children, styles, boxes, innerX, innerY, innerW, innerH, dir, gap, justify, align, wrap = 'nowrap') {
     // Layout absolute children first (they don't affect flow)
@@ -362,6 +1086,8 @@ function positionChildren(children, styles, boxes, innerX, innerY, innerW, inner
     });
     if (visible.length === 0)
         return { width: 0, height: 0 };
+    const isReverse = dir === 'row-reverse' || dir === 'column-reverse';
+    const baseDir = (dir === 'row' || dir === 'row-reverse') ? 'row' : 'column';
     // Pre-measure to filter out zero-size items (e.g. whitespace text nodes)
     const measured = visible.map(child => ({
         child,
@@ -376,8 +1102,6 @@ function positionChildren(children, styles, boxes, innerX, innerY, innerW, inner
         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
@@ -395,61 +1119,279 @@ function positionChildren(children, styles, boxes, innerX, innerY, innerW, inner
     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);
+    // Compute per-pair gap, adjusting for border collapse
+    const borderDir = baseDir === 'column' ? 'vertical' : 'horizontal';
+    const pairGaps = ordered.map((child, i) => {
+        if (i === 0)
+            return 0;
+        const adjust = shouldAdjustBorderGap(styles.get(ordered[i - 1].id), styles.get(child.id), borderDir) ? 1 : 0;
+        return Math.max(-1, gap - adjust);
+    });
     const totalMain = sizes.reduce((sum, s, i) => {
-        return sum + (baseDir === 'row' ? s.width : s.height) + (i > 0 ? gap : 0);
+        return sum + (baseDir === 'row' ? s.width : s.height) + pairGaps[i];
     }, 0);
     const availMain = baseDir === 'row' ? innerW : innerH;
-    const freeSpace = Math.max(0, availMain - totalMain);
-    const overflow = Math.max(0, totalMain - availMain);
+    const rawFreeSpace = availMain - totalMain;
+    const freeSpace = Math.max(0, rawFreeSpace);
+    // With wrapping enabled, items wrap instead of shrinking
+    const overflow = wrap === 'wrap' ? 0 : Math.max(0, -rawFreeSpace);
     const hasGrow = totalGrow > 0;
     const totalShrink = overflow > 0 ? shrinkValues.reduce((a, b) => a + b, 0) : 0;
+    // Pre-compute grow/shrink adjustments with correct rounding
+    const mainAdjust = new Array(ordered.length).fill(0);
+    if (hasGrow && freeSpace > 0) {
+        let distributed = 0;
+        for (let i = 0; i < ordered.length; i++) {
+            if (growValues[i] > 0) {
+                const share = Math.floor(freeSpace * growValues[i] / totalGrow);
+                mainAdjust[i] = share;
+                distributed += share;
+            }
+        }
+        // Distribute remainder 1px each to items with largest fractional parts
+        let remainder = freeSpace - distributed;
+        if (remainder > 0) {
+            const fractions = ordered.map((_, i) => growValues[i] > 0 ? (freeSpace * growValues[i] / totalGrow) % 1 : 0);
+            const indices = ordered.map((_, i) => i)
+                .filter(i => growValues[i] > 0)
+                .sort((a, b) => fractions[b] - fractions[a]);
+            for (const idx of indices) {
+                if (remainder <= 0)
+                    break;
+                mainAdjust[idx] += 1;
+                remainder--;
+            }
+        }
+    }
+    if (overflow > 0 && totalShrink > 0) {
+        let distributed = 0;
+        for (let i = 0; i < ordered.length; i++) {
+            if (shrinkValues[i] > 0) {
+                const childStyle = styles.get(ordered[i].id);
+                const explicitMain = baseDir === 'row' ? childStyle?.width : childStyle?.height;
+                if (explicitMain != null) {
+                    const share = Math.floor(overflow * shrinkValues[i] / totalShrink);
+                    mainAdjust[i] = -share;
+                    distributed += share;
+                }
+            }
+        }
+        // Distribute remainder to last shrinking item with explicit size
+        let remainder = overflow - distributed;
+        for (let i = ordered.length - 1; i >= 0 && remainder > 0; i--) {
+            if (shrinkValues[i] > 0) {
+                const childStyle = styles.get(ordered[i].id);
+                const explicitMain = baseDir === 'row' ? childStyle?.width : childStyle?.height;
+                if (explicitMain != null) {
+                    mainAdjust[i] -= remainder;
+                    remainder = 0;
+                }
+            }
+        }
+    }
+    // Apply min-width/min-height constraints to shrink adjustments.
+    // CSS Flexbox §4.5: items have auto min-size = min(content-size, specified-size).
+    // Approximate content-min as: borders in main axis + (1 if has children, else 0).
+    // overflow:hidden allows min to be 0 (per spec).
+    for (let i = 0; i < ordered.length; i++) {
+        if (mainAdjust[i] < 0) {
+            const baseSize = baseDir === 'row' ? sizes[i].width : sizes[i].height;
+            const childStyle = styles.get(ordered[i].id);
+            const minMain = baseDir === 'row' ? childStyle?.minWidth : childStyle?.minHeight;
+            if (minMain != null) {
+                const adjusted = baseSize + mainAdjust[i];
+                if (adjusted < minMain)
+                    mainAdjust[i] = minMain - baseSize;
+            }
+            else {
+                const autoMin = autoMinMainSize(ordered[i], childStyle, baseDir);
+                if (baseSize + mainAdjust[i] < autoMin)
+                    mainAdjust[i] = autoMin - baseSize;
+            }
+            // Never shrink below 0
+            if (baseSize + mainAdjust[i] < 0)
+                mainAdjust[i] = -baseSize;
+        }
+    }
+    // Apply max-width/max-height constraints to grow adjustments
+    for (let i = 0; i < ordered.length; i++) {
+        if (mainAdjust[i] > 0) {
+            const baseSize = baseDir === 'row' ? sizes[i].width : sizes[i].height;
+            const childStyle = styles.get(ordered[i].id);
+            const maxMain = baseDir === 'row' ? childStyle?.maxWidth : childStyle?.maxHeight;
+            if (maxMain != null) {
+                const adjusted = baseSize + mainAdjust[i];
+                if (adjusted > maxMain) {
+                    const excess = adjusted - maxMain;
+                    mainAdjust[i] -= excess;
+                    // Redistribute excess to other growing items
+                    for (let j = 0; j < ordered.length; j++) {
+                        if (j !== i && growValues[j] > 0) {
+                            mainAdjust[j] += excess;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // §9.8.1 Auto margins absorb free space before justify-content
+    const autoMargins = ordered.map(() => ({ before: 0, after: 0 }));
+    if (freeSpace > 0 && !hasGrow) {
+        const marginProp = baseDir === 'row'
+            ? { before: 'marginLeft', after: 'marginRight' }
+            : { before: 'marginTop', after: 'marginBottom' };
+        let autoCount = 0;
+        for (let i = 0; i < ordered.length; i++) {
+            const s = styles.get(ordered[i].id);
+            if (s && s[marginProp.before] === -1)
+                autoCount++;
+            if (s && s[marginProp.after] === -1)
+                autoCount++;
+        }
+        if (autoCount > 0) {
+            const perAuto = Math.floor(freeSpace / autoCount);
+            let distributed = 0;
+            for (let i = 0; i < ordered.length; i++) {
+                const s = styles.get(ordered[i].id);
+                if (s && s[marginProp.before] === -1) {
+                    autoMargins[i].before = perAuto;
+                    distributed += perAuto;
+                }
+                if (s && s[marginProp.after] === -1) {
+                    autoMargins[i].after = perAuto;
+                    distributed += perAuto;
+                }
+            }
+            // Distribute remainder to last auto margin
+            let remainder = freeSpace - distributed;
+            for (let i = ordered.length - 1; i >= 0 && remainder > 0; i--) {
+                const s = styles.get(ordered[i].id);
+                if (s && s[marginProp.after] === -1) {
+                    autoMargins[i].after += remainder;
+                    remainder = 0;
+                }
+                else if (s && s[marginProp.before] === -1) {
+                    autoMargins[i].before += remainder;
+                    remainder = 0;
+                }
+            }
+        }
+    }
+    const hasAutoMargins = autoMargins.some(m => m.before > 0 || m.after > 0);
+    // For wrapping, first determine line breaks and per-line cross sizes
+    const itemLine = []; // which line each item is on
+    const lineHeights = []; // cross size per line
+    if (wrap === 'wrap') {
+        let lineMainPos = 0;
+        let currentLine = 0;
+        let currentLineHeight = 0;
+        for (let i = 0; i < ordered.length; i++) {
+            const contentMainSize = baseDir === 'row' ? sizes[i].width : sizes[i].height;
+            if (lineMainPos + contentMainSize > availMain && i > 0) {
+                lineHeights.push(currentLineHeight);
+                currentLine++;
+                lineMainPos = 0;
+                currentLineHeight = 0;
+            }
+            itemLine.push(currentLine);
+            const crossSize = baseDir === 'row' ? sizes[i].height : sizes[i].width;
+            currentLineHeight = Math.max(currentLineHeight, crossSize);
+            lineMainPos += contentMainSize + (i < ordered.length - 1 ? pairGaps[i + 1] : 0);
+        }
+        lineHeights.push(currentLineHeight);
+    }
     // Position
-    let mainPos = computeMainStart(justify, freeSpace, ordered.length, hasGrow);
-    const itemGap = computeItemGap(justify, gap, freeSpace, ordered.length, hasGrow);
+    let mainPos = hasAutoMargins ? 0 : computeMainStart(justify, rawFreeSpace, ordered.length, hasGrow);
+    const baseItemGap = hasAutoMargins ? gap : computeItemGap(justify, gap, freeSpace, ordered.length, hasGrow);
     let contentWidth = 0;
     let contentHeight = 0;
     let crossPos = 0;
     let lineHeight = 0;
+    let currentLine = 0;
+    let naturalMain = 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);
-        }
+        mainPos += autoMargins[i].before;
+        let mainSize = (baseDir === 'row' ? sizes[i].width : sizes[i].height) + mainAdjust[i];
+        mainSize = Math.max(0, mainSize);
         // Wrap check
-        if (wrap === 'wrap' && mainPos + mainSize > availMain && i > 0) {
-            crossPos += lineHeight + gap;
+        const contentMainSize = baseDir === 'row' ? sizes[i].width : sizes[i].height;
+        if (wrap === 'wrap' && mainPos + contentMainSize > availMain && i > 0) {
+            // Border collapse between wrap lines: reduce gap when adjacent
+            // items have borders on the shared edge
+            const crossDir = baseDir === 'row' ? 'vertical' : 'horizontal';
+            const prevLineItem = ordered[i - 1];
+            const prevStyle = styles.get(prevLineItem.id);
+            const curStyle = styles.get(ordered[i].id);
+            const collapseGap = shouldAdjustBorderGap(prevStyle, curStyle, crossDir) ? 1 : 0;
+            crossPos += lineHeight + Math.max(-1, gap - collapseGap);
             mainPos = 0;
             lineHeight = 0;
+            currentLine++;
         }
         const crossSize = baseDir === 'row' ? sizes[i].height : sizes[i].width;
-        const crossAvail = baseDir === 'row' ? innerH : innerW;
-        // Check align-self
+        // In wrap mode, cross available is the line height; otherwise full container
+        const lineCrossSize = wrap === 'wrap' ? lineHeights[currentLine] : 0;
+        const crossAvail = wrap === 'wrap' ? lineCrossSize : (baseDir === 'row' ? innerH : innerW);
         const childStyle = styles.get(ordered[i].id);
         const selfAlign = childStyle?.alignSelf !== 'auto'
             ? childStyle?.alignSelf ?? align
             : align;
-        const crossOffset = computeCrossOffset(selfAlign, crossAvail, crossSize);
+        // Stretch only applies to items whose cross-axis size is auto (§8.3);
+        // an explicit width/height wins and the item aligns to the line start.
+        const crossSizeIsAuto = baseDir === 'row'
+            ? childStyle?.height == null
+            : childStyle?.width == null;
+        const isStretch = selfAlign === 'stretch' && crossSizeIsAuto;
+        const crossOffset = isStretch ? 0 : 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;
+        const childAvailH = baseDir === 'row' ? (isStretch ? crossAvail : 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;
+            if (isStretch) {
+                if (baseDir === 'row' && box.height < crossAvail) {
+                    const stretchH = constrain(crossAvail, childStyle?.minHeight, childStyle?.maxHeight);
+                    box.height = stretchH;
+                    layoutNode(ordered[i], styles, boxes, finalCx, finalCy, mainSize, stretchH);
+                    const rebox = boxes.get(ordered[i].id);
+                    if (rebox) {
+                        rebox.width = mainSize;
+                        rebox.height = stretchH;
+                    }
+                }
+                if (baseDir === 'column' && box.width < crossAvail) {
+                    const stretchW = constrain(crossAvail, childStyle?.minWidth, childStyle?.maxWidth);
+                    box.width = stretchW;
+                    layoutNode(ordered[i], styles, boxes, finalCx, finalCy, stretchW, mainSize);
+                    const rebox = boxes.get(ordered[i].id);
+                    if (rebox) {
+                        rebox.width = stretchW;
+                        rebox.height = mainSize;
+                    }
+                }
+            }
         }
-        lineHeight = Math.max(lineHeight, baseDir === 'row' ? sizes[i].height : sizes[i].width);
-        mainPos += mainSize + (i < ordered.length - 1 ? itemGap : 0);
+        lineHeight = Math.max(lineHeight, crossSize);
+        const usesJustifySpacing = justify === 'space-between' || justify === 'space-around' || justify === 'space-evenly';
+        const pairItemGap = i < ordered.length - 1
+            ? (usesJustifySpacing && !hasGrow ? baseItemGap : pairGaps[i + 1])
+            : 0;
+        mainPos += mainSize + autoMargins[i].after + pairItemGap;
+        naturalMain += mainSize + (i > 0 ? pairGaps[i] : 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 };
+    // Return natural size for shrink-wrap auto-sizing (no justify offset).
+    // For wrapping containers, use positioned extent (wrapping already happened).
+    const mainResult = wrap === 'wrap' ? (baseDir === 'row' ? contentWidth : contentHeight) : naturalMain;
+    return baseDir === 'row'
+        ? { width: mainResult, height: contentHeight }
+        : { width: contentWidth, height: mainResult };
 }