render-tag 0.1.0

package/lib/layout.js

@@ -0,0 +1,1323 @@
+// Module-level flag controlling DOM measurement usage.
+// Set by buildLayoutTree() based on the useDomMeasurements option.
+let _useDomMeasurements = true;
+let _debug;
+// ─── DOM-based line width measurement ──────────────────────────────────
+/**
+ * Reusable hidden DOM element for measuring mixed-font line widths.
+ * Only used when canvas measureText precision is insufficient
+ * (mixed fonts near the wrap boundary).
+ */
+let _measureContainer = null;
+let _measureSpanPool = [];
+function getMeasureContainer() {
+    if (_measureContainer && _measureContainer.parentNode)
+        return _measureContainer;
+    _measureContainer = document.createElement('div');
+    _measureContainer.style.cssText =
+        'position:absolute;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap;height:auto;width:auto;';
+    document.body.appendChild(_measureContainer);
+    return _measureContainer;
+}
+function getMeasureSpan(index) {
+    if (!_measureSpanPool[index]) {
+        _measureSpanPool[index] = document.createElement('span');
+    }
+    return _measureSpanPool[index];
+}
+/**
+ * Measure the exact width of a sequence of styled words using the DOM.
+ * This is the ground truth — the browser's own text layout engine handles
+ * kerning, shaping, and sub-pixel positioning across font boundaries.
+ *
+ * Only called when canvas measureText suggests a line is near the wrap
+ * boundary and fonts are mixed (different weight/style/family on the line).
+ */
+let _domMeasureCount = 0;
+function measureLineWidthViaDom(words) {
+    _domMeasureCount++;
+    const container = getMeasureContainer();
+    const textWords = words.filter(w => w.text && w.text !== '\n');
+    if (textWords.length === 0)
+        return 0;
+    // Build spans — group consecutive words with the same font
+    let spanIdx = 0;
+    let lastFont = '';
+    for (const word of textWords) {
+        const font = buildCanvasFont(word.style);
+        if (font !== lastFont || spanIdx === 0) {
+            const span = getMeasureSpan(spanIdx);
+            span.style.font = font;
+            span.textContent = word.text;
+            if (!span.parentNode)
+                container.appendChild(span);
+            lastFont = font;
+            spanIdx++;
+        }
+        else {
+            // Same font as previous span — append text
+            _measureSpanPool[spanIdx - 1].textContent += word.text;
+        }
+    }
+    // Hide unused spans
+    for (let i = spanIdx; i < _measureSpanPool.length; i++) {
+        if (_measureSpanPool[i].parentNode) {
+            _measureSpanPool[i].textContent = '';
+        }
+    }
+    return container.getBoundingClientRect().width;
+}
+/**
+ * Check if a line has mixed fonts (different fontFamily/fontSize/fontWeight/fontStyle).
+ */
+function hasMixedFonts(words) {
+    let font = '';
+    for (const w of words) {
+        if (!w.text || w.isSpace)
+            continue;
+        const f = buildCanvasFont(w.style);
+        if (font && f !== font)
+            return true;
+        font = f;
+    }
+    return false;
+}
+// ─── Canvas font helpers ───────────────────────────────────────────────
+/**
+ * Set canvas font and kerning from resolved style.
+ */
+function applyFont(ctx, style) {
+    ctx.font = buildCanvasFont(style);
+    ctx.fontKerning = style.fontKerning === 'none' ? 'none' : 'normal';
+}
+/**
+ * Build a canvas font string from resolved style.
+ */
+export function buildCanvasFont(style) {
+    const parts = [];
+    if (style.fontStyle !== 'normal')
+        parts.push(style.fontStyle);
+    if (style.fontWeight !== 400)
+        parts.push(String(style.fontWeight));
+    parts.push(`${style.fontSize}px`);
+    parts.push(style.fontFamily);
+    return parts.join(' ');
+}
+/**
+ * Cache for DOM-measured line heights.
+ * Key: "font|lineHeight|probeType" → actual pixel height from the browser.
+ */
+const _lineHeightCache = new Map();
+// Probe elements: a <div> for general use, and a <ul><li> for unordered list items.
+// Firefox renders <ul><li> with bullet markers (disc/circle/square) 1.5px taller
+// than other elements for the same line-height, due to the ::marker pseudo-element.
+// <ol><li> items do NOT have this extra height.
+let _blockProbe = null;
+let _ulProbeContainer = null;
+let _ulProbeLi = null;
+const BULLET_MARKERS = new Set(['disc', 'circle', 'square']);
+/**
+ * Measure the actual line height using a hidden DOM element.
+ * Uses an actual <li> inside a <ul> when listStyleType is a bullet marker
+ * (disc/circle/square) to capture Firefox's ::marker line box contribution.
+ * Results are cached per font+lineHeight+probeType combination.
+ */
+function measureDomLineHeight(font, lineHeight, useBulletProbe = false) {
+    const key = `${font}|${lineHeight}|${useBulletProbe ? 'ul-li' : 'block'}`;
+    const cached = _lineHeightCache.get(key);
+    if (cached !== undefined)
+        return cached;
+    let probe;
+    if (useBulletProbe) {
+        if (!_ulProbeContainer) {
+            _ulProbeContainer = document.createElement('ul');
+            _ulProbeContainer.style.cssText =
+                'position:absolute;top:-9999px;left:-9999px;visibility:hidden;padding:0;margin:0;border:0;list-style:disc;';
+            _ulProbeLi = document.createElement('li');
+            _ulProbeLi.style.cssText = 'white-space:nowrap;padding:0;margin:0;border:0;';
+            _ulProbeLi.textContent = 'Mg';
+            _ulProbeContainer.appendChild(_ulProbeLi);
+            document.body.appendChild(_ulProbeContainer);
+        }
+        probe = _ulProbeLi;
+    }
+    else {
+        if (!_blockProbe) {
+            _blockProbe = document.createElement('div');
+            _blockProbe.style.cssText =
+                'position:absolute;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap;padding:0;margin:0;border:0;';
+            _blockProbe.textContent = 'Mg';
+            document.body.appendChild(_blockProbe);
+        }
+        probe = _blockProbe;
+    }
+    probe.style.font = font;
+    probe.style.lineHeight = lineHeight;
+    const height = probe.getBoundingClientRect().height;
+    _lineHeightCache.set(key, height);
+    return height;
+}
+/**
+ * Get the effective line height for a style.
+ * Uses DOM measurement for accuracy across browsers (Firefox vs Chrome).
+ * Falls back to canvas metrics for "normal" line-height.
+ */
+function getLineHeight(ctx, style, useBulletProbe = false) {
+    if (style.lineHeight > 0) {
+        if (_useDomMeasurements) {
+            const font = buildCanvasFont(style);
+            return measureDomLineHeight(font, `${style.lineHeight}px`, useBulletProbe);
+        }
+        // Canvas-only: use the CSS line-height value directly
+        return style.lineHeight;
+    }
+    if (_useDomMeasurements) {
+        const font = buildCanvasFont(style);
+        return measureDomLineHeight(font, 'normal', useBulletProbe);
+    }
+    // Canvas-only fallback for "normal" line-height: use font metrics
+    ctx.font = buildCanvasFont(style);
+    const metrics = ctx.measureText('M');
+    const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+    const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+    return (ascent + descent) * 1.2;
+}
+/**
+ * Compute the baseline Y offset within a line.
+ * Uses the Konva approach: center (ascent - descent) within lineHeight.
+ */
+function computeBaselineY(ctx, style, lineHeight) {
+    ctx.font = buildCanvasFont(style);
+    const metrics = ctx.measureText('M');
+    const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+    const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+    return (ascent - descent) / 2 + lineHeight / 2;
+}
+function applyTextTransform(text, transform) {
+    switch (transform) {
+        case 'uppercase': return text.toUpperCase();
+        case 'lowercase': return text.toLowerCase();
+        case 'capitalize': return text.replace(/\b\w/g, c => c.toUpperCase());
+        default: return text;
+    }
+}
+function isInline(node) {
+    if (node.tagName === '#text')
+        return true;
+    const d = node.style.display;
+    return d === 'inline' || d === 'inline-block';
+}
+function hasOnlyInlineChildren(node) {
+    return node.children.length > 0 && node.children.every(isInline);
+}
+function isTransparent(color) {
+    return !color || color === 'transparent' || color === 'rgba(0, 0, 0, 0)';
+}
+function hasVisibleBoxStyles(style) {
+    if (!isTransparent(style.backgroundColor))
+        return true;
+    if (style.borderTopWidth > 0 && style.borderTopStyle !== 'none')
+        return true;
+    if (style.borderRightWidth > 0 && style.borderRightStyle !== 'none')
+        return true;
+    if (style.borderBottomWidth > 0 && style.borderBottomStyle !== 'none')
+        return true;
+    if (style.borderLeftWidth > 0 && style.borderLeftStyle !== 'none')
+        return true;
+    return false;
+}
+// ─── Inline layout ─────────────────────────────────────────────────────
+/**
+ * Collect text runs from inline children, preserving style and tracking
+ * inline elements with visible backgrounds. Emits open/close markers
+ * for inline boxes so padding/border can be applied.
+ */
+function collectTextRuns(node) {
+    const runs = [];
+    function walk(n, boxStyle) {
+        if (n.tagName === '#text' && n.textContent) {
+            runs.push({ text: n.textContent, style: n.style, boxStyle });
+            return;
+        }
+        const isInlineBlock = n.style.display === 'inline-block';
+        // Inline-block always needs box treatment (padding/margin affect layout)
+        const isBox = isInlineBlock || (isInline(n) && hasVisibleBoxStyles(n.style));
+        const newBoxStyle = isBox ? n.style : boxStyle;
+        const hasHorizSpacing = isBox && (n.style.paddingLeft > 0 || n.style.paddingRight > 0 ||
+            n.style.borderLeftWidth > 0 || n.style.borderRightWidth > 0);
+        if (isInlineBlock) {
+            // Inline-block is fully atomic — the entire element (margins + padding + text)
+            // wraps as one unit. We emit a single "atomic" TextRun with a special marker
+            // so the tokenizer creates one non-splittable word with the full box width.
+            const allText = n.element?.textContent || '';
+            runs.push({
+                text: allText,
+                style: n.style,
+                boxStyle: newBoxStyle,
+                // Store the full box info for atomic inline-block handling
+                boxOpen: n.style, // signals this is a boxed element
+                boxClose: n.style,
+            });
+            return;
+        }
+        if (hasHorizSpacing) {
+            runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxOpen: n.style });
+        }
+        for (const child of n.children) {
+            walk(child, isBox ? newBoxStyle : boxStyle);
+        }
+        if (hasHorizSpacing) {
+            runs.push({ text: '', style: n.style, boxStyle: newBoxStyle, boxClose: n.style });
+        }
+    }
+    for (const child of node.children) {
+        walk(child);
+    }
+    return runs;
+}
+/**
+ * Check if text needs Intl.Segmenter for word breaking (Thai, Khmer, Lao, Myanmar).
+ * These scripts don't use spaces between words.
+ */
+function needsSegmenter(text) {
+    for (let i = 0; i < text.length; i++) {
+        const code = text.codePointAt(i);
+        if ((code >= 0x0E00 && code <= 0x0E7F) || // Thai
+            (code >= 0x0E80 && code <= 0x0EFF) || // Lao
+            (code >= 0x1000 && code <= 0x109F) || // Myanmar
+            (code >= 0x1780 && code <= 0x17FF) // Khmer
+        )
+            return true;
+        if (code > 0xFFFF)
+            i++; // skip surrogate pair
+    }
+    return false;
+}
+let _segmenter;
+function getSegmenter() {
+    if (_segmenter)
+        return _segmenter;
+    if (typeof Intl !== 'undefined' && Intl.Segmenter) {
+        _segmenter = new Intl.Segmenter(undefined, { granularity: 'word' });
+        return _segmenter;
+    }
+    return null;
+}
+/**
+ * Tokenize a single string into words based on whitespace mode.
+ */
+function tokenizeString(ctx, text, run, allWords) {
+    // Split on zero-width spaces and soft hyphens (break opportunities)
+    if (text.includes('\u200B') || text.includes('\u00AD')) {
+        const parts = text.split(/[\u200B\u00AD]/);
+        for (const part of parts) {
+            if (part)
+                tokenizeString(ctx, part, run, allWords);
+        }
+        return;
+    }
+    const isPreserve = run.style.whiteSpace === 'pre' ||
+        run.style.whiteSpace === 'pre-wrap' ||
+        run.style.whiteSpace === 'pre-line';
+    if (isPreserve) {
+        // Split on spaces and tabs, keeping delimiters
+        const words = text.split(/( +|\t)/);
+        const tabStopInterval = ctx.measureText(' ').width * 8; // CSS default: 8 spaces
+        for (const w of words) {
+            if (w === '')
+                continue;
+            if (w === '\t') {
+                // Tab width depends on current position — mark it for dynamic calculation
+                allWords.push({
+                    text: '\t',
+                    width: tabStopInterval, // placeholder — recalculated in flowWordsIntoLines
+                    style: run.style,
+                    isSpace: true,
+                    isTab: true,
+                    boxStyle: run.boxStyle,
+                });
+                continue;
+            }
+            const isSpace = /^ +$/.test(w);
+            allWords.push({
+                text: w,
+                width: ctx.measureText(w).width,
+                style: run.style,
+                isSpace,
+                boxStyle: run.boxStyle,
+            });
+        }
+    }
+    else {
+        // Split on whitespace but NOT on non-breaking spaces (\u00A0)
+        const words = text.split(/([ \t\n\r\f\v]+)/);
+        // Use cumulative measurement to avoid rounding error accumulation
+        // within a single text run.
+        let cumText = '';
+        let cumWidth = 0;
+        for (const w of words) {
+            if (w === '')
+                continue;
+            const isSpace = /^[ \t\n\r\f\v]+$/.test(w);
+            if (isSpace) {
+                const prevCum = cumWidth;
+                cumText += ' ';
+                cumWidth = ctx.measureText(cumText).width;
+                allWords.push({
+                    text: ' ',
+                    width: cumWidth - prevCum,
+                    style: run.style,
+                    isSpace: true,
+                    boxStyle: run.boxStyle,
+                });
+                continue;
+            }
+            // Use Intl.Segmenter for scripts without spaces (Thai, Khmer, etc.)
+            if (needsSegmenter(w)) {
+                const segmenter = getSegmenter();
+                if (segmenter) {
+                    for (const seg of segmenter.segment(w)) {
+                        const s = seg.segment;
+                        const prevCum = cumWidth;
+                        cumText += s;
+                        cumWidth = ctx.measureText(cumText).width;
+                        allWords.push({
+                            text: s,
+                            width: cumWidth - prevCum,
+                            style: run.style,
+                            isSpace: false,
+                            boxStyle: run.boxStyle,
+                        });
+                    }
+                    continue;
+                }
+            }
+            const prevCum = cumWidth;
+            cumText += w;
+            cumWidth = ctx.measureText(cumText).width;
+            let width = cumWidth - prevCum;
+            const directWidth = ctx.measureText(w).width;
+            if (_debug) {
+                _debug({
+                    type: 'measure-word',
+                    message: `"${w}" delta=${width.toFixed(2)} direct=${directWidth.toFixed(2)} diff=${(width - directWidth).toFixed(2)} cumText="${cumText}"`,
+                    data: { text: w, deltaWidth: width, directWidth, cumWidth, prevCum, font: run.style.fontFamily, fontSize: run.style.fontSize },
+                });
+            }
+            allWords.push({
+                text: w,
+                width,
+                style: run.style,
+                isSpace: false,
+                boxStyle: run.boxStyle,
+            });
+        }
+    }
+}
+/**
+ * Tokenize text runs into words for line wrapping.
+ */
+function tokenizeRuns(ctx, runs) {
+    const allWords = [];
+    for (const run of runs) {
+        // Handle inline-block margins (empty text, no boxOpen/boxClose)
+        if (run.text === '' && !run.boxOpen && !run.boxClose) {
+            const margin = run.style.display === 'inline-block'
+                ? (run.style.marginLeft || run.style.marginRight || 0)
+                : 0;
+            if (margin > 0) {
+                allWords.push({ text: '', width: margin, style: run.style, isSpace: false, boxStyle: run.boxStyle });
+            }
+            continue;
+        }
+        // Atomic inline-block: entire element (margin + padding + text) is one word
+        // Must check before boxOpen/boxClose handlers since atomic has both set.
+        if (run.boxOpen && run.boxClose && run.text) {
+            applyFont(ctx, run.style);
+            ctx.letterSpacing = run.style.letterSpacing > 0 ? `${run.style.letterSpacing}px` : '0px';
+            const text = applyTextTransform(run.text, run.style.textTransform);
+            const s = run.style;
+            const textWidth = ctx.measureText(text).width;
+            const totalWidth = s.marginLeft + s.borderLeftWidth + s.paddingLeft +
+                textWidth + s.paddingRight + s.borderRightWidth + s.marginRight;
+            allWords.push({
+                text,
+                width: totalWidth,
+                style: run.style,
+                isSpace: false,
+                boxStyle: run.boxStyle,
+                boxOpen: run.boxOpen,
+                boxClose: run.boxClose,
+            });
+            continue;
+        }
+        // Handle inline box open/close markers (padding)
+        if (run.boxOpen) {
+            const pad = run.boxOpen.paddingLeft + run.boxOpen.borderLeftWidth;
+            if (pad > 0) {
+                allWords.push({ text: '', width: pad, style: run.style, isSpace: false, boxStyle: run.boxStyle, boxOpen: run.boxOpen });
+            }
+            continue;
+        }
+        if (run.boxClose) {
+            const pad = run.boxClose.paddingRight + run.boxClose.borderRightWidth;
+            if (pad > 0) {
+                allWords.push({ text: '', width: pad, style: run.style, isSpace: false, boxStyle: run.boxStyle, boxClose: run.boxClose });
+            }
+            continue;
+        }
+        applyFont(ctx, run.style);
+        ctx.letterSpacing = run.style.letterSpacing > 0 ? `${run.style.letterSpacing}px` : '0px';
+        const text = applyTextTransform(run.text, run.style.textTransform);
+        // Handle explicit newlines (from <br> or pre-wrap) — always force line break
+        if (text.includes('\n')) {
+            const parts = text.split('\n');
+            for (let i = 0; i < parts.length; i++) {
+                if (i > 0) {
+                    allWords.push({ text: '\n', width: 0, style: run.style, isSpace: false, boxStyle: run.boxStyle });
+                }
+                if (parts[i]) {
+                    tokenizeString(ctx, parts[i], run, allWords);
+                }
+            }
+        }
+        else {
+            tokenizeString(ctx, text, run, allWords);
+        }
+    }
+    return allWords;
+}
+/**
+ * Check if a character is CJK (Chinese/Japanese/Korean) — these wrap at character level.
+ */
+function isCJK(char) {
+    const code = char.codePointAt(0) || 0;
+    return ((code >= 0x4E00 && code <= 0x9FFF) || // CJK Unified
+        (code >= 0x3400 && code <= 0x4DBF) || // CJK Extension A
+        (code >= 0x3000 && code <= 0x303F) || // CJK Symbols
+        (code >= 0x3040 && code <= 0x309F) || // Hiragana
+        (code >= 0x30A0 && code <= 0x30FF) || // Katakana
+        (code >= 0xAC00 && code <= 0xD7AF) || // Hangul
+        (code >= 0xFF00 && code <= 0xFFEF) || // Fullwidth
+        (code >= 0x20000 && code <= 0x2A6DF) // CJK Extension B
+    );
+}
+/**
+ * Break a word into character-level pieces if it contains CJK or if
+ * overflow-wrap: break-word is set and the word is too wide.
+ */
+function breakWordIfNeeded(ctx, word, contentWidth, currentLineWidth) {
+    // Check if word has CJK characters — always break at character level
+    const hasCJK = [...word.text].some(isCJK);
+    // Check if word needs break-word splitting
+    const needsBreak = word.width > contentWidth &&
+        (word.style.overflowWrap === 'break-word' || word.style.wordBreak === 'break-all');
+    if (!hasCJK && !needsBreak)
+        return [word];
+    // Split into characters
+    ctx.font = buildCanvasFont(word.style);
+    const chars = [...word.text];
+    const pieces = [];
+    let current = '';
+    let currentWidth = 0;
+    for (const char of chars) {
+        const charWidth = ctx.measureText(char).width;
+        // CJK chars always get their own word for wrapping
+        if (isCJK(char)) {
+            if (current) {
+                pieces.push({ ...word, text: current, width: currentWidth });
+                current = '';
+                currentWidth = 0;
+            }
+            pieces.push({ ...word, text: char, width: charWidth });
+            continue;
+        }
+        // For break-word: break when adding this char would exceed container
+        if (needsBreak && currentWidth + charWidth > contentWidth && current) {
+            pieces.push({ ...word, text: current, width: currentWidth });
+            current = '';
+            currentWidth = 0;
+        }
+        current += char;
+        currentWidth += charWidth;
+    }
+    if (current) {
+        pieces.push({ ...word, text: current, width: currentWidth });
+    }
+    return pieces;
+}
+/**
+ * Flow words into lines that fit within contentWidth.
+ * Handles: word wrapping, nowrap, break-word, CJK character wrapping.
+ */
+function flowWordsIntoLines(ctx, words, contentWidth, whiteSpace, useBulletProbe = false) {
+    const lines = [];
+    let currentLine = { words: [], totalWidth: 0, lineHeight: 0 };
+    const noWrap = whiteSpace === 'nowrap' || whiteSpace === 'pre';
+    const isPreWrap = whiteSpace === 'pre-wrap' || whiteSpace === 'pre' || whiteSpace === 'pre-line';
+    function pushLine() {
+        const hadWords = currentLine.words.length > 0;
+        // Trim trailing spaces
+        while (currentLine.words.length > 0 && currentLine.words[currentLine.words.length - 1].isSpace) {
+            currentLine.totalWidth -= currentLine.words[currentLine.words.length - 1].width;
+            currentLine.words.pop();
+        }
+        // In pre-wrap mode, space-only lines still need height (they are content)
+        if (currentLine.words.length > 0 || (hadWords && isPreWrap)) {
+            if (_debug) {
+                const text = currentLine.words.map(w => w.text).join('');
+                _debug({
+                    type: 'line-commit',
+                    message: `Line ${lines.length}: "${text}" width=${currentLine.totalWidth.toFixed(2)} / ${contentWidth}`,
+                    data: { lineIndex: lines.length, text, totalWidth: currentLine.totalWidth, contentWidth },
+                });
+            }
+            lines.push(currentLine);
+        }
+        currentLine = { words: [], totalWidth: 0, lineHeight: 0 };
+    }
+    let afterHardBreak = true; // start of content is like after a hard break
+    for (const word of words) {
+        let wordLineHeight = getLineHeight(ctx, word.style, useBulletProbe);
+        // Inline-block elements expand line height with their vertical padding+margin
+        if (word.boxStyle && word.boxStyle.display === 'inline-block') {
+            const bs = word.boxStyle;
+            wordLineHeight = Math.max(wordLineHeight, wordLineHeight + bs.paddingTop + bs.paddingBottom + bs.marginTop + bs.marginBottom
+                + bs.borderTopWidth + bs.borderBottomWidth);
+        }
+        if (word.text === '\n') {
+            if (currentLine.words.length === 0) {
+                currentLine.lineHeight = wordLineHeight;
+                lines.push(currentLine);
+                currentLine = { words: [], totalWidth: 0, lineHeight: 0 };
+            }
+            else {
+                pushLine();
+            }
+            afterHardBreak = true;
+            continue;
+        }
+        // No wrapping mode — everything on one line
+        if (noWrap) {
+            currentLine.words.push(word);
+            currentLine.totalWidth += word.width;
+            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
+            continue;
+        }
+        // Break long words / CJK characters if needed
+        const pieces = (!word.isSpace && word.text.length > 1)
+            ? breakWordIfNeeded(ctx, word, contentWidth, currentLine.totalWidth)
+            : [word];
+        for (const piece of pieces) {
+            // Would this piece overflow?
+            if (!piece.isSpace && currentLine.words.length > 0 &&
+                currentLine.totalWidth + piece.width > contentWidth) {
+                const overflow = currentLine.totalWidth + piece.width - contentWidth;
+                // For borderline cases (overflow < 1px), word-by-word delta
+                // accumulation may introduce rounding errors. Re-measure the
+                // full candidate line as a single string for accuracy.
+                // Only works for single-font lines — mixed fonts can't be
+                // measured as one string.
+                let reallyOverflows = true;
+                if (overflow < 1 && !hasMixedFonts([...currentLine.words, piece])) {
+                    applyFont(ctx, piece.style);
+                    const fullText = currentLine.words.map(w => w.text).join('') + piece.text;
+                    const fullWidth = ctx.measureText(fullText).width;
+                    // Allow tiny sub-pixel overflow — canvas measureText and DOM
+                    // text layout can differ by fractions of a pixel.
+                    if (fullWidth <= contentWidth + 0.1) {
+                        reallyOverflows = false;
+                    }
+                }
+                if (reallyOverflows) {
+                    if (_debug) {
+                        const lineText = currentLine.words.map(w => w.text).join('');
+                        _debug({
+                            type: 'line-wrap',
+                            message: `"${piece.text}" overflow=${overflow.toFixed(2)} wrap=true lineWidth=${currentLine.totalWidth.toFixed(2)} pieceWidth=${piece.width.toFixed(2)} contentWidth=${contentWidth}  line="${lineText}"`,
+                            data: { text: piece.text, overflow, lineWidth: currentLine.totalWidth, pieceWidth: piece.width, contentWidth, lineText },
+                        });
+                    }
+                    pushLine();
+                    afterHardBreak = false;
+                }
+            }
+            // Skip leading spaces after soft wraps, but preserve after hard breaks (\n)
+            if (piece.isSpace && currentLine.words.length === 0 && !afterHardBreak)
+                continue;
+            // Reverse check: canvas says it fits, but with mixed fonts near boundary,
+            // DOM might say it doesn't fit. Verify before committing.
+            // Only check when line is >80% full to avoid excessive DOM measurements.
+            if (_useDomMeasurements && !piece.isSpace && currentLine.words.length > 0 &&
+                currentLine.totalWidth > contentWidth * 0.8) {
+                const remaining = contentWidth - (currentLine.totalWidth + piece.width);
+                if (remaining >= 0 && remaining < 5 && hasMixedFonts(currentLine.words)) {
+                    const candidateWords = [...currentLine.words, piece];
+                    const domWidth = measureLineWidthViaDom(candidateWords);
+                    if (domWidth > contentWidth) {
+                        if (_debug) {
+                            _debug({
+                                type: 'line-wrap',
+                                message: `REVERSE WRAP: "${piece.text}" canvas says fits (remaining=${remaining.toFixed(2)}) but DOM says overflow (domWidth=${domWidth.toFixed(2)})`,
+                                data: { text: piece.text, remaining, domWidth, contentWidth },
+                            });
+                        }
+                        pushLine();
+                        afterHardBreak = false;
+                    }
+                }
+            }
+            // Tab: snap to next tab stop based on current position
+            let pieceWidth = piece.width;
+            if (piece.isTab) {
+                const tabStop = piece.width; // tabStopInterval stored as width
+                const currentPos = currentLine.totalWidth;
+                const nextStop = Math.ceil((currentPos + 0.1) / tabStop) * tabStop;
+                pieceWidth = nextStop - currentPos;
+                piece.width = pieceWidth;
+            }
+            currentLine.words.push(piece);
+            currentLine.totalWidth += pieceWidth;
+            currentLine.lineHeight = Math.max(currentLine.lineHeight, wordLineHeight);
+            if (!piece.isSpace)
+                afterHardBreak = false;
+        }
+    }
+    pushLine();
+    return lines;
+}
+/**
+ * Layout inline content: text wrapping + positioning using pure canvas measurement.
+ * Returns layout nodes and the total height consumed.
+ */
+function layoutInlineContent(ctx, node, x, y, contentWidth, useBulletProbe = false) {
+    const results = [];
+    const runs = collectTextRuns(node);
+    if (runs.length === 0)
+        return { nodes: results, height: 0 };
+    const words = tokenizeRuns(ctx, runs);
+    const lines = flowWordsIntoLines(ctx, words, contentWidth, node.style.whiteSpace, useBulletProbe);
+    const isRTL = node.style.direction === 'rtl';
+    let textAlign = node.style.textAlign;
+    // In RTL, default alignment is right; 'start'='right', 'end'='left'
+    if (textAlign === 'start')
+        textAlign = isRTL ? 'right' : 'left';
+    if (textAlign === 'end')
+        textAlign = isRTL ? 'left' : 'right';
+    let curY = y;
+    for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+        const line = lines[lineIdx];
+        if (line.words.length === 0) {
+            curY += line.lineHeight;
+            continue;
+        }
+        const lineHeight = line.lineHeight;
+        const isLastLine = lineIdx === lines.length - 1;
+        // Justify: expand spaces to fill the line (except last line)
+        let justifyExtraPerSpace = 0;
+        if (textAlign === 'justify' && !isLastLine && line.totalWidth < contentWidth) {
+            const spaceCount = line.words.filter(w => w.isSpace).length;
+            if (spaceCount > 0) {
+                justifyExtraPerSpace = (contentWidth - line.totalWidth) / spaceCount;
+            }
+        }
+        // text-align
+        let curX = x;
+        if (textAlign === 'center') {
+            curX = x + (contentWidth - line.totalWidth) / 2;
+        }
+        else if (textAlign === 'right' || (textAlign !== 'justify' && isRTL)) {
+            curX = x + contentWidth - line.totalWidth;
+        }
+        else if (isRTL) {
+            curX = x + contentWidth - line.totalWidth;
+        }
+        // Two-pass: first collect inline background boxes, then text.
+        // This ensures backgrounds are rendered before (behind) text.
+        // Pass 1: find inline background box regions
+        {
+            let scanX = curX;
+            let boxStartX = scanX;
+            let currentBoxStyle;
+            let boxHasText = false; // track if region has visible text (not just padding/spaces)
+            const emitBox = (style, startX, endX) => {
+                // Don't emit background box if this line segment has no visible text
+                // (e.g. only a boxOpen padding marker + trailing space before wrap)
+                if (!boxHasText)
+                    return;
+                ctx.font = buildCanvasFont(style);
+                const metrics = ctx.measureText('Mgy');
+                const ascent = metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+                const descent = metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+                const emHeight = ascent + descent;
+                const boxHeight = emHeight + style.paddingTop + style.paddingBottom
+                    + style.borderTopWidth + style.borderBottomWidth;
+                // For inline-block: position with margin offset. For regular inline: center.
+                let boxY;
+                if (style.display === 'inline-block') {
+                    boxY = curY + style.marginTop;
+                }
+                else {
+                    boxY = curY + (lineHeight - boxHeight) / 2;
+                }
+                results.push({
+                    type: 'box',
+                    style,
+                    x: startX,
+                    y: boxY,
+                    width: endX - startX,
+                    height: boxHeight,
+                    tagName: 'span',
+                    children: [],
+                });
+            };
+            for (const word of line.words) {
+                // Atomic inline-block: emit box with margin offset
+                if (word.boxOpen && word.boxClose && word.text) {
+                    if (currentBoxStyle) {
+                        emitBox(currentBoxStyle, boxStartX, scanX);
+                        currentBoxStyle = undefined;
+                        boxHasText = false;
+                    }
+                    const s = word.style;
+                    const textWidth = word.width - s.marginLeft - s.borderLeftWidth - s.paddingLeft
+                        - s.paddingRight - s.borderRightWidth - s.marginRight;
+                    const boxX = scanX + s.marginLeft;
+                    const boxW = s.borderLeftWidth + s.paddingLeft + textWidth + s.paddingRight + s.borderRightWidth;
+                    boxHasText = true;
+                    emitBox(s, boxX, boxX + boxW);
+                    boxHasText = false;
+                    scanX += word.width;
+                    continue;
+                }
+                if (word.boxStyle !== currentBoxStyle) {
+                    if (currentBoxStyle) {
+                        emitBox(currentBoxStyle, boxStartX, scanX);
+                    }
+                    currentBoxStyle = word.boxStyle;
+                    boxStartX = scanX;
+                    boxHasText = false;
+                }
+                // Track if we've seen actual text content (not spaces or empty padding markers)
+                if (word.text && !word.isSpace) {
+                    boxHasText = true;
+                }
+                scanX += word.width + (word.isSpace ? justifyExtraPerSpace : 0);
+            }
+            if (currentBoxStyle) {
+                emitBox(currentBoxStyle, boxStartX, scanX);
+            }
+        }
+        // Compute a single shared baseline for the entire line.
+        // Exclude sub/sup words — they sit above/below the baseline and
+        // shouldn't influence where the baseline is positioned.
+        let maxAscent = 0;
+        let maxDescent = 0;
+        for (const word of line.words) {
+            if (word.text === '')
+                continue;
+            const va = word.style.verticalAlign;
+            if (va === 'super' || va === 'sub')
+                continue; // skip sub/sup for baseline calc
+            ctx.font = buildCanvasFont(word.style);
+            const m = ctx.measureText('M');
+            const a = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
+            const d = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+            if (a > maxAscent)
+                maxAscent = a;
+            if (d > maxDescent)
+                maxDescent = d;
+        }
+        // If only sub/sup words on the line, use the first word's metrics
+        if (maxAscent === 0) {
+            for (const word of line.words) {
+                if (word.text === '')
+                    continue;
+                ctx.font = buildCanvasFont(word.style);
+                const m = ctx.measureText('M');
+                maxAscent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
+                maxDescent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+                break;
+            }
+        }
+        // Center the text block (ascent + descent) within the lineHeight
+        const textBlockHeight = maxAscent + maxDescent;
+        let lineBaselineY = curY + (lineHeight - textBlockHeight) / 2 + maxAscent;
+        // Expand line height if sub/sup extends beyond the line box.
+        // Browsers grow the line box to fit all content, but keep
+        // the normal text baseline position unchanged.
+        let effectiveLineHeight = lineHeight;
+        {
+            const lineNormalWords = line.words.filter(w => w.text !== '' && w.style.verticalAlign !== 'super' && w.style.verticalAlign !== 'sub');
+            const parentFontSize = lineNormalWords.length > 0
+                ? Math.max(...lineNormalWords.map(w => w.style.fontSize)) : 0;
+            let minTop = curY;
+            let maxBottom = curY + lineHeight;
+            for (const word of line.words) {
+                if (word.text === '')
+                    continue;
+                const va = word.style.verticalAlign;
+                if (va !== 'super' && va !== 'sub')
+                    continue;
+                if (parentFontSize === 0)
+                    break;
+                ctx.font = buildCanvasFont(word.style);
+                const m = ctx.measureText('M');
+                const wAscent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent;
+                const wDescent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent;
+                let shiftedBaseline = lineBaselineY;
+                if (va === 'super') {
+                    shiftedBaseline -= parentFontSize * 0.4;
+                }
+                else {
+                    shiftedBaseline += parentFontSize * 0.26;
+                }
+                const wordTop = shiftedBaseline - wAscent;
+                const wordBottom = shiftedBaseline + wDescent;
+                if (wordTop < minTop)
+                    minTop = wordTop;
+                if (wordBottom > maxBottom)
+                    maxBottom = wordBottom;
+            }
+            effectiveLineHeight = maxBottom - minTop;
+        }
+        // Pass 2: emit text
+        // For RTL lines with uniform style, emit as a single text node
+        // so the canvas can handle BiDi glyph shaping and connected letters.
+        const textWords = line.words.filter(w => w.text !== '');
+        const allSameStyle = textWords.length > 0 && textWords.every(w => w.style.fontFamily === textWords[0].style.fontFamily &&
+            w.style.fontSize === textWords[0].style.fontSize &&
+            w.style.fontWeight === textWords[0].style.fontWeight &&
+            w.style.fontStyle === textWords[0].style.fontStyle &&
+            w.style.color === textWords[0].style.color);
+        if (isRTL) {
+            // RTL: render words right-to-left
+            // Join consecutive words with same style into groups for proper glyph shaping
+            let rtlX = curX + line.totalWidth; // start from right edge
+            const groups = [];
+            let currentGroup = null;
+            for (const word of line.words) {
+                if (word.text === '') {
+                    // Padding marker — flush current group and add spacing
+                    if (currentGroup) {
+                        groups.push(currentGroup);
+                        currentGroup = null;
+                    }
+                    rtlX -= word.width;
+                    continue;
+                }
+                if (currentGroup &&
+                    currentGroup.style.fontFamily === word.style.fontFamily &&
+                    currentGroup.style.fontSize === word.style.fontSize &&
+                    currentGroup.style.fontWeight === word.style.fontWeight &&
+                    currentGroup.style.fontStyle === word.style.fontStyle &&
+                    currentGroup.style.color === word.style.color) {
+                    currentGroup.text += word.text;
+                    currentGroup.width += word.width;
+                }
+                else {
+                    if (currentGroup)
+                        groups.push(currentGroup);
+                    currentGroup = { text: word.text, style: word.style, width: word.width };
+                }
+            }
+            if (currentGroup)
+                groups.push(currentGroup);
+            // Emit groups right-to-left
+            for (const group of groups) {
+                ctx.font = buildCanvasFont(group.style);
+                const measuredWidth = ctx.measureText(group.text).width;
+                rtlX -= measuredWidth;
+                results.push({
+                    type: 'text',
+                    text: group.text,
+                    x: rtlX + measuredWidth, // x = right edge for RTL textAlign
+                    y: lineBaselineY,
+                    width: measuredWidth,
+                    style: { ...group.style, direction: 'rtl' },
+                });
+            }
+        }
+        else {
+            // LTR: word by word
+            for (const word of line.words) {
+                if (word.text === '') {
+                    curX += word.width;
+                    continue;
+                }
+                // Atomic inline-block: position text inside the box (after margin + padding)
+                if (word.boxOpen && word.boxClose) {
+                    const s = word.style;
+                    const textX = curX + s.marginLeft + s.borderLeftWidth + s.paddingLeft;
+                    results.push({
+                        type: 'text',
+                        text: word.text,
+                        x: textX,
+                        y: lineBaselineY,
+                        width: ctx.measureText(word.text).width,
+                        style: word.style,
+                    });
+                    curX += word.width;
+                    continue;
+                }
+                // Adjust baseline for vertical-align
+                let baselineY = lineBaselineY;
+                const va = word.style.verticalAlign;
+                if (va === 'super' || va === 'sub') {
+                    // Find parent font size (the normal-sized text on this line)
+                    const normalWords = textWords.filter(w => w.style.verticalAlign !== 'super' && w.style.verticalAlign !== 'sub');
+                    const parentFontSize = normalWords.length > 0
+                        ? Math.max(...normalWords.map(w => w.style.fontSize))
+                        : word.style.fontSize;
+                    if (va === 'super') {
+                        // Chrome raises super baseline by ~0.4em of parent font size
+                        baselineY -= parentFontSize * 0.4;
+                    }
+                    else {
+                        // Chrome lowers sub baseline by ~0.26em of parent font size
+                        baselineY += parentFontSize * 0.26;
+                    }
+                }
+                const effectiveWidth = word.width + (word.isSpace ? justifyExtraPerSpace : 0);
+                results.push({
+                    type: 'text',
+                    text: word.text,
+                    x: curX,
+                    y: baselineY,
+                    width: effectiveWidth,
+                    style: word.style,
+                });
+                curX += effectiveWidth;
+            }
+        }
+        curY += effectiveLineHeight;
+    }
+    return { nodes: results, height: curY - y };
+}
+// ─── Block layout ──────────────────────────────────────────────────────
+/**
+ * Collapse margins between two adjacent block elements.
+ * Returns the effective spacing (max of the two margins, not sum).
+ */
+function collapseMargins(prevMarginBottom, nextMarginTop) {
+    // Both positive: take the larger
+    if (prevMarginBottom >= 0 && nextMarginTop >= 0) {
+        return Math.max(prevMarginBottom, nextMarginTop);
+    }
+    // Both negative: take the more negative
+    if (prevMarginBottom < 0 && nextMarginTop < 0) {
+        return Math.min(prevMarginBottom, nextMarginTop);
+    }
+    // One positive, one negative: sum them
+    return prevMarginBottom + nextMarginTop;
+}
+/**
+ * Check if a node is a block-level display.
+ */
+function isBlock(node) {
+    const d = node.style.display;
+    return d === 'block' || d === 'list-item' || d === 'flex' || d === 'table' ||
+        d === 'table-row' || d === 'table-cell' || d === 'table-row-group' ||
+        d === 'table-header-group' || d === 'table-footer-group';
+}
+/**
+ * Layout a block-level element and all its children.
+ * Returns the LayoutBox and total height consumed (including margins).
+ */
+function layoutBlock(ctx, node, x, y, availableWidth) {
+    const style = node.style;
+    // Box model
+    const marginLeft = style.marginLeft;
+    const marginRight = style.marginRight;
+    const borderLeft = style.borderLeftWidth;
+    const borderRight = style.borderRightWidth;
+    const borderTop = style.borderTopWidth;
+    const borderBottom = style.borderBottomWidth;
+    const padLeft = style.paddingLeft;
+    const padRight = style.paddingRight;
+    const padTop = style.paddingTop;
+    const padBottom = style.paddingBottom;
+    const boxX = x + marginLeft;
+    // If element has explicit width, use it; otherwise fill available width
+    const boxWidth = (style.width > 0)
+        ? style.width
+        : availableWidth - marginLeft - marginRight;
+    const contentX = boxX + borderLeft + padLeft;
+    const contentWidth = Math.max(0, boxWidth - borderLeft - borderRight - padLeft - padRight);
+    const boxY = y;
+    const contentStartY = boxY + borderTop + padTop;
+    const box = {
+        type: 'box',
+        style,
+        x: boxX,
+        y: boxY,
+        width: boxWidth,
+        height: 0, // computed below
+        tagName: node.tagName,
+        children: [],
+        listMarker: node.listMarker,
+    };
+    // Flex layout
+    if (style.display === 'flex') {
+        const result = layoutFlex(ctx, node, contentX, contentStartY, contentWidth);
+        box.children = result.children;
+        box.height = borderTop + padTop + result.height + padBottom + borderBottom;
+        return { box, height: box.height, marginBottomOut: style.marginBottom };
+    }
+    // Table layout
+    if (style.display === 'table') {
+        const result = layoutTable(ctx, node, contentX, contentStartY, contentWidth);
+        box.children = result.children;
+        box.height = borderTop + padTop + result.height + padBottom + borderBottom;
+        return { box, height: box.height, marginBottomOut: style.marginBottom };
+    }
+    // Empty block elements: zero content height (CSS spec — no line boxes created).
+    // Only min-height or padding/border contribute to height.
+    if (node.children.length === 0) {
+        box.height = borderTop + padTop + padBottom + borderBottom;
+        if (style.minHeight > 0)
+            box.height = Math.max(box.height, style.minHeight);
+        return { box, height: box.height, marginBottomOut: style.marginBottom };
+    }
+    // Layout children
+    if (hasOnlyInlineChildren(node)) {
+        // Inline formatting context
+        const bulletProbe = node.tagName === 'li' && BULLET_MARKERS.has(style.listStyleType);
+        const { nodes, height } = layoutInlineContent(ctx, node, contentX, contentStartY, contentWidth, bulletProbe);
+        box.children = nodes;
+        box.height = borderTop + padTop + height + padBottom + borderBottom;
+    }
+    else {
+        // Block formatting context — stack children vertically
+        let curY = contentStartY;
+        let prevMarginBottom = 0;
+        let hasContent = false; // tracks whether we've placed any content
+        // Margin collapsing through parent: only for list elements.
+        const allowCollapseThrough = node.tagName === 'li' || node.tagName === 'ul' || node.tagName === 'ol' ||
+            node.tagName === 'dd' || node.tagName === 'dt';
+        for (let ci = 0; ci < node.children.length; ci++) {
+            const child = node.children[ci];
+            if (child.tagName === '#text' || isInline(child)) {
+                // Collect ALL consecutive inline/text children into one group
+                const inlineChildren = [child];
+                while (ci + 1 < node.children.length) {
+                    const next = node.children[ci + 1];
+                    if (next.tagName === '#text' || isInline(next)) {
+                        inlineChildren.push(next);
+                        ci++;
+                    }
+                    else {
+                        break;
+                    }
+                }
+                // Apply pending margin before inline content
+                if (prevMarginBottom > 0) {
+                    curY += prevMarginBottom;
+                    prevMarginBottom = 0;
+                }
+                const inlineGroup = {
+                    element: null,
+                    tagName: 'div',
+                    style: { ...node.style, display: 'block', marginTop: 0, marginBottom: 0, paddingTop: 0, paddingBottom: 0, borderTopWidth: 0, borderBottomWidth: 0 },
+                    children: inlineChildren,
+                    textContent: null,
+                };
+                const bulletProbe2 = node.tagName === 'li' && BULLET_MARKERS.has(style.listStyleType);
+                const { nodes, height } = layoutInlineContent(ctx, inlineGroup, contentX, curY, contentWidth, bulletProbe2);
+                box.children.push(...nodes);
+                curY += height;
+                prevMarginBottom = 0;
+                hasContent = true;
+                continue;
+            }
+            // Block child — collapse margins
+            const childMarginTop = child.style.marginTop;
+            // First child margin-top collapses through parent if parent has no top border/padding
+            // Only for elements that don't establish a new BFC (not root, not flex, not overflow)
+            // First child margin-top collapses through parent if parent has no
+            // top padding/border and doesn't establish a new BFC.
+            if (!hasContent && padTop === 0 && borderTop === 0 && allowCollapseThrough) {
+                // Skip — margin collapses with parent's margin
+            }
+            else {
+                const collapsed = collapseMargins(prevMarginBottom, childMarginTop);
+                curY += collapsed;
+            }
+            const { box: childBox, height: childTotalHeight, marginBottomOut } = layoutBlock(ctx, child, contentX, curY, contentWidth);
+            box.children.push(childBox);
+            curY += childTotalHeight;
+            prevMarginBottom = marginBottomOut;
+            hasContent = true;
+        }
+        // Last child's margin-bottom collapses through parent if no bottom border/padding.
+        // Root container does NOT collapse last-child margin (it defines the content height).
+        let marginBottomOut = style.marginBottom;
+        const canCollapseThrough = padBottom === 0 && borderBottom === 0 && allowCollapseThrough;
+        if (canCollapseThrough && prevMarginBottom > 0) {
+            // Last child's margin passes through to become parent's effective margin-bottom
+            marginBottomOut = Math.max(style.marginBottom, prevMarginBottom);
+        }
+        // Include last child's margin-bottom in parent height when it can't collapse through
+        let contentEnd = curY - contentStartY;
+        if (!canCollapseThrough && prevMarginBottom > 0) {
+            contentEnd += prevMarginBottom;
+        }
+        box.height = borderTop + padTop + contentEnd + padBottom + borderBottom;
+        if (style.minHeight > 0)
+            box.height = Math.max(box.height, style.minHeight);
+        return { box, height: box.height, marginBottomOut };
+    }
+    if (style.minHeight > 0)
+        box.height = Math.max(box.height, style.minHeight);
+    return { box, height: box.height, marginBottomOut: style.marginBottom };
+}
+// ─── Table layout ──────────────────────────────────────────────────────
+function layoutTable(ctx, node, contentX, contentY, contentWidth) {
+    const children = [];
+    // Collect rows from thead, tbody, tfoot, or direct tr children
+    const rows = [];
+    for (const child of node.children) {
+        if (child.tagName === 'tr') {
+            rows.push(child);
+        }
+        else if (['thead', 'tbody', 'tfoot'].includes(child.tagName)) {
+            for (const grandchild of child.children) {
+                if (grandchild.tagName === 'tr')
+                    rows.push(grandchild);
+            }
+        }
+    }
+    if (rows.length === 0)
+        return { children, height: 0 };
+    // Determine column count from first row
+    const colCount = Math.max(...rows.map(r => r.children.filter(c => c.tagName === 'td' || c.tagName === 'th').length));
+    if (colCount === 0)
+        return { children, height: 0 };
+    // Equal column widths (simple approach)
+    const colWidth = contentWidth / colCount;
+    let curY = contentY;
+    for (const row of rows) {
+        const cells = row.children.filter(c => c.tagName === 'td' || c.tagName === 'th');
+        let maxCellHeight = 0;
+        const cellBoxes = [];
+        for (let i = 0; i < cells.length; i++) {
+            const cell = cells[i];
+            const cellX = contentX + i * colWidth;
+            const { box: cellBox, height: cellHeight } = layoutBlock(ctx, cell, cellX, curY, colWidth);
+            cellBoxes.push(cellBox);
+            maxCellHeight = Math.max(maxCellHeight, cellHeight);
+        }
+        // Normalize cell heights to the tallest cell in the row
+        for (const cellBox of cellBoxes) {
+            cellBox.height = maxCellHeight;
+            children.push(cellBox);
+        }
+        curY += maxCellHeight;
+    }
+    return { children, height: curY - contentY };
+}
+// ─── Flex layout ───────────────────────────────────────────────────────
+function layoutFlex(ctx, node, contentX, contentY, contentWidth) {
+    const style = node.style;
+    const gap = style.gap;
+    const children = [];
+    const flexChildren = node.children.filter(c => c.tagName !== '#text' || c.textContent?.trim());
+    if (flexChildren.length === 0)
+        return { children, height: 0 };
+    if (style.flexDirection === 'row' || style.flexDirection === '') {
+        // Row layout
+        const totalGaps = gap * (flexChildren.length - 1);
+        const totalGrow = flexChildren.reduce((s, c) => s + (c.style.flexGrow || 0), 0);
+        const flexBasis = (contentWidth - totalGaps) / (totalGrow || flexChildren.length);
+        let curX = contentX;
+        let maxHeight = 0;
+        for (const child of flexChildren) {
+            if (child.tagName === '#text')
+                continue;
+            const grow = child.style.flexGrow || (totalGrow === 0 ? 1 : 0);
+            const childWidth = flexBasis * grow;
+            const { box, height } = layoutBlock(ctx, child, curX, contentY, childWidth);
+            children.push(box);
+            maxHeight = Math.max(maxHeight, height);
+            curX += childWidth + gap;
+        }
+        return { children, height: maxHeight };
+    }
+    // Column layout (fallback)
+    let curY = contentY;
+    for (const child of flexChildren) {
+        if (child.tagName === '#text')
+            continue;
+        const { box, height } = layoutBlock(ctx, child, contentX, curY, contentWidth);
+        children.push(box);
+        curY += height + gap;
+    }
+    return { children, height: curY - contentY };
+}
+// ─── List marker layout ────────────────────────────────────────────────
+/**
+ * Add list marker to a layout box if applicable.
+ */
+function addListMarker(ctx, box, node) {
+    if (!node.listMarker)
+        return;
+    const style = node.style;
+    ctx.font = buildCanvasFont(style);
+    const lineHeight = getLineHeight(ctx, style);
+    const baselineY = box.y + style.borderTopWidth + style.paddingTop +
+        computeBaselineY(ctx, style, lineHeight);
+    const markerWidth = ctx.measureText(node.listMarker).width;
+    // Content starts at box.x + borderLeft + paddingLeft
+    // Place marker right-aligned within the padding area, with a small gap before content
+    const contentStartX = box.x + style.borderLeftWidth + style.paddingLeft;
+    const gap = style.fontSize * 0.15; // small gap between marker and content
+    const markerX = contentStartX - markerWidth - gap;
+    box.children.unshift({
+        type: 'text',
+        text: node.listMarker,
+        x: markerX,
+        y: baselineY,
+        width: markerWidth,
+        style: { ...style, textDecorationLine: 'none', fontWeight: 400, fontStyle: 'normal' },
+    });
+}
+// ─── Main entry ────────────────────────────────────────────────────────
+/**
+ * Build the layout tree from the styled tree using pure canvas measurement.
+ * No DOM measurements used — all positions computed from CSS values + canvas.measureText.
+ */
+export function getDomMeasureCount() { return _domMeasureCount; }
+export function resetDomMeasureCount() { _domMeasureCount = 0; }
+export function buildLayoutTree(ctx, styledTree, containerWidth, useDomMeasurements = true, debug) {
+    _useDomMeasurements = useDomMeasurements;
+    _debug = debug;
+    // Clear line height cache — fonts may have loaded since last call
+    _lineHeightCache.clear();
+    // The styledTree root is our container div — layout its children as a block flow
+    const { box, height } = layoutBlock(ctx, styledTree, 0, 0, containerWidth);
+    // Add list markers post-layout
+    addListMarkersRecursive(ctx, box, styledTree);
+    return { root: box, height };
+}
+function addListMarkersRecursive(ctx, box, node) {
+    addListMarker(ctx, box, node);
+    // Match children — box.children may have extra text/inline nodes,
+    // so we correlate by walking both in parallel
+    let boxChildIdx = 0;
+    for (const styledChild of node.children) {
+        if (styledChild.tagName === '#text' || isInline(styledChild)) {
+            continue;
+        }
+        // Find the matching LayoutBox
+        while (boxChildIdx < box.children.length) {
+            const layoutChild = box.children[boxChildIdx];
+            if (layoutChild.type === 'box' && layoutChild.tagName === styledChild.tagName) {
+                addListMarkersRecursive(ctx, layoutChild, styledChild);
+                boxChildIdx++;
+                break;
+            }
+            boxChildIdx++;
+        }
+    }
+}
+//# sourceMappingURL=layout.js.map