@jasy/pdf 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/elements/rectangle-element.d.ts

@@ -1,8 +1,10 @@
-import { Color } from "../common/color";
-import { BoxConstraints, Offset, Size } from "../layout/box-constraints";
-import { Fragmentable, FragmentResult } from "../layout/fragmentation";
-import { LayoutContext, PDFElement, SizedElement, SizedPDFElement, WithChildren } from "./pdf-element";
-/** Per-side border colours. When set, each present side is stroked individually (sharp
+import type { Radii } from "../ir/display-list.js";
+import type { GradientInput } from "../api/gradient.js";
+import { Color } from "../common/color.js";
+import { BoxConstraints, Offset, Size } from "../layout/box-constraints.js";
+import { Fragmentable, FragmentResult } from "../layout/fragmentation.js";
+import { LayoutContext, PDFElement, SizedElement, SizedPDFElement, WithChildren } from "./pdf-element.js";
+/** Per-side border colors. When set, each present side is stroked individually (sharp
  *  corners), instead of the uniform `color` border - this is what enables grid lines. */
 export interface SideBorders {
     top?: Color;
@@ -12,12 +14,38 @@ export interface SideBorders {
 }
 interface RectangleElementParams extends SizedElement, WithChildren {
     color?: Color;
-    backgroundColor?: Color;
+    /** Solid colour, or a box-relative gradient the renderer resolves against this box. */
+    backgroundColor?: Color | GradientInput;
     borderWidth?: number;
-    /** Corner radius in points; 0 = sharp corners (default). */
-    radius?: number;
+    /** Corner radius in points - one number for all four corners, or per corner. 0 = sharp (default). */
+    radius?: number | Radii;
     /** Individual side borders; overrides the uniform `color` border when present. */
     sideBorders?: SideBorders;
+    /** When true, this box is a positioning frame for `Positioned` descendants (CSS `relative`). */
+    relative?: boolean;
+    /** `"hidden"` crops children to the box (CSS `overflow: hidden`); `"visible"` (default) lets a
+     *  `Positioned` child spill over the edge. */
+    overflow?: "hidden" | "visible";
+    /** Width as a fraction (0..1) of the offered width, instead of a fixed `width` (CSS `50%`). Only
+     *  resolves in a bounded region; an explicit `width` wins over it. */
+    widthFactor?: number;
+    /** Height as a fraction (0..1) of the offered height; see `widthFactor`. */
+    heightFactor?: number;
+    /** Lower / upper bounds per axis, in points or as a fraction; see `SizingParams`. */
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    minWidthFactor?: number;
+    maxWidthFactor?: number;
+    minHeightFactor?: number;
+    maxHeightFactor?: number;
+    /** width / height; derives whichever axis is left open (CSS `aspect-ratio`). */
+    aspectRatio?: number;
+    /** Start this box on a fresh page (CSS `break-before: page`). */
+    breakBefore?: boolean;
+    /** Start everything after this box on a fresh page (CSS `break-after: page`). */
+    breakAfter?: boolean;
 }
 export declare class RectangleElement extends SizedPDFElement implements Fragmentable {
     private children;
@@ -26,8 +54,14 @@ export declare class RectangleElement extends SizedPDFElement implements Fragmen
     private borderWidth;
     private radius;
     private sideBorders?;
+    private relative;
+    private overflow;
+    private breakBefore;
+    private breakAfter;
     private sizeMemory;
-    constructor({ children, color, backgroundColor, borderWidth, width, height, radius, sideBorders, }: RectangleElementParams);
+    constructor({ children, color, backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, breakBefore, breakAfter, ...sizing }: RectangleElementParams);
+    breaksBefore(): boolean;
+    breaksAfter(): boolean;
     /**
      * Splits the bordered box across pages (box-decoration-break: clone - every fragment
      * gets its own full border). The children stack is packed into the space left after
@@ -37,7 +71,13 @@ export declare class RectangleElement extends SizedPDFElement implements Fragmen
      * box is sized by what it actually holds on each page.
      */
     fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
+    hasForcedBreak(): boolean;
     private cloneWithChildren;
+    relativeSizeFactor(horizontal: boolean): number | undefined;
+    /** A box has no flex children of its own, but it must not swallow the need of the stack inside it: a
+     *  `Spacer` in a box can only resolve if the box itself was given a bounded extent to pass down. With an
+     *  explicit size on an axis the box already knows its extent there and asks for nothing. */
+    needsBoundedMain(horizontal: boolean): boolean;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
     getProps(): {
         x: number;
@@ -46,10 +86,11 @@ export declare class RectangleElement extends SizedPDFElement implements Fragmen
         height: number | undefined;
         children: PDFElement[];
         color: Color;
-        backgroundColor: Color | undefined;
+        backgroundColor: Color | GradientInput | undefined;
         borderWidth: number;
-        radius: number;
+        radius: number | Radii;
         sideBorders: SideBorders | undefined;
+        overflow: "hidden" | "visible";
     };
 }
 export {};

package/dist/elements/rectangle-element.js

@@ -1,22 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RectangleElement = void 0;
-const color_1 = require("../common/color");
-const box_constraints_1 = require("../layout/box-constraints");
-const fragmentation_1 = require("../layout/fragmentation");
-const pdf_element_1 = require("./pdf-element");
-class RectangleElement extends pdf_element_1.SizedPDFElement {
-    constructor({ children = [], color = new color_1.Color(0, 0, 0), backgroundColor, borderWidth, width, height, radius, sideBorders, }) {
+import { Color } from "../common/color.js";
+import { BoxConstraints, extentSpecs, resolveSize, } from "../layout/box-constraints.js";
+import { childrenForceBreak, packChildren, } from "../layout/fragmentation.js";
+import { SizedPDFElement, } from "./pdf-element.js";
+export class RectangleElement extends SizedPDFElement {
+    constructor({ children = [], color = new Color(0, 0, 0), backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, breakBefore, breakAfter, ...sizing }) {
         super({ x: 0, y: 0, width, height });
         this.children = [];
         this.children = children;
         this.color = color;
         this.backgroundColor = backgroundColor;
         // `?? 1` (not `|| 1`) so an explicit `0` means "no border" instead of snapping to 1.
-        this.borderWidth = borderWidth !== null && borderWidth !== void 0 ? borderWidth : 1;
-        this.radius = radius !== null && radius !== void 0 ? radius : 0;
+        this.borderWidth = borderWidth ?? 1;
+        this.radius = radius ?? 0;
         this.sideBorders = sideBorders;
-        this.sizeMemory = { x: 0, y: 0, width, height };
+        this.relative = relative ?? false;
+        this.overflow = overflow ?? "visible";
+        this.breakBefore = breakBefore ?? false;
+        this.breakAfter = breakAfter ?? false;
+        this.sizeMemory = { ...sizing, x: 0, y: 0, width, height };
+    }
+    breaksBefore() {
+        return this.breakBefore;
+    }
+    breaksAfter() {
+        return this.breakAfter;
     }
     /**
      * Splits the bordered box across pages (box-decoration-break: clone - every fragment
@@ -27,28 +34,45 @@ class RectangleElement extends pdf_element_1.SizedPDFElement {
      * box is sized by what it actually holds on each page.
      */
     fragment(maxHeight, width, ctx) {
-        var _a;
-        const boxWidth = (_a = this.sizeMemory.width) !== null && _a !== void 0 ? _a : width;
+        // A percentage width resolves against the region width the page driver hands us, so a
+        // paginating %-box keeps its fraction on every page.
+        const boxWidth = this.sizeMemory.width ??
+            (this.sizeMemory.widthFactor !== undefined ? width * this.sizeMemory.widthFactor : width);
         const innerWidth = Math.max(0, boxWidth - 2 * this.borderWidth);
         // Border-box: the content is inset by the border on top and bottom, so a fragment
         // holding `c` of content is `c + 2*border` tall. (Derived, not a fudge factor.)
         const innerMaxHeight = maxHeight - 2 * this.borderWidth;
-        const { fitted, remainder } = (0, fragmentation_1.packChildren)(this.children, innerMaxHeight, innerWidth, ctx);
-        if (remainder.length === 0)
+        const { fitted, remainder, forceBreak } = packChildren(this.children, innerMaxHeight, innerWidth, ctx);
+        // Fits with no forced cut: return the whole box unchanged. A trailing forced break is the
+        // exception - fall through so the box is rebuilt from the packed children (without the consumed
+        // break marker), rather than handing back the original that still holds it.
+        if (remainder.length === 0 && !forceBreak)
             return { fitted: this, remainder: null };
         const contentHeight = (kids) => kids.reduce((sum, child) => sum +
-            child.calculateLayout(box_constraints_1.BoxConstraints.loose(innerWidth, Infinity), { x: 0, y: 0 }, ctx)
+            child.calculateLayout(BoxConstraints.loose(innerWidth, Infinity), { x: 0, y: 0 }, ctx)
                 .height, 0);
         return {
             fitted: this.cloneWithChildren(fitted, contentHeight(fitted) + 2 * this.borderWidth),
-            remainder: this.cloneWithChildren(remainder, contentHeight(remainder) + 2 * this.borderWidth),
+            // A trailing forced break leaves nothing to carry over: no remainder box, no extra page.
+            // Only the CONTINUATION carries `breakAfter` (a box that splits still breaks after its LAST
+            // fragment, not its first); `breakBefore` is dropped, already honoured before the split.
+            remainder: remainder.length === 0
+                ? null
+                : this.cloneWithChildren(remainder, contentHeight(remainder) + 2 * this.borderWidth, this.breakAfter),
+            forceBreak,
         };
     }
-    cloneWithChildren(children, height) {
+    hasForcedBreak() {
+        return childrenForceBreak(this.children);
+    }
+    cloneWithChildren(children, height, breakAfter = false) {
         return new RectangleElement({
             x: 0,
             y: 0,
             width: this.sizeMemory.width,
+            widthFactor: this.sizeMemory.widthFactor,
+            // A split box is sized by its per-page content (height passed in), so the height factor
+            // is intentionally dropped here - box-decoration-break, same as an explicit height.
             height,
             children,
             color: this.color,
@@ -56,50 +80,119 @@ class RectangleElement extends pdf_element_1.SizedPDFElement {
             borderWidth: this.borderWidth,
             radius: this.radius,
             sideBorders: this.sideBorders,
+            relative: this.relative,
+            overflow: this.overflow,
+            breakAfter,
         });
     }
+    relativeSizeFactor(horizontal) {
+        return horizontal ? this.sizeMemory.widthFactor : this.sizeMemory.heightFactor;
+    }
+    /** A box has no flex children of its own, but it must not swallow the need of the stack inside it: a
+     *  `Spacer` in a box can only resolve if the box itself was given a bounded extent to pass down. With an
+     *  explicit size on an axis the box already knows its extent there and asks for nothing. */
+    needsBoundedMain(horizontal) {
+        const requested = horizontal
+            ? [this.sizeMemory.width, this.sizeMemory.widthFactor]
+            : [this.sizeMemory.height, this.sizeMemory.heightFactor];
+        if (requested.some((v) => v !== undefined))
+            return false;
+        return this.children.some((c) => c.needsBoundedMain(horizontal));
+    }
     calculateLayout(constraints, offset, ctx) {
-        var _a, _b, _c;
+        // An explicit extent is a fixed point size or a fraction of the offered box (relative sizing);
+        // the fraction only resolves in a bounded region. `undefined` = fill / shrink-wrap below.
+        const specs = extentSpecs(this.sizeMemory);
+        const resolved = resolveSize(specs.width, specs.height, this.sizeMemory.aspectRatio, constraints);
+        const explicitWidth = resolved.width;
+        const explicitHeight = resolved.height;
+        // min/max come back as narrowed constraints, so the fill and shrink-wrap paths below obey them too.
+        const bounds = resolved.constraints;
         // Width: an explicit size wins (clamped), else fill the offered box. (Without this a
         // fixed box would balloon to the parent's size.)
+        // Whether there is a region to fill is decided by the constraints we were GIVEN: a `maxWidth` caps
+        // a box, it does not turn a shrink-wrapping one into a filling one (CSS `max-width` does not either).
         this.width =
-            this.sizeMemory.width !== undefined
-                ? constraints.constrainWidth(this.sizeMemory.width)
+            explicitWidth !== undefined
+                ? bounds.constrainWidth(explicitWidth)
                 : constraints.hasBoundedWidth
-                    ? constraints.maxWidth
+                    ? bounds.maxWidth
                     : this.width;
+        // Width shrink-wrap: no explicit width AND an unbounded region (e.g. a `Box` badge inside a
+        // `Positioned`). Resolved after the children are measured, just below.
+        const shrinkWrapWidth = explicitWidth === undefined && !constraints.hasBoundedWidth;
         // Height: explicit wins; otherwise FILL a bounded region (e.g. inside an Expanded) but
         // SHRINK-WRAP the content in an unbounded one (a note box in a stack). Shrink-wrap is
         // resolved after the children are measured, just below.
-        const shrinkWrapHeight = this.sizeMemory.height === undefined && !constraints.hasBoundedHeight;
+        const shrinkWrapHeight = explicitHeight === undefined && !constraints.hasBoundedHeight;
         this.height =
-            this.sizeMemory.height !== undefined
-                ? constraints.constrainHeight(this.sizeMemory.height)
+            explicitHeight !== undefined
+                ? bounds.constrainHeight(explicitHeight)
                 : constraints.hasBoundedHeight
-                    ? constraints.maxHeight
+                    ? bounds.maxHeight
                     : this.height;
         this.x = this.sizeMemory.x + offset.x;
         this.y = this.sizeMemory.y + offset.y;
-        // Lay out children stacked inside the border (inset by the border width). Width is
-        // finalized here; height is left unbounded so each child sizes to its own content.
-        const innerWidth = Math.max(0, ((_a = this.width) !== null && _a !== void 0 ? _a : 0) - 2 * this.borderWidth);
+        // A `relative` box is a positioning frame: thread a fresh frame to the subtree so any
+        // `Positioned` descendant registers against it (out of flow), then drain it below once the
+        // box is sized. A plain box leaves `ctx` untouched -> byte-identical.
+        const frame = this.relative
+            ? { origin: { x: 0, y: 0 }, size: { width: 0, height: 0 }, place: [] }
+            : undefined;
+        const childCtx = frame ? { ...ctx, frame } : ctx;
+        // Lay out children stacked inside the border (inset by the border width). Width is finalized here;
+        // height is left unbounded so each child sizes to its own content - EXCEPT for a child that cannot
+        // lay itself out without a bound (a stack holding an `Expanded`/`Spacer`). That one gets the height
+        // still free inside the box, so its flex child has real leftover space instead of an infinite one.
+        const innerWidth = shrinkWrapWidth
+            ? Infinity
+            : Math.max(0, (this.width ?? 0) - 2 * this.borderWidth);
+        const innerHeight = shrinkWrapHeight
+            ? Infinity
+            : Math.max(0, (this.height ?? 0) - 2 * this.borderWidth);
+        let contentWidth = 0;
         let contentHeight = 0;
         let yCursor = this.y + this.borderWidth;
         for (const child of this.children) {
-            const childSize = child.calculateLayout(box_constraints_1.BoxConstraints.loose(innerWidth, Infinity), { x: this.x + this.borderWidth, y: yCursor }, ctx);
+            const consumed = yCursor - (this.y + this.borderWidth);
+            // Same rule the flex helper applies: a child gets a finite main extent when it cannot lay itself
+            // out without one - a stack holding an `Expanded`/`Spacer`, or a child sized as a percentage of us.
+            const needsBound = child.needsBoundedMain(false) || child.relativeSizeFactor(false) !== undefined;
+            const childHeight = needsBound
+                ? Math.max(0, innerHeight - consumed) // Infinity - consumed stays Infinity, as it should
+                : Infinity;
+            const childSize = child.calculateLayout(BoxConstraints.loose(innerWidth, childHeight), { x: this.x + this.borderWidth, y: yCursor }, childCtx);
             yCursor += childSize.height;
             contentHeight += childSize.height;
+            contentWidth = Math.max(contentWidth, childSize.width);
         }
+        // No explicit width and no bounded region: shrink-wrap to the widest child.
+        // Clamped, so a min/max still applies to a box that sized itself to its content.
+        if (shrinkWrapWidth)
+            this.width = bounds.constrainWidth(contentWidth + 2 * this.borderWidth);
+        // A ratio on a shrink-wrapping box can only be applied HERE: before the children were measured
+        // there was no width to derive the height from.
+        const ratio = this.sizeMemory.aspectRatio;
+        const ratioSizesHeight = ratio !== undefined && ratio > 0 && shrinkWrapWidth && shrinkWrapHeight;
         // No explicit height and no bounded region: the border hugs its content.
-        if (shrinkWrapHeight)
-            this.height = contentHeight + 2 * this.borderWidth;
+        if (ratioSizesHeight)
+            this.height = bounds.constrainHeight((this.width ?? 0) / ratio);
+        else if (shrinkWrapHeight)
+            this.height = bounds.constrainHeight(contentHeight + 2 * this.borderWidth);
+        // The box is sized now: place any out-of-flow `Positioned` descendants against its box.
+        if (frame) {
+            frame.origin = { x: this.x, y: this.y };
+            frame.size = { width: this.width ?? 0, height: this.height ?? 0 };
+            for (const place of frame.place)
+                place(frame, ctx);
+        }
         // Border-box model: width/height ARE the outer box (the rect we draw); the content
         // is inset by the border on every side. Report the honest box size - no phantom
         // border added on (that asymmetric "+border" was the source of the magic-3 fudge in
         // fragment). Top-left coordinates; the Y-flip happens at the IR -> backend seam.
         return {
-            width: (_b = this.width) !== null && _b !== void 0 ? _b : 0,
-            height: (_c = this.height) !== null && _c !== void 0 ? _c : 0,
+            width: this.width ?? 0,
+            height: this.height ?? 0,
         };
     }
     getProps() {
@@ -114,7 +207,7 @@ class RectangleElement extends pdf_element_1.SizedPDFElement {
             borderWidth: this.borderWidth,
             radius: this.radius,
             sideBorders: this.sideBorders,
+            overflow: this.overflow,
         };
     }
 }
-exports.RectangleElement = RectangleElement;

package/dist/elements/row-element.d.ts

@@ -1,6 +1,6 @@
-import { BoxConstraints, Offset, Size } from "../layout/box-constraints";
-import { MainAlign, CrossAlign } from "../utils/flex-layout";
-import { LayoutContext, PDFElement, SizedPDFElement, WithChildren } from "./pdf-element";
+import { BoxConstraints, Offset, Size } from "../layout/box-constraints.js";
+import { MainAlign, CrossAlign } from "../utils/flex-layout.js";
+import { LayoutContext, PDFElement, SizedPDFElement, WithChildren } from "./pdf-element.js";
 interface RowElementParams extends WithChildren {
     /** Space inserted between children, in points. */
     gap?: number;
@@ -8,6 +8,32 @@ interface RowElementParams extends WithChildren {
     main?: MainAlign;
     /** Vertical alignment of each child (cross axis); defaults to `stretch`. */
     cross?: CrossAlign;
+    /** Lay the children out backwards along the main axis (CSS `row-reverse`). */
+    reverse?: boolean;
+    /** Let the children flow onto further lines when they do not fit (CSS `flex-wrap`). */
+    wrap?: boolean;
+    /** How the block of wrapped lines sits across the axis (CSS `align-content`). */
+    alignContent?: MainAlign;
+    /** Width/height as points (fixed) or a fraction (0..1) of the offered box (relative sizing). */
+    width?: number;
+    height?: number;
+    widthFactor?: number;
+    heightFactor?: number;
+    /** Lower / upper bounds per axis, in points or as a fraction; see `SizingParams`. */
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    minWidthFactor?: number;
+    maxWidthFactor?: number;
+    minHeightFactor?: number;
+    maxHeightFactor?: number;
+    /** width / height; derives whichever axis is left open (CSS `aspect-ratio`). */
+    aspectRatio?: number;
+    /** Start this row on a fresh page (CSS `break-before: page`). */
+    breakBefore?: boolean;
+    /** Start everything after this row on a fresh page (CSS `break-after: page`). */
+    breakAfter?: boolean;
 }
 /**
  * Horizontal stack: the mirror of `ContainerElement` (Column). Children are laid out
@@ -26,7 +52,19 @@ export declare class RowElement extends SizedPDFElement {
     private gap;
     private main;
     private cross;
-    constructor({ children, gap, main, cross }: RowElementParams);
+    private reverse;
+    private wrap;
+    private alignContent?;
+    private breakBefore;
+    private breakAfter;
+    private requested;
+    constructor({ children, gap, main, cross, reverse, wrap, alignContent, width, height, breakBefore, breakAfter, ...sizing }: RowElementParams);
+    breaksBefore(): boolean;
+    breaksAfter(): boolean;
+    relativeSizeFactor(horizontal: boolean): number | undefined;
+    /** The mirror of `ContainerElement`: a Row's OWN flex child needs a bounded width, and the need of any
+     *  descendant propagates on both axes (see the Column for the reasoning). */
+    needsBoundedMain(horizontal: boolean): boolean;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
     getProps(): {
         x: number;
@@ -37,6 +75,9 @@ export declare class RowElement extends SizedPDFElement {
         gap: number;
         main: MainAlign;
         cross: CrossAlign;
+        reverse: boolean;
+        wrap: boolean;
+        alignContent: MainAlign | undefined;
     };
 }
 export {};

package/dist/elements/row-element.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowElement = void 0;
-const flex_layout_1 = require("../utils/flex-layout");
-const pdf_element_1 = require("./pdf-element");
+import { extentSpecs, resolveSize, } from "../layout/box-constraints.js";
+import { FlexLayoutHelper, HORIZONTAL_AXIS } from "../utils/flex-layout.js";
+import { FlexiblePDFElement, SizedPDFElement, } from "./pdf-element.js";
 /**
  * Horizontal stack: the mirror of `ContainerElement` (Column). Children are laid out
  * left-to-right via the shared `FlexLayoutHelper` on the horizontal axis; fixed children
@@ -15,27 +13,75 @@ const pdf_element_1 = require("./pdf-element");
  * does not fit (handled by the parent's `packChildren`); synchronized cell splitting is a
  * Grid/Table concern.
  */
-class RowElement extends pdf_element_1.SizedPDFElement {
-    constructor({ children, gap, main, cross }) {
+export class RowElement extends SizedPDFElement {
+    constructor({ children, gap, main, cross, reverse, wrap, alignContent, width, height, breakBefore, breakAfter, ...sizing }) {
         super({ x: 0, y: 0 });
         this.children = children;
-        this.gap = gap !== null && gap !== void 0 ? gap : 0;
-        this.main = main !== null && main !== void 0 ? main : "start";
-        this.cross = cross !== null && cross !== void 0 ? cross : "stretch";
+        this.gap = gap ?? 0;
+        this.main = main ?? "start";
+        this.cross = cross ?? "stretch";
+        this.reverse = reverse ?? false;
+        this.wrap = wrap ?? false;
+        this.alignContent = alignContent;
+        this.requested = { ...sizing, width, height };
+        this.breakBefore = breakBefore ?? false;
+        this.breakAfter = breakAfter ?? false;
+    }
+    breaksBefore() {
+        return this.breakBefore;
+    }
+    breaksAfter() {
+        return this.breakAfter;
+    }
+    relativeSizeFactor(horizontal) {
+        return horizontal ? this.requested.widthFactor : this.requested.heightFactor;
+    }
+    /** The mirror of `ContainerElement`: a Row's OWN flex child needs a bounded width, and the need of any
+     *  descendant propagates on both axes (see the Column for the reasoning). */
+    needsBoundedMain(horizontal) {
+        const requested = horizontal
+            ? [this.requested.width, this.requested.widthFactor]
+            : [this.requested.height, this.requested.heightFactor];
+        if (requested.some((v) => v !== undefined))
+            return false;
+        const ownFlexChild = horizontal && this.children.some((c) => c instanceof FlexiblePDFElement);
+        return ownFlexChild || this.children.some((c) => c.needsBoundedMain(horizontal));
     }
     calculateLayout(constraints, offset, ctx) {
         this.x = offset.x;
         this.y = offset.y;
-        // Width fills the offered space (flex children split the leftover); height is the
-        // tallest child unless the parent bounds it.
-        const mainAvail = constraints.hasBoundedWidth ? constraints.maxWidth : Infinity;
-        const crossAvail = constraints.hasBoundedHeight ? constraints.maxHeight : Infinity;
+        // Relative sizing: a pinned extent (fixed or a fraction of the offered box, clamped) wins; else
+        // width fills the offered space (flex children split the leftover) and height is the tallest child.
+        const specs = extentSpecs(this.requested);
+        const resolved = resolveSize(specs.width, specs.height, this.requested.aspectRatio, constraints);
+        const { width: explicitWidth, height: explicitHeight, constraints: bounds } = resolved;
+        // Fill-or-shrink-wrap is decided by the constraints we were GIVEN; a min/max only caps the result.
+        const boundedWidth = explicitWidth !== undefined
+            ? bounds.constrainWidth(explicitWidth)
+            : constraints.hasBoundedWidth
+                ? bounds.maxWidth
+                : undefined;
+        const boundedHeight = explicitHeight !== undefined
+            ? bounds.constrainHeight(explicitHeight)
+            : constraints.hasBoundedHeight
+                ? bounds.maxHeight
+                : undefined;
+        // Horizontal stack: main = width (children fill it), cross = height (children can stretch to it).
+        const mainAvail = boundedWidth ?? Infinity;
+        const crossAvail = boundedHeight ?? Infinity;
         let result = { mainUsed: 0, crossUsed: 0 };
         if (this.children.length > 0) {
-            result = flex_layout_1.FlexLayoutHelper.layout(this.children, flex_layout_1.HORIZONTAL_AXIS, mainAvail, crossAvail, this.x, this.y, { gap: this.gap, main: this.main, cross: this.cross }, ctx);
+            result = FlexLayoutHelper.layout(this.children, HORIZONTAL_AXIS, mainAvail, crossAvail, this.x, this.y, {
+                gap: this.gap,
+                main: this.main,
+                cross: this.cross,
+                reverse: this.reverse,
+                wrap: this.wrap,
+                alignContent: this.alignContent,
+            }, ctx);
         }
-        this.width = constraints.hasBoundedWidth ? constraints.maxWidth : result.mainUsed;
-        this.height = constraints.hasBoundedHeight ? constraints.maxHeight : result.crossUsed;
+        this.width = boundedWidth ?? result.mainUsed;
+        this.height = boundedHeight ?? result.crossUsed;
         return { width: this.width, height: this.height };
     }
     getProps() {
@@ -48,7 +94,9 @@ class RowElement extends pdf_element_1.SizedPDFElement {
             gap: this.gap,
             main: this.main,
             cross: this.cross,
+            reverse: this.reverse,
+            wrap: this.wrap,
+            alignContent: this.alignContent,
         };
     }
 }
-exports.RowElement = RowElement;