@stll/folio-core 0.0.1-placeholder.0 → 0.1.0

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

@@ -0,0 +1,36 @@
+import { TableBlock, TableFragment, TableMeasure } from "../layout-engine/types.js";
+import { RenderContext } from "./renderUtils.js";
+
+//#region src/layout-painter/renderTable.d.ts
+/**
+ * CSS class names for table elements
+ */
+declare const TABLE_CLASS_NAMES: {
+  table: string;
+  row: string;
+  cell: string;
+  cellContent: string;
+  resizeHandle: string;
+  rowResizeHandle: string;
+  tableEdgeHandleBottom: string;
+  tableEdgeHandleRight: string;
+};
+/**
+ * Options for rendering a table fragment
+ */
+type RenderTableFragmentOptions = {
+  document?: Document;
+};
+/**
+ * Render a table fragment to DOM
+ *
+ * @param fragment - The table fragment to render
+ * @param block - The full table block
+ * @param measure - The full table measure
+ * @param context - Rendering context
+ * @param options - Rendering options
+ * @returns The table DOM element
+ */
+declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;
+//#endregion
+export { RenderTableFragmentOptions, TABLE_CLASS_NAMES, renderTableFragment };

package/dist/layout-painter/renderTable.js

@@ -0,0 +1,432 @@
+import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
+import { getAutomaticTextColorForBackground } from "./documentColors.js";
+import { renderParagraphFragment } from "./renderParagraph.js";
+import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "../layout-engine/measure/tableCellFloating.js";
+//#region src/layout-painter/renderTable.ts
+/**
+* Table Renderer
+*
+* Renders table fragments to DOM. Handles:
+* - Multi-row tables split across pages
+* - Cell content (paragraphs within cells)
+* - Column widths and cell spans
+* - Basic cell styling (borders, backgrounds)
+*/
+/**
+* CSS class names for table elements
+*/
+const TABLE_CLASS_NAMES = {
+	table: "layout-table",
+	row: "layout-table-row",
+	cell: "layout-table-cell",
+	cellContent: "layout-table-cell-content",
+	resizeHandle: "layout-table-resize-handle",
+	rowResizeHandle: "layout-table-row-resize-handle",
+	tableEdgeHandleBottom: "layout-table-edge-handle-bottom",
+	tableEdgeHandleRight: "layout-table-edge-handle-right"
+};
+/**
+* Render cell content (paragraphs and nested tables)
+*/
+function renderCellContent(cell, cellMeasure, context, doc) {
+	const contentEl = doc.createElement("div");
+	contentEl.className = TABLE_CLASS_NAMES.cellContent;
+	contentEl.style.position = "relative";
+	const contentWidth = getTableCellContentWidth(cell, cellMeasure);
+	contentEl.style.width = `${contentWidth}px`;
+	const cellFloatingImages = getTableCellFloatingImages(cell, cellMeasure, contentWidth);
+	const floatingZones = buildTableCellFloatingZones(cellFloatingImages, contentWidth);
+	if (cellFloatingImages.length > 0) {
+		const floatingLayer = doc.createElement("div");
+		floatingLayer.className = "layout-cell-floating-images-layer";
+		floatingLayer.style.position = "absolute";
+		floatingLayer.style.top = "0";
+		floatingLayer.style.left = "0";
+		floatingLayer.style.width = "100%";
+		floatingLayer.style.height = "100%";
+		floatingLayer.style.pointerEvents = "none";
+		floatingLayer.style.zIndex = "10";
+		floatingLayer.style.overflow = "hidden";
+		for (const img of cellFloatingImages) {
+			const imgContainer = doc.createElement("div");
+			imgContainer.className = "layout-cell-floating-image";
+			imgContainer.style.position = "absolute";
+			imgContainer.style.left = `${img.x}px`;
+			imgContainer.style.top = `${img.y}px`;
+			imgContainer.style.pointerEvents = "auto";
+			if (img.pmStart !== void 0) imgContainer.dataset["pmStart"] = String(img.pmStart);
+			if (img.pmEnd !== void 0) imgContainer.dataset["pmEnd"] = String(img.pmEnd);
+			const imgEl = doc.createElement("img");
+			imgEl.src = img.src;
+			imgEl.style.width = `${img.width}px`;
+			imgEl.style.height = `${img.height}px`;
+			imgEl.style.display = "block";
+			if (img.alt) imgEl.alt = img.alt;
+			if (img.transform) imgEl.style.transform = img.transform;
+			imgContainer.append(imgEl);
+			floatingLayer.append(imgContainer);
+		}
+		contentEl.append(floatingLayer);
+	}
+	let cumulativeY = 0;
+	for (let i = 0; i < cell.blocks.length; i++) {
+		const block = cell.blocks[i];
+		const measure = cellMeasure.blocks[i];
+		if (block?.kind === "paragraph" && measure?.kind === "paragraph") {
+			const paragraphBlock = block;
+			let paragraphMeasure = measure;
+			if (floatingZones.length > 0) paragraphMeasure = measureParagraph(paragraphBlock, contentWidth, {
+				floatingZones,
+				paragraphYOffset: cumulativeY
+			});
+			const syntheticFragment = {
+				kind: "paragraph",
+				blockId: paragraphBlock.id,
+				x: 0,
+				y: 0,
+				width: contentWidth,
+				height: paragraphMeasure.totalHeight,
+				fromLine: 0,
+				toLine: paragraphMeasure.lines.length,
+				...paragraphBlock.pmStart !== void 0 ? { pmStart: paragraphBlock.pmStart } : {},
+				...paragraphBlock.pmEnd !== void 0 ? { pmEnd: paragraphBlock.pmEnd } : {}
+			};
+			const cellContext = {
+				...context,
+				insideTableCell: true
+			};
+			const fragEl = renderParagraphFragment(syntheticFragment, paragraphBlock, paragraphMeasure, cellContext, { document: doc });
+			fragEl.style.position = "relative";
+			contentEl.append(fragEl);
+			cumulativeY += paragraphMeasure.totalHeight;
+		} else if (block?.kind === "table" && measure?.kind === "table") {
+			const nestedTableEl = renderNestedTable(block, measure, context, doc);
+			nestedTableEl.style.position = "relative";
+			contentEl.append(nestedTableEl);
+			cumulativeY += measure.totalHeight;
+		}
+	}
+	return contentEl;
+}
+/**
+* Render a nested table (within a cell)
+*/
+function renderNestedTable(block, measure, context, doc) {
+	const tableEl = doc.createElement("div");
+	tableEl.className = `${TABLE_CLASS_NAMES.table} layout-nested-table`;
+	tableEl.style.position = "relative";
+	tableEl.style.width = `${measure.totalWidth}px`;
+	tableEl.style.display = "block";
+	if (block.justification === "center") {
+		tableEl.style.marginLeft = "auto";
+		tableEl.style.marginRight = "auto";
+	} else if (block.justification === "right") tableEl.style.marginLeft = "auto";
+	else if (block.indent) tableEl.style.marginLeft = `${block.indent}px`;
+	tableEl.dataset["blockId"] = String(block.id);
+	if (block.pmStart !== void 0) tableEl.dataset["pmStart"] = String(block.pmStart);
+	if (block.pmEnd !== void 0) tableEl.dataset["pmEnd"] = String(block.pmEnd);
+	const rowYPositions = [];
+	let yPos = 0;
+	for (const i_item of measure.rows) {
+		rowYPositions.push(yPos);
+		yPos += i_item.height;
+	}
+	rowYPositions.push(yPos);
+	const spanningCells = /* @__PURE__ */ new Map();
+	let y = 0;
+	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
+		const row = block.rows[rowIndex];
+		const rowMeasure = measure.rows[rowIndex];
+		if (!row || !rowMeasure) continue;
+		const rowEl = renderTableRow(row, rowMeasure, rowIndex, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, void 0, block.bidi);
+		tableEl.append(rowEl);
+		y += rowMeasure.height;
+	}
+	tableEl.style.height = `${y}px`;
+	return tableEl;
+}
+/**
+* Apply a single border to an element.
+*/
+function applyBorder(el, side, border) {
+	const styleProp = `border${side.charAt(0).toUpperCase() + side.slice(1)}`;
+	if (!border || border.style === "none" || border.style === "nil" || border.width === 0) el.style[styleProp] = "none";
+	else {
+		const width = border.width ?? 1;
+		const color = border.color ?? "#000000";
+		const style = border.style ?? "solid";
+		el.style[styleProp] = `${width}px ${style} ${color}`;
+	}
+}
+/**
+* Render a single table cell
+*/
+function renderTableCell(cell, cellMeasure, x, rowHeight, borderFlags, context, doc) {
+	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.width = `${cellMeasure.width}px`;
+	cellEl.style.height = `${rowHeight}px`;
+	cellEl.style.overflow = "hidden";
+	cellEl.style.boxSizing = "border-box";
+	const padTop = cell.padding?.top ?? 1;
+	const padRight = cell.padding?.right ?? 7;
+	const padBottom = cell.padding?.bottom ?? 1;
+	const padLeft = cell.padding?.left ?? 7;
+	cellEl.style.padding = `${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`;
+	if (cell.borders) {
+		if (borderFlags.isFirstRow) applyBorder(cellEl, "top", cell.borders.top);
+		applyBorder(cellEl, "right", cell.borders.right);
+		applyBorder(cellEl, "bottom", cell.borders.bottom);
+		if (borderFlags.isFirstCol) applyBorder(cellEl, "left", cell.borders.left);
+	}
+	if (cell.background) {
+		cellEl.style.backgroundColor = cell.background;
+		const automaticTextColor = getAutomaticTextColorForBackground(cell.background);
+		if (automaticTextColor) cellEl.style.color = automaticTextColor;
+	}
+	if (cell.noWrap) cellEl.style.whiteSpace = "nowrap";
+	if (cell.verticalAlign) {
+		cellEl.style.display = "flex";
+		cellEl.style.flexDirection = "column";
+		switch (cell.verticalAlign) {
+			case "top":
+				cellEl.style.justifyContent = "flex-start";
+				break;
+			case "center":
+				cellEl.style.justifyContent = "center";
+				break;
+			case "bottom":
+				cellEl.style.justifyContent = "flex-end";
+				break;
+			default: break;
+		}
+	}
+	const contentEl = renderCellContent(cell, cellMeasure, context, doc);
+	cellEl.append(contentEl);
+	if (cell.blocks.length > 0) {
+		const firstBlock = cell.blocks.at(0);
+		const lastBlock = cell.blocks.at(-1);
+		const pmStart = firstBlock !== void 0 && "pmStart" in firstBlock ? firstBlock.pmStart : void 0;
+		if (pmStart !== void 0) cellEl.dataset["pmStart"] = String(pmStart);
+		if (lastBlock && "pmEnd" in lastBlock) cellEl.dataset["pmEnd"] = String(lastBlock.pmEnd);
+	}
+	return cellEl;
+}
+/**
+* Render a table row with rowSpan support
+*/
+function renderTableRow(row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, bidi = false) {
+	const rowEl = doc.createElement("div");
+	rowEl.className = TABLE_CLASS_NAMES.row;
+	const tableWidth = bidi ? columnWidths.reduce((sum, columnWidth) => sum + columnWidth, 0) : 0;
+	rowEl.style.position = "absolute";
+	rowEl.style.left = "0";
+	rowEl.style.top = `${y}px`;
+	rowEl.style.width = "100%";
+	rowEl.style.height = `${rowMeasure.height}px`;
+	rowEl.dataset["rowIndex"] = String(rowIndex);
+	const occupiedColumns = /* @__PURE__ */ new Set();
+	if (spanningCells) {
+		for (const [, spanCell] of spanningCells) if (spanCell.startRow < rowIndex && spanCell.startRow + spanCell.rowSpan > rowIndex) for (let c = 0; c < spanCell.colSpan; c++) occupiedColumns.add(spanCell.columnIndex + c);
+	}
+	let x = 0;
+	let columnIndex = 0;
+	while (occupiedColumns.has(columnIndex)) {
+		x += columnWidths[columnIndex] ?? 0;
+		columnIndex++;
+	}
+	for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
+		const cell = row.cells[cellIndex];
+		const cellMeasure = rowMeasure.cells[cellIndex];
+		if (!cell || !cellMeasure) continue;
+		const colSpan = cell.colSpan ?? 1;
+		const rowSpan = cell.rowSpan ?? 1;
+		let cellHeight = rowMeasure.height;
+		if (rowSpan > 1 && rowYPositions) {
+			cellHeight = 0;
+			for (let r = rowIndex; r < rowIndex + rowSpan && r < rowYPositions.length - 1; r++) cellHeight += (rowYPositions[r + 1] ?? 0) - (rowYPositions[r] ?? 0);
+			if (cellHeight === 0) cellHeight = rowMeasure.height * rowSpan;
+		}
+		let cellWidth = 0;
+		for (let c = 0; c < colSpan && columnIndex + c < columnWidths.length; c++) cellWidth += columnWidths[columnIndex + c] ?? 0;
+		const cellLeft = bidi ? tableWidth - x - cellWidth : x;
+		const isFirstRow = rowIndex === 0 || isFirstRowInFragment === true;
+		const isLastRow = rowIndex + rowSpan >= totalRows;
+		const atLogicalStart = columnIndex === 0;
+		const atLogicalEnd = columnIndex + colSpan >= columnWidths.length;
+		const cellEl = renderTableCell(cell, cellMeasure, cellLeft, cellHeight, {
+			isFirstRow,
+			isLastRow,
+			isFirstCol: bidi ? atLogicalEnd : atLogicalStart,
+			isLastCol: bidi ? atLogicalStart : atLogicalEnd
+		}, context, doc);
+		cellEl.dataset["cellIndex"] = String(cellIndex);
+		cellEl.dataset["columnIndex"] = String(columnIndex);
+		if (rowSpan > 1) cellEl.dataset["rowSpan"] = String(rowSpan);
+		rowEl.append(cellEl);
+		if (rowSpan > 1 && spanningCells) {
+			const key = `${rowIndex}-${columnIndex}`;
+			spanningCells.set(key, {
+				cell,
+				cellMeasure,
+				columnIndex,
+				startRow: rowIndex,
+				rowSpan,
+				colSpan,
+				x: cellLeft,
+				totalHeight: cellHeight
+			});
+		}
+		x += cellWidth;
+		columnIndex += colSpan;
+		while (occupiedColumns.has(columnIndex)) {
+			x += columnWidths[columnIndex] ?? 0;
+			columnIndex++;
+		}
+	}
+	return rowEl;
+}
+/**
+* Render a table fragment to DOM
+*
+* @param fragment - The table fragment to render
+* @param block - The full table block
+* @param measure - The full table measure
+* @param context - Rendering context
+* @param options - Rendering options
+* @returns The table DOM element
+*/
+function renderTableFragment(fragment, block, measure, context, options = {}) {
+	const doc = options.document ?? document;
+	const tableEl = doc.createElement("div");
+	tableEl.className = TABLE_CLASS_NAMES.table;
+	tableEl.style.position = "absolute";
+	tableEl.style.width = `${fragment.width}px`;
+	tableEl.style.height = `${fragment.height}px`;
+	tableEl.style.overflow = "hidden";
+	tableEl.dataset["blockId"] = String(fragment.blockId);
+	tableEl.dataset["fromRow"] = String(fragment.fromRow);
+	tableEl.dataset["toRow"] = String(fragment.toRow);
+	if (fragment.pmStart !== void 0) tableEl.dataset["pmStart"] = String(fragment.pmStart);
+	if (fragment.pmEnd !== void 0) tableEl.dataset["pmEnd"] = String(fragment.pmEnd);
+	const tableColumnsWidth = block.bidi ? measure.columnWidths.reduce((sum, columnWidth) => sum + columnWidth, 0) : 0;
+	let handleX = 0;
+	for (let col = 0; col < measure.columnWidths.length - 1; col++) {
+		handleX += measure.columnWidths[col] ?? 0;
+		const handleLeft = block.bidi ? tableColumnsWidth - handleX : handleX;
+		const handle = doc.createElement("div");
+		handle.className = TABLE_CLASS_NAMES.resizeHandle;
+		handle.style.position = "absolute";
+		handle.style.left = `${handleLeft - 3}px`;
+		handle.style.top = "0";
+		handle.style.width = "6px";
+		handle.style.height = "100%";
+		handle.style.cursor = "col-resize";
+		handle.style.zIndex = "10";
+		handle.dataset["columnIndex"] = String(col);
+		handle.dataset["tableBlockId"] = String(fragment.blockId);
+		if (block.bidi) handle.dataset["bidi"] = "true";
+		if (fragment.pmStart !== void 0) handle.dataset["tablePmStart"] = String(fragment.pmStart);
+		tableEl.append(handle);
+	}
+	const rowYPositions = [];
+	let yPos = 0;
+	for (const i_item of measure.rows) {
+		rowYPositions.push(yPos);
+		yPos += i_item.height;
+	}
+	rowYPositions.push(yPos);
+	const spanningCells = /* @__PURE__ */ new Map();
+	const headerRowCount = fragment.headerRowCount ?? 0;
+	let y = 0;
+	if (headerRowCount > 0 && fragment.continuesFromPrev) for (let hdrIdx = 0; hdrIdx < headerRowCount; hdrIdx++) {
+		const hdrRow = block.rows[hdrIdx];
+		const hdrRowMeasure = measure.rows[hdrIdx];
+		if (!hdrRow || !hdrRowMeasure) continue;
+		const rowEl = renderTableRow(hdrRow, hdrRowMeasure, hdrIdx, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, hdrIdx === 0, block.bidi);
+		rowEl.dataset["repeatedHeader"] = "true";
+		tableEl.append(rowEl);
+		y += hdrRowMeasure.height;
+	}
+	const topClip = fragment.topClip ?? 0;
+	let contentParent = tableEl;
+	if (headerRowCount > 0 && fragment.continuesFromPrev && topClip > 0) {
+		const contentClipEl = doc.createElement("div");
+		contentClipEl.style.position = "absolute";
+		contentClipEl.style.left = "0";
+		contentClipEl.style.top = `${y}px`;
+		contentClipEl.style.width = "100%";
+		contentClipEl.style.height = `${Math.max(0, fragment.height - y)}px`;
+		contentClipEl.style.overflow = "hidden";
+		tableEl.append(contentClipEl);
+		contentParent = contentClipEl;
+		y = -topClip;
+	} else y -= topClip;
+	for (let rowIndex = fragment.fromRow; rowIndex < fragment.toRow; rowIndex++) {
+		const row = block.rows[rowIndex];
+		const rowMeasure = measure.rows[rowIndex];
+		if (!row || !rowMeasure) continue;
+		const isFirstRowInFragment = headerRowCount > 0 && fragment.continuesFromPrev ? false : fragment.continuesFromPrev && rowIndex === fragment.fromRow;
+		const rowEl = renderTableRow(row, rowMeasure, rowIndex, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, block.bidi);
+		contentParent.append(rowEl);
+		y += rowMeasure.height;
+	}
+	let handleY = 0;
+	for (let rowIdx = fragment.fromRow; rowIdx < fragment.toRow; rowIdx++) {
+		handleY += measure.rows[rowIdx]?.height ?? 0;
+		if (rowIdx < fragment.toRow - 1) {
+			const rowHandle = doc.createElement("div");
+			rowHandle.className = TABLE_CLASS_NAMES.rowResizeHandle;
+			rowHandle.style.position = "absolute";
+			rowHandle.style.left = "0";
+			rowHandle.style.top = `${handleY - 3}px`;
+			rowHandle.style.width = "100%";
+			rowHandle.style.height = "6px";
+			rowHandle.style.cursor = "row-resize";
+			rowHandle.style.zIndex = "10";
+			rowHandle.dataset["rowIndex"] = String(rowIdx);
+			rowHandle.dataset["tableBlockId"] = String(fragment.blockId);
+			if (fragment.pmStart !== void 0) rowHandle.dataset["tablePmStart"] = String(fragment.pmStart);
+			tableEl.append(rowHandle);
+		}
+	}
+	if (fragment.toRow === block.rows.length) {
+		const bottomHandle = doc.createElement("div");
+		bottomHandle.className = TABLE_CLASS_NAMES.tableEdgeHandleBottom;
+		bottomHandle.style.position = "absolute";
+		bottomHandle.style.left = "0";
+		bottomHandle.style.top = `${handleY - 3}px`;
+		bottomHandle.style.width = "100%";
+		bottomHandle.style.height = "6px";
+		bottomHandle.style.cursor = "row-resize";
+		bottomHandle.style.zIndex = "10";
+		bottomHandle.dataset["rowIndex"] = String(block.rows.length - 1);
+		bottomHandle.dataset["tableBlockId"] = String(fragment.blockId);
+		bottomHandle.dataset["isEdge"] = "bottom";
+		if (fragment.pmStart !== void 0) bottomHandle.dataset["tablePmStart"] = String(fragment.pmStart);
+		tableEl.append(bottomHandle);
+	}
+	if (fragment.toRow === block.rows.length) {
+		const totalWidth = measure.columnWidths.reduce((w, cw) => w + cw, 0);
+		const rightHandle = doc.createElement("div");
+		rightHandle.className = TABLE_CLASS_NAMES.tableEdgeHandleRight;
+		rightHandle.style.position = "absolute";
+		rightHandle.style.left = `${totalWidth - 3}px`;
+		rightHandle.style.top = "0";
+		rightHandle.style.width = "6px";
+		rightHandle.style.height = "100%";
+		rightHandle.style.cursor = "col-resize";
+		rightHandle.style.zIndex = "10";
+		rightHandle.dataset["columnIndex"] = String(block.bidi ? 0 : measure.columnWidths.length - 1);
+		rightHandle.dataset["tableBlockId"] = String(fragment.blockId);
+		rightHandle.dataset["isEdge"] = "right";
+		if (fragment.pmStart !== void 0) rightHandle.dataset["tablePmStart"] = String(fragment.pmStart);
+		tableEl.append(rightHandle);
+	}
+	return tableEl;
+}
+//#endregion
+export { TABLE_CLASS_NAMES, renderTableFragment };

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

