@reekon-tools/boldr-utils 1.21.1 → 1.22.0

package/dist/export/pdf/marks.js

@@ -0,0 +1,336 @@
+// Vector marks: strokes, shapes and the measurement annotation's line /
+// rectangle, emitted as PDF path operators in DOC space. Mirrors what
+// StrokeElement, ShapeElement and AnnotationCanvasSkia's measurement pass draw,
+// reusing the same geometry helpers so caps, dashes and arrowheads agree.
+import { fill, popGraphicsState, pushGraphicsState, rectangle, stroke, } from 'pdf-lib';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../../annotation/canvas/strokeGeometry.js';
+import { visualShapeBounds } from '../../annotation/canvas/shapeGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE, TEXT_BASELINE_FACTOR, TEXT_LINE_HEIGHT_FACTOR, textShapeBounds, } from '../../annotation/canvas/textGeometry.js';
+import { normalizeRect, placementOf, } from '../../annotation/canvas/measurementGeometry.js';
+import { MEASUREMENT_LINE_COLOR, MEASUREMENT_LINE_WIDTH, MEASUREMENT_RECT_WIDTH, } from '../../annotation/canvas/measurementLineStyle.js';
+import { parseHexColor } from './color.js';
+import { circlePathOps, fillStateOps, flatPolylinePathOps, polylinePathOps, rectPathOps, strokeStateOps, } from './emit.js';
+import { boundsToRect } from './pageMapping.js';
+// Readable glyph colour over a highlight band — mirror of
+// ShapeElement.highlightTextColor (which lives behind a Skia import).
+const highlightTextColor = (hex) => {
+    const h = hex.replace('#', '');
+    if (h.length < 6)
+        return '#1A1A1A';
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return lum > 0.6 ? '#1A1A1A' : '#FFFFFF';
+};
+const arrowheadOps = (tip, from, width, color, gs) => {
+    if (!tip || !from || (tip.x === from.x && tip.y === from.y))
+        return [];
+    const tri = arrowheadTriangle(tip, from, width);
+    return [
+        pushGraphicsState(),
+        ...fillStateOps(color, gs),
+        ...polylinePathOps(tri, true),
+        fill(),
+        popGraphicsState(),
+    ];
+};
+/* ------------------------------------------------------------------ *
+ * Strokes
+ * ------------------------------------------------------------------ */
+export const strokeBounds = (s) => {
+    if (s.points.length < 2)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i + 1 < s.points.length; i += 2) {
+        const x = s.points[i];
+        const y = s.points[i + 1];
+        if (x < minX)
+            minX = x;
+        if (y < minY)
+            minY = y;
+        if (x > maxX)
+            maxX = x;
+        if (y > maxY)
+            maxY = y;
+    }
+    // Round caps and arrowheads reach past the points by ~2× the width.
+    return boundsToRect({ minX, minY, maxX, maxY }, Math.max(s.width * 2, 6));
+};
+export const strokeOps = (s, ctx) => {
+    const n = s.points.length;
+    if (n < 2)
+        return [];
+    const opacity = s.tool === 'highlighter' ? 0.3 : 1;
+    const alpha = opacity * parseHexColor(s.color).alpha;
+    const gs = ctx.alphaState(alpha);
+    const isDot = n === 4 && s.points[0] === s.points[2] && s.points[1] === s.points[3];
+    if (isDot) {
+        // Skia paints a zero-length round-capped contour as a dot; PDF only does
+        // so for round caps, and not reliably across viewers — draw it explicitly.
+        const x = s.points[0];
+        const y = s.points[1];
+        const r = s.width / 2;
+        const cap = toSkiaStrokeCap(s.cap);
+        if (cap === 'butt')
+            return [];
+        return [
+            pushGraphicsState(),
+            ...fillStateOps(s.color, gs),
+            ...(cap === 'square'
+                ? rectPathOps(x - r, y - r, s.width, s.width)
+                : circlePathOps(x, y, r)),
+            fill(),
+            popGraphicsState(),
+        ];
+    }
+    const ops = [
+        pushGraphicsState(),
+        ...strokeStateOps({
+            color: s.color,
+            width: s.width,
+            cap: s.cap,
+            join: 'round',
+            dash: !!s.dash,
+            graphicsState: gs,
+        }),
+        ...flatPolylinePathOps(s.points),
+        stroke(),
+        popGraphicsState(),
+    ];
+    if (n >= 4) {
+        const first = { x: s.points[0], y: s.points[1] };
+        const second = { x: s.points[2], y: s.points[3] };
+        const last = { x: s.points[n - 2], y: s.points[n - 1] };
+        const penult = { x: s.points[n - 4], y: s.points[n - 3] };
+        if (s.startCap === 'arrow') {
+            ops.push(...arrowheadOps(first, second, s.width, s.color, gs));
+        }
+        if (s.cap === 'arrow') {
+            ops.push(...arrowheadOps(last, penult, s.width, s.color, gs));
+        }
+    }
+    return ops;
+};
+/* ------------------------------------------------------------------ *
+ * Shapes
+ * ------------------------------------------------------------------ */
+export const shapeBounds = (shape) => {
+    if (shape.kind === 'text') {
+        const b = textShapeBounds(shape);
+        return b ? boundsToRect(b, 4) : null;
+    }
+    const b = visualShapeBounds(shape);
+    if (!b)
+        return null;
+    const w = shape.style.strokeWidth ?? 2;
+    return boundsToRect(b, Math.max(w * 2, 6));
+};
+const textShapeOps = (shape, ctx) => {
+    const origin = shape.geometry.points[0];
+    if (!origin || !shape.text)
+        return [];
+    const fontSize = shape.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    const colorStr = shape.style.stroke ?? '#000000';
+    const decoration = shape.style.textDecoration;
+    const glyphColor = decoration === 'highlight' ? highlightTextColor(colorStr) : colorStr;
+    const gs = ctx.alphaState(parseHexColor(colorStr).alpha);
+    const lineHeight = TEXT_LINE_HEIGHT_FACTOR * fontSize;
+    const ops = [];
+    let lost = false;
+    shape.text.split('\n').forEach((line, i) => {
+        const top = origin.y + i * lineHeight;
+        const baseline = top + TEXT_BASELINE_FACTOR * fontSize;
+        const picked = ctx.fonts.pick(line);
+        if (picked.dropped)
+            lost = true;
+        const width = picked.text ? ctx.fonts.width(picked.text, fontSize) : 0;
+        if (decoration === 'highlight' && width > 0) {
+            ops.push(pushGraphicsState(), ...fillStateOps(colorStr, gs), rectangle(origin.x, top, width, lineHeight), fill(), popGraphicsState());
+        }
+        ops.push(...ctx.fonts.textOps(ctx.page, line, fontSize, glyphColor, origin.x, baseline, {
+            graphicsState: gs,
+        }));
+        if ((decoration === 'underline' || decoration === 'squiggle') &&
+            width > 0) {
+            // Skia positions the underline just under the baseline at ~1/14 em; the
+            // wavy variant has no PDF operator and is drawn solid.
+            const thickness = fontSize / 14;
+            ops.push(pushGraphicsState(), ...fillStateOps(colorStr, gs), rectangle(origin.x, baseline + fontSize * 0.08, width, thickness), fill(), popGraphicsState());
+        }
+    });
+    if (lost) {
+        ctx.skipped.push({
+            id: shape.id,
+            kind: 'text',
+            reason: 'Some characters have no glyph in the export fonts and were dropped',
+        });
+    }
+    return ops;
+};
+export const shapeOps = (shape, ctx) => {
+    const { kind, geometry, style } = shape;
+    if (kind === 'text')
+        return textShapeOps(shape, ctx);
+    const strokeColor = style.stroke ?? '#000000';
+    const strokeWidth = style.strokeWidth ?? 2;
+    const gs = ctx.alphaState(parseHexColor(strokeColor).alpha);
+    const closed = geometry.closed !== false;
+    const pts = geometry.points;
+    const strokeWith = (pathOps, join, cap) => [
+        pushGraphicsState(),
+        ...strokeStateOps({
+            color: strokeColor,
+            width: strokeWidth,
+            cap,
+            join,
+            dash: !!style.dash,
+            graphicsState: gs,
+        }),
+        ...pathOps,
+        stroke(),
+        popGraphicsState(),
+    ];
+    const fillWith = (pathOps) => style.fill
+        ? [
+            pushGraphicsState(),
+            ...fillStateOps(style.fill, ctx.alphaState(parseHexColor(style.fill).alpha)),
+            ...pathOps,
+            fill(),
+            popGraphicsState(),
+        ]
+        : [];
+    switch (kind) {
+        case 'rect': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const x = Math.min(a.x, b.x);
+            const y = Math.min(a.y, b.y);
+            const w = Math.abs(b.x - a.x);
+            const h = Math.abs(b.y - a.y);
+            return [
+                ...fillWith(rectPathOps(x, y, w, h)),
+                ...strokeWith(rectPathOps(x, y, w, h), 'miter'),
+            ];
+        }
+        case 'ellipse': {
+            // Rendered as a CIRCLE: centre = midpoint, r = half the larger extent.
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
+            return [
+                ...fillWith(circlePathOps(cx, cy, r)),
+                ...strokeWith(circlePathOps(cx, cy, r), 'miter'),
+            ];
+        }
+        case 'line':
+        case 'arrow': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return [];
+            const ops = strokeWith(polylinePathOps([a, b]), 'miter', style.cap);
+            if (style.startCap === 'arrow')
+                ops.push(...arrowheadOps(a, b, strokeWidth, strokeColor, gs));
+            if (kind === 'arrow' || style.cap === 'arrow') {
+                ops.push(...arrowheadOps(b, a, strokeWidth, strokeColor, gs));
+            }
+            return ops;
+        }
+        case 'polygon': {
+            if (pts.length < 2)
+                return [];
+            const ops = [];
+            if (closed)
+                ops.push(...fillWith(polylinePathOps(pts, true)));
+            ops.push(...strokeWith(polylinePathOps(pts, closed), 'round', style.cap));
+            if (!closed) {
+                const n = pts.length;
+                if (style.startCap === 'arrow')
+                    ops.push(...arrowheadOps(pts[0], pts[1], strokeWidth, strokeColor, gs));
+                if (style.cap === 'arrow')
+                    ops.push(...arrowheadOps(pts[n - 1], pts[n - 2], strokeWidth, strokeColor, gs));
+            }
+            return ops;
+        }
+        default:
+            return [];
+    }
+};
+/* ------------------------------------------------------------------ *
+ * Measurement annotation line / rectangle (the tile itself is in tiles.ts)
+ * ------------------------------------------------------------------ */
+export const measurementMarkBounds = (placed) => {
+    const placement = placementOf(placed);
+    if (placement === 'rectangle' && placed.rect) {
+        const n = normalizeRect(placed.rect);
+        const w = placed.lineWidth ?? MEASUREMENT_RECT_WIDTH;
+        return boundsToRect(n, w);
+    }
+    if (placement === 'line' && placed.line) {
+        const { a, b } = placed.line;
+        const w = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+        return boundsToRect({
+            minX: Math.min(a.x, b.x),
+            minY: Math.min(a.y, b.y),
+            maxX: Math.max(a.x, b.x),
+            maxY: Math.max(a.y, b.y),
+        }, Math.max(w * 2, 6));
+    }
+    return null;
+};
+export const measurementMarkOps = (placed, ctx) => {
+    const placement = placementOf(placed);
+    if (placement === 'rectangle' && placed.rect) {
+        const n = normalizeRect(placed.rect);
+        const color = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+        const width = placed.lineWidth ?? MEASUREMENT_RECT_WIDTH;
+        return [
+            pushGraphicsState(),
+            ...strokeStateOps({
+                color,
+                width,
+                join: 'miter',
+                dash: !!placed.lineDash,
+                graphicsState: ctx.alphaState(parseHexColor(color).alpha),
+            }),
+            ...rectPathOps(n.minX, n.minY, n.maxX - n.minX, n.maxY - n.minY),
+            stroke(),
+            popGraphicsState(),
+        ];
+    }
+    if (placement === 'line' && placed.line) {
+        const { a, b } = placed.line;
+        const color = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+        const width = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+        const gs = ctx.alphaState(parseHexColor(color).alpha);
+        const ops = [
+            pushGraphicsState(),
+            ...strokeStateOps({
+                color,
+                width,
+                cap: placed.lineCap,
+                join: 'miter',
+                dash: !!placed.lineDash,
+                graphicsState: gs,
+            }),
+            ...polylinePathOps([a, b]),
+            stroke(),
+            popGraphicsState(),
+        ];
+        if (placed.lineStartCap === 'arrow')
+            ops.push(...arrowheadOps(a, b, width, color, gs));
+        if (placed.lineCap === 'arrow')
+            ops.push(...arrowheadOps(b, a, width, color, gs));
+        return ops;
+    }
+    return [];
+};
+// Re-exported so the renderer can size dash tests without a second import.
+export { dashIntervals };

