pagyra-js 0.0.21 → 0.0.23

package/dist/src/layout/strategies/flex.js

@@ -3,183 +3,10 @@ import { AlignItems, Display, JustifyContent } from "../../css/enums.js";
 import { adjustForBoxSizing, containingBlock, resolveBoxMetrics, resolveWidthBlock } from "../utils/node-math.js";
 import { resolveLength, isAutoLength } from "../../css/length.js";
 import { GapCalculator, calculateTotalGap } from "../utils/gap-calculator.js";
-function blockifyFlexItemDisplay(display) {
-    switch (display) {
-        case Display.Inline:
-        case Display.InlineBlock:
-            return Display.Block;
-        case Display.InlineFlex:
-            return Display.Flex;
-        case Display.InlineGrid:
-            return Display.Grid;
-        case Display.InlineTable:
-            return Display.Table;
-        default:
-            return display;
-    }
-}
-function allowsPreferredShrink(originalDisplay, effectiveDisplay) {
-    switch (effectiveDisplay) {
-        case Display.Flex:
-        case Display.InlineFlex:
-        case Display.Grid:
-        case Display.InlineGrid:
-            return false;
-        default:
-            break;
-    }
-    if (effectiveDisplay === originalDisplay) {
-        return true;
-    }
-    return originalDisplay === Display.Inline;
-}
-function buildFlexLines(items, containerMainSize, mainAxisGap) {
-    if (items.length === 0) {
-        return [];
-    }
-    const lines = [];
-    let current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
-    for (const item of items) {
-        const addition = current.items.length === 0 ? item.mainContribution : mainAxisGap + item.mainContribution;
-        const shouldWrap = current.items.length > 0 &&
-            containerMainSize > 0 &&
-            current.mainSizeWithGaps + addition > containerMainSize + 0.01;
-        if (shouldWrap) {
-            lines.push(current);
-            current = { items: [], mainSizeWithGaps: 0, crossSize: 0 };
-        }
-        if (current.items.length > 0) {
-            current.mainSizeWithGaps += mainAxisGap;
-        }
-        current.items.push(item);
-        current.mainSizeWithGaps += item.mainContribution;
-        current.crossSize = Math.max(current.crossSize, item.crossContribution);
-    }
-    if (current.items.length > 0) {
-        lines.push(current);
-    }
-    return lines;
-}
-function calculateLinesCrossSize(lines, crossAxisGap) {
-    if (lines.length === 0) {
-        return 0;
-    }
-    const totalLines = lines.reduce((sum, line) => sum + line.crossSize, 0);
-    return totalLines + calculateTotalGap(crossAxisGap, lines.length);
-}
-function refreshFlexItemSizes(item, isRow) {
-    item.mainSize = isRow ? item.node.box.borderBoxWidth : item.node.box.borderBoxHeight;
-    item.crossSize = isRow ? item.node.box.borderBoxHeight : item.node.box.borderBoxWidth;
-    item.mainContribution = item.mainSize + item.mainMarginStart + item.mainMarginEnd;
-    item.crossContribution = item.crossSize + item.crossMarginStart + item.crossMarginEnd;
-}
-function recomputeLineMetrics(line, mainAxisGap) {
-    let mainSizeWithGaps = 0;
-    let crossSize = 0;
-    for (let i = 0; i < line.items.length; i++) {
-        const item = line.items[i];
-        if (i > 0) {
-            mainSizeWithGaps += mainAxisGap;
-        }
-        mainSizeWithGaps += item.mainContribution;
-        crossSize = Math.max(crossSize, item.crossContribution);
-    }
-    line.mainSizeWithGaps = mainSizeWithGaps;
-    line.crossSize = crossSize;
-}
-function relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow) {
-    if (!Number.isFinite(targetMainSize) || targetMainSize < 0) {
-        return;
-    }
-    const prevContainerWidth = container.box.contentWidth;
-    const prevContainerHeight = container.box.contentHeight;
-    const targetContribution = targetMainSize + item.mainMarginStart + item.mainMarginEnd;
-    let displayMutated = false;
-    if (item.node.style.display !== item.effectiveDisplay) {
-        item.node.style.display = item.effectiveDisplay;
-        displayMutated = true;
-    }
-    try {
-        if (isRow) {
-            container.box.contentWidth = Math.max(0, targetContribution);
-        }
-        else {
-            container.box.contentHeight = Math.max(0, targetContribution);
-        }
-        context.layoutChild(item.node);
-    }
-    finally {
-        container.box.contentWidth = prevContainerWidth;
-        container.box.contentHeight = prevContainerHeight;
-        if (displayMutated) {
-            item.node.style.display = item.originalDisplay;
-        }
-    }
-}
-function distributeFlexGrowAcrossLines(lines, container, context, containerMainSize, mainAxisGap, isRow) {
-    if (lines.length === 0 || !(containerMainSize > 0)) {
-        return;
-    }
-    for (const line of lines) {
-        const freeSpace = containerMainSize - line.mainSizeWithGaps;
-        if (!(freeSpace > 0)) {
-            continue;
-        }
-        const growItems = line.items.filter((item) => item.flexGrow > 0);
-        const totalGrow = growItems.reduce((sum, item) => sum + item.flexGrow, 0);
-        if (!(totalGrow > 0)) {
-            continue;
-        }
-        for (const item of growItems) {
-            const delta = (freeSpace * item.flexGrow) / totalGrow;
-            const targetMainSize = Math.max(0, item.mainSize + delta);
-            if (Math.abs(targetMainSize - item.mainSize) < 0.01) {
-                continue;
-            }
-            relayoutFlexItemForMainSize(container, item, context, targetMainSize, isRow);
-            refreshFlexItemSizes(item, isRow);
-        }
-        recomputeLineMetrics(line, mainAxisGap);
-    }
-}
-function resolveAlignContentLayout(lines, alignContent, containerCrossSize, crossAxisGap) {
-    const lineCrossSizes = lines.map((line) => line.crossSize);
-    if (lines.length === 0) {
-        return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
-    }
-    const naturalCross = calculateLinesCrossSize(lines, crossAxisGap);
-    const freeSpace = Math.max(0, containerCrossSize - naturalCross);
-    switch (alignContent) {
-        case "stretch":
-            if (freeSpace > 0) {
-                const extraPerLine = freeSpace / lines.length;
-                for (let i = 0; i < lineCrossSizes.length; i++) {
-                    lineCrossSizes[i] += extraPerLine;
-                }
-            }
-            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
-        case "flex-end":
-            return { lineCrossSizes, initialOffset: freeSpace, additionalGap: 0 };
-        case "center":
-            return { lineCrossSizes, initialOffset: freeSpace / 2, additionalGap: 0 };
-        case "space-between":
-            if (lines.length <= 1) {
-                return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
-            }
-            return { lineCrossSizes, initialOffset: 0, additionalGap: freeSpace / (lines.length - 1) };
-        case "space-around": {
-            const gap = freeSpace / lines.length;
-            return { lineCrossSizes, initialOffset: gap / 2, additionalGap: gap };
-        }
-        case "space-evenly": {
-            const gap = freeSpace / (lines.length + 1);
-            return { lineCrossSizes, initialOffset: gap, additionalGap: gap };
-        }
-        case "flex-start":
-        default:
-            return { lineCrossSizes, initialOffset: 0, additionalGap: 0 };
-    }
-}
+import { blockifyFlexItemDisplay, allowsPreferredShrink, isRowDirection, isAutoMainSize, computePreferredInlineWidth, offsetLayoutSubtree, resolveInitialDimension, resolveFlexSize } from "./flex/utils.js";
+import { buildFlexLines, calculateLinesCrossSize } from "./flex/line-builder.js";
+import { distributeFlexGrowAcrossLines } from "./flex/distributor.js";
+import { resolveAlignContentLayout, resolveJustifySpacing, computeCrossOffset, resolveItemAlignment } from "./flex/alignment.js";
 export class FlexLayoutStrategy {
     constructor() {
         this.supportedDisplays = new Set([Display.Flex, Display.InlineFlex]);
@@ -521,134 +348,3 @@ export class FlexLayoutStrategy {
         node.box.scrollHeight = node.box.contentHeight;
     }
 }
-function resolveInitialDimension(specified, fallback) {
-    if (specified !== undefined && Number.isFinite(specified)) {
-        return Math.max(specified, 0);
-    }
-    if (Number.isFinite(fallback)) {
-        return Math.max(fallback, 0);
-    }
-    return 0;
-}
-function resolveFlexSize(value, reference, containerWidth = reference, containerHeight = reference) {
-    if (value === undefined) {
-        return undefined;
-    }
-    if (typeof value === "number") {
-        return value;
-    }
-    if (value === "auto" || isAutoLength(value)) {
-        return undefined;
-    }
-    return resolveLength(value, reference, { auto: "reference", containerWidth, containerHeight });
-}
-function resolveItemAlignment(alignSelf, containerAlign) {
-    if (alignSelf && alignSelf !== "auto") {
-        return alignSelf;
-    }
-    return containerAlign;
-}
-function computeCrossOffset(alignment, containerSize, itemSize, marginStart, marginEnd) {
-    const total = itemSize + marginStart + marginEnd;
-    const reference = Number.isFinite(containerSize) ? containerSize : total;
-    const freeSpace = reference - total;
-    if (freeSpace <= 0) {
-        return 0;
-    }
-    switch (alignment) {
-        case AlignItems.Center:
-            return freeSpace / 2;
-        case AlignItems.FlexEnd:
-            return freeSpace;
-        default:
-            return 0;
-    }
-}
-function resolveJustifySpacing(justify, freeSpace, itemCount) {
-    if (itemCount <= 0) {
-        return { offset: 0, gap: 0 };
-    }
-    const clamped = Number.isFinite(freeSpace) ? Math.max(freeSpace, 0) : 0;
-    switch (justify) {
-        case JustifyContent.Center:
-            return { offset: clamped / 2, gap: 0 };
-        case JustifyContent.FlexEnd:
-        case JustifyContent.End:
-        case JustifyContent.Right:
-            return { offset: clamped, gap: 0 };
-        case JustifyContent.SpaceBetween:
-            if (itemCount === 1) {
-                return { offset: 0, gap: 0 };
-            }
-            return { offset: 0, gap: clamped / (itemCount - 1) };
-        case JustifyContent.SpaceAround: {
-            const gap = clamped / itemCount;
-            return { offset: gap / 2, gap };
-        }
-        case JustifyContent.SpaceEvenly: {
-            const gap = clamped / (itemCount + 1);
-            return { offset: gap, gap };
-        }
-        default:
-            return { offset: 0, gap: 0 };
-    }
-}
-function isRowDirection(direction) {
-    return direction === "row" || direction === "row-reverse";
-}
-function isAutoMainSize(value) {
-    if (value === undefined) {
-        return true;
-    }
-    if (typeof value === "number") {
-        return false;
-    }
-    if (value === "auto") {
-        return true;
-    }
-    return isAutoLength(value);
-}
-function computePreferredInlineWidth(node) {
-    let maxWidth = 0;
-    node.walk((desc) => {
-        if (desc.inlineRuns && desc.inlineRuns.length > 0) {
-            const localMax = desc.inlineRuns.reduce((max, run) => Math.max(max, run.lineWidth ?? run.width), 0);
-            if (localMax > maxWidth) {
-                maxWidth = localMax;
-            }
-            return;
-        }
-        if (!desc.lineBoxes || desc.lineBoxes.length === 0) {
-            return;
-        }
-        for (const line of desc.lineBoxes) {
-            if (!line) {
-                continue;
-            }
-            const width = typeof line.width === "number" ? line.width : 0;
-            if (width > maxWidth) {
-                maxWidth = width;
-            }
-        }
-    });
-    return maxWidth > 0 ? maxWidth : undefined;
-}
-function offsetLayoutSubtree(node, deltaX, deltaY) {
-    if (deltaX === 0 && deltaY === 0) {
-        return;
-    }
-    node.walk((desc) => {
-        if (desc !== node) {
-            desc.box.x += deltaX;
-            desc.box.y += deltaY;
-        }
-        desc.box.baseline += deltaY;
-        // Update inline runs if they exist
-        if (desc.inlineRuns && desc.inlineRuns.length > 0) {
-            for (const run of desc.inlineRuns) {
-                run.startX += deltaX;
-                run.baseline += deltaY;
-            }
-        }
-    });
-}

package/dist/src/layout/strategies/grid.js

@@ -161,7 +161,6 @@ export class GridLayoutStrategy {
         node.box.marginBoxWidth = node.box.borderBoxWidth + horizontalMargin(node, resolvedContentWidth, cb.height);
         const columnOffsets = calculateTrackOffsets(columnWidths, columnGap);
         const rows = [];
-        let currentRowTop = contentOriginY;
         let currentRowHeight = 0;
         let columnIndex = 0;
         let currentRowItems = [];
@@ -174,7 +173,6 @@ export class GridLayoutStrategy {
             if (columnIndex + span > columnWidths.length) {
                 if (currentRowItems.length > 0) {
                     rows.push({ items: currentRowItems, height: currentRowHeight });
-                    currentRowTop += currentRowHeight + rowGap;
                     currentRowHeight = 0;
                     currentRowItems = [];
                 }
@@ -203,7 +201,6 @@ export class GridLayoutStrategy {
             columnIndex += span;
             if (columnIndex >= columnWidths.length) {
                 rows.push({ items: currentRowItems, height: currentRowHeight });
-                currentRowTop += currentRowHeight + rowGap;
                 currentRowHeight = 0;
                 columnIndex = 0;
                 currentRowItems = [];

package/dist/src/layout/strategies/table.js

@@ -3,7 +3,6 @@ import { LayoutNode } from "../../dom/node.js";
 import { log } from "../../logging/debug.js";
 import { resolveLength } from "../../css/length.js";
 import { adjustForBoxSizing, containingBlock, horizontalNonContent, resolveWidthBlock, verticalNonContent } from "../utils/node-math.js";
-import { layoutTableCell } from "../table/cell_layout.js";
 import { auditTableCell, debugTableCell } from "../table/diagnostics.js";
 export class TableLayoutStrategy {
     constructor() {
@@ -42,22 +41,8 @@ export class TableLayoutStrategy {
                 if (!cell || !this.isOriginCell(cell, r, c))
                     continue;
                 const row = cell.parent;
-                // Set default border width and color for table cells if not set
-                const isTableCell = cell.tagName === 'td' || cell.tagName === 'th';
-                if (isTableCell) {
-                    if (cell.style.borderTop === undefined)
-                        cell.style.borderTop = collapsedBorders ? 0 : 1;
-                    if (cell.style.borderRight === undefined)
-                        cell.style.borderRight = collapsedBorders ? 0 : 1;
-                    if (cell.style.borderBottom === undefined)
-                        cell.style.borderBottom = collapsedBorders ? 0 : 1;
-                    if (cell.style.borderLeft === undefined)
-                        cell.style.borderLeft = collapsedBorders ? 0 : 1;
-                    if (cell.style.borderColor === undefined)
-                        cell.style.borderColor = '#000';
-                }
                 // Inherit from row/table if still not set
-                if (cell.style.borderTop === undefined) {
+                if (cell.style.borderTop === undefined || cell.style.borderTop === 0) {
                     if (row && row.style.borderTop !== undefined && row.style.borderTop !== 0) {
                         cell.style.borderTop = row.style.borderTop;
                     }
@@ -65,7 +50,7 @@ export class TableLayoutStrategy {
                         cell.style.borderTop = node.style.borderTop;
                     }
                 }
-                if (cell.style.borderRight === undefined) {
+                if (cell.style.borderRight === undefined || cell.style.borderRight === 0) {
                     if (row && row.style.borderRight !== undefined && row.style.borderRight !== 0) {
                         cell.style.borderRight = row.style.borderRight;
                     }
@@ -73,7 +58,7 @@ export class TableLayoutStrategy {
                         cell.style.borderRight = node.style.borderRight;
                     }
                 }
-                if (cell.style.borderBottom === undefined) {
+                if (cell.style.borderBottom === undefined || cell.style.borderBottom === 0) {
                     if (row && row.style.borderBottom !== undefined && row.style.borderBottom !== 0) {
                         cell.style.borderBottom = row.style.borderBottom;
                     }
@@ -81,7 +66,7 @@ export class TableLayoutStrategy {
                         cell.style.borderBottom = node.style.borderBottom;
                     }
                 }
-                if (cell.style.borderLeft === undefined) {
+                if (cell.style.borderLeft === undefined || cell.style.borderLeft === 0) {
                     if (row && row.style.borderLeft !== undefined && row.style.borderLeft !== 0) {
                         cell.style.borderLeft = row.style.borderLeft;
                     }
@@ -243,13 +228,20 @@ export class TableLayoutStrategy {
                 cell.box.y = 0;
                 cell.box.contentWidth = cellAvailableWidth;
                 debugTableCell(cell);
-                layoutTableCell(cell);
+                // Lay the cell out through the normal engine (BlockLayoutStrategy handles table-cell):
+                // this runs a real inline formatting context so mixed inline content (text + <b> + <a>)
+                // wraps and is positioned, and replaced content (<img>) gets sized by ImageLayoutStrategy.
+                // The cell resolves its content width from its containing block (the row), so temporarily
+                // set the row's content width to the cell's spanned column width while laying it out.
+                const row = cell.parent;
+                const savedRowWidth = row?.box.contentWidth;
+                if (row)
+                    row.box.contentWidth = spannedWidth;
+                context.layoutChild(cell);
+                if (row && savedRowWidth !== undefined)
+                    row.box.contentWidth = savedRowWidth;
                 if (cell.textContent?.includes("Row 3, Cell 3"))
                     auditTableCell(cell);
-                for (const child of cell.children) {
-                    child.box.x = (child.box.x ?? 0) + boxMetrics.paddingLeft;
-                    child.box.y = (child.box.y ?? 0) + boxMetrics.paddingTop;
-                }
                 if (cell.style.textAlign || cell.style.verticalAlign) {
                     for (const child of cell.children) {
                         if (cell.style.textAlign)
@@ -302,21 +294,31 @@ export class TableLayoutStrategy {
                     // The cell's border box starts at colOffsets[c], NOT at the content position
                     const borderBoxX = node.box.x + colOffsets[c];
                     const borderBoxY = node.box.y + rowOffsets[r];
-                    // Content position is inside border and padding
-                    const contentX = borderBoxX + boxMetrics.borderLeft + boxMetrics.paddingLeft;
-                    const contentY = borderBoxY + boxMetrics.borderTop + boxMetrics.paddingTop;
-                    // Calculate the offset from the cell's position during layout (which was 0,0)
-                    const deltaX = contentX - cell.box.x;
-                    const deltaY = contentY - cell.box.y;
+                    // The cell was laid out by BlockLayoutStrategy with its border-box origin at (0,0),
+                    // which already offsets its content by the cell's own border + padding. So the shift
+                    // applied to descendants is the border-box delta (NOT the content delta), otherwise
+                    // the cell's padding/border would be counted twice.
+                    const deltaX = borderBoxX - cell.box.x;
+                    const deltaY = borderBoxY - cell.box.y;
                     // Set cell position to border box position (not content position)
                     cell.box.x = borderBoxX;
                     cell.box.y = borderBoxY;
-                    // Apply the content offset to all of the cell's descendants, plus any vertical-align offset
+                    // Apply the border-box offset to all of the cell's descendants, plus any vertical-align
+                    // offset. Inline runs produced by the inline formatter carry their own baked-in
+                    // coordinates (startX/baseline), so they must be shifted too — otherwise wrapped cell
+                    // text stays at its (0,0) layout origin while images (positioned via box) move correctly.
+                    const shiftY = deltaY + alignOffsetY;
                     cell.walk((descendant) => {
                         descendant.box.x += deltaX;
-                        descendant.box.y += deltaY + alignOffsetY;
+                        descendant.box.y += shiftY;
                         if (descendant.box.baseline !== undefined) {
-                            descendant.box.baseline += deltaY + alignOffsetY;
+                            descendant.box.baseline += shiftY;
+                        }
+                        if (descendant.inlineRuns) {
+                            for (const run of descendant.inlineRuns) {
+                                run.startX += deltaX;
+                                run.baseline += shiftY;
+                            }
                         }
                     }, false);
                     // Set border box dimensions
@@ -434,55 +436,80 @@ export class TableLayoutStrategy {
         const numCols = grid[0]?.length || 0;
         if (numCols === 0)
             return [];
-        const minContentWidths = new Array(numCols).fill(0);
+        // Per-column min-content (longest unbreakable word) and max-content (preferred,
+        // whole text on one line) widths, following the CSS auto table layout model.
+        const minWidths = new Array(numCols).fill(0);
+        const maxWidths = new Array(numCols).fill(0);
         for (let r = 0; r < grid.length; r++) {
             for (let c = 0; c < numCols; c++) {
                 const cell = grid[r][c];
                 if (!cell || !this.isOriginCell(cell, r, c))
                     continue;
-                let maxIntrinsicWidth = 0;
-                if (cell.intrinsicInlineSize) {
-                    maxIntrinsicWidth = cell.intrinsicInlineSize;
-                }
+                let cellMinContent = cell.minIntrinsicInlineSize ?? cell.intrinsicInlineSize ?? 0;
+                let cellMaxContent = cell.intrinsicInlineSize ?? 0;
                 cell.walk((node) => {
-                    if (node.intrinsicInlineSize !== undefined) {
-                        maxIntrinsicWidth = Math.max(maxIntrinsicWidth, node.intrinsicInlineSize);
+                    const nodeMax = node.intrinsicInlineSize;
+                    if (nodeMax !== undefined) {
+                        cellMaxContent = Math.max(cellMaxContent, nodeMax);
+                        // Images and other replaced content do not record a min-content width;
+                        // they cannot wrap, so their max-content doubles as the min-content.
+                        const nodeMin = node.minIntrinsicInlineSize ?? nodeMax;
+                        cellMinContent = Math.max(cellMinContent, nodeMin);
                     }
                 });
                 const horizontalExtras = horizontalNonContent(cell, tableWidth);
-                const cellMinWidth = maxIntrinsicWidth + horizontalExtras;
+                const cellMin = cellMinContent + horizontalExtras;
+                const cellMax = cellMaxContent + horizontalExtras;
                 const colSpan = Math.min(this.cellColSpan(cell), numCols - c);
                 if (colSpan === 1) {
-                    minContentWidths[c] = Math.max(minContentWidths[c], cellMinWidth);
+                    minWidths[c] = Math.max(minWidths[c], cellMin);
+                    maxWidths[c] = Math.max(maxWidths[c], cellMax);
                 }
                 else {
-                    const share = cellMinWidth / colSpan;
+                    const minShare = cellMin / colSpan;
+                    const maxShare = cellMax / colSpan;
                     for (let offset = 0; offset < colSpan; offset++) {
-                        minContentWidths[c + offset] = Math.max(minContentWidths[c + offset], share);
+                        minWidths[c + offset] = Math.max(minWidths[c + offset], minShare);
+                        maxWidths[c + offset] = Math.max(maxWidths[c + offset], maxShare);
                     }
                 }
             }
         }
-        const totalMinWidth = minContentWidths.reduce((a, b) => a + b, 0);
-        if (totalMinWidth < tableWidth) {
-            const remainingWidth = tableWidth - totalMinWidth;
-            const weights = minContentWidths.map((w) => (w > 0 ? w : totalMinWidth > 0 ? 0 : 1));
+        const totalMin = minWidths.reduce((a, b) => a + b, 0);
+        const totalMax = maxWidths.reduce((a, b) => a + b, 0);
+        // Preferred widths fit: lay out at max-content and distribute any slack.
+        if (totalMax <= tableWidth) {
+            if (totalMax <= 0) {
+                return new Array(numCols).fill(tableWidth / numCols);
+            }
+            const remaining = tableWidth - totalMax;
+            const weights = maxWidths.map((w) => (w > 0 ? w : 0));
             const totalWeight = weights.reduce((a, b) => a + b, 0);
             if (totalWeight > 0) {
-                return minContentWidths.map((minWidth, i) => {
-                    return minWidth + remainingWidth * (weights[i] / totalWeight);
-                });
-            }
-            else {
-                return new Array(numCols).fill(tableWidth / numCols);
+                return maxWidths.map((w, i) => w + remaining * (weights[i] / totalWeight));
             }
+            return new Array(numCols).fill(tableWidth / numCols);
         }
-        else if (totalMinWidth > 0) {
-            return minContentWidths;
+        // Preferred widths overflow but min-content fits: start at min-content and grow each
+        // column toward its preferred width by a shared fraction of the leftover space. This lets
+        // wide text columns shrink and wrap while fixed/replaced columns keep their natural width.
+        if (totalMin <= tableWidth) {
+            const growthRoom = totalMax - totalMin;
+            const available = tableWidth - totalMin;
+            if (growthRoom <= 0) {
+                return minWidths;
+            }
+            const fraction = available / growthRoom;
+            return minWidths.map((min, i) => min + (maxWidths[i] - min) * fraction);
         }
-        else {
-            return new Array(numCols).fill(tableWidth / numCols);
+        // Even min-content overflows (e.g. an unbreakable URL wider than the page). Scale the columns
+        // down proportionally so the table still fits the page; the line-breaker's emergency break then
+        // wraps the over-long token inside its column instead of letting it run off the page.
+        if (totalMin > 0) {
+            const scale = tableWidth / totalMin;
+            return minWidths.map((w) => w * scale);
         }
+        return new Array(numCols).fill(tableWidth / numCols);
     }
     isOriginCell(cell, row, col) {
         const origin = cell.tableCellOrigin;

package/dist/src/layout/utils/text-metrics.js

@@ -47,11 +47,13 @@ export function assignIntrinsicTextMetrics(root, fontEmbedder) {
         const trimmed = node.textContent;
         if (trimmed.length === 0) {
             node.intrinsicInlineSize = 0;
+            node.minIntrinsicInlineSize = 0;
             node.intrinsicBlockSize = resolvedLineHeight(node.style);
             return;
         }
-        const { inlineSize, blockSize } = measureText(trimmed, node.style, fontEmbedder);
+        const { inlineSize, minInlineSize, blockSize } = measureText(trimmed, node.style, fontEmbedder);
         node.intrinsicInlineSize = inlineSize;
+        node.minIntrinsicInlineSize = minInlineSize;
         node.intrinsicBlockSize = blockSize;
     });
 }
@@ -59,21 +61,27 @@ function measureText(text, style, fontEmbedder) {
     const effectiveText = applyTextTransform(text, style.textTransform);
     const lines = effectiveText.split(/\r?\n/);
     let maxLineWidth = 0;
+    // min-content width = widest unbreakable word (longest run with no whitespace).
+    // Columns may shrink down to this without forcing a single word to overflow.
+    let maxWordWidth = 0;
     const fontWeight = typeof style.fontWeight === "number" ? style.fontWeight : 400;
     const fontStyle = style.fontStyle ?? "normal";
     const fontMetrics = fontEmbedder?.getMetrics(style.fontFamily ?? "", fontWeight, fontStyle);
+    const measureSegment = (segment) => {
+        const glyphWidth = measureTextWithGlyphs(segment, style, fontMetrics ?? null);
+        return glyphWidth !== null ? glyphWidth : estimateLineWidth(segment, style);
+    };
     for (const line of lines) {
-        const glyphWidth = measureTextWithGlyphs(line, style, fontMetrics ?? null);
-        if (glyphWidth !== null) {
-            maxLineWidth = Math.max(maxLineWidth, glyphWidth);
-        }
-        else {
-            maxLineWidth = Math.max(maxLineWidth, estimateLineWidth(line, style));
+        maxLineWidth = Math.max(maxLineWidth, measureSegment(line));
+        for (const word of line.split(/\s+/)) {
+            if (word.length === 0)
+                continue;
+            maxWordWidth = Math.max(maxWordWidth, measureSegment(word));
         }
     }
     const lineHeight = resolvedLineHeight(style);
     const blockSize = Math.max(lineHeight, lines.length * lineHeight);
-    return { inlineSize: maxLineWidth, blockSize };
+    return { inlineSize: maxLineWidth, minInlineSize: maxWordWidth, blockSize };
 }
 export function estimateLineWidth(line, style) {
     if (!line) {

package/dist/src/pdf/font/embedder.js

@@ -90,7 +90,7 @@ export class FontEmbedder {
         const fullFontData = new Uint8Array(face.data);
         const resourceName = `F${this.embeddedFonts.size + 1}`;
         let realizedRef;
-        const self = this;
+        const realizeFont = this.realizeFont.bind(this);
         const embedded = {
             resourceName,
             baseFont: face.name,
@@ -98,14 +98,14 @@ export class FontEmbedder {
             subset: fullFontData,
             get ref() {
                 if (!realizedRef) {
-                    realizedRef = self.realizeFont(face, metrics, resourceName);
+                    realizedRef = realizeFont(face, metrics);
                 }
                 return realizedRef;
             }
         };
         return embedded;
     }
-    realizeFont(face, metrics, resourceName) {
+    realizeFont(face, metrics) {
         const unitsPerEm = metrics.metrics.unitsPerEm;
         const scaleTo1000 = (v) => Math.round((v / unitsPerEm) * 1000);
         let fontBBox;