@bettercms-ai/ui 0.6.0 → 0.7.0

package/dist/renderer.js

@@ -30,42 +30,420 @@ function Heading({
 
 // src/blocks/portableText.tsx
 import React from "react";
-import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
-var MARK_TAGS = {
-  strong: "strong",
-  em: "em",
-  underline: "u",
-  "strike-through": "s",
-  code: "code"
+import { PortableText as PT } from "@portabletext/react";
+
+// ../richtext/src/types.ts
+var PT_TYPES = {
+  /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
+  block: "bcmsBlock",
+  /** An inline mention. A PT inline object is natively void, which is what Lexical's `token` mode was faking. */
+  mention: "bcmsMention",
+  divider: "bcmsDivider",
+  code: "bcmsCode",
+  /**
+   * 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
+   * as foreign content now lands on OUR type and renders, rather than being data nothing draws.
+   */
+  table: "table",
+  /** The annotation carrying a hyperlink's `href`. Spelled `link` because that is the spec's convention. */
+  link: "link",
+  /**
+   * The annotation carrying a site's OWN inline markup — `<span class>`, `<small>`, `<time
+   * datetime>`. Unprefixed, like `table`, because it describes HTML rather than a BetterCMS
+   * concept. See `styled.ts` for what it may hold and why the list is that short.
+   */
+  styled: "styled"
 };
-var BLOCK_TAGS = {
-  normal: "p",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  blockquote: "blockquote"
+var BUILTIN_TABLE_KEY = "builtin:table";
+var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
+  "block",
+  PT_TYPES.block,
+  PT_TYPES.table,
+  PT_TYPES.code,
+  PT_TYPES.divider,
+  PT_TYPES.mention
+]);
+
+// ../richtext/src/styled.ts
+var STYLED_TAGS = ["span", "small", "sup", "sub", "kbd", "abbr", "time"];
+var TAG_SET = new Set(STYLED_TAGS);
+var isStyledTag = (tag) => typeof tag === "string" && TAG_SET.has(tag);
+var ATTR_NAMES = /* @__PURE__ */ new Set(["title", "datetime", "style", "aria-label"]);
+var DATA_ATTR = /^data-[a-z][a-z0-9-]*$/;
+var isStyledAttr = (name) => ATTR_NAMES.has(name) || DATA_ATTR.test(name) && !name.startsWith("data-bcms-");
+var STYLE_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background-color",
+  "opacity",
+  "font",
+  "font-family",
+  "font-size",
+  "font-style",
+  "font-weight",
+  "font-variant",
+  "font-feature-settings",
+  "font-variation-settings",
+  "letter-spacing",
+  "line-height",
+  "word-spacing",
+  "white-space",
+  "word-break",
+  "text-align",
+  "text-decoration",
+  "text-decoration-color",
+  "text-decoration-line",
+  "text-decoration-style",
+  "text-transform",
+  "text-underline-offset",
+  "vertical-align"
+]);
+var STYLE_VALUE_BAN = /url\(|expression\(|@import|\\|\/\*|[<>]/i;
+function safeStyle(css) {
+  const kept = [];
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim().toLowerCase();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    if (!name.startsWith("--") && !STYLE_PROPS.has(name)) continue;
+    if (STYLE_VALUE_BAN.test(value)) continue;
+    kept.push(`${name}:${value}`);
+  }
+  return kept.length ? kept.join(";") : void 0;
+}
+function styledAttrEntries(attrs) {
+  if (!attrs || typeof attrs !== "object" || Array.isArray(attrs)) return [];
+  const out = [];
+  for (const [name, raw] of Object.entries(attrs)) {
+    if (!isStyledAttr(name) || typeof raw !== "string") continue;
+    const value = name === "style" ? safeStyle(raw) : raw;
+    if (value === void 0) continue;
+    out.push([name, value]);
+  }
+  return out;
+}
+
+// ../richtext/src/href.ts
+var SAFE_HREF_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
+function safeHref(raw) {
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) return trimmed;
+  try {
+    return SAFE_HREF_SCHEMES.includes(new URL(trimmed).protocol) ? trimmed : null;
+  } catch {
+    return null;
+  }
+}
+
+// ../richtext/src/key.ts
+var ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+var KEY_PATTERN = /^[A-Za-z0-9-]{1,32}$/;
+var isValidKey = (k) => typeof k === "string" && KEY_PATTERN.test(k);
+function randomKey(length = 12) {
+  let out = "";
+  for (let i = 0; i < length; i += 1) {
+    out += ALPHABET[Math.floor(Math.random() * ALPHABET.length)];
+  }
+  return out;
+}
+function deterministicKeys(prefix = "k") {
+  let n = 0;
+  return () => {
+    n += 1;
+    return `${prefix}${n}`;
+  };
+}
+
+// ../richtext/src/table.ts
+var isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isPortableTextTable = (n) => isRecord(n) && n._type === PT_TYPES.table && Array.isArray(n.rows);
+var isBuiltInTableBlock = (n) => isRecord(n) && n._type === PT_TYPES.block && n.schemaKey === BUILTIN_TABLE_KEY;
+var asIs = (v) => Array.isArray(v) ? v : [];
+function keyMinter(base, reserved) {
+  const prefix = (base.match(/[A-Za-z0-9-]/g) ?? []).join("").slice(0, 16) || "t";
+  return (...parts) => {
+    const candidate = `${prefix}-${parts.join("")}`.slice(0, 30);
+    let key = candidate;
+    for (let n = 1; reserved.has(key); n += 1) key = `${candidate}-${n}`;
+    reserved.add(key);
+    return key;
+  };
+}
+function reservedKeys(rows) {
+  const out = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    if (!isRecord(row)) continue;
+    if (isValidKey(row._key)) out.add(row._key);
+    for (const cell of Array.isArray(row.cells) ? row.cells : []) {
+      if (isRecord(cell) && isValidKey(cell._key)) out.add(cell._key);
+    }
+  }
+  return out;
+}
+var textContent = (text, key) => text === "" ? [] : [{
+  _type: "block",
+  _key: key(),
+  style: "normal",
+  markDefs: [],
+  children: [{ _type: "span", _key: key(), text, marks: [] }]
+}];
+var spanOf = (value) => {
+  const n = typeof value === "number" ? value : Number(value);
+  return Number.isInteger(n) && n > 1 ? n : void 0;
 };
