@jasy/pdf 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/elements/rectangle-element.js

@@ -1,8 +1,11 @@
+import { widthRules } from "../layout/box-constraints.js";
 import { Color } from "../common/color.js";
 import { BoxConstraints, extentSpecs, resolveSize, } from "../layout/box-constraints.js";
 import { stackMinIntrinsic, withDeclaredExtent } from "../layout/min-intrinsic.js";
-import { childrenForceBreak, packChildren, } from "../layout/fragmentation.js";
-import { SizedPDFElement, } from "./pdf-element.js";
+import { positionedIn } from "./layout/positioned-element.js";
+import { PaddingElement } from "./layout/padding-element.js";
+import { childrenForceBreak, insetContext, packChildren, packedUnchanged, } from "../layout/fragmentation.js";
+import { SizedPDFElement, withPaddingBase, } 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 });
@@ -20,8 +23,10 @@ export class RectangleElement extends SizedPDFElement {
         this.breakAfter = breakAfter ?? false;
         this.sizeMemory = { ...sizing, x: 0, y: 0, width, height };
     }
+    // A break before the FIRST child is a break before this stack (CSS propagates it): the whole stack
+    // moves to the next page, instead of leaving an empty piece - or an empty border - behind.
     breaksBefore() {
-        return this.breakBefore;
+        return this.breakBefore || (this.children[0]?.breaksBefore() ?? false);
     }
     breaksAfter() {
         return this.breakAfter;
@@ -35,31 +40,39 @@ export class RectangleElement extends SizedPDFElement {
      * box is sized by what it actually holds on each page.
      */
     fragment(maxHeight, width, ctx) {
-        // 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);
+        // The box's own width rules (fixed, %, min/max) resolved against the region - the same sizing
+        // path as `measure`, so the content is packed at the width it will be drawn at.
+        const boxWidth = this.measure(BoxConstraints.loose(width, Infinity), ctx).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, forceBreak } = packChildren(this.children, innerMaxHeight, innerWidth, ctx);
+        const { fitted, remainder, forceBreak } = packChildren(this.children, innerMaxHeight, innerWidth, insetContext(this.paddingContext(ctx, width), 2 * this.borderWidth));
         // 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(BoxConstraints.loose(innerWidth, Infinity), { x: 0, y: 0 }, ctx)
-                .height, 0);
+        if (remainder.length === 0 && !forceBreak && packedUnchanged(this.children, fitted)) {
+            // The content fits, but a fixed height may not - such a box cannot shrink, so it moves on whole.
+            const own = this.measure(BoxConstraints.loose(width, Infinity), ctx).height;
+            return own <= maxHeight
+                ? { fitted: this, remainder: null }
+                : { fitted: null, remainder: this };
+        }
+        // Nothing fit below the content above: move on whole, not as an empty bordered box.
+        if (fitted.length === 0 && !forceBreak)
+            return { fitted: null, remainder: this };
+        const childCtx = this.paddingContext(ctx, width);
+        const contentHeight = (kids) => kids.reduce((sum, child) => sum + child.measure(BoxConstraints.loose(innerWidth, Infinity), childCtx).height, 0);
         return {
             fitted: this.cloneWithChildren(fitted, contentHeight(fitted) + 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.
+            // fragment, not its first); `breakBefore` is dropped, already honored before the split.
+            // It gets no height, as a Column's piece does: it is sized where it lands, which may be a
+            // narrower or wider region (a Flow's), or one that gives a region-sized rest its height.
             remainder: remainder.length === 0
                 ? null
-                : this.cloneWithChildren(remainder, contentHeight(remainder) + 2 * this.borderWidth, this.breakAfter),
+                : this.cloneWithChildren(remainder, undefined, this.breakAfter),
             forceBreak,
         };
     }
@@ -70,10 +83,9 @@ export class RectangleElement extends SizedPDFElement {
         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.
+            ...widthRules(this.sizeMemory),
+            // A split box is sized by its per-page content (height passed in), so the height rules are
+            // intentionally dropped here - box-decoration-break, same as an explicit height.
             height,
             children,
             color: this.color,
@@ -84,11 +96,14 @@ export class RectangleElement extends SizedPDFElement {
             relative: this.relative,
             overflow: this.overflow,
             breakAfter,
-        });
+        }).asPieceOf(this);
     }
     relativeSizeFactor(horizontal) {
         return horizontal ? this.sizeMemory.widthFactor : this.sizeMemory.heightFactor;
     }
+    maxExtent(horizontal) {
+        return (horizontal ? this.sizeMemory.maxWidth : this.sizeMemory.maxHeight) ?? Infinity;
+    }
     /** 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. */