@@ -0,0 +1,22 @@
+import { TextBoxBlock, TextBoxFragment, TextBoxMeasure } from "../layout-engine/types.js";
+import { RenderContext } from "./renderUtils.js";
+
+//#region src/layout-painter/renderTextBox.d.ts
+/**
+ * CSS class names for text box elements
+ */
+declare const TEXTBOX_CLASS_NAMES: {
+  textBox: string;
+};
+/**
+ * Options for rendering a text box fragment
+ */
+type RenderTextBoxFragmentOptions = {
+  document?: Document;
+};
+/**
+ * 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 };

package/dist/layout-painter/renderTextBox.js

@@ -0,0 +1,67 @@
+import { DEFAULT_TEXTBOX_MARGINS } from "../layout-engine/types.js";
+import { renderParagraphFragment } from "./renderParagraph.js";
+//#region src/layout-painter/renderTextBox.ts
+/**
+* Text Box Renderer
+*
+* Renders text box fragments to DOM. Handles:
+* - Background fill color
+* - Border/outline
+* - Internal padding (margins)
+* - Paragraph content inside the box (using pre-measured data)
+*/
+/**
+* CSS class names for text box elements
+*/
+const TEXTBOX_CLASS_NAMES = { textBox: "layout-textbox" };
+/**
+* Render a text box fragment to DOM
+*/
+function renderTextBoxFragment(fragment, block, measure, context, options = {}) {
+	const doc = options.document ?? document;
+	const containerEl = doc.createElement("div");
+	containerEl.className = TEXTBOX_CLASS_NAMES.textBox;
+	containerEl.style.position = "absolute";
+	containerEl.style.width = `${fragment.width}px`;
+	containerEl.style.height = `${fragment.height}px`;
+	containerEl.style.overflow = "hidden";
+	containerEl.style.boxSizing = "border-box";
+	if (block.fillColor) containerEl.style.backgroundColor = block.fillColor;
+	if (block.outlineWidth && block.outlineWidth > 0) {
+		const style = block.outlineStyle || "solid";
+		const color = block.outlineColor || "#000000";
+		containerEl.style.border = `${block.outlineWidth}px ${style} ${color}`;
+	}
+	const margins = block.margins ?? DEFAULT_TEXTBOX_MARGINS;
+	containerEl.style.padding = `${margins.top}px ${margins.right}px ${margins.bottom}px ${margins.left}px`;
+	containerEl.dataset["blockId"] = String(fragment.blockId);
+	if (fragment.pmStart !== void 0) containerEl.dataset["pmStart"] = String(fragment.pmStart);
+	if (fragment.pmEnd !== void 0) containerEl.dataset["pmEnd"] = String(fragment.pmEnd);
+	const innerWidth = fragment.width - margins.left - margins.right;
+	let yOffset = 0;
+	for (let i = 0; i < block.content.length; i++) {
+		const paraBlock = block.content[i];
+		const paraMeasure = measure.innerMeasures[i];
+		if (!paraBlock || !paraMeasure) continue;
+		const paraEl = renderParagraphFragment({
+			kind: "paragraph",
+			blockId: paraBlock.id,
+			x: 0,
+			y: yOffset,
+			width: innerWidth,
+			height: paraMeasure.totalHeight,
+			...paraBlock.pmStart !== void 0 ? { pmStart: paraBlock.pmStart } : {},
+			...paraBlock.pmEnd !== void 0 ? { pmEnd: paraBlock.pmEnd } : {},
+			fromLine: 0,
+			toLine: paraMeasure.lines.length
+		}, paraBlock, paraMeasure, context, { document: doc });
+		paraEl.style.position = "relative";
+		paraEl.style.left = "0";
+		paraEl.style.top = "0";
+		containerEl.append(paraEl);
+		yOffset += paraMeasure.totalHeight;
+	}
+	return containerEl;
+}
+//#endregion
+export { TEXTBOX_CLASS_NAMES, renderTextBoxFragment };

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

