@chaibuilder/sdk 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/core.js

@@ -1,23 +1,22 @@
 var V = Object.defineProperty;
 var U = (o, n, r) => n in o ? V(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var F = (o, n, r) => (U(o, typeof n != "symbol" ? n + "" : n, r), r);
+var O = (o, n, r) => (U(o, typeof n != "symbol" ? n + "" : n, r), r);
 import { j as jsxRuntimeExports } from "./jsx-runtime-Sp0orL4X.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, useState, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
-import { S as Skeleton, B as Button, L as Label, E as ScrollArea, b as Switch, ah as ContextMenu, ai as ContextMenuTrigger, aj as ContextMenuContent, ak as ContextMenuItem, M as Tooltip, N as TooltipTrigger, O as TooltipContent, C as Card, v as CardHeader, y as CardDescription, z as CardContent, T as Textarea, w as CardFooter, D as Dialog, q as DialogTrigger, a as DialogContent, ae as useToast, R as Popover, U as PopoverTrigger, V as PopoverContent, I as Input$1, Q as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, Z as DropdownMenu, _ as DropdownMenuTrigger, $ as DropdownMenuContent, a3 as DropdownMenuLabel, a4 as DropdownMenuSeparator, a6 as DropdownMenuGroup, a0 as DropdownMenuItem, a5 as DropdownMenuShortcut, A as Accordion, G as Tabs, H as TabsList, J as TabsTrigger, h as AlertDialog, j as AlertDialogContent, k as AlertDialogHeader, m as AlertDialogTitle, i as AlertDialogTrigger, n as AlertDialogDescription, l as AlertDialogFooter, p as AlertDialogCancel, o as AlertDialogAction, a1 as DropdownMenuCheckboxItem, W as HoverCard, X as HoverCardTrigger, Y as HoverCardContent, ac as Separator, P as TooltipProvider, ag as Toaster } from "./context-menu-oLipAPzI.js";
-import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, set, endsWith, isEmpty, forIn, isObject, each, first, noop, keys, startsWith, range, values, flattenDeep, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, uniq, reverse, debounce, capitalize, flatMapDeep, split, startCase as startCase$1, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, toUpper, round } from "lodash-es";
+import { S as Skeleton, B as Button, L as Label, ah as ContextMenu, ai as ContextMenuTrigger, aj as ContextMenuContent, ak as ContextMenuItem, M as Tooltip, N as TooltipTrigger, O as TooltipContent, C as Card, v as CardHeader, y as CardDescription, z as CardContent, T as Textarea, w as CardFooter, D as Dialog, q as DialogTrigger, a as DialogContent, b as Switch, ae as useToast, R as Popover, U as PopoverTrigger, V as PopoverContent, I as Input$1, Q as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, Z as DropdownMenu, _ as DropdownMenuTrigger, $ as DropdownMenuContent, E as ScrollArea, a3 as DropdownMenuLabel, a4 as DropdownMenuSeparator, a6 as DropdownMenuGroup, a0 as DropdownMenuItem, a5 as DropdownMenuShortcut, A as Accordion, G as Tabs, H as TabsList, J as TabsTrigger, h as AlertDialog, j as AlertDialogContent, k as AlertDialogHeader, m as AlertDialogTitle, i as AlertDialogTrigger, n as AlertDialogDescription, l as AlertDialogFooter, p as AlertDialogCancel, o as AlertDialogAction, a1 as DropdownMenuCheckboxItem, W as HoverCard, X as HoverCardTrigger, Y as HoverCardContent, ac as Separator, K as TabsContent, P as TooltipProvider, ag as Toaster } from "./context-menu-oLipAPzI.js";
+import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, isObject, each, set, first, noop, isEmpty as isEmpty$1, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, uniq, reverse, debounce, capitalize, flatMapDeep, split, startCase as startCase$1, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-Ief2hJUZ.js";
-import { getBlockComponent, useChaiBlocks, getChaiDataProviders, useGlobalStylingPresets, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { registerChaiBlock as Xe } from "@chaibuilder/runtime";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Ze } from "react-i18next";
+import { useTranslation as Xe } from "react-i18next";
 import { g as getDefaultExportFromCjs, p as plugin } from "./plugin-ooqqxWRQ.js";
 import { useThrottledCallback, useResizeObserver, useDebouncedCallback, useIntervalEffect } from "@react-hookz/web";
-import { isEmpty as isEmpty$1, startCase } from "lodash";
+import { isEmpty, startCase } from "lodash";
 import TreeModel from "tree-model";
+import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
+import { registerChaiBlock as Ze } from "@chaibuilder/runtime";
 import ReactQuill, { Quill } from "react-quill";
-import { a as SLOT_KEY, I as I18N_KEY, S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-Xxstm-7I.js";
 import { useFeature, FlagsProvider } from "flagged";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip } from "@floating-ui/dom";
@@ -27,12 +26,13 @@ import typography from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
 import aspectRatio from "@tailwindcss/aspect-ratio";
 import { twMerge } from "tailwind-merge";
+import { S as STYLES_KEY, R as ROOT_TEMP_KEY } from "./STRINGS-BnWT5XcX.js";
 import { Provider } from "react-wrap-balancer";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
-import { DatabaseIcon, GlobeIcon, ChevronRight, Sun, Moon, PlusIcon as PlusIcon$1, EyeOff, X, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, Settings as Settings$1, EditIcon, Layers } from "lucide-react";
+import { DatabaseIcon, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, X, Loader, SparklesIcon, SmileIcon, ShuffleIcon, ChevronDown, Edit2, Paintbrush, Layers } from "lucide-react";
 import { Tree } from "react-arborist";
 import { parse, stringify } from "himalaya";
 import RjForm from "@rjsf/core";
@@ -42,7 +42,7 @@ import Autosuggest from "react-autosuggest";
 import Fuse from "fuse.js";
 import clsx from "clsx";
 import i18n from "i18next";
-import { default as Qe } from "i18next";
+import { default as Je } from "i18next";
 import { motion } from "framer-motion";
 import "@radix-ui/react-switch";
 import "@radix-ui/react-accordion";
@@ -63,19 +63,19 @@ import "@radix-ui/react-context-menu";
 const canAcceptChildBlock = (o, n) => {
   if (!o)
     return !0;
-  const r = getBlockComponent(o);
+  const r = getRegisteredChaiBlock(o);
   return r && has(r, "canAcceptBlock") ? r.canAcceptBlock(n) : !1;
 }, canAddChildBlock = (o) => {
-  const n = getBlockComponent(o);
+  const n = getRegisteredChaiBlock(o);
   return n ? has(n, "canAcceptBlock") : !1;
 }, canBeNestedInside = (o, n) => {
-  const r = getBlockComponent(n);
+  const r = getRegisteredChaiBlock(n);
   return r && has(r, "canBeNested") ? r.canBeNested(o) : !0;
 }, canDuplicateBlock = (o) => {
-  const n = getBlockComponent(o);
+  const n = getRegisteredChaiBlock(o);
   return n && has(n, "canDuplicate") ? n.canDuplicate() : !0;
 }, canDeleteBlock = (o) => {
-  const n = getBlockComponent(o);
+  const n = getRegisteredChaiBlock(o);
   return n && has(n, "canDelete") ? n.canDelete() : !0;
 };
 var define_import_meta_env_default$2 = { VITE_OPENAI_API_KEY: "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", VITE_UNSPASH_ACCESS_KEY: "XgYBCm-XCHecRMsbfhw6oZWGkltco1U5TYMEd0LXZeA", VITE_JOTAI_DEVTOOL_ENABLED: "true", BASE_URL: "/", MODE: "production", DEV: !1, PROD: !0, SSR: !1 };
