@templatical/import-html 0.42.1 → 0.43.1

package/dist/index.js

@@ -113,6 +113,17 @@ function parseColor(value) {
 	return "";
 }
 /**
+* Normalizes a legacy `bgcolor` attribute value the way `parseColor` does a
+* CSS one, also accepting hex without its `#` (`bgcolor="f4f4f4"`), which
+* browsers render and CSS rejects.
+*/
+function parseLegacyColor(value) {
+	const color = parseColor(value);
+	if (color) return color;
+	const bare = (value ?? "").trim();
+	return /^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(bare) ? parseColor(`#${bare}`) : "";
+}
+/**
 * Parses a CSS `padding` shorthand (1-4 values) into a SpacingValue.
 */
 function parsePaddingShorthand(value) {
@@ -323,6 +334,28 @@ function parseStyleSheet(css) {
 	return rules;
 }
 /**
+* Whether the document underlines its links, from a `<style>` rule whose
+* selector is a bare `a`, or `undefined` when no such rule sets
+* `text-decoration`.
+*
+* Only a rule that reaches every link states the document's default: a
+* pseudo-class, a scoped selector and an `@media` rule each cover some links
+* some of the time. A later rule wins, as in the cascade. Read it before
+* `resolveCssStyles`, which removes the `<style>` tags.
+*/
+function readLinkUnderline($) {
+	let underline;
+	$("style").each((_, el) => {
+		for (const rule of parseStyleSheet($(el).text())) {
+			if (!rule.selectors.some((selector) => selector.toLowerCase() === "a")) continue;
+			const decoration = rule.declarations["text-decoration"] ?? rule.declarations["text-decoration-line"];
+			if (decoration === void 0) continue;
+			underline = /\bunderline\b/i.test(decoration);
+		}
+	});
+	return underline;
+}
+/**
 * Reads all `<style>` tags from the document, parses them into rules,
 * applies each rule's declarations to matching elements (merging with
 * existing inline `style=""` attributes — inline always wins), and removes
@@ -696,16 +729,27 @@ function convertHeading($el, styles = getStyles$1($el)) {
 	});
 }
 /**
-* Apply a container-level `text-align` to every `<p>` opening tag in `html`,
-* merging into an existing `style="…"` attribute when present. Tolerant of
-* any other attributes on the `<p>` (class/id/dir/…) — the previous narrow
-* `<p style="…">` + bare-`<p>` matchers silently dropped the alignment when
-* the inner `<p>` carried a non-style attribute.
+* Whether a `style` attribute states an alignment of its own. `inherit` does
+* not: it takes the container's.
+*/
+function statesOwnAlignment(style) {
+	const own = parseStyleAttribute(style)["text-align"];
+	return own !== void 0 && own.trim().toLowerCase() !== "inherit";
+}
+/**
+* Apply a container-level `text-align` to every `<p>` opening tag in `html`
+* that states no alignment of its own, merging into an existing `style="…"`
+* attribute when present. Any other attribute on the `<p>` (class/id/dir/…)
+* is kept, and does not stop the alignment from applying.
+*
+* A `<p>`'s own `text-align` wins, as it does in a browser, where the
+* container's value only reaches a paragraph by inheritance.
 */
 function applyTextAlignToParagraphs(html, textAlign) {
-	return html.replace(/<p\b([^>]*)>/gi, (_match, attrs) => {
+	return html.replace(/<p\b([^>]*)>/gi, (match, attrs) => {
 		const styleMatch = /\sstyle\s*=\s*"([^"]*)"/i.exec(attrs);
 		if (styleMatch) {
+			if (statesOwnAlignment(styleMatch[1])) return match;
 			const existing = styleMatch[1].trim().replace(/;\s*$/, "");
 			const merged = existing ? `${existing}; text-align: ${textAlign}` : `text-align: ${textAlign}`;
 			return `<p${attrs.slice(0, styleMatch.index) + ` style="${merged}"` + attrs.slice(styleMatch.index + styleMatch[0].length)}>`;
@@ -716,8 +760,12 @@ function applyTextAlignToParagraphs(html, textAlign) {
 /**
 * Builds a Paragraph block from a fragment of inline markup, styled by the
 * element that supplied `styles`.
+*
+* `padding` defaults to that element's own. A caller building from a host's
+* styles passes none: a host insets every block it holds, and the cell walk
+* applies that inset once, to all of them.
 */
-function buildParagraph(innerHtml, styles) {
+function buildParagraph(innerHtml, styles, padding = readPaddingFromStyles(styles)) {
 	const wrapped = ensureParagraphWrapped(innerHtml);
 	const fontParts = [];
 	const fontSize = parsePxValue(styles["font-size"]);
@@ -737,7 +785,7 @@ function buildParagraph(innerHtml, styles) {
 	}
 	return createParagraphBlock({
 		content: result,
-		styles: { padding: readPaddingFromStyles(styles) }
+		styles: { padding }
 	});
 }
 /**
@@ -761,7 +809,8 @@ function isInlineContent(node) {
 *
 * `$cell` supplies the styling: a bare run has no element of its own to read
 * a colour, size or alignment from, and table-based email puts all three on
-* the cell.
+* the cell. Its padding stays out: the cell walk insets every block the cell
+* holds by it, so reading it here too would count it twice.
 *
 * Returns `null` for a run carrying no text — a cell holding nothing but
 * `&nbsp;` and `<br>` has no content, the same reading `convertElement`
@@ -770,7 +819,7 @@ function isInlineContent(node) {
 function convertInlineRun(nodes, $cell, $) {
 	if (!nodes.map((node) => $(node).text()).join("").trim()) return null;
 	return {
-		block: buildParagraph(nodes.map((node) => $.html(node)).join(""), getStyles$1($cell)),
+		block: buildParagraph(nodes.map((node) => $.html(node)).join(""), getStyles$1($cell), emptyPadding$2()),
 		entry: {
 			sourceTag: tagOf($cell[0]),
 			templaticalBlockType: "paragraph",
@@ -842,7 +891,7 @@ function splitMixedImageAnchor($anchor, $host, $) {
 	$clone.find("img").remove();
 	if (($clone.text() ?? "").trim() === "") return results;
 	results.push({
-		block: buildParagraph($.html($clone) ?? "", getStyles$1($host)),
+		block: buildParagraph($.html($clone) ?? "", getStyles$1($host), emptyPadding$2()),
 		entry: {
 			sourceTag: tagOf($host[0]),
 			templaticalBlockType: "paragraph",
@@ -983,20 +1032,91 @@ function convertButton($el) {
 		styles: { padding: emptyPadding$2() }
 	});
 }
+/** A width as a number and an optional unit; a unitless value is px. */
+const DIVIDER_WIDTH = /^(-?\d+(?:\.\d+)?)\s*(%|px)?$/i;
+/**
+* The width an `<hr>` spans, from its `width` style, then its `width`
+* attribute, with a note in `notes` for whatever the result does not keep.
+*
+* No width, `auto` and `100%` are the whole column, which is how a
+* block-level `<hr>` renders. Any other percentage stays a share of the
+* column, clamped to 0–100% and rounded to two decimals, which keeps it inside
+* `DividerPercentWidth`'s pattern. A px width stays px until it reaches
+* `room` less the divider's own side padding, which is the width `mj-divider`
+* draws 100% across; past that it is the whole column, and it keeps narrowing
+* with the column on a phone. An unknown `room` keeps every px width.
+*/
+function readDividerWidth($el, room, notes) {
+	const styles = getStyles$1($el);
+	const raw = (styles.width ?? $el.attr("width") ?? "").trim();
+	if (raw === "" || raw.toLowerCase() === "auto") return "full";
+	const match = raw.match(DIVIDER_WIDTH);
+	if (!match) {
+		notes.push(`Divider width "${raw}" could not be read; imported as full width.`);
+		return "full";
+	}
+	const value = parseFloat(match[1]);
+	if (match[2] === "%") {
+		const percent = Math.min(100, Math.max(0, value));
+		if (percent !== value) notes.push(`Divider width ${raw} was clamped to ${percent}%.`);
+		const share = Math.round(percent * 100) / 100;
+		return share === 100 ? "full" : `${share}%`;
+	}
+	const px = Math.max(0, Math.round(value));
+	if (value < 0) notes.push(`Divider width ${raw} was clamped to 0px.`);
+	if (room === void 0) return px;
+	const own = readPaddingFromStyles(styles);
+	return px >= room - own.left - own.right ? "full" : px;
+}
+/**
+* Where an `<hr>` sits in its column. Each side margin starts at the
+* browser's `auto`, the legacy `align` attribute sets them next, and CSS
+* margins override both, side by side. Auto on both sides centres the line;
+* auto on the left alone pushes it right; anything else leaves it at the
+* start of the column.
+*/
+function dividerAlign($el) {
+	let left = "auto";
+	let right = "auto";
+	const align = ($el.attr("align") ?? "").trim().toLowerCase();
+	if (align === "left") left = "0";
+	if (align === "right") right = "0";
+	const styles = getStyles$1($el);
+	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;
+	}
+	left = styles["margin-left"] ?? left;
+	right = styles["margin-right"] ?? right;
+	const isAuto = (value) => value.trim().toLowerCase() === "auto";
+	if (isAuto(left) && isAuto(right)) return "center";
+	return isAuto(left) ? "right" : "left";
+}
 /**
-* <hr> → Divider block.
+* <hr> → Divider block, with a note for each thing the block does not keep.
+*
+* Templatical centres every divider, so a partial one the source places at
+* either side is reported. A full-width line has no placement to lose.
 */
-function convertDivider($el) {
+function convertDivider($el, room) {
 	const styles = getStyles$1($el);
 	const border = parseBorderShorthand(styles["border-top"] ?? styles.border);
 	const lineStyle = border.style === "dashed" || border.style === "dotted" ? border.style : "solid";
-	return createDividerBlock({
-		lineStyle,
-		color: border.color || "#e5e7eb",
-		thickness: border.width || 1,
-		width: 100,
-		styles: { padding: readPaddingFromStyles(styles) }
-	});
+	const notes = [];
+	const width = readDividerWidth($el, room, notes);
+	const align = dividerAlign($el);
+	if (width !== "full" && align !== "center") notes.push(`The source aligns this divider ${align}; Templatical centres every divider.`);
+	return {
+		block: createDividerBlock({
+			lineStyle,
+			color: border.color || "#e5e7eb",
+			thickness: border.width || 1,
+			width,
+			styles: { padding: readPaddingFromStyles(styles) }
+		}),
+		notes
+	};
 }
 /**
 * Wraps the element's outerHTML in an HTML block (the lossless fallback).
@@ -1099,10 +1219,14 @@ function isButtonCell($el, $) {
 * for every other branch the resolved element is the one handed in, so its own
 * styles are what `styles` already holds.
 *
+* `room` is the width, in px, that a line in the element's column can span
+* before the element's own padding, when the caller knows it. Only a divider
+* reads it.
+*
 * Returns `null` for elements that do not contain any meaningful content
 * (the caller should skip them).
 */
-function convertElement($el, $) {
+function convertElement($el, $, room) {
 	const { $el: $target, styles } = resolveWrappedBlock($el, $);
 	const tag = tagOf($target[0]);
 	if (!tag) return null;
@@ -1142,14 +1266,18 @@ function convertElement($el, $) {
 			}
 		};
 	}
-	if (tag === "hr") return {
-		block: convertDivider($target),
-		entry: {
-			sourceTag: tag,
-			templaticalBlockType: "divider",
-			status: "converted"
-		}
-	};
+	if (tag === "hr") {
+		const { block, notes } = convertDivider($target, room);
+		return {
+			block,
+			entry: {
+				sourceTag: tag,
+				templaticalBlockType: "divider",
+				status: notes.length > 0 ? "approximated" : "converted",
+				...notes.length > 0 ? { note: notes.join(" ") } : {}
+			}
+		};
+	}
 	if (TEXT_TAGS.has(tag)) {
 		if (!hasRenderedContent($target)) return null;
 		return {
@@ -1389,6 +1517,91 @@ function emptyPadding$1() {
 function getStyles($el) {
 	return parseStyleAttribute($el.attr("style"));
 }
+/**
+* The padding an element insets its content by.
+*
+* A table cell falls back to its table's `cellpadding`, side by side: the
+* attribute pads every cell of the table, and a side the cell's own CSS
+* declares overrides it, as in a browser.
+*/
+function readHostPadding($el) {
+	const styles = getStyles($el);
+	const own = readPaddingFromStyles(styles);
+	if (!$el.is("td, th")) return own;
+	const cellpadding = parsePxValue($el.closest("table").attr("cellpadding"));
+	if (!(cellpadding > 0)) return own;
+	const declares = (side) => styles.padding !== void 0 || styles[`padding-${side}`] !== void 0;
+	return {
+		top: declares("top") ? own.top : cellpadding,
+		right: declares("right") ? own.right : cellpadding,
+		bottom: declares("bottom") ? own.bottom : cellpadding,
+		left: declares("left") ? own.left : cellpadding
+	};
+}
+/**
+* The colour an element paints behind its content: its CSS background, then
+* its legacy `bgcolor` attribute, which CSS overrides.
+*/
+function fillOf($el) {
+	const styles = getStyles($el);
+	return parseColor(styles["background-color"]) || parseColor(styles.background) || parseLegacyColor($el.attr("bgcolor"));
+}
+/**
+* Insets columns by the padding of the element that holds them, where that
+* padding places them: the top on each column's first block, the bottom on
+* each column's last, the left on the first column and the right on the
+* last. A single column takes all four sides.
+*
+* Blocks are the carrier because nothing else is: a column has no padding of
+* its own, and a cell's blocks flatten into whichever column the cell lands
+* in.
+*/
+function insetColumns(columns, padding) {
+	if (!padding.top && !padding.right && !padding.bottom && !padding.left) return;
+	columns.forEach((column, columnIndex) => {
+		const left = columnIndex === 0 ? padding.left : 0;
+		const right = columnIndex === columns.length - 1 ? padding.right : 0;
+		column.forEach((block, blockIndex) => {
+			insetBlock(block, {
+				top: blockIndex === 0 ? padding.top : 0,
+				right,
+				bottom: blockIndex === column.length - 1 ? padding.bottom : 0,
+				left
+			});
+		});
+	});
+}
+/**
+* `room` less the side padding of something inside it, or `undefined` while
+* the room is unknown.
+*/
+function narrow(room, padding) {
+	return room === void 0 ? void 0 : room - padding.left - padding.right;
+}
+/**
+* Adds `by` to a block's own padding.
+*
+* A spacer renders at its height and ignores its padding, in the canvas and
+* the export alike, so the top and bottom it is inset by are added to its
+* height instead. Held as padding, the space a spacer at a cell's edge
+* carries would vanish on export.
+*/
+function insetBlock(block, by) {
+	if (block.type === "spacer") {
+		block.height += by.top + by.bottom;
+		return;
+	}
+	const own = block.styles.padding;
+	block.styles = {
+		...block.styles,
+		padding: {
+			top: own.top + by.top,
+			right: own.right + by.right,
+			bottom: own.bottom + by.bottom,
+			left: own.left + by.left
+		}
+	};
+}
 function buildCellButton($cell, $anchor) {
 	const cellStyles = getStyles($cell);
 	const aStyles = getStyles($anchor);
@@ -1403,7 +1616,7 @@ function buildCellButton($cell, $anchor) {
 		text,
 		url,
 		openInNewTab: target === "_blank" || void 0,
-		backgroundColor: parseColor(merged["background-color"]) || parseColor(merged.background) || "#4f46e5",
+		backgroundColor: parseColor(merged["background-color"]) || parseColor(merged.background) || parseLegacyColor($cell.attr("bgcolor")) || "#4f46e5",
 		textColor: parseColor(merged.color) || "#ffffff",
 		borderRadius: parsePxValue(merged["border-radius"]),
 		fontSize: parsePxValue(merged["font-size"]) || 16,
@@ -1596,9 +1809,14 @@ function packagingTablesOf($cell, $) {
 *
 * - The cell's meaningful content must *be* the tables. Descending discards
 *   the row, so a heading or an image beside the table would be dropped.
-* - The row must carry no background and no padding. The section it emits is
-*   the only carrier for those, so descending past a styled row would drop
-*   the band it paints.
+* - The row's style must set no background and no padding. The section it
+*   emits is the carrier for those, so descending past a styled row would
+*   drop the band it paints.
+*
+* A fill the descent does pass — the row's `bgcolor`, its cell's, its
+* table's — is not lost: `processTable` hands it to the tables below, whose
+* sections take it when nothing nearer paints them. Section counts depend on
+* this gate, so a fill is carried down rather than made a reason to stop.
 */
 function packagingRowTables($row, cells, $) {
 	if (cells.length !== 1) return null;
@@ -1628,24 +1846,51 @@ function packagingRowTables($row, cells, $) {
 * column `<div>`s a single cell holds — not every cell the row has: a
 * centring row's gutters were never columns, so counting them would report a
 * three-into-one merge for a row that always stated one column.
+*
+* A background the section could not keep adds its own note after the
+* layout's, so one entry names every loss the row had.
 */
-function sectionEntry(columnCount, slotCount, ratioNote) {
-	if (slotCount !== columnCount) return {
+function sectionEntry(columnCount, slotCount, ratioNote, fillNote) {
+	const notes = [];
+	if (slotCount !== columnCount) notes.push(`Row of ${columnCount} columns was merged into a single column. Templatical sections hold at most 3 columns.`);
+	else if (ratioNote) notes.push(ratioNote);
+	if (fillNote) notes.push(fillNote);
+	if (notes.length === 0) return {
 		sourceTag: "tr",
 		templaticalBlockType: "section",
-		status: "approximated",
-		note: `Row of ${columnCount} columns was merged into a single column. Templatical sections hold at most 3 columns.`
+		status: "converted"
 	};
-	if (ratioNote) return {
+	return {
 		sourceTag: "tr",
 		templaticalBlockType: "section",
 		status: "approximated",
-		note: ratioNote
+		note: notes.join(" ")
 	};
+}
+/**
+* The background a row's section takes, with a note when a cell renders on
+* a colour the section does not keep.
+*
+* Nearest first: the `<tr>`, then its layout cells, then the tables around
+* it (`tableFill`, which a descended wrapper hands down). The cells count
+* when they share one fill, which covers the row's only cell as well as a
+* row painted alike across its columns. Cells that differ leave the section
+* to the table's fill, and the note names what each cell rendered on.
+*
+* A button cell is left out: its colour is the button's own, which
+* `buildCellButton` carries, and read as the section's it would band the
+* whole row in the button's colour.
+*/
+function sectionFill($row, layoutCells, tableFill, $) {
+	const rowFill = fillOf($row);
+	const cellFills = layoutCells.filter(($cell) => !isButtonCell($cell, $).match).map(fillOf);
+	const shared = cellFills.length > 0 && cellFills.every((fill) => fill === cellFills[0]) ? cellFills[0] : "";
+	const color = rowFill || shared || tableFill;
+	const rendered = cellFills.map((fill) => fill || rowFill || tableFill);
+	if (rendered.every((fill) => fill === color)) return { color };
 	return {
-		sourceTag: "tr",
-		templaticalBlockType: "section",
-		status: "converted"
+		color,
+		note: `Cell backgrounds ${rendered.map((fill) => fill || "none").join(" / ")} differ from ${color ? `the section background ${color}` : "the section, which has no background"}. A Templatical section has one background colour.`
 	};
 }
 /**
@@ -1710,14 +1955,14 @@ function columnHostsOf(layoutCells, $) {
 * column whose content is one link into a single button block and drop
 * everything the column's own table holds.
 */
-function extractHostBlocks(host, $, entries, warnings) {
-	return host.kind === "cell" ? extractCellBlocks(host.$el, $, entries, warnings) : extractContentBlocks(host.$el, $, entries, warnings);
+function extractHostBlocks(host, $, entries, warnings, room) {
+	return host.kind === "cell" ? extractCellBlocks(host.$el, $, entries, warnings, room) : extractContentBlocks(host.$el, $, entries, warnings, room);
 }
 /** The width an element declares, from the strongest signal it carries. */
 function readDeclaredWidth($el) {
 	return readColumnWidth($el.attr("class"), getStyles($el), $el.attr("width"));
 }
-function extractCellBlocks($cell, $, entries, warnings) {
+function extractCellBlocks($cell, $, entries, warnings, room) {
 	if (isSpacerCell($cell)) {
 		entries.push({
 			sourceTag: "td",
@@ -1735,7 +1980,7 @@ function extractCellBlocks($cell, $, entries, warnings) {
 		});
 		return [buildCellButton($cell, btn.anchor)];
 	}
-	return extractContentBlocks($cell, $, entries, warnings);
+	return extractContentBlocks($cell, $, entries, warnings, room);
 }
 /**
 * The blocks an element's child nodes produce, for an element that holds
@@ -1748,38 +1993,70 @@ function extractCellBlocks($cell, $, entries, warnings) {
 * `converter.ts`. What is left here is the half that differs: inside a cell a
 * nested table flattens into the surrounding column, where at body level it
 * becomes a section of its own.
+*
+* `room` is the width a line has across the host's column, before the host's
+* own padding narrows it for everything inside.
 */
-function extractContentBlocks($host, $, entries, warnings) {
+function extractContentBlocks($host, $, entries, warnings, room) {
 	const blocks = [];
+	const padding = readHostPadding($host);
+	const inner = narrow(room, padding);
 	walkContentNodes($host, $, ({ block, entry }) => {
 		entries.push(entry);
 		blocks.push(block);
 	}, ($child, tag) => {
 		if (tag === "table") {
-			const inner = processTable($child, $, entries, warnings, true);
-			blocks.push(...inner);
+			blocks.push(...processTable($child, $, entries, warnings, true, "", inner));
 			return;
 		}
 		if (isTableContainer($child, tag)) {
-			blocks.push(...extractContentBlocks($child, $, entries, warnings));
+			blocks.push(...extractContentBlocks($child, $, entries, warnings, inner));
 			return;
 		}
-		const r = convertElement($child, $);
+		const r = convertElement($child, $, inner);
 		if (r) {
 			entries.push(r.entry);
 			blocks.push(r.block);
 		}
 	});
+	insetColumns([blocks], padding);
 	return blocks;
 }
 /**
+* The room each of a row's hosts has, from the room across the row.
+*
+* `layout` is the one the hosts land in, `"1"` when they stack, and each
+* host takes its column's share of the row. A column set's cell pads the
+* row's edges, so its left side narrows the first column and its right the
+* last; stacked, every host sits between both.
+*/
+function hostRooms(rowRoom, layout, hostCount, setPadding) {
+	const shares = LAYOUT_SHARES[layout];
+	const edges = setPadding ?? emptyPadding$1();
+	return Array.from({ length: hostCount }, (_, index) => {
+		if (rowRoom === void 0) return void 0;
+		if (layout === "1") return rowRoom - edges.left - edges.right;
+		const share = rowRoom * shares[index] / 100;
+		const left = index === 0 ? edges.left : 0;
+		const right = index === hostCount - 1 ? edges.right : 0;
+		return share - left - right;
+	});
+}
+/**
 * Walk a `<table>` and produce Section blocks (one per row).
 *
 * @param flattenInline - When true (used for nested tables), drop the section
 *   wrapper and return the flat block list. Templatical sections cannot nest,
 *   so nested layout-tables are merged into their parent cell.
-*/
-function processTable($table, $, entries, warnings, flattenInline = false) {
+* @param enclosingFill - The fill of the wrapper rows, cells and tables this
+*   table was reached through, which its sections take when nothing nearer
+*   paints them.
+* @param room - The width, in px, a line can span where the table's blocks
+*   land: the template body's width for a table whose rows become sections,
+*   the surrounding column's for a flattened one. Unknown, a divider keeps a
+*   px width as stated.
+*/
+function processTable($table, $, entries, warnings, flattenInline = false, enclosingFill = "", room) {
 	if (!isLayoutTable($table, $)) {
 		entries.push({
 			sourceTag: "table",
@@ -1791,43 +2068,56 @@ function processTable($table, $, entries, warnings, flattenInline = false) {
 	}
 	const rows = getDirectRows($table, $);
 	if (rows.length === 0) return [];
+	const tableFill = fillOf($table) || enclosingFill;
 	const sections = [];
 	for (const $row of rows) {
 		const cells = getDirectCells($row, $);
 		if (cells.length === 0) continue;
 		const packaging = packagingRowTables($row, cells, $);
 		if (packaging) {
-			for (const $inner of packaging) sections.push(...processTable($inner, $, entries, warnings, flattenInline));
+			const carried = fillOf($row) || fillOf(cells[0]) || tableFill;
+			const wrapperPadding = readHostPadding(cells[0]);
+			const innerRoom = flattenInline ? narrow(room, wrapperPadding) : room;
+			const descended = [];
+			for (const $inner of packaging) descended.push(...processTable($inner, $, entries, warnings, flattenInline, carried, innerRoom));
+			if (flattenInline) insetColumns([descended], wrapperPadding);
+			sections.push(...descended);
 			continue;
 		}
-		const hosts = columnHostsOf(centringCells(cells) ?? cells, $);
+		const layoutCells = centringCells(cells) ?? cells;
+		const hosts = columnHostsOf(layoutCells, $);
 		const countedLayout = resolveColumnLayout(hosts.length, warnings);
+		const ratio = countedLayout === "1" || flattenInline ? {
+			layout: countedLayout,
+			note: void 0
+		} : resolveColumnRatio(hosts.map((host) => readDeclaredWidth(host.$el)), countedLayout);
+		const padding = readPaddingFromStyles(getStyles($row));
+		const setPadding = hosts[0]?.kind === "container" ? readHostPadding(layoutCells[0]) : void 0;
+		const stacked = countedLayout === "1" || flattenInline;
+		const rooms = hostRooms(flattenInline ? room : narrow(room, padding), stacked ? "1" : ratio.layout, hosts.length, setPadding);
 		let columnsBlocks;
 		if (countedLayout === "1") {
 			const merged = [];
-			for (const host of hosts) merged.push(...extractHostBlocks(host, $, entries, warnings));
+			hosts.forEach((host, index) => {
+				merged.push(...extractHostBlocks(host, $, entries, warnings, rooms[index]));
+			});
 			columnsBlocks = [merged];
-		} else columnsBlocks = hosts.map((host) => extractHostBlocks(host, $, entries, warnings));
+		} else columnsBlocks = hosts.map((host, index) => extractHostBlocks(host, $, entries, warnings, rooms[index]));
+		if (setPadding) insetColumns(flattenInline ? [columnsBlocks.flat()] : columnsBlocks, setPadding);
 		if (flattenInline) {
 			const dropped = flattenedRowEntry(hosts.length);
 			if (dropped) entries.push(dropped);
 			for (const col of columnsBlocks) sections.push(...col);
 			continue;
 		}
-		const ratio = countedLayout === "1" ? {
-			layout: countedLayout,
-			note: void 0
-		} : resolveColumnRatio(hosts.map((host) => readDeclaredWidth(host.$el)), countedLayout);
-		const rowStyles = getStyles($row);
-		const bgColor = parseColor(rowStyles["background-color"]) || parseColor(rowStyles.background);
-		const padding = readPaddingFromStyles(rowStyles);
-		entries.push(sectionEntry(hosts.length, columnsBlocks.length, ratio.note));
+		const fill = sectionFill($row, layoutCells, tableFill, $);
+		entries.push(sectionEntry(hosts.length, columnsBlocks.length, ratio.note, fill.note));
 		sections.push(createSectionBlock({
 			columns: ratio.layout,
 			children: columnsBlocks,
 			styles: {
 				padding,
-				...bgColor ? { backgroundColor: bgColor } : {}
+				...fill.color ? { backgroundColor: fill.color } : {}
 			}
 		}));
 	}
@@ -1850,7 +2140,12 @@ function readPreheader($) {
 	if (candidates.length === 0) return void 0;
 	return $(candidates[0]).text().trim() || void 0;
 }
-function extractSettings($) {
+/**
+* `linkUnderline` is what the source's stylesheet states for every link, as
+* `readLinkUnderline` reads it. A source stating nothing underlines its links,
+* which is the browser's default.
+*/
+function extractSettings($, linkUnderline) {
 	const $body = $("body");
 	const bodyStyles = parseStyleAttribute($body.attr("style"));
 	const fontFamily = parseFontFamily(bodyStyles["font-family"]) || "Arial";
@@ -1864,7 +2159,7 @@ function extractSettings($) {
 		width,
 		backgroundColor,
 		textColor: "#1a1a1a",
-		linkUnderline: false,
+		linkUnderline: linkUnderline ?? true,
 		fontFamily,
 		locale: "en",
 		...preheaderText ? { preheaderText } : {}
@@ -1902,8 +2197,11 @@ function wrapInSection(blocks, entries) {
 * level and inside a layout container reach a rich-text block. A walk over
 * `children()` visits neither, which drops copy the source email displays —
 * `Lead<h2>H</h2>Trailing` imported as the heading alone.
+*
+* `bodyWidth` is the room a line has across a top-level section, which is
+* what a divider's px width is measured against.
 */
-function processBody($, entries, warnings) {
+function processBody($, entries, warnings, bodyWidth) {
 	const blocks = [];
 	const $body = $("body");
 	let pendingLoose = [];
@@ -1937,14 +2235,14 @@ function processBody($, entries, warnings) {
 		walkContentNodes($container, $, collectLoose, ($inner, innerTag) => {
 			if (innerTag === "table") {
 				flushLoose();
-				blocks.push(...processTable($inner, $, entries, warnings, false));
+				blocks.push(...processTable($inner, $, entries, warnings, false, "", bodyWidth));
 				return;
 			}
 			if (isTableContainer($inner, innerTag)) {
 				walkContainer($inner);
 				return;
 			}
-			const r = convertElement($inner, $);
+			const r = convertElement($inner, $, bodyWidth);
 			if (r) {
 				entries.push(r.entry);
 				pendingLoose.push(r.block);
@@ -1954,7 +2252,7 @@ function processBody($, entries, warnings) {
 	walkContentNodes($body, $, collectLoose, ($child, tag) => {
 		if (tag === "table") {
 			flushLoose();
-			blocks.push(...processTable($child, $, entries, warnings, false));
+			blocks.push(...processTable($child, $, entries, warnings, false, "", bodyWidth));
 			return;
 		}
 		if ((parseStyleAttribute($child.attr("style")).display ?? "").toLowerCase() === "none") return;
@@ -1964,7 +2262,7 @@ function processBody($, entries, warnings) {
 			flushLoose();
 			return;
 		}
-		const r = convertElement($child, $);
+		const r = convertElement($child, $, bodyWidth);
 		if (r) {
 			entries.push(r.entry);
 			pendingLoose.push(r.block);
@@ -2000,17 +2298,19 @@ function convertHtmlTemplate(html) {
 	if (typeof html !== "string") throw new Error("Invalid HTML template: expected a string. Pass the raw HTML source as a string.");
 	if (html.trim().length === 0) throw new Error("Invalid HTML template: input is empty. Pass the raw HTML source of an email.");
 	const $ = load(html);
+	const linkUnderline = readLinkUnderline($);
 	resolveCssStyles($);
 	$("script, noscript, link, meta, title").remove();
 	const entries = [];
 	const warnings = [];
-	const blocks = processBody($, entries, warnings);
+	const settings = extractSettings($, linkUnderline);
+	const blocks = processBody($, entries, warnings, settings.width);
 	if (blocks.length === 0) warnings.push("No convertible content was found in the HTML. The email may use a non-table layout — modern HTML support is limited.");
 	return {
 		content: {
 			...createDefaultTemplateContent(),
 			blocks,
-			settings: extractSettings($)
+			settings
 		},
 		report: {
 			entries,