@stll/folio-core 0.7.0 → 0.9.0

package/dist/layout-painter/anchoredImagePosition.js

@@ -0,0 +1,95 @@
+import { emuToPixels } from "./renderUtils.js";
+//#region src/layout-painter/anchoredImagePosition.ts
+function resolveHorizontalBand(relativeTo, geometry) {
+	switch (relativeTo) {
+		case "page": return {
+			baseX: -geometry.marginLeft,
+			bandWidth: geometry.pageWidth
+		};
+		case "leftMargin":
+		case "insideMargin": return {
+			baseX: -geometry.marginLeft,
+			bandWidth: geometry.marginLeft
+		};
+		case "rightMargin":
+		case "outsideMargin": return {
+			baseX: geometry.contentWidth,
+			bandWidth: geometry.marginRight
+		};
+		case "character": return {
+			baseX: 0,
+			bandWidth: 0
+		};
+		default: return {
+			baseX: 0,
+			bandWidth: geometry.contentWidth
+		};
+	}
+}
+function resolveVerticalBand(relativeTo, fragmentY, geometry) {
+	switch (relativeTo) {
+		case "page": return {
+			baseY: -geometry.marginTop,
+			bandHeight: geometry.pageHeight
+		};
+		case "topMargin": return {
+			baseY: -geometry.marginTop,
+			bandHeight: geometry.marginTop
+		};
+		case "bottomMargin": return {
+			baseY: geometry.contentHeight,
+			bandHeight: geometry.marginBottom
+		};
+		case "paragraph":
+		case "line": return {
+			baseY: fragmentY,
+			bandHeight: 0
+		};
+		default: return {
+			baseY: 0,
+			bandHeight: geometry.contentHeight
+		};
+	}
+}
+/** Resolve an anchored image into page-content-relative coordinates. */
+function resolveAnchoredImagePosition(imgRun, fragmentY, geometry) {
+	const position = imgRun.position;
+	const contentWidth = geometry.contentWidth;
+	let side = "left";
+	let x = 0;
+	if (position?.horizontal) {
+		const h = position.horizontal;
+		const { baseX, bandWidth } = resolveHorizontalBand(h.relativeTo, geometry);
+		const horizontalHasBand = h.relativeTo !== "character";
+		if (h.align === "right" || h.align === "outside") {
+			side = "right";
+			x = horizontalHasBand ? baseX + bandWidth - imgRun.width : 0;
+		} else if (h.align === "left" || h.align === "inside") x = baseX;
+		else if (h.align === "center") x = horizontalHasBand ? baseX + (bandWidth - imgRun.width) / 2 : 0;
+		else if (h.posOffset !== void 0) {
+			x = baseX + emuToPixels(h.posOffset);
+			side = x > contentWidth / 2 ? "right" : "left";
+		} else x = baseX;
+	} else if (imgRun.cssFloat === "right") {
+		side = "right";
+		x = contentWidth - imgRun.width;
+	}
+	let y;
+	if (position?.vertical) {
+		const v = position.vertical;
+		const { baseY, bandHeight } = resolveVerticalBand(v.relativeTo, fragmentY, geometry);
+		const verticalHasBand = v.relativeTo !== "paragraph" && v.relativeTo !== "line";
+		if (v.align === "top" || v.align === "inside") y = baseY;
+		else if (v.align === "center") y = verticalHasBand ? baseY + (bandHeight - imgRun.height) / 2 : fragmentY;
+		else if (v.align === "bottom" || v.align === "outside") y = verticalHasBand ? baseY + bandHeight - imgRun.height : fragmentY;
+		else if (v.posOffset !== void 0) y = baseY + emuToPixels(v.posOffset);
+		else y = verticalHasBand ? baseY : fragmentY;
+	} else y = fragmentY;
+	return {
+		x,
+		y,
+		side
+	};
+}
+//#endregion
+export { resolveAnchoredImagePosition };

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

@@ -0,0 +1,23 @@
+import { BorderStyle, ParagraphBorders } from "../layout-engine/types.js";
+
+//#region src/layout-painter/borderStroke.d.ts
+type CssBorderStroke = {
+  color: string;
+  style: string;
+  width: number;
+};
+/**
+ * Preserve the optical weight of authored subpixel borders. CSS quantizes a
+ * fractional border width to one device pixel, so its color carries the
+ * fractional coverage while layout keeps the authored width.
+ */
+declare const resolveCssBorderStroke: (border: Pick<BorderStyle, "color" | "style" | "width">) => CssBorderStroke;
+declare const borderStrokeToCss: (border: Pick<BorderStyle, "color" | "style" | "width">) => string;
+type ParagraphBorderHorizontalOutsets = {
+  left: number;
+  right: number;
+};
+/** Resolve the outer horizontal edges of a paragraph border box. */
+declare const resolveParagraphBorderHorizontalOutsets: (borders: ParagraphBorders, hasHorizontalRule: boolean) => ParagraphBorderHorizontalOutsets;
+//#endregion
+export { borderStrokeToCss, resolveCssBorderStroke, resolveParagraphBorderHorizontalOutsets };

