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

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

@@ -1,14 +1,17 @@
 import { BoxConstraints } from "../../layout/box-constraints.js";
 import { PDFElement } from "../pdf-element.js";
 /**
- * An out-of-flow child, placed relative to the nearest enclosing positioning frame (a `relative`
- * Box). It takes ZERO space in the normal flow - `calculateLayout` returns `Size(0,0)` and instead
- * registers a placement closure on the frame. The frame runs that closure once it knows its own
- * size, so `right`/`bottom` resolve against the final box and the child can overflow it (a negative
- * `top`/`left` makes it poke into / out of the corner, e.g. a badge or tab).
+ * An out-of-flow child, placed relative to the nearest enclosing positioning frame: a `relative`
+ * Box, or failing that the page's content box. It takes ZERO space in the normal flow -
+ * `calculateLayout` returns `Size(0,0)` and instead registers a placement closure on the frame. The
+ * frame runs that closure once it knows its own size, so `right`/`bottom` resolve against the final
+ * box and the child can overflow it (a negative `top`/`left` makes it poke into / out of the
+ * corner, e.g. a badge or tab).
  *
- * With no frame in scope the element is a no-op (nothing is drawn) - `Positioned` only makes sense
- * inside a `relative` Box.
+ * Every page supplies a frame - header, footer and body alike - so within a document there is
+ * always one. Outside of one we REFUSE rather than draw: the element used to fall through to its
+ * child's default (0, 0), which is how a header watermark landed silently in the page corner
+ * (ISSUE-4). Content that lands somewhere unasked is worse than content that does not render.
  */
 export class PositionedElement extends PDFElement {
     constructor({ child, top, right, bottom, left, h, v, x, y }) {
@@ -17,8 +20,12 @@ export class PositionedElement extends PDFElement {
         this.insets = { top, right, bottom, left, h, v, x, y };
     }
     calculateLayout(_constraints, _offset, ctx) {
+        if (!ctx.frame) {
+            throw new Error("Positioned found no positioning frame. It must sit inside a Page (header, footer or body) " +
+                "or inside a Box({ relative: true }).");
+        }
         // Defer to the frame: it calls back once it has sized itself. Out of flow either way.
-        ctx.frame?.place.push((frame, frameCtx) => this.placeInFrame(frame, frameCtx));
+        ctx.frame.place.push((frame, frameCtx) => this.placeInFrame(frame, frameCtx));
         return { width: 0, height: 0 };
     }
     /** Lays the child out at the resolved position inside (or overflowing) the frame box. */
@@ -35,7 +42,12 @@ export class PositionedElement extends PDFElement {
             : Infinity;
         const constraints = BoxConstraints.loose(width, height);
         // Measure first (so end/center anchors and right/bottom edges resolve against the child's size).
-        const measured = this.child.calculateLayout(constraints, { x: 0, y: 0 }, ctx);
+        // The measuring pass gets a throwaway `place` list: this subtree is laid out twice, and a nested
+        // out-of-flow child would otherwise register its placement on both passes.
+        const measureCtx = ctx.frame
+            ? { ...ctx, frame: { ...ctx.frame, place: [] } }
+            : ctx;
+        const measured = this.child.calculateLayout(constraints, { x: 0, y: 0 }, measureCtx);
         // Resolve one axis: a near-edge pins to origin, a far-edge pins to the far side; otherwise the
         // anchor (default `start`) positions the child and the nudge shifts it from there.
         const place = (origin, frameExtent, childExtent, nearEdge, farEdge, anchor, nudge) => {

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

@@ -2,7 +2,7 @@ import { PageSize } from "../constants/page-sizes.js";
 import { Orientation } from "../renderer/pdf-config.js";
 import type { ColorMode, DefaultFont, Margin } from "../renderer/index.js";
 import { BoxConstraints, Offset, Size } from "../layout/box-constraints.js";
-import { LayoutContext, PDFElement, WithChildren } from "./pdf-element.js";
+import { LayoutContext, PDFElement, PositioningFrame, WithChildren } from "./pdf-element.js";
 import { TextElement } from "./text-element.js";
 export interface PDFPageConfig {
     pageSize?: PageSize;
@@ -54,6 +54,16 @@ export interface PageBands {
  * no header/footer the bands are zero and the body equals the full content box - identical
  * to a page without them.
  */
+/**
+ * The page's positioning frame: its CONTENT box (paper minus margins). Header, footer and body all
+ * resolve a `Positioned` against this same box, so `top`/`bottom` mean the same thing in each.
+ *
+ * `layoutPageBands` lays the bands out, so its caller must hand it a context carrying this frame -
+ * otherwise a `Positioned` in a band has nothing to resolve against (ISSUE-4). A caller that only
+ * wants the band HEIGHTS may throw the frame away without draining it: an out-of-flow child
+ * contributes no height.
+ */
+export declare function pageFrame(config: PDFPageConfig): PositioningFrame;
 export declare function layoutPageBands(config: PDFPageConfig, header: PDFElement | undefined, footer: PDFElement | undefined, ctx: LayoutContext): PageBands;
 export declare class PageElement extends PDFElement {
     private config;

package/dist/elements/page-element.js

@@ -36,6 +36,19 @@ export function resolvePageContentBox(config) {
  * no header/footer the bands are zero and the body equals the full content box - identical
  * to a page without them.
  */
+/**
+ * The page's positioning frame: its CONTENT box (paper minus margins). Header, footer and body all
+ * resolve a `Positioned` against this same box, so `top`/`bottom` mean the same thing in each.
+ *
+ * `layoutPageBands` lays the bands out, so its caller must hand it a context carrying this frame -
+ * otherwise a `Positioned` in a band has nothing to resolve against (ISSUE-4). A caller that only
+ * wants the band HEIGHTS may throw the frame away without draining it: an out-of-flow child
+ * contributes no height.
+ */
+export function pageFrame(config) {
+    const { origin, width, height } = resolvePageContentBox(config);
+    return { origin, size: { width, height }, place: [] };
+}
 export function layoutPageBands(config, header, footer, ctx) {
     const { origin, width, height } = resolvePageContentBox(config);
     let headerHeight = 0;
@@ -44,8 +57,13 @@ export function layoutPageBands(config, header, footer, ctx) {
     }
     let footerHeight = 0;
     if (footer) {
-        // Measure first to learn its height, then place it flush against the bottom edge.
-        footerHeight = footer.calculateLayout(BoxConstraints.loose(width, Infinity), origin, ctx).height;
+        // Measure first to learn its height, then place it flush against the bottom edge. The MEASURING
+        // pass gets a throwaway `place` list: an out-of-flow child registers a placement every time it is
+        // laid out, and this subtree is laid out twice. Only the second, real pass may register.
+        const measureCtx = ctx.frame
+            ? { ...ctx, frame: { ...ctx.frame, place: [] } }
+            : ctx;
+        footerHeight = footer.calculateLayout(BoxConstraints.loose(width, Infinity), origin, measureCtx).height;
         footer.calculateLayout(BoxConstraints.loose(width, Infinity), { x: origin.x, y: origin.y + height - footerHeight }, ctx);
     }
     return {
@@ -76,24 +94,31 @@ export class PageElement extends PDFElement {
             onOverflow: ctx.onOverflow,
             pageInfo: ctx.pageInfo, // the render pass supplies it; absent during pagination
         };
+        // The PAGE is a positioning frame, and the frame is the content box - not the body region left
+        // over between the bands. So `Positioned` means the same thing in the header, in the footer and
+        // in the body, `bottom: 0` is the foot of the page rather than the top of the footer, and adding
+        // a header no longer shifts a page-level `Positioned` that nobody touched. A `relative` Box
+        // still overrides it for its own subtree.
+        //
+        // Built BEFORE the bands are laid out: they need to see it, and their heights are not known yet
+        // anyway. (That is the whole of ISSUE-4 - a `Positioned` in a band had no frame to resolve
+        // against, so it silently stayed at the page's top-left corner.)
+        const frame = pageFrame(this.config);
+        const frameCtx = { ...pageCtx, frame };
         // Place the header/footer bands; the body gets the region left in between (the whole
         // content box when there is neither - byte-identical to a plain page).
-        const bands = layoutPageBands(this.config, this.header, this.footer, pageCtx);
+        const bands = layoutPageBands(this.config, this.header, this.footer, frameCtx);
         const childConstraints = BoxConstraints.loose(bands.bodyWidth, bands.bodyHeight);
-        // The page body is itself a positioning frame: a `Positioned` with no `relative` ancestor
-        // resolves against the content box (a `relative` Box overrides it for its own subtree). Drained
-        // after the body is laid out, so a page-level Positioned isn't a silent no-op.
-        const frame = {
-            origin: bands.bodyOrigin,
-            size: { width: bands.bodyWidth, height: bands.bodyHeight },
-            place: [],
-        };
-        const bodyCtx = { ...pageCtx, frame };
-        this.children.forEach((child) => child.calculateLayout(childConstraints, bands.bodyOrigin, bodyCtx));
+        this.children.forEach((child) => child.calculateLayout(childConstraints, bands.bodyOrigin, frameCtx));
+        // Drained last, once every band and the body have registered: an out-of-flow child is placed
+        // against the final frame box and paints on top of the flow content.
+        //
+        // The callback gets `frameCtx`, not `pageCtx`: a `Positioned` NESTED inside an out-of-flow child
+        // must still see a frame. It appends to `frame.place` while we walk it, and a `for..of` over an
+        // array visits what was appended, so nested placements drain in the same loop.
         for (const place of frame.place)
-            place(frame, pageCtx);
-        const { width, height } = resolvePageContentBox(this.config);
-        return { width, height };
+            place(frame, frameCtx);
+        return { width: frame.size.width, height: frame.size.height };
     }
     getProps() {
         return {

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

@@ -51,6 +51,10 @@ export interface LayoutContext {
     /** What to do when an element overflows a page region and cannot break (set from the render option;
      *  absent = clip silently). Evaluated in `packChildren` where the forced placement happens. */
     onOverflow?: OverflowPolicy;
+    /** The FULL body height of the current page (between header and footer), set by the page driver. A
+     *  `keepTogether` group reads it to decide the degrade rule: veto splitting only when the group would
+     *  fit on a fresh page; a group taller than a whole page drops the veto and splits. */
+    pageBodyHeight?: number;
 }
 export declare abstract class PDFElement {
     private _structId;
@@ -80,6 +84,30 @@ export declare abstract class PDFElement {
      * the parent hands it the line's bounded main extent instead of `Infinity`. Default: no.
      */
     needsBoundedMain(_horizontal: boolean): boolean;
+    /**
+     * Whether this element IS a forced page break (a `PageBreak`). The pagination packer cuts the flow
+     * at such a marker: everything before it stays, everything after starts a new page. Default: no.
+     */
+    isPageBreak(): boolean;
+    /**
+     * Whether this element is, or CONTAINS anywhere in its subtree, a forced page break. A container
+     * that merely fits by height must still be fragmented when this is true, so a break nested inside
+     * it is honoured rather than swallowed. Containers override this to recurse into their children.
+     * Default: no.
+     */
+    hasForcedBreak(): boolean;
+    /**
+     * Whether this element asks to START on a fresh page (CSS `break-before: page`, react-pdf's `break`
+     * prop). Read by the parent packer at the child boundary, not by the element itself; ignored when the
+     * element is already at the top of a region (nothing before it), so it never makes an empty page.
+     * Default: no.
+     */
+    breaksBefore(): boolean;
+    /**
+     * Whether everything AFTER this element must start a fresh page (CSS `break-after: page`). Read by the
+     * parent packer once this element has been placed whole. Default: no.
+     */
+    breaksAfter(): boolean;
 }
 export declare abstract class SizedPDFElement extends PDFElement {
     protected x: number;

package/dist/elements/pdf-element.js

@@ -33,6 +33,38 @@ export class PDFElement {
     needsBoundedMain(_horizontal) {
         return false;
     }
+    /**
+     * Whether this element IS a forced page break (a `PageBreak`). The pagination packer cuts the flow
+     * at such a marker: everything before it stays, everything after starts a new page. Default: no.
+     */
+    isPageBreak() {
+        return false;
+    }
+    /**
+     * Whether this element is, or CONTAINS anywhere in its subtree, a forced page break. A container
+     * that merely fits by height must still be fragmented when this is true, so a break nested inside
+     * it is honoured rather than swallowed. Containers override this to recurse into their children.
+     * Default: no.
+     */
+    hasForcedBreak() {
+        return false;
+    }
+    /**
+     * Whether this element asks to START on a fresh page (CSS `break-before: page`, react-pdf's `break`
+     * prop). Read by the parent packer at the child boundary, not by the element itself; ignored when the
+     * element is already at the top of a region (nothing before it), so it never makes an empty page.
+     * Default: no.
+     */
+    breaksBefore() {
+        return false;
+    }
+    /**
+     * Whether everything AFTER this element must start a fresh page (CSS `break-after: page`). Read by the
+     * parent packer once this element has been placed whole. Default: no.
+     */
+    breaksAfter() {
+        return false;
+    }
 }
 export class SizedPDFElement extends PDFElement {
     constructor(data) {

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

@@ -28,6 +28,10 @@ interface RectangleElementParams extends SizedElement, WithChildren {
     widthFactor?: number;
     /** Height as a fraction (0..1) of the offered height; see `widthFactor`. */
     heightFactor?: number;
+    /** Start this box on a fresh page (CSS `break-before: page`). */
+    breakBefore?: boolean;
+    /** Start everything after this box on a fresh page (CSS `break-after: page`). */
+    breakAfter?: boolean;
 }
 export declare class RectangleElement extends SizedPDFElement implements Fragmentable {
     private children;
@@ -38,8 +42,12 @@ export declare class RectangleElement extends SizedPDFElement implements Fragmen
     private sideBorders?;
     private relative;
     private overflow;
+    private breakBefore;
+    private breakAfter;
     private sizeMemory;
-    constructor({ children, color, backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, widthFactor, heightFactor, }: RectangleElementParams);
+    constructor({ children, color, backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, widthFactor, heightFactor, breakBefore, breakAfter, }: RectangleElementParams);
+    breaksBefore(): boolean;
+    breaksAfter(): boolean;
     /**
      * Splits the bordered box across pages (box-decoration-break: clone - every fragment
      * gets its own full border). The children stack is packed into the space left after
@@ -49,6 +57,7 @@ export declare class RectangleElement extends SizedPDFElement implements Fragmen
      * box is sized by what it actually holds on each page.
      */
     fragment(maxHeight: number, width: number, ctx: LayoutContext): FragmentResult;
+    hasForcedBreak(): boolean;
     private cloneWithChildren;
     relativeSizeFactor(horizontal: boolean): number | undefined;
     /** A box has no flex children of its own, but it must not swallow the need of the stack inside it: a

package/dist/elements/rectangle-element.js

@@ -1,9 +1,9 @@
 import { Color } from "../common/color.js";
 import { BoxConstraints, resolveExtent } from "../layout/box-constraints.js";
-import { packChildren } from "../layout/fragmentation.js";
+import { childrenForceBreak, packChildren, } from "../layout/fragmentation.js";
 import { SizedPDFElement, } from "./pdf-element.js";
 export class RectangleElement extends SizedPDFElement {
-    constructor({ children = [], color = new Color(0, 0, 0), backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, widthFactor, heightFactor, }) {
+    constructor({ children = [], color = new Color(0, 0, 0), backgroundColor, borderWidth, width, height, radius, sideBorders, relative, overflow, widthFactor, heightFactor, breakBefore, breakAfter, }) {
         super({ x: 0, y: 0, width, height });
         this.children = [];
         this.children = children;
@@ -15,8 +15,16 @@ export class RectangleElement extends SizedPDFElement {
         this.sideBorders = sideBorders;
         this.relative = relative ?? false;
         this.overflow = overflow ?? "visible";
+        this.breakBefore = breakBefore ?? false;
+        this.breakAfter = breakAfter ?? false;
         this.sizeMemory = { x: 0, y: 0, width, height, widthFactor, heightFactor };
     }
+    breaksBefore() {
+        return this.breakBefore;
+    }
+    breaksAfter() {
+        return this.breakAfter;
+    }
     /**
      * Splits the bordered box across pages (box-decoration-break: clone - every fragment
      * gets its own full border). The children stack is packed into the space left after
@@ -34,18 +42,30 @@ export class RectangleElement extends SizedPDFElement {
         // Border-box: the content is inset by the border on top and bottom, so a fragment
         // holding `c` of content is `c + 2*border` tall. (Derived, not a fudge factor.)
         const innerMaxHeight = maxHeight - 2 * this.borderWidth;
-        const { fitted, remainder } = packChildren(this.children, innerMaxHeight, innerWidth, ctx);
-        if (remainder.length === 0)
+        const { fitted, remainder, forceBreak } = packChildren(this.children, innerMaxHeight, innerWidth, ctx);
+        // Fits with no forced cut: return the whole box unchanged. A trailing forced break is the
+        // exception - fall through so the box is rebuilt from the packed children (without the consumed
+        // break marker), rather than handing back the original that still holds it.
+        if (remainder.length === 0 && !forceBreak)
             return { fitted: this, remainder: null };
         const contentHeight = (kids) => kids.reduce((sum, child) => sum +
             child.calculateLayout(BoxConstraints.loose(innerWidth, Infinity), { x: 0, y: 0 }, ctx)
                 .height, 0);
         return {
             fitted: this.cloneWithChildren(fitted, contentHeight(fitted) + 2 * this.borderWidth),
-            remainder: this.cloneWithChildren(remainder, contentHeight(remainder) + 2 * this.borderWidth),
+            // A trailing forced break leaves nothing to carry over: no remainder box, no extra page.
+            // Only the CONTINUATION carries `breakAfter` (a box that splits still breaks after its LAST
+            // fragment, not its first); `breakBefore` is dropped, already honoured before the split.
+            remainder: remainder.length === 0
+                ? null
+                : this.cloneWithChildren(remainder, contentHeight(remainder) + 2 * this.borderWidth, this.breakAfter),
+            forceBreak,
         };
     }
-    cloneWithChildren(children, height) {
+    hasForcedBreak() {
+        return childrenForceBreak(this.children);
+    }
+    cloneWithChildren(children, height, breakAfter = false) {
         return new RectangleElement({
             x: 0,
             y: 0,
@@ -62,6 +82,7 @@ export class RectangleElement extends SizedPDFElement {
             sideBorders: this.sideBorders,
             relative: this.relative,
             overflow: this.overflow,
+            breakAfter,
         });
     }
     relativeSizeFactor(horizontal) {

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

@@ -13,6 +13,10 @@ interface RowElementParams extends WithChildren {
     height?: number;
     widthFactor?: number;
     heightFactor?: number;
+    /** Start this row on a fresh page (CSS `break-before: page`). */
+    breakBefore?: boolean;
+    /** Start everything after this row on a fresh page (CSS `break-after: page`). */
+    breakAfter?: boolean;
 }
 /**
  * Horizontal stack: the mirror of `ContainerElement` (Column). Children are laid out
@@ -31,8 +35,12 @@ export declare class RowElement extends SizedPDFElement {
     private gap;
     private main;
     private cross;
+    private breakBefore;
+    private breakAfter;
     private requested;
-    constructor({ children, gap, main, cross, width, height, widthFactor, heightFactor, }: RowElementParams);
+    constructor({ children, gap, main, cross, width, height, widthFactor, heightFactor, breakBefore, breakAfter, }: RowElementParams);
+    breaksBefore(): boolean;
+    breaksAfter(): boolean;
     relativeSizeFactor(horizontal: boolean): number | undefined;
     /** The mirror of `ContainerElement`: a Row's OWN flex child needs a bounded width, and the need of any
      *  descendant propagates on both axes (see the Column for the reasoning). */

package/dist/elements/row-element.js

@@ -14,13 +14,21 @@ import { FlexiblePDFElement, SizedPDFElement, } from "./pdf-element.js";
  * Grid/Table concern.
  */
 export class RowElement extends SizedPDFElement {
-    constructor({ children, gap, main, cross, width, height, widthFactor, heightFactor, }) {
+    constructor({ children, gap, main, cross, width, height, widthFactor, heightFactor, breakBefore, breakAfter, }) {
         super({ x: 0, y: 0 });
         this.children = children;
         this.gap = gap ?? 0;
         this.main = main ?? "start";
         this.cross = cross ?? "stretch";
         this.requested = { width, height, widthFactor, heightFactor };
+        this.breakBefore = breakBefore ?? false;
+        this.breakAfter = breakAfter ?? false;
+    }
+    breaksBefore() {
+        return this.breakBefore;
+    }
+    breaksAfter() {
+        return this.breakAfter;
     }
     relativeSizeFactor(horizontal) {
         return horizontal ? this.requested.widthFactor : this.requested.heightFactor;

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

@@ -14,6 +14,11 @@ export interface TextSegment {
     href?: string;
     /** Internal named destination (an `Anchor`): this segment links to it (a /GoTo /Link annotation). */
     dest?: string;
+    /** Unset inherits the Text's own setting; `true`/`false` overrides it for this run only. */
+    underline?: boolean;
+    strikethrough?: boolean;
+    /** Extra space after every glyph, in points; unset inherits the Text's own value. */
+    letterSpacing?: number;
 }
 /** Accessibility role for the tagged structure tree: a heading level or a paragraph (the default). */
 export type TextRole = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
@@ -30,8 +35,17 @@ interface TextElementParams {
     maxLines?: number;
     /** What to do past `maxLines`: `"clip"` (default) drops them, `"ellipsis"` ends with "…". */
     overflow?: TextOverflow;
-    /** Line-height multiplier: each line is `fontSize * lineHeight` tall (default `1`). */
+    /** Line-height multiplier: each line is `fontSize * lineHeight` tall. Unset means the font's
+     *  natural line height (`ascent + descent + lineGap`), like CSS `line-height: normal`. */
     lineHeight?: number;
+    /** Draw a line under the text, at the position and thickness the font declares. */
+    underline?: boolean;
+    /** Draw a line through the text, at half its x-height. */
+    strikethrough?: boolean;
+    /** Let the underline step around descenders. Needs an embedded font. */
+    skipInk?: boolean;
+    /** Extra space after every glyph, in points (CSS `letter-spacing`). Default 0. */
+    letterSpacing?: number;
     /** Accessibility role for the tagged structure tree (heading level or paragraph; default `"p"`). */
     role?: TextRole;
 }
@@ -42,17 +56,25 @@ export declare class TextElement extends SizedPDFElement implements Fragmentable
     private readonly rawColor?;
     private readonly rawTextAlignment?;
     private readonly rawLineHeight?;
+    private readonly rawUnderline?;
+    private readonly rawStrikethrough?;
+    private readonly rawSkipInk?;
+    private readonly rawLetterSpacing?;
     private fontSize;
     private fontFamily;
     private fontStyle;
     private color;
     private textAlignment;
-    private lineHeight;
+    private lineHeight?;
+    private underline;
+    private strikethrough;
+    private skipInk;
+    private letterSpacing;
     private content;
     private maxLines?;
     private overflow;
     private readonly role?;
-    constructor({ fontSize, content, fontFamily, fontStyle, color, textAlignment, maxLines, overflow, lineHeight, role, }: TextElementParams);
+    constructor({ fontSize, content, fontFamily, fontStyle, color, textAlignment, maxLines, overflow, lineHeight, underline, strikethrough, skipInk, letterSpacing, role, }: TextElementParams);
     private resolveStyle;
     private applyStyle;
     /**
@@ -88,7 +110,11 @@ export declare class TextElement extends SizedPDFElement implements Fragmentable
         textAlignment: HorizontalAlignment;
         maxLines: number | undefined;
         overflow: TextOverflow;
-        lineHeight: number;
+        lineHeight: number | undefined;
+        underline: boolean;
+        strikethrough: boolean;
+        skipInk: boolean;
+        letterSpacing: number;
         role: TextRole | undefined;
     };
 }

package/dist/elements/text-element.js

@@ -5,9 +5,11 @@
 import { TextRenderer } from "../renderer/text-renderer.js";
 import { DEFAULT_TEXT_STYLE } from "../text/text-style.js";
 import { wrapStringIntoLines, breakSegmentsIntoLines, segmentLinesToSegments, } from "../text/line-breaker.js";
+import { lineBoxForSegmentLine, lineBoxForString } from "../text/line-metrics.js";
+import { runAdvance } from "../text/advance.js";
 import { SizedPDFElement } from "./pdf-element.js";
 export class TextElement extends SizedPDFElement {
-    constructor({ fontSize, content, fontFamily, fontStyle, color, textAlignment, maxLines, overflow = "clip", lineHeight, role, }) {
+    constructor({ fontSize, content, fontFamily, fontStyle, color, textAlignment, maxLines, overflow = "clip", lineHeight, underline, strikethrough, skipInk, letterSpacing, role, }) {
         super({ x: 0, y: 0 });
         this.role = role;
         this.rawFontSize = fontSize;
@@ -16,6 +18,10 @@ export class TextElement extends SizedPDFElement {
         this.rawColor = color;
         this.rawTextAlignment = textAlignment;
         this.rawLineHeight = lineHeight;
+        this.rawUnderline = underline;
+        this.rawStrikethrough = strikethrough;
+        this.rawSkipInk = skipInk;
+        this.rawLetterSpacing = letterSpacing;
         this.content = content;
         this.maxLines = maxLines;
         this.overflow = overflow;
@@ -32,6 +38,10 @@ export class TextElement extends SizedPDFElement {
         this.color = this.rawColor ?? ts.color;
         this.textAlignment = this.rawTextAlignment ?? ts.textAlignment;
         this.lineHeight = this.rawLineHeight ?? ts.lineHeight;
+        this.underline = this.rawUnderline ?? ts.underline;
+        this.strikethrough = this.rawStrikethrough ?? ts.strikethrough;
+        this.skipInk = this.rawSkipInk ?? ts.skipInk;
+        this.letterSpacing = this.rawLetterSpacing ?? ts.letterSpacing;
     }
     /**
      * Splits the paragraph at line boxes (Slice 1). The lines that fit in `maxHeight` stay;
@@ -45,11 +55,12 @@ export class TextElement extends SizedPDFElement {
             ? this.fragmentString(this.content, maxHeight, width, ctx)
             : this.fragmentSegments(this.content, maxHeight, width, ctx);
     }
-    // Plain string: every wrapped line is `fontSize` tall (matches calculateTextHeight),
-    // so `floor(maxHeight / fontSize)` lines fit.
+    // Plain string: every wrapped line gets the same box (the same one calculateTextHeight uses),
+    // so `floor(maxHeight / lineBox)` lines fit.
     fragmentString(content, maxHeight, width, ctx) {
-        const lines = wrapStringIntoLines(content, this.fontFamily, this.fontSize, this.fontStyle, width, ctx.metrics, this.maxLines, this.overflow);
-        const fittedLineCount = Math.floor(maxHeight / (this.fontSize * this.lineHeight));
+        const lines = wrapStringIntoLines(content, this.fontFamily, this.fontSize, this.fontStyle, width, ctx.metrics, this.maxLines, this.overflow, this.letterSpacing);
+        const box = lineBoxForString(ctx.metrics, this.fontFamily, this.fontStyle, this.fontSize, this.lineHeight);
+        const fittedLineCount = Math.floor(maxHeight / box.height);
         if (fittedLineCount <= 0)
             return { fitted: null, remainder: this };
         if (fittedLineCount >= lines.length)
@@ -59,18 +70,20 @@ export class TextElement extends SizedPDFElement {
             remainder: this.cloneWithContent(lines.slice(fittedLineCount).join(" ")),
         };
     }
-    // Styled segments: each line's height is its tallest font (maxFontSize), so pack lines
-    // by cumulative leading. Rebuild the fitted/remainder halves back into TextSegment[].
+    // Styled segments: each line's height comes from the fonts on it, so pack lines by cumulative
+    // box height. Rebuild the fitted/remainder halves back into TextSegment[].
     fragmentSegments(content, maxHeight, width, ctx) {
-        const lines = breakSegmentsIntoLines(content, {
+        const defaults = {
             fontFamily: this.fontFamily,
             fontSize: this.fontSize,
             fontStyle: this.fontStyle,
-        }, width, ctx.metrics, this.maxLines, this.overflow);
+            letterSpacing: this.letterSpacing,
+        };
+        const lines = breakSegmentsIntoLines(content, defaults, width, ctx.metrics, this.maxLines, this.overflow);
         let used = 0;
         let fittedLineCount = 0;
         for (const line of lines) {
-            const lineBox = line.maxFontSize * this.lineHeight;
+            const lineBox = lineBoxForSegmentLine(line, defaults, ctx.metrics, this.lineHeight).height;
             if (used + lineBox > maxHeight)
                 break;
             used += lineBox;
@@ -98,6 +111,10 @@ export class TextElement extends SizedPDFElement {
             maxLines: this.maxLines,
             overflow: this.overflow,
             lineHeight: this.lineHeight,
+            underline: this.underline,
+            strikethrough: this.strikethrough,
+            skipInk: this.skipInk,
+            letterSpacing: this.letterSpacing,
             role: this.role,
         }).adoptStructId(this); // a wrapped remainder is the SAME logical paragraph (one P across pages)
     }
@@ -112,7 +129,7 @@ export class TextElement extends SizedPDFElement {
             ? constraints.maxWidth
             : this.naturalWidth(ctx.metrics);
         const wrapWidth = this.width ?? 0;
-        this.height = TextRenderer.calculateTextHeight(this.content, this.fontSize, this.fontFamily, this.fontStyle, ctx.metrics, wrapWidth, this.maxLines, this.overflow, this.lineHeight);
+        this.height = TextRenderer.calculateTextHeight(this.content, this.fontSize, this.fontFamily, this.fontStyle, ctx.metrics, wrapWidth, this.maxLines, this.overflow, this.lineHeight, this.letterSpacing);
         // Top-left coordinates (y = top of the text box). The baseline offset and the
         // Y-flip are applied downstream (the line-builder positions baselines, the seam
         // flips to PDF), so the element stays coordinate-system-blind.
@@ -127,22 +144,24 @@ export class TextElement extends SizedPDFElement {
      *  - enough to tip a borderline string (e.g. "20 Jun 2026", wider than "04 Jul 2026" only because
      *  'n' beats 'l') one bit over its own width, dropping the last word onto a second line. */
     naturalWidth(metrics) {
-        const oneLine = (text, family, size, style) => {
+        const oneLine = (text, family, size, style, letterSpacing) => {
+            const font = { fontFamily: family, fontSize: size, fontStyle: style };
             const words = text.split(" ");
-            const space = metrics.getCharWidth(" ", size, undefined, family, style);
+            const space = runAdvance(metrics, " ", font, letterSpacing);
             let width = 0;
             words.forEach((word, i) => {
-                const w = metrics.getStringWidth(word, family, size, style);
-                // Group (word + space) as one term, exactly like the breaker - see the note above.
+                const w = runAdvance(metrics, word, font, letterSpacing);
+                // Group (word + space) as one term, exactly like the breaker - see the note above. Both use
+                // the same `runAdvance`, so the two agree bit for bit even with letterSpacing.
                 width += i < words.length - 1 ? w + space : w;
             });
             return width;
         };
         if (typeof this.content === "string") {
-            return oneLine(this.content, this.fontFamily, this.fontSize, this.fontStyle);
+            return oneLine(this.content, this.fontFamily, this.fontSize, this.fontStyle, this.letterSpacing);
         }
         return this.content.reduce((sum, seg) => sum +
-            oneLine(seg.content, seg.fontFamily ?? this.fontFamily, seg.fontSize ?? this.fontSize, seg.fontStyle ?? this.fontStyle), 0);
+            oneLine(seg.content, seg.fontFamily ?? this.fontFamily, seg.fontSize ?? this.fontSize, seg.fontStyle ?? this.fontStyle, seg.letterSpacing ?? this.letterSpacing), 0);
     }
     getProps() {
         return {
@@ -159,6 +178,10 @@ export class TextElement extends SizedPDFElement {
             maxLines: this.maxLines,
             overflow: this.overflow,
             lineHeight: this.lineHeight,
+            underline: this.underline,
+            strikethrough: this.strikethrough,
+            skipInk: this.skipInk,
+            letterSpacing: this.letterSpacing,
             role: this.role,
         };
     }