@templatical/import-mjml 0.45.0 → 0.47.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { load } from "cheerio";
-import { DEFAULT_TEMPLATE_DEFAULTS, RICH_TEXT_SPACING, SOCIAL_ICON_STYLES, SOCIAL_ICON_TONES, SYNTAX_PRESETS, createButtonBlock, createDefaultTemplateContent, createDividerBlock, createHtmlBlock, createImageBlock, createMenuBlock, createParagraphBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, createTableBlock, createTitleBlock, generateId, resolveContentDirection } from "@templatical/types";
+import { BORDER_SIDES, DEFAULT_TEMPLATE_DEFAULTS, RICH_TEXT_SPACING, SOCIAL_ICON_STYLES, SOCIAL_ICON_TONES, SYNTAX_PRESETS, canonicalFontStack, createButtonBlock, createDefaultTemplateContent, createDividerBlock, createHtmlBlock, createImageBlock, createMenuBlock, createParagraphBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, createTableBlock, createTitleBlock, generateId, resolveContentDirection } from "@templatical/types";
 import { isTag, isText } from "domhandler";
 //#region src/attribute-resolver.ts
 /**
@@ -321,13 +321,6 @@ function parsePaddingShorthand(value) {
 	}
 }
 /**
-* Strips quotes and returns the first font in a font-family stack.
-*/
-function parseFontFamily(value) {
-	if (!value) return "";
-	return value.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
-}
-/**
 * Parses an alignment to one of the three the block model accepts.
 */
 function parseAlignment(value, fallback = "left") {
@@ -361,6 +354,114 @@ function parseDefinitePx(value) {
 	const match = value.trim().match(/^(-?\d+(?:\.\d+)?)\s*(?:px)?$/);
 	return match ? parseFloat(match[1]) : null;
 }
+const PX_LENGTH = /^(\d+(?:\.\d+)?)(?:px)?$/i;
+/**
+* Reads a `border-radius` value: one px length, or the two- to four-value
+* shorthand (top-left, top-right, bottom-right, bottom-left), expanded the way
+* CSS expands it. Four matching corners come back as one number, the form the
+* renderer writes them in. `null` when any part is not a non-negative px
+* length (`50%`, `1em`, an elliptical `8px / 4px`), which CSS either reads
+* against the box or discards.
+*/
+function parseBorderRadius(value) {
+	const parts = value.trim().split(/\s+/);
+	if (parts.length > 4) return null;
+	const px = [];
+	for (const part of parts) {
+		const match = PX_LENGTH.exec(part);
+		if (!match) return null;
+		px.push(Math.round(parseFloat(match[1])));
+	}
+	const [topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight] = px;
+	if (topRight === topLeft && bottomRight === topLeft && bottomLeft === topLeft) return topLeft;
+	return {
+		topLeft,
+		topRight,
+		bottomRight,
+		bottomLeft
+	};
+}
+const DRAWN_STYLES = /* @__PURE__ */ new Set([
+	"solid",
+	"dashed",
+	"dotted"
+]);
+const NARROWED_STYLES = /* @__PURE__ */ new Set([
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+]);
+const UNDRAWN_STYLES = /* @__PURE__ */ new Set(["none", "hidden"]);
+/**
+* Splits a CSS value on whitespace outside parentheses, so `rgb(0, 0, 0)` stays
+* one token. A linear scan rather than a regex, which would backtrack on a long
+* run of spaces.
+*/
+function splitCssTokens(value) {
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	for (const ch of value) {
+		if (ch === "(") depth++;
+		if (ch === ")") depth = Math.max(0, depth - 1);
+		if (depth === 0 && /\s/.test(ch)) {
+			if (current) tokens.push(current);
+			current = "";
+			continue;
+		}
+		current += ch;
+	}
+	if (current) tokens.push(current);
+	return tokens;
+}
+/**
+* Reads one CSS `border` declaration, its width, style and colour in any
+* order, as a `BorderSideValue`.
+*
+* `side` is `null` when CSS draws nothing: style `none` or `hidden`, no style
+* at all (CSS's initial style is `none`), or a `0` width. A style the block
+* model lacks narrows to solid and is named in `narrowedFrom`. A missing or
+* unknown colour is `""`, which the renderer writes back as no colour, so CSS
+* draws `currentColor` both times.
+*
+* Returns `null` for a drawn border it cannot hold: a width that is not px
+* (`2em`, `thin`), no width at all (CSS draws `medium`), or a value with two
+* of any part.
+*/
+function parseBorderDeclaration(value) {
+	let width;
+	let style;
+	let color;
+	for (const token of splitCssTokens(value.trim())) {
+		const lower = token.toLowerCase();
+		const px = PX_LENGTH.exec(lower);
+		const isStyle = DRAWN_STYLES.has(lower) || NARROWED_STYLES.has(lower) || UNDRAWN_STYLES.has(lower);
+		if (px) {
+			if (width !== void 0) return null;
+			width = Math.round(parseFloat(px[1]));
+		} else if (isStyle) {
+			if (style !== void 0) return null;
+			style = lower;
+		} else if (/^[-+.\d]/.test(lower) || /^(thin|medium|thick)$/.test(lower)) return null;
+		else {
+			if (color !== void 0) return null;
+			color = token;
+		}
+	}
+	if (style === void 0 || UNDRAWN_STYLES.has(style) || width === 0) return { side: null };
+	if (width === void 0) return null;
+	const side = {
+		width,
+		style: NARROWED_STYLES.has(style) ? "solid" : style,
+		color: parseColor(color)
+	};
+	return NARROWED_STYLES.has(style) ? {
+		side,
+		narrowedFrom: style
+	} : { side };
+}
 /**
 * Narrows a border style to the three `DividerBlock.lineStyle` accepts.
 */
@@ -369,6 +470,197 @@ function parseBorderStyle(value) {
 	if (v === "dashed" || v === "dotted") return v;
 	return "solid";
 }
+const X_GRID = [
+	"left",
+	"center",
+	"right"
+];
+const Y_GRID = [
+	"top",
+	"center",
+	"bottom"
+];
+const PERCENT = /^(-?(?:\d+(?:\.\d+)?|\.\d+))%$/;
+const LENGTH = /^-?(?:\d+(?:\.\d+)?|\.\d+)[a-z]*$/;
+/** What MJML paints for a `background-*` attribute an `mj-section` / `mj-wrapper` leaves out. */
+const MJML_BACKGROUND_DEFAULTS = {
+	size: "auto",
+	x: "center",
+	y: "top",
+	repeat: true
+};
+/**
+* `background-size` as a keyword. A size with a side at 100%, or a px width
+* spanning the box, fills it as `cover` does; any other length or percentage
+* draws the image at a size of its own, which `auto` is closest to.
+*/
+function backgroundSizeKeyword(raw, boxWidth) {
+	const parts = raw.toLowerCase().split(/\s+/);
+	const [first] = parts;
+	if (parts.length === 1 && (first === "cover" || first === "contain")) return {
+		size: first,
+		exact: true
+	};
+	if (parts.every((part) => part === "auto")) return {
+		size: "auto",
+		exact: true
+	};
+	const px = /^(\d+(?:\.\d+)?|\.\d+)px$/.exec(first);
+	return {
+		size: parts.includes("100%") || px !== null && boxWidth !== void 0 && Number(px[1]) >= boxWidth ? "cover" : "auto",
+		exact: false
+	};
+}
+/**
+* `background-position` split into x and y the way MJML and CSS read it: a
+* lone `top` / `bottom` names y and centres x, any other lone value is x
+* with y centred, and a pair is x then y unless it leads with `top` /
+* `bottom` (or with `center` before `left` / `right`). Three- and four-value
+* edge offsets keep their edge keywords only.
+*/
+function splitBackgroundPosition(raw) {
+	const parts = raw.toLowerCase().split(/\s+/);
+	if (parts.length === 1) {
+		const [only] = parts;
+		return only === "top" || only === "bottom" ? {
+			x: "center",
+			y: only,
+			exact: true
+		} : {
+			x: only,
+			y: "center",
+			exact: true
+		};
+	}
+	if (parts.length === 2) {
+		const [a, b] = parts;
+		return a === "top" || a === "bottom" || a === "center" && (b === "left" || b === "right") ? {
+			x: b,
+			y: a,
+			exact: true
+		} : {
+			x: a,
+			y: b,
+			exact: true
+		};
+	}
+	return {
+		x: parts.find((part) => part === "left" || part === "right") ?? "center",
+		y: parts.find((part) => part === "top" || part === "bottom") ?? "center",
+		exact: false
+	};
+}
+/**
+* One axis as a grid point: its keyword; the point nearest a percentage,
+* ties going to the centre; or the start edge for a length, which is an
+* offset from it. `null` when the token is unreadable.
+*/
+function backgroundAxisPoint(token, grid) {
+	const keyword = grid.find((point) => point === token);
+	if (keyword) return {
+		point: keyword,
+		exact: true
+	};
+	const percent = PERCENT.exec(token);
+	if (percent) {
+		const n = Number(percent[1]);
+		return {
+			point: n < 25 ? grid[0] : n > 75 ? grid[2] : grid[1],
+			exact: n === 0 || n === 50 || n === 100
+		};
+	}
+	if (LENGTH.test(token)) return {
+		point: grid[0],
+		exact: parseFloat(token) === 0
+	};
+	return null;
+}
+/**
+* `background-repeat`: unrepeated only when every axis is `no-repeat`.
+* Anything but plain `repeat` tiles too, inexactly.
+*/
+function backgroundRepeatFlag(raw) {
+	const parts = raw.toLowerCase().split(/\s+/);
+	if (parts.every((part) => part === "no-repeat")) return {
+		repeat: false,
+		exact: true
+	};
+	return {
+		repeat: true,
+		exact: parts.every((part) => part === "repeat")
+	};
+}
+/**
+* An `mj-section` / `mj-wrapper` background image, `null` when
+* `background-url` is absent or blank. `read` returns an attribute's
+* resolved value. Unset attributes take MJML's own defaults, so the import
+* paints what MJML painted; a value with no exact keyword takes the nearest
+* one and adds a note naming it. `label` names the element in each note, and
+* a px `background-size` is measured against `boxWidth`.
+*/
+function readMjmlBackgroundImage(read, label, boxWidth) {
+	const url = (read("background-url") ?? "").trim();
+	if (!url) return null;
+	const notes = [];
+	const lossy = (name, raw, shown) => {
+		notes.push(`${label} ${name} "${raw}" has no exact Templatical equivalent; imported as "${shown}".`);
+	};
+	let size = MJML_BACKGROUND_DEFAULTS.size;
+	const rawSize = read("background-size")?.trim();
+	if (rawSize) {
+		const parsed = backgroundSizeKeyword(rawSize, boxWidth);
+		size = parsed.size;
+		if (!parsed.exact) lossy("background-size", rawSize, size);
+	}
+	let x = MJML_BACKGROUND_DEFAULTS.x;
+	let y = MJML_BACKGROUND_DEFAULTS.y;
+	let lossyX = false;
+	let lossyY = false;
+	const rawPosition = read("background-position")?.trim();
+	if (rawPosition) {
+		const split = splitBackgroundPosition(rawPosition);
+		const readX = backgroundAxisPoint(split.x, X_GRID);
+		const readY = backgroundAxisPoint(split.y, Y_GRID);
+		x = readX?.point ?? x;
+		y = readY?.point ?? y;
+		lossyX = !split.exact || !readX?.exact;
+		lossyY = !split.exact || !readY?.exact;
+	}
+	const rawX = read("background-position-x")?.trim();
+	const overrideX = rawX ? backgroundAxisPoint(rawX.toLowerCase(), X_GRID) : null;
+	if (overrideX) {
+		x = overrideX.point;
+		lossyX = false;
+	}
+	const rawY = read("background-position-y")?.trim();
+	const overrideY = rawY ? backgroundAxisPoint(rawY.toLowerCase(), Y_GRID) : null;
+	if (overrideY) {
+		y = overrideY.point;
+		lossyY = false;
+	}
+	if (rawPosition && (lossyX || lossyY)) lossy("background-position", rawPosition, `${x} ${y}`);
+	if (rawX && !overrideX?.exact) lossy("background-position-x", rawX, x);
+	if (rawY && !overrideY?.exact) lossy("background-position-y", rawY, y);
+	let repeat = MJML_BACKGROUND_DEFAULTS.repeat;
+	const rawRepeat = read("background-repeat")?.trim();
+	if (rawRepeat) {
+		const parsed = backgroundRepeatFlag(rawRepeat);
+		repeat = parsed.repeat;
+		if (!parsed.exact) lossy("background-repeat", rawRepeat, repeat ? "repeat" : "no-repeat");
+	}
+	return {
+		image: {
+			url,
+			size,
+			position: {
+				x,
+				y
+			},
+			repeat
+		},
+		notes
+	};
+}
 //#endregion
 //#region src/block-base.ts
 /**
@@ -399,6 +691,65 @@ function baseFields(attrs, placement = "container") {
 		...visibility ? { visibility } : {}
 	};
 }
+/**
+* `border-radius` as a `BorderRadiusValue`, `undefined` when the attribute is
+* absent. A value with no px reading is square corners, `0`, and pushes a
+* note: `label` names the element in it.
+*/
+function readBorderRadius(attrs, label, notes) {
+	const raw = attrs["border-radius"];
+	if (raw === void 0) return void 0;
+	const radius = parseBorderRadius(raw);
+	if (radius === null) {
+		notes.push(`${label} border-radius "${raw.trim()}" could not be read; imported as square corners.`);
+		return 0;
+	}
+	return radius;
+}
+/**
+* What the editor's border control holds for a side with no width
+* (`BorderControl.vue`), so a border drawn on some sides reads back the way
+* the editor would have stored it.
+*/
+const UNDRAWN_SIDE = {
+	width: 0,
+	style: "solid",
+	color: "#000000"
+};
+/**
+* `border` and `border-<side>` as a `BorderValue`, `undefined` when no side is
+* drawn. A side takes its own `border-<side>` over `border`, since MJML writes
+* the side after the shorthand. A declaration that a side actually uses pushes
+* a note when its style narrows to solid or it cannot be read, in which case
+* that side is left undrawn.
+*/
+function readBorder(attrs, label, notes) {
+	const read = /* @__PURE__ */ new Map();
+	const sides = {};
+	for (const side of BORDER_SIDES) {
+		const name = attrs[`border-${side}`] !== void 0 ? `border-${side}` : attrs.border !== void 0 ? "border" : null;
+		if (name === null) {
+			sides[side] = null;
+			continue;
+		}
+		if (!read.has(name)) {
+			const raw = attrs[name].trim();
+			const parsed = parseBorderDeclaration(raw);
+			if (parsed === null) notes.push(`${label} ${name} "${raw}" could not be read; imported without it.`);
+			else if (parsed.narrowedFrom) notes.push(`${label} ${name} "${raw}" uses style ${parsed.narrowedFrom}; imported as solid.`);
+			read.set(name, parsed?.side ?? null);
+		}
+		const parsed = read.get(name);
+		sides[side] = parsed && { ...parsed };
+	}
+	if (BORDER_SIDES.every((side) => sides[side] === null)) return void 0;
+	return {
+		top: sides.top ?? { ...UNDRAWN_SIDE },
+		right: sides.right ?? { ...UNDRAWN_SIDE },
+		bottom: sides.bottom ?? { ...UNDRAWN_SIDE },
+		left: sides.left ?? { ...UNDRAWN_SIDE }
+	};
+}
 function warnForeignClasses(attrs, tag, ctx) {
 	for (const name of readForeignCssClasses(attrs)) ctx.warnings.push(`Dropped CSS class "${name}" on <${tag}> — consumer CSS has no Templatical equivalent.`);
 }
@@ -609,7 +960,7 @@ function convertNavbar($el, attrs, ctx) {
 		};
 	});
 	const fontSize = parsePxValue(attrs["font-size"]);