@@ -109,235 +109,235 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
   const c = (x) => o.get(x), d = (x, j) => {
     (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(j);
-    const v = o.get(x);
-    if (o.set(x, j), r.has(x) || r.set(x, v), v && hasPromiseAtomValue(v)) {
-      const C = "v" in j ? j.v instanceof Promise ? j.v : Promise.resolve(j.v) : Promise.reject(j.e);
-      cancelPromise(v.v, C);
+    const k = o.get(x);
+    if (o.set(x, j), r.has(x) || r.set(x, k), k && hasPromiseAtomValue(k)) {
+      const S = "v" in j ? j.v instanceof Promise ? j.v : Promise.resolve(j.v) : Promise.reject(j.e);
+      cancelPromise(k.v, S);
     }
-  }, u = (x, j, v) => {
-    const C = /* @__PURE__ */ new Map();
+  }, u = (x, j, k) => {
+    const S = /* @__PURE__ */ new Map();
     let _ = !1;
-    v.forEach((B, L) => {
-      !B && L === x && (B = j), B ? (C.set(L, B), j.d.get(L) !== B && (_ = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (_ || j.d.size !== C.size) && (j.d = C);
-  }, p = (x, j, v) => {
-    const C = c(x), _ = {
-      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
+    k.forEach((B, L) => {
+      !B && L === x && (B = j), B ? (S.set(L, B), j.d.get(L) !== B && (_ = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (_ || j.d.size !== S.size) && (j.d = S);
+  }, p = (x, j, k) => {
+    const S = c(x), _ = {
+      d: (S == null ? void 0 : S.d) || /* @__PURE__ */ new Map(),
       v: j
     };
-    if (v && u(x, _, v), C && isEqualAtomValue(C, _) && C.d === _.d)
-      return C;
-    if (C && hasPromiseAtomValue(C) && hasPromiseAtomValue(_) && isEqualPromiseAtomValue(C, _)) {
-      if (C.d === _.d)
-        return C;
-      _.v = C.v;
+    if (k && u(x, _, k), S && isEqualAtomValue(S, _) && S.d === _.d)
+      return S;
+    if (S && hasPromiseAtomValue(S) && hasPromiseAtomValue(_) && isEqualPromiseAtomValue(S, _)) {
+      if (S.d === _.d)
+        return S;
+      _.v = S.v;
     }
     return d(x, _), _;
-  }, m = (x, j, v, C) => {
+  }, m = (x, j, k, S) => {
     if (isPromiseLike$2(j)) {
       let _;
-      const B = new Promise((L, $) => {
+      const B = new Promise((L, M) => {
         let D = !1;
         j.then(
-          (M) => {
+          ($) => {
             if (!D) {
               D = !0;
-              const P = c(x), O = p(
+              const P = c(x), F = p(
                 x,
                 B,
-                v
+                k
               );
-              resolvePromise(B, M), L(M), (P == null ? void 0 : P.d) !== O.d && I(x, O, P == null ? void 0 : P.d);
+              resolvePromise(B, $), L($), (P == null ? void 0 : P.d) !== F.d && I(x, F, P == null ? void 0 : P.d);
             }
           },
-          (M) => {
+          ($) => {
             if (!D) {
               D = !0;
-              const P = c(x), O = p(
+              const P = c(x), F = p(
                 x,
                 B,
-                v
+                k
               );
-              rejectPromise(B, M), $(M), (P == null ? void 0 : P.d) !== O.d && I(x, O, P == null ? void 0 : P.d);
+              rejectPromise(B, $), M($), (P == null ? void 0 : P.d) !== F.d && I(x, F, P == null ? void 0 : P.d);
             }
           }
-        ), _ = (M) => {
-          D || (D = !0, M.then(
+        ), _ = ($) => {
+          D || (D = !0, $.then(
             (P) => resolvePromise(B, P),
             (P) => rejectPromise(B, P)
-          ), L(M));
+          ), L($));
         };
       });
       return B.orig = j, B.status = "pending", registerCancelPromise(B, (L) => {
-        L && _(L), C == null || C();
-      }), p(x, B, v);
+        L && _(L), S == null || S();
+      }), p(x, B, k);
     }
-    return p(x, j, v);
-  }, h = (x, j, v) => {
-    const C = c(x), _ = {
-      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
+    return p(x, j, k);
+  }, h = (x, j, k) => {
+    const S = c(x), _ = {
+      d: (S == null ? void 0 : S.d) || /* @__PURE__ */ new Map(),
       e: j
     };
-    return v && u(x, _, v), C && isEqualAtomError(C, _) && C.d === _.d ? C : (d(x, _), _);
+    return k && u(x, _, k), S && isEqualAtomError(S, _) && S.d === _.d ? S : (d(x, _), _);
   }, g = (x) => {
     const j = c(x);
-    if (j && (j.d.forEach((D, M) => {
-      M !== x && !n.has(M) && g(M);
-    }), Array.from(j.d).every(([D, M]) => {
+    if (j && (j.d.forEach((D, $) => {
+      $ !== x && !n.has($) && g($);
+    }), Array.from(j.d).every(([D, $]) => {
       const P = c(D);
-      return D === x || P === M || // TODO This is a hack, we should find a better solution.
-      P && !hasPromiseAtomValue(P) && isEqualAtomValue(P, M);
+      return D === x || P === $ || // TODO This is a hack, we should find a better solution.
+      P && !hasPromiseAtomValue(P) && isEqualAtomValue(P, $);
     })))
       return j;
-    const v = /* @__PURE__ */ new Map();
-    let C = !0;
+    const k = /* @__PURE__ */ new Map();
+    let S = !0;
     const _ = (D) => {
       if (D === x) {
         const P = c(D);
         if (P)
-          return v.set(D, P), returnAtomValue(P);
+          return k.set(D, P), returnAtomValue(P);
         if (hasInitialValue(D))
-          return v.set(D, void 0), D.init;
+          return k.set(D, void 0), D.init;
         throw new Error("no atom init");
       }
-      const M = g(D);
-      return v.set(D, M), returnAtomValue(M);
+      const $ = g(D);
+      return k.set(D, $), returnAtomValue($);
     };
     let B, L;
-    const $ = {
+    const M = {
       get signal() {
         return B || (B = new AbortController()), B.signal;
       },
       get setSelf() {
         return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(x) && console.warn("setSelf function cannot be used with read-only atom"), !L && isActuallyWritableAtom(x) && (L = (...D) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && C && console.warn("setSelf function cannot be called in sync"), !C)
-            return R(x, ...D);
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && S && console.warn("setSelf function cannot be called in sync"), !S)
+            return w(x, ...D);
         }), L;
       }
     };
     try {
-      const D = x.read(_, $);
+      const D = x.read(_, M);
       return m(
         x,
         D,
-        v,
+        k,
         () => B == null ? void 0 : B.abort()
       );
     } catch (D) {
-      return h(x, D, v);
+      return h(x, D, k);
     } finally {
-      C = !1;
+      S = !1;
     }
-  }, y = (x) => returnAtomValue(g(x)), E = (x) => {
+  }, E = (x) => returnAtomValue(g(x)), y = (x) => {
     let j = n.get(x);
-    return j || (j = w(x)), j;
-  }, b = (x, j) => !j.l.size && (!j.t.size || j.t.size === 1 && j.t.has(x)), f = (x) => {
+    return j || (j = R(x)), j;
+  }, f = (x, j) => !j.l.size && (!j.t.size || j.t.size === 1 && j.t.has(x)), b = (x) => {
     const j = n.get(x);
-    j && b(x, j) && A(x);
-  }, k = (x) => {
-    const j = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new WeakMap(), C = (B) => {
+    j && f(x, j) && A(x);
+  }, v = (x) => {
+    const j = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new WeakMap(), S = (B) => {
       const L = n.get(B);
-      L == null || L.t.forEach(($) => {
-        $ !== B && (j.set(
-          $,
-          (j.get($) || /* @__PURE__ */ new Set()).add(B)
-        ), v.set($, (v.get($) || 0) + 1), C($));
+      L == null || L.t.forEach((M) => {
+        M !== B && (j.set(
+          M,
+          (j.get(M) || /* @__PURE__ */ new Set()).add(B)
+        ), k.set(M, (k.get(M) || 0) + 1), S(M));
       });
     };
-    C(x);
+    S(x);
     const _ = (B) => {
       const L = n.get(B);
-      L == null || L.t.forEach(($) => {
+      L == null || L.t.forEach((M) => {
         var D;
-        if ($ !== B) {
-          let M = v.get($);
-          if (M && v.set($, --M), !M) {
-            let P = !!((D = j.get($)) != null && D.size);
+        if (M !== B) {
+          let $ = k.get(M);
+          if ($ && k.set(M, --$), !$) {
+            let P = !!((D = j.get(M)) != null && D.size);
             if (P) {
-              const O = c($), H = g($);
-              P = !O || !isEqualAtomValue(O, H);
+              const F = c(M), H = g(M);
+              P = !F || !isEqualAtomValue(F, H);
             }
-            P || j.forEach((O) => O.delete($));
+            P || j.forEach((F) => F.delete(M));
           }
-          _($);
+          _(M);
         }
       });
     };
     _(x);
-  }, S = (x, ...j) => {
-    let v = !0;
-    const C = (L) => returnAtomValue(g(L)), _ = (L, ...$) => {
+  }, C = (x, ...j) => {
+    let k = !0;
+    const S = (L) => returnAtomValue(g(L)), _ = (L, ...M) => {
       let D;
       if (L === x) {
         if (!hasInitialValue(L))
           throw new Error("atom not writable");
-        const M = c(L), P = m(L, $[0]);
-        (!M || !isEqualAtomValue(M, P)) && k(L);
+        const $ = c(L), P = m(L, M[0]);
+        (!$ || !isEqualAtomValue($, P)) && v(L);
       } else
-        D = S(L, ...$);
-      if (!v) {
-        const M = T();
+        D = C(L, ...M);
+      if (!k) {
+        const $ = T();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          (P) => P({ type: "async-write", flushed: M })
+          (P) => P({ type: "async-write", flushed: $ })
         );
       }
       return D;
-    }, B = x.write(C, _, ...j);
-    return v = !1, B;
-  }, R = (x, ...j) => {
-    const v = S(x, ...j), C = T();
+    }, B = x.write(S, _, ...j);
+    return k = !1, B;
+  }, w = (x, ...j) => {
+    const k = C(x, ...j), S = T();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (_) => _({ type: "write", flushed: C })
-    ), v;
-  }, w = (x, j) => {
-    const v = {
+      (_) => _({ type: "write", flushed: S })
+    ), k;
+  }, R = (x, j) => {
+    const k = {
       t: new Set(j && [j]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(x, v), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(x), g(x).d.forEach((C, _) => {
+    if (n.set(x, k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(x), g(x).d.forEach((S, _) => {
       const B = n.get(_);
-      B ? B.t.add(x) : _ !== x && w(_, x);
+      B ? B.t.add(x) : _ !== x && R(_, x);
     }), g(x), isActuallyWritableAtom(x) && x.onMount) {
-      const C = x.onMount((..._) => R(x, ..._));
-      C && (v.u = C);
+      const S = x.onMount((..._) => w(x, ..._));
+      S && (k.u = S);
     }
-    return v;
+    return k;
   }, A = (x) => {
     var j;
-    const v = (j = n.get(x)) == null ? void 0 : j.u;
-    v && v(), n.delete(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(x);
-    const C = c(x);
-    C ? (hasPromiseAtomValue(C) && cancelPromise(C.v), C.d.forEach((_, B) => {
+    const k = (j = n.get(x)) == null ? void 0 : j.u;
+    k && k(), n.delete(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(x);
+    const S = c(x);
+    S ? (hasPromiseAtomValue(S) && cancelPromise(S.v), S.d.forEach((_, B) => {
       if (B !== x) {
         const L = n.get(B);
-        L && (L.t.delete(x), b(B, L) && A(B));
+        L && (L.t.delete(x), f(B, L) && A(B));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", x);
-  }, I = (x, j, v) => {
-    const C = new Set(j.d.keys());
-    v == null || v.forEach((_, B) => {
-      if (C.has(B)) {
-        C.delete(B);
+  }, I = (x, j, k) => {
+    const S = new Set(j.d.keys());
+    k == null || k.forEach((_, B) => {
+      if (S.has(B)) {
+        S.delete(B);
         return;
       }
       const L = n.get(B);
-      L && (L.t.delete(x), b(B, L) && A(B));
-    }), C.forEach((_) => {
+      L && (L.t.delete(x), f(B, L) && A(B));
+    }), S.forEach((_) => {
       const B = n.get(_);
-      B ? B.t.add(x) : n.has(x) && w(_, x);
+      B ? B.t.add(x) : n.has(x) && R(_, x);
     });
   }, T = () => {
     let x;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (x = /* @__PURE__ */ new Set()); r.size; ) {
       const j = Array.from(r);
-      r.clear(), j.forEach(([v, C]) => {
-        const _ = c(v);
+      r.clear(), j.forEach(([k, S]) => {
+        const _ = c(k);
         if (_) {
-          _.d !== (C == null ? void 0 : C.d) && I(v, _, C == null ? void 0 : C.d);
-          const B = n.get(v);
+          _.d !== (S == null ? void 0 : S.d) && I(k, _, S == null ? void 0 : S.d);
+          const B = n.get(k);
           B && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (C && !hasPromiseAtomValue(C) && (isEqualAtomValue(C, _) || isEqualAtomError(C, _))) && (B.l.forEach((L) => L()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && x.add(v));
+          (S && !hasPromiseAtomValue(S) && (isEqualAtomValue(S, _) || isEqualAtomError(S, _))) && (B.l.forEach((L) => L()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && x.add(k));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
@@ -345,16 +345,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((j) => j("state")), x;
   }, N = (x, j) => {
-    const v = E(x), C = T(), _ = v.l;
+    const k = y(x), S = T(), _ = k.l;
     return _.add(j), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((B) => B("sub")), l.forEach(
-      (B) => B({ type: "sub", flushed: C })
+      (B) => B({ type: "sub", flushed: S })
     )), () => {
-      _.delete(j), f(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((B) => B("unsub")), l.forEach((B) => B({ type: "unsub" })));
+      _.delete(j), b(x), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((B) => B("unsub")), l.forEach((B) => B({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
-    get: y,
-    set: R,
+    get: E,
+    set: w,
     sub: N,
     // store dev methods (these are tentative and subject to change without notice)
     dev_subscribe_store: (x, j) => j !== 2 ? (console.warn(
@@ -368,16 +368,16 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     dev_get_atom_state: (x) => o.get(x),
     dev_get_mounted: (x) => n.get(x),
     dev_restore_atoms: (x) => {
-      for (const [v, C] of x)
-        hasInitialValue(v) && (m(v, C), k(v));
+      for (const [k, S] of x)
+        hasInitialValue(k) && (m(k, S), v(k));
       const j = T();
       l.forEach(
-        (v) => v({ type: "restore", flushed: j })
+        (k) => k({ type: "restore", flushed: j })
       );
     }
   } : {
-    get: y,
-    set: R,
+    get: E,
+    set: w,
     sub: N
   };
 };
@@ -396,36 +396,36 @@ function splitAtom(o, n) {
         if (u)
           return u;
         const p = d && r.get(d), m = [], h = [];
-        return c.forEach((g, y) => {
-          const E = n ? n(g) : y;
-          h[y] = E;
-          const b = p && p.atomList[p.keyList.indexOf(E)];
-          if (b) {
-            m[y] = b;
+        return c.forEach((g, E) => {
+          const y = n ? n(g) : E;
+          h[E] = y;
+          const f = p && p.atomList[p.keyList.indexOf(y)];
+          if (f) {
+            m[E] = f;
             return;
           }
-          const f = (S) => {
-            const R = S(l), w = S(o), I = a(w, R == null ? void 0 : R.arr).keyList.indexOf(E);
-            if (I < 0 || I >= w.length) {
-              const T = c[a(c).keyList.indexOf(E)];
+          const b = (C) => {
+            const w = C(l), R = C(o), I = a(R, w == null ? void 0 : w.arr).keyList.indexOf(y);
+            if (I < 0 || I >= R.length) {
+              const T = c[a(c).keyList.indexOf(y)];
               if (T)
                 return T;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return w[I];
-          }, k = (S, R, w) => {
-            const A = S(l), I = S(o), N = a(I, A == null ? void 0 : A.arr).keyList.indexOf(E);
+            return R[I];
+          }, v = (C, w, R) => {
+            const A = C(l), I = C(o), N = a(I, A == null ? void 0 : A.arr).keyList.indexOf(y);
             if (N < 0 || N >= I.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const x = isFunction(w) ? w(I[N]) : w;
-            R(o, [
+            const x = isFunction(R) ? R(I[N]) : R;
+            w(o, [
               ...I.slice(0, N),
               x,
               ...I.slice(N + 1)
             ]);
           };
-          m[y] = isWritable(o) ? atom(f, k) : atom(f);
-        }), p && p.keyList.length === h.length && p.keyList.every((g, y) => g === h[y]) ? u = p : u = { arr: c, atomList: m, keyList: h }, r.set(c, u), u;
+          m[E] = isWritable(o) ? atom(b, v) : atom(b);
+        }), p && p.keyList.length === h.length && p.keyList.every((g, E) => g === h[E]) ? u = p : u = { arr: c, atomList: m, keyList: h }, r.set(c, u), u;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
         return a(u, d == null ? void 0 : d.arr);
@@ -734,111 +734,6 @@ const useSelectedBlocksDisplayChild = () => ({
     [n]
   );
   return [o, n, r];
-}, titleWithLang = (o, n, r) => endsWith(o, `(${n})`) || isEmpty(n) || !r ? o : `${o} (${n})`, getBlockJSONFromUISchemas = (o) => {
-  switch (o.type) {
-    case "singular":
-      return o.uiSchema;
-    case "model":
-      const { properties: n } = o, r = {};
-      return Object.keys(n).forEach((i) => {
-        const c = n[i];
-        if (includes(["slot", "styles"], c.type))
-          return;
-        const d = i;
-        r[d] = getBlockJSONFromUISchemas(c);
-      }), r;
-    case "list":
-      const { itemProperties: a } = o, l = {
-        items: {}
-      };
-      return Object.keys(a).forEach((i) => {
-        const c = a[i];
-        if (includes(["slot", "styles"], c.type))
-          return;
-        const d = i;
-        l.items[d] = getBlockJSONFromUISchemas(c);
-      }), l;
-    default:
-      return {};
-  }
-}, getBlockJSONFromSchemas = (o, n, r) => {
-  switch (o.type) {
-    case "singular": {
-      const p = o.schema;
-      return p.title && (p.title = titleWithLang(n(p.title), r, get(o, "i18n"))), p.oneOf && Array.isArray(p.oneOf) && (p.oneOf = p.oneOf.map((m) => (m.title && (m.title = n(m.title)), m))), p;
-    }
-    case "model":
-      const { properties: a, title: l } = o, i = {
-        title: titleWithLang(n(l), r, get(o, "i18n")),
-        type: "object",
-        properties: {}
-      };
-      return Object.keys(a).forEach((p) => {
-        const m = a[p];
-        if (includes(["slot", "styles"], m.type))
-          return;
-        const h = p;
-        i.properties[h] = getBlockJSONFromSchemas(m, n, r);
-      }), i;
-    case "list":
-      const { itemProperties: c, title: d } = o, u = {
-        title: titleWithLang(n(d), r, get(o, "i18n")),
-        type: "array",
-        items: {
-          type: "object",
-          properties: {}
-        }
-      };
-      return Object.keys(c).forEach((p) => {
-        const m = c[p];
-        if (includes(["slot", "styles"], m.type))
-          return;
-        const h = p;
-        u.items.properties[h] = getBlockJSONFromSchemas(m, n, r), set(
-          u.items,
-          "title",
-          titleWithLang(get(m, "itemTitle", `${n(d)} item`), r, get(m, "i18n"))
-        );
-      }), u;
-    default:
-      return {};
-  }
-}, getBlockDefaultProps = (o) => {
-  if (!o)
-    return {};
-  const n = {};
-  return Object.keys(o).forEach((r) => {
-    n[r] = getBlockDefaultProp(o[r]);
-  }), n;
-}, getListDefaults = (o) => {
-  if (isEmpty(o.default))
-    return [];
-  const { itemProperties: n } = o;
-  return map(o.default, (r) => {
-    const a = { ...r };
-    return forIn(r, (l, i) => {
-      has(n, i) && get(n[i], "i18n", !1) && (a[i] = I18N_KEY);
-    }), a;
-  });
-}, getBlockDefaultProp = (o) => {
-  switch (o.type) {
-    case "styles":
-      return o.default;
-    case "slot":
-      return `${SLOT_KEY}${generateUUID()}`;
-    case "singular":
-      const { schema: n } = o;
-      return get(n, "default", "");
-    case "model":
-      return getBlockDefaultProps(o.properties);
-    case "list":
-      return getListDefaults(o);
-    default:
-      return "";
-  }
-}, convertDotNotationToObject = (o, n) => {
-  const r = {};
-  return set(r, o, n), r;
 };
 var undomanager = { exports: {} };
 (function(o) {
@@ -1167,7 +1062,7 @@ const useBuilderProp = (o, n = void 0) => {
 }, chaiThemeValuesAtom = atom$1({}), useTheme = () => {
   const o = useThemeOptions(), n = useMemo(() => getDefaultThemeValues(o), [o]), r = useBuilderProp("theme", {}), [a, l] = useAtom$1(chaiThemeValuesAtom);
   return [
-    { ...n, ...!isEmpty$1(r) && r, ...!isEmpty$1(a) && a },
+    { ...n, ...!isEmpty(r) && r, ...!isEmpty(a) && a },
     l
   ];
 }, useThemeOptions = () => {
@@ -1212,7 +1107,7 @@ const useUndoManager = () => {
   };
 }, removeNestedBlocks = (o, n) => {
   const r = [], a = filter(o, (l) => includes(n, l._id) || includes(n, l._parent) ? (r.push(l._id), !1) : !0);
-  return isEmpty(r) ? a : removeNestedBlocks(a, r);
+  return isEmpty$1(r) ? a : removeNestedBlocks(a, r);
 }, useRemoveBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useSelectedBlockIds(), { setNewBlocks: a } = useBlocksStoreUndoableActions();
   return useCallback(
@@ -1312,65 +1207,65 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (E, b, f) => {
-      const k = map(E, (R) => {
-        const A = n.find((N) => N._id === R)._parent || null, T = n.filter((N) => A ? N._parent === A : !N._parent).map((N) => N._id).indexOf(R);
-        return { _id: R, oldParent: A, oldPosition: T };
-      }), S = k.find(({ _id: R }) => R === E[0]);
-      S && S.oldParent === b && S.oldPosition === f || (i(E, b, f), o({
-        undo: () => each(k, ({ _id: R, oldParent: w, oldPosition: A }) => {
-          i([R], w, A);
+    moveBlocks: (y, f, b) => {
+      const v = map(y, (w) => {
+        const A = n.find((N) => N._id === w)._parent || null, T = n.filter((N) => A ? N._parent === A : !N._parent).map((N) => N._id).indexOf(w);
+        return { _id: w, oldParent: A, oldPosition: T };
+      }), C = v.find(({ _id: w }) => w === y[0]);
+      C && C.oldParent === f && C.oldPosition === b || (i(y, f, b), o({
+        undo: () => each(v, ({ _id: w, oldParent: R, oldPosition: A }) => {
+          i([w], R, A);
         }),
-        redo: () => i(E, b, f)
+        redo: () => i(y, f, b)
       }));
     },
-    addBlocks: (E, b, f) => {
-      a(E, b, f), o({
-        undo: () => l(map(E, "_id")),
-        redo: () => a(E, b, f)
+    addBlocks: (y, f, b) => {
+      a(y, f, b), o({
+        undo: () => l(map(y, "_id")),
+        redo: () => a(y, f, b)
       });
     },
-    removeBlocks: (E) => {
-      var S;
-      const b = (S = first(E)) == null ? void 0 : S._parent, k = n.filter((R) => b ? R._parent === b : !R._parent).indexOf(first(E));
-      l(map(E, "_id")), o({
-        undo: () => a(E, b, k),
-        redo: () => l(map(E, "_id"))
+    removeBlocks: (y) => {
+      var C;
+      const f = (C = first(y)) == null ? void 0 : C._parent, v = n.filter((w) => f ? w._parent === f : !w._parent).indexOf(first(y));
+      l(map(y, "_id")), o({
+        undo: () => a(y, f, v),
+        redo: () => l(map(y, "_id"))
       });
     },
-    updateBlocks: (E, b, f) => {
-      let k = [];
-      if (f)
-        k = map(E, (S) => ({ _id: S, ...f }));
+    updateBlocks: (y, f, b) => {
+      let v = [];
+      if (b)
+        v = map(y, (C) => ({ _id: C, ...b }));
       else {
-        const S = keys(b);
-        k = map(E, (R) => {
-          const w = n.find((I) => I._id === R), A = { _id: R };
-          return each(S, (I) => A[I] = w[I]), A;
+        const C = keys(f);
+        v = map(y, (w) => {
+          const R = n.find((I) => I._id === w), A = { _id: w };
+          return each(C, (I) => A[I] = R[I]), A;
         });
       }
-      c(map(E, (S) => ({ _id: S, ...b }))), o({
-        undo: () => c(k),
-        redo: () => c(map(E, (S) => ({ _id: S, ...b })))
+      c(map(y, (C) => ({ _id: C, ...f }))), o({
+        undo: () => c(v),
+        redo: () => c(map(y, (C) => ({ _id: C, ...f })))
       });
     },
-    updateBlocksRuntime: (E, b) => {
-      c(map(E, (f) => ({ _id: f, ...b })));
+    updateBlocksRuntime: (y, f) => {
+      c(map(y, (b) => ({ _id: b, ...f })));
     },
-    setNewBlocks: (E) => {
-      r(E), o({
+    setNewBlocks: (y) => {
+      r(y), o({
         undo: () => r(n),
-        redo: () => r(E)
+        redo: () => r(y)
       });
     },
-    updateMultipleBlocksProps: (E) => {
-      let b = [];
-      b = map(E, (f) => {
-        const k = keys(f), S = n.find((w) => w._id === f._id), R = {};
-        return each(k, (w) => R[w] = S[w]), R;
-      }), c(E), o({
-        undo: () => c(b),
-        redo: () => c(E)
+    updateMultipleBlocksProps: (y) => {
+      let f = [];
+      f = map(y, (b) => {
+        const v = keys(b), C = n.find((R) => R._id === b._id), w = {};
+        return each(v, (R) => w[R] = C[R]), w;
+      }), c(y), o({
+        undo: () => c(f),
+        redo: () => c(y)
       });
     }
   };
@@ -1378,18 +1273,18 @@ const useBlocksStoreManager = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var g;
-      for (let y = 0; y < i.length; y++) {
-        const { _id: E } = i[y];
-        i[y]._id = generateUUID();
-        const b = filter(i, { _parent: E });
-        for (let f = 0; f < b.length; f++)
-          b[f]._parent = i[y]._id;
+      for (let E = 0; E < i.length; E++) {
+        const { _id: y } = i[E];
+        i[E]._id = generateUUID();
+        const f = filter(i, { _parent: y });
+        for (let b = 0; b < f.length; b++)
+          f[b]._parent = i[E]._id;
       }
       const u = first(i);
       let p, m;
       return c && (p = find(o, { _id: c }), i[0]._parent = c, m = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (i[0]._parent = p._parent, m = p._parent), r(i, m, d), n([(g = first(i)) == null ? void 0 : g._id]), first(i);
     },
-    [o, n]
+    [r, o, n]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
@@ -1397,31 +1292,17 @@ const useBlocksStoreManager = () => {
         const f = i.blocks;
         return a(f, c, d);
       }
-      const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
-      forIn(p, (f, k) => {
-        if (startsWith(f, SLOT_KEY)) {
-          const S = f.replace(SLOT_KEY, "");
-          m.push({
-            _id: S,
-            _type: "Slot",
-            _parent: u,
-            _name: i.props[k].name,
-            _styles: i.props[k].styles,
-            _emptyStyles: i.props[k].emptyStyles
-          });
-        }
-      });
-      const h = {
+      const u = generateUUID(), p = getDefaultBlockProps(i.type);
+      console.log("props", i);
+      const m = {
         _type: i.type,
         _id: u,
         ...p
       };
-      let g, y;
-      c && (g = find(o, { _id: c }), h._parent = c, y = c), !canAcceptChildBlock(g == null ? void 0 : g._type, h._type) && g && (h._parent = g._parent, y = g._parent);
-      const b = [h, ...m];
-      return r(b, y, d), n([h._id]), h;
+      let h, g;
+      return c && (h = find(o, { _id: c }), m._parent = c, g = c), !canAcceptChildBlock(h == null ? void 0 : h._type, m._type) && h && (m._parent = h._parent, g = h._parent), r([m], g, d), n([m._id]), m;
     },
-    [a, o, n]
+    [r, a, o, n]
   ), addPredefinedBlock: a };
 }, STANDARD = [
   0,
@@ -2478,7 +2359,7 @@ const useBlocksStoreManager = () => {
   return { match: r, getClasses: a };
 };
 function getMqForCls(o) {
-  if (isEmpty(o.trim()))
+  if (isEmpty$1(o.trim()))
     return "";
   const n = o.match(/sm:|md:|lg:|xl:|2xl:/g);
   return get(n, 0, "xs").replace(":", "");
@@ -2492,7 +2373,7 @@ function getPureClsName(o) {
 }
 const memoizedProps = {};
 function getPropertyForClass(o) {
-  if (isEmpty(o))
+  if (isEmpty$1(o))
     return "";
   if (memoizedProps[o])
     return memoizedProps[o];
@@ -2507,7 +2388,7 @@ function getPropertyForClass(o) {
   return n;
 }
 function constructClassObject(o) {
-  return isEmpty(o) ? null : {
+  return isEmpty$1(o) ? null : {
     dark: startsWith(o, "dark:"),
     mq: getMqForCls(o),
     mod: getModForCls(o),
@@ -2569,7 +2450,7 @@ function getNewClasses(o = "", n = "", r = []) {
       const g = find(l, pick(m, ["property"]));
       h && (l = filter(
         l,
-        (y) => y.fullCls !== (g == null ? void 0 : g.fullCls)
+        (E) => E.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
         ...m,
         fullCls: m.cls,
@@ -2700,7 +2581,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     pasteBlocks: useCallback(
       (d) => {
         const u = Array.isArray(d) ? d[0] : d;
-        isEmpty(o) ? l(n, d) : a(o, u), r([]);
+        isEmpty$1(o) ? l(n, d) : a(o, u), r([]);
       },
       [n, o, a, l, r]
     )
@@ -2723,10 +2604,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     const d = o(c), u = a;
     let { classes: p, baseClasses: m } = getSplitClasses(get(d, l.prop, "styles:,"));
     return each(u, (h) => {
-      const g = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), y = new RegExp(`(^| )${g}($| )`, "g");
-      p = p.replace(y, " ").replace(/  +/g, " ").trim();
-      const E = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], E) && u.push(h.split(":").pop().trim());
+      const g = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${g}($| )`, "g");
+      p = p.replace(E, " ").replace(/  +/g, " ").trim();
+      const y = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], y) && u.push(h.split(":").pop().trim());
     }), each(u, (h) => {
       const g = new RegExp(`(^| )${h.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
       m = m.replace(g, " ").replace(/  +/g, " ").trim();
@@ -2795,12 +2676,12 @@ const useLanguages = () => {
     setSelectedLang: l
   };
 }, updatePropsForLanguage = memoize((o, n, r) => {
-  const a = getBlockComponent(get(r, "_type"));
+  const a = getRegisteredChaiBlock(get(r, "_type"));
   if (!a)
     return o;
   const l = { ...o };
   return forEach(keys(o), (i) => {
-    if (get(a, ["props", i, "i18n"]) && !isEmpty(n)) {
+    if (get(a, ["props", i, "i18n"]) && !isEmpty$1(n)) {
       const c = `${i}-${n}`;
       set(l, c, o[i]), unset(l, i);
     }
@@ -3169,45 +3050,45 @@ const getBlockWithChildren = (o, n) => {
   return r = flattenDeep([...r, ...getChildBlocks(n, o, r)]), r;
 }, pickOnlyAIProps = (o, n) => compact(
   o.map((r) => {
-    const a = ["_id", "_type", "_parent"], l = pick(r, a), i = getBlockComponent(r._type), c = {};
-    for (const d in r)
-      a.includes(d) || get(i, `props.${d}.ai`, !1) && (c[d] = get(r, `${d}-${n}`, r[d]));
-    return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
+    const a = ["_id", "_type", "_parent"], l = pick(r, a), i = getRegisteredChaiBlock(r._type), c = {}, d = get(i, "aiProps", []);
+    for (const u in r)
+      a.includes(u) || d.includes(u) && (c[u] = get(r, `${u}-${n}`, r[u]));
+    return isEmpty$1(c) ? !1 : (has(l, "_parent") && isEmpty$1(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: u, fallbackLang: p } = useLanguages(), m = u.length ? u : p, h = (g, y) => {
-    const E = cloneDeep(y.find((b) => b._id === g));
-    for (const b in E) {
-      const f = E[b];
-      typeof f == "string" && startsWith(f, STYLES_KEY) ? E[b] = compact(flattenDeep(f.replace(STYLES_KEY, "").split(","))).join(" ") : b !== "_id" && delete E[b];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: u, fallbackLang: p } = useLanguages(), m = u.length ? u : p, h = (g, E) => {
+    const y = cloneDeep(E.find((f) => f._id === g));
+    for (const f in y) {
+      const b = y[f];
+      typeof b == "string" && startsWith(b, STYLES_KEY) ? y[f] = compact(flattenDeep(b.replace(STYLES_KEY, "").split(","))).join(" ") : f !== "_id" && delete y[f];
     }
-    return E;
+    return y;
   };
   return {
     askAi: useCallback(
-      async (g, y, E, b) => {
+      async (g, E, y, f) => {
         if (l) {
           n(!0), a(null);
           try {
-            const f = u === p ? "" : u, k = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(y, d)), u) : [h(y, d)], S = await l(g, addLangToPrompt(E, m, g), k, f), { blocks: R, error: w } = S;
-            if (w) {
-              a(w);
+            const b = u === p ? "" : u, v = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(E, d)), u) : [h(E, d)], C = await l(g, addLangToPrompt(y, m, g), v, b), { blocks: w, error: R } = C;
+            if (R) {
+              a(R);
               return;
             }
             if (g === "styles") {
-              const A = R.map((I) => {
+              const A = w.map((I) => {
                 for (const T in I)
                   T !== "_id" && (I[T] = `${STYLES_KEY},${I[T]}`);
                 return I;
               });
               c(A);
             } else
-              i(R);
-            b && b(S);
-          } catch (f) {
-            a(f);
+              i(w);
+            f && f(C);
+          } catch (b) {
+            a(b);
           } finally {
-            n(!1), b && b();
+            n(!1), f && f();
           }
         }
       },
@@ -3334,7 +3215,7 @@ class Content extends Component {
     return Children.only(this.props.children);
   }
 }
-F(Content, "propTypes", {
+O(Content, "propTypes", {
   children: PropTypes.element.isRequired,
   contentDidMount: PropTypes.func.isRequired,
   contentDidUpdate: PropTypes.func.isRequired
@@ -3342,17 +3223,17 @@ F(Content, "propTypes", {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    F(this, "setRef", (r) => {
+    O(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    F(this, "handleLoad", () => {
+    O(this, "handleLoad", () => {
       clearInterval(this.loadCheck), this.state.iframeLoaded || this.setState({ iframeLoaded: !0 });
     });
     // In certain situations on a cold cache DOMContentLoaded never gets called
     // fallback to an interval to check if that's the case
-    F(this, "loadCheck", () => setInterval(() => {
+    O(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -3393,7 +3274,7 @@ class Frame extends Component {
 // also inject into the body and can mess up React. For this reason
 // initialContent is expected to have a div inside of the body
 // element that we render react into.
-F(Frame, "propTypes", {
+O(Frame, "propTypes", {
   style: PropTypes.object,
   // eslint-disable-line
   head: PropTypes.node,
@@ -3403,7 +3284,7 @@ F(Frame, "propTypes", {
   contentDidMount: PropTypes.func,
   contentDidUpdate: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-}), F(Frame, "defaultProps", {
+}), O(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3490,26 +3371,26 @@ const useDnd = () => {
       g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
     onDrop: (g) => {
-      var w;
-      const y = dropTarget, b = getOrientation(y) === "vertical" ? g.clientY + ((w = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : w.scrollY) : g.clientX;
-      dropIndex = calculateDropIndex(b, possiblePositions);
-      const f = d, k = y.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((f == null ? void 0 : f._id) === k || !S) {
+      var R;
+      const E = dropTarget, f = getOrientation(E) === "vertical" ? g.clientY + ((R = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : R.scrollY) : g.clientX;
+      dropIndex = calculateDropIndex(f, possiblePositions);
+      const b = d, v = E.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((b == null ? void 0 : b._id) === v || !C) {
         h();
         return;
       }
-      if (!has(f, "_id")) {
-        a(f, k === "canvas" ? null : k, dropIndex), setTimeout(h, 300);
+      if (!has(b, "_id")) {
+        a(b, v === "canvas" ? null : v, dropIndex), setTimeout(h, 300);
         return;
       }
-      let R = y.getAttribute("data-block-id");
-      R === null && (R = g.target.parentElement.getAttribute("data-block-id")), c([f._id], R === "canvas" ? null : R, dropIndex), h(), setTimeout(removePlaceholder, 300);
+      let w = E.getAttribute("data-block-id");
+      w === null && (w = g.target.parentElement.getAttribute("data-block-id")), c([b._id], w === "canvas" ? null : w, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (g) => {
-      const y = g, E = y.target;
-      dropTarget = E;
-      const b = E.getAttribute("data-block-id"), f = E.getAttribute("data-dnd-dragged") !== "yes";
-      p(b), y.stopPropagation(), y.preventDefault(), possiblePositions = [], f && calculatePossiblePositions(E), r(!0), l(""), i([]);
+      const E = g, y = E.target;
+      dropTarget = y;
+      const f = y.getAttribute("data-block-id"), b = y.getAttribute("data-dnd-dragged") !== "yes";
+      p(f), E.stopPropagation(), E.preventDefault(), possiblePositions = [], b && calculatePossiblePositions(y), r(!0), l(""), i([]);
     },
     onDragLeave: (g) => {
       g.target.getAttribute("data-block-id") === "canvas" && (p(null), r(!1), removePlaceholder(), possiblePositions = []);
@@ -3588,14 +3469,14 @@ const useHandleCanvasDblClick = () => {
   const { document: n } = useFrame(), [r] = useSelectedBlockIds(), [a, l] = useSelectedStylingBlocks(), { clearHighlight: i } = useBlockHighlight();
   useEffect(() => i, [i]), useEffect(() => {
     setTimeout(() => {
-      if (!isEmpty(a))
+      if (!isEmpty$1(a))
         return;
       const h = getElementByDataBlockId(n, first(r));
       if (h) {
         const g = h.getAttribute("data-style-prop");
         if (g) {
-          const y = h.getAttribute("data-style-id"), E = h.getAttribute("data-block-parent");
-          l([{ id: y, prop: g, blockId: E }]);
+          const E = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
+          l([{ id: E, prop: g, blockId: y }]);
         }
       }
     }, 100);
@@ -3647,7 +3528,7 @@ const useHandleCanvasDblClick = () => {
 };
 class PubSub {
   constructor() {
-    F(this, "subscribers", /* @__PURE__ */ new Map());
+    O(this, "subscribers", /* @__PURE__ */ new Map());
   }
   subscribe(n, r) {
     return this.subscribers.has(n) || this.subscribers.set(n, /* @__PURE__ */ new Set()), this.subscribers.get(n).add(r), () => {
@@ -3687,7 +3568,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: n }) => {
     }
   });
   useResizeObserver(o, () => m(), o !== null);
-  const h = get(n, "_parent", null), g = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const h = get(n, "_parent", null), g = isEmpty$1(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3695,13 +3576,13 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: n }) => {
       tabIndex: 0,
       ref: p.setFloating,
       style: u,
-      onClick: (y) => {
-        y.stopPropagation(), y.preventDefault();
+      onClick: (E) => {
+        E.stopPropagation(), E.preventDefault();
       },
-      onMouseEnter: (y) => {
-        y.stopPropagation(), i(null);
+      onMouseEnter: (E) => {
+        E.stopPropagation(), i(null);
       },
-      onKeyDown: (y) => y.stopPropagation(),
+      onKeyDown: (E) => E.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         h && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3787,9 +3668,9 @@ const getChaiThemeVariables = (o) => `:root {
     `)}
   }
   .dark {
-    ${o.colors && Object.entries(o.colors).map(([n, r]) => `--${n}: ${r[1]};`).join(`
+    ${o.colors && Object.entries(o.colors).map(([n, r]) => `--${n}: ${hexToHSL(r[1])};`).join(`
     `)}
-  }`, getThemeFonts = (o) => isEmpty(o.fontFamily) ? "" : uniq(Object.entries(o.fontFamily).map(([, r]) => r)).map((r) => `<link rel="stylesheet" href="${`https://fonts.googleapis.com/css2?family=${r.replace(/\s+/g, "+")}&display=swap`}">`).join(`
+  }`, getThemeFonts = (o) => isEmpty$1(o.fontFamily) ? "" : uniq(Object.entries(o.fontFamily).map(([, r]) => r)).map((r) => `<link rel="stylesheet" href="${`https://fonts.googleapis.com/css2?family=${r.replace(/\s+/g, "+")}&display=swap`}">`).join(`
 `), HeadTags = () => {
   const [o] = useTheme(), n = useThemeOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: u } = useFrame(), [p] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [m] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
@@ -3819,22 +3700,22 @@ const getChaiThemeVariables = (o) => `:root {
         typography,
         forms,
         aspectRatio,
-        plugin(function({ addBase: b, theme: f }) {
-          b({
+        plugin(function({ addBase: f, theme: b }) {
+          f({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: f("fontFamily.heading")
+              fontFamily: b("fontFamily.heading")
             },
             body: {
-              fontFamily: f("fontFamily.body"),
-              color: f("colors.foreground"),
-              backgroundColor: f("colors.background")
+              fontFamily: b("fontFamily.body"),
+              color: b("colors.foreground"),
+              backgroundColor: b("colors.background")
             }
           });
         })
       ]
     });
   }, [o, n, u]), useEffect(() => {
-    m && (m.textContent = `${map(r, (b) => `[data-block-id="${b}"]`).join(",")}{
+    m && (m.textContent = `${map(r, (f) => `[data-block-id="${f}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
   }, [r, m]), useEffect(() => {
@@ -3842,19 +3723,19 @@ const getChaiThemeVariables = (o) => `:root {
   }, [i, g]), useEffect(() => {
     p && (p.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [p]), useEffect(() => {
-    h && (h.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: f }) => `[data-style-id="${f}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
   }, [l, h]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
-  const y = useMemo(
+  const E = useMemo(
     () => getChaiThemeVariables(o),
     [o]
-  ), E = useMemo(() => getThemeFonts(pick(o, ["fontFamily"])), [o]);
+  ), y = useMemo(() => getThemeFonts(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: y }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: E } })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: E }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: y } })
   ] });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, n) => {
   const r = ["xs", "sm", "md", "lg", "xl", "2xl"], a = r.indexOf(n), l = o.split(" ");
@@ -3889,7 +3770,7 @@ const getChaiThemeVariables = (o) => `:root {
   );
   return { getRSCBlockMarkup: a, getRSCBlockState: l, reset: i };
 }, useWatchRSCBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(rscBlocksStoreAtom), [a, l] = useAtom(rscBlocksLoadingStateAtom), i = useChaiBlocks(), c = useBuilderProp("getRSCBlock", async (u) => ""), d = useMemo(() => o.filter((p) => {
+  const [o] = useBlocksStore(), [n, r] = useAtom(rscBlocksStoreAtom), [a, l] = useAtom(rscBlocksLoadingStateAtom), i = useRegisteredChaiBlocks(), c = useBuilderProp("getRSCBlock", async (u) => ""), d = useMemo(() => o.filter((p) => {
     var h;
     return (h = get(i, p._type)) == null ? void 0 : h.server;
   }).map((p) => p._id), [i, o]);
@@ -3951,7 +3832,7 @@ function getStyleAttrs(o, n) {
 }
 function applyBindings(o, n) {
   const r = get(o, "_bindings", {});
-  return isEmpty(r) ? { ...o } : (each(r, (a, l) => {
+  return isEmpty$1(r) ? { ...o } : (each(r, (a, l) => {
     isString(a) && get(n, a, null) && (o[l] = get(n, a, null));
   }), o);
 }
@@ -3963,56 +3844,56 @@ function isDescendant(o, n, r) {
 }
 const RenderGlobalBlock = ({ blocks: o, allBlocks: n }) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: o });
 function applyLanguage(o, n, r) {
-  if (isEmpty(n))
+  if (isEmpty$1(n))
     return o;
   const a = cloneDeep(o);
   return forEach(keys(a), (l) => {
-    get(r, ["props", l, "i18n"]) && !isEmpty(n) && (a[l] = get(a, `${l}-${n}`, a[l]));
+    get(r, ["props", l, "i18n"]) && !isEmpty$1(n) && (a[l] = get(a, `${l}-${n}`, a[l]));
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
-  const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), h = useCallback((b) => getStyleAttrs(b, d), [d]), [g] = useChaiExternalData(), [y] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
-    (b) => b.reduce((f, k) => {
-      const S = get(u, k, {});
-      return { ...f, ...S };
+  const { selectedLang: r } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [u] = useCanvasSettings(), [p] = useHiddenBlockIds(), { getGlobalBlocks: m } = useGlobalBlocksStore(), h = useCallback((f) => getStyleAttrs(f, d), [d]), [g] = useChaiExternalData(), [E] = useAtom$1(inlineEditingActiveAtom), y = useCallback(
+    (f) => f.reduce((b, v) => {
+      const C = get(u, v, {});
+      return { ...b, ...C };
     }, {}),
     [u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((b, f) => {
-      if (y === b._id || p.includes(b._id))
+    o.map((f, b) => {
+      if (E === f._id || p.includes(f._id))
         return null;
-      const k = {}, S = filter(n, { _parent: b._id });
-      if (k.children = S.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: S }) : null, b._type === "GlobalBlock") {
-        const v = m(b);
-        k.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(v, (C) => !C._parent), allBlocks: v });
+      const v = {}, C = filter(n, { _parent: f._id });
+      if (v.children = C.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: C }) : null, f._type === "GlobalBlock") {
+        const k = m(f);
+        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(k, (S) => !S._parent), allBlocks: k });
       }
-      const R = getBlockComponent(b._type), w = get(R, "server", !1), A = w ? RSCBlock : get(R, "builderComponent", get(R, "component", null));
+      const w = getRegisteredChaiBlock(f._type), R = get(w, "server", !1), A = R ? RSCBlock : get(w, "builderComponent", get(w, "component", null));
       if (isNull(A))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
-      const I = has(R, "getBlockStateFrom") ? R == null ? void 0 : R.getBlockStateFrom(b, n) : [], T = E(I), N = h(b);
-      if (get(N, "__isHidden", !1) && !includes(a, b._id))
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
+      const I = has(w, "getBlockStateFrom") ? w == null ? void 0 : w.getBlockStateFrom(f, n) : [], T = y(I), N = h(f);
+      if (get(N, "__isHidden", !1) && !includes(a, f._id))
         return null;
-      const x = i && isDescendant(i._id, b._id, n), j = {
-        ...includes(a, b._id) ? { "force-show": "" } : {},
-        "data-block-id": b._id,
-        "data-block-type": b._type,
+      const x = i && isDescendant(i._id, f._id, n), j = {
+        ...includes(a, f._id) ? { "force-show": "" } : {},
+        "data-block-id": f._id,
+        "data-block-type": f._type,
         ...i ? (
           // @ts-ignore
           {
-            "data-dnd": canAcceptChildBlock(b._type, i == null ? void 0 : i._type) ? "yes" : "no",
-            "data-dnd-dragged": i._id === b._id || x ? "yes" : "no"
+            "data-dnd": canAcceptChildBlock(f._type, i == null ? void 0 : i._type) ? "yes" : "no",
+            "data-dnd-dragged": i._id === f._id || x ? "yes" : "no"
           }
         ) : {},
-        ...c === b._id && !x ? { "data-drop": "yes" } : {},
-        ...includes(l, b._id) ? { "data-cut-block": "yes" } : {}
+        ...c === f._id && !x ? { "data-drop": "yes" } : {},
+        ...includes(l, f._id) ? { "data-cut-block": "yes" } : {}
       };
-      return w ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: b, blockProps: j }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: f, blockProps: j }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(A, {
         blockProps: j,
-        index: f,
-        ...applyBindings(applyLanguage(b, r, R), g),
+        index: b,
+        ...applyBindings(applyLanguage(f, r, w), g),
         ...omit(N, ["__isHidden"]),
-        ...k,
+        ...v,
         inBuilder: !0,
         blockState: T
       }) });
@@ -4021,7 +3902,7 @@ function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
 }
 const dataProvidersAtom = atom$1([]);
 dataProvidersAtom.debugLabel = "dataProvidersAtom";
-const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), BlocksExternalDataProvider = ({ children: o }) => {
+const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProviders = () => useMemo(() => [], []), BlocksExternalDataProvider = ({ children: o }) => {
   const [, n] = useChaiExternalData(), [r] = usePageDataProviders(), a = useAllDataProviders();
   return useEffect(() => (n({}), each(r, (l) => {
     const i = find(a, { providerKey: l.providerKey });
@@ -4037,7 +3918,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     });
   }), [a, r, n]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: o });
 }, StaticBlocksRenderer = () => {
-  const [o] = useBlocksStore(), n = isEmpty(o) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksExternalDataProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: o, blocks: filter(o, (r) => isEmpty(r._parent)) }) });
+  const [o] = useBlocksStore(), n = isEmpty$1(o) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksExternalDataProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: o, blocks: filter(o, (r) => isEmpty$1(r._parent)) }) });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: n });
 }, AddBlockAtBottom = () => {
   const { t: o } = useTranslation();
@@ -4070,7 +3951,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [m, h] = useState([]), [, g] = useState([]), [, y] = useAtom$1(canvasIframeAtom), [E, b] = useSelectedStylingBlocks(), f = useBuilderProp("loading", !1), k = useBuilderProp("htmlDir", "ltr"), S = (A) => {
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, u] = useState({ width: 0, height: 0 }), p = useCanvasScale(d), [m, h] = useState([]), [, g] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [y, f] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), C = (A) => {
     u((I) => ({ ...I, width: A }));
   };
   useEffect(() => {
@@ -4079,7 +3960,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     const { clientWidth: A, clientHeight: I } = c.current;
     u({ width: A, height: I });
   }, [c, n]);
-  const R = (A, I = 0) => {
+  const w = (A, I = 0) => {
     const { top: T } = A.getBoundingClientRect();
     return T + I >= 0 && T - I <= window.innerHeight;
   };
@@ -4087,30 +3968,30 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     var A, I;
     if (a && a.type !== "Multiple" && i.current) {
       const T = getElementByDataBlockId(i.current.contentDocument, a._id);
-      T && (R(T) || (I = (A = i.current) == null ? void 0 : A.contentWindow) == null || I.scrollTo({ top: T.offsetTop, behavior: "smooth" }), h([T]));
+      T && (w(T) || (I = (A = i.current) == null ? void 0 : A.contentWindow) == null || I.scrollTo({ top: T.offsetTop, behavior: "smooth" }), h([T]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(E) && i.current) {
+    if (!isEmpty$1(y) && i.current) {
       const A = getElementByStyleId(
         i.current.contentDocument,
-        first(E).id
+        first(y).id
       );
       g(A ? [A] : [null]);
     } else
       g([null]);
-  }, [E]);
-  const w = useMemo(() => {
+  }, [y]);
+  const R = useMemo(() => {
     let A = IframeInitialContent;
-    return A = A.replace("__HTML_DIR__", k), o === "offline" && (A = A.replace(
+    return A = A.replace("__HTML_DIR__", v), o === "offline" && (A = A.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
     ), A = A.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), A = A.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), A;
-  }, [o, k]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [o, v]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        r([]), b([]);
+        r([]), f([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -4118,12 +3999,12 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => y(i.current),
+          contentDidMount: () => E(i.current),
           ref: i,
           id: "canvas-iframe",
-          style: { ...p, ...isEmpty(p) ? { width: `${n}px` } : {} },
+          style: { ...p, ...isEmpty$1(p) ? { 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: w,
+          initialContent: R,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4135,7 +4016,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Canvas, { children: [
-              f ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
+              b ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlockAtBottom, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4246,7 +4127,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-9qjIOTD0.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-CqMwiE7m.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -4309,12 +4190,12 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   label: o,
   value: n,
   onChange: r
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-bold", children: startCase(o) }),
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: startCase(o) }),
   /* @__PURE__ */ jsxRuntimeExports.jsx(
     "select",
     {
-      className: "w-full 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",
+      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__ */ jsxRuntimeExports.jsx("option", { value: a.value, children: a.title }, a.value))
@@ -4341,8 +4222,8 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       )
     }
   );
-}, ColorPickerInput$1 = ColorPickerInput, BorderRadiusInput = ({ onChange: o, disabled: n }) => {
-  const r = debounce((a) => o(a), 200);
+}, ColorPickerInput$1 = ColorPickerInput, BorderRadiusInput = ({ value: o, onChange: n, disabled: r }) => {
+  const a = debounce((l) => n(l), 200);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "input",
     {
@@ -4350,125 +4231,110 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       min: "0",
       step: "1",
       max: "30",
-      disabled: n,
-      defaultValue: "15",
-      onChange: (a) => r(a.target.value),
-      className: "flex-1"
+      disabled: r,
+      defaultValue: o.replace("px", ""),
+      onChange: (l) => a(l.target.value),
+      className: "flex-1 cursor-pointer"
     }
   );
 }, BorderRadiusInput$1 = BorderRadiusInput, ThemeConfigPanel$1 = React.memo(({ className: o = "" }) => {
-  const [n, r] = React.useState("light"), [a, l] = React.useState(""), i = useBuilderProp("themePresets", []), [c, d] = useTheme(), u = useThemeOptions(), { t: p } = useTranslation(), m = (f) => {
-    l(f);
-  }, h = () => {
-    const f = i.find((k) => Object.keys(k)[0] === a);
+  const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: u } = useTranslation(), p = (f) => {
+    a(f);
+  }, m = () => {
+    const f = l.find((b) => Object.keys(b)[0] === r);
     if (f) {
-      const k = Object.values(f)[0];
-      k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? d(k) : console.error("Invalid preset structure:", k);
+      const b = Object.values(f)[0];
+      b && typeof b == "object" && "fontFamily" in b && "borderRadius" in b && "colors" in b ? c(b) : console.error("Invalid preset structure:", b);
     } else
-      console.error("Preset not found:", a);
-  }, g = useDebouncedCallback(
-    (f, k) => {
-      d(() => ({
-        ...c,
+      console.error("Preset not found:", r);
+  }, h = useDebouncedCallback(
+    (f, b) => {
+      c(() => ({
+        ...i,
         fontFamily: {
-          ...c.fontFamily,
-          [f.replace(/font-/g, "")]: k
+          ...i.fontFamily,
+          [f.replace(/font-/g, "")]: b
         }
       }));
     },
-    [c],
+    [i],
     200
-  ), y = useDebouncedCallback(
+  ), g = useDebouncedCallback(
     (f) => {
-      d(() => ({
-        ...c,
+      c(() => ({
+        ...i,
         borderRadius: `${f}px`
       }));
     },
-    [c],
+    [i],
     200
   ), E = useDebouncedCallback(
-    (f, k) => {
-      d(() => {
-        const S = get(c, `colors.${f}`);
-        return n === "light" ? set(S, 0, k) : set(S, 1, k), {
-          ...c,
+    (f, b) => {
+      c(() => {
+        const v = get(i, `colors.${f}`);
+        return n ? set(v, 1, b) : set(v, 0, b), {
+          ...i,
           colors: {
-            ...c.colors,
-            [f]: S
+            ...i.colors,
+            [f]: v
           }
         };
       });
     },
-    [c],
+    [i],
     200
-  ), b = (f) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(f.items).map(([k]) => {
-    const S = get(c, `colors.${k}.${n === "light" ? 0 : 1}`);
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center", children: [
+  ), y = (f) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(f.items).map(([b]) => {
+    const v = get(i, `colors.${b}.${n ? 1 : 0}`);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorPickerInput$1,
         {
-          value: S,
-          onChange: (R) => E(k, R)
+          value: v,
+          onChange: (C) => E(b, C)
         }
       ),
-      "  ",
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs text-muted-foreground", children: k.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((R) => R.charAt(0).toUpperCase() + R.slice(1)).join(" ") + (!k.toLowerCase().includes("foreground") && !k.toLowerCase().includes("border") && !k.toLowerCase().includes("input") && !k.toLowerCase().includes("ring") && !k.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, k);
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: b.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((C) => C.charAt(0).toUpperCase() + C.slice(1)).join(" ") + (!b.toLowerCase().includes("foreground") && !b.toLowerCase().includes("border") && !b.toLowerCase().includes("input") && !b.toLowerCase().includes("ring") && !b.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, b);
   }) });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollArea, { className: cn("h-full w-full", o), children: [
-    i.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pb-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[70%]", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm font-bold", children: p("Presets") }) }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("no-scrollbar h-full w-full overflow-y-auto", o), children: [
+    l.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 py-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: u("Presets") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "select",
           {
-            value: a,
-            onChange: (f) => m(f.target.value),
-            className: "w-full 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: r,
+            onChange: (f) => p(f.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__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select preset" }),
-              Array.isArray(i) && i.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(f)[0], children: capitalize(Object.keys(f)[0]) }, Object.keys(f)[0]))
+              Array.isArray(l) && l.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(f)[0], children: capitalize(Object.keys(f)[0]) }, Object.keys(f)[0]))
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: a === "", variant: "default", onClick: h, children: p("Apply") }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: r === "", variant: "default", onClick: m, children: u("Apply") }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("space-y-2", o), children: [
-      (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([f, k]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([f, b]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         FontSelector$1,
         {
           label: f,
-          value: c.fontFamily[f.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-          onChange: (S) => g(f, S)
+          value: i.fontFamily[f.replace(/font-/g, "")] || b[Object.keys(b)[0]],
+          onChange: (v) => h(f, v)
         },
         f
       )) }),
-      (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "py-3", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-bold", children: p("Border Radius") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput$1, { disabled: a === "preset", onChange: y }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-12 text-sm", children: c.borderRadius })
+      (d == null ? void 0 : d.borderRadius) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5 py-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: u("Border Radius") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 py-2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BorderRadiusInput$1, { value: i.borderRadius, onChange: g }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-12 text-sm", children: i.borderRadius })
         ] })
       ] }),
-      (u == null ? void 0 : u.colors) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "text-sm font-bold", children: p("Colors") }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Sun, { className: "size-2 transition-all" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Switch,
-              {
-                checked: n === "dark",
-                onCheckedChange: (f) => r(f ? "dark" : "light"),
-                className: "data-[state=checked]:bg-slate-800 data-[state=unchecked]:bg-slate-200"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Moon, { className: "size-2" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4", children: u.colors.map((f) => b(f)) }, n)
+      (d == null ? void 0 : d.colors) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-0.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((f) => y(f)) }, n ? "dark" : "light")
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4655,34 +4521,34 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let u = null;
-  const p = o.children.length > 0, { highlightBlock: m, clearHighlight: h } = useBlockHighlight(), { id: g, data: y, isSelected: E, willReceiveDrop: b, isDragging: f, isEditing: k, handleClick: S } = o, R = (x) => {
+  const p = o.children.length > 0, { highlightBlock: m, clearHighlight: h } = useBlockHighlight(), { id: g, data: E, isSelected: y, willReceiveDrop: f, isDragging: b, isEditing: v, handleClick: C } = o, w = (x) => {
     x.stopPropagation(), !i.includes(g) && o.toggle();
-  }, w = (x) => {
+  }, R = (x) => {
     x.isInternal && (u = x.isOpen, x.isOpen && x.close());
   }, A = (x) => {
     x.isInternal && u !== null && (u ? x.open() : x.close(), u = null);
   }, I = (x) => {
-    x.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), S(x);
+    x.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), C(x);
   };
   useEffect(() => {
     const x = setTimeout(() => {
-      b && !o.isOpen && !f && !i.includes(g) && o.toggle();
+      f && !o.isOpen && !b && !i.includes(g) && o.toggle();
     }, 500);
     return () => clearTimeout(x);
-  }, [b, o, f]);
+  }, [f, o, b]);
   const T = useMemo(() => {
-    const x = Object.keys(y), j = [];
-    for (let v = 0; v < x.length; v++)
-      if (x[v].endsWith("_attrs")) {
-        const C = y[x[v]], _ = Object.keys(C).join("|");
+    const x = Object.keys(E), j = [];
+    for (let k = 0; k < x.length; k++)
+      if (x[k].endsWith("_attrs")) {
+        const S = E[x[k]], _ = Object.keys(S).join("|");
         _.match(/x-data/) && j.push("data"), _.match(/x-on/) && j.push("event"), _.match(/x-show|x-if/) && j.push("show");
       }
     return j;
-  }, [y]), N = (x, j) => {
-    const v = d.contentDocument || d.contentWindow.document, C = v.querySelector(`[data-block-id=${x}]`);
-    C && C.setAttribute("data-drop", j);
-    const _ = C.getBoundingClientRect(), B = d.getBoundingClientRect();
-    _.top >= B.top && _.left >= B.left && _.bottom <= B.bottom && _.right <= B.right || (v.documentElement.scrollTop = C.offsetTop - B.top);
+  }, [E]), N = (x, j) => {
+    const k = d.contentDocument || d.contentWindow.document, S = k.querySelector(`[data-block-id=${x}]`);
+    S && S.setAttribute("data-drop", j);
+    const _ = S.getBoundingClientRect(), B = d.getBoundingClientRect();
+    _.top >= B.top && _.left >= B.left && _.bottom <= B.bottom && _.right <= B.right || (k.documentElement.scrollTop = S.offsetTop - B.top);
   };
   return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4703,7 +4569,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
       style: n,
       "data-node-id": g,
       ref: i.includes(g) ? null : r,
-      onDragStart: () => w(o),
+      onDragStart: () => R(o),
       onDragEnd: () => A(o),
       onDragOver: (x) => {
         x.preventDefault(), N(g, "yes");
@@ -4716,9 +4582,9 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
       },
       className: cn(
         "group flex !h-full w-full items-center justify-between space-x-px !rounded py-px text-foreground/80 outline-none",
-        E ? "bg-blue-500 text-white" : "hover:bg-gray-200 dark:hover:bg-gray-800",
-        b && canAcceptChildBlock(y._type, "Icon") ? "bg-green-200" : "",
-        f && "opacity-20",
+        y ? "bg-blue-500 text-white" : "hover:bg-gray-200 dark:hover:bg-gray-800",
+        f && canAcceptChildBlock(E._type, "Icon") ? "bg-green-200" : "",
+        b && "opacity-20",
         i.includes(g) ? "opacity-50" : ""
       ),
       children: [
@@ -4727,12 +4593,12 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             "div",
             {
               className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center text-xs transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: R, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: p && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: y == null ? void 0 : y._type }) }),
-            k ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "-mt-0.5 h-3 w-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: E == null ? void 0 : E._type }) }),
+            v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
@@ -4740,7 +4606,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
                   x.stopPropagation(), o.edit(), o.deselect();
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (y == null ? void 0 : y._name) || (y == null ? void 0 : y._type.split("/").pop()) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (E == null ? void 0 : E._name) || (E == null ? void 0 : E._type.split("/").pop()) }),
                   T.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                   T.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                   T.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -4761,7 +4627,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: x.tooltip })
           ] })),
-          canAddChildBlock(y == null ? void 0 : y._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          canAddChildBlock(E == null ? void 0 : E._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
@@ -4884,7 +4750,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
           break;
       }
   };
-  return isEmpty(treeData) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-10 flex h-full w-full items-center justify-center p-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 text-sm text-gray-400", children: [
+  return isEmpty$1(treeData) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-10 flex h-full w-full items-center justify-center p-8 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 text-sm text-gray-400", children: [
     t("This page is empty"),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4961,7 +4827,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const n = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, r = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
   return n.test(o) || r.test(o);
 }, getVideoURLFromHTML = (o) => {
-  if (isEmpty(o))
+  if (isEmpty$1(o))
     return o;
   const n = /<video[^>]+src=['"]([^'">]+)['"]/, r = /<iframe[^>]+src=['"]([^'">]+)['"]/, a = o.match(n), l = o.match(r), i = a ? a[1] : l ? l[1] : null, c = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/, d = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
   return i && (c.test(i) || d.test(i)) ? i : o;
@@ -5001,7 +4867,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
 }, shouldAddText = (o, n) => o.children.length === 1 && includes(
   ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
   n._type
-), getTextContent = (o) => o.map((n) => n.type === "text" ? get(n, "content", "") : isEmpty(n.children) ? "" : getTextContent(n.children)).join(""), getSanitizedValue = (o) => o === null ? "" : o, getAttrs = (o) => {
+), getTextContent = (o) => o.map((n) => n.type === "text" ? get(n, "content", "") : isEmpty$1(n.children) ? "" : getTextContent(n.children)).join(""), getSanitizedValue = (o) => o === null ? "" : o, getAttrs = (o) => {
   if (o.tagName === "svg")
     return {};
   const n = {}, r = ATTRIBUTE_MAP[o.tagName] || {}, a = o.attributes;
@@ -5112,16 +4978,16 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var u, p, m, h, g, y, E, b;
+  var u, p, m, h, g, E, y, f;
   if (r.type === "comment")
     return [];
   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", "") };
+    return isEmpty$1(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(
-    (f) => f.key === "data-chai-richtext" || f.key === "chai-richtext"
+    (b) => b.key === "data-chai-richtext" || b.key === "chai-richtext"
   ), c = l.find(
-    (f) => f.key === "data-chai-lightbox" || f.key === "chai-lightbox"
+    (b) => b.key === "data-chai-lightbox" || b.key === "chai-lightbox"
   );
   if (a = {
     ...a,
@@ -5129,13 +4995,13 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const f = r.attributes.find((k) => includes(NAME_ATTRIBUTES, k.key));
-    f && (a._name = f.value);
+    const b = r.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
+    b && (a._name = b.value);
   }
   if (i)
     return a.content = stringify(r.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const f = [
+    const b = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -5147,26 +5013,26 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     ];
     a = {
       ...a,
-      href: ((u = l.find((k) => k.key === "href")) == null ? void 0 : u.value) || "",
-      hrefType: ((p = l.find((k) => k.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
-      autoplay: ((m = l.find((k) => k.key === "data-autoplay")) == null ? void 0 : m.value) === "true",
-      maxWidth: ((g = (h = l.find((k) => k.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((y = l.find((k) => k.key === "data-overlay")) == null ? void 0 : y.value) || "",
-      galleryName: ((E = l.find((k) => k.key === "data-gall")) == null ? void 0 : E.value) || ""
-    }, forEach(f, (k) => {
-      has(a, `styles_attrs.${k}`) && delete a.styles_attrs[k];
+      href: ((u = l.find((v) => v.key === "href")) == null ? void 0 : u.value) || "",
+      hrefType: ((p = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : p.value) || "video",
+      autoplay: ((m = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : m.value) === "true" ? "true" : "false",
+      maxWidth: ((g = (h = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : g.replace("px", "")) || "",
+      backdropColor: ((E = l.find((v) => v.key === "data-overlay")) == null ? void 0 : E.value) || "",
+      galleryName: ((y = l.find((v) => v.key === "data-gall")) == null ? void 0 : y.value) || ""
+    }, forEach(b, (v) => {
+      has(a, `styles_attrs.${v}`) && delete a.styles_attrs[v];
     });
   }
   if (a._type === "Input") {
-    const f = a.inputType || "text";
-    f === "checkbox" ? set(a, "_type", "Checkbox") : f === "radio" && set(a, "_type", "Radio");
+    const b = a.inputType || "text";
+    b === "checkbox" ? set(a, "_type", "Checkbox") : b === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const f = stringify([r]);
-    return hasVideoEmbed(f) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(f)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = f, [a];
+    const b = stringify([r]);
+    return hasVideoEmbed(b) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(b)), set(a, "styles", `${STYLES_KEY},absolute top-0 left-0 w-full h-full`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = b, [a];
   } else if (r.tagName === "svg") {
-    const f = find(r.attributes, { key: "height" }), k = find(r.attributes, { key: "width" }), S = get(f, "value") ? `[${get(f, "value")}px]` : "24px", R = get(k, "value") ? `[${get(k, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${R} h-${S}`, w)}`.trim(), r.attributes = filter(r.attributes, (A) => !includes(["style", "width", "height", "class"], A.key)), a.icon = stringify([r]), [a];
-  } else if (r.tagName == "option" && n && ((b = n.block) == null ? void 0 : b._type) === "Select")
+    const b = find(r.attributes, { key: "height" }), v = find(r.attributes, { key: "width" }), C = get(b, "value") ? `[${get(b, "value")}px]` : "24px", w = get(v, "value") ? `[${get(v, "value")}px]` : "24px", R = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${w} h-${C}`, R)}`.trim(), r.attributes = filter(r.attributes, (A) => !includes(["style", "width", "height", "class"], A.key)), a.icon = stringify([r]), [a];
+  } else if (r.tagName == "option" && n && ((f = n.block) == null ? void 0 : f._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
       ...getAttrs(r)
@@ -5178,7 +5044,7 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   return (n && n.length > 0 ? n[0].replace(/<body/, "<div").replace(/<\/body>/, "</div>") : o).replace(/\s+/g, " ").replaceAll("> <", "><").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").trim();
 }, getBlocksFromHTML = (o) => {
   const n = parse(getSanitizedHTML(o));
-  return isEmpty(o) ? [] : flatten(traverseNodes(n));
+  return isEmpty$1(o) ? [] : flatten(traverseNodes(n));
 }, ImportHTML = ({ parentId: o }) => {
   const { t: n } = useTranslation(), [r, a] = useState(""), { addPredefinedBlock: l } = useAddBlock(), i = () => {
     const c = getBlocksFromHTML(r);
@@ -5291,7 +5157,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o, className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover", alt: "" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal$1, { onSelect: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-3/5 flex-col", children: [
       c && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal$1, { onSelect: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "h-6 cursor-pointer rounded-md bg-primary px-2 py-1 text-center text-xs text-white hover:bg-gray-500 dark:bg-gray-700", children: o || !isEmpty(o) ? i("Replace image") : i("Choose image") }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MediaManagerModal$1, { onSelect: n, children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "h-6 cursor-pointer rounded-md bg-primary px-2 py-1 text-center text-xs text-white hover:bg-gray-500 dark:bg-gray-700", children: o || !isEmpty$1(o) ? i("Replace image") : i("Choose image") }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "-pl-4 pt-2 text-center text-xs text-gray-600", children: "OR" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5352,43 +5218,43 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   onChange: r
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (x, j) => []), [i, c] = useState(!1), [d, u] = useState(!1), [p, m] = useState("page"), [h, g] = useState(""), [y, E] = useState([]), [b, f] = useState(-1), k = useRef(null), S = (N = n == null ? void 0 : n.find((x) => x.key === p)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (x, j) => []), [i, c] = useState(!1), [d, u] = useState(!1), [p, m] = useState("page"), [h, g] = useState(""), [E, y] = useState([]), [f, b] = useState(-1), v = useRef(null), C = (N = n == null ? void 0 : n.find((x) => x.key === p)) == null ? void 0 : N.name;
   useEffect(() => {
-    if (g(""), E([]), f(-1), u(!1), !o || i || !startsWith(o, "collection:"))
+    if (g(""), y([]), b(-1), u(!1), !o || i || !startsWith(o, "collection:"))
       return;
     const x = split(o, ":"), j = get(x, 1, "page") || "page";
     m(j), (async () => {
-      const v = await l(j, [get(x, 2, "page")]);
-      v && Array.isArray(v) && g(get(v, [0, "name"], ""));
+      const k = await l(j, [get(x, 2, "page")]);
+      k && Array.isArray(k) && g(get(k, [0, "name"], ""));
     })();
   }, [o]);
-  const R = useDebouncedCallback(
+  const w = useDebouncedCallback(
     async (x) => {
-      if (isEmpty(x))
-        E([]);
+      if (isEmpty$1(x))
+        y([]);
       else {
         const j = await l(p, x);
-        E(j);
+        y(j);
       }
-      c(!1), f(-1);
+      c(!1), b(-1);
     },
     [p],
     300
-  ), w = (x) => {
+  ), R = (x) => {
     const j = ["collection", p, x.id];
-    j[1] && (r(j.join(":")), g(x.name), u(!1), E([]), f(-1));
+    j[1] && (r(j.join(":")), g(x.name), u(!1), y([]), b(-1));
   }, A = (x) => {
     switch (x.key) {
       case "ArrowDown":
-        x.preventDefault(), f((j) => j < y.length - 1 ? j + 1 : j);
+        x.preventDefault(), b((j) => j < E.length - 1 ? j + 1 : j);
         break;
       case "ArrowUp":
-        x.preventDefault(), f((j) => j > 0 ? j - 1 : j);
+        x.preventDefault(), b((j) => j > 0 ? j - 1 : j);
         break;
       case "Enter":
-        if (x.preventDefault(), y.length === 0)
+        if (x.preventDefault(), E.length === 0)
           return;
-        b >= 0 && w(y[b]);
+        f >= 0 && R(E[f]);
         break;
       case "Escape":
         x.preventDefault(), I();
@@ -5396,15 +5262,15 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     }
   };
   useEffect(() => {
-    if (b >= 0 && k.current) {
-      const x = k.current.children[b];
+    if (f >= 0 && v.current) {
+      const x = v.current.children[f];
       x == null || x.scrollIntoView({ block: "nearest" });
     }
-  }, [b]);
+  }, [f]);
   const I = () => {
-    g(""), E([]), f(-1), u(!1), r("");
+    g(""), y([]), b(-1), u(!1), r("");
   }, T = (x) => {
-    g(x), u(!isEmpty(x)), c(!0), R(x);
+    g(x), u(!isEmpty$1(x)), c(!0), w(x);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: p, onChange: (x) => m(x.target.value), children: map(n, (x) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: x.key, children: x.name }, x.key)) }),
@@ -5416,25 +5282,25 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
           value: h,
           onChange: (x) => T(x.target.value),
           onKeyDown: A,
-          placeholder: a(`Search ${S}`),
+          placeholder: a(`Search ${C}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(y) || d && isEmpty(y)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty$1(E) || d && isEmpty$1(E)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(y) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty$1(E) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       h,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: k, children: map(y == null ? void 0 : y.slice(0, 20), (x, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: v, children: map(E == null ? void 0 : E.slice(0, 20), (x, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => w(x),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(x.id) ? "bg-blue-200" : j === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => R(x),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(x.id) ? "bg-blue-200" : j === f ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           x.name,
           " ",
@@ -5449,13 +5315,13 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
-  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = n, d = useBuilderProp("collections", []), u = l === "collection" && isEmpty(d) ? "url" : l;
+  const { t: a } = useTranslation(), { type: l = "collection", href: i = "", target: c = "self" } = n, d = useBuilderProp("collections", []), u = l === "collection" && isEmpty$1(d) ? "url" : l;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-medium", children: (o == null ? void 0 : o.title) ?? "Link" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "type", value: l, onChange: (p) => r({ ...n, type: p.target.value }), children: map(
         [
-          ...isEmpty(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
+          ...isEmpty$1(d) ? [] : [{ const: "collection", title: a("Goto Page") }],
           { const: "url", title: a("Open URL") },
           { const: "email", title: a("Compose Email") },
           { const: "telephone", title: a("Call Phone") },
@@ -5463,7 +5329,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         ],
         (p) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: p.const, children: p.title }, p.const)
       ) }),
-      u === "collection" && !isEmpty(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      u === "collection" && !isEmpty$1(d) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         CollectionField,
         {
           href: i,
@@ -5519,22 +5385,16 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
-}, JSONForm = memo(({ id: o, properties: n, formData: r, onChange: a }) => {
-  const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: u } = useTranslation(), { selectedLang: p, fallbackLang: m, languages: h } = useLanguages(), g = h.length === 0 ? "" : p.length ? p : m;
-  Object.keys(n).forEach((E) => {
-    const b = n[E];
-    if (includes(["slot", "styles"], b.type))
-      return;
-    const f = E;
-    c.properties[f] = getBlockJSONFromSchemas(b, u, g), d[f] = getBlockJSONFromUISchemas(b);
-  }), useEffect(() => {
-    i(r);
-  }, [o, p]);
-  const y = useThrottledCallback(
-    async ({ formData: E }, b) => {
-      a({ formData: E }, b);
+}, JSONForm = memo(({ id: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
+  const [i, c] = useState(a), { selectedLang: d } = useLanguages();
+  useEffect(() => {
+    c(a);
+  }, [o, d]);
+  const u = useThrottledCallback(
+    async ({ formData: p }, m) => {
+      l({ formData: p }, m);
     },
-    [a],
+    [l],
     1e3
     // save only every 5 seconds
   );
@@ -5548,18 +5408,20 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         image: ImagePickerField,
         code: CodeEditor
       },
-      fields: { link: LinkField },
+      fields: {
+        link: LinkField
+      },
       idSeparator: ".",
       autoComplete: "off",
       omitExtraData: !1,
       liveOmit: !1,
       liveValidate: !1,
       validator,
-      uiSchema: d,
-      schema: c,
-      formData: l,
-      onChange: ({ formData: E }, b) => {
-        b && (i(E), y({ formData: E }, b));
+      uiSchema: r,
+      schema: n,
+      formData: i,
+      onChange: ({ formData: p }, m) => {
+        m && (c(p), u({ formData: p }, m));
       }
     }
   );
@@ -5625,42 +5487,46 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
 }, formDataWithSelectedLang = (o, n, r) => {
   const a = cloneDeep(o);
   return forEach(keys(o), (l) => {
-    get(r, ["props", l, "i18n"]) && !isEmpty(n) && (a[l] = get(o, `${l}-${n}`));
+    get(r, ["props", l, "i18n"]) && !isEmpty$1(n) && (a[l] = get(o, `${l}-${n}`));
   }), a;
+}, convertDotNotationToObject = (o, n) => {
+  const r = {};
+  return set(r, o, n), r;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getBlockComponent(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), u = !1, p = ({ formData: b }, f, k) => {
+  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), u = ({ formData: y }, f, b) => {
     if (f && (c == null ? void 0 : c._id) === n._id) {
-      const S = f.replace("root.", "");
-      a([n._id], { [S]: get(b, S) }, k);
+      const v = f.replace("root.", "");
+      a([n._id], { [v]: get(y, v) }, b);
     }
-  }, m = useCallback(
-    debounce(({ formData: b }, f, k) => {
-      p({ formData: b }, f, k), d(b);
+  }, p = useCallback(
+    debounce(({ formData: y }, f, b) => {
+      u({ formData: y }, f, b), d(y);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), h = ({ formData: b }, f) => {
+  ), m = ({ formData: y }, f) => {
     if (f) {
-      const k = f.replace("root.", "");
+      const b = f.replace("root.", "");
       r(
         [n._id],
-        convertDotNotationToObject(k, get(b, k.split(".")))
-      ), m({ formData: b }, f, { [k]: get(c, k) });
+        convertDotNotationToObject(b, get(y, b.split(".")))
+      ), p({ formData: y }, f, { [b]: get(c, b) });
     }
-  }, g = keys(get(i, "_bindings", {})), y = useMemo(() => {
-    const b = cloneDeep(get(l, "props", {}));
-    return each(b, (f, k) => {
-      get(f, "hidden", !1) && delete b[k];
-    }), b;
-  }, [l, g, u]), E = get(l, "server", !1);
+  };
+  keys(get(i, "_bindings", {}));
+  const { schema: h, uiSchema: g } = useMemo(() => {
+    const y = n == null ? void 0 : n._type;
+    return y ? getBlockFormSchemas(y) : { schema: {}, uiSchema: {} };
+  }, [n]), E = get(l, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
-    isEmpty(y) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isEmpty$1(h) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: n == null ? void 0 : n._id,
-        onChange: h,
+        onChange: m,
         formData: i,
-        properties: y
+        schema: h,
+        uiSchema: g
       }
     ),
     (n == null ? void 0 : n._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
@@ -5739,8 +5605,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (g = d.current) == null || g.focus();
   }, []);
   const h = (g) => {
-    const { usage: y } = g || {};
-    !l && y && m(y), u.current = setTimeout(() => m(void 0), 1e4), l || c("");
+    const { usage: E } = g || {};
+    !l && E && m(E), u.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -5751,8 +5617,8 @@ const AskAIStyles = ({ blockId: o }) => {
         value: i,
         onChange: (g) => c(g.target.value),
         placeholder: n("Ask AI to edit styles"),
-        className: "w-full border border-border focus:border-0",
-        rows: 3,
+        className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
+        rows: 4,
         onKeyDown: (g) => {
           g.key === "Enter" && (g.preventDefault(), u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, h));
         }
@@ -5796,24 +5662,24 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var I;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [u, p] = useState(""), { toast: m } = useToast(), h = (I = first(r)) == null ? void 0 : I.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), y = () => {
+  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [u, p] = useState(""), { toast: m } = useToast(), h = (I = first(r)) == null ? void 0 : I.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty$1), E = () => {
     const T = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(c, T, !0), p("");
-  }, [E, b] = useState([]), f = ({ value: T }) => {
+  }, [y, f] = useState([]), b = ({ value: T }) => {
     const N = T.trim().toLowerCase(), x = N.match(/.+:/g);
     let j = [];
     if (x && x.length > 0) {
-      const [v] = x, C = N.replace(v, "");
-      j = o.search(C).map((B) => ({
+      const [k] = x, S = N.replace(k, "");
+      j = o.search(S).map((B) => ({
         ...B,
-        item: { ...B.item, name: v + B.item.name }
+        item: { ...B.item, name: k + B.item.name }
       }));
     } else
       j = o.search(N);
-    return b(map(j, "item"));
-  }, k = () => {
-    b([]);
-  }, S = (T) => T.name, R = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), w = {
+    return f(map(j, "item"));
+  }, v = () => {
+    f([]);
+  }, C = (T) => T.name, w = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), R = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -5821,7 +5687,7 @@ function ManualClasses() {
     placeholder: n("Enter classes separated by space"),
     value: u,
     onKeyDown: (T) => {
-      T.key === "Enter" && u.trim() !== "" && y();
+      T.key === "Enter" && u.trim() !== "" && E();
     },
     onChange: (T, { newValue: N }) => p(N),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -5842,7 +5708,7 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: `flex ${E.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
+      className: `flex ${y.length > 0 ? "min-h-[300px]" : "min-h-max"} w-full flex-col gap-y-1.5 overflow-y-auto pb-4`,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
@@ -5864,12 +5730,12 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             Autosuggest,
             {
-              suggestions: E,
-              onSuggestionsFetchRequested: f,
-              onSuggestionsClearRequested: k,
-              getSuggestionValue: S,
-              renderSuggestion: R,
-              inputProps: w,
+              suggestions: y,
+              onSuggestionsFetchRequested: b,
+              onSuggestionsClearRequested: v,
+              getSuggestionValue: C,
+              renderSuggestion: w,
+              inputProps: R,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
               },
@@ -5885,7 +5751,7 @@ function ManualClasses() {
             {
               variant: "outline",
               className: "h-6 border-border",
-              onClick: y,
+              onClick: E,
               disabled: u.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -6301,8 +6167,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
 }, ColorChoice = ({ property: o, onChange: n }) => {
   const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), m = get(p, "1", ""), h = get(p, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), u({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), u((f) => ({ ...f, color: b, shade: f.shade ? f.shade : "500" })));
+    (f) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(f) ? (c([]), u({ color: f })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), u((b) => ({ ...b, color: f, shade: b.shade ? b.shade : "500" })));
     },
     [c, u]
   );
@@ -6311,21 +6177,21 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [m]);
-  const y = useCallback(
+  const E = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      u({ color: m, shade: b });
+    (f) => {
+      u({ color: m, shade: f });
     },
     [m]
   );
   useEffect(() => {
     u({ color: "", shade: "" });
   }, [r]);
-  const { match: E } = useTailwindClassList();
+  const { match: y } = useTailwindClassList();
   return useEffect(() => {
-    const f = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    E(o, f) && n(f, o);
-  }, [E, d, n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    y(o, b) && n(b, o);
+  }, [y, d, n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
       {
@@ -6365,7 +6231,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !m || !l, onChange: y, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !m || !l, onChange: E, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -6374,7 +6240,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     return { value: "", unit: r };
   const a = n.length ? new RegExp(n.join("|"), "g") : /XXXXXX/g;
   r = r.replace(a, "");
-  const l = o.match(a), i = l && l.length > 1, c = !isEmpty(r) && Number.isNaN(Number(r));
+  const l = o.match(a), i = l && l.length > 1, c = !isEmpty$1(r) && Number.isNaN(Number(r));
   return i || c ? { error: "Invalid value" } : l && (l[0] === "auto" || l[0] === "none") ? { value: l[0], unit: "" } : { value: r, unit: l ? l[0] : "" };
 }, getTwClassValue = (o) => {
   const n = o.startsWith("-") ? "-" : "", r = o.split("-").pop();
@@ -6505,14 +6371,14 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   }
   return isNumber(parseFloat(r)) ? { value: `${n + parseFloat(r) * 4}`, unit: "px" } : { value: r, unit: "class" };
 }, getClassValueAndUnit = (o) => {
-  if (isEmpty(o))
+  if (isEmpty$1(o))
     return { value: "", unit: "" };
   const n = o.match(/\[.*\]/g);
   if (n === null)
     return getValueAndUnitForTWClass(o);
   const r = get(n, "0", "").replace(/\[|\]/g, ""), a = o.startsWith("-") ? "-" : "", l = first(r.match(/\d+.\d+|\d+/g));
   return { value: `${a}${l}`, unit: r.replace(l, "") };
-}, getValueAndUnitForTWClass = (o) => isEmpty(o) ? { value: "", unit: "" } : getTwClassValue(o), BlockSettingsContext = React__default.createContext({
+}, getValueAndUnitForTWClass = (o) => isEmpty$1(o) ? { value: "", unit: "" } : getTwClassValue(o), BlockSettingsContext = React__default.createContext({
   setDragData: () => {
   }
 }), DragStyleButton = ({
@@ -6560,30 +6426,30 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: m } = o, [h, g] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [y, E] = useState(!1), [b, f] = useState(""), [k, S] = useState(!1), [R, w] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: m } = o, [h, g] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [E, y] = useState(!1), [f, b] = useState(""), [v, C] = useState(!1), [w, R] = useState(!1);
   useEffect(() => {
     const { value: x, unit: j } = getClassValueAndUnit(i);
     if (j === "") {
       l(x), g(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    g(j), l(j === "class" || isEmpty(x) ? "" : x);
+    g(j), l(j === "class" || isEmpty$1(x) ? "" : x);
   }, [i, u, p]);
   const A = useThrottledCallback((x) => c(x), [c], THROTTLE_TIME), I = useThrottledCallback((x) => c(x, !1), [c], THROTTLE_TIME), T = useCallback(
     (x = !1) => {
       const j = getUserInputValues(`${a}`, p);
       if (get(j, "error", !1)) {
-        E(!0);
+        y(!0);
         return;
       }
-      const v = get(j, "unit") !== "" ? get(j, "unit") : h;
-      if (v === "auto" || v === "none") {
-        A(`${d}${v}`);
+      const k = get(j, "unit") !== "" ? get(j, "unit") : h;
+      if (k === "auto" || k === "none") {
+        A(`${d}${k}`);
         return;
       }
       if (get(j, "value") === "")
         return;
-      const _ = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${v === "-" ? "" : v}]`;
+      const _ = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${k === "-" ? "" : k}]`;
       x ? I(_) : A(_);
     },
     [A, I, a, h, d, p]
@@ -6591,7 +6457,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     (x) => {
       const j = getUserInputValues(`${a}`, p);
       if (get(j, "error", !1)) {
-        E(!0);
+        y(!0);
         return;
       }
       if (x === "auto" || x === "none") {
@@ -6600,7 +6466,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       }
       if (get(j, "value") === "")
         return;
-      const v = get(j, "unit") !== "" ? get(j, "unit") : x, _ = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${v === "-" ? "" : v}]`;
+      const k = get(j, "unit") !== "" ? get(j, "unit") : x, _ = `${get(j, "value", "").startsWith("-") ? "-" : ""}${d}[${get(j, "value", "").replace("-", "")}${k === "-" ? "" : k}]`;
       A(_);
     },
     [A, a, d, p]
@@ -6611,7 +6477,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${k ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -6623,28 +6489,28 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           onKeyDown: (x) => {
             if (x.keyCode !== 38 && x.keyCode !== 40)
               return;
-            x.preventDefault(), w(!0);
+            x.preventDefault(), R(!0);
             const j = parseInt$1(x.target.value);
-            let v = isNaN$1(j) ? 0 : j;
-            x.keyCode === 38 && (v += 1), x.keyCode === 40 && (v -= 1);
-            const C = `${v}`, B = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+            let k = isNaN$1(j) ? 0 : j;
+            x.keyCode === 38 && (k += 1), x.keyCode === 40 && (k -= 1);
+            const S = `${k}`, B = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${h === "-" ? "" : h}]`;
             I(B);
           },
           onKeyUp: (x) => {
-            R && (x.preventDefault(), w(!1));
+            w && (x.preventDefault(), R(!1));
           },
           onBlur: () => T(),
           onChange: (x) => {
-            E(!1), l(x.target.value);
+            y(!1), l(x.target.value);
           },
           onClick: (x) => {
             var j;
             (j = x == null ? void 0 : x.target) == null || j.select(), r(!1);
           },
-          value: k ? b : a,
+          value: v ? f : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            y ? "border-red-500 text-red-500" : "border-foreground/20"
+            E ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6673,22 +6539,22 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || k ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => S(!0),
+        onDragStart: () => C(!0),
         onDragEnd: (x) => {
-          if (f(() => ""), S(!1), isEmpty(x))
+          if (b(() => ""), C(!1), isEmpty$1(x))
             return;
-          const j = `${x}`, C = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${h === "-" ? "" : h}]`;
-          A(C);
+          const j = `${x}`, S = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${h === "-" ? "" : h}]`;
+          A(S);
         },
         onDrag: (x) => {
-          if (isEmpty(x))
+          if (isEmpty$1(x))
             return;
-          f(x);
-          const j = `${x}`, C = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${h === "-" ? "" : h}]`;
-          I(C);
+          b(x);
+          const j = `${x}`, S = `${j.startsWith("-") ? "-" : ""}${d}[${j.replace("-", "")}${h === "-" ? "" : h}]`;
+          I(S);
         },
         currentValue: a,
         unit: h,
@@ -6785,23 +6651,23 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "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, [u] = useDarkMode(), [p] = useStylingState(), [, m] = useCanvasWidth(), h = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), y = useRemoveClassesFromBlocks(), [E] = useSelectedBlockIds(), b = useMemo(() => get(h, "fullCls", ""), [h]), f = useCallback(
+  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, m] = useCanvasWidth(), h = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [y] = useSelectedBlockIds(), f = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
     (I, T = !0) => {
       const N = { dark: u, mq: m, mod: p, cls: I, property: l, fullCls: "" };
       (u || p !== "") && (N.mq = "xs");
       const x = generateFullClsName(N);
-      g(E, [x], T);
+      g(y, [x], T);
     },
-    [E, u, m, p, l, g]
-  ), k = useCallback(() => {
-    y(E, [b]);
-  }, [E, b, y]), S = useMemo(() => canChangeClass(h, m), [h, m]);
+    [y, u, m, p, l, g]
+  ), v = useCallback(() => {
+    E(y, [f]);
+  }, [y, f, E]), C = useMemo(() => canChangeClass(h, m), [h, m]);
   useEffect(() => {
-    i(S, h);
-  }, [S, i, h]);
-  const [, , R] = useCanvasWidth(), w = useCallback(
+    i(C, h);
+  }, [C, i, h]);
+  const [, , w] = useCanvasWidth(), R = useCallback(
     (I) => {
-      R({
+      w({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6810,9 +6676,9 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         "2xl": 1920
       }[I]);
     },
-    [R]
+    [w]
   ), A = get(h, "dark", null) === u && get(h, "mod", null) === p && get(h, "mq", null) === m;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: S, canReset: h && A, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: h && A, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${h && !A ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
@@ -6822,17 +6688,17 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: f,
+            onChange: b,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: f }),
-        r === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: f }),
-        r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: f }),
-        r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: f })
+        r === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: b }),
+        r === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: b }),
+        r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: b }),
+        r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => k(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6852,7 +6718,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             "button",
             {
               type: "button",
-              onClick: () => w(get(h, "mq")),
+              onClick: () => R(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6882,18 +6748,18 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: g, key: y }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            n.map(({ label: g, key: E }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => p(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === u ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => p(E),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${E === u ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: h(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: h(E) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, y, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, E, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6935,63 +6801,55 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-2", children: n.map((i) => i.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...i }, i.label) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...i }, i.label)) })
   ] });
-}, SectionContext = createContext({}), StylingGroup = ({ section: o }) => {
-  const { t: n } = useTranslation(), r = useSelectedBlockCurrentClasses(), a = useCallback(
-    (i = []) => {
-      const c = {};
-      for (let u = 0; u < r.length; u++)
-        c[r[u].property] = r[u].cls;
-      let d = !0;
-      for (const u in i)
-        if (!has(c, u) || c[u] !== i[u]) {
-          d = !1;
+}, SectionContext = createContext({}), StylingGroup = ({ section: o, showAccordian: n }) => {
+  const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useCallback(
+    (c = []) => {
+      const d = {};
+      for (let p = 0; p < a.length; p++)
+        d[a[p].property] = a[p].cls;
+      let u = !0;
+      for (const p in c)
+        if (!has(d, p) || d[p] !== c[p]) {
+          u = !1;
           break;
         }
-      return d;
+      return u;
     },
-    [r]
-  ), l = useMemo(() => ({}), []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContext.Provider, { value: l, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-b border-border py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-sm font-bold", children: startCase$1(n(o.heading)) }) }) }),
+    [a]
+  ), i = useMemo(() => ({}), []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContext.Provider, { value: i, children: n ? /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase$1(r(o.heading)) }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContent, { className: "py-2", children: React__default.Children.toArray(
-      o.items.map((i) => has(i, "component") ? React__default.createElement(i.component, { key: i.label }) : has(i, "styleType") ? i.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...i }, i.label) : i.styleType === "accordion" && a(i == null ? void 0 : i.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...i }, i.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...i }, i.label))
+      o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...c }, c.label))
     ) })
-  ] }) });
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(MultipleChoices, { ...c }, c.label) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsxRuntimeExports.jsx(NestedOptions, { ...c }, c.label) : null : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyle, { ...c }, c.label))
+  ) }) });
 }, StylingHelpers = () => {
-  const o = useSelectedBlock(), [n] = useSelectedStylingBlocks(), { t: r } = useTranslation(), a = useGlobalStylingPresets(), l = useAddClassesToBlocks(), i = getBlockComponent(o._type), c = get(first(n), "prop"), d = get(i.props, `${c}.presets`, {});
-  if (isEmpty(a) && (!has(i, "props") || isEmpty(d)))
+  const o = useSelectedBlock(), [n] = useSelectedStylingBlocks(), { t: r } = useTranslation(), a = useAddClassesToBlocks(), l = getRegisteredChaiBlock(o._type), i = get(first(n), "prop"), c = get(l.props, `${i}.presets`, {});
+  if (!has(l, "props") || isEmpty$1(c))
     return null;
-  const u = (p) => {
-    const m = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([o._id], m, !0);
+  const d = (u) => {
+    const p = u.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    a([o._id], p, !0);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "default", className: "w-full", size: "sm", children: [
       r("Apply Presets"),
       /* @__PURE__ */ jsxRuntimeExports.jsx(CaretDownIcon, {})
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "max-h-80 w-56", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ScrollArea, { className: "no-scrollbar h-full", children: [
-      isEmpty(d) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuLabel, { children: [
-          i.type,
-          " ",
-          r("presets")
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(d).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(d[p]), children: [
-          capitalize(startCase$1(r(p))),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
-        ] })) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuContent, { className: "max-h-80 w-56", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "no-scrollbar h-full", children: isEmpty$1(c) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuLabel, { children: [
+        l.type,
+        " ",
+        r("presets")
       ] }),
-      isEmpty(a) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuLabel, { children: r("Global presets") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(a).map((p) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => u(a[p]), children: [
-          capitalize(startCase$1(r(p))),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
-        ] })) })
-      ] })
-    ] }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuGroup, { children: keys(c).map((u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownMenuItem, { className: "group text-xs", onClick: () => d(c[u]), children: [
+        capitalize(startCase$1(r(u))),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownMenuShortcut, { className: "invisible hover:font-bold hover:text-blue-600 group-hover:visible", children: r("apply") })
+      ] })) })
+    ] }) }) })
   ] }) });
 }, MAPPER = {
   px: 1,
@@ -7020,10 +6878,10 @@ function BlockStyling() {
       const m = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let g = parseFloat(i.dragStartValue);
       g = isNaN(g) ? 0 : g;
-      let y = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (y = 10);
-      let b = (i.dragStartY - p.pageY) / y + g;
-      m && b < 0 && (b = 0), h === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      let E = MAPPER[i.dragUnit];
+      (startsWith(h, "scale") || h === "opacity") && (E = 10);
+      let f = (i.dragStartY - p.pageY) / E + g;
+      m && f < 0 && (f = 0), h === "opacity" && f > 1 && (f = 1), i.onDrag(`${f}`), l(`${f}`);
     },
     [i],
     50
@@ -7039,7 +6897,7 @@ function BlockStyling() {
       cssProperty: ""
     });
   }, [i, a, c]);
-  return isEmpty(r) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockSettingsContext.Provider, { value: { setDragData: c }, children: [
+  return isEmpty$1(r) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(BlockSettingsContext.Provider, { value: { setDragData: c }, children: [
     i.dragging ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -7051,9 +6909,9 @@ function BlockStyling() {
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StylingHelpers, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
-        o && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION }),
-        n ? /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION }) : null,
-        SETTINGS_SECTIONS.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: p }, p.heading))
+        o && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: FLEX_CHILD_SECTION, showAccordian: o || n }),
+        n && /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: GRID_CHILD_SECTION, showAccordian: o || n }),
+        SETTINGS_SECTIONS.map((p) => /* @__PURE__ */ jsxRuntimeExports.jsx(StylingGroup, { section: p, showAccordian: o || n }, p.heading))
       ] })
     ] })
   ] });
@@ -7109,33 +6967,33 @@ const BlockCard = ({
   library: n,
   parentId: r = void 0
 }) => {
-  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), y = (f) => {
-    const k = has(f, "styles_attrs.data-page-section");
-    return f._type === "Box" && k;
-  }, E = useCallback(
-    async (f) => {
-      if (f.stopPropagation(), has(o, "component")) {
+  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: p } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), E = (b) => {
+    const v = has(b, "styles_attrs.data-page-section");
+    return b._type === "Box" && v;
+  }, y = useCallback(
+    async (b) => {
+      if (b.stopPropagation(), has(o, "component")) {
         c(o, r), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       l(!0);
-      const k = await i(n, o);
-      isEmpty(k) || d(syncBlocksWithDefaults(k), r), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const v = await i(n, o);
+      isEmpty$1(v) || d(syncBlocksWithDefaults(v), r), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
-    [o]
-  ), b = async (f) => {
-    const k = await i(n, o);
-    let S = r;
-    if (y(first(k)) && (S = null), !isEmpty(k)) {
-      const R = { blocks: k, uiLibrary: !0, parent: S };
-      if (f.dataTransfer.setData("text/plain", JSON.stringify(R)), o.preview) {
-        const w = new Image();
-        w.src = o.preview, w.onload = () => {
-          f.dataTransfer.setDragImage(w, 0, 0);
+    [c, d, o, i, n, r]
+  ), f = async (b) => {
+    const v = await i(n, o);
+    let C = r;
+    if (E(first(v)) && (C = null), !isEmpty$1(v)) {
+      const w = { blocks: v, uiLibrary: !0, parent: C };
+      if (b.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
+        const R = new Image();
+        R.src = o.preview, R.onload = () => {
+          b.dataTransfer.setDragImage(R, 0, 0);
         };
       } else
-        f.dataTransfer.setDragImage(new Image(), 0, 0);
-      g(R), setTimeout(() => {
+        b.dataTransfer.setDragImage(new Image(), 0, 0);
+      g(w), setTimeout(() => {
         u([]), p(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
       }, 200);
     }
@@ -7145,9 +7003,9 @@ const BlockCard = ({
       "div",
       {
         onClick: a ? () => {
-        } : E,
+        } : y,
         draggable: h ? "true" : "false",
-        onDragStart: b,
+        onDragStart: f,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
@@ -7174,11 +7032,11 @@ const BlockCard = ({
       const d = await a(o);
       c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.uuid]: { loading: "complete", blocks: d || [] } }));
     })();
-  }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
+  }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), i = values(l).filter((S) => S.category === "custom"), c = a.find((S) => S.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [m, h] = useState("Hero"), g = get(p, m, []), y = useRef(null), { t: E } = useTranslation(), b = (S) => {
-    y.current && (clearTimeout(y.current), y.current = null), y.current = setTimeout(() => {
-      y.current && h(S);
+  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useRegisteredChaiBlocks(), i = values(l).filter((C) => C.category === "custom"), c = a.find((C) => C.uuid === n) || first(a), { data: d, isLoading: u } = useLibraryBlocks(c), p = groupBy([...d, ...i], "group"), [m, h] = useState("Hero"), g = get(p, m, []), E = useRef(null), { t: y } = useTranslation(), f = (C) => {
+    E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
+      E.current && h(C);
     }, 300);
   };
   if (u)
@@ -7186,30 +7044,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const f = filter(g, (S, R) => R % 2 === 0), k = filter(g, (S, R) => R % 2 === 1);
+  const b = filter(g, (C, w) => w % 2 === 0), v = filter(g, (C, w) => w % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: c == null ? void 0 : c.uuid, setLibrary: r, uiLibraries: a }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: y("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.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(p, (S, R) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (C, w) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => b(R),
-              onMouseLeave: () => clearTimeout(y.current),
-              onClick: () => h(R),
+              onMouseEnter: () => f(w),
+              onMouseLeave: () => clearTimeout(E.current),
+              onClick: () => h(w),
               className: cn(
                 "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",
-                R === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                w === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(E(R.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(y(w.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            R
+            w
           ))
         ) })
       ] })
@@ -7217,15 +7075,15 @@ const BlockCard = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => y.current ? clearTimeout(y.current) : null,
+        onMouseEnter: () => E.current ? clearTimeout(E.current) : null,
         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__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              f.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
+              b.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              k.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
+              v.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7731,12 +7589,12 @@ i18n.use(initReactI18next).init({
 const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
   const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (has(o, "blocks")) {
-      const E = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(E), r || null);
+      const y = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(y), r || null);
     } else
       d(o, r || null);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, g = useFeature("dnd"), { t: y } = useTranslation();
+  }, g = useFeature("dnd"), { t: E } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -7744,8 +7602,8 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
         disabled: n,
         onClick: h,
         type: "button",
-        onDragStart: (E) => {
-          E.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), E.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (y) => {
+          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
             p([]), m();
           }, 200);
         },
@@ -7753,14 +7611,14 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
         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(i || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(y(c || l)) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-xs", children: capitalize(E(c || l)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: y(c || l) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: E(c || l) }) })
   ] }) });
 }, DefaultChaiBlocks = ({ parentId: o, gridCols: n = "grid-cols-2" }) => {
-  const r = useChaiBlocks(), a = useBuilderProp("filterChaiBlock", () => !0), l = filter(r, a), i = groupBy(l, "category"), c = uniq(map(i.core, "group"));
+  const r = useRegisteredChaiBlocks(), a = useBuilderProp("filterChaiBlock", () => !0), l = filter(r, a), i = groupBy(l, "category"), c = uniq(map(i.core, "group"));
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ChaiBuilderBlocks, { gridCols: n, parentId: o, groups: c, blocks: i.core });
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, gridCols: a = "grid-cols-4" }) => {
   var d;
@@ -7925,19 +7783,19 @@ function QuickPrompts({ onClick: o }) {
 const AIUserPrompt = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, u] = useState(!0), [p, m] = useState(), h = useRef(null), g = useRef(null);
   useEffect(() => {
-    var E;
-    (E = h.current) == null || E.focus();
+    var y;
+    (y = h.current) == null || y.focus();
   }, []);
-  const y = (E) => {
-    const { usage: b } = E || {};
-    !l && b && m(b), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
+  const E = (y) => {
+    const { usage: f } = y || {};
+    !l && f && m(f), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         onClick: () => u(!d),
-        className: "flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline",
+        className: "flex cursor-pointer items-center justify-between border-t border-border py-2 text-sm font-medium hover:underline",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: n("Ask AI") }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (d ? "rotate-180" : "") }) })
@@ -7950,12 +7808,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: h,
           value: i,
-          onChange: (E) => c(E.target.value),
+          onChange: (y) => c(y.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (E) => {
-            E.key === "Enter" && (E.preventDefault(), g.current && clearTimeout(g.current), m(void 0), r("content", o, i, y));
+          onKeyDown: (y) => {
+            y.key === "Enter" && (y.preventDefault(), g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E));
           }
         }
       ),
@@ -7965,7 +7823,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), m(void 0), r("content", o, i, y);
+              g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E);
             },
             variant: "default",
             className: "w-fit",
@@ -7997,8 +7855,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (E) => {
-            g.current && clearTimeout(g.current), m(void 0), r("content", o, E, y);
+          onClick: (y) => {
+            g.current && clearTimeout(g.current), m(void 0), r("content", o, y, E);
           }
         }
       )
@@ -8012,15 +7870,15 @@ const AIUserPrompt = ({ blockId: o }) => {
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const y = async () => {
+  const E = async () => {
     try {
       d(!0), p(null), await i(r), h({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
       }), g.current.click();
-    } catch (E) {
-      p(E);
+    } catch (y) {
+      p(y);
     } finally {
       d(!1);
     }
@@ -8028,25 +7886,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (E) => {
-        m(E !== "");
+      onValueChange: (y) => {
+        m(y !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-b border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-bold text-muted-foreground", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (E) => a(E.target.value),
+              onChange: (y) => a(y.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (E) => {
-                E.key === "Enter" && (E.preventDefault(), y());
+              onKeyDown: (y) => {
+                y.key === "Enter" && (y.preventDefault(), E());
               }
             }
           ),
@@ -8058,7 +7916,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => y(),
+                onClick: () => E(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8087,7 +7945,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), y();
+                        a(""), E();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8103,53 +7961,53 @@ const AIUserPrompt = ({ blockId: o }) => {
   );
 }, AskAI = () => {
   const [o] = useSelectedBlockIds();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar mt-2 flex-1 overflow-y-auto", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(AISetContext, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, m] = useState(null), [h, g] = useState(""), y = useRef(null), E = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, m] = useState(null), [h, g] = useState(""), E = useRef(null), y = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const b = () => {
+  const f = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const w = [...a, { key: i, value: d }];
-      r(w), l(a), c(""), u(""), g("");
+      const R = [...a, { key: i, value: d }];
+      r(R), l(a), c(""), u(""), g("");
     }
-  }, f = (w) => {
-    const A = a.filter((I, T) => T !== w);
+  }, b = (R) => {
+    const A = a.filter((I, T) => T !== R);
     r(A), l(A);
-  }, k = (w) => {
-    m(w), c(a[w].key), u(a[w].value);
-  }, S = () => {
+  }, v = (R) => {
+    m(R), c(a[R].key), u(a[R].value);
+  }, C = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (p !== null && i) {
-      const w = [...a];
-      w[p] = { key: i, value: d }, r(w), l(w), m(null), c(""), u(""), g("");
+      const R = [...a];
+      R[p] = { key: i, value: d }, r(R), l(R), m(null), c(""), u(""), g("");
     }
-  }, R = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? S() : b());
+  }, w = (R) => {
+    R.key === "Enter" && !R.shiftKey && (R.preventDefault(), p !== null ? C() : f());
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (w) => {
-          w.preventDefault(), p !== null ? S() : b();
+        onSubmit: (R) => {
+          R.preventDefault(), p !== null ? C() : f();
         },
         className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-y-1", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrKey", className: "text-xs", children: "Key" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrKey", className: "text-[11px] font-normal leading-tight text-slate-600", children: "Key" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input$1,
                 {
@@ -8157,16 +8015,16 @@ const AIUserPrompt = ({ blockId: o }) => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: y,
+                  ref: E,
                   value: i,
-                  onChange: (w) => c(w.target.value),
-                  placeholder: "Key",
-                  className: "h-8 text-sm"
+                  onChange: (R) => c(R.target.value),
+                  placeholder: "Enter Key",
+                  className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrValue", className: "text-xs", children: "Value" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Textarea,
                 {
@@ -8175,35 +8033,39 @@ const AIUserPrompt = ({ blockId: o }) => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: E,
+                  ref: y,
                   value: d,
-                  onChange: (w) => u(w.target.value),
-                  onKeyDown: R,
-                  placeholder: "Value",
-                  className: "bg-background text-sm"
+                  onChange: (R) => u(R.target.value),
+                  onKeyDown: w,
+                  placeholder: "Enter Value",
+                  className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", variant: "secondary", className: "h-8 w-fit text-sm", children: p !== null ? "Save" : "Add" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              type: "submit",
+              disabled: !i.length || !d.length,
+              variant: "default",
+              size: "sm",
+              className: "h-8 w-24 text-xs",
+              children: p !== null ? "Save" : "Add"
+            }
+          ) }),
           h && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: h })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((w, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded bg-muted p-1.5 text-sm", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mr-2 flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate font-semibold", children: w.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: w.value.toString() })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((R, A) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: R.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: R.value.toString() })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(A), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Edit attribute" })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => f(A), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
-        ] })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(A), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => b(A), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
       ] })
     ] }, A)) })
   ] });
@@ -8211,13 +8073,13 @@ const AIUserPrompt = ({ blockId: o }) => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
     const d = map(get(o, i), (u, p) => ({ key: p, value: u }));
-    isEmpty(d) ? r([]) : r(d);
+    isEmpty$1(d) ? r([]) : r(d);
   }, [get(o, i)]);
   const c = React.useCallback(
     (d = []) => {
       const u = {};
       forEach(d, (p) => {
-        isEmpty(p.key) || set(u, p.key, p.value);
+        isEmpty$1(p.key) || set(u, p.key, p.value);
       }), l([get(o, "_id")], { [i]: u });
     },
     [o, l, i]
@@ -8438,12 +8300,12 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsxRuntimeExports.
 };
 function BlockAttributesToggle() {
   const { t: o } = useTranslation(), [n, r] = useState(!0), [a] = useSelectedStylingBlocks();
-  return isEmpty(a) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return isEmpty$1(a) ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         onClick: () => r(!n),
-        className: "flex cursor-pointer items-center justify-between border-b border-border py-2 text-sm font-bold text-muted-foreground hover:underline",
+        className: "flex cursor-pointer items-center justify-between border-t border-border py-3 text-xs font-medium hover:underline",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o("Attributes") }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 text-gray-500 " + (n ? "rotate-180" : "") }) })
@@ -8458,14 +8320,30 @@ const SettingsPanel = () => {
   return isNull(o) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 rounded-xl p-4 text-muted-foreground", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(MixerHorizontalIcon, { className: "mx-auto text-3xl" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { children: n("Please select a block to edit settings or styles") })
-  ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex max-h-full w-full flex-col", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockSettings, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyling, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(BlockAttributesToggle, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+  ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "settings", className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { className: "grid h-auto w-full grid-cols-2 p-1 py-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "settings", className: "text-xs", children: "Settings" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "styles", className: "text-xs", children: "Styles" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "settings", className: "no-scrollbar h-full max-h-min overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(BlockSettings, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      TabsContent,
+      {
+        value: "styles",
+        className: "no-scrollbar h-full max-h-min max-w-full overflow-y-auto overflow-x-hidden",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyling, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(BlockAttributesToggle, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
+        ]
+      }
+    )
   ] }) });
 }, SettingsPanel$1 = SettingsPanel;
 function LayoutCard({ disabled: o = !1, description: n, title: r, selected: a, onSelect: l, children: i }) {
@@ -8559,7 +8437,7 @@ const ChooseLayout = ({ open: o, close: n }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-7bGqLcSJ.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
+}, TopBar = lazy(() => import("./Topbar-700eX1kn.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {
@@ -8574,10 +8452,10 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = (y) => {
-    y.preventDefault();
-  }, u = (y) => {
-    n(o === y ? null : y);
+  const c = useBuilderProp("sideBarComponents.top", []), d = (E) => {
+    E.preventDefault();
+  }, u = (E) => {
+    n(o === E ? null : E);
   }, p = useSidebarMenuItems(), { t: m } = useTranslation(), h = [...p, ...c], g = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: g, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8589,19 +8467,19 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: h.map((y, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: h.map((E, y) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
-                    variant: o === E ? "default" : "ghost",
+                    variant: o === y ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(E),
-                    children: get(y, "icon", null)
+                    onClick: () => u(y),
+                    children: get(E, "icon", null)
                   },
-                  E
+                  y
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m(y.label) }) })
-              ] }, "button" + E)) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m(E.label) }) })
+              ] }, "button" + y)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -8631,14 +8509,14 @@ const RootLayout = () => {
                 initial: { width: 280 },
                 animate: { width: 280 },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-col p-3", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full flex-col overflow-hidden p-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
                     m("AI Assistant")
-                  ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                  ] }) }) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(Settings$1, { className: "h-4 w-4 rtl:ml-2" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
                       m("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -8651,11 +8529,8 @@ const RootLayout = () => {
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4 rtl:ml-2" })
                       }
                     )
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(EditIcon, { size: 16, className: "rtl:ml-2" }),
-                    m("Block Settings")
-                  ] }) }) }) }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel$1, {}) }) })
+                  ] }) : null }) }) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex max-h-full w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(AskAI, {}) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeConfigPanel, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel$1, {}) }) })
                 ] }) })
               }
             )
@@ -8691,7 +8566,7 @@ const RootLayout = () => {
 }, getParentNodeIds = (o, n) => {
   const r = [];
   let a = find(o, { _id: n }), l = get(a, "_parent", "");
-  for (; isString(l) && !isEmpty(l); )
+  for (; isString(l) && !isEmpty$1(l); )
     r.push(a == null ? void 0 : a._parent), a = find(o, { _id: l }), l = a == null ? void 0 : a._parent;
   return flatten(r);
 }, expandedIdsAtom = atom$1([]), useExpandTree = () => {
@@ -8758,9 +8633,9 @@ export {
   generateUUID as generateBlockId,
   getBlocksFromHTML,
   getClassValueAndUnit,
-  Qe as i18n,
+  Je as i18n,
   cn as mergeClasses,
-  Xe as registerChaiBlock,
+  Ze as registerChaiBlock,
   useAddBlock,
   useAddClassesToBlocks,
   useAskAi,
@@ -8802,7 +8677,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Ze as useTranslation,
+  Xe as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,