@stll/folio-core 0.61.0 → 0.63.0

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

@@ -31,7 +31,11 @@ const paintHeaderFooter = ({ composer, page, section, content, distancePx, conte
 			page,
 			context: {
 				...context,
-				story
+				story,
+				inlinePictureViewport: {
+					left: 0,
+					right: page.size.w
+				}
 			},
 			label: content.rId === void 0 ? section : `${section} ${content.rId}`
 		});

package/dist/display-list/build/imagePrimitives.d.ts

@@ -6,7 +6,7 @@ import { BuildContext } from "./buildContext.js";
  * Sources interned in first-use order, so two builds of one layout produce the
  * same `DisplayImageRef` for the same picture.
  */
-declare class ImageTable {
+export declare class ImageTable {
   private readonly sources;
   private readonly refBySrc;
   private readonly failureBySrc;
@@ -16,7 +16,7 @@ declare class ImageTable {
   snapshot(): readonly DisplayImageSource[];
 }
 type ImageVisualSource = Pick<ImageBlock, "src" | "preview" | "opacity" | "brightness" | "contrast" | "cropTop" | "cropRight" | "cropBottom" | "cropLeft" | "borderWidth" | "borderColor" | "borderStyle" | "transform">;
-type PaintImageOptions = {
+export type PaintImageOptions = {
   readonly source: ImageVisualSource;
   readonly rect: DisplayRect;
   readonly context: BuildContext;
@@ -28,8 +28,8 @@ type PaintImageOptions = {
  * and/or washed as the source asks) followed by its border. Empty when the
  * bytes are unusable, with the reason already reported.
  */
-declare const paintImage: ({ source, rect, context, label }: PaintImageOptions) => readonly DisplayPrimitive[];
+export declare const paintImage: ({ source, rect, context, label }: PaintImageOptions) => readonly DisplayPrimitive[];
 /** An anchored or block image fragment placed by the layout engine. */
-declare const paintImageFragment: (fragment: ImageFragment, block: ImageBlock, context: BuildContext) => readonly DisplayPrimitive[];
+export declare const paintImageFragment: (fragment: ImageFragment, block: ImageBlock, context: BuildContext) => readonly DisplayPrimitive[];
 //#endregion
-export { ImageTable, PaintImageOptions, paintImage, paintImageFragment };
+export {};

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

@@ -1,22 +1,12 @@
 import { parseRotationDegrees } from "../../utils/rotationBoundingBox.js";
 import { sanitizeImageSrc } from "../../utils/sanitizeImageSrc.js";
-import { base64ToBytes } from "../../utils/textEncoding.js";
+import { base64ToBytes, encodeUtf8 } from "../../utils/textEncoding.js";
 import { paintPreview } from "./previewPrimitives.js";
 import { resolveBorderStroke } from "./strokes.js";
 import { UNSUPPORTED_CONSTRUCT } from "./unsupported.js";
 import { Result } from "better-result";
 //#region src/display-list/build/imagePrimitives.ts
-/**
-* Images: the source table, and the primitives an image draws.
-*
-* The display list carries raw bytes plus the format they are already in, so a
-* backend never owns a codec. This module therefore decodes only far enough to
-* fill `pixelWidth`/`pixelHeight` and to know PNG from JPEG. It transcodes
-* nothing: a WMF, EMF, TIFF, SVG, GIF or BMP source is reported through
-* `unsupported` and paints nothing, because a silently missing picture is worse
-* than a named one.
-*/
-const DATA_URL_PATTERN = /^data:([^;,]*)(;base64)?,(.*)$/su;
+const DATA_URL_PATTERN = /^data:([^;,]*)(?:;charset=[^;,]*)?(;base64)?,(.*)$/su;
 /**
 * `undefined` for a payload `atob` rejects: a malformed `data:` URL is a
 * document the builder reports, not an exception that aborts the build.
@@ -161,7 +151,26 @@ var ImageTable = class {
 		if (safeSrc === void 0) return fail("image source is not a data: or blob: URL");
 		const match = DATA_URL_PATTERN.exec(safeSrc);
 		if (!match) return fail("image bytes are not inline (blob: URLs need a fetch the builder cannot do)");
-		if (match[2] === void 0) return fail("only base64 data: URLs carry decodable bytes");
+		if (match[1] === "image/svg+xml" && match[2] === void 0) {
+			const decoded = Result.try(() => decodeURIComponent(match[3]));
+			if (decoded.isErr()) return fail("SVG data: URL payload is not valid percent-encoding");
+			if (!decoded.value.includes("data-folio-preview=\"wpGroup\"")) return fail("SVG is not a supported generated group preview");
+			const width = /<svg\b[^>]*\bwidth="([0-9.]+)"/u.exec(decoded.value)?.at(1);
+			const height = /<svg\b[^>]*\bheight="([0-9.]+)"/u.exec(decoded.value)?.at(1);
+			const pixelWidth = width === void 0 ? 0 : Number(width);
+			const pixelHeight = height === void 0 ? 0 : Number(height);
+			if (!(pixelWidth > 0 && pixelHeight > 0)) return fail("SVG carries no positive numeric width and height");
+			const ref = this.sources.length;
+			this.sources.push({
+				format: "svg",
+				bytes: encodeUtf8(decoded.value),
+				pixelWidth,
+				pixelHeight
+			});
+			this.refBySrc.set(src, ref);
+			return ref;
+		}
+		if (match[2] === void 0) return fail("only base64 data: URLs and SVG previews carry decodable bytes");
 		const bytes = decodeBase64(match[3]);
 		if (bytes === void 0) return fail("image data: URL payload is not valid base64");
 		if (bytes.length === 0) return fail("image data: URL decoded to no bytes");

package/dist/display-list/build/pageBorderPrimitives.d.ts

@@ -5,8 +5,8 @@ import { DisplayPrimitive } from "../types.js";
 import { BuildContext } from "./buildContext.js";
 //#region src/display-list/build/pageBorderPrimitives.d.ts
 /** The section's `w:pgBorders`, as the painter already receives them. */
-type PageBorders = NonNullable<RenderPageOptions["pageBorders"]>;
-type PageBorderPaintOptions = {
+export type PageBorders = NonNullable<RenderPageOptions["pageBorders"]>;
+export type PageBorderPaintOptions = {
   readonly page: Page;
   readonly borders: PageBorders;
   readonly theme?: document_d_exports.Theme | null;
@@ -18,6 +18,5 @@ type PageBorderPaintOptions = {
  * from the paper edge, `text` insets the margin less `w:space` and the stroke
  * itself, so the authored gap between text and border survives a thick rule.
  */
-declare const paintPageBorders: ({ page, borders, theme, context }: PageBorderPaintOptions) => readonly DisplayPrimitive[];
-//#endregion
-export { PageBorderPaintOptions, PageBorders, paintPageBorders };
+export declare const paintPageBorders: ({ page, borders, theme, context }: PageBorderPaintOptions) => readonly DisplayPrimitive[];
+//#endregion

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

@@ -93,17 +93,14 @@ const paintPageBorders = ({ page, borders, theme, context }) => {
 					stroke
 				});
 				break;
-			case "right":
-				primitives.push({
-					kind: "line",
-					x1Px: rightPx - half,
-					y1Px: topPx,
-					x2Px: rightPx - half,
-					y2Px: bottomPx,
-					stroke
-				});
-				break;
-			default:
+			case "right": primitives.push({
+				kind: "line",
+				x1Px: rightPx - half,
+				y1Px: topPx,
+				x2Px: rightPx - half,
+				y2Px: bottomPx,
+				stroke
+			});
 		}
 	}
 	return primitives;

package/dist/display-list/build/pageFurniture.d.ts

@@ -3,21 +3,21 @@ import { DisplayColor, DisplayPrimitive } from "../types.js";
 import { BuildContext } from "./buildContext.js";
 import { PageComposer } from "./regions.js";
 //#region src/display-list/build/pageFurniture.d.ts
-declare const paintPageBackground: (page: Page, fill: DisplayColor) => DisplayPrimitive;
+export declare const paintPageBackground: (page: Page, fill: DisplayColor) => DisplayPrimitive;
 /**
  * Vertical rules between newspaper columns. The painter assumes equal columns
  * with a uniform gap (it ignores `columns.widths` / `columns.gaps`), and so
  * does this: diverging here would put the export's rules somewhere the editor
  * never drew them.
  */
-declare const paintColumnSeparators: (page: Page) => readonly DisplayPrimitive[];
+export declare const paintColumnSeparators: (page: Page) => readonly DisplayPrimitive[];
 /**
  * The separator rules of a note area laid out in the body flow (endnotes): the
  * paginator records where each `w:separator` / `w:continuationSeparator` mark
  * landed, so like the column rules they are derivable from the `Layout` alone.
  */
-declare const paintFlowedNoteSeparators: (page: Page) => readonly DisplayPrimitive[];
-type FootnoteAreaPaintOptions = {
+export declare const paintFlowedNoteSeparators: (page: Page) => readonly DisplayPrimitive[];
+export type FootnoteAreaPaintOptions = {
   readonly composer: PageComposer;
   readonly page: Page;
   readonly context: BuildContext;
@@ -36,6 +36,5 @@ type FootnoteAreaPaintOptions = {
  * what the bodies actually need, so a stack that under-reserved by a pixel ends
  * at the page bottom instead of spilling past it.
  */
-declare const paintFootnoteArea: ({ composer, page, context, contentById }: FootnoteAreaPaintOptions) => void;
-//#endregion
-export { FootnoteAreaPaintOptions, paintColumnSeparators, paintFlowedNoteSeparators, paintFootnoteArea, paintPageBackground };
+export declare const paintFootnoteArea: ({ composer, page, context, contentById }: FootnoteAreaPaintOptions) => void;
+//#endregion

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

@@ -143,7 +143,11 @@ const paintFootnoteArea = ({ composer, page, context, contentById }) => {
 				widthPx: contentWidthPx,
 				context: {
 					...context,
-					story
+					story,
+					inlinePictureViewport: {
+						left: page.margins.left,
+						right: page.size.w - page.margins.right
+					}
 				},
 				label: `footnote ${content.displayNumber}`
 			});

package/dist/display-list/build/paragraphPrimitives.d.ts

@@ -1,19 +1,20 @@
 import { ParagraphBlock, ParagraphBorders, ParagraphFragment, ParagraphMeasure } from "../../layout-engine/types.js";
+import { HorizontalClipViewport } from "../../utils/paragraphInlineLayout.js";
 import { BuildContext } from "./buildContext.js";
 import { PageComposer } from "./regions.js";
 //#region src/display-list/build/paragraphPrimitives.d.ts
-type ParagraphPaintOptions = {
+export type ParagraphPaintOptions = {
   /** Where the primitives and the regions over them are collected. */
   readonly composer: PageComposer;
   readonly fragment: ParagraphFragment;
   readonly block: ParagraphBlock;
   readonly measure: ParagraphMeasure;
   readonly context: BuildContext;
+  readonly inlinePictureViewport?: HorizontalClipViewport;
   /** Borders of the adjacent paragraphs, for ECMA-376 §17.3.1.24 border grouping. */
   readonly prevBorders?: ParagraphBorders;
   readonly nextBorders?: ParagraphBorders;
 };
 /** Every primitive a paragraph fragment paints, back to front. */
-declare const paintParagraphFragment: (options: ParagraphPaintOptions) => void;
-//#endregion
-export { ParagraphPaintOptions, paintParagraphFragment };
+export declare const paintParagraphFragment: (options: ParagraphPaintOptions) => void;
+//#endregion

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

@@ -1,3 +1,4 @@
+import { automaticRunGap } from "../../layout-engine/measure/automaticTextSpacing.js";
 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";
@@ -9,8 +10,10 @@ import { resolveParagraphBorderHorizontalOutsets } from "../../layout-painter/bo
 import { getAutomaticTextColorForBackground } from "../../layout-painter/documentColors.js";
 import { UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableListMarkerColor, getRenderableTextColor, paragraphHasTrackedChanges, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap } from "../../layout-painter/renderParagraph.js";
 import { getHorizontalScaleFactor } from "../../utils/horizontalScale.js";
-import { resolvePhysicalParagraphInlineLayout } from "../../utils/paragraphInlineLayout.js";
+import { getParagraphFrame } from "../../utils/paragraphFrame.js";
+import { inlinePictureVisibleBounds, isInlinePictureRun, resolveParagraphLineGeometryForBlock, resolvePhysicalParagraphInlineLayout } from "../../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox } from "../../utils/rotationBoundingBox.js";
+import { SCRIPT_CLASS, hasDistinctHAnsiFont, segmentByScript } from "../../utils/scriptSegments.js";
 import { sanitizeExternalUrl } from "../../utils/urlSecurity.js";
 import { HIT_REGION_KINDS, strokeCrossExtentPx } from "../primitives.js";
 import { trackedChangeColor } from "./buildContext.js";
@@ -229,36 +232,6 @@ const paintParagraphChrome = ({ fragment, block, context, prevBorders, nextBorde
 	}));
 	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.
 *
@@ -353,7 +326,7 @@ const smallCapsGlyphRunSegments = (glyphs, fontSizePx) => {
 * 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 }) => {
+const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx, lineTopYPx, lineHeightPx, isRtl, pmRange, decorationRange, collapsedEdge }) => {
 	if (glyphs.text.length === 0) return;
 	const fontSizePx = ptToPx(style.fontSize ?? 11);
 	const color = resolveRunColor(run, context);
@@ -423,6 +396,7 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 		...unicodeBidi === void 0 ? {} : { unicodeBidi },
 		...stroke === void 0 ? {} : { stroke },
 		...pmRange === void 0 ? {} : { pmRange },
+		...decorationRange === void 0 ? {} : { decorationRange },
 		...collapsedEdge === void 0 ? {} : { collapsedEdge }
 	};
 	const smallCapsRuns = style.fontVariant === "small-caps" && direction === "ltr" ? smallCapsGlyphRunSegments(glyphs, fontSizePx) : void 0;
@@ -436,6 +410,7 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 	else {
 		const adjustments = glyphs.adjustments === void 0 ? {} : { adjustments: glyphs.adjustments };
 		let segmentXPx = paintXPx;
+		let segmentTextOffset = 0;
 		for (const segment of smallCapsRuns) {
 			sink.glyphs.push({
 				kind: "glyphRun",
@@ -446,9 +421,14 @@ const emitGlyphRun = ({ sink, context, run, glyphs, style, paintXPx, baselineYPx
 				kerning: glyphs.kerning,
 				smallCaps: true,
 				...adjustments,
-				...commonFields
+				...commonFields,
+				...decorationRange === void 0 ? {} : { decorationRange: {
+					...decorationRange,
+					textOffset: decorationRange.textOffset + segmentTextOffset
+				} }
 			});
 			segmentXPx += segment.widthPx;
+			segmentTextOffset += segment.text.length;
 		}
 	}
 	emitDecorations({
@@ -576,7 +556,7 @@ const resolveLinkTarget = (href, context) => {
 		href: safe
 	};
 };
-const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLine, isLastLine, paragraphEndsWithLineBreak, availableWidthPx, indentLeft, firstLineOffsetPx, markerInlineWidthPx }) => {
+const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLine, isLastLine, paragraphEndsWithLineBreak, availableWidthPx, indentLeft, firstLineOffsetPx, markerInlineWidthPx, inlinePictureViewport }) => {
 	const sink = {
 		backgrounds: [],
 		glyphs: [],
@@ -643,7 +623,8 @@ const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLi
 					style,
 					allCaps: run.allCaps === true,
 					spaceDeltaPx,
-					collapsed: isCollapsedEdgeRun(run)
+					collapsed: isCollapsedEdgeRun(run),
+					trailingAutomaticSpacingPx: automaticRunGap(run, runs[index + 1])
 				});
 				const pmRange = modelRangeOf(run, context);
 				const collapsedEdge = collapsedEdgeOf(run, style, collapsedLeadingRuns);
@@ -665,31 +646,51 @@ const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLi
 				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;
+				const text = paintableText(run, context);
+				const textRun = {
+					...run,
+					kind: "text",
+					text
+				};
+				let textOffset = 0;
+				for (const segment of splitTextRunsByEastAsia([textRun])) {
+					if (segment.kind !== "text") continue;
+					const fieldSegment = {
+						...segment,
+						...run.pmStart === void 0 || run.pmEnd === void 0 ? {} : {
+							pmStart: run.pmStart,
+							pmEnd: run.pmEnd
+						}
+					};
+					const style = runFontStyle(fieldSegment);
+					const glyphs = buildGlyphs({
+						text: segment.text,
+						style,
+						allCaps: run.allCaps === true,
+						spaceDeltaPx,
+						collapsed: false
+					});
+					emitGlyphRun({
+						sink,
+						context,
+						run: fieldSegment,
+						...run.pmStart === void 0 || run.pmEnd === void 0 || resolveFieldText(run, context) !== run.fallback ? {} : { decorationRange: {
+							start: run.pmStart,
+							end: run.pmEnd,
+							story: context.story,
+							textOffset
+						} },
+						glyphs,
+						style,
+						paintXPx: paintXOf(),
+						baselineYPx: geometry.baselineYPx,
+						lineTopYPx: geometry.lineTopYPx,
+						lineHeightPx: line.lineHeight,
+						isRtl
+					});
+					layoutXPx += glyphs.widthPx;
+					textOffset += segment.text.length;
+				}
 				break;
 			}
 			case "math": {
@@ -757,23 +758,40 @@ const paintLine = ({ block, line, geometry, context, alignment, isRtl, isFirstLi
 			case "image": {
 				if (isFloatingImageRun(run)) break;
 				const boundingBox = inlineImageBoundingBox(run);
+				const imageRect = {
+					xPx: paintXOf(),
+					yPx: geometry.baselineYPx - boundingBox.height,
+					widthPx: boundingBox.width,
+					heightPx: boundingBox.height
+				};
 				const primitives = paintImage({
 					source: run,
-					rect: {
-						xPx: paintXOf(),
-						yPx: geometry.baselineYPx - boundingBox.height,
-						widthPx: boundingBox.width,
-						heightPx: boundingBox.height
-					},
+					rect: imageRect,
 					context,
 					label: "inline image"
 				});
-				sink.glyphs.push(...primitives);
+				if (inlinePictureViewport === void 0 || primitives.length === 0 || !isInlinePictureRun(run)) sink.glyphs.push(...primitives);
+				else {
+					const visible = inlinePictureVisibleBounds({
+						pictureLeft: imageRect.xPx,
+						pictureWidth: imageRect.widthPx,
+						viewport: inlinePictureViewport
+					});
+					sink.glyphs.push({
+						kind: "clipGroup",
+						rect: {
+							xPx: visible.left,
+							yPx: imageRect.yPx,
+							widthPx: visible.right - visible.left,
+							heightPx: imageRect.heightPx
+						},
+						children: primitives,
+						regions: []
+					});
+				}
 				if (run.displayMode !== "block" && run.wrapType !== "topAndBottom") layoutXPx += boundingBox.width;
 				break;
 			}
-			case "lineBreak":
-			case "renderedPageBreak": break;
 		}
 	}
 	return {
@@ -791,40 +809,61 @@ const paintListMarker = ({ sink, block, context, paintXPx, baselineYPx, isRtl })
 	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 baseFontFamily = formatting.fontFamily;
+	const text = toPaintedText(marker.replaceAll("	", " "));
+	const segments = hasDistinctHAnsiFont(style) ? segmentByScript(text, { hasHAnsiFont: true }) : [{
+		text,
+		script: SCRIPT_CLASS.western
+	}];
 	const revision = block.attrs?.listMarkerRevision;
 	const color = revision ? trackedChangeColor(context.authorColors, revision.author, void 0) : parseMarkerColor(getRenderableListMarkerColor(formatting.color)) ?? 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"
-	});
+	let segmentXPx = paintXPx;
+	let markerWidthPx = 0;
+	for (const segment of segments) {
+		let segmentStyle = style;
+		if (segment.script === SCRIPT_CLASS.hAnsi) {
+			segmentStyle = {
+				...style,
+				fontFamily: formatting.hAnsiFontFamily ?? formatting.fontFamily
+			};
+			delete segmentStyle.alternateFontFamily;
+			if (formatting.hAnsiAlternateFontFamily !== void 0) segmentStyle.alternateFontFamily = formatting.hAnsiAlternateFontFamily;
+		}
+		const glyphs = buildGlyphs({
+			text: segment.text,
+			style: segmentStyle,
+			allCaps: false,
+			spaceDeltaPx: 0,
+			collapsed: false
+		});
+		const font = context.fonts.intern({
+			fontFamily: segmentStyle.fontFamily ?? baseFontFamily,
+			...segmentStyle.alternateFontFamily === void 0 ? {} : { alternateFontFamily: segmentStyle.alternateFontFamily },
+			...formatting.bold === void 0 ? {} : { bold: formatting.bold },
+			...formatting.italic === void 0 ? {} : { italic: formatting.italic },
+			measureStyle: segmentStyle
+		});
+		sink.glyphs.push({
+			kind: "glyphRun",
+			font,
+			fontSizePx,
+			color,
+			xPx: segmentXPx,
+			baselineYPx,
+			...glyphRunText(glyphs),
+			direction: formatting.rtl ?? isRtl ? "rtl" : "ltr"
+		});
+		segmentXPx += glyphs.widthPx;
+		markerWidthPx += glyphs.widthPx;
+	}
 	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));
+		sink.decorations.push(revision.kind === "ins" ? horizontalLine(paintXPx, markerWidthPx, underlineCenterYPx(baselineYPx, fontSizePx), stroke) : horizontalLine(paintXPx, markerWidthPx, strikethroughCenterYPx(baselineYPx, fontSizePx), stroke));
 	}
 };
 /**
@@ -843,6 +882,7 @@ const paintTab = ({ sink, context, runs, index, run, tabContext, layoutXPx, pain
 		if (following.kind === "tab" || following.kind === "lineBreak") break;
 		if (following.kind === "text" || following.kind === "field" || following.kind === "math") {
 			const text = paintableText(following, context);
+			followingWidthPx += automaticRunGap(runs[next - 1], following);
 			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;
@@ -910,7 +950,10 @@ const measureDecimalPrefixWidth = (runs, tabIndex, decimalIndex, context) => {
 		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));
+		if (take > 0) {
+			width += automaticRunGap(runs[index - 1], run);
+			width += measureTextWidth(text.slice(0, take), runFontStyle(run));
+		}
 		consumed += text.length;
 	}
 	return width;
@@ -918,6 +961,10 @@ const measureDecimalPrefixWidth = (runs, tabIndex, decimalIndex, context) => {
 /** Every primitive a paragraph fragment paints, back to front. */
 const paintParagraphFragment = (options) => {
 	const { fragment, block, measure, context, composer } = options;
+	const inlinePictureViewport = getParagraphFrame(block) === void 0 ? options.inlinePictureViewport ?? context.inlinePictureViewport : {
+		left: fragment.x,
+		right: fragment.x + fragment.width
+	};
 	composer.push(paintParagraphChrome(options));
 	const { alignment, indentLeft, indentRight, isRtl } = resolvePhysicalParagraphInlineLayout(block);
 	const indent = block.attrs?.indent;
@@ -933,19 +980,14 @@ const paintParagraphFragment = (options) => {
 		if (!line) continue;
 		cursorYPx += line.floatSkipBefore ?? 0;
 		const isFirstLine = lineIndex === 0 && fragment.continuesFromPrev !== true;
-		const geometry = resolveLineGeometry({
+		const lineRuns = sliceRunsForLine(block, line);
+		const geometry = resolveParagraphLineGeometryForBlock({
 			fragment,
+			block,
 			line,
 			lineTopYPx: cursorYPx,
-			alignment,
-			isRtl,
-			indentLeft,
-			indentRight,
-			firstLineOffsetPx,
-			markerInlineWidthPx,
 			isFirstLine
 		});
-		const lineRuns = sliceRunsForLine(block, line);
 		composer.region({
 			kind: lineRegionKind(lineRuns),
 			rect: {
@@ -974,7 +1016,8 @@ const paintParagraphFragment = (options) => {
 				availableWidthPx: fragment.width - indentLeft - indentRight - (line.leftOffset ?? 0) - (line.rightOffset ?? 0),
 				indentLeft,
 				firstLineOffsetPx,
-				markerInlineWidthPx
+				markerInlineWidthPx,
+				...inlinePictureViewport === void 0 ? {} : { inlinePictureViewport }
 			});
 			composer.push(painted.primitives);
 			for (const tab of painted.tabRegions) composer.region(tab, () => void 0);

package/dist/display-list/build/previewPrimitives.d.ts

@@ -5,6 +5,5 @@ import { DisplayPrimitive, DisplayRect } from "../types.js";
  * The marks a descriptor makes inside `box`, back to front: the backdrop, then
  * each shape in the order the drawing lists them.
  */
-declare const paintPreview: (descriptor: document_d_exports.PreviewDescriptor, box: DisplayRect) => readonly DisplayPrimitive[];
-//#endregion
-export { paintPreview };
+export declare const paintPreview: (descriptor: document_d_exports.PreviewDescriptor, box: DisplayRect) => readonly DisplayPrimitive[];
+//#endregion