@chaibuilder/sdk 2.0.0-beta.103 → 2.0.0-beta.105

package/dist/core.js

@@ -4,12 +4,12 @@ var U = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, r as DialogTrigger, s as DialogContent, V as Popover, O as Tooltip, P as TooltipTrigger, W as PopoverTrigger, Q as TooltipContent, X as PopoverContent, aj as Command, al as CommandInput, am as CommandList, an as CommandEmpty, ao as CommandGroup, ap as CommandItem, g as Badge, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, T as Textarea, I as Input$1, U as TooltipPortal, d as AccordionItem, e as AccordionTrigger, f as AccordionContent, G as ScrollArea, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, as as ContextMenu, at as ContextMenuTrigger, au as ContextMenuContent, av as ContextMenuItem, i as AlertDialog, j as AlertDialogTrigger, k as AlertDialogContent, l as AlertDialogHeader, n as AlertDialogTitle, o as AlertDialogDescription, m as AlertDialogFooter, q as AlertDialogCancel, p as AlertDialogAction, a as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-iqXuo9Yt.js";
+import { S as Skeleton, B as Button, al as Label, X as Dialog, Y as DialogTrigger, Z as DialogContent, am as Popover, az as Tooltip, aA as TooltipTrigger, an as PopoverTrigger, aB as TooltipContent, ao as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, n as Badge, a2 as DropdownMenu, a3 as DropdownMenuTrigger, a4 as DropdownMenuContent, a8 as DropdownMenuLabel, a9 as DropdownMenuSeparator, a6 as DropdownMenuCheckboxItem, ah as HoverCard, ai as HoverCardTrigger, aj as HoverCardContent, ay as Textarea, ak as Input$1, aD as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, ap as ScrollArea, ab as DropdownMenuGroup, a5 as DropdownMenuItem, aa as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, au as Tabs, av as TabsList, aw as TabsTrigger, ax as TabsContent, H as ContextMenu, I as ContextMenuTrigger, J as ContextMenuContent, K as ContextMenuItem, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, at as Switch, ar as Separator, aC as TooltipProvider, as as Toaster } from "./tooltip-CuxBhGWF.js";
 import { atom as atom$1, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { find, filter, flatten, map, omit, isString, has, each, set, first, get, isObject, memoize, compact, isEmpty, noop, includes, without, keys, range, values, flattenDeep, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as De } from "react-i18next";
+import { useTranslation as Me } from "react-i18next";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
@@ -17,10 +17,11 @@ import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxMod
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { registerChaiBlock as $e } from "@chaibuilder/runtime";
+import { registerChaiBlock as Oe } from "@chaibuilder/runtime";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Cort9tch.js";
 import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
+import { toast } from "sonner";
 import { PlusIcon as PlusIcon$1, PanelRightClose, PanelRightOpen, AppWindowIcon, AlignHorizontalJustifyStart, UnfoldHorizontal, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, X, Plus, ChevronLeft, PlusCircle, ChevronDown, List, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import ReactQuill, { Quill } from "react-quill";
 import typography from "@tailwindcss/typography";
@@ -41,7 +42,7 @@ import { parse, stringify } from "himalaya";
 import clsx from "clsx";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as He } from "i18next";
+import { default as Ve } from "i18next";
 import { motion } from "framer-motion";
 const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
   if ("e" in o)
@@ -89,17 +90,17 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...b) => f.read(...b), p = (f, ...b) => f.write(...b), u = (f, b) => {
-  var x;
-  return (x = f.unstable_onInit) == null ? void 0 : x.call(f, b);
-}, g = (f, b) => {
-  var x;
-  return (x = f.onMount) == null ? void 0 : x.call(f, b);
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...x) => f.read(...x), p = (f, ...x) => f.write(...x), u = (f, x) => {
+  var b;
+  return (b = f.unstable_onInit) == null ? void 0 : b.call(f, x);
+}, g = (f, x) => {
+  var b;
+  return (b = f.onMount) == null ? void 0 : b.call(f, x);
 }, ...m) => {
   const f = m[0] || ((C) => {
     let T = o.get(C);
     return T || (T = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, T), u == null || u(C, _)), T;
-  }), b = m[1] || (() => {
+  }), x = m[1] || (() => {
     let C, T;
     const k = (v) => {
       try {
@@ -112,13 +113,13 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       c.f && k(c.f);
       const v = /* @__PURE__ */ new Set(), N = v.add.bind(v);
       a.forEach((I) => {
-        var M;
-        return (M = n.get(I)) == null ? void 0 : M.l.forEach(N);
-      }), a.clear(), i.forEach(N), i.clear(), l.forEach(N), l.clear(), v.forEach(k), a.size && x();
+        var P;
+        return (P = n.get(I)) == null ? void 0 : P.l.forEach(N);
+      }), a.clear(), i.forEach(N), i.clear(), l.forEach(N), l.clear(), v.forEach(k), a.size && b();
     } while (a.size || i.size || l.size);
     if (C)
       throw T;
-  }), x = m[2] || (() => {
+  }), b = m[2] || (() => {
     const C = [], T = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
     for (; v.length; ) {
       const N = v[v.length - 1], I = f(N);
@@ -131,18 +132,18 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         continue;
       }
       T.add(N);
-      for (const M of getMountedOrPendingDependents(N, I, n))
-        T.has(M) || v.push(M);
+      for (const P of getMountedOrPendingDependents(N, I, n))
+        T.has(P) || v.push(P);
     }
     for (let N = C.length - 1; N >= 0; --N) {
-      const [I, M] = C[N];
-      let P = !1;
-      for (const j of M.d.keys())
+      const [I, P] = C[N];
+      let D = !1;
+      for (const j of P.d.keys())
         if (j !== I && a.has(j)) {
-          P = !0;
+          D = !0;
           break;
         }
-      P && (h(I), E(I)), r.delete(I);
+      D && (h(I), E(I)), r.delete(I);
     }
   }), h = m[3] || ((C) => {
     var T, k;
@@ -158,8 +159,8 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     v.d.clear();
     let N = !0;
     const I = () => {
-      n.has(C) && (E(C), x(), b());
-    }, M = (L) => {
+      n.has(C) && (E(C), b(), x());
+    }, P = (L) => {
       var $;
       if (isSelfAtom(C, L)) {
         const H = f(L);
@@ -177,10 +178,10 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         v.d.set(L, O.n), isPendingPromise(v.v) && addPendingPromiseToDependency(C, v.v, O), ($ = n.get(L)) == null || $.t.add(C), N || I();
       }
     };
-    let P, j;
+    let D, j;
     const R = {
       get signal() {
-        return P || (P = new AbortController()), P.signal;
+        return D || (D = new AbortController()), D.signal;
       },
       get setSelf() {
         return !j && isActuallyWritableAtom(C) && (j = (...L) => {
@@ -188,21 +189,21 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             try {
               return B(C, ...L);
             } finally {
-              x(), b();
+              b(), x();
             }
         }), j;
       }
-    }, D = v.n;
+    }, M = v.n;
     try {
-      const L = d(C, M, R);
-      return setAtomStateValueOrPromise(C, L, f), isPromiseLike$2(L) && ((T = L.onCancel) == null || T.call(L, () => P == null ? void 0 : P.abort()), L.then(
+      const L = d(C, P, R);
+      return setAtomStateValueOrPromise(C, L, f), isPromiseLike$2(L) && ((T = L.onCancel) == null || T.call(L, () => D == null ? void 0 : D.abort()), L.then(
         I,
         I
       )), v;
     } catch (L) {
       return delete v.v, v.e = L, ++v.n, v;
     } finally {
-      N = !1, D !== v.n && r.get(C) === D && (r.set(C, v.n), a.add(C), (k = c.c) == null || k.call(c, C));
+      N = !1, M !== v.n && r.get(C) === M && (r.set(C, v.n), a.add(C), (k = c.c) == null || k.call(c, C));
     }
   }), y = m[4] || ((C) => {
     const T = [C];
@@ -215,20 +216,20 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     }
   }), B = m[5] || ((C, ...T) => {
     let k = !0;
-    const v = (I) => returnAtomValue(h(I)), N = (I, ...M) => {
-      var P;
+    const v = (I) => returnAtomValue(h(I)), N = (I, ...P) => {
+      var D;
       const j = f(I);
       try {
         if (isSelfAtom(C, I)) {
           if (!hasInitialValue(I))
             throw new Error("atom not writable");
-          const R = j.n, D = M[0];
-          setAtomStateValueOrPromise(I, D, f), E(I), R !== j.n && (a.add(I), (P = c.c) == null || P.call(c, I), y(I));
+          const R = j.n, M = P[0];
+          setAtomStateValueOrPromise(I, M, f), E(I), R !== j.n && (a.add(I), (D = c.c) == null || D.call(c, I), y(I));
           return;
         } else
-          return B(I, ...M);
+          return B(I, ...P);
       } finally {
-        k || (x(), b());
+        k || (b(), x());
       }
     };
     try {
@@ -242,8 +243,8 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     if (v && !isPendingPromise(k.v)) {
       for (const [N, I] of k.d)
         if (!v.d.has(N)) {
-          const M = f(N);
-          w(N).t.add(C), v.d.add(N), I !== M.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
+          const P = f(N);
+          w(N).t.add(C), v.d.add(N), I !== P.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
         }
       for (const N of v.d || [])
         if (!k.d.has(N)) {
@@ -267,19 +268,19 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }, n.set(C, v), (T = c.m) == null || T.call(c, C), isActuallyWritableAtom(C)) {
         const N = () => {
           let I = !0;
-          const M = (...P) => {
+          const P = (...D) => {
             try {
-              return B(C, ...P);
+              return B(C, ...D);
             } finally {
-              I || (x(), b());
+              I || (b(), x());
             }
           };
           try {
-            const P = g(C, M);
-            P && (v.u = () => {
+            const D = g(C, P);
+            D && (v.u = () => {
               I = !0;
               try {
-                P();
+                D();
               } finally {
                 I = !1;
               }
@@ -324,8 +325,8 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     g,
     // building-block functions
     f,
-    b,
     x,
+    b,
     h,
     y,
     B,
@@ -338,13 +339,13 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       try {
         return B(C, ...T);
       } finally {
-        x(), b();
+        b(), x();
       }
     },
     sub: (C, T) => {
       const v = w(C).l;
-      return v.add(T), b(), () => {
-        v.delete(T), S(C), b();
+      return v.add(T), x(), () => {
+        v.delete(T), S(C), x();
       };
     }
   };
@@ -384,25 +385,25 @@ function splitAtom(o, n) {
         if (p)
           return p;
         const u = d && r.get(d), g = [], m = [];
-        return c.forEach((f, b) => {
-          const x = b;
-          m[b] = x;
-          const h = u && u.atomList[u.keyList.indexOf(x)];
+        return c.forEach((f, x) => {
+          const b = x;
+          m[x] = b;
+          const h = u && u.atomList[u.keyList.indexOf(b)];
           if (h) {
-            g[b] = h;
+            g[x] = h;
             return;
           }
           const y = (E) => {
-            const w = E(l), S = E(o), _ = a(S, w == null ? void 0 : w.arr).keyList.indexOf(x);
+            const w = E(l), S = E(o), _ = a(S, w == null ? void 0 : w.arr).keyList.indexOf(b);
             if (_ < 0 || _ >= S.length) {
-              const C = c[a(c).keyList.indexOf(x)];
+              const C = c[a(c).keyList.indexOf(b)];
               if (C)
                 return C;
               throw new Error("splitAtom: index out of bounds for read");
             }
             return S[_];
           }, B = (E, w, S) => {
-            const A = E(l), _ = E(o), T = a(_, A == null ? void 0 : A.arr).keyList.indexOf(x);
+            const A = E(l), _ = E(o), T = a(_, A == null ? void 0 : A.arr).keyList.indexOf(b);
             if (T < 0 || T >= _.length)
               throw new Error("splitAtom: index out of bounds for write");
             const k = isFunction(S) ? S(_[T]) : S;
@@ -412,8 +413,8 @@ function splitAtom(o, n) {
               ..._.slice(T + 1)
             ]);
           };
-          g[b] = isWritable(o) ? atom(y, B) : atom(y);
-        }), u && u.keyList.length === m.length && u.keyList.every((f, b) => f === m[b]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
+          g[x] = isWritable(o) ? atom(y, B) : atom(y);
+        }), u && u.keyList.length === m.length && u.keyList.every((f, x) => f === m[x]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -486,18 +487,18 @@ function createJSONStorage(o = () => {
   const i = {
     getItem: (p, u) => {
       var g, m;
-      const f = (x) => {
-        if (x = x || "", a !== x) {
+      const f = (b) => {
+        if (b = b || "", a !== b) {
           try {
-            l = JSON.parse(x, n == null ? void 0 : n.reviver);
+            l = JSON.parse(b, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = x;
+          a = b;
         }
         return l;
-      }, b = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(b) ? b.then(f) : f(b);
+      }, x = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
+      return isPromiseLike$1(x) ? x.then(f) : f(x);
     },
     setItem: (p, u) => {
       var g;
@@ -511,13 +512,13 @@ function createJSONStorage(o = () => {
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
   }, c = (p) => (u, g, m) => p(u, (f) => {
-    let b;
+    let x;
     try {
-      b = JSON.parse(f || "");
+      x = JSON.parse(f || "");
     } catch {
-      b = m;
+      x = m;
     }
-    g(b);
+    g(x);
   });
   let d;
   try {
@@ -1339,65 +1340,65 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, h, y) => {
-      const B = map(x, (w) => {
+    moveBlocks: (b, h, y) => {
+      const B = map(b, (w) => {
         const A = n.find((T) => T._id === w)._parent || null, C = n.filter((T) => A ? T._parent === A : !T._parent).map((T) => T._id).indexOf(w);
         return { _id: w, oldParent: A, oldPosition: C };
-      }), E = B.find(({ _id: w }) => w === x[0]);
-      E && E.oldParent === h && E.oldPosition === y || (i(x, h, y), o({
+      }), E = B.find(({ _id: w }) => w === b[0]);
+      E && E.oldParent === h && E.oldPosition === y || (i(b, h, y), o({
         undo: () => each(B, ({ _id: w, oldParent: S, oldPosition: A }) => {
           i([w], S, A);
         }),
-        redo: () => i(x, h, y)
+        redo: () => i(b, h, y)
       }));
     },
-    addBlocks: (x, h, y) => {
-      a(x, h, y), o({
-        undo: () => l(map(x, "_id")),
-        redo: () => a(x, h, y)
+    addBlocks: (b, h, y) => {
+      a(b, h, y), o({
+        undo: () => l(map(b, "_id")),
+        redo: () => a(b, h, y)
       });
     },
-    removeBlocks: (x) => {
+    removeBlocks: (b) => {
       var E;
-      const h = (E = first(x)) == null ? void 0 : E._parent, B = n.filter((w) => h ? w._parent === h : !w._parent).indexOf(first(x));
-      l(map(x, "_id")), o({
-        undo: () => a(x, h, B),
-        redo: () => l(map(x, "_id"))
+      const h = (E = first(b)) == null ? void 0 : E._parent, B = n.filter((w) => h ? w._parent === h : !w._parent).indexOf(first(b));
+      l(map(b, "_id")), o({
+        undo: () => a(b, h, B),
+        redo: () => l(map(b, "_id"))
       });
     },
-    updateBlocks: (x, h, y) => {
+    updateBlocks: (b, h, y) => {
       let B = [];
       if (y)
-        B = map(x, (E) => ({ _id: E, ...y }));
+        B = map(b, (E) => ({ _id: E, ...y }));
       else {
         const E = keys(h);
-        B = map(x, (w) => {
+        B = map(b, (w) => {
           const S = n.find((_) => _._id === w), A = { _id: w };
           return each(E, (_) => A[_] = S[_]), A;
         });
       }
-      c(map(x, (E) => ({ _id: E, ...h }))), o({
+      c(map(b, (E) => ({ _id: E, ...h }))), o({
         undo: () => c(B),
-        redo: () => c(map(x, (E) => ({ _id: E, ...h })))
+        redo: () => c(map(b, (E) => ({ _id: E, ...h })))
       });
     },
-    updateBlocksRuntime: (x, h) => {
-      c(map(x, (y) => ({ _id: y, ...h })));
+    updateBlocksRuntime: (b, h) => {
+      c(map(b, (y) => ({ _id: y, ...h })));
     },
-    setNewBlocks: (x) => {
-      r(x), o({
+    setNewBlocks: (b) => {
+      r(b), o({
         undo: () => r(n),
-        redo: () => r(x)
+        redo: () => r(b)
       });
     },
-    updateMultipleBlocksProps: (x) => {
+    updateMultipleBlocksProps: (b) => {
       let h = [];
-      h = map(x, (y) => {
+      h = map(b, (y) => {
         const B = keys(y), E = n.find((S) => S._id === y._id), w = {};
         return each(B, (S) => w[S] = E[S]), w;
-      }), c(x), o({
+      }), c(b), o({
         undo: () => c(h),
-        redo: () => c(x)
+        redo: () => c(b)
       });
     }
   };
@@ -1434,12 +1435,12 @@ const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var f;
-      for (let b = 0; b < i.length; b++) {
-        const { _id: x } = i[b];
-        i[b]._id = generateUUID();
-        const h = filter(i, { _parent: x });
+      for (let x = 0; x < i.length; x++) {
+        const { _id: b } = i[x];
+        i[x]._id = generateUUID();
+        const h = filter(i, { _parent: b });
         for (let y = 0; y < h.length; y++)
-          h[y]._parent = i[b]._id;
+          h[y]._parent = i[x]._id;
       }
       const p = first(i);
       let u, g;
@@ -2905,25 +2906,25 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, b) => {
-    const x = cloneDeep(b.find((h) => h._id === f));
-    for (const h in x) {
-      const y = x[h];
+  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(), g = p.length ? p : u, m = (f, x) => {
+    const b = cloneDeep(x.find((h) => h._id === f));
+    for (const h in b) {
+      const y = b[h];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
         const { baseClasses: B, classes: E } = getSplitChaiClasses(y);
-        x[h] = compact(flattenDeep([B, E])).join(" ");
+        b[h] = compact(flattenDeep([B, E])).join(" ");
       } else
-        h !== "_id" && delete x[h];
+        h !== "_id" && delete b[h];
     }
-    return x;
+    return b;
   };
   return {
     askAi: useCallback(
-      async (f, b, x, h) => {
+      async (f, x, b, h) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, B = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(b, d)), p) : [m(b, d)], E = await l(f, addLangToPrompt(x, g, f), B, y), { blocks: w, error: S } = E;
+            const y = p === u ? "" : p, B = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p) : [m(x, d)], E = await l(f, addLangToPrompt(b, g, f), B, y), { blocks: w, error: S } = E;
             if (S) {
               a(S);
               return;
@@ -3119,17 +3120,17 @@ const useBlockHighlight = () => {
     [n, o]
   );
 }, usePasteBlocks = () => {
-  const [o, n] = useCutBlockIds(), r = useMoveCutBlocks(), a = useCanPaste(), { toast: l } = useToast(), { addPredefinedBlock: i } = useAddBlock();
+  const [o, n] = useCutBlockIds(), r = useMoveCutBlocks(), a = useCanPaste(), { addPredefinedBlock: l } = useAddBlock();
   return {
     canPaste: useCallback(
-      async (d) => {
+      async (c) => {
         if (o.length > 0)
-          return a(o, d);
+          return a(o, c);
         try {
-          const p = await navigator.clipboard.readText();
-          if (p) {
-            const u = JSON.parse(p);
-            return has(u, "_chai_copied_blocks");
+          const d = await navigator.clipboard.readText();
+          if (d) {
+            const p = JSON.parse(d);
+            return has(p, "_chai_copied_blocks");
           }
         } catch {
           return !1;
@@ -3139,24 +3140,24 @@ const useBlockHighlight = () => {
       [a, o]
     ),
     pasteBlocks: useCallback(
-      async (d) => {
-        const p = Array.isArray(d) ? d[0] : d;
+      async (c) => {
+        const d = Array.isArray(c) ? c[0] : c;
         if (!isEmpty(o)) {
-          r(o, d), n([]), await navigator.clipboard.writeText("");
+          r(o, c), n([]), await navigator.clipboard.writeText("");
           return;
         }
         try {
-          const u = await navigator.clipboard.readText();
-          if (u) {
-            const g = JSON.parse(u);
-            has(g, "_chai_copied_blocks") ? i(g._chai_copied_blocks, p === "root" ? null : p) : l({ title: "Error", description: "Nothing to paste" });
+          const p = await navigator.clipboard.readText();
+          if (p) {
+            const u = JSON.parse(p);
+            has(u, "_chai_copied_blocks") ? l(u._chai_copied_blocks, d === "root" ? null : d) : toast.error("Nothing to paste");
           } else
-            l({ title: "Error", description: "Nothing to paste" });
+            toast.error("Nothing to paste");
         } catch {
-          l({ title: "Error", description: "Failed to paste blocks from clipboard" });
+          toast.error("Failed to paste blocks from clipboard");
         }
       },
-      [o, i, r, n, l]
+      [o, l, r, n]
     )
   };
 }, previewModeAtom = atom$1(!1), usePreviewMode = () => {
@@ -3174,13 +3175,13 @@ const useBlockHighlight = () => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      u = u.replace(b, " ").replace(/\s+/g, " ").trim();
-      const x = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
+      const b = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(m.split(":").pop().trim());
     }), each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
-      g = g.replace(b, " ").replace(/\s+/g, " ").trim();
+      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -3212,7 +3213,7 @@ const useBlockHighlight = () => {
   const n = first(o(selectedStylingBlocksAtom)), r = o(selectedBlockAtom);
   if (!n || n.blockId !== get(r, "_id", null)) return [];
   const a = get(r, n.prop, `${STYLES_KEY},`), { classes: l } = getSplitChaiClasses(a);
-  return console.log("classes", l), filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
+  return filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
 }), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom$1((o) => {
   const n = o(canvasBreakpointAtom), r = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(n);
   let i = filter(o(selectedBlockAllClassesAtom), { mod: r });
@@ -3321,13 +3322,13 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (b) => {
-        b.stopPropagation(), b.preventDefault();
+      onClick: (x) => {
+        x.stopPropagation(), x.preventDefault();
       },
-      onMouseEnter: (b) => {
-        b.stopPropagation(), i(null);
+      onMouseEnter: (x) => {
+        x.stopPropagation(), i(null);
       },
-      onKeyDown: (b) => b.stopPropagation(),
+      onKeyDown: (x) => x.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         m && /* @__PURE__ */ jsx(
@@ -3424,8 +3425,8 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     i
   ]), useHotkeys(
     "del, backspace",
-    (b) => {
-      b.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (x) => {
+      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     f,
     [n, l]
@@ -3523,9 +3524,9 @@ const useDnd = () => {
     },
     onDrop: (f) => {
       var S;
-      const b = dropTarget, h = getOrientation(b) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
+      const x = dropTarget, h = getOrientation(x) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
       dropIndex = calculateDropIndex(h, possiblePositions);
-      const y = d, B = b.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      const y = d, B = x.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((y == null ? void 0 : y._id) === B || !E) {
         m();
         return;
@@ -3534,14 +3535,14 @@ const useDnd = () => {
         a(y, B === "canvas" ? null : B, dropIndex), setTimeout(m, 300);
         return;
       }
-      let w = b.getAttribute("data-block-id");
+      let w = x.getAttribute("data-block-id");
       w === null && (w = f.target.parentElement.getAttribute("data-block-id")), c([y._id], w === "canvas" ? null : w, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (f) => {
-      const b = f, x = b.target;
-      dropTarget = x;
-      const h = x.getAttribute("data-block-id"), y = x.getAttribute("data-dnd-dragged") !== "yes";
-      u(h), b.stopPropagation(), b.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(x), r(!0), l(""), i([]);
+      const x = f, b = x.target;
+      dropTarget = b;
+      const h = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
+      u(h), x.stopPropagation(), x.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), r(!0), l(""), i([]);
     },
     onDragLeave: (f) => {
       f.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3565,7 +3566,7 @@ const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight(), i = useGetBlockAtomValue(pageBlocksAtomsAtom);
   return useCallback(
     (c) => {
-      var x;
+      var b;
       if (r) return;
       const d = getTargetedBlock(c.target), p = d.getAttribute("data-block-type");
       if (!p || !o.includes(p))
@@ -3575,15 +3576,15 @@ const useHandleCanvasDblClick = () => {
         h.name !== "class" && m.removeAttribute(h.name);
       }), p === "Text" && (m.style.display = "inline-block"), d.parentNode.insertBefore(m, d.nextSibling);
       const f = new Quill(m, { placeholder: "Type here..." });
-      function b() {
+      function x() {
         const h = f.getText(0, f.getLength());
-        n([u], { content: h }), d.removeAttribute("style"), m.removeEventListener("blur", b, !0), destroyQuill(f), a(""), l(), m.remove();
+        n([u], { content: h }), d.removeAttribute("style"), m.removeEventListener("blur", x, !0), destroyQuill(f), a(""), l(), m.remove();
       }
-      m.addEventListener("blur", b, !0), m.addEventListener("click", (h) => {
+      m.addEventListener("blur", x, !0), m.addEventListener("click", (h) => {
         h.stopPropagation();
       }), m.addEventListener("keydown", (h) => {
-        (h.key === "Enter" || h.key === "Escape") && b();
-      }), f.focus(), (x = m.querySelector(".ql-clipboard")) == null || x.remove(), a(d.getAttribute("data-block-id"));
+        (h.key === "Enter" || h.key === "Escape") && x();
+      }), f.focus(), (b = m.querySelector(".ql-clipboard")) == null || b.remove(), a(d.getAttribute("data-block-id"));
     },
     [r, a, n, l]
   );
@@ -3626,8 +3627,8 @@ const useHandleCanvasDblClick = () => {
       if (m) {
         const f = m.getAttribute("data-style-prop");
         if (f) {
-          const b = m.getAttribute("data-style-id"), x = m.getAttribute("data-block-parent");
-          l([{ id: b, prop: f, blockId: x }]);
+          const x = m.getAttribute("data-style-id"), b = m.getAttribute("data-block-parent");
+          l([{ id: x, prop: f, blockId: b }]);
         }
       }
     }, 100);
@@ -3706,13 +3707,13 @@ const useHandleCanvasDblClick = () => {
   }, [l, m]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const b = useMemo(
+  const x = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), x = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), b = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: b }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: x } })
+    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: x }),
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3792,7 +3793,7 @@ const getBlockRuntimeProps = memoize((o) => {
   const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(inlineEditingActiveAtom), [g] = useAtom$1(dataBindingActiveAtom), m = get(a, "component", null), f = useMemo(
     () => g ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
     [r, l, a, d, g]
-  ), b = useMemo(() => getBlockTagAttributes(r), [r]), x = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), h = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
+  ), x = useMemo(() => getBlockTagAttributes(r), [r]), b = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), h = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3801,11 +3802,11 @@ const getBlockRuntimeProps = memoize((o) => {
       inBuilder: !0,
       lang: l || i,
       ...f,
-      ...b,
       ...x,
+      ...b,
       ...h
     }),
-    [r, l, i, f, b, x, h]
+    [r, l, i, f, x, b, h]
   );
   return isNull(m) || p.includes(r._id) || u === r._id ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(m, { ...y, children: n }) });
 }, GlobalBlocksRenderer = ({ globalBlockId: o }) => {
@@ -3857,10 +3858,10 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, b] = useAtom$1(canvasIframeAtom), [x, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (A) => {
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, x] = useAtom$1(canvasIframeAtom), [b, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (A) => {
     p((_) => ({ ..._, width: A }));
   };
-  console.log("width", n), useEffect(() => {
+  useEffect(() => {
     if (!c.current) return;
     const { clientWidth: A, clientHeight: _ } = c.current;
     p({ width: A, height: _ });
@@ -3876,15 +3877,15 @@ const getBlockRuntimeProps = memoize((o) => {
       C && (w(C) || (_ = (A = i.current) == null ? void 0 : A.contentWindow) == null || _.scrollTo({ top: C.offsetTop, behavior: "smooth" }), m([C]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(x) && i.current) {
+    if (!isEmpty(b) && i.current) {
       const A = getElementByStyleId(
         i.current.contentDocument,
-        first(x).id
+        first(b).id
       );
       f(A ? [A] : [null]);
     } else
       f([null]);
-  }, [x]);
+  }, [b]);
   const S = useMemo(() => {
     let A = IframeInitialContent;
     return A = A.replace("__HTML_DIR__", B), o === "offline" && (A = A.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), A;
@@ -3901,7 +3902,7 @@ const getBlockRuntimeProps = memoize((o) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => b(i.current),
+          contentDidMount: () => x(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
@@ -4046,7 +4047,7 @@ const getBlockRuntimeProps = memoize((o) => {
       l !== o.length - 1 && /* @__PURE__ */ jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-DyWk02_x.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-Bv7cAp6l.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -4178,7 +4179,7 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), b = useDebouncedCallback(
+  ), x = useDebouncedCallback(
     (y) => {
       d(() => ({
         ...c,
@@ -4187,7 +4188,7 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), x = useDebouncedCallback(
+  ), b = useDebouncedCallback(
     (y, B) => {
       d(() => {
         const E = get(c, `colors.${y}`);
@@ -4209,7 +4210,7 @@ const getBlockRuntimeProps = memoize((o) => {
         ColorPickerInput,
         {
           value: E,
-          onChange: (w) => x(B, w)
+          onChange: (w) => b(B, w)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
@@ -4257,7 +4258,7 @@ const getBlockRuntimeProps = memoize((o) => {
         (p == null ? void 0 : p.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: b }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: x }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
           ] })
         ] }),
@@ -4477,9 +4478,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   onChange: r
 }) => {
   var T;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [b, x] = useState([]), [h, y] = useState(-1), B = useRef(null), E = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [x, b] = useState([]), [h, y] = useState(-1), B = useRef(null), E = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
   useEffect(() => {
-    if (f(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (f(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const k = split(o, ":"), v = get(k, 1, "page") || "page";
     g(v), (async () => {
       const N = await l(v, [get(k, 2, "page")]);
@@ -4489,10 +4490,10 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   const w = useDebouncedCallback(
     async (k) => {
       if (isEmpty(k))
-        x([]);
+        b([]);
       else {
         const v = await l(u, k);
-        x(v);
+        b(v);
       }
       c(!1), y(-1);
     },
@@ -4500,18 +4501,18 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     300
   ), S = (k) => {
     const v = ["pageType", u, k.id];
-    v[1] && (r(v.join(":")), f(k.name), p(!1), x([]), y(-1));
+    v[1] && (r(v.join(":")), f(k.name), p(!1), b([]), y(-1));
   }, A = (k) => {
     switch (k.key) {
       case "ArrowDown":
-        k.preventDefault(), y((v) => v < b.length - 1 ? v + 1 : v);
+        k.preventDefault(), y((v) => v < x.length - 1 ? v + 1 : v);
         break;
       case "ArrowUp":
         k.preventDefault(), y((v) => v > 0 ? v - 1 : v);
         break;
       case "Enter":
-        if (k.preventDefault(), b.length === 0) return;
-        h >= 0 && S(b[h]);
+        if (k.preventDefault(), x.length === 0) return;
+        h >= 0 && S(x[h]);
         break;
       case "Escape":
         k.preventDefault(), _();
@@ -4525,7 +4526,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     }
   }, [h]);
   const _ = () => {
-    f(""), x([]), y(-1), p(!1), r("");
+    f(""), b([]), y(-1), p(!1), r("");
   }, C = (k) => {
     f(k), p(!isEmpty(k)), c(!0), w(k);
   };
@@ -4545,15 +4546,15 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       ),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(b) || d && isEmpty(b)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(b) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(b == null ? void 0 : b.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(x == null ? void 0 : x.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => S(k),
@@ -4651,24 +4652,24 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
   const m = () => {
-    const x = findIndex(u, { _id: g });
-    if (x > -1) {
-      const h = (x + 1) % u.length, y = get(u, [h, "_id"]);
+    const b = findIndex(u, { _id: g });
+    if (b > -1) {
+      const h = (b + 1) % u.length, y = get(u, [h, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, f = () => {
-    const x = findIndex(u, { _id: g });
-    if (x > -1) {
-      const h = (x - 1 + u.length) % u.length, y = get(u, [h, "_id"]);
+    const b = findIndex(u, { _id: g });
+    if (b > -1) {
+      const h = (b - 1 + u.length) % u.length, y = get(u, [h, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, b = () => {
-    const x = i(
+  }, x = () => {
+    const b = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), h = x == null ? void 0 : x._id;
+    ), h = b == null ? void 0 : b._id;
     h && (n({ ...o, currentSlide: h }), c([h]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
@@ -4686,7 +4687,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: b,
+          onClick: x,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4747,8 +4748,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (x) => {
-              let h = x.target.value;
+            onChange: (b) => {
+              let h = b.target.value;
               h.length && (h = h.replace("-", "")), n({ ...o, autoplayInterval: h });
             }
           }
@@ -4780,22 +4781,22 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   useEffect(() => {
     a || c([]), p(o);
   }, [a, o]);
-  const u = (b) => Array.isArray(b) ? "array" : typeof b == "object" && b !== null ? "object" : "value", g = React.useCallback(
-    (b) => {
-      const x = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
-      b.type === "object" ? (c((h) => [...h, b.key]), p(b.value)) : x(b.type) && (n([...i, b.key].join(".")), l(!1));
+  const u = (x) => Array.isArray(x) ? "array" : typeof x == "object" && x !== null ? "object" : "value", g = React.useCallback(
+    (x) => {
+      const b = (h) => r === "value" ? h === "value" || h === "object" : r === "array" ? h === "array" : h === r;
+      x.type === "object" ? (c((h) => [...h, x.key]), p(x.value)) : b(x.type) && (n([...i, x.key].join(".")), l(!1));
     },
     [i, n, r]
   ), m = React.useCallback(() => {
     if (i.length > 0) {
-      const b = i.slice(0, -1);
-      c(b), p(b.reduce((x, h) => x[h], o));
+      const x = i.slice(0, -1);
+      c(x), p(x.reduce((b, h) => b[h], o));
     }
-  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([b, x]) => ({
-    key: b,
-    value: x,
-    type: u(x)
-  })).filter((b) => r === "value" ? b.type === "value" || b.type === "object" : r === "array" ? b.type === "array" || b.type === "object" : r === "object" ? b.type === "object" : !0), [d, r]);
+  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([x, b]) => ({
+    key: x,
+    value: b,
+    type: u(b)
+  })).filter((x) => r === "value" ? x.type === "value" || x.type === "object" : r === "array" ? x.type === "array" || x.type === "object" : r === "object" ? x.type === "object" : !0), [d, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -4820,33 +4821,33 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          f.map((b) => /* @__PURE__ */ jsxs(
+          f.map((x) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
-              value: b.key,
+              value: x.key,
               disabled: !1,
-              onSelect: () => g(b),
+              onSelect: () => g(x),
               className: "flex items-center justify-between",
               children: [
-                /* @__PURE__ */ jsx("span", { children: b.key }),
+                /* @__PURE__ */ jsx("span", { children: x.key }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  r === "object" && b.type === "object" && /* @__PURE__ */ jsx(
+                  r === "object" && x.type === "object" && /* @__PURE__ */ jsx(
                     Button,
                     {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                      onClick: (x) => {
-                        x.stopPropagation(), n([...i, b.key].join(".")), l(!1);
+                      onClick: (b) => {
+                        b.stopPropagation(), n([...i, x.key].join(".")), l(!1);
                       },
                       children: "Select"
                     }
                   ),
-                  (b.type === "object" || b.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                  (x.type === "object" || x.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
                 ] })
               ]
             },
-            b.key
+            x.key
           ))
         ] })
       ] })
@@ -4867,29 +4868,29 @@ const CustomFieldTemplate = ({
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: f, fallbackLang: b, languages: x } = useLanguages(), h = isEmpty(x) ? "" : isEmpty(f) ? b : f, y = get(LANGUAGES, h, h), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), S = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [A, _] = useState(null), C = useCallback(
+  const { selectedLang: f, fallbackLang: x, languages: b } = useLanguages(), h = isEmpty(b) ? "" : isEmpty(f) ? x : f, y = get(LANGUAGES, h, h), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), S = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [A, _] = useState(null), C = useCallback(
     (v) => {
-      const N = (j) => /[.,!?;:]/.test(j), I = (j, R, D) => {
+      const N = (j) => /[.,!?;:]/.test(j), I = (j, R, M) => {
         let L = "", $ = "";
         const O = R > 0 ? j[R - 1] : "", H = R < j.length ? j[R] : "";
         return R > 0 && (O === "." || !N(O) && O !== " ") && (L = " "), R < j.length && !N(H) && H !== " " && ($ = " "), {
-          text: L + D + $,
+          text: L + M + $,
           prefixLength: L.length,
           suffixLength: $.length
         };
-      }, M = document.getElementById(o);
-      if (!M) return;
-      const P = document.getElementById(`quill.${o}`);
-      if (P && "__quill" in P) {
-        const j = P.__quill;
+      }, P = document.getElementById(o);
+      if (!P) return;
+      const D = document.getElementById(`quill.${o}`);
+      if (D && "__quill" in D) {
+        const j = D.__quill;
         if (j) {
           const R = `{{${v}}}`;
           j.focus();
-          let D = j.getSelection();
-          if (D || (D = j.getSelection(!0)), D)
-            if (D.length > 0) {
-              const L = D.index;
-              j.deleteText(D.index, D.length), j.setSelection(L, 0);
+          let M = j.getSelection();
+          if (M || (M = j.getSelection(!0)), M)
+            if (M.length > 0) {
+              const L = M.index;
+              j.deleteText(M.index, M.length), j.setSelection(L, 0);
               const $ = j.getText(), {
                 text: O,
                 prefixLength: H,
@@ -4897,7 +4898,7 @@ const CustomFieldTemplate = ({
               } = I($, L, R);
               j.insertText(L, O), j.setSelection(L + H + R.length + V, 0);
             } else {
-              const L = D.index;
+              const L = M.index;
               j.setSelection(L, 0);
               const $ = j.getText(), {
                 text: O,
@@ -4920,13 +4921,13 @@ const CustomFieldTemplate = ({
           return;
         }
       } else {
-        const j = M, R = j.selectionStart || 0, D = j.value || "", L = j.selectionEnd || R;
+        const j = P, R = j.selectionStart || 0, M = j.value || "", L = j.selectionEnd || R;
         if (L > R) {
-          const F = `{{${v}}}`, { text: z } = I(D, R, F), W = D.slice(0, R) + z + D.slice(L);
+          const F = `{{${v}}}`, { text: z } = I(M, R, F), W = M.slice(0, R) + z + M.slice(L);
           m(W, {}, o);
           return;
         }
-        const O = `{{${v}}}`, { text: H } = I(D, R, O), V = D.slice(0, R) + H + D.slice(R);
+        const O = `{{${v}}}`, { text: H } = I(M, R, O), V = M.slice(0, R) + H + M.slice(R);
         m(V, {}, o);
       }
     },
@@ -5041,17 +5042,17 @@ const CustomFieldTemplate = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), b = ({ formData: A }, _, C) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), x = ({ formData: A }, _, C) => {
     _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(A, _) }, C);
-  }, x = useCallback(
+  }, b = useCallback(
     debounce(({ formData: A }, _, C) => {
-      b({ formData: A }, _, C), d(A);
+      x({ formData: A }, _, C), d(A);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), h = ({ formData: A }, _) => {
-    _ && (r([n._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
+    _ && (r([n._id], { [_]: get(A, _) }), b({ formData: A }, _, { [_]: get(c, _) }));
   }, y = ({ formData: A }, _) => {
-    _ && (r([g._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
+    _ && (r([g._id], { [_]: get(A, _) }), b({ formData: A }, _, { [_]: get(c, _) }));
   };
   keys(get(i, "_bindings", {}));
   const { schema: B, uiSchema: E } = useMemo(() => {
@@ -5195,17 +5196,17 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
 }, Breakpoints$1 = ({ openDelay: o = 400, canvas: n = !1 }) => {
   const [r, , a] = useScreenSizeWidth(), [l, i] = useCanvasDisplayWidth(), [c, d] = useSelectedBreakpoints(), p = c, u = d, { t: g } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (h) => {
     p.includes(h) ? p.length > 2 && u(p.filter((y) => y !== h)) : u((y) => [...y, h]);
-  }, b = (h) => {
+  }, x = (h) => {
     n || a(h), i(h);
-  }, x = getBreakpointValue(n ? l : r).toLowerCase();
+  }, b = getBreakpointValue(n ? l : r).toLowerCase();
   return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (h) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
       ...h,
-      onClick: b,
+      onClick: x,
       key: h.breakpoint,
-      currentBreakpoint: x
+      currentBreakpoint: b
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -5216,9 +5217,9 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
           canvas: n,
           openDelay: o,
           ...h,
-          onClick: b,
+          onClick: x,
           key: h.breakpoint,
-          currentBreakpoint: x
+          currentBreakpoint: b
         }
       )
     ) }),
@@ -5324,8 +5325,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (f = d.current) == null || f.focus();
   }, []);
   const m = (f) => {
-    const { usage: b } = f || {};
-    !l && b && g(b), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: x } = f || {};
+    !l && x && g(x), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5380,25 +5381,25 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var M;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [b, x] = useState(""), { toast: h } = useToast(), y = (M = first(d)) == null ? void 0 : M.prop, { classes: B } = getSplitChaiClasses(get(p, y, "")), E = B.split(" ").filter((P) => !isEmpty(P)), w = () => {
-    const P = b.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, P, !0), x("");
-  }, [S, A] = useState([]), _ = ({ value: P }) => {
-    const j = P.trim().toLowerCase(), R = j.match(/.+:/g);
-    let D = [];
-    if (R && R.length > 0) {
-      const [L] = R, $ = j.replace(L, "");
-      D = i.search($).map((H) => ({
-        ...H,
-        item: { ...H.item, name: L + H.item.name }
+  var I;
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [x, b] = useState(""), h = (I = first(d)) == null ? void 0 : I.prop, { classes: y } = getSplitChaiClasses(get(p, h, "")), B = y.split(" ").filter((P) => !isEmpty(P)), E = () => {
+    const P = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, P, !0), b("");
+  }, [w, S] = useState([]), A = ({ value: P }) => {
+    const D = P.trim().toLowerCase(), j = D.match(/.+:/g);
+    let R = [];
+    if (j && j.length > 0) {
+      const [M] = j, L = D.replace(M, "");
+      R = i.search(L).map((O) => ({
+        ...O,
+        item: { ...O.item, name: M + O.item.name }
       }));
     } else
-      D = i.search(j);
-    return A(map(D, "item"));
-  }, C = () => {
-    A([]);
-  }, T = (P) => P.name, k = (P) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: P.name }), v = useMemo(
+      R = i.search(D);
+    return S(map(R, "item"));
+  }, _ = () => {
+    S([]);
+  }, C = (P) => P.name, T = (P) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: P.name }), k = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5406,38 +5407,31 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: b,
+      value: x,
       onKeyDown: (P) => {
-        P.key === "Enter" && b.trim() !== "" && w();
+        P.key === "Enter" && x.trim() !== "" && E();
       },
-      onChange: (P, { newValue: j }) => x(j),
+      onChange: (P, { newValue: D }) => b(D),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [b, c, o]
-  ), N = (P) => {
+    [x, c, o]
+  ), v = (P) => {
     debugger;
-    const j = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(m, [P]), u(m, j, !0), r(""), l(-1);
-  }, I = () => {
+    const D = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(m, [P]), u(m, D, !0), r(""), l(-1);
+  }, N = () => {
     if (navigator.clipboard === void 0) {
-      h({
-        title: c("Clipboard not supported"),
-        description: c("Please use Chrome, Firefox or Safari"),
-        variant: "destructive"
-      });
+      toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(E.join(" ")), h({
-      title: c("Copied"),
-      description: c("Classes copied to clipboard")
-    });
+    navigator.clipboard.writeText(B.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: I, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: N, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -5453,12 +5447,12 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: S,
-          onSuggestionsFetchRequested: _,
-          onSuggestionsClearRequested: C,
-          getSuggestionValue: T,
-          renderSuggestion: k,
-          inputProps: v,
+          suggestions: w,
+          onSuggestionsFetchRequested: A,
+          onSuggestionsClearRequested: _,
+          getSuggestionValue: C,
+          renderSuggestion: T,
+          inputProps: k,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5474,25 +5468,25 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: w,
-          disabled: b.trim() === "",
+          onClick: E,
+          disabled: x.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: E.map(
-      (P, j) => a === j ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: B.map(
+      (P, D) => a === D ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
-          onChange: (R) => r(R.target.value),
+          onChange: (j) => r(j.target.value),
           onBlur: () => {
-            N(P);
+            v(P);
           },
-          onKeyDown: (R) => {
-            R.key === "Enter" && N(P);
+          onKeyDown: (j) => {
+            j.key === "Enter" && v(P);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
@@ -5864,7 +5858,7 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const b = useCallback(
+  const x = useCallback(
     // eslint-disable-next-line no-shadow
     (h) => {
       p({ color: g, shade: h });
@@ -5874,11 +5868,11 @@ const COLOR_PROP = {
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: x } = useTailwindClassList();
+  const { match: b } = useTailwindClassList();
   return useEffect(() => {
     const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, y) && n(y, o);
-  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    b(o, y) && n(y, o);
+  }, [b, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
@@ -5918,7 +5912,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: b, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: x, options: i }) })
   ] });
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
@@ -6115,7 +6109,7 @@ const COLOR_PROP = {
   },
   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: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [b, x] = useState(!1), [h, y] = useState(""), [B, E] = useState(!1), [w, S] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, b] = useState(!1), [h, y] = useState(""), [B, E] = useState(!1), [w, S] = useState(!1);
   useEffect(() => {
     const { value: k, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
@@ -6128,7 +6122,7 @@ const COLOR_PROP = {
     (k = !1) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
-        x(!0);
+        b(!0);
         return;
       }
       const N = get(v, "unit") !== "" ? get(v, "unit") : m;
@@ -6138,15 +6132,15 @@ const COLOR_PROP = {
       }
       if (get(v, "value") === "")
         return;
-      const M = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      k ? _(M) : A(M);
+      const P = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      k ? _(P) : A(P);
     },
     [A, _, a, m, d, u]
   ), T = useCallback(
     (k) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
-        x(!0);
+        b(!0);
         return;
       }
       if (k === "auto" || k === "none") {
@@ -6155,8 +6149,8 @@ const COLOR_PROP = {
       }
       if (get(v, "value") === "")
         return;
-      const N = get(v, "unit") !== "" ? get(v, "unit") : k, M = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      A(M);
+      const N = get(v, "unit") !== "" ? get(v, "unit") : k, P = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
+      A(P);
     },
     [A, a, d, u]
   );
@@ -6189,15 +6183,15 @@ const COLOR_PROP = {
             const v = parseInt$1(k.target.value);
             let N = isNaN$1(v) ? 0 : v;
             k.keyCode === 38 && (N += 1), k.keyCode === 40 && (N -= 1);
-            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(P);
+            const I = `${N}`, D = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            _(D);
           },
           onKeyUp: (k) => {
             w && (k.preventDefault(), S(!1));
           },
           onBlur: () => C(),
           onChange: (k) => {
-            x(!1), l(k.target.value);
+            b(!1), l(k.target.value);
           },
           onClick: (k) => {
             var v;
@@ -6206,7 +6200,7 @@ const COLOR_PROP = {
           value: B ? h : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            b ? "border-red-500 text-red-500" : "border-foreground/20"
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6347,17 +6341,17 @@ const COLOR_PROP = {
   "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(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), b = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), h = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), h = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
     (_, C = !0) => {
       const T = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
       (p || u !== "") && (T.mq = "xs");
       const k = generateFullClsName(T);
-      f(x, [k], C);
+      f(b, [k], C);
     },
-    [x, p, g, u, l, f]
+    [b, p, g, u, l, f]
   ), B = useCallback(() => {
-    b(x, [h], !0);
-  }, [x, h, b]), E = useMemo(() => canChangeClass(m, g), [m, g]);
+    x(b, [h], !0);
+  }, [b, h, x]), E = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(E, m);
   }, [E, i, m]);
@@ -6444,18 +6438,18 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: f, key: b }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: f, key: x }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(b),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${b === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(x),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: m(b) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: m(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, b, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6601,9 +6595,9 @@ function BlockStyling() {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let f = parseFloat(i.dragStartValue);
       f = isNaN(f) ? 0 : f;
-      let b = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (b = 10);
-      let h = (i.dragStartY - u.pageY) / b + f;
+      let x = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (x = 10);
+      let h = (i.dragStartY - u.pageY) / x + f;
       g && h < 0 && (h = 0), m === "opacity" && h > 1 && (h = 1), i.onDrag(`${h}`), l(`${h}`);
     },
     [i],
@@ -6653,7 +6647,7 @@ const CoreBlock = ({
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, b = useFeature("dnd"), { t: x } = useTranslation();
+  }, x = useFeature("dnd"), { t: b } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6666,15 +6660,15 @@ const CoreBlock = ({
             g([]), m();
           }, 200);
         },
-        draggable: b ? "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(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(b(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: b(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6859,7 +6853,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, f, b, x, h, y, B, E;
+  var m, f, x, b, h, y, B, E;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -6902,8 +6896,8 @@ const CoreBlock = ({
       ...a,
       href: ((m = l.find((S) => S.key === "href")) == null ? void 0 : m.value) || "",
       hrefType: ((f = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : f.value) || "video",
-      autoplay: ((b = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : b.value) === "true" ? "true" : "false",
-      maxWidth: ((h = (x = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : h.replace("px", "")) || "",
+      autoplay: ((x = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
+      maxWidth: ((h = (b = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : b.value) == null ? void 0 : h.replace("px", "")) || "",
       backdropColor: ((y = l.find((S) => S.key === "data-overlay")) == null ? void 0 : y.value) || "",
       galleryName: ((B = l.find((S) => S.key === "data-gall")) == null ? void 0 : B.value) || ""
     }, forEach(w, (S) => {
@@ -6986,8 +6980,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: r("Import HTML") }) })
   ] });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var x;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (x = find(c, (h) => h._id === r)) == null ? void 0 : x._type;
+  var b;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (b = find(c, (h) => h._id === r)) == null ? void 0 : b._type;
   useEffect(() => {
     const h = setTimeout(() => {
       var y;
@@ -7000,7 +6994,7 @@ const CoreBlock = ({
       var y, B;
       return (((y = h.label) == null ? void 0 : y.toLowerCase()) + " " + ((B = h.type) == null ? void 0 : B.toLowerCase())).includes(d.toLowerCase());
     }
-  ) : n, b = d ? o.filter((h) => reject(filter(values(f), { group: h }), { hidden: !0 }).length > 0) : o.filter((h) => reject(filter(values(n), { group: h }), { hidden: !0 }).length > 0);
+  ) : n, x = d ? o.filter((h) => reject(filter(values(f), { group: h }), { hidden: !0 }).length > 0) : o.filter((h) => reject(filter(values(n), { group: h }), { hidden: !0 }).length > 0);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7012,13 +7006,13 @@ const CoreBlock = ({
         onChange: (h) => p(h.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: b.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: x.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
       i("No blocks found matching"),
       ' "',
       d,
       '"'
     ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: sortBy(
-      b,
+      x,
       (h) => CORE_GROUPS.indexOf(h) === -1 ? 99 : CORE_GROUPS.indexOf(h)
     ).map((h) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(h.toLowerCase())) }),
@@ -7125,7 +7119,7 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, b] = useAtom$1(draggedBlockAtom), x = (B) => {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), b = (B) => {
     const E = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && E;
   }, h = useCallback(
@@ -7150,7 +7144,7 @@ const BlockCard = ({
         onDragStart: async (B) => {
           const E = await c(n, o);
           let w = r;
-          if (x(first(E)) && (w = null), !isEmpty(E)) {
+          if (b(first(E)) && (w = null), !isEmpty(E)) {
             const S = { blocks: E, uiLibrary: !0, parent: w };
             if (B.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
               const A = new Image();
@@ -7159,7 +7153,7 @@ const BlockCard = ({
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            b(S), setTimeout(() => {
+            x(S), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7191,9 +7185,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), b = get(g, m, []), x = useRef(null), { t: h } = useTranslation(), y = (w) => {
-    x.current && (clearTimeout(x.current), x.current = null), x.current = setTimeout(() => {
-      x.current && f(w);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), x = get(g, m, []), b = useRef(null), { t: h } = useTranslation(), y = (w) => {
+    b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
+      b.current && f(w);
     }, 300);
   };
   if (u)
@@ -7201,7 +7195,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const B = filter(b, (w, S) => S % 2 === 0), E = filter(b, (w, S) => S % 2 === 1);
+  const B = filter(x, (w, S) => S % 2 === 0), E = filter(x, (w, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
@@ -7213,7 +7207,7 @@ const BlockCard = ({
             "div",
             {
               onMouseEnter: () => y(S),
-              onMouseLeave: () => clearTimeout(x.current),
+              onMouseLeave: () => clearTimeout(b.current),
               onClick: () => f(S),
               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",
@@ -7232,7 +7226,7 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => x.current ? clearTimeout(x.current) : null,
+        onMouseEnter: () => b.current ? clearTimeout(b.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__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
@@ -7460,10 +7454,10 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var P;
+  var D;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: b, isSelected: x, willReceiveDrop: h, isDragging: y, isEditing: B, handleClick: E } = o, w = (j) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: x, isSelected: b, willReceiveDrop: h, isDragging: y, isEditing: B, handleClick: E } = o, w = (j) => {
     j.stopPropagation(), !i.includes(f) && o.toggle();
   }, S = (j) => {
     j.isInternal && (p = j.isOpen, j.isOpen && j.close());
@@ -7484,19 +7478,19 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     return () => clearTimeout(j);
   }, [h, o, y]);
   const N = useMemo(() => {
-    const j = Object.keys(b), R = [];
-    for (let D = 0; D < j.length; D++)
-      if (j[D].endsWith("_attrs")) {
-        const L = b[j[D]], $ = Object.keys(L).join("|");
+    const j = Object.keys(x), R = [];
+    for (let M = 0; M < j.length; M++)
+      if (j[M].endsWith("_attrs")) {
+        const L = x[j[M]], $ = Object.keys(L).join("|");
         $.match(/x-data/) && R.push("data"), $.match(/x-on/) && R.push("event"), $.match(/x-show|x-if/) && R.push("show");
       }
     return R;
-  }, [b]), I = (j, R) => {
-    const D = d.contentDocument || d.contentWindow.document, L = D.querySelector(`[data-block-id=${j}]`);
+  }, [x]), I = (j, R) => {
+    const M = d.contentDocument || d.contentWindow.document, L = M.querySelector(`[data-block-id=${j}]`);
     L && L.setAttribute("data-drop", R);
     const $ = L.getBoundingClientRect(), O = d.getBoundingClientRect();
-    $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (D.documentElement.scrollTop = L.offsetTop - O.top);
-  }, M = (j) => {
+    $.top >= O.top && $.left >= O.left && $.bottom <= O.bottom && $.right <= O.right || (M.documentElement.scrollTop = L.offsetTop - O.top);
+  }, P = (j) => {
     k();
     const R = get(o, "parent.id");
     R !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: R, position: j }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: j });
@@ -7506,7 +7500,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     /* @__PURE__ */ jsx(
       "div",
       {
-        onClick: () => M(-1),
+        onClick: () => P(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -7537,11 +7531,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
         j.preventDefault(), I(f, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((D = o == null ? void 0 : o.parent) == null ? void 0 : D.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (j) => {
-              j.stopPropagation(), M(o.childIndex);
+              j.stopPropagation(), P(o.childIndex);
             },
             onMouseEnter: T,
             onMouseLeave: k,
@@ -7554,8 +7548,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
-              x ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              h && canAcceptChildBlock(b._type, "Icon") ? "bg-green-200" : "",
+              b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              h && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === _ ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(f) ? "opacity-50" : ""
@@ -7569,13 +7563,13 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${x ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: b == null ? void 0 : b._type }),
+                  /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
                   B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -7584,7 +7578,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                         j.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: (b == null ? void 0 : b._name) || (b == null ? void 0 : b._type.split("/").pop()) }),
+                        /* @__PURE__ */ jsx("span", { children: (x == null ? void 0 : x._name) || (x == null ? void 0 : x._type.split("/").pop()) }),
                         N.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                         N.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                         N.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -7605,7 +7599,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: j.tooltip })
                 ] })),
-                canAddChildBlock(b == null ? void 0 : b._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(x == null ? void 0 : x._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8284,11 +8278,11 @@ 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, g] = useState(), m = useRef(null), f = useRef(null);
   useEffect(() => {
-    var x;
-    (x = m.current) == null || x.focus();
+    var b;
+    (b = m.current) == null || b.focus();
   }, []);
-  const b = (x) => {
-    const { usage: h } = x || {};
+  const x = (b) => {
+    const { usage: h } = b || {};
     !l && h && g(h), f.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -8309,12 +8303,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: m,
           value: i,
-          onChange: (x) => c(x.target.value),
+          onChange: (b) => c(b.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (x) => {
-            x.key === "Enter" && (x.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, b));
+          onKeyDown: (b) => {
+            b.key === "Enter" && (b.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, x));
           }
         }
       ),
@@ -8324,7 +8318,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, b);
+              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, x);
             },
             variant: "default",
             className: "w-fit",
@@ -8356,8 +8350,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (x) => {
-            f.current && clearTimeout(f.current), g(void 0), r("content", o, x, b);
+          onClick: (b) => {
+            f.current && clearTimeout(f.current), g(void 0), r("content", o, b, x);
           }
         }
       )
@@ -8367,17 +8361,13 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), { toast: m } = useToast(), f = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), m = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const b = async () => {
+  const f = async () => {
     try {
-      d(!0), u(null), await i(r), m({
-        title: o("Updated AI Context"),
-        description: o("You can now Ask AI to edit your content"),
-        variant: "default"
-      }), f.current.click();
+      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
     } catch (x) {
       u(x);
     } finally {
@@ -8393,7 +8383,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
@@ -8405,7 +8395,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               className: "mt-1 w-full",
               rows: 10,
               onKeyDown: (x) => {
-                x.key === "Enter" && (x.preventDefault(), b());
+                x.key === "Enter" && (x.preventDefault(), f());
               }
             }
           ),
@@ -8417,7 +8407,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => b(),
+                onClick: () => f(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8446,7 +8436,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), b();
+                        a(""), f();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8600,7 +8590,7 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), b = useRef(null), x = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), x = useRef(null), b = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
@@ -8647,7 +8637,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: b,
+                  ref: x,
                   value: i,
                   onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
@@ -8665,7 +8655,7 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: x,
+                  ref: b,
                   value: d,
                   onChange: (S) => p(S.target.value),
                   onKeyDown: (S) => {
@@ -8869,7 +8859,7 @@ const ChooseLayout = ({ open: o, close: n }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-BuWEmzZG.js"));
+}, TopBar = lazy(() => import("./Topbar-DutZ_viX.js"));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {
@@ -8885,12 +8875,12 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (x) => {
-    x.preventDefault();
-  }, u = (x) => {
-    n(o === x ? null : x);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], b = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsx("div", { dir: b, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (b) => {
+    b.preventDefault();
+  }, u = (b) => {
+    n(o === b ? null : b);
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], x = useBuilderProp("htmlDir", "ltr");
+  return /* @__PURE__ */ jsx("div", { dir: x, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -8900,21 +8890,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((x, h) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((b, h) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: o === h ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => u(h),
-                    children: get(x, "icon", null)
+                    children: get(b, "icon", null)
                   },
                   h
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(x.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(b.label) }) })
               ] }, "button" + h)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((x, h) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${h}`)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((b, h) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(b, {}) }, `sidebar-component-${h}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -9079,9 +9069,9 @@ export {
   generateUUID as generateBlockId,
   getBlocksFromHTML,
   getClassValueAndUnit,
-  He as i18n,
+  Ve as i18n,
   cn as mergeClasses,
-  $e as registerChaiBlock,
+  Oe as registerChaiBlock,
   useAddBlock,
   useAddClassesToBlocks,
   useAskAi,
@@ -9124,7 +9114,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  De as useTranslation,
+  Me as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,