@chaibuilder/sdk 1.2.111 → 1.2.113

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

@@ -1,11 +1,11 @@
 var z = Object.defineProperty;
-var W = (o, n, r) => n in o ? z(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var F = (o, n, r) => (W(o, typeof n != "symbol" ? n + "" : n, r), r);
+var G = (o, n, r) => n in o ? z(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
+var F = (o, n, r) => (G(o, typeof n != "symbol" ? n + "" : n, r), r);
 import { j as jsxRuntimeExports } from "./jsx-runtime-Sp0orL4X.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useState, useMemo, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
 import { aq as Skeleton, B as Button, aA as ContextMenu, aB as ContextMenuTrigger, aC as ContextMenuContent, aD as ContextMenuItem, N as Tooltip, O as TooltipTrigger, P as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, L as Label, T as Textarea, y as CardFooter, D as Dialog, r as DialogTrigger, s as DialogContent, t as DialogHeader, v as DialogTitle, w as DialogDescription, u as DialogFooter, U as Popover, V as PopoverTrigger, W as PopoverContent, ar as Command, at as CommandInput, au as CommandList, av as CommandEmpty, aw as CommandGroup, ax as CommandItem, H as Tabs, J as TabsList, K as TabsTrigger, M as TabsContent, a as Switch, A as Accordion, d as AccordionItem, e as AccordionTrigger, f as AccordionContent, an as useToast, I as Input$1, R as TooltipPortal, a6 as DropdownMenu, a7 as DropdownMenuTrigger, a8 as DropdownMenuContent, S as ScrollArea, ac as DropdownMenuLabel, ad as DropdownMenuSeparator, af as DropdownMenuGroup, a9 as DropdownMenuItem, ae as DropdownMenuShortcut, i as AlertDialog, k as AlertDialogContent, l as AlertDialogHeader, n as AlertDialogTitle, j as AlertDialogTrigger, o as AlertDialogDescription, m as AlertDialogFooter, q as AlertDialogCancel, p as AlertDialogAction, aa as DropdownMenuCheckboxItem, X as HoverCard, Y as HoverCardTrigger, Z as HoverCardContent, al as Separator, g as Badge, _ as Select$1, a1 as SelectTrigger, a0 as SelectValue, a2 as SelectContent, a4 as SelectItem, Q as TooltipProvider, ap as Toaster } from "./context-menu-FPX89OKr.js";
-import { has, find, filter, flatten, map, omit, isString as isString$1, includes, without, get, compact, set, endsWith, isEmpty, forIn, isObject as isObject$1, each, first, noop, merge, keys, startsWith, range, values, flattenDeep, isNull, pick, sortBy, memoize, forEach, unset, chunk, throttle, cloneDeep, reverse, debounce, flatMapDeep, capitalize, last, startCase, truncate, isArray as isArray$1, split, toLower, reject, nth, isNumber as isNumber$1, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
+import { has, find, filter, flatten, map, omit, isString as isString$1, includes, without, get, compact, set, endsWith, isEmpty, forIn, isObject as isObject$1, each, first, noop, keys, startsWith, range, values, flattenDeep, isNull, pick, sortBy, memoize, forEach, unset, chunk, throttle, cloneDeep, reverse, debounce, flatMapDeep, capitalize, last, startCase, truncate, isArray as isArray$1, split, toLower, reject, nth, isNumber as isNumber$1, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-Ief2hJUZ.js";
 import { getBlockComponent, useChaiBlocks, getChaiDataProviders, useGlobalStylingPresets, syncBlocksWithDefaults } from "@chaibuilder/runtime";
@@ -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, 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, SearchIcon, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, X, 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,23 +89,23 @@ 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, v) => {
-    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(v);
+  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, v), r.has(f) || r.set(f, w), w && hasPromiseAtomValue(w)) {
-      const A = "v" in v ? v.v instanceof Promise ? v.v : Promise.resolve(v.v) : Promise.reject(v.e);
+    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);
     }
-  }, u = (f, v, w) => {
+  }, u = (f, S, w) => {
     const A = /* @__PURE__ */ new Map();
     let I = !1;
     w.forEach((T, D) => {
-      !T && D === f && (T = v), T ? (A.set(D, T), v.d.get(D) !== T && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (I || v.d.size !== A.size) && (v.d = A);
-  }, p = (f, v, w) => {
+      !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
+      v: S
     };
     if (w && u(f, I, w), A && isEqualAtomValue(A, I) && A.d === I.d)
       return A;
@@ -115,12 +115,12 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       I.v = A.v;
     }
     return d(f, I), I;
-  }, m = (f, v, w, A) => {
-    if (isPromiseLike$2(v)) {
+  }, m = (f, S, w, A) => {
+    if (isPromiseLike$2(S)) {
       let I;
       const T = new Promise((D, O) => {
         let M = !1;
-        v.then(
+        S.then(
           (V) => {
             if (!M) {
               M = !0;
@@ -150,27 +150,27 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
           ), D(V));
         };
       });
-      return T.orig = v, T.status = "pending", registerCancelPromise(T, (D) => {
+      return T.orig = S, T.status = "pending", registerCancelPromise(T, (D) => {
         D && I(D), A == null || A();
       }), p(f, T, w);
     }
-    return p(f, v, w);
-  }, g = (f, v, w) => {
+    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: v
+      e: S
     };
     return w && u(f, I, w), A && isEqualAtomError(A, I) && A.d === I.d ? A : (d(f, I), I);
   }, x = (f) => {
-    const v = c(f);
-    if (v && (v.d.forEach((M, V) => {
+    const S = c(f);
+    if (S && (S.d.forEach((M, V) => {
       V !== f && !n.has(V) && x(V);
-    }), Array.from(v.d).every(([M, V]) => {
+    }), Array.from(S.d).every(([M, V]) => {
       const $ = c(M);
       return M === f || $ === V || // TODO This is a hack, we should find a better solution.
       $ && !hasPromiseAtomValue($) && isEqualAtomValue($, V);
     })))
-      return v;
+      return S;
     const w = /* @__PURE__ */ new Map();
     let A = !0;
     const I = (M) => {
@@ -193,7 +193,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       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 _(f, ...M);
+            return B(f, ...M);
         }), D;
       }
     };
@@ -211,18 +211,18 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       A = !1;
     }
   }, j = (f) => returnAtomValue(x(f)), E = (f) => {
-    let v = n.get(f);
-    return v || (v = C(f)), v;
-  }, b = (f, v) => !v.l.size && (!v.t.size || v.t.size === 1 && v.t.has(f)), k = (f) => {
-    const v = n.get(f);
-    v && b(f, v) && B(f);
-  }, S = (f) => {
-    const v = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), A = (T) => {
+    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 && (v.set(
+        O !== T && (S.set(
           O,
-          (v.get(O) || /* @__PURE__ */ new Set()).add(T)
+          (S.get(O) || /* @__PURE__ */ new Set()).add(T)
         ), w.set(O, (w.get(O) || 0) + 1), A(O));
       });
     };
@@ -234,19 +234,19 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         if (O !== T) {
           let V = w.get(O);
           if (V && w.set(O, --V), !V) {
-            let $ = !!((M = v.get(O)) != null && M.size);
+            let $ = !!((M = S.get(O)) != null && M.size);
             if ($) {
               const H = c(O), U = x(O);
               $ = !H || !isEqualAtomValue(H, U);
             }
-            $ || v.forEach((H) => H.delete(O));
+            $ || S.forEach((H) => H.delete(O));
           }
           I(O);
         }
       });
     };
     I(f);
-  }, R = (f, ...v) => {
+  }, C = (f, ...S) => {
     let w = !0;
     const A = (D) => returnAtomValue(x(D)), I = (D, ...O) => {
       let M;
@@ -254,9 +254,9 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         if (!hasInitialValue(D))
           throw new Error("atom not writable");
         const V = c(D), $ = m(D, O[0]);
-        (!V || !isEqualAtomValue(V, $)) && S(D);
+        (!V || !isEqualAtomValue(V, $)) && v(D);
       } else
-        M = R(D, ...O);
+        M = C(D, ...O);
       if (!w) {
         const V = L();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
@@ -264,55 +264,55 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
         );
       }
       return M;
