@stll/folio-core 0.11.0 → 0.12.0

package/dist/layout-engine/paragraphSpacing.js

@@ -1,4 +1,7 @@
+import { continuesNumberedSequence } from "./paragraphSequence.js";
 //#region src/layout-engine/paragraphSpacing.ts
+/** Collapse adjacent paragraph spacing to the larger authored side. */
+const collapseParagraphSpacing = ({ before, after }) => Math.max(before, after);
 /** Whether a paragraph has no visible run content. */
 function isEmptyParagraph(block) {
 	if (block.runs.length === 0) return true;
@@ -10,21 +13,112 @@ function isEmptyParagraph(block) {
 * Resolve leading paragraph spacing after applying the empty-paragraph
 * inherited-spacing collapse rule.
 */
-function getParagraphSpacingBefore(block) {
-	const value = block.attrs?.spacing?.before ?? 0;
-	if (value === 0) return 0;
-	if (isEmptyParagraph(block) && !block.attrs?.styleId && !block.attrs?.hasDirectParagraphFormatting && !block.attrs?.hasDirectParagraphMarkFormatting && !block.attrs?.spacingExplicit?.before) return 0;
-	return value;
-}
+const getParagraphSpacingBefore = (block) => resolveEffectiveParagraphSpacing(block).before;
 /**
 * Resolve trailing paragraph spacing after applying the empty-paragraph
 * inherited-spacing collapse rule.
 */
-function getParagraphSpacingAfter(block) {
-	const value = block.attrs?.spacing?.after ?? 0;
-	if (value === 0) return 0;
-	if (isEmptyParagraph(block) && !block.attrs?.styleId && !block.attrs?.hasDirectParagraphFormatting && !block.attrs?.hasDirectParagraphMarkFormatting && !block.attrs?.spacingExplicit?.after) return 0;
-	return value;
-}
+const getParagraphSpacingAfter = (block) => resolveEffectiveParagraphSpacing(block).after;
+/** Resolve empty-paragraph spacing without modifying the authored block. */
+const resolveEffectiveParagraphSpacing = (block) => {
+	const before = block.attrs?.spacing?.before ?? 0;
+	const after = block.attrs?.spacing?.after ?? 0;
+	if (!isEmptyParagraph(block) || preservesInheritedEmptySpacing(block)) return {
+		before,
+		after
+	};
+	return {
+		before: block.attrs?.spacingExplicit?.before ? before : 0,
+		after: block.attrs?.spacingExplicit?.after ? after : 0
+	};
+};
+/**
+* Derive sequence-level spacing suppression with structural sharing.
+*
+* Contextual and automatic list spacing affect layout values, not authored
+* OOXML formatting. Only changed branches are cloned; the input tree remains
+* untouched and repeated resolution is idempotent.
+*/
+const resolveEffectiveParagraphSpacingTree = (blocks) => {
+	let changed = false;
+	const resolved = blocks.map((block, index) => {
+		const next = resolveBlockSpacing(blocks, index);
+		if (next !== block) changed = true;
+		return next;
+	});
+	return changed ? resolved : blocks;
+};
+const paragraphsShareStyle = (previous, current) => previous.attrs?.styleId === current.attrs?.styleId;
+const preservesInheritedEmptySpacing = (block) => Boolean(block.attrs?.styleId || block.attrs?.hasDirectParagraphFormatting || block.attrs?.hasDirectParagraphMarkFormatting);
+const resolveBlockSpacing = (blocks, index) => {
+	const block = blocks[index];
+	if (block.kind === "paragraph") return resolveParagraphSequenceSpacing(blocks, index, block);
+	if (block.kind === "table") return resolveTableSpacing(block);
+	if (block.kind === "textBox") return resolveTextBoxSpacing(block);
+	return block;
+};
+const resolveParagraphSequenceSpacing = (blocks, index, block) => {
+	const spacing = block.attrs?.spacing;
+	if (!spacing) return block;
+	const previous = blocks[index - 1];
+	const next = blocks[index + 1];
+	const suppressBefore = previous?.kind === "paragraph" && (block.attrs?.contextualSpacing === true && paragraphsShareStyle(previous, block) || block.attrs?.automaticSpacing?.before === true && continuesNumberedSequence(previous, block));
+	const suppressAfter = next?.kind === "paragraph" && (block.attrs?.contextualSpacing === true && paragraphsShareStyle(block, next) || block.attrs?.automaticSpacing?.after === true && continuesNumberedSequence(block, next));
+	const beforeChanged = suppressBefore && spacing.before !== 0;
+	const afterChanged = suppressAfter && spacing.after !== 0;
+	if (!beforeChanged && !afterChanged) return block;
+	const effectiveSpacing = { ...spacing };
+	if (beforeChanged) effectiveSpacing.before = 0;
+	if (afterChanged) effectiveSpacing.after = 0;
+	return {
+		...block,
+		attrs: {
+			...block.attrs,
+			spacing: effectiveSpacing
+		}
+	};
+};
+const resolveTextBoxContentSpacing = (blocks) => {
+	let changed = false;
+	const resolved = blocks.map((block, index) => {
+		const next = block.kind === "table" ? resolveTableSpacing(block) : resolveParagraphSequenceSpacing(blocks, index, block);
+		if (next !== block) changed = true;
+		return next;
+	});
+	return changed ? resolved : blocks;
+};
+const resolveTableSpacing = (block) => {
+	let changed = false;
+	const rows = block.rows.map((row) => {
+		let rowChanged = false;
+		const cells = row.cells.map((cell) => {
+			const blocks = resolveEffectiveParagraphSpacingTree(cell.blocks);
+			if (blocks === cell.blocks) return cell;
+			rowChanged = true;
+			return {
+				...cell,
+				blocks
+			};
+		});
+		if (!rowChanged) return row;
+		changed = true;
+		return {
+			...row,
+			cells
+		};
+	});
+	return changed ? {
+		...block,
+		rows
+	} : block;
+};
+const resolveTextBoxSpacing = (block) => {
+	const content = resolveTextBoxContentSpacing(block.content);
+	if (content === block.content) return block;
+	return {
+		...block,
+		content
+	};
+};
 //#endregion
-export { getParagraphSpacingAfter, getParagraphSpacingBefore, isEmptyParagraph };
+export { collapseParagraphSpacing, getParagraphSpacingAfter, getParagraphSpacingBefore, isEmptyParagraph, paragraphsShareStyle, resolveEffectiveParagraphSpacing, resolveEffectiveParagraphSpacingTree };

package/dist/layout-engine/renderedBreakReconciliation.js

@@ -21,7 +21,7 @@ const reconcileBreakBeforeBlock = ({ state, block, previousBlock, page, blocksBy
 		state
 	};
 	const markerAlreadySatisfied = pageStartsWithPreviousParagraphContinuation(page, previousBlock) || state.type === "pageAdvance" && state.reason === "authoredBoundary" || state.type === "pageAdvance" && state.reason === "reflowBoundary" || state.type === "pageAdvance" && isPaginationEmptyParagraph(block) || state.type === "pageAdvance" && (continuesNumberedSequence(previousBlock, block) || continuesTabbedParagraphSequence(previousBlock, block));
-	const forcePageBreak = (renderedBreakNeedsSnap || block.attrs?.keepNext === true) && !markerAlreadySatisfied && pageHasVisibleBodyContent(page, blocksById);
+	const forcePageBreak = (renderedBreakNeedsSnap || block.attrs?.keepNext === true || (block.attrs?.spacing?.before ?? 0) > 0 && previousBlock?.kind !== "sectionBreak" || previousBlock?.kind === "table") && !markerAlreadySatisfied && pageHasVisibleBodyContent(page, blocksById);
 	const followsAuthoredPageBreak = previousBlock?.kind === "pageBreak";
 	const followsSectionBreak = previousBlock?.kind === "sectionBreak";
 	const followsPageBreakingSection = followsSectionBreak && previousBlock.type !== "continuous";

package/dist/layout-engine/types.d.ts

@@ -3,7 +3,7 @@ import { ImagePosition, ImageWrap, SdtProperties, SdtType, ShapeTextBody, TableC
 
 //#region src/layout-engine/types.d.ts
 declare namespace types_d_exports {
-  export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, tableColumnsArePinned };
+  export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, tableColumnsArePinned };
 }
 /**
  * Unique identifier for a block in the document.
@@ -196,6 +196,12 @@ type LineBreakRun = {
   pmStart?: number;
   pmEnd?: number;
 };
+/** Zero-width cached page boundary inside a paragraph. */
+type RenderedPageBreakRun = RunFormatting & {
+  kind: "renderedPageBreak";
+  pmStart?: number;
+  pmEnd?: number;
+};
 /**
  * A field run (PAGE, NUMPAGES, etc.) that gets substituted at render time.
  */
@@ -230,7 +236,7 @@ type MathRun = RunFormatting & {
 /**
  * Union of all run types.
  */
-type Run = TextRun | TabRun | ImageRun | LineBreakRun | FieldRun | MathRun;
+type Run = TextRun | TabRun | ImageRun | LineBreakRun | RenderedPageBreakRun | FieldRun | MathRun;
 /**
  * Paragraph spacing configuration.
  */
@@ -293,7 +299,10 @@ type ListNumPr = {
  * Paragraph block attributes.
  */
 type ParagraphAttrs = {
-  alignment?: "left" | "center" | "right" | "justify"; /** East Asian first/last-character restrictions (`w:kinsoku`). */
+  alignment?: "left" | "center" | "right" | "justify"; /** Document-generation policy for justified line fitting. */
+  justificationCompatibility?: {
+    type: "legacy";
+  }; /** East Asian first/last-character restrictions (`w:kinsoku`). */
   kinsoku?: boolean; /** Hanging punctuation (`w:overflowPunct`); defaults to enabled when omitted. */
   overflowPunctuation?: boolean; /** Exempt this paragraph from document automatic hyphenation. */
   suppressAutoHyphens?: boolean; /** Document-wide automatic hyphenation controls retained for line layout. */
@@ -315,7 +324,9 @@ type ParagraphAttrs = {
     useLegacyEthiopicAmharicRules?: boolean;
   }; /** OOXML outline level (`w:outlineLvl`), where zero is the top level. */
   outlineLevel?: number;
-  spacing?: ParagraphSpacing; /** Spacing sides resolved from OOXML automatic paragraph spacing. */
+  spacing?: ParagraphSpacing; /** Whether this paragraph participates in the active section line grid. */
+  snapToGrid?: boolean; /** Active section line pitch in pixels; present only on top-level body paragraphs. */
+  documentGridLinePitch?: number; /** Spacing sides resolved from OOXML automatic paragraph spacing. */
   automaticSpacing?: {
     before?: boolean;
     after?: boolean;
@@ -343,7 +354,7 @@ type ParagraphAttrs = {
   keepNext?: boolean;
   keepLines?: boolean;
   widowControl?: boolean;
-  pageBreakBefore?: boolean; /** Word's cached pagination hint (`w:lastRenderedPageBreak`). */
+  pageBreakBefore?: boolean; /** Cached OOXML pagination hint (`w:lastRenderedPageBreak`). */
   renderedPageBreakBefore?: boolean;
   styleId?: string;
   contextualSpacing?: boolean;
@@ -572,7 +583,8 @@ type SectionBreakBlock = {
   };
   orientation?: "portrait" | "landscape";
   margins?: PageMargins;
-  columns?: ColumnLayout;
+  columns?: ColumnLayout; /** Line pitch authored by the section properties that end at this boundary, in twips. */
+  documentGridLinePitchTwips?: number;
 };
 type PageHeaderFooterRefs = {
   titlePg?: boolean;
@@ -612,7 +624,7 @@ declare const DEFAULT_TEXTBOX_MARGINS: {
 /** Default text box width in pixels when no width is specified */
 declare const DEFAULT_TEXTBOX_WIDTH = 200;
 /**
- * Text box block — positioned container with paragraph content.
+ * Text box block — positioned container with block content.
  */
 type TextBoxBlock = {
   kind: "textBox";
@@ -629,8 +641,8 @@ type TextBoxBlock = {
     bottom: number;
     left: number;
     right: number;
-  }; /** Paragraph blocks inside the text box */
-  content: ParagraphBlock[]; /** Display mode copied from the ProseMirror text box node. */
+  }; /** Flow blocks inside the text box */
+  content: (ParagraphBlock | TableBlock)[]; /** Display mode copied from the ProseMirror text box node. */
   displayMode?: "inline" | "float" | "block"; /** CSS float direction copied from the ProseMirror text box node. */
   cssFloat?: "left" | "right" | "none"; /** OOXML wrap type for anchored text boxes. */
   wrapType?: ImageWrap["type"]; /** OOXML wrapText direction for anchored text boxes. */
@@ -704,7 +716,8 @@ type MeasuredLine = {
   floatSkipBefore?: number; /** Decorative hyphen inserted at a dictionary break without changing source text. */
   discretionaryHyphen?: {
     runIndex: number;
-  };
+  }; /** A cached pagination boundary occurs immediately before this line. */
+  renderedPageBreakBefore?: boolean;
 };
 /**
  * Measurement result for a paragraph block.
@@ -782,8 +795,8 @@ type ColumnBreakMeasure = {
 type TextBoxMeasure = {
   kind: "textBox";
   width: number;
-  height: number; /** Pre-measured inner paragraph measures (avoids re-measuring during render) */
-  innerMeasures: ParagraphMeasure[];
+  height: number; /** Pre-measured inner content (avoids re-measuring during render) */
+  innerMeasures: (ParagraphMeasure | TableMeasure)[];
 };
 /**
  * Union of all measurement types.
@@ -1112,4 +1125,4 @@ declare function tableColumnsArePinned(table: TableBlock): boolean;
 /** Return the leading visual offset for a row with omitted grid columns. */
 declare const getTableRowLeadingWidth: (row: TableRow, columnWidths: readonly number[]) => number;
 //#endregion
-export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, tableColumnsArePinned, types_d_exports };
+export { BlockId, BorderStyle, CellBorderSpec, CellBorders, ColumnBreakBlock, ColumnBreakMeasure, ColumnLayout, DEFAULT_TEXTBOX_MARGINS, DEFAULT_TEXTBOX_WIDTH, DocumentPosition, FOOTNOTE_ENTRY_MARGIN_BOTTOM, FOOTNOTE_FALLBACK_LINE_HEIGHT, FOOTNOTE_SEPARATOR_HEIGHT, FieldRun, FloatingTablePosition, FlowBlock, FootnoteContent, Fragment, FragmentBase, HeaderFooterContent, HeaderFooterContentHeights, HeaderFooterLayout, HitTestResult, HyperlinkInfo, ImageBlock, ImageFragment, ImageMeasure, ImageRun, ImageRunPosition, Layout, LayoutOptions, LineBreakRun, ListNumPr, MathRun, Measure, MeasuredLine, Page, PageBreakBlock, PageBreakMeasure, PageHeaderFooterRefs, PageMargins, ParagraphAttrs, ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphIndent, ParagraphMeasure, ParagraphSpacing, RenderedPageBreakRun, Run, RunFormatting, SdtGroup, SectionBreakBlock, SectionBreakMeasure, TabAlignment, TabRun, TabStop, TableBlock, TableCell, TableCellMeasure, TableFragment, TableMeasure, TableRow, TableRowMeasure, TextBoxBlock, TextBoxFlowAttrs, TextBoxFragment, TextBoxMeasure, TextRun, floatingTextBoxReservesBand, floatingTextBoxWrapsText, getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, tableColumnsArePinned, types_d_exports };

package/dist/layout-painter/registry/modules/textBox.js

@@ -1,4 +1,5 @@
 import { renderTextBoxFragment } from "../../renderTextBox.js";
+import { renderNestedTable } from "../../renderTable.js";
 //#region src/layout-painter/registry/modules/textBox.ts
 /**
 * Text-box feature module — renders `TextBoxFragment`.
@@ -6,7 +7,10 @@ import { renderTextBoxFragment } from "../../renderTextBox.js";
 const textBoxModule = {
 	kind: "textBox",
 	render({ fragment, block, measure, context, doc }) {
-		return renderTextBoxFragment(fragment, block, measure, context, { document: doc });
+		return renderTextBoxFragment(fragment, block, measure, context, {
+			document: doc,
+			renderTable: renderNestedTable
+		});
 	}
 };
 //#endregion

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

@@ -10,7 +10,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 +35,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 +128,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
@@ -470,7 +491,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,
@@ -546,6 +570,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 +670,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 +682,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 +691,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 +703,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 +963,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 +1109,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 +1302,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 +1362,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 +1451,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 +1464,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 +1474,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 +1487,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 +1548,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

@@ -2,8 +2,8 @@ import { parseXmlDocument } from "../docx/xmlParser.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { detectBaseDirection } from "../utils/baseDirection.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";
@@ -113,7 +113,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);
@@ -246,12 +246,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 +268,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 +278,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;
 }
@@ -642,6 +650,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 +929,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 +1407,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

@@ -156,7 +156,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 +740,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