@stll/folio-core 0.31.0 → 0.31.1

package/dist/layout-bridge/convert/paragraphFrames.js

@@ -61,10 +61,11 @@ function frameWrapType(frame) {
 function toFrameTextBox(content, frame, nextBlockId) {
 	const first = content.at(0);
 	const last = content.at(-1);
+	const hasAuthoredWidth = frame.width !== void 0;
 	const textBox = {
 		kind: "textBox",
 		id: nextBlockId(),
-		width: frame.width ?? 200,
+		width: frame.width ?? 0,
 		margins: {
 			top: 0,
 			right: 0,
@@ -82,6 +83,11 @@ function toFrameTextBox(content, frame, nextBlockId) {
 		...first?.pmStart !== void 0 ? { pmStart: first.pmStart } : {},
 		...last?.pmEnd !== void 0 ? { pmEnd: last.pmEnd } : {}
 	};
+	if (!hasAuthoredWidth) {
+		textBox.widthMode = "intrinsic";
+		textBox.autoFit = "shape";
+		textBox.textWrap = "none";
+	}
 	if (frame.height !== void 0) textBox.height = frame.height;
 	const position = framePosition(frame);
 	if (position !== void 0) textBox.position = position;

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

@@ -769,6 +769,8 @@ type TextBoxBlock = {
   id: BlockId;
   /** Width in pixels */
   width: number;
+  /** Whether width is authored or derived from the live rendered content. */
+  widthMode?: "intrinsic";
   /** Height in pixels (may be auto-calculated) */
   height?: number;
   /** Text fitting behavior */

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

@@ -177,6 +177,12 @@ type HeaderFooterLayoutInfo = {
     left: number;
   };
 };
+type HeaderFooterHorizontalPosition = {
+  relativeTo?: string;
+  posOffset?: number;
+  align?: string;
+  alignment?: string;
+};
 /**
  * Resolve the CSS `left` (px string) for an anchored object (image or text box)
  * in a header/footer, honoring `wp:positionH` (relativeTo page/margin, align
@@ -184,12 +190,11 @@ type HeaderFooterLayoutInfo = {
  * a page-centered banner in the header lands centered like Word, not pinned to
  * the left. Ported from eigenpal/docx-editor#700.
  */
-declare function resolveHeaderFooterFloatLeft(width: number, h: {
-  relativeTo?: string;
-  posOffset?: number;
-  align?: string;
-  alignment?: string;
-} | undefined, layout: HeaderFooterLayoutInfo): string;
+declare function resolveHeaderFooterFloatLeft(width: number, h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): string;
+declare function resolveHeaderFooterIntrinsicFrameHorizontalPosition(h: HeaderFooterHorizontalPosition | undefined, layout: HeaderFooterLayoutInfo): {
+  left: string;
+  transform?: string;
+};
 /**
  * Resolve the on-page coordinates of an anchored floating image.
  *
@@ -297,4 +302,4 @@ declare function findPageShellForPmPos(container: HTMLElement, pmPos: number): {
   isExact: boolean;
 } | null;
 //#endregion
-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 };
+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, resolveHeaderFooterIntrinsicFrameHorizontalPosition };

package/dist/layout-painter/renderPage.js

@@ -207,6 +207,37 @@ function applyContentAreaStyles(element, page) {
 function getPositionAlignment(position) {
 	return position?.align ?? position?.alignment;
 }
+function resolveHeaderFooterHorizontalAnchorPoint(h, layout) {
+	if (!h) return {
+		left: 0,
+		alignment: "left"
+	};
+	if (h.posOffset !== void 0) {
+		const pageOffset = h.relativeTo === "page" ? -layout.flowLeft : 0;
+		return {
+			left: emuToPixels(h.posOffset) + pageOffset,
+			alignment: "left"
+		};
+	}
+	let align = getPositionAlignment(h);
+	if (align === "inside") align = "left";
+	else if (align === "outside") align = "right";
+	const alignment = align === "center" || align === "right" ? align : "left";
+	const frameWidth = h.relativeTo === "page" ? layout.pageWidth : layout.contentWidth;
+	const frameLeft = h.relativeTo === "page" ? -layout.flowLeft : 0;
+	if (alignment === "center") return {
+		left: frameLeft + frameWidth / 2,
+		alignment
+	};
+	if (alignment === "right") return {
+		left: frameLeft + frameWidth,
+		alignment
+	};
+	return {
+		left: frameLeft,
+		alignment
+	};
+}
 function resolveHeaderFooterFloatTop(floatImg, layout) {
 	const v = floatImg.position.vertical;
 	if (!v) return floatImg.paragraphY;
@@ -261,20 +292,24 @@ function resolveHeaderFooterFloatingTablePosition(floating, measure, layout, sou
 * the left. Ported from eigenpal/docx-editor#700.
 */
 function resolveHeaderFooterFloatLeft(width, h, layout) {
-	if (!h) return "0";
-	let align = getPositionAlignment(h);
-	if (align === "inside") align = "left";
-	else if (align === "outside") align = "right";
-	if (h.relativeTo === "page") {
-		if (h.posOffset !== void 0) return `${emuToPixels(h.posOffset) - layout.flowLeft}px`;
-		if (align === "right") return `${layout.pageWidth - width - layout.flowLeft}px`;
-		if (align === "center") return `${(layout.pageWidth - width) / 2 - layout.flowLeft}px`;
-		if (align === "left") return `${-layout.flowLeft}px`;
-	}
-	if (h.posOffset !== void 0) return `${emuToPixels(h.posOffset)}px`;
-	if (align === "right") return `${layout.contentWidth - width}px`;
-	if (align === "center") return `${(layout.contentWidth - width) / 2}px`;
-	return "0";
+	const anchor = resolveHeaderFooterHorizontalAnchorPoint(h, layout);
+	let widthFactor = 0;
+	if (anchor.alignment === "right") widthFactor = 1;
+	else if (anchor.alignment === "center") widthFactor = .5;
+	const left = anchor.left - width * widthFactor;
+	return left === 0 ? "0" : `${left}px`;
+}
+function resolveHeaderFooterIntrinsicFrameHorizontalPosition(h, layout) {
+	const anchor = resolveHeaderFooterHorizontalAnchorPoint(h, layout);
+	if (anchor.alignment === "center") return {
+		left: `${anchor.left}px`,
+		transform: "translateX(-50%)"
+	};
+	if (anchor.alignment === "right") return {
+		left: `${anchor.left}px`,
+		transform: "translateX(-100%)"
+	};
+	return { left: anchor.left === 0 ? "0" : `${anchor.left}px` };
 }
 function applyHeaderFooterFloatHorizontalPosition(img, floatImg, layout) {
 	img.style.left = resolveHeaderFooterFloatLeft(floatImg.width, floatImg.position.horizontal, layout);
@@ -500,6 +535,12 @@ function renderHeaderFooterContent(content, context, options, layout) {
 			}, layout) : cursorY;
 			fragEl.style.top = `${textBoxTop}px`;
 			fragEl.style.left = resolveHeaderFooterFloatLeft(measure.width, block.position?.horizontal, layout);
+			if (block.widthMode === "intrinsic") {
+				const horizontalPosition = resolveHeaderFooterIntrinsicFrameHorizontalPosition(block.position?.horizontal, layout);
+				fragEl.style.width = "max-content";
+				fragEl.style.left = horizontalPosition.left;
+				fragEl.style.transform = horizontalPosition.transform ?? "";
+			}
 			if (block.wrapType === "behind") fragEl.style.zIndex = "-1";
 			containerEl.append(fragEl);
 			if (!isPositionedHeaderFooterTextBoxBlock(block)) cursorY += measure.height;
@@ -1823,4 +1864,4 @@ function depopulatePageShell(shell, pageDataMap) {
 	}
 }
 //#endregion
-export { PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, floatingTableReservesBand, getDefaultPageFontFamily, isFloatingImageRun, renderAllPagesNow, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft };
+export { PAGE_CLASS_NAMES, PAINTER_PAINTED_EVENT, applySectionHeaderFooterOptions, calculateFootnoteAreaRenderHeight, computePageFingerprint, emuToPixels, findPageShellForPmPos, floatingTableReservesBand, getDefaultPageFontFamily, isFloatingImageRun, renderAllPagesNow, renderFloatingImagesLayer, renderFootnoteArea, renderPage, renderPages, resolveAnchoredImagePosition, resolveHeaderFooterFloatLeft, resolveHeaderFooterIntrinsicFrameHorizontalPosition };

package/dist/layout-painter/renderTable.js

@@ -12,6 +12,7 @@ import { getAutomaticTextColorForBackground } from "./documentColors.js";
 import { applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs } from "./renderImage.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
 import { renderTextBoxFragment } from "./renderTextBox.js";
+import { ownedRowBottomBorderOffsets } from "./tableRowPaintGeometry.js";
 //#region src/layout-painter/renderTable.ts
 /**
 * Table Renderer
@@ -36,6 +37,7 @@ const TABLE_CLASS_NAMES = {
 	tableEdgeHandleRight: "layout-table-edge-handle-right"
 };
 const CELL_DIAGONAL_BORDER_CLASS = "layout-table-cell-diagonal-border";
+const CELL_BOTTOM_BORDER_CLASS = "layout-table-cell-bottom-border";
 function renderCellContent({ cell, cellMeasure, context, doc, contentWidthOverride, pageContentPosition }) {
 	const contentEl = doc.createElement("div");
 	contentEl.className = TABLE_CLASS_NAMES.cellContent;
@@ -355,7 +357,7 @@ function renderTableCell({ cell, cellMeasure, x, width, rowHeight, borderFlags,
 	if (cell.borders) {
 		if (borderFlags.drawTop) applyBorder(cellEl, "top", cell.borders.top);
 		applyBorder(cellEl, "right", cell.borders.right);
-		applyBorder(cellEl, "bottom", cell.borders.bottom);
+		if (borderFlags.drawBottom) applyBorder(cellEl, "bottom", cell.borders.bottom);
 		if (borderFlags.drawLeft) applyBorder(cellEl, "left", cell.borders.left);
 	}
 	if (cell.background) {
@@ -444,7 +446,26 @@ function renderTableCell({ cell, cellMeasure, x, width, rowHeight, borderFlags,
 	return cellEl;
 }
 const hasVisibleBorder = (border) => border !== void 0 && border.style !== "none" && border.style !== "nil";
-function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, contentClip, pageContentPosition, inlineOffset = 0 }) {
+const isMinimumHeightRow = (row) => row?.height !== void 0 && row.heightRule !== "exact";
+const rowHasVerticalMerge = (row) => row?.cells.some((cell) => (cell.rowSpan ?? 1) > 1) === true;
+const continuationRowBottomBorderOffsets = (fragment, block, measure, cellGrid) => {
+	const rowHeights = measure.rows.slice(fragment.fromRow, fragment.toRow).map(({ height }) => height);
+	const fragmentHasVerticalMerge = block.rows.slice(fragment.fromRow, fragment.toRow).some((row, fragmentRowIndex) => rowHasVerticalMerge(row) || (cellGrid.occupiedColumnsByRow.get(fragment.fromRow + fragmentRowIndex)?.size ?? 0) > 0);
+	if (fragment.continuesFromPrev !== true || fragment.headerRowCount || fragment.topClip !== void 0 || fragment.bottomClip !== void 0 || fragmentHasVerticalMerge) return rowHeights.map(() => 0);
+	const snapAfterRow = rowHeights.slice(0, -1).map((_, fragmentRowIndex) => {
+		const rowIndex = fragment.fromRow + fragmentRowIndex;
+		const row = block.rows[rowIndex];
+		const nextRow = block.rows[rowIndex + 1];
+		return isMinimumHeightRow(row) && isMinimumHeightRow(nextRow) && !rowHasVerticalMerge(row) && !rowHasVerticalMerge(nextRow) && row?.cells.some((cell) => hasVisibleBorder(cell.borders?.bottom)) === true;
+	});
+	if (!snapAfterRow.some(Boolean)) return rowHeights.map(() => 0);
+	return ownedRowBottomBorderOffsets({
+		origin: fragment.y,
+		rowHeights,
+		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 }) {
 	const rowEl = doc.createElement("div");
 	rowEl.className = TABLE_CLASS_NAMES.row;
 	rowEl.style.position = "absolute";
@@ -477,6 +498,7 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 		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 paintBottomBorderSeparately = bottomBorderOffset > 0 && hasVisibleBorder(cell.borders?.bottom);
 		const cellEl = renderTableCell({
 			cell,
 			cellMeasure,
@@ -485,6 +507,7 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			rowHeight: cellHeight,
 			borderFlags: {
 				drawTop,
+				drawBottom: !paintBottomBorderSeparately,
 				isLastRow,
 				drawLeft,
 				isLastCol
@@ -503,6 +526,20 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 		cellEl.dataset["columnIndex"] = String(columnIndex);
 		if (rowSpan > 1) cellEl.dataset["rowSpan"] = String(rowSpan);
 		rowEl.append(cellEl);
+		if (paintBottomBorderSeparately) {
+			const bottomBorderEl = doc.createElement("div");
+			bottomBorderEl.className = CELL_BOTTOM_BORDER_CLASS;
+			bottomBorderEl.style.position = "absolute";
+			bottomBorderEl.style.left = `${cellLeft}px`;
+			bottomBorderEl.style.top = "0";
+			bottomBorderEl.style.width = `${width}px`;
+			bottomBorderEl.style.height = `${cellHeight + bottomBorderOffset}px`;
+			bottomBorderEl.style.boxSizing = "border-box";
+			bottomBorderEl.style.pointerEvents = "none";
+			bottomBorderEl.style.zIndex = "1";
+			applyBorder(bottomBorderEl, "bottom", cell.borders?.bottom);
+			rowEl.append(bottomBorderEl);
+		}
 	}
 	return rowEl;
 }
@@ -568,6 +605,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 		columnWidths: measure.columnWidths,
 		bidi: block.bidi === true
 	});
+	const contentRowBottomBorderOffsets = continuationRowBottomBorderOffsets(fragment, block, measure, cellGrid);
 	const headerRowCount = fragment.headerRowCount ?? 0;
 	let y = 0;
 	if (headerRowCount > 0 && fragment.continuesFromPrev) for (let hdrIdx = 0; hdrIdx < headerRowCount; hdrIdx++) {
@@ -646,6 +684,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			bottomBorderOffset: contentRowBottomBorderOffsets[rowIndex - fragment.fromRow] ?? 0,
 			...contentClip ? { contentClip } : {},
 			...tablePageContentPosition ? { pageContentPosition: {
 				...tablePageContentPosition,

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

@@ -0,0 +1,15 @@
+//#region src/layout-painter/tableRowPaintGeometry.d.ts
+type OwnedRowBottomBorderOffsetsOptions = {
+  origin: number;
+  rowHeights: readonly number[];
+  /** Whether the row ending at this index owns a visible shared bottom edge. */
+  snapAfterRow: readonly boolean[];
+};
+/**
+ * Offset bottom-owned shared edges onto CSS pixel boundaries. Source row
+ * geometry remains unchanged, so content floors and the final band edge stay
+ * exact; only the independently painted border moves.
+ */
+declare const ownedRowBottomBorderOffsets: ({ origin, rowHeights, snapAfterRow }: OwnedRowBottomBorderOffsetsOptions) => number[];
+//#endregion
+export { ownedRowBottomBorderOffsets };

package/dist/layout-painter/tableRowPaintGeometry.js

@@ -0,0 +1,22 @@
+//#region src/layout-painter/tableRowPaintGeometry.ts
+const CSS_PIXEL_ROUNDING_EPSILON = 1e-6;
+/**
+* Offset bottom-owned shared edges onto CSS pixel boundaries. Source row
+* geometry remains unchanged, so content floors and the final band edge stay
+* exact; only the independently painted border moves.
+*/
+const ownedRowBottomBorderOffsets = ({ origin, rowHeights, snapAfterRow }) => {
+	const offsets = [];
+	let boundary = origin;
+	for (let rowIndex = 0; rowIndex < rowHeights.length; rowIndex++) {
+		boundary += rowHeights[rowIndex] ?? 0;
+		if (rowIndex === rowHeights.length - 1 || snapAfterRow[rowIndex] !== true) {
+			offsets.push(0);
+			continue;
+		}
+		offsets.push(Math.ceil(boundary - CSS_PIXEL_ROUNDING_EPSILON) - boundary);
+	}
+	return offsets;
+};
+//#endregion
+export { ownedRowBottomBorderOffsets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-core",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Headless, framework-neutral core of folio: the OOXML (.docx) parser, document model, ProseMirror integration, and page-layout engine. No React.",
   "keywords": [
     "document-model",