@stll/folio-core 0.47.7 → 0.49.0

package/dist/layout-painter/renderParagraph.js

@@ -4,7 +4,8 @@ import { evaluateFieldInstruction } from "../fields/evaluateField.js";
 import { applyComplexScriptFormatting, hasComplexScriptFormatting, resolveComplexScriptFormatting } from "../layout-engine/measure/complexScriptFormatting.js";
 import { getHyperlinkInstanceIndex } from "../layout-engine/measure/hyperlinkInstance.js";
 import { getListMarkerInlineWidth, getListMarkerVisualOffset, resolveListMarkerFont } from "../layout-engine/measure/listMarkerWidth.js";
-import { DOCX_SCRIPT_FONT_SCALE } from "../layout-engine/measure/measureHelpers.js";
+import { DEFAULT_FONT_FAMILY, docxScriptFontSize } from "../layout-engine/measure/measureHelpers.js";
+import { SMALL_CAPS_SCALE, smallCapsSegments } from "../layout-engine/measure/smallCapsCasing.js";
 import { calculateTabWidth } from "../layout-engine/measure/tabCalculator.js";
 import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
@@ -17,7 +18,8 @@ import { getHorizontalScaleFactor } from "../utils/horizontalScale.js";
 import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { sanitizeImageSrc } from "../utils/sanitizeImageSrc.js";
-import { SCRIPT_CLASS, hasCjk, hasComplexScript, segmentByScript } from "../utils/scriptSegments.js";
+import { SCRIPT_CLASS, eastAsiaHintApplies, hasComplexScript, hasEastAsiaSlotText, segmentByScript } from "../utils/scriptSegments.js";
+import { trailingSpaceStart } from "../utils/trailingText.js";
 import { anchorTargetAttrs, sanitizeExternalUrl } from "../utils/urlSecurity.js";
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { planCursiveJoiners, withCursiveJoiners } from "./cursiveJoiners.js";
@@ -146,6 +148,14 @@ function getRenderableTextColor(run) {
 	if (!shouldRenderTextColor(textColor, run.highlight, run.textColorSource)) return;
 	return textColor.trim();
 }
