@chaibuilder/sdk 2.0.0-beta.60 → 2.0.0-beta.61

package/dist/core.js

@@ -6,7 +6,7 @@ import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, Component, Children, useMemo, useState, useRef, Suspense, memo, createElement, lazy } from "react";
 import { ag as useToast, S as Skeleton, B as Button, L as Label, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, T as Textarea, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, C as Card, x as CardHeader, E as CardDescription, F as CardContent, y as CardFooter, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, j as AlertDialog, k as AlertDialogTrigger, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, b as Switch, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-FCyNTUkl.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
-import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, memoize, forEach, unset, chunk, cloneDeep, pick, throttle, reverse, startCase, debounce, capitalize, split, findIndex, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, flatMapDeep, some, groupBy, uniq, sortBy, toUpper, round } from "lodash-es";
+import { has, get, find, filter, flatten, map, omit, isString, includes, without, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, memoize, forEach, unset, chunk, cloneDeep, pick, throttle, reverse, startCase, debounce, capitalize, split, findIndex, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, isFunction as isFunction$1, flatMapDeep, some, groupBy, uniq, sortBy, reject, toUpper, round } from "lodash-es";
 import { Provider } from "react-wrap-balancer";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { useTranslation, initReactI18next } from "react-i18next";
@@ -28,7 +28,7 @@ import forms from "@tailwindcss/forms";
 import aspectRatio from "@tailwindcss/aspect-ratio";
 import containerQueries from "@tailwindcss/container-queries";
 import { twMerge } from "tailwind-merge";
-import { S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-DtEft2kY.js";
+import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import ReactDOM from "react-dom";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
@@ -107,25 +107,25 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     return A || (A = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, r(B, A), i == null || i(B, I)), A;
   }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), m = () => {
     var B;
-    const A = [], N = (T) => {
+    const A = [], N = (L) => {
       try {
-        T();
+        L();
       } catch (S) {
         A.push(S);
       }
     };
     do {
       (B = I[INTERNAL_flushStoreHook]) == null || B.call(I);
-      const T = /* @__PURE__ */ new Set(), S = T.add.bind(T);
-      u.forEach((L) => {
+      const L = /* @__PURE__ */ new Set(), S = L.add.bind(L);
+      u.forEach((T) => {
         var D;
-        return (D = L.m) == null ? void 0 : D.l.forEach(S);
-      }), u.clear(), x.forEach(S), x.clear(), g.forEach(S), g.clear(), T.forEach(N), u.size && w();
+        return (D = T.m) == null ? void 0 : D.l.forEach(S);
+      }), u.clear(), x.forEach(S), x.clear(), g.forEach(S), g.clear(), L.forEach(N), u.size && C();
     } while (u.size || x.size || g.size);
     if (A.length)
       throw A[0];
   }, f = (B, A, N) => {
-    const T = "v" in A, S = A.v, L = isPendingPromise(A.v) ? A.v : null;
+    const L = "v" in A, S = A.v, T = isPendingPromise(A.v) ? A.v : null;
     if (isPromiseLike$2(N)) {
       patchPromiseForCancelability(N);
       for (const D of A.d.keys())
@@ -133,7 +133,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       A.v = N;
     } else
       A.v = N;
-    delete A.e, (!T || !Object.is(S, A.v)) && (++A.n, L && cancelPromise(L, N));
+    delete A.e, (!L || !Object.is(S, A.v)) && (++A.n, T && cancelPromise(T, N));
   }, h = (B) => {
     var A;
     const N = d(B);
@@ -146,10 +146,10 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     )))
       return N;
     N.d.clear();
