@bettercms-ai/ui 0.15.1 → 0.17.0

package/dist/registry.js

@@ -29,10 +29,136 @@ function Heading({
 }
 
 // src/blocks/portableText.tsx
-import React from "react";
+import React2 from "react";
 import { PortableText as PT } from "@portabletext/react";
 
+// src/renderer.tsx
+import { RESPONSIVE_CSS, hiddenEverywhere, hideOnAttr, splitButtonStyle, usesHideOn, visibleBlocks, windowState } from "@bettercms-ai/types";
+
+// src/blockStyle.ts
+import { blockStyleToCss } from "@bettercms-ai/types";
+function blockStyleToReactStyle(style) {
+  return blockStyleToCss(style);
+}
+
+// src/renderer.tsx
+import "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
+function styleOf(block) {
+  if (block.type !== "button") return { wrapper: blockStyleToReactStyle(block.style), paint: {} };
+  const { placement, paint } = splitButtonStyle(block.style);
+  return { wrapper: blockStyleToReactStyle(placement), paint: paint ? { style: paint } : {} };
+}
+function withHide(block, wrapperStyle, el, stampAt) {
+  const hide = hideOnAttr(block.style);
+  const state = stampAt ? windowState(block, stampAt) : "live";
+  const hidden = !!stampAt && hiddenEverywhere(block);
+  if (!wrapperStyle && !hide && state === "live" && !hidden) return el;
+  return /* @__PURE__ */ jsx2("div", { style: wrapperStyle, ...hide ? { "data-bcms-hide": hide } : {}, ...state === "live" ? {} : { "data-bcms-window": state }, ...hidden ? { "data-bcms-hidden": "all" } : {}, children: el });
+}
+function bindingProps(block, annotate) {
+  if (!annotate || !block.id) return {};
+  switch (block.type) {
+    case "heading":
+    case "button":
+      return { "data-bcms-field": `${block.id}__text`, "data-bcms-kind": "text" };
+    case "text":
+    case "richtext":
+      return { "data-bcms-field": `${block.id}__html`, "data-bcms-kind": "richtext" };
+    case "image":
+      return { "data-bcms-field": `${block.id}__src`, "data-bcms-kind": "image" };
+    default:
+      return {};
+  }
+}
+function resolveBlock(block, className, annotate = false, stampAt) {
+  const entry = BLOCK_REGISTRY[block.type];
+  if (!entry) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className ?? ""}`,
+        children: [
+          "Unknown block type: ",
+          /* @__PURE__ */ jsx2("code", { children: block.type })
+        ]
+      }
+    );
+  }
+  const Component = entry.component;
+  const { wrapper: blockStyle, paint } = styleOf(block);
+  const el = /* @__PURE__ */ jsx2(Component, { ...block.props, ...paint, className, ...bindingProps(block, annotate) });
+  return withHide(block, blockStyle, el, stampAt);
+}
+function BlockRenderer({
+  block,
+  className = "",
+  renderBlock,
+  annotate = false,
+  stampAt
+}) {
+  const entry = BLOCK_REGISTRY[block.type];
+  if (!entry) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className}`,
+        children: [
+          "Unknown block type: ",
+          /* @__PURE__ */ jsx2("code", { children: block.type })
+        ]
+      }
+    );
+  }
+  const Component = entry.component;
+  const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate, stampAt)) } : {};
+  const { wrapper: blockStyle, paint } = styleOf(block);
+  const el = /* @__PURE__ */ jsx2(
+    Component,
+    {
+      ...block.props,
+      ...paint,
+      className,
+      ...containerProps,
+      ...bindingProps(block, annotate)
+    }
+  );
+  return withHide(block, blockStyle, el, stampAt);
+}
+function BlocksRenderer({
+  blocks: all,
+  className = "",
+  renderBlock,
+  annotate = false,
+  now
+}) {
+  const at = now ?? /* @__PURE__ */ new Date();
+  const blocks = annotate ? all : visibleBlocks(all, at);
+  if (blocks.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    usesHideOn(blocks) && /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: RESPONSIVE_CSS } }),
+    blocks.map((block) => /* @__PURE__ */ jsx2(
+      BlockRenderer,
+      {
+        block,
+        renderBlock,
+        annotate,
+        stampAt: annotate ? at : void 0
+      },
+      block.id
+    ))
+  ] });
+}
+
 // ../richtext/src/types.ts
