@chaibuilder/sdk 2.0.0 → 2.0.1

package/dist/core.js

@@ -1,19 +1,19 @@
 var G = Object.defineProperty;
 var K = (o, n, r) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
 var V = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { S as Skeleton, B as Button, a6 as Label, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, aa as ScrollArea, Y as DropdownMenuGroup, R as DropdownMenuItem, X as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
+import { O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, R as DropdownMenuItem, S as Skeleton, B as Button, a6 as Label, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, aa as ScrollArea, Y as DropdownMenuGroup, X as DropdownMenuShortcut, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
 import { atom as atom$1, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
-import { find, filter, flatten, map, omit, isString, has, isObject, memoize, get, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, findIndex, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
+import { find, filter, flatten, map, omit, isString, has, isObject, memoize, get, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, startCase, debounce, capitalize, split, take, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
 import { useTranslation, initReactI18next } from "react-i18next";
 import { useTranslation as He } from "react-i18next";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1 } from "./Functions-BGzDsf1z.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
@@ -93,17 +93,17 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...h) => m.read(...h), p = (m, ...h) => m.write(...h), u = (m, h) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...f) => m.read(...f), p = (m, ...f) => m.write(...f), u = (m, f) => {
   var x;
-  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, h);
-}, g = (m, h) => {
+  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, f);
+}, g = (m, f) => {
   var x;
-  return (x = m.onMount) == null ? void 0 : x.call(m, h);
-}, ...f) => {
-  const m = f[0] || ((C) => {
+  return (x = m.onMount) == null ? void 0 : x.call(m, f);
+}, ...h) => {
+  const m = h[0] || ((C) => {
     let L = o.get(C);
     return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, L), u == null || u(C, S)), L;
-  }), h = f[1] || (() => {
+  }), f = h[1] || (() => {
     let C, L;
     const v = (k) => {
       try {
@@ -122,7 +122,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     } while (a.size || i.size || l.size);
     if (C)
       throw L;
-  }), x = f[2] || (() => {
+  }), x = h[2] || (() => {
     const C = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
     for (; k.length; ) {
       const B = k[k.length - 1], T = m(B);
@@ -146,23 +146,23 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
           P = !0;
           break;
         }
-      P && (y(T), E(T)), r.delete(T);
+      P && (b(T), E(T)), r.delete(T);
     }
-  }), y = f[3] || ((C) => {
+  }), b = h[3] || ((C) => {
     var L, v;
     const k = m(C);
     if (isAtomStateInitialized(k) && (n.has(C) && r.get(C) !== k.n || Array.from(k.d).every(
       ([R, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(R).n === O
+        b(R).n === O
       )
     )))
       return k;
     k.d.clear();
     let B = !0;
     const T = () => {
-      n.has(C) && (E(C), x(), h());
+      n.has(C) && (E(C), x(), f());
     }, I = (R) => {
       var O;
       if (isSelfAtom(C, R)) {
@@ -174,11 +174,11 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const M = y(R);
+      const $ = b(R);
       try {
-        return returnAtomValue(M);
+        return returnAtomValue($);
       } finally {
-        k.d.set(R, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(C, k.v, M), (O = n.get(R)) == null || O.t.add(C), B || T();
+        k.d.set(R, $.n), isPendingPromise(k.v) && addPendingPromiseToDependency(C, k.v, $), (O = n.get(R)) == null || O.t.add(C), B || T();
       }
     };
     let P, N;
@@ -192,11 +192,11 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             try {
               return A(C, ...R);
             } finally {
-              x(), h();
+              x(), f();
             }
         }), N;
       }
-    }, $ = k.n;
+    }, M = k.n;
     try {
       const R = d(C, I, D);
       return setAtomStateValueOrPromise(C, R, m), isPromiseLike$2(R) && ((L = R.onCancel) == null || L.call(R, () => P == null ? void 0 : P.abort()), R.then(
@@ -206,9 +206,9 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     } catch (R) {
       return delete k.v, k.e = R, ++k.n, k;
     } finally {
-      B = !1, $ !== k.n && r.get(C) === $ && (r.set(C, k.n), a.add(C), (v = c.c) == null || v.call(c, C));
+      B = !1, M !== k.n && r.get(C) === M && (r.set(C, k.n), a.add(C), (v = c.c) == null || v.call(c, C));
     }
-  }), b = f[4] || ((C) => {
+  }), y = h[4] || ((C) => {
     const L = [C];
     for (; L.length; ) {
       const v = L.pop(), k = m(v);
@@ -217,22 +217,22 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         r.set(B, T.n), L.push(B);
       }
     }
-  }), A = f[5] || ((C, ...L) => {
+  }), A = h[5] || ((C, ...L) => {
     let v = !0;
-    const k = (T) => returnAtomValue(y(T)), B = (T, ...I) => {
+    const k = (T) => returnAtomValue(b(T)), B = (T, ...I) => {
       var P;
       const N = m(T);
       try {
         if (isSelfAtom(C, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = N.n, $ = I[0];
-          setAtomStateValueOrPromise(T, $, m), E(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), b(T));
+          const D = N.n, M = I[0];
+          setAtomStateValueOrPromise(T, M, m), E(T), D !== N.n && (a.add(T), (P = c.c) == null || P.call(c, T), y(T));
           return;
         } else
           return A(T, ...I);
       } finally {
-        v || (x(), h());
+        v || (x(), f());
       }
     };
     try {
@@ -240,14 +240,14 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     } finally {
       v = !1;
     }
-  }), E = f[6] || ((C) => {
+  }), E = h[6] || ((C) => {
     var L;
     const v = m(C), k = n.get(C);
     if (k && !isPendingPromise(v.v)) {
       for (const [B, T] of v.d)
         if (!k.d.has(B)) {
           const I = m(B);
-          w(B).t.add(C), k.d.add(B), T !== I.n && (a.add(B), (L = c.c) == null || L.call(c, B), b(B));
+          w(B).t.add(C), k.d.add(B), T !== I.n && (a.add(B), (L = c.c) == null || L.call(c, B), y(B));
         }
       for (const B of k.d || [])
         if (!v.d.has(B)) {
@@ -256,12 +256,12 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
           T == null || T.t.delete(C);
         }
     }
-  }), w = f[7] || ((C) => {
+  }), w = h[7] || ((C) => {
     var L;
     const v = m(C);
     let k = n.get(C);
     if (!k) {
-      y(C);
+      b(C);
       for (const B of v.d.keys())
         w(B).t.add(C);
       if (k = {
@@ -275,7 +275,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             try {
               return A(C, ...P);
             } finally {
-              T || (x(), h());
+              T || (x(), f());
             }
           };
           try {
@@ -296,7 +296,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }
     }
     return k;
-  }), _ = f[8] || ((C) => {
+  }), _ = h[8] || ((C) => {
     var L;
     const v = m(C);
     let k = n.get(C);
@@ -328,27 +328,27 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     g,
     // building-block functions
     m,
-    h,
+    f,
     x,
-    y,
     b,
+    y,
     A,
     E,
     w,
     _
   ], S = {
-    get: (C) => returnAtomValue(y(C)),
+    get: (C) => returnAtomValue(b(C)),
     set: (C, ...L) => {
       try {
         return A(C, ...L);
       } finally {
-        x(), h();
+        x(), f();
       }
     },
     sub: (C, L) => {
       const k = w(C).l;
-      return k.add(L), h(), () => {
-        k.delete(L), _(C), h();
+      return k.add(L), f(), () => {
+        k.delete(L), _(C), f();
       };
     }
   };
@@ -387,16 +387,16 @@ function splitAtom(o, n) {
         let p = r.get(c);
         if (p)
           return p;
-        const u = d && r.get(d), g = [], f = [];
-        return c.forEach((m, h) => {
-          const x = h;
-          f[h] = x;
-          const y = u && u.atomList[u.keyList.indexOf(x)];
-          if (y) {
-            g[h] = y;
+        const u = d && r.get(d), g = [], h = [];
+        return c.forEach((m, f) => {
+          const x = f;
+          h[f] = x;
+          const b = u && u.atomList[u.keyList.indexOf(x)];
+          if (b) {
+            g[f] = b;
             return;
           }
-          const b = (E) => {
+          const y = (E) => {
             const w = E(l), _ = E(o), S = a(_, w == null ? void 0 : w.arr).keyList.indexOf(x);
             if (S < 0 || S >= _.length) {
               const C = c[a(c).keyList.indexOf(x)];
@@ -416,8 +416,8 @@ function splitAtom(o, n) {
               ...S.slice(L + 1)
             ]);
           };
-          g[h] = isWritable(o) ? atom(b, A) : atom(b);
-        }), u && u.keyList.length === f.length && u.keyList.every((m, h) => m === f[h]) ? p = u : p = { arr: c, atomList: g, keyList: f }, r.set(c, p), p;
+          g[f] = isWritable(o) ? atom(y, A) : atom(y);
+        }), u && u.keyList.length === h.length && u.keyList.every((m, f) => m === h[f]) ? p = u : p = { arr: c, atomList: g, keyList: h }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -453,17 +453,17 @@ function splitAtom(o, n) {
             case "move": {
               const u = c(i).indexOf(p.atom), g = p.before ? c(i).indexOf(p.before) : c(i).length;
               if (u >= 0 && g >= 0) {
-                const f = c(o);
+                const h = c(o);
                 u < g ? d(o, [
-                  ...f.slice(0, u),
-                  ...f.slice(u + 1, g),
-                  f[u],
-                  ...f.slice(g)
+                  ...h.slice(0, u),
+                  ...h.slice(u + 1, g),
+                  h[u],
+                  ...h.slice(g)
                 ]) : d(o, [
-                  ...f.slice(0, g),
-                  f[u],
-                  ...f.slice(g, u),
-                  ...f.slice(u + 1)
+                  ...h.slice(0, g),
+                  h[u],
+                  ...h.slice(g, u),
+                  ...h.slice(u + 1)
                 ]);
               }
               break;
@@ -489,7 +489,7 @@ function createJSONStorage(o = () => {
   let a, l;
   const i = {
     getItem: (p, u) => {
-      var g, f;
+      var g, h;
       const m = (x) => {
         if (x = x || "", a !== x) {
           try {
@@ -500,8 +500,8 @@ function createJSONStorage(o = () => {
           a = x;
         }
         return l;
-      }, h = (f = (g = o()) == null ? void 0 : g.getItem(p)) != null ? f : null;
-      return isPromiseLike$1(h) ? h.then(m) : m(h);
+      }, f = (h = (g = o()) == null ? void 0 : g.getItem(p)) != null ? h : null;
+      return isPromiseLike$1(f) ? f.then(m) : m(f);
     },
     setItem: (p, u) => {
       var g;
@@ -514,14 +514,14 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, g, f) => p(u, (m) => {
-    let h;
+  }, c = (p) => (u, g, h) => p(u, (m) => {
+    let f;
     try {
-      h = JSON.parse(m || "");
+      f = JSON.parse(m || "");
     } catch {
-      h = f;
+      f = h;
     }
-    g(h);
+    g(f);
   });
   let d;
   try {
@@ -532,8 +532,8 @@ function createJSONStorage(o = () => {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const g = (f) => {
-      f.storageArea === o() && f.key === p && u(f.newValue);
+    const g = (h) => {
+      h.storageArea === o() && h.key === p && u(h.newValue);
     };
     return window.addEventListener("storage", g), () => {
       window.removeEventListener("storage", g);
@@ -1147,22 +1147,22 @@ const useSelectedBlocksDisplayChild = () => ({
 }, removeNestedBlocks = (o, n) => {
   let r = [...o], a = [];
   n.forEach((d) => {
-    const p = r.find((f) => f._id === d);
+    const p = r.find((h) => h._id === d);
     if (!p || !p._parent) return;
-    const u = p._parent, g = r.filter((f) => f._parent === u);
+    const u = p._parent, g = r.filter((h) => h._parent === u);
     if (g.length === 2) {
-      const f = g.find((m) => m._id !== d);
-      if (f && f._type === "Text") {
-        const m = r.find((h) => h._id === u);
-        m && "content" in m && (r = r.map((h) => {
-          if (h._id === u) {
-            const x = { ...h, content: f.content };
-            return Object.keys(f).forEach((y) => {
-              y.startsWith("content-") && (x[y] = f[y]);
+      const h = g.find((m) => m._id !== d);
+      if (h && h._type === "Text") {
+        const m = r.find((f) => f._id === u);
+        m && "content" in m && (r = r.map((f) => {
+          if (f._id === u) {
+            const x = { ...f, content: h.content };
+            return Object.keys(h).forEach((b) => {
+              b.startsWith("content-") && (x[b] = h[b]);
             }), x;
           }
-          return h;
-        }), a.push(f._id));
+          return f;
+        }), a.push(h._id));
       }
     }
   });
@@ -1225,23 +1225,23 @@ function insertBlocksAtPosition(o, n, r, a) {
   let i = [...o];
   if (r) {
     const u = o.find((g) => g._id === r);
-    if (u && u.content !== void 0 && u.content !== "" && !o.some((f) => f._parent === r)) {
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((h) => h._parent === r)) {
       const m = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
         content: u.content
       };
-      Object.keys(u).forEach((h) => {
-        h.startsWith("content-") && (m[h] = u[h]);
-      }), l.unshift(m), i = i.map((h) => {
-        if (h._id === r) {
-          const x = { ...h, content: "" };
-          return Object.keys(x).forEach((y) => {
-            y.startsWith("content-") && (x[y] = "");
+      Object.keys(u).forEach((f) => {
+        f.startsWith("content-") && (m[f] = u[f]);
+      }), l.unshift(m), i = i.map((f) => {
+        if (f._id === r) {
+          const x = { ...f, content: "" };
+          return Object.keys(x).forEach((b) => {
+            b.startsWith("content-") && (x[b] = "");
           }), x;
         }
-        return h;
+        return f;
       });
     }
   }
@@ -1250,7 +1250,7 @@ function insertBlocksAtPosition(o, n, r, a) {
   const d = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
   let p = i.length;
   for (let u = 0, g = 0; u < i.length; u++)
-    if (i[u]._parent === r) {
+    if (r !== void 0 ? i[u]._parent === r : !i[u]._parent) {
       if (g === d) {
         p = u;
         break;
@@ -1270,17 +1270,19 @@ function findNodeById(o, n) {
   return o.first((r) => r.model._id === n) || null;
 }
 function moveNode(o, n, r, a) {
+  var u, g;
   const l = findNodeById(o, n), i = findNodeById(o, r);
-  if (l && i) {
-    l.drop(), i.children || (i.model.children = []);
-    try {
-      i.addChildAtIndex(l, a);
-    } catch (c) {
-      return console.error("Error adding child to parent:", c), !1;
-    }
-    return !0;
+  if (!l || !i) return !1;
+  i.children || (i.model.children = []);
+  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((h) => h.model._id === n);
+  l.drop(), c = Math.max(c, 0);
+  const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
+  try {
+    i.addChildAtIndex(l, p);
+  } catch (h) {
+    return console.error("Error adding child to parent:", h), !1;
   }
-  return !1;
+  return !0;
 }
 function handleOldParentTextBlock(o, n) {
   if (!n || !n._parent) return o;
@@ -1319,8 +1321,8 @@ function handleNewParentTextBlock(o, n, r) {
     const d = o.map((u) => {
       if (u._id === r) {
         const g = { ...u, content: "" };
-        return Object.keys(g).forEach((f) => {
-          f.startsWith("content-") && (g[f] = "");
+        return Object.keys(g).forEach((h) => {
+          h.startsWith("content-") && (g[h] = "");
         }), g;
       }
       return u;
@@ -1337,7 +1339,7 @@ function moveBlocksWithChildren(o, n, r, a) {
   const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
   if (moveNode(p, n, c, a)) {
     let u = flattenTree(p);
-    const g = u.find((f) => f._id === n);
+    const g = u.find((h) => h._id === n);
     return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
   }
   return i;
@@ -1387,50 +1389,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, y, b) => {
+    moveBlocks: (x, b, y) => {
       const A = map(x, (w) => {
         const j = n.find((L) => L._id === w)._parent || null, C = n.filter((L) => j ? L._parent === j : !L._parent).map((L) => L._id).indexOf(w);
         return { _id: w, oldParent: j, oldPosition: C };
       }), E = A.find(({ _id: w }) => w === x[0]);
-      E && E.oldParent === y && E.oldPosition === b || (i(x, y, b), o({
+      E && E.oldParent === b && E.oldPosition === y || (i(x, b, y), o({
         undo: () => each(A, ({ _id: w, oldParent: _, oldPosition: j }) => {
           i([w], _, j);
         }),
-        redo: () => i(x, y, b)
+        redo: () => i(x, b, y)
       }));
     },
-    addBlocks: (x, y, b) => {
-      a(x, y, b), o({
+    addBlocks: (x, b, y) => {
+      a(x, b, y), o({
         undo: () => l(map(x, "_id")),
-        redo: () => a(x, y, b)
+        redo: () => a(x, b, y)
       });
     },
     removeBlocks: (x) => {
       var E;
-      const y = (E = first(x)) == null ? void 0 : E._parent, A = n.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(x));
+      const b = (E = first(x)) == null ? void 0 : E._parent, A = n.filter((w) => b ? w._parent === b : !w._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, y, A),
+        undo: () => a(x, b, A),
         redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (x, y, b) => {
+    updateBlocks: (x, b, y) => {
       let A = [];
-      if (b)
-        A = map(x, (E) => ({ _id: E, ...b }));
+      if (y)
+        A = map(x, (E) => ({ _id: E, ...y }));
       else {
-        const E = keys(y);
+        const E = keys(b);
         A = map(x, (w) => {
           const _ = n.find((S) => S._id === w), j = { _id: w };
           return each(E, (S) => j[S] = _[S]), j;
         });
       }
-      c(map(x, (E) => ({ _id: E, ...y }))), o({
+      c(map(x, (E) => ({ _id: E, ...b }))), o({
         undo: () => c(A),
-        redo: () => c(map(x, (E) => ({ _id: E, ...y })))
+        redo: () => c(map(x, (E) => ({ _id: E, ...b })))
       });
     },
-    updateBlocksRuntime: (x, y) => {
-      c(map(x, (b) => ({ _id: b, ...y })));
+    updateBlocksRuntime: (x, b) => {
+      c(map(x, (y) => ({ _id: y, ...b })));
     },
     setNewBlocks: (x) => {
       r(x), o({
@@ -1439,12 +1441,12 @@ const useBlocksStoreManager = () => {
       });
     },
     updateMultipleBlocksProps: (x) => {
-      let y = [];
-      y = map(x, (b) => {
-        const A = keys(b), E = n.find((_) => _._id === b._id), w = {};
+      let b = [];
+      b = map(x, (y) => {
+        const A = keys(y), E = n.find((_) => _._id === y._id), w = {};
         return each(A, (_) => w[_] = E[_]), w;
       }), c(x), o({
-        undo: () => c(y),
+        undo: () => c(b),
         redo: () => c(x)
       });
     }
@@ -1482,12 +1484,12 @@ const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var m;
-      for (let h = 0; h < i.length; h++) {
-        const { _id: x } = i[h];
-        i[h]._id = generateUUID();
-        const y = filter(i, { _parent: x });
-        for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[h]._id;
+      for (let f = 0; f < i.length; f++) {
+        const { _id: x } = i[f];
+        i[f]._id = generateUUID();
+        const b = filter(i, { _parent: x });
+        for (let y = 0; y < b.length; y++)
+          b[y]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -1498,8 +1500,8 @@ const useAddBlock = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const y = i.blocks;
-        return a(y, c, d);
+        const b = i.blocks;
+        return a(b, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -1508,8 +1510,8 @@ const useAddBlock = () => {
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let f, m;
-      return c && (f = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(f == null ? void 0 : f._type, g._type) && f && (g._parent = f._parent, m = f._parent), r([g], m, d), n([g._id]), g;
+      let h, m;
+      return c && (h = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(h == null ? void 0 : h._type, g._type) && h && (g._parent = h._parent, m = h._parent), r([g], m, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2955,25 +2957,25 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
-    const x = cloneDeep(h.find((y) => y._id === m));
-    for (const y in x) {
-      const b = x[y];
-      if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: A, classes: E } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([A, E])).join(" ");
+  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, h = (m, f) => {
+    const x = cloneDeep(f.find((b) => b._id === m));
+    for (const b in x) {
+      const y = x[b];
+      if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
+        const { baseClasses: A, classes: E } = getSplitChaiClasses(y);
+        x[b] = compact(flattenDeep([A, E])).join(" ");
       } else
-        y !== "_id" && delete x[y];
+        b !== "_id" && delete x[b];
     }
     return x;
   };
   return {
     askAi: useCallback(
-      async (m, h, x, y) => {
+      async (m, f, x, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = p === u ? "" : p, A = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], E = await l(m, addLangToPrompt(x, g, m), A, b), { blocks: w, error: _ } = E;
+            const y = p === u ? "" : p, A = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], E = await l(m, addLangToPrompt(x, g, m), A, y), { blocks: w, error: _ } = E;
             if (_) {
               a(_);
               return;
@@ -2987,11 +2989,11 @@ const getBlockWithChildren = (o, n) => {
               c(j);
             } else
               i(w);
-            y && y(E);
-          } catch (b) {
-            a(b);
+            b && b(E);
+          } catch (y) {
+            a(y);
           } finally {
-            n(!1), y && y();
+            n(!1), b && b();
           }
         }
       },
@@ -3133,8 +3135,8 @@ const useBlockHighlight = () => {
         const g = filter(
           o,
           (m) => isString(l) ? m._parent === l : !m._parent
-        ).indexOf(d) + 1, f = getDuplicatedBlocks(o, c, l);
-        r(f, l, g), i.push(get(f, "0._id", ""));
+        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
+        r(h, l, g), i.push(get(h, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -3227,14 +3229,14 @@ const useBlockHighlight = () => {
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (f) => {
-      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      u = u.replace(h, " ").replace(/\s+/g, " ").trim();
-      const x = first(f.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(f.split(":").pop().trim());
-    }), each(p, (f) => {
-      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      g = g.replace(h, " ").replace(/\s+/g, " ").trim();
+    return each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
+      const x = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(h.split(":").pop().trim());
+    }), each(p, (h) => {
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -3320,11 +3322,7 @@ wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
 const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAtom = atomWithStorage("_layout_variant_mode", "DUAL_SIDE_PANEL"), useLayoutVariant = () => {
   const [o, n] = useAtom$1(layoutVariantAtom), r = useBuilderProp("layoutVariant", "DUAL_SIDE_PANEL");
   return [o || r, n];
-}, CHAI_BUILDER_EVENTS = {
-  OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
-  CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
-  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS"
-};
+}, draggedBlockAtom = atom$1(null), dropTargetBlockIdAtom = atom$1(null);
 class PubSub {
   constructor() {
     V(this, "subscribers", /* @__PURE__ */ new Map());
@@ -3340,7 +3338,86 @@ class PubSub {
     a && a.forEach((l) => l(r));
   }
 }
-const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdAtom = atom$1(null), BlockActionLabel = ({ block: o, label: n }) => {
+const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
+  const [r] = useBlocksStore(), a = get(o, "_id"), l = get(o, "_parent"), i = filter(r, (u) => l ? get(u, "_parent") === l : !get(u, "_parent")), c = canAddChildBlock(get(o, "_type", "")), d = findIndex(i, { _id: a }), p = (u) => {
+    if (u === "CHILD")
+      pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
+    else {
+      const g = { _id: l || "", position: i == null ? void 0 : i.length };
+      u === "BEFORE" ? g.position = Math.max(d, 0) : u === "AFTER" && (g.position = d + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, g);
+    }
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: n }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "border border-blue-200 shadow-2xl", children: [
+      c && /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer", onClick: () => p("CHILD"), children: "Add child block" }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer", onClick: () => p("BEFORE"), children: "Add block before" }),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { className: "cursor-pointer", onClick: () => p("AFTER"), children: "Add block after" })
+    ] })
+  ] });
+};
+function getOrientation(o) {
+  const n = window.getComputedStyle(o), r = n.display;
+  if (r === "flex" || r === "inline-flex") {
+    const a = n.flexDirection;
+    return a === "column" || a === "column-reverse" ? "vertical" : "horizontal";
+  } else if (r === "grid") {
+    const a = n.gridAutoFlow, l = n.gridTemplateRows, i = n.gridTemplateColumns;
+    return a.includes("column") || l.split(" ").length > i.split(" ").length ? "vertical" : "horizontal";
+  } else if (r === "block" || r === "inline-block")
+    return "vertical";
+  return "horizontal";
+}
+const CONTROLS = [
+  { ControlIcon: PinTopIcon, dir: "VERTICAL", key: "UP" },
+  { ControlIcon: PinBottomIcon, dir: "VERTICAL", key: "DOWN" },
+  { ControlIcon: PinLeftIcon, dir: "HORIZONTAL", key: "LEFT" },
+  { ControlIcon: PinRightIcon, dir: "HORIZONTAL", key: "RIGHT" }
+], getParentBlockOrientation = (o, n) => {
+  try {
+    if (!o || !n) return "VERTICAL";
+    const r = `[data-block-id='${o}']`, a = n == null ? void 0 : n.querySelector(r);
+    return a ? getOrientation(a).toUpperCase() : "VERTICAL";
+  } catch {
+    return "VERTICAL";
+  }
+}, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, h = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, a), f = useCallback(
+    (x) => {
+      isDisabledControl(g, h, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
+    },
+    [g, h, p, u, i, c, n]
+  );
+  return useHotkeys(
+    "shift+up, shift+down, shift+left, shift+right",
+    ({ key: x }) => {
+      var b;
+      f((b = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
+    },
+    { document: a == null ? void 0 : a.contentDocument },
+    [f]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: f, orientation: m };
+}, BlockController = ({ block: o, updateFloatingBar: n }) => {
+  const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
+    o,
+    n
+  );
+  return r ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-1 h-3 w-px bg-white/50" }),
+    CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => {
+      if (c !== p) return null;
+      const g = isDisabledControl(a, l, u);
+      return /* @__PURE__ */ jsx(
+        d,
+        {
+          onClick: () => i(u),
+          className: `${g ? "pointer-events-none cursor-not-allowed opacity-50" : "duration-300 hover:scale-95 hover:opacity-80"}`
+        },
+        u
+      );
+    })
+  ] });
+}, BlockActionLabel = ({ block: o, label: n }) => {
   const [, r] = useSelectedBlockIds(), [, a] = useHighlightBlockId(), [, l] = useAtom$1(draggedBlockAtom), i = useFeature("dnd");
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3359,51 +3436,46 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   );
 }, BlockFloatingSelector = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: p, refs: u, update: g } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { document: p } = useFrame(), { floatingStyles: u, refs: g, update: h } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
       reference: o
     }
   });
-  useResizeObserver(o, () => g(), o !== null);
-  const f = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  useResizeObserver(o, () => h(), o !== null), useResizeObserver(p == null ? void 0 : p.body, () => h(), (p == null ? void 0 : p.body) !== null);
+  const m = get(n, "_parent", null), f = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      ref: u.setFloating,
-      style: p,
-      onClick: (h) => {
-        h.stopPropagation(), h.preventDefault();
+      ref: g.setFloating,
+      style: u,
+      onClick: (x) => {
+        x.stopPropagation(), x.preventDefault();
       },
-      onMouseEnter: (h) => {
-        h.stopPropagation(), i(null);
+      onMouseEnter: (x) => {
+        x.stopPropagation(), i(null);
       },
-      onKeyDown: (h) => h.stopPropagation(),
+      onKeyDown: (x) => x.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        f && /* @__PURE__ */ jsx(
+        m && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([f]);
+              c([]), l([m]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: m, block: n }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-1", children: [
-          canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsx(
-            PlusIcon,
-            {
-              className: "hover:scale-105",
-              onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, n)
-            }
-          ),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: n }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-1 pr-1.5", children: [
+          /* @__PURE__ */ jsx(AddBlockDropdown, { block: n, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
           canDuplicateBlock(get(n, "_type", "")) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([n == null ? void 0 : n._id]) }) : null,
-          canDeleteBlock(get(n, "_type", "")) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([n == null ? void 0 : n._id]) }) : null
+          canDeleteBlock(get(n, "_type", "")) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([n == null ? void 0 : n._id]) }) : null,
+          /* @__PURE__ */ jsx(BlockController, { block: n, updateFloatingBar: h })
         ] })
       ]
     }
@@ -3464,21 +3536,21 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     <div class="frame-root h-full"></div>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: f } = usePasteBlocks(), m = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: h } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(n[0]) && f(n);
+      g(n[0]) && h(n);
     },
     { ...m, preventDefault: !0 },
-    [n, g, f]
+    [n, g, h]
   ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
     "del, backspace",
-    (h) => {
-      h.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (f) => {
+      f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     m,
     [n, l]
@@ -3486,6 +3558,10 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
 }, KeyboardHandler = () => {
   const { document: o } = useFrame();
   return useKeyEventWatcher(o), null;
+}, CHAI_BUILDER_EVENTS = {
+  OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
+  CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
+  SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS"
 }, AddBlockAtBottom = () => {
   const { t: o } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer py-2", children: [
@@ -3505,18 +3581,6 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     /* @__PURE__ */ jsx("br", {})
   ] });
 };
-function getOrientation(o) {
-  const n = window.getComputedStyle(o), r = n.display;
-  if (r === "flex" || r === "inline-flex") {
-    const a = n.flexDirection;
-    return a === "column" || a === "column-reverse" ? "vertical" : "horizontal";
-  } else if (r === "grid") {
-    const a = n.gridAutoFlow, l = n.gridTemplateRows, i = n.gridTemplateColumns;
-    return a.includes("column") || l.split(" ").length > i.split(" ").length ? "vertical" : "horizontal";
-  } else if (r === "block" || r === "inline-block")
-    return "vertical";
-  return "horizontal";
-}
 let iframeDocument = null, possiblePositions = [], dropTarget = null, dropIndex = null;
 const positionPlaceholder = (o, n, r) => {
   if (!iframeDocument || !o) return;
@@ -3566,7 +3630,7 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const f = () => {
+  const h = () => {
     removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
@@ -3576,25 +3640,25 @@ const useDnd = () => {
     },
     onDrop: (m) => {
       var _;
-      const h = dropTarget, y = getOrientation(h) === "vertical" ? m.clientY + ((_ = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : _.scrollY) : m.clientX;
-      dropIndex = calculateDropIndex(y, possiblePositions);
-      const b = d, A = h.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((b == null ? void 0 : b._id) === A || !E) {
-        f();
+      const f = dropTarget, b = getOrientation(f) === "vertical" ? m.clientY + ((_ = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : _.scrollY) : m.clientX;
+      dropIndex = calculateDropIndex(b, possiblePositions);
+      const y = d, A = f.getAttribute("data-block-id"), E = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === A || !E) {
+        h();
         return;
       }
-      if (!has(b, "_id")) {
-        a(b, A === "canvas" ? null : A, dropIndex), setTimeout(f, 300);
+      if (!has(y, "_id")) {
+        a(y, A === "canvas" ? null : A, dropIndex), setTimeout(h, 300);
         return;
       }
-      let w = h.getAttribute("data-block-id");
-      w === null && (w = m.target.parentElement.getAttribute("data-block-id")), c([b._id], w === "canvas" ? null : w, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      let w = f.getAttribute("data-block-id");
+      w === null && (w = m.target.parentElement.getAttribute("data-block-id")), c([y._id], w === "canvas" ? null : w, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
-      const h = m, x = h.target;
+      const f = m, x = f.target;
       dropTarget = x;
-      const y = x.getAttribute("data-block-id"), b = x.getAttribute("data-dnd-dragged") !== "yes";
-      u(y), h.stopPropagation(), h.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(x), r(!0), l(""), i([]);
+      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: (m) => {
       m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3619,16 +3683,16 @@ const useHandleCanvasDblClick = (o, n) => {
       const g = u.getAttribute("data-block-type");
       if (!g || !r.includes(g))
         return;
-      const f = u.getAttribute("data-block-id");
-      if (!f) return;
-      o.on("update", ({ editor: h }) => {
-        console.log(h.getHTML());
+      const h = u.getAttribute("data-block-id");
+      if (!h) return;
+      o.on("update", ({ editor: f }) => {
+        console.log(f.getHTML());
       }), o.on("blur", () => {
         console.log("blur");
-        const h = o.getHTML();
-        a([f], { content: h }), n.style.display = "none", u.style.visibility = "visible";
-      }), i(f);
-      const m = d(f).content;
+        const f = o.getHTML();
+        a([h], { content: f }), n.style.display = "none", u.style.visibility = "visible";
+      }), i(h);
+      const m = d(h).content;
       o.commands.setContent(m), n.style.display = "block", u.style.visibility = "hidden", n.style.position = "absolute", n.style.top = `${u.offsetTop}px`, n.style.left = `${u.offsetLeft}px`, n.style.width = `${u.offsetWidth}px`, n.style.height = `${u.offsetHeight}px`, n.classList.add(...u.classList);
     },
     [l, c, d, i, a, o, n]
@@ -3668,19 +3732,19 @@ const useHandleCanvasDblClick = (o, n) => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const h = getElementByDataBlockId(n, first(r));
-      if (h) {
-        const x = h.getAttribute("data-style-prop");
+      const f = getElementByDataBlockId(n, first(r));
+      if (f) {
+        const x = f.getAttribute("data-style-prop");
         if (x) {
-          const y = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
-          l([{ id: y, prop: x, blockId: b }]);
+          const b = f.getAttribute("data-style-id"), y = f.getAttribute("data-block-parent");
+          l([{ id: b, prop: x, blockId: y }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
   const c = useEditor({
     extensions: [StarterKit]
-  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), f = useHandleMouseLeave(), m = useDnd();
+  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), h = useHandleMouseLeave(), m = useDnd();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3689,7 +3753,7 @@ const useHandleCanvasDblClick = (o, n) => {
       onClick: u,
       onDoubleClick: p,
       onMouseMove: g,
-      onMouseLeave: f,
+      onMouseLeave: h,
       ...omit(m, "isDragging"),
       className: "relative h-full max-w-full p-px " + (m.isDragging ? "dragging" : ""),
       children: o
@@ -3698,7 +3762,7 @@ const useHandleCanvasDblClick = (o, n) => {
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), HeadTags = () => {
   const [o] = useTheme(), n = useThemeOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [g] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
-  ), [f] = useState(
+  ), [h] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [m] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
@@ -3725,22 +3789,22 @@ const useHandleCanvasDblClick = (o, n) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: y, theme: b }) {
-          y({
+        plugin(function({ addBase: b, theme: y }) {
+          b({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: b("fontFamily.heading")
+              fontFamily: y("fontFamily.heading")
             },
             body: {
-              fontFamily: b("fontFamily.body"),
-              color: b("colors.foreground"),
-              backgroundColor: b("colors.background")
+              fontFamily: y("fontFamily.body"),
+              color: y("colors.foreground"),
+              backgroundColor: y("colors.background")
             }
           });
         })
       ]
     });
   }, [o, n, p]), useEffect(() => {
-    g && (g.textContent = `${map(r, (y) => `[data-block-id="${y}"]`).join(",")}{
+    g && (g.textContent = `${map(r, (b) => `[data-block-id="${b}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
@@ -3748,18 +3812,18 @@ const useHandleCanvasDblClick = (o, n) => {
   }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    f && (f.textContent = `${map(l, ({ id: y }) => `[data-style-id="${y}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, f]), useEffect(() => {
+  }, [l, h]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const h = useMemo(
+  const f = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
   ), x = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: h }),
+    /* @__PURE__ */ jsx("style", { id: "chai-theme", children: f }),
     /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: x } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
@@ -3837,13 +3901,13 @@ const getBlockRuntimeProps = memoize((o) => {
     [o]
   );
 }, BlockRenderer = ({ blockAtom: o, children: n }) => {
-  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), f = useMemo(
+  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), h = useMemo(
     () => u ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
     [r, l, a, d, u]
-  ), m = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), h = useMemo(
+  ), m = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), f = useMemo(
     () => c(r._id, getBlockRuntimeProps(r._type)),
     [r._id, r._type, c, getBlockRuntimeProps]
-  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), y = useMemo(
+  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), b = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3851,9 +3915,9 @@ const getBlockRuntimeProps = memoize((o) => {
       },
       inBuilder: !0,
       lang: l || i,
-      ...f,
-      ...m,
       ...h,
+      ...m,
+      ...f,
       ...x
     }),
     [
@@ -3861,13 +3925,13 @@ const getBlockRuntimeProps = memoize((o) => {
       r._type,
       l,
       i,
-      f,
-      m,
       h,
+      m,
+      f,
       x
     ]
   );
-  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...y, children: n }) });
+  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...b, children: n }) });
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: n } = usePartailBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom$1(r)), [r]);
   return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
@@ -3896,10 +3960,10 @@ const getBlockRuntimeProps = memoize((o) => {
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const f = p * u, m = d * u;
+      const h = p * u, m = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - f) / f * 100 + "%",
+        height: 100 + (p - h) / h * 100 + "%",
         width: 100 + (d - m) / m * 100 + "%"
       }), i({
         position: "relative",
@@ -3917,7 +3981,7 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), E = (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, h] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), E = (j) => {
     p((S) => ({ ...S, width: j }));
   };
   useEffect(() => {
@@ -3933,7 +3997,7 @@ const getBlockRuntimeProps = memoize((o) => {
     var j, S;
     if (a && a.type !== "Multiple" && i.current) {
       const C = getElementByDataBlockId(i.current.contentDocument, a._id);
-      C && (w(C) || (S = (j = i.current) == null ? void 0 : j.contentWindow) == null || S.scrollTo({ top: C.offsetTop, behavior: "smooth" }), f([C]));
+      C && (w(C) || (S = (j = i.current) == null ? void 0 : j.contentWindow) == null || S.scrollTo({ top: C.offsetTop, behavior: "smooth" }), h([C]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
@@ -3953,7 +4017,7 @@ const getBlockRuntimeProps = memoize((o) => {
     "div",
     {
       onClick: () => {
-        r([]), y([]);
+        r([]), b([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3961,7 +4025,7 @@ const getBlockRuntimeProps = memoize((o) => {
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => h(i.current),
+          contentDidMount: () => f(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
@@ -3978,7 +4042,7 @@ const getBlockRuntimeProps = memoize((o) => {
             ),
             /* @__PURE__ */ jsx(HeadTags, {}),
             /* @__PURE__ */ jsx(Provider$1, { children: /* @__PURE__ */ jsxs(Canvas, { children: [
-              b ? /* @__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", {}),
@@ -4139,52 +4203,52 @@ const getBlockRuntimeProps = memoize((o) => {
     }
   );
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (b) => {
-    a(b);
-  }, f = () => {
-    const b = l.find((A) => Object.keys(A)[0] === r);
-    if (b) {
-      const A = Object.values(b)[0];
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (y) => {
+    a(y);
+  }, h = () => {
+    const y = l.find((A) => Object.keys(A)[0] === r);
+    if (y) {
+      const A = Object.values(y)[0];
       A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? d(A) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", r);
   }, m = useDebouncedCallback(
-    (b, A) => {
+    (y, A) => {
       d(() => ({
         ...c,
         fontFamily: {
           ...c.fontFamily,
-          [b.replace(/font-/g, "")]: A
+          [y.replace(/font-/g, "")]: A
         }
       }));
     },
     [c],
     200
-  ), h = useDebouncedCallback(
-    (b) => {
+  ), f = useDebouncedCallback(
+    (y) => {
       d(() => ({
         ...c,
-        borderRadius: `${b}px`
+        borderRadius: `${y}px`
       }));
     },
     [c],
     200
   ), x = useDebouncedCallback(
-    (b, A) => {
+    (y, A) => {
       d(() => {
-        const E = get(c, `colors.${b}`);
+        const E = get(c, `colors.${y}`);
         return n ? set(E, 1, A) : set(E, 0, A), {
           ...c,
           colors: {
             ...c.colors,
-            [b]: E
+            [y]: E
           }
         };
       });
     },
     [c],
     200
-  ), y = (b) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(b.items).map(([A]) => {
+  ), b = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([A]) => {
     const E = get(c, `colors.${A}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
@@ -4206,11 +4270,11 @@ const getBlockRuntimeProps = memoize((o) => {
             "select",
             {
               value: r,
-              onChange: (b) => g(b.target.value),
+              onChange: (y) => g(y.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((b) => /* @__PURE__ */ jsx("option", { value: Object.keys(b)[0], children: capitalize(Object.keys(b)[0]) }, Object.keys(b)[0]))
+                Array.isArray(l) && l.map((y) => /* @__PURE__ */ jsx("option", { value: Object.keys(y)[0], children: capitalize(Object.keys(y)[0]) }, Object.keys(y)[0]))
               ]
             }
           )
@@ -4221,31 +4285,31 @@ const getBlockRuntimeProps = memoize((o) => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: f,
+            onClick: h,
             children: u("Apply")
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([b, A]) => /* @__PURE__ */ jsx(
+        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, A]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: b,
-            value: c.fontFamily[b.replace(/font-/g, "")] || A[Object.keys(A)[0]],
-            onChange: (E) => m(b, E)
+            label: y,
+            value: c.fontFamily[y.replace(/font-/g, "")] || A[Object.keys(A)[0]],
+            onChange: (E) => m(y, E)
           },
-          b
+          y
         )) }),
         (p == null ? void 0 : p.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: h }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: c.borderRadius, onChange: f }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
           ] })
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((b) => y(b)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => b(y)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4336,22 +4400,22 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   useEffect(() => {
     a || c([]), p(o);
   }, [a, o]);
-  const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
-    (h) => {
-      const x = (y) => r === "value" ? y === "value" || y === "object" : r === "array" ? y === "array" : y === r;
-      h.type === "object" ? (c((y) => [...y, h.key]), p(h.value)) : x(h.type) && (n([...i, h.key].join(".")), l(!1));
+  const u = (f) => Array.isArray(f) ? "array" : typeof f == "object" && f !== null ? "object" : "value", g = React.useCallback(
+    (f) => {
+      const x = (b) => r === "value" ? b === "value" || b === "object" : r === "array" ? b === "array" : b === r;
+      f.type === "object" ? (c((b) => [...b, f.key]), p(f.value)) : x(f.type) && (n([...i, f.key].join(".")), l(!1));
     },
     [i, n, r]
-  ), f = React.useCallback(() => {
+  ), h = React.useCallback(() => {
     if (i.length > 0) {
-      const h = i.slice(0, -1);
-      c(h), p(h.reduce((x, y) => x[y], o));
+      const f = i.slice(0, -1);
+      c(f), p(f.reduce((x, b) => x[b], o));
     }
-  }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([h, x]) => ({
-    key: h,
+  }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([f, x]) => ({
+    key: f,
     value: x,
     type: u(x)
-  })).filter((h) => r === "value" ? h.type === "value" || h.type === "object" : r === "array" ? h.type === "array" || h.type === "object" : r === "object" ? h.type === "object" : !0), [d, r]);
+  })).filter((f) => r === "value" ? f.type === "value" || f.type === "object" : r === "array" ? f.type === "array" || f.type === "object" : r === "object" ? f.type === "object" : !0), [d, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -4372,37 +4436,37 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
         /* @__PURE__ */ jsxs(CommandGroup, { children: [
-          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: f, className: "flex items-center text-sm", children: [
+          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: h, className: "flex items-center text-sm", children: [
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          m.map((h) => /* @__PURE__ */ jsxs(
+          m.map((f) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
-              value: h.key,
+              value: f.key,
               disabled: !1,
-              onSelect: () => g(h),
+              onSelect: () => g(f),
               className: "flex items-center justify-between",
               children: [
-                /* @__PURE__ */ jsx("span", { children: h.key }),
+                /* @__PURE__ */ jsx("span", { children: f.key }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  r === "object" && h.type === "object" && /* @__PURE__ */ jsx(
+                  r === "object" && f.type === "object" && /* @__PURE__ */ jsx(
                     Button,
                     {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
                       onClick: (x) => {
-                        x.stopPropagation(), n([...i, h.key].join(".")), l(!1);
+                        x.stopPropagation(), n([...i, f.key].join(".")), l(!1);
                       },
                       children: "Select"
                     }
                   ),
-                  (h.type === "object" || h.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
+                  (f.type === "object" || f.type === "array") && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 opacity-50" }) })
                 ] })
               ]
             },
-            h.key
+            f.key
           ))
         ] })
       ] })
@@ -4561,14 +4625,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
   useEffect(() => {
     if (o) {
-      const f = document.createElement("style");
-      return f.id = "rte-modal-styles", f.innerHTML = `
+      const h = document.createElement("style");
+      return h.id = "rte-modal-styles", h.innerHTML = `
         /* Ensure the NestedPathSelector popover appears above the dialog */
         .rte-path-selector + [data-radix-popper-content-wrapper],
         [data-radix-popper-content-wrapper] {
           z-index: 9999 !important;
         }
-      `, document.head.appendChild(f), () => {
+      `, document.head.appendChild(h), () => {
         const m = document.getElementById("rte-modal-styles");
         m && m.remove();
       };
@@ -4591,12 +4655,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       Underline
     ],
     content: a || "",
-    onUpdate: ({ editor: f }) => {
-      const m = f.getHTML();
+    onUpdate: ({ editor: h }) => {
+      const m = h.getHTML();
       l(m);
     },
-    onBlur: ({ editor: f }) => {
-      const m = f.getHTML();
+    onBlur: ({ editor: h }) => {
+      const m = h.getHTML();
       i(r, m);
     },
     editorProps: {
@@ -4612,22 +4676,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [o, u]), useEffect(() => {
     c.current && u && (c.current.__chaiRTE = u);
   }, [u, o]);
-  const g = (f) => {
+  const g = (h) => {
     if (!u) return;
-    const m = `{{${f}}}`;
+    const m = `{{${h}}}`;
     u.commands.focus();
-    const { from: h, to: x } = u.state.selection;
-    if (h !== x)
+    const { from: f, to: x } = u.state.selection;
+    if (f !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: b } = u, A = b.selection.from, E = b.doc.textBetween(Math.max(0, A - 1), A), w = b.doc.textBetween(A, Math.min(A + 1, b.doc.content.size));
+      const { state: y } = u, A = y.selection.from, E = y.doc.textBetween(Math.max(0, A - 1), A), w = y.doc.textBetween(A, Math.min(A + 1, y.doc.content.size));
       let _ = "";
       A > 0 && E !== " " && !/[.,!?;:]/.test(E) && (_ = " ");
       let j = "";
       w && w !== " " && !/[.,!?;:]/.test(w) && (j = " "), u.chain().insertContent(_ + m + j).run();
     }
   };
-  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (f) => !f && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
       /* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
       p && Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4659,12 +4723,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       Underline
     ],
     content: r || "",
-    onUpdate: ({ editor: h }) => {
-      const x = h.getHTML();
+    onUpdate: ({ editor: f }) => {
+      const x = f.getHTML();
       a(x), c || u(x);
     },
-    onBlur: ({ editor: h }) => {
-      const x = h.getHTML();
+    onBlur: ({ editor: f }) => {
+      const x = f.getHTML();
       l(o, x);
     },
     editorProps: {
@@ -4678,8 +4742,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [g]), useEffect(() => {
     u(r || "");
   }, [r]);
-  const f = (h) => {
-    a(h);
+  const h = (f) => {
+    a(f);
   }, m = () => {
     d(!1), g && g.commands.setContent(p);
   };
@@ -4695,7 +4759,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         onClose: m,
         id: o,
         value: p,
-        onChange: f,
+        onChange: h,
         onBlur: l
       }
     )
@@ -4706,9 +4770,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   onChange: r
 }) => {
   var L;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [y, b] = useState(-1), A = useRef(null), E = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [b, y] = useState(-1), A = useRef(null), E = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
-    if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (m(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), k = get(v, 1, "page") || "page";
     g(k), (async () => {
       const B = await l(k, [get(v, 2, "page")]);
@@ -4723,24 +4787,24 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         const k = await l(u, v);
         x(k);
       }
-      c(!1), b(-1);
+      c(!1), y(-1);
     },
     [u],
     300
   ), _ = (v) => {
     const k = ["pageType", u, v.id];
-    k[1] && (r(k.join(":")), m(v.name), p(!1), x([]), b(-1));
+    k[1] && (r(k.join(":")), m(v.name), p(!1), x([]), y(-1));
   }, j = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), b((k) => k < h.length - 1 ? k + 1 : k);
+        v.preventDefault(), y((k) => k < f.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        v.preventDefault(), b((k) => k > 0 ? k - 1 : k);
+        v.preventDefault(), y((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
-        if (v.preventDefault(), h.length === 0) return;
-        y >= 0 && _(h[y]);
+        if (v.preventDefault(), f.length === 0) return;
+        b >= 0 && _(f[b]);
         break;
       case "Escape":
         v.preventDefault(), S();
@@ -4748,13 +4812,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     }
   };
   useEffect(() => {
-    if (y >= 0 && A.current) {
-      const v = A.current.children[y];
+    if (b >= 0 && A.current) {
+      const v = A.current.children[b];
       v == null || v.scrollIntoView({ block: "nearest" });
     }
-  }, [y]);
+  }, [b]);
   const S = () => {
-    m(""), x([]), b(-1), p(!1), r("");
+    m(""), x([]), y(-1), p(!1), r("");
   }, C = (v) => {
     m(v), p(!isEmpty(v)), c(!0), w(v);
   };
@@ -4765,28 +4829,28 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "input",
         {
           type: "text",
-          value: f,
+          value: h,
           onChange: (v) => C(v.target.value),
           onKeyDown: j,
           placeholder: a(`Search ${E ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsx("button", { onClick: S, 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: h && /* @__PURE__ */ jsx("button", { onClick: S, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (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" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      f,
+      h,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(h == null ? void 0 : h.slice(0, 20), (v, k) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(f == null ? void 0 : f.slice(0, 20), (v, k) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => _(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : k === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -4879,26 +4943,26 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const f = () => {
+  const h = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
-      if (!b) return;
-      n({ ...o, currentSlide: b }), c([b]);
+      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
+      if (!y) return;
+      n({ ...o, currentSlide: y }), c([y]);
     }
   }, m = () => {
     const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
-      if (!b) return;
-      n({ ...o, currentSlide: b }), c([b]);
+      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
+      if (!y) return;
+      n({ ...o, currentSlide: y }), c([y]);
     }
-  }, h = () => {
+  }, f = () => {
     const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), y = x == null ? void 0 : x._id;
-    y && (n({ ...o, currentSlide: y }), c([y]));
+    ), b = x == null ? void 0 : x._id;
+    b && (n({ ...o, currentSlide: b }), c([b]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4911,11 +4975,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: h, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: h,
+          onClick: f,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4977,8 +5041,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (x) => {
-              let y = x.target.value;
-              y.length && (y = y.replace("-", "")), n({ ...o, autoplayInterval: y });
+              let b = x.target.value;
+              b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
             }
           }
         )
@@ -5015,15 +5079,15 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   required: p,
   schema: u,
   formData: g,
-  onChange: f
+  onChange: h
 }) => {
-  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? h : m, b = get(LANGUAGES, y, y), A = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [j, S] = useState(null), C = useCallback(
+  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(m) ? f : m, y = get(LANGUAGES, b, b), A = usePageExternalData(), E = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = get(w, [E == null ? void 0 : E._type, "i18nProps"], []) || [], [j, S] = useState(null), C = useCallback(
     (k) => {
-      const B = (N) => /[.,!?;:]/.test(N), T = (N, D, $) => {
+      const B = (N) => /[.,!?;:]/.test(N), T = (N, D, M) => {
         let R = "", O = "";
-        const M = D > 0 ? N[D - 1] : "", H = D < N.length ? N[D] : "";
-        return D > 0 && (M === "." || !B(M) && M !== " ") && (R = " "), D < N.length && !B(H) && H !== " " && (O = " "), {
-          text: R + $ + O,
+        const $ = D > 0 ? N[D - 1] : "", H = D < N.length ? N[D] : "";
+        return D > 0 && ($ === "." || !B($) && $ !== " ") && (R = " "), D < N.length && !B(H) && H !== " " && (O = " "), {
+          text: R + M + O,
           prefixLength: R.length,
           suffixLength: O.length
         };
@@ -5035,31 +5099,31 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         if (N) {
           const D = `{{${k}}}`;
           N.commands.focus();
-          const { from: $, to: R } = N.state.selection;
-          if ($ !== R)
+          const { from: M, to: R } = N.state.selection;
+          if (M !== R)
             N.chain().deleteSelection().insertContent(D).run();
           else {
-            const { state: M } = N, H = M.selection.from, F = M.doc.textBetween(Math.max(0, H - 1), H), U = M.doc.textBetween(H, Math.min(H + 1, M.doc.content.size));
+            const { state: $ } = N, H = $.selection.from, F = $.doc.textBetween(Math.max(0, H - 1), H), U = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
             let z = "";
             H > 0 && F !== " " && !B(F) && (z = " ");
             let W = "";
             U && U !== " " && !B(U) && (W = " "), N.chain().insertContent(z + D + W).run();
           }
-          setTimeout(() => f(N.getHTML(), {}, o), 100);
+          setTimeout(() => h(N.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const N = I, D = N.selectionStart || 0, $ = N.value || "", R = N.selectionEnd || D;
+        const N = I, D = N.selectionStart || 0, M = N.value || "", R = N.selectionEnd || D;
         if (R > D) {
-          const U = `{{${k}}}`, { text: z } = T($, D, U), W = $.slice(0, D) + z + $.slice(R);
-          f(W, {}, o);
+          const U = `{{${k}}}`, { text: z } = T(M, D, U), W = M.slice(0, D) + z + M.slice(R);
+          h(W, {}, o);
           return;
         }
-        const M = `{{${k}}}`, { text: H } = T($, D, M), F = $.slice(0, D) + H + $.slice(D);
-        f(F, {}, o);
+        const $ = `{{${k}}}`, { text: H } = T(M, D, $), F = M.slice(0, D) + H + M.slice(D);
+        h(F, {}, o);
       }
     },
-    [o, f, g, E == null ? void 0 : E._id]
+    [o, h, g, E == null ? void 0 : E._id]
   );
   if (d)
     return null;
@@ -5098,7 +5162,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         " ",
         v && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
-          b
+          y
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
@@ -5115,8 +5179,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
   const { selectedLang: i } = useLanguages(), [c] = useAtom$1(chaiRjsfWidgetsAtom), [d] = useAtom$1(chaiRjsfFieldsAtom), [p] = useAtom$1(chaiRjsfTemplatesAtom), u = useThrottledCallback(
-    async ({ formData: g }, f) => {
-      l({ formData: g }, f);
+    async ({ formData: g }, h) => {
+      l({ formData: g }, h);
     },
     [l, i],
     400
@@ -5155,9 +5219,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: g }, f) => {
-        if (!f || o !== (g == null ? void 0 : g._id)) return;
-        const m = take(f.split("."), 2).join(".").replace("root.", "");
+      onChange: ({ formData: g }, h) => {
+        if (!h || o !== (g == null ? void 0 : g._id)) return;
+        const m = take(h.split("."), 2).join(".").replace("root.", "");
         u({ formData: g }, m);
       }
     },
@@ -5201,16 +5265,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: j }, S, C) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: j }, S, C) => {
     S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(j, S) }, C);
   }, x = useCallback(
     debounce(({ formData: j }, S, C) => {
-      h({ formData: j }, S, C), d(j);
+      f({ formData: j }, S, C), d(j);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: j }, S) => {
+  ), b = ({ formData: j }, S) => {
     S && (r([n._id], { [S]: get(j, S) }), x({ formData: j }, S, { [S]: get(c, S) }));
-  }, b = ({ formData: j }, S) => {
+  }, y = ({ formData: j }, S) => {
     S && (r([g._id], { [S]: get(j, S) }), x({ formData: j }, S, { [S]: get(c, S) }));
   };
   keys(get(i, "_bindings", {}));
@@ -5248,7 +5312,7 @@ function BlockSettings() {
         JSONForm,
         {
           blockId: g == null ? void 0 : g._id,
-          onChange: b,
+          onChange: y,
           formData: m,
           schema: w,
           uiSchema: _
@@ -5259,7 +5323,7 @@ function BlockSettings() {
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: y,
+        onChange: b,
         formData: i,
         schema: A,
         uiSchema: E
@@ -5367,50 +5431,50 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   canvas: n = !1,
   tooltip: r = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((A) => A !== b)) : g((A) => [...A, b]);
-  }, x = (b) => {
-    n || l(b), c(b);
-  }, y = getBreakpointValue(n ? i : a).toLowerCase();
-  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (y) => {
+    u.includes(y) ? u.length > 2 && g(u.filter((A) => A !== y)) : g((A) => [...A, y]);
+  }, x = (y) => {
+    n || l(y), c(y);
+  }, b = getBreakpointValue(n ? i : a).toLowerCase();
+  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (y) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...b,
+      ...y,
       onClick: x,
-      key: b.breakpoint,
-      currentBreakpoint: y
+      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(
-      m.filter((b) => includes(u, toUpper(b.breakpoint))),
-      (b) => /* @__PURE__ */ createElement(
+      m.filter((y) => includes(u, toUpper(y.breakpoint))),
+      (y) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
           tooltip: r,
-          ...b,
+          ...y,
           onClick: x,
-          key: b.breakpoint,
-          currentBreakpoint: y
+          key: y.breakpoint,
+          currentBreakpoint: b
         }
       )
     ) }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: f("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: h("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(m, (b) => /* @__PURE__ */ jsx(
+        map(m, (y) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: b.breakpoint === "xs",
-            onCheckedChange: () => h(toUpper(b.breakpoint)),
-            checked: includes(u, toUpper(b.breakpoint)),
-            children: f(b.title)
+            disabled: y.breakpoint === "xs",
+            onCheckedChange: () => f(toUpper(y.breakpoint)),
+            checked: includes(u, toUpper(y.breakpoint)),
+            children: h(y.title)
           },
-          b.breakpoint
+          y.breakpoint
         ))
       ] })
     ] })
@@ -5490,9 +5554,9 @@ const AskAIStyles = ({ blockId: o }) => {
     var m;
     (m = d.current) == null || m.focus();
   }, []);
-  const f = (m) => {
-    const { usage: h } = m || {};
-    !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const h = (m) => {
+    const { usage: f } = m || {};
+    !l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5506,7 +5570,7 @@ const AskAIStyles = ({ blockId: o }) => {
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
         onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, f));
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h));
         }
       }
     ),
@@ -5516,7 +5580,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, f);
+            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, h);
           },
           variant: "default",
           className: "w-fit",
@@ -5548,17 +5612,17 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), y = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), A = b.split(" ").filter((I) => !isEmpty(I)), E = () => {
-    const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(f, I, !0), x("");
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), A = y.split(" ").filter((I) => !isEmpty(I)), E = () => {
+    const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(h, I, !0), x("");
   }, [w, _] = useState([]), j = ({ value: I }) => {
     const P = I.trim().toLowerCase(), N = P.match(/.+:/g);
     let D = [];
     if (N && N.length > 0) {
-      const [$] = N, R = P.replace($, "");
-      D = i.search(R).map((M) => ({
-        ...M,
-        item: { ...M.item, name: $ + M.item.name }
+      const [M] = N, R = P.replace(M, "");
+      D = i.search(R).map(($) => ({
+        ...$,
+        item: { ...$.item, name: M + $.item.name }
       }));
     } else
       D = i.search(P);
@@ -5573,18 +5637,18 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: h,
+      value: f,
       onKeyDown: (I) => {
-        I.key === "Enter" && h.trim() !== "" && E();
+        I.key === "Enter" && f.trim() !== "" && E();
       },
       onChange: (I, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [h, c, o]
+    [f, c, o]
   ), k = (I) => {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(f, [I]), u(f, P, !0), r(""), l(-1);
+    g(h, [I]), u(h, P, !0), r(""), l(-1);
   }, B = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
@@ -5635,7 +5699,7 @@ function ManualClasses() {
           variant: "outline",
           className: "h-6 border-border",
           onClick: E,
-          disabled: h.trim() === "",
+          disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
@@ -5666,7 +5730,7 @@ function ManualClasses() {
             n !== I && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(f, [I], !0),
+                onClick: () => g(h, [I], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
@@ -6012,10 +6076,10 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
+  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", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
+    (b) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -6024,10 +6088,10 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const h = useCallback(
+  const f = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      p({ color: g, shade: y });
+    (b) => {
+      p({ color: g, shade: b });
     },
     [g]
   );
@@ -6036,8 +6100,8 @@ const COLOR_PROP = {
   }, [r]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
-    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, b) && n(b, 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,
@@ -6078,7 +6142,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: f, disabled: !g || !l, onChange: h, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: f, options: i }) })
   ] });
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
@@ -6275,7 +6339,7 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [y, b] = useState(""), [A, E] = useState(!1), [w, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, y] = useState(""), [A, E] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
     const { value: v, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
@@ -6291,7 +6355,7 @@ const COLOR_PROP = {
         x(!0);
         return;
       }
-      const B = get(k, "unit") !== "" ? get(k, "unit") : f;
+      const B = get(k, "unit") !== "" ? get(k, "unit") : h;
       if (B === "auto" || B === "none") {
         j(`${d}${B}`);
         return;
@@ -6301,7 +6365,7 @@ const COLOR_PROP = {
       const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
       v ? S(I) : j(I);
     },
-    [j, S, a, f, d, u]
+    [j, S, a, h, d, u]
   ), L = useCallback(
     (v) => {
       const k = getUserInputValues(`${a}`, u);
@@ -6320,7 +6384,7 @@ const COLOR_PROP = {
     },
     [j, a, d, u]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -6335,10 +6399,10 @@ const COLOR_PROP = {
     ] })
   ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${A ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: f === "class",
+          readOnly: h === "class",
           onKeyPress: (v) => {
             v.key === "Enter" && C();
           },
@@ -6349,7 +6413,7 @@ const COLOR_PROP = {
             const k = parseInt$1(v.target.value);
             let B = isNaN$1(k) ? 0 : k;
             v.keyCode === 38 && (B += 1), v.keyCode === 40 && (B -= 1);
-            const T = `${B}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            const T = `${B}`, P = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
             S(P);
           },
           onKeyUp: (v) => {
@@ -6363,10 +6427,10 @@ const COLOR_PROP = {
             var k;
             (k = v == null ? void 0 : v.target) == null || k.select(), r(!1);
           },
-          value: A ? y : a,
+          value: A ? 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(
             " ",
-            h ? "border-red-500 text-red-500" : "border-foreground/20"
+            f ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6378,7 +6442,7 @@ const COLOR_PROP = {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: f }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -6387,7 +6451,7 @@ const COLOR_PROP = {
           UnitSelection,
           {
             units: u,
-            current: f,
+            current: h,
             onSelect: (v) => {
               r(!1), m(v), L(v);
             }
@@ -6395,25 +6459,25 @@ const COLOR_PROP = {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || A ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(h) !== -1 || A ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => E(!0),
         onDragEnd: (v) => {
-          if (b(() => ""), E(!1), isEmpty(v))
+          if (y(() => ""), E(!1), isEmpty(v))
             return;
-          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
           j(T);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
-          b(v);
-          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          y(v);
+          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
           S(T);
         },
         currentValue: a,
-        unit: f,
+        unit: h,
         negative: g,
         cssProperty: p
       }
@@ -6507,7 +6571,7 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(f, "fullCls", ""), [f]), b = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
     (S, C = !0) => {
       const L = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (L.mq = "xs");
@@ -6516,11 +6580,11 @@ const COLOR_PROP = {
     },
     [x, p, g, u, l, m]
   ), A = useCallback(() => {
-    h(x, [y], !0);
-  }, [x, y, h]), E = useMemo(() => canChangeClass(f, g), [f, g]);
+    f(x, [b], !0);
+  }, [x, b, f]), E = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
-    i(E, f);
-  }, [E, i, f]);
+    i(E, h);
+  }, [E, i, h]);
   const [, , w] = useScreenSizeWidth(), _ = useCallback(
     (S) => {
       w({
@@ -6533,28 +6597,28 @@ const COLOR_PROP = {
       }[S]);
     },
     [w]
-  ), j = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: f && j, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${f && !j ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), j = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: h && 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] ${h && !j ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(f, "cls", ""),
+            currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: b,
+            onChange: y,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsx(IconChoices, { property: l, onChange: b }),
-        r === "range" && /* @__PURE__ */ jsx(RangeChoices, { property: l, onChange: b }),
-        r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
-        r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
+        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 ${y ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6566,19 +6630,19 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(f, "mq")),
-            p && !f.dark ? "(Light mode)" : ""
+            getBreakpoint(get(h, "mq")),
+            p && !h.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => _(get(f, "mq")),
+              onClick: () => _(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(f, "mq").toUpperCase()
+                get(h, "mq").toUpperCase()
               ]
             }
           )
@@ -6595,7 +6659,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), h = useCallback((m) => map(g, "property").includes(m), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6604,18 +6668,18 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: m, key: h }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: m, key: f }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(h),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${h === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(f),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: f(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, h, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6758,13 +6822,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), f = get(i, "cssProperty", "");
+      const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let m = parseFloat(i.dragStartValue);
       m = isNaN(m) ? 0 : m;
-      let h = MAPPER[i.dragUnit];
-      (startsWith(f, "scale") || f === "opacity") && (h = 10);
-      let y = (i.dragStartY - u.pageY) / h + m;
-      g && y < 0 && (y = 0), f === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
+      let f = MAPPER[i.dragUnit];
+      (startsWith(h, "scale") || h === "opacity") && (f = 10);
+      let b = (i.dragStartY - u.pageY) / f + m;
+      g && b < 0 && (b = 0), h === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -6806,14 +6870,14 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (console.log("addBlockToPage", o), has(o, "blocks")) {
-      const y = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(y), r || null, a);
+      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(b), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, h = useFeature("dnd"), { t: x } = useTranslation();
+  }, f = useFeature("dnd"), { t: x } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6821,12 +6885,12 @@ const CoreBlock = ({
         disabled: n,
         onClick: m,
         type: "button",
-        onDragStart: (y) => {
-          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            g([]), f();
+        onDragStart: (b) => {
+          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+            g([]), h();
           }, 200);
         },
-        draggable: h ? "true" : "false",
+        draggable: f ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
@@ -7022,7 +7086,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var f, m, h, x, y, b, A, E;
+  var h, m, f, x, b, y, A, E;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -7063,11 +7127,11 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((f = l.find((_) => _.key === "href")) == null ? void 0 : f.value) || "",
+      href: ((h = l.find((_) => _.key === "href")) == null ? void 0 : h.value) || "",
       hrefType: ((m = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((h = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
-      maxWidth: ((y = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
-      backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      autoplay: ((f = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((b = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : b.replace("px", "")) || "",
+      backdropColor: ((y = l.find((_) => _.key === "data-overlay")) == null ? void 0 : y.value) || "",
       galleryName: ((A = l.find((_) => _.key === "data-gall")) == null ? void 0 : A.value) || ""
     }, forEach(w, (_) => {
       has(a, `styles_attrs.${_}`) && delete a.styles_attrs[_];
@@ -7173,25 +7237,25 @@ const CoreBlock = ({
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const m = Object.entries(a).map(([x, y]) => {
-          const b = y, A = b.type || "partial", E = formatReadableName(A);
+        const m = Object.entries(a).map(([x, b]) => {
+          const y = b, A = y.type || "partial", E = formatReadableName(A);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(b.name || x),
-            description: b.description || "",
+            label: formatReadableName(y.name || x),
+            description: y.description || "",
             icon: Globe,
             group: E,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
             // Store the original ID as partialBlockId
-            _name: b.name
+            _name: y.name
           };
-        }), h = uniq(map(m, "group"));
+        }), f = uniq(map(m, "group"));
         p({
           blocks: m,
-          groups: h,
+          groups: f,
           isLoading: !1,
           error: null
         }), g(!0);
@@ -7210,7 +7274,7 @@ const CoreBlock = ({
     d.blocks,
     c
   ]);
-  const f = () => {
+  const h = () => {
     p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
   };
   return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
@@ -7218,7 +7282,7 @@ const CoreBlock = ({
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: f,
+        onClick: h,
         className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
         children: "Refresh"
       }
@@ -7235,7 +7299,7 @@ const CoreBlock = ({
   );
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
   var v;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (k) => k._id === r)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (v = find(c, (k) => k._id === r)) == null ? void 0 : v._type, [m, f] = useState("all"), [x, b] = useState(null), y = useRef(null);
   useEffect(() => {
     const k = setTimeout(() => {
       var B;
@@ -7243,18 +7307,18 @@ const CoreBlock = ({
     }, 0);
     return () => clearTimeout(k);
   }, [g]), useEffect(() => {
-    d && (h("all"), y(null));
-  }, [d]), useEffect(() => (b.current = debounce((k) => {
-    h(k);
+    d && (f("all"), b(null));
+  }, [d]), useEffect(() => (y.current = debounce((k) => {
+    f(k);
   }, 500), () => {
-    b.current && b.current.cancel();
+    y.current && y.current.cancel();
   }), []);
   const A = useCallback((k) => {
-    y(k), b.current && b.current(k);
+    b(k), y.current && y.current(k);
   }, []), E = useCallback(() => {
-    y(null), b.current && b.current.cancel();
+    b(null), y.current && y.current.cancel();
   }, []), w = useCallback((k) => {
-    b.current && b.current.cancel(), h(k), y(null);
+    y.current && y.current.cancel(), f(k), b(null);
   }, []), _ = useMemo(
     () => d ? values(n).filter(
       (k) => {
@@ -7326,7 +7390,7 @@ const CoreBlock = ({
               parentId: r,
               position: a,
               block: B,
-              disabled: !canAcceptChildBlock(f, B.type) || !canBeNestedInside(f, B.type)
+              disabled: !canAcceptChildBlock(h, B.type) || !canBeNestedInside(h, B.type)
             },
             B.type
           ))
@@ -7340,10 +7404,10 @@ const CoreBlock = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), { data: g } = usePartialBlocksList(), f = Object.keys(g || {}).length > 0;
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), { data: g } = usePartialBlocksList(), h = Object.keys(g || {}).length > 0;
   useEffect(() => {
-    i === "partials" && !f && c("library");
-  }, [i, f, c]);
+    i === "partials" && !h && c("library");
+  }, [i, h, c]);
   const m = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   }, []);
@@ -7355,8 +7419,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (h) => {
-          d(""), c(h);
+        onValueChange: (f) => {
+          d(""), c(f);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7364,15 +7428,15 @@ const CoreBlock = ({
           /* @__PURE__ */ jsxs(TabsList, { className: "flex w-full items-center", children: [
             /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
-            f && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
+            h && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             p ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (h) => /* @__PURE__ */ jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
+            map(u, (f) => /* @__PURE__ */ jsx(TabsTrigger, { value: f.key, children: React__default.createElement(f.tab) }))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
-          f && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
+          h && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           p ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(u, (h) => /* @__PURE__ */ jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: m, parentId: r, position: a }) }))
+          map(u, (f) => /* @__PURE__ */ jsx(TabsContent, { value: f.key, children: React__default.createElement(f.tabContent, { close: m, parentId: r, position: a }) }))
         ]
       }
     )
@@ -7429,10 +7493,10 @@ 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(), f = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), x = (A) => {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), x = (A) => {
     const E = has(A, "styles_attrs.data-page-section");
     return A._type === "Box" && E;
-  }, y = useCallback(
+  }, b = useCallback(
     async (A) => {
       if (A.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -7449,7 +7513,7 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : y,
+        } : b,
         draggable: m ? "true" : "false",
         onDragStart: async (A) => {
           const E = await c(n, o);
@@ -7463,7 +7527,7 @@ const BlockCard = ({
               };
             } else
               A.dataTransfer.setDragImage(new Image(), 0, 0);
-            h(_), setTimeout(() => {
+            f(_), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7476,11 +7540,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: f }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: f }) })
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: h }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: h }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -7495,7 +7559,7 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [f, m] = useState("Hero"), h = get(g, f, []), x = useRef(null), { t: y } = useTranslation(), b = (w) => {
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [h, m] = useState("Hero"), f = get(g, h, []), x = useRef(null), { t: b } = useTranslation(), y = (w) => {
     x.current && (clearTimeout(x.current), x.current = null), x.current = setTimeout(() => {
       x.current && m(w);
     }, 300);
@@ -7505,26 +7569,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const A = filter(h, (w, _) => _ % 2 === 0), E = filter(h, (w, _) => _ % 2 === 1);
+  const A = filter(f, (w, _) => _ % 2 === 0), E = filter(f, (w, _) => _ % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: y("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
           map(g, (w, _) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => b(_),
+              onMouseEnter: () => y(_),
               onMouseLeave: () => clearTimeout(x.current),
               onClick: () => m(_),
               className: cn$1(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                _ === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                _ === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(y(_.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(b(_.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7774,7 +7838,7 @@ const selectParent = (o, n) => {
   var P;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: A, handleClick: E } = o, w = (N) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: A, handleClick: E } = o, w = (N) => {
     N.stopPropagation(), !i.includes(m) && o.toggle();
   }, _ = (N) => {
     N.isInternal && (p = N.isOpen, N.isOpen && N.close());
@@ -7790,23 +7854,23 @@ const selectParent = (o, n) => {
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      y && !o.isOpen && !b && !i.includes(m) && o.toggle();
+      b && !o.isOpen && !y && !i.includes(m) && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [y, o, b]);
+  }, [b, o, y]);
   const B = useMemo(() => {
-    const N = Object.keys(h), D = [];
-    for (let $ = 0; $ < N.length; $++)
-      if (N[$].endsWith("_attrs")) {
-        const R = h[N[$]], O = Object.keys(R).join("|");
+    const N = Object.keys(f), D = [];
+    for (let M = 0; M < N.length; M++)
+      if (N[M].endsWith("_attrs")) {
+        const R = f[N[M]], O = Object.keys(R).join("|");
         O.match(/x-data/) && D.push("data"), O.match(/x-on/) && D.push("event"), O.match(/x-show|x-if/) && D.push("show");
       }
     return D;
-  }, [h]), T = (N, D) => {
-    const $ = d.contentDocument || d.contentWindow.document, R = $.querySelector(`[data-block-id=${N}]`);
+  }, [f]), T = (N, D) => {
+    const M = d.contentDocument || d.contentWindow.document, R = M.querySelector(`[data-block-id=${N}]`);
     R && R.setAttribute("data-drop", D);
-    const O = R.getBoundingClientRect(), M = d.getBoundingClientRect();
-    O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || ($.documentElement.scrollTop = R.offsetTop - M.top);
+    const O = R.getBoundingClientRect(), $ = d.getBoundingClientRect();
+    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = R.offsetTop - $.top);
   }, I = (N) => {
     v();
     const D = get(o, "parent.id");
@@ -7831,7 +7895,7 @@ const selectParent = (o, n) => {
     "div",
     {
       onMouseEnter: () => g(m),
-      onMouseLeave: () => f(),
+      onMouseLeave: () => h(),
       onClick: k,
       style: n,
       "data-node-id": m,
@@ -7866,9 +7930,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",
               x ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              y && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              b && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === S ? "bg-purple-100" : "",
-              b && "opacity-20",
+              y && "opacity-20",
               i.includes(m) ? "opacity-50" : ""
             ),
             children: [
@@ -7881,7 +7945,7 @@ const selectParent = (o, n) => {
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
+                  /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
                   A ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -7890,7 +7954,7 @@ const selectParent = (o, n) => {
                         N.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsx("span", { children: (h == null ? void 0 : h._name) || (h == null ? void 0 : h._type.split("/").pop()) }),
+                        /* @__PURE__ */ jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) }),
                         B.includes("data") && /* @__PURE__ */ jsx(FileJson, { className: "h-3 w-3 text-orange-600" }),
                         B.includes("event") && /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3 text-yellow-500" }),
                         B.includes("show") && /* @__PURE__ */ jsx(EyeOff, { className: "h-3 w-3 text-orange-600" })
@@ -7911,7 +7975,7 @@ const selectParent = (o, n) => {
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: N.tooltip })
                 ] })),
-                canAddChildBlock(h == null ? void 0 : h._type) && !i.includes(m) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(f == null ? void 0 : f._type) && !i.includes(m) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8586,14 +8650,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), f = useRef(null), m = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
   useEffect(() => {
     var x;
-    (x = f.current) == null || x.focus();
+    (x = h.current) == null || x.focus();
   }, []);
-  const h = (x) => {
-    const { usage: y } = x || {};
-    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const f = (x) => {
+    const { usage: b } = x || {};
+    !l && b && g(b), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8611,14 +8675,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: f,
+          ref: h,
           value: i,
           onChange: (x) => c(x.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (x) => {
-            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, h));
+            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f));
           }
         }
       ),
@@ -8628,7 +8692,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, h);
+              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -8661,7 +8725,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (x) => {
-            m.current && clearTimeout(m.current), g(void 0), r("content", o, x, h);
+            m.current && clearTimeout(m.current), g(void 0), r("content", o, x, f);
           }
         }
       )
@@ -8671,15 +8735,15 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), f = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), h = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
   const m = async () => {
     try {
-      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), f.current.click();
-    } catch (h) {
-      u(h);
+      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), h.current.click();
+    } catch (f) {
+      u(f);
     } finally {
       d(!1);
     }
@@ -8687,25 +8751,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (h) => {
-        g(h !== "");
+      onValueChange: (f) => {
+        g(f !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: h, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (h) => a(h.target.value),
+              onChange: (f) => a(f.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (h) => {
-                h.key === "Enter" && (h.preventDefault(), m());
+              onKeyDown: (f) => {
+                f.key === "Enter" && (f.preventDefault(), m());
               }
             }
           ),
@@ -8903,11 +8967,11 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), b = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
-  const b = () => {
+  const y = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -8931,7 +8995,7 @@ const AiAssistant = () => {
       S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), m("");
     }
   }, _ = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : y());
   }, j = useCallback((S) => {
     const C = (k) => /[.,!?;:]/.test(k), L = (k, B, T) => {
       let I = "", P = "";
@@ -8945,7 +9009,7 @@ const AiAssistant = () => {
     if (v) {
       const k = v.selectionStart || 0, B = v.value || "", T = v.selectionEnd || k;
       if (T > k) {
-        const $ = `{{${S}}}`, { text: R } = L(B, k, $), O = B.slice(0, k) + R + B.slice(T);
+        const M = `{{${S}}}`, { text: R } = L(B, k, M), O = B.slice(0, k) + R + B.slice(T);
         p(O);
         return;
       }
@@ -8958,7 +9022,7 @@ const AiAssistant = () => {
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? w() : b();
+          S.preventDefault(), u !== null ? w() : y();
         },
         className: "space-y-3",
         children: [
@@ -8972,7 +9036,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: h,
+                  ref: f,
                   value: i,
                   onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
@@ -8983,7 +9047,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: j })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: j })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9004,7 +9068,7 @@ const AiAssistant = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          f && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: f })
+          h && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: h })
         ]
       }
     ),
@@ -9215,8 +9279,8 @@ const RootLayout = () => {
     x.preventDefault();
   }, u = (x) => {
     n(o === x ? null : x);
-  }, g = useSidebarMenuItems(), { t: f } = useTranslation(), m = [...g, ...c], h = useBuilderProp("htmlDir", "ltr");
-  return /* @__PURE__ */ jsx("div", { dir: h, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  }, g = useSidebarMenuItems(), { t: h } = useTranslation(), m = [...g, ...c], f = useBuilderProp("htmlDir", "ltr");
+  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",
       {
@@ -9226,21 +9290,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m.map((x, y) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m.map((x, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === y ? "default" : "ghost",
+                    variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(y),
+                    onClick: () => u(b),
                     children: get(x, "icon", null)
                   },
-                  y
+                  b
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(x.label) }) })
-              ] }, "button" + y)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: h(x.label) }) })
+              ] }, "button" + b)) }),
               /* @__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, y) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${y}`)) })
+              /* @__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(
               motion.div,
@@ -9256,7 +9320,7 @@ const RootLayout = () => {
                       className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(m, `${o}.isInternal`, !1) ? "" : "w-64"}`,
                       children: [
                         /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: f(m[o].label) })
+                        /* @__PURE__ */ jsx("span", { children: h(m[o].label) })
                       ]
                     }
                   ),
@@ -9279,11 +9343,11 @@ const RootLayout = () => {
                   /* @__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: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    f("AI Assistant")
+                    h("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      f("Theme Settings")
+                      h("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,