@templatical/import-beefree 0.54.1 → 0.55.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { canonicalFontStack, createButtonBlock, createDefaultTemplateContent, createDividerBlock, createHtmlBlock, createImageBlock, createMenuBlock, createParagraphBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, createTableBlock, createTitleBlock, createVideoBlock, generateId, isLocaleTag, isSafeHtmlUrl, sourceHash } from "@templatical/types";
+import { BORDER_SIDES, BUILT_IN_FONT_STACKS, HEADING_LEVEL_FONT_SIZE, canonicalFontStack, createButtonBlock, createDefaultTemplateContent, createDividerBlock, createHtmlBlock, createImageBlock, createMenuBlock, createParagraphBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, createTableBlock, createTitleBlock, createVideoBlock, findOpenTagEnd, generateId, isGenericFontFamily, isImage, isLocaleTag, isSafeHtmlUrl, parseFontFamilies, sourceHash, toBorderCss } from "@templatical/types";
 // src/localization.ts
 function warn(warnings, message) {
 	if (!warnings.includes(message)) warnings.push(message);
@@ -51,6 +51,718 @@ function registerLocales(content) {
 	walk(content.blocks);
 	if (locales.size) content.settings.locales = [...locales];
 }
+// src/merge-tokens.ts
+/**
+* Character references Beefree writes inside `{{ }}`, `{% %}` and `{# #}`.
+* A sender parses those tokens before an HTML parser does, so `'` has to
+* be an apostrophe in the imported string. References outside a token stay
+* encoded. An opener with no closer is left as written. Each reference is
+* decoded once: `"` becomes `"`.
+*
+* The three kinds are scanned with `indexOf`. The earliest opener wins, and
+* the match ends at that kind's first closer. A kind with no closer can never
+* match later in the string, so it is not searched again.
+*/
+const TOKEN_KINDS = [
+	{
+		opener: "{{",
+		closer: "}}"
+	},
+	{
+		opener: "{%",
+		closer: "%}"
+	},
+	{
+		opener: "{#",
+		closer: "#}"
+	}
+];
+function tokenSeeks() {
+	return TOKEN_KINDS.map((kind) => ({
+		opener: kind.opener,
+		closer: kind.closer,
+		at: -1,
+		searched: false,
+		dead: false
+	}));
+}
+/** Next opener of this kind at or after `from`, cached so each index is visited once. */
+function openerAt(value, seek, from) {
+	if (seek.dead) return -1;
+	if (seek.searched && (seek.at === -1 || seek.at >= from)) return seek.at;
+	seek.at = value.indexOf(seek.opener, from);
+	seek.searched = true;
+	if (seek.at === -1) seek.dead = true;
+	return seek.at;
+}
+/**
+* The next token at or after `from`, or `null` when none remain.
+* An unterminated opener stays in the text: the scan resumes one character
+* later, and that opener kind is not tried again.
+*/
+function nextToken(value, from, seeks) {
+	let cursor = from;
+	while (cursor < value.length) {
+		let best = -1;
+		let kind = -1;
+		for (let i = 0; i < seeks.length; i++) {
+			const at = openerAt(value, seeks[i], cursor);
+			if (at === -1) continue;
+			if (best === -1 || at < best) {
+				best = at;
+				kind = i;
+			}
+		}
+		if (kind === -1 || best === -1) break;
+		const seek = seeks[kind];
+		const closeAt = value.indexOf(seek.closer, best + seek.opener.length);
+		if (closeAt === -1) {
+			seek.dead = true;
+			cursor = best + 1;
+			continue;
+		}
+		return {
+			start: best,
+			end: closeAt + seek.closer.length
+		};
+	}
+	return null;
+}
+function tokenSpans(value) {
+	const seeks = tokenSeeks();
+	const spans = [];
+	let from = 0;
+	while (from < value.length) {
+		const span = nextToken(value, from, seeks);
+		if (!span) break;
+		spans.push(span);
+		from = span.end;
+	}
+	return spans;
+}
+const CHAR_REF = /&(?:amp|lt|gt|quot|apos|nbsp|#x[0-9a-f]+|#\d+);/gi;
+const NAMED = {
+	amp: "&",
+	lt: "<",
+	gt: ">",
+	quot: "\"",
+	apos: "'",
+	nbsp: "\xA0"
+};
+/** A scalar character, or the reference itself when the code point is not one. */
+function decodeCharRef(entity) {
+	const body = entity.slice(1, -1);
+	if (body[0] !== "#") return NAMED[body.toLowerCase()] ?? entity;
+	const hex = body[1] === "x" || body[1] === "X";
+	const code = Number.parseInt(body.slice(hex ? 2 : 1), hex ? 16 : 10);
+	if (!Number.isInteger(code) || code < 1 || code > 1114111 || code >= 55296 && code <= 57343) return entity;
+	return String.fromCodePoint(code);
+}
+function decodeToken(token, preserve) {
+	CHAR_REF.lastIndex = 0;
+	return token.replace(CHAR_REF, (entity) => {
+		const char = decodeCharRef(entity);
+		return preserve?.(char) ?? char;
+	}).replace(/\u00A0/g, (char) => preserve?.(char) ?? " ");
+}
+function decodeEntities(value, preserve, ctx) {
+	const seeks = tokenSeeks();
+	const parts = [];
+	let i = 0;
+	let from = 0;
+	let found = false;
+	while (from < value.length) {
+		const span = nextToken(value, from, seeks);
+		if (!span) break;
+		found = true;
+		if (span.start > i) parts.push(value.slice(i, span.start));
+		parts.push(ctx ? decodeTokenAt(value, span.start, span.end, ctx) : decodeToken(value.slice(span.start, span.end), preserve));
+		i = span.end;
+		from = span.end;
+	}
+	if (!found) return value;
+	if (i < value.length) parts.push(value.slice(i));
+	return parts.join("");
+}
+function decodeEntitiesInTokens(value) {
+	return decodeEntities(value);
+}
+/** A quote stays `&quot;` so it cannot end a double-quoted attribute. */
+const preserveDoubleQuote = (char) => char === "\"" ? "&quot;" : void 0;
+/** An apostrophe stays `&#39;` so it cannot end a single-quoted attribute. */
+const preserveSingleQuote = (char) => char === "'" ? "&#39;" : void 0;
+/**
+* Characters that end an unquoted attribute (`whitespace` or `>`) or that
+* a loose parser treats as a quote. A decoded `&nbsp;` is one of those spaces.
+*/
+const preserveUnquoted = (char) => {
+	switch (char) {
+		case "\"": return "&quot;";
+		case "'": return "&#39;";
+		case ">": return "&gt;";
+		case " ": return "&#32;";
+		case "	": return "&#9;";
+		case "\n": return "&#10;";
+		case "\r": return "&#13;";
+		case "\f": return "&#12;";
+		case "\xA0": return "&nbsp;";
+		default: return;
+	}
+};
+/** Text or a comment: decode a reference in full. */
+const CTX_TEXT = 0;
+/** A double-quoted attribute value. */
+const CTX_DQ = 1;
+/** A single-quoted attribute value. */
+const CTX_SQ = 2;
+/** An unquoted attribute value. */
+const CTX_UQ = 3;
+/** Tag markup outside an attribute value. A reference here stays encoded. */
+const CTX_OPAQUE = 4;
+const PRESERVE_BY_KIND = [];
+PRESERVE_BY_KIND[CTX_TEXT] = void 0;
+PRESERVE_BY_KIND[CTX_DQ] = preserveDoubleQuote;
+PRESERVE_BY_KIND[CTX_SQ] = preserveSingleQuote;
+PRESERVE_BY_KIND[CTX_UQ] = preserveUnquoted;
+function replacementFor(char, kind) {
+	const preserve = PRESERVE_BY_KIND[kind];
+	return preserve?.(char) ?? (char === "\xA0" ? " " : char);
+}
+/** Copy `slice[from, to)`, turning a literal U+00A0 into a space inside a token. */
+function copyPlain(slice, from, to, base, ctx) {
+	const nbsp = slice.indexOf("\xA0", from);
+	if (nbsp === -1 || nbsp >= to) return slice.slice(from, to);
+	const parts = [];
+	let i = from;
+	while (i < to) {
+		const at = slice.indexOf("\xA0", i);
+		if (at === -1 || at >= to) {
+			parts.push(slice.slice(i, to));
+			break;
+		}
+		if (at > i) parts.push(slice.slice(i, at));
+		const kind = ctx[base + at];
+		parts.push(kind === CTX_OPAQUE ? "\xA0" : replacementFor("\xA0", kind));
+		i = at + 1;
+	}
+	return parts.join("");
+}
+/**
+* Decode references in `html[start, end)`. Each reference uses the context
+* of its own index, so one token can span a text node and an attribute.
+*/
+function decodeTokenAt(html, start, end, ctx) {
+	const slice = html.slice(start, end);
+	if (slice.indexOf("&") === -1 && slice.indexOf("\xA0") === -1) return slice;
+	const parts = [];
+	CHAR_REF.lastIndex = 0;
+	let last = 0;
+	let match;
+	while (match = CHAR_REF.exec(slice)) {
+		parts.push(copyPlain(slice, last, match.index, start, ctx));
+		const kind = ctx[start + match.index];
+		parts.push(kind === CTX_OPAQUE ? match[0] : replacementFor(decodeCharRef(match[0]), kind));
+		last = match.index + match[0].length;
+	}
+	parts.push(copyPlain(slice, last, slice.length, start, ctx));
+	return parts.join("");
+}
+/** Paint the tag opaque, then lay each attribute value back over it. */
+function paintTag(ctx, start, end, values) {
+	ctx.fill(CTX_OPAQUE, start, end);
+	for (const value of values) ctx.fill(value.kind, value.start, value.end);
+	return end;
+}
+/**
+* Mark attribute values on the tag at `start`. `null` when the tag never
+* closes: the caller leaves that tail as written.
+*/
+function markTag(html, start, ctx) {
+	const values = [];
+	let i = start + 1;
+	let state = "tag";
+	let quote = "";
+	let valueStart = 0;
+	while (i < html.length) {
+		const char = html[i];
+		if (state === "quoted") {
+			if (char !== quote) {
+				i++;
+				continue;
+			}
+			values.push({
+				start: valueStart,
+				end: i,
+				kind: quote === "\"" ? CTX_DQ : CTX_SQ
+			});
+			state = "tag";
+			i++;
+			continue;
+		}
+		if (state === "unquoted") {
+			if (char !== ">" && !isSpace(char)) {
+				i++;
+				continue;
+			}
+			values.push({
+				start: valueStart,
+				end: i,
+				kind: CTX_UQ
+			});
+			state = "tag";
+			if (char === ">") return paintTag(ctx, start, i + 1, values);
+			i++;
+			continue;
+		}
+		if (state === "before") {
+			if (isSpace(char)) {
+				i++;
+				continue;
+			}
+			if (char === ">") return paintTag(ctx, start, i + 1, values);
+			if (char === "\"" || char === "'") {
+				quote = char;
+				valueStart = i + 1;
+				state = "quoted";
+				i++;
+				continue;
+			}
+			valueStart = i;
+			state = "unquoted";
+			continue;
+		}
+		if (char === "=") {
+			state = "before";
+			i++;
+			continue;
+		}
+		if (char === ">") return paintTag(ctx, start, i + 1, values);
+		i++;
+	}
+	return null;
+}
+/**
+* Context of each index. Text and comments stay `CTX_TEXT`. An attribute
+* value is marked for its quotes. The rest of a closed tag is opaque.
+* `limit` stops the token scan at an unclosed tag, which is left as written.
+*/
+function markHtmlContext(html) {
+	const ctx = new Uint8Array(html.length);
+	let i = 0;
+	while (i < html.length) {
+		const lt = html.indexOf("<", i);
+		if (lt === -1) break;
+		if (html.startsWith("<!--", lt)) {
+			const end = html.indexOf("-->", lt + 4);
+			if (end === -1) break;
+			i = end + 3;
+			continue;
+		}
+		const next = markTag(html, lt, ctx);
+		if (next === null) return {
+			ctx,
+			limit: lt
+		};
+		i = next;
+	}
+	return {
+		ctx,
+		limit: html.length
+	};
+}
+/**
+* Decode tokens in HTML. A token is the earliest `{{`, `{%` or `{#` through
+* its first closer, and it may span tags. A reference in text or a comment
+* is decoded in full, so a quote there is a quote and U+00A0 is a space.
+* A reference inside an attribute is decoded for the quotes that wrap it:
+* a double-quoted value keeps `"`, a single-quoted value keeps `'`, and an
+* unquoted value keeps the characters that end it. A reference in the tag
+* itself stays encoded. An unclosed tag is left as written, and a token
+* does not close inside it.
+*/
+function decodeEntitiesInHtml(html) {
+	if (html.indexOf("<") === -1) return decodeEntitiesInTokens(html);
+	const marked = markHtmlContext(html);
+	const decoded = decodeEntities(marked.limit === html.length ? html : html.slice(0, marked.limit), void 0, marked.ctx);
+	return marked.limit === html.length ? decoded : decoded + html.slice(marked.limit);
+}
+/**
+* Every character reference in plain text, decoded once. A button label is
+* not HTML: the renderer escapes it, so `&nbsp;` has to be the character or
+* the mail shows the letters `&amp;nbsp;`.
+*/
+function decodePlainTextEntities(value) {
+	CHAR_REF.lastIndex = 0;
+	return value.replace(CHAR_REF, decodeCharRef);
+}
+/**
+* BeeFree writes a non-breaking space as `&amp;nbsp;`. The extra `&amp;`
+* leaves the letters `&nbsp;` in the mail. Put back the single reference.
+* Any other reference outside a token stays as written.
+*/
+function restoreDoubledNbsp(html) {
+	return html.replace(/&amp;(nbsp;|#0*160;|#x0*a0;)/gi, "&$1");
+}
+/** Whitespace, or a reference that decodes to whitespace, up to the extra `&amp;` on `&amp;nbsp;`. */
+function isSpacePadding(text) {
+	let current = text;
+	for (let pass = 0; pass < 2; pass++) {
+		CHAR_REF.lastIndex = 0;
+		const next = current.replace(CHAR_REF, decodeCharRef);
+		if (next === current) break;
+		current = next;
+	}
+	return /^[\s\u00A0]*$/.test(current);
+}
+/**
+* A chip between two merge tags holds only a non-breaking space (kept as one
+* plain space), and a chip
+* around one token leads with plain spaces that are not part of the token.
+* A non-breaking space in front of that token stays: it is the space between
+* the previous word and the token. A chip
+* that also carries words, or more than one token, is left as written. A
+* space after the token stays: it is the space the author typed.
+*/
+/** Plain spaces the editor pads in front of a token. A non-breaking space is not padding. */
+function isPlainSpacePadding(text) {
+	return /^[ \t\n\r\f]*$/.test(text);
+}
+/** Drop a plain leading space before the one token in `text`. A non-breaking space stays. */
+function withoutLeadingTokenPadding(text) {
+	const spans = tokenSpans(text);
+	if (spans.length !== 1) return text;
+	const start = spans[0].start;
+	if (!isPlainSpacePadding(text.slice(0, start))) return text;
+	return text.slice(start);
+}
+/**
+* What a mergetag chip keeps once nested chips are already unwrapped.
+* A chip that only holds a space between two tokens is that space. A plain
+* leading space before the one token is padding and drops.
+*/
+function keptMergetagText(text) {
+	if (tokenSpans(text).length !== 1) return text !== "" && isSpacePadding(text) ? " " : text;
+	return withoutLeadingTokenPadding(text);
+}
+function fold(char) {
+	const code = char.charCodeAt(0);
+	return code >= 65 && code <= 90 ? String.fromCharCode(code + 32) : char;
+}
+function equalsIgnoreCase(value, literal) {
+	if (value.length !== literal.length) return false;
+	for (let i = 0; i < value.length; i++) if (fold(value[i]) !== fold(literal[i])) return false;
+	return true;
+}
+function startsWithIgnoreCase(html, at, literal) {
+	if (at < 0 || at + literal.length > html.length) return false;
+	for (let i = 0; i < literal.length; i++) if (fold(html[at + i]) !== fold(literal[i])) return false;
+	return true;
+}
+function isSpace(char) {
+	return char === " " || char === "	" || char === "\n" || char === "\r" || char === "\f";
+}
+/** A character that continues an HTML tag name (`code` vs `codebook`). */
+function isNameChar(char) {
+	if (char === void 0) return false;
+	const code = char.charCodeAt(0);
+	return code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || char === "-" || char === ":" || char === "_";
+}
+const CODE_TAG = "code";
+/**
+* Index of the next `<code` tag at or after `from` and before `limit`, or -1.
+* `<codebook` is not one. `limit` keeps a chip from scanning past its closer.
+*/
+function indexOfCodeOpen(html, from, limit = html.length) {
+	let i = from;
+	while (i < limit) {
+		const at = html.indexOf("<", i);
+		if (at === -1 || at >= limit) return -1;
+		if (startsWithIgnoreCase(html, at + 1, CODE_TAG) && !isNameChar(html[at + 1 + 4])) return at;
+		i = at + 1;
+	}
+	return -1;
+}
+/**
+* Index just after the `>` that ends the tag at `open`. A quoted `>` is part
+* of an attribute (`data-bee-code="{% if n > 1 %}"`), not the end of the tag.
+* -1 when the tag never closes.
+*/
+function endOfTag(html, open) {
+	let quote = null;
+	for (let i = open + 1; i < html.length; i++) {
+		const char = html[i];
+		if (quote) {
+			if (char === quote) quote = null;
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			continue;
+		}
+		if (char === ">") return i + 1;
+	}
+	return -1;
+}
+/** `<code … />`, with whitespace allowed before the slash. */
+function isSelfClosing(html, openEnd) {
+	let i = openEnd - 2;
+	while (i >= 0 && isSpace(html[i])) i--;
+	return html[i] === "/";
+}
+/**
+* The open tag carries `data-bee-type="mergetag"`. The attribute may sit
+* anywhere, in double quotes, single quotes, or none.
+*/
+function isMergetagOpen(html, open, openEnd) {
+	let i = open + 1 + 4;
+	const end = openEnd - 1;
+	while (i < end) {
+		while (i < end && isSpace(html[i])) i++;
+		if (i >= end || html[i] === "/") break;
+		const nameStart = i;
+		while (i < end && !isSpace(html[i]) && html[i] !== "=" && html[i] !== "/") i++;
+		const name = html.slice(nameStart, i);
+		while (i < end && isSpace(html[i])) i++;
+		let value = "";
+		if (html[i] === "=") {
+			i++;
+			while (i < end && isSpace(html[i])) i++;
+			const quote = html[i];
+			if (quote === "\"" || quote === "'") {
+				i++;
+				const valueStart = i;
+				while (i < end && html[i] !== quote) i++;
+				value = html.slice(valueStart, i);
+				if (html[i] === quote) i++;
+			} else {
+				const valueStart = i;
+				while (i < end && !isSpace(html[i]) && html[i] !== "/") i++;
+				value = html.slice(valueStart, i);
+			}
+		}
+		if (equalsIgnoreCase(name, "data-bee-type") && value === "mergetag") return true;
+	}
+	return false;
+}
+/** Index just after the `>` of a `</code>` at `at`, or -1 when `at` is not one. */
+function codeCloseEnd(html, at) {
+	if (!startsWithIgnoreCase(html, at + 1, `/${CODE_TAG}`)) return -1;
+	let j = at + 2 + 4;
+	while (j < html.length && isSpace(html[j])) j++;
+	return html[j] === ">" ? j + 1 : -1;
+}
+/**
+* The matching `</code>` for every `<code>` that has one, counting nested
+* `<code>` elements. One forward pass: an unclosed tag does not make every
+* later tag scan the rest of the string.
+*/
+function indexCodeCloses(html) {
+	const closes = /* @__PURE__ */ new Map();
+	const stack = [];
+	let i = 0;
+	while (i < html.length) {
+		const at = html.indexOf("<", i);
+		if (at === -1) break;
+		const closeEnd = codeCloseEnd(html, at);
+		if (closeEnd !== -1) {
+			const open = stack.pop();
+			if (open !== void 0) closes.set(open, {
+				start: at,
+				end: closeEnd
+			});
+			i = closeEnd;
+			continue;
+		}
+		if (startsWithIgnoreCase(html, at + 1, CODE_TAG) && !isNameChar(html[at + 1 + 4])) {
+			const openEnd = endOfTag(html, at);
+			if (openEnd === -1) break;
+			if (!isSelfClosing(html, openEnd)) stack.push(at);
+			i = openEnd;
+			continue;
+		}
+		i = at + 1;
+	}
+	return closes;
+}
+/** `{` can open a token. `&` can be a character reference. Both need the joined text. */
+function pieceFlags(text) {
+	let brace = false;
+	let dirty = false;
+	let blank = true;
+	for (let i = 0; i < text.length; i++) {
+		const char = text[i];
+		if (char === "{") brace = true;
+		else if (char === "&") dirty = true;
+		if (blank && !/\s/.test(char)) blank = false;
+		if (brace && dirty && !blank) break;
+	}
+	if (text.length === 0) blank = true;
+	return {
+		brace,
+		dirty,
+		blank,
+		len: text.length
+	};
+}
+function flagsOf(parts) {
+	let brace = false;
+	let dirty = false;
+	let blank = true;
+	let len = 0;
+	for (const part of parts) {
+		const flags = typeof part === "string" ? pieceFlags(part) : part;
+		brace = brace || flags.brace;
+		dirty = dirty || flags.dirty;
+		blank = blank && flags.blank;
+		len += flags.len;
+	}
+	return {
+		brace,
+		dirty,
+		blank,
+		len
+	};
+}
+function flattenRope(parts) {
+	const out = [];
+	const lists = [parts];
+	const index = [0];
+	while (lists.length > 0) {
+		const list = lists[lists.length - 1];
+		const at = index[index.length - 1];
+		if (at >= list.length) {
+			lists.pop();
+			index.pop();
+			continue;
+		}
+		index[index.length - 1] = at + 1;
+		const piece = list[at];
+		if (typeof piece === "string") out.push(piece);
+		else {
+			lists.push(piece.parts);
+			index.push(0);
+		}
+	}
+	return out.join("");
+}
+/**
+* A closed chip's text. Nested chips are already ropes, so a chain of chips
+* that is not a token or a padding space is not joined until the root.
+*/
+function finishMergetag(parts) {
+	const flags = flagsOf(parts);
+	if (!flags.brace && !flags.dirty) {
+		if (flags.len === 0) return "";
+		if (flags.blank) return " ";
+		if (parts.length === 1) return parts[0];
+		return {
+			parts,
+			...flags
+		};
+	}
+	return keptMergetagText(flattenRope(parts));
+}
+/**
+* Remove a `<code data-bee-type="mergetag">` wrapper and keep the text inside
+* it. The editor turns a bare `{{ … }}` or `{% … %}` token in rich text into
+* a merge-tag span when the template loads, which is the shape BeeFree's HTML
+* export already leaves. A `<code>` without that attribute stays, including an
+* inline code sample and a `data-bee-type="speciallink"` wrapper. Run this
+* before `decodeEntitiesInTokens`: a token inside `data-bee-code` would
+* otherwise be decoded in the attribute and break its quotes. An opener with
+* no closer is left as written.
+*/
+function unwrapMergeTagCode(html) {
+	if (html.indexOf("<") === -1) return html;
+	const closes = indexCodeCloses(html);
+	const root = [];
+	const stack = [];
+	const dest = () => stack.length > 0 ? stack[stack.length - 1].parts : root;
+	let i = 0;
+	while (i < html.length) {
+		const frame = stack.length > 0 ? stack[stack.length - 1] : void 0;
+		const open = indexOfCodeOpen(html, i, frame ? frame.closeStart : html.length);
+		if (frame && open === -1) {
+			if (i < frame.closeStart) frame.parts.push(html.slice(i, frame.closeStart));
+			const inner = finishMergetag(frame.parts);
+			stack.pop();
+			dest().push(inner);
+			i = frame.closeEnd;
+			continue;
+		}
+		if (open === -1) {
+			dest().push(html.slice(i));
+			break;
+		}
+		const openEnd = endOfTag(html, open);
+		if (openEnd === -1) {
+			dest().push(html.slice(i));
+			break;
+		}
+		dest().push(html.slice(i, open));
+		if (!isMergetagOpen(html, open, openEnd)) {
+			dest().push(html.slice(open, openEnd));
+			i = openEnd;
+			continue;
+		}
+		if (isSelfClosing(html, openEnd)) {
+			i = openEnd;
+			continue;
+		}
+		const close = closes.get(open);
+		if (close === void 0) {
+			dest().push(html.slice(open, openEnd));
+			i = openEnd;
+			continue;
+		}
+		stack.push({
+			parts: [],
+			closeStart: close.start,
+			closeEnd: close.end
+		});
+		i = openEnd;
+	}
+	return flattenRope(root);
+}
+/**
+* A `<code>` that only highlights one token leads with plain spaces that are
+* not part of the token. A non-breaking space stays. The element stays, and
+* so does a space after the token.
+* Nested markup inside the element is left as written.
+*/
+function trimHighlightedTokenPadding(html) {
+	if (html.indexOf("<") === -1) return html;
+	const closes = indexCodeCloses(html);
+	const parts = [];
+	let i = 0;
+	while (i < html.length) {
+		const open = indexOfCodeOpen(html, i);
+		if (open === -1) {
+			parts.push(html.slice(i));
+			break;
+		}
+		const openEnd = endOfTag(html, open);
+		if (openEnd === -1) {
+			parts.push(html.slice(i));
+			break;
+		}
+		parts.push(html.slice(i, openEnd));
+		if (isSelfClosing(html, openEnd)) {
+			i = openEnd;
+			continue;
+		}
+		const close = closes.get(open);
+		if (close === void 0) {
+			i = openEnd;
+			continue;
+		}
+		const inner = html.slice(openEnd, close.start);
+		parts.push(inner.includes("<") ? inner : withoutLeadingTokenPadding(inner));
+		parts.push(html.slice(close.start, close.end));
+		i = close.end;
+	}
+	return parts.join("");
+}
 // src/style-parser.ts
 /**
 * Parses CSS-like style values from BeeFree descriptors.
@@ -515,6 +1227,7 @@ const SOCIAL_PLATFORM_MAP = {
 	x: "twitter",
 	instagram: "instagram",
 	linkedin: "linkedin",
+	xing: "xing",
 	youtube: "youtube",
 	tiktok: "tiktok",
 	pinterest: "pinterest",
@@ -563,6 +1276,24 @@ function stripTagsPlain(text) {
 	}
 	return out;
 }
+/**
+* Rich text keeps the markup around a merge tag. Unwrap the BeeFree `<code>`
+* before decoding, so a token quoted inside `data-bee-code` is not decoded
+* in the attribute. A quote inside a token stays encoded in an attribute
+* and is decoded in a text node.
+*/
+function importedHtml(html) {
+	return restoreDoubledNbsp(decodeEntitiesInHtml(trimHighlightedTokenPadding(unwrapMergeTagCode(html))));
+}
+/**
+* A button label or table cell is plain text. Unwrap before stripping, so a
+* `>` inside a mergetag `<code>` attribute is not the end of the tag, and
+* strip before decoding, so a `&gt;` inside a token is not a stray `>`.
+* Decode references outside tokens too: the renderer escapes the whole label.
+*/
+function importedPlainText(value) {
+	return decodePlainTextEntities(stripTagsPlain(trimHighlightedTokenPadding(unwrapMergeTagCode(value))));
+}
 function makeStyles(descriptor) {
 	const padding = extractPadding(descriptor.style);
 	const bg = parseColor(descriptor.style?.["background-color"]);
@@ -572,76 +1303,624 @@ function makeStyles(descriptor) {
 	};
 }
 /**
-* Apply BeeFree text styles as TipTap-compatible inline markup.
-* - text-align → added to each <p> tag's style attribute
-* - color, font-size, font-weight, font-family → wrapped in <span style="..."> inside each <p>
+* Pixels taken from `padding` on `sides`, at most `deficit`, in that order.
+* Nothing is taken past 0.
+*/
+function paddingReturned(padding, deficit, sides) {
+	let returned = 0;
+	let remaining = deficit;
+	for (const side of sides) {
+		if (remaining <= 0) break;
+		const have = padding[side];
+		if (have <= 0) continue;
+		const give = Math.min(remaining, have);
+		returned += give;
+		remaining -= give;
+	}
+	return returned;
+}
+/**
+* The room an image, a lone icon or a divider is measured in: the column
+* less the side padding the block keeps. A snapped column gives inner
+* padding back after the width is chosen. Those pixels are part of the room.
+* Column padding the block keeps, on either side, is not, whether or not any
+* padding comes back.
+*/
+function measuredRoom(columnWidth, padding, giveBack) {
+	if (columnWidth === void 0) return void 0;
+	const room = columnWidth - padding.left - padding.right;
+	if (!giveBack) return room;
+	const returned = paddingReturned({
+		left: padding.left + giveBack.columnPadding.left,
+		right: padding.right + giveBack.columnPadding.right
+	}, giveBack.deficit, giveBack.sides);
+	return room - giveBack.columnPadding.left - giveBack.columnPadding.right + returned;
+}
+/**
+* A block BeeFree's text markup uses as a root. `ul` / `ol` carry the module's
+* alignment and line-height; their items carry the text styles.
+*/
+const TEXT_ROOTS = /* @__PURE__ */ new Set([
+	"p",
+	"li",
+	"div",
+	"ul",
+	"ol",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]);
+/**
+* BeeFree stores a text module's line-height as a percentage (`120%`, `200%`)
+* or a unitless number, and renders that — not the px value TinyMCE writes
+* into the blob. The paragraph editor stores the unitless ratio.
+*/
+function moduleLineHeight(value) {
+	if (!value) return void 0;
+	const trimmed = value.trim();
+	if (!trimmed || /^(inherit|initial|unset|revert)$/i.test(trimmed)) return void 0;
+	const percent = /^(\d+(?:\.\d+)?)\s*%$/.exec(trimmed);
+	if (percent) {
+		const ratio = Number(percent[1]) / 100;
+		if (!Number.isFinite(ratio) || ratio <= 0) return void 0;
+		return String(Math.round(ratio * 1e3) / 1e3);
+	}
+	if (/^\d+(?:\.\d+)?$/.test(trimmed)) {
+		const ratio = Number(trimmed);
+		return Number.isFinite(ratio) && ratio > 0 ? String(ratio) : void 0;
+	}
+	const length = /^(\d+(?:\.\d+)?)\s*(px|em|rem)$/i.exec(trimmed);
+	if (length) return `${length[1]}${length[2].toLowerCase()}`;
+	if (/^normal$/i.test(trimmed)) return "normal";
+}
+/** `0` and `normal` are the CSS initial value, so they add no declaration. */
+function moduleLetterSpacing(value) {
+	if (!value) return void 0;
+	const compact = value.trim().replace(/\s+/g, "");
+	if (!compact || /^(normal|inherit|initial|unset|revert)$/i.test(compact)) return void 0;
+	if (/^0+(?:\.0+)?(?:px|em|rem|%)?$/i.test(compact)) return void 0;
+	return compact;
+}
+/**
+* The colour BeeFree paints on a text module's links: `linkColor` or
+* `link-color` on the module style, then the same keys on `computedStyle`.
+*/
+function moduleLinkColor(content) {
+	if (!content) return "";
+	return parseColor(content.style?.linkColor) || parseColor(content.style?.["link-color"]) || parseColor(content.computedStyle?.linkColor) || parseColor(content.computedStyle?.["link-color"]) || "";
+}
+function attrWhitespaceStart(tag, nameStart) {
+	let attrStart = nameStart;
+	while (attrStart > 0 && /\s/.test(tag[attrStart - 1])) attrStart--;
+	return attrStart;
+}
+/**
+* Exclusive end of the attribute. Whitespace after it belongs to the attribute
+* only when the tag ends there; a following attribute keeps its separator.
+*/
+function styleAttrEnd(tag, end) {
+	let i = end;
+	while (i < tag.length && /\s/.test(tag[i])) i++;
+	if (i >= tag.length || tag[i] === ">" || tag[i] === "/") return i;
+	return end;
+}
+function styleLoc(tag, nameStart, valueStart, rawEnd, value, quote) {
+	const attrEnd = styleAttrEnd(tag, rawEnd);
+	return {
+		attrStart: attrWhitespaceStart(tag, nameStart),
+		attrEnd,
+		valueStart,
+		valueEnd: quote ? rawEnd - 1 : attrEnd,
+		value,
+		...quote ? { quote } : {}
+	};
+}
+/** The first `style` attribute on an open tag, ignoring `data-mce-style`. */
+function findStyleAttr(tag) {
+	let i = 1;
+	if (tag[i] === "/") i++;
+	while (i < tag.length && /[a-z0-9]/i.test(tag[i])) i++;
+	for (;;) {
+		while (i < tag.length && /\s/.test(tag[i])) i++;
+		if (i >= tag.length || tag[i] === ">" || tag[i] === "/") return void 0;
+		const nameStart = i;
+		while (i < tag.length && !/[\s=/>]/.test(tag[i])) i++;
+		const name = tag.slice(nameStart, i).toLowerCase();
+		const nameEnd = i;
+		while (i < tag.length && /\s/.test(tag[i])) i++;
+		if (i >= tag.length || tag[i] !== "=") {
+			if (name === "style") return styleLoc(tag, nameStart, nameEnd, nameEnd, "");
+			continue;
+		}
+		i++;
+		while (i < tag.length && /\s/.test(tag[i])) i++;
+		if (i >= tag.length) return void 0;
+		const quote = tag[i];
+		if (quote !== "\"" && quote !== "'") {
+			const valueStart = i;
+			while (i < tag.length && !/\s/.test(tag[i]) && tag[i] !== ">") i++;
+			if (name === "style") return styleLoc(tag, nameStart, valueStart, i, decodePlainTextEntities(tag.slice(valueStart, i)));
+			continue;
+		}
+		const valueStart = i + 1;
+		const valueEnd = tag.indexOf(quote, valueStart);
+		if (valueEnd === -1) return void 0;
+		if (name === "style") return styleLoc(tag, nameStart, valueStart, valueEnd + 1, decodePlainTextEntities(tag.slice(valueStart, valueEnd)), quote);
+		i = valueEnd + 1;
+	}
+}
+/**
+* `additions` are appended when the declaration is absent. Names in `strip`
+* are removed first, so a module line-height replaces the blob's px value.
+* `undefined` means the attribute is empty and should be removed.
+*/
+function mergeStyleValue(existing, additions, strip) {
+	const kept = [];
+	const present = /* @__PURE__ */ new Set();
+	for (const part of existing.split(";")) {
+		const trimmed = part.trim();
+		if (!trimmed) continue;
+		const colon = trimmed.indexOf(":");
+		const name = (colon === -1 ? trimmed : trimmed.slice(0, colon)).trim().toLowerCase();
+		present.add(name);
+		if (strip.has(name)) continue;
+		kept.push(trimmed);
+	}
+	for (const add of additions) if (strip.has(add.name) || !present.has(add.name)) kept.push(`${add.name}: ${add.value}`);
+	return kept.length > 0 ? kept.join("; ") : void 0;
+}
+/**
+* Double quotes. `"` and a bare `&` are escaped, then `<` and `>`, so the
+* attribute stays one value. An entity already in the value is left as
+* written. {@link decodePlainTextEntities} reads the escapes back.
+*/
+function quoteStyleValue(value) {
+	return `"${value.replace(/&(?![A-Za-z][A-Za-z0-9]+;|#[0-9]+;|#x[0-9A-Fa-f]+;)/g, "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")}"`;
+}
+function rewriteOpenTag(openTag, additions, strip) {
+	if (additions.length === 0 && strip.size === 0) return openTag;
+	const loc = findStyleAttr(openTag);
+	if (!loc) {
+		if (additions.length === 0) return openTag;
+		const value = additions.map((decl) => `${decl.name}: ${decl.value}`).join("; ");
+		const at = openTag.endsWith("/>") ? openTag.length - 2 : openTag.length - 1;
+		return `${openTag.slice(0, at)} style=${quoteStyleValue(value)}${openTag.slice(at)}`;
+	}
+	const merged = mergeStyleValue(loc.value, additions, strip);
+	if (merged === void 0) return openTag.slice(0, loc.attrStart) + openTag.slice(loc.attrEnd);
+	if (loc.quote && merged === loc.value) return openTag;
+	return openTag.slice(0, loc.attrStart) + ` style=${quoteStyleValue(merged)}` + openTag.slice(loc.attrEnd);
+}
+function flattenChunks(chunks) {
+	const out = [];
+	const lists = [chunks];
+	const index = [0];
+	while (lists.length > 0) {
+		const list = lists[lists.length - 1];
+		const at = index[index.length - 1];
+		if (at >= list.length) {
+			lists.pop();
+			index.pop();
+			continue;
+		}
+		index[index.length - 1] = at + 1;
+		const chunk = list[at];
+		if (typeof chunk === "string") {
+			if (chunk !== "") out.push(chunk);
+		} else {
+			lists.push(chunk);
+			index.push(0);
+		}
+	}
+	return out.join("");
+}
+function chunkText(chunks) {
+	const bits = [];
+	for (const chunk of chunks) if (typeof chunk === "string") bits.push(chunk);
+	return bits.join("");
+}
+function listIndentPx(content) {
+	const stated = content?.computedStyle?.liIndent?.trim();
+	const match = stated ? /^(\d+(?:\.\d+)?)\s*px$/i.exec(stated) : null;
+	if (!match) return 40;
+	return Math.round(Number(match[1]));
+}
+function listBoxFor(content) {
+	const indent = listIndentPx(content);
+	return {
+		outer: Math.round(indent / 2),
+		nested: indent,
+		rtl: content.style?.direction?.trim().toLowerCase() === "rtl"
+	};
+}
+/**
+* Apply a BeeFree text module's style as TipTap-compatible inline markup.
+*
+* `text-align`, `line-height` and `font-size` go on each block root (`p`,
+* `li`, `h1`–`h6`, `div`, `ul`, `ol`). The line box uses that element's font
+* size, so a size that lives only on an inner span leaves the root at the
+* rendered text default of 14px. Color, weight, family, letter-spacing and
+* the same font size wrap the text of a root that holds no nested block. A
+* declaration the blob already sets stays; the module line-height replaces
+* one, because that is the value BeeFree renders.
+*
+* An `<a>` with no colour of its own takes `linkColor` inline, so it wins over
+* the document link colour. An anchor that already states a colour keeps it.
+*
+* `listBox` is set for a list module. It writes that box inline on `<ul>`,
+* `<ol>` and `<li>` — zero vertical margin, the indent padding, and
+* `list-style-type: revert` — so it beats the renderer's list spacing, which
+* juice would otherwise inline on top. A `margin` shorthand already on the
+* element stands, and so does a padding or marker it already sets. An item
+* margin of `0` is the shorthand: that is the property the renderer sets.
+*
+* A block with no text, break, image, or non-breaking space stays empty.
+* The renderer fills `<p></p>` with one line; a span inside it is content
+* and that line collapses.
+*
+* One forward scan. A regex over `[\s\S]*?</p>` is polynomial-ReDoS on
+* `<p>a<p>a<p>a…` with no closer; every cursor here only moves forward.
+* Unclosed roots stay nested. Their pieces are joined once at the root, so
+* a chain of them copies each character once.
 */
-function inlineStylesToHtml(html, style, textColor) {
-	const spanParts = [];
+function isWordChar(char) {
+	if (char === void 0) return false;
+	const code = char.charCodeAt(0);
+	return code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || char === "_";
+}
+/** `<br` or `<img` with a word boundary after the name, as `/<br\b/i` does. */
+function hasBreakOrImage(inner) {
+	let i = 0;
+	while (i < inner.length) {
+		const at = inner.indexOf("<", i);
+		if (at === -1) return false;
+		if (namedTagAt(inner, at, "br") || namedTagAt(inner, at, "img")) return true;
+		i = at + 1;
+	}
+	return false;
+}
+function namedTagAt(html, at, name) {
+	if (at + 1 + name.length > html.length) return false;
+	for (let i = 0; i < name.length; i++) {
+		const char = html[at + 1 + i];
+		const expect = name[i];
+		if (char !== expect && char !== expect.toUpperCase()) return false;
+	}
+	return !isWordChar(html[at + 1 + name.length]);
+}
+/**
+* Drop each `<…>` that has at least one character before `>`. The result is
+* only an emptiness check: it is never written back into the markup. `<` with
+* no closer, and `<>`, stay.
+*/
+function withoutTags(value) {
+	const parts = [];
+	let i = 0;
+	let start = 0;
+	while (i < value.length) {
+		if (value[i] !== "<") {
+			i++;
+			continue;
+		}
+		let j = i + 1;
+		while (j < value.length && value[j] !== ">") j++;
+		if (j >= value.length || j === i + 1) {
+			i++;
+			continue;
+		}
+		if (start < i) parts.push(value.slice(start, i));
+		i = j + 1;
+		start = i;
+	}
+	if (parts.length === 0) return start === 0 ? value : value.slice(start);
+	if (start < value.length) parts.push(value.slice(start));
+	return parts.join("");
+}
+/** Text, a break, an image, or a non-breaking space inside a block. */
+function frameHasInk(inner) {
+	if (hasBreakOrImage(inner)) return true;
+	return withoutTags(inner).replace(/&nbsp;|&#160;|\u00a0/gi, "x").trim().length > 0;
+}
+function inlineStylesToHtml(html, style, textColor, linkColor, listBox) {
+	const spanDecls = [];
 	const fontSize = parsePxValue(style["font-size"]);
-	if (fontSize && fontSize !== 16) spanParts.push(`font-size: ${fontSize}px`);
+	if (fontSize && fontSize !== 16) spanDecls.push({
+		name: "font-size",
+		value: `${fontSize}px`
+	});
 	const color = parseColor(style.color);
-	if (color && color !== textColor) spanParts.push(`color: ${color}`);
+	if (color && color !== textColor) spanDecls.push({
+		name: "color",
+		value: color
+	});
 	const fontWeight = style["font-weight"];
-	if (fontWeight && fontWeight !== "normal" && fontWeight !== "400") spanParts.push(`font-weight: ${fontWeight}`);
+	if (fontWeight && fontWeight !== "normal" && fontWeight !== "400") spanDecls.push({
+		name: "font-weight",
+		value: fontWeight
+	});
 	const fontFamily = canonicalFontStack(style["font-family"]);
-	if (fontFamily) spanParts.push(`font-family: ${fontFamily}`);
+	if (fontFamily) spanDecls.push({
+		name: "font-family",
+		value: fontFamily
+	});
+	const letterSpacing = moduleLetterSpacing(style["letter-spacing"]);
+	if (letterSpacing) spanDecls.push({
+		name: "letter-spacing",
+		value: letterSpacing
+	});
+	const blockDecls = [];
+	if (fontSize > 0) blockDecls.push({
+		name: "font-size",
+		value: `${fontSize}px`
+	});
 	const textAlign = style["text-align"];
-	const pStyle = textAlign && textAlign !== "left" ? `text-align: ${textAlign}` : "";
-	if (!pStyle && spanParts.length === 0) return html;
-	const spanStyle = spanParts.join("; ");
-	let result = html;
-	if (pStyle) result = result.replace(/<p style="([^"]*)">/g, `<p style="$1; ${pStyle}">`).replaceAll("<p>", `<p style="${pStyle}">`);
-	if (spanStyle) result = wrapParagraphInner(result, spanStyle);
-	return result;
-}
-/**
-* Wrap the inner content of every `<p …>…</p>` with `<span style="…">…</span>`.
-*
-* Hand-rolled linear scanner instead of `/<p([^>]*)>([\s\S]*?)<\/p>/g` because
-* the regex is polynomial-ReDoS: the engine retries `[\s\S]*?<\/p>` at every
-* `<p` start, so inputs like `<p>a<p>a<p>a…` (no `</p>` ever) cost O(n²).
-* The scanner advances `i` monotonically via `indexOf`, keeping the work
-* strictly O(n).
-*/
-function wrapParagraphInner(html, spanStyle) {
-	let out = "";
+	if (textAlign && textAlign !== "left") blockDecls.push({
+		name: "text-align",
+		value: textAlign
+	});
+	const lineHeight = moduleLineHeight(style["line-height"]);
+	if (lineHeight) blockDecls.push({
+		name: "line-height",
+		value: lineHeight
+	});
+	const spanStyle = spanDecls.map((decl) => `${decl.name}: ${decl.value}`).join("; ");
+	const strip = /* @__PURE__ */ new Set();
+	if (lineHeight) strip.add("line-height");
+	const anchorDecls = linkColor ? [{
+		name: "color",
+		value: linkColor
+	}] : [];
+	if (blockDecls.length === 0 && spanDecls.length === 0 && anchorDecls.length === 0 && !listBox) return html;
+	const root = [];
+	const stack = [];
+	const parts = () => stack.length > 0 ? stack[stack.length - 1].parts : root;
+	const tagAdditions = (name, kind) => {
+		const decls = kind === "block" ? blockDecls : [...blockDecls, ...spanDecls];
+		return name === "a" ? [...decls, ...anchorDecls] : decls;
+	};
+	const declNames = (openTag) => {
+		const loc = findStyleAttr(openTag);
+		const names = /* @__PURE__ */ new Set();
+		if (!loc) return names;
+		for (const part of loc.value.split(";")) {
+			const trimmed = part.trim();
+			if (!trimmed) continue;
+			const colon = trimmed.indexOf(":");
+			const name = (colon === -1 ? trimmed : trimmed.slice(0, colon)).trim().toLowerCase();
+			if (name) names.add(name);
+		}
+		return names;
+	};
+	const listBoxDecls = (name, openTag, depth) => {
+		if (!listBox) return [];
+		const present = declNames(openTag);
+		if (name === "li") return [...present].some((decl) => decl === "margin" || decl.startsWith("margin-")) ? [] : [{
+			name: "margin",
+			value: "0"
+		}];
+		if (name !== "ul" && name !== "ol") return [];
+		const decls = [];
+		if (!present.has("margin") && !present.has("margin-top")) decls.push({
+			name: "margin-top",
+			value: "0"
+		});
+		if (!present.has("margin") && !present.has("margin-bottom")) decls.push({
+			name: "margin-bottom",
+			value: "0"
+		});
+		const padding = listBox.rtl ? "padding-right" : "padding-left";
+		if (!present.has("padding") && !present.has(padding)) {
+			const px = depth === 1 ? listBox.outer : listBox.nested;
+			decls.push({
+				name: padding,
+				value: `${px}px`
+			});
+		}
+		if (!present.has("list-style") && !present.has("list-style-type")) decls.push({
+			name: "list-style-type",
+			value: "revert"
+		});
+		return decls;
+	};
+	const emitFrame = (frame, rawClose) => {
+		const leaf = !frame.blockChild;
+		const listRoot = frame.name === "ul" || frame.name === "ol";
+		const wrap = leaf && !listRoot && spanStyle !== "";
+		const parent = stack.length > 0 ? stack[stack.length - 1] : void 0;
+		if (parent) parent.blockChild = true;
+		const dest = parent ? parent.parts : root;
+		const open = (kind) => rewriteOpenTag(frame.openTag, [...tagAdditions(frame.name, kind), ...listBoxDecls(frame.name, frame.openTag, frame.listDepth)], strip);
+		const chunk = [];
+		if (leaf && !listRoot && !frameHasInk(chunkText(frame.parts))) {
+			chunk.push(open("block"));
+			if (rawClose !== "") chunk.push(rawClose);
+		} else if (wrap) {
+			chunk.push(open("block"), `<span style=${quoteStyleValue(spanStyle)}>`, frame.parts, "</span>");
+			if (rawClose !== "") chunk.push(rawClose);
+		} else {
+			const kind = !leaf && !listRoot && frame.name !== "div" ? "all" : "block";
+			chunk.push(open(kind), frame.parts);
+			if (rawClose !== "") chunk.push(rawClose);
+		}
+		dest.push(chunk);
+	};
+	const closeFrame = (name, rawClose) => {
+		let idx = -1;
+		for (let s = stack.length - 1; s >= 0; s--) if (stack[s].name === name) {
+			idx = s;
+			break;
+		}
+		if (idx === -1) {
+			parts().push(rawClose);
+			return;
+		}
+		while (stack.length - 1 > idx) emitFrame(stack.pop(), "");
+		emitFrame(stack.pop(), rawClose);
+	};
 	let i = 0;
 	while (i < html.length) {
-		const open = html.indexOf("<p", i);
-		if (open === -1) {
-			out += html.substring(i);
+		const lt = html.indexOf("<", i);
+		if (lt === -1) {
+			parts().push(html.slice(i));
 			break;
 		}
-		const afterTagName = html[open + 2];
-		if (afterTagName !== ">" && afterTagName !== " " && afterTagName !== "	" && afterTagName !== "\n" && afterTagName !== "\r" && afterTagName !== "/") {
-			out += html.substring(i, open + 2);
-			i = open + 2;
+		parts().push(html.slice(i, lt));
+		if (html.startsWith("<!--", lt)) {
+			const end = html.indexOf("-->", lt + 4);
+			if (end === -1) {
+				parts().push(html.slice(lt));
+				break;
+			}
+			parts().push(html.slice(lt, end + 3));
+			i = end + 3;
 			continue;
 		}
-		const openEnd = html.indexOf(">", open + 2);
-		if (openEnd === -1) {
-			out += html.substring(i);
-			break;
+		const isClose = html[lt + 1] === "/";
+		const nameStart = lt + (isClose ? 2 : 1);
+		if (!/[a-z]/i.test(html[nameStart] ?? "")) {
+			parts().push("<");
+			i = lt + 1;
+			continue;
 		}
-		const closeStart = html.indexOf("</p>", openEnd + 1);
-		if (closeStart === -1) {
-			out += html.substring(i);
+		let nameEnd = nameStart;
+		while (nameEnd < html.length && /[a-z0-9]/i.test(html[nameEnd])) nameEnd++;
+		const boundary = html[nameEnd];
+		if (boundary !== void 0 && !/[\s>/]/.test(boundary)) {
+			parts().push(html.slice(lt, nameEnd));
+			i = nameEnd;
+			continue;
+		}
+		const name = html.slice(nameStart, nameEnd).toLowerCase();
+		if (isClose) {
+			const end = html.indexOf(">", nameEnd);
+			if (end === -1) {
+				parts().push(html.slice(lt));
+				break;
+			}
+			closeFrame(name, html.slice(lt, end + 1));
+			i = end + 1;
+			continue;
+		}
+		const end = findOpenTagEnd(html, nameEnd);
+		if (end === -1) {
+			parts().push(html.slice(lt));
 			break;
 		}
-		const inner = html.substring(openEnd + 1, closeStart);
-		out += html.substring(i, openEnd + 1);
-		out += `<span style="${spanStyle}">${inner}</span></p>`;
-		i = closeStart + 4;
+		const openTag = html.slice(lt, end + 1);
+		if (html[end - 1] === "/" || !TEXT_ROOTS.has(name)) {
+			parts().push(rewriteOpenTag(openTag, name === "a" ? anchorDecls : [], strip));
+			i = end + 1;
+			continue;
+		}
+		const parentDepth = stack.length > 0 ? stack[stack.length - 1].listDepth : 0;
+		stack.push({
+			name,
+			openTag,
+			parts: [],
+			blockChild: false,
+			listDepth: name === "ul" || name === "ol" ? parentDepth + 1 : parentDepth
+		});
+		i = end + 1;
 	}
-	return out;
+	while (stack.length > 0) emitFrame(stack.pop(), "");
+	return flattenChunks(root);
+}
+/**
+* A px length, rounded like {@link parsePxValue}, or `undefined` when it is
+* not one. Unitless `0` is `0`: CSS treats it as a length. A negative length
+* is not a gap.
+*/
+function explicitPx(value) {
+	const trimmed = value.trim();
+	if (/^0+(?:\.0+)?$/.test(trimmed)) return 0;
+	if (!/^\d+(?:\.\d+)?\s*px$/i.test(trimmed)) return void 0;
+	return parsePxValue(trimmed);
+}
+/** The bottom length of a `margin` shorthand, when that side is a px length. */
+function shorthandMarginBottom(value) {
+	const parts = value.trim().split(/\s+/);
+	if (parts.length < 1 || parts.length > 4) return void 0;
+	return explicitPx(parts.length <= 2 ? parts[0] : parts[2]);
+}
+/**
+* The px `margin-bottom` an opening tag states, after a `margin` shorthand
+* and a later `margin-bottom` the way CSS applies them. `undefined` when the
+* tag states none, or the winning value is not a px length.
+*/
+function tagMarginBottom(tag) {
+	const style = findStyleAttr(tag)?.value;
+	if (style === void 0) return void 0;
+	let gap;
+	let set = false;
+	for (const part of style.split(";")) {
+		const colon = part.indexOf(":");
+		if (colon === -1) continue;
+		const prop = part.slice(0, colon).trim().toLowerCase();
+		if (prop !== "margin" && prop !== "margin-bottom") continue;
+		const value = part.slice(colon + 1).trim();
+		const bottom = prop === "margin" ? shorthandMarginBottom(value) : explicitPx(value);
+		if (bottom === void 0) {
+			set = false;
+			gap = void 0;
+		} else {
+			set = true;
+			gap = bottom;
+		}
+	}
+	return set ? gap : void 0;
+}
+function isParagraphOpen(html, open) {
+	const name = html[open + 1];
+	const next = html[open + 2];
+	return (name === "p" || name === "P") && (next === ">" || next === " " || next === "	" || next === "\n" || next === "\r" || next === "/");
+}
+/**
+* The gap between this block's paragraphs.
+*
+* BeeFree paragraphs sit at margin 0, so the gap is 0 unless a `<p>` states a
+* px `margin-bottom` or the bottom of a `margin` shorthand. The first such
+* length wins; one block has one gap.
+*/
+function paragraphSpacingFromHtml(html) {
+	let i = 0;
+	while (i < html.length) {
+		const open = html.indexOf("<", i);
+		if (open === -1) return 0;
+		if (!isParagraphOpen(html, open)) {
+			i = open + 1;
+			continue;
+		}
+		const openEnd = html.indexOf(">", open + 2);
+		if (openEnd === -1) return 0;
+		const gap = tagMarginBottom(html.slice(open, openEnd + 1));
+		if (gap !== void 0) return gap;
+		i = openEnd + 1;
+	}
+	return 0;
+}
+/**
+* A paragraph module's gap, in px. BeeFree stores it on
+* `computedStyle.paragraphSpacing` and renders it as `margin-bottom` on every
+* paragraph but the last. That wins over a margin written into the HTML. A
+* missing or non-px value falls back to the HTML.
+*/
+function paragraphModuleSpacing(content, html) {
+	const stated = content?.computedStyle?.paragraphSpacing?.trim();
+	const match = stated ? /^(\d+(?:\.\d+)?)\s*px$/i.exec(stated) : null;
+	if (!match) return paragraphSpacingFromHtml(html);
+	return Math.round(Number(match[1]));
 }
 function convertText(descriptor, textColor) {
 	const textContent = descriptor.text ?? descriptor.paragraph ?? descriptor.list;
 	const html = textContent?.html ?? "";
 	const style = textContent?.style ?? {};
+	const listBox = textContent !== void 0 && textContent === descriptor.list ? listBoxFor(textContent) : void 0;
 	return createParagraphBlock({
-		content: inlineStylesToHtml(html, style, textColor),
+		content: importedHtml(inlineStylesToHtml(html, style, textColor, moduleLinkColor(textContent), listBox)),
+		paragraphSpacing: paragraphModuleSpacing(textContent, html),
 		styles: makeStyles(descriptor)
 	});
 }
@@ -653,21 +1932,113 @@ function parseHeadingLevel(tag) {
 	}
 	return 2;
 }
+const TITLE_LEVELS = [
+	1,
+	2,
+	3,
+	4
+];
+/**
+* The title level whose renderer size is nearest `px`.
+*
+* Sizes are `HEADING_LEVEL_FONT_SIZE` in `@templatical/types`, the table
+* `renderTitle` writes onto the title's `mj-text`. That size is the line
+* box. A tie stays on the level nearer `source`.
+*/
+function headingLevelForSize(px, source) {
+	let best = source;
+	let bestSize = Infinity;
+	let bestSource = Infinity;
+	for (const level of TITLE_LEVELS) {
+		const size = Math.abs(HEADING_LEVEL_FONT_SIZE[level] - px);
+		const toward = Math.abs(level - source);
+		if (size < bestSize || size === bestSize && toward < bestSource) {
+			best = level;
+			bestSize = size;
+			bestSource = toward;
+		}
+	}
+	return best;
+}
+/**
+* Set when the chosen level's size is more than 1px off BeeFree's font size,
+* so the line box is not the source size. Names the source level when the
+* chosen level is a different one.
+*/
+function headingLevelNote(px, source, chosen) {
+	if (Math.abs(HEADING_LEVEL_FONT_SIZE[chosen] - px) <= 1) return void 0;
+	return `h${chosen} chosen for ${px}px${chosen === source ? "" : ` (source h${source})`}; line box differs`;
+}
+/** `text-align` inside a CSS declaration list, when it is left, center or right. */
+function alignInStyle(css) {
+	if (!css) return void 0;
+	return /(?:^|;)\s*text-align\s*:\s*(left|center|right)\b/i.exec(css)?.[1].toLowerCase();
+}
+/**
+* Alignment on a heading tag BeeFree wrapped the text in
+* (`<h1 style="text-align: center">`). The tag is stripped before the text
+* is stored, so the alignment has to be read first.
+*/
+function headingTagCss(text) {
+	const open = /^<h\d\b([^>]*)>/i.exec(text.trim());
+	if (!open) return void 0;
+	const quoted = /\bstyle\s*=\s*(?:"([^"]*)"|'([^']*)')/i.exec(open[1]);
+	return quoted?.[1] ?? quoted?.[2];
+}
+/** One declaration from a CSS list, or `undefined` when it is absent. */
+function cssDecl(css, name) {
+	if (!css) return void 0;
+	return new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(css)?.[1]?.trim() || void 0;
+}
+/**
+* The heading style wins over the same declaration on the heading tag.
+* The tag is stripped before the text is stored.
+*/
+function headingSourceDecl(style, tagCss, name) {
+	return style[name]?.trim() || cssDecl(tagCss, name);
+}
+/**
+* Typography the title block cannot store. The renderer sizes a title from
+* its level (an `h1` is 36px), paints it bold and sets line-height 1.3, so
+* the heading's own values go on the text and override those.
+* `letter-spacing` of `0` or `normal` adds nothing.
+*/
+function headingTypographyStyle(style, tagCss) {
+	const decls = [];
+	const fontSize = parsePxValue(headingSourceDecl(style, tagCss, "font-size"));
+	if (fontSize > 0) decls.push(`font-size: ${fontSize}px`);
+	const lineHeight = moduleLineHeight(headingSourceDecl(style, tagCss, "line-height"));
+	if (lineHeight) decls.push(`line-height: ${lineHeight}`);
+	const weight = headingSourceDecl(style, tagCss, "font-weight");
+	if (weight && !/^(inherit|initial|unset|revert)$/i.test(weight)) decls.push(`font-weight: ${weight}`);
+	const letterSpacing = moduleLetterSpacing(headingSourceDecl(style, tagCss, "letter-spacing"));
+	if (letterSpacing) decls.push(`letter-spacing: ${letterSpacing}`);
+	return decls.length > 0 ? decls.join("; ") : void 0;
+}
 function convertHeading(descriptor, textColor) {
 	const heading = descriptor.heading;
-	if (!heading) return convertText(descriptor, textColor);
+	if (!heading) return { block: convertText(descriptor, textColor) };
 	const style = heading.style ?? {};
 	const tag = heading.title ?? "h2";
 	const text = heading.text ?? "";
 	const content = text.startsWith("<") ? text.replace(/^<h\d[^>]*>|<\/h\d>$/gi, "") : text;
-	return createTitleBlock({
-		content: content ? `<p>${content}</p>` : "<p></p>",
-		level: parseHeadingLevel(tag),
-		color: parseColor(style.color) || void 0,
-		textAlign: toAlign(style["text-align"]),
-		fontFamily: canonicalFontStack(style["font-family"]) || void 0,
-		styles: makeStyles(descriptor)
-	});
+	const tagCss = headingTagCss(text);
+	const typography = headingTypographyStyle(style, tagCss);
+	const inner = typography ? `<span style=${quoteStyleValue(typography)}>${content}</span>` : content;
+	const source = parseHeadingLevel(tag);
+	const px = parsePxValue(headingSourceDecl(style, tagCss, "font-size"));
+	const level = px > 0 ? headingLevelForSize(px, source) : source;
+	return {
+		block: createTitleBlock({
+			content: importedHtml(content || typography ? `<p>${inner}</p>` : "<p></p>"),
+			level,
+			color: parseColor(style.color) || void 0,
+			textAlign: toAlign(style["text-align"] ?? alignInStyle(tagCss) ?? descriptor.style?.["text-align"]),
+			fontFamily: canonicalFontStack(style["font-family"]) || void 0,
+			styles: makeStyles(descriptor)
+		}),
+		note: px > 0 ? headingLevelNote(px, source, level) : void 0
+	};
 }
 /**
 * The classes BeeFree records in `computedStyle.class` for an image: its
@@ -692,9 +2063,9 @@ function computedPx(value) {
 * column. `image.width` and `image.height` are the file's own size, the
 * fallback for an export without `computedStyle`. No width, or one that
 * reaches `room` (the column less the image's side padding), is `"full"`.
-* Older exports class an image that fills its column `fullwidth`, and its
-* computed width leaves out the column padding the import drops, so the class
-* decides. A computed percentage under 100% becomes px of `room`, with a note:
+* Older exports class an image that fills its column `fullwidth`. Its computed
+* width leaves out the column padding, so the class decides. A computed
+* percentage under 100% becomes px of `room`, with a note:
 * px keeps its size on a phone, where the percentage would shrink.
 */
 function resolveImageWidth(descriptor, room) {
@@ -721,14 +2092,14 @@ function shownWidth(shown, room) {
 	if (shown <= 0) return "full";
 	return room !== void 0 && shown >= room ? "full" : shown;
 }
-function convertImage(descriptor, columnWidth) {
+function convertImage(descriptor, columnWidth, paddingReturn) {
 	const image = descriptor.image;
 	const styles = makeStyles(descriptor);
 	if (!image) return {
 		block: createImageBlock({ styles }),
 		notes: []
 	};
-	const room = columnWidth === void 0 ? void 0 : columnWidth - styles.padding.left - styles.padding.right;
+	const room = measuredRoom(columnWidth, styles.padding, paddingReturn);
 	const { width, note } = resolveImageWidth(descriptor, room);
 	const fileWidth = parsePxValue(image.width);
 	const fileHeight = parsePxValue(image.height);
@@ -743,8 +2114,8 @@ function convertImage(descriptor, columnWidth) {
 	].find((side) => classes.includes(side));
 	return {
 		block: createImageBlock({
-			src: image.src || "",
-			alt: image.alt || "",
+			src: decodeEntitiesInTokens(image.src || ""),
+			alt: decodeEntitiesInTokens(image.alt || ""),
 			width,
 			...fileWidth > 0 && fileHeight > 0 ? {
 				naturalWidth: fileWidth,
@@ -752,34 +2123,199 @@ function convertImage(descriptor, columnWidth) {
 			} : {},
 			borderRadius: parseImageBorderRadius(image.style?.["border-radius"], stated ? shownWidth : void 0, shownHeight),
 			align: toAlign(image.style?.["text-align"] ?? classAlign, "center"),
-			linkUrl: image.href || void 0,
+			linkUrl: image.href ? decodeEntitiesInTokens(image.href) : void 0,
 			styles
 		}),
 		notes: note ? [note] : []
 	};
 }
+/**
+* A button label's line-height in px. BeeFree writes a percentage of the font
+* size (`200%`), a unitless ratio (`2`) or a px length. Anything else is
+* unread, and the padding stays as BeeFree wrote it.
+*/
+function buttonLineHeightPx(value, fontSize) {
+	if (!value || fontSize <= 0) return void 0;
+	const trimmed = value.trim();
+	const percent = /^(\d+(?:\.\d+)?)\s*%$/.exec(trimmed);
+	if (percent) {
+		const ratio = Number(percent[1]) / 100;
+		return Number.isFinite(ratio) && ratio > 0 ? fontSize * ratio : void 0;
+	}
+	if (/^\d+(?:\.\d+)?$/.test(trimmed)) {
+		const ratio = Number(trimmed);
+		return Number.isFinite(ratio) && ratio > 0 ? fontSize * ratio : void 0;
+	}
+	const px = /^(\d+(?:\.\d+)?)\s*px$/i.exec(trimmed);
+	if (!px) return void 0;
+	const length = Number(px[1]);
+	return Number.isFinite(length) && length > 0 ? length : void 0;
+}
+/**
+* How many px to add to the button's top and bottom padding so the label's
+* line box matches BeeFree. The rendered label is 1.2× the font size, so a
+* taller line-height is split across the two sides. The result is an integer
+* and never negative: a line-height at or under 1.2 adds nothing.
+*/
+function lineHeightPadding(lineHeightPx, fontSize) {
+	const extra = (lineHeightPx - 1.2 * fontSize) / 2;
+	if (!Number.isFinite(extra) || extra <= 0) return 0;
+	return Math.round(extra);
+}
+/**
+* A CSS font-weight as a number. `normal` is 400. `bold` and `bolder` are
+* 700 — `bolder` is relative, and with no parent weight the absolute step
+* it names is bold. Anything else unreadable is dropped.
+*/
+function cssFontWeightNumber(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : void 0;
+	if (typeof value !== "string") return void 0;
+	const trimmed = value.trim().toLowerCase();
+	if (!trimmed) return void 0;
+	if (trimmed === "normal") return 400;
+	if (trimmed === "bold" || trimmed === "bolder") return 700;
+	if (!/^[+-]?(?:\d+(?:\.\d+)?|\.\d+)$/.test(trimmed)) return void 0;
+	const numeric = Number(trimmed);
+	return Number.isFinite(numeric) ? numeric : void 0;
+}
+/**
+* The nearest of 400, 500 and 700. The stops are lightest first and a tie
+* keeps the lighter one, so 450 is regular and 600 is medium.
+*/
+function nearestButtonWeight(weight) {
+	const stops = [
+		["regular", 400],
+		["medium", 500],
+		["bold", 700]
+	];
+	let best = "regular";
+	let bestDistance = Infinity;
+	for (const [name, stop] of stops) {
+		const distance = Math.abs(weight - stop);
+		if (distance < bestDistance) {
+			best = name;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+/**
+* BeeFree's weight as the button field. Bold is what an omitted field
+* renders, so that step is left unset. An unreadable weight is dropped.
+*/
+function buttonFontWeight(value) {
+	const numeric = cssFontWeightNumber(value);
+	if (numeric === void 0) return void 0;
+	const mapped = nearestButtonWeight(numeric);
+	return mapped === "bold" ? void 0 : mapped;
+}
+/**
+* A letter-spacing worth naming. `0` and `normal` are the CSS initial value,
+* so they are not a difference. CSS-wide keywords are unread the same way.
+*/
+function uncarriedLetterSpacing(value) {
+	if (!value) return void 0;
+	const trimmed = value.trim();
+	if (!trimmed) return void 0;
+	const lower = trimmed.toLowerCase();
+	if (lower === "normal" || lower === "0" || /^(?:inherit|initial|unset|revert)$/.test(lower) || /^0+(?:\.0+)?px$/.test(lower)) return;
+	return trimmed;
+}
+/**
+* `100%` fills the column. Any other percentage has no field to land in, so
+* the button sizes to its label and the caller names that width. A px width
+* is that many pixels. `auto` and anything unreadable leave the width unset.
+*/
+function buttonWidth(value) {
+	if (!value) return {};
+	const raw = value.trim();
+	if (!raw || /^auto$/i.test(raw)) return {};
+	const percent = /^(\d+(?:\.\d+)?)\s*%$/.exec(raw);
+	if (percent) {
+		if (Number(percent[1]) === 100) return { width: "full" };
+		return { uncarried: `width ${raw}` };
+	}
+	const px = /^(\d+(?:\.\d+)?)\s*px$/i.exec(raw);
+	if (!px) return {};
+	const width = Math.round(Number(px[1]));
+	return width > 0 ? { width } : {};
+}
+/**
+* One note naming what this button does not carry: a letter-spacing, and a
+* percentage width other than 100%. Empty when nothing was left out. Weight
+* is mapped, so it is not named here.
+*/
+function buttonApproximationNote(style, widthUncarried) {
+	const parts = [];
+	const spacing = uncarriedLetterSpacing(style["letter-spacing"]);
+	if (spacing) parts.push(`letter spacing ${spacing}`);
+	if (widthUncarried) parts.push(widthUncarried);
+	if (parts.length === 0) return void 0;
+	const verb = parts.length === 1 ? "is" : "are";
+	return `${parts.join(", ")} ${verb} not carried`;
+}
+function toButtonBorderStyle(value) {
+	if (value === "dashed" || value === "dotted" || value === "solid") return value;
+	return "solid";
+}
+/**
+* The button's border. A side that paints nothing has width 0. `undefined`
+* when no side is drawn. A style other than solid, dashed or dotted is solid.
+*/
+function buttonBorder(style) {
+	let drawn = false;
+	const border = {};
+	for (const side of BORDER_SIDES) {
+		const raw = style[`border-${side}`];
+		const parsed = raw ? parseBorderTop(raw) : void 0;
+		const paints = parsed !== void 0 && parsed.drawn && parsed.width > 0;
+		if (paints) drawn = true;
+		border[side] = {
+			width: paints ? parsed.width : 0,
+			style: toButtonBorderStyle(parsed?.style),
+			color: parsed?.color || "#000000"
+		};
+	}
+	return drawn ? border : void 0;
+}
 function convertButton(descriptor) {
 	const button = descriptor.button;
-	if (!button) return createButtonBlock({ styles: makeStyles(descriptor) });
+	if (!button) return {
+		block: createButtonBlock({ styles: makeStyles(descriptor) }),
+		notes: []
+	};
 	const style = button.style ?? {};
-	const label = button.label ? stripTagsPlain(button.label) : "Button";
-	return createButtonBlock({
-		text: label,
-		url: button.href || "#",
-		backgroundColor: parseColor(style["background-color"]) || "#4f46e5",
-		textColor: parseColor(style.color) || "#ffffff",
-		borderRadius: parsePxValue(style["border-radius"]),
-		fontSize: parsePxValue(style["font-size"]) || 16,
-		fontFamily: canonicalFontStack(style["font-family"]) || void 0,
-		align: toAlign(style["text-align"], "center"),
-		buttonPadding: {
-			top: parsePxValue(style["padding-top"]) || 12,
-			right: parsePxValue(style["padding-right"]) || 24,
-			bottom: parsePxValue(style["padding-bottom"]) || 12,
-			left: parsePxValue(style["padding-left"]) || 24
-		},
-		styles: makeStyles(descriptor)
-	});
+	const label = button.label ? importedPlainText(button.label) : "Button";
+	const fontSize = parsePxValue(style["font-size"]) || 16;
+	const lineHeightPx = buttonLineHeightPx(style["line-height"], fontSize);
+	const linePad = lineHeightPx === void 0 ? 0 : lineHeightPadding(lineHeightPx, fontSize);
+	const { width, uncarried: widthUncarried } = buttonWidth(style.width);
+	const border = buttonBorder(style);
+	const fontWeight = buttonFontWeight(style["font-weight"]);
+	const note = buttonApproximationNote(style, widthUncarried);
+	return {
+		block: createButtonBlock({
+			text: label,
+			url: button.href ? decodeEntitiesInTokens(button.href) : "#",
+			backgroundColor: parseColor(style["background-color"]) || "#4f46e5",
+			textColor: parseColor(style.color) || "#ffffff",
+			borderRadius: parsePxValue(style["border-radius"]),
+			fontSize,
+			fontFamily: canonicalFontStack(style["font-family"]) || void 0,
+			...fontWeight ? { fontWeight } : {},
+			align: toAlign(descriptor.style?.["text-align"] ?? style["text-align"], "center"),
+			...width !== void 0 ? { width } : {},
+			...border ? { border } : {},
+			buttonPadding: {
+				top: (parsePxValue(style["padding-top"]) || 12) + linePad,
+				right: parsePxValue(style["padding-right"]) || 24,
+				bottom: (parsePxValue(style["padding-bottom"]) || 12) + linePad,
+				left: parsePxValue(style["padding-left"]) || 24
+			},
+			styles: makeStyles(descriptor)
+		}),
+		notes: note ? [note] : []
+	};
 }
 /**
 * `"full"` when the divider spans its column: no width, `100%`, or a px width
@@ -804,12 +2340,12 @@ function resolveDividerWidth(value, contentWidth, notes) {
 	if (px !== Math.round(parsed.value)) notes.push(`Divider width ${raw} was clamped to 0px.`);
 	return contentWidth !== void 0 && px >= contentWidth ? "full" : px;
 }
-function convertDivider(descriptor, columnWidth) {
+function convertDivider(descriptor, columnWidth, paddingReturn) {
 	const style = descriptor.divider?.style ?? {};
 	const border = parseBorderTop(style["border-top"]);
 	const styles = makeStyles(descriptor);
 	const notes = [];
-	const contentWidth = columnWidth === void 0 ? void 0 : columnWidth - styles.padding.left - styles.padding.right;
+	const contentWidth = measuredRoom(columnWidth, styles.padding, paddingReturn);
 	const width = resolveDividerWidth(style.width, contentWidth, notes);
 	const align = dividerAlign(descriptor);
 	if (width !== "full" && (align === "left" || align === "right")) notes.push(`BeeFree aligns this divider ${align}; Templatical centres every divider.`);
@@ -872,31 +2408,378 @@ function convertSpacer(descriptor) {
 function convertHtml(descriptor) {
 	const html = descriptor.html?.html ?? "";
 	return createHtmlBlock({
-		content: html,
+		content: importedHtml(html),
 		styles: makeStyles(descriptor)
 	});
 }
+/** `"E-Mail"` and `"YouTube"` are network names; a blank id is not one. */
+function socialKey(value) {
+	return (value ?? "").toLowerCase().replace(/[^a-z0-9]+/g, "");
+}
+function platformFromKey(value) {
+	const key = socialKey(value);
+	return key ? SOCIAL_PLATFORM_MAP[key] : void 0;
+}
+const SOCIAL_HOSTS = [
+	["youtube.com", "youtube"],
+	["youtu.be", "youtube"],
+	["facebook.com", "facebook"],
+	["fb.com", "facebook"],
+	["instagram.com", "instagram"],
+	["linkedin.com", "linkedin"],
+	["xing.com", "xing"],
+	["twitter.com", "twitter"],
+	["x.com", "twitter"],
+	["tiktok.com", "tiktok"],
+	["pinterest.com", "pinterest"],
+	["pin.it", "pinterest"],
+	["whatsapp.com", "whatsapp"],
+	["wa.me", "whatsapp"],
+	["t.me", "telegram"],
+	["telegram.me", "telegram"],
+	["telegram.org", "telegram"],
+	["discord.com", "discord"],
+	["discord.gg", "discord"],
+	["snapchat.com", "snapchat"],
+	["reddit.com", "reddit"],
+	["github.com", "github"],
+	["dribbble.com", "dribbble"],
+	["behance.net", "behance"]
+];
+/** The link's host when the icon's id and name are not a network. */
+function platformFromHref(href) {
+	const raw = (href ?? "").trim();
+	if (!raw) return void 0;
+	if (/^mailto:/i.test(raw)) return "email";
+	let host;
+	try {
+		host = new URL(raw).hostname.toLowerCase();
+	} catch {
+		return;
+	}
+	if (host.startsWith("www.")) host = host.slice(4);
+	for (const [domain, platform] of SOCIAL_HOSTS) if (host === domain || host.endsWith(`.${domain}`)) return platform;
+}
+/**
+* BeeFree stores a custom icon's id as a UUID and the network in `name`, or
+* the other way around. A blank id is not a name. The link's host is the
+* last place the network is written.
+*/
+function socialPlatform(icon) {
+	return platformFromKey(icon.id) ?? platformFromKey(icon.name) ?? platformFromKey(icon.image?.alt) ?? platformFromKey(icon.image?.title) ?? platformFromHref(icon.image?.href);
+}
+function isUuid(value) {
+	return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value.trim());
+}
+function positivePx(value) {
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) return Math.round(value);
+	if (typeof value === "string") return parsePxValue(value);
+	return 0;
+}
+/** A name to put in the note: the alt text, or a name that is not a UUID. */
+function networkLabel(icon, href) {
+	const alt = icon.image?.alt?.trim();
+	if (alt) return alt;
+	const title = icon.image?.title?.trim();
+	if (title) return title;
+	const name = icon.name?.trim();
+	if (name && !isUuid(name)) return name;
+	const id = icon.id?.trim();
+	if (id && !isUuid(id)) return id;
+	try {
+		const host = new URL(href).hostname.replace(/^www\./, "");
+		if (host) return host;
+	} catch {}
+	return "custom";
+}
+function safeCopiedUrl(value, kind, warnings) {
+	if (!value) return "";
+	if (isSafeHtmlUrl(value, kind)) return value;
+	warnings.push(kind === "src" ? `Dropped the unsafe image "${value}" on a social icon.` : `Dropped the unsafe link "${value}" on a social icon.`);
+	return "";
+}
+/**
+* A network Templatical does not draw. The file and the link stay, as an
+* image when there is a file and as a link when there is not.
+*/
+function unknownSocialBlock(descriptor, icon, warnings) {
+	const href = safeCopiedUrl(decodeEntitiesInTokens(icon.image?.href ?? ""), "href", warnings);
+	const src = safeCopiedUrl(decodeEntitiesInTokens(icon.image?.src ?? ""), "src", warnings);
+	const label = networkLabel(icon, href || icon.image?.href || "");
+	if (!src && !href) {
+		const note = `Social network "${label}" has no Templatical icon and no image or link to keep.`;
+		warnings.push(note);
+		return {
+			block: createHtmlBlock({
+				content: "",
+				styles: makeStyles(descriptor)
+			}),
+			note
+		};
+	}
+	const asLink = !src;
+	const note = `Social network "${label}" has no Templatical icon; imported as ${asLink ? "a link" : "an image"}.`;
+	warnings.push(note);
+	if (asLink) return {
+		block: createHtmlBlock({
+			content: decodeEntitiesInHtml(`<a href="${escapeHtml(href)}">${escapeHtml(decodeEntitiesInTokens(label))}</a>`),
+			styles: makeStyles(descriptor)
+		}),
+		note
+	};
+	const fileWidth = positivePx(icon.image?.width);
+	const fileHeight = positivePx(icon.image?.height);
+	const shown = positivePx(descriptor.computedStyle?.iconsDefaultWidth) || fileWidth || 32;
+	return {
+		block: createImageBlock({
+			src,
+			alt: decodeEntitiesInTokens(icon.image?.alt ?? ""),
+			width: shown,
+			...fileWidth > 0 && fileHeight > 0 ? {
+				naturalWidth: fileWidth,
+				naturalHeight: fileHeight
+			} : {},
+			align: toAlign(descriptor.style?.["text-align"], "center"),
+			linkUrl: href || void 0,
+			...icon.image?.target === "_blank" ? { linkOpenInNewTab: true } : {},
+			styles: makeStyles(descriptor)
+		}),
+		note
+	};
+}
+/**
+* BeeFree names an icon set in the file URL
+* (`…/social-networks-icon-sets/circle-dark-gray/facebook.png`).
+* A gray set uses the dark tone: the block's monochrome dark is `#1f1f1f`,
+* the nearest circle that is not a brand-coloured solid. A set whose shape
+* or tone has no match is absent, and the block keeps solid brand icons.
+*/
+const SOCIAL_ICON_SETS = {
+	"circle-color": { iconStyle: "circle" },
+	"circle-colored": { iconStyle: "circle" },
+	"circle-colour": { iconStyle: "circle" },
+	"circle-black": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-dark": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-dark-gray": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-dark-grey": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-gray": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-grey": {
+		iconStyle: "circle",
+		iconTone: "dark"
+	},
+	"circle-white": {
+		iconStyle: "circle",
+		iconTone: "light"
+	},
+	"circle-light": {
+		iconStyle: "circle",
+		iconTone: "light"
+	},
+	"rounded-color": { iconStyle: "rounded" },
+	"rounded-colored": { iconStyle: "rounded" },
+	"rounded-black": {
+		iconStyle: "rounded",
+		iconTone: "dark"
+	},
+	"rounded-dark": {
+		iconStyle: "rounded",
+		iconTone: "dark"
+	},
+	"rounded-dark-gray": {
+		iconStyle: "rounded",
+		iconTone: "dark"
+	},
+	"rounded-dark-grey": {
+		iconStyle: "rounded",
+		iconTone: "dark"
+	},
+	"rounded-white": {
+		iconStyle: "rounded",
+		iconTone: "light"
+	},
+	"rounded-light": {
+		iconStyle: "rounded",
+		iconTone: "light"
+	},
+	"square-color": { iconStyle: "square" },
+	"square-colored": { iconStyle: "square" },
+	"squared-color": { iconStyle: "square" },
+	"squared-colored": { iconStyle: "square" },
+	"square-black": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"square-dark": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"squared-black": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"squared-dark": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"square-dark-gray": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"square-dark-grey": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"squared-dark-gray": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"squared-dark-grey": {
+		iconStyle: "square",
+		iconTone: "dark"
+	},
+	"square-white": {
+		iconStyle: "square",
+		iconTone: "light"
+	},
+	"square-light": {
+		iconStyle: "square",
+		iconTone: "light"
+	},
+	"squared-white": {
+		iconStyle: "square",
+		iconTone: "light"
+	},
+	"squared-light": {
+		iconStyle: "square",
+		iconTone: "light"
+	}
+};
+function socialIconSet(descriptor) {
+	const decodeSetName = (segment) => {
+		try {
+			return decodeURIComponent(segment);
+		} catch {
+			return segment;
+		}
+	};
+	const icons = descriptor.iconsList?.icons;
+	if (!Array.isArray(icons)) return void 0;
+	for (const icon of icons) {
+		if (!icon || typeof icon !== "object") continue;
+		const src = icon.image?.src;
+		if (typeof src !== "string") continue;
+		const match = /social-networks-icon-sets\/([^/?#]+)\//i.exec(src);
+		if (match) return decodeSetName(match[1]).toLowerCase();
+	}
+}
+/**
+* The gap between icons. BeeFree's padding is the space on each side of an
+* icon, so two neighbours contribute both sides. Rounded once, after the sum.
+* `undefined` when the padding isn't a length, and the block keeps 10.
+*/
+function socialSpacing(descriptor) {
+	const padding = descriptor.computedStyle?.padding;
+	if (typeof padding !== "string" || padding.trim() === "") return void 0;
+	const parts = padding.trim().split(/\s+/);
+	if (parts.length > 4) return void 0;
+	const values = [];
+	for (const part of parts) {
+		const match = /^(\d+(?:\.\d+)?|\.\d+)(px)?$/i.exec(part);
+		if (!match) return void 0;
+		values.push(parseFloat(match[1]));
+	}
+	const right = values.length === 1 ? values[0] : values[1];
+	const left = values.length === 4 ? values[3] : right;
+	return Math.round(left + right);
+}
+/** Nearest of the block's 24 / 32 / 48px presets. */
+function socialIconSizeFromWidth(width) {
+	if (width <= 0) return void 0;
+	if (width < 28) return "small";
+	if (width < 40) return "medium";
+	return "large";
+}
+function socialAppearance(descriptor) {
+	const spacing = socialSpacing(descriptor);
+	const size = socialIconSizeFromWidth(computedPx(descriptor.computedStyle?.iconsDefaultWidth));
+	const theme = SOCIAL_ICON_SETS[socialIconSet(descriptor) ?? ""];
+	return {
+		align: toAlign(descriptor.style?.["text-align"], "center"),
+		...spacing !== void 0 ? { spacing } : {},
+		...size ? { iconSize: size } : {},
+		...theme ? {
+			iconStyle: theme.iconStyle,
+			...theme.iconTone ? { iconTone: theme.iconTone } : {}
+		} : {}
+	};
+}
 function convertSocial(descriptor, warnings) {
 	const iconsList = descriptor.iconsList;
-	if (!iconsList?.icons) return createSocialIconsBlock({ styles: makeStyles(descriptor) });
+	const styles = makeStyles(descriptor);
+	const appearance = socialAppearance(descriptor);
+	if (!iconsList?.icons) return {
+		block: createSocialIconsBlock({
+			styles,
+			...appearance
+		}),
+		extras: [],
+		notes: []
+	};
 	const icons = [];
+	const extras = [];
+	const notes = [];
 	for (const beeIcon of iconsList.icons) {
-		const id = (beeIcon.id ?? beeIcon.name ?? "").toLowerCase();
-		const platform = SOCIAL_PLATFORM_MAP[id];
+		const platform = socialPlatform(beeIcon);
 		if (!platform) {
-			warnings.push(`Unrecognized social icon "${beeIcon.name || id}" was skipped.`);
+			const kept = unknownSocialBlock(descriptor, beeIcon, warnings);
+			if (!kept) continue;
+			if (kept.block.type === "html" && kept.block.content === "") {
+				notes.push(kept.note);
+				continue;
+			}
+			extras.push(kept.block);
+			notes.push(kept.note);
 			continue;
 		}
+		const href = safeCopiedUrl(decodeEntitiesInTokens(beeIcon.image?.href ?? ""), "href", warnings);
 		icons.push({
 			id: generateId(),
 			platform,
-			url: beeIcon.image?.href || "#"
+			url: href || "#"
 		});
 	}
-	return createSocialIconsBlock({
-		icons,
-		styles: makeStyles(descriptor)
-	});
+	if (icons.length === 0 && extras.length > 0) {
+		const [block, ...rest] = extras;
+		return {
+			block,
+			extras: rest,
+			notes
+		};
+	}
+	return {
+		block: createSocialIconsBlock({
+			icons,
+			styles,
+			...appearance
+		}),
+		extras,
+		notes
+	};
 }
 /** Escape `& < > "` for text content and attribute values. */
 function escapeHtml(value) {
@@ -932,7 +2815,7 @@ function iconSize(descriptor, item) {
 * A lone icon without text, as an image block at the icon height. `undefined`
 * when the module holds anything else, or the icon's file size is unknown.
 */
-function convertSingleIcon(descriptor, columnWidth) {
+function convertSingleIcon(descriptor, columnWidth, paddingReturn) {
 	const items = iconItems(descriptor);
 	if (items.length !== 1) return void 0;
 	const [item] = items;
@@ -947,7 +2830,7 @@ function convertSingleIcon(descriptor, columnWidth) {
 		bottom: styles.padding.bottom + spacing.bottom,
 		left: styles.padding.left + spacing.left
 	};
-	const room = columnWidth === void 0 ? void 0 : columnWidth - padding.left - padding.right;
+	const room = measuredRoom(columnWidth, padding, paddingReturn);
 	return createImageBlock({
 		src,
 		alt: stringField(item.alt),
@@ -995,7 +2878,7 @@ function iconsHtml(descriptor) {
 		const cellAlign = stacked ? " align=\"center\"" : "";
 		const href = stringField(item.href);
 		const target = stringField(item.target);
-		const link = (inner, linkStyle) => href ? `<a href="${escapeHtml(href)}"${target ? ` target="${escapeHtml(target)}"` : ""} style="${escapeHtml(linkStyle)}">${inner}</a>` : inner;
+		const link = (inner, linkStyle) => href ? `<a href="${escapeHtml(href)}"${target ? ` target="${escapeHtml(target)}"` : ""} style=${quoteStyleValue(linkStyle)}>${inner}</a>` : inner;
 		const src = stringField(item.image);
 		const { height, width } = iconSize(descriptor, item);
 		const title = stringField(item.title);
@@ -1006,14 +2889,14 @@ function iconsHtml(descriptor) {
 			`height: ${height}px;`,
 			"border: 0;"
 		].filter(Boolean).join(" ");
-		const img = `<img src="${escapeHtml(src)}" alt="${escapeHtml(stringField(item.alt))}"${title ? ` title="${escapeHtml(title)}"` : ""}${width === void 0 ? "" : ` width="${width}"`} height="${height}" style="${imgStyle}">`;
-		const iconCell = src ? `<td${cellAlign} style="${iconPadding}vertical-align: middle;">${link(img, "text-decoration: none;")}</td>` : "";
+		const img = `<img src="${escapeHtml(src)}" alt="${escapeHtml(stringField(item.alt))}"${title ? ` title="${escapeHtml(title)}"` : ""}${width === void 0 ? "" : ` width="${width}"`} height="${height}" style=${quoteStyleValue(imgStyle)}>`;
+		const iconCell = src ? `<td${cellAlign} style=${quoteStyleValue(`${iconPadding}vertical-align: middle;`)}>${link(img, "text-decoration: none;")}</td>` : "";
 		const text = stringField(item.text);
-		const textCell = text ? `<td${cellAlign} style="vertical-align: middle;${textStyle ? ` ${escapeHtml(textStyle)}` : ""}">${link(escapeHtml(text), `${color ? `color: ${color}; ` : ""}text-decoration: none;`)}</td>` : "";
+		const textCell = text ? `<td${cellAlign} style=${quoteStyleValue(`vertical-align: middle;${textStyle ? ` ${textStyle}` : ""}`)}>${link(escapeHtml(text), `${color ? `color: ${color}; ` : ""}text-decoration: none;`)}</td>` : "";
 		const body = (position === "top" ? [textCell, iconCell] : position === "bottom" ? [iconCell, textCell] : [position === "left" ? textCell + iconCell : iconCell + textCell]).filter(Boolean).map((row) => `<tr>${row}</tr>`).join("");
-		return `<td style="${index > 0 && gap ? `padding-left: ${gap}px; ` : ""}vertical-align: middle;"><table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">${body}</table></td>`;
+		return `<td style=${quoteStyleValue(`${index > 0 && gap ? `padding-left: ${gap}px; ` : ""}vertical-align: middle;`)}><table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">${body}</table></td>`;
 	});
-	return `<table role="presentation" border="0" cellpadding="0" cellspacing="0"${align === "left" ? "" : ` align="${align}"`} style="border-collapse: collapse;"><tr>${items.join("")}</tr></table>`;
+	return decodeEntitiesInHtml(`<table role="presentation" border="0" cellpadding="0" cellspacing="0"${align === "left" ? "" : ` align="${align}"`} style="border-collapse: collapse;"><tr>${items.join("")}</tr></table>`);
 }
 /**
 * The Icons module's items without the link and image URLs the editor's HTML
@@ -1023,13 +2906,21 @@ function iconsHtml(descriptor) {
 */
 function safeIconItems(descriptor, warnings) {
 	return iconItems(descriptor).map((item) => {
-		const safe = { ...item };
-		const image = stringField(item.image);
+		const safe = {
+			...item,
+			image: decodeEntitiesInTokens(stringField(item.image)),
+			alt: decodeEntitiesInTokens(stringField(item.alt)),
+			href: decodeEntitiesInTokens(stringField(item.href)),
+			text: decodeEntitiesInTokens(stringField(item.text)),
+			title: decodeEntitiesInTokens(stringField(item.title)),
+			target: decodeEntitiesInTokens(stringField(item.target))
+		};
+		const image = stringField(safe.image);
 		if (image && !isSafeHtmlUrl(image, "src")) {
 			warnings.push(`Dropped the unsafe image "${image}" on an Icons item.`);
 			safe.image = "";
 		}
-		const href = stringField(item.href);
+		const href = stringField(safe.href);
 		if (href && !isSafeHtmlUrl(href, "href")) {
 			warnings.push(`Dropped the unsafe link "${href}" on an Icons item.`);
 			safe.href = "";
@@ -1037,12 +2928,12 @@ function safeIconItems(descriptor, warnings) {
 		return safe;
 	});
 }
-function convertIcons(descriptor, columnWidth, warnings) {
+function convertIcons(descriptor, columnWidth, paddingReturn, warnings) {
 	const safe = {
 		...descriptor,
 		iconsList: { icons: safeIconItems(descriptor, warnings) }
 	};
-	const single = convertSingleIcon(safe, columnWidth);
+	const single = convertSingleIcon(safe, columnWidth, paddingReturn);
 	if (single) return {
 		block: single,
 		rebuilt: false
@@ -1059,9 +2950,9 @@ function convertVideo(descriptor) {
 	const video = descriptor.video;
 	if (!video) return createVideoBlock({ styles: makeStyles(descriptor) });
 	return createVideoBlock({
-		url: video.src || "",
-		thumbnailUrl: video.thumbnail || "",
-		alt: video.thumbAlt ?? video.alt ?? "",
+		url: decodeEntitiesInTokens(video.src || ""),
+		thumbnailUrl: decodeEntitiesInTokens(video.thumbnail || ""),
+		alt: decodeEntitiesInTokens(video.thumbAlt ?? video.alt ?? ""),
 		width: parsePxValue(video.style?.width) || 600,
 		height: parsePxValue(video.style?.height) || void 0,
 		align: toAlign(video.style?.["text-align"], "center"),
@@ -1074,15 +2965,15 @@ function convertMenu(descriptor) {
 	const style = menu.style ?? {};
 	const items = (menu.items ?? []).map((item) => ({
 		id: generateId(),
-		text: item.text || "",
-		url: item.link || item.href || "#",
+		text: decodeEntitiesInTokens(item.text || ""),
+		url: decodeEntitiesInTokens(item.link || item.href || "#"),
 		openInNewTab: item.target === "_blank",
 		bold: false,
 		underline: false
 	}));
 	return createMenuBlock({
 		items,
-		separator: menu.separator || "|",
+		separator: decodeEntitiesInTokens(menu.separator || "|"),
 		separatorColor: parseColor(menu.separatorColor) || "#999999",
 		fontSize: parsePxValue(style["font-size"]) || 14,
 		color: parseColor(style.color) || void 0,
@@ -1103,7 +2994,7 @@ function convertTable(descriptor) {
 		id: generateId(),
 		cells: (row.cells ?? []).map((cell) => {
 			const raw = cell.content ?? cell.html ?? "";
-			const content = stripTagsPlain(raw);
+			const content = importedPlainText(raw);
 			if (content !== raw) approximated = true;
 			return {
 				id: generateId(),
@@ -1135,7 +3026,7 @@ function convertHtmlFallback(module) {
 	else if (descriptor.heading?.text) html = descriptor.heading.text;
 	else html = `<!-- Unsupported BeeFree module: ${module.type} -->`;
 	return createHtmlBlock({
-		content: html,
+		content: importedHtml(html),
 		styles: makeStyles(descriptor)
 	});
 }
@@ -1157,6 +3048,7 @@ function convertModuleBase(module, warnings, context = {}) {
 		}
 	};
 	let block;
+	let extras = [];
 	let isApproximation = false;
 	let notes = [];
 	switch (mappedType) {
@@ -1164,19 +3056,29 @@ function convertModuleBase(module, warnings, context = {}) {
 		case "list":
 			block = convertText(descriptor, textColor);
 			break;
-		case "title":
-			block = convertHeading(descriptor, textColor);
+		case "title": {
+			const result = convertHeading(descriptor, textColor);
+			block = result.block;
+			if (result.note) {
+				notes = [result.note];
+				isApproximation = true;
+			}
 			break;
+		}
 		case "image": {
-			const result = convertImage(descriptor, context.columnWidth);
+			const result = convertImage(descriptor, context.columnWidth, context.paddingReturn);
 			block = result.block;
 			notes = result.notes;
 			isApproximation = notes.length > 0;
 			break;
 		}
-		case "button":
-			block = convertButton(descriptor);
+		case "button": {
+			const result = convertButton(descriptor);
+			block = result.block;
+			notes = result.notes;
+			isApproximation = notes.length > 0;
 			break;
+		}
 		case "divider": {
 			const height = undrawnDividerHeight(descriptor);
 			if (height !== void 0) {
@@ -1184,7 +3086,7 @@ function convertModuleBase(module, warnings, context = {}) {
 				notes = [`The divider draws no line; imported as a ${height}px spacer.`];
 				break;
 			}
-			const result = convertDivider(descriptor, context.columnWidth);
+			const result = convertDivider(descriptor, context.columnWidth, context.paddingReturn);
 			block = result.block;
 			notes = result.notes;
 			isApproximation = notes.length > 0;
@@ -1194,7 +3096,7 @@ function convertModuleBase(module, warnings, context = {}) {
 			block = convertSpacer(descriptor);
 			break;
 		case "icons": {
-			const result = convertIcons(descriptor, context.columnWidth, warnings);
+			const result = convertIcons(descriptor, context.columnWidth, context.paddingReturn, warnings);
 			if (result.rebuilt) return {
 				block: result.block,
 				entry: {
@@ -1210,9 +3112,14 @@ function convertModuleBase(module, warnings, context = {}) {
 		case "html":
 			block = convertHtml(descriptor);
 			break;
-		case "social":
-			block = convertSocial(descriptor, warnings);
+		case "social": {
+			const result = convertSocial(descriptor, warnings);
+			block = result.block;
+			extras = result.extras;
+			notes = result.notes;
+			isApproximation = notes.length > 0;
 			break;
+		}
 		case "video":
 			block = convertVideo(descriptor);
 			break;
@@ -1242,6 +3149,7 @@ function convertModuleBase(module, warnings, context = {}) {
 	}
 	return {
 		block,
+		...extras.length > 0 ? { extras } : {},
 		entry: {
 			beeFreeModuleType: module.type,
 			templaticalBlockType: block.type,
@@ -1303,7 +3211,7 @@ function convertModule(module, warnings, context = {}) {
 			}
 			values.items.forEach((item, index) => {
 				for (const key of Object.keys(item ?? {}).filter((key) => key !== "text")) warn(warnings, `Dropped language "${locale}" key "${key}": no language mapping for this format.`);
-				if (typeof item?.text === "string") text(block, locale, `items.${block.items[index].id}.text`, block.items[index].text, item.text);
+				if (typeof item?.text === "string") text(block, locale, `items.${block.items[index].id}.text`, block.items[index].text, decodeEntitiesInTokens(item.text));
 			});
 		} else if (key && typeof values[field] === "string") {
 			const translated = convertModuleBase({
@@ -1325,20 +3233,85 @@ function convertModule(module, warnings, context = {}) {
 }
 // src/converter.ts
 /**
+* A column's share of BeeFree's 12-column grid. An omitted value counts as 6,
+* half the grid, which is what a 2-column row uses when neither side states one.
+*/
+function columnUnits(column) {
+	const value = column["grid-columns"];
+	return typeof value === "number" && Number.isFinite(value) ? value : 6;
+}
+function gridLabel(columns) {
+	return columns.map(columnUnits).join("-");
+}
+function columnsEqual(columns) {
+	const first = columnUnits(columns[0]);
+	return columns.every((column) => columnUnits(column) === first);
+}
+/**
+* Thousandths of the left column's share. 8/12 and 2/3 both land on 667 and
+* 7/12 lands on 583, so an exact layout and a near one stay apart.
+*/
+function ratioMilli(left, total) {
+	return Math.round(left / total * 1e3);
+}
+function isExactLayout(layout, left, total) {
+	const milli = ratioMilli(left, total);
+	if (layout === "2") return milli === 500;
+	if (layout === "2-1") return milli === 667;
+	return milli === 333;
+}
+function noteSnappedRatio(columns, layout, warnings) {
+	warnings.push(`Column ratio ${gridLabel(columns)} was mapped to the nearest layout "${layout}".`);
+}
+/**
+* Nearest two-column layout, in the same thousandths as `isExactLayout`.
+* `2` is listed first, so an equal distance stays on the even split. 7/12
+* rounds to 583: 83 from even, 84 from 2/3, so the narrower share is not
+* squeezed to a third.
+*/
+function nearestTwoColumn(left, total) {
+	const milli = ratioMilli(left, total);
+	const choices = [
+		["2", 500],
+		["2-1", 667],
+		["1-2", 333]
+	];
+	let best = "2";
+	let bestDistance = Math.abs(milli - 500);
+	for (const [layout, target] of choices) {
+		const distance = Math.abs(milli - target);
+		if (distance < bestDistance) {
+			best = layout;
+			bestDistance = distance;
+		}
+	}
+	return best;
+}
+/**
 * Determines the Templatical ColumnLayout from BeeFree column grid values.
+* A split that is not exactly `2`, `1-2`, `2-1` or an even `3` keeps the
+* nearest of those and records one warning naming the source ratio. Four or
+* more columns flatten to one column, with that ratio in the same warning.
 */
 function resolveColumnLayout(columns, warnings) {
 	if (columns.length === 1) return null;
-	if (columns.length === 3) return "3";
+	if (columns.length === 3) {
+		if (!columnsEqual(columns)) noteSnappedRatio(columns, "3", warnings);
+		return "3";
+	}
 	if (columns.length === 2) {
-		const left = columns[0]["grid-columns"] ?? 6;
-		const ratio = left / (left + (columns[1]["grid-columns"] ?? 6));
-		if (ratio > .58) return "2-1";
-		if (ratio < .42) return "1-2";
-		return "2";
+		const left = columnUnits(columns[0]);
+		const total = left + columnUnits(columns[1]);
+		if (total <= 0) {
+			noteSnappedRatio(columns, "2", warnings);
+			return "2";
+		}
+		const layout = nearestTwoColumn(left, total);
+		if (!isExactLayout(layout, left, total)) noteSnappedRatio(columns, layout, warnings);
+		return layout;
 	}
 	if (columns.length >= 4) {
-		warnings.push(`Row with ${columns.length} columns was flattened to a single column. BeeFree supports arbitrary columns, but Templatical supports up to 3.`);
+		warnings.push(`Row with ${columns.length} columns (${gridLabel(columns)}) was flattened to a single column. BeeFree supports arbitrary columns, but Templatical supports up to 3.`);
 		return null;
 	}
 	return "2";
@@ -1371,8 +3344,9 @@ function convertColumnModules(column, context, entries, warnings) {
 			entries.push(skipped);
 			continue;
 		}
-		const { block, entry } = convertModule(module, warnings, context);
+		const { block, entry, extras } = convertModule(module, warnings, context);
 		blocks.push(block);
+		if (extras?.length) blocks.push(...extras);
 		entries.push(entry);
 	}
 	return blocks;
@@ -1388,6 +3362,8 @@ function convertColumnModules(column, context, entries, warnings) {
 function resolveRowBackgroundImage(row, rowBg, width, warnings) {
 	const content = readBeefreeBackgroundImage(row.content?.style, "Row", width);
 	const band = readBeefreeBackgroundImage(row.container?.style, "Row container", width);
+	if (content) content.image.url = decodeEntitiesInTokens(content.image.url);
+	if (band) band.image.url = decodeEntitiesInTokens(band.image.url);
 	if (content) {
 		warnings.push(...content.notes);
 		if (band) warnings.push(`Row container background image "${band.image.url}" outside the content width was dropped; the section keeps the content background image.`);
@@ -1401,6 +3377,242 @@ function resolveRowBackgroundImage(row, rowBg, width, warnings) {
 	warnings.push(...band.notes, `Row container background image "${band.image.url}" spans the full width in BeeFree; the section paints it at the content width.`);
 	return band.image;
 }
+function zeroPadding() {
+	return {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	};
+}
+function addPadding(base, extra) {
+	return {
+		top: base.top + extra.top,
+		right: base.right + extra.right,
+		bottom: base.bottom + extra.bottom,
+		left: base.left + extra.left
+	};
+}
+function hasPadding(padding) {
+	return padding.top !== 0 || padding.right !== 0 || padding.bottom !== 0 || padding.left !== 0;
+}
+const BORDER_SIDES$1 = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function toBorderStyle(value) {
+	if (value === "dashed" || value === "dotted" || value === "solid") return value;
+	return "solid";
+}
+/**
+* A column background that paints. Fully transparent is unset, the same way
+* a border that paints nothing is.
+*/
+function columnBackgroundColor(style) {
+	const raw = style?.["background-color"];
+	if (isTransparentColor(raw)) return "";
+	return parseColor(raw);
+}
+/**
+* A column or row style's border as a section border. A side that paints
+* nothing has width 0. `undefined` when no side is drawn.
+*/
+function columnBorder(style) {
+	if (!style) return void 0;
+	let drawn = false;
+	const border = {};
+	for (const side of BORDER_SIDES$1) {
+		const raw = style[`border-${side}`];
+		const parsed = raw ? parseBorderTop(raw) : void 0;
+		const paints = parsed !== void 0 && parsed.drawn && parsed.width > 0;
+		if (paints) drawn = true;
+		border[side] = {
+			width: paints ? parsed.width : 0,
+			style: toBorderStyle(parsed?.style),
+			color: parsed?.color || "#000000"
+		};
+	}
+	return drawn ? border : void 0;
+}
+function isFlag(value) {
+	return value === true || value === "true";
+}
+function rowVisibility(row) {
+	const computed = row.content?.computedStyle;
+	const hideMobile = isFlag(computed?.hideContentOnMobile);
+	const hideDesktop = isFlag(computed?.hideContentOnDesktop);
+	if (!hideMobile && !hideDesktop) return void 0;
+	return {
+		desktop: !hideDesktop,
+		mobile: !hideMobile
+	};
+}
+function rowOptsOutOfStack(row) {
+	const value = row.content?.computedStyle?.rowColStackOnMobile;
+	return value === false || value === "false";
+}
+function sameBorder(a, b) {
+	return BORDER_SIDES$1.every((side) => a[side].width === b[side].width && a[side].style === b[side].style && a[side].color === b[side].color);
+}
+const ROW_BORDER_DROPPED = "Row border was dropped; the column border is kept on the section.";
+const ROW_STACK_DROPPED = "rowColStackOnMobile false was dropped; Templatical keeps columns side by side only on a 2- or 3-column section.";
+/**
+* Row chrome the section can hold. The container colour is the band outside
+* the content box (`wrapper`); the section fill stays the content colour the
+* caller already chose. A band the same colour as that fill adds nothing. A
+* column border already chosen for the section wins over the row border.
+*/
+function rowFrame(row, sectionBackground, columnBorderValue, applyStack, warnings) {
+	const visibility = rowVisibility(row);
+	const band = parseColor(row.container?.style?.["background-color"]);
+	const wrapper = band && band !== sectionBackground ? { backgroundColor: band } : void 0;
+	let border = columnBorderValue;
+	const rowBorder = columnBorder(row.content?.style);
+	if (rowBorder) {
+		if (!border) border = rowBorder;
+		else if (!sameBorder(border, rowBorder)) warnings.push(ROW_BORDER_DROPPED);
+	}
+	let stackOnMobile;
+	if (rowOptsOutOfStack(row)) {
+		if (applyStack) stackOnMobile = false;
+		else warnings.push(ROW_STACK_DROPPED);
+	}
+	return {
+		...visibility ? { visibility } : {},
+		...stackOnMobile === false ? { stackOnMobile } : {},
+		...wrapper ? { wrapper } : {},
+		...border ? { border } : {}
+	};
+}
+function frameNeedsSection(frame) {
+	return frame.visibility !== void 0 || frame.wrapper !== void 0 || frame.border !== void 0;
+}
+/**
+* `content.style.width` is the content box. A section has no width of its
+* own, so a value other than the email width is reported and left.
+*/
+function warnIfContentWidthDiffers(row, emailWidth, warnings) {
+	const raw = row.content?.style?.width;
+	if (typeof raw !== "string" || raw.trim() === "") return;
+	const px = parsePxValue(raw);
+	if (px > 0 && px === emailWidth) return;
+	const shown = px > 0 ? `${px}px` : `"${raw.trim()}"`;
+	warnings.push(`Row content width ${shown} differs from the email width ${emailWidth}px. A section has no width of its own, so the row keeps the email width.`);
+}
+const COLUMN_BOX_DROPPED = "Column background/border was dropped; a multi-column row has no per-column box.";
+/**
+* The percentages the renderer emits for a multi-column section
+* (`getWidthPercentages`). 33.33% of 600 is 199; the last column is 33.34%.
+*/
+const COLUMN_CONTENT_PERCENTS = {
+	"2": ["50%", "50%"],
+	"3": [
+		"33.33%",
+		"33.33%",
+		"33.34%"
+	],
+	"1-2": ["33.33%", "66.67%"],
+	"2-1": ["66.67%", "33.33%"]
+};
+function drawnSide(side) {
+	return toBorderCss(side) === null ? 0 : Math.trunc(side.width);
+}
+/**
+* BeeFree's grid share of the section box, in whole pixels. The same floor
+* the renderer uses, so an exact layout and this share differ only where
+* the percentage rounding does.
+*/
+function columnShareWidths(columns, box) {
+	const units = columns.map(columnUnits);
+	const total = units.reduce((sum, share) => sum + share, 0);
+	if (total <= 0) {
+		const each = Math.floor(box / Math.max(columns.length, 1));
+		return columns.map(() => each);
+	}
+	return units.map((share) => Math.floor(box * share / total));
+}
+/** True when `layout` is not the source ratio, so a column may be narrower. */
+function layoutSnaps(columns, layout) {
+	if (layout === "3") return !columnsEqual(columns);
+	const total = columns.reduce((sum, column) => sum + columnUnits(column), 0);
+	return !isExactLayout(layout, columnUnits(columns[0]), total);
+}
+/**
+* A snapped column is narrower than its grid share. The missing pixels come
+* back from the padding that faces the next column, and the outer edge stays.
+* Nothing is taken past 0, and a wider column is left alone. Image, lone-icon
+* and divider widths are measured with this padding already returned.
+*/
+function giveBackInnerPadding(blocks, deficit, sides) {
+	if (deficit <= 0) return;
+	for (const block of blocks) {
+		const padding = block.styles.padding;
+		let remaining = deficit;
+		for (const side of sides) {
+			if (remaining <= 0) break;
+			const have = padding[side];
+			if (have <= 0) continue;
+			const give = Math.min(remaining, have);
+			padding[side] = have - give;
+			remaining -= give;
+		}
+	}
+}
+/**
+* Whole pixels MJML gives each column's content. A multi-column section
+* imported here has no padding of its own; a row border still shrinks the box.
+*/
+function renderedColumnContentWidths(layout, bodyWidth, border) {
+	const sectionBox = Math.floor(bodyWidth) - drawnSide(border?.left) - drawnSide(border?.right);
+	return COLUMN_CONTENT_PERCENTS[layout].map((width) => Math.floor(sectionBox * parseFloat(width) / 100));
+}
+/**
+* True when the renderer would emit `fluid-on-mobile` on its own: `"full"`,
+* or a pixel width at or above the room inside the image's side padding and
+* border.
+*/
+function imageFillsColumn(block, columnContentWidth) {
+	const padding = block.styles.padding;
+	const room = Math.floor(columnContentWidth) - Math.trunc(padding.left) - Math.trunc(padding.right) - drawnSide(block.border?.left) - drawnSide(block.border?.right);
+	return block.width === "full" || block.width >= room;
+}
+/**
+* BeeFree does not widen an image on a phone when the image sits in a column
+* narrower than the email. Pin those that fill their column, which is when
+* the renderer would stretch them. A full-width row stays on the automatic
+* rule.
+*/
+function keepColumnImagesAtDesktopWidth(blocks, columnContentWidth) {
+	for (const block of blocks) {
+		if (!isImage(block) || block.fluidOnMobile !== void 0) continue;
+		if (imageFillsColumn(block, columnContentWidth)) block.fluidOnMobile = false;
+	}
+}
+/** One warning per row when a column's background or border has nowhere to go. */
+function warnIfColumnBoxDropped(columns, warnings) {
+	if (columns.some((column) => {
+		const style = column.style;
+		return columnBackgroundColor(style) !== "" || columnBorder(style) !== void 0;
+	})) warnings.push(COLUMN_BOX_DROPPED);
+}
+/**
+* Column padding has no per-column box. Left and right sit on every module,
+* top on the first and bottom on the last, so the stack keeps the column's
+* inset.
+*/
+function foldColumnPadding(blocks, padding) {
+	if (blocks.length === 0 || !hasPadding(padding)) return;
+	const last = blocks.length - 1;
+	blocks.forEach((block, index) => {
+		const own = block.styles.padding;
+		own.left += padding.left;
+		own.right += padding.right;
+		if (index === 0) own.top += padding.top;
+		if (index === last) own.bottom += padding.bottom;
+	});
+}
 /**
 * Processes a single BeeFree row into one or more Templatical blocks.
 */
@@ -1409,50 +3621,93 @@ function processRow(row, settings, entries, warnings) {
 	if (!columns || columns.length === 0) return [];
 	if (row.locked) warnings.push("A locked row was imported. Lock metadata was dropped; content is preserved.");
 	if (row.synced) warnings.push("A synced row was imported. Sync metadata was dropped; content is preserved.");
+	warnIfContentWidthDiffers(row, settings.width, warnings);
 	const layout = resolveColumnLayout(columns, warnings);
 	const rowBg = parseColor(row.content?.style?.["background-color"]);
 	const backgroundImage = resolveRowBackgroundImage(row, rowBg, settings.width, warnings);
-	if (!layout) {
-		const blocks = [];
+	if (layout === null || layout === "1") {
 		const context = {
 			columnWidth: settings.width,
 			textColor: settings.textColor
 		};
-		for (const column of columns) blocks.push(...convertColumnModules(column, context, entries, warnings));
-		if (rowBg || backgroundImage) return [createSectionBlock({
+		if (columns.length === 1) {
+			const column = columns[0];
+			const blocks = convertColumnModules(column, context, entries, warnings);
+			const padding = addPadding(zeroPadding(), extractPadding(column.style));
+			const backgroundColor = columnBackgroundColor(column.style) || rowBg;
+			const frame = rowFrame(row, backgroundColor, columnBorder(column.style), false, warnings);
+			if (backgroundColor || backgroundImage || hasPadding(padding) || frameNeedsSection(frame)) return [createSectionBlock({
+				columns: "1",
+				children: [blocks],
+				styles: {
+					padding,
+					...backgroundColor ? { backgroundColor } : {}
+				},
+				...backgroundImage ? { backgroundImage } : {},
+				...frame
+			})];
+			return blocks;
+		}
+		const blocks = [];
+		for (const column of columns) {
+			const converted = convertColumnModules(column, context, entries, warnings);
+			foldColumnPadding(converted, extractPadding(column.style));
+			blocks.push(...converted);
+		}
+		warnIfColumnBoxDropped(columns, warnings);
+		const frame = rowFrame(row, rowBg, void 0, false, warnings);
+		if (rowBg || backgroundImage || frameNeedsSection(frame)) return [createSectionBlock({
 			columns: "1",
 			children: [blocks],
 			styles: {
-				padding: {
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 0
-				},
+				padding: zeroPadding(),
 				...rowBg ? { backgroundColor: rowBg } : {}
 			},
-			...backgroundImage ? { backgroundImage } : {}
+			...backgroundImage ? { backgroundImage } : {},
+			...frame
 		})];
 		return blocks;
 	}
 	const widths = columnPixels(layout, settings.width);
-	const children = columns.map((col, index) => convertColumnModules(col, {
-		columnWidth: widths[index],
-		textColor: settings.textColor
-	}, entries, warnings));
+	const frame = rowFrame(row, rowBg, void 0, true, warnings);
+	const contentWidths = renderedColumnContentWidths(layout, settings.width, frame.border);
+	const sectionBox = Math.floor(settings.width) - drawnSide(frame.border?.left) - drawnSide(frame.border?.right);
+	const sourceWidths = layoutSnaps(columns, layout) ? columnShareWidths(columns, sectionBox) : null;
+	const facing = (index) => {
+		const last = columns.length - 1;
+		if (index === 0) return ["right"];
+		if (index === last) return ["left"];
+		return ["right", "left"];
+	};
+	const children = columns.map((col, index) => {
+		const deficit = sourceWidths ? sourceWidths[index] - (contentWidths[index] ?? 0) : 0;
+		const columnPadding = extractPadding(col.style);
+		const blocks = convertColumnModules(col, {
+			columnWidth: widths[index],
+			textColor: settings.textColor,
+			...sourceWidths ? { paddingReturn: {
+				deficit: Math.max(0, deficit),
+				sides: facing(index),
+				columnPadding
+			} } : {}
+		}, entries, warnings);
+		foldColumnPadding(blocks, columnPadding);
+		return blocks;
+	});
+	warnIfColumnBoxDropped(columns, warnings);
+	children.forEach((column, index) => {
+		if (sourceWidths) giveBackInnerPadding(column, sourceWidths[index] - (contentWidths[index] ?? 0), facing(index));
+		keepColumnImagesAtDesktopWidth(column, contentWidths[index] ?? 0);
+	});
 	return [createSectionBlock({
 		columns: layout,
 		children,
 		styles: {
-			padding: {
-				top: 0,
-				right: 0,
-				bottom: 0,
-				left: 0
-			},
+			padding: zeroPadding(),
 			...rowBg ? { backgroundColor: rowBg } : {}
 		},
-		...backgroundImage ? { backgroundImage } : {}
+		...backgroundImage ? { backgroundImage } : {},
+		...frame
 	})];
 }
 /**
@@ -1503,17 +3758,17 @@ function convertBeeFreeTemplate(template, options = {}) {
 	const entries = [];
 	const warnings = [];
 	const blocks = [];
-	const webFonts = template.page.body?.webFonts;
-	if (webFonts && webFonts.length > 1) warnings.push(`Template uses ${webFonts.length} web fonts. Only the primary font is preserved; additional fonts may need to be configured via the fonts option.`);
+	const customFonts = collectCustomFonts(template.page.body?.webFonts);
+	warnForMissingFontUrls(template, customFonts, warnings);
 	const settings = extractSettings(template);
 	const declared = template.page.body?.language?.value ?? template.page.language?.value ?? template.language?.value;
 	settings.locale = (declared ? localeTag(declared, warnings) : null) ?? defaultLocaleOption(options.defaultLocale, warnings) ?? "en";
 	const meta = template.head?.meta;
-	if (typeof meta?.preheader === "string") settings.preheaderText = meta.preheader;
+	if (typeof meta?.preheader === "string") settings.preheaderText = decodeEntitiesInTokens(meta.preheader);
 	for (const [code, values] of Object.entries(meta?.translations ?? {})) {
 		const locale = localeTag(code, warnings);
 		if (!locale) continue;
-		for (const key of Object.keys(values)) if (key === "preheader" && typeof values.preheader === "string") text(settings, locale, "preheaderText", settings.preheaderText, values.preheader);
+		for (const key of Object.keys(values)) if (key === "preheader" && typeof values.preheader === "string") text(settings, locale, "preheaderText", settings.preheaderText, decodeEntitiesInTokens(values.preheader));
 		else warn(warnings, `Dropped language "${locale}" metadata "${key}": ${[
 			"subject",
 			"title",
@@ -1542,8 +3797,93 @@ function convertBeeFreeTemplate(template, options = {}) {
 				htmlFallback: entries.filter((e) => e.status === "html-fallback").length,
 				skipped: entries.filter((e) => e.status === "skipped").length
 			}
+		},
+		customFonts
+	};
+}
+/**
+* Families BeeFree ships as system stacks, beyond the built-in web-safe set.
+* They show up as the face itself or as a fallback (`Helvetica Neue`,
+* `Lucida Grande`) and have nothing to download.
+*/
+const WEB_SAFE_FONTS = /* @__PURE__ */ new Set([
+	...Object.keys(BUILT_IN_FONT_STACKS),
+	"helvetica neue",
+	"lucida grande",
+	"lucida sans unicode",
+	"lucida sans",
+	"geneva",
+	"times",
+	"courier",
+	"segoe",
+	"segoe ui",
+	"baskerville"
+]);
+/** The first real family in a `font-family` value. `""` for inherit or a generic. */
+function declaredFontName(value) {
+	if (!value) return "";
+	return parseFontFamilies(value).find((family) => !isGenericFontFamily(family))?.name ?? "";
+}
+function isWebSafeFont(name) {
+	return WEB_SAFE_FONTS.has(name.toLowerCase());
+}
+/**
+* `webFonts` entries a host can load. The name is the first family of
+* `fontFamily` (what the template's CSS names), then `name`. A duplicate
+* name keeps the first URL. A system face, `inherit`, or a blank URL is
+* skipped.
+*/
+function collectCustomFonts(webFonts) {
+	const fonts = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const font of webFonts ?? []) {
+		const url = typeof font.url === "string" ? font.url.trim() : "";
+		if (!url) continue;
+		const name = declaredFontName(font.fontFamily) || declaredFontName(font.name);
+		if (!name || isWebSafeFont(name)) continue;
+		const key = name.toLowerCase();
+		if (seen.has(key)) continue;
+		seen.add(key);
+		fonts.push({
+			name,
+			url
+		});
+	}
+	return fonts;
+}
+/** `font-family` values on the body and in modules, not the `webFonts` list. */
+function collectUsedFontValues(template) {
+	const found = [];
+	const take = (value) => {
+		if (typeof value === "string") {
+			for (const match of value.matchAll(/font-family\s*:\s*((?:[^;}"]|"[^"]*")+)/gi)) found.push(match[1].trim());
+			return;
+		}
+		if (!value || typeof value !== "object") return;
+		if (Array.isArray(value)) {
+			for (const item of value) take(item);
+			return;
+		}
+		for (const [key, child] of Object.entries(value)) {
+			if (key === "webFonts") continue;
+			if (key === "font-family" && typeof child === "string") found.push(child);
+			else take(child);
 		}
 	};
+	take(template.page.body?.content);
+	take(template.page.rows);
+	return found;
+}
+function warnForMissingFontUrls(template, customFonts, warnings) {
+	const loaded = new Set(customFonts.map((font) => font.name.toLowerCase()));
+	for (const value of collectUsedFontValues(template)) {
+		const name = declaredFontName(value);
+		if (!name || isWebSafeFont(name)) continue;
+		const key = name.toLowerCase();
+		if (loaded.has(key)) continue;
+		loaded.add(key);
+		warn(warnings, `Font "${name}" is used but BeeFree provides no URL for it.`);
+	}
 }
 export { convertBeeFreeTemplate };