@templatical/import-stripo 0.46.0 → 0.48.0

package/dist/index.js

@@ -62,10 +62,15 @@ const SIDE_LETTER = {
 	b: "bottom",
 	l: "left"
 };
+/**
+* A `style` attribute as a key/value map. A semicolon inside quotes or
+* parentheses — `url("a;b")`, `url(data:image/png;base64,…)` — belongs to
+* its value.
+*/
 function parseStyleAttribute(styleAttr) {
 	const result = {};
 	if (!styleAttr) return result;
-	for (const decl of styleAttr.split(";")) {
+	for (const decl of splitTopLevel(styleAttr, ";")) {
 		const idx = decl.indexOf(":");
 		if (idx === -1) continue;
 		const key = decl.slice(0, idx).trim().toLowerCase();
@@ -74,6 +79,35 @@ function parseStyleAttribute(styleAttr) {
 	}
 	return result;
 }
+/**
+* Split `value` at each `separator` that sits outside quotes and parentheses.
+* A value whose quote or parenthesis never closes is split at every
+* `separator` instead, so a malformed declaration costs only itself and the
+* ones after it still read.
+*/
+function splitTopLevel(value, separator) {
+	const parts = [];
+	let depth = 0;
+	let quote = "";
+	let start = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (quote) {
+			if (char === quote) quote = "";
+			continue;
+		}
+		if (char === "\"" || char === "'") quote = char;
+		else if (char === "(") depth++;
+		else if (char === ")") depth = Math.max(0, depth - 1);
+		else if (char === separator && depth === 0) {
+			parts.push(value.slice(start, i));
+			start = i + 1;
+		}
+	}
+	if (quote || depth > 0) return value.split(separator);
+	parts.push(value.slice(start));
+	return parts;
+}
 function channelHex(value) {
 	return Math.max(0, Math.min(255, Math.round(value))).toString(16).padStart(2, "0");
 }
@@ -99,11 +133,6 @@ function colorFromPaint(styleAttr, bgcolor) {
 	const fromShorthand = styles.background ? parseColor(styles.background.trim().split(/\s+/)[0]) : "";
 	return parseColor(styles["background-color"]) || fromShorthand || parseColor(bgcolor) || "";
 }
-function hasBackgroundImage(styleAttr) {
-	if (!styleAttr) return false;
-	const styles = parseStyleAttribute(styleAttr);
-	return /url\s*\(/i.test(styles["background-image"] ?? "") || /url\s*\(/i.test(styles.background ?? "");
-}
 function parsePaddingShorthand(value) {
 	if (!value) return { ...ZERO$3 };
 	const values = value.trim().split(/\s+/).filter(Boolean).map((part) => parsePxValue(part));
@@ -302,6 +331,433 @@ function visibleLineBorder(styles) {
 	}
 	return null;
 }
+const X_GRID = [
+	"left",
+	"center",
+	"right"
+];
+const Y_GRID = [
+	"top",
+	"center",
+	"bottom"
+];
+const PERCENT = /^(-?(?:\d+(?:\.\d+)?|\.\d+))%$/;
+const LENGTH = /^-?(?:\d+(?:\.\d+)?|\.\d+)[a-z]*$/;
+/**
+* `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")
+	};
+}
+/** CSS's initial values: what a browser paints for a longhand the source leaves out. */
+const CSS_BACKGROUND_DEFAULTS = {
+	size: "auto",
+	x: "left",
+	y: "top",
+	repeat: true
+};
+const IMAGE_FUNCTION = /^(?:url|[a-z-]*gradient|image-set)\(/;
+const REPEAT_TOKENS = /* @__PURE__ */ new Set([
+	"repeat",
+	"no-repeat",
+	"repeat-x",
+	"repeat-y",
+	"round",
+	"space"
+]);
+const POSITION_TOKENS = /* @__PURE__ */ new Set([
+	"left",
+	"right",
+	"top",
+	"bottom",
+	"center"
+]);
+const NON_COLOR_TOKENS = /* @__PURE__ */ new Set([
+	"none",
+	"scroll",
+	"fixed",
+	"local",
+	"border-box",
+	"padding-box",
+	"content-box",
+	"text",
+	"cover",
+	"contain",
+	"auto"
+]);
+const MEASURE = /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:%|[a-z]+)?$/i;
+/**
+* The URL inside the first CSS `url(…)`, unquoted and trimmed; "" when there
+* is none or it is malformed. A forward scan rather than a regex, so a long
+* run of unclosed `url(` can't make it backtrack.
+*/
+function cssUrl(value) {
+	const text = value ?? "";
+	const start = text.search(/url\(/i);
+	if (start === -1) return "";
+	let i = start + 4;
+	while (i < text.length && /\s/.test(text[i])) i++;
+	const quote = text[i];
+	if (quote === "\"" || quote === "'") {
+		const close = text.indexOf(quote, i + 1);
+		if (close === -1) return "";
+		let j = close + 1;
+		while (j < text.length && /\s/.test(text[j])) j++;
+		return text[j] === ")" ? text.slice(i + 1, close).trim() : "";
+	}
+	const close = text.indexOf(")", i);
+	if (close === -1) return "";
+	const inner = text.slice(i, close);
+	return /["']/.test(inner) ? "" : inner.trim();
+}
+/**
+* Whitespace-separated tokens, keeping a function's arguments together and
+* making the `/` between position and size a token of its own.
+*/
+function cssTokens(value) {
+	const tokens = [];
+	let depth = 0;
+	let quote = "";
+	let current = "";
+	const push = () => {
+		if (current) tokens.push(current);
+		current = "";
+	};
+	for (const char of value) {
+		if (quote) {
+			current += char;
+			if (char === quote) quote = "";
+			continue;
+		}
+		if (char === "\"" || char === "'") {
+			quote = char;
+			current += char;
+			continue;
+		}
+		if (char === "(") depth++;
+		if (char === ")") depth = Math.max(0, depth - 1);
+		if (depth === 0 && /\s/.test(char)) {
+			push();
+			continue;
+		}
+		if (depth === 0 && char === "/") {
+			push();
+			tokens.push("/");
+			continue;
+		}
+		current += char;
+	}
+	push();
+	return tokens;
+}
+function isColorToken(token) {
+	const lower = token.toLowerCase();
+	if (lower === "/" || IMAGE_FUNCTION.test(lower)) return false;
+	return !REPEAT_TOKENS.has(lower) && !POSITION_TOKENS.has(lower) && !NON_COLOR_TOKENS.has(lower) && !MEASURE.test(lower);
+}
+/**
+* The parts of a `background` shorthand. The colour comes from the last
+* layer, the only one CSS lets carry it; the image and its size, position
+* and repeat come from the first layer with a `url()`.
+*/
+function parseBackgroundShorthand(value) {
+	const layers = splitTopLevel(value, ",").map((layer) => layer.trim()).filter(Boolean);
+	const color = cssTokens(layers[layers.length - 1] ?? "").find(isColorToken) ?? "";
+	const imageLayer = layers.find((layer) => cssUrl(layer) !== "");
+	if (!imageLayer) return {
+		color,
+		url: "",
+		size: "",
+		position: "",
+		repeat: "",
+		layers: layers.length
+	};
+	const tokens = cssTokens(imageLayer);
+	const slash = tokens.indexOf("/");
+	const before = slash === -1 ? tokens : tokens.slice(0, slash);
+	const after = slash === -1 ? [] : tokens.slice(slash + 1);
+	const size = [];
+	for (const token of after) {
+		const lower = token.toLowerCase();
+		const isSize = lower === "cover" || lower === "contain" || lower === "auto" || MEASURE.test(lower);
+		if (size.length === 2 || !isSize) break;
+		size.push(token);
+	}
+	const rest = [...before, ...after.slice(size.length)];
+	return {
+		color,
+		url: cssUrl(imageLayer),
+		size: size.join(" "),
+		position: before.filter((token) => POSITION_TOKENS.has(token.toLowerCase()) || MEASURE.test(token)).join(" "),
+		repeat: rest.filter((token) => REPEAT_TOKENS.has(token.toLowerCase())).join(" "),
+		layers: layers.length
+	};
+}
+/**
+* A background image from a URL and its longhands. A longhand left out takes
+* CSS's initial value; a value with no exact keyword takes the nearest one
+* and adds a note naming it. `null` for a blank URL.
+*/
+function buildBackgroundImage(url, longhands, label, boxWidth) {
+	const trimmedUrl = url.trim();
+	if (!trimmedUrl) return null;
+	const notes = [];
+	const lossy = (name, raw, shown) => {
+		notes.push(`${label} ${name} "${raw}" has no exact Templatical equivalent; imported as "${shown}".`);
+	};
+	let size = CSS_BACKGROUND_DEFAULTS.size;
+	const rawSize = longhands.size?.trim();
+	if (rawSize) {
+		const parsed = backgroundSizeKeyword(rawSize, boxWidth);
+		size = parsed.size;
+		if (!parsed.exact) lossy("background-size", rawSize, size);
+	}
+	let x = CSS_BACKGROUND_DEFAULTS.x;
+	let y = CSS_BACKGROUND_DEFAULTS.y;
+	let lossyX = false;
+	let lossyY = false;
+	const rawPosition = longhands.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 = longhands.positionX?.trim();
+	const overrideX = rawX ? backgroundAxisPoint(rawX.toLowerCase(), X_GRID) : null;
+	if (overrideX) {
+		x = overrideX.point;
+		lossyX = false;
+	}
+	const rawY = longhands.positionY?.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 = CSS_BACKGROUND_DEFAULTS.repeat;
+	const rawRepeat = longhands.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: trimmedUrl,
+			size,
+			position: {
+				x,
+				y
+			},
+			repeat
+		},
+		notes
+	};
+}
+/**
+* A background image from CSS declarations: `background-image`, else the
+* `background` shorthand's image, with the size, position and repeat
+* longhands winning over the shorthand's. A style map keeps no declaration
+* order, so a longhand is taken to follow the shorthand, as it usually does.
+* Of several layers the first image is kept, and a note says so. `null`
+* when the declarations paint no image.
+*/
+function readCssBackground(styles, label, boxWidth) {
+	const shorthand = styles.background !== void 0 ? parseBackgroundShorthand(styles.background) : null;
+	const imageLayers = styles["background-image"] !== void 0 ? splitTopLevel(styles["background-image"], ",").map((layer) => layer.trim()) : null;
+	const index = imageLayers ? imageLayers.findIndex((layer) => cssUrl(layer) !== "") : -1;
+	const url = imageLayers ? index === -1 ? "" : cssUrl(imageLayers[index]) : shorthand?.url ?? "";
+	if (!url) return null;
+	const layer = (value) => {
+		if (value === void 0) return void 0;
+		const parts = splitTopLevel(value, ",").map((part) => part.trim());
+		return parts[Math.max(index, 0)] ?? parts[0];
+	};
+	const read = buildBackgroundImage(url, {
+		size: layer(styles["background-size"]) ?? shorthand?.size,
+		position: layer(styles["background-position"]) ?? shorthand?.position,
+		positionX: styles["background-position-x"],
+		positionY: styles["background-position-y"],
+		repeat: layer(styles["background-repeat"]) ?? shorthand?.repeat
+	}, label, boxWidth);
+	const layers = imageLayers?.length ?? shorthand?.layers ?? 1;
+	if (read && layers > 1) read.notes.unshift(`${label} background has ${layers} layers; only the image "${url}" was imported.`);
+	return read;
+}
+/**
+* The image an element paints: its inline CSS background, else its legacy
+* `background` attribute. A `background-image` or `background` declaration
+* overrides the attribute; a `background-color` doesn't. The image twin of
+* `colorFromPaint`.
+*/
+function imageFromPaint(styleAttr, backgroundAttr, label, boxWidth) {
+	const styles = parseStyleAttribute(styleAttr);
+	if (styles["background-image"] !== void 0 || styles.background !== void 0) return readCssBackground(styles, label, boxWidth);
+	return buildBackgroundImage(backgroundAttr ?? "", {}, label, boxWidth);
+}
+function sameImage(a, b) {
+	return a.url === b.url && a.size === b.size && a.repeat === b.repeat && a.position.x === b.position.x && a.position.y === b.position.y;
+}
+function droppedColumnsNote(columns) {
+	return columns.length === 1 ? `The background image on column ${columns[0]} was dropped. A Templatical section has one background image.` : `Background images on columns ${columns.join(", ")} were dropped. A Templatical section has one background image.`;
+}
+/**
+* The image a section paints, nearest first: the structure's own, then the
+* body's, then the containers', moved up when there is one or all share the
+* same image, then the stripe's while the body leaves it showing. An image
+* that showed in the section but can't be kept is named in a note. A body
+* image beneath the structure's own is covered in this section, so it isn't
+* named; it still paints the stripe's other sections. The image is a copy,
+* so sections that share a source don't share an object.
+*/
+function resolveSectionImage(layers) {
+	const notes = [];
+	let picked = layers.structure ?? layers.body;
+	const withImage = layers.columns.flatMap((read, index) => read ? [index + 1] : []);
+	const first = layers.columns[0] ?? null;
+	const shared = first !== null && layers.columns.every((read) => read !== null && sameImage(read.image, first.image));
+	if (withImage.length > 0) {
+		if (!picked && shared) picked = {
+			read: first,
+			source: null
+		};
+		else notes.push(droppedColumnsNote(withImage));
+	}
+	if (layers.band) {
+		if (!picked && !layers.bodyPainted) {
+			picked = layers.band;
+			notes.push("The stripe's background image spans the full width in Stripo; the section paints it at the content width.");
+		} else notes.push("The stripe's background image outside the content width was dropped.");
+	}
+	if (!picked) return {
+		image: void 0,
+		notes,
+		source: null
+	};
+	return {
+		image: {
+			...picked.read.image,
+			position: { ...picked.read.image.position }
+		},
+		notes: [...picked.read.notes, ...notes],
+		source: picked.source
+	};
+}
+/**
+* The paint, minus a band colour that would become the section's wrapper
+* colour, when the section has a background image. The wrapper has no
+* padding, so the colour shows nowhere except Outlook desktop, which paints
+* it over the section's image.
+*/
+function withoutBandOverImage(paint, hasImage) {
+	if (!hasImage || !paint.wrapperColor) return paint;
+	return {
+		backgroundColor: paint.backgroundColor,
+		notes: [`The band colour ${paint.wrapperColor} was dropped: Outlook desktop paints a wrapper colour over the section's background image.`]
+	};
+}
 //#endregion
 //#region src/fragment.ts
 /** Paint after `createSectionBlock` so `styles` keeps its required padding. */
@@ -319,10 +775,15 @@ function fragmentDocument(inner, css) {
 	const safe = css ? css.replace(/<\/style/gi, "<\\/style") : "";
 	return `<!DOCTYPE html><html>${safe ? `<head><style>${safe}</style></head>` : ""}<body>${inner}</body></html>`;
 }
+/** The start of the HTML importer's page-image warning. */
+const PAGE_IMAGE_WARNING = "The email background image ";
 /**
 * Run the generic HTML importer on a subtree and keep its blocks.
 * Section entries belong to the row the HTML importer invented; Stripo's own
-* section entries are recorded by the caller.
+* section entries are recorded by the caller. A fragment's `<body>` is
+* synthetic, so the page-image warning the HTML importer raises for a `body`
+* background in the caller's CSS is dropped; Stripo reports the page image
+* once, from `es-wrapper`.
 */
 function blocksFromHtml(inner, ctx) {
 	const result = convertHtmlTemplate(fragmentDocument(inner, ctx.css));
@@ -330,16 +791,66 @@ function blocksFromHtml(inner, ctx) {
 		if (entry.templaticalBlockType === "section") continue;
 		ctx.entries.push(entry);
 	}
-	ctx.warnings.push(...result.report.warnings);
+	ctx.warnings.push(...result.report.warnings.filter((warning) => !warning.startsWith(PAGE_IMAGE_WARNING)));
 	return flattenBlocks(result.content.blocks);
 }
 function pushEntry(ctx, sourceTag, templaticalBlockType, status, note) {
-	ctx.entries.push({
+	const entry = {
 		sourceTag,
 		templaticalBlockType,
 		status,
 		...note ? { note } : {}
-	});
+	};
+	ctx.entries.push(entry);
+	return entry;
+}
+/** Record that a section's entry took the image `source` paints. */
+function recordImageSpan(ctx, source, entry) {
+	if (!source) return;
+	ctx.imageSpans ??= /* @__PURE__ */ new Map();
+	const spanned = ctx.imageSpans.get(source) ?? [];
+	spanned.push(entry);
+	ctx.imageSpans.set(source, spanned);
+}
+/** Note on each entry whose section shares its image with another section. */
+function noteImageSpans(ctx) {
+	for (const spanned of ctx.imageSpans?.values() ?? []) {
+		if (spanned.length < 2) continue;
+		const note = `A background image behind ${spanned.length} sections was applied to each of them — Templatical has no multi-section band.`;
+		for (const entry of spanned) {
+			entry.status = "approximated";
+			entry.note = entry.note ? `${entry.note} ${note}` : note;
+		}
+	}
+}
+/** The image an element paints: its inline CSS background, else its `background` attribute. */
+function imageOf($el, label, boxWidth) {
+	return imageFromPaint($el.attr("style"), $el.attr("background"), label, boxWidth);
+}
+/** An element's image with that element as its source; `null` when there is no element or it paints none. */
+function imageLayer($el, label, boxWidth) {
+	if (!$el) return null;
+	const read = imageOf($el, label, boxWidth);
+	return read ? {
+		read,
+		source: $el[0]
+	} : null;
+}
+/**
+* The stripe's image: on the stripe, else on `$cell`, the cell Stripo paints
+* instead of a table stripe, as the band colour is read. A `td` / `th` stripe
+* is its own paint. The stripe names the image either way, since it is the
+* element that spans the sections.
+*/
+function bandImage($stripe, $cell, boxWidth) {
+	const own = imageLayer($stripe, "Stripe", boxWidth);
+	if (own) return own;
+	if ($stripe.is("td") || $stripe.is("th")) return null;
+	const cell = $cell.length > 0 ? imageOf($cell, "Stripe", boxWidth) : null;
+	return cell ? {
+		read: cell,
+		source: $stripe[0]
+	} : null;
 }
 //#endregion
 //#region src/platform.ts
@@ -621,7 +1132,6 @@ const STRIPE_TOKENS = [
 const BODY_SELECTOR$1 = "[class~='es-header-body'], [class~='es-content-body'], [class~='es-footer-body']";
 const BETWEEN_NOTE = "Content between columns was placed after them.";
 const SEAM_NOTE = "This row's padding was split across more than one section.";
-const IMAGE_NOTE$1 = "A background image was not imported.";
 function paintOf($el) {
 	return colorFromPaint($el.attr("style"), $el.attr("bgcolor"));
 }
@@ -656,8 +1166,12 @@ function bandColor$1($stripe) {
 	const $cell = directCell($stripe);
 	return $cell.length > 0 ? paintOf($cell) : "";
 }
-function imageNote$1(...styles) {
-	return styles.some((style) => hasBackgroundImage(style)) ? IMAGE_NOTE$1 : void 0;
+/** A column's image: on its `es-left` / `es-right` table, else on that table's cell. */
+function columnImage($column, boxWidth) {
+	const own = imageOf($column, "Column", boxWidth);
+	if (own) return own;
+	const $cell = directCell($column);
+	return $cell.length > 0 ? imageOf($cell, "Column", boxWidth) : null;
 }
 function hasPadding(padding) {
 	return padding.top !== 0 || padding.right !== 0 || padding.bottom !== 0 || padding.left !== 0;
@@ -871,17 +1385,19 @@ function groupsFromPieces(pieces) {
 	});
 	return groups;
 }
-function sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth) {
+function sectionsFromRow($row, $, ctx, token, paint, images, bodyWidth) {
 	if (isHidden($row)) return [];
 	const pieces = [];
 	let padding = { ...ZERO$1 };
 	let sawCell = false;
+	let $structure = null;
 	$row.children("td, th").each((_, cell) => {
 		const $cell = $(cell);
 		if (isHidden($cell)) return;
 		if (!sawCell) {
 			padding = readBoxPadding($cell.attr("class"), $cell.attr("style"));
 			sawCell = true;
+			$structure = $cell;
 		}
 		pieces.push(...collectPieces($cell, $));
 	});
@@ -889,12 +1405,14 @@ function sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth) {
 	const rendered = [];
 	for (const group of groupsFromPieces(pieces)) {
 		if (group.mode === "columns") {
-			const built = columnChildren(group.pieces.flatMap((piece) => piece.kind === "column" ? [piece.el] : []), $, ctx, bodyWidth, padding);
+			const cols = group.pieces.flatMap((piece) => piece.kind === "column" ? [piece.el] : []);
+			const built = columnChildren(cols, $, ctx, bodyWidth, padding);
 			if (!built) continue;
 			rendered.push({
 				children: built.children,
 				layout: built.layout,
-				extra: built.flattenNote
+				extra: built.flattenNote,
+				columnImages: cols.map((el) => columnImage($(el), bodyWidth))
 			});
 			continue;
 		}
@@ -903,25 +1421,37 @@ function sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth) {
 		rendered.push({
 			children: [blocks],
 			layout: "1",
-			extra: group.extra
+			extra: group.extra,
+			columnImages: []
 		});
 	}
 	if (rendered.length === 0) return [];
 	const seam = rendered.length > 1 && hasPadding(padding) ? SEAM_NOTE : void 0;
+	const structure = imageLayer($structure, "Section", bodyWidth);
 	return rendered.map((group, index) => {
+		const image = resolveSectionImage({
+			structure,
+			body: images.body,
+			band: images.band,
+			columns: group.columnImages,
+			bodyPainted: images.bodyPainted
+		});
+		const groupPaint = withoutBandOverImage(paint, image.image !== void 0);
 		const notes = [
-			...paint.notes,
+			...groupPaint.notes,
 			group.extra,
-			image,
+			...image.notes,
 			seam
 		].filter((note) => Boolean(note));
-		pushEntry(ctx, token, "section", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+		const entry = pushEntry(ctx, token, "section", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+		recordImageSpan(ctx, image.source, entry);
 		return withBackground(createSectionBlock({
 			columns: group.layout,
 			children: group.children,
 			styles: { padding: splitPadding(padding, rendered.length, index) },
-			...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
-		}), paint.backgroundColor);
+			...groupPaint.wrapperColor ? { wrapper: { backgroundColor: groupPaint.wrapperColor } } : {},
+			...image.image ? { backgroundImage: image.image } : {}
+		}), groupPaint.backgroundColor);
 	});
 }
 function sectionsFromStripe($stripe, $, ctx) {
@@ -929,12 +1459,16 @@ function sectionsFromStripe($stripe, $, ctx) {
 	const token = stripeToken($stripe) ?? "es-content";
 	const $body = $stripe.find(BODY_SELECTOR$1).first();
 	const rows = $body.length > 0 ? directRows($body, $) : directRows($stripe, $);
-	const paint = resolveSectionPaint(ctx.pageBackground ?? "#ffffff", bandColor$1($stripe), $body.length > 0 ? paintOf($body) : "");
-	const image = imageNote$1($stripe.attr("style"), directCell($stripe).attr("style"), $body.attr("style"));
 	const $width = $body.length > 0 ? $body : $stripe;
 	const bodyWidth = emailBodyWidth($width.attr("width"), $width.attr("style"));
+	const paint = resolveSectionPaint(ctx.pageBackground ?? "#ffffff", bandColor$1($stripe), $body.length > 0 ? paintOf($body) : "");
+	const images = {
+		body: imageLayer($body, "Section", bodyWidth),
+		band: bandImage($stripe, directCell($stripe), bodyWidth),
+		bodyPainted: $body.length > 0 && paintOf($body) !== ""
+	};
 	const out = [];
-	for (const $row of rows) out.push(...sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth));
+	for (const $row of rows) out.push(...sectionsFromRow($row, $, ctx, token, paint, images, bodyWidth));
 	return out;
 }
 function convertCompiled(html, ctx) {
@@ -1038,7 +1572,6 @@ const ZERO = {
 	left: 0
 };
 const BODY_SELECTOR = "[class~='es-header-body'], [class~='es-content-body'], [class~='es-footer-body']";
-const IMAGE_NOTE = "A background image was not imported.";
 function columnLayout(count, ctx) {
 	if (count <= 1) return { layout: "1" };
 	if (count === 2) return { layout: "2" };
@@ -1091,13 +1624,17 @@ function enclosing($el, selector) {
 	const $parent = $el.parents(selector).first();
 	return $parent.length > 0 ? $parent : null;
 }
+/** A table stripe's first cell, which Stripo paints instead of the table. */
+function bandCell($stripe) {
+	const $direct = $stripe.children("tr").children("td, th");
+	const $nested = $stripe.children("tbody, thead").children("tr").children("td, th");
+	return ($direct.length > 0 ? $direct : $nested).first();
+}
 function bandColor($stripe) {
 	const own = colorFromPaint($stripe.attr("style"), $stripe.attr("bgcolor"));
 	if (own) return own;
 	if ($stripe.is("td") || $stripe.is("th")) return "";
-	const $direct = $stripe.children("tr").children("td, th");
-	const $nested = $stripe.children("tbody, thead").children("tr").children("td, th");
-	const $cell = ($direct.length > 0 ? $direct : $nested).first();
+	const $cell = bandCell($stripe);
 	return $cell.length > 0 ? colorFromPaint($cell.attr("style"), $cell.attr("bgcolor")) : "";
 }
 function paintFor($el, ctx) {
@@ -1105,9 +1642,6 @@ function paintFor($el, ctx) {
 	const $body = enclosing($el, BODY_SELECTOR);
 	return resolveSectionPaint(ctx.pageBackground ?? "#ffffff", $stripe ? bandColor($stripe) : "", $body ? colorFromPaint($body.attr("style"), $body.attr("bgcolor")) : "");
 }
-function imageNote(...styles) {
-	return styles.some((style) => hasBackgroundImage(style)) ? IMAGE_NOTE : void 0;
-}
 function sectionFromStructure($structure, $, ctx) {
 	const frames = $structure.find("[class~='esd-container-frame']").toArray().map((n) => $(n)).filter(($el) => {
 		if (isHidden($el)) return false;
@@ -1119,7 +1653,8 @@ function sectionFromStructure($structure, $, ctx) {
 	const { layout, flattenNote } = columnLayout(frameCount === 0 ? 1 : frameCount, ctx);
 	const padding = readBoxPadding($structure.attr("class"), $structure.attr("style"));
 	const $body = enclosing($structure, BODY_SELECTOR);
-	const rooms = columnRooms(emailBodyWidth($body?.attr("width"), $body?.attr("style")), layout, padding, layout === "1" ? 1 : Math.min(frameCount, 3));
+	const bodyWidth = emailBodyWidth($body?.attr("width"), $body?.attr("style"));
+	const rooms = columnRooms(bodyWidth, layout, padding, layout === "1" ? 1 : Math.min(frameCount, 3));
 	let children;
 	if (layout === "1") {
 		const merged = [];
@@ -1128,20 +1663,33 @@ function sectionFromStructure($structure, $, ctx) {
 		else for (const $f of frames) merged.push(...blocksInContainer($f, $, ctx, room));
 		children = [merged];
 	} else children = frames.map(($f, index) => blocksInContainer($f, $, ctx, rooms[index]));
-	const paint = paintFor($structure, ctx);
 	const $stripe = enclosing($structure, "[class~='esd-stripe']");
+	const image = resolveSectionImage({
+		structure: imageLayer($structure, "Section", bodyWidth),
+		body: imageLayer($body, "Section", bodyWidth),
+		band: $stripe ? bandImage($stripe, bandCell($stripe), bodyWidth) : null,
+		columns: frames.map(($f) => imageOf($f, "Column", bodyWidth)),
+		bodyPainted: $body ? colorFromPaint($body.attr("style"), $body.attr("bgcolor")) !== "" : false
+	});
+	const paint = withoutBandOverImage(paintFor($structure, ctx), image.image !== void 0);
 	const notes = [
 		...paint.notes,
 		flattenNote,
-		imageNote($stripe?.attr("style"), $body?.attr("style"))
+		...image.notes
 	].filter((note) => Boolean(note));
-	if (notes.length > 0) pushEntry(ctx, "esd-structure", "section", "approximated", notes.join(" "));
-	else if (frameCount <= 3) pushEntry(ctx, "esd-structure", "section", "converted");
+	if (notes.length > 0) {
+		const entry = pushEntry(ctx, "esd-structure", "section", "approximated", notes.join(" "));
+		recordImageSpan(ctx, image.source, entry);
+	} else if (frameCount <= 3) {
+		const entry = pushEntry(ctx, "esd-structure", "section", "converted");
+		recordImageSpan(ctx, image.source, entry);
+	}
 	return withBackground(createSectionBlock({
 		columns: layout,
 		children,
 		styles: { padding },
-		...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
+		...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {},
+		...image.image ? { backgroundImage: image.image } : {}
 	}), paint.backgroundColor);
 }
 function convertEditor(html, ctx) {
@@ -1153,14 +1701,23 @@ function convertEditor(html, ctx) {
 	return stripes.map(($stripe) => {
 		const inner = $stripe.find("[class~='esd-structure']");
 		if (inner.length > 0) return sectionFromStructure(inner.first(), $, ctx);
-		const paint = paintFor($stripe, ctx);
-		const notes = [...paint.notes, imageNote($stripe.attr("style"))].filter((note) => Boolean(note));
-		pushEntry(ctx, "esd-stripe", "section", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+		const image = resolveSectionImage({
+			structure: null,
+			body: null,
+			band: bandImage($stripe, bandCell($stripe), 600),
+			columns: [],
+			bodyPainted: false
+		});
+		const paint = withoutBandOverImage(paintFor($stripe, ctx), image.image !== void 0);
+		const notes = [...paint.notes, ...image.notes].filter((note) => Boolean(note));
+		const entry = pushEntry(ctx, "esd-stripe", "section", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+		recordImageSpan(ctx, image.source, entry);
 		return withBackground(createSectionBlock({
 			columns: "1",
 			children: [blocksInContainer($stripe, $, ctx, columnRooms(600, "1", ZERO, 1)[0])],
 			styles: { padding: { ...ZERO } },
-			...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
+			...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {},
+			...image.image ? { backgroundImage: image.image } : {}
 		}), paint.backgroundColor);
 	});
 }
@@ -1185,6 +1742,16 @@ function pageBackground($) {
 	}
 	return "#ffffff";
 }
+/** The page's background image, which has no Templatical equivalent: the first `es-wrapper-color` / `es-wrapper` that paints one. */
+function pageImageWarning($) {
+	const nodes = $("[class~='es-wrapper-color'], [class~='es-wrapper']").toArray();
+	for (const node of nodes) {
+		const $el = $(node);
+		const read = imageFromPaint($el.attr("style"), $el.attr("background"), "Page", void 0);
+		if (read) return `The email background image "${read.image.url}" was dropped; Templatical has no email-level background image.`;
+	}
+	return null;
+}
 function summarize(ctx) {
 	const summary = {
 		total: ctx.entries.length,
@@ -1230,9 +1797,13 @@ function convertStripoTemplate(html, options) {
 		warnings: [],
 		css: options?.css
 	};
-	const pageBg = pageBackground(load(prepared));
+	const $page = load(prepared);
+	const pageBg = pageBackground($page);
+	const pageImage = pageImageWarning($page);
+	if (pageImage) ctx.warnings.push(pageImage);
 	ctx.pageBackground = pageBg;
 	const blocks = kind === "editor" ? convertEditor(prepared, ctx) : convertCompiled(prepared, ctx);
+	noteImageSpans(ctx);
 	const defaults = createDefaultTemplateContent();
 	return {
 		content: {