@stll/folio-core 0.8.0 → 0.9.0

package/dist/layout-engine/tableRowBreak.js

@@ -1,28 +1,24 @@
-import { isFloatingTextBoxBlock } from "./types.js";
 import { measureParagraph } from "./measure/measureParagraph.js";
+import { isEmptyParagraph } from "./paragraphSpacing.js";
+import { createTableCellFlowState, placeTableCellBlock } from "./measure/tableCellFlow.js";
 import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "./measure/tableCellFloating.js";
 //#region src/layout-engine/tableRowBreak.ts
 /**
 * Table row-break geometry. Ported from eigenpal/docx-editor#698 (folio subset).
 *
-* Word lets a table row break across a page boundary ("allow row to break
-* across pages", on by default). When a row is taller than a whole page it
-* cannot fit anywhere, so the portion that fits stays and the rest continues on
-* the next page — broken between whole text lines, never through a glyph.
-* Without this folio forced the oversized row onto one page and the overflow
-* was clipped (content lost; upstream #570).
+* Table rows may break across flow regions unless `cantSplit` is set. When a
+* permitted row exceeds the current region, the portion that fits stays and
+* the rest continues in the next region, broken between whole text lines and
+* never through a glyph. This also prevents oversized rows from overflowing
+* one page and clipping content (upstream #570).
 *
 * This computes, per row, the safe break offsets (the y of every line bottom in
 * the row's cells) so the paginator can snap a break to the deepest whole line
 * that still fits. Vertically-merged cells that span into a row are not modeled
 * here yet (a separate follow-up); each row uses its own cells' content.
 */
+const BREAK_OFFSET_EPSILON = .01;
 const DEFAULT_TABLE_CELL_PADDING_TOP = 1;
-function getAtomicBlockHeight(measure) {
-	if ("totalHeight" in measure) return measure.totalHeight;
-	if ("height" in measure) return measure.height;
-	return 0;
-}
 function isInsideRange(offset, range) {
 	return offset > range.top && offset < range.bottom;
 }
@@ -39,6 +35,10 @@ function shiftCellGeometry(geometry, offset) {
 		unsafeRanges: geometry.unsafeRanges.map((range) => ({
 			top: range.top + offset,
 			bottom: range.bottom + offset
+		})),
+		suppressibleLeadingRanges: geometry.suppressibleLeadingRanges.map((range) => ({
+			top: range.top + offset,
+			bottom: range.bottom + offset
 		}))
 	};
 }
