@chaibuilder/sdk 2.5.5 → 2.5.7

package/dist/core.js

@@ -736,6 +736,9 @@ const useLanguages = () => {
     selectedLang: n,
     setSelectedLang: l
   };
+}, isPageLoadedAtom = atom(!1), useIsPageLoaded = () => {
+  const [o] = useAtom$1(isPageLoadedAtom);
+  return o;
 }, builderSaveStateAtom = atom("SAVED");
 builderSaveStateAtom.debugLabel = "builderSaveStateAtom";
 const checkMissingTranslations = (o, r) => r ? o.some((n) => {
@@ -751,43 +754,43 @@ const checkMissingTranslations = (o, r) => r ? o.some((n) => {
     return console.warn(`Failed to get block definition for type: ${n._type}`, a), !1;
   }
 }) : !1, useSavePage = () => {
-  const [o, r] = useAtom$1(builderSaveStateAtom), n = useBuilderProp("onSave", async (m) => {
-  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), u = () => {
-    const m = l();
-    return !d || d === p ? !1 : checkMissingTranslations(m.blocks || [], d);
+  const [o, r] = useAtom$1(builderSaveStateAtom), n = useBuilderProp("onSave", async (f) => {
+  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useIsPageLoaded(), g = () => {
+    const f = l();
+    return !d || d === p ? !1 : checkMissingTranslations(f.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
-    async (m = !1) => {
-      if (!c("save_page"))
+    async (f = !1) => {
+      if (!c("save_page") || !u)
         return;
       r("SAVING"), a("SAVING");
-      const f = l();
+      const x = l();
       return await n({
-        autoSave: m,
-        blocks: f.blocks,
+        autoSave: f,
+        blocks: x.blocks,
         theme: i,
-        needTranslations: u()
+        needTranslations: g()
       }), setTimeout(() => {
         r("SAVED"), a("SAVED");
       }, 100), !0;
     },
-    [l, r, i, n, a],
+    [l, r, i, n, a, u],
     3e3
     // save only every 5 seconds
   ), savePageAsync: async () => {
-    if (!c("save_page"))
+    if (!c("save_page") || !u)
       return;
     r("SAVING"), a("SAVING");
-    const m = l();
+    const f = l();
     return await n({
       autoSave: !0,
-      blocks: m.blocks,
+      blocks: f.blocks,
       theme: i,
-      needTranslations: u()
+      needTranslations: g()
     }), setTimeout(() => {
       r("SAVED"), a("SAVED");
     }, 100), !0;
-  }, saveState: o, setSaveState: r, needTranslations: u };
+  }, saveState: o, setSaveState: r, needTranslations: g };
 }, undoManager = new UndoManager();
 undoManager.setLimit(50);
 const undoRedoStateAtom = atom({
@@ -840,13 +843,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, y, b) => {
-      const A = map(x, (B) => {
-        const w = r.find((E) => E._id === B)._parent || null, v = r.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(B);
-        return { _id: B, oldParent: w, oldPosition: v };
-      }), _ = A.find(({ _id: B }) => B === x[0]);
-      _ && _.oldParent === y && _.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(A, ({ _id: B, oldParent: N, oldPosition: w }) => {
-          i([B], N, w);
+      const A = map(x, (_) => {
+        const w = r.find((B) => B._id === _)._parent || null, v = r.filter((B) => w ? B._parent === w : !B._parent).map((B) => B._id).indexOf(_);
+        return { _id: _, oldParent: w, oldPosition: v };
+      }), E = A.find(({ _id: _ }) => _ === x[0]);
+      E && E.oldParent === y && E.oldPosition === b || (i(x, y, b), o({
+        undo: () => each(A, ({ _id: _, oldParent: N, oldPosition: w }) => {
+          i([_], N, w);
         }),
         redo: () => i(x, y, b)
       }));
@@ -858,8 +861,8 @@ const undoRedoStateAtom = atom({
       });
     },
     removeBlocks: (x) => {
-      var _;
-      const y = (_ = first(x)) == null ? void 0 : _._parent, A = r.filter((B) => y ? B._parent === y : !B._parent).indexOf(first(x));
+      var E;
+      const y = (E = first(x)) == null ? void 0 : E._parent, A = r.filter((_) => y ? _._parent === y : !_._parent).indexOf(first(x));
       l(map(x, "_id")), o({
         undo: () => a(x, y, A),
         redo: () => l(map(x, "_id"))
@@ -868,17 +871,17 @@ const undoRedoStateAtom = atom({
     updateBlocks: (x, y, b) => {
       let A = [];
       if (b)
-        A = map(x, (_) => ({ _id: _, ...b }));
+        A = map(x, (E) => ({ _id: E, ...b }));
       else {
-        const _ = keys(y);
-        A = map(x, (B) => {
-          const N = r.find((k) => k._id === B), w = { _id: B };
-          return each(_, (k) => w[k] = N[k]), w;
+        const E = keys(y);
+        A = map(x, (_) => {
+          const N = r.find((k) => k._id === _), w = { _id: _ };
+          return each(E, (k) => w[k] = N[k]), w;
         });
       }
-      c(map(x, (_) => ({ _id: _, ...y }))), o({
+      c(map(x, (E) => ({ _id: E, ...y }))), o({
         undo: () => c(A),
-        redo: () => c(map(x, (_) => ({ _id: _, ...y })))
+        redo: () => c(map(x, (E) => ({ _id: E, ...y })))
       });
     },
     updateBlocksRuntime: (x, y) => {
@@ -893,8 +896,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let y = [];
       y = map(x, (b) => {
-        const A = keys(b), _ = r.find((N) => N._id === b._id), B = {};
-        return each(A, (N) => B[N] = _[N]), B;
+        const A = keys(b), E = r.find((N) => N._id === b._id), _ = {};
+        return each(A, (N) => _[N] = E[N]), _;
       }), c(x), o({
         undo: () => c(y),
         redo: () => c(x)
@@ -2352,12 +2355,15 @@ function getChildBlocks(o, r, n) {
 const getBlockWithChildren = (o, r) => {
   let n = [];
   return n = flattenDeep([...n, ...getChildBlocks(r, o, n)]), n;
-}, pickOnlyAIProps = (o, r) => compact(
-  o.map((n) => {
-    const a = ["_id", "_type", "_parent"], l = pick(n, a), i = getRegisteredChaiBlock(n._type), c = {}, d = get(i, "aiProps", []);
-    for (const p in n)
-      a.includes(p) || d.includes(p) && (c[p] = get(n, `${p}-${r}`, n[p]));
-    return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
+}, pickOnlyAIProps = (o, r, n) => compact(
+  o.map((a) => {
+    const l = ["_id", "_type", "_parent"], i = pick(a, l), c = getRegisteredChaiBlock(a._type), d = {}, p = get(c, "aiProps", []);
+    for (const u in a)
+      if (!l.includes(u) && p.includes(u)) {
+        const g = get(a, `${u}-${r}`, ""), h = get(a, u, "");
+        d[u] = isString(g) && g.trim() || h, n && (d[u] = h);
+      }
+    return isEmpty(d) ? !1 : (has(i, "_parent") && isEmpty(i._parent) && delete i._parent, { ...i, ...d });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
   const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, f) => {
@@ -2365,8 +2371,8 @@ const getBlockWithChildren = (o, r) => {
     for (const y in x) {
       const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: A, classes: _ } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([A, _])).join(" ");
+        const { baseClasses: A, classes: E } = getSplitChaiClasses(b);
+        x[y] = compact(flattenDeep([A, E])).join(" ");
       } else
         y !== "_id" && delete x[y];
     }
@@ -2378,20 +2384,22 @@ const getBlockWithChildren = (o, r) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, A = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], _ = await l(m, addLangToPrompt(x, g, m), A, b), { blocks: B, error: N } = _;
-            if (N) {
-              a(N);
+            const b = p === u ? "" : p;
+            console.log("prompt", x);
+            const A = x.toLowerCase().includes("translate the content"), E = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, A) : [h(f, d)], _ = await l(m, addLangToPrompt(x, g, m), E, b), { blocks: N, error: w } = _;
+            if (w) {
+              a(w);
               return;
             }
             if (m === "styles") {
-              const w = B.map((k) => {
-                for (const v in k)
-                  v !== "_id" && (k[v] = `${STYLES_KEY},${k[v]}`);
-                return k;
+              const k = N.map((v) => {
+                for (const B in v)
+                  B !== "_id" && (v[B] = `${STYLES_KEY},${v[B]}`);
+                return v;
               });
-              c(w);
+              c(k);
             } else
-              i(B);
+              i(N);
             y && y(_);
           } catch (b) {
             a(b);
@@ -3596,17 +3604,17 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: r }) => {
-    const n = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: A, blockType: _ } = useMemo(() => {
+    const n = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: A, blockType: E } = useMemo(() => {
       var j;
       const v = o._type;
-      let E = o[n];
+      let B = o[n];
       const S = getRegisteredChaiBlock(o._type);
-      return f && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(n)) && has(o, `${n}-${f}`) && (E = get(o, `${n}-${f}`)), { blockContent: E, blockType: v };
-    }, [o, f]), B = useCallback(
+      return f && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(n)) && has(o, `${n}-${f}`) && (B = get(o, `${n}-${f}`)), { blockContent: B, blockType: v };
+    }, [o, f]), _ = useCallback(
       (v) => {
         var S;
-        const E = v || ((S = g.current) == null ? void 0 : S.innerText);
-        m([b], { [n]: E }), u(null), c(null), d(-1), x(b ? [b] : []);
+        const B = v || ((S = g.current) == null ? void 0 : S.innerText);
+        m([b], { [n]: B }), u(null), c(null), d(-1), x(b ? [b] : []);
       },
       [b, m, c, x, f]
     ), N = useDebouncedCallback(
@@ -3617,9 +3625,9 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       1e3
     ), w = useCallback(
       (v) => {
-        v.preventDefault(), b && (y.current = b), B(), setTimeout(() => {
-          const E = y.current;
-          y.current = null, x([E]);
+        v.preventDefault(), b && (y.current = b), _(), setTimeout(() => {
+          const B = y.current;
+          y.current = null, x([B]);
         }, 100);
       },
       [x, b, f]
@@ -3627,16 +3635,16 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       var C;
       if (!b) return;
-      const v = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${v}${E}`);
+      const v = `[data-block-id="${b}"]`, B = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${v}${B}`);
       S && ((C = S == null ? void 0 : S.classList) == null || C.add("sr-only"), u(S));
-    }, [b, _, a, i]);
-    const k = useMemo(() => p ? (h(), _ === "RichText" ? /* @__PURE__ */ jsx(
+    }, [b, E, a, i]);
+    const k = useMemo(() => p ? (h(), E === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
         blockContent: A,
         editingElement: p,
         onChange: N,
-        onClose: B,
+        onClose: _,
         onEscape: w
       }
     ) : /* @__PURE__ */ jsx(
@@ -3645,11 +3653,11 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
         editorRef: g,
         blockContent: A,
         editingElement: p,
-        onClose: B,
+        onClose: _,
         onChange: N,
         onEscape: w
       }
-    )) : null, [p, b, _, A, B, f]);
+    )) : null, [p, b, E, A, _, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       k,
       r
@@ -3690,17 +3698,17 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       key: y
     }) : applyLanguage(i, d, c),
     [i, d, c, g, m, x, y]
-  ), A = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), _ = useMemo(
+  ), A = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), E = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
-  ), B = useMemo(
+  ), _ = useMemo(
     () => ({
       blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
       lang: d || p,
       ...b,
       ...A,
-      ..._,
+      ...E,
       ...o
     }),
     [
@@ -3710,13 +3718,13 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       p,
       b,
       A,
-      _,
+      E,
       o
     ]
   ), N = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
   if (isNull(f) || h.includes(i._id)) return null;
   let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
-    ...B,
+    ..._,
     children: n({
       _id: i._id,
       _type: i._type,
@@ -4028,15 +4036,15 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     const b = isArray(y) ? first(y) : y;
     if (b) {
       r(b == null ? void 0 : b.url);
-      const A = b == null ? void 0 : b.width, _ = b == null ? void 0 : b.height;
+      const A = b == null ? void 0 : b.width, E = b == null ? void 0 : b.height;
       if (c != null && c._id) {
-        const B = {
+        const _ = {
           ...A && { width: A },
-          ..._ && { height: _ },
+          ...E && { height: E },
           ...b.description && { alt: b.description }
         };
-        if (set(B, u, b.id), isEmpty(B)) return;
-        d([c._id], B);
+        if (set(_, u, b.id), isEmpty(_)) return;
+        d([c._id], _);
       }
     }
   }, x = useCallback(() => {
@@ -4203,12 +4211,12 @@ const DataBindingSelector = ({
         r(`{{${g}}}`, {}, n);
         return;
       }
-      const m = (b) => /[.,!?;:]/.test(b), f = (b, A, _) => {
-        let B = "", N = "";
+      const m = (b) => /[.,!?;:]/.test(b), f = (b, A, E) => {
+        let _ = "", N = "";
         const w = A > 0 ? b[A - 1] : "", k = A < b.length ? b[A] : "";
-        return A > 0 && (w === "." || !m(w) && w !== " ") && (B = " "), A < b.length && !m(k) && k !== " " && (N = " "), {
-          text: B + _ + N,
-          prefixLength: B.length,
+        return A > 0 && (w === "." || !m(w) && w !== " ") && (_ = " "), A < b.length && !m(k) && k !== " " && (N = " "), {
+          text: _ + E + N,
+          prefixLength: _.length,
           suffixLength: N.length
         };
       }, x = document.getElementById(n);
@@ -4219,27 +4227,27 @@ const DataBindingSelector = ({
         if (b) {
           const A = `{{${g}}}`;
           b.commands.focus();
-          const { from: _, to: B } = b.state.selection;
-          if (_ !== B)
+          const { from: E, to: _ } = b.state.selection;
+          if (E !== _)
             b.chain().deleteSelection().insertContent(A).run();
           else {
-            const { state: w } = b, k = w.selection.from, v = w.doc.textBetween(Math.max(0, k - 1), k), E = w.doc.textBetween(k, Math.min(k + 1, w.doc.content.size));
+            const { state: w } = b, k = w.selection.from, v = w.doc.textBetween(Math.max(0, k - 1), k), B = w.doc.textBetween(k, Math.min(k + 1, w.doc.content.size));
             let S = "";
             k > 0 && v !== " " && !m(v) && (S = " ");
             let C = "";
-            E && E !== " " && !m(E) && (C = " "), b.chain().insertContent(S + A + C).run();
+            B && B !== " " && !m(B) && (C = " "), b.chain().insertContent(S + A + C).run();
           }
           setTimeout(() => r(b.getHTML(), {}, n), 100);
           return;
         }
       } else {
-        const b = x, A = b.selectionStart || 0, _ = b.value || "", B = b.selectionEnd || A;
-        if (B > A) {
-          const E = `{{${g}}}`, { text: S } = f(_, A, E), C = _.slice(0, A) + S + _.slice(B);
+        const b = x, A = b.selectionStart || 0, E = b.value || "", _ = b.selectionEnd || A;
+        if (_ > A) {
+          const B = `{{${g}}}`, { text: S } = f(E, A, B), C = E.slice(0, A) + S + E.slice(_);
           r(C, {}, n);
           return;
         }
-        const w = `{{${g}}}`, { text: k } = f(_, A, w), v = _.slice(0, A) + k + _.slice(A);
+        const w = `{{${g}}}`, { text: k } = f(E, A, w), v = E.slice(0, A) + k + E.slice(A);
         r(v, {}, n);
       }
     },
@@ -4261,8 +4269,8 @@ const DataBindingSelector = ({
   pageTypes: r,
   onChange: n
 }) => {
-  var E;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), A = useRef(null), _ = (E = r == null ? void 0 : r.find((S) => S.key === u)) == null ? void 0 : E.name;
+  var B;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), A = useRef(null), E = (B = r == null ? void 0 : r.find((S) => S.key === u)) == null ? void 0 : B.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const S = split(o, ":"), C = get(S, 1, "page") || "page";
@@ -4271,7 +4279,7 @@ const DataBindingSelector = ({
       j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const B = useDebouncedCallback(
+  const _ = useDebouncedCallback(
     async (S) => {
       if (isEmpty(S))
         x([]);
@@ -4312,7 +4320,7 @@ const DataBindingSelector = ({
   const k = () => {
     m(""), x([]), b(-1), p(!1), n("");
   }, v = (S) => {
-    m(S), p(!isEmpty(S)), c(!0), B(S);
+    m(S), p(!isEmpty(S)), c(!0), _(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(r, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
@@ -4324,7 +4332,7 @@ const DataBindingSelector = ({
           value: h,
           onChange: (S) => v(S.target.value),
           onKeyDown: w,
-          placeholder: a(`Search ${_ ?? ""}`),
+          placeholder: a(`Search ${E ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
@@ -4657,11 +4665,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (f !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: b } = u, A = b.selection.from, _ = b.doc.textBetween(Math.max(0, A - 1), A), B = b.doc.textBetween(A, Math.min(A + 1, b.doc.content.size));
+      const { state: b } = u, A = b.selection.from, E = b.doc.textBetween(Math.max(0, A - 1), A), _ = b.doc.textBetween(A, Math.min(A + 1, b.doc.content.size));
       let N = "";
-      A > 0 && _ !== " " && !/[.,!?;:]/.test(_) && (N = " ");
+      A > 0 && E !== " " && !/[.,!?;:]/.test(E) && (N = " ");
       let w = "";
-      B && B !== " " && !/[.,!?;:]/.test(B) && (w = " "), u.chain().insertContent(N + m + w).run();
+      _ && _ !== " " && !/[.,!?;:]/.test(_) && (w = " "), u.chain().insertContent(N + m + w).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4961,25 +4969,25 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   const { selectedLang: h, fallbackLang: m, languages: f } = useLanguages(), x = useMemo(
     () => isEmpty(f) ? "" : isEmpty(h) ? m : h,
     [f, h, m]
-  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), A = useSelectedBlock(), _ = useRegisteredChaiBlocks(), B = useMemo(
-    () => get(_, [A == null ? void 0 : A._type, "i18nProps"], []),
-    [_, A == null ? void 0 : A._type]
+  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), A = useSelectedBlock(), E = useRegisteredChaiBlocks(), _ = useMemo(
+    () => get(E, [A == null ? void 0 : A._type, "i18nProps"], []),
+    [E, A == null ? void 0 : A._type]
   ), [N, w] = useState(null);
   if (c)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: a });
-  const v = B == null ? void 0 : B.includes(o.replace("root.", ""));
+  const v = _ == null ? void 0 : _.includes(o.replace("root.", ""));
   if (p.type === "array") {
-    const E = N === o;
+    const B = N === o;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       p.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => w(E ? null : o),
+          onClick: () => w(B ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            E ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            B ? /* @__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: n }),
             " ",
@@ -4998,7 +5006,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           ]
         }
       ) }),
-      (u == null ? void 0 : u.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${E ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (u == null ? void 0 : u.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${B ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         a,
         l,
         i
@@ -5026,8 +5034,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         DataBindingSelector,
         {
           schema: p,
-          onChange: (E) => {
-            g(E, u, o);
+          onChange: (B) => {
+            g(B, u, o);
           },
           id: o,
           formData: u
@@ -5144,21 +5152,21 @@ function BlockSettings() {
     k && (n([r._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
   }, b = ({ formData: w }, k) => {
     k && (n([g._id], { [k]: get(w, k) }), x({ formData: w }, k, { [k]: get(c, k) }));
-  }, { schema: A, uiSchema: _ } = useMemo(() => {
+  }, { schema: A, uiSchema: E } = useMemo(() => {
     const w = r == null ? void 0 : r._type;
     if (!w)
       return { schema: {}, uiSchema: {} };
     try {
       const { schema: k, uiSchema: v } = getBlockFormSchemas(w);
       if (w === "Repeater") {
-        const E = get(r, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(v, "filter", { "ui:widget": "collectionSelect" }), set(v, "sort", { "ui:widget": "collectionSelect" })) : (set(v, "filter", { "ui:widget": "hidden" }), set(v, "sort", { "ui:widget": "hidden" }));
+        const B = get(r, "repeaterItems", "");
+        startsWith(B, `{{${COLLECTION_PREFIX}`) ? (set(v, "filter", { "ui:widget": "collectionSelect" }), set(v, "sort", { "ui:widget": "collectionSelect" })) : (set(v, "filter", { "ui:widget": "hidden" }), set(v, "sort", { "ui:widget": "hidden" }));
       }
       return { schema: k, uiSchema: v };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [r]), { wrapperSchema: B, wrapperUiSchema: N } = useMemo(() => {
+  }, [r]), { wrapperSchema: _, wrapperUiSchema: N } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
     const w = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: v = {} } = getBlockFormSchemas(w);
@@ -5190,7 +5198,7 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
           formData: m,
-          schema: B,
+          schema: _,
           uiSchema: N
         }
       ) })
@@ -5202,7 +5210,7 @@ function BlockSettings() {
         onChange: y,
         formData: i,
         schema: A,
-        uiSchema: _
+        uiSchema: E
       }
     )
   ] });
@@ -5413,7 +5421,7 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [A, _] = useState(!1), [B, N] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [A, E] = useState(!1), [_, N] = useState(!1);
   useEffect(() => {
     const { value: S, unit: C } = getClassValueAndUnit(i);
     if (C === "") {
@@ -5440,7 +5448,7 @@ const BlockStylingProps = () => {
       S ? k(T) : w(T);
     },
     [w, k, a, h, d, u]
-  ), E = useCallback(
+  ), B = useCallback(
     (S) => {
       const C = getUserInputValues(`${a}`, u);
       if (get(C, "error", !1)) {
@@ -5487,11 +5495,11 @@ const BlockStylingProps = () => {
             const C = parseInt$1(S.target.value);
             let j = isNaN$1(C) ? 0 : C;
             S.keyCode === 38 && (j += 1), S.keyCode === 40 && (j -= 1);
-            const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
-            k(R);
+            const I = `${j}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
+            k(P);
           },
           onKeyUp: (S) => {
-            B && (S.preventDefault(), N(!1));
+            _ && (S.preventDefault(), N(!1));
           },
           onBlur: () => v(),
           onChange: (S) => {
@@ -5527,7 +5535,7 @@ const BlockStylingProps = () => {
             units: u,
             current: h,
             onSelect: (S) => {
-              n(!1), m(S), E(S);
+              n(!1), m(S), B(S);
             }
           }
         ) })
@@ -5536,9 +5544,9 @@ const BlockStylingProps = () => {
     ["none", "auto"].indexOf(h) !== -1 || A ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => _(!0),
+        onDragStart: () => E(!0),
         onDragEnd: (S) => {
-          if (b(() => ""), _(!1), isEmpty(S))
+          if (b(() => ""), E(!1), isEmpty(S))
             return;
           const C = `${S}`, I = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
           w(I);
@@ -6013,21 +6021,21 @@ const COLOR_PROP = {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
     (k, v = !0) => {
-      const E = { dark: p, mq: g, mod: u, cls: k, property: l, fullCls: "" };
-      (p || u !== "") && (E.mq = "xs");
-      const S = generateFullClsName(E);
+      const B = { dark: p, mq: g, mod: u, cls: k, property: l, fullCls: "" };
+      (p || u !== "") && (B.mq = "xs");
+      const S = generateFullClsName(B);
       m(x, [S], v);
     },
     [x, p, g, u, l, m]
   ), A = useCallback(() => {
     f(x, [y], !0);
-  }, [x, y, f]), _ = useMemo(() => canChangeClass(h, g), [h, g]);
+  }, [x, y, f]), E = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
-    i(_, h);
-  }, [_, i, h]);
-  const [, , B] = useScreenSizeWidth(), N = useCallback(
+    i(E, h);
+  }, [E, i, h]);
+  const [, , _] = useScreenSizeWidth(), N = useCallback(
     (k) => {
-      B({
+      _({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6036,9 +6044,9 @@ const COLOR_PROP = {
         "2xl": 1920
       }[k]);
     },
-    [B]
+    [_]
   ), w = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: _, canReset: h && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: h && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !w ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -6058,7 +6066,7 @@ const COLOR_PROP = {
         n === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         n === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : _ && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6459,24 +6467,24 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var I;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), A = b.split(" ").filter((T) => !isEmpty(T)), _ = () => {
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), A = b.split(" ").filter((T) => !isEmpty(T)), E = () => {
     const T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(h, T, !0), x("");
-  }, [B, N] = useState([]), w = ({ value: T }) => {
-    const R = T.trim().toLowerCase(), L = R.match(/.+:/g);
+  }, [_, N] = useState([]), w = ({ value: T }) => {
+    const P = T.trim().toLowerCase(), L = P.match(/.+:/g);
     let D = [];
     if (L && L.length > 0) {
-      const [P] = L, M = R.replace(P, "");
+      const [R] = L, M = P.replace(R, "");
       D = i.search(M).map((O) => ({
         ...O,
-        item: { ...O.item, name: P + O.item.name }
+        item: { ...O.item, name: R + O.item.name }
       }));
     } else
-      D = i.search(R);
+      D = i.search(P);
     return N(map(D, "item"));
   }, k = () => {
     N([]);
-  }, v = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
+  }, v = (T) => T.name, B = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6491,16 +6499,16 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (T) => {
-        T.key === "Enter" && f.trim() !== "" && _();
+        T.key === "Enter" && f.trim() !== "" && E();
       },
-      onChange: (T, { newValue: R }) => x(R),
+      onChange: (T, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
   ), C = (T) => {
     debugger;
-    const R = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(h, [T]), u(h, R, !0), n(""), l(-1);
+    const P = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(h, [T]), u(h, P, !0), n(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
@@ -6529,11 +6537,11 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: B,
+          suggestions: _,
           onSuggestionsFetchRequested: w,
           onSuggestionsClearRequested: k,
           getSuggestionValue: v,
-          renderSuggestion: E,
+          renderSuggestion: B,
           inputProps: S,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
@@ -6550,7 +6558,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: _,
+          onClick: E,
           disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -6558,7 +6566,7 @@ function ManualClasses() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: A.map(
-      (T, R) => a === R ? /* @__PURE__ */ jsx(
+      (T, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
@@ -7013,7 +7021,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var h, m, f, x, y, b, A, _, B, N;
+  var h, m, f, x, y, b, A, E, _, N;
   if (n.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
@@ -7069,14 +7077,14 @@ const CoreBlock = ({
     a.content = getTextContent(w);
     const k = find(
       n.children || [],
-      (v) => (v == null ? void 0 : v.tagName) === "span" && some(v.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg")
+      (v) => (v == null ? void 0 : v.tagName) === "span" && some(v.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg")
     );
     if (k) {
-      const v = find(k.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg");
+      const v = find(k.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg");
       if (v) {
         a.icon = stringify([v]);
-        const { height: E, width: S } = getSvgDimensions(v, "16px", "16px");
-        a.iconHeight = E, a.iconWidth = S;
+        const { height: B, width: S } = getSvgDimensions(v, "16px", "16px");
+        a.iconHeight = B, a.iconWidth = S;
       }
     }
     return [a];
@@ -7092,10 +7100,10 @@ const CoreBlock = ({
     if (k && v)
       a.styles = `${STYLES_KEY}, ${cn$2(`w-${v} h-${k}`, w)}`.trim(), a.height = k == null ? void 0 : k.replace("px", ""), a.width = v == null ? void 0 : v.replace("px", "");
     else {
-      const E = (_ = find(n.attributes, { key: "height" })) == null ? void 0 : _.value, S = (B = find(n.attributes, { key: "width" })) == null ? void 0 : B.value;
-      E && S ? (a.styles = `${STYLES_KEY}, ${cn$2(`w-[${S}px] h-[${E}px]`, w)}`.trim(), a.height = E, a.width = S) : a.styles = `${STYLES_KEY}, ${cn$2("w-full h-full", w)}`.trim();
+      const B = (E = find(n.attributes, { key: "height" })) == null ? void 0 : E.value, S = (_ = find(n.attributes, { key: "width" })) == null ? void 0 : _.value;
+      B && S ? (a.styles = `${STYLES_KEY}, ${cn$2(`w-[${S}px] h-[${B}px]`, w)}`.trim(), a.height = B, a.width = S) : a.styles = `${STYLES_KEY}, ${cn$2("w-full h-full", w)}`.trim();
     }
-    return n.attributes = filter(n.attributes, (E) => !includes(["style", "width", "height", "class"], E.key)), a.icon = stringify([n]), [a];
+    return n.attributes = filter(n.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([n]), [a];
   } else if (n.tagName == "option" && r && ((N = r.block) == null ? void 0 : N._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
@@ -7212,18 +7220,18 @@ const registerChaiLibrary = (o, r) => {
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (r == null ? void 0 : r.getBlock) || (() => []), [r]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (_) => {
-    const B = has(_, "styles_attrs.data-page-section");
-    return _._type === "Box" && B;
+  const [l, i] = useState(!1), c = useMemo(() => (r == null ? void 0 : r.getBlock) || (() => []), [r]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (E) => {
+    const _ = has(E, "styles_attrs.data-page-section");
+    return E._type === "Box" && _;
   }, b = useCallback(
-    async (_) => {
-      if (_.stopPropagation(), has(o, "component")) {
+    async (E) => {
+      if (E.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      let B = await c({ library: r, block: o });
-      typeof B == "string" && (B = getBlocksFromHTML(B)), isEmpty(B) || p(syncBlocksWithDefaults(B), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      let _ = await c({ library: r, block: o });
+      typeof _ == "string" && (_ = getBlocksFromHTML(_)), isEmpty(_) || p(syncBlocksWithDefaults(_), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
   );
@@ -7234,18 +7242,18 @@ const registerChaiLibrary = (o, r) => {
         onClick: l ? () => {
         } : b,
         draggable: f ? "true" : "false",
-        onDragStart: async (_) => {
-          const B = await c({ library: r, block: o });
+        onDragStart: async (E) => {
+          const _ = await c({ library: r, block: o });
           let N = n;
-          if (y(first(B)) && (N = null), !isEmpty(B)) {
-            const w = { blocks: B, uiLibrary: !0, parent: N };
-            if (_.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
+          if (y(first(_)) && (N = null), !isEmpty(_)) {
+            const w = { blocks: _, uiLibrary: !0, parent: N };
+            if (E.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
               const k = new Image();
               k.src = o.preview, k.onload = () => {
-                _.dataTransfer.setDragImage(k, 0, 0);
+                E.dataTransfer.setDragImage(k, 0, 0);
               };
             } else
-              _.dataTransfer.setDragImage(new Image(), 0, 0);
+              E.dataTransfer.setDragImage(new Image(), 0, 0);
             x(w), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
@@ -7298,9 +7306,9 @@ const registerChaiLibrary = (o, r) => {
       return;
     }
   }, [y, b]);
-  const _ = get(y, b, []), B = useRef(null), { t: N } = useTranslation(), w = (C) => {
-    B.current && (clearTimeout(B.current), B.current = null), B.current = setTimeout(() => {
-      B.current && A(C);
+  const E = get(y, b, []), _ = useRef(null), { t: N } = useTranslation(), w = (C) => {
+    _.current && (clearTimeout(_.current), _.current = null), _.current = setTimeout(() => {
+      _.current && A(C);
     }, 400);
   }, k = () => {
     i != null && i.id && p(i.id);
@@ -7312,7 +7320,7 @@ const registerChaiLibrary = (o, r) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const E = filter(_, (C, j) => j % 2 === 0), S = filter(_, (C, j) => j % 2 === 1);
+  const B = filter(E, (C, j) => j % 2 === 0), S = filter(E, (C, 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" }),
@@ -7350,7 +7358,7 @@ const registerChaiLibrary = (o, r) => {
             "div",
             {
               onMouseEnter: () => w(j),
-              onMouseLeave: () => clearTimeout(B.current),
+              onMouseLeave: () => clearTimeout(_.current),
               role: "button",
               onClick: () => A(j),
               className: cn$2(
@@ -7369,11 +7377,11 @@ const registerChaiLibrary = (o, r) => {
       /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => B.current ? clearTimeout(B.current) : null,
+          onMouseEnter: () => _.current ? clearTimeout(_.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(_) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((C, j) => /* @__PURE__ */ jsx(
+            isEmpty(E) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: B.map((C, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -7428,14 +7436,14 @@ const registerChaiLibrary = (o, r) => {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const m = Object.entries(a).map(([x, y]) => {
-          const b = y, A = b.type || "partial", _ = formatReadableName(A);
+          const b = y, A = b.type || "partial", E = formatReadableName(A);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(b.name || x),
             description: b.description || "",
             icon: Globe,
-            group: _,
+            group: E,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
@@ -7507,9 +7515,9 @@ const registerChaiLibrary = (o, r) => {
   }), []);
   const A = useCallback((C) => {
     y(C), b.current && b.current(C);
-  }, []), _ = useCallback(() => {
+  }, []), E = useCallback(() => {
     y(null), b.current && b.current.cancel();
-  }, []), B = useCallback((C) => {
+  }, []), _ = useCallback((C) => {
     b.current && b.current.cancel(), f(C), y(null);
   }, []), N = useMemo(
     () => d ? values(r).filter(
@@ -7527,7 +7535,7 @@ const registerChaiLibrary = (o, r) => {
   ), k = useMemo(
     () => sortBy(w, (C) => CORE_GROUPS.indexOf(C) === -1 ? 99 : CORE_GROUPS.indexOf(C)),
     [w]
-  ), v = useMemo(() => m === "all" ? N : filter(values(N), { group: m }), [N, m]), E = useMemo(() => m === "all" ? k : [m], [k, m]);
+  ), v = useMemo(() => m === "all" ? N : filter(values(N), { group: m }), [N, m]), B = useMemo(() => m === "all" ? k : [m], [k, m]);
   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,
@@ -7545,9 +7553,9 @@ const registerChaiLibrary = (o, r) => {
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B("all"),
+            onClick: () => _("all"),
             onMouseEnter: () => A("all"),
-            onMouseLeave: _,
+            onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
@@ -7556,9 +7564,9 @@ const registerChaiLibrary = (o, r) => {
         k.map((C) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => B(C),
+            onClick: () => _(C),
             onMouseEnter: () => A(C),
-            onMouseLeave: _,
+            onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === C || x === C ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(C.toLowerCase()))
           },
@@ -7570,7 +7578,7 @@ const registerChaiLibrary = (o, r) => {
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((C) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: B.map((C) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(C.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
           m === "all" ? filter(values(v), { group: C }) : values(v),
@@ -7935,22 +7943,22 @@ const Input = ({ node: o }) => {
   var r;
   return o != null && o._name ? o._name : (o == null ? void 0 : o._type) === "Box" && (o != null && o.tag) && (o == null ? void 0 : o.tag) !== "div" ? startCase(o.tag) : ((r = o == null ? void 0 : o._type) == null ? void 0 : r.split("/").pop()) || "";
 }, Node = memo(({ node: o, style: r, dragHandle: n }) => {
-  var R;
+  var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: A, handleClick: _ } = o, B = (L) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: A, handleClick: E } = o, _ = (L) => {
     L.stopPropagation(), !l.includes(m) && o.toggle();
   }, N = (L) => {
     L.isInternal && (p = L.isOpen, L.isOpen && L.close());
   }, w = (L) => {
     L.isInternal && p !== null && (p ? L.open() : L.close(), p = null);
-  }, [k, v] = useAtom$1(currentAddSelection), E = () => {
+  }, [k, v] = useAtom$1(currentAddSelection), B = () => {
     var L;
     S(), o.parent.isSelected || v((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
   }, S = () => {
     v(null);
   }, C = (L) => {
-    S(), L.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), _(L);
+    S(), L.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), E(L);
   };
   useEffect(() => {
     const L = setTimeout(() => {
@@ -7959,10 +7967,10 @@ const Input = ({ node: o }) => {
     return () => clearTimeout(L);
   }, [y, o, b]);
   const j = (L, D) => {
-    const P = c.contentDocument || c.contentWindow.document, M = P.querySelector(`[data-block-id=${L}]`);
+    const R = c.contentDocument || c.contentWindow.document, M = R.querySelector(`[data-block-id=${L}]`);
     M && M.setAttribute("data-drop", D);
     const $ = M.getBoundingClientRect(), O = c.getBoundingClientRect();
-    $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (P.documentElement.scrollTop = M.offsetTop - O.top);
+    $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (R.documentElement.scrollTop = M.offsetTop - O.top);
   }, I = (L) => {
     S();
     const D = get(o, "parent.id");
@@ -8008,13 +8016,13 @@ const Input = ({ node: o }) => {
         L.preventDefault(), j(m, "no");
       },
       children: [
-        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (L) => {
               L.stopPropagation(), I(o.childIndex);
             },
-            onMouseEnter: E,
+            onMouseEnter: B,
             onMouseLeave: S,
             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" }) })
@@ -8038,7 +8046,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: B, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -8354,9 +8362,36 @@ const Input = ({ node: o }) => {
       /* @__PURE__ */ jsx(SelectContent, { children: a.map((l) => /* @__PURE__ */ jsx(SelectItem, { value: l.family, children: l.family }, l.family)) })
     ] })
   ] });
+}, defaultShadcnPreset = {
+  fontFamily: {
+    heading: "Inter",
+    body: "Inter"
+  },
+  borderRadius: "6px",
+  colors: {
+    background: ["#ffffff", "#0a0a0a"],
+    foreground: ["#0a0a0a", "#fafafa"],
+    primary: ["#171717", "#e5e5e5"],
+    "primary-foreground": ["#fafafa", "#171717"],
+    secondary: ["#f5f5f5", "#262626"],
+    "secondary-foreground": ["#171717", "#fafafa"],
+    muted: ["#f5f5f5", "#262626"],
+    "muted-foreground": ["#737373", "#a1a1a1"],
+    accent: ["#f5f5f5", "#404040"],
+    "accent-foreground": ["#171717", "#fafafa"],
+    destructive: ["#e7000b", "#ff6467"],
+    "destructive-foreground": ["#ffffff", "#fafafa"],
+    border: ["#e5e5e5", "#282828"],
+    input: ["#e5e5e5", "#343434"],
+    ring: ["#a1a1a1", "#737373"],
+    card: ["#ffffff", "#171717"],
+    "card-foreground": ["#0a0a0a", "#fafafa"],
+    popover: ["#ffffff", "#262626"],
+    "popover-foreground": ["#0a0a0a", "#fafafa"]
+  }
 }, LazyCssImportModal = lazy(
   () => import("./css-import-modal-CcUf6F6T.js").then((o) => ({ default: o.CssImportModal }))
-), PREV_THEME_KEY = "chai-builder-previous-theme", setPreviousTheme = (o) => {
+), PREV_THEME_KEY = "chai-builder-previous-theme", DEFAULT_THEME_PRESET = [{ shadcn_default: defaultShadcnPreset }], setPreviousTheme = (o) => {
   if (!(typeof window > "u"))
     try {
       localStorage.setItem(PREV_THEME_KEY, JSON.stringify(o));
@@ -8371,7 +8406,9 @@ const Input = ({ node: o }) => {
       console.warn("Failed to clear previous theme from localStorage:", o);
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r, n] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), [g, h] = useTheme(), m = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
+  const [r, n] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
+  d && !d.some((w) => Object.keys(w)[0] === "shadcn_default") && d.push(...DEFAULT_THEME_PRESET);
+  const [g, h] = useTheme(), m = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
     (w) => {
       const k = { ...g };
       setPreviousTheme(k), h(w), toast.success("Theme updated", {
@@ -8410,7 +8447,7 @@ const Input = ({ node: o }) => {
     },
     [g],
     200
-  ), _ = React.useCallback(
+  ), E = React.useCallback(
     (w) => {
       h(() => ({
         ...g,
@@ -8418,7 +8455,7 @@ const Input = ({ node: o }) => {
       }));
     },
     [g]
-  ), B = useDebouncedCallback(
+  ), _ = useDebouncedCallback(
     (w, k) => {
       h(() => {
         const v = get(g, `colors.${w}`);
@@ -8440,10 +8477,10 @@ const Input = ({ node: o }) => {
         ColorPickerInput,
         {
           value: v,
-          onChange: (E) => B(k, E)
+          onChange: (B) => _(k, B)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: k.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!k.toLowerCase().includes("foreground") && !k.toLowerCase().includes("border") && !k.toLowerCase().includes("input") && !k.toLowerCase().includes("ring") && !k.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: k.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((B) => B.charAt(0).toUpperCase() + B.slice(1)).join(" ") + (!k.toLowerCase().includes("foreground") && !k.toLowerCase().includes("border") && !k.toLowerCase().includes("input") && !k.toLowerCase().includes("ring") && !k.toLowerCase().includes("background") ? " Background" : "") })
     ] }, k) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -8491,7 +8528,7 @@ const Input = ({ node: o }) => {
             ] }),
             /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: _ }) })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: E }) })
         ] }),
         /* @__PURE__ */ jsx(Separator, {}),
         (m == null ? void 0 : m.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -9250,19 +9287,19 @@ function AIChatPanel() {
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      r((_) => [..._, A]), i(!1), d(null);
+      r((E) => [...E, A]), i(!1), d(null);
     }, 1500);
   }, m = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
   }, f = (b) => {
-    var _;
-    const A = (_ = b.target.files) == null ? void 0 : _[0];
+    var E;
+    const A = (E = b.target.files) == null ? void 0 : E[0];
     if (A) {
-      const B = new FileReader();
-      B.onload = (N) => {
+      const _ = new FileReader();
+      _.onload = (N) => {
         var w;
         d((w = N.target) == null ? void 0 : w.result);
-      }, B.readAsDataURL(A);
+      }, _.readAsDataURL(A);
     }
   }, x = () => {
     var b;
@@ -9470,11 +9507,11 @@ const AiAssistant = () => {
       n(k), l(a), c(""), p(""), m("");
     }
   }, A = (k) => {
-    const v = a.filter((E, S) => S !== k);
+    const v = a.filter((B, S) => S !== k);
     n(v), l(v);
-  }, _ = (k) => {
+  }, E = (k) => {
     g(k), c(a[k].key), p(a[k].value);
-  }, B = () => {
+  }, _ = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -9484,25 +9521,25 @@ const AiAssistant = () => {
       k[u] = { key: i, value: d }, n(k), l(k), g(null), c(""), p(""), m("");
     }
   }, N = (k) => {
-    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? B() : b());
+    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? _() : b());
   }, w = useCallback((k) => {
-    const v = (C) => /[.,!?;:]/.test(C), E = (C, j, I) => {
-      let T = "", R = "";
+    const v = (C) => /[.,!?;:]/.test(C), B = (C, j, I) => {
+      let T = "", P = "";
       const L = j > 0 ? C[j - 1] : "", D = j < C.length ? C[j] : "";
-      return j > 0 && (L === "." || !v(L) && L !== " ") && (T = " "), j < C.length && !v(D) && D !== " " && (R = " "), {
-        text: T + I + R,
+      return j > 0 && (L === "." || !v(L) && L !== " ") && (T = " "), j < C.length && !v(D) && D !== " " && (P = " "), {
+        text: T + I + P,
         prefixLength: T.length,
-        suffixLength: R.length
+        suffixLength: P.length
       };
     }, S = x.current;
     if (S) {
       const C = S.selectionStart || 0, j = S.value || "", I = S.selectionEnd || C;
       if (I > C) {
-        const P = `{{${k}}}`, { text: M } = E(j, C, P), $ = j.slice(0, C) + M + j.slice(I);
+        const R = `{{${k}}}`, { text: M } = B(j, C, R), $ = j.slice(0, C) + M + j.slice(I);
         p($);
         return;
       }
-      const R = `{{${k}}}`, { text: L } = E(j, C, R), D = j.slice(0, C) + L + j.slice(C);
+      const P = `{{${k}}}`, { text: L } = B(j, C, P), D = j.slice(0, C) + L + j.slice(C);
       p(D);
     }
   }, []);
@@ -9511,7 +9548,7 @@ const AiAssistant = () => {
       "form",
       {
         onSubmit: (k) => {
-          k.preventDefault(), u !== null ? B() : b();
+          k.preventDefault(), u !== null ? _() : b();
         },
         className: "space-y-3",
         children: [
@@ -9567,7 +9604,7 @@ const AiAssistant = () => {
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: k.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: () => _(v), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(v), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(v), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
     ] }, v)) })
@@ -9749,11 +9786,11 @@ const RootLayout = () => {
       k && get(k, "view", "standard") === "standard" && (a.current = r, i(get(k, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [r, x]);
-  const _ = useMemo(() => {
+  const E = useMemo(() => {
     if (r === null) return 0;
     const k = find(x, { id: r });
     return get(k, "view", "standard") === "standard" ? A : l;
-  }, [r, A, l, x]), B = useCallback(() => {
+  }, [r, A, l, x]), _ = useCallback(() => {
     n(a.current);
   }, [n]), N = useCallback(() => {
     n("outline");
@@ -9802,8 +9839,8 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: _ },
-                animate: { width: _ },
+                initial: { width: E },
+                animate: { width: E },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: r !== null && get(b, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -9859,7 +9896,7 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(
+    r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
@@ -9877,7 +9914,7 @@ const RootLayout = () => {
       }
     ) }),
     " ",
-    r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => B(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${A}px` }, children: [
+    r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${A}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(b, "icon", null) }),
         /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
@@ -9908,7 +9945,7 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                   /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { onClick: () => B(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
                 close: N
@@ -9964,7 +10001,7 @@ const RootLayout = () => {
     });
   }, m = (x) => {
     if (!c) return;
-    const y = x.clientX - p.x, b = x.clientY - p.y, A = x.currentTarget, _ = A.offsetWidth, B = A.offsetHeight, N = window.innerWidth - _, w = window.innerHeight - B, k = Math.max(0, Math.min(y, N)), v = Math.max(0, Math.min(b, w));
+    const y = x.clientX - p.x, b = x.clientY - p.y, A = x.currentTarget, E = A.offsetWidth, _ = A.offsetHeight, N = window.innerWidth - E, w = window.innerHeight - _, k = Math.max(0, Math.min(y, N)), v = Math.max(0, Math.min(b, w));
     n(k, v);
   }, f = () => {
     d(!1);
@@ -10143,10 +10180,10 @@ const RootLayout = () => {
   return (x = m.onMount) == null ? void 0 : x.call(m, f);
 }, ...h) => {
   const m = h[0] || ((v) => {
-    let E = o.get(v);
-    return E || (E = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(v, E), u == null || u(v, k)), E;
+    let B = o.get(v);
+    return B || (B = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(v, B), u == null || u(v, k)), B;
   }), f = h[1] || (() => {
-    const v = [], E = (S) => {
+    const v = [], B = (S) => {
       try {
         S();
       } catch (C) {
@@ -10154,121 +10191,121 @@ const RootLayout = () => {
       }
     };
     do {
-      c.f && E(c.f);
+      c.f && B(c.f);
       const S = /* @__PURE__ */ new Set(), C = S.add.bind(S);
       a.forEach((j) => {
         var I;
         return (I = r.get(j)) == null ? void 0 : I.l.forEach(C);
-      }), a.clear(), i.forEach(C), i.clear(), l.forEach(C), l.clear(), S.forEach(E), a.size && x();
+      }), a.clear(), i.forEach(C), i.clear(), l.forEach(C), l.clear(), S.forEach(B), a.size && x();
     } while (a.size || i.size || l.size);
     if (v.length)
       throw new AggregateError(v);
   }), x = h[2] || (() => {
-    const v = [], E = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), C = Array.from(a);
+    const v = [], B = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), C = Array.from(a);
     for (; C.length; ) {
       const j = C[C.length - 1], I = m(j);
       if (S.has(j)) {
         C.pop();
         continue;
       }
-      if (E.has(j)) {
+      if (B.has(j)) {
         n.get(j) === I.n && v.push([j, I]), S.add(j), C.pop();
         continue;
       }
-      E.add(j);
+      B.add(j);
       for (const T of getMountedOrPendingDependents(j, I, r))
-        E.has(T) || C.push(T);
+        B.has(T) || C.push(T);
     }
     for (let j = v.length - 1; j >= 0; --j) {
       const [I, T] = v[j];
-      let R = !1;
+      let P = !1;
       for (const L of T.d.keys())
         if (L !== I && a.has(L)) {
-          R = !0;
+          P = !0;
           break;
         }
-      R && (y(I), _(I)), n.delete(I);
+      P && (y(I), E(I)), n.delete(I);
     }
   }), y = h[3] || ((v) => {
-    var E;
+    var B;
     const S = m(v);
     if (isAtomStateInitialized(S) && (r.has(v) && n.get(v) !== S.n || Array.from(S.d).every(
-      ([P, M]) => (
+      ([R, M]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(P).n === M
+        y(R).n === M
       )
     )))
       return S;
     S.d.clear();
     let C = !0;
     const j = () => {
-      r.has(v) && (_(v), x(), f());
-    }, I = (P) => {
+      r.has(v) && (E(v), x(), f());
+    }, I = (R) => {
       var M;
-      if (isSelfAtom(v, P)) {
-        const O = m(P);
+      if (isSelfAtom(v, R)) {
+        const O = m(R);
         if (!isAtomStateInitialized(O))
-          if (hasInitialValue(P))
-            setAtomStateValueOrPromise(P, P.init, m);
+          if (hasInitialValue(R))
+            setAtomStateValueOrPromise(R, R.init, m);
           else
             throw new Error("no atom init");
         return returnAtomValue(O);
       }
-      const $ = y(P);
+      const $ = y(R);
       try {
         return returnAtomValue($);
       } finally {
-        S.d.set(P, $.n), isPendingPromise(S.v) && addPendingPromiseToDependency(v, S.v, $), (M = r.get(P)) == null || M.t.add(v), C || j();
+        S.d.set(R, $.n), isPendingPromise(S.v) && addPendingPromiseToDependency(v, S.v, $), (M = r.get(R)) == null || M.t.add(v), C || j();
       }
     };
-    let T, R;
+    let T, P;
     const L = {
       get signal() {
         return T || (T = new AbortController()), T.signal;
       },
       get setSelf() {
-        return !R && isActuallyWritableAtom(v) && (R = (...P) => {
+        return !P && isActuallyWritableAtom(v) && (P = (...R) => {
           if (!C)
             try {
-              return A(v, ...P);
+              return A(v, ...R);
             } finally {
               x(), f();
             }
-        }), R;
+        }), P;
       }
     }, D = S.n;
     try {
-      const P = d(v, I, L);
-      return setAtomStateValueOrPromise(v, P, m), isPromiseLike$1(P) && (registerAbortHandler(P, () => T == null ? void 0 : T.abort()), P.then(
+      const R = d(v, I, L);
+      return setAtomStateValueOrPromise(v, R, m), isPromiseLike$1(R) && (registerAbortHandler(R, () => T == null ? void 0 : T.abort()), R.then(
         j,
         j
       )), S;
-    } catch (P) {
-      return delete S.v, S.e = P, ++S.n, S;
+    } catch (R) {
+      return delete S.v, S.e = R, ++S.n, S;
     } finally {
-      C = !1, D !== S.n && n.get(v) === D && (n.set(v, S.n), a.add(v), (E = c.c) == null || E.call(c, v));
+      C = !1, D !== S.n && n.get(v) === D && (n.set(v, S.n), a.add(v), (B = c.c) == null || B.call(c, v));
     }
   }), b = h[4] || ((v) => {
-    const E = [v];
-    for (; E.length; ) {
-      const S = E.pop(), C = m(S);
+    const B = [v];
+    for (; B.length; ) {
+      const S = B.pop(), C = m(S);
       for (const j of getMountedOrPendingDependents(S, C, r)) {
         const I = m(j);
-        n.set(j, I.n), E.push(j);
+        n.set(j, I.n), B.push(j);
       }
     }
-  }), A = h[5] || ((v, ...E) => {
+  }), A = h[5] || ((v, ...B) => {
     let S = !0;
     const C = (I) => returnAtomValue(y(I)), j = (I, ...T) => {
-      var R;
+      var P;
       const L = m(I);
       try {
         if (isSelfAtom(v, I)) {
           if (!hasInitialValue(I))
             throw new Error("atom not writable");
-          const D = L.n, P = T[0];
-          setAtomStateValueOrPromise(I, P, m), _(I), D !== L.n && (a.add(I), (R = c.c) == null || R.call(c, I), b(I));
+          const D = L.n, R = T[0];
+          setAtomStateValueOrPromise(I, R, m), E(I), D !== L.n && (a.add(I), (P = c.c) == null || P.call(c, I), b(I));
           return;
         } else
           return A(I, ...T);
@@ -10277,18 +10314,18 @@ const RootLayout = () => {
       }
     };
     try {
-      return p(v, C, j, ...E);
+      return p(v, C, j, ...B);
     } finally {
       S = !1;
     }
-  }), _ = h[6] || ((v) => {
-    var E;
+  }), E = h[6] || ((v) => {
+    var B;
     const S = m(v), C = r.get(v);
     if (C && !isPendingPromise(S.v)) {
       for (const [j, I] of S.d)
         if (!C.d.has(j)) {
           const T = m(j);
-          B(j).t.add(v), C.d.add(j), I !== T.n && (a.add(j), (E = c.c) == null || E.call(c, j), b(j));
+          _(j).t.add(v), C.d.add(j), I !== T.n && (a.add(j), (B = c.c) == null || B.call(c, j), b(j));
         }
       for (const j of C.d || [])
         if (!S.d.has(j)) {
@@ -10297,34 +10334,34 @@ const RootLayout = () => {
           I == null || I.t.delete(v);
         }
     }
-  }), B = h[7] || ((v) => {
-    var E;
+  }), _ = h[7] || ((v) => {
+    var B;
     const S = m(v);
     let C = r.get(v);
     if (!C) {
       y(v);
       for (const j of S.d.keys())
-        B(j).t.add(v);
+        _(j).t.add(v);
       if (C = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(S.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(v, C), (E = c.m) == null || E.call(c, v), isActuallyWritableAtom(v)) {
+      }, r.set(v, C), (B = c.m) == null || B.call(c, v), isActuallyWritableAtom(v)) {
         const j = () => {
           let I = !0;
-          const T = (...R) => {
+          const T = (...P) => {
             try {
-              return A(v, ...R);
+              return A(v, ...P);
             } finally {
               I || (x(), f());
             }
           };
           try {
-            const R = g(v, T);
-            R && (C.u = () => {
+            const P = g(v, T);
+            P && (C.u = () => {
               I = !0;
               try {
-                R();
+                P();
               } finally {
                 I = !1;
               }
@@ -10338,14 +10375,14 @@ const RootLayout = () => {
     }
     return C;
   }), N = h[8] || ((v) => {
-    var E;
+    var B;
     const S = m(v);
     let C = r.get(v);
     if (C && !C.l.size && !Array.from(C.t).some((j) => {
       var I;
       return (I = r.get(j)) == null ? void 0 : I.d.has(v);
     })) {
-      C.u && i.add(C.u), C = void 0, r.delete(v), (E = c.u) == null || E.call(c, v);
+      C.u && i.add(C.u), C = void 0, r.delete(v), (B = c.u) == null || B.call(c, v);
       for (const j of S.d.keys()) {
         const I = N(j);
         I == null || I.t.delete(v);
@@ -10374,22 +10411,22 @@ const RootLayout = () => {
     y,
     b,
     A,
+    E,
     _,
-    B,
     N
   ], k = {
     get: (v) => returnAtomValue(y(v)),
-    set: (v, ...E) => {
+    set: (v, ...B) => {
       try {
-        return A(v, ...E);
+        return A(v, ...B);
       } finally {
         x(), f();
       }
     },
-    sub: (v, E) => {
-      const C = B(v).l;
-      return C.add(E), f(), () => {
-        C.delete(E), N(v), f();
+    sub: (v, B) => {
+      const C = _(v).l;
+      return C.add(B), f(), () => {
+        C.delete(B), N(v), f();
       };
     }
   };
@@ -10498,7 +10535,7 @@ const useAutoSave = () => {
 }, ChaiWatchers = (o) => {
   const [, r] = useBlocksStore(), n = useBuilderReset(), [a] = useAtom(builderSaveStateAtom);
   useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchPartailBlocks(), useUnmountBroadcastChannel();
-  const { postMessage: l } = useBroadcastChannel();
+  const { postMessage: l } = useBroadcastChannel(), [, i] = useAtom(isPageLoadedAtom);
   return useEffect(() => {
     builderStore.set(
       // @ts-ignore
@@ -10508,17 +10545,17 @@ const useAutoSave = () => {
   }, [o]), useEffect(() => {
     builderStore.set(chaiPageExternalDataAtom, o.pageExternalData || {});
   }, [o.pageExternalData]), useEffect(() => {
-    setTimeout(() => {
-      const i = syncBlocksWithDefaults(o.blocks || []);
-      r(i), i && i.length > 0 && l({ type: "blocks-updated", blocks: i }), n();
+    i(!1), setTimeout(() => {
+      const c = syncBlocksWithDefaults(o.blocks || []);
+      r(c), c && c.length > 0 && l({ type: "blocks-updated", blocks: c }), n(), i(!0);
     }, 400);
   }, [o.blocks]), useEffect(() => {
     i18n.changeLanguage(o.locale || "en");
   }, [o.locale]), useEffect(() => {
     setDebugLogs(o.debugLogs);
   }, [o.debugLogs]), useEffect(() => {
-    o.translations && each(o.translations, (i, c) => {
-      i18n.addResourceBundle(c, "translation", i, !0, !0);
+    o.translations && each(o.translations, (c, d) => {
+      i18n.addResourceBundle(d, "translation", c, !0, !0);
     });
   }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;
@@ -10602,6 +10639,7 @@ export {
   useHiddenBlockIds,
   useHighlightBlockId,
   useInlineEditing,
+  useIsPageLoaded,
   useLanguages,
   useLibraryBlocks,
   useMediaManagerComponent,