@chaibuilder/sdk 2.0.0-beta.62 → 2.0.0-beta.64

package/dist/core.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, Component, Children, useMemo, useState, useRef, Suspense, memo, createElement, 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-FCyNTUkl.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, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, memoize, forEach, unset, chunk, cloneDeep, pick, throttle, reverse, startCase, debounce, capitalize, split, findIndex, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, flatMapDeep, some, groupBy, uniq, sortBy, reject, toUpper, round } from "lodash-es";
+import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, forEach, unset, chunk, cloneDeep, pick, throttle, memoize, reverse, startCase, debounce, capitalize, split, findIndex, take, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, flatMapDeep, some, groupBy, uniq, sortBy, reject, 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";
@@ -104,51 +104,51 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     c
   ] = o, d = (B) => {
     let A = n(B);
-    return A || (A = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, r(B, A), i == null || i(B, I)), A;
-  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), m = () => {
+    return A || (A = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, r(B, A), i == null || i(B, N)), A;
+  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), m = () => {
     var B;
-    const A = [], N = (L) => {
+    const A = [], _ = (L) => {
       try {
         L();
-      } catch (S) {
-        A.push(S);
+      } catch (C) {
+        A.push(C);
       }
     };
     do {
-      (B = I[INTERNAL_flushStoreHook]) == null || B.call(I);
-      const L = /* @__PURE__ */ new Set(), S = L.add.bind(L);
+      (B = N[INTERNAL_flushStoreHook]) == null || B.call(N);
+      const L = /* @__PURE__ */ new Set(), C = L.add.bind(L);
       u.forEach((T) => {
         var D;
-        return (D = T.m) == null ? void 0 : D.l.forEach(S);
-      }), u.clear(), x.forEach(S), x.clear(), g.forEach(S), g.clear(), L.forEach(N), u.size && C();
-    } while (u.size || x.size || g.size);
+        return (D = T.m) == null ? void 0 : D.l.forEach(C);
+      }), u.clear(), x.forEach(C), x.clear(), h.forEach(C), h.clear(), L.forEach(_), u.size && w();
+    } while (u.size || x.size || h.size);
     if (A.length)
       throw A[0];