-    }, T = f.write(A, I, ...v);
+    }, T = f.write(A, I, ...S);
     return w = !1, T;
-  }, _ = (f, ...v) => {
-    const w = R(f, ...v), A = L();
+  }, B = (f, ...S) => {
+    const w = C(f, ...S), A = L();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
       (I) => I({ type: "write", flushed: A })
     ), w;
-  }, C = (f, v) => {
+  }, R = (f, S) => {
     const w = {
-      t: new Set(v && [v]),
+      t: new Set(S && [S]),
       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 && C(I, f);
+      T ? T.t.add(f) : I !== f && R(I, f);
     }), x(f), isActuallyWritableAtom(f) && f.onMount) {
-      const A = f.onMount((...I) => _(f, ...I));
+      const A = f.onMount((...I) => B(f, ...I));
       A && (w.u = A);
     }
     return w;
-  }, B = (f) => {
-    var v;
-    const w = (v = n.get(f)) == null ? void 0 : v.u;
+  }, _ = (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) && B(T));
+        D && (D.t.delete(f), b(T, D) && _(T));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", f);
-  }, N = (f, v, w) => {
-    const A = new Set(v.d.keys());
+  }, N = (f, S, w) => {
+    const A = new Set(S.d.keys());
     w == null || w.forEach((I, T) => {
       if (A.has(T)) {
         A.delete(T);
         return;
       }
       const D = n.get(T);
-      D && (D.t.delete(f), b(T, D) && B(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) && C(I, f);
+      T ? T.t.add(f) : n.has(f) && R(I, f);
     });
   }, L = () => {
     let f;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (f = /* @__PURE__ */ new Set()); r.size; ) {
-      const v = Array.from(r);
-      r.clear(), v.forEach(([w, A]) => {
+      const S = Array.from(r);
+      r.clear(), S.forEach(([w, A]) => {
         const I = c(w);
         if (I) {
           I.d !== (A == null ? void 0 : A.d) && N(w, I, A == null ? void 0 : A.d);
@@ -325,21 +325,21 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       });
     }
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
-      return a.forEach((v) => v("state")), f;
-  }, P = (f, v) => {
+      return a.forEach((S) => S("state")), f;
+  }, P = (f, S) => {
     const w = E(f), A = L(), I = w.l;
-    return I.add(v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("sub")), l.forEach(
+    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 })
     )), () => {
-      I.delete(v), 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(S), k(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("unsub")), l.forEach((T) => T({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
     get: j,
-    set: _,
+    set: B,
     sub: P,
     // store dev methods (these are tentative and subject to change without notice)
-    dev_subscribe_store: (f, v) => v !== 2 ? (console.warn(
+    dev_subscribe_store: (f, S) => S !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
     ), a.add(f), () => {
       a.delete(f);
@@ -351,15 +351,15 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     dev_get_mounted: (f) => n.get(f),
     dev_restore_atoms: (f) => {
       for (const [w, A] of f)
-        hasInitialValue(w) && (m(w, A), S(w));
-      const v = L();
+        hasInitialValue(w) && (m(w, A), v(w));
+      const S = L();
       l.forEach(
-        (w) => w({ type: "restore", flushed: v })
+        (w) => w({ type: "restore", flushed: S })
       );
     }
   } : {
     get: j,
-    set: _,
+    set: B,
     sub: P
   };
 };
@@ -386,27 +386,27 @@ function splitAtom(o, n) {
             m[j] = b;
             return;
           }
-          const k = (R) => {
-            const _ = R(l), C = R(o), N = a(C, _ == null ? void 0 : _.arr).keyList.indexOf(E);
-            if (N < 0 || N >= C.length) {
+          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 L = c[a(c).keyList.indexOf(E)];
               if (L)
                 return L;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return C[N];
-          }, S = (R, _, C) => {
-            const B = R(l), N = R(o), P = a(N, B == null ? void 0 : B.arr).keyList.indexOf(E);
+            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)
               throw new Error("splitAtom: index out of bounds for write");
-            const f = isFunction(C) ? C(N[P]) : C;
-            _(o, [
+            const f = isFunction(R) ? R(N[P]) : R;
+            B(o, [
               ...N.slice(0, P),
               f,
               ...N.slice(P + 1)
             ]);
           };
-          m[j] = isWritable(o) ? atom(k, S) : atom(k);
+          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;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
@@ -1066,10 +1066,16 @@ const useSavePage = () => {
   const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (u) => {
   }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = usePageDataProviders(), [c] = useBrandingOptions();
   return { savePage: useThrottledCallback(
-    async () => {
+    async (u = !1) => {
       n("SAVING"), a("SAVING");
-      const u = l();
-      return await r({ blocks: u.blocks, providers: i, brandingOptions: c, themeConfiguration: c }), setTimeout(() => {
+      const p = l();
+      return await r({
+        autoSave: u,
+        blocks: p.blocks,
+        providers: i,
+        brandingOptions: c,
+        themeConfiguration: c
+      }), setTimeout(() => {
         n("SAVED"), a("SAVED");
       }, 100), !0;
     },
@@ -1179,7 +1185,7 @@ const useBlocksStoreManager = () => {
         return r.map((l) => {
           if (a.includes(l._id)) {
             const i = find(n, { _id: l._id });
-            return merge({}, l, { ...omit(i, "_id") });
+            return { ...l, ...omit(i, "_id") };
           }
           return l;
         });
@@ -1196,13 +1202,13 @@ const useBlocksStoreManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (E, b, k) => {
-      const S = map(E, (_) => {
-        const B = n.find((P) => P._id === _)._parent || null, L = n.filter((P) => B ? P._parent === B : !P._parent).map((P) => P._id).indexOf(_);
-        return { _id: _, oldParent: B, oldPosition: L };
-      }), R = S.find(({ _id: _ }) => _ === E[0]);
-      R && R.oldParent === b && R.oldPosition === k || (i(E, b, k), o({
-        undo: () => each(S, ({ _id: _, oldParent: C, oldPosition: B }) => {
-          i([_], C, B);
+      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, _);
         }),
         redo: () => i(E, b, k)
       }));
@@ -1214,27 +1220,27 @@ const useBlocksStoreManager = () => {
       });
     },
     removeBlocks: (E) => {
-      var R;
-      const b = (R = first(E)) == null ? void 0 : R._parent, S = n.filter((_) => b ? _._parent === b : !_._parent).indexOf(first(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));
       l(map(E, "_id")), o({
-        undo: () => a(E, b, S),
+        undo: () => a(E, b, v),
         redo: () => l(map(E, "_id"))
       });
     },
     updateBlocks: (E, b, k) => {
-      let S = [];
+      let v = [];
       if (k)
-        S = map(E, (R) => ({ _id: R, ...k }));
+        v = map(E, (C) => ({ _id: C, ...k }));
       else {
-        const R = keys(b);
-        S = map(E, (_) => {
-          const C = n.find((N) => N._id === _), B = { _id: _ };
-          return each(R, (N) => B[N] = C[N]), B;
+        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]), _;
         });
       }
-      c(map(E, (R) => ({ _id: R, ...b }))), o({
-        undo: () => c(S),
-        redo: () => c(map(E, (R) => ({ _id: R, ...b })))
+      c(map(E, (C) => ({ _id: C, ...b }))), o({
+        undo: () => c(v),
+        redo: () => c(map(E, (C) => ({ _id: C, ...b })))
       });
     },
     updateBlocksRuntime: (E, b) => {
@@ -1249,8 +1255,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (E) => {
       let b = [];
       b = map(E, (k) => {
-        const S = keys(k), R = n.find((C) => C._id === k._id), _ = {};
-        return each(S, (C) => _[C] = R[C]), _;
+        const v = keys(k), C = n.find((R) => R._id === k._id), B = {};
+        return each(v, (R) => B[R] = C[R]), B;
       }), c(E), o({
         undo: () => c(b),
         redo: () => c(E)
@@ -1281,16 +1287,16 @@ const useBlocksStoreManager = () => {
         return a(k, c, d);
       }
       const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
-      forIn(p, (k, S) => {
+      forIn(p, (k, v) => {
         if (startsWith(k, SLOT_KEY)) {
-          const R = k.replace(SLOT_KEY, "");
+          const C = k.replace(SLOT_KEY, "");
           m.push({
-            _id: R,
+            _id: C,
             _type: "Slot",
             _parent: u,
-            _name: i.props[S].name,
-            _styles: i.props[S].styles,
-            _emptyStyles: i.props[S].emptyStyles
+            _name: i.props[v].name,
+            _styles: i.props[v].styles,
+            _emptyStyles: i.props[v].emptyStyles
           });
         }
       });
@@ -3074,20 +3080,20 @@ const useDnd = () => {
       x.preventDefault(), x.stopPropagation(), throttledDragOver(x);
     },
     onDrop: (x) => {
-      var C;
-      const j = dropTarget, b = getOrientation(j) === "vertical" ? x.clientY + ((C = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : C.scrollY) : x.clientX;
+      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, S = j.getAttribute("data-block-id"), R = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === S || !R) {
+      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();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, S === "canvas" ? null : S, dropIndex), setTimeout(g, 300);
+        a(k, v === "canvas" ? null : v, dropIndex), setTimeout(g, 300);
         return;
       }
-      let _ = j.getAttribute("data-block-id");
-      _ === null && (_ = x.target.parentElement.getAttribute("data-block-id")), c([k._id], _ === "canvas" ? null : _, dropIndex), g(), setTimeout(removePlaceholder, 300);
+      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);
     },
     onDragEnter: (x) => {
       const j = x, E = j.target;
@@ -3129,9 +3135,11 @@ const useHandleCanvasDblClick = () => {
     const p = new Quill(u, { placeholder: "Type here..." });
     function m() {
       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();
+      n([c.getAttribute("data-block-id")], { content: x }), c.removeAttribute("style"), u.removeEventListener("blur", m, !0), destroyQuill(p), a(""), l(), u.remove();
     }
-    u.addEventListener("blur", m, !0), u.addEventListener("keydown", (x) => {
+    u.addEventListener("blur", m, !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"));
   };
@@ -3314,16 +3322,16 @@ 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"), S = get(o, "bodyBgDarkColor", "#000"), R = get(o, "bodyTextDarkColor", "#000"), _ = get(o, "bodyTextLightColor", "#fff"), C = s({
+    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({
       colors: [E, b],
       names: ["primary", "secondary"]
     });
-    set(C, "primary.DEFAULT", E), set(C, "secondary.DEFAULT", b);
-    const B = {
+    set(R, "primary.DEFAULT", E), set(R, "secondary.DEFAULT", b);
+    const _ = {
       "bg-light": k,
-      "bg-dark": S,
-      "text-dark": R,
-      "text-light": _
+      "bg-dark": v,
+      "text-dark": C,
+      "text-light": B
     }, N = get(o, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
@@ -3343,7 +3351,7 @@ const useHandleCanvasDblClick = () => {
           borderRadius: {
             DEFAULT: `${N || "0"}px`
           },
-          colors: { ...B, ...C }
+          colors: { ..._, ...R }
         }
       },
       plugins: [
@@ -3505,9 +3513,9 @@ function applyLanguage(o, n, r) {
 }
 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, S) => {
-      const R = get(u, S, {});
-      return { ...k, ...R };
+    (b) => b.reduce((k, v) => {
+      const C = get(u, v, {});
+      return { ...k, ...C };
     }, {}),
     [u]
   );
@@ -3515,18 +3523,18 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
     o.map((b, k) => {
       if (j === b._id || p.includes(b._id))
         return null;
-      const S = {}, R = filter(n, { _parent: b._id });
-      if (S.children = R.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: R }) : null, b._type === "GlobalBlock") {
+      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);
-        S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (A) => !A._parent), allBlocks: w });
+        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (A) => !A._parent), allBlocks: w });
       }
-      const _ = getBlockComponent(b._type), C = get(_, "server", !1), B = C ? RSCBlock : get(_, "builderComponent", get(_, "component", null));
-      if (isNull(B))
+      const B = getBlockComponent(b._type), R = get(B, "server", !1), _ = R ? RSCBlock : get(B, "builderComponent", get(B, "component", null));
+      if (isNull(_))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
-      const N = has(_, "getBlockStateFrom") ? _ == null ? void 0 : _.getBlockStateFrom(b, n) : [], L = E(N), P = g(b);
+      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))
         return null;
-      const f = i && isDescendant(i._id, b._id, n), v = {
+      const f = i && isDescendant(i._id, b._id, n), S = {
         ...includes(a, b._id) ? { "force-show": "" } : {},
         "data-block-id": b._id,
         "data-block-type": b._type,
@@ -3540,12 +3548,12 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
         ...c === b._id && !f ? { "data-drop": "yes" } : {},
         ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
       };
-      return C ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(B, {
-        blockProps: v,
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: S }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(_, {
+        blockProps: S,
         index: k,
-        ...applyBindings(applyLanguage(b, r, _), x),
+        ...applyBindings(applyLanguage(b, r, B), x),
         ...omit(P, ["__isHidden"]),
-        ...S,
+        ...v,
         inBuilder: !0,
         blockState: L
       }) });
@@ -3601,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), S = useBuilderProp("htmlDir", "ltr"), R = (B) => {
-    u((N) => ({ ...N, width: B }));
+  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: _ }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: B, clientHeight: N } = c.current;
-    u({ width: B, height: N });
+    const { clientWidth: _, clientHeight: N } = c.current;
+    u({ width: _, height: N });
   }, [c, n]);
-  const _ = (B, N = 0) => {
-    const { top: L } = B.getBoundingClientRect();
+  const B = (_, N = 0) => {
+    const { top: L } = _.getBoundingClientRect();
     return L + N >= 0 && L - N <= window.innerHeight;
   };
   useEffect(() => {
-    var B, N;
+    var _, N;
     if (a && a.type !== "Multiple" && i.current) {
       const L = getElementByDataBlockId(i.current.contentDocument, a._id);
-      L && (_(L) || (N = (B = i.current) == null ? void 0 : B.contentWindow) == null || N.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
+      L && (B(L) || (N = (_ = i.current) == null ? void 0 : _.contentWindow) == null || N.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(E) && i.current) {
-      const B = getElementByStyleId(
+      const _ = getElementByStyleId(
         i.current.contentDocument,
         first(E).id
       );
-      x(B ? [B] : [null]);
+      x(_ ? [_] : [null]);
     } else
       x([null]);
   }, [E]);
-  const C = useMemo(() => {
-    let B = IframeInitialContent;
-    return B = B.replace("__HTML_DIR__", S), o === "offline" && (B = B.replace(
+  const R = useMemo(() => {
+    let _ = IframeInitialContent;
+    return _ = _.replace("__HTML_DIR__", v), o === "offline" && (_ = _.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), B = B.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), B = B.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), B;
-  }, [o, S]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: R, onResize: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), _ = _.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(
     "div",
     {
       onClick: () => {
@@ -3654,7 +3662,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
           id: "canvas-iframe",
           style: { ...p, ...isEmpty(p) ? { width: `${n}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: C,
+          initialContent: R,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3777,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-PpTH-bSI.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-ouljm9CI.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, {}) }) }),
@@ -3852,8 +3860,8 @@ 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: C }, B) => {
-    B && (a(C), i.current = C);
+  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, _) => {
+    _ && (a(R), i.current = R);
   }, {
     bodyFont: u,
     headingFont: p,
@@ -3865,7 +3873,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     bodyBgLightColor: b,
     roundedCorners: k
   } = r;
-  let S = {
+  let v = {
     headingFont: y({
       title: c("Theme Config.Heading Font"),
       default: p,
@@ -3883,8 +3891,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     primaryColor: h({ title: c("Theme Config.Primary"), default: m }),
     secondaryColor: h({ title: c("Theme Config.Secondary"), default: E })
   };
-  l || (S = {
-    ...S,
+  l || (v = {
+    ...v,
     bodyBgLightColor: h({
       title: c("Theme Config.Background"),
       default: b
@@ -3902,13 +3910,13 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       default: x
     })
   });
-  const R = {
+  const C = {
     type: "object",
     properties: {}
-  }, _ = {};
-  return Object.keys(S).forEach((C) => {
-    const B = S[C];
-    return R.properties || (R.properties = {}), R.properties[C] = B.schema, _[C] = B.uiSchema, !0;
+  }, B = {};
+  return Object.keys(v).forEach((R) => {
+    const _ = v[R];
+    return C.properties || (C.properties = {}), C.properties[R] = _.schema, B[R] = _.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(
@@ -3920,8 +3928,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         omitExtraData: !0,
         liveOmit: !0,
         liveValidate: !0,
-        uiSchema: _,
-        schema: R,
+        uiSchema: B,
+        schema: C,
         formData: r,
         validator,
         onChange: d
@@ -4104,14 +4112,14 @@ 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: S, handleClick: R } = o, _ = (f) => {
+  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();
-  }, C = (f) => {
+  }, R = (f) => {
     f.isInternal && (u = f.isOpen, f.isOpen && f.close());
-  }, B = (f) => {
+  }, _ = (f) => {
     f.isInternal && u !== null && (u ? f.open() : f.close(), u = null);
   }, N = (f) => {
-    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), R(f);
+    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), C(f);
   };
   useEffect(() => {
     const f = setTimeout(() => {
@@ -4120,16 +4128,16 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     return () => clearTimeout(f);
   }, [b, o, k]);
   const L = useMemo(() => {
-    const f = Object.keys(j), v = [];
+    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/) && v.push("data"), I.match(/x-on/) && v.push("event"), I.match(/x-show|x-if/) && v.push("show");
+        I.match(/x-data/) && S.push("data"), I.match(/x-on/) && S.push("event"), I.match(/x-show|x-if/) && S.push("show");
       }
-    return v;
-  }, [j]), P = (f, v) => {
+    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", v);
+    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);
   };
@@ -4152,8 +4160,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
       style: n,
       "data-node-id": x,
       ref: i.includes(x) ? null : r,
-      onDragStart: () => C(o),
-      onDragEnd: () => B(o),
+      onDragStart: () => R(o),
+      onDragEnd: () => _(o),
       onDragOver: (f) => {
         f.preventDefault(), P(x, "yes");
       },
@@ -4176,12 +4184,12 @@ 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: _, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: B, 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 }) }),
-            S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
@@ -4586,7 +4594,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const k = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
+    const k = r.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
     k && (a._name = k.value);
   }
   if (i)
@@ -4604,14 +4612,14 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      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: ((m = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
-      maxWidth: ((x = (g = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : g.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];
+      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];
     });
   }
   if (a._type === "Input") {
@@ -4621,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" }), S = find(r.attributes, { key: "width" }), R = get(k, "value") ? `[${get(k, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${_} h-${R}`, C)}`.trim(), r.attributes = filter(r.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([r]), [a];
+    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];
   } else if (r.tagName == "option" && n && ((b = n.block) == null ? void 0 : b._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -4689,8 +4697,8 @@ function ExpandableObject(o) {
   useEffect(() => {
     g.current ? E(p(d, r, n)) : g.current = !0;
   }, [p]);
-  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", S = useComponentId(), R = d + 1, _ = a.length - 1, C = (B) => {
-    B.key === " " && (B.preventDefault(), j());
+  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());
   };
   return /* @__PURE__ */ createElement("div", {
     className: u.basicChildStyle,
@@ -4698,16 +4706,16 @@ function ExpandableObject(o) {
   }, /* @__PURE__ */ createElement("span", {
     className: b,
     onClick: j,
-    onKeyDown: C,
+    onKeyDown: R,
     role: "button",
     tabIndex: 0,
     "aria-label": k,
     "aria-expanded": x,
-    "aria-controls": x ? S : void 0
+    "aria-controls": x ? v : void 0
   }), n && (m ? /* @__PURE__ */ createElement("span", {
     className: u.clickableLabel,
     onClick: j,
-    onKeyDown: C,
+    onKeyDown: R,
     role: "button",
     tabIndex: -1
   }, n, ":") : /* @__PURE__ */ createElement("span", {
@@ -4715,20 +4723,20 @@ function ExpandableObject(o) {
   }, n, ":")), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
   }, i), x ? /* @__PURE__ */ createElement("div", {
-    id: S
-  }, a.map((B, N) => /* @__PURE__ */ createElement(DataRender, {
-    key: B[0] || N,
-    field: B[0],
-    value: B[1],
+    id: v
+  }, a.map((_, N) => /* @__PURE__ */ createElement(DataRender, {
+    key: _[0] || N,
+    field: _[0],
+    value: _[1],
     style: u,
-    lastElement: N === _,
-    level: R,
+    lastElement: N === B,
+    level: C,
     shouldExpandNode: p,
     clickToExpandNode: m
   }))) : /* @__PURE__ */ createElement("span", {
     className: u.collapsedContent,
     onClick: j,
-    onKeyDown: C,
+    onKeyDown: R,
     role: "button",
     tabIndex: -1,
     "aria-hidden": !0,
@@ -5202,7 +5210,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-3PCaHZ-A.js")), UploadImages = React__default.lazy(() => import("./UploadImages-Zr4jZDj5.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-nDgC7Fr9.js")), UploadImages = React__default.lazy(() => import("./UploadImages-9KvJB0jW.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5291,27 +5299,94 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
       className: "mt-1 rounded-md"
     }
   );
-}, LinkField = ({ schema: o, formData: n, onChange: r }) => {
-  const [a, l] = useState([]), i = useBuilderProp("getPages", () => []), { type: c = "page", href: d = "", target: u = "self" } = n;
-  return useEffect(() => {
-    (async () => {
-      const p = await i();
-      l(p || []);
+}, CollectionField = ({
+  formData: o,
+  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;
+  useEffect(() => {
+    const v = split((o == null ? void 0 : o.href) || "", ":"), C = get(v, 1, "pages") || "pages";
+    u(C), m(""), x([]), (async () => {
+      c("FETCHING_INIT_VALUE");
+      const B = await l(C, [get(v, 2, "pages")]);
+      B && Array.isArray(B) && m(get(B, [0, "name"], "")), c("");
     })();
-  }, []), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  }, [o.href]);
+  const E = useCallback(
+    debounce(async (v) => {
+      if (isEmpty(v))
+        x([]);
+      else {
+        const C = await l(d, v);
+        x(C);
+      }
+      c("");
+    }, 300),
+    [d]
+  ), b = (v) => {
+    const C = ["collection", d, v.id];
+    C[1] && r({ ...o, href: C.join(":") });
+  };
+  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(
+        "input",
+        {
+          type: "text",
+          value: p,
+          onChange: (v) => {
+            m(v.target.value), c("FETCHING_COLLECTION_ITEMS"), E(v.target.value);
+          },
+          placeholder: a(`Search ${j}`),
+          disabled: i === "FETCHING_INIT_VALUE",
+          className: "w-full rounded-md border border-gray-300 p-2"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { className: "absolute right-2 top-2 hidden h-5 w-5 pt-0.5 text-gray-400 group-hover:block" })
+    ] }),
+    i === "FETCHING_COLLECTION_ITEMS" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 pt-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) => {
+      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"}`,
+          children: [
+            v.name,
+            " ",
+            v.slug && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "font-light text-gray-500", children: [
+              "( ",
+              v.slug,
+              " )"
+            ] })
+          ]
+        },
+        v.id
+      );
+    }) })
+  ] });
+}, LinkField = ({ schema: o, formData: n, onChange: r }) => {
+  const { t: a } = useTranslation(), { type: l = "page", href: i = "#", target: c = "self" } = n, d = useBuilderProp("collections", []);
+  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: c, onChange: (p) => r({ ...n, type: p.target.value }), children: [
-        { const: "page", title: "Open Page" },
-        { const: "url", title: "Open URL" },
-        { const: "email", title: "Compose Email" },
-        { const: "telephone", title: "Call Phone" },
-        { const: "scroll", title: "Scroll to element" }
-      ].map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.const, children: p.title }, p.const)) }),
-      c === "page" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("select", { name: "href", value: d, onChange: (p) => r({ ...n, href: p.target.value || "#" }), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Choose page" }),
-        map(a, (p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.slug, children: p.name }, p.uuid))
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (u) => r({ ...n, type: u.target.value }), children: map(
+        [
+          ...isEmpty(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
+          { const: "url", title: a("Open URL") },
+          { const: "email", title: a("Compose Email") },
+          { 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)
+      ) }),
+      l === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(CollectionField, { formData: n, collections: d, onChange: r }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           autoCapitalize: "off",
@@ -5319,12 +5394,14 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           spellCheck: "false",
           name: "href",
           type: "text",
-          value: d,
-          onChange: (p) => r({ ...n, href: p.target.value || "#" }),
-          placeholder: c === "page" || c === "url" ? "Enter URL" : c === "scroll" ? "#ElementID" : "Enter detail"
+          value: i,
+          onChange: (u) => r({ ...n, href: u.target.value }),
+          placeholder: a(
+            l === "page" || l === "url" ? "Enter URL" : l === "scroll" ? "#ElementID" : "Enter details"
+          )
         }
       ),
-      (c === "page" || c === "url") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
+      l === "url" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
           {
@@ -5332,12 +5409,12 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
             autoCorrect: "off",
             spellCheck: "false",
             type: "checkbox",
-            defaultChecked: u === "_blank",
+            defaultChecked: c === "_blank",
             className: "!w-fit cursor-pointer rounded-md border border-border",
-            onChange: () => r({ ...n, target: u === "_blank" ? "_self" : "_blank" })
+            onChange: () => r({ ...n, target: c === "_blank" ? "_self" : "_blank" })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pt-1 text-xs", children: "Open in new tab" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pt-1 text-xs", children: a("Open in new tab") })
       ] })
     ] })
   ] });
