@chaibuilder/sdk 2.0.0-beta.76 → 2.0.0-beta.78

package/dist/core.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
 import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, T as Textarea, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, j as AlertDialog, k as AlertDialogTrigger, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, b as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-D5ViOi6K.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
-import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, each, set, first, isObject, memoize, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, groupBy, uniq, flatMapDeep, some, reject, sortBy, toUpper, round } from "lodash-es";
+import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, each, set, first, isObject, memoize, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, toUpper, round } from "lodash-es";
 import { Provider } from "react-wrap-balancer";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { useTranslation, initReactI18next } from "react-i18next";
@@ -105,7 +105,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   ] = o, c = (E) => {
     let j = n(E);
     return j || (j = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, r(E, j), i == null || i(E, I)), j;
-  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), m = () => {
+  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set(), f = () => {
     var E;
     const j = [], N = (L) => {
       try {
@@ -120,11 +120,11 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       u.forEach((T) => {
         var D;
         return (D = T.m) == null ? void 0 : D.l.forEach(A);
-      }), u.clear(), g.forEach(A), g.clear(), h.forEach(A), h.clear(), L.forEach(N), u.size && _();
-    } while (u.size || g.size || h.size);
+      }), u.clear(), g.forEach(A), g.clear(), m.forEach(A), m.clear(), L.forEach(N), u.size && _();
+    } while (u.size || g.size || m.size);
     if (j.length)
       throw j[0];
