@chaibuilder/sdk 2.0.7 → 2.0.8

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, useRef, useState, Suspense, createElement, memo, lazy } from "react";
-import { O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, R as DropdownMenuItem, S as Skeleton, B as Button, 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, 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, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, a6 as Label, r as CardFooter, aa as ScrollArea, 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 { R as DropdownMenu, T as DropdownMenuTrigger, U as DropdownMenuContent, V as DropdownMenuItem, S as Skeleton, B as Button, K as Dialog, L as DialogTrigger, M as DialogContent, aa as Popover, an as Tooltip, ao as TooltipTrigger, ab as PopoverTrigger, ap as TooltipContent, ac as PopoverContent, y as Command, D as CommandInput, E as CommandList, F as CommandEmpty, G as CommandGroup, H as CommandItem, N as DialogHeader, P as DialogTitle, q as Badge, Y as DropdownMenuLabel, Z as DropdownMenuSeparator, W as DropdownMenuCheckboxItem, a5 as HoverCard, a6 as HoverCardTrigger, a7 as HoverCardContent, am as Textarea, a8 as Input$1, ar as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, t as CardHeader, w as CardDescription, x as CardContent, a9 as Label, u as CardFooter, ad as ScrollArea, ai as Tabs, aj as TabsList, ak as TabsTrigger, al 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, ah as Switch, n as Avatar, af as Separator, aq as TooltipProvider, ag as Toaster } from "./tooltip-VMv3Eoxb.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { find, filter, flatten, map, omit, isString, has, get, isObject, memoize, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, split, take, startCase, debounce, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, capitalize, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
@@ -19,7 +19,7 @@ import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { registerChaiBlock as Ue } from "@chaibuilder/runtime";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Cort9tch.js";
-import { 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, FileJson, Zap, EyeOff, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, 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, FileJson, Zap, EyeOff, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Link from "@tiptap/extension-link";
@@ -100,46 +100,46 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   var x;
   return (x = h.onMount) == null ? void 0 : x.call(h, f);
 }, ...m) => {
-  const h = m[0] || ((B) => {
-    let L = o.get(B);
-    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(B, L), u == null || u(B, C)), L;
+  const h = m[0] || ((A) => {
+    let L = o.get(A);
+    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, L), u == null || u(A, w)), L;
   }), f = m[1] || (() => {
-    let B, L;
-    const v = (y) => {
+    let A, L;
+    const C = (k) => {
       try {
-        y();
+        k();
       } catch (_) {
-        B || (B = !0, L = _);
+        A || (A = !0, L = _);
       }
     };
     do {
-      c.f && v(c.f);
-      const y = /* @__PURE__ */ new Set(), _ = y.add.bind(y);
+      c.f && C(c.f);
+      const k = /* @__PURE__ */ new Set(), _ = k.add.bind(k);
       a.forEach((T) => {
         var I;
         return (I = n.get(T)) == null ? void 0 : I.l.forEach(_);
-      }), a.clear(), i.forEach(_), i.clear(), l.forEach(_), l.clear(), y.forEach(v), a.size && x();
+      }), a.clear(), i.forEach(_), i.clear(), l.forEach(_), l.clear(), k.forEach(C), a.size && x();
     } while (a.size || i.size || l.size);
-    if (B)
+    if (A)
       throw L;
   }), x = m[2] || (() => {
-    const B = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
-    for (; y.length; ) {
-      const _ = y[y.length - 1], T = h(_);
-      if (v.has(_)) {
-        y.pop();
+    const A = [], L = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
+    for (; k.length; ) {
+      const _ = k[k.length - 1], T = h(_);
+      if (C.has(_)) {
+        k.pop();
         continue;
       }
       if (L.has(_)) {
-        r.get(_) === T.n && B.push([_, T]), v.add(_), y.pop();
+        r.get(_) === T.n && A.push([_, T]), C.add(_), k.pop();
         continue;
       }
       L.add(_);
       for (const I of getMountedOrPendingDependents(_, T, n))
-        L.has(I) || y.push(I);
+        L.has(I) || k.push(I);
     }
-    for (let _ = B.length - 1; _ >= 0; --_) {
-      const [T, I] = B[_];
+    for (let _ = A.length - 1; _ >= 0; --_) {
+      const [T, I] = A[_];
       let R = !1;
       for (const P of I.d.keys())
         if (P !== T && a.has(P)) {
@@ -148,24 +148,24 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         }
       R && (b(T), S(T)), r.delete(T);
     }
-  }), b = m[3] || ((B) => {
-    var L, v;
-    const y = h(B);
-    if (isAtomStateInitialized(y) && (n.has(B) && r.get(B) !== y.n || Array.from(y.d).every(
+  }), b = m[3] || ((A) => {
+    var L, C;
+    const k = h(A);
+    if (isAtomStateInitialized(k) && (n.has(A) && r.get(A) !== k.n || Array.from(k.d).every(
       ([D, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
         b(D).n === O
       )
     )))
-      return y;
-    y.d.clear();
+      return k;
+    k.d.clear();
     let _ = !0;
     const T = () => {
-      n.has(B) && (S(B), x(), f());
+      n.has(A) && (S(A), x(), f());
     }, I = (D) => {
       var O;
-      if (isSelfAtom(B, D)) {
+      if (isSelfAtom(A, D)) {
         const H = h(D);
         if (!isAtomStateInitialized(H))
           if (hasInitialValue(D))
@@ -178,7 +178,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       try {
         return returnAtomValue($);
       } finally {
-        y.d.set(D, $.n), isPendingPromise(y.v) && addPendingPromiseToDependency(B, y.v, $), (O = n.get(D)) == null || O.t.add(B), _ || T();
+        k.d.set(D, $.n), isPendingPromise(k.v) && addPendingPromiseToDependency(A, k.v, $), (O = n.get(D)) == null || O.t.add(A), _ || T();
       }
     };
     let R, P;
@@ -187,100 +187,100 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !P && isActuallyWritableAtom(B) && (P = (...D) => {
+        return !P && isActuallyWritableAtom(A) && (P = (...D) => {
           if (!_)
             try {
-              return w(B, ...D);
+              return v(A, ...D);
             } finally {
               x(), f();
             }
         }), P;
       }
-    }, M = y.n;
+    }, M = k.n;
     try {
-      const D = d(B, I, N);
-      return setAtomStateValueOrPromise(B, D, h), isPromiseLike$2(D) && ((L = D.onCancel) == null || L.call(D, () => R == null ? void 0 : R.abort()), D.then(
+      const D = d(A, I, N);
+      return setAtomStateValueOrPromise(A, D, h), isPromiseLike$2(D) && ((L = D.onCancel) == null || L.call(D, () => R == null ? void 0 : R.abort()), D.then(
         T,
         T
-      )), y;
+      )), k;
     } catch (D) {
-      return delete y.v, y.e = D, ++y.n, y;
+      return delete k.v, k.e = D, ++k.n, k;
     } finally {
-      _ = !1, M !== y.n && r.get(B) === M && (r.set(B, y.n), a.add(B), (v = c.c) == null || v.call(c, B));
+      _ = !1, M !== k.n && r.get(A) === M && (r.set(A, k.n), a.add(A), (C = c.c) == null || C.call(c, A));
     }
-  }), k = m[4] || ((B) => {
-    const L = [B];
+  }), y = m[4] || ((A) => {
+    const L = [A];
     for (; L.length; ) {
-      const v = L.pop(), y = h(v);
-      for (const _ of getMountedOrPendingDependents(v, y, n)) {
+      const C = L.pop(), k = h(C);
+      for (const _ of getMountedOrPendingDependents(C, k, n)) {
         const T = h(_);
         r.set(_, T.n), L.push(_);
       }
     }
-  }), w = m[5] || ((B, ...L) => {
-    let v = !0;
-    const y = (T) => returnAtomValue(b(T)), _ = (T, ...I) => {
+  }), v = m[5] || ((A, ...L) => {
+    let C = !0;
+    const k = (T) => returnAtomValue(b(T)), _ = (T, ...I) => {
       var R;
       const P = h(T);
       try {
-        if (isSelfAtom(B, T)) {
+        if (isSelfAtom(A, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const N = P.n, M = I[0];
-          setAtomStateValueOrPromise(T, M, h), S(T), N !== P.n && (a.add(T), (R = c.c) == null || R.call(c, T), k(T));
+          setAtomStateValueOrPromise(T, M, h), S(T), N !== P.n && (a.add(T), (R = c.c) == null || R.call(c, T), y(T));
           return;
         } else
-          return w(T, ...I);
+          return v(T, ...I);
       } finally {
-        v || (x(), f());
+        C || (x(), f());
       }
     };
     try {
-      return p(B, y, _, ...L);
+      return p(A, k, _, ...L);
     } finally {
-      v = !1;
+      C = !1;
     }
-  }), S = m[6] || ((B) => {
+  }), S = m[6] || ((A) => {
     var L;
-    const v = h(B), y = n.get(B);
-    if (y && !isPendingPromise(v.v)) {
-      for (const [_, T] of v.d)
-        if (!y.d.has(_)) {
+    const C = h(A), k = n.get(A);
+    if (k && !isPendingPromise(C.v)) {
+      for (const [_, T] of C.d)
+        if (!k.d.has(_)) {
           const I = h(_);
-          A(_).t.add(B), y.d.add(_), T !== I.n && (a.add(_), (L = c.c) == null || L.call(c, _), k(_));
+          B(_).t.add(A), k.d.add(_), T !== I.n && (a.add(_), (L = c.c) == null || L.call(c, _), y(_));
         }
-      for (const _ of y.d || [])
-        if (!v.d.has(_)) {
-          y.d.delete(_);
+      for (const _ of k.d || [])
+        if (!C.d.has(_)) {
+          k.d.delete(_);
           const T = E(_);
-          T == null || T.t.delete(B);
+          T == null || T.t.delete(A);
         }
     }
-  }), A = m[7] || ((B) => {
+  }), B = m[7] || ((A) => {
     var L;
-    const v = h(B);
-    let y = n.get(B);
-    if (!y) {
-      b(B);
-      for (const _ of v.d.keys())
-        A(_).t.add(B);
-      if (y = {
+    const C = h(A);
+    let k = n.get(A);
+    if (!k) {
+      b(A);
+      for (const _ of C.d.keys())
+        B(_).t.add(A);
+      if (k = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(v.d.keys()),
+        d: new Set(C.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(B, y), (L = c.m) == null || L.call(c, B), isActuallyWritableAtom(B)) {
+      }, n.set(A, k), (L = c.m) == null || L.call(c, A), isActuallyWritableAtom(A)) {
         const _ = () => {
           let T = !0;
           const I = (...R) => {
             try {
-              return w(B, ...R);
+              return v(A, ...R);
             } finally {
               T || (x(), f());
             }
           };
           try {
-            const R = g(B, I);
-            R && (y.u = () => {
+            const R = g(A, I);
+            R && (k.u = () => {
               T = !0;
               try {
                 R();
@@ -295,23 +295,23 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         l.add(_);
       }
     }
-    return y;
-  }), E = m[8] || ((B) => {
+    return k;
+  }), E = m[8] || ((A) => {
     var L;
-    const v = h(B);
-    let y = n.get(B);
-    if (y && !y.l.size && !Array.from(y.t).some((_) => {
+    const C = h(A);
+    let k = n.get(A);
+    if (k && !k.l.size && !Array.from(k.t).some((_) => {
       var T;
-      return (T = n.get(_)) == null ? void 0 : T.d.has(B);
+      return (T = n.get(_)) == null ? void 0 : T.d.has(A);
     })) {
-      y.u && i.add(y.u), y = void 0, n.delete(B), (L = c.u) == null || L.call(c, B);
-      for (const _ of v.d.keys()) {
+      k.u && i.add(k.u), k = void 0, n.delete(A), (L = c.u) == null || L.call(c, A);
+      for (const _ of C.d.keys()) {
         const T = E(_);
-        T == null || T.t.delete(B);
+        T == null || T.t.delete(A);
       }
       return;
     }
-    return y;
+    return k;
   }), j = [
     // store state
     o,
@@ -331,28 +331,28 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     f,
     x,
     b,
-    k,
-    w,
+    y,
+    v,
     S,
-    A,
+    B,
     E
-  ], C = {
-    get: (B) => returnAtomValue(b(B)),
-    set: (B, ...L) => {
+  ], w = {
+    get: (A) => returnAtomValue(b(A)),
+    set: (A, ...L) => {
       try {
-        return w(B, ...L);
+        return v(A, ...L);
       } finally {
         x(), f();
       }
     },
-    sub: (B, L) => {
-      const y = A(B).l;
-      return y.add(L), f(), () => {
-        y.delete(L), E(B), f();
+    sub: (A, L) => {
+      const k = B(A).l;
+      return k.add(L), f(), () => {
+        k.delete(L), E(A), f();
       };
     }
   };
-  return Object.defineProperty(C, BUILDING_BLOCKS, { value: j }), C;
+  return Object.defineProperty(w, BUILDING_BLOCKS, { value: j }), w;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -396,27 +396,27 @@ function splitAtom(o, n) {
             g[f] = b;
             return;
           }
-          const k = (S) => {
-            const A = S(l), E = S(o), C = a(E, A == null ? void 0 : A.arr).keyList.indexOf(x);
-            if (C < 0 || C >= E.length) {
-              const B = c[a(c).keyList.indexOf(x)];
-              if (B)
-                return B;
+          const y = (S) => {
+            const B = S(l), E = S(o), w = a(E, B == null ? void 0 : B.arr).keyList.indexOf(x);
+            if (w < 0 || w >= E.length) {
+              const A = c[a(c).keyList.indexOf(x)];
+              if (A)
+                return A;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return E[C];
-          }, w = (S, A, E) => {
-            const j = S(l), C = S(o), L = a(C, j == null ? void 0 : j.arr).keyList.indexOf(x);
-            if (L < 0 || L >= C.length)
+            return E[w];
+          }, v = (S, B, E) => {
+            const j = S(l), w = S(o), L = a(w, j == null ? void 0 : j.arr).keyList.indexOf(x);
+            if (L < 0 || L >= w.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(E) ? E(C[L]) : E;
-            Object.is(C[L], v) || A(o, [
-              ...C.slice(0, L),
-              v,
-              ...C.slice(L + 1)
+            const C = isFunction(E) ? E(w[L]) : E;
+            Object.is(w[L], C) || B(o, [
+              ...w.slice(0, L),
+              C,
+              ...w.slice(L + 1)
             ]);
           };
-          g[f] = isWritable(o) ? atom(k, w) : atom(k);
+          g[f] = isWritable(o) ? atom(y, v) : atom(y);
         }), u && u.keyList.length === m.length && u.keyList.every((h, f) => h === m[f]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
@@ -672,10 +672,8 @@ const selectedLibraryAtom = atomWithStorage("_selectedLibrary", null);
 selectedLibraryAtom.debugLabel = "selectedLibraryAtom";
 const dataBindingActiveAtom = atom$1(!0);
 dataBindingActiveAtom.debugLabel = "dataBindingActiveAtom";
-let doc, win;
-typeof document < "u" && (doc = document);
-typeof window < "u" && (win = window);
-const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
+const sidebarActivePanelAtom = atom$1("outline");
+sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
 class Content extends Component {
   componentDidMount() {
     this.props.contentDidMount();
@@ -687,6 +685,10 @@ class Content extends Component {
     return Children.only(this.props.children);
   }
 }
+let doc, win;
+typeof document < "u" && (doc = document);
+typeof window < "u" && (win = window);
+const FrameContext = React__default.createContext({ document: doc, window: win }), useFrame = () => React__default.useContext(FrameContext), { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
@@ -1396,50 +1398,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, b, k) => {
-      const w = map(x, (A) => {
-        const j = n.find((L) => L._id === A)._parent || null, B = n.filter((L) => j ? L._parent === j : !L._parent).map((L) => L._id).indexOf(A);
-        return { _id: A, oldParent: j, oldPosition: B };
-      }), S = w.find(({ _id: A }) => A === x[0]);
-      S && S.oldParent === b && S.oldPosition === k || (i(x, b, k), o({
-        undo: () => each(w, ({ _id: A, oldParent: E, oldPosition: j }) => {
-          i([A], E, j);
+    moveBlocks: (x, b, y) => {
+      const v = map(x, (B) => {
+        const j = n.find((L) => L._id === B)._parent || null, A = n.filter((L) => j ? L._parent === j : !L._parent).map((L) => L._id).indexOf(B);
+        return { _id: B, oldParent: j, oldPosition: A };
+      }), S = v.find(({ _id: B }) => B === x[0]);
+      S && S.oldParent === b && S.oldPosition === y || (i(x, b, y), o({
+        undo: () => each(v, ({ _id: B, oldParent: E, oldPosition: j }) => {
+          i([B], E, j);
         }),
-        redo: () => i(x, b, k)
+        redo: () => i(x, b, y)
       }));
     },
-    addBlocks: (x, b, k) => {
-      a(x, b, k), o({
+    addBlocks: (x, b, y) => {
+      a(x, b, y), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, b, k)
+        redo: () => a(x, b, y)
       });
     },
     removeBlocks: (x) => {
       var S;
-      const b = (S = first(x)) == null ? void 0 : S._parent, w = n.filter((A) => b ? A._parent === b : !A._parent).indexOf(first(x));
+      const b = (S = first(x)) == null ? void 0 : S._parent, v = n.filter((B) => b ? B._parent === b : !B._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, b, w),
+        undo: () => a(x, b, v),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, b, k) => {
-      let w = [];
-      if (k)
-        w = map(x, (S) => ({ _id: S, ...k }));
+    updateBlocks: (x, b, y) => {
+      let v = [];
+      if (y)
+        v = map(x, (S) => ({ _id: S, ...y }));
       else {
         const S = keys(b);
-        w = map(x, (A) => {
-          const E = n.find((C) => C._id === A), j = { _id: A };
-          return each(S, (C) => j[C] = E[C]), j;
+        v = map(x, (B) => {
+          const E = n.find((w) => w._id === B), j = { _id: B };
+          return each(S, (w) => j[w] = E[w]), j;
         });
       }
       c(map(x, (S) => ({ _id: S, ...b }))), o({
-        undo: () => c(w),
+        undo: () => c(v),
         redo: () => c(map(x, (S) => ({ _id: S, ...b })))
       });
     },
     updateBlocksRuntime: (x, b) => {
-      c(map(x, (k) => ({ _id: k, ...b })));
+      c(map(x, (y) => ({ _id: y, ...b })));
     },
     setNewBlocks: (x) => {
       r(x), o({
@@ -1449,9 +1451,9 @@ const useBlocksStoreManager = () => {
     },
     updateMultipleBlocksProps: (x) => {
       let b = [];
-      b = map(x, (k) => {
-        const w = keys(k), S = n.find((E) => E._id === k._id), A = {};
-        return each(w, (E) => A[E] = S[E]), A;
+      b = map(x, (y) => {
+        const v = keys(y), S = n.find((E) => E._id === y._id), B = {};
+        return each(v, (E) => B[E] = S[E]), B;
       }), c(x), o({
         undo: () => c(b),
         redo: () => c(x)
@@ -1511,8 +1513,8 @@ const useAddBlock = () => {
         const { _id: x } = i[f];
         i[f]._id = generateUUID();
         const b = filter(i, { _parent: x });
-        for (let k = 0; k < b.length; k++)
-          b[k]._parent = i[f]._id;
+        for (let y = 0; y < b.length; y++)
+          b[y]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -2983,10 +2985,10 @@ const getBlockWithChildren = (o, n) => {
   const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, f) => {
     const x = cloneDeep(f.find((b) => b._id === h));
     for (const b in x) {
-      const k = x[b];
-      if (typeof k == "string" && startsWith(k, STYLES_KEY)) {
-        const { baseClasses: w, classes: S } = getSplitChaiClasses(k);
-        x[b] = compact(flattenDeep([w, S])).join(" ");
+      const y = x[b];
+      if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
+        const { baseClasses: v, classes: S } = getSplitChaiClasses(y);
+        x[b] = compact(flattenDeep([v, S])).join(" ");
       } else
         b !== "_id" && delete x[b];
     }
@@ -2998,23 +3000,23 @@ const getBlockWithChildren = (o, n) => {
         if (l) {
           n(!0), a(null);
           try {
-            const k = p === u ? "" : p, w = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], S = await l(h, addLangToPrompt(x, g, h), w, k), { blocks: A, error: E } = S;
+            const y = p === u ? "" : p, v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], S = await l(h, addLangToPrompt(x, g, h), v, y), { blocks: B, error: E } = S;
             if (E) {
               a(E);
               return;
             }
             if (h === "styles") {
-              const j = A.map((C) => {
-                for (const B in C)
-                  B !== "_id" && (C[B] = `${STYLES_KEY},${C[B]}`);
-                return C;
+              const j = B.map((w) => {
+                for (const A in w)
+                  A !== "_id" && (w[A] = `${STYLES_KEY},${w[A]}`);
+                return w;
               });
               c(j);
             } else
-              i(A);
+              i(B);
             b && b(S);
-          } catch (k) {
-            a(k);
+          } catch (y) {
+            a(y);
           } finally {
             n(!1), b && b();
           }
@@ -3664,23 +3666,23 @@ const useDnd = () => {
       var E;
       const f = dropTarget, b = getOrientation(f) === "vertical" ? h.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : h.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const k = d, w = f.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === w || !S) {
+      const y = d, v = f.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === v || !S) {
         m();
         return;
       }
-      if (!has(k, "_id")) {
-        a(k, w === "canvas" ? null : w, dropIndex), setTimeout(m, 300);
+      if (!has(y, "_id")) {
+        a(y, v === "canvas" ? null : v, dropIndex), setTimeout(m, 300);
         return;
       }
-      let A = f.getAttribute("data-block-id");
-      A === null && (A = h.target.parentElement.getAttribute("data-block-id")), c([k._id], A === "canvas" ? null : A, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      let B = f.getAttribute("data-block-id");
+      B === null && (B = h.target.parentElement.getAttribute("data-block-id")), c([y._id], B === "canvas" ? null : B, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (h) => {
       const f = h, x = f.target;
       dropTarget = x;
-      const b = x.getAttribute("data-block-id"), k = x.getAttribute("data-dnd-dragged") !== "yes";
-      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(x), r(!0), l(""), i([]);
+      const b = x.getAttribute("data-block-id"), y = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(x), r(!0), l(""), i([]);
     },
     onDragLeave: (h) => {
       h.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3758,8 +3760,8 @@ const useHandleCanvasDblClick = (o, n) => {
       if (f) {
         const x = f.getAttribute("data-style-prop");
         if (x) {
-          const b = f.getAttribute("data-style-id"), k = f.getAttribute("data-block-parent");
-          l([{ id: b, prop: x, blockId: k }]);
+          const b = f.getAttribute("data-style-id"), y = f.getAttribute("data-block-parent");
+          l([{ id: b, prop: x, blockId: y }]);
         }
       }
     }, 100);
@@ -3811,15 +3813,15 @@ const useHandleCanvasDblClick = (o, n) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: b, theme: k }) {
+        plugin(function({ addBase: b, theme: y }) {
           b({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: k("fontFamily.heading")
+              fontFamily: y("fontFamily.heading")
             },
             body: {
-              fontFamily: k("fontFamily.body"),
-              color: k("colors.foreground"),
-              backgroundColor: k("colors.background")
+              fontFamily: y("fontFamily.body"),
+              color: y("colors.foreground"),
+              backgroundColor: y("colors.background")
             }
           });
         })
@@ -4003,23 +4005,23 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, h] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), w = useBuilderProp("htmlDir", "ltr"), S = (j) => {
-    p((C) => ({ ...C, width: j }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, h] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), S = (j) => {
+    p((w) => ({ ...w, width: j }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: j, clientHeight: C } = c.current;
-    p({ width: j, height: C });
+    const { clientWidth: j, clientHeight: w } = c.current;
+    p({ width: j, height: w });
   }, [c, n]);
-  const A = (j, C = 0) => {
-    const { top: B } = j.getBoundingClientRect();
-    return B + C >= 0 && B - C <= window.innerHeight;
+  const B = (j, w = 0) => {
+    const { top: A } = j.getBoundingClientRect();
+    return A + w >= 0 && A - w <= window.innerHeight;
   };
   useEffect(() => {
-    var j, C;
+    var j, w;
     if (a && a.type !== "Multiple" && i.current) {
-      const B = getElementByDataBlockId(i.current.contentDocument, a._id);
-      B && (A(B) || (C = (j = i.current) == null ? void 0 : j.contentWindow) == null || C.scrollTo({ top: B.offsetTop, behavior: "smooth" }), m([B]));
+      const A = getElementByDataBlockId(i.current.contentDocument, a._id);
+      A && (B(A) || (w = (j = i.current) == null ? void 0 : j.contentWindow) == null || w.scrollTo({ top: A.offsetTop, behavior: "smooth" }), m([A]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
@@ -4033,8 +4035,8 @@ const getBlockRuntimeProps = memoize((o) => {
   }, [x]);
   const E = useMemo(() => {
     let j = IframeInitialContent;
-    return j = j.replace("__HTML_DIR__", w), o === "offline" && (j = j.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), j;
-  }, [o, w]);
+    return j = j.replace("__HTML_DIR__", v), o === "offline" && (j = j.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), j;
+  }, [o, v]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -4064,7 +4066,7 @@ const getBlockRuntimeProps = memoize((o) => {
             ),
             /* @__PURE__ */ jsx(HeadTags, {}),
             /* @__PURE__ */ jsx(Provider$1, { children: /* @__PURE__ */ jsxs(Canvas, { children: [
-              k ? /* @__PURE__ */ jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsx(StaticBlocksRenderer, {}),
+              y ? /* @__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", {}),
@@ -4114,7 +4116,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-C-jeR5bt.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-ZtRSywKI.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, {}) }) }),
@@ -4486,11 +4488,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     if (f !== x)
       u.chain().deleteSelection().insertContent(h).run();
     else {
-      const { state: k } = u, w = k.selection.from, S = k.doc.textBetween(Math.max(0, w - 1), w), A = k.doc.textBetween(w, Math.min(w + 1, k.doc.content.size));
+      const { state: y } = u, v = y.selection.from, S = y.doc.textBetween(Math.max(0, v - 1), v), B = y.doc.textBetween(v, Math.min(v + 1, y.doc.content.size));
       let E = "";
-      w > 0 && S !== " " && !/[.,!?;:]/.test(S) && (E = " ");
+      v > 0 && S !== " " && !/[.,!?;:]/.test(S) && (E = " ");
       let j = "";
-      A && A !== " " && !/[.,!?;:]/.test(A) && (j = " "), u.chain().insertContent(E + h + j).run();
+      B && B !== " " && !/[.,!?;:]/.test(B) && (j = " "), u.chain().insertContent(E + h + j).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4572,73 +4574,73 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   onChange: r
 }) => {
   var L;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [b, k] = useState(-1), w = useRef(null), S = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [b, y] = useState(-1), v = useRef(null), S = (L = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
-    if (h(""), x([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), y = get(v, 1, "page") || "page";
-    g(y), (async () => {
-      const _ = await l(y, [get(v, 2, "page")]);
+    if (h(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const C = split(o, ":"), k = get(C, 1, "page") || "page";
+    g(k), (async () => {
+      const _ = await l(k, [get(C, 2, "page")]);
       _ && Array.isArray(_) && h(get(_, [0, "name"], ""));
     })();
   }, [o]);
-  const A = useDebouncedCallback(
-    async (v) => {
-      if (isEmpty(v))
+  const B = useDebouncedCallback(
+    async (C) => {
+      if (isEmpty(C))
         x([]);
       else {
-        const y = await l(u, v);
-        x(y);
+        const k = await l(u, C);
+        x(k);
       }
-      c(!1), k(-1);
+      c(!1), y(-1);
     },
     [u],
     300
-  ), E = (v) => {
-    const y = ["pageType", u, v.id];
-    y[1] && (r(y.join(":")), h(v.name), p(!1), x([]), k(-1));
-  }, j = (v) => {
-    switch (v.key) {
+  ), E = (C) => {
+    const k = ["pageType", u, C.id];
+    k[1] && (r(k.join(":")), h(C.name), p(!1), x([]), y(-1));
+  }, j = (C) => {
+    switch (C.key) {
       case "ArrowDown":
-        v.preventDefault(), k((y) => y < f.length - 1 ? y + 1 : y);
+        C.preventDefault(), y((k) => k < f.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        v.preventDefault(), k((y) => y > 0 ? y - 1 : y);
+        C.preventDefault(), y((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
-        if (v.preventDefault(), f.length === 0) return;
+        if (C.preventDefault(), f.length === 0) return;
         b >= 0 && E(f[b]);
         break;
       case "Escape":
-        v.preventDefault(), C();
+        C.preventDefault(), w();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && w.current) {
-      const v = w.current.children[b];
-      v == null || v.scrollIntoView({ block: "nearest" });
+    if (b >= 0 && v.current) {
+      const C = v.current.children[b];
+      C == null || C.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const C = () => {
-    h(""), x([]), k(-1), p(!1), r("");
-  }, B = (v) => {
-    h(v), p(!isEmpty(v)), c(!0), A(v);
+  const w = () => {
+    h(""), x([]), y(-1), p(!1), r("");
+  }, A = (C) => {
+    h(C), p(!isEmpty(C)), c(!0), B(C);
   };
   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)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(n, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (v) => B(v.target.value),
+          onChange: (C) => A(C.target.value),
           onKeyDown: j,
           placeholder: a(`Search ${S ?? ""}`),
           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: m && /* @__PURE__ */ jsx("button", { onClick: C, 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: m && /* @__PURE__ */ jsx("button", { onClick: w, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__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" }),
@@ -4648,22 +4650,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: w, children: map(f == null ? void 0 : f.slice(0, 20), (v, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(f == null ? void 0 : f.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => E(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : y === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => E(C),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : k === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          v.name,
+          C.name,
           " ",
-          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          C.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            v.slug,
+            C.slug,
             " )"
           ] })
         ]
       },
-      v.id
+      C.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
@@ -4748,16 +4750,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x + 1) % u.length, k = get(u, [b, "_id"]);
-      if (!k) return;
-      n({ ...o, currentSlide: k }), c([k]);
+      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
+      if (!y) return;
+      n({ ...o, currentSlide: y }), c([y]);
     }
   }, h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x - 1 + u.length) % u.length, k = get(u, [b, "_id"]);
-      if (!k) return;
-      n({ ...o, currentSlide: k }), c([k]);
+      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+      if (!y) return;
+      n({ ...o, currentSlide: y }), c([y]);
     }
   }, f = () => {
     const x = i(
@@ -4883,8 +4885,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(h) ? f : h, k = get(LANGUAGES, b, b), w = usePageExternalData(), S = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [S == null ? void 0 : S._type, "i18nProps"], []) || [], [j, C] = useState(null), B = useCallback(
-    (y) => {
+  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(h) ? f : h, y = get(LANGUAGES, b, b), v = usePageExternalData(), S = useSelectedBlock(), B = useRegisteredChaiBlocks(), E = get(B, [S == null ? void 0 : S._type, "i18nProps"], []) || [], [j, w] = useState(null), A = useCallback(
+    (k) => {
       const _ = (P) => /[.,!?;:]/.test(P), T = (P, N, M) => {
         let D = "", O = "";
         const $ = N > 0 ? P[N - 1] : "", H = N < P.length ? P[N] : "";
@@ -4899,7 +4901,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       if (R && (R.querySelector(".ProseMirror") || R.__chaiRTE)) {
         const P = R.__chaiRTE;
         if (P) {
-          const N = `{{${y}}}`;
+          const N = `{{${k}}}`;
           P.commands.focus();
           const { from: M, to: D } = P.state.selection;
           if (M !== D)
@@ -4917,11 +4919,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       } else {
         const P = I, N = P.selectionStart || 0, M = P.value || "", D = P.selectionEnd || N;
         if (D > N) {
-          const F = `{{${y}}}`, { text: z } = T(M, N, F), W = M.slice(0, N) + z + M.slice(D);
+          const F = `{{${k}}}`, { text: z } = T(M, N, F), W = M.slice(0, N) + z + M.slice(D);
           m(W, {}, o);
           return;
         }
-        const $ = `{{${y}}}`, { text: H } = T(M, N, $), U = M.slice(0, N) + H + M.slice(N);
+        const $ = `{{${k}}}`, { text: H } = T(M, N, $), U = M.slice(0, N) + H + M.slice(N);
         m(U, {}, o);
       }
     },
@@ -4930,18 +4932,18 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const v = E == null ? void 0 : E.includes(o.replace("root.", ""));
+  const C = E == null ? void 0 : E.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const y = j === o;
+    const k = j === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => C(y ? null : o),
+          onClick: () => w(k ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            y ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            k ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
             " ",
@@ -4949,7 +4951,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${y ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${k ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4962,13 +4964,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       /* @__PURE__ */ jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
         r,
         " ",
-        v && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+        C && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
-          k
+          y
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && w && /* @__PURE__ */ jsx(NestedPathSelector, { data: w, onSelect: B, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && v && /* @__PURE__ */ jsx(NestedPathSelector, { data: v, onSelect: A, dataType: "value" })
     ] }),
     c,
     a,
@@ -5067,28 +5069,28 @@ 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(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: j }, C, B) => {
-    C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(j, C) }, B);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: j }, w, A) => {
+    w && (c == null ? void 0 : c._id) === n._id && a([n._id], { [w]: get(j, w) }, A);
   }, x = useCallback(
-    debounce(({ formData: j }, C, B) => {
-      f({ formData: j }, C, B), d(j);
+    debounce(({ formData: j }, w, A) => {
+      f({ formData: j }, w, A), d(j);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: j }, C) => {
-    C && (r([n._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
-  }, k = ({ formData: j }, C) => {
-    C && (r([g._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
+  ), b = ({ formData: j }, w) => {
+    w && (r([n._id], { [w]: get(j, w) }), x({ formData: j }, w, { [w]: get(c, w) }));
+  }, y = ({ formData: j }, w) => {
+    w && (r([g._id], { [w]: get(j, w) }), x({ formData: j }, w, { [w]: get(c, w) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: w, uiSchema: S } = useMemo(() => {
+  const { schema: v, uiSchema: S } = useMemo(() => {
     const j = n == null ? void 0 : n._type;
     if (j)
       return getBlockFormSchemas(j);
-  }, [n]), { wrapperSchema: A, wrapperUiSchema: E } = useMemo(() => {
+  }, [n]), { wrapperSchema: B, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const j = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: B = {} } = getBlockFormSchemas(j);
-    return { wrapperSchema: C, wrapperUiSchema: B };
+    const j = g == null ? void 0 : g._type, { schema: w = {}, uiSchema: A = {} } = getBlockFormSchemas(j);
+    return { wrapperSchema: w, wrapperUiSchema: A };
   }, [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: [
@@ -5114,20 +5116,20 @@ function BlockSettings() {
         JSONForm,
         {
           blockId: g == null ? void 0 : g._id,
-          onChange: k,
+          onChange: y,
           formData: h,
-          schema: A,
+          schema: B,
           uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(w) ? null : /* @__PURE__ */ jsx(
+    isEmpty(v) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: b,
         formData: i,
-        schema: w,
+        schema: v,
         uiSchema: S
       }
     ),
@@ -5233,32 +5235,32 @@ 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: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (k) => {
-    u.includes(k) ? u.length > 2 && g(u.filter((w) => w !== k)) : g((w) => [...w, k]);
-  }, x = (k) => {
-    n || l(k), c(k);
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (y) => {
+    u.includes(y) ? u.length > 2 && g(u.filter((v) => v !== y)) : g((v) => [...v, y]);
+  }, x = (y) => {
+    n || l(y), c(y);
   }, b = getBreakpointValue(n ? i : a).toLowerCase();
-  return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (k) => /* @__PURE__ */ createElement(
+  return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (y) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...k,
+      ...y,
       onClick: x,
-      key: k.breakpoint,
+      key: y.breakpoint,
       currentBreakpoint: b
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      h.filter((k) => includes(u, toUpper(k.breakpoint))),
-      (k) => /* @__PURE__ */ createElement(
+      h.filter((y) => includes(u, toUpper(y.breakpoint))),
+      (y) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
           tooltip: r,
-          ...k,
+          ...y,
           onClick: x,
-          key: k.breakpoint,
+          key: y.breakpoint,
           currentBreakpoint: b
         }
       )
@@ -5268,15 +5270,15 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(h, (k) => /* @__PURE__ */ jsx(
+        map(h, (y) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: k.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(k.breakpoint)),
-            checked: includes(u, toUpper(k.breakpoint)),
-            children: m(k.title)
+            disabled: y.breakpoint === "xs",
+            onCheckedChange: () => f(toUpper(y.breakpoint)),
+            checked: includes(u, toUpper(y.breakpoint)),
+            children: m(y.title)
           },
-          k.breakpoint
+          y.breakpoint
         ))
       ] })
     ] })
@@ -5414,10 +5416,10 @@ 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(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: k } = getSplitChaiClasses(get(p, b, "")), w = k.split(" ").filter((I) => !isEmpty(I)), S = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), v = y.split(" ").filter((I) => !isEmpty(I)), S = () => {
     const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, I, !0), x("");
-  }, [A, E] = useState([]), j = ({ value: I }) => {
+  }, [B, E] = useState([]), j = ({ value: I }) => {
     const R = I.trim().toLowerCase(), P = R.match(/.+:/g);
     let N = [];
     if (P && P.length > 0) {
@@ -5429,9 +5431,9 @@ function ManualClasses() {
     } else
       N = i.search(R);
     return E(map(N, "item"));
-  }, C = () => {
+  }, w = () => {
     E([]);
-  }, B = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
+  }, A = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), C = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5447,7 +5449,7 @@ function ManualClasses() {
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
-  ), y = (I) => {
+  ), k = (I) => {
     debugger;
     const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [I]), u(m, R, !0), r(""), l(-1);
@@ -5456,7 +5458,7 @@ function ManualClasses() {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(w.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(v.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
@@ -5479,12 +5481,12 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: A,
+          suggestions: B,
           onSuggestionsFetchRequested: j,
-          onSuggestionsClearRequested: C,
-          getSuggestionValue: B,
+          onSuggestionsClearRequested: w,
+          getSuggestionValue: A,
           renderSuggestion: L,
-          inputProps: v,
+          inputProps: C,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5507,7 +5509,7 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: w.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
       (I, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -5515,10 +5517,10 @@ function ManualClasses() {
           value: n,
           onChange: (P) => r(P.target.value),
           onBlur: () => {
-            y(I);
+            k(I);
           },
           onKeyDown: (P) => {
-            P.key === "Enter" && y(I);
+            P.key === "Enter" && k(I);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
@@ -5712,7 +5714,7 @@ const COLOR_PROP = {
   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", ""), m = get(u, "2", ""), h = 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((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
+      ["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" })));
     },
     [c, p]
   );
@@ -5733,8 +5735,8 @@ const COLOR_PROP = {
   }, [r]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
-    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, k) && n(k, o);
+    const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    x(o, y) && n(y, o);
   }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
@@ -6166,47 +6168,47 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, k] = useState(""), [w, S] = useState(!1), [A, E] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, y] = useState(""), [v, S] = useState(!1), [B, E] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: y } = getClassValueAndUnit(i);
-    if (y === "") {
-      l(v), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: C, unit: k } = getClassValueAndUnit(i);
+    if (k === "") {
+      l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(y), l(y === "class" || isEmpty(v) ? "" : v);
+    h(k), l(k === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
-  const j = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), C = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), B = useCallback(
-    (v = !1) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+  const j = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), w = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
+    (C = !1) => {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         x(!0);
         return;
       }
-      const _ = get(y, "unit") !== "" ? get(y, "unit") : m;
+      const _ = get(k, "unit") !== "" ? get(k, "unit") : m;
       if (_ === "auto" || _ === "none") {
         j(`${d}${_}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
-      v ? C(I) : j(I);
+      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      C ? w(I) : j(I);
     },
-    [j, C, a, m, d, u]
+    [j, w, a, m, d, u]
   ), L = useCallback(
-    (v) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+    (C) => {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         x(!0);
         return;
       }
-      if (v === "auto" || v === "none") {
-        j(`${d}${v}`);
+      if (C === "auto" || C === "none") {
+        j(`${d}${C}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const _ = get(y, "unit") !== "" ? get(y, "unit") : v, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      const _ = get(k, "unit") !== "" ? get(k, "unit") : C, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
       j(I);
     },
     [j, a, d, u]
@@ -6224,37 +6226,37 @@ const COLOR_PROP = {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${w ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (v) => {
-            v.key === "Enter" && B();
+          onKeyPress: (C) => {
+            C.key === "Enter" && A();
           },
-          onKeyDown: (v) => {
-            if (v.keyCode !== 38 && v.keyCode !== 40)
+          onKeyDown: (C) => {
+            if (C.keyCode !== 38 && C.keyCode !== 40)
               return;
-            v.preventDefault(), E(!0);
-            const y = parseInt$1(v.target.value);
-            let _ = isNaN$1(y) ? 0 : y;
-            v.keyCode === 38 && (_ += 1), v.keyCode === 40 && (_ -= 1);
+            C.preventDefault(), E(!0);
+            const k = parseInt$1(C.target.value);
+            let _ = isNaN$1(k) ? 0 : k;
+            C.keyCode === 38 && (_ += 1), C.keyCode === 40 && (_ -= 1);
             const T = `${_}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
-            C(R);
+            w(R);
           },
-          onKeyUp: (v) => {
-            A && (v.preventDefault(), E(!1));
+          onKeyUp: (C) => {
+            B && (C.preventDefault(), E(!1));
           },
-          onBlur: () => B(),
-          onChange: (v) => {
-            x(!1), l(v.target.value);
+          onBlur: () => A(),
+          onChange: (C) => {
+            x(!1), l(C.target.value);
           },
-          onClick: (v) => {
-            var y;
-            (y = v == null ? void 0 : v.target) == null || y.select(), r(!1);
+          onClick: (C) => {
+            var k;
+            (k = C == null ? void 0 : C.target) == null || k.select(), r(!1);
           },
-          value: w ? b : a,
+          value: v ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6279,29 +6281,29 @@ const COLOR_PROP = {
           {
             units: u,
             current: m,
-            onSelect: (v) => {
-              r(!1), h(v), L(v);
+            onSelect: (C) => {
+              r(!1), h(C), L(C);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || w ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || v ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => S(!0),
-        onDragEnd: (v) => {
-          if (k(() => ""), S(!1), isEmpty(v))
+        onDragEnd: (C) => {
+          if (y(() => ""), S(!1), isEmpty(C))
             return;
-          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
           j(T);
         },
-        onDrag: (v) => {
-          if (isEmpty(v))
+        onDrag: (C) => {
+          if (isEmpty(C))
             return;
-          k(v);
-          const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          C(T);
+          y(C);
+          const k = `${C}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
+          w(T);
         },
         currentValue: a,
         unit: m,
@@ -6398,32 +6400,32 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), k = useCallback(
-    (C, B = !0) => {
-      const L = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+    (w, A = !0) => {
+      const L = { dark: p, mq: g, mod: u, cls: w, property: l, fullCls: "" };
       (p || u !== "") && (L.mq = "xs");
-      const v = generateFullClsName(L);
-      h(x, [v], B);
+      const C = generateFullClsName(L);
+      h(x, [C], A);
     },
     [x, p, g, u, l, h]
-  ), w = useCallback(() => {
+  ), v = useCallback(() => {
     f(x, [b], !0);
   }, [x, b, f]), S = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(S, m);
   }, [S, i, m]);
-  const [, , A] = useScreenSizeWidth(), E = useCallback(
-    (C) => {
-      A({
+  const [, , B] = useScreenSizeWidth(), E = useCallback(
+    (w) => {
+      B({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[w]);
     },
-    [A]
+    [B]
   ), j = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
   return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: m && 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] ${m && !j ? "text-foreground" : ""}`, children: n(a) }) }),
@@ -6435,17 +6437,17 @@ const COLOR_PROP = {
             currentClass: get(m, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: k,
+            onChange: y,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: k }),
-        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: k }),
-        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: k }),
-        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: k })
+        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 })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => w(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6857,22 +6859,22 @@ const CHAI_BUILDER_EVENTS = {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, h, f, x, b, k, w, S;
+  var m, h, f, x, b, y, v, S;
   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(
-    (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
+    (B) => B.key === "data-chai-richtext" || B.key === "chai-richtext"
   ), c = l.find(
-    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
+    (B) => B.key === "data-chai-lightbox" || B.key === "chai-lightbox"
   ), d = l.find(
-    (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
+    (B) => B.key === "data-chai-dropdown" || B.key === "chai-dropdown"
   ), p = l.find(
-    (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
+    (B) => B.key === "data-chai-dropdown-button" || B.key === "chai-dropdown-button"
   ), u = l.find(
-    (A) => A.key === "data-chai-dropdown-content" || A.key === "chai-dropdown-content"
+    (B) => B.key === "data-chai-dropdown-content" || B.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6880,13 +6882,13 @@ const CHAI_BUILDER_EVENTS = {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const A = r.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
-    A && (a._name = A.value);
+    const B = r.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    B && (a._name = B.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 A = [
+    const B = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6902,39 +6904,39 @@ const CHAI_BUILDER_EVENTS = {
       hrefType: ((h = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
       autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
       maxWidth: ((b = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : b.replace("px", "")) || "",
-      backdropColor: ((k = l.find((E) => E.key === "data-overlay")) == null ? void 0 : k.value) || "",
-      galleryName: ((w = l.find((E) => E.key === "data-gall")) == null ? void 0 : w.value) || ""
-    }, forEach(A, (E) => {
+      backdropColor: ((y = l.find((E) => E.key === "data-overlay")) == null ? void 0 : y.value) || "",
+      galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
+    }, forEach(B, (E) => {
       has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const A = filter(r.children || [], (j) => (j == null ? void 0 : j.tagName) !== "span");
-    a.content = getTextContent(A);
+    const B = filter(r.children || [], (j) => (j == null ? void 0 : j.tagName) !== "span");
+    a.content = getTextContent(B);
     const E = find(
       r.children || [],
-      (j) => (j == null ? void 0 : j.tagName) === "span" && some(j.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
+      (j) => (j == null ? void 0 : j.tagName) === "span" && some(j.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg")
     );
     if (E) {
-      const j = find(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+      const j = find(E.children || [], (w) => (w == null ? void 0 : w.tagName) === "svg");
       if (j) {
         a.icon = stringify([j]);
-        const { height: C, width: B } = getSvgDimensions(j, "16px", "16px");
-        a.iconHeight = C, a.iconWidth = B;
+        const { height: w, width: A } = getSvgDimensions(j, "16px", "16px");
+        a.iconHeight = w, a.iconWidth = A;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const A = a.inputType || "text";
-    A === "checkbox" ? set(a, "_type", "Checkbox") : A === "radio" && set(a, "_type", "Radio");
+    const B = a.inputType || "text";
+    B === "checkbox" ? set(a, "_type", "Checkbox") : B === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const A = stringify([r]);
-    return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
+    const B = stringify([r]);
+    return hasVideoEmbed(B) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(B)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = B, [a];
   } else if (r.tagName === "svg") {
-    const A = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), j = get(A, "value") ? `[${get(A, "value")}px]` : "24px", C = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${C} h-${j}`, B)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
+    const B = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), j = get(B, "value") ? `[${get(B, "value")}px]` : "24px", w = get(E, "value") ? `[${get(E, "value")}px]` : "24px", A = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${w} h-${j}`, A)}`.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 && ((S = n.block) == null ? void 0 : S._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -7009,19 +7011,19 @@ const CHAI_BUILDER_EVENTS = {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const h = Object.entries(a).map(([x, b]) => {
-          const k = b, w = k.type || "partial", S = formatReadableName(w);
+          const y = b, v = y.type || "partial", S = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(k.name || x),
-            description: k.description || "",
+            label: formatReadableName(y.name || x),
+            description: y.description || "",
             icon: Globe,
             group: S,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
             // Store the original ID as partialBlockId
-            _name: k.name
+            _name: y.name
           };
         }), f = uniq(map(h, "group"));
         p({
@@ -7069,44 +7071,44 @@ const CHAI_BUILDER_EVENTS = {
     }
   );
 }, 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), m = (v = find(c, (y) => y._id === r)) == null ? void 0 : v._type, [h, f] = useState("all"), [x, b] = useState(null), k = useRef(null);
+  var C;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (k) => k._id === r)) == null ? void 0 : C._type, [h, f] = useState("all"), [x, b] = useState(null), y = useRef(null);
   useEffect(() => {
-    const y = setTimeout(() => {
+    const k = setTimeout(() => {
       var _;
       (_ = u.current) == null || _.focus();
     }, 0);
-    return () => clearTimeout(y);
+    return () => clearTimeout(k);
   }, [g]), useEffect(() => {
     d && (f("all"), b(null));
-  }, [d]), useEffect(() => (k.current = debounce((y) => {
-    f(y);
+  }, [d]), useEffect(() => (y.current = debounce((k) => {
+    f(k);
   }, 500), () => {
-    k.current && k.current.cancel();
+    y.current && y.current.cancel();
   }), []);
-  const w = useCallback((y) => {
-    b(y), k.current && k.current(y);
+  const v = useCallback((k) => {
+    b(k), y.current && y.current(k);
   }, []), S = useCallback(() => {
-    b(null), k.current && k.current.cancel();
-  }, []), A = useCallback((y) => {
-    k.current && k.current.cancel(), f(y), b(null);
+    b(null), y.current && y.current.cancel();
+  }, []), B = useCallback((k) => {
+    y.current && y.current.cancel(), f(k), b(null);
   }, []), E = useMemo(
     () => d ? values(n).filter(
-      (y) => {
+      (k) => {
         var _, T;
-        return (((_ = y.label) == null ? void 0 : _.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+        return (((_ = k.label) == null ? void 0 : _.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
   ), j = useMemo(
     () => d ? o.filter(
-      (y) => reject(filter(values(E), { group: y }), { hidden: !0 }).length > 0
-    ) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
+      (k) => reject(filter(values(E), { group: k }), { hidden: !0 }).length > 0
+    ) : o.filter((k) => reject(filter(values(n), { group: k }), { hidden: !0 }).length > 0),
     [n, E, o, d]
-  ), C = useMemo(
-    () => sortBy(j, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
+  ), w = useMemo(
+    () => sortBy(j, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
     [j]
-  ), B = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), L = useMemo(() => h === "all" ? C : [h], [C, h]);
+  ), A = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), L = useMemo(() => h === "all" ? w : [h], [w, h]);
   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,
@@ -7116,32 +7118,32 @@ const CHAI_BUILDER_EVENTS = {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (y) => p(y.target.value)
+        onChange: (k) => p(k.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      C.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: [
+      w.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: () => A("all"),
-            onMouseEnter: () => w("all"),
+            onClick: () => B("all"),
+            onMouseEnter: () => v("all"),
             onMouseLeave: S,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        C.map((y) => /* @__PURE__ */ jsx(
+        w.map((k) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => A(y),
-            onMouseEnter: () => w(y),
+            onClick: () => B(k),
+            onMouseEnter: () => v(k),
             onMouseLeave: S,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === y || x === y ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
-            children: capitalize(i(y.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === k || x === k ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
+            children: capitalize(i(k.toLowerCase()))
           },
-          `sidebar-${y}`
+          `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: 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: [
@@ -7149,10 +7151,10 @@ const CHAI_BUILDER_EVENTS = {
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(B), { group: y }) : values(B),
+          h === "all" ? filter(values(A), { group: k }) : values(A),
           { hidden: !0 }
         ).map((_) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7164,7 +7166,7 @@ const CHAI_BUILDER_EVENTS = {
           },
           _.type
         )) })
-      ] }, y)) }) }) })
+      ] }, k)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7262,12 +7264,12 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), x = (w) => {
-    const S = has(w, "styles_attrs.data-page-section");
-    return w._type === "Box" && S;
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), x = (v) => {
+    const S = has(v, "styles_attrs.data-page-section");
+    return v._type === "Box" && S;
   }, b = useCallback(
-    async (w) => {
-      if (w.stopPropagation(), has(o, "component")) {
+    async (v) => {
+      if (v.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
@@ -7284,18 +7286,18 @@ const BlockCard = ({
         onClick: l ? () => {
         } : b,
         draggable: h ? "true" : "false",
-        onDragStart: async (w) => {
+        onDragStart: async (v) => {
           const S = await c(n, o);
-          let A = r;
-          if (x(first(S)) && (A = null), !isEmpty(S)) {
-            const E = { blocks: S, uiLibrary: !0, parent: A };
-            if (w.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
+          let B = r;
+          if (x(first(S)) && (B = null), !isEmpty(S)) {
+            const E = { blocks: S, uiLibrary: !0, parent: B };
+            if (v.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
               const j = new Image();
               j.src = o.preview, j.onload = () => {
-                w.dataTransfer.setDragImage(j, 0, 0);
+                v.dataTransfer.setDragImage(j, 0, 0);
               };
             } else
-              w.dataTransfer.setDragImage(new Image(), 0, 0);
+              v.dataTransfer.setDragImage(new Image(), 0, 0);
             f(E), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
@@ -7316,13 +7318,13 @@ const BlockCard = ({
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = l.find((w) => w.id === r) || first(l), { data: c, isLoading: d } = useLibraryBlocks(i), p = groupBy([...c], "group"), [u, g] = useState(null);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = l.find((v) => v.id === r) || first(l), { data: c, isLoading: d } = useLibraryBlocks(i), p = groupBy([...c], "group"), [u, g] = useState(null);
   useEffect(() => {
     u || g(first(keys(p)));
   }, [p, u]);
-  const m = get(p, u, []), h = useRef(null), { t: f } = useTranslation(), x = (w) => {
+  const m = get(p, u, []), h = useRef(null), { t: f } = useTranslation(), x = (v) => {
     h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
-      h.current && g(w);
+      h.current && g(v);
     }, 300);
   };
   if (d)
@@ -7330,14 +7332,14 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const b = filter(m, (w, S) => S % 2 === 0), k = filter(m, (w, S) => S % 2 === 1);
+  const b = filter(m, (v, S) => S % 2 === 0), y = filter(m, (v, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, 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: f("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: map(p, (w, S) => /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: map(p, (v, S) => /* @__PURE__ */ jsxs(
           "div",
           {
             onMouseEnter: () => x(S),
@@ -7363,22 +7365,22 @@ const BlockCard = ({
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: b.map((w, S) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: b.map((v, S) => /* @__PURE__ */ jsx(
               BlockCard,
               {
                 parentId: o,
                 position: n,
-                block: w,
+                block: v,
                 library: i
               },
               `block-${S}`
             )) }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: k.map((w, S) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: y.map((v, S) => /* @__PURE__ */ jsx(
               BlockCard,
               {
                 parentId: o,
                 position: n,
-                block: w,
+                block: v,
                 library: i
               },
               `block-${S}`
@@ -7625,26 +7627,26 @@ const selectParent = (o, n) => {
   var P;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom), { hasPermission: p } = usePermissions();
   let u = null;
-  const g = o.children.length > 0, { highlightBlock: m, clearHighlight: h } = useBlockHighlight(), { id: f, data: x, isSelected: b, willReceiveDrop: k, isDragging: w, isEditing: S, handleClick: A } = o, E = (N) => {
+  const g = o.children.length > 0, { highlightBlock: m, clearHighlight: h } = useBlockHighlight(), { id: f, data: x, isSelected: b, willReceiveDrop: y, isDragging: v, isEditing: S, handleClick: B } = o, E = (N) => {
     N.stopPropagation(), !i.includes(f) && o.toggle();
   }, j = (N) => {
     N.isInternal && (u = N.isOpen, N.isOpen && N.close());
-  }, C = (N) => {
+  }, w = (N) => {
     N.isInternal && u !== null && (u ? N.open() : N.close(), u = null);
-  }, [B, L] = useAtom$1(currentAddSelection), v = () => {
+  }, [A, L] = useAtom$1(currentAddSelection), C = () => {
     var N;
-    y(), o.parent.isSelected || L((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
-  }, y = () => {
+    k(), o.parent.isSelected || L((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+  }, k = () => {
     L(null);
   }, _ = (N) => {
-    y(), N.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), A(N);
+    k(), N.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), B(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      k && !o.isOpen && !w && !i.includes(f) && o.toggle();
+      y && !o.isOpen && !v && !i.includes(f) && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [k, o, w]);
+  }, [y, o, v]);
   const T = useMemo(() => {
     const N = Object.keys(x), M = [];
     for (let D = 0; D < N.length; D++)
@@ -7659,7 +7661,7 @@ const selectParent = (o, n) => {
     const $ = O.getBoundingClientRect(), H = d.getBoundingClientRect();
     $.top >= H.top && $.left >= H.left && $.bottom <= H.bottom && $.right <= H.right || (D.documentElement.scrollTop = O.offsetTop - H.top);
   }, R = (N) => {
-    y();
+    k();
     const M = get(o, "parent.id");
     M !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: M, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
@@ -7689,7 +7691,7 @@ const selectParent = (o, n) => {
       "data-node-id": f,
       ref: i.includes(f) ? null : r,
       onDragStart: () => j(o),
-      onDragEnd: () => C(o),
+      onDragEnd: () => w(o),
       onDragOver: (N) => {
         N.preventDefault(), I(f, "yes");
       },
@@ -7706,8 +7708,8 @@ const selectParent = (o, n) => {
             onClick: (N) => {
               N.stopPropagation(), R(o.childIndex);
             },
-            onMouseEnter: v,
-            onMouseLeave: y,
+            onMouseEnter: C,
+            onMouseLeave: k,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7718,9 +7720,9 @@ const selectParent = (o, n) => {
             className: cn$1(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              k && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === B ? "bg-purple-100" : "",
-              w && "opacity-20",
+              y && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === A ? "bg-purple-100" : "",
+              v && "opacity-20",
               i.includes(f) ? "opacity-50" : ""
             ),
             children: [
@@ -8093,58 +8095,58 @@ const selectParent = (o, n) => {
     }
   );
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (w) => {
-    a(w);
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (v) => {
+    a(v);
   }, h = () => {
-    const w = l.find((S) => Object.keys(S)[0] === r);
-    if (w) {
-      const S = Object.values(w)[0];
+    const v = l.find((S) => Object.keys(S)[0] === r);
+    if (v) {
+      const S = Object.values(v)[0];
       S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? p(S) : console.error("Invalid preset structure:", S);
     } else
       console.error("Preset not found:", r);
   }, f = useDebouncedCallback(
-    (w, S) => {
+    (v, S) => {
       p(() => ({
         ...d,
         fontFamily: {
           ...d.fontFamily,
-          [w.replace(/font-/g, "")]: S
+          [v.replace(/font-/g, "")]: S
         }
       }));
     },
     [d],
     200
   ), x = useDebouncedCallback(
-    (w) => {
+    (v) => {
       p(() => ({
         ...d,
-        borderRadius: `${w}px`
+        borderRadius: `${v}px`
       }));
     },
     [d],
     200
   ), b = useDebouncedCallback(
-    (w, S) => {
+    (v, S) => {
       p(() => {
-        const A = get(d, `colors.${w}`);
-        return n ? set(A, 1, S) : set(A, 0, S), {
+        const B = get(d, `colors.${v}`);
+        return n ? set(B, 1, S) : set(B, 0, S), {
           ...d,
           colors: {
             ...d.colors,
-            [w]: A
+            [v]: B
           }
         };
       });
     },
     [d],
     200
-  ), k = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([S]) => {
-    const A = get(d, `colors.${S}.${n ? 1 : 0}`);
+  ), y = (v) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(v.items).map(([S]) => {
+    const B = get(d, `colors.${S}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: A,
+          value: B,
           onChange: (E) => b(S, E)
         }
       ),
@@ -8160,11 +8162,11 @@ const selectParent = (o, n) => {
             "select",
             {
               value: r,
-              onChange: (w) => m(w.target.value),
+              onChange: (v) => m(v.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((w) => /* @__PURE__ */ jsx("option", { value: Object.keys(w)[0], children: capitalize(Object.keys(w)[0]) }, Object.keys(w)[0]))
+                Array.isArray(l) && l.map((v) => /* @__PURE__ */ jsx("option", { value: Object.keys(v)[0], children: capitalize(Object.keys(v)[0]) }, Object.keys(v)[0]))
               ]
             }
           )
@@ -8181,14 +8183,14 @@ const selectParent = (o, n) => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([w, S]) => /* @__PURE__ */ jsx(
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([v, S]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: w,
-            value: d.fontFamily[w.replace(/font-/g, "")] || S[Object.keys(S)[0]],
-            onChange: (A) => f(w, A)
+            label: v,
+            value: d.fontFamily[v.replace(/font-/g, "")] || S[Object.keys(S)[0]],
+            onChange: (B) => f(v, B)
           },
-          w
+          v
         )) }),
         (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Border Radius") }),
@@ -8199,7 +8201,7 @@ const selectParent = (o, n) => {
         ] }),
         (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((w) => k(w)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((v) => y(v)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -8887,7 +8889,8 @@ function getFromQueryParams(o) {
   return (r = new URLSearchParams(window.location.search).get("flags")) == null ? void 0 : r.includes(o);
 }
 const FEATURE_TOGGLES = {
-  dnd: getFromQueryParams("dnd")
+  dnd: getFromQueryParams("dnd"),
+  aiChat: getFromQueryParams("ai-chat")
 }, setDebugLogs = (o) => {
 }, getParentNodeIds = (o, n) => {
   const r = [];
@@ -8909,6 +8912,138 @@ function usePubSub(o, n) {
     return () => r();
   }, [o, n]);
 }
+function AIChatPanel() {
+  const [o, n] = useState([]), [r, a] = useState(""), [l, i] = useState(!1), [c, d] = useState(null), p = useRef(null), u = useRef(null), g = useRef(null);
+  useEffect(() => {
+    var y;
+    (y = u.current) == null || y.scrollIntoView({ behavior: "smooth" });
+  }, [o]), useEffect(() => {
+    g.current && (g.current.style.height = "auto", g.current.style.height = `${Math.min(g.current.scrollHeight, 120)}px`);
+  }, [r]);
+  const m = async () => {
+    if (!r.trim() && !c) return;
+    const y = {
+      id: Date.now().toString(),
+      role: "user",
+      content: r,
+      timestamp: /* @__PURE__ */ new Date()
+    };
+    n((v) => [...v, y]), a(""), i(!0), setTimeout(() => {
+      const v = {
+        id: (Date.now() + 1).toString(),
+        role: "assistant",
+        content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
+        timestamp: /* @__PURE__ */ new Date()
+      };
+      n((S) => [...S, v]), i(!1), d(null);
+    }, 1500);
+  }, h = (y) => {
+    y.key === "Enter" && !y.shiftKey && (y.preventDefault(), m());
+  }, f = (y) => {
+    var S;
+    const v = (S = y.target.files) == null ? void 0 : S[0];
+    if (v) {
+      const B = new FileReader();
+      B.onload = (E) => {
+        var j;
+        d((j = E.target) == null ? void 0 : j.result);
+      }, B.readAsDataURL(v);
+    }
+  }, x = () => {
+    var y;
+    (y = p.current) == null || y.click();
+  }, b = () => {
+    d(null), p.current && (p.current.value = "");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-3", children: o.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-10 flex h-full flex-col items-center justify-center p-4 text-center text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Sparkles, { className: "mb-2 h-8 w-8 text-primary/50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Ask me anything to get started" })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      o.map((y) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex max-w-full gap-2",
+            y.role === "assistant" ? "items-start" : "items-start justify-end"
+          ),
+          children: [
+            y.role === "assistant" && /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-primary" }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "rounded-lg px-3 py-2 text-sm",
+                  y.role === "assistant" ? "bg-muted text-foreground" : "bg-primary text-primary-foreground"
+                ),
+                children: y.content
+              }
+            ),
+            y.role === "user" && /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-primary-foreground", children: "You" }) })
+          ]
+        },
+        y.id
+      )),
+      l && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 bg-primary/10", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted px-3 py-2", children: /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: u })
+    ] }) }),
+    c && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "relative h-20 w-20 overflow-hidden rounded-md", children: [
+      /* @__PURE__ */ jsx("img", { src: c || "/placeholder.svg", alt: "Attachment", className: "h-full w-full object-cover" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "destructive",
+          className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
+          onClick: b,
+          children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-auto p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ref: g,
+            value: r,
+            onChange: (y) => a(y.target.value),
+            onKeyDown: h,
+            placeholder: "Ask something...",
+            className: "max-h-[120px] min-h-[40px] resize-none border-0 bg-muted/50 py-2.5 pr-10 focus-visible:ring-1"
+          }
+        ),
+        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: f, accept: "image/*", className: "hidden" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "icon",
+            variant: "ghost",
+            className: "absolute bottom-2 right-2 h-6 w-6",
+            onClick: x,
+            children: /* @__PURE__ */ jsx(Image$1, { className: "h-4 w-4 text-muted-foreground" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          className: "h-10 px-3",
+          onClick: m,
+          disabled: l || !r.trim() && !c,
+          children: [
+            /* @__PURE__ */ jsx(Send, { className: "mr-1 h-4 w-4" }),
+            "Send"
+          ]
+        }
+      )
+    ] }) })
+  ] });
+}
 const AiAssistant = () => {
   const o = useAiAssistant(), [n] = useRightPanel(), r = useBuilderProp("askAiCallBack", null), { t: a } = useTranslation(), { hasPermission: l } = usePermissions();
   return !r || !l(PERMISSIONS.EDIT_BLOCK) ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
@@ -8956,7 +9091,7 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: a("Toggle Data Binding") }) })
   ] }) });
 }, CanvasTopBar = () => {
-  const o = useBuilderProp("darkMode", !0), [n] = useCanvasZoom();
+  const o = useBuilderProp("darkMode", !0), n = useFeature("aiChat"), [r] = useCanvasZoom();
   return /* @__PURE__ */ jsxs("div", { className: "flex h-10 items-center justify-between border-b border-border bg-background/70 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full space-x-2", children: [
       /* @__PURE__ */ jsx(Breakpoints$1, { canvas: !0, openDelay: 400 }),
@@ -8969,7 +9104,7 @@ const AiAssistant = () => {
         /* @__PURE__ */ jsx(ZoomInIcon, { className: "h-3.5 w-3.5 flex-shrink-0" }),
         " ",
         /* @__PURE__ */ jsxs("div", { className: "text-xs leading-3", children: [
-          round(n, 0),
+          round(r, 0),
           "%"
         ] })
       ] }),
@@ -8979,7 +9114,7 @@ const AiAssistant = () => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center space-x-2", children: [
       /* @__PURE__ */ jsx(ClearCanvas, {}),
-      /* @__PURE__ */ jsx(AiAssistant, {})
+      n ? null : /* @__PURE__ */ jsx(AiAssistant, {})
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({
@@ -8990,49 +9125,49 @@ const AiAssistant = () => {
   useEffect(() => {
     l(n);
   }, [n]);
-  const k = () => {
+  const y = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const C = [...a, { key: i, value: d }];
-      r(C), l(a), c(""), p(""), h("");
+      const w = [...a, { key: i, value: d }];
+      r(w), l(a), c(""), p(""), h("");
     }
-  }, w = (C) => {
-    const B = a.filter((L, v) => v !== C);
-    r(B), l(B);
-  }, S = (C) => {
-    g(C), c(a[C].key), p(a[C].value);
-  }, A = () => {
+  }, v = (w) => {
+    const A = a.filter((L, C) => C !== w);
+    r(A), l(A);
+  }, S = (w) => {
+    g(w), c(a[w].key), p(a[w].value);
+  }, B = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const C = [...a];
-      C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), h("");
+      const w = [...a];
+      w[u] = { key: i, value: d }, r(w), l(w), g(null), c(""), p(""), h("");
     }
-  }, E = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? A() : k());
-  }, j = useCallback((C) => {
-    const B = (y) => /[.,!?;:]/.test(y), L = (y, _, T) => {
+  }, E = (w) => {
+    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), u !== null ? B() : y());
+  }, j = useCallback((w) => {
+    const A = (k) => /[.,!?;:]/.test(k), L = (k, _, T) => {
       let I = "", R = "";
-      const P = _ > 0 ? y[_ - 1] : "", N = _ < y.length ? y[_] : "";
-      return _ > 0 && (P === "." || !B(P) && P !== " ") && (I = " "), _ < y.length && !B(N) && N !== " " && (R = " "), {
+      const P = _ > 0 ? k[_ - 1] : "", N = _ < k.length ? k[_] : "";
+      return _ > 0 && (P === "." || !A(P) && P !== " ") && (I = " "), _ < k.length && !A(N) && N !== " " && (R = " "), {
         text: I + T + R,
         prefixLength: I.length,
         suffixLength: R.length
       };
-    }, v = x.current;
-    if (v) {
-      const y = v.selectionStart || 0, _ = v.value || "", T = v.selectionEnd || y;
-      if (T > y) {
-        const M = `{{${C}}}`, { text: D } = L(_, y, M), O = _.slice(0, y) + D + _.slice(T);
+    }, C = x.current;
+    if (C) {
+      const k = C.selectionStart || 0, _ = C.value || "", T = C.selectionEnd || k;
+      if (T > k) {
+        const M = `{{${w}}}`, { text: D } = L(_, k, M), O = _.slice(0, k) + D + _.slice(T);
         p(O);
         return;
       }
-      const R = `{{${C}}}`, { text: P } = L(_, y, R), N = _.slice(0, y) + P + _.slice(y);
+      const R = `{{${w}}}`, { text: P } = L(_, k, R), N = _.slice(0, k) + P + _.slice(k);
       p(N);
     }
   }, []);
@@ -9040,8 +9175,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (C) => {
-          C.preventDefault(), u !== null ? A() : k();
+        onSubmit: (w) => {
+          w.preventDefault(), u !== null ? B() : y();
         },
         className: "space-y-3",
         children: [
@@ -9057,7 +9192,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: f,
                   value: i,
-                  onChange: (C) => c(C.target.value),
+                  onChange: (w) => c(w.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9078,7 +9213,7 @@ const AiAssistant = () => {
                   rows: 2,
                   ref: x,
                   value: d,
-                  onChange: (C) => p(C.target.value),
+                  onChange: (w) => p(w.target.value),
                   onKeyDown: E,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -9091,16 +9226,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, B) => /* @__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((w, A) => /* @__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: C.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: w.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: w.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: () => S(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(A), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, B)) })
+    ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9294,27 +9429,38 @@ const ChooseLayout = ({ open: o, close: n }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-DZ2jHLv7.js"));
+}, TopBar = lazy(() => import("./Topbar-CX5hnmQJ.js")), DEFAULT_PANEL_WIDTH = 280;
 function useSidebarMenuItems() {
-  return useMemo(() => compact([
-    {
+  const o = useBuilderProp("askAiCallBack", null), n = useFeature("aiChat");
+  return useMemo(() => {
+    const r = [];
+    return r.push({
+      id: "outline",
       icon: /* @__PURE__ */ jsx(Layers, { size: 20 }),
       label: "Outline",
       isInternal: !0,
+      width: DEFAULT_PANEL_WIDTH,
       component: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
-    }
-  ]), []);
+    }), o && n && r.unshift({
+      id: "ai",
+      icon: /* @__PURE__ */ jsx(SparklesIcon, { size: 20 }),
+      label: "AI Assistant",
+      isInternal: !0,
+      width: 450,
+      component: () => /* @__PURE__ */ jsx("div", { className: "-mt-8 h-full max-h-full", children: /* @__PURE__ */ jsx(AIChatPanel, {}) })
+    }), compact(r);
+  }, [o, n]);
 }
 const RootLayout = () => {
-  const [o, n] = useState(0), [r, a] = useState(!1), [l, i] = useRightPanel();
+  const [o, n] = useAtom$1(sidebarActivePanelAtom), [r, a] = useState(!1), [l, i] = useRightPanel();
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
-    n(1);
+    n("outline");
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (x) => {
-    x.preventDefault();
-  }, u = (x) => {
-    n(o === x ? null : x);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), h = [...g, ...c], f = useBuilderProp("htmlDir", "ltr");
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (y) => {
+    y.preventDefault();
+  }, u = (y) => {
+    n(o === y ? null : y);
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), h = useMemo(() => [...g, ...c], [g, c]), f = useBuilderProp("htmlDir", "ltr"), x = find(h, { id: o }), b = get(x, "width", DEFAULT_PANEL_WIDTH);
   return /* @__PURE__ */ jsx("div", { dir: f, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -9324,42 +9470,42 @@ const RootLayout = () => {
         children: [
           /* @__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: h.map((x, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex h-full w-12 flex-col items-center justify-between border-r border-border py-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: h.map((y, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === b ? "default" : "ghost",
+                    variant: o === y.id ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(b),
-                    children: get(x, "icon", null)
+                    onClick: () => u(y.id),
+                    children: get(y, "icon", null)
                   },
-                  b
+                  v
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(x.label) }) })
-              ] }, "button" + b)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(y.label) }) })
+              ] }, "button" + v)) }),
               /* @__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 h-full flex-col", children: d == null ? void 0 : d.map((y, v) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(y, {}) }, `sidebar-component-${v}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: 280 },
-                animate: { width: o !== null ? 280 : 0 },
+                initial: { width: b },
+                animate: { width: o !== null ? b : 0 },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(h, `${o}.isInternal`, !1) ? "" : "w-64"}`,
+                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(x, "isInternal", !1) ? "" : "w-64"}`,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(h, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: m(h[o].label) })
+                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(x, "icon", null) }),
+                        /* @__PURE__ */ jsx("span", { children: m(x == null ? void 0 : x.label) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(h, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(x, "component", null), {}) }) })
                 ] })
               }
             ),
@@ -9371,8 +9517,8 @@ const RootLayout = () => {
               motion.div,
               {
                 className: "h-full max-h-full border-l border-border",
-                initial: { width: 280 },
-                animate: { width: 280 },
+                initial: { width: o === "ai" ? 0 : DEFAULT_PANEL_WIDTH },
+                animate: { width: o === "ai" ? 0 : DEFAULT_PANEL_WIDTH },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col overflow-hidden p-3", children: [
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -9395,7 +9541,7 @@ const RootLayout = () => {
                       }
                     )
                   ] }) : null }) }) }),
-                  /* @__PURE__ */ jsx("div", { className: "flex max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsx(SettingsPanel, {}) }) })
                 ] }) })
               }
             )