-    let T = !0;
+    let L = !0;
     const S = () => {
-      N.m && (k(B, N), w(), m());
-    }, L = (M) => {
+      N.m && (k(B, N), C(), m());
+    }, T = (M) => {
       if (isSelfAtom(B, M)) {
         const U = d(M);
         if (!isAtomStateInitialized(U))
@@ -163,7 +163,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       try {
         return returnAtomValue(H);
       } finally {
-        addDependency(B, N, M, H), T || S();
+        addDependency(B, N, M, H), L || S();
       }
     };
     let D, $;
@@ -173,58 +173,58 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       },
       get setSelf() {
         return !$ && isActuallyWritableAtom(B) && ($ = (...M) => {
-          if (!T)
+          if (!L)
             return E(B, ...M);
         }), $;
       }
     };
     try {
-      const M = a(B, L, O);
+      const M = a(B, T, O);
       return f(B, N, M), isPromiseLike$2(M) && ((A = M.onCancel) == null || A.call(M, () => D == null ? void 0 : D.abort()), M.then(S, S)), N;
     } catch (M) {
       return delete N.v, N.e = M, ++N.n, N;
     } finally {
-      T = !1;
+      L = !1;
     }
   }, b = (B) => returnAtomValue(h(B)), y = (B) => {
     var A;
     const N = /* @__PURE__ */ new Map();
-    for (const T of ((A = B.m) == null ? void 0 : A.t) || []) {
-      const S = d(T);
-      S.m && N.set(T, S);
+    for (const L of ((A = B.m) == null ? void 0 : A.t) || []) {
+      const S = d(L);
+      S.m && N.set(L, S);
     }
-    for (const T of B.p)
+    for (const L of B.p)
       N.set(
-        T,
-        d(T)
+        L,
+        d(L)
       );
     return N;
   }, R = (B) => {
     const A = [B];
     for (; A.length; ) {
       const N = A.pop();
-      for (const [T, S] of y(N))
-        p.has(T) || (p.set(T, S.n), A.push(S));
+      for (const [L, S] of y(N))
+        p.has(L) || (p.set(L, S.n), A.push(S));
     }
-  }, w = () => {
+  }, C = () => {
     var B;
-    const A = [], N = /* @__PURE__ */ new WeakSet(), T = /* @__PURE__ */ new WeakSet(), S = Array.from(u);
+    const A = [], N = /* @__PURE__ */ new WeakSet(), L = /* @__PURE__ */ new WeakSet(), S = Array.from(u);
     for (; S.length; ) {
-      const [L, D] = S[S.length - 1];
-      if (T.has(L)) {
+      const [T, D] = S[S.length - 1];
+      if (L.has(T)) {
         S.pop();
         continue;
       }
-      if (N.has(L)) {
-        p.get(L) === D.n ? A.push([L, D, D.n]) : (p.delete(L), u.set(L, D)), T.add(L), S.pop();
+      if (N.has(T)) {
+        p.get(T) === D.n ? A.push([T, D, D.n]) : (p.delete(T), u.set(T, D)), L.add(T), S.pop();
         continue;
       }
-      N.add(L);
+      N.add(T);
       for (const [$, O] of y(D))
         N.has($) || S.push([$, O]);
     }
-    for (let L = A.length - 1; L >= 0; --L) {
-      const [D, $, O] = A[L];
+    for (let T = A.length - 1; T >= 0; --T) {
+      const [D, $, O] = A[T];
       let M = !1;
       for (const H of $.d.keys())
         if (H !== D && u.has(H)) {
@@ -235,24 +235,24 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     }
   }, j = (B, ...A) => {
     let N = !0;
-    const T = (L) => returnAtomValue(h(L)), S = (L, ...D) => {
+    const L = (T) => returnAtomValue(h(T)), S = (T, ...D) => {
       var $;
-      const O = d(L);
+      const O = d(T);
       try {
-        if (isSelfAtom(B, L)) {
-          if (!hasInitialValue(L))
+        if (isSelfAtom(B, T)) {
+          if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const M = O.n, H = D[0];
-          f(L, O, H), k(L, O), M !== O.n && (u.set(L, O), ($ = O.u) == null || $.call(O), R(O));
+          f(T, O, H), k(T, O), M !== O.n && (u.set(T, O), ($ = O.u) == null || $.call(O), R(O));
           return;
         } else
-          return j(L, ...D);
+          return j(T, ...D);
       } finally {
-        N || (w(), m());
+        N || (C(), m());
       }
     };
     try {
-      return l(B, T, S, ...A);
+      return l(B, L, S, ...A);
     } finally {
       N = !1;
     }
@@ -260,55 +260,55 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     try {
       return j(B, ...A);
     } finally {
-      w(), m();
+      C(), m();
     }
   }, k = (B, A) => {
     var N;
     if (A.m && !isPendingPromise(A.v)) {
-      for (const [T, S] of A.d)
-        if (!A.m.d.has(T)) {
-          const L = d(T);
-          C(T, L).t.add(B), A.m.d.add(T), S !== L.n && (u.set(T, L), (N = L.u) == null || N.call(L), R(L));
+      for (const [L, S] of A.d)
+        if (!A.m.d.has(L)) {
+          const T = d(L);
+          w(L, T).t.add(B), A.m.d.add(L), S !== T.n && (u.set(L, T), (N = T.u) == null || N.call(T), R(T));
         }
-      for (const T of A.m.d || [])
-        if (!A.d.has(T)) {
-          A.m.d.delete(T);
-          const S = _(T, d(T));
+      for (const L of A.m.d || [])
+        if (!A.d.has(L)) {
+          A.m.d.delete(L);
+          const S = _(L, d(L));
           S == null || S.t.delete(B);
         }
     }
-  }, C = (B, A) => {
+  }, w = (B, A) => {
     var N;
     if (!A.m) {
       h(B);
-      for (const T of A.d.keys())
-        C(T, d(T)).t.add(B);
+      for (const L of A.d.keys())
+        w(L, d(L)).t.add(B);
       if (A.m = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(A.d.keys()),
         t: /* @__PURE__ */ new Set()
       }, (N = A.h) == null || N.call(A), isActuallyWritableAtom(B)) {
-        const T = A.m, S = () => {
-          let L = !0;
+        const L = A.m, S = () => {
+          let T = !0;
           const D = (...$) => {
             try {
               return j(B, ...$);
             } finally {
-              L || (w(), m());
+              T || (C(), m());
             }
           };
           try {
             const $ = c(B, D);
-            $ && (T.u = () => {
-              L = !0;
+            $ && (L.u = () => {
+              T = !0;
               try {
                 $();
               } finally {
-                L = !1;
+                T = !1;
               }
             });
           } finally {
-            L = !1;
+            T = !1;
           }
         };
         g.add(S);
@@ -317,15 +317,15 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     return A.m;
   }, _ = (B, A) => {
     var N;
-    if (A.m && !A.m.l.size && !Array.from(A.m.t).some((T) => {
+    if (A.m && !A.m.l.size && !Array.from(A.m.t).some((L) => {
       var S;
-      return (S = d(T).m) == null ? void 0 : S.d.has(B);
+      return (S = d(L).m) == null ? void 0 : S.d.has(B);
     })) {
-      const T = A.m.u;
-      T && x.add(T), delete A.m, (N = A.h) == null || N.call(A);
+      const L = A.m.u;
+      L && x.add(L), delete A.m, (N = A.h) == null || N.call(A);
       for (const S of A.d.keys()) {
-        const L = _(S, d(S));
-        L == null || L.t.delete(B);
+        const T = _(S, d(S));
+        T == null || T.t.delete(B);
       }
       return;
     }
@@ -334,7 +334,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     get: b,
     set: E,
     sub: (B, A) => {
-      const N = d(B), S = C(B, N).l;
+      const N = d(B), S = w(B, N).l;
       return S.add(A), m(), () => {
         S.delete(A), _(B, N), m();
       };
@@ -382,24 +382,24 @@ function splitAtom(o, n) {
             x[f] = b;
             return;
           }
-          const y = (w) => {
-            const j = w(l), E = w(o), C = a(E, j == null ? void 0 : j.arr).keyList.indexOf(h);
-            if (C < 0 || C >= E.length) {
+          const y = (C) => {
+            const j = C(l), E = C(o), w = a(E, j == null ? void 0 : j.arr).keyList.indexOf(h);
+            if (w < 0 || w >= E.length) {
               const _ = c[a(c).keyList.indexOf(h)];
               if (_)
                 return _;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return E[C];
-          }, R = (w, j, E) => {
-            const k = w(l), C = w(o), P = a(C, k == null ? void 0 : k.arr).keyList.indexOf(h);
-            if (P < 0 || P >= C.length)
+            return E[w];
+          }, R = (C, j, E) => {
+            const k = C(l), w = C(o), P = a(w, k == null ? void 0 : k.arr).keyList.indexOf(h);
+            if (P < 0 || P >= w.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(E) ? E(C[P]) : E;
-            Object.is(C[P], v) || j(o, [
-              ...C.slice(0, P),
+            const v = isFunction(E) ? E(w[P]) : E;
+            Object.is(w[P], v) || j(o, [
+              ...w.slice(0, P),
               v,
-              ...C.slice(P + 1)
+              ...w.slice(P + 1)
             ]);
           };
           x[f] = isWritable(o) ? atom(y, R) : atom(y);
@@ -1309,8 +1309,8 @@ const useBlocksStoreManager = () => {
       const R = map(h, (j) => {
         const k = n.find((P) => P._id === j)._parent || null, _ = n.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(j);
         return { _id: j, oldParent: k, oldPosition: _ };
-      }), w = R.find(({ _id: j }) => j === h[0]);
-      w && w.oldParent === b && w.oldPosition === y || (i(h, b, y), o({
+      }), C = R.find(({ _id: j }) => j === h[0]);
+      C && C.oldParent === b && C.oldPosition === y || (i(h, b, y), o({
         undo: () => each(R, ({ _id: j, oldParent: E, oldPosition: k }) => {
           i([j], E, k);
         }),
@@ -1324,8 +1324,8 @@ const useBlocksStoreManager = () => {
       });
     },
     removeBlocks: (h) => {
-      var w;
-      const b = (w = first(h)) == null ? void 0 : w._parent, R = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(h));
+      var C;
+      const b = (C = first(h)) == null ? void 0 : C._parent, R = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(h));
       l(map(h, "_id")), o({
         undo: () => a(h, b, R),
         redo: () => l(map(h, "_id"))
@@ -1334,17 +1334,17 @@ const useBlocksStoreManager = () => {
     updateBlocks: (h, b, y) => {
       let R = [];
       if (y)
-        R = map(h, (w) => ({ _id: w, ...y }));
+        R = map(h, (C) => ({ _id: C, ...y }));
       else {
-        const w = keys(b);
+        const C = keys(b);
         R = map(h, (j) => {
-          const E = n.find((C) => C._id === j), k = { _id: j };
-          return each(w, (C) => k[C] = E[C]), k;
+          const E = n.find((w) => w._id === j), k = { _id: j };
+          return each(C, (w) => k[w] = E[w]), k;
         });
       }
-      c(map(h, (w) => ({ _id: w, ...b }))), o({
+      c(map(h, (C) => ({ _id: C, ...b }))), o({
         undo: () => c(R),
-        redo: () => c(map(h, (w) => ({ _id: w, ...b })))
+        redo: () => c(map(h, (C) => ({ _id: C, ...b })))
       });
     },
     updateBlocksRuntime: (h, b) => {
@@ -1359,8 +1359,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (h) => {
       let b = [];
       b = map(h, (y) => {
-        const R = keys(y), w = n.find((E) => E._id === y._id), j = {};
-        return each(R, (E) => j[E] = w[E]), j;
+        const R = keys(y), C = n.find((E) => E._id === y._id), j = {};
+        return each(R, (E) => j[E] = C[E]), j;
       }), c(h), o({
         undo: () => c(b),
         redo: () => c(h)
@@ -2527,10 +2527,7 @@ import.meta.vitest && test("removeDuplicateClasses (tailwind classes) at higher
 });
 const selectedStylingBlocksAtom = atom$1([]);
 selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
-const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), getSplitClasses$1 = (o) => {
-  const n = o.replace(STYLES_KEY, "").split(",");
-  return { baseClasses: n[0], classes: n[1] };
-}, addClassesToBlocksAtom = atom$1(null, (o, n, { blockIds: r, newClasses: a }) => {
+const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), addClassesToBlocksAtom = atom$1(null, (o, n, { blockIds: r, newClasses: a }) => {
   const l = filter(
     o(pageBlocksAtomsAtom),
     (c) => (
@@ -2539,7 +2536,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { classes: u } = getSplitClasses$1(p);
+    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { classes: u } = getSplitChaiClasses(p);
     return {
       ids: [d._id],
       props: {
@@ -2691,9 +2688,6 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
 }, previewModeAtom = atom$1(!1), usePreviewMode = () => {
   const [o, n] = useAtom$1(previewModeAtom);
   return [o, n];
-}, getSplitClasses = (o) => {
-  const n = o.replace(STYLES_KEY, "").split(",");
-  return { baseClasses: n[0], classes: n[1] };
 }, removeClassFromBlocksAtom = atom$1(null, (o, n, { blockIds: r, fullClasses: a }) => {
   const l = first(o(selectedStylingBlocksAtom)), i = filter(
     o(pageBlocksAtomsAtom),
@@ -2704,7 +2698,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   );
   return map(i, (c) => {
     const d = o(c), p = a;
-    let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
+    let { classes: u, baseClasses: x } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (g) => {
       const m = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       u = u.replace(f, " ").replace(/\s+/g, " ").trim();
@@ -2732,8 +2726,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
 }, selectedBlockAllClassesAtom = atom$1((o) => {
   const n = first(o(selectedStylingBlocksAtom)), r = o(selectedBlockAtom);
   if (!n || n.blockId !== get(r, "_id", null)) return [];
-  const l = get(r, n.prop, `${STYLES_KEY},`).replace(STYLES_KEY, "").split(",").join(" ");
-  return filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
+  const a = get(r, n.prop, `${STYLES_KEY},`), { classes: l } = getSplitChaiClasses(a);
+  return console.log("classes", l), filter(map(l.trim().split(" "), constructClassObject), (i) => !isNull(i));
 }), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom$1((o) => {
   const n = o(canvasBreakpointAtom), r = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(n);
   let i = filter(o(selectedBlockAllClassesAtom), { mod: r });
@@ -3129,7 +3123,11 @@ const getBlockWithChildren = (o, n) => {
     const h = cloneDeep(f.find((b) => b._id === m));
     for (const b in h) {
       const y = h[b];
-      typeof y == "string" && startsWith(y, STYLES_KEY) ? h[b] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : b !== "_id" && delete h[b];
+      if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
+        const { baseClasses: R, classes: C } = getSplitChaiClasses(y);
+        h[b] = compact(flattenDeep([R, C])).join(" ");
+      } else
+        b !== "_id" && delete h[b];
     }
     return h;
   };
@@ -3139,21 +3137,21 @@ const getBlockWithChildren = (o, n) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, R = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [g(f, d)], w = await l(m, addLangToPrompt(h, x, m), R, y), { blocks: j, error: E } = w;
+            const y = p === u ? "" : p, R = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [g(f, d)], C = await l(m, addLangToPrompt(h, x, m), R, y), { blocks: j, error: E } = C;
             if (E) {
               a(E);
               return;
             }
             if (m === "styles") {
-              const k = j.map((C) => {
-                for (const _ in C)
-                  _ !== "_id" && (C[_] = `${STYLES_KEY},${C[_]}`);
-                return C;
+              const k = j.map((w) => {
+                for (const _ in w)
+                  _ !== "_id" && (w[_] = `${STYLES_KEY},${w[_]}`);
+                return w;
               });
               c(k);
             } else
               i(j);
-            b && b(w);
+            b && b(C);
           } catch (y) {
             a(y);
           } finally {
@@ -3462,8 +3460,8 @@ const useDnd = () => {
       var E;
       const f = dropTarget, b = getOrientation(f) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const y = d, R = f.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === R || !w) {
+      const y = d, R = f.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === R || !C) {
         g();
         return;
       }
@@ -3678,8 +3676,8 @@ function RuntimePropsBlock(o) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(o.component, { ...o.props, ...r }) });
 }
 const useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), generateClassNames = memoize((o) => {
-  const n = o.replace(STYLES_KEY, "").split(",");
-  return twMerge(n[0], n[1]);
+  const { baseClasses: n, classes: r } = getSplitChaiClasses(o);
+  return twMerge(n, r);
 });
 function getElementAttrs(o, n) {
   return get(o, `${n}_attrs`, {});
@@ -3734,7 +3732,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
       }
       const y = getRegisteredChaiBlock(m._type), R = get(y, "component", null);
       if (isNull(R)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${m == null ? void 0 : m._type} not registered -->` });
-      const w = u(m), j = i && isDescendant(i._id, m._id, n), k = {
+      const C = u(m), j = i && isDescendant(i._id, m._id, n), k = {
         blockProps: {
           "data-block-id": m._id,
           "data-block-type": m._type,
@@ -3750,7 +3748,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
         },
         index: f,
         ...applyBindings(applyLanguage(m, r, y), x),
-        ...w,
+        ...C,
         ...h,
         inBuilder: !0,
         lang: r || a
@@ -3766,11 +3764,11 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
             props: k
           }
         ) });
-      const C = getRuntimeProps(m._type);
-      return C ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      const w = getRuntimeProps(m._type);
+      return w ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         RuntimePropsBlock,
         {
-          runtimeProps: C,
+          runtimeProps: w,
           block: m,
           component: R,
           props: k
@@ -3810,23 +3808,23 @@ const StaticBlocksRenderer = () => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, g] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), w = (k) => {
-    p((C) => ({ ...C, width: k }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, g] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), C = (k) => {
+    p((w) => ({ ...w, width: k }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: k, clientHeight: C } = c.current;
-    p({ width: k, height: C });
+    const { clientWidth: k, clientHeight: w } = c.current;
+    p({ width: k, height: w });
   }, [c, n]);
-  const j = (k, C = 0) => {
+  const j = (k, w = 0) => {
     const { top: _ } = k.getBoundingClientRect();
-    return _ + C >= 0 && _ - C <= window.innerHeight;
+    return _ + w >= 0 && _ - w <= window.innerHeight;
   };
   useEffect(() => {
-    var k, C;
+    var k, w;
     if (a && a.type !== "Multiple" && i.current) {
       const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
-      _ && (j(_) || (C = (k = i.current) == null ? void 0 : k.contentWindow) == null || C.scrollTo({ top: _.offsetTop, behavior: "smooth" }), g([_]));
+      _ && (j(_) || (w = (k = i.current) == null ? void 0 : k.contentWindow) == null || w.scrollTo({ top: _.offsetTop, behavior: "smooth" }), g([_]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(h) && i.current) {
@@ -3842,7 +3840,7 @@ const StaticBlocksRenderer = () => {
     let k = IframeInitialContent;
     return k = k.replace("__HTML_DIR__", R), o === "offline" && (k = k.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), k;
   }, [o, R]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -4143,12 +4141,12 @@ const StaticBlocksRenderer = () => {
   ), h = useDebouncedCallback(
     (y, R) => {
       d(() => {
-        const w = get(c, `colors.${y}`);
-        return n ? set(w, 1, R) : set(w, 0, R), {
+        const C = get(c, `colors.${y}`);
+        return n ? set(C, 1, R) : set(C, 0, R), {
           ...c,
           colors: {
             ...c.colors,
-            [y]: w
+            [y]: C
           }
         };
       });
@@ -4156,12 +4154,12 @@ const StaticBlocksRenderer = () => {
     [c],
     200
   ), b = (y) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([R]) => {
-    const w = get(c, `colors.${R}.${n ? 1 : 0}`);
+    const C = get(c, `colors.${R}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorPickerInput,
         {
-          value: w,
+          value: C,
           onChange: (j) => h(R, j)
         }
       ),
@@ -4203,7 +4201,7 @@ const StaticBlocksRenderer = () => {
           {
             label: y,
             value: c.fontFamily[y.replace(/font-/g, "")] || R[Object.keys(R)[0]],
-            onChange: (w) => m(y, w)
+            onChange: (C) => m(y, C)
           },
           y
         )) }),
@@ -4257,79 +4255,69 @@ const StaticBlocksRenderer = () => {
       }
     ) })
   ] });
-};
-var client = {}, hasRequiredClient;
-function requireClient() {
-  if (hasRequiredClient) return client;
-  hasRequiredClient = 1;
-  var o = ReactDOM;
-  if (process.env.NODE_ENV === "production")
-    client.createRoot = o.createRoot, client.hydrateRoot = o.hydrateRoot;
-  else {
-    var n = o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    client.createRoot = function(r, a) {
-      n.usingClientEntryPoint = !0;
-      try {
-        return o.createRoot(r, a);
-      } finally {
-        n.usingClientEntryPoint = !1;
-      }
-    }, client.hydrateRoot = function(r, a, l) {
-      n.usingClientEntryPoint = !0;
-      try {
-        return o.hydrateRoot(r, a, l);
-      } finally {
-        n.usingClientEntryPoint = !1;
-      }
-    };
-  }
-  return client;
-}
-var clientExports = requireClient();
-const getSvgMarkup = (o) => {
+}, ICON_PICKER_CONTAINER_ID = "icon-picker-item-container", removeSizeAttributes = (o) => {
   try {
-    const n = document.getElementById("icon-picker-field"), r = document.createElement("div");
-    clientExports.createRoot(r).render(/* @__PURE__ */ jsxRuntimeExports.jsx(IconPickerItem, { value: o })), n.appendChild(r), r.hidden = !0;
-    const l = r.innerHTML;
-    setTimeout(() => n.removeChild(r), 100);
-    const c = new DOMParser().parseFromString(l, "image/svg+xml"), d = c.querySelector("svg");
-    return d && (d.removeAttribute("width"), d.removeAttribute("height")), new XMLSerializer().serializeToString(c);
-  } catch (n) {
-    return console.error(n), "";
+    return o.replace(/<svg([^>]*)\sheight="[^"]*"([^>]*)>/gi, "<svg$1$2>").replace(/<svg([^>]*)\swidth="[^"]*"([^>]*)>/gi, "<svg$1$2>");
+  } catch {
+    return o;
   }
-}, IconPickerField = ({ value: o, onChange: n }) => {
-  const { t: r } = useTranslation(), a = (l) => {
-    n("<svg />");
-    const i = getSvgMarkup(l);
-    n(i);
+}, getSvgMarkup = () => new Promise((o, n) => {
+  setTimeout(() => {
+    try {
+      const r = document.getElementById(ICON_PICKER_CONTAINER_ID);
+      let a = (r == null ? void 0 : r.innerHTML) || "";
+      a = removeSizeAttributes(a), o(a);
+    } catch (r) {
+      n(r);
+    }
+  }, 300);
+}), IconPickerField = ({ value: o, onChange: n }) => {
+  const { t: r } = useTranslation(), [a, l] = useState(null);
+  useEffect(() => {
+    l(null);
+  }, [o]);
+  const i = async (c) => {
+    const d = a;
+    try {
+      l(c);
+      const p = await getSvgMarkup();
+      n(p);
+    } catch {
+      l(d);
+    }
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex h-20 items-center gap-x-2", id: "icon-picker-field", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative h-12 w-12", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative h-12 w-12 cursor-pointer rounded-lg border duration-300 hover:bg-gray-100", children: [
+      a ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          dangerouslySetInnerHTML: {
-            __html: o ? o.replace("<svg", '<svg class="h-5 w-5"') : "<svg class='h-5 w-5' />"
-          },
-          className: "absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer bg-white"
+          id: ICON_PICKER_CONTAINER_ID,
+          className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconPickerItem, { value: a })
+        }
+      ) : o ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform",
+          dangerouslySetInnerHTML: { __html: o }
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          id: "icon-picker-item-container",
+          className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconPickerItem, { value: "BiSolidGrid" })
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         IconPicker,
         {
-          value: o || "BiSolidGrid",
-          onChange: a,
+          value: a || o,
+          onChange: i,
           pickButtonStyle: {
-            position: "relative",
             height: "48px",
             width: "48px",
-            border: "1px solid #999",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            borderRadius: "6px",
-            backgroundColor: "transparent",
-            zIndex: 1
+            opacity: 0
           },
           searchInputStyle: {
             backgroundColor: "transparent",
@@ -4348,9 +4336,9 @@ const getSvgMarkup = (o) => {
         autoCorrect: "off",
         spellCheck: "false",
         value: o,
-        onChange: (l) => n(l.target.value),
+        onChange: (c) => n(c.target.value),
         placeholder: r("Choose Icon or SVG"),
-        className: "no-scrollbar disabled:opacity-50; mt-1 flex w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed"
+        className: "no-scrollbar flex w-full rounded-md border border-border bg-background px-3 py-1.5 text-[10px] leading-4 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
       }
     )
   ] });
@@ -4434,7 +4422,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   onChange: r
 }) => {
   var P;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, I) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [g, m] = useState(""), [f, h] = useState([]), [b, y] = useState(-1), R = useRef(null), w = (P = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : P.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, I) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [g, m] = useState(""), [f, h] = useState([]), [b, y] = useState(-1), R = useRef(null), C = (P = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
     if (m(""), h([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), I = get(v, 1, "page") || "page";
@@ -4471,7 +4459,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         b >= 0 && E(f[b]);
         break;
       case "Escape":
-        v.preventDefault(), C();
+        v.preventDefault(), w();
         break;
     }
   };
@@ -4481,7 +4469,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const C = () => {
+  const w = () => {
     m(""), h([]), y(-1), p(!1), r("");
   }, _ = (v) => {
     m(v), p(!isEmpty(v)), c(!0), j(v);
@@ -4496,11 +4484,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
           value: g,
           onChange: (v) => _(v.target.value),
           onKeyDown: k,
-          placeholder: a(`Search ${w ?? ""}`),
+          placeholder: a(`Search ${C ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: g && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: g && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: w, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4744,11 +4732,11 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   schema: u,
   formData: x
 }) => {
-  const { selectedLang: g, fallbackLang: m, languages: f } = useLanguages(), h = isEmpty(f) ? "" : isEmpty(g) ? m : g, b = get(LANGUAGES, h, h), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), w = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [j, E] = useState(null);
+  const { selectedLang: g, fallbackLang: m, languages: f } = useLanguages(), h = isEmpty(f) ? "" : isEmpty(g) ? m : g, b = get(LANGUAGES, h, h), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), C = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [j, E] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: n, children: a });
-  const C = w == null ? void 0 : w.includes(o.replace("root.", ""));
+  const w = C == null ? void 0 : C.includes(o.replace("root.", ""));
   if (u.type === "array") {
     const _ = j === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${n} relative`, children: [
@@ -4779,7 +4767,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       r,
       " ",
-      C && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      w && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
         b
       ] }),
@@ -4856,43 +4844,43 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   return set(r, o, n), r;
 };
 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), x = useWrapperBlock(), g = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, g), f = ({ formData: k }, C, _) => {
-    if (C && (c == null ? void 0 : c._id) === n._id) {
-      const P = C.replace("root.", "");
+  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), x = useWrapperBlock(), g = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, g), f = ({ formData: k }, w, _) => {
+    if (w && (c == null ? void 0 : c._id) === n._id) {
+      const P = w.replace("root.", "");
       a([n._id], { [P]: get(k, P) }, _);
     }
   }, h = useCallback(
-    debounce(({ formData: k }, C, _) => {
-      f({ formData: k }, C, _), d(k);
+    debounce(({ formData: k }, w, _) => {
+      f({ formData: k }, w, _), d(k);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: k }, C) => {
-    if (C) {
-      const _ = C.replace("root.", "");
+  ), b = ({ formData: k }, w) => {
+    if (w) {
+      const _ = w.replace("root.", "");
       r(
         [n._id],
         convertDotNotationToObject(_, get(k, _.split(".")))
-      ), h({ formData: k }, C, { [_]: get(c, _) });
+      ), h({ formData: k }, w, { [_]: get(c, _) });
     }
-  }, y = ({ formData: k }, C) => {
-    if (C) {
-      const _ = C.replace("root.", "");
+  }, y = ({ formData: k }, w) => {
+    if (w) {
+      const _ = w.replace("root.", "");
       r(
         [x._id],
         convertDotNotationToObject(_, get(k, _.split(".")))
-      ), h({ formData: k }, C, { [_]: get(c, _) });
+      ), h({ formData: k }, w, { [_]: get(c, _) });
     }
   };
   keys(get(i, "_bindings", {}));
-  const { schema: R, uiSchema: w } = useMemo(() => {
+  const { schema: R, uiSchema: C } = useMemo(() => {
     const k = n == null ? void 0 : n._type;
     if (k)
       return getBlockFormSchemas(k);
   }, [n]), { wrapperSchema: j, wrapperUiSchema: E } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const k = x == null ? void 0 : x._type, { schema: C = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
-    return { wrapperSchema: C, wrapperUiSchema: _ };
+    const k = x == null ? void 0 : x._type, { schema: w = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
+    return { wrapperSchema: w, wrapperUiSchema: _ };
   }, [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -4932,7 +4920,7 @@ function BlockSettings() {
         onChange: b,
         formData: i,
         schema: R,
-        uiSchema: w
+        uiSchema: C
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null
@@ -5064,37 +5052,37 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var C;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), g = (C = first(r)) == null ? void 0 : C.prop, m = reject((get(a, g, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), f = () => {
-    const _ = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(c, _, !0), u("");
-  }, [h, b] = useState([]), y = ({ value: _ }) => {
-    const P = _.trim().toLowerCase(), v = P.match(/.+:/g);
-    let I = [];
-    if (v && v.length > 0) {
-      const [B] = v, A = P.replace(B, "");
-      I = o.search(A).map((T) => ({
-        ...T,
-        item: { ...T.item, name: B + T.item.name }
+  var _;
+  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), g = (_ = first(r)) == null ? void 0 : _.prop, { classes: m } = getSplitChaiClasses(get(a, g, "")), f = m.split(" ").filter((P) => !isEmpty(P)), h = () => {
+    const P = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l(c, P, !0), u("");
+  }, [b, y] = useState([]), R = ({ value: P }) => {
+    const v = P.trim().toLowerCase(), I = v.match(/.+:/g);
+    let B = [];
+    if (I && I.length > 0) {
+      const [A] = I, N = v.replace(A, "");
+      B = o.search(N).map((S) => ({
+        ...S,
+        item: { ...S.item, name: A + S.item.name }
       }));
     } else
-      I = o.search(P);
-    return b(map(I, "item"));
-  }, R = () => {
-    b([]);
-  }, w = (_) => _.name, j = (_) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: _.name }), E = {
+      B = o.search(v);
+    return y(map(B, "item"));
+  }, C = () => {
+    y([]);
+  }, j = (P) => P.name, E = (P) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-1 rounded-md", children: P.name }), k = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: n("Enter classes separated by space"),
     value: p,
-    onKeyDown: (_) => {
-      _.key === "Enter" && p.trim() !== "" && f();
+    onKeyDown: (P) => {
+      P.key === "Enter" && p.trim() !== "" && h();
     },
-    onChange: (_, { newValue: P }) => u(P),
+    onChange: (P, { newValue: v }) => u(v),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, k = () => {
+  }, w = () => {
     if (navigator.clipboard === void 0) {
       x({
         title: n("Clipboard not supported"),
@@ -5103,38 +5091,38 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(m.join(" ")), x({
+    navigator.clipboard.writeText(f.join(" ")), x({
       title: n("Copied"),
       description: n("Classes copied to clipboard")
     });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-col gap-y-1.5 overflow-y-auto pb-4", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full flex-col gap-y-1.5 pb-4", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Classes") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: k, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: w, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: n("Copy classes to clipboard") }) })
         ] })
       ] }),
       d ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SparklesIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SparklesIcon, { className: "w-4 h-4" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", children: n("Ask AI") })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverContent, { side: "left", className: "p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(AskAIStyles, { blockId: a == null ? void 0 : a._id }) })
       ] }) : null
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-center gap-x-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex items-center w-full gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Autosuggest,
         {
-          suggestions: h,
-          onSuggestionsFetchRequested: y,
-          onSuggestionsClearRequested: R,
-          getSuggestionValue: w,
-          renderSuggestion: j,
-          inputProps: E,
+          suggestions: b,
+          onSuggestionsFetchRequested: R,
+          onSuggestionsClearRequested: C,
+          getSuggestionValue: j,
+          renderSuggestion: E,
+          inputProps: k,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5150,29 +5138,29 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: f,
+          onClick: h,
           disabled: p.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: m.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap w-full gap-2 overflow-x-hidden", children: f.map((P) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
+        className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
         children: [
-          _,
+          P,
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Cross2Icon,
             {
-              onClick: () => i(c, [_]),
-              className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
+              onClick: () => i(c, [P]),
+              className: "absolute invisible bg-red-400 rounded-full right-1 hover:text-white group-hover:visible group-hover:cursor-pointer"
             }
           )
         ]
       },
-      _
+      P
     )) })
   ] });
 }
@@ -5773,7 +5761,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [g, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, y] = useState(""), [R, w] = useState(!1), [j, E] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [g, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, y] = useState(""), [R, C] = useState(!1), [j, E] = useState(!1);
   useEffect(() => {
     const { value: v, unit: I } = getClassValueAndUnit(i);
     if (I === "") {
@@ -5782,7 +5770,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     }
     m(I), l(I === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const k = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), C = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
+  const k = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), w = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
     (v = !1) => {
       const I = getUserInputValues(`${a}`, u);
       if (get(I, "error", !1)) {
@@ -5797,9 +5785,9 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       if (get(I, "value") === "")
         return;
       const N = `${get(I, "value", "").startsWith("-") ? "-" : ""}${d}[${get(I, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
-      v ? C(N) : k(N);
+      v ? w(N) : k(N);
     },
-    [k, C, a, g, d, u]
+    [k, w, a, g, d, u]
   ), P = useCallback(
     (v) => {
       const I = getUserInputValues(`${a}`, u);
@@ -5847,8 +5835,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             const I = parseInt$1(v.target.value);
             let B = isNaN$1(I) ? 0 : I;
             v.keyCode === 38 && (B += 1), v.keyCode === 40 && (B -= 1);
-            const A = `${B}`, T = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
-            C(T);
+            const A = `${B}`, L = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
+            w(L);
           },
           onKeyUp: (v) => {
             j && (v.preventDefault(), E(!1));
@@ -5896,9 +5884,9 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     ["none", "auto"].indexOf(g) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => w(!0),
+        onDragStart: () => C(!0),
         onDragEnd: (v) => {
-          if (y(() => ""), w(!1), isEmpty(v))
+          if (y(() => ""), C(!1), isEmpty(v))
             return;
           const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
           k(A);
@@ -5908,7 +5896,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             return;
           y(v);
           const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
-          C(A);
+          w(A);
         },
         currentValue: a,
         unit: g,
@@ -6006,8 +5994,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
 }, 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(), [, x] = useCanvasWidth(), g = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), y = useCallback(
-    (C, _ = !0) => {
-      const P = { dark: p, mq: x, mod: u, cls: C, property: l, fullCls: "" };
+    (w, _ = !0) => {
+      const P = { dark: p, mq: x, mod: u, cls: w, property: l, fullCls: "" };
       (p || u !== "") && (P.mq = "xs");
       const v = generateFullClsName(P);
       m(h, [v], _);
@@ -6015,12 +6003,12 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     [h, p, x, u, l, m]
   ), R = useCallback(() => {
     f(h, [b]);
-  }, [h, b, f]), w = useMemo(() => canChangeClass(g, x), [g, x]);
+  }, [h, b, f]), C = useMemo(() => canChangeClass(g, x), [g, x]);
   useEffect(() => {
-    i(w, g);
-  }, [w, i, g]);
+    i(C, g);
+  }, [C, i, g]);
   const [, , j] = useCanvasWidth(), E = useCallback(
-    (C) => {
+    (w) => {
       j({
         xs: 400,
         sm: 640,
@@ -6028,11 +6016,11 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[w]);
     },
     [j]
   ), k = get(g, "dark", null) === p && get(g, "mod", null) === u && get(g, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: g && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: g && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${g && !k ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
@@ -6052,7 +6040,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6501,7 +6489,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var g, m, f, h, b, y, R, w;
+  var g, m, f, h, b, y, R, C;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -6558,14 +6546,14 @@ const CoreBlock = ({
     a.content = getTextContent(j);
     const E = find(
       r.children || [],
-      (k) => (k == null ? void 0 : k.tagName) === "span" && some(k.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
+      (k) => (k == null ? void 0 : k.tagName) === "span" && some(k.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg")
     );
     if (E) {
-      const k = find(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+      const k = find(E.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg");
       if (k) {
         a.icon = stringify([k]);
-        const { height: C, width: _ } = getSvgDimensions(k, "16px", "16px");
-        a.iconHeight = C, a.iconWidth = _;
+        const { height: w, width: _ } = getSvgDimensions(k, "16px", "16px");
+        a.iconHeight = w, a.iconWidth = _;
       }
     }
     return [a];
@@ -6577,9 +6565,9 @@ const CoreBlock = ({
     const j = stringify([r]);
     return hasVideoEmbed(j) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(j)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = j, [a];
   } else if (r.tagName === "svg") {
-    const j = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), k = get(j, "value") ? `[${get(j, "value")}px]` : "24px", C = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${C} h-${k}`, _)}`.trim(), r.attributes = filter(r.attributes, (P) => !includes(["style", "width", "height", "class"], P.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((w = n.block) == null ? void 0 : w._type) === "Select")
+    const j = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), k = get(j, "value") ? `[${get(j, "value")}px]` : "24px", w = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${w} h-${k}`, _)}`.trim(), r.attributes = filter(r.attributes, (P) => !includes(["style", "width", "height", "class"], P.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((C = n.block) == null ? void 0 : C._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -6755,8 +6743,8 @@ const BlockCard = ({
   position: a = -1
 }) => {
   const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), g = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), h = (R) => {
-    const w = has(R, "styles_attrs.data-page-section");
-    return R._type === "Box" && w;
+    const C = has(R, "styles_attrs.data-page-section");
+    return R._type === "Box" && C;
   }, b = useCallback(
     async (R) => {
       if (R.stopPropagation(), has(o, "component")) {
@@ -6764,15 +6752,15 @@ const BlockCard = ({
         return;
       }
       i(!0);
-      const w = await c(n, o);
-      isEmpty(w) || p(syncBlocksWithDefaults(w), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const C = await c(n, o);
+      isEmpty(C) || p(syncBlocksWithDefaults(C), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   ), y = async (R) => {
-    const w = await c(n, o);
+    const C = await c(n, o);
     let j = r;
-    if (h(first(w)) && (j = null), !isEmpty(w)) {
-      const E = { blocks: w, uiLibrary: !0, parent: j };
+    if (h(first(C)) && (j = null), !isEmpty(C)) {
+      const E = { blocks: C, uiLibrary: !0, parent: j };
       if (R.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
         const k = new Image();
         k.src = o.preview, k.onload = () => {
@@ -6830,7 +6818,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const R = filter(f, (j, E) => E % 2 === 0), w = filter(f, (j, E) => E % 2 === 1);
+  const R = filter(f, (j, E) => E % 2 === 0), C = filter(f, (j, E) => E % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
@@ -6869,7 +6857,7 @@ const BlockCard = ({
               R.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              w.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
+              C.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7089,22 +7077,22 @@ 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 T;
+  var L;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: g } = useBlockHighlight(), { id: m, data: f, isSelected: h, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: w } = o, j = (S) => {
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: g } = useBlockHighlight(), { id: m, data: f, isSelected: h, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: C } = o, j = (S) => {
     S.stopPropagation(), !i.includes(m) && o.toggle();
   }, E = (S) => {
     S.isInternal && (p = S.isOpen, S.isOpen && S.close());
   }, k = (S) => {
     S.isInternal && p !== null && (p ? S.open() : S.close(), p = null);
-  }, [C, _] = useAtom$1(currentAddSelection), P = () => {
+  }, [w, _] = useAtom$1(currentAddSelection), P = () => {
     var S;
     v(), o.parent.isSelected || _((S = o == null ? void 0 : o.parent) == null ? void 0 : S.id);
   }, v = () => {
     _(null);
   }, I = (S) => {
-    v(), S.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), w(S);
+    v(), S.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), C(S);
   };
   useEffect(() => {
     const S = setTimeout(() => {
@@ -7113,22 +7101,22 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
     return () => clearTimeout(S);
   }, [b, o, y]);
   const B = useMemo(() => {
-    const S = Object.keys(f), L = [];
+    const S = Object.keys(f), T = [];
     for (let D = 0; D < S.length; D++)
       if (S[D].endsWith("_attrs")) {
         const $ = f[S[D]], O = Object.keys($).join("|");
-        O.match(/x-data/) && L.push("data"), O.match(/x-on/) && L.push("event"), O.match(/x-show|x-if/) && L.push("show");
+        O.match(/x-data/) && T.push("data"), O.match(/x-on/) && T.push("event"), O.match(/x-show|x-if/) && T.push("show");
       }
-    return L;
-  }, [f]), A = (S, L) => {
+    return T;
+  }, [f]), A = (S, T) => {
     const D = d.contentDocument || d.contentWindow.document, $ = D.querySelector(`[data-block-id=${S}]`);
-    $ && $.setAttribute("data-drop", L);
+    $ && $.setAttribute("data-drop", T);
     const O = $.getBoundingClientRect(), M = d.getBoundingClientRect();
     O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
   }, N = (S) => {
     v();
-    const L = get(o, "parent.id");
-    L !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: L, position: S }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: S });
+    const T = get(o, "parent.id");
+    T !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: T, position: S }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: S });
   };
   return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7166,7 +7154,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
         S.preventDefault(), A(m, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             onClick: (S) => {
@@ -7185,7 +7173,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               h ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
               b && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === C ? "bg-purple-100" : "",
+              (o == null ? void 0 : o.id) === w ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(m) ? "opacity-50" : ""
             ),
@@ -8343,11 +8331,11 @@ const ClearCanvas = () => {
       r(E), l(a), c(""), p(""), m("");
     }
   }, y = (E) => {
-    const k = a.filter((C, _) => _ !== E);
+    const k = a.filter((w, _) => _ !== E);
     r(k), l(k);
   }, R = (E) => {
     x(E), c(a[E].key), p(a[E].value);
-  }, w = () => {
+  }, C = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -8357,14 +8345,14 @@ const ClearCanvas = () => {
       E[u] = { key: i, value: d }, r(E), l(E), x(null), c(""), p(""), m("");
     }
   }, j = (E) => {
-    E.key === "Enter" && !E.shiftKey && (E.preventDefault(), u !== null ? w() : b());
+    E.key === "Enter" && !E.shiftKey && (E.preventDefault(), u !== null ? C() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
         onSubmit: (E) => {
-          E.preventDefault(), u !== null ? w() : b();
+          E.preventDefault(), u !== null ? C() : b();
         },
         className: "space-y-3",
         children: [