pagyra-js 0.0.19 → 0.0.21

package/dist/src/layout/utils/content-measurer.js

@@ -28,7 +28,8 @@ export class ContentMeasurer {
      * @param contentStartX - The X coordinate where content area begins
      * @returns Object containing the measured width and any left offset
      */
-    measureInFlowWidth(node, referenceWidth, contentStartX) {
+    measureInFlowWidth(node, referenceWidth, contentStartX, containerHeight = referenceWidth) {
+        const containerRefs = { containerWidth: referenceWidth, containerHeight };
         let minStart = Number.POSITIVE_INFINITY;
         let maxEnd = Number.NEGATIVE_INFINITY;
         let hasContent = false;
@@ -41,14 +42,14 @@ export class ContentMeasurer {
             }
             const marginLeft = child.box.usedMarginLeft !== undefined
                 ? child.box.usedMarginLeft
-                : resolveLength(child.style.marginLeft, referenceWidth, { auto: "zero" });
+                : resolveLength(child.style.marginLeft, referenceWidth, { auto: "zero", ...containerRefs });
             const marginRight = child.box.usedMarginRight !== undefined
                 ? child.box.usedMarginRight
-                : resolveLength(child.style.marginRight, referenceWidth, { auto: "zero" });
-            const borderLeft = resolveLength(child.style.borderLeft, referenceWidth, { auto: "zero" });
-            const borderRight = resolveLength(child.style.borderRight, referenceWidth, { auto: "zero" });
-            const paddingLeft = resolveLength(child.style.paddingLeft, referenceWidth, { auto: "zero" });
-            const paddingRight = resolveLength(child.style.paddingRight, referenceWidth, { auto: "zero" });
+                : resolveLength(child.style.marginRight, referenceWidth, { auto: "zero", ...containerRefs });
+            const borderLeft = resolveLength(child.style.borderLeft, referenceWidth, { auto: "zero", ...containerRefs });
+            const borderRight = resolveLength(child.style.borderRight, referenceWidth, { auto: "zero", ...containerRefs });
+            const paddingLeft = resolveLength(child.style.paddingLeft, referenceWidth, { auto: "zero", ...containerRefs });
+            const paddingRight = resolveLength(child.style.paddingRight, referenceWidth, { auto: "zero", ...containerRefs });
             const borderBoxWidth = child.box.borderBoxWidth || Math.max(0, child.box.contentWidth + paddingLeft + paddingRight + borderLeft + borderRight);
             const marginBoxWidth = borderBoxWidth + marginLeft + marginRight;
             const marginStart = child.box.x - paddingLeft - borderLeft - marginLeft;

package/dist/src/layout/utils/floats.d.ts

@@ -7,6 +7,7 @@ interface FloatPlacementOptions {
     context: LayoutContext;
     contentX: number;
     contentWidth: number;
+    contentHeight?: number;
     startY: number;
 }
 export declare function clearForBlock(node: LayoutNode, floatContext: FloatContext, yCursor: number): number;

package/dist/src/layout/utils/floats.js

@@ -15,19 +15,21 @@ export function clearForBlock(node, floatContext, yCursor) {
 }
 export function placeFloat(options) {
     const { node, floatContext, context, contentX, contentWidth } = options;
+    const contentHeight = options.contentHeight ?? contentWidth;
+    const containerRefs = { containerWidth: contentWidth, containerHeight: contentHeight };
     context.layoutChild(node);
-    const marginLeft = resolveLength(node.style.marginLeft, contentWidth, { auto: "zero" });
-    const marginRight = resolveLength(node.style.marginRight, contentWidth, { auto: "zero" });
-    const marginTop = resolveLength(node.style.marginTop, contentWidth, { auto: "zero" });
-    const marginBottom = resolveLength(node.style.marginBottom, contentWidth, { auto: "zero" });
-    const borderLeft = resolveLength(node.style.borderLeft, contentWidth, { auto: "zero" });
-    const borderRight = resolveLength(node.style.borderRight, contentWidth, { auto: "zero" });
-    const borderTop = resolveLength(node.style.borderTop, contentWidth, { auto: "zero" });
-    const borderBottom = resolveLength(node.style.borderBottom, contentWidth, { auto: "zero" });
-    const paddingLeft = resolveLength(node.style.paddingLeft, contentWidth, { auto: "zero" });
-    const paddingRight = resolveLength(node.style.paddingRight, contentWidth, { auto: "zero" });
-    const paddingTop = resolveLength(node.style.paddingTop, contentWidth, { auto: "zero" });
-    const paddingBottom = resolveLength(node.style.paddingBottom, contentWidth, { auto: "zero" });
+    const marginLeft = resolveLength(node.style.marginLeft, contentWidth, { auto: "zero", ...containerRefs });
+    const marginRight = resolveLength(node.style.marginRight, contentWidth, { auto: "zero", ...containerRefs });
+    const marginTop = resolveLength(node.style.marginTop, contentHeight, { auto: "zero", ...containerRefs });
+    const marginBottom = resolveLength(node.style.marginBottom, contentHeight, { auto: "zero", ...containerRefs });
+    const borderLeft = resolveLength(node.style.borderLeft, contentWidth, { auto: "zero", ...containerRefs });
+    const borderRight = resolveLength(node.style.borderRight, contentWidth, { auto: "zero", ...containerRefs });
+    const borderTop = resolveLength(node.style.borderTop, contentHeight, { auto: "zero", ...containerRefs });
+    const borderBottom = resolveLength(node.style.borderBottom, contentHeight, { auto: "zero", ...containerRefs });
+    const paddingLeft = resolveLength(node.style.paddingLeft, contentWidth, { auto: "zero", ...containerRefs });
+    const paddingRight = resolveLength(node.style.paddingRight, contentWidth, { auto: "zero", ...containerRefs });
+    const paddingTop = resolveLength(node.style.paddingTop, contentHeight, { auto: "zero", ...containerRefs });
+    const paddingBottom = resolveLength(node.style.paddingBottom, contentHeight, { auto: "zero", ...containerRefs });
     const borderBoxWidth = node.box.contentWidth + paddingLeft + paddingRight + borderLeft + borderRight;
     const borderBoxHeight = node.box.contentHeight + paddingTop + paddingBottom + borderTop + borderBottom;
     node.box.borderBoxWidth = borderBoxWidth;

package/dist/src/layout/utils/margin.d.ts

@@ -3,7 +3,7 @@ export declare function collapseMarginSet(margins: readonly number[]): number;
 export declare function collapsedGapBetween(prevBottomMargin: number, nextTopMargin: number, parentEstablishesBfc: boolean): number;
 export declare function findFirstMarginCollapsibleChild(node: LayoutNode): LayoutNode | undefined;
 export declare function findLastMarginCollapsibleChild(node: LayoutNode): LayoutNode | undefined;
-export declare function canCollapseMarginStart(node: LayoutNode, containingBlockWidth: number): boolean;
-export declare function canCollapseMarginEnd(node: LayoutNode, containingBlockWidth: number): boolean;
-export declare function effectiveMarginTop(node: LayoutNode, containingBlockWidth: number): number;
-export declare function effectiveMarginBottom(node: LayoutNode, containingBlockWidth: number): number;
+export declare function canCollapseMarginStart(node: LayoutNode, containingBlockWidth: number, containingBlockHeight?: number): boolean;
+export declare function canCollapseMarginEnd(node: LayoutNode, containingBlockWidth: number, containingBlockHeight?: number): boolean;
+export declare function effectiveMarginTop(node: LayoutNode, containingBlockWidth: number, containingBlockHeight?: number): number;
+export declare function effectiveMarginBottom(node: LayoutNode, containingBlockWidth: number, containingBlockHeight?: number): number;

package/dist/src/layout/utils/margin.js

@@ -68,57 +68,61 @@ export function findLastMarginCollapsibleChild(node) {
     }
     return undefined;
 }
-export function canCollapseMarginStart(node, containingBlockWidth) {
+export function canCollapseMarginStart(node, containingBlockWidth, containingBlockHeight = containingBlockWidth) {
     if (!isBlockLevel(node) || establishesBFC(node)) {
         return false;
     }
-    const paddingTop = resolveLength(node.style.paddingTop, containingBlockWidth, { auto: "zero" });
-    const borderTop = resolveLength(node.style.borderTop, containingBlockWidth, { auto: "zero" });
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
+    const paddingTop = resolveLength(node.style.paddingTop, containingBlockHeight, { auto: "zero", ...containerRefs });
+    const borderTop = resolveLength(node.style.borderTop, containingBlockHeight, { auto: "zero", ...containerRefs });
     if (!isApproximatelyZero(paddingTop) || !isApproximatelyZero(borderTop)) {
         return false;
     }
     return findFirstMarginCollapsibleChild(node) !== undefined;
 }
-export function canCollapseMarginEnd(node, containingBlockWidth) {
+export function canCollapseMarginEnd(node, containingBlockWidth, containingBlockHeight = containingBlockWidth) {
     if (!isBlockLevel(node) || establishesBFC(node)) {
         return false;
     }
-    const paddingBottom = resolveLength(node.style.paddingBottom, containingBlockWidth, { auto: "zero" });
-    const borderBottom = resolveLength(node.style.borderBottom, containingBlockWidth, { auto: "zero" });
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
+    const paddingBottom = resolveLength(node.style.paddingBottom, containingBlockHeight, { auto: "zero", ...containerRefs });
+    const borderBottom = resolveLength(node.style.borderBottom, containingBlockHeight, { auto: "zero", ...containerRefs });
     if (!isApproximatelyZero(paddingBottom) || !isApproximatelyZero(borderBottom)) {
         return false;
     }
     return findLastMarginCollapsibleChild(node) !== undefined;
 }
-export function effectiveMarginTop(node, containingBlockWidth) {
-    const ownMargin = resolveLength(node.style.marginTop, containingBlockWidth, { auto: "zero" });
+export function effectiveMarginTop(node, containingBlockWidth, containingBlockHeight = containingBlockWidth) {
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
+    const ownMargin = resolveLength(node.style.marginTop, containingBlockHeight, { auto: "zero", ...containerRefs });
     if (!isBlockLevel(node)) {
         return ownMargin;
     }
-    if (!canCollapseMarginStart(node, containingBlockWidth)) {
+    if (!canCollapseMarginStart(node, containingBlockWidth, containingBlockHeight)) {
         return ownMargin;
     }
     const firstChild = findFirstMarginCollapsibleChild(node);
     if (!firstChild) {
         return ownMargin;
     }
-    const childContainingWidth = resolveWidthBlock(node, containingBlockWidth);
-    const childMargin = effectiveMarginTop(firstChild, childContainingWidth);
+    const childContainingWidth = resolveWidthBlock(node, containingBlockWidth, containingBlockHeight);
+    const childMargin = effectiveMarginTop(firstChild, childContainingWidth, containingBlockHeight);
     return collapseMarginSet([ownMargin, childMargin]);
 }
-export function effectiveMarginBottom(node, containingBlockWidth) {
-    const ownMargin = resolveLength(node.style.marginBottom, containingBlockWidth, { auto: "zero" });
+export function effectiveMarginBottom(node, containingBlockWidth, containingBlockHeight = containingBlockWidth) {
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
+    const ownMargin = resolveLength(node.style.marginBottom, containingBlockHeight, { auto: "zero", ...containerRefs });
     if (!isBlockLevel(node)) {
         return ownMargin;
     }
-    if (!canCollapseMarginEnd(node, containingBlockWidth)) {
+    if (!canCollapseMarginEnd(node, containingBlockWidth, containingBlockHeight)) {
         return ownMargin;
     }
     const lastChild = findLastMarginCollapsibleChild(node);
     if (!lastChild) {
         return ownMargin;
     }
-    const childContainingWidth = resolveWidthBlock(node, containingBlockWidth);
-    const childMargin = effectiveMarginBottom(lastChild, childContainingWidth);
+    const childContainingWidth = resolveWidthBlock(node, containingBlockWidth, containingBlockHeight);
+    const childMargin = effectiveMarginBottom(lastChild, childContainingWidth, containingBlockHeight);
     return collapseMarginSet([ownMargin, childMargin]);
 }

package/dist/src/layout/utils/node-math.d.ts

@@ -1,4 +1,5 @@
 import { LayoutNode } from "../../dom/node.js";
+import { BoxSizing } from "../../css/enums.js";
 import { type LengthLike } from "../../css/length.js";
 import type { ContainingBlock, Viewport } from "../../geometry/box.js";
 export interface BoxMetrics {
@@ -14,16 +15,21 @@ export interface BoxMetrics {
     contentBoxY: number;
 }
 export declare function resolveBoxMetrics(node: LayoutNode, widthRef: number, heightRef: number): BoxMetrics;
-export declare function horizontalNonContent(node: LayoutNode, reference: number): number;
-export declare function verticalNonContent(node: LayoutNode, reference: number): number;
-export declare function horizontalMargin(node: LayoutNode, reference: number): number;
-export declare function verticalMargin(node: LayoutNode, reference: number): number;
+export declare function adjustForBoxSizing(specifiedSize: number, boxSizing: BoxSizing, nonContentExtras: number): number;
+export declare function horizontalNonContent(node: LayoutNode, reference: number, containerHeight?: number): number;
+export declare function verticalNonContent(node: LayoutNode, reference: number, containerWidth?: number): number;
+export declare function horizontalMargin(node: LayoutNode, reference: number, containerHeight?: number): number;
+export declare function verticalMargin(node: LayoutNode, reference: number, containerWidth?: number): number;
 export declare function inFlow(node: LayoutNode): boolean;
 export declare function establishesBFC(node: LayoutNode): boolean;
 export declare function nearestPositionedAncestor(node: LayoutNode): LayoutNode | null;
 export declare function containingBlock(node: LayoutNode, viewport: Viewport): ContainingBlock;
-export declare function resolveWidthBlock(node: LayoutNode, containingBlockWidth: number): number;
-export declare function resolveBlockAutoMargins(containingBlockWidth: number, borderBoxWidth: number, marginLeft: LengthLike, marginRight: LengthLike): {
+export declare function resolveWidthBlock(node: LayoutNode, containingBlockWidth: number, containingBlockHeight?: number): number;
+export declare function resolveBlockAutoMargins(containingBlockWidth: number, borderBoxWidth: number, marginLeft: LengthLike, marginRight: LengthLike, containingBlockHeight?: number): {
     marginLeft: number;
     marginRight: number;
 };
+export declare function applyMinHeight(contentHeight: number, node: LayoutNode, heightRef: number, verticalExtras: number, containerRefs: {
+    containerWidth: number;
+    containerHeight: number;
+}): number;

package/dist/src/layout/utils/node-math.js

@@ -1,16 +1,17 @@
 import { LayoutNode } from "../../dom/node.js";
-import { Display, FloatMode, OverflowMode, Position } from "../../css/enums.js";
+import { BoxSizing, Display, FloatMode, OverflowMode, Position } from "../../css/enums.js";
 import { clampMinMax, resolveLength, isAutoLength } from "../../css/length.js";
 export function resolveBoxMetrics(node, widthRef, heightRef) {
     const { style } = node;
-    const paddingLeft = resolveLength(style.paddingLeft, widthRef, { auto: "zero" });
-    const paddingRight = resolveLength(style.paddingRight, widthRef, { auto: "zero" });
-    const paddingTop = resolveLength(style.paddingTop, heightRef, { auto: "zero" });
-    const paddingBottom = resolveLength(style.paddingBottom, heightRef, { auto: "zero" });
-    const borderLeft = resolveLength(style.borderLeft, widthRef, { auto: "zero" });
-    const borderRight = resolveLength(style.borderRight, widthRef, { auto: "zero" });
-    const borderTop = resolveLength(style.borderTop, heightRef, { auto: "zero" });
-    const borderBottom = resolveLength(style.borderBottom, heightRef, { auto: "zero" });
+    const containerRefs = { containerWidth: widthRef, containerHeight: heightRef };
+    const paddingLeft = resolveLength(style.paddingLeft, widthRef, { auto: "zero", ...containerRefs });
+    const paddingRight = resolveLength(style.paddingRight, widthRef, { auto: "zero", ...containerRefs });
+    const paddingTop = resolveLength(style.paddingTop, heightRef, { auto: "zero", ...containerRefs });
+    const paddingBottom = resolveLength(style.paddingBottom, heightRef, { auto: "zero", ...containerRefs });
+    const borderLeft = resolveLength(style.borderLeft, widthRef, { auto: "zero", ...containerRefs });
+    const borderRight = resolveLength(style.borderRight, widthRef, { auto: "zero", ...containerRefs });
+    const borderTop = resolveLength(style.borderTop, heightRef, { auto: "zero", ...containerRefs });
+    const borderBottom = resolveLength(style.borderBottom, heightRef, { auto: "zero", ...containerRefs });
     return {
         paddingLeft,
         paddingRight,
@@ -24,27 +25,39 @@ export function resolveBoxMetrics(node, widthRef, heightRef) {
         contentBoxY: node.box.y + borderTop + paddingTop,
     };
 }
-export function horizontalNonContent(node, reference) {
+export function adjustForBoxSizing(specifiedSize, boxSizing, nonContentExtras) {
+    if (boxSizing === BoxSizing.BorderBox) {
+        return Math.max(0, specifiedSize - nonContentExtras);
+    }
+    return specifiedSize;
+}
+export function horizontalNonContent(node, reference, containerHeight = reference) {
     const { style } = node;
-    return (resolveLength(style.paddingLeft, reference, { auto: "zero" }) +
-        resolveLength(style.paddingRight, reference, { auto: "zero" }) +
-        resolveLength(style.borderLeft, reference, { auto: "zero" }) +
-        resolveLength(style.borderRight, reference, { auto: "zero" }));
+    const containerRefs = { containerWidth: reference, containerHeight };
+    return (resolveLength(style.paddingLeft, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.paddingRight, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.borderLeft, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.borderRight, reference, { auto: "zero", ...containerRefs }));
 }
-export function verticalNonContent(node, reference) {
+export function verticalNonContent(node, reference, containerWidth = reference) {
     const { style } = node;
-    return (resolveLength(style.paddingTop, reference, { auto: "zero" }) +
-        resolveLength(style.paddingBottom, reference, { auto: "zero" }) +
-        resolveLength(style.borderTop, reference, { auto: "zero" }) +
-        resolveLength(style.borderBottom, reference, { auto: "zero" }));
+    const containerRefs = { containerWidth, containerHeight: reference };
+    return (resolveLength(style.paddingTop, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.paddingBottom, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.borderTop, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.borderBottom, reference, { auto: "zero", ...containerRefs }));
 }
-export function horizontalMargin(node, reference) {
+export function horizontalMargin(node, reference, containerHeight = reference) {
     const { style } = node;
-    return resolveLength(style.marginLeft, reference, { auto: "zero" }) + resolveLength(style.marginRight, reference, { auto: "zero" });
+    const containerRefs = { containerWidth: reference, containerHeight };
+    return (resolveLength(style.marginLeft, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.marginRight, reference, { auto: "zero", ...containerRefs }));
 }
-export function verticalMargin(node, reference) {
+export function verticalMargin(node, reference, containerWidth = reference) {
     const { style } = node;
-    return resolveLength(style.marginTop, reference, { auto: "zero" }) + resolveLength(style.marginBottom, reference, { auto: "zero" });
+    const containerRefs = { containerWidth, containerHeight: reference };
+    return (resolveLength(style.marginTop, reference, { auto: "zero", ...containerRefs }) +
+        resolveLength(style.marginBottom, reference, { auto: "zero", ...containerRefs }));
 }
 export function inFlow(node) {
     const { position, float: floatMode } = node.style;
@@ -109,17 +122,22 @@ export function containingBlock(node, viewport) {
     // This allows percentage heights like `height: 100%` on flex children
     // to resolve against a definite containing block height instead of 0.
     if (heightRef === 0 && parent.style.height !== "auto") {
-        const explicitHeight = resolveLength(parent.style.height, viewport.height, { auto: "reference" });
+        const explicitHeight = resolveLength(parent.style.height, viewport.height, {
+            auto: "reference",
+            containerWidth: viewport.width,
+            containerHeight: viewport.height,
+        });
         if (Number.isFinite(explicitHeight) && explicitHeight > 0) {
             heightRef = explicitHeight;
         }
     }
+    const containerRefs = { containerWidth: widthRef, containerHeight: heightRef };
     const xOffset = parent.box.x +
-        resolveLength(parent.style.paddingLeft, widthRef, { auto: "zero" }) +
-        resolveLength(parent.style.borderLeft, widthRef, { auto: "zero" });
+        resolveLength(parent.style.paddingLeft, widthRef, { auto: "zero", ...containerRefs }) +
+        resolveLength(parent.style.borderLeft, widthRef, { auto: "zero", ...containerRefs });
     const yOffset = parent.box.y +
-        resolveLength(parent.style.paddingTop, heightRef, { auto: "zero" }) +
-        resolveLength(parent.style.borderTop, heightRef, { auto: "zero" });
+        resolveLength(parent.style.paddingTop, heightRef, { auto: "zero", ...containerRefs }) +
+        resolveLength(parent.style.borderTop, heightRef, { auto: "zero", ...containerRefs });
     return {
         x: xOffset,
         y: yOffset,
@@ -127,29 +145,34 @@ export function containingBlock(node, viewport) {
         height: heightRef,
     };
 }
-export function resolveWidthBlock(node, containingBlockWidth) {
+export function resolveWidthBlock(node, containingBlockWidth, containingBlockHeight = containingBlockWidth) {
     const style = node.style;
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
+    const hNonContent = horizontalNonContent(node, containingBlockWidth, containingBlockHeight);
     const marginLeft = isAutoLength(style.marginLeft)
         ? 0
-        : resolveLength(style.marginLeft, containingBlockWidth, { auto: "zero" });
+        : resolveLength(style.marginLeft, containingBlockWidth, { auto: "zero", ...containerRefs });
     const marginRight = isAutoLength(style.marginRight)
         ? 0
-        : resolveLength(style.marginRight, containingBlockWidth, { auto: "zero" });
-    const available = Math.max(0, containingBlockWidth - horizontalNonContent(node, containingBlockWidth) - marginLeft - marginRight);
-    const width = style.width === "auto"
+        : resolveLength(style.marginRight, containingBlockWidth, { auto: "zero", ...containerRefs });
+    const available = Math.max(0, containingBlockWidth - hNonContent - marginLeft - marginRight);
+    const width = style.width === undefined || isAutoLength(style.width)
         ? available
-        : resolveLength(style.width, containingBlockWidth, {
-            auto: "reference",
-        });
-    const minWidth = style.minWidth ? resolveLength(style.minWidth, containingBlockWidth, { auto: "zero" }) : Number.NEGATIVE_INFINITY;
-    const maxWidth = style.maxWidth ? resolveLength(style.maxWidth, containingBlockWidth, { auto: "reference" }) : Number.POSITIVE_INFINITY;
+        : adjustForBoxSizing(resolveLength(style.width, containingBlockWidth, { auto: "reference", ...containerRefs }), style.boxSizing, hNonContent);
+    const minWidth = style.minWidth
+        ? adjustForBoxSizing(resolveLength(style.minWidth, containingBlockWidth, { auto: "zero", ...containerRefs }), style.boxSizing, hNonContent)
+        : Number.NEGATIVE_INFINITY;
+    const maxWidth = style.maxWidth
+        ? adjustForBoxSizing(resolveLength(style.maxWidth, containingBlockWidth, { auto: "reference", ...containerRefs }), style.boxSizing, hNonContent)
+        : Number.POSITIVE_INFINITY;
     return clampMinMax(width, minWidth, maxWidth);
 }
-export function resolveBlockAutoMargins(containingBlockWidth, borderBoxWidth, marginLeft, marginRight) {
+export function resolveBlockAutoMargins(containingBlockWidth, borderBoxWidth, marginLeft, marginRight, containingBlockHeight = containingBlockWidth) {
+    const containerRefs = { containerWidth: containingBlockWidth, containerHeight: containingBlockHeight };
     const marginLeftAuto = isAutoLength(marginLeft);
     const marginRightAuto = isAutoLength(marginRight);
-    const resolvedMarginLeft = marginLeftAuto ? 0 : resolveLength(marginLeft, containingBlockWidth, { auto: "zero" });
-    const resolvedMarginRight = marginRightAuto ? 0 : resolveLength(marginRight, containingBlockWidth, { auto: "zero" });
+    const resolvedMarginLeft = marginLeftAuto ? 0 : resolveLength(marginLeft, containingBlockWidth, { auto: "zero", ...containerRefs });
+    const resolvedMarginRight = marginRightAuto ? 0 : resolveLength(marginRight, containingBlockWidth, { auto: "zero", ...containerRefs });
     let usedMarginLeft = resolvedMarginLeft;
     let usedMarginRight = resolvedMarginRight;
     const remainingSpace = containingBlockWidth - (borderBoxWidth + resolvedMarginLeft + resolvedMarginRight);
@@ -188,3 +211,10 @@ export function resolveBlockAutoMargins(containingBlockWidth, borderBoxWidth, ma
     }
     return { marginLeft: usedMarginLeft, marginRight: usedMarginRight };
 }
+export function applyMinHeight(contentHeight, node, heightRef, verticalExtras, containerRefs) {
+    if (node.style.minHeight === undefined || isAutoLength(node.style.minHeight)) {
+        return contentHeight;
+    }
+    const minH = adjustForBoxSizing(resolveLength(node.style.minHeight, heightRef, { auto: "zero", ...containerRefs }), node.style.boxSizing, verticalExtras);
+    return Number.isFinite(minH) ? Math.max(contentHeight, minH) : contentHeight;
+}

package/dist/src/layout/utils/sizing.js

@@ -1,11 +1,12 @@
 import { LayoutNode } from "../../dom/node.js";
 import { resolveLength } from "../../css/length.js";
 export function shrinkToFitWidth(node, availableWidth) {
+    const containerRefs = { containerWidth: availableWidth, containerHeight: availableWidth };
     if (typeof node.style.width === "number") {
         return Math.min(node.style.width, availableWidth);
     }
     if (node.style.width !== "auto") {
-        return Math.min(resolveLength(node.style.width, availableWidth), availableWidth);
+        return Math.min(resolveLength(node.style.width, availableWidth, { ...containerRefs }), availableWidth);
     }
     return availableWidth;
 }

package/dist/src/pdf/font-subset/font-registry.d.ts

@@ -17,12 +17,18 @@ export declare class PdfFontRegistry {
     private readonly glyphUsage;
     private readonly fonts;
     private fontCounter;
+    private identityCounter;
+    private readonly programIdentity;
+    private readonly cmapIdentity;
     constructor(encoding?: "identity" | "sequential");
     /**
      * Generates a stable key for a UnifiedFont.
      * Uses CSS metadata if available, otherwise falls back to a generic key.
      */
     private fontKey;
+    private resolveProgramToken;
+    private resolveCmapToken;
+    private identityFor;
     /**
      * Registers a GlyphRun, collecting its glyph IDs for later subsetting.
      */

package/dist/src/pdf/font-subset/font-registry.js

@@ -12,19 +12,47 @@ export class PdfFontRegistry {
         this.fonts = new Map();
         // Counter for generating unique font resource names
         this.fontCounter = 0;
+        this.identityCounter = 0;
+        this.programIdentity = new WeakMap();
+        this.cmapIdentity = new WeakMap();
     }
     /**
      * Generates a stable key for a UnifiedFont.
      * Uses CSS metadata if available, otherwise falls back to a generic key.
      */
     fontKey(font) {
+        const programToken = this.resolveProgramToken(font);
+        const cmapToken = this.resolveCmapToken(font);
         if (font.css) {
             const { family, weight, style } = font.css;
-            return `${family}|${weight}|${style}`;
+            return `${family}|${weight}|${style}|p:${programToken}|c:${cmapToken}`;
         }
         // Fallback: use unitsPerEm and ascender as a fingerprint
         const { unitsPerEm, ascender } = font.metrics.metrics;
-        return `_fallback_${unitsPerEm}_${ascender}`;
+        return `_fallback_${unitsPerEm}_${ascender}|p:${programToken}|c:${cmapToken}`;
+    }
+    resolveProgramToken(font) {
+        const rawAccessor = font.program.getRawTableData;
+        if (rawAccessor) {
+            return `raw-${this.identityFor(this.programIdentity, rawAccessor)}`;
+        }
+        return `shape-${font.program.sourceFormat}-${font.program.unitsPerEm}-${font.program.glyphCount}`;
+    }
+    resolveCmapToken(font) {
+        const cmap = font.metrics.cmap;
+        if (cmap) {
+            return `map-${this.identityFor(this.cmapIdentity, cmap)}`;
+        }
+        return `none-${font.program.unitsPerEm}-${font.program.glyphCount}`;
+    }
+    identityFor(store, key) {
+        const existing = store.get(key);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const next = ++this.identityCounter;
+        store.set(key, next);
+        return next;
     }
     /**
      * Registers a GlyphRun, collecting its glyph IDs for later subsetting.

package/dist/src/pdf/header-footer-painter.d.ts

@@ -19,6 +19,8 @@ export interface HeaderFooterPaintContext {
     fontRegistry: FontRegistry;
     /** Page offset Y for coordinate transformation */
     pageOffsetY: number;
+    /** Whether header/footer paint should be clipped to max height area */
+    clipOverflow?: boolean;
     /** Optional CSS for header/footer styling */
     css?: string;
     /** Platform environment (Node/browser) */

package/dist/src/pdf/header-footer-painter.js

@@ -28,7 +28,7 @@ export async function paintHeaderFooter(painter, header, footer, tokens, pageInd
  * Renders headers and footers as full HTML through the layout pipeline.
  */
 async function paintHeaderFooterWithContext(painter, header, footer, tokens, pageIndex, totalPages, context) {
-    const { margins, pageWidthPx, pageHeightPx, fontRegistry, pageOffsetY, css, resourceBaseDir, assetRootDir } = context;
+    const { margins, pageWidthPx, pageHeightPx, fontRegistry, pageOffsetY, clipOverflow = false, css, resourceBaseDir, assetRootDir } = context;
     // Calculate content width (page width minus left and right margins)
     const contentWidthPx = pageWidthPx - margins.left - margins.right;
     log("layout", "debug", "paintHeaderFooterWithContext", {
@@ -58,8 +58,26 @@ async function paintHeaderFooterWithContext(painter, header, footer, tokens, pag
                 });
                 if (rendered) {
                     log("layout", "debug", "Header rendered successfully", { heightPx: rendered.heightPx });
-                    // Header is positioned at the top margin area
-                    await paintRenderedHeaderFooter(painter, rendered, margins.left, margins.top, fontRegistry, pageOffsetY);
+                    const headerY = margins.top;
+                    const shouldClip = clipOverflow && header.maxHeightPx > 0 && contentWidthPx > 0;
+                    if (shouldClip) {
+                        const clipPath = buildRectClipPath({
+                            x: margins.left,
+                            y: headerY + pageOffsetY,
+                            width: contentWidthPx,
+                            height: header.maxHeightPx,
+                        });
+                        painter.beginClipPath(clipPath);
+                    }
+                    try {
+                        // Header is positioned at the top margin area
+                        await paintRenderedHeaderFooter(painter, rendered, margins.left, headerY, fontRegistry, pageOffsetY);
+                    }
+                    finally {
+                        if (shouldClip) {
+                            painter.endClipPath();
+                        }
+                    }
                 }
             }
             catch (err) {
@@ -87,7 +105,24 @@ async function paintHeaderFooterWithContext(painter, header, footer, tokens, pag
                 if (rendered) {
                     // Footer is positioned at the bottom of the page
                     const footerY = pageHeightPx - margins.bottom - footer.maxHeightPx;
-                    await paintRenderedHeaderFooter(painter, rendered, margins.left, footerY, fontRegistry, pageOffsetY);
+                    const shouldClip = clipOverflow && footer.maxHeightPx > 0 && contentWidthPx > 0;
+                    if (shouldClip) {
+                        const clipPath = buildRectClipPath({
+                            x: margins.left,
+                            y: footerY + pageOffsetY,
+                            width: contentWidthPx,
+                            height: footer.maxHeightPx,
+                        });
+                        painter.beginClipPath(clipPath);
+                    }
+                    try {
+                        await paintRenderedHeaderFooter(painter, rendered, margins.left, footerY, fontRegistry, pageOffsetY);
+                    }
+                    finally {
+                        if (shouldClip) {
+                            painter.endClipPath();
+                        }
+                    }
                 }
             }
             catch (err) {
@@ -125,3 +160,16 @@ function stringify(content) {
     }
     return JSON.stringify(content);
 }
+function buildRectClipPath(rect) {
+    const x = rect.x;
+    const y = rect.y;
+    const right = rect.x + rect.width;
+    const bottom = rect.y + rect.height;
+    return [
+        { type: "moveTo", x, y },
+        { type: "lineTo", x: right, y },
+        { type: "lineTo", x: right, y: bottom },
+        { type: "lineTo", x, y: bottom },
+        { type: "closePath" },
+    ];
+}

package/dist/src/pdf/header-footer-renderer.js

@@ -27,6 +27,7 @@ import { FontRegistryResolver } from "../fonts/font-registry-resolver.js";
 import { computeGlyphRun, applyWordSpacingToGlyphRun } from "./utils/node-text-run-factory.js";
 import { paintBoxAtomic } from "./renderer/box-painter.js";
 import { applyPlaceholders } from "./header-footer-tokens.js";
+import { createCounterContext } from "../layout/counter.js";
 /**
  * Renders header or footer HTML into a layout tree.
  * This uses the same pipeline as the main content for full HTML/CSS support.
@@ -59,7 +60,17 @@ export async function renderHeaderFooterHtml(options) {
         rootStyle.display = Display.Block;
     }
     const rootLayout = new LayoutNode(rootStyle, [], { tagName: rootElement?.tagName?.toLowerCase() });
-    const conversionContext = { resourceBaseDir: resolvedResourceBase, assetRootDir: resolvedAssetRoot, units, rootFontSize, environment };
+    const counterContext = createCounterContext();
+    const rootCounterScopeId = counterContext.registerScope(null);
+    const conversionContext = {
+        resourceBaseDir: resolvedResourceBase,
+        assetRootDir: resolvedAssetRoot,
+        units,
+        rootFontSize,
+        environment,
+        counterContext,
+        rootCounterScopeId,
+    };
     if (rootElement) {
         for (const child of Array.from(rootElement.childNodes)) {
             if (child.nodeType === child.ELEMENT_NODE) {

package/dist/src/pdf/layout-tree-builder.js

@@ -137,7 +137,9 @@ function convertNode(node, state, inheritedTextGradient) {
     const background = resolveBackgroundLayers(node, { borderBox, paddingBox, contentBox });
     const clipPath = resolveClipPath(node, { borderBox, paddingBox, contentBox });
     const zIndex = typeof node.style.zIndex === "number" ? node.style.zIndex : 0;
-    const establishesStackingContext = typeof node.style.zIndex === "number" && node.style.position !== Position.Static;
+    const establishesStackingContext = typeof node.style.zIndex === "number" && node.style.position !== Position.Static ||
+        (node.style.filter !== undefined && node.style.filter.length > 0) ||
+        (node.style.backdropFilter !== undefined && node.style.backdropFilter.length > 0);
     const borderStyle = {
         top: normalizeBorderStyle(node.style.borderStyleTop),
         right: normalizeBorderStyle(node.style.borderStyleRight),
@@ -202,6 +204,8 @@ function convertNode(node, state, inheritedTextGradient) {
         customData,
         textAlign,
         transform,
+        filter: node.style.filter ? [...node.style.filter] : undefined,
+        backdropFilter: node.style.backdropFilter ? [...node.style.backdropFilter] : undefined,
     };
 }
 function normalizeBorderStyle(value) {

package/dist/src/pdf/page-painter.js

@@ -76,9 +76,20 @@ export class PagePainter {
     }
     async drawText(text, xPx, yPx, options = { fontSizePt: 10 }) {
         await this.textRenderer.drawText(text, xPx, yPx, options);
+        const cmds = this.textRenderer.flushCommands();
+        if (cmds.length > 0) {
+            this.shapeRenderer.pushRawCommands(cmds);
+        }
     }
     async drawTextRun(run) {
         await this.textRenderer.drawTextRun(run);
+        // Immediately move text commands into the shape stream so that
+        // text and background operations are interleaved in paint order,
+        // preserving correct z-index stacking.
+        const cmds = this.textRenderer.flushCommands();
+        if (cmds.length > 0) {
+            this.shapeRenderer.pushRawCommands(cmds);
+        }
     }
     fillRoundedRect(rect, radii, paint) {
         this.shapeRenderer.fillRoundedRect(rect, radii, paint);
@@ -153,9 +164,11 @@ export class PagePainter {
     }
     beginTransformScope(transform, rect) {
         this.transformScopeManager.beginTransformScope(transform, rect);
+        this.textRenderer.setTransformContext(rect);
     }
     endTransformScope() {
         this.transformScopeManager.endTransformScope();
+        this.textRenderer.clearTransformContext();
     }
     result() {
         // Ensure any atlas pages created by the glyph packer are registered as image resources