@@ -100,12 +115,41 @@ export class RectangleElement extends SizedPDFElement {
             return false;
         return this.children.some((c) => c.needsBoundedMain(horizontal));
     }
+    /** As a Column: a height of its own is the region; without one, a region-sized child needs the page's. */
+    needsRegion() {
+        if (this.sizeMemory.height !== undefined || this.sizeMemory.heightFactor !== undefined) {
+            return false;
+        }
+        return this.children.some((c) => c.needsRegion());
+    }
+    /** A Box's own padding resolves a percentage against its containing block, not against the inner
+     *  width it hands its children - so it is told: the base a surrounding Row set, else what the Box was
+     *  offered. Neither (an unbounded offer outside a Row) leaves the Box's own width. */
+    paddingContext(ctx, offered) {
+        if (!this.hasPercentPadding())
+            return withPaddingBase(ctx, undefined);
+        return withPaddingBase(ctx, ctx.boxPaddingBase ?? (Number.isFinite(offered) ? offered : undefined));
+    }
+    hasPercentPadding() {
+        const own = this.children[0];
+        return own instanceof PaddingElement && own.ofBox && own.hasPercentSide;
+    }
     /** A Box stacks its children vertically inside its border, which is on both sides of the axis. */
     minIntrinsicMain(horizontal, ctx) {
         const content = stackMinIntrinsic(this.children, 0, !horizontal, horizontal, ctx) + 2 * this.borderWidth;
         return withDeclaredExtent(content, horizontal ? this.sizeMemory.width : this.sizeMemory.height, horizontal ? this.sizeMemory.minWidth : this.sizeMemory.minHeight);
     }
     calculateLayout(constraints, offset, ctx) {
+        return this.sizeWith(constraints, ctx, offset);
+    }
+    computeSize(constraints, ctx) {
+        return this.sizeWith(constraints, ctx, null);
+    }
+    /**
+     * The one sizing path. With an `offset` it lays the children out and keeps its geometry; with
+     * `null` it only measures - no field written, no child placed, no frame drained.
+     */
+    sizeWith(constraints, ctx, offset) {
         // 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);
@@ -118,12 +162,11 @@ export class RectangleElement extends SizedPDFElement {
         // 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 =
-            explicitWidth !== undefined
-                ? bounds.constrainWidth(explicitWidth)
-                : constraints.hasBoundedWidth
-                    ? bounds.maxWidth
-                    : this.width;
+        let width = explicitWidth !== undefined
+            ? bounds.constrainWidth(explicitWidth)
+            : constraints.hasBoundedWidth
+                ? bounds.maxWidth
+                : undefined;
         // 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;
@@ -131,43 +174,46 @@ export class RectangleElement extends SizedPDFElement {
         // 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 = explicitHeight === undefined && !constraints.hasBoundedHeight;
-        this.height =
-            explicitHeight !== undefined
-                ? bounds.constrainHeight(explicitHeight)
-                : constraints.hasBoundedHeight
-                    ? bounds.maxHeight
-                    : this.height;
-        this.x = this.sizeMemory.x + offset.x;
-        this.y = this.sizeMemory.y + offset.y;
-        // 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: [] }
+        let height = explicitHeight !== undefined
+            ? bounds.constrainHeight(explicitHeight)
+            : constraints.hasBoundedHeight
+                ? bounds.maxHeight
+                : undefined;
+        const x = this.sizeMemory.x + (offset?.x ?? 0);
+        const y = this.sizeMemory.y + (offset?.y ?? 0);
+        // A `relative` box is a positioning frame: its subtree is told it has one, and once the box is
+        // sized it lays out the `Positioned` descendants against itself (below). Measuring places
+        // nothing, so it needs no frame. A plain box leaves `ctx` untouched.
+        const frame = this.relative && offset
+            ? { origin: { x: 0, y: 0 }, size: { width: 0, height: 0 } }
             : undefined;
-        const childCtx = frame ? { ...ctx, frame } : ctx;
+        const childCtx = this.paddingContext(frame ? { ...ctx, frame } : ctx, constraints.maxWidth);
         // 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);
+            : Math.max(0, (width ?? 0) - 2 * this.borderWidth);
         const innerHeight = shrinkWrapHeight
             ? Infinity
-            : Math.max(0, (this.height ?? 0) - 2 * this.borderWidth);
+            : Math.max(0, (height ?? 0) - 2 * this.borderWidth);
         let contentWidth = 0;
         let contentHeight = 0;
-        let yCursor = this.y + this.borderWidth;
+        // Children are placed relative to this box's top-left, inside the border.
+        let yCursor = this.borderWidth;
         for (const child of this.children) {
-            const consumed = yCursor - (this.y + this.borderWidth);
+            const consumed = yCursor - 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);
+            const childConstraints = BoxConstraints.loose(innerWidth, childHeight);
+            const childSize = offset
+                ? child.calculateLayout(childConstraints, { x: this.borderWidth, y: yCursor }, childCtx)
+                : child.measure(childConstraints, childCtx);
             yCursor += childSize.height;
             contentHeight += childSize.height;
             contentWidth = Math.max(contentWidth, childSize.width);
@@ -175,32 +221,49 @@ export class RectangleElement extends SizedPDFElement {
         // 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);
+            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 (ratioSizesHeight)
-            this.height = bounds.constrainHeight((this.width ?? 0) / ratio);
+            height = bounds.constrainHeight((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.
+            height = bounds.constrainHeight(contentHeight + 2 * this.borderWidth);
+        if (offset) {
+            this.x = x;
+            this.y = y;
+            this.width = width;
+            this.height = height;
+        }
+        // The box is sized now: place its out-of-flow `Positioned` descendants, relative to its own
+        // top-left. Each is drawn at its own place in the tree (tree order).
         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);
+            const box = { width: width ?? 0, height: height ?? 0 };
+            for (const p of positionedIn(this.children))
+                p.placeIn(box, childCtx);
         }
         // 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: this.width ?? 0,
-            height: this.height ?? 0,
+            width: width ?? 0,
+            height: height ?? 0,
         };
     }
+    isPositioningFrame() {
+        return this.relative;
+    }
+    /** Sorts the `zIndex` of the `Positioned` below it: a frame does, and so does a clip - what it crops
+     *  stays cropped, whatever its `zIndex`. */
+    isStackingContext() {
+        return this.relative || this.overflow === "hidden";
+    }
+    layoutChildren() {
+        return this.children ?? [];
+    }
     getProps() {
         return {
             x: this.x,
@@ -214,6 +277,7 @@ export class RectangleElement extends SizedPDFElement {
             radius: this.radius,
             sideBorders: this.sideBorders,
             overflow: this.overflow,
+            relative: this.relative,
         };
     }
 }

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

@@ -35,18 +35,6 @@ interface RowElementParams extends WithChildren {
     /** 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
- * left-to-right via the shared `FlexLayoutHelper` on the horizontal axis; fixed children
- * take their natural width, `ExpandedElement`/Spacer children split the leftover width by
- * `flex`, and `gap` is inserted between them. The row fills the width it is offered and
- * shrink-wraps its height to the tallest child (unless a height is forced on it).
- *
- * Cross/main alignment is the next foundation slice; today children sit at the top-left
- * (cross start, main start). The row is atomic w.r.t. pagination - it reflows whole if it
- * does not fit (handled by the parent's `packChildren`); synchronized cell splitting is a
- * Grid/Table concern.
- */
 export declare class RowElement extends SizedPDFElement {
     private children;
     private gap;
@@ -62,12 +50,29 @@ export declare class RowElement extends SizedPDFElement {
     breaksBefore(): boolean;
     breaksAfter(): boolean;
     relativeSizeFactor(horizontal: boolean): number | undefined;
+    maxExtent(horizontal: boolean): number;
     /** 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;
     /** A Row lays out side by side, so widths add up (gaps included) and heights overlap. */
     minIntrinsicMain(horizontal: boolean, ctx: LayoutContext): number;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    protected computeSize(constraints: BoxConstraints, ctx: LayoutContext): Size;
+    /** The first element inside this row that asks for a page break by flag, once found (or `null`). */
+    private declaredBreak?;
+    /**
+     * A row is one line: nothing inside it starts a new page. A `breakBefore` / `breakAfter` in a cell
+     * (a table row is a Row too) is therefore ignored - say so. A `PageBreak` reports itself.
+     */
+    private reportIgnoredBreak;
+    /** The one sizing path: `layout` places the children (relative to this box), `measure` only sizes them. */
+    private sizeWith;
+    private percentPaddingChild?;
+    /** A child's `%` padding resolves against this Row's width (CSS: the containing block), which the Row
+     *  never offers - its children get their natural size - so it is told. Only when a child uses it,
+     *  since every key below would otherwise change with the Row's width. */
+    private childContext;
+    layoutChildren(): readonly PDFElement[];
     getProps(): {
         x: number;
         y: number;

package/dist/elements/row-element.js

@@ -1,7 +1,9 @@
+import { flexibleOf, hasPercentPaddingItem } from "../layout/flex-item.js";
 import { extentSpecs, resolveSize, } from "../layout/box-constraints.js";
-import { FlexLayoutHelper, HORIZONTAL_AXIS } from "../utils/flex-layout.js";
+import { FlexLayoutHelper, HORIZONTAL_AXIS, } from "../utils/flex-layout.js";
 import { stackMinIntrinsic, withDeclaredExtent } from "../layout/min-intrinsic.js";
-import { FlexiblePDFElement, SizedPDFElement, } from "./pdf-element.js";
+import { diagnose, pageOf } from "../common/diagnostics.js";
+import { SizedPDFElement, withPaddingBase, } 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
@@ -14,6 +16,8 @@ import { FlexiblePDFElement, SizedPDFElement, } from "./pdf-element.js";
  * does not fit (handled by the parent's `packChildren`); synchronized cell splitting is a
  * Grid/Table concern.
  */
+/** How far a line may run past its box before it is reported, in points (floating-point slack). */
+const WIDE_EPSILON = 0.01;
 export class RowElement extends SizedPDFElement {
     constructor({ children, gap, main, cross, reverse, wrap, alignContent, width, height, breakBefore, breakAfter, ...sizing }) {
         super({ x: 0, y: 0 });
@@ -37,6 +41,9 @@ export class RowElement extends SizedPDFElement {
     relativeSizeFactor(horizontal) {
         return horizontal ? this.requested.widthFactor : this.requested.heightFactor;
     }
+    maxExtent(horizontal) {
+        return (horizontal ? this.requested.maxWidth : this.requested.maxHeight) ?? Infinity;
+    }
     /** 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) {
@@ -45,7 +52,7 @@ export class RowElement extends SizedPDFElement {
             : [this.requested.height, this.requested.heightFactor];
         if (requested.some((v) => v !== undefined))
             return false;
-        const ownFlexChild = horizontal && this.children.some((c) => c instanceof FlexiblePDFElement);
+        const ownFlexChild = horizontal && this.children.some((c) => flexibleOf(c) !== undefined);
         return ownFlexChild || this.children.some((c) => c.needsBoundedMain(horizontal));
     }
     /** A Row lays out side by side, so widths add up (gaps included) and heights overlap. */
@@ -56,6 +63,53 @@ export class RowElement extends SizedPDFElement {
     calculateLayout(constraints, offset, ctx) {
         this.x = offset.x;
         this.y = offset.y;
+        this.reportIgnoredBreak(ctx);
+        const size = this.sizeWith(constraints, ctx, "layout");
+        this.width = size.width;
+        this.height = size.height;
+        return size;
+    }
+    computeSize(constraints, ctx) {
+        return this.sizeWith(constraints, ctx, "measure");
+    }
+    /**
+     * A row is one line: nothing inside it starts a new page. A `breakBefore` / `breakAfter` in a cell
+     * (a table row is a Row too) is therefore ignored - say so. A `PageBreak` reports itself.
+     */
+    reportIgnoredBreak(ctx) {
+        if (this.declaredBreak === undefined) {
+            const find = (el, depth) => {
+                if (el.breaksBefore() || el.breaksAfter())
+                    return el;
+                if (depth > 64)
+                    return null;
+                for (const child of el.layoutChildren()) {
+                    const hit = find(child, depth + 1);
+                    if (hit)
+                        return hit;
+                }
+                return null;
+            };
+            this.declaredBreak = null;
+            for (const child of this.layoutChildren()) {
+                this.declaredBreak = find(child, 0);
+                if (this.declaredBreak)
+                    break;
+            }
+        }
+        if (!this.declaredBreak)
+            return;
+        diagnose(ctx.diagnostics, {
+            code: "break-ignored",
+            severity: "warning",
+            message: "breakBefore / breakAfter inside a Row (or a table row) has no effect: a row is one line and " +
+                "never starts a new page. Put the break on the Row itself, or on a child of a Column.",
+            about: this.declaredBreak,
+            page: pageOf(ctx),
+        });
+    }
+    /** The one sizing path: `layout` places the children (relative to this box), `measure` only sizes them. */
+    sizeWith(constraints, ctx, mode) {
         // 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);
@@ -75,20 +129,46 @@ export class RowElement extends SizedPDFElement {
         // 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 };
+        let result = {
+            mainUsed: 0,
+            crossUsed: 0,
+        };
         if (this.children.length > 0) {
-            result = FlexLayoutHelper.layout(this.children, HORIZONTAL_AXIS, mainAvail, crossAvail, this.x, this.y, {
+            result = FlexLayoutHelper.layout(this.children, HORIZONTAL_AXIS, mainAvail, crossAvail, {
                 gap: this.gap,
                 main: this.main,
                 cross: this.cross,
                 reverse: this.reverse,
                 wrap: this.wrap,
                 alignContent: this.alignContent,
-            }, ctx);
+            }, this.childContext(ctx, mainAvail), mode);
+        }
+        const used = result.widestLine ?? result.mainUsed;
+        if (mode === "layout" && used > mainAvail + WIDE_EPSILON) {
+            diagnose(ctx.diagnostics, {
+                code: "overflow-wide",
+                severity: "warning",
+                message: `A Row's children need ${Math.round(used)}pt but it is ` +
+                    `${Math.round(mainAvail)}pt wide; they are drawn past its edge. Let them wrap ` +
+                    '(`breakWord`, `wrap`), make room, or clip with a Box\'s `overflow: "hidden"`.',
+                about: this,
+                page: pageOf(ctx),
+                fallback: "silent",
+            });
         }
-        this.width = boundedWidth ?? result.mainUsed;
-        this.height = boundedHeight ?? result.crossUsed;
-        return { width: this.width, height: this.height };
+        return { width: boundedWidth ?? result.mainUsed, height: boundedHeight ?? result.crossUsed };
+    }
+    /** A child's `%` padding resolves against this Row's width (CSS: the containing block), which the Row
+     *  never offers - its children get their natural size - so it is told. Only when a child uses it,
+     *  since every key below would otherwise change with the Row's width. */
+    childContext(ctx, mainAvail) {
+        this.percentPaddingChild ?? (this.percentPaddingChild = this.children.some(hasPercentPaddingItem));
+        if (!this.percentPaddingChild)
+            return ctx;
+        return withPaddingBase(ctx, Number.isFinite(mainAvail) ? mainAvail : undefined);
+    }
+    layoutChildren() {
+        return this.children;
     }
     getProps() {
         return {

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

@@ -1,7 +1,7 @@
 import { type SvgSize } from "../svg/index.js";
 import { BoxConstraints, Offset, Size, SizingParams } from "../layout/box-constraints.js";
 import { LayoutContext, SizedPDFElement } from "./pdf-element.js";
-/** Markup, a file path (Node only), or the file's bytes. */
+/** Markup, a URL (`http(s):`, `data:`), a file path (Node only), or the file's bytes. */
 export type SvgSource = string | Uint8Array;
 interface SvgElementParams extends SizingParams {
     source: SvgSource;
@@ -16,26 +16,50 @@ interface SvgElementParams extends SizingParams {
  *
  * Unlike a bitmap it needs no decoder, so its intrinsic size is known SYNCHRONOUSLY, in the
  * constructor - which also means a broken file fails on the line that asked for it rather than deep
- * inside a later render, the same bargain `addFont` makes.
+ * inside a later render, the same bargain `addFont` makes. An SVG from a URL is the exception: like
+ * an image from a URL it is fetched when the document renders (`resolveIntrinsicSize`, or the
+ * renderer for a subtree built during layout), and a dead link stops the render naming it.
  */
 export declare class SvgElement extends SizedPDFElement {
-    private source;
-    private intrinsic;
+    private source?;
+    private intrinsic?;
+    private readonly url?;
+    private loading?;
+    private failed;
     private alt?;
     private requested;
     private sizing;
     private widthFactor?;
     private heightFactor?;
     constructor(params: SvgElementParams);
+    /**
+     * Parsed on purpose where the source is given: an unreadable file is an error where it was NAMED,
+     * not inside a render three call frames later. The whole document is walked, not just its root, so
+     * an element outside the subset surfaces here too. A logo parses in well under a millisecond.
+     */
+    private parse;
+    /**
+     * Fetches and parses an SVG from a URL - once per render, however often it is asked. A no-op
+     * otherwise. A failure sticks for that render only: `fresh` (a new render begins) asks again.
+     */
+    load(fresh?: boolean): Promise<void>;
+    /**
+     * The pre-layout pass, as for an `ImageElement`: best-effort, so a failure leaves the size unknown
+     * and the renderer, which loads again, surfaces the real error.
+     */
+    resolveIntrinsicSize(): Promise<void>;
     getProps(): {
         x: number;
         y: number;
         width: number | undefined;
         height: number | undefined;
-        source: string;
-        intrinsic: SvgSize;
+        source: string | undefined;
+        intrinsic: SvgSize | undefined;
         alt: string | undefined;
     };
     calculateLayout(constraints: BoxConstraints, offset: Offset, _ctx: LayoutContext): Size;
+    protected computeSize(constraints: BoxConstraints): Size;
+    /** Its size under these constraints - the one computation both `measure` and layout use. */
+    private sizeFor;
 }
 export {};