reamkit 1.0.2 → 1.2.0

package/dist/esm/core/vector.d.ts

@@ -43,3 +43,5 @@ export declare class PathBuilder {
     close(): this;
     build(fillRule?: 'nonzero' | 'evenodd'): VectorPath;
 }
+export declare function flipTransform(m: readonly [number, number, number, number, number, number], pageHeight: number): [number, number, number, number, number, number];
+export declare function svgPathData(segments: ReadonlyArray<PathSegment>, fmt: (n: number) => string): string;

package/dist/esm/core/vector.js

@@ -44,5 +44,23 @@ var PathBuilder = class {
 		};
 	}
 };
+function flipTransform(m, pageHeight) {
+	return [
+		m[0],
+		-m[1],
+		m[2],
+		-m[3],
+		m[4],
+		pageHeight - m[5]
+	];
+}
+function svgPathData(segments, fmt) {
+	const parts = [];
+	for (const s of segments) if (s.op === "move") parts.push(`M ${fmt(s.x)} ${fmt(s.y)}`);
+	else if (s.op === "line") parts.push(`L ${fmt(s.x)} ${fmt(s.y)}`);
+	else if (s.op === "cubic") parts.push(`C ${fmt(s.x1)} ${fmt(s.y1)} ${fmt(s.x2)} ${fmt(s.y2)} ${fmt(s.x)} ${fmt(s.y)}`);
+	else parts.push("Z");
+	return parts.join(" ");
+}
 //#endregion
-export { PathBuilder };
+export { PathBuilder, flipTransform, svgPathData };

package/dist/esm/html/html-writer.d.ts

@@ -0,0 +1,4 @@
+import { DocumentWriter, WriteResult } from '../core/ir/adapters.js';
+import { FlowDoc } from '../core/ir/flow.js';
+export declare function writeHtml(flow: FlowDoc): WriteResult;
+export declare const htmlWriter: DocumentWriter<FlowDoc>;

package/dist/esm/html/html-writer.js

