@chaibuilder/sdk 2.0.5 → 2.0.7

package/dist/core.js

@@ -3,50 +3,50 @@ var K = (o, n, r) => n in o ? G(o, n, { enumerable: !0, configurable: !0, writab
 var V = (o, n, r) => K(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useState, useRef, Suspense, createElement, memo, lazy } from "react";
-import { 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, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, r as CardFooter, aa as ScrollArea, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
+import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, Component, Children, useRef, useState, Suspense, createElement, memo, lazy } from "react";
+import { O as DropdownMenu, P as DropdownMenuTrigger, Q as DropdownMenuContent, R as DropdownMenuItem, S as Skeleton, B as Button, H as Dialog, I as DialogTrigger, J as DialogContent, a7 as Popover, ak as Tooltip, al as TooltipTrigger, a8 as PopoverTrigger, am as TooltipContent, a9 as PopoverContent, v as Command, x as CommandInput, y as CommandList, z as CommandEmpty, D as CommandGroup, E as CommandItem, K as DialogHeader, M as DialogTitle, n as Badge, V as DropdownMenuLabel, W as DropdownMenuSeparator, T as DropdownMenuCheckboxItem, a2 as HoverCard, a3 as HoverCardTrigger, a4 as HoverCardContent, aj as Textarea, a5 as Input$1, ao as TooltipPortal, a as AccordionItem, b as AccordionTrigger, d as AccordionContent, A as Accordion, C as Card, q as CardHeader, t as CardDescription, u as CardContent, a6 as Label, r as CardFooter, aa as ScrollArea, af as Tabs, ag as TabsList, ah as TabsTrigger, ai as TabsContent, e as AlertDialog, f as AlertDialogTrigger, g as AlertDialogContent, h as AlertDialogHeader, j as AlertDialogTitle, k as AlertDialogDescription, i as AlertDialogFooter, m as AlertDialogCancel, l as AlertDialogAction, ae as Switch, ac as Separator, an as TooltipProvider, ad as Toaster } from "./tooltip-PKiP886L.js";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
-import { find, filter, flatten, map, omit, isString, has, get, isObject, memoize, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, 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 { find, filter, flatten, map, omit, isString, has, get, isObject, memoize, compact, isEmpty, noop, includes, without, each, first, keys, range, values, flattenDeep, set, startsWith, forEach, unset, chunk, cloneDeep, pick, isNull, findIndex, throttle, isFunction as isFunction$1, reverse, split, take, startCase, debounce, toUpper, toLower, nth, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, capitalize, groupBy, uniq, flatMapDeep, some, reject, sortBy, round } from "lodash-es";
 import { Provider as Provider$1 } from "react-wrap-balancer";
 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 { 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, 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, InfoCircledIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, 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";
 import { registerChaiBlock as Ue } from "@chaibuilder/runtime";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, a as getChaiThemeCssVariables, c as getThemeFontsLinkMarkup } from "./ChaiThemeFn-Cort9tch.js";
-import TreeModel from "tree-model";
-import { useHotkeys } from "react-hotkeys-hook";
-import { toast } from "sonner";
 import { PlusIcon as PlusIcon$1, ChevronRight, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, Globe, PencilIcon, FileJson, Zap, EyeOff, MoreVertical, Eye, ChevronsDown, ChevronsUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, Moon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import typography from "@tailwindcss/typography";
-import forms from "@tailwindcss/forms";
-import aspectRatio from "@tailwindcss/aspect-ratio";
-import containerQueries from "@tailwindcss/container-queries";
-import { twMerge } from "tailwind-merge";
-import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
-import ReactDOM from "react-dom";
-import { ErrorBoundary } from "react-error-boundary";
-import { Resizable } from "re-resizable";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Link from "@tiptap/extension-link";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
 import clsx$1, { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import Autosuggest from "react-autosuggest";
+import { toast } from "sonner";
 import Fuse from "fuse.js";
+import { S as STYLES_KEY, g as getSplitChaiClasses, R as ROOT_TEMP_KEY } from "./getSplitClasses-DphwgQiE.js";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
 import { default as ze } from "i18next";
+import { ErrorBoundary } from "react-error-boundary";
+import { useHotkeys } from "react-hotkeys-hook";
 import { motion } from "framer-motion";
+import TreeModel from "tree-model";
+import typography from "@tailwindcss/typography";
+import forms from "@tailwindcss/forms";
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import containerQueries from "@tailwindcss/container-queries";
+import ReactDOM from "react-dom";
+import { Resizable } from "re-resizable";
 const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
   if ("e" in o)
     throw o.e;
@@ -93,65 +93,65 @@ 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 = (x, ...f) => x.read(...f), p = (x, ...f) => x.write(...f), u = (x, f) => {
-  var h;
-  return (h = x.unstable_onInit) == null ? void 0 : h.call(x, f);
-}, g = (x, f) => {
-  var h;
-  return (h = x.onMount) == null ? void 0 : h.call(x, f);
+}, 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 = (h, ...f) => h.read(...f), p = (h, ...f) => h.write(...f), u = (h, f) => {
+  var x;
+  return (x = h.unstable_onInit) == null ? void 0 : x.call(h, f);
+}, g = (h, f) => {
+  var x;
+  return (x = h.onMount) == null ? void 0 : x.call(h, f);
 }, ...m) => {
-  const x = m[0] || ((w) => {
-    let L = o.get(w);
-    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(w, L), u == null || u(w, S)), L;
+  const h = m[0] || ((B) => {
+    let L = o.get(B);
+    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(B, L), u == null || u(B, C)), L;
   }), f = m[1] || (() => {
-    let w, L;
+    let B, L;
     const v = (y) => {
       try {
         y();
-      } catch (E) {
-        w || (w = !0, L = E);
+      } catch (_) {
+        B || (B = !0, L = _);
       }
     };
     do {
       c.f && v(c.f);
-      const y = /* @__PURE__ */ new Set(), E = y.add.bind(y);
+      const y = /* @__PURE__ */ new Set(), _ = y.add.bind(y);
       a.forEach((T) => {
         var I;
-        return (I = n.get(T)) == null ? void 0 : I.l.forEach(E);
-      }), a.clear(), i.forEach(E), i.clear(), l.forEach(E), l.clear(), y.forEach(v), a.size && h();
+        return (I = n.get(T)) == null ? void 0 : I.l.forEach(_);
+      }), a.clear(), i.forEach(_), i.clear(), l.forEach(_), l.clear(), y.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
-    if (w)
+    if (B)
       throw L;
-  }), h = m[2] || (() => {
-    const w = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
+  }), x = m[2] || (() => {
+    const B = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
     for (; y.length; ) {
-      const E = y[y.length - 1], T = x(E);
-      if (v.has(E)) {
+      const _ = y[y.length - 1], T = h(_);
+      if (v.has(_)) {
         y.pop();
         continue;
       }
-      if (L.has(E)) {
-        r.get(E) === T.n && w.push([E, T]), v.add(E), y.pop();
+      if (L.has(_)) {
+        r.get(_) === T.n && B.push([_, T]), v.add(_), y.pop();
         continue;
       }
-      L.add(E);
-      for (const I of getMountedOrPendingDependents(E, T, n))
+      L.add(_);
+      for (const I of getMountedOrPendingDependents(_, T, n))
         L.has(I) || y.push(I);
     }
-    for (let E = w.length - 1; E >= 0; --E) {
-      const [T, I] = w[E];
+    for (let _ = B.length - 1; _ >= 0; --_) {
+      const [T, I] = B[_];
       let R = !1;
       for (const P of I.d.keys())
         if (P !== T && a.has(P)) {
           R = !0;
           break;
         }
-      R && (b(T), B(T)), r.delete(T);
+      R && (b(T), S(T)), r.delete(T);
     }
-  }), b = m[3] || ((w) => {
+  }), b = m[3] || ((B) => {
     var L, v;
-    const y = x(w);
-    if (isAtomStateInitialized(y) && (n.has(w) && r.get(w) !== y.n || Array.from(y.d).every(
+    const y = h(B);
+    if (isAtomStateInitialized(y) && (n.has(B) && r.get(B) !== y.n || Array.from(y.d).every(
       ([D, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
@@ -160,16 +160,16 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     )))
       return y;
     y.d.clear();
-    let E = !0;
+    let _ = !0;
     const T = () => {
-      n.has(w) && (B(w), h(), f());
+      n.has(B) && (S(B), x(), f());
     }, I = (D) => {
       var O;
-      if (isSelfAtom(w, D)) {
-        const H = x(D);
+      if (isSelfAtom(B, D)) {
+        const H = h(D);
         if (!isAtomStateInitialized(H))
           if (hasInitialValue(D))
-            setAtomStateValueOrPromise(D, D.init, x);
+            setAtomStateValueOrPromise(D, D.init, h);
           else
             throw new Error("no atom init");
         return returnAtomValue(H);
@@ -178,7 +178,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       try {
         return returnAtomValue($);
       } finally {
-        y.d.set(D, $.n), isPendingPromise(y.v) && addPendingPromiseToDependency(w, y.v, $), (O = n.get(D)) == null || O.t.add(w), E || T();
+        y.d.set(D, $.n), isPendingPromise(y.v) && addPendingPromiseToDependency(B, y.v, $), (O = n.get(D)) == null || O.t.add(B), _ || T();
       }
     };
     let R, P;
@@ -187,99 +187,99 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !P && isActuallyWritableAtom(w) && (P = (...D) => {
-          if (!E)
+        return !P && isActuallyWritableAtom(B) && (P = (...D) => {
+          if (!_)
             try {
-              return A(w, ...D);
+              return w(B, ...D);
             } finally {
-              h(), f();
+              x(), f();
             }
         }), P;
       }
     }, M = y.n;
     try {
-      const D = d(w, I, N);
-      return setAtomStateValueOrPromise(w, D, x), isPromiseLike$2(D) && ((L = D.onCancel) == null || L.call(D, () => R == null ? void 0 : R.abort()), D.then(
+      const D = d(B, I, N);
+      return setAtomStateValueOrPromise(B, D, h), isPromiseLike$2(D) && ((L = D.onCancel) == null || L.call(D, () => R == null ? void 0 : R.abort()), D.then(
         T,
         T
       )), y;
     } catch (D) {
       return delete y.v, y.e = D, ++y.n, y;
     } finally {
-      E = !1, M !== y.n && r.get(w) === M && (r.set(w, y.n), a.add(w), (v = c.c) == null || v.call(c, w));
+      _ = !1, M !== y.n && r.get(B) === M && (r.set(B, y.n), a.add(B), (v = c.c) == null || v.call(c, B));
     }
-  }), k = m[4] || ((w) => {
-    const L = [w];
+  }), k = m[4] || ((B) => {
+    const L = [B];
     for (; L.length; ) {
-      const v = L.pop(), y = x(v);
-      for (const E of getMountedOrPendingDependents(v, y, n)) {
-        const T = x(E);
-        r.set(E, T.n), L.push(E);
+      const v = L.pop(), y = h(v);
+      for (const _ of getMountedOrPendingDependents(v, y, n)) {
+        const T = h(_);
+        r.set(_, T.n), L.push(_);
       }
     }
-  }), A = m[5] || ((w, ...L) => {
+  }), w = m[5] || ((B, ...L) => {
     let v = !0;
-    const y = (T) => returnAtomValue(b(T)), E = (T, ...I) => {
+    const y = (T) => returnAtomValue(b(T)), _ = (T, ...I) => {
       var R;
-      const P = x(T);
+      const P = h(T);
       try {
-        if (isSelfAtom(w, T)) {
+        if (isSelfAtom(B, T)) {
           if (!hasInitialValue(T))
             throw new Error("atom not writable");
           const N = P.n, M = I[0];
-          setAtomStateValueOrPromise(T, M, x), B(T), N !== P.n && (a.add(T), (R = c.c) == null || R.call(c, T), k(T));
+          setAtomStateValueOrPromise(T, M, h), S(T), N !== P.n && (a.add(T), (R = c.c) == null || R.call(c, T), k(T));
           return;
         } else
-          return A(T, ...I);
+          return w(T, ...I);
       } finally {
-        v || (h(), f());
+        v || (x(), f());
       }
     };
     try {
-      return p(w, y, E, ...L);
+      return p(B, y, _, ...L);
     } finally {
       v = !1;
     }
-  }), B = m[6] || ((w) => {
+  }), S = m[6] || ((B) => {
     var L;
-    const v = x(w), y = n.get(w);
+    const v = h(B), y = n.get(B);
     if (y && !isPendingPromise(v.v)) {
-      for (const [E, T] of v.d)
-        if (!y.d.has(E)) {
-          const I = x(E);
-          C(E).t.add(w), y.d.add(E), T !== I.n && (a.add(E), (L = c.c) == null || L.call(c, E), k(E));
+      for (const [_, T] of v.d)
+        if (!y.d.has(_)) {
+          const I = h(_);
+          A(_).t.add(B), y.d.add(_), T !== I.n && (a.add(_), (L = c.c) == null || L.call(c, _), k(_));
         }
-      for (const E of y.d || [])
-        if (!v.d.has(E)) {
-          y.d.delete(E);
-          const T = j(E);
-          T == null || T.t.delete(w);
+      for (const _ of y.d || [])
+        if (!v.d.has(_)) {
+          y.d.delete(_);
+          const T = E(_);
+          T == null || T.t.delete(B);
         }
     }
-  }), C = m[7] || ((w) => {
+  }), A = m[7] || ((B) => {
     var L;
-    const v = x(w);
-    let y = n.get(w);
+    const v = h(B);
+    let y = n.get(B);
     if (!y) {
-      b(w);
-      for (const E of v.d.keys())
-        C(E).t.add(w);
+      b(B);
+      for (const _ of v.d.keys())
+        A(_).t.add(B);
       if (y = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(w, y), (L = c.m) == null || L.call(c, w), isActuallyWritableAtom(w)) {
-        const E = () => {
+      }, n.set(B, y), (L = c.m) == null || L.call(c, B), isActuallyWritableAtom(B)) {
+        const _ = () => {
           let T = !0;
           const I = (...R) => {
             try {
-              return A(w, ...R);
+              return w(B, ...R);
             } finally {
-              T || (h(), f());
+              T || (x(), f());
             }
           };
           try {
-            const R = g(w, I);
+            const R = g(B, I);
             R && (y.u = () => {
               T = !0;
               try {
@@ -292,27 +292,27 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             T = !1;
           }
         };
-        l.add(E);
+        l.add(_);
       }
     }
     return y;
-  }), j = m[8] || ((w) => {
+  }), E = m[8] || ((B) => {
     var L;
-    const v = x(w);
-    let y = n.get(w);
-    if (y && !y.l.size && !Array.from(y.t).some((E) => {
+    const v = h(B);
+    let y = n.get(B);
+    if (y && !y.l.size && !Array.from(y.t).some((_) => {
       var T;
-      return (T = n.get(E)) == null ? void 0 : T.d.has(w);
+      return (T = n.get(_)) == null ? void 0 : T.d.has(B);
     })) {
-      y.u && i.add(y.u), y = void 0, n.delete(w), (L = c.u) == null || L.call(c, w);
-      for (const E of v.d.keys()) {
-        const T = j(E);
-        T == null || T.t.delete(w);
+      y.u && i.add(y.u), y = void 0, n.delete(B), (L = c.u) == null || L.call(c, B);
+      for (const _ of v.d.keys()) {
+        const T = E(_);
+        T == null || T.t.delete(B);
       }
       return;
     }
     return y;
-  }), _ = [
+  }), j = [
     // store state
     o,
     n,
@@ -327,32 +327,32 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     u,
     g,
     // building-block functions
-    x,
-    f,
     h,
+    f,
+    x,
     b,
     k,
+    w,
+    S,
     A,
-    B,
-    C,
-    j
-  ], S = {
-    get: (w) => returnAtomValue(b(w)),
-    set: (w, ...L) => {
+    E
+  ], C = {
+    get: (B) => returnAtomValue(b(B)),
+    set: (B, ...L) => {
       try {
-        return A(w, ...L);
+        return w(B, ...L);
       } finally {
-        h(), f();
+        x(), f();
       }
     },
-    sub: (w, L) => {
-      const y = C(w).l;
+    sub: (B, L) => {
+      const y = A(B).l;
       return y.add(L), f(), () => {
-        y.delete(L), j(w), f();
+        y.delete(L), E(B), f();
       };
     }
   };
-  return Object.defineProperty(S, BUILDING_BLOCKS, { value: _ }), S;
+  return Object.defineProperty(C, BUILDING_BLOCKS, { value: j }), C;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -388,36 +388,36 @@ function splitAtom(o, n) {
         if (p)
           return p;
         const u = d && r.get(d), g = [], m = [];
-        return c.forEach((x, f) => {
-          const h = f;
-          m[f] = h;
-          const b = u && u.atomList[u.keyList.indexOf(h)];
+        return c.forEach((h, f) => {
+          const x = f;
+          m[f] = x;
+          const b = u && u.atomList[u.keyList.indexOf(x)];
           if (b) {
             g[f] = b;
             return;
           }
-          const k = (B) => {
-            const C = B(l), j = B(o), S = a(j, C == null ? void 0 : C.arr).keyList.indexOf(h);
-            if (S < 0 || S >= j.length) {
-              const w = c[a(c).keyList.indexOf(h)];
-              if (w)
-                return w;
+          const k = (S) => {
+            const A = S(l), E = S(o), C = a(E, A == null ? void 0 : A.arr).keyList.indexOf(x);
+            if (C < 0 || C >= E.length) {
+              const B = c[a(c).keyList.indexOf(x)];
+              if (B)
+                return B;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return j[S];
-          }, A = (B, C, j) => {
-            const _ = B(l), S = B(o), L = a(S, _ == null ? void 0 : _.arr).keyList.indexOf(h);
-            if (L < 0 || L >= S.length)
+            return E[C];
+          }, w = (S, A, E) => {
+            const j = S(l), C = S(o), L = a(C, j == null ? void 0 : j.arr).keyList.indexOf(x);
+            if (L < 0 || L >= C.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(j) ? j(S[L]) : j;
-            Object.is(S[L], v) || C(o, [
-              ...S.slice(0, L),
+            const v = isFunction(E) ? E(C[L]) : E;
+            Object.is(C[L], v) || A(o, [
+              ...C.slice(0, L),
               v,
-              ...S.slice(L + 1)
+              ...C.slice(L + 1)
             ]);
           };
-          g[f] = isWritable(o) ? atom(k, A) : atom(k);
-        }), u && u.keyList.length === m.length && u.keyList.every((x, f) => x === m[f]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
+          g[f] = isWritable(o) ? atom(k, w) : atom(k);
+        }), u && u.keyList.length === m.length && u.keyList.every((h, f) => h === m[f]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -490,18 +490,18 @@ function createJSONStorage(o = () => {
   const i = {
     getItem: (p, u) => {
       var g, m;
-      const x = (h) => {
-        if (h = h || "", a !== h) {
+      const h = (x) => {
+        if (x = x || "", a !== x) {
           try {
-            l = JSON.parse(h, n == null ? void 0 : n.reviver);
+            l = JSON.parse(x, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = h;
+          a = x;
         }
         return l;
       }, f = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(f) ? f.then(x) : x(f);
+      return isPromiseLike$1(f) ? f.then(h) : h(f);
     },
     setItem: (p, u) => {
       var g;
@@ -514,10 +514,10 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, g, m) => p(u, (x) => {
+  }, c = (p) => (u, g, m) => p(u, (h) => {
     let f;
     try {
-      f = JSON.parse(x || "");
+      f = JSON.parse(h || "");
     } catch {
       f = m;
     }
@@ -1157,15 +1157,15 @@ const useSelectedBlocksDisplayChild = () => ({
     if (!p || !p._parent) return;
     const u = p._parent, g = r.filter((m) => m._parent === u);
     if (g.length === 2) {
-      const m = g.find((x) => x._id !== d);
+      const m = g.find((h) => h._id !== d);
       if (m && m._type === "Text") {
-        const x = r.find((f) => f._id === u);
-        x && "content" in x && (r = r.map((f) => {
+        const h = r.find((f) => f._id === u);
+        h && "content" in h && (r = r.map((f) => {
           if (f._id === u) {
-            const h = { ...f, content: m.content };
+            const x = { ...f, content: m.content };
             return Object.keys(m).forEach((b) => {
-              b.startsWith("content-") && (h[b] = m[b]);
-            }), h;
+              b.startsWith("content-") && (x[b] = m[b]);
+            }), x;
           }
           return f;
         }), a.push(m._id));
@@ -1233,20 +1233,20 @@ function insertBlocksAtPosition(o, n, r, a) {
   if (r) {
     const u = o.find((g) => g._id === r);
     if (u && u.content !== void 0 && u.content !== "" && !o.some((m) => m._parent === r)) {
-      const x = {
+      const h = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
         content: u.content
       };
       Object.keys(u).forEach((f) => {
-        f.startsWith("content-") && (x[f] = u[f]);
-      }), l.unshift(x), i = i.map((f) => {
+        f.startsWith("content-") && (h[f] = u[f]);
+      }), l.unshift(h), i = i.map((f) => {
         if (f._id === r) {
-          const h = { ...f, content: "" };
-          return Object.keys(h).forEach((b) => {
-            b.startsWith("content-") && (h[b] = "");
-          }), h;
+          const x = { ...f, content: "" };
+          return Object.keys(x).forEach((b) => {
+            b.startsWith("content-") && (x[b] = "");
+          }), x;
         }
         return f;
       });
@@ -1396,68 +1396,84 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (h, b, k) => {
-      const A = map(h, (C) => {
-        const _ = n.find((L) => L._id === C)._parent || null, w = n.filter((L) => _ ? L._parent === _ : !L._parent).map((L) => L._id).indexOf(C);
-        return { _id: C, oldParent: _, oldPosition: w };
-      }), B = A.find(({ _id: C }) => C === h[0]);
-      B && B.oldParent === b && B.oldPosition === k || (i(h, b, k), o({
-        undo: () => each(A, ({ _id: C, oldParent: j, oldPosition: _ }) => {
-          i([C], j, _);
+    moveBlocks: (x, b, k) => {
+      const w = map(x, (A) => {
+        const j = n.find((L) => L._id === A)._parent || null, B = n.filter((L) => j ? L._parent === j : !L._parent).map((L) => L._id).indexOf(A);
+        return { _id: A, oldParent: j, oldPosition: B };
+      }), S = w.find(({ _id: A }) => A === x[0]);
+      S && S.oldParent === b && S.oldPosition === k || (i(x, b, k), o({
+        undo: () => each(w, ({ _id: A, oldParent: E, oldPosition: j }) => {
+          i([A], E, j);
         }),
-        redo: () => i(h, b, k)
+        redo: () => i(x, b, k)
       }));
     },
-    addBlocks: (h, b, k) => {
-      a(h, b, k), o({
-        undo: () => l(map(h, "_id")),
-        redo: () => a(h, b, k)
+    addBlocks: (x, b, k) => {
+      a(x, b, k), o({
+        undo: () => l(map(x, "_id")),
+        redo: () => a(x, b, k)
       });
     },
-    removeBlocks: (h) => {
-      var B;
-      const b = (B = first(h)) == null ? void 0 : B._parent, A = n.filter((C) => b ? C._parent === b : !C._parent).indexOf(first(h));
-      l(map(h, "_id")), o({
-        undo: () => a(h, b, A),
-        redo: () => l(map(h, "_id"))
+    removeBlocks: (x) => {
+      var S;
+      const b = (S = first(x)) == null ? void 0 : S._parent, w = n.filter((A) => b ? A._parent === b : !A._parent).indexOf(first(x));
+      l(map(x, "_id")), o({
+        undo: () => a(x, b, w),
+        redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (h, b, k) => {
-      let A = [];
+    updateBlocks: (x, b, k) => {
+      let w = [];
       if (k)
-        A = map(h, (B) => ({ _id: B, ...k }));
+        w = map(x, (S) => ({ _id: S, ...k }));
       else {
-        const B = keys(b);
-        A = map(h, (C) => {
-          const j = n.find((S) => S._id === C), _ = { _id: C };
-          return each(B, (S) => _[S] = j[S]), _;
+        const S = keys(b);
+        w = map(x, (A) => {
+          const E = n.find((C) => C._id === A), j = { _id: A };
+          return each(S, (C) => j[C] = E[C]), j;
         });
       }
-      c(map(h, (B) => ({ _id: B, ...b }))), o({
-        undo: () => c(A),
-        redo: () => c(map(h, (B) => ({ _id: B, ...b })))
+      c(map(x, (S) => ({ _id: S, ...b }))), o({
+        undo: () => c(w),
+        redo: () => c(map(x, (S) => ({ _id: S, ...b })))
       });
     },
-    updateBlocksRuntime: (h, b) => {
-      c(map(h, (k) => ({ _id: k, ...b })));
+    updateBlocksRuntime: (x, b) => {
+      c(map(x, (k) => ({ _id: k, ...b })));
     },
-    setNewBlocks: (h) => {
-      r(h), o({
+    setNewBlocks: (x) => {
+      r(x), o({
         undo: () => r(n),
-        redo: () => r(h)
+        redo: () => r(x)
       });
     },
-    updateMultipleBlocksProps: (h) => {
+    updateMultipleBlocksProps: (x) => {
       let b = [];
-      b = map(h, (k) => {
-        const A = keys(k), B = n.find((j) => j._id === k._id), C = {};
-        return each(A, (j) => C[j] = B[j]), C;
-      }), c(h), o({
+      b = map(x, (k) => {
+        const w = keys(k), S = n.find((E) => E._id === k._id), A = {};
+        return each(w, (E) => A[E] = S[E]), A;
+      }), c(x), o({
         undo: () => c(b),
-        redo: () => c(h)
+        redo: () => c(x)
       });
     }
   };
+}, libraryBlocksAtom = atom$1(
+  {}
+), useLibraryBlocks = (o) => {
+  const [n, r] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(n, `${o == null ? void 0 : o.id}.blocks`, null), i = get(n, `${o == null ? void 0 : o.id}.loading`, "idle"), c = useRef("idle");
+  useEffect(() => {
+    (async () => {
+      if (i === "complete" || c.current === "loading") return;
+      c.current = "loading", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
+      const p = await a(o);
+      c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
+    })();
+  }, [o, l, i, c, r, a]);
+  const d = useCallback(() => {
+    r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "idle", blocks: [] } }));
+  }, [o, r]);
+  return { data: l || [], isLoading: i === "loading", resetLibrary: d };
 }, canAcceptChildBlock = (o, n) => {
   if (!o) return !0;
   const r = getRegisteredChaiBlock(o);
@@ -1490,17 +1506,17 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var x;
+      var h;
       for (let f = 0; f < i.length; f++) {
-        const { _id: h } = i[f];
+        const { _id: x } = i[f];
         i[f]._id = generateUUID();
-        const b = filter(i, { _parent: h });
+        const b = filter(i, { _parent: x });
         for (let k = 0; k < b.length; k++)
           b[k]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(x = first(i)) == null ? void 0 : x._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(h = first(i)) == null ? void 0 : h._id]), first(i);
     },
     [r, o, n]
   );
@@ -1517,8 +1533,8 @@ const useAddBlock = () => {
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let m, x;
-      return c && (m = find(o, { _id: c }), g._parent = c, x = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, x = m._parent), r([g], x, d), n([g._id]), g;
+      let m, h;
+      return c && (m = find(o, { _id: c }), g._parent = c, h = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, h = m._parent), r([g], h, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2964,39 +2980,39 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (x, f) => {
-    const h = cloneDeep(f.find((b) => b._id === x));
-    for (const b in h) {
-      const k = h[b];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, f) => {
+    const x = cloneDeep(f.find((b) => b._id === h));
+    for (const b in x) {
+      const k = x[b];
       if (typeof k == "string" && startsWith(k, STYLES_KEY)) {
-        const { baseClasses: A, classes: B } = getSplitChaiClasses(k);
-        h[b] = compact(flattenDeep([A, B])).join(" ");
+        const { baseClasses: w, classes: S } = getSplitChaiClasses(k);
+        x[b] = compact(flattenDeep([w, S])).join(" ");
       } else
-        b !== "_id" && delete h[b];
+        b !== "_id" && delete x[b];
     }
-    return h;
+    return x;
   };
   return {
     askAi: useCallback(
-      async (x, f, h, b) => {
+      async (h, f, x, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const k = p === u ? "" : p, A = x === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], B = await l(x, addLangToPrompt(h, g, x), A, k), { blocks: C, error: j } = B;
-            if (j) {
-              a(j);
+            const k = p === u ? "" : p, w = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], S = await l(h, addLangToPrompt(x, g, h), w, k), { blocks: A, error: E } = S;
+            if (E) {
+              a(E);
               return;
             }
-            if (x === "styles") {
-              const _ = C.map((S) => {
-                for (const w in S)
-                  w !== "_id" && (S[w] = `${STYLES_KEY},${S[w]}`);
-                return S;
+            if (h === "styles") {
+              const j = A.map((C) => {
+                for (const B in C)
+                  B !== "_id" && (C[B] = `${STYLES_KEY},${C[B]}`);
+                return C;
               });
-              c(_);
+              c(j);
             } else
-              i(C);
-            b && b(B);
+              i(A);
+            b && b(S);
           } catch (k) {
             a(k);
           } finally {
@@ -3137,11 +3153,11 @@ const useBlockHighlight = () => {
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((x) => x._id === c);
+        const d = o.find((h) => h._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
         const g = filter(
           o,
-          (x) => isString(l) ? x._parent === l : !x._parent
+          (h) => isString(l) ? h._parent === l : !h._parent
         ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
         r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
@@ -3237,12 +3253,12 @@ const useBlockHighlight = () => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (m) => {
-      const x = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${x}(?=\\s|$)`, "g");
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
       u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const h = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], h) && p.push(m.split(":").pop().trim());
+      const x = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
     }), each(p, (m) => {
-      const x = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${x}(?=\\s|$)`, "g");
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
       g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
@@ -3361,21 +3377,21 @@ const CONTROLS = [
     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, (h) => c ? get(h, "_parent") === c : !get(h, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), x = getParentBlockOrientation(c, i, a), f = useCallback(
-    (h) => {
-      isDisabledControl(g, m, h) || p || (h === "UP" || h === "LEFT" ? l([i], c || null, u - 1) : (h === "DOWN" || h === "RIGHT") && l([i], c || null, u + 2), 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, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
+    (x) => {
+      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
     },
     [g, m, p, u, i, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
-    ({ key: h }) => {
+    ({ key: x }) => {
       var b;
-      f((b = h == null ? void 0 : h.replace("Arrow", "")) == null ? void 0 : b.toUpperCase());
+      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: m, moveBlock: f, orientation: x };
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: f, orientation: h };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -3414,8 +3430,8 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
     if (m === "CHILD")
       pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
     else {
-      const x = { _id: c || "", position: d == null ? void 0 : d.length };
-      m === "BEFORE" ? x.position = Math.max(u, 0) : m === "AFTER" && (x.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, x);
+      const h = { _id: c || "", position: d == null ? void 0 : d.length };
+      m === "BEFORE" ? h.position = Math.max(u, 0) : m === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
     }
   };
   return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -3445,15 +3461,15 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
     }
   );
 }, BlockFloatingSelector = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: m, update: x } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), [p] = useAtom$1(inlineEditingActiveAtom), { document: u } = useFrame(), { floatingStyles: g, refs: m, update: h } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
       reference: o
     }
   });
-  useResizeObserver(o, () => x(), o !== null), useResizeObserver(u == null ? void 0 : u.body, () => x(), (u == null ? void 0 : u.body) !== null);
-  const f = get(n, "_parent", null), h = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  useResizeObserver(o, () => h(), o !== null), useResizeObserver(u == null ? void 0 : u.body, () => h(), (u == null ? void 0 : u.body) !== null);
+  const f = get(n, "_parent", null), x = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3479,12 +3495,12 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: h, block: n }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: x, 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", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([n == null ? void 0 : n._id]) }) : null,
           canDeleteBlock(get(n, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(TrashIcon, { className: "hover:scale-105", onClick: () => r([n == null ? void 0 : n._id]) }) : null,
-          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: n, updateFloatingBar: x })
+          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: n, updateFloatingBar: h })
         ] })
       ]
     }
@@ -3545,15 +3561,15 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
     <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: m } = usePasteBlocks(), x = 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: m } = usePasteBlocks(), h = 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]) && m(n);
     },
-    { ...x, preventDefault: !0 },
+    { ...h, preventDefault: !0 },
     [n, g, m]
-  ), useHotkeys("esc", () => r([]), x, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...x, preventDefault: !0 }, [
+  ), useHotkeys("esc", () => r([]), h, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...h, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
@@ -3561,7 +3577,7 @@ const pubsub = new PubSub(), AddBlockDropdown = ({ block: o, children: n }) => {
     (f) => {
       f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    x,
+    h,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3641,33 +3657,33 @@ const useDnd = () => {
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (x) => {
-      x.preventDefault(), x.stopPropagation(), throttledDragOver(x);
+    onDragOver: (h) => {
+      h.preventDefault(), h.stopPropagation(), throttledDragOver(h);
     },
-    onDrop: (x) => {
-      var j;
-      const f = dropTarget, b = getOrientation(f) === "vertical" ? x.clientY + ((j = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : j.scrollY) : x.clientX;
+    onDrop: (h) => {
+      var E;
+      const f = dropTarget, b = getOrientation(f) === "vertical" ? h.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : h.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
-      const k = d, A = f.getAttribute("data-block-id"), B = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((k == null ? void 0 : k._id) === A || !B) {
+      const k = d, w = f.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === w || !S) {
         m();
         return;
       }
       if (!has(k, "_id")) {
-        a(k, A === "canvas" ? null : A, dropIndex), setTimeout(m, 300);
+        a(k, w === "canvas" ? null : w, dropIndex), setTimeout(m, 300);
         return;
       }
-      let C = f.getAttribute("data-block-id");
-      C === null && (C = x.target.parentElement.getAttribute("data-block-id")), c([k._id], C === "canvas" ? null : C, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      let A = f.getAttribute("data-block-id");
+      A === null && (A = h.target.parentElement.getAttribute("data-block-id")), c([k._id], A === "canvas" ? null : A, dropIndex), m(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (x) => {
-      const f = x, h = f.target;
-      dropTarget = h;
-      const b = h.getAttribute("data-block-id"), k = h.getAttribute("data-dnd-dragged") !== "yes";
-      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(h), r(!0), l(""), i([]);
+    onDragEnter: (h) => {
+      const f = h, x = f.target;
+      dropTarget = x;
+      const b = x.getAttribute("data-block-id"), k = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(x), r(!0), l(""), i([]);
     },
-    onDragLeave: (x) => {
-      x.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (h) => {
+      h.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3698,8 +3714,8 @@ const useHandleCanvasDblClick = (o, n) => {
         const f = o.getHTML();
         a([m], { content: f }), n.style.display = "none", u.style.visibility = "visible";
       }), i(m);
-      const x = d(m).content;
-      o.commands.setContent(x), 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);
+      const h = d(m).content;
+      o.commands.setContent(h), 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]
   );
@@ -3740,17 +3756,17 @@ const useHandleCanvasDblClick = (o, n) => {
         return;
       const f = getElementByDataBlockId(n, first(r));
       if (f) {
-        const h = f.getAttribute("data-style-prop");
-        if (h) {
+        const x = f.getAttribute("data-style-prop");
+        if (x) {
           const b = f.getAttribute("data-style-id"), k = f.getAttribute("data-block-parent");
-          l([{ id: b, prop: h, blockId: k }]);
+          l([{ id: b, prop: x, blockId: k }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
   const c = useEditor({
     extensions: [StarterKit]
-  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), m = useHandleMouseLeave(), x = useDnd();
+  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), m = useHandleMouseLeave(), h = useDnd();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3760,8 +3776,8 @@ const useHandleCanvasDblClick = (o, n) => {
       onDoubleClick: p,
       onMouseMove: g,
       onMouseLeave: m,
-      ...omit(x, "isDragging"),
-      className: "relative h-full max-w-full p-px " + (x.isDragging ? "dragging" : ""),
+      ...omit(h, "isDragging"),
+      className: "relative h-full max-w-full p-px " + (h.isDragging ? "dragging" : ""),
       children: o
     }
   );
@@ -3770,7 +3786,7 @@ const useHandleCanvasDblClick = (o, n) => {
     d == null ? void 0 : d.getElementById("selected-block")
   ), [m] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
-  ), [x] = useState(
+  ), [h] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3814,8 +3830,8 @@ const useHandleCanvasDblClick = (o, n) => {
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
-    x.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, x]), useEffect(() => {
+    h.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, h]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
     m && (m.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
@@ -3827,10 +3843,10 @@ const useHandleCanvasDblClick = (o, n) => {
   const f = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), h = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), x = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { id: "chai-theme", children: f }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: h } })
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: x } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3910,10 +3926,10 @@ const getBlockRuntimeProps = memoize((o) => {
   const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), m = useMemo(
     () => u ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
     [r, l, a, d, u]
-  ), x = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), f = useMemo(
+  ), h = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), f = useMemo(
     () => c(r._id, getBlockRuntimeProps(r._type)),
     [r._id, r._type, c, getBlockRuntimeProps]
-  ), h = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), b = useMemo(
+  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), b = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3922,9 +3938,9 @@ const getBlockRuntimeProps = memoize((o) => {
       inBuilder: !0,
       lang: l || i,
       ...m,
-      ...x,
+      ...h,
       ...f,
-      ...h
+      ...x
     }),
     [
       r._id,
@@ -3932,9 +3948,9 @@ const getBlockRuntimeProps = memoize((o) => {
       l,
       i,
       m,
-      x,
+      h,
       f,
-      h
+      x
     ]
   );
   return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...b, children: n }) });
@@ -3966,11 +3982,11 @@ const getBlockRuntimeProps = memoize((o) => {
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const m = p * u, x = d * u;
+      const m = p * u, h = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
         height: 100 + (p - m) / m * 100 + "%",
-        width: 100 + (d - x) / x * 100 + "%"
+        width: 100 + (d - h) / h * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3987,39 +4003,39 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, x] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), B = (_) => {
-    p((S) => ({ ...S, width: _ }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, h] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), w = useBuilderProp("htmlDir", "ltr"), S = (j) => {
+    p((C) => ({ ...C, width: j }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: _, clientHeight: S } = c.current;
-    p({ width: _, height: S });
+    const { clientWidth: j, clientHeight: C } = c.current;
+    p({ width: j, height: C });
   }, [c, n]);
-  const C = (_, S = 0) => {
-    const { top: w } = _.getBoundingClientRect();
-    return w + S >= 0 && w - S <= window.innerHeight;
+  const A = (j, C = 0) => {
+    const { top: B } = j.getBoundingClientRect();
+    return B + C >= 0 && B - C <= window.innerHeight;
   };
   useEffect(() => {
-    var _, S;
+    var j, C;
     if (a && a.type !== "Multiple" && i.current) {
-      const w = getElementByDataBlockId(i.current.contentDocument, a._id);
-      w && (C(w) || (S = (_ = i.current) == null ? void 0 : _.contentWindow) == null || S.scrollTo({ top: w.offsetTop, behavior: "smooth" }), m([w]));
+      const B = getElementByDataBlockId(i.current.contentDocument, a._id);
+      B && (A(B) || (C = (j = i.current) == null ? void 0 : j.contentWindow) == null || C.scrollTo({ top: B.offsetTop, behavior: "smooth" }), m([B]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(h) && i.current) {
-      const _ = getElementByStyleId(
+    if (!isEmpty(x) && i.current) {
+      const j = getElementByStyleId(
         i.current.contentDocument,
-        first(h).id
+        first(x).id
       );
-      x(_ ? [_] : [null]);
+      h(j ? [j] : [null]);
     } else
-      x([null]);
-  }, [h]);
-  const j = useMemo(() => {
-    let _ = IframeInitialContent;
-    return _ = _.replace("__HTML_DIR__", A), o === "offline" && (_ = _.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), _;
-  }, [o, A]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: B, onResize: B, children: /* @__PURE__ */ jsx(
+      h([null]);
+  }, [x]);
+  const E = useMemo(() => {
+    let j = IframeInitialContent;
+    return j = j.replace("__HTML_DIR__", w), o === "offline" && (j = j.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), j;
+  }, [o, w]);
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
@@ -4036,7 +4052,7 @@ const getBlockRuntimeProps = memoize((o) => {
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: j,
+          initialContent: E,
           children: [
             /* @__PURE__ */ jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsx(
@@ -4105,227 +4121,7 @@ const getBlockRuntimeProps = memoize((o) => {
     o ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(Resizable, { enable: { top: !0, bottom: !1 }, className: "max-h-[400px] min-h-[200px]", children: /* @__PURE__ */ jsx(CodeEditor$1, {}) }) }) : null,
     /* @__PURE__ */ jsx(Breadcrumb, {})
   ] }) });
-}, FONTS = [
-  { title: "Roboto", value: "Roboto" },
-  { title: "Open Sans", value: "Open Sans" },
-  { title: "Montserrat", value: "Montserrat" },
-  { title: "Lato", value: "Lato" },
-  { title: "Poppins", value: "Poppins" },
-  { title: "Oswald", value: "Oswald" },
-  { title: "Raleway", value: "Raleway" },
-  { title: "Ubuntu", value: "Ubuntu" },
-  { title: "Nunito", value: "Nunito" },
-  { title: "Merriweather", value: "Merriweather" },
-  { title: "Nunito Sans", value: "Nunito Sans" },
-  { title: "Playfair Display", value: "Playfair Display" },
-  { title: "Rubik", value: "Rubik" },
-  { title: "Inter", value: "Inter" },
-  { title: "Lora", value: "Lora" },
-  { title: "Kanit", value: "Kanit" },
-  { title: "Fira Sans", value: "Fira Sans" },
-  { title: "Hind", value: "Hind" },
-  { title: "Quicksand", value: "Quicksand" },
-  { title: "Mulish", value: "Mulish" },
-  { title: "Barlow", value: "Barlow" },
-  { title: "Inconsolata", value: "Inconsolata" },
-  { title: "Titillium Web", value: "Titillium Web" },
-  { title: "Heebo", value: "Heebo" },
-  { title: "IBM Plex Sans", value: "IBM Plex Sans" },
-  { title: "DM Sans", value: "DM Sans" },
-  { title: "Nanum Gothic", value: "Nanum Gothic" },
-  { title: "Karla", value: "Karla" },
-  { title: "Arimo", value: "Arimo" },
-  { title: "Cabin", value: "Cabin" },
-  { title: "Oxygen", value: "Oxygen" },
-  { title: "Overpass", value: "Overpass" },
-  { title: "Assistant", value: "Assistant" },
-  { title: "Tajawal", value: "Tajawal" },
-  { title: "Play", value: "Play" },
-  { title: "Exo", value: "Exo" },
-  { title: "Cinzel", value: "Cinzel" },
-  { title: "Faustina", value: "Faustina" },
-  { title: "Philosopher", value: "Philosopher" },
-  { title: "Gelasio", value: "Gelasio" },
-  { title: "Sofia Sans Condensed", value: "Sofia Sans Condensed" },
-  { title: "Noto Sans Devanagari", value: "Noto Sans Devanagari" },
-  { title: "Actor", value: "Actor" },
-  { title: "Epilogue", value: "Epilogue" },
-  { title: "Glegoo", value: "Glegoo" },
-  { title: "Overlock", value: "Overlock" },
-  { title: "Lustria", value: "Lustria" },
-  { title: "Ovo", value: "Ovo" },
-  { title: "Suranna", value: "Suranna" },
-  { title: "Bebas Neue", value: "Bebas Neue" },
-  { title: "Manrope", value: "Manrope" }
-], FontSelector = ({
-  label: o,
-  value: n,
-  onChange: r
-}) => /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-  /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: startCase(o) }),
-  /* @__PURE__ */ jsx(
-    "select",
-    {
-      className: "mt-1 w-full cursor-pointer 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",
-      value: n,
-      onChange: (a) => r(a.target.value),
-      children: FONTS.map((a) => /* @__PURE__ */ jsx("option", { value: a.value, children: a.title }, a.value))
-    }
-  )
-] }), ColorPickerInput = ({ value: o, onChange: n }) => {
-  const r = debounce((a) => n(a), 200);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "relative flex h-6 w-6 cursor-pointer rounded-lg border border-border",
-      style: { backgroundColor: o },
-      children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "color",
-          value: o.startsWith("#") ? o : "#000000",
-          onChange: (a) => {
-            const l = a.target.value;
-            /^#[0-9A-F]{6}$/i.test(l) && r(l);
-          },
-          className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg border-0 opacity-0"
-        }
-      )
-    }
-  );
-}, BorderRadiusInput = ({ value: o, onChange: n, disabled: r }) => {
-  const a = debounce((l) => n(l), 200);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "range",
-      min: "0",
-      step: "1",
-      max: "30",
-      disabled: r,
-      defaultValue: o.replace("px", ""),
-      onChange: (l) => a(l.target.value),
-      className: "flex-1 cursor-pointer"
-    }
-  );
-}, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (A) => {
-    a(A);
-  }, x = () => {
-    const A = l.find((B) => Object.keys(B)[0] === r);
-    if (A) {
-      const B = Object.values(A)[0];
-      B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? p(B) : console.error("Invalid preset structure:", B);
-    } else
-      console.error("Preset not found:", r);
-  }, f = useDebouncedCallback(
-    (A, B) => {
-      p(() => ({
-        ...d,
-        fontFamily: {
-          ...d.fontFamily,
-          [A.replace(/font-/g, "")]: B
-        }
-      }));
-    },
-    [d],
-    200
-  ), h = useDebouncedCallback(
-    (A) => {
-      p(() => ({
-        ...d,
-        borderRadius: `${A}px`
-      }));
-    },
-    [d],
-    200
-  ), b = useDebouncedCallback(
-    (A, B) => {
-      p(() => {
-        const C = get(d, `colors.${A}`);
-        return n ? set(C, 1, B) : set(C, 0, B), {
-          ...d,
-          colors: {
-            ...d.colors,
-            [A]: C
-          }
-        };
-      });
-    },
-    [d],
-    200
-  ), k = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([B]) => {
-    const C = get(d, `colors.${B}.${n ? 1 : 0}`);
-    return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
-      /* @__PURE__ */ jsx(
-        ColorPickerInput,
-        {
-          value: C,
-          onChange: (j) => b(B, j)
-        }
-      ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, B);
-  }) });
-  return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
-      l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Presets") }),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: r,
-              onChange: (A) => m(A.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((A) => /* @__PURE__ */ jsx("option", { value: Object.keys(A)[0], children: capitalize(Object.keys(A)[0]) }, Object.keys(A)[0]))
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: "w-full text-sm",
-            disabled: r === "",
-            variant: "default",
-            onClick: x,
-            children: g("Apply")
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([A, B]) => /* @__PURE__ */ jsx(
-          FontSelector,
-          {
-            label: A,
-            value: d.fontFamily[A.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (C) => f(A, C)
-          },
-          A
-        )) }),
-        (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Border Radius") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: h }),
-            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
-          ] })
-        ] }),
-        (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((A) => k(A)) }, n ? "dark" : "light")
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {}),
-      /* @__PURE__ */ jsx("br", {})
-    ] }),
-    i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
-}), removeSizeAttributes = (o) => {
+}, removeSizeAttributes = (o) => {
   try {
     return o.replace(/<svg([^>]*)\sheight="[^"]*"([^>]*)>/gi, "<svg$1$2>").replace(/<svg([^>]*)\swidth="[^"]*"([^>]*)>/gi, "<svg$1$2>");
   } catch {
@@ -4408,19 +4204,19 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   }, [a, o]);
   const u = (f) => Array.isArray(f) ? "array" : typeof f == "object" && f !== null ? "object" : "value", g = React.useCallback(
     (f) => {
-      const h = (b) => r === "value" ? b === "value" || b === "object" : r === "array" ? b === "array" : b === r;
-      f.type === "object" ? (c((b) => [...b, f.key]), p(f.value)) : h(f.type) && (n([...i, f.key].join(".")), l(!1));
+      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]
   ), m = React.useCallback(() => {
     if (i.length > 0) {
       const f = i.slice(0, -1);
-      c(f), p(f.reduce((h, b) => h[b], o));
+      c(f), p(f.reduce((x, b) => x[b], o));
     }
-  }, [i, o]), x = React.useMemo(() => Object.entries(d).map(([f, h]) => ({
+  }, [i, o]), h = React.useMemo(() => Object.entries(d).map(([f, x]) => ({
     key: f,
-    value: h,
-    type: u(h)
+    value: x,
+    type: u(x)
   })).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: [
@@ -4446,7 +4242,7 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          x.map((f) => /* @__PURE__ */ jsxs(
+          h.map((f) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
               value: f.key,
@@ -4462,8 +4258,8 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                      onClick: (h) => {
-                        h.stopPropagation(), n([...i, f.key].join(".")), l(!1);
+                      onClick: (x) => {
+                        x.stopPropagation(), n([...i, f.key].join(".")), l(!1);
                       },
                       children: "Select"
                     }
@@ -4639,8 +4435,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           z-index: 9999 !important;
         }
       `, document.head.appendChild(m), () => {
-        const x = document.getElementById("rte-modal-styles");
-        x && x.remove();
+        const h = document.getElementById("rte-modal-styles");
+        h && h.remove();
       };
     }
   }, [o]);
@@ -4662,12 +4458,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     ],
     content: a || "",
     onUpdate: ({ editor: m }) => {
-      const x = m.getHTML();
-      l(x);
+      const h = m.getHTML();
+      l(h);
     },
     onBlur: ({ editor: m }) => {
-      const x = m.getHTML();
-      i(r, x);
+      const h = m.getHTML();
+      i(r, h);
     },
     editorProps: {
       attributes: {
@@ -4684,17 +4480,17 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [u, o]);
   const g = (m) => {
     if (!u) return;
-    const x = `{{${m}}}`;
+    const h = `{{${m}}}`;
     u.commands.focus();
-    const { from: f, to: h } = u.state.selection;
-    if (f !== h)
-      u.chain().deleteSelection().insertContent(x).run();
+    const { from: f, to: x } = u.state.selection;
+    if (f !== x)
+      u.chain().deleteSelection().insertContent(h).run();
     else {
-      const { state: k } = u, A = k.selection.from, B = k.doc.textBetween(Math.max(0, A - 1), A), C = k.doc.textBetween(A, Math.min(A + 1, k.doc.content.size));
+      const { state: k } = u, w = k.selection.from, S = k.doc.textBetween(Math.max(0, w - 1), w), A = k.doc.textBetween(w, Math.min(w + 1, k.doc.content.size));
+      let E = "";
+      w > 0 && S !== " " && !/[.,!?;:]/.test(S) && (E = " ");
       let j = "";
-      A > 0 && B !== " " && !/[.,!?;:]/.test(B) && (j = " ");
-      let _ = "";
-      C && C !== " " && !/[.,!?;:]/.test(C) && (_ = " "), u.chain().insertContent(j + x + _).run();
+      A && A !== " " && !/[.,!?;:]/.test(A) && (j = " "), u.chain().insertContent(E + h + j).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4730,12 +4526,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     ],
     content: r || "",
     onUpdate: ({ editor: f }) => {
-      const h = f.getHTML();
-      a(h), c || u(h);
+      const x = f.getHTML();
+      a(x), c || u(x);
     },
     onBlur: ({ editor: f }) => {
-      const h = f.getHTML();
-      l(o, h);
+      const x = f.getHTML();
+      l(o, x);
     },
     editorProps: {
       attributes: {
@@ -4750,7 +4546,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [r]);
   const m = (f) => {
     a(f);
-  }, x = () => {
+  }, h = () => {
     d(!1), g && g.commands.setContent(p);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4762,7 +4558,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       RTEModal,
       {
         isOpen: c,
-        onClose: x,
+        onClose: h,
         id: o,
         value: p,
         onChange: m,
@@ -4776,31 +4572,31 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   onChange: r
 }) => {
   var L;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, x] = useState(""), [f, h] = useState([]), [b, k] = useState(-1), A = useRef(null), B = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [b, k] = useState(-1), w = useRef(null), S = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
-    if (x(""), h([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (h(""), x([]), k(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), y = get(v, 1, "page") || "page";
     g(y), (async () => {
-      const E = await l(y, [get(v, 2, "page")]);
-      E && Array.isArray(E) && x(get(E, [0, "name"], ""));
+      const _ = await l(y, [get(v, 2, "page")]);
+      _ && Array.isArray(_) && h(get(_, [0, "name"], ""));
     })();
   }, [o]);
-  const C = useDebouncedCallback(
+  const A = useDebouncedCallback(
     async (v) => {
       if (isEmpty(v))
-        h([]);
+        x([]);
       else {
         const y = await l(u, v);
-        h(y);
+        x(y);
       }
       c(!1), k(-1);
     },
     [u],
     300
-  ), j = (v) => {
+  ), E = (v) => {
     const y = ["pageType", u, v.id];
-    y[1] && (r(y.join(":")), x(v.name), p(!1), h([]), k(-1));
-  }, _ = (v) => {
+    y[1] && (r(y.join(":")), h(v.name), p(!1), x([]), k(-1));
+  }, j = (v) => {
     switch (v.key) {
       case "ArrowDown":
         v.preventDefault(), k((y) => y < f.length - 1 ? y + 1 : y);
@@ -4810,23 +4606,23 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         break;
       case "Enter":
         if (v.preventDefault(), f.length === 0) return;
-        b >= 0 && j(f[b]);
+        b >= 0 && E(f[b]);
         break;
       case "Escape":
-        v.preventDefault(), S();
+        v.preventDefault(), C();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && A.current) {
-      const v = A.current.children[b];
+    if (b >= 0 && w.current) {
+      const v = w.current.children[b];
       v == null || v.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
-  const S = () => {
-    x(""), h([]), k(-1), p(!1), r("");
-  }, w = (v) => {
-    x(v), p(!isEmpty(v)), c(!0), C(v);
+  const C = () => {
+    h(""), x([]), k(-1), p(!1), r("");
+  }, B = (v) => {
+    h(v), p(!isEmpty(v)), c(!0), A(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
@@ -4836,13 +4632,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         {
           type: "text",
           value: m,
-          onChange: (v) => w(v.target.value),
-          onKeyDown: _,
-          placeholder: a(`Search ${B ?? ""}`),
+          onChange: (v) => B(v.target.value),
+          onKeyDown: j,
+          placeholder: a(`Search ${S ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: 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: m && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (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" }),
@@ -4852,10 +4648,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(f == null ? void 0 : f.slice(0, 20), (v, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: w, children: map(f == null ? void 0 : f.slice(0, 20), (v, y) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => j(v),
+        onClick: () => E(v),
         className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : y === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
@@ -4950,29 +4746,29 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
   const m = () => {
-    const h = findIndex(u, { _id: g });
-    if (h > -1) {
-      const b = (h + 1) % u.length, k = get(u, [b, "_id"]);
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const b = (x + 1) % u.length, k = get(u, [b, "_id"]);
       if (!k) return;
       n({ ...o, currentSlide: k }), c([k]);
     }
-  }, x = () => {
-    const h = findIndex(u, { _id: g });
-    if (h > -1) {
-      const b = (h - 1 + u.length) % u.length, k = get(u, [b, "_id"]);
+  }, h = () => {
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const b = (x - 1 + u.length) % u.length, k = get(u, [b, "_id"]);
       if (!k) return;
       n({ ...o, currentSlide: k }), c([k]);
     }
   }, f = () => {
-    const h = i(
+    const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), b = h == null ? void 0 : h._id;
+    ), 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: [
-      /* @__PURE__ */ jsx("button", { onClick: x, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { 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(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -5046,8 +4842,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (h) => {
-              let b = h.target.value;
+            onChange: (x) => {
+              let b = x.target.value;
               b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
             }
           }
@@ -5087,12 +4883,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: x, fallbackLang: f, languages: h } = useLanguages(), b = isEmpty(h) ? "" : isEmpty(x) ? f : x, k = get(LANGUAGES, b, b), A = usePageExternalData(), B = useSelectedBlock(), C = useRegisteredChaiBlocks(), j = get(C, [B == null ? void 0 : B._type, "i18nProps"], []) || [], [_, S] = useState(null), w = useCallback(
+  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(h) ? f : h, k = get(LANGUAGES, b, b), w = usePageExternalData(), S = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [S == null ? void 0 : S._type, "i18nProps"], []) || [], [j, C] = useState(null), B = useCallback(
     (y) => {
-      const E = (P) => /[.,!?;:]/.test(P), T = (P, N, M) => {
+      const _ = (P) => /[.,!?;:]/.test(P), T = (P, N, M) => {
         let D = "", O = "";
         const $ = N > 0 ? P[N - 1] : "", H = N < P.length ? P[N] : "";
-        return N > 0 && ($ === "." || !E($) && $ !== " ") && (D = " "), N < P.length && !E(H) && H !== " " && (O = " "), {
+        return N > 0 && ($ === "." || !_($) && $ !== " ") && (D = " "), N < P.length && !_(H) && H !== " " && (O = " "), {
           text: D + M + O,
           prefixLength: D.length,
           suffixLength: O.length
@@ -5111,9 +4907,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           else {
             const { state: $ } = P, H = $.selection.from, U = $.doc.textBetween(Math.max(0, H - 1), H), F = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
             let z = "";
-            H > 0 && U !== " " && !E(U) && (z = " ");
+            H > 0 && U !== " " && !_(U) && (z = " ");
             let W = "";
-            F && F !== " " && !E(F) && (W = " "), P.chain().insertContent(z + N + W).run();
+            F && F !== " " && !_(F) && (W = " "), P.chain().insertContent(z + N + W).run();
           }
           setTimeout(() => m(P.getHTML(), {}, o), 100);
           return;
@@ -5129,20 +4925,20 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         m(U, {}, o);
       }
     },
-    [o, m, g, B == null ? void 0 : B._id]
+    [o, m, g, S == null ? void 0 : S._id]
   );
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const v = j == null ? void 0 : j.includes(o.replace("root.", ""));
+  const v = E == null ? void 0 : E.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const y = _ === o;
+    const y = j === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => S(y ? null : o),
+          onClick: () => C(y ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             y ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
@@ -5172,7 +4968,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && A && /* @__PURE__ */ jsx(NestedPathSelector, { data: A, onSelect: w, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && w && /* @__PURE__ */ jsx(NestedPathSelector, { data: w, onSelect: B, dataType: "value" })
     ] }),
     c,
     a,
@@ -5227,8 +5023,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       formData: a,
       onChange: ({ formData: g }, m) => {
         if (!m || o !== (g == null ? void 0 : g._id)) return;
-        const x = take(m.split("."), 2).join(".").replace("root.", "");
-        u({ formData: g }, x);
+        const h = take(m.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, h);
       }
     },
     i
@@ -5271,35 +5067,35 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), x = formDataWithSelectedLang(g, o, m), f = ({ formData: _ }, S, w) => {
-    S && (c == null ? void 0 : c._id) === n._id && a([n._id], { [S]: get(_, S) }, w);
-  }, h = useCallback(
-    debounce(({ formData: _ }, S, w) => {
-      f({ formData: _ }, S, w), d(_);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: j }, C, B) => {
+    C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(j, C) }, B);
+  }, x = useCallback(
+    debounce(({ formData: j }, C, B) => {
+      f({ formData: j }, C, B), d(j);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), b = ({ formData: _ }, S) => {
-    S && (r([n._id], { [S]: get(_, S) }), h({ formData: _ }, S, { [S]: get(c, S) }));
-  }, k = ({ formData: _ }, S) => {
-    S && (r([g._id], { [S]: get(_, S) }), h({ formData: _ }, S, { [S]: get(c, S) }));
+  ), b = ({ formData: j }, C) => {
+    C && (r([n._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
+  }, k = ({ formData: j }, C) => {
+    C && (r([g._id], { [C]: get(j, C) }), x({ formData: j }, C, { [C]: get(c, C) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: A, uiSchema: B } = useMemo(() => {
-    const _ = n == null ? void 0 : n._type;
-    if (_)
-      return getBlockFormSchemas(_);
-  }, [n]), { wrapperSchema: C, wrapperUiSchema: j } = useMemo(() => {
+  const { schema: w, uiSchema: S } = useMemo(() => {
+    const j = n == null ? void 0 : n._type;
+    if (j)
+      return getBlockFormSchemas(j);
+  }, [n]), { wrapperSchema: A, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const _ = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: w = {} } = getBlockFormSchemas(_);
-    return { wrapperSchema: S, wrapperUiSchema: w };
+    const j = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: B = {} } = getBlockFormSchemas(j);
+    return { wrapperSchema: C, wrapperUiSchema: B };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((_) => !_),
+          onClick: () => u((j) => !j),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5319,20 +5115,20 @@ function BlockSettings() {
         {
           blockId: g == null ? void 0 : g._id,
           onChange: k,
-          formData: x,
-          schema: C,
-          uiSchema: j
+          formData: h,
+          schema: A,
+          uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(A) ? null : /* @__PURE__ */ jsx(
+    isEmpty(w) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: b,
         formData: i,
-        schema: A,
-        uiSchema: B
+        schema: w,
+        uiSchema: S
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsx(GlobalBlockSettings, {}) : null
@@ -5437,23 +5233,23 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
   canvas: n = !1,
   tooltip: r = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (k) => {
-    u.includes(k) ? u.length > 2 && g(u.filter((A) => A !== k)) : g((A) => [...A, k]);
-  }, h = (k) => {
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (k) => {
+    u.includes(k) ? u.length > 2 && g(u.filter((w) => w !== k)) : g((w) => [...w, k]);
+  }, x = (k) => {
     n || l(k), c(k);
   }, b = getBreakpointValue(n ? i : a).toLowerCase();
-  return x.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(x, (k) => /* @__PURE__ */ createElement(
+  return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (k) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
       ...k,
-      onClick: h,
+      onClick: x,
       key: k.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(
-      x.filter((k) => includes(u, toUpper(k.breakpoint))),
+      h.filter((k) => includes(u, toUpper(k.breakpoint))),
       (k) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
@@ -5461,7 +5257,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
           openDelay: o,
           tooltip: r,
           ...k,
-          onClick: h,
+          onClick: x,
           key: k.breakpoint,
           currentBreakpoint: b
         }
@@ -5472,7 +5268,7 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
         /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(x, (k) => /* @__PURE__ */ jsx(
+        map(h, (k) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
             disabled: k.breakpoint === "xs",
@@ -5557,11 +5353,11 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
-    var x;
-    (x = d.current) == null || x.focus();
+    var h;
+    (h = d.current) == null || h.focus();
   }, []);
-  const m = (x) => {
-    const { usage: f } = x || {};
+  const m = (h) => {
+    const { usage: f } = h || {};
     !l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -5571,12 +5367,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (x) => c(x.target.value),
+        onChange: (h) => c(h.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (x) => {
-          x.key === "Enter" && (x.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
+        onKeyDown: (h) => {
+          h.key === "Enter" && (h.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
         }
       }
     ),
@@ -5618,10 +5414,10 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var T;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), x = useBuilderProp("askAiCallBack", null), [f, h] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: k } = getSplitChaiClasses(get(p, b, "")), A = k.split(" ").filter((I) => !isEmpty(I)), B = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: k } = getSplitChaiClasses(get(p, b, "")), w = k.split(" ").filter((I) => !isEmpty(I)), S = () => {
     const I = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, I, !0), h("");
-  }, [C, j] = useState([]), _ = ({ value: I }) => {
+    u(m, I, !0), x("");
+  }, [A, E] = useState([]), j = ({ value: I }) => {
     const R = I.trim().toLowerCase(), P = R.match(/.+:/g);
     let N = [];
     if (P && P.length > 0) {
@@ -5632,10 +5428,10 @@ function ManualClasses() {
       }));
     } else
       N = i.search(R);
-    return j(map(N, "item"));
-  }, S = () => {
-    j([]);
-  }, w = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
+    return E(map(N, "item"));
+  }, C = () => {
+    E([]);
+  }, B = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5645,9 +5441,9 @@ function ManualClasses() {
       placeholder: c("Enter classes separated by space"),
       value: f,
       onKeyDown: (I) => {
-        I.key === "Enter" && f.trim() !== "" && B();
+        I.key === "Enter" && f.trim() !== "" && S();
       },
-      onChange: (I, { newValue: R }) => h(R),
+      onChange: (I, { newValue: R }) => x(R),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
@@ -5655,23 +5451,23 @@ function ManualClasses() {
     debugger;
     const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [I]), u(m, R, !0), r(""), l(-1);
-  }, E = () => {
+  }, _ = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(A.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(w.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: E, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: _, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
-      x ? /* @__PURE__ */ jsxs(Popover, { children: [
+      h ? /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
           /* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
@@ -5683,10 +5479,10 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: C,
-          onSuggestionsFetchRequested: _,
-          onSuggestionsClearRequested: S,
-          getSuggestionValue: w,
+          suggestions: A,
+          onSuggestionsFetchRequested: j,
+          onSuggestionsClearRequested: C,
+          getSuggestionValue: B,
           renderSuggestion: L,
           inputProps: v,
           containerProps: {
@@ -5704,14 +5500,14 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: B,
+          onClick: S,
           disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: A.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: w.map(
       (I, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -5859,29 +5655,151 @@ const BlockStylingProps = () => {
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] });
-}, EDITOR_ICONS = {
-  "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
-  // visibility
-  visible: EyeOpenIcon,
-  invisible: EyeClosedIcon,
-  // display
-  hidden: EyeClosedIcon,
-  gap: BorderAllIcon,
-  gapX: WidthIcon,
-  gapY: HeightIcon,
-  spaceX: WidthIcon,
-  spaceY: HeightIcon,
-  overscroll: BorderAllIcon,
-  overscrollX: WidthIcon,
-  overscrollY: HeightIcon,
-  overflow: BorderAllIcon,
-  overflowX: WidthIcon,
-  overflowY: HeightIcon,
-  top: ArrowUpIcon,
-  right: ArrowRightIcon,
-  bottom: ArrowDownIcon,
-  left: ArrowLeftIcon,
-  inset: BorderAllIcon,
+}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: o, canReset: n = !1, canChange: r = !0 }) => (
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
+), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
+  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
+  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
+    /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
+    ] })
+  ] }) : /* @__PURE__ */ jsx(
+    DropDown,
+    {
+      rounded: o,
+      onChange: (u) => r(u, n),
+      selected: c,
+      options: l,
+      disabled: !d
+    }
+  ) });
+};
+function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disabled: l = !1 }) {
+  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
+  return /* @__PURE__ */ jsxs(
+    "select",
+    {
+      disabled: !a.length || l,
+      className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
+      onChange: (p) => n(p.target.value),
+      onKeyDown: (p) => {
+        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
+      },
+      value: i,
+      children: [
+        /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
+        a.map((p, u) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }, `option-${u}`))
+      ]
+    }
+  );
+}
+const COLOR_PROP = {
+  backgroundColor: "bg",
+  textColor: "text",
+  borderColor: "border",
+  boxShadowColor: "shadow",
+  outlineColor: "outline",
+  divideColor: "divide",
+  fromColor: "from",
+  viaColor: "via",
+  toColor: "to",
+  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", ""), m = get(u, "2", ""), h = useCallback(
+    // eslint-disable-next-line no-shadow
+    (b) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
+    },
+    [c, p]
+  );
+  useEffect(() => {
+    if (["current", "inherit", "transparent", "black", "white"].includes(g))
+      return c([]);
+    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
+  }, [g]);
+  const f = useCallback(
+    // eslint-disable-next-line no-shadow
+    (b) => {
+      p({ color: g, shade: b });
+    },
+    [g]
+  );
+  useEffect(() => {
+    p({ color: "", shade: "" });
+  }, [r]);
+  const { match: x } = useTailwindClassList();
+  return useEffect(() => {
+    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    x(o, k) && n(k, o);
+  }, [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,
+      {
+        disabled: !l,
+        rounded: !0,
+        selected: g,
+        onChange: h,
+        options: [
+          "current",
+          "transparent",
+          "primary",
+          "secondary",
+          "black",
+          "white",
+          "slate",
+          "gray",
+          "zinc",
+          "neutral",
+          "stone",
+          "red",
+          "orange",
+          "amber",
+          "yellow",
+          "lime",
+          "green",
+          "emerald",
+          "teal",
+          "cyan",
+          "sky",
+          "blue",
+          "indigo",
+          "violet",
+          "purple",
+          "fuchsia",
+          "pink",
+          "rose"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: f, options: i }) })
+  ] });
+}, EDITOR_ICONS = {
+  "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
+  // visibility
+  visible: EyeOpenIcon,
+  invisible: EyeClosedIcon,
+  // display
+  hidden: EyeClosedIcon,
+  gap: BorderAllIcon,
+  gapX: WidthIcon,
+  gapY: HeightIcon,
+  spaceX: WidthIcon,
+  spaceY: HeightIcon,
+  overscroll: BorderAllIcon,
+  overscrollX: WidthIcon,
+  overscrollY: HeightIcon,
+  overflow: BorderAllIcon,
+  overflowX: WidthIcon,
+  overflowY: HeightIcon,
+  top: ArrowUpIcon,
+  right: ArrowRightIcon,
+  bottom: ArrowDownIcon,
+  left: ArrowLeftIcon,
+  inset: BorderAllIcon,
   insetX: WidthIcon,
   insetY: HeightIcon,
   border: BorderAllIcon,
@@ -6053,130 +5971,6 @@ const BlockStylingProps = () => {
     )
   ] }),
   static: Cross1Icon
-}, StyleContext = createContext({ canReset: !1, canChange: !0 }), BlockStyleProvider = ({ children: o, canReset: n = !1, canChange: r = !0 }) => (
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
-), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
-  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
-  return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
-    /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind arbitrary value." })
-    ] })
-  ] }) : /* @__PURE__ */ jsx(
-    DropDown,
-    {
-      rounded: o,
-      onChange: (u) => r(u, n),
-      selected: c,
-      options: l,
-      disabled: !d
-    }
-  ) });
-};
-function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disabled: l = !1 }) {
-  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
-  return /* @__PURE__ */ jsxs(
-    "select",
-    {
-      disabled: !a.length || l,
-      className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
-      onChange: (p) => n(p.target.value),
-      onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
-      },
-      value: i,
-      children: [
-        /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
-        React__default.Children.toArray(
-          a.map((p) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }))
-        )
-      ]
-    }
-  );
-}
-const COLOR_PROP = {
-  backgroundColor: "bg",
-  textColor: "text",
-  borderColor: "border",
-  boxShadowColor: "shadow",
-  outlineColor: "outline",
-  divideColor: "divide",
-  fromColor: "from",
-  viaColor: "via",
-  toColor: "to",
-  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", ""), m = get(u, "2", ""), x = useCallback(
-    // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((k) => ({ ...k, color: b, shade: k.shade ? k.shade : "500" })));
-    },
-    [c, p]
-  );
-  useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(g))
-      return c([]);
-    c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [g]);
-  const f = useCallback(
-    // eslint-disable-next-line no-shadow
-    (b) => {
-      p({ color: g, shade: b });
-    },
-    [g]
-  );
-  useEffect(() => {
-    p({ color: "", shade: "" });
-  }, [r]);
-  const { match: h } = useTailwindClassList();
-  return useEffect(() => {
-    const k = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    h(o, k) && n(k, o);
-  }, [h, 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,
-      {
-        disabled: !l,
-        rounded: !0,
-        selected: g,
-        onChange: x,
-        options: [
-          "current",
-          "transparent",
-          "primary",
-          "secondary",
-          "black",
-          "white",
-          "slate",
-          "gray",
-          "zinc",
-          "neutral",
-          "stone",
-          "red",
-          "orange",
-          "amber",
-          "yellow",
-          "lime",
-          "green",
-          "emerald",
-          "teal",
-          "cyan",
-          "sky",
-          "blue",
-          "indigo",
-          "violet",
-          "purple",
-          "fuchsia",
-          "pink",
-          "rose"
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, 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]);
   return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -6372,50 +6166,50 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, x] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, k] = useState(""), [A, B] = useState(!1), [C, j] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, k] = useState(""), [w, S] = useState(!1), [A, E] = useState(!1);
   useEffect(() => {
     const { value: v, unit: y } = getClassValueAndUnit(i);
     if (y === "") {
-      l(v), x(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(v), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    x(y), l(y === "class" || isEmpty(v) ? "" : v);
+    h(y), l(y === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const _ = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), S = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+  const j = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), C = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), B = useCallback(
     (v = !1) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
-        h(!0);
+        x(!0);
         return;
       }
-      const E = get(y, "unit") !== "" ? get(y, "unit") : m;
-      if (E === "auto" || E === "none") {
-        _(`${d}${E}`);
+      const _ = get(y, "unit") !== "" ? get(y, "unit") : m;
+      if (_ === "auto" || _ === "none") {
+        j(`${d}${_}`);
         return;
       }
       if (get(y, "value") === "")
         return;
-      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      v ? S(I) : _(I);
+      const I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      v ? C(I) : j(I);
     },
-    [_, S, a, m, d, u]
+    [j, C, a, m, d, u]
   ), L = useCallback(
     (v) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
-        h(!0);
+        x(!0);
         return;
       }
       if (v === "auto" || v === "none") {
-        _(`${d}${v}`);
+        j(`${d}${v}`);
         return;
       }
       if (get(y, "value") === "")
         return;
-      const E = get(y, "unit") !== "" ? get(y, "unit") : v, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
-      _(I);
+      const _ = get(y, "unit") !== "" ? get(y, "unit") : v, I = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      j(I);
     },
-    [_, a, d, u]
+    [j, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -6430,37 +6224,37 @@ const COLOR_PROP = {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${A ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${w ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
           onKeyPress: (v) => {
-            v.key === "Enter" && w();
+            v.key === "Enter" && B();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            v.preventDefault(), j(!0);
+            v.preventDefault(), E(!0);
             const y = parseInt$1(v.target.value);
-            let E = isNaN$1(y) ? 0 : y;
-            v.keyCode === 38 && (E += 1), v.keyCode === 40 && (E -= 1);
-            const T = `${E}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
-            S(R);
+            let _ = isNaN$1(y) ? 0 : y;
+            v.keyCode === 38 && (_ += 1), v.keyCode === 40 && (_ -= 1);
+            const T = `${_}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${m === "-" ? "" : m}]`;
+            C(R);
           },
           onKeyUp: (v) => {
-            C && (v.preventDefault(), j(!1));
+            A && (v.preventDefault(), E(!1));
           },
-          onBlur: () => w(),
+          onBlur: () => B(),
           onChange: (v) => {
-            h(!1), l(v.target.value);
+            x(!1), l(v.target.value);
           },
           onClick: (v) => {
             var y;
             (y = v == null ? void 0 : v.target) == null || y.select(), r(!1);
           },
-          value: A ? b : a,
+          value: w ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6486,28 +6280,28 @@ const COLOR_PROP = {
             units: u,
             current: m,
             onSelect: (v) => {
-              r(!1), x(v), L(v);
+              r(!1), h(v), L(v);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || A ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || w ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => B(!0),
+        onDragStart: () => S(!0),
         onDragEnd: (v) => {
-          if (k(() => ""), B(!1), isEmpty(v))
+          if (k(() => ""), S(!1), isEmpty(v))
             return;
           const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          _(T);
+          j(T);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           k(v);
           const y = `${v}`, T = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
-          S(T);
+          C(T);
         },
         currentValue: a,
         unit: m,
@@ -6604,35 +6398,35 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), x = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), k = useCallback(
-    (S, w = !0) => {
-      const L = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), k = useCallback(
+    (C, B = !0) => {
+      const L = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
       (p || u !== "") && (L.mq = "xs");
       const v = generateFullClsName(L);
-      x(h, [v], w);
+      h(x, [v], B);
     },
-    [h, p, g, u, l, x]
-  ), A = useCallback(() => {
-    f(h, [b], !0);
-  }, [h, b, f]), B = useMemo(() => canChangeClass(m, g), [m, g]);
+    [x, p, g, u, l, h]
+  ), w = useCallback(() => {
+    f(x, [b], !0);
+  }, [x, b, f]), S = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(B, m);
-  }, [B, i, m]);
-  const [, , C] = useScreenSizeWidth(), j = useCallback(
-    (S) => {
-      C({
+    i(S, m);
+  }, [S, i, m]);
+  const [, , A] = useScreenSizeWidth(), E = useCallback(
+    (C) => {
+      A({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[S]);
+      }[C]);
     },
-    [C]
-  ), _ = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && _, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !_ ? "text-foreground" : ""}`, children: n(a) }) }),
+    [A]
+  ), j = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: m && j, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !j ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6651,7 +6445,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: k }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: _ ? /* @__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" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => w(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6671,7 +6465,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => j(get(m, "mq")),
+              onClick: () => E(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6692,7 +6486,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((x) => map(g, "property").includes(x), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((h) => map(g, "property").includes(h), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6700,25 +6494,23 @@ const COLOR_PROP = {
       children: [
         /* @__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: x, 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(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: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
-                    }),
-                    React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(x)) })
-            ] }) }))
-          ) })
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => u(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: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                  }),
+                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(h)) })
+          ] }) }, `option-${x}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
           BlockStyle,
@@ -6772,12 +6564,8 @@ const COLOR_PROP = {
   ), i = useMemo(() => ({}), []);
   return /* @__PURE__ */ jsx(SectionContext.Provider, { value: i, children: n ? /* @__PURE__ */ jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
     /* @__PURE__ */ jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(r(o.heading)) }) }) }),
-    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
-      o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label))
-    ) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: React__default.Children.toArray(
-    o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label))
-  ) }) });
+    /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label)) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label)) }) });
 }, MAPPER = {
   px: 1,
   "%": 1,
@@ -6803,11 +6591,11 @@ function BlockStyling() {
   }), d = useThrottledCallback(
     (u) => {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
-      let x = parseFloat(i.dragStartValue);
-      x = isNaN(x) ? 0 : x;
+      let h = parseFloat(i.dragStartValue);
+      h = isNaN(h) ? 0 : h;
       let f = MAPPER[i.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (f = 10);
-      let b = (i.dragStartY - u.pageY) / f + x;
+      let b = (i.dragStartY - u.pageY) / f + h;
       g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
@@ -6853,20 +6641,20 @@ const CHAI_BUILDER_EVENTS = {
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), x = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (console.log("addBlockToPage", o), has(o, "blocks")) {
       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);
-  }, f = useFeature("dnd"), { t: h } = 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",
       {
         disabled: n,
-        onClick: x,
+        onClick: h,
         type: "button",
         onDragStart: (b) => {
           b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
@@ -6877,11 +6665,11 @@ const CHAI_BUILDER_EVENTS = {
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(h(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: h(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -7069,22 +6857,22 @@ const CHAI_BUILDER_EVENTS = {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, x, f, h, b, k, A, B;
+  var m, h, f, x, b, k, w, S;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
     return isEmpty(get(r, "content", "")) ? [] : n && shouldAddText(n.node, n.block) ? (set(n, "block.content", get(r, "content", "")), []) : { ...a, _type: "Text", content: get(r, "content", "") };
   const l = get(r, "attributes", []), i = l.find(
-    (C) => C.key === "data-chai-richtext" || C.key === "chai-richtext"
+    (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
   ), c = l.find(
-    (C) => C.key === "data-chai-lightbox" || C.key === "chai-lightbox"
+    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
   ), d = l.find(
-    (C) => C.key === "data-chai-dropdown" || C.key === "chai-dropdown"
+    (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
   ), p = l.find(
-    (C) => C.key === "data-chai-dropdown-button" || C.key === "chai-dropdown-button"
+    (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
   ), u = l.find(
-    (C) => C.key === "data-chai-dropdown-content" || C.key === "chai-dropdown-content"
+    (A) => A.key === "data-chai-dropdown-content" || A.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -7092,13 +6880,13 @@ const CHAI_BUILDER_EVENTS = {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const C = r.attributes.find((j) => includes(NAME_ATTRIBUTES, j.key));
-    C && (a._name = C.value);
+    const A = r.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    A && (a._name = A.value);
   }
   if (i)
     return a.content = stringify(r.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const C = [
+    const A = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -7110,44 +6898,44 @@ const CHAI_BUILDER_EVENTS = {
     ];
     a = {
       ...a,
-      href: ((m = l.find((j) => j.key === "href")) == null ? void 0 : m.value) || "",
-      hrefType: ((x = l.find((j) => j.key === "data-vbtype")) == null ? void 0 : x.value) || "video",
-      autoplay: ((f = l.find((j) => j.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((b = (h = l.find((j) => j.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : b.replace("px", "")) || "",
-      backdropColor: ((k = l.find((j) => j.key === "data-overlay")) == null ? void 0 : k.value) || "",
-      galleryName: ((A = l.find((j) => j.key === "data-gall")) == null ? void 0 : A.value) || ""
-    }, forEach(C, (j) => {
-      has(a, `styles_attrs.${j}`) && delete a.styles_attrs[j];
+      href: ((m = l.find((E) => E.key === "href")) == null ? void 0 : m.value) || "",
+      hrefType: ((h = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
+      autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((b = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : b.replace("px", "")) || "",
+      backdropColor: ((k = l.find((E) => E.key === "data-overlay")) == null ? void 0 : k.value) || "",
+      galleryName: ((w = l.find((E) => E.key === "data-gall")) == null ? void 0 : w.value) || ""
+    }, forEach(A, (E) => {
+      has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const C = filter(r.children || [], (_) => (_ == null ? void 0 : _.tagName) !== "span");
-    a.content = getTextContent(C);
-    const j = find(
+    const A = filter(r.children || [], (j) => (j == null ? void 0 : j.tagName) !== "span");
+    a.content = getTextContent(A);
+    const E = find(
       r.children || [],
-      (_) => (_ == null ? void 0 : _.tagName) === "span" && some(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
+      (j) => (j == null ? void 0 : j.tagName) === "span" && some(j.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
     );
-    if (j) {
-      const _ = find(j.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg");
-      if (_) {
-        a.icon = stringify([_]);
-        const { height: S, width: w } = getSvgDimensions(_, "16px", "16px");
-        a.iconHeight = S, a.iconWidth = w;
+    if (E) {
+      const j = find(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+      if (j) {
+        a.icon = stringify([j]);
+        const { height: C, width: B } = getSvgDimensions(j, "16px", "16px");
+        a.iconHeight = C, a.iconWidth = B;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const C = a.inputType || "text";
-    C === "checkbox" ? set(a, "_type", "Checkbox") : C === "radio" && set(a, "_type", "Radio");
+    const A = a.inputType || "text";
+    A === "checkbox" ? set(a, "_type", "Checkbox") : A === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const C = stringify([r]);
-    return hasVideoEmbed(C) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(C)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = C, [a];
+    const A = stringify([r]);
+    return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
   } else if (r.tagName === "svg") {
-    const C = find(r.attributes, { key: "height" }), j = find(r.attributes, { key: "width" }), _ = get(C, "value") ? `[${get(C, "value")}px]` : "24px", S = get(j, "value") ? `[${get(j, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${S} h-${_}`, w)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((B = n.block) == null ? void 0 : B._type) === "Select")
+    const A = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), j = get(A, "value") ? `[${get(A, "value")}px]` : "24px", C = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${C} h-${j}`, B)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((S = n.block) == null ? void 0 : S._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -7220,29 +7008,29 @@ const CHAI_BUILDER_EVENTS = {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const x = Object.entries(a).map(([h, b]) => {
-          const k = b, A = k.type || "partial", B = formatReadableName(A);
+        const h = Object.entries(a).map(([x, b]) => {
+          const k = b, w = k.type || "partial", S = formatReadableName(w);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(k.name || h),
+            label: formatReadableName(k.name || x),
             description: k.description || "",
             icon: Globe,
-            group: B,
+            group: S,
             // Use formatted type as group
             category: "partial",
-            partialBlockId: h,
+            partialBlockId: x,
             // Store the original ID as partialBlockId
             _name: k.name
           };
-        }), f = uniq(map(x, "group"));
+        }), f = uniq(map(h, "group"));
         p({
-          blocks: x,
+          blocks: h,
           groups: f,
           isLoading: !1,
           error: null
         }), g(!0);
-      } else l ? p((x) => ({ ...x, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
+      } else l ? p((h) => ({ ...h, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
         blocks: [],
         groups: [],
         isLoading: !1,
@@ -7258,7 +7046,7 @@ const CHAI_BUILDER_EVENTS = {
     c
   ]);
   const m = () => {
-    p((x) => ({ ...x, isLoading: !0, error: null })), g(!1), i();
+    p((h) => ({ ...h, 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: [
     /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
@@ -7282,11 +7070,11 @@ const CHAI_BUILDER_EVENTS = {
   );
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
   var v;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (v = find(c, (y) => y._id === r)) == null ? void 0 : v._type, [x, f] = useState("all"), [h, b] = useState(null), k = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (v = find(c, (y) => y._id === r)) == null ? void 0 : v._type, [h, f] = useState("all"), [x, b] = useState(null), k = useRef(null);
   useEffect(() => {
     const y = setTimeout(() => {
-      var E;
-      (E = u.current) == null || E.focus();
+      var _;
+      (_ = u.current) == null || _.focus();
     }, 0);
     return () => clearTimeout(y);
   }, [g]), useEffect(() => {
@@ -7296,29 +7084,29 @@ const CHAI_BUILDER_EVENTS = {
   }, 500), () => {
     k.current && k.current.cancel();
   }), []);
-  const A = useCallback((y) => {
+  const w = useCallback((y) => {
     b(y), k.current && k.current(y);
-  }, []), B = useCallback(() => {
+  }, []), S = useCallback(() => {
     b(null), k.current && k.current.cancel();
-  }, []), C = useCallback((y) => {
+  }, []), A = useCallback((y) => {
     k.current && k.current.cancel(), f(y), b(null);
-  }, []), j = useMemo(
+  }, []), E = useMemo(
     () => d ? values(n).filter(
       (y) => {
-        var E, T;
-        return (((E = y.label) == null ? void 0 : E.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+        var _, T;
+        return (((_ = y.label) == null ? void 0 : _.toLowerCase()) + " " + ((T = y.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
-  ), _ = useMemo(
+  ), j = useMemo(
     () => d ? o.filter(
-      (y) => reject(filter(values(j), { group: y }), { hidden: !0 }).length > 0
+      (y) => reject(filter(values(E), { group: y }), { hidden: !0 }).length > 0
     ) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
-    [n, j, o, d]
-  ), S = useMemo(
-    () => sortBy(_, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
-    [_]
-  ), w = useMemo(() => x === "all" ? j : filter(values(j), { group: x }), [j, x]), L = useMemo(() => x === "all" ? S : [x], [S, x]);
+    [n, E, o, d]
+  ), C = useMemo(
+    () => sortBy(j, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
+    [j]
+  ), B = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), L = useMemo(() => h === "all" ? C : [h], [C, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7332,52 +7120,50 @@ const CHAI_BUILDER_EVENTS = {
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      S.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      C.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => C("all"),
-            onMouseEnter: () => A("all"),
-            onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${x === "all" || h === "all" ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
+            onClick: () => A("all"),
+            onMouseEnter: () => w("all"),
+            onMouseLeave: S,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        S.map((y) => /* @__PURE__ */ jsx(
+        C.map((y) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => C(y),
-            onMouseEnter: () => A(y),
-            onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${x === y || h === y ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
+            onClick: () => A(y),
+            onMouseEnter: () => w(y),
+            onMouseLeave: S,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === y || x === y ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
             children: capitalize(i(y.toLowerCase()))
           },
           `sidebar-${y}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: _.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: j.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
         '"'
       ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-          reject(
-            x === "all" ? filter(values(w), { group: y }) : values(w),
-            { hidden: !0 }
-          ).map((E) => /* @__PURE__ */ jsx(
-            CoreBlock,
-            {
-              parentId: r,
-              position: a,
-              block: E,
-              disabled: !canAcceptChildBlock(m, E.type) || !canBeNestedInside(m, E.type)
-            },
-            E.type
-          ))
-        ) })
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
+          h === "all" ? filter(values(B), { group: y }) : values(B),
+          { hidden: !0 }
+        ).map((_) => /* @__PURE__ */ jsx(
+          CoreBlock,
+          {
+            parentId: r,
+            position: a,
+            block: _,
+            disabled: !canAcceptChildBlock(m, _.type) || !canBeNestedInside(m, _.type)
+          },
+          _.type
+        )) })
       ] }, y)) }) }) })
     ] })
   ] });
@@ -7387,13 +7173,13 @@ const CHAI_BUILDER_EVENTS = {
   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(), m = Object.keys(g || {}).length > 0, { hasPermission: x } = usePermissions();
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), { data: g } = usePartialBlocksList(), m = Object.keys(g || {}).length > 0, { hasPermission: h } = usePermissions();
   useEffect(() => {
     i === "partials" && !m && c("library");
   }, [i, m, c]);
   const f = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), h = p && x(PERMISSIONS.IMPORT_HTML);
+  }, []), x = p && h(PERMISSIONS.IMPORT_HTML);
   return /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
     n ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: l("Add block") }),
@@ -7412,13 +7198,13 @@ const CHAI_BUILDER_EVENTS = {
             /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             m && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
-            h ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
+            x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
             map(u, (b) => /* @__PURE__ */ jsx(TabsTrigger, { value: b.key, children: React__default.createElement(b.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 }) }),
           m && /* @__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: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
+          x ? /* @__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, (b) => /* @__PURE__ */ jsx(TabsContent, { value: b.key, children: React__default.createElement(b.tabContent, { close: f, parentId: r, position: a }) }))
         ]
       }
@@ -7461,7 +7247,7 @@ function UILibrariesSelect({
       {
         className: "mt-1",
         options: o.map((l) => ({
-          value: l.uuid,
+          value: l.id,
           label: l.name
         })),
         defaultValue: n,
@@ -7476,18 +7262,18 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), h = (A) => {
-    const B = has(A, "styles_attrs.data-page-section");
-    return A._type === "Box" && B;
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), x = (w) => {
+    const S = has(w, "styles_attrs.data-page-section");
+    return w._type === "Box" && S;
   }, b = useCallback(
-    async (A) => {
-      if (A.stopPropagation(), has(o, "component")) {
+    async (w) => {
+      if (w.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const B = await c(n, o);
-      isEmpty(B) || p(syncBlocksWithDefaults(B), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const S = await c(n, o);
+      isEmpty(S) || p(syncBlocksWithDefaults(S), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, n, r, a]
   );
@@ -7497,20 +7283,20 @@ const BlockCard = ({
       {
         onClick: l ? () => {
         } : b,
-        draggable: x ? "true" : "false",
-        onDragStart: async (A) => {
-          const B = await c(n, o);
-          let C = r;
-          if (h(first(B)) && (C = null), !isEmpty(B)) {
-            const j = { blocks: B, uiLibrary: !0, parent: C };
-            if (A.dataTransfer.setData("text/plain", JSON.stringify(j)), o.preview) {
-              const _ = new Image();
-              _.src = o.preview, _.onload = () => {
-                A.dataTransfer.setDragImage(_, 0, 0);
+        draggable: h ? "true" : "false",
+        onDragStart: async (w) => {
+          const S = await c(n, o);
+          let A = r;
+          if (x(first(S)) && (A = null), !isEmpty(S)) {
+            const E = { blocks: S, uiLibrary: !0, parent: A };
+            if (w.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
+              const j = new Image();
+              j.src = o.preview, j.onload = () => {
+                w.dataTransfer.setDragImage(j, 0, 0);
               };
             } else
-              A.dataTransfer.setDragImage(new Image(), 0, 0);
-            f(j), setTimeout(() => {
+              w.dataTransfer.setDragImage(new Image(), 0, 0);
+            f(E), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7529,55 +7315,45 @@ const BlockCard = ({
     ) }),
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m }) })
   ] });
-}, libraryBlocksAtom = atom$1(
-  {}
-), useLibraryBlocks = (o) => {
-  const [n, r] = useAtom$1(libraryBlocksAtom), a = useBuilderProp("getUILibraryBlocks", noop), l = get(n, `${o == null ? void 0 : o.uuid}.blocks`, null), i = get(n, `${o == null ? void 0 : o.uuid}.loading`, "idle"), c = useRef("idle");
-  return useEffect(() => {
-    (async () => {
-      if (i === "complete" || c.current === "loading") return;
-      c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "loading", blocks: [] } }));
-      const d = await a(o);
-      c.current = "idle", r((p) => ({ ...p, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
-    })();
-  }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, x] = useState("Hero"), f = get(g, m, []), h = useRef(null), { t: b } = useTranslation(), k = (C) => {
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = l.find((w) => w.id === r) || first(l), { data: c, isLoading: d } = useLibraryBlocks(i), p = groupBy([...c], "group"), [u, g] = useState(null);
+  useEffect(() => {
+    u || g(first(keys(p)));
+  }, [p, u]);
+  const m = get(p, u, []), h = useRef(null), { t: f } = useTranslation(), x = (w) => {
     h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
-      h.current && x(C);
+      h.current && g(w);
     }, 300);
   };
-  if (u)
+  if (d)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const A = filter(f, (C, j) => j % 2 === 0), B = filter(f, (C, j) => j % 2 === 1);
+  const b = filter(m, (w, S) => S % 2 === 0), k = filter(m, (w, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
-      /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
+      /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: f("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-        /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(g, (C, j) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              onMouseEnter: () => k(j),
-              onMouseLeave: () => clearTimeout(h.current),
-              onClick: () => x(j),
-              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",
-                j === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
-              ),
-              children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(b(j.toLowerCase())) }),
-                /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
-              ]
-            },
-            j
-          ))
-        ) })
+        /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: map(p, (w, S) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter: () => x(S),
+            onMouseLeave: () => clearTimeout(h.current),
+            onClick: () => g(S),
+            className: cn$1(
+              "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
+              S === u ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: capitalize(f(S.toLowerCase())) }),
+              /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
+            ]
+          },
+          S
+        )) })
       ] })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -7587,12 +7363,26 @@ const BlockCard = ({
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              A.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
-            ) })
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: b.map((w, S) => /* @__PURE__ */ jsx(
+              BlockCard,
+              {
+                parentId: o,
+                position: n,
+                block: w,
+                library: i
+              },
+              `block-${S}`
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: k.map((w, S) => /* @__PURE__ */ jsx(
+              BlockCard,
+              {
+                parentId: o,
+                position: n,
+                block: w,
+                library: i
+              },
+              `block-${S}`
+            )) })
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsx("br", {}),
@@ -7835,35 +7625,35 @@ const selectParent = (o, n) => {
   var P;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom), { hasPermission: p } = usePermissions();
   let u = null;
-  const g = o.children.length > 0, { highlightBlock: m, clearHighlight: x } = useBlockHighlight(), { id: f, data: h, isSelected: b, willReceiveDrop: k, isDragging: A, isEditing: B, handleClick: C } = o, j = (N) => {
+  const g = o.children.length > 0, { highlightBlock: m, clearHighlight: h } = useBlockHighlight(), { id: f, data: x, isSelected: b, willReceiveDrop: k, isDragging: w, isEditing: S, handleClick: A } = o, E = (N) => {
     N.stopPropagation(), !i.includes(f) && o.toggle();
-  }, _ = (N) => {
+  }, j = (N) => {
     N.isInternal && (u = N.isOpen, N.isOpen && N.close());
-  }, S = (N) => {
+  }, C = (N) => {
     N.isInternal && u !== null && (u ? N.open() : N.close(), u = null);
-  }, [w, L] = useAtom$1(currentAddSelection), v = () => {
+  }, [B, L] = useAtom$1(currentAddSelection), v = () => {
     var N;
     y(), o.parent.isSelected || L((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, y = () => {
     L(null);
-  }, E = (N) => {
-    y(), N.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), C(N);
+  }, _ = (N) => {
+    y(), N.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), A(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      k && !o.isOpen && !A && !i.includes(f) && o.toggle();
+      k && !o.isOpen && !w && !i.includes(f) && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [k, o, A]);
+  }, [k, o, w]);
   const T = useMemo(() => {
-    const N = Object.keys(h), M = [];
+    const N = Object.keys(x), M = [];
     for (let D = 0; D < N.length; D++)
       if (N[D].endsWith("_attrs")) {
-        const O = h[N[D]], $ = Object.keys(O).join("|");
+        const O = x[N[D]], $ = Object.keys(O).join("|");
         $.match(/x-data/) && M.push("data"), $.match(/x-on/) && M.push("event"), $.match(/x-show|x-if/) && M.push("show");
       }
     return M;
-  }, [h]), I = (N, M) => {
+  }, [x]), I = (N, M) => {
     const D = d.contentDocument || d.contentWindow.document, O = D.querySelector(`[data-block-id=${N}]`);
     O && O.setAttribute("data-drop", M);
     const $ = O.getBoundingClientRect(), H = d.getBoundingClientRect();
@@ -7893,13 +7683,13 @@ const selectParent = (o, n) => {
     "div",
     {
       onMouseEnter: () => m(f),
-      onMouseLeave: () => x(),
-      onClick: E,
+      onMouseLeave: () => h(),
+      onClick: _,
       style: n,
       "data-node-id": f,
       ref: i.includes(f) ? null : r,
-      onDragStart: () => _(o),
-      onDragEnd: () => S(o),
+      onDragStart: () => j(o),
+      onDragEnd: () => C(o),
       onDragOver: (N) => {
         N.preventDefault(), I(f, "yes");
       },
@@ -7928,9 +7718,9 @@ const selectParent = (o, n) => {
             className: cn$1(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              k && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === w ? "bg-purple-100" : "",
-              A && "opacity-20",
+              k && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === B ? "bg-purple-100" : "",
+              w && "opacity-20",
               i.includes(f) ? "opacity-50" : ""
             ),
             children: [
@@ -7939,12 +7729,12 @@ const selectParent = (o, n) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: g && /* @__PURE__ */ jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}` }) })
+                    children: g && /* @__PURE__ */ jsx("button", { onClick: E, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
-                  B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
+                  S ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
@@ -7952,7 +7742,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: (x == null ? void 0 : x._name) || (x == null ? void 0 : x._type.split("/").pop()) }),
                         T.includes("data") && /* @__PURE__ */ jsx(FileJson, { className: "h-3 w-3 text-orange-600" }),
                         T.includes("event") && /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3 text-yellow-500" }),
                         T.includes("show") && /* @__PURE__ */ jsx(EyeOff, { className: "h-3 w-3 text-orange-600" })
@@ -7973,7 +7763,7 @@ const selectParent = (o, n) => {
                   ),
                   /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: N.tooltip })
                 ] })),
-                canAddChildBlock(h == null ? void 0 : h._type) && !i.includes(f) && p(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(x == null ? void 0 : x._type) && !i.includes(f) && p(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8199,7 +7989,227 @@ const selectParent = (o, n) => {
     ) }),
     /* @__PURE__ */ jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
   ] });
-}, Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
+}, FONTS = [
+  { title: "Roboto", value: "Roboto" },
+  { title: "Open Sans", value: "Open Sans" },
+  { title: "Montserrat", value: "Montserrat" },
+  { title: "Lato", value: "Lato" },
+  { title: "Poppins", value: "Poppins" },
+  { title: "Oswald", value: "Oswald" },
+  { title: "Raleway", value: "Raleway" },
+  { title: "Ubuntu", value: "Ubuntu" },
+  { title: "Nunito", value: "Nunito" },
+  { title: "Merriweather", value: "Merriweather" },
+  { title: "Nunito Sans", value: "Nunito Sans" },
+  { title: "Playfair Display", value: "Playfair Display" },
+  { title: "Rubik", value: "Rubik" },
+  { title: "Inter", value: "Inter" },
+  { title: "Lora", value: "Lora" },
+  { title: "Kanit", value: "Kanit" },
+  { title: "Fira Sans", value: "Fira Sans" },
+  { title: "Hind", value: "Hind" },
+  { title: "Quicksand", value: "Quicksand" },
+  { title: "Mulish", value: "Mulish" },
+  { title: "Barlow", value: "Barlow" },
+  { title: "Inconsolata", value: "Inconsolata" },
+  { title: "Titillium Web", value: "Titillium Web" },
+  { title: "Heebo", value: "Heebo" },
+  { title: "IBM Plex Sans", value: "IBM Plex Sans" },
+  { title: "DM Sans", value: "DM Sans" },
+  { title: "Nanum Gothic", value: "Nanum Gothic" },
+  { title: "Karla", value: "Karla" },
+  { title: "Arimo", value: "Arimo" },
+  { title: "Cabin", value: "Cabin" },
+  { title: "Oxygen", value: "Oxygen" },
+  { title: "Overpass", value: "Overpass" },
+  { title: "Assistant", value: "Assistant" },
+  { title: "Tajawal", value: "Tajawal" },
+  { title: "Play", value: "Play" },
+  { title: "Exo", value: "Exo" },
+  { title: "Cinzel", value: "Cinzel" },
+  { title: "Faustina", value: "Faustina" },
+  { title: "Philosopher", value: "Philosopher" },
+  { title: "Gelasio", value: "Gelasio" },
+  { title: "Sofia Sans Condensed", value: "Sofia Sans Condensed" },
+  { title: "Noto Sans Devanagari", value: "Noto Sans Devanagari" },
+  { title: "Actor", value: "Actor" },
+  { title: "Epilogue", value: "Epilogue" },
+  { title: "Glegoo", value: "Glegoo" },
+  { title: "Overlock", value: "Overlock" },
+  { title: "Lustria", value: "Lustria" },
+  { title: "Ovo", value: "Ovo" },
+  { title: "Suranna", value: "Suranna" },
+  { title: "Bebas Neue", value: "Bebas Neue" },
+  { title: "Manrope", value: "Manrope" }
+], FontSelector = ({
+  label: o,
+  value: n,
+  onChange: r
+}) => /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+  /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: startCase(o) }),
+  /* @__PURE__ */ jsx(
+    "select",
+    {
+      className: "mt-1 w-full cursor-pointer 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",
+      value: n,
+      onChange: (a) => r(a.target.value),
+      children: FONTS.map((a) => /* @__PURE__ */ jsx("option", { value: a.value, children: a.title }, a.value))
+    }
+  )
+] }), ColorPickerInput = ({ value: o, onChange: n }) => {
+  const r = debounce((a) => n(a), 200);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "relative flex h-6 w-6 cursor-pointer rounded-lg border border-border",
+      style: { backgroundColor: o },
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          value: o.startsWith("#") ? o : "#000000",
+          onChange: (a) => {
+            const l = a.target.value;
+            /^#[0-9A-F]{6}$/i.test(l) && r(l);
+          },
+          className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg border-0 opacity-0"
+        }
+      )
+    }
+  );
+}, BorderRadiusInput = ({ value: o, onChange: n, disabled: r }) => {
+  const a = debounce((l) => n(l), 200);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "range",
+      min: "0",
+      step: "1",
+      max: "30",
+      disabled: r,
+      defaultValue: o.replace("px", ""),
+      onChange: (l) => a(l.target.value),
+      className: "flex-1 cursor-pointer"
+    }
+  );
+}, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: c } = usePermissions(), [d, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), m = (w) => {
+    a(w);
+  }, h = () => {
+    const w = l.find((S) => Object.keys(S)[0] === r);
+    if (w) {
+      const S = Object.values(w)[0];
+      S && typeof S == "object" && "fontFamily" in S && "borderRadius" in S && "colors" in S ? p(S) : console.error("Invalid preset structure:", S);
+    } else
+      console.error("Preset not found:", r);
+  }, f = useDebouncedCallback(
+    (w, S) => {
+      p(() => ({
+        ...d,
+        fontFamily: {
+          ...d.fontFamily,
+          [w.replace(/font-/g, "")]: S
+        }
+      }));
+    },
+    [d],
+    200
+  ), x = useDebouncedCallback(
+    (w) => {
+      p(() => ({
+        ...d,
+        borderRadius: `${w}px`
+      }));
+    },
+    [d],
+    200
+  ), b = useDebouncedCallback(
+    (w, S) => {
+      p(() => {
+        const A = get(d, `colors.${w}`);
+        return n ? set(A, 1, S) : set(A, 0, S), {
+          ...d,
+          colors: {
+            ...d.colors,
+            [w]: A
+          }
+        };
+      });
+    },
+    [d],
+    200
+  ), k = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([S]) => {
+    const A = get(d, `colors.${S}.${n ? 1 : 0}`);
+    return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        ColorPickerInput,
+        {
+          value: A,
+          onChange: (E) => b(S, E)
+        }
+      ),
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: S.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!S.toLowerCase().includes("foreground") && !S.toLowerCase().includes("border") && !S.toLowerCase().includes("input") && !S.toLowerCase().includes("ring") && !S.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, S);
+  }) });
+  return c("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
+      l.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 py-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Presets") }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: r,
+              onChange: (w) => m(w.target.value),
+              className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
+                Array.isArray(l) && l.map((w) => /* @__PURE__ */ jsx("option", { value: Object.keys(w)[0], children: capitalize(Object.keys(w)[0]) }, Object.keys(w)[0]))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "w-full text-sm",
+            disabled: r === "",
+            variant: "default",
+            onClick: h,
+            children: g("Apply")
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([w, S]) => /* @__PURE__ */ jsx(
+          FontSelector,
+          {
+            label: w,
+            value: d.fontFamily[w.replace(/font-/g, "")] || S[Object.keys(S)[0]],
+            onChange: (A) => f(w, A)
+          },
+          w
+        )) }),
+        (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Border Radius") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: x }),
+            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
+          ] })
+        ] }),
+        (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: g("Colors") }),
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: u.colors.map((w) => k(w)) }, n ? "dark" : "light")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {}),
+      /* @__PURE__ */ jsx("br", {})
+    ] }),
+    i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
+  ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
+}), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
   "Add blocks": "Add blocks",
   "Enter or paste TailwindCSS HTML snippet": "Enter or paste TailwindCSS HTML snippet",
@@ -8659,14 +8669,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(), m = useRef(null), x = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), h = useRef(null);
   useEffect(() => {
-    var h;
-    (h = m.current) == null || h.focus();
+    var x;
+    (x = m.current) == null || x.focus();
   }, []);
-  const f = (h) => {
-    const { usage: b } = h || {};
-    !l && b && g(b), x.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const f = (x) => {
+    const { usage: b } = x || {};
+    !l && b && g(b), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8686,12 +8696,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: m,
           value: i,
-          onChange: (h) => c(h.target.value),
+          onChange: (x) => c(x.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (h) => {
-            h.key === "Enter" && (h.preventDefault(), x.current && clearTimeout(x.current), g(void 0), r("content", o, i, f));
+          onKeyDown: (x) => {
+            x.key === "Enter" && (x.preventDefault(), h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f));
           }
         }
       ),
@@ -8701,7 +8711,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              x.current && clearTimeout(x.current), g(void 0), r("content", o, i, f);
+              h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -8733,8 +8743,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (h) => {
-            x.current && clearTimeout(x.current), g(void 0), r("content", o, h, f);
+          onClick: (x) => {
+            h.current && clearTimeout(h.current), g(void 0), r("content", o, x, f);
           }
         }
       )
@@ -8748,7 +8758,7 @@ const AIUserPrompt = ({ blockId: o }) => {
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const x = async () => {
+  const h = async () => {
     try {
       d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
     } catch (f) {
@@ -8778,7 +8788,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               className: "mt-1 w-full",
               rows: 10,
               onKeyDown: (f) => {
-                f.key === "Enter" && (f.preventDefault(), x());
+                f.key === "Enter" && (f.preventDefault(), h());
               }
             }
           ),
@@ -8790,7 +8800,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => x(),
+                onClick: () => h(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8819,7 +8829,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), x();
+                        a(""), h();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8976,53 +8986,53 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, x] = useState(""), f = useRef(null), h = useRef(null), b = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = useRef(null), b = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
   const k = () => {
     if (i.startsWith("@")) {
-      x("Attribute keys cannot start with '@'");
+      h("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const S = [...a, { key: i, value: d }];
-      r(S), l(a), c(""), p(""), x("");
+      const C = [...a, { key: i, value: d }];
+      r(C), l(a), c(""), p(""), h("");
     }
-  }, A = (S) => {
-    const w = a.filter((L, v) => v !== S);
-    r(w), l(w);
-  }, B = (S) => {
-    g(S), c(a[S].key), p(a[S].value);
-  }, C = () => {
+  }, w = (C) => {
+    const B = a.filter((L, v) => v !== C);
+    r(B), l(B);
+  }, S = (C) => {
+    g(C), c(a[C].key), p(a[C].value);
+  }, A = () => {
     if (i.startsWith("@")) {
-      x("Attribute keys cannot start with '@'");
+      h("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const S = [...a];
-      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), x("");
+      const C = [...a];
+      C[u] = { key: i, value: d }, r(C), l(C), g(null), c(""), p(""), h("");
     }
-  }, j = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? C() : k());
-  }, _ = useCallback((S) => {
-    const w = (y) => /[.,!?;:]/.test(y), L = (y, E, T) => {
+  }, E = (C) => {
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? A() : k());
+  }, j = useCallback((C) => {
+    const B = (y) => /[.,!?;:]/.test(y), L = (y, _, T) => {
       let I = "", R = "";
-      const P = E > 0 ? y[E - 1] : "", N = E < y.length ? y[E] : "";
-      return E > 0 && (P === "." || !w(P) && P !== " ") && (I = " "), E < y.length && !w(N) && N !== " " && (R = " "), {
+      const P = _ > 0 ? y[_ - 1] : "", N = _ < y.length ? y[_] : "";
+      return _ > 0 && (P === "." || !B(P) && P !== " ") && (I = " "), _ < y.length && !B(N) && N !== " " && (R = " "), {
         text: I + T + R,
         prefixLength: I.length,
         suffixLength: R.length
       };
-    }, v = h.current;
+    }, v = x.current;
     if (v) {
-      const y = v.selectionStart || 0, E = v.value || "", T = v.selectionEnd || y;
+      const y = v.selectionStart || 0, _ = v.value || "", T = v.selectionEnd || y;
       if (T > y) {
-        const M = `{{${S}}}`, { text: D } = L(E, y, M), O = E.slice(0, y) + D + E.slice(T);
+        const M = `{{${C}}}`, { text: D } = L(_, y, M), O = _.slice(0, y) + D + _.slice(T);
         p(O);
         return;
       }
-      const R = `{{${S}}}`, { text: P } = L(E, y, R), N = E.slice(0, y) + P + E.slice(y);
+      const R = `{{${C}}}`, { text: P } = L(_, y, R), N = _.slice(0, y) + P + _.slice(y);
       p(N);
     }
   }, []);
@@ -9030,8 +9040,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (S) => {
-          S.preventDefault(), u !== null ? C() : k();
+        onSubmit: (C) => {
+          C.preventDefault(), u !== null ? A() : k();
         },
         className: "space-y-3",
         children: [
@@ -9047,7 +9057,7 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: f,
                   value: i,
-                  onChange: (S) => c(S.target.value),
+                  onChange: (C) => c(C.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9056,7 +9066,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(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: _ })
+                !isEmpty(b) && /* @__PURE__ */ jsx(NestedPathSelector, { data: b, onSelect: j })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9066,10 +9076,10 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: h,
+                  ref: x,
                   value: d,
-                  onChange: (S) => p(S.target.value),
-                  onKeyDown: j,
+                  onChange: (C) => p(C.target.value),
+                  onKeyDown: E,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9081,16 +9091,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, w) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, B) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(w), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(w), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, w)) })
+    ] }, B)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9300,11 +9310,11 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (h) => {
-    h.preventDefault();
-  }, u = (h) => {
-    n(o === h ? null : h);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), x = [...g, ...c], f = useBuilderProp("htmlDir", "ltr");
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (x) => {
+    x.preventDefault();
+  }, u = (x) => {
+    n(o === x ? null : x);
+  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), h = [...g, ...c], f = useBuilderProp("htmlDir", "ltr");
   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",
@@ -9315,21 +9325,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: x.map((h, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: h.map((x, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => u(b),
-                    children: get(h, "icon", null)
+                    children: get(x, "icon", null)
                   },
                   b
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(h.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(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((h, b) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(h, {}) }, `sidebar-component-${b}`)) })
+              /* @__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,
@@ -9342,14 +9352,14 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(x, `${o}.isInternal`, !1) ? "" : "w-64"}`,
+                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(h, `${o}.isInternal`, !1) ? "" : "w-64"}`,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(x, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: m(x[o].label) })
+                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(h, `${o}.icon`, null) }),
+                        /* @__PURE__ */ jsx("span", { children: m(h[o].label) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(x, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(h, `${o}.component`, null), {}) }) })
                 ] })
               }
             ),
@@ -9472,6 +9482,8 @@ const RootLayout = () => {
     /* @__PURE__ */ jsx(Toaster, {})
   ] }) }) });
 };
+if (typeof window > "u")
+  throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
 export {
   AISetContext,
   AIUserPrompt,
@@ -9489,8 +9501,8 @@ export {
   ListTree as Outline,
   PERMISSIONS,
   Breakpoints$1 as ScreenSizes,
-  ThemeConfigPanel as ThemeOptions,
-  UILibrariesPanel as UILibraries,
+  ThemeConfigPanel,
+  UILibrariesPanel,
   UndoRedo,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
@@ -9520,6 +9532,7 @@ export {
   useHighlightBlockId,
   useLanguages,
   useLayoutVariant,
+  useLibraryBlocks,
   usePartailBlocksStore,
   usePartialBlocksList,
   usePasteBlocks,