@templatical/import-stripo 0.42.1 → 0.43.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { load } from "cheerio";
 import { convertHtmlTemplate } from "@templatical/import-html";
-import { createButtonBlock, createDefaultTemplateContent, createHtmlBlock, createMenuBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, generateId } from "@templatical/types";
+import { createButtonBlock, createDefaultTemplateContent, createDividerBlock, createHtmlBlock, createMenuBlock, createSectionBlock, createSocialIconsBlock, createSpacerBlock, generateId } from "@templatical/types";
 //#region src/classes.ts
 function classTokens($el) {
 	return ($el.attr("class") ?? "").trim().split(/\s+/).filter(Boolean);
@@ -39,10 +39,29 @@ function isHidden($el) {
 }
 //#endregion
 //#region src/css.ts
-/**
-* Tiny CSS readers for paint that compiled Stripo HTML already inlines.
-* Hex (3/6) and a bare bgcolor hex; "transparent" is unset.
-*/
+const ZERO$3 = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+/** Column shares of the body width. The third column takes the rounding remainder. */
+const COLUMN_SHARES = {
+	"1": [100],
+	"2": [50, 50],
+	"3": [
+		33.33,
+		33.33,
+		33.34
+	]
+};
+const DIVIDER_WIDTH = /^(-?\d+(?:\.\d+)?)\s*(%|px)?$/i;
+const SIDE_LETTER = {
+	t: "top",
+	r: "right",
+	b: "bottom",
+	l: "left"
+};
 function parseStyleAttribute(styleAttr) {
 	const result = {};
 	if (!styleAttr) return result;
@@ -55,13 +74,18 @@ function parseStyleAttribute(styleAttr) {
 	}
 	return result;
 }
+function channelHex(value) {
+	return Math.max(0, Math.min(255, Math.round(value))).toString(16).padStart(2, "0");
+}
 function parseColor(value) {
 	if (!value) return "";
 	const trimmed = value.trim().toLowerCase();
 	if (trimmed === "transparent" || trimmed === "inherit" || trimmed === "none") return "";
-	const hex = trimmed.startsWith("#") ? trimmed : /^[0-9a-f]{3}$|^[0-9a-f]{6}$/.test(trimmed) ? `#${trimmed}` : trimmed;
+	const hex = trimmed.startsWith("#") ? trimmed : /^[0-9a-f]{3}$|^[0-9a-f]{6}$/.test(trimmed) ? `#${trimmed}` : "";
 	if (/^#[0-9a-f]{6}$/.test(hex)) return hex;
 	if (/^#[0-9a-f]{3}$/.test(hex)) return `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+	const rgb = trimmed.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/);
+	if (rgb) return `#${channelHex(Number(rgb[1]))}${channelHex(Number(rgb[2]))}${channelHex(Number(rgb[3]))}`;
 	return "";
 }
 function parsePxValue(value) {
@@ -75,6 +99,209 @@ 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));
+	if (values.length === 0) return { ...ZERO$3 };
+	if (values.length === 1) return {
+		top: values[0],
+		right: values[0],
+		bottom: values[0],
+		left: values[0]
+	};
+	if (values.length === 2) return {
+		top: values[0],
+		right: values[1],
+		bottom: values[0],
+		left: values[1]
+	};
+	if (values.length === 3) return {
+		top: values[0],
+		right: values[1],
+		bottom: values[2],
+		left: values[1]
+	};
+	return {
+		top: values[0],
+		right: values[1],
+		bottom: values[2],
+		left: values[3]
+	};
+}
+/**
+* Longhand wins when it is present, including an explicit 0.
+* A missing longhand falls back to the shorthand, then 0.
+*/
+function readPadding(styles) {
+	const shorthand = styles.padding !== void 0 ? parsePaddingShorthand(styles.padding) : ZERO$3;
+	const side = (name) => {
+		const key = `padding-${name}`;
+		if (styles[key] !== void 0) return parsePxValue(styles[key]);
+		return shorthand[name];
+	};
+	return {
+		top: side("top"),
+		right: side("right"),
+		bottom: side("bottom"),
+		left: side("left")
+	};
+}
+/** `es-p20` sets every side; `es-p10t` / `r` / `b` / `l` then override one side. */
+function paddingFromClasses(classAttr) {
+	const pad = { ...ZERO$3 };
+	const tokens = (classAttr ?? "").split(/\s+/).filter(Boolean);
+	for (const token of tokens) {
+		const all = /^es-p(\d+)$/.exec(token);
+		if (!all) continue;
+		const n = Number(all[1]);
+		pad.top = n;
+		pad.right = n;
+		pad.bottom = n;
+		pad.left = n;
+	}
+	for (const token of tokens) {
+		const side = /^es-p(\d+)([trbl])$/.exec(token);
+		if (!side) continue;
+		pad[SIDE_LETTER[side[2]]] = Number(side[1]);
+	}
+	return pad;
+}
+/**
+* Class padding first, then inline padding per side.
+* A shorthand replaces every side; a longhand replaces only that side.
+*/
+function readBoxPadding(classAttr, styleAttr) {
+	const base = paddingFromClasses(classAttr);
+	const styles = parseStyleAttribute(styleAttr);
+	const hasShorthand = styles.padding !== void 0;
+	const shorthand = hasShorthand ? parsePaddingShorthand(styles.padding) : base;
+	const side = (name) => {
+		const key = `padding-${name}`;
+		if (styles[key] !== void 0) return parsePxValue(styles[key]);
+		if (hasShorthand) return shorthand[name];
+		return base[name];
+	};
+	return {
+		top: side("top"),
+		right: side("right"),
+		bottom: side("bottom"),
+		left: side("left")
+	};
+}
+/**
+* Body fill paints the section. A band that is neither the page nor the body
+* becomes the section wrapper. A transparent body leaves the band on the section.
+*/
+function resolveSectionPaint(pageBackground, band, body) {
+	const page = pageBackground || "#ffffff";
+	if (body) {
+		if (band && band !== page && band !== body) return {
+			backgroundColor: body,
+			wrapperColor: band,
+			notes: ["The band colour was imported as a section wrapper."]
+		};
+		return {
+			backgroundColor: body,
+			notes: []
+		};
+	}
+	return {
+		backgroundColor: band,
+		notes: []
+	};
+}
+/** `es-*-body` width in px, or 600 when the document does not state one. */
+function emailBodyWidth(widthAttr, styleAttr) {
+	const n = parsePxValue((widthAttr || parseStyleAttribute(styleAttr).width || "").trim());
+	return n > 0 ? n : 600;
+}
+/**
+* Room each column has for a line, before the line's own side padding.
+* The share is of the body width; the first column then loses the section's
+* left padding and the last loses the right. One column loses both.
+* A room that is not positive is unknown — the caller keeps the stated px.
+*/
+function columnRooms(bodyWidth, layout, padding, slotCount) {
+	const shares = COLUMN_SHARES[layout];
+	const count = layout === "1" ? 1 : slotCount;
+	const width = bodyWidth > 0 ? bodyWidth : 600;
+	return Array.from({ length: count }, (_, index) => {
+		const span = layout === "1" ? width : width * shares[index] / 100;
+		const left = layout === "1" || index === 0 ? padding.left : 0;
+		const right = layout === "1" || index === count - 1 ? padding.right : 0;
+		const room = span - left - right;
+		return room > 0 ? room : void 0;
+	});
+}
+/**
+* No width, `auto` and `100%` span the column. Another percentage stays a
+* share, clamped to 0–100 and rounded to two decimals. A px width stays px
+* until it reaches `room` less the divider's own side padding.
+*/
+function readDividerWidth(raw, room, ownLeft, ownRight, notes) {
+	const trimmed = raw.trim();
+	if (trimmed === "" || trimmed.toLowerCase() === "auto" || trimmed === "100%") return "full";
+	const match = trimmed.match(DIVIDER_WIDTH);
+	if (!match) {
+		notes.push(`Divider width "${trimmed}" could not be read; imported as full width.`);
+		return "full";
+	}
+	const value = parseFloat(match[1]);
+	if ((match[2] ?? "").toLowerCase() === "%") {
+		const percent = Math.min(100, Math.max(0, value));
+		if (percent !== value) notes.push(`Divider width ${trimmed} was clamped to ${percent}%.`);
+		const share = Math.round((percent + Number.EPSILON) * 100) / 100;
+		return share === 100 ? "full" : `${share}%`;
+	}
+	const px = Math.max(0, Math.round(value));
+	if (value < 0) notes.push(`Divider width ${trimmed} was clamped to 0px.`);
+	if (room === void 0 || room <= 0) return px;
+	return px >= room - ownLeft - ownRight ? "full" : px;
+}
+const BORDER_STYLES = /* @__PURE__ */ new Set([
+	"none",
+	"hidden",
+	"dotted",
+	"dashed",
+	"solid",
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+]);
+/** A `border-bottom` / `border-top` shorthand. Color is empty when absent. */
+function parseBorderShorthand(value) {
+	const parsed = {
+		width: 0,
+		style: "solid",
+		color: ""
+	};
+	if (!value) return parsed;
+	for (const token of value.trim().split(/\s+/)) {
+		const lower = token.toLowerCase();
+		if (BORDER_STYLES.has(lower)) parsed.style = lower;
+		else if (/^-?\d+(?:\.\d+)?(?:px)?$/i.test(lower)) parsed.width = parsePxValue(lower);
+		else {
+			const color = parseColor(lower);
+			if (color) parsed.color = color;
+		}
+	}
+	return parsed;
+}
+function visibleLineBorder(styles) {
+	for (const key of ["border-bottom", "border-top"]) {
+		if (styles[key] === void 0) continue;
+		const parsed = parseBorderShorthand(styles[key]);
+		if (parsed.width > 0 && parsed.style !== "none" && parsed.style !== "hidden") return parsed;
+	}
+	return null;
+}
 //#endregion
 //#region src/fragment.ts
 /** Paint after `createSectionBlock` so `styles` keeps its required padding. */
@@ -88,11 +315,21 @@ function flattenBlocks(blocks) {
 	else out.push(b);
 	return out;
 }
-/** Run the generic HTML importer on a subtree and keep its blocks, not its sections. */
+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>`;
+}
+/**
+* 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.
+*/
 function blocksFromHtml(inner, ctx) {
-	const wrapped = `<!DOCTYPE html><html><body>${inner}</body></html>`;
-	const result = convertHtmlTemplate(wrapped);
-	ctx.entries.push(...result.report.entries);
+	const result = convertHtmlTemplate(fragmentDocument(inner, ctx.css));
+	for (const entry of result.report.entries) {
+		if (entry.templaticalBlockType === "section") continue;
+		ctx.entries.push(entry);
+	}
 	ctx.warnings.push(...result.report.warnings);
 	return flattenBlocks(result.content.blocks);
 }
@@ -152,6 +389,28 @@ function normalizePlatform(name, src, alt) {
 }
 //#endregion
 //#region src/labelled.ts
+const ZERO$2 = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+/** Tables whose padding is the section's padding. A divider must not copy it. */
+const STRUCTURE_TABLES = [
+	"es-header-body",
+	"es-content-body",
+	"es-footer-body",
+	"es-header",
+	"es-content",
+	"es-footer"
+];
+const MAPPED_LINE_STYLES = /* @__PURE__ */ new Set([
+	"double",
+	"groove",
+	"ridge",
+	"inset",
+	"outset"
+]);
 function firstAnchor($el) {
 	return $el.is("a") ? $el : $el.find("a").first();
 }
@@ -175,13 +434,123 @@ function buttonFrom($el, sourceTag, ctx) {
 		...borderRadius > 0 ? { borderRadius } : {}
 	});
 }
-function spacerFrom($el, sourceTag, ctx) {
-	const style = $el.attr("style") ?? "";
-	const h = /(?:^|;)\s*height\s*:\s*(\d+)px/i.exec(style);
-	const attrH = $el.attr("height");
-	const height = h ? Number(h[1]) : attrH ? Number(attrH) : 24;
-	pushEntry(ctx, sourceTag, "spacer", "converted");
-	return createSpacerBlock({ height: Number.isFinite(height) && height > 0 ? height : 24 });
+function declaresPadding($el) {
+	const styles = parseStyleAttribute($el.attr("style"));
+	return styles.padding !== void 0 || styles["padding-top"] !== void 0 || styles["padding-right"] !== void 0 || styles["padding-bottom"] !== void 0 || styles["padding-left"] !== void 0;
+}
+/**
+* The structure cell's padding becomes the section's padding. Reading it again
+* as the divider's own padding shortens the line twice.
+*/
+function isStructureCell($cell) {
+	if (!$cell.is("td") && !$cell.is("th")) return false;
+	if (hasToken($cell, "esd-structure")) return true;
+	let $table = $cell.parent().parent();
+	if ($table.is("tbody") || $table.is("thead") || $table.is("tfoot")) $table = $table.parent();
+	return $table.is("table") && hasAnyToken($table, STRUCTURE_TABLES);
+}
+function spacerElement($root) {
+	if (hasToken($root, "es-spacer")) return $root;
+	const $inner = $root.find("[class~='es-spacer']").first();
+	return $inner.length ? $inner : $root;
+}
+function lineBorder($root, $spacer, $) {
+	const own = visibleLineBorder(parseStyleAttribute($root.attr("style")));
+	if (own) return own;
+	const onSpacer = visibleLineBorder(parseStyleAttribute($spacer.attr("style")));
+	if (onSpacer) return onSpacer;
+	let found = null;
+	$spacer.find("td, th").each((_, cell) => {
+		if (found) return;
+		found = visibleLineBorder(parseStyleAttribute($(cell).attr("style")));
+	});
+	return found;
+}
+function dividerPadding($root, $spacer) {
+	if (declaresPadding($root)) return readPadding(parseStyleAttribute($root.attr("style")));
+	if ($spacer[0] !== $root[0] && declaresPadding($spacer)) return readPadding(parseStyleAttribute($spacer.attr("style")));
+	const $parent = $spacer.parent();
+	if (($parent.is("td") || $parent.is("th")) && !isStructureCell($parent)) return readPadding(parseStyleAttribute($parent.attr("style")));
+	return { ...ZERO$2 };
+}
+/**
+* No align and no margin is unset. A partial Stripo line with neither sits on
+* the left; the caller supplies that default.
+*/
+function specifiedAlign($el) {
+	const styles = parseStyleAttribute($el.attr("style"));
+	const alignAttr = ($el.attr("align") ?? "").trim().toLowerCase();
+	const alignKnown = alignAttr === "left" || alignAttr === "center" || alignAttr === "right";
+	const hasMargin = styles.margin !== void 0 || styles["margin-left"] !== void 0 || styles["margin-right"] !== void 0;
+	if (!alignKnown && !hasMargin) return void 0;
+	let left = "auto";
+	let right = "auto";
+	if (alignAttr === "left") left = "0";
+	if (alignAttr === "right") right = "0";
+	const margin = (styles.margin ?? "").trim().split(/\s+/).filter(Boolean);
+	if (margin.length > 0) {
+		right = margin[1] ?? margin[0];
+		left = margin.length === 4 ? margin[3] : right;
+	}
+	if (styles["margin-left"] !== void 0) left = styles["margin-left"];
+	if (styles["margin-right"] !== void 0) right = styles["margin-right"];
+	const isAuto = (value) => value.trim().toLowerCase() === "auto";
+	if (isAuto(left) && isAuto(right)) return "center";
+	return isAuto(left) ? "right" : "left";
+}
+function placementOf($spacer, $root) {
+	const own = specifiedAlign($spacer);
+	if (own) return own;
+	for (const $candidate of [$spacer.parent(), $root.parent()]) {
+		if (!$candidate.is("td") && !$candidate.is("th")) continue;
+		const fromCell = specifiedAlign($candidate);
+		if (fromCell) return fromCell;
+	}
+	return "left";
+}
+function spacerHeight($el) {
+	const styles = parseStyleAttribute($el.attr("style"));
+	const fromStyle = parsePxValue(styles.height);
+	if (fromStyle > 0) return fromStyle;
+	const fromAttr = parsePxValue($el.attr("height"));
+	if (fromAttr > 0) return fromAttr;
+	const pad = readPadding(styles);
+	const vertical = pad.top + pad.bottom;
+	return vertical > 0 ? vertical : 24;
+}
+function dividerBlock(border, padding, width) {
+	const lineStyle = border.style === "dashed" || border.style === "dotted" ? border.style : "solid";
+	return createDividerBlock({
+		lineStyle,
+		color: border.color || "#e5e7eb",
+		thickness: border.width,
+		width,
+		styles: { padding }
+	});
+}
+/**
+* A bordered spacer is a divider. `room` is the column width the line can
+* span, after the section padding that column owns.
+*/
+function spacerFrom($el, sourceTag, ctx, $, room) {
+	const $spacer = spacerElement($el);
+	const border = lineBorder($el, $spacer, $);
+	if (!border) {
+		const height = spacerHeight($spacer);
+		pushEntry(ctx, sourceTag, "spacer", "converted");
+		return createSpacerBlock({ height });
+	}
+	const padding = dividerPadding($el, $spacer);
+	const raw = (parseStyleAttribute($spacer.attr("style")).width ?? $spacer.attr("width") ?? "").trim();
+	const notes = [];
+	const width = readDividerWidth(raw, room, padding.left, padding.right, notes);
+	if (MAPPED_LINE_STYLES.has(border.style)) notes.push(`Divider border style "${border.style}" was imported as solid.`);
+	if (width !== "full") {
+		const align = placementOf($spacer, $el);
+		if (align !== "center") notes.push(`The source aligns this divider ${align}; Templatical centres every divider.`);
+	}
+	pushEntry(ctx, sourceTag, "divider", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+	return dividerBlock(border, padding, width);
 }
 function menuItems($table, $) {
 	const items = [];
@@ -237,157 +606,344 @@ function labelledInnerBlocks($el, $, ctx) {
 }
 //#endregion
 //#region src/compiled.ts
-function paintOf($el) {
-	return colorFromPaint($el.attr("style"), $el.attr("bgcolor"));
-}
-/**
-* The 600px band (`es-*-body`) carries the fill; the outer stripe is often
-* `transparent`. Style wins over `bgcolor` (a white bgcolor with a mint
-* `background-color` is the compiled password-reset shape).
-*/
-function stripeFill($stripe) {
-	const $body = $stripe.find("[class~='es-header-body'], [class~='es-content-body'], [class~='es-footer-body']").first();
-	if ($body.length) {
-		const fromBody = paintOf($body);
-		if (fromBody) return fromBody;
-	}
-	return paintOf($stripe);
-}
+const ZERO$1 = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
+const COLUMN_TOKENS = ["es-left", "es-right"];
 const STRIPE_TOKENS = [
 	"es-header",
 	"es-content",
 	"es-footer"
 ];
+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"));
+}
 function stripeToken($el) {
-	return STRIPE_TOKENS.find((t) => hasToken($el, t));
+	return STRIPE_TOKENS.find((token) => hasToken($el, token));
 }
 function topStripes($) {
 	const out = [];
 	$("[class]").each((_, node) => {
 		const $el = $(node);
 		if (!stripeToken($el)) return;
-		if ($el.parents().toArray().some((p) => hasAnyToken($(p), STRIPE_TOKENS))) return;
+		if ($el.parents().toArray().some((parent) => hasAnyToken($(parent), STRIPE_TOKENS))) return;
 		out.push($el);
 	});
 	return out;
 }
-function floatedColumns($stripe, $) {
+function directRows($table, $) {
+	const $direct = $table.children("tr");
+	const $nested = $table.children("tbody, thead, tfoot").children("tr");
+	return ($direct.length > 0 ? $direct : $nested).toArray().map((node) => $(node));
+}
+function directCell($table) {
+	const $direct = $table.children("tr").children("td, th");
+	const $nested = $table.children("tbody, thead, tfoot").children("tr").children("td, th");
+	return ($direct.length > 0 ? $direct : $nested).first();
+}
+/** Paint on the stripe table, else on its cell. A `td` stripe is its own paint. */
+function bandColor$1($stripe) {
+	const own = paintOf($stripe);
+	if (own) return own;
+	if ($stripe.is("td") || $stripe.is("th")) return "";
+	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;
+}
+function hasPadding(padding) {
+	return padding.top !== 0 || padding.right !== 0 || padding.bottom !== 0 || padding.left !== 0;
+}
+function splitPadding(padding, count, index) {
+	if (count <= 1) return { ...padding };
+	return {
+		top: index === 0 ? padding.top : 0,
+		right: padding.right,
+		bottom: index === count - 1 ? padding.bottom : 0,
+		left: padding.left
+	};
+}
+function isColumn($el) {
+	return $el.is("table") && hasAnyToken($el, COLUMN_TOKENS);
+}
+function containsColumn($el, $) {
+	const stop = $el[0];
+	let found = false;
+	$el.find("table").each((_, node) => {
+		if (found) return;
+		const $n = $(node);
+		if (!hasAnyToken($n, COLUMN_TOKENS)) return;
+		let $parent = $n.parent();
+		while ($parent.length > 0 && $parent[0] !== stop) {
+			if (hasAnyToken($parent, COLUMN_TOKENS)) return;
+			$parent = $parent.parent();
+		}
+		found = true;
+	});
+	return found;
+}
+/**
+* Columns in one cell are one section. Flow before them, between them and
+* after them becomes its own one-column section, in that order.
+*/
+function collectPieces($root, $) {
+	const pieces = [];
+	const walk = ($parent) => {
+		const flow = [];
+		const flush = () => {
+			if (flow.length === 0) return;
+			pieces.push({
+				kind: "flow",
+				nodes: flow.splice(0, flow.length)
+			});
+		};
+		for (const node of $parent.contents().toArray()) {
+			if (node.type === "text") {
+				if (node.data.trim()) flow.push(node);
+				continue;
+			}
+			if (node.type !== "tag") continue;
+			const $el = $(node);
+			if (isHidden($el)) continue;
+			if (isColumn($el)) {
+				flush();
+				pieces.push({
+					kind: "column",
+					el: node
+				});
+				continue;
+			}
+			if (containsColumn($el, $)) {
+				flush();
+				walk($el);
+				continue;
+			}
+			flow.push(node);
+		}
+		flush();
+	};
+	walk($root);
+	return pieces;
+}
+function widgetKind($el) {
+	if (hasToken($el, "es-menu")) {
+		if (!$el.is("table") && $el.find("table").length > 0) return null;
+		return "menu";
+	}
+	if (hasToken($el, "es-social")) return "social";
+	if (hasToken($el, "es-button")) {
+		if ($el.is("a") || $el.find("a").length > 0) return "button";
+		return null;
+	}
+	if (hasToken($el, "es-spacer")) return "spacer";
+	return null;
+}
+function containsWidget($el, $) {
+	let found = false;
+	$el.find("[class]").each((_, node) => {
+		if (found) return;
+		if (widgetKind($(node))) found = true;
+	});
+	return found;
+}
+function widgetBlocks($el, kind, $, ctx, room) {
+	if (kind === "button") return [buttonFrom($el, "es-button", ctx)];
+	if (kind === "spacer") return [spacerFrom($el, "es-spacer", ctx, $, room)];
+	if (kind === "social") return [socialFrom($el, $, "es-social", ctx)];
+	const menu = menuFrom($el, $, "es-menu", ctx);
+	if (menu) return [menu];
+	return blocksFromHtml($.html($el) ?? "", ctx);
+}
+/** Widgets stay where they sit. A run of everything else goes through HTML import. */
+function convertRegion(nodes, $, ctx, room) {
 	const out = [];
-	$stripe.find("[class~='es-left'], [class~='es-right']").each((_, node) => {
+	let pending = "";
+	const flush = () => {
+		if (!pending.trim()) {
+			pending = "";
+			return;
+		}
+		out.push(...blocksFromHtml(pending, ctx));
+		pending = "";
+	};
+	const visit = (node) => {
+		if (node.type === "text") {
+			if (node.data.trim()) pending += node.data;
+			return;
+		}
+		if (node.type !== "tag") return;
 		const $el = $(node);
+		if ($el.is("head, style, script")) return;
 		if (isHidden($el)) return;
-		if ($el.parents("[class~='es-left'], [class~='es-right']").filter((_, p) => {
-			return $stripe.find(p).length > 0 || $(p).closest($stripe).length > 0;
-		}).length > 0) return;
-		if ($el.parents().toArray().some((p) => {
-			if (p === $stripe[0]) return false;
-			return hasAnyToken($(p), STRIPE_TOKENS);
-		})) return;
-		out.push($el);
-	});
+		const kind = widgetKind($el);
+		if (kind) {
+			flush();
+			out.push(...widgetBlocks($el, kind, $, ctx, room));
+			return;
+		}
+		if (containsWidget($el, $)) {
+			for (const child of $el.contents().toArray()) visit(child);
+			return;
+		}
+		pending += $.html(node) ?? "";
+	};
+	for (const node of nodes) visit(node);
+	flush();
 	return out;
 }
-function columnLayout$1(count, ctx, sourceTag) {
-	if (count <= 1) return {
-		layout: "1",
-		flattenExtra: false
-	};
-	if (count === 2) return {
-		layout: "2",
-		flattenExtra: false
-	};
-	if (count === 3) return {
-		layout: "3",
-		flattenExtra: false
+function regionFromElement($el, $, ctx, room) {
+	return convertRegion($el.contents().toArray(), $, ctx, room);
+}
+function hasBlocks(children) {
+	return children.some((column) => column.length > 0);
+}
+function columnChildren(cols, $, ctx, bodyWidth, padding) {
+	const count = cols.length;
+	const layout = count >= 3 ? "3" : count === 2 ? "2" : "1";
+	const rooms = columnRooms(bodyWidth, count >= 4 ? "3" : layout, padding, count >= 4 ? 3 : layout === "1" ? 1 : count);
+	let children;
+	if (count >= 4) {
+		const rest = [];
+		for (const el of cols.slice(2)) rest.push(...regionFromElement($(el), $, ctx, rooms[2]));
+		children = [
+			regionFromElement($(cols[0]), $, ctx, rooms[0]),
+			regionFromElement($(cols[1]), $, ctx, rooms[1]),
+			rest
+		];
+	} else children = cols.map((el, index) => regionFromElement($(el), $, ctx, rooms[index]));
+	if (!hasBlocks(children)) return null;
+	if (count < 4) return {
+		children,
+		layout: count >= 3 ? "3" : layout
 	};
-	pushEntry(ctx, sourceTag, "section", "approximated", `Row with ${count} columns was flattened; extra columns merged into the third slot. Templatical supports up to 3 columns per section.`);
-	ctx.warnings.push(`Row with ${count} columns was flattened; extra columns merged into the third slot. Templatical supports up to 3 columns per section.`);
+	const flattenNote = `Row with ${count} columns was flattened; extra columns merged into the third slot. Templatical supports up to 3 columns per section.`;
+	ctx.warnings.push(flattenNote);
 	return {
+		children,
 		layout: "3",
-		flattenExtra: true
+		flattenNote
 	};
 }
-function convertSubtree($el, $, ctx) {
-	const $clone = $el.clone();
-	const replacements = [];
-	const take = ($node, block) => {
-		if (!block) return;
-		const marker = `stripo-keep-${replacements.length}`;
-		replacements.push([block]);
-		$node.replaceWith(`<div data-stripo-keep="${marker}"></div>`);
-	};
-	$clone.find("table.es-menu, [class~='es-menu']").each((_, node) => {
-		const $n = $(node);
-		if (!$n.is("table") && $n.find("table").length) return;
-		const menu = menuFrom($n, $, "es-menu", ctx);
-		take($n, menu);
+function flowNodes(pieces) {
+	return pieces.flatMap((piece) => piece.kind === "flow" ? piece.nodes : []);
+}
+function groupsFromPieces(pieces) {
+	const columns = pieces.filter((piece) => piece.kind === "column");
+	if (columns.length === 0) return pieces.length > 0 ? [{
+		mode: "flow",
+		pieces
+	}] : [];
+	let first = -1;
+	let last = -1;
+	pieces.forEach((piece, index) => {
+		if (piece.kind !== "column") return;
+		if (first === -1) first = index;
+		last = index;
 	});
-	$clone.find("[class~='es-social']").each((_, node) => {
-		const $n = $(node);
-		take($n, socialFrom($n, $, "es-social", ctx));
+	const groups = [];
+	const leading = pieces.slice(0, first);
+	if (leading.length > 0) groups.push({
+		mode: "flow",
+		pieces: leading
 	});
-	$clone.find("a.es-button, [class~='es-button']").each((_, node) => {
-		const $n = $(node);
-		if (!$n.is("a") && $n.find("a").length === 0) return;
-		take($n, buttonFrom($n, "es-button", ctx));
+	groups.push({
+		mode: "columns",
+		pieces: columns
 	});
-	$clone.find("[class~='es-spacer']").each((_, node) => {
-		const $n = $(node);
-		take($n, spacerFrom($n, "es-spacer", ctx));
+	const between = pieces.slice(first + 1, last).filter((piece) => piece.kind === "flow");
+	if (between.length > 0) groups.push({
+		mode: "flow",
+		pieces: between,
+		extra: BETWEEN_NOTE
 	});
-	const generic = blocksFromHtml($.html($clone) ?? "", ctx);
-	const out = [];
-	const used = /* @__PURE__ */ new Set();
-	const walk = (blocks) => {
-		for (const b of blocks) {
-			if (b.type === "html" && /data-stripo-keep="stripo-keep-(\d+)"/.test(b.content)) {
-				const m = /data-stripo-keep="stripo-keep-(\d+)"/.exec(b.content);
-				const i = m ? Number(m[1]) : -1;
-				if (i >= 0 && replacements[i] && !used.has(i)) {
-					used.add(i);
-					out.push(...replacements[i]);
-					continue;
-				}
-			}
-			if (b.type === "paragraph" && /stripo-keep-/.test(b.content ?? "")) {
-				const m = /stripo-keep-(\d+)/.exec(b.content);
-				const i = m ? Number(m[1]) : -1;
-				if (i >= 0 && replacements[i] && !used.has(i)) {
-					used.add(i);
-					out.push(...replacements[i]);
-					continue;
-				}
-			}
-			out.push(b);
+	const trailing = pieces.slice(last + 1);
+	if (trailing.length > 0) groups.push({
+		mode: "flow",
+		pieces: trailing
+	});
+	return groups;
+}
+function sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth) {
+	if (isHidden($row)) return [];
+	const pieces = [];
+	let padding = { ...ZERO$1 };
+	let sawCell = false;
+	$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;
 		}
-	};
-	walk(generic);
-	for (let i = 0; i < replacements.length; i++) if (!used.has(i)) out.push(...replacements[i]);
+		pieces.push(...collectPieces($cell, $));
+	});
+	if (!sawCell || pieces.length === 0) return [];
+	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);
+			if (!built) continue;
+			rendered.push({
+				children: built.children,
+				layout: built.layout,
+				extra: built.flattenNote
+			});
+			continue;
+		}
+		const blocks = convertRegion(flowNodes(group.pieces), $, ctx, columnRooms(bodyWidth, "1", padding, 1)[0]);
+		if (blocks.length === 0) continue;
+		rendered.push({
+			children: [blocks],
+			layout: "1",
+			extra: group.extra
+		});
+	}
+	if (rendered.length === 0) return [];
+	const seam = rendered.length > 1 && hasPadding(padding) ? SEAM_NOTE : void 0;
+	return rendered.map((group, index) => {
+		const notes = [
+			...paint.notes,
+			group.extra,
+			image,
+			seam
+		].filter((note) => Boolean(note));
+		pushEntry(ctx, token, "section", notes.length > 0 ? "approximated" : "converted", notes.length > 0 ? notes.join(" ") : void 0);
+		return withBackground(createSectionBlock({
+			columns: group.layout,
+			children: group.children,
+			styles: { padding: splitPadding(padding, rendered.length, index) },
+			...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
+		}), paint.backgroundColor);
+	});
+}
+function sectionsFromStripe($stripe, $, ctx) {
+	if (isHidden($stripe)) return [];
+	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 out = [];
+	for (const $row of rows) out.push(...sectionsFromRow($row, $, ctx, token, paint, image, bodyWidth));
 	return out;
 }
 function convertCompiled(html, ctx) {
 	const $ = load(html);
 	const stripes = topStripes($);
-	if (stripes.length === 0) return convertSubtree($.root(), $, ctx);
-	return stripes.map(($stripe) => {
-		const token = stripeToken($stripe) ?? "es-content";
-		const cols = floatedColumns($stripe, $);
-		const { layout, flattenExtra } = columnLayout$1(cols.length || 1, ctx, token);
-		let children;
-		if (cols.length <= 1) children = [convertSubtree($stripe, $, ctx)];
-		else if (flattenExtra) {
-			const slots = cols.slice(0, 2).map(($c) => convertSubtree($c, $, ctx));
-			const rest = [];
-			for (const $c of cols.slice(2)) rest.push(...convertSubtree($c, $, ctx));
-			slots.push(rest);
-			children = slots;
-		} else children = cols.map(($c) => convertSubtree($c, $, ctx));
-		if (!flattenExtra) pushEntry(ctx, token, "section", "converted");
-		return withBackground(createSectionBlock({
-			columns: layout,
-			children
-		}), stripeFill($stripe));
-	});
+	if (stripes.length === 0) return convertRegion($.root().contents().toArray(), $, ctx);
+	const out = [];
+	for (const $stripe of stripes) out.push(...sectionsFromStripe($stripe, $, ctx));
+	return out;
 }
 //#endregion
 //#region src/detect.ts
@@ -475,23 +1031,34 @@ function isStripoHtml(html) {
 }
 //#endregion
 //#region src/editor.ts
+const ZERO = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	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 "1";
-	if (count === 2) return "2";
-	if (count === 3) return "3";
-	pushEntry(ctx, "esd-structure", "section", "approximated", `Row with ${count} columns was flattened to a single column. Templatical supports up to 3 columns per section.`);
-	ctx.warnings.push(`Row with ${count} columns was flattened to a single column. Templatical supports up to 3 columns per section.`);
-	return "1";
+	if (count <= 1) return { layout: "1" };
+	if (count === 2) return { layout: "2" };
+	if (count === 3) return { layout: "3" };
+	const flattenNote = `Row with ${count} columns was flattened to a single column. Templatical supports up to 3 columns per section.`;
+	ctx.warnings.push(flattenNote);
+	return {
+		layout: "1",
+		flattenNote
+	};
 }
 function esdBlockKind($el) {
 	const token = tokenStartingWith($el, "esd-block-");
 	return token ? token.slice(10) : void 0;
 }
-function convertEsdBlock($el, $, ctx) {
+function convertEsdBlock($el, $, ctx, room) {
 	const kind = esdBlockKind($el);
 	if (!kind) return labelledInnerBlocks($el, $, ctx);
 	if (kind === "button") return [buttonFrom($el, "esd-block-button", ctx)];
-	if (kind === "spacer") return [spacerFrom($el, "esd-block-spacer", ctx)];
+	if (kind === "spacer") return [spacerFrom($el, "esd-block-spacer", ctx, $, room)];
 	if (kind === "social") return [socialFrom($el, $, "esd-block-social", ctx)];
 	if (kind === "menu") {
 		const menu = menuFrom($el, $, "esd-block-menu", ctx);
@@ -505,7 +1072,7 @@ function convertEsdBlock($el, $, ctx) {
 	pushEntry(ctx, `esd-block-${kind}`, kind === "image" ? "image" : "paragraph", "converted");
 	return labelledInnerBlocks($el, $, ctx);
 }
-function blocksInContainer($frame, $, ctx) {
+function blocksInContainer($frame, $, ctx, room) {
 	const out = [];
 	const seen = /* @__PURE__ */ new Set();
 	$frame.find("[class]").each((_, node) => {
@@ -514,11 +1081,33 @@ function blocksInContainer($frame, $, ctx) {
 		if ($el.parents().toArray().some((p) => tokenStartingWith($(p), "esd-block-"))) return;
 		if (seen.has(node)) return;
 		seen.add(node);
-		out.push(...convertEsdBlock($el, $, ctx));
+		out.push(...convertEsdBlock($el, $, ctx, room));
 	});
 	if (out.length === 0) return labelledInnerBlocks($frame, $, ctx);
 	return out;
 }
+function enclosing($el, selector) {
+	if ($el.is(selector)) return $el;
+	const $parent = $el.parents(selector).first();
+	return $parent.length > 0 ? $parent : null;
+}
+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();
+	return $cell.length > 0 ? colorFromPaint($cell.attr("style"), $cell.attr("bgcolor")) : "";
+}
+function paintFor($el, ctx) {
+	const $stripe = enclosing($el, "[class~='esd-stripe']");
+	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;
@@ -526,19 +1115,34 @@ function sectionFromStructure($structure, $, ctx) {
 			return $(p).closest($structure).length > 0;
 		}).length === 0;
 	});
-	const layout = columnLayout(frames.length || 1, ctx);
+	const frameCount = frames.length;
+	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));
 	let children;
 	if (layout === "1") {
 		const merged = [];
-		if (frames.length === 0) merged.push(...blocksInContainer($structure, $, ctx));
-		else for (const $f of frames) merged.push(...blocksInContainer($f, $, ctx));
+		const room = rooms[0];
+		if (frames.length === 0) merged.push(...blocksInContainer($structure, $, ctx, room));
+		else for (const $f of frames) merged.push(...blocksInContainer($f, $, ctx, room));
 		children = [merged];
-	} else children = frames.map(($f) => blocksInContainer($f, $, ctx));
-	if (layout !== "1" || frames.length <= 3) pushEntry(ctx, "esd-structure", "section", "converted");
+	} else children = frames.map(($f, index) => blocksInContainer($f, $, ctx, rooms[index]));
+	const paint = paintFor($structure, ctx);
+	const $stripe = enclosing($structure, "[class~='esd-stripe']");
+	const notes = [
+		...paint.notes,
+		flattenNote,
+		imageNote($stripe?.attr("style"), $body?.attr("style"))
+	].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");
 	return withBackground(createSectionBlock({
 		columns: layout,
-		children
-	}), colorFromPaint($structure.attr("style"), $structure.attr("bgcolor")));
+		children,
+		styles: { padding },
+		...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
+	}), paint.backgroundColor);
 }
 function convertEditor(html, ctx) {
 	const $ = load(html);
@@ -549,11 +1153,15 @@ function convertEditor(html, ctx) {
 	return stripes.map(($stripe) => {
 		const inner = $stripe.find("[class~='esd-structure']");
 		if (inner.length > 0) return sectionFromStructure(inner.first(), $, ctx);
-		pushEntry(ctx, "esd-stripe", "section", "converted");
+		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);
 		return withBackground(createSectionBlock({
 			columns: "1",
-			children: [blocksInContainer($stripe, $, ctx)]
-		}), colorFromPaint($stripe.attr("style"), $stripe.attr("bgcolor")));
+			children: [blocksInContainer($stripe, $, ctx, columnRooms(600, "1", ZERO, 1)[0])],
+			styles: { padding: { ...ZERO } },
+			...paint.wrapperColor ? { wrapper: { backgroundColor: paint.wrapperColor } } : {}
+		}), paint.backgroundColor);
 	});
 }
 //#endregion
@@ -567,6 +1175,16 @@ function injectCss(html, css) {
 	$("head").append($style);
 	return $.html() ?? html;
 }
+/** First painted `es-wrapper-color` / `es-wrapper`, or white when neither is set. */
+function pageBackground($) {
+	const nodes = $("[class~='es-wrapper-color'], [class~='es-wrapper']").toArray();
+	for (const node of nodes) {
+		const $el = $(node);
+		const color = colorFromPaint($el.attr("style"), $el.attr("bgcolor"));
+		if (color) return color;
+	}
+	return "#ffffff";
+}
 function summarize(ctx) {
 	const summary = {
 		total: ctx.entries.length,
@@ -609,14 +1227,23 @@ function convertStripoTemplate(html, options) {
 	};
 	const ctx = {
 		entries: [],
-		warnings: []
+		warnings: [],
+		css: options?.css
 	};
+	const pageBg = pageBackground(load(prepared));
+	ctx.pageBackground = pageBg;
 	const blocks = kind === "editor" ? convertEditor(prepared, ctx) : convertCompiled(prepared, ctx);
+	const defaults = createDefaultTemplateContent();
 	return {
 		content: {
-			...createDefaultTemplateContent(),
+			...defaults,
 			...fallback.content,
-			blocks
+			blocks,
+			settings: {
+				...defaults.settings,
+				...fallback.content.settings,
+				backgroundColor: pageBg
+			}
 		},
 		report: summarize(ctx)
 	};