-  }, b = (E, j, N) => {
+  }, y = (E, j, N) => {
     const L = "v" in j, A = j.v, T = isPendingPromise(j.v) ? j.v : null;
     if (isPromiseLike$2(N)) {
       patchPromiseForCancelability(N);
@@ -134,40 +134,40 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     } else
       j.v = N;
     delete j.e, (!L || !Object.is(A, j.v)) && (++j.n, T && cancelPromise(T, N));
-  }, f = (E) => {
+  }, h = (E) => {
     var j;
     const N = c(E);
     if (isAtomStateInitialized(N) && (N.m && p.get(E) !== N.n || Array.from(N.d).every(
-      ([M, H]) => (
+      ([M, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        f(M).n === H
+        h(M).n === O
       )
     )))
       return N;
     N.d.clear();
     let L = !0;
     const A = () => {
-      N.m && (S(E, N), _(), m());
+      N.m && (S(E, N), _(), f());
     }, T = (M) => {
       if (isSelfAtom(E, M)) {
         const U = c(M);
         if (!isAtomStateInitialized(U))
           if (hasInitialValue(M))
-            b(M, U, M.init);
+            y(M, U, M.init);
           else
             throw new Error("no atom init");
         return returnAtomValue(U);
       }
-      const H = f(M);
+      const O = h(M);
       try {
-        return returnAtomValue(H);
+        return returnAtomValue(O);
       } finally {
-        addDependency(E, N, M, H), L || A();
+        addDependency(E, N, M, O), L || A();
       }
     };
     let D, $;
-    const O = {
+    const H = {
       get signal() {
         return D || (D = new AbortController()), D.signal;
       },
@@ -179,14 +179,14 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     };
     try {
-      const M = a(E, T, O);
-      return b(E, N, M), isPromiseLike$2(M) && ((j = M.onCancel) == null || j.call(M, () => D == null ? void 0 : D.abort()), M.then(A, A)), N;
+      const M = a(E, T, H);
+      return y(E, N, M), isPromiseLike$2(M) && ((j = M.onCancel) == null || j.call(M, () => D == null ? void 0 : D.abort()), M.then(A, A)), N;
     } catch (M) {
       return delete N.v, N.e = M, ++N.n, N;
     } finally {
       L = !1;
     }
-  }, x = (E) => returnAtomValue(f(E)), y = (E) => {
+  }, x = (E) => returnAtomValue(h(E)), b = (E) => {
     var j;
     const N = /* @__PURE__ */ new Map();
     for (const L of ((j = E.m) == null ? void 0 : j.t) || []) {
@@ -203,7 +203,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     const j = [E];
     for (; j.length; ) {
       const N = j.pop();
-      for (const [L, A] of y(N))
+      for (const [L, A] of b(N))
         p.has(L) || (p.set(L, A.n), j.push(A));
     }
   }, _ = () => {
@@ -220,35 +220,35 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         continue;
       }
       N.add(T);
-      for (const [$, O] of y(D))
-        N.has($) || A.push([$, O]);
+      for (const [$, H] of b(D))
+        N.has($) || A.push([$, H]);
     }
     for (let T = j.length - 1; T >= 0; --T) {
-      const [D, $, O] = j[T];
+      const [D, $, H] = j[T];
       let M = !1;
-      for (const H of $.d.keys())
-        if (H !== D && u.has(H)) {
+      for (const O of $.d.keys())
+        if (O !== D && u.has(O)) {
           M = !0;
           break;
         }
-      M && (f(D), S(D, $), O !== $.n && (u.set(D, $), (E = $.u) == null || E.call($))), p.delete(D);
+      M && (h(D), S(D, $), H !== $.n && (u.set(D, $), (E = $.u) == null || E.call($))), p.delete(D);
     }
   }, v = (E, ...j) => {
     let N = !0;
-    const L = (T) => returnAtomValue(f(T)), A = (T, ...D) => {
+    const L = (T) => returnAtomValue(h(T)), A = (T, ...D) => {
       var $;
-      const O = c(T);
+      const H = c(T);
       try {
         if (isSelfAtom(E, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const M = O.n, H = D[0];
-          b(T, O, H), S(T, O), M !== O.n && (u.set(T, O), ($ = O.u) == null || $.call(O), w(O));
+          const M = H.n, O = D[0];
+          y(T, H, O), S(T, H), M !== H.n && (u.set(T, H), ($ = H.u) == null || $.call(H), w(H));
           return;
         } else
           return v(T, ...D);
       } finally {
-        N || (_(), m());
+        N || (_(), f());
       }
     };
     try {
@@ -260,7 +260,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     try {
       return v(E, ...j);
     } finally {
-      _(), m();
+      _(), f();
     }
   }, S = (E, j) => {
     var N;
@@ -280,7 +280,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   }, B = (E, j) => {
     var N;
     if (!j.m) {
-      f(E);
+      h(E);
       for (const L of j.d.keys())
         B(L, c(L)).t.add(E);
       if (j.m = {
@@ -294,7 +294,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             try {
               return v(E, ...$);
             } finally {
-              T || (_(), m());
+              T || (_(), f());
             }
           };
           try {
@@ -311,7 +311,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             T = !1;
           }
         };
-        h.add(A);
+        m.add(A);
       }
     }
     return j.m;
@@ -335,8 +335,8 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     set: k,
     sub: (E, j) => {
       const N = c(E), A = B(E, N).l;
-      return A.add(j), m(), () => {
-        A.delete(j), R(E, N), m();
+      return A.add(j), f(), () => {
+        A.delete(j), R(E, N), f();
       };
     },
     unstable_derive: (E) => buildStore(...E(...o))
@@ -373,26 +373,26 @@ function splitAtom(o, n) {
         let p = r.get(d);
         if (p)
           return p;
-        const u = c && r.get(c), g = [], h = [];
-        return d.forEach((m, b) => {
-          const f = n(m);
-          h[b] = f;
-          const x = u && u.atomList[u.keyList.indexOf(f)];
+        const u = c && r.get(c), g = [], m = [];
+        return d.forEach((f, y) => {
+          const h = n(f);
+          m[y] = h;
+          const x = u && u.atomList[u.keyList.indexOf(h)];
           if (x) {
-            g[b] = x;
+            g[y] = x;
             return;
           }
-          const y = (_) => {
-            const v = _(l), k = _(o), B = a(k, v == null ? void 0 : v.arr).keyList.indexOf(f);
+          const b = (_) => {
+            const v = _(l), k = _(o), B = a(k, v == null ? void 0 : v.arr).keyList.indexOf(h);
             if (B < 0 || B >= k.length) {
-              const R = d[a(d).keyList.indexOf(f)];
+              const R = d[a(d).keyList.indexOf(h)];
               if (R)
                 return R;
               throw new Error("splitAtom: index out of bounds for read");
             }
             return k[B];
           }, w = (_, v, k) => {
-            const S = _(l), B = _(o), P = a(B, S == null ? void 0 : S.arr).keyList.indexOf(f);
+            const S = _(l), B = _(o), P = a(B, S == null ? void 0 : S.arr).keyList.indexOf(h);
             if (P < 0 || P >= B.length)
               throw new Error("splitAtom: index out of bounds for write");
             const C = isFunction(k) ? k(B[P]) : k;
@@ -402,8 +402,8 @@ function splitAtom(o, n) {
               ...B.slice(P + 1)
             ]);
           };
-          g[b] = isWritable(o) ? atom(y, w) : atom(y);
-        }), u && u.keyList.length === h.length && u.keyList.every((m, b) => m === h[b]) ? p = u : p = { arr: d, atomList: g, keyList: h }, r.set(d, p), p;
+          g[y] = isWritable(o) ? atom(b, w) : atom(b);
+        }), u && u.keyList.length === m.length && u.keyList.every((f, y) => f === m[y]) ? p = u : p = { arr: d, atomList: g, keyList: m }, r.set(d, p), p;
       }, l = atom((d) => {
         const c = d(l), p = d(o);
         return a(p, c == null ? void 0 : c.arr);
@@ -439,17 +439,17 @@ function splitAtom(o, n) {
             case "move": {
               const u = d(i).indexOf(p.atom), g = p.before ? d(i).indexOf(p.before) : d(i).length;
               if (u >= 0 && g >= 0) {
-                const h = d(o);
+                const m = d(o);
                 u < g ? c(o, [
-                  ...h.slice(0, u),
-                  ...h.slice(u + 1, g),
-                  h[u],
-                  ...h.slice(g)
+                  ...m.slice(0, u),
+                  ...m.slice(u + 1, g),
+                  m[u],
+                  ...m.slice(g)
                 ]) : c(o, [
-                  ...h.slice(0, g),
-                  h[u],
-                  ...h.slice(g, u),
-                  ...h.slice(u + 1)
+                  ...m.slice(0, g),
+                  m[u],
+                  ...m.slice(g, u),
+                  ...m.slice(u + 1)
                 ]);
               }
               break;
@@ -475,19 +475,19 @@ function createJSONStorage(o = () => {
   let a, l;
   const i = {
     getItem: (p, u) => {
-      var g, h;
-      const m = (f) => {
-        if (f = f || "", a !== f) {
+      var g, m;
+      const f = (h) => {
+        if (h = h || "", a !== h) {
           try {
-            l = JSON.parse(f, n == null ? void 0 : n.reviver);
+            l = JSON.parse(h, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = f;
+          a = h;
         }
         return l;
-      }, b = (h = (g = o()) == null ? void 0 : g.getItem(p)) != null ? h : null;
-      return isPromiseLike$1(b) ? b.then(m) : m(b);
+      }, y = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
+      return isPromiseLike$1(y) ? y.then(f) : f(y);
     },
     setItem: (p, u) => {
       var g;
@@ -500,14 +500,14 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, d = (p) => (u, g, h) => p(u, (m) => {
-    let b;
+  }, d = (p) => (u, g, m) => p(u, (f) => {
+    let y;
     try {
-      b = JSON.parse(m || "");
+      y = JSON.parse(f || "");
     } catch {
-      b = h;
+      y = m;
     }
-    g(b);
+    g(y);
   });
   let c;
   try {
@@ -518,8 +518,8 @@ function createJSONStorage(o = () => {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const g = (h) => {
-      h.storageArea === o() && h.key === p && u(h.newValue);
+    const g = (m) => {
+      m.storageArea === o() && m.key === p && u(m.newValue);
     };
     return window.addEventListener("storage", g), () => {
       window.removeEventListener("storage", g);
@@ -1316,82 +1316,82 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: d
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (f, x, y) => {
-      const w = map(f, (v) => {
+    moveBlocks: (h, x, b) => {
+      const w = map(h, (v) => {
         const S = n.find((P) => P._id === v)._parent || null, R = n.filter((P) => S ? P._parent === S : !P._parent).map((P) => P._id).indexOf(v);
         return { _id: v, oldParent: S, oldPosition: R };
-      }), _ = w.find(({ _id: v }) => v === f[0]);
-      _ && _.oldParent === x && _.oldPosition === y || (i(f, x, y), o({
+      }), _ = w.find(({ _id: v }) => v === h[0]);
+      _ && _.oldParent === x && _.oldPosition === b || (i(h, x, b), o({
         undo: () => each(w, ({ _id: v, oldParent: k, oldPosition: S }) => {
           i([v], k, S);
         }),
-        redo: () => i(f, x, y)
+        redo: () => i(h, x, b)
       }));
     },
-    addBlocks: (f, x, y) => {
-      a(f, x, y), o({
-        undo: () => l(map(f, "_id")),
-        redo: () => a(f, x, y)
+    addBlocks: (h, x, b) => {
+      a(h, x, b), o({
+        undo: () => l(map(h, "_id")),
+        redo: () => a(h, x, b)
       });
     },
-    removeBlocks: (f) => {
+    removeBlocks: (h) => {
       var _;
-      const x = (_ = first(f)) == null ? void 0 : _._parent, w = n.filter((v) => x ? v._parent === x : !v._parent).indexOf(first(f));
-      l(map(f, "_id")), o({
-        undo: () => a(f, x, w),
-        redo: () => l(map(f, "_id"))
+      const x = (_ = first(h)) == null ? void 0 : _._parent, w = n.filter((v) => x ? v._parent === x : !v._parent).indexOf(first(h));
+      l(map(h, "_id")), o({
+        undo: () => a(h, x, w),
+        redo: () => l(map(h, "_id"))
       });
     },
-    updateBlocks: (f, x, y) => {
+    updateBlocks: (h, x, b) => {
       let w = [];
-      if (y)
-        w = map(f, (_) => ({ _id: _, ...y }));
+      if (b)
+        w = map(h, (_) => ({ _id: _, ...b }));
       else {
         const _ = keys(x);
-        w = map(f, (v) => {
+        w = map(h, (v) => {
           const k = n.find((B) => B._id === v), S = { _id: v };
           return each(_, (B) => S[B] = k[B]), S;
         });
       }
-      d(map(f, (_) => ({ _id: _, ...x }))), o({
+      d(map(h, (_) => ({ _id: _, ...x }))), o({
         undo: () => d(w),
-        redo: () => d(map(f, (_) => ({ _id: _, ...x })))
+        redo: () => d(map(h, (_) => ({ _id: _, ...x })))
       });
     },
-    updateBlocksRuntime: (f, x) => {
-      d(map(f, (y) => ({ _id: y, ...x })));
+    updateBlocksRuntime: (h, x) => {
+      d(map(h, (b) => ({ _id: b, ...x })));
     },
-    setNewBlocks: (f) => {
-      r(f), o({
+    setNewBlocks: (h) => {
+      r(h), o({
         undo: () => r(n),
-        redo: () => r(f)
+        redo: () => r(h)
       });
     },
-    updateMultipleBlocksProps: (f) => {
+    updateMultipleBlocksProps: (h) => {
       let x = [];
-      x = map(f, (y) => {
-        const w = keys(y), _ = n.find((k) => k._id === y._id), v = {};
+      x = map(h, (b) => {
+        const w = keys(b), _ = n.find((k) => k._id === b._id), v = {};
         return each(w, (k) => v[k] = _[k]), v;
-      }), d(f), o({
+      }), d(h), o({
         undo: () => d(x),
-        redo: () => d(f)
+        redo: () => d(h)
       });
     }
   };
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, d, c) => {
-      var m;
-      for (let b = 0; b < i.length; b++) {
-        const { _id: f } = i[b];
-        i[b]._id = generateUUID();
-        const x = filter(i, { _parent: f });
-        for (let y = 0; y < x.length; y++)
-          x[y]._parent = i[b]._id;
+      var f;
+      for (let y = 0; y < i.length; y++) {
+        const { _id: h } = i[y];
+        i[y]._id = generateUUID();
+        const x = filter(i, { _parent: h });
+        for (let b = 0; b < x.length; b++)
+          x[b]._parent = i[y]._id;
       }
       const p = first(i);
       let u, g;
-      return d && (u = find(o, { _id: d }), i[0]._parent = d, g = d), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, c), n([(m = first(i)) == null ? void 0 : m._id]), first(i);
+      return d && (u = find(o, { _id: d }), i[0]._parent = d, g = d), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, c), n([(f = first(i)) == null ? void 0 : f._id]), first(i);
     },
     [r, o, n]
   );
@@ -1406,8 +1406,8 @@ const useBlocksStoreManager = () => {
         _id: p,
         ...u
       };
-      let h, m;
-      return d && (h = find(o, { _id: d }), g._parent = d, m = d), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, m = h._parent), r([g], m, c), n([g._id]), g;
+      let m, f;
+      return d && (m = find(o, { _id: d }), g._parent = d, f = d), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, f = m._parent), r([g], f, c), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2611,13 +2611,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
     (a, l = null) => {
       const i = [];
       each(a, (d) => {
-        const c = o.find((m) => m._id === d);
+        const c = o.find((f) => f._id === d);
         l ? l === "root" && (l = null) : l = c._parent;
         const g = filter(
           o,
-          (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(c) + 1, h = getDuplicatedBlocks(o, d, l);
-        r(h, l, g), i.push(get(h, "0._id", ""));
+          (f) => isString(l) ? f._parent === l : !f._parent
+        ).indexOf(c) + 1, m = getDuplicatedBlocks(o, d, l);
+        r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2710,14 +2710,14 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
   return map(i, (d) => {
     const c = o(d), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(c, l.prop, `${STYLES_KEY},`));
-    return each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      u = u.replace(b, " ").replace(/\s+/g, " ").trim();
-      const f = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], f) && p.push(h.split(":").pop().trim());
-    }), each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      g = g.replace(b, " ").replace(/\s+/g, " ").trim();
+    return each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), y = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      u = u.replace(y, " ").replace(/\s+/g, " ").trim();
+      const h = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], h) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), y = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      g = g.replace(y, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [c._id],
       props: {
@@ -3130,30 +3130,30 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(d) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...d });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), d = useUpdateMultipleBlocksProps(), [c] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, b) => {
-    const f = cloneDeep(b.find((x) => x._id === m));
-    for (const x in f) {
-      const y = f[x];
-      if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: w, classes: _ } = getSplitChaiClasses(y);
-        f[x] = compact(flattenDeep([w, _])).join(" ");
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), d = useUpdateMultipleBlocksProps(), [c] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, y) => {
+    const h = cloneDeep(y.find((x) => x._id === f));
+    for (const x in h) {
+      const b = h[x];
+      if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
+        const { baseClasses: w, classes: _ } = getSplitChaiClasses(b);
+        h[x] = compact(flattenDeep([w, _])).join(" ");
       } else
-        x !== "_id" && delete f[x];
+        x !== "_id" && delete h[x];
     }
-    return f;
+    return h;
   };
   return {
     askAi: useCallback(
-      async (m, b, f, x) => {
+      async (f, y, h, x) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, w = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(b, c)), p) : [h(b, c)], _ = await l(m, addLangToPrompt(f, g, m), w, y), { blocks: v, error: k } = _;
+            const b = p === u ? "" : p, w = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(y, c)), p) : [m(y, c)], _ = await l(f, addLangToPrompt(h, g, f), w, b), { blocks: v, error: k } = _;
             if (k) {
               a(k);
               return;
             }
-            if (m === "styles") {
+            if (f === "styles") {
               const S = v.map((B) => {
                 for (const R in B)
                   R !== "_id" && (B[R] = `${STYLES_KEY},${B[R]}`);
@@ -3163,8 +3163,8 @@ const getBlockWithChildren = (o, n) => {
             } else
               i(v);
             x && x(_);
-          } catch (y) {
-            a(y);
+          } catch (b) {
+            a(b);
           } finally {
             n(!1), x && x();
           }
@@ -3259,7 +3259,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   });
   useResizeObserver(o, () => g(), o !== null);
-  const h = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const m = get(n, "_parent", null), f = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || c ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3267,25 +3267,25 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (b) => {
-        b.stopPropagation(), b.preventDefault();
+      onClick: (y) => {
+        y.stopPropagation(), y.preventDefault();
       },
-      onMouseEnter: (b) => {
-        b.stopPropagation(), i(null);
+      onMouseEnter: (y) => {
+        y.stopPropagation(), i(null);
       },
-      onKeyDown: (b) => b.stopPropagation(),
+      onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        h && /* @__PURE__ */ jsx(
+        m && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              d([]), l([h]);
+              d([]), l([m]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: m, block: n }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: n }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsx(
             PlusIcon,
@@ -3357,23 +3357,23 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: d, redo: c } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: d, redo: c } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => d(), {}, [d]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(n[0]) && h(n);
+      g(n[0]) && m(n);
     },
-    { ...m, preventDefault: !0 },
-    [n, g, h]
-  ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
+    { ...f, preventDefault: !0 },
+    [n, g, m]
+  ), useHotkeys("esc", () => r([]), f, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...f, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
     "del, backspace",
-    (b) => {
-      b.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (y) => {
+      y.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    m,
+    f,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3459,38 +3459,38 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: d } = useBlocksStoreUndoableActions(), [c, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const h = () => {
+  const m = () => {
     removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (m) => {
-      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
+    onDragOver: (f) => {
+      f.preventDefault(), f.stopPropagation(), throttledDragOver(f);
     },
-    onDrop: (m) => {
+    onDrop: (f) => {
       var k;
-      const b = dropTarget, x = getOrientation(b) === "vertical" ? m.clientY + ((k = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : k.scrollY) : m.clientX;
+      const y = dropTarget, x = getOrientation(y) === "vertical" ? f.clientY + ((k = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : k.scrollY) : f.clientX;
       dropIndex = calculateDropIndex(x, possiblePositions);
-      const y = c, w = b.getAttribute("data-block-id"), _ = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === w || !_) {
-        h();
+      const b = c, w = y.getAttribute("data-block-id"), _ = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((b == null ? void 0 : b._id) === w || !_) {
+        m();
         return;
       }
-      if (!has(y, "_id")) {
-        a(y, w === "canvas" ? null : w, dropIndex), setTimeout(h, 300);
+      if (!has(b, "_id")) {
+        a(b, w === "canvas" ? null : w, dropIndex), setTimeout(m, 300);
         return;
       }
-      let v = b.getAttribute("data-block-id");
-      v === null && (v = m.target.parentElement.getAttribute("data-block-id")), d([y._id], v === "canvas" ? null : v, dropIndex), h(), setTimeout(removePlaceholder, 300);
+      let v = y.getAttribute("data-block-id");
+      v === null && (v = f.target.parentElement.getAttribute("data-block-id")), d([b._id], v === "canvas" ? null : v, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (m) => {
-      const b = m, f = b.target;
-      dropTarget = f;
-      const x = f.getAttribute("data-block-id"), y = f.getAttribute("data-dnd-dragged") !== "yes";
-      u(x), b.stopPropagation(), b.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(f), r(!0), l(""), i([]);
+    onDragEnter: (f) => {
+      const y = f, h = y.target;
+      dropTarget = h;
+      const x = h.getAttribute("data-block-id"), b = h.getAttribute("data-dnd-dragged") !== "yes";
+      u(x), y.stopPropagation(), y.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(h), r(!0), l(""), i([]);
     },
-    onDragLeave: (m) => {
-      m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (f) => {
+      f.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3508,28 +3508,31 @@ function destroyQuill(o) {
   n && n.parentNode.removeChild(n), o = null;
 }
 const useHandleCanvasDblClick = () => {
-  const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
-  return (i) => {
-    var h;
-    if (r) return;
-    const d = getTargetedBlock(i.target), c = d.getAttribute("data-block-type");
-    if (!c || !o.includes(c))
-      return;
-    const p = d.cloneNode(!0);
-    d.style.display = "none", Array.from(p.attributes).forEach((m) => {
-      m.name !== "class" && p.removeAttribute(m.name);
-    }), c === "Text" && (p.style.display = "inline-block"), d.parentNode.insertBefore(p, d.nextSibling);
-    const u = new Quill(p, { placeholder: "Type here..." });
-    function g() {
-      const m = u.getText(0, u.getLength());
-      n([d.getAttribute("data-block-id")], { content: m }), d.removeAttribute("style"), p.removeEventListener("blur", g, !0), destroyQuill(u), a(""), l(), p.remove();
-    }
-    p.addEventListener("blur", g, !0), p.addEventListener("click", (m) => {
-      m.stopPropagation();
-    }), p.addEventListener("keydown", (m) => {
-      (m.key === "Enter" || m.key === "Escape") && g();
-    }), u.focus(), (h = p.querySelector(".ql-clipboard")) == null || h.remove(), a(d.getAttribute("data-block-id"));
-  };
+  const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight(), [i] = useBlocksStore();
+  return useCallback(
+    (d) => {
+      var h, x;
+      if (r) return;
+      const c = getTargetedBlock(d.target), p = c.getAttribute("data-block-type");
+      if (!p || !o.includes(p))
+        return;
+      const u = c.getAttribute("data-block-id"), g = (h = find(i, { _id: u })) == null ? void 0 : h.content, m = c.cloneNode(!0);
+      m.innerHTML = g, c.style.display = "none", Array.from(m.attributes).forEach((b) => {
+        b.name !== "class" && m.removeAttribute(b.name);
+      }), p === "Text" && (m.style.display = "inline-block"), c.parentNode.insertBefore(m, c.nextSibling);
+      const f = new Quill(m, { placeholder: "Type here..." });
+      function y() {
+        const b = f.getText(0, f.getLength());
+        n([u], { content: b }), c.removeAttribute("style"), m.removeEventListener("blur", y, !0), destroyQuill(f), a(""), l(), m.remove();
+      }
+      m.addEventListener("blur", y, !0), m.addEventListener("click", (b) => {
+        b.stopPropagation();
+      }), m.addEventListener("keydown", (b) => {
+        (b.key === "Enter" || b.key === "Escape") && y();
+      }), f.focus(), (x = m.querySelector(".ql-clipboard")) == null || x.remove(), a(c.getAttribute("data-block-id"));
+    },
+    [r, i, a, n, l]
+  );
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
   return (d) => {
@@ -3565,12 +3568,12 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const h = getElementByDataBlockId(n, first(r));
-      if (h) {
-        const m = h.getAttribute("data-style-prop");
-        if (m) {
-          const b = h.getAttribute("data-style-id"), f = h.getAttribute("data-block-parent");
-          l([{ id: b, prop: m, blockId: f }]);
+      const m = getElementByDataBlockId(n, first(r));
+      if (m) {
+        const f = m.getAttribute("data-style-prop");
+        if (f) {
+          const y = m.getAttribute("data-style-id"), h = m.getAttribute("data-block-parent");
+          l([{ id: y, prop: f, blockId: h }]);
         }
       }
     }, 100);
@@ -3593,9 +3596,9 @@ const useHandleCanvasDblClick = () => {
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), HeadTags = () => {
   const [o] = useTheme(), n = useThemeOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [d] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: p } = useFrame(), [u] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [g] = useState(
     c == null ? void 0 : c.getElementById("selected-block")
-  ), [h] = useState(
-    c == null ? void 0 : c.getElementById("selected-styling-block")
   ), [m] = useState(
+    c == null ? void 0 : c.getElementById("selected-styling-block")
+  ), [f] = useState(
     c == null ? void 0 : c.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3620,15 +3623,15 @@ const useHandleCanvasDblClick = () => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: x, theme: y }) {
+        plugin(function({ addBase: x, theme: b }) {
           x({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: y("fontFamily.heading")
+              fontFamily: b("fontFamily.heading")
             },
             body: {
-              fontFamily: y("fontFamily.body"),
-              color: y("colors.foreground"),
-              backgroundColor: y("colors.background")
+              fontFamily: b("fontFamily.body"),
+              color: b("colors.foreground"),
+              backgroundColor: b("colors.background")
             }
           });
         })
@@ -3639,23 +3642,23 @@ const useHandleCanvasDblClick = () => {
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
-    m.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, m]), useEffect(() => {
+    f.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, f]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    h && (h.textContent = `${map(l, ({ id: x }) => `[data-style-id="${x}"]`).join(",")}{
+    m && (m.textContent = `${map(l, ({ id: x }) => `[data-style-id="${x}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, h]), useEffect(() => {
+  }, [l, m]), useEffect(() => {
     c.querySelector("#drop-target-block").innerHTML = d ? `[data-block-id="${d}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [d, c]);
-  const b = useMemo(
+  const y = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), f = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), h = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: b }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: f } })
+    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: y }),
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: h } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), d = useDebouncedCallback(
@@ -3684,7 +3687,7 @@ function applyLanguage(o, n, r) {
 const applyBinding = (o, n) => {
   const r = cloneDeep(o);
   return forEach(keys(r), (a) => {
-    if (isString(r[a])) {
+    if (isString(r[a]) && !startsWith(a, "_")) {
       let l = r[a];
       const i = /\{\{(.*?)\}\}/g, d = l.match(i);
       d && d.forEach((c) => {
@@ -3731,30 +3734,37 @@ const getBlockRuntimeProps = memoize((o) => {
     }, {}),
     [o]
   );
-}, RenderBlock = ({ block: o, children: n }) => {
-  const r = useMemo(() => getRegisteredChaiBlock(o._type), [o._type]), { selectedLang: a, fallbackLang: l } = useLanguages(), i = useBlockRuntimeProps(), d = usePageExternalData(), [c] = useAtom$1(dataBindingActiveAtom), p = get(r, "component", null);
-  if (isNull(p)) return null;
-  const u = useMemo(
-    () => c ? applyBinding(applyLanguage(o, a, r), d) : applyLanguage(o, a, r),
-    [o, a, r, d, c]
-  ), g = useMemo(() => getBlockTagAttributes(o), [o]), h = useMemo(() => i(o._id, getBlockRuntimeProps(o._type)), [o]), m = useMemo(
+}, BlockRenderer = ({ block: o, children: n }) => {
+  const r = useMemo(() => getRegisteredChaiBlock(o._type), [o._type]), { selectedLang: a, fallbackLang: l } = useLanguages(), i = useBlockRuntimeProps(), d = usePageExternalData(), [c] = useHiddenBlockIds(), [p] = useAtom$1(inlineEditingActiveAtom), [u] = useAtom$1(dataBindingActiveAtom), g = get(r, "component", null), m = useMemo(
+    () => u ? applyBinding(applyLanguage(o, a, r), d) : applyLanguage(o, a, r),
+    [o, a, r, d, u]
+  ), f = useMemo(() => getBlockTagAttributes(o), [o]), y = useMemo(() => i(o._id, getBlockRuntimeProps(o._type)), [o]), h = useMemo(() => !has(r, "dataProvider") || !isFunction$1(r.dataProvider) ? {} : r.dataProvider(o, a), [o, a, r]), x = useMemo(
     () => ({
-      "data-block-id": o._id,
-      "data-block-type": o._type,
+      blockProps: {
+        "data-block-id": o._id,
+        "data-block-type": o._type
+      },
       inBuilder: !0,
       lang: a || l,
-      ...u,
-      ...g,
+      ...m,
+      ...f,
+      ...y,
       ...h
     }),
-    [o, a, l, u, g, h]
+    [o, a, l, m, f, y, h]
   );
-  return /* @__PURE__ */ jsx(Suspense, { children: createElement(p, { ...m, children: n }) });
-}, RenderBlocks = ({ filterFn: o }) => {
-  const [n] = useBlocksStore(), r = useMemo(() => filter(n, o), [n, o]), a = (l) => filter(n, (i) => i._parent === l).length > 0;
-  return map(r, (l) => /* @__PURE__ */ jsx(RenderBlock, { block: l, children: a(l._id) ? /* @__PURE__ */ jsx(RenderBlocks, { filterFn: (i) => i._parent === l._id }) : null }, l._id));
-}, NewBlocksRenderer = () => /* @__PURE__ */ jsx(RenderBlocks, { filterFn: (o) => isEmpty(o._parent) }), StaticBlocksRenderer = () => {
-  const [o] = useBlocksStore(), n = isEmpty(o) ? null : /* @__PURE__ */ jsx(NewBlocksRenderer, {});
+  return isNull(g) || c.includes(o._id) || p === o._id ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...x, children: n }) });
+}, GlobalBlocksRenderer = ({ block: o }) => {
+  const { getGlobalBlocks: n } = useGlobalBlocksStore(), r = n(o);
+  return /* @__PURE__ */ jsx(BlocksRenderer, { blocks: r, filterFn: (a) => isEmpty(a._parent) });
+}, BlocksRenderer = ({ blocks: o, filterFn: n }) => {
+  const r = useMemo(() => filter(o, n), [o, n]), a = (l) => filter(o, (i) => i._parent === l).length > 0;
+  return map(r, (l) => /* @__PURE__ */ jsx(BlockRenderer, { block: l, children: l._type === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlocksRenderer, { block: l }) : a(l._id) ? /* @__PURE__ */ jsx(BlocksRenderer, { blocks: o, filterFn: (i) => i._parent === l._id }) : null }, l._id));
+}, PageBlocksRenderer = () => {
+  const [o] = useBlocksStore();
+  return /* @__PURE__ */ jsx(BlocksRenderer, { blocks: o, filterFn: (n) => isEmpty(n._parent) });
+}, StaticBlocksRenderer = () => {
+  const [o] = useBlocksStore(), n = isEmpty(o) ? null : /* @__PURE__ */ jsx(PageBlocksRenderer, {});
   return /* @__PURE__ */ jsx(Fragment, { children: n });
 }, useCanvasScale = (o) => {
   const [n] = useCanvasWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), d = useCallback(() => {
@@ -3762,11 +3772,11 @@ const getBlockRuntimeProps = memoize((o) => {
     if (c < n) {
       const u = parseFloat((c / n).toFixed(2).toString());
       let g = {};
-      const h = p * u, m = c * u;
+      const m = p * u, f = c * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - h) / h * 100 + "%",
-        width: 100 + (c - m) / m * 100 + "%"
+        height: 100 + (p - m) / m * 100 + "%",
+        width: 100 + (c - f) / f * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3783,7 +3793,7 @@ const getBlockRuntimeProps = memoize((o) => {
     d();
   }, [n, o, r, d]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, h] = useState([]), [, m] = useState([]), [, b] = useAtom$1(canvasIframeAtom), [f, x] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), w = useBuilderProp("htmlDir", "ltr"), _ = (S) => {
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, m] = useState([]), [, f] = useState([]), [, y] = useAtom$1(canvasIframeAtom), [h, x] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), w = useBuilderProp("htmlDir", "ltr"), _ = (S) => {
     p((B) => ({ ...B, width: S }));
   };
   useEffect(() => {
@@ -3799,18 +3809,18 @@ const getBlockRuntimeProps = memoize((o) => {
     var S, B;
     if (a && a.type !== "Multiple" && i.current) {
       const R = getElementByDataBlockId(i.current.contentDocument, a._id);
-      R && (v(R) || (B = (S = i.current) == null ? void 0 : S.contentWindow) == null || B.scrollTo({ top: R.offsetTop, behavior: "smooth" }), h([R]));
+      R && (v(R) || (B = (S = i.current) == null ? void 0 : S.contentWindow) == null || B.scrollTo({ top: R.offsetTop, behavior: "smooth" }), m([R]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(f) && i.current) {
+    if (!isEmpty(h) && i.current) {
       const S = getElementByStyleId(
         i.current.contentDocument,
-        first(f).id
+        first(h).id
       );
-      m(S ? [S] : [null]);
+      f(S ? [S] : [null]);
     } else
-      m([null]);
-  }, [f]);
+      f([null]);
+  }, [h]);
   const k = useMemo(() => {
     let S = IframeInitialContent;
     return S = S.replace("__HTML_DIR__", w), o === "offline" && (S = S.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), S;
@@ -3827,7 +3837,7 @@ const getBlockRuntimeProps = memoize((o) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => b(i.current),
+          contentDidMount: () => y(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
@@ -3844,7 +3854,7 @@ const getBlockRuntimeProps = memoize((o) => {
             ),
             /* @__PURE__ */ jsx(HeadTags, {}),
             /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsxs(Canvas, { children: [
-              y ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
+              b ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
               /* @__PURE__ */ jsx(AddBlockAtBottom, {}),
               /* @__PURE__ */ jsx("br", {}),
               /* @__PURE__ */ jsx("br", {}),
@@ -4083,59 +4093,59 @@ const getBlockRuntimeProps = memoize((o) => {
     }
   );
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [d, c] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (y) => {
-    a(y);
-  }, h = () => {
-    const y = l.find((w) => Object.keys(w)[0] === r);
-    if (y) {
-      const w = Object.values(y)[0];
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [d, c] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (b) => {
+    a(b);
+  }, m = () => {
+    const b = l.find((w) => Object.keys(w)[0] === r);
+    if (b) {
+      const w = Object.values(b)[0];
       w && typeof w == "object" && "fontFamily" in w && "borderRadius" in w && "colors" in w ? c(w) : console.error("Invalid preset structure:", w);
     } else
       console.error("Preset not found:", r);
-  }, m = useDebouncedCallback(
-    (y, w) => {
+  }, f = useDebouncedCallback(
+    (b, w) => {
       c(() => ({
         ...d,
         fontFamily: {
           ...d.fontFamily,
-          [y.replace(/font-/g, "")]: w
+          [b.replace(/font-/g, "")]: w
         }
       }));
     },
     [d],
     200
-  ), b = useDebouncedCallback(
-    (y) => {
+  ), y = useDebouncedCallback(
+    (b) => {
       c(() => ({
         ...d,
-        borderRadius: `${y}px`
+        borderRadius: `${b}px`
       }));
     },
     [d],
     200
-  ), f = useDebouncedCallback(
-    (y, w) => {
+  ), h = useDebouncedCallback(
+    (b, w) => {
       c(() => {
-        const _ = get(d, `colors.${y}`);
+        const _ = get(d, `colors.${b}`);
         return n ? set(_, 1, w) : set(_, 0, w), {
           ...d,
           colors: {
             ...d.colors,
-            [y]: _
+            [b]: _
           }
         };
       });
     },
     [d],
     200
-  ), x = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([w]) => {
+  ), x = (b) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(b.items).map(([w]) => {
     const _ = get(d, `colors.${w}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: _,
-          onChange: (v) => f(w, v)
+          onChange: (v) => h(w, v)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((v) => v.charAt(0).toUpperCase() + v.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
@@ -4150,11 +4160,11 @@ const getBlockRuntimeProps = memoize((o) => {
             "select",
             {
               value: r,
-              onChange: (y) => g(y.target.value),
+              onChange: (b) => g(b.target.value),
               className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(l) && l.map((y) => /* @__PURE__ */ jsx("option", { value: Object.keys(y)[0], children: capitalize(Object.keys(y)[0]) }, Object.keys(y)[0]))
+                Array.isArray(l) && l.map((b) => /* @__PURE__ */ jsx("option", { value: Object.keys(b)[0], children: capitalize(Object.keys(b)[0]) }, Object.keys(b)[0]))
               ]
             }
           )
@@ -4165,31 +4175,31 @@ const getBlockRuntimeProps = memoize((o) => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: h,
+            onClick: m,
             children: u("Apply")
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", o), children: [
-        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, w]) => /* @__PURE__ */ jsx(
+        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([b, w]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: y,
-            value: d.fontFamily[y.replace(/font-/g, "")] || w[Object.keys(w)[0]],
-            onChange: (_) => m(y, _)
+            label: b,
+            value: d.fontFamily[b.replace(/font-/g, "")] || w[Object.keys(w)[0]],
+            onChange: (_) => f(b, _)
           },
-          y
+          b
         )) }),
         (p == null ? void 0 : p.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: b }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: y }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
           ] })
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => x(y)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((b) => x(b)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4395,41 +4405,41 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   onChange: r
 }) => {
   var P;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, I) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [b, f] = useState([]), [x, y] = useState(-1), w = useRef(null), _ = (P = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : P.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, I) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [y, h] = useState([]), [x, b] = useState(-1), w = useRef(null), _ = (P = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
-    if (m(""), f([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (f(""), h([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const C = split(o, ":"), I = get(C, 1, "page") || "page";
     g(I), (async () => {
       const E = await l(I, [get(C, 2, "page")]);
-      E && Array.isArray(E) && m(get(E, [0, "name"], ""));
+      E && Array.isArray(E) && f(get(E, [0, "name"], ""));
     })();
   }, [o]);
   const v = useDebouncedCallback(
     async (C) => {
       if (isEmpty(C))
-        f([]);
+        h([]);
       else {
         const I = await l(u, C);
-        f(I);
+        h(I);
       }
-      d(!1), y(-1);
+      d(!1), b(-1);
     },
     [u],
     300
   ), k = (C) => {
     const I = ["pageType", u, C.id];
-    I[1] && (r(I.join(":")), m(C.name), p(!1), f([]), y(-1));
+    I[1] && (r(I.join(":")), f(C.name), p(!1), h([]), b(-1));
   }, S = (C) => {
     switch (C.key) {
       case "ArrowDown":
-        C.preventDefault(), y((I) => I < b.length - 1 ? I + 1 : I);
+        C.preventDefault(), b((I) => I < y.length - 1 ? I + 1 : I);
         break;
       case "ArrowUp":
-        C.preventDefault(), y((I) => I > 0 ? I - 1 : I);
+        C.preventDefault(), b((I) => I > 0 ? I - 1 : I);
         break;
       case "Enter":
-        if (C.preventDefault(), b.length === 0) return;
-        x >= 0 && k(b[x]);
+        if (C.preventDefault(), y.length === 0) return;
+        x >= 0 && k(y[x]);
         break;
       case "Escape":
         C.preventDefault(), B();
@@ -4443,9 +4453,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     }
   }, [x]);
   const B = () => {
-    m(""), f([]), y(-1), p(!1), r("");
+    f(""), h([]), b(-1), p(!1), r("");
   }, R = (C) => {
-    m(C), p(!isEmpty(C)), d(!0), v(C);
+    f(C), p(!isEmpty(C)), d(!0), v(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__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)) }),
@@ -4454,24 +4464,24 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "input",
         {
           type: "text",
-          value: h,
+          value: m,
           onChange: (C) => R(C.target.value),
           onKeyDown: S,
           placeholder: a(`Search ${_ ?? ""}`),
           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: h && /* @__PURE__ */ jsx("button", { onClick: B, 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: B, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(b) || c && isEmpty(b)) && /* @__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: [
+    (i || !isEmpty(y) || c && isEmpty(y)) && /* @__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" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : c && isEmpty(b) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : c && isEmpty(y) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      h,
+      m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: w, children: map(b == null ? void 0 : b.slice(0, 20), (C, I) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: w, children: map(y == null ? void 0 : y.slice(0, 20), (C, I) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => k(C),
@@ -4568,30 +4578,30 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const h = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const x = (f + 1) % u.length, y = get(u, [x, "_id"]);
-      if (!y) return;
-      n({ ...o, currentSlide: y }), d([y]);
+  const m = () => {
+    const h = findIndex(u, { _id: g });
+    if (h > -1) {
+      const x = (h + 1) % u.length, b = get(u, [x, "_id"]);
+      if (!b) return;
+      n({ ...o, currentSlide: b }), d([b]);
     }
-  }, m = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const x = (f - 1 + u.length) % u.length, y = get(u, [x, "_id"]);
-      if (!y) return;
-      n({ ...o, currentSlide: y }), d([y]);
+  }, f = () => {
+    const h = findIndex(u, { _id: g });
+    if (h > -1) {
+      const x = (h - 1 + u.length) % u.length, b = get(u, [x, "_id"]);
+      if (!b) return;
+      n({ ...o, currentSlide: b }), d([b]);
     }
-  }, b = () => {
-    const f = i(
+  }, y = () => {
+    const h = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), x = f == null ? void 0 : f._id;
+    ), x = h == null ? void 0 : h._id;
     x && (n({ ...o, currentSlide: x }), d([x]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
-      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -4600,11 +4610,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: b,
+          onClick: y,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4665,8 +4675,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (f) => {
-              let x = f.target.value;
+            onChange: (h) => {
+              let x = h.target.value;
               x.length && (x = x.replace("-", "")), n({ ...o, autoplayInterval: x });
             }
           }
@@ -4705,7 +4715,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   schema: u,
   formData: g
 }) => {
-  const { selectedLang: h, fallbackLang: m, languages: b } = useLanguages(), f = isEmpty(b) ? "" : isEmpty(h) ? m : h, x = get(LANGUAGES, f, f), y = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = get(w, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [v, k] = useState(null);
+  const { selectedLang: m, fallbackLang: f, languages: y } = useLanguages(), h = isEmpty(y) ? "" : isEmpty(m) ? f : m, x = get(LANGUAGES, h, h), b = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = get(w, [b == null ? void 0 : b._type, "i18nProps"], []) || [], [v, k] = useState(null);
   if (c)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
@@ -4757,8 +4767,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
   const { selectedLang: i } = useLanguages(), [d] = useAtom$1(chaiRjsfWidgetsAtom), [c] = useAtom$1(chaiRjsfFieldsAtom), [p] = useAtom$1(chaiRjsfTemplatesAtom), u = useThrottledCallback(
-    async ({ formData: g }, h) => {
-      l({ formData: g }, h);
+    async ({ formData: g }, m) => {
+      l({ formData: g }, m);
     },
     [l, i],
     1e3
@@ -4797,10 +4807,10 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: g }, h) => {
-        if (!h || o !== (g == null ? void 0 : g._id)) return;
-        const m = take(h.split("."), 2).join(".").replace("root.", "");
-        u({ formData: g }, m);
+      onChange: ({ formData: g }, m) => {
+        if (!m || o !== (g == null ? void 0 : g._id)) return;
+        const f = take(m.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, f);
       }
     },
     i
@@ -4812,17 +4822,17 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   }), 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), [d, c] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), b = ({ formData: S }, B, R) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [d, c] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), y = ({ formData: S }, B, R) => {
     B && (d == null ? void 0 : d._id) === n._id && a([n._id], { [B]: get(S, B) }, R);
-  }, f = useCallback(
+  }, h = useCallback(
     debounce(({ formData: S }, B, R) => {
-      b({ formData: S }, B, R), c(S);
+      y({ formData: S }, B, R), c(S);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), x = ({ formData: S }, B) => {
-    B && (r([n._id], { [B]: get(S, B) }), f({ formData: S }, B, { [B]: get(d, B) }));
-  }, y = ({ formData: S }, B) => {
-    B && (r([g._id], { [B]: get(S, B) }), f({ formData: S }, B, { [B]: get(d, B) }));
+    B && (r([n._id], { [B]: get(S, B) }), h({ formData: S }, B, { [B]: get(d, B) }));
+  }, b = ({ formData: S }, B) => {
+    B && (r([g._id], { [B]: get(S, B) }), h({ formData: S }, B, { [B]: get(d, B) }));
   };
   keys(get(i, "_bindings", {}));
   const { schema: w, uiSchema: _ } = useMemo(() => {
@@ -4859,8 +4869,8 @@ function BlockSettings() {
         JSONForm,
         {
           blockId: g == null ? void 0 : g._id,
-          onChange: y,
-          formData: m,
+          onChange: b,
+          formData: f,
           schema: v,
           uiSchema: k
         }
@@ -4945,12 +4955,12 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, d] = useState(""), c = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
-    var m;
-    (m = c.current) == null || m.focus();
+    var f;
+    (f = c.current) == null || f.focus();
   }, []);
-  const h = (m) => {
-    const { usage: b } = m || {};
-    !l && b && g(b), p.current = setTimeout(() => g(void 0), 1e4), l || d("");
+  const m = (f) => {
+    const { usage: y } = f || {};
+    !l && y && g(y), p.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -4959,12 +4969,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: c,
         value: i,
-        onChange: (m) => d(m.target.value),
+        onChange: (f) => d(f.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h));
+        onKeyDown: (f) => {
+          f.key === "Enter" && (f.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
         }
       }
     ),
@@ -4974,7 +4984,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h);
+            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m);
           },
           variant: "default",
           className: "w-fit",
@@ -5006,10 +5016,10 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var R;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [d] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: g } = useToast(), h = (R = first(r)) == null ? void 0 : R.prop, { classes: m } = getSplitChaiClasses(get(a, h, "")), b = m.split(" ").filter((P) => !isEmpty(P)), f = () => {
+  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [d] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: g } = useToast(), m = (R = first(r)) == null ? void 0 : R.prop, { classes: f } = getSplitChaiClasses(get(a, m, "")), y = f.split(" ").filter((P) => !isEmpty(P)), h = () => {
     const P = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(d, P, !0), u("");
-  }, [x, y] = useState([]), w = ({ value: P }) => {
+  }, [x, b] = useState([]), w = ({ value: P }) => {
     const C = P.trim().toLowerCase(), I = C.match(/.+:/g);
     let E = [];
     if (I && I.length > 0) {
@@ -5020,9 +5030,9 @@ function ManualClasses() {
       }));
     } else
       E = o.search(C);
-    return y(map(E, "item"));
+    return b(map(E, "item"));
   }, _ = () => {
-    y([]);
+    b([]);
   }, v = (P) => P.name, k = (P) => /* @__PURE__ */ jsx("div", { className: "p-1 rounded-md", children: P.name }), S = {
     autoComplete: "off",
     autoCorrect: "off",
@@ -5031,7 +5041,7 @@ function ManualClasses() {
     placeholder: n("Enter classes separated by space"),
     value: p,
     onKeyDown: (P) => {
-      P.key === "Enter" && p.trim() !== "" && f();
+      P.key === "Enter" && p.trim() !== "" && h();
     },
     onChange: (P, { newValue: C }) => u(C),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -5044,7 +5054,7 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(b.join(" ")), g({
+    navigator.clipboard.writeText(y.join(" ")), g({
       title: n("Copied"),
       description: n("Classes copied to clipboard")
     });
@@ -5091,14 +5101,14 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: f,
+          onClick: h,
           disabled: p.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full gap-2 overflow-x-hidden", children: b.map((P) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap w-full gap-2 overflow-x-hidden", children: y.map((P) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
@@ -5501,10 +5511,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, d] = useState([]), [c, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, d] = useState([]), [c, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), f = useCallback(
     // eslint-disable-next-line no-shadow
     (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), p({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: x, shade: y.shade ? y.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (d([]), p({ color: x })) : (d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: x, shade: b.shade ? b.shade : "500" })));
     },
     [d, p]
   );
@@ -5513,7 +5523,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       return d([]);
     d(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const b = useCallback(
+  const y = useCallback(
     // eslint-disable-next-line no-shadow
     (x) => {
       p({ color: g, shade: x });
@@ -5523,18 +5533,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: f } = useTailwindClassList();
+  const { match: h } = useTailwindClassList();
   return useEffect(() => {
-    const y = `${get(COLOR_PROP, o, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
-    f(o, y) && n(y, o);
-  }, [f, c, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    const b = `${get(COLOR_PROP, o, "")}-${c.color}${c.shade ? `-${c.shade}` : ""}`;
+    h(o, b) && n(b, o);
+  }, [h, c, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
         disabled: !l,
         rounded: !0,
         selected: g,
-        onChange: m,
+        onChange: f,
         options: [
           "current",
           "transparent",
@@ -5567,7 +5577,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: b, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: y, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -5714,23 +5724,23 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [b, f] = useState(!1), [x, y] = useState(""), [w, _] = useState(!1), [v, k] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [y, h] = useState(!1), [x, b] = useState(""), [w, _] = useState(!1), [v, k] = useState(!1);
   useEffect(() => {
     const { value: C, unit: I } = getClassValueAndUnit(i);
     if (I === "") {
-      l(C), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(C), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(I), l(I === "class" || isEmpty(C) ? "" : C);
+    f(I), l(I === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
   const S = useThrottledCallback((C) => d(C), [d], THROTTLE_TIME), B = useThrottledCallback((C) => d(C, !1), [d], THROTTLE_TIME), R = useCallback(
     (C = !1) => {
       const I = getUserInputValues(`${a}`, u);
       if (get(I, "error", !1)) {
-        f(!0);
+        h(!0);
         return;
       }
-      const E = get(I, "unit") !== "" ? get(I, "unit") : h;
+      const E = get(I, "unit") !== "" ? get(I, "unit") : m;
       if (E === "auto" || E === "none") {
         S(`${c}${E}`);
         return;
@@ -5740,12 +5750,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       const N = `${get(I, "value", "").startsWith("-") ? "-" : ""}${c}[${get(I, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
       C ? B(N) : S(N);
     },
-    [S, B, a, h, c, u]
+    [S, B, a, m, c, u]
   ), P = useCallback(
     (C) => {
       const I = getUserInputValues(`${a}`, u);
       if (get(I, "error", !1)) {
-        f(!0);
+        h(!0);
         return;
       }
       if (C === "auto" || C === "none") {
@@ -5759,7 +5769,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     },
     [S, a, c, u]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -5774,10 +5784,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     ] })
   ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${w ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: h === "class",
+          readOnly: m === "class",
           onKeyPress: (C) => {
             C.key === "Enter" && R();
           },
@@ -5788,7 +5798,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             const I = parseInt$1(C.target.value);
             let E = isNaN$1(I) ? 0 : I;
             C.keyCode === 38 && (E += 1), C.keyCode === 40 && (E -= 1);
-            const j = `${E}`, L = `${j.startsWith("-") ? "-" : ""}${c}[${j.replace("-", "")}${h === "-" ? "" : h}]`;
+            const j = `${E}`, L = `${j.startsWith("-") ? "-" : ""}${c}[${j.replace("-", "")}${m === "-" ? "" : m}]`;
             B(L);
           },
           onKeyUp: (C) => {
@@ -5796,7 +5806,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           },
           onBlur: () => R(),
           onChange: (C) => {
-            f(!1), l(C.target.value);
+            h(!1), l(C.target.value);
           },
           onClick: (C) => {
             var I;
@@ -5805,7 +5815,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           value: w ? x : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            b ? "border-red-500 text-red-500" : "border-foreground/20"
+            y ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -5817,7 +5827,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -5826,33 +5836,33 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           UnitSelection,
           {
             units: u,
-            current: h,
+            current: m,
             onSelect: (C) => {
-              r(!1), m(C), P(C);
+              r(!1), f(C), P(C);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || w ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || w ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => _(!0),
         onDragEnd: (C) => {
-          if (y(() => ""), _(!1), isEmpty(C))
+          if (b(() => ""), _(!1), isEmpty(C))
             return;
-          const I = `${C}`, j = `${I.startsWith("-") ? "-" : ""}${c}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
+          const I = `${C}`, j = `${I.startsWith("-") ? "-" : ""}${c}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
           S(j);
         },
         onDrag: (C) => {
           if (isEmpty(C))
             return;
-          y(C);
-          const I = `${C}`, j = `${I.startsWith("-") ? "-" : ""}${c}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
+          b(C);
+          const I = `${C}`, j = `${I.startsWith("-") ? "-" : ""}${c}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
           B(j);
         },
         currentValue: a,
-        unit: h,
+        unit: m,
         negative: g,
         cssProperty: p
       }
@@ -5946,20 +5956,20 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, 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: d, negative: c = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useCanvasWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), x = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
+  }, units: d, negative: c = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useCanvasWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), y = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), x = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
     (B, R = !0) => {
       const P = { dark: p, mq: g, mod: u, cls: B, property: l, fullCls: "" };
       (p || u !== "") && (P.mq = "xs");
       const C = generateFullClsName(P);
-      m(f, [C], R);
+      f(h, [C], R);
     },
-    [f, p, g, u, l, m]
+    [h, p, g, u, l, f]
   ), w = useCallback(() => {
-    b(f, [x]);
-  }, [f, x, b]), _ = useMemo(() => canChangeClass(h, g), [h, g]);
+    y(h, [x]);
+  }, [h, x, y]), _ = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(_, h);
-  }, [_, i, h]);
+    i(_, m);
+  }, [_, i, m]);
   const [, , v] = useCanvasWidth(), k = useCallback(
     (B) => {
       v({
@@ -5972,28 +5982,28 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       }[B]);
     },
     [v]
-  ), S = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: _, canReset: h && S, 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 && !S ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), S = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: _, canReset: m && S, 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] ${m && !S ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(h, "cls", ""),
+            currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: d || [],
-            onChange: y,
+            onChange: b,
             negative: c,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: y }),
-        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: y }),
-        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
-        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
+        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: b }),
+        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: b }),
+        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
+        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => w(), 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 ${x ? "visible" : "invisible"}`, children: S ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => w(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : _ && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6005,19 +6015,19 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(h, "mq")),
-            p && !h.dark ? "(Light mode)" : ""
+            getBreakpoint(get(m, "mq")),
+            p && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => k(get(h, "mq")),
+              onClick: () => k(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(h, "mq").toUpperCase()
+                get(m, "mq").toUpperCase()
               ]
             }
           )
@@ -6034,7 +6044,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: d = !1
 }) => {
-  const { t: c } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: c } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6043,22 +6053,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: c(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: m, key: b }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: f, key: y }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(b),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${b === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(y),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: h(b) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: m(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, b, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, y, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(m)) })
+              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(f)) })
             ] }) }))
           ) })
         ] }),
@@ -6197,13 +6207,13 @@ function BlockStyling() {
     cssProperty: ""
   }), c = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
-      let m = parseFloat(i.dragStartValue);
-      m = isNaN(m) ? 0 : m;
-      let b = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (b = 10);
-      let x = (i.dragStartY - u.pageY) / b + m;
-      g && x < 0 && (x = 0), h === "opacity" && x > 1 && (x = 1), i.onDrag(`${x}`), l(`${x}`);
+      const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
+      let f = parseFloat(i.dragStartValue);
+      f = isNaN(f) ? 0 : f;
+      let y = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (y = 10);
+      let x = (i.dragStartY - u.pageY) / y + f;
+      g && x < 0 && (x = 0), m === "opacity" && x > 1 && (x = 1), i.onDrag(`${x}`), l(`${x}`);
     },
     [i],
     50
@@ -6245,35 +6255,35 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: d, label: c } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: d, label: c } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), f = () => {
     if (has(o, "blocks")) {
       const x = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(x), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, b = useFeature("dnd"), { t: f } = useTranslation();
+  }, y = useFeature("dnd"), { t: h } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
       {
         disabled: n,
-        onClick: m,
+        onClick: f,
         type: "button",
         onDragStart: (x) => {
           x.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), x.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            g([]), h();
+            g([]), m();
           }, 200);
         },
-        draggable: b ? "true" : "false",
+        draggable: y ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(d || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(f(c || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(h(c || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f(c || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: h(c || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6458,7 +6468,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var h, m, b, f, x, y, w, _;
+  var m, f, y, h, x, b, w, _;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -6499,11 +6509,11 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((h = l.find((k) => k.key === "href")) == null ? void 0 : h.value) || "",
-      hrefType: ((m = l.find((k) => k.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((b = l.find((k) => k.key === "data-autoplay")) == null ? void 0 : b.value) === "true" ? "true" : "false",
-      maxWidth: ((x = (f = l.find((k) => k.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : x.replace("px", "")) || "",
-      backdropColor: ((y = l.find((k) => k.key === "data-overlay")) == null ? void 0 : y.value) || "",
+      href: ((m = l.find((k) => k.key === "href")) == null ? void 0 : m.value) || "",
+      hrefType: ((f = l.find((k) => k.key === "data-vbtype")) == null ? void 0 : f.value) || "video",
+      autoplay: ((y = l.find((k) => k.key === "data-autoplay")) == null ? void 0 : y.value) === "true" ? "true" : "false",
+      maxWidth: ((x = (h = l.find((k) => k.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : x.replace("px", "")) || "",
+      backdropColor: ((b = l.find((k) => k.key === "data-overlay")) == null ? void 0 : b.value) || "",
       galleryName: ((w = l.find((k) => k.key === "data-gall")) == null ? void 0 : w.value) || ""
     }, forEach(v, (k) => {
       has(a, `styles_attrs.${k}`) && delete a.styles_attrs[k];
@@ -6585,21 +6595,21 @@ const CoreBlock = ({
     /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => d(), size: "sm", className: "w-fit", children: r("Import HTML") }) })
   ] });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var f;
-  const { t: i } = useTranslation(), [d] = useBlocksStore(), [c, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (f = find(d, (x) => x._id === r)) == null ? void 0 : f._type;
+  var h;
+  const { t: i } = useTranslation(), [d] = useBlocksStore(), [c, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (h = find(d, (x) => x._id === r)) == null ? void 0 : h._type;
   useEffect(() => {
     const x = setTimeout(() => {
-      var y;
-      (y = u.current) == null || y.focus();
+      var b;
+      (b = u.current) == null || b.focus();
     }, 0);
     return () => clearTimeout(x);
   }, [g]);
-  const m = c ? values(n).filter(
+  const f = c ? values(n).filter(
     (x) => {
-      var y, w;
-      return (((y = x.label) == null ? void 0 : y.toLowerCase()) + " " + ((w = x.type) == null ? void 0 : w.toLowerCase())).includes(c.toLowerCase());
+      var b, w;
+      return (((b = x.label) == null ? void 0 : b.toLowerCase()) + " " + ((w = x.type) == null ? void 0 : w.toLowerCase())).includes(c.toLowerCase());
     }
-  ) : n, b = c ? o.filter((x) => reject(filter(values(m), { group: x }), { hidden: !0 }).length > 0) : o.filter((x) => reject(filter(values(n), { group: x }), { hidden: !0 }).length > 0);
+  ) : n, y = c ? o.filter((x) => reject(filter(values(f), { group: x }), { hidden: !0 }).length > 0) : o.filter((x) => reject(filter(values(n), { group: x }), { hidden: !0 }).length > 0);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl 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,
@@ -6611,24 +6621,24 @@ const CoreBlock = ({
         onChange: (x) => p(x.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: b.length === 0 && c ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: y.length === 0 && c ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
       i("No blocks found matching"),
       ' "',
       c,
       '"'
     ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: sortBy(
-      b,
+      y,
       (x) => CORE_GROUPS.indexOf(x) === -1 ? 99 : CORE_GROUPS.indexOf(x)
     ).map((x) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(x.toLowerCase())) }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-        reject(filter(values(m), { group: x }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
+        reject(filter(values(f), { group: x }), { hidden: !0 }).map((b) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: r,
             position: a,
-            block: y,
-            disabled: !canAcceptChildBlock(h, y.type) || !canBeNestedInside(h, y.type)
+            block: b,
+            disabled: !canAcceptChildBlock(m, b.type) || !canBeNestedInside(m, b.type)
           }
         ))
       ) })
@@ -6651,8 +6661,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (h) => {
-          c(""), d(h);
+        onValueChange: (m) => {
+          c(""), d(m);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6661,12 +6671,12 @@ const CoreBlock = ({
             /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             p ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (h) => /* @__PURE__ */ jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
+            map(u, (m) => /* @__PURE__ */ jsx(TabsTrigger, { value: m.key, children: React__default.createElement(m.tab) }))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           p ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(u, (h) => /* @__PURE__ */ jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: g, parentId: r, position: a }) }))
+          map(u, (m) => /* @__PURE__ */ jsx(TabsContent, { value: m.key, children: React__default.createElement(m.tabContent, { close: g, parentId: r, position: a }) }))
         ]
       }
     )
@@ -6723,7 +6733,7 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, b] = useAtom$1(draggedBlockAtom), f = (w) => {
+  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, y] = useAtom$1(draggedBlockAtom), h = (w) => {
     const _ = has(w, "styles_attrs.data-page-section");
     return w._type === "Box" && _;
   }, x = useCallback(
@@ -6744,11 +6754,11 @@ const BlockCard = ({
       {
         onClick: l ? () => {
         } : x,
-        draggable: m ? "true" : "false",
+        draggable: f ? "true" : "false",
         onDragStart: async (w) => {
           const _ = await d(n, o);
           let v = r;
-          if (f(first(_)) && (v = null), !isEmpty(_)) {
+          if (h(first(_)) && (v = null), !isEmpty(_)) {
             const k = { blocks: _, uiLibrary: !0, parent: v };
             if (w.dataTransfer.setData("text/plain", JSON.stringify(k)), o.preview) {
               const S = new Image();
@@ -6757,7 +6767,7 @@ const BlockCard = ({
               };
             } else
               w.dataTransfer.setDragImage(new Image(), 0, 0);
-            b(k), setTimeout(() => {
+            y(k), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6770,11 +6780,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: h }) })
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: m }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: h }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -6789,9 +6799,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, d, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), d = values(i).filter((v) => v.category === "custom"), c = l.find((v) => v.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(c), g = groupBy([...p, ...d], "group"), [h, m] = useState("Hero"), b = get(g, h, []), f = useRef(null), { t: x } = useTranslation(), y = (v) => {
-    f.current && (clearTimeout(f.current), f.current = null), f.current = setTimeout(() => {
-      f.current && m(v);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), d = values(i).filter((v) => v.category === "custom"), c = l.find((v) => v.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(c), g = groupBy([...p, ...d], "group"), [m, f] = useState("Hero"), y = get(g, m, []), h = useRef(null), { t: x } = useTranslation(), b = (v) => {
+    h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
+      h.current && f(v);
     }, 300);
   };
   if (u)
@@ -6799,7 +6809,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const w = filter(b, (v, k) => k % 2 === 0), _ = filter(b, (v, k) => k % 2 === 1);
+  const w = filter(y, (v, k) => k % 2 === 0), _ = filter(y, (v, k) => k % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: a, uiLibraries: l }),
@@ -6810,12 +6820,12 @@ const BlockCard = ({
           map(g, (v, k) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => y(k),
-              onMouseLeave: () => clearTimeout(f.current),
-              onClick: () => m(k),
+              onMouseEnter: () => b(k),
+              onMouseLeave: () => clearTimeout(h.current),
+              onClick: () => f(k),
               className: cn(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                k === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                k === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
                 /* @__PURE__ */ jsx("span", { children: capitalize(x(k.toLowerCase())) }),
@@ -6830,7 +6840,7 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => f.current ? clearTimeout(f.current) : null,
+        onMouseEnter: () => h.current ? clearTimeout(h.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
@@ -7061,8 +7071,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
   var L;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , d] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: b, isSelected: f, willReceiveDrop: x, isDragging: y, isEditing: w, handleClick: _ } = o, v = (A) => {
-    A.stopPropagation(), !i.includes(m) && o.toggle();
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: y, isSelected: h, willReceiveDrop: x, isDragging: b, isEditing: w, handleClick: _ } = o, v = (A) => {
+    A.stopPropagation(), !i.includes(f) && o.toggle();
   }, k = (A) => {
     A.isInternal && (p = A.isOpen, A.isOpen && A.close());
   }, S = (A) => {
@@ -7073,33 +7083,33 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
   }, C = () => {
     R(null);
   }, I = (A) => {
-    C(), A.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), _(A);
+    C(), A.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), _(A);
   };
   useEffect(() => {
     const A = setTimeout(() => {
-      x && !o.isOpen && !y && !i.includes(m) && o.toggle();
+      x && !o.isOpen && !b && !i.includes(f) && o.toggle();
     }, 500);
     return () => clearTimeout(A);
-  }, [x, o, y]);
+  }, [x, o, b]);
   const E = useMemo(() => {
-    const A = Object.keys(b), T = [];
+    const A = Object.keys(y), T = [];
     for (let D = 0; D < A.length; D++)
       if (A[D].endsWith("_attrs")) {
-        const $ = b[A[D]], O = Object.keys($).join("|");
-        O.match(/x-data/) && T.push("data"), O.match(/x-on/) && T.push("event"), O.match(/x-show|x-if/) && T.push("show");
+        const $ = y[A[D]], H = Object.keys($).join("|");
+        H.match(/x-data/) && T.push("data"), H.match(/x-on/) && T.push("event"), H.match(/x-show|x-if/) && T.push("show");
       }
     return T;
-  }, [b]), j = (A, T) => {
+  }, [y]), j = (A, T) => {
     const D = c.contentDocument || c.contentWindow.document, $ = D.querySelector(`[data-block-id=${A}]`);
     $ && $.setAttribute("data-drop", T);
-    const O = $.getBoundingClientRect(), M = c.getBoundingClientRect();
-    O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
+    const H = $.getBoundingClientRect(), M = c.getBoundingClientRect();
+    H.top >= M.top && H.left >= M.left && H.bottom <= M.bottom && H.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
   }, N = (A) => {
     C();
     const T = get(o, "parent.id");
     T !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: T, position: A }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: A });
   };
-  return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return f === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       "div",
@@ -7114,25 +7124,25 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       }
     ),
     /* @__PURE__ */ jsx("br", {})
-  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: f, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => g(m),
-      onMouseLeave: () => h(),
+      onMouseEnter: () => g(f),
+      onMouseLeave: () => m(),
       onClick: I,
       style: n,
-      "data-node-id": m,
-      ref: i.includes(m) ? null : r,
+      "data-node-id": f,
+      ref: i.includes(f) ? null : r,
       onDragStart: () => k(o),
       onDragEnd: () => S(o),
       onDragOver: (A) => {
-        A.preventDefault(), j(m, "yes");
+        A.preventDefault(), j(f, "yes");
       },
       onDragLeave: (A) => {
-        A.preventDefault(), j(m, "no");
+        A.preventDefault(), j(f, "no");
       },
       onDrop: (A) => {
-        A.preventDefault(), j(m, "no");
+        A.preventDefault(), j(f, "no");
       },
       children: [
         (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -7152,11 +7162,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
-              f ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              x && canAcceptChildBlock(b._type, "Icon") ? "bg-green-200" : "",
+              h ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              x && canAcceptChildBlock(y._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === B ? "bg-purple-100" : "",
-              y && "opacity-20",
-              i.includes(m) ? "opacity-50" : ""
+              b && "opacity-20",
+              i.includes(f) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7167,13 +7177,13 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     children: u && /* @__PURE__ */ jsx("button", { onClick: v, type: "button", children: /* @__PURE__ */ jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${f ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${h ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: b == null ? void 0 : b._type }),
+                  /* @__PURE__ */ jsx(TypeIcon, { type: y == null ? void 0 : y._type }),
                   w ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -7182,7 +7192,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                         A.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: (b == null ? void 0 : b._name) || (b == null ? void 0 : b._type.split("/").pop()) }),
+                        /* @__PURE__ */ jsx("span", { children: (y == null ? void 0 : y._name) || (y == null ? void 0 : y._type.split("/").pop()) }),
                         E.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                         E.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                         E.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -7192,22 +7202,22 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(m) && a.map((A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                !i.includes(f) && a.map((A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(A.item, { blockId: m })
+                      children: React__default.createElement(A.item, { blockId: f })
                     }
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: A.tooltip })
                 ] })),
-                canAddChildBlock(b == null ? void 0 : b._type) && !i.includes(m) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(y == null ? void 0 : y._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: f }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsx(PlusIcon$1, { size: "15" })
@@ -7220,7 +7230,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     TooltipTrigger,
                     {
                       onClick: (A) => {
-                        A.stopPropagation(), d(m), o.isOpen && o.toggle();
+                        A.stopPropagation(), d(f), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -7880,14 +7890,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, d] = useState(""), [c, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, d] = useState(""), [c, p] = useState(!0), [u, g] = useState(), m = useRef(null), f = useRef(null);
   useEffect(() => {
-    var f;
-    (f = h.current) == null || f.focus();
+    var h;
+    (h = m.current) == null || h.focus();
   }, []);
-  const b = (f) => {
-    const { usage: x } = f || {};
-    !l && x && g(x), m.current = setTimeout(() => g(void 0), 1e4), l || d("");
+  const y = (h) => {
+    const { usage: x } = h || {};
+    !l && x && g(x), f.current = setTimeout(() => g(void 0), 1e4), l || d("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -7905,14 +7915,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: h,
+          ref: m,
           value: i,
-          onChange: (f) => d(f.target.value),
+          onChange: (h) => d(h.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (f) => {
-            f.key === "Enter" && (f.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, b));
+          onKeyDown: (h) => {
+            h.key === "Enter" && (h.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, y));
           }
         }
       ),
@@ -7922,7 +7932,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, b);
+              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, y);
             },
             variant: "default",
             className: "w-fit",
@@ -7954,8 +7964,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (f) => {
-            m.current && clearTimeout(m.current), g(void 0), r("content", o, f, b);
+          onClick: (h) => {
+            f.current && clearTimeout(f.current), g(void 0), r("content", o, h, y);
           }
         }
       )
@@ -7965,19 +7975,19 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [d, c] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), { toast: h } = useToast(), m = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [d, c] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), { toast: m } = useToast(), f = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const b = async () => {
+  const y = async () => {
     try {
-      c(!0), u(null), await i(r), h({
+      c(!0), u(null), await i(r), m({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), m.current.click();
-    } catch (f) {
-      u(f);
+      }), f.current.click();
+    } catch (h) {
+      u(h);
     } finally {
       c(!1);
     }
@@ -7985,25 +7995,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (f) => {
-        g(f !== "");
+      onValueChange: (h) => {
+        g(h !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (f) => a(f.target.value),
+              onChange: (h) => a(h.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (f) => {
-                f.key === "Enter" && (f.preventDefault(), b());
+              onKeyDown: (h) => {
+                h.key === "Enter" && (h.preventDefault(), y());
               }
             }
           ),
@@ -8015,7 +8025,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => b(),
+                onClick: () => y(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8044,7 +8054,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), b();
+                        a(""), y();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8306,32 +8316,32 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, d] = useState(""), [c, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), b = useRef(null), f = useRef(null);
+  const [a, l] = useState([]), [i, d] = useState(""), [c, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), y = useRef(null), h = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
   const x = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      f("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const k = [...a, { key: i, value: c }];
-      r(k), l(a), d(""), p(""), m("");
+      r(k), l(a), d(""), p(""), f("");
     }
-  }, y = (k) => {
+  }, b = (k) => {
     const S = a.filter((B, R) => R !== k);
     r(S), l(S);
   }, w = (k) => {
     g(k), d(a[k].key), p(a[k].value);
   }, _ = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      f("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
       const k = [...a];
-      k[u] = { key: i, value: c }, r(k), l(k), g(null), d(""), p(""), m("");
+      k[u] = { key: i, value: c }, r(k), l(k), g(null), d(""), p(""), f("");
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
@@ -8353,7 +8363,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: b,
+                  ref: y,
                   value: i,
                   onChange: (k) => d(k.target.value),
                   placeholder: "Enter Key",
@@ -8371,7 +8381,7 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: f,
+                  ref: h,
                   value: c,
                   onChange: (k) => p(k.target.value),
                   onKeyDown: (k) => {
@@ -8384,7 +8394,7 @@ const AiAssistant = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          h && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: h })
+          m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
     ),
@@ -8395,7 +8405,7 @@ const AiAssistant = () => {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(S), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(S), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => b(S), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
     ] }, S)) })
   ] });
@@ -8591,12 +8601,12 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const d = useBuilderProp("sideBarComponents.top", []), c = useBuilderProp("sideBarComponents.bottom", []), p = (f) => {
-    f.preventDefault();
-  }, u = (f) => {
-    n(o === f ? null : f);
-  }, g = useSidebarMenuItems(), { t: h } = useTranslation(), m = [...g, ...d], b = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsx("div", { dir: b, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  const d = useBuilderProp("sideBarComponents.top", []), c = useBuilderProp("sideBarComponents.bottom", []), p = (h) => {
+    h.preventDefault();
+  }, u = (h) => {
+    n(o === h ? null : h);
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...d], y = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8606,21 +8616,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m.map((f, x) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((h, x) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: o === x ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => u(x),
-                    children: get(f, "icon", null)
+                    children: get(h, "icon", null)
                   },
                   x
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(f.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(h.label) }) })
               ] }, "button" + x)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: c == null ? void 0 : c.map((f, x) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(f, { key: x }) })) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: c == null ? void 0 : c.map((h, x) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(h, {}) }, `sidebar-component-${x}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -8633,14 +8643,14 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `absolute top-2 z-50 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(m, `${o}.isInternal`, !1) ? "" : "w-64"}`,
+                      className: `absolute top-2 z-50 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(f, `${o}.isInternal`, !1) ? "" : "w-64"}`,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: h(m[o].label) })
+                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(f, `${o}.icon`, null) }),
+                        /* @__PURE__ */ jsx("span", { children: m(f[o].label) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(f, `${o}.component`, null), {}) }) })
                 ] })
               }
             ),
@@ -8659,11 +8669,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    h("AI Assistant")
+                    m("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      h("Theme Settings")
+                      m("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,