reamkit 1.31.0 → 1.32.0

package/dist/esm/html/html-writer.js

@@ -1,3 +1,4 @@
+import { resolveFamilyStyle } from "../core/fonts/remote-fonts.js";
 import { FEATURES } from "../core/ir/features.js";
 import { headingLevelOf } from "../core/outline.js";
 import { detectImageFormat } from "../core/images.js";
@@ -7,7 +8,7 @@ import "../core/style-cascade/index.js";
 import { buildSparkline } from "../core/drawingml/sparkline-geometry.js";
 import { arcPoint, arcToBeziers } from "../core/arc-to-bezier.js";
 import { buildChartScene } from "../core/drawingml/chart-geometry.js";
-import { buildShapePaths, buildShapeTransform, buildStroke, gradientSvgDef } from "../core/drawingml/shape-render.js";
+import { buildShapePaths, buildShapeTransform, buildStroke, gradientSvgDef, lineEndPaths } from "../core/drawingml/shape-render.js";
 import { sanitizeHref } from "../core/links.js";
 import { toBase64 } from "../core/bytes.js";
 //#region src/html/html-writer.ts
@@ -47,13 +48,15 @@ function writeHtml(flow) {
 	out.push(`<style>${BASE_CSS}</style>`);
 	out.push("</head>");
 	out.push("<body>");
-	out.push(`<article style="max-width: ${fmt(contentWidthPt(flow))}pt">`);
+	const sheets = flow.sections.some((s) => s.sheet !== void 0);
+	out.push(sheets ? "<article>" : `<article style="max-width: ${fmt(contentWidthPt(flow))}pt">`);
 	if (flow.headersFooters && flow.headersFooters.size > 0) losses.push({
 		severity: "dropped",
 		feature: FEATURES.headersFooters,
 		detail: "headers/footers have no fixed pages to band onto in flowed HTML"
 	});
-	for (const el of flow.body) emitBlock(out, el, ctx);
+	if (sheets) emitSheets(out, flow, ctx);
+	else for (const el of flow.body) emitBlock(out, el, ctx);
 	emitNotesSection(out, flow.footnotes, ctx.notes.footnotes, "fn", ctx);
 	emitNotesSection(out, flow.endnotes, ctx.notes.endnotes, "en", ctx);
 	emitCommentsSection(out, flow.comments, ctx.notes.comments, ctx);
@@ -95,12 +98,73 @@ var BASE_CSS = [
 	"th{text-align:inherit}",
 	".tab{display:inline-block;min-width:18pt}",
 	"img{vertical-align:baseline}",
+	".sheet{margin:0 0 24pt}",
+	".sheet-name{font:600 11pt/1.4 sans-serif;margin:0 0 6pt;color:#333}",
+	".surface{position:relative}",
+	".drawing{z-index:1}",
 	".notes{margin-top:18pt;font-size:smaller}",
 	".notes hr{margin:0 0 6pt;border:none;border-top:0.75pt solid #000;width:144pt;margin-left:0}",
 	".comment-range{background:#fff3a3}",
 	".comment-replies{margin-left:18pt}",
 	".comments .resolved>.comment-meta::after{content:\" \\2713\";color:#3a7d3a}"
 ].join("");
+/**
+* A workbook laid out for the screen: each sheet a section of its own, headed
+* by its tab's name, its grid and drawings on one surface. The surface is the
+* positioned box the drawings are placed in, and it is made as large as the
+* furthest of them — a chart below the last row is outside the grid, and a box
+* only as tall as the grid let the next sheet run under it.
+*/
+function emitSheets(out, flow, ctx) {
+	let start = 0;
+	for (const section of flow.sections) {
+		const els = flow.body.slice(start, section.endIndex);
+		start = section.endIndex;
+		if (!section.sheet) {
+			for (const el of els) emitBlock(out, el, ctx);
+			continue;
+		}
+		const name = section.sheet.name;
+		out.push(`<section class="sheet" data-sheet="${escapeAttr(name)}">`);
+		out.push(`<h2 class="sheet-name">${escapeText(name)}</h2>`);
+		let right = 0;
+		let bottom = 0;
+		for (const el of els) {
+			const at = surfaceBox(el);
+			if (!at) continue;
+			right = Math.max(right, at.x + at.width);
+			bottom = Math.max(bottom, at.y + at.height);
+		}
+		const reach = right > 0 || bottom > 0 ? `min-width:${fmt(right)}pt;min-height:${fmt(bottom)}pt` : "";
+		out.push(`<div class="surface"${reach ? ` style="${reach}"` : ""}>`);
+		const onSurface = {
+			...ctx,
+			surface: true
+		};
+		for (const el of els) emitBlock(out, el, onSurface);
+		out.push("</div>");
+		out.push("</section>");
+	}
+	for (const el of flow.body.slice(start)) emitBlock(out, el, ctx);
+}
+/**
+* Where a floating drawing sits on a worksheet's surface, in points from its
+* top-left corner — or `undefined` for a block that is not a float placed by
+* offsets (a paragraph, a table, an inline picture).
+*/
+function surfaceBox(el) {
+	if (el.kind === "paragraph" || el.kind === "table") return void 0;
+	const block = el.kind === "image" ? el.image : el.kind === "chart" ? el.chart : el.shape;
+	const x = block.float?.posH?.offsetPt;
+	const y = block.float?.posV?.offsetPt;
+	if (x === void 0 || y === void 0) return void 0;
+	return {
+		x,
+		y,
+		width: block.width,
+		height: block.height
+	};
+}
 function collectReferencedAnchors(body) {
 	const out = /* @__PURE__ */ new Set();
 	const visit = (els) => {
@@ -190,6 +254,16 @@ function emitCommentsSection(out, comments, numbers, ctx) {
 	out.push("</ol></section>");
 }
 function emitBlock(out, el, ctx) {
+	const at = ctx.surface ? surfaceBox(el) : void 0;
+	if (at) {
+		out.push(`<div class="drawing" style="position:absolute;left:${fmt(at.x)}pt;top:${fmt(at.y)}pt;width:${fmt(at.width)}pt;height:${fmt(at.height)}pt">`);
+		emitBlock(out, el, {
+			...ctx,
+			surface: false
+		});
+		out.push("</div>");
+		return;
+	}
 	if (el.kind === "paragraph") emitParagraph(out, el.paragraph, ctx);
 	else if (el.kind === "table") emitTable(out, el.table, ctx);
 	else if (el.kind === "image") emitImageBlock(out, el.image, ctx);
@@ -205,7 +279,13 @@ var blockFigureCss = (pp) => {
 	if (pp.spacingAfter !== void 0 && pp.spacingAfter > 0) css.push(`margin-bottom:${fmt(pp.spacingAfter)}pt`);
 	return css.length > 0 ? ` style="${css.join(";")}"` : "";
 };
-var svgOpen = (w, h, label) => `<svg viewBox="0 0 ${fmt(w)} ${fmt(h)}" width="${fmt(w)}pt" height="${fmt(h)}pt" style="max-width:100%;height:auto" overflow="visible" xmlns="http://www.w3.org/2000/svg" role="img"${label ? ` aria-label="${escapeAttr(label)}"` : ""}>`;
+var LINE_PAD_PT = .5;
+var svgOpen = (w, h, label) => {
+	const padX = w < 2 * LINE_PAD_PT ? LINE_PAD_PT : 0;
+	const padY = h < 2 * LINE_PAD_PT ? LINE_PAD_PT : 0;
+	const style = padX > 0 || padY > 0 ? `margin:${fmt(-padY)}pt 0 0 ${fmt(-padX)}pt;vertical-align:top` : "max-width:100%;height:auto";
+	return `<svg viewBox="${fmt(-padX)} ${fmt(-padY)} ${fmt(w + 2 * padX)} ${fmt(h + 2 * padY)}" width="${fmt(w + 2 * padX)}pt" height="${fmt(h + 2 * padY)}pt" style="${style}" overflow="visible" xmlns="http://www.w3.org/2000/svg" role="img"${label ? ` aria-label="${escapeAttr(label)}"` : ""}>`;
+};
 var strokeAttrs = (stroke) => {
 	if (!stroke) return "";
 	let out = ` stroke="#${stroke.colorHex}" stroke-width="${fmt(stroke.widthPt)}"`;
@@ -293,17 +373,20 @@ function emitOneShape(out, shape, ctx) {
 	const paths = buildShapePaths(shape.geometry, w, h);
 	const gradDef = shape.fill.kind === "gradient" && shape.fill.gradient ? gradientSvgDef("grad0", shape.fill.gradient) : void 0;
 	const fill = gradDef ? "url(#grad0)" : shape.fill.kind === "solid" && shape.fill.colorHex ? `#${shape.fill.colorHex}` : "none";
-	const stroke = strokeAttrs(buildStroke(shape.line));
+	const strokeStyle = buildStroke(shape.line);
+	const stroke = strokeAttrs(strokeStyle);
 	const t = shape.transform;
 	const transform = ` transform="matrix(${flipTransform(buildShapeTransform(0, 0, w, h, t?.rotation60k ?? 0, t?.flipH ?? false, t?.flipV ?? false), h).map(fmt).join(" ")})"`;
 	const svg = [svgOpen(w, h, shape.altText)];
 	if (gradDef) svg.push(`<defs>${gradDef}</defs>`);
 	const shadow = shape.shadow;
-	const shadowFilter = shadow ? ` filter="drop-shadow(${fmt(shadow.dxPt)}px ${fmt(shadow.dyPt)}px ${fmt(shadow.blurPt / 2)}px rgba(${hexToRgbCss(shadow.colorHex)},${fmt(shadow.alpha)}))"` : "";
+	if (shadow) svg.push(`<g filter="drop-shadow(${fmt(shadow.dxPt)}px ${fmt(shadow.dyPt)}px ${fmt(shadow.blurPt / 2)}px rgba(${hexToRgbCss(shadow.colorHex)},${fmt(shadow.alpha)}))">`);
 	for (const path of paths) {
 		const rule = path.fillRule === "evenodd" ? " fill-rule=\"evenodd\"" : "";
-		svg.push(`<path d="${svgPathData(path.segments, fmt)}" fill="${fill}"${rule}${stroke}${transform}${shadowFilter}/>`);
+		svg.push(`<path d="${svgPathData(path.segments, fmt)}" fill="${fill}"${rule}${stroke}${transform}/>`);
 	}
+	if (shadow) svg.push("</g>");
+	if (strokeStyle) for (const end of lineEndPaths(paths, shape.line, strokeStyle.widthPt)) svg.push(`<path d="${svgPathData(end.segments, fmt)}" fill="#${strokeStyle.colorHex}"${transform}/>`);
 	svg.push("</svg>");
 	const figureCss = blockFigureCss(shape.paragraphProperties);
 	const text = shape.text;
@@ -336,12 +419,16 @@ function emitParagraph(out, p, ctx) {
 }
 function paragraphCss(r) {
 	const css = [];
-	if (r.alignment === "center" || r.alignment === "right") css.push(`text-align:${r.alignment}`);
-	else if (r.alignment === "both" || r.alignment === "distribute") css.push("text-align:justify");
+	const bidi = r.bidi === true;
+	const align = bidi && r.alignment === "left" ? "right" : bidi && r.alignment === "right" ? "left" : r.alignment;
+	if (align === "center" || align === "right" || bidi && align === "left") css.push(`text-align:${align}`);
+	else if (align === "both" || align === "distribute") css.push("text-align:justify");
 	if (r.spacingBefore > 0) css.push(`margin-top:${fmt(r.spacingBefore)}pt`);
 	if (r.spacingAfter > 0) css.push(`margin-bottom:${fmt(r.spacingAfter)}pt`);
-	if (r.indentLeft !== 0) css.push(`margin-left:${fmt(r.indentLeft)}pt`);
-	if (r.indentRight !== 0) css.push(`margin-right:${fmt(r.indentRight)}pt`);
+	const indentLeft = bidi ? r.indentRight : r.indentLeft;
+	const indentRight = bidi ? r.indentLeft : r.indentRight;
+	if (indentLeft !== 0) css.push(`margin-left:${fmt(indentLeft)}pt`);
+	if (indentRight !== 0) css.push(`margin-right:${fmt(indentRight)}pt`);
 	if (r.indentFirstLine !== 0) css.push(`text-indent:${fmt(r.indentFirstLine)}pt`);
 	if (r.spacingLine > 0) if (r.spacingLineRule === "auto") css.push(`line-height:${fmt(r.spacingLine / 12)}`);
 	else css.push(`line-height:${fmt(r.spacingLine)}pt`);
@@ -379,7 +466,7 @@ function runHtml(run, p, ctx) {
 	if (run.text.length === 0) return "";
 	const resolved = resolveRunProperties(run.properties, p.properties, EMPTY_STYLE_SHEET);
 	const style = runCss(resolved);
-	let html = `<span${resolved.rtl ? " dir=\"rtl\"" : ""}${style ? ` style="${style}"` : ""}>${textHtml(run.text)}</span>`;
+	let html = `<span${resolved.rtl ? " dir=\"rtl\"" : ""}${style ? ` style="${escapeAttr(style)}"` : ""}>${textHtml(run.text)}</span>`;
 	if (resolved.verticalAlign === "superscript") html = `<sup>${html}</sup>`;
 	else if (resolved.verticalAlign === "subscript") html = `<sub>${html}</sub>`;
 	if (run.commentRangeRefs && run.commentRangeRefs.length > 0) html = `<span class="comment-range">${html}</span>`;
@@ -398,7 +485,7 @@ function runHtml(run, p, ctx) {
 function runCss(r) {
 	const css = [];
 	const family = r.fontFamily.ascii;
-	if (family) css.push(`font-family:${JSON.stringify(family)}`);
+	if (family) css.push(`font-family:${fontStack(family)}`);
 	css.push(`font-size:${fmt(r.fontSizePt)}pt`);
 	if (r.bold) css.push("font-weight:700");
 	if (r.italic) css.push("font-style:italic");
@@ -414,6 +501,28 @@ function runCss(r) {
 	if (r.colorHex !== "000000") css.push(`color:#${r.colorHex}`);
 	return css.join(";");
 }
+/**
+* A family as CSS asks for it: the document's own, then — where the page is
+* read without that font, which for Calibri is anywhere Office is not — its
+* open metric twin, then the class of face it is. Without the class a browser
+* that lacks the font falls to its default, a serif: a Calibri sheet came out
+* in Times.
+*
+* The name is a CSS string in SINGLE quotes. The declaration goes into a
+* double-quoted `style` attribute, where a double quote ended the attribute
+* and took the size, weight and colour after the family with it.
+*/
+function fontStack(family) {
+	return [`'${family.replace(/\s+/gu, " ").replaceAll("\\", "\\\\").replaceAll("'", "\\'")}'`, ...FALLBACKS[resolveFamilyStyle(family).key]].join(",");
+}
+/** What follows a family in its stack, by the open substitute it maps to. */
+var FALLBACKS = {
+	carlito: ["Carlito", "sans-serif"],
+	caladea: ["Caladea", "serif"],
+	arimo: ["sans-serif"],
+	tinos: ["serif"],
+	cousine: ["monospace"]
+};
 function decorationStyle(u) {
 	switch (u) {
 		case "double": return "double";
@@ -430,8 +539,11 @@ function textHtml(text) {
 }
 function emitTable(out, table, ctx) {
 	const css = [];
+	const fixed = table.properties.layout === "fixed";
 	if (table.properties.widthPt !== void 0) css.push(`width:${fmt(table.properties.widthPt)}pt`);
 	else if (table.properties.widthFraction !== void 0) css.push(`width:${fmt(table.properties.widthFraction * 100)}%`);
+	else if (fixed && table.grid.length > 0) css.push(`width:${fmt(table.grid.reduce((sum, w) => sum + w, 0))}pt`);
+	if (fixed) css.push("table-layout:fixed");
 	if (table.properties.alignment === "center") css.push("margin-left:auto;margin-right:auto");
 	else if (table.properties.alignment === "right") css.push("margin-left:auto");
 	out.push(`<table${css.length > 0 ? ` style="${css.join(";")}"` : ""}>`);
@@ -448,6 +560,7 @@ function emitTable(out, table, ctx) {
 			return start;
 		});
 	});
+	const cellGrid = table.properties.gridlines ? gridOfCells(table, colStarts) : void 0;
 	const frozen = table.properties.frozen;
 	const leftOffsets = [];
 	const topOffsets = [];
@@ -465,14 +578,19 @@ function emitTable(out, table, ctx) {
 	}
 	for (let ri = 0; ri < table.rows.length; ri++) {
 		const row = table.rows[ri];
-		out.push("<tr>");
+		const { height, heightRule } = row.properties;
+		out.push(height !== void 0 && heightRule !== "auto" ? `<tr style="height:${fmt(height)}pt">` : "<tr>");
 		for (let ci = 0; ci < row.cells.length; ci++) {
 			const cell = row.cells[ci];
 			const merge = cell.properties.merge;
 			if (merge === "middle" || merge === "end") continue;
 			const cs = colStarts[ri][ci];
 			const rowSpan = merge === "start" ? mergeRowSpan(table, colStarts, ri, cs) : 1;
+			const claimed = cellGrid ? claimedEdges(cellGrid, ri, cs, cs + (cell.properties.colSpan ?? 1) - 1, rowSpan) : void 0;
+			const flagInsetPt = noteFlagInset(cell, cs, table.grid);
 			emitCell(out, cell, table, ctx, {
+				...flagInsetPt > 0 ? { flagInsetPt } : {},
+				...claimed && claimed.size > 0 ? { claimed } : {},
 				isHeader: row.properties.isHeader === true,
 				firstRow: ri === 0,
 				lastRow: ri === table.rows.length - 1,
@@ -487,6 +605,56 @@ function emitTable(out, table, ctx) {
 	}
 	out.push("</table>");
 }
+/**
+* How far a note's flag stands in from the cell's side: the width of the
+* columns its text only borrowed (CellProperties.paintColumns) — after its own
+* column, or before it where the span runs leftwards (paintAtEnd).
+*/
+function noteFlagInset(cell, colStart, grid) {
+	const p = cell.properties;
+	const span = p.colSpan ?? 1;
+	if (!p.noteFlag || p.paintColumns === void 0 || p.paintColumns >= span) return 0;
+	return (p.paintAtEnd ? grid.slice(colStart, colStart + span - p.paintColumns) : grid.slice(colStart + p.paintColumns, colStart + span)).reduce((sum, w) => sum + w, 0);
+}
+/** The cell at each row × grid column (a spanning cell at every column it covers). */
+function gridOfCells(table, colStarts) {
+	return table.rows.map((row, ri) => {
+		const line = new Array(table.grid.length).fill(void 0);
+		row.cells.forEach((cell, ci) => {
+			const start = colStarts[ri][ci];
+			for (let k = 0; k < (cell.properties.colSpan ?? 1); k++) line[start + k] = cell;
+		});
+		return line;
+	});
+}
+/**
+* The edges of a cell (rows `ri`…`ri + rowSpan − 1`, columns `c0`…`c1`) that a
+* neighbour across them CLAIMS: one that rules its facing side, or is filled.
+* A window's gridline gives way there. Collapsed borders are settled edge by
+* edge, wider first and then by position, and a gridline is as wide as a
+* thin rule once the browser rounds both to a pixel — so the cell above or to
+* the left won, and a merged range ruled all round showed only two of its four
+* sides. Excel draws no gridline along a filled cell either. Where only some of
+* the neighbours claim the edge, the others draw their own gridline on it.
+*/
+function claimedEdges(grid, ri, c0, c1, rowSpan) {
+	const claims = (cell, facing) => {
+		if (!cell) return false;
+		if (cell.properties.shading) return true;
+		const b = cell.properties.borders?.[facing];
+		return b !== void 0 && b.style !== "none";
+	};
+	const out = /* @__PURE__ */ new Set();
+	for (let c = c0; c <= c1; c++) {
+		if (claims(grid[ri - 1]?.[c], "bottom")) out.add("top");
+		if (claims(grid[ri + rowSpan]?.[c], "top")) out.add("bottom");
+	}
+	for (let r = ri; r < ri + rowSpan; r++) {
+		if (claims(grid[r]?.[c0 - 1], "right")) out.add("left");
+		if (claims(grid[r]?.[c1 + 1], "left")) out.add("right");
+	}
+	return out;
+}
 function mergeRowSpan(table, colStarts, startRow, colStart) {
 	let span = 1;
 	for (let r = startRow + 1; r < table.rows.length; r++) {
@@ -508,11 +676,15 @@ function emitCell(out, cell, table, ctx, pos) {
 	const css = [];
 	const t = table.properties.borders;
 	const c = cell.properties.borders;
-	pushBorder(css, "top", c?.top ?? (pos.firstRow ? t?.top : t?.insideH));
-	pushBorder(css, "bottom", c?.bottom ?? (pos.lastRow ? t?.bottom : t?.insideH));
-	pushBorder(css, "left", c?.left ?? (pos.firstCol ? t?.left : t?.insideV));
-	pushBorder(css, "right", c?.right ?? (pos.lastCol ? t?.right : t?.insideV));
+	const g = cell.properties.shading ? void 0 : table.properties.gridlines;
+	const gridOn = (side) => pos.claimed?.has(side) ? void 0 : g;
+	pushBorder(css, "top", c?.top ?? (pos.firstRow ? t?.top : t?.insideH) ?? gridOn("top"));
+	pushBorder(css, "bottom", c?.bottom ?? (pos.lastRow ? t?.bottom : t?.insideH) ?? gridOn("bottom"));
+	pushBorder(css, "left", c?.left ?? (pos.firstCol ? t?.left : t?.insideV) ?? gridOn("left"));
+	pushBorder(css, "right", c?.right ?? (pos.lastCol ? t?.right : t?.insideV) ?? gridOn("right"));
 	if (cell.properties.shading) css.push(`background-color:#${cell.properties.shading.colorHex}`);
+	if (cell.properties.verticalAlign === "center") css.push("vertical-align:middle");
+	else if (cell.properties.verticalAlign === "bottom") css.push("vertical-align:bottom");
 	if (cell.properties.noWrap) css.push("white-space:nowrap", "overflow:hidden");
 	if (cell.properties.dataBar) {
 		const db = cell.properties.dataBar;
@@ -520,7 +692,8 @@ function emitCell(out, cell, table, ctx, pos) {
 		const start = (clamp(db.startFraction ?? 0) * 100).toFixed(2);
 		const end = (clamp((db.startFraction ?? 0) + db.fraction) * 100).toFixed(2);
 		const c = db.colorHex;
-		css.push(`background-image:linear-gradient(to right,transparent ${start}%,#${c} ${start}%,#${c} ${end}%,transparent ${end}%)`);
+		const [from, to] = db.solid ? [c, c] : db.negative ? ["FFFFFF", c] : [c, "FFFFFF"];
+		css.push(`background-image:linear-gradient(to right,transparent ${start}%,#${from} ${start}%,#${to} ${end}%,transparent ${end}%)`, "background-repeat:no-repeat", "background-size:calc(100% - 3pt) calc(100% - 3pt)", "background-position:1.5pt 1.5pt");
 	}
 	const margins = cell.properties.margins ?? table.properties.defaultCellMargins;
 	const padTop = margins?.top ?? 0;
@@ -536,13 +709,22 @@ function emitCell(out, cell, table, ctx, pos) {
 		css.push(`z-index:${z}`);
 		if (!cell.properties.shading) css.push("background-color:#fff");
 	}
+	const note = cell.properties.noteFlag;
+	if (note) {
+		attrs.push(`title="${escapeAttr(note.text)}"`);
+		if (pos.stickyTop === void 0 && pos.stickyLeft === void 0) css.push("position:relative");
+	}
 	out.push(`<${tag}${attrs.length > 0 ? ` ${attrs.join(" ")}` : ""} style="${css.join(";")}">`);
+	if (note) out.push(cellNoteFlag(note, pos.flagInsetPt ?? 0));
 	if (cell.properties.dropdown) out.push(cellDropdownSvg());
 	if (cell.properties.icon) out.push(cellIconSvg(cell.properties.icon));
 	if (cell.properties.sparkline) out.push(cellSparklineSvg(cell.properties.sparkline));
 	for (const child of cell.content) emitBlock(out, child, ctx);
 	out.push(`</${tag}>`);
 }
+function cellNoteFlag(note, insetPt) {
+	return `<span aria-hidden="true" style="position:absolute;top:0;${note.atLeft ? "left" : "right"}:${fmt(insetPt)}pt;width:0;height:0;border-top:4.5pt solid #${note.kind === "thread" ? "7030A0" : "FF0000"};border-${note.atLeft ? "right" : "left"}:4.5pt solid transparent"></span>`;
+}
 function cellSparklineSvg(sp) {
 	const W = 56;
 	const H = 16;
@@ -598,7 +780,7 @@ function cellIconSvg(icon) {
 			body = `<circle cx="5" cy="5" r="4" fill="${fill}"/>`;
 			break;
 	}
-	return `<svg width="10" height="10" viewBox="0 0 10 10" style="vertical-align:middle;margin-right:3px">${body}</svg>`;
+	return `<svg width="10" height="10" viewBox="0 0 10 10" style="float:left;margin:2px 3px 0 0">${body}</svg>`;
 }
 var round2 = (n) => (Math.round(n * 100) / 100).toString();
 function barsIconSvg(fill, color, empty) {

package/dist/esm/layout/fit-pages.d.ts

@@ -0,0 +1,11 @@
+import { LaidOutDocument } from './page-doc.js';
+/**
+ * Each page cut down to the right and bottom edges of what is drawn on it,
+ * plus `pad`. The top-left corner stays where it is — the content's origin is
+ * the page's, and the layout already kept its margin there.
+ *
+ * @param laid The laid-out document, its pages larger than their content.
+ * @param pad  The room kept past the content on the right and at the bottom.
+ * @returns The same document on pages no larger than what they hold.
+ */
+export declare function fitPagesToContent(laid: LaidOutDocument, pad: number): LaidOutDocument;

package/dist/esm/layout/fit-pages.js

@@ -0,0 +1,86 @@
+import { pt } from "../core/ir/units.js";
+//#region src/layout/fit-pages.ts
+/**
+* Each page cut down to the right and bottom edges of what is drawn on it,
+* plus `pad`. The top-left corner stays where it is — the content's origin is
+* the page's, and the layout already kept its margin there.
+*
+* @param laid The laid-out document, its pages larger than their content.
+* @param pad  The room kept past the content on the right and at the bottom.
+* @returns The same document on pages no larger than what they hold.
+*/
+function fitPagesToContent(laid, pad) {
+	return {
+		...laid,
+		pages: laid.pages.map((page) => fitPage(page, pad))
+	};
+}
+function fitPage(page, pad) {
+	let right = 0;
+	let bottom = 0;
+	for (const item of page.commands) {
+		const reach = reachOf(item);
+		const w = item.window;
+		right = Math.max(right, w ? Math.min(reach.right, w.x + w.width) : reach.right);
+		bottom = Math.max(bottom, w ? Math.min(reach.bottom, w.y + w.height) : reach.bottom);
+	}
+	return {
+		...page,
+		width: pt(Math.min(page.width, Math.ceil(right + pad))),
+		height: pt(Math.min(page.height, Math.ceil(bottom + pad)))
+	};
+}
+/** How far right and down one item paints. */
+function reachOf(item) {
+	switch (item.type) {
+		case "fill":
+		case "image": return {
+			right: item.x + item.width,
+			bottom: item.y + item.height
+		};
+		case "border": {
+			const half = item.borderSizePt / 2;
+			return {
+				right: item.x + item.width + half,
+				bottom: item.y + item.height + half
+			};
+		}
+		case "line": {
+			if (item.clip) return {
+				right: item.clip.x + item.clip.width,
+				bottom: item.clip.y + item.clip.height
+			};
+			const descent = item.line.metricDescentPt ?? item.line.maxFontSizePt * .25;
+			return {
+				right: item.originX + item.line.contentWidthPt,
+				bottom: item.baselineY + descent
+			};
+		}
+		case "shape": return shapeReach(item.shape);
+	}
+}
+/** The far corner of a shape's paths on the page, its stroke included (control points bound a curve). */
+function shapeReach(shape) {
+	const [a, b, c, d, e, f] = shape.transform;
+	const half = (shape.stroke?.widthPt ?? 0) / 2;
+	let right = 0;
+	let bottom = 0;
+	const take = (x, y) => {
+		right = Math.max(right, a * x + c * y + e + half);
+		bottom = Math.max(bottom, b * x + d * y + f + half);
+	};
+	for (const path of shape.paths) for (const s of path.segments) {
+		if (s.op === "close") continue;
+		if (s.op === "cubic") {
+			take(s.x1, s.y1);
+			take(s.x2, s.y2);
+		}
+		take(s.x, s.y);
+	}
+	return {
+		right,
+		bottom
+	};
+}
+//#endregion
+export { fitPagesToContent };

package/dist/esm/layout/line-paint.d.ts

@@ -0,0 +1,58 @@
+import { BorderStyle } from '../core/document-model/index.js';
+import { Line } from './page-doc.js';
+/** The slant of a faked italic — tan(12°), the angle a text italic leans at. */
+export declare const FAUX_ITALIC_SHEAR = 0.2126;
+/**
+ * §18.18.3 — the dash pattern of a rule that is not solid, in points: dashes
+ * and gaps alternating, from a dash.
+ */
+export declare const BORDER_DASHES: ReadonlyMap<BorderStyle, ReadonlyArray<number>>;
+/**
+ * UAX #9 rule L2 over a line's tokens: the token indices in visual order. Each
+ * token carries a single embedding level (the tokenizer split runs at level
+ * boundaries), so reordering tokens is equivalent to reordering their
+ * characters.
+ *
+ * @param line The laid-out line.
+ * @returns Its token indices, left to right as they are drawn.
+ */
+export declare function lineVisualOrder(line: Line): Array<number>;
+/**
+ * The extra width each space of a justified line takes — 0 for a line that is
+ * not justified, or the last line of a paragraph (which stays flush by
+ * convention).
+ *
+ * @param line The laid-out line.
+ * @returns Points added to (or, squeezed, taken from) each space token.
+ */
+export declare function computeJustifyExtra(line: Line): number;
+/**
+ * Whether a line is ONE text matrix and a run of glyphs: nothing in it placed
+ * on its own — a tab, a stretched space, a picture, a formula, a right-to-left
+ * run, a rise, a faked italic — and nothing drawn beside its glyphs, a run's
+ * shading, a highlight or a rule. Only such a line can be turned by its matrix
+ * alone; any other is placed token by token in page space.
+ *
+ * @param line The laid-out line.
+ * @returns True when a single text matrix sets the whole of it.
+ */
+export declare function settableInOneMatrix(line: Line): boolean;
+/**
+ * §14.1.2.10 — the wash a picture is drawn through, as the flat veil it is.
+ * `gain`/`blacklevel` are contrast and brightness about mid grey, so a source
+ * value `in` prints as `(in - 0.5) * gain + 0.5 + black` — and painting a
+ * colour `c` at opacity `a` gives `in * (1 - a) + c * a`, the same line with
+ * `a = 1 - gain`. Exact for every wash a document can state, and it needs no
+ * decoder: the picture's own pixels are not rewritten.
+ *
+ * @param wash The picture's wash, if it has one.
+ * @returns The grey (0…1) and opacity of the veil laid over the picture, or
+ *          nothing where the wash changes nothing.
+ */
+export declare function washVeil(wash: {
+    readonly gain: number;
+    readonly black: number;
+} | undefined): {
+    alpha: number;
+    grey: number;
+} | undefined;

package/dist/esm/layout/line-paint.js

@@ -0,0 +1,107 @@
+import { reorderVisual } from "../core/bidi/algorithm.js";
+import "../core/bidi/index.js";
+import { GLUE_SHRINK_RATIO } from "./styled-layout.js";
+//#region src/layout/line-paint.ts
+/** The slant of a faked italic — tan(12°), the angle a text italic leans at. */
+var FAUX_ITALIC_SHEAR = .2126;
+/**
+* §18.18.3 — the dash pattern of a rule that is not solid, in points: dashes
+* and gaps alternating, from a dash.
+*/
+var BORDER_DASHES = new Map([
+	["dashed", [8, 2.5]],
+	["dashSmallGap", [3, 1]],
+	["dotted", [.5, 1]],
+	["dashDot", [
+		8,
+		2.5,
+		2.5,
+		2.5
+	]],
+	["dashDotDot", [
+		8,
+		2.5,
+		2.5,
+		2.5,
+		2.5,
+		2.5
+	]]
+]);
+/**
+* UAX #9 rule L2 over a line's tokens: the token indices in visual order. Each
+* token carries a single embedding level (the tokenizer split runs at level
+* boundaries), so reordering tokens is equivalent to reordering their
+* characters.
+*
+* @param line The laid-out line.
+* @returns Its token indices, left to right as they are drawn.
+*/
+function lineVisualOrder(line) {
+	return reorderVisual(line.tokens.map((t) => t.bidiLevel));
+}
+/**
+* The extra width each space of a justified line takes — 0 for a line that is
+* not justified, or the last line of a paragraph (which stays flush by
+* convention).
+*
+* @param line The laid-out line.
+* @returns Points added to (or, squeezed, taken from) each space token.
+*/
+function computeJustifyExtra(line) {
+	const alignment = line.resolved.alignment;
+	if (alignment !== "both" && alignment !== "distribute") return 0;
+	if (line.noJustify === true) return 0;
+	if (line.isLastInParagraph && alignment !== "distribute") return 0;
+	let last = line.tokens.length - 1;
+	while (last >= 0 && line.tokens[last].kind === "text" && line.tokens[last].isSpace) last--;
+	let spaces = 0;
+	let narrowest = Infinity;
+	let contentWidthPt = 0;
+	for (let i = 0; i <= last; i++) {
+		const tok = line.tokens[i];
+		contentWidthPt += tok.widthPt;
+		if (!tok.isSpace) continue;
+		spaces++;
+		if (tok.widthPt < narrowest) narrowest = tok.widthPt;
+	}
+	if (spaces === 0) return 0;
+	const extra = (line.availableWidthPt - contentWidthPt) / spaces;
+	return extra < 0 ? Math.max(extra, -narrowest * GLUE_SHRINK_RATIO) : extra;
+}
+/**
+* Whether a line is ONE text matrix and a run of glyphs: nothing in it placed
+* on its own — a tab, a stretched space, a picture, a formula, a right-to-left
+* run, a rise, a faked italic — and nothing drawn beside its glyphs, a run's
+* shading, a highlight or a rule. Only such a line can be turned by its matrix
+* alone; any other is placed token by token in page space.
+*
+* @param line The laid-out line.
+* @returns True when a single text matrix sets the whole of it.
+*/
+function settableInOneMatrix(line) {
+	return computeJustifyExtra(line) === 0 && line.tokens.every((t) => t.kind === "text" && t.tab !== true && t.bidiLevel % 2 === 0 && t.risePt === void 0 && t.synthetic?.italic !== true && t.highlight !== true && t.resolvedRun.shadingColorHex === void 0 && t.resolvedRun.underline === "none" && !t.resolvedRun.strike);
+}
+/**
+* §14.1.2.10 — the wash a picture is drawn through, as the flat veil it is.
+* `gain`/`blacklevel` are contrast and brightness about mid grey, so a source
+* value `in` prints as `(in - 0.5) * gain + 0.5 + black` — and painting a
+* colour `c` at opacity `a` gives `in * (1 - a) + c * a`, the same line with
+* `a = 1 - gain`. Exact for every wash a document can state, and it needs no
+* decoder: the picture's own pixels are not rewritten.
+*
+* @param wash The picture's wash, if it has one.
+* @returns The grey (0…1) and opacity of the veil laid over the picture, or
+*          nothing where the wash changes nothing.
+*/
+function washVeil(wash) {
+	if (!wash) return void 0;
+	const alpha = 1 - wash.gain;
+	if (!(alpha > .004)) return void 0;
+	const offset = .5 * (1 - wash.gain) + wash.black;
+	return {
+		alpha: Math.min(1, alpha),
+		grey: Math.max(0, Math.min(1, offset / alpha))
+	};
+}
+//#endregion
+export { BORDER_DASHES, FAUX_ITALIC_SHEAR, computeJustifyExtra, lineVisualOrder, settableInOneMatrix, washVeil };