package/dist/export/pdf/pageMapping.d.ts

@@ -0,0 +1,49 @@
+import type { AnnotationPdfDocument, AnnotationPdfPageSize } from '../../types/annotation.js';
+export interface DocRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** A PDF page's box in unrotated user space (pdf-lib's getCropBox shape). */
+export interface PdfBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** PDF `cm` matrix [a b c d e f]: (x, y) → (a·x + c·y + e, b·x + d·y + f). */
+export type AffineMatrix = [
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number
+];
+export type PageRotation = 0 | 90 | 180 | 270;
+export declare const normalizeRotation: (degrees: number) => PageRotation;
+/** Doc-space rect of every page, index-aligned with `doc.pages`. */
+export declare const pageRectsOf: (doc: AnnotationPdfDocument) => DocRect[];
+/** The displayed (post-rotation) size a CropBox has under `rotation`. */
+export declare const rotatedBoxSize: (box: PdfBox, rotation: PageRotation) => AnnotationPdfPageSize;
+/**
+ * The matrix that maps a doc-space point (stack coordinates, y-down) onto the
+ * page's PDF user space (y-up, unrotated, CropBox origin). `pageRect` is the
+ * page's rect in the stack, `cropBox` its box in user space, `rotation` its
+ * normalized `/Rotate`.
+ */
+export declare const docToPageMatrix: (pageRect: DocRect, cropBox: PdfBox, rotation: PageRotation) => AffineMatrix;
+/** Apply an affine matrix to a point (for tests and bounds checks). */
+export declare const applyMatrix: (m: AffineMatrix, x: number, y: number) => {
+    x: number;
+    y: number;
+};
+export declare const rectsIntersect: (a: DocRect, b: DocRect) => boolean;
+/** Axis-aligned bounds → DocRect, inflated by `pad` on every side. */
+export declare const boundsToRect: (b: {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}, pad?: number) => DocRect;