package/dist/layout-painter/borderStroke.js

@@ -0,0 +1,39 @@
+import { pointsToPixels } from "../utils/units.js";
+//#region src/layout-painter/borderStroke.ts
+const DEFAULT_BORDER_COLOR = "#000000";
+const DEFAULT_BORDER_STYLE = "solid";
+const CSS_HAIRLINE_WIDTH = 1;
+const PARAGRAPH_RULE_ENDPOINT_OUTSET = pointsToPixels(1.5);
+/**
+* Preserve the optical weight of authored subpixel borders. CSS quantizes a
+* fractional border width to one device pixel, so its color carries the
+* fractional coverage while layout keeps the authored width.
+*/
+const resolveCssBorderStroke = (border) => {
+	const authoredWidth = border.width ?? CSS_HAIRLINE_WIDTH;
+	if (authoredWidth <= 0 || authoredWidth >= CSS_HAIRLINE_WIDTH) return {
+		color: border.color ?? DEFAULT_BORDER_COLOR,
+		style: border.style ?? DEFAULT_BORDER_STYLE,
+		width: Math.max(CSS_HAIRLINE_WIDTH, authoredWidth)
+	};
+	const coveragePercent = Number((authoredWidth * 100).toFixed(4));
+	return {
+		color: `color-mix(in srgb, ${border.color ?? DEFAULT_BORDER_COLOR} ${coveragePercent}%, transparent)`,
+		style: border.style ?? DEFAULT_BORDER_STYLE,
+		width: CSS_HAIRLINE_WIDTH
+	};
+};
+const borderStrokeToCss = (border) => {
+	const stroke = resolveCssBorderStroke(border);
+	return `${stroke.width}px ${stroke.style} ${stroke.color}`;
+};
+/** Resolve the outer horizontal edges of a paragraph border box. */
+const resolveParagraphBorderHorizontalOutsets = (borders, hasHorizontalRule) => {
+	const ruleOutset = hasHorizontalRule ? PARAGRAPH_RULE_ENDPOINT_OUTSET : 0;
+	return {
+		left: borders.left ? (borders.left.space ?? 0) + (borders.left.width ?? 0) : ruleOutset,
+		right: borders.right ? (borders.right.space ?? 0) + (borders.right.width ?? 0) : ruleOutset
+	};
+};
+//#endregion
+export { borderStrokeToCss, resolveCssBorderStroke, resolveParagraphBorderHorizontalOutsets };

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

@@ -10,7 +10,7 @@ declare const IMAGE_CLASS_NAMES: {
   imageAnchored: string;
 };
 /**
- * Structural shape required to apply Word's per-image visual attributes:
+ * Structural shape required to apply OOXML per-image visual attributes:
  * `wp:srcRect` crop fractions and `a:alphaModFix` opacity. `ImageRun` and
  * `ImageBlock` both satisfy this, so callers don't need an adapter.
  */
@@ -32,10 +32,11 @@ type ImageVisualAttrs = {
  * `0`) — that bug otherwise hides every plain image behind `opacity: 0`.
  */
 declare function hasImageVisualAttrs(v: ImageVisualAttrs): boolean;
+declare function hasImageCrop(v: ImageVisualAttrs): boolean;
 /**
- * Apply Word's `<a:srcRect>` crop to an `<img>` whose parent already has
+ * Apply an OOXML `<a:srcRect>` crop to an `<img>` whose parent already has
  * `overflow: hidden` and is sized to the *visible* (cropped) dimensions
- * (this matches `wp:extent` semantics: in Word the extent is the cropped
+ * (this matches `wp:extent` semantics: the extent is the cropped
  * frame, with `<a:stretch><a:fillRect/>` stretching the cropped source to
  * fill it).
  *
@@ -85,4 +86,4 @@ type RenderImageFragmentOptions = {
  */
 declare function renderImageFragment(fragment: ImageFragment, block: ImageBlock, _measure: ImageMeasure, _context: RenderContext, options?: RenderImageFragmentOptions): HTMLElement;
 //#endregion
-export { IMAGE_CLASS_NAMES, ImageVisualAttrs, RenderImageFragmentOptions, applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };
+export { IMAGE_CLASS_NAMES, ImageVisualAttrs, RenderImageFragmentOptions, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };

package/dist/layout-painter/renderImage.js

@@ -18,12 +18,15 @@ const IMAGE_CLASS_NAMES = {
 */
 function hasImageVisualAttrs(v) {
 	if (v.opacity != null && v.opacity < 1) return true;
+	return hasImageCrop(v);
+}
+function hasImageCrop(v) {
 	return Boolean(v.cropTop || v.cropRight || v.cropBottom || v.cropLeft);
 }
 /**
-* Apply Word's `<a:srcRect>` crop to an `<img>` whose parent already has
+* Apply an OOXML `<a:srcRect>` crop to an `<img>` whose parent already has
 * `overflow: hidden` and is sized to the *visible* (cropped) dimensions
-* (this matches `wp:extent` semantics: in Word the extent is the cropped
+* (this matches `wp:extent` semantics: the extent is the cropped
 * frame, with `<a:stretch><a:fillRect/>` stretching the cropped source to
 * fill it).
 *
@@ -54,8 +57,19 @@ function applyImageVisualAttrs(img, v) {
 	const fh = 1 / remainingH;
 	img.style.width = `${fw * 100}%`;
 	img.style.height = `${fh * 100}%`;
+	img.style.maxWidth = "none";
+	img.style.maxHeight = "none";
 	img.style.marginLeft = `${-left * fw * 100}%`;
-	img.style.marginTop = `${-top * fh * 100}%`;
+	const existingTransform = img.style.transform;
+	if (existingTransform) {
+		const visibleCenterX = (left + 1 - right) * 50;
+		const visibleCenterY = (top + 1 - bottom) * 50;
+		img.style.transformOrigin = `${visibleCenterX}% ${visibleCenterY}%`;
+	}
+	if (top !== 0) {
+		const cropTransform = `translateY(${-top * 100}%)`;
+		img.style.transform = existingTransform ? `${existingTransform} ${cropTransform}` : cropTransform;
+	}
 	img.style.objectFit = "fill";
 }
 /**
@@ -127,4 +141,4 @@ function renderImageFragment(fragment, block, _measure, _context, options = {})
 	return containerEl;
 }
 //#endregion
-export { IMAGE_CLASS_NAMES, applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };
+export { IMAGE_CLASS_NAMES, applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs, renderImageFragment, wrapImageWithCrop };

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

@@ -1,6 +1,7 @@
 import { document_d_exports } from "../types/document.js";
 import { FootnoteContent, HeaderFooterContent, ImageRun, Page, isFloatingImageRun } from "../layout-engine/types.js";
 import { RenderContext, emuToPixels } from "./renderUtils.js";
+import { AnchoredImagePosition, PageGeometry } from "./anchoredImagePosition.js";
 import { BlockLookup } from "./index.js";
 
 //#region src/layout-painter/renderPage.d.ts
@@ -157,32 +158,6 @@ declare function resolveHeaderFooterFloatLeft(width: number, h: {
   align?: string;
   alignment?: string;
 } | undefined, layout: HeaderFooterLayoutInfo): string;
-/**
- * Page geometry needed to translate OOXML `relativeFrom` anchors into
- * painter coordinates. All values are in CSS pixels. Mirrors the upstream
- * (eigenpal docx-editor) `PageGeometry` shape introduced in #424 so the
- * anchor math stays identical across the two codebases.
- */
-type PageGeometry = {
-  pageWidth: number;
-  pageHeight: number;
-  marginLeft: number;
-  marginTop: number;
-  marginRight: number;
-  marginBottom: number;
-  contentWidth: number;
-  contentHeight: number;
-};
-/**
- * Resolved on-page coordinates for an anchored floating image.
- * `x` / `y` are in content-area-relative pixels (content origin = (0, 0)).
- * `side` feeds the text-wrap exclusion zone helper.
- */
-type AnchoredImagePosition = {
-  x: number;
-  y: number;
-  side: "left" | "right";
-};
 /**
  * Resolve the on-page coordinates of an anchored floating image.
  *
@@ -290,4 +265,4 @@ declare function findPageShellForPmPos(container: HTMLElement, pmPos: number): {
   isExact: boolean;
 } | null;
 //#endregion
-export { AnchoredImagePosition, FootnoteRenderItem, type HeaderFooterContent, HeaderFooterLayoutInfo, PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, PageFloatingImage, PageGeometry, PainterPaintedDetail, type RenderContext, RenderPageOptions, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, floatingTableReservesBand, getDefaultPageFontFamily, isFloatingImageRun, renderAllPagesNow, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft };
+export { type AnchoredImagePosition, FootnoteRenderItem, type HeaderFooterContent, HeaderFooterLayoutInfo, PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, PageFloatingImage, type PageGeometry, PainterPaintedDetail, type RenderContext, RenderPageOptions, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, floatingTableReservesBand, getDefaultPageFontFamily, isFloatingImageRun, renderAllPagesNow, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft };

package/dist/layout-painter/renderPage.js

@@ -1,12 +1,13 @@
 import { eighthsToPixels, pointsToPixels } from "../utils/units.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
+import { borderToStyle } from "../utils/formatToStyle.js";
 import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
 import { rectsToFloatingZones } from "../layout-engine/measure/floatingZones.js";
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
-import { borderToStyle } from "../utils/formatToStyle.js";
+import { emuToPixels } from "./renderUtils.js";
+import { resolveAnchoredImagePosition as resolveAnchoredImagePosition$1 } from "./anchoredImagePosition.js";
 import { renderFragment } from "./renderFragment.js";
 import { applyImageVisualAttrs, hasImageVisualAttrs, renderImageFragment } from "./renderImage.js";
-import { emuToPixels } from "./renderUtils.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
 import { renderTextBoxFragment } from "./renderTextBox.js";
 import { renderTableFragment } from "./renderTable.js";
@@ -33,6 +34,7 @@ const PAGE_CLASS_NAMES = {
 	header: "layout-page-header",
 	footer: "layout-page-footer"
 };
+const HEADER_FOOTER_RULE_CLIP_MARGIN = pointsToPixels(1.5);
 const getDefaultPageFontFamily = () => resolveFontFamily("Calibri").cssFallback;
 /**
 * Apply page styles to an element
@@ -271,57 +273,6 @@ function applyFragmentStyles(element, fragment, margins) {
 	element.style.width = `${fragment.width}px`;
 	if ("height" in fragment) element.style.height = `${fragment.height}px`;
 }
-function resolveHorizontalBand(relativeTo, geometry) {
-	switch (relativeTo) {
-		case "page": return {
-			baseX: -geometry.marginLeft,
-			bandWidth: geometry.pageWidth
-		};
-		case "leftMargin":
-		case "insideMargin": return {
-			baseX: -geometry.marginLeft,
-			bandWidth: geometry.marginLeft
-		};
-		case "rightMargin":
-		case "outsideMargin": return {
-			baseX: geometry.contentWidth,
-			bandWidth: geometry.marginRight
-		};
-		case "character": return {
-			baseX: 0,
-			bandWidth: 0
-		};
-		default: return {
-			baseX: 0,
-			bandWidth: geometry.contentWidth
-		};
-	}
-}
-function resolveVerticalBand(relativeTo, fragmentY, geometry) {
-	switch (relativeTo) {
-		case "page": return {
-			baseY: -geometry.marginTop,
-			bandHeight: geometry.pageHeight
-		};
-		case "topMargin": return {
-			baseY: -geometry.marginTop,
-			bandHeight: geometry.marginTop
-		};
-		case "bottomMargin": return {
-			baseY: geometry.contentHeight,
-			bandHeight: geometry.marginBottom
-		};
-		case "paragraph":
-		case "line": return {
-			baseY: fragmentY,
-			bandHeight: 0
-		};
-		default: return {
-			baseY: 0,
-			bandHeight: geometry.contentHeight
-		};
-	}
-}
 /**
 * Resolve the on-page coordinates of an anchored floating image.
 *
@@ -337,47 +288,7 @@ function resolveVerticalBand(relativeTo, fragmentY, geometry) {
 * picked by `relativeFrom`.
 */
 function resolveAnchoredImagePosition(imgRun, fragmentY, geometry) {
-	const position = imgRun.position;
-	const contentWidth = geometry.contentWidth;
-	let side = "left";
-	let x = 0;
-	if (position?.horizontal) {
-		const h = position.horizontal;
-		const { baseX, bandWidth } = resolveHorizontalBand(h.relativeTo, geometry);
-		const horizontalHasBand = h.relativeTo !== "character";
-		if (h.align === "right" || h.align === "outside") {
-			side = "right";
-			x = horizontalHasBand ? baseX + bandWidth - imgRun.width : 0;
-		} else if (h.align === "left" || h.align === "inside") {
-			side = "left";
-			x = baseX;
-		} else if (h.align === "center") {
-			side = "left";
-			x = horizontalHasBand ? baseX + (bandWidth - imgRun.width) / 2 : 0;
-		} else if (h.posOffset !== void 0) {
-			x = baseX + emuToPixels(h.posOffset);
-			side = x > contentWidth / 2 ? "right" : "left";
-		} else x = baseX;
-	} else if (imgRun.cssFloat === "right") {
-		side = "right";
-		x = contentWidth - imgRun.width;
-	}
-	let y;
-	if (position?.vertical) {
-		const v = position.vertical;
-		const { baseY, bandHeight } = resolveVerticalBand(v.relativeTo, fragmentY, geometry);
-		const verticalHasBand = v.relativeTo !== "paragraph" && v.relativeTo !== "line";
-		if (v.align === "top" || v.align === "inside") y = baseY;
-		else if (v.align === "center") y = verticalHasBand ? baseY + (bandHeight - imgRun.height) / 2 : fragmentY;
-		else if (v.align === "bottom" || v.align === "outside") y = verticalHasBand ? baseY + bandHeight - imgRun.height : fragmentY;
-		else if (v.posOffset !== void 0) y = baseY + emuToPixels(v.posOffset);
-		else y = verticalHasBand ? baseY : fragmentY;
-	} else y = fragmentY;
-	return {
-		x,
-		y,
-		side
-	};
+	return resolveAnchoredImagePosition$1(imgRun, fragmentY, geometry);
 }
 /**
 * Extract floating images from a paragraph block and determine their page-level positions.
@@ -1011,7 +922,10 @@ function renderPage(page, context, options = {}) {
 				});
 				prevParagraphBorders = paragraphBlock.attrs?.borders;
 			} else if (fragment.kind === "table" && blockData?.block.kind === "table" && blockData.measure.kind === "table") {
-				fragmentEl = renderTableFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
+				fragmentEl = renderTableFragment(fragment, blockData.block, blockData.measure, fragmentContext, {
+					document: doc,
+					pageGeometry
+				});
 				prevParagraphBorders = void 0;
 			} else if (fragment.kind === "image" && blockData?.block.kind === "image" && blockData.measure.kind === "image") {
 				fragmentEl = renderImageFragment(fragment, blockData.block, blockData.measure, fragmentContext, { document: doc });
@@ -1086,7 +1000,6 @@ function renderPage(page, context, options = {}) {
 		headerEl.style.width = `${headerContentWidth}px`;
 		headerEl.style.height = `${interactiveHeaderHeight}px`;
 		headerEl.style.minHeight = `${interactiveHeaderHeight}px`;
-		headerEl.style.opacity = "0.62";
 		let shouldClipHeader = !headerOverflows && headerContentFitsBox;
 		if (options.headerContent && options.headerContent.blocks.length > 0) {
 			const headerContentEl = renderHeaderFooterContent(options.headerContent, {
@@ -1107,7 +1020,8 @@ function renderPage(page, context, options = {}) {
 		}
 		if (shouldClipHeader) {
 			headerEl.style.maxHeight = `${availableHeaderHeight}px`;
-			headerEl.style.overflow = "hidden";
+			headerEl.style.overflow = "clip";
+			headerEl.style.overflowClipMargin = `${HEADER_FOOTER_RULE_CLIP_MARGIN}px`;
 		}
 		pageEl.append(headerEl);
 		moveBehindHeaderFooterElementsToPage(headerEl, pageEl, headerDistance, page.margins.left);
@@ -1132,7 +1046,6 @@ function renderPage(page, context, options = {}) {
 		footerEl.style.width = `${footerContentWidth}px`;
 		footerEl.style.height = `${interactiveFooterHeight}px`;
 		footerEl.style.minHeight = `${interactiveFooterHeight}px`;
-		footerEl.style.opacity = "0.62";
 		const footerContentFitsBox = footerVisualBottom - footerVisualTop <= interactiveFooterHeight;
 		let shouldClipFooter = !footerOverflows && footerContentFitsBox;
 		if (options.footerContent && options.footerContent.blocks.length > 0) {
@@ -1154,7 +1067,8 @@ function renderPage(page, context, options = {}) {
 		}
 		if (shouldClipFooter) {
 			footerEl.style.maxHeight = `${availableFooterHeight}px`;
-			footerEl.style.overflow = "hidden";
+			footerEl.style.overflow = "clip";
+			footerEl.style.overflowClipMargin = `${HEADER_FOOTER_RULE_CLIP_MARGIN}px`;
 		}
 		pageEl.append(footerEl);
 		moveBehindHeaderFooterElementsToPage(footerEl, pageEl, footerNaturalTop, page.margins.left);
@@ -1188,12 +1102,12 @@ function applySectionHeaderFooterOptions(page, pageOptions, options) {
 	const useEven = refs.evenAndOddHeaders === true && sectionPageNumber % 2 === 0;
 	const headerRId = (() => {
 		if (useFirst) return refs.headerFirst;
-		if (useEven && refs.headerEven) return refs.headerEven;
+		if (useEven) return refs.headerEven;
 		return refs.headerDefault;
 	})();
 	const footerRId = (() => {
 		if (useFirst) return refs.footerFirst;
-		if (useEven && refs.footerEven) return refs.footerEven;
+		if (useEven) return refs.footerEven;
 		return refs.footerDefault;
 	})();
 	if (headerRId) {

package/dist/layout-painter/renderParagraph.js

@@ -1,19 +1,22 @@
 import { parseXmlDocument } from "../docx/xmlParser.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
+import { detectBaseDirection } from "../utils/baseDirection.js";
+import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
 import "../utils/fontWeights.js";
+import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode } from "../layout-engine/measure/textMeasurementPolicy.js";
+import "../layout-engine/measure/measureHelpers.js";
 import { calculateTabWidth } from "../prosemirror/utils/tabCalculator.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { hasCjk, segmentByScript } from "../utils/scriptSegments.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
-import { getListMarkerInlineWidth } from "../layout-engine/measure/listMarkerWidth.js";
+import { getListMarkerInlineWidth, getListMarkerVisualOffset } from "../layout-engine/measure/listMarkerWidth.js";
+import { resolveImageLineAlign } from "./renderUtils.js";
 import { applySdtDataAttrs } from "./sdtBoundary.js";
 import { applyImageVisualAttrs, hasImageVisualAttrs, wrapImageWithCrop } from "./renderImage.js";
 import { ommlToMathml } from "../docx/mathToMathml.js";
 import { evaluateFieldInstruction } from "../fields/evaluateField.js";
-import { AUTHOR_COLORS, getAuthorColorIdx } from "../utils/authorColors.js";
-import { detectBaseDirection } from "../utils/baseDirection.js";
+import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { getAutomaticTextColorForBackground } from "./documentColors.js";
-import { resolveImageLineAlign } from "./renderUtils.js";
 //#region src/layout-painter/renderParagraph.ts
 /**
 * Paragraph Fragment Renderer
@@ -128,9 +131,7 @@ function applyRunStyles(element, run) {
 		element.style.transform = `scaleX(${run.horizontalScale / 100})`;
 		element.style.transformOrigin = "left center";
 	}
-	if (run.kerningMinPt && run.kerningMinPt > 0) {
-		if ((run.fontSize ?? 11) >= run.kerningMinPt) element.style.fontKerning = "normal";
-	}
+	element.style.fontKerning = getRunFontKerningMode(run, 11);
 	if (run.emboss) element.style.textShadow = "1px 1px 1px rgba(255,255,255,0.5), -1px -1px 1px rgba(0,0,0,0.3)";
 	if (run.imprint) element.style.textShadow = "-1px -1px 1px rgba(255,255,255,0.5), 1px 1px 1px rgba(0,0,0,0.3)";
 	if (run.textShadow && !run.emboss && !run.imprint) element.style.textShadow = "1px 1px 2px rgba(0,0,0,0.3)";
@@ -785,19 +786,14 @@ const startsAfterSoftWrap = (block, line) => {
 * must trigger within this slack.
 */
 const RIGHT_EDGE_EPSILON_PX = .5;
-function countShrinkableSpaces(runs) {
+function countShrinkableSpaces(runs, context) {
 	let count = 0;
-	for (const run of runs) if (isTextRun(run)) {
-		for (const char of run.text ?? "") if (char === " ") count++;
-	} else if (isFieldRun(run)) {
-		for (const char of run.fallback ?? "") if (char === " ") count++;
-	} else if (isMathRun(run)) {
-		for (const char of run.plainText ?? "") if (char === " ") count++;
-	}
+	for (const run of runs) if (isTextRun(run)) count += countCompressibleSpaces(run.text ?? "");
+	else if (isFieldRun(run)) count += countCompressibleSpaces(resolveFieldText(run, context));
 	return count;
 }
 /**
-* Build a TextMeasureStyle from a TextRun or FieldRun's relevant fields.
+* Build the shared measurement style from a paintable text run.
 */
 function runMeasureStyle(run) {
 	return {
@@ -805,7 +801,8 @@ function runMeasureStyle(run) {
 		...run.italic !== void 0 ? { italic: run.italic } : {},
 		...run.letterSpacing !== void 0 ? { letterSpacing: run.letterSpacing } : {},
 		...run.smallCaps !== void 0 ? { smallCaps: run.smallCaps } : {},
-		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {}
+		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
+		kerning: getRunFontKerningMode(run, 11) === FONT_KERNING_MODE.enabled
 	};
 }
 /**
@@ -910,6 +907,7 @@ function createTextMeasurer(doc) {
 	const ctx = doc.createElement("canvas").getContext("2d");
 	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
+		ctx.fontKerning = getFontKerningMode(style);
 		const cssFallback = resolveFontFamily(fontFamily).cssFallback;
 		const fontSizePx = fontSize * 96 / 72;
 		const fontPrefixParts = [];
@@ -996,7 +994,7 @@ function renderLine(block, line, alignment, doc, options) {
 			const firstLineHangingExpansionPx = hasVisibleListMarker ? Math.min(firstLineHangingPx, Math.max(0, options.leftIndentPx ?? 0)) : firstLineHangingPx;
 			const justifyCapacityPx = options.availableWidth + firstLineHangingExpansionPx;
 			const overfullPx = line.width - justifyCapacityPx;
-			const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)));
+			const shrinkableSpaces = countShrinkableSpaces(runsForLine.filter((run) => !isTextRun(run) || !isCollapsedLineEdgeSpaceRun(run)), options.context);
 			if (overfullPx > RIGHT_EDGE_EPSILON_PX && shrinkableSpaces > 0) {
 				lineEl.style.textAlign = "left";
 				lineEl.style.textAlignLast = "auto";
@@ -1134,6 +1132,20 @@ function renderLine(block, line, alignment, doc, options) {
 			lineEl.append(runEl);
 		}
 	}
+	if (line.discretionaryHyphen) {
+		const sourceRun = block.runs[line.discretionaryHyphen.runIndex];
+		if (sourceRun && isTextRun(sourceRun)) {
+			const hyphenRun = {
+				...sourceRun,
+				text: "-"
+			};
+			Reflect.deleteProperty(hyphenRun, "pmStart");
+			Reflect.deleteProperty(hyphenRun, "pmEnd");
+			const hyphenEl = renderTextRun(hyphenRun, doc);
+			hyphenEl.dataset["discretionaryHyphen"] = "true";
+			lineEl.append(hyphenEl);
+		}
+	}
 	const inFlowRuns = runsForLine.filter((run) => !(isImageRun(run) && isFloatingImageRun(run)));
 	const blankBreakRun = inFlowRuns.length > 0 && inFlowRuns.every(isLineBreakRun) ? inFlowRuns.find(isLineBreakRun) : void 0;
 	if (blankBreakRun?.pmStart !== void 0) {
@@ -1239,7 +1251,10 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			}
 		};
 		fragmentEl.style.boxSizing = "border-box";
-		const borderToCss = (b) => `${b.width}px ${borderStyleToCss(b.style)} ${b.color}`;
+		const borderToCss = (border) => borderStrokeToCss({
+			...border,
+			style: borderStyleToCss(border.style)
+		});
 		const groupedWithPrev = bordersFormGroup(options.prevBorders, borders);
 		const groupedWithNext = bordersFormGroup(borders, options.nextBorders);
 		const renderedTopBorder = groupedWithPrev ? borders.between : borders.top;
@@ -1249,8 +1264,9 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 		borderBox.style.position = "absolute";
 		borderBox.style.pointerEvents = "none";
 		borderBox.style.boxSizing = "border-box";
-		borderBox.style.left = `${indentLeft - (borders.left?.space ?? 0) - (borders.left?.width ?? 0)}px`;
-		borderBox.style.right = `${indentRight - (borders.right?.space ?? 0) - (borders.right?.width ?? 0)}px`;
+		const horizontalOutsets = resolveParagraphBorderHorizontalOutsets(borders, renderedTopBorder !== void 0 || renderedBottomBorder !== void 0);
+		borderBox.style.left = `${indentLeft - horizontalOutsets.left}px`;
+		borderBox.style.right = `${indentRight - horizontalOutsets.right}px`;
 		borderBox.style.top = `${-(renderedTopBorder?.space ?? 0) - (renderedTopBorder?.width ?? 0)}px`;
 		borderBox.style.bottom = `${-(renderedBottomBorder?.space ?? 0) - (renderedBottomBorder?.width ?? 0)}px`;
 		if (renderedTopBorder) borderBox.style.borderTop = borderToCss(renderedTopBorder);
@@ -1342,7 +1358,7 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			lineEl.style.paddingLeft = `${Math.max(0, markerStart)}px`;
 			lineEl.style.textIndent = "0";
 			let firstTextRun;
-			if (!block.attrs.listMarkerFontFamily || !block.attrs.listMarkerFontSize) for (let ri = line.fromRun; ri <= line.toRun; ri++) {
+			if (!block.attrs.listMarkerFontFamily || !block.attrs.listMarkerFontSize || block.attrs.listMarkerBold === void 0) for (let ri = line.fromRun; ri <= line.toRun; ri++) {
 				const r = block.runs[ri];
 				if (r && r.kind === "text") {
 					firstTextRun = r;
@@ -1351,7 +1367,8 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 			}
 			const markerFontFamily = block.attrs.listMarkerFontFamily ?? firstTextRun?.fontFamily ?? block.attrs.defaultFontFamily;
 			const markerFontSize = block.attrs.listMarkerFontSize ?? firstTextRun?.fontSize ?? block.attrs.defaultFontSize;
-			const marker = renderListMarker(block.attrs.listMarker, getListMarkerInlineWidth(block), doc, markerFontFamily, markerFontSize, block.attrs.listMarkerRevision, block.attrs.listMarkerSecondSlotOffsetTwips);
+			const markerBold = block.attrs.listMarkerBold ?? firstTextRun?.bold;
+			const marker = renderListMarker(block.attrs.listMarker, getListMarkerInlineWidth(block), getListMarkerVisualOffset(block), doc, markerFontFamily, markerFontSize, markerBold, block.attrs.listMarkerRevision, block.attrs.listMarkerSecondSlotOffsetTwips);
 			const markerMarginLeft = markerStart - Math.min(indentLeft, 0);
 			if (markerMarginLeft < 0) marker.style.marginLeft = `${markerMarginLeft}px`;
 			lineEl.prepend(marker);
@@ -1362,22 +1379,24 @@ function renderParagraphFragment(fragment, block, measure, context, options = {}
 }
 /**
 * Render a list marker element as an inline-block at the start of the first
-* body line. `minWidth` (from `getListMarkerInlineWidth`) sizes the marker
+* body line. `inlineWidth` (from `getListMarkerInlineWidth`) sizes the marker
 * so the body text aligns at the next tab stop per ECMA-376 §17.9.25 —
 * this honours `w:suff` (`tab` / `space` / `nothing`) and the document's
 * tab grid. Long markers like "1.1.1." therefore grow to the next stop
 * instead of butting against the body text.
 */
-function renderListMarker(marker, minWidth, doc, fontFamily, fontSize, revision, secondSlotOffsetTwips) {
+function renderListMarker(marker, inlineWidth, visualOffset, doc, fontFamily, fontSize, bold, revision, secondSlotOffsetTwips) {
 	const span = doc.createElement("span");
 	span.className = "layout-list-marker";
 	span.style.display = "inline-block";
 	if (fontFamily) span.style.fontFamily = resolveFontFamily(fontFamily).cssFallback;
 	if (fontSize) span.style.fontSize = `${fontSize * 96 / 72}px`;
+	if (bold !== void 0) span.style.fontWeight = bold ? "800" : "normal";
 	span.style.textAlign = "left";
 	span.style.textAlignLast = "left";
 	span.style.boxSizing = "border-box";
-	if (minWidth > 0) span.style.minWidth = `${minWidth}px`;
+	span.style.width = `${inlineWidth}px`;
+	if (visualOffset !== 0) span.style.transform = `translateX(${visualOffset}px)`;
 	if (revision) {
 		const authorIdx = getAuthorColorIdx(revision.author ?? "");
 		const authorColor = AUTHOR_COLORS[authorIdx];

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

@@ -1,5 +1,6 @@
 import { TableBlock, TableFragment, TableMeasure } from "../layout-engine/types.js";
 import { RenderContext } from "./renderUtils.js";
+import { PageGeometry } from "./anchoredImagePosition.js";
 
 //#region src/layout-painter/renderTable.d.ts
 /**
@@ -20,6 +21,7 @@ declare const TABLE_CLASS_NAMES: {
  */
 type RenderTableFragmentOptions = {
   document?: Document;
+  pageGeometry?: PageGeometry;
 };
 /**
  * Render a table fragment to DOM