@chaibuilder/sdk 2.0.0-beta.38 → 2.0.0-beta.39

package/dist/core.js

@@ -4,7 +4,7 @@ var O = (o, r, n) => U(o, typeof r != "symbol" ? r + "" : r, n);
 import { j as jsxRuntimeExports } from "./jsx-runtime-DGlMoOmv.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, useState, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, b as Switch, 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, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-CxioWiWD.js";
+import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, 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, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, b as Switch, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-CxioWiWD.js";
 import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, flatMapDeep, some, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
@@ -86,32 +86,32 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     throw o.e;
   return o.v;
 }, createStore = () => {
-  const o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new Map(), a = (f) => o.get(f), l = (f, j) => {
-    const w = o.get(f);
-    if (o.set(f, j), n.has(f) || n.set(f, w), w && hasPromiseAtomValue(w)) {
-      const b = "v" in j ? j.v instanceof Promise ? j.v : Promise.resolve(j.v) : Promise.reject(j.e);
-      cancelPromise(w.v, b);
+  const o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new Map(), a = (h) => o.get(h), l = (h, j) => {
+    const w = o.get(h);
+    if (o.set(h, j), n.has(h) || n.set(h, w), w && hasPromiseAtomValue(w)) {
+      const f = "v" in j ? j.v instanceof Promise ? j.v : Promise.resolve(j.v) : Promise.reject(j.e);
+      cancelPromise(w.v, f);
     }
-  }, i = (f, j, w) => {
-    const b = /* @__PURE__ */ new Map();
+  }, i = (h, j, w) => {
+    const f = /* @__PURE__ */ new Map();
     let C = !1;
     w.forEach((B, N) => {
-      !B && N === f && (B = j), B && (b.set(N, B), j.d.get(N) !== B && (C = !0));
-    }), (C || j.d.size !== b.size) && (j.d = b);
-  }, c = (f, j, w) => {
-    const b = a(f), C = {
-      d: (b == null ? void 0 : b.d) || /* @__PURE__ */ new Map(),
+      !B && N === h && (B = j), B && (f.set(N, B), j.d.get(N) !== B && (C = !0));
+    }), (C || j.d.size !== f.size) && (j.d = f);
+  }, c = (h, j, w) => {
+    const f = a(h), C = {
+      d: (f == null ? void 0 : f.d) || /* @__PURE__ */ new Map(),
       v: j
     };
-    if (w && i(f, C, w), b && isEqualAtomValue(b, C) && b.d === C.d)
-      return b;
-    if (b && hasPromiseAtomValue(b) && hasPromiseAtomValue(C) && isEqualPromiseAtomValue(b, C)) {
-      if (b.d === C.d)
-        return b;
-      C.v = b.v;
+    if (w && i(h, C, w), f && isEqualAtomValue(f, C) && f.d === C.d)
+      return f;
+    if (f && hasPromiseAtomValue(f) && hasPromiseAtomValue(C) && isEqualPromiseAtomValue(f, C)) {
+      if (f.d === C.d)
+        return f;
+      C.v = f.v;
     }
-    return l(f, C), C;
-  }, d = (f, j, w, b) => {
+    return l(h, C), C;
+  }, d = (h, j, w, f) => {
     if (isPromiseLike$2(j)) {
       let C;
       const B = new Promise((N, D) => {
@@ -120,23 +120,23 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
           (T) => {
             if (!I) {
               I = !0;
-              const L = a(f), P = c(
-                f,
+              const L = a(h), P = c(
+                h,
                 B,
                 w
               );
-              resolvePromise(B, T), N(T), (L == null ? void 0 : L.d) !== P.d && S(f, P, L == null ? void 0 : L.d);
+              resolvePromise(B, T), N(T), (L == null ? void 0 : L.d) !== P.d && S(h, P, L == null ? void 0 : L.d);
             }
           },
           (T) => {
             if (!I) {
               I = !0;
-              const L = a(f), P = c(
-                f,
+              const L = a(h), P = c(
+                h,
                 B,
                 w
               );
-              rejectPromise(B, T), D(T), (L == null ? void 0 : L.d) !== P.d && S(f, P, L == null ? void 0 : L.d);
+              rejectPromise(B, T), D(T), (L == null ? void 0 : L.d) !== P.d && S(h, P, L == null ? void 0 : L.d);
             }
           }
         ), C = (T) => {
@@ -147,30 +147,30 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         };
       });
       return B.orig = j, B.status = "pending", registerCancelPromise(B, (N) => {
-        N && C(N), b == null || b();
-      }), c(f, B, w);
+        N && C(N), f == null || f();
+      }), c(h, B, w);
     }
-    return c(f, j, w);
-  }, p = (f, j, w) => {
-    const b = a(f), C = {
-      d: (b == null ? void 0 : b.d) || /* @__PURE__ */ new Map(),
+    return c(h, j, w);
+  }, p = (h, j, w) => {
+    const f = a(h), C = {
+      d: (f == null ? void 0 : f.d) || /* @__PURE__ */ new Map(),
       e: j
     };
-    return w && i(f, C, w), b && isEqualAtomError(b, C) && b.d === C.d ? b : (l(f, C), C);
-  }, u = (f) => {
-    const j = a(f);
+    return w && i(h, C, w), f && isEqualAtomError(f, C) && f.d === C.d ? f : (l(h, C), C);
+  }, u = (h) => {
+    const j = a(h);
     if (j && (j.d.forEach((I, T) => {
-      T !== f && !r.has(T) && u(T);
+      T !== h && !r.has(T) && u(T);
     }), Array.from(j.d).every(([I, T]) => {
       const L = a(I);
-      return I === f || L === T || // TODO This is a hack, we should find a better solution.
+      return I === h || L === T || // TODO This is a hack, we should find a better solution.
       L && !hasPromiseAtomValue(L) && isEqualAtomValue(L, T);
     })))
       return j;
     const w = /* @__PURE__ */ new Map();
-    let b = !0;
+    let f = !0;
     const C = (I) => {
-      if (I === f) {
+      if (I === h) {
         const L = a(I);
         if (L)
           return w.set(I, L), returnAtomValue(L);
@@ -187,42 +187,42 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         return B || (B = new AbortController()), B.signal;
       },
       get setSelf() {
-        return !N && isActuallyWritableAtom(f) && (N = (...I) => {
-          if (!b)
-            return k(f, ...I);
+        return !N && isActuallyWritableAtom(h) && (N = (...I) => {
+          if (!f)
+            return k(h, ...I);
         }), N;
       }
     };
     try {
-      const I = f.read(C, D);
+      const I = h.read(C, D);
       return d(
-        f,
+        h,
         I,
         w,
         () => B == null ? void 0 : B.abort()
       );
     } catch (I) {
-      return p(f, I, w);
+      return p(h, I, w);
     } finally {
-      b = !1;
+      f = !1;
     }
-  }, x = (f) => returnAtomValue(u(f)), h = (f) => {
-    let j = r.get(f);
-    return j || (j = _(f)), j;
-  }, m = (f, j) => !j.l.size && (!j.t.size || j.t.size === 1 && j.t.has(f)), E = (f) => {
-    const j = r.get(f);
-    j && m(f, j) && A(f);
-  }, y = (f) => {
-    const j = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), b = (B) => {
+  }, x = (h) => returnAtomValue(u(h)), m = (h) => {
+    let j = r.get(h);
+    return j || (j = _(h)), j;
+  }, g = (h, j) => !j.l.size && (!j.t.size || j.t.size === 1 && j.t.has(h)), E = (h) => {
+    const j = r.get(h);
+    j && g(h, j) && A(h);
+  }, y = (h) => {
+    const j = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), f = (B) => {
       const N = r.get(B);
       N == null || N.t.forEach((D) => {
         D !== B && (j.set(
           D,
           (j.get(D) || /* @__PURE__ */ new Set()).add(B)
-        ), w.set(D, (w.get(D) || 0) + 1), b(D));
+        ), w.set(D, (w.get(D) || 0) + 1), f(D));
       });
     };
-    b(f);
+    f(h);
     const C = (B) => {
       const N = r.get(B);
       N == null || N.t.forEach((D) => {
@@ -241,72 +241,72 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         }
       });
     };
-    C(f);
-  }, g = (f, ...j) => {
+    C(h);
+  }, b = (h, ...j) => {
     let w = !0;
-    const b = (N) => returnAtomValue(u(N)), C = (N, ...D) => {
+    const f = (N) => returnAtomValue(u(N)), C = (N, ...D) => {
       let I;
-      if (N === f) {
+      if (N === h) {
         if (!hasInitialValue(N))
           throw new Error("atom not writable");
         const T = a(N), L = d(N, D[0]);
         (!T || !isEqualAtomValue(T, L)) && y(N);
       } else
-        I = g(N, ...D);
+        I = b(N, ...D);
       return w || v(), I;
-    }, B = f.write(b, C, ...j);
+    }, B = h.write(f, C, ...j);
     return w = !1, B;
-  }, k = (f, ...j) => {
-    const w = g(f, ...j);
+  }, k = (h, ...j) => {
+    const w = b(h, ...j);
     return v(), w;
-  }, _ = (f, j) => {
+  }, _ = (h, j) => {
     const w = {
       t: new Set(j && [j]),
       l: /* @__PURE__ */ new Set()
     };
-    if (r.set(f, w), u(f).d.forEach((b, C) => {
+    if (r.set(h, w), u(h).d.forEach((f, C) => {
       const B = r.get(C);
-      B ? B.t.add(f) : C !== f && _(C, f);
-    }), u(f), isActuallyWritableAtom(f) && f.onMount) {
-      const b = f.onMount((...C) => k(f, ...C));
-      b && (w.u = b);
+      B ? B.t.add(h) : C !== h && _(C, h);
+    }), u(h), isActuallyWritableAtom(h) && h.onMount) {
+      const f = h.onMount((...C) => k(h, ...C));
+      f && (w.u = f);
     }
     return w;
-  }, A = (f) => {
+  }, A = (h) => {
     var j;
-    const w = (j = r.get(f)) == null ? void 0 : j.u;
-    w && w(), r.delete(f);
-    const b = a(f);
-    b && (hasPromiseAtomValue(b) && cancelPromise(b.v), b.d.forEach((C, B) => {
-      if (B !== f) {
+    const w = (j = r.get(h)) == null ? void 0 : j.u;
+    w && w(), r.delete(h);
+    const f = a(h);
+    f && (hasPromiseAtomValue(f) && cancelPromise(f.v), f.d.forEach((C, B) => {
+      if (B !== h) {
         const N = r.get(B);
-        N && (N.t.delete(f), m(B, N) && A(B));
+        N && (N.t.delete(h), g(B, N) && A(B));
       }
     }));
-  }, S = (f, j, w) => {
-    const b = new Set(j.d.keys());
+  }, S = (h, j, w) => {
+    const f = new Set(j.d.keys());
     w == null || w.forEach((C, B) => {
-      if (b.has(B)) {
-        b.delete(B);
+      if (f.has(B)) {
+        f.delete(B);
         return;
       }
       const N = r.get(B);
-      N && (N.t.delete(f), m(B, N) && A(B));
-    }), b.forEach((C) => {
+      N && (N.t.delete(h), g(B, N) && A(B));
+    }), f.forEach((C) => {
       const B = r.get(C);
-      B ? B.t.add(f) : r.has(f) && _(C, f);
+      B ? B.t.add(h) : r.has(h) && _(C, h);
     });
   }, v = () => {
     for (; n.size; ) {
-      const f = Array.from(n);
-      n.clear(), f.forEach(([j, w]) => {
-        const b = a(j);
-        if (b) {
-          b.d !== (w == null ? void 0 : w.d) && S(j, b, w == null ? void 0 : w.d);
+      const h = Array.from(n);
+      n.clear(), h.forEach(([j, w]) => {
+        const f = a(j);
+        if (f) {
+          f.d !== (w == null ? void 0 : w.d) && S(j, f, w == null ? void 0 : w.d);
           const C = r.get(j);
           C && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, b) || isEqualAtomError(w, b))) && C.l.forEach((B) => B());
+          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, f) || isEqualAtomError(w, f))) && C.l.forEach((B) => B());
         }
       });
     }
@@ -314,12 +314,12 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   return {
     get: x,
     set: k,
-    sub: (f, j) => {
-      const w = h(f);
+    sub: (h, j) => {
+      const w = m(h);
       v();
-      const b = w.l;
-      return b.add(j), () => {
-        b.delete(j), E(f);
+      const f = w.l;
+      return f.add(j), () => {
+        f.delete(j), E(h);
       };
     }
   };
@@ -336,37 +336,37 @@ function splitAtom(o, r) {
         let p = n.get(c);
         if (p)
           return p;
-        const u = d && n.get(d), x = [], h = [];
-        return c.forEach((m, E) => {
+        const u = d && n.get(d), x = [], m = [];
+        return c.forEach((g, E) => {
           const y = E;
-          h[E] = y;
-          const g = u && u.atomList[u.keyList.indexOf(y)];
-          if (g) {
-            x[E] = g;
+          m[E] = y;
+          const b = u && u.atomList[u.keyList.indexOf(y)];
+          if (b) {
+            x[E] = b;
             return;
           }
           const k = (A) => {
-            const S = A(l), v = A(o), f = a(v, S == null ? void 0 : S.arr).keyList.indexOf(y);
-            if (f < 0 || f >= v.length) {
+            const S = A(l), v = A(o), h = a(v, S == null ? void 0 : S.arr).keyList.indexOf(y);
+            if (h < 0 || h >= v.length) {
               const j = c[a(c).keyList.indexOf(y)];
               if (j)
                 return j;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return v[f];
+            return v[h];
           }, _ = (A, S, v) => {
-            const R = A(l), f = A(o), w = a(f, R == null ? void 0 : R.arr).keyList.indexOf(y);
-            if (w < 0 || w >= f.length)
+            const R = A(l), h = A(o), w = a(h, R == null ? void 0 : R.arr).keyList.indexOf(y);
+            if (w < 0 || w >= h.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const b = isFunction(v) ? v(f[w]) : v;
+            const f = isFunction(v) ? v(h[w]) : v;
             S(o, [
-              ...f.slice(0, w),
-              b,
-              ...f.slice(w + 1)
+              ...h.slice(0, w),
+              f,
+              ...h.slice(w + 1)
             ]);
           };
           x[E] = isWritable(o) ? atom(k, _) : atom(k);
-        }), u && u.keyList.length === h.length && u.keyList.every((m, E) => m === h[E]) ? p = u : p = { arr: c, atomList: x, keyList: h }, n.set(c, p), p;
+        }), u && u.keyList.length === m.length && u.keyList.every((g, E) => g === m[E]) ? p = u : p = { arr: c, atomList: x, keyList: m }, n.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -402,17 +402,17 @@ function splitAtom(o, r) {
             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 h = c(o);
+                const m = c(o);
                 u < x ? d(o, [
-                  ...h.slice(0, u),
-                  ...h.slice(u + 1, x),
-                  h[u],
-                  ...h.slice(x)
+                  ...m.slice(0, u),
+                  ...m.slice(u + 1, x),
+                  m[u],
+                  ...m.slice(x)
                 ]) : d(o, [
-                  ...h.slice(0, x),
-                  h[u],
-                  ...h.slice(x, u),
-                  ...h.slice(u + 1)
+                  ...m.slice(0, x),
+                  m[u],
+                  ...m.slice(x, u),
+                  ...m.slice(u + 1)
                 ]);
               }
               break;
@@ -1082,50 +1082,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (y, g, k) => {
+    moveBlocks: (y, b, k) => {
       const _ = map(y, (S) => {
         const R = r.find((w) => w._id === S)._parent || null, j = r.filter((w) => R ? w._parent === R : !w._parent).map((w) => w._id).indexOf(S);
         return { _id: S, oldParent: R, oldPosition: j };
       }), A = _.find(({ _id: S }) => S === y[0]);
-      A && A.oldParent === g && A.oldPosition === k || (i(y, g, k), o({
+      A && A.oldParent === b && A.oldPosition === k || (i(y, b, k), o({
         undo: () => each(_, ({ _id: S, oldParent: v, oldPosition: R }) => {
           i([S], v, R);
         }),
-        redo: () => i(y, g, k)
+        redo: () => i(y, b, k)
       }));
     },
-    addBlocks: (y, g, k) => {
-      a(y, g, k), o({
+    addBlocks: (y, b, k) => {
+      a(y, b, k), o({
         undo: () => l(map(y, "_id")),
-        redo: () => a(y, g, k)
+        redo: () => a(y, b, k)
       });
     },
     removeBlocks: (y) => {
       var A;
-      const g = (A = first(y)) == null ? void 0 : A._parent, _ = r.filter((S) => g ? S._parent === g : !S._parent).indexOf(first(y));
+      const b = (A = first(y)) == null ? void 0 : A._parent, _ = r.filter((S) => b ? S._parent === b : !S._parent).indexOf(first(y));
       l(map(y, "_id")), o({
-        undo: () => a(y, g, _),
+        undo: () => a(y, b, _),
         redo: () => l(map(y, "_id"))
       });
     },
-    updateBlocks: (y, g, k) => {
+    updateBlocks: (y, b, k) => {
       let _ = [];
       if (k)
         _ = map(y, (A) => ({ _id: A, ...k }));
       else {
-        const A = keys(g);
+        const A = keys(b);
         _ = map(y, (S) => {
-          const v = r.find((f) => f._id === S), R = { _id: S };
-          return each(A, (f) => R[f] = v[f]), R;
+          const v = r.find((h) => h._id === S), R = { _id: S };
+          return each(A, (h) => R[h] = v[h]), R;
         });
       }
-      c(map(y, (A) => ({ _id: A, ...g }))), o({
+      c(map(y, (A) => ({ _id: A, ...b }))), o({
         undo: () => c(_),
-        redo: () => c(map(y, (A) => ({ _id: A, ...g })))
+        redo: () => c(map(y, (A) => ({ _id: A, ...b })))
       });
     },
-    updateBlocksRuntime: (y, g) => {
-      c(map(y, (k) => ({ _id: k, ...g })));
+    updateBlocksRuntime: (y, b) => {
+      c(map(y, (k) => ({ _id: k, ...b })));
     },
     setNewBlocks: (y) => {
       n(y), o({
@@ -1134,12 +1134,12 @@ const useBlocksStoreManager = () => {
       });
     },
     updateMultipleBlocksProps: (y) => {
-      let g = [];
-      g = map(y, (k) => {
+      let b = [];
+      b = map(y, (k) => {
         const _ = keys(k), A = r.find((v) => v._id === k._id), S = {};
         return each(_, (v) => S[v] = A[v]), S;
       }), c(y), o({
-        undo: () => c(g),
+        undo: () => c(b),
         redo: () => c(y)
       });
     }
@@ -1147,33 +1147,33 @@ const useBlocksStoreManager = () => {
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var m;
+      var g;
       for (let E = 0; E < i.length; E++) {
         const { _id: y } = i[E];
         i[E]._id = generateUUID();
-        const g = filter(i, { _parent: y });
-        for (let k = 0; k < g.length; k++)
-          g[k]._parent = i[E]._id;
+        const b = filter(i, { _parent: y });
+        for (let k = 0; k < b.length; k++)
+          b[k]._parent = i[E]._id;
       }
       const p = first(i);
       let u, x;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), n(i, x, d), r([(m = first(i)) == null ? void 0 : m._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), n(i, x, d), r([(g = first(i)) == null ? void 0 : g._id]), first(i);
     },
     [n, o, r]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const g = i.blocks;
-        return a(g, c, d);
+        const b = i.blocks;
+        return a(b, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), x = {
         _type: i.type,
         _id: p,
         ...u
       };
-      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), n([x], m, d), r([x._id]), x;
+      let m, g;
+      return c && (m = find(o, { _id: c }), x._parent = c, g = c), !canAcceptChildBlock(m == null ? void 0 : m._type, x._type) && m && (x._parent = m._parent, g = m._parent), n([x], g, d), r([x._id]), x;
     },
     [n, a, o, r]
   ), addPredefinedBlock: a };
@@ -2313,15 +2313,15 @@ function getNewClasses(o = "", r = "", n = []) {
   );
   const i = [], c = [];
   each(n, (u) => {
-    const x = constructClassObject(u), h = find(a, pick(x, ["dark", "mq", "mod", "property"]));
-    if (h && (a = filter(
+    const x = constructClassObject(u), m = find(a, pick(x, ["dark", "mq", "mod", "property"]));
+    if (m && (a = filter(
       a,
-      (m) => m.fullCls !== (h == null ? void 0 : h.fullCls)
-    )), i.push(x), x.mq === "xs" && !x.dark && x.mod === "" && (l = filter(l, (m) => m.property !== x.property)), getBelongsToForClass(a, x) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, x.property)) {
-      const m = find(l, pick(x, ["property"]));
-      h && (l = filter(
+      (g) => g.fullCls !== (m == null ? void 0 : m.fullCls)
+    )), i.push(x), x.mq === "xs" && !x.dark && x.mod === "" && (l = filter(l, (g) => g.property !== x.property)), getBelongsToForClass(a, x) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, x.property)) {
+      const g = find(l, pick(x, ["property"]));
+      m && (l = filter(
         l,
-        (E) => E.fullCls !== (m == null ? void 0 : m.fullCls)
+        (E) => E.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
         ...x,
         fullCls: x.cls,
@@ -2412,13 +2412,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((m) => m._id === c);
+        const d = o.find((g) => g._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
         const x = filter(
           o,
-          (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
-        n(h, l, x), i.push(get(h, "0._id", ""));
+          (g) => isString(l) ? g._parent === l : !g._parent
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
+        n(m, l, x), i.push(get(m, "0._id", ""));
       }), r(i);
     },
     [o, r]
@@ -2514,14 +2514,14 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(p, (h) => {
-      const m = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${m}($| )`, "g");
+    return each(p, (m) => {
+      const g = m.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${g}($| )`, "g");
       u = u.replace(E, " ").replace(/  +/g, " ").trim();
-      const y = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], y) && p.push(h.split(":").pop().trim());
-    }), each(p, (h) => {
-      const m = new RegExp(`(^| )${h.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
-      x = x.replace(m, " ").replace(/  +/g, " ").trim();
+      const y = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], y) && p.push(m.split(":").pop().trim());
+    }), each(p, (m) => {
+      const g = new RegExp(`(^| )${m.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
+      x = x.replace(g, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -2970,39 +2970,39 @@ const getBlockWithChildren = (o, r) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, h = (m, E) => {
-    const y = cloneDeep(E.find((g) => g._id === m));
-    for (const g in y) {
-      const k = y[g];
-      typeof k == "string" && startsWith(k, STYLES_KEY) ? y[g] = compact(flattenDeep(k.replace(STYLES_KEY, "").split(","))).join(" ") : g !== "_id" && delete y[g];
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, m = (g, E) => {
+    const y = cloneDeep(E.find((b) => b._id === g));
+    for (const b in y) {
+      const k = y[b];
+      typeof k == "string" && startsWith(k, STYLES_KEY) ? y[b] = compact(flattenDeep(k.replace(STYLES_KEY, "").split(","))).join(" ") : b !== "_id" && delete y[b];
     }
     return y;
   };
   return {
     askAi: useCallback(
-      async (m, E, y, g) => {
+      async (g, E, y, b) => {
         if (l) {
           r(!0), a(null);
           try {
-            const k = p === u ? "" : p, _ = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(E, d)), p) : [h(E, d)], A = await l(m, addLangToPrompt(y, x, m), _, k), { blocks: S, error: v } = A;
+            const k = p === u ? "" : p, _ = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(E, d)), p) : [m(E, d)], A = await l(g, addLangToPrompt(y, x, g), _, k), { blocks: S, error: v } = A;
             if (v) {
               a(v);
               return;
             }
-            if (m === "styles") {
-              const R = S.map((f) => {
-                for (const j in f)
-                  j !== "_id" && (f[j] = `${STYLES_KEY},${f[j]}`);
-                return f;
+            if (g === "styles") {
+              const R = S.map((h) => {
+                for (const j in h)
+                  j !== "_id" && (h[j] = `${STYLES_KEY},${h[j]}`);
+                return h;
               });
               c(R);
             } else
               i(S);
-            g && g(A);
+            b && b(A);
           } catch (k) {
             a(k);
           } finally {
-            r(!1), g && g();
+            r(!1), b && b();
           }
         }
       },
@@ -3110,11 +3110,11 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAto
     if (d < r) {
       const u = parseFloat((d / r).toFixed(2).toString());
       let x = {};
-      const h = p * u, m = d * u;
+      const m = p * u, g = d * u;
       p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - h) / h * 100 + "%",
-        width: 100 + (d - m) / m * 100 + "%"
+        height: 100 + (p - m) / m * 100 + "%",
+        width: 100 + (d - g) / g * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3289,38 +3289,38 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [r, n] = 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 h = () => {
+  const m = () => {
     removePlaceholder(), n(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: r,
-    onDragOver: (m) => {
-      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
+    onDragOver: (g) => {
+      g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
-    onDrop: (m) => {
+    onDrop: (g) => {
       var v;
-      const E = dropTarget, g = getOrientation(E) === "vertical" ? m.clientY + ((v = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : v.scrollY) : m.clientX;
-      dropIndex = calculateDropIndex(g, possiblePositions);
+      const E = dropTarget, b = getOrientation(E) === "vertical" ? g.clientY + ((v = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : v.scrollY) : g.clientX;
+      dropIndex = calculateDropIndex(b, possiblePositions);
       const k = d, _ = E.getAttribute("data-block-id"), A = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((k == null ? void 0 : k._id) === _ || !A) {
-        h();
+        m();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, _ === "canvas" ? null : _, dropIndex), setTimeout(h, 300);
+        a(k, _ === "canvas" ? null : _, dropIndex), setTimeout(m, 300);
         return;
       }
       let S = E.getAttribute("data-block-id");
-      S === null && (S = m.target.parentElement.getAttribute("data-block-id")), c([k._id], S === "canvas" ? null : S, dropIndex), h(), setTimeout(removePlaceholder, 300);
+      S === null && (S = g.target.parentElement.getAttribute("data-block-id")), c([k._id], S === "canvas" ? null : S, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (m) => {
-      const E = m, y = E.target;
+    onDragEnter: (g) => {
+      const E = g, y = E.target;
       dropTarget = y;
-      const g = y.getAttribute("data-block-id"), k = y.getAttribute("data-dnd-dragged") !== "yes";
-      u(g), E.stopPropagation(), E.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(y), n(!0), l(""), i([]);
+      const b = y.getAttribute("data-block-id"), k = y.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), E.stopPropagation(), E.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(y), n(!0), l(""), i([]);
     },
-    onDragLeave: (m) => {
-      m.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (g) => {
+      g.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3340,25 +3340,25 @@ function destroyQuill(o) {
 const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], r = useUpdateBlocksProps(), [n, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
-    var h;
+    var m;
     if (n) return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
     if (!d || !o.includes(d))
       return;
     const p = c.cloneNode(!0);
-    c.style.display = "none", Array.from(p.attributes).forEach((m) => {
-      m.name !== "class" && p.removeAttribute(m.name);
+    c.style.display = "none", Array.from(p.attributes).forEach((g) => {
+      g.name !== "class" && p.removeAttribute(g.name);
     }), d === "Text" && (p.style.display = "inline-block"), c.parentNode.insertBefore(p, c.nextSibling);
     const u = new Quill(p, { placeholder: "Type here..." });
     function x() {
-      const m = u.getText(0, u.getLength());
-      r([c.getAttribute("data-block-id")], { content: m }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
+      const g = u.getText(0, u.getLength());
+      r([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
     }
-    p.addEventListener("blur", x, !0), p.addEventListener("click", (m) => {
-      m.stopPropagation();
-    }), p.addEventListener("keydown", (m) => {
-      (m.key === "Enter" || m.key === "Escape") && x();
-    }), u.focus(), (h = p.querySelector(".ql-clipboard")) == null || h.remove(), a(c.getAttribute("data-block-id"));
+    p.addEventListener("blur", x, !0), p.addEventListener("click", (g) => {
+      g.stopPropagation();
+    }), p.addEventListener("keydown", (g) => {
+      (g.key === "Enter" || g.key === "Escape") && x();
+    }), u.focus(), (m = p.querySelector(".ql-clipboard")) == null || m.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [r, n] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3395,12 +3395,12 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const h = getElementByDataBlockId(r, first(n));
-      if (h) {
-        const m = h.getAttribute("data-style-prop");
-        if (m) {
-          const E = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
-          l([{ id: E, prop: m, blockId: y }]);
+      const m = getElementByDataBlockId(r, first(n));
+      if (m) {
+        const g = m.getAttribute("data-style-prop");
+        if (g) {
+          const E = m.getAttribute("data-style-id"), y = m.getAttribute("data-block-parent");
+          l([{ id: E, prop: g, blockId: y }]);
         }
       }
     }, 100);
@@ -3421,15 +3421,15 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), useKeyEventWatcher = (o) => {
-  const [r, n] = 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 } : {};
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: m } = usePasteBlocks(), g = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      x(r[0]) && h(r);
+      x(r[0]) && m(r);
     },
-    { ...m, preventDefault: !0 },
-    [r, x, h]
-  ), useHotkeys("esc", () => n([]), m, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...m, preventDefault: !0 }, [
+    { ...g, preventDefault: !0 },
+    [r, x, m]
+  ), useHotkeys("esc", () => n([]), g, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...g, preventDefault: !0 }, [
     r,
     i
   ]), useHotkeys(
@@ -3437,7 +3437,7 @@ const useHandleCanvasDblClick = () => {
     (E) => {
       E.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
     },
-    m,
+    g,
     [r, l]
   );
 }, KeyboardHandler = () => {
@@ -3490,7 +3490,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     }
   });
   useResizeObserver(o, () => x(), o !== null);
-  const h = get(r, "_parent", null), m = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
+  const m = get(r, "_parent", null), g = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
   return !o || !r || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3507,16 +3507,16 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       onKeyDown: (E) => E.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        h && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        m && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([h]);
+              c([]), l([m]);
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: m, block: r }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: g, block: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(r, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlusIcon,
@@ -3534,9 +3534,9 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
 }, HeadTags = () => {
   const [o] = useTheme(), r = useThemeOptions(), [n] = 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")
-  ), [h] = useState(
-    d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [m] = useState(
+    d == null ? void 0 : d.getElementById("selected-styling-block")
+  ), [g] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3561,8 +3561,8 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: g, theme: k }) {
-          g({
+        plugin(function({ addBase: b, theme: k }) {
+          b({
             "h1,h2,h3,h4,h5,h6": {
               fontFamily: k("fontFamily.heading")
             },
@@ -3576,18 +3576,18 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       ]
     });
   }, [o, r, p]), useEffect(() => {
-    x && (x.textContent = `${map(n, (g) => `[data-block-id="${g}"]`).join(",")}{
+    x && (x.textContent = `${map(n, (b) => `[data-block-id="${b}"]`).join(",")}{
                 outline: 1px solid ${n.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [n, x]), useEffect(() => {
-    m.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, m]), useEffect(() => {
+    g.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, g]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    h && (h.textContent = `${map(l, ({ id: g }) => `[data-style-id="${g}"]`).join(",")}{
+    m && (m.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, h]), useEffect(() => {
+  }, [l, m]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
   const E = useMemo(
@@ -3598,24 +3598,6 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: E }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: y } })
   ] });
-}, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, r) => {
-  const n = ["xs", "sm", "md", "lg", "xl", "2xl"], a = n.indexOf(r), l = o.split(" ");
-  let i = new Array(n.length).fill(!1);
-  for (const c of l) {
-    let [d, p] = c.split(":");
-    p || (p = d, d = "xs");
-    const u = n.indexOf(d);
-    if (u <= a) {
-      const x = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], h = ["hidden"];
-      if (x.includes(p))
-        for (let m = u; m < n.length; m++)
-          i[m] = !0;
-      else if (h.includes(p))
-        for (let m = u; m < n.length; m++)
-          i[m] = !1;
-    }
-  }
-  return i[a];
 };
 function AsyncPropsBlock(o) {
   const { dataProvider: r, block: n } = o, a = useMemo(() => r ? r(n, o.lang) : {}, [n, r, o.lang]);
@@ -3628,29 +3610,27 @@ function RuntimePropsBlock(o) {
   }, {});
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(o.component, { ...o.props, ...n }) });
 }
-const generateClassNames = memoize((o) => {
+const useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), generateClassNames = memoize((o) => {
   const r = o.replace(STYLES_KEY, "").split(",");
   return twMerge(r[0], r[1]);
 });
 function getElementAttrs(o, r) {
   return get(o, `${r}_attrs`, {});
 }
-function getStyleAttrs(o, r) {
-  const n = {};
-  return Object.keys(o).forEach((a) => {
-    if (isString(o[a]) && o[a].startsWith(STYLES_KEY)) {
-      const l = generateClassNames(o[a]), i = getElementAttrs(o, a);
-      n[a] = {
-        className: l,
-        "data-style-prop": a,
+function getStyleAttrs(o) {
+  const r = {};
+  return Object.keys(o).forEach((n) => {
+    if (isString(o[n]) && o[n].startsWith(STYLES_KEY)) {
+      const a = generateClassNames(o[n]), l = getElementAttrs(o, n);
+      r[n] = {
+        className: a,
+        "data-style-prop": n,
         "data-block-parent": o._id,
-        "data-style-id": `${a}-${o._id}`,
-        ...i
+        "data-style-id": `${n}-${o._id}`,
+        ...l
       };
-      const c = has(i, "x-show") || has(i, "x-if");
-      c && (n.__isHidden = c && !isVisibleAtBreakpoint(l, r));
     }
-  }), n;
+  }), r;
 }
 function applyBindings(o, r) {
   const n = get(o, "_bindings", {});
@@ -3676,62 +3656,51 @@ function applyLanguage(o, r, n) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
-  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), h = useCallback((g) => getStyleAttrs(g, d), [d]), [m] = useChaiExternalData(), [E] = useAtom$1(inlineEditingActiveAtom), y = useCallback(
-    (g) => g.reduce((k, _) => {
-      const A = get(p, _, {});
-      return { ...k, ...A };
-    }, {}),
-    [p]
-  );
+  const { selectedLang: n } = useLanguages(), [a] = useCutBlockIds(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), [c] = useHiddenBlockIds(), { getGlobalBlocks: d } = useGlobalBlocksStore(), p = useCallback((m) => getStyleAttrs(m), []), [u] = useChaiExternalData(), [x] = useAtom$1(inlineEditingActiveAtom);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((g, k) => {
-      if (E === g._id || u.includes(g._id)) return null;
-      const _ = {}, A = filter(r, { _parent: g._id });
-      if (_.children = A.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: A }) : null, g._type === "GlobalBlock") {
-        const N = x(g);
-        _.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(N, (D) => !D._parent), allBlocks: N });
+    o.map((m, g) => {
+      if (x === m._id || c.includes(m._id)) return null;
+      const E = {}, y = filter(r, { _parent: m._id });
+      if (E.children = y.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: y }) : null, m._type === "GlobalBlock") {
+        const h = d(m);
+        E.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(h, (j) => !j._parent), allBlocks: h });
       }
-      const S = getRegisteredChaiBlock(g._type), v = get(S, "component", null);
-      if (isNull(v)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${g == null ? void 0 : g._type} not registered -->` });
-      const R = has(S, "getBlockStateFrom") ? S == null ? void 0 : S.getBlockStateFrom(g, r) : [], f = y(R), j = h(g);
-      if (get(j, "__isHidden", !1) && !includes(a, g._id))
-        return null;
-      const w = i && isDescendant(i._id, g._id, r), C = {
+      const b = getRegisteredChaiBlock(m._type), k = get(b, "component", null);
+      if (isNull(k)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${m == null ? void 0 : m._type} not registered -->` });
+      const _ = p(m), A = l && isDescendant(l._id, m._id, r), v = {
         blockProps: {
-          ...includes(a, g._id) ? { "force-show": "" } : {},
-          "data-block-id": g._id,
-          "data-block-type": g._type,
-          ...i ? (
+          "data-block-id": m._id,
+          "data-block-type": m._type,
+          ...l ? (
             // @ts-ignore
             {
-              "data-dnd": canAcceptChildBlock(g._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === g._id || w ? "yes" : "no"
+              "data-dnd": canAcceptChildBlock(m._type, l == null ? void 0 : l._type) ? "yes" : "no",
+              "data-dnd-dragged": l._id === m._id || A ? "yes" : "no"
             }
           ) : {},
-          ...c === g._id && !w ? { "data-drop": "yes" } : {},
-          ...includes(l, g._id) ? { "data-cut-block": "yes" } : {}
+          ...i === m._id && !A ? { "data-drop": "yes" } : {},
+          ...includes(a, m._id) ? { "data-cut-block": "yes" } : {}
         },
-        index: k,
-        ...applyBindings(applyLanguage(g, n, S), m),
-        ...omit(j, ["__isHidden"]),
+        index: g,
+        ...applyBindings(applyLanguage(m, n, b), u),
         ..._,
+        ...E,
         inBuilder: !0,
-        blockState: f,
         lang: n
       };
-      if (has(S, "dataProvider"))
+      if (has(b, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           AsyncPropsBlock,
           {
             lang: n,
-            dataProvider: S.dataProvider,
-            block: g,
-            component: v,
-            props: C
+            dataProvider: b.dataProvider,
+            block: m,
+            component: k,
+            props: v
           }
         ) });
-      const B = getRuntimeProps(g._type);
-      return B ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: B, block: g, component: v, props: C }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(v, C) });
+      const R = getRuntimeProps(m._type);
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: R, block: m, component: k, props: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(k, v) });
     })
   ) });
 }
@@ -3791,23 +3760,23 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = 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([]), [, E] = useAtom$1(canvasIframeAtom), [y, g] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), _ = useBuilderProp("htmlDir", "ltr"), A = (R) => {
-    p((f) => ({ ...f, width: R }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, m] = useState([]), [, g] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [y, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), _ = useBuilderProp("htmlDir", "ltr"), A = (R) => {
+    p((h) => ({ ...h, width: R }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: R, clientHeight: f } = c.current;
-    p({ width: R, height: f });
+    const { clientWidth: R, clientHeight: h } = c.current;
+    p({ width: R, height: h });
   }, [c, r]);
-  const S = (R, f = 0) => {
+  const S = (R, h = 0) => {
     const { top: j } = R.getBoundingClientRect();
-    return j + f >= 0 && j - f <= window.innerHeight;
+    return j + h >= 0 && j - h <= window.innerHeight;
   };
   useEffect(() => {
-    var R, f;
+    var R, h;
     if (a && a.type !== "Multiple" && i.current) {
       const j = getElementByDataBlockId(i.current.contentDocument, a._id);
-      j && (S(j) || (f = (R = i.current) == null ? void 0 : R.contentWindow) == null || f.scrollTo({ top: j.offsetTop, behavior: "smooth" }), h([j]));
+      j && (S(j) || (h = (R = i.current) == null ? void 0 : R.contentWindow) == null || h.scrollTo({ top: j.offsetTop, behavior: "smooth" }), m([j]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(y) && i.current) {
@@ -3815,9 +3784,9 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
         i.current.contentDocument,
         first(y).id
       );
-      m(R ? [R] : [null]);
+      g(R ? [R] : [null]);
     } else
-      m([null]);
+      g([null]);
   }, [y]);
   const v = useMemo(() => {
     let R = IframeInitialContent;
@@ -3830,7 +3799,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     "div",
     {
       onClick: () => {
-        n([]), g([]);
+        n([]), b([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -4084,52 +4053,52 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     }
   );
 }, ThemeConfigPanel$1 = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (g) => {
-    a(g);
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (b) => {
+    a(b);
   }, x = () => {
-    const g = l.find((k) => Object.keys(k)[0] === n);
-    if (g) {
-      const k = Object.values(g)[0];
+    const b = l.find((k) => Object.keys(k)[0] === n);
+    if (b) {
+      const k = Object.values(b)[0];
       k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? c(k) : console.error("Invalid preset structure:", k);
     } else
       console.error("Preset not found:", n);
-  }, h = useDebouncedCallback(
-    (g, k) => {
+  }, m = useDebouncedCallback(
+    (b, k) => {
       c(() => ({
         ...i,
         fontFamily: {
           ...i.fontFamily,
-          [g.replace(/font-/g, "")]: k
+          [b.replace(/font-/g, "")]: k
         }
       }));
     },
     [i],
     200
-  ), m = useDebouncedCallback(
-    (g) => {
+  ), g = useDebouncedCallback(
+    (b) => {
       c(() => ({
         ...i,
-        borderRadius: `${g}px`
+        borderRadius: `${b}px`
       }));
     },
     [i],
     200
   ), E = useDebouncedCallback(
-    (g, k) => {
+    (b, k) => {
       c(() => {
-        const _ = get(i, `colors.${g}`);
+        const _ = get(i, `colors.${b}`);
         return r ? set(_, 1, k) : set(_, 0, k), {
           ...i,
           colors: {
             ...i.colors,
-            [g]: _
+            [b]: _
           }
         };
       });
     },
     [i],
     200
-  ), y = (g) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(g.items).map(([k]) => {
+  ), y = (b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(b.items).map(([k]) => {
     const _ = get(i, `colors.${k}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4150,11 +4119,11 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
           "select",
           {
             value: n,
-            onChange: (g) => u(g.target.value),
+            onChange: (b) => u(b.target.value),
             className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select preset" }),
-              Array.isArray(l) && l.map((g) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(g)[0], children: capitalize(Object.keys(g)[0]) }, Object.keys(g)[0]))
+              Array.isArray(l) && l.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(b)[0], children: capitalize(Object.keys(b)[0]) }, Object.keys(b)[0]))
             ]
           }
         )
@@ -4162,25 +4131,25 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: n === "", variant: "default", onClick: x, children: p("Apply") }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("space-y-2", o), children: [
-      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([g, k]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([b, k]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         FontSelector,
         {
-          label: g,
-          value: i.fontFamily[g.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-          onChange: (_) => h(g, _)
+          label: b,
+          value: i.fontFamily[b.replace(/font-/g, "")] || k[Object.keys(k)[0]],
+          onChange: (_) => m(b, _)
         },
-        g
+        b
       )) }),
       (d == null ? void 0 : d.borderRadius) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5 py-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Border Radius") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput, { value: i.borderRadius, onChange: m }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput, { value: i.borderRadius, onChange: g }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-12 text-sm", children: i.borderRadius })
         ] })
       ] }),
       (d == null ? void 0 : d.colors) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-0.5", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Colors") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((g) => y(g)) }, r ? "dark" : "light")
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((b) => y(b)) }, r ? "dark" : "light")
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4404,26 +4373,26 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   var I;
   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: h } = useBlockHighlight(), { id: m, data: E, isSelected: y, willReceiveDrop: g, isDragging: k, isEditing: _, handleClick: A } = o, S = (T) => {
-    T.stopPropagation(), !i.includes(m) && o.toggle();
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: m } = useBlockHighlight(), { id: g, data: E, isSelected: y, willReceiveDrop: b, isDragging: k, isEditing: _, handleClick: A } = o, S = (T) => {
+    T.stopPropagation(), !i.includes(g) && o.toggle();
   }, v = (T) => {
     T.isInternal && (p = T.isOpen, T.isOpen && T.close());
   }, R = (T) => {
     T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
-  }, [f, j] = useAtom$1(currentAddSelection), w = () => {
+  }, [h, j] = useAtom$1(currentAddSelection), w = () => {
     var T;
-    b(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
-  }, b = () => {
+    f(), o.parent.isSelected || j((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+  }, f = () => {
     j(null);
   }, C = (T) => {
-    b(), T.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), A(T);
+    f(), T.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), A(T);
   };
   useEffect(() => {
     const T = setTimeout(() => {
-      g && !o.isOpen && !k && !i.includes(m) && o.toggle();
+      b && !o.isOpen && !k && !i.includes(g) && o.toggle();
     }, 500);
     return () => clearTimeout(T);
-  }, [g, o, k]);
+  }, [b, o, k]);
   const B = useMemo(() => {
     const T = Object.keys(E), L = [];
     for (let P = 0; P < T.length; P++)
@@ -4438,11 +4407,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     const $ = M.getBoundingClientRect(), H = d.getBoundingClientRect();
     $.top >= H.top && $.left >= H.left && $.bottom <= H.bottom && $.right <= H.right || (P.documentElement.scrollTop = M.offsetTop - H.top);
   }, D = (T) => {
-    b();
+    f();
     const L = get(o, "parent.id");
     L !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: L, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
   };
-  return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
@@ -4457,25 +4426,25 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      onMouseEnter: () => x(m),
-      onMouseLeave: () => h(),
+      onMouseEnter: () => x(g),
+      onMouseLeave: () => m(),
       onClick: C,
       style: r,
-      "data-node-id": m,
-      ref: i.includes(m) ? null : n,
+      "data-node-id": g,
+      ref: i.includes(g) ? null : n,
       onDragStart: () => v(o),
       onDragEnd: () => R(o),
       onDragOver: (T) => {
-        T.preventDefault(), N(m, "yes");
+        T.preventDefault(), N(g, "yes");
       },
       onDragLeave: (T) => {
-        T.preventDefault(), N(m, "no");
+        T.preventDefault(), N(g, "no");
       },
       onDrop: (T) => {
-        T.preventDefault(), N(m, "no");
+        T.preventDefault(), N(g, "no");
       },
       children: [
         (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4485,7 +4454,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
               T.stopPropagation(), D(o.childIndex);
             },
             onMouseEnter: w,
-            onMouseLeave: b,
+            onMouseLeave: f,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -4496,10 +4465,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               y ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              g && canAcceptChildBlock(E._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === f ? "bg-purple-100" : "",
+              b && canAcceptChildBlock(E._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === h ? "bg-purple-100" : "",
               k && "opacity-20",
-              i.includes(m) ? "opacity-50" : ""
+              i.includes(g) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
@@ -4535,22 +4504,22 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, 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((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                !i.includes(g) && a.map((T) => /* @__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(T.item, { blockId: m })
+                      children: React__default.createElement(T.item, { blockId: g })
                     }
                   ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: T.tooltip })
                 ] })),
-                canAddChildBlock(E == null ? void 0 : E._type) && !i.includes(m) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                canAddChildBlock(E == null ? void 0 : E._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: g }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "15" })
@@ -4563,7 +4532,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                     TooltipTrigger,
                     {
                       onClick: (T) => {
-                        T.stopPropagation(), c(m), o.isOpen && o.toggle();
+                        T.stopPropagation(), c(g), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -4921,7 +4890,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var h, m, E, y, g, k, _, A;
+  var m, g, E, y, b, k, _, A;
   if (n.type === "comment") return [];
   console.log("node ===>", n);
   let a = { _id: generateUUID() };
@@ -4962,10 +4931,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ];
     a = {
       ...a,
-      href: ((h = l.find((v) => v.key === "href")) == null ? void 0 : h.value) || "",
-      hrefType: ((m = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      href: ((m = l.find((v) => v.key === "href")) == null ? void 0 : m.value) || "",
+      hrefType: ((g = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : g.value) || "video",
       autoplay: ((E = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : E.value) === "true" ? "true" : "false",
-      maxWidth: ((g = (y = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : y.value) == null ? void 0 : g.replace("px", "")) || "",
+      maxWidth: ((b = (y = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : y.value) == null ? void 0 : b.replace("px", "")) || "",
       backdropColor: ((k = l.find((v) => v.key === "data-overlay")) == null ? void 0 : k.value) || "",
       galleryName: ((_ = l.find((v) => v.key === "data-gall")) == null ? void 0 : _.value) || ""
     }, forEach(S, (v) => {
@@ -4978,14 +4947,14 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     a.content = getTextContent(S);
     const v = find(
       n.children || [],
-      (R) => (R == null ? void 0 : R.tagName) === "span" && some(R.children || [], (f) => (f == null ? void 0 : f.tagName) === "svg")
+      (R) => (R == null ? void 0 : R.tagName) === "span" && some(R.children || [], (h) => (h == null ? void 0 : h.tagName) === "svg")
     );
     if (v) {
-      const R = find(v.children || [], (f) => (f == null ? void 0 : f.tagName) === "svg");
+      const R = find(v.children || [], (h) => (h == null ? void 0 : h.tagName) === "svg");
       if (R) {
         a.icon = stringify([R]);
-        const { height: f, width: j } = getSvgDimensions(R, "16px", "16px");
-        a.iconHeight = f, a.iconWidth = j;
+        const { height: h, width: j } = getSvgDimensions(R, "16px", "16px");
+        a.iconHeight = h, a.iconWidth = j;
       }
     }
     return [a];
@@ -4997,8 +4966,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     const S = stringify([n]);
     return hasVideoEmbed(S) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(S)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = S, [a];
   } else if (n.tagName === "svg") {
-    const S = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), R = get(S, "value") ? `[${get(S, "value")}px]` : "24px", f = get(v, "value") ? `[${get(v, "value")}px]` : "24px", j = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${f} h-${R}`, j)}`.trim(), n.attributes = filter(n.attributes, (w) => !includes(["style", "width", "height", "class"], w.key)), a.icon = stringify([n]), [a];
+    const S = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), R = get(S, "value") ? `[${get(S, "value")}px]` : "24px", h = get(v, "value") ? `[${get(v, "value")}px]` : "24px", j = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${h} h-${R}`, j)}`.trim(), n.attributes = filter(n.attributes, (w) => !includes(["style", "width", "height", "class"], w.key)), a.icon = stringify([n]), [a];
   } else if (n.tagName == "option" && r && ((A = r.block) == null ? void 0 : A._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
@@ -5047,6 +5016,37 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: n("Import HTML") }) })
   ] });
+}, GlobalBlockSettings = () => {
+  const o = useSelectedBlock(), { data: r, refetch: n, isLoading: a } = useGlobalBlocksList(), l = useUpdateBlocksProps();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm", children: "Choose a global block" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "select",
+      {
+        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
+        value: (o == null ? void 0 : o.globalBlock) || "",
+        onChange: (i) => {
+          var c;
+          l([o._id], {
+            globalBlock: i.target.value,
+            _name: `Global: ${startCase((c = get(r, i.target.value, "")) == null ? void 0 : c.name)}`
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select a global block" }),
+          Object.keys(r).map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: i, children: r[i].name || i }, i))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        onClick: n,
+        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
+        children: a ? "Loading..." : "Refresh List"
+      }
+    ) })
+  ] });
 }, BindingWidget = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs border rounded-sm p-1 mt-1 border-orange-500 text-orange-500 bg-orange-100", children: "Data binding is set for this field" }), getSvgMarkup = (o) => {
   try {
     const r = document.getElementById("icon-picker-field"), n = document.createElement("div");
@@ -5195,73 +5195,73 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   onChange: n
 }) => {
   var w;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (b, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, m] = useState(""), [E, y] = useState([]), [g, k] = useState(-1), _ = useRef(null), A = (w = r == null ? void 0 : r.find((b) => b.key === u)) == null ? void 0 : w.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (f, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [m, g] = useState(""), [E, y] = useState([]), [b, k] = useState(-1), _ = useRef(null), A = (w = r == null ? void 0 : r.find((f) => f.key === u)) == null ? void 0 : w.name;
   useEffect(() => {
-    if (m(""), y([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const b = split(o, ":"), C = get(b, 1, "page") || "page";
+    if (g(""), y([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const f = split(o, ":"), C = get(f, 1, "page") || "page";
     x(C), (async () => {
-      const B = await l(C, [get(b, 2, "page")]);
-      B && Array.isArray(B) && m(get(B, [0, "name"], ""));
+      const B = await l(C, [get(f, 2, "page")]);
+      B && Array.isArray(B) && g(get(B, [0, "name"], ""));
     })();
   }, [o]);
   const S = useDebouncedCallback(
-    async (b) => {
-      if (isEmpty(b))
+    async (f) => {
+      if (isEmpty(f))
         y([]);
       else {
-        const C = await l(u, b);
+        const C = await l(u, f);
         y(C);
       }
       c(!1), k(-1);
     },
     [u],
     300
-  ), v = (b) => {
-    const C = ["pageType", u, b.id];
-    C[1] && (n(C.join(":")), m(b.name), p(!1), y([]), k(-1));
-  }, R = (b) => {
-    switch (b.key) {
+  ), v = (f) => {
+    const C = ["pageType", u, f.id];
+    C[1] && (n(C.join(":")), g(f.name), p(!1), y([]), k(-1));
+  }, R = (f) => {
+    switch (f.key) {
       case "ArrowDown":
-        b.preventDefault(), k((C) => C < E.length - 1 ? C + 1 : C);
+        f.preventDefault(), k((C) => C < E.length - 1 ? C + 1 : C);
         break;
       case "ArrowUp":
-        b.preventDefault(), k((C) => C > 0 ? C - 1 : C);
+        f.preventDefault(), k((C) => C > 0 ? C - 1 : C);
         break;
       case "Enter":
-        if (b.preventDefault(), E.length === 0) return;
-        g >= 0 && v(E[g]);
+        if (f.preventDefault(), E.length === 0) return;
+        b >= 0 && v(E[b]);
         break;
       case "Escape":
-        b.preventDefault(), f();
+        f.preventDefault(), h();
         break;
     }
   };
   useEffect(() => {
-    if (g >= 0 && _.current) {
-      const b = _.current.children[g];
-      b == null || b.scrollIntoView({ block: "nearest" });
+    if (b >= 0 && _.current) {
+      const f = _.current.children[b];
+      f == null || f.scrollIntoView({ block: "nearest" });
     }
-  }, [g]);
-  const f = () => {
-    m(""), y([]), k(-1), p(!1), n("");
-  }, j = (b) => {
-    m(b), p(!isEmpty(b)), c(!0), S(b);
+  }, [b]);
+  const h = () => {
+    g(""), y([]), k(-1), p(!1), n("");
+  }, j = (f) => {
+    g(f), p(!isEmpty(f)), c(!0), S(f);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (b) => x(b.target.value), children: map(r, (b) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: b.key, children: b.name }, b.key)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (f) => x(f.target.value), children: map(r, (f) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: f.key, children: f.name }, f.key)) }),
     u && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           type: "text",
-          value: h,
-          onChange: (b) => j(b.target.value),
+          value: m,
+          onChange: (f) => j(f.target.value),
           onKeyDown: R,
           placeholder: a(`Search ${A ?? ""}`),
           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: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: f, 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: m && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: h, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(E) || d && isEmpty(E)) && /* @__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: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -5269,24 +5269,24 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
     ] }) : d && isEmpty(E) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      h,
+      m,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: _, children: map(E == null ? void 0 : E.slice(0, 20), (b, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: _, children: map(E == null ? void 0 : E.slice(0, 20), (f, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => v(b),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(b.id) ? "bg-blue-200" : C === g ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => v(f),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(f.id) ? "bg-blue-200" : C === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          b.name,
+          f.name,
           " ",
-          b.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
+          f.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            b.slug,
+            f.slug,
             " )"
           ] })
         ]
       },
-      b.id
+      f.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n }) => {
@@ -5388,11 +5388,11 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   schema: u,
   formData: x
 }) => {
-  const { selectedLang: h, fallbackLang: m, languages: E } = useLanguages(), y = isEmpty(E) ? "" : isEmpty(h) ? m : h, g = get(LANGUAGES, y, y), k = useSelectedBlock(), _ = useRegisteredChaiBlocks(), A = get(_, [k == null ? void 0 : k._type, "i18nProps"], []) || [], [S, v] = useState(null);
+  const { selectedLang: m, fallbackLang: g, languages: E } = useLanguages(), y = isEmpty(E) ? "" : isEmpty(m) ? g : m, b = get(LANGUAGES, y, y), k = useSelectedBlock(), _ = useRegisteredChaiBlocks(), A = get(_, [k == null ? void 0 : k._type, "i18nProps"], []) || [], [S, v] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
-  const f = A == null ? void 0 : A.includes(o.replace("root.", ""));
+  const h = A == null ? void 0 : A.includes(o.replace("root.", ""));
   if (u.type === "array") {
     const j = S === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
@@ -5423,9 +5423,9 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       n,
       " ",
-      f && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      h && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
-        g
+        b
       ] }),
       p && u.type !== "object" ? " *" : null
     ] }),
@@ -5486,62 +5486,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
     },
     d
   );
-}), CanvasSettings = () => {
-  const [o, r] = useAtom$1(xShowBlocksAtom), n = useSelectedBlock(), [, a] = useSelectedBlockIds(), { t: l } = useTranslation(), i = useMemo(() => (n ? JSON.stringify(n) : "").includes('"x-show"'), [n]);
-  if (!n || !i) return null;
-  const c = o.includes(n._id);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-2 text-xs hover:no-underline", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 border-b border-border bg-background py-2 font-normal text-muted-foreground", children: [
-      n._name || n._type,
-      " ",
-      l("Visibility settings")
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2 pt-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Switch,
-        {
-          id: "show-on-canvas",
-          checked: c,
-          onCheckedChange: (d) => {
-            d ? (r((p) => [...p, n._id]), a([n._id])) : r((p) => p.filter((u) => u !== n._id));
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "show-on-canvas", children: l("Show on canvas") })
-    ] })
-  ] });
-}, GlobalBlockSettings = () => {
-  const o = useSelectedBlock(), { data: r, refetch: n, isLoading: a } = useGlobalBlocksList(), l = useUpdateBlocksProps();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm", children: "Choose a global block" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "select",
-      {
-        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
-        value: (o == null ? void 0 : o.globalBlock) || "",
-        onChange: (i) => {
-          var c;
-          l([o._id], {
-            globalBlock: i.target.value,
-            _name: `Global: ${startCase((c = get(r, i.target.value, "")) == null ? void 0 : c.name)}`
-          });
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select a global block" }),
-          Object.keys(r).map((i) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: i, children: r[i].name || i }, i))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "button",
-      {
-        onClick: n,
-        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
-        children: a ? "Loading..." : "Refresh List"
-      }
-    ) })
-  ] });
-}, formDataWithSelectedLang = (o, r, n) => {
+}), formDataWithSelectedLang = (o, r, n) => {
   const a = cloneDeep(o);
   return forEach(keys(o), (l) => {
     includes(get(n, "i18nProps", []), l) && !isEmpty(r) && (a[l] = get(o, `${l}-${r}`));
@@ -5551,31 +5496,31 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   return set(n, o, r), n;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, 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), E = ({ formData: R }, f, j) => {
-    if (f && (c == null ? void 0 : c._id) === r._id) {
-      const w = f.replace("root.", "");
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), m = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, m), E = ({ formData: R }, h, j) => {
+    if (h && (c == null ? void 0 : c._id) === r._id) {
+      const w = h.replace("root.", "");
       a([r._id], { [w]: get(R, w) }, j);
     }
   }, y = useCallback(
-    debounce(({ formData: R }, f, j) => {
-      E({ formData: R }, f, j), d(R);
+    debounce(({ formData: R }, h, j) => {
+      E({ formData: R }, h, j), d(R);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), g = ({ formData: R }, f) => {
-    if (f) {
-      const j = f.replace("root.", "");
+  ), b = ({ formData: R }, h) => {
+    if (h) {
+      const j = h.replace("root.", "");
       n(
         [r._id],
         convertDotNotationToObject(j, get(R, j.split(".")))
-      ), y({ formData: R }, f, { [j]: get(c, j) });
+      ), y({ formData: R }, h, { [j]: get(c, j) });
     }
-  }, k = ({ formData: R }, f) => {
-    if (f) {
-      const j = f.replace("root.", "");
+  }, k = ({ formData: R }, h) => {
+    if (h) {
+      const j = h.replace("root.", "");
       n(
         [x._id],
         convertDotNotationToObject(j, get(R, j.split(".")))
-      ), y({ formData: R }, f, { [j]: get(c, j) });
+      ), y({ formData: R }, h, { [j]: get(c, j) });
     }
   };
   keys(get(i, "_bindings", {}));
@@ -5586,8 +5531,8 @@ function BlockSettings() {
   }, [r]), { wrapperSchema: S, wrapperUiSchema: v } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const R = x == null ? void 0 : x._type, { schema: f = {}, uiSchema: j = {} } = getBlockFormSchemas(R);
-    return { wrapperSchema: f, wrapperUiSchema: j };
+    const R = x == null ? void 0 : x._type, { schema: h = {}, uiSchema: j = {} } = getBlockFormSchemas(R);
+    return { wrapperSchema: h, wrapperUiSchema: j };
   }, [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: [
@@ -5614,7 +5559,7 @@ function BlockSettings() {
         {
           id: x == null ? void 0 : x._id,
           onChange: k,
-          formData: m,
+          formData: g,
           schema: S,
           uiSchema: v
         }
@@ -5624,14 +5569,13 @@ function BlockSettings() {
       JSONForm,
       {
         id: r == null ? void 0 : r._id,
-        onChange: g,
+        onChange: b,
         formData: i,
         schema: _,
         uiSchema: A
       }
     ),
-    (r == null ? void 0 : r._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasSettings, {})
+    (r == null ? void 0 : r._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null
   ] });
 }
 function FaLanguage(o) {
@@ -5700,11 +5644,11 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, x] = useState();
   useEffect(() => {
-    var m;
-    (m = d.current) == null || m.focus();
+    var g;
+    (g = d.current) == null || g.focus();
   }, []);
-  const h = (m) => {
-    const { usage: E } = m || {};
+  const m = (g) => {
+    const { usage: E } = g || {};
     !l && E && x(E), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
@@ -5714,12 +5658,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (m) => c(m.target.value),
+        onChange: (g) => c(g.target.value),
         placeholder: r("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h));
+        onKeyDown: (g) => {
+          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, m));
         }
       }
     ),
@@ -5729,7 +5673,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h);
+            p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, m);
           },
           variant: "default",
           className: "w-fit",
@@ -5760,24 +5704,24 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var f;
-  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (f = first(n)) == null ? void 0 : f.prop, m = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), E = () => {
+  var h;
+  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), m = (h = first(n)) == null ? void 0 : h.prop, g = reject((get(a, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), E = () => {
     const j = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(c, j, !0), u("");
-  }, [y, g] = useState([]), k = ({ value: j }) => {
-    const w = j.trim().toLowerCase(), b = w.match(/.+:/g);
+  }, [y, b] = useState([]), k = ({ value: j }) => {
+    const w = j.trim().toLowerCase(), f = w.match(/.+:/g);
     let C = [];
-    if (b && b.length > 0) {
-      const [B] = b, N = w.replace(B, "");
+    if (f && f.length > 0) {
+      const [B] = f, N = w.replace(B, "");
       C = o.search(N).map((I) => ({
         ...I,
         item: { ...I.item, name: B + I.item.name }
       }));
     } else
       C = o.search(w);
-    return g(map(C, "item"));
+    return b(map(C, "item"));
   }, _ = () => {
-    g([]);
+    b([]);
   }, A = (j) => j.name, S = (j) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: j.name }), v = {
     autoComplete: "off",
     autoCorrect: "off",
@@ -5799,7 +5743,7 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(m.join(" ")), x({
+    navigator.clipboard.writeText(g.join(" ")), x({
       title: r("Copied"),
       description: r("Classes copied to clipboard")
     });
@@ -5858,7 +5802,7 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          m.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
@@ -6264,10 +6208,10 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: r }) => {
-  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { 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(
+  const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), m = get(u, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(g) ? (c([]), p({ color: g })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: g, shade: k.shade ? k.shade : "500" })));
+    (b) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
     },
     [c, p]
   );
@@ -6278,8 +6222,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   }, [x]);
   const E = useCallback(
     // eslint-disable-next-line no-shadow
-    (g) => {
-      p({ color: x, shade: g });
+    (b) => {
+      p({ color: x, shade: b });
     },
     [x]
   );
@@ -6297,7 +6241,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         disabled: !l,
         rounded: !0,
         selected: x,
-        onChange: m,
+        onChange: g,
         options: [
           "current",
           "transparent",
@@ -6330,7 +6274,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !x || !l, onChange: E, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: m, disabled: !x || !l, onChange: E, options: i }) })
   ] });
 }, getUserInputValues = (o, r) => {
   o = o.toLowerCase();
@@ -6477,23 +6421,23 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [E, y] = useState(!1), [g, k] = useState(""), [_, A] = useState(!1), [S, v] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [m, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [E, y] = useState(!1), [b, k] = useState(""), [_, A] = useState(!1), [S, v] = useState(!1);
   useEffect(() => {
-    const { value: b, unit: C } = getClassValueAndUnit(i);
+    const { value: f, unit: C } = getClassValueAndUnit(i);
     if (C === "") {
-      l(b), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(f), g(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(C), l(C === "class" || isEmpty(b) ? "" : b);
+    g(C), l(C === "class" || isEmpty(f) ? "" : f);
   }, [i, p, u]);
-  const R = useThrottledCallback((b) => c(b), [c], THROTTLE_TIME), f = useThrottledCallback((b) => c(b, !1), [c], THROTTLE_TIME), j = useCallback(
-    (b = !1) => {
+  const R = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), h = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), j = useCallback(
+    (f = !1) => {
       const C = getUserInputValues(`${a}`, u);
       if (get(C, "error", !1)) {
         y(!0);
         return;
       }
-      const B = get(C, "unit") !== "" ? get(C, "unit") : h;
+      const B = get(C, "unit") !== "" ? get(C, "unit") : m;
       if (B === "auto" || B === "none") {
         R(`${d}${B}`);
         return;
@@ -6501,28 +6445,28 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       if (get(C, "value") === "")
         return;
       const D = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
-      b ? f(D) : R(D);
+      f ? h(D) : R(D);
     },
-    [R, f, a, h, d, u]
+    [R, h, a, m, d, u]
   ), w = useCallback(
-    (b) => {
+    (f) => {
       const C = getUserInputValues(`${a}`, u);
       if (get(C, "error", !1)) {
         y(!0);
         return;
       }
-      if (b === "auto" || b === "none") {
-        R(`${d}${b}`);
+      if (f === "auto" || f === "none") {
+        R(`${d}${f}`);
         return;
       }
       if (get(C, "value") === "")
         return;
-      const B = get(C, "unit") !== "" ? get(C, "unit") : b, D = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
+      const B = get(C, "unit") !== "" ? get(C, "unit") : f, D = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
       R(D);
     },
     [R, 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: h === "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: m === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
       {
@@ -6537,35 +6481,35 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     ] })
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${_ ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: h === "class",
-          onKeyPress: (b) => {
-            b.key === "Enter" && j();
+          readOnly: m === "class",
+          onKeyPress: (f) => {
+            f.key === "Enter" && j();
           },
-          onKeyDown: (b) => {
-            if (b.keyCode !== 38 && b.keyCode !== 40)
+          onKeyDown: (f) => {
+            if (f.keyCode !== 38 && f.keyCode !== 40)
               return;
-            b.preventDefault(), v(!0);
-            const C = parseInt$1(b.target.value);
+            f.preventDefault(), v(!0);
+            const C = parseInt$1(f.target.value);
             let B = isNaN$1(C) ? 0 : C;
-            b.keyCode === 38 && (B += 1), b.keyCode === 40 && (B -= 1);
-            const N = `${B}`, I = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${h === "-" ? "" : h}]`;
-            f(I);
+            f.keyCode === 38 && (B += 1), f.keyCode === 40 && (B -= 1);
+            const N = `${B}`, I = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${m === "-" ? "" : m}]`;
+            h(I);
           },
-          onKeyUp: (b) => {
-            S && (b.preventDefault(), v(!1));
+          onKeyUp: (f) => {
+            S && (f.preventDefault(), v(!1));
           },
           onBlur: () => j(),
-          onChange: (b) => {
-            y(!1), l(b.target.value);
+          onChange: (f) => {
+            y(!1), l(f.target.value);
           },
-          onClick: (b) => {
+          onClick: (f) => {
             var C;
-            (C = b == null ? void 0 : b.target) == null || C.select(), n(!1);
+            (C = f == null ? void 0 : f.target) == null || C.select(), n(!1);
           },
-          value: _ ? g : a,
+          value: _ ? 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(
             " ",
             E ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6580,7 +6524,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             onClick: () => n(!r),
             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: h }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
               u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -6589,33 +6533,33 @@ const RangeChoices = ({ property: o, onChange: r }) => {
           UnitSelection,
           {
             units: u,
-            current: h,
-            onSelect: (b) => {
-              n(!1), m(b), w(b);
+            current: m,
+            onSelect: (f) => {
+              n(!1), g(f), w(f);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || _ ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(m) !== -1 || _ ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
         onDragStart: () => A(!0),
-        onDragEnd: (b) => {
-          if (k(() => ""), A(!1), isEmpty(b))
+        onDragEnd: (f) => {
+          if (k(() => ""), A(!1), isEmpty(f))
             return;
-          const C = `${b}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+          const C = `${f}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${m === "-" ? "" : m}]`;
           R(N);
         },
-        onDrag: (b) => {
-          if (isEmpty(b))
+        onDrag: (f) => {
+          if (isEmpty(f))
             return;
-          k(b);
-          const C = `${b}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
-          f(N);
+          k(f);
+          const C = `${f}`, N = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${m === "-" ? "" : m}]`;
+          h(N);
         },
         currentValue: a,
-        unit: h,
+        unit: m,
         negative: x,
         cssProperty: p
       }
@@ -6709,22 +6653,22 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [y] = useSelectedBlockIds(), g = useMemo(() => get(h, "fullCls", ""), [h]), k = useCallback(
-    (f, j = !0) => {
-      const w = { dark: p, mq: x, mod: u, cls: f, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), m = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [y] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), k = useCallback(
+    (h, j = !0) => {
+      const w = { dark: p, mq: x, mod: u, cls: h, property: l, fullCls: "" };
       (p || u !== "") && (w.mq = "xs");
-      const b = generateFullClsName(w);
-      m(y, [b], j);
+      const f = generateFullClsName(w);
+      g(y, [f], j);
     },
-    [y, p, x, u, l, m]
+    [y, p, x, u, l, g]
   ), _ = useCallback(() => {
-    E(y, [g]);
-  }, [y, g, E]), A = useMemo(() => canChangeClass(h, x), [h, x]);
+    E(y, [b]);
+  }, [y, b, E]), A = useMemo(() => canChangeClass(m, x), [m, x]);
   useEffect(() => {
-    i(A, h);
-  }, [A, i, h]);
+    i(A, m);
+  }, [A, i, m]);
   const [, , S] = useCanvasWidth(), v = useCallback(
-    (f) => {
+    (h) => {
       S({
         xs: 400,
         sm: 640,
@@ -6732,18 +6676,18 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[f]);
+      }[h]);
     },
     [S]
-  ), R = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: A, canReset: h && R, 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 && !R ? "text-foreground" : ""}`, children: r(a) }) }),
+  ), R = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: A, canReset: m && R, 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] ${m && !R ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           AdvanceChoices,
           {
-            currentClass: get(h, "cls", ""),
+            currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: k,
@@ -6756,7 +6700,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: k }),
         n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${g ? "visible" : "invisible"}`, children: R ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => _(), 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" }) }) : A && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: R ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => _(), 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" }) }) : A && m ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6768,19 +6712,19 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__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(h, "mq")),
-            p && !h.dark ? "(Light mode)" : ""
+            getBreakpoint(get(m, "mq")),
+            p && !m.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => v(get(h, "mq")),
+              onClick: () => v(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(h, "mq").toUpperCase()
+                get(m, "mq").toUpperCase()
               ]
             }
           )
@@ -6797,7 +6741,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(x, "property").includes(m), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), m = useCallback((g) => map(x, "property").includes(g), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6806,7 +6750,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            r.map(({ label: m, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            r.map(({ label: g, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
@@ -6815,13 +6759,13 @@ const RangeChoices = ({ property: o, onChange: r }) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${E === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: h(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: m(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, E, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(m)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(g)) })
             ] }) }))
           ) })
         ] }),
@@ -6960,13 +6904,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const x = !get(i, "negative", !1), h = get(i, "cssProperty", "");
-      let m = parseFloat(i.dragStartValue);
-      m = isNaN(m) ? 0 : m;
+      const x = !get(i, "negative", !1), m = get(i, "cssProperty", "");
+      let g = parseFloat(i.dragStartValue);
+      g = isNaN(g) ? 0 : g;
       let E = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (E = 10);
-      let g = (i.dragStartY - u.pageY) / E + m;
-      x && g < 0 && (g = 0), h === "opacity" && g > 1 && (g = 1), i.onDrag(`${g}`), l(`${g}`);
+      (startsWith(m, "scale") || m === "opacity") && (E = 10);
+      let b = (i.dragStartY - u.pageY) / E + g;
+      x && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -7054,10 +6998,10 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  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"), [, E] = useAtom$1(draggedBlockAtom), y = (_) => {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), m = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, E] = useAtom$1(draggedBlockAtom), y = (_) => {
     const A = has(_, "styles_attrs.data-page-section");
     return _._type === "Box" && A;
-  }, g = useCallback(
+  }, b = useCallback(
     async (_) => {
       if (_.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -7090,8 +7034,8 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : g,
-        draggable: m ? "true" : "false",
+        } : b,
+        draggable: g ? "true" : "false",
         onDragStart: k,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
@@ -7101,11 +7045,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: 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 }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__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: m }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -7120,9 +7064,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, n, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((S) => S.category === "custom"), d = l.find((S) => S.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [h, m] = useState("Hero"), E = get(x, h, []), y = useRef(null), { t: g } = useTranslation(), k = (S) => {
+  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((S) => S.category === "custom"), d = l.find((S) => S.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [m, g] = useState("Hero"), E = get(x, m, []), y = useRef(null), { t: b } = useTranslation(), k = (S) => {
     y.current && (clearTimeout(y.current), y.current = null), y.current = setTimeout(() => {
-      y.current && m(S);
+      y.current && g(S);
     }, 300);
   };
   if (u)
@@ -7135,7 +7079,7 @@ const BlockCard = ({
     /* @__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 }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: g("Groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
           map(x, (S, v) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7143,13 +7087,13 @@ const BlockCard = ({
             {
               onMouseEnter: () => k(v),
               onMouseLeave: () => clearTimeout(y.current),
-              onClick: () => m(v),
+              onClick: () => g(v),
               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",
-                v === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                v === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(g(v.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(v.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7678,10 +7622,10 @@ const CoreBlock = ({
   parentId: n,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), g = () => {
     if (has(o, "blocks")) {
-      const g = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(g), n || null, a);
+      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(b), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -7691,11 +7635,11 @@ const CoreBlock = ({
       "button",
       {
         disabled: r,
-        onClick: m,
+        onClick: g,
         type: "button",
-        onDragStart: (g) => {
-          g.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), g.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            x([]), h();
+        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([]), m();
           }, 200);
         },
         draggable: E ? "true" : "false",
@@ -7763,8 +7707,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Tabs,
       {
-        onValueChange: (h) => {
-          d(""), c(h);
+        onValueChange: (m) => {
+          d(""), c(m);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7773,12 +7717,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, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
+            map(u, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: m.key, children: React__default.createElement(m.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: n, position: a }) }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: n, 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: n, position: a }) }) : null,
-          map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x, parentId: n, position: a }) }))
+          map(u, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: m.key, children: React__default.createElement(m.tabContent, { close: x, parentId: n, position: a }) }))
         ]
       }
     )
@@ -7893,14 +7837,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), h = useRef(null), m = useRef(null);
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), m = useRef(null), g = useRef(null);
   useEffect(() => {
     var y;
-    (y = h.current) == null || y.focus();
+    (y = m.current) == null || y.focus();
   }, []);
   const E = (y) => {
-    const { usage: g } = y || {};
-    !l && g && x(g), m.current = setTimeout(() => x(void 0), 1e4), l || c("");
+    const { usage: b } = y || {};
+    !l && b && x(b), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7918,14 +7862,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: h,
+          ref: m,
           value: i,
           onChange: (y) => c(y.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (y) => {
-            y.key === "Enter" && (y.preventDefault(), m.current && clearTimeout(m.current), x(void 0), n("content", o, i, E));
+            y.key === "Enter" && (y.preventDefault(), g.current && clearTimeout(g.current), x(void 0), n("content", o, i, E));
           }
         }
       ),
@@ -7935,7 +7879,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), x(void 0), n("content", o, i, E);
+              g.current && clearTimeout(g.current), x(void 0), n("content", o, i, E);
             },
             variant: "default",
             className: "w-fit",
@@ -7968,7 +7912,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (y) => {
-            m.current && clearTimeout(m.current), x(void 0), n("content", o, y, E);
+            g.current && clearTimeout(g.current), x(void 0), n("content", o, y, E);
           }
         }
       )
@@ -7978,17 +7922,17 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: h } = useToast(), m = useRef(null);
+  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: m } = useToast(), g = useRef(null);
   useEffect(() => {
     r && a(r);
   }, [r]);
   const E = async () => {
     try {
-      d(!0), u(null), await i(n), h({
+      d(!0), u(null), await i(n), m({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), m.current.click();
+      }), g.current.click();
     } catch (y) {
       u(y);
     } finally {
@@ -8004,7 +7948,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
@@ -8078,42 +8022,42 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: r = [], onAttributesChange: n }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [h, m] = useState(""), E = useRef(null), y = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [m, g] = useState(""), E = useRef(null), y = useRef(null);
   useEffect(() => {
     l(r);
   }, [r]);
-  const g = () => {
+  const b = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      g("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const v = [...a, { key: i, value: d }];
-      n(v), l(a), c(""), p(""), m("");
+      n(v), l(a), c(""), p(""), g("");
     }
   }, k = (v) => {
-    const R = a.filter((f, j) => j !== v);
+    const R = a.filter((h, j) => j !== v);
     n(R), l(R);
   }, _ = (v) => {
     x(v), c(a[v].key), p(a[v].value);
   }, A = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      g("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
       const v = [...a];
-      v[u] = { key: i, value: d }, n(v), l(v), x(null), c(""), p(""), m("");
+      v[u] = { key: i, value: d }, n(v), l(v), x(null), c(""), p(""), g("");
     }
   }, S = (v) => {
-    v.key === "Enter" && !v.shiftKey && (v.preventDefault(), u !== null ? A() : g());
+    v.key === "Enter" && !v.shiftKey && (v.preventDefault(), u !== null ? A() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (v) => {
-          v.preventDefault(), u !== null ? A() : g();
+          v.preventDefault(), u !== null ? A() : b();
         },
         className: "space-y-3",
         children: [
@@ -8156,7 +8100,7 @@ const AIUserPrompt = ({ blockId: o }) => {
             ] })
           ] }),
           /* @__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" }) }),
-          h && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: h })
+          m && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
     ),
@@ -8572,7 +8516,7 @@ const RootLayout = () => {
     y.preventDefault();
   }, u = (y) => {
     r(o === y ? null : y);
-  }, x = useSidebarMenuItems(), { t: h } = useTranslation(), m = [...x, ...c], E = useBuilderProp("htmlDir", "ltr");
+  }, x = useSidebarMenuItems(), { t: m } = useTranslation(), g = [...x, ...c], E = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: E, 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",
@@ -8583,21 +8527,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((y, g) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: g.map((y, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
-                    variant: o === g ? "default" : "ghost",
+                    variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(g),
+                    onClick: () => u(b),
                     children: get(y, "icon", null)
                   },
-                  g
+                  b
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h(y.label) }) })
-              ] }, "button" + g)) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m(y.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((y, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(y, { key: g }) })) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((y, b) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(y, { key: b }) })) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               motion.div,
@@ -8608,10 +8552,10 @@ const RootLayout = () => {
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 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: h(m[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(g, `${o}.icon`, null) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: m(g[o].label) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(g, `${o}.component`, null), {}) }) })
                 ] }) })
               }
             ),
@@ -8630,11 +8574,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" }),
                     " ",
-                    h("AI Assistant")
+                    m("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" }),
-                      h("Theme Settings")
+                      m("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Button,