@@ -5470,28 +5547,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, S) => {
+  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) => {
     if (k && (c == null ? void 0 : c._id) === n._id) {
-      const R = k.replace("root.", "");
-      a([n._id], { [R]: get(b, R) }, S);
+      const C = k.replace("root.", "");
+      a([n._id], { [C]: get(b, C) }, v);
     }
   }, m = useCallback(
-    debounce(({ formData: b }, k, S) => {
-      p({ formData: b }, k, S), d(b);
+    debounce(({ formData: b }, k, v) => {
+      p({ formData: b }, k, v), d(b);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), g = ({ formData: b }, k) => {
     if (k) {
-      const S = k.replace("root.", "");
+      const v = k.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(S, get(b, S.split(".")))
-      ), m({ formData: b }, k, { [S]: get(c, S) });
+        convertDotNotationToObject(v, get(b, v.split(".")))
+      ), m({ formData: b }, k, { [v]: get(c, v) });
     }
   }, x = keys(get(i, "_bindings", {})), j = useMemo(() => {
     const b = cloneDeep(get(l, "props", {}));
-    return each(b, (k, S) => {
-      get(k, "hidden", !1) && delete b[S];
+    return each(b, (k, v) => {
+      get(k, "hidden", !1) && delete b[v];
     }), 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: [
@@ -5581,14 +5658,14 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = g === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((C) => C._id === x))];
+            const b = g === "content" ? cloneDeep(getBlockWithChildren(x, d)) : [cloneDeep(d.find((R) => R._id === x))];
             set(b, "0._parent", null);
-            const k = u === p ? "" : u, S = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: R, error: _ } = S;
-            if (_) {
-              a(_);
+            const k = u === p ? "" : u, v = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: C, error: B } = v;
+            if (B) {
+              a(B);
               return;
             }
-            g === "styles" ? c(R) : i(R), E && E(S);
+            g === "styles" ? c(C) : i(C), E && E(v);
           } catch (b) {
             a(b);
           } finally {
@@ -5743,25 +5820,25 @@ const AskAIStyles = ({ blockId: o }) => {
   keys: ["name"]
 });
 function ManualClasses() {
-  var B;
-  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 = (B = first(n)) == null ? void 0 : B.prop, g = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), x = () => {
+  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 [v] = P, w = L.replace(v, "");
+      const [S] = P, w = L.replace(S, "");
       f = fuse.search(w).map((I) => ({
         ...I,
-        item: { ...I.item, name: v + I.item.name }
+        item: { ...I.item, name: S + I.item.name }
       }));
     } else
       f = fuse.search(L);
     return E(map(f, "item"));
   }, k = () => {
     E([]);
-  }, S = (N) => N.name, R = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), _ = {
+  }, v = (N) => N.name, C = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), B = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -5773,7 +5850,7 @@ function ManualClasses() {
     },
     onChange: (N, { newValue: L }) => u(L),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, C = () => {
+  }, R = () => {
     if (navigator.clipboard === void 0) {
       p({
         title: o("Clipboard not supported"),
@@ -5796,7 +5873,7 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o("classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: C, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: R, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: o("Copy classes to clipboard") }) })
             ] })
           ] }),