@@ -0,0 +1,42 @@
+import { ImageRun, isFloatingImageRun, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
+
+//#region src/layout-painter/renderUtils.d.ts
+/**
+ * Horizontal alignment for an image alone on a line. An anchored image
+ * (`wp:positionH`, i.e. `position.horizontal` present) is positioned by its
+ * OWN alignment, independent of the paragraph's `jc` — and defaults to LEFT
+ * like Word, NOT the paragraph alignment (which would wrongly centre a
+ * left-anchored header logo in a centred paragraph). An inline image (no
+ * anchor) follows the paragraph alignment. Word's `inside`/`outside` collapse
+ * to left/right (eigenpal/docx-editor#787, issue #777).
+ */
+declare function resolveImageLineAlign(imageRun: ImageRun, paragraphAlignment: "left" | "center" | "right" | "justify" | undefined): "left" | "center" | "right" | "justify" | undefined;
+/**
+ * Context passed to fragment renderers
+ */
+type RenderContext = {
+  /** Current page number (1-indexed) */pageNumber: number; /** Total number of pages */
+  totalPages: number; /** Which section is being rendered */
+  section: "body" | "header" | "footer"; /** Bookmark name -> 1-indexed page, for resolving PAGEREF fields. */
+  bookmarkPages?: ReadonlyMap<string, number>; /** Bookmark name -> paragraph text, for resolving REF fields. */
+  bookmarkText?: ReadonlyMap<string, string>; /** Field run `pmStart` -> precomputed SEQ value, for resolving SEQ fields. */
+  seqValues?: ReadonlyMap<number, number>; /** Pages in this page's section, for resolving SECTIONPAGES fields. */
+  sectionPages?: number; /** Content width in pixels (page width minus margins) - used for justify */
+  contentWidth?: number; /** When true, floating images render in-flow instead of being skipped (for table cells) */
+  insideTableCell?: boolean;
+  /**
+   * How the renderer should position its outer element. The body lays
+   * fragments at absolute (x, y) on the page (`'absolute'`), while
+   * headers/footers stack blocks vertically inside their own container
+   * (`'absolute'` with caller-supplied top/left). The default is
+   * undefined; renderers fall back to `position: relative` and let the
+   * caller override styles.
+   */
+  positioning?: "absolute" | "flow";
+};
+/**
+ * EMU to pixels conversion for floating image positioning
+ */
+declare function emuToPixels(emu: number | undefined): number;
+//#endregion
+export { RenderContext, emuToPixels, isFloatingImageRun, isTextWrappingFloatingImageRun, resolveImageLineAlign };

package/dist/layout-painter/renderUtils.js

@@ -0,0 +1,30 @@
+import { isFloatingImageRun, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
+//#region src/layout-painter/renderUtils.ts
+/**
+* Horizontal alignment for an image alone on a line. An anchored image
+* (`wp:positionH`, i.e. `position.horizontal` present) is positioned by its
+* OWN alignment, independent of the paragraph's `jc` — and defaults to LEFT
+* like Word, NOT the paragraph alignment (which would wrongly centre a
+* left-anchored header logo in a centred paragraph). An inline image (no
+* anchor) follows the paragraph alignment. Word's `inside`/`outside` collapse
+* to left/right (eigenpal/docx-editor#787, issue #777).
+*/
+function resolveImageLineAlign(imageRun, paragraphAlignment) {
+	const horizontal = imageRun.position?.horizontal;
+	if (!horizontal) return paragraphAlignment;
+	switch (horizontal.align) {
+		case "center": return "center";
+		case "right":
+		case "outside": return "right";
+		default: return "left";
+	}
+}
+/**
+* EMU to pixels conversion for floating image positioning
+*/
+function emuToPixels(emu) {
+	if (emu === void 0) return 0;
+	return Math.round(emu * 96 / 914400);
+}
+//#endregion
+export { emuToPixels, isFloatingImageRun, isTextWrappingFloatingImageRun, resolveImageLineAlign };

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

@@ -0,0 +1,16 @@
+import { document_d_exports } from "../types/document.js";
+import { Page } from "../layout-engine/types.js";
+
+//#region src/layout-painter/renderWatermark.d.ts
+type RenderWatermarkOptions = {
+  /** Resolved image src for picture watermarks (data URL or http URL). */imageSrc?: string;
+};
+/**
+ * Build the watermark overlay element for a page. Returns `null` when
+ * the watermark is a picture without a resolved `imageSrc` (the
+ * relationship-id resolver lives outside the painter; without a src
+ * there's nothing visible to draw).
+ */
+declare function renderWatermarkLayer(watermark: document_d_exports.Watermark, page: Page, doc: Document, options?: RenderWatermarkOptions): HTMLElement | null;
+//#endregion
+export { RenderWatermarkOptions, renderWatermarkLayer };