@bettercms-ai/ui 0.20.0 → 0.22.0

package/dist/index.js

@@ -616,6 +616,16 @@ var PT_TYPES = {
   pullQuote: "pullQuote",
   /** Key takeaways — see `PortableTextKeyTakeaways`. The V2 kit's `<aside data-rt="takeaways">`. */
   keyTakeaways: "keyTakeaways",
+  /**
+   * A third-party embed (X, CodePen, Figma, Maps, Spotify, Podcasts, audio, a link card) — see
+   * `PortableTextEmbed` and `embed.ts`. The V2 kit's `<figure data-rt="embed">`. Gated by the
+   * `embed` feature; YouTube and Vimeo links still resolve here too, through the video resolver.
+   */
+  embed: "embed",
+  /** A gallery of images, a grid or a carousel — see `PortableTextGallery`. The V2 kit's `<figure data-rt="gallery">`. */
+  gallery: "gallery",
+  /** A table of contents built from the headings — see `PortableTextTableOfContents`. The V2 kit's `<nav data-rt="toc">`. */
+  tableOfContents: "tableOfContents",
   /**
    * A table. Spelled `table`, unprefixed, because that is what every other Portable Text
    * producer calls one — the Sanity-shaped `{_type:"table", rows}` this platform used to refuse
@@ -642,7 +652,10 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.video,
   PT_TYPES.file,
   PT_TYPES.pullQuote,
-  PT_TYPES.keyTakeaways
+  PT_TYPES.keyTakeaways,
+  PT_TYPES.embed,
+  PT_TYPES.gallery,
+  PT_TYPES.tableOfContents
 ]);
 var EMBEDDED_COMPONENT_KEY = "component";
 
@@ -1117,16 +1130,51 @@ function keyTakeawaysView(value) {
   return { title, points };
 }
 
-// ../richtext/src/component-copy.ts
+// ../richtext/src/gallery.ts
 var isRecord3 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
-var fieldsOf = (value) => isRecord3(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord3(value.fields) ? value.fields : null;
+var galleryMediaSrc = (raw) => safeHref(raw) ?? (raw !== "" && !raw.startsWith("//") && !/[:\s]/.test(raw) ? raw : null);
+var GALLERY_STYLES = {
+  grid: {
+    ul: "display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:1rem;list-style:none;margin:0;padding:0",
+    li: "margin:0",
+    figure: "margin:0",
+    img: "display:block;width:100%;height:auto"
+  },
+  carousel: {
+    ul: "display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0",
+    li: "flex:0 0 100%;scroll-snap-align:start;margin:0",
+    figure: "margin:0",
+    img: "display:block;width:100%;height:auto"
+  }
+};
+function galleryView(value) {
+  const v = isRecord3(value) ? value : {};
+  const layout = v.layout === "carousel" ? "carousel" : "grid";
+  const images = [];
+  (Array.isArray(v.images) ? v.images : []).forEach((item, i) => {
+    if (!isRecord3(item) || !isRecord3(item.image)) return;
+    const src = galleryMediaSrc(typeof item.image.src === "string" ? item.image.src.trim() : "");
+    if (!src) return;
+    images.push({
+      key: typeof item._key === "string" && item._key ? item._key : `i${i}`,
+      src,
+      alt: typeof item.image.alt === "string" ? item.image.alt : "",
+      caption: typeof item.caption === "string" ? item.caption.trim() : ""
+    });
+  });
+  return { layout, images };
+}
+
+// ../richtext/src/component-copy.ts
+var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var fieldsOf = (value) => isRecord4(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord4(value.fields) ? value.fields : null;
 function detachedComponentCopy(value) {
   const f = fieldsOf(value);
   if (!f || f.detached !== true || !Array.isArray(f.blocks)) return null;
   return {
-    id: isRecord3(value) && typeof value._key === "string" ? value._key : "",
+    id: isRecord4(value) && typeof value._key === "string" ? value._key : "",
     componentId: typeof f.componentId === "string" ? f.componentId : "",
-    props: isRecord3(f.props) ? f.props : {},
+    props: isRecord4(f.props) ? f.props : {},
     blocks: f.blocks,
     ...typeof f.sourcePublishedAt === "string" ? { sourcePublishedAt: f.sourcePublishedAt } : {},
     ...typeof f.variant === "string" ? { variant: f.variant } : {}
@@ -1139,7 +1187,7 @@ function componentCopyLines(copy) {
       const t = v.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim();
       return t || null;
     }
-    if (isRecord3(v)) return line(v.label ?? v.text ?? v.title);
+    if (isRecord4(v)) return line(v.label ?? v.text ?? v.title);
     return null;
   };
   return Object.values(copy.props).map(line).filter((s) => !!s);
@@ -1166,6 +1214,10 @@ function portableTextToPlainText(value) {
       lines.push(...title ? [title] : [], ...points);
       continue;
     }
+    if (node._type === PT_TYPES.gallery) {
+      lines.push(...galleryView(node).images.map((x) => x.caption).filter(Boolean));
+      continue;
+    }
     const table = migrateTable(node);
     if (table) {
       lines.push(...tableLines(table));
@@ -1204,20 +1256,57 @@ var pullQuoteLines = (v) => {
   return [text(v.quote), ...by ? [`\u2014 ${by}`] : []].filter(Boolean);
 };
 
+// ../richtext/src/toc.ts
+import { slugify } from "@bettercms-ai/types";
+var isRecord5 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var headingText = (node) => (Array.isArray(node.children) ? node.children : []).map((c) => isRecord5(c) && typeof c.text === "string" ? c.text : "").join("").replace(/​/g, "").trim();
+function outlineOf(value) {
+  const items = [];
+  const nodes = /* @__PURE__ */ new WeakMap();
+  const used = /* @__PURE__ */ new Set();
+  for (const node of Array.isArray(value) ? value : []) {
+    if (!isRecord5(node) || node._type !== "block" || node.listItem || node.style !== "h2" && node.style !== "h3") continue;
+    const text = headingText(node);
+    if (!text) continue;
+    const base = slugify(text);
+    let id = base;
+    for (let n = 2; used.has(id); n++) id = `${base}-${n}`;
+    used.add(id);
+    nodes.set(node, id);
+    items.push({ id, text, depth: node.style === "h2" ? 2 : 3 });
+  }
+  return { items, nodes };
+}
+function tocTree(items, depth) {
+  const out = [];
+  for (const it of items) {
+    if (it.depth === 3 && depth === "2") continue;
+    const last = out[out.length - 1];
+    if (it.depth === 3 && last) last.children.push(it);
+    else out.push({ ...it, children: [] });
+  }
+  return out;
+}
+function tocView(value) {
+  const v = isRecord5(value) ? value : {};
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  return { title, label: title || "Table of contents", depth: v.depth === "2" ? "2" : "3" };
+}
+
 // ../richtext/src/read.ts
