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

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

@@ -8,7 +8,8 @@ export declare enum BoxFit {
     fill = "FILL"
 }
 export declare abstract class CustomImage {
-    abstract init(): void | Promise<void>;
+    /** Loads the image. `fresh`: a new render begins - a load that failed in an earlier one is tried again. */
+    abstract init(fresh?: boolean): void | Promise<void>;
     abstract getImageType(): string | Promise<string>;
     abstract getFileData(): string | Promise<string>;
     abstract getImageDimensions(): Promise<{
@@ -48,6 +49,38 @@ export declare class CustomBytesImage extends CustomImage {
         height: number;
     }>;
 }
+/** Thrown when an image could not be fetched or is not one we can embed. Always says which URL. */
+export declare class ImageUrlError extends Error {
+    constructor(message: string);
+}
+/** How long an image from a URL may take, and how large it may be - a raster image and an SVG alike. */
+export declare const IMAGE_FETCH_LIMITS: {
+    timeoutMs: number;
+    maxBytes: number;
+};
+/** Whether an image source string is an address to fetch rather than a file path. */
+export declare const isImageUrl: (src: string) => boolean;
+/**
+ * An image from a URL - `http(s):` or a `data:` URL - fetched in the async pass before layout, with
+ * the same timeout and size ceiling as a font. What it IS comes from its bytes, never from the
+ * address, so `.../photo?id=7` works. A dead link stops the render with an `ImageUrlError` naming it.
+ */
+export declare class CustomUrlImage extends CustomImage {
+    private readonly url;
+    private loading?;
+    private loaded?;
+    private failed;
+    constructor(url: string);
+    init(fresh?: boolean): Promise<void>;
+    private load;
+    private image;
+    getImageType(): Promise<string>;
+    getFileData(): string;
+    getImageDimensions(): Promise<{
+        width: number;
+        height: number;
+    }>;
+}
 interface ImageElementParams {
     image: CustomImage;
     width?: number;
@@ -94,6 +127,11 @@ export declare class ImageElement extends SizedPDFElement {
     resolveIntrinsicSize(): Promise<void>;
     relativeSizeFactor(horizontal: boolean): number | 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;
+    /** The image's own pixel extent on one axis, clamped by its min/max; unknown before the pre-pass. */
+    private ownExtent;
     getProps(): {
         x: number;
         y: number;

package/dist/elements/image-element.js

@@ -1,6 +1,7 @@
 import { getImageDimensions } from "../utils/image-helper.js";
 import { latin1FromBytes } from "../utils/bytes.js";
 import { readFileBytesAsync } from "../platform/node-fs.js";
+import { fetchBytes } from "../utils/fetch-bytes.js";
 import { extentSpecs, resolveSize, } from "../layout/box-constraints.js";
 import { SizedPDFElement } from "./pdf-element.js";
 // path.extname without node:path (browser-safe): the substring from the last dot, if it sits after the
@@ -28,11 +29,10 @@ export class CustomLocalImage extends CustomImage {
         if (this.fileBuffer)
             return; // idempotent: the pre-layout size pass and the renderer both call init()
         try {
-            // Loading image and convert it to base64
             await this.loadImage(this.imagePath);
         }
-        catch (error) {
-            console.error("Error loading image:", error);
+        catch (e) {
+            throw new Error(`@jasy/pdf: could not read the image at ${this.imagePath}: ${String(e?.message ?? e)}`);
         }
     }
     async getImageType() {
@@ -64,9 +64,8 @@ export class CustomLocalImage extends CustomImage {
     async getImageDimensions() {
         if (this.dims)
             return this.dims; // reuse: the pre-layout size pass and the renderer both ask
-        if (!this.fileBuffer) {
-            throw new Error("You must first call the `loadAndConvertImage` method");
-        }
+        if (!this.fileBuffer)
+            throw new Error("@jasy/pdf: an image was measured before it was loaded");
         this.dims = await getImageDimensions(this.fileBuffer);
         return this.dims;
     }
@@ -99,6 +98,64 @@ export class CustomBytesImage extends CustomImage {
         return this.dims;
     }
 }
+/** Thrown when an image could not be fetched or is not one we can embed. Always says which URL. */
+export class ImageUrlError extends Error {
+    constructor(message) {
+        super(`@jasy/pdf: ${message}`);
+    }
+}
+/** How long an image from a URL may take, and how large it may be - a raster image and an SVG alike. */
+export const IMAGE_FETCH_LIMITS = { timeoutMs: 15000, maxBytes: 32 * 1024 * 1024 };
+/** Whether an image source string is an address to fetch rather than a file path. */
+export const isImageUrl = (src) => /^(https?:|data:)/i.test(src.trim());
+/**
+ * An image from a URL - `http(s):` or a `data:` URL - fetched in the async pass before layout, with
+ * the same timeout and size ceiling as a font. What it IS comes from its bytes, never from the
+ * address, so `.../photo?id=7` works. A dead link stops the render with an `ImageUrlError` naming it.
+ */
+export class CustomUrlImage extends CustomImage {
+    constructor(url) {
+        super();
+        this.url = url;
+        this.failed = false;
+    }
+    // One fetch per render, however often it is asked: the pre-layout size pass and the renderer both
+    // call init(). A failure sticks for that render only - the next one asks again (`fresh`).
+    async init(fresh = false) {
+        if (fresh && this.failed)
+            this.loading = undefined;
+        this.loading ?? (this.loading = this.load().then((image) => ((this.failed = false), image), (e) => {
+            this.failed = true;
+            throw e;
+        }));
+        this.loaded = await this.loading;
+    }
+    async load() {
+        const bytes = await fetchBytes(this.url, "image", ImageUrlError, IMAGE_FETCH_LIMITS);
+        const jpeg = bytes[0] === 0xff && bytes[1] === 0xd8;
+        const png = bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47;
+        if (!jpeg && !png) {
+            // An error page answers with a 200 often enough to name it rather than fail deep inside.
+            const looksLikeMarkup = new TextDecoder().decode(bytes.subarray(0, 64)).trimStart()[0] === "<";
+            throw new ImageUrlError(`the file at ${this.url} is ${looksLikeMarkup ? "markup (an HTML page, or an SVG - pass that to Svg(url))" : "not an image we can embed"} - jasy embeds PNG and JPEG`);
+        }
+        return new CustomBytesImage(bytes);
+    }
+    image() {
+        if (!this.loaded)
+            throw new Error("@jasy/pdf: an image was measured before it was loaded");
+        return this.loaded;
+    }
+    getImageType() {
+        return this.image().getImageType();
+    }
+    getFileData() {
+        return this.image().getFileData();
+    }
+    getImageDimensions() {
+        return this.image().getImageDimensions();
+    }
+}
 export class ImageElement extends SizedPDFElement {
     constructor({ image, width, height, widthFactor, heightFactor, fit = BoxFit.none, radius, alt, ...sizing }) {
         // Seed this.width/height from the request so getProps() reflects it before layout; calculateLayout
@@ -122,7 +179,7 @@ export class ImageElement extends SizedPDFElement {
      */
     async resolveIntrinsicSize() {
         try {
-            await this.image.init();
+            await this.image.init(true); // a render begins here
             this.intrinsic = await this.image.getImageDimensions();
         }
         catch {
@@ -133,8 +190,20 @@ export class ImageElement extends SizedPDFElement {
         return horizontal ? this.widthFactor : this.heightFactor;
     }
     calculateLayout(constraints, offset, _ctx) {
+        const size = this.sizeFor(constraints);
         this.x = offset.x;
         this.y = offset.y;
+        // Kept as resolved, `undefined` included: the renderer reads an unset axis differently from 0.
+        this.width = size.width;
+        this.height = size.height;
+        return { width: size.width ?? 0, height: size.height ?? 0 };
+    }
+    computeSize(constraints) {
+        const size = this.sizeFor(constraints);
+        return { width: size.width ?? 0, height: size.height ?? 0 };
+    }
+    /** Its size under these constraints - the one computation both `measure` and layout use. */
+    sizeFor(constraints) {
         // Relative sizing: a fixed size or a fraction of the offered box (fraction only in a bounded axis).
         // Read from `requested` (not this.width/height, which we overwrite below) so every pass re-resolves.
         const specs = extentSpecs({
@@ -163,12 +232,26 @@ export class ImageElement extends SizedPDFElement {
             else if (h !== undefined && w === undefined)
                 w = bounds.constrainWidth(h * ratio);
         }
-        // Fall back to the prior behavior for an unpinned axis: a bounded axis fills, otherwise keep the
-        // requested fixed size (or undefined). Read from `requested`, never the mutated this.width/height.
-        this.width = w ?? (bounds.hasBoundedWidth ? bounds.maxWidth : this.requested.width);
-        this.height = h ?? (bounds.hasBoundedHeight ? bounds.maxHeight : this.requested.height);
+        // An unpinned axis: a bounded one fills; an unbounded one takes the image's own extent (1px = 1pt) -
+        // what `fit: none` (the default) draws there, so the layout reserves exactly what is drawn. Read from
+        // `requested`, never the mutated this.width/height.
+        const width = w ??
+            (bounds.hasBoundedWidth
+                ? bounds.maxWidth
+                : (this.requested.width ?? this.ownExtent(bounds, "width")));
+        const height = h ??
+            (bounds.hasBoundedHeight
+                ? bounds.maxHeight
+                : (this.requested.height ?? this.ownExtent(bounds, "height")));
         // Top-left coordinates; the fit logic (renderer) and the Y-flip (seam) run later.
-        return { width: this.width ?? 0, height: this.height ?? 0 };
+        return { width, height };
+    }
+    /** The image's own pixel extent on one axis, clamped by its min/max; unknown before the pre-pass. */
+    ownExtent(bounds, axis) {
+        const own = this.intrinsic?.[axis];
+        if (own === undefined)
+            return undefined;
+        return axis === "width" ? bounds.constrainWidth(own) : bounds.constrainHeight(own);
     }
     getProps() {
         return {

package/dist/elements/layout/anchor-element.d.ts

@@ -1,20 +1,18 @@
-import { PDFElement, LayoutContext } from "../pdf-element.js";
-import { BoxConstraints, Offset, Size } from "../../layout/box-constraints.js";
+import { PDFElement } from "../pdf-element.js";
+import { ProxyElement } from "./proxy-element.js";
 /**
- * Marks its child as a named jump target for an internal `Link({ to: name })`. Layout-transparent: it
- * delegates `calculateLayout` to the child and records the child's top, which the renderer turns into an
- * `Anchor` IR node (and PDFRenderer into a /Names /Dests entry). It draws nothing - the child renders
- * exactly as it would on its own.
+ * Marks its child as a named jump target for an internal `Link({ to: name })`. Layout-transparent (a
+ * `ProxyElement`); the renderer turns the child's top into an `Anchor` IR node (and PDFRenderer into a
+ * /Names /Dests entry). It draws nothing. Split across pages, only the first piece is the target - a
+ * name must lead to one place.
  */
-export declare class AnchorElement extends PDFElement {
+export declare class AnchorElement extends ProxyElement {
     private name;
-    private child;
-    private y;
     constructor({ name, child }: {
         name: string;
         child: PDFElement;
     });
-    calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    protected rewrap(child: PDFElement, continued: boolean): PDFElement;
     getProps(): {
         name: string;
         child: PDFElement;

package/dist/elements/layout/anchor-element.js

@@ -1,27 +1,19 @@
-import { PDFElement } from "../pdf-element.js";
+import { ProxyElement } from "./proxy-element.js";
 /**
- * Marks its child as a named jump target for an internal `Link({ to: name })`. Layout-transparent: it
- * delegates `calculateLayout` to the child and records the child's top, which the renderer turns into an
- * `Anchor` IR node (and PDFRenderer into a /Names /Dests entry). It draws nothing - the child renders
- * exactly as it would on its own.
+ * Marks its child as a named jump target for an internal `Link({ to: name })`. Layout-transparent (a
+ * `ProxyElement`); the renderer turns the child's top into an `Anchor` IR node (and PDFRenderer into a
+ * /Names /Dests entry). It draws nothing. Split across pages, only the first piece is the target - a
+ * name must lead to one place.
  */
-export class AnchorElement extends PDFElement {
+export class AnchorElement extends ProxyElement {
     constructor({ name, child }) {
-        super();
-        this.y = 0;
+        super(child);
         this.name = name;
-        this.child = child;
     }
-    calculateLayout(constraints, offset, ctx) {
-        const size = this.child.calculateLayout(constraints, offset, ctx);
-        this.y = offset.y; // the child's top - the scroll target for a link that jumps here
-        return size;
+    rewrap(child, continued) {
+        return continued ? child : new AnchorElement({ name: this.name, child });
     }
     getProps() {
-        return {
-            name: this.name,
-            child: this.child,
-            y: this.y,
-        };
+        return { name: this.name, child: this.child, y: this.y };
     }
 }

package/dist/elements/layout/bookmark-element.d.ts

@@ -1,23 +1,21 @@
-import { PDFElement, LayoutContext } from "../pdf-element.js";
-import { BoxConstraints, Offset, Size } from "../../layout/box-constraints.js";
+import { PDFElement } from "../pdf-element.js";
+import { ProxyElement } from "./proxy-element.js";
 /**
- * Adds a document-outline entry (a bookmark) that jumps to its child. Layout-transparent: it delegates
- * `calculateLayout` to the child and records the child's top, which the renderer turns into an `Outline`
- * IR node (and PDFRenderer into a /Outlines tree entry). `title` is the label shown in the viewer's
- * bookmark panel; `level` (1-based, default 1) nests it under the nearest preceding smaller level. It
- * draws nothing - the child renders exactly as it would without the bookmark.
+ * Adds a document-outline entry (a bookmark) that jumps to its child. Layout-transparent (a
+ * `ProxyElement`); the renderer turns the child's top into an `Outline` IR node (and PDFRenderer into a
+ * /Outlines tree entry). `title` is the label shown in the viewer's bookmark panel; `level` (1-based,
+ * default 1) nests it under the nearest preceding smaller level. It draws nothing. Split across pages,
+ * only the first piece carries the entry - a chapter is listed once.
  */
-export declare class BookmarkElement extends PDFElement {
+export declare class BookmarkElement extends ProxyElement {
     private title;
     private level;
-    private child;
-    private y;
     constructor({ title, level, child }: {
         title: string;
         level?: number;
         child: PDFElement;
     });
-    calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    protected rewrap(child: PDFElement, continued: boolean): PDFElement;
     getProps(): {
         title: string;
         level: number;

package/dist/elements/layout/bookmark-element.js

@@ -1,30 +1,21 @@
-import { PDFElement } from "../pdf-element.js";
+import { ProxyElement } from "./proxy-element.js";
 /**
- * Adds a document-outline entry (a bookmark) that jumps to its child. Layout-transparent: it delegates
- * `calculateLayout` to the child and records the child's top, which the renderer turns into an `Outline`
- * IR node (and PDFRenderer into a /Outlines tree entry). `title` is the label shown in the viewer's
- * bookmark panel; `level` (1-based, default 1) nests it under the nearest preceding smaller level. It
- * draws nothing - the child renders exactly as it would without the bookmark.
+ * Adds a document-outline entry (a bookmark) that jumps to its child. Layout-transparent (a
+ * `ProxyElement`); the renderer turns the child's top into an `Outline` IR node (and PDFRenderer into a
+ * /Outlines tree entry). `title` is the label shown in the viewer's bookmark panel; `level` (1-based,
+ * default 1) nests it under the nearest preceding smaller level. It draws nothing. Split across pages,
+ * only the first piece carries the entry - a chapter is listed once.
  */
-export class BookmarkElement extends PDFElement {
+export class BookmarkElement extends ProxyElement {
     constructor({ title, level = 1, child }) {
-        super();
-        this.y = 0;
+        super(child);
         this.title = title;
         this.level = level;
-        this.child = child;
     }
-    calculateLayout(constraints, offset, ctx) {
-        const size = this.child.calculateLayout(constraints, offset, ctx);
-        this.y = offset.y; // the child's top - the scroll target for the bookmark
-        return size;
+    rewrap(child, continued) {
+        return continued ? child : new BookmarkElement({ title: this.title, level: this.level, child });
     }
     getProps() {
-        return {
-            title: this.title,
-            level: this.level,
-            child: this.child,
-            y: this.y,
-        };
+        return { title: this.title, level: this.level, child: this.child, y: this.y };
     }
 }

package/dist/elements/layout/default-text-style-element.d.ts

@@ -1,29 +1,27 @@
-import { PDFElement, LayoutContext, WithChild, SizedPDFElement } from "../pdf-element.js";
-import { BoxConstraints, Offset, Size } from "../../layout/box-constraints.js";
-import { Fragmentable, FragmentResult } from "../../layout/fragmentation.js";
+import { PDFElement, LayoutContext, WithChild } from "../pdf-element.js";
+import { ProxyElement } from "./proxy-element.js";
 import { ResolvedTextStyle } from "../../text/text-style.js";
 interface DefaultTextStyleParams extends WithChild {
     style: Partial<ResolvedTextStyle>;
 }
 /**
  * Provides default text properties (font/size/color/lineHeight/align/weight) to its whole subtree -
- * Flutter's `DefaultTextStyle`. Transparent to layout: the child takes the same constraints, offset
- * and size; only the inherited TextStyle changes. A `Text` below still wins per property, and these
+ * Flutter's `DefaultTextStyle`. Transparent to layout (a `ProxyElement`): only the inherited
+ * TextStyle changes. A `Text` below still wins per property, and these
  * overrides layer onto whatever the element already inherited from above.
  */
-export declare class DefaultTextStyleElement extends SizedPDFElement implements Fragmentable {
-    private child;
+export declare class DefaultTextStyleElement extends ProxyElement {
     private style;
     constructor({ child, style }: DefaultTextStyleParams);
-    private childCtx;
-    fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
-    private cloneWithChild;
-    calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    protected childContext(ctx: LayoutContext): LayoutContext;
+    private merged?;
+    private mergedOnto;
+    protected rewrap(child: PDFElement): PDFElement;
     getProps(): {
         x: number;
         y: number;
-        width: number | undefined;
-        height: number | undefined;
+        width: number;
+        height: number;
         child: PDFElement;
     };
 }

package/dist/elements/layout/default-text-style-element.js

@@ -1,46 +1,29 @@
-import { SizedPDFElement } from "../pdf-element.js";
-import { isFragmentable } from "../../layout/fragmentation.js";
+import { ProxyElement } from "./proxy-element.js";
 import { DEFAULT_TEXT_STYLE, mergeTextStyle } from "../../text/text-style.js";
 /**
  * Provides default text properties (font/size/color/lineHeight/align/weight) to its whole subtree -
- * Flutter's `DefaultTextStyle`. Transparent to layout: the child takes the same constraints, offset
- * and size; only the inherited TextStyle changes. A `Text` below still wins per property, and these
+ * Flutter's `DefaultTextStyle`. Transparent to layout (a `ProxyElement`): only the inherited
+ * TextStyle changes. A `Text` below still wins per property, and these
  * overrides layer onto whatever the element already inherited from above.
  */
-export class DefaultTextStyleElement extends SizedPDFElement {
+export class DefaultTextStyleElement extends ProxyElement {
     constructor({ child, style }) {
-        super({ x: 0, y: 0 });
-        this.child = child;
+        super(child);
         this.style = style;
     }
-    childCtx(ctx) {
-        return {
-            ...ctx,
-            textStyle: mergeTextStyle(ctx.textStyle ?? DEFAULT_TEXT_STYLE, this.style),
-        };
+    childContext(ctx) {
+        return { ...ctx, textStyle: this.mergedOnto(ctx.textStyle ?? DEFAULT_TEXT_STYLE) };
     }
-    // Transparent to fragmentation too: split the child against the merged context, re-wrapping each
-    // half so the remainder on the next page keeps the same defaults.
-    fragment(maxHeight, width, ctx) {
-        if (!isFragmentable(this.child))
-            return { fitted: null, remainder: this };
-        const split = this.child.fragment(maxHeight, width, this.childCtx(ctx));
-        return {
-            fitted: split.fitted ? this.cloneWithChild(split.fitted) : null,
-            remainder: split.remainder ? this.cloneWithChild(split.remainder) : null,
-        };
+    mergedOnto(inherited) {
+        if (this.merged?.onto !== inherited) {
+            this.merged = { onto: inherited, style: mergeTextStyle(inherited, this.style) };
+        }
+        return this.merged.style;
     }
-    cloneWithChild(child) {
+    // Each piece of a split keeps the defaults, so the remainder on the next page looks the same.
+    rewrap(child) {
         return new DefaultTextStyleElement({ child, style: this.style });
     }
-    calculateLayout(constraints, offset, ctx) {
-        this.x = offset.x;
-        this.y = offset.y;
-        const size = this.child.calculateLayout(constraints, offset, this.childCtx(ctx));
-        this.width = size.width;
-        this.height = size.height;
-        return size;
-    }
     getProps() {
         return { x: this.x, y: this.y, width: this.width, height: this.height, child: this.child };
     }

package/dist/elements/layout/deferred-element.d.ts

@@ -2,17 +2,25 @@ import { BoxConstraints, Offset, Size } from "../../layout/box-constraints.js";
 import { Fragmentable, FragmentResult } from "../../layout/fragmentation.js";
 import { LayoutContext, PDFElement } from "../pdf-element.js";
 /**
- * Builds its subtree at layout time via `resolve(ctx)`, so the tree can depend on font
- * metrics (e.g. a Table resolving `"auto"` column widths from cell content). The engine
- * stays table-agnostic - the closure comes from the API layer.
+ * Builds its subtree at layout time via `resolve(ctx, width)`, so the tree can depend on font
+ * metrics and on the width it gets (e.g. a Table fitting its `"auto"` and `fr` columns to the cell
+ * content and its own width). The engine stays table-agnostic - the closure comes from the API layer.
  */
 export declare class DeferredElement extends PDFElement implements Fragmentable {
     private resolve;
     private composed?;
-    constructor(resolve: (ctx: LayoutContext) => PDFElement);
+    private built;
+    constructor(resolve: (ctx: LayoutContext, width: number) => PDFElement);
+    /** The subtree for this context and width: built once, and again only when one of them changes. */
+    private subtree;
     private build;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    /** Its subtree is unknown until built, and could hold a `PageBuilder`; until then assume it does. */
+    dependsOnPage(): boolean;
+    /** Sizes the subtree for this context - the same one a layout under it will draw. */
+    protected computeSize(constraints: BoxConstraints, ctx: LayoutContext): Size;
     fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
+    layoutChildren(): readonly PDFElement[];
     getProps(): {
         composed: PDFElement | undefined;
     };

package/dist/elements/layout/deferred-element.js

@@ -1,28 +1,45 @@
 import { isFragmentable } from "../../layout/fragmentation.js";
 import { PDFElement } from "../pdf-element.js";
+import { BuiltFromContext } from "../../layout/layout-cache.js";
 /**
- * Builds its subtree at layout time via `resolve(ctx)`, so the tree can depend on font
- * metrics (e.g. a Table resolving `"auto"` column widths from cell content). The engine
- * stays table-agnostic - the closure comes from the API layer.
+ * Builds its subtree at layout time via `resolve(ctx, width)`, so the tree can depend on font
+ * metrics and on the width it gets (e.g. a Table fitting its `"auto"` and `fr` columns to the cell
+ * content and its own width). The engine stays table-agnostic - the closure comes from the API layer.
  */
 export class DeferredElement extends PDFElement {
     constructor(resolve) {
         super();
         this.resolve = resolve;
+        this.built = new BuiltFromContext();
     }
-    build(ctx) {
-        this.composed = this.resolve(ctx);
+    /** The subtree for this context and width: built once, and again only when one of them changes. */
+    subtree(ctx, width) {
+        return this.built.get(ctx, width, () => this.resolve(ctx, width));
+    }
+    build(ctx, width) {
+        this.composed = this.subtree(ctx, width);
         return this.composed;
     }
     calculateLayout(constraints, offset, ctx) {
-        return this.build(ctx).calculateLayout(constraints, offset, ctx);
+        return this.build(ctx, constraints.maxWidth).calculateLayout(constraints, offset, ctx);
+    }
+    /** Its subtree is unknown until built, and could hold a `PageBuilder`; until then assume it does. */
+    dependsOnPage() {
+        return this.composed?.dependsOnPage() ?? true;
+    }
+    /** Sizes the subtree for this context - the same one a layout under it will draw. */
+    computeSize(constraints, ctx) {
+        return this.subtree(ctx, constraints.maxWidth).measure(constraints, ctx);
     }
     fragment(maxHeight, width, ctx) {
-        const c = this.build(ctx);
+        const c = this.build(ctx, width);
         return isFragmentable(c)
             ? c.fragment(maxHeight, width, ctx)
             : { fitted: this, remainder: null };
     }
+    layoutChildren() {
+        return this.composed ? [this.composed] : [];
+    }
     getProps() {
         return { composed: this.composed };
     }

package/dist/elements/layout/expanded-element.d.ts

@@ -13,6 +13,9 @@ export declare class ExpandedElement extends FlexiblePDFElement implements Fragm
     /** Layout-transparent: the floor is whatever the wrapped child needs. */
     minIntrinsicMain(horizontal: boolean, ctx: LayoutContext): number;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
+    protected computeSize(constraints: BoxConstraints, ctx: LayoutContext): Size;
+    /** The one sizing path: with an `offset` the child is laid out there, with `null` only measured. */
+    private sizeWith;
     /**
      * When the column paginates, a flex region can't "fill" across pages, so it delegates to
      * its child: the child splits and each half is re-wrapped in an Expanded (which then
@@ -20,7 +23,11 @@ export declare class ExpandedElement extends FlexiblePDFElement implements Fragm
      * whole Expanded moves on.
      */
     fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
+    hasForcedBreak(): boolean;
+    breaksBefore(): boolean;
+    breaksAfter(): boolean;
     private cloneWithChild;
+    layoutChildren(): readonly PDFElement[];
     getProps(): {
         x: number;
         y: number;