@chaibuilder/sdk 2.2.37 → 2.3.0

package/dist/core.js

@@ -1,6 +1,6 @@
 var U = Object.defineProperty;
 var V = (o, n, r) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var H = (o, n, r) => V(o, typeof n != "symbol" ? n + "" : n, r);
+var F = (o, n, r) => V(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, LoopIcon, ResetIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
@@ -283,7 +283,7 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 });
 class PubSub {
   constructor() {
-    H(this, "subscribers", /* @__PURE__ */ new Map());
+    F(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, r) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
@@ -832,8 +832,8 @@ const undoRedoStateAtom = atom({
       else {
         const B = keys(k);
         v = map(f, (w) => {
-          const _ = n.find((C) => C._id === w), E = { _id: w };
-          return each(B, (C) => E[C] = _[C]), E;
+          const _ = n.find((S) => S._id === w), E = { _id: w };
+          return each(B, (S) => E[S] = _[S]), E;
         });
       }
       c(map(f, (B) => ({ _id: B, ...k }))), o({
@@ -2356,10 +2356,10 @@ const getBlockWithChildren = (o, n) => {
               return;
             }
             if (h === "styles") {
-              const E = w.map((C) => {
-                for (const A in C)
-                  A !== "_id" && (C[A] = `${STYLES_KEY},${C[A]}`);
-                return C;
+              const E = w.map((S) => {
+                for (const A in S)
+                  A !== "_id" && (S[A] = `${STYLES_KEY},${S[A]}`);
+                return S;
               });
               c(E);
             } else
@@ -3056,17 +3056,17 @@ class Content extends Component {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    H(this, "setRef", (r) => {
+    F(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    H(this, "handleLoad", () => {
+    F(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    H(this, "loadCheck", () => setInterval(() => {
+    F(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -3103,7 +3103,7 @@ class Frame extends Component {
     return delete r.head, delete r.initialContent, delete r.mountTarget, delete r.contentDidMount, delete r.contentDidUpdate, delete r.forwardedRef, /* @__PURE__ */ jsx("iframe", { ...r, ref: this.setRef, onLoad: this.handleLoad, children: this.state.iframeLoaded && this.renderFrameContents() });
   }
 }
-H(Frame, "defaultProps", {
+F(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3528,12 +3528,12 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       var j;
       const A = o._type;
       let N = o[r];
-      const S = getRegisteredChaiBlock(o._type);
-      return x && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${x}`) && (N = get(o, `${r}-${x}`)), { blockContent: N, blockType: A };
+      const C = getRegisteredChaiBlock(o._type);
+      return x && ((j = C == null ? void 0 : C.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${x}`) && (N = get(o, `${r}-${x}`)), { blockContent: N, blockType: A };
     }, [o, x]), w = useCallback(
       (A) => {
-        var S;
-        const N = A || ((S = g.current) == null ? void 0 : S.innerText);
+        var C;
+        const N = A || ((C = g.current) == null ? void 0 : C.innerText);
         h([b], { [r]: N }), u(null), c(null), d(-1), f([]);
       },
       [b, h, c, f, x]
@@ -3555,10 +3555,10 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       var y;
       if (!b) return;
-      const A = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${N}`);
-      S && ((y = S == null ? void 0 : S.classList) == null || y.add("sr-only"), u(S));
+      const A = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", C = a.querySelector(`${A}${N}`);
+      C && ((y = C == null ? void 0 : C.classList) == null || y.add("sr-only"), u(C));
     }, [b, B, a, i]);
-    const C = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
+    const S = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: v,
@@ -3579,7 +3579,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       }
     )) : null, [p, b, B, v, w, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      C,
+      S,
       n
     ] });
   },
@@ -3656,8 +3656,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const C = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
-  return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
+  const S = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
+  return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: S }) : S;
 }, PartialWrapper = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -4116,8 +4116,8 @@ const DataBindingSelector = ({
       }
       const h = (b) => /[.,!?;:]/.test(b), x = (b, v, B) => {
         let w = "", _ = "";
-        const E = v > 0 ? b[v - 1] : "", C = v < b.length ? b[v] : "";
-        return v > 0 && (E === "." || !h(E) && E !== " ") && (w = " "), v < b.length && !h(C) && C !== " " && (_ = " "), {
+        const E = v > 0 ? b[v - 1] : "", S = v < b.length ? b[v] : "";
+        return v > 0 && (E === "." || !h(E) && E !== " ") && (w = " "), v < b.length && !h(S) && S !== " " && (_ = " "), {
           text: w + B + _,
           prefixLength: w.length,
           suffixLength: _.length
@@ -4134,11 +4134,11 @@ const DataBindingSelector = ({
           if (B !== w)
             b.chain().deleteSelection().insertContent(v).run();
           else {
-            const { state: E } = b, C = E.selection.from, A = E.doc.textBetween(Math.max(0, C - 1), C), N = E.doc.textBetween(C, Math.min(C + 1, E.doc.content.size));
-            let S = "";
-            C > 0 && A !== " " && !h(A) && (S = " ");
+            const { state: E } = b, S = E.selection.from, A = E.doc.textBetween(Math.max(0, S - 1), S), N = E.doc.textBetween(S, Math.min(S + 1, E.doc.content.size));
+            let C = "";
+            S > 0 && A !== " " && !h(A) && (C = " ");
             let y = "";
-            N && N !== " " && !h(N) && (y = " "), b.chain().insertContent(S + v + y).run();
+            N && N !== " " && !h(N) && (y = " "), b.chain().insertContent(C + v + y).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
@@ -4146,11 +4146,11 @@ const DataBindingSelector = ({
       } else {
         const b = f, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
         if (w > v) {
-          const N = `{{${g}}}`, { text: S } = x(B, v, N), y = B.slice(0, v) + S + B.slice(w);
+          const N = `{{${g}}}`, { text: C } = x(B, v, N), y = B.slice(0, v) + C + B.slice(w);
           n(y, {}, r);
           return;
         }
-        const E = `{{${g}}}`, { text: C } = x(B, v, E), A = B.slice(0, v) + C + B.slice(v);
+        const E = `{{${g}}}`, { text: S } = x(B, v, E), A = B.slice(0, v) + S + B.slice(v);
         n(A, {}, r);
       }
     },
@@ -4173,73 +4173,73 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
     if (h(""), f([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), y = get(S, 1, "page") || "page";
+    const C = split(o, ":"), y = get(C, 1, "page") || "page";
     g(y), (async () => {
-      const j = await l(y, [get(S, 2, "page")]);
+      const j = await l(y, [get(C, 2, "page")]);
       j && Array.isArray(j) && h(get(j, [0, "name"], ""));
     })();
   }, [o]);
   const w = useDebouncedCallback(
-    async (S) => {
-      if (isEmpty(S))
+    async (C) => {
+      if (isEmpty(C))
         f([]);
       else {
-        const y = await l(u, S);
+        const y = await l(u, C);
         f(y);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), _ = (S) => {
-    const y = ["pageType", u, S.id];
-    y[1] && (r(y.join(":")), h(S.name), p(!1), f([]), b(-1));
-  }, E = (S) => {
-    switch (S.key) {
+  ), _ = (C) => {
+    const y = ["pageType", u, C.id];
+    y[1] && (r(y.join(":")), h(C.name), p(!1), f([]), b(-1));
+  }, E = (C) => {
+    switch (C.key) {
       case "ArrowDown":
-        S.preventDefault(), b((y) => y < x.length - 1 ? y + 1 : y);
+        C.preventDefault(), b((y) => y < x.length - 1 ? y + 1 : y);
         break;
       case "ArrowUp":
-        S.preventDefault(), b((y) => y > 0 ? y - 1 : y);
+        C.preventDefault(), b((y) => y > 0 ? y - 1 : y);
         break;
       case "Enter":
-        if (S.preventDefault(), x.length === 0) return;
+        if (C.preventDefault(), x.length === 0) return;
         k >= 0 && _(x[k]);
         break;
       case "Escape":
-        S.preventDefault(), C();
+        C.preventDefault(), S();
         break;
     }
   };
   useEffect(() => {
     if (k >= 0 && v.current) {
-      const S = v.current.children[k];
-      S == null || S.scrollIntoView({ block: "nearest" });
+      const C = v.current.children[k];
+      C == null || C.scrollIntoView({ block: "nearest" });
     }
   }, [k]);
-  const C = () => {
+  const S = () => {
     h(""), f([]), b(-1), p(!1), r("");
-  }, A = (S) => {
-    h(S), p(!isEmpty(S)), c(!0), w(S);
+  }, A = (C) => {
+    h(C), p(!isEmpty(C)), c(!0), w(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (S) => A(S.target.value),
+          onChange: (C) => A(C.target.value),
           onKeyDown: E,
           placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4249,22 +4249,22 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(x == null ? void 0 : x.slice(0, 20), (S, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(x == null ? void 0 : x.slice(0, 20), (C, y) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => _(C),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          S.name,
+          C.name,
           " ",
-          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            S.slug,
+            C.slug,
             " )"
           ] })
         ]
       },
-      S.id
+      C.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
@@ -4876,22 +4876,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   ), b = useMemo(() => get(LANGUAGES, k, k), [k]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
     () => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
     [w, B == null ? void 0 : B._type]
-  ), [E, C] = useState(null);
+  ), [E, S] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
   const N = _ == null ? void 0 : _.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const S = E === o;
+    const C = E === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => C(S ? null : o),
+          onClick: () => S(C ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            S ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            C ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
             " ",
@@ -4899,7 +4899,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${S ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${C ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4922,8 +4922,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         DataBindingSelector,
         {
           schema: u,
-          onChange: (S) => {
-            m(S, g, o);
+          onChange: (C) => {
+            m(C, g, o);
           },
           id: o,
           formData: g
@@ -5027,36 +5027,36 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: E }, C, A) => {
-    C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(E, C) }, A);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: E }, S, A) => {
+    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(E, S) }, A);
   }, f = useCallback(
-    debounce(({ formData: E }, C, A) => {
-      x({ formData: E }, C, A), d(E);
+    debounce(({ formData: E }, S, A) => {
+      x({ formData: E }, S, A), d(E);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), k = ({ formData: E }, C) => {
-    C && (r([n._id], { [C]: get(E, C) }), f({ formData: E }, C, { [C]: get(c, C) }));
-  }, b = ({ formData: E }, C) => {
-    C && (r([g._id], { [C]: get(E, C) }), f({ formData: E }, C, { [C]: get(c, C) }));
+  ), k = ({ formData: E }, S) => {
+    S && (r([n._id], { [S]: get(E, S) }), f({ formData: E }, S, { [S]: get(c, S) }));
+  }, b = ({ formData: E }, S) => {
+    S && (r([g._id], { [S]: get(E, S) }), f({ formData: E }, S, { [S]: get(c, S) }));
   }, { schema: v, uiSchema: B } = useMemo(() => {
     const E = n == null ? void 0 : n._type;
     if (!E)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: C, uiSchema: A } = getBlockFormSchemas(E);
+      const { schema: S, uiSchema: A } = getBlockFormSchemas(E);
       if (E === "Repeater") {
         const N = get(n, "repeaterItems", "");
         startsWith(N, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: C, uiSchema: A };
+      return { schema: S, uiSchema: A };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: w, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const E = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: A = {} } = getBlockFormSchemas(E);
-    return { wrapperSchema: C, wrapperUiSchema: A };
+    const E = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: A = {} } = getBlockFormSchemas(E);
+    return { wrapperSchema: S, wrapperUiSchema: A };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5302,15 +5302,15 @@ const BlockStylingProps = () => {
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
   const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [k, b] = useState(""), [v, B] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: y } = getClassValueAndUnit(i);
+    const { value: C, unit: y } = getClassValueAndUnit(i);
     if (y === "") {
-      l(S), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(y), l(y === "class" || isEmpty(S) ? "" : S);
+    h(y), l(y === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
-  const E = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), C = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
-    (S = !1) => {
+  const E = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), S = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
+    (C = !1) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
         f(!0);
@@ -5324,23 +5324,23 @@ const BlockStylingProps = () => {
       if (get(y, "value") === "")
         return;
       const L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      S ? C(L) : E(L);
+      C ? S(L) : E(L);
     },
-    [E, C, a, m, d, u]
+    [E, S, a, m, d, u]
   ), N = useCallback(
-    (S) => {
+    (C) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
         f(!0);
         return;
       }
-      if (S === "auto" || S === "none") {
-        E(`${d}${S}`);
+      if (C === "auto" || C === "none") {
+        E(`${d}${C}`);
         return;
       }
       if (get(y, "value") === "")
         return;
-      const j = get(y, "unit") !== "" ? get(y, "unit") : S, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const j = get(y, "unit") !== "" ? get(y, "unit") : C, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       E(L);
     },
     [E, a, d, u]
@@ -5364,29 +5364,29 @@ const BlockStylingProps = () => {
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (S) => {
-            S.key === "Enter" && A();
+          onKeyPress: (C) => {
+            C.key === "Enter" && A();
           },
-          onKeyDown: (S) => {
-            if (S.keyCode !== 38 && S.keyCode !== 40)
+          onKeyDown: (C) => {
+            if (C.keyCode !== 38 && C.keyCode !== 40)
               return;
-            S.preventDefault(), _(!0);
-            const y = parseInt$1(S.target.value);
+            C.preventDefault(), _(!0);
+            const y = parseInt$1(C.target.value);
             let j = isNaN$1(y) ? 0 : y;
-            S.keyCode === 38 && (j += 1), S.keyCode === 40 && (j -= 1);
+            C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
             const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            C(R);
+            S(R);
           },
-          onKeyUp: (S) => {
-            w && (S.preventDefault(), _(!1));
+          onKeyUp: (C) => {
+            w && (C.preventDefault(), _(!1));
           },
           onBlur: () => A(),
-          onChange: (S) => {
-            f(!1), l(S.target.value);
+          onChange: (C) => {
+            f(!1), l(C.target.value);
           },
-          onClick: (S) => {
+          onClick: (C) => {
             var y;
-            (y = S == null ? void 0 : S.target) == null || y.select(), r(!1);
+            (y = C == null ? void 0 : C.target) == null || y.select(), r(!1);
           },
           value: v ? k : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -5413,8 +5413,8 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (S) => {
-              r(!1), h(S), N(S);
+            onSelect: (C) => {
+              r(!1), h(C), N(C);
             }
           }
         ) })
@@ -5424,18 +5424,18 @@ const BlockStylingProps = () => {
       DragStyleButton,
       {
         onDragStart: () => B(!0),
-        onDragEnd: (S) => {
-          if (b(() => ""), B(!1), isEmpty(S))
+        onDragEnd: (C) => {
+          if (b(() => ""), B(!1), isEmpty(C))
             return;
-          const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
+          const y = `${C}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
           E(I);
         },
-        onDrag: (S) => {
-          if (isEmpty(S))
+        onDrag: (C) => {
+          if (isEmpty(C))
             return;
-          b(S);
-          const y = `${S}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          C(I);
+          b(C);
+          const y = `${C}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
+          S(I);
         },
         currentValue: a,
         unit: m,
@@ -5899,11 +5899,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), k = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (C, A = !0) => {
-      const N = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
+    (S, A = !0) => {
+      const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
-      const S = generateFullClsName(N);
-      h(f, [S], A);
+      const C = generateFullClsName(N);
+      h(f, [C], A);
     },
     [f, p, g, u, l, h]
   ), v = useCallback(() => {
@@ -5913,7 +5913,7 @@ const COLOR_PROP = {
     i(B, m);
   }, [B, i, m]);
   const [, , w] = useScreenSizeWidth(), _ = useCallback(
-    (C) => {
+    (S) => {
       w({
         xs: 400,
         sm: 640,
@@ -5921,7 +5921,7 @@ const COLOR_PROP = {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[S]);
     },
     [w]
   ), E = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
@@ -6361,9 +6361,9 @@ function ManualClasses() {
     } else
       D = i.search(R);
     return _(map(D, "item"));
-  }, C = () => {
+  }, S = () => {
     _([]);
-  }, A = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), S = useMemo(
+  }, A = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), C = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6418,10 +6418,10 @@ function ManualClasses() {
         {
           suggestions: w,
           onSuggestionsFetchRequested: E,
-          onSuggestionsClearRequested: C,
+          onSuggestionsClearRequested: S,
           getSuggestionValue: A,
           renderSuggestion: N,
-          inputProps: S,
+          inputProps: C,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6918,14 +6918,14 @@ const CoreBlock = ({
     a.content = getTextContent(w);
     const _ = find(
       r.children || [],
-      (E) => (E == null ? void 0 : E.tagName) === "span" && some(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
+      (E) => (E == null ? void 0 : E.tagName) === "span" && some(E.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
     );
     if (_) {
-      const E = find(_.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+      const E = find(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
       if (E) {
         a.icon = stringify([E]);
-        const { height: C, width: A } = getSvgDimensions(E, "16px", "16px");
-        a.iconHeight = C, a.iconWidth = A;
+        const { height: S, width: A } = getSvgDimensions(E, "16px", "16px");
+        a.iconHeight = S, a.iconWidth = A;
       }
     }
     return [a];
@@ -6937,8 +6937,8 @@ const CoreBlock = ({
     const w = stringify([r]);
     return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (r.tagName === "svg") {
-    const w = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), E = get(w, "value") ? `[${get(w, "value")}px]` : "24px", C = get(_, "value") ? `[${get(_, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${E}`, A)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
+    const w = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), E = get(w, "value") ? `[${get(w, "value")}px]` : "24px", S = get(_, "value") ? `[${get(_, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${S} h-${E}`, A)}`.trim(), r.attributes = filter(r.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((B = n.block) == null ? void 0 : B._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -7074,9 +7074,9 @@ const registerChaiLibrary = (o, n) => {
           if (k(first(w)) && (_ = null), !isEmpty(w)) {
             const E = { blocks: w, uiLibrary: !0, parent: _ };
             if (B.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
-              const C = new Image();
-              C.src = o.preview, C.onload = () => {
-                B.dataTransfer.setDragImage(C, 0, 0);
+              const S = new Image();
+              S.src = o.preview, S.onload = () => {
+                B.dataTransfer.setDragImage(S, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
@@ -7136,7 +7136,7 @@ const registerChaiLibrary = (o, n) => {
     w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
       w.current && v(y);
     }, 400);
-  }, C = () => {
+  }, S = () => {
     i != null && i.id && p(i.id);
   }, A = () => {
     g("");
@@ -7146,7 +7146,7 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const N = filter(B, (y, j) => j % 2 === 0), S = filter(B, (y, j) => j % 2 === 1);
+  const N = filter(B, (y, j) => j % 2 === 0), C = filter(B, (y, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -7176,7 +7176,7 @@ const registerChaiLibrary = (o, n) => {
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
           /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: C, variant: "outline", size: "sm", className: "gap-2", children: [
+            /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
               _("Retry")
             ] })
@@ -7217,7 +7217,7 @@ const registerChaiLibrary = (o, n) => {
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((y, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((y, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -7324,8 +7324,8 @@ const registerChaiLibrary = (o, n) => {
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var S;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (S = find(c, (y) => y._id === r)) == null ? void 0 : S._type, [h, x] = useState("all"), [f, k] = useState(null), b = useRef(null);
+  var C;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (y) => y._id === r)) == null ? void 0 : C._type, [h, x] = useState("all"), [f, k] = useState(null), b = useRef(null);
   useEffect(() => {
     const y = setTimeout(() => {
       var j;
@@ -7358,10 +7358,10 @@ const registerChaiLibrary = (o, n) => {
       (y) => reject(filter(values(_), { group: y }), { hidden: !0 }).length > 0
     ) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
     [n, _, o, d]
-  ), C = useMemo(
+  ), S = useMemo(
     () => sortBy(E, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
     [E]
-  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), N = useMemo(() => h === "all" ? C : [h], [C, h]);
+  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), N = useMemo(() => h === "all" ? S : [h], [S, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7375,7 +7375,7 @@ const registerChaiLibrary = (o, n) => {
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      C.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -7387,7 +7387,7 @@ const registerChaiLibrary = (o, n) => {
           },
           "sidebar-all"
         ),
-        C.map((y) => /* @__PURE__ */ jsx(
+        S.map((y) => /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => w(y),
@@ -7775,13 +7775,13 @@ const Input = ({ node: o }) => {
     T.isInternal && (p = T.isOpen, T.isOpen && T.close());
   }, E = (T) => {
     T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
-  }, [C, A] = useAtom$1(currentAddSelection), N = () => {
+  }, [S, A] = useAtom$1(currentAddSelection), N = () => {
     var T;
-    S(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
-  }, S = () => {
+    C(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+  }, C = () => {
     A(null);
   }, y = (T) => {
-    S(), T.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(T);
+    C(), T.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(T);
   };
   useEffect(() => {
     const T = setTimeout(() => {
@@ -7795,7 +7795,7 @@ const Input = ({ node: o }) => {
     const $ = P.getBoundingClientRect(), M = c.getBoundingClientRect();
     $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = P.offsetTop - M.top);
   }, I = (T) => {
-    S();
+    C();
     const D = get(o, "parent.id");
     D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
   };
@@ -7846,7 +7846,7 @@ const Input = ({ node: o }) => {
               T.stopPropagation(), I(o.childIndex);
             },
             onMouseEnter: N,
-            onMouseLeave: S,
+            onMouseLeave: C,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7858,7 +7858,7 @@ const Input = ({ node: o }) => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
               f ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
               k && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(h) ? "opacity-50" : "",
               L && f && "bg-primary/20 text-primary"
@@ -9216,26 +9216,26 @@ const AiAssistant = () => {
       return;
     }
     if (i) {
-      const C = [...a, { key: i, value: d }];
-      r(C), l(a), c(""), p(""), h("");
+      const S = [...a, { key: i, value: d }];
+      r(S), l(a), c(""), p(""), h("");
     }
-  }, v = (C) => {
-    const A = a.filter((N, S) => S !== C);
+  }, v = (S) => {
+    const A = a.filter((N, C) => C !== S);
     r(A), l(A);
-  }, B = (C) => {
-    g(C), c(a[C].key), p(a[C].value);
+  }, B = (S) => {
+    g(S), c(a[S].key), p(a[S].value);
   }, w = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const C = [...a];
-      C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), h("");
+      const S = [...a];
+      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), h("");
     }
-  }, _ = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? w() : b());
-  }, E = useCallback((C) => {
+  }, _ = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
+  }, E = useCallback((S) => {
     const A = (y) => /[.,!?;:]/.test(y), N = (y, j, I) => {
       let L = "", R = "";
       const T = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
@@ -9244,15 +9244,15 @@ const AiAssistant = () => {
         prefixLength: L.length,
         suffixLength: R.length
       };
-    }, S = f.current;
-    if (S) {
-      const y = S.selectionStart || 0, j = S.value || "", I = S.selectionEnd || y;
+    }, C = f.current;
+    if (C) {
+      const y = C.selectionStart || 0, j = C.value || "", I = C.selectionEnd || y;
       if (I > y) {
-        const O = `{{${C}}}`, { text: P } = N(j, y, O), $ = j.slice(0, y) + P + j.slice(I);
+        const O = `{{${S}}}`, { text: P } = N(j, y, O), $ = j.slice(0, y) + P + j.slice(I);
         p($);
         return;
       }
-      const R = `{{${C}}}`, { text: T } = N(j, y, R), D = j.slice(0, y) + T + j.slice(y);
+      const R = `{{${S}}}`, { text: T } = N(j, y, R), D = j.slice(0, y) + T + j.slice(y);
       p(D);
     }
   }, []);
@@ -9260,8 +9260,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (C) => {
-          C.preventDefault(), u !== null ? w() : b();
+        onSubmit: (S) => {
+          S.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -9277,7 +9277,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: x,
                   value: i,
-                  onChange: (C) => c(C.target.value),
+                  onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9298,7 +9298,7 @@ const AiAssistant = () => {
                   rows: 2,
                   ref: f,
                   value: d,
-                  onChange: (C) => p(C.target.value),
+                  onChange: (S) => p(S.target.value),
                   onKeyDown: _,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -9311,10 +9311,10 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
@@ -9438,11 +9438,11 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     r("outline");
   });
-  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = useCallback((C) => {
-    C.preventDefault();
+  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = useCallback((S) => {
+    S.preventDefault();
   }, []), h = useCallback(
-    (C) => {
-      r(n === C ? null : C);
+    (S) => {
+      r(n === S ? null : S);
     },
     [n]
   ), { t: x } = useTranslation(), f = useMemo(
@@ -9451,14 +9451,14 @@ const RootLayout = () => {
   ), k = useBuilderProp("htmlDir", "ltr"), b = find(f, { id: n }) ?? first(f), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const C = find(f, { id: n });
-      C && get(C, "view", "standard") === "standard" && (a.current = n, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
+      const S = find(f, { id: n });
+      S && get(S, "view", "standard") === "standard" && (a.current = n, i(get(S, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, f]);
   const B = useMemo(() => {
     if (n === null) return 0;
-    const C = find(f, { id: n });
-    return get(C, "view", "standard") === "standard" ? v : l;
+    const S = find(f, { id: n });
+    return get(S, "view", "standard") === "standard" ? v : l;
   }, [n, v, l, f]), w = useCallback(() => {
     r(a.current);
   }, [r]), _ = useCallback(() => {
@@ -9468,8 +9468,8 @@ const RootLayout = () => {
     find(f, { id: n }) || r("outline");
   }, [n, f]);
   const E = useCallback(
-    (C) => {
-      h(C);
+    (S) => {
+      h(S);
     },
     [h]
   );
@@ -9483,24 +9483,24 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "top",
-                  panelId: C.id,
-                  isActive: n === C.id,
-                  show: () => E(C.id)
+                  panelId: S.id,
+                  isActive: n === S.id,
+                  show: () => E(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(S.label) }) })
               ] }, "button-top-" + A)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((S, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: C.id,
-                  isActive: n === C.id,
-                  show: () => E(C.id)
+                  panelId: S.id,
+                  isActive: n === S.id,
+                  show: () => E(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(S.label) }) })
               ] }, "button-bottom-" + A)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9634,7 +9634,17 @@ const RootLayout = () => {
     ] }),
     /* @__PURE__ */ jsx("div", { children: a ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-96 w-full" }), children: React__default.createElement(a) }) : null })
   ] }) : null;
-}, CHAI_FEATURE_FLAGS = {}, useChaiFeatureFlags = () => CHAI_FEATURE_FLAGS, featureFlagsAtom = atomWithStorage("chai-feature-flags", []), useChaiFeatureFlag = (o) => {
+}, CHAI_FEATURE_FLAGS = {}, registerChaiFeatureFlag = (o, n) => {
+  if (CHAI_FEATURE_FLAGS[o])
+    throw new Error(`Flag ${o} already exists`);
+  CHAI_FEATURE_FLAGS[o] = { key: o, value: !1, ...n };
+}, registerChaiFeatureFlags = (o) => {
+  Object.entries(o).forEach(([n, r]) => {
+    if (CHAI_FEATURE_FLAGS[n])
+      throw new Error(`Flag ${n} already exists`);
+    registerChaiFeatureFlag(n, r);
+  });
+}, useChaiFeatureFlags = () => CHAI_FEATURE_FLAGS, featureFlagsAtom = atomWithStorage("chai-feature-flags", []), useChaiFeatureFlag = (o) => {
   const [n] = useAtom$1(featureFlagsAtom);
   return n.includes(o);
 }, useToggleChaiFeatureFlag = (o) => {
@@ -9642,7 +9652,7 @@ const RootLayout = () => {
   return () => {
     n.includes(o) ? r(n.filter((l) => l !== o)) : r([...n, o]);
   };
-}, FeatureToggle = ({
+}, IfChaiFeatureFlag = ({ flagKey: o, children: n }) => useChaiFeatureFlag(o) ? n : null, FeatureToggle = ({
   featureKey: o,
   options: n
 }) => {
@@ -9764,10 +9774,10 @@ const RootLayout = () => {
 }, ...m) => {
   const h = m[0] || ((A) => {
     let N = o.get(A);
-    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, C)), N;
+    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, S)), N;
   }), x = m[1] || (() => {
     let A, N;
-    const S = (y) => {
+    const C = (y) => {
       try {
         y();
       } catch (j) {
@@ -9775,25 +9785,25 @@ const RootLayout = () => {
       }
     };
     do {
-      c.f && S(c.f);
+      c.f && C(c.f);
       const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
       a.forEach((I) => {
         var L;
         return (L = n.get(I)) == null ? void 0 : L.l.forEach(j);
-      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(S), a.size && f();
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(C), a.size && f();
     } while (a.size || i.size || l.size);
     if (A)
       throw N;
   }), f = m[2] || (() => {
-    const A = [], N = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
+    const A = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
     for (; y.length; ) {
       const j = y[y.length - 1], I = h(j);
-      if (S.has(j)) {
+      if (C.has(j)) {
         y.pop();
         continue;
       }
       if (N.has(j)) {
-        r.get(j) === I.n && A.push([j, I]), S.add(j), y.pop();
+        r.get(j) === I.n && A.push([j, I]), C.add(j), y.pop();
         continue;
       }
       N.add(j);
@@ -9811,7 +9821,7 @@ const RootLayout = () => {
       R && (k(I), B(I)), r.delete(I);
     }
   }), k = m[3] || ((A) => {
-    var N, S;
+    var N, C;
     const y = h(A);
     if (isAtomStateInitialized(y) && (n.has(A) && r.get(A) !== y.n || Array.from(y.d).every(
       ([P, $]) => (
@@ -9828,13 +9838,13 @@ const RootLayout = () => {
     }, L = (P) => {
       var $;
       if (isSelfAtom(A, P)) {
-        const F = h(P);
-        if (!isAtomStateInitialized(F))
+        const H = h(P);
+        if (!isAtomStateInitialized(H))
           if (hasInitialValue(P))
             setAtomStateValueOrPromise(P, P.init, h);
           else
             throw new Error("no atom init");
-        return returnAtomValue(F);
+        return returnAtomValue(H);
       }
       const M = k(P);
       try {
@@ -9868,19 +9878,19 @@ const RootLayout = () => {
     } catch (P) {
       return delete y.v, y.e = P, ++y.n, y;
     } finally {
-      j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (S = c.c) == null || S.call(c, A));
+      j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (C = c.c) == null || C.call(c, A));
     }
   }), b = m[4] || ((A) => {
     const N = [A];
     for (; N.length; ) {
-      const S = N.pop(), y = h(S);
-      for (const j of getMountedOrPendingDependents(S, y, n)) {
+      const C = N.pop(), y = h(C);
+      for (const j of getMountedOrPendingDependents(C, y, n)) {
         const I = h(j);
         r.set(j, I.n), N.push(j);
       }
     }
   }), v = m[5] || ((A, ...N) => {
-    let S = !0;
+    let C = !0;
     const y = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
       var R;
       const T = h(I);
@@ -9894,25 +9904,25 @@ const RootLayout = () => {
         } else
           return v(I, ...L);
       } finally {
-        S || (f(), x());
+        C || (f(), x());
       }
     };
     try {
       return p(A, y, j, ...N);
     } finally {
-      S = !1;
+      C = !1;
     }
   }), B = m[6] || ((A) => {
     var N;
-    const S = h(A), y = n.get(A);
-    if (y && !isPendingPromise(S.v)) {
-      for (const [j, I] of S.d)
+    const C = h(A), y = n.get(A);
+    if (y && !isPendingPromise(C.v)) {
+      for (const [j, I] of C.d)
         if (!y.d.has(j)) {
           const L = h(j);
           w(j).t.add(A), y.d.add(j), I !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
         }
       for (const j of y.d || [])
-        if (!S.d.has(j)) {
+        if (!C.d.has(j)) {
           y.d.delete(j);
           const I = _(j);
           I == null || I.t.delete(A);
@@ -9920,15 +9930,15 @@ const RootLayout = () => {
     }
   }), w = m[7] || ((A) => {
     var N;
-    const S = h(A);
+    const C = h(A);
     let y = n.get(A);
     if (!y) {
       k(A);
-      for (const j of S.d.keys())
+      for (const j of C.d.keys())
         w(j).t.add(A);
       if (y = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(S.d.keys()),
+        d: new Set(C.d.keys()),
         t: /* @__PURE__ */ new Set()
       }, n.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
         const j = () => {
@@ -9960,14 +9970,14 @@ const RootLayout = () => {
     return y;
   }), _ = m[8] || ((A) => {
     var N;
-    const S = h(A);
+    const C = h(A);
     let y = n.get(A);
     if (y && !y.l.size && !Array.from(y.t).some((j) => {
       var I;
       return (I = n.get(j)) == null ? void 0 : I.d.has(A);
     })) {
       y.u && i.add(y.u), y = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
-      for (const j of S.d.keys()) {
+      for (const j of C.d.keys()) {
         const I = _(j);
         I == null || I.t.delete(A);
       }
@@ -9998,7 +10008,7 @@ const RootLayout = () => {
     B,
     w,
     _
-  ], C = {
+  ], S = {
     get: (A) => returnAtomValue(k(A)),
     set: (A, ...N) => {
       try {
@@ -10014,7 +10024,7 @@ const RootLayout = () => {
       };
     }
   };
-  return Object.defineProperty(C, BUILDING_BLOCKS, { value: E }), C;
+  return Object.defineProperty(S, BUILDING_BLOCKS, { value: E }), S;
 }, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
 let defaultStore;
 const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
@@ -10155,6 +10165,7 @@ export {
   ThemeConfigPanel as ChaiThemeConfigPanel,
   UILibrariesPanel as ChaiUILibrariesPanel,
   UndoRedo as ChaiUndoRedo,
+  IfChaiFeatureFlag,
   PERMISSIONS,
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
@@ -10165,6 +10176,8 @@ export {
   registerBlockSettingTemplate,
   registerBlockSettingWidget,
   registerChaiAddBlockTab,
+  registerChaiFeatureFlag,
+  registerChaiFeatureFlags,
   registerChaiLibrary,
   registerChaiMediaManager,
   registerChaiSaveToLibrary,
@@ -10181,6 +10194,8 @@ export {
   useBuilderReset,
   useCanvasDisplayWidth,
   useCanvasZoom,
+  useChaiFeatureFlag,
+  useChaiFeatureFlags,
   useCodeEditor,
   useCopyBlocks as useCopyBlockIds,
   useCopyToClipboard,
@@ -10218,6 +10233,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
+  useToggleChaiFeatureFlag,
   Ve as useTranslation,
   useUndoManager,
   useUpdateBlocksProps,