-	const fontFamily = parseFontFamily(ownAttr(attrs, "font-family", "mj-navbar", ctx.cascade));
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-navbar", ctx.cascade));
 	return {
 		block: createMenuBlock({
 			items,
@@ -639,7 +990,7 @@ function convertNativeTable($el, attrs, ctx) {
 	const hasHeaderRow = $(rowEls[0]).children().toArray().some((cell) => tagOf(cell) === "th");
 	const color = parseColor(ownAttr(attrs, "color", "mj-table", ctx.cascade));
 	const fontSize = parsePxValue(attrs["font-size"]);
-	const fontFamily = parseFontFamily(ownAttr(attrs, "font-family", "mj-table", ctx.cascade));
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-table", ctx.cascade));
 	return {
 		block: createTableBlock({
 			rows,
@@ -694,7 +1045,7 @@ function convertTitle(html, attrs, sourceLevel, cascade) {
 	const $heading = parseInner(html)("body").children().first();
 	const level = Math.min(sourceLevel, 4);
 	const color = parseColor(ownAttr(attrs, "color", "mj-text", cascade));
-	const fontFamily = parseFontFamily(ownAttr(attrs, "font-family", "mj-text", cascade));
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-text", cascade));
 	const block = createTitleBlock({
 		content: $heading.html() ?? "",
 		level,
@@ -727,7 +1078,7 @@ function convertTable(html, attrs, cascade) {
 	const hasHeaderRow = $rows.length > 0 && $inner($rows[0]).children("th").length > 0;
 	const color = parseColor(ownAttr(attrs, "color", "mj-text", cascade));
 	const fontSize = parsePxValue(attrs["font-size"]);
-	const fontFamily = parseFontFamily(ownAttr(attrs, "font-family", "mj-text", cascade));
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-text", cascade));
 	return {
 		block: createTableBlock({
 			rows,
@@ -792,7 +1143,7 @@ function convertMenu(html, attrs, cascade) {
 	const spacing = parsePxValue($separator.attr("style")?.match(/padding\s*:\s*0\s+([\d.]+px)/i)?.[1]);
 	const color = parseColor(ownAttr(attrs, "color", "mj-text", cascade));
 	const fontSize = parsePxValue(attrs["font-size"]);
-	const fontFamily = parseFontFamily(ownAttr(attrs, "font-family", "mj-text", cascade));
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-text", cascade));
 	return {
 		block: createMenuBlock({
 			items,
@@ -985,39 +1336,105 @@ function convertImage($el, attrs, ctx) {
 	const decorative = (attrs.role ?? "").trim().toLowerCase() === "presentation";
 	const pxWidth = parsePxValue(attrs.width);
 	const height = parsePxValue(attrs.height);
-	const borderRadius = parsePxValue(attrs["border-radius"]);
 	const href = (attrs.href ?? "").trim();
-	return createImageBlock({
-		src,
-		alt: decorative ? "" : attrs.alt ?? "",
-		width: pxWidth === ctx.containerWidth ? "full" : pxWidth || "full",
-		align: parseAlignment(attrs.align, "center"),
-		...height > 0 ? { height } : {},
-		...borderRadius > 0 ? { borderRadius } : {},
-		...href ? { linkUrl: href } : {},
-		...href && isNewTab(attrs) ? { linkOpenInNewTab: true } : {},
-		...decorative ? { decorative: true } : {},
-		...baseFields(attrs)
-	});
+	const notes = [];
+	const borderRadius = readBorderRadius(attrs, "Image", notes);
+	const border = readBorder(attrs, "Image", notes);
+	return {
+		block: createImageBlock({
+			src,
+			alt: decorative ? "" : attrs.alt ?? "",
+			width: pxWidth === ctx.containerWidth ? "full" : pxWidth || "full",
+			align: parseAlignment(attrs.align, "center"),
+			...height > 0 ? { height } : {},
+			...borderRadius ? { borderRadius } : {},
+			...border ? { border } : {},
+			...href ? { linkUrl: href } : {},
+			...href && isNewTab(attrs) ? { linkOpenInNewTab: true } : {},
+			...decorative ? { decorative: true } : {},
+			...baseFields(attrs)
+		}),
+		entry: {
+			sourceTag: "mj-image",
+			templaticalBlockType: "image",
+			status: notes.length > 0 ? "approximated" : "converted",
+			...notes.length > 0 ? { note: notes.join(" ") } : {}
+		}
+	};
+}
+/**
+* `mj-button`'s `width` as `ButtonBlock.width`, where no width is a button
+* that fits its label. `100%` is `"full"` and a px width stays px, as the
+* renderer writes them. Any other percentage becomes px of `fillWidth`, the
+* box MJML sizes it against, since the block holds no percentage. A width
+* with no size fits the label, which is what MJML draws for it. Anything but
+* `100%` or a positive px width pushes a note.
+*/
+function readButtonWidth(value, fillWidth, notes) {
+	const raw = (value ?? "").trim();
+	if (!raw) return void 0;
+	const match = /^(-?\d+(?:\.\d+)?)\s*(px|%)?$/i.exec(raw);
+	if (!match) {
+		notes.push(`Button width "${raw}" could not be read; imported as fit to content.`);
+		return;
+	}
+	const parsed = parseFloat(match[1]);
+	const isPercent = match[2] === "%";
+	if (isPercent && parsed >= 100) {
+		if (parsed > 100) notes.push(`Button width ${raw} was clamped to 100%.`);
+		return "full";
+	}
+	const px = Math.round(isPercent ? parsed / 100 * fillWidth : parsed);
+	if (px <= 0) {
+		notes.push(`Button width ${raw} has no usable size; imported as fit to content.`);
+		return;
+	}
+	if (isPercent) notes.push(`Button width ${raw} was imported as ${px}px, which does not scale with its column.`);
+	return px;
 }
-function convertButton($el, attrs) {
+/**
+* A percentage `width` sizes the button against its column less the column's
+* side padding and its own, the same box an `mj-divider` line spans.
+*
+* `font-family` is read only when the button sets its own: the renderer
+* writes the document font onto `mj-all`, which reaches every button.
+*/
+function convertButton($el, attrs, ctx) {
 	const text = ($el.text() ?? "").trim();
 	if (!text) return null;
 	const backgroundColor = parseColor(attrs["background-color"]);
 	const textColor = parseColor(attrs.color);
 	const fontSize = parsePxValue(attrs["font-size"]);
-	return createButtonBlock({
-		text,
-		url: (attrs.href ?? "").trim(),
-		...backgroundColor ? { backgroundColor } : {},
-		...textColor ? { textColor } : {},
-		...fontSize > 0 ? { fontSize } : {},
-		...attrs["border-radius"] !== void 0 ? { borderRadius: parsePxValue(attrs["border-radius"]) } : {},
-		...attrs["inner-padding"] !== void 0 ? { buttonPadding: parsePaddingShorthand(attrs["inner-padding"]) } : {},
-		align: parseAlignment(attrs.align, "center"),
-		...isNewTab(attrs) ? { openInNewTab: true } : {},
-		...baseFields(attrs)
-	});
+	const fontFamily = canonicalFontStack(ownAttr(attrs, "font-family", "mj-button", ctx.cascade));
+	const base = baseFields(attrs);
+	const { left, right } = base.styles.padding;
+	const notes = [];
+	const width = readButtonWidth(attrs.width, ctx.containerWidth - ctx.columnPadding - left - right, notes);
+	const borderRadius = readBorderRadius(attrs, "Button", notes);
+	const border = readBorder(attrs, "Button", notes);
+	return {
+		block: createButtonBlock({
+			text,
+			url: (attrs.href ?? "").trim(),
+			...backgroundColor ? { backgroundColor } : {},
+			...textColor ? { textColor } : {},
+			...fontSize > 0 ? { fontSize } : {},
+			...fontFamily ? { fontFamily } : {},
+			...borderRadius !== void 0 ? { borderRadius } : {},
+			...border ? { border } : {},
+			...attrs["inner-padding"] !== void 0 ? { buttonPadding: parsePaddingShorthand(attrs["inner-padding"]) } : {},
+			...width !== void 0 ? { width } : {},
+			align: parseAlignment(attrs.align, "center"),
+			...isNewTab(attrs) ? { openInNewTab: true } : {},
+			...base
+		}),
+		entry: {
+			sourceTag: "mj-button",
+			templaticalBlockType: "button",
+			status: notes.length > 0 ? "approximated" : "converted",
+			...notes.length > 0 ? { note: notes.join(" ") } : {}
+		}
+	};
 }
 /**
 * `mj-divider`'s `width` as `DividerBlock.width`. A percentage is a share of
@@ -1111,30 +1528,8 @@ function convertElement($el, ctx) {
 	if (tag === "mj-social") return convertSocial($el, attrs, ctx);
 	if (tag === "mj-navbar") return convertNavbar($el, attrs, ctx);
 	if (tag === "mj-table") return convertNativeTable($el, attrs, ctx);
-	if (tag === "mj-image") {
-		const block = convertImage($el, attrs, ctx);
-		if (!block) return null;
-		return {
-			block,
-			entry: {
-				sourceTag: tag,
-				templaticalBlockType: "image",
-				status: "converted"
-			}
-		};
-	}
-	if (tag === "mj-button") {
-		const block = convertButton($el, attrs);
-		if (!block) return null;
-		return {
-			block,
-			entry: {
-				sourceTag: tag,
-				templaticalBlockType: "button",
-				status: "converted"
-			}
-		};
-	}
+	if (tag === "mj-image") return convertImage($el, attrs, ctx);
+	if (tag === "mj-button") return convertButton($el, attrs, ctx);
 	if (tag === "mj-divider") return convertDivider(attrs, ctx);
 	if (tag === "mj-spacer") return {
 		block: convertSpacer(attrs),
@@ -1306,7 +1701,7 @@ function extractSettings($, cascade, warnings) {
 	const $root = findByTag($, "mjml").first();
 	const width = parsePxValue($body.attr("width")) || REQUIRED_TEMPLATE_DEFAULTS.width;
 	const backgroundColor = parseColor($body.attr("background-color")) || REQUIRED_TEMPLATE_DEFAULTS.backgroundColor;
-	const fontFromCascade = parseFontFamily(cascade.all["font-family"]) || parseFontFamily(cascade.byTag["mj-text"]?.["font-family"]);
+	const fontFromCascade = canonicalFontStack(cascade.all["font-family"]) || canonicalFontStack(cascade.byTag["mj-text"]?.["font-family"]);
 	const fontFromDeclaration = findByTag($, "mj-font").first().attr("name") ?? "";
 	const fontFamily = fontFromCascade || fontFromDeclaration || REQUIRED_TEMPLATE_DEFAULTS.fontFamily;
 	const textColor = parseColor(cascade.byTag["mj-text"]?.color) || REQUIRED_TEMPLATE_DEFAULTS.textColor;
@@ -1531,11 +1926,16 @@ function buildSection($el, ctx, entries, wrapper) {
 	const slots = COLUMN_COUNT[layout];
 	const pixels = columnPixels(layout, ctx.containerWidth);
 	const shown = rawWidths.map((w) => w || "auto").join(", ");
+	const notes = exact ? [] : [`Column widths ${shown} have no exact Templatical layout; resolved to "${layout}".`];
+	const borderRadius = readBorderRadius(attrs, "Section", notes);
+	const border = readBorder(attrs, "Section", notes);
+	const background = readMjmlBackgroundImage((name) => attrs[name], "Section", ctx.containerWidth);
+	if (background) notes.push(...background.notes);
 	entries.push({
 		sourceTag: "mj-section",
 		templaticalBlockType: "section",
-		status: exact ? "converted" : "approximated",
-		...exact ? {} : { note: `Column widths ${shown} have no exact Templatical layout; resolved to "${layout}".` }
+		status: notes.length > 0 ? "approximated" : "converted",
+		...notes.length > 0 ? { note: notes.join(" ") } : {}
 	});
 	const children = Array.from({ length: slots }, () => []);
 	columns.forEach(($column, index) => {
@@ -1548,24 +1948,59 @@ function buildSection($el, ctx, entries, wrapper) {
 		};
 		children[slot].push(...convertColumnChildren($column, columnCtx, entries));
 	});
-	const borderRadius = parsePxValue(attrs["border-radius"]);
 	return [createSectionBlock({
 		columns: layout,
 		children,
 		...grouped ? { stackOnMobile: false } : {},
-		...borderRadius > 0 ? { borderRadius } : {},
+		...borderRadius ? { borderRadius } : {},
+		...border ? { border } : {},
+		...background ? { backgroundImage: background.image } : {},
 		...wrapper ? { wrapper } : {},
 		...baseFields(attrs, "native")
 	})];
 }
-function readWrapper(attrs) {
+const WRAPPER_BORDER_ATTRIBUTES = [
+	"border",
+	"border-top",
+	"border-right",
+	"border-bottom",
+	"border-left"
+];
+/**
+* `SectionWrapper` has no border, so each `border` or `border-<side>` the
+* wrapper sets pushes a note instead.
+*/
+function readWrapper(attrs, notes, boxWidth) {
 	const backgroundColor = parseColor(attrs["background-color"]);
 	const padding = parsePaddingShorthand(attrs.padding);
-	const borderRadius = parsePxValue(attrs["border-radius"]);
+	const borderRadius = readBorderRadius(attrs, "Wrapper", notes);
+	const background = readMjmlBackgroundImage((name) => attrs[name], "Wrapper", boxWidth);
+	for (const name of WRAPPER_BORDER_ATTRIBUTES) {
+		const raw = attrs[name];
+		if (raw === void 0) continue;
+		notes.push(`Wrapper ${name} "${raw.trim()}" has no Templatical equivalent; dropped.`);
+	}
+	if (background) notes.push(...background.notes);
 	return {
 		...backgroundColor ? { backgroundColor } : {},
 		padding,
-		...borderRadius > 0 ? { borderRadius } : {}
+		...borderRadius ? { borderRadius } : {},
+		...background ? { backgroundImage: background.image } : {}
+	};
+}
+/**
+* Each section gets its own band object and band image, so editing one
+* section's image leaves the others alone. `padding` and `borderRadius` stay
+* shared, as in the other importers.
+*/
+function copyWrapper(wrapper) {
+	const image = wrapper.backgroundImage;
+	return {
+		...wrapper,
+		...image ? { backgroundImage: {
+			...image,
+			position: { ...image.position }
+		} } : {}
 	};
 }
 /**
@@ -1576,7 +2011,9 @@ function readWrapper(attrs) {
 * as its own section would double the nesting on every round trip.
 */
 function buildWrapper($el, ctx, entries) {
-	const wrapper = readWrapper(resolveAttributes($el, ctx.cascade));
+	const attrs = resolveAttributes($el, ctx.cascade);
+	const notes = [];
+	const wrapper = readWrapper(attrs, notes, ctx.containerWidth);
 	const sections = childElements($el, ctx.$).filter(($k) => tagOf($k[0]) === "mj-section");
 	if (sections.length === 0) {
 		entries.push({
@@ -1587,13 +2024,14 @@ function buildWrapper($el, ctx, entries) {
 		});
 		return [];
 	}
-	if (sections.length > 1) entries.push({
+	if (sections.length > 1) notes.unshift(`An <mj-wrapper> holding ${sections.length} sections was applied to each of them — Templatical has no multi-section band.`);
+	if (notes.length > 0) entries.push({
 		sourceTag: "mj-wrapper",
 		templaticalBlockType: "section",
 		status: "approximated",
-		note: `An <mj-wrapper> holding ${sections.length} sections was applied to each of them — Templatical has no multi-section band.`
+		note: notes.join(" ")
 	});
-	return sections.flatMap(($section) => buildSection($section, ctx, entries, wrapper));
+	return sections.flatMap(($section) => buildSection($section, ctx, entries, copyWrapper(wrapper)));
 }
 //#endregion
 //#region src/converter.ts