-  }, f = (B, A, N) => {
-    const L = "v" in A, S = A.v, T = isPendingPromise(A.v) ? A.v : null;
-    if (isPromiseLike$2(N)) {
-      patchPromiseForCancelability(N);
+  }, f = (B, A, _) => {
+    const L = "v" in A, C = A.v, T = isPendingPromise(A.v) ? A.v : null;
+    if (isPromiseLike$2(_)) {
+      patchPromiseForCancelability(_);
       for (const D of A.d.keys())
-        addPendingPromiseToDependency(B, N, d(D));
-      A.v = N;
+        addPendingPromiseToDependency(B, _, d(D));
+      A.v = _;
     } else
-      A.v = N;
-    delete A.e, (!L || !Object.is(S, A.v)) && (++A.n, T && cancelPromise(T, N));
-  }, h = (B) => {
+      A.v = _;
+    delete A.e, (!L || !Object.is(C, A.v)) && (++A.n, T && cancelPromise(T, _));
+  }, g = (B) => {
     var A;
-    const N = d(B);
-    if (isAtomStateInitialized(N) && (N.m && p.get(B) !== N.n || Array.from(N.d).every(
-      ([M, H]) => (
+    const _ = d(B);
+    if (isAtomStateInitialized(_) && (_.m && p.get(B) !== _.n || Array.from(_.d).every(
+      ([M, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        h(M).n === H
+        g(M).n === O
       )
     )))
-      return N;
-    N.d.clear();
+      return _;
+    _.d.clear();
     let L = !0;
-    const S = () => {
-      N.m && (k(B, N), C(), m());
+    const C = () => {
+      _.m && (k(B, _), w(), m());
     }, T = (M) => {
       if (isSelfAtom(B, M)) {
         const U = d(M);
@@ -159,15 +159,15 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             throw new Error("no atom init");
         return returnAtomValue(U);
       }
-      const H = h(M);
+      const O = g(M);
       try {
-        return returnAtomValue(H);
+        return returnAtomValue(O);
       } finally {
-        addDependency(B, N, M, H), L || S();
+        addDependency(B, _, M, O), L || C();
       }
     };
     let D, $;
-    const O = {
+    const H = {
       get signal() {
         return D || (D = new AbortController()), D.signal;
       },
@@ -179,122 +179,122 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     };
     try {
-      const M = a(B, T, O);
-      return f(B, N, M), isPromiseLike$2(M) && ((A = M.onCancel) == null || A.call(M, () => D == null ? void 0 : D.abort()), M.then(S, S)), N;
+      const M = a(B, T, H);
+      return f(B, _, M), isPromiseLike$2(M) && ((A = M.onCancel) == null || A.call(M, () => D == null ? void 0 : D.abort()), M.then(C, C)), _;
     } catch (M) {
-      return delete N.v, N.e = M, ++N.n, N;
+      return delete _.v, _.e = M, ++_.n, _;
     } finally {
       L = !1;
     }
-  }, b = (B) => returnAtomValue(h(B)), y = (B) => {
+  }, b = (B) => returnAtomValue(g(B)), y = (B) => {
     var A;
-    const N = /* @__PURE__ */ new Map();
+    const _ = /* @__PURE__ */ new Map();
     for (const L of ((A = B.m) == null ? void 0 : A.t) || []) {
-      const S = d(L);
-      S.m && N.set(L, S);
+      const C = d(L);
+      C.m && _.set(L, C);
     }
     for (const L of B.p)
-      N.set(
+      _.set(
         L,
         d(L)
       );
-    return N;
+    return _;
   }, R = (B) => {
     const A = [B];
     for (; A.length; ) {
-      const N = A.pop();
-      for (const [L, S] of y(N))
-        p.has(L) || (p.set(L, S.n), A.push(S));
+      const _ = A.pop();
+      for (const [L, C] of y(_))
+        p.has(L) || (p.set(L, C.n), A.push(C));
     }
-  }, C = () => {
+  }, w = () => {
     var B;
-    const A = [], N = /* @__PURE__ */ new WeakSet(), L = /* @__PURE__ */ new WeakSet(), S = Array.from(u);
-    for (; S.length; ) {
-      const [T, D] = S[S.length - 1];
+    const A = [], _ = /* @__PURE__ */ new WeakSet(), L = /* @__PURE__ */ new WeakSet(), C = Array.from(u);
+    for (; C.length; ) {
+      const [T, D] = C[C.length - 1];
       if (L.has(T)) {
-        S.pop();
+        C.pop();
         continue;
       }
-      if (N.has(T)) {
-        p.get(T) === D.n ? A.push([T, D, D.n]) : (p.delete(T), u.set(T, D)), L.add(T), S.pop();
+      if (_.has(T)) {
+        p.get(T) === D.n ? A.push([T, D, D.n]) : (p.delete(T), u.set(T, D)), L.add(T), C.pop();
         continue;
       }
-      N.add(T);
-      for (const [$, O] of y(D))
-        N.has($) || S.push([$, O]);
+      _.add(T);
+      for (const [$, H] of y(D))
+        _.has($) || C.push([$, H]);
     }
     for (let T = A.length - 1; T >= 0; --T) {
-      const [D, $, O] = A[T];
+      const [D, $, H] = A[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 && (h(D), k(D, $), O !== $.n && (u.set(D, $), (B = $.u) == null || B.call($))), p.delete(D);
+      M && (g(D), k(D, $), H !== $.n && (u.set(D, $), (B = $.u) == null || B.call($))), p.delete(D);
     }
   }, j = (B, ...A) => {
-    let N = !0;
-    const L = (T) => returnAtomValue(h(T)), S = (T, ...D) => {
+    let _ = !0;
+    const L = (T) => returnAtomValue(g(T)), C = (T, ...D) => {
       var $;
-      const O = d(T);
+      const H = d(T);
       try {
         if (isSelfAtom(B, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const M = O.n, H = D[0];
-          f(T, O, H), k(T, O), M !== O.n && (u.set(T, O), ($ = O.u) == null || $.call(O), R(O));
+          const M = H.n, O = D[0];
+          f(T, H, O), k(T, H), M !== H.n && (u.set(T, H), ($ = H.u) == null || $.call(H), R(H));
           return;
         } else
           return j(T, ...D);
       } finally {
-        N || (C(), m());
+        _ || (w(), m());
       }
     };
     try {
-      return l(B, L, S, ...A);
+      return l(B, L, C, ...A);
     } finally {
-      N = !1;
+      _ = !1;
     }
   }, E = (B, ...A) => {
     try {
       return j(B, ...A);
     } finally {
-      C(), m();
+      w(), m();
     }
   }, k = (B, A) => {
-    var N;
+    var _;
     if (A.m && !isPendingPromise(A.v)) {
-      for (const [L, S] of A.d)
+      for (const [L, C] of A.d)
         if (!A.m.d.has(L)) {
           const T = d(L);
-          w(L, T).t.add(B), A.m.d.add(L), S !== T.n && (u.set(L, T), (N = T.u) == null || N.call(T), R(T));
+          S(L, T).t.add(B), A.m.d.add(L), C !== T.n && (u.set(L, T), (_ = T.u) == null || _.call(T), R(T));
         }
       for (const L of A.m.d || [])
         if (!A.d.has(L)) {
           A.m.d.delete(L);
-          const S = _(L, d(L));
-          S == null || S.t.delete(B);
+          const C = I(L, d(L));
+          C == null || C.t.delete(B);
         }
     }
-  }, w = (B, A) => {
-    var N;
+  }, S = (B, A) => {
+    var _;
     if (!A.m) {
-      h(B);
+      g(B);
       for (const L of A.d.keys())
-        w(L, d(L)).t.add(B);
+        S(L, d(L)).t.add(B);
       if (A.m = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(A.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, (N = A.h) == null || N.call(A), isActuallyWritableAtom(B)) {
-        const L = A.m, S = () => {
+      }, (_ = A.h) == null || _.call(A), isActuallyWritableAtom(B)) {
+        const L = A.m, C = () => {
           let T = !0;
           const D = (...$) => {
             try {
               return j(B, ...$);
             } finally {
-              T || (C(), m());
+              T || (w(), m());
             }
           };
           try {
@@ -311,37 +311,37 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             T = !1;
           }
         };
-        g.add(S);
+        h.add(C);
       }
     }
     return A.m;
-  }, _ = (B, A) => {
-    var N;
+  }, I = (B, A) => {
+    var _;
     if (A.m && !A.m.l.size && !Array.from(A.m.t).some((L) => {
-      var S;
-      return (S = d(L).m) == null ? void 0 : S.d.has(B);
+      var C;
+      return (C = d(L).m) == null ? void 0 : C.d.has(B);
     })) {
       const L = A.m.u;
-      L && x.add(L), delete A.m, (N = A.h) == null || N.call(A);
-      for (const S of A.d.keys()) {
-        const T = _(S, d(S));
+      L && x.add(L), delete A.m, (_ = A.h) == null || _.call(A);
+      for (const C of A.d.keys()) {
+        const T = I(C, d(C));
         T == null || T.t.delete(B);
       }
       return;
     }
     return A.m;
-  }, I = {
+  }, N = {
     get: b,
     set: E,
     sub: (B, A) => {
-      const N = d(B), S = w(B, N).l;
-      return S.add(A), m(), () => {
-        S.delete(A), _(B, N), m();
+      const _ = d(B), C = S(B, _).l;
+      return C.add(A), m(), () => {
+        C.delete(A), I(B, _), m();
       };
     },
     unstable_derive: (B) => buildStore(...B(...o))
   };
-  return I;
+  return N;
 }, createStore = () => {
   const o = /* @__PURE__ */ new WeakMap();
   return buildStore(
@@ -373,37 +373,37 @@ function splitAtom(o, n) {
         let p = r.get(c);
         if (p)
           return p;
-        const u = d && r.get(d), x = [], g = [];
+        const u = d && r.get(d), x = [], h = [];
         return c.forEach((m, f) => {
-          const h = f;
-          g[f] = h;
-          const b = u && u.atomList[u.keyList.indexOf(h)];
+          const g = f;
+          h[f] = g;
+          const b = u && u.atomList[u.keyList.indexOf(g)];
           if (b) {
             x[f] = b;
             return;
           }
-          const y = (C) => {
-            const j = C(l), E = C(o), w = a(E, j == null ? void 0 : j.arr).keyList.indexOf(h);
-            if (w < 0 || w >= E.length) {
-              const _ = c[a(c).keyList.indexOf(h)];
-              if (_)
-                return _;
+          const y = (w) => {
+            const j = w(l), E = w(o), S = a(E, j == null ? void 0 : j.arr).keyList.indexOf(g);
+            if (S < 0 || S >= E.length) {
+              const I = c[a(c).keyList.indexOf(g)];
+              if (I)
+                return I;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return E[w];
-          }, R = (C, j, E) => {
-            const k = C(l), w = C(o), P = a(w, k == null ? void 0 : k.arr).keyList.indexOf(h);
-            if (P < 0 || P >= w.length)
+            return E[S];
+          }, R = (w, j, E) => {
+            const k = w(l), S = w(o), P = a(S, k == null ? void 0 : k.arr).keyList.indexOf(g);
+            if (P < 0 || P >= S.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(E) ? E(w[P]) : E;
-            Object.is(w[P], v) || j(o, [
-              ...w.slice(0, P),
+            const v = isFunction(E) ? E(S[P]) : E;
+            Object.is(S[P], v) || j(o, [
+              ...S.slice(0, P),
               v,
-              ...w.slice(P + 1)
+              ...S.slice(P + 1)
             ]);
           };
           x[f] = isWritable(o) ? atom(y, R) : atom(y);
-        }), u && u.keyList.length === g.length && u.keyList.every((m, f) => m === g[f]) ? p = u : p = { arr: c, atomList: x, keyList: g }, r.set(c, p), p;
+        }), u && u.keyList.length === h.length && u.keyList.every((m, f) => m === h[f]) ? p = u : p = { arr: c, atomList: x, keyList: h }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -439,17 +439,17 @@ function splitAtom(o, n) {
             case "move": {
               const u = c(i).indexOf(p.atom), x = p.before ? c(i).indexOf(p.before) : c(i).length;
               if (u >= 0 && x >= 0) {
-                const g = c(o);
+                const h = c(o);
                 u < x ? d(o, [
-                  ...g.slice(0, u),
-                  ...g.slice(u + 1, x),
-                  g[u],
-                  ...g.slice(x)
+                  ...h.slice(0, u),
+                  ...h.slice(u + 1, x),
+                  h[u],
+                  ...h.slice(x)
                 ]) : d(o, [
-                  ...g.slice(0, x),
-                  g[u],
-                  ...g.slice(x, u),
-                  ...g.slice(u + 1)
+                  ...h.slice(0, x),
+                  h[u],
+                  ...h.slice(x, u),
+                  ...h.slice(u + 1)
                 ]);
               }
               break;
@@ -475,18 +475,18 @@ function createJSONStorage(o = () => {
   let a, l;
   const i = {
     getItem: (p, u) => {
-      var x, g;
-      const m = (h) => {
-        if (h = h || "", a !== h) {
+      var x, h;
+      const m = (g) => {
+        if (g = g || "", a !== g) {
           try {
-            l = JSON.parse(h, n == null ? void 0 : n.reviver);
+            l = JSON.parse(g, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = h;
+          a = g;
         }
         return l;
-      }, f = (g = (x = o()) == null ? void 0 : x.getItem(p)) != null ? g : null;
+      }, f = (h = (x = o()) == null ? void 0 : x.getItem(p)) != null ? h : null;
       return isPromiseLike$1(f) ? f.then(m) : m(f);
     },
     setItem: (p, u) => {
@@ -500,12 +500,12 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, x, g) => p(u, (m) => {
+  }, c = (p) => (u, x, h) => p(u, (m) => {
     let f;
     try {
       f = JSON.parse(m || "");
     } catch {
-      f = g;
+      f = h;
     }
     x(f);
   });
@@ -518,8 +518,8 @@ function createJSONStorage(o = () => {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const x = (g) => {
-      g.storageArea === o() && g.key === p && u(g.newValue);
+    const x = (h) => {
+      h.storageArea === o() && h.key === p && u(h.newValue);
     };
     return window.addEventListener("storage", x), () => {
       window.removeEventListener("storage", x);
@@ -1305,65 +1305,65 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (h, b, y) => {
-      const R = map(h, (j) => {
-        const k = n.find((P) => P._id === j)._parent || null, _ = n.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(j);
-        return { _id: j, oldParent: k, oldPosition: _ };
-      }), C = R.find(({ _id: j }) => j === h[0]);
-      C && C.oldParent === b && C.oldPosition === y || (i(h, b, y), o({
+    moveBlocks: (g, b, y) => {
+      const R = map(g, (j) => {
+        const k = n.find((P) => P._id === j)._parent || null, I = n.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(j);
+        return { _id: j, oldParent: k, oldPosition: I };
+      }), w = R.find(({ _id: j }) => j === g[0]);
+      w && w.oldParent === b && w.oldPosition === y || (i(g, b, y), o({
         undo: () => each(R, ({ _id: j, oldParent: E, oldPosition: k }) => {
           i([j], E, k);
         }),
-        redo: () => i(h, b, y)
+        redo: () => i(g, b, y)
       }));
     },
-    addBlocks: (h, b, y) => {
-      a(h, b, y), o({
-        undo: () => l(map(h, "_id")),
-        redo: () => a(h, b, y)
+    addBlocks: (g, b, y) => {
+      a(g, b, y), o({
+        undo: () => l(map(g, "_id")),
+        redo: () => a(g, b, y)
       });
     },
-    removeBlocks: (h) => {
-      var C;
-      const b = (C = first(h)) == null ? void 0 : C._parent, R = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(h));
-      l(map(h, "_id")), o({
-        undo: () => a(h, b, R),
-        redo: () => l(map(h, "_id"))
+    removeBlocks: (g) => {
+      var w;
+      const b = (w = first(g)) == null ? void 0 : w._parent, R = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(g));
+      l(map(g, "_id")), o({
+        undo: () => a(g, b, R),
+        redo: () => l(map(g, "_id"))
       });
     },
-    updateBlocks: (h, b, y) => {
+    updateBlocks: (g, b, y) => {
       let R = [];
       if (y)
-        R = map(h, (C) => ({ _id: C, ...y }));
+        R = map(g, (w) => ({ _id: w, ...y }));
       else {
-        const C = keys(b);
-        R = map(h, (j) => {
-          const E = n.find((w) => w._id === j), k = { _id: j };
-          return each(C, (w) => k[w] = E[w]), k;
+        const w = keys(b);
+        R = map(g, (j) => {
+          const E = n.find((S) => S._id === j), k = { _id: j };
+          return each(w, (S) => k[S] = E[S]), k;
         });
       }
-      c(map(h, (C) => ({ _id: C, ...b }))), o({
+      c(map(g, (w) => ({ _id: w, ...b }))), o({
         undo: () => c(R),
-        redo: () => c(map(h, (C) => ({ _id: C, ...b })))
+        redo: () => c(map(g, (w) => ({ _id: w, ...b })))
       });
     },
-    updateBlocksRuntime: (h, b) => {
-      c(map(h, (y) => ({ _id: y, ...b })));
+    updateBlocksRuntime: (g, b) => {
+      c(map(g, (y) => ({ _id: y, ...b })));
     },
-    setNewBlocks: (h) => {
-      r(h), o({
+    setNewBlocks: (g) => {
+      r(g), o({
         undo: () => r(n),
-        redo: () => r(h)
+        redo: () => r(g)
       });
     },
-    updateMultipleBlocksProps: (h) => {
+    updateMultipleBlocksProps: (g) => {
       let b = [];
-      b = map(h, (y) => {
-        const R = keys(y), C = n.find((E) => E._id === y._id), j = {};
-        return each(R, (E) => j[E] = C[E]), j;
-      }), c(h), o({
+      b = map(g, (y) => {
+        const R = keys(y), w = n.find((E) => E._id === y._id), j = {};
+        return each(R, (E) => j[E] = w[E]), j;
+      }), c(g), o({
         undo: () => c(b),
-        redo: () => c(h)
+        redo: () => c(g)
       });
     }
   };
@@ -1372,9 +1372,9 @@ const useBlocksStoreManager = () => {
     (i, c, d) => {
       var m;
       for (let f = 0; f < i.length; f++) {
-        const { _id: h } = i[f];
+        const { _id: g } = i[f];
         i[f]._id = generateUUID();
-        const b = filter(i, { _parent: h });
+        const b = filter(i, { _parent: g });
         for (let y = 0; y < b.length; y++)
           b[y]._parent = i[f]._id;
       }
@@ -1395,8 +1395,8 @@ const useBlocksStoreManager = () => {
         _id: p,
         ...u
       };
-      let g, m;
-      return c && (g = find(o, { _id: c }), x._parent = c, m = c), !canAcceptChildBlock(g == null ? void 0 : g._type, x._type) && g && (x._parent = g._parent, m = g._parent), r([x], m, d), n([x._id]), x;
+      let h, m;
+      return c && (h = find(o, { _id: c }), x._parent = c, m = c), !canAcceptChildBlock(h == null ? void 0 : h._type, x._type) && h && (x._parent = h._parent, m = h._parent), r([x], m, d), n([x._id]), x;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2605,8 +2605,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
         const x = filter(
           o,
           (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(d) + 1, g = getDuplicatedBlocks(o, c, l);
-        r(g, l, x), i.push(get(g, "0._id", ""));
+        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
+        r(h, l, x), i.push(get(h, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2699,13 +2699,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (g) => {
-      const m = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+    return each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const h = first(g.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], h) && p.push(g.split(":").pop().trim());
-    }), each(p, (g) => {
-      const m = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      const g = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], g) && p.push(h.split(":").pop().trim());
+    }), each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       x = x.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
@@ -2770,7 +2770,7 @@ const useLanguages = () => {
     selectedLang: r,
     setSelectedLang: l
   };
-}, updatePropsForLanguage = memoize((o, n, r) => {
+}, updatePropsForLanguage = (o, n, r) => {
   const a = getRegisteredChaiBlock(get(r, "_type"));
   if (!a) return o;
   const l = { ...o };
@@ -2780,7 +2780,7 @@ const useLanguages = () => {
       set(l, c, o[i]), unset(l, i);
     }
   }), l;
-}), useUpdateBlocksProps = () => {
+}, useUpdateBlocksProps = () => {
   const { updateBlocks: o } = useBlocksStoreUndoableActions(), { selectedLang: n } = useLanguages(), r = useSelectedBlock();
   return useCallback(
     (a, l, i) => {
@@ -3119,39 +3119,39 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), 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(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, g = (m, f) => {
-    const h = cloneDeep(f.find((b) => b._id === m));
-    for (const b in h) {
-      const y = h[b];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, h = (m, f) => {
+    const g = cloneDeep(f.find((b) => b._id === m));
+    for (const b in g) {
+      const y = g[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: R, classes: C } = getSplitChaiClasses(y);
-        h[b] = compact(flattenDeep([R, C])).join(" ");
+        const { baseClasses: R, classes: w } = getSplitChaiClasses(y);
+        g[b] = compact(flattenDeep([R, w])).join(" ");
       } else
-        b !== "_id" && delete h[b];
+        b !== "_id" && delete g[b];
     }
-    return h;
+    return g;
   };
   return {
     askAi: useCallback(
-      async (m, f, h, b) => {
+      async (m, f, g, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, R = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [g(f, d)], C = await l(m, addLangToPrompt(h, x, m), R, y), { blocks: j, error: E } = C;
+            const y = p === u ? "" : p, R = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], w = await l(m, addLangToPrompt(g, x, m), R, y), { blocks: j, error: E } = w;
             if (E) {
               a(E);
               return;
             }
             if (m === "styles") {
-              const k = j.map((w) => {
-                for (const _ in w)
-                  _ !== "_id" && (w[_] = `${STYLES_KEY},${w[_]}`);
-                return w;
+              const k = j.map((S) => {
+                for (const I in S)
+                  I !== "_id" && (S[I] = `${STYLES_KEY},${S[I]}`);
+                return S;
               });
               c(k);
             } else
               i(j);
-            b && b(C);
+            b && b(w);
           } catch (y) {
             a(y);
           } finally {
@@ -3248,7 +3248,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   });
   useResizeObserver(o, () => x(), o !== null);
-  const g = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const h = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3265,12 +3265,12 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       onKeyDown: (f) => f.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        g && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        h && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([g]);
+              c([]), l([h]);
             }
           }
         ),
@@ -3346,14 +3346,14 @@ 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: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: g } = usePasteBlocks(), m = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      x(n[0]) && g(n);
+      x(n[0]) && h(n);
     },
     { ...m, preventDefault: !0 },
-    [n, x, g]
+    [n, x, h]
   ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
     n,
     i
@@ -3448,7 +3448,7 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const g = () => {
+  const h = () => {
     removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
@@ -3460,23 +3460,23 @@ const useDnd = () => {
       var E;
       const f = dropTarget, b = getOrientation(f) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const y = d, R = f.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === R || !C) {
-        g();
+      const y = d, R = f.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === R || !w) {
+        h();
         return;
       }
       if (!has(y, "_id")) {
-        a(y, R === "canvas" ? null : R, dropIndex), setTimeout(g, 300);
+        a(y, R === "canvas" ? null : R, dropIndex), setTimeout(h, 300);
         return;
       }
       let j = f.getAttribute("data-block-id");
-      j === null && (j = m.target.parentElement.getAttribute("data-block-id")), c([y._id], j === "canvas" ? null : j, dropIndex), g(), setTimeout(removePlaceholder, 300);
+      j === null && (j = m.target.parentElement.getAttribute("data-block-id")), c([y._id], j === "canvas" ? null : j, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
-      const f = m, h = f.target;
-      dropTarget = h;
-      const b = h.getAttribute("data-block-id"), y = h.getAttribute("data-dnd-dragged") !== "yes";
-      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(h), r(!0), l(""), i([]);
+      const f = m, g = f.target;
+      dropTarget = g;
+      const b = g.getAttribute("data-block-id"), y = g.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(g), r(!0), l(""), i([]);
     },
     onDragLeave: (m) => {
       m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3499,7 +3499,7 @@ function destroyQuill(o) {
 const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
-    var g;
+    var h;
     if (r) return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
     if (!d || !o.includes(d))
@@ -3517,7 +3517,7 @@ const useHandleCanvasDblClick = () => {
       m.stopPropagation();
     }), p.addEventListener("keydown", (m) => {
       (m.key === "Enter" || m.key === "Escape") && x();
-    }), u.focus(), (g = p.querySelector(".ql-clipboard")) == null || g.remove(), a(c.getAttribute("data-block-id"));
+    }), u.focus(), (h = p.querySelector(".ql-clipboard")) == null || h.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3554,12 +3554,12 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const g = getElementByDataBlockId(n, first(r));
-      if (g) {
-        const m = g.getAttribute("data-style-prop");
+      const h = getElementByDataBlockId(n, first(r));
+      if (h) {
+        const m = h.getAttribute("data-style-prop");
         if (m) {
-          const f = g.getAttribute("data-style-id"), h = g.getAttribute("data-block-parent");
-          l([{ id: f, prop: m, blockId: h }]);
+          const f = h.getAttribute("data-style-id"), g = h.getAttribute("data-block-parent");
+          l([{ id: f, prop: m, blockId: g }]);
         }
       }
     }, 100);
@@ -3582,7 +3582,7 @@ 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), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [x] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
-  ), [g] = useState(
+  ), [h] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [m] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
@@ -3632,19 +3632,19 @@ const useHandleCanvasDblClick = () => {
   }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    g && (g.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, g]), useEffect(() => {
+  }, [l, h]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
   const f = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), h = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), g = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: f }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: h } })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: g } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3721,18 +3721,18 @@ function applyLanguage(o, n, r) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
-  const { selectedLang: r, fallbackLang: a } = useLanguages(), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [d] = useHiddenBlockIds(), { getGlobalBlocks: p } = useGlobalBlocksStore(), u = useCallback((m) => getStyleAttrs(m), []), [x] = useChaiExternalData(), [g] = useAtom$1(inlineEditingActiveAtom);
+  const { selectedLang: r, fallbackLang: a } = useLanguages(), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [d] = useHiddenBlockIds(), { getGlobalBlocks: p } = useGlobalBlocksStore(), u = useCallback((m) => getStyleAttrs(m), []), [x] = useChaiExternalData(), [h] = useAtom$1(inlineEditingActiveAtom);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
     o.map((m, f) => {
-      if (g === m._id || d.includes(m._id)) return null;
-      const h = {}, b = filter(n, { _parent: m._id });
-      if (h.children = b.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: b }) : null, m._type === "GlobalBlock") {
-        const _ = p(m);
-        h.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(_, (P) => !P._parent), allBlocks: _ });
+      if (h === m._id || d.includes(m._id)) return null;
+      const g = {}, b = filter(n, { _parent: m._id });
+      if (g.children = b.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: b }) : null, m._type === "GlobalBlock") {
+        const I = p(m);
+        g.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(I, (P) => !P._parent), allBlocks: I });
       }
       const y = getRegisteredChaiBlock(m._type), R = get(y, "component", null);
       if (isNull(R)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${m == null ? void 0 : m._type} not registered -->` });
-      const C = u(m), j = i && isDescendant(i._id, m._id, n), k = {
+      const w = u(m), j = i && isDescendant(i._id, m._id, n), k = {
         blockProps: {
           "data-block-id": m._id,
           "data-block-type": m._type,
@@ -3748,8 +3748,8 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
         },
         index: f,
         ...applyBindings(applyLanguage(m, r, y), x),
-        ...C,
-        ...h,
+        ...w,
+        ...g,
         inBuilder: !0,
         lang: r || a
       };
@@ -3764,11 +3764,11 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
             props: k
           }
         ) });
-      const w = getRuntimeProps(m._type);
-      return w ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      const S = getRuntimeProps(m._type);
+      return S ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         RuntimePropsBlock,
         {
-          runtimeProps: w,
+          runtimeProps: S,
           block: m,
           component: R,
           props: k
@@ -3787,10 +3787,10 @@ const StaticBlocksRenderer = () => {
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let x = {};
-      const g = p * u, m = d * u;
+      const h = p * u, m = d * u;
       p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - g) / g * 100 + "%",
+        height: 100 + (p - h) / h * 100 + "%",
         width: 100 + (d - m) / m * 100 + "%"
       }), i({
         position: "relative",
@@ -3808,39 +3808,39 @@ const StaticBlocksRenderer = () => {
     c();
   }, [n, o, r, c]), 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), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, g] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), C = (k) => {
-    p((w) => ({ ...w, width: k }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, h] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [g, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), w = (k) => {
+    p((S) => ({ ...S, width: k }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: k, clientHeight: w } = c.current;
-    p({ width: k, height: w });
+    const { clientWidth: k, clientHeight: S } = c.current;
+    p({ width: k, height: S });
   }, [c, n]);
-  const j = (k, w = 0) => {
-    const { top: _ } = k.getBoundingClientRect();
-    return _ + w >= 0 && _ - w <= window.innerHeight;
+  const j = (k, S = 0) => {
+    const { top: I } = k.getBoundingClientRect();
+    return I + S >= 0 && I - S <= window.innerHeight;
   };
   useEffect(() => {
-    var k, w;
+    var k, S;
     if (a && a.type !== "Multiple" && i.current) {
-      const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
-      _ && (j(_) || (w = (k = i.current) == null ? void 0 : k.contentWindow) == null || w.scrollTo({ top: _.offsetTop, behavior: "smooth" }), g([_]));
+      const I = getElementByDataBlockId(i.current.contentDocument, a._id);
+      I && (j(I) || (S = (k = i.current) == null ? void 0 : k.contentWindow) == null || S.scrollTo({ top: I.offsetTop, behavior: "smooth" }), h([I]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(h) && i.current) {
+    if (!isEmpty(g) && i.current) {
       const k = getElementByStyleId(
         i.current.contentDocument,
-        first(h).id
+        first(g).id
       );
       m(k ? [k] : [null]);
     } else
       m([null]);
-  }, [h]);
+  }, [g]);
   const E = useMemo(() => {
     let k = IframeInitialContent;
     return k = k.replace("__HTML_DIR__", R), o === "offline" && (k = k.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), k;
   }, [o, R]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -4110,7 +4110,7 @@ const StaticBlocksRenderer = () => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), x = (y) => {
     a(y);
-  }, g = () => {
+  }, h = () => {
     const y = l.find((R) => Object.keys(R)[0] === r);
     if (y) {
       const R = Object.values(y)[0];
@@ -4138,15 +4138,15 @@ const StaticBlocksRenderer = () => {
     },
     [c],
     200
-  ), h = useDebouncedCallback(
+  ), g = useDebouncedCallback(
     (y, R) => {
       d(() => {
-        const C = get(c, `colors.${y}`);
-        return n ? set(C, 1, R) : set(C, 0, R), {
+        const w = get(c, `colors.${y}`);
+        return n ? set(w, 1, R) : set(w, 0, R), {
           ...c,
           colors: {
             ...c.colors,
-            [y]: C
+            [y]: w
           }
         };
       });
@@ -4154,13 +4154,13 @@ const StaticBlocksRenderer = () => {
     [c],
     200
   ), b = (y) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([R]) => {
-    const C = get(c, `colors.${R}.${n ? 1 : 0}`);
+    const w = get(c, `colors.${R}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorPickerInput,
         {
-          value: C,
-          onChange: (j) => h(R, j)
+          value: w,
+          onChange: (j) => g(R, j)
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: R.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!R.toLowerCase().includes("foreground") && !R.toLowerCase().includes("border") && !R.toLowerCase().includes("input") && !R.toLowerCase().includes("ring") && !R.toLowerCase().includes("background") ? " Background" : "") })
@@ -4190,7 +4190,7 @@ const StaticBlocksRenderer = () => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: g,
+            onClick: h,
             children: u("Apply")
           }
         ) })
@@ -4201,7 +4201,7 @@ const StaticBlocksRenderer = () => {
           {
             label: y,
             value: c.fontFamily[y.replace(/font-/g, "")] || R[Object.keys(R)[0]],
-            onChange: (C) => m(y, C)
+            onChange: (w) => m(y, w)
           },
           y
         )) }),
@@ -4422,44 +4422,44 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   onChange: r
 }) => {
   var P;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, I) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [g, m] = useState(""), [f, h] = useState([]), [b, y] = useState(-1), R = useRef(null), C = (P = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : P.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, N) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, m] = useState(""), [f, g] = useState([]), [b, y] = useState(-1), R = useRef(null), w = (P = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
-    if (m(""), h([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), I = get(v, 1, "page") || "page";
-    x(I), (async () => {
-      const B = await l(I, [get(v, 2, "page")]);
+    if (m(""), g([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const v = split(o, ":"), N = get(v, 1, "page") || "page";
+    x(N), (async () => {
+      const B = await l(N, [get(v, 2, "page")]);
       B && Array.isArray(B) && m(get(B, [0, "name"], ""));
     })();
   }, [o]);
   const j = useDebouncedCallback(
     async (v) => {
       if (isEmpty(v))
-        h([]);
+        g([]);
       else {
-        const I = await l(u, v);
-        h(I);
+        const N = await l(u, v);
+        g(N);
       }
       c(!1), y(-1);
     },
     [u],
     300
   ), E = (v) => {
-    const I = ["pageType", u, v.id];
-    I[1] && (r(I.join(":")), m(v.name), p(!1), h([]), y(-1));
+    const N = ["pageType", u, v.id];
+    N[1] && (r(N.join(":")), m(v.name), p(!1), g([]), y(-1));
   }, k = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), y((I) => I < f.length - 1 ? I + 1 : I);
+        v.preventDefault(), y((N) => N < f.length - 1 ? N + 1 : N);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((I) => I > 0 ? I - 1 : I);
+        v.preventDefault(), y((N) => N > 0 ? N - 1 : N);
         break;
       case "Enter":
         if (v.preventDefault(), f.length === 0) return;
         b >= 0 && E(f[b]);
         break;
       case "Escape":
-        v.preventDefault(), w();
+        v.preventDefault(), S();
         break;
     }
   };
@@ -4469,9 +4469,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const w = () => {
-    m(""), h([]), y(-1), p(!1), r("");
-  }, _ = (v) => {
+  const S = () => {
+    m(""), g([]), y(-1), p(!1), r("");
+  }, I = (v) => {
     m(v), p(!isEmpty(v)), c(!0), j(v);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -4481,28 +4481,28 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "input",
         {
           type: "text",
-          value: g,
-          onChange: (v) => _(v.target.value),
+          value: h,
+          onChange: (v) => I(v.target.value),
           onKeyDown: k,
-          placeholder: a(`Search ${C ?? ""}`),
+          placeholder: a(`Search ${w ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: g && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: w, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
     ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      g,
+      h,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: R, children: map(f == null ? void 0 : f.slice(0, 20), (v, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: R, children: map(f == null ? void 0 : f.slice(0, 20), (v, N) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
         onClick: () => E(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : I === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : N === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -4595,25 +4595,25 @@ 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 g = () => {
-    const h = findIndex(u, { _id: x });
-    if (h > -1) {
-      const b = (h + 1) % u.length, y = get(u, [b, "_id"]);
+  const h = () => {
+    const g = findIndex(u, { _id: x });
+    if (g > -1) {
+      const b = (g + 1) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, m = () => {
-    const h = findIndex(u, { _id: x });
-    if (h > -1) {
-      const b = (h - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+    const g = findIndex(u, { _id: x });
+    if (g > -1) {
+      const b = (g - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, f = () => {
-    const h = i(
+    const g = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), b = h == null ? void 0 : h._id;
+    ), b = g == null ? void 0 : g._id;
     b && (n({ ...o, currentSlide: b }), c([b]));
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 px-2", children: [
@@ -4627,7 +4627,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: g, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
@@ -4692,8 +4692,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: (h) => {
-              let b = h.target.value;
+            onChange: (g) => {
+              let b = g.target.value;
               b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
             }
           }
@@ -4732,22 +4732,22 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   schema: u,
   formData: x
 }) => {
-  const { selectedLang: g, fallbackLang: m, languages: f } = useLanguages(), h = isEmpty(f) ? "" : isEmpty(g) ? m : g, b = get(LANGUAGES, h, h), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), C = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [j, E] = useState(null);
+  const { selectedLang: h, fallbackLang: m, languages: f } = useLanguages(), g = isEmpty(f) ? "" : isEmpty(h) ? m : h, b = get(LANGUAGES, g, g), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), w = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [j, E] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: n, children: a });
-  const w = C == null ? void 0 : C.includes(o.replace("root.", ""));
+  const S = w == null ? void 0 : w.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const _ = j === o;
+    const I = j === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => E(_ ? null : o),
+          onClick: () => E(I ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
+            I ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-tight", children: r }),
             " ",
@@ -4755,7 +4755,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           ]
         }
       ),
-      (x == null ? void 0 : x.length) === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${_ ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (x == null ? void 0 : x.length) === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${I ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4767,7 +4767,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       r,
       " ",
-      w && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      S && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
         b
       ] }),
@@ -4787,7 +4787,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   useEffect(() => {
     c(a);
   }, [o, d]);
-  const g = useThrottledCallback(
+  const h = useThrottledCallback(
     async ({ formData: m }, f) => {
       l({ formData: m }, f);
     },
@@ -4829,7 +4829,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       schema: n,
       formData: i,
       onChange: ({ formData: m }, f) => {
-        f && (c(m), g({ formData: m }, f));
+        if (!f) return;
+        const g = take(f.split("."), 2).join(".").replace("root.", "");
+        c(m), h({ formData: m }, g);
       }
     },
     d
@@ -4839,48 +4841,30 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   return forEach(keys(o), (l) => {
     includes(get(r, "i18nProps", []), l) && !isEmpty(n) && (a[l] = get(o, `${l}-${n}`));
   }), a;
-}, convertDotNotationToObject = (o, n) => {
-  const r = {};
-  return set(r, o, n), r;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), g = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, g), f = ({ formData: k }, w, _) => {
-    if (w && (c == null ? void 0 : c._id) === n._id) {
-      const P = w.replace("root.", "");
-      a([n._id], { [P]: get(k, P) }, _);
-    }
-  }, h = useCallback(
-    debounce(({ formData: k }, w, _) => {
-      f({ formData: k }, w, _), d(k);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, h), f = ({ formData: k }, S, I) => {
+    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(k, S) }, I);
+  }, g = useCallback(
+    debounce(({ formData: k }, S, I) => {
+      f({ formData: k }, S, I), d(k);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: k }, w) => {
-    if (w) {
-      const _ = w.replace("root.", "");
-      r(
-        [n._id],
-        convertDotNotationToObject(_, get(k, _.split(".")))
-      ), h({ formData: k }, w, { [_]: get(c, _) });
-    }
-  }, y = ({ formData: k }, w) => {
-    if (w) {
-      const _ = w.replace("root.", "");
-      r(
-        [x._id],
-        convertDotNotationToObject(_, get(k, _.split(".")))
-      ), h({ formData: k }, w, { [_]: get(c, _) });
-    }
+  ), b = ({ formData: k }, S) => {
+    S && (r([n._id], { [S]: get(k, S) }), g({ formData: k }, S, { [S]: get(c, S) }));
+  }, y = ({ formData: k }, S) => {
+    S && (r([x._id], { [S]: get(k, S) }), g({ formData: k }, S, { [S]: get(c, S) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: R, uiSchema: C } = useMemo(() => {
+  const { schema: R, uiSchema: w } = useMemo(() => {
     const k = n == null ? void 0 : n._type;
     if (k)
       return getBlockFormSchemas(k);
   }, [n]), { wrapperSchema: j, wrapperUiSchema: E } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const k = x == null ? void 0 : x._type, { schema: w = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
-    return { wrapperSchema: w, wrapperUiSchema: _ };
+    const k = x == null ? void 0 : x._type, { schema: S = {}, uiSchema: I = {} } = getBlockFormSchemas(k);
+    return { wrapperSchema: S, wrapperUiSchema: I };
   }, [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -4920,7 +4904,7 @@ function BlockSettings() {
         onChange: b,
         formData: i,
         schema: R,
-        uiSchema: C
+        uiSchema: w
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null
@@ -4995,7 +4979,7 @@ const AskAIStyles = ({ blockId: o }) => {
     var m;
     (m = d.current) == null || m.focus();
   }, []);
-  const g = (m) => {
+  const h = (m) => {
     const { usage: f } = m || {};
     !l && f && x(f), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
@@ -5011,7 +4995,7 @@ const AskAIStyles = ({ blockId: o }) => {
         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), x(void 0), r("styles", o, i, g));
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, h));
         }
       }
     ),
@@ -5021,7 +5005,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, g);
+            p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, h);
           },
           variant: "default",
           className: "w-fit",
@@ -5052,23 +5036,23 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var _;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), g = (_ = first(r)) == null ? void 0 : _.prop, { classes: m } = getSplitChaiClasses(get(a, g, "")), f = m.split(" ").filter((P) => !isEmpty(P)), h = () => {
+  var I;
+  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (I = first(r)) == null ? void 0 : I.prop, { classes: m } = getSplitChaiClasses(get(a, h, "")), f = m.split(" ").filter((P) => !isEmpty(P)), g = () => {
     const P = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(c, P, !0), u("");
   }, [b, y] = useState([]), R = ({ value: P }) => {
-    const v = P.trim().toLowerCase(), I = v.match(/.+:/g);
+    const v = P.trim().toLowerCase(), N = v.match(/.+:/g);
     let B = [];
-    if (I && I.length > 0) {
-      const [A] = I, N = v.replace(A, "");
-      B = o.search(N).map((S) => ({
-        ...S,
-        item: { ...S.item, name: A + S.item.name }
+    if (N && N.length > 0) {
+      const [A] = N, _ = v.replace(A, "");
+      B = o.search(_).map((C) => ({
+        ...C,
+        item: { ...C.item, name: A + C.item.name }
       }));
     } else
       B = o.search(v);
     return y(map(B, "item"));
-  }, C = () => {
+  }, w = () => {
     y([]);
   }, j = (P) => P.name, E = (P) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-1 rounded-md", children: P.name }), k = {
     autoComplete: "off",
@@ -5078,11 +5062,11 @@ function ManualClasses() {
     placeholder: n("Enter classes separated by space"),
     value: p,
     onKeyDown: (P) => {
-      P.key === "Enter" && p.trim() !== "" && h();
+      P.key === "Enter" && p.trim() !== "" && g();
     },
     onChange: (P, { newValue: v }) => u(v),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, w = () => {
+  }, S = () => {
     if (navigator.clipboard === void 0) {
       x({
         title: n("Clipboard not supported"),
@@ -5101,7 +5085,7 @@ function ManualClasses() {
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Classes") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: w, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: S, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: n("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -5119,7 +5103,7 @@ function ManualClasses() {
         {
           suggestions: b,
           onSuggestionsFetchRequested: R,
-          onSuggestionsClearRequested: C,
+          onSuggestionsClearRequested: w,
           getSuggestionValue: j,
           renderSuggestion: E,
           inputProps: k,
@@ -5138,7 +5122,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: h,
+          onClick: g,
           disabled: p.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -5548,7 +5532,7 @@ 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, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), g = get(u, "2", ""), m = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
       ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
@@ -5570,11 +5554,11 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: h } = useTailwindClassList();
+  const { match: g } = useTailwindClassList();
   return useEffect(() => {
     const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    h(o, y) && n(y, o);
-  }, [h, d, n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    g(o, y) && n(y, o);
+  }, [g, d, n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
       {
@@ -5614,7 +5598,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: g, disabled: !x || !l, onChange: f, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !x || !l, onChange: f, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -5761,52 +5745,52 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [g, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, y] = useState(""), [R, C] = useState(!1), [j, E] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, g] = useState(!1), [b, y] = useState(""), [R, w] = useState(!1), [j, E] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: I } = getClassValueAndUnit(i);
-    if (I === "") {
+    const { value: v, unit: N } = getClassValueAndUnit(i);
+    if (N === "") {
       l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(I), l(I === "class" || isEmpty(v) ? "" : v);
+    m(N), l(N === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const k = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), w = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
+  const k = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), S = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), I = useCallback(
     (v = !1) => {
-      const I = getUserInputValues(`${a}`, u);
-      if (get(I, "error", !1)) {
-        h(!0);
+      const N = getUserInputValues(`${a}`, u);
+      if (get(N, "error", !1)) {
+        g(!0);
         return;
       }
-      const B = get(I, "unit") !== "" ? get(I, "unit") : g;
+      const B = get(N, "unit") !== "" ? get(N, "unit") : h;
       if (B === "auto" || B === "none") {
         k(`${d}${B}`);
         return;
       }
-      if (get(I, "value") === "")
+      if (get(N, "value") === "")
         return;
-      const N = `${get(I, "value", "").startsWith("-") ? "-" : ""}${d}[${get(I, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
-      v ? w(N) : k(N);
+      const _ = `${get(N, "value", "").startsWith("-") ? "-" : ""}${d}[${get(N, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
+      v ? S(_) : k(_);
     },
-    [k, w, a, g, d, u]
+    [k, S, a, h, d, u]
   ), P = useCallback(
     (v) => {
-      const I = getUserInputValues(`${a}`, u);
-      if (get(I, "error", !1)) {
-        h(!0);
+      const N = getUserInputValues(`${a}`, u);
+      if (get(N, "error", !1)) {
+        g(!0);
         return;
       }
       if (v === "auto" || v === "none") {
         k(`${d}${v}`);
         return;
       }
-      if (get(I, "value") === "")
+      if (get(N, "value") === "")
         return;
-      const B = get(I, "unit") !== "" ? get(I, "unit") : v, N = `${get(I, "value", "").startsWith("-") ? "-" : ""}${d}[${get(I, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
-      k(N);
+      const B = get(N, "unit") !== "" ? get(N, "unit") : v, _ = `${get(N, "value", "").startsWith("-") ? "-" : ""}${d}[${get(N, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
+      k(_);
     },
     [k, a, d, u]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: g === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
       {
@@ -5821,33 +5805,33 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     ] })
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${R ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: g === "class",
+          readOnly: h === "class",
           onKeyPress: (v) => {
-            v.key === "Enter" && _();
+            v.key === "Enter" && I();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
             v.preventDefault(), E(!0);
-            const I = parseInt$1(v.target.value);
-            let B = isNaN$1(I) ? 0 : I;
+            const N = parseInt$1(v.target.value);
+            let B = isNaN$1(N) ? 0 : N;
             v.keyCode === 38 && (B += 1), v.keyCode === 40 && (B -= 1);
-            const A = `${B}`, L = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
-            w(L);
+            const A = `${B}`, L = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${h === "-" ? "" : h}]`;
+            S(L);
           },
           onKeyUp: (v) => {
             j && (v.preventDefault(), E(!1));
           },
-          onBlur: () => _(),
+          onBlur: () => I(),
           onChange: (v) => {
-            h(!1), l(v.target.value);
+            g(!1), l(v.target.value);
           },
           onClick: (v) => {
-            var I;
-            (I = v == null ? void 0 : v.target) == null || I.select(), r(!1);
+            var N;
+            (N = v == null ? void 0 : v.target) == null || N.select(), r(!1);
           },
           value: R ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -5864,7 +5848,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__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: g }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
               u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -5873,7 +5857,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           UnitSelection,
           {
             units: u,
-            current: g,
+            current: h,
             onSelect: (v) => {
               r(!1), m(v), P(v);
             }
@@ -5881,25 +5865,25 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(g) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(h) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => C(!0),
+        onDragStart: () => w(!0),
         onDragEnd: (v) => {
-          if (y(() => ""), C(!1), isEmpty(v))
+          if (y(() => ""), w(!1), isEmpty(v))
             return;
-          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
+          const N = `${v}`, A = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${h === "-" ? "" : h}]`;
           k(A);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           y(v);
-          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
-          w(A);
+          const N = `${v}`, A = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${h === "-" ? "" : h}]`;
+          S(A);
         },
         currentValue: a,
-        unit: g,
+        unit: h,
         negative: x,
         cssProperty: p
       }
@@ -5993,22 +5977,22 @@ 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: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), g = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), y = useCallback(
-    (w, _ = !0) => {
-      const P = { dark: p, mq: x, mod: u, cls: w, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [g] = useSelectedBlockIds(), b = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
+    (S, I = !0) => {
+      const P = { dark: p, mq: x, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (P.mq = "xs");
       const v = generateFullClsName(P);
-      m(h, [v], _);
+      m(g, [v], I);
     },
-    [h, p, x, u, l, m]
+    [g, p, x, u, l, m]
   ), R = useCallback(() => {
-    f(h, [b]);
-  }, [h, b, f]), C = useMemo(() => canChangeClass(g, x), [g, x]);
+    f(g, [b]);
+  }, [g, b, f]), w = useMemo(() => canChangeClass(h, x), [h, x]);
   useEffect(() => {
-    i(C, g);
-  }, [C, i, g]);
+    i(w, h);
+  }, [w, i, h]);
   const [, , j] = useCanvasWidth(), E = useCallback(
-    (w) => {
+    (S) => {
       j({
         xs: 400,
         sm: 640,
@@ -6016,18 +6000,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[w]);
+      }[S]);
     },
     [j]
-  ), k = get(g, "dark", null) === p && get(g, "mod", null) === u && get(g, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: g && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !k ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), k = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: h && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${h && !k ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           AdvanceChoices,
           {
-            currentClass: get(g, "cls", ""),
+            currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -6040,7 +6024,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6052,19 +6036,19 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(g, "mq")),
-            p && !g.dark ? "(Light mode)" : ""
+            getBreakpoint(get(h, "mq")),
+            p && !h.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => E(get(g, "mq")),
+              onClick: () => E(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(g, "mq").toUpperCase()
+                get(h, "mq").toUpperCase()
               ]
             }
           )
@@ -6081,7 +6065,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), g = useCallback((m) => map(x, "property").includes(m), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(x, "property").includes(m), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6099,7 +6083,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: g(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
@@ -6244,13 +6228,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const x = !get(i, "negative", !1), g = get(i, "cssProperty", "");
+      const x = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let m = parseFloat(i.dragStartValue);
       m = isNaN(m) ? 0 : m;
       let f = MAPPER[i.dragUnit];
-      (startsWith(g, "scale") || g === "opacity") && (f = 10);
+      (startsWith(h, "scale") || h === "opacity") && (f = 10);
       let b = (i.dragStartY - u.pageY) / f + m;
-      x && b < 0 && (b = 0), g === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      x && b < 0 && (b = 0), h === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -6292,14 +6276,14 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
       const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(b), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, f = useFeature("dnd"), { t: h } = useTranslation();
+  }, f = useFeature("dnd"), { t: g } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -6309,18 +6293,18 @@ const CoreBlock = ({
         type: "button",
         onDragStart: (b) => {
           b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            x([]), g();
+            x([]), h();
           }, 200);
         },
         draggable: f ? "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(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(h(d || i)) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(g(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h(d || i) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g(d || i) }) })
   ] }) });
 }, hasVideoEmbed = (o) => {
   const n = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, r = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
@@ -6489,7 +6473,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var g, m, f, h, b, y, R, C;
+  var h, m, f, g, b, y, R, w;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -6530,10 +6514,10 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((g = l.find((E) => E.key === "href")) == null ? void 0 : g.value) || "",
+      href: ((h = l.find((E) => E.key === "href")) == null ? void 0 : h.value) || "",
       hrefType: ((m = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
       autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((b = (h = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : b.replace("px", "")) || "",
+      maxWidth: ((b = (g = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : g.value) == null ? void 0 : b.replace("px", "")) || "",
       backdropColor: ((y = l.find((E) => E.key === "data-overlay")) == null ? void 0 : y.value) || "",
       galleryName: ((R = l.find((E) => E.key === "data-gall")) == null ? void 0 : R.value) || ""
     }, forEach(j, (E) => {
@@ -6546,14 +6530,14 @@ const CoreBlock = ({
     a.content = getTextContent(j);
     const E = find(
       r.children || [],
-      (k) => (k == null ? void 0 : k.tagName) === "span" && some(k.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg")
+      (k) => (k == null ? void 0 : k.tagName) === "span" && some(k.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
     );
     if (E) {
-      const k = find(E.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg");
+      const k = find(E.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
       if (k) {
         a.icon = stringify([k]);
-        const { height: w, width: _ } = getSvgDimensions(k, "16px", "16px");
-        a.iconHeight = w, a.iconWidth = _;
+        const { height: S, width: I } = getSvgDimensions(k, "16px", "16px");
+        a.iconHeight = S, a.iconWidth = I;
       }
     }
     return [a];
@@ -6565,9 +6549,9 @@ const CoreBlock = ({
     const j = stringify([r]);
     return hasVideoEmbed(j) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(j)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = j, [a];
   } else if (r.tagName === "svg") {
-    const j = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), k = get(j, "value") ? `[${get(j, "value")}px]` : "24px", w = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${w} h-${k}`, _)}`.trim(), r.attributes = filter(r.attributes, (P) => !includes(["style", "width", "height", "class"], P.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((C = n.block) == null ? void 0 : C._type) === "Select")
+    const j = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), k = get(j, "value") ? `[${get(j, "value")}px]` : "24px", S = get(E, "value") ? `[${get(E, "value")}px]` : "24px", I = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${S} h-${k}`, I)}`.trim(), r.attributes = filter(r.attributes, (P) => !includes(["style", "width", "height", "class"], P.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((w = n.block) == null ? void 0 : w._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -6670,8 +6654,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Tabs,
       {
-        onValueChange: (g) => {
-          d(""), c(g);
+        onValueChange: (h) => {
+          d(""), c(h);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6680,12 +6664,12 @@ const CoreBlock = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (g) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: g.key, children: React__default.createElement(g.tab) }))
+            map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(u, (g) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: g.key, children: React__default.createElement(g.tabContent, { close: x, parentId: r, position: a }) }))
+          map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x, parentId: r, position: a }) }))
         ]
       }
     )
@@ -6742,9 +6726,9 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), g = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), h = (R) => {
-    const C = has(R, "styles_attrs.data-page-section");
-    return R._type === "Box" && C;
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), g = (R) => {
+    const w = has(R, "styles_attrs.data-page-section");
+    return R._type === "Box" && w;
   }, b = useCallback(
     async (R) => {
       if (R.stopPropagation(), has(o, "component")) {
@@ -6752,15 +6736,15 @@ const BlockCard = ({
         return;
       }
       i(!0);
-      const C = await c(n, o);
-      isEmpty(C) || p(syncBlocksWithDefaults(C), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const w = await c(n, o);
+      isEmpty(w) || p(syncBlocksWithDefaults(w), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   ), y = async (R) => {
-    const C = await c(n, o);
+    const w = await c(n, o);
     let j = r;
-    if (h(first(C)) && (j = null), !isEmpty(C)) {
-      const E = { blocks: C, uiLibrary: !0, parent: j };
+    if (g(first(w)) && (j = null), !isEmpty(w)) {
+      const E = { blocks: w, uiLibrary: !0, parent: j };
       if (R.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
         const k = new Image();
         k.src = o.preview, k.onload = () => {
@@ -6789,11 +6773,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: g }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: h }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -6808,9 +6792,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((j) => j.category === "custom"), d = l.find((j) => j.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [g, m] = useState("Hero"), f = get(x, g, []), h = useRef(null), { t: b } = useTranslation(), y = (j) => {
-    h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
-      h.current && m(j);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((j) => j.category === "custom"), d = l.find((j) => j.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [h, m] = useState("Hero"), f = get(x, h, []), g = useRef(null), { t: b } = useTranslation(), y = (j) => {
+    g.current && (clearTimeout(g.current), g.current = null), g.current = setTimeout(() => {
+      g.current && m(j);
     }, 300);
   };
   if (u)
@@ -6818,7 +6802,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const R = filter(f, (j, E) => E % 2 === 0), C = filter(f, (j, E) => E % 2 === 1);
+  const R = filter(f, (j, E) => E % 2 === 0), w = filter(f, (j, E) => E % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
@@ -6830,11 +6814,11 @@ const BlockCard = ({
             "div",
             {
               onMouseEnter: () => y(E),
-              onMouseLeave: () => clearTimeout(h.current),
+              onMouseLeave: () => clearTimeout(g.current),
               onClick: () => m(E),
               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",
-                E === g ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                E === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(E.toLowerCase())) }),
@@ -6849,7 +6833,7 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => h.current ? clearTimeout(h.current) : null,
+        onMouseEnter: () => g.current ? clearTimeout(g.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__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
@@ -6857,7 +6841,7 @@ const BlockCard = ({
               R.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              C.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
+              w.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7080,50 +7064,50 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
   var L;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: g } = useBlockHighlight(), { id: m, data: f, isSelected: h, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: C } = o, j = (S) => {
-    S.stopPropagation(), !i.includes(m) && o.toggle();
-  }, E = (S) => {
-    S.isInternal && (p = S.isOpen, S.isOpen && S.close());
-  }, k = (S) => {
-    S.isInternal && p !== null && (p ? S.open() : S.close(), p = null);
-  }, [w, _] = useAtom$1(currentAddSelection), P = () => {
-    var S;
-    v(), o.parent.isSelected || _((S = o == null ? void 0 : o.parent) == null ? void 0 : S.id);
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: g, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: w } = o, j = (C) => {
+    C.stopPropagation(), !i.includes(m) && o.toggle();
+  }, E = (C) => {
+    C.isInternal && (p = C.isOpen, C.isOpen && C.close());
+  }, k = (C) => {
+    C.isInternal && p !== null && (p ? C.open() : C.close(), p = null);
+  }, [S, I] = useAtom$1(currentAddSelection), P = () => {
+    var C;
+    v(), o.parent.isSelected || I((C = o == null ? void 0 : o.parent) == null ? void 0 : C.id);
   }, v = () => {
-    _(null);
-  }, I = (S) => {
-    v(), S.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), C(S);
+    I(null);
+  }, N = (C) => {
+    v(), C.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), w(C);
   };
   useEffect(() => {
-    const S = setTimeout(() => {
+    const C = setTimeout(() => {
       b && !o.isOpen && !y && !i.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(S);
+    return () => clearTimeout(C);
   }, [b, o, y]);
   const B = useMemo(() => {
-    const S = Object.keys(f), T = [];
-    for (let D = 0; D < S.length; D++)
-      if (S[D].endsWith("_attrs")) {
-        const $ = f[S[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 C = Object.keys(f), T = [];
+    for (let D = 0; D < C.length; D++)
+      if (C[D].endsWith("_attrs")) {
+        const $ = f[C[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;
-  }, [f]), A = (S, T) => {
-    const D = d.contentDocument || d.contentWindow.document, $ = D.querySelector(`[data-block-id=${S}]`);
+  }, [f]), A = (C, T) => {
+    const D = d.contentDocument || d.contentWindow.document, $ = D.querySelector(`[data-block-id=${C}]`);
     $ && $.setAttribute("data-drop", T);
-    const O = $.getBoundingClientRect(), M = d.getBoundingClientRect();
-    O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
-  }, N = (S) => {
+    const H = $.getBoundingClientRect(), M = d.getBoundingClientRect();
+    H.top >= M.top && H.left >= M.left && H.bottom <= M.bottom && H.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
+  }, _ = (C) => {
     v();
     const T = get(o, "parent.id");
-    T !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: T, position: S }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: S });
+    T !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: T, position: C }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: C });
   };
   return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        onClick: () => N(-1),
+        onClick: () => _(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -7137,28 +7121,28 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     "div",
     {
       onMouseEnter: () => x(m),
-      onMouseLeave: () => g(),
-      onClick: I,
+      onMouseLeave: () => h(),
+      onClick: N,
       style: n,
       "data-node-id": m,
       ref: i.includes(m) ? null : r,
       onDragStart: () => E(o),
       onDragEnd: () => k(o),
-      onDragOver: (S) => {
-        S.preventDefault(), A(m, "yes");
+      onDragOver: (C) => {
+        C.preventDefault(), A(m, "yes");
       },
-      onDragLeave: (S) => {
-        S.preventDefault(), A(m, "no");
+      onDragLeave: (C) => {
+        C.preventDefault(), A(m, "no");
       },
-      onDrop: (S) => {
-        S.preventDefault(), A(m, "no");
+      onDrop: (C) => {
+        C.preventDefault(), A(m, "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__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            onClick: (S) => {
-              S.stopPropagation(), N(o.childIndex);
+            onClick: (C) => {
+              C.stopPropagation(), _(o.childIndex);
             },
             onMouseEnter: P,
             onMouseLeave: v,
@@ -7171,9 +7155,9 @@ 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",
-              h ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              g ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
               b && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === w ? "bg-purple-100" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(m) ? "opacity-50" : ""
             ),
@@ -7186,7 +7170,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${h ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${g ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
@@ -7197,8 +7181,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (S) => {
-                        S.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (C) => {
+                        C.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) }),
@@ -7211,16 +7195,16 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(m) && a.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                !i.includes(m) && a.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(S.item, { blockId: m })
+                      children: React__default.createElement(C.item, { blockId: m })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: S.tooltip })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: C.tooltip })
                 ] })),
                 canAddChildBlock(f == null ? void 0 : f._type) && !i.includes(m) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -7238,8 +7222,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: (S) => {
-                        S.stopPropagation(), c(m), o.isOpen && o.toggle();
+                      onClick: (C) => {
+                        C.stopPropagation(), c(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -7899,13 +7883,13 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), g = useRef(null), m = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), h = useRef(null), m = useRef(null);
   useEffect(() => {
-    var h;
-    (h = g.current) == null || h.focus();
+    var g;
+    (g = h.current) == null || g.focus();
   }, []);
-  const f = (h) => {
-    const { usage: b } = h || {};
+  const f = (g) => {
+    const { usage: b } = g || {};
     !l && b && x(b), m.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
@@ -7924,14 +7908,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: g,
+          ref: h,
           value: i,
-          onChange: (h) => c(h.target.value),
+          onChange: (g) => c(g.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (h) => {
-            h.key === "Enter" && (h.preventDefault(), m.current && clearTimeout(m.current), x(void 0), r("content", o, i, f));
+          onKeyDown: (g) => {
+            g.key === "Enter" && (g.preventDefault(), m.current && clearTimeout(m.current), x(void 0), r("content", o, i, f));
           }
         }
       ),
@@ -7973,8 +7957,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (h) => {
-            m.current && clearTimeout(m.current), x(void 0), r("content", o, h, f);
+          onClick: (g) => {
+            m.current && clearTimeout(m.current), x(void 0), r("content", o, g, f);
           }
         }
       )
@@ -7984,19 +7968,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), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: g } = useToast(), m = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: h } = useToast(), m = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
   const f = async () => {
     try {
-      d(!0), u(null), await i(r), g({
+      d(!0), u(null), await i(r), h({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
       }), m.current.click();
-    } catch (h) {
-      u(h);
+    } catch (g) {
+      u(g);
     } finally {
       d(!1);
     }
@@ -8004,8 +7988,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (h) => {
-        x(h !== "");
+      onValueChange: (g) => {
+        x(g !== "");
       },
       type: "single",
       collapsible: !0,
@@ -8017,12 +8001,12 @@ const AIUserPrompt = ({ blockId: o }) => {
             {
               ref: l,
               value: r,
-              onChange: (h) => a(h.target.value),
+              onChange: (g) => a(g.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (h) => {
-                h.key === "Enter" && (h.preventDefault(), f());
+              onKeyDown: (g) => {
+                g.key === "Enter" && (g.preventDefault(), f());
               }
             }
           ),
@@ -8317,7 +8301,7 @@ const ClearCanvas = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [g, m] = useState(""), f = useRef(null), h = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [h, m] = useState(""), f = useRef(null), g = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
@@ -8331,11 +8315,11 @@ const ClearCanvas = () => {
       r(E), l(a), c(""), p(""), m("");
     }
   }, y = (E) => {
-    const k = a.filter((w, _) => _ !== E);
+    const k = a.filter((S, I) => I !== E);
     r(k), l(k);
   }, R = (E) => {
     x(E), c(a[E].key), p(a[E].value);
-  }, C = () => {
+  }, w = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -8345,14 +8329,14 @@ const ClearCanvas = () => {
       E[u] = { key: i, value: d }, r(E), l(E), x(null), c(""), p(""), m("");
     }
   }, j = (E) => {
-    E.key === "Enter" && !E.shiftKey && (E.preventDefault(), u !== null ? C() : b());
+    E.key === "Enter" && !E.shiftKey && (E.preventDefault(), u !== null ? w() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (E) => {
-          E.preventDefault(), u !== null ? C() : b();
+          E.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -8384,7 +8368,7 @@ const ClearCanvas = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: h,
+                  ref: g,
                   value: d,
                   onChange: (E) => p(E.target.value),
                   onKeyDown: j,
@@ -8395,7 +8379,7 @@ const ClearCanvas = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          g && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: g })
+          h && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: h })
         ]
       }
     ),
@@ -8592,6 +8576,7 @@ function useSidebarMenuItems() {
     {
       icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Layers, { size: 20 }),
       label: "Outline",
+      isInternal: !0,
       component: () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, {}) })
     }
   ]), []);
@@ -8601,11 +8586,11 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (h) => {
-    h.preventDefault();
-  }, u = (h) => {
-    n(o === h ? null : h);
-  }, x = useSidebarMenuItems(), { t: g } = useTranslation(), m = [...x, ...c], f = useBuilderProp("htmlDir", "ltr");
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (g) => {
+    g.preventDefault();
+  }, u = (g) => {
+    n(o === g ? null : g);
+  }, x = useSidebarMenuItems(), { t: h } = useTranslation(), m = [...x, ...c], f = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: f, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -8616,21 +8601,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((g, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
                     variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => u(b),
-                    children: get(h, "icon", null)
+                    children: get(g, "icon", null)
                   },
                   b
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g(h.label) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h(g.label) }) })
               ] }, "button" + b)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(h, { key: b }) })) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((g, b) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(g, { key: b }) })) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
@@ -8640,10 +8625,16 @@ const RootLayout = () => {
                 animate: { width: o !== null ? 280 : 0 },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: g(m[o].label) })
-                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.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"}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: h(m[o].label) })
+                      ]
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
                 ] })
               }
@@ -8663,11 +8654,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    g("AI Assistant")
+                    h("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      g("Theme Settings")
+                      h("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Button,