@chaibuilder/sdk 1.2.113 → 1.2.114-beta.3

package/dist/{index-V7Y_OFKT.js → index-xOwty2sb.js}

@@ -30,7 +30,7 @@ import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
-import { DatabaseIcon, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, EditIcon, TrashIcon as TrashIcon$1, Check, SearchIcon, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, X, LayoutTemplate, Layers, PaintBucketIcon } from "lucide-react";
+import { DatabaseIcon, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, EditIcon, TrashIcon as TrashIcon$1, Check, X, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, LayoutTemplate, Layers, PaintBucketIcon } from "lucide-react";
 import validator from "@rjsf/validator-ajv8";
 import Form$1 from "@rjsf/core";
 import { y, s as s$1, h } from "./controls-lEwMTdPQ.js";
@@ -89,278 +89,278 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   const o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new Map();
   let a, l, i;
   (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
-  const c = (f) => o.get(f), d = (f, S) => {
-    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(S);
-    const w = o.get(f);
-    if (o.set(f, S), r.has(f) || r.set(f, w), w && hasPromiseAtomValue(w)) {
-      const A = "v" in S ? S.v instanceof Promise ? S.v : Promise.resolve(S.v) : Promise.reject(S.e);
-      cancelPromise(w.v, A);
+  const c = (m) => o.get(m), d = (m, v) => {
+    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(v);
+    const C = o.get(m);
+    if (o.set(m, v), r.has(m) || r.set(m, C), C && hasPromiseAtomValue(C)) {
+      const B = "v" in v ? v.v instanceof Promise ? v.v : Promise.resolve(v.v) : Promise.reject(v.e);
+      cancelPromise(C.v, B);
     }
-  }, u = (f, S, w) => {
-    const A = /* @__PURE__ */ new Map();
+  }, u = (m, v, C) => {
+    const B = /* @__PURE__ */ new Map();
     let I = !1;
-    w.forEach((T, D) => {
-      !T && D === f && (T = S), T ? (A.set(D, T), S.d.get(D) !== T && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (I || S.d.size !== A.size) && (S.d = A);
-  }, p = (f, S, w) => {
-    const A = c(f), I = {
-      d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
-      v: S
+    C.forEach((N, P) => {
+      !N && P === m && (N = v), N ? (B.set(P, N), v.d.get(P) !== N && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (I || v.d.size !== B.size) && (v.d = B);
+  }, p = (m, v, C) => {
+    const B = c(m), I = {
+      d: (B == null ? void 0 : B.d) || /* @__PURE__ */ new Map(),
+      v
     };
-    if (w && u(f, I, w), A && isEqualAtomValue(A, I) && A.d === I.d)
-      return A;
-    if (A && hasPromiseAtomValue(A) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(A, I)) {
-      if (A.d === I.d)
-        return A;
-      I.v = A.v;
+    if (C && u(m, I, C), B && isEqualAtomValue(B, I) && B.d === I.d)
+      return B;
+    if (B && hasPromiseAtomValue(B) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(B, I)) {
+      if (B.d === I.d)
+        return B;
+      I.v = B.v;
     }
-    return d(f, I), I;
-  }, m = (f, S, w, A) => {
-    if (isPromiseLike$2(S)) {
+    return d(m, I), I;
+  }, g = (m, v, C, B) => {
+    if (isPromiseLike$2(v)) {
       let I;
-      const T = new Promise((D, O) => {
+      const N = new Promise((P, O) => {
         let M = !1;
-        S.then(
+        v.then(
           (V) => {
             if (!M) {
               M = !0;
-              const $ = c(f), H = p(
-                f,
-                T,
-                w
+              const $ = c(m), H = p(
+                m,
+                N,
+                C
               );
-              resolvePromise(T, V), D(V), ($ == null ? void 0 : $.d) !== H.d && N(f, H, $ == null ? void 0 : $.d);
+              resolvePromise(N, V), P(V), ($ == null ? void 0 : $.d) !== H.d && T(m, H, $ == null ? void 0 : $.d);
             }
           },
           (V) => {
             if (!M) {
               M = !0;
-              const $ = c(f), H = p(
-                f,
-                T,
-                w
+              const $ = c(m), H = p(
+                m,
+                N,
+                C
               );
-              rejectPromise(T, V), O(V), ($ == null ? void 0 : $.d) !== H.d && N(f, H, $ == null ? void 0 : $.d);
+              rejectPromise(N, V), O(V), ($ == null ? void 0 : $.d) !== H.d && T(m, H, $ == null ? void 0 : $.d);
             }
           }
         ), I = (V) => {
           M || (M = !0, V.then(
-            ($) => resolvePromise(T, $),
-            ($) => rejectPromise(T, $)
-          ), D(V));
+            ($) => resolvePromise(N, $),
+            ($) => rejectPromise(N, $)
+          ), P(V));
         };
       });
-      return T.orig = S, T.status = "pending", registerCancelPromise(T, (D) => {
-        D && I(D), A == null || A();
-      }), p(f, T, w);
+      return N.orig = v, N.status = "pending", registerCancelPromise(N, (P) => {
+        P && I(P), B == null || B();
+      }), p(m, N, C);
     }
-    return p(f, S, w);
-  }, g = (f, S, w) => {
-    const A = c(f), I = {
-      d: (A == null ? void 0 : A.d) || /* @__PURE__ */ new Map(),
-      e: S
+    return p(m, v, C);
+  }, f = (m, v, C) => {
+    const B = c(m), I = {
+      d: (B == null ? void 0 : B.d) || /* @__PURE__ */ new Map(),
+      e: v
     };
-    return w && u(f, I, w), A && isEqualAtomError(A, I) && A.d === I.d ? A : (d(f, I), I);
-  }, x = (f) => {
-    const S = c(f);
-    if (S && (S.d.forEach((M, V) => {
-      V !== f && !n.has(V) && x(V);
-    }), Array.from(S.d).every(([M, V]) => {
+    return C && u(m, I, C), B && isEqualAtomError(B, I) && B.d === I.d ? B : (d(m, I), I);
+  }, x = (m) => {
+    const v = c(m);
+    if (v && (v.d.forEach((M, V) => {
+      V !== m && !n.has(V) && x(V);
+    }), Array.from(v.d).every(([M, V]) => {
       const $ = c(M);
-      return M === f || $ === V || // TODO This is a hack, we should find a better solution.
+      return M === m || $ === V || // TODO This is a hack, we should find a better solution.
       $ && !hasPromiseAtomValue($) && isEqualAtomValue($, V);
     })))
-      return S;
-    const w = /* @__PURE__ */ new Map();
-    let A = !0;
+      return v;
+    const C = /* @__PURE__ */ new Map();
+    let B = !0;
     const I = (M) => {
-      if (M === f) {
+      if (M === m) {
         const $ = c(M);
         if ($)
-          return w.set(M, $), returnAtomValue($);
+          return C.set(M, $), returnAtomValue($);
         if (hasInitialValue(M))
-          return w.set(M, void 0), M.init;
+          return C.set(M, void 0), M.init;
         throw new Error("no atom init");
       }
       const V = x(M);
-      return w.set(M, V), returnAtomValue(V);
+      return C.set(M, V), returnAtomValue(V);
     };
-    let T, D;
+    let N, P;
     const O = {
       get signal() {
-        return T || (T = new AbortController()), T.signal;
+        return N || (N = new AbortController()), N.signal;
       },
       get setSelf() {
-        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(f) && console.warn("setSelf function cannot be used with read-only atom"), !D && isActuallyWritableAtom(f) && (D = (...M) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && A && console.warn("setSelf function cannot be called in sync"), !A)
-            return B(f, ...M);
-        }), D;
+        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !P && isActuallyWritableAtom(m) && (P = (...M) => {
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && B && console.warn("setSelf function cannot be called in sync"), !B)
+            return _(m, ...M);
+        }), P;
       }
     };
     try {
-      const M = f.read(I, O);
-      return m(
-        f,
+      const M = m.read(I, O);
+      return g(
+        m,
         M,
-        w,
-        () => T == null ? void 0 : T.abort()
+        C,
+        () => N == null ? void 0 : N.abort()
       );
     } catch (M) {
-      return g(f, M, w);
+      return f(m, M, C);
     } finally {
-      A = !1;
+      B = !1;
     }
-  }, j = (f) => returnAtomValue(x(f)), E = (f) => {
-    let S = n.get(f);
-    return S || (S = R(f)), S;
-  }, b = (f, S) => !S.l.size && (!S.t.size || S.t.size === 1 && S.t.has(f)), k = (f) => {
-    const S = n.get(f);
-    S && b(f, S) && _(f);
-  }, v = (f) => {
-    const S = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), A = (T) => {
-      const D = n.get(T);
-      D == null || D.t.forEach((O) => {
-        O !== T && (S.set(
+  }, j = (m) => returnAtomValue(x(m)), E = (m) => {
+    let v = n.get(m);
+    return v || (v = R(m)), v;
+  }, b = (m, v) => !v.l.size && (!v.t.size || v.t.size === 1 && v.t.has(m)), k = (m) => {
+    const v = n.get(m);
+    v && b(m, v) && A(m);
+  }, S = (m) => {
+    const v = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new WeakMap(), B = (N) => {
+      const P = n.get(N);
+      P == null || P.t.forEach((O) => {
+        O !== N && (v.set(
           O,
-          (S.get(O) || /* @__PURE__ */ new Set()).add(T)
-        ), w.set(O, (w.get(O) || 0) + 1), A(O));
+          (v.get(O) || /* @__PURE__ */ new Set()).add(N)
+        ), C.set(O, (C.get(O) || 0) + 1), B(O));
       });
     };
-    A(f);
-    const I = (T) => {
-      const D = n.get(T);
-      D == null || D.t.forEach((O) => {
+    B(m);
+    const I = (N) => {
+      const P = n.get(N);
+      P == null || P.t.forEach((O) => {
         var M;
-        if (O !== T) {
-          let V = w.get(O);
-          if (V && w.set(O, --V), !V) {
-            let $ = !!((M = S.get(O)) != null && M.size);
+        if (O !== N) {
+          let V = C.get(O);
+          if (V && C.set(O, --V), !V) {
+            let $ = !!((M = v.get(O)) != null && M.size);
             if ($) {
               const H = c(O), U = x(O);
               $ = !H || !isEqualAtomValue(H, U);
             }
-            $ || S.forEach((H) => H.delete(O));
+            $ || v.forEach((H) => H.delete(O));
           }
           I(O);
         }
       });
     };
-    I(f);
-  }, C = (f, ...S) => {
-    let w = !0;
-    const A = (D) => returnAtomValue(x(D)), I = (D, ...O) => {
+    I(m);
+  }, w = (m, ...v) => {
+    let C = !0;
+    const B = (P) => returnAtomValue(x(P)), I = (P, ...O) => {
       let M;
-      if (D === f) {
-        if (!hasInitialValue(D))
+      if (P === m) {
+        if (!hasInitialValue(P))
           throw new Error("atom not writable");
-        const V = c(D), $ = m(D, O[0]);
-        (!V || !isEqualAtomValue(V, $)) && v(D);
+        const V = c(P), $ = g(P, O[0]);
+        (!V || !isEqualAtomValue(V, $)) && S(P);
       } else
-        M = C(D, ...O);
-      if (!w) {
+        M = w(P, ...O);
+      if (!C) {
         const V = L();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
           ($) => $({ type: "async-write", flushed: V })
         );
       }
       return M;
-    }, T = f.write(A, I, ...S);
-    return w = !1, T;
-  }, B = (f, ...S) => {
-    const w = C(f, ...S), A = L();
+    }, N = m.write(B, I, ...v);
+    return C = !1, N;
+  }, _ = (m, ...v) => {
+    const C = w(m, ...v), B = L();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (I) => I({ type: "write", flushed: A })
-    ), w;
-  }, R = (f, S) => {
-    const w = {
-      t: new Set(S && [S]),
+      (I) => I({ type: "write", flushed: B })
+    ), C;
+  }, R = (m, v) => {
+    const C = {
+      t: new Set(v && [v]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(f, w), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(f), x(f).d.forEach((A, I) => {
-      const T = n.get(I);
-      T ? T.t.add(f) : I !== f && R(I, f);
-    }), x(f), isActuallyWritableAtom(f) && f.onMount) {
-      const A = f.onMount((...I) => B(f, ...I));
-      A && (w.u = A);
+    if (n.set(m, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), x(m).d.forEach((B, I) => {
+      const N = n.get(I);
+      N ? N.t.add(m) : I !== m && R(I, m);
+    }), x(m), isActuallyWritableAtom(m) && m.onMount) {
+      const B = m.onMount((...I) => _(m, ...I));
+      B && (C.u = B);
     }
-    return w;
-  }, _ = (f) => {
-    var S;
-    const w = (S = n.get(f)) == null ? void 0 : S.u;
-    w && w(), n.delete(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(f);
-    const A = c(f);
-    A ? (hasPromiseAtomValue(A) && cancelPromise(A.v), A.d.forEach((I, T) => {
-      if (T !== f) {
-        const D = n.get(T);
-        D && (D.t.delete(f), b(T, D) && _(T));
+    return C;
+  }, A = (m) => {
+    var v;
+    const C = (v = n.get(m)) == null ? void 0 : v.u;
+    C && C(), n.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
+    const B = c(m);
+    B ? (hasPromiseAtomValue(B) && cancelPromise(B.v), B.d.forEach((I, N) => {
+      if (N !== m) {
+        const P = n.get(N);
+        P && (P.t.delete(m), b(N, P) && A(N));
       }
-    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", f);
-  }, N = (f, S, w) => {
-    const A = new Set(S.d.keys());
-    w == null || w.forEach((I, T) => {
-      if (A.has(T)) {
-        A.delete(T);
+    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", m);
+  }, T = (m, v, C) => {
+    const B = new Set(v.d.keys());
+    C == null || C.forEach((I, N) => {
+      if (B.has(N)) {
+        B.delete(N);
         return;
       }
-      const D = n.get(T);
-      D && (D.t.delete(f), b(T, D) && _(T));
-    }), A.forEach((I) => {
-      const T = n.get(I);
-      T ? T.t.add(f) : n.has(f) && R(I, f);
+      const P = n.get(N);
+      P && (P.t.delete(m), b(N, P) && A(N));
+    }), B.forEach((I) => {
+      const N = n.get(I);
+      N ? N.t.add(m) : n.has(m) && R(I, m);
     });
   }, L = () => {
-    let f;
-    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (f = /* @__PURE__ */ new Set()); r.size; ) {
-      const S = Array.from(r);
-      r.clear(), S.forEach(([w, A]) => {
-        const I = c(w);
+    let m;
+    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (m = /* @__PURE__ */ new Set()); r.size; ) {
+      const v = Array.from(r);
+      r.clear(), v.forEach(([C, B]) => {
+        const I = c(C);
         if (I) {
-          I.d !== (A == null ? void 0 : A.d) && N(w, I, A == null ? void 0 : A.d);
-          const T = n.get(w);
-          T && !// TODO This seems pretty hacky. Hope to fix it.
+          I.d !== (B == null ? void 0 : B.d) && T(C, I, B == null ? void 0 : B.d);
+          const N = n.get(C);
+          N && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (A && !hasPromiseAtomValue(A) && (isEqualAtomValue(A, I) || isEqualAtomError(A, I))) && (T.l.forEach((D) => D()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && f.add(w));
+          (B && !hasPromiseAtomValue(B) && (isEqualAtomValue(B, I) || isEqualAtomError(B, I))) && (N.l.forEach((P) => P()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(C));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
     }
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
-      return a.forEach((S) => S("state")), f;
-  }, P = (f, S) => {
-    const w = E(f), A = L(), I = w.l;
-    return I.add(S), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("sub")), l.forEach(
-      (T) => T({ type: "sub", flushed: A })
+      return a.forEach((v) => v("state")), m;
+  }, D = (m, v) => {
+    const C = E(m), B = L(), I = C.l;
+    return I.add(v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((N) => N("sub")), l.forEach(
+      (N) => N({ type: "sub", flushed: B })
     )), () => {
-      I.delete(S), k(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("unsub")), l.forEach((T) => T({ type: "unsub" })));
+      I.delete(v), k(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((N) => N("unsub")), l.forEach((N) => N({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
     get: j,
-    set: B,
-    sub: P,
+    set: _,
+    sub: D,
     // store dev methods (these are tentative and subject to change without notice)
-    dev_subscribe_store: (f, S) => S !== 2 ? (console.warn(
+    dev_subscribe_store: (m, v) => v !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
-    ), a.add(f), () => {
-      a.delete(f);
-    }) : (l.add(f), () => {
-      l.delete(f);
+    ), a.add(m), () => {
+      a.delete(m);
+    }) : (l.add(m), () => {
+      l.delete(m);
     }),
     dev_get_mounted_atoms: () => i.values(),
-    dev_get_atom_state: (f) => o.get(f),
-    dev_get_mounted: (f) => n.get(f),
-    dev_restore_atoms: (f) => {
-      for (const [w, A] of f)
-        hasInitialValue(w) && (m(w, A), v(w));
-      const S = L();
+    dev_get_atom_state: (m) => o.get(m),
+    dev_get_mounted: (m) => n.get(m),
+    dev_restore_atoms: (m) => {
+      for (const [C, B] of m)
+        hasInitialValue(C) && (g(C, B), S(C));
+      const v = L();
       l.forEach(
-        (w) => w({ type: "restore", flushed: S })
+        (C) => C({ type: "restore", flushed: v })
       );
     }
   } : {
     get: j,
-    set: B,
-    sub: P
+    set: _,
+    sub: D
   };
 };
 let defaultStore;
@@ -377,37 +377,37 @@ function splitAtom(o, n) {
         let u = r.get(c);
         if (u)
           return u;
-        const p = d && r.get(d), m = [], g = [];
+        const p = d && r.get(d), g = [], f = [];
         return c.forEach((x, j) => {
           const E = n ? n(x) : j;
-          g[j] = E;
+          f[j] = E;
           const b = p && p.atomList[p.keyList.indexOf(E)];
           if (b) {
-            m[j] = b;
+            g[j] = b;
             return;
           }
-          const k = (C) => {
-            const B = C(l), R = C(o), N = a(R, B == null ? void 0 : B.arr).keyList.indexOf(E);
-            if (N < 0 || N >= R.length) {
+          const k = (w) => {
+            const _ = w(l), R = w(o), T = a(R, _ == null ? void 0 : _.arr).keyList.indexOf(E);
+            if (T < 0 || T >= R.length) {
               const L = c[a(c).keyList.indexOf(E)];
               if (L)
                 return L;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return R[N];
-          }, v = (C, B, R) => {
-            const _ = C(l), N = C(o), P = a(N, _ == null ? void 0 : _.arr).keyList.indexOf(E);
-            if (P < 0 || P >= N.length)
+            return R[T];
+          }, S = (w, _, R) => {
+            const A = w(l), T = w(o), D = a(T, A == null ? void 0 : A.arr).keyList.indexOf(E);
+            if (D < 0 || D >= T.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const f = isFunction(R) ? R(N[P]) : R;
-            B(o, [
-              ...N.slice(0, P),
-              f,
-              ...N.slice(P + 1)
+            const m = isFunction(R) ? R(T[D]) : R;
+            _(o, [
+              ...T.slice(0, D),
+              m,
+              ...T.slice(D + 1)
             ]);
           };
-          m[j] = isWritable(o) ? atom(k, v) : atom(k);
-        }), p && p.keyList.length === g.length && p.keyList.every((x, j) => x === g[j]) ? u = p : u = { arr: c, atomList: m, keyList: g }, r.set(c, u), u;
+          g[j] = isWritable(o) ? atom(k, S) : atom(k);
+        }), p && p.keyList.length === f.length && p.keyList.every((x, j) => x === f[j]) ? u = p : u = { arr: c, atomList: g, keyList: f }, r.set(c, u), u;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
         return a(u, d == null ? void 0 : d.arr);
@@ -420,10 +420,10 @@ function splitAtom(o, n) {
             case "remove": {
               const p = c(i).indexOf(u.atom);
               if (p >= 0) {
-                const m = c(o);
+                const g = c(o);
                 d(o, [
-                  ...m.slice(0, p),
-                  ...m.slice(p + 1)
+                  ...g.slice(0, p),
+                  ...g.slice(p + 1)
                 ]);
               }
               break;
@@ -431,29 +431,29 @@ function splitAtom(o, n) {
             case "insert": {
               const p = u.before ? c(i).indexOf(u.before) : c(i).length;
               if (p >= 0) {
-                const m = c(o);
+                const g = c(o);
                 d(o, [
-                  ...m.slice(0, p),
+                  ...g.slice(0, p),
                   u.value,
-                  ...m.slice(p)
+                  ...g.slice(p)
                 ]);
               }
               break;
             }
             case "move": {
-              const p = c(i).indexOf(u.atom), m = u.before ? c(i).indexOf(u.before) : c(i).length;
-              if (p >= 0 && m >= 0) {
-                const g = c(o);
-                p < m ? d(o, [
-                  ...g.slice(0, p),
-                  ...g.slice(p + 1, m),
-                  g[p],
-                  ...g.slice(m)
+              const p = c(i).indexOf(u.atom), g = u.before ? c(i).indexOf(u.before) : c(i).length;
+              if (p >= 0 && g >= 0) {
+                const f = c(o);
+                p < g ? d(o, [
+                  ...f.slice(0, p),
+                  ...f.slice(p + 1, g),
+                  f[p],
+                  ...f.slice(g)
                 ]) : d(o, [
-                  ...g.slice(0, m),
-                  g[p],
-                  ...g.slice(m, p),
-                  ...g.slice(p + 1)
+                  ...f.slice(0, g),
+                  f[p],
+                  ...f.slice(g, p),
+                  ...f.slice(p + 1)
                 ]);
               }
               break;
@@ -473,14 +473,14 @@ function createJSONStorage(o) {
   const a = {
     getItem: (l, i) => {
       var c, d;
-      const u = (m) => {
-        if (m = m || "", n !== m) {
+      const u = (g) => {
+        if (g = g || "", n !== g) {
           try {
-            r = JSON.parse(m);
+            r = JSON.parse(g);
           } catch {
             return i;
           }
-          n = m;
+          n = g;
         }
         return r;
       }, p = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
@@ -529,8 +529,8 @@ function atomWithStorage(o, n, r = defaultStorage, a) {
   }, atom(
     (d) => d(i),
     (d, u, p) => {
-      const m = typeof p == "function" ? p(d(i)) : p;
-      return m === RESET ? (u(i, n), r.removeItem(o)) : m instanceof Promise ? m.then((g) => (u(i, g), r.setItem(o, g))) : (u(i, m), r.setItem(o, m));
+      const g = typeof p == "function" ? p(d(i)) : p;
+      return g === RESET ? (u(i, n), r.removeItem(o)) : g instanceof Promise ? g.then((f) => (u(i, f), r.setItem(o, f))) : (u(i, g), r.setItem(o, g));
     }
   );
 }
@@ -555,8 +555,8 @@ const StoreContext = createContext(void 0), useStore = (o) => {
 function useAtomValue(o, n) {
   const r = useStore(n), [[a, l, i], c] = useReducer(
     (p) => {
-      const m = r.get(o);
-      return Object.is(p[0], m) && p[1] === r && p[2] === o ? p : [m, r, o];
+      const g = r.get(o);
+      return Object.is(p[0], g) && p[1] === r && p[2] === o ? p : [g, r, o];
     },
     void 0,
     () => [r.get(o), r, o]
@@ -640,8 +640,8 @@ const getSlots = (o) => {
   return map(i, (c) => {
     const d = c, u = getSlots(d);
     return Object.keys(u).length > 0 && Object.keys(u).forEach((p) => {
-      const m = find(i, { oldId: u[p].replace("slot:", "") });
-      d[p] = `slot:${m._id}`;
+      const g = find(i, { oldId: u[p].replace("slot:", "") });
+      d[p] = `slot:${g._id}`;
     }), omit(d, ["global", "oldId"]);
   });
 }, presentBlocksAtom = atom$1([]);
@@ -747,7 +747,7 @@ const useSelectedBlocksDisplayChild = () => ({
   switch (o.type) {
     case "singular": {
       const p = o.schema;
-      return p.title && (p.title = titleWithLang(n(p.title), r, get(o, "i18n"))), p.oneOf && Array.isArray(p.oneOf) && (p.oneOf = p.oneOf.map((m) => (m.title && (m.title = n(m.title)), m))), p;
+      return p.title && (p.title = titleWithLang(n(p.title), r, get(o, "i18n"))), p.oneOf && Array.isArray(p.oneOf) && (p.oneOf = p.oneOf.map((g) => (g.title && (g.title = n(g.title)), g))), p;
     }
     case "model":
       const { properties: a, title: l } = o, i = {
@@ -756,11 +756,11 @@ const useSelectedBlocksDisplayChild = () => ({
         properties: {}
       };
       return Object.keys(a).forEach((p) => {
-        const m = a[p];
-        if (includes(["slot", "styles"], m.type))
+        const g = a[p];
+        if (includes(["slot", "styles"], g.type))
           return;
-        const g = p;
-        i.properties[g] = getBlockJSONFromSchemas(m, n, r);
+        const f = p;
+        i.properties[f] = getBlockJSONFromSchemas(g, n, r);
       }), i;
     case "list":
       const { itemProperties: c, title: d } = o, u = {
@@ -772,14 +772,14 @@ const useSelectedBlocksDisplayChild = () => ({
         }
       };
       return Object.keys(c).forEach((p) => {
-        const m = c[p];
-        if (includes(["slot", "styles"], m.type))
+        const g = c[p];
+        if (includes(["slot", "styles"], g.type))
           return;
-        const g = p;
-        u.items.properties[g] = getBlockJSONFromSchemas(m, n, r), set(
+        const f = p;
+        u.items.properties[f] = getBlockJSONFromSchemas(g, n, r), set(
           u.items,
           "title",
-          titleWithLang(get(m, "itemTitle", `${n(d)} item`), r, get(m, "i18n"))
+          titleWithLang(get(g, "itemTitle", `${n(d)} item`), r, get(g, "i18n"))
         );
       }), u;
     default:
@@ -833,8 +833,8 @@ var undomanager = { exports: {} };
     }
     let r = function() {
       let a = [], l = -1, i = 0, c = !1, d;
-      function u(p, m) {
-        return !p || typeof p[m] != "function" ? this : (c = !0, p[m](), c = !1, this);
+      function u(p, g) {
+        return !p || typeof p[g] != "function" ? this : (c = !0, p[g](), c = !1, this);
       }
       return {
         /**
@@ -861,8 +861,8 @@ var undomanager = { exports: {} };
           let p = a[l];
           if (!p)
             return this;
-          const m = p.groupId;
-          for (; p.groupId === m && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
+          const g = p.groupId;
+          for (; p.groupId === g && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -873,8 +873,8 @@ var undomanager = { exports: {} };
           let p = a[l + 1];
           if (!p)
             return this;
-          const m = p.groupId;
-          for (; p.groupId === m && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
+          const g = p.groupId;
+          for (; p.groupId === g && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -905,7 +905,7 @@ var undomanager = { exports: {} };
          * @returns {array}
          */
         getCommands: function(p) {
-          return p ? a.filter((m) => m.groupId === p) : a;
+          return p ? a.filter((g) => g.groupId === p) : a;
         },
         /**
          * Returns the index of the actions list.
@@ -1202,13 +1202,13 @@ const useBlocksStoreManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (E, b, k) => {
-      const v = map(E, (B) => {
-        const _ = n.find((P) => P._id === B)._parent || null, L = n.filter((P) => _ ? P._parent === _ : !P._parent).map((P) => P._id).indexOf(B);
-        return { _id: B, oldParent: _, oldPosition: L };
-      }), C = v.find(({ _id: B }) => B === E[0]);
-      C && C.oldParent === b && C.oldPosition === k || (i(E, b, k), o({
-        undo: () => each(v, ({ _id: B, oldParent: R, oldPosition: _ }) => {
-          i([B], R, _);
+      const S = map(E, (_) => {
+        const A = n.find((D) => D._id === _)._parent || null, L = n.filter((D) => A ? D._parent === A : !D._parent).map((D) => D._id).indexOf(_);
+        return { _id: _, oldParent: A, oldPosition: L };
+      }), w = S.find(({ _id: _ }) => _ === E[0]);
+      w && w.oldParent === b && w.oldPosition === k || (i(E, b, k), o({
+        undo: () => each(S, ({ _id: _, oldParent: R, oldPosition: A }) => {
+          i([_], R, A);
         }),
         redo: () => i(E, b, k)
       }));
@@ -1220,27 +1220,27 @@ const useBlocksStoreManager = () => {
       });
     },
     removeBlocks: (E) => {
-      var C;
-      const b = (C = first(E)) == null ? void 0 : C._parent, v = n.filter((B) => b ? B._parent === b : !B._parent).indexOf(first(E));
+      var w;
+      const b = (w = first(E)) == null ? void 0 : w._parent, S = n.filter((_) => b ? _._parent === b : !_._parent).indexOf(first(E));
       l(map(E, "_id")), o({
-        undo: () => a(E, b, v),
+        undo: () => a(E, b, S),
         redo: () => l(map(E, "_id"))
       });
     },
     updateBlocks: (E, b, k) => {
-      let v = [];
+      let S = [];
       if (k)
-        v = map(E, (C) => ({ _id: C, ...k }));
+        S = map(E, (w) => ({ _id: w, ...k }));
       else {
-        const C = keys(b);
-        v = map(E, (B) => {
-          const R = n.find((N) => N._id === B), _ = { _id: B };
-          return each(C, (N) => _[N] = R[N]), _;
+        const w = keys(b);
+        S = map(E, (_) => {
+          const R = n.find((T) => T._id === _), A = { _id: _ };
+          return each(w, (T) => A[T] = R[T]), A;
         });
       }
-      c(map(E, (C) => ({ _id: C, ...b }))), o({
-        undo: () => c(v),
-        redo: () => c(map(E, (C) => ({ _id: C, ...b })))
+      c(map(E, (w) => ({ _id: w, ...b }))), o({
+        undo: () => c(S),
+        redo: () => c(map(E, (w) => ({ _id: w, ...b })))
       });
     },
     updateBlocksRuntime: (E, b) => {
@@ -1255,8 +1255,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (E) => {
       let b = [];
       b = map(E, (k) => {
-        const v = keys(k), C = n.find((R) => R._id === k._id), B = {};
-        return each(v, (R) => B[R] = C[R]), B;
+        const S = keys(k), w = n.find((R) => R._id === k._id), _ = {};
+        return each(S, (R) => _[R] = w[R]), _;
       }), c(E), o({
         undo: () => c(b),
         redo: () => c(E)
@@ -1275,8 +1275,8 @@ const useBlocksStoreManager = () => {
           b[k]._parent = i[j]._id;
       }
       const u = first(i);
-      let p, m;
-      return c && (p = find(o, { _id: c }), i[0]._parent = c, m = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (i[0]._parent = p._parent, m = p._parent), r(i, m, d), n([(x = first(i)) == null ? void 0 : x._id]), first(i);
+      let p, g;
+      return c && (p = find(o, { _id: c }), i[0]._parent = c, g = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (i[0]._parent = p._parent, g = p._parent), r(i, g, d), n([(x = first(i)) == null ? void 0 : x._id]), first(i);
     },
     [o, n]
   );
@@ -1286,29 +1286,29 @@ const useBlocksStoreManager = () => {
         const k = i.blocks;
         return a(k, c, d);
       }
-      const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
-      forIn(p, (k, v) => {
+      const u = generateUUID(), p = getBlockDefaultProps(i.props), g = [];
+      forIn(p, (k, S) => {
         if (startsWith(k, SLOT_KEY)) {
-          const C = k.replace(SLOT_KEY, "");
-          m.push({
-            _id: C,
+          const w = k.replace(SLOT_KEY, "");
+          g.push({
+            _id: w,
             _type: "Slot",
             _parent: u,
-            _name: i.props[v].name,
-            _styles: i.props[v].styles,
-            _emptyStyles: i.props[v].emptyStyles
+            _name: i.props[S].name,
+            _styles: i.props[S].styles,
+            _emptyStyles: i.props[S].emptyStyles
           });
         }
       });
-      const g = {
+      const f = {
         _type: i.type,
         _id: u,
         ...p
       };
       let x, j;
-      c && (x = find(o, { _id: c }), g._parent = c, j = c), !canAcceptChildBlock(x == null ? void 0 : x._type, g._type) && x && (g._parent = x._parent, j = x._parent);
-      const b = [g, ...m];
-      return r(b, j, d), n([g._id]), g;
+      c && (x = find(o, { _id: c }), f._parent = c, j = c), !canAcceptChildBlock(x == null ? void 0 : x._type, f._type) && x && (f._parent = x._parent, j = x._parent);
+      const b = [f, ...g];
+      return r(b, j, d), n([f._id]), f;
     },
     [a, o, n]
   ), addPredefinedBlock: a };
@@ -2416,18 +2416,18 @@ function getNewClasses(o = "", n = "", r = []) {
   );
   const i = [], c = [];
   each(r, (p) => {
-    const m = constructClassObject(p), g = find(a, pick(m, ["dark", "mq", "mod", "property"]));
-    if (g && (a = filter(
+    const g = constructClassObject(p), f = find(a, pick(g, ["dark", "mq", "mod", "property"]));
+    if (f && (a = filter(
       a,
-      (x) => x.fullCls !== (g == null ? void 0 : g.fullCls)
-    )), i.push(m), m.mq === "xs" && !m.dark && m.mod === "" && (l = filter(l, (x) => x.property !== m.property)), getBelongsToForClass(a, m) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, m.property)) {
-      const x = find(l, pick(m, ["property"]));
-      g && (l = filter(
+      (x) => x.fullCls !== (f == null ? void 0 : f.fullCls)
+    )), i.push(g), g.mq === "xs" && !g.dark && g.mod === "" && (l = filter(l, (x) => x.property !== g.property)), getBelongsToForClass(a, g) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, g.property)) {
+      const x = find(l, pick(g, ["property"]));
+      f && (l = filter(
         l,
         (j) => j.fullCls !== (x == null ? void 0 : x.fullCls)
       )), c.push({
-        ...m,
-        fullCls: m.cls,
+        ...g,
+        fullCls: g.cls,
         mq: "xs"
       });
     }
@@ -2455,10 +2455,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: m } = getSplitClasses$1(u);
+    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: g } = getSplitClasses$1(u);
     return {
       ids: [d._id],
-      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(m, p, a)}` }
+      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(g, p, a)}` }
     };
   });
 }), useAddClassesToBlocks = () => {
@@ -2509,11 +2509,11 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
       each(a, (c) => {
         const d = o.find((x) => x._id === c);
         l || (l = d._parent);
-        const m = filter(
+        const g = filter(
           o,
           (x) => isString$1(l) ? x._parent === l : !d._parent
-        ).indexOf(d) + 1, g = getDuplicatedBlocks(o, c, l);
-        r(g, l, m), i.push(get(g, "0._id", ""));
+        ).indexOf(d) + 1, f = getDuplicatedBlocks(o, c, l);
+        r(f, l, g), i.push(get(f, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2576,19 +2576,19 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   );
   return map(i, (c) => {
     const d = o(c), u = a;
-    let { classes: p, baseClasses: m } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(u, (g) => {
-      const x = g.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${x}($| )`, "g");
+    let { classes: p, baseClasses: g } = getSplitClasses(get(d, l.prop, "styles:,"));
+    return each(u, (f) => {
+      const x = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${x}($| )`, "g");
       p = p.replace(j, " ").replace(/  +/g, " ").trim();
-      const E = first(g.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], E) && u.push(g.split(":").pop().trim());
-    }), each(u, (g) => {
-      const x = new RegExp(`(^| )${g.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
-      m = m.replace(x, " ").replace(/  +/g, " ").trim();
+      const E = first(f.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], E) && u.push(f.split(":").pop().trim());
+    }), each(u, (f) => {
+      const x = new RegExp(`(^| )${f.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
+      g = g.replace(x, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${m},${p}`
+        [l.prop]: `${STYLES_KEY}${g},${p}`
       }
     };
   });
@@ -2689,7 +2689,7 @@ const useLanguages = () => {
           let u = "";
           o([n], { [i]: "" });
           for (let p = 0; p < d.length; p++)
-            u += d[p].join(""), o([n], { [i]: u }), await new Promise((m) => setTimeout(m, a));
+            u += d[p].join(""), o([n], { [i]: u }), await new Promise((g) => setTimeout(g, a));
         }
       }
     },
@@ -2887,18 +2887,18 @@ const useBlockHighlight = () => {
     const { width: d, height: u } = o;
     if (d < n) {
       const p = parseFloat((d / n).toFixed(2).toString());
-      let m = {};
-      const g = u * p, x = d * p;
-      u && (m = {
+      let g = {};
+      const f = u * p, x = d * p;
+      u && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (u - g) / g * 100 + "%",
+        height: 100 + (u - f) / f * 100 + "%",
         width: 100 + (d - x) / x * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
         transform: `scale(${p})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
-        ...m,
+        ...g,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
       }), r(p * 100);
@@ -3071,7 +3071,7 @@ const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, u] = useAtom$1(draggedBlockAtom), [, p] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd"))
     return {};
-  const g = () => {
+  const f = () => {
     removePlaceholder(), r(!1), u(null), p(null), possiblePositions = [];
   };
   return iframeDocument = o, {
@@ -3083,17 +3083,17 @@ const useDnd = () => {
       var R;
       const j = dropTarget, b = getOrientation(j) === "vertical" ? x.clientY + ((R = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : R.scrollY) : x.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const k = d, v = j.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === v || !C) {
-        g();
+      const k = d, S = j.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === S || !w) {
+        f();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, v === "canvas" ? null : v, dropIndex), setTimeout(g, 300);
+        a(k, S === "canvas" ? null : S, dropIndex), setTimeout(f, 300);
         return;
       }
-      let B = j.getAttribute("data-block-id");
-      B === null && (B = x.target.parentElement.getAttribute("data-block-id")), c([k._id], B === "canvas" ? null : B, dropIndex), g(), setTimeout(removePlaceholder, 300);
+      let _ = j.getAttribute("data-block-id");
+      _ === null && (_ = x.target.parentElement.getAttribute("data-block-id")), c([k._id], _ === "canvas" ? null : _, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (x) => {
       const j = x, E = j.target;
@@ -3122,7 +3122,7 @@ function destroyQuill(o) {
 const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
-    var g;
+    var f;
     if (r)
       return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
@@ -3133,15 +3133,15 @@ const useHandleCanvasDblClick = () => {
       x.name !== "class" && u.removeAttribute(x.name);
     }), d === "Text" && (u.style.display = "inline-block"), c.parentNode.insertBefore(u, c.nextSibling);
     const p = new Quill(u, { placeholder: "Type here..." });
-    function m() {
+    function g() {
       const x = p.getText(0, p.getLength());
-      n([c.getAttribute("data-block-id")], { content: x }), c.removeAttribute("style"), u.removeEventListener("blur", m, !0), destroyQuill(p), a(""), l(), u.remove();
+      n([c.getAttribute("data-block-id")], { content: x }), c.removeAttribute("style"), u.removeEventListener("blur", g, !0), destroyQuill(p), a(""), l(), u.remove();
     }
-    u.addEventListener("blur", m, !0), u.addEventListener("click", (x) => {
+    u.addEventListener("blur", g, !0), u.addEventListener("click", (x) => {
       x.stopPropagation();
     }), u.addEventListener("keydown", (x) => {
-      (x.key === "Enter" || x.key === "Escape") && m();
-    }), p.focus(), (g = u.querySelector(".ql-clipboard")) == null || g.remove(), a(c.getAttribute("data-block-id"));
+      (x.key === "Enter" || x.key === "Escape") && g();
+    }), p.focus(), (f = u.querySelector(".ql-clipboard")) == null || f.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3155,8 +3155,8 @@ const useHandleCanvasDblClick = () => {
       return;
     }
     if (d != null && d.getAttribute("data-block-parent")) {
-      const u = d.getAttribute("data-style-prop"), p = d.getAttribute("data-style-id"), m = d.getAttribute("data-block-parent");
-      n.includes(m) || l == null || l.closeAll(), o([{ id: p, prop: u, blockId: m }]), r([m]);
+      const u = d.getAttribute("data-style-prop"), p = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+      n.includes(g) || l == null || l.closeAll(), o([{ id: p, prop: u, blockId: g }]), r([g]);
     } else if (d != null && d.getAttribute("data-block-id")) {
       const u = d.getAttribute("data-block-id");
       n.includes(u) || l == null || l.closeAll(), o([]), r(u === "canvas" ? [] : [u]);
@@ -3180,17 +3180,17 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const g = getElementByDataBlockId(n, first(r));
-      if (g) {
-        const x = g.getAttribute("data-style-prop");
+      const f = getElementByDataBlockId(n, first(r));
+      if (f) {
+        const x = f.getAttribute("data-style-prop");
         if (x) {
-          const j = g.getAttribute("data-style-id"), E = g.getAttribute("data-block-parent");
+          const j = f.getAttribute("data-style-id"), E = f.getAttribute("data-block-parent");
           l([{ id: j, prop: x, blockId: E }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
-  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), u = useHandleMouseMove(), p = useHandleMouseLeave(), m = useDnd();
+  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), u = useHandleMouseMove(), p = useHandleMouseLeave(), g = useDnd();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -3200,23 +3200,23 @@ const useHandleCanvasDblClick = () => {
       onDoubleClick: c,
       onMouseMove: u,
       onMouseLeave: p,
-      ...omit(m, "isDragging"),
-      className: "relative h-full max-w-full p-px " + (m.isDragging ? "dragging" : ""),
+      ...omit(g, "isDragging"),
+      className: "relative h-full max-w-full p-px " + (g.isDragging ? "dragging" : ""),
       children: o
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: m } = usePasteBlocks();
+  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: g } = usePasteBlocks();
   useHotkeys("ctrl+z,command+z", () => i(), {}, [i]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => d(n), {}, [n, d]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      p(n[0]) && m(n);
+      p(n[0]) && g(n);
     },
     {},
-    [n, p, m]
+    [n, p, g]
   );
-  const g = o ? { document: o } : {};
-  useHotkeys("esc", () => r([]), g, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...g, preventDefault: !0 }, [
+  const f = o ? { document: o } : {};
+  useHotkeys("esc", () => r([]), f, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...f, preventDefault: !0 }, [
     n,
     l
   ]), useHotkeys(
@@ -3224,7 +3224,7 @@ const useHandleCanvasDblClick = () => {
     (x) => {
       x.preventDefault(), a(n);
     },
-    g,
+    f,
     [n, a]
   );
 }, KeyboardHandler = () => {
@@ -3253,15 +3253,15 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, BlockActionsStatic = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: m } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: g } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
       reference: o
     }
   });
-  useResizeObserver(o, () => m(), o !== null);
-  const g = get(n, "_parent", null), x = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  useResizeObserver(o, () => g(), o !== null);
+  const f = get(n, "_parent", null), x = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3278,12 +3278,12 @@ const useHandleCanvasDblClick = () => {
       onKeyDown: (j) => j.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        g && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        f && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([g]);
+              c([]), l([f]);
             }
           }
         ),
@@ -3312,9 +3312,9 @@ const useHandleCanvasDblClick = () => {
 }, HeadTags = () => {
   const [o] = useBrandingOptions(), [n] = useSelectedBlockIds(), [r] = useDarkMode(), [a] = useSelectedStylingBlocks(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: d } = useFrame(), [u] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [p] = useState(
     c == null ? void 0 : c.getElementById("selected-block")
-  ), [m] = useState(
-    c == null ? void 0 : c.getElementById("selected-styling-block")
   ), [g] = useState(
+    c == null ? void 0 : c.getElementById("selected-styling-block")
+  ), [f] = useState(
     c == null ? void 0 : c.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3322,17 +3322,17 @@ const useHandleCanvasDblClick = () => {
   }, [r, c]);
   const x = get(o, "headingFont", "DM Sans"), j = get(o, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const E = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), v = get(o, "bodyBgDarkColor", "#000"), C = get(o, "bodyTextDarkColor", "#000"), B = get(o, "bodyTextLightColor", "#fff"), R = s({
+    const E = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), S = get(o, "bodyBgDarkColor", "#000"), w = get(o, "bodyTextDarkColor", "#000"), _ = get(o, "bodyTextLightColor", "#fff"), R = s({
       colors: [E, b],
       names: ["primary", "secondary"]
     });
     set(R, "primary.DEFAULT", E), set(R, "secondary.DEFAULT", b);
-    const _ = {
+    const A = {
       "bg-light": k,
-      "bg-dark": v,
-      "text-dark": C,
-      "text-light": B
-    }, N = get(o, "roundedCorners", "0");
+      "bg-dark": S,
+      "text-dark": w,
+      "text-light": _
+    }, T = get(o, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -3349,28 +3349,28 @@ const useHandleCanvasDblClick = () => {
             body: [j]
           },
           borderRadius: {
-            DEFAULT: `${N || "0"}px`
+            DEFAULT: `${T || "0"}px`
           },
-          colors: { ..._, ...R }
+          colors: { ...A, ...R }
         }
       },
       plugins: [
         typography,
         forms,
         aspectRatio,
-        plugin(function({ addBase: L, theme: P }) {
+        plugin(function({ addBase: L, theme: D }) {
           L({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: P("fontFamily.heading")
+              fontFamily: D("fontFamily.heading")
             },
             body: {
-              fontFamily: P("fontFamily.body"),
-              color: P("colors.text-light"),
-              backgroundColor: P("colors.bg-light")
+              fontFamily: D("fontFamily.body"),
+              color: D("colors.text-light"),
+              backgroundColor: D("colors.bg-light")
             },
             ".dark body": {
-              color: P("colors.text-dark"),
-              backgroundColor: P("colors.bg-dark")
+              color: D("colors.text-dark"),
+              backgroundColor: D("colors.bg-dark")
             }
           });
         })
@@ -3381,14 +3381,14 @@ const useHandleCanvasDblClick = () => {
                 outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
   }, [n, p]), useEffect(() => {
-    g.textContent = l ? `[data-block-id="${l._id}"], [data-block-id="${l._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [l, g]), useEffect(() => {
+    f.textContent = l ? `[data-block-id="${l._id}"], [data-block-id="${l._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [l, f]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(a, ({ id: E }) => `[data-style-id="${E}"]`).join(",")}{
+    g && (g.textContent = `${map(a, ({ id: E }) => `[data-style-id="${E}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [a, m]), useEffect(() => {
+  }, [a, g]), useEffect(() => {
     c.querySelector("#drop-target-block").innerHTML = i ? `[data-block-id="${i}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [i]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (x || j) && /* @__PURE__ */ jsxRuntimeExports.jsx(
     "link",
@@ -3405,11 +3405,11 @@ const useHandleCanvasDblClick = () => {
     u || (u = d, d = "xs");
     const p = r.indexOf(d);
     if (p <= a) {
-      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], g = ["hidden"];
-      if (m.includes(u))
+      const g = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], f = ["hidden"];
+      if (g.includes(u))
         for (let x = p; x < r.length; x++)
           i[x] = !0;
-      else if (g.includes(u))
+      else if (f.includes(u))
         for (let x = p; x < r.length; x++)
           i[x] = !1;
     }
@@ -3431,23 +3431,23 @@ const useHandleCanvasDblClick = () => {
   return { getRSCBlockMarkup: a, getRSCBlockState: l, reset: i };
 }, useWatchRSCBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useAtom(rscBlocksStoreAtom), [a, l] = useAtom(rscBlocksLoadingStateAtom), i = useChaiBlocks(), c = useBuilderProp("getRSCBlock", async (u) => ""), d = useMemo(() => o.filter((p) => {
-    var g;
-    return (g = get(i, p._type)) == null ? void 0 : g.server;
+    var f;
+    return (f = get(i, p._type)) == null ? void 0 : f.server;
   }).map((p) => p._id), [i, o]);
   useEffect(() => {
     forEach(d, (u) => {
       if (get(n, u, "") || get(a, `${u}.loading`, !1))
         return;
-      const p = o.find((m) => m._id === u);
-      l((m) => ({ ...m, [u]: { loading: !0, error: null } })), c(p).then((m) => {
-        r((g) => ({ ...g, [u]: m })), l((g) => ({
-          ...g,
+      const p = o.find((g) => g._id === u);
+      l((g) => ({ ...g, [u]: { loading: !0, error: null } })), c(p).then((g) => {
+        r((f) => ({ ...f, [u]: g })), l((f) => ({
+          ...f,
           [u]: { loading: !1, error: null }
         }));
-      }).catch((m) => {
-        l((g) => ({
-          ...g,
-          [u]: { loading: !1, error: m.message }
+      }).catch((g) => {
+        l((f) => ({
+          ...f,
+          [u]: { loading: !1, error: g.message }
         }));
       });
     });
@@ -3512,10 +3512,10 @@ function applyLanguage(o, n, r) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
-  const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), g = useCallback((b) => getStyleAttrs(b, d), [d]), [x] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
-    (b) => b.reduce((k, v) => {
-      const C = get(u, v, {});
-      return { ...k, ...C };
+  const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: g } = useGlobalBlocksStore(), f = useCallback((b) => getStyleAttrs(b, d), [d]), [x] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
+    (b) => b.reduce((k, S) => {
+      const w = get(u, S, {});
+      return { ...k, ...w };
     }, {}),
     [u]
   );
@@ -3523,18 +3523,18 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
     o.map((b, k) => {
       if (j === b._id || p.includes(b._id))
         return null;
-      const v = {}, C = filter(n, { _parent: b._id });
-      if (v.children = C.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: C }) : null, b._type === "GlobalBlock") {
-        const w = m(b);
-        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (A) => !A._parent), allBlocks: w });
+      const S = {}, w = filter(n, { _parent: b._id });
+      if (S.children = w.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: w }) : null, b._type === "GlobalBlock") {
+        const C = g(b);
+        S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (B) => !B._parent), allBlocks: C });
       }
-      const B = getBlockComponent(b._type), R = get(B, "server", !1), _ = R ? RSCBlock : get(B, "builderComponent", get(B, "component", null));
-      if (isNull(_))
+      const _ = getBlockComponent(b._type), R = get(_, "server", !1), A = R ? RSCBlock : get(_, "builderComponent", get(_, "component", null));
+      if (isNull(A))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
-      const N = has(B, "getBlockStateFrom") ? B == null ? void 0 : B.getBlockStateFrom(b, n) : [], L = E(N), P = g(b);
-      if (get(P, "__isHidden", !1) && !includes(a, b._id))
+      const T = has(_, "getBlockStateFrom") ? _ == null ? void 0 : _.getBlockStateFrom(b, n) : [], L = E(T), D = f(b);
+      if (get(D, "__isHidden", !1) && !includes(a, b._id))
         return null;
-      const f = i && isDescendant(i._id, b._id, n), S = {
+      const m = i && isDescendant(i._id, b._id, n), v = {
         ...includes(a, b._id) ? { "force-show": "" } : {},
         "data-block-id": b._id,
         "data-block-type": b._type,
@@ -3542,18 +3542,18 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
           // @ts-ignore
           {
             "data-dnd": canAcceptChildBlock(b._type, i == null ? void 0 : i._type) ? "yes" : "no",
-            "data-dnd-dragged": i._id === b._id || f ? "yes" : "no"
+            "data-dnd-dragged": i._id === b._id || m ? "yes" : "no"
           }
         ) : {},
-        ...c === b._id && !f ? { "data-drop": "yes" } : {},
+        ...c === b._id && !m ? { "data-drop": "yes" } : {},
         ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
       };
-      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: S }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(_, {
-        blockProps: S,
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
+        blockProps: v,
         index: k,
-        ...applyBindings(applyLanguage(b, r, B), x),
-        ...omit(P, ["__isHidden"]),
-        ...v,
+        ...applyBindings(applyLanguage(b, r, _), x),
+        ...omit(D, ["__isHidden"]),
+        ...S,
         inBuilder: !0,
         blockState: L
       }) });
@@ -3609,43 +3609,43 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   };
   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, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [m, g] = useState([]), [, x] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [E, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), C = (_) => {
-    u((N) => ({ ...N, width: _ }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [g, f] = useState([]), [, x] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [E, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), w = (A) => {
+    u((T) => ({ ...T, width: A }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: _, clientHeight: N } = c.current;
-    u({ width: _, height: N });
+    const { clientWidth: A, clientHeight: T } = c.current;
+    u({ width: A, height: T });
   }, [c, n]);
-  const B = (_, N = 0) => {
-    const { top: L } = _.getBoundingClientRect();
-    return L + N >= 0 && L - N <= window.innerHeight;
+  const _ = (A, T = 0) => {
+    const { top: L } = A.getBoundingClientRect();
+    return L + T >= 0 && L - T <= window.innerHeight;
   };
   useEffect(() => {
-    var _, N;
+    var A, T;
     if (a && a.type !== "Multiple" && i.current) {
       const L = getElementByDataBlockId(i.current.contentDocument, a._id);
-      L && (B(L) || (N = (_ = i.current) == null ? void 0 : _.contentWindow) == null || N.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
+      L && (_(L) || (T = (A = i.current) == null ? void 0 : A.contentWindow) == null || T.scrollTo({ top: L.offsetTop, behavior: "smooth" }), f([L]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(E) && i.current) {
-      const _ = getElementByStyleId(
+      const A = getElementByStyleId(
         i.current.contentDocument,
         first(E).id
       );
-      x(_ ? [_] : [null]);
+      x(A ? [A] : [null]);
     } else
       x([null]);
   }, [E]);
   const R = useMemo(() => {
-    let _ = IframeInitialContent;
-    return _ = _.replace("__HTML_DIR__", v), o === "offline" && (_ = _.replace(
+    let A = IframeInitialContent;
+    return A = A.replace("__HTML_DIR__", S), o === "offline" && (A = A.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), _ = _.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), _ = _.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), _;
-  }, [o, v]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), A = A.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), A = A.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), A;
+  }, [o, S]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -3669,7 +3669,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
               BlockActionsStatic,
               {
                 block: a,
-                selectedBlockElement: first(m)
+                selectedBlockElement: first(g)
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, {}),
@@ -3785,7 +3785,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-ouljm9CI.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-boaZFqJd.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -3860,20 +3860,20 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   showHeading: o = !0,
   className: n = ""
 }) => {
-  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, _) => {
-    _ && (a(R), i.current = R);
+  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, A) => {
+    A && (a(R), i.current = R);
   }, {
     bodyFont: u,
     headingFont: p,
-    primaryColor: m,
-    bodyTextDarkColor: g,
+    primaryColor: g,
+    bodyTextDarkColor: f,
     bodyTextLightColor: x,
     bodyBgDarkColor: j,
     secondaryColor: E,
     bodyBgLightColor: b,
     roundedCorners: k
   } = r;
-  let v = {
+  let S = {
     headingFont: y({
       title: c("Theme Config.Heading Font"),
       default: p,
@@ -3888,18 +3888,18 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       title: c("Theme Config.Rounded Corner"),
       default: parseInt(k || 5, 10)
     }),
-    primaryColor: h({ title: c("Theme Config.Primary"), default: m }),
+    primaryColor: h({ title: c("Theme Config.Primary"), default: g }),
     secondaryColor: h({ title: c("Theme Config.Secondary"), default: E })
   };
-  l || (v = {
-    ...v,
+  l || (S = {
+    ...S,
     bodyBgLightColor: h({
       title: c("Theme Config.Background"),
       default: b
     }),
     bodyTextLightColor: h({
       title: c("Theme Config.Text Color"),
-      default: g
+      default: f
     }),
     bodyBgDarkColor: h({
       title: c("Theme Config.Background Dark Mode"),
@@ -3910,13 +3910,13 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       default: x
     })
   });
-  const C = {
+  const w = {
     type: "object",
     properties: {}
-  }, B = {};
-  return Object.keys(v).forEach((R) => {
-    const _ = v[R];
-    return C.properties || (C.properties = {}), C.properties[R] = _.schema, B[R] = _.uiSchema, !0;
+  }, _ = {};
+  return Object.keys(S).forEach((R) => {
+    const A = S[R];
+    return w.properties || (w.properties = {}), w.properties[R] = A.schema, _[R] = A.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", n), children: [
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: c("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3928,8 +3928,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         omitExtraData: !0,
         liveOmit: !0,
         liveValidate: !0,
-        uiSchema: B,
-        schema: C,
+        uiSchema: _,
+        schema: w,
         formData: r,
         validator,
         onChange: d
@@ -4112,34 +4112,34 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let u = null;
-  const p = o.children.length > 0, { highlightBlock: m, clearHighlight: g } = useBlockHighlight(), { id: x, data: j, isSelected: E, willReceiveDrop: b, isDragging: k, isEditing: v, handleClick: C } = o, B = (f) => {
-    f.stopPropagation(), !i.includes(x) && o.toggle();
-  }, R = (f) => {
-    f.isInternal && (u = f.isOpen, f.isOpen && f.close());
-  }, _ = (f) => {
-    f.isInternal && u !== null && (u ? f.open() : f.close(), u = null);
-  }, N = (f) => {
-    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), C(f);
+  const p = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: x, data: j, isSelected: E, willReceiveDrop: b, isDragging: k, isEditing: S, handleClick: w } = o, _ = (m) => {
+    m.stopPropagation(), !i.includes(x) && o.toggle();
+  }, R = (m) => {
+    m.isInternal && (u = m.isOpen, m.isOpen && m.close());
+  }, A = (m) => {
+    m.isInternal && u !== null && (u ? m.open() : m.close(), u = null);
+  }, T = (m) => {
+    m.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), w(m);
   };
   useEffect(() => {
-    const f = setTimeout(() => {
+    const m = setTimeout(() => {
       b && !o.isOpen && !k && !i.includes(x) && o.toggle();
     }, 500);
-    return () => clearTimeout(f);
+    return () => clearTimeout(m);
   }, [b, o, k]);
   const L = useMemo(() => {
-    const f = Object.keys(j), S = [];
-    for (let w = 0; w < f.length; w++)
-      if (f[w].endsWith("_attrs")) {
-        const A = j[f[w]], I = Object.keys(A).join("|");
-        I.match(/x-data/) && S.push("data"), I.match(/x-on/) && S.push("event"), I.match(/x-show|x-if/) && S.push("show");
+    const m = Object.keys(j), v = [];
+    for (let C = 0; C < m.length; C++)
+      if (m[C].endsWith("_attrs")) {
+        const B = j[m[C]], I = Object.keys(B).join("|");
+        I.match(/x-data/) && v.push("data"), I.match(/x-on/) && v.push("event"), I.match(/x-show|x-if/) && v.push("show");
       }
-    return S;
-  }, [j]), P = (f, S) => {
-    const w = d.contentDocument || d.contentWindow.document, A = w.querySelector(`[data-block-id=${f}]`);
-    A && A.setAttribute("data-drop", S);
-    const I = A.getBoundingClientRect(), T = d.getBoundingClientRect();
-    I.top >= T.top && I.left >= T.left && I.bottom <= T.bottom && I.right <= T.right || (w.documentElement.scrollTop = A.offsetTop - T.top);
+    return v;
+  }, [j]), D = (m, v) => {
+    const C = d.contentDocument || d.contentWindow.document, B = C.querySelector(`[data-block-id=${m}]`);
+    B && B.setAttribute("data-drop", v);
+    const I = B.getBoundingClientRect(), N = d.getBoundingClientRect();
+    I.top >= N.top && I.left >= N.left && I.bottom <= N.bottom && I.right <= N.right || (C.documentElement.scrollTop = B.offsetTop - N.top);
   };
   return x === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4154,22 +4154,22 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: x, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      onMouseEnter: () => m(x),
-      onMouseLeave: () => g(),
-      onClick: N,
+      onMouseEnter: () => g(x),
+      onMouseLeave: () => f(),
+      onClick: T,
       style: n,
       "data-node-id": x,
       ref: i.includes(x) ? null : r,
       onDragStart: () => R(o),
-      onDragEnd: () => _(o),
-      onDragOver: (f) => {
-        f.preventDefault(), P(x, "yes");
+      onDragEnd: () => A(o),
+      onDragOver: (m) => {
+        m.preventDefault(), D(x, "yes");
       },
-      onDragLeave: (f) => {
-        f.preventDefault(), P(x, "no");
+      onDragLeave: (m) => {
+        m.preventDefault(), D(x, "no");
       },
-      onDrop: (f) => {
-        f.preventDefault(), P(x, "no");
+      onDrop: (m) => {
+        m.preventDefault(), D(x, "no");
       },
       className: cn(
         "group flex !h-full w-full items-center justify-between space-x-px !rounded py-px text-foreground/80 outline-none",
@@ -4184,17 +4184,17 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             "div",
             {
               className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center text-xs transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: B, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: j == null ? void 0 : j._type }) }),
-            v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
-                onDoubleClick: (f) => {
-                  f.stopPropagation(), o.edit(), o.deselect();
+                onDoubleClick: (m) => {
+                  m.stopPropagation(), o.edit(), o.deselect();
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (j == null ? void 0 : j._name) || (j == null ? void 0 : j._type.split("/").pop()) }),
@@ -4207,16 +4207,16 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1 pr-2 group-hover:visible", children: [
-          !i.includes(x) && a.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          !i.includes(x) && a.map((m) => /* @__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(f.item, { blockId: x })
+                children: React__default.createElement(m.item, { blockId: x })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: f.tooltip })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: m.tooltip })
           ] })),
           canAddChildBlock(j == null ? void 0 : j._type) && !i.includes(x) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4234,8 +4234,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
-                onClick: (f) => {
-                  f.stopPropagation(), c(x), o.isOpen && o.toggle();
+                onClick: (m) => {
+                  m.stopPropagation(), c(x), o.isOpen && o.toggle();
                 },
                 className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-black",
                 asChild: !0,
@@ -4577,7 +4577,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var u, p, m, g, x, j, E, b;
+  var u, p, g, f, x, j, E, b;
   if (r.type === "comment")
     return [];
   let a = { _id: generateUUID() };
@@ -4594,7 +4594,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const k = r.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
+    const k = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
     k && (a._name = k.value);
   }
   if (i)
@@ -4612,14 +4612,14 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      href: ((u = l.find((v) => v.key === "href")) == null ? void 0 : u.value) || "",
-      hrefType: ((p = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
-      autoplay: ((m = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
-      maxWidth: ((x = (g = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : g.value) == null ? void 0 : x.replace("px", "")) || "",
-      backdropColor: ((j = l.find((v) => v.key === "data-overlay")) == null ? void 0 : j.value) || "",
-      galleryName: ((E = l.find((v) => v.key === "data-gall")) == null ? void 0 : E.value) || ""
-    }, forEach(k, (v) => {
-      has(a, `styles_attrs.${v}`) && delete a.styles_attrs[v];
+      href: ((u = l.find((S) => S.key === "href")) == null ? void 0 : u.value) || "",
+      hrefType: ((p = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
+      autoplay: ((g = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : g.value) === "true",
+      maxWidth: ((x = (f = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : x.replace("px", "")) || "",
+      backdropColor: ((j = l.find((S) => S.key === "data-overlay")) == null ? void 0 : j.value) || "",
+      galleryName: ((E = l.find((S) => S.key === "data-gall")) == null ? void 0 : E.value) || ""
+    }, forEach(k, (S) => {
+      has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
   }
   if (a._type === "Input") {
@@ -4629,8 +4629,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     const k = stringify([r]);
     return hasVideoEmbed(k) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(k)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = k, [a];
   } else if (r.tagName === "svg") {
-    const k = find(r.attributes, { key: "height" }), v = find(r.attributes, { key: "width" }), C = get(k, "value") ? `[${get(k, "value")}px]` : "24px", B = get(v, "value") ? `[${get(v, "value")}px]` : "24px", R = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${B} h-${C}`, R)}`.trim(), r.attributes = filter(r.attributes, (_) => !includes(["style", "width", "height", "class"], _.key)), a.icon = stringify([r]), [a];
+    const k = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), w = get(k, "value") ? `[${get(k, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", R = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${w}`, R)}`.trim(), r.attributes = filter(r.attributes, (A) => !includes(["style", "width", "height", "class"], A.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((b = n.block) == null ? void 0 : b._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -4691,14 +4691,14 @@ function ExpandableObject(o) {
     level: d,
     style: u,
     shouldExpandNode: p,
-    clickToExpandNode: m
+    clickToExpandNode: g
   } = o;
-  const g = useRef(!1), [x, j, E] = useBool(() => p(d, r, n));
+  const f = useRef(!1), [x, j, E] = useBool(() => p(d, r, n));
   useEffect(() => {
-    g.current ? E(p(d, r, n)) : g.current = !0;
+    f.current ? E(p(d, r, n)) : f.current = !0;
   }, [p]);
-  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", v = useComponentId(), C = d + 1, B = a.length - 1, R = (_) => {
-    _.key === " " && (_.preventDefault(), j());
+  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", S = useComponentId(), w = d + 1, _ = a.length - 1, R = (A) => {
+    A.key === " " && (A.preventDefault(), j());
   };
   return /* @__PURE__ */ createElement("div", {
     className: u.basicChildStyle,
@@ -4711,8 +4711,8 @@ function ExpandableObject(o) {
     tabIndex: 0,
     "aria-label": k,
     "aria-expanded": x,
-    "aria-controls": x ? v : void 0
-  }), n && (m ? /* @__PURE__ */ createElement("span", {
+    "aria-controls": x ? S : void 0
+  }), n && (g ? /* @__PURE__ */ createElement("span", {
     className: u.clickableLabel,
     onClick: j,
     onKeyDown: R,
@@ -4723,16 +4723,16 @@ function ExpandableObject(o) {
   }, n, ":")), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
   }, i), x ? /* @__PURE__ */ createElement("div", {
-    id: v
-  }, a.map((_, N) => /* @__PURE__ */ createElement(DataRender, {
-    key: _[0] || N,
-    field: _[0],
-    value: _[1],
+    id: S
+  }, a.map((A, T) => /* @__PURE__ */ createElement(DataRender, {
+    key: A[0] || T,
+    field: A[0],
+    value: A[1],
     style: u,
-    lastElement: N === B,
-    level: C,
+    lastElement: T === _,
+    level: w,
     shouldExpandNode: p,
-    clickToExpandNode: m
+    clickToExpandNode: g
   }))) : /* @__PURE__ */ createElement("span", {
     className: u.collapsedContent,
     onClick: j,
@@ -4894,7 +4894,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataType: i,
   appliedBindings: c
 }) => {
-  const { paths: d, pathsType: u } = getPathAndTypes(a), p = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, m = o === "PROP", [g, x] = useState(!1), j = useMemo(() => o === "PROP" ? d.filter(
+  const { paths: d, pathsType: u } = getPathAndTypes(a), p = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, g = o === "PROP", [f, x] = useState(!1), j = useMemo(() => o === "PROP" ? d.filter(
     (E) => !includes(c, E) && get(p, `props.${first(split(E, "."))}.binding`)
   ) : d.filter((E) => i === get(u, E, "")), [o, d, c, i, p]);
   return useEffect(() => {
@@ -4902,7 +4902,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   }, [n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: startCase(toLower(o)) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open: g, onOpenChange: x, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open: f, onOpenChange: x, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
@@ -4911,7 +4911,7 @@ const ViewData = ({ data: o, fullView: n }) => {
             className: ` ${isEmpty(n) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
             children: n ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "pr-8 text-sm", children: [
-                m && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(i) }),
+                g && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(i) }),
                 n
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
@@ -4929,7 +4929,7 @@ const ViewData = ({ data: o, fullView: n }) => {
               CommandItem,
               {
                 value: E,
-                className: `cursor-pointer ${m ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
+                className: `cursor-pointer ${g ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
                 onSelect: (b) => {
                   r(find(j, (k) => k === b) || null), x(!1);
                 },
@@ -4938,7 +4938,7 @@ const ViewData = ({ data: o, fullView: n }) => {
                     /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: `h-4 w-4 text-green-500 ${n === E ? "" : "opacity-0"}` }),
                     E
                   ] }),
-                  m ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(u, E, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, E) }) })
+                  g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(u, E, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, E) }) })
                 ]
               },
               E
@@ -4947,7 +4947,7 @@ const ViewData = ({ data: o, fullView: n }) => {
         ] }) })
       ] })
     ] }),
-    !m && !isEmpty(n) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, n, ""), fullView: !0 }) })
+    !g && !isEmpty(n) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, n, ""), fullView: !0 }) })
   ] });
 }, AddBindingModalContent = ({
   appliedBindings: o = [],
@@ -4955,7 +4955,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   editMode: r,
   item: a
 }) => {
-  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), m = useCallback(
+  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), g = useCallback(
     (j, E) => {
       if (isEmpty(j))
         return "";
@@ -4968,7 +4968,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     },
     [u, p]
-  ), [g, x] = useState(r ? m(a.key, "PROP") : "");
+  ), [f, x] = useState(r ? g(a.key, "PROP") : "");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Add Data Binding" }),
@@ -4984,11 +4984,11 @@ const ViewData = ({ data: o, fullView: n }) => {
           value: l,
           setValue: i,
           onChange: (j) => {
-            const E = m(j, "PROP");
-            i(j), g !== E && d(""), x(E);
+            const E = g(j, "PROP");
+            i(j), f !== E && d(""), x(E);
           },
           data: u,
-          dataType: g,
+          dataType: f,
           appliedBindings: o
         }
       ),
@@ -5002,11 +5002,11 @@ const ViewData = ({ data: o, fullView: n }) => {
           value: c,
           setValue: d,
           onChange: (j) => {
-            const E = m(j, "PATH");
-            d(g === E ? j : "");
+            const E = g(j, "PATH");
+            d(f === E ? j : "");
           },
           data: p,
-          dataType: g,
+          dataType: f,
           appliedBindings: o
         }
       )
@@ -5046,14 +5046,14 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataProvider: l,
   appliedBindings: i
 }) => {
-  const [c, d] = useState("string"), u = (p, m) => {
+  const [c, d] = useState("string"), u = (p, g) => {
     if (isEmpty(p))
       return "";
     {
-      const g = get(m === "PROP" ? a : l, p, "");
-      if (isArray$1(g))
+      const f = get(g === "PROP" ? a : l, p, "");
+      if (isArray$1(f))
         return "list";
-      const x = typeof g;
+      const x = typeof f;
       return x === "string" ? "text" : x === "object" ? "model" : x;
     }
   };
@@ -5075,32 +5075,32 @@ const ViewData = ({ data: o, fullView: n }) => {
   ] });
 }, DataBindingSetting = ({ bindingData: o, onChange: n }) => {
   const r = useSelectedBlock(), [a] = useChaiExternalData(), l = getChaiDataProviders(), [i, c] = useState(
-    map(o, (g, x) => ({ key: x, value: g }))
+    map(o, (f, x) => ({ key: x, value: f }))
   );
   useEffect(() => {
-    c(map(o, (g, x) => ({ key: x, value: g })));
+    c(map(o, (f, x) => ({ key: x, value: f })));
   }, [r == null ? void 0 : r._id, o]);
   const d = useMemo(() => {
     if (isEmpty(a))
       return !0;
     if (isEmpty(i))
       return !1;
-    const g = last(i);
-    return isEmpty(g == null ? void 0 : g.key) || isEmpty(g == null ? void 0 : g.value);
-  }, [a, i]), u = (g) => {
-    const x = filter(i, (j) => j.key !== g.key);
-    c([...x, g]), m([...x, g]);
-  }, p = (g) => {
-    const x = filter(i, (j, E) => g !== E);
-    m([...x]);
-  }, m = useCallback(
-    (g = []) => {
-      if (c(g), isEmpty(g)) {
+    const f = last(i);
+    return isEmpty(f == null ? void 0 : f.key) || isEmpty(f == null ? void 0 : f.value);
+  }, [a, i]), u = (f) => {
+    const x = filter(i, (j) => j.key !== f.key);
+    c([...x, f]), g([...x, f]);
+  }, p = (f) => {
+    const x = filter(i, (j, E) => f !== E);
+    g([...x]);
+  }, g = useCallback(
+    (f = []) => {
+      if (c(f), isEmpty(f)) {
         n({});
         return;
       }
       const x = {};
-      forEach(g, (j) => {
+      forEach(f, (j) => {
         !isEmpty(j == null ? void 0 : j.key) && !isEmpty(j == null ? void 0 : j.value) && set(x, j.key, j.value);
       }), n(x);
     },
@@ -5111,17 +5111,17 @@ const ViewData = ({ data: o, fullView: n }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-    map(i, (g, x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    map(i, (f, x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       NewDataBindingPair,
       {
-        item: g,
+        item: f,
         onAddBinding: u,
         onRemove: () => p(x),
         selectedBlock: r,
         dataProvider: a,
         appliedBindings: map(i, "key")
       },
-      g.key
+      f.key
     )),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 200, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { disabled: isEmpty(a), className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5210,7 +5210,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-nDgC7Fr9.js")), UploadImages = React__default.lazy(() => import("./UploadImages-9KvJB0jW.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-HB4yl97_.js")), UploadImages = React__default.lazy(() => import("./UploadImages--hbSU70S.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5304,79 +5304,112 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
   collections: n,
   onChange: r
 }) => {
-  var k;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (v, C) => []), [i, c] = useState(""), [d, u] = useState("pages"), [p, m] = useState(""), [g, x] = useState([]), j = (k = n == null ? void 0 : n.find((v) => v.key === d)) == null ? void 0 : k.name;
+  var D;
+  console.log(o, "formData");
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, v) => []), [i, c] = useState(""), [d, u] = useState(!1), [p, g] = useState("pages"), [f, x] = useState(""), [j, E] = useState([]), [b, k] = useState(-1), S = useRef(null), w = (D = n == null ? void 0 : n.find((m) => m.key === p)) == null ? void 0 : D.name;
   useEffect(() => {
-    const v = split((o == null ? void 0 : o.href) || "", ":"), C = get(v, 1, "pages") || "pages";
-    u(C), m(""), x([]), (async () => {
+    const m = split((o == null ? void 0 : o.href) || "", ":"), v = get(m, 1, "pages") || "pages";
+    g(v), x(""), E([]), k(-1), (async () => {
       c("FETCHING_INIT_VALUE");
-      const B = await l(C, [get(v, 2, "pages")]);
-      B && Array.isArray(B) && m(get(B, [0, "name"], "")), c("");
+      const C = await l(v, [get(m, 2, "pages")]);
+      C && Array.isArray(C) && x(get(C, [0, "name"], "")), c("");
     })();
-  }, [o.href]);
-  const E = useCallback(
-    debounce(async (v) => {
-      if (isEmpty(v))
-        x([]);
+  }, [o == null ? void 0 : o.href]);
+  const _ = useCallback(
+    debounce(async (m) => {
+      if (isEmpty(m))
+        E([]);
       else {
-        const C = await l(d, v);
-        x(C);
+        const v = await l(p, m);
+        E(v);
       }
-      c("");
+      c(""), k(-1);
     }, 300),
-    [d]
-  ), b = (v) => {
-    const C = ["collection", d, v.id];
-    C[1] && r({ ...o, href: C.join(":") });
+    [p]
+  ), R = (m) => {
+    const v = ["collection", p, m.id];
+    v[1] && (r({ ...o, href: v.join(":") }), u(!1));
+  }, A = (m) => {
+    switch (m.key) {
+      case "ArrowDown":
+        m.preventDefault(), k((v) => v < j.length - 1 ? v + 1 : v);
+        break;
+      case "ArrowUp":
+        m.preventDefault(), k((v) => v > 0 ? v - 1 : v);
+        break;
+      case "Enter":
+        if (m.preventDefault(), j.length === 0)
+          return;
+        b >= 0 && R(j[b]);
+        break;
+      case "Escape":
+        m.preventDefault(), T();
+        break;
+    }
+  };
+  useEffect(() => {
+    if (b >= 0 && S.current) {
+      const m = S.current.children[b];
+      m == null || m.scrollIntoView({ block: "nearest" });
+    }
+  }, [b]);
+  const T = () => {
+    x(""), E([]), k(-1), u(!1), r({ ...o, href: "" });
+  }, L = (m) => {
+    x(m), u(!isEmpty(m)), c("FETCHING_COLLECTION_ITEMS"), _(m);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: d, onChange: (v) => u(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: v.key, children: v.name }, v.key)) }),
-    d && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative mt-2 flex items-center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: p, onChange: (m) => g(m.target.value), children: map(n, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: m.key, children: m.name }, m.key)) }),
+    p && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           type: "text",
-          value: p,
-          onChange: (v) => {
-            m(v.target.value), c("FETCHING_COLLECTION_ITEMS"), E(v.target.value);
-          },
-          placeholder: a(`Search ${j}`),
+          value: f,
+          onChange: (m) => L(m.target.value),
+          onKeyDown: A,
+          placeholder: a(`Search ${w}`),
           disabled: i === "FETCHING_INIT_VALUE",
-          className: "w-full rounded-md border border-gray-300 p-2"
+          className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { className: "absolute right-2 top-2 hidden h-5 w-5 pt-0.5 text-gray-400 group-hover:block" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: T, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    i === "FETCHING_COLLECTION_ITEMS" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 pt-2", children: [
+    (i === "FETCHING_COLLECTION_ITEMS" || !isEmpty(j) || d && isEmpty(j)) && /* @__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 === "FETCHING_COLLECTION_ITEMS" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : !isEmpty(g) && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "mt-2 max-h-40 overflow-y-auto rounded-md border border-gray-300", children: map(g == null ? void 0 : g.slice(0, 20), (v) => {
+    ] }) : d && isEmpty(j) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+      a("No results found for"),
+      ' "',
+      f,
+      '"'
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: S, children: map(j == null ? void 0 : j.slice(0, 20), (m, v) => {
       var C;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
-          onClick: () => b(v),
-          className: `cursor-pointer p-2 text-xs ${(C = o == null ? void 0 : o.href) != null && C.includes(v.id) ? "bg-blue-200" : "hover:bg-gray-100"}`,
+          onClick: () => R(m),
+          className: `cursor-pointer p-2 text-xs ${(C = o == null ? void 0 : o.href) != null && C.includes(m.id) ? "bg-blue-200" : v === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
           children: [
-            v.name,
+            m.name,
             " ",
-            v.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
+            m.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
               "( ",
-              v.slug,
+              m.slug,
               " )"
             ] })
           ]
         },
-        v.id
+        m.id
       );
-    }) })
+    }) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
-  const { t: a } = useTranslation(), { type: l = "page", href: i = "#", target: c = "self" } = n, d = useBuilderProp("collections", []);
+  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = n, d = useBuilderProp("collections", []), u = l === "collection" && isEmpty(d) ? "url" : l;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: (o == null ? void 0 : o.title) ?? "Link" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (u) => r({ ...n, type: u.target.value }), children: map(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (p) => r({ ...n, type: p.target.value }), children: map(
         [
           ...isEmpty(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
           { const: "url", title: a("Open URL") },
@@ -5384,9 +5417,9 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           { const: "telephone", title: a("Call Phone") },
           { const: "scroll", title: a("Scroll to element") }
         ],
-        (u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.const, children: u.title }, u.const)
+        (p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.const, children: p.title }, p.const)
       ) }),
-      l === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionField, { formData: n, collections: d, onChange: r }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      u === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionField, { formData: n, collections: d, onChange: r }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           autoCapitalize: "off",
@@ -5395,13 +5428,13 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           name: "href",
           type: "text",
           value: i,
-          onChange: (u) => r({ ...n, href: u.target.value }),
+          onChange: (p) => r({ ...n, href: p.target.value }),
           placeholder: a(
             l === "page" || l === "url" ? "Enter URL" : l === "scroll" ? "#ElementID" : "Enter details"
           )
         }
       ),
-      l === "url" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
+      u === "url" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -5438,7 +5471,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
 }, JSONForm = memo(({ id: o, properties: n, formData: r, onChange: a }) => {
-  const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: u } = useTranslation(), { selectedLang: p, fallbackLang: m, languages: g } = useLanguages(), x = g.length === 0 ? "" : p.length ? p : m;
+  const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: u } = useTranslation(), { selectedLang: p, fallbackLang: g, languages: f } = useLanguages(), x = f.length === 0 ? "" : p.length ? p : g;
   Object.keys(n).forEach((E) => {
     const b = n[E];
     if (includes(["slot", "styles"], b.type))
@@ -5547,28 +5580,28 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: b }, k, v) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = useBuilderProp("dataBindingSupport", !1), p = ({ formData: b }, k, S) => {
     if (k && (c == null ? void 0 : c._id) === n._id) {
-      const C = k.replace("root.", "");
-      a([n._id], { [C]: get(b, C) }, v);
+      const w = k.replace("root.", "");
+      a([n._id], { [w]: get(b, w) }, S);
     }
-  }, m = useCallback(
-    debounce(({ formData: b }, k, v) => {
-      p({ formData: b }, k, v), d(b);
+  }, g = useCallback(
+    debounce(({ formData: b }, k, S) => {
+      p({ formData: b }, k, S), d(b);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), g = ({ formData: b }, k) => {
+  ), f = ({ formData: b }, k) => {
     if (k) {
-      const v = k.replace("root.", "");
+      const S = k.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(v, get(b, v.split(".")))
-      ), m({ formData: b }, k, { [v]: get(c, v) });
+        convertDotNotationToObject(S, get(b, S.split(".")))
+      ), g({ formData: b }, k, { [S]: get(c, S) });
     }
   }, x = keys(get(i, "_bindings", {})), j = useMemo(() => {
     const b = cloneDeep(get(l, "props", {}));
-    return each(b, (k, v) => {
-      get(k, "hidden", !1) && delete b[v];
+    return each(b, (k, S) => {
+      get(k, "hidden", !1) && delete b[S];
     }), u && each(x, (k) => delete b[k]), b;
   }, [l, x, u]), E = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
@@ -5610,7 +5643,7 @@ function BlockSettings() {
             JSONForm,
             {
               id: n == null ? void 0 : n._id,
-              onChange: g,
+              onChange: f,
               formData: i,
               properties: j
             }
@@ -5621,7 +5654,7 @@ function BlockSettings() {
       JSONForm,
       {
         id: n == null ? void 0 : n._id,
-        onChange: g,
+        onChange: f,
         formData: i,
         properties: j
       }
@@ -5651,21 +5684,21 @@ function promptWithLanguage(o, n, r) {
 ${a}`;
 }
 const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: u, fallbackLang: p } = useLanguages(), m = u.length ? u : p;
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: u, fallbackLang: p } = useLanguages(), g = u.length ? u : p;
   return {
     askAi: useCallback(
-      async (g, x, j, E) => {
+      async (f, x, j, E) => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = g === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((R) => R._id === x))];
+            const b = f === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((R) => R._id === x))];
             set(b, "0._parent", null);
-            const k = u === p ? "" : u, v = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: C, error: B } = v;
-            if (B) {
-              a(B);
+            const k = u === p ? "" : u, S = await l(f, promptWithLanguage(j, g, f), b, k), { blocks: w, error: _ } = S;
+            if (_) {
+              a(_);
               return;
             }
-            g === "styles" ? c(C) : i(C), E && E(v);
+            f === "styles" ? c(w) : i(w), E && E(S);
           } catch (b) {
             a(b);
           } finally {
@@ -5679,7 +5712,7 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
         d,
         u,
         p,
-        m,
+        g,
         c,
         i
       ]
@@ -5753,14 +5786,14 @@ function Countdown() {
   ] });
 }
 const AskAIStyles = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, m] = useState();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, g] = useState();
   useEffect(() => {
     var x;
     (x = d.current) == null || x.focus();
   }, []);
-  const g = (x) => {
+  const f = (x) => {
     const { usage: j } = x || {};
-    !l && j && m(j), u.current = setTimeout(() => m(void 0), 1e4), l || c("");
+    !l && j && g(j), u.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5774,7 +5807,7 @@ const AskAIStyles = ({ blockId: o }) => {
         className: "w-full border border-border focus:border-0",
         rows: 3,
         onKeyDown: (x) => {
-          x.key === "Enter" && (x.preventDefault(), u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, g));
+          x.key === "Enter" && (x.preventDefault(), u.current && clearTimeout(u.current), g(void 0), r("styles", o, i, f));
         }
       }
     ),
@@ -5784,7 +5817,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, g);
+            u.current && clearTimeout(u.current), g(void 0), r("styles", o, i, f);
           },
           variant: "default",
           className: "w-fit",
@@ -5820,35 +5853,35 @@ const AskAIStyles = ({ blockId: o }) => {
   keys: ["name"]
 });
 function ManualClasses() {
-  var _;
-  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), m = (_ = first(n)) == null ? void 0 : _.prop, g = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), x = () => {
-    const N = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(i, N, !0), u("");
-  }, [j, E] = useState([]), b = ({ value: N }) => {
-    const L = N.trim().toLowerCase(), P = L.match(/.+:/g);
-    let f = [];
-    if (P && P.length > 0) {
-      const [S] = P, w = L.replace(S, "");
-      f = fuse.search(w).map((I) => ({
+  var A;
+  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), g = (A = first(n)) == null ? void 0 : A.prop, f = reject((get(r, g, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), x = () => {
+    const T = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a(i, T, !0), u("");
+  }, [j, E] = useState([]), b = ({ value: T }) => {
+    const L = T.trim().toLowerCase(), D = L.match(/.+:/g);
+    let m = [];
+    if (D && D.length > 0) {
+      const [v] = D, C = L.replace(v, "");
+      m = fuse.search(C).map((I) => ({
         ...I,
-        item: { ...I.item, name: S + I.item.name }
+        item: { ...I.item, name: v + I.item.name }
       }));
     } else
-      f = fuse.search(L);
-    return E(map(f, "item"));
+      m = fuse.search(L);
+    return E(map(m, "item"));
   }, k = () => {
     E([]);
-  }, v = (N) => N.name, C = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), B = {
+  }, S = (T) => T.name, w = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), _ = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: o("Enter classes separated by space"),
     value: d,
-    onKeyDown: (N) => {
-      N.key === "Enter" && d.trim() !== "" && x();
+    onKeyDown: (T) => {
+      T.key === "Enter" && d.trim() !== "" && x();
     },
-    onChange: (N, { newValue: L }) => u(L),
+    onChange: (T, { newValue: L }) => u(L),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, R = () => {
     if (navigator.clipboard === void 0) {
@@ -5859,7 +5892,7 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(g.join(" ")), p({
+    navigator.clipboard.writeText(f.join(" ")), p({
       title: o("Copied"),
       description: o("Classes copied to clipboard")
     });
@@ -5892,9 +5925,9 @@ function ManualClasses() {
               suggestions: j,
               onSuggestionsFetchRequested: b,
               onSuggestionsClearRequested: k,
-              getSuggestionValue: v,
-              renderSuggestion: C,
-              inputProps: B,
+              getSuggestionValue: S,
+              renderSuggestion: w,
+              inputProps: _,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
               },
@@ -5918,22 +5951,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((N) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          f.map((T) => /* @__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",
               children: [
-                N,
+                T,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => l(i, [N]),
+                    onClick: () => l(i, [T]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            N
+            T
           ))
         ) })
       ]
@@ -6324,7 +6357,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), m = get(p, "1", ""), g = get(p, "2", ""), x = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), g = get(p, "1", ""), f = get(p, "2", ""), x = useCallback(
     // eslint-disable-next-line no-shadow
     (E) => {
       ["current", "inherit", "transparent", "black", "white"].includes(E) ? (c([]), u({ color: E })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), u((b) => ({ ...b, color: E, shade: b.shade ? b.shade : "500" })));
@@ -6332,16 +6365,16 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     [c, u]
   );
   useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(m))
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [m]);
+  }, [g]);
   const j = useCallback(
     // eslint-disable-next-line no-shadow
     (E) => {
-      u({ color: m, shade: E });
+      u({ color: g, shade: E });
     },
-    [m]
+    [g]
   );
   return useEffect(() => {
     u({ color: "", shade: "" });
@@ -6354,7 +6387,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       {
         disabled: !l,
         rounded: !0,
-        selected: m,
+        selected: g,
         onChange: x,
         options: [
           "current",
@@ -6388,7 +6421,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: g, disabled: !m || !l, onChange: j, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !g || !l, onChange: j, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -6583,88 +6616,88 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: m } = o, [g, x] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [j, E] = useState(!1), [b, k] = useState(""), [v, C] = useState(!1), [B, R] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: g } = o, [f, x] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [j, E] = useState(!1), [b, k] = useState(""), [S, w] = useState(!1), [_, R] = useState(!1);
   useEffect(() => {
-    const { value: f, unit: S } = getClassValueAndUnit(i);
-    if (S === "") {
-      l(f), x(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
+    const { value: m, unit: v } = getClassValueAndUnit(i);
+    if (v === "") {
+      l(m), x(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    x(S), l(S === "class" || isEmpty(f) ? "" : f);
+    x(v), l(v === "class" || isEmpty(m) ? "" : m);
   }, [i, u, p]);
-  const _ = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), N = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
-    (f = !1) => {
-      const S = getUserInputValues(`${a}`, p);
-      if (get(S, "error", !1)) {
+  const A = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), T = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), L = useCallback(
+    (m = !1) => {
+      const v = getUserInputValues(`${a}`, p);
+      if (get(v, "error", !1)) {
         E(!0);
         return;
       }
-      const w = get(S, "unit") !== "" ? get(S, "unit") : g;
-      if (w === "auto" || w === "none") {
-        _(`${d}${w}`);
+      const C = get(v, "unit") !== "" ? get(v, "unit") : f;
+      if (C === "auto" || C === "none") {
+        A(`${d}${C}`);
         return;
       }
-      if (get(S, "value") === "")
+      if (get(v, "value") === "")
         return;
-      const I = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      f ? N(I) : _(I);
+      const I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      m ? T(I) : A(I);
     },
-    [_, N, a, g, d, p]
-  ), P = useCallback(
-    (f) => {
-      const S = getUserInputValues(`${a}`, p);
-      if (get(S, "error", !1)) {
+    [A, T, a, f, d, p]
+  ), D = useCallback(
+    (m) => {
+      const v = getUserInputValues(`${a}`, p);
+      if (get(v, "error", !1)) {
         E(!0);
         return;
       }
-      if (f === "auto" || f === "none") {
-        _(`${d}${f}`);
+      if (m === "auto" || m === "none") {
+        A(`${d}${m}`);
         return;
       }
-      if (get(S, "value") === "")
+      if (get(v, "value") === "")
         return;
-      const w = get(S, "unit") !== "" ? get(S, "unit") : f, I = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      _(I);
+      const C = get(v, "unit") !== "" ? get(v, "unit") : m, I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      A(I);
     },
-    [_, a, d, p]
+    [A, a, d, p]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: g === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: g === "class",
-          onKeyPress: (f) => {
-            f.key === "Enter" && L();
+          readOnly: f === "class",
+          onKeyPress: (m) => {
+            m.key === "Enter" && L();
           },
-          onKeyDown: (f) => {
-            if (f.keyCode !== 38 && f.keyCode !== 40)
+          onKeyDown: (m) => {
+            if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            f.preventDefault(), R(!0);
-            const S = parseInt$1(f.target.value);
-            let w = isNaN$1(S) ? 0 : S;
-            f.keyCode === 38 && (w += 1), f.keyCode === 40 && (w -= 1);
-            const A = `${w}`, T = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
-            N(T);
+            m.preventDefault(), R(!0);
+            const v = parseInt$1(m.target.value);
+            let C = isNaN$1(v) ? 0 : v;
+            m.keyCode === 38 && (C += 1), m.keyCode === 40 && (C -= 1);
+            const B = `${C}`, N = `${B.startsWith("-") ? "-" : ""}${d}[${B.replace("-", "")}${f === "-" ? "" : f}]`;
+            T(N);
           },
-          onKeyUp: (f) => {
-            B && (f.preventDefault(), R(!1));
+          onKeyUp: (m) => {
+            _ && (m.preventDefault(), R(!1));
           },
           onBlur: () => L(),
-          onChange: (f) => {
-            E(!1), l(f.target.value);
+          onChange: (m) => {
+            E(!1), l(m.target.value);
           },
-          onClick: (f) => {
-            var S;
-            (S = f == null ? void 0 : f.target) == null || S.select(), r(!1);
+          onClick: (m) => {
+            var v;
+            (v = m == null ? void 0 : m.target) == null || v.select(), r(!1);
           },
-          value: v ? b : a,
+          value: S ? 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(
             " ",
             j ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6679,7 +6712,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: g }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: f }),
               p.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -6688,34 +6721,34 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           UnitSelection,
           {
             units: p,
-            current: g,
-            onSelect: (f) => {
-              r(!1), x(f), P(f);
+            current: f,
+            onSelect: (m) => {
+              r(!1), x(m), D(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(g) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => C(!0),
-        onDragEnd: (f) => {
-          if (k(() => ""), C(!1), isEmpty(f))
+        onDragStart: () => w(!0),
+        onDragEnd: (m) => {
+          if (k(() => ""), w(!1), isEmpty(m))
             return;
-          const S = `${f}`, A = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${g === "-" ? "" : g}]`;
-          _(A);
+          const v = `${m}`, B = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${f === "-" ? "" : f}]`;
+          A(B);
         },
-        onDrag: (f) => {
-          if (isEmpty(f))
+        onDrag: (m) => {
+          if (isEmpty(m))
             return;
-          k(f);
-          const S = `${f}`, A = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${g === "-" ? "" : g}]`;
-          N(A);
+          k(m);
+          const v = `${m}`, B = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${f === "-" ? "" : f}]`;
+          T(B);
         },
         currentValue: a,
-        unit: g,
-        negative: m,
+        unit: f,
+        negative: g,
         cssProperty: u
       }
     )
@@ -6808,41 +6841,41 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, m] = useCanvasWidth(), g = useCurrentClassByProperty(l), x = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [E] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), k = useCallback(
-    (N, L = !0) => {
-      const P = { dark: u, mq: m, mod: p, cls: N, property: l, fullCls: "" };
-      (u || p !== "") && (P.mq = "xs");
-      const f = generateFullClsName(P);
-      x(E, [f], L);
+  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, g] = useCanvasWidth(), f = useCurrentClassByProperty(l), x = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [E] = useSelectedBlockIds(), b = useMemo(() => get(f, "fullCls", ""), [f]), k = useCallback(
+    (T, L = !0) => {
+      const D = { dark: u, mq: g, mod: p, cls: T, property: l, fullCls: "" };
+      (u || p !== "") && (D.mq = "xs");
+      const m = generateFullClsName(D);
+      x(E, [m], L);
     },
-    [E, u, m, p, l, x]
-  ), v = useCallback(() => {
+    [E, u, g, p, l, x]
+  ), S = useCallback(() => {
     j(E, [b]);
-  }, [E, b, j]), C = useMemo(() => canChangeClass(g, m), [g, m]);
+  }, [E, b, j]), w = useMemo(() => canChangeClass(f, g), [f, g]);
   useEffect(() => {
-    i(C, g);
-  }, [C, i, g]);
-  const [, , B] = useCanvasWidth(), R = useCallback(
-    (N) => {
-      B({
+    i(w, f);
+  }, [w, i, f]);
+  const [, , _] = useCanvasWidth(), R = useCallback(
+    (T) => {
+      _({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[N]);
+      }[T]);
     },
-    [B]
-  ), _ = get(g, "dark", null) === u && get(g, "mod", null) === p && get(g, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: g && _, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !_ ? "text-foreground" : ""}`, children: n(a) }) }),
+    [_]
+  ), A = get(f, "dark", null) === u && get(f, "mod", null) === p && get(f, "mq", null) === g;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: f && A, 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] ${f && !A ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           AdvanceChoices,
           {
-            currentClass: get(g, "cls", ""),
+            currentClass: get(f, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: k,
@@ -6855,7 +6888,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: k }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6867,19 +6900,19 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(g, "mq")),
-            u && !g.dark ? "(Light mode)" : ""
+            getBreakpoint(get(f, "mq")),
+            u && !f.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => R(get(g, "mq")),
+              onClick: () => R(get(f, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(g, "mq").toUpperCase()
+                get(f, "mq").toUpperCase()
               ]
             }
           )
@@ -6896,7 +6929,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), m = useSelectedBlockCurrentClasses(), g = useCallback((x) => map(m, "property").includes(x), [m]);
+  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((x) => map(g, "property").includes(x), [g]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6914,7 +6947,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${j === u ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: g(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: f(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, j, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
@@ -6985,8 +7018,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   if (isEmpty(a) && (!has(i, "props") || isEmpty(d)))
     return null;
   const u = (p) => {
-    const m = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([o._id], m, !0);
+    const g = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l([o._id], g, !0);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "default", className: "w-full", size: "sm", children: [
@@ -7040,13 +7073,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (p) => {
-      const m = !get(i, "negative", !1), g = get(i, "cssProperty", "");
+      const g = !get(i, "negative", !1), f = get(i, "cssProperty", "");
       let x = parseFloat(i.dragStartValue);
       x = isNaN(x) ? 0 : x;
       let j = MAPPER[i.dragUnit];
-      (startsWith(g, "scale") || g === "opacity") && (j = 10);
+      (startsWith(f, "scale") || f === "opacity") && (j = 10);
       let b = (i.dragStartY - p.pageY) / j + x;
-      m && b < 0 && (b = 0), g === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      g && b < 0 && (b = 0), f === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -7132,9 +7165,9 @@ const BlockCard = ({
   library: n,
   parentId: r = void 0
 }) => {
-  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), m = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), j = (k) => {
-    const v = has(k, "styles_attrs.data-page-section");
-    return k._type === "Box" && v;
+  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), g = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), j = (k) => {
+    const S = has(k, "styles_attrs.data-page-section");
+    return k._type === "Box" && S;
   }, E = useCallback(
     async (k) => {
       if (k.stopPropagation(), has(o, "component")) {
@@ -7142,23 +7175,23 @@ const BlockCard = ({
         return;
       }
       l(!0);
-      const v = await i(n, o);
-      isEmpty(v) || d(syncBlocksWithDefaults(v), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+      const S = await i(n, o);
+      isEmpty(S) || d(syncBlocksWithDefaults(S), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
     },
     [o]
   ), b = async (k) => {
-    const v = await i(n, o);
-    let C = r;
-    if (j(first(v)) && (C = null), !isEmpty(v)) {
-      const B = { blocks: v, uiLibrary: !0, parent: C };
-      if (k.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
+    const S = await i(n, o);
+    let w = r;
+    if (j(first(S)) && (w = null), !isEmpty(S)) {
+      const _ = { blocks: S, uiLibrary: !0, parent: w };
+      if (k.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
         const R = new Image();
         R.src = o.preview, R.onload = () => {
           k.dataTransfer.setDragImage(R, 0, 0);
         };
       } else
         k.dataTransfer.setDragImage(new Image(), 0, 0);
-      x(B), setTimeout(() => {
+      x(_), setTimeout(() => {
         u([]), p(), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
@@ -7169,7 +7202,7 @@ const BlockCard = ({
       {
         onClick: a ? () => {
         } : E,
-        draggable: g ? "true" : "false",
+        draggable: f ? "true" : "false",
         onDragStart: b,
         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"
@@ -7179,11 +7212,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: 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 }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: g }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -7199,9 +7232,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((C) => C.category === "custom"), c = a.find((C) => C.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [m, g] = useState("Hero"), x = get(p, m, []), j = useRef(null), { t: E } = useTranslation(), b = (C) => {
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((w) => w.category === "custom"), c = a.find((w) => w.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [g, f] = useState("Hero"), x = get(p, g, []), j = useRef(null), { t: E } = useTranslation(), b = (w) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
-      j.current && g(C);
+      j.current && f(w);
     }, 300);
   };
   if (u)
@@ -7209,7 +7242,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const k = filter(x, (C, B) => B % 2 === 0), v = filter(x, (C, B) => B % 2 === 1);
+  const k = filter(x, (w, _) => _ % 2 === 0), S = filter(x, (w, _) => _ % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: r, uiLibraries: a }),
@@ -7217,22 +7250,22 @@ const BlockCard = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: E("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(p, (C, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (w, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => b(B),
+              onMouseEnter: () => b(_),
               onMouseLeave: () => clearTimeout(j.current),
-              onClick: () => g(B),
+              onClick: () => f(_),
               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",
-                B === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                _ === g ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(B.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(_.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            B
+            _
           ))
         ) })
       ] })
@@ -7245,10 +7278,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              k.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
+              k.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: w, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              v.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
+              S.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: w, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7729,7 +7762,10 @@ const BlockCard = ({
   "Fetching...": "Fetching...",
   "No images found": "No images found",
   "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.": "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.",
-  "Open Code Editor": "Open Code Editor"
+  "Open Code Editor": "Open Code Editor",
+  "Clear search": "Clear search",
+  "No results found for": "No results found for",
+  "Search {collectionName}": "Search {collectionName}"
 };
 i18n.use(initReactI18next).init({
   // the translations
@@ -7749,7 +7785,7 @@ i18n.use(initReactI18next).init({
   }
 });
 const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
-  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), g = () => {
+  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = () => {
     if (has(o, "blocks")) {
       const E = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(E), r || null);
@@ -7762,11 +7798,11 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
       "button",
       {
         disabled: n,
-        onClick: g,
+        onClick: f,
         type: "button",
         onDragStart: (E) => {
           E.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), E.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
-            p([]), m();
+            p([]), g();
           }, 200);
         },
         draggable: x ? "true" : "false",
@@ -7823,9 +7859,9 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
         value: l,
         className: cn("h-max"),
         children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "grid w-full " + (d ? "grid-cols-3" : "grid-cols-2"), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: a("library") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: a("blocks") }),
-          d ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: a("import") }) : null
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: a("Library") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: a("Blocks") }),
+          d ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: a("Import") }) : null
         ] })
       }
     ),
@@ -8131,14 +8167,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, u] = useState(!0), [p, m] = useState(), g = useRef(null), x = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, u] = useState(!0), [p, g] = useState(), f = useRef(null), x = useRef(null);
   useEffect(() => {
     var E;
-    (E = g.current) == null || E.focus();
+    (E = f.current) == null || E.focus();
   }, []);
   const j = (E) => {
     const { usage: b } = E || {};
-    !l && b && m(b), x.current = setTimeout(() => m(void 0), 1e4), l || c("");
+    !l && b && g(b), x.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8156,14 +8192,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: g,
+          ref: f,
           value: i,
           onChange: (E) => c(E.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (E) => {
-            E.key === "Enter" && (E.preventDefault(), x.current && clearTimeout(x.current), m(void 0), r("content", o, i, j));
+            E.key === "Enter" && (E.preventDefault(), x.current && clearTimeout(x.current), g(void 0), r("content", o, i, j));
           }
         }
       ),
@@ -8173,7 +8209,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              x.current && clearTimeout(x.current), m(void 0), r("content", o, i, j);
+              x.current && clearTimeout(x.current), g(void 0), r("content", o, i, j);
             },
             variant: "default",
             className: "w-fit",
@@ -8206,7 +8242,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (E) => {
-            x.current && clearTimeout(x.current), m(void 0), r("content", o, E, j);
+            x.current && clearTimeout(x.current), g(void 0), r("content", o, E, j);
           }
         }
       )
@@ -8216,13 +8252,13 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [u, p] = useState(null), [, m] = useState(!1), { toast: g } = useToast(), x = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [u, p] = useState(null), [, g] = useState(!1), { toast: f } = useToast(), x = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
   const j = async () => {
     try {
-      d(!0), p(null), await i(r), g({
+      d(!0), p(null), await i(r), f({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
@@ -8237,7 +8273,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     Accordion,
     {
       onValueChange: (E) => {
-        m(E !== "");
+        g(E !== "");
       },
       type: "single",
       collapsible: !0,
@@ -8316,7 +8352,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, m] = useState(null), [g, x] = useState(""), j = useRef(null), E = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, g] = useState(null), [f, x] = useState(""), j = useRef(null), E = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
@@ -8330,28 +8366,28 @@ const AIUserPrompt = ({ blockId: o }) => {
       r(R), l(a), c(""), u(""), x("");
     }
   }, k = (R) => {
-    const _ = a.filter((N, L) => L !== R);
-    r(_), l(_);
-  }, v = (R) => {
-    m(R), c(a[R].key), u(a[R].value);
-  }, C = () => {
+    const A = a.filter((T, L) => L !== R);
+    r(A), l(A);
+  }, S = (R) => {
+    g(R), c(a[R].key), u(a[R].value);
+  }, w = () => {
     if (i.startsWith("@")) {
       x("Attribute keys cannot start with '@'");
       return;
     }
     if (p !== null && i) {
       const R = [...a];
-      R[p] = { key: i, value: d }, r(R), l(R), m(null), c(""), u(""), x("");
+      R[p] = { key: i, value: d }, r(R), l(R), g(null), c(""), u(""), x("");
     }
-  }, B = (R) => {
-    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? C() : b());
+  }, _ = (R) => {
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? w() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (R) => {
-          R.preventDefault(), p !== null ? C() : b();
+          R.preventDefault(), p !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -8386,7 +8422,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   ref: E,
                   value: d,
                   onChange: (R) => u(R.target.value),
-                  onKeyDown: B,
+                  onKeyDown: _,
                   placeholder: "Value",
                   className: "bg-background text-sm"
                 }
@@ -8394,26 +8430,26 @@ const AIUserPrompt = ({ blockId: o }) => {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "secondary", className: "h-8 w-fit text-sm", children: p !== null ? "Save" : "Add" }),
-          g && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: g })
+          f && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: f })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((R, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((R, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mr-2 flex flex-col", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: R.key }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: R.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(_), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(A), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(_), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(A), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
-    ] }, _)) })
+    ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8831,15 +8867,15 @@ function RemoveProviderConfirmation({
 const PageDataProviders = () => {
   const { t: o } = useTranslation(), n = useMemo(() => getChaiDataProviders(), []), [r, a] = usePageDataProviders(), [, l] = useAtom$1(builderSaveStateAtom), [i, c] = useState(
     filter(n, (b) => map(r, "providerKey").includes(b.providerKey))
-  ), [d, u] = useState(""), [p, m] = useState(null), g = filter(
+  ), [d, u] = useState(""), [p, g] = useState(null), f = filter(
     n.map((b) => map(i, "providerKey").includes(b.providerKey) ? null : { value: b.providerKey, label: b.name }),
     (b) => !isNull(b)
   ), x = (b) => {
     const k = find(n, { providerKey: b });
-    c((v) => [...v, k]), a((v) => [...v, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
+    c((S) => [...S, k]), a((S) => [...S, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
   }, j = (b) => {
-    c((k) => filter(k, (v) => v.providerKey !== b.providerKey)), a((k) => filter(k, (v) => v.providerKey !== b.providerKey)), l("UNSAVED");
-  }, E = (b) => m(b);
+    c((k) => filter(k, (S) => S.providerKey !== b.providerKey)), a((k) => filter(k, (S) => S.providerKey !== b.providerKey)), l("UNSAVED");
+  }, E = (b) => g(b);
   return isEmpty(n) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 p-4 text-xs text-gray-500", children: [
     o("You have no data providers registered. Please add a data provider to your project."),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8851,7 +8887,7 @@ const PageDataProviders = () => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: o("Select a provider") }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "", children: o("Choose") }),
-        g.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: b.value, children: b.label }, b.value))
+        f.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: b.value, children: b.label }, b.value))
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8928,14 +8964,14 @@ const PageDataProviders = () => {
         },
         b.providerKey
       )) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => m(null), provider: p })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => g(null), provider: p })
     ] })
   ] });
 };
 function AiFillDatabase(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M832 64H192c-17.7 0-32 14.3-32 32v224h704V96c0-17.7-14.3-32-32-32zM288 232c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM160 928c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V704H160v224zm128-136c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zM160 640h704V384H160v256zm128-168c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40z" }, child: [] }] })(o);
 }
-const TopBar = lazy(() => import("./Topbar-Lvb5K8c2.js"));
+const TopBar = lazy(() => import("./Topbar-0pmugPN3.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -8969,8 +9005,8 @@ const RootLayout = () => {
     x.preventDefault();
   }, d = (x) => {
     n(o === x ? null : x);
-  }, u = useSidebarMenuItems(r), { t: p } = useTranslation(), m = [...u, ...i], g = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: g, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
+  }, u = useSidebarMenuItems(r), { t: p } = useTranslation(), g = [...u, ...i], f = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: f, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -8980,7 +9016,7 @@ 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((x, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: g.map((x, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
@@ -9010,10 +9046,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: p(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: p(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), {}) }) })
                 ] }) })
               }
             ),