-var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isRecord6 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 function normalizePortableText(value, key = randomKey) {
   if (!Array.isArray(value)) return [];
   return value.flatMap((raw) => {
-    if (!isRecord4(raw) || typeof raw._type !== "string") return [];
+    if (!isRecord6(raw) || typeof raw._type !== "string") return [];
     const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
     if (table) return [table];
-    const node = { ...raw, _key: isRecord4(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
+    const node = { ...raw, _key: isRecord6(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
     if (node._type === "block") {
       if (!Array.isArray(node.markDefs)) node.markDefs = [];
       if (typeof node.style !== "string") node.style = "normal";
       node.children = (Array.isArray(node.children) ? node.children : []).map((c) => {
-        if (!isRecord4(c)) return c;
+        if (!isRecord6(c)) return c;
         const child = { ...c, _key: typeof c._key === "string" && c._key ? c._key : key() };
         if (child._type === "span" && !Array.isArray(child.marks)) child.marks = [];
         return child;
@@ -1227,12 +1316,219 @@ function normalizePortableText(value, key = randomKey) {
   });
 }
 function readStructuredContent(props) {
-  if (!isRecord4(props)) return null;
+  if (!isRecord6(props)) return null;
   const candidate = props.content ?? props.value;
-  const arr = Array.isArray(candidate) ? candidate : isRecord4(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
+  const arr = Array.isArray(candidate) ? candidate : isRecord6(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
   return arr && arr.length > 0 ? arr : null;
 }
 
+// ../richtext/src/video.ts
+var videoId = (value) => value && /^[a-zA-Z0-9_-]{6,32}$/.test(value) ? value : null;
+function resolveVideoSource(value) {
+  if (typeof value !== "string" || !value.trim()) return null;
+  let parsed;
+  try {
+    parsed = new URL(value.trim());
+  } catch {
+    return null;
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+  const host = parsed.hostname.toLowerCase().replace(/^www\./, "");
+  let id = null;
+  if (host === "youtu.be") id = videoId(parsed.pathname.split("/").filter(Boolean)[0]);
+  if (host === "youtube.com" || host === "m.youtube.com" || host === "youtube-nocookie.com") {
+    id = videoId(
+      parsed.searchParams.get("v") ?? parsed.pathname.match(/^\/(?:embed|shorts)\/([^/?#]+)/)?.[1]
+    );
+  }
+  if (id) {
+    return {
+      kind: "iframe",
+      src: `https://www.youtube-nocookie.com/embed/${id}`,
+      provider: "YouTube"
+    };
+  }
+  if (host === "vimeo.com" || host === "player.vimeo.com") {
+    const segments = parsed.pathname.split("/").filter(Boolean);
+    let vimeoId = null;
+    for (let i = segments.length - 1; i >= 0; i -= 1) {
+      if (/^\d+$/.test(segments[i])) {
+        vimeoId = segments[i];
+        break;
+      }
+    }
+    if (vimeoId) {
+      return {
+        kind: "iframe",
+        src: `https://player.vimeo.com/video/${vimeoId}`,
+        provider: "Vimeo"
+      };
+    }
+  }
+  if (/\.(?:m4v|mp4|og[gv]|webm)$/i.test(parsed.pathname)) {
+    return { kind: "video", src: parsed.toString(), provider: "Video file" };
+  }
+  return null;
+}
+
+// ../richtext/src/embed.ts
+var EMBED_ASPECTS = ["16:9", "4:3", "1:1", "9:16"];
+var isEmbedAspect = (v) => EMBED_ASPECTS.includes(v);
+function detectEmbed(url) {
+  const u = url.trim();
+  let host = "";
+  try {
+    host = new URL(u).hostname.replace(/^www\./, "");
+  } catch {
+    host = "";
+  }
+  const is = (re) => re.test(u);
+  if (is(/(?:youtube\.com\/(?:watch\?|embed\/|shorts\/|live\/)|youtu\.be\/)/i)) return { provider: "youtube", label: "YouTube", host };
+  if (is(/vimeo\.com\/(?:video\/)?\d+/i)) return { provider: "vimeo", label: "Vimeo", host };
+  if (is(/(?:twitter|x)\.com\/[^/]+\/status\/\d+/i)) return { provider: "x", label: "X post", host };
+  if (is(/codepen\.io\/[^/]+\/(?:pen|embed)\//i)) return { provider: "codepen", label: "CodePen", host };
+  if (is(/figma\.com\/(?:file|design|proto|board)\//i)) return { provider: "figma", label: "Figma", host };
+  if (is(/(?:google\.[a-z.]+\/maps|maps\.app\.goo\.gl|goo\.gl\/maps)/i)) return { provider: "maps", label: "Google Maps", host };
+  if (is(/open\.spotify\.com\/(?:episode|track|show|playlist|album)\//i)) return { provider: "spotify", label: "Spotify", host };
+  if (is(/podcasts\.apple\.com\//i)) return { provider: "podcast", label: "Apple Podcasts", host };
+  if (is(/\.(?:mp3|m4a|wav|ogg|aac)(?:\?|$)/i)) return { provider: "audio", label: "Audio", host };
+  return { provider: "link", label: host || "Link", host };
+}
+function detectMore(url) {
+  const host = url.hostname.toLowerCase().replace(/^www\./, "");
+  const path = url.pathname;
+  if (host === "youtube-nocookie.com" && path.startsWith("/embed/")) return { provider: "youtube", label: "YouTube" };
+  if (host === "open.spotify.com" && /^\/embed\/(?:episode|track|show|playlist|album)\//.test(path)) return { provider: "spotify", label: "Spotify" };
+  if (host === "calendly.com") return { provider: "calendly", label: "Calendly" };
+  if (host.endsWith(".typeform.com") && /^\/to\//.test(path)) return { provider: "typeform", label: "Typeform" };
+  if (host === "loom.com" && /^\/(?:share|embed)\//.test(path)) return { provider: "loom", label: "Loom" };
+  if (host === "airtable.com") return { provider: "airtable", label: "Airtable" };
+  if (host === "docs.google.com") {
+    const kind = path.split("/")[1];
+    const label = { forms: "Google Forms", document: "Google Docs", spreadsheets: "Google Sheets", presentation: "Google Slides" }[kind ?? ""];
+    if (label) return { provider: "google", label };
+  }
+  return null;
+}
+var FRAME_SIZE = {
+  "16:9": ["640", "360"],
+  "4:3": ["640", "480"],
+  "1:1": ["640", "640"],
+  "9:16": ["360", "640"]
+};
+var ID = /^[A-Za-z0-9_-]{1,64}$/;
+var FULL_WIDTH_HEIGHT = { calendly: "700", typeform: "500", airtable: "533" };
+function frameOf(provider, url) {
+  const parts = url.pathname.split("/").filter(Boolean);
+  switch (provider) {
+    case "youtube":
+    case "vimeo": {
+      const video = resolveVideoSource(url.href);
+      return video?.kind === "iframe" ? { src: video.src } : null;
+    }
+    case "codepen": {
+      const [user, mode, id] = parts;
+      return user && ID.test(user) && (mode === "pen" || mode === "embed") && id && ID.test(id) ? { src: `https://codepen.io/${user}/embed/${id}?default-tab=result` } : null;
+    }
+    case "figma": {
+      const [mode, key] = parts;
+      if (!mode || !["file", "design", "proto", "board"].includes(mode) || !key || !ID.test(key)) return null;
+      const frame = new URL(`https://embed.figma.com/${mode}/${key}`);
+      const node = url.searchParams.get("node-id");
+      if (node && /^[0-9A-Za-z:_-]{1,64}$/.test(node)) frame.searchParams.set("node-id", node);
+      frame.searchParams.set("embed-host", "bettercms");
+      return { src: frame.href };
+    }
+    case "maps": {
+      if (!/^(?:www\.)?google\.[a-z.]+$/i.test(url.hostname)) return null;
+      const pb = url.searchParams.get("pb");
+      if (parts[0] === "maps" && parts[1] === "embed" && pb && /^[!A-Za-z0-9._:%+-]{1,2000}$/.test(pb)) {
+        return { src: `https://www.google.com/maps/embed?pb=${encodeURIComponent(pb)}` };
+      }
+      const at = /@(-?\d{1,3}(?:\.\d+)?),(-?\d{1,3}(?:\.\d+)?)/.exec(url.pathname);
+      const place = parts[0] === "maps" && parts[1] === "place" && parts[2] ? decodeURIComponent(parts[2]).replace(/\+/g, " ") : null;
+      const q = at ? `${at[1]},${at[2]}` : url.searchParams.get("q") ?? place;
+      if (!q || q.length > 200) return null;
+      return { src: `https://maps.google.com/maps?q=${encodeURIComponent(q)}&output=embed` };
+    }
+    case "spotify": {
+      const [type, id] = parts[0] === "embed" ? parts.slice(1) : parts;
+      if (!type || !["episode", "track", "show", "playlist", "album"].includes(type) || !id || !ID.test(id)) return null;
+      return { src: `https://open.spotify.com/embed/${type}/${id}`, height: type === "track" || type === "episode" ? "152" : "352" };
+    }
+    case "podcast":
+      return (url.hostname === "podcasts.apple.com" || url.hostname === "embed.podcasts.apple.com") && parts.length >= 2 ? { src: `https://embed.podcasts.apple.com${url.pathname}${url.search}`, height: url.searchParams.has("i") ? "175" : "450" } : null;
+    case "calendly":
+      return parts.length >= 1 && parts.length <= 2 && parts.every((p) => ID.test(p)) ? { src: `https://calendly.com/${parts.join("/")}?embed_type=Inline&hide_gdpr_banner=1` } : null;
+    case "typeform": {
+      const id = parts[0] === "to" ? parts[1] : void 0;
+      return id && /^[A-Za-z0-9]{4,32}$/.test(id) ? { src: `https://form.typeform.com/to/${id}` } : null;
+    }
+    case "loom": {
+      const id = parts[1];
+      return (parts[0] === "share" || parts[0] === "embed") && id && /^[0-9a-f]{32}$/.test(id) ? { src: `https://www.loom.com/embed/${id}` } : null;
+    }
+    case "airtable": {
+      const ids = parts[0] === "embed" ? parts.slice(1) : parts;
+      return ids.length >= 1 && ids.length <= 3 && ids.every((p) => /^(?:app|shr|tbl|viw)[A-Za-z0-9]{14}$/.test(p)) && ids.some((p) => p.startsWith("shr")) ? { src: `https://airtable.com/embed/${ids.join("/")}` } : null;
+    }
+    case "google": {
+      const [kind, d, maybeE, maybeId] = parts;
+      if (d !== "d") return null;
+      const published = maybeE === "e";
+      const id = published ? maybeId : maybeE;
+      if (!id || !/^[A-Za-z0-9_-]{10,128}$/.test(id)) return null;
+      const base = `https://docs.google.com/${kind}/d/${published ? `e/${id}` : id}`;
+      if (kind === "forms") return { src: `${base}/viewform?embedded=true`, height: "800" };
+      if (kind === "document") return { src: published ? `${base}/pub?embedded=true` : `${base}/preview`, height: "600" };
+      if (kind === "spreadsheets") return { src: published ? `${base}/pubhtml?widget=true&headers=false` : `${base}/preview`, height: "600" };
+      if (kind === "presentation") return { src: published ? `${base}/embed` : `${base}/preview` };
+      return null;
+    }
+    default:
+      return null;
+  }
+}
+var X_STATUS = /^\/([A-Za-z0-9_]{1,15})\/status\/(\d{1,25})(?:\/|$)/;
+var X_HOSTS = /^(?:www\.|mobile\.)?(?:twitter|x)\.com$/i;
+function canonicalEmbedUrl(raw) {
+  const url = typeof raw === "string" ? raw.trim() : "";
+  const safe = url ? safeHref(url) : null;
+  if (!safe || !/^https?:\/\//i.test(safe)) return null;
+  let parsed;
+  try {
+    parsed = new URL(safe);
+  } catch {
+    return null;
+  }
+  const status = X_HOSTS.test(parsed.hostname) ? X_STATUS.exec(parsed.pathname) : null;
+  if (status) return `https://x.com/${status[1].toLowerCase()}/status/${status[2]}`;
+  parsed.hash = "";
+  return parsed.href;
+}
+function resolveEmbed(rawUrl, aspect = "16:9") {
+  const url = typeof rawUrl === "string" ? rawUrl.trim() : "";
+  const v2 = detectEmbed(url);
+  const safe = url ? safeHref(url) : null;
+  let parsed = null;
+  try {
+    parsed = safe && /^https?:\/\//i.test(safe) ? new URL(safe) : null;
+  } catch {
+    parsed = null;
+  }
+  const { provider, label } = v2.provider === "link" && parsed ? detectMore(parsed) ?? v2 : v2;
+  const link = { kind: "link", provider, label, url: safe };
+  if (!parsed) return link;
+  if (provider === "x") return { kind: "card", provider: "x", label, url: canonicalEmbedUrl(parsed.href) ?? parsed.href };
+  if (provider === "audio") return parsed.protocol === "https:" ? { kind: "audio", provider: "audio", label, src: parsed.href } : link;
+  const frame = frameOf(provider, parsed);
+  if (!frame) return link;
+  const height = frame.height ?? FULL_WIDTH_HEIGHT[provider];
+  if (height) return { kind: "frame", provider, label, src: frame.src, width: "100%", height };
+  const [width, h] = FRAME_SIZE[isEmbedAspect(aspect) ? aspect : "16:9"];
+  return { kind: "frame", provider, label, src: frame.src, width, height: h };
+}
+
 // src/blocks/portableText.tsx
 import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var TOKEN = /^[a-z0-9-]+$/i;
@@ -1364,8 +1660,69 @@ function Table({ value }) {
     ] }) : notes ? /* @__PURE__ */ jsx14("p", { "data-notes": "", id: notesId, children: notes }) : null
   ] }) : table;
 }
-function buildComponents(renderBlock) {
+function CheckItem({ checked, address, children }) {
+  return /* @__PURE__ */ jsxs11("li", { ...address, "data-checked": String(checked), children: [
+    /* @__PURE__ */ jsx14("input", { type: "checkbox", disabled: true, defaultChecked: checked }),
+    children
+  ] });
+}
+function XCard({ url, card }) {
+  return /* @__PURE__ */ jsxs11("blockquote", { className: "twitter-tweet bcms-embed-card", cite: url, children: [
+    /* @__PURE__ */ jsx14("p", { children: card.text }),
+    "\u2014 ",
+    card.authorName,
+    " ",
+    /* @__PURE__ */ jsx14("a", { href: url, children: card.date || "View on X" })
+  ] });
+}
+function Toc({ value, outline }) {
+  const { title, label, depth } = tocView(value);
+  const link = (o) => /* @__PURE__ */ jsx14("a", { href: `#${o.id}`, children: o.text });
+  return /* @__PURE__ */ jsxs11("nav", { "data-rt": "toc", "data-depth": depth, "aria-label": label, children: [
+    title ? /* @__PURE__ */ jsx14("p", { "data-title": "", children: title }) : null,
+    /* @__PURE__ */ jsx14("ol", { children: tocTree(outline.items, depth).map((e) => /* @__PURE__ */ jsxs11("li", { children: [
+      link(e),
+      e.children.length ? /* @__PURE__ */ jsx14("ol", { children: e.children.map((c) => /* @__PURE__ */ jsx14("li", { children: link(c) }, c.id)) }) : null
+    ] }, e.id)) })
+  ] });
+}
+function Gallery({ value }) {
+  const { layout, images } = galleryView(value);
+  const s = GALLERY_STYLES[layout];
+  return /* @__PURE__ */ jsx14("figure", { "data-rt": "gallery", "data-layout": layout, children: /* @__PURE__ */ jsx14("ul", { style: styleObject(s.ul), tabIndex: layout === "carousel" ? 0 : void 0, children: images.map((x) => /* @__PURE__ */ jsx14("li", { style: styleObject(s.li), children: /* @__PURE__ */ jsxs11("figure", { style: styleObject(s.figure), children: [
+    /* @__PURE__ */ jsx14("img", { src: x.src, alt: x.alt, style: styleObject(s.img), loading: "lazy" }),
+    x.caption ? /* @__PURE__ */ jsx14("figcaption", { children: x.caption }) : null
+  ] }) }, x.key)) }) });
+}
+function Embed({ value, embeds }) {
+  const v = value ?? {};
+  const url = typeof v.url === "string" ? v.url.trim() : "";
+  const aspect = isEmbedAspect(v.aspect) ? v.aspect : "16:9";
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  const r = resolveEmbed(url, aspect);
+  const label = title || r.label;
+  const card = r.kind === "card" ? embeds.cards?.[r.url] : void 0;
+  let body = null;
+  if (r.kind === "frame") {
+    body = /* @__PURE__ */ jsx14("iframe", { src: r.src, title: label, width: r.width, height: r.height, loading: "lazy", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true });
+  } else if (r.kind === "audio") {
+    body = /* @__PURE__ */ jsx14("audio", { controls: true, preload: "none", src: r.src, title: label });
+  } else if (r.kind === "card" && card) {
+    body = /* @__PURE__ */ jsx14(XCard, { url: r.url, card });
+  } else if (r.url) {
+    body = /* @__PURE__ */ jsx14("a", { href: r.url, children: label });
+  }
+  return /* @__PURE__ */ jsx14("figure", { "data-rt": "embed", "data-url": url, "data-provider": r.provider, "data-aspect": aspect, "aria-label": title, children: body });
+}
+function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes: /* @__PURE__ */ new WeakMap() }) {
   return {
+    // RT5: every top-level h2 and h3 carries its outline id, as html.ts writes it.
+    block: {
+      h2: ({ value, children }) => /* @__PURE__ */ jsx14("h2", { id: outline.nodes.get(value), children }),
+      h3: ({ value, children }) => /* @__PURE__ */ jsx14("h3", { id: outline.nodes.get(value), children })
+    },
+    list: { check: ({ children }) => /* @__PURE__ */ jsx14("ul", { "data-task": "true", children }) },
+    listItem: { check: ({ value, children }) => /* @__PURE__ */ jsx14(CheckItem, { checked: value.checked === true, children }) },
     types: {
       [PT_TYPES.divider]: () => /* @__PURE__ */ jsx14("hr", {}),
       [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx14(Table, { value }),
@@ -1415,6 +1772,9 @@ function buildComponents(renderBlock) {
           ] }) : null
         ] });
       },
+      [PT_TYPES.embed]: ({ value }) => /* @__PURE__ */ jsx14(Embed, { value, embeds }),
+      [PT_TYPES.gallery]: ({ value }) => /* @__PURE__ */ jsx14(Gallery, { value }),
+      [PT_TYPES.tableOfContents]: ({ value }) => /* @__PURE__ */ jsx14(Toc, { value, outline }),
       /**
        * Key takeaways — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
        * `<aside data-rt="takeaways">`, read through the one `keyTakeawaysView` both renderers share.
@@ -1442,7 +1802,7 @@ function buildComponents(renderBlock) {
         const href = typeof v.href === "string" ? safeHref(v.href) : null;
         if (!href) return /* @__PURE__ */ jsx14(Fragment2, { children });
         const blank = v.target === "_blank";
-        return /* @__PURE__ */ jsx14("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
+        return /* @__PURE__ */ jsx14("a", { ...v.button === true ? { "data-button": "true" } : {}, href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
       },
       /**
        * The site's own inline markup, rendered as itself — the React half of
@@ -1531,15 +1891,22 @@ function calloutOrToggle(value) {
   }
   return null;
 }
-function PortableText({ value, bindingBase, renderBlock }) {
+function PortableText({ value, bindingBase, renderBlock, embeds }) {
   const blocks = React6.useMemo(() => normalizePortableText(readValue(value)), [value]);
-  const components = React6.useMemo(() => buildComponents(renderBlock), [renderBlock]);
+  const outline = React6.useMemo(() => outlineOf(blocks), [blocks]);
+  const components = React6.useMemo(() => buildComponents(renderBlock, embeds, outline), [renderBlock, embeds, outline]);
   const listComponents = React6.useMemo(() => {
     if (!bindingBase) return null;
     const keys = new Set(blocks.map((b) => b._key));
     return {
       ...components,
-      listItem: ({ value: item, children }) => keys.has(item._key) ? /* @__PURE__ */ jsx14("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx14("li", { children })
+      listItem: ({ value: item, children }) => {
+        const address = keys.has(item._key) ? { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext" } : void 0;
+        if (item.listItem === "check") {
+          return /* @__PURE__ */ jsx14(CheckItem, { checked: item.checked === true, address, children });
+        }
+        return /* @__PURE__ */ jsx14("li", { ...address, children });
+      }
     };
   }, [bindingBase, blocks, components]);
   if (blocks.length === 0) return null;