@jasy/pdf 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/api/content.d.ts

@@ -2,6 +2,7 @@ import { ImageElement, CustomImage } from "../elements/image-element.js";
 import { PDFElement } from "../elements/pdf-element.js";
 import { ColorInput } from "./color.js";
 import { Insets } from "./insets.js";
+import { SizeInput } from "./dimension.js";
 /** A horizontal rule (locked §4). */
 export interface DividerOptions {
     /** Line color (default a light gray). */
@@ -22,9 +23,11 @@ export type ImageSource = string | Uint8Array | CustomImage;
 /** How the image fills its box (locked §4). Mirrors CSS `object-fit`. */
 export type ImageFit = "none" | "contain" | "cover" | "fill";
 export interface ImageOptions {
-    width?: number;
-    height?: number;
-    /** Fit within the box (default `none`). */
+    /** Size on each axis: points (fixed) or a percentage string like `"50%"` (a fraction of the offered
+     *  space). Pin exactly ONE axis and the other follows the image's aspect ratio (CSS `height: auto`). */
+    width?: SizeInput;
+    height?: SizeInput;
+    /** Fit within the box (default `none`; `fill` when exactly one axis is pinned so it scales to fit). */
     fit?: ImageFit;
     /** Corner radius in points (rounds the image box). */
     radius?: number;

package/dist/api/content.js

@@ -3,6 +3,7 @@ import { PaddingElement } from "../elements/layout/padding-element.js";
 import { ImageElement, CustomLocalImage, CustomBytesImage, BoxFit, } from "../elements/image-element.js";
 import { toColor } from "./color.js";
 import { toEdges } from "./insets.js";
+import { toDimension } from "./dimension.js";
 const DEFAULT_DIVIDER_COLOR = "lightgray";
 const DEFAULT_DIVIDER_MARGIN = { y: 6 };
 /**
@@ -35,15 +36,23 @@ const FIT = {
  * `CustomImage` for non-filesystem sources. Maps to an `ImageElement`.
  */
 export function Image(src, opts = {}) {
+    const w = opts.width !== undefined ? toDimension(opts.width) : undefined;
+    const h = opts.height !== undefined ? toDimension(opts.height) : undefined;
+    // Exactly one axis pinned -> the other is derived from the aspect ratio, so scale the image to the
+    // resulting box (fit: fill). Both or neither pinned keeps the default fit (none).
+    const autoScale = (opts.width !== undefined) !== (opts.height !== undefined);
+    const fit = opts.fit ? FIT[opts.fit] : autoScale ? BoxFit.fill : undefined;
     return new ImageElement({
         image: typeof src === "string"
             ? new CustomLocalImage(src)
             : src instanceof Uint8Array
                 ? new CustomBytesImage(src)
                 : src,
-        width: opts.width,
-        height: opts.height,
-        fit: opts.fit ? FIT[opts.fit] : undefined,
+        width: w?.points,
+        height: h?.points,
+        widthFactor: w?.factor,
+        heightFactor: h?.factor,
+        fit,
         radius: opts.radius,
         alt: opts.alt,
     });

package/dist/api/descriptor.js

@@ -1,7 +1,8 @@
 import { Text, Paragraph, span } from "./text.js";
-import { Column, Row, Box, Padding, Spacer, Expanded, Positioned } from "./layout.js";
+import { Column, Row, Box, Padding, Spacer, Expanded, Positioned, Link, Anchor, Bookmark, Rotated, RotatedBox, } from "./layout.js";
 import { Divider, Image } from "./content.js";
 import { Page, Document, DefaultTextStyle } from "./structure.js";
+import { PageNumber, PageCount } from "./page-builder.js";
 import { Table } from "./table.js";
 // Element children (Column/Row/Box/Page/…) → built recursively. Text/Paragraph children are
 // strings or `span` descriptors and become content instead.
@@ -50,6 +51,14 @@ function slotElement(node) {
     const els = (node.children ?? []).map((c) => (typeof c === "string" ? Text(c) : build(c)));
     return els.length === 1 ? els[0] : Column(els);
 }
+// The single child a wrapper takes (`Link`, `Anchor`, `Bookmark`, `Rotated`, ...). Several children are
+// stacked in a Column, so `<JasyLink><Text/><Text/></JasyLink>` behaves like the factory would.
+function wrappedChild(children) {
+    const els = children.map((c) => (typeof c === "string" ? Text(c) : build(c)));
+    if (els.length === 0)
+        throw new Error("A wrapper element needs exactly one child");
+    return els.length === 1 ? els[0] : Column(els);
+}
 const REGISTRY = {
     document: (props, children) => {
         const doc = Document(props, elementChildren(children));
@@ -89,6 +98,18 @@ const REGISTRY = {
     },
     positioned: (props, children) => Positioned(props, elementChildren(children)[0]),
     "default-text-style": (props, children) => DefaultTextStyle(props, elementChildren(children)),
+    // Navigation. `Link` takes exactly one of `href` (a URL) or `to` (an `Anchor` name) - the factory
+    // enforces that, so a template typo surfaces as an error instead of a dead link.
+    link: (props, children) => Link(props, wrappedChild(children)),
+    anchor: (props, children) => Anchor(props, wrappedChild(children)),
+    bookmark: (props, children) => Bookmark(props, wrappedChild(children)),
+    // Transforms.
+    rotated: (props, children) => Rotated(props, wrappedChild(children)),
+    "rotated-box": (props, children) => RotatedBox(props, wrappedChild(children)),
+    // Page numbers. `PageBuilder` itself is deliberately NOT exposed: it takes a closure, which a template
+    // cannot express. These two cover what the closure exists for.
+    "page-number": (props) => PageNumber(props),
+    "page-count": (props) => PageCount(props),
 };
 /**
  * Registers a custom element type, so a binding (or a user-defined component) can introduce

package/dist/api/dimension.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Size input for a Box's `width` / `height` (relative sizing). Either a number of PDF points (a
+ * fixed size) or a percentage string like `"50%"` - a fraction of the space the parent offers on
+ * that axis. Every form normalizes to a `Dimension` via `toDimension`, so the engine only ever sees
+ * points and factors, never a string. A percentage resolves against the parent's offered extent, so
+ * it only has meaning inside a bounded region (a fraction of an unbounded axis is a no-op).
+ */
+export type SizeInput = number | `${number}%`;
+/** A resolved `SizeInput`: exactly one of an absolute point size or a 0..1 fraction of the parent. */
+export interface Dimension {
+    /** Absolute size in PDF points. */
+    points?: number;
+    /** Fraction of the parent's offered extent on this axis; a `"50%"` input is `0.5`. */
+    factor?: number;
+}
+/**
+ * Normalizes a `SizeInput` to a `Dimension` (a point size or a fraction). Rejects negatives at this
+ * boundary so `resolveExtent` and the layout never see a negative size.
+ */
+export declare function toDimension(value: SizeInput): Dimension;

package/dist/api/dimension.js

@@ -0,0 +1,16 @@
+const PERCENT = /^(\d+(?:\.\d+)?)%$/; // no leading "-": a size cannot be negative
+/**
+ * Normalizes a `SizeInput` to a `Dimension` (a point size or a fraction). Rejects negatives at this
+ * boundary so `resolveExtent` and the layout never see a negative size.
+ */
+export function toDimension(value) {
+    if (typeof value === "number") {
+        if (value < 0)
+            throw new Error(`Invalid size ${value}: a size cannot be negative.`);
+        return { points: value };
+    }
+    const m = PERCENT.exec(value.trim());
+    if (m)
+        return { factor: parseFloat(m[1]) / 100 };
+    throw new Error(`Invalid size "${value}": use a number of points or a percentage like "50%".`);
+}

package/dist/api/index.d.ts

@@ -1,8 +1,10 @@
 export * from "./color.js";
 export * from "./insets.js";
+export * from "./dimension.js";
 export * from "./text.js";
 export * from "./layout.js";
 export * from "./content.js";
+export * from "./page-builder.js";
 export * from "./structure.js";
 export * from "./table.js";
 export * from "./descriptor.js";

package/dist/api/index.js

@@ -3,9 +3,11 @@
 // core classes stay untouched and remain exported for power users.
 export * from "./color.js";
 export * from "./insets.js";
+export * from "./dimension.js";
 export * from "./text.js";
 export * from "./layout.js";
 export * from "./content.js";
+export * from "./page-builder.js";
 export * from "./structure.js";
 export * from "./table.js";
 export * from "./descriptor.js";

package/dist/api/layout.d.ts

@@ -4,10 +4,16 @@ import { RectangleElement } from "../elements/rectangle-element.js";
 import { ExpandedElement } from "../elements/layout/expanded-element.js";
 import { PaddingElement } from "../elements/layout/padding-element.js";
 import { PositionedElement, PositionedInsets } from "../elements/layout/positioned-element.js";
+import { LinkElement } from "../elements/layout/link-element.js";
+import { BookmarkElement } from "../elements/layout/bookmark-element.js";
+import { AnchorElement } from "../elements/layout/anchor-element.js";
+import { RotatedElement } from "../elements/layout/rotated-element.js";
+import { RotatedBoxElement } from "../elements/layout/rotated-box-element.js";
 import { PDFElement } from "../elements/pdf-element.js";
 import { MainAlign, CrossAlign } from "../utils/flex-layout.js";
 import { ColorInput } from "./color.js";
 import { Insets } from "./insets.js";
+import { SizeInput } from "./dimension.js";
 /** Options shared by the `Column` and `Row` stacks (locked §4). */
 export interface StackOptions {
     /** Space inserted between children, in points. */
@@ -17,6 +23,11 @@ export interface StackOptions {
     justify?: MainAlign;
     /** Position across the axis (CSS `align-items`): start (default) · center · end · stretch. */
     align?: CrossAlign;
+    /** Size on each axis: points (fixed) or a percentage string like `"50%"` (a fraction of the offered
+     *  space). Omit to fill the offered width / shrink-wrap to the children. A percentage needs a bounded
+     *  axis (`height: "50%"` only resolves where the parent bounds the height). */
+    width?: SizeInput;
+    height?: SizeInput;
 }
 /** A vertical stack. `Column(children)` or `Column(opts, children)`. */
 export declare function Column(children: PDFElement[]): ContainerElement;
@@ -41,9 +52,11 @@ export interface BoxOptions {
     bg?: ColorInput;
     /** Inner padding between the border and the children. */
     padding?: Insets;
-    /** Fixed size; omit to fill the offered width and shrink-wrap the height. */
-    width?: number;
-    height?: number;
+    /** Size on each axis: a number of points (fixed) or a percentage string like `"50%"` (a fraction
+     *  of the space the parent offers on that axis). Omit `width` to fill the offered width, omit
+     *  `height` to shrink-wrap the content. A percentage only resolves in a bounded region. */
+    width?: SizeInput;
+    height?: SizeInput;
     /** Corner radius in points. */
     radius?: number;
     /** Make this box a positioning frame: `Positioned` children placed inside it resolve their
@@ -70,6 +83,55 @@ export declare function Padding(padding: Insets, child: PDFElement): PaddingElem
  * end-aligned with a pixel offset. An edge wins over an anchor on the same axis.
  */
 export declare function Positioned(opts: PositionedInsets, child: PDFElement): PositionedElement;
+/**
+ * Makes any `child` a clickable hyperlink - the child's whole box is the clickable region (an image, a
+ * box, a row). Pass `href` for an external URL, or `to` for an internal jump to an `Anchor({ name })`
+ * elsewhere in the document (e.g. a clickable table-of-contents row). Exactly one of the two. The link
+ * draws nothing itself, so style the child - e.g. `Link({ href }, Text("jasy.dev", { color: "#1450aa" }))`
+ * or `Link({ to: "chapter-2" }, Text("Chapter 2 ....... 5"))`. For a link on part of a line, put `href`/
+ * `to` on a `span` instead (`Text([span("Visit "), span("jasy.dev", { href })])`), linking just that run.
+ */
+export declare function Link(opts: {
+    href?: string;
+    to?: string;
+}, child: PDFElement): LinkElement;
+/**
+ * Marks `child` as a named jump target that an internal `Link({ to: name })` can point at (a table of
+ * contents linking to sections, cross-references). Layout-transparent: `child` renders exactly as it
+ * would on its own, on whatever page it lands on. `name` must match the link's `to`.
+ * `Anchor({ name: "chapter-2" }, Text("Chapter 2", { size: 24 }))`.
+ */
+export declare function Anchor(opts: {
+    name: string;
+}, child: PDFElement): AnchorElement;
+/**
+ * Adds a bookmark to the document outline (the viewer's sidebar) that jumps to `child`. `title` is the
+ * label; `level` (1-based, default 1) nests it - a `level: 2` bookmark hangs under the nearest preceding
+ * `level: 1`, so you get a collapsible tree (chapters -> sections). It is layout-transparent: `child`
+ * renders exactly as it would on its own. `Bookmark({ title: "Chapter 2", level: 1 }, Text("Chapter 2"))`.
+ */
+export declare function Bookmark(opts: {
+    title: string;
+    level?: number;
+}, child: PDFElement): BookmarkElement;
+/**
+ * Rotates `child` at PAINT time by `angle` degrees (clockwise), around its center - like CSS
+ * `transform: rotate()` / Flutter `Transform.rotate`. The child keeps its normal, unrotated layout box,
+ * so siblings do NOT reflow around the spun shape and the drawing may overflow its slot. Pair it with a
+ * `relative` Box + `Positioned` for a diagonal watermark or a "PAID" stamp laid over a document.
+ */
+export declare function Rotated(opts: {
+    angle: number;
+}, child: PDFElement): RotatedElement;
+/**
+ * Rotates `child` by whole quarter-turns and, unlike `Rotated`, is LAYOUT-AWARE: a 90 / 270 turn swaps
+ * the box's width and height so siblings reflow around it (a tall label becomes a narrow, tall strip
+ * that reserves exactly that footprint). `turns` = clockwise 90-degree steps (1 = 90, 2 = 180, 3 = 270).
+ * Use it for a vertical label beside a table; use `Rotated` for a free-angle stamp / watermark.
+ */
+export declare function RotatedBox(opts: {
+    turns: number;
+}, child: PDFElement): RotatedBoxElement;
 /**
  * A flexible empty gap that pushes its siblings apart - `Row([a, Spacer(), b])` sends `a`
  * and `b` to the edges. `flex` weights it against other flex children (default 1).

package/dist/api/layout.js

@@ -4,9 +4,21 @@ import { RectangleElement } from "../elements/rectangle-element.js";
 import { ExpandedElement } from "../elements/layout/expanded-element.js";
 import { PaddingElement } from "../elements/layout/padding-element.js";
 import { PositionedElement } from "../elements/layout/positioned-element.js";
+import { LinkElement } from "../elements/layout/link-element.js";
+import { BookmarkElement } from "../elements/layout/bookmark-element.js";
+import { AnchorElement } from "../elements/layout/anchor-element.js";
+import { RotatedElement } from "../elements/layout/rotated-element.js";
+import { RotatedBoxElement } from "../elements/layout/rotated-box-element.js";
 import { toColor } from "./color.js";
 import { toEdges } from "./insets.js";
+import { toDimension } from "./dimension.js";
 import { splitArgs } from "./args.js";
+/** Splits `StackOptions` width/height into the fixed points + fraction the stack elements expect. */
+function stackSize(opts) {
+    const w = opts.width !== undefined ? toDimension(opts.width) : undefined;
+    const h = opts.height !== undefined ? toDimension(opts.height) : undefined;
+    return { width: w?.points, height: h?.points, widthFactor: w?.factor, heightFactor: h?.factor };
+}
 // The public default for `cross` is `start` (locked §5) - i.e. don't stretch a child unless
 // asked. The engine default is `stretch`; the factory sets the friendlier public one.
 const DEFAULT_CROSS = "start";
@@ -19,6 +31,7 @@ export function Column(a, b) {
         gap: opts.gap,
         main: opts.justify, // undefined → engine default `start` (matches §5)
         cross: opts.align ?? DEFAULT_CROSS,
+        ...stackSize(opts),
     });
 }
 export function Row(a, b) {
@@ -28,6 +41,7 @@ export function Row(a, b) {
         gap: opts.gap,
         main: opts.justify,
         cross: opts.align ?? DEFAULT_CROSS,
+        ...stackSize(opts),
     });
 }
 export function Box(a, b) {
@@ -49,6 +63,9 @@ export function Box(a, b) {
         return c !== undefined ? toColor(c) : undefined;
     };
     const hasBorder = opts.border !== undefined || opts.borderWidth !== undefined || hasPerSide;
+    // A point size fills `width`/`height`; a percentage fills `widthFactor`/`heightFactor`.
+    const w = opts.width !== undefined ? toDimension(opts.width) : undefined;
+    const h = opts.height !== undefined ? toDimension(opts.height) : undefined;
     return new RectangleElement({
         x: 0,
         y: 0,
@@ -56,8 +73,10 @@ export function Box(a, b) {
         color: opts.border !== undefined ? toColor(opts.border) : undefined,
         backgroundColor: opts.bg !== undefined ? toColor(opts.bg) : undefined,
         borderWidth: hasBorder ? (opts.borderWidth ?? 1) : 0,
-        width: opts.width,
-        height: opts.height,
+        width: w?.points,
+        height: h?.points,
+        widthFactor: w?.factor,
+        heightFactor: h?.factor,
         radius: opts.radius,
         sideBorders: hasPerSide
             ? {
@@ -85,6 +104,56 @@ export function Padding(padding, child) {
 export function Positioned(opts, child) {
     return new PositionedElement({ child, ...opts });
 }
+/**
+ * Makes any `child` a clickable hyperlink - the child's whole box is the clickable region (an image, a
+ * box, a row). Pass `href` for an external URL, or `to` for an internal jump to an `Anchor({ name })`
+ * elsewhere in the document (e.g. a clickable table-of-contents row). Exactly one of the two. The link
+ * draws nothing itself, so style the child - e.g. `Link({ href }, Text("jasy.dev", { color: "#1450aa" }))`
+ * or `Link({ to: "chapter-2" }, Text("Chapter 2 ....... 5"))`. For a link on part of a line, put `href`/
+ * `to` on a `span` instead (`Text([span("Visit "), span("jasy.dev", { href })])`), linking just that run.
+ */
+export function Link(opts, child) {
+    if ((opts.href === undefined) === (opts.to === undefined)) {
+        throw new Error("Link needs exactly one of `href` (external URL) or `to` (internal Anchor name).");
+    }
+    return new LinkElement({ href: opts.href, dest: opts.to, child });
+}
+/**
+ * Marks `child` as a named jump target that an internal `Link({ to: name })` can point at (a table of
+ * contents linking to sections, cross-references). Layout-transparent: `child` renders exactly as it
+ * would on its own, on whatever page it lands on. `name` must match the link's `to`.
+ * `Anchor({ name: "chapter-2" }, Text("Chapter 2", { size: 24 }))`.
+ */
+export function Anchor(opts, child) {
+    return new AnchorElement({ name: opts.name, child });
+}
+/**
+ * Adds a bookmark to the document outline (the viewer's sidebar) that jumps to `child`. `title` is the
+ * label; `level` (1-based, default 1) nests it - a `level: 2` bookmark hangs under the nearest preceding
+ * `level: 1`, so you get a collapsible tree (chapters -> sections). It is layout-transparent: `child`
+ * renders exactly as it would on its own. `Bookmark({ title: "Chapter 2", level: 1 }, Text("Chapter 2"))`.
+ */
+export function Bookmark(opts, child) {
+    return new BookmarkElement({ title: opts.title, level: opts.level, child });
+}
+/**
+ * Rotates `child` at PAINT time by `angle` degrees (clockwise), around its center - like CSS
+ * `transform: rotate()` / Flutter `Transform.rotate`. The child keeps its normal, unrotated layout box,
+ * so siblings do NOT reflow around the spun shape and the drawing may overflow its slot. Pair it with a
+ * `relative` Box + `Positioned` for a diagonal watermark or a "PAID" stamp laid over a document.
+ */
+export function Rotated(opts, child) {
+    return new RotatedElement({ angle: opts.angle, child });
+}
+/**
+ * Rotates `child` by whole quarter-turns and, unlike `Rotated`, is LAYOUT-AWARE: a 90 / 270 turn swaps
+ * the box's width and height so siblings reflow around it (a tall label becomes a narrow, tall strip
+ * that reserves exactly that footprint). `turns` = clockwise 90-degree steps (1 = 90, 2 = 180, 3 = 270).
+ * Use it for a vertical label beside a table; use `Rotated` for a free-angle stamp / watermark.
+ */
+export function RotatedBox(opts, child) {
+    return new RotatedBoxElement({ turns: opts.turns, child });
+}
 /**
  * A flexible empty gap that pushes its siblings apart - `Row([a, Spacer(), b])` sends `a`
  * and `b` to the edges. `flex` weights it against other flex children (default 1).

package/dist/api/page-builder.d.ts

@@ -0,0 +1,32 @@
+import { PageBuilderElement } from "../elements/layout/page-builder-element.js";
+import { PageInfo, PDFElement } from "../elements/pdf-element.js";
+import { TextOptions } from "./text.js";
+export type { PageInfo };
+/**
+ * Builds content from the page it ends up on - this is how you show `pageNumber` / `pageCount`. Place it
+ * anywhere: in a `Page`'s `header`/`footer`, in the body, in a table cell, several times on one page.
+ * Because you write the closure, formatting and conditions are yours:
+ *
+ * ```ts
+ * PageBuilder(({ pageNumber, pageCount }) => Text(`Seite ${pageNumber} von ${pageCount}`))
+ * PageBuilder(({ pageNumber }) => (pageNumber === 1 ? Logo() : Text("Fortsetzung")))
+ * PageBuilder(({ pageNumber, pageCount }) => Text(`${pageNumber - 1} / ${pageCount - 1}`)) // cover page
+ * ```
+ *
+ * `pageNumber` is 1-based and counts PHYSICAL pages (an overflowing `Page` contributes several);
+ * `pageCount` is the document total; `pageSize` is the media box in points.
+ *
+ * The numbers themselves are always exact. Two sizing caveats, both from the same chicken-and-egg (the
+ * content decides the count that the content displays): in the flowing BODY the box is reserved before the
+ * total is known, so a much wider final string can paint slightly past it; and a conditional header may
+ * SHRINK on later pages but must not GROW, because the body band was measured against the first build.
+ */
+export declare function PageBuilder(build: (info: PageInfo) => PDFElement): PageBuilderElement;
+/** `Text` options plus an `offset` added to the number (e.g. `-1` to not count a cover page). */
+export interface PageNumberOptions extends TextOptions {
+    offset?: number;
+}
+/** The current page number as text. Sugar for `PageBuilder` - same thing, one word. */
+export declare function PageNumber({ offset, ...style }?: PageNumberOptions): PageBuilderElement;
+/** The document's total page count as text. Sugar for `PageBuilder`. */
+export declare function PageCount({ offset, ...style }?: PageNumberOptions): PageBuilderElement;

package/dist/api/page-builder.js

@@ -0,0 +1,32 @@
+import { PageBuilderElement } from "../elements/layout/page-builder-element.js";
+import { Text } from "./text.js";
+/**
+ * Builds content from the page it ends up on - this is how you show `pageNumber` / `pageCount`. Place it
+ * anywhere: in a `Page`'s `header`/`footer`, in the body, in a table cell, several times on one page.
+ * Because you write the closure, formatting and conditions are yours:
+ *
+ * ```ts
+ * PageBuilder(({ pageNumber, pageCount }) => Text(`Seite ${pageNumber} von ${pageCount}`))
+ * PageBuilder(({ pageNumber }) => (pageNumber === 1 ? Logo() : Text("Fortsetzung")))
+ * PageBuilder(({ pageNumber, pageCount }) => Text(`${pageNumber - 1} / ${pageCount - 1}`)) // cover page
+ * ```
+ *
+ * `pageNumber` is 1-based and counts PHYSICAL pages (an overflowing `Page` contributes several);
+ * `pageCount` is the document total; `pageSize` is the media box in points.
+ *
+ * The numbers themselves are always exact. Two sizing caveats, both from the same chicken-and-egg (the
+ * content decides the count that the content displays): in the flowing BODY the box is reserved before the
+ * total is known, so a much wider final string can paint slightly past it; and a conditional header may
+ * SHRINK on later pages but must not GROW, because the body band was measured against the first build.
+ */
+export function PageBuilder(build) {
+    return new PageBuilderElement({ build });
+}
+/** The current page number as text. Sugar for `PageBuilder` - same thing, one word. */
+export function PageNumber({ offset = 0, ...style } = {}) {
+    return PageBuilder(({ pageNumber }) => Text(String(pageNumber + offset), style));
+}
+/** The document's total page count as text. Sugar for `PageBuilder`. */
+export function PageCount({ offset = 0, ...style } = {}) {
+    return PageBuilder(({ pageCount }) => Text(String(pageCount + offset), style));
+}

package/dist/api/text.d.ts

@@ -11,6 +11,12 @@ export interface TextStyle {
     bold?: boolean;
     italic?: boolean;
     color?: ColorInput;
+    /** External URL - makes this run an inline hyperlink (a /Link annotation over its glyphs). On a
+     *  `span` it links just that run; on a whole `Text` (plain string) it links the whole text. */
+    href?: string;
+    /** Internal jump target - the `name` of an `Anchor` elsewhere in the document (like `href`, but a
+     *  same-document /GoTo instead of a URL). Use for a clickable table of contents / cross-reference. */
+    to?: string;
 }
 export interface TextOptions extends TextStyle {
     /** Text-internal alignment (left/center/right) - independent of a parent's `cross` (§5). */

package/dist/api/text.js

@@ -17,6 +17,26 @@ const ALIGN = {
     center: HorizontalAlignment.center,
     right: HorizontalAlignment.right,
 };
+/**
+ * Validates a font `size` (a number of points). Rejects anything that would silently become a NaN
+ * height deep in layout - notably `Document({ size: "A4" })`, where `"A4"` is the PAGE size and belongs
+ * on `Page`, not a font size. `undefined` passes through (unset = inherit the cascade).
+ */
+function toFontSize(size) {
+    if (size === undefined)
+        return undefined;
+    if (typeof size !== "number" || !Number.isFinite(size) || size <= 0) {
+        // Quote a string so "A4" reads as a string; show a bare number/NaN as-is (JSON turns NaN into null).
+        const shown = typeof size === "string" ? JSON.stringify(size) : String(size);
+        // The Page-vs-font-size mix-up only happens with a string like "A4"; for a plain bad number
+        // (NaN, negative, 0) the hint would just be noise, so keep the message generic there.
+        const hint = typeof size === "string"
+            ? ` Note: the page size goes on Page({ size: "A4" }), not on Document or Text.`
+            : "";
+        throw new Error(`Invalid font size ${shown} (expected a positive number of points).${hint}`);
+    }
+    return size;
+}
 /**
  * An inline run for mixed-style `Text` (`Text([span("a", {bold:true}), span("b")])`). Each
  * field overrides the enclosing `Text`'s defaults for just this run; omitted fields inherit.
@@ -24,12 +44,14 @@ const ALIGN = {
 export function span(text, style = {}) {
     return {
         content: text,
-        fontSize: style.size,
+        fontSize: toFontSize(style.size),
         fontFamily: style.font,
         fontStyle: style.bold !== undefined || style.italic !== undefined
             ? toFontStyle(style.bold, style.italic)
             : undefined,
         fontColor: style.color !== undefined ? toColor(style.color) : undefined,
+        href: style.href,
+        dest: style.to,
     };
 }
 /**
@@ -38,11 +60,16 @@ export function span(text, style = {}) {
  * text-internal `align`.
  */
 export function Text(content, opts = {}) {
+    // A plain string given an `href`/`to` becomes a single link span, so `Text("jasy.dev", { href })` (or
+    // `{ to }`) is a whole-text link (inline links use `span(...)`). This routes through the styled-segment
+    // path, which lays a single default-font segment out identically - only the /Link annotation is added.
+    const isLink = opts.href !== undefined || opts.to !== undefined;
+    const body = typeof content === "string" && isLink ? [span(content, opts)] : content;
     // Unset properties are left undefined so they inherit the cascaded TextStyle (Document default /
     // built-in). Only bold/italic that the caller actually set become an explicit FontStyle.
     return new TextElement({
-        content,
-        fontSize: opts.size,
+        content: body,
+        fontSize: toFontSize(opts.size),
         fontFamily: opts.font,
         fontStyle: opts.bold !== undefined || opts.italic !== undefined
             ? toFontStyle(opts.bold, opts.italic)
@@ -64,7 +91,7 @@ export function Paragraph(content, opts = {}) {
 export function toTextStyleOverride(opts) {
     const style = {};
     if (opts.size !== undefined)
-        style.fontSize = opts.size;
+        style.fontSize = toFontSize(opts.size);
     if (opts.font !== undefined)
         style.fontFamily = opts.font;
     if (opts.bold !== undefined || opts.italic !== undefined) {

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

@@ -9,13 +9,17 @@ interface ContainerElementParams extends SizedElement, WithChildren {
     main?: MainAlign;
     /** Horizontal alignment of each child (cross axis); defaults to `stretch`. */
     cross?: CrossAlign;
+    /** Width/height as a fraction (0..1) of the offered box instead of `width`/`height` (relative sizing). */
+    widthFactor?: number;
+    heightFactor?: number;
 }
 export declare class ContainerElement extends SizedPDFElement implements Fragmentable {
     private children;
     private gap;
     private main;
     private cross;
-    constructor({ x, y, width, height, children, gap, main, cross }: ContainerElementParams);
+    private requested;
+    constructor({ x, y, width, height, children, gap, main, cross, widthFactor, heightFactor, }: ContainerElementParams);
     /**
      * Splits the vertical stack across pages. Children are measured against the content
      * width and packed until one would exceed `maxHeight`. That straddling child is itself
@@ -29,6 +33,18 @@ export declare class ContainerElement extends SizedPDFElement implements Fragmen
      */
     fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
     private cloneWithChildren;
+    relativeSizeFactor(horizontal: boolean): number | undefined;
+    /**
+     * A Column stacks vertically, so a flex child of its OWN only ever needs a bounded height. But the need
+     * also propagates: a `Spacer` two levels down is just as unable to resolve against an infinite axis, so
+     * we ask the children too - on both axes, since a nested Row's `Spacer` needs a bounded WIDTH and a
+     * Column nested in a Row is exactly where that width goes missing.
+     *
+     * An explicit extent on an axis short-circuits it: the element already knows how big it is there, and
+     * with no flex descendant nothing needs distributing, so it keeps shrink-wrapping. That is what leaves
+     * every existing layout untouched.
+     */
+    needsBoundedMain(horizontal: boolean): boolean;
     calculateLayout(constraints: BoxConstraints, offset: Offset, ctx: LayoutContext): Size;
     getProps(): ContainerElementParams;
 }