package/dist/export/pdf/pageMapping.js

@@ -0,0 +1,67 @@
+// Where each PDF page sits in canvas doc space, and the one affine matrix that
+// carries a doc-space point onto that page's PDF user space.
+//
+// Doc space on a PDF-backed canvas IS PDF points, y-down, with the pages laid
+// out by pdfPageDocRects (the continuous vertical filmstrip). PDF user space is
+// y-up, unrotated, and its origin is wherever the CropBox says. The matrix
+// below folds all three differences — the page's offset in the stack, the
+// y-flip, and `/Rotate` — into a single `cm` so every mark is emitted in its
+// stored doc coordinates unchanged.
+//
+// ROTATION CONVENTION (measured against PDFium in __tests__/pageMapping): a
+// `/Rotate 90` page is displayed rotated 90° clockwise, so the unrotated
+// page's top-left corner lands at the displayed page's top-RIGHT. The stored
+// page sizes (AnnotationPdfDocument.pages) are post-rotation extents, i.e.
+// exactly the displayed W×H the matrix maps from.
+import { pdfPageDocRects } from '../../annotation/canvas/pdfDocument.js';
+export const normalizeRotation = (degrees) => {
+    const r = (((Math.round(degrees / 90) * 90) % 360) + 360) % 360;
+    return r;
+};
+/** Doc-space rect of every page, index-aligned with `doc.pages`. */
+export const pageRectsOf = (doc) => pdfPageDocRects(doc);
+/** The displayed (post-rotation) size a CropBox has under `rotation`. */
+export const rotatedBoxSize = (box, rotation) => rotation === 90 || rotation === 270
+    ? { width: box.height, height: box.width }
+    : { width: box.width, height: box.height };
+/**
+ * The matrix that maps a doc-space point (stack coordinates, y-down) onto the
+ * page's PDF user space (y-up, unrotated, CropBox origin). `pageRect` is the
+ * page's rect in the stack, `cropBox` its box in user space, `rotation` its
+ * normalized `/Rotate`.
+ */
+export const docToPageMatrix = (pageRect, cropBox, rotation) => {
+    const { x: rx, y: ry } = pageRect;
+    const { x: cx, y: cy, width: cw, height: ch } = cropBox;
+    switch (rotation) {
+        case 0:
+            // X = cx + (x - rx);  Y = cy + ch - (y - ry)
+            return [1, 0, 0, -1, cx - rx, cy + ch + ry];
+        case 90:
+            // Displayed top-left is the unrotated bottom-left.
+            // X = cx + (y - ry);  Y = cy + (x - rx)
+            return [0, 1, 1, 0, cx - ry, cy - rx];
+        case 180:
+            // X = cx + cw - (x - rx);  Y = cy + (y - ry)
+            return [-1, 0, 0, 1, cx + cw + rx, cy - ry];
+        case 270:
+            // X = cx + cw - (y - ry);  Y = cy + ch - (x - rx)
+            return [0, -1, -1, 0, cx + cw + ry, cy + ch + rx];
+    }
+};
+/** Apply an affine matrix to a point (for tests and bounds checks). */
+export const applyMatrix = (m, x, y) => ({
+    x: m[0] * x + m[2] * y + m[4],
+    y: m[1] * x + m[3] * y + m[5],
+});
+export const rectsIntersect = (a, b) => a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y;
+/** Axis-aligned bounds → DocRect, inflated by `pad` on every side. */
+export const boundsToRect = (b, pad = 0) => ({
+    x: b.minX - pad,
+    y: b.minY - pad,
+    width: b.maxX - b.minX + 2 * pad,
+    height: b.maxY - b.minY + 2 * pad,
+});