+/**
+* The colour a list marker paints in, or undefined for the canvas text colour.
+* Black and `auto` fall back to the canvas colour, as they do for runs.
+*/
+function getRenderableListMarkerColor(color) {
+	if (!color || isAutomaticTextColor(color) || isDefaultBlackTextColor(color)) return;
+	return color.trim();
+}
 function getHyperlinkTextColor(run, inheritedColor) {
 	const textColor = run.color?.trim();
 	if (textColor && !isAutomaticTextColor(textColor) && run.textColorSource === "direct") return textColor;
@@ -155,8 +165,7 @@ function fontSizePtToPx(fontSizePt) {
 	return fontSizePt * 96 / 72;
 }
 function getRaisedRunFontSize(run) {
-	if (run.fontSize) return `${fontSizePtToPx(run.fontSize) * DOCX_SCRIPT_FONT_SCALE}px`;
-	return `${DOCX_SCRIPT_FONT_SCALE}em`;
+	return `${fontSizePtToPx(docxScriptFontSize(run.fontSize || 11))}px`;
 }
 function applyHorizontalScaleTransform(element, horizontalScale) {
 	const horizontalScaleFactor = getHorizontalScaleFactor(horizontalScale);
@@ -193,7 +202,6 @@ function applyRunStyles(element, run) {
 	}
 	if (run.letterSpacing) element.style.letterSpacing = `${run.letterSpacing}px`;
 	if (run.allCaps) element.style.textTransform = "uppercase";
-	if (run.smallCaps) element.style.fontVariant = "small-caps";
 	if (run.positionPx) element.style.verticalAlign = `${run.positionPx}px`;
 	applyHorizontalScaleTransform(element, run.horizontalScale);
 	element.style.fontKerning = getRunFontKerningMode(run, 11);
@@ -330,7 +338,8 @@ function applyPmPositions(element, pmStart, pmEnd) {
 }
 const NON_COMPRESSIBLE_WHITESPACE_PATTERN = /([^\S ]+)/gu;
 const HAS_NON_COMPRESSIBLE_WHITESPACE_PATTERN = /[^\S ]/u;
-function appendPaintedText({ host, text, doc, contractedWordSpacing }) {
+/** Fill `host` with `text`, splitting it into word-spacing segments as needed. */
+function fillPaintedText({ host, text, doc, contractedWordSpacing }) {
 	if (!contractedWordSpacing) {
 		host.textContent = text;
 		return;
@@ -349,6 +358,39 @@ function appendPaintedText({ host, text, doc, contractedWordSpacing }) {
 		host.append(segmentEl);
 	}
 }
+function appendPaintedText({ host, text, doc, contractedWordSpacing, smallCapsFontSizePx }) {
+	const wordSpacing = contractedWordSpacing === void 0 ? {} : { contractedWordSpacing };
+	if (smallCapsFontSizePx === void 0) {
+		fillPaintedText({
+			host,
+			text,
+			doc,
+			...wordSpacing
+		});
+		return;
+	}
+	const segments = smallCapsSegments(text);
+	if (!segments.some((segment) => segment.small)) {
+		fillPaintedText({
+			host,
+			text,
+			doc,
+			...wordSpacing
+		});
+		return;
+	}
+	for (const segment of segments) {
+		const segmentEl = doc.createElement("span");
+		if (segment.small) segmentEl.style.fontSize = `${smallCapsFontSizePx}px`;
+		fillPaintedText({
+			host: segmentEl,
+			text: segment.text,
+			doc,
+			...wordSpacing
+		});
+		host.append(segmentEl);
+	}
+}
 function renderTextRun(run, doc, options) {
 	const span = doc.createElement("span");
 	span.className = `${PARAGRAPH_CLASS_NAMES.run} ${PARAGRAPH_CLASS_NAMES.text}`;
@@ -366,6 +408,7 @@ function renderTextRun(run, doc, options) {
 	applyRunStyles(span, run);
 	applyPmPositions(span, run.pmStart, run.pmEnd);
 	const paintedText = toPaintedText(run.text);
+	const smallCapsFontSizePx = run.smallCaps && !run.allCaps ? fontSizePtToPx(run.fontSize || 11) * SMALL_CAPS_SCALE : void 0;
 	const visualSpaceContractionPx = options?.visualSpaceContractionPx;
 	const effectiveHorizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale) * (options?.ancestorHorizontalScaleFactor ?? 1);
 	const contractedWordSpacing = visualSpaceContractionPx === void 0 || effectiveHorizontalScaleFactor === 0 ? void 0 : `${-visualSpaceContractionPx / effectiveHorizontalScaleFactor}px`;
@@ -385,7 +428,8 @@ function renderTextRun(run, doc, options) {
 			host: anchor,
 			text: paintedText,
 			doc,
-			...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {}
+			...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {},
+			...smallCapsFontSizePx !== void 0 ? { smallCapsFontSizePx } : {}
 		});
 		if (!run.hyperlink.noDefaultStyle) {
 			const hyperlinkColor = getHyperlinkTextColor(run, span.style.color);
@@ -398,7 +442,8 @@ function renderTextRun(run, doc, options) {
 		host: span,
 		text: paintedText,
 		doc,
-		...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {}
+		...contractedWordSpacing !== void 0 ? { contractedWordSpacing } : {},
+		...smallCapsFontSizePx !== void 0 ? { smallCapsFontSizePx } : {}
 	});
 	applyWhitespaceUnderline(span, run);
 	return span;
@@ -717,7 +762,7 @@ function renderFieldRun(run, doc, { context, visualSpaceContractionPx }) {
 		const horizontalScaleFactor = getHorizontalScaleFactor(resolvedRun.horizontalScale);
 		applyHorizontalScaleTransform(wrapper, resolvedRun.horizontalScale);
 		const { pmStart: _pmStart, pmEnd: _pmEnd, horizontalScale: _horizontalScale, ...segmentBase } = resolvedRun;
-		for (const segment of segmentByScript(text)) {
+		for (const segment of segmentByScript(text, eastAsiaHintApplies(resolvedRun))) {
 			const segmentRun = formatTextRunForScript({
 				...segmentBase,
 				text: segment.text
@@ -864,7 +909,7 @@ const formatTextRunForScript = (run, script) => {
 */
 const needsPerScriptSpans = (run) => {
 	if (run.letterSpacing) return false;
-	if (run.eastAsiaFontFamily !== void 0 && hasCjk(run.text)) return true;
+	if (run.eastAsiaFontFamily !== void 0 && hasEastAsiaSlotText(run.text, eastAsiaHintApplies(run))) return true;
 	return hasComplexScriptFormatting(run) && hasComplexScript(run.text);
 };
 /**
@@ -888,7 +933,7 @@ function splitTextRunsByEastAsia(runs) {
 			continue;
 		}
 		let offset = 0;
-		for (const segment of segmentByScript(run.text)) {
+		for (const segment of segmentByScript(run.text, eastAsiaHintApplies(run))) {
 			result.push(formatTextRunForScript({
 				...run,
 				text: segment.text,
@@ -933,13 +978,13 @@ const splitCollapsibleLineEdgeSpaces = (sourceRuns, collapseLeading) => {
 		const run = runs[index];
 		if (!run || !isTextRun(run)) break;
 		if (run.text.length === 0) continue;
-		const trailingSpaces = / +$/u.exec(run.text);
-		if (!trailingSpaces || paintsLineEdgeSpaces(run)) break;
-		if (trailingSpaces.index === 0) {
+		const spacesStart = trailingSpaceStart(run.text);
+		if (spacesStart === run.text.length || paintsLineEdgeSpaces(run)) break;
+		if (spacesStart === 0) {
 			collapsedTrailingRuns.add(run);
 			continue;
 		}
-		const [leading, trailing] = splitTextRunAt(run, trailingSpaces.index);
+		const [leading, trailing] = splitTextRunAt(run, spacesStart);
 		runs.splice(index, 1, leading, trailing);
 		collapsedTrailingRuns.add(trailing);
 		break;
@@ -1005,6 +1050,7 @@ function runMeasureStyle(run) {
 		...run.alternateFontFamily !== void 0 ? { alternateFontFamily: run.alternateFontFamily } : {},
 		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
 		...run.eastAsiaAlternateFontFamily !== void 0 ? { eastAsiaAlternateFontFamily: run.eastAsiaAlternateFontFamily } : {},
+		...eastAsiaHintApplies(run) ? { eastAsiaHint: true } : {},
 		...run.complexScriptFontFamily !== void 0 ? { complexScriptFontFamily: run.complexScriptFontFamily } : {},
 		...run.complexScriptAlternateFontFamily !== void 0 ? { complexScriptAlternateFontFamily: run.complexScriptAlternateFontFamily } : {},
 		...run.complexScriptFontSize !== void 0 ? { complexScriptFontSize: run.complexScriptFontSize } : {},
@@ -1028,10 +1074,10 @@ function measureFollowingContentWidth(runs, tabRunIndex, measureText, context) {
 		if (isTabRun(run) || isLineBreakRun(run)) break;
 		if (isTextRun(run)) {
 			const text = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
-			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
+			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isFieldRun(run)) {
 			const fieldText = resolveFieldText(run, context);
-			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
+			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isImageRun(run) && !isFloatingImageRun(run)) width += inlineImageBoundingBox(run).width || 0;
 		else if (isMathRun(run)) width += measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 	}
@@ -1061,7 +1107,7 @@ function measureDecimalPrefixWidth(runs, tabRunIndex, decimalIndex, measureText,
 		const take = Math.min(runText.length, decimalIndex - consumed);
 		if (take > 0) {
 			const horizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale);
-			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * horizontalScaleFactor;
+			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * horizontalScaleFactor;
 		}
 		consumed += runText.length;
 	}
@@ -1113,7 +1159,7 @@ function applyLetterSpacingToMeasuredWidth(width, text, letterSpacing) {
 }
 function createTextMeasurer(doc) {
 	const ctx = doc.createElement("canvas").getContext("2d");
-	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
+	return (text, fontSize = 11, fontFamily = DEFAULT_FONT_FAMILY, style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
 		ctx.fontKerning = getFontKerningMode(style);
 		const fontString = (family, size, bold, italic, alternateFamily) => {
@@ -1131,9 +1177,9 @@ function createTextMeasurer(doc) {
 			ctx.font = complexFont;
 			return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
 		}
-		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasCjk(text) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
+		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasEastAsiaSlotText(text, style.eastAsiaHint) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
 			let segmentedWidth = 0;
-			for (const segment of segmentByScript(text)) {
+			for (const segment of segmentByScript(text, style.eastAsiaHint)) {
 				if (segment.script === SCRIPT_CLASS.eastAsia && style.eastAsiaFontFamily) ctx.font = fontString(style.eastAsiaFontFamily, fontSize, style.bold, style.italic, style.eastAsiaAlternateFontFamily);
 				else if (segment.script === SCRIPT_CLASS.complex) ctx.font = complexFont;
 				else ctx.font = baseFont;
@@ -1189,7 +1235,7 @@ function renderLine(block, line, alignment, doc, options) {
 		if (collapsedLeadingSpaceRuns.has(run)) runEl.dataset["collapsedLeadingSpaces"] = "true";
 		if (collapsedTrailingSpaceRuns.has(run)) runEl.dataset["collapsedTrailingSpaces"] = "true";
 		if (isCollapsedLineEdgeSpaceRun(run)) {
-			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Calibri", runMeasureStyle(run)) ?? 0) * getHorizontalScaleFactor(run.horizontalScale);
+			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Times New Roman", runMeasureStyle(run)) ?? 0) * getHorizontalScaleFactor(run.horizontalScale);
 			runEl.dataset["collapsedSpaceAdvance"] = String(spaceAdvance);
 			runEl.style.fontSize = "0";
 			runEl.style.letterSpacing = "0";
@@ -1340,7 +1386,8 @@ function renderLine(block, line, alignment, doc, options) {
 			}
 			let tabWidth = tabResult.width;
 			const landsOnLeftIndent = tabResult.alignment === "start" && tabLeftIndentPx > 0 && Math.abs(currentX + tabWidth - tabLeftIndentPx) <= RIGHT_EDGE_EPSILON_PX;
-			if (!preservesAuthoredEndStop && !landsOnLeftIndent && lineRightEdgeX !== void 0 && canClampTabToRightEdge(tabResult.alignment, i > 0, runsForLine.slice(0, i).some(isTabRun), options?.isLastLine === true) && currentX + tabWidth + followingWidthForCheck > lineRightEdgeX) tabWidth = Math.max(1, lineRightEdgeX - currentX - followingWidthForCheck);
+			const followingContentEndsOnLine = options?.isLastLine === true || runsForLine.slice(i + 1).some((next) => isTabRun(next) || isLineBreakRun(next));
+			if (!(preservesAuthoredEndStop || activeContentRightEdge !== void 0 && tabResult.explicit === true && followingContentEndsOnLine && authoredEndpoint <= activeContentRightEdge + RIGHT_EDGE_EPSILON_PX) && !landsOnLeftIndent && lineRightEdgeX !== void 0 && canClampTabToRightEdge(tabResult.alignment, i > 0, runsForLine.slice(0, i).some(isTabRun), options?.isLastLine === true) && currentX + tabWidth + followingWidthForCheck > lineRightEdgeX) tabWidth = Math.max(1, lineRightEdgeX - currentX - followingWidthForCheck);
 			const tabEl = renderTabRun(run, doc, tabWidth, tabResult.leader);
 			lineEl.append(tabEl);
 			currentX += tabWidth;
@@ -1350,7 +1397,7 @@ function renderLine(block, line, alignment, doc, options) {
 			if (isCollapsedLineEdgeSpaceRun(run)) continue;
 			if (!measureText) continue;
 			const fontSize = run.fontSize || 11;
-			const fontFamily = run.fontFamily || "Calibri";
+			const fontFamily = run.fontFamily || "Times New Roman";
 			const measuredWidth = measureText(run.allCaps ? run.text.toLocaleUpperCase() : run.text, fontSize, fontFamily, runMeasureStyle(run));
 			const runContractionPx = runVisualSpaceContraction({
 				text: run.text,
@@ -1383,7 +1430,7 @@ function renderLine(block, line, alignment, doc, options) {
 			if (!measureText) continue;
 			const fieldText = resolveFieldText(run, options.context);
 			const fontSize = run.fontSize || 11;
-			const fontFamily = run.fontFamily || "Calibri";
+			const fontFamily = run.fontFamily || "Times New Roman";
 			const measuredWidth = measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, fontSize, fontFamily, runMeasureStyle(run));
 			const runContractionPx = runVisualSpaceContraction({
 				text: fieldText,
@@ -1628,6 +1675,8 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	if (formatting.bold !== void 0) span.style.fontWeight = formatting.bold ? "700" : "normal";
 	if (formatting.italic !== void 0) span.style.fontStyle = formatting.italic ? "italic" : "normal";
 	if (formatting.rtl !== void 0) span.dir = formatting.rtl ? "rtl" : "ltr";
+	const markerColor = revision ? void 0 : getRenderableListMarkerColor(formatting.color);
+	if (markerColor) setAuthoredTextColor(span.style, markerColor);
 	span.style.textAlign = physicalStart;
 	span.style.textAlignLast = physicalStart;
 	span.style.boxSizing = "border-box";
@@ -1673,4 +1722,4 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	return span;
 }
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export { PARAGRAPH_CLASS_NAMES, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableListMarkerColor, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };

package/dist/layout-painter/renderTable.js

@@ -1,7 +1,7 @@
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "../layout-engine/measure/tableCellFloating.js";
 import { createTableCellFlowState, finishTableCellFlow, placeTableCellBlock } from "../layout-engine/measure/tableCellFlow.js";
-import { buildTableCellGrid, buildTableCellPlacements, getSourceCellAt } from "../layout-engine/measure/tableCellGrid.js";
+import { buildTableCellGrid, buildTableCellPlacements, getSourceCellAt, getTableCellSpacingInsetsY } from "../layout-engine/measure/tableCellGrid.js";
 import { tableFragmentBottomBorders } from "../layout-engine/measure/tableFragmentBorderGeometry.js";
 import { resolveTableInlineOffset, resolveTableInlinePlacement } from "../layout-engine/measure/tableInlinePlacement.js";
 import { isFloatingImageRun, isFloatingTextBoxBlock, resolveTableCellPadding, tableColumnsArePinned } from "../layout-engine/types.js";
@@ -293,7 +293,8 @@ function renderNestedTable(block, measure, context, doc, frameWidth = context.co
 	const cellPlacements = buildTableCellPlacements({
 		grid: cellGrid,
 		columnWidths: measure.columnWidths,
-		bidi: block.bidi === true
+		bidi: block.bidi === true,
+		cellSpacing: block.cellSpacing
 	});
 	let y = 0;
 	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
@@ -318,6 +319,7 @@ function renderNestedTable(block, measure, context, doc, frameWidth = context.co
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			inlineOffset: resolveTableInlineOffset({
 				table: block,
 				rowJustification: row.justification,
@@ -375,12 +377,12 @@ function renderCellDiagonalBorder({ border, direction, cellWidth, cellHeight, do
 	}
 	return line;
 }
-function renderTableCell({ cell, cellMeasure, x, width, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
+function renderTableCell({ cell, cellMeasure, x, y = 0, width, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
 	const cellEl = doc.createElement("div");
 	cellEl.className = TABLE_CLASS_NAMES.cell;
 	cellEl.style.position = "absolute";
 	cellEl.style.left = `${x}px`;
-	cellEl.style.top = "0";
+	cellEl.style.top = `${y}px`;
 	cellEl.style.width = `${width}px`;
 	cellEl.style.height = `${rowHeight}px`;
 	cellEl.style.overflow = "hidden";
@@ -499,7 +501,8 @@ const continuationRowBottomBorderOffsets = (fragment, block, measure, cellGrid)
 		snapAfterRow
 	});
 };
-function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, contentClip, pageContentPosition, inlineOffset = 0, bottomBorderOffset = 0 }) {
+function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, cellSpacing, contentClip, pageContentPosition, inlineOffset = 0, bottomBorderOffset = 0 }) {
+	const bordersSeparated = (cellSpacing ?? 0) > 0;
 	const rowEl = doc.createElement("div");
 	rowEl.className = TABLE_CLASS_NAMES.row;
 	rowEl.style.position = "absolute";
@@ -530,15 +533,22 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 		const isLastCol = bidi ? atLogicalStart : atLogicalEnd;
 		const aboveCell = getSourceCellAt(cellGrid, rowIndex - 1, columnIndex);
 		const leftCell = getSourceCellAt(cellGrid, rowIndex, bidi ? columnIndex + colSpan : columnIndex - 1);
-		const drawTop = isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
-		const drawLeft = isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
+		const drawTop = bordersSeparated || isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
+		const drawLeft = bordersSeparated || isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
+		const spacing = getTableCellSpacingInsetsY(cellSpacing, rowIndex, rowSpan, totalRows);
+		const boxHeight = Math.max(0, cellHeight - spacing.top - spacing.bottom);
+		const boxClip = contentClip ? {
+			top: contentClip.top - spacing.top,
+			bottom: contentClip.bottom - spacing.top
+		} : void 0;
 		const paintBottomBorderSeparately = bottomBorderOffset > 0 && hasVisibleBorder(cell.borders?.bottom);
 		const cellEl = renderTableCell({
 			cell,
 			cellMeasure,
 			x: cellLeft,
+			y: spacing.top,
 			width,
-			rowHeight: cellHeight,
+			rowHeight: boxHeight,
 			borderFlags: {
 				drawTop,
 				drawBottom: !paintBottomBorderSeparately,
@@ -549,11 +559,11 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			columnsPinned,
 			context,
 			doc,
-			...contentClip ? { contentClip } : {},
+			...boxClip ? { contentClip: boxClip } : {},
 			...pageContentPosition ? { pageContentPosition: {
 				geometry: pageContentPosition.geometry,
 				x: pageContentPosition.x + inlineOffset + cellLeft,
-				y: pageContentPosition.y
+				y: pageContentPosition.y + spacing.top
 			} } : {}
 		});
 		cellEl.dataset["cellIndex"] = String(cellIndex);
@@ -565,9 +575,9 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			bottomBorderEl.className = CELL_BOTTOM_BORDER_CLASS;
 			bottomBorderEl.style.position = "absolute";
 			bottomBorderEl.style.left = `${cellLeft}px`;
-			bottomBorderEl.style.top = "0";
+			bottomBorderEl.style.top = `${spacing.top}px`;
 			bottomBorderEl.style.width = `${width}px`;
-			bottomBorderEl.style.height = `${cellHeight + bottomBorderOffset}px`;
+			bottomBorderEl.style.height = `${boxHeight + bottomBorderOffset}px`;
 			bottomBorderEl.style.boxSizing = "border-box";
 			bottomBorderEl.style.pointerEvents = "none";
 			bottomBorderEl.style.zIndex = "1";
@@ -637,7 +647,8 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 	const cellPlacements = buildTableCellPlacements({
 		grid: cellGrid,
 		columnWidths: measure.columnWidths,
-		bidi: block.bidi === true
+		bidi: block.bidi === true,
+		cellSpacing: block.cellSpacing
 	});
 	const contentRowBottomBorderOffsets = continuationRowBottomBorderOffsets(fragment, block, measure, cellGrid);
 	const headerRowCount = fragment.headerRowCount ?? 0;
@@ -665,6 +676,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			...tablePageContentPosition ? { pageContentPosition: {
 				...tablePageContentPosition,
 				y: tablePageContentPosition.y + y
@@ -718,6 +730,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			bottomBorderOffset: contentRowBottomBorderOffsets[rowIndex - fragment.fromRow] ?? 0,
 			...contentClip ? { contentClip } : {},
 			...tablePageContentPosition ? { pageContentPosition: {

package/dist/layout-painter/renderTextBox.d.ts

@@ -1,4 +1,4 @@
-import { TableBlock, TableMeasure, TextBoxBlock, TextBoxFragment, TextBoxMeasure } from "../layout-engine/types.js";
+import { TableBlock, TableMeasure, TextBoxBlock, TextBoxFragment, TextBoxGradientFill, TextBoxMeasure } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
 //#region src/layout-painter/renderTextBox.d.ts
 /**
@@ -14,9 +14,19 @@ type RenderTextBoxFragmentOptions = {
   document?: Document;
   renderTable?: (block: TableBlock, measure: TableMeasure, context: RenderContext, document: Document, frameWidth?: number) => HTMLElement;
 };
+/**
+ * The CSS angle of a DrawingML linear gradient over a `width` x `height` box.
+ *
+ * DrawingML measures `a:lin@ang` clockwise from the positive x axis; CSS
+ * measures clockwise from "to top", a quarter turn earlier. A `scaled` angle is
+ * stated in the unit square: stretching that square to the box keeps each
+ * isoline through the same corners, so the gradient runs perpendicular to the
+ * stretched isoline rather than along the stated angle.
+ */
+declare function cssLinearGradientAngle(fill: Pick<TextBoxGradientFill, "angle" | "scaled">, width: number, height: number): number;
 /**
  * Render a text box fragment to DOM
  */
 declare function renderTextBoxFragment(fragment: TextBoxFragment, block: TextBoxBlock, measure: TextBoxMeasure, context: RenderContext, options?: RenderTextBoxFragmentOptions): HTMLElement;
 //#endregion
-export { RenderTextBoxFragmentOptions, TEXTBOX_CLASS_NAMES, renderTextBoxFragment };
+export { RenderTextBoxFragmentOptions, TEXTBOX_CLASS_NAMES, cssLinearGradientAngle, renderTextBoxFragment };

package/dist/layout-painter/renderTextBox.js

@@ -10,7 +10,7 @@ import { panic } from "better-result";
 * Text Box Renderer
 *
 * Renders text box fragments to DOM. Handles:
-* - Background fill color
+* - Background fill color or linear gradient
 * - Border/outline
 * - Internal padding (margins)
 * - Block content inside the box (using pre-measured data)
@@ -20,6 +20,29 @@ import { panic } from "better-result";
 */
 const TEXTBOX_CLASS_NAMES = { textBox: "layout-textbox" };
 /**
+* The CSS angle of a DrawingML linear gradient over a `width` x `height` box.
+*
+* DrawingML measures `a:lin@ang` clockwise from the positive x axis; CSS
+* measures clockwise from "to top", a quarter turn earlier. A `scaled` angle is
+* stated in the unit square: stretching that square to the box keeps each
+* isoline through the same corners, so the gradient runs perpendicular to the
+* stretched isoline rather than along the stated angle.
+*/
+function cssLinearGradientAngle(fill, width, height) {
+	const radians = fill.angle * Math.PI / 180;
+	return ((90 + (fill.scaled && width > 0 && height > 0 ? Math.atan2(width * Math.sin(radians), height * Math.cos(radians)) : radians) * 180 / Math.PI) % 360 + 360) % 360;
+}
+const formatCssNumber = (value) => String(Math.round(value * 1e3) / 1e3);
+function paintGradientFill(style, fill, width, height) {
+	const [first] = fill.stops;
+	if (first === void 0) return;
+	if (fill.stops.length === 1) {
+		setAuthoredBackgroundColor(style, first.color);
+		return;
+	}
+	style.backgroundImage = `linear-gradient(${formatCssNumber(cssLinearGradientAngle(fill, width, height))}deg, ${fill.stops.map((stop) => `${stop.color} ${formatCssNumber(stop.offset * 100)}%`).join(", ")})`;
+}
+/**
 * Render a text box fragment to DOM
 */
 function renderTextBoxFragment(fragment, block, measure, context, options = {}) {
@@ -32,6 +55,7 @@ function renderTextBoxFragment(fragment, block, measure, context, options = {})
 	containerEl.style.overflow = block.textWrap === "none" ? "visible" : "hidden";
 	containerEl.style.boxSizing = "border-box";
 	if (block.fillColor) setAuthoredBackgroundColor(containerEl.style, block.fillColor);
+	else if (block.fillGradient) paintGradientFill(containerEl.style, block.fillGradient, fragment.width, fragment.height);
 	const outlineDash = presetDashForOutlineAttr(block.outlineStyle) ?? "solid";
 	if (block.outlineWidth && block.outlineWidth > 0 && outlineDash !== "none") {
 		const color = block.outlineColor || "#000000";
@@ -93,4 +117,4 @@ function renderTextBoxFragment(fragment, block, measure, context, options = {})
 	return containerEl;
 }
 //#endregion
-export { TEXTBOX_CLASS_NAMES, renderTextBoxFragment };
+export { TEXTBOX_CLASS_NAMES, cssLinearGradientAngle, renderTextBoxFragment };

package/dist/prosemirror/alternateContentAttrs.d.ts

@@ -0,0 +1,9 @@
+import { AlternateContentAttrs } from "./schema/nodes.js";
+import { Node } from "prosemirror-model";
+//#region src/prosemirror/alternateContentAttrs.d.ts
+/** Attach a captured `mc:AlternateContent` to a freshly projected node. */
+declare const withAlternateContent: (node: Node, xml: string | undefined) => Node;
+/** The captured element, while the node is still the one it was attached to. */
+declare const unchangedAlternateContentXml: (node: Node, captured: AlternateContentAttrs | undefined) => string | undefined;
+//#endregion
+export { unchangedAlternateContentXml, withAlternateContent };

package/dist/prosemirror/alternateContentAttrs.js

@@ -0,0 +1,35 @@
+import { canonicalJson } from "../utils/canonicalJson.js";
+//#region src/prosemirror/alternateContentAttrs.ts
+const ALTERNATE_CONTENT_ATTR = "_docxAlternateContent";
+/**
+* What the node says about the shape: its attributes and, for a text box, its
+* content. Marks are left out; they carry the run's properties, which sit
+* outside `mc:AlternateContent`.
+*
+* The projection from the model is lossy, so the node is compared with itself
+* as it was projected rather than the rebuilt shape with the parsed one: a
+* round trip that changed nothing would otherwise read as an edit.
+*/
+const nodeFingerprint = (node) => {
+	const { [ALTERNATE_CONTENT_ATTR]: _captured, ...attrs } = node.attrs;
+	return canonicalJson({
+		attrs,
+		content: node.content.toJSON()
+	});
+};
+/** Attach a captured `mc:AlternateContent` to a freshly projected node. */
+const withAlternateContent = (node, xml) => {
+	if (xml === void 0) return node;
+	const alternateContent = {
+		xml,
+		fingerprint: nodeFingerprint(node)
+	};
+	return node.type.create({
+		...node.attrs,
+		[ALTERNATE_CONTENT_ATTR]: alternateContent
+	}, node.content, node.marks);
+};
+/** The captured element, while the node is still the one it was attached to. */
+const unchangedAlternateContentXml = (node, captured) => captured !== void 0 && captured.fingerprint === nodeFingerprint(node) ? captured.xml : void 0;
+//#endregion
+export { unchangedAlternateContentXml, withAlternateContent };

package/dist/prosemirror/attrs/index.d.ts

@@ -4,18 +4,18 @@ import "../schema/index.js";
 import { Mark, Node } from "prosemirror-model";
 //#region src/prosemirror/attrs/index.d.ts
 type ProseMirrorAttrIssue = {
-  path: string;
-  message: string;
+  readonly path: string;
+  readonly message: string;
 };
 type ReadProseMirrorAttrsResult<T> = {
   ok: true;
   value: T;
 } | {
   ok: false;
-  issues: ProseMirrorAttrIssue[];
+  issues: readonly ProseMirrorAttrIssue[];
 };
-declare const readParagraphAttrs: (node: Node) => ReadProseMirrorAttrsResult<ParagraphAttrs>;
-declare const expectParagraphAttrs: (node: Node) => ParagraphAttrs;
+declare const readParagraphAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<ParagraphAttrs>>;
+declare const expectParagraphAttrs: (node: Node) => Readonly<ParagraphAttrs>;
 declare const readHardBreakAttrs: (node: Node) => ReadProseMirrorAttrsResult<HardBreakAttrs>;
 declare const expectHardBreakAttrs: (node: Node) => HardBreakAttrs;
 declare const readPageBreakRunAttrs: (node: Node) => ReadProseMirrorAttrsResult<PageBreakRunAttrs>;
@@ -28,10 +28,10 @@ declare const readPreservedXmlAttrs: (node: Node) => ReadProseMirrorAttrsResult<
 declare const expectPreservedXmlAttrs: (node: Node) => PreservedXmlAttrs;
 declare const readPreservedBlockAttrs: (node: Node) => ReadProseMirrorAttrsResult<PreservedBlockAttrs>;
 declare const expectPreservedBlockAttrs: (node: Node) => PreservedBlockAttrs;
-declare const readTableAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableAttrs>;
-declare const expectTableAttrs: (node: Node) => TableAttrs;
-declare const readTableRowAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableRowAttrs>;
-declare const expectTableRowAttrs: (node: Node) => TableRowAttrs;
+declare const readTableAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<TableAttrs>>;
+declare const expectTableAttrs: (node: Node) => Readonly<TableAttrs>;
+declare const readTableRowAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<TableRowAttrs>>;
+declare const expectTableRowAttrs: (node: Node) => Readonly<TableRowAttrs>;
 declare const readTableCellAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableCellAttrs>;
 declare const expectTableCellAttrs: (node: Node) => TableCellAttrs;
 declare const readImageAttrs: (node: Node) => ReadProseMirrorAttrsResult<ImageAttrs>;