@@ -0,0 +1,464 @@
+import { FEATURES } from "../core/ir/features.js";
+import { detectImageFormat } from "../core/images.js";
+import { EMPTY_STYLE_SHEET, resolveParagraphProperties, resolveRunProperties } from "../core/style-cascade/resolver.js";
+import "../core/style-cascade/index.js";
+import { PathBuilder, flipTransform, svgPathData } from "../core/vector.js";
+import { arcPoint, arcToBeziers } from "../core/arc-to-bezier.js";
+import { buildChartScene } from "../core/drawingml/chart-geometry.js";
+import { buildShapePaths, buildShapeTransform, buildStroke } from "../core/drawingml/shape-render.js";
+import { sanitizeHref } from "../core/links.js";
+import { toBase64 } from "../core/bytes.js";
+//#region src/html/html-writer.ts
+function writeHtml(flow) {
+	const losses = [];
+	const out = [];
+	const notes = collectNoteNumbers(flow);
+	const ctx = {
+		resources: flow.resources,
+		losses,
+		notes,
+		referencedAnchors: collectReferencedAnchors(flow.body),
+		...flow.charts ? { charts: flow.charts } : {}
+	};
+	const lang = flow.language ?? "en-US";
+	const title = flow.info?.title ?? "Document";
+	out.push("<!DOCTYPE html>");
+	out.push(`<html lang="${escapeAttr(lang)}">`);
+	out.push("<head>");
+	out.push("<meta charset=\"utf-8\"/>");
+	out.push("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>");
+	out.push(`<title>${escapeText(title)}</title>`);
+	out.push(`<style>${BASE_CSS}</style>`);
+	out.push("</head>");
+	out.push("<body>");
+	out.push(`<article style="max-width: ${fmt(contentWidthPt(flow))}pt">`);
+	if (flow.headersFooters && flow.headersFooters.size > 0) losses.push({
+		severity: "dropped",
+		feature: FEATURES.headersFooters,
+		detail: "headers/footers have no fixed pages to band onto in flowed HTML"
+	});
+	for (const el of flow.body) emitBlock(out, el, ctx);
+	emitNotesSection(out, flow.footnotes, ctx.notes.footnotes, "fn", ctx);
+	emitNotesSection(out, flow.endnotes, ctx.notes.endnotes, "en", ctx);
+	out.push("</article>");
+	out.push("</body>");
+	out.push("</html>");
+	return {
+		bytes: new TextEncoder().encode(out.join("\n")),
+		losses
+	};
+}
+var htmlWriter = {
+	id: "html",
+	consumes: "flow",
+	supports: new Set([
+		FEATURES.text,
+		FEATURES.tables,
+		FEATURES.tablesNested,
+		FEATURES.lists,
+		FEATURES.images,
+		FEATURES.hyperlinks,
+		FEATURES.charts,
+		FEATURES.shapes,
+		FEATURES.rtl,
+		FEATURES.trackedChanges
+	]),
+	write: (doc) => writeHtml(doc)
+};
+var BASE_CSS = [
+	"body{margin:24pt;color:#000;background:#fff}",
+	"article{margin:0 auto}",
+	"p,h1,h2,h3,h4,h5,h6,figure{margin:0}",
+	"table{border-collapse:collapse}",
+	"td,th{vertical-align:top}",
+	"th{text-align:inherit}",
+	".tab{display:inline-block;min-width:18pt}",
+	"img{vertical-align:baseline}",
+	".notes{margin-top:18pt;font-size:smaller}",
+	".notes hr{margin:0 0 6pt;border:none;border-top:0.75pt solid #000;width:144pt;margin-left:0}"
+].join("");
+function collectReferencedAnchors(body) {
+	const out = /* @__PURE__ */ new Set();
+	const visit = (els) => {
+		for (const el of els) if (el.kind === "paragraph") {
+			for (const r of el.paragraph.runs) if (r.anchor !== void 0) out.add(r.anchor);
+		} else if (el.kind === "table") for (const row of el.table.rows) for (const cell of row.cells) visit(cell.content);
+		else if (el.kind === "shape" && el.shape.text) visit(el.shape.text.content);
+	};
+	visit(body);
+	return out;
+}
+function collectNoteNumbers(flow) {
+	const footnotes = /* @__PURE__ */ new Map();
+	const endnotes = /* @__PURE__ */ new Map();
+	const visit = (els) => {
+		for (const el of els) if (el.kind === "paragraph") for (const r of el.paragraph.runs) {
+			if (r.footnoteRef !== void 0 && !footnotes.has(r.footnoteRef)) footnotes.set(r.footnoteRef, footnotes.size + 1);
+			if (r.endnoteRef !== void 0 && !endnotes.has(r.endnoteRef)) endnotes.set(r.endnoteRef, endnotes.size + 1);
+		}
+		else if (el.kind === "table") for (const row of el.table.rows) for (const cell of row.cells) visit(cell.content);
+		else if (el.kind === "shape" && el.shape.text) visit(el.shape.text.content);
+	};
+	visit(flow.body);
+	return {
+		footnotes,
+		endnotes
+	};
+}
+function emitNotesSection(out, content, numbers, prefix, ctx) {
+	if (!content || numbers.size === 0) return;
+	const ordered = [...numbers.entries()].sort((a, b) => a[1] - b[1]);
+	out.push("<section class=\"notes\"><hr/><ol>");
+	for (const [id, n] of ordered) {
+		const body = content.get(id);
+		out.push(`<li id="${prefix}-${n}">`);
+		if (body) for (const el of body) emitBlock(out, el, ctx);
+		out.push(`<a href="#${prefix}ref-${n}">\u21a9</a></li>`);
+	}
+	out.push("</ol></section>");
+}
+function emitBlock(out, el, ctx) {
+	if (el.kind === "paragraph") emitParagraph(out, el.paragraph, ctx);
+	else if (el.kind === "table") emitTable(out, el.table, ctx);
+	else if (el.kind === "image") emitImageBlock(out, el.image, ctx);
+	else if (el.kind === "chart") emitChartBlock(out, el.chart, ctx);
+	else emitShapeBlock(out, el.shape, ctx);
+}
+var approxTextWidth = (text, sizePt) => text.length * sizePt * .55;
+var blockFigureCss = (pp) => {
+	const css = [];
+	const align = pp.alignment === "center" || pp.alignment === "right" ? pp.alignment : void 0;
+	if (align) css.push(`text-align:${align}`);
+	if (pp.spacingBefore !== void 0 && pp.spacingBefore > 0) css.push(`margin-top:${fmt(pp.spacingBefore)}pt`);
+	if (pp.spacingAfter !== void 0 && pp.spacingAfter > 0) css.push(`margin-bottom:${fmt(pp.spacingAfter)}pt`);
+	return css.length > 0 ? ` style="${css.join(";")}"` : "";
+};
+var svgOpen = (w, h, label) => `<svg viewBox="0 0 ${fmt(w)} ${fmt(h)}" width="${fmt(w)}pt" height="${fmt(h)}pt" style="max-width:100%;height:auto" overflow="visible" xmlns="http://www.w3.org/2000/svg" role="img"${label ? ` aria-label="${escapeAttr(label)}"` : ""}>`;
+var strokeAttrs = (stroke) => {
+	if (!stroke) return "";
+	let out = ` stroke="#${stroke.colorHex}" stroke-width="${fmt(stroke.widthPt)}"`;
+	if (stroke.dash && stroke.dash.length > 0) out += ` stroke-dasharray="${stroke.dash.map(fmt).join(" ")}"`;
+	if (stroke.cap && stroke.cap !== "butt") out += ` stroke-linecap="${stroke.cap}"`;
+	if (stroke.join) out += ` stroke-linejoin="${stroke.join}"`;
+	return out;
+};
+function emitChartBlock(out, block, ctx) {
+	const chart = ctx.charts?.get(block.chartRelId);
+	const label = block.altText ?? chart?.title;
+	const figure = `<figure${blockFigureCss(block.paragraphProperties)}>`;
+	if (!chart) {
+		ctx.losses.push({
+			severity: "dropped",
+			feature: FEATURES.charts,
+			detail: `chart part '${block.chartRelId}' not supplied`
+		});
+		return;
+	}
+	const w = block.width;
+	const h = block.height;
+	const scene = buildChartScene(chart, w, h, approxTextWidth);
+	if (!scene) {
+		ctx.losses.push({
+			severity: "degraded",
+			feature: FEATURES.charts,
+			detail: `unsupported chart type '${chart.type}' — placeholder box`
+		});
+		out.push(figure + svgOpen(w, h, label) + `<rect x="0.5" y="0.5" width="${fmt(w - 1)}" height="${fmt(h - 1)}" fill="none" stroke="#D9D9D9"/></svg></figure>`);
+		return;
+	}
+	const svg = [figure, svgOpen(w, h, label)];
+	svg.push(`<g transform="matrix(1 0 0 -1 0 ${fmt(h)})">`);
+	for (const pg of scene.polygons ?? []) svg.push(polygonSvg(pg));
+	for (const r of scene.rects) svg.push(rectSvg(r));
+	for (const pl of scene.polylines) svg.push(polylineSvg(pl));
+	for (const wd of scene.wedges) svg.push(wedgeSvg(wd));
+	svg.push("</g>");
+	const anchor = {
+		left: "start",
+		center: "middle",
+		right: "end"
+	};
+	for (const l of scene.labels) svg.push(labelSvg(l, h, anchor[l.align]));
+	svg.push("</svg></figure>");
+	out.push(svg.join(""));
+}
+function rectSvg(r) {
+	const fill = r.fillHex ? `#${r.fillHex}` : "none";
+	const stroke = r.strokeHex ? ` stroke="#${r.strokeHex}" stroke-width="${fmt(r.strokeWidthPt ?? 1)}"` : "";
+	return `<rect x="${fmt(r.x)}" y="${fmt(r.y)}" width="${fmt(r.w)}" height="${fmt(r.h)}" fill="${fill}"${stroke}/>`;
+}
+var pointsAttr = (points) => points.map(([x, y]) => `${fmt(x)},${fmt(y)}`).join(" ");
+function polylineSvg(p) {
+	return `<polyline points="${pointsAttr(p.points)}" fill="none" stroke="#${p.strokeHex}" stroke-width="${fmt(p.widthPt)}"/>`;
+}
+function polygonSvg(p) {
+	const stroke = p.strokeHex ? ` stroke="#${p.strokeHex}" stroke-width="${fmt(p.widthPt ?? 1)}"` : "";
+	return `<polygon points="${pointsAttr(p.points)}" fill="#${p.fillHex}"${stroke}/>`;
+}
+function wedgeSvg(w) {
+	const start = arcPoint(w.cx, w.cy, w.r, w.r, w.startRad);
+	const b = new PathBuilder().moveTo(w.cx, w.cy).lineTo(start[0], start[1]).append(arcToBeziers(w.cx, w.cy, w.r, w.r, w.startRad, w.sweepRad)).close();
+	const stroke = w.strokeHex ? ` stroke="#${w.strokeHex}" stroke-width="1"` : "";
+	return `<path d="${svgPathData(b.build().segments, fmt)}" fill="#${w.fillHex}"${stroke}/>`;
+}
+function labelSvg(l, sceneH, anchor) {
+	return `<text x="${fmt(l.x)}" y="${fmt(sceneH - l.y)}" font-size="${fmt(l.sizePt)}" font-family="sans-serif" fill="#${l.colorHex}" text-anchor="${anchor}">${escapeText(l.text)}</text>`;
+}
+function emitShapeBlock(out, shape, ctx) {
+	const w = shape.width;
+	const h = shape.height;
+	const paths = buildShapePaths(shape.geometry, w, h);
+	const fill = shape.fill.kind === "solid" && shape.fill.colorHex ? `#${shape.fill.colorHex}` : "none";
+	const stroke = strokeAttrs(buildStroke(shape.line));
+	const t = shape.transform;
+	const transform = ` transform="matrix(${flipTransform(buildShapeTransform(0, 0, w, h, t?.rotation60k ?? 0, t?.flipH ?? false, t?.flipV ?? false), h).map(fmt).join(" ")})"`;
+	const svg = [svgOpen(w, h, shape.altText)];
+	for (const path of paths) {
+		const rule = path.fillRule === "evenodd" ? " fill-rule=\"evenodd\"" : "";
+		svg.push(`<path d="${svgPathData(path.segments, fmt)}" fill="${fill}"${rule}${stroke}${transform}/>`);
+	}
+	svg.push("</svg>");
+	const figureCss = blockFigureCss(shape.paragraphProperties);
+	const text = shape.text;
+	if (!text || text.content.length === 0) {
+		out.push(`<figure${figureCss}>${svg.join("")}</figure>`);
+		return;
+	}
+	const justify = text.anchor === "ctr" ? "center" : text.anchor === "b" ? "flex-end" : "flex-start";
+	const il = text.insetLeft ?? 7.2;
+	const ir = text.insetRight ?? 7.2;
+	const it = text.insetTop ?? 3.6;
+	const ib = text.insetBottom ?? 3.6;
+	out.push(`<figure${figureCss}><div style="position:relative;width:${fmt(w)}pt;height:${fmt(h)}pt;max-width:100%"><div style="position:absolute;left:0;top:0">${svg.join("")}</div><div style="position:absolute;left:${fmt(il)}pt;right:${fmt(ir)}pt;top:${fmt(it)}pt;bottom:${fmt(ib)}pt;display:flex;flex-direction:column;justify-content:${justify};overflow:hidden">`);
+	for (const child of text.content) emitBlock(out, child, ctx);
+	out.push("</div></div></figure>");
+}
+function emitParagraph(out, p, ctx) {
+	const resolved = resolveParagraphProperties(p.properties, EMPTY_STYLE_SHEET);
+	const lvl = resolved.outlineLevel;
+	const tag = lvl !== void 0 && lvl >= 0 && lvl <= 8 ? `h${Math.min(lvl, 5) + 1}` : "p";
+	const style = paragraphCss(resolved);
+	const dir = resolved.bidi ? " dir=\"rtl\"" : "";
+	const anchored = (p.bookmarks ?? []).filter((b) => ctx.referencedAnchors.has(b));
+	const idAttr = anchored.length > 0 ? ` id="bm-${encodeURIComponent(anchored[0])}"` : "";
+	const extraAnchors = anchored.slice(1).map((b) => `<span id="bm-${encodeURIComponent(b)}"></span>`).join("");
+	const open = `<${tag}${dir}${idAttr}${style ? ` style="${style}"` : ""}>${extraAnchors}`;
+	const parts = [];
+	for (const run of p.runs) parts.push(runHtml(run, p, ctx));
+	out.push(`${open}${parts.join("") || "&nbsp;"}</${tag}>`);
+}
+function paragraphCss(r) {
+	const css = [];
+	if (r.alignment === "center" || r.alignment === "right") css.push(`text-align:${r.alignment}`);
+	else if (r.alignment === "both" || r.alignment === "distribute") css.push("text-align:justify");
+	if (r.spacingBefore > 0) css.push(`margin-top:${fmt(r.spacingBefore)}pt`);
+	if (r.spacingAfter > 0) css.push(`margin-bottom:${fmt(r.spacingAfter)}pt`);
+	if (r.indentLeft !== 0) css.push(`margin-left:${fmt(r.indentLeft)}pt`);
+	if (r.indentRight !== 0) css.push(`margin-right:${fmt(r.indentRight)}pt`);
+	if (r.indentFirstLine !== 0) css.push(`text-indent:${fmt(r.indentFirstLine)}pt`);
+	if (r.spacingLine > 0) if (r.spacingLineRule === "auto") css.push(`line-height:${fmt(r.spacingLine / 12)}`);
+	else css.push(`line-height:${fmt(r.spacingLine)}pt`);
+	if (r.pageBreakBefore) css.push("break-before:page");
+	return css.join(";");
+}
+function runHtml(run, p, ctx) {
+	if (run.footnoteRef !== void 0 || run.endnoteRef !== void 0) {
+		const isFoot = run.footnoteRef !== void 0;
+		const n = isFoot ? ctx.notes.footnotes.get(run.footnoteRef) : ctx.notes.endnotes.get(run.endnoteRef);
+		if (n === void 0) return "";
+		const prefix = isFoot ? "fn" : "en";
+		return `<sup><a href="#${prefix}-${n}" id="${prefix}ref-${n}">${n}</a></sup>`;
+	}
+	if (run.noteNumber) return "";
+	if (run.math !== void 0) {
+		ctx.losses.push({
+			severity: "dropped",
+			feature: FEATURES.math,
+			detail: "inline math not rendered by the HTML writer (v0)"
+		});
+		return "";
+	}
+	if (run.inlineImage) {
+		const img = run.inlineImage;
+		const src = dataUri(img.resource, ctx.resources);
+		if (!src) return "";
+		return `<img src="${src}" style="width:${fmt(img.width)}pt;height:${fmt(img.height)}pt" alt=""/>`;
+	}
+	if (run.text.length === 0) return "";
+	const resolved = resolveRunProperties(run.properties, p.properties, EMPTY_STYLE_SHEET);
+	const style = runCss(resolved);
+	let html = `<span${resolved.rtl ? " dir=\"rtl\"" : ""}${style ? ` style="${style}"` : ""}>${textHtml(run.text)}</span>`;
+	if (resolved.verticalAlign === "superscript") html = `<sup>${html}</sup>`;
+	else if (resolved.verticalAlign === "subscript") html = `<sub>${html}</sub>`;
+	if (run.href === void 0 && run.anchor !== void 0) return `<a href="#bm-${encodeURIComponent(run.anchor)}">${html}</a>`;
+	if (run.href !== void 0) {
+		const safe = sanitizeHref(run.href);
+		if (safe !== void 0) html = `<a href="${escapeAttr(safe)}">${html}</a>`;
+		else ctx.losses.push({
+			severity: "degraded",
+			feature: FEATURES.hyperlinks,
+			detail: `hyperlink target with a disallowed scheme rendered as plain text`
+		});
+	}
+	return html;
+}
+function runCss(r) {
+	const css = [];
+	const family = r.fontFamily.ascii;
+	if (family) css.push(`font-family:${JSON.stringify(family)}`);
+	css.push(`font-size:${fmt(r.fontSizePt)}pt`);
+	if (r.bold) css.push("font-weight:700");
+	if (r.italic) css.push("font-style:italic");
+	const deco = [];
+	const underlined = r.underline !== "none";
+	if (underlined) deco.push("underline");
+	if (r.strike) deco.push("line-through");
+	if (deco.length > 0) {
+		css.push(`text-decoration-line:${deco.join(" ")}`);
+		const style = underlined ? decorationStyle(r.underline) : void 0;
+		if (style) css.push(`text-decoration-style:${style}`);
+	}
+	if (r.colorHex !== "000000") css.push(`color:#${r.colorHex}`);
+	return css.join(";");
+}
+function decorationStyle(u) {
+	switch (u) {
+		case "double": return "double";
+		case "dotted":
+		case "dottedHeavy": return "dotted";
+		case "dash":
+		case "dashHeavy": return "dashed";
+		case "wave": return "wavy";
+		default: return;
+	}
+}
+function textHtml(text) {
+	return escapeText(text).replaceAll("	", "<span class=\"tab\"></span>").replaceAll("\n", "<br/>");
+}
+function emitTable(out, table, ctx) {
+	const css = [];
+	if (table.properties.widthPt !== void 0) css.push(`width:${fmt(table.properties.widthPt)}pt`);
+	else if (table.properties.widthFraction !== void 0) css.push(`width:${fmt(table.properties.widthFraction * 100)}%`);
+	if (table.properties.alignment === "center") css.push("margin-left:auto;margin-right:auto");
+	else if (table.properties.alignment === "right") css.push("margin-left:auto");
+	out.push(`<table${css.length > 0 ? ` style="${css.join(";")}"` : ""}>`);
+	if (table.grid.length > 0) {
+		out.push("<colgroup>");
+		for (const w of table.grid) out.push(`<col style="width:${fmt(w)}pt"/>`);
+		out.push("</colgroup>");
+	}
+	const colStarts = table.rows.map((row) => {
+		let col = 0;
+		return row.cells.map((cell) => {
+			const start = col;
+			col += cell.properties.colSpan ?? 1;
+			return start;
+		});
+	});
+	for (let ri = 0; ri < table.rows.length; ri++) {
+		const row = table.rows[ri];
+		out.push("<tr>");
+		for (let ci = 0; ci < row.cells.length; ci++) {
+			const cell = row.cells[ci];
+			const merge = cell.properties.merge;
+			if (merge === "middle" || merge === "end") continue;
+			const rowSpan = merge === "start" ? mergeRowSpan(table, colStarts, ri, colStarts[ri][ci]) : 1;
+			emitCell(out, cell, table, ctx, {
+				isHeader: row.properties.isHeader === true,
+				firstRow: ri === 0,
+				lastRow: ri === table.rows.length - 1,
+				firstCol: colStarts[ri][ci] === 0,
+				lastCol: colStarts[ri][ci] + (cell.properties.colSpan ?? 1) >= table.grid.length,
+				rowSpan
+			});
+		}
+		out.push("</tr>");
+	}
+	out.push("</table>");
+}
+function mergeRowSpan(table, colStarts, startRow, colStart) {
+	let span = 1;
+	for (let r = startRow + 1; r < table.rows.length; r++) {
+		const row = table.rows[r];
+		const idx = colStarts[r].findIndex((c) => c === colStart);
+		const merge = (idx >= 0 ? row.cells[idx] : void 0)?.properties.merge;
+		if (merge !== "middle" && merge !== "end") break;
+		span++;
+		if (merge === "end") break;
+	}
+	return span;
+}
+function emitCell(out, cell, table, ctx, pos) {
+	const tag = pos.isHeader ? "th" : "td";
+	const attrs = [];
+	const colSpan = cell.properties.colSpan ?? 1;
+	if (colSpan > 1) attrs.push(`colspan="${colSpan}"`);
+	if (pos.rowSpan > 1) attrs.push(`rowspan="${pos.rowSpan}"`);
+	const css = [];
+	const t = table.properties.borders;
+	const c = cell.properties.borders;
+	pushBorder(css, "top", c?.top ?? (pos.firstRow ? t?.top : t?.insideH));
+	pushBorder(css, "bottom", c?.bottom ?? (pos.lastRow ? t?.bottom : t?.insideH));
+	pushBorder(css, "left", c?.left ?? (pos.firstCol ? t?.left : t?.insideV));
+	pushBorder(css, "right", c?.right ?? (pos.lastCol ? t?.right : t?.insideV));
+	if (cell.properties.shading) css.push(`background-color:#${cell.properties.shading.colorHex}`);
+	const margins = cell.properties.margins ?? table.properties.defaultCellMargins;
+	const padTop = margins?.top ?? 0;
+	const padRight = margins?.right ?? 5.4;
+	const padBottom = margins?.bottom ?? 0;
+	const padLeft = margins?.left ?? 5.4;
+	css.push(`padding:${fmt(padTop)}pt ${fmt(padRight)}pt ${fmt(padBottom)}pt ${fmt(padLeft)}pt`);
+	out.push(`<${tag}${attrs.length > 0 ? ` ${attrs.join(" ")}` : ""} style="${css.join(";")}">`);
+	for (const child of cell.content) emitBlock(out, child, ctx);
+	out.push(`</${tag}>`);
+}
+function pushBorder(css, side, border) {
+	if (!border || border.style === "none") return;
+	const width = border.width ?? .5;
+	const style = border.style === "double" ? "double" : border.style === "dotted" ? "dotted" : border.style === "dashed" ? "dashed" : "solid";
+	css.push(`border-${side}:${fmt(width)}pt ${style} #${border.colorHex ?? "000000"}`);
+}
+function emitImageBlock(out, image, ctx) {
+	const src = dataUri(image.resource, ctx.resources);
+	if (!src) return;
+	const pp = image.paragraphProperties;
+	const align = pp.alignment === "center" || pp.alignment === "right" ? pp.alignment : void 0;
+	const css = [];
+	if (align) css.push(`text-align:${align}`);
+	if (pp.spacingBefore !== void 0 && pp.spacingBefore > 0) css.push(`margin-top:${fmt(pp.spacingBefore)}pt`);
+	if (pp.spacingAfter !== void 0 && pp.spacingAfter > 0) css.push(`margin-bottom:${fmt(pp.spacingAfter)}pt`);
+	const alt = image.altText ?? "";
+	out.push(`<figure${css.length > 0 ? ` style="${css.join(";")}"` : ""}><img src="${src}" style="width:${fmt(image.width)}pt;height:${fmt(image.height)}pt" alt="${escapeAttr(alt)}"/></figure>`);
+}
+var MIME_BY_FORMAT = {
+	jpeg: "image/jpeg",
+	png: "image/png",
+	jpeg2000: "image/jp2"
+};
+function dataUri(resource, store) {
+	if (resource === void 0) return void 0;
+	const bytes = store.get(resource);
+	if (!bytes) return void 0;
+	const format = detectImageFormat(bytes);
+	if (!format) return void 0;
+	return `data:${MIME_BY_FORMAT[format]};base64,${toBase64(bytes)}`;
+}
+function contentWidthPt(flow) {
+	const props = flow.sections[0]?.properties ?? flow.section;
+	const pageWidth = props?.pageSize?.width ?? 595;
+	const left = props?.margins?.left ?? 72;
+	const right = props?.margins?.right ?? 72;
+	return Math.max(72, pageWidth - left - right);
+}
+function escapeText(s) {
+	return s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function escapeAttr(s) {
+	return escapeText(s).replaceAll("\"", "&quot;");
+}
+function fmt(n) {
+	const r = Math.round(n * 100) / 100;
+	return Object.is(r, -0) ? "0" : String(r);
+}
+//#endregion
+export { htmlWriter, writeHtml };

package/dist/esm/index.d.ts

@@ -23,5 +23,6 @@ export { chainProviders, callerFontProvider, embeddedDocFontProvider, remoteFont
 export type { FontProvider, FontRequest, FontAnswer } from './core/fonts/provider.js';
 export { svgWriter, writeSvg } from './svg/svg-writer.js';
 export type { SvgWriteOptions } from './svg/svg-writer.js';
+export { htmlWriter, writeHtml } from './html/html-writer.js';
 export { layoutStyledDocument } from './layout/styled-layout.js';
 export type { LaidOutDocument } from './layout/page-doc.js';

package/dist/esm/index.js

@@ -15,7 +15,8 @@ import { createLanguageHyphenator, getHyphenator } from "./core/hyphenation/inde
 import { docxReader, readDocx } from "./word/docx-reader.js";
 import { readXlsx, xlsxReader } from "./excel/xlsx-reader.js";
 import { NO_FONT, callerFontProvider, chainProviders, embeddedDocFontProvider, isEmbeddingRestricted, localFontProvider, readOs2FsType, remoteFontProvider } from "./core/fonts/provider.js";
+import { htmlWriter, writeHtml } from "./html/html-writer.js";
 import { svgWriter, writeSvg } from "./svg/svg-writer.js";
 import { createConverter } from "./core/converter/facade.js";
 import { Ream } from "./core/converter/ream.js";
-export { ConversionLossError, FEATURES, FontRegistry, NO_FONT, Ream, ResourceStore, callerFontProvider, chainProviders, createConverter, createHyphenator, createLanguageHyphenator, docxReader, eighthPtToPt, embeddedDocFontProvider, emuToPt, fetchFontSet, formatLoss, getHyphenator, halfPtToPt, inchToPt, isEmbeddingRestricted, layoutStyledDocument, localFontProvider, mmToPt, parseTtf, pt, pxToPt, readDocx, readOs2FsType, readXlsx, remoteFontProvider, renderStyledPdf, resolveFamilyKey, signPdf, splitPatternBundle, subsetTtf, svgWriter, twipsToPt, writeSvg, xlsxReader };
+export { ConversionLossError, FEATURES, FontRegistry, NO_FONT, Ream, ResourceStore, callerFontProvider, chainProviders, createConverter, createHyphenator, createLanguageHyphenator, docxReader, eighthPtToPt, embeddedDocFontProvider, emuToPt, fetchFontSet, formatLoss, getHyphenator, halfPtToPt, htmlWriter, inchToPt, isEmbeddingRestricted, layoutStyledDocument, localFontProvider, mmToPt, parseTtf, pt, pxToPt, readDocx, readOs2FsType, readXlsx, remoteFontProvider, renderStyledPdf, resolveFamilyKey, signPdf, splitPatternBundle, subsetTtf, svgWriter, twipsToPt, writeHtml, writeSvg, xlsxReader };

package/dist/esm/layout/page-doc.d.ts

@@ -13,6 +13,9 @@ export interface TextToken {
     readonly kind: 'text';
     readonly text: string;
     readonly isSpace: boolean;
+    readonly href?: string;
+    readonly footnoteRef?: string;
+    readonly anchor?: string;
     readonly resolvedRun: ResolvedRunProperties;
     readonly font: FontResource;
     readonly fontSizePt: number;

package/dist/esm/layout/styled-layout.d.ts

@@ -23,6 +23,8 @@ export interface StyledRenderOptions {
     readonly section?: SectionProperties;
     readonly sections?: ReadonlyArray<Section>;
     readonly headersFooters?: ReadonlyMap<string, ReadonlyArray<BodyElement>>;
+    readonly footnotes?: ReadonlyMap<string, ReadonlyArray<BodyElement>>;
+    readonly endnotes?: ReadonlyMap<string, ReadonlyArray<BodyElement>>;
     readonly resources?: ResourceStore;
     readonly charts?: ReadonlyMap<string, Chart>;
     readonly pageWidth?: number;
@@ -35,6 +37,7 @@ export interface StyledRenderOptions {
     readonly info?: DocumentInfo;
     readonly pdfA?: PdfALevel;
     readonly tagged?: boolean;
+    readonly pdfUA?: boolean;
     readonly language?: string;
     readonly attachments?: ReadonlyArray<AttachedFile>;
     readonly signaturePlaceholder?: SignaturePlaceholder;
@@ -42,11 +45,16 @@ export interface StyledRenderOptions {
 export type { DocumentInfo } from '../core/document-model/index.js';
 export declare const A4_WIDTH = 595;
 export declare const A4_HEIGHT = 842;
+export interface BookmarkPosition {
+    readonly pageIdx: number;
+    readonly yTopPt: number;
+}
 export interface PdfLayoutAux {
     readonly structBuilder: StructTreeBuilder | undefined;
     readonly sectionCtxs: ReadonlyArray<SectionRenderCtx>;
     readonly pdfaProfile: PdfAProfile | undefined;
     readonly tagged: boolean;
+    readonly bookmarks: ReadonlyMap<string, BookmarkPosition>;
 }
 export interface LaidOutPdfDocument extends LaidOutDocument {
     readonly pdf: PdfLayoutAux;
@@ -72,13 +80,21 @@ export interface SectionRenderCtx {
     readonly marginBottom: number;
     readonly contentWidth: number;
     readonly pageContentHeight: number;
+    readonly columns?: ReadonlyArray<{
+        readonly xOffsetPt: number;
+        readonly widthPt: number;
+    }>;
     readonly headerSet: HeaderFooterSet;
     readonly footerSet: HeaderFooterSet;
     readonly titlePg: boolean;
     readonly evenAndOddHeaders: boolean;
 }
+interface HfBandEntry {
+    readonly commands: Array<PageItem>;
+    readonly renderDynamic?: (pageNumber: number, totalPages: number) => Array<PageItem>;
+}
 interface HeaderFooterSet {
-    readonly default: Array<PageItem>;
-    readonly first: Array<PageItem>;
-    readonly even: Array<PageItem>;
+    readonly default: HfBandEntry;
+    readonly first: HfBandEntry;
+    readonly even: HfBandEntry;
 }