@stll/folio-core 0.0.1-placeholder.0 → 0.1.1

package/dist/layout-painter/renderPage.js

@@ -0,0 +1,1795 @@
+import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
+import { resolveFontFamily } from "../utils/fontResolver.js";
+import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
+import { rectsToFloatingZones } from "../layout-engine/measure/floatingZones.js";
+import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
+import { borderToStyle } from "../utils/formatToStyle.js";
+import { renderFragment } from "./renderFragment.js";
+import { applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment } from "./renderImage.js";
+import { emuToPixels } from "./renderUtils.js";
+import { renderParagraphFragment } from "./renderParagraph.js";
+import { renderTableFragment } from "./renderTable.js";
+import { renderTextBoxFragment } from "./renderTextBox.js";
+import { renderWatermarkLayer } from "./renderWatermark.js";
+import { panic } from "better-result";
+//#region src/layout-painter/renderPage.ts
+/**
+* Page Renderer
+*
+* Renders a single page from Layout data to DOM elements.
+* Each page contains positioned fragments within a content area.
+*/
+/**
+* CSS class names for page elements
+*/
+const PAGE_CLASS_NAMES = {
+	page: "layout-page",
+	content: "layout-page-content",
+	header: "layout-page-header",
+	footer: "layout-page-footer"
+};
+const getDefaultPageFontFamily = () => resolveFontFamily("Calibri").cssFallback;
+/**
+* Apply page styles to an element
+*/
+function applyPageStyles(element, width, height, options) {
+	element.style.position = "relative";
+	element.style.width = `${width}px`;
+	element.style.height = `${height}px`;
+	element.style.backgroundColor = options.backgroundColor ?? "var(--doc-canvas, #ffffff)";
+	element.style.color = "var(--doc-canvas-text, #1f2937)";
+	element.style.overflow = "hidden";
+	element.style.border = "none";
+	element.style.boxShadow = "none";
+	element.style.outline = "none";
+	element.style.fontFamily = getDefaultPageFontFamily();
+	element.style.fontSize = `${1056 / 72}px`;
+	element.style.color = "var(--doc-canvas-text, #000)";
+}
+function pageBorderShouldRender(pageNumber, display) {
+	switch (display ?? "allPages") {
+		case "firstPage": return pageNumber === 1;
+		case "notFirstPage": return pageNumber !== 1;
+		case "allPages": return true;
+	}
+}
+function pageBorderSpacePx(border) {
+	return border?.space !== void 0 ? pointsToPixels(border.space) : 0;
+}
+/**
+* Effective rendered border width in pixels. Mirrors `borderToStyle` (1px
+* floor for hairlines) and the 3px floor applied to double borders in
+* `applyPageBorderSide`, so callers can shift the overlay outward by the
+* exact stroke they will see on screen.
+*/
+function pageBorderWidthPx(border) {
+	if (!border || border.style === "none" || border.style === "nil") return 0;
+	const widthPx = border.size !== void 0 && border.size !== 0 ? eighthsToPixels(border.size) : 1;
+	const floored = Math.max(1, widthPx);
+	return border.style === "double" ? Math.max(3, floored) : floored;
+}
+function applyPageBorderSide(element, border, side, theme) {
+	if (!border || border.style === "none" || border.style === "nil") return;
+	const styles = borderToStyle(border, side, theme);
+	for (const [key, value] of Object.entries(styles)) element.style[key] = String(value);
+	const styleKey = `border${side}Style`;
+	const widthKey = `border${side}Width`;
+	if (element.style[styleKey] === "double") {
+		const widthValue = Number.parseFloat(element.style[widthKey] ?? "");
+		if (!Number.isFinite(widthValue) || widthValue < 3) element.style[widthKey] = "3px";
+	}
+}
+function renderPageBorderOverlay(page, options, doc) {
+	const pb = options.pageBorders;
+	if (!pb || !pageBorderShouldRender(page.number, pb.display)) return null;
+	if (![
+		pb.top,
+		pb.bottom,
+		pb.left,
+		pb.right
+	].some((border) => border && border.style !== "none" && border.style !== "nil")) return null;
+	const offsetFrom = pb.offsetFrom ?? "text";
+	const topOffset = pageBorderSpacePx(pb.top);
+	const rightOffset = pageBorderSpacePx(pb.right);
+	const bottomOffset = pageBorderSpacePx(pb.bottom);
+	const leftOffset = pageBorderSpacePx(pb.left);
+	const overlay = doc.createElement("div");
+	overlay.className = "layout-page-border";
+	overlay.style.position = "absolute";
+	overlay.style.pointerEvents = "none";
+	overlay.style.boxSizing = "border-box";
+	overlay.style.zIndex = pb.zOrder === "back" ? "0" : "20";
+	if (offsetFrom === "page") {
+		overlay.style.top = `${topOffset}px`;
+		overlay.style.right = `${rightOffset}px`;
+		overlay.style.bottom = `${bottomOffset}px`;
+		overlay.style.left = `${leftOffset}px`;
+	} else {
+		const topWidth = pageBorderWidthPx(pb.top);
+		const rightWidth = pageBorderWidthPx(pb.right);
+		const bottomWidth = pageBorderWidthPx(pb.bottom);
+		const leftWidth = pageBorderWidthPx(pb.left);
+		overlay.style.top = `${Math.max(0, page.margins.top - topOffset - topWidth)}px`;
+		overlay.style.right = `${Math.max(0, page.margins.right - rightOffset - rightWidth)}px`;
+		overlay.style.bottom = `${Math.max(0, page.margins.bottom - bottomOffset - bottomWidth)}px`;
+		overlay.style.left = `${Math.max(0, page.margins.left - leftOffset - leftWidth)}px`;
+	}
+	applyPageBorderSide(overlay, pb.top, "Top", options.theme);
+	applyPageBorderSide(overlay, pb.bottom, "Bottom", options.theme);
+	applyPageBorderSide(overlay, pb.left, "Left", options.theme);
+	applyPageBorderSide(overlay, pb.right, "Right", options.theme);
+	return overlay;
+}
+/**
+* Refresh the page-border overlay on an existing page shell so incremental
+* rerenders pick up changes to size, margins, page number, or pageBorders
+* options. Removes any stale `.layout-page-border` child before re-attaching
+* with the current z-order (back → first child, front → last child).
+*/
+function syncPageBorderOverlay(pageEl, page, options, doc) {
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-border"))) stale.remove();
+	const overlay = renderPageBorderOverlay(page, options, doc);
+	if (!overlay) return;
+	if (options.pageBorders?.zOrder === "back") pageEl.prepend(overlay);
+	else pageEl.append(overlay);
+}
+/**
+* Refresh the watermark overlay on a rendered page shell. Incremental
+* rerenders replace only the body content area, so the watermark sibling
+* must be reconciled separately when per-section header resolution changes.
+*/
+function syncPageWatermarkOverlay(pageEl, page, options, doc) {
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-watermark"))) stale.remove();
+	const watermark = options.watermark;
+	if (!watermark) return;
+	const overlay = renderWatermarkLayer(watermark, page, doc, options.watermarkImageSrc !== void 0 ? { imageSrc: options.watermarkImageSrc } : {});
+	if (!overlay) return;
+	const contentEl = pageEl.querySelector(`:scope > .${PAGE_CLASS_NAMES.content}`);
+	if (contentEl) {
+		contentEl.before(overlay);
+		return;
+	}
+	pageEl.append(overlay);
+}
+function floatingZonesForFragment(pageWideZones, scopedZones, fragmentIndex) {
+	if (scopedZones.length === 0) return pageWideZones;
+	let activeZones;
+	for (const scopedZone of scopedZones) {
+		if (scopedZone.startsAtFragmentIndex > fragmentIndex) continue;
+		activeZones ??= [...pageWideZones];
+		activeZones.push(scopedZone.zone);
+	}
+	return activeZones ?? pageWideZones;
+}
+/**
+* Apply content area styles to an element
+*/
+function applyContentAreaStyles(element, page) {
+	const margins = page.margins;
+	element.style.position = "absolute";
+	element.style.top = `${margins.top}px`;
+	element.style.left = `${margins.left}px`;
+	element.style.right = `${margins.right}px`;
+	element.style.bottom = `${margins.bottom}px`;
+	element.style.overflow = "visible";
+}
+function getPositionAlignment(position) {
+	return position?.align ?? position?.alignment;
+}
+function resolveHeaderFooterFloatTop(floatImg, layout) {
+	const v = floatImg.position.vertical;
+	if (!v) return floatImg.paragraphY;
+	const align = getPositionAlignment(v);
+	const offsetPx = v.posOffset !== void 0 ? emuToPixels(v.posOffset) : void 0;
+	if (v.relativeTo === "page") {
+		if (offsetPx !== void 0) return offsetPx - layout.flowTop;
+		if (align === "top") return -layout.flowTop;
+		if (align === "bottom") return layout.pageHeight - floatImg.height - layout.flowTop;
+		if (align === "center") return (layout.pageHeight - floatImg.height) / 2 - layout.flowTop;
+	}
+	if (v.relativeTo === "margin") {
+		const marginTop = layout.margins.top;
+		const marginHeight = layout.pageHeight - layout.margins.top - layout.margins.bottom;
+		if (offsetPx !== void 0) return marginTop + offsetPx - layout.flowTop;
+		if (align === "top") return marginTop - layout.flowTop;
+		if (align === "bottom") return marginTop + marginHeight - floatImg.height - layout.flowTop;
+		if (align === "center") return marginTop + (marginHeight - floatImg.height) / 2 - layout.flowTop;
+	}
+	if (offsetPx !== void 0) return floatImg.paragraphY + offsetPx;
+	return floatImg.paragraphY;
+}
+/**
+* Resolve the on-page position of a floating header/footer table
+* (`<w:tbl><w:tblpPr ...>`). ECMA-376 §17.4.57. Returns coordinates
+* relative to the HF container (which itself is positioned at the page's
+* header or footer slot).
+*/
+function resolveHeaderFooterFloatingTablePosition(floating, measure, layout, sourceY) {
+	const horzAnchor = floating.horzAnchor ?? "margin";
+	const vertAnchor = floating.vertAnchor ?? "margin";
+	const horzFrameWidth = horzAnchor === "page" ? layout.pageWidth : layout.contentWidth;
+	const horzFrameOffset = horzAnchor === "page" ? -layout.flowLeft : 0;
+	const vertFrameHeight = vertAnchor === "page" ? layout.pageHeight : layout.pageHeight - layout.margins.top - layout.margins.bottom;
+	const vertFrameOffset = vertAnchor === "page" ? -layout.flowTop : layout.margins.top - layout.flowTop;
+	let left = 0;
+	const xSpec = floating.tblpXSpec;
+	if (xSpec === "left" || xSpec === "inside") left = horzFrameOffset;
+	else if (xSpec === "right" || xSpec === "outside") left = horzFrameOffset + horzFrameWidth - measure.totalWidth;
+	else if (xSpec === "center") left = horzFrameOffset + (horzFrameWidth - measure.totalWidth) / 2;
+	else if (floating.tblpX !== void 0) left = horzFrameOffset + floating.tblpX;
+	let top = sourceY;
+	if (floating.tblpYSpec === "top") top = vertFrameOffset;
+	else if (floating.tblpYSpec === "bottom") top = vertFrameOffset + vertFrameHeight - measure.totalHeight;
+	else if (floating.tblpYSpec === "center") top = vertFrameOffset + (vertFrameHeight - measure.totalHeight) / 2;
+	else if (floating.tblpY !== void 0) top = vertFrameOffset + floating.tblpY;
+	return {
+		left,
+		top
+	};
+}
+/**
+* Resolve the CSS `left` (px string) for an anchored object (image or text box)
+* in a header/footer, honoring `wp:positionH` (relativeTo page/margin, align
+* left/center/right, or posOffset). Shared by floating images and text boxes so
+* a page-centered banner in the header lands centered like Word, not pinned to
+* the left. Ported from eigenpal/docx-editor#700.
+*/
+function resolveHeaderFooterFloatLeft(width, h, layout) {
+	if (!h) return "0";
+	let align = getPositionAlignment(h);
+	if (align === "inside") align = "left";
+	else if (align === "outside") align = "right";
+	if (h.relativeTo === "page") {
+		if (h.posOffset !== void 0) return `${emuToPixels(h.posOffset) - layout.flowLeft}px`;
+		if (align === "right") return `${layout.pageWidth - width - layout.flowLeft}px`;
+		if (align === "center") return `${(layout.pageWidth - width) / 2 - layout.flowLeft}px`;
+		if (align === "left") return `${-layout.flowLeft}px`;
+	}
+	if (h.posOffset !== void 0) return `${emuToPixels(h.posOffset)}px`;
+	if (align === "right") return `${layout.contentWidth - width}px`;
+	if (align === "center") return `${(layout.contentWidth - width) / 2}px`;
+	return "0";
+}
+function applyHeaderFooterFloatHorizontalPosition(img, floatImg, layout) {
+	img.style.left = resolveHeaderFooterFloatLeft(floatImg.width, floatImg.position.horizontal, layout);
+}
+/**
+* Apply fragment positioning styles
+* Note: Fragment x/y include page margins, but fragments are positioned
+* inside the content area which already has margin offsets applied.
+* So we subtract the margins to get content-area-relative positions.
+*/
+function applyFragmentStyles(element, fragment, margins) {
+	element.style.position = "absolute";
+	element.style.left = `${fragment.x - margins.left}px`;
+	element.style.top = `${fragment.y - margins.top}px`;
+	element.style.width = `${fragment.width}px`;
+	if ("height" in fragment) element.style.height = `${fragment.height}px`;
+}
+function resolveHorizontalBand(relativeTo, geometry) {
+	switch (relativeTo) {
+		case "page": return {
+			baseX: -geometry.marginLeft,
+			bandWidth: geometry.pageWidth
+		};
+		case "leftMargin":
+		case "insideMargin": return {
+			baseX: -geometry.marginLeft,
+			bandWidth: geometry.marginLeft
+		};
+		case "rightMargin":
+		case "outsideMargin": return {
+			baseX: geometry.contentWidth,
+			bandWidth: geometry.marginRight
+		};
+		case "character": return {
+			baseX: 0,
+			bandWidth: 0
+		};
+		default: return {
+			baseX: 0,
+			bandWidth: geometry.contentWidth
+		};
+	}
+}
+function resolveVerticalBand(relativeTo, fragmentY, geometry) {
+	switch (relativeTo) {
+		case "page": return {
+			baseY: -geometry.marginTop,
+			bandHeight: geometry.pageHeight
+		};
+		case "topMargin": return {
+			baseY: -geometry.marginTop,
+			bandHeight: geometry.marginTop
+		};
+		case "bottomMargin": return {
+			baseY: geometry.contentHeight,
+			bandHeight: geometry.marginBottom
+		};
+		case "paragraph":
+		case "line": return {
+			baseY: fragmentY,
+			bandHeight: 0
+		};
+		default: return {
+			baseY: 0,
+			bandHeight: geometry.contentHeight
+		};
+	}
+}
+/**
+* Resolve the on-page coordinates of an anchored floating image.
+*
+* Pure function — no DOM, no side effects — so the math is unit-testable
+* without spinning up a full page render. Used by
+* `extractFloatingImagesFromParagraph` for body anchors; mirrors the
+* upstream painter helper introduced in eigenpal #424.
+*
+* The OOXML position is `posOffset` (EMUs from the relativeFrom origin)
+* XOR `align` (symbolic top|center|bottom / left|center|right). When
+* neither is present, the spec means "anchor at the band origin"; for
+* paragraph/line that's the paragraph itself, otherwise the band origin
+* picked by `relativeFrom`.
+*/
+function resolveAnchoredImagePosition(imgRun, fragmentY, geometry) {
+	const position = imgRun.position;
+	const contentWidth = geometry.contentWidth;
+	let side = "left";
+	let x = 0;
+	if (position?.horizontal) {
+		const h = position.horizontal;
+		const { baseX, bandWidth } = resolveHorizontalBand(h.relativeTo, geometry);
+		const horizontalHasBand = h.relativeTo !== "character";
+		if (h.align === "right" || h.align === "outside") {
+			side = "right";
+			x = horizontalHasBand ? baseX + bandWidth - imgRun.width : 0;
+		} else if (h.align === "left" || h.align === "inside") {
+			side = "left";
+			x = baseX;
+		} else if (h.align === "center") {
+			side = "left";
+			x = horizontalHasBand ? baseX + (bandWidth - imgRun.width) / 2 : 0;
+		} else if (h.posOffset !== void 0) {
+			x = baseX + emuToPixels(h.posOffset);
+			side = x > contentWidth / 2 ? "right" : "left";
+		} else x = baseX;
+	} else if (imgRun.cssFloat === "right") {
+		side = "right";
+		x = contentWidth - imgRun.width;
+	}
+	let y;
+	if (position?.vertical) {
+		const v = position.vertical;
+		const { baseY, bandHeight } = resolveVerticalBand(v.relativeTo, fragmentY, geometry);
+		const verticalHasBand = v.relativeTo !== "paragraph" && v.relativeTo !== "line";
+		if (v.align === "top" || v.align === "inside") y = baseY;
+		else if (v.align === "center") y = verticalHasBand ? baseY + (bandHeight - imgRun.height) / 2 : fragmentY;
+		else if (v.align === "bottom" || v.align === "outside") y = verticalHasBand ? baseY + bandHeight - imgRun.height : fragmentY;
+		else if (v.posOffset !== void 0) y = baseY + emuToPixels(v.posOffset);
+		else y = verticalHasBand ? baseY : fragmentY;
+	} else y = fragmentY;
+	return {
+		x,
+		y,
+		side
+	};
+}
+/**
+* Extract floating images from a paragraph block and determine their page-level positions.
+* Returns extracted images and info for the paragraph about space reserved.
+*/
+function extractFloatingImagesFromParagraph(block, fragmentY, geometry) {
+	const floatingImages = [];
+	for (const run of block.runs) {
+		if (run.kind !== "image") continue;
+		const imgRun = run;
+		if (!isFloatingImageRun(imgRun)) continue;
+		const distTop = imgRun.distTop ?? 0;
+		const distBottom = imgRun.distBottom ?? 0;
+		const distLeft = imgRun.distLeft ?? 12;
+		const distRight = imgRun.distRight ?? 12;
+		const { x, y, side } = resolveAnchoredImagePosition(imgRun, fragmentY, geometry);
+		let wrapText;
+		if (imgRun.cssFloat === "left") wrapText = "right";
+		else if (imgRun.cssFloat === "right") wrapText = "left";
+		floatingImages.push({
+			src: imgRun.src,
+			width: imgRun.width,
+			height: imgRun.height,
+			...imgRun.alt !== void 0 ? { alt: imgRun.alt } : {},
+			...imgRun.transform !== void 0 ? { transform: imgRun.transform } : {},
+			...imgRun.opacity != null ? { opacity: imgRun.opacity } : {},
+			side,
+			x,
+			y,
+			distTop,
+			distBottom,
+			distLeft,
+			distRight,
+			...imgRun.pmStart !== void 0 ? { pmStart: imgRun.pmStart } : {},
+			...imgRun.pmEnd !== void 0 ? { pmEnd: imgRun.pmEnd } : {},
+			...wrapText !== void 0 ? { wrapText } : {},
+			...imgRun.wrapType !== void 0 ? { wrapType: imgRun.wrapType } : {},
+			affectsTextWrap: isTextWrappingFloatingImageRun(imgRun),
+			behindDoc: imgRun.wrapType === "behind"
+		});
+	}
+	return floatingImages;
+}
+/**
+* Render floating images into a page-level layer.
+*
+* `layerMode === "behind"` paints below body text (used for `behindDoc`
+* wrapNone images, e.g. full-page letterhead backgrounds). `"front"` paints
+* above text (default for `inFront` wrapNone and side-wrapping images).
+*/
+function renderFloatingImagesLayer(floatingImages, doc, layerMode = "front") {
+	const layer = doc.createElement("div");
+	layer.className = layerMode === "behind" ? "layout-floating-images-layer layout-floating-images-layer-behind" : "layout-floating-images-layer";
+	layer.style.position = "absolute";
+	layer.style.top = "0";
+	layer.style.left = "0";
+	layer.style.right = "0";
+	layer.style.bottom = "0";
+	layer.style.pointerEvents = "none";
+	if (layerMode === "front") layer.style.zIndex = "10";
+	for (const floatImg of floatingImages) {
+		const container = doc.createElement("div");
+		container.className = "layout-page-floating-image";
+		container.style.position = "absolute";
+		container.style.pointerEvents = "auto";
+		container.style.top = `${floatImg.y}px`;
+		container.style.left = `${floatImg.x}px`;
+		if (floatImg.pmStart !== void 0) container.dataset["pmStart"] = String(floatImg.pmStart);
+		if (floatImg.pmEnd !== void 0) container.dataset["pmEnd"] = String(floatImg.pmEnd);
+		const img = doc.createElement("img");
+		img.src = floatImg.src;
+		img.style.width = `${floatImg.width}px`;
+		img.style.height = `${floatImg.height}px`;
+		img.style.display = "block";
+		img.style.maxWidth = "none";
+		img.style.maxHeight = "none";
+		if (floatImg.alt) img.alt = floatImg.alt;
+		if (floatImg.transform) img.style.transform = floatImg.transform;
+		if (hasImageVisualAttrs(floatImg)) applyImageVisualAttrs(img, floatImg);
+		container.append(img);
+		layer.append(container);
+	}
+	return layer;
+}
+/**
+* Render header or footer content
+*/
+function renderHeaderFooterContent(content, context, options, layout) {
+	const doc = options.document ?? document;
+	const containerEl = doc.createElement("div");
+	containerEl.style.position = "relative";
+	const contentWidth = context.contentWidth ?? 600;
+	const floatingImages = [];
+	let cursorY = 0;
+	const hfContext = {
+		...context,
+		positioning: "absolute"
+	};
+	for (let i = 0; i < content.blocks.length; i++) {
+		const block = content.blocks[i];
+		const measure = content.measures[i];
+		if (!block || !measure) continue;
+		if (block.kind === "paragraph" && measure.kind === "paragraph") {
+			const paragraphBlock = block;
+			const paragraphMeasure = measure;
+			const paragraphStartY = cursorY;
+			const inlineRuns = [];
+			for (const run of paragraphBlock.runs) if (run.kind === "image" && (isFloatingImageRun(run) || run.position)) floatingImages.push({
+				src: run.src,
+				width: run.width,
+				height: run.height,
+				...run.alt !== void 0 ? { alt: run.alt } : {},
+				...run.opacity != null ? { opacity: run.opacity } : {},
+				...run.pmStart !== void 0 ? { pmStart: run.pmStart } : {},
+				...run.pmEnd !== void 0 ? { pmEnd: run.pmEnd } : {},
+				paragraphY: paragraphStartY,
+				behindDoc: run.wrapType === "behind",
+				position: run.position ?? {}
+			});
+			else inlineRuns.push(run);
+			const inlineBlock = {
+				...paragraphBlock,
+				runs: inlineRuns
+			};
+			const fragEl = renderParagraphFragment({
+				kind: "paragraph",
+				blockId: paragraphBlock.id,
+				x: 0,
+				y: cursorY,
+				width: contentWidth,
+				height: paragraphMeasure.totalHeight,
+				fromLine: 0,
+				toLine: paragraphMeasure.lines.length
+			}, inlineBlock, paragraphMeasure, hfContext, { document: doc });
+			const spaceBefore = paragraphBlock.attrs?.spacingExplicit?.before === true ? paragraphBlock.attrs?.spacing?.before ?? 0 : 0;
+			fragEl.style.position = "absolute";
+			fragEl.style.top = `${cursorY + spaceBefore}px`;
+			fragEl.style.left = "0";
+			fragEl.style.width = `${contentWidth}px`;
+			containerEl.append(fragEl);
+			cursorY += paragraphMeasure.totalHeight;
+		} else if (block.kind === "table" && measure.kind === "table") {
+			const fragEl = renderTableFragment({
+				kind: "table",
+				blockId: block.id,
+				x: 0,
+				y: cursorY,
+				width: measure.totalWidth,
+				height: measure.totalHeight,
+				fromRow: 0,
+				toRow: measure.rows.length,
+				...block.pmStart !== void 0 ? { pmStart: block.pmStart } : {},
+				...block.pmEnd !== void 0 ? { pmEnd: block.pmEnd } : {}
+			}, block, measure, hfContext, { document: doc });
+			if (block.floating) {
+				const { left, top } = resolveHeaderFooterFloatingTablePosition(block.floating, measure, layout, cursorY);
+				fragEl.style.position = "absolute";
+				fragEl.style.top = `${top}px`;
+				fragEl.style.left = `${left}px`;
+				containerEl.append(fragEl);
+			} else {
+				let inlineLeft = 0;
+				if (block.justification === "center") inlineLeft = (contentWidth - measure.totalWidth) / 2;
+				else if (block.justification === "right") inlineLeft = contentWidth - measure.totalWidth;
+				else if (block.indent) inlineLeft = block.indent;
+				fragEl.style.position = "absolute";
+				fragEl.style.top = `${cursorY}px`;
+				fragEl.style.left = `${inlineLeft}px`;
+				containerEl.append(fragEl);
+				cursorY += measure.totalHeight;
+			}
+		} else if (block.kind === "textBox" && measure.kind === "textBox") {
+			const fragEl = renderTextBoxFragment({
+				kind: "textBox",
+				blockId: block.id,
+				x: 0,
+				y: cursorY,
+				width: measure.width,
+				height: measure.height,
+				...block.pmStart !== void 0 ? { pmStart: block.pmStart } : {},
+				...block.pmEnd !== void 0 ? { pmEnd: block.pmEnd } : {}
+			}, block, measure, hfContext, { document: doc });
+			fragEl.style.top = `${cursorY}px`;
+			fragEl.style.left = resolveHeaderFooterFloatLeft(measure.width, block.position?.horizontal, layout);
+			if (block.wrapType === "behind") fragEl.style.zIndex = "-1";
+			containerEl.append(fragEl);
+			if (!isPositionedHeaderFooterTextBoxBlock(block)) cursorY += measure.height;
+		}
+	}
+	for (const floatImg of floatingImages) {
+		const img = doc.createElement("img");
+		img.src = floatImg.src;
+		img.width = floatImg.width;
+		img.height = floatImg.height;
+		if (floatImg.alt) img.alt = floatImg.alt;
+		img.classList.add("layout-run", "layout-run-image");
+		if (floatImg.pmStart !== void 0) img.dataset["pmStart"] = String(floatImg.pmStart);
+		if (floatImg.pmEnd !== void 0) img.dataset["pmEnd"] = String(floatImg.pmEnd);
+		img.style.position = "absolute";
+		img.style.display = "block";
+		img.style.width = `${floatImg.width}px`;
+		img.style.height = `${floatImg.height}px`;
+		img.style.maxWidth = "none";
+		img.style.maxHeight = "none";
+		if (floatImg.behindDoc) img.style.zIndex = "-1";
+		if (hasImageVisualAttrs(floatImg)) applyImageVisualAttrs(img, floatImg);
+		applyHeaderFooterFloatHorizontalPosition(img, floatImg, layout);
+		img.style.top = `${resolveHeaderFooterFloatTop(floatImg, layout)}px`;
+		containerEl.append(img);
+	}
+	return containerEl;
+}
+function isPositionedHeaderFooterTextBoxBlock(block) {
+	if (block.displayMode === "block" || block.displayMode === "inline") return false;
+	return isFloatingTextBoxBlock(block);
+}
+/**
+* Calculate the painter's actual footnote-area height in pixels:
+* separator slot + per-footnote content (or fallback line) + per-footnote
+* `marginBottom` spacing the painter applies in `renderFootnoteArea`. Used
+* to clamp the paginator's reservation if it under-estimated, so dense
+* stacks never overflow past the page bottom. Mirrors the upstream helper
+* from eigenpal/docx-editor#485, extended for folio's fallback rendering
+* and any wrapper margin so the helper matches the painted stack.
+*/
+function calculateFootnoteAreaRenderHeight(footnotes) {
+	let height = 12;
+	for (const fn of footnotes) {
+		const entryHeight = fn.content ? fn.content.height : 13;
+		height += entryHeight + 0;
+	}
+	return height;
+}
+/**
+* Render the footnote area at the bottom of a page.
+* Includes a separator line (33% width) and footnote entries.
+*/
+function renderFootnoteArea(footnotes, contentWidth, doc, context) {
+	const container = doc.createElement("div");
+	container.className = "layout-footnote-area";
+	container.style.width = `${contentWidth}px`;
+	const separator = doc.createElement("div");
+	const separatorRuleHeight = .5;
+	const separatorMargin = (12 - separatorRuleHeight) / 2;
+	separator.style.width = "33%";
+	separator.style.height = `${separatorRuleHeight}px`;
+	separator.style.backgroundColor = "var(--doc-canvas-text, #000)";
+	separator.style.marginTop = `${separatorMargin}px`;
+	separator.style.marginBottom = `${separatorMargin}px`;
+	container.append(separator);
+	for (const fn of footnotes) {
+		const fnEl = doc.createElement("div");
+		fnEl.style.marginBottom = `0px`;
+		fnEl.style.color = "var(--doc-canvas-text, #000)";
+		if (fn.content) {
+			const contentEl = renderFootnoteContent(fn, contentWidth, doc, context);
+			fnEl.append(contentEl);
+		} else {
+			fnEl.style.fontSize = "10px";
+			fnEl.style.lineHeight = `${13 / 10}`;
+			const sup = doc.createElement("sup");
+			sup.textContent = fn.displayNumber;
+			sup.style.fontSize = "7px";
+			sup.style.marginRight = "2px";
+			fnEl.append(sup);
+			const textNode = doc.createTextNode(` ${fn.text ?? ""}`);
+			fnEl.append(textNode);
+		}
+		container.append(fnEl);
+	}
+	return container;
+}
+function renderFootnoteContent(footnote, contentWidth, doc, context) {
+	const content = footnote.content;
+	if (!content) panic("Missing structured footnote content");
+	const wrapper = doc.createElement("div");
+	wrapper.className = "layout-footnote-content";
+	wrapper.style.position = "relative";
+	wrapper.style.width = `${contentWidth}px`;
+	wrapper.style.height = `${content.height}px`;
+	const renderContext = {
+		pageNumber: context?.pageNumber ?? 0,
+		totalPages: context?.totalPages ?? 0,
+		section: context?.section ?? "body",
+		contentWidth
+	};
+	let y = 0;
+	for (let index = 0; index < content.blocks.length; index++) {
+		const block = content.blocks[index];
+		const measure = content.measures[index];
+		if (!block || !measure) continue;
+		const blockEl = renderFootnoteBlock(block, measure, contentWidth, y, renderContext, doc);
+		if (!blockEl) continue;
+		wrapper.append(blockEl);
+		y += getFootnoteMeasureHeight(measure);
+	}
+	return wrapper;
+}
+function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
+	const renderBlock = stripFootnotePmAnchors(block);
+	if (renderBlock.kind === "paragraph" && measure.kind === "paragraph") {
+		const element = renderParagraphFragment({
+			kind: "paragraph",
+			blockId: renderBlock.id,
+			x: 0,
+			y,
+			width: contentWidth,
+			height: measure.totalHeight,
+			fromLine: 0,
+			toLine: measure.lines.length
+		}, renderBlock, measure, context, { document: doc });
+		positionFootnoteBlock(element, y, contentWidth, measure.totalHeight);
+		return element;
+	}
+	if (renderBlock.kind === "table" && measure.kind === "table") {
+		const element = renderTableFragment({
+			kind: "table",
+			blockId: renderBlock.id,
+			x: 0,
+			y,
+			width: measure.totalWidth,
+			height: measure.totalHeight,
+			fromRow: 0,
+			toRow: renderBlock.rows.length
+		}, renderBlock, measure, context, { document: doc });
+		positionFootnoteBlock(element, y, measure.totalWidth, measure.totalHeight);
+		return element;
+	}
+	if (renderBlock.kind === "image" && measure.kind === "image") {
+		const element = renderImageFragment({
+			kind: "image",
+			blockId: renderBlock.id,
+			x: 0,
+			y,
+			width: measure.width,
+			height: measure.height
+		}, renderBlock, measure, context, { document: doc });
+		positionFootnoteBlock(element, y, measure.width, measure.height);
+		return element;
+	}
+	if (renderBlock.kind === "textBox" && measure.kind === "textBox") {
+		const element = renderTextBoxFragment({
+			kind: "textBox",
+			blockId: renderBlock.id,
+			x: 0,
+			y,
+			width: measure.width,
+			height: measure.height
+		}, renderBlock, measure, context, { document: doc });
+		positionFootnoteBlock(element, y, measure.width, measure.height);
+		return element;
+	}
+	return null;
+}
+function stripFootnotePmAnchors(block) {
+	switch (block.kind) {
+		case "paragraph": return stripFootnoteParagraphPmAnchors(block);
+		case "table": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...table } = block;
+			return {
+				...table,
+				rows: table.rows.map(stripFootnoteTableRowPmAnchors)
+			};
+		}
+		case "image": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...image } = block;
+			return image;
+		}
+		case "textBox": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...textBox } = block;
+			return {
+				...textBox,
+				content: textBox.content.map(stripFootnoteParagraphPmAnchors)
+			};
+		}
+		case "pageBreak":
+		case "columnBreak": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...breakBlock } = block;
+			return breakBlock;
+		}
+		case "sectionBreak": return block;
+		default: return block;
+	}
+}
+function stripFootnoteTableRowPmAnchors(row) {
+	return {
+		...row,
+		cells: row.cells.map(stripFootnoteTableCellPmAnchors)
+	};
+}
+function stripFootnoteTableCellPmAnchors(cell) {
+	return {
+		...cell,
+		blocks: cell.blocks.map(stripFootnotePmAnchors)
+	};
+}
+function stripFootnoteParagraphPmAnchors(block) {
+	const { pmStart: _pmStart, pmEnd: _pmEnd, ...paragraph } = block;
+	return {
+		...paragraph,
+		runs: paragraph.runs.map(stripFootnoteRunPmAnchors)
+	};
+}
+function stripFootnoteRunPmAnchors(run) {
+	switch (run.kind) {
+		case "text": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...textRun } = run;
+			return textRun;
+		}
+		case "tab": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...tabRun } = run;
+			return tabRun;
+		}
+		case "image": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...imageRun } = run;
+			return imageRun;
+		}
+		case "lineBreak": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...lineBreakRun } = run;
+			return lineBreakRun;
+		}
+		case "field": {
+			const { pmStart: _pmStart, pmEnd: _pmEnd, ...fieldRun } = run;
+			return fieldRun;
+		}
+		default: return run;
+	}
+}
+function positionFootnoteBlock(element, top, width, height) {
+	element.style.position = "absolute";
+	element.style.left = "0";
+	element.style.top = `${top}px`;
+	element.style.width = `${width}px`;
+	element.style.height = `${height}px`;
+}
+function getFootnoteMeasureHeight(measure) {
+	if (measure.kind === "paragraph" || measure.kind === "table") return measure.totalHeight;
+	if (measure.kind === "image" || measure.kind === "textBox") return measure.height;
+	return 0;
+}
+/**
+* Render a single page to DOM
+*
+* @param page - The page to render
+* @param context - Rendering context
+* @param options - Rendering options
+* @returns The page DOM element
+*/
+function renderPage(page, context, options = {}) {
+	const doc = options.document ?? document;
+	const pageEl = doc.createElement("div");
+	pageEl.className = options.pageClassName ?? PAGE_CLASS_NAMES.page;
+	pageEl.dataset["pageNumber"] = String(page.number);
+	applyPageStyles(pageEl, page.size.w, page.size.h, options);
+	const pageBorderEl = renderPageBorderOverlay(page, options, doc);
+	if (pageBorderEl && options.pageBorders?.zOrder === "back") pageEl.append(pageBorderEl);
+	if (options.watermark) {
+		const watermarkEl = renderWatermarkLayer(options.watermark, page, doc, options.watermarkImageSrc !== void 0 ? { imageSrc: options.watermarkImageSrc } : {});
+		if (watermarkEl) pageEl.append(watermarkEl);
+	}
+	const contentEl = doc.createElement("div");
+	contentEl.className = PAGE_CLASS_NAMES.content;
+	applyContentAreaStyles(contentEl, page);
+	const contentWidth = page.size.w - page.margins.left - page.margins.right;
+	const allFloatingImages = [];
+	const floatingRects = [];
+	const scopedFloatingRects = [];
+	const pageGeometry = {
+		pageWidth: page.size.w,
+		pageHeight: page.size.h,
+		marginLeft: page.margins.left,
+		marginTop: page.margins.top,
+		marginRight: page.margins.right,
+		marginBottom: page.margins.bottom,
+		contentWidth,
+		contentHeight: page.size.h - page.margins.top - page.margins.bottom
+	};
+	for (const fragment of page.fragments) if (fragment.kind === "paragraph" && options.blockLookup) {
+		const blockData = options.blockLookup.get(String(fragment.blockId));
+		if (blockData?.block.kind === "paragraph") {
+			const paragraphBlock = blockData.block;
+			const extracted = extractFloatingImagesFromParagraph(paragraphBlock, fragment.y - page.margins.top, pageGeometry);
+			allFloatingImages.push(...extracted);
+		}
+	}
+	for (const img of allFloatingImages) {
+		if (!img.affectsTextWrap) continue;
+		floatingRects.push({
+			side: img.side,
+			x: img.x,
+			y: img.y,
+			width: img.width,
+			height: img.height,
+			distTop: img.distTop,
+			distBottom: img.distBottom,
+			distLeft: img.distLeft,
+			distRight: img.distRight,
+			...img.wrapText !== void 0 ? { wrapText: img.wrapText } : {},
+			...img.wrapType !== void 0 ? { wrapType: img.wrapType } : {}
+		});
+	}
+	if (options.blockLookup) for (const fragment of page.fragments) {
+		if (fragment.kind !== "table") continue;
+		const blockData = options.blockLookup.get(String(fragment.blockId));
+		if (blockData?.block.kind !== "table") continue;
+		const floating = blockData.block.floating;
+		if (!floating) continue;
+		const contentX = fragment.x - page.margins.left;
+		const contentY = fragment.y - page.margins.top;
+		const distTop = floating.topFromText ?? 0;
+		const distBottom = floating.bottomFromText ?? 0;
+		const distLeft = floating.leftFromText ?? 12;
+		const distRight = floating.rightFromText ?? 12;
+		const side = contentX < contentWidth / 2 ? "left" : "right";
+		floatingRects.push({
+			side,
+			x: contentX,
+			y: contentY,
+			width: fragment.width,
+			height: fragment.height,
+			distTop,
+			distBottom,
+			distLeft,
+			distRight
+		});
+	}
+	if (options.blockLookup) for (let fragmentIndex = 0; fragmentIndex < page.fragments.length; fragmentIndex++) {
+		const fragment = page.fragments[fragmentIndex];
+		if (fragment.kind !== "textBox") continue;
+		const blockData = options.blockLookup.get(String(fragment.blockId));
+		if (blockData?.block.kind !== "textBox") continue;
+		const textBoxBlock = blockData.block;
+		if (!isFloatingTextBoxBlock(textBoxBlock)) continue;
+		const reservesBand = floatingTextBoxReservesBand(textBoxBlock);
+		if (!reservesBand && !floatingTextBoxWrapsText(textBoxBlock)) continue;
+		const contentX = fragment.x - page.margins.left;
+		const contentY = fragment.y - page.margins.top;
+		const distTop = textBoxBlock.distTop ?? 0;
+		const distBottom = textBoxBlock.distBottom ?? 0;
+		const distLeft = textBoxBlock.distLeft ?? 12;
+		const distRight = textBoxBlock.distRight ?? 12;
+		let side = contentX < contentWidth / 2 ? "left" : "right";
+		if (textBoxBlock.cssFloat === "left") side = "left";
+		else if (textBoxBlock.cssFloat === "right") side = "right";
+		const rect = {
+			side,
+			x: contentX,
+			y: contentY,
+			width: fragment.width,
+			height: fragment.height,
+			distTop,
+			distBottom,
+			distLeft,
+			distRight
+		};
+		if (textBoxBlock.wrapText !== void 0) rect.wrapText = textBoxBlock.wrapText;
+		if (textBoxBlock.wrapType !== void 0) rect.wrapType = textBoxBlock.wrapType;
+		if (reservesBand) scopedFloatingRects.push({
+			startsAtFragmentIndex: fragmentIndex,
+			rect
+		});
+		else floatingRects.push(rect);
+	}
+	const floatingZones = floatingRects.length > 0 ? rectsToFloatingZones(floatingRects, contentWidth) : [];
+	const scopedFloatingZones = scopedFloatingRects.flatMap(({ startsAtFragmentIndex, rect }) => rectsToFloatingZones([rect], contentWidth).map((zone) => ({
+		startsAtFragmentIndex,
+		zone
+	})));
+	const behindFloatingImages = allFloatingImages.filter((img) => img.behindDoc);
+	const frontFloatingImages = allFloatingImages.filter((img) => !img.behindDoc);
+	if (behindFloatingImages.length > 0) {
+		const behindLayer = renderFloatingImagesLayer(behindFloatingImages, doc, "behind");
+		contentEl.append(behindLayer);
+	}
+	const getParaBorders = (frag) => {
+		if (frag.kind !== "paragraph" || !options.blockLookup || !frag.blockId) return;
+		const blockData = options.blockLookup.get(String(frag.blockId));
+		if (blockData?.block.kind === "paragraph") return blockData.block.attrs?.borders;
+	};
+	let prevParagraphBorders;
+	const renderedInlineImageKeysByBlock = /* @__PURE__ */ new Map();
+	for (let i = 0; i < page.fragments.length; i++) {
+		const fragment = page.fragments[i];
+		let fragmentEl;
+		const fragmentContext = {
+			...context,
+			section: "body",
+			contentWidth
+		};
+		const fragmentContentY = fragment.y - page.margins.top;
+		if (options.blockLookup && fragment.blockId) {
+			const blockData = options.blockLookup.get(String(fragment.blockId));
+			if (fragment.kind === "paragraph" && blockData?.block.kind === "paragraph" && blockData.measure.kind === "paragraph") {
+				const paragraphBlock = blockData.block;
+				const nextBorders = i + 1 < page.fragments.length ? getParaBorders(page.fragments[i + 1]) : void 0;
+				const blockKey = String(fragment.blockId);
+				let renderedInlineImageKeys = renderedInlineImageKeysByBlock.get(blockKey);
+				if (!renderedInlineImageKeys) {
+					renderedInlineImageKeys = /* @__PURE__ */ new Set();
+					renderedInlineImageKeysByBlock.set(blockKey, renderedInlineImageKeys);
+				}
+				let paragraphMeasure = blockData.measure;
+				const fragmentFloatingZones = floatingZonesForFragment(floatingZones, scopedFloatingZones, i);
+				if (fragmentFloatingZones.length > 0) paragraphMeasure = measureParagraph(paragraphBlock, contentWidth, {
+					floatingZones: fragmentFloatingZones,
+					paragraphYOffset: fragmentContentY
+				});
+				fragmentEl = renderParagraphFragment(fragment, paragraphBlock, paragraphMeasure, fragmentContext, {
+					document: doc,
+					fragmentContentY,
+					...prevParagraphBorders !== void 0 ? { prevBorders: prevParagraphBorders } : {},
+					...nextBorders !== void 0 ? { nextBorders } : {},
+					renderedInlineImageKeys
+				});
+				prevParagraphBorders = paragraphBlock.attrs?.borders;
+			} else if (fragment.kind === "table" && blockData?.block.kind === "table" && blockData.measure.kind === "table") {
+				fragmentEl = renderTableFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
+				prevParagraphBorders = void 0;
+			} else if (fragment.kind === "image" && blockData?.block.kind === "image" && blockData.measure.kind === "image") {
+				fragmentEl = renderImageFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
+				prevParagraphBorders = void 0;
+			} else if (fragment.kind === "textBox" && blockData?.block.kind === "textBox" && blockData.measure.kind === "textBox") {
+				fragmentEl = renderTextBoxFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
+				prevParagraphBorders = void 0;
+			} else {
+				fragmentEl = renderFragment(fragment, fragmentContext, { document: doc });
+				prevParagraphBorders = void 0;
+			}
+		} else {
+			fragmentEl = renderFragment(fragment, fragmentContext, { document: doc });
+			prevParagraphBorders = void 0;
+		}
+		applyFragmentStyles(fragmentEl, fragment, {
+			left: page.margins.left,
+			top: page.margins.top
+		});
+		contentEl.append(fragmentEl);
+	}
+	if (frontFloatingImages.length > 0) {
+		const frontLayer = renderFloatingImagesLayer(frontFloatingImages, doc, "front");
+		contentEl.append(frontLayer);
+	}
+	if (page.columns && page.columns.separator && page.columns.count > 1) {
+		const colCount = page.columns.count;
+		const colGap = page.columns.gap;
+		const colWidth = (contentWidth - (colCount - 1) * colGap) / colCount;
+		const contentHeight = page.size.h - page.margins.top - page.margins.bottom;
+		for (let col = 0; col < colCount - 1; col++) {
+			const lineX = (col + 1) * colWidth + col * colGap + colGap / 2;
+			const line = doc.createElement("div");
+			line.style.position = "absolute";
+			line.style.left = `${lineX}px`;
+			line.style.top = "0";
+			line.style.height = `${contentHeight}px`;
+			line.style.width = "0.5px";
+			line.style.backgroundColor = "var(--doc-canvas-text, #000)";
+			line.style.pointerEvents = "none";
+			contentEl.append(line);
+		}
+	}
+	if (options.footnoteArea && options.footnoteArea.length > 0) {
+		const fnAreaEl = renderFootnoteArea(options.footnoteArea, contentWidth, doc, context);
+		fnAreaEl.style.position = "absolute";
+		const reservedHeight = Math.max(page.footnoteReservedHeight ?? 0, calculateFootnoteAreaRenderHeight(options.footnoteArea));
+		const contentAreaBottom = page.size.h - page.margins.bottom - page.margins.top;
+		fnAreaEl.style.top = `${Math.max(-page.margins.top, contentAreaBottom - reservedHeight)}px`;
+		fnAreaEl.style.left = "0";
+		fnAreaEl.style.right = "0";
+		contentEl.append(fnAreaEl);
+	}
+	pageEl.append(contentEl);
+	{
+		const headerDistance = options.headerDistance ?? page.margins.header ?? 48;
+		const headerContentWidth = page.size.w - page.margins.left - page.margins.right;
+		const availableHeaderHeight = Math.max(page.margins.top - headerDistance, 48);
+		const headerVisualTop = options.headerContent?.visualTop ?? 0;
+		const headerVisualBottom = options.headerContent?.visualBottom ?? options.headerContent?.height ?? 0;
+		const headerFlowHeight = options.headerContent?.height ?? 0;
+		const interactiveHeaderHeight = Math.max(headerFlowHeight - Math.min(0, headerVisualTop), 24);
+		const headerOverflows = headerVisualBottom > availableHeaderHeight;
+		const headerContentFitsBox = headerVisualBottom - headerVisualTop <= interactiveHeaderHeight;
+		const headerEl = doc.createElement("div");
+		headerEl.className = PAGE_CLASS_NAMES.header;
+		if (options.headerContent?.rId) headerEl.dataset["rid"] = options.headerContent.rId;
+		headerEl.style.position = "absolute";
+		headerEl.style.top = `${headerDistance + headerVisualTop}px`;
+		headerEl.style.left = `${page.margins.left}px`;
+		headerEl.style.right = `${page.margins.right}px`;
+		headerEl.style.width = `${headerContentWidth}px`;
+		headerEl.style.height = `${interactiveHeaderHeight}px`;
+		headerEl.style.minHeight = `${interactiveHeaderHeight}px`;
+		headerEl.style.opacity = "0.62";
+		let shouldClipHeader = !headerOverflows && headerContentFitsBox;
+		if (options.headerContent && options.headerContent.blocks.length > 0) {
+			const headerContentEl = renderHeaderFooterContent(options.headerContent, {
+				...context,
+				section: "header",
+				contentWidth: headerContentWidth
+			}, options, {
+				flowTop: headerDistance,
+				flowLeft: page.margins.left,
+				contentWidth: headerContentWidth,
+				pageWidth: page.size.w,
+				pageHeight: page.size.h,
+				margins: page.margins
+			});
+			headerContentEl.style.top = `${-headerVisualTop}px`;
+			if (headerContentEl.querySelector("img")) shouldClipHeader = false;
+			headerEl.append(headerContentEl);
+		}
+		if (shouldClipHeader) {
+			headerEl.style.maxHeight = `${availableHeaderHeight}px`;
+			headerEl.style.overflow = "hidden";
+		}
+		pageEl.append(headerEl);
+		moveBehindHeaderFooterElementsToPage(headerEl, pageEl, headerDistance, page.margins.left);
+	}
+	{
+		const footerDistance = options.footerDistance ?? page.margins.footer ?? 48;
+		const footerContentWidth = page.size.w - page.margins.left - page.margins.right;
+		const availableFooterHeight = Math.max(page.margins.bottom - footerDistance, 48);
+		const footerFlowHeight = options.footerContent?.height ?? 0;
+		const footerVisualTop = options.footerContent?.visualTop ?? 0;
+		const footerVisualBottom = options.footerContent?.visualBottom ?? footerFlowHeight;
+		const footerOverflows = Math.max(footerVisualBottom - footerVisualTop, 24) > availableFooterHeight;
+		const interactiveFooterHeight = Math.max(footerFlowHeight, 24);
+		const footerNaturalTop = page.size.h - footerDistance - footerFlowHeight;
+		const footerEl = doc.createElement("div");
+		footerEl.className = PAGE_CLASS_NAMES.footer;
+		if (options.footerContent?.rId) footerEl.dataset["rid"] = options.footerContent.rId;
+		footerEl.style.position = "absolute";
+		footerEl.style.top = `${footerNaturalTop}px`;
+		footerEl.style.left = `${page.margins.left}px`;
+		footerEl.style.right = `${page.margins.right}px`;
+		footerEl.style.width = `${footerContentWidth}px`;
+		footerEl.style.height = `${interactiveFooterHeight}px`;
+		footerEl.style.minHeight = `${interactiveFooterHeight}px`;
+		footerEl.style.opacity = "0.62";
+		const footerContentFitsBox = footerVisualBottom - footerVisualTop <= interactiveFooterHeight;
+		let shouldClipFooter = !footerOverflows && footerContentFitsBox;
+		if (options.footerContent && options.footerContent.blocks.length > 0) {
+			const footerContentEl = renderHeaderFooterContent(options.footerContent, {
+				...context,
+				section: "footer",
+				contentWidth: footerContentWidth
+			}, options, {
+				flowTop: footerNaturalTop,
+				flowLeft: page.margins.left,
+				contentWidth: footerContentWidth,
+				pageWidth: page.size.w,
+				pageHeight: page.size.h,
+				margins: page.margins
+			});
+			footerContentEl.style.top = "0px";
+			if (footerContentEl.querySelector("img")) shouldClipFooter = false;
+			footerEl.append(footerContentEl);
+		}
+		if (shouldClipFooter) {
+			footerEl.style.maxHeight = `${availableFooterHeight}px`;
+			footerEl.style.overflow = "hidden";
+		}
+		pageEl.append(footerEl);
+		moveBehindHeaderFooterElementsToPage(footerEl, pageEl, footerNaturalTop, page.margins.left);
+	}
+	if (pageBorderEl && options.pageBorders?.zOrder !== "back") pageEl.append(pageBorderEl);
+	return pageEl;
+}
+function moveBehindHeaderFooterElementsToPage(slotEl, pageEl, contentTop, contentLeft) {
+	const slotKind = slotEl.className.split(" ").includes(PAGE_CLASS_NAMES.header) ? "header" : "footer";
+	const slotRId = slotEl.dataset["rid"];
+	for (const element of Array.from(slotEl.querySelectorAll("img[style*=\"z-index\"], .layout-textbox[style*=\"z-index\"]"))) {
+		if (element.style.zIndex !== "-1") continue;
+		const currentTop = Number.parseFloat(element.style.top) || 0;
+		const currentLeft = Number.parseFloat(element.style.left) || 0;
+		element.style.top = `${currentTop + contentTop}px`;
+		element.style.left = `${currentLeft + contentLeft}px`;
+		if (slotRId) {
+			element.dataset["hfSlotKind"] = slotKind;
+			element.dataset["hfRid"] = slotRId;
+		}
+		element.style.zIndex = "0";
+		pageEl.prepend(element);
+	}
+}
+function applySectionHeaderFooterOptions(page, pageOptions, options) {
+	const refs = page.headerFooterRefs;
+	if (!refs) return false;
+	const isFirstSectionPage = page.sectionPageNumber === 1;
+	const useFirst = refs.titlePg === true && isFirstSectionPage;
+	const useEven = (page.sectionPageNumber ?? page.number) % 2 === 0;
+	const headerRId = (() => {
+		if (useFirst) return refs.headerFirst;
+		if (useEven && refs.headerEven) return refs.headerEven;
+		return refs.headerDefault;
+	})();
+	const footerRId = (() => {
+		if (useFirst) return refs.footerFirst;
+		if (useEven && refs.footerEven) return refs.footerEven;
+		return refs.footerDefault;
+	})();
+	if (headerRId) {
+		const content = options.headerContentByRId?.get(headerRId);
+		if (content) pageOptions.headerContent = content;
+		else delete pageOptions.headerContent;
+	} else delete pageOptions.headerContent;
+	if (footerRId) {
+		const content = options.footerContentByRId?.get(footerRId);
+		if (content) pageOptions.footerContent = content;
+		else delete pageOptions.footerContent;
+	} else delete pageOptions.footerContent;
+	const watermarkByRId = options.watermarkByHeaderRId;
+	if (watermarkByRId) {
+		const pageWatermark = headerRId ? watermarkByRId.get(headerRId) : void 0;
+		if (pageWatermark) pageOptions.watermark = pageWatermark;
+		else delete pageOptions.watermark;
+	}
+	return true;
+}
+/** SECTIONPAGES context fragment for `page`: the page count of its section, or
+*  nothing when section counts were not supplied (field then falls back). */
+function sectionPagesContext(page, counts) {
+	if (!counts) return {};
+	const value = counts.get(page.sectionIndex ?? 0);
+	return value === void 0 ? {} : { sectionPages: value };
+}
+/**
+* Build a RenderContext and resolved page options (with footnotes) for a page.
+* Centralises logic shared by populatePageShell, repopulatePageContent, and the eager render path.
+*/
+function buildPageRenderArgs(page, totalPages, options) {
+	const context = {
+		pageNumber: page.number,
+		totalPages,
+		section: "body",
+		...options.bookmarkPages ? { bookmarkPages: options.bookmarkPages } : {},
+		...options.bookmarkText ? { bookmarkText: options.bookmarkText } : {},
+		...options.seqValues ? { seqValues: options.seqValues } : {},
+		...sectionPagesContext(page, options.sectionPageCounts)
+	};
+	const pageOptions = { ...options };
+	if (!applySectionHeaderFooterOptions(page, pageOptions, options) && options.titlePg && page.number === 1) {
+		if (options.firstPageHeaderContent !== void 0) pageOptions.headerContent = options.firstPageHeaderContent;
+		else delete pageOptions.headerContent;
+		if (options.firstPageFooterContent !== void 0) pageOptions.footerContent = options.firstPageFooterContent;
+		else delete pageOptions.footerContent;
+	}
+	if (options.footnotesByPage) {
+		const fns = options.footnotesByPage.get(page.number);
+		if (fns && fns.length > 0) pageOptions.footnoteArea = fns;
+	}
+	return {
+		context,
+		pageOptions
+	};
+}
+/**
+* Compute a fingerprint string for a page that changes when its content changes.
+* Used to detect which pages need re-rendering on incremental updates.
+*/
+function computePageFingerprint(page, blockLookup) {
+	return computePageFingerprintInternal(page, blockLookup, { includePmPositions: true });
+}
+function computePageRenderFingerprint(page, blockLookup) {
+	return computePageFingerprintInternal(page, blockLookup, { includePmPositions: false });
+}
+function computePageFingerprintInternal(page, blockLookup, options) {
+	const parts = [];
+	parts.push(`s:${page.size.w},${page.size.h}`);
+	parts.push(`m:${page.margins.top},${page.margins.right},${page.margins.bottom},${page.margins.left}`);
+	parts.push(`n:${page.number}`);
+	if (page.sectionIndex !== void 0) parts.push(`si:${page.sectionIndex}`);
+	if (page.sectionPageNumber !== void 0) parts.push(`sp:${page.sectionPageNumber}`);
+	if (page.headerFooterRefs) parts.push(`hf:${JSON.stringify(page.headerFooterRefs)}`);
+	if (page.footnoteReservedHeight) parts.push(`fn:${page.footnoteReservedHeight}`);
+	for (const frag of page.fragments) {
+		let fp = `${frag.kind}:${frag.blockId},${frag.x},${frag.y},${frag.width},${frag.height}`;
+		if (options.includePmPositions && frag.pmStart !== void 0) fp += `,ps:${frag.pmStart}`;
+		if (options.includePmPositions && frag.pmEnd !== void 0) fp += `,pe:${frag.pmEnd}`;
+		if (frag.kind === "paragraph") fp += `,fl:${frag.fromLine},tl:${frag.toLine}`;
+		else if (frag.kind === "table") {
+			fp += `,fr:${frag.fromRow},tr:${frag.toRow}`;
+			if (frag.headerRowCount !== void 0) fp += `,hr:${frag.headerRowCount}`;
+			if (frag.topClip !== void 0) fp += `,tc:${frag.topClip}`;
+			if (frag.bottomClip !== void 0) fp += `,bc:${frag.bottomClip}`;
+			if (frag.continuesFromPrev) fp += ",cfp";
+			if (frag.continuesOnNext) fp += ",con";
+		}
+		if (blockLookup) {
+			const block = blockLookup.get(String(frag.blockId))?.block;
+			const annotationFingerprint = block ? computeAnnotationFingerprint(block, options.includePmPositions) : "";
+			if (annotationFingerprint) fp += `,ann:${annotationFingerprint}`;
+			const contentFingerprint = block ? computeContentFingerprint(block) : "";
+			if (contentFingerprint) fp += `,c:${contentFingerprint}`;
+		}
+		parts.push(fp);
+	}
+	return parts.join("|");
+}
+function computeAnnotationFingerprint(block, includePmPositions) {
+	const parts = [];
+	collectAnnotationFingerprint(block, parts, includePmPositions);
+	return parts.join(";");
+}
+/**
+* Fingerprint of run-level content + formatting that the painter applies via
+* `applyRunStyles`. Geometry alone is insufficient: a mark-only edit (toggle
+* bold/italic/color/etc.) can leave fragment width/height/line counts
+* identical, in which case the geometry fingerprint matches and the
+* incremental render path would skip repopulating the page, leaving the new
+* formatting unpainted.
+*/
+function computeContentFingerprint(block) {
+	const parts = [];
+	collectContentFingerprint(block, parts);
+	return parts.join(";");
+}
+function collectAnnotationFingerprint(block, parts, includePmPositions) {
+	if (block.kind === "paragraph") {
+		for (let index = 0; index < block.runs.length; index++) {
+			const run = block.runs[index];
+			if (!run) continue;
+			if (run.kind !== "text" && run.kind !== "tab" && run.kind !== "field") continue;
+			const runParts = [];
+			if (run.commentIds?.length) runParts.push(`c:${run.commentIds.join(",")}`);
+			if (run.isInsertion) runParts.push(`ins:${run.changeRevisionId ?? ""}`);
+			if (run.isDeletion) runParts.push(`del:${run.changeRevisionId ?? ""}`);
+			if (runParts.length > 0) parts.push(includePmPositions ? `${index}:${run.pmStart ?? ""}-${run.pmEnd ?? ""}:${runParts.join("|")}` : `${index}:${runParts.join("|")}`);
+		}
+		return;
+	}
+	if (block.kind === "table") {
+		for (const row of block.rows) for (const cell of row.cells) for (const child of cell.blocks) collectAnnotationFingerprint(child, parts, includePmPositions);
+		return;
+	}
+	if (block.kind === "textBox") for (const child of block.content) collectAnnotationFingerprint(child, parts, includePmPositions);
+}
+function collectContentFingerprint(block, parts) {
+	if (block.kind === "paragraph") {
+		if (block.attrs?.styleId) parts.push(`p:st:${block.attrs.styleId}`);
+		if (block.attrs?.alignment) parts.push(`p:al:${block.attrs.alignment}`);
+		for (let index = 0; index < block.runs.length; index++) {
+			const run = block.runs[index];
+			if (!run) continue;
+			parts.push(`${index}:${runContentKey(run)}`);
+		}
+		return;
+	}
+	if (block.kind === "table") {
+		for (const row of block.rows) for (const cell of row.cells) for (const child of cell.blocks) collectContentFingerprint(child, parts);
+		return;
+	}
+	if (block.kind === "textBox") for (const child of block.content) collectContentFingerprint(child, parts);
+}
+function runContentKey(run) {
+	if (run.kind === "lineBreak") return "lb";
+	if (run.kind === "image") return `img:${run.src}|${run.width}x${run.height}${run.transform ? `|tr:${run.transform}` : ""}`;
+	const parts = [run.kind];
+	if (run.kind === "text") {
+		parts.push(`t:${run.text}`);
+		if (run.templatePreview) parts.push(`tp:${run.templatePreview}`);
+	} else if (run.kind === "tab") {
+		if (run.width !== void 0) parts.push(`w:${run.width}`);
+	} else if (run.kind === "math") {
+		parts.push(`md:${run.display}`);
+		parts.push(`mx:${run.ommlXml}`);
+	} else {
+		parts.push(`ft:${run.fieldType}`);
+		if (run.instruction !== void 0) parts.push(`fi:${run.instruction}`);
+		if (run.fallback !== void 0) parts.push(`fb:${run.fallback}`);
+		if (run.fldLock) parts.push("fl");
+	}
+	if (run.bold) parts.push("b");
+	if (run.italic) parts.push("i");
+	if (run.underline) parts.push(typeof run.underline === "boolean" ? "u" : `u:${run.underline.style ?? ""}:${run.underline.color ?? ""}`);
+	if (run.strike) parts.push("s");
+	if (run.color) parts.push(`c:${run.color}`);
+	if (run.highlight) parts.push(`hi:${run.highlight}`);
+	if (run.fontFamily) parts.push(`ff:${run.fontFamily}`);
+	if (run.eastAsiaFontFamily) parts.push(`ea:${run.eastAsiaFontFamily}`);
+	if (run.fontSize !== void 0) parts.push(`fs:${run.fontSize}`);
+	if (run.letterSpacing !== void 0) parts.push(`ls:${run.letterSpacing}`);
+	if (run.superscript) parts.push("sup");
+	if (run.subscript) parts.push("sub");
+	if (run.allCaps) parts.push("ac");
+	if (run.smallCaps) parts.push("sc");
+	if (run.positionPx !== void 0) parts.push(`pp:${run.positionPx}`);
+	if (run.horizontalScale !== void 0 && run.horizontalScale !== 100) parts.push(`hs:${run.horizontalScale}`);
+	if (run.imprint) parts.push("imp");
+	if (run.emboss) parts.push("emb");
+	if (run.textShadow) parts.push("sh");
+	if (run.textOutline) parts.push("ol");
+	if (run.emphasisMark) parts.push(`emk:${run.emphasisMark}`);
+	if (run.hyperlink) parts.push(`hl:${run.hyperlink.href}`);
+	return parts.join("|");
+}
+function headerFooterContentFingerprint(prefix, entries) {
+	if (!entries) return [];
+	return Array.from(entries.entries()).toSorted(([left], [right]) => left.localeCompare(right)).map(([rId, content]) => `${prefix}:${rId},${content.blocks.length},${content.height},${content.visualTop ?? 0},${content.visualBottom ?? content.height},${content.textSig ?? ""}`);
+}
+/**
+* Compute a hash for render options that affect all pages globally.
+* When this changes, all pages need a full re-render.
+*/
+function computeOptionsHash(options) {
+	const parts = [];
+	if (options.headerContent) parts.push(`hdr:${options.headerContent.blocks.length},${options.headerContent.height},${options.headerContent.visualTop ?? 0},${options.headerContent.visualBottom ?? options.headerContent.height},${options.headerContent.rId ?? ""},${options.headerContent.textSig ?? ""}`);
+	if (options.footerContent) parts.push(`ftr:${options.footerContent.blocks.length},${options.footerContent.height},${options.footerContent.visualTop ?? 0},${options.footerContent.visualBottom ?? options.footerContent.height},${options.footerContent.rId ?? ""},${options.footerContent.textSig ?? ""}`);
+	parts.push(...headerFooterContentFingerprint("hdr-map", options.headerContentByRId));
+	parts.push(...headerFooterContentFingerprint("ftr-map", options.footerContentByRId));
+	if (options.firstPageHeaderContent) parts.push(`fp-hdr:${options.firstPageHeaderContent.blocks.length},${options.firstPageHeaderContent.height},${options.firstPageHeaderContent.rId ?? ""},${options.firstPageHeaderContent.textSig ?? ""}`);
+	if (options.firstPageFooterContent) parts.push(`fp-ftr:${options.firstPageFooterContent.blocks.length},${options.firstPageFooterContent.height},${options.firstPageFooterContent.rId ?? ""},${options.firstPageFooterContent.textSig ?? ""}`);
+	if (options.titlePg) parts.push("titlePg");
+	if (options.theme) parts.push(`thm:${options.theme.name ?? "default"}`);
+	if (options.pageBorders) parts.push(`pb:${JSON.stringify(options.pageBorders)}`);
+	if (options.headerDistance !== void 0) parts.push(`hd:${options.headerDistance}`);
+	if (options.footerDistance !== void 0) parts.push(`fd:${options.footerDistance}`);
+	if (options.watermark) parts.push(`wm:${JSON.stringify(options.watermark)}`);
+	if (options.watermarkImageSrc !== void 0) parts.push(`wmsrc:${options.watermarkImageSrc}`);
+	if (options.watermarkByHeaderRId) {
+		const entries = [];
+		for (const [rId, wm] of options.watermarkByHeaderRId) entries.push([rId, wm]);
+		entries.sort(([a], [b]) => a.localeCompare(b));
+		parts.push(`wm-map:${JSON.stringify(entries)}`);
+	}
+	return parts.join("|");
+}
+function sortedMapFingerprint(prefix, map) {
+	if (!map || map.size === 0) return [];
+	const entries = [];
+	for (const [key, value] of map) entries.push(`${String(key)}=${String(value)}`);
+	entries.sort();
+	return [`${prefix}:${entries.join(",")}`];
+}
+function computeFieldContextHash(options) {
+	const parts = [];
+	parts.push(...sortedMapFingerprint("bm-page", options.bookmarkPages));
+	parts.push(...sortedMapFingerprint("bm-text", options.bookmarkText));
+	parts.push(...sortedMapFingerprint("seq", options.seqValues));
+	parts.push(...sortedMapFingerprint("section-pages", options.sectionPageCounts));
+	return parts.join("|");
+}
+/**
+* Apply standard container styles for the pages wrapper.
+*/
+function applyContainerStyles(container, pageGap) {
+	container.style.display = "flex";
+	container.style.flexDirection = "column";
+	container.style.alignItems = "center";
+	container.style.gap = `${pageGap}px`;
+	container.style.padding = "0";
+	container.style.backgroundColor = "transparent";
+}
+/**
+* Number of pages to render above and below the visible area.
+* Keeps nearby pages ready for smooth scrolling.
+*/
+const VIRTUALIZATION_BUFFER = 1;
+const VIRTUALIZATION_ROOT_MARGIN_PX = 1e3;
+const INITIAL_EAGER_RENDER_PAGES = 3;
+/**
+* Minimum page count before virtualization kicks in.
+* Small documents render all pages eagerly for simplicity.
+*/
+const VIRTUALIZATION_THRESHOLD = 8;
+/**
+* Render multiple pages to a container with virtualization for large documents.
+*
+* For documents with fewer than VIRTUALIZATION_THRESHOLD pages, all pages
+* are rendered eagerly. For larger documents, only pages near the visible
+* viewport are fully rendered — off-screen pages are lightweight shells
+* with correct dimensions to preserve scroll position.
+*
+* An IntersectionObserver watches page elements and populates/clears
+* content as pages scroll into and out of view.
+*/
+function renderPages(pages, container, options = {}) {
+	const totalPages = pages.length;
+	const pageGap = options.pageGap ?? 24;
+	const pc = container;
+	const prevState = pc.__pageRenderState;
+	const currentOptionsHash = computeOptionsHash(options);
+	const currentFieldContextHash = computeFieldContextHash(options);
+	const useVirtualization = totalPages >= VIRTUALIZATION_THRESHOLD;
+	if (prevState && prevState.optionsHash === currentOptionsHash && useVirtualization) {
+		const prevShells = prevState.pageStates;
+		const prevDataMap = prevState.pageDataMap;
+		const observer = pc.__pageObserver;
+		const totalPagesChanged = prevState.totalPages !== totalPages;
+		const fieldContextChanged = prevState.fieldContextHash !== currentFieldContextHash;
+		const commonCount = Math.min(prevShells.length, pages.length);
+		for (let i = 0; i < commonCount; i++) {
+			const prev = prevShells[i];
+			const page = pages[i];
+			const data = prevDataMap.get(prev.element);
+			if (!data) continue;
+			const oldPage = data.page;
+			data.page = page;
+			if (!data.rendered) {
+				prev.fingerprint = null;
+				prev.renderFingerprint = null;
+				applyPageStyles(prev.element, page.size.w, page.size.h, options);
+				syncPageBorderOverlay(prev.element, page, options, options.document ?? document);
+				prev.element.dataset["pageNumber"] = String(page.number);
+				continue;
+			}
+			const newFp = computePageFingerprint(page, options.blockLookup);
+			if (prev.fingerprint === newFp && !totalPagesChanged && !fieldContextChanged) continue;
+			const shell = prev.element;
+			if (totalPagesChanged || fieldContextChanged) {
+				shell.innerHTML = "";
+				data.rendered = false;
+				populatePageShell(shell, prevDataMap, totalPages, options);
+				applyPageStyles(shell, page.size.w, page.size.h, options);
+				syncPageBorderOverlay(shell, page, options, options.document ?? document);
+				shell.dataset["pageNumber"] = String(page.number);
+				continue;
+			}
+			const newRenderFp = computePageRenderFingerprint(page, options.blockLookup);
+			if (!(!(prev.renderFingerprint !== newRenderFp) && syncRenderedPmPositionData(shell, oldPage, data.page))) repopulatePageContent(shell, prevDataMap, totalPages, options);
+			prev.fingerprint = newFp;
+			prev.renderFingerprint = newRenderFp;
+			applyPageStyles(shell, page.size.w, page.size.h, options);
+			syncPageBorderOverlay(shell, page, options, options.document ?? document);
+			shell.dataset["pageNumber"] = String(page.number);
+		}
+		if (pages.length > prevShells.length) {
+			const doc = options.document ?? document;
+			for (let i = prevShells.length; i < pages.length; i++) {
+				const page = pages[i];
+				const pageEl = doc.createElement("div");
+				pageEl.className = options.pageClassName ?? PAGE_CLASS_NAMES.page;
+				pageEl.dataset["pageNumber"] = String(page.number);
+				pageEl.dataset["pageIndex"] = String(i);
+				applyPageStyles(pageEl, page.size.w, page.size.h, options);
+				syncPageBorderOverlay(pageEl, page, options, doc);
+				container.append(pageEl);
+				prevShells.push({
+					element: pageEl,
+					fingerprint: null,
+					renderFingerprint: null
+				});
+				prevDataMap.set(pageEl, {
+					page,
+					index: i,
+					rendered: false
+				});
+				if (observer) observer.observe(pageEl);
+			}
+		}
+		if (pages.length < prevShells.length) {
+			for (let i = prevShells.length - 1; i >= pages.length; i--) {
+				const shell = prevShells[i].element;
+				if (observer) observer.unobserve(shell);
+				prevDataMap.delete(shell);
+				shell.remove();
+			}
+			prevShells.length = pages.length;
+		}
+		for (let i = 0; i < prevShells.length; i++) {
+			const data = prevDataMap.get(prevShells[i].element);
+			if (data) data.index = i;
+		}
+		prevState.totalPages = totalPages;
+		prevState.fieldContextHash = currentFieldContextHash;
+		prevState.currentOptions = options;
+		emitPainterPainted(container);
+		return;
+	}
+	const prevObserver = pc.__pageObserver;
+	if (prevObserver) {
+		prevObserver.disconnect();
+		delete pc.__pageObserver;
+	}
+	const pageShellClass = options.pageClassName ?? PAGE_CLASS_NAMES.page;
+	const isPageShell = (el) => el.className.split(/\s+/u).includes(pageShellClass);
+	const existingChildren = Array.from(container.children);
+	const overlayBefore = existingChildren.find((el) => !isPageShell(el)) ?? null;
+	for (const el of existingChildren) if (isPageShell(el)) el.remove();
+	delete pc.__pageRenderState;
+	applyContainerStyles(container, pageGap);
+	const pageShells = [];
+	for (let i = 0; i < pages.length; i++) {
+		const page = pages[i];
+		if (!useVirtualization) {
+			const { context, pageOptions } = buildPageRenderArgs(page, totalPages, options);
+			const pageEl = renderPage(page, context, pageOptions);
+			container.insertBefore(pageEl, overlayBefore);
+			pageShells.push(pageEl);
+		} else {
+			const doc = options.document ?? document;
+			const pageEl = doc.createElement("div");
+			pageEl.className = options.pageClassName ?? PAGE_CLASS_NAMES.page;
+			pageEl.dataset["pageNumber"] = String(page.number);
+			pageEl.dataset["pageIndex"] = String(i);
+			applyPageStyles(pageEl, page.size.w, page.size.h, options);
+			syncPageBorderOverlay(pageEl, page, options, doc);
+			container.insertBefore(pageEl, overlayBefore);
+			pageShells.push(pageEl);
+		}
+	}
+	if (!useVirtualization) {
+		emitPainterPainted(container);
+		return;
+	}
+	const pageDataMap = /* @__PURE__ */ new Map();
+	for (let i = 0; i < pages.length; i++) pageDataMap.set(pageShells[i], {
+		page: pages[i],
+		index: i,
+		rendered: false
+	});
+	const observer = new IntersectionObserver((entries) => {
+		const renderState = pc.__pageRenderState;
+		if (!renderState) return;
+		const { currentOptions: liveOptions, totalPages: liveTotalPages, pageDataMap: liveDataMap } = renderState;
+		for (const entry of entries) {
+			if (!(entry.target instanceof HTMLElement)) continue;
+			const shell = entry.target;
+			const data = liveDataMap.get(shell);
+			if (!data) continue;
+			if (entry.isIntersecting) {
+				populatePageShell(shell, liveDataMap, liveTotalPages, liveOptions);
+				for (let offset = -1; offset <= VIRTUALIZATION_BUFFER; offset++) {
+					const neighborIdx = data.index + offset;
+					if (neighborIdx >= 0 && neighborIdx < renderState.pageStates.length && neighborIdx !== data.index) populatePageShell(renderState.pageStates[neighborIdx].element, liveDataMap, liveTotalPages, liveOptions);
+				}
+			}
+		}
+		const viewportHeight = window.innerHeight;
+		const nearThreshold = viewportHeight * 3;
+		const nearIndices = /* @__PURE__ */ new Set();
+		for (const [el, data] of liveDataMap) {
+			if (!data.rendered) continue;
+			const rect = el.getBoundingClientRect();
+			if (rect.bottom > -nearThreshold && rect.top < viewportHeight + nearThreshold) nearIndices.add(data.index);
+		}
+		for (const [el, data] of liveDataMap) {
+			if (!data.rendered) continue;
+			let keepRendered = false;
+			for (const nearIdx of nearIndices) if (Math.abs(data.index - nearIdx) <= 2) {
+				keepRendered = true;
+				break;
+			}
+			if (!keepRendered && nearIndices.size > 0) depopulatePageShell(el, liveDataMap);
+		}
+	}, {
+		root: null,
+		rootMargin: `${VIRTUALIZATION_ROOT_MARGIN_PX}px 0px ${VIRTUALIZATION_ROOT_MARGIN_PX}px 0px`
+	});
+	for (const shell of pageShells) observer.observe(shell);
+	pc.__pageObserver = observer;
+	pc.__pageRenderState = {
+		pageStates: pageShells.map((el) => ({
+			element: el,
+			fingerprint: null,
+			renderFingerprint: null
+		})),
+		totalPages,
+		optionsHash: currentOptionsHash,
+		fieldContextHash: currentFieldContextHash,
+		pageDataMap,
+		currentOptions: options
+	};
+	const initialRenderCount = Math.min(pages.length, INITIAL_EAGER_RENDER_PAGES);
+	for (let i = 0; i < initialRenderCount; i++) populatePageShell(pageShells[i], pageDataMap, totalPages, options);
+	emitPainterPainted(container);
+}
+const PAINTER_PAINTED_EVENT = "painter:painted";
+function emitPainterPainted(container) {
+	const pageCount = container.querySelectorAll(`.${PAGE_CLASS_NAMES.page}`).length;
+	const event = new CustomEvent(PAINTER_PAINTED_EVENT, {
+		detail: {
+			container,
+			pageCount
+		},
+		bubbles: true,
+		cancelable: false
+	});
+	container.dispatchEvent(event);
+}
+/**
+* Populate a page shell with full rendered content.
+*/
+function populatePageShell(shell, pageDataMap, totalPages, options) {
+	const data = pageDataMap.get(shell);
+	if (!data || data.rendered) return;
+	const { context, pageOptions } = buildPageRenderArgs(data.page, totalPages, options);
+	const fullPageEl = renderPage(data.page, context, pageOptions);
+	for (const stale of Array.from(shell.querySelectorAll(":scope > .layout-page-border"))) stale.remove();
+	while (fullPageEl.firstChild) shell.append(fullPageEl.firstChild);
+	data.rendered = true;
+	syncPageShellFingerprints(shell, data, options);
+	const container = shell.parentElement;
+	if (container instanceof HTMLElement) emitPainterPainted(container);
+}
+/**
+* Surgically replace only the content area of a rendered page shell.
+* Preserves header/footer elements to avoid blinking.
+*/
+function repopulatePageContent(shell, pageDataMap, totalPages, options) {
+	const data = pageDataMap.get(shell);
+	if (!data) return;
+	const { context, pageOptions } = buildPageRenderArgs(data.page, totalPages, options);
+	const newContentEl = renderPage(data.page, context, pageOptions).querySelector(`.${PAGE_CLASS_NAMES.content}`);
+	const oldContentEl = shell.querySelector(`.${PAGE_CLASS_NAMES.content}`);
+	if (newContentEl && oldContentEl) {
+		oldContentEl.replaceWith(newContentEl);
+		syncPageWatermarkOverlay(shell, data.page, pageOptions, options.document ?? document);
+		return;
+	}
+	shell.innerHTML = "";
+	data.rendered = false;
+	populatePageShell(shell, pageDataMap, totalPages, options);
+}
+function syncRenderedPmPositionData(shell, oldPage, newPage) {
+	const delta = getUniformPagePositionDelta(oldPage, newPage);
+	if (delta === null) return false;
+	if (delta === 0) return true;
+	for (const element of shell.querySelectorAll("[data-pm-start], [data-pm-end], [data-table-pm-start]")) {
+		shiftNumericDatasetValue(element, "pmStart", delta);
+		shiftNumericDatasetValue(element, "pmEnd", delta);
+		shiftNumericDatasetValue(element, "tablePmStart", delta);
+	}
+	return true;
+}
+function getUniformPagePositionDelta(oldPage, newPage) {
+	if (oldPage.fragments.length !== newPage.fragments.length) return null;
+	let delta = null;
+	for (let i = 0; i < oldPage.fragments.length; i++) {
+		const oldFragment = oldPage.fragments[i];
+		const newFragment = newPage.fragments[i];
+		if (!oldFragment || !newFragment) return null;
+		if (oldFragment.kind !== newFragment.kind || oldFragment.blockId !== newFragment.blockId) return null;
+		const startDelta = readPositionDelta(oldFragment.pmStart, newFragment.pmStart);
+		if (startDelta !== null) {
+			if (delta !== null && delta !== startDelta) return null;
+			delta = startDelta;
+		}
+		const endDelta = readPositionDelta(oldFragment.pmEnd, newFragment.pmEnd);
+		if (endDelta !== null) {
+			if (delta !== null && delta !== endDelta) return null;
+			delta = endDelta;
+		}
+	}
+	return delta;
+}
+function readPositionDelta(previous, next) {
+	if (previous === void 0 && next === void 0) return null;
+	if (previous === void 0 || next === void 0) return null;
+	return next - previous;
+}
+function shiftNumericDatasetValue(element, key, delta) {
+	const value = element.dataset[key];
+	if (value === void 0) return;
+	const numeric = Number(value);
+	if (!Number.isFinite(numeric)) return;
+	element.dataset[key] = String(numeric + delta);
+}
+function syncPageShellFingerprints(shell, data, options) {
+	const pageState = shell.parentElement?.__pageRenderState?.pageStates[data.index];
+	if (!pageState || pageState.element !== shell) return;
+	pageState.fingerprint = computePageFingerprint(data.page, options.blockLookup);
+	pageState.renderFingerprint = computePageRenderFingerprint(data.page, options.blockLookup);
+}
+/**
+* Find the page shell whose layout fragments cover (or are nearest
+* before) a given ProseMirror position. Returns null if the
+* container has no virtualization state — callers should fall back
+* to the cheaper run-level DOM query in that case.
+*
+* Uses the layout-side Page records (always present even when a
+* page's content hasn't rendered yet under virtualization), so the
+* caller can scroll to the correct page shell and let the
+* IntersectionObserver populate it on demand. This avoids the
+* "many clicks to arrive" failure mode where a per-run DOM query
+* only finds runs in the currently-rendered buffer and steps the
+* viewport one buffer at a time.
+*/
+function findPageShellForPmPos(container, pmPos) {
+	const dataMap = container.__pageRenderState?.pageDataMap;
+	if (!dataMap || dataMap.size === 0) return null;
+	let bestStartShell = null;
+	let bestStart = Number.NEGATIVE_INFINITY;
+	for (const [shell, entry] of dataMap) {
+		let pageStart = Number.POSITIVE_INFINITY;
+		let pageEnd = Number.NEGATIVE_INFINITY;
+		for (const fragment of entry.page.fragments) {
+			if (fragment.pmStart !== void 0 && fragment.pmStart < pageStart) pageStart = fragment.pmStart;
+			if (fragment.pmEnd !== void 0 && fragment.pmEnd > pageEnd) pageEnd = fragment.pmEnd;
+		}
+		if (pageStart === Number.POSITIVE_INFINITY) continue;
+		if (pageStart <= pmPos && pmPos <= pageEnd) return {
+			element: shell,
+			isExact: true
+		};
+		if (pageStart <= pmPos && pageStart > bestStart) {
+			bestStart = pageStart;
+			bestStartShell = shell;
+		}
+	}
+	return bestStartShell ? {
+		element: bestStartShell,
+		isExact: false
+	} : null;
+}
+/**
+* Clear a page shell's content (keep shell dimensions for scroll).
+*/
+function depopulatePageShell(shell, pageDataMap) {
+	const data = pageDataMap.get(shell);
+	if (!data || !data.rendered) return;
+	shell.innerHTML = "";
+	data.rendered = false;
+	const pageState = shell.parentElement?.__pageRenderState?.pageStates[data.index];
+	if (pageState?.element === shell) {
+		pageState.fingerprint = null;
+		pageState.renderFingerprint = null;
+	}
+}
+//#endregion
+export { PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, getDefaultPageFontFamily, isFloatingImageRun, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft };