@stll/folio-core 0.32.1 → 0.33.0

package/dist/display-list/build/paragraphPrimitives.js

@@ -0,0 +1,819 @@
+import { getListMarkerInlineWidth, getListMarkerVisualOffset, resolveListMarkerFont } from "../../layout-engine/measure/listMarkerWidth.js";
+import { DEFAULT_FONT_FAMILY, buildRunFontStyle, ptToPx } from "../../layout-engine/measure/measureHelpers.js";
+import { getFontMetrics, measureTextWidth } from "../../layout-engine/measure/measureProvider.js";
+import { calculateTabWidth, pixelsToTwips } from "../../layout-engine/measure/tabCalculator.js";
+import { countCompressibleSpaces, toPaintedText } from "../../layout-engine/measure/textMeasurementPolicy.js";
+import { isFloatingImageRun } from "../../layout-engine/types.js";
+import { resolveParagraphBorderHorizontalOutsets } from "../../layout-painter/borderStroke.js";
+import { getAutomaticTextColorForBackground } from "../../layout-painter/documentColors.js";
+import { getLeaderChar, getRenderableTextColor, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap } from "../../layout-painter/renderParagraph.js";
+import { getHorizontalScaleFactor } from "../../utils/horizontalScale.js";
+import { resolvePhysicalParagraphInlineLayout } from "../../utils/paragraphInlineLayout.js";
+import { inlineImageBoundingBox } from "../../utils/rotationBoundingBox.js";
+import { sanitizeExternalUrl } from "../../utils/urlSecurity.js";
+import { HIT_REGION_KINDS } from "../primitives.js";
+import { trackedChangeColor } from "./buildContext.js";
+import { DOC_CANVAS_TEXT, parseDisplayColor } from "./colors.js";
+import { buildGlyphs, glyphRunText } from "./glyphs.js";
+import { paintImage } from "./imagePrimitives.js";
+import { decorationPatternForStyle, resolveBorderStroke } from "./strokes.js";
+import { strikethroughCenterYPx, underlineCenterYPx, underlineThicknessPx } from "./textDecorations.js";
+import { UNSUPPORTED_CONSTRUCT } from "./unsupported.js";
+//#region src/display-list/build/paragraphPrimitives.ts
+/**
+* Paragraph fragments → primitives.
+*
+* This is where the display list earns its keep. The DOM painter never
+* computes a line's start x: it sets `text-align` on the fragment, a
+* `text-indent` on the first line, margins for float offsets, and lets the
+* browser place the glyphs (`renderParagraph.ts:2957` onwards). A PDF has no
+* such engine, so alignment, first-line and hanging indent, list-marker
+* footprint, float offsets and `floatSkipBefore` are all resolved here into one
+* number per line, and justification is resolved into the advances themselves
+* rather than deferred to a backend.
+*
+* Two cursors run side by side. `layoutX` is the measurer's content-area
+* coordinate, which is what tab stops are measured from and what line breaking
+* was decided on; `paintX` is where the glyphs actually land after alignment
+* moved the line. They differ by a constant per line, and conflating them would
+* put a right-aligned line's tabs on the wrong stops.
+*/
+/** Word's default hyperlink colour, applied when the run carries no colour of its own. */
+const HYPERLINK_COLOR = {
+	r: 5,
+	g: 99,
+	b: 193,
+	a: 1
+};
+/** `renderParagraph.ts:603-616`: a raised run paints 0.4em up, a lowered one 0.2em down. */
+const SUPERSCRIPT_RISE_RATIO = .4;
+const SUBSCRIPT_DROP_RATIO = .2;
+/** Matches `RIGHT_EDGE_EPSILON_PX` in the painter and `WIDTH_TOLERANCE` in the measurer. */
+const WIDTH_EPSILON_PX = .5;
+/** `w:pBdr` bar borders hang this far left of the text (`renderParagraph.ts:3072`). */
+const BAR_BORDER_OFFSET_PX = 8;
+const AUTOMATIC_TEXT_COLOR_VALUES = /* @__PURE__ */ new Set(["auto", "windowtext"]);
+/** `w:color w:val="auto"` and its `windowtext` spelling, normalized as the painter normalizes them. */
+const isAutomaticTextColor = (color) => AUTOMATIC_TEXT_COLOR_VALUES.has(color.trim().toLowerCase().replace(/^#/u, ""));
+const isNoteReferenceRun = (run) => run.footnoteRefId !== void 0 || run.endnoteRefId !== void 0;
+/**
+* The colour a run's glyphs are actually painted in.
+*
+* `applyRunStyles` (`renderParagraph.ts:250-258`) sets no inline `color` for a
+* black or `auto` run, on purpose: the editor's `--doc-canvas-text` then adapts
+* to dark mode. A backend with no stylesheet would paint nothing at all, so
+* black is re-materialized here. This is the one place that knows the dropped
+* value was black; drop the fallback and every default-coloured run in the
+* export turns invisible.
+*/
+const resolveRunColor = (run, context) => {
+	const explicit = getRenderableTextColor(run);
+	let color = explicit === void 0 ? void 0 : parseDisplayColor(explicit);
+	const background = run.highlight ?? run.shading;
+	const isTracked = run.isInsertion === true || run.isDeletion === true;
+	const hasComments = run.commentIds !== void 0 && run.commentIds.length > 0;
+	if (background && explicit === void 0 && !isTracked && !hasComments) color = parseDisplayColor(getAutomaticTextColorForBackground(background));
+	if (isTracked) color = trackedChangeColor(context.authorColors, run.changeAuthor, run.isSuggestion);
+	if (run.hyperlink && run.hyperlink.noDefaultStyle !== true) {
+		const direct = run.color?.trim();
+		color = (direct && !isAutomaticTextColor(direct) && run.textColorSource === "direct" ? parseDisplayColor(direct) : void 0) ?? color ?? HYPERLINK_COLOR;
+	}
+	return color ?? DOC_CANVAS_TEXT;
+};
+const runFontStyle = (run) => buildRunFontStyle(run, DEFAULT_FONT_FAMILY, 11);
+/**
+* Field text, resolved without a clock. `evaluateFieldInstruction` needs a
+* `now`, which a pure builder cannot supply, so the cached `w:fldSimple` result
+* Word already wrote wins; only the two pagination fields, whose values the
+* layout itself carries, are recomputed.
+*/
+const resolveFieldText = (run, context) => {
+	if (run.fieldType === "PAGE") return String(context.pageNumber);
+	if (run.fieldType === "NUMPAGES") return String(context.totalPages);
+	return run.fallback ?? "";
+};
+const paintableText = (run, context) => {
+	switch (run.kind) {
+		case "text": return toPaintedText(run.text);
+		case "field": return toPaintedText(resolveFieldText(run, context));
+		case "math": return toPaintedText(run.plainText || "[equation]");
+	}
+};
+const convertTabStop = (stop) => ({
+	val: stop.val,
+	pos: stop.pos,
+	...stop.leader === void 0 ? {} : { leader: stop.leader }
+});
+const horizontalLine = (xPx, widthPx, yPx, stroke) => ({
+	kind: "line",
+	x1Px: xPx,
+	y1Px: yPx,
+	x2Px: xPx + widthPx,
+	y2Px: yPx,
+	stroke
+});
+const 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;
+};
+const bordersFormGroup = (a, b) => Boolean(a) && Boolean(b) && 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);
+/** Paint the paragraph's own background and border box, before any line. */
+const paintParagraphChrome = ({ fragment, block, context, prevBorders, nextBorders }) => {
+	const primitives = [];
+	const { indentLeft, indentRight } = resolvePhysicalParagraphInlineLayout(block);
+	const shading = block.attrs?.shading;
+	if (shading) {
+		const fill = parseDisplayColor(shading);
+		if (fill) primitives.push({
+			kind: "rect",
+			rect: {
+				xPx: fragment.x,
+				yPx: fragment.y,
+				widthPx: fragment.width,
+				heightPx: fragment.height
+			},
+			fill
+		});
+		else context.unsupported.report(UNSUPPORTED_CONSTRUCT.unresolvedColor, context.pageIndex, `paragraph shading ${shading}`);
+	}
+	const borders = block.attrs?.borders;
+	if (!borders) return primitives;
+	const topBorder = bordersFormGroup(prevBorders, borders) ? borders.between : borders.top;
+	const bottomBorder = bordersFormGroup(borders, nextBorders) ? void 0 : borders.bottom;
+	const outsets = resolveParagraphBorderHorizontalOutsets(borders, topBorder !== void 0 || bottomBorder !== void 0);
+	const boxLeft = fragment.x + indentLeft - outsets.left;
+	const boxRight = fragment.x + fragment.width - (indentRight - outsets.right);
+	const boxTop = fragment.y - (topBorder?.space ?? 0) - (topBorder?.width ?? 0);
+	const boxBottom = fragment.y + fragment.height + (bottomBorder?.space ?? 0) + (bottomBorder?.width ?? 0);
+	const push = (border, line) => {
+		if (!border) return;
+		const { stroke, unresolvedColor } = resolveBorderStroke(border);
+		if (unresolvedColor !== void 0) context.unsupported.report(UNSUPPORTED_CONSTRUCT.unresolvedColor, context.pageIndex, `paragraph border colour ${unresolvedColor}`);
+		if (stroke) primitives.push(line(stroke));
+	};
+	push(topBorder, (stroke) => ({
+		kind: "line",
+		x1Px: boxLeft,
+		y1Px: boxTop + stroke.thicknessPx / 2,
+		x2Px: boxRight,
+		y2Px: boxTop + stroke.thicknessPx / 2,
+		stroke
+	}));
+	push(bottomBorder, (stroke) => ({
+		kind: "line",
+		x1Px: boxLeft,
+		y1Px: boxBottom - stroke.thicknessPx / 2,
+		x2Px: boxRight,
+		y2Px: boxBottom - stroke.thicknessPx / 2,
+		stroke
+	}));
+	push(borders.left, (stroke) => ({
+		kind: "line",
+		x1Px: boxLeft + stroke.thicknessPx / 2,
+		y1Px: boxTop,
+		x2Px: boxLeft + stroke.thicknessPx / 2,
+		y2Px: boxBottom,
+		stroke
+	}));
+	push(borders.right, (stroke) => ({
+		kind: "line",
+		x1Px: boxRight - stroke.thicknessPx / 2,
+		y1Px: boxTop,
+		x2Px: boxRight - stroke.thicknessPx / 2,
+		y2Px: boxBottom,
+		stroke
+	}));
+	push(borders.bar, (stroke) => ({
+		kind: "line",
+		x1Px: fragment.x - BAR_BORDER_OFFSET_PX + stroke.thicknessPx / 2,
+		y1Px: fragment.y,
+		x2Px: fragment.x - BAR_BORDER_OFFSET_PX + stroke.thicknessPx / 2,
+		y2Px: fragment.y + fragment.height,
+		stroke
+	}));
+	return primitives;
+};
+const resolveLineGeometry = ({ fragment, line, lineTopYPx, alignment, isRtl, indentLeft, indentRight, firstLineOffsetPx, markerInlineWidthPx, isFirstLine }) => {
+	const leftOffset = line.leftOffset ?? 0;
+	const rightOffset = line.rightOffset ?? 0;
+	const firstLineExtra = isFirstLine ? firstLineOffsetPx + markerInlineWidthPx : 0;
+	const layoutStartXPx = indentLeft + leftOffset + (isRtl ? 0 : firstLineExtra);
+	const layoutRightEdgeXPx = fragment.width - indentRight - rightOffset;
+	const leftEdge = fragment.x + layoutStartXPx;
+	const rightEdge = fragment.x + layoutRightEdgeXPx - (isRtl ? firstLineExtra : 0);
+	let paintStartXPx;
+	switch (alignment) {
+		case "right":
+			paintStartXPx = rightEdge - line.width;
+			break;
+		case "center":
+			paintStartXPx = leftEdge + (rightEdge - leftEdge - line.width) / 2;
+			break;
+		case "left":
+		case "justify":
+			paintStartXPx = isRtl ? rightEdge - line.width : leftEdge;
+			break;
+	}
+	const baselineYPx = lineTopYPx + (line.lineHeight - (line.ascent + line.descent)) / 2 + line.ascent;
+	return {
+		paintStartXPx,
+		layoutStartXPx,
+		layoutRightEdgeXPx,
+		baselineYPx,
+		lineTopYPx
+	};
+};
+/**
+* Resolve `renderParagraph.ts:2404-2437` into one number.
+*
+* The painter has three branches (explicit contraction via `word-spacing`, an
+* explicit expansion for tab-bearing lines, and CSS `text-align: justify` for
+* the rest) that all mean the same thing: spread the difference between the
+* measured line and its capacity across the compressible spaces. A display list
+* has no CSS branch, so all three collapse to the delta.
+*/
+const resolveJustification = ({ line, alignment, availableWidthPx, firstLineOffsetPx, indentLeft, hasVisibleMarker, isFirstLine, isLastLine, paragraphEndsWithLineBreak, shrinkableSpaces }) => {
+	if (alignment !== "justify" || shrinkableSpaces === 0) return { spaceDeltaPx: 0 };
+	const firstLineIndentPx = isFirstLine ? firstLineOffsetPx : 0;
+	const positiveIndentPx = Math.max(0, firstLineIndentPx);
+	const hangingPx = Math.max(0, -firstLineIndentPx);
+	const hangingExpansionPx = hasVisibleMarker ? Math.min(hangingPx, Math.max(0, indentLeft)) : hangingPx;
+	const capacityPx = availableWidthPx - positiveIndentPx + hangingExpansionPx;
+	const overfullPx = line.width - capacityPx;
+	const finalContractionPx = line.justificationPaint?.type === "space-contraction" ? line.justificationPaint.contractionPx : void 0;
+	if (isLastLine && finalContractionPx !== void 0 && finalContractionPx > WIDTH_EPSILON_PX && overfullPx > WIDTH_EPSILON_PX) return { spaceDeltaPx: -(finalContractionPx ?? 0) / shrinkableSpaces };
+	if (!isLastLine || paragraphEndsWithLineBreak) {
+		if (Math.abs(overfullPx) <= WIDTH_EPSILON_PX) return { spaceDeltaPx: 0 };
+		return { spaceDeltaPx: -overfullPx / shrinkableSpaces };
+	}
+	return { spaceDeltaPx: 0 };
+};
+/**
+* The editable-model range a run's glyphs came from, or `undefined` when they
+* have no counterpart there.
+*
+* Every story qualifies, named. A header, footer or note run's positions belong
+* to that story's own document, and a range that said only "start 12" could be
+* used against the body and address unrelated content; one that says which
+* document it came from can be routed into it instead.
+*/
+const modelRangeOf = (run, context) => run.pmStart === void 0 || run.pmEnd === void 0 ? void 0 : {
+	start: run.pmStart,
+	end: run.pmEnd,
+	story: context.story
+};
+/**
+* One `glyphRun` plus everything painted around it: the run's background rect
+* first, then the glyphs, then the decorations whose geometry CSS would have
+* derived from the font.
+*/
+const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx, lineTopYPx, lineHeightPx, isRtl, pmRange, collapsedEdge }) => {
+	if (glyphs.text.length === 0) return;
+	const fontSizePx = ptToPx(style.fontSize ?? 11);
+	const color = resolveRunColor(run, context);
+	let runBaselineYPx = baselineYPx - (run.positionPx ?? 0);
+	if (run.superscript) runBaselineYPx -= fontSizePx * SUPERSCRIPT_RISE_RATIO;
+	else if (run.subscript) runBaselineYPx += fontSizePx * SUBSCRIPT_DROP_RATIO;
+	const background = run.highlight ?? run.shading;
+	if (background && glyphs.widthPx > 0) {
+		const fill = parseDisplayColor(background);
+		if (fill) {
+			const metrics = getFontMetrics(style);
+			sink.backgrounds.push({
+				kind: "rect",
+				rect: {
+					xPx: paintXPx,
+					yPx: runBaselineYPx - metrics.fontBoxAscent,
+					widthPx: glyphs.widthPx,
+					heightPx: metrics.fontBoxAscent + metrics.fontBoxDescent
+				},
+				fill
+			});
+		} else context.unsupported.report(UNSUPPORTED_CONSTRUCT.unresolvedColor, context.pageIndex, `run background ${background}`);
+	}
+	const font = context.fonts.intern({
+		fontFamily: style.fontFamily ?? "Calibri",
+		...style.alternateFontFamily === void 0 ? {} : { alternateFontFamily: style.alternateFontFamily },
+		...style.bold === void 0 ? {} : { bold: style.bold },
+		...style.italic === void 0 ? {} : { italic: style.italic },
+		measureStyle: style
+	});
+	const stroke = run.textOutline ? {
+		color,
+		thicknessPx: 1,
+		pattern: "solid"
+	} : void 0;
+	sink.glyphs.push({
+		kind: "glyphRun",
+		font,
+		fontSizePx,
+		color,
+		xPx: paintXPx,
+		baselineYPx: runBaselineYPx,
+		...glyphRunText(glyphs),
+		direction: isRtl ? "rtl" : "ltr",
+		...stroke === void 0 ? {} : { stroke },
+		...pmRange === void 0 ? {} : { pmRange },
+		...collapsedEdge === void 0 ? {} : { collapsedEdge }
+	});
+	emitDecorations({
+		sink,
+		run,
+		color,
+		context,
+		xPx: paintXPx,
+		widthPx: glyphs.widthPx,
+		baselineYPx: runBaselineYPx,
+		fontSizePx
+	});
+	if (run.hyperlink) {
+		const target = resolveLinkTarget(run.hyperlink.href, context);
+		if (target) context.links.push({
+			rect: {
+				xPx: paintXPx,
+				yPx: lineTopYPx,
+				widthPx: glyphs.widthPx,
+				heightPx: lineHeightPx
+			},
+			target,
+			...run.hyperlink.tooltip === void 0 ? {} : { tooltip: run.hyperlink.tooltip }
+		});
+	}
+	reportRunEffects(run, context);
+};
+const emitDecorations = ({ sink, run, color, context, xPx, widthPx, baselineYPx, fontSizePx }) => {
+	if (widthPx <= 0) return;
+	const thicknessPx = underlineThicknessPx(fontSizePx);
+	const trackedColor = run.isInsertion || run.isDeletion ? trackedChangeColor(context.authorColors, run.changeAuthor, run.isSuggestion) : void 0;
+	if (Boolean(run.underline) && !isNoteReferenceRun(run) || run.isInsertion) {
+		const authored = typeof run.underline === "object" ? run.underline : void 0;
+		const authoredColor = authored?.color === void 0 ? void 0 : parseDisplayColor(authored.color);
+		const pattern = run.isSuggestion ? "dotted" : decorationPatternForStyle(authored?.style);
+		sink.decorations.push(horizontalLine(xPx, widthPx, underlineCenterYPx(baselineYPx, fontSizePx), {
+			color: trackedColor ?? authoredColor ?? color,
+			thicknessPx,
+			pattern
+		}));
+	}
+	if (run.strike || run.isDeletion) sink.decorations.push(horizontalLine(xPx, widthPx, strikethroughCenterYPx(baselineYPx, fontSizePx), {
+		color: trackedColor ?? color,
+		thicknessPx,
+		pattern: run.isSuggestion ? "dotted" : "solid"
+	}));
+};
+/**
+* Run-level typography the display list cannot express. The glyphs and their
+* advances are still correct; only the treatment is missing, so this reports
+* rather than skips.
+*/
+const reportRunEffects = (run, context) => {
+	const { unsupported, pageIndex } = context;
+	if (run.smallCaps) unsupported.report(UNSUPPORTED_CONSTRUCT.smallCaps, pageIndex, "w:smallCaps is carried on the run and painted by the DOM backend; the PDF backend paints full-size glyphs for it");
+	if (getHorizontalScaleFactor(run.horizontalScale) !== 1) unsupported.report(UNSUPPORTED_CONSTRUCT.horizontalScale, pageIndex, `w:w ${String(run.horizontalScale)}% is carried on the run and painted by the DOM backend; the PDF backend paints unnarrowed glyphs at the measured advances`);
+	if (run.textEffect) unsupported.report(UNSUPPORTED_CONSTRUCT.textEffect, pageIndex, `w:effect ${run.textEffect}`);
+	if (run.emphasisMark) unsupported.report(UNSUPPORTED_CONSTRUCT.emphasisMark, pageIndex, `w:em ${run.emphasisMark}`);
+	if (run.emboss || run.imprint || run.textShadow) unsupported.report(UNSUPPORTED_CONSTRUCT.textShadowEffect, pageIndex, "w:emboss / w:imprint / w:shadow paint as plain glyphs");
+};
+const resolveLinkTarget = (href, context) => {
+	if (href.startsWith("#")) return context.bookmarkTargets.get(href.slice(1));
+	const safe = sanitizeExternalUrl(href);
+	return safe === void 0 ? void 0 : {
+		kind: "external",
+		href: safe
+	};
+};
+const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLine, isLastLine, paragraphEndsWithLineBreak, availableWidthPx, indentLeft, firstLineOffsetPx, markerInlineWidthPx }) => {
+	const sink = {
+		backgrounds: [],
+		glyphs: [],
+		decorations: []
+	};
+	const tabRegions = [];
+	const { runs, collapsedLeadingRuns, collapsedTrailingRuns } = splitCollapsibleLineEdgeSpaces(splitTextRunsByEastAsia(sliceRunsForLine(block, line)), startsAfterSoftWrap(block, line));
+	const isCollapsedEdgeRun = (run) => collapsedLeadingRuns.has(run) || collapsedTrailingRuns.has(run);
+	/**
+	* What a collapsed line-edge run is worth to a caret.
+	*
+	* The run paints at no width, so there is nothing for a caret to step over
+	* and an editing surface steps by this instead: one space in the run's own
+	* style, which is what the painter measured for the same purpose.
+	*/
+	const collapsedEdgeOf = (run, style, leading) => isCollapsedEdgeRun(run) ? {
+		side: leading.has(run) ? "leading" : "trailing",
+		spaceAdvancePx: measureTextWidth(" ", style)
+	} : void 0;
+	const hasVisibleMarker = Boolean(block.attrs?.listMarker) && block.attrs?.listMarkerHidden !== true;
+	let shrinkableSpaces = 0;
+	for (const run of runs) if (run.kind === "text") {
+		if (!isCollapsedEdgeRun(run)) shrinkableSpaces += countCompressibleSpaces(run.text);
+	} else if (run.kind === "field") shrinkableSpaces += countCompressibleSpaces(resolveFieldText(run, context));
+	const { spaceDeltaPx } = resolveJustification({
+		line,
+		alignment,
+		availableWidthPx,
+		firstLineOffsetPx,
+		indentLeft,
+		hasVisibleMarker: hasVisibleMarker && isFirstLine,
+		isFirstLine,
+		isLastLine,
+		paragraphEndsWithLineBreak,
+		shrinkableSpaces
+	});
+	if (isFirstLine && hasVisibleMarker) paintListMarker({
+		sink,
+		block,
+		context,
+		paintXPx: geometry.paintStartXPx - markerInlineWidthPx + getListMarkerVisualOffset(block),
+		baselineYPx: geometry.baselineYPx,
+		isRtl
+	});
+	let layoutXPx = geometry.layoutStartXPx;
+	const alignShiftPx = geometry.paintStartXPx - geometry.layoutStartXPx;
+	const paintXOf = () => layoutXPx + alignShiftPx;
+	const tabContext = {
+		...block.attrs?.tabs === void 0 ? {} : { explicitStops: block.attrs.tabs.map(convertTabStop) },
+		...block.attrs?.defaultTabStopTwips === void 0 ? {} : { defaultTabInterval: block.attrs.defaultTabStopTwips },
+		leftIndent: pixelsToTwips(block.attrs?.indent?.left ?? 0)
+	};
+	for (let index = 0; index < runs.length; index += 1) {
+		const run = runs[index];
+		switch (run.kind) {
+			case "text": {
+				if (run.hidden) {
+					context.unsupported.report(UNSUPPORTED_CONSTRUCT.hiddenRun, context.pageIndex, "w:vanish text is suppressed, as Word's print view suppresses it");
+					break;
+				}
+				const style = runFontStyle(run);
+				const glyphs = buildGlyphs({
+					text: toPaintedText(run.text),
+					style,
+					allCaps: run.allCaps === true,
+					spaceDeltaPx,
+					collapsed: isCollapsedEdgeRun(run)
+				});
+				const pmRange = modelRangeOf(run, context);
+				const collapsedEdge = collapsedEdgeOf(run, style, collapsedLeadingRuns);
+				emitGlyphRun({
+					sink,
+					context,
+					run,
+					glyphs,
+					style,
+					paintXPx: paintXOf(),
+					baselineYPx: geometry.baselineYPx,
+					lineTopYPx: geometry.lineTopYPx,
+					lineHeightPx: line.lineHeight,
+					isRtl,
+					...pmRange === void 0 ? {} : { pmRange },
+					...collapsedEdge === void 0 ? {} : { collapsedEdge }
+				});
+				layoutXPx += glyphs.widthPx;
+				break;
+			}
+			case "field": {
+				const style = runFontStyle(run);
+				const glyphs = buildGlyphs({
+					text: paintableText(run, context),
+					style,
+					allCaps: run.allCaps === true,
+					spaceDeltaPx,
+					collapsed: false
+				});
+				emitGlyphRun({
+					sink,
+					context,
+					run: {
+						...run,
+						kind: "text",
+						text: glyphs.text
+					},
+					glyphs,
+					style,
+					paintXPx: paintXOf(),
+					baselineYPx: geometry.baselineYPx,
+					lineTopYPx: geometry.lineTopYPx,
+					lineHeightPx: line.lineHeight,
+					isRtl
+				});
+				layoutXPx += glyphs.widthPx;
+				break;
+			}
+			case "math": {
+				const style = runFontStyle(run);
+				const glyphs = buildGlyphs({
+					text: paintableText(run, context),
+					style,
+					allCaps: false,
+					spaceDeltaPx: 0,
+					collapsed: false
+				});
+				emitGlyphRun({
+					sink,
+					context,
+					run: {
+						...run,
+						kind: "text",
+						text: glyphs.text
+					},
+					glyphs,
+					style,
+					paintXPx: paintXOf(),
+					baselineYPx: geometry.baselineYPx,
+					lineTopYPx: geometry.lineTopYPx,
+					lineHeightPx: line.lineHeight,
+					isRtl
+				});
+				context.unsupported.report(UNSUPPORTED_CONSTRUCT.mathRun, context.pageIndex, "OMML painted as renderMathFallback's plain text, not as typeset math");
+				layoutXPx += glyphs.widthPx;
+				break;
+			}
+			case "tab": {
+				const widthPx = paintTab({
+					sink,
+					context,
+					runs,
+					index,
+					run,
+					tabContext,
+					layoutXPx,
+					paintXPx: paintXOf(),
+					baselineYPx: geometry.baselineYPx,
+					layoutRightEdgeXPx: geometry.layoutRightEdgeXPx
+				});
+				tabRegions.push({
+					kind: HIT_REGION_KINDS.tab,
+					rect: {
+						xPx: paintXOf(),
+						yPx: geometry.lineTopYPx,
+						widthPx,
+						heightPx: line.lineHeight
+					},
+					model: {
+						blockId: String(block.id),
+						...run.pmStart === void 0 || run.pmEnd === void 0 ? {} : { pmRange: {
+							start: run.pmStart,
+							end: run.pmEnd,
+							story: context.story
+						} }
+					}
+				});
+				layoutXPx += widthPx;
+				break;
+			}
+			case "image": {
+				if (isFloatingImageRun(run)) break;
+				const boundingBox = inlineImageBoundingBox(run);
+				const primitives = paintImage({
+					source: run,
+					rect: {
+						xPx: paintXOf(),
+						yPx: geometry.baselineYPx - boundingBox.height,
+						widthPx: boundingBox.width,
+						heightPx: boundingBox.height
+					},
+					context,
+					label: "inline image"
+				});
+				sink.glyphs.push(...primitives);
+				if (run.displayMode !== "block" && run.wrapType !== "topAndBottom") layoutXPx += boundingBox.width;
+				break;
+			}
+			case "lineBreak":
+			case "renderedPageBreak": break;
+		}
+	}
+	return {
+		primitives: [
+			...sink.backgrounds,
+			...sink.glyphs,
+			...sink.decorations
+		],
+		tabRegions
+	};
+};
+const paintListMarker = ({ sink, block, context, paintXPx, baselineYPx, isRtl }) => {
+	const marker = block.attrs?.listMarker;
+	if (marker === void 0 || marker.length === 0) return;
+	const formatting = resolveListMarkerFont(block);
+	const style = formatting;
+	const glyphs = buildGlyphs({
+		text: toPaintedText(marker.replaceAll("	", " ")),
+		style,
+		allCaps: false,
+		spaceDeltaPx: 0,
+		collapsed: false
+	});
+	const revision = block.attrs?.listMarkerRevision;
+	const color = revision ? trackedChangeColor(context.authorColors, revision.author, void 0) : DOC_CANVAS_TEXT;
+	const font = context.fonts.intern({
+		fontFamily: formatting.fontFamily,
+		...formatting.alternateFontFamily === void 0 ? {} : { alternateFontFamily: formatting.alternateFontFamily },
+		...formatting.bold === void 0 ? {} : { bold: formatting.bold },
+		...formatting.italic === void 0 ? {} : { italic: formatting.italic },
+		measureStyle: style
+	});
+	const fontSizePx = ptToPx(formatting.fontSize);
+	sink.glyphs.push({
+		kind: "glyphRun",
+		font,
+		fontSizePx,
+		color,
+		xPx: paintXPx,
+		baselineYPx,
+		...glyphRunText(glyphs),
+		direction: formatting.rtl ?? isRtl ? "rtl" : "ltr"
+	});
+	if (revision) {
+		const stroke = {
+			color,
+			thicknessPx: underlineThicknessPx(fontSizePx),
+			pattern: "solid"
+		};
+		sink.decorations.push(revision.kind === "ins" ? horizontalLine(paintXPx, glyphs.widthPx, underlineCenterYPx(baselineYPx, fontSizePx), stroke) : horizontalLine(paintXPx, glyphs.widthPx, strikethroughCenterYPx(baselineYPx, fontSizePx), stroke));
+	}
+};
+/**
+* A tab's advance, plus its leader glyphs when the stop sets one.
+*
+* The end-aligned clamp mirrors `measureParagraph.ts:1795-1802` rather than the
+* painter's flex "right anchor": both put the trailing content flush against
+* the line's right edge, but the measurer's version is the one the line width
+* was decided on, and in an explicit-x world it is just arithmetic.
+*/
+const paintTab = ({ sink, context, runs, index, run, tabContext, layoutXPx, paintXPx, baselineYPx, layoutRightEdgeXPx }) => {
+	let followingWidthPx = 0;
+	let followingText = "";
+	for (let next = index + 1; next < runs.length; next += 1) {
+		const following = runs[next];
+		if (following.kind === "tab" || following.kind === "lineBreak") break;
+		if (following.kind === "text" || following.kind === "field" || following.kind === "math") {
+			const text = paintableText(following, context);
+			followingText += text;
+			followingWidthPx += measureTextWidth(following.kind === "text" && following.allCaps ? text.toLocaleUpperCase() : text, runFontStyle(following));
+		} else if (following.kind === "image" && !isFloatingImageRun(following)) followingWidthPx += inlineImageBoundingBox(following).width;
+	}
+	const decimalIndex = followingText.indexOf(".");
+	const decimalPrefixWidthPx = decimalIndex === -1 ? 0 : measureDecimalPrefixWidth(runs, index, decimalIndex, context);
+	const result = calculateTabWidth(layoutXPx, tabContext, {
+		followingWidth: followingWidthPx,
+		...decimalPrefixWidthPx > 0 ? { decimalPrefixWidth: decimalPrefixWidthPx } : {}
+	});
+	let widthPx = result.width;
+	if (result.alignment === "end" && layoutXPx + widthPx + followingWidthPx > layoutRightEdgeXPx + WIDTH_EPSILON_PX) widthPx = Math.max(1, layoutRightEdgeXPx - layoutXPx - followingWidthPx);
+	const leaderChar = result.leader === void 0 ? null : getLeaderChar(result.leader);
+	if (leaderChar !== null && widthPx > 0) {
+		const style = runFontStyle(run);
+		const unitWidthPx = measureTextWidth(leaderChar, style);
+		if (unitWidthPx > 0) {
+			const count = Math.floor(widthPx / unitWidthPx);
+			if (count > 0) {
+				const glyphs = buildGlyphs({
+					text: leaderChar.repeat(count),
+					style,
+					allCaps: false,
+					spaceDeltaPx: 0,
+					collapsed: false
+				});
+				const font = context.fonts.intern({
+					fontFamily: style.fontFamily ?? "Calibri",
+					...style.bold === void 0 ? {} : { bold: style.bold },
+					...style.italic === void 0 ? {} : { italic: style.italic },
+					measureStyle: style
+				});
+				const clip = {
+					xPx: paintXPx,
+					yPx: baselineYPx - ptToPx(style.fontSize ?? 11),
+					widthPx,
+					heightPx: ptToPx(style.fontSize ?? 11) * 2
+				};
+				sink.glyphs.push({
+					kind: "clipGroup",
+					rect: clip,
+					regions: [],
+					children: [{
+						kind: "glyphRun",
+						font,
+						fontSizePx: ptToPx(style.fontSize ?? 11),
+						color: run.color === void 0 ? DOC_CANVAS_TEXT : parseDisplayColor(run.color) ?? DOC_CANVAS_TEXT,
+						xPx: paintXPx,
+						baselineYPx,
+						...glyphRunText(glyphs),
+						direction: "ltr"
+					}]
+				});
+			}
+		}
+	}
+	return widthPx;
+};
+const measureDecimalPrefixWidth = (runs, tabIndex, decimalIndex, context) => {
+	let width = 0;
+	let consumed = 0;
+	for (let index = tabIndex + 1; index < runs.length && consumed < decimalIndex; index += 1) {
+		const run = runs[index];
+		if (run.kind === "tab" || run.kind === "lineBreak") break;
+		if (run.kind !== "text" && run.kind !== "field" && run.kind !== "math") continue;
+		const text = paintableText(run, context);
+		const take = Math.min(text.length, decimalIndex - consumed);
+		if (take > 0) width += measureTextWidth(text.slice(0, take), runFontStyle(run));
+		consumed += text.length;
+	}
+	return width;
+};
+/** Every primitive a paragraph fragment paints, back to front. */
+const paintParagraphFragment = (options) => {
+	const { fragment, block, measure, context, composer } = options;
+	composer.push(paintParagraphChrome(options));
+	const { alignment, indentLeft, indentRight, isRtl } = resolvePhysicalParagraphInlineLayout(block);
+	const indent = block.attrs?.indent;
+	const firstLineOffsetPx = (indent?.firstLine ?? 0) - (indent?.hanging ?? 0);
+	const markerInlineWidthPx = getListMarkerInlineWidth(block);
+	const paragraphEndsWithLineBreak = block.runs.at(-1)?.kind === "lineBreak";
+	const totalLines = measure.lines.length;
+	if (isRtl) context.unsupported.report(UNSUPPORTED_CONSTRUCT.bidiReordering, context.pageIndex, "runs of an RTL paragraph are placed in logical order; the builder runs no bidi algorithm");
+	let cursorYPx = fragment.y;
+	for (let offset = 0; offset < fragment.toLine - fragment.fromLine; offset += 1) {
+		const lineIndex = fragment.fromLine + offset;
+		const line = measure.lines[lineIndex];
+		if (!line) continue;
+		cursorYPx += line.floatSkipBefore ?? 0;
+		const isFirstLine = lineIndex === 0 && fragment.continuesFromPrev !== true;
+		const geometry = resolveLineGeometry({
+			fragment,
+			line,
+			lineTopYPx: cursorYPx,
+			alignment,
+			isRtl,
+			indentLeft,
+			indentRight,
+			firstLineOffsetPx,
+			markerInlineWidthPx,
+			isFirstLine
+		});
+		const lineRuns = sliceRunsForLine(block, line);
+		composer.region({
+			kind: lineRegionKind(lineRuns),
+			rect: {
+				xPx: fragment.x,
+				yPx: geometry.lineTopYPx,
+				widthPx: fragment.width,
+				heightPx: line.lineHeight
+			},
+			model: lineModel({
+				block,
+				line,
+				runs: lineRuns,
+				context
+			})
+		}, () => {
+			const painted = paintLine({
+				block,
+				line,
+				geometry,
+				context,
+				alignment,
+				isRtl,
+				isFirstLine,
+				isLastLine: lineIndex === totalLines - 1,
+				paragraphEndsWithLineBreak,
+				availableWidthPx: fragment.width - indentLeft - indentRight - (line.leftOffset ?? 0) - (line.rightOffset ?? 0),
+				indentLeft,
+				firstLineOffsetPx,
+				markerInlineWidthPx
+			});
+			composer.push(painted.primitives);
+			for (const tab of painted.tabRegions) composer.region(tab, () => void 0);
+		});
+		cursorYPx += line.lineHeight;
+	}
+};
+/**
+* A line with no text of its own is where a caret lands in an empty paragraph,
+* and the surface has always needed to tell the two apart: one has characters
+* to put the caret between, the other has only a position.
+*/
+const lineRegionKind = (runs) => runs.some((run) => run.kind === "text" && run.text.length > 0 || run.kind === "field" || run.kind === "math" || run.kind === "image" || run.kind === "tab") ? HIT_REGION_KINDS.line : HIT_REGION_KINDS.emptyRun;
+const lineModel = ({ block, line, runs, context }) => {
+	const positions = runs.flatMap((run) => run.kind === "text" && run.pmStart !== void 0 && run.pmEnd !== void 0 ? [{
+		start: run.pmStart,
+		end: run.pmEnd
+	}] : []);
+	const commentIds = [...new Set(runs.flatMap((run) => run.kind === "text" ? run.commentIds ?? [] : []))];
+	const trailingRun = block.runs.at(-1);
+	const trailingBreakEnd = runs.length === 0 && line.fromRun > block.runs.length - 1 && trailingRun?.kind === "lineBreak" ? trailingRun.pmEnd : void 0;
+	const emptyStart = trailingBreakEnd ?? (block.pmStart === void 0 ? void 0 : block.pmStart + 1);
+	const start = positions.at(0)?.start ?? emptyStart;
+	const end = positions.at(-1)?.end ?? (trailingBreakEnd === void 0 ? block.pmEnd ?? emptyStart : trailingBreakEnd);
+	return {
+		blockId: String(block.id),
+		...start === void 0 || end === void 0 ? {} : { pmRange: {
+			start,
+			end,
+			story: context.story
+		} },
+		...commentIds.length === 0 ? {} : { commentIds }
+	};
+};
+//#endregion
+export { paintParagraphFragment };