@stll/folio-core 0.11.0 → 0.13.0

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

@@ -71,7 +71,8 @@ declare const getDefaultPageFontFamily: () => string;
  * A single footnote item ready for rendering at page bottom.
  */
 type FootnoteRenderItem = {
-  /** Display number (e.g. "1", "2") */displayNumber: string; /** Plain text content */
+  /** Stable story id used by editable-note surfaces. */noteId?: number; /** Display number (e.g. "1", "2") */
+  displayNumber: string; /** Plain text content */
   text?: string; /** Pre-measured structured footnote content. */
   content?: Pick<FootnoteContent, "blocks" | "measures" | "height">;
 };
@@ -87,7 +88,9 @@ type RenderPageOptions = {
   pageClassName?: string; /** Show page borders (for debugging) */
   showBorders?: boolean; /** Background color for pages */
   backgroundColor?: string; /** Drop shadow on pages */
-  showShadow?: boolean; /** Header content to render (used for all pages, or pages 2+ when titlePg is set). */
+  showShadow?: boolean; /** Show the effective body-content boundary for each page. */
+  showMarginGuides?: boolean; /** CSS color used for margin guides. */
+  marginGuideColor?: string; /** Header content to render (used for all pages, or pages 2+ when titlePg is set). */
   headerContent?: HeaderFooterContent; /** Footer content to render (used for all pages, or pages 2+ when titlePg is set). */
   footerContent?: HeaderFooterContent; /** Header content by part relationship id, used for section-scoped rendering. */
   headerContentByRId?: ReadonlyMap<string, HeaderFooterContent>; /** Footer content by part relationship id, used for section-scoped rendering. */

package/dist/layout-painter/renderPage.js

@@ -1,6 +1,7 @@
 import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { borderToStyle } from "../utils/formatToStyle.js";
+import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.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";
@@ -10,7 +11,7 @@ import { renderFragment } from "./renderFragment.js";
 import { applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment } from "./renderImage.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
 import { renderTextBoxFragment } from "./renderTextBox.js";
-import { renderTableFragment } from "./renderTable.js";
+import { renderNestedTable, renderTableFragment } from "./renderTable.js";
 import { renderWatermarkLayer } from "./renderWatermark.js";
 import { panic } from "better-result";
 //#region src/layout-painter/renderPage.ts
@@ -35,6 +36,7 @@ const PAGE_CLASS_NAMES = {
 	footer: "layout-page-footer"
 };
 const HEADER_FOOTER_RULE_CLIP_MARGIN = pointsToPixels(1.5);
+const DEFAULT_MARGIN_GUIDE_COLOR = "#c0c0c0";
 const getDefaultPageFontFamily = () => resolveFontFamily("Calibri").cssFallback;
 /**
 * Apply page styles to an element
@@ -127,6 +129,26 @@ function renderPageBorderOverlay(page, options, doc) {
 	applyPageBorderSide(overlay, pb.right, "Right", options.theme);
 	return overlay;
 }
+function renderPageMarginGuideOverlay(page, options, doc) {
+	if (options.showMarginGuides !== true) return null;
+	const overlay = doc.createElement("div");
+	overlay.className = "layout-page-margin-guide";
+	overlay.style.position = "absolute";
+	overlay.style.top = `${page.margins.top}px`;
+	overlay.style.right = `${page.margins.right}px`;
+	overlay.style.bottom = `${page.margins.bottom}px`;
+	overlay.style.left = `${page.margins.left}px`;
+	overlay.style.boxSizing = "border-box";
+	overlay.style.border = `1px dashed ${options.marginGuideColor ?? DEFAULT_MARGIN_GUIDE_COLOR}`;
+	overlay.style.pointerEvents = "none";
+	overlay.style.zIndex = "19";
+	return overlay;
+}
+function syncPageMarginGuideOverlay(pageEl, page, options, doc) {
+	for (const stale of Array.from(pageEl.querySelectorAll(":scope > .layout-page-margin-guide"))) stale.remove();
+	const overlay = renderPageMarginGuideOverlay(page, options, doc);
+	if (overlay) pageEl.append(overlay);
+}
 /**
 * Refresh the page-border overlay on an existing page shell so incremental
 * rerenders pick up changes to size, margins, page number, or pageBorders
@@ -359,7 +381,7 @@ function renderFloatingImagesLayer(floatingImages, doc, layerMode = "front") {
 		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;
+		applySanitizedImageSrc(img, floatImg.src);
 		img.style.width = `${floatImg.width}px`;
 		img.style.height = `${floatImg.height}px`;
 		img.style.display = "block";
@@ -470,7 +492,10 @@ 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, { document: doc });
+			}, block, measure, hfContext, {
+				document: doc,
+				renderTable: renderNestedTable
+			});
 			const textBoxTop = block.position ? resolveHeaderFooterFloatTop({
 				height: measure.height,
 				paragraphY: cursorY,
@@ -485,7 +510,7 @@ function renderHeaderFooterContent(content, context, options, layout) {
 	}
 	for (const floatImg of floatingImages) {
 		const img = doc.createElement("img");
-		img.src = floatImg.src;
+		applySanitizedImageSrc(img, floatImg.src);
 		img.width = floatImg.width;
 		img.height = floatImg.height;
 		if (floatImg.alt) img.alt = floatImg.alt;
@@ -546,6 +571,10 @@ function renderFootnoteArea(footnotes, contentWidth, doc, context) {
 	container.append(separator);
 	for (const fn of footnotes) {
 		const fnEl = doc.createElement("div");
+		if (fn.noteId !== void 0) {
+			fnEl.dataset["noteKind"] = "footnote";
+			fnEl.dataset["noteId"] = String(fn.noteId);
+		}
 		fnEl.style.marginBottom = `0px`;
 		fnEl.style.color = "var(--doc-canvas-text, #000)";
 		if (fn.content) {
@@ -642,7 +671,10 @@ function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 			y,
 			width: measure.width,
 			height: measure.height
-		}, renderBlock, measure, context, { document: doc });
+		}, renderBlock, measure, context, {
+			document: doc,
+			renderTable: renderNestedTable
+		});
 		positionFootnoteBlock(element, y, measure.width, measure.height);
 		return element;
 	}
@@ -651,13 +683,7 @@ function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 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 "table": return stripFootnoteTablePmAnchors(block);
 		case "image": {
 			const { pmStart: _pmStart, pmEnd: _pmEnd, ...image } = block;
 			return image;
@@ -666,7 +692,7 @@ function stripFootnotePmAnchors(block) {
 			const { pmStart: _pmStart, pmEnd: _pmEnd, ...textBox } = block;
 			return {
 				...textBox,
-				content: textBox.content.map(stripFootnoteParagraphPmAnchors)
+				content: textBox.content.map((contentBlock) => contentBlock.kind === "table" ? stripFootnoteTablePmAnchors(contentBlock) : stripFootnoteParagraphPmAnchors(contentBlock))
 			};
 		}
 		case "pageBreak":
@@ -678,6 +704,13 @@ function stripFootnotePmAnchors(block) {
 		default: return block;
 	}
 }
+function stripFootnoteTablePmAnchors(block) {
+	const { pmStart: _pmStart, pmEnd: _pmEnd, ...table } = block;
+	return {
+		...table,
+		rows: table.rows.map(stripFootnoteTableRowPmAnchors)
+	};
+}
 function stripFootnoteTableRowPmAnchors(row) {
 	return {
 		...row,
@@ -931,7 +964,10 @@ function renderPage(page, context, options = {}) {
 				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 });
+				fragmentEl = renderTextBoxFragment(fragment, blockData.block, blockData.measure, fragmentContext, {
+					document: doc,
+					renderTable: renderNestedTable
+				});
 				prevParagraphBorders = void 0;
 			} else {
 				fragmentEl = renderFragment(fragment, fragmentContext, { document: doc });
@@ -1074,6 +1110,8 @@ function renderPage(page, context, options = {}) {
 		moveBehindHeaderFooterElementsToPage(footerEl, pageEl, footerNaturalTop, page.margins.left);
 	}
 	if (pageBorderEl && options.pageBorders?.zOrder !== "back") pageEl.append(pageBorderEl);
+	const marginGuideEl = renderPageMarginGuideOverlay(page, options, doc);
+	if (marginGuideEl) pageEl.append(marginGuideEl);
 	return pageEl;
 }
 function moveBehindHeaderFooterElementsToPage(slotEl, pageEl, contentTop, contentLeft) {
@@ -1265,6 +1303,7 @@ function collectContentFingerprint(block, parts) {
 }
 function runContentKey(run) {
 	if (run.kind === "lineBreak") return "lb";
+	if (run.kind === "renderedPageBreak") return "rpb";
 	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") {
@@ -1324,6 +1363,7 @@ function computeOptionsHash(options) {
 	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.showMarginGuides === true) parts.push(`mg:${options.marginGuideColor ?? DEFAULT_MARGIN_GUIDE_COLOR}`);
 	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)}`);
@@ -1412,6 +1452,7 @@ function renderPages(pages, container, options = {}) {
 				prev.renderFingerprint = null;
 				applyPageStyles(prev.element, page.size.w, page.size.h, options);
 				syncPageBorderOverlay(prev.element, page, options, options.document ?? document);
+				syncPageMarginGuideOverlay(prev.element, page, options, options.document ?? document);
 				prev.element.dataset["pageNumber"] = String(page.number);
 				continue;
 			}
@@ -1424,6 +1465,7 @@ function renderPages(pages, container, options = {}) {
 				populatePageShell(shell, prevDataMap, totalPages, options);
 				applyPageStyles(shell, page.size.w, page.size.h, options);
 				syncPageBorderOverlay(shell, page, options, options.document ?? document);
+				syncPageMarginGuideOverlay(shell, page, options, options.document ?? document);
 				shell.dataset["pageNumber"] = String(page.number);
 				continue;
 			}
@@ -1433,6 +1475,7 @@ function renderPages(pages, container, options = {}) {
 			prev.renderFingerprint = newRenderFp;
 			applyPageStyles(shell, page.size.w, page.size.h, options);
 			syncPageBorderOverlay(shell, page, options, options.document ?? document);
+			syncPageMarginGuideOverlay(shell, page, options, options.document ?? document);
 			shell.dataset["pageNumber"] = String(page.number);
 		}
 		if (pages.length > prevShells.length) {
@@ -1445,6 +1488,7 @@ function renderPages(pages, container, options = {}) {
 				pageEl.dataset["pageIndex"] = String(i);
 				applyPageStyles(pageEl, page.size.w, page.size.h, options);
 				syncPageBorderOverlay(pageEl, page, options, doc);
+				syncPageMarginGuideOverlay(pageEl, page, options, doc);
 				container.append(pageEl);
 				prevShells.push({
 					element: pageEl,
@@ -1505,6 +1549,7 @@ function renderPages(pages, container, options = {}) {
 			pageEl.dataset["pageIndex"] = String(i);
 			applyPageStyles(pageEl, page.size.w, page.size.h, options);
 			syncPageBorderOverlay(pageEl, page, options, doc);
+			syncPageMarginGuideOverlay(pageEl, page, options, doc);
 		}
 		container.insertBefore(pageEl, overlayBefore);
 		pageShells.push(pageEl);

package/dist/layout-painter/renderParagraph.js

@@ -1,9 +1,10 @@
 import { parseXmlDocument } from "../docx/xmlParser.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { detectBaseDirection } from "../utils/baseDirection.js";
+import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
+import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
 import "../utils/fontWeights.js";
-import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode } from "../layout-engine/measure/textMeasurementPolicy.js";
 import "../layout-engine/measure/measureHelpers.js";
 import { calculateTabWidth } from "../prosemirror/utils/tabCalculator.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
@@ -12,7 +13,7 @@ import { isFloatingImageRun } from "../layout-engine/types.js";
 import { getListMarkerInlineWidth, getListMarkerVisualOffset } from "../layout-engine/measure/listMarkerWidth.js";
 import { resolveImageLineAlign } from "./renderUtils.js";
 import { applySdtDataAttrs } from "./sdtBoundary.js";
-import { applyImageVisualAttrs, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
+import { applyImageBorder, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
 import { ommlToMathml } from "../docx/mathToMathml.js";
 import { evaluateFieldInstruction } from "../fields/evaluateField.js";
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
@@ -75,6 +76,9 @@ function isMathRun(run) {
 const AUTOMATIC_TEXT_COLOR_VALUES = /* @__PURE__ */ new Set(["auto", "windowtext"]);
 const DEFAULT_BLACK_TEXT_COLOR_VALUES = /* @__PURE__ */ new Set(["000000", "000"]);
 const DOCX_SUPERSCRIPT_SCALE = .75;
+const SUGGESTION_COLOR_CSS = "var(--suggestion-color, #6d3bd6)";
+const SUGGESTION_TINT_CSS = "var(--suggestion-bg, color-mix(in oklch, #6d3bd6 12%, transparent))";
+const SUGGESTION_TINT_LAYER_CSS = `linear-gradient(${SUGGESTION_TINT_CSS}, ${SUGGESTION_TINT_CSS})`;
 function normalizeTextColorValue(color) {
 	return color.trim().toLowerCase().replace(/^#/u, "");
 }
@@ -113,7 +117,7 @@ function getRaisedRunFontSize(run) {
 function applyRunStyles(element, run) {
 	if (run.fontFamily) element.style.fontFamily = resolveFontFamily(run.fontFamily).cssFallback;
 	if (run.fontSize) element.style.fontSize = `${fontSizePtToPx(run.fontSize)}px`;
-	if (run.bold) element.style.fontWeight = "800";
+	if (run.bold) element.style.fontWeight = "700";
 	if (run.italic) element.style.fontStyle = "italic";
 	let hasExplicitTextColor = false;
 	const textColor = getRenderableTextColor(run);
@@ -192,13 +196,21 @@ function applyRunStyles(element, run) {
 	if (run.isInsertion) {
 		const authorIdx = getAuthorColorIdx(run.changeAuthor ?? "");
 		const authorColor = AUTHOR_COLORS[authorIdx];
-		element.style.color = authorColor;
+		const strokeColor = run.isSuggestion ? SUGGESTION_COLOR_CSS : authorColor;
+		element.style.color = strokeColor;
 		if (!decorations.includes("underline")) decorations.push("underline");
-		element.style.textDecorationColor = authorColor;
+		element.style.textDecorationColor = strokeColor;
 		element.classList.add("docx-insertion");
 		element.dataset["tcAuthorIdx"] = String(authorIdx);
+		if (run.isSuggestion) {
+			element.classList.add("docx-insertion--suggested");
+			element.style.textDecorationStyle = "dotted";
+			element.style.backgroundImage = SUGGESTION_TINT_LAYER_CSS;
+			element.dataset["provenance"] = "suggested";
+			if (run.suggestionId) element.dataset["suggestionId"] = run.suggestionId;
+		}
 		const insertionParts = [run.changeAuthor, run.changeDate ? new Date(run.changeDate).toLocaleDateString() : ""].filter(Boolean);
-		if (insertionParts.length > 0) element.title = `Inserted: ${insertionParts.join(", ")}`;
+		if (insertionParts.length > 0) element.title = `${run.isSuggestion ? "Suggested" : "Inserted"}: ${insertionParts.join(", ")}`;
 		if (run.changeAuthor) element.dataset["changeAuthor"] = run.changeAuthor;
 		if (run.changeDate) element.dataset["changeDate"] = run.changeDate;
 		if (run.changeRevisionId !== void 0) element.dataset["revisionId"] = String(run.changeRevisionId);
@@ -206,13 +218,21 @@ function applyRunStyles(element, run) {
 	if (run.isDeletion) {
 		const authorIdx = getAuthorColorIdx(run.changeAuthor ?? "");
 		const authorColor = AUTHOR_COLORS[authorIdx];
-		element.style.color = authorColor;
+		const strokeColor = run.isSuggestion ? SUGGESTION_COLOR_CSS : authorColor;
+		element.style.color = strokeColor;
 		if (!decorations.includes("line-through")) decorations.push("line-through");
-		element.style.textDecorationColor = authorColor;
+		element.style.textDecorationColor = strokeColor;
 		element.classList.add("docx-deletion");
 		element.dataset["tcAuthorIdx"] = String(authorIdx);
+		if (run.isSuggestion) {
+			element.classList.add("docx-deletion--suggested");
+			element.style.textDecorationStyle = "dotted";
+			element.style.backgroundImage = SUGGESTION_TINT_LAYER_CSS;
+			element.dataset["provenance"] = "suggested";
+			if (run.suggestionId) element.dataset["suggestionId"] = run.suggestionId;
+		}
 		const deletionParts = [run.changeAuthor, run.changeDate ? new Date(run.changeDate).toLocaleDateString() : ""].filter(Boolean);
-		if (deletionParts.length > 0) element.title = `Deleted: ${deletionParts.join(", ")}`;
+		if (deletionParts.length > 0) element.title = `${run.isSuggestion ? "Suggested deletion" : "Deleted"}: ${deletionParts.join(", ")}`;
 		if (run.changeAuthor) element.dataset["changeAuthor"] = run.changeAuthor;
 		if (run.changeDate) element.dataset["changeDate"] = run.changeDate;
 		if (run.changeRevisionId !== void 0) element.dataset["revisionId"] = String(run.changeRevisionId);
@@ -246,12 +266,20 @@ function applyPmPositions(element, pmStart, pmEnd) {
 function renderTextRun(run, doc) {
 	const span = doc.createElement("span");
 	span.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.text}`;
+	if (run.footnoteRefId !== void 0) {
+		span.dataset["noteKind"] = "footnote";
+		span.dataset["noteId"] = String(run.footnoteRefId);
+	} else if (run.endnoteRefId !== void 0) {
+		span.dataset["noteKind"] = "endnote";
+		span.dataset["noteId"] = String(run.endnoteRefId);
+	}
 	if (run.templatePreview) {
 		span.classList.add("folio-template-preview-run");
 		if (run.templatePreview === "highlighted") span.classList.add("folio-template-preview-run--highlighted");
 	}
 	applyRunStyles(span, run);
 	applyPmPositions(span, run.pmStart, run.pmEnd);
+	const paintedText = toPaintedText(run.text);
 	if (run.hyperlink) {
 		const anchor = doc.createElement("a");
 		anchor.href = run.hyperlink.href;
@@ -260,7 +288,7 @@ function renderTextRun(run, doc) {
 			anchor.rel = "noopener noreferrer";
 		}
 		if (run.hyperlink.tooltip) anchor.title = run.hyperlink.tooltip;
-		anchor.textContent = run.text;
+		anchor.textContent = paintedText;
 		if (!run.hyperlink.noDefaultStyle) {
 			const hyperlinkColor = getHyperlinkTextColor(run, span.style.color);
 			anchor.style.color = hyperlinkColor;
@@ -270,7 +298,7 @@ function renderTextRun(run, doc) {
 			span.style.setProperty("--doc-run-color", hyperlinkColor);
 		}
 		span.append(anchor);
-	} else span.textContent = run.text;
+	} else span.textContent = paintedText;
 	applyWhitespaceUnderline(span, run);
 	return span;
 }
@@ -360,7 +388,7 @@ function getLeaderChar(leader) {
 function renderInlineImageRun(run, doc) {
 	const img = doc.createElement("img");
 	img.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.image}`;
-	img.src = run.src;
+	applySanitizedImageSrc(img, run.src);
 	img.width = run.width;
 	img.height = run.height;
 	img.style.width = `${run.width}px`;
@@ -370,6 +398,7 @@ function renderInlineImageRun(run, doc) {
 		img.style.transform = run.transform;
 		img.style.transformOrigin = "center center";
 	}
+	if (!hasImageCrop(run)) applyImageBorder(img, run);
 	const rotation = parseRotationDegrees(run.transform);
 	if (rotation !== 0) {
 		const bbox = rotatedBoundingBox(run.width, run.height, rotation);
@@ -399,6 +428,7 @@ function renderInlineImageRun(run, doc) {
 		wrapper.style.verticalAlign = "middle";
 		if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
 		if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
+		if (hasImageCrop(run)) applyImageBorder(wrapper, run);
 		applyPmPositions(wrapper, run.pmStart, run.pmEnd);
 		return wrapper;
 	}
@@ -426,7 +456,7 @@ function renderBlockImage(run, doc) {
 	container.style.marginTop = `${run.distTop ?? 6}px`;
 	container.style.marginBottom = `${run.distBottom ?? 6}px`;
 	const img = doc.createElement("img");
-	img.src = run.src;
+	applySanitizedImageSrc(img, run.src);
 	img.width = run.width;
 	img.height = run.height;
 	if (run.alt) img.alt = run.alt;
@@ -434,6 +464,7 @@ function renderBlockImage(run, doc) {
 		img.style.transform = run.transform;
 		img.style.transformOrigin = "center center";
 	}
+	if (!hasImageCrop(run)) applyImageBorder(img, run);
 	const rotation = parseRotationDegrees(run.transform);
 	if (rotation !== 0) {
 		const bbox = rotatedBoundingBox(run.width, run.height, rotation);
@@ -455,6 +486,7 @@ function renderBlockImage(run, doc) {
 			widthPx: run.width,
 			heightPx: run.height
 		});
+		if (hasImageCrop(run)) applyImageBorder(wrapper, run);
 		applyPmPositions(container, run.pmStart, run.pmEnd);
 		container.append(wrapper);
 		return container;
@@ -642,6 +674,14 @@ function renderRun(run, doc, context) {
 	if (isLineBreakRun(run)) return renderLineBreakRun(run, doc);
 	if (isFieldRun(run) && context) return renderFieldRun(run, doc, context);
 	if (isMathRun(run)) return renderMathRun(run, doc);
+	if (run.kind === "renderedPageBreak") {
+		const span = doc.createElement("span");
+		span.className = PARAGRAPH_CLASS_NAMES.run;
+		span.style.display = "none";
+		span.dataset["docxRenderedPageBreak"] = "true";
+		applyPmPositions(span, run.pmStart, run.pmEnd);
+		return span;
+	}
 	const span = doc.createElement("span");
 	span.className = PARAGRAPH_CLASS_NAMES.run;
 	return span;
@@ -913,7 +953,7 @@ function createTextMeasurer(doc) {
 		const fontPrefixParts = [];
 		if (style.italic) fontPrefixParts.push("italic");
 		if (style.smallCaps) fontPrefixParts.push("small-caps");
-		if (style.bold) fontPrefixParts.push("800");
+		if (style.bold) fontPrefixParts.push("700");
 		fontPrefixParts.push(`${fontSizePx}px`);
 		const fontPrefix = fontPrefixParts.join(" ");
 		if (style.eastAsiaFontFamily && !style.letterSpacing && hasCjk(text)) {
@@ -1391,7 +1431,7 @@ function renderListMarker(marker, inlineWidth, visualOffset, doc, fontFamily, fo
 	span.style.display = "inline-block";
 	if (fontFamily) span.style.fontFamily = resolveFontFamily(fontFamily).cssFallback;
 	if (fontSize) span.style.fontSize = `${fontSize * 96 / 72}px`;
-	if (bold !== void 0) span.style.fontWeight = bold ? "800" : "normal";
+	if (bold !== void 0) span.style.fontWeight = bold ? "700" : "normal";
 	span.style.textAlign = "left";
 	span.style.textAlignLast = "left";
 	span.style.boxSizing = "border-box";

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

@@ -23,6 +23,10 @@ type RenderTableFragmentOptions = {
   document?: Document;
   pageGeometry?: PageGeometry;
 };
+/**
+ * Render a nested table (within a cell)
+ */
+declare function renderNestedTable(block: TableBlock, measure: TableMeasure, context: RenderContext, doc: Document): HTMLElement;
 /**
  * Render a table fragment to DOM
  *
@@ -35,4 +39,4 @@ type RenderTableFragmentOptions = {
  */
 declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;
 //#endregion
-export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, renderTableFragment };
+export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, renderNestedTable, renderTableFragment };

package/dist/layout-painter/renderTable.js

@@ -1,4 +1,5 @@
 import { emuToPixels } from "../utils/units.js";
+import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 import { getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, tableColumnsArePinned } from "../layout-engine/types.js";
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { resolveAnchoredImagePosition } from "./anchoredImagePosition.js";
@@ -70,7 +71,7 @@ function renderCellContent({ cell, cellMeasure, context, doc, contentWidthOverri
 			if (img.pmStart !== void 0) imgContainer.dataset["pmStart"] = String(img.pmStart);
 			if (img.pmEnd !== void 0) imgContainer.dataset["pmEnd"] = String(img.pmEnd);
 			const imgEl = doc.createElement("img");
-			imgEl.src = img.src;
+			applySanitizedImageSrc(imgEl, img.src);
 			imgEl.style.width = `${img.width}px`;
 			imgEl.style.height = `${img.height}px`;
 			imgEl.style.display = "block";
@@ -156,7 +157,10 @@ function renderCellContent({ cell, cellMeasure, context, doc, contentWidthOverri
 			}, textBoxBlock, textBoxMeasure, {
 				...context,
 				insideTableCell: true
-			}, { document: doc });
+			}, {
+				document: doc,
+				renderTable: renderNestedTable
+			});
 			if (isFloatingTextBoxBlock(textBoxBlock)) {
 				floatingTextBoxesLayer ??= createCellFloatingTextBoxesLayer(doc);
 				textBoxEl.style.left = `${resolveCellTextBoxX(textBoxBlock, contentWidth)}px`;
@@ -737,4 +741,4 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 	return tableEl;
 }
 //#endregion
-export { TABLE_CLASS_NAMES, renderTableFragment };
+export { TABLE_CLASS_NAMES, renderNestedTable, renderTableFragment };

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

@@ -1,4 +1,4 @@
-import { TextBoxBlock, TextBoxFragment, TextBoxMeasure } from "../layout-engine/types.js";
+import { TableBlock, TableMeasure, TextBoxBlock, TextBoxFragment, TextBoxMeasure } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
 
 //#region src/layout-painter/renderTextBox.d.ts
@@ -13,6 +13,7 @@ declare const TEXTBOX_CLASS_NAMES: {
  */
 type RenderTextBoxFragmentOptions = {
   document?: Document;
+  renderTable?: (block: TableBlock, measure: TableMeasure, context: RenderContext, document: Document) => HTMLElement;
 };
 /**
  * Render a text box fragment to DOM

package/dist/layout-painter/renderTextBox.js

@@ -1,6 +1,7 @@
 import { DEFAULT_TEXTBOX_MARGINS } from "../layout-engine/types.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
-import { layoutTextBoxParagraphs } from "../layout-engine/measure/textBoxParagraphLayout.js";
+import { layoutTextBoxContent } from "../layout-engine/measure/textBoxParagraphLayout.js";
+import { panic } from "better-result";
 //#region src/layout-painter/renderTextBox.ts
 /**
 * Text Box Renderer
@@ -9,7 +10,7 @@ import { layoutTextBoxParagraphs } from "../layout-engine/measure/textBoxParagra
 * - Background fill color
 * - Border/outline
 * - Internal padding (margins)
-* - Paragraph content inside the box (using pre-measured data)
+* - Block content inside the box (using pre-measured data)
 */
 /**
 * CSS class names for text box elements
@@ -39,27 +40,37 @@ function renderTextBoxFragment(fragment, block, measure, context, options = {})
 	if (fragment.pmStart !== void 0) containerEl.dataset["pmStart"] = String(fragment.pmStart);
 	if (fragment.pmEnd !== void 0) containerEl.dataset["pmEnd"] = String(fragment.pmEnd);
 	const innerWidth = fragment.width - margins.left - margins.right;
-	const paragraphLayout = layoutTextBoxParagraphs(block.content, measure.innerMeasures);
+	const contentLayout = layoutTextBoxContent(block.content, measure.innerMeasures);
 	for (let i = 0; i < block.content.length; i++) {
-		const paraBlock = block.content[i];
-		const paraMeasure = measure.innerMeasures[i];
-		const placement = paragraphLayout.placements[i];
-		if (!paraBlock || !paraMeasure || !placement) continue;
+		const contentBlock = block.content[i];
+		const contentMeasure = measure.innerMeasures[i];
+		const placement = contentLayout.placements[i];
+		if (!contentBlock || !contentMeasure || !placement) continue;
+		if (contentBlock.kind === "table" && contentMeasure.kind === "table") {
+			if (!options.renderTable) panic("renderTextBoxFragment: a nested table renderer is required for table content");
+			const tableEl = options.renderTable(contentBlock, contentMeasure, context, doc);
+			tableEl.style.marginTop = `${placement.leadingSpacing}px`;
+			containerEl.append(tableEl);
+			continue;
+		}
+		if (contentBlock.kind !== "paragraph" || contentMeasure.kind !== "paragraph") continue;
 		const paraFragment = {
 			kind: "paragraph",
-			blockId: paraBlock.id,
+			blockId: contentBlock.id,
 			x: 0,
 			y: 0,
 			width: innerWidth,
 			height: placement.contentHeight,
-			...paraBlock.pmStart !== void 0 ? { pmStart: paraBlock.pmStart } : {},
-			...paraBlock.pmEnd !== void 0 ? { pmEnd: paraBlock.pmEnd } : {},
+			...contentBlock.pmStart !== void 0 ? { pmStart: contentBlock.pmStart } : {},
+			...contentBlock.pmEnd !== void 0 ? { pmEnd: contentBlock.pmEnd } : {},
 			fromLine: 0,
-			toLine: paraMeasure.lines.length
+			toLine: contentMeasure.lines.length
 		};
-		const prevBorders = block.content[i - 1]?.attrs?.borders;
-		const nextBorders = block.content[i + 1]?.attrs?.borders;
-		const paraEl = renderParagraphFragment(paraFragment, paraBlock, paraMeasure, context, {
+		const previousBlock = block.content[i - 1];
+		const nextBlock = block.content[i + 1];
+		const prevBorders = previousBlock?.kind === "paragraph" ? previousBlock.attrs?.borders : void 0;
+		const nextBorders = nextBlock?.kind === "paragraph" ? nextBlock.attrs?.borders : void 0;
+		const paraEl = renderParagraphFragment(paraFragment, contentBlock, contentMeasure, context, {
 			document: doc,
 			...prevBorders !== void 0 ? { prevBorders } : {},
 			...nextBorders !== void 0 ? { nextBorders } : {}

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

@@ -3,7 +3,7 @@ import { Page } from "../layout-engine/types.js";
 
 //#region src/layout-painter/renderWatermark.d.ts
 type RenderWatermarkOptions = {
-  /** Resolved image src for picture watermarks (data URL or http URL). */imageSrc?: string;
+  /** Resolved image src for picture watermarks (`data:` / `blob:` only). */imageSrc?: string;
 };
 /**
  * Build the watermark overlay element for a page. Returns `null` when

package/dist/layout-painter/renderWatermark.js

@@ -1,4 +1,5 @@
 import { resolveFontFamily } from "../utils/fontResolver.js";
+import { applySanitizedImageSrc } from "../utils/sanitizeImageSrc.js";
 //#region src/layout-painter/renderWatermark.ts
 const WATERMARK_CLASS = "layout-page-watermark";
 /**
@@ -47,7 +48,7 @@ function renderTextWatermark(watermark, doc) {
 }
 function renderPictureWatermark(watermark, imageSrc, doc) {
 	const img = doc.createElement("img");
-	img.src = imageSrc;
+	applySanitizedImageSrc(img, imageSrc);
 	img.alt = "";
 	img.setAttribute("aria-hidden", "true");
 	const scalePct = (watermark.scale ?? 1) * 100;

package/dist/managers/DocumentLoaderManager.js

@@ -1,7 +1,7 @@
+import { resetAuthorColors } from "../utils/authorColors.js";
 import { loadFontsWithMapping } from "../utils/fontLoader.js";
 import { parseDocx } from "../docx/parser.js";
 import { inspectDocxCompatibility } from "../docx/compatibility.js";
-import { resetAuthorColors } from "../utils/authorColors.js";
 import { recordDocumentLoadPhase } from "../layout-engine/layoutInstrumentation.js";
 //#region src/managers/DocumentLoaderManager.ts
 /**

package/dist/markdown/fromMarkdown.js

@@ -1,5 +1,5 @@
-import { createEmptyDocument } from "../utils/createDocument.js";
 import { sanitizeExternalUrl } from "../utils/urlSecurity.js";
+import { createEmptyDocument } from "../utils/createDocument.js";
 import { marked } from "marked";
 //#region src/markdown/fromMarkdown.ts
 /**

package/dist/model.js

@@ -1,4 +1,4 @@
-import { deriveBlockId, getFolioParaIdFromBlockId, getSequentialFolioBlockIdIndex, isFolioBlockId, isSequentialFolioBlockId } from "./types/block-id.js";
 import { BORDER_STYLE_VALUES, CONDITIONAL_STYLE_TYPE_VALUES, EMPHASIS_MARK_VALUES, FIELD_TYPE_VALUES, FLOATING_TABLE_X_SPEC_VALUES, FLOATING_TABLE_Y_SPEC_VALUES, FONT_THEME_VALUES, FRAME_WRAP_VALUES, FRAME_X_ALIGN_VALUES, FRAME_Y_ALIGN_VALUES, HIGHLIGHT_COLOR_VALUES, IMAGE_HORIZONTAL_ALIGNMENT_VALUES, IMAGE_HORIZONTAL_RELATIVE_TO_VALUES, IMAGE_VERTICAL_ALIGNMENT_VALUES, IMAGE_VERTICAL_RELATIVE_TO_VALUES, IMAGE_WRAP_TEXT_VALUES, IMAGE_WRAP_TYPE_VALUES, LEVEL_SUFFIX_VALUES, LINE_SPACING_RULE_VALUES, NUMBER_FORMAT_VALUES, OUTLINE_STYLE_ATTR_VALUES, OUTLINE_STYLE_CSS_ALIASES, OUTLINE_STYLE_CSS_ALIAS_VALUES, PARAGRAPH_ALIGNMENT_VALUES, SDT_LOCK_VALUES, SDT_TYPE_VALUES, SHADING_PATTERN_VALUES, SHAPE_OUTLINE_STYLE_VALUES, SHAPE_TYPE_VALUES, STYLE_TYPE_VALUES, TABLE_CELL_TEXT_DIRECTION_VALUES, TABLE_CELL_VERTICAL_ALIGNMENT_VALUES, TABLE_JUSTIFICATION_VALUES, TABLE_ROW_HEIGHT_RULE_VALUES, TABLE_WIDTH_TYPE_VALUES, TAB_LEADER_VALUES, TAB_STOP_ALIGNMENT_VALUES, TEXT_EFFECT_VALUES, THEME_COLOR_SLOT_VALUES, UNDERLINE_STYLE_VALUES } from "./types/documentEnumValues.js";
+import { deriveBlockId, getFolioParaIdFromBlockId, getSequentialFolioBlockIdIndex, isFolioBlockId, isSequentialFolioBlockId } from "./types/block-id.js";
 import { types_exports } from "./layout-engine/types.js";
 export { BORDER_STYLE_VALUES, CONDITIONAL_STYLE_TYPE_VALUES, EMPHASIS_MARK_VALUES, FIELD_TYPE_VALUES, FLOATING_TABLE_X_SPEC_VALUES, FLOATING_TABLE_Y_SPEC_VALUES, FONT_THEME_VALUES, FRAME_WRAP_VALUES, FRAME_X_ALIGN_VALUES, FRAME_Y_ALIGN_VALUES, HIGHLIGHT_COLOR_VALUES, IMAGE_HORIZONTAL_ALIGNMENT_VALUES, IMAGE_HORIZONTAL_RELATIVE_TO_VALUES, IMAGE_VERTICAL_ALIGNMENT_VALUES, IMAGE_VERTICAL_RELATIVE_TO_VALUES, IMAGE_WRAP_TEXT_VALUES, IMAGE_WRAP_TYPE_VALUES, LEVEL_SUFFIX_VALUES, LINE_SPACING_RULE_VALUES, types_exports as Layout, NUMBER_FORMAT_VALUES, OUTLINE_STYLE_ATTR_VALUES, OUTLINE_STYLE_CSS_ALIASES, OUTLINE_STYLE_CSS_ALIAS_VALUES, PARAGRAPH_ALIGNMENT_VALUES, SDT_LOCK_VALUES, SDT_TYPE_VALUES, SHADING_PATTERN_VALUES, SHAPE_OUTLINE_STYLE_VALUES, SHAPE_TYPE_VALUES, STYLE_TYPE_VALUES, TABLE_CELL_TEXT_DIRECTION_VALUES, TABLE_CELL_VERTICAL_ALIGNMENT_VALUES, TABLE_JUSTIFICATION_VALUES, TABLE_ROW_HEIGHT_RULE_VALUES, TABLE_WIDTH_TYPE_VALUES, TAB_LEADER_VALUES, TAB_STOP_ALIGNMENT_VALUES, TEXT_EFFECT_VALUES, THEME_COLOR_SLOT_VALUES, UNDERLINE_STYLE_VALUES, deriveBlockId, getFolioParaIdFromBlockId, getSequentialFolioBlockIdIndex, isFolioBlockId, isSequentialFolioBlockId };