@stll/folio-core 0.62.0 → 0.63.1

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

@@ -6,16 +6,6 @@ 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 identify PNG, JPEG, or a generated SVG
-* preview. It transcodes nothing: WMF, EMF, TIFF, GIF, and BMP are reported
-* through `unsupported` and paint nothing, because a silently missing picture
-* is worse than a named one.
-*/
 const DATA_URL_PATTERN = /^data:([^;,]*)(?:;charset=[^;,]*)?(;base64)?,(.*)$/su;
 /**
 * `undefined` for a payload `atob` rejects: a malformed `data:` URL is a

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.
 *
@@ -583,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: [],
@@ -650,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);
@@ -672,37 +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
-					},
-					...run.pmStart === void 0 || run.pmEnd === void 0 || resolveFieldText(run, context) !== run.fallback ? {} : { decorationRange: {
-						start: run.pmStart,
-						end: run.pmEnd,
-						story: context.story,
-						textOffset: 0
-					} },
-					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": {
@@ -770,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 {
@@ -804,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));
 	}
 };
 /**
@@ -856,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;
@@ -923,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;
@@ -931,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;
@@ -946,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: {
@@ -987,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

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

@@ -7,15 +7,13 @@ import { panic } from "better-result";
 * A drawing with no image data used to be given one: a megapixel PNG built the
 * moment something was about to paint it, which the DOM backend showed as an
 * `<img>` and the PDF exporter embedded as a bitmap — a photograph of a
-* drawing that is nothing but flat rectangles.
+* drawing that is vector geometry.
 *
-* The descriptor already holds those rectangles, in the drawing's own
-* coordinate space, and `rect` is a primitive both backends draw natively. So
-* the preview is drawn rather than sampled: the extent maps affinely onto the
-* image's box, every shape becomes a filled rectangle inside it, and no raster
-* exists at any point. The DOM backend paints each one as the absolutely
-* positioned div it paints every other `rect` as, and the PDF backend emits
-* `re`/`f` operators, so the drawing stays a drawing at any zoom.
+* The descriptor already holds rectangles, polygons, and polylines in the
+* drawing's own coordinate space, and each maps to native display-list
+* primitives. The preview is drawn rather than sampled: the extent maps
+* affinely onto the image's box, and no raster exists at any point, so the
+* drawing stays a drawing at any zoom.
 */
 /** The flat backdrop a preview is drawn on, behind every shape. */
 const PREVIEW_BACKGROUND = {
@@ -38,6 +36,7 @@ const clampFraction = (value) => Math.min(1, Math.max(0, value));
 * clip the raster did by clamping to its own bounds.
 */
 const shapeRect = ({ shape, extent, box }) => {
+	if (shape.type === "polygon" || shape.type === "polyline") return void 0;
 	const left = clampFraction(shape.x / extent.width);
 	const right = clampFraction((shape.x + shape.width) / extent.width);
 	const top = clampFraction(shape.y / extent.height);
@@ -56,6 +55,7 @@ const shapeRect = ({ shape, extent, box }) => {
 */
 const paintPreview = (descriptor, box) => {
 	switch (descriptor.kind) {
+		case "chart":
 		case "diagram": {
 			const primitives = [{
 				kind: "rect",
@@ -65,6 +65,35 @@ const paintPreview = (descriptor, box) => {
 			const { extent } = descriptor;
 			if (!(extent.width > 0 && extent.height > 0)) return primitives;
 			for (const shape of descriptor.shapes) {
+				const color = parseDisplayColor(shape.color) ?? PREVIEW_SHAPE_FILL;
+				if (shape.type === "polygon") {
+					primitives.push({
+						kind: "polygon",
+						points: shape.points.map(({ x, y }) => ({
+							xPx: box.xPx + clampFraction(x / extent.width) * box.widthPx,
+							yPx: box.yPx + clampFraction(y / extent.height) * box.heightPx
+						})),
+						fill: color
+					});
+					continue;
+				}
+				if (shape.type === "polyline") {
+					const points = shape.points.map(({ x, y }) => ({
+						xPx: box.xPx + clampFraction(x / extent.width) * box.widthPx,
+						yPx: box.yPx + clampFraction(y / extent.height) * box.heightPx
+					}));
+					const stroke = {
+						color,
+						thicknessPx: shape.strokeWidth * Math.min(box.widthPx / extent.width, box.heightPx / extent.height),
+						pattern: "solid"
+					};
+					primitives.push({
+						kind: "polyline",
+						points,
+						stroke
+					});
+					continue;
+				}
 				const rect = shapeRect({
 					shape,
 					extent,
@@ -74,7 +103,7 @@ const paintPreview = (descriptor, box) => {
 				primitives.push({
 					kind: "rect",
 					rect,
-					fill: parseDisplayColor(shape.color) ?? PREVIEW_SHAPE_FILL
+					fill: color
 				});
 			}
 			return primitives;

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

@@ -1,12 +1,12 @@
 import { BlockId } from "../../layout-engine/types.js";
 import { DisplayHitRegion, DisplayHitRegionKind, DisplayHitRegionModel, DisplayPrimitive, DisplayRect, DisplayStoryRef } from "../types.js";
 //#region src/display-list/build/regions.d.ts
-type RegionDescriptor = {
+export type RegionDescriptor = {
   readonly kind: DisplayHitRegionKind;
   readonly rect: DisplayRect;
   readonly model?: DisplayHitRegionModel;
 };
-type PageComposer = {
+export type PageComposer = {
   /** Append primitives to the page, in paint order. */
   readonly push: (primitives: readonly DisplayPrimitive[]) => void;
   /**
@@ -17,7 +17,7 @@ type PageComposer = {
   readonly primitives: () => readonly DisplayPrimitive[];
   readonly regions: () => readonly DisplayHitRegion[];
 };
-declare const createPageComposer: () => PageComposer;
+export declare const createPageComposer: () => PageComposer;
 /**
  * The region a whole block occupies, wherever it is painted.
  *
@@ -41,6 +41,6 @@ type BlockRegionOptions = {
     readonly story: DisplayStoryRef;
   };
 };
-declare const blockRegion: ({ fragment, kind, context }: BlockRegionOptions) => RegionDescriptor;
+export declare const blockRegion: ({ fragment, kind, context }: BlockRegionOptions) => RegionDescriptor;
 //#endregion
-export { PageComposer, RegionDescriptor, blockRegion, createPageComposer };
+export {};