@bettercms-ai/kit 0.1.1 → 1.0.0

package/controls/rich-text/dom.js

@@ -0,0 +1,690 @@
+import { cellText, cellValue, emptyTable, isCellObject, isObjLike, normalizeTable, parseTableElement, tkey } from "../../schema/table.js";
+//#region src/kit/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.
+*
+* Live DOM  = the HTML, with every rich block swapped for a `div[data-rt-island="kind"]` (contenteditable=false) that
+*             React renders into through a portal. The island's model lives on the element (`el.__rt`).
+* Stored    = `serialize()` swaps each island back for its static HTML (`renderStatic`). The static form is the markup
+*             production's own renderer writes for the same block, so the host's ingest reads it back as that block.
+* Loading   = `hydrate()` turns that markup back into islands, so a re-mount restores them.
+*
+* Only the blocks production stores are islands here. Each one's markup is what the host's codec renders the stored
+* block as and reads back (features/dock-v2/richTextCodec.ts); `data-extra` carries, opaque, whatever of the stored block
+* the editor does not edit, so nothing it holds is dropped by an edit elsewhere.
+*   image       `bcmsBlock` builtin:image: address, alt text, caption, alignment, size, link
+*               (`<figure data-rt="image" data-align data-size><a href><img src alt></a><figcaption>`)
+*   table       production's Portable Text table (rows of cells, a header row, header cells, and the V2 table's caption,
+*               note, row groups and column groups), drawn with the kit's table editor (V2 TableBlock), stored as the markup
+*               production's renderer writes (`<caption>`, `th[scope=colgroup data-group]`, a `<tbody data-key>` per row
+*               group under a `th[scope=rowgroup]` row, `<figure data-rt="table">…<p data-notes>` for the note; footnotes
+*               fold into the note as `[1] …`, as production's ingest folds V2's). A cell's closing
+*               footnote markers (`<sup data-footnote>`) ride the cell as written (`marks`). A table whose cells hold
+*               other inline formatting the table value has no place for (a term, bold) is not an island: it stays
+*               markup in the body, edited in place, so the formatting survives.
+*   pullquote   V2 article block (CPO D55), `<figure data-rt="pullquote">` → a `pullQuote` block.
+*   takeaways   V2 article block (CPO D55), `<aside data-rt="takeaways"><p data-title>…<ul><li>…` → a `keyTakeaways` block
+*               {title?, points} (written in the text itself, V2 TakeawaysEditor).
+*   callout     `bcmsBlock` builtin:callout {tone, title, message}: `<div data-rt="callout" data-callout><p data-title>…
+*               <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>`
+*   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.
+*               A separate copy (V2 instances.ts `detach`) adds {detached, props, blocks, sourcePublishedAt}:
+*               `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.
+*/
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var escAttr = (s) => esc(s).replace(/"/g, "&quot;");
+var seq = 0;
+var rid = (p = "r") => `${p}${Date.now().toString(36)}${(seq++).toString(36)}`;
+var IMAGE_ALIGNS = [
+	"full",
+	"center",
+	"left",
+	"right"
+];
+var IMAGE_SIZES = [
+	"s",
+	"m",
+	"l",
+	"full"
+];
+var CALLOUT_TONES = [
+	"info",
+	"tip",
+	"warning"
+];
+var ISLAND_KINDS = [
+	"image",
+	"table",
+	"pullquote",
+	"takeaways",
+	"callout",
+	"toggle",
+	"video",
+	"file",
+	"component"
+];
+function defaultModel(kind, extra) {
+	const base = {
+		image: () => ({
+			src: "",
+			alt: ""
+		}),
+		table: () => emptyTable(3, 2),
+		pullquote: () => ({
+			quote: "",
+			name: "",
+			role: "",
+			link: ""
+		}),
+		takeaways: () => ({
+			title: "Key takeaways",
+			points: [""]
+		}),
+		callout: () => ({
+			tone: "info",
+			title: "",
+			body: ""
+		}),
+		toggle: () => ({
+			title: "",
+			body: ""
+		}),
+		video: () => ({ url: "" }),
+		file: () => ({
+			url: "",
+			name: ""
+		}),
+		component: () => ({
+			id: rid("ci"),
+			overrides: "{}"
+		})
+	};
+	if (kind === "table") return {
+		...base.table(),
+		...extra ?? {},
+		id: tkey("tbl")
+	};
+	return {
+		...base[kind](),
+		...extra ?? {}
+	};
+}
+/** Deep copy (Duplicate). A copied table or component instance gets its own id. */
+var cloneModel = (kind, m) => {
+	const c = JSON.parse(JSON.stringify(m));
+	if (kind === "table") c.id = tkey("tbl");
+	if (kind === "component") c.id = rid("ci");
+	return c;
+};
+/** "a\nb\n\nc" → `<p>a<br>b</p><p>c</p>`. Split on exactly one blank line, so any text reads back as written. */
+var textToParas = (s) => s.split("\n\n").map((p) => `<p>${esc(p).replace(/\n/g, "<br>")}</p>`).join("");
+/** The inverse of textToParas: each paragraph's text, its line breaks kept. */
+function parasToText(el) {
+	const ps = Array.from(el.children).filter((c) => c.tagName === "P");
+	const text = (n) => {
+		const c = n.cloneNode(true);
+		c.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
+		return (c.textContent ?? "").replace(/\u200b/g, "");
+	};
+	return ps.length ? ps.map(text).join("\n\n") : text(el);
+}
+/** An image is `<figure><img src alt></figure>`: production's renderer writes exactly this, and its ingest reads it. */
+var xAttr = (extra) => extra ? ` data-extra="${escAttr(extra)}"` : "";
+var attr = (name, v) => v === void 0 ? "" : ` ${name}="${escAttr(String(v))}"`;
+function renderStatic(kind, model) {
+	switch (kind) {
+		case "image": {
+			const m = model;
+			const img = m.src ? `<img src="${escAttr(m.src)}"${attr("alt", m.alt)}>` : "";
+			const linked = img && m.href !== void 0 ? `<a href="${escAttr(m.href)}">${img}</a>` : img;
+			const cap = m.caption !== void 0 ? `<figcaption>${esc(m.caption)}</figcaption>` : "";
+			return `<figure data-rt="image"${attr("data-align", m.align)}${attr("data-size", m.size)}${xAttr(m.extra)}>${linked}${cap}</figure>`;
+		}
+		case "table": return renderStoredTable(model);
+		case "pullquote": {
+			const m = model;
+			const name = m.name ? m.link ? `<a href="${escAttr(m.link)}" data-name>${esc(m.name)}</a>` : `<span data-name>${esc(m.name)}</span>` : "";
+			const role = m.role ? `<span data-role>${esc(m.role)}</span>` : "";
+			const cap = name || role ? `<figcaption>${name}${name && role ? ", " : ""}${role}</figcaption>` : "";
+			return `<figure data-rt="pullquote"><blockquote${m.link ? ` cite="${escAttr(m.link)}"` : ""}><p>${esc(m.quote)}</p></blockquote>${cap}</figure>`;
+		}
+		case "takeaways": {
+			const m = model;
+			const pts = m.points.map((p) => p.trim()).filter(Boolean);
+			return `<aside data-rt="takeaways">${m.title ? `<p data-title>${esc(m.title)}</p>` : ""}<ul>${pts.map((p) => `<li>${esc(p)}</li>`).join("")}</ul></aside>`;
+		}
+		case "callout": {
+			const m = model;
+			const title = m.title !== void 0 ? `<p data-title="true">${esc(m.title)}</p>` : "";
+			const body = m.body !== void 0 ? `<div data-body="true">${textToParas(m.body)}</div>` : "";
+			return `<div data-rt="callout"${attr("data-callout", m.tone)}${xAttr(m.extra)}>${title}${body}</div>`;
+		}
+		case "toggle": {
+			const m = model;
+			const title = m.title !== void 0 ? `<summary>${esc(m.title)}</summary>` : "";
+			const body = m.body !== void 0 ? `<div data-body="true">${textToParas(m.body)}</div>` : "";
+			return `<details data-rt="toggle"${xAttr(m.extra)}>${title}${body}</details>`;
+		}
+		case "video": {
+			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 "file": {
+			const m = model;
+			const link = m.url && m.name ? `<a href="${escAttr(m.url)}" download>${esc(m.name)}</a>` : "";
+			return `<div data-rt="file"${attr("data-url", m.url)}${attr("data-name", m.name)}${attr("data-size", m.size)}${xAttr(m.extra)}>${link}</div>`;
+		}
+		case "component": {
+			const m = model;
+			const label = m.name || "Component";
+			const copy = m.detached ? ` data-detached="true"${attr("data-props", m.props)}${attr("data-blocks", m.blocks)}${attr("data-source-published-at", m.sourcePublishedAt)}` : "";
+			return `<div data-rt="component"${attr("data-ref", m.ref)} data-id="${escAttr(m.id)}"${attr("data-name", m.name)}${attr("data-overrides", m.overrides)}${attr("data-variant", m.variant)}${copy}${xAttr(m.extra)}>⧉&nbsp;${esc(label)} · ${m.detached ? "detached copy" : "component"}</div>`;
+		}
+	}
+}
+var words = (el) => (el?.textContent ?? "").replace(/\s+/g, " ").trim();
+var scopeIs = (c, scope) => c.tagName === "TH" && (c.getAttribute("scope") ?? "").toLowerCase() === scope;
+/** In `<thead>`: a `th[scope=colgroup]`, every other cell an empty `<td>`. A site's own two-row header stays rows. */
+var isColumnGroupRow = (tr) => tr.parentElement?.tagName === "THEAD" && Array.from(tr.cells).some((c) => scopeIs(c, "colgroup")) && Array.from(tr.cells).every((c) => scopeIs(c, "colgroup") || c.tagName === "TD" && !words(c));
+/**
+* One `th[scope=rowgroup]` and nothing else, OPENING its own `<tbody>` with a body row after it (what production and
+* V2 write). A site's own `scope=rowgroup` row anywhere else stays a row, as production's ingest keeps it.
+*/
+var isRowGroupRow = (tr) => {
+	const body = tr.parentElement;
+	if (tr.cells.length !== 1 || !scopeIs(tr.cells[0], "rowgroup") || body?.tagName !== "TBODY") return false;
+	const rows = Array.from(body.children).filter((r) => r.tagName === "TR");
+	return rows[0] === tr && rows.length > 1;
+};
+var KEY = /^[A-Za-z0-9-]{1,32}$/;
+/**
+* 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
+* a one-column row as a row-group heading and a caption-less grid by guesses that a stored table never meant.
+*/
+function parseStoredTable(src) {
+	const fig = src.tagName === "FIGURE" ? src : null;
+	const table = fig ? fig.querySelector(":scope > table") : src;
+	const t = emptyTable(0, 0);
+	const trs = Array.from(table.querySelectorAll(":scope > thead > tr, :scope > tbody > tr, :scope > tfoot > tr, :scope > tr"));
+	const groupRow = trs.find(isColumnGroupRow);
+	const grid = trs.filter((tr) => tr !== groupRow && !isRowGroupRow(tr));
+	const head = grid.filter((tr) => tr.parentElement?.tagName === "THEAD");
+	const body = grid.filter((tr) => tr.parentElement?.tagName !== "THEAD");
+	const width = Math.max(1, ...grid.map((tr) => tr.cells.length));
+	const headCells = head.length ? Array.from(head[head.length - 1].cells) : [];
+	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"));
+	t.columns = Array.from({ length: width }, (_, i) => ({
+		_key: tkey("c"),
+		label: words(headCells[i]),
+		type: "text"
+	}));
+	const cellOf = (cell) => {
+		if (!cell) return "";
+		const { rest: c, marks } = splitMarks(cell);
+		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 ? {
+			label: text,
+			href: a.getAttribute("href") ?? ""
+		} : text;
+		return marks ? {
+			value,
+			marks
+		} : value;
+	};
+	const groupOf = (list, own, prefix, label) => {
+		const k = (own ?? "").trim();
+		const found = k ? list.find((g) => g._key === k) : void 0;
+		if (found) return found;
+		const g = {
+			_key: k && k.length <= 64 && !list.some((x) => x._key === k) ? k : tkey(prefix),
+			label
+		};
+		list.push(g);
+		return g;
+	};
+	if (groupRow) {
+		const groups = [];
+		let at = 0;
+		for (const c of Array.from(groupRow.cells)) {
+			const span = Math.max(1, c.colSpan || 1);
+			if (c.tagName === "TH") {
+				const g = groupOf(groups, c.getAttribute("data-group"), "g", words(c));
+				for (let i = at; i < at + span && i < width; i++) t.columns[i].group = g._key;
+			}
+			at += span;
+		}
+		t.columnGroups = groups;
+	}
+	const rowGroups = [];
+	let current;
+	t.rows = [];
+	for (const tr of trs) {
+		if (tr === groupRow || tr.parentElement?.tagName === "THEAD") continue;
+		if (isRowGroupRow(tr)) {
+			current = {
+				key: groupOf(rowGroups, tr.parentElement?.getAttribute("data-key") ?? null, "rg", words(tr.cells[0]))._key,
+				body: tr.parentElement
+			};
+			continue;
+		}
+		if (current && current.body !== tr.parentElement) current = void 0;
+		t.rows.push({
+			_key: tkey("r"),
+			cells: Object.fromEntries(t.columns.map((col, i) => [col._key, cellOf(tr.cells[i])])),
+			...current ? { group: current.key } : {}
+		});
+	}
+	if (rowGroups.length) t.rowGroups = rowGroups;
+	const note = fig?.querySelector(":scope > [data-notes]");
+	const notes = words(note);
+	if (notes) t.notes = notes;
+	const own = (note?.getAttribute("id") ?? table.getAttribute("aria-describedby") ?? "").replace(/-notes$/, "");
+	if (KEY.test(own)) t.id = own;
+	t.columns.forEach((col) => {
+		const vals = t.rows.map((r) => r.cells[col._key]).filter((v) => v !== "");
+		if (vals.length && vals.every((v) => isObjLike(v))) col.type = "link";
+	});
+	return t;
+}
+/**
+* The table as production's renderer writes a Portable Text table (@bettercms-ai/richtext html.ts tableHtml): a header
+* 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.
+*/
+function renderStoredTable(input) {
+	const t = normalizeTable(input);
+	const cols = t.columns;
+	const cell = (row, c) => {
+		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 rowHtml = (row) => `<tr>${cols.map((c, i) => i === 0 && t.headerColumn ? `<th>${cell(row, c)}</th>` : `<td>${cell(row, c)}</td>`).join("")}</tr>`;
+	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 ?? "")]));
+	const runs = (items, keyOf) => {
+		const out = [];
+		for (const x of items) {
+			const key = keyOf(x);
+			const last = out[out.length - 1];
+			if (last && last.key === key) last.items.push(x);
+			else out.push({
+				key,
+				items: [x]
+			});
+		}
+		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 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 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>`);
+		return out.join("");
+	}
+	const notesId = notes ? `${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(""));
+	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 (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>");
+	const html = out.join("");
+	return notes ? `<figure data-rt="table">${html}<p data-notes id="${escAttr(notesId)}">${esc(notes)}</p></figure>` : html;
+}
+/** The footnote markers closing a cell (`<sup data-footnote>` holding only text), and the cell without them. */
+function splitMarks(c) {
+	const rest = c.cloneNode(true);
+	const marks = [];
+	for (let n = rest.lastChild; n; n = rest.lastChild) if (n.nodeType === 3 && !(n.textContent ?? "").trim() && marks.length) n.remove();
+	else if (n.nodeType === 1 && n.tagName === "SUP" && n.hasAttribute("data-footnote") && !n.children.length) {
+		marks.unshift(n.outerHTML);
+		n.remove();
+	} else break;
+	return {
+		rest,
+		marks: marks.join("")
+	};
+}
+/** A cell the table value can hold: text, line breaks, or one link around its text, then any footnote markers. */
+var plainCell = (cell) => {
+	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();
+};
+function detectKind(el) {
+	const rt = el.getAttribute("data-rt");
+	if (rt === "table") return el.tagName === "TABLE" && !Array.from(el.querySelectorAll("td,th")).every(plainCell) ? null : "table";
+	if (rt && ISLAND_KINDS.includes(rt)) return rt;
+	if (el.tagName === "BLOCKQUOTE" && el.querySelector(":scope > cite")) return "pullquote";
+	if (el.tagName === "TABLE") return Array.from(el.querySelectorAll("td,th")).every(plainCell) ? "table" : null;
+	if (el.tagName === "FIGURE" && el.querySelector(":scope > table, :scope > .bt-scroll > table")) return "table";
+	if (el.tagName === "FIGURE") {
+		const kids = Array.from(el.children);
+		const media = kids.filter((k) => k.tagName !== "FIGCAPTION");
+		const m = media[0];
+		if (media.length === 1 && kids.length - media.length <= 1 && (m.tagName === "IMG" || m.tagName === "A" && m.children.length === 1 && m.firstElementChild.tagName === "IMG")) return "image";
+	}
+	return null;
+}
+var attrOf = (el, name) => el.hasAttribute(name) ? el.getAttribute(name) : void 0;
+var oneOf = (list, v) => v !== void 0 && list.includes(v) ? v : void 0;
+function parseIsland(kind, el) {
+	switch (kind) {
+		case "image": {
+			const img = el.querySelector("img");
+			const a = img?.parentElement?.tagName === "A" ? img.parentElement : null;
+			const cap = el.querySelector(":scope > figcaption");
+			const m = { src: img?.getAttribute("src") ?? "" };
+			if (img?.hasAttribute("alt")) m.alt = img.getAttribute("alt");
+			if (cap) m.caption = (cap.textContent ?? "").replace(/\u200b/g, "");
+			const align = oneOf(IMAGE_ALIGNS, attrOf(el, "data-align"));
+			const size = oneOf(IMAGE_SIZES, attrOf(el, "data-size"));
+			if (align) m.align = align;
+			if (size) m.size = size;
+			if (a) m.href = a.getAttribute("href") ?? "";
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "table":
+			if (el.matches("figure[data-rt=table]")) return el.querySelector(":scope > table") ? parseStoredTable(el) : parseTableElement(el);
+			return parseStoredTable(el.matches("table") ? el : el.querySelector("table"));
+		case "pullquote": {
+			const text = (n) => (n?.textContent ?? "").replace(/\s+/g, " ").trim();
+			const bq = el.matches("blockquote") ? el : el.querySelector("blockquote");
+			const cap = el.querySelector("figcaption");
+			const nameEl = cap?.querySelector("[data-name]") ?? el.querySelector("blockquote > cite, cite");
+			let role = text(cap?.querySelector("[data-role]") ?? null);
+			let name = text(nameEl);
+			if (!cap && name.includes(",")) [name, role] = [name.slice(0, name.indexOf(",")).trim(), name.slice(name.indexOf(",") + 1).trim()];
+			const quoteEl = bq?.cloneNode(true);
+			quoteEl?.querySelectorAll("cite").forEach((c) => c.remove());
+			return {
+				quote: text(quoteEl ?? null),
+				name,
+				role,
+				link: bq?.getAttribute("cite") ?? nameEl?.getAttribute("href") ?? ""
+			};
+		}
+		case "takeaways": {
+			const text = (n) => (n?.textContent ?? "").replace(/\s+/g, " ").trim();
+			const pts = Array.from(el.querySelectorAll("li")).map((li) => text(li));
+			return {
+				title: text(el.querySelector("[data-title]")),
+				points: pts.length ? pts : [""]
+			};
+		}
+		case "callout": {
+			const title = el.querySelector(":scope > [data-title]");
+			const body = el.querySelector(":scope > [data-body]");
+			const m = {};
+			const tone = attrOf(el, "data-callout");
+			if (tone !== void 0) m.tone = tone;
+			if (title) m.title = (title.textContent ?? "").replace(/\u200b/g, "");
+			if (body) m.body = parasToText(body);
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "toggle": {
+			const title = el.querySelector(":scope > summary");
+			const body = el.querySelector(":scope > [data-body]");
+			const m = {};
+			if (title) m.title = (title.textContent ?? "").replace(/\u200b/g, "");
+			if (body) m.body = parasToText(body);
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "video": {
+			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");
+			const name = attrOf(el, "data-name");
+			const size = attrOf(el, "data-size");
+			if (url !== void 0) m.url = url;
+			if (name !== void 0) m.name = name;
+			if (size !== void 0 && Number.isFinite(Number(size))) m.size = Number(size);
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+		case "component": {
+			const m = { id: attrOf(el, "data-id") || rid("ci") };
+			const ref = attrOf(el, "data-ref") ?? attrOf(el, "data-block");
+			const name = attrOf(el, "data-name");
+			const overrides = attrOf(el, "data-overrides");
+			if (ref !== void 0) m.ref = ref;
+			if (name !== void 0) m.name = name;
+			if (overrides !== void 0) m.overrides = overrides;
+			const variant = attrOf(el, "data-variant");
+			if (variant !== void 0) m.variant = variant;
+			if (el.getAttribute("data-detached") === "true") {
+				m.detached = true;
+				const props = attrOf(el, "data-props");
+				const blocks = attrOf(el, "data-blocks");
+				const at = attrOf(el, "data-source-published-at");
+				if (props !== void 0) m.props = props;
+				if (blocks !== void 0) m.blocks = blocks;
+				if (at !== void 0) m.sourcePublishedAt = at;
+			}
+			const extra = attrOf(el, "data-extra");
+			if (extra) m.extra = extra;
+			return m;
+		}
+	}
+}
+function createIsland(kind, model) {
+	const el = document.createElement("div");
+	el.setAttribute("data-rt-island", kind);
+	el.setAttribute("contenteditable", "false");
+	el.__rt = model;
+	return el;
+}
+/** Static block HTML → islands (top level only). Keeps a writable line after a trailing island or rule. */
+function hydrate(root) {
+	for (const ch of Array.from(root.children)) {
+		if (ch.hasAttribute("data-rt-island")) continue;
+		const k = detectKind(ch);
+		if (!k) continue;
+		ch.replaceWith(createIsland(k, parseIsland(k, ch)));
+	}
+	let run = [];
+	const flush = (before) => {
+		if (run.some((n) => (n.textContent ?? "").trim() || n.nodeType === 1 && n.tagName !== "BR")) {
+			const p = document.createElement("p");
+			root.insertBefore(p, before);
+			run.forEach((n) => p.append(n));
+		} else run.forEach((n) => n.parentNode === root && n.nodeType === 3 && root.removeChild(n));
+		run = [];
+	};
+	for (const n of Array.from(root.childNodes)) if (n.nodeType === 1 && (BLOCK_TAGS.has(n.tagName) || n.hasAttribute("data-rt-island"))) flush(n);
+	else if (n.nodeType === 1 || n.nodeType === 3) run.push(n);
+	flush(null);
+	if (!root.firstElementChild) root.innerHTML = "<p><br></p>";
+	const last = root.lastElementChild;
+	if (last && (last.hasAttribute("data-rt-island") || last.tagName === "HR")) {
+		const p = document.createElement("p");
+		p.innerHTML = "<br>";
+		root.append(p);
+	}
+}
+var BLOCK_TAGS = new Set([
+	"P",
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6",
+	"BLOCKQUOTE",
+	"PRE",
+	"UL",
+	"OL",
+	"HR",
+	"FIGURE",
+	"TABLE",
+	"DIV",
+	"DETAILS",
+	"SECTION",
+	"ASIDE",
+	"NAV"
+]);
+var isEmptyP = (el) => el.tagName === "P" && (el.innerHTML === "" || el.innerHTML === "<br>");
+/** Live DOM → stored HTML. */
+function serialize(root) {
+	const clone = root.cloneNode(true);
+	const live = Array.from(root.children);
+	Array.from(clone.children).forEach((c, i) => {
+		if (!c.hasAttribute("data-rt-island")) return;
+		const l = live[i];
+		const kind = c.getAttribute("data-rt-island");
+		const model = l.__rt;
+		if (!model) return c.remove();
+		const tpl = document.createElement("template");
+		tpl.innerHTML = renderStatic(kind, model);
+		c.replaceWith(tpl.content);
+	});
+	clone.querySelectorAll("[data-hint]").forEach((n) => n.removeAttribute("data-hint"));
+	while (clone.children.length > 1 && clone.lastElementChild && isEmptyP(clone.lastElementChild)) clone.lastElementChild.remove();
+	const html = clone.innerHTML.replace(/​/g, "");
+	return html === "<p><br></p>" || html === "<p></p>" ? "" : html;
+}
+/** The HTML exactly as the editor would store it after opening `html` (load → hydrate → serialize), with no edit. */
+function editorRoundTrip(html) {
+	const el = document.createElement("div");
+	el.innerHTML = sanitize(html || "") || "<p><br></p>";
+	hydrate(el);
+	return serialize(el);
+}
+/** Strip scripts, event handlers and script URLs from HTML we did not author (paste, Markdown, loaded values). */
+function sanitize(html) {
+	if (!/[<&]/.test(html)) return html;
+	const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+	doc.body.querySelectorAll("script,style,iframe,object,embed,link,meta,form,input,button,textarea,select,noscript").forEach((n) => n.remove());
+	doc.body.querySelectorAll("*").forEach((el) => {
+		for (const a of Array.from(el.attributes)) {
+			const n = a.name.toLowerCase();
+			if (n.startsWith("on")) el.removeAttribute(a.name);
+			else if ((n === "href" || n === "src" || n === "xlink:href") && /^\s*(javascript|vbscript|data:text)/i.test(a.value)) el.removeAttribute(a.name);
+		}
+	});
+	return doc.body.innerHTML;
+}
+var TEXT_BLOCKS = new Set([
+	"P",
+	"H1",
+	"H2",
+	"H3",
+	"H4",
+	"H5",
+	"H6",
+	"BLOCKQUOTE",
+	"PRE",
+	"LI",
+	"DIV"
+]);
+function topBlock(root, node) {
+	if (!root) return null;
+	let n = node;
+	while (n && n.parentNode !== root) n = n.parentNode;
+	return n && n.nodeType === 1 ? n : null;
+}
+/** Nearest text-ish block element around a node, inside root. */
+function closestBlock(root, node) {
+	let n = node;
+	while (n && n !== root) {
+		if (n.nodeType === 1 && TEXT_BLOCKS.has(n.tagName) && n.closest("[data-rt-island]") === null) return n;
+		n = n.parentNode;
+	}
+	return null;
+}
+function placeCaret(el, atEnd = true) {
+	const s = window.getSelection();
+	if (!s) return;
+	const r = document.createRange();
+	r.selectNodeContents(el);
+	r.collapse(!atEnd);
+	s.removeAllRanges();
+	s.addRange(r);
+}
+function textBeforeCaret(block) {
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return null;
+	const r = s.getRangeAt(0);
+	if (!block.contains(r.startContainer)) return null;
+	const pre = document.createRange();
+	pre.selectNodeContents(block);
+	pre.setEnd(r.startContainer, r.startOffset);
+	return pre.toString();
+}
+function editingHost(n) {
+	return (n ? n.nodeType === 1 ? n : n.parentElement : null)?.closest("[contenteditable=\"true\"],[contenteditable=\"plaintext-only\"]") ?? null;
+}
+/** A range's box. Browsers measure a collapsed caret as an empty rect, and some engines cannot measure ranges at all: then
+*  the box of the element the range sits in. */
+function rangeRect(r, fallback) {
+	let rect = null;
+	try {
+		rect = r.getBoundingClientRect();
+	} catch {
+		rect = null;
+	}
+	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 };
+
+//# sourceMappingURL=dom.js.map