pretext-pdf 0.5.3 → 0.8.1

package/dist/measure-blocks.js

@@ -6,6 +6,7 @@ import { PretextPdfError } from './errors.js';
 import { measureRichText } from './rich-text.js';
 import { buildFontKey } from './measure.js';
 import { measureText, getPretext, detectAndReorderRTL } from './measure-text.js';
+import { LINE_HEIGHT_BODY, LINE_HEIGHT_COMPACT } from './render-utils.js';
 /** Heading level size multipliers and defaults */
 const HEADING_DEFAULTS = {
     1: { sizeMultiplier: 2.0, fontWeight: 700, spaceAfter: 16, spaceBefore: 28 },
@@ -68,7 +69,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
         case 'form-field': {
             const el = element;
             const fs = el.fontSize ?? baseFontSize;
-            const labelHeight = el.label ? fs * 1.5 + 4 : 0;
+            const labelHeight = el.label ? fs * LINE_HEIGHT_BODY + 4 : 0;
             let fieldHeight = el.height;
             if (!fieldHeight) {
                 if (el.fieldType === 'text' && el.multiline)
@@ -97,7 +98,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             // smallCaps renders at 80% of fontSize — measure at the same size to avoid
             // overestimating block height and wasting vertical space
             const effectiveFontSize = element.smallCaps === true ? fontSize * 0.8 : fontSize;
-            const lineHeight = element.lineHeight ?? doc.defaultParagraphStyle?.lineHeight ?? doc.defaultLineHeight ?? (effectiveFontSize * 1.5);
+            const lineHeight = element.lineHeight ?? doc.defaultParagraphStyle?.lineHeight ?? doc.defaultLineHeight ?? (effectiveFontSize * LINE_HEIGHT_BODY);
             const fontFamily = element.fontFamily ?? doc.defaultParagraphStyle?.fontFamily ?? baseFont;
             const fontWeight = element.fontWeight ?? doc.defaultParagraphStyle?.fontWeight ?? 400;
             const fontKey = buildFontKey(fontFamily, fontWeight, 'normal');
@@ -108,8 +109,8 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             // Multi-column layout
             let computedColumnWidth = contentWidth;
             if (columns > 1) {
-                if (columns > 20) {
-                    throw new PretextPdfError('VALIDATION_ERROR', `columns must be 1–20, got ${columns}`);
+                if (columns > 6) {
+                    throw new PretextPdfError('VALIDATION_ERROR', `columns must be 1–6, got ${columns}`);
                 }
                 computedColumnWidth = (contentWidth - (columns - 1) * columnGap) / columns;
                 if (computedColumnWidth < 50) {
@@ -177,7 +178,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             const fontSize = element.fontSize ?? (baseHeadingFontSize * defaults.sizeMultiplier);
             // smallCaps renders at 80% — measure at effective size
             const effectiveFontSize = element.smallCaps === true ? fontSize * 0.8 : fontSize;
-            const lineHeight = element.lineHeight ?? doc.defaultParagraphStyle?.lineHeight ?? doc.defaultLineHeight ?? (effectiveFontSize * 1.4);
+            const lineHeight = element.lineHeight ?? doc.defaultParagraphStyle?.lineHeight ?? doc.defaultLineHeight ?? (effectiveFontSize * LINE_HEIGHT_COMPACT);
             const fontFamily = element.fontFamily ?? doc.defaultParagraphStyle?.fontFamily ?? baseFont;
             const fontWeight = element.fontWeight ?? doc.defaultParagraphStyle?.fontWeight ?? defaults.fontWeight;
             const fontKey = buildFontKey(fontFamily, fontWeight, 'normal');
@@ -243,7 +244,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             const fullText = element.spans.map(s => s.text).join('');
             const { isRTL } = await detectAndReorderRTL(fullText, element.dir);
             const fontSize = element.fontSize ?? baseFontSize;
-            const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * 1.5);
+            const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * LINE_HEIGHT_BODY);
             // 'justify' uses left alignment for measurement (justify is rendering-only)
             const alignRaw = element.align ?? 'left';
             const align = alignRaw === 'justify' ? 'left' : alignRaw;
@@ -307,7 +308,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
         }
         case 'code': {
             const fontSize = element.fontSize ?? Math.max(baseFontSize - 2, 8);
-            const lineHeight = element.lineHeight ?? (fontSize * 1.4);
+            const lineHeight = element.lineHeight ?? (fontSize * LINE_HEIGHT_COMPACT);
             const padding = element.padding ?? 8;
             // Text area is narrower by padding on both sides
             const textWidth = contentWidth - 2 * padding;
@@ -316,6 +317,11 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             const lines = await measureText(element.text, fontSize, element.fontFamily, 400, Math.max(textWidth, 1), lineHeight);
             // height = lines * lineHeight + padding top + padding bottom
             const height = (lines.length || 1) * lineHeight + 2 * padding;
+            // Syntax highlighting: tokenize if language is set
+            let codeHighlightTokens;
+            if (element.language) {
+                codeHighlightTokens = await tokenizeCodeForHighlighting(element.text, element.language, element.color ?? '#24292f', lines.length, element.highlightTheme);
+            }
             return {
                 element,
                 height,
@@ -326,6 +332,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
                 spaceAfter: element.spaceAfter ?? 12,
                 spaceBefore: element.spaceBefore ?? 12,
                 codePadding: padding,
+                ...(codeHighlightTokens ? { codeHighlightTokens } : {}),
                 isRTL: false, // NEW (Phase 7F): Code blocks always LTR
             };
         }
@@ -333,7 +340,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             // NEW (Phase 7F): Detect and reorder RTL text
             const { visual: visualText, isRTL, logical: logicalText } = await detectAndReorderRTL(element.text, element.dir);
             const fontSize = element.fontSize ?? baseFontSize;
-            const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * 1.5);
+            const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * LINE_HEIGHT_BODY);
             const fontFamily = element.fontFamily ?? baseFont;
             const fontWeight = element.fontWeight ?? 400;
             const fontStyle = element.fontStyle ?? 'normal';
@@ -366,7 +373,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
         case 'callout': {
             const el = element;
             const fs = el.fontSize ?? baseFontSize;
-            const lh = el.lineHeight ?? (fs * 1.5);
+            const lh = el.lineHeight ?? (fs * LINE_HEIGHT_BODY);
             const ph = el.paddingH ?? el.padding ?? 16;
             const pv = el.paddingV ?? el.padding ?? 10;
             const family = el.fontFamily ?? baseFont;
@@ -378,7 +385,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             // Measure title height (one line assumed, bold)
             let titleHeight = 0;
             if (el.title) {
-                titleHeight = fs * 1.4 + 4; // 1.4 line height + 4pt separator
+                titleHeight = fs * LINE_HEIGHT_COMPACT + 4; // compact line height + 4pt separator
             }
             // Measure content text
             const innerWidth = contentWidth - ph * 2;
@@ -421,7 +428,7 @@ export async function measureBlock(element, contentWidth, doc, hyphenatorOpts) {
             const fn = element;
             const baseFontSize = doc.defaultFontSize ?? 12;
             const fontSize = fn.fontSize ?? Math.max(8, baseFontSize - 2);
-            const lineHeight = fontSize * 1.5;
+            const lineHeight = fontSize * LINE_HEIGHT_BODY;
             const fontFamily = fn.fontFamily ?? doc.defaultFont ?? 'Inter';
             const fontKey = buildFontKey(fontFamily, 400, 'normal');
             // Measure the def text with a 20pt left indent (for the number prefix space)
@@ -534,16 +541,25 @@ export async function measureFloatImageBlock(element, imageKey, imageMap, conten
     const imageBlock = await measureImageWithKey(syntheticEl, imageKey, imageMap, floatWidth, pageContentHeight);
     const imageRenderWidth = imageBlock.imageData.renderWidth;
     const imageRenderHeight = imageBlock.imageData.renderHeight;
-    // Measure the float text
+    // Measure the float text (plain or rich)
     const fontSize = element.floatFontSize ?? doc.defaultFontSize ?? 12;
-    const lineHeight = fontSize * 1.5;
+    const lineHeight = fontSize * LINE_HEIGHT_BODY;
     const fontFamily = element.floatFontFamily ?? doc.defaultFont ?? 'Inter';
     const fontKey = buildFontKey(fontFamily, 400, 'normal');
-    const textLines = await measureText(element.floatText, fontSize, fontFamily, 400, textColWidth, lineHeight, undefined);
+    let textLines = [];
+    let richFloatLines;
+    if (element.floatSpans) {
+        richFloatLines = await measureRichText(element.floatSpans, fontSize, lineHeight, textColWidth, 'left', doc);
+    }
+    else {
+        textLines = await measureText(element.floatText, fontSize, fontFamily, 400, textColWidth, lineHeight, undefined);
+    }
     // Column X positions
     const imageColX = element.float === 'left' ? 0 : textColWidth + floatGap;
     const textColX = element.float === 'left' ? floatWidth + floatGap : 0;
-    const textHeight = textLines.length * lineHeight;
+    const textHeight = richFloatLines
+        ? richFloatLines.reduce((sum, l) => sum + l.lineHeight, 0)
+        : textLines.length * lineHeight;
     const compositeHeight = Math.max(imageRenderHeight, textHeight);
     return {
         element,
@@ -562,6 +578,7 @@ export async function measureFloatImageBlock(element, imageKey, imageMap, conten
             textColX,
             textColWidth,
             textLines,
+            ...(richFloatLines ? { richFloatLines } : {}),
             textFontKey: fontKey,
             textFontSize: fontSize,
             textLineHeight: lineHeight,
@@ -600,7 +617,7 @@ export async function measureFloatGroup(element, imageKey, imageMap, contentWidt
         const blocks = Array.isArray(measuredEl) ? measuredEl : [measuredEl];
         for (const block of blocks) {
             const fontSize = block.fontSize || baseFontSize;
-            const lineHeight = block.lineHeight || (fontSize * 1.5);
+            const lineHeight = block.lineHeight || (fontSize * LINE_HEIGHT_BODY);
             // Extract text from lines or rich-lines
             let lines = [];
             if (block.richLines && block.richLines.length > 0) {
@@ -663,12 +680,12 @@ export async function measureFloatGroup(element, imageKey, imageMap, contentWidt
 async function measureList(element, contentWidth, doc, baseFontSize, hyphenatorOpts) {
     const baseFontFamily = doc.defaultFont ?? 'Inter';
     const fontSize = element.fontSize ?? baseFontSize;
-    const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * 1.5);
+    const lineHeight = element.lineHeight ?? doc.defaultLineHeight ?? (fontSize * LINE_HEIGHT_BODY);
     const indent = element.indent ?? 20;
     const itemSpaceAfter = element.itemSpaceAfter ?? 4;
     const fontKey = buildFontKey(baseFontFamily, 400, 'normal');
     const blocks = [];
-    // Flatten items and nested items
+    // Flatten items and nested items (up to 2 levels deep)
     const nestedStyle = element.nestedNumberingStyle ?? 'continue';
     let orderedIndex = 1;
     const allItems = [];
@@ -679,8 +696,8 @@ async function measureList(element, contentWidth, doc, baseFontSize, hyphenatorO
             ? `${orderedIndex}.`
             : (element.marker ?? '•');
         orderedIndex++;
-        allItems.push({ text: item.text, marker, isNested: false, isFirstInList: isFirst, fontWeight: item.fontWeight ?? 400 });
-        // Nested items (1 level deep)
+        allItems.push({ text: item.text, marker, depth: 0, isFirstInList: isFirst, fontWeight: item.fontWeight ?? 400 });
+        // Nested items (depth 1)
         if (item.items && item.items.length > 0) {
             // 'restart': nested ordered items count from 1, parent counter unaffected
             // 'continue': nested items share the parent counter (existing behavior)
@@ -689,11 +706,25 @@ async function measureList(element, contentWidth, doc, baseFontSize, hyphenatorO
                 const nested = item.items[ni];
                 const nestedMarker = element.style === 'ordered'
                     ? `${nestedIndex}.`
-                    : '◦'; // hollow bullet for nested unordered
+                    : '◦'; // hollow bullet for depth-1 unordered
                 nestedIndex++;
                 if (nestedStyle === 'continue')
                     orderedIndex++;
-                allItems.push({ text: nested.text, marker: nestedMarker, isNested: true, isFirstInList: false, fontWeight: nested.fontWeight ?? 400 });
+                allItems.push({ text: nested.text, marker: nestedMarker, depth: 1, isFirstInList: false, fontWeight: nested.fontWeight ?? 400 });
+                // Nested items (depth 2)
+                if (nested.items && nested.items.length > 0) {
+                    let deepIndex = nestedStyle === 'restart' ? 1 : nestedIndex;
+                    for (let di = 0; di < nested.items.length; di++) {
+                        const deep = nested.items[di];
+                        const deepMarker = element.style === 'ordered'
+                            ? `${deepIndex}.`
+                            : '▪'; // small filled square for depth-2 unordered
+                        deepIndex++;
+                        if (nestedStyle === 'continue')
+                            orderedIndex++;
+                        allItems.push({ text: deep.text, marker: deepMarker, depth: 2, isFirstInList: false, fontWeight: deep.fontWeight ?? 400 });
+                    }
+                }
             }
         }
     }
@@ -717,8 +748,8 @@ async function measureList(element, contentWidth, doc, baseFontSize, hyphenatorO
     for (let i = 0; i < allItems.length; i++) {
         const item = allItems[i];
         const isLast = i === allItems.length - 1;
-        const nestedIndent = item.isNested ? indent + markerWidth : indent;
-        const nestedTextWidth = item.isNested ? textWidth - markerWidth : textWidth;
+        const nestedIndent = indent + item.depth * markerWidth;
+        const nestedTextWidth = textWidth - item.depth * markerWidth;
         const lines = await measureText(item.text, fontSize, baseFontFamily, item.fontWeight, nestedTextWidth, lineHeight, hyphenatorOpts);
         const listItemData = {
             marker: item.marker,
@@ -745,25 +776,49 @@ async function measureList(element, contentWidth, doc, baseFontSize, hyphenatorO
     }
     return blocks;
 }
-// ─── Table measurement ────────────────────────────────────────────────────────
+/** Build a map from "rowIdx,colIdx" → span origin info for all positions occupied by a rowspan cell from an earlier row. */
+function buildSpanGrid(rows) {
+    const grid = new Map();
+    for (let ri = 0; ri < rows.length; ri++) {
+        let ci = 0;
+        for (const cell of rows[ri].cells) {
+            while (grid.has(`${ri},${ci}`))
+                ci++;
+            const cs = cell.colspan ?? 1;
+            const rs = cell.rowspan ?? 1;
+            for (let r2 = ri + 1; r2 < ri + rs; r2++) {
+                for (let c2 = ci; c2 < ci + cs; c2++) {
+                    grid.set(`${r2},${c2}`, { originRowIdx: ri, originColStart: ci, colspan: cs, rowspan: rs });
+                }
+            }
+            ci += cs;
+        }
+    }
+    return grid;
+}
 async function measureTable(element, contentWidth, doc, baseFontSize, hyphenatorOpts) {
     const baseFontFamily = doc.defaultFont ?? 'Inter';
     const fontSize = element.fontSize ?? baseFontSize;
-    const lineHeight = doc.defaultLineHeight ?? (fontSize * 1.5);
+    const lineHeight = doc.defaultLineHeight ?? (fontSize * LINE_HEIGHT_BODY);
     const cellPaddingH = element.cellPaddingH ?? 8;
     const cellPaddingV = element.cellPaddingV ?? 6;
     const borderWidth = element.borderWidth ?? 0.5;
     const borderColor = element.borderColor ?? '#cccccc';
     const headerBgColor = element.headerBgColor ?? '#f5f5f5';
+    // Build span occupancy grid (needed for correct colStart tracking in all passes)
+    const spanGrid = buildSpanGrid(element.rows);
     // Pre-pass: measure natural widths for 'auto' columns — run all in parallel
     const hasAutoColumns = element.columns.some(c => c.width === 'auto');
     let naturalWidths;
     if (hasAutoColumns) {
         naturalWidths = new Array(element.columns.length).fill(0);
         const jobs = [];
-        for (const row of element.rows) {
+        for (let rowIdx = 0; rowIdx < element.rows.length; rowIdx++) {
+            const row = element.rows[rowIdx];
             let colIdx = 0;
             for (const cell of row.cells) {
+                while (spanGrid.has(`${rowIdx},${colIdx}`))
+                    colIdx++;
                 const cs = cell.colspan ?? 1;
                 if (element.columns[colIdx]?.width === 'auto') {
                     jobs.push({
@@ -798,10 +853,14 @@ async function measureTable(element, contentWidth, doc, baseFontSize, hyphenator
         ? element.headerRows
         : element.rows.filter(r => r.isHeader).length;
     const allCellMeta = [];
-    for (const row of element.rows) {
+    for (let rowIdx = 0; rowIdx < element.rows.length; rowIdx++) {
+        const row = element.rows[rowIdx];
         let colStart = 0;
         for (const cell of row.cells) {
+            while (spanGrid.has(`${rowIdx},${colStart}`))
+                colStart++;
             const cs = cell.colspan ?? 1;
+            const rs = cell.rowspan ?? 1;
             const col = element.columns[colStart];
             let mergedWidth = 0;
             for (let si = colStart; si < colStart + cs && si < columnWidths.length; si++) {
@@ -812,11 +871,11 @@ async function measureTable(element, contentWidth, doc, baseFontSize, hyphenator
             const fontWeight = (cell.fontWeight ?? (row.isHeader ? 700 : 400));
             const fontFamily = cell.fontFamily ?? baseFontFamily;
             const cellFontSize = cell.fontSize ?? fontSize;
-            const cellLineHeight = doc.defaultLineHeight ?? (cellFontSize * 1.5);
+            const cellLineHeight = doc.defaultLineHeight ?? (cellFontSize * LINE_HEIGHT_BODY);
             const cellFontKey = buildFontKey(fontFamily, fontWeight, 'normal');
             const textWidth = mergedWidth - 2 * cellPaddingH - borderWidth;
-            const cellDir = (cell.dir ?? 'auto');
-            allCellMeta.push({ cell, row, cs, col, mergedWidth, fontWeight, fontFamily, cellFontSize, cellLineHeight, cellFontKey, textWidth, cellDir });
+            const cellDir = (cell.dir ?? element.dir ?? 'auto');
+            allCellMeta.push({ cell, row, rowIdx, colStart, cs, rs, col, mergedWidth, fontWeight, fontFamily, cellFontSize, cellLineHeight, cellFontKey, textWidth, cellDir });
             colStart += cs;
         }
     }
@@ -826,39 +885,110 @@ async function measureTable(element, contentWidth, doc, baseFontSize, hyphenator
         const lines = await measureText(cellVisualText, m.cellFontSize, m.fontFamily, m.fontWeight, Math.max(m.textWidth, 1), m.cellLineHeight, hyphenatorOpts);
         return { cellVisualText, cellIsRTL, lines };
     }));
-    // Step 3: Reassemble into measuredRows
+    const cellByKey = new Map();
+    for (let i = 0; i < allCellMeta.length; i++) {
+        const m = allCellMeta[i];
+        cellByKey.set(`${m.rowIdx},${m.colStart}`, { meta: m, result: cellResults[i] });
+    }
+    // Sub-pass 3a: Compute raw row heights from non-spanning cells only
+    const rowHeights = new Array(element.rows.length).fill(0);
+    for (const { meta: m, result } of cellByKey.values()) {
+        if (m.rs === 1) {
+            const cellContentHeight = Math.max(result.lines.length, 1) * m.cellLineHeight;
+            rowHeights[m.rowIdx] = Math.max(rowHeights[m.rowIdx], cellContentHeight);
+        }
+    }
+    for (let ri = 0; ri < rowHeights.length; ri++) {
+        rowHeights[ri] = (rowHeights[ri] ?? 0) + 2 * cellPaddingV;
+    }
+    // Sub-pass 3b: Expand last spanned row if spanning cell needs more space
+    for (const { meta: m, result } of cellByKey.values()) {
+        if (m.rs > 1) {
+            const cellContentHeight = Math.max(result.lines.length, 1) * m.cellLineHeight + 2 * cellPaddingV;
+            let spanHeight = 0;
+            for (let r2 = m.rowIdx; r2 < m.rowIdx + m.rs && r2 < rowHeights.length; r2++) {
+                spanHeight += rowHeights[r2];
+            }
+            if (cellContentHeight > spanHeight) {
+                const lastRowIdx = Math.min(m.rowIdx + m.rs - 1, rowHeights.length - 1);
+                rowHeights[lastRowIdx] += cellContentHeight - spanHeight;
+            }
+        }
+    }
+    // Sub-pass 3c: Build measuredRows, inserting placeholder cells for rowspan continuations
     const measuredRows = [];
-    let cellIdx = 0;
-    for (const row of element.rows) {
+    const numColumns = element.columns.length;
+    for (let rowIdx = 0; rowIdx < element.rows.length; rowIdx++) {
+        const row = element.rows[rowIdx];
+        const rowHeight = rowHeights[rowIdx];
         const measuredCells = [];
-        let maxCellHeight = 0;
-        for (const _ of row.cells) {
-            const m = allCellMeta[cellIdx];
-            const { cellIsRTL, lines } = cellResults[cellIdx];
-            const cellContentHeight = Math.max(lines.length, 1) * m.cellLineHeight;
-            maxCellHeight = Math.max(maxCellHeight, cellContentHeight);
-            const align = m.cell.align ?? m.col.align ?? (cellIsRTL ? 'right' : 'left');
-            const measuredCell = {
-                lines,
-                fontSize: m.cellFontSize,
-                lineHeight: m.cellLineHeight,
-                fontKey: m.cellFontKey,
-                fontFamily: m.fontFamily,
-                align,
-                color: m.cell.color ?? '#000000',
-                colspan: m.cs,
-                mergedWidth: m.mergedWidth,
-                isRTL: cellIsRTL,
-                ...(m.cell.tabularNumbers !== undefined && { tabularNumbers: m.cell.tabularNumbers }),
-            };
-            if (m.cell.bgColor !== undefined)
-                measuredCell.bgColor = m.cell.bgColor;
-            measuredCells.push(measuredCell);
-            cellIdx++;
+        let hasRowspan = false;
+        let colCursor = 0;
+        while (colCursor < numColumns) {
+            const spanEntry = spanGrid.get(`${rowIdx},${colCursor}`);
+            if (spanEntry) {
+                // Only insert ONE placeholder per span group (at the leftmost column of the span)
+                if (colCursor === spanEntry.originColStart) {
+                    const originCell = cellByKey.get(`${spanEntry.originRowIdx},${spanEntry.originColStart}`);
+                    const pw = originCell?.meta.mergedWidth ?? (columnWidths[colCursor] ?? 0);
+                    measuredCells.push({
+                        lines: [], fontSize: 0, lineHeight: 0, fontKey: '', fontFamily: '',
+                        align: 'left', color: '#000000',
+                        colspan: spanEntry.colspan, mergedWidth: pw,
+                        isSpanPlaceholder: true,
+                    });
+                    colCursor += spanEntry.colspan;
+                }
+                else {
+                    // Mid-span column not at origin — advance past the full span group
+                    colCursor += spanEntry.colspan;
+                }
+            }
+            else {
+                const cellAtCol = cellByKey.get(`${rowIdx},${colCursor}`);
+                if (!cellAtCol) {
+                    colCursor++;
+                    continue;
+                }
+                const { meta: m, result: { cellIsRTL, lines } } = cellAtCol;
+                let spanHeight;
+                if (m.rs > 1) {
+                    spanHeight = 0;
+                    for (let r2 = rowIdx; r2 < rowIdx + m.rs && r2 < rowHeights.length; r2++) {
+                        spanHeight += rowHeights[r2];
+                    }
+                    hasRowspan = true;
+                }
+                const align = m.cell.align ?? m.col.align ?? (cellIsRTL ? 'right' : 'left');
+                const measuredCell = {
+                    lines,
+                    fontSize: m.cellFontSize,
+                    lineHeight: m.cellLineHeight,
+                    fontKey: m.cellFontKey,
+                    fontFamily: m.fontFamily,
+                    align,
+                    color: m.cell.color ?? '#000000',
+                    colspan: m.cs,
+                    mergedWidth: m.mergedWidth,
+                    isRTL: cellIsRTL,
+                    ...(m.cell.tabularNumbers !== undefined && { tabularNumbers: m.cell.tabularNumbers }),
+                    ...(m.rs > 1 ? { rowspan: m.rs } : {}),
+                    ...(spanHeight !== undefined ? { spanHeight } : {}),
+                };
+                if (m.cell.bgColor !== undefined)
+                    measuredCell.bgColor = m.cell.bgColor;
+                measuredCells.push(measuredCell);
+                colCursor += m.cs;
+            }
         }
-        const rowHeight = maxCellHeight + 2 * cellPaddingV;
-        const activeBoundaries = computeActiveBoundaries(row.cells, element.columns.length);
-        measuredRows.push({ cells: measuredCells, height: rowHeight, isHeader: row.isHeader ?? false, activeBoundaries });
+        const activeBoundaries = computeActiveBoundaries(measuredCells, numColumns);
+        measuredRows.push({
+            cells: measuredCells,
+            height: rowHeight,
+            isHeader: row.isHeader ?? false,
+            activeBoundaries,
+            ...(hasRowspan ? { hasRowspan: true } : {}),
+        });
     }
     // Header rows are the first N rows
     const headerRows = measuredRows.slice(0, headerRowCount);
@@ -1007,10 +1137,165 @@ async function measureNaturalTextWidth(text, fontSize, fontFamily, fontWeight) {
     // Use a very large width to prevent wrapping; also handle multi-line text (\n)
     // by taking the max line width across all lines
     const prepared = prepareWithSegments(text, fontString, { whiteSpace: 'pre-wrap' });
-    const result = layoutWithLines(prepared, 99999, fontSize * 1.5);
+    const result = layoutWithLines(prepared, 99999, fontSize * LINE_HEIGHT_BODY);
     const lines = result.lines ?? [];
     return lines.reduce((max, line) => Math.max(max, line.width), 0);
 }
+// ─── Syntax highlighting ──────────────────────────────────────────────────────
+/** Default GitHub-light-inspired highlight theme colors */
+const DEFAULT_HIGHLIGHT_THEME = {
+    keyword: '#cf222e',
+    string: '#0a3069',
+    comment: '#6e7781',
+    number: '#0550ae',
+    function: '#8250df',
+    title: '#8250df',
+    built_in: '#0550ae',
+    literal: '#0550ae',
+    type: '#953800',
+    meta: '#cf222e',
+    attr: '#0550ae',
+    name: '#0550ae',
+    params: '#24292f',
+    punctuation: '#24292f',
+    operator: '#24292f',
+    regexp: '#0a3069',
+    variable: '#953800',
+    property: '#0550ae',
+    tag: '#116329',
+    selector: '#116329',
+    subst: '#24292f',
+    'template-tag': '#cf222e',
+    'template-string': '#0a3069',
+    symbol: '#0550ae',
+    addition: '#116329',
+    deletion: '#cf222e',
+    section: '#0550ae',
+};
+/** Cached highlight.js module (loaded once, reused across code blocks) */
+let _hljsCache = null;
+let _hljsLoadAttempted = false;
+/**
+ * Tokenize source code into per-line colored spans using highlight.js.
+ * Returns undefined if highlight.js is not installed (renderer falls back to plain text).
+ */
+async function tokenizeCodeForHighlighting(text, language, defaultColor, measuredLineCount, customTheme) {
+    if (!_hljsLoadAttempted) {
+        _hljsLoadAttempted = true;
+        try {
+            const mod = await import('highlight.js');
+            _hljsCache = mod.default ?? mod;
+        }
+        catch { /* not installed */ }
+    }
+    if (!_hljsCache)
+        return undefined;
+    const hljs = _hljsCache;
+    const theme = { ...DEFAULT_HIGHLIGHT_THEME };
+    if (customTheme) {
+        for (const [k, v] of Object.entries(customTheme)) {
+            if (v !== undefined)
+                theme[k] = v;
+        }
+    }
+    let highlighted;
+    try {
+        const result = language === 'auto'
+            ? hljs.highlightAuto(text)
+            : hljs.highlight(text, { language });
+        highlighted = result.value;
+    }
+    catch {
+        return undefined;
+    }
+    const tokens = parseHighlightHtml(highlighted, defaultColor, theme);
+    // Safety check: tokenizer splits on \n but the layout engine may wrap long lines.
+    // If line counts don't match, the colors would be applied to the wrong lines.
+    if (tokens.length !== measuredLineCount)
+        return undefined;
+    return tokens;
+}
+/**
+ * Parse highlight.js HTML into per-line token arrays.
+ * Handles nested spans (e.g. string interpolation) by tracking a color stack.
+ */
+function parseHighlightHtml(html, defaultColor, theme) {
+    const lines = [[]];
+    const colorStack = [defaultColor];
+    let i = 0;
+    while (i < html.length) {
+        if (html[i] === '<') {
+            const closeTag = html.indexOf('>', i);
+            if (closeTag === -1)
+                break;
+            const tag = html.slice(i, closeTag + 1);
+            if (tag.startsWith('<span')) {
+                // Extract class: <span class="hljs-keyword"> or <span class="hljs-template-string">
+                const classMatch = tag.match(/class="hljs-([\w-]+)"/);
+                const cls = classMatch ? classMatch[1] : '';
+                colorStack.push(theme[cls] ?? defaultColor);
+            }
+            else if (tag === '</span>') {
+                if (colorStack.length > 1)
+                    colorStack.pop();
+            }
+            i = closeTag + 1;
+        }
+        else if (html[i] === '&') {
+            // HTML entities: named (&amp;), hex (&#x3D;), decimal (&#96;)
+            const semi = html.indexOf(';', i);
+            if (semi !== -1 && semi - i < 10) {
+                const entity = html.slice(i, semi + 1);
+                let ch;
+                if (entity === '&amp;')
+                    ch = '&';
+                else if (entity === '&lt;')
+                    ch = '<';
+                else if (entity === '&gt;')
+                    ch = '>';
+                else if (entity === '&quot;')
+                    ch = '"';
+                else if (entity === '&#x27;' || entity === '&apos;')
+                    ch = "'";
+                else if (entity.startsWith('&#x'))
+                    ch = String.fromCodePoint(parseInt(entity.slice(3, -1), 16));
+                else if (entity.startsWith('&#'))
+                    ch = String.fromCodePoint(parseInt(entity.slice(2, -1), 10));
+                else
+                    ch = entity; // unknown named entity — keep as-is
+                lines[lines.length - 1].push({ text: ch, color: colorStack[colorStack.length - 1] });
+                i = semi + 1;
+            }
+            else {
+                lines[lines.length - 1].push({ text: '&', color: colorStack[colorStack.length - 1] });
+                i++;
+            }
+        }
+        else if (html[i] === '\n') {
+            lines.push([]);
+            i++;
+        }
+        else {
+            // Regular text — accumulate consecutive chars with same color
+            const color = colorStack[colorStack.length - 1];
+            let end = i + 1;
+            while (end < html.length && html[end] !== '<' && html[end] !== '&' && html[end] !== '\n')
+                end++;
+            lines[lines.length - 1].push({ text: html.slice(i, end), color });
+            i = end;
+        }
+    }
+    // Merge adjacent tokens with the same color on each line (fewer drawText calls)
+    for (const line of lines) {
+        for (let j = line.length - 1; j > 0; j--) {
+            if (line[j].color === line[j - 1].color) {
+                line[j - 1].text += line[j].text;
+                line.splice(j, 1);
+            }
+        }
+    }
+    return lines;
+}
 // ─── Text measurement (shared by all text-bearing elements) ──────────────────
 /**
  * Measure text with automatic word hyphenation (Liang's algorithm via hypher).