@chaibuilder/sdk 1.2.108 → 1.2.110

package/dist/{index-e6K6XOp1.js → index-ylSqM31Z.js}

@@ -4,7 +4,7 @@ var U = (o, n, r) => (W(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 { a as Skeleton, B as Button, aA as ContextMenu, aB as ContextMenuTrigger, aC as ContextMenuContent, aD as ContextMenuItem, P as Tooltip, Q as TooltipTrigger, R as TooltipContent, C as Card, z as CardHeader, G as CardDescription, H as CardContent, L as Label, T as Textarea, E as CardFooter, D as Dialog, t as DialogTrigger, u as DialogContent, v as DialogHeader, x as DialogTitle, y as DialogDescription, w as DialogFooter, W as Popover, X as PopoverTrigger, Y as PopoverContent, ar as Command, at as CommandInput, au as CommandList, av as CommandEmpty, aw as CommandGroup, ax as CommandItem, K as Tabs, M as TabsList, N as TabsTrigger, O as TabsContent, d as Switch, A as Accordion, f as AccordionItem, g as AccordionTrigger, h as AccordionContent, ao as useToast, I as Input$1, V as TooltipPortal, a8 as DropdownMenu, a9 as DropdownMenuTrigger, aa as DropdownMenuContent, S as ScrollArea, ae as DropdownMenuLabel, af as DropdownMenuSeparator, ah as DropdownMenuGroup, ab as DropdownMenuItem, ag as DropdownMenuShortcut, k as AlertDialog, m as AlertDialogContent, n as AlertDialogHeader, p as AlertDialogTitle, l as AlertDialogTrigger, q as AlertDialogDescription, o as AlertDialogFooter, s as AlertDialogCancel, r as AlertDialogAction, ac as DropdownMenuCheckboxItem, Z as HoverCard, _ as HoverCardTrigger, $ as HoverCardContent, b as Separator, i as Badge, a0 as Select, a3 as SelectTrigger, a2 as SelectValue, a4 as SelectContent, a6 as SelectItem, U as TooltipProvider, aq as Toaster } from "./context-menu-YGd09SE1.js";
+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, 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 { 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";
@@ -19,7 +19,7 @@ import { useFeature, FlagsProvider } from "flagged";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, GearIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, EyeOpenIcon, Cross2Icon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ChevronDownIcon, ZoomInIcon, MixerHorizontalIcon, KeyboardIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, GearIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, DropdownMenuIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, TriangleRightIcon, EyeOpenIcon, Cross2Icon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, KeyboardIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { createEvent } from "react-event-hook";
 import typography$1 from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
@@ -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 = (j) => o.get(j), d = (j, v) => {
-    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(v);
-    const w = o.get(j);
-    if (o.set(j, v), r.has(j) || r.set(j, w), w && hasPromiseAtomValue(w)) {
-      const S = "v" in v ? v.v instanceof Promise ? v.v : Promise.resolve(v.v) : Promise.reject(v.e);
-      cancelPromise(w.v, S);
+  const c = (f) => o.get(f), d = (f, _) => {
+    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(_);
+    const C = o.get(f);
+    if (o.set(f, _), r.has(f) || r.set(f, C), C && hasPromiseAtomValue(C)) {
+      const w = "v" in _ ? _.v instanceof Promise ? _.v : Promise.resolve(_.v) : Promise.reject(_.e);
+      cancelPromise(C.v, w);
     }
-  }, p = (j, v, w) => {
-    const S = /* @__PURE__ */ new Map();
-    let T = !1;
-    w.forEach((L, P) => {
-      !L && P === j && (L = v), L ? (S.set(P, L), v.d.get(P) !== L && (T = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (T || v.d.size !== S.size) && (v.d = S);
-  }, u = (j, v, w) => {
-    const S = c(j), T = {
-      d: (S == null ? void 0 : S.d) || /* @__PURE__ */ new Map(),
-      v
+  }, u = (f, _, C) => {
+    const w = /* @__PURE__ */ new Map();
+    let I = !1;
+    C.forEach((N, D) => {
+      !N && D === f && (N = _), N ? (w.set(D, N), _.d.get(D) !== N && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (I || _.d.size !== w.size) && (_.d = w);
+  }, p = (f, _, C) => {
+    const w = c(f), I = {
+      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+      v: _
     };
-    if (w && p(j, T, w), S && isEqualAtomValue(S, T) && S.d === T.d)
-      return S;
-    if (S && hasPromiseAtomValue(S) && hasPromiseAtomValue(T) && isEqualPromiseAtomValue(S, T)) {
-      if (S.d === T.d)
-        return S;
-      T.v = S.v;
+    if (C && u(f, I, C), w && isEqualAtomValue(w, I) && w.d === I.d)
+      return w;
+    if (w && hasPromiseAtomValue(w) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(w, I)) {
+      if (w.d === I.d)
+        return w;
+      I.v = w.v;
     }
-    return d(j, T), T;
-  }, m = (j, v, w, S) => {
-    if (isPromiseLike$2(v)) {
-      let T;
-      const L = new Promise((P, V) => {
+    return d(f, I), I;
+  }, m = (f, _, C, w) => {
+    if (isPromiseLike$2(_)) {
+      let I;
+      const N = new Promise((D, V) => {
         let M = !1;
-        v.then(
+        _.then(
           (O) => {
             if (!M) {
               M = !0;
-              const $ = c(j), H = u(
-                j,
-                L,
-                w
+              const $ = c(f), H = p(
+                f,
+                N,
+                C
               );
-              resolvePromise(L, O), P(O), ($ == null ? void 0 : $.d) !== H.d && N(j, H, $ == null ? void 0 : $.d);
+              resolvePromise(N, O), D(O), ($ == null ? void 0 : $.d) !== H.d && T(f, H, $ == null ? void 0 : $.d);
             }
           },
           (O) => {
             if (!M) {
               M = !0;
-              const $ = c(j), H = u(
-                j,
-                L,
-                w
+              const $ = c(f), H = p(
+                f,
+                N,
+                C
               );
-              rejectPromise(L, O), V(O), ($ == null ? void 0 : $.d) !== H.d && N(j, H, $ == null ? void 0 : $.d);
+              rejectPromise(N, O), V(O), ($ == null ? void 0 : $.d) !== H.d && T(f, H, $ == null ? void 0 : $.d);
             }
           }
-        ), T = (O) => {
+        ), I = (O) => {
           M || (M = !0, O.then(
-            ($) => resolvePromise(L, $),
-            ($) => rejectPromise(L, $)
-          ), P(O));
+            ($) => resolvePromise(N, $),
+            ($) => rejectPromise(N, $)
+          ), D(O));
         };
       });
-      return L.orig = v, L.status = "pending", registerCancelPromise(L, (P) => {
-        P && T(P), S == null || S();
-      }), u(j, L, w);
+      return N.orig = _, N.status = "pending", registerCancelPromise(N, (D) => {
+        D && I(D), w == null || w();
+      }), p(f, N, C);
     }
-    return u(j, v, w);
-  }, x = (j, v, w) => {
-    const S = c(j), T = {
-      d: (S == null ? void 0 : S.d) || /* @__PURE__ */ new Map(),
-      e: v
+    return p(f, _, C);
+  }, g = (f, _, C) => {
+    const w = c(f), I = {
+      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+      e: _
     };
-    return w && p(j, T, w), S && isEqualAtomError(S, T) && S.d === T.d ? S : (d(j, T), T);
-  }, g = (j) => {
-    const v = c(j);
-    if (v && (v.d.forEach((M, O) => {
-      O !== j && !n.has(O) && g(O);
-    }), Array.from(v.d).every(([M, O]) => {
+    return C && u(f, I, C), w && isEqualAtomError(w, I) && w.d === I.d ? w : (d(f, I), I);
+  }, x = (f) => {
+    const _ = c(f);
+    if (_ && (_.d.forEach((M, O) => {
+      O !== f && !n.has(O) && x(O);
+    }), Array.from(_.d).every(([M, O]) => {
       const $ = c(M);
-      return M === j || $ === O || // TODO This is a hack, we should find a better solution.
+      return M === f || $ === O || // TODO This is a hack, we should find a better solution.
       $ && !hasPromiseAtomValue($) && isEqualAtomValue($, O);
     })))
-      return v;
-    const w = /* @__PURE__ */ new Map();
-    let S = !0;
-    const T = (M) => {
-      if (M === j) {
+      return _;
+    const C = /* @__PURE__ */ new Map();
+    let w = !0;
+    const I = (M) => {
+      if (M === f) {
         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 O = g(M);
-      return w.set(M, O), returnAtomValue(O);
+      const O = x(M);
+      return C.set(M, O), returnAtomValue(O);
     };
-    let L, P;
+    let N, D;
     const V = {
       get signal() {
-        return L || (L = new AbortController()), L.signal;
+        return N || (N = new AbortController()), N.signal;
       },
       get setSelf() {
-        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(j) && console.warn("setSelf function cannot be used with read-only atom"), !P && isActuallyWritableAtom(j) && (P = (...M) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && S && console.warn("setSelf function cannot be called in sync"), !S)
-            return B(j, ...M);
-        }), P;
+        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" && w && console.warn("setSelf function cannot be called in sync"), !w)
+            return B(f, ...M);
+        }), D;
       }
     };
     try {
-      const M = j.read(T, V);
+      const M = f.read(I, V);
       return m(
-        j,
+        f,
         M,
-        w,
-        () => L == null ? void 0 : L.abort()
+        C,
+        () => N == null ? void 0 : N.abort()
       );
     } catch (M) {
-      return x(j, M, w);
+      return g(f, M, C);
     } finally {
-      S = !1;
+      w = !1;
     }
-  }, E = (j) => returnAtomValue(g(j)), b = (j) => {
-    let v = n.get(j);
-    return v || (v = R(j)), v;
-  }, f = (j, v) => !v.l.size && (!v.t.size || v.t.size === 1 && v.t.has(j)), k = (j) => {
-    const v = n.get(j);
-    v && f(j, v) && A(j);
-  }, _ = (j) => {
-    const v = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new WeakMap(), S = (L) => {
-      const P = n.get(L);
-      P == null || P.t.forEach((V) => {
-        V !== L && (v.set(
+  }, j = (f) => returnAtomValue(x(f)), E = (f) => {
+    let _ = n.get(f);
+    return _ || (_ = R(f)), _;
+  }, b = (f, _) => !_.l.size && (!_.t.size || _.t.size === 1 && _.t.has(f)), k = (f) => {
+    const _ = n.get(f);
+    _ && b(f, _) && A(f);
+  }, v = (f) => {
+    const _ = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new WeakMap(), w = (N) => {
+      const D = n.get(N);
+      D == null || D.t.forEach((V) => {
+        V !== N && (_.set(
           V,
-          (v.get(V) || /* @__PURE__ */ new Set()).add(L)
-        ), w.set(V, (w.get(V) || 0) + 1), S(V));
+          (_.get(V) || /* @__PURE__ */ new Set()).add(N)
+        ), C.set(V, (C.get(V) || 0) + 1), w(V));
       });
     };
-    S(j);
-    const T = (L) => {
-      const P = n.get(L);
-      P == null || P.t.forEach((V) => {
+    w(f);
+    const I = (N) => {
+      const D = n.get(N);
+      D == null || D.t.forEach((V) => {
         var M;
-        if (V !== L) {
-          let O = w.get(V);
-          if (O && w.set(V, --O), !O) {
-            let $ = !!((M = v.get(V)) != null && M.size);
+        if (V !== N) {
+          let O = C.get(V);
+          if (O && C.set(V, --O), !O) {
+            let $ = !!((M = _.get(V)) != null && M.size);
             if ($) {
-              const H = c(V), F = g(V);
+              const H = c(V), F = x(V);
               $ = !H || !isEqualAtomValue(H, F);
             }
-            $ || v.forEach((H) => H.delete(V));
+            $ || _.forEach((H) => H.delete(V));
           }
-          T(V);
+          I(V);
         }
       });
     };
-    T(j);
-  }, C = (j, ...v) => {
-    let w = !0;
-    const S = (P) => returnAtomValue(g(P)), T = (P, ...V) => {
+    I(f);
+  }, S = (f, ..._) => {
+    let C = !0;
+    const w = (D) => returnAtomValue(x(D)), I = (D, ...V) => {
       let M;
-      if (P === j) {
-        if (!hasInitialValue(P))
+      if (D === f) {
+        if (!hasInitialValue(D))
           throw new Error("atom not writable");
-        const O = c(P), $ = m(P, V[0]);
-        (!O || !isEqualAtomValue(O, $)) && _(P);
+        const O = c(D), $ = m(D, V[0]);
+        (!O || !isEqualAtomValue(O, $)) && v(D);
       } else
-        M = C(P, ...V);
-      if (!w) {
-        const O = D();
+        M = S(D, ...V);
+      if (!C) {
+        const O = L();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
           ($) => $({ type: "async-write", flushed: O })
         );
       }
       return M;
-    }, L = j.write(S, T, ...v);
-    return w = !1, L;
-  }, B = (j, ...v) => {
-    const w = C(j, ...v), S = D();
+    }, N = f.write(w, I, ..._);
+    return C = !1, N;
+  }, B = (f, ..._) => {
+    const C = S(f, ..._), w = L();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (T) => T({ type: "write", flushed: S })
-    ), w;
-  }, R = (j, v) => {
-    const w = {
-      t: new Set(v && [v]),
+      (I) => I({ type: "write", flushed: w })
+    ), C;
+  }, R = (f, _) => {
+    const C = {
+      t: new Set(_ && [_]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(j, w), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(j), g(j).d.forEach((S, T) => {
-      const L = n.get(T);
-      L ? L.t.add(j) : T !== j && R(T, j);
-    }), g(j), isActuallyWritableAtom(j) && j.onMount) {
-      const S = j.onMount((...T) => B(j, ...T));
-      S && (w.u = S);
+    if (n.set(f, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(f), x(f).d.forEach((w, I) => {
+      const N = n.get(I);
+      N ? N.t.add(f) : I !== f && R(I, f);
+    }), x(f), isActuallyWritableAtom(f) && f.onMount) {
+      const w = f.onMount((...I) => B(f, ...I));
+      w && (C.u = w);
     }
-    return w;
-  }, A = (j) => {
-    var v;
-    const w = (v = n.get(j)) == null ? void 0 : v.u;
-    w && w(), n.delete(j), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(j);
-    const S = c(j);
-    S ? (hasPromiseAtomValue(S) && cancelPromise(S.v), S.d.forEach((T, L) => {
-      if (L !== j) {
-        const P = n.get(L);
-        P && (P.t.delete(j), f(L, P) && A(L));
+    return C;
+  }, A = (f) => {
+    var _;
+    const C = (_ = n.get(f)) == null ? void 0 : _.u;
+    C && C(), n.delete(f), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(f);
+    const w = c(f);
+    w ? (hasPromiseAtomValue(w) && cancelPromise(w.v), w.d.forEach((I, N) => {
+      if (N !== f) {
+        const D = n.get(N);
+        D && (D.t.delete(f), b(N, D) && A(N));
       }
-    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", j);
-  }, N = (j, v, w) => {
-    const S = new Set(v.d.keys());
-    w == null || w.forEach((T, L) => {
-      if (S.has(L)) {
-        S.delete(L);
+    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", f);
+  }, T = (f, _, C) => {
+    const w = new Set(_.d.keys());
+    C == null || C.forEach((I, N) => {
+      if (w.has(N)) {
+        w.delete(N);
         return;
       }
-      const P = n.get(L);
-      P && (P.t.delete(j), f(L, P) && A(L));
-    }), S.forEach((T) => {
-      const L = n.get(T);
-      L ? L.t.add(j) : n.has(j) && R(T, j);
+      const D = n.get(N);
+      D && (D.t.delete(f), b(N, D) && A(N));
+    }), w.forEach((I) => {
+      const N = n.get(I);
+      N ? N.t.add(f) : n.has(f) && R(I, f);
     });
-  }, D = () => {
-    let j;
-    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (j = /* @__PURE__ */ new Set()); r.size; ) {
-      const v = Array.from(r);
-      r.clear(), v.forEach(([w, S]) => {
-        const T = c(w);
-        if (T) {
-          T.d !== (S == null ? void 0 : S.d) && N(w, T, S == null ? void 0 : S.d);
-          const L = n.get(w);
-          L && !// TODO This seems pretty hacky. Hope to fix it.
+  }, L = () => {
+    let f;
+    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (f = /* @__PURE__ */ new Set()); r.size; ) {
+      const _ = Array.from(r);
+      r.clear(), _.forEach(([C, w]) => {
+        const I = c(C);
+        if (I) {
+          I.d !== (w == null ? void 0 : w.d) && T(C, I, w == null ? void 0 : w.d);
+          const N = n.get(C);
+          N && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (S && !hasPromiseAtomValue(S) && (isEqualAtomValue(S, T) || isEqualAtomError(S, T))) && (L.l.forEach((P) => P()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && j.add(w));
+          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, I) || isEqualAtomError(w, I))) && (N.l.forEach((D) => D()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && f.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((v) => v("state")), j;
-  }, I = (j, v) => {
-    const w = b(j), S = D(), T = w.l;
-    return T.add(v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("sub")), l.forEach(
-      (L) => L({ type: "sub", flushed: S })
+      return a.forEach((_) => _("state")), f;
+  }, P = (f, _) => {
+    const C = E(f), w = L(), I = C.l;
+    return I.add(_), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((N) => N("sub")), l.forEach(
+      (N) => N({ type: "sub", flushed: w })
     )), () => {
-      T.delete(v), k(j), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("unsub")), l.forEach((L) => L({ type: "unsub" })));
+      I.delete(_), k(f), (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: E,
+    get: j,
     set: B,
-    sub: I,
+    sub: P,
     // store dev methods (these are tentative and subject to change without notice)
-    dev_subscribe_store: (j, v) => v !== 2 ? (console.warn(
+    dev_subscribe_store: (f, _) => _ !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
-    ), a.add(j), () => {
-      a.delete(j);
-    }) : (l.add(j), () => {
-      l.delete(j);
+    ), a.add(f), () => {
+      a.delete(f);
+    }) : (l.add(f), () => {
+      l.delete(f);
     }),
     dev_get_mounted_atoms: () => i.values(),
-    dev_get_atom_state: (j) => o.get(j),
-    dev_get_mounted: (j) => n.get(j),
-    dev_restore_atoms: (j) => {
-      for (const [w, S] of j)
-        hasInitialValue(w) && (m(w, S), _(w));
-      const v = D();
+    dev_get_atom_state: (f) => o.get(f),
+    dev_get_mounted: (f) => n.get(f),
+    dev_restore_atoms: (f) => {
+      for (const [C, w] of f)
+        hasInitialValue(C) && (m(C, w), v(C));
+      const _ = L();
       l.forEach(
-        (w) => w({ type: "restore", flushed: v })
+        (C) => C({ type: "restore", flushed: _ })
       );
     }
   } : {
-    get: E,
+    get: j,
     set: B,
-    sub: I
+    sub: P
   };
 };
 let defaultStore;
@@ -374,86 +374,86 @@ function splitAtom(o, n) {
   return memo2$1(
     () => {
       const r = /* @__PURE__ */ new WeakMap(), a = (c, d) => {
-        let p = r.get(c);
-        if (p)
-          return p;
-        const u = d && r.get(d), m = [], x = [];
-        return c.forEach((g, E) => {
-          const b = n ? n(g) : E;
-          x[E] = b;
-          const f = u && u.atomList[u.keyList.indexOf(b)];
-          if (f) {
-            m[E] = f;
+        let u = r.get(c);
+        if (u)
+          return u;
+        const p = d && r.get(d), m = [], g = [];
+        return c.forEach((x, j) => {
+          const E = n ? n(x) : j;
+          g[j] = E;
+          const b = p && p.atomList[p.keyList.indexOf(E)];
+          if (b) {
+            m[j] = b;
             return;
           }
-          const k = (C) => {
-            const B = C(l), R = C(o), N = a(R, B == null ? void 0 : B.arr).keyList.indexOf(b);
-            if (N < 0 || N >= R.length) {
-              const D = c[a(c).keyList.indexOf(b)];
-              if (D)
-                return D;
+          const k = (S) => {
+            const B = S(l), R = S(o), T = a(R, B == null ? void 0 : B.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];
-          }, _ = (C, B, R) => {
-            const A = C(l), N = C(o), I = a(N, A == null ? void 0 : A.arr).keyList.indexOf(b);
-            if (I < 0 || I >= N.length)
+            return R[T];
+          }, v = (S, B, R) => {
+            const A = S(l), T = S(o), P = a(T, A == null ? void 0 : A.arr).keyList.indexOf(E);
+            if (P < 0 || P >= T.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const j = isFunction(R) ? R(N[I]) : R;
+            const f = isFunction(R) ? R(T[P]) : R;
             B(o, [
-              ...N.slice(0, I),
-              j,
-              ...N.slice(I + 1)
+              ...T.slice(0, P),
+              f,
+              ...T.slice(P + 1)
             ]);
           };
-          m[E] = isWritable(o) ? atom(k, _) : atom(k);
-        }), u && u.keyList.length === x.length && u.keyList.every((g, E) => g === x[E]) ? p = u : p = { arr: c, atomList: m, keyList: x }, r.set(c, p), p;
+          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), p = c(o);
-        return a(p, d == null ? void 0 : d.arr);
+        const d = c(l), u = c(o);
+        return a(u, d == null ? void 0 : d.arr);
       });
       (define_import_meta_env_default$1 ? "production" : void 0) !== "production" && (l.debugPrivate = !0), l.init = void 0;
       const i = isWritable(o) ? atom(
         (c) => c(l).atomList,
-        (c, d, p) => {
-          switch (p.type) {
+        (c, d, u) => {
+          switch (u.type) {
             case "remove": {
-              const u = c(i).indexOf(p.atom);
-              if (u >= 0) {
+              const p = c(i).indexOf(u.atom);
+              if (p >= 0) {
                 const m = c(o);
                 d(o, [
-                  ...m.slice(0, u),
-                  ...m.slice(u + 1)
+                  ...m.slice(0, p),
+                  ...m.slice(p + 1)
                 ]);
               }
               break;
             }
             case "insert": {
-              const u = p.before ? c(i).indexOf(p.before) : c(i).length;
-              if (u >= 0) {
+              const p = u.before ? c(i).indexOf(u.before) : c(i).length;
+              if (p >= 0) {
                 const m = c(o);
                 d(o, [
-                  ...m.slice(0, u),
-                  p.value,
-                  ...m.slice(u)
+                  ...m.slice(0, p),
+                  u.value,
+                  ...m.slice(p)
                 ]);
               }
               break;
             }
             case "move": {
-              const u = c(i).indexOf(p.atom), m = p.before ? c(i).indexOf(p.before) : c(i).length;
-              if (u >= 0 && m >= 0) {
-                const x = c(o);
-                u < m ? d(o, [
-                  ...x.slice(0, u),
-                  ...x.slice(u + 1, m),
-                  x[u],
-                  ...x.slice(m)
+              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)
                 ]) : d(o, [
-                  ...x.slice(0, m),
-                  x[u],
-                  ...x.slice(m, u),
-                  ...x.slice(u + 1)
+                  ...g.slice(0, m),
+                  g[p],
+                  ...g.slice(m, p),
+                  ...g.slice(p + 1)
                 ]);
               }
               break;
@@ -473,7 +473,7 @@ function createJSONStorage(o) {
   const a = {
     getItem: (l, i) => {
       var c, d;
-      const p = (m) => {
+      const u = (m) => {
         if (m = m || "", n !== m) {
           try {
             r = JSON.parse(m);
@@ -483,8 +483,8 @@ function createJSONStorage(o) {
           n = m;
         }
         return r;
-      }, u = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
-      return isPromiseLike$1(u) ? u.then(p) : p(u);
+      }, p = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
+      return isPromiseLike$1(p) ? p.then(u) : u(p);
     },
     setItem: (l, i) => {
       var c;
@@ -499,15 +499,15 @@ function createJSONStorage(o) {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const d = (p) => {
-      if (p.storageArea === o() && p.key === l) {
-        let u;
+    const d = (u) => {
+      if (u.storageArea === o() && u.key === l) {
+        let p;
         try {
-          u = JSON.parse(p.newValue || "");
+          p = JSON.parse(u.newValue || "");
         } catch {
-          u = c;
+          p = c;
         }
-        i(u);
+        i(p);
       }
     };
     return window.addEventListener("storage", d), () => {
@@ -524,13 +524,13 @@ function atomWithStorage(o, n, r = defaultStorage, a) {
   );
   return (define_import_meta_env_default$1 ? "production" : void 0) !== "production" && (i.debugPrivate = !0), i.onMount = (d) => {
     l || d(r.getItem(o, n));
-    let p;
-    return r.subscribe && (p = r.subscribe(o, d, n)), p;
+    let u;
+    return r.subscribe && (u = r.subscribe(o, d, n)), u;
   }, atom(
     (d) => d(i),
-    (d, p, u) => {
-      const m = typeof u == "function" ? u(d(i)) : u;
-      return m === RESET ? (p(i, n), r.removeItem(o)) : m instanceof Promise ? m.then((x) => (p(i, x), r.setItem(o, x))) : (p(i, m), r.setItem(o, m));
+    (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));
     }
   );
 }
@@ -554,26 +554,26 @@ const StoreContext = createContext(void 0), useStore = (o) => {
 });
 function useAtomValue(o, n) {
   const r = useStore(n), [[a, l, i], c] = useReducer(
-    (u) => {
+    (p) => {
       const m = r.get(o);
-      return Object.is(u[0], m) && u[1] === r && u[2] === o ? u : [m, r, o];
+      return Object.is(p[0], m) && p[1] === r && p[2] === o ? p : [m, r, o];
     },
     void 0,
     () => [r.get(o), r, o]
   );
   let d = a;
   (l !== r || i !== o) && (c(), d = r.get(o));
-  const p = n == null ? void 0 : n.delay;
+  const u = n == null ? void 0 : n.delay;
   return useEffect(() => {
-    const u = r.sub(o, () => {
-      if (typeof p == "number") {
-        setTimeout(c, p);
+    const p = r.sub(o, () => {
+      if (typeof u == "number") {
+        setTimeout(c, u);
         return;
       }
       c();
     });
-    return c(), u;
-  }, [r, o, p]), useDebugValue(d), isPromiseLike(d) ? use(d) : d;
+    return c(), p;
+  }, [r, o, u]), useDebugValue(d), isPromiseLike(d) ? use(d) : d;
 }
 function useSetAtom(o, n) {
   const r = useStore(n);
@@ -638,10 +638,10 @@ const getSlots = (o) => {
   filter(o, { _parent: n }).length > 0 && l.push(flatten(duplicateBlocks(o, n, a._id)));
   const i = flatten(l);
   return map(i, (c) => {
-    const d = c, p = getSlots(d);
-    return Object.keys(p).length > 0 && Object.keys(p).forEach((u) => {
-      const m = find(i, { oldId: p[u].replace("slot:", "") });
-      d[u] = `slot:${m._id}`;
+    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}`;
     }), omit(d, ["global", "oldId"]);
   });
 }, presentBlocksAtom = atom$1([]);
@@ -746,8 +746,8 @@ const useSelectedBlocksDisplayChild = () => ({
 }, getBlockJSONFromSchemas = (o, n, r) => {
   switch (o.type) {
     case "singular": {
-      const u = o.schema;
-      return u.title && (u.title = titleWithLang(n(u.title), r, get(o, "i18n"))), u.oneOf && Array.isArray(u.oneOf) && (u.oneOf = u.oneOf.map((m) => (m.title && (m.title = n(m.title)), m))), u;
+      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;
     }
     case "model":
       const { properties: a, title: l } = o, i = {
@@ -755,15 +755,15 @@ const useSelectedBlocksDisplayChild = () => ({
         type: "object",
         properties: {}
       };
-      return Object.keys(a).forEach((u) => {
-        const m = a[u];
+      return Object.keys(a).forEach((p) => {
+        const m = a[p];
         if (includes(["slot", "styles"], m.type))
           return;
-        const x = u;
-        i.properties[x] = getBlockJSONFromSchemas(m, n, r);
+        const g = p;
+        i.properties[g] = getBlockJSONFromSchemas(m, n, r);
       }), i;
     case "list":
-      const { itemProperties: c, title: d } = o, p = {
+      const { itemProperties: c, title: d } = o, u = {
         title: titleWithLang(n(d), r, get(o, "i18n")),
         type: "array",
         items: {
@@ -771,17 +771,17 @@ const useSelectedBlocksDisplayChild = () => ({
           properties: {}
         }
       };
-      return Object.keys(c).forEach((u) => {
-        const m = c[u];
+      return Object.keys(c).forEach((p) => {
+        const m = c[p];
         if (includes(["slot", "styles"], m.type))
           return;
-        const x = u;
-        p.items.properties[x] = getBlockJSONFromSchemas(m, n, r), set(
-          p.items,
+        const g = p;
+        u.items.properties[g] = getBlockJSONFromSchemas(m, n, r), set(
+          u.items,
           "title",
           titleWithLang(get(m, "itemTitle", `${n(d)} item`), r, get(m, "i18n"))
         );
-      }), p;
+      }), u;
     default:
       return {};
   }
@@ -833,8 +833,8 @@ var undomanager = { exports: {} };
     }
     let r = function() {
       let a = [], l = -1, i = 0, c = !1, d;
-      function p(u, m) {
-        return !u || typeof u[m] != "function" ? this : (c = !0, u[m](), c = !1, this);
+      function u(p, m) {
+        return !p || typeof p[m] != "function" ? this : (c = !0, p[m](), c = !1, this);
       }
       return {
         /**
@@ -844,25 +844,25 @@ var undomanager = { exports: {} };
          * @property {function} command.redo    - Redo function
          * @property {string} [command.groupId] - Optional group id
          */
-        add: function(u) {
-          return c ? this : (a.splice(l + 1, a.length - l), a.push(u), i && a.length > i && n(a, 0, -(i + 1)), l = a.length - 1, d && d(), this);
+        add: function(p) {
+          return c ? this : (a.splice(l + 1, a.length - l), a.push(p), i && a.length > i && n(a, 0, -(i + 1)), l = a.length - 1, d && d(), this);
         },
         /**
          * Pass a function to be called on undo and redo actions.
          * @property {function} callbackFunc - Callback function
          */
-        setCallback: function(u) {
-          d = u;
+        setCallback: function(p) {
+          d = p;
         },
         /**
          * Performs undo: call the undo function at the current index and decrease the index by 1.
          */
         undo: function() {
-          let u = a[l];
-          if (!u)
+          let p = a[l];
+          if (!p)
             return this;
-          const m = u.groupId;
-          for (; u.groupId === m && (p(u, "undo"), l -= 1, u = a[l], !(!u || !u.groupId)); )
+          const m = p.groupId;
+          for (; p.groupId === m && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -870,11 +870,11 @@ var undomanager = { exports: {} };
          * Performs redo: call the redo function at the next index and increase the index by 1.
          */
         redo: function() {
-          let u = a[l + 1];
-          if (!u)
+          let p = a[l + 1];
+          if (!p)
             return this;
-          const m = u.groupId;
-          for (; u.groupId === m && (p(u, "redo"), l += 1, u = a[l + 1], !(!u || !u.groupId)); )
+          const m = p.groupId;
+          for (; p.groupId === m && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -882,8 +882,8 @@ var undomanager = { exports: {} };
          * Clears the memory, losing all stored states. Resets the index.
          */
         clear: function() {
-          let u = a.length;
-          a = [], l = -1, d && u > 0 && d();
+          let p = a.length;
+          a = [], l = -1, d && p > 0 && d();
         },
         /**
          * Tests if any undo actions exist.
@@ -904,8 +904,8 @@ var undomanager = { exports: {} };
          * @param {string} [groupId] - Optionally filter commands by group ID
          * @returns {array}
          */
-        getCommands: function(u) {
-          return u ? a.filter((m) => m.groupId === u) : a;
+        getCommands: function(p) {
+          return p ? a.filter((m) => m.groupId === p) : a;
         },
         /**
          * Returns the index of the actions list.
@@ -918,8 +918,8 @@ var undomanager = { exports: {} };
          * Sets the maximum number of undo steps. Default: 0 (unlimited).
          * @property {number} max - Maximum number of undo steps
          */
-        setLimit: function(u) {
-          i = u;
+        setLimit: function(p) {
+          i = p;
         }
       };
     };
@@ -1063,13 +1063,13 @@ dataProvidersAtom.debugLabel = "dataProvidersAtom";
 const usePageDataProviders = () => useAtom$1(dataProvidersAtom), builderSaveStateAtom = atom$1("SAVED");
 builderSaveStateAtom.debugLabel = "builderSaveStateAtom";
 const useSavePage = () => {
-  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (p) => {
+  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 () => {
       n("SAVING"), a("SAVING");
-      const p = l();
-      return await r({ blocks: p.blocks, providers: i, brandingOptions: c, themeConfiguration: c }), setTimeout(() => {
+      const u = l();
+      return await r({ blocks: u.blocks, providers: i, brandingOptions: c, themeConfiguration: c }), setTimeout(() => {
         n("SAVED"), a("SAVED");
       }, 100), !0;
     },
@@ -1112,13 +1112,13 @@ function insertBlocksAtPosition(o, n, r, a) {
   r && (l = o.filter((d) => d._parent === r));
   const i = a !== void 0 ? a : l.length;
   let c = o.length;
-  for (let d = 0, p = 0; d < o.length; d++)
+  for (let d = 0, u = 0; d < o.length; d++)
     if (o[d]._parent === r) {
-      if (p === i) {
+      if (u === i) {
         c = d;
         break;
       }
-      p++;
+      u++;
     }
   return !r && a !== void 0 && a >= l.length && (c = o.length), [...o.slice(0, c), ...n, ...o.slice(c)];
 }
@@ -1148,7 +1148,7 @@ function moveBlocksWithChildren(o, n, r, a) {
   r = r || "root";
   const i = new TreeModel().parse({ _id: "root", children: getBlocksTree(o) });
   if (moveNode(i, n, r, a)) {
-    const c = flattenTree(i), d = c.find((p) => p._id === n);
+    const c = flattenTree(i), d = c.find((u) => u._id === n);
     return d && (d._parent = r === "root" ? null : r), c.shift(), c;
   }
   return o;
@@ -1195,82 +1195,82 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, f, k) => {
-      const _ = map(b, (B) => {
-        const A = n.find((I) => I._id === B)._parent || null, D = n.filter((I) => A ? I._parent === A : !I._parent).map((I) => I._id).indexOf(B);
-        return { _id: B, oldParent: A, oldPosition: D };
-      }), C = _.find(({ _id: B }) => B === b[0]);
-      C && C.oldParent === f && C.oldPosition === k || (i(b, f, k), o({
-        undo: () => each(_, ({ _id: B, oldParent: R, oldPosition: A }) => {
+    moveBlocks: (E, b, k) => {
+      const v = map(E, (B) => {
+        const A = n.find((P) => P._id === B)._parent || null, L = n.filter((P) => A ? P._parent === A : !P._parent).map((P) => P._id).indexOf(B);
+        return { _id: B, oldParent: A, oldPosition: L };
+      }), S = v.find(({ _id: B }) => B === E[0]);
+      S && S.oldParent === b && S.oldPosition === k || (i(E, b, k), o({
+        undo: () => each(v, ({ _id: B, oldParent: R, oldPosition: A }) => {
           i([B], R, A);
         }),
-        redo: () => i(b, f, k)
+        redo: () => i(E, b, k)
       }));
     },
-    addBlocks: (b, f, k) => {
-      a(b, f, k), o({
-        undo: () => l(map(b, "_id")),
-        redo: () => a(b, f, k)
+    addBlocks: (E, b, k) => {
+      a(E, b, k), o({
+        undo: () => l(map(E, "_id")),
+        redo: () => a(E, b, k)
       });
     },
-    removeBlocks: (b) => {
-      var C;
-      const f = (C = first(b)) == null ? void 0 : C._parent, _ = n.filter((B) => f ? B._parent === f : !B._parent).indexOf(first(b));
-      l(map(b, "_id")), o({
-        undo: () => a(b, f, _),
-        redo: () => l(map(b, "_id"))
+    removeBlocks: (E) => {
+      var S;
+      const b = (S = first(E)) == null ? void 0 : S._parent, v = n.filter((B) => b ? B._parent === b : !B._parent).indexOf(first(E));
+      l(map(E, "_id")), o({
+        undo: () => a(E, b, v),
+        redo: () => l(map(E, "_id"))
       });
     },
-    updateBlocks: (b, f, k) => {
-      let _ = [];
+    updateBlocks: (E, b, k) => {
+      let v = [];
       if (k)
-        _ = map(b, (C) => ({ _id: C, ...k }));
+        v = map(E, (S) => ({ _id: S, ...k }));
       else {
-        const C = keys(f);
-        _ = map(b, (B) => {
-          const R = n.find((N) => N._id === B), A = { _id: B };
-          return each(C, (N) => A[N] = R[N]), A;
+        const S = keys(b);
+        v = map(E, (B) => {
+          const R = n.find((T) => T._id === B), A = { _id: B };
+          return each(S, (T) => A[T] = R[T]), A;
         });
       }
-      c(map(b, (C) => ({ _id: C, ...f }))), o({
-        undo: () => c(_),
-        redo: () => c(map(b, (C) => ({ _id: C, ...f })))
+      c(map(E, (S) => ({ _id: S, ...b }))), o({
+        undo: () => c(v),
+        redo: () => c(map(E, (S) => ({ _id: S, ...b })))
       });
     },
-    updateBlocksRuntime: (b, f) => {
-      c(map(b, (k) => ({ _id: k, ...f })));
+    updateBlocksRuntime: (E, b) => {
+      c(map(E, (k) => ({ _id: k, ...b })));
     },
-    setNewBlocks: (b) => {
-      r(b), o({
+    setNewBlocks: (E) => {
+      r(E), o({
         undo: () => r(n),
-        redo: () => r(b)
+        redo: () => r(E)
       });
     },
-    updateMultipleBlocksProps: (b) => {
-      let f = [];
-      f = map(b, (k) => {
-        const _ = keys(k), C = n.find((R) => R._id === k._id), B = {};
-        return each(_, (R) => B[R] = C[R]), B;
-      }), c(b), o({
-        undo: () => c(f),
-        redo: () => c(b)
+    updateMultipleBlocksProps: (E) => {
+      let b = [];
+      b = map(E, (k) => {
+        const v = keys(k), S = n.find((R) => R._id === k._id), B = {};
+        return each(v, (R) => B[R] = S[R]), B;
+      }), c(E), o({
+        undo: () => c(b),
+        redo: () => c(E)
       });
     }
   };
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var g;
-      for (let E = 0; E < i.length; E++) {
-        const { _id: b } = i[E];
-        i[E]._id = generateUUID();
-        const f = filter(i, { _parent: b });
-        for (let k = 0; k < f.length; k++)
-          f[k]._parent = i[E]._id;
+      var x;
+      for (let j = 0; j < i.length; j++) {
+        const { _id: E } = i[j];
+        i[j]._id = generateUUID();
+        const b = filter(i, { _parent: E });
+        for (let k = 0; k < b.length; k++)
+          b[k]._parent = i[j]._id;
       }
-      const p = first(i);
-      let u, m;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, m = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, m = u._parent), r(i, m, d), n([(g = first(i)) == null ? void 0 : g._id]), first(i);
+      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);
     },
     [o, n]
   );
@@ -1280,29 +1280,29 @@ const useBlocksStoreManager = () => {
         const k = i.blocks;
         return a(k, c, d);
       }
-      const p = generateUUID(), u = getBlockDefaultProps(i.props), m = [];
-      forIn(u, (k, _) => {
+      const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
+      forIn(p, (k, v) => {
         if (startsWith(k, SLOT_KEY)) {
-          const C = k.replace(SLOT_KEY, "");
+          const S = k.replace(SLOT_KEY, "");
           m.push({
-            _id: C,
+            _id: S,
             _type: "Slot",
-            _parent: p,
-            _name: i.props[_].name,
-            _styles: i.props[_].styles,
-            _emptyStyles: i.props[_].emptyStyles
+            _parent: u,
+            _name: i.props[v].name,
+            _styles: i.props[v].styles,
+            _emptyStyles: i.props[v].emptyStyles
           });
         }
       });
-      const x = {
+      const g = {
         _type: i.type,
-        _id: p,
-        ...u
+        _id: u,
+        ...p
       };
-      let g, E;
-      c && (g = find(o, { _id: c }), x._parent = c, E = c), !canAcceptChildBlock(g == null ? void 0 : g._type, x._type) && g && (x._parent = g._parent, E = g._parent);
-      const f = [x, ...m];
-      return r(f, E, d), n([x._id]), x;
+      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;
     },
     [a, o, n]
   ), addPredefinedBlock: a };
@@ -2402,23 +2402,23 @@ function getNewClasses(o = "", n = "", r = []) {
   o = o.trim().replace(/  +/g, "");
   let a = filter(
     map(o.split(" "), constructClassObject),
-    (u) => !isNull(u)
-  ), l = filter(map(n.split(" "), constructClassObject), (u) => !isNull(u));
+    (p) => !isNull(p)
+  ), l = filter(map(n.split(" "), constructClassObject), (p) => !isNull(p));
   l = filter(
     l,
-    (u) => !includes(IGNORED_BASES_CLASSES_PROPERTIES, u.property)
+    (p) => !includes(IGNORED_BASES_CLASSES_PROPERTIES, p.property)
   );
   const i = [], c = [];
-  each(r, (u) => {
-    const m = constructClassObject(u), x = find(a, pick(m, ["dark", "mq", "mod", "property"]));
-    if (x && (a = filter(
+  each(r, (p) => {
+    const m = constructClassObject(p), g = find(a, pick(m, ["dark", "mq", "mod", "property"]));
+    if (g && (a = filter(
       a,
-      (g) => g.fullCls !== (x == null ? void 0 : x.fullCls)
-    )), i.push(m), m.mq === "xs" && !m.dark && m.mod === "" && (l = filter(l, (g) => g.property !== m.property)), getBelongsToForClass(a, m) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, m.property)) {
-      const g = find(l, pick(m, ["property"]));
-      x && (l = filter(
+      (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(
         l,
-        (E) => E.fullCls !== (g == null ? void 0 : g.fullCls)
+        (j) => j.fullCls !== (x == null ? void 0 : x.fullCls)
       )), c.push({
         ...m,
         fullCls: m.cls,
@@ -2427,11 +2427,11 @@ function getNewClasses(o = "", n = "", r = []) {
     }
   });
   const d = map(
-    sortBy([...a, ...i], (u) => MEDIA_QUERIES[u.mq]),
+    sortBy([...a, ...i], (p) => MEDIA_QUERIES[p.mq]),
     "fullCls"
   ).join(" ");
   return `${map(
-    sortBy([...l, ...c], (u) => MEDIA_QUERIES[u.mq]),
+    sortBy([...l, ...c], (p) => MEDIA_QUERIES[p.mq]),
     "fullCls"
   ).join(" ").trim()},${d.trim()}`.trim().replace(/  +/g, "");
 }
@@ -2449,10 +2449,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: u, classes: m } = getSplitClasses$1(p);
+    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: m } = getSplitClasses$1(u);
     return {
       ids: [d._id],
-      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(m, u, a)}` }
+      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(m, p, a)}` }
     };
   });
 }), useAddClassesToBlocks = () => {
@@ -2501,13 +2501,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((g) => g._id === c);
+        const d = o.find((x) => x._id === c);
         l || (l = d._parent);
         const m = filter(
           o,
-          (g) => isString$1(l) ? g._parent === l : !d._parent
-        ).indexOf(d) + 1, x = getDuplicatedBlocks(o, c, l);
-        r(x, l, m), i.push(get(x, "0._id", ""));
+          (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", ""));
       }), n(i);
     },
     [o, n]
@@ -2548,8 +2548,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     ),
     pasteBlocks: useCallback(
       (d) => {
-        const p = Array.isArray(d) ? d[0] : d;
-        isEmpty(o) ? l(n, d) : a(o, p), r([]);
+        const u = Array.isArray(d) ? d[0] : d;
+        isEmpty(o) ? l(n, d) : a(o, u), r([]);
       },
       [n, o, a, l, r]
     )
@@ -2569,20 +2569,20 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   );
   return map(i, (c) => {
-    const d = o(c), p = a;
-    let { classes: u, baseClasses: m } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(p, (x) => {
-      const g = x.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${g}($| )`, "g");
-      u = u.replace(E, " ").replace(/  +/g, " ").trim();
-      const b = first(x.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(x.split(":").pop().trim());
-    }), each(p, (x) => {
-      const g = new RegExp(`(^| )${x.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
-      m = m.replace(g, " ").replace(/  +/g, " ").trim();
+    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");
+      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();
     }), {
       ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${m},${u}`
+        [l.prop]: `${STYLES_KEY}${m},${p}`
       }
     };
   });
@@ -2680,10 +2680,10 @@ const useLanguages = () => {
         const c = r[i];
         if (isString$1(c)) {
           const d = chunk(c.split(""), 12);
-          let p = "";
+          let u = "";
           o([n], { [i]: "" });
-          for (let u = 0; u < d.length; u++)
-            p += d[u].join(""), o([n], { [i]: p }), await new Promise((m) => setTimeout(m, a));
+          for (let p = 0; p < d.length; p++)
+            u += d[p].join(""), o([n], { [i]: u }), await new Promise((m) => setTimeout(m, a));
         }
       }
     },
@@ -2748,18 +2748,18 @@ const xShowBlocksAtom = atom$1([]);
 xShowBlocksAtom.debugLabel = "xShowBlocksAtom";
 const selectedLibraryAtom = atomWithStorage("_selectedLibrary", null);
 selectedLibraryAtom.debugLabel = "selectedLibraryAtom";
-let lastHighlighted$1 = null;
+let lastHighlighted = null;
 const useBlockHighlight = () => {
   const [o] = useAtom$1(canvasIframeAtom);
   return { highlightBlock: (a) => {
     var c;
     const l = o.contentDocument || ((c = o.contentWindow) == null ? void 0 : c.document);
-    lastHighlighted$1 && lastHighlighted$1.removeAttribute("data-highlighted");
+    lastHighlighted && lastHighlighted.removeAttribute("data-highlighted");
     const i = l.querySelector(`[data-block-id="${a}"]`);
-    i ? (i.setAttribute("data-highlighted", "true"), lastHighlighted$1 = i) : lastHighlighted$1 = null;
+    i ? (i.setAttribute("data-highlighted", "true"), lastHighlighted = i) : lastHighlighted = null;
   }, clearHighlight: () => {
-    lastHighlighted$1 && (lastHighlighted$1.removeAttribute("data-highlighted"), lastHighlighted$1 = null);
-  } };
+    lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
+  }, lastHighlighted };
 }, globalBlocksStoreAtom = atom({}), globalBlocksLoadingStateAtom = atom({}), useGlobalBlocksStore = () => {
   const [o, n] = useAtom(globalBlocksStoreAtom), r = useCallback(
     (l) => get(o, l == null ? void 0 : l.globalBlock, []),
@@ -2769,18 +2769,18 @@ const useBlockHighlight = () => {
   }, [n]);
   return { getGlobalBlocks: r, reset: a };
 }, useWatchGlobalBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((p) => p._type === "GlobalBlock").filter((p) => p._type === "GlobalBlock").map((p) => p.globalBlock), [o]);
+  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((u) => u._type === "GlobalBlock").filter((u) => u._type === "GlobalBlock").map((u) => u.globalBlock), [o]);
   useEffect(() => {
     forEach(c, (d) => {
-      has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
-        r((u) => ({ ...u, [d]: p })), l((u) => ({
-          ...u,
+      has(n, d) || get(a, `${d}.loading`, !1) || (l((u) => ({ ...u, [d]: { loading: !0, error: null } })), i(d).then((u) => {
+        r((p) => ({ ...p, [d]: u })), l((p) => ({
+          ...p,
           [d]: { loading: !1, error: null }
         }));
-      }).catch((p) => {
-        l((u) => ({
-          ...u,
-          [d]: { loading: !1, error: p.message }
+      }).catch((u) => {
+        l((p) => ({
+          ...p,
+          [d]: { loading: !1, error: u.message }
         }));
       }));
     });
@@ -2878,24 +2878,24 @@ const useBlockHighlight = () => {
   </body>
 </html>`, useCanvasScale = (o) => {
   const [n] = useCanvasWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
-    const { width: d, height: p } = o;
+    const { width: d, height: u } = o;
     if (d < n) {
-      const u = parseFloat((d / n).toFixed(2).toString());
+      const p = parseFloat((d / n).toFixed(2).toString());
       let m = {};
-      const x = p * u, g = d * u;
-      p && (m = {
+      const g = u * p, x = d * p;
+      u && (m = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - x) / x * 100 + "%",
-        width: 100 + (d - g) / g * 100 + "%"
+        height: 100 + (u - g) / g * 100 + "%",
+        width: 100 + (d - x) / x * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
-        transform: `scale(${u})`,
+        transform: `scale(${p})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
         ...m,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
-      }), r(u * 100);
+      }), r(p * 100);
     } else
       i({}), r(100);
   }, [n, o, a, r]);
@@ -3016,8 +3016,8 @@ let iframeDocument = null, possiblePositions = [], dropTarget = null, dropIndex
 const positionPlaceholder = (o, n, r) => {
   if (!iframeDocument || !o)
     return;
-  const a = iframeDocument == null ? void 0 : iframeDocument.getElementById("placeholder"), l = possiblePositions.map(([p]) => p), i = l.reduce(
-    (p, u) => Math.abs(u - r) < Math.abs(p - r) ? u : p,
+  const a = iframeDocument == null ? void 0 : iframeDocument.getElementById("placeholder"), l = possiblePositions.map(([u]) => u), i = l.reduce(
+    (u, p) => Math.abs(p - r) < Math.abs(u - r) ? p : u,
     0
   ), c = l.indexOf(i);
   if (!possiblePositions[c])
@@ -3062,41 +3062,41 @@ function removeDataDrop() {
   o && o.removeAttribute("data-drop");
 }
 const useDnd = () => {
-  const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
+  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 x = () => {
-    removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
+  const g = () => {
+    removePlaceholder(), r(!1), u(null), p(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (g) => {
-      g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
+    onDragOver: (x) => {
+      x.preventDefault(), x.stopPropagation(), throttledDragOver(x);
     },
-    onDrop: (g) => {
+    onDrop: (x) => {
       var R;
-      const E = dropTarget, f = getOrientation(E) === "vertical" ? g.clientY + ((R = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : R.scrollY) : g.clientX;
-      dropIndex = calculateDropIndex(f, possiblePositions);
-      const k = d, _ = E.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === _ || !C) {
-        x();
+      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"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === v || !S) {
+        g();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, _ === "canvas" ? null : _, dropIndex), setTimeout(x, 300);
+        a(k, v === "canvas" ? null : v, dropIndex), setTimeout(g, 300);
         return;
       }
-      let B = E.getAttribute("data-block-id");
-      B === null && (B = g.target.parentElement.getAttribute("data-block-id")), c([k._id], B === "canvas" ? null : B, dropIndex), x(), 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: (g) => {
-      const E = g, b = E.target;
-      dropTarget = b;
-      const f = b.getAttribute("data-block-id"), k = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(f), E.stopPropagation(), E.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(b), r(!0), l(""), i([]);
+    onDragEnter: (x) => {
+      const j = x, E = j.target;
+      dropTarget = E;
+      const b = E.getAttribute("data-block-id"), k = E.getAttribute("data-dnd-dragged") !== "yes";
+      p(b), j.stopPropagation(), j.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(E), r(!0), l(""), i([]);
     },
-    onDragLeave: (g) => {
-      g.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (x) => {
+      x.target.getAttribute("data-block-id") === "canvas" && (p(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3114,113 +3114,109 @@ function destroyQuill(o) {
   n && n.parentNode.removeChild(n), o = null;
 }
 const useHandleCanvasDblClick = () => {
-  const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom);
-  return (l) => {
-    var m;
+  const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
+  return (i) => {
+    var g;
     if (r)
       return;
-    const i = getTargetedBlock(l.target), c = i.getAttribute("data-block-type");
-    if (!c || !o.includes(c))
+    const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
+    if (!d || !o.includes(d))
       return;
-    const d = i.cloneNode(!0);
-    i.style.display = "none", Array.from(d.attributes).forEach((x) => {
-      x.name !== "class" && d.removeAttribute(x.name);
-    }), c === "Text" && (d.style.display = "inline-block"), i.parentNode.insertBefore(d, i.nextSibling);
-    const p = new Quill(d, { placeholder: "Type here..." });
-    function u() {
+    const u = c.cloneNode(!0);
+    c.style.display = "none", Array.from(u.attributes).forEach((x) => {
+      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() {
       const x = p.getText(0, p.getLength());
-      n([i.getAttribute("data-block-id")], { content: x }), i.removeAttribute("style"), d.removeEventListener("blur", u, !0), destroyQuill(p), a(""), lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
+      n([c.getAttribute("data-block-id")], { content: x }), c.removeAttribute("style"), u.removeEventListener("blur", m, !0), destroyQuill(p), a(""), l();
     }
-    d.addEventListener("blur", u, !0), d.addEventListener("keydown", (x) => {
-      (x.key === "Enter" || x.key === "Escape") && u();
-    }), p.focus(), (m = d.querySelector(".ql-clipboard")) == null || m.remove(), a(i.getAttribute("data-block-id"));
+    u.addEventListener("blur", m, !0), 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"));
   };
 }, useHandleCanvasClick = () => {
-  const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom);
-  return (i) => {
+  const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
+  return (c) => {
     if (a)
       return;
-    i.stopPropagation();
-    const c = getTargetedBlock(i.target);
-    if (c != null && c.getAttribute("data-block-id") && (c == null ? void 0 : c.getAttribute("data-block-id")) === "container") {
-      r([]), o([]), lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
+    c.stopPropagation();
+    const d = getTargetedBlock(c.target);
+    if (d != null && d.getAttribute("data-block-id") && (d == null ? void 0 : d.getAttribute("data-block-id")) === "container") {
+      r([]), o([]), i();
       return;
     }
-    if (c != null && c.getAttribute("data-block-parent")) {
-      const d = c.getAttribute("data-style-prop"), p = c.getAttribute("data-style-id"), u = c.getAttribute("data-block-parent");
-      n.includes(u) || l == null || l.closeAll(), o([{ id: p, prop: d, blockId: u }]), r([u]);
-    } else if (c != null && c.getAttribute("data-block-id")) {
-      const d = c.getAttribute("data-block-id");
-      n.includes(d) || l == null || l.closeAll(), o([]), r(d === "canvas" ? [] : [d]);
+    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]);
+    } 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]);
     }
-    lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
-  };
-};
-let lastHighlighted = null;
-const handleMouseMove = throttle((o) => {
-  lastHighlighted && lastHighlighted.removeAttribute("data-highlighted");
-  const n = getTargetedBlock(o.target);
-  n ? (n.setAttribute("data-highlighted", "true"), lastHighlighted = n) : lastHighlighted = null;
-}, 16), useHandleMouseMove = () => {
-  const [o] = useAtom$1(inlineEditingActiveAtom);
-  return (n) => {
-    o || handleMouseMove(n);
+    i();
   };
-}, clearHighlight = () => {
-  lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
-}, useHandleMouseLeave = () => clearHighlight, Canvas = ({ children: o }) => {
-  const { document: n } = useFrame(), [r] = useSelectedBlockIds(), [a, l] = useSelectedStylingBlocks();
-  useEffect(() => () => {
-    clearHighlight();
-  }, []), useEffect(() => {
+}, useHandleMouseMove = () => {
+  const [o] = useAtom$1(inlineEditingActiveAtom), { highlightBlock: n } = useBlockHighlight();
+  return throttle((r) => {
+    if (o)
+      return;
+    const a = getTargetedBlock(r.target);
+    a && n(a.getAttribute("data-block-id"));
+  }, 16);
+}, useHandleMouseLeave = () => {
+  const { clearHighlight: o } = useBlockHighlight();
+  return o;
+}, Canvas = ({ children: o }) => {
+  const { document: n } = useFrame(), [r] = useSelectedBlockIds(), [a, l] = useSelectedStylingBlocks(), { clearHighlight: i } = useBlockHighlight();
+  useEffect(() => i, [i]), useEffect(() => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const m = getElementByDataBlockId(n, first(r));
-      if (m) {
-        const x = m.getAttribute("data-style-prop");
+      const g = getElementByDataBlockId(n, first(r));
+      if (g) {
+        const x = g.getAttribute("data-style-prop");
         if (x) {
-          const g = m.getAttribute("data-style-id"), E = m.getAttribute("data-block-parent");
-          l([{ id: g, prop: x, blockId: E }]);
+          const j = g.getAttribute("data-style-id"), E = g.getAttribute("data-block-parent");
+          l([{ id: j, prop: x, blockId: E }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
-  const i = useHandleCanvasDblClick(), c = useHandleCanvasClick(), d = useHandleMouseMove(), p = useHandleMouseLeave(), u = useDnd();
+  const c = useHandleCanvasDblClick(), d = useHandleCanvasClick(), u = useHandleMouseMove(), p = useHandleMouseLeave(), m = useDnd();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       "data-block-id": "canvas",
       id: "canvas",
-      onClick: c,
-      onDoubleClick: i,
-      onMouseMove: d,
+      onClick: d,
+      onDoubleClick: c,
+      onMouseMove: u,
       onMouseLeave: p,
-      ...omit(u, "isDragging"),
-      className: "relative h-full max-w-full p-px " + (u.isDragging ? "dragging" : ""),
+      ...omit(m, "isDragging"),
+      className: "relative h-full max-w-full p-px " + (m.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(), [, p] = useCopyBlockIds(), { canPaste: u, pasteBlocks: m } = 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", () => p(n), {}, [n, p]), useHotkeys(
+  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: m } = 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",
     () => {
-      u(n[0]) && m(n);
+      p(n[0]) && m(n);
     },
     {},
-    [n, u, m]
+    [n, p, m]
   );
-  const x = o ? { document: o } : {};
-  useHotkeys("esc", () => r([]), x, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...x, preventDefault: !0 }, [
+  const g = o ? { document: o } : {};
+  useHotkeys("esc", () => r([]), g, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...g, preventDefault: !0 }, [
     n,
     l
   ]), useHotkeys(
     "del, backspace",
-    (g) => {
-      g.preventDefault(), a(n);
+    (x) => {
+      x.preventDefault(), a(n);
     },
-    x,
+    g,
     [n, a]
   );
 }, KeyboardHandler = () => {
@@ -3249,7 +3245,7 @@ const handleMouseMove = throttle((o) => {
     }
   );
 }, BlockActionsStatic = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: p, refs: u, update: m } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: m } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
@@ -3257,33 +3253,33 @@ const handleMouseMove = throttle((o) => {
     }
   });
   useResizeObserver(o, () => m(), o !== null);
-  const x = get(n, "_parent", null), g = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const g = 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",
     {
       role: "button",
       tabIndex: 0,
-      ref: u.setFloating,
-      style: p,
-      onClick: (E) => {
-        E.stopPropagation(), E.preventDefault();
+      ref: p.setFloating,
+      style: u,
+      onClick: (j) => {
+        j.stopPropagation(), j.preventDefault();
       },
-      onMouseEnter: (E) => {
-        E.stopPropagation(), i(null);
+      onMouseEnter: (j) => {
+        j.stopPropagation(), i(null);
       },
-      onKeyDown: (E) => E.stopPropagation(),
+      onKeyDown: (j) => j.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        x && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        g && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([x]);
+              c([]), l([g]);
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: g, block: n }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: x, block: n }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlusIcon,
@@ -3306,29 +3302,29 @@ const handleMouseMove = throttle((o) => {
     }
   ) });
 }, HeadTags = () => {
-  const [o] = useBrandingOptions(), [n] = useSelectedBlockIds(), [r] = useDarkMode(), [a] = useSelectedStylingBlocks(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), { document: c, window: d } = useFrame(), [p] = useState(c == null ? void 0 : c.getElementById("highlighted-block")), [u] = useState(
+  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")
-  ), [x] = useState(
+  ), [g] = useState(
     c == null ? void 0 : c.getElementById("dragged-block")
   );
   useEffect(() => {
     r ? c == null || c.documentElement.classList.add("dark") : c == null || c.documentElement.classList.remove("dark");
   }, [r, c]);
-  const g = get(o, "headingFont", "DM Sans"), E = get(o, "bodyFont", "DM Sans");
+  const x = get(o, "headingFont", "DM Sans"), j = get(o, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const b = get(o, "primaryColor", "#000"), f = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), _ = get(o, "bodyBgDarkColor", "#000"), C = get(o, "bodyTextDarkColor", "#000"), B = get(o, "bodyTextLightColor", "#fff"), R = s({
-      colors: [b, f],
+    const E = get(o, "primaryColor", "#000"), b = get(o, "secondaryColor", "#FFF"), k = get(o, "bodyBgLightColor", "#fff"), v = get(o, "bodyBgDarkColor", "#000"), S = get(o, "bodyTextDarkColor", "#000"), B = get(o, "bodyTextLightColor", "#fff"), R = s({
+      colors: [E, b],
       names: ["primary", "secondary"]
     });
-    set(R, "primary.DEFAULT", b), set(R, "secondary.DEFAULT", f);
+    set(R, "primary.DEFAULT", E), set(R, "secondary.DEFAULT", b);
     const A = {
       "bg-light": k,
-      "bg-dark": _,
-      "text-dark": C,
+      "bg-dark": v,
+      "text-dark": S,
       "text-light": B
-    }, N = get(o, "roundedCorners", "0");
+    }, T = get(o, "roundedCorners", "0");
     !d || !d.tailwind || (d.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -3341,11 +3337,11 @@ const handleMouseMove = throttle((o) => {
             }
           },
           fontFamily: {
-            heading: [g],
-            body: [E]
+            heading: [x],
+            body: [j]
           },
           borderRadius: {
-            DEFAULT: `${N || "0"}px`
+            DEFAULT: `${T || "0"}px`
           },
           colors: { ...A, ...R }
         }
@@ -3354,60 +3350,60 @@ const handleMouseMove = throttle((o) => {
         typography$1,
         forms,
         aspectRatio,
-        plugin(function({ addBase: D, theme: I }) {
-          D({
+        plugin(function({ addBase: L, theme: P }) {
+          L({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: I("fontFamily.heading")
+              fontFamily: P("fontFamily.heading")
             },
             body: {
-              fontFamily: I("fontFamily.body"),
-              color: I("colors.text-light"),
-              backgroundColor: I("colors.bg-light")
+              fontFamily: P("fontFamily.body"),
+              color: P("colors.text-light"),
+              backgroundColor: P("colors.bg-light")
             },
             ".dark body": {
-              color: I("colors.text-dark"),
-              backgroundColor: I("colors.bg-dark")
+              color: P("colors.text-dark"),
+              backgroundColor: P("colors.bg-dark")
             }
           });
         })
       ]
     });
-  }, [o, d, g, E]), useEffect(() => {
-    u && (u.textContent = `${map(n, (b) => `[data-block-id="${b}"]`).join(",")}{
+  }, [o, d, x, j]), useEffect(() => {
+    p && (p.textContent = `${map(n, (E) => `[data-block-id="${E}"]`).join(",")}{
                 outline: 1px solid ${n.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
-  }, [n, u]), useEffect(() => {
-    x.textContent = l ? `[data-block-id="${l._id}"], [data-block-id="${l._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [l, x]), useEffect(() => {
-    p && (p.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
-  }, [p]), useEffect(() => {
-    m && (m.textContent = `${map(a, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+  }, [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(() => {
+    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(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
   }, [a, m]), 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: (g || E) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [i]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (x || j) && /* @__PURE__ */ jsxRuntimeExports.jsx(
     "link",
     {
       rel: "stylesheet",
-      href: `https://fonts.googleapis.com/css2?family=${g ? `${g.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${g && E && g !== E ? "&" : ""}${E && E !== g ? `family=${E.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
+      href: `https://fonts.googleapis.com/css2?family=${x ? `${x.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${x && j && x !== j ? "&" : ""}${j && j !== x ? `family=${j.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
     }
   ) });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, n) => {
   const r = ["xs", "sm", "md", "lg", "xl", "2xl"], a = r.indexOf(n), l = o.split(" ");
   let i = new Array(r.length).fill(!1);
   for (const c of l) {
-    let [d, p] = c.split(":");
-    p || (p = d, d = "xs");
-    const u = r.indexOf(d);
-    if (u <= a) {
-      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], x = ["hidden"];
-      if (m.includes(p))
-        for (let g = u; g < r.length; g++)
-          i[g] = !0;
-      else if (x.includes(p))
-        for (let g = u; g < r.length; g++)
-          i[g] = !1;
+    let [d, u] = c.split(":");
+    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))
+        for (let x = p; x < r.length; x++)
+          i[x] = !0;
+      else if (g.includes(u))
+        for (let x = p; x < r.length; x++)
+          i[x] = !1;
     }
   }
   return i[a];
@@ -3426,24 +3422,24 @@ const handleMouseMove = throttle((o) => {
   );
   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 (p) => ""), d = useMemo(() => o.filter((u) => {
-    var x;
-    return (x = get(i, u._type)) == null ? void 0 : x.server;
-  }).map((u) => u._id), [i, o]);
+  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;
+  }).map((p) => p._id), [i, o]);
   useEffect(() => {
-    forEach(d, (p) => {
-      if (get(n, p, "") || get(a, `${p}.loading`, !1))
+    forEach(d, (u) => {
+      if (get(n, u, "") || get(a, `${u}.loading`, !1))
         return;
-      const u = o.find((m) => m._id === p);
-      l((m) => ({ ...m, [p]: { loading: !0, error: null } })), c(u).then((m) => {
-        r((x) => ({ ...x, [p]: m })), l((x) => ({
-          ...x,
-          [p]: { loading: !1, error: null }
+      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,
+          [u]: { loading: !1, error: null }
         }));
       }).catch((m) => {
-        l((x) => ({
-          ...x,
-          [p]: { loading: !1, error: m.message }
+        l((g) => ({
+          ...g,
+          [u]: { loading: !1, error: m.message }
         }));
       });
     });
@@ -3508,50 +3504,50 @@ 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(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), x = useCallback((f) => getStyleAttrs(f, d), [d]), [g] = useChaiExternalData(), [E] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
-    (f) => f.reduce((k, _) => {
-      const C = get(p, _, {});
-      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: m } = useGlobalBlocksStore(), g = useCallback((b) => getStyleAttrs(b, d), [d]), [x] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
+    (b) => b.reduce((k, v) => {
+      const S = get(u, v, {});
+      return { ...k, ...S };
     }, {}),
-    [p]
+    [u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((f, k) => {
-      if (E === f._id || u.includes(f._id))
+    o.map((b, k) => {
+      if (j === b._id || p.includes(b._id))
         return null;
-      const _ = {}, C = filter(n, { _parent: f._id });
-      if (_.children = C.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: C }) : null, f._type === "GlobalBlock") {
-        const w = m(f);
-        _.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (S) => !S._parent), allBlocks: w });
+      const v = {}, S = filter(n, { _parent: b._id });
+      if (v.children = S.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: S }) : null, b._type === "GlobalBlock") {
+        const C = m(b);
+        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (w) => !w._parent), allBlocks: C });
       }
-      const B = getBlockComponent(f._type), R = get(B, "server", !1), A = R ? RSCBlock : get(B, "builderComponent", get(B, "component", null));
+      const B = getBlockComponent(b._type), R = get(B, "server", !1), A = R ? RSCBlock : get(B, "builderComponent", get(B, "component", null));
       if (isNull(A))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
-      const N = has(B, "getBlockStateFrom") ? B == null ? void 0 : B.getBlockStateFrom(f, n) : [], D = b(N), I = x(f);
-      if (get(I, "__isHidden", !1) && !includes(a, f._id))
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
+      const T = has(B, "getBlockStateFrom") ? B == null ? void 0 : B.getBlockStateFrom(b, n) : [], L = E(T), P = g(b);
+      if (get(P, "__isHidden", !1) && !includes(a, b._id))
         return null;
-      const j = i && isDescendant(i._id, f._id, n), v = {
-        ...includes(a, f._id) ? { "force-show": "" } : {},
-        "data-block-id": f._id,
-        "data-block-type": f._type,
+      const f = i && isDescendant(i._id, b._id, n), _ = {
+        ...includes(a, b._id) ? { "force-show": "" } : {},
+        "data-block-id": b._id,
+        "data-block-type": b._type,
         ...i ? (
           // @ts-ignore
           {
-            "data-dnd": canAcceptChildBlock(f._type, i == null ? void 0 : i._type) ? "yes" : "no",
-            "data-dnd-dragged": i._id === f._id || j ? "yes" : "no"
+            "data-dnd": canAcceptChildBlock(b._type, i == null ? void 0 : i._type) ? "yes" : "no",
+            "data-dnd-dragged": i._id === b._id || f ? "yes" : "no"
           }
         ) : {},
-        ...c === f._id && !j ? { "data-drop": "yes" } : {},
-        ...includes(l, f._id) ? { "data-cut-block": "yes" } : {}
+        ...c === b._id && !f ? { "data-drop": "yes" } : {},
+        ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
       };
-      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: f, blockProps: v }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
-        blockProps: v,
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: _ }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
+        blockProps: _,
         index: k,
-        ...applyBindings(applyLanguage(f, r, B), g),
-        ...omit(I, ["__isHidden"]),
-        ..._,
+        ...applyBindings(applyLanguage(b, r, B), x),
+        ...omit(P, ["__isHidden"]),
+        ...v,
         inBuilder: !0,
-        blockState: D
+        blockState: L
       }) });
     })
   ) });
@@ -3563,7 +3559,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     if (i) {
       const c = (i == null ? void 0 : i.mockFn) || (i == null ? void 0 : i.dataFn);
       c && c(l.args).then(
-        (d) => n((p) => ({ ...p, [l.providerKey]: d }))
+        (d) => n((u) => ({ ...u, [l.providerKey]: d }))
       );
     }
   }), () => {
@@ -3588,60 +3584,64 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     }
   );
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
-  const a = useRef(null), l = useDebouncedCallback(
+  const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
     () => {
-      const { clientWidth: i } = a.current;
-      r(i);
+      const { clientWidth: u } = i.current;
+      r(u);
     },
-    [a.current],
+    [i.current],
     100
   );
-  return useResizeObserver(a.current, l, a.current !== null), useEffect(() => {
-    const { clientWidth: i } = a.current;
-    n(i);
-  }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", className: "h-full w-full p-8 pb-0", ref: a, children: o });
+  useResizeObserver(i.current, c, i.current !== null), useEffect(() => {
+    const { clientWidth: u } = i.current;
+    n(u);
+  }, []);
+  const d = () => {
+    a([]), l([]);
+  };
+  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, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [m, x] = useState([]), [, g] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [b, f] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), _ = useBuilderProp("htmlDir", "ltr"), C = (A) => {
-    p((N) => ({ ...N, width: A }));
+  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"), S = (A) => {
+    u((T) => ({ ...T, width: A }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: A, clientHeight: N } = c.current;
-    p({ width: A, height: N });
+    const { clientWidth: A, clientHeight: T } = c.current;
+    u({ width: A, height: T });
   }, [c, n]);
-  const B = (A, N = 0) => {
-    const { top: D } = A.getBoundingClientRect();
-    return D + N >= 0 && D - N <= window.innerHeight;
+  const B = (A, T = 0) => {
+    const { top: L } = A.getBoundingClientRect();
+    return L + T >= 0 && L - T <= window.innerHeight;
   };
   useEffect(() => {
-    var A, N;
+    var A, T;
     if (a && a.type !== "Multiple" && i.current) {
-      const D = getElementByDataBlockId(i.current.contentDocument, a._id);
-      D && (B(D) || (N = (A = i.current) == null ? void 0 : A.contentWindow) == null || N.scrollTo({ top: D.offsetTop, behavior: "smooth" }), x([D]));
+      const L = getElementByDataBlockId(i.current.contentDocument, a._id);
+      L && (B(L) || (T = (A = i.current) == null ? void 0 : A.contentWindow) == null || T.scrollTo({ top: L.offsetTop, behavior: "smooth" }), g([L]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(b) && i.current) {
+    if (!isEmpty(E) && i.current) {
       const A = getElementByStyleId(
         i.current.contentDocument,
-        first(b).id
+        first(E).id
       );
-      g(A ? [A] : [null]);
+      x(A ? [A] : [null]);
     } else
-      g([null]);
-  }, [b]);
+      x([null]);
+  }, [E]);
   const R = useMemo(() => {
     let A = IframeInitialContent;
-    return A = A.replace("__HTML_DIR__", _), o === "offline" && (A = A.replace(
+    return A = A.replace("__HTML_DIR__", v), o === "offline" && (A = A.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
     ), 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, _]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [o, v]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        r([]), f([]);
+        r([]), b([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3649,10 +3649,10 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => E(i.current),
+          contentDidMount: () => j(i.current),
           ref: i,
           id: "canvas-iframe",
-          style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
+          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: R,
           children: [
@@ -3777,7 +3777,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-kW6SrwIa.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-p_MY9fHx.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, {}) }) }),
@@ -3855,25 +3855,25 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: R }, A) => {
     A && (a(R), i.current = R);
   }, {
-    bodyFont: p,
-    headingFont: u,
+    bodyFont: u,
+    headingFont: p,
     primaryColor: m,
-    bodyTextDarkColor: x,
-    bodyTextLightColor: g,
-    bodyBgDarkColor: E,
-    secondaryColor: b,
-    bodyBgLightColor: f,
+    bodyTextDarkColor: g,
+    bodyTextLightColor: x,
+    bodyBgDarkColor: j,
+    secondaryColor: E,
+    bodyBgLightColor: b,
     roundedCorners: k
   } = r;
-  let _ = {
+  let v = {
     headingFont: y({
       title: c("theme_config.heading_font"),
-      default: u,
+      default: p,
       options: FONTS
     }),
     bodyFont: y({
       title: c("theme_config.body_font"),
-      default: p,
+      default: u,
       options: FONTS
     }),
     roundedCorners: s$1({
@@ -3881,34 +3881,34 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       default: parseInt(k || 5, 10)
     }),
     primaryColor: h({ title: c("theme_config.primary"), default: m }),
-    secondaryColor: h({ title: c("theme_config.secondary"), default: b })
+    secondaryColor: h({ title: c("theme_config.secondary"), default: E })
   };
-  l || (_ = {
-    ..._,
+  l || (v = {
+    ...v,
     bodyBgLightColor: h({
       title: c("theme_config.background"),
-      default: f
+      default: b
     }),
     bodyTextLightColor: h({
       title: c("theme_config.text_color"),
-      default: x
+      default: g
     }),
     bodyBgDarkColor: h({
       title: c("theme_config.background_dark_mode"),
-      default: E
+      default: j
     }),
     bodyTextDarkColor: h({
       title: c("theme_config.text_color_dark_mode"),
-      default: g
+      default: x
     })
   });
-  const C = {
+  const S = {
     type: "object",
     properties: {}
   }, B = {};
-  return Object.keys(_).forEach((R) => {
-    const A = _[R];
-    return C.properties || (C.properties = {}), C.properties[R] = A.schema, B[R] = A.uiSchema, !0;
+  return Object.keys(v).forEach((R) => {
+    const A = v[R];
+    return S.properties || (S.properties = {}), S.properties[R] = A.schema, B[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(
@@ -3921,7 +3921,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         liveOmit: !0,
         liveValidate: !0,
         uiSchema: B,
-        schema: C,
+        schema: S,
         formData: r,
         validator,
         onChange: d
@@ -4103,35 +4103,35 @@ 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 p = null;
-  const u = o.children.length > 0, { highlightBlock: m } = useBlockHighlight(), { id: x, data: g, isSelected: E, willReceiveDrop: b, isDragging: f, isEditing: k, handleClick: _ } = o, C = (I) => {
-    I.stopPropagation(), !i.includes(x) && o.toggle();
-  }, B = (I) => {
-    I.isInternal && (p = I.isOpen, I.isOpen && I.close());
-  }, R = (I) => {
-    I.isInternal && p !== null && (p ? I.open() : I.close(), p = null);
-  }, A = (I) => {
-    I.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), _(I);
+  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: S } = o, B = (f) => {
+    f.stopPropagation(), !i.includes(x) && o.toggle();
+  }, R = (f) => {
+    f.isInternal && (u = f.isOpen, f.isOpen && f.close());
+  }, A = (f) => {
+    f.isInternal && u !== null && (u ? f.open() : f.close(), u = null);
+  }, T = (f) => {
+    f.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), S(f);
   };
   useEffect(() => {
-    const I = setTimeout(() => {
-      b && !o.isOpen && !f && !i.includes(x) && o.toggle();
+    const f = setTimeout(() => {
+      b && !o.isOpen && !k && !i.includes(x) && o.toggle();
     }, 500);
-    return () => clearTimeout(I);
-  }, [b, o, f]);
-  const N = useMemo(() => {
-    const I = Object.keys(g), j = [];
-    for (let v = 0; v < I.length; v++)
-      if (I[v].endsWith("_attrs")) {
-        const w = g[I[v]], S = Object.keys(w).join("|");
-        S.match(/x-data/) && j.push("data"), S.match(/x-on/) && j.push("event"), S.match(/x-show|x-if/) && j.push("show");
+    return () => clearTimeout(f);
+  }, [b, o, k]);
+  const L = useMemo(() => {
+    const f = Object.keys(j), _ = [];
+    for (let C = 0; C < f.length; C++)
+      if (f[C].endsWith("_attrs")) {
+        const w = j[f[C]], I = Object.keys(w).join("|");
+        I.match(/x-data/) && _.push("data"), I.match(/x-on/) && _.push("event"), I.match(/x-show|x-if/) && _.push("show");
       }
-    return j;
-  }, [g]), D = (I, j) => {
-    const v = d.contentDocument || d.contentWindow.document, w = v.querySelector(`[data-block-id=${I}]`);
-    w && w.setAttribute("data-drop", j);
-    const S = w.getBoundingClientRect(), T = d.getBoundingClientRect();
-    S.top >= T.top && S.left >= T.left && S.bottom <= T.bottom && S.right <= T.right || (v.documentElement.scrollTop = w.offsetTop - T.top);
+    return _;
+  }, [j]), P = (f, _) => {
+    const C = d.contentDocument || d.contentWindow.document, w = C.querySelector(`[data-block-id=${f}]`);
+    w && w.setAttribute("data-drop", _);
+    const I = w.getBoundingClientRect(), N = d.getBoundingClientRect();
+    I.top >= N.top && I.left >= N.left && I.bottom <= N.bottom && I.right <= N.right || (C.documentElement.scrollTop = w.offsetTop - N.top);
   };
   return x === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4147,26 +4147,27 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     "div",
     {
       onMouseEnter: () => m(x),
-      onClick: A,
+      onMouseLeave: () => g(),
+      onClick: T,
       style: n,
       "data-node-id": x,
       ref: i.includes(x) ? null : r,
-      onDragStart: () => B(o),
-      onDragEnd: () => R(o),
-      onDragOver: (I) => {
-        I.preventDefault(), D(x, "yes");
+      onDragStart: () => R(o),
+      onDragEnd: () => A(o),
+      onDragOver: (f) => {
+        f.preventDefault(), P(x, "yes");
       },
-      onDragLeave: (I) => {
-        I.preventDefault(), D(x, "no");
+      onDragLeave: (f) => {
+        f.preventDefault(), P(x, "no");
       },
-      onDrop: (I) => {
-        I.preventDefault(), D(x, "no");
+      onDrop: (f) => {
+        f.preventDefault(), P(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",
         E ? "bg-blue-500 text-white" : "hover:bg-gray-200 dark:hover:bg-gray-800",
-        b && canAcceptChildBlock(g._type, "Icon") ? "bg-green-200" : "",
-        f && "opacity-20",
+        b && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
+        k && "opacity-20",
         i.includes(x) ? "opacity-50" : ""
       ),
       children: [
@@ -4175,41 +4176,41 @@ 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: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: C, 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: g == null ? void 0 : g._type }) }),
-            k ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__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(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
-                onDoubleClick: (I) => {
-                  I.stopPropagation(), o.edit(), o.deselect();
+                onDoubleClick: (f) => {
+                  f.stopPropagation(), o.edit(), o.deselect();
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (g == null ? void 0 : g._name) || (g == null ? void 0 : g._type.split("/").pop()) }),
-                  N.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                  N.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                  N.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (j == null ? void 0 : j._name) || (j == null ? void 0 : j._type.split("/").pop()) }),
+                  L.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                  L.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                  L.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                 ]
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1 pr-2 group-hover:visible", children: [
-          !i.includes(x) && a.map((I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          !i.includes(x) && a.map((f) => /* @__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(I.item, { blockId: x })
+                children: React__default.createElement(f.item, { blockId: x })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: I.tooltip })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: f.tooltip })
           ] })),
-          canAddChildBlock(g == null ? void 0 : g._type) && !i.includes(x) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          canAddChildBlock(j == null ? void 0 : j._type) && !i.includes(x) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
@@ -4225,8 +4226,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
-                onClick: (I) => {
-                  I.stopPropagation(), c(x), o.isOpen && o.toggle();
+                onClick: (f) => {
+                  f.stopPropagation(), c(x), o.isOpen && o.toggle();
                 },
                 className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-black",
                 asChild: !0,
@@ -4421,7 +4422,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     return o;
   const n = /<video[^>]+src=['"]([^'">]+)['"]/, r = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(n), l = o.match(r), i = a ? a[1] : l ? l[1] : null, c = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, d = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
   return i && (c.test(i) || d.test(i)) ? i : o;
-}, NAME_ATTRIBUTE = "$name", ATTRIBUTE_MAP = {
+}, NAME_ATTRIBUTES = ["chai-name", "data-chai-name"], ATTRIBUTE_MAP = {
   img: { alt: "alt", width: "width", height: "height", src: "image" },
   video: {
     src: "url",
@@ -4462,7 +4463,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     return {};
   const n = {}, r = ATTRIBUTE_MAP[o.tagName] || {}, a = o.attributes;
   return forEach(a, ({ key: l, value: i }) => {
-    if (l !== NAME_ATTRIBUTE)
+    if (!includes(NAME_ATTRIBUTES, l))
       if (r[l]) {
         if (o.tagName === "img" && l === "src" && !i.startsWith("http")) {
           const c = find(o.attributes, { key: "width" }), d = find(o.attributes, { key: "height" });
@@ -4558,7 +4559,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
       return { _type: "TableBody" };
     case "tfoot":
       return { _type: "TableFooter" };
-    case "div": {
+    default: {
       const l = get(o, "children", []).length > 0 ? "Box" : "EmptyBox";
       return {
         _type: l,
@@ -4568,7 +4569,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var p, u, m, x, g, E, b, f;
+  var u, p, m, g, x, j, E, b;
   if (r.type === "comment")
     return [];
   let a = { _id: generateUUID() };
@@ -4585,7 +4586,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const k = r.attributes.find((_) => _.key === NAME_ATTRIBUTE);
+    const k = r.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
     k && (a._name = k.value);
   }
   if (i)
@@ -4603,14 +4604,14 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      href: ((p = l.find((_) => _.key === "href")) == null ? void 0 : p.value) || "",
-      hrefType: ((u = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
-      autoplay: ((m = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
-      maxWidth: ((g = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((E = l.find((_) => _.key === "data-overlay")) == null ? void 0 : E.value) || "",
-      galleryName: ((b = l.find((_) => _.key === "data-gall")) == null ? void 0 : b.value) || ""
-    }, forEach(k, (_) => {
-      has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
+      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") {
@@ -4620,14 +4621,13 @@ 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" }), _ = find(r.attributes, { key: "width" }), C = get(k, "value") ? `[${get(k, "value")}px]` : "24px", B = get(_, "value") ? `[${get(_, "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, (A) => !includes(["style", "width", "height", "class"], A.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((f = n.block) == null ? void 0 : f._type) === "Select")
+    const k = find(r.attributes, { key: "height" }), v = find(r.attributes, { key: "width" }), S = 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-${S}`, 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),
       ...getAttrs(r)
     }), [];
-  console.log(a);
   const d = traverseNodes(r.children, { block: a, node: r });
   return [a, ...d];
 }), getSanitizedHTML = (o) => {
@@ -4681,63 +4681,63 @@ function ExpandableObject(o) {
     openBracket: i,
     closeBracket: c,
     level: d,
-    style: p,
-    shouldExpandNode: u,
+    style: u,
+    shouldExpandNode: p,
     clickToExpandNode: m
   } = o;
-  const x = useRef(!1), [g, E, b] = useBool(() => u(d, r, n));
+  const g = useRef(!1), [x, j, E] = useBool(() => p(d, r, n));
   useEffect(() => {
-    x.current ? b(u(d, r, n)) : x.current = !0;
-  }, [u]);
-  const f = g ? p.collapseIcon : p.expandIcon, k = g ? "collapse JSON" : "expand JSON", _ = useComponentId(), C = d + 1, B = a.length - 1, R = (A) => {
-    A.key === " " && (A.preventDefault(), E());
+    g.current ? E(p(d, r, n)) : g.current = !0;
+  }, [p]);
+  const b = x ? u.collapseIcon : u.expandIcon, k = x ? "collapse JSON" : "expand JSON", v = useComponentId(), S = d + 1, B = a.length - 1, R = (A) => {
+    A.key === " " && (A.preventDefault(), j());
   };
   return /* @__PURE__ */ createElement("div", {
-    className: p.basicChildStyle,
+    className: u.basicChildStyle,
     role: "list"
   }, /* @__PURE__ */ createElement("span", {
-    className: f,
-    onClick: E,
+    className: b,
+    onClick: j,
     onKeyDown: R,
     role: "button",
     tabIndex: 0,
     "aria-label": k,
-    "aria-expanded": g,
-    "aria-controls": g ? _ : void 0
+    "aria-expanded": x,
+    "aria-controls": x ? v : void 0
   }), n && (m ? /* @__PURE__ */ createElement("span", {
-    className: p.clickableLabel,
-    onClick: E,
+    className: u.clickableLabel,
+    onClick: j,
     onKeyDown: R,
     role: "button",
     tabIndex: -1
   }, n, ":") : /* @__PURE__ */ createElement("span", {
-    className: p.label
+    className: u.label
   }, n, ":")), /* @__PURE__ */ createElement("span", {
-    className: p.punctuation
-  }, i), g ? /* @__PURE__ */ createElement("div", {
-    id: _
-  }, a.map((A, N) => /* @__PURE__ */ createElement(DataRender, {
-    key: A[0] || N,
+    className: u.punctuation
+  }, i), x ? /* @__PURE__ */ createElement("div", {
+    id: v
+  }, a.map((A, T) => /* @__PURE__ */ createElement(DataRender, {
+    key: A[0] || T,
     field: A[0],
     value: A[1],
-    style: p,
-    lastElement: N === B,
-    level: C,
-    shouldExpandNode: u,
+    style: u,
+    lastElement: T === B,
+    level: S,
+    shouldExpandNode: p,
     clickToExpandNode: m
   }))) : /* @__PURE__ */ createElement("span", {
-    className: p.collapsedContent,
-    onClick: E,
+    className: u.collapsedContent,
+    onClick: j,
     onKeyDown: R,
     role: "button",
     tabIndex: -1,
     "aria-hidden": !0,
     "aria-label": k,
-    "aria-expanded": g
+    "aria-expanded": x
   }), /* @__PURE__ */ createElement("span", {
-    className: p.punctuation
+    className: u.punctuation
   }, c), !l && /* @__PURE__ */ createElement("span", {
-    className: p.punctuation
+    className: u.punctuation
   }, ","));
 }
 function JsonObject(o) {
@@ -4760,7 +4760,7 @@ function JsonObject(o) {
     style: a,
     shouldExpandNode: i,
     clickToExpandNode: c,
-    data: Object.keys(r).map((p) => [p, r[p]])
+    data: Object.keys(r).map((u) => [u, r[u]])
   });
 }
 function JsonArray(o) {
@@ -4783,7 +4783,7 @@ function JsonArray(o) {
     style: a,
     shouldExpandNode: c,
     clickToExpandNode: d,
-    data: r.map((p) => [void 0, p])
+    data: r.map((u) => [void 0, u])
   });
 }
 function JsonPrimitiveValue(o) {
@@ -4847,8 +4847,8 @@ function getPathAndTypes(o) {
   const n = [], r = {};
   function a(l, i) {
     forEach(i, (c, d) => {
-      const p = l ? `${l}.${d}` : d, u = isArray$1(c) ? "list" : typeof c;
-      n.push(p), r[p] = u === "string" ? "text" : u === "object" ? "model" : u, u === "object" && !isArray$1(c) && a(p, c);
+      const u = l ? `${l}.${d}` : d, p = isArray$1(c) ? "list" : typeof c;
+      n.push(u), r[u] = p === "string" ? "text" : p === "object" ? "model" : p, p === "object" && !isArray$1(c) && a(u, c);
     });
   }
   return a("", omit(o, ["styles", "_type", "_id", "_name", "_bindings"])), { paths: n, pathsType: r };
@@ -4886,15 +4886,15 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataType: i,
   appliedBindings: c
 }) => {
-  const { paths: d, pathsType: p } = getPathAndTypes(a), u = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, m = o === "PROP", [x, g] = useState(!1), E = useMemo(() => o === "PROP" ? d.filter(
-    (b) => !includes(c, b) && get(u, `props.${first(split(b, "."))}.binding`)
-  ) : d.filter((b) => i === get(p, b, "")), [o, d, c, i, u]);
+  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(
+    (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(() => {
     n && l(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: x, onOpenChange: g, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open: g, onOpenChange: x, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
@@ -4917,23 +4917,23 @@ const ViewData = ({ data: o, fullView: n }) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(CommandInput, { placeholder: `Choose ${toLower(o)}...` }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(CommandList, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CommandEmpty, { children: "No results found." }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CommandGroup, { children: map(E, (b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CommandGroup, { children: map(j, (E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
               CommandItem,
               {
-                value: b,
+                value: E,
                 className: `cursor-pointer ${m ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (f) => {
-                  r(find(E, (k) => k === f) || null), g(!1);
+                onSelect: (b) => {
+                  r(find(j, (k) => k === b) || null), x(!1);
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: `h-4 w-4 text-green-500 ${n === b ? "" : "opacity-0"}` }),
-                    b
+                    /* @__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(p, b, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, b) }) })
+                  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) }) })
                 ]
               },
-              b
+              E
             )) })
           ] })
         ] }) })
@@ -4947,20 +4947,20 @@ const ViewData = ({ data: o, fullView: n }) => {
   editMode: r,
   item: a
 }) => {
-  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), p = useSelectedBlock(), [u] = useChaiExternalData(), m = useCallback(
-    (E, b) => {
-      if (isEmpty(E))
+  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), m = useCallback(
+    (j, E) => {
+      if (isEmpty(j))
         return "";
       {
-        const f = get(b === "PROP" ? p : u, E, "");
-        if (isArray$1(f))
+        const b = get(E === "PROP" ? u : p, j, "");
+        if (isArray$1(b))
           return "list";
-        const k = typeof f;
+        const k = typeof b;
         return k === "string" ? "text" : k === "object" ? "model" : k;
       }
     },
-    [p, u]
-  ), [x, g] = useState(r ? m(a.key, "PROP") : "");
+    [u, p]
+  ), [g, x] = useState(r ? m(a.key, "PROP") : "");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Add Data Binding" }),
@@ -4975,12 +4975,12 @@ const ViewData = ({ data: o, fullView: n }) => {
           placeholder: "Enter prop key",
           value: l,
           setValue: i,
-          onChange: (E) => {
-            const b = m(E, "PROP");
-            i(E), x !== b && d(""), g(b);
+          onChange: (j) => {
+            const E = m(j, "PROP");
+            i(j), g !== E && d(""), x(E);
           },
-          data: p,
-          dataType: x,
+          data: u,
+          dataType: g,
           appliedBindings: o
         }
       ),
@@ -4993,12 +4993,12 @@ const ViewData = ({ data: o, fullView: n }) => {
           placeholder: "Enter data path",
           value: c,
           setValue: d,
-          onChange: (E) => {
-            const b = m(E, "PATH");
-            d(x === b ? E : "");
+          onChange: (j) => {
+            const E = m(j, "PATH");
+            d(g === E ? j : "");
           },
-          data: u,
-          dataType: x,
+          data: p,
+          dataType: g,
           appliedBindings: o
         }
       )
@@ -5024,8 +5024,8 @@ const ViewData = ({ data: o, fullView: n }) => {
         item: i,
         editMode: l,
         appliedBindings: a,
-        onAddBinding: (p) => {
-          r(p), d(!1);
+        onAddBinding: (u) => {
+          r(u), d(!1);
         }
       }
     ) })
@@ -5038,18 +5038,18 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataProvider: l,
   appliedBindings: i
 }) => {
-  const [c, d] = useState("string"), p = (u, m) => {
-    if (isEmpty(u))
+  const [c, d] = useState("string"), u = (p, m) => {
+    if (isEmpty(p))
       return "";
     {
-      const x = get(m === "PROP" ? a : l, u, "");
-      if (isArray$1(x))
+      const g = get(m === "PROP" ? a : l, p, "");
+      if (isArray$1(g))
         return "list";
-      const g = typeof x;
-      return g === "string" ? "text" : g === "object" ? "model" : g;
+      const x = typeof g;
+      return x === "string" ? "text" : x === "object" ? "model" : x;
     }
   };
-  return useEffect(() => d(() => p(o.key, "PROP")), [o.key]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col rounded-md border border-border p-2", children: [
+  return useEffect(() => d(() => u(o.key, "PROP")), [o.key]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col rounded-md border border-border p-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm font-normal text-gray-500", children: o.key }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium leading-5", children: o.value }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(l, o.value, "") }),
@@ -5067,34 +5067,34 @@ const ViewData = ({ data: o, fullView: n }) => {
   ] });
 }, DataBindingSetting = ({ bindingData: o, onChange: n }) => {
   const r = useSelectedBlock(), [a] = useChaiExternalData(), l = getChaiDataProviders(), [i, c] = useState(
-    map(o, (x, g) => ({ key: g, value: x }))
+    map(o, (g, x) => ({ key: x, value: g }))
   );
   useEffect(() => {
-    c(map(o, (x, g) => ({ key: g, value: x })));
+    c(map(o, (g, x) => ({ key: x, value: g })));
   }, [r == null ? void 0 : r._id, o]);
   const d = useMemo(() => {
     if (isEmpty(a))
       return !0;
     if (isEmpty(i))
       return !1;
-    const x = last(i);
-    return isEmpty(x == null ? void 0 : x.key) || isEmpty(x == null ? void 0 : x.value);
-  }, [a, i]), p = (x) => {
-    const g = filter(i, (E) => E.key !== x.key);
-    c([...g, x]), m([...g, x]);
-  }, u = (x) => {
-    const g = filter(i, (E, b) => x !== b);
-    m([...g]);
+    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(
-    (x = []) => {
-      if (c(x), isEmpty(x)) {
+    (g = []) => {
+      if (c(g), isEmpty(g)) {
         n({});
         return;
       }
-      const g = {};
-      forEach(x, (E) => {
-        !isEmpty(E == null ? void 0 : E.key) && !isEmpty(E == null ? void 0 : E.value) && set(g, E.key, E.value);
-      }), n(g);
+      const x = {};
+      forEach(g, (j) => {
+        !isEmpty(j == null ? void 0 : j.key) && !isEmpty(j == null ? void 0 : j.value) && set(x, j.key, j.value);
+      }), n(x);
     },
     [n]
   );
@@ -5103,17 +5103,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, (x, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    map(i, (g, x) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       NewDataBindingPair,
       {
-        item: x,
-        onAddBinding: p,
-        onRemove: () => u(g),
+        item: g,
+        onAddBinding: u,
+        onRemove: () => p(x),
         selectedBlock: r,
         dataProvider: a,
         appliedBindings: map(i, "key")
       },
-      x.key
+      g.key
     )),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 200, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { disabled: isEmpty(a), className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5121,7 +5121,7 @@ const ViewData = ({ data: o, fullView: n }) => {
         {
           disabled: d,
           appliedBindings: map(i, "key"),
-          onAddBinding: p,
+          onAddBinding: u,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -5202,7 +5202,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-OH1oIK1z.js")), UploadImages = React__default.lazy(() => import("./UploadImages-Yom319eJ.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-Ud9lZ6w-.js")), UploadImages = React__default.lazy(() => import("./UploadImages-bHQHGRwC.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5212,7 +5212,7 @@ const ViewData = ({ data: o, fullView: n }) => {
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: o && l ? "Unsplash images" : o ? "Select or upload images" : "Images" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: c, onValueChange: (p) => d(p), className: "flex h-full w-full flex-col py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { value: c, onValueChange: (u) => d(u), className: "flex h-full w-full flex-col py-2", children: [
       !(l || i) && /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "w-full", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "upload", className: "w-full", children: "Upload" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "unsplash", className: "w-full", children: "Unsplash" })
@@ -5249,8 +5249,8 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           className: "text-xs",
           placeholder: c("enter_image_url"),
           value: o,
-          onBlur: ({ target: { value: p } }) => a(r, p),
-          onChange: (p) => n(p.target.value)
+          onBlur: ({ target: { value: u } }) => a(r, u),
+          onChange: (u) => n(u.target.value)
         }
       )
     ] })
@@ -5292,25 +5292,25 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
     }
   );
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
-  const [a, l] = useState([]), i = useBuilderProp("getPages", () => []), { type: c = "page", href: d = "", target: p = "self" } = n;
+  const [a, l] = useState([]), i = useBuilderProp("getPages", () => []), { type: c = "page", href: d = "", target: u = "self" } = n;
   return useEffect(() => {
     (async () => {
-      const u = await i();
-      l(u || []);
+      const p = await i();
+      l(p || []);
     })();
   }, []), /* @__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: (u) => r({ ...n, type: u.target.value }), 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((u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.const, children: u.title }, u.const)) }),
-      c === "page" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("select", { name: "href", value: d, onChange: (u) => r({ ...n, href: u.target.value || "#" }), children: [
+      ].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, (u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.slug, children: u.name }, u.uuid))
+        map(a, (p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.slug, children: p.name }, p.uuid))
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
@@ -5320,7 +5320,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           name: "href",
           type: "text",
           value: d,
-          onChange: (u) => r({ ...n, href: u.target.value || "#" }),
+          onChange: (p) => r({ ...n, href: p.target.value || "#" }),
           placeholder: c === "page" || c === "url" ? "Enter URL" : c === "scroll" ? "#ElementID" : "Enter detail"
         }
       ),
@@ -5332,9 +5332,9 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
             autoCorrect: "off",
             spellCheck: "false",
             type: "checkbox",
-            defaultChecked: p === "_blank",
+            defaultChecked: u === "_blank",
             className: "!w-fit cursor-pointer rounded-md border border-border",
-            onChange: () => r({ ...n, target: p === "_blank" ? "_self" : "_blank" })
+            onChange: () => r({ ...n, target: u === "_blank" ? "_self" : "_blank" })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pt-1 text-xs", children: "Open in new tab" })
@@ -5346,8 +5346,8 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
   if (typeof window > "u")
     return null;
   const i = o.replace("root.", ""), c = get(l, i, ""), d = () => {
-    const p = l == null ? void 0 : l._id;
-    a({ blockId: p, blockProp: i, placeholder: n, initialCode: get(l, i, c) });
+    const u = l == null ? void 0 : l._id;
+    a({ blockId: u, blockProp: i, placeholder: n, initialCode: get(l, i, c) });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-col gap-y-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5361,19 +5361,19 @@ 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: p } = useTranslation(), { selectedLang: u, fallbackLang: m, languages: x } = useLanguages(), g = x.length === 0 ? "" : u.length ? u : m;
-  Object.keys(n).forEach((b) => {
-    const f = n[b];
-    if (includes(["slot", "styles"], f.type))
+  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;
+  Object.keys(n).forEach((E) => {
+    const b = n[E];
+    if (includes(["slot", "styles"], b.type))
       return;
-    const k = b;
-    c.properties[k] = getBlockJSONFromSchemas(f, p, g), d[k] = getBlockJSONFromUISchemas(f);
+    const k = E;
+    c.properties[k] = getBlockJSONFromSchemas(b, u, x), d[k] = getBlockJSONFromUISchemas(b);
   }), useEffect(() => {
     i(r);
-  }, [o, u]);
-  const E = useThrottledCallback(
-    async ({ formData: b }, f) => {
-      a({ formData: b }, f);
+  }, [o, p]);
+  const j = useThrottledCallback(
+    async ({ formData: E }, b) => {
+      a({ formData: E }, b);
     },
     [a],
     1e3
@@ -5399,8 +5399,8 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
       uiSchema: d,
       schema: c,
       formData: l,
-      onChange: ({ formData: b }, f) => {
-        f && (i(b), E({ formData: b }, f));
+      onChange: ({ formData: E }, b) => {
+        b && (i(E), j({ formData: E }, b));
       }
     }
   );
@@ -5422,7 +5422,7 @@ const ImagePickerModal$1 = ImagePickerModal, ImagePickerField = ({ value: o, onC
           id: "show-on-canvas",
           checked: c,
           onCheckedChange: (d) => {
-            d ? (n((p) => [...p, r._id]), a([r._id])) : n((p) => p.filter((u) => u !== r._id));
+            d ? (n((u) => [...u, r._id]), a([r._id])) : n((u) => u.filter((p) => p !== r._id));
           }
         }
       ),
@@ -5469,32 +5469,32 @@ 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), p = useBuilderProp("dataBindingSupport", !1), u = ({ formData: f }, k, _) => {
+  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 C = k.replace("root.", "");
-      a([n._id], { [C]: get(f, C) }, _);
+      const S = k.replace("root.", "");
+      a([n._id], { [S]: get(b, S) }, v);
     }
   }, m = useCallback(
-    debounce(({ formData: f }, k, _) => {
-      u({ formData: f }, k, _), d(f);
+    debounce(({ formData: b }, k, v) => {
+      p({ formData: b }, k, v), d(b);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), x = ({ formData: f }, k) => {
+  ), g = ({ formData: b }, k) => {
     if (k) {
-      const _ = k.replace("root.", "");
+      const v = k.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(_, get(f, _.split(".")))
-      ), m({ formData: f }, k, { [_]: get(c, _) });
+        convertDotNotationToObject(v, get(b, v.split(".")))
+      ), m({ formData: b }, k, { [v]: get(c, v) });
     }
-  }, g = keys(get(i, "_bindings", {})), E = useMemo(() => {
-    const f = cloneDeep(get(l, "props", {}));
-    return each(f, (k, _) => {
-      get(k, "hidden", !1) && delete f[_];
-    }), p && each(g, (k) => delete f[k]), f;
-  }, [l, g, p]), b = get(l, "server", !1);
+  }, 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];
+    }), 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: [
-    p ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "mt-4 h-full w-full", children: [
+    u ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "mt-4 h-full w-full", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "BINDING", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5509,8 +5509,8 @@ function BlockSettings() {
           DataBindingSetting$1,
           {
             bindingData: get(n, "_bindings", {}),
-            onChange: (f) => {
-              u({ formData: { _bindings: f } }, "root._bindings");
+            onChange: (b) => {
+              p({ formData: { _bindings: b } }, "root._bindings");
             }
           }
         ) })
@@ -5521,35 +5521,35 @@ function BlockSettings() {
           "Static Content"
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { className: "pt-4", children: [
-          isEmpty(g) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
+          isEmpty(x) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-1 mt-0 rounded-sm border border-orange-500 bg-orange-100 p-1 text-xs text-orange-500", children: [
             "Data binding is set for ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("b", { children: map(g, capitalize).join(", ") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("b", { children: map(x, capitalize).join(", ") }),
             " ",
-            g.length === 1 ? "property" : "properties",
+            x.length === 1 ? "property" : "properties",
             ". Remove data binding to edit static content."
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             JSONForm,
             {
               id: n == null ? void 0 : n._id,
-              onChange: x,
+              onChange: g,
               formData: i,
-              properties: E
+              properties: j
             }
           )
         ] })
       ] })
-    ] }) : isEmpty(E) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ] }) : isEmpty(j) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: n == null ? void 0 : n._id,
-        onChange: x,
+        onChange: g,
         formData: i,
-        properties: E
+        properties: j
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
-    b ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResetRSCBlockButton, { blockId: n == null ? void 0 : n._id }) : null,
+    E ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResetRSCBlockButton, { blockId: n == null ? void 0 : n._id }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasSettings, {})
   ] });
 }
@@ -5573,25 +5573,25 @@ 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: p, fallbackLang: u } = useLanguages(), m = p.length ? p : u;
+  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;
   return {
     askAi: useCallback(
-      async (x, g, E, b) => {
+      async (g, x, j, E) => {
         if (l) {
           n(!0), a(null);
           try {
-            const f = x === "content" ? cloneDeep(getBlockWithChildren(g, d)) : [cloneDeep(d.find((R) => R._id === g))];
-            set(f, "0._parent", null);
-            const k = p === u ? "" : p, _ = await l(x, promptWithLanguage(E, m, x), f, k), { blocks: C, error: B } = _;
+            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, v = await l(g, promptWithLanguage(j, m, g), b, k), { blocks: S, error: B } = v;
             if (B) {
               a(B);
               return;
             }
-            x === "styles" ? c(C) : i(C), b && b(_);
-          } catch (f) {
-            a(f);
+            g === "styles" ? c(S) : i(S), E && E(v);
+          } catch (b) {
+            a(b);
           } finally {
-            n(!1), b && b();
+            n(!1), E && E();
           }
         }
       },
@@ -5599,8 +5599,8 @@ const askAiProcessingAtom = atom$1(!1), useAskAi = () => {
         l,
         n,
         d,
-        p,
         u,
+        p,
         m,
         c,
         i
@@ -5627,10 +5627,10 @@ function Countdown() {
   const [o, n] = useState(SECONDS), [r, a] = useState(!1);
   useEffect(() => {
     if (r && o > 0) {
-      const p = setTimeout(() => {
+      const u = setTimeout(() => {
         n(o - 0.1);
       }, 100);
-      return () => clearTimeout(p);
+      return () => clearTimeout(u);
     } else
       o <= 0 && (a(!1), n(SECONDS));
   }, [r, o]);
@@ -5675,14 +5675,14 @@ function Countdown() {
   ] });
 }
 const AskAIStyles = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, m] = useState();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, m] = useState();
   useEffect(() => {
-    var g;
-    (g = d.current) == null || g.focus();
+    var x;
+    (x = d.current) == null || x.focus();
   }, []);
-  const x = (g) => {
-    const { usage: E } = g || {};
-    !l && E && m(E), p.current = setTimeout(() => m(void 0), 1e4), l || c("");
+  const g = (x) => {
+    const { usage: j } = x || {};
+    !l && j && m(j), u.current = setTimeout(() => m(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") }),
@@ -5691,12 +5691,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (g) => c(g.target.value),
+        onChange: (x) => c(x.target.value),
         placeholder: n("ask_ai_to_edit_styles"),
         className: "w-full border border-border focus:border-0",
         rows: 3,
-        onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), m(void 0), r("styles", o, i, x));
+        onKeyDown: (x) => {
+          x.key === "Enter" && (x.preventDefault(), u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, g));
         }
       }
     ),
@@ -5706,7 +5706,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), m(void 0), r("styles", o, i, x);
+            u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, g);
           },
           variant: "default",
           className: "w-fit",
@@ -5725,11 +5725,11 @@ const AskAIStyles = ({ blockId: o }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("stop") })
       ] }) : null
     ] }),
-    u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
+    p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
         n("Total tokens used"),
         ": ",
-        u.totalTokens
+        p.totalTokens
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Countdown, {})
     ] }) }) : null,
@@ -5743,45 +5743,45 @@ const AskAIStyles = ({ blockId: o }) => {
 });
 function ManualClasses() {
   var A;
-  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, p] = useState(""), { toast: u } = useToast(), m = (A = first(n)) == null ? void 0 : A.prop, x = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), g = () => {
-    const N = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    a(i, N, !0), p("");
-  }, [E, b] = useState([]), f = ({ value: N }) => {
-    const D = N.trim().toLowerCase(), I = D.match(/.+:/g);
-    let j = [];
-    if (I && I.length > 0) {
-      const [v] = I, w = D.replace(v, "");
-      j = fuse.search(w).map((T) => ({
-        ...T,
-        item: { ...T.item, name: v + T.item.name }
+  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 = (A = first(n)) == null ? void 0 : A.prop, g = reject((get(r, m, "").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(), P = L.match(/.+:/g);
+    let f = [];
+    if (P && P.length > 0) {
+      const [_] = P, C = L.replace(_, "");
+      f = fuse.search(C).map((I) => ({
+        ...I,
+        item: { ...I.item, name: _ + I.item.name }
       }));
     } else
-      j = fuse.search(D);
-    return b(map(j, "item"));
+      f = fuse.search(L);
+    return E(map(f, "item"));
   }, k = () => {
-    b([]);
-  }, _ = (N) => N.name, C = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), B = {
+    E([]);
+  }, v = (T) => T.name, S = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), B = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: o("enter_classes_separated_by_space"),
     value: d,
-    onKeyDown: (N) => {
-      N.key === "Enter" && d.trim() !== "" && g();
+    onKeyDown: (T) => {
+      T.key === "Enter" && d.trim() !== "" && x();
     },
-    onChange: (N, { newValue: D }) => p(D),
+    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) {
-      u({
+      p({
         title: o("clipboard_not_supported"),
         description: o("please_use_chrome_firefox_or_safari"),
         variant: "destructive"
       });
       return;
     }
-    navigator.clipboard.writeText(x.join(" ")), u({
+    navigator.clipboard.writeText(g.join(" ")), p({
       title: o("copied"),
       description: o("classes_copied_to_clipboard")
     });
@@ -5789,7 +5789,7 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `flex ${E.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
+      className: `flex ${j.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
@@ -5811,11 +5811,11 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Autosuggest,
             {
-              suggestions: E,
-              onSuggestionsFetchRequested: f,
+              suggestions: j,
+              onSuggestionsFetchRequested: b,
               onSuggestionsClearRequested: k,
-              getSuggestionValue: _,
-              renderSuggestion: C,
+              getSuggestionValue: v,
+              renderSuggestion: S,
               inputProps: B,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
@@ -5832,7 +5832,7 @@ function ManualClasses() {
             {
               variant: "outline",
               className: "h-6 border-border",
-              onClick: g,
+              onClick: x,
               disabled: d.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -5840,22 +5840,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          x.map((N) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.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
           ))
         ) })
       ]
@@ -6155,7 +6155,7 @@ const EDITOR_ICONS = {
     DropDown,
     {
       rounded: o,
-      onChange: (p) => r(p, n),
+      onChange: (u) => r(u, n),
       selected: i,
       options: a,
       disabled: !c
@@ -6169,23 +6169,23 @@ function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disab
     {
       disabled: !a.length || l,
       className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (p) => n(p.target.value),
-      onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
+      onChange: (u) => n(u.target.value),
+      onKeyDown: (u) => {
+        u.ctrlKey && (u.key === "z" && c(), u.key === "y" && d());
       },
       value: i,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: "" }),
         React__default.Children.toArray(
-          a.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: p, children: p }))
+          a.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { className: "bg-transparent", value: u, children: u }))
         )
       ]
     }
   );
 }
 const RangeChoices = ({ property: o, onChange: n }) => {
-  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), c = useMemo(() => get(CLASSES_LIST, `${o}.classes`, [""]), [o]), d = c.indexOf(i) > -1 ? c.indexOf(i) : 0, p = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), c = useMemo(() => get(CLASSES_LIST, `${o}.classes`, [""]), [o]), d = c.indexOf(i) > -1 ? c.indexOf(i) : 0, u = /\[.*\]/g.test(i);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[5px] px-2", children: i }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
@@ -6246,30 +6246,30 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), m = get(u, "1", ""), x = get(u, "2", ""), g = 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("-"), m = get(p, "1", ""), g = get(p, "2", ""), x = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((f) => ({ ...f, color: b, shade: f.shade ? f.shade : "500" })));
+    (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" })));
     },
-    [c, p]
+    [c, u]
   );
   useEffect(() => {
     if (["current", "inherit", "transparent", "black", "white"].includes(m))
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [m]);
-  const E = useCallback(
+  const j = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      p({ color: m, shade: b });
+    (E) => {
+      u({ color: m, shade: E });
     },
     [m]
   );
   return useEffect(() => {
-    p({ color: "", shade: "" });
+    u({ color: "", shade: "" });
   }, [r]), useEffect(() => {
-    const f = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    f.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && n(f, o);
+    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    b.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && n(b, o);
   }, [d, n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
@@ -6277,7 +6277,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         disabled: !l,
         rounded: !0,
         selected: m,
-        onChange: g,
+        onChange: x,
         options: [
           "current",
           "transparent",
@@ -6310,7 +6310,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: x, disabled: !m || !l, onChange: E, options: i }) })
+    /* @__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 }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -6474,18 +6474,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     "button",
     {
       type: "button",
-      onMouseDown: (p) => {
-        const u = {
+      onMouseDown: (u) => {
+        const p = {
           onDrag: r,
           onDragEnd: a,
           dragging: !0,
-          dragStartY: p.pageY,
+          dragStartY: u.pageY,
           dragStartValue: `${n}`,
           dragUnit: o,
           negative: i,
           cssProperty: c
         };
-        l(u), d(u);
+        l(p), d(p);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
@@ -6505,91 +6505,91 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: m } = o, [x, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [E, b] = useState(!1), [f, k] = useState(""), [_, 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: m } = o, [g, x] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [j, E] = useState(!1), [b, k] = useState(""), [v, S] = useState(!1), [B, R] = useState(!1);
   useEffect(() => {
-    const { value: j, unit: v } = getClassValueAndUnit(i);
-    if (v === "") {
-      l(j), g(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: f, unit: _ } = getClassValueAndUnit(i);
+    if (_ === "") {
+      l(f), x(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    g(v), l(v === "class" || isEmpty(j) ? "" : j);
-  }, [i, p, u]);
-  const A = useThrottledCallback((j) => c(j), [c], THROTTLE_TIME), N = useThrottledCallback((j) => c(j, !1), [c], THROTTLE_TIME), D = useCallback(
-    (j = !1) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
-        b(!0);
+    x(_), l(_ === "class" || isEmpty(f) ? "" : f);
+  }, [i, u, p]);
+  const A = useThrottledCallback((f) => c(f), [c], THROTTLE_TIME), T = useThrottledCallback((f) => c(f, !1), [c], THROTTLE_TIME), L = useCallback(
+    (f = !1) => {
+      const _ = getUserInputValues(`${a}`, p);
+      if (get(_, "error", !1)) {
+        E(!0);
         return;
       }
-      const w = get(v, "unit") !== "" ? get(v, "unit") : x;
-      if (w === "auto" || w === "none") {
-        A(`${d}${w}`);
+      const C = get(_, "unit") !== "" ? get(_, "unit") : g;
+      if (C === "auto" || C === "none") {
+        A(`${d}${C}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      j ? N(T) : A(T);
+      const I = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      f ? T(I) : A(I);
     },
-    [A, N, a, x, d, u]
-  ), I = useCallback(
-    (j) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
-        b(!0);
+    [A, T, a, g, d, p]
+  ), P = useCallback(
+    (f) => {
+      const _ = getUserInputValues(`${a}`, p);
+      if (get(_, "error", !1)) {
+        E(!0);
         return;
       }
-      if (j === "auto" || j === "none") {
-        A(`${d}${j}`);
+      if (f === "auto" || f === "none") {
+        A(`${d}${f}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const w = get(v, "unit") !== "" ? get(v, "unit") : j, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${w === "-" ? "" : w}]`;
-      A(T);
+      const C = get(_, "unit") !== "" ? get(_, "unit") : f, I = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
+      A(I);
     },
-    [A, a, d, u]
+    [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: x === "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: g === "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 ${_ ? "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(x) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: x === "class",
-          onKeyPress: (j) => {
-            j.key === "Enter" && D();
+          readOnly: g === "class",
+          onKeyPress: (f) => {
+            f.key === "Enter" && L();
           },
-          onKeyDown: (j) => {
-            if (j.keyCode !== 38 && j.keyCode !== 40)
+          onKeyDown: (f) => {
+            if (f.keyCode !== 38 && f.keyCode !== 40)
               return;
-            j.preventDefault(), R(!0);
-            const v = parseInt$1(j.target.value);
-            let w = isNaN$1(v) ? 0 : v;
-            j.keyCode === 38 && (w += 1), j.keyCode === 40 && (w -= 1);
-            const S = `${w}`, L = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${x === "-" ? "" : x}]`;
-            N(L);
+            f.preventDefault(), R(!0);
+            const _ = parseInt$1(f.target.value);
+            let C = isNaN$1(_) ? 0 : _;
+            f.keyCode === 38 && (C += 1), f.keyCode === 40 && (C -= 1);
+            const w = `${C}`, N = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${g === "-" ? "" : g}]`;
+            T(N);
           },
-          onKeyUp: (j) => {
-            B && (j.preventDefault(), R(!1));
+          onKeyUp: (f) => {
+            B && (f.preventDefault(), R(!1));
           },
-          onBlur: () => D(),
-          onChange: (j) => {
-            b(!1), l(j.target.value);
+          onBlur: () => L(),
+          onChange: (f) => {
+            E(!1), l(f.target.value);
           },
-          onClick: (j) => {
-            var v;
-            (v = j == null ? void 0 : j.target) == null || v.select(), r(!1);
+          onClick: (f) => {
+            var _;
+            (_ = f == null ? void 0 : f.target) == null || _.select(), r(!1);
           },
-          value: _ ? f : 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(
             " ",
-            E ? "border-red-500 text-red-500" : "border-foreground/20"
+            j ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6601,44 +6601,44 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: x }),
-              u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${p.length === 1 ? "px-2 font-semibold" : ""}`, children: g }),
+              p.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipPortal, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           UnitSelection,
           {
-            units: u,
-            current: x,
-            onSelect: (j) => {
-              r(!1), g(j), I(j);
+            units: p,
+            current: g,
+            onSelect: (f) => {
+              r(!1), x(f), P(f);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(x) !== -1 || _ ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(g) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => C(!0),
-        onDragEnd: (j) => {
-          if (k(() => ""), C(!1), isEmpty(j))
+        onDragStart: () => S(!0),
+        onDragEnd: (f) => {
+          if (k(() => ""), S(!1), isEmpty(f))
             return;
-          const v = `${j}`, S = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${x === "-" ? "" : x}]`;
-          A(S);
+          const _ = `${f}`, w = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${g === "-" ? "" : g}]`;
+          A(w);
         },
-        onDrag: (j) => {
-          if (isEmpty(j))
+        onDrag: (f) => {
+          if (isEmpty(f))
             return;
-          k(j);
-          const v = `${j}`, S = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${x === "-" ? "" : x}]`;
-          N(S);
+          k(f);
+          const _ = `${f}`, w = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${g === "-" ? "" : g}]`;
+          T(w);
         },
         currentValue: a,
-        unit: x,
+        unit: g,
         negative: m,
-        cssProperty: p
+        cssProperty: u
       }
     )
   ] }) }) });
@@ -6730,22 +6730,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, m] = useCanvasWidth(), x = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), f = useMemo(() => get(x, "fullCls", ""), [x]), k = useCallback(
-    (N, D = !0) => {
-      const I = { dark: p, mq: m, mod: u, cls: N, property: l, fullCls: "" };
-      (p || u !== "") && (I.mq = "xs");
-      const j = generateFullClsName(I);
-      g(b, [j], D);
+  }, 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(
+    (T, L = !0) => {
+      const P = { dark: u, mq: m, mod: p, cls: T, property: l, fullCls: "" };
+      (u || p !== "") && (P.mq = "xs");
+      const f = generateFullClsName(P);
+      x(E, [f], L);
     },
-    [b, p, m, u, l, g]
-  ), _ = useCallback(() => {
-    E(b, [f]);
-  }, [b, f, E]), C = useMemo(() => canChangeClass(x, m), [x, m]);
+    [E, u, m, p, l, x]
+  ), v = useCallback(() => {
+    j(E, [b]);
+  }, [E, b, j]), S = useMemo(() => canChangeClass(g, m), [g, m]);
   useEffect(() => {
-    i(C, x);
-  }, [C, i, x]);
+    i(S, g);
+  }, [S, i, g]);
   const [, , B] = useCanvasWidth(), R = useCallback(
-    (N) => {
+    (T) => {
       B({
         xs: 400,
         sm: 640,
@@ -6753,18 +6753,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[N]);
+      }[T]);
     },
     [B]
-  ), A = get(x, "dark", null) === p && get(x, "mod", null) === u && get(x, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: x && 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] ${x && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), A = get(g, "dark", null) === u && get(g, "mod", null) === p && get(g, "mq", null) === m;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: S, canReset: g && 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] ${g && !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(x, "cls", ""),
+            currentClass: get(g, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: k,
@@ -6777,7 +6777,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 ${f ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => _(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && x ? /* @__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: () => 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" }) }) : S && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6789,19 +6789,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(x, "mq")),
-            p && !x.dark ? "(Light mode)" : ""
+            getBreakpoint(get(g, "mq")),
+            u && !g.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => R(get(x, "mq")),
+              onClick: () => R(get(g, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(x, "mq").toUpperCase()
+                get(g, "mq").toUpperCase()
               ]
             }
           )
@@ -6818,7 +6818,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), m = useSelectedBlockCurrentClasses(), x = useCallback((g) => map(m, "property").includes(g), [m]);
+  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), m = useSelectedBlockCurrentClasses(), g = useCallback((x) => map(m, "property").includes(x), [m]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6827,22 +6827,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: g, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            n.map(({ label: x, key: j }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(E),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${E === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => p(j),
+                  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: x(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: g(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, E, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, j, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(g)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(x)) })
             ] }) }))
           ) })
         ] }),
@@ -6852,7 +6852,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             type: l,
             units: [...i],
             label: "",
-            property: p,
+            property: u,
             negative: c
           }
         ) })
@@ -6861,10 +6861,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   );
 }, NestedOptions = ({ heading: o, items: n }) => {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useMemo(() => {
-    const i = (p) => flatten(
-      p.map((u) => u.styleType === "multiple" ? map(u.options, "key") : u.property)
+    const i = (u) => flatten(
+      u.map((p) => p.styleType === "multiple" ? map(p.options, "key") : p.property)
     ), c = flatten(
-      n.map((p) => p.styleType === "accordion" ? i(p.items) : p.styleType === "multiple" ? map(p.options, "key") : p.property)
+      n.map((u) => u.styleType === "accordion" ? i(u.items) : u.styleType === "multiple" ? map(u.options, "key") : u.property)
     ), d = map(a, "property");
     return intersection(c, d).length > 0;
   }, [a, n]);
@@ -6884,11 +6884,11 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   const { t: n } = useTranslation(), r = useSelectedBlockCurrentClasses(), a = useCallback(
     (i = []) => {
       const c = {};
-      for (let p = 0; p < r.length; p++)
-        c[r[p].property] = r[p].cls;
+      for (let u = 0; u < r.length; u++)
+        c[r[u].property] = r[u].cls;
       let d = !0;
-      for (const p in i)
-        if (!has(c, p) || c[p] !== i[p]) {
+      for (const u in i)
+        if (!has(c, u) || c[u] !== i[u]) {
           d = !1;
           break;
         }
@@ -6906,8 +6906,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   const o = useSelectedBlock(), [n] = useSelectedStylingBlocks(), { t: r } = useTranslation(), a = useGlobalStylingPresets(), l = useAddClassesToBlocks(), i = getBlockComponent(o._type), c = get(first(n), "prop"), d = get(i.props, `${c}.presets`, {});
   if (isEmpty(a) && (!has(i, "props") || isEmpty(d)))
     return null;
-  const p = (u) => {
-    const m = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+  const u = (p) => {
+    const m = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l([o._id], m, !0);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
@@ -6923,16 +6923,16 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           r("presets")
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(d).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => p(d[u]), children: [
-          capitalize(startCase(r(u))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(d).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(d[p]), children: [
+          capitalize(startCase(r(p))),
           /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
         ] })) })
       ] }),
       isEmpty(a) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuLabel, { children: r("Global presets") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(a).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => p(a[u]), children: [
-          capitalize(startCase(r(u))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(a).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(a[p]), children: [
+          capitalize(startCase(r(p))),
           /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
         ] })) })
       ] })
@@ -6952,8 +6952,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
 };
 function BlockStyling() {
   const { flexChild: o, gridChild: n } = useSelectedBlocksDisplayChild(), [r] = useSelectedStylingBlocks(), [a, l] = React__default.useState(""), [i, c] = React__default.useState({
-    onDrag: (u) => u,
-    onDragEnd: (u) => u,
+    onDrag: (p) => p,
+    onDragEnd: (p) => p,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
@@ -6961,21 +6961,21 @@ function BlockStyling() {
     negative: !1,
     cssProperty: ""
   }), d = useThrottledCallback(
-    (u) => {
-      const m = !get(i, "negative", !1), x = get(i, "cssProperty", "");
-      let g = parseFloat(i.dragStartValue);
-      g = isNaN(g) ? 0 : g;
-      let E = MAPPER[i.dragUnit];
-      (startsWith(x, "scale") || x === "opacity") && (E = 10);
-      let f = (i.dragStartY - u.pageY) / E + g;
-      m && f < 0 && (f = 0), x === "opacity" && f > 1 && (f = 1), i.onDrag(`${f}`), l(`${f}`);
+    (p) => {
+      const m = !get(i, "negative", !1), g = 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);
+      let b = (i.dragStartY - p.pageY) / j + x;
+      m && b < 0 && (b = 0), g === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
-  ), p = useCallback(() => {
+  ), u = useCallback(() => {
     setTimeout(() => i.onDragEnd(`${a}`), 100), c({
-      onDrag: (u) => u,
-      onDragEnd: (u) => u,
+      onDrag: (p) => p,
+      onDragEnd: (p) => p,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -6989,7 +6989,7 @@ function BlockStyling() {
       "div",
       {
         onMouseMove: d,
-        onMouseUp: () => p(),
+        onMouseUp: () => u(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
     ) : null,
@@ -6998,7 +6998,7 @@ function BlockStyling() {
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
         o && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION }),
         n ? /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION }) : null,
-        SETTINGS_SECTIONS.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: u }, u.heading))
+        SETTINGS_SECTIONS.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: p }, p.heading))
       ] })
     ] })
   ] });
@@ -7010,9 +7010,9 @@ const ChaiSelect = ({
   placeholder: a = "Select",
   className: l = ""
 }) => {
-  const [i, c] = useState(o), d = (p) => {
-    const u = p.target.value;
-    c(u), n(u);
+  const [i, c] = useState(o), d = (u) => {
+    const p = u.target.value;
+    c(p), n(p);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative inline-block w-full", l), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "select",
@@ -7022,7 +7022,7 @@ const ChaiSelect = ({
       onChange: d,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, children: a }),
-        r.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.value, children: p.label }, p.value))
+        r.map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: u.value, children: u.label }, u.value))
       ]
     }
   ) });
@@ -7054,25 +7054,25 @@ const BlockCard = ({
   library: n,
   parentId: r = void 0
 }) => {
-  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: u } = useBlockHighlight(), m = get(o, "name", get(o, "label")), x = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), E = (k) => {
-    const _ = has(k, "styles_attrs.data-page-section");
-    return k._type === "Box" && _;
-  }, b = useCallback(
+  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;
+  }, E = useCallback(
     async (k) => {
       if (k.stopPropagation(), has(o, "component")) {
         c(o, r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
         return;
       }
       l(!0);
-      const _ = await i(n, o);
-      isEmpty(_) || d(syncBlocksWithDefaults(_), 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]
-  ), f = async (k) => {
-    const _ = await i(n, o);
-    let C = r;
-    if (E(first(_)) && (C = null), !isEmpty(_)) {
-      const B = { blocks: _, uiLibrary: !0, parent: C };
+  ), b = async (k) => {
+    const v = await i(n, o);
+    let S = r;
+    if (j(first(v)) && (S = null), !isEmpty(v)) {
+      const B = { blocks: v, uiLibrary: !0, parent: S };
       if (k.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
         const R = new Image();
         R.src = o.preview, R.onload = () => {
@@ -7080,8 +7080,8 @@ const BlockCard = ({
         };
       } else
         k.dataTransfer.setDragImage(new Image(), 0, 0);
-      g(B), setTimeout(() => {
-        p([]), u(), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+      x(B), setTimeout(() => {
+        u([]), p(), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
   };
@@ -7090,9 +7090,9 @@ const BlockCard = ({
       "div",
       {
         onClick: a ? () => {
-        } : b,
-        draggable: x ? "true" : "false",
-        onDragStart: f,
+        } : E,
+        draggable: g ? "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"
         ),
@@ -7115,42 +7115,42 @@ const BlockCard = ({
     (async () => {
       if (i === "complete" || c.current === "loading")
         return;
-      c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
+      c.current = "loading", r((u) => ({ ...u, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
       const d = await a(o);
-      c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
+      c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
     })();
   }, [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: p } = useLibraryBlocks(c), u = groupBy([...d, ...i], "group"), [m, x] = useState("Hero"), g = get(u, m, []), E = useRef(null), { t: b } = useTranslation(), f = (C) => {
-    E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
-      E.current && x(C);
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((S) => S.category === "custom"), c = a.find((S) => S.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 = (S) => {
+    j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
+      j.current && g(S);
     }, 300);
   };
-  if (p)
+  if (u)
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const k = filter(g, (C, B) => B % 2 === 0), _ = filter(g, (C, B) => B % 2 === 1);
+  const k = filter(x, (S, B) => B % 2 === 0), v = filter(x, (S, 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 }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: b("groups") }),
+        /* @__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(u, (C, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (S, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => f(B),
-              onMouseLeave: () => clearTimeout(E.current),
-              onClick: () => x(B),
+              onMouseEnter: () => b(B),
+              onMouseLeave: () => clearTimeout(j.current),
+              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",
                 B === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(B.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(B.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7162,15 +7162,15 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => E.current ? clearTimeout(E.current) : null,
+        onMouseEnter: () => j.current ? clearTimeout(j.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__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((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              _.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
+              v.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7615,54 +7615,54 @@ 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: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), x = () => {
+  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), g = () => {
     if (has(o, "blocks")) {
-      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      p(syncBlocksWithDefaults(b), r || null);
+      const E = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(E), r || null);
     } else
       d(o, r || null);
     emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
-  }, g = useFeature("dnd"), { t: E } = useTranslation();
+  }, x = useFeature("dnd"), { t: j } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
         disabled: n,
-        onClick: x,
+        onClick: g,
         type: "button",
-        onDragStart: (b) => {
-          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
-            u([]), m();
+        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();
           }, 200);
         },
-        draggable: g ? "true" : "false",
+        draggable: x ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(i || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(E(c || l)) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(j(c || l)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: E(c || l) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: j(c || l) }) })
   ] }) });
 }, DefaultChaiBlocks = ({ parentId: o, gridCols: n = "grid-cols-2" }) => {
   const r = useChaiBlocks(), a = useBuilderProp("filterChaiBlock", () => !0), l = filter(r, a), i = groupBy(l, "category"), c = uniq(map(i.core, "group"));
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderBlocks, { gridCols: n, parentId: o, groups: c, blocks: i.core });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, gridCols: a = "grid-cols-4" }) => {
   var d;
-  const { t: l } = useTranslation(), [i] = useBlocksStore(), c = (d = find(i, (p) => p._id === r)) == null ? void 0 : d._type;
+  const { t: l } = useTranslation(), [i] = useBlocksStore(), c = (d = find(i, (u) => u._id === r)) == null ? void 0 : d._type;
   return React__default.Children.toArray(
     map(
-      sortBy(o, (p) => CORE_GROUPS.indexOf(p) === -1 ? 99 : CORE_GROUPS.indexOf(p)),
-      (p) => reject(filter(values(n), { group: p }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: p, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: p, className: "border-border", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline", children: capitalize(l(p.toLowerCase())) }),
+      sortBy(o, (u) => CORE_GROUPS.indexOf(u) === -1 ? 99 : CORE_GROUPS.indexOf(u)),
+      (u) => reject(filter(values(n), { group: u }), { hidden: !0 }).length ? /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion, { type: "single", value: u, collapsible: !0, className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: u, className: "border-border", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "rounded-md bg-background px-4 py-2 capitalize text-foreground hover:no-underline", children: capitalize(l(u.toLowerCase())) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "mx-auto max-w-xl p-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-2 " + a, children: React__default.Children.toArray(
-          reject(filter(values(n), { group: p }), { hidden: !0 }).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          reject(filter(values(n), { group: u }), { hidden: !0 }).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             CoreBlock,
             {
               parentId: r,
-              block: u,
-              disabled: !canAcceptChildBlock(c, u.type) || !canBeNestedInside(c, u.type)
+              block: p,
+              disabled: !canAcceptChildBlock(c, p.type) || !canBeNestedInside(c, p.type)
             }
           ))
         ) }) })
@@ -7683,8 +7683,8 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Tabs,
       {
-        onValueChange: (p) => {
-          c(""), i(p);
+        onValueChange: (u) => {
+          c(""), i(u);
         },
         value: l,
         className: cn("h-max"),
@@ -7969,7 +7969,7 @@ function QuickPrompts({ onClick: o }) {
     icon: FaLanguage$1,
     prompt: `Translate the content to ${get(LANGUAGES, a, a)}. Maintain same tone, style and length.`
   }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "space-y-2", children: i.map(
-    ({ name: c, icon: d, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
+    ({ name: c, icon: d, subMenus: u, prompt: p }) => u ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "li",
         {
@@ -7985,7 +7985,7 @@ function QuickPrompts({ onClick: o }) {
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => o(u),
+        onClick: () => o(p),
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(d, { className: "h-4 w-4" }),
@@ -7997,20 +7997,20 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, m] = useState(), x = useRef(null), g = useRef(null);
+  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);
   useEffect(() => {
-    var b;
-    (b = x.current) == null || b.focus();
+    var E;
+    (E = g.current) == null || E.focus();
   }, []);
-  const E = (b) => {
-    const { usage: f } = b || {};
-    !l && f && m(f), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
+  const j = (E) => {
+    const { usage: b } = E || {};
+    !l && b && m(b), x.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        onClick: () => p(!d),
+        onClick: () => u(!d),
         className: "flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Ask AI") }),
@@ -8022,14 +8022,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: x,
+          ref: g,
           value: i,
-          onChange: (b) => c(b.target.value),
+          onChange: (E) => c(E.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E));
+          onKeyDown: (E) => {
+            E.key === "Enter" && (E.preventDefault(), x.current && clearTimeout(x.current), m(void 0), r("content", o, i, j));
           }
         }
       ),
@@ -8039,7 +8039,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E);
+              x.current && clearTimeout(x.current), m(void 0), r("content", o, i, j);
             },
             variant: "default",
             className: "w-fit",
@@ -8058,11 +8058,11 @@ const AIUserPrompt = ({ blockId: o }) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
         ] }) : null
       ] }),
-      u ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
+      p ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
           n("Total tokens used"),
           ": ",
-          u.totalTokens
+          p.totalTokens
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Countdown, {})
       ] }) }) : null,
@@ -8071,8 +8071,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (b) => {
-            g.current && clearTimeout(g.current), m(void 0), r("content", o, b, E);
+          onClick: (E) => {
+            x.current && clearTimeout(x.current), m(void 0), r("content", o, E, j);
           }
         }
       )
@@ -8082,19 +8082,19 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, m] = useState(!1), { toast: x } = useToast(), g = 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), [, m] = useState(!1), { toast: g } = useToast(), x = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const E = async () => {
+  const j = async () => {
     try {
-      d(!0), u(null), await i(r), x({
+      d(!0), p(null), await i(r), g({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), g.current.click();
-    } catch (b) {
-      u(b);
+      }), x.current.click();
+    } catch (E) {
+      p(E);
     } finally {
       d(!1);
     }
@@ -8102,25 +8102,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (b) => {
-        m(b !== "");
+      onValueChange: (E) => {
+        m(E !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-b border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold text-muted-foreground", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: x, className: "border-b border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold text-muted-foreground", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (b) => a(b.target.value),
+              onChange: (E) => a(E.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (b) => {
-                b.key === "Enter" && (b.preventDefault(), E());
+              onKeyDown: (E) => {
+                E.key === "Enter" && (E.preventDefault(), j());
               }
             }
           ),
@@ -8132,20 +8132,20 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => E(),
+                onClick: () => j(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
                 children: c ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-                  o("Generating... Please wait...")
+                  o("Saving... Please wait...")
                 ] }) : o("Save")
               }
             ),
             n.trim().length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialog, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(AlertDialogTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { disabled: n.trim().length === 0, variant: "ghost", className: "w-fit", size: "sm", children: c ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "h-5 w-5 animate-spin" }),
-                o("Generating... Please wait...")
+                o("Deleting... Please wait...")
               ] }) : o("Delete") }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogContent, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(AlertDialogHeader, { children: [
@@ -8161,7 +8161,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), E();
+                        a(""), j();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8170,7 +8170,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               ] })
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-w-full", children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: p.message }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 max-w-full", children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: u.message }) })
         ] })
       ] })
     }
@@ -8182,42 +8182,42 @@ 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, p] = useState(""), [u, m] = useState(null), [x, g] = useState(""), E = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, m] = useState(null), [g, x] = useState(""), j = useRef(null), E = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const f = () => {
+  const b = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      x("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const R = [...a, { key: i, value: d }];
-      r(R), l(a), c(""), p(""), g("");
+      r(R), l(a), c(""), u(""), x("");
     }
   }, k = (R) => {
-    const A = a.filter((N, D) => D !== R);
+    const A = a.filter((T, L) => L !== R);
     r(A), l(A);
-  }, _ = (R) => {
-    m(R), c(a[R].key), p(a[R].value);
-  }, C = () => {
+  }, v = (R) => {
+    m(R), c(a[R].key), u(a[R].value);
+  }, S = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      x("Attribute keys cannot start with '@'");
       return;
     }
-    if (u !== null && i) {
+    if (p !== null && i) {
       const R = [...a];
-      R[u] = { key: i, value: d }, r(R), l(R), m(null), c(""), p(""), g("");
+      R[p] = { key: i, value: d }, r(R), l(R), m(null), c(""), u(""), x("");
     }
   }, B = (R) => {
-    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), u !== null ? C() : f());
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? S() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (R) => {
-          R.preventDefault(), u !== null ? C() : f();
+          R.preventDefault(), p !== null ? S() : b();
         },
         className: "space-y-3",
         children: [
@@ -8231,7 +8231,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: E,
+                  ref: j,
                   value: i,
                   onChange: (R) => c(R.target.value),
                   placeholder: "Key",
@@ -8249,9 +8249,9 @@ const AIUserPrompt = ({ blockId: o }) => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: b,
+                  ref: E,
                   value: d,
-                  onChange: (R) => p(R.target.value),
+                  onChange: (R) => u(R.target.value),
                   onKeyDown: B,
                   placeholder: "Value",
                   className: "bg-background text-sm"
@@ -8259,8 +8259,8 @@ const AIUserPrompt = ({ blockId: o }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "secondary", className: "h-8 w-fit text-sm", children: u !== null ? "Save" : "Add" }),
-          x && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: x })
+          /* @__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 })
         ]
       }
     ),
@@ -8270,7 +8270,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         /* @__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: () => _(A), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(A), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
         ] }),
@@ -8284,15 +8284,15 @@ const AIUserPrompt = ({ blockId: o }) => {
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
-    const d = map(get(o, i), (p, u) => ({ key: u, value: p }));
+    const d = map(get(o, i), (u, p) => ({ key: p, value: u }));
     isEmpty(d) ? r([]) : r(d);
   }, [get(o, i)]);
   const c = React.useCallback(
     (d = []) => {
-      const p = {};
-      forEach(d, (u) => {
-        isEmpty(u.key) || set(p, u.key, u.value);
-      }), l([get(o, "_id")], { [i]: p });
+      const u = {};
+      forEach(d, (p) => {
+        isEmpty(p.key) || set(u, p.key, p.value);
+      }), l([get(o, "_id")], { [i]: u });
     },
     [o, l, i]
   );
@@ -8418,7 +8418,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
   ] });
 }, Breakpoints = () => {
   const [, o, n] = useCanvasWidth(), [r, a] = useSelectedBreakpoints(), { t: l } = useTranslation(), i = useBuilderProp("breakpoints", WEB_BREAKPOINTS), c = (d) => {
-    r.includes(d) ? r.length > 2 && a(r.filter((p) => p !== d)) : a((p) => [...p, d]);
+    r.includes(d) ? r.length > 2 && a(r.filter((u) => u !== d)) : a((u) => [...u, d]);
   };
   return i.length < 4 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center rounded-md", children: map(i, (d) => /* @__PURE__ */ createElement(BreakpointCard, { ...d, onClick: n, key: d.breakpoint, currentBreakpoint: o })) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md", children: [
     map(
@@ -8464,43 +8464,6 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       ] })
     ] })
   ] }) });
-}, LanguageSelector = () => {
-  const { fallbackLang: o, languages: n, selectedLang: r, setSelectedLang: a } = useLanguages(), l = (r == null ? void 0 : r.length) > 0 ? r : o, i = useMemo(() => {
-    const c = [];
-    return forEach(uniq([o, ...n]), (d) => {
-      const p = get(LANGUAGES, d);
-      p && c.push({ key: d, value: p, default: d === o });
-    }), c;
-  }, [o, n]);
-  return isEmpty(n) && l === "en" ? null : isEmpty(n) && l !== "en" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
-    get(LANGUAGES, l)
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { size: "sm", variant: "ghost", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(FaLanguage, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-          " ",
-          get(LANGUAGES, l)
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDownIcon, { className: "h-4 w-4" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "border-border", children: map(i, (c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      DropdownMenuItem,
-      {
-        className: cn(
-          "flex cursor-pointer items-center text-sm",
-          c.key === l && "!bg-blue-500 text-white hover:!text-white"
-        ),
-        onClick: () => a(c.key),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: c.value }),
-          c.key === o ? /* @__PURE__ */ jsxRuntimeExports.jsx(FaStar, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
-        ]
-      }
-    )) })
-  ] });
 }, CanvasTopBar = () => {
   const o = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2", children: [
@@ -8522,10 +8485,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
       /* @__PURE__ */ jsxRuntimeExports.jsx(Separator, { orientation: "vertical" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(UndoRedo, {})
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full items-center space-x-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LanguageSelector, {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {})
-    ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClearCanvas, {}) })
   ] });
 };
 function BlockAttributesToggle() {
@@ -8736,16 +8696,16 @@ function RemoveProviderConfirmation({
 }
 const PageDataProviders = () => {
   const { t: o } = useTranslation(), n = useMemo(() => getChaiDataProviders(), []), [r, a] = usePageDataProviders(), [, l] = useAtom$1(builderSaveStateAtom), [i, c] = useState(
-    filter(n, (f) => map(r, "providerKey").includes(f.providerKey))
-  ), [d, p] = useState(""), [u, m] = useState(null), x = filter(
-    n.map((f) => map(i, "providerKey").includes(f.providerKey) ? null : { value: f.providerKey, label: f.name }),
-    (f) => !isNull(f)
-  ), g = (f) => {
-    const k = find(n, { providerKey: f });
-    c((_) => [..._, k]), a((_) => [..._, { providerKey: k.providerKey, args: {} }]), p(""), l("UNSAVED");
-  }, E = (f) => {
-    c((k) => filter(k, (_) => _.providerKey !== f.providerKey)), a((k) => filter(k, (_) => _.providerKey !== f.providerKey)), l("UNSAVED");
-  }, b = (f) => m(f);
+    filter(n, (b) => map(r, "providerKey").includes(b.providerKey))
+  ), [d, u] = useState(""), [p, m] = useState(null), g = 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");
+  }, 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);
   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("no_data_providers"),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8753,11 +8713,11 @@ const PageDataProviders = () => {
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-1.5 text-xs text-gray-500", children: o("add_data_providers") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: d, onValueChange: (f) => g(f), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: d, onValueChange: (b) => x(b), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: o("select_provider") }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "", children: o("choose") }),
-        x.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: f.value, children: f.label }, f.value))
+        g.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: b.value, children: b.label }, b.value))
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8766,21 +8726,21 @@ const PageDataProviders = () => {
         o("page_data_providers"),
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: i.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: i.map((b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: "w-full rounded-lg border border-border bg-card text-card-foreground shadow-sm",
           "data-v0-t": "card",
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1.5 px-4 pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium leading-4", children: f.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "pt-1 text-xs text-gray-400", children: f.description })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium leading-4", children: b.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "pt-1 text-xs text-gray-400", children: b.description })
             ] }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-2 py-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
-                  onClick: () => b(f),
+                  onClick: () => E(b),
                   className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-blue-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
                   children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8806,7 +8766,7 @@ const PageDataProviders = () => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveProviderConfirmation, { onRemove: () => E(f), name: f.name, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-red-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveProviderConfirmation, { onRemove: () => j(b), name: b.name, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-red-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "svg",
                   {
@@ -8832,16 +8792,16 @@ const PageDataProviders = () => {
             ] })
           ]
         },
-        f.providerKey
+        b.providerKey
       )) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => m(null), provider: u })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => m(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-3h7dkWBH.js"));
+const TopBar = lazy(() => import("./Topbar-_edNTuUL.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -8868,15 +8828,15 @@ function isDualLayout(o) {
 }
 const RootLayout = () => {
   const [o, n] = useState(0), [r] = useLayoutVariant(), [a, l] = useState(!1);
-  useChaiBuilderMsgListener(({ name: g }) => {
-    g === CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS && n(1);
+  useChaiBuilderMsgListener(({ name: x }) => {
+    x === CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS && n(1);
   });
-  const i = useBuilderProp("sideBarComponents.top", []), c = (g) => {
-    g.preventDefault();
-  }, d = (g) => {
-    n(o === g ? null : g);
-  }, p = useSidebarMenuItems(r), { t: u } = useTranslation(), m = [...p, ...i], x = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: x, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
+  const i = useBuilderProp("sideBarComponents.top", []), c = (x) => {
+    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: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
@@ -8886,23 +8846,23 @@ 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((g, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((x, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
-                    variant: o === E ? "default" : "ghost",
+                    variant: o === j ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => d(E),
-                    children: get(g, "icon", null)
+                    onClick: () => d(j),
+                    children: get(x, "icon", null)
                   },
-                  E
+                  j
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: u(g.label) }) })
-              ] }, "button" + E)) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p(x.label) }) })
+              ] }, "button" + j)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-1", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", onClick: () => l(!0), children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutTemplate, { size: 20 }) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: u("Choose Builder Layout") }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p("Choose Builder Layout") }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(HotKeys, {})
               ] })
@@ -8917,7 +8877,7 @@ const RootLayout = () => {
                 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: u(m[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p(m[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), {}) }) })
                 ] }) })
@@ -8937,7 +8897,7 @@ const RootLayout = () => {
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full 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(EditIcon, { size: "16", className: "rtl:ml-2" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: u("Block Settings") })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p("Block Settings") })
                   ] }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel$1, {}) }) })
                 ] }) })
@@ -9025,69 +8985,72 @@ const RootLayout = () => {
   ] }) }) });
 };
 export {
-  useSelectedBlockCurrentClasses as $,
+  usePasteBlocks as $,
   AddBlocksPanel$1 as A,
   BlockSettings as B,
   ChaiSelect$1 as C,
   DefaultChaiBlocks as D,
-  useBuilderReset as E,
+  useGlobalBlocksStore as E,
   FaCheck as F,
-  useAddBlock as G,
-  useAddClassesToBlocks as H,
+  useBlocksStore as G,
+  useUndoManager as H,
   ImportHTML$1 as I,
-  useCanvasWidth as J,
-  useCanvasZoom as K,
-  useCopyBlockIds as L,
-  useCopyToClipboard as M,
-  useCurrentPage as N,
+  useBuilderReset as J,
+  useAddBlock as K,
+  LANGUAGES as L,
+  useAddClassesToBlocks as M,
+  useCanvasWidth as N,
   Outline$1 as O,
-  useCutBlockIds as P,
-  useDarkMode as Q,
-  useDuplicateBlocks as R,
-  useHiddenBlockIds as S,
+  useCanvasZoom as P,
+  useCopyBlockIds as Q,
+  useCopyToClipboard as R,
+  useCurrentPage as S,
   ThemeOptions as T,
   UILibraries as U,
-  useHighlightBlockId as V,
-  useBlockHighlight as W,
-  usePasteBlocks as X,
-  useBrandingOptions as Y,
-  useRemoveBlocks as Z,
-  useRemoveClassesFromBlocks as _,
+  useCutBlockIds as V,
+  useDarkMode as W,
+  useDuplicateBlocks as X,
+  useHiddenBlockIds as Y,
+  useHighlightBlockId as Z,
+  useBlockHighlight as _,
   useSelectedBlockIds as a,
-  useSelectedBlockAllClasses as a0,
-  useSelectedBlock as a1,
-  useStylingBreakpoint as a2,
-  useUILibraryBlocks as a3,
-  useStylingState as a4,
-  useSelectedBlocksDisplayChild as a5,
-  useSelectedBreakpoints as a6,
-  useSelectedStylingBlocks as a7,
-  useLanguages as a8,
-  useLayoutVariant as a9,
-  useBlocksStoreUndoableActions as aa,
+  useBrandingOptions as a0,
+  useRemoveBlocks as a1,
+  useRemoveClassesFromBlocks as a2,
+  useSelectedBlockCurrentClasses as a3,
+  useSelectedBlockAllClasses as a4,
+  useSelectedBlock as a5,
+  useStylingBreakpoint as a6,
+  useUILibraryBlocks as a7,
+  useStylingState as a8,
+  useSelectedBlocksDisplayChild as a9,
+  useSelectedBreakpoints as aa,
+  useSelectedStylingBlocks as ab,
+  useLayoutVariant as ac,
+  useBlocksStoreUndoableActions as ad,
   useUpdateBlocksProps as b,
   useUpdateBlocksPropsRealtime as c,
   useBuilderProp as d,
   useSavePage as e,
   usePreviewMode as f,
-  CanvasArea$1 as g,
-  BlockStyling as h,
-  AddBlocksDialog as i,
-  emitChaiBuilderMsg as j,
-  useChaiBuilderMsgListener as k,
-  CHAI_BUILDER_EVENTS as l,
-  AISetContext as m,
-  AIUserPrompt as n,
-  BlockAttributesEditor as o,
-  ChaiBuilderEditor as p,
-  DarkMode as q,
-  Breakpoints as r,
-  UndoRedo as s,
-  getClassValueAndUnit as t,
+  useLanguages as g,
+  FaLanguage as h,
+  FaStar as i,
+  CanvasArea$1 as j,
+  BlockStyling as k,
+  AddBlocksDialog as l,
+  emitChaiBuilderMsg as m,
+  useChaiBuilderMsgListener as n,
+  CHAI_BUILDER_EVENTS as o,
+  AISetContext as p,
+  AIUserPrompt as q,
+  BlockAttributesEditor as r,
+  ChaiBuilderEditor as s,
+  DarkMode as t,
   useCodeEditor as u,
-  getBlocksFromHTML as v,
-  useGlobalBlocksList as w,
-  useGlobalBlocksStore as x,
-  useBlocksStore as y,
-  useUndoManager as z
+  Breakpoints as v,
+  UndoRedo as w,
+  getClassValueAndUnit as x,
+  getBlocksFromHTML as y,
+  useGlobalBlocksList as z
 };