@bettercms-ai/ui 0.19.0 → 0.20.0

package/dist/renderer.js

@@ -835,6 +835,8 @@ function buildComponents(renderBlock) {
       [PT_TYPES.block]: ({ value }) => {
         const rendered = renderBlock?.(value);
         if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
+        const builtIn = calloutOrToggle(value);
+        if (builtIn) return builtIn;
         const copy = detachedComponentCopy(value);
         if (copy) {
           return /* @__PURE__ */ jsx2("div", { className: "bcms-block bcms-block--component", "data-bcms-component-copy": copy.componentId, "data-bcms-instance": copy.id, children: /* @__PURE__ */ jsx2(BlocksRenderer, { blocks: copy.blocks }) });
@@ -951,6 +953,35 @@ function runsOf(blocks) {
   }
   return runs;
 }
+function paragraphs(text) {
+  return text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean).map((p, i) => /* @__PURE__ */ jsx2("p", { children: p.split("\n").map((line, j) => j === 0 ? line : [/* @__PURE__ */ jsx2("br", {}, j), line]) }, i));
+}
+var CALLOUT_TONES = /* @__PURE__ */ new Set(["info", "tip", "warning"]);
+function calloutOrToggle(value) {
+  const v = value ?? {};
+  const f = v.fields && typeof v.fields === "object" ? v.fields : {};
+  const text = (x) => typeof x === "string" ? x.trim() : "";
+  if (v.schemaKey === "builtin:callout") {
+    const tone = CALLOUT_TONES.has(text(f.tone)) ? text(f.tone) : "info";
+    const title = text(f.title);
+    const body = paragraphs(typeof f.message === "string" ? f.message : "");
+    if (!title && !body.length) return /* @__PURE__ */ jsx2(Fragment, {});
+    return /* @__PURE__ */ jsxs("div", { className: `bcms-callout bcms-callout--${tone}`, "data-rt": "callout", "data-callout": tone, role: "note", children: [
+      title ? /* @__PURE__ */ jsx2("p", { className: "bcms-callout__title", "data-title": "", children: title }) : null,
+      /* @__PURE__ */ jsx2("div", { className: "bcms-callout__body", "data-body": "", children: body })
+    ] });
+  }
+  if (v.schemaKey === "builtin:toggle") {
+    const title = text(f.title);
+    const body = paragraphs(typeof f.body === "string" ? f.body : "");
+    if (!title && !body.length) return /* @__PURE__ */ jsx2(Fragment, {});
+    return /* @__PURE__ */ jsxs("details", { className: "bcms-toggle", "data-rt": "toggle", children: [
+      /* @__PURE__ */ jsx2("summary", { className: "bcms-toggle__title", children: title }),
+      /* @__PURE__ */ jsx2("div", { className: "bcms-toggle__body", "data-body": "", children: body })
+    ] });
+  }
+  return null;
+}
 function PortableText({ value, bindingBase, renderBlock }) {
   const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
   const components = React.useMemo(() => buildComponents(renderBlock), [renderBlock]);