@@ -5815,9 +5892,9 @@ function ManualClasses() {
               suggestions: j,
               onSuggestionsFetchRequested: b,
               onSuggestionsClearRequested: k,
-              getSuggestionValue: S,
-              renderSuggestion: R,
-              inputProps: _,
+              getSuggestionValue: v,
+              renderSuggestion: C,
+              inputProps: B,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
               },
@@ -6506,50 +6583,50 @@ 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(""), [S, R] = useState(!1), [_, C] = useState(!1);
+  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);
   useEffect(() => {
-    const { value: f, unit: v } = getClassValueAndUnit(i);
-    if (v === "") {
+    const { value: f, unit: S } = getClassValueAndUnit(i);
+    if (S === "") {
       l(f), x(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    x(v), l(v === "class" || isEmpty(f) ? "" : f);
+    x(S), l(S === "class" || isEmpty(f) ? "" : f);
   }, [i, u, p]);
-  const B = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), N = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
+  const _ = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), N = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
     (f = !1) => {
-      const v = getUserInputValues(`${a}`, p);
-      if (get(v, "error", !1)) {
+      const S = getUserInputValues(`${a}`, p);
+      if (get(S, "error", !1)) {
         E(!0);
         return;
       }
-      const w = get(v, "unit") !== "" ? get(v, "unit") : g;
+      const w = get(S, "unit") !== "" ? get(S, "unit") : g;
       if (w === "auto" || w === "none") {
-        B(`${d}${w}`);
+        _(`${d}${w}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      f ? N(I) : B(I);
+      const I = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
+      f ? N(I) : _(I);
     },
-    [B, N, a, g, d, p]
+    [_, N, a, g, d, p]
   ), P = useCallback(
     (f) => {
-      const v = getUserInputValues(`${a}`, p);
-      if (get(v, "error", !1)) {
+      const S = getUserInputValues(`${a}`, p);
+      if (get(S, "error", !1)) {
         E(!0);
         return;
       }
       if (f === "auto" || f === "none") {
-        B(`${d}${f}`);
+        _(`${d}${f}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const w = get(v, "unit") !== "" ? get(v, "unit") : f, I = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      B(I);
+      const w = get(S, "unit") !== "" ? get(S, "unit") : f, I = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
+      _(I);
     },
-    [B, a, d, p]
+    [_, 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: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
@@ -6557,7 +6634,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       /* @__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 ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "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(
         "input",
@@ -6569,25 +6646,25 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           onKeyDown: (f) => {
             if (f.keyCode !== 38 && f.keyCode !== 40)
               return;
-            f.preventDefault(), C(!0);
-            const v = parseInt$1(f.target.value);
-            let w = isNaN$1(v) ? 0 : v;
+            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);
           },
           onKeyUp: (f) => {
-            _ && (f.preventDefault(), C(!1));
+            B && (f.preventDefault(), R(!1));
           },
           onBlur: () => L(),
           onChange: (f) => {
             E(!1), l(f.target.value);
           },
           onClick: (f) => {
-            var v;
-            (v = f == null ? void 0 : f.target) == null || v.select(), r(!1);
+            var S;
+            (S = f == null ? void 0 : f.target) == null || S.select(), r(!1);
           },
-          value: S ? b : a,
+          value: v ? 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"
@@ -6619,21 +6696,21 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(g) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(g) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => R(!0),
+        onDragStart: () => C(!0),
         onDragEnd: (f) => {
-          if (k(() => ""), R(!1), isEmpty(f))
+          if (k(() => ""), C(!1), isEmpty(f))
             return;
-          const v = `${f}`, A = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
-          B(A);
+          const S = `${f}`, A = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${g === "-" ? "" : g}]`;
+          _(A);
         },
         onDrag: (f) => {
           if (isEmpty(f))
             return;
           k(f);
-          const v = `${f}`, A = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${g === "-" ? "" : g}]`;
+          const S = `${f}`, A = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${g === "-" ? "" : g}]`;
           N(A);
         },
         currentValue: a,
@@ -6739,15 +6816,15 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       x(E, [f], L);
     },
     [E, u, m, p, l, x]
-  ), S = useCallback(() => {
+  ), v = useCallback(() => {
     j(E, [b]);
-  }, [E, b, j]), R = useMemo(() => canChangeClass(g, m), [g, m]);
+  }, [E, b, j]), C = useMemo(() => canChangeClass(g, m), [g, m]);
   useEffect(() => {
-    i(R, g);
-  }, [R, i, g]);
-  const [, , _] = useCanvasWidth(), C = useCallback(
+    i(C, g);
+  }, [C, i, g]);
+  const [, , B] = useCanvasWidth(), R = useCallback(
     (N) => {
-      _({
+      B({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6756,10 +6833,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         "2xl": 1920
       }[N]);
     },
-    [_]
-  ), B = get(g, "dark", null) === u && get(g, "mod", null) === p && get(g, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: R, canReset: g && B, 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 && !B ? "text-foreground" : ""}`, children: n(a) }) }),
+    [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) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6778,7 +6855,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: B ? /* @__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" }) }) : R && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__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(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6798,7 +6875,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             "button",
             {
               type: "button",
-              onClick: () => C(get(g, "mq")),
+              onClick: () => R(get(g, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -7056,8 +7133,8 @@ const BlockCard = ({
   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 S = has(k, "styles_attrs.data-page-section");
-    return k._type === "Box" && S;
+    const v = has(k, "styles_attrs.data-page-section");
+    return k._type === "Box" && v;
   }, E = useCallback(
     async (k) => {
       if (k.stopPropagation(), has(o, "component")) {
@@ -7065,23 +7142,23 @@ const BlockCard = ({
         return;
       }
       l(!0);
-      const S = await i(n, o);
-      isEmpty(S) || d(syncBlocksWithDefaults(S), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+      const v = await i(n, o);
+      isEmpty(v) || d(syncBlocksWithDefaults(v), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
     },
     [o]
   ), b = async (k) => {
-    const S = await i(n, o);
-    let R = r;
-    if (j(first(S)) && (R = null), !isEmpty(S)) {
-      const _ = { blocks: S, uiLibrary: !0, parent: R };
-      if (k.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
-        const C = new Image();
-        C.src = o.preview, C.onload = () => {
-          k.dataTransfer.setDragImage(C, 0, 0);
+    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 R = new Image();
+        R.src = o.preview, R.onload = () => {
+          k.dataTransfer.setDragImage(R, 0, 0);
         };
       } else
         k.dataTransfer.setDragImage(new Image(), 0, 0);
-      x(_), setTimeout(() => {
+      x(B), setTimeout(() => {
         u([]), p(), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
@@ -7122,9 +7199,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((R) => R.category === "custom"), c = a.find((R) => R.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 = (R) => {
+  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) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
-      j.current && g(R);
+      j.current && g(C);
     }, 300);
   };
   if (u)
@@ -7132,7 +7209,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, (R, _) => _ % 2 === 0), S = filter(x, (R, _) => _ % 2 === 1);
+  const k = filter(x, (C, B) => B % 2 === 0), v = filter(x, (C, B) => B % 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 }),
@@ -7140,22 +7217,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, (R, _) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (C, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => b(_),
+              onMouseEnter: () => b(B),
               onMouseLeave: () => clearTimeout(j.current),
-              onClick: () => g(_),
+              onClick: () => g(B),
               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",
-                _ === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                B === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(_.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(B.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            _
+            B
           ))
         ) })
       ] })
@@ -7168,10 +7245,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((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              k.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              S.map((R) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: R, library: c }))
+              v.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8249,32 +8326,32 @@ const AIUserPrompt = ({ blockId: o }) => {
       return;
     }
     if (i) {
-      const C = [...a, { key: i, value: d }];
-      r(C), l(a), c(""), u(""), x("");
+      const R = [...a, { key: i, value: d }];
+      r(R), l(a), c(""), u(""), x("");
     }
-  }, k = (C) => {
-    const B = a.filter((N, L) => L !== C);
-    r(B), l(B);
-  }, S = (C) => {
-    m(C), c(a[C].key), u(a[C].value);
-  }, R = () => {
+  }, k = (R) => {
+    const _ = a.filter((N, L) => L !== R);
+    r(_), l(_);
+  }, v = (R) => {
+    m(R), c(a[R].key), u(a[R].value);
+  }, C = () => {
     if (i.startsWith("@")) {
       x("Attribute keys cannot start with '@'");
       return;
     }
     if (p !== null && i) {
-      const C = [...a];
-      C[p] = { key: i, value: d }, r(C), l(C), m(null), c(""), u(""), x("");
+      const R = [...a];
+      R[p] = { key: i, value: d }, r(R), l(R), m(null), c(""), u(""), x("");
     }
-  }, _ = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), p !== null ? R() : b());
+  }, B = (R) => {
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? C() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (C) => {
-          C.preventDefault(), p !== null ? R() : b();
+        onSubmit: (R) => {
+          R.preventDefault(), p !== null ? C() : b();
         },
         className: "space-y-3",
         children: [
@@ -8290,7 +8367,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   id: "attrKey",
                   ref: j,
                   value: i,
-                  onChange: (C) => c(C.target.value),
+                  onChange: (R) => c(R.target.value),
                   placeholder: "Key",
                   className: "h-8 text-sm"
                 }
@@ -8308,8 +8385,8 @@ const AIUserPrompt = ({ blockId: o }) => {
                   rows: 2,
                   ref: E,
                   value: d,
-                  onChange: (C) => u(C.target.value),
-                  onKeyDown: _,
+                  onChange: (R) => u(R.target.value),
+                  onKeyDown: B,
                   placeholder: "Value",
                   className: "bg-background text-sm"
                 }
@@ -8321,22 +8398,22 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((C, B) => /* @__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, _) => /* @__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: C.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: C.value.toString() })
+        /* @__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: () => S(B), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(_), 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(B), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(_), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
-    ] }, B)) })
+    ] }, _)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8759,9 +8836,9 @@ const PageDataProviders = () => {
     (b) => !isNull(b)
   ), x = (b) => {
     const k = find(n, { providerKey: b });
-    c((S) => [...S, k]), a((S) => [...S, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
+    c((v) => [...v, k]), a((v) => [...v, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
   }, j = (b) => {
-    c((k) => filter(k, (S) => S.providerKey !== b.providerKey)), a((k) => filter(k, (S) => S.providerKey !== b.providerKey)), l("UNSAVED");
+    c((k) => filter(k, (v) => v.providerKey !== b.providerKey)), a((k) => filter(k, (v) => v.providerKey !== b.providerKey)), l("UNSAVED");
   }, E = (b) => m(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."),
@@ -8858,7 +8935,7 @@ const PageDataProviders = () => {
 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-AVw1fDtS.js"));
+const TopBar = lazy(() => import("./Topbar-Lvb5K8c2.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -9005,7 +9082,7 @@ const RootLayout = () => {
 }, useAutoSave = () => {
   const { savePage: o } = useSavePage(), n = useBuilderProp("autoSaveSupport", !0), r = useBuilderProp("autoSaveInterval", 60);
   useIntervalEffect(() => {
-    n && o();
+    n && o(!0);
   }, r * 1e3);
 }, ChaiBuilderComponent = (o) => {
   const [, n] = useBlocksStore(), [, r] = useBrandingOptions(), a = useBuilderReset(), [l] = useAtom(builderSaveStateAtom), i = useMemo(() => o.layout || RootLayout, [o.layout]);