mosage 0.2.0 → 0.8.0

package/dist/index.js

@@ -0,0 +1,693 @@
+import { a as defaultDesign, i as cssVarsToString, n as DiagramSyntaxError, o as designToCssVars, r as parseDelimited, t as compileDiagram } from "./diagram-xlVDekYk.js";
+import { a as PAGE_SIZE_NAMES, c as resolvePageGeometry, i as PAGE_SIZES, n as DEFAULT_PAGE_SIZE, o as isOrientation, r as ORIENTATIONS, s as isPageSizeName, t as DEFAULT_ORIENTATION } from "./sdk-DjpX6mCv.js";
+import { Children, Fragment, createContext, isValidElement, useContext, useEffect, useId, useRef, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/lib/outline.ts
+/** A contents list; headings inside one are never part of the outline. */
+const TOC_ATTR = "data-od-toc";
+const GLOBAL_KEY$3 = "__mosage_outline_store__";
+const g$3 = globalThis;
+if (!g$3[GLOBAL_KEY$3]) g$3[GLOBAL_KEY$3] = {
+	snapshot: [],
+	listeners: /* @__PURE__ */ new Set()
+};
+const store$1 = g$3[GLOBAL_KEY$3];
+function getOutline() {
+	return store$1.snapshot;
+}
+function subscribe$1(listener) {
+	store$1.listeners.add(listener);
+	return () => store$1.listeners.delete(listener);
+}
+/**
+* The document's headings, filled in after the pages render. Empty on the first
+* pass — a `<TableOfContents>` renders its rows on the second, once the scan
+* has run.
+*/
+function useDocOutline() {
+	return useSyncExternalStore(subscribe$1, getOutline, getOutline);
+}
+//#endregion
+//#region src/app/lib/labels.ts
+const LABEL_ATTR = "data-od-label";
+const LABEL_ID_ATTR = "data-od-label-id";
+const LABEL_TEXT_ATTR = "data-od-label-text";
+const EMPTY = {
+	entries: [],
+	vocabulary: {
+		figure: "Figure",
+		table: "Table",
+		footnotes: "",
+		onPage: " (p. {page})"
+	}
+};
+const GLOBAL_KEY$2 = "__mosage_labels_store__";
+const g$2 = globalThis;
+if (!g$2[GLOBAL_KEY$2]) g$2[GLOBAL_KEY$2] = {
+	snapshot: EMPTY,
+	listeners: /* @__PURE__ */ new Set()
+};
+const store = g$2[GLOBAL_KEY$2];
+function getLabels() {
+	return store.snapshot;
+}
+function subscribe(listener) {
+	store.listeners.add(listener);
+	return () => store.listeners.delete(listener);
+}
+function useLabelSnapshot() {
+	return useSyncExternalStore(subscribe, getLabels, getLabels);
+}
+/** The document's numbered items of one kind, in order. Empty on the first render pass. */
+function useDocLabels(kind) {
+	return useLabelSnapshot().entries.filter((entry) => entry.kind === kind);
+}
+/** One numbered item by id, once the scan has run. */
+function useDocLabel(id) {
+	return useLabelSnapshot().entries.find((entry) => entry.id === id) ?? null;
+}
+function useLabelVocabulary() {
+	return useLabelSnapshot().vocabulary;
+}
+/**
+* The words either side of the page number in a cross-reference's page suffix,
+* or null when the suffix names no page — it is then printed as written.
+*/
+function onPageParts(vocabulary) {
+	const at = vocabulary.onPage.indexOf("{page}");
+	if (at < 0) return null;
+	return [vocabulary.onPage.slice(0, at), vocabulary.onPage.slice(at + 6)];
+}
+//#endregion
+//#region src/app/components/footnote.tsx
+/** Stands in for a number the scan has not produced yet, or never will. */
+const UNNUMBERED = "•";
+const GLOBAL_KEY$1 = "__mosage_footnote_context__";
+const g$1 = globalThis;
+if (!g$1[GLOBAL_KEY$1]) g$1[GLOBAL_KEY$1] = createContext(null);
+const FootnoteContext = g$1[GLOBAL_KEY$1];
+const FOOTNOTE_MARKER_FLAG = "__odFootnote";
+function markerStyle() {
+	return {
+		fontSize: "0.7em",
+		lineHeight: 0,
+		verticalAlign: "super",
+		fontVariantNumeric: "tabular-nums",
+		color: "var(--od-accent)",
+		padding: "0 1px"
+	};
+}
+/**
+* The superscript in the text. Its position in the document decides the number.
+*
+* The placeholder is the one the printed note uses, and deliberately not an
+* empty string: the two describe the same unresolved state, a note whose number
+* never arrives has to be visible in both places rather than silently blank,
+* and the packer measures this glyph — an empty marker is narrower than the
+* digit that replaces it.
+*/
+function FootnoteMarker({ id }) {
+	const entry = useDocLabel(id);
+	return /* @__PURE__ */ jsx("sup", {
+		[LABEL_ATTR]: "footnote",
+		[LABEL_ID_ATTR]: id,
+		style: markerStyle(),
+		children: entry?.number ?? UNNUMBERED
+	});
+}
+/**
+* A note anchored to this point in the text. Inside a `flow()` section the
+* framework lifts it to the foot of whatever page the marker lands on; on a
+* fixed page, put a `<Footnotes />` where you want them printed.
+*/
+function Footnote({ id, children }) {
+	const generated = useId();
+	const noteId = id ?? generated;
+	const collector = useContext(FootnoteContext);
+	const latest = useRef(null);
+	useEffect(() => {
+		latest.current = collector;
+		collector?.register(noteId, children);
+	});
+	useEffect(() => () => latest.current?.unregister(noteId), [noteId]);
+	return /* @__PURE__ */ jsx(FootnoteMarker, { id: noteId });
+}
+Footnote[FOOTNOTE_MARKER_FLAG] = true;
+const FOOTNOTE_ROW_ATTR = "data-od-footnote-row";
+const FOOTNOTE_BODY_ATTR = "data-od-footnote-body";
+const FOOTNOTES_ATTR = "data-od-footnotes";
+function footnoteAreaStyle() {
+	return {
+		borderTop: "1px solid var(--od-rule)",
+		paddingTop: 6,
+		marginTop: 12,
+		fontSize: "var(--od-size-caption)",
+		lineHeight: 1.45,
+		color: "var(--od-muted)"
+	};
+}
+/** One note's row. Shared with the measurement pass so the reserved space is real. */
+function FootnoteRow({ id, content }) {
+	const entry = useDocLabel(id);
+	return /* @__PURE__ */ jsxs("div", {
+		[FOOTNOTE_ROW_ATTR]: id,
+		style: {
+			display: "flex",
+			gap: 5,
+			marginBottom: 3
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				flex: "none",
+				fontVariantNumeric: "tabular-nums",
+				color: "var(--od-accent)"
+			},
+			children: entry?.number ?? UNNUMBERED
+		}), /* @__PURE__ */ jsx("span", {
+			[FOOTNOTE_BODY_ATTR]: "",
+			style: { minWidth: 0 },
+			children: content
+		})]
+	});
+}
+function Footnotes({ notes, style, className }) {
+	const collector = useContext(FootnoteContext);
+	const vocabulary = useLabelVocabulary();
+	const list = notes ?? collector?.ids.map((id) => ({
+		id,
+		content: collector.contents.get(id)
+	})) ?? [];
+	if (list.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		[FOOTNOTES_ATTR]: "",
+		className,
+		style: {
+			...footnoteAreaStyle(),
+			...style
+		},
+		children: [vocabulary.footnotes ? /* @__PURE__ */ jsx("div", {
+			style: {
+				fontWeight: 600,
+				marginBottom: 3
+			},
+			children: vocabulary.footnotes
+		}) : null, list.map((note) => /* @__PURE__ */ jsx(FootnoteRow, {
+			id: note.id,
+			content: note.content
+		}, note.id))]
+	});
+}
+//#endregion
+//#region src/app/lib/page-context.tsx
+const GLOBAL_KEY = "__mosage_page_context__";
+const g = globalThis;
+if (!g[GLOBAL_KEY]) g[GLOBAL_KEY] = createContext(null);
+const PageContext = g[GLOBAL_KEY];
+/** 1-based page number of the page currently rendering. `0` outside a page. */
+function useDocPageNumber() {
+	const ctx = useContext(PageContext);
+	return ctx ? ctx.index + 1 : 0;
+}
+/** Total page count of the document being rendered. `0` outside a page. */
+function useDocPageCount() {
+	const ctx = useContext(PageContext);
+	return ctx ? ctx.total : 0;
+}
+//#endregion
+//#region src/app/components/numbering.tsx
+const REF_ATTR = "data-od-ref";
+const LIST_OF_ATTR = "data-od-list-of";
+function nameFor(kind, vocabulary) {
+	return kind === "table" ? vocabulary.table : vocabulary.figure;
+}
+/**
+* A numbered figure or table. The number comes from a scan of the rendered
+* pages, not from a counter in the source, so inserting a figure halfway
+* through a document renumbers everything after it — including the references
+* to it — without anyone editing a number.
+*
+* Caption and content are one block, so a `flow()` section never separates them.
+*/
+function Figure({ id, caption, kind = "figure", captionPosition, captionText, style, captionStyle, className, children }) {
+	const generated = useId();
+	const labelId = id ?? generated;
+	const entry = useDocLabel(labelId);
+	const vocabulary = useLabelVocabulary();
+	const position = captionPosition ?? (kind === "table" ? "above" : "below");
+	const text = captionText ?? (typeof caption === "string" || typeof caption === "number" ? String(caption) : "");
+	const captionNode = caption ? /* @__PURE__ */ jsxs("figcaption", {
+		style: {
+			fontSize: "var(--od-size-caption)",
+			color: "var(--od-muted)",
+			lineHeight: 1.4,
+			margin: position === "above" ? "0 0 6px" : "6px 0 0",
+			...captionStyle
+		},
+		children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				fontWeight: 600,
+				color: "var(--od-text)"
+			},
+			children: [
+				nameFor(kind, vocabulary),
+				" ",
+				entry?.number ?? ""
+			]
+		}), caption ? /* @__PURE__ */ jsxs("span", { children: [" — ", caption] }) : null]
+	}) : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		[LABEL_ATTR]: kind,
+		[LABEL_ID_ATTR]: labelId,
+		[LABEL_TEXT_ATTR]: text,
+		className,
+		style: {
+			margin: "0 0 16px",
+			...style
+		},
+		children: [
+			position === "above" && captionNode,
+			children,
+			position === "below" && captionNode
+		]
+	});
+}
+/**
+* A cross-reference that resolves after layout: "Figure 3", plus the page when
+* the target is elsewhere. Never write "see Figure 3 on page 12" by hand — both
+* numbers move.
+*/
+function Ref({ to, showPage = "auto", style, className }) {
+	const entry = useDocLabel(to);
+	const vocabulary = useLabelVocabulary();
+	const here = useDocPageNumber();
+	if (!entry) return /* @__PURE__ */ jsxs("span", {
+		"data-od-ref-unresolved": to,
+		className,
+		style: {
+			color: "var(--od-accent)",
+			...style
+		},
+		children: [
+			"[?",
+			to,
+			"]"
+		]
+	});
+	const name = entry.kind === "footnote" ? "" : `${nameFor(entry.kind, vocabulary)} `;
+	const withPage = showPage === "auto" ? entry.page !== here : showPage;
+	const parts = onPageParts(vocabulary);
+	return /* @__PURE__ */ jsxs("span", {
+		[REF_ATTR]: to,
+		className,
+		style,
+		children: [
+			name,
+			entry.number,
+			withPage && parts && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				parts[0],
+				/* @__PURE__ */ jsx("span", {
+					["data-od-ref-page"]: "",
+					children: entry.page
+				}),
+				parts[1]
+			] }),
+			withPage && !parts && vocabulary.onPage
+		]
+	});
+}
+/**
+* The document's figures or tables as a contents list. Same lifecycle as
+* `<TableOfContents>`: empty on the first render pass, filled once the scan has
+* run — including before an export serializes.
+*/
+function ListOf({ kind = "figure", showPageNumbers = true, style, className }) {
+	const entries = useDocLabels(kind);
+	const vocabulary = useLabelVocabulary();
+	return /* @__PURE__ */ jsx("div", {
+		[LIST_OF_ATTR]: kind,
+		className,
+		style: {
+			fontFamily: "var(--od-font-body)",
+			fontSize: "var(--od-size-body)",
+			color: "var(--od-text)",
+			...style
+		},
+		children: entries.map((entry) => /* @__PURE__ */ jsxs("div", {
+			[REF_ATTR]: entry.id,
+			style: {
+				display: "flex",
+				alignItems: "baseline",
+				gap: 8,
+				marginBottom: 6
+			},
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						flex: "none",
+						color: "var(--od-muted)"
+					},
+					children: [
+						nameFor(kind, vocabulary),
+						" ",
+						entry.number
+					]
+				}),
+				/* @__PURE__ */ jsx("span", { children: entry.text }),
+				showPageNumbers && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					style: {
+						flex: 1,
+						borderBottom: "1px dotted var(--od-rule)",
+						transform: "translateY(-3px)"
+					}
+				}), /* @__PURE__ */ jsx("span", {
+					["data-od-ref-page"]: "",
+					style: { fontVariantNumeric: "tabular-nums" },
+					children: entry.page
+				})] })
+			]
+		}, entry.id))
+	});
+}
+function ListOfFigures(props) {
+	return /* @__PURE__ */ jsx(ListOf, {
+		...props,
+		kind: "figure"
+	});
+}
+function ListOfTables(props) {
+	return /* @__PURE__ */ jsx(ListOf, {
+		...props,
+		kind: "table"
+	});
+}
+//#endregion
+//#region src/app/components/data-table.tsx
+function normalizeColumn(column) {
+	return typeof column === "string" ? { key: column } : column;
+}
+function isNumber(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+/** A column of numbers aligns right; anything mixed stays left. */
+function inferAlign(rows, key) {
+	let seen = 0;
+	for (const row of rows) {
+		const value = row[key];
+		if (value === null || value === void 0 || value === "") continue;
+		if (!isNumber(value)) return "left";
+		seen++;
+	}
+	return seen > 0 ? "right" : "left";
+}
+function formatValue(value, format, row, emptyValue) {
+	if (typeof format === "function") return format(value, row);
+	if (value === null || value === void 0 || value === "") return emptyValue;
+	if (isNumber(value)) {
+		if (format === "integer") return Math.round(value).toLocaleString();
+		if (format === "percent") return `${(value * 100).toLocaleString(void 0, { maximumFractionDigits: 1 })}%`;
+		if (format === "text") return String(value);
+		return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+	}
+	return String(value);
+}
+/**
+* A print-shaped table from data, so the numbers in a report come from a file
+* instead of being retyped into JSX. Alignment and grouping follow the column's
+* contents, which is the part people get wrong by hand.
+*/
+function DataTable({ rows, columns, caption, id, limit, compact = false, emptyValue = "—", style, className }) {
+	const resolved = (columns ?? Object.keys(rows[0] ?? {})).map(normalizeColumn);
+	const shown = limit !== void 0 ? rows.slice(0, limit) : rows;
+	const hidden = rows.length - shown.length;
+	const cellPadding = compact ? "4px 8px" : "7px 8px";
+	const table = /* @__PURE__ */ jsxs("table", {
+		className,
+		style: {
+			width: "100%",
+			borderCollapse: "collapse",
+			tableLayout: "fixed",
+			margin: 0,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: resolved.map((column) => {
+				const align = column.align ?? inferAlign(rows, column.key);
+				return /* @__PURE__ */ jsx("th", {
+					style: {
+						textAlign: align,
+						width: column.width,
+						fontFamily: "var(--od-font-heading)",
+						fontSize: 11,
+						fontWeight: 600,
+						letterSpacing: "0.04em",
+						textTransform: "uppercase",
+						color: "var(--od-muted)",
+						borderBottom: "1px solid var(--od-rule)",
+						padding: "0 8px 6px"
+					},
+					children: column.label ?? column.key
+				}, column.key);
+			}) }) }),
+			/* @__PURE__ */ jsx("tbody", { children: shown.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: resolved.map((column) => {
+				const align = column.align ?? inferAlign(rows, column.key);
+				return /* @__PURE__ */ jsx("td", {
+					style: {
+						textAlign: align,
+						fontSize: compact ? 11 : 12,
+						padding: cellPadding,
+						borderBottom: "1px solid var(--od-rule)",
+						fontVariantNumeric: align === "right" ? "tabular-nums" : void 0,
+						overflowWrap: "anywhere"
+					},
+					children: formatValue(row[column.key], column.format, row, emptyValue)
+				}, column.key);
+			}) }, rowIndex)) }),
+			hidden > 0 && /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+				colSpan: resolved.length,
+				style: {
+					fontSize: "var(--od-size-caption)",
+					color: "var(--od-muted)",
+					padding: "6px 8px 0"
+				},
+				children: [
+					hidden,
+					" more row",
+					hidden === 1 ? "" : "s",
+					" not shown"
+				]
+			}) }) })
+		]
+	});
+	if (!caption) return table;
+	return /* @__PURE__ */ jsx(Figure, {
+		kind: "table",
+		caption,
+		...id !== void 0 ? { id } : {},
+		children: table
+	});
+}
+//#endregion
+//#region src/app/components/diagram.tsx
+/**
+* A diagram compiled from Mermaid-flavoured text at build time. The SVG is
+* inlined rather than referenced through `<img>` so it inherits the document's
+* theme variables — an `<img src="data:…">` would be painted in a document of
+* its own, with none of this one's colours or faces.
+*/
+function Diagram({ chart, caption, captionText, kind = "figure", id, width, align = "center", style, className }) {
+	const drawing = /* @__PURE__ */ jsx("div", {
+		className: caption ? void 0 : className,
+		style: {
+			width: width ?? chart.width,
+			maxWidth: "100%",
+			marginLeft: align === "center" ? "auto" : void 0,
+			marginRight: align === "center" ? "auto" : void 0,
+			...caption ? void 0 : style
+		},
+		dangerouslySetInnerHTML: { __html: chart.svg }
+	});
+	if (!caption) return drawing;
+	return /* @__PURE__ */ jsx(Figure, {
+		...id ? { id } : {},
+		caption,
+		...captionText ? { captionText } : {},
+		kind,
+		className,
+		...style ? { style } : {},
+		children: drawing
+	});
+}
+//#endregion
+//#region src/app/components/image-placeholder.tsx
+/**
+* Stands in for an image the user has to supply (a chart from their data, a
+* product screenshot). Use it instead of inventing filler — never for
+* decoration.
+*/
+function ImagePlaceholder({ hint, width = "100%", height = 200, style, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-od-image-placeholder": "",
+		className,
+		style: {
+			width,
+			height,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			textAlign: "center",
+			padding: 16,
+			boxSizing: "border-box",
+			border: "1px dashed var(--od-rule, #d4d4d8)",
+			borderRadius: "var(--od-radius, 6px)",
+			background: "repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 8px, transparent 8px 16px)",
+			color: "var(--od-muted, #6b7280)",
+			fontFamily: "var(--od-font-body, system-ui, sans-serif)",
+			fontSize: "var(--od-size-caption, 10px)",
+			lineHeight: 1.4,
+			...style
+		},
+		children: hint
+	});
+}
+//#endregion
+//#region src/app/components/table-of-contents.tsx
+const TOC_ENTRY_ATTR = "data-od-toc-entry";
+/** Read by the Word export, which rebuilds the list as a contents field. */
+const TOC_DEPTH_ATTR = "data-od-toc-depth";
+const TOC_LEVEL_ATTR = "data-od-toc-level";
+/**
+* Renders the document's headings as a contents list. The outline is filled in
+* by a DOM scan after the pages render, so this component is empty on the very
+* first pass and populated on the next — including during PDF/HTML export,
+* which scans before serializing.
+*/
+function TableOfContents({ maxLevel = 2, showPageNumbers = true, includeOwnPage = false, indent = 20, style, className }) {
+	const outline = useDocOutline();
+	const ownPage = useDocPageNumber();
+	const entries = outline.filter((entry) => entry.level <= maxLevel && (includeOwnPage || entry.page !== ownPage));
+	return /* @__PURE__ */ jsx("div", {
+		[TOC_ATTR]: "",
+		[TOC_DEPTH_ATTR]: maxLevel,
+		className,
+		style: {
+			fontFamily: "var(--od-font-body)",
+			fontSize: "var(--od-size-body)",
+			color: "var(--od-text)",
+			...style
+		},
+		children: entries.map((entry) => /* @__PURE__ */ jsxs("div", {
+			[TOC_ENTRY_ATTR]: entry.id,
+			[TOC_LEVEL_ATTR]: entry.level,
+			style: {
+				display: "flex",
+				alignItems: "baseline",
+				gap: 8,
+				paddingLeft: (entry.level - 1) * indent,
+				marginBottom: entry.level === 1 ? 10 : 6,
+				fontWeight: entry.level === 1 ? 600 : 400,
+				color: entry.level === 1 ? "var(--od-text)" : "var(--od-muted)"
+			},
+			children: [/* @__PURE__ */ jsx("span", { children: entry.text }), showPageNumbers && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				style: {
+					flex: 1,
+					borderBottom: "1px dotted var(--od-rule)",
+					transform: "translateY(-3px)"
+				}
+			}), /* @__PURE__ */ jsx("span", {
+				["data-od-toc-page"]: "",
+				style: { fontVariantNumeric: "tabular-nums" },
+				children: entry.page
+			})] })]
+		}, entry.id))
+	});
+}
+//#endregion
+//#region src/app/lib/flow.ts
+/**
+* Flattens fragments so `flow(<>…</>)` yields one block per element the author
+* wrote, not a single block containing the whole fragment.
+*/
+function toBlocks(node) {
+	const out = [];
+	for (const child of Children.toArray(node)) {
+		if (!isValidElement(child)) continue;
+		if (child.type === Fragment) {
+			out.push(...toBlocks(child.props.children));
+			continue;
+		}
+		out.push(child);
+	}
+	return out;
+}
+/**
+* Wraps continuous content so the framework paginates it, instead of the author
+* hand-splitting sections into fixed pages. Each direct child is one atomic
+* block — a heading, a paragraph, a table — that never straddles a page break.
+*/
+function flow(children, opts = {}) {
+	return {
+		__odFlow: true,
+		blocks: toBlocks(children),
+		...opts
+	};
+}
+function isFlowSection(entry) {
+	return typeof entry === "object" && entry !== null && entry.__odFlow === true;
+}
+/**
+* Greedy top-to-bottom packing: fill a page until the next block would cross
+* the bottom edge, then push that block — plus anything glued to it — onto the
+* next page. Blocks are atomic; nothing is split mid-block.
+*
+* Footnotes are packed from the same budget: a block that carries notes brings
+* their height with it, because those notes print at the foot of whichever page
+* the block lands on.
+*/
+function paginateBlocks(blocks, available, opts = {}) {
+	const overhead = opts.footnoteOverhead ?? 0;
+	const pages = [];
+	const overflowing = [];
+	let current = [];
+	let used = 0;
+	let notes = 0;
+	const heightOf = (indices) => indices.reduce((sum, index) => sum + (blocks[index]?.height ?? 0), 0);
+	const notesOf = (indices) => indices.reduce((sum, index) => sum + (blocks[index]?.footnoteHeight ?? 0), 0);
+	/** A page with no notes pays nothing; the first note also pays for the rule. */
+	const reserve = (total) => total > 0 ? total + overhead : 0;
+	const closePage = () => {
+		if (current.length === 0) return;
+		pages.push(current);
+		current = [];
+		used = 0;
+		notes = 0;
+	};
+	blocks.forEach((block, index) => {
+		const own = block.footnoteHeight ?? 0;
+		if (block.height + reserve(own) > available) overflowing.push(index);
+		if (block.breakBefore) closePage();
+		if (current.length > 0 && used + block.height + reserve(notes + own) > available) {
+			let splitAt = current.length;
+			while (splitAt > 0 && blocks[current[splitAt - 1]]?.keepWithNext) splitAt--;
+			if (block.keepWithPrevious && splitAt === current.length) splitAt--;
+			if (splitAt > 0 && splitAt < current.length) {
+				const moved = current.slice(splitAt);
+				pages.push(current.slice(0, splitAt));
+				current = moved;
+				used = heightOf(moved);
+				notes = notesOf(moved);
+			} else closePage();
+		}
+		current.push(index);
+		used += block.height;
+		notes += own;
+	});
+	closePage();
+	return {
+		pages,
+		overflowing
+	};
+}
+//#endregion
+export { DEFAULT_ORIENTATION, DEFAULT_PAGE_SIZE, DataTable, Diagram, DiagramSyntaxError, Figure, Footnote, Footnotes, ImagePlaceholder, ListOf, ListOfFigures, ListOfTables, ORIENTATIONS, PAGE_SIZES, PAGE_SIZE_NAMES, Ref, TableOfContents, compileDiagram, cssVarsToString, defaultDesign, designToCssVars, flow, isFlowSection, isOrientation, isPageSizeName, paginateBlocks, parseDelimited, resolvePageGeometry, useDocLabel, useDocLabels, useDocOutline, useDocPageCount, useDocPageNumber };