@stll/folio-core 0.61.0 → 0.63.0

package/dist/layout-painter/renderPage.d.ts

@@ -1,14 +1,15 @@
 import { document_d_exports } from "../types/document.js";
+import { DocumentFontFacts } from "../fonts/documentFontFacts.js";
 import { FootnoteContent, HeaderFooterContent, ImageRun, Page, isFloatingImageRun } from "../layout-engine/types.js";
-import { RenderContext, emuToPixels } from "./renderUtils.js";
 import { AnchoredImagePosition, PageGeometry } from "./anchoredImagePosition.js";
+import { RenderContext, emuToPixels } from "./renderUtils.js";
 import { BlockLookup } from "./index.js";
 //#region src/layout-painter/renderPage.d.ts
 /**
  * Page-level floating image that has been extracted from paragraphs.
  * These are positioned absolutely within the page's content area.
  */
-type PageFloatingImage = {
+export type PageFloatingImage = {
   src: string;
   width: number;
   height: number;
@@ -59,21 +60,21 @@ type FloatingTableBandOptions = {
   distLeft: number;
   distRight: number;
 };
-declare const floatingTableReservesBand: ({ contentX, tableWidth, contentWidth, distLeft, distRight }: FloatingTableBandOptions) => boolean;
+export declare const floatingTableReservesBand: ({ contentX, tableWidth, contentWidth, distLeft, distRight }: FloatingTableBandOptions) => boolean;
 /**
  * CSS class names for page elements
  */
-declare const PAGE_CLASS_NAMES: {
+export declare const PAGE_CLASS_NAMES: {
   page: string;
   content: string;
   header: string;
   footer: string;
 };
-declare const getDefaultPageFontFamily: () => string;
+export declare const getDefaultPageFontFamily: () => string;
 /**
  * A single footnote item ready for rendering at page bottom.
  */
-type FootnoteRenderItem = {
+export type FootnoteRenderItem = {
   /** Stable story id used by editable-note surfaces. */
   noteId?: number;
   /** Display number (e.g. "1", "2") */
@@ -87,13 +88,14 @@ type FootnoteRenderItem = {
  * Options for rendering a page
  */
 /** Everything a replacement page renderer is handed. */
-type PaintPageRequest = {
+export type PaintPageRequest = {
   readonly page: Page;
   readonly context: RenderContext;
   readonly options: RenderPageOptions;
 };
-type RenderPageOptions = {
+export type RenderPageOptions = {
   embeddedFontFamilyMap?: ReadonlyMap<string, string>;
+  documentFontFacts?: DocumentFontFacts;
   /** Document to create elements in (default: window.document) */
   document?: Document;
   /** Bookmark name -> 1-indexed page, for resolving PAGEREF fields at paint. */
@@ -184,7 +186,7 @@ type RenderPageOptions = {
    */
   paintPage?: (request: PaintPageRequest) => HTMLElement | null;
 };
-type HeaderFooterLayoutInfo = {
+export type HeaderFooterLayoutInfo = {
   flowTop: number;
   flowLeft: number;
   contentWidth: number;
@@ -210,8 +212,8 @@ type HeaderFooterHorizontalPosition = {
  * a page-centered banner in the header lands centered like Word, not pinned to
  * the left. Ported from eigenpal/docx-editor#700.
  */
-declare function resolveHeaderFooterFloatLeft(width: number, h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): string;
-declare function resolveHeaderFooterIntrinsicFrameHorizontalPosition(h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): {
+export declare function resolveHeaderFooterFloatLeft(width: number, h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): string;
+export declare function resolveHeaderFooterIntrinsicFrameHorizontalPosition(h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): {
   left: string;
   transform?: string;
 };
@@ -229,7 +231,7 @@ declare function resolveHeaderFooterIntrinsicFrameHorizontalPosition(h: HeaderFo
  * paragraph/line that's the paragraph itself, otherwise the band origin
  * picked by `relativeFrom`.
  */
-declare function resolveAnchoredImagePosition(imgRun: ImageRun, fragmentY: number, geometry: PageGeometry): AnchoredImagePosition;
+export declare function resolveAnchoredImagePosition(imgRun: ImageRun, fragmentY: number, geometry: PageGeometry): AnchoredImagePosition;
 /**
  * Render floating images into a page-level layer.
  *
@@ -237,7 +239,7 @@ declare function resolveAnchoredImagePosition(imgRun: ImageRun, fragmentY: numbe
  * wrapNone images, e.g. full-page letterhead backgrounds). `"front"` paints
  * above text (default for `inFront` wrapNone and side-wrapping images).
  */
-declare function renderFloatingImagesLayer(floatingImages: PageFloatingImage[], doc: Document, layerMode?: "front" | "behind"): HTMLElement;
+export declare function renderFloatingImagesLayer(floatingImages: PageFloatingImage[], doc: Document, layerMode?: "front" | "behind"): HTMLElement;
 /**
  * Calculate the painter's actual footnote-area height in pixels:
  * separator slot + per-footnote content (or fallback line) + per-footnote
@@ -247,12 +249,12 @@ declare function renderFloatingImagesLayer(floatingImages: PageFloatingImage[],
  * from eigenpal/docx-editor#485, extended for folio's fallback rendering
  * and any wrapper margin so the helper matches the painted stack.
  */
-declare function calculateFootnoteAreaRenderHeight(footnotes: FootnoteRenderItem[]): number;
+export declare function calculateFootnoteAreaRenderHeight(footnotes: FootnoteRenderItem[]): number;
 /**
  * Render the footnote area at the bottom of a page.
  * Includes a separator line (33% width) and footnote entries.
  */
-declare function renderFootnoteArea(footnotes: FootnoteRenderItem[], contentWidth: number, doc: Document, context?: RenderContext): HTMLElement;
+export declare function renderFootnoteArea(footnotes: FootnoteRenderItem[], contentWidth: number, doc: Document, context?: RenderContext): HTMLElement;
 /**
  * Render a single page to DOM
  *
@@ -261,7 +263,7 @@ declare function renderFootnoteArea(footnotes: FootnoteRenderItem[], contentWidt
  * @param options - Rendering options
  * @returns The page DOM element
  */
-declare function renderPage(page: Page, context: RenderContext, options?: RenderPageOptions): HTMLElement;
+export declare function renderPage(page: Page, context: RenderContext, options?: RenderPageOptions): HTMLElement;
 /**
  * Which header and footer part a page selects, by `w:titlePg` and
  * `w:evenAndOddHeaders`. Exported because a second consumer needs to tell "this
@@ -269,16 +271,16 @@ declare function renderPage(page: Page, context: RenderContext, options?: Render
  * recomputing the rule to answer that is how the two would come to disagree
  * about which header a page carries. `undefined` means the page selects none.
  */
-declare function selectSectionHeaderFooterRIds(page: Page): {
+export declare function selectSectionHeaderFooterRIds(page: Page): {
   headerRId: string | undefined;
   footerRId: string | undefined;
 };
-declare function applySectionHeaderFooterOptions(page: Page, pageOptions: RenderPageOptions, options: RenderPageOptions): boolean;
+export declare function applySectionHeaderFooterOptions(page: Page, pageOptions: RenderPageOptions, options: RenderPageOptions): boolean;
 /**
  * Compute a fingerprint string for a page that changes when its content changes.
  * Used to detect which pages need re-rendering on incremental updates.
  */
-declare function computePageFingerprint(page: Page, blockLookup?: BlockLookup): string;
+export declare function computePageFingerprint(page: Page, blockLookup?: BlockLookup): string;
 /**
  * Render multiple pages to a container with virtualization for large documents.
  *
@@ -290,12 +292,12 @@ declare function computePageFingerprint(page: Page, blockLookup?: BlockLookup):
  * An IntersectionObserver watches page elements and populates/clears
  * content as pages scroll into and out of view.
  */
-declare function renderPages(pages: Page[], container: HTMLElement, options?: RenderPageOptions & {
+export declare function renderPages(pages: Page[], container: HTMLElement, options?: RenderPageOptions & {
   pageGap?: number;
   footnotesByPage?: Map<number, FootnoteRenderItem[]>;
 }): void;
-declare const PAINTER_PAINTED_EVENT: "painter:painted";
-type PainterPaintedDetail = {
+export declare const PAINTER_PAINTED_EVENT: "painter:painted";
+export type PainterPaintedDetail = {
   container: HTMLElement;
   pageCount: number;
 };
@@ -313,7 +315,7 @@ type PainterPaintedDetail = {
  *
  * Ported from eigenpal/docx-editor `layout-painter/renderPage/virtualization.ts`.
  */
-declare function renderAllPagesNow(container: HTMLElement): number;
+export declare function renderAllPagesNow(container: HTMLElement): number;
 /**
  * Find the page shell whose layout fragments cover (or are nearest
  * before) a given ProseMirror position. Returns null if the
@@ -328,9 +330,9 @@ declare function renderAllPagesNow(container: HTMLElement): number;
  * only finds runs in the currently-rendered buffer and steps the
  * viewport one buffer at a time.
  */
-declare function findPageShellForPmPos(container: HTMLElement, pmPos: number): {
+export declare function findPageShellForPmPos(container: HTMLElement, pmPos: number): {
   element: HTMLElement;
   isExact: boolean;
 } | null;
 //#endregion
-export { type AnchoredImagePosition, FootnoteRenderItem, type HeaderFooterContent, HeaderFooterLayoutInfo, PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, PageFloatingImage, type PageGeometry, PaintPageRequest, PainterPaintedDetail, type RenderContext, RenderPageOptions, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, floatingTableReservesBand, getDefaultPageFontFamily, isFloatingImageRun, renderAllPagesNow, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft, resolveHeaderFooterIntrinsicFrameHorizontalPosition, selectSectionHeaderFooterRIds };
+export { type AnchoredImagePosition, type HeaderFooterContent, type PageGeometry, type RenderContext, emuToPixels, isFloatingImageRun };

package/dist/layout-painter/renderPage.js

@@ -1,3 +1,5 @@
+import { releaseDisplayPageResources } from "../display-list/pageResourceOwnership.js";
+import { documentFontFactsCacheIdentity } from "../fonts/documentFontFacts.js";
 import { embeddedFontFingerprint } from "../fonts/embeddedFontFingerprint.js";
 import "../layout-engine/measure/floatingLineClearance.js";
 import { resolveFloatingTableX } from "../layout-engine/measure/floatingTablePosition.js";
@@ -10,6 +12,7 @@ import { cssBorderStyle } from "../utils/borderCss.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { borderToStyle } from "../utils/formatToStyle.js";
 import { normalizeHorizontalScalePercent } from "../utils/horizontalScale.js";
+import { pageHorizontalColumns, paragraphInlinePictureViewport } from "../utils/paragraphInlineLayout.js";
 import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
 import { resolveAnchoredImagePosition as resolveAnchoredImagePosition$1 } from "./anchoredImagePosition.js";
@@ -154,7 +157,10 @@ function renderPageMarginGuideOverlay(page, options, doc) {
 	return overlay;
 }
 function syncPageMarginGuideOverlay(pageEl, page, options, doc) {
-	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-margin-guide"))) stale.remove();
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-margin-guide"))) {
+		releaseDisplayPageResources(stale);
+		stale.remove();
+	}
 	const overlay = renderPageMarginGuideOverlay(page, options, doc);
 	if (overlay) pageEl.append(overlay);
 }
@@ -165,7 +171,10 @@ function syncPageMarginGuideOverlay(pageEl, page, options, doc) {
 * 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();
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-border"))) {
+		releaseDisplayPageResources(stale);
+		stale.remove();
+	}
 	const overlay = renderPageBorderOverlay(page, options, doc);
 	if (!overlay) return;
 	if (options.pageBorders?.zOrder === "back") pageEl.prepend(overlay);
@@ -177,12 +186,16 @@ function syncPageBorderOverlay(pageEl, page, options, doc) {
 * 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();
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-watermark"))) {
+		releaseDisplayPageResources(stale);
+		stale.remove();
+	}
 	const watermark = options.watermark;
 	if (!watermark) return;
 	const overlay = renderWatermarkLayer(watermark, page, doc, {
 		...options.watermarkImageSrc !== void 0 ? { imageSrc: options.watermarkImageSrc } : {},
-		...options.embeddedFontFamilyMap ? { embeddedFontFamilyMap: options.embeddedFontFamilyMap } : {}
+		...options.embeddedFontFamilyMap ? { embeddedFontFamilyMap: options.embeddedFontFamilyMap } : {},
+		...options.documentFontFacts ? { documentFontFacts: options.documentFontFacts } : {}
 	});
 	if (!overlay) return;
 	const contentEl = pageEl.querySelector(`:scope > .${PAGE_CLASS_NAMES.content}`);
@@ -483,7 +496,7 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				...paragraphBlock,
 				runs: inlineRuns
 			};
-			const fragEl = renderParagraphFragment({
+			const syntheticFragment = {
 				kind: "paragraph",
 				blockId: paragraphBlock.id,
 				x: 0,
@@ -492,7 +505,8 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				height: paragraphMeasure.totalHeight,
 				fromLine: 0,
 				toLine: paragraphMeasure.lines.length
-			}, inlineBlock, paragraphMeasure, hfContext, { document: doc });
+			};
+			const fragEl = renderParagraphFragment(syntheticFragment, 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`;
@@ -501,7 +515,7 @@ function renderHeaderFooterContent(content, context, options, layout) {
 			containerEl.append(fragEl);
 			cursorY += paragraphMeasure.totalHeight;
 		} else if (block.kind === "table" && measure.kind === "table") {
-			const fragEl = renderTableFragment({
+			const syntheticFragment = {
 				kind: "table",
 				blockId: block.id,
 				x: 0,
@@ -512,7 +526,8 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				toRow: measure.rows.length,
 				...block.pmStart !== void 0 ? { pmStart: block.pmStart } : {},
 				...block.pmEnd !== void 0 ? { pmEnd: block.pmEnd } : {}
-			}, block, measure, hfContext, { document: doc });
+			};
+			const fragEl = renderTableFragment(syntheticFragment, block, measure, hfContext, { document: doc });
 			if (block.floating) {
 				const { left, top } = resolveHeaderFooterFloatingTablePosition(block.floating, measure, layout, cursorY);
 				fragEl.style.position = "absolute";
@@ -532,7 +547,7 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				cursorY += measure.totalHeight;
 			}
 		} else if (block.kind === "textBox" && measure.kind === "textBox") {
-			const fragEl = renderTextBoxFragment({
+			const syntheticFragment = {
 				kind: "textBox",
 				blockId: block.id,
 				x: 0,
@@ -541,7 +556,8 @@ function renderHeaderFooterContent(content, context, options, layout) {
 				height: measure.height,
 				...block.pmStart !== void 0 ? { pmStart: block.pmStart } : {},
 				...block.pmEnd !== void 0 ? { pmEnd: block.pmEnd } : {}
-			}, block, measure, hfContext, {
+			};
+			const fragEl = renderTextBoxFragment(syntheticFragment, block, measure, hfContext, {
 				document: doc,
 				renderTable: renderNestedTable
 			});
@@ -681,7 +697,13 @@ function renderFootnoteContent(footnote, contentWidth, doc, context) {
 		...context?.pageNumberFormat === void 0 ? {} : { pageNumberFormat: context.pageNumberFormat },
 		totalPages: context?.totalPages ?? 0,
 		section: context?.section ?? "body",
-		contentWidth
+		contentWidth,
+		inlinePictureSizing: "textColumnFit",
+		inlinePictureViewport: {
+			left: 0,
+			right: contentWidth
+		},
+		inlinePictureOriginX: 0
 	};
 	let y = 0;
 	for (let index = 0; index < content.blocks.length; index++) {
@@ -698,7 +720,7 @@ function renderFootnoteContent(footnote, contentWidth, doc, context) {
 function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 	const renderBlock = stripFlowBlockPmAnchors(block);
 	if (renderBlock.kind === "paragraph" && measure.kind === "paragraph") {
-		const element = renderParagraphFragment({
+		const fragment = {
 			kind: "paragraph",
 			blockId: renderBlock.id,
 			x: 0,
@@ -707,12 +729,13 @@ function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 			height: measure.totalHeight,
 			fromLine: 0,
 			toLine: measure.lines.length
-		}, renderBlock, measure, context, { document: doc });
+		};
+		const element = renderParagraphFragment(fragment, renderBlock, measure, context, { document: doc });
 		positionFootnoteBlock(element, y, contentWidth, measure.totalHeight);
 		return element;
 	}
 	if (renderBlock.kind === "table" && measure.kind === "table") {
-		const element = renderTableFragment({
+		const fragment = {
 			kind: "table",
 			blockId: renderBlock.id,
 			x: 0,
@@ -721,31 +744,34 @@ function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 			height: measure.totalHeight,
 			fromRow: 0,
 			toRow: renderBlock.rows.length
-		}, renderBlock, measure, context, { document: doc });
+		};
+		const element = renderTableFragment(fragment, renderBlock, measure, context, { document: doc });
 		positionFootnoteBlock(element, y, measure.totalWidth, measure.totalHeight);
 		return element;
 	}
 	if (renderBlock.kind === "image" && measure.kind === "image") {
-		const element = renderImageFragment({
+		const fragment = {
 			kind: "image",
 			blockId: renderBlock.id,
 			x: 0,
 			y,
 			width: measure.width,
 			height: measure.height
-		}, renderBlock, measure, context, { document: doc });
+		};
+		const element = renderImageFragment(fragment, renderBlock, measure, context, { document: doc });
 		positionFootnoteBlock(element, y, measure.width, measure.height);
 		return element;
 	}
 	if (renderBlock.kind === "textBox" && measure.kind === "textBox") {
-		const element = renderTextBoxFragment({
+		const fragment = {
 			kind: "textBox",
 			blockId: renderBlock.id,
 			x: 0,
 			y,
 			width: measure.width,
 			height: measure.height
-		}, renderBlock, measure, context, {
+		};
+		const element = renderTextBoxFragment(fragment, renderBlock, measure, context, {
 			document: doc,
 			renderTable: renderNestedTable
 		});
@@ -791,7 +817,8 @@ function renderPage(page, context, options = {}) {
 	if (options.watermark) {
 		const watermarkEl = renderWatermarkLayer(options.watermark, page, doc, {
 			...options.watermarkImageSrc !== void 0 ? { imageSrc: options.watermarkImageSrc } : {},
-			...options.embeddedFontFamilyMap ? { embeddedFontFamilyMap: options.embeddedFontFamilyMap } : {}
+			...options.embeddedFontFamilyMap ? { embeddedFontFamilyMap: options.embeddedFontFamilyMap } : {},
+			...options.documentFontFacts ? { documentFontFacts: options.documentFontFacts } : {}
 		});
 		if (watermarkEl) pageEl.append(watermarkEl);
 	}
@@ -929,13 +956,32 @@ function renderPage(page, context, options = {}) {
 	};
 	let prevParagraphBorders;
 	const renderedInlineImageKeysByBlock = /* @__PURE__ */ new Map();
+	const paperPictureViewport = {
+		left: 0,
+		right: page.size.w
+	};
+	const pictureColumns = pageHorizontalColumns({
+		layout: page.columns,
+		contentLeft: page.margins.left,
+		contentWidth
+	});
 	for (let i = 0; i < page.fragments.length; i++) {
 		const fragment = page.fragments[i];
 		let fragmentEl;
+		const fragmentBlock = options.blockLookup?.get(String(fragment.blockId))?.block;
+		const inlinePictureViewport = fragment.kind === "paragraph" && fragmentBlock?.kind === "paragraph" ? paragraphInlinePictureViewport({
+			block: fragmentBlock,
+			fragment,
+			paper: paperPictureViewport,
+			columns: pictureColumns
+		}) : void 0;
 		const fragmentContext = {
 			...context,
 			section: "body",
-			contentWidth
+			contentWidth,
+			inlinePictureSizing: "authoredExtent",
+			...inlinePictureViewport === void 0 ? {} : { inlinePictureViewport },
+			inlinePictureOriginX: fragment.x
 		};
 		const fragmentContentY = fragment.y - page.margins.top;
 		if (options.blockLookup && fragment.blockId) {
@@ -1056,7 +1102,13 @@ function renderPage(page, context, options = {}) {
 			const headerContentEl = renderHeaderFooterContent(options.headerContent, {
 				...context,
 				section: "header",
-				contentWidth: headerContentWidth
+				contentWidth: headerContentWidth,
+				inlinePictureSizing: "authoredExtent",
+				inlinePictureViewport: {
+					left: 0,
+					right: page.size.w
+				},
+				inlinePictureOriginX: page.margins.left
 			}, options, {
 				flowTop: headerDistance,
 				flowLeft: page.margins.left,
@@ -1103,7 +1155,13 @@ function renderPage(page, context, options = {}) {
 			const footerContentEl = renderHeaderFooterContent(options.footerContent, {
 				...context,
 				section: "footer",
-				contentWidth: footerContentWidth
+				contentWidth: footerContentWidth,
+				inlinePictureSizing: "authoredExtent",
+				inlinePictureViewport: {
+					left: 0,
+					right: page.size.w
+				},
+				inlinePictureOriginX: page.margins.left
 			}, options, {
 				flowTop: footerNaturalTop,
 				flowLeft: page.margins.left,
@@ -1374,6 +1432,8 @@ function runContentKey(run) {
 	if (run.highlight) parts.push(`hi:${run.highlight}`);
 	if (run.fontFamily) parts.push(`ff:${run.fontFamily}`);
 	if (run.alternateFontFamily) parts.push(`ff-alt:${run.alternateFontFamily}`);
+	if (run.hAnsiFontFamily) parts.push(`hAnsi:${run.hAnsiFontFamily}`);
+	if (run.hAnsiAlternateFontFamily) parts.push(`hAnsi-alt:${run.hAnsiAlternateFontFamily}`);
 	if (run.complexScriptFontFamily) parts.push(`cs:${run.complexScriptFontFamily}`);
 	if (run.complexScriptAlternateFontFamily) parts.push(`cs-alt:${run.complexScriptAlternateFontFamily}`);
 	if (run.complexScriptFontSize !== void 0) parts.push(`cs-size:${run.complexScriptFontSize}`);
@@ -1411,6 +1471,8 @@ function headerFooterContentFingerprint(prefix, entries) {
 function computeOptionsHash(options) {
 	const parts = [];
 	if (options.embeddedFontFamilyMap) parts.push(`embedded-fonts:${embeddedFontFingerprint(options.embeddedFontFamilyMap)}`);
+	const documentFactsIdentity = documentFontFactsCacheIdentity(options.documentFontFacts);
+	if (documentFactsIdentity !== void 0) parts.push(`document-font-facts:${documentFactsIdentity}`);
 	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));
@@ -1517,7 +1579,7 @@ function renderPages(pages, container, options = {}) {
 			if (prev.fingerprint === newFp && !totalPagesChanged && !fieldContextChanged) continue;
 			const shell = prev.element;
 			if (totalPagesChanged || fieldContextChanged) {
-				shell.innerHTML = "";
+				clearRenderedPage(shell);
 				data.rendered = false;
 				populatePageShell(shell, prevDataMap, totalPages, options);
 				applyPageStyles(shell, page.size.w, page.size.h, options);
@@ -1565,7 +1627,7 @@ function renderPages(pages, container, options = {}) {
 				const shell = prevShells[i].element;
 				if (observer) observer.unobserve(shell);
 				prevDataMap.delete(shell);
-				shell.remove();
+				removeRenderedPage(shell);
 			}
 			prevShells.length = pages.length;
 		}
@@ -1588,7 +1650,7 @@ function renderPages(pages, container, options = {}) {
 	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();
+	for (const el of existingChildren) if (isPageShell(el)) removeRenderedPage(el);
 	delete pc.__pageRenderState;
 	applyContainerStyles(container, pageGap);
 	const pageShells = [];
@@ -1703,7 +1765,10 @@ function populatePageShell(shell, pageDataMap, totalPages, options) {
 	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();
+	for (const stale of Array.from(shell.querySelectorAll(":scope > .layout-page-border"))) {
+		releaseDisplayPageResources(stale);
+		stale.remove();
+	}
 	while (fullPageEl.firstChild) shell.append(fullPageEl.firstChild);
 	data.rendered = true;
 	syncPageShellFingerprints(shell, data, options);
@@ -1741,18 +1806,38 @@ function renderAllPagesNow(container) {
 * Surgically replace only the content area of a rendered page shell.
 * Preserves header/footer elements to avoid blinking.
 */
+function clearRenderedPage(shell) {
+	releaseDisplayPageResources(shell);
+	shell.innerHTML = "";
+}
+function removeRenderedPage(element) {
+	releaseDisplayPageResources(element);
+	element.remove();
+}
+function replaceRenderedPageElement(oldElement, newElement) {
+	releaseDisplayPageResources(oldElement);
+	oldElement.replaceWith(newElement);
+}
 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 fullPageEl = renderPage(data.page, context, pageOptions);
+	const newContentEl = fullPageEl.querySelector(`.${PAGE_CLASS_NAMES.content}`);
 	const oldContentEl = shell.querySelector(`.${PAGE_CLASS_NAMES.content}`);
+	const newFontStyle = fullPageEl.querySelector(":scope > style");
+	const oldFontStyle = shell.querySelector(":scope > style");
 	if (newContentEl && oldContentEl) {
-		oldContentEl.replaceWith(newContentEl);
+		if (newFontStyle && oldFontStyle) replaceRenderedPageElement(oldFontStyle, newFontStyle);
+		else if (newFontStyle) shell.prepend(newFontStyle);
+		else if (oldFontStyle) removeRenderedPage(oldFontStyle);
+		replaceRenderedPageElement(oldContentEl, newContentEl);
 		syncPageWatermarkOverlay(shell, data.page, pageOptions, options.document ?? document);
+		releaseDisplayPageResources(fullPageEl);
 		return;
 	}
-	shell.innerHTML = "";
+	releaseDisplayPageResources(fullPageEl);
+	clearRenderedPage(shell);
 	data.rendered = false;
 	populatePageShell(shell, pageDataMap, totalPages, options);
 }
@@ -1853,7 +1938,7 @@ function findPageShellForPmPos(container, pmPos) {
 function depopulatePageShell(shell, pageDataMap) {
 	const data = pageDataMap.get(shell);
 	if (!data || !data.rendered) return;
-	shell.innerHTML = "";
+	clearRenderedPage(shell);
 	data.rendered = false;
 	const pageState = shell.parentElement?.__pageRenderState?.pageStates[data.index];
 	if (pageState?.element === shell) {

package/dist/layout-painter/renderParagraph.d.ts

@@ -1,11 +1,11 @@
 import { HyperlinkInfo, MeasuredLine, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphMeasure, Run, TabRun, TabStop, TextRun } from "../layout-engine/types.js";
-import { RenderContext } from "./renderUtils.js";
 import { PhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
+import { RenderContext } from "./renderUtils.js";
 //#region src/layout-painter/renderParagraph.d.ts
 /**
  * CSS class names for paragraph rendering
  */
-declare const PARAGRAPH_CLASS_NAMES: {
+export declare const PARAGRAPH_CLASS_NAMES: {
   fragment: string;
   line: string;
   run: string;
@@ -17,7 +17,7 @@ declare const PARAGRAPH_CLASS_NAMES: {
 /**
  * Options for rendering a paragraph
  */
-type RenderParagraphOptions = {
+export type RenderParagraphOptions = {
   /** Document to create elements in */
   document?: Document;
   /** Fragment's Y position relative to content area (for per-line margin calculation) */
@@ -29,12 +29,12 @@ type RenderParagraphOptions = {
   /** Inline image runs already rendered for this paragraph block */
   renderedInlineImageKeys?: Set<string>;
 };
-declare function getRenderableTextColor(run: TextRun | TabRun): string | undefined;
+export declare function getRenderableTextColor(run: TextRun | TabRun): string | undefined;
 /**
  * The colour a list marker paints in, or undefined for the canvas text colour.
  * Black and `auto` fall back to the canvas colour, as they do for runs.
  */
-declare function getRenderableListMarkerColor(color: string | undefined): string | undefined;
+export declare function getRenderableListMarkerColor(color: string | undefined): string | undefined;
 /**
  * How CSS spells each bidirectional wrapper: an override switches the
  * bidirectional algorithm off for its content, an embedding opens a level and
@@ -43,14 +43,14 @@ declare function getRenderableListMarkerColor(color: string | undefined): string
  * Both painters write the keyword from here, so the DOM painter and the
  * display list cannot spell the pair differently.
  */
-declare const UNICODE_BIDI_BY_WRAPPER_CONTROL: {
+export declare const UNICODE_BIDI_BY_WRAPPER_CONTROL: {
   readonly override: "bidi-override";
   readonly embedding: "embed";
 };
 /**
  * Get leader character for tab
  */
-declare function getLeaderChar(leader: string): string | null;
+export declare function getLeaderChar(leader: string): string | null;
 /**
  * Slice runs for a specific line
  *
@@ -58,7 +58,7 @@ declare function getLeaderChar(leader: string): string | null;
  * @param line - The line measurement
  * @returns Array of runs for this line
  */
-declare function sliceRunsForLine(block: ParagraphBlock, line: MeasuredLine): Run[];
+export declare function sliceRunsForLine(block: ParagraphBlock, line: MeasuredLine): Run[];
 /**
  * Split each text run carrying an East-Asian font into per-script sub-runs, so
  * CJK code points render with `eastAsiaFontFamily` and the rest with
@@ -68,7 +68,7 @@ declare function sliceRunsForLine(block: ParagraphBlock, line: MeasuredLine): Ru
  * way, so the per-run advances sum to the measured run width. Non-text runs and
  * runs without CJK pass through unchanged (the common path).
  */
-declare function splitTextRunsByEastAsia(runs: Run[]): Run[];
+export declare function splitTextRunsByEastAsia(runs: Run[]): Run[];
 type CollapsibleLineEdgeSpacesResult = {
   runs: Run[];
   collapsedLeadingRuns: Set<TextRun>;
@@ -81,8 +81,8 @@ type CollapsibleLineEdgeSpacesResult = {
  * paragraph start or after a manual line break. Split paint runs to preserve
  * exact PM ranges.
  */
-declare const splitCollapsibleLineEdgeSpaces: (sourceRuns: Run[], collapseLeading: boolean) => CollapsibleLineEdgeSpacesResult;
-declare const startsAfterSoftWrap: (block: ParagraphBlock, line: MeasuredLine) => boolean;
+export declare const splitCollapsibleLineEdgeSpaces: (sourceRuns: Run[], collapseLeading: boolean) => CollapsibleLineEdgeSpacesResult;
+export declare const startsAfterSoftWrap: (block: ParagraphBlock, line: MeasuredLine) => boolean;
 /**
  * Options for rendering a line with justify support
  */
@@ -99,6 +99,10 @@ type RenderLineOptions = {
   tabStops?: TabStop[];
   /** Render context for field substitution */
   context?: RenderContext;
+  /** Page-coordinate X origin for clipping the authored image extent. */
+  imageOriginX?: number;
+  /** Actual shared line origin used for inline image clipping. */
+  inlineImageLineStartX?: number;
   /** Left indent in pixels */
   leftIndentPx?: number;
   /** Authored OOXML left indent used by logical tab-stop calculations. */
@@ -138,8 +142,8 @@ type RenderLineOptions = {
  * @param options - Additional options for justify calculation
  * @returns The line DOM element
  */
-declare function renderLine(block: ParagraphBlock, line: MeasuredLine, alignment: "left" | "center" | "right" | "justify" | undefined, doc: Document, options?: RenderLineOptions): HTMLElement;
-declare const paragraphHasTrackedChanges: (block: ParagraphBlock) => boolean;
+export declare function renderLine(block: ParagraphBlock, line: MeasuredLine, alignment: "left" | "center" | "right" | "justify" | undefined, doc: Document, options?: RenderLineOptions): HTMLElement;
+export declare const paragraphHasTrackedChanges: (block: ParagraphBlock) => boolean;
 /**
  * Render a paragraph fragment
  *
@@ -150,6 +154,6 @@ declare const paragraphHasTrackedChanges: (block: ParagraphBlock) => boolean;
  * @param options - Rendering options
  * @returns The fragment DOM element
  */
-declare function renderParagraphFragment(fragment: ParagraphFragment, block: ParagraphBlock, measure: ParagraphMeasure, context: RenderContext, options?: RenderParagraphOptions): HTMLElement;
+export declare function renderParagraphFragment(fragment: ParagraphFragment, block: ParagraphBlock, measure: ParagraphMeasure, context: RenderContext, options?: RenderParagraphOptions): HTMLElement;
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, RenderParagraphOptions, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableListMarkerColor, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export {};