@jasy/pdf 1.0.0-alpha.8 → 1.0.0-beta.1

package/dist/ir/display-list.d.ts

@@ -32,6 +32,9 @@ export interface TextRun {
     x: number;
     y: number;
     text: string;
+    /** The glyphs to draw, when the run was SHAPED. The backend emits these instead of encoding `text`,
+     *  which stays logical for `ToUnicode` and the accessible tree. */
+    glyphs?: number[];
     fontFamily: string;
     fontStyle: FontStyle;
     fontSize: number;
@@ -40,17 +43,31 @@ export interface TextRun {
     tag?: StructTag;
 }
 /** An axis-aligned rectangle. An absent `fill` or `stroke` means that part is not drawn. */
+/**
+ * Corner radii in points (CSS `border-radius`). Any corner left out falls back to 0. A single number
+ * everywhere is the common case and stays a plain `number` on the nodes, so nothing changed for a
+ * document that never asks for different corners.
+ */
+export interface Radii {
+    tl?: number;
+    tr?: number;
+    br?: number;
+    bl?: number;
+}
+/** True when any corner asks for a radius - the gate between a plain rect and a curved path. */
+export declare function isRounded(radius: number | Radii | undefined): boolean;
 export interface Rect {
     type: "rect";
     x: number;
     y: number;
     width: number;
     height: number;
-    fill?: Color;
+    /** Solid colour, or a gradient whose anchor points are in absolute page coordinates. */
+    fill?: Color | Gradient;
     stroke?: Color;
     strokeWidth: number;
-    /** Corner radius in points; absent/0 = sharp corners (plain `re`). */
-    radius?: number;
+    /** Corner radius in points - one number for all four, or per corner. Absent/0 = sharp (plain `re`). */
+    radius?: number | Radii;
     tag?: StructTag;
 }
 /** A straight line segment between two points. */
@@ -84,8 +101,8 @@ export interface Image {
         width: number;
         height: number;
     };
-    /** Corner radius in points for the image box; absent/0 = sharp corners. */
-    radius?: number;
+    /** Corner radius in points for the image box - one number or per corner; absent/0 = sharp. */
+    radius?: number | Radii;
     tag?: StructTag;
 }
 /**
@@ -99,7 +116,7 @@ export interface ClipPush {
     y: number;
     width: number;
     height: number;
-    radius?: number;
+    radius?: number | Radii;
 }
 /** Closes the most recent `ClipPush` (restores the graphics state). */
 export interface ClipPop {
@@ -216,6 +233,9 @@ export interface LinearGradient {
     y1: number;
     stops: GradientStop[];
     extend: "pad" | "repeat" | "reflect";
+    /** One opacity for the whole shading (0-1). A PDF shading is DeviceRGB and has no alpha channel,
+     *  so a PER-STOP alpha is not representable - but a uniform one is, as an ExtGState. */
+    alpha?: number;
 }
 /** A radial gradient between two circles, in absolute page coordinates. */
 export interface RadialGradient {
@@ -228,19 +248,55 @@ export interface RadialGradient {
     r1: number;
     stops: GradientStop[];
     extend: "pad" | "repeat" | "reflect";
+    /** One opacity for the whole shading (0-1). A PDF shading is DeviceRGB and has no alpha channel,
+     *  so a PER-STOP alpha is not representable - but a uniform one is, as an ExtGState. */
+    alpha?: number;
 }
 export type Gradient = LinearGradient | RadialGradient;
 /**
- * A filled vector path - one or more closed subpaths sharing a single fill, using the nonzero
- * winding rule (so a glyph's inner contour cuts a hole). This is what a color glyph's layers draw
- * onto: each COLR layer is one `Path` filled with a solid `Color` (v0) or a `Gradient` (v1).
+ * How a path's outline is stroked. The names are SVG's, the semantics are the PDF operators they map
+ * to (`w`, `J`, `j`, `M`, `d`), and the defaults are SVG's initial values - not PDF's, which differ on
+ * the miter limit. Opacity rides on the `Color`, as everywhere else in the IR.
+ */
+export interface StrokeStyle {
+    color: Color;
+    width: number;
+    /** `J`. Default `butt`. */
+    cap?: "butt" | "round" | "square";
+    /** `j`. Default `miter`. */
+    join?: "miter" | "round" | "bevel";
+    /** `M`. Default 4 (SVG); PDF's own default is 10, so we always emit it when a join can miter. */
+    miterLimit?: number;
+    /** `d`: dash lengths in points, plus the phase to start at. Absent or empty = solid. */
+    dash?: number[];
+    dashOffset?: number;
+}
+/**
+ * A vector path - one or more subpaths that share one fill and/or one stroke. `fill` uses the nonzero
+ * winding rule unless `fillRule` says otherwise, so a glyph's inner contour cuts a hole by default.
+ * A color glyph's layer is one `Path` filled with a solid `Color` (COLR v0) or a `Gradient` (v1); an
+ * SVG shape is one `Path` that may also carry a stroke, or carry ONLY a stroke.
  */
 export interface Path {
     type: "path";
     commands: PathCommand[];
-    fill: Color | Gradient;
+    /** Absent = not filled (a stroke-only outline). */
+    fill?: Color | Gradient;
+    /** `evenodd` maps to the `*` operators; absent = nonzero, which is what glyphs need. */
+    fillRule?: "nonzero" | "evenodd";
+    stroke?: StrokeStyle;
     /** Accessibility structure tag (absent = drawn as an artifact); color-emoji layers stay untagged. */
     tag?: StructTag;
 }
+/**
+ * Clips to an arbitrary path until the matching `clip-pop` - what SVG's `<clipPath>` needs, and what
+ * `ClipPush` cannot express, being a rectangle. The commands are in the same space as a `Path`'s.
+ */
+export interface ClipPathPush {
+    type: "clip-path-push";
+    commands: PathCommand[];
+    /** `evenodd` maps to `W*`; absent = nonzero. SVG spells this `clip-rule`. */
+    fillRule?: "nonzero" | "evenodd";
+}
 /** The closed set of primitives the PDF backend knows how to draw. */
-export type IRNode = TextRun | Rect | Line | Image | ClipPush | ClipPop | Path | Link | Outline | Anchor | FormFieldNode | TransformPush | TransformPop;
+export type IRNode = TextRun | Rect | Line | Image | ClipPush | ClipPathPush | ClipPop | Path | Link | Outline | Anchor | FormFieldNode | TransformPush | TransformPop;

package/dist/ir/display-list.js

@@ -1 +1,8 @@
-export {};
+/** True when any corner asks for a radius - the gate between a plain rect and a curved path. */
+export function isRounded(radius) {
+    if (radius === undefined)
+        return false;
+    if (typeof radius === "number")
+        return radius > 0;
+    return ((radius.tl ?? 0) > 0 || (radius.tr ?? 0) > 0 || (radius.br ?? 0) > 0 || (radius.bl ?? 0) > 0);
+}

package/dist/layout/alignment.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Flex alignment vocabulary. It lives here rather than in `utils/flex-layout.ts` because the base
+ * `PDFElement` needs `CrossAlign` for `alignSelf`, and flex-layout imports the elements - defining it
+ * there would close a cycle.
+ */
+/** Distribution along the MAIN axis (CSS `justify-content`). */
+export type MainAlign = "start" | "center" | "end" | "between" | "around";
+/** Position/size ACROSS the axis (CSS `align-items` / `align-self`). `stretch` fills the cross extent;
+ *  the others place the child at its natural cross size. */
+export type CrossAlign = "start" | "center" | "end" | "stretch";

package/dist/layout/alignment.js

@@ -0,0 +1,6 @@
+/**
+ * Flex alignment vocabulary. It lives here rather than in `utils/flex-layout.ts` because the base
+ * `PDFElement` needs `CrossAlign` for `alignSelf`, and flex-layout imports the elements - defining it
+ * there would close a cycle.
+ */
+export {};

package/dist/layout/box-constraints.d.ts

@@ -41,6 +41,12 @@ export declare class BoxConstraints {
      * what a padding/border element hands its child after reserving its own insets.
      */
     deflate(horizontal: number, vertical: number): BoxConstraints;
+    /**
+     * Tightens this box by an element's own `min`/`max` on either axis. A max never widens the offered
+     * room, and a min may push past it - `minHeight: 500` in a 300pt region means 500, and pagination
+     * deals with the overflow, the same answer CSS gives.
+     */
+    narrow(minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number): BoxConstraints;
     /** Returns the constraints clamped to lie within `parent` (Flutter's enforce). */
     enforce(parent: BoxConstraints): BoxConstraints;
 }
@@ -52,6 +58,53 @@ export declare class BoxConstraints {
  * Shared by every sized element so `width: "50%"` behaves identically across Box / Column / Row / Image.
  */
 export declare function resolveExtent(fixed: number | undefined, factor: number | undefined, boundedMax: number, hasBounded: boolean): number | undefined;
+/** What one axis of a sized element was asked for: a size, plus the bounds it must stay inside. */
+export interface ExtentSpec {
+    fixed?: number;
+    factor?: number;
+    min?: number;
+    minFactor?: number;
+    max?: number;
+    maxFactor?: number;
+}
+/** The sizing options every sized element accepts. Each `*Factor` is the percentage form of its pair. */
+export interface SizingParams {
+    width?: number;
+    height?: number;
+    widthFactor?: number;
+    heightFactor?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    minWidthFactor?: number;
+    maxWidthFactor?: number;
+    minHeightFactor?: number;
+    maxHeightFactor?: number;
+    /** width / height. Derives whichever axis is left open; see `resolveSize`. */
+    aspectRatio?: number;
+}
+/** Split `SizingParams` into the per-axis form `resolveSize` takes. */
+export declare function extentSpecs(p: SizingParams): {
+    width: ExtentSpec;
+    height: ExtentSpec;
+};
+/**
+ * Resolve both axes of a sized element: relative sizing, then `aspectRatio`, then `min`/`max`.
+ *
+ * The order follows CSS: a ratio fills in the axis you left open, and min/max clamp afterwards - so an
+ * explicit bound wins over the ratio, exactly as `min-height` beats `aspect-ratio` in a browser.
+ *
+ * `min`/`max` also come back as NARROWED constraints, because an axis with no explicit size still has
+ * to obey them. `maxWidth` alone means "fill, but no wider than this", and the caller's own fill and
+ * shrink-wrap paths get that for free by using the returned constraints instead of the ones passed in.
+ * A `width` of `undefined` keeps its usual meaning: fill or shrink-wrap.
+ */
+export declare function resolveSize(width: ExtentSpec, height: ExtentSpec, aspectRatio: number | undefined, constraints: BoxConstraints): {
+    width?: number;
+    height?: number;
+    constraints: BoxConstraints;
+};
 /** The size an element resolves to and returns UP the tree. */
 export interface Size {
     width: number;

package/dist/layout/box-constraints.js

@@ -62,6 +62,16 @@ export class BoxConstraints {
     deflate(horizontal, vertical) {
         return new BoxConstraints(Math.max(0, this.minWidth - horizontal), Math.max(0, this.maxWidth - horizontal), Math.max(0, this.minHeight - vertical), Math.max(0, this.maxHeight - vertical));
     }
+    /**
+     * Tightens this box by an element's own `min`/`max` on either axis. A max never widens the offered
+     * room, and a min may push past it - `minHeight: 500` in a 300pt region means 500, and pagination
+     * deals with the overflow, the same answer CSS gives.
+     */
+    narrow(minWidth, maxWidth, minHeight, maxHeight) {
+        const lo = (own, current) => Math.max(current, own ?? 0);
+        const hi = (own, current) => own === undefined ? current : Math.min(current, own);
+        return new BoxConstraints(lo(minWidth, this.minWidth), Math.max(hi(maxWidth, this.maxWidth), lo(minWidth, this.minWidth)), lo(minHeight, this.minHeight), Math.max(hi(maxHeight, this.maxHeight), lo(minHeight, this.minHeight)));
+    }
     /** Returns the constraints clamped to lie within `parent` (Flutter's enforce). */
     enforce(parent) {
         return new BoxConstraints(Math.max(parent.minWidth, Math.min(this.minWidth, parent.maxWidth)), Math.max(parent.minWidth, Math.min(this.maxWidth, parent.maxWidth)), Math.max(parent.minHeight, Math.min(this.minHeight, parent.maxHeight)), Math.max(parent.minHeight, Math.min(this.maxHeight, parent.maxHeight)));
@@ -81,3 +91,65 @@ export function resolveExtent(fixed, factor, boundedMax, hasBounded) {
         return boundedMax * factor;
     return undefined;
 }
+/** Split `SizingParams` into the per-axis form `resolveSize` takes. */
+export function extentSpecs(p) {
+    return {
+        width: {
+            fixed: p.width,
+            factor: p.widthFactor,
+            min: p.minWidth,
+            minFactor: p.minWidthFactor,
+            max: p.maxWidth,
+            maxFactor: p.maxWidthFactor,
+        },
+        height: {
+            fixed: p.height,
+            factor: p.heightFactor,
+            min: p.minHeight,
+            minFactor: p.minHeightFactor,
+            max: p.maxHeight,
+            maxFactor: p.maxHeightFactor,
+        },
+    };
+}
+/**
+ * Resolve both axes of a sized element: relative sizing, then `aspectRatio`, then `min`/`max`.
+ *
+ * The order follows CSS: a ratio fills in the axis you left open, and min/max clamp afterwards - so an
+ * explicit bound wins over the ratio, exactly as `min-height` beats `aspect-ratio` in a browser.
+ *
+ * `min`/`max` also come back as NARROWED constraints, because an axis with no explicit size still has
+ * to obey them. `maxWidth` alone means "fill, but no wider than this", and the caller's own fill and
+ * shrink-wrap paths get that for free by using the returned constraints instead of the ones passed in.
+ * A `width` of `undefined` keeps its usual meaning: fill or shrink-wrap.
+ */
+export function resolveSize(width, height, aspectRatio, constraints) {
+    const bounds = constraints.narrow(resolveExtent(width.min, width.minFactor, constraints.maxWidth, constraints.hasBoundedWidth), resolveExtent(width.max, width.maxFactor, constraints.maxWidth, constraints.hasBoundedWidth), resolveExtent(height.min, height.minFactor, constraints.maxHeight, constraints.hasBoundedHeight), resolveExtent(height.max, height.maxFactor, constraints.maxHeight, constraints.hasBoundedHeight));
+    // Against the OFFERED box, not the narrowed one: `width: "50%"` with `maxWidth: 100` in a 400pt
+    // region is 200 capped to 100, not 50% of 100. The clamp below applies the bound.
+    let w = resolveExtent(width.fixed, width.factor, constraints.maxWidth, constraints.hasBoundedWidth);
+    let h = resolveExtent(height.fixed, height.factor, constraints.maxHeight, constraints.hasBoundedHeight);
+    if (aspectRatio !== undefined && aspectRatio > 0) {
+        if (w !== undefined && h === undefined)
+            h = w / aspectRatio;
+        else if (h !== undefined && w === undefined)
+            w = h * aspectRatio;
+        else if (w === undefined && h === undefined) {
+            // Neither axis pinned: take the offered width and let the ratio give the height (CSS block
+            // behaviour). Falls back to the height when only that axis is bounded.
+            if (bounds.hasBoundedWidth) {
+                w = bounds.maxWidth;
+                h = w / aspectRatio;
+            }
+            else if (bounds.hasBoundedHeight) {
+                h = bounds.maxHeight;
+                w = h * aspectRatio;
+            }
+        }
+    }
+    return {
+        width: w === undefined ? undefined : bounds.constrainWidth(w),
+        height: h === undefined ? undefined : bounds.constrainHeight(h),
+        constraints: bounds,
+    };
+}

package/dist/layout/insets.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Resolved and unresolved edge insets, on the LAYOUT side of the seam.
+ *
+ * The public `Insets` input (points, percentages, four shapes) lives in `api/insets.ts` and normalizes
+ * into the specs below - the same split `dimension.ts` and `box-constraints.ts` already use for sizes,
+ * so an element never sees a percentage string and the api layer never sees layout geometry.
+ */
+/** One side: an absolute point size, or a fraction of the available width. */
+export interface EdgeSpec {
+    points?: number;
+    factor?: number;
+}
+/**
+ * `[top, right, bottom, left]`, each still unresolved.
+ *
+ * A plain number is accepted as shorthand for `{ points: n }`: the engine elements are exported for
+ * power users and used to take four numbers, so requiring `{ points: 5 }` would break them for a
+ * feature they are not using.
+ */
+export type EdgeSpecs = [EdgeInput, EdgeInput, EdgeInput, EdgeInput];
+/** A side as given: points for short, or a spec when it may be a percentage. */
+export type EdgeInput = number | EdgeSpec;
+/**
+ * Turn the specs into points. `available` is the WIDTH the element was offered - a percentage resolves
+ * against the width on ALL FOUR sides, top and bottom included, which is the CSS rule (and Yoga's, so
+ * react-pdf agrees). An unbounded width leaves a percentage at 0, the no-op a percentage size gives.
+ */
+export declare function resolveEdges(specs: EdgeSpecs, available: number): [number, number, number, number];

package/dist/layout/insets.js

@@ -0,0 +1,20 @@
+/**
+ * Resolved and unresolved edge insets, on the LAYOUT side of the seam.
+ *
+ * The public `Insets` input (points, percentages, four shapes) lives in `api/insets.ts` and normalizes
+ * into the specs below - the same split `dimension.ts` and `box-constraints.ts` already use for sizes,
+ * so an element never sees a percentage string and the api layer never sees layout geometry.
+ */
+/**
+ * Turn the specs into points. `available` is the WIDTH the element was offered - a percentage resolves
+ * against the width on ALL FOUR sides, top and bottom included, which is the CSS rule (and Yoga's, so
+ * react-pdf agrees). An unbounded width leaves a percentage at 0, the no-op a percentage size gives.
+ */
+export function resolveEdges(specs, available) {
+    const one = (e) => {
+        if (typeof e === "number")
+            return e;
+        return (e.points ?? (e.factor !== undefined && Number.isFinite(available) ? available * e.factor : 0));
+    };
+    return [one(specs[0]), one(specs[1]), one(specs[2]), one(specs[3])];
+}

package/dist/layout/min-intrinsic.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `min-content` sizing - the smallest extent a subtree can be squeezed into and still hold together.
+ *
+ * The shrink pass in `FlexLayoutHelper` floors every child at this, so an overflowing line stops
+ * squeezing instead of grinding a paragraph down to one word per line. It is the same rule a browser
+ * applies through the automatic `min-width` of a flex item (CSS Flexbox 4.5).
+ *
+ * Only the leaves know a real number - a `Text` its longest word, everything else nothing in
+ * particular. These helpers are how a container folds its children's answers into its own.
+ */
+import type { LayoutContext } from "../elements/pdf-element.js";
+import type { PDFElement } from "../elements/pdf-element.js";
+/**
+ * The children's floor, folded along one axis: children laid out ALONG the queried axis have to fit
+ * side by side, so their floors add up (plus the gaps between them); across it they merely overlap,
+ * so the widest one wins.
+ *
+ * A wrapping stack adds up nothing: it may put every child on its own line, so it is only as wide as
+ * its widest child - which is what CSS says about a multi-line flex container too.
+ */
+export declare function stackMinIntrinsic(children: PDFElement[], gap: number, alongAxis: boolean, horizontal: boolean, ctx: LayoutContext, wraps?: boolean): number;
+/**
+ * Folds an element's own declared extent into the floor its content asks for. CSS calls these the
+ * "specified size suggestion" and the "content size suggestion" and takes the SMALLER: a box that
+ * declares 400pt around content needing 50 may still be squeezed to 50, while one declaring 400
+ * around content needing 500 cannot go below 400. An extent given as a fraction is not a suggestion
+ * at all - it has no size of its own until the parent is known - so it is ignored here.
+ */
+export declare function withDeclaredExtent(contentFloor: number, declared: number | undefined, explicitMin?: number): number;

package/dist/layout/min-intrinsic.js

@@ -0,0 +1,37 @@
+/**
+ * The children's floor, folded along one axis: children laid out ALONG the queried axis have to fit
+ * side by side, so their floors add up (plus the gaps between them); across it they merely overlap,
+ * so the widest one wins.
+ *
+ * A wrapping stack adds up nothing: it may put every child on its own line, so it is only as wide as
+ * its widest child - which is what CSS says about a multi-line flex container too.
+ */
+export function stackMinIntrinsic(children, gap, alongAxis, horizontal, ctx, wraps = false) {
+    const floors = children.map((c) => c.minIntrinsicMain(horizontal, ctx));
+    if (floors.length === 0)
+        return 0;
+    if (!alongAxis || wraps)
+        return Math.max(...floors);
+    return floors.reduce((sum, f) => sum + f, 0) + gap * (floors.length - 1);
+}
+/**
+ * Folds an element's own declared extent into the floor its content asks for. CSS calls these the
+ * "specified size suggestion" and the "content size suggestion" and takes the SMALLER: a box that
+ * declares 400pt around content needing 50 may still be squeezed to 50, while one declaring 400
+ * around content needing 500 cannot go below 400. An extent given as a fraction is not a suggestion
+ * at all - it has no size of its own until the parent is known - so it is ignored here.
+ */
+export function withDeclaredExtent(contentFloor, declared, explicitMin) {
+    // An explicit `minWidth`/`minHeight` REPLACES the automatic minimum - it does not compete with it.
+    // CSS applies the automatic minimum only while `min-width` is `auto`, so a smaller explicit value
+    // wins too: `min-width: 0` is the standard way to let a flex item shrink past its longest word, and
+    // taking the larger of the two would quietly ignore it. Measured in Chrome on one long word in a
+    // 200pt line: 132.08pt with `auto`, 84.64pt with `0`.
+    if (explicitMin !== undefined)
+        return explicitMin;
+    // Without an explicit bound the floor is CSS's content-based minimum: the smaller of what the
+    // element declares and what its content actually needs. It matters because the shrink pass must not
+    // aim below a size the child will refuse - the share it was supposed to give would never arrive,
+    // and the line would stay over its width.
+    return declared === undefined ? contentFloor : Math.min(declared, contentFloor);
+}

package/dist/renderer/anchor-renderer.js

@@ -3,7 +3,7 @@ export class AnchorRenderer {
     static async render(element, objectManager) {
         const { name, child, y } = element.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        const childNodes = renderer ? await renderer(child, objectManager) : [];
+        const childNodes = await renderer(child, objectManager);
         // The child draws normally; an Anchor IR node carries the name + scroll target for the page renderer
         // to register as a named destination (it produces no content-stream ops itself).
         return [...childNodes, { type: "anchor", y, name }];

package/dist/renderer/bookmark-renderer.js

@@ -3,7 +3,7 @@ export class BookmarkRenderer {
     static async render(element, objectManager) {
         const { title, level, child, y } = element.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        const childNodes = renderer ? await renderer(child, objectManager) : [];
+        const childNodes = await renderer(child, objectManager);
         // The child draws normally; an Outline IR node carries the title + nesting + scroll target for the
         // page renderer to collect into the /Outlines tree (it produces no content-stream ops itself).
         return [...childNodes, { type: "outline", y, title, level }];

package/dist/renderer/canvas-renderer.d.ts

@@ -0,0 +1,14 @@
+import { PDFObjectManager } from "../utils/pdf-object-manager.js";
+import { CanvasElement } from "../elements/canvas-element.js";
+import type { IRNode } from "../ir/display-list.js";
+/**
+ * Runs the caller's paint callback and hands back what it drew.
+ *
+ * The painter works in CANVAS coordinates (0,0 is the box's own corner), so the whole drawing is
+ * wrapped in one translate rather than every point being offset - the same shape `Svg` uses, and it
+ * keeps the callback independent of where the box ended up. The clip is the box: a drawing that runs
+ * past its own edge would otherwise bleed into the layout beside it.
+ */
+export declare class CanvasRenderer {
+    static render(element: CanvasElement, objectManager: PDFObjectManager): Promise<IRNode[]>;
+}

package/dist/renderer/canvas-renderer.js

@@ -0,0 +1,36 @@
+import { CanvasPainter } from "../canvas/painter.js";
+/**
+ * Runs the caller's paint callback and hands back what it drew.
+ *
+ * The painter works in CANVAS coordinates (0,0 is the box's own corner), so the whole drawing is
+ * wrapped in one translate rather than every point being offset - the same shape `Svg` uses, and it
+ * keeps the callback independent of where the box ended up. The clip is the box: a drawing that runs
+ * past its own edge would otherwise bleed into the layout beside it.
+ */
+export class CanvasRenderer {
+    static async render(element, objectManager) {
+        const { x, y, width, height, paint, alt } = element.getProps();
+        // The layout bounds are kept as plain numbers, and the painter and the callback each get their
+        // OWN size object. Sharing one meant a callback that wrote to `size.width` moved the clip away
+        // from the box layout had reserved - the drawing would then bleed into what sits beside it.
+        const w = width ?? 0;
+        const h = height ?? 0;
+        const painter = new CanvasPainter({ width: w, height: h });
+        paint(painter, { width: w, height: h });
+        const drawn = painter.drawn();
+        const nodes = [
+            { type: "clip-push", x: x ?? 0, y: y ?? 0, width: w, height: h },
+            { type: "transform-push", matrix: [1, 0, 0, 1, x ?? 0, y ?? 0] },
+            ...drawn,
+            { type: "transform-pop" },
+            { type: "clip-pop" },
+        ];
+        if (!alt || !objectManager.struct.enabled)
+            return nodes;
+        const tag = {
+            role: "Figure",
+            key: objectManager.struct.openElement(element.structId, "Figure", { alt }),
+        };
+        return nodes.map((node) => (node.type === "path" ? { ...node, tag } : node));
+    }
+}

package/dist/renderer/container-renderer.js

@@ -6,9 +6,7 @@ export class ContainerRenderer {
         if (children)
             for (const child of children) {
                 const renderer = RendererRegistry.getRenderer(child);
-                if (renderer) {
-                    nodes.push(...(await renderer(child, objectManager)));
-                }
+                nodes.push(...(await renderer(child, objectManager)));
             }
         return nodes;
     }

package/dist/renderer/default-text-style-renderer.js

@@ -5,6 +5,6 @@ export class DefaultTextStyleRenderer {
     static async render(element, objectManager) {
         const { child } = element.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        return renderer ? await renderer(child, objectManager) : [];
+        return renderer(child, objectManager);
     }
 }

package/dist/renderer/deferred-renderer.js

@@ -5,6 +5,6 @@ export class DeferredRenderer {
         if (!composed)
             return [];
         const renderer = RendererRegistry.getRenderer(composed);
-        return renderer ? renderer(composed, objectManager) : [];
+        return renderer(composed, objectManager);
     }
 }

package/dist/renderer/expanded-renderer.js

@@ -3,6 +3,6 @@ export class ExpandedRenderer {
     static async render(expandedElement, objectManager) {
         const { child } = expandedElement.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        return renderer ? await renderer(child, objectManager) : [];
+        return renderer(child, objectManager);
     }
 }

package/dist/renderer/image-renderer.js

@@ -1,6 +1,7 @@
 import { BoxFit } from "../elements/image-element.js";
 import { bytesFromLatin1 } from "../utils/bytes.js";
 import { applyContainFit, applyCoverFit, applyFillFit, applyFitNone, decodePngToRgbFlate, } from "../utils/image-helper.js";
+import { isRounded } from "../ir/display-list.js";
 export class ImageRenderer {
     static async render(imageElement, objectManager) {
         // Load the image and convert it in a binary string
@@ -56,7 +57,7 @@ export class ImageRenderer {
         }
         // A radius rounds the image BOX (the element frame), so it clips to that frame too -
         // independent of the cover/contain overflow clip.
-        const wantsClip = mustCreateOverflowContainer || (radius ?? 0) > 0;
+        const wantsClip = mustCreateOverflowContainer || isRounded(radius);
         // The fitted geometry becomes a display-list primitive; the backend registers
         // the XObject and emits the placement (+ clip, rounded when a radius is set).
         const node = {

package/dist/renderer/index.d.ts

@@ -8,3 +8,5 @@ export * from "./text-renderer.js";
 export * from "./expanded-renderer.js";
 export * from "./line-renderer.js";
 export * from "./row-renderer.js";
+export * from "./svg-renderer.js";
+export * from "./canvas-renderer.js";

package/dist/renderer/index.js

@@ -8,3 +8,5 @@ export * from "./text-renderer.js";
 export * from "./expanded-renderer.js";
 export * from "./line-renderer.js";
 export * from "./row-renderer.js";
+export * from "./svg-renderer.js";
+export * from "./canvas-renderer.js";

package/dist/renderer/keep-together-renderer.js

@@ -7,6 +7,6 @@ export class KeepTogetherRenderer {
     static async render(group, objectManager) {
         const { child } = group.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        return renderer ? await renderer(child, objectManager) : [];
+        return renderer(child, objectManager);
     }
 }

package/dist/renderer/link-renderer.js

@@ -3,7 +3,7 @@ export class LinkRenderer {
     static async render(element, objectManager) {
         const { href, dest, child, x, y, width, height } = element.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        const childNodes = renderer ? await renderer(child, objectManager) : [];
+        const childNodes = await renderer(child, objectManager);
         // The child draws normally; a Link IR node carries the clickable rect + target (external href or
         // internal dest) for the page renderer to emit as a /Link annotation (no content-stream ops itself).
         return [...childNodes, { type: "link", x, y, width, height, href, dest }];

package/dist/renderer/padding-renderer.js

@@ -3,6 +3,6 @@ export class PaddingRenderer {
     static async render(paddingElement, objectManager) {
         const { child } = paddingElement.getProps();
         const renderer = RendererRegistry.getRenderer(child);
-        return renderer ? await renderer(child, objectManager) : [];
+        return renderer(child, objectManager);
     }
 }

package/dist/renderer/page-builder-renderer.js

@@ -6,6 +6,6 @@ export class PageBuilderRenderer {
         if (!composed)
             return [];
         const renderer = RendererRegistry.getRenderer(composed);
-        return renderer ? renderer(composed, objectManager) : [];
+        return renderer(composed, objectManager);
     }
 }

package/dist/renderer/page-renderer.js

@@ -21,9 +21,7 @@ export class PageRenderer {
         const nodes = [];
         for (const element of renderables) {
             const renderer = RendererRegistry.getRenderer(element);
-            if (renderer) {
-                nodes.push(...(await renderer(element, objectManager)));
-            }
+            nodes.push(...(await renderer(element, objectManager)));
         }
         // Accessible tagging: one struct context per page (allocates its StructParents index), threaded into
         // serialize so each drawable node is wrapped in marked content. Undefined = tagging off (byte-identical).