-function Span({ node, index }) {
-  const marks = node.marks ?? [];
-  const colour = marks.find((m) => m.startsWith("color:"))?.slice("color:".length);
-  let out = node.text ?? "";
-  for (const m of marks) {
-    const Tag = MARK_TAGS[m];
-    if (Tag) out = /* @__PURE__ */ jsx2(Tag, { children: out });
+function normalizeCell(raw, at, mint, read) {
+  const [row, col] = at;
+  const key = isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", row, "c", col);
+  const inner = deterministicKeys(`${key}-`);
+  if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
+    return { _key: key, content: textContent(String(raw), inner) };
+  }
+  if (!isRecord(raw)) return { _key: key, content: [] };
+  const span = spanOf(raw.span ?? raw.colSpan ?? raw.colspan);
+  const rowSpan = spanOf(raw.rowSpan ?? raw.rowspan);
+  return {
+    _key: key,
+    // `text` is the spelling a string matrix uses once its cells have been given objects; it is
+    // read here so a half-migrated value cannot lose its words.
+    content: Array.isArray(raw.content) ? read(raw.content, inner) : textContent(typeof raw.text === "string" ? raw.text : "", inner),
+    ...raw.header === true ? { header: true } : {},
+    ...span === void 0 ? {} : { span },
+    ...rowSpan === void 0 ? {} : { rowSpan }
+  };
+}
+function normalizeRow(raw, at, mint, read) {
+  const cells = Array.isArray(raw) ? raw : isRecord(raw) && Array.isArray(raw.cells) ? raw.cells : [];
+  return {
+    _key: isRecord(raw) && isValidKey(raw._key) ? raw._key : mint("r", at),
+    cells: cells.map((c, col) => normalizeCell(c, [at, col], mint, read)),
+    ...isRecord(raw) && raw.head === true ? { head: true } : {}
+  };
+}
+function builtInTableToTable(node, key = randomKey) {
+  if (!isBuiltInTableBlock(node)) return null;
+  const fields = node.fields;
+  const raw = isRecord(fields) && Array.isArray(fields.rows) ? fields.rows : [];
+  const hasHeader = isRecord(fields) ? fields.hasHeader !== false : true;
+  const own = node._key;
+  const tableKey = isValidKey(own) ? own : key();
+  const mint = keyMinter(tableKey, reservedKeys(raw));
+  const rows = raw.map((row, i) => {
+    const normalized = normalizeRow(row, i, mint, asIs);
+    if (!(hasHeader && i === 0)) return normalized;
+    return {
+      ...normalized,
+      head: true,
+      cells: normalized.cells.map((c) => ({ ...c, header: true }))
+    };
+  });
+  const width = rows.reduce((max, r) => Math.max(max, r.cells.length), 0);
+  for (const [i, row] of rows.entries()) {
+    while (row.cells.length < width) {
+      row.cells.push({
+        _key: mint("r", i, "c", row.cells.length),
+        content: [],
+        ...row.head === true ? { header: true } : {}
+      });
+    }
   }
-  if (colour && /^[a-z0-9-]+$/i.test(colour)) {
-    out = /* @__PURE__ */ jsx2("span", { className: `bcms-color-${colour}`, children: out });
+  return { _type: PT_TYPES.table, _key: tableKey, rows, legacy: true };
+}
+function migrateTable(node, key = randomKey, read = asIs) {
+  const builtIn = builtInTableToTable(node, key);
+  if (builtIn) return builtIn;
+  if (!isPortableTextTable(node)) return null;
+  const rows = node.rows;
+  const tableKey = isValidKey(node._key) ? node._key : key();
+  const mint = keyMinter(tableKey, reservedKeys(rows));
+  return {
+    _type: PT_TYPES.table,
+    _key: tableKey,
+    rows: rows.map((r, i) => normalizeRow(r, i, mint, read)),
+    // Carried through: a migrated table that an author saves back is still the same table, and
+    // dropping the flag on that save would change the page the next time it renders.
+    ...node.legacy === true ? { legacy: true } : {}
+  };
+}
+
+// ../richtext/src/read.ts
+var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function normalizePortableText(value, key = randomKey) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((raw) => {
+    if (!isRecord2(raw) || typeof raw._type !== "string") return [];
+    const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
+    if (table) return [table];
+    const node = { ...raw, _key: isRecord2(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 (!isRecord2(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;
+      });
+    }
+    return [node];
+  });
+}
+function readStructuredContent(props) {
+  if (!isRecord2(props)) return null;
+  const candidate = props.content ?? props.value;
+  const arr = Array.isArray(candidate) ? candidate : isRecord2(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
+  return arr && arr.length > 0 ? arr : null;
+}
+
+// src/blocks/portableText.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TOKEN = /^[a-z0-9-]+$/i;
+function styleObject(css) {
+  const out = {};
+  for (const declaration of css.split(";")) {
+    const at = declaration.indexOf(":");
+    if (at < 0) continue;
+    const name = declaration.slice(0, at).trim();
+    const value = declaration.slice(at + 1).trim();
+    if (!name || !value) continue;
+    out[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = value;
   }
-  return /* @__PURE__ */ jsx2(React.Fragment, { children: out }, node._key ?? index);
+  return out;
 }
-function PortableText({ doc }) {
-  return /* @__PURE__ */ jsx2(Fragment, { children: doc.content.map((block, i) => {
-    const Tag = BLOCK_TAGS[block.style ?? "normal"] ?? "p";
-    return /* @__PURE__ */ jsx2(Tag, { children: (block.children ?? []).map((c, j) => /* @__PURE__ */ jsx2(Span, { node: c, index: j }, c._key ?? j)) }, block._key ?? i);
-  }) });
+function Bound({
+  base,
+  nodeKey,
+  children
+}) {
+  if (!base || !nodeKey) return /* @__PURE__ */ jsx2(Fragment, { children });
+  return /* @__PURE__ */ jsx2("div", { "data-bcms-field": `${base}#${nodeKey}`, "data-bcms-kind": "richtext", children });
+}
+function Table({ value }) {
+  const components = React.useMemo(buildComponents, []);
+  const inline = React.useMemo(
+    () => ({ ...components, block: { normal: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }) } }),
+    [components]
+  );
+  const rows = Array.isArray(value?.rows) ? value.rows : [];
+  if (rows.length === 0) return null;
+  const cells = (row) => (Array.isArray(row?.cells) ? row.cells : []).map((cell) => {
+    const Tag = cell?.header === true ? "th" : "td";
+    const span = typeof cell?.span === "number" && cell.span > 1 ? cell.span : void 0;
+    const rowSpan = typeof cell?.rowSpan === "number" && cell.rowSpan > 1 ? cell.rowSpan : void 0;
+    const content = Array.isArray(cell?.content) ? cell.content : [];
+    const lone = content.length === 1 && content[0]._type === "block" && content[0].style === "normal" && !content[0].listItem;
+    return /* @__PURE__ */ jsx2(Tag, { ...span ? { colSpan: span } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx2(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
+  });
+  const rendered = rows.map((row) => /* @__PURE__ */ jsx2("tr", { children: cells(row) }, row?._key));
+  const headCount = rows.findIndex((r) => r?.head !== true);
+  const head = headCount === -1 ? rows.length : headCount;
+  return /* @__PURE__ */ jsxs("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, children: [
+    head > 0 && /* @__PURE__ */ jsx2("thead", { children: rendered.slice(0, head) }),
+    head < rows.length && /* @__PURE__ */ jsx2("tbody", { children: rendered.slice(head) })
+  ] });
+}
+function buildComponents() {
+  return {
+    types: {
+      [PT_TYPES.divider]: () => /* @__PURE__ */ jsx2("hr", {}),
+      [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx2(Table, { value }),
+      [PT_TYPES.code]: ({ value }) => {
+        const v = value;
+        const lang = typeof v.language === "string" && TOKEN.test(v.language) ? v.language : void 0;
+        return /* @__PURE__ */ jsx2("pre", { children: /* @__PURE__ */ jsx2("code", { className: lang ? `language-${lang}` : void 0, children: typeof v.code === "string" ? v.code : "" }) });
+      },
+      /**
+       * A generic embedded block renders as a marker, not as content: its payload references
+       * something (a component, a media id) that has to be RESOLVED against the project, and
+       * this renderer has no project. A marker keeps the node visible and addressable rather
+       * than rendering nothing at all, which is how embedded content used to vanish.
+       */
+      [PT_TYPES.block]: ({ value }) => {
+        const v = value;
+        const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
+        return /* @__PURE__ */ jsx2("div", { className: "bcms-block", "data-bcms-schema-key": key });
+      },
+      [PT_TYPES.mention]: ({ value }) => {
+        const v = value;
+        return /* @__PURE__ */ jsx2("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
+      }
+    },
+    marks: {
+      /**
+       * The only attribute this renderer writes from author data. An unsafe href renders the
+       * LABEL rather than deleting it — blocking a link must not lose the words.
+       */
+      [PT_TYPES.link]: ({ value, children }) => {
+        const v = value ?? {};
+        const href = typeof v.href === "string" ? safeHref(v.href) : null;
+        if (!href) return /* @__PURE__ */ jsx2(Fragment, { children });
+        const blank = v.target === "_blank";
+        return /* @__PURE__ */ jsx2("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
+      },
+      /**
+       * The site's own inline markup, rendered as itself — the React half of
+       * `portableTextToHtml`'s `styled` mark, and it has to stay the same shape: Astro and the
+       * editor canvas render through that serialiser while a Next site renders through this
+       * one, and two renderers of one value that disagree is the whole bug class.
+       *
+       * The tag is re-checked against `STYLED_TAGS` and the attribute bag re-filtered, because
+       * a markDef is DATA and arrives from imports, the Management API and AI writes. React
+       * escapes the values it writes; the allowlist is what keeps a `href` or an `onClick` out
+       * of the props entirely. An unrecognised tag renders its CHILDREN — the words are the
+       * author's, the wrapper is only the design.
+       */
+      [PT_TYPES.styled]: ({ value, children }) => {
+        const v = value ?? {};
+        const tag = typeof v.tag === "string" ? v.tag.toLowerCase() : "";
+        if (!isStyledTag(tag)) return /* @__PURE__ */ jsx2(Fragment, { children });
+        const Tag = tag;
+        const className = typeof v.className === "string" && v.className ? v.className : void 0;
+        const attrs = styledAttrEntries(v.attrs);
+        const style = attrs.find(([name]) => name === "style")?.[1];
+        return /* @__PURE__ */ jsx2(
+          Tag,
+          {
+            className,
+            ...Object.fromEntries(attrs.filter(([name]) => name !== "style")),
+            ...style ? { style: styleObject(style) } : {},
+            children
+          }
+        );
+      },
+      highlight: ({ children }) => /* @__PURE__ */ jsx2("mark", { children }),
+      "strike-through": ({ children }) => /* @__PURE__ */ jsx2("s", { children }),
+      /**
+       * A colour mark carries a TOKEN name (`color:brand-accent`), never a baked hex, so the
+       * consuming site styles it and a rebrand does not orphan the content.
+       */
+      color: ({ children, markType }) => {
+        const token = markType.startsWith("color:") ? markType.slice(6) : "";
+        if (!TOKEN.test(token)) return /* @__PURE__ */ jsx2(Fragment, { children });
+        return /* @__PURE__ */ jsx2("span", { className: `bcms-color-${token}`, children });
+      }
+    },
+    /** Unknown marks and types render their children. Never swallow content. */
+    unknownMark: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children }),
+    unknownType: ({ children }) => /* @__PURE__ */ jsx2(Fragment, { children: children ?? null }),
+    unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx2("p", { children })
+  };
+}
+function PortableText({ value, bindingBase }) {
+  const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
+  const components = React.useMemo(buildComponents, []);
+  if (blocks.length === 0) return null;
+  if (!bindingBase) return /* @__PURE__ */ jsx2(PT, { value: blocks, components });
+  return /* @__PURE__ */ jsx2(Fragment, { children: blocks.map((node) => /* @__PURE__ */ jsx2(Bound, { base: bindingBase, nodeKey: node._key, children: /* @__PURE__ */ jsx2(PT, { value: [node], components }) }, node._key)) });
+}
+function readValue(value) {
+  if (Array.isArray(value)) return value;
+  if (value && typeof value === "object") {
+    const o = value;
+    if (Array.isArray(o.value)) return o.value;
+    if (Array.isArray(o.content)) return o.content;
+  }
+  return [];
 }
 
 // src/blocks/Text.tsx
@@ -84,16 +462,16 @@ function Text({
     right: "text-right"
   }[align];
   const cls = `text-muted-foreground leading-relaxed ${alignClass} ${className}`;
-  if (content && content.content.length > 0) {
-    return /* @__PURE__ */ jsx3("div", { className: cls, children: /* @__PURE__ */ jsx3(PortableText, { doc: content }) });
-  }
+  const structured = readStructuredContent({ content });
   return /* @__PURE__ */ jsx3(
     "div",
     {
       className: cls,
-      "data-bcms-field": field,
-      "data-bcms-kind": kind,
-      dangerouslySetInnerHTML: { __html: html }
+      ...structured ? {} : { "data-bcms-field": field, "data-bcms-kind": kind },
+      children: structured ? /* @__PURE__ */ jsx3(PortableText, { value: structured, bindingBase: field }) : (
+        // eslint-disable-next-line react/no-danger
+        /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: html } })
+      )
     }
   );
 }
@@ -106,7 +484,7 @@ function cn(...inputs) {
 }
 
 // src/blocks/Image.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Image({
   src,
   alt,
@@ -118,7 +496,7 @@ function Image({
   "data-bcms-field": field,
   "data-bcms-kind": kind
 }) {
-  return /* @__PURE__ */ jsxs("figure", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs2("figure", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx4(
       "img",
       {
@@ -171,7 +549,7 @@ function Button({
 }
 
 // src/blocks/Spacer.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function Spacer({ height = 32, className = "" }) {
   return /* @__PURE__ */ jsx6(
     "div",
@@ -179,7 +557,7 @@ function Spacer({ height = 32, className = "" }) {
       className: `w-full border border-dashed border-muted-foreground/20 rounded flex items-center justify-center ${className}`,
       style: { height: `${height}px` },
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxs2("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
+      children: /* @__PURE__ */ jsxs3("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
         height,
         "px"
       ] })
@@ -211,7 +589,7 @@ function Columns({
 
 // src/blocks/Video.tsx
 import { useState } from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function getEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
@@ -254,7 +632,7 @@ function Video({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
+  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
     !isLoaded && poster && // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ jsx8(
       "img",
@@ -301,9 +679,9 @@ function Section({
 }
 
 // src/blocks/Navbar.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function Navbar({ logo, links, cta, className = "" }) {
-  return /* @__PURE__ */ jsxs4("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
+  return /* @__PURE__ */ jsxs5("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
     logo?.src ? /* @__PURE__ */ jsx10("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx10("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
     /* @__PURE__ */ jsx10("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx10("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
     cta ? /* @__PURE__ */ jsx10(
@@ -318,10 +696,10 @@ function Navbar({ logo, links, cta, className = "" }) {
 }
 
 // src/blocks/Footer.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function Footer({ columns, copyright, className = "" }) {
-  return /* @__PURE__ */ jsxs5("footer", { className: cn("mt-12 border-t pt-8", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1.5", children: [
+  return /* @__PURE__ */ jsxs6("footer", { className: cn("mt-12 border-t pt-8", className), children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
       col.heading ? /* @__PURE__ */ jsx11("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
       (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx11("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
     ] }, i)) }),
@@ -331,13 +709,13 @@ function Footer({ columns, copyright, className = "" }) {
 
 // src/blocks/Slider.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function Slider({ slides, className = "", renderBlock }) {
   const [i, setI] = useState2(0);
   const list = slides ?? [];
   const go = (n) => setI((n + list.length) % (list.length || 1));
   const btn = "absolute top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border-0 bg-black/50 text-white cursor-pointer";
-  return /* @__PURE__ */ jsxs6("div", { className: cn("relative w-full", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cn("relative w-full", className), children: [
     list.map((s, idx) => /* @__PURE__ */ jsx12("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx12("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
     /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
     /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
@@ -346,11 +724,11 @@ function Slider({ slides, className = "", renderBlock }) {
 
 // src/blocks/Tabs.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tabs({ tabs, className = "", renderBlock }) {
   const [active, setActive] = useState3(0);
   const list = tabs ?? [];
-  return /* @__PURE__ */ jsxs7("div", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx13("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx13(
       "button",
       {
@@ -371,19 +749,19 @@ function Tabs({ tabs, className = "", renderBlock }) {
 }
 
 // src/blocks/Placeholders.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var box = "rounded border border-dashed border-neutral-300 bg-neutral-50 p-4 text-sm text-neutral-500";
 function ComponentInstance({
   componentId,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
     "Component instance: ",
     /* @__PURE__ */ jsx14("code", { children: componentId })
   ] });
 }
 function FormPlaceholder({ formId, className = "" }) {
-  return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
     "Form: ",
     /* @__PURE__ */ jsx14("code", { children: formId })
   ] });
@@ -392,9 +770,9 @@ function CollectionPlaceholder({
   cardComponentId,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
     "Collection: entries of this page",
-    cardComponentId ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    cardComponentId ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
       " as ",
       /* @__PURE__ */ jsx14("code", { children: cardComponentId })
     ] }) : /* @__PURE__ */ jsx14(Fragment2, { children: " (default card)" })
@@ -499,7 +877,7 @@ function blockStyleToReactStyle(style) {
 
 // src/renderer.tsx
 import "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
 function bindingProps(block, annotate) {
   if (!annotate || !block.id) return {};
@@ -519,7 +897,7 @@ function bindingProps(block, annotate) {
 function resolveBlock(block, className, annotate = false) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className ?? ""}`,
@@ -543,7 +921,7 @@ function BlockRenderer({
 }) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "div",
       {
         className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className}`,