@bettercms-ai/kit 1.0.0 → 2.0.0

package/{controls → dist/controls}/rich-text/dom.js

@@ -1,5 +1,5 @@
-import { cellText, cellValue, emptyTable, isCellObject, isObjLike, normalizeTable, parseTableElement, tkey } from "../../schema/table.js";
-//#region src/kit/controls/rich-text/dom.ts
+import { boolLabels, cellText, cellValue, emptyTable, formatNumber, isCellObject, isObjLike, normalizeTable, parseTableElement, tkey, toBool, toNumber } from "../../schema/table.js";
+//#region src/controls/rich-text/dom.ts
 /**
 * RICH TEXT · DOM layer (V2 HEAD controls/rich-text/dom.ts). The field value is clean, semantic HTML; rich blocks are
 * "islands" while editing.
@@ -30,6 +30,9 @@ import { cellText, cellValue, emptyTable, isCellObject, isObjLike, normalizeTabl
 *               <div data-body><p>…` (the message is plain text: paragraphs and line breaks)
 *   toggle      `bcmsBlock` builtin:toggle {title, body}: `<details data-rt="toggle"><summary>…<div data-body><p>…`
 *   video       the `video` block {src, title}: `<div data-rt="video" data-url data-title>`
+*   embed       `bcmsBlock` builtin:video {url, title} (the package's embed: `<iframe src title>` on the page), V2's
+*               article Embed: `<figure data-rt="embed" data-url data-title><a href>…`. V2's Shape (`aspect`) has no
+*               stored key, so it is not offered: every embed draws 16:9.
 *   file        the `file` block {src, name, size}: `<div data-rt="file" data-url data-name data-size>`
 *   component   `bcmsBlock` "component" {componentId, overrides, variant} (CPO D28): `<div data-rt="component" data-ref
 *               data-id data-name data-overrides data-variant>` — a linked instance of a project component, shown as a card.
@@ -37,8 +40,8 @@ import { cellText, cellValue, emptyTable, isCellObject, isObjLike, normalizeTabl
 *               `data-detached="true" data-props data-blocks data-source-published-at`, and carries no overrides.
 * A key the stored block holds is an attribute or element that is present; a key it lacks is absent, so an untouched
 * block reads back exactly as stored.
-* V2's gallery, embed, columns, footnotes, contents, related posts and author bio have no stored form in
-* production and are not offered.
+* V2's gallery, columns, footnotes, contents, related posts and author bio have no stored form in production and are
+* not offered.
 */
 var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 var escAttr = (s) => esc(s).replace(/"/g, "&quot;");
@@ -61,6 +64,78 @@ var CALLOUT_TONES = [
 	"tip",
 	"warning"
 ];
+var hostOf = (url) => {
+	try {
+		return new URL(url).hostname.replace(/^www\./, "");
+	} catch {
+		return "";
+	}
+};
+function detectEmbed(url) {
+	const u = url.trim();
+	const host = hostOf(u);
+	const is = (re) => re.test(u);
+	if (is(/(?:youtube\.com\/(?:watch\?|embed\/|shorts\/|live\/)|youtu\.be\/)/i)) return {
+		provider: "youtube",
+		label: "YouTube",
+		shape: "frame",
+		host
+	};
+	if (is(/vimeo\.com\/(?:video\/)?\d+/i)) return {
+		provider: "vimeo",
+		label: "Vimeo",
+		shape: "frame",
+		host
+	};
+	if (is(/(?:twitter|x)\.com\/[^/]+\/status\/\d+/i)) return {
+		provider: "x",
+		label: "X post",
+		shape: "post",
+		host
+	};
+	if (is(/codepen\.io\/[^/]+\/(?:pen|embed)\//i)) return {
+		provider: "codepen",
+		label: "CodePen",
+		shape: "frame",
+		host
+	};
+	if (is(/figma\.com\/(?:file|design|proto|board)\//i)) return {
+		provider: "figma",
+		label: "Figma",
+		shape: "frame",
+		host
+	};
+	if (is(/(?:google\.[a-z.]+\/maps|maps\.app\.goo\.gl|goo\.gl\/maps)/i)) return {
+		provider: "maps",
+		label: "Google Maps",
+		shape: "frame",
+		host
+	};
+	if (is(/open\.spotify\.com\/(?:episode|track|show|playlist|album)\//i)) return {
+		provider: "spotify",
+		label: "Spotify",
+		shape: "audio",
+		host
+	};
+	if (is(/podcasts\.apple\.com\//i)) return {
+		provider: "podcast",
+		label: "Apple Podcasts",
+		shape: "audio",
+		host
+	};
+	if (is(/\.(?:mp3|m4a|wav|ogg|aac)(?:\?|$)/i)) return {
+		provider: "audio",
+		label: "Audio",
+		shape: "audio",
+		host
+	};
+	return {
+		provider: "link",
+		label: host || "Link",
+		shape: "link",
+		host
+	};
+}
 var ISLAND_KINDS = [
 	"image",
 	"table",
@@ -69,6 +144,7 @@ var ISLAND_KINDS = [
 	"callout",
 	"toggle",
 	"video",
+	"embed",
 	"file",
 	"component"
 ];
@@ -99,6 +175,10 @@ function defaultModel(kind, extra) {
 			body: ""
 		}),
 		video: () => ({ url: "" }),
+		embed: () => ({
+			url: "",
+			title: ""
+		}),
 		file: () => ({
 			url: "",
 			name: ""
@@ -178,6 +258,10 @@ function renderStatic(kind, model) {
 			const m = model;
 			return `<div data-rt="video"${attr("data-url", m.url)}${attr("data-title", m.title)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</div>`;
 		}
+		case "embed": {
+			const m = model;
+			return `<figure data-rt="embed"${attr("data-url", m.url)}${attr("data-title", m.title)}${xAttr(m.extra)}>${m.url ? `<a href="${escAttr(m.url)}">${esc(m.title || m.url)}</a>` : ""}</figure>`;
+		}
 		case "file": {
 			const m = model;
 			const link = m.url && m.name ? `<a href="${escAttr(m.url)}" download>${esc(m.name)}</a>` : "";
@@ -206,6 +290,150 @@ var isRowGroupRow = (tr) => {
 	return rows[0] === tr && rows.length > 1;
 };
 var KEY = /^[A-Za-z0-9-]{1,32}$/;
+/** The column types a rich-text table stores: V2's island offers these (table-editor.tsx:80-86 TYPE_UI, the non-dev ones). */
+var STORED_COLUMN_TYPES = [
+	"text",
+	"number",
+	"money",
+	"boolean",
+	"rating",
+	"link"
+];
+var storedType = (v) => STORED_COLUMN_TYPES.includes(v) ? v : void 0;
+/** The settings a kit column stores: none for a plain text or link column, else its type and every setting it has. */
+function columnSettings(c) {
+	const s = {
+		...c.description ? { description: c.description } : {},
+		...c.unit ? { unit: c.unit } : {},
+		...c.currency ? { currency: c.currency } : {},
+		...c.decimals != null ? { decimals: c.decimals } : {},
+		...c.align ? { align: c.align } : {},
+		...c.trueLabel ? { trueLabel: c.trueLabel } : {},
+		...c.falseLabel ? { falseLabel: c.falseLabel } : {},
+		...c.max != null ? { max: c.max } : {}
+	};
+	const type = storedType(c.type) ?? "text";
+	return type === "text" || type === "link" ? Object.keys(s).length ? {
+		type,
+		...s
+	} : void 0 : {
+		type,
+		...s
+	};
+}
+/** A `<col>`'s attributes, V2 renderTableHtml's order (schema/table.ts:511-526): the column's settings, data-sortable among them. */
+function colAttrs(c, sortable) {
+	return [
+		c ? ` data-type="${c.type ?? "text"}"` : "",
+		c?.unit ? ` data-unit="${escAttr(c.unit)}"` : "",
+		c?.currency ? ` data-currency="${escAttr(c.currency)}"` : "",
+		c?.decimals != null ? ` data-decimals="${c.decimals}"` : "",
+		c?.align ? ` data-align="${c.align}"` : "",
+		sortable ? " data-sortable=\"true\"" : "",
+		c?.trueLabel ? ` data-true="${escAttr(c.trueLabel)}"` : "",
+		c?.falseLabel ? ` data-false="${escAttr(c.falseLabel)}"` : "",
+		c?.max != null ? ` data-max="${c.max}"` : "",
+		c?.description ? ` data-description="${escAttr(c.description)}"` : ""
+	].join("");
+}
+/** A `<col data-type …>` read back, as V2 parseTableElement reads it; undefined without a data-type. */
+function colSettingsOf(col) {
+	const d = (n) => col.getAttribute(`data-${n}`) ?? void 0;
+	const type = storedType(d("type"));
+	if (!type) return void 0;
+	const int = (n, lo, hi) => {
+		const v = Number(d(n));
+		return d(n) !== void 0 && Number.isInteger(v) && v >= lo && v <= hi ? v : void 0;
+	};
+	const align = d("align");
+	return {
+		type,
+		...d("unit") ? { unit: d("unit") } : {},
+		...d("currency") && /^[A-Z]{3}$/.test(d("currency")) ? { currency: d("currency") } : {},
+		...int("decimals", 0, 10) !== void 0 ? { decimals: int("decimals", 0, 10) } : {},
+		...align === "start" || align === "center" || align === "end" ? { align } : {},
+		...d("true") ? { trueLabel: d("true") } : {},
+		...d("false") ? { falseLabel: d("false") } : {},
+		...int("max", 1, 10) !== void 0 ? { max: int("max", 1, 10) } : {},
+		...d("description") ? { description: d("description") } : {}
+	};
+}
+var NUMERIC = /* @__PURE__ */ new Set([
+	"number",
+	"money",
+	"rating"
+]);
+/** V2 alignOf (schema/table.ts:365). */
+var alignOf = (c, t) => c?.align ?? (NUMERIC.has(t) ? "end" : "start");
+var isValueType = (t) => t === "boolean" || NUMERIC.has(t);
+var asColumn = (c) => ({
+	_key: "",
+	label: "",
+	...c,
+	type: c?.type ?? "text"
+});
+/** V2 cellText for a typed cell: the words it says (what a stored typed cell's blocks hold). */
+var typedWords = (c, type, value) => value == null || value === "" ? "" : cellText(asColumn(c), void 0, {
+	value,
+	type
+});
+/**
+* What one cell of a typed table draws, as production's renderer writes it (the package's typedCellView, V2 cellHtml
+* schema/table.ts:369-437 and the column header at :564): `lead` attributes before data-label / data-highlight, `tail` after,
+* and the markup when the cell is empty or of a value type (undefined: the cell draws its own text or link).
+*/
+function typedCellView(column, rowType, cellType, value, header, inHead) {
+	if (inHead) {
+		const a = alignOf(column, column?.type ?? "text");
+		return {
+			lead: a !== "start" ? ` data-align="${a}"` : "",
+			tail: column?.description ? ` title="${escAttr(column.description)}"` : ""
+		};
+	}
+	const type = cellType ?? rowType ?? column?.type ?? "text";
+	const words = typeof value === "string" ? value.replace(/\s+/g, " ").trim() : value;
+	let tail = cellType ? ` data-type="${cellType}"` : "";
+	let inner;
+	if (words == null || words === "") {
+		inner = header ? "" : "<span aria-hidden=\"true\" class=\"bt-dash\">—</span><span class=\"bt-sr\">No value</span>";
+		tail += " data-empty=\"\"";
+	} else if (type === "boolean") {
+		const b = toBool(words);
+		if (b == null) inner = esc(String(words));
+		else {
+			const { yes, no } = boolLabels(asColumn(column));
+			inner = `<span aria-hidden="true" class="bt-bool" data-bool="${b}">${b ? "✓" : "–"}</span><span class="bt-sr">${esc(b ? yes : no)}</span>`;
+			tail += ` data-value="${b}"`;
+		}
+	} else if (type === "rating") {
+		const n = toNumber(words);
+		if (n == null) inner = esc(String(words));
+		else {
+			inner = `<span aria-hidden="true" class="bt-star">★</span> ${esc(formatNumber(n, 1).replace(/\.0$/, ""))}<span class="bt-dim"> / ${column?.max ?? 5}</span>`;
+			tail += ` data-value="${n}"`;
+		}
+	} else if (type === "number" || type === "money") {
+		const n = toNumber(words);
+		inner = esc(typedWords(column, type, words));
+		if (n != null) tail += ` data-value="${n}"`;
+	}
+	const a = alignOf(column, type);
+	if (a !== "start") tail += ` data-align="${a}"`;
+	return {
+		lead: "",
+		tail,
+		...inner === void 0 ? {} : { inner }
+	};
+}
+/** A typed cell read back (V2 readCell): data-empty is no value; data-value a number or true / false for a value type. */
+function typedValueOf(cell, type) {
+	if (cell.hasAttribute("data-empty")) return "";
+	const raw = cell.getAttribute("data-value");
+	if (raw === null || !isValueType(type)) return void 0;
+	if (type === "boolean") return raw === "true";
+	return raw.trim() !== "" && Number.isFinite(Number(raw)) ? Number(raw) : void 0;
+}
+var typeAttrOf = (el) => storedType(el.getAttribute("data-type"));
 /**
 * Production's table markup → the table value, cell for cell (renderStoredTable's inverse): the plain `<table>`, or
 * the `<figure data-rt="table">` around one with its note. The V2 reader (parseTableElement) is not used here: it reads
@@ -225,23 +453,77 @@ function parseStoredTable(src) {
 	t.headerRow = head.length > 0;
 	t.headerColumn = body.length > 0 && body.every((tr) => tr.cells[0]?.tagName === "TH");
 	t.caption = words(table.querySelector(":scope > caption"));
+	if (fig?.getAttribute("data-filter") === "true") t.filterable = true;
+	const resp = fig?.getAttribute("data-responsive");
+	if (resp === "stack" || resp === "cards") t.design = {
+		...t.design,
+		responsive: resp
+	};
+	if (fig?.getAttribute("data-sticky") === "true") t.design = {
+		...t.design,
+		sticky: true
+	};
+	const ld = fig?.getAttribute("data-jsonld");
+	if (ld === "ItemList" || ld === "Dataset" || ld === "Offers") {
+		const axis = fig?.getAttribute("data-jsonld-axis");
+		const price = fig?.getAttribute("data-jsonld-price");
+		t.jsonLd = {
+			type: ld,
+			...axis === "rows" || axis === "columns" ? { axis } : {},
+			...price ? { priceRow: price } : {}
+		};
+	}
+	const sortable = /* @__PURE__ */ new Set();
+	const settings = [];
+	let colAt = 0;
+	for (const g of Array.from(table.querySelectorAll(":scope > colgroup"))) {
+		const list = Array.from(g.querySelectorAll(":scope > col"));
+		if (!list.length) colAt += Math.max(1, Number(g.getAttribute("span")) || 1);
+		for (const col of list) {
+			const w = Math.max(1, Number(col.getAttribute("span")) || 1);
+			if (col.getAttribute("data-sortable") === "true") for (let i = 0; i < w; i++) sortable.add(colAt + i);
+			for (let i = 0; i < w; i++) settings[colAt + i] = colSettingsOf(col);
+			colAt += w;
+		}
+	}
 	t.columns = Array.from({ length: width }, (_, i) => ({
 		_key: tkey("c"),
 		label: words(headCells[i]),
-		type: "text"
+		...settings[i],
+		type: settings[i]?.type ?? "text",
+		...grid[0]?.cells[i]?.getAttribute("data-highlight") === "true" ? { highlight: true } : {},
+		...sortable.has(i) ? { sortable: true } : {}
+	}));
+	const footnoteEls = Array.from(fig?.querySelectorAll("[data-footnotes] > li") ?? []);
+	if (footnoteEls.length) t.footnotes = footnoteEls.map((li) => ({
+		_key: li.getAttribute("data-key") || tkey("f"),
+		text: words(li)
 	}));
-	const cellOf = (cell) => {
+	const cellOf = (cell, col, rowType) => {
 		if (!cell) return "";
 		const { rest: c, marks } = splitMarks(cell);
+		let mark;
+		for (const sup of Array.from(c.querySelectorAll("sup"))) {
+			const n = /-fn-(\d+)$/.exec(sup.querySelector("a")?.getAttribute("href") ?? "")?.[1];
+			if (!n) continue;
+			mark ??= Number(n);
+			sup.remove();
+		}
+		const named = cell.getAttribute("data-note") ?? (mark ? t.footnotes?.[mark - 1]?._key : void 0);
+		const note = named && t.footnotes?.some((f) => f._key === named) ? named : void 0;
+		const own = typeAttrOf(cell);
+		const typed = typedValueOf(cell, own ?? rowType ?? col.type);
 		const text = words(c);
 		const a = c.children.length === 1 && c.firstElementChild?.tagName === "A" && c.firstElementChild.textContent?.trim() === text ? c.firstElementChild : null;
-		const value = a ? {
+		const value = typed !== void 0 ? typed : a ? {
 			label: text,
 			href: a.getAttribute("href") ?? ""
 		} : text;
-		return marks ? {
+		return own || marks || note ? {
 			value,
-			marks
+			...own ? { type: own } : {},
+			...note ? { note } : {},
+			...marks ? { marks } : {}
 		} : value;
 	};
 	const groupOf = (list, own, prefix, label) => {
@@ -281,19 +563,26 @@ function parseStoredTable(src) {
 			continue;
 		}
 		if (current && current.body !== tr.parentElement) current = void 0;
+		const footer = tr.parentElement?.tagName === "TFOOT";
+		const rowType = typeAttrOf(tr);
 		t.rows.push({
 			_key: tkey("r"),
-			cells: Object.fromEntries(t.columns.map((col, i) => [col._key, cellOf(tr.cells[i])])),
-			...current ? { group: current.key } : {}
+			cells: Object.fromEntries(t.columns.map((col, i) => [col._key, cellOf(tr.cells[i], col, rowType)])),
+			...rowType ? { type: rowType } : {},
+			...current && !footer ? { group: current.key } : {},
+			...footer ? { footer: true } : {},
+			...tr.getAttribute("data-highlight") === "true" ? { highlight: true } : {}
 		});
 	}
 	if (rowGroups.length) t.rowGroups = rowGroups;
-	const note = fig?.querySelector(":scope > [data-notes]");
+	const note = fig?.querySelector(":scope > [data-notes], :scope > .bt-notes > [data-notes]");
+	const box = fig?.querySelector(":scope > .bt-notes");
 	const notes = words(note);
 	if (notes) t.notes = notes;
-	const own = (note?.getAttribute("id") ?? table.getAttribute("aria-describedby") ?? "").replace(/-notes$/, "");
+	const own = (box?.getAttribute("id") ?? note?.getAttribute("id") ?? table.getAttribute("aria-describedby") ?? "").replace(/-notes$/, "");
 	if (KEY.test(own)) t.id = own;
-	t.columns.forEach((col) => {
+	t.columns.forEach((col, i) => {
+		if (settings[i]) return;
 		const vals = t.rows.map((r) => r.cells[col._key]).filter((v) => v !== "");
 		if (vals.length && vals.every((v) => isObjLike(v))) col.type = "link";
 	});
@@ -304,19 +593,53 @@ function parseStoredTable(src) {
 * row in <thead>, header cells of the first column as <th>, every cell its text (a link cell its link). A caption, a
 * note or a group adds what that renderer writes for it, in the order the rows are held (an unedited stored table
 * comes back as it was; the editor's row list writes V2's order, loose rows first). An empty group has no row to label
-* and is not written, as production's renderer writes none.
+* and is not written, as production's renderer writes none. The totals rows are a <tfoot> after every <tbody>; a
+* highlighted row is `<tr data-highlight="true">` and a highlighted column `data-highlight="true"` on each of its cells
+* (production 0.10, the V2 table's markup). A sortable column is its `<col data-sortable="true">` (one `<col>` per column,
+* inside each column group's `<colgroup>`), and "Visitors can search rows" the figure's `data-filter="true"`.
 */
 function renderStoredTable(input) {
 	const t = normalizeTable(input);
 	const cols = t.columns;
-	const cell = (row, c) => {
+	const settings = cols.map(columnSettings);
+	const typed = settings.some(Boolean) || t.rows.some((r) => !!storedType(r.type) || Object.values(r.cells).some((c) => isCellObject(c) && !!storedType(c.type)));
+	const cell = (row, c, i, header) => {
 		const raw = row.cells[c._key];
 		const v = cellValue(raw);
 		const text = esc(cellText(c, row, raw));
 		const marks = isCellObject(raw) && typeof raw.marks === "string" ? raw.marks : "";
-		return (isObjLike(v) && typeof v.href === "string" && v.href ? `<a href="${escAttr(v.href)}">${text}</a>` : text) + marks;
+		const plain = (isObjLike(v) && typeof v.href === "string" && v.href ? `<a href="${escAttr(v.href)}">${text}</a>` : text) + marks;
+		const tag = header ? "th" : "td";
+		const fn = noted(row, c);
+		if (!typed) return `<${tag}${hi(c)}${fn.attr}>${plain}${fn.sup}</${tag}>`;
+		const view = typedCellView(settings[i], storedType(row.type), isCellObject(raw) ? storedType(raw.type) : void 0, isObjLike(v) ? cellText(c, row, raw) : v, header, false);
+		const tail = view.tail.replace(/( data-align="[^"]*")?$/, `${fn.attr}$1`);
+		return `<${tag}${view.lead}${hi(c)}${tail}>${view.inner === void 0 ? plain : view.inner + marks}${fn.sup}</${tag}>`;
 	};
-	const rowHtml = (row) => `<tr>${cols.map((c, i) => i === 0 && t.headerColumn ? `<th>${cell(row, c)}</th>` : `<td>${cell(row, c)}</td>`).join("")}</tr>`;
+	const hi = (c) => c.highlight ? " data-highlight=\"true\"" : "";
+	const fnOf = new Map((t.footnotes ?? []).map((f, i) => [f._key, i + 1]));
+	const noted = (row, c) => {
+		const raw = row.cells[c._key];
+		const key = isCellObject(raw) ? raw.note : void 0;
+		const n = key ? fnOf.get(key) : void 0;
+		return n ? {
+			attr: ` data-note="${escAttr(key)}"`,
+			sup: `<sup><a href="#${escAttr(t.id ?? "tbl")}-fn-${n}" aria-label="Note ${n}">${n}</a></sup>`
+		} : {
+			attr: "",
+			sup: ""
+		};
+	};
+	const rowHtml = (row) => `<tr${typed && storedType(row.type) ? ` data-type="${row.type}"` : ""}${row.highlight ? " data-highlight=\"true\"" : ""}>${cols.map((c, i) => cell(row, c, i, i === 0 && t.headerColumn)).join("")}</tr>`;
+	const headRow = `<tr>${cols.map((c, i) => {
+		const view = typed ? typedCellView(settings[i], void 0, void 0, void 0, true, true) : {
+			lead: "",
+			tail: ""
+		};
+		return `<th${view.lead}${hi(c)}${view.tail}>${esc(c.label)}</th>`;
+	}).join("")}</tr>`;
+	const body = t.rows.filter((r) => !r.footer);
+	const tfoot = t.rows.some((r) => r.footer) ? `<tfoot>${t.rows.filter((r) => r.footer).map(rowHtml).join("")}</tfoot>` : "";
 	const span = (name, n) => n > 1 ? ` ${name}="${n}"` : "";
 	const colLabels = new Map((t.columnGroups ?? []).map((g) => [g._key, String(g.label ?? "")]));
 	const rowLabels = new Map((t.rowGroups ?? []).map((g) => [g._key, String(g.label ?? "")]));
@@ -334,26 +657,39 @@ function renderStoredTable(input) {
 		return out.some((r) => r.key !== void 0) ? out : [];
 	};
 	const colRuns = runs(cols, (c) => c.group && colLabels.has(c.group) ? c.group : void 0);
-	const rowRuns = runs(t.rows, (r) => r.group && rowLabels.has(r.group) ? r.group : void 0);
+	const rowRuns = runs(body, (r) => r.group && rowLabels.has(r.group) ? r.group : void 0);
 	const caption = t.caption.trim();
-	const notes = [(t.notes ?? "").trim(), ...(t.footnotes ?? []).map((f, i) => f.text.trim() ? `[${i + 1}] ${f.text.trim()}` : "")].filter(Boolean).join(" ");
-	if (!caption && !notes && !colRuns.length && !rowRuns.length) {
+	const notes = (t.notes ?? "").trim();
+	const footnotes = t.footnotes ?? [];
+	const sortable = cols.some((c) => c.sortable) || settings.some(Boolean);
+	const filter = !!t.filterable;
+	const ld = t.jsonLd && t.jsonLd.type !== "none" ? t.jsonLd : null;
+	const resp = t.design?.responsive === "stack" || t.design?.responsive === "cards" ? t.design.responsive : null;
+	const sticky = !!t.design?.sticky;
+	if (!caption && !notes && !footnotes.length && !colRuns.length && !rowRuns.length && !sortable && !filter && !ld && !resp && !sticky && !typed) {
 		const out = ["<table>"];
-		if (t.headerRow) out.push(`<thead><tr>${cols.map((c) => `<th>${esc(c.label)}</th>`).join("")}</tr></thead>`);
-		out.push(`<tbody>${t.rows.map(rowHtml).join("")}</tbody></table>`);
+		if (t.headerRow) out.push(`<thead>${headRow}</thead>`);
+		out.push(`${body.length || !tfoot ? `<tbody>${body.map(rowHtml).join("")}</tbody>` : ""}${tfoot}</table>`);
 		return out.join("");
 	}
-	const notesId = notes ? `${t.id}-notes` : "";
+	const notesId = notes || footnotes.length ? `${t.id}-notes` : "";
 	const out = [`<table${notesId ? ` aria-describedby="${escAttr(notesId)}"` : ""}>`];
 	if (caption) out.push(`<caption>${esc(caption)}</caption>`);
-	out.push(colRuns.map((r) => `<colgroup${span("span", r.items.length)}></colgroup>`).join(""));
+	if (sortable) {
+		let at = 0;
+		const widths = colRuns.length ? colRuns.map((r) => r.items.length) : [cols.length];
+		out.push(widths.map((w) => `<colgroup>${cols.slice(at, at += w).map((c, k) => `<col${colAttrs(settings[at - w + k], !!c.sortable)}>`).join("")}</colgroup>`).join(""));
+	} else out.push(colRuns.map((r) => `<colgroup${span("span", r.items.length)}></colgroup>`).join(""));
 	const groupRow = colRuns.length ? `<tr>${colRuns.map((r) => r.key === void 0 ? "<td></td>".repeat(r.items.length) : `<th scope="colgroup"${span("colspan", r.items.length)} data-group="${escAttr(r.key)}">${esc(colLabels.get(r.key))}</th>`).join("")}</tr>` : "";
-	if (groupRow || t.headerRow) out.push(`<thead>${groupRow}${t.headerRow ? `<tr>${cols.map((c) => `<th>${esc(c.label)}</th>`).join("")}</tr>` : ""}</thead>`);
+	if (groupRow || t.headerRow) out.push(`<thead>${groupRow}${t.headerRow ? headRow : ""}</thead>`);
 	if (rowRuns.length) for (const r of rowRuns) out.push(`<tbody${r.key === void 0 ? "" : ` data-key="${escAttr(r.key)}"`}>${r.key === void 0 ? "" : `<tr><th scope="rowgroup"${span("colspan", cols.length)}>${esc(rowLabels.get(r.key))}</th></tr>`}${r.items.map(rowHtml).join("")}</tbody>`);
-	else if (t.rows.length) out.push(`<tbody>${t.rows.map(rowHtml).join("")}</tbody>`);
-	out.push("</table>");
+	else if (body.length) out.push(`<tbody>${body.map(rowHtml).join("")}</tbody>`);
+	out.push(`${tfoot}</table>`);
 	const html = out.join("");
-	return notes ? `<figure data-rt="table">${html}<p data-notes id="${escAttr(notesId)}">${esc(notes)}</p></figure>` : html;
+	if (!notes && !footnotes.length && !filter && !ld && !resp && !sticky) return html;
+	const designAttrs = `${resp ? ` data-responsive="${resp}"` : ""}${sticky ? " data-sticky=\"true\"" : ""}`;
+	const ldAttrs = ld ? ` data-jsonld="${ld.type}"${ld.axis ? ` data-jsonld-axis="${ld.axis}"` : ""}${ld.priceRow ? ` data-jsonld-price="${escAttr(ld.priceRow)}"` : ""}` : "";
+	return `<figure data-rt="table"${designAttrs}${filter ? " data-filter=\"true\"" : ""}${ldAttrs}>${html}${footnotes.length ? `<div class="bt-notes" id="${escAttr(notesId)}">${notes ? `<p data-notes>${esc(notes)}</p>` : ""}<ol data-footnotes>${footnotes.map((f, i) => `<li id="${escAttr(t.id ?? "tbl")}-fn-${i + 1}" data-key="${escAttr(f._key)}">${esc(f.text)}</li>`).join("")}</ol></div>` : notes ? `<p data-notes id="${escAttr(notesId)}">${esc(notes)}</p>` : ""}</figure>`;
 }
 /** The footnote markers closing a cell (`<sup data-footnote>` holding only text), and the cell without them. */
 function splitMarks(c) {
@@ -371,6 +707,7 @@ function splitMarks(c) {
 }
 /** A cell the table value can hold: text, line breaks, or one link around its text, then any footnote markers. */
 var plainCell = (cell) => {
+	if (cell.hasAttribute("data-value") || cell.hasAttribute("data-empty")) return true;
 	const c = splitMarks(cell).rest;
 	return Array.from(c.childNodes).every((n) => n.nodeType === 3 || n.nodeType === 1 && n.tagName === "BR") || c.children.length === 1 && c.firstElementChild.tagName === "A" && c.firstElementChild.children.length === 0 && (c.textContent ?? "").trim() === (c.firstElementChild.textContent ?? "").trim();
 };
@@ -469,6 +806,16 @@ function parseIsland(kind, el) {
 			if (extra) m.extra = extra;
 			return m;
 		}
+		case "embed": {
+			const m = {};
+			const url = attrOf(el, "data-url");
+			const title = attrOf(el, "data-title");
+			if (url !== void 0) m.url = url;
+			if (title !== void 0) m.title = title;
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
 		case "file": {
 			const m = {};
 			const url = attrOf(el, "data-url");
@@ -541,7 +888,7 @@ function hydrate(root) {
 		root.append(p);
 	}
 }
-var BLOCK_TAGS = new Set([
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
 	"P",
 	"H1",
 	"H2",
@@ -603,7 +950,7 @@ function sanitize(html) {
 	});
 	return doc.body.innerHTML;
 }
-var TEXT_BLOCKS = new Set([
+var TEXT_BLOCKS = /* @__PURE__ */ new Set([
 	"P",
 	"H1",
 	"H2",
@@ -665,26 +1012,8 @@ function rangeRect(r, fallback) {
 	if (rect && (rect.width || rect.height)) return rect;
 	return ((r.startContainer.nodeType === 1 ? r.startContainer : r.startContainer.parentElement) ?? fallback ?? document.body).getBoundingClientRect();
 }
-var NOT_COUNTED = "[data-rt=component],[data-rt=pullquote],[data-rt=takeaways],[data-rt=video],[data-rt=file]";
-var WORDS = (s) => s.replace(/\u200b/g, "").trim().split(/\s+/).filter(Boolean).length;
-function countWords(html) {
-	if (!html) return 0;
-	if (!/data-rt="(?:component|pullquote|takeaways|video|file)"/.test(html) || typeof DOMParser === "undefined") return WORDS(html.replace(/<\/(p|li|h[1-6]|blockquote|pre|figcaption|td|th|summary)>/g, " ").replace(/<[^>]+>/g, " ").replace(/&nbsp;|&[a-z]+;/g, " "));
-	const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
-	doc.body.querySelectorAll(NOT_COUNTED).forEach((n) => n.remove());
-	doc.body.querySelectorAll("p,li,h1,h2,h3,h4,h5,h6,td,th,figcaption,summary,pre,blockquote,div").forEach((n) => n.append(" "));
-	return WORDS(doc.body.textContent ?? "");
-}
-/** Linked component instances in the body. */
-var countComponents = (html) => (html.match(/data-rt="component"/g) ?? []).length;
-/** "1,840 words · 3 components" */
-var bodyCountLabel = (html) => {
-	const w = countWords(html);
-	const c = countComponents(html);
-	return `${w.toLocaleString("en-US")} ${w === 1 ? "word" : "words"}${c ? ` · ${c} ${c === 1 ? "component" : "components"}` : ""}`;
-};
 var isEmptyHtml = (html) => !html.replace(/<(?!img|hr|figure|table|details|div data-rt)[^>]*>/g, "").replace(/&nbsp;/g, "").trim();
 //#endregion
-export { CALLOUT_TONES, bodyCountLabel, cloneModel, closestBlock, countComponents, countWords, createIsland, defaultModel, editingHost, editorRoundTrip, esc, escAttr, hydrate, isEmptyHtml, placeCaret, rangeRect, rid, sanitize, serialize, textBeforeCaret, topBlock };
+export { CALLOUT_TONES, IMAGE_ALIGNS, IMAGE_SIZES, ISLAND_KINDS, STORED_COLUMN_TYPES, TEXT_BLOCKS, cloneModel, closestBlock, colAttrs, colSettingsOf, columnSettings, createIsland, defaultModel, detectEmbed, detectKind, editingHost, editorRoundTrip, esc, escAttr, hydrate, isEmptyHtml, isValueType, parasToText, parseIsland, parseStoredTable, placeCaret, rangeRect, renderStatic, renderStoredTable, rid, sanitize, serialize, textBeforeCaret, textToParas, topBlock, typeAttrOf, typedCellView, typedValueOf, typedWords };
 
 //# sourceMappingURL=dom.js.map