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

package/dist/layout-painter/renderParagraph.js

@@ -0,0 +1,1300 @@
+import { parseXmlDocument } from "../docx/xmlParser.js";
+import { resolveFontFamily } from "../utils/fontResolver.js";
+import "../utils/fontWeights.js";
+import { calculateTabWidth } from "../prosemirror/utils/tabCalculator.js";
+import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
+import { isFloatingImageRun } from "../layout-engine/types.js";
+import { getListMarkerInlineWidth } from "../layout-engine/measure/listMarkerWidth.js";
+import { applySdtDataAttrs } from "./sdtBoundary.js";
+import { applyImageVisualAttrs, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
+import { ommlToMathml } from "../docx/mathToMathml.js";
+import { evaluateFieldInstruction } from "../fields/evaluateField.js";
+import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
+import { detectBaseDirection } from "../utils/baseDirection.js";
+import { hasCjk, segmentByScript } from "../utils/scriptSegments.js";
+import { getAutomaticTextColorForBackground } from "./documentColors.js";
+import { resolveImageLineAlign } from "./renderUtils.js";
+//#region src/layout-painter/renderParagraph.ts
+/**
+* Paragraph Fragment Renderer
+*
+* Renders paragraph fragments with lines and text runs to DOM.
+* Handles text formatting, alignment, and positioning.
+*/
+/**
+* CSS class names for paragraph rendering
+*/
+const PARAGRAPH_CLASS_NAMES = {
+	fragment: "layout-paragraph",
+	line: "layout-line",
+	run: "layout-run",
+	text: "layout-run-text",
+	tab: "layout-run-tab",
+	image: "layout-run-image",
+	lineBreak: "layout-run-linebreak"
+};
+/**
+* Check if run is a text run
+*/
+function isTextRun(run) {
+	return run.kind === "text";
+}
+/**
+* Check if run is a tab run
+*/
+function isTabRun(run) {
+	return run.kind === "tab";
+}
+/**
+* Check if run is an image run
+*/
+function isImageRun(run) {
+	return run.kind === "image";
+}
+/**
+* Check if run is a line break run
+*/
+function isLineBreakRun(run) {
+	return run.kind === "lineBreak";
+}
+/**
+* Check if run is a field run
+*/
+function isFieldRun(run) {
+	return run.kind === "field";
+}
+/**
+* Check if run is a math equation run
+*/
+function isMathRun(run) {
+	return run.kind === "math";
+}
+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;
+function normalizeTextColorValue(color) {
+	return color.trim().toLowerCase().replace(/^#/u, "");
+}
+function isAutomaticTextColor(color) {
+	return AUTOMATIC_TEXT_COLOR_VALUES.has(normalizeTextColorValue(color));
+}
+function isDefaultBlackTextColor(color) {
+	return DEFAULT_BLACK_TEXT_COLOR_VALUES.has(normalizeTextColorValue(color));
+}
+function shouldRenderTextColor(color, highlight, textColorSource) {
+	if (isAutomaticTextColor(color)) return false;
+	if (highlight) return textColorSource !== "paragraphDefault" || !isDefaultBlackTextColor(color);
+	return !isDefaultBlackTextColor(color);
+}
+function getRenderableTextColor(run) {
+	const textColor = run.color;
+	if (!textColor) return;
+	if (!shouldRenderTextColor(textColor, run.highlight, run.textColorSource)) return;
+	return textColor.trim();
+}
+function getHyperlinkTextColor(run, inheritedColor) {
+	const textColor = run.color?.trim();
+	if (textColor && !isAutomaticTextColor(textColor) && run.textColorSource === "direct") return textColor;
+	return getRenderableTextColor(run) || inheritedColor || "#0563c1";
+}
+function fontSizePtToPx(fontSizePt) {
+	return fontSizePt * 96 / 72;
+}
+function getRaisedRunFontSize(run) {
+	if (run.fontSize) return `${fontSizePtToPx(run.fontSize) * DOCX_SUPERSCRIPT_SCALE}px`;
+	return `${DOCX_SUPERSCRIPT_SCALE}em`;
+}
+/**
+* Apply text run styles to an element
+*/
+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.italic) element.style.fontStyle = "italic";
+	let hasExplicitTextColor = false;
+	const textColor = getRenderableTextColor(run);
+	if (textColor) {
+		element.style.color = textColor;
+		element.style.setProperty("--doc-run-color", textColor);
+		hasExplicitTextColor = true;
+	}
+	if (run.letterSpacing) element.style.letterSpacing = `${run.letterSpacing}px`;
+	if (run.allCaps) element.style.textTransform = "uppercase";
+	if (run.smallCaps) element.style.fontVariant = "small-caps";
+	if (run.positionPx) element.style.verticalAlign = `${run.positionPx}px`;
+	if (run.horizontalScale && run.horizontalScale !== 100) {
+		element.style.display = "inline-block";
+		element.style.transform = `scaleX(${run.horizontalScale / 100})`;
+		element.style.transformOrigin = "left center";
+	}
+	if (run.kerningMinPt && run.kerningMinPt > 0) {
+		if ((run.fontSize ?? 11) >= run.kerningMinPt) element.style.fontKerning = "normal";
+	}
+	if (run.emboss) element.style.textShadow = "1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.3)";
+	if (run.imprint) element.style.textShadow = "-1px -1px 1px rgba(255,255,255,0.5), 1px 1px 1px rgba(0,0,0,0.3)";
+	if (run.textShadow && !run.emboss && !run.imprint) element.style.textShadow = "1px 1px 2px rgba(0,0,0,0.3)";
+	if (run.textOutline) {
+		element.style.webkitTextStroke = "1px currentColor";
+		element.style.webkitTextFillColor = "transparent";
+	}
+	if (run.rtl === true) element.dir = "rtl";
+	else if (run.rtl === false) element.dir = "ltr";
+	if (run.textEffect) {
+		element.classList.add("docx-text-effect", `docx-text-effect-${run.textEffect}`);
+		element.dataset["effect"] = run.textEffect;
+	}
+	if (run.emphasisMark) {
+		let variant = "filled dot";
+		if (run.emphasisMark === "comma") variant = "filled sesame";
+		else if (run.emphasisMark === "circle") variant = "filled circle";
+		const position = run.emphasisMark === "underDot" ? "under right" : "over right";
+		element.style.textEmphasis = variant;
+		element.style.textEmphasisPosition = position;
+		element.style.webkitTextEmphasis = variant;
+		element.style.webkitTextEmphasisPosition = position;
+	}
+	if (run.hidden) {
+		element.classList.add("docx-hidden");
+		element.style.opacity = "0.4";
+	}
+	const runBackground = run.highlight ?? run.shading;
+	if (runBackground) {
+		element.style.backgroundColor = runBackground;
+		const hasTrackedChangeColor = run.isInsertion || run.isDeletion;
+		const hasCommentHighlight = run.commentIds !== void 0 && run.commentIds.length > 0;
+		const automaticTextColor = hasExplicitTextColor || hasTrackedChangeColor || hasCommentHighlight ? void 0 : getAutomaticTextColorForBackground(runBackground);
+		if (automaticTextColor) element.style.color = automaticTextColor;
+	}
+	const decorations = [];
+	let explicitDecorationStyle = false;
+	if (run.underline) {
+		if (!isNoteReferenceRun(run)) decorations.push("underline");
+		if (typeof run.underline === "object") {
+			if (run.underline.style) {
+				element.style.textDecorationStyle = run.underline.style;
+				explicitDecorationStyle = true;
+			}
+			if (run.underline.color) element.style.textDecorationColor = run.underline.color;
+		}
+	}
+	if (run.strike) decorations.push("line-through");
+	if (run.hidden) {
+		if (!decorations.includes("underline")) decorations.push("underline");
+		if (!explicitDecorationStyle) element.style.textDecorationStyle = "dotted";
+	}
+	if (run.commentIds && run.commentIds.length > 0) {
+		element.style.backgroundColor = "rgba(255, 212, 0, 0.08)";
+		element.style.borderBottom = "1px solid rgba(180, 130, 0, 0.24)";
+		element.dataset["commentId"] = String(run.commentIds[0]);
+	}
+	if (run.isInsertion) {
+		const authorIdx = getAuthorColorIdx(run.changeAuthor ?? "");
+		const authorColor = AUTHOR_COLORS[authorIdx];
+		element.style.color = authorColor;
+		if (!decorations.includes("underline")) decorations.push("underline");
+		element.style.textDecorationColor = authorColor;
+		element.classList.add("docx-insertion");
+		element.dataset["tcAuthorIdx"] = String(authorIdx);
+		const insertionParts = [run.changeAuthor, run.changeDate ? new Date(run.changeDate).toLocaleDateString() : ""].filter(Boolean);
+		if (insertionParts.length > 0) element.title = `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);
+	}
+	if (run.isDeletion) {
+		const authorIdx = getAuthorColorIdx(run.changeAuthor ?? "");
+		const authorColor = AUTHOR_COLORS[authorIdx];
+		element.style.color = authorColor;
+		if (!decorations.includes("line-through")) decorations.push("line-through");
+		element.style.textDecorationColor = authorColor;
+		element.classList.add("docx-deletion");
+		element.dataset["tcAuthorIdx"] = String(authorIdx);
+		const deletionParts = [run.changeAuthor, run.changeDate ? new Date(run.changeDate).toLocaleDateString() : ""].filter(Boolean);
+		if (deletionParts.length > 0) element.title = `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);
+	}
+	if (decorations.length > 0) element.style.textDecorationLine = decorations.join(" ");
+	if (run.superscript) {
+		element.style.position = "relative";
+		element.style.top = "-0.4em";
+		element.style.fontSize = getRaisedRunFontSize(run);
+	}
+	if (run.subscript) {
+		element.style.position = "relative";
+		element.style.top = "0.2em";
+		element.style.fontSize = getRaisedRunFontSize(run);
+	}
+}
+function reserveScaledAdvance(element, unscaledWidth, horizontalScale) {
+	if (horizontalScale === void 0 || horizontalScale === 100) return;
+	element.style.width = `${unscaledWidth * (horizontalScale / 100)}px`;
+}
+/**
+* Apply PM position data attributes
+*/
+function applyPmPositions(element, pmStart, pmEnd) {
+	if (pmStart !== void 0) element.dataset["pmStart"] = String(pmStart);
+	if (pmEnd !== void 0) element.dataset["pmEnd"] = String(pmEnd);
+}
+/**
+* Render a text run
+*/
+function renderTextRun(run, doc) {
+	const span = doc.createElement("span");
+	span.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.text}`;
+	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);
+	if (run.hyperlink) {
+		const anchor = doc.createElement("a");
+		anchor.href = run.hyperlink.href;
+		if (!run.hyperlink.href.startsWith("#")) {
+			anchor.target = "_blank";
+			anchor.rel = "noopener noreferrer";
+		}
+		if (run.hyperlink.tooltip) anchor.title = run.hyperlink.tooltip;
+		anchor.textContent = run.text;
+		if (!run.hyperlink.noDefaultStyle) {
+			const hyperlinkColor = getHyperlinkTextColor(run, span.style.color);
+			anchor.style.color = hyperlinkColor;
+			anchor.style.textDecoration = "underline";
+			span.style.color = hyperlinkColor;
+			anchor.style.setProperty("--doc-run-color", hyperlinkColor);
+			span.style.setProperty("--doc-run-color", hyperlinkColor);
+		}
+		span.append(anchor);
+	} else span.textContent = run.text;
+	applyWhitespaceUnderline(span, run);
+	return span;
+}
+function isNoteReferenceRun(run) {
+	return run.footnoteRefId !== void 0 || run.endnoteRefId !== void 0;
+}
+function removeUnderlineTextDecoration(element) {
+	const textDecorationLines = (element.style.textDecorationLine || "").split(/\s+/u).filter((line) => line && line !== "underline");
+	element.style.textDecorationLine = textDecorationLines.join(" ");
+}
+function applyWhitespaceUnderline(element, run) {
+	if (!run.underline || run.text.trim().length > 0) return;
+	removeUnderlineTextDecoration(element);
+	element.style.borderBottom = "1px solid currentColor";
+	if (typeof run.underline === "object" && run.underline.color) element.style.borderBottomColor = run.underline.color;
+}
+/**
+* Number of leader characters to fill the tab's inner span. The inner span
+* uses `overflow: hidden` so excess characters are clipped invisibly; we just
+* need enough to span the widest realistic tab stop at the thinnest leader
+* (a dot at small font sizes). 1000 covers wide-landscape pages with ~2px dots.
+*/
+const LEADER_FILL_COUNT = 1e3;
+/**
+* Render a tab run with calculated width.
+*
+* Leader characters (dot/hyphen/underscore for TOC entries) render in an
+* absolute-positioned inner span over a baseline-aligned zero-width-space.
+* The earlier SVG background-image approach sat at the line's bottom edge,
+* misaligned with the surrounding text baseline and broken under flex layout
+* (where the outer's height collapses to the inner content). The
+* outer-with-ZWSP + inner-absolute pattern keeps the tab's baseline anchored
+* to the surrounding text and lets the right-tab flex anchor compute a stable
+* height for the line.
+*/
+function renderTabRun(run, doc, width, leader) {
+	const span = doc.createElement("span");
+	span.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.tab}`;
+	span.style.display = "inline-block";
+	span.style.width = `${width}px`;
+	applyRunStyles(span, run);
+	applyTabUnderline(span, run);
+	applyPmPositions(span, run.pmStart, run.pmEnd);
+	const leaderChar = leader && leader !== "none" ? getLeaderChar(leader) : null;
+	if (leaderChar) {
+		span.style.position = "relative";
+		span.textContent = "​";
+		const inner = doc.createElement("span");
+		inner.style.position = "absolute";
+		inner.style.left = "0";
+		inner.style.right = "0";
+		inner.style.top = "0";
+		inner.style.bottom = "0";
+		inner.style.overflow = "hidden";
+		inner.style.whiteSpace = "nowrap";
+		inner.textContent = leaderChar.repeat(LEADER_FILL_COUNT);
+		span.append(inner);
+	} else span.textContent = "\xA0";
+	return span;
+}
+function applyTabUnderline(element, run) {
+	if (!run.underline) return;
+	removeUnderlineTextDecoration(element);
+	element.style.borderBottom = "1px solid currentColor";
+	if (typeof run.underline === "object" && run.underline.color) element.style.borderBottomColor = run.underline.color;
+}
+/**
+* Get leader character for tab
+*/
+function getLeaderChar(leader) {
+	switch (leader) {
+		case "dot": return ".";
+		case "hyphen": return "-";
+		case "underscore": return "_";
+		case "middleDot": return "·";
+		case "heavy": return "_";
+		default: return null;
+	}
+}
+/**
+* Render an inline image run (flows with text)
+*/
+function renderInlineImageRun(run, doc) {
+	const img = doc.createElement("img");
+	img.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.image}`;
+	img.src = run.src;
+	img.width = run.width;
+	img.height = run.height;
+	img.style.width = `${run.width}px`;
+	img.style.height = `${run.height}px`;
+	if (run.alt) img.alt = run.alt;
+	if (run.transform) {
+		img.style.transform = run.transform;
+		img.style.transformOrigin = "center center";
+	}
+	const rotation = parseRotationDegrees(run.transform);
+	if (rotation !== 0) {
+		const bbox = rotatedBoundingBox(run.width, run.height, rotation);
+		const wrapper = doc.createElement("span");
+		wrapper.className = PARAGRAPH_CLASS_NAMES.run;
+		wrapper.style.display = "inline-block";
+		wrapper.style.position = "relative";
+		wrapper.style.width = `${bbox.width}px`;
+		wrapper.style.height = `${bbox.height}px`;
+		wrapper.style.verticalAlign = "middle";
+		if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
+		if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
+		img.style.position = "absolute";
+		img.style.left = `${(bbox.width - run.width) / 2}px`;
+		img.style.top = `${(bbox.height - run.height) / 2}px`;
+		applyPmPositions(wrapper, run.pmStart, run.pmEnd);
+		wrapper.append(img);
+		return wrapper;
+	}
+	if (hasImageVisualAttrs(run)) {
+		const wrapper = wrapImageWithCrop(img, run, doc, {
+			display: "inline-block",
+			widthPx: run.width,
+			heightPx: run.height
+		});
+		wrapper.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.image}`;
+		wrapper.style.verticalAlign = "middle";
+		if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
+		if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
+		applyPmPositions(wrapper, run.pmStart, run.pmEnd);
+		return wrapper;
+	}
+	if (hasImageVisualAttrs(run)) applyImageVisualAttrs(img, run);
+	img.style.display = "inline";
+	img.style.verticalAlign = "middle";
+	if (run.width > 0 && run.height > 0) {
+		img.style.height = "auto";
+		img.style.aspectRatio = `${run.width} / ${run.height}`;
+		img.style.maxWidth = "100%";
+	}
+	if (run.distTop) img.style.marginTop = `${run.distTop}px`;
+	if (run.distBottom) img.style.marginBottom = `${run.distBottom}px`;
+	applyPmPositions(img, run.pmStart, run.pmEnd);
+	return img;
+}
+/**
+* Render a block image (on its own line, like topAndBottom)
+*/
+function renderBlockImage(run, doc) {
+	const container = doc.createElement("div");
+	container.className = "layout-block-image";
+	container.style.display = "block";
+	container.style.textAlign = "center";
+	container.style.marginTop = `${run.distTop ?? 6}px`;
+	container.style.marginBottom = `${run.distBottom ?? 6}px`;
+	const img = doc.createElement("img");
+	img.src = run.src;
+	img.width = run.width;
+	img.height = run.height;
+	if (run.alt) img.alt = run.alt;
+	if (run.transform) {
+		img.style.transform = run.transform;
+		img.style.transformOrigin = "center center";
+	}
+	const rotation = parseRotationDegrees(run.transform);
+	if (rotation !== 0) {
+		const bbox = rotatedBoundingBox(run.width, run.height, rotation);
+		container.style.width = `${bbox.width}px`;
+		container.style.height = `${bbox.height}px`;
+		container.style.position = "relative";
+		img.style.position = "absolute";
+		img.style.left = `${(bbox.width - run.width) / 2}px`;
+		img.style.top = `${(bbox.height - run.height) / 2}px`;
+		img.style.width = `${run.width}px`;
+		img.style.height = `${run.height}px`;
+		img.style.marginLeft = "0";
+		img.style.marginRight = "0";
+		img.style.marginTop = "0";
+	}
+	if (hasImageVisualAttrs(run)) {
+		const wrapper = wrapImageWithCrop(img, run, doc, {
+			display: "inline-block",
+			widthPx: run.width,
+			heightPx: run.height
+		});
+		applyPmPositions(container, run.pmStart, run.pmEnd);
+		container.append(wrapper);
+		return container;
+	}
+	if (rotation === 0) {
+		img.style.marginLeft = "auto";
+		img.style.marginRight = "auto";
+	}
+	if (hasImageVisualAttrs(run)) applyImageVisualAttrs(img, run);
+	applyPmPositions(container, run.pmStart, run.pmEnd);
+	container.append(img);
+	return container;
+}
+/**
+* Render an image run based on its display mode
+* Note: Floating images (square/tight/through) are handled separately at paragraph level,
+* not through this function. If they reach here, render as block.
+*/
+function renderImageRun(run, doc) {
+	let el;
+	if (isFloatingImageRun(run) || run.displayMode === "block" || run.wrapType === "topAndBottom") el = renderBlockImage(run, doc);
+	else el = renderInlineImageRun(run, doc);
+	applyImageRevisionStyle(getImageRevisionStyleTarget(el), run);
+	return el;
+}
+function isStyleableHTMLElement(value) {
+	return typeof value === "object" && "style" in value;
+}
+function getImageRevisionStyleTarget(el) {
+	if (!el.className.split(/\s+/u).includes("layout-block-image")) return el;
+	const firstChild = el.children[0];
+	if (isStyleableHTMLElement(firstChild)) return firstChild;
+	return el;
+}
+/**
+* A picture that is itself a tracked change gets a coloured outline (green for
+* an insertion, red + faded for a deletion), mirroring the text-run treatment.
+* `outline` is used over `border` so the image's box size is unchanged and
+* line metrics stay stable. eigenpal #641.
+*/
+function applyImageRevisionStyle(el, run) {
+	if (run.isInsertion) {
+		el.style.outline = "2px solid #2e7d32";
+		el.style.outlineOffset = "1px";
+		el.classList.add("docx-insertion");
+	} else if (run.isDeletion) {
+		el.style.outline = "2px solid #c62828";
+		el.style.outlineOffset = "1px";
+		el.style.opacity = "0.6";
+		el.classList.add("docx-deletion");
+	} else return;
+	if (run.changeAuthor !== void 0) el.dataset["changeAuthor"] = run.changeAuthor;
+	if (run.changeDate !== void 0) el.dataset["changeDate"] = run.changeDate;
+	if (run.changeRevisionId !== void 0) el.dataset["revisionId"] = String(run.changeRevisionId);
+}
+/**
+* Render a line break run
+*/
+function renderLineBreakRun(run, doc) {
+	const br = doc.createElement("br");
+	br.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.lineBreak}`;
+	applyPmPositions(br, run.pmStart, run.pmEnd);
+	return br;
+}
+/**
+* Render a field run (PAGE, NUMPAGES, etc.)
+* Substitutes the field with actual values from context.
+*/
+const EMPTY_BOOKMARK_PAGES = /* @__PURE__ */ new Map();
+const EMPTY_BOOKMARK_TEXT = /* @__PURE__ */ new Map();
+const EMPTY_SEQ_VALUES = /* @__PURE__ */ new Map();
+/**
+* Resolve a field run to its display text against the painted page. Used by the
+* painter and by the tab-anchor width/text helpers so the width reserved for a
+* field after a tab and the text actually painted always agree. The instruction
+* drives evaluation; `fieldType` is the fallback when a node carries none.
+* Returns the cached fallback when no render context is available.
+*/
+function resolveFieldText(run, context) {
+	if (!context) return run.fallback ?? "";
+	const fieldContext = {
+		pageNumber: context.pageNumber,
+		totalPages: context.totalPages,
+		bookmarkPages: context.bookmarkPages ?? EMPTY_BOOKMARK_PAGES,
+		bookmarkText: context.bookmarkText ?? EMPTY_BOOKMARK_TEXT,
+		seqValues: context.seqValues ?? EMPTY_SEQ_VALUES,
+		now: /* @__PURE__ */ new Date(),
+		...context.sectionPages === void 0 ? {} : { sectionPages: context.sectionPages }
+	};
+	return evaluateFieldInstruction(run.instruction || run.fieldType, fieldContext, {
+		fallback: run.fallback ?? "",
+		...run.pmStart === void 0 ? {} : { instanceId: run.pmStart },
+		...run.fldLock ? { locked: true } : {}
+	});
+}
+function renderFieldRun(run, doc, context) {
+	const text = resolveFieldText(run, context);
+	const resolvedRun = {
+		...run,
+		kind: "text",
+		text
+	};
+	if (resolvedRun.eastAsiaFontFamily !== void 0 && !resolvedRun.letterSpacing && hasCjk(text)) {
+		const wrapper = doc.createElement("span");
+		applyPmPositions(wrapper, resolvedRun.pmStart, resolvedRun.pmEnd);
+		if (resolvedRun.horizontalScale && resolvedRun.horizontalScale !== 100) {
+			wrapper.style.display = "inline-block";
+			wrapper.style.transform = `scaleX(${resolvedRun.horizontalScale / 100})`;
+			wrapper.style.transformOrigin = "left center";
+		}
+		const { pmStart: _pmStart, pmEnd: _pmEnd, horizontalScale: _horizontalScale, ...segmentBase } = resolvedRun;
+		for (const segment of segmentByScript(text)) {
+			const segmentRun = {
+				...segmentBase,
+				text: segment.text,
+				...segment.isCjk ? { fontFamily: resolvedRun.eastAsiaFontFamily } : {}
+			};
+			wrapper.append(renderTextRun(segmentRun, doc));
+		}
+		return wrapper;
+	}
+	return renderTextRun(resolvedRun, doc);
+}
+/**
+* Render an OMML math run by converting it to MathML and injecting a
+* native `<math>` element. Browsers (Firefox, Safari, Chromium ≥ 109)
+* render MathML Core natively, so no JS typesetting engine is required.
+*
+* The raw OMML XML stays on the model — only the rendered DOM is derived
+* from it. If conversion fails we fall back to the existing italic
+* plain-text span so the user always sees something and the underlying
+* OMML is preserved for save.
+*/
+function renderMathRun(run, doc) {
+	const fallbackText = run.plainText || "[equation]";
+	let mathml = null;
+	try {
+		const ommlEl = parseXmlDocument(run.ommlXml);
+		if (ommlEl) mathml = ommlToMathml(ommlEl);
+	} catch {}
+	if (!mathml) return renderMathFallback(run, doc, fallbackText, "1");
+	const host = doc.createElement("span");
+	host.className = `${PARAGRAPH_CLASS_NAMES.run} docx-math docx-math-${run.display}`;
+	host.dataset["display"] = run.display;
+	host.dataset["ommlRender"] = "mathml";
+	if (run.display === "block") {
+		host.style.display = "inline-block";
+		host.style.verticalAlign = "middle";
+	}
+	host.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	try {
+		host.innerHTML = mathml;
+	} catch {
+		return renderMathFallback(run, doc, fallbackText, "1");
+	}
+	const mathRoot = host.firstElementChild;
+	if (mathRoot && mathRoot.tagName.toLowerCase() === "math") mathRoot.setAttribute("alttext", fallbackText);
+	applyPmPositions(host, run.pmStart, run.pmEnd);
+	return host;
+}
+function renderMathFallback(run, doc, fallbackText, errorFlag) {
+	const span = doc.createElement("span");
+	span.className = `${PARAGRAPH_CLASS_NAMES.run} docx-math docx-math-${run.display} docx-math-fallback`;
+	span.dataset["display"] = run.display;
+	span.dataset["ommlRender"] = "fallback";
+	if (errorFlag === "1") {
+		span.dataset["ommlRenderError"] = "1";
+		span.title = "[equation render failed]";
+	}
+	span.style.fontStyle = "italic";
+	span.style.fontFamily = "\"Cambria Math\", \"Latin Modern Math\", \"STIX Two Math\", serif";
+	span.textContent = fallbackText;
+	applyPmPositions(span, run.pmStart, run.pmEnd);
+	return span;
+}
+/**
+* Render a single run (for non-tab runs)
+*/
+function renderRun(run, doc, context) {
+	if (isTextRun(run)) return renderTextRun(run, doc);
+	if (isTabRun(run)) return renderTabRun(run, doc, 48);
+	if (isImageRun(run)) return renderImageRun(run, doc);
+	if (isLineBreakRun(run)) return renderLineBreakRun(run, doc);
+	if (isFieldRun(run) && context) return renderFieldRun(run, doc, context);
+	if (isMathRun(run)) return renderMathRun(run, doc);
+	const span = doc.createElement("span");
+	span.className = PARAGRAPH_CLASS_NAMES.run;
+	return span;
+}
+/**
+* Slice runs for a specific line
+*
+* @param block - The paragraph block
+* @param line - The line measurement
+* @returns Array of runs for this line
+*/
+function sliceRunsForLine(block, line) {
+	const result = [];
+	const runs = block.runs;
+	for (let runIndex = line.fromRun; runIndex <= line.toRun; runIndex++) {
+		const run = runs[runIndex];
+		if (!run) continue;
+		if (isTextRun(run)) {
+			const startChar = runIndex === line.fromRun ? line.fromChar : 0;
+			const endChar = runIndex === line.toRun ? line.toChar : run.text.length;
+			if (startChar > 0 || endChar < run.text.length) {
+				const slicedText = run.text.slice(startChar, endChar);
+				const clampPm = (position) => run.pmEnd === void 0 ? position : Math.min(position, run.pmEnd);
+				result.push({
+					...run,
+					text: slicedText,
+					...run.pmStart !== void 0 ? {
+						pmStart: clampPm(run.pmStart + startChar),
+						pmEnd: clampPm(run.pmStart + endChar)
+					} : {}
+				});
+			} else result.push(run);
+		} else result.push(run);
+	}
+	return result;
+}
+/**
+* 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
+* `fontFamily`. Each sub-run gets a contiguous, exact `pmStart`/`pmEnd` (the
+* same offset math as `sliceRunsForLine`), keeping PM position mapping,
+* selection rects, and click-to-caret correct. The measurer segments the same
+* 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).
+*/
+function splitTextRunsByEastAsia(runs) {
+	const result = [];
+	for (const run of runs) {
+		if (!isTextRun(run) || run.eastAsiaFontFamily === void 0 || run.letterSpacing || !hasCjk(run.text)) {
+			result.push(run);
+			continue;
+		}
+		let offset = 0;
+		for (const segment of segmentByScript(run.text)) {
+			result.push({
+				...run,
+				text: segment.text,
+				...segment.isCjk ? { fontFamily: run.eastAsiaFontFamily } : {},
+				...run.pmStart !== void 0 ? {
+					pmStart: run.pmStart + offset,
+					pmEnd: run.pmStart + offset + segment.text.length
+				} : {}
+			});
+			offset += segment.text.length;
+		}
+	}
+	return result;
+}
+/**
+* Sub-pixel tolerance when comparing canvas-measured widths against the DOM's
+* actual right edge. Accumulated rounding from canvas measureText vs. browser
+* layout can leave a right-anchored tab one pixel short, so the flex anchor
+* must trigger within this slack.
+*/
+const RIGHT_EDGE_EPSILON_PX = .5;
+/**
+* Build a TextMeasureStyle from a TextRun or FieldRun's relevant fields.
+*/
+function runMeasureStyle(run) {
+	return {
+		...run.bold !== void 0 ? { bold: run.bold } : {},
+		...run.italic !== void 0 ? { italic: run.italic } : {},
+		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
+		...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {},
+		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {}
+	};
+}
+/**
+* Sum the pixel widths of runs that follow a tab on the same line, up to the
+* next tab or line break. Measures per-run so the right-tab anchor reserves
+* the exact space the trailing content will take when it uses a different
+* font/size from the default (e.g. TOC page numbers). Floating images
+* contribute 0 inline width — they render at the page level.
+*/
+function measureFollowingContentWidth(runs, tabRunIndex, measureText, context) {
+	let width = 0;
+	for (let i = tabRunIndex + 1; i < runs.length; i++) {
+		const run = runs[i];
+		if (isTabRun(run) || isLineBreakRun(run)) break;
+		const scale = run.horizontalScale ?? 100;
+		if (isTextRun(run)) {
+			const text = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
+			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+		} else if (isFieldRun(run)) {
+			const fieldText = resolveFieldText(run, context);
+			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+		} else if (isImageRun(run) && !isFloatingImageRun(run)) width += inlineImageBoundingBox(run).width || 0;
+		else if (isMathRun(run)) width += measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run)) * (scale / 100);
+	}
+	return width;
+}
+/**
+* Width of the decimal prefix (text before the first ".") that follows a tab,
+* accumulated per run so a prefix spanning multiple fonts measures each part in
+* its own font. After the EA split a prefix like `合計12` is a CJK sub-run (EA
+* font) followed by a Latin sub-run, so measuring the whole prefix in the first
+* sub-run's font would force the digits into the EA face and drift the decimal
+* point from the measured tab stop.
+*/
+function measureDecimalPrefixWidth(runs, tabRunIndex, decimalIndex, measureText, context) {
+	let width = 0;
+	let consumed = 0;
+	for (let i = tabRunIndex + 1; i < runs.length && consumed < decimalIndex; i++) {
+		const run = runs[i];
+		if (isTabRun(run) || isLineBreakRun(run)) break;
+		if (!isTextRun(run) && !isFieldRun(run) && !isMathRun(run)) continue;
+		let runText;
+		if (isFieldRun(run)) {
+			const resolved = resolveFieldText(run, context);
+			runText = run.allCaps ? resolved.toLocaleUpperCase() : resolved;
+		} else if (isMathRun(run)) runText = run.plainText;
+		else runText = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
+		const take = Math.min(runText.length, decimalIndex - consumed);
+		if (take > 0) {
+			const scale = run.horizontalScale ?? 100;
+			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * (scale / 100);
+		}
+		consumed += runText.length;
+	}
+	return width;
+}
+/**
+* Build a stable key for an inline image run.
+* PM positions are preferred because they uniquely identify the source node.
+*/
+function getInlineImageRunKey(run) {
+	return [
+		run.pmStart ?? "no-start",
+		run.pmEnd ?? "no-end",
+		run.src,
+		run.width,
+		run.height,
+		run.displayMode ?? "inline",
+		run.wrapType ?? "none"
+	].join("|");
+}
+/**
+* Convert layout engine TabStop to tab calculator TabStop format
+*/
+function convertTabStopToCalc(stop) {
+	return {
+		val: stop.val,
+		pos: stop.pos,
+		...stop.leader !== void 0 ? { leader: stop.leader } : {}
+	};
+}
+/**
+* Get the text content immediately following a tab run in the runs array
+* Used for center/end/decimal tab alignment calculations
+*/
+function getTextAfterTab(runs, tabRunIndex, context) {
+	let text = "";
+	for (let i = tabRunIndex + 1; i < runs.length; i++) {
+		const run = runs[i];
+		if (isTextRun(run)) text += run.text;
+		else if (isFieldRun(run)) text += resolveFieldText(run, context);
+		else if (isTabRun(run) || isLineBreakRun(run)) break;
+		else if (isMathRun(run)) text += run.plainText;
+	}
+	return text;
+}
+function applyLetterSpacingToMeasuredWidth(width, text, letterSpacing) {
+	if (!letterSpacing || text.length <= 1) return width;
+	return width + letterSpacing * (text.length - 1);
+}
+function createTextMeasurer(doc) {
+	const ctx = doc.createElement("canvas").getContext("2d");
+	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
+		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
+		const cssFallback = resolveFontFamily(fontFamily).cssFallback;
+		const fontSizePx = fontSize * 96 / 72;
+		const fontPrefixParts = [];
+		if (style.italic) fontPrefixParts.push("italic");
+		if (style.smallCaps) fontPrefixParts.push("small-caps");
+		if (style.bold) fontPrefixParts.push("800");
+		fontPrefixParts.push(`${fontSizePx}px`);
+		const fontPrefix = fontPrefixParts.join(" ");
+		if (style.eastAsiaFontFamily && !style.letterSpacing && hasCjk(text)) {
+			const eaFallback = resolveFontFamily(style.eastAsiaFontFamily).cssFallback;
+			let segmentedWidth = 0;
+			for (const segment of segmentByScript(text)) {
+				ctx.font = `${fontPrefix} ${segment.isCjk ? eaFallback : cssFallback}`;
+				segmentedWidth += ctx.measureText(segment.text).width;
+			}
+			return segmentedWidth;
+		}
+		ctx.font = `${fontPrefix} ${cssFallback}`;
+		return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
+	};
+}
+/**
+* Render a single line
+*
+* @param block - The paragraph block
+* @param line - The line measurement
+* @param alignment - Text alignment
+* @param doc - Document to create elements in
+* @param options - Additional options for justify calculation
+* @returns The line DOM element
+*/
+function renderLine(block, line, alignment, doc, options) {
+	const lineEl = doc.createElement("div");
+	lineEl.className = PARAGRAPH_CLASS_NAMES.line;
+	lineEl.style.boxSizing = "content-box";
+	lineEl.style.height = `${line.lineHeight}px`;
+	lineEl.style.lineHeight = `${line.lineHeight}px`;
+	const runsForLine = splitTextRunsByEastAsia(sliceRunsForLine(block, line));
+	const onlyRun = runsForLine.length === 1 ? runsForLine[0] : void 0;
+	if (onlyRun && isMathRun(onlyRun) && onlyRun.display === "block" && block.attrs?.alignment !== "right") lineEl.style.textAlign = "center";
+	if (runsForLine.length === 1 && isImageRun(runsForLine[0])) {
+		lineEl.style.display = "flex";
+		lineEl.style.alignItems = "center";
+		const imageAlign = resolveImageLineAlign(runsForLine[0], alignment);
+		if (imageAlign === "center") lineEl.style.justifyContent = "center";
+		else if (imageAlign === "right") lineEl.style.justifyContent = "flex-end";
+	} else if (runsForLine.some((r) => isImageRun(r) && !isFloatingImageRun(r))) {
+		lineEl.style.display = "flex";
+		lineEl.style.alignItems = "baseline";
+		if (alignment === "center") lineEl.style.justifyContent = "center";
+		else if (alignment === "right") lineEl.style.justifyContent = "flex-end";
+		lineEl.style.lineHeight = "normal";
+	}
+	if (runsForLine.length === 0) {
+		const emptySpan = doc.createElement("span");
+		emptySpan.className = `${PARAGRAPH_CLASS_NAMES.run} layout-empty-run`;
+		const trailingRun = block.runs.at(-1);
+		const trailingBreakEnd = line.fromRun > block.runs.length - 1 && trailingRun !== void 0 && isLineBreakRun(trailingRun) ? trailingRun.pmEnd : void 0;
+		const contentStart = trailingBreakEnd ?? (block.pmStart === void 0 ? void 0 : block.pmStart + 1);
+		applyPmPositions(emptySpan, contentStart, trailingBreakEnd !== void 0 ? contentStart : block.pmEnd ?? contentStart);
+		emptySpan.innerHTML = "&nbsp;";
+		lineEl.append(emptySpan);
+		return lineEl;
+	}
+	if (alignment === "justify" && options) {
+		if (!options.isLastLine || options.paragraphEndsWithLineBreak) {
+			lineEl.style.textAlign = "justify";
+			lineEl.style.textAlignLast = "justify";
+			lineEl.style.width = `${options.availableWidth}px`;
+		}
+	}
+	lineEl.style.whiteSpace = "pre";
+	lineEl.style.overflow = "visible";
+	const hasTabRuns = runsForLine.some(isTabRun);
+	let tabContext;
+	const measureText = createTextMeasurer(doc);
+	if (hasTabRuns) {
+		const explicitStops = options?.tabStops?.map(convertTabStopToCalc);
+		const leftIndentTwips = options?.leftIndentPx ? Math.round(options.leftIndentPx * 15) : 0;
+		tabContext = {
+			...explicitStops !== void 0 ? { explicitStops } : {},
+			leftIndent: leftIndentTwips
+		};
+	}
+	let currentX;
+	const leftIndentPx = options?.leftIndentPx ?? 0;
+	if (options?.isFirstLine) {
+		const firstLineIndentPx = options.firstLineIndentPx ?? 0;
+		const markerInlineWidth = getListMarkerInlineWidth(block);
+		currentX = leftIndentPx + firstLineIndentPx + markerInlineWidth;
+	} else currentX = leftIndentPx;
+	for (let i = 0; i < runsForLine.length; i++) {
+		const run = runsForLine[i];
+		if (isTabRun(run) && tabContext) {
+			const followingWidth = measureFollowingContentWidth(runsForLine, i, measureText, options?.context);
+			const decimalIndex = getTextAfterTab(runsForLine, i, options?.context).indexOf(".");
+			const decimalPrefixWidth = decimalIndex !== -1 ? measureDecimalPrefixWidth(runsForLine, i, decimalIndex, measureText, options?.context) : 0;
+			const tabResult = calculateTabWidth(currentX, tabContext, {
+				followingWidth,
+				decimalPrefixWidth
+			});
+			const lineRightEdgeX = options?.lineRightEdgePx;
+			const followingWidthForCheck = followingWidth;
+			let hasFollowingTab = false;
+			for (let j = i + 1; j < runsForLine.length; j++) {
+				const next = runsForLine[j];
+				if (isLineBreakRun(next)) break;
+				if (isTabRun(next)) {
+					hasFollowingTab = true;
+					break;
+				}
+			}
+			if (lineRightEdgeX !== void 0 && tabResult.alignment === "end" && !hasFollowingTab && currentX + tabResult.width + followingWidthForCheck >= lineRightEdgeX - RIGHT_EDGE_EPSILON_PX) {
+				lineEl.style.display = "flex";
+				lineEl.style.alignItems = "baseline";
+				lineEl.style.whiteSpace = "pre";
+				lineEl.style.textIndent = "0";
+				if (alignment === "center") lineEl.style.justifyContent = "center";
+				else if (alignment === "right") lineEl.style.justifyContent = "flex-end";
+				lineEl.dataset["flexLine"] = "true";
+				const tabEl = renderTabRun(run, doc, 0, tabResult.leader);
+				tabEl.style.flex = "1 1 0";
+				tabEl.style.minWidth = "0";
+				tabEl.style.width = "auto";
+				lineEl.append(tabEl);
+				if (options?.isFirstLine && options.firstLineIndentPx !== void 0 && options.firstLineIndentPx !== 0 && lineEl.firstElementChild instanceof HTMLElement) lineEl.firstElementChild.style.marginLeft = `${options.firstLineIndentPx}px`;
+				for (let j = i + 1; j < runsForLine.length; j++) {
+					const next = runsForLine[j];
+					if (isTabRun(next) || isLineBreakRun(next)) break;
+					if (isTextRun(next)) lineEl.append(renderTextRun(next, doc));
+					else if (isFieldRun(next) && options?.context) lineEl.append(renderFieldRun(next, doc, options.context));
+					else if (isImageRun(next)) {
+						if (isFloatingImageRun(next)) continue;
+						const imageKey = getInlineImageRunKey(next);
+						if (!options?.renderedInlineImageKeys?.has(imageKey)) {
+							options?.renderedInlineImageKeys?.add(imageKey);
+							lineEl.append(renderImageRun(next, doc));
+						}
+					} else lineEl.append(renderRun(next, doc, options?.context));
+				}
+				break;
+			}
+			let tabWidth = tabResult.width;
+			if (lineRightEdgeX !== void 0 && currentX + tabWidth + followingWidthForCheck > lineRightEdgeX) tabWidth = Math.max(1, lineRightEdgeX - currentX - followingWidthForCheck);
+			const tabEl = renderTabRun(run, doc, tabWidth, tabResult.leader);
+			lineEl.append(tabEl);
+			currentX += tabWidth;
+		} else if (isTextRun(run)) {
+			const runEl = renderTextRun(run, doc);
+			lineEl.append(runEl);
+			const fontSize = run.fontSize || 11;
+			const fontFamily = run.fontFamily || "Calibri";
+			const measuredWidth = measureText(run.allCaps ? run.text.toLocaleUpperCase() : run.text, fontSize, fontFamily, {
+				...run.bold !== void 0 ? { bold: run.bold } : {},
+				...run.italic !== void 0 ? { italic: run.italic } : {},
+				...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
+				...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {}
+			});
+			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
+			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+		} else if (isImageRun(run)) {
+			if (isFloatingImageRun(run)) continue;
+			const imageKey = getInlineImageRunKey(run);
+			if (options?.renderedInlineImageKeys?.has(imageKey)) continue;
+			options?.renderedInlineImageKeys?.add(imageKey);
+			const runEl = renderImageRun(run, doc);
+			lineEl.append(runEl);
+			if (run.displayMode !== "block" && run.wrapType !== "topAndBottom") currentX += inlineImageBoundingBox(run).width;
+		} else if (isLineBreakRun(run)) {
+			const runEl = renderLineBreakRun(run, doc);
+			lineEl.append(runEl);
+		} else if (isFieldRun(run) && options?.context) {
+			const runEl = renderFieldRun(run, doc, options.context);
+			lineEl.append(runEl);
+			const fieldText = resolveFieldText(run, options.context);
+			const fontSize = run.fontSize || 11;
+			const fontFamily = run.fontFamily || "Calibri";
+			const measuredWidth = measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, fontSize, fontFamily, runMeasureStyle(run));
+			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
+			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+		} else if (isMathRun(run)) {
+			const runEl = renderMathRun(run, doc);
+			lineEl.append(runEl);
+			const measuredWidth = measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run));
+			reserveScaledAdvance(runEl, measuredWidth, run.horizontalScale);
+			currentX += measuredWidth * ((run.horizontalScale ?? 100) / 100);
+		} else {
+			const runEl = renderRun(run, doc, options?.context);
+			lineEl.append(runEl);
+		}
+	}
+	const inFlowRuns = runsForLine.filter((run) => !(isImageRun(run) && isFloatingImageRun(run)));
+	const blankBreakRun = inFlowRuns.length > 0 && inFlowRuns.every(isLineBreakRun) ? inFlowRuns.find(isLineBreakRun) : void 0;
+	if (blankBreakRun?.pmStart !== void 0) {
+		const marker = doc.createElement("span");
+		marker.className = PARAGRAPH_CLASS_NAMES.run;
+		applyPmPositions(marker, blankBreakRun.pmStart, blankBreakRun.pmStart);
+		marker.textContent = "​";
+		lineEl.prepend(marker);
+	}
+	return lineEl;
+}
+/**
+* Check if two individual border definitions are equal (same style, width, color).
+*/
+function bordersEqual(a, b) {
+	if (!a && !b) return true;
+	if (!a || !b) return false;
+	return a.style === b.style && a.width === b.width && a.color === b.color;
+}
+/**
+* Check if two ParagraphBorders form a group (ECMA-376 §17.3.1.24).
+* Adjacent paragraphs with identical border definitions belong to the same group.
+*/
+function bordersFormGroup(a, b) {
+	if (!a && !b) return false;
+	if (!a || !b) return false;
+	return bordersEqual(a.top, b.top) && bordersEqual(a.bottom, b.bottom) && bordersEqual(a.left, b.left) && bordersEqual(a.right, b.right) && bordersEqual(a.between, b.between);
+}
+/**
+* Decide whether a paragraph without an explicit `w:bidi` flag should still be
+* laid out right-to-left. Only paragraphs that carry at least one `w:rtl` run
+* are candidates; among those the base direction follows the first strong
+* directional character (the `dir="auto"` rule), so Hebrew/Arabic-led lines
+* order RTL while an English- (or CJK-/Devanagari-/…) led line stays LTR.
+* eigenpal #723 (#719).
+*/
+function paragraphBaseIsRtl(block) {
+	const runs = block.runs.filter((r) => isTextRun(r) || isFieldRun(r));
+	if (!runs.some((r) => r.rtl)) return false;
+	return detectBaseDirection(runs.map((r) => {
+		if (isTextRun(r)) return r.text;
+		return isFieldRun(r) ? r.fallback ?? "" : "";
+	}).join("")) !== "ltr";
+}
+/**
+* Render a paragraph fragment
+*
+* @param fragment - The fragment to render
+* @param block - The paragraph block
+* @param measure - The paragraph measurement
+* @param context - Rendering context
+* @param options - Rendering options
+* @returns The fragment DOM element
+*/
+function renderParagraphFragment(fragment, block, measure, context, options = {}) {
+	const doc = options.document ?? document;
+	const fragmentEl = doc.createElement("div");
+	fragmentEl.className = PARAGRAPH_CLASS_NAMES.fragment;
+	fragmentEl.style.position = "relative";
+	fragmentEl.dataset["blockId"] = String(fragment.blockId);
+	fragmentEl.dataset["fromLine"] = String(fragment.fromLine);
+	fragmentEl.dataset["toLine"] = String(fragment.toLine);
+	applyPmPositions(fragmentEl, fragment.pmStart, fragment.pmEnd);
+	applySdtDataAttrs(fragmentEl, fragment.sdtGroups);
+	if (fragment.continuesFromPrev) fragmentEl.dataset["continuesFromPrev"] = "true";
+	if (fragment.continuesOnNext) fragmentEl.dataset["continuesOnNext"] = "true";
+	const lines = measure.lines.slice(fragment.fromLine, fragment.toLine);
+	const alignment = block.attrs?.alignment;
+	if (block.attrs?.styleId) fragmentEl.dataset["styleId"] = block.attrs.styleId;
+	const isRtl = block.attrs?.bidi ?? paragraphBaseIsRtl(block);
+	if (isRtl) fragmentEl.dir = "rtl";
+	if (alignment) if (alignment === "center") fragmentEl.style.textAlign = "center";
+	else if (alignment === "right") fragmentEl.style.textAlign = "right";
+	else if (alignment === "left") fragmentEl.style.textAlign = "left";
+	else fragmentEl.style.textAlign = isRtl ? "right" : "left";
+	else if (isRtl) fragmentEl.style.textAlign = "right";
+	const effectiveAlignment = alignment ?? (isRtl ? "right" : void 0);
+	const indent = block.attrs?.indent;
+	let indentLeft = 0;
+	let indentRight = 0;
+	if (indent) if (isRtl) {
+		if (indent.left !== void 0) indentRight = indent.left;
+		if (indent.right !== void 0) indentLeft = indent.right;
+	} else {
+		if (indent.left !== void 0) indentLeft = indent.left;
+		if (indent.right !== void 0) indentRight = indent.right;
+	}
+	const borders = block.attrs?.borders;
+	if (borders) {
+		const borderStyleToCss = (style) => {
+			switch (style) {
+				case "single": return "solid";
+				case "double": return "double";
+				case "dotted": return "dotted";
+				case "dashed": return "dashed";
+				case "thick": return "solid";
+				case "wave": return "wavy";
+				case "dashSmallGap": return "dashed";
+				case "nil":
+				case "none": return "none";
+				default: return "solid";
+			}
+		};
+		fragmentEl.style.boxSizing = "border-box";
+		const borderToCss = (b) => `${b.width}px ${borderStyleToCss(b.style)} ${b.color}`;
+		const groupedWithPrev = bordersFormGroup(options.prevBorders, borders);
+		const groupedWithNext = bordersFormGroup(borders, options.nextBorders);
+		const renderedTopBorder = groupedWithPrev ? borders.between : borders.top;
+		const renderedBottomBorder = !groupedWithNext ? borders.bottom : void 0;
+		const borderBox = doc.createElement("div");
+		borderBox.className = "layout-paragraph-border";
+		borderBox.style.position = "absolute";
+		borderBox.style.pointerEvents = "none";
+		borderBox.style.boxSizing = "border-box";
+		borderBox.style.left = `${indentLeft - (borders.left?.space ?? 0) - (borders.left?.width ?? 0)}px`;
+		borderBox.style.right = `${indentRight - (borders.right?.space ?? 0) - (borders.right?.width ?? 0)}px`;
+		borderBox.style.top = `${-(renderedTopBorder?.space ?? 0) - (renderedTopBorder?.width ?? 0)}px`;
+		borderBox.style.bottom = `${-(renderedBottomBorder?.space ?? 0) - (renderedBottomBorder?.width ?? 0)}px`;
+		if (renderedTopBorder) borderBox.style.borderTop = borderToCss(renderedTopBorder);
+		if (renderedBottomBorder) borderBox.style.borderBottom = borderToCss(renderedBottomBorder);
+		if (borders.left) borderBox.style.borderLeft = borderToCss(borders.left);
+		if (borders.right) borderBox.style.borderRight = borderToCss(borders.right);
+		if (renderedTopBorder || renderedBottomBorder || borders.left || borders.right) {
+			fragmentEl.style.position = "relative";
+			fragmentEl.append(borderBox);
+		}
+		if (borders.bar) {
+			const barEl = doc.createElement("div");
+			barEl.style.position = "absolute";
+			barEl.style.left = "-8px";
+			barEl.style.top = "0";
+			barEl.style.bottom = "0";
+			barEl.style.borderLeft = borderToCss(borders.bar);
+			fragmentEl.style.position = "relative";
+			fragmentEl.append(barEl);
+		}
+	}
+	if (block.attrs?.shading) {
+		fragmentEl.style.backgroundColor = block.attrs.shading;
+		const automaticTextColor = getAutomaticTextColorForBackground(block.attrs.shading);
+		if (automaticTextColor) fragmentEl.style.color = automaticTextColor;
+	}
+	const availableWidth = fragment.width - indentLeft - indentRight;
+	const paragraphEndsWithLineBreak = block.runs.at(-1)?.kind === "lineBreak";
+	const totalLines = measure.lines.length;
+	let firstLineIndentPx = 0;
+	if (indent?.hanging && indent.hanging > 0) firstLineIndentPx = -indent.hanging;
+	else if (indent?.firstLine && indent.firstLine > 0) firstLineIndentPx = indent.firstLine;
+	let _cumulativeLineY = 0;
+	const renderedInlineImageKeys = options.renderedInlineImageKeys ?? /* @__PURE__ */ new Set();
+	for (let i = 0; i < lines.length; i++) {
+		const line = lines[i];
+		const lineIndex = fragment.fromLine + i;
+		const isLastLine = lineIndex === totalLines - 1;
+		const isFirstLine = lineIndex === 0 && !fragment.continuesFromPrev;
+		const lineLeftOffset = line.leftOffset ?? 0;
+		const lineRightOffset = line.rightOffset ?? 0;
+		const lineAvailableWidth = availableWidth;
+		const lineEl = renderLine(block, line, effectiveAlignment, doc, {
+			availableWidth: lineAvailableWidth - lineLeftOffset - lineRightOffset,
+			isLastLine,
+			isFirstLine,
+			paragraphEndsWithLineBreak,
+			...block.attrs?.tabs !== void 0 ? { tabStops: block.attrs.tabs } : {},
+			leftIndentPx: indentLeft,
+			firstLineIndentPx: isFirstLine ? firstLineIndentPx : 0,
+			context,
+			floatingMargins: {
+				leftMargin: lineLeftOffset,
+				rightMargin: lineRightOffset
+			},
+			renderedInlineImageKeys,
+			lineRightEdgePx: fragment.width - indentRight - lineRightOffset
+		});
+		const isFlexLine = lineEl.dataset["flexLine"] === "true";
+		const lineMarginLeft = Math.min(indentLeft, 0) + lineLeftOffset;
+		if (lineMarginLeft !== 0 || lineRightOffset > 0 || indentLeft < 0 || indentRight < 0) {
+			lineEl.style.marginLeft = `${lineMarginLeft}px`;
+			if (lineRightOffset > 0) lineEl.style.marginRight = `${lineRightOffset}px`;
+			const constrainedWidth = lineAvailableWidth - lineLeftOffset - lineRightOffset;
+			if (constrainedWidth > 0) lineEl.style.width = `${constrainedWidth}px`;
+		}
+		_cumulativeLineY += line.lineHeight;
+		if (line.floatSkipBefore !== void 0 && line.floatSkipBefore > 0) {
+			lineEl.style.marginTop = `${line.floatSkipBefore}px`;
+			_cumulativeLineY += line.floatSkipBefore;
+		}
+		const hasHanging = indent?.hanging && indent.hanging > 0;
+		const hasFirstLine = indent?.firstLine && indent.firstLine > 0;
+		if (isFirstLine) {
+			if (indentLeft !== 0 && hasHanging) {
+				lineEl.style.paddingLeft = `${Math.max(indentLeft, 0)}px`;
+				if (!isFlexLine) lineEl.style.textIndent = `-${indent.hanging ?? 0}px`;
+			} else if (indentLeft !== 0 && hasFirstLine) {
+				lineEl.style.paddingLeft = `${Math.max(indentLeft, 0)}px`;
+				if (!isFlexLine) lineEl.style.textIndent = `${indent.firstLine ?? 0}px`;
+			} else if (indentLeft > 0) lineEl.style.paddingLeft = `${indentLeft}px`;
+			else if (hasFirstLine && !isFlexLine) lineEl.style.textIndent = `${indent.firstLine ?? 0}px`;
+		} else if (indentLeft > 0) lineEl.style.paddingLeft = `${indentLeft}px`;
+		else if (hasHanging) lineEl.style.paddingLeft = `${indent.hanging ?? 0}px`;
+		if (indentRight > 0) lineEl.style.paddingRight = `${indentRight}px`;
+		if (isFirstLine && block.attrs?.listMarker && !block.attrs.listMarkerHidden) {
+			const hanging = indent?.hanging ?? 0;
+			const firstLine = indent?.firstLine ?? 0;
+			const markerStart = hanging > 0 ? indentLeft - hanging : indentLeft + firstLine;
+			lineEl.style.paddingLeft = `${Math.max(0, markerStart)}px`;
+			lineEl.style.textIndent = "0";
+			let firstTextRun;
+			if (!block.attrs.listMarkerFontFamily || !block.attrs.listMarkerFontSize) for (let ri = line.fromRun; ri <= line.toRun; ri++) {
+				const r = block.runs[ri];
+				if (r && r.kind === "text") {
+					firstTextRun = r;
+					break;
+				}
+			}
+			const markerFontFamily = block.attrs.listMarkerFontFamily ?? firstTextRun?.fontFamily ?? block.attrs.defaultFontFamily;
+			const markerFontSize = block.attrs.listMarkerFontSize ?? firstTextRun?.fontSize ?? block.attrs.defaultFontSize;
+			const marker = renderListMarker(block.attrs.listMarker, getListMarkerInlineWidth(block), doc, markerFontFamily, markerFontSize, block.attrs.listMarkerRevision, block.attrs.listMarkerSecondSlotOffsetTwips);
+			if (markerStart < 0 && indentLeft > 0) marker.style.marginLeft = `${markerStart}px`;
+			lineEl.prepend(marker);
+		}
+		fragmentEl.append(lineEl);
+	}
+	return fragmentEl;
+}
+/**
+* Render a list marker element as an inline-block at the start of the first
+* body line. `minWidth` (from `getListMarkerInlineWidth`) sizes the marker
+* so the body text aligns at the next tab stop per ECMA-376 §17.9.25 —
+* this honours `w:suff` (`tab` / `space` / `nothing`) and the document's
+* tab grid. Long markers like "1.1.1." therefore grow to the next stop
+* instead of butting against the body text.
+*/
+function renderListMarker(marker, minWidth, doc, fontFamily, fontSize, revision, secondSlotOffsetTwips) {
+	const span = doc.createElement("span");
+	span.className = "layout-list-marker";
+	span.style.display = "inline-block";
+	if (fontFamily) span.style.fontFamily = resolveFontFamily(fontFamily).cssFallback;
+	if (fontSize) span.style.fontSize = `${fontSize * 96 / 72}px`;
+	span.style.textAlign = "left";
+	span.style.textAlignLast = "left";
+	span.style.boxSizing = "border-box";
+	if (minWidth > 0) span.style.minWidth = `${minWidth}px`;
+	if (revision) {
+		const authorIdx = getAuthorColorIdx(revision.author ?? "");
+		const authorColor = AUTHOR_COLORS[authorIdx];
+		span.style.color = authorColor;
+		span.style.textDecorationColor = authorColor;
+		span.dataset["tcAuthorIdx"] = String(authorIdx);
+		if (revision.author) span.dataset["changeAuthor"] = revision.author;
+		if (revision.date) span.dataset["changeDate"] = revision.date;
+		if (revision.revisionId !== void 0) span.dataset["revisionId"] = String(revision.revisionId);
+		const titleParts = [revision.author, revision.date ? new Date(revision.date).toLocaleDateString() : ""].filter(Boolean);
+		if (revision.kind === "ins") {
+			span.classList.add("docx-insertion");
+			span.style.textDecorationLine = "underline";
+			if (titleParts.length > 0) span.title = `Inserted: ${titleParts.join(", ")}`;
+		} else {
+			span.classList.add("docx-deletion");
+			span.style.textDecorationLine = "line-through";
+			if (titleParts.length > 0) span.title = `Deleted: ${titleParts.join(", ")}`;
+		}
+	}
+	const tabIdx = marker.indexOf("	");
+	if (tabIdx !== -1 && secondSlotOffsetTwips !== void 0) {
+		const firstSlot = doc.createElement("span");
+		firstSlot.textContent = marker.slice(0, tabIdx);
+		firstSlot.style.display = "inline-block";
+		const secondSlot = doc.createElement("span");
+		secondSlot.textContent = marker.slice(tabIdx + 1);
+		secondSlot.style.display = "inline-block";
+		span.style.position = "relative";
+		secondSlot.style.position = "absolute";
+		secondSlot.style.left = `${secondSlotOffsetTwips / 15}px`;
+		secondSlot.style.top = "0";
+		span.append(firstSlot, secondSlot);
+		return span;
+	}
+	span.textContent = marker;
+	return span;
+}
+//#endregion
+export { PARAGRAPH_CLASS_NAMES, renderLine, renderParagraphFragment, sliceRunsForLine, splitTextRunsByEastAsia };