package/dist/export/pdf/renderCanvasToPdf.d.ts

@@ -0,0 +1,2 @@
+import { type RenderCanvasToPdfInput, type RenderCanvasToPdfResult } from './types.js';
+export declare const renderCanvasToPdf: (input: RenderCanvasToPdfInput) => Promise<RenderCanvasToPdfResult>;

package/dist/export/pdf/renderCanvasToPdf.js

@@ -0,0 +1,201 @@
+// The canvas → PDF renderer: opens the original document, and appends the
+// canvas's layers, marks and tiles to each page's content stream under one
+// matrix per page. The original page content and its own /Annots are never
+// touched, so the source stays vector, searchable and selectable.
+import { EncryptedPDFError, PDFDocument, } from 'pdf-lib';
+import { backgroundLayersOf } from '../../annotation/canvas/backgroundLayers.js';
+import { fitRectToScreen } from '../../annotation/canvas/viewport.js';
+import { STAMP_TILE_SIZE } from '../../annotation/canvas/stampLayout.js';
+import { clipRectOps, withMatrix } from './emit.js';
+import { PdfFonts } from './fonts.js';
+import { layerOps, layerVisibleRect } from './layers.js';
+import { measurementMarkBounds, measurementMarkOps, shapeBounds, shapeOps, strokeBounds, strokeOps, } from './marks.js';
+import { docToPageMatrix, normalizeRotation, pageRectsOf, rectsIntersect, rotatedBoxSize, } from './pageMapping.js';
+import { designBoxFor, tileFootprint, tileOps, } from './tiles.js';
+import { PdfExportError, } from './types.js';
+/** Stored page sizes may differ from the file's boxes by rounding only. */
+const PAGE_SIZE_TOLERANCE_PT = 1.5;
+/**
+ * Reference view for the calibration fallback: the doc-space edge a scale-1
+ * tile covers when the first page is fitted into a landscape tablet-ish view.
+ */
+const FALLBACK_VIEW = { width: 1024, height: 768 };
+const intersectBoxes = (a, b) => {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const top = Math.min(a.y + a.height, b.y + b.height);
+    if (right <= x || top <= y)
+        return a;
+    return { x, y, width: right - x, height: top - y };
+};
+/** PDFium's page box: CropBox ∩ MediaBox, falling back to the MediaBox. */
+const pageBox = (page) => {
+    const media = page.getMediaBox();
+    const crop = page.node.CropBox() ? page.getCropBox() : media;
+    return intersectBoxes(crop, media);
+};
+const embedImage = (doc, img) => img.mime === 'image/png' ? doc.embedPng(img.bytes) : doc.embedJpg(img.bytes);
+const loadSource = async (bytes) => {
+    try {
+        return await PDFDocument.load(bytes, { updateMetadata: false });
+    }
+    catch (e) {
+        if (e instanceof EncryptedPDFError) {
+            throw new PdfExportError('encrypted', 'The source PDF is encrypted and cannot be exported');
+        }
+        throw new PdfExportError('corrupt', `The source PDF could not be parsed: ${e instanceof Error ? e.message : String(e)}`);
+    }
+};
+export const renderCanvasToPdf = async (input) => {
+    const { canvas } = input;
+    const pdfDoc = canvas.viewport.pdfDocument;
+    if (!pdfDoc) {
+        throw new PdfExportError('no-pdf-document', 'This canvas has no PDF document to export');
+    }
+    const doc = await loadSource(input.sourcePdf);
+    const pages = doc.getPages();
+    if (pages.length !== pdfDoc.pageCount ||
+        pdfDoc.pages.length !== pages.length) {
+        throw new PdfExportError('page-count-mismatch', `The canvas records ${pdfDoc.pages.length} pages but the PDF has ${pages.length}`);
+    }
+    const pageRects = pageRectsOf(pdfDoc);
+    const skipped = [];
+    // Per-page geometry, validated against what the canvas was laid out from.
+    const geometry = pages.map((page, i) => {
+        const box = pageBox(page);
+        const rotation = normalizeRotation(page.getRotation().angle);
+        const size = rotatedBoxSize(box, rotation);
+        const stored = pdfDoc.pages[i];
+        if (Math.abs(size.width - stored.width) > PAGE_SIZE_TOLERANCE_PT ||
+            Math.abs(size.height - stored.height) > PAGE_SIZE_TOLERANCE_PT) {
+            throw new PdfExportError('page-geometry-mismatch', `Page ${i + 1} is ${size.width}×${size.height} pt in the PDF but ${stored.width}×${stored.height} pt on the canvas`);
+        }
+        return { page, box, rotation, rect: pageRects[i] };
+    });
+    const fonts = await PdfFonts.create(doc, input.primaryFont);
+    // Background layers: embed once, draw on every page they overlap.
+    const layers = backgroundLayersOf(canvas.viewport);
+    const layerImages = new Map();
+    for (const layer of layers) {
+        if (layer.format === 'svg') {
+            skipped.push({
+                id: layer.id,
+                kind: 'layer',
+                reason: 'SVG background layers are not exported yet',
+            });
+            continue;
+        }
+        const bytes = input.layerImages[layer.id];
+        if (!bytes) {
+            skipped.push({
+                id: layer.id,
+                kind: 'layer',
+                reason: 'Layer image bytes were not provided',
+            });
+            continue;
+        }
+        try {
+            layerImages.set(layer.id, await embedImage(doc, bytes));
+        }
+        catch (e) {
+            skipped.push({
+                id: layer.id,
+                kind: 'layer',
+                reason: `Layer image could not be embedded: ${e instanceof Error ? e.message : String(e)}`,
+            });
+        }
+    }
+    // Tiles: resolve content once; embed object thumbnails once.
+    const tiles = canvas.placedMeasurements.map((placed) => {
+        const content = input.resolveTile(placed) ?? {
+            kind: 'empty',
+        };
+        return { placed, content };
+    });
+    const thumbnails = new Map();
+    for (const { placed, content } of tiles) {
+        if (content.kind === 'object' && content.thumbnail) {
+            try {
+                thumbnails.set(placed.id, await embedImage(doc, content.thumbnail));
+            }
+            catch (e) {
+                skipped.push({
+                    id: placed.id,
+                    kind: 'tile',
+                    reason: `Object thumbnail could not be embedded: ${e instanceof Error ? e.message : String(e)}`,
+                });
+            }
+        }
+    }
+    const firstRect = pageRects[0];
+    const fallbackDocEdge = STAMP_TILE_SIZE /
+        Math.max(fitRectToScreen(firstRect, FALLBACK_VIEW.width, FALLBACK_VIEW.height)
+            .zoom, 1e-6);
+    const hiddenLayerIds = new Set(canvas.layers.filter((l) => l.visible === false).map((l) => l.id));
+    const visible = (layerId) => !hiddenLayerIds.has(layerId);
+    for (const { page, box, rotation, rect } of geometry) {
+        // Per-page resource registries.
+        const alphaStates = new Map();
+        const alphaState = (alpha) => {
+            const a = Math.round(Math.min(1, Math.max(0, alpha)) * 1000) / 1000;
+            if (a >= 1)
+                return undefined;
+            let name = alphaStates.get(a);
+            if (!name) {
+                name = page.node.newExtGState('GSa', doc.context.obj({ Type: 'ExtGState', CA: a, ca: a }));
+                alphaStates.set(a, name);
+            }
+            return name;
+        };
+        const registerImage = (img) => ({
+            name: page.node.newXObject('Im', img.ref),
+            width: img.width,
+            height: img.height,
+        });
+        const ctx = { page, fonts, alphaState, skipped };
+        const onPage = (b) => b !== null && rectsIntersect(b, rect);
+        const ops = [];
+        // 1. Background image layers, array order.
+        for (const layer of layers) {
+            const img = layerImages.get(layer.id);
+            if (!img || !onPage(layerVisibleRect(layer)))
+                continue;
+            ops.push(...layerOps(layer, registerImage(img).name));
+        }
+        // 2. Strokes, then shapes, then measurement lines / rects — the Skia order.
+        for (const s of canvas.strokes) {
+            if (!visible(s.layerId) || !onPage(strokeBounds(s)))
+                continue;
+            ops.push(...strokeOps(s, ctx));
+        }
+        for (const sh of canvas.shapes) {
+            if (!visible(sh.layerId) || !onPage(shapeBounds(sh)))
+                continue;
+            ops.push(...shapeOps(sh, ctx));
+        }
+        for (const { placed } of tiles) {
+            if (!visible(placed.layerId) || !onPage(measurementMarkBounds(placed)))
+                continue;
+            ops.push(...measurementMarkOps(placed, ctx));
+        }
+        // 3. Tiles on top, like the overlay.
+        for (const { placed, content } of tiles) {
+            if (!visible(placed.layerId))
+                continue;
+            const footprint = tileFootprint(placed, canvas, input.calibration, fallbackDocEdge, designBoxFor(placed, content));
+            if (!onPage(footprint))
+                continue;
+            const thumb = thumbnails.get(placed.id);
+            ops.push(...tileOps({ page, fonts, thumbnail: thumb ? registerImage(thumb) : undefined }, content, footprint));
+        }
+        if (ops.length === 0)
+            continue;
+        page.pushOperators(...withMatrix(docToPageMatrix(rect, box, rotation), [
+            ...clipRectOps(rect.x, rect.y, rect.width, rect.height),
+            ...ops,
+        ]));
+    }
+    const pdf = await doc.save({ useObjectStreams: false });
+    return { pdf, pageCount: pages.length, skipped };
+};