+function pullQuoteHref(link) {
+  if (typeof link === "string") return link.trim();
+  if (link && typeof link === "object" && typeof link.href === "string") {
+    return link.href.trim();
+  }
+  return "";
+}
 var PT_TYPES = {
   /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
   block: "bcmsBlock",
@@ -50,6 +176,10 @@ var PT_TYPES = {
   video: "video",
   /** A downloadable document — a PDF, a spec sheet. `<a href download>`, nothing more. */
   file: "file",
+  /** A pull quote — see `PortableTextPullQuote`. The V2 kit's `<figure data-rt="pullquote">`. */
+  pullQuote: "pullQuote",
+  /** Key takeaways — see `PortableTextKeyTakeaways`. The V2 kit's `<aside data-rt="takeaways">`. */
+  keyTakeaways: "keyTakeaways",
   /**
    * 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
@@ -74,8 +204,11 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.divider,
   PT_TYPES.mention,
   PT_TYPES.video,
-  PT_TYPES.file
+  PT_TYPES.file,
+  PT_TYPES.pullQuote,
+  PT_TYPES.keyTakeaways
 ]);
+var EMBEDDED_COMPONENT_KEY = "component";
 
 // ../richtext/src/styled.ts
 var STYLED_TAGS = [
@@ -246,7 +379,8 @@ function normalizeCell(raw, at, mint, read) {
     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 }
+    ...rowSpan === void 0 ? {} : { rowSpan },
+    ...typeof raw.group === "string" ? { group: raw.group } : {}
   };
 }
 function normalizeRow(raw, at, mint, read) {
@@ -254,7 +388,8 @@ function normalizeRow(raw, at, mint, read) {
   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 } : {}
+    ...isRecord(raw) && raw.head === true ? { head: true } : {},
+    ...isRecord(raw) && typeof raw.group === "string" ? { group: raw.group } : {}
   };
 }
 function builtInTableToTable(node, key = randomKey) {
@@ -299,24 +434,93 @@ function migrateTable(node, key = randomKey, read = asIs) {
     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 } : {}
+    ...node.legacy === true ? { legacy: true } : {},
+    ...tableExtras(node)
+  };
+}
+function tableExtras(node) {
+  const groups = (list) => Array.isArray(list) ? list.filter((g) => isRecord(g) && typeof g._key === "string" && g._key !== "").map((g) => ({ _key: g._key, label: typeof g.label === "string" ? g.label : "" })) : void 0;
+  const rowGroups = groups(node.rowGroups);
+  const columnGroups = groups(node.columnGroups);
+  return {
+    ...typeof node.caption === "string" ? { caption: node.caption } : {},
+    ...typeof node.notes === "string" ? { notes: node.notes } : {},
+    ...rowGroups ? { rowGroups } : {},
+    ...columnGroups ? { columnGroups } : {}
+  };
+}
+function tableGroupLayout(table) {
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  const labels = (list) => new Map(
+    (Array.isArray(list) ? list : []).filter((g) => isRecord(g) && typeof g._key === "string").map((g) => [g._key, typeof g.label === "string" ? g.label : ""])
+  );
+  const cellsOf = (row) => isRecord(row) && Array.isArray(row.cells) ? row.cells : [];
+  const spanOf2 = (cell) => isRecord(cell) && typeof cell.span === "number" && Number.isInteger(cell.span) && cell.span > 1 ? cell.span : 1;
+  const width = rows.reduce((max, row) => Math.max(max, cellsOf(row).reduce((n, c) => n + spanOf2(c), 0)), 0);
+  const colLabels = labels(table.columnGroups);
+  const columns = [];
+  for (const cell of cellsOf(rows[0])) {
+    const key = isRecord(cell) && typeof cell.group === "string" && colLabels.has(cell.group) ? cell.group : void 0;
+    const last = columns[columns.length - 1];
+    if (last && last.key === key) last.width += spanOf2(cell);
+    else columns.push({ width: spanOf2(cell), ...key === void 0 ? {} : { key, label: colLabels.get(key) } });
+  }
+  const rowLabels = labels(table.rowGroups);
+  const headCount = rows.findIndex((r) => !isRecord(r) || r.head !== true);
+  const body = headCount === -1 ? [] : rows.slice(headCount);
+  const runs = [];
+  for (const row of body) {
+    const key = isRecord(row) && typeof row.group === "string" && rowLabels.has(row.group) ? row.group : void 0;
+    const last = runs[runs.length - 1];
+    if (last && last.key === key) last.rows.push(row);
+    else runs.push({ rows: [row], ...key === void 0 ? {} : { key, label: rowLabels.get(key) } });
+  }
+  return {
+    columns: columns.some((r) => r.key !== void 0) ? columns : [],
+    rows: runs.some((r) => r.key !== void 0) ? runs : [],
+    width
   };
 }
 
-// ../richtext/src/read.ts
+// ../richtext/src/key-takeaways.ts
 var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function keyTakeawaysView(value) {
+  const v = isRecord2(value) ? value : {};
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  const points = (Array.isArray(v.points) ? v.points : []).map((p) => typeof p === "string" ? p.trim() : "").filter(Boolean);
+  return { title, points };
+}
+
+// ../richtext/src/component-copy.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;
+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 : "",
+    componentId: typeof f.componentId === "string" ? f.componentId : "",
+    props: isRecord3(f.props) ? f.props : {},
+    blocks: f.blocks,
+    ...typeof f.sourcePublishedAt === "string" ? { sourcePublishedAt: f.sourcePublishedAt } : {},
+    ...typeof f.variant === "string" ? { variant: f.variant } : {}
+  };
+}
+
+// ../richtext/src/read.ts
+var isRecord4 = (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 [];
+    if (!isRecord4(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() };
+    const node = { ...raw, _key: isRecord4(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;
+        if (!isRecord4(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;
@@ -326,14 +530,14 @@ function normalizePortableText(value, key = randomKey) {
   });
 }
 function readStructuredContent(props) {
-  if (!isRecord2(props)) return null;
+  if (!isRecord4(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;
+  const arr = Array.isArray(candidate) ? candidate : isRecord4(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";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var TOKEN = /^[a-z0-9-]+$/i;
 function styleObject(css) {
   const out = {};
@@ -352,42 +556,63 @@ function Bound({
   nodeKey,
   children
 }) {
-  if (!base || !nodeKey) return /* @__PURE__ */ jsx2(Fragment, { children });
-  return /* @__PURE__ */ jsx2("div", { "data-bcms-field": `${base}#${nodeKey}`, "data-bcms-kind": "richtext", children });
+  if (!base || !nodeKey) return /* @__PURE__ */ jsx3(Fragment, { children });
+  return /* @__PURE__ */ jsx3("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 }) } }),
+  const components = React2.useMemo(buildComponents, []);
+  const inline = React2.useMemo(
+    () => ({ ...components, block: { normal: ({ children }) => /* @__PURE__ */ jsx3(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 span2 = 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);
+    return /* @__PURE__ */ jsx3(Tag, { ...span2 ? { colSpan: span2 } : {}, ...rowSpan ? { rowSpan } : {}, children: /* @__PURE__ */ jsx3(PT, { value: content, components: lone ? inline : components }) }, cell?._key);
   });
-  const rendered = rows.map((row) => /* @__PURE__ */ jsx2("tr", { children: cells(row) }, row?._key));
+  const rowEl = (row) => /* @__PURE__ */ jsx3("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) })
+  const layout = tableGroupLayout(value);
+  const caption = typeof value.caption === "string" ? value.caption.trim() : "";
+  const notes = typeof value.notes === "string" ? value.notes.trim() : "";
+  const notesId = notes && typeof value._key === "string" && value._key ? `${value._key}-notes` : void 0;
+  const span = (n) => n > 1 ? n : void 0;
+  const groupRow = layout.columns.length ? /* @__PURE__ */ jsx3("tr", { children: layout.columns.flatMap(
+    (run, i) => run.label === void 0 ? Array.from({ length: run.width }, (_, k) => /* @__PURE__ */ jsx3("td", {}, `${i}-${k}`)) : [/* @__PURE__ */ jsx3("th", { scope: "colgroup", colSpan: span(run.width), "data-group": run.key, children: run.label }, i)]
+  ) }) : null;
+  const bodies = layout.rows.length ? layout.rows.map((run, i) => /* @__PURE__ */ jsxs2("tbody", { "data-key": run.key, children: [
+    run.label !== void 0 && /* @__PURE__ */ jsx3("tr", { children: /* @__PURE__ */ jsx3("th", { scope: "rowgroup", colSpan: span(layout.width), children: run.label }) }),
+    run.rows.map(rowEl)
+  ] }, i)) : head < rows.length && /* @__PURE__ */ jsx3("tbody", { children: rows.slice(head).map(rowEl) });
+  const table = /* @__PURE__ */ jsxs2("table", { ...value.legacy === true ? { className: "bcms-table" } : {}, ...notesId ? { "aria-describedby": notesId } : {}, children: [
+    caption && /* @__PURE__ */ jsx3("caption", { children: caption }),
+    layout.columns.map((run, i) => /* @__PURE__ */ jsx3("colgroup", { span: span(run.width) }, i)),
+    (groupRow || head > 0) && /* @__PURE__ */ jsxs2("thead", { children: [
+      groupRow,
+      rows.slice(0, head).map(rowEl)
+    ] }),
+    bodies
   ] });
+  return notes ? /* @__PURE__ */ jsxs2("figure", { "data-rt": "table", children: [
+    table,
+    /* @__PURE__ */ jsx3("p", { "data-notes": "", id: notesId, children: notes })
+  ] }) : table;
 }
 function buildComponents(renderBlock) {
   return {
     types: {
-      [PT_TYPES.divider]: () => /* @__PURE__ */ jsx2("hr", {}),
-      [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx2(Table, { value }),
+      [PT_TYPES.divider]: () => /* @__PURE__ */ jsx3("hr", {}),
+      [PT_TYPES.table]: ({ value }) => /* @__PURE__ */ jsx3(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 : "" }) });
+        return /* @__PURE__ */ jsx3("pre", { children: /* @__PURE__ */ jsx3("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
@@ -398,14 +623,51 @@ function buildComponents(renderBlock) {
        */
       [PT_TYPES.block]: ({ value }) => {
         const rendered = renderBlock?.(value);
-        if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
+        if (rendered !== void 0) return /* @__PURE__ */ jsx3(Fragment, { children: rendered });
+        const copy = detachedComponentCopy(value);
+        if (copy) {
+          return /* @__PURE__ */ jsx3("div", { className: "bcms-block bcms-block--component", "data-bcms-component-copy": copy.componentId, "data-bcms-instance": copy.id, children: /* @__PURE__ */ jsx3(BlocksRenderer, { blocks: copy.blocks }) });
+        }
         const v = value;
         const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
-        return /* @__PURE__ */ jsx2("div", { className: "bcms-block", "data-bcms-schema-key": key });
+        return /* @__PURE__ */ jsx3("div", { className: "bcms-block", "data-bcms-schema-key": key });
+      },
+      /**
+       * A pull quote — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
+       * `<figure data-rt="pullquote">`, the name linked (and the quote cited) only through
+       * `safeHref`. pull-quote.test.tsx compares the two.
+       */
+      [PT_TYPES.pullQuote]: ({ value }) => {
+        const v = value;
+        const text = (x) => typeof x === "string" ? x.trim() : "";
+        const quote = typeof v.quote === "string" ? v.quote : "";
+        const name = text(v.name);
+        const role = text(v.role);
+        const href = safeHref(pullQuoteHref(v.link)) ?? void 0;
+        return /* @__PURE__ */ jsxs2("figure", { "data-rt": "pullquote", children: [
+          /* @__PURE__ */ jsx3("blockquote", { cite: href, children: /* @__PURE__ */ jsx3("p", { children: quote }) }),
+          name || role ? /* @__PURE__ */ jsxs2("figcaption", { children: [
+            name ? href ? /* @__PURE__ */ jsx3("a", { href, "data-name": "", children: name }) : /* @__PURE__ */ jsx3("span", { "data-name": "", children: name }) : null,
+            name && role ? ", " : null,
+            role ? /* @__PURE__ */ jsx3("span", { "data-role": "", children: role }) : null
+          ] }) : null
+        ] });
+      },
+      /**
+       * 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.
+       * portable-text-key-takeaways.test.tsx compares the two.
+       */
+      [PT_TYPES.keyTakeaways]: ({ value }) => {
+        const { title, points } = keyTakeawaysView(value);
+        return /* @__PURE__ */ jsxs2("aside", { "data-rt": "takeaways", children: [
+          title ? /* @__PURE__ */ jsx3("p", { "data-title": "", children: title }) : null,
+          /* @__PURE__ */ jsx3("ul", { children: points.map((p, i) => /* @__PURE__ */ jsx3("li", { children: p }, i)) })
+        ] });
       },
       [PT_TYPES.mention]: ({ value }) => {
         const v = value;
-        return /* @__PURE__ */ jsx2("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
+        return /* @__PURE__ */ jsx3("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
       }
     },
     marks: {
@@ -416,9 +678,9 @@ function buildComponents(renderBlock) {
       [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 });
+        if (!href) return /* @__PURE__ */ jsx3(Fragment, { children });
         const blank = v.target === "_blank";
-        return /* @__PURE__ */ jsx2("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
+        return /* @__PURE__ */ jsx3("a", { href, ...blank ? { target: "_blank", rel: "noopener noreferrer" } : {}, children });
       },
       /**
        * The site's own inline markup, rendered as itself — the React half of
@@ -435,12 +697,12 @@ function buildComponents(renderBlock) {
       [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 });
+        if (!isStyledTag(tag)) return /* @__PURE__ */ jsx3(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(
+        return /* @__PURE__ */ jsx3(
           Tag,
           {
             className,
@@ -450,22 +712,22 @@ function buildComponents(renderBlock) {
           }
         );
       },
-      highlight: ({ children }) => /* @__PURE__ */ jsx2("mark", { children }),
-      "strike-through": ({ children }) => /* @__PURE__ */ jsx2("s", { children }),
+      highlight: ({ children }) => /* @__PURE__ */ jsx3("mark", { children }),
+      "strike-through": ({ children }) => /* @__PURE__ */ jsx3("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 });
+        if (!TOKEN.test(token)) return /* @__PURE__ */ jsx3(Fragment, { children });
+        return /* @__PURE__ */ jsx3("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 })
+    unknownMark: ({ children }) => /* @__PURE__ */ jsx3(Fragment, { children }),
+    unknownType: ({ children }) => /* @__PURE__ */ jsx3(Fragment, { children: children ?? null }),
+    unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx3("p", { children })
   };
 }
 var isListItem = (node) => node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
@@ -479,20 +741,20 @@ function runsOf(blocks) {
   return runs;
 }
 function PortableText({ value, bindingBase, renderBlock }) {
-  const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
-  const components = React.useMemo(() => buildComponents(renderBlock), [renderBlock]);
-  const listComponents = React.useMemo(() => {
+  const blocks = React2.useMemo(() => normalizePortableText(readValue(value)), [value]);
+  const components = React2.useMemo(() => buildComponents(renderBlock), [renderBlock]);
+  const listComponents = React2.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__ */ jsx2("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx2("li", { children })
+      listItem: ({ value: item, children }) => keys.has(item._key) ? /* @__PURE__ */ jsx3("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx3("li", { children })
     };
   }, [bindingBase, blocks, components]);
   if (blocks.length === 0) return null;
-  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx2(PT, { value: blocks, components });
-  return /* @__PURE__ */ jsx2(Fragment, { children: runsOf(blocks).map(
-    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx2(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx2(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx2(PT, { value: run, components }) }, run[0]._key)
+  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx3(PT, { value: blocks, components });
+  return /* @__PURE__ */ jsx3(Fragment, { children: runsOf(blocks).map(
+    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx3(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx3(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx3(PT, { value: run, components }) }, run[0]._key)
   ) });
 }
 function readValue(value) {
@@ -506,7 +768,7 @@ function readValue(value) {
 }
 
 // src/blocks/Text.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Text({
   html,
   content,
@@ -522,14 +784,14 @@ function Text({
   }[align];
   const cls = `text-muted-foreground leading-relaxed ${alignClass} ${className}`;
   const structured = readStructuredContent({ content });
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       className: cls,
       ...structured ? {} : { "data-bcms-field": field, "data-bcms-kind": kind },
-      children: structured ? /* @__PURE__ */ jsx3(PortableText, { value: structured, bindingBase: field }) : (
+      children: structured ? /* @__PURE__ */ jsx4(PortableText, { value: structured, bindingBase: field }) : (
         // eslint-disable-next-line react/no-danger
-        /* @__PURE__ */ jsx3("span", { dangerouslySetInnerHTML: { __html: html } })
+        /* @__PURE__ */ jsx4("span", { dangerouslySetInnerHTML: { __html: html } })
       )
     }
   );
@@ -543,7 +805,7 @@ function cn(...inputs) {
 }
 
 // src/blocks/Image.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Image({
   src,
   alt,
@@ -556,8 +818,8 @@ function Image({
   "data-bcms-kind": kind
 }) {
   const sized = typeof width === "number" && width > 0;
-  return /* @__PURE__ */ jsxs2("figure", { className: cn(sized ? "max-w-full" : "w-full", className), children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("figure", { className: cn(sized ? "max-w-full" : "w-full", className), children: [
+    /* @__PURE__ */ jsx5(
       "img",
       {
         src,
@@ -572,13 +834,13 @@ function Image({
         loading: "lazy"
       }
     ),
-    caption && /* @__PURE__ */ jsx4("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
+    caption && /* @__PURE__ */ jsx5("figcaption", { className: "mt-2 text-sm text-muted-foreground text-center italic", children: caption })
   ] });
 }
 
 // src/blocks/Button.tsx
 import { LINK_RELS, buttonIconOf, buttonIconSvg, buttonVariantOf, isScriptHref } from "@bettercms-ai/types";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Button({
   text,
   href,
@@ -589,6 +851,7 @@ function Button({
   icon: iconProp,
   newTab = false,
   rel,
+  action,
   align = "left",
   className = "",
   style,
@@ -620,7 +883,14 @@ function Button({
   const sizeClass = size === "sm" || size === "lg" ? sizeStyles[size] : sizeStyles.md;
   const fullClass = fullWidth === true ? "flex w-full justify-center" : "";
   const relTokens = [...newTab === true ? ["noopener", "noreferrer"] : [], ...LINK_RELS.includes(rel) ? [rel] : []];
-  return /* @__PURE__ */ jsxs3(
+  if (action === "code") {
+    return /* @__PURE__ */ jsxs4("button", { type: "button", "data-bcms-field": field, "data-bcms-kind": kind, style, className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className), children: [
+      icon && /* @__PURE__ */ jsx6("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
+      text,
+      arrow === true && /* @__PURE__ */ jsx6("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(
     "a",
     {
       href: typeof href === "string" && isScriptHref(href) ? "#" : href,
@@ -631,24 +901,24 @@ function Button({
       style,
       className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className),
       children: [
-        icon && /* @__PURE__ */ jsx5("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
+        icon && /* @__PURE__ */ jsx6("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
         text,
-        arrow === true && /* @__PURE__ */ jsx5("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
+        arrow === true && /* @__PURE__ */ jsx6("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
       ]
     }
   );
 }
 
 // src/blocks/Spacer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Spacer({ height = 32, className = "" }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       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__ */ jsxs4("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
+      children: /* @__PURE__ */ jsxs5("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
         height,
         "px"
       ] })
@@ -658,14 +928,14 @@ function Spacer({ height = 32, className = "" }) {
 
 // src/blocks/Columns.tsx
 import "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Columns({
   columns,
   gap = 16,
   className = "",
   renderBlock
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: cn("grid w-full", className),
@@ -673,14 +943,14 @@ function Columns({
         gridTemplateColumns: `repeat(${columns.length}, minmax(0, 1fr))`,
         gap: `${gap}px`
       },
-      children: columns.map((columnBlocks, colIndex) => /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-4 min-w-0", children: columnBlocks.map((block) => /* @__PURE__ */ jsx7("span", { children: renderBlock ? renderBlock(block) : null }, block.id)) }, colIndex))
+      children: columns.map((columnBlocks, colIndex) => /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4 min-w-0", children: columnBlocks.map((block) => /* @__PURE__ */ jsx8("span", { children: renderBlock ? renderBlock(block) : null }, block.id)) }, colIndex))
     }
   );
 }
 
 // src/blocks/Video.tsx
 import { useState } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function getEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
@@ -710,7 +980,7 @@ function Video({
   const [isLoaded, setIsLoaded] = useState(false);
   const { embedUrl, provider } = getEmbedUrl(url);
   if (provider === "unknown") {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "video",
       {
         src: url,
@@ -723,9 +993,9 @@ function Video({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
+  return /* @__PURE__ */ jsxs6("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(
+    /* @__PURE__ */ jsx9(
       "img",
       {
         src: poster,
@@ -733,7 +1003,7 @@ function Video({
         className: "w-full h-full object-cover absolute inset-0"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "iframe",
       {
         src: `${embedUrl}?autoplay=${autoplay ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${autoplay ? 1 : 0}`,
@@ -749,7 +1019,7 @@ function Video({
 
 // src/blocks/Section.tsx
 import "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Section({
   children,
   background,
@@ -758,24 +1028,24 @@ function Section({
   className = "",
   renderBlock
 }) {
-  const inner = (children ?? []).map((block) => /* @__PURE__ */ jsx9("span", { children: renderBlock ? renderBlock(block) : null }, block.id));
-  return /* @__PURE__ */ jsx9(
+  const inner = (children ?? []).map((block) => /* @__PURE__ */ jsx10("span", { children: renderBlock ? renderBlock(block) : null }, block.id));
+  return /* @__PURE__ */ jsx10(
     "section",
     {
       className: cn("w-full", className),
       style: { background, paddingTop: paddingY, paddingBottom: paddingY },
-      children: maxWidth ? /* @__PURE__ */ jsx9("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
+      children: maxWidth ? /* @__PURE__ */ jsx10("div", { style: { maxWidth, marginInline: "auto" }, children: inner }) : inner
     }
   );
 }
 
 // src/blocks/Navbar.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Navbar({ logo, links, cta, className = "" }) {
-  return /* @__PURE__ */ jsxs6("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(
+  return /* @__PURE__ */ jsxs7("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
+    logo?.src ? /* @__PURE__ */ jsx11("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx11("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx11("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
+    cta ? /* @__PURE__ */ jsx11(
       "a",
       {
         href: cta.href,
@@ -787,40 +1057,40 @@ function Navbar({ logo, links, cta, className = "" }) {
 }
 
 // src/blocks/Footer.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function Footer({ columns, copyright, className = "" }) {
-  return /* @__PURE__ */ jsxs7("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__ */ jsxs7("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))
+  return /* @__PURE__ */ jsxs8("footer", { className: cn("mt-12 border-t pt-8", className), children: [
+    /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1.5", children: [
+      col.heading ? /* @__PURE__ */ jsx12("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
+      (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx12("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
     ] }, i)) }),
-    copyright ? /* @__PURE__ */ jsx11("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
+    copyright ? /* @__PURE__ */ jsx12("p", { className: "mt-6 text-sm text-neutral-500", children: copyright }) : null
   ] });
 }
 
 // src/blocks/Slider.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } 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__ */ jsxs8("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" })
+  return /* @__PURE__ */ jsxs9("div", { className: cn("relative w-full", className), children: [
+    list.map((s, idx) => /* @__PURE__ */ jsx13("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx13("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
+    /* @__PURE__ */ jsx13("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
+    /* @__PURE__ */ jsx13("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
   ] });
 }
 
 // src/blocks/Tabs.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Tabs({ tabs, className = "", renderBlock }) {
   const [active, setActive] = useState3(0);
   const list = tabs ?? [];
-  return /* @__PURE__ */ jsxs9("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(
+  return /* @__PURE__ */ jsxs10("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx14("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx14(
       "button",
       {
         role: "tab",
@@ -835,38 +1105,38 @@ function Tabs({ tabs, className = "", renderBlock }) {
       },
       t.id
     )) }),
-    list.map((t, idx) => /* @__PURE__ */ jsx13("div", { role: "tabpanel", hidden: idx !== active, className: "flex flex-col gap-4", children: (t.children ?? []).map((b) => /* @__PURE__ */ jsx13("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, t.id))
+    list.map((t, idx) => /* @__PURE__ */ jsx14("div", { role: "tabpanel", hidden: idx !== active, className: "flex flex-col gap-4", children: (t.children ?? []).map((b) => /* @__PURE__ */ jsx14("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, t.id))
   ] });
 }
 
 // src/blocks/Placeholders.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs11 } 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__ */ jsxs10("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn(box, className), children: [
     "Component instance: ",
-    /* @__PURE__ */ jsx14("code", { children: componentId })
+    /* @__PURE__ */ jsx15("code", { children: componentId })
   ] });
 }
 function FormPlaceholder({ formId, className = "" }) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn(box, className), children: [
     "Form: ",
-    /* @__PURE__ */ jsx14("code", { children: formId })
+    /* @__PURE__ */ jsx15("code", { children: formId })
   ] });
 }
 function CollectionPlaceholder({
   cardComponentId,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs11("div", { className: cn(box, className), children: [
     "Collection: entries of this page",
-    cardComponentId ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    cardComponentId ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
       " as ",
-      /* @__PURE__ */ jsx14("code", { children: cardComponentId })
-    ] }) : /* @__PURE__ */ jsx14(Fragment2, { children: " (default card)" })
+      /* @__PURE__ */ jsx15("code", { children: cardComponentId })
+    ] }) : /* @__PURE__ */ jsx15(Fragment2, { children: " (default card)" })
   ] });
 }