@chaibuilder/sdk 2.0.0-beta.110 → 2.0.0-beta.113

package/dist/core.js

@@ -4,7 +4,7 @@ var V = (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 { 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, _ as DialogHeader, a0 as DialogTitle, 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 { S as Skeleton, B as Button, a6 as Label, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, aa as ScrollArea, Y as DropdownMenuGroup, R as DropdownMenuItem, X as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, 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, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.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, isObject, memoize, get, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, 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";
@@ -22,7 +22,7 @@ import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThe
 import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
 import { toast } from "sonner";
-import { PlusIcon as PlusIcon$1, ChevronRight, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { PlusIcon as PlusIcon$1, ChevronRight, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Globe, PencilIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import typography from "@tailwindcss/typography";
@@ -101,97 +101,97 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   var x;
   return (x = m.onMount) == null ? void 0 : x.call(m, h);
 }, ...f) => {
-  const m = f[0] || ((w) => {
-    let L = o.get(w);
-    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(w, L), u == null || u(w, _)), L;
+  const m = f[0] || ((C) => {
+    let L = o.get(C);
+    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, L), u == null || u(C, S)), L;
   }), h = f[1] || (() => {
-    let w, L;
+    let C, L;
     const v = (k) => {
       try {
         k();
-      } catch (E) {
-        w || (w = !0, L = E);
+      } catch (A) {
+        C || (C = !0, L = A);
       }
     };
     do {
       c.f && v(c.f);
-      const k = /* @__PURE__ */ new Set(), E = k.add.bind(k);
+      const k = /* @__PURE__ */ new Set(), A = k.add.bind(k);
       a.forEach((T) => {
         var I;
-        return (I = n.get(T)) == null ? void 0 : I.l.forEach(E);
-      }), a.clear(), i.forEach(E), i.clear(), l.forEach(E), l.clear(), k.forEach(v), a.size && x();
+        return (I = n.get(T)) == null ? void 0 : I.l.forEach(A);
+      }), a.clear(), i.forEach(A), i.clear(), l.forEach(A), l.clear(), k.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
-    if (w)
+    if (C)
       throw L;
   }), x = f[2] || (() => {
-    const w = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
+    const C = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
     for (; k.length; ) {
-      const E = k[k.length - 1], T = m(E);
-      if (v.has(E)) {
+      const A = k[k.length - 1], T = m(A);
+      if (v.has(A)) {
         k.pop();
         continue;
       }
-      if (L.has(E)) {
-        r.get(E) === T.n && w.push([E, T]), v.add(E), k.pop();
+      if (L.has(A)) {
+        r.get(A) === T.n && C.push([A, T]), v.add(A), k.pop();
         continue;
       }
-      L.add(E);
-      for (const I of getMountedOrPendingDependents(E, T, n))
+      L.add(A);
+      for (const I of getMountedOrPendingDependents(A, T, n))
         L.has(I) || k.push(I);
     }
-    for (let E = w.length - 1; E >= 0; --E) {
-      const [T, I] = w[E];
-      let R = !1;
+    for (let A = C.length - 1; A >= 0; --A) {
+      const [T, I] = C[A];
+      let P = !1;
       for (const N of I.d.keys())
         if (N !== T && a.has(N)) {
-          R = !0;
+          P = !0;
           break;
         }
-      R && (b(T), j(T)), r.delete(T);
+      P && (y(T), E(T)), r.delete(T);
     }
-  }), b = f[3] || ((w) => {
+  }), y = f[3] || ((C) => {
     var L, v;
-    const k = m(w);
-    if (isAtomStateInitialized(k) && (n.has(w) && r.get(w) !== k.n || Array.from(k.d).every(
-      ([P, O]) => (
+    const k = m(C);
+    if (isAtomStateInitialized(k) && (n.has(C) && r.get(C) !== k.n || Array.from(k.d).every(
+      ([R, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        b(P).n === O
+        y(R).n === O
       )
     )))
       return k;
     k.d.clear();
-    let E = !0;
+    let A = !0;
     const T = () => {
-      n.has(w) && (j(w), x(), h());
-    }, I = (P) => {
+      n.has(C) && (E(C), x(), h());
+    }, I = (R) => {
       var O;
-      if (isSelfAtom(w, P)) {
-        const H = m(P);
+      if (isSelfAtom(C, R)) {
+        const H = m(R);
         if (!isAtomStateInitialized(H))
-          if (hasInitialValue(P))
-            setAtomStateValueOrPromise(P, P.init, m);
+          if (hasInitialValue(R))
+            setAtomStateValueOrPromise(R, R.init, m);
           else
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const $ = b(P);
+      const $ = y(R);
       try {
         return returnAtomValue($);
       } finally {
-        k.d.set(P, $.n), isPendingPromise(k.v) && addPendingPromiseToDependency(w, k.v, $), (O = n.get(P)) == null || O.t.add(w), E || T();
+        k.d.set(R, $.n), isPendingPromise(k.v) && addPendingPromiseToDependency(C, k.v, $), (O = n.get(R)) == null || O.t.add(C), A || T();
       }
     };
-    let R, N;
+    let P, N;
     const D = {
       get signal() {
-        return R || (R = new AbortController()), R.signal;
+        return P || (P = new AbortController()), P.signal;
       },
       get setSelf() {
-        return !N && isActuallyWritableAtom(w) && (N = (...P) => {
-          if (!E)
+        return !N && isActuallyWritableAtom(C) && (N = (...R) => {
+          if (!A)
             try {
-              return B(w, ...P);
+              return B(C, ...R);
             } finally {
               x(), h();
             }
@@ -199,36 +199,36 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     }, M = k.n;
     try {
-      const P = d(w, I, D);
-      return setAtomStateValueOrPromise(w, P, m), isPromiseLike$2(P) && ((L = P.onCancel) == null || L.call(P, () => R == null ? void 0 : R.abort()), P.then(
+      const R = d(C, I, D);
+      return setAtomStateValueOrPromise(C, R, m), isPromiseLike$2(R) && ((L = R.onCancel) == null || L.call(R, () => P == null ? void 0 : P.abort()), R.then(
         T,
         T
       )), k;
-    } catch (P) {
-      return delete k.v, k.e = P, ++k.n, k;
+    } catch (R) {
+      return delete k.v, k.e = R, ++k.n, k;
     } finally {
-      E = !1, M !== k.n && r.get(w) === M && (r.set(w, k.n), a.add(w), (v = c.c) == null || v.call(c, w));
+      A = !1, M !== k.n && r.get(C) === M && (r.set(C, k.n), a.add(C), (v = c.c) == null || v.call(c, C));
     }
-  }), y = f[4] || ((w) => {
-    const L = [w];
+  }), b = f[4] || ((C) => {
+    const L = [C];
     for (; L.length; ) {
       const v = L.pop(), k = m(v);
-      for (const E of getMountedOrPendingDependents(v, k, n)) {
-        const T = m(E);
-        r.set(E, T.n), L.push(E);
+      for (const A of getMountedOrPendingDependents(v, k, n)) {
+        const T = m(A);
+        r.set(A, T.n), L.push(A);
       }
     }
-  }), B = f[5] || ((w, ...L) => {
+  }), B = f[5] || ((C, ...L) => {
     let v = !0;
-    const k = (T) => returnAtomValue(b(T)), E = (T, ...I) => {
-      var R;
+    const k = (T) => returnAtomValue(y(T)), A = (T, ...I) => {
+      var P;
       const N = m(T);
       try {
-        if (isSelfAtom(w, T)) {
+        if (isSelfAtom(C, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const D = N.n, M = I[0];
-          setAtomStateValueOrPromise(T, M, m), j(T), D !== N.n && (a.add(T), (R = c.c) == null || R.call(c, T), y(T));
+          setAtomStateValueOrPromise(T, M, m), E(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
           return;
         } else
           return B(T, ...I);
@@ -237,54 +237,54 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     };
     try {
-      return p(w, k, E, ...L);
+      return p(C, k, A, ...L);
     } finally {
       v = !1;
     }
-  }), j = f[6] || ((w) => {
+  }), E = f[6] || ((C) => {
     var L;
-    const v = m(w), k = n.get(w);
+    const v = m(C), k = n.get(C);
     if (k && !isPendingPromise(v.v)) {
-      for (const [E, T] of v.d)
-        if (!k.d.has(E)) {
-          const I = m(E);
-          C(E).t.add(w), k.d.add(E), T !== I.n && (a.add(E), (L = c.c) == null || L.call(c, E), y(E));
+      for (const [A, T] of v.d)
+        if (!k.d.has(A)) {
+          const I = m(A);
+          w(A).t.add(C), k.d.add(A), T !== I.n && (a.add(A), (L = c.c) == null || L.call(c, A), b(A));
         }
-      for (const E of k.d || [])
-        if (!v.d.has(E)) {
-          k.d.delete(E);
-          const T = S(E);
-          T == null || T.t.delete(w);
+      for (const A of k.d || [])
+        if (!v.d.has(A)) {
+          k.d.delete(A);
+          const T = _(A);
+          T == null || T.t.delete(C);
         }
     }
-  }), C = f[7] || ((w) => {
+  }), w = f[7] || ((C) => {
     var L;
-    const v = m(w);
-    let k = n.get(w);
+    const v = m(C);
+    let k = n.get(C);
     if (!k) {
-      b(w);
-      for (const E of v.d.keys())
-        C(E).t.add(w);
+      y(C);
+      for (const A of v.d.keys())
+        w(A).t.add(C);
       if (k = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(w, k), (L = c.m) == null || L.call(c, w), isActuallyWritableAtom(w)) {
-        const E = () => {
+      }, n.set(C, k), (L = c.m) == null || L.call(c, C), isActuallyWritableAtom(C)) {
+        const A = () => {
           let T = !0;
-          const I = (...R) => {
+          const I = (...P) => {
             try {
-              return B(w, ...R);
+              return B(C, ...P);
             } finally {
               T || (x(), h());
             }
           };
           try {
-            const R = g(w, I);
-            R && (k.u = () => {
+            const P = g(C, I);
+            P && (k.u = () => {
               T = !0;
               try {
-                R();
+                P();
               } finally {
                 T = !1;
               }
@@ -293,27 +293,27 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             T = !1;
           }
         };
-        l.add(E);
+        l.add(A);
       }
     }
     return k;
-  }), S = f[8] || ((w) => {
+  }), _ = f[8] || ((C) => {
     var L;
-    const v = m(w);
-    let k = n.get(w);
-    if (k && !k.l.size && !Array.from(k.t).some((E) => {
+    const v = m(C);
+    let k = n.get(C);
+    if (k && !k.l.size && !Array.from(k.t).some((A) => {
       var T;
-      return (T = n.get(E)) == null ? void 0 : T.d.has(w);
+      return (T = n.get(A)) == null ? void 0 : T.d.has(C);
     })) {
-      k.u && i.add(k.u), k = void 0, n.delete(w), (L = c.u) == null || L.call(c, w);
-      for (const E of v.d.keys()) {
-        const T = S(E);
-        T == null || T.t.delete(w);
+      k.u && i.add(k.u), k = void 0, n.delete(C), (L = c.u) == null || L.call(c, C);
+      for (const A of v.d.keys()) {
+        const T = _(A);
+        T == null || T.t.delete(C);
       }
       return;
     }
     return k;
-  }), A = [
+  }), j = [
     // store state
     o,
     n,
@@ -331,29 +331,29 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     m,
     h,
     x,
-    b,
     y,
+    b,
     B,
-    j,
-    C,
-    S
-  ], _ = {
-    get: (w) => returnAtomValue(b(w)),
-    set: (w, ...L) => {
+    E,
+    w,
+    _
+  ], S = {
+    get: (C) => returnAtomValue(y(C)),
+    set: (C, ...L) => {
       try {
-        return B(w, ...L);
+        return B(C, ...L);
       } finally {
         x(), h();
       }
     },
-    sub: (w, L) => {
-      const k = C(w).l;
+    sub: (C, L) => {
+      const k = w(C).l;
       return k.add(L), h(), () => {
-        k.delete(L), S(w), h();
+        k.delete(L), _(C), h();
       };
     }
   };
-  return Object.defineProperty(_, BUILDING_BLOCKS, { value: A }), _;
+  return Object.defineProperty(S, BUILDING_BLOCKS, { value: j }), S;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -392,32 +392,32 @@ function splitAtom(o, n) {
         return c.forEach((m, h) => {
           const x = h;
           f[h] = x;
-          const b = u && u.atomList[u.keyList.indexOf(x)];
-          if (b) {
-            g[h] = b;
+          const y = u && u.atomList[u.keyList.indexOf(x)];
+          if (y) {
+            g[h] = y;
             return;
           }
-          const y = (j) => {
-            const C = j(l), S = j(o), _ = a(S, C == null ? void 0 : C.arr).keyList.indexOf(x);
-            if (_ < 0 || _ >= S.length) {
-              const w = c[a(c).keyList.indexOf(x)];
-              if (w)
-                return w;
+          const b = (E) => {
+            const w = E(l), _ = E(o), S = a(_, w == null ? void 0 : w.arr).keyList.indexOf(x);
+            if (S < 0 || S >= _.length) {
+              const C = c[a(c).keyList.indexOf(x)];
+              if (C)
+                return C;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return S[_];
-          }, B = (j, C, S) => {
-            const A = j(l), _ = j(o), L = a(_, A == null ? void 0 : A.arr).keyList.indexOf(x);
-            if (L < 0 || L >= _.length)
+            return _[S];
+          }, B = (E, w, _) => {
+            const j = E(l), S = E(o), L = a(S, j == null ? void 0 : j.arr).keyList.indexOf(x);
+            if (L < 0 || L >= S.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(S) ? S(_[L]) : S;
-            Object.is(_[L], v) || C(o, [
-              ..._.slice(0, L),
+            const v = isFunction(_) ? _(S[L]) : _;
+            Object.is(S[L], v) || w(o, [
+              ...S.slice(0, L),
               v,
-              ..._.slice(L + 1)
+              ...S.slice(L + 1)
             ]);
           };
-          g[h] = isWritable(o) ? atom(y, B) : atom(y);
+          g[h] = isWritable(o) ? atom(b, B) : atom(b);
         }), u && u.keyList.length === f.length && u.keyList.every((m, h) => m === f[h]) ? p = u : p = { arr: c, atomList: g, keyList: f }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
@@ -1158,8 +1158,8 @@ const useSelectedBlocksDisplayChild = () => ({
         m && "content" in m && (r = r.map((h) => {
           if (h._id === u) {
             const x = { ...h, content: f.content };
-            return Object.keys(f).forEach((b) => {
-              b.startsWith("content-") && (x[b] = f[b]);
+            return Object.keys(f).forEach((y) => {
+              y.startsWith("content-") && (x[y] = f[y]);
             }), x;
           }
           return h;
@@ -1238,8 +1238,8 @@ function insertBlocksAtPosition(o, n, r, a) {
       }), l.unshift(m), i = i.map((h) => {
         if (h._id === r) {
           const x = { ...h, content: "" };
-          return Object.keys(x).forEach((b) => {
-            b.startsWith("content-") && (x[b] = "");
+          return Object.keys(x).forEach((y) => {
+            y.startsWith("content-") && (x[y] = "");
           }), x;
         }
         return h;
@@ -1388,50 +1388,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, b, y) => {
-      const B = map(x, (C) => {
-        const A = n.find((L) => L._id === C)._parent || null, w = n.filter((L) => A ? L._parent === A : !L._parent).map((L) => L._id).indexOf(C);
-        return { _id: C, oldParent: A, oldPosition: w };
-      }), j = B.find(({ _id: C }) => C === x[0]);
-      j && j.oldParent === b && j.oldPosition === y || (i(x, b, y), o({
-        undo: () => each(B, ({ _id: C, oldParent: S, oldPosition: A }) => {
-          i([C], S, A);
+    moveBlocks: (x, y, b) => {
+      const B = map(x, (w) => {
+        const j = n.find((L) => L._id === w)._parent || null, C = n.filter((L) => j ? L._parent === j : !L._parent).map((L) => L._id).indexOf(w);
+        return { _id: w, oldParent: j, oldPosition: C };
+      }), E = B.find(({ _id: w }) => w === x[0]);
+      E && E.oldParent === y && E.oldPosition === b || (i(x, y, b), o({
+        undo: () => each(B, ({ _id: w, oldParent: _, oldPosition: j }) => {
+          i([w], _, j);
         }),
-        redo: () => i(x, b, y)
+        redo: () => i(x, y, b)
       }));
     },
-    addBlocks: (x, b, y) => {
-      a(x, b, y), o({
+    addBlocks: (x, y, b) => {
+      a(x, y, b), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, b, y)
+        redo: () => a(x, y, b)
       });
     },
     removeBlocks: (x) => {
-      var j;
-      const b = (j = first(x)) == null ? void 0 : j._parent, B = n.filter((C) => b ? C._parent === b : !C._parent).indexOf(first(x));
+      var E;
+      const y = (E = first(x)) == null ? void 0 : E._parent, B = n.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, b, B),
+        undo: () => a(x, y, B),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, b, y) => {
+    updateBlocks: (x, y, b) => {
       let B = [];
-      if (y)
-        B = map(x, (j) => ({ _id: j, ...y }));
+      if (b)
+        B = map(x, (E) => ({ _id: E, ...b }));
       else {
-        const j = keys(b);
-        B = map(x, (C) => {
-          const S = n.find((_) => _._id === C), A = { _id: C };
-          return each(j, (_) => A[_] = S[_]), A;
+        const E = keys(y);
+        B = map(x, (w) => {
+          const _ = n.find((S) => S._id === w), j = { _id: w };
+          return each(E, (S) => j[S] = _[S]), j;
         });
       }
-      c(map(x, (j) => ({ _id: j, ...b }))), o({
+      c(map(x, (E) => ({ _id: E, ...y }))), o({
         undo: () => c(B),
-        redo: () => c(map(x, (j) => ({ _id: j, ...b })))
+        redo: () => c(map(x, (E) => ({ _id: E, ...y })))
       });
     },
-    updateBlocksRuntime: (x, b) => {
-      c(map(x, (y) => ({ _id: y, ...b })));
+    updateBlocksRuntime: (x, y) => {
+      c(map(x, (b) => ({ _id: b, ...y })));
     },
     setNewBlocks: (x) => {
       r(x), o({
@@ -1440,12 +1440,12 @@ const useBlocksStoreManager = () => {
       });
     },
     updateMultipleBlocksProps: (x) => {
-      let b = [];
-      b = map(x, (y) => {
-        const B = keys(y), j = n.find((S) => S._id === y._id), C = {};
-        return each(B, (S) => C[S] = j[S]), C;
+      let y = [];
+      y = map(x, (b) => {
+        const B = keys(b), E = n.find((_) => _._id === b._id), w = {};
+        return each(B, (_) => w[_] = E[_]), w;
       }), c(x), o({
-        undo: () => c(b),
+        undo: () => c(y),
         redo: () => c(x)
       });
     }
@@ -1486,9 +1486,9 @@ const useAddBlock = () => {
       for (let h = 0; h < i.length; h++) {
         const { _id: x } = i[h];
         i[h]._id = generateUUID();
-        const b = filter(i, { _parent: x });
-        for (let y = 0; y < b.length; y++)
-          b[y]._parent = i[h]._id;
+        const y = filter(i, { _parent: x });
+        for (let b = 0; b < y.length; b++)
+          y[b]._parent = i[h]._id;
       }
       const p = first(i);
       let u, g;
@@ -1499,8 +1499,8 @@ const useAddBlock = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const b = i.blocks;
-        return a(b, c, d);
+        const y = i.blocks;
+        return a(y, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2957,42 +2957,42 @@ const getBlockWithChildren = (o, n) => {
   })
 ), 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, f = (m, h) => {
-    const x = cloneDeep(h.find((b) => b._id === m));
-    for (const b in x) {
-      const y = x[b];
-      if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: B, classes: j } = getSplitChaiClasses(y);
-        x[b] = compact(flattenDeep([B, j])).join(" ");
+    const x = cloneDeep(h.find((y) => y._id === m));
+    for (const y in x) {
+      const b = x[y];
+      if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
+        const { baseClasses: B, classes: E } = getSplitChaiClasses(b);
+        x[y] = compact(flattenDeep([B, E])).join(" ");
       } else
-        b !== "_id" && delete x[b];
+        y !== "_id" && delete x[y];
     }
     return x;
   };
   return {
     askAi: useCallback(
-      async (m, h, x, b) => {
+      async (m, h, x, y) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, B = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], j = await l(m, addLangToPrompt(x, g, m), B, y), { blocks: C, error: S } = j;
-            if (S) {
-              a(S);
+            const b = p === u ? "" : p, B = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], E = await l(m, addLangToPrompt(x, g, m), B, b), { blocks: w, error: _ } = E;
+            if (_) {
+              a(_);
               return;
             }
             if (m === "styles") {
-              const A = C.map((_) => {
-                for (const w in _)
-                  w !== "_id" && (_[w] = `${STYLES_KEY},${_[w]}`);
-                return _;
+              const j = w.map((S) => {
+                for (const C in S)
+                  C !== "_id" && (S[C] = `${STYLES_KEY},${S[C]}`);
+                return S;
               });
-              c(A);
+              c(j);
             } else
-              i(C);
-            b && b(j);
-          } catch (y) {
-            a(y);
+              i(w);
+            y && y(E);
+          } catch (b) {
+            a(b);
           } finally {
-            n(!1), b && b();
+            n(!1), y && y();
           }
         }
       },
@@ -3576,26 +3576,26 @@ const useDnd = () => {
       m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
     },
     onDrop: (m) => {
-      var S;
-      const h = dropTarget, b = getOrientation(h) === "vertical" ? m.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : m.clientX;
-      dropIndex = calculateDropIndex(b, possiblePositions);
-      const y = d, B = h.getAttribute("data-block-id"), j = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === B || !j) {
+      var _;
+      const h = dropTarget, y = getOrientation(h) === "vertical" ? m.clientY + ((_ = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : _.scrollY) : m.clientX;
+      dropIndex = calculateDropIndex(y, possiblePositions);
+      const b = d, B = h.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((b == null ? void 0 : b._id) === B || !E) {
         f();
         return;
       }
-      if (!has(y, "_id")) {
-        a(y, B === "canvas" ? null : B, dropIndex), setTimeout(f, 300);
+      if (!has(b, "_id")) {
+        a(b, B === "canvas" ? null : B, dropIndex), setTimeout(f, 300);
         return;
       }
-      let C = h.getAttribute("data-block-id");
-      C === null && (C = m.target.parentElement.getAttribute("data-block-id")), c([y._id], C === "canvas" ? null : C, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      let w = h.getAttribute("data-block-id");
+      w === null && (w = m.target.parentElement.getAttribute("data-block-id")), c([b._id], w === "canvas" ? null : w, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
       const h = m, x = h.target;
       dropTarget = x;
-      const b = x.getAttribute("data-block-id"), y = x.getAttribute("data-dnd-dragged") !== "yes";
-      u(b), h.stopPropagation(), h.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(x), r(!0), l(""), i([]);
+      const y = x.getAttribute("data-block-id"), b = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(y), h.stopPropagation(), h.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(x), r(!0), l(""), i([]);
     },
     onDragLeave: (m) => {
       m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3673,8 +3673,8 @@ const useHandleCanvasDblClick = (o, n) => {
       if (h) {
         const x = h.getAttribute("data-style-prop");
         if (x) {
-          const b = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
-          l([{ id: b, prop: x, blockId: y }]);
+          const y = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
+          l([{ id: y, prop: x, blockId: b }]);
         }
       }
     }, 100);
@@ -3726,22 +3726,22 @@ const useHandleCanvasDblClick = (o, n) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: b, theme: y }) {
-          b({
+        plugin(function({ addBase: y, theme: b }) {
+          y({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: y("fontFamily.heading")
+              fontFamily: b("fontFamily.heading")
             },
             body: {
-              fontFamily: y("fontFamily.body"),
-              color: y("colors.foreground"),
-              backgroundColor: y("colors.background")
+              fontFamily: b("fontFamily.body"),
+              color: b("colors.foreground"),
+              backgroundColor: b("colors.background")
             }
           });
         })
       ]
     });
   }, [o, n, p]), useEffect(() => {
-    g && (g.textContent = `${map(r, (b) => `[data-block-id="${b}"]`).join(",")}{
+    g && (g.textContent = `${map(r, (y) => `[data-block-id="${y}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
@@ -3749,7 +3749,7 @@ const useHandleCanvasDblClick = (o, n) => {
   }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    f && (f.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    f && (f.textContent = `${map(l, ({ id: y }) => `[data-style-id="${y}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
   }, [l, f]), useEffect(() => {
@@ -3844,7 +3844,7 @@ const getBlockRuntimeProps = memoize((o) => {
   ), m = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), h = useMemo(
     () => c(r._id, getBlockRuntimeProps(r._type)),
     [r._id, r._type, c, getBlockRuntimeProps]
-  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), b = useMemo(
+  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3868,7 +3868,7 @@ const getBlockRuntimeProps = memoize((o) => {
       x
     ]
   );
-  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...b, children: n }) });
+  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...y, children: n }) });
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: n } = usePartailBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom$1(r)), [r]);
   return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
@@ -3918,43 +3918,43 @@ 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, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), j = (A) => {
-    p((_) => ({ ..._, width: 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, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), E = (j) => {
+    p((S) => ({ ...S, width: j }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: A, clientHeight: _ } = c.current;
-    p({ width: A, height: _ });
+    const { clientWidth: j, clientHeight: S } = c.current;
+    p({ width: j, height: S });
   }, [c, n]);
-  const C = (A, _ = 0) => {
-    const { top: w } = A.getBoundingClientRect();
-    return w + _ >= 0 && w - _ <= window.innerHeight;
+  const w = (j, S = 0) => {
+    const { top: C } = j.getBoundingClientRect();
+    return C + S >= 0 && C - S <= window.innerHeight;
   };
   useEffect(() => {
-    var A, _;
+    var j, S;
     if (a && a.type !== "Multiple" && i.current) {
-      const w = getElementByDataBlockId(i.current.contentDocument, a._id);
-      w && (C(w) || (_ = (A = i.current) == null ? void 0 : A.contentWindow) == null || _.scrollTo({ top: w.offsetTop, behavior: "smooth" }), f([w]));
+      const C = getElementByDataBlockId(i.current.contentDocument, a._id);
+      C && (w(C) || (S = (j = i.current) == null ? void 0 : j.contentWindow) == null || S.scrollTo({ top: C.offsetTop, behavior: "smooth" }), f([C]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
-      const A = getElementByStyleId(
+      const j = getElementByStyleId(
         i.current.contentDocument,
         first(x).id
       );
-      m(A ? [A] : [null]);
+      m(j ? [j] : [null]);
     } else
       m([null]);
   }, [x]);
-  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;
+  const _ = useMemo(() => {
+    let j = IframeInitialContent;
+    return j = j.replace("__HTML_DIR__", B), o === "offline" && (j = j.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), j;
   }, [o, B]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: j, onResize: j, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: E, onResize: E, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
-        r([]), b([]);
+        r([]), y([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3967,7 +3967,7 @@ const getBlockRuntimeProps = memoize((o) => {
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: S,
+          initialContent: _,
           children: [
             /* @__PURE__ */ jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsx(
@@ -3979,7 +3979,7 @@ const getBlockRuntimeProps = memoize((o) => {
             ),
             /* @__PURE__ */ jsx(HeadTags, {}),
             /* @__PURE__ */ jsx(Provider$1, { children: /* @__PURE__ */ jsxs(Canvas, { children: [
-              y ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
+              b ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
               /* @__PURE__ */ jsx(AddBlockAtBottom, {}),
               /* @__PURE__ */ jsx("br", {}),
               /* @__PURE__ */ jsx("br", {}),
@@ -4029,7 +4029,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-Bv7cAp6l.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-C-jeR5bt.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, {}) }) }),
@@ -4140,62 +4140,62 @@ const getBlockRuntimeProps = memoize((o) => {
     }
   );
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (y) => {
-    a(y);
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (b) => {
+    a(b);
   }, f = () => {
-    const y = l.find((B) => Object.keys(B)[0] === r);
-    if (y) {
-      const B = Object.values(y)[0];
+    const b = l.find((B) => Object.keys(B)[0] === r);
+    if (b) {
+      const B = Object.values(b)[0];
       B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? d(B) : console.error("Invalid preset structure:", B);
     } else
       console.error("Preset not found:", r);
   }, m = useDebouncedCallback(
-    (y, B) => {
+    (b, B) => {
       d(() => ({
         ...c,
         fontFamily: {
           ...c.fontFamily,
-          [y.replace(/font-/g, "")]: B
+          [b.replace(/font-/g, "")]: B
         }
       }));
     },
     [c],
     200
   ), h = useDebouncedCallback(
-    (y) => {
+    (b) => {
       d(() => ({
         ...c,
-        borderRadius: `${y}px`
+        borderRadius: `${b}px`
       }));
     },
     [c],
     200
   ), x = useDebouncedCallback(
-    (y, B) => {
+    (b, B) => {
       d(() => {
-        const j = get(c, `colors.${y}`);
-        return n ? set(j, 1, B) : set(j, 0, B), {
+        const E = get(c, `colors.${b}`);
+        return n ? set(E, 1, B) : set(E, 0, B), {
           ...c,
           colors: {
             ...c.colors,
-            [y]: j
+            [b]: E
           }
         };
       });
     },
     [c],
     200
-  ), b = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([B]) => {
-    const j = get(c, `colors.${B}.${n ? 1 : 0}`);
+  ), y = (b) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(b.items).map(([B]) => {
+    const E = get(c, `colors.${B}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: j,
-          onChange: (C) => x(B, C)
+          value: E,
+          onChange: (w) => x(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((C) => C.charAt(0).toUpperCase() + C.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__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" : "") })
     ] }, B);
   }) });
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -4207,11 +4207,11 @@ const getBlockRuntimeProps = memoize((o) => {
             "select",
             {
               value: r,
-              onChange: (y) => g(y.target.value),
+              onChange: (b) => g(b.target.value),
               className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
               children: [
                 /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(l) && l.map((y) => /* @__PURE__ */ jsx("option", { value: Object.keys(y)[0], children: capitalize(Object.keys(y)[0]) }, Object.keys(y)[0]))
+                Array.isArray(l) && l.map((b) => /* @__PURE__ */ jsx("option", { value: Object.keys(b)[0], children: capitalize(Object.keys(b)[0]) }, Object.keys(b)[0]))
               ]
             }
           )
@@ -4228,14 +4228,14 @@ const getBlockRuntimeProps = memoize((o) => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, B]) => /* @__PURE__ */ jsx(
+        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([b, B]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: y,
-            value: c.fontFamily[y.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (j) => m(y, j)
+            label: b,
+            value: c.fontFamily[b.replace(/font-/g, "")] || B[Object.keys(B)[0]],
+            onChange: (E) => m(b, E)
           },
-          y
+          b
         )) }),
         (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") }),
@@ -4246,7 +4246,7 @@ const getBlockRuntimeProps = memoize((o) => {
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => b(y)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((b) => y(b)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4389,14 +4389,14 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   }, [a, o]);
   const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
     (h) => {
-      const x = (b) => r === "value" ? b === "value" || b === "object" : r === "array" ? b === "array" : b === r;
-      h.type === "object" ? (c((b) => [...b, h.key]), p(h.value)) : x(h.type) && (n([...i, h.key].join(".")), l(!1));
+      const x = (y) => r === "value" ? y === "value" || y === "object" : r === "array" ? y === "array" : y === r;
+      h.type === "object" ? (c((y) => [...y, h.key]), p(h.value)) : x(h.type) && (n([...i, h.key].join(".")), l(!1));
     },
     [i, n, r]
   ), f = React.useCallback(() => {
     if (i.length > 0) {
       const h = i.slice(0, -1);
-      c(h), p(h.reduce((x, b) => x[b], o));
+      c(h), p(h.reduce((x, y) => x[y], o));
     }
   }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([h, x]) => ({
     key: h,
@@ -4671,11 +4671,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     if (h !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: y } = u, B = y.selection.from, j = y.doc.textBetween(Math.max(0, B - 1), B), C = y.doc.textBetween(B, Math.min(B + 1, y.doc.content.size));
-      let S = "";
-      B > 0 && j !== " " && !/[.,!?;:]/.test(j) && (S = " ");
-      let A = "";
-      C && C !== " " && !/[.,!?;:]/.test(C) && (A = " "), u.chain().insertContent(S + m + A).run();
+      const { state: b } = u, B = b.selection.from, E = b.doc.textBetween(Math.max(0, B - 1), B), w = b.doc.textBetween(B, Math.min(B + 1, b.doc.content.size));
+      let _ = "";
+      B > 0 && E !== " " && !/[.,!?;:]/.test(E) && (_ = " ");
+      let j = "";
+      w && w !== " " && !/[.,!?;:]/.test(w) && (j = " "), u.chain().insertContent(_ + m + j).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (f) => !f && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4757,16 +4757,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   onChange: r
 }) => {
   var L;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), B = useRef(null), j = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [y, b] = useState(-1), B = useRef(null), E = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
-    if (m(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), k = get(v, 1, "page") || "page";
     g(k), (async () => {
-      const E = await l(k, [get(v, 2, "page")]);
-      E && Array.isArray(E) && m(get(E, [0, "name"], ""));
+      const A = await l(k, [get(v, 2, "page")]);
+      A && Array.isArray(A) && m(get(A, [0, "name"], ""));
     })();
   }, [o]);
-  const C = useDebouncedCallback(
+  const w = useDebouncedCallback(
     async (v) => {
       if (isEmpty(v))
         x([]);
@@ -4774,40 +4774,40 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         const k = await l(u, v);
         x(k);
       }
-      c(!1), y(-1);
+      c(!1), b(-1);
     },
     [u],
     300
-  ), S = (v) => {
+  ), _ = (v) => {
     const k = ["pageType", u, v.id];
-    k[1] && (r(k.join(":")), m(v.name), p(!1), x([]), y(-1));
-  }, A = (v) => {
+    k[1] && (r(k.join(":")), m(v.name), p(!1), x([]), b(-1));
+  }, j = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), y((k) => k < h.length - 1 ? k + 1 : k);
+        v.preventDefault(), b((k) => k < h.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((k) => k > 0 ? k - 1 : k);
+        v.preventDefault(), b((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
         if (v.preventDefault(), h.length === 0) return;
-        b >= 0 && S(h[b]);
+        y >= 0 && _(h[y]);
         break;
       case "Escape":
-        v.preventDefault(), _();
+        v.preventDefault(), S();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && B.current) {
-      const v = B.current.children[b];
+    if (y >= 0 && B.current) {
+      const v = B.current.children[y];
       v == null || v.scrollIntoView({ block: "nearest" });
     }
-  }, [b]);
-  const _ = () => {
-    m(""), x([]), y(-1), p(!1), r("");
-  }, w = (v) => {
-    m(v), p(!isEmpty(v)), c(!0), C(v);
+  }, [y]);
+  const S = () => {
+    m(""), x([]), b(-1), p(!1), r("");
+  }, C = (v) => {
+    m(v), p(!isEmpty(v)), c(!0), w(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
@@ -4817,13 +4817,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         {
           type: "text",
           value: f,
-          onChange: (v) => w(v.target.value),
-          onKeyDown: A,
-          placeholder: a(`Search ${j ?? ""}`),
+          onChange: (v) => C(v.target.value),
+          onKeyDown: j,
+          placeholder: a(`Search ${E ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__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" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(h) || d && isEmpty(h)) && /* @__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" }),
@@ -4836,8 +4836,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(h == null ? void 0 : h.slice(0, 20), (v, k) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => S(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : k === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => _(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -4933,23 +4933,23 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const f = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
-      if (!y) return;
-      n({ ...o, currentSlide: y }), c([y]);
+      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
+      if (!b) return;
+      n({ ...o, currentSlide: b }), c([b]);
     }
   }, m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
-      if (!y) return;
-      n({ ...o, currentSlide: y }), c([y]);
+      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
+      if (!b) return;
+      n({ ...o, currentSlide: b }), c([b]);
     }
   }, h = () => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), b = x == null ? void 0 : x._id;
-    b && (n({ ...o, currentSlide: b }), c([b]));
+    ), y = x == null ? void 0 : x._id;
+    y && (n({ ...o, currentSlide: y }), c([y]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -5028,8 +5028,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (x) => {
-              let b = x.target.value;
-              b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
+              let y = x.target.value;
+              y.length && (y = y.replace("-", "")), n({ ...o, autoplayInterval: y });
             }
           }
         )
@@ -5068,41 +5068,41 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: f
 }) => {
-  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(m) ? h : m, y = get(LANGUAGES, b, b), B = usePageExternalData(), j = useSelectedBlock(), C = useRegisteredChaiBlocks(), S = get(C, [j == null ? void 0 : j._type, "i18nProps"], []) || [], [A, _] = useState(null), w = useCallback(
+  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? h : m, b = get(LANGUAGES, y, y), B = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [j, S] = useState(null), C = useCallback(
     (k) => {
-      const E = (N) => /[.,!?;:]/.test(N), T = (N, D, M) => {
-        let P = "", O = "";
+      const A = (N) => /[.,!?;:]/.test(N), T = (N, D, M) => {
+        let R = "", O = "";
         const $ = D > 0 ? N[D - 1] : "", H = D < N.length ? N[D] : "";
-        return D > 0 && ($ === "." || !E($) && $ !== " ") && (P = " "), D < N.length && !E(H) && H !== " " && (O = " "), {
-          text: P + M + O,
-          prefixLength: P.length,
+        return D > 0 && ($ === "." || !A($) && $ !== " ") && (R = " "), D < N.length && !A(H) && H !== " " && (O = " "), {
+          text: R + M + O,
+          prefixLength: R.length,
           suffixLength: O.length
         };
       }, I = document.getElementById(o);
       if (!I) return;
-      const R = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
-      if (R && (R.querySelector(".ProseMirror") || R.__chaiRTE)) {
-        const N = R.__chaiRTE;
+      const P = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
+      if (P && (P.querySelector(".ProseMirror") || P.__chaiRTE)) {
+        const N = P.__chaiRTE;
         if (N) {
           const D = `{{${k}}}`;
           N.commands.focus();
-          const { from: M, to: P } = N.state.selection;
-          if (M !== P)
+          const { from: M, to: R } = N.state.selection;
+          if (M !== R)
             N.chain().deleteSelection().insertContent(D).run();
           else {
             const { state: $ } = N, H = $.selection.from, F = $.doc.textBetween(Math.max(0, H - 1), H), U = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
             let z = "";
-            H > 0 && F !== " " && !E(F) && (z = " ");
+            H > 0 && F !== " " && !A(F) && (z = " ");
             let W = "";
-            U && U !== " " && !E(U) && (W = " "), N.chain().insertContent(z + D + W).run();
+            U && U !== " " && !A(U) && (W = " "), N.chain().insertContent(z + D + W).run();
           }
           setTimeout(() => f(N.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const N = I, D = N.selectionStart || 0, M = N.value || "", P = N.selectionEnd || D;
-        if (P > D) {
-          const U = `{{${k}}}`, { text: z } = T(M, D, U), W = M.slice(0, D) + z + M.slice(P);
+        const N = I, D = N.selectionStart || 0, M = N.value || "", R = N.selectionEnd || D;
+        if (R > D) {
+          const U = `{{${k}}}`, { text: z } = T(M, D, U), W = M.slice(0, D) + z + M.slice(R);
           f(W, {}, o);
           return;
         }
@@ -5110,20 +5110,20 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         f(F, {}, o);
       }
     },
-    [o, f, g, j == null ? void 0 : j._id]
+    [o, f, g, E == null ? void 0 : E._id]
   );
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const v = S == null ? void 0 : S.includes(o.replace("root.", ""));
+  const v = _ == null ? void 0 : _.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const k = A === o;
+    const k = j === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => _(k ? null : o),
+          onClick: () => S(k ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             k ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
@@ -5149,11 +5149,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         " ",
         v && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
-          y
+          b
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && B && /* @__PURE__ */ jsx(NestedPathSelector, { data: B, onSelect: w, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && B && /* @__PURE__ */ jsx(NestedPathSelector, { data: B, onSelect: C, dataType: "value" })
     ] }),
     c,
     a,
@@ -5252,35 +5252,35 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), 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(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: A }, _, w) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(A, _) }, w);
+  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(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: j }, S, C) => {
+    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(j, S) }, C);
   }, x = useCallback(
-    debounce(({ formData: A }, _, w) => {
-      h({ formData: A }, _, w), d(A);
+    debounce(({ formData: j }, S, C) => {
+      h({ formData: j }, S, C), d(j);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: A }, _) => {
-    _ && (r([n._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
-  }, y = ({ formData: A }, _) => {
-    _ && (r([g._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
+  ), y = ({ formData: j }, S) => {
+    S && (r([n._id], { [S]: get(j, S) }), x({ formData: j }, S, { [S]: get(c, S) }));
+  }, b = ({ formData: j }, S) => {
+    S && (r([g._id], { [S]: get(j, S) }), x({ formData: j }, S, { [S]: get(c, S) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: B, uiSchema: j } = useMemo(() => {
-    const A = n == null ? void 0 : n._type;
-    if (A)
-      return getBlockFormSchemas(A);
-  }, [n]), { wrapperSchema: C, wrapperUiSchema: S } = useMemo(() => {
+  const { schema: B, uiSchema: E } = useMemo(() => {
+    const j = n == null ? void 0 : n._type;
+    if (j)
+      return getBlockFormSchemas(j);
+  }, [n]), { wrapperSchema: w, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const A = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(A);
-    return { wrapperSchema: _, wrapperUiSchema: w };
+    const j = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: C = {} } = getBlockFormSchemas(j);
+    return { wrapperSchema: S, wrapperUiSchema: C };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((A) => !A),
+          onClick: () => u((j) => !j),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5299,10 +5299,10 @@ function BlockSettings() {
         JSONForm,
         {
           blockId: g == null ? void 0 : g._id,
-          onChange: y,
+          onChange: b,
           formData: m,
-          schema: C,
-          uiSchema: S
+          schema: w,
+          uiSchema: _
         }
       ) })
     ] }),
@@ -5310,10 +5310,10 @@ function BlockSettings() {
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: b,
+        onChange: y,
         formData: i,
         schema: B,
-        uiSchema: j
+        uiSchema: E
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlockSettings, {}) : null
@@ -5418,33 +5418,33 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   canvas: n = !1,
   tooltip: r = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (y) => {
-    u.includes(y) ? u.length > 2 && g(u.filter((B) => B !== y)) : g((B) => [...B, y]);
-  }, x = (y) => {
-    n || l(y), c(y);
-  }, b = getBreakpointValue(n ? i : a).toLowerCase();
-  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (y) => /* @__PURE__ */ createElement(
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
+    u.includes(b) ? u.length > 2 && g(u.filter((B) => B !== b)) : g((B) => [...B, b]);
+  }, x = (b) => {
+    n || l(b), c(b);
+  }, y = getBreakpointValue(n ? i : a).toLowerCase();
+  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...y,
+      ...b,
       onClick: x,
-      key: y.breakpoint,
-      currentBreakpoint: b
+      key: b.breakpoint,
+      currentBreakpoint: y
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      m.filter((y) => includes(u, toUpper(y.breakpoint))),
-      (y) => /* @__PURE__ */ createElement(
+      m.filter((b) => includes(u, toUpper(b.breakpoint))),
+      (b) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
           tooltip: r,
-          ...y,
+          ...b,
           onClick: x,
-          key: y.breakpoint,
-          currentBreakpoint: b
+          key: b.breakpoint,
+          currentBreakpoint: y
         }
       )
     ) }),
@@ -5453,15 +5453,15 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: f("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(m, (y) => /* @__PURE__ */ jsx(
+        map(m, (b) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: y.breakpoint === "xs",
-            onCheckedChange: () => h(toUpper(y.breakpoint)),
-            checked: includes(u, toUpper(y.breakpoint)),
-            children: f(y.title)
+            disabled: b.breakpoint === "xs",
+            onCheckedChange: () => h(toUpper(b.breakpoint)),
+            checked: includes(u, toUpper(b.breakpoint)),
+            children: f(b.title)
           },
-          y.breakpoint
+          b.breakpoint
         ))
       ] })
     ] })
@@ -5611,24 +5611,24 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), B = y.split(" ").filter((I) => !isEmpty(I)), j = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), B = b.split(" ").filter((I) => !isEmpty(I)), E = () => {
     const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(f, I, !0), x("");
-  }, [C, S] = useState([]), A = ({ value: I }) => {
-    const R = I.trim().toLowerCase(), N = R.match(/.+:/g);
+  }, [w, _] = useState([]), j = ({ value: I }) => {
+    const P = I.trim().toLowerCase(), N = P.match(/.+:/g);
     let D = [];
     if (N && N.length > 0) {
-      const [M] = N, P = R.replace(M, "");
-      D = i.search(P).map(($) => ({
+      const [M] = N, R = P.replace(M, "");
+      D = i.search(R).map(($) => ({
         ...$,
         item: { ...$.item, name: M + $.item.name }
       }));
     } else
-      D = i.search(R);
-    return S(map(D, "item"));
-  }, _ = () => {
-    S([]);
-  }, w = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
+      D = i.search(P);
+    return _(map(D, "item"));
+  }, S = () => {
+    _([]);
+  }, C = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5638,17 +5638,17 @@ function ManualClasses() {
       placeholder: c("Enter classes separated by space"),
       value: h,
       onKeyDown: (I) => {
-        I.key === "Enter" && h.trim() !== "" && j();
+        I.key === "Enter" && h.trim() !== "" && E();
       },
-      onChange: (I, { newValue: R }) => x(R),
+      onChange: (I, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [h, c, o]
   ), k = (I) => {
     debugger;
-    const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(f, [I]), u(f, R, !0), r(""), l(-1);
-  }, E = () => {
+    const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(f, [I]), u(f, P, !0), r(""), l(-1);
+  }, A = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
@@ -5660,7 +5660,7 @@ function ManualClasses() {
       /* @__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: E, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: A, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -5676,10 +5676,10 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: C,
-          onSuggestionsFetchRequested: A,
-          onSuggestionsClearRequested: _,
-          getSuggestionValue: w,
+          suggestions: w,
+          onSuggestionsFetchRequested: j,
+          onSuggestionsClearRequested: S,
+          getSuggestionValue: C,
           renderSuggestion: L,
           inputProps: v,
           containerProps: {
@@ -5697,7 +5697,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: j,
+          onClick: E,
           disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -5705,7 +5705,7 @@ function ManualClasses() {
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: B.map(
-      (I, R) => a === R ? /* @__PURE__ */ jsx(
+      (I, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
@@ -6077,8 +6077,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: n }) => {
   const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
+    (y) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -6089,8 +6089,8 @@ const COLOR_PROP = {
   }, [g]);
   const h = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      p({ color: g, shade: b });
+    (y) => {
+      p({ color: g, shade: y });
     },
     [g]
   );
@@ -6099,8 +6099,8 @@ const COLOR_PROP = {
   }, [r]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
-    const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, y) && n(y, o);
+    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    x(o, b) && n(b, 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: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
@@ -6338,7 +6338,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, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [B, j] = useState(!1), [C, S] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [y, b] = useState(""), [B, E] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
     const { value: v, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
@@ -6347,24 +6347,24 @@ const COLOR_PROP = {
     }
     m(k), l(k === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const A = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), _ = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+  const j = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), S = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), C = useCallback(
     (v = !1) => {
       const k = getUserInputValues(`${a}`, u);
       if (get(k, "error", !1)) {
         x(!0);
         return;
       }
-      const E = get(k, "unit") !== "" ? get(k, "unit") : f;
-      if (E === "auto" || E === "none") {
-        A(`${d}${E}`);
+      const A = get(k, "unit") !== "" ? get(k, "unit") : f;
+      if (A === "auto" || A === "none") {
+        j(`${d}${A}`);
         return;
       }
       if (get(k, "value") === "")
         return;
-      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      v ? _(I) : A(I);
+      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${A === "-" ? "" : A}]`;
+      v ? S(I) : j(I);
     },
-    [A, _, a, f, d, u]
+    [j, S, a, f, d, u]
   ), L = useCallback(
     (v) => {
       const k = getUserInputValues(`${a}`, u);
@@ -6373,15 +6373,15 @@ const COLOR_PROP = {
         return;
       }
       if (v === "auto" || v === "none") {
-        A(`${d}${v}`);
+        j(`${d}${v}`);
         return;
       }
       if (get(k, "value") === "")
         return;
-      const E = get(k, "unit") !== "" ? get(k, "unit") : v, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      A(I);
+      const A = get(k, "unit") !== "" ? get(k, "unit") : v, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${A === "-" ? "" : A}]`;
+      j(I);
     },
-    [A, a, d, u]
+    [j, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -6403,22 +6403,22 @@ const COLOR_PROP = {
         {
           readOnly: f === "class",
           onKeyPress: (v) => {
-            v.key === "Enter" && w();
+            v.key === "Enter" && C();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            v.preventDefault(), S(!0);
+            v.preventDefault(), _(!0);
             const k = parseInt$1(v.target.value);
-            let E = isNaN$1(k) ? 0 : k;
-            v.keyCode === 38 && (E += 1), v.keyCode === 40 && (E -= 1);
-            const T = `${E}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
-            _(R);
+            let A = isNaN$1(k) ? 0 : k;
+            v.keyCode === 38 && (A += 1), v.keyCode === 40 && (A -= 1);
+            const T = `${A}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            S(P);
           },
           onKeyUp: (v) => {
-            C && (v.preventDefault(), S(!1));
+            w && (v.preventDefault(), _(!1));
           },
-          onBlur: () => w(),
+          onBlur: () => C(),
           onChange: (v) => {
             x(!1), l(v.target.value);
           },
@@ -6426,7 +6426,7 @@ const COLOR_PROP = {
             var k;
             (k = v == null ? void 0 : v.target) == null || k.select(), r(!1);
           },
-          value: B ? b : a,
+          value: B ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6461,19 +6461,19 @@ const COLOR_PROP = {
     ["none", "auto"].indexOf(f) !== -1 || B ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => j(!0),
+        onDragStart: () => E(!0),
         onDragEnd: (v) => {
-          if (y(() => ""), j(!1), isEmpty(v))
+          if (b(() => ""), E(!1), isEmpty(v))
             return;
           const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
-          A(T);
+          j(T);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
-          y(v);
+          b(v);
           const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
-          _(T);
+          S(T);
         },
         currentValue: a,
         unit: f,
@@ -6570,35 +6570,35 @@ 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(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(f, "fullCls", ""), [f]), y = useCallback(
-    (_, w = !0) => {
-      const L = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
+    (S, C = !0) => {
+      const L = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (L.mq = "xs");
       const v = generateFullClsName(L);
-      m(x, [v], w);
+      m(x, [v], C);
     },
     [x, p, g, u, l, m]
   ), B = useCallback(() => {
-    h(x, [b], !0);
-  }, [x, b, h]), j = useMemo(() => canChangeClass(f, g), [f, g]);
+    h(x, [y], !0);
+  }, [x, y, h]), E = useMemo(() => canChangeClass(f, g), [f, g]);
   useEffect(() => {
-    i(j, f);
-  }, [j, i, f]);
-  const [, , C] = useScreenSizeWidth(), S = useCallback(
-    (_) => {
-      C({
+    i(E, f);
+  }, [E, i, f]);
+  const [, , w] = useScreenSizeWidth(), _ = useCallback(
+    (S) => {
+      w({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[_]);
+      }[S]);
     },
-    [C]
-  ), A = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: j, canReset: f && A, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${f && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+    [w]
+  ), j = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: f && j, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${f && !j ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6607,17 +6607,17 @@ const COLOR_PROP = {
             currentClass: get(f, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: y,
+            onChange: b,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: y }),
-        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: y }),
-        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
-        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
+        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: b }),
+        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: b }),
+        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
+        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6637,7 +6637,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => S(get(f, "mq")),
+              onClick: () => _(get(f, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6826,8 +6826,8 @@ function BlockStyling() {
       m = isNaN(m) ? 0 : m;
       let h = MAPPER[i.dragUnit];
       (startsWith(f, "scale") || f === "opacity") && (h = 10);
-      let b = (i.dragStartY - u.pageY) / h + m;
-      g && b < 0 && (b = 0), f === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      let y = (i.dragStartY - u.pageY) / h + m;
+      g && y < 0 && (y = 0), f === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
     },
     [i],
     50
@@ -6871,8 +6871,8 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
     if (console.log("addBlockToPage", o), has(o, "blocks")) {
-      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(b), r || null, a);
+      const y = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(y), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6884,8 +6884,8 @@ const CoreBlock = ({
         disabled: n,
         onClick: m,
         type: "button",
-        onDragStart: (b) => {
-          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (y) => {
+          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), f();
           }, 200);
         },
@@ -7085,22 +7085,22 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var f, m, h, x, b, y, B, j;
+  var f, m, h, x, y, b, B, E;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
     return isEmpty(get(r, "content", "")) ? [] : n && shouldAddText(n.node, n.block) ? (set(n, "block.content", get(r, "content", "")), []) : { ...a, _type: "Text", content: get(r, "content", "") };
   const l = get(r, "attributes", []), i = l.find(
-    (C) => C.key === "data-chai-richtext" || C.key === "chai-richtext"
+    (w) => w.key === "data-chai-richtext" || w.key === "chai-richtext"
   ), c = l.find(
-    (C) => C.key === "data-chai-lightbox" || C.key === "chai-lightbox"
+    (w) => w.key === "data-chai-lightbox" || w.key === "chai-lightbox"
   ), d = l.find(
-    (C) => C.key === "data-chai-dropdown" || C.key === "chai-dropdown"
+    (w) => w.key === "data-chai-dropdown" || w.key === "chai-dropdown"
   ), p = l.find(
-    (C) => C.key === "data-chai-dropdown-button" || C.key === "chai-dropdown-button"
+    (w) => w.key === "data-chai-dropdown-button" || w.key === "chai-dropdown-button"
   ), u = l.find(
-    (C) => C.key === "data-chai-dropdown-content" || C.key === "chai-dropdown-content"
+    (w) => w.key === "data-chai-dropdown-content" || w.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -7108,13 +7108,13 @@ const CoreBlock = ({
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const C = r.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
-    C && (a._name = C.value);
+    const w = r.attributes.find((_) => includes(NAME_ATTRIBUTES, _.key));
+    w && (a._name = w.value);
   }
   if (i)
     return a.content = stringify(r.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const C = [
+    const w = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -7126,44 +7126,44 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((f = l.find((S) => S.key === "href")) == null ? void 0 : f.value) || "",
-      hrefType: ((m = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((h = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
-      maxWidth: ((b = (x = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : b.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(C, (S) => {
-      has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
+      href: ((f = l.find((_) => _.key === "href")) == null ? void 0 : f.value) || "",
+      hrefType: ((m = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      autoplay: ((h = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
+      maxWidth: ((y = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
+      backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      galleryName: ((B = l.find((_) => _.key === "data-gall")) == null ? void 0 : B.value) || ""
+    }, forEach(w, (_) => {
+      has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const C = filter(r.children || [], (A) => (A == null ? void 0 : A.tagName) !== "span");
-    a.content = getTextContent(C);
-    const S = find(
+    const w = filter(r.children || [], (j) => (j == null ? void 0 : j.tagName) !== "span");
+    a.content = getTextContent(w);
+    const _ = find(
       r.children || [],
-      (A) => (A == null ? void 0 : A.tagName) === "span" && some(A.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
+      (j) => (j == null ? void 0 : j.tagName) === "span" && some(j.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
     );
-    if (S) {
-      const A = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
-      if (A) {
-        a.icon = stringify([A]);
-        const { height: _, width: w } = getSvgDimensions(A, "16px", "16px");
-        a.iconHeight = _, a.iconWidth = w;
+    if (_) {
+      const j = find(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
+      if (j) {
+        a.icon = stringify([j]);
+        const { height: S, width: C } = getSvgDimensions(j, "16px", "16px");
+        a.iconHeight = S, a.iconWidth = C;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const C = a.inputType || "text";
-    C === "checkbox" ? set(a, "_type", "Checkbox") : C === "radio" && set(a, "_type", "Radio");
+    const w = a.inputType || "text";
+    w === "checkbox" ? set(a, "_type", "Checkbox") : w === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const C = stringify([r]);
-    return hasVideoEmbed(C) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(C)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = C, [a];
+    const w = stringify([r]);
+    return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (r.tagName === "svg") {
-    const C = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), A = get(C, "value") ? `[${get(C, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${_} h-${A}`, w)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((j = n.block) == null ? void 0 : j._type) === "Select")
+    const w = find(r.attributes, { key: "height" }), _ = find(r.attributes, { key: "width" }), j = get(w, "value") ? `[${get(w, "value")}px]` : "24px", S = get(_, "value") ? `[${get(_, "value")}px]` : "24px", C = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${S} h-${j}`, C)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((E = n.block) == null ? void 0 : E._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -7236,18 +7236,20 @@ const CoreBlock = ({
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const m = Object.entries(a).map(([x, b]) => {
-          const y = b, B = y.type || "partial", j = formatReadableName(B);
+        const m = Object.entries(a).map(([x, y]) => {
+          const b = y, B = b.type || "partial", E = formatReadableName(B);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(y.name || x),
-            description: y.description || "",
-            group: j,
+            label: formatReadableName(b.name || x),
+            description: b.description || "",
+            icon: Globe,
+            group: E,
             // Use formatted type as group
             category: "partial",
-            partialBlockId: x
+            partialBlockId: x,
             // Store the original ID as partialBlockId
+            _name: b.name
           };
         }), h = uniq(map(m, "group"));
         p({
@@ -7296,43 +7298,43 @@ const CoreBlock = ({
   );
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
   var v;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (k) => k._id === r)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, b] = useState(null), y = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (k) => k._id === r)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, y] = useState(null), b = useRef(null);
   useEffect(() => {
     const k = setTimeout(() => {
-      var E;
-      (E = u.current) == null || E.focus();
+      var A;
+      (A = u.current) == null || A.focus();
     }, 0);
     return () => clearTimeout(k);
   }, [g]), useEffect(() => {
-    d && (h("all"), b(null));
-  }, [d]), useEffect(() => (y.current = debounce((k) => {
+    d && (h("all"), y(null));
+  }, [d]), useEffect(() => (b.current = debounce((k) => {
     h(k);
   }, 500), () => {
-    y.current && y.current.cancel();
+    b.current && b.current.cancel();
   }), []);
   const B = useCallback((k) => {
-    b(k), y.current && y.current(k);
-  }, []), j = useCallback(() => {
-    b(null), y.current && y.current.cancel();
-  }, []), C = useCallback((k) => {
-    y.current && y.current.cancel(), h(k), b(null);
-  }, []), S = useMemo(
+    y(k), b.current && b.current(k);
+  }, []), E = useCallback(() => {
+    y(null), b.current && b.current.cancel();
+  }, []), w = useCallback((k) => {
+    b.current && b.current.cancel(), h(k), y(null);
+  }, []), _ = useMemo(
     () => d ? values(n).filter(
       (k) => {
-        var E, T;
-        return (((E = k.label) == null ? void 0 : E.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+        var A, T;
+        return (((A = k.label) == null ? void 0 : A.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
-  ), A = useMemo(
+  ), j = useMemo(
     () => d ? o.filter(
-      (k) => reject(filter(values(S), { group: k }), { hidden: !0 }).length > 0
+      (k) => reject(filter(values(_), { group: k }), { hidden: !0 }).length > 0
     ) : o.filter((k) => reject(filter(values(n), { group: k }), { hidden: !0 }).length > 0),
-    [n, S, o, d]
-  ), _ = useMemo(
-    () => sortBy(A, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
-    [A]
-  ), w = useMemo(() => m === "all" ? S : filter(values(S), { group: m }), [S, m]), L = useMemo(() => m === "all" ? _ : [m], [_, m]);
+    [n, _, o, d]
+  ), S = useMemo(
+    () => sortBy(j, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
+    [j]
+  ), C = useMemo(() => m === "all" ? _ : filter(values(_), { group: m }), [_, m]), L = useMemo(() => m === "all" ? S : [m], [S, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl 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,
@@ -7346,31 +7348,31 @@ const CoreBlock = ({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      _.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => C("all"),
+            onClick: () => w("all"),
             onMouseEnter: () => B("all"),
-            onMouseLeave: j,
+            onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        _.map((k) => /* @__PURE__ */ jsx(
+        S.map((k) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => C(k),
+            onClick: () => w(k),
             onMouseEnter: () => B(k),
-            onMouseLeave: j,
+            onMouseLeave: E,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || x === k ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
             children: capitalize(i(k.toLowerCase()))
           },
           `sidebar-${k}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: A.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("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: j.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,
@@ -7379,17 +7381,17 @@ const CoreBlock = ({
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
           reject(
-            m === "all" ? filter(values(w), { group: k }) : values(w),
+            m === "all" ? filter(values(C), { group: k }) : values(C),
             { hidden: !0 }
-          ).map((E) => /* @__PURE__ */ jsx(
+          ).map((A) => /* @__PURE__ */ jsx(
             CoreBlock,
             {
               parentId: r,
               position: a,
-              block: E,
-              disabled: !canAcceptChildBlock(f, E.type) || !canBeNestedInside(f, E.type)
+              block: A,
+              disabled: !canAcceptChildBlock(f, A.type) || !canBeNestedInside(f, A.type)
             },
-            E.type
+            A.type
           ))
         ) })
       ] }, k)) }) }) })
@@ -7491,17 +7493,17 @@ const BlockCard = ({
   position: a = -1
 }) => {
   const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), x = (B) => {
-    const j = has(B, "styles_attrs.data-page-section");
-    return B._type === "Box" && j;
-  }, b = useCallback(
+    const E = has(B, "styles_attrs.data-page-section");
+    return B._type === "Box" && E;
+  }, y = useCallback(
     async (B) => {
       if (B.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const j = await c(n, o);
-      isEmpty(j) || p(syncBlocksWithDefaults(j), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const E = await c(n, o);
+      isEmpty(E) || p(syncBlocksWithDefaults(E), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   );
@@ -7510,21 +7512,21 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : b,
+        } : y,
         draggable: m ? "true" : "false",
         onDragStart: async (B) => {
-          const j = await c(n, o);
-          let C = r;
-          if (x(first(j)) && (C = null), !isEmpty(j)) {
-            const S = { blocks: j, uiLibrary: !0, parent: C };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
-              const A = new Image();
-              A.src = o.preview, A.onload = () => {
-                B.dataTransfer.setDragImage(A, 0, 0);
+          const E = await c(n, o);
+          let w = r;
+          if (x(first(E)) && (w = null), !isEmpty(E)) {
+            const _ = { blocks: E, uiLibrary: !0, parent: w };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
+              const j = new Image();
+              j.src = o.preview, j.onload = () => {
+                B.dataTransfer.setDragImage(j, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            h(S), setTimeout(() => {
+            h(_), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7556,9 +7558,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((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [f, m] = useState("Hero"), h = get(g, f, []), x = useRef(null), { t: b } = useTranslation(), y = (C) => {
+  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"), [f, m] = useState("Hero"), h = get(g, f, []), x = useRef(null), { t: y } = useTranslation(), b = (w) => {
     x.current && (clearTimeout(x.current), x.current = null), x.current = setTimeout(() => {
-      x.current && m(C);
+      x.current && m(w);
     }, 300);
   };
   if (u)
@@ -7566,30 +7568,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const B = filter(h, (C, S) => S % 2 === 0), j = filter(h, (C, S) => S % 2 === 1);
+  const B = filter(h, (w, _) => _ % 2 === 0), E = filter(h, (w, _) => _ % 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 }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: y("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(g, (C, S) => /* @__PURE__ */ jsxs(
+          map(g, (w, _) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => y(S),
+              onMouseEnter: () => b(_),
               onMouseLeave: () => clearTimeout(x.current),
-              onClick: () => m(S),
+              onClick: () => m(_),
               className: cn$1(
                 "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",
-                S === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                _ === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(b(S.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(y(_.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            S
+            _
           ))
         ) })
       ] })
@@ -7602,10 +7604,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
+              B.map((w) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: w, library: d }))
             ) }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              j.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
+              E.map((w) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: w, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsx("br", {}),
@@ -7615,65 +7617,46 @@ const BlockCard = ({
       }
     )
   ] }) }) });
-}, UILibrariesPanel = ({ parentId: o, position: n }) => /* @__PURE__ */ jsx(UILibrarySection, { parentId: o, position: n }), placeholderStyle = {
-  display: "flex",
-  alignItems: "center",
-  zIndex: 1
-}, DefaultCursor = React__default.memo(function({ top: n, left: r }) {
-  const a = {
-    position: "absolute",
-    pointerEvents: "none",
-    top: n + "px",
-    left: r + "px",
-    right: 0
-  };
-  return /* @__PURE__ */ jsx("div", { style: { ...placeholderStyle, ...a }, children: /* @__PURE__ */ jsx("div", { className: "h-0.5 flex-1 rounded-[1px] bg-green-500" }) });
-}), Overlay = memo(function({ children: n, isDragging: r }) {
-  return r ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed left-0 top-0 z-[100] h-full w-full", children: n }) : null;
-}), DefaultDragPreview = memo(({ id: o, isDragging: n, mouse: r }) => {
-  const [a] = useBlocksStore(), l = useMemo(() => a.find((c) => c._id === o), [a, o]), i = useMemo(
-    () => ({
-      transform: `translate(${(r == null ? void 0 : r.x) - 10}px, ${(r == null ? void 0 : r.y) - 10}px)`
-    }),
-    [r]
-  );
-  return r ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Overlay, { isDragging: n, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "pointer-events-none absolute z-50 rounded border border-border bg-gray-100/80 font-semibold text-blue-600 shadow-md dark:border-gray-700 dark:bg-gray-800",
-      style: i,
-      children: /* @__PURE__ */ jsxs("button", { type: "button", className: "flex !cursor-grab items-center p-0.5", "aria-label": `Type: ${l == null ? void 0 : l._type}`, children: [
-        /* @__PURE__ */ jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsx(TypeIcon, { type: l == null ? void 0 : l._type }) }),
-        /* @__PURE__ */ jsx("div", { className: "ml-2 truncate text-[11px]", children: (l == null ? void 0 : l._name) || (l == null ? void 0 : l._type) })
-      ] })
-    }
-  ) }) }) : /* @__PURE__ */ jsx("div", { className: "hidden" });
-}), PasteAtRootContextMenu = ({ parentContext: o, setParentContext: n }) => {
+}, UILibrariesPanel = ({ parentId: o, position: n }) => /* @__PURE__ */ jsx(UILibrarySection, { parentId: o, position: n });
+function BiCollapseVertical(o) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M12 7.59 7.05 2.64 5.64 4.05 12 10.41l6.36-6.36-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95 1.41-1.41L12 13.59l-6.36 6.36z" }, child: [] }] })(o);
+}
+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);
+}
+function BsLightningFill(o) {
+  return GenIcon({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641z" }, child: [] }] })(o);
+}
+function BsThreeDotsVertical(o) {
+  return GenIcon({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }, child: [] }] })(o);
+}
+function TbEyeDown(o) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }, child: [] }, { tag: "path", attr: { d: "M12 18c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" }, child: [] }, { tag: "path", attr: { d: "M19 16v6" }, child: [] }, { tag: "path", attr: { d: "M22 19l-3 3l-3 -3" }, child: [] }] })(o);
+}
+function VscJson(o) {
+  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 16 16", fill: "currentColor" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z" }, child: [] }] })(o);
+}
+const PasteAtRootContextMenu = ({ parentContext: o, setParentContext: n }) => {
   const { t: r } = useTranslation(), { canPaste: a, pasteBlocks: l } = usePasteBlocks();
   return useEffect(() => {
     a("root") || n(null);
-  }, [a("root")]), o && a("root") && /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: { position: "absolute", top: o.y - 75, left: o.x - 56 },
-      onMouseLeave: () => n(null),
-      className: "w-28 rounded-md border bg-white p-1 shadow-xl",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex cursor-pointer items-center gap-x-4 rounded px-2 py-1 text-xs hover:bg-blue-50",
-          onClick: () => {
-            l("root"), n(null);
-          },
-          children: [
-            /* @__PURE__ */ jsx(CardStackIcon, {}),
-            " ",
-            r("Paste")
-          ]
-        }
-      )
-    }
-  );
+  }, [a("root")]), !o || !a("root") ? null : /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: o.y - 75, left: o.x - 56 }, children: /* @__PURE__ */ jsxs(DropdownMenu, { open: !0, onOpenChange: () => n(null), children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "hidden" }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-28 p-1 text-xs", children: /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        className: "flex items-center gap-x-4 text-xs",
+        onClick: () => {
+          l("root"), n(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx(CardStackIcon, {}),
+          " ",
+          r("Paste")
+        ]
+      }
+    ) })
+  ] }) });
 }, CopyPasteBlocks = () => {
   const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a] = useCopyBlockIds(), { t: l } = useTranslation(), i = useSelectedBlock(), c = useCallback(() => {
     const d = n.map((p) => {
@@ -7687,7 +7670,7 @@ const BlockCard = ({
   }, [n, o, a]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
-      ContextMenuItem,
+      DropdownMenuItem,
       {
         disabled: !canDuplicateBlock(i == null ? void 0 : i._type),
         onClick: c,
@@ -7700,7 +7683,7 @@ const BlockCard = ({
       }
     ),
     /* @__PURE__ */ jsxs(
-      ContextMenuItem,
+      DropdownMenuItem,
       {
         className: "flex items-center gap-x-4 text-xs",
         onClick: () => {
@@ -7716,7 +7699,7 @@ const BlockCard = ({
   ] });
 }, CutBlocks = () => {
   const [o] = useSelectedBlockIds(), [, n] = useCutBlockIds(), { t: r } = useTranslation();
-  return /* @__PURE__ */ jsxs(ContextMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => n(o), children: [
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-x-4 text-xs", onClick: () => n(o), children: [
     /* @__PURE__ */ jsx(ScissorsIcon, {}),
     " ",
     r("Cut")
@@ -7724,7 +7707,7 @@ const BlockCard = ({
 }, RemoveBlocks = () => {
   const [o] = useSelectedBlockIds(), n = useRemoveBlocks(), r = useSelectedBlock(), { t: a } = useTranslation();
   return /* @__PURE__ */ jsxs(
-    ContextMenuItem,
+    DropdownMenuItem,
     {
       disabled: !canDeleteBlock(r == null ? void 0 : r._type),
       className: "flex items-center gap-x-4 text-xs",
@@ -7736,45 +7719,106 @@ const BlockCard = ({
       ]
     }
   );
-}, BlockContextMenuContent = () => {
-  const { t: o } = useTranslation(), [n] = useSelectedBlockIds(), r = useDuplicateBlocks(), a = useSelectedBlock(), l = useCallback(() => {
-    r(n);
-  }, [n, r]);
-  return /* @__PURE__ */ jsxs(ContextMenuContent, { className: "border-border text-xs", children: [
+}, RenameBlock = ({ node: o }) => {
+  const { t: n } = useTranslation();
+  return console.log(o), /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      onClick: (r) => {
+        r.stopPropagation(), console.log(o), o.edit(), o.deselect();
+      },
+      className: "flex items-center gap-x-4 text-xs",
+      children: [
+        /* @__PURE__ */ jsx(PencilIcon, { className: "h-4 w-4" }),
+        " ",
+        n("Rename")
+      ]
+    }
+  );
+}, BlockContextMenuContent = ({ node: o }) => {
+  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), i = useCallback(() => {
+    a(r);
+  }, [r, a]);
+  return /* @__PURE__ */ jsxs(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: [
     /* @__PURE__ */ jsxs(
-      ContextMenuItem,
+      DropdownMenuItem,
       {
-        disabled: !canAddChildBlock(a == null ? void 0 : a._type),
+        disabled: !canAddChildBlock(l == null ? void 0 : l._type),
         className: "flex items-center gap-x-4 text-xs",
-        onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, a),
+        onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, l),
         children: [
           /* @__PURE__ */ jsx(PlusIcon$1, { size: "14" }),
           " ",
-          o("Add block")
+          n("Add block")
         ]
       }
     ),
     /* @__PURE__ */ jsxs(
-      ContextMenuItem,
+      DropdownMenuItem,
       {
-        disabled: !canDuplicateBlock(a == null ? void 0 : a._type),
+        disabled: !canDuplicateBlock(l == null ? void 0 : l._type),
         className: "flex items-center gap-x-4 text-xs",
-        onClick: l,
+        onClick: i,
         children: [
           /* @__PURE__ */ jsx(CardStackPlusIcon, {}),
           " ",
-          o("Duplicate")
+          n("Duplicate")
         ]
       }
     ),
+    /* @__PURE__ */ jsx(RenameBlock, { node: o }),
     /* @__PURE__ */ jsx(CutBlocks, {}),
     /* @__PURE__ */ jsx(CopyPasteBlocks, {}),
     /* @__PURE__ */ jsx(RemoveBlocks, {})
   ] });
-}, BlockContextMenu = ({ children: o }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ContextMenu, { children: [
-  /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: !0, children: o }),
-  /* @__PURE__ */ jsx(BlockContextMenuContent, {})
-] }) }), defaultShortcuts = [
+}, BlockMoreOptions = ({ children: o, id: n, node: r }) => {
+  const [, a] = useSelectedBlockIds();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      onOpenChange: (l) => {
+        l && a([n]);
+      },
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: o }),
+        /* @__PURE__ */ jsx(BlockContextMenuContent, { node: r })
+      ]
+    }
+  ) });
+}, placeholderStyle = {
+  display: "flex",
+  alignItems: "center",
+  zIndex: 1
+}, DefaultCursor = React__default.memo(function({ top: n, left: r }) {
+  const a = {
+    position: "absolute",
+    pointerEvents: "none",
+    top: n + "px",
+    left: r + "px",
+    right: 0
+  };
+  return /* @__PURE__ */ jsx("div", { style: { ...placeholderStyle, ...a }, children: /* @__PURE__ */ jsx("div", { className: "h-0.5 flex-1 rounded-[1px] bg-green-500" }) });
+}), Overlay = memo(function({ children: n, isDragging: r }) {
+  return r ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none fixed left-0 top-0 z-[100] h-full w-full", children: n }) : null;
+}), DefaultDragPreview = memo(({ id: o, isDragging: n, mouse: r }) => {
+  const [a] = useBlocksStore(), l = useMemo(() => a.find((c) => c._id === o), [a, o]), i = useMemo(
+    () => ({
+      transform: `translate(${(r == null ? void 0 : r.x) - 10}px, ${(r == null ? void 0 : r.y) - 10}px)`
+    }),
+    [r]
+  );
+  return r ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Overlay, { isDragging: n, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "pointer-events-none absolute z-50 rounded border border-border bg-gray-100/80 font-semibold text-blue-600 shadow-md dark:border-gray-700 dark:bg-gray-800",
+      style: i,
+      children: /* @__PURE__ */ jsxs("button", { type: "button", className: "flex !cursor-grab items-center p-0.5", "aria-label": `Type: ${l == null ? void 0 : l._type}`, children: [
+        /* @__PURE__ */ jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsx(TypeIcon, { type: l == null ? void 0 : l._type }) }),
+        /* @__PURE__ */ jsx("div", { className: "ml-2 truncate text-[11px]", children: (l == null ? void 0 : l._name) || (l == null ? void 0 : l._type) })
+      ] })
+    }
+  ) }) }) : /* @__PURE__ */ jsx("div", { className: "hidden" });
+}), defaultShortcuts = [
   { key: "ArrowDown", command: "selectNext" },
   { key: "ArrowUp", command: "selectPrev" },
   { key: "ArrowLeft", command: "selectParent", when: "isLeaf || isClosed" },
@@ -7808,59 +7852,43 @@ const selectParent = (o, n) => {
 }, close = (o, n) => {
   const r = o.selectedNodes[0];
   r.isInternal && n && r.close();
-};
-function VscJson(o) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 16 16", fill: "currentColor" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2.984V2h-.09c-.313 0-.616.062-.909.185a2.33 2.33 0 0 0-.775.53 2.23 2.23 0 0 0-.493.753v.001a3.542 3.542 0 0 0-.198.83v.002a6.08 6.08 0 0 0-.024.863c.012.29.018.58.018.869 0 .203-.04.393-.117.572v.001a1.504 1.504 0 0 1-.765.787 1.376 1.376 0 0 1-.558.115H2v.984h.09c.195 0 .38.04.556.121l.001.001c.178.078.329.184.455.318l.002.002c.13.13.233.285.307.465l.001.002c.078.18.117.368.117.566 0 .29-.006.58-.018.869-.012.296-.004.585.024.87v.001c.033.283.099.558.197.824v.001c.106.273.271.524.494.753.223.23.482.407.775.53.293.123.596.185.91.185H6v-.984h-.09c-.2 0-.387-.038-.563-.115a1.613 1.613 0 0 1-.457-.32 1.659 1.659 0 0 1-.309-.467c-.074-.18-.11-.37-.11-.573 0-.228.003-.453.011-.672.008-.228.008-.45 0-.665a4.639 4.639 0 0 0-.055-.64 2.682 2.682 0 0 0-.168-.609A2.284 2.284 0 0 0 3.522 8a2.284 2.284 0 0 0 .738-.955c.08-.192.135-.393.168-.602.033-.21.051-.423.055-.64.008-.22.008-.442 0-.666-.008-.224-.012-.45-.012-.678a1.47 1.47 0 0 1 .877-1.354 1.33 1.33 0 0 1 .563-.121H6zm4 10.032V14h.09c.313 0 .616-.062.909-.185.293-.123.552-.3.775-.53.223-.23.388-.48.493-.753v-.001c.1-.266.165-.543.198-.83v-.002c.028-.28.036-.567.024-.863-.012-.29-.018-.58-.018-.869 0-.203.04-.393.117-.572v-.001a1.502 1.502 0 0 1 .765-.787 1.38 1.38 0 0 1 .558-.115H14v-.984h-.09c-.196 0-.381-.04-.557-.121l-.001-.001a1.376 1.376 0 0 1-.455-.318l-.002-.002a1.415 1.415 0 0 1-.307-.465v-.002a1.405 1.405 0 0 1-.118-.566c0-.29.006-.58.018-.869a6.174 6.174 0 0 0-.024-.87v-.001a3.537 3.537 0 0 0-.197-.824v-.001a2.23 2.23 0 0 0-.494-.753 2.331 2.331 0 0 0-.775-.53 2.325 2.325 0 0 0-.91-.185H10v.984h.09c.2 0 .387.038.562.115.174.082.326.188.457.32.127.134.23.29.309.467.074.18.11.37.11.573 0 .228-.003.452-.011.672-.008.228-.008.45 0 .665.004.222.022.435.055.64.033.214.089.416.168.609a2.285 2.285 0 0 0 .738.955 2.285 2.285 0 0 0-.738.955 2.689 2.689 0 0 0-.168.602c-.033.21-.051.423-.055.64a9.15 9.15 0 0 0 0 .666c.008.224.012.45.012.678a1.471 1.471 0 0 1-.877 1.354 1.33 1.33 0 0 1-.563.121H10z" }, child: [] }] })(o);
-}
-function BsLightningFill(o) {
-  return GenIcon({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641z" }, child: [] }] })(o);
-}
-function TbEyeDown(o) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" }, child: [] }, { tag: "path", attr: { d: "M12 18c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" }, child: [] }, { tag: "path", attr: { d: "M19 16v6" }, child: [] }, { tag: "path", attr: { d: "M22 19l-3 3l-3 -3" }, child: [] }] })(o);
-}
-function BiCollapseVertical(o) {
-  return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "M12 7.59 7.05 2.64 5.64 4.05 12 10.41l6.36-6.36-1.41-1.41L12 7.59zM5.64 19.95l1.41 1.41L12 16.41l4.95 4.95 1.41-1.41L12 13.59l-6.36 6.36z" }, child: [] }] })(o);
-}
-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 R;
+}, currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
+  var P;
   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: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: B, handleClick: j } = o, C = (N) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: B, handleClick: E } = o, w = (N) => {
     N.stopPropagation(), !i.includes(m) && o.toggle();
-  }, S = (N) => {
+  }, _ = (N) => {
     N.isInternal && (p = N.isOpen, N.isOpen && N.close());
-  }, A = (N) => {
+  }, j = (N) => {
     N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
-  }, [_, w] = useAtom$1(currentAddSelection), L = () => {
+  }, [S, C] = useAtom$1(currentAddSelection), L = () => {
     var N;
-    v(), o.parent.isSelected || w((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+    v(), o.parent.isSelected || C((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, v = () => {
-    w(null);
+    C(null);
   }, k = (N) => {
-    v(), N.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), j(N);
+    v(), N.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), E(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      b && !o.isOpen && !y && !i.includes(m) && o.toggle();
+      y && !o.isOpen && !b && !i.includes(m) && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [b, o, y]);
-  const E = useMemo(() => {
+  }, [y, o, b]);
+  const A = useMemo(() => {
     const N = Object.keys(h), D = [];
     for (let M = 0; M < N.length; M++)
       if (N[M].endsWith("_attrs")) {
-        const P = h[N[M]], O = Object.keys(P).join("|");
+        const R = h[N[M]], O = Object.keys(R).join("|");
         O.match(/x-data/) && D.push("data"), O.match(/x-on/) && D.push("event"), O.match(/x-show|x-if/) && D.push("show");
       }
     return D;
   }, [h]), T = (N, D) => {
-    const M = d.contentDocument || d.contentWindow.document, P = M.querySelector(`[data-block-id=${N}]`);
-    P && P.setAttribute("data-drop", D);
-    const O = P.getBoundingClientRect(), $ = d.getBoundingClientRect();
-    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = P.offsetTop - $.top);
+    const M = d.contentDocument || d.contentWindow.document, R = M.querySelector(`[data-block-id=${N}]`);
+    R && R.setAttribute("data-drop", D);
+    const O = R.getBoundingClientRect(), $ = d.getBoundingClientRect();
+    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = R.offsetTop - $.top);
   }, I = (N) => {
     v();
     const D = get(o, "parent.id");
@@ -7881,7 +7909,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       }
     ),
     /* @__PURE__ */ jsx("br", {})
-  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+  ] }) : /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => g(m),
@@ -7890,8 +7918,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       style: n,
       "data-node-id": m,
       ref: i.includes(m) ? null : r,
-      onDragStart: () => S(o),
-      onDragEnd: () => A(o),
+      onDragStart: () => _(o),
+      onDragEnd: () => j(o),
       onDragOver: (N) => {
         N.preventDefault(), T(m, "yes");
       },
@@ -7902,7 +7930,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
         N.preventDefault(), T(m, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.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")) || ((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(
           "div",
           {
             onClick: (N) => {
@@ -7920,9 +7948,9 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
             className: cn$1(
               "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",
-              b && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === _ ? "bg-purple-100" : "",
-              y && "opacity-20",
+              y && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === S ? "bg-purple-100" : "",
+              b && "opacity-20",
               i.includes(m) ? "opacity-50" : ""
             ),
             children: [
@@ -7931,12 +7959,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: C, type: "button", children: /* @__PURE__ */ jsx(
-                      ChevronRight,
-                      {
-                        className: `h-3 w-3 stroke-[3] ${x ? "text-slate-200" : "text-slate-400"}`
-                      }
-                    ) })
+                    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"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
@@ -7950,9 +7973,9 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                       },
                       children: [
                         /* @__PURE__ */ jsx("span", { children: (h == null ? void 0 : h._name) || (h == null ? void 0 : h._type.split("/").pop()) }),
-                        E.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        E.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        E.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                        A.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        A.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        A.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                       ]
                     }
                   )
@@ -7995,14 +8018,15 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     }
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999]", side: "left", children: l("Hide block") })
-                ] })
+                ] }),
+                /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx(BsThreeDotsVertical, { size: "15" }) })
               ] })
             ]
           }
         )
       ]
     }
-  ) }) });
+  ) });
 }), Input = ({ node: o }) => {
   var n, r;
   return /* @__PURE__ */ jsx(
@@ -8653,8 +8677,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     (x = f.current) == null || x.focus();
   }, []);
   const h = (x) => {
-    const { usage: b } = x || {};
-    !l && b && g(b), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: y } = x || {};
+    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8960,8 +8984,11 @@ const AiAssistant = () => {
       /* @__PURE__ */ jsx(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), [f, m] = useState(""), h = useRef(null), x = useRef(null);
+}, AttrsEditor = React__default.memo(function o({
+  preloadedAttributes: n = [],
+  onAttributesChange: r
+}) {
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), y = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
@@ -8974,12 +9001,12 @@ const AiAssistant = () => {
       const S = [...a, { key: i, value: d }];
       r(S), l(a), c(""), p(""), m("");
     }
-  }, y = (S) => {
-    const A = a.filter((_, w) => w !== S);
-    r(A), l(A);
   }, B = (S) => {
+    const C = a.filter((L, v) => v !== S);
+    r(C), l(C);
+  }, E = (S) => {
     g(S), c(a[S].key), p(a[S].value);
-  }, j = () => {
+  }, w = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -8988,13 +9015,35 @@ const AiAssistant = () => {
       const S = [...a];
       S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), m("");
     }
-  };
+  }, _ = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
+  }, j = useCallback((S) => {
+    const C = (k) => /[.,!?;:]/.test(k), L = (k, A, T) => {
+      let I = "", P = "";
+      const N = A > 0 ? k[A - 1] : "", D = A < k.length ? k[A] : "";
+      return A > 0 && (N === "." || !C(N) && N !== " ") && (I = " "), A < k.length && !C(D) && D !== " " && (P = " "), {
+        text: I + T + P,
+        prefixLength: I.length,
+        suffixLength: P.length
+      };
+    }, v = x.current;
+    if (v) {
+      const k = v.selectionStart || 0, A = v.value || "", T = v.selectionEnd || k;
+      if (T > k) {
+        const M = `{{${S}}}`, { text: R } = L(A, k, M), O = A.slice(0, k) + R + A.slice(T);
+        p(O);
+        return;
+      }
+      const P = `{{${S}}}`, { text: N } = L(A, k, P), D = A.slice(0, k) + N + A.slice(k);
+      p(D);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? j() : b();
+          S.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -9017,7 +9066,10 @@ const AiAssistant = () => {
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: j })
+              ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
                 {
@@ -9029,9 +9081,7 @@ const AiAssistant = () => {
                   ref: x,
                   value: d,
                   onChange: (S) => p(S.target.value),
-                  onKeyDown: (S) => {
-                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? j() : b());
-                  },
+                  onKeyDown: _,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9043,16 +9093,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, C) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(A), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(C), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(C), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, C)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9230,7 +9280,7 @@ const ChooseLayout = ({ open: o, close: n }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-DutZ_viX.js"));
+}, TopBar = lazy(() => import("./Topbar-DZ2jHLv7.js"));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {
@@ -9261,21 +9311,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: m.map((x, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m.map((x, y) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === b ? "default" : "ghost",
+                    variant: o === y ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(b),
+                    onClick: () => u(y),
                     children: get(x, "icon", null)
                   },
-                  b
+                  y
                 ) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(x.label) }) })
-              ] }, "button" + b)) }),
+              ] }, "button" + y)) }),
               /* @__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, b) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${b}`)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((x, y) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${y}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,