@@ -46,22 +46,28 @@ function shiftCellGeometry(geometry, offset) {
 function cellBreakGeometry(cell, measure) {
 	const bottoms = [];
 	const unsafeRanges = [];
+	const suppressibleLeadingRanges = [];
 	const cellBlocks = cell?.blocks;
 	const blockMeasures = measure.blocks;
 	const padTop = cell?.padding?.top ?? DEFAULT_TABLE_CELL_PADDING_TOP;
 	const contentWidth = getTableCellContentWidth(cell, measure);
 	const floatingZones = buildTableCellFloatingZones(cell !== void 0 ? getTableCellFloatingImages(cell, measure, contentWidth) : [], contentWidth);
-	let y = padTop;
-	let paragraphY = 0;
+	const flowState = createTableCellFlowState();
 	for (let i = 0; i < blockMeasures.length; i++) {
 		let blockMeasure = blockMeasures[i];
 		if (blockMeasure?.kind === "paragraph") {
 			const block = cellBlocks?.[i];
-			if (block?.kind === "paragraph" && floatingZones.length > 0) blockMeasure = measureParagraph(block, contentWidth, {
+			if (block?.kind !== "paragraph") continue;
+			if (floatingZones.length > 0) blockMeasure = measureParagraph(block, contentWidth, {
 				floatingZones,
-				paragraphYOffset: paragraphY
+				paragraphYOffset: placeTableCellBlock({ ...flowState }, block, blockMeasure).contentTop
+			});
+			const placement = placeTableCellBlock(flowState, block, blockMeasure);
+			if (placement.leadingSpacing > 0 && isEmptyParagraph(block)) suppressibleLeadingRanges.push({
+				top: padTop + placement.top,
+				bottom: padTop + placement.contentTop
 			});
-			const blockTop = y;
+			let y = padTop + placement.contentTop;
 			for (const line of blockMeasure.lines) {
 				y += line.floatSkipBefore ?? 0;
 				const top = y;
@@ -72,16 +78,15 @@ function cellBreakGeometry(cell, measure) {
 				});
 				bottoms.push(y);
 			}
-			y = blockTop + blockMeasure.totalHeight;
-			paragraphY += blockMeasure.totalHeight;
+			bottoms.push(padTop + flowState.height);
 		} else if (blockMeasure) {
 			const block = cellBlocks?.[i];
-			if (block?.kind === "textBox" && isFloatingTextBoxBlock(block)) continue;
-			const blockHeight = getAtomicBlockHeight(blockMeasure);
+			if (!block) continue;
+			const placement = placeTableCellBlock(flowState, block, blockMeasure);
+			const blockHeight = placement.contentHeight;
 			if (blockHeight > 0) {
-				const top = y;
-				y += blockHeight;
-				paragraphY += blockHeight;
+				const top = padTop + placement.contentTop;
+				const y = top + blockHeight;
 				unsafeRanges.push({
 					top,
 					bottom: y
@@ -92,9 +97,26 @@ function cellBreakGeometry(cell, measure) {
 	}
 	return {
 		bottoms,
-		unsafeRanges
+		unsafeRanges,
+		suppressibleLeadingRanges
 	};
 }
+const continuationSkipForCell = (geometry, offset) => {
+	if (!geometry.unsafeRanges.some(({ bottom }) => bottom > offset + BREAK_OFFSET_EPSILON)) return;
+	const leadingRange = geometry.suppressibleLeadingRanges.find(({ top, bottom }) => top <= offset + BREAK_OFFSET_EPSILON && bottom > offset + BREAK_OFFSET_EPSILON);
+	return leadingRange ? leadingRange.bottom - offset : 0;
+};
+/**
+* Leading spacing before an empty paragraph is consumed when a split row
+* resumes at the top of a fresh flow region. Only a whitespace band shared by
+* every cell with remaining content is suppressible; non-empty paragraphs,
+* line boxes, cell padding, and explicit row height retain authored space.
+*/
+const continuationSkipAfter = (geometries, offset) => {
+	const skips = geometries.map((geometry) => continuationSkipForCell(geometry, offset)).filter((skip) => skip !== void 0);
+	if (skips.length === 0 || skips.some((skip) => skip <= BREAK_OFFSET_EPSILON)) return 0;
+	return Math.min(...skips);
+};
 /** Build break geometry for a table from its block + measure. */
 function buildTableRowBreakInfo(block, measure) {
 	const rowCount = measure.rows.length;
@@ -106,6 +128,7 @@ function buildTableRowBreakInfo(block, measure) {
 	}
 	rowTops.push(acc);
 	const breakOffsets = [];
+	const continuationSkips = [];
 	for (let r = 0; r < rowCount; r++) {
 		const rowHeight = measure.rows[r]?.height ?? 0;
 		const offsets = /* @__PURE__ */ new Set();
@@ -121,14 +144,24 @@ function buildTableRowBreakInfo(block, measure) {
 			cellGeometries.push(geometry);
 			for (const b of geometry.bottoms) if (b > 0 && b < rowHeight) offsets.add(b);
 		}
-		const safeOffsets = [...offsets].filter((offset) => offset === rowHeight || cellGeometries.every((geometry) => geometry.unsafeRanges.every((range) => !isInsideRange(offset, range))));
-		breakOffsets.push(safeOffsets.sort((a, b) => a - b));
+		const sortedOffsets = [...offsets].filter((offset) => offset === rowHeight || cellGeometries.every((geometry) => geometry.unsafeRanges.every((range) => !isInsideRange(offset, range)))).sort((a, b) => a - b);
+		breakOffsets.push(sortedOffsets);
+		continuationSkips.push(sortedOffsets.map((offset) => continuationSkipAfter(cellGeometries, offset)));
 	}
 	return {
 		rowTops,
-		breakOffsets
+		breakOffsets,
+		continuationSkips
 	};
 }
+/** Leading empty-paragraph whitespace to consume when a row resumes after `offset`. */
+function getRowContinuationSkip(info, rowIndex, offset) {
+	const offsets = info.breakOffsets[rowIndex];
+	const skips = info.continuationSkips[rowIndex];
+	const index = offsets?.findIndex((candidate) => Math.abs(candidate - offset) <= BREAK_OFFSET_EPSILON);
+	if (index === void 0 || index < 0) return 0;
+	return skips?.[index] ?? 0;
+}
 /**
 * Given a row and how much of it has already been placed (`fromOffset`), return
 * how many more px can be placed ending on a whole line, without exceeding
@@ -147,4 +180,4 @@ function snapRowBreak(info, rowIndex, fromOffset, maxSlice) {
 	return best;
 }
 //#endregion
-export { buildTableRowBreakInfo, snapRowBreak };
+export { buildTableRowBreakInfo, getRowContinuationSkip, snapRowBreak };

package/dist/layout-engine/types.d.ts

@@ -1,5 +1,5 @@
 import { OutlineStyleAttr } from "../types/documentEnumValues.js";
-import { ImagePosition, ImageWrap, SdtProperties, SdtType, ShapeTextBody, TableWidthType } from "@stll/docx-core/model";
+import { ImagePosition, ImageWrap, SdtProperties, SdtType, ShapeTextBody, TableCellFormatting, TableWidthType } from "@stll/docx-core/model";
 
 //#region src/layout-engine/types.d.ts
 declare namespace types_d_exports {
@@ -38,7 +38,12 @@ type RunFormatting = {
    * `segmentByScript`) so wrapping stays correct. Absent means CJK falls back
    * to `fontFamily`.
    */
-  eastAsiaFontFamily?: string;
+  eastAsiaFontFamily?: string; /** Run language metadata resolved from `w:lang`. */
+  language?: {
+    val?: string;
+    eastAsia?: string;
+    bidi?: string;
+  };
   fontSize?: number;
   letterSpacing?: number;
   superscript?: boolean;
@@ -164,7 +169,8 @@ type ImageRun = {
   distTop?: number;
   distBottom?: number;
   distLeft?: number;
-  distRight?: number;
+  distRight?: number; /** Use the image box as the exact line height for an embedded-object preview. */
+  exactLineHeight?: boolean;
   /**
    * wp:srcRect crop fractions in [0, 1]; emit as CSS `clip-path: inset(...)`
    * to match Word's visible region. eigenpal #424 (image-crop subset).
@@ -286,7 +292,26 @@ type ListNumPr = {
  * Paragraph block attributes.
  */
 type ParagraphAttrs = {
-  alignment?: "left" | "center" | "right" | "justify"; /** OOXML outline level (`w:outlineLvl`), where zero is the top level. */
+  alignment?: "left" | "center" | "right" | "justify"; /** East Asian first/last-character restrictions (`w:kinsoku`). */
+  kinsoku?: boolean; /** Hanging punctuation (`w:overflowPunct`), retained for layout policy. */
+  overflowPunctuation?: boolean; /** Exempt this paragraph from document automatic hyphenation. */
+  suppressAutoHyphens?: boolean; /** Document-wide automatic hyphenation controls retained for line layout. */
+  automaticHyphenation?: {
+    enabled: true;
+    doNotHyphenateCaps?: boolean;
+    consecutiveLineLimit?: number;
+  }; /** Document-wide custom line-edge characters and compatibility behavior. */
+  lineBreakRules?: {
+    noLineBreaksBefore?: {
+      language?: string;
+      characters: string;
+    };
+    noLineBreaksAfter?: {
+      language?: string;
+      characters: string;
+    };
+    useLegacyEthiopicAmharicRules?: boolean;
+  }; /** OOXML outline level (`w:outlineLvl`), where zero is the top level. */
   outlineLevel?: number;
   spacing?: ParagraphSpacing; /** Spacing sides resolved from OOXML automatic paragraph spacing. */
   automaticSpacing?: {
@@ -338,7 +363,8 @@ type ParagraphAttrs = {
   listIsBullet?: boolean;
   listMarkerHidden?: boolean;
   listMarkerFontFamily?: string;
-  listMarkerFontSize?: number; /** Horizontal alignment of the marker around the paragraph's list anchor. */
+  listMarkerFontSize?: number;
+  listMarkerBold?: boolean; /** Horizontal alignment of the marker around the paragraph's list anchor. */
   listMarkerAlignment?: "left" | "center" | "right";
   /**
    * `w:suff` (§17.9.25) — what follows the marker before body text.
@@ -413,6 +439,8 @@ type CellBorders = {
   bottom?: CellBorderSpec;
   left?: CellBorderSpec;
   right?: CellBorderSpec;
+  topLeftToBottomRight?: CellBorderSpec;
+  topRightToBottomLeft?: CellBorderSpec;
 };
 /**
  * A table cell with content.
@@ -424,6 +452,7 @@ type TableCell = {
   rowSpan?: number;
   width?: number;
   verticalAlign?: "top" | "center" | "bottom";
+  textDirection?: NonNullable<TableCellFormatting["textDirection"]>;
   background?: string;
   borders?: CellBorders; /** Per-cell padding in pixels (from w:tcMar or table-level w:tblCellMar) */
   padding?: {
@@ -449,7 +478,8 @@ type TableRow = {
   gridAfter?: number;
   height?: number;
   heightRule?: "auto" | "atLeast" | "exact";
-  isHeader?: boolean;
+  isHeader?: boolean; /** `w:cantSplit`: keep this row in one flow region. */
+  cantSplit?: boolean;
   hidden?: boolean;
 };
 /**
@@ -669,7 +699,10 @@ type MeasuredLine = {
    * no usable horizontal room at the natural line Y. Painters render this
    * as marginTop on the line element; measurement adds it to totalHeight.
    */
-  floatSkipBefore?: number;
+  floatSkipBefore?: number; /** Decorative hyphen inserted at a dictionary break without changing source text. */
+  discretionaryHyphen?: {
+    runIndex: number;
+  };
 };
 /**
  * Measurement result for a paragraph block.

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

@@ -0,0 +1,23 @@
+import { ImageRun } from "../layout-engine/types.js";
+
+//#region src/layout-painter/anchoredImagePosition.d.ts
+type PageGeometry = {
+  pageWidth: number;
+  pageHeight: number;
+  marginLeft: number;
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  contentWidth: number;
+  contentHeight: number;
+};
+/** Coordinates relative to the page content area's top-left corner. */
+type AnchoredImagePosition = {
+  x: number;
+  y: number;
+  side: "left" | "right";
+};
+/** Resolve an anchored image into page-content-relative coordinates. */
+declare function resolveAnchoredImagePosition(imgRun: ImageRun, fragmentY: number, geometry: PageGeometry): AnchoredImagePosition;
+//#endregion
+export { AnchoredImagePosition, PageGeometry, resolveAnchoredImagePosition };

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 };