@chaibuilder/sdk 1.2.96 → 1.2.98

package/dist/{index-29Bt0qID.js → index-5aoq9X96.js}

@@ -1,14 +1,14 @@
-var W = Object.defineProperty;
-var G = (o, n, r) => n in o ? W(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var F = (o, n, r) => (G(o, typeof n != "symbol" ? n + "" : n, r), r);
+var z = Object.defineProperty;
+var W = (o, n, r) => n in o ? z(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
+var U = (o, n, r) => (W(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, useState, useMemo, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
 import { S as Skeleton, B as Button, C as ContextMenu, a as ContextMenuTrigger, b as ContextMenuContent, c as ContextMenuItem, T as Tooltip, d as TooltipTrigger, e as TooltipContent, f as Card, g as CardHeader, h as CardDescription, i as CardContent, L as Label, j as Textarea, k as CardFooter, D as Dialog, l as DialogTrigger, m as DialogContent, n as DialogHeader, o as DialogTitle, p as DialogDescription, q as DialogFooter, P as Popover, r as PopoverTrigger, s as PopoverContent, t as Command, u as CommandInput, v as CommandList, w as CommandEmpty, x as CommandGroup, y as CommandItem, z as Tabs, A as TabsList, E as TabsTrigger, F as TabsContent, G as Switch, H as Accordion, I as AccordionItem, J as AccordionTrigger, K as AccordionContent, M as useToast, N as Input$1, O as TooltipPortal, Q as DropdownMenu, R as DropdownMenuTrigger, U as DropdownMenuContent, V as ScrollArea, W as DropdownMenuLabel, X as DropdownMenuSeparator, Y as DropdownMenuGroup, Z as DropdownMenuItem, _ as DropdownMenuShortcut, $ as AlertDialog, a0 as AlertDialogContent, a1 as AlertDialogHeader, a2 as AlertDialogTitle, a3 as AlertDialogTrigger, a4 as AlertDialogDescription, a5 as AlertDialogFooter, a6 as AlertDialogCancel, a7 as AlertDialogAction, a8 as DropdownMenuCheckboxItem, a9 as HoverCard, aa as HoverCardTrigger, ab as HoverCardContent, ac as Separator, ad as Badge, ae as Select, af as SelectTrigger, ag as SelectValue, ah as SelectContent, ai as SelectItem, aj as TooltipProvider, ak as Toaster } from "./context-menu-9cWJcKdh.js";
 import { has, find, filter, flatten, map, omit, isString as isString$1, includes, without, get, compact, set, isEmpty, forIn, isObject as isObject$1, each, first, noop, keys, startsWith, range, values, flattenDeep, isNull, pick, sortBy, chunk, forEach, throttle, memoize, reverse, debounce, flatMapDeep, capitalize, last, startCase, truncate, isArray as isArray$1, split, toLower, cloneDeep, reject, nth, isNumber as isNumber$1, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, 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, f, y, h, c as cn, G as GenIcon } from "./iconBase-HBZkvN04.js";
-import { getBlockComponent, getChaiDataProviders, useGlobalStylingPresets, useChaiBlocks, syncBlocksWithDefaults } from "@chaibuilder/runtime";
+import { g as generateUUID, a as getBreakpointValue, y, s, h, c as cn, G as GenIcon } from "./iconBase-RFUjwZUN.js";
+import { getBlockComponent, useChaiBlocks, getChaiDataProviders, useGlobalStylingPresets, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { useTranslation, initReactI18next } from "react-i18next";
 import { g as getDefaultExportFromCjs, p as plugin } from "./plugin-ooqqxWRQ.js";
 import { useThrottledCallback, useResizeObserver, useDebouncedCallback, useIntervalEffect } from "@react-hookz/web";
@@ -89,278 +89,278 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   const o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new Map();
   let a, l, i;
   (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
-  const c = (j) => o.get(j), d = (j, k) => {
-    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(k);
-    const S = o.get(j);
-    if (o.set(j, k), r.has(j) || r.set(j, S), S && hasPromiseAtomValue(S)) {
-      const R = "v" in k ? k.v instanceof Promise ? k.v : Promise.resolve(k.v) : Promise.reject(k.e);
-      cancelPromise(S.v, R);
+  const c = (b) => o.get(b), d = (b, _) => {
+    (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(_);
+    const R = o.get(b);
+    if (o.set(b, _), r.has(b) || r.set(b, R), R && hasPromiseAtomValue(R)) {
+      const v = "v" in _ ? _.v instanceof Promise ? _.v : Promise.resolve(_.v) : Promise.reject(_.e);
+      cancelPromise(R.v, v);
     }
-  }, u = (j, k, S) => {
-    const R = /* @__PURE__ */ new Map();
-    let T = !1;
-    S.forEach((D, $) => {
-      !D && $ === j && (D = k), D ? (R.set($, D), k.d.get($) !== D && (T = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (T || k.d.size !== R.size) && (k.d = R);
-  }, p = (j, k, S) => {
-    const R = c(j), T = {
-      d: (R == null ? void 0 : R.d) || /* @__PURE__ */ new Map(),
-      v: k
+  }, u = (b, _, R) => {
+    const v = /* @__PURE__ */ new Map();
+    let I = !1;
+    R.forEach((L, P) => {
+      !L && P === b && (L = _), L ? (v.set(P, L), _.d.get(P) !== L && (I = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (I || _.d.size !== v.size) && (_.d = v);
+  }, p = (b, _, R) => {
+    const v = c(b), I = {
+      d: (v == null ? void 0 : v.d) || /* @__PURE__ */ new Map(),
+      v: _
     };
-    if (S && u(j, T, S), R && isEqualAtomValue(R, T) && R.d === T.d)
-      return R;
-    if (R && hasPromiseAtomValue(R) && hasPromiseAtomValue(T) && isEqualPromiseAtomValue(R, T)) {
-      if (R.d === T.d)
-        return R;
-      T.v = R.v;
+    if (R && u(b, I, R), v && isEqualAtomValue(v, I) && v.d === I.d)
+      return v;
+    if (v && hasPromiseAtomValue(v) && hasPromiseAtomValue(I) && isEqualPromiseAtomValue(v, I)) {
+      if (v.d === I.d)
+        return v;
+      I.v = v.v;
     }
-    return d(j, T), T;
-  }, g = (j, k, S, R) => {
-    if (isPromiseLike$2(k)) {
-      let T;
-      const D = new Promise(($, H) => {
-        let M = !1;
-        k.then(
-          (V) => {
-            if (!M) {
-              M = !0;
-              const O = c(j), U = p(
-                j,
-                D,
-                S
+    return d(b, I), I;
+  }, m = (b, _, R, v) => {
+    if (isPromiseLike$2(_)) {
+      let I;
+      const L = new Promise((P, V) => {
+        let $ = !1;
+        _.then(
+          (O) => {
+            if (!$) {
+              $ = !0;
+              const M = c(b), H = p(
+                b,
+                L,
+                R
               );
-              resolvePromise(D, V), $(V), (O == null ? void 0 : O.d) !== U.d && N(j, U, O == null ? void 0 : O.d);
+              resolvePromise(L, O), P(O), (M == null ? void 0 : M.d) !== H.d && N(b, H, M == null ? void 0 : M.d);
             }
           },
-          (V) => {
-            if (!M) {
-              M = !0;
-              const O = c(j), U = p(
-                j,
-                D,
-                S
+          (O) => {
+            if (!$) {
+              $ = !0;
+              const M = c(b), H = p(
+                b,
+                L,
+                R
               );
-              rejectPromise(D, V), H(V), (O == null ? void 0 : O.d) !== U.d && N(j, U, O == null ? void 0 : O.d);
+              rejectPromise(L, O), V(O), (M == null ? void 0 : M.d) !== H.d && N(b, H, M == null ? void 0 : M.d);
             }
           }
-        ), T = (V) => {
-          M || (M = !0, V.then(
-            (O) => resolvePromise(D, O),
-            (O) => rejectPromise(D, O)
-          ), $(V));
+        ), I = (O) => {
+          $ || ($ = !0, O.then(
+            (M) => resolvePromise(L, M),
+            (M) => rejectPromise(L, M)
+          ), P(O));
         };
       });
-      return D.orig = k, D.status = "pending", registerCancelPromise(D, ($) => {
-        $ && T($), R == null || R();
-      }), p(j, D, S);
+      return L.orig = _, L.status = "pending", registerCancelPromise(L, (P) => {
+        P && I(P), v == null || v();
+      }), p(b, L, R);
     }
-    return p(j, k, S);
-  }, x = (j, k, S) => {
-    const R = c(j), T = {
-      d: (R == null ? void 0 : R.d) || /* @__PURE__ */ new Map(),
-      e: k
+    return p(b, _, R);
+  }, x = (b, _, R) => {
+    const v = c(b), I = {
+      d: (v == null ? void 0 : v.d) || /* @__PURE__ */ new Map(),
+      e: _
     };
-    return S && u(j, T, S), R && isEqualAtomError(R, T) && R.d === T.d ? R : (d(j, T), T);
-  }, m = (j) => {
-    const k = c(j);
-    if (k && (k.d.forEach((M, V) => {
-      V !== j && !n.has(V) && m(V);
-    }), Array.from(k.d).every(([M, V]) => {
-      const O = c(M);
-      return M === j || O === V || // TODO This is a hack, we should find a better solution.
-      O && !hasPromiseAtomValue(O) && isEqualAtomValue(O, V);
+    return R && u(b, I, R), v && isEqualAtomError(v, I) && v.d === I.d ? v : (d(b, I), I);
+  }, g = (b) => {
+    const _ = c(b);
+    if (_ && (_.d.forEach(($, O) => {
+      O !== b && !n.has(O) && g(O);
+    }), Array.from(_.d).every(([$, O]) => {
+      const M = c($);
+      return $ === b || M === O || // TODO This is a hack, we should find a better solution.
+      M && !hasPromiseAtomValue(M) && isEqualAtomValue(M, O);
     })))
-      return k;
-    const S = /* @__PURE__ */ new Map();
-    let R = !0;
-    const T = (M) => {
-      if (M === j) {
-        const O = c(M);
-        if (O)
-          return S.set(M, O), returnAtomValue(O);
-        if (hasInitialValue(M))
-          return S.set(M, void 0), M.init;
+      return _;
+    const R = /* @__PURE__ */ new Map();
+    let v = !0;
+    const I = ($) => {
+      if ($ === b) {
+        const M = c($);
+        if (M)
+          return R.set($, M), returnAtomValue(M);
+        if (hasInitialValue($))
+          return R.set($, void 0), $.init;
         throw new Error("no atom init");
       }
-      const V = m(M);
-      return S.set(M, V), returnAtomValue(V);
+      const O = g($);
+      return R.set($, O), returnAtomValue(O);
     };
-    let D, $;
-    const H = {
+    let L, P;
+    const V = {
       get signal() {
-        return D || (D = new AbortController()), D.signal;
+        return L || (L = new AbortController()), L.signal;
       },
       get setSelf() {
-        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(j) && console.warn("setSelf function cannot be used with read-only atom"), !$ && isActuallyWritableAtom(j) && ($ = (...M) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && R && console.warn("setSelf function cannot be called in sync"), !R)
-            return I(j, ...M);
-        }), $;
+        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(b) && console.warn("setSelf function cannot be used with read-only atom"), !P && isActuallyWritableAtom(b) && (P = (...$) => {
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && v && console.warn("setSelf function cannot be called in sync"), !v)
+            return B(b, ...$);
+        }), P;
       }
     };
     try {
-      const M = j.read(T, H);
-      return g(
-        j,
-        M,
-        S,
-        () => D == null ? void 0 : D.abort()
+      const $ = b.read(I, V);
+      return m(
+        b,
+        $,
+        R,
+        () => L == null ? void 0 : L.abort()
       );
-    } catch (M) {
-      return x(j, M, S);
+    } catch ($) {
+      return x(b, $, R);
     } finally {
-      R = !1;
+      v = !1;
     }
-  }, E = (j) => returnAtomValue(m(j)), b = (j) => {
-    let k = n.get(j);
-    return k || (k = w(j)), k;
-  }, _ = (j, k) => !k.l.size && (!k.t.size || k.t.size === 1 && k.t.has(j)), v = (j) => {
-    const k = n.get(j);
-    k && _(j, k) && A(j);
-  }, B = (j) => {
-    const k = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new WeakMap(), R = (D) => {
-      const $ = n.get(D);
-      $ == null || $.t.forEach((H) => {
-        H !== D && (k.set(
-          H,
-          (k.get(H) || /* @__PURE__ */ new Set()).add(D)
-        ), S.set(H, (S.get(H) || 0) + 1), R(H));
+  }, E = (b) => returnAtomValue(g(b)), f = (b) => {
+    let _ = n.get(b);
+    return _ || (_ = C(b)), _;
+  }, j = (b, _) => !_.l.size && (!_.t.size || _.t.size === 1 && _.t.has(b)), k = (b) => {
+    const _ = n.get(b);
+    _ && j(b, _) && w(b);
+  }, A = (b) => {
+    const _ = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), v = (L) => {
+      const P = n.get(L);
+      P == null || P.t.forEach((V) => {
+        V !== L && (_.set(
+          V,
+          (_.get(V) || /* @__PURE__ */ new Set()).add(L)
+        ), R.set(V, (R.get(V) || 0) + 1), v(V));
       });
     };
-    R(j);
-    const T = (D) => {
-      const $ = n.get(D);
-      $ == null || $.t.forEach((H) => {
-        var M;
-        if (H !== D) {
-          let V = S.get(H);
-          if (V && S.set(H, --V), !V) {
-            let O = !!((M = k.get(H)) != null && M.size);
-            if (O) {
-              const U = c(H), z = m(H);
-              O = !U || !isEqualAtomValue(U, z);
+    v(b);
+    const I = (L) => {
+      const P = n.get(L);
+      P == null || P.t.forEach((V) => {
+        var $;
+        if (V !== L) {
+          let O = R.get(V);
+          if (O && R.set(V, --O), !O) {
+            let M = !!(($ = _.get(V)) != null && $.size);
+            if (M) {
+              const H = c(V), F = g(V);
+              M = !H || !isEqualAtomValue(H, F);
             }
-            O || k.forEach((U) => U.delete(H));
+            M || _.forEach((H) => H.delete(V));
           }
-          T(H);
+          I(V);
         }
       });
     };
-    T(j);
-  }, C = (j, ...k) => {
-    let S = !0;
-    const R = ($) => returnAtomValue(m($)), T = ($, ...H) => {
-      let M;
-      if ($ === j) {
-        if (!hasInitialValue($))
+    I(b);
+  }, S = (b, ..._) => {
+    let R = !0;
+    const v = (P) => returnAtomValue(g(P)), I = (P, ...V) => {
+      let $;
+      if (P === b) {
+        if (!hasInitialValue(P))
           throw new Error("atom not writable");
-        const V = c($), O = g($, H[0]);
-        (!V || !isEqualAtomValue(V, O)) && B($);
+        const O = c(P), M = m(P, V[0]);
+        (!O || !isEqualAtomValue(O, M)) && A(P);
       } else
-        M = C($, ...H);
-      if (!S) {
-        const V = P();
+        $ = S(P, ...V);
+      if (!R) {
+        const O = D();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          (O) => O({ type: "async-write", flushed: V })
+          (M) => M({ type: "async-write", flushed: O })
         );
       }
-      return M;
-    }, D = j.write(R, T, ...k);
-    return S = !1, D;
-  }, I = (j, ...k) => {
-    const S = C(j, ...k), R = P();
+      return $;
+    }, L = b.write(v, I, ..._);
+    return R = !1, L;
+  }, B = (b, ..._) => {
+    const R = S(b, ..._), v = D();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (T) => T({ type: "write", flushed: R })
-    ), S;
-  }, w = (j, k) => {
-    const S = {
-      t: new Set(k && [k]),
+      (I) => I({ type: "write", flushed: v })
+    ), R;
+  }, C = (b, _) => {
+    const R = {
+      t: new Set(_ && [_]),
       l: /* @__PURE__ */ new Set()
     };
-    if (n.set(j, S), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(j), m(j).d.forEach((R, T) => {
-      const D = n.get(T);
-      D ? D.t.add(j) : T !== j && w(T, j);
-    }), m(j), isActuallyWritableAtom(j) && j.onMount) {
-      const R = j.onMount((...T) => I(j, ...T));
-      R && (S.u = R);
+    if (n.set(b, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(b), g(b).d.forEach((v, I) => {
+      const L = n.get(I);
+      L ? L.t.add(b) : I !== b && C(I, b);
+    }), g(b), isActuallyWritableAtom(b) && b.onMount) {
+      const v = b.onMount((...I) => B(b, ...I));
+      v && (R.u = v);
     }
-    return S;
-  }, A = (j) => {
-    var k;
-    const S = (k = n.get(j)) == null ? void 0 : k.u;
-    S && S(), n.delete(j), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(j);
-    const R = c(j);
-    R ? (hasPromiseAtomValue(R) && cancelPromise(R.v), R.d.forEach((T, D) => {
-      if (D !== j) {
-        const $ = n.get(D);
-        $ && ($.t.delete(j), _(D, $) && A(D));
+    return R;
+  }, w = (b) => {
+    var _;
+    const R = (_ = n.get(b)) == null ? void 0 : _.u;
+    R && R(), n.delete(b), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(b);
+    const v = c(b);
+    v ? (hasPromiseAtomValue(v) && cancelPromise(v.v), v.d.forEach((I, L) => {
+      if (L !== b) {
+        const P = n.get(L);
+        P && (P.t.delete(b), j(L, P) && w(L));
       }
-    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", j);
-  }, N = (j, k, S) => {
-    const R = new Set(k.d.keys());
-    S == null || S.forEach((T, D) => {
-      if (R.has(D)) {
-        R.delete(D);
+    })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", b);
+  }, N = (b, _, R) => {
+    const v = new Set(_.d.keys());
+    R == null || R.forEach((I, L) => {
+      if (v.has(L)) {
+        v.delete(L);
         return;
       }
-      const $ = n.get(D);
-      $ && ($.t.delete(j), _(D, $) && A(D));
-    }), R.forEach((T) => {
-      const D = n.get(T);
-      D ? D.t.add(j) : n.has(j) && w(T, j);
+      const P = n.get(L);
+      P && (P.t.delete(b), j(L, P) && w(L));
+    }), v.forEach((I) => {
+      const L = n.get(I);
+      L ? L.t.add(b) : n.has(b) && C(I, b);
     });
-  }, P = () => {
-    let j;
-    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (j = /* @__PURE__ */ new Set()); r.size; ) {
-      const k = Array.from(r);
-      r.clear(), k.forEach(([S, R]) => {
-        const T = c(S);
-        if (T) {
-          T.d !== (R == null ? void 0 : R.d) && N(S, T, R == null ? void 0 : R.d);
-          const D = n.get(S);
-          D && !// TODO This seems pretty hacky. Hope to fix it.
+  }, D = () => {
+    let b;
+    for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (b = /* @__PURE__ */ new Set()); r.size; ) {
+      const _ = Array.from(r);
+      r.clear(), _.forEach(([R, v]) => {
+        const I = c(R);
+        if (I) {
+          I.d !== (v == null ? void 0 : v.d) && N(R, I, v == null ? void 0 : v.d);
+          const L = n.get(R);
+          L && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (R && !hasPromiseAtomValue(R) && (isEqualAtomValue(R, T) || isEqualAtomError(R, T))) && (D.l.forEach(($) => $()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && j.add(S));
+          (v && !hasPromiseAtomValue(v) && (isEqualAtomValue(v, I) || isEqualAtomError(v, I))) && (L.l.forEach((P) => P()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && b.add(R));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
     }
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
-      return a.forEach((k) => k("state")), j;
-  }, L = (j, k) => {
-    const S = b(j), R = P(), T = S.l;
-    return T.add(k), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("sub")), l.forEach(
-      (D) => D({ type: "sub", flushed: R })
+      return a.forEach((_) => _("state")), b;
+  }, T = (b, _) => {
+    const R = f(b), v = D(), I = R.l;
+    return I.add(_), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("sub")), l.forEach(
+      (L) => L({ type: "sub", flushed: v })
     )), () => {
-      T.delete(k), v(j), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((D) => D("unsub")), l.forEach((D) => D({ type: "unsub" })));
+      I.delete(_), k(b), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((L) => L("unsub")), l.forEach((L) => L({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
     get: E,
-    set: I,
-    sub: L,
+    set: B,
+    sub: T,
     // store dev methods (these are tentative and subject to change without notice)
-    dev_subscribe_store: (j, k) => k !== 2 ? (console.warn(
+    dev_subscribe_store: (b, _) => _ !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
-    ), a.add(j), () => {
-      a.delete(j);
-    }) : (l.add(j), () => {
-      l.delete(j);
+    ), a.add(b), () => {
+      a.delete(b);
+    }) : (l.add(b), () => {
+      l.delete(b);
     }),
     dev_get_mounted_atoms: () => i.values(),
-    dev_get_atom_state: (j) => o.get(j),
-    dev_get_mounted: (j) => n.get(j),
-    dev_restore_atoms: (j) => {
-      for (const [S, R] of j)
-        hasInitialValue(S) && (g(S, R), B(S));
-      const k = P();
+    dev_get_atom_state: (b) => o.get(b),
+    dev_get_mounted: (b) => n.get(b),
+    dev_restore_atoms: (b) => {
+      for (const [R, v] of b)
+        hasInitialValue(R) && (m(R, v), A(R));
+      const _ = D();
       l.forEach(
-        (S) => S({ type: "restore", flushed: k })
+        (R) => R({ type: "restore", flushed: _ })
       );
     }
   } : {
     get: E,
-    set: I,
-    sub: L
+    set: B,
+    sub: T
   };
 };
 let defaultStore;
@@ -377,37 +377,37 @@ function splitAtom(o, n) {
         let u = r.get(c);
         if (u)
           return u;
-        const p = d && r.get(d), g = [], x = [];
-        return c.forEach((m, E) => {
-          const b = n ? n(m) : E;
-          x[E] = b;
-          const _ = p && p.atomList[p.keyList.indexOf(b)];
-          if (_) {
-            g[E] = _;
+        const p = d && r.get(d), m = [], x = [];
+        return c.forEach((g, E) => {
+          const f = n ? n(g) : E;
+          x[E] = f;
+          const j = p && p.atomList[p.keyList.indexOf(f)];
+          if (j) {
+            m[E] = j;
             return;
           }
-          const v = (C) => {
-            const I = C(l), w = C(o), N = a(w, I == null ? void 0 : I.arr).keyList.indexOf(b);
-            if (N < 0 || N >= w.length) {
-              const P = c[a(c).keyList.indexOf(b)];
-              if (P)
-                return P;
+          const k = (S) => {
+            const B = S(l), C = S(o), N = a(C, B == null ? void 0 : B.arr).keyList.indexOf(f);
+            if (N < 0 || N >= C.length) {
+              const D = c[a(c).keyList.indexOf(f)];
+              if (D)
+                return D;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return w[N];
-          }, B = (C, I, w) => {
-            const A = C(l), N = C(o), L = a(N, A == null ? void 0 : A.arr).keyList.indexOf(b);
-            if (L < 0 || L >= N.length)
+            return C[N];
+          }, A = (S, B, C) => {
+            const w = S(l), N = S(o), T = a(N, w == null ? void 0 : w.arr).keyList.indexOf(f);
+            if (T < 0 || T >= N.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const j = isFunction(w) ? w(N[L]) : w;
-            I(o, [
-              ...N.slice(0, L),
-              j,
-              ...N.slice(L + 1)
+            const b = isFunction(C) ? C(N[T]) : C;
+            B(o, [
+              ...N.slice(0, T),
+              b,
+              ...N.slice(T + 1)
             ]);
           };
-          g[E] = isWritable(o) ? atom(v, B) : atom(v);
-        }), p && p.keyList.length === x.length && p.keyList.every((m, E) => m === x[E]) ? u = p : u = { arr: c, atomList: g, keyList: x }, r.set(c, u), u;
+          m[E] = isWritable(o) ? atom(k, A) : atom(k);
+        }), p && p.keyList.length === x.length && p.keyList.every((g, E) => g === x[E]) ? u = p : u = { arr: c, atomList: m, keyList: x }, r.set(c, u), u;
       }, l = atom((c) => {
         const d = c(l), u = c(o);
         return a(u, d == null ? void 0 : d.arr);
@@ -420,10 +420,10 @@ function splitAtom(o, n) {
             case "remove": {
               const p = c(i).indexOf(u.atom);
               if (p >= 0) {
-                const g = c(o);
+                const m = c(o);
                 d(o, [
-                  ...g.slice(0, p),
-                  ...g.slice(p + 1)
+                  ...m.slice(0, p),
+                  ...m.slice(p + 1)
                 ]);
               }
               break;
@@ -431,28 +431,28 @@ function splitAtom(o, n) {
             case "insert": {
               const p = u.before ? c(i).indexOf(u.before) : c(i).length;
               if (p >= 0) {
-                const g = c(o);
+                const m = c(o);
                 d(o, [
-                  ...g.slice(0, p),
+                  ...m.slice(0, p),
                   u.value,
-                  ...g.slice(p)
+                  ...m.slice(p)
                 ]);
               }
               break;
             }
             case "move": {
-              const p = c(i).indexOf(u.atom), g = u.before ? c(i).indexOf(u.before) : c(i).length;
-              if (p >= 0 && g >= 0) {
+              const p = c(i).indexOf(u.atom), m = u.before ? c(i).indexOf(u.before) : c(i).length;
+              if (p >= 0 && m >= 0) {
                 const x = c(o);
-                p < g ? d(o, [
+                p < m ? d(o, [
                   ...x.slice(0, p),
-                  ...x.slice(p + 1, g),
+                  ...x.slice(p + 1, m),
                   x[p],
-                  ...x.slice(g)
+                  ...x.slice(m)
                 ]) : d(o, [
-                  ...x.slice(0, g),
+                  ...x.slice(0, m),
                   x[p],
-                  ...x.slice(g, p),
+                  ...x.slice(m, p),
                   ...x.slice(p + 1)
                 ]);
               }
@@ -473,14 +473,14 @@ function createJSONStorage(o) {
   const a = {
     getItem: (l, i) => {
       var c, d;
-      const u = (g) => {
-        if (g = g || "", n !== g) {
+      const u = (m) => {
+        if (m = m || "", n !== m) {
           try {
-            r = JSON.parse(g);
+            r = JSON.parse(m);
           } catch {
             return i;
           }
-          n = g;
+          n = m;
         }
         return r;
       }, p = (d = (c = o()) == null ? void 0 : c.getItem(l)) != null ? d : null;
@@ -529,8 +529,8 @@ function atomWithStorage(o, n, r = defaultStorage, a) {
   }, atom(
     (d) => d(i),
     (d, u, p) => {
-      const g = typeof p == "function" ? p(d(i)) : p;
-      return g === RESET ? (u(i, n), r.removeItem(o)) : g instanceof Promise ? g.then((x) => (u(i, x), r.setItem(o, x))) : (u(i, g), r.setItem(o, g));
+      const m = typeof p == "function" ? p(d(i)) : p;
+      return m === RESET ? (u(i, n), r.removeItem(o)) : m instanceof Promise ? m.then((x) => (u(i, x), r.setItem(o, x))) : (u(i, m), r.setItem(o, m));
     }
   );
 }
@@ -555,8 +555,8 @@ const StoreContext = createContext(void 0), useStore = (o) => {
 function useAtomValue(o, n) {
   const r = useStore(n), [[a, l, i], c] = useReducer(
     (p) => {
-      const g = r.get(o);
-      return Object.is(p[0], g) && p[1] === r && p[2] === o ? p : [g, r, o];
+      const m = r.get(o);
+      return Object.is(p[0], m) && p[1] === r && p[2] === o ? p : [m, r, o];
     },
     void 0,
     () => [r.get(o), r, o]
@@ -640,8 +640,8 @@ const getSlots = (o) => {
   return map(i, (c) => {
     const d = c, u = getSlots(d);
     return Object.keys(u).length > 0 && Object.keys(u).forEach((p) => {
-      const g = find(i, { oldId: u[p].replace("slot:", "") });
-      d[p] = `slot:${g._id}`;
+      const m = find(i, { oldId: u[p].replace("slot:", "") });
+      d[p] = `slot:${m._id}`;
     }), omit(d, ["global", "oldId"]);
   });
 }, presentBlocksAtom = atom$1([]);
@@ -759,8 +759,8 @@ const useSelectedBlocksDisplayChild = () => ({
         const p = r[u];
         if (includes(["slot", "styles"], p.type))
           return;
-        const g = u;
-        l.properties[g] = getBlockJSONFromSchemas(p, n);
+        const m = u;
+        l.properties[m] = getBlockJSONFromSchemas(p, n);
       }), l;
     case "list":
       const { itemProperties: i, title: c } = o, d = {
@@ -775,8 +775,8 @@ const useSelectedBlocksDisplayChild = () => ({
         const p = i[u];
         if (includes(["slot", "styles"], p.type))
           return;
-        const g = u;
-        d.items.properties[g] = getBlockJSONFromSchemas(p, n), set(d.items, "title", get(p, "itemTitle", `${n(c)} item`));
+        const m = u;
+        d.items.properties[m] = getBlockJSONFromSchemas(p, n), set(d.items, "title", get(p, "itemTitle", `${n(c)} item`));
       }), d;
     default:
       return {};
@@ -829,8 +829,8 @@ var undomanager = { exports: {} };
     }
     let r = function() {
       let a = [], l = -1, i = 0, c = !1, d;
-      function u(p, g) {
-        return !p || typeof p[g] != "function" ? this : (c = !0, p[g](), c = !1, this);
+      function u(p, m) {
+        return !p || typeof p[m] != "function" ? this : (c = !0, p[m](), c = !1, this);
       }
       return {
         /**
@@ -857,8 +857,8 @@ var undomanager = { exports: {} };
           let p = a[l];
           if (!p)
             return this;
-          const g = p.groupId;
-          for (; p.groupId === g && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
+          const m = p.groupId;
+          for (; p.groupId === m && (u(p, "undo"), l -= 1, p = a[l], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -869,8 +869,8 @@ var undomanager = { exports: {} };
           let p = a[l + 1];
           if (!p)
             return this;
-          const g = p.groupId;
-          for (; p.groupId === g && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
+          const m = p.groupId;
+          for (; p.groupId === m && (u(p, "redo"), l += 1, p = a[l + 1], !(!p || !p.groupId)); )
             ;
           return d && d(), this;
         },
@@ -901,7 +901,7 @@ var undomanager = { exports: {} };
          * @returns {array}
          */
         getCommands: function(p) {
-          return p ? a.filter((g) => g.groupId === p) : a;
+          return p ? a.filter((m) => m.groupId === p) : a;
         },
         /**
          * Returns the index of the actions list.
@@ -1191,102 +1191,102 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, _, v) => {
-      const B = map(b, (I) => {
-        const A = n.find((L) => L._id === I)._parent || null, P = n.filter((L) => A ? L._parent === A : !L._parent).map((L) => L._id).indexOf(I);
-        return { _id: I, oldParent: A, oldPosition: P };
-      }), C = B.find(({ _id: I }) => I === b[0]);
-      C && C.oldParent === _ && C.oldPosition === v || (i(b, _, v), o({
-        undo: () => each(B, ({ _id: I, oldParent: w, oldPosition: A }) => {
-          i([I], w, A);
+    moveBlocks: (f, j, k) => {
+      const A = map(f, (B) => {
+        const w = n.find((T) => T._id === B)._parent || null, D = n.filter((T) => w ? T._parent === w : !T._parent).map((T) => T._id).indexOf(B);
+        return { _id: B, oldParent: w, oldPosition: D };
+      }), S = A.find(({ _id: B }) => B === f[0]);
+      S && S.oldParent === j && S.oldPosition === k || (i(f, j, k), o({
+        undo: () => each(A, ({ _id: B, oldParent: C, oldPosition: w }) => {
+          i([B], C, w);
         }),
-        redo: () => i(b, _, v)
+        redo: () => i(f, j, k)
       }));
     },
-    addBlocks: (b, _, v) => {
-      a(b, _, v), o({
-        undo: () => l(map(b, "_id")),
-        redo: () => a(b, _, v)
+    addBlocks: (f, j, k) => {
+      a(f, j, k), o({
+        undo: () => l(map(f, "_id")),
+        redo: () => a(f, j, k)
       });
     },
-    removeBlocks: (b) => {
-      var C;
-      const _ = (C = first(b)) == null ? void 0 : C._parent, B = n.filter((I) => _ ? I._parent === _ : !I._parent).indexOf(first(b));
-      l(map(b, "_id")), o({
-        undo: () => a(b, _, B),
-        redo: () => l(map(b, "_id"))
+    removeBlocks: (f) => {
+      var S;
+      const j = (S = first(f)) == null ? void 0 : S._parent, A = n.filter((B) => j ? B._parent === j : !B._parent).indexOf(first(f));
+      l(map(f, "_id")), o({
+        undo: () => a(f, j, A),
+        redo: () => l(map(f, "_id"))
       });
     },
-    updateBlocks: (b, _, v) => {
-      let B = [];
-      if (v)
-        B = map(b, (C) => ({ _id: C, ...v }));
+    updateBlocks: (f, j, k) => {
+      let A = [];
+      if (k)
+        A = map(f, (S) => ({ _id: S, ...k }));
       else {
-        const C = keys(_);
-        B = map(b, (I) => {
-          const w = n.find((N) => N._id === I), A = { _id: I };
-          return each(C, (N) => A[N] = w[N]), A;
+        const S = keys(j);
+        A = map(f, (B) => {
+          const C = n.find((N) => N._id === B), w = { _id: B };
+          return each(S, (N) => w[N] = C[N]), w;
         });
       }
-      c(map(b, (C) => ({ _id: C, ..._ }))), o({
-        undo: () => c(B),
-        redo: () => c(map(b, (C) => ({ _id: C, ..._ })))
+      c(map(f, (S) => ({ _id: S, ...j }))), o({
+        undo: () => c(A),
+        redo: () => c(map(f, (S) => ({ _id: S, ...j })))
       });
     },
-    updateBlocksRuntime: (b, _) => {
-      c(map(b, (v) => ({ _id: v, ..._ })));
+    updateBlocksRuntime: (f, j) => {
+      c(map(f, (k) => ({ _id: k, ...j })));
     },
-    setNewBlocks: (b) => {
-      r(b), o({
+    setNewBlocks: (f) => {
+      r(f), o({
         undo: () => r(n),
-        redo: () => r(b)
+        redo: () => r(f)
       });
     },
-    updateMultipleBlocksProps: (b) => {
-      let _ = [];
-      _ = map(b, (v) => {
-        const B = keys(v), C = n.find((w) => w._id === v._id), I = {};
-        return each(B, (w) => I[w] = C[w]), I;
-      }), c(b), o({
-        undo: () => c(_),
-        redo: () => c(b)
+    updateMultipleBlocksProps: (f) => {
+      let j = [];
+      j = map(f, (k) => {
+        const A = keys(k), S = n.find((C) => C._id === k._id), B = {};
+        return each(A, (C) => B[C] = S[C]), B;
+      }), c(f), o({
+        undo: () => c(j),
+        redo: () => c(f)
       });
     }
   };
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var m;
+      var g;
       for (let E = 0; E < i.length; E++) {
-        const { _id: b } = i[E];
+        const { _id: f } = i[E];
         i[E]._id = generateUUID();
-        const _ = filter(i, { _parent: b });
-        for (let v = 0; v < _.length; v++)
-          _[v]._parent = i[E]._id;
+        const j = filter(i, { _parent: f });
+        for (let k = 0; k < j.length; k++)
+          j[k]._parent = i[E]._id;
       }
       const u = first(i);
-      let p, g;
-      return c && (p = find(o, { _id: c }), i[0]._parent = c, g = c), !(p ? canAcceptChildBlock(p == null ? void 0 : p._type, u._type) : !0) && p && (i[0]._parent = p._parent, g = p._parent), r(i, g, d), n([(m = first(i)) == null ? void 0 : m._id]), 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]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const v = i.blocks;
-        return a(v, c, d);
+        const k = i.blocks;
+        return a(k, c, d);
       }
-      const u = generateUUID(), p = getBlockDefaultProps(i.props), g = [];
-      forIn(p, (v, B) => {
-        if (startsWith(v, SLOT_KEY)) {
-          const C = v.replace(SLOT_KEY, "");
-          g.push({
-            _id: C,
+      const u = generateUUID(), p = getBlockDefaultProps(i.props), m = [];
+      forIn(p, (k, A) => {
+        if (startsWith(k, SLOT_KEY)) {
+          const S = k.replace(SLOT_KEY, "");
+          m.push({
+            _id: S,
             _type: "Slot",
             _parent: u,
-            _name: i.props[B].name,
-            _styles: i.props[B].styles,
-            _emptyStyles: i.props[B].emptyStyles
+            _name: i.props[A].name,
+            _styles: i.props[A].styles,
+            _emptyStyles: i.props[A].emptyStyles
           });
         }
       });
@@ -1295,10 +1295,10 @@ const useBlocksStoreManager = () => {
         _id: u,
         ...p
       };
-      let m, E;
-      c && (m = find(o, { _id: c }), x._parent = c, E = c), !canAcceptChildBlock(m == null ? void 0 : m._type, x._type) && m && (x._parent = m._parent, E = m._parent);
-      const _ = [x, ...g];
-      return r(_, E, d), n([x._id]), x;
+      let g, E;
+      c && (g = find(o, { _id: c }), x._parent = c, E = c), !canAcceptChildBlock(g == null ? void 0 : g._type, x._type) && g && (x._parent = g._parent, E = g._parent);
+      const j = [x, ...m];
+      return r(j, E, d), n([x._id]), x;
     },
     [a, o, n]
   ), addPredefinedBlock: a };
@@ -2406,18 +2406,18 @@ function getNewClasses(o = "", n = "", r = []) {
   );
   const i = [], c = [];
   each(r, (p) => {
-    const g = constructClassObject(p), x = find(a, pick(g, ["dark", "mq", "mod", "property"]));
+    const m = constructClassObject(p), x = find(a, pick(m, ["dark", "mq", "mod", "property"]));
     if (x && (a = filter(
       a,
-      (m) => m.fullCls !== (x == null ? void 0 : x.fullCls)
-    )), i.push(g), g.mq === "xs" && !g.dark && g.mod === "" && (l = filter(l, (m) => m.property !== g.property)), getBelongsToForClass(a, g) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, g.property)) {
-      const m = find(l, pick(g, ["property"]));
+      (g) => g.fullCls !== (x == null ? void 0 : x.fullCls)
+    )), i.push(m), m.mq === "xs" && !m.dark && m.mod === "" && (l = filter(l, (g) => g.property !== m.property)), getBelongsToForClass(a, m) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, m.property)) {
+      const g = find(l, pick(m, ["property"]));
       x && (l = filter(
         l,
-        (E) => E.fullCls !== (m == null ? void 0 : m.fullCls)
+        (E) => E.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
-        ...g,
-        fullCls: g.cls,
+        ...m,
+        fullCls: m.cls,
         mq: "xs"
       });
     }
@@ -2445,10 +2445,10 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: g } = getSplitClasses$1(u);
+    const d = o(c), u = get(d, i.prop, `${STYLES_KEY},`), { baseClasses: p, classes: m } = getSplitClasses$1(u);
     return {
       ids: [d._id],
-      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(g, p, a)}` }
+      props: { [i.prop]: `${STYLES_KEY}${getNewClasses(m, p, a)}` }
     };
   });
 }), useAddClassesToBlocks = () => {
@@ -2497,13 +2497,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((m) => m._id === c);
+        const d = o.find((g) => g._id === c);
         l || (l = d._parent);
-        const g = filter(
+        const m = filter(
           o,
-          (m) => isString$1(l) ? m._parent === l : !d._parent
+          (g) => isString$1(l) ? g._parent === l : !d._parent
         ).indexOf(d) + 1, x = getDuplicatedBlocks(o, c, l);
-        r(x, l, g), i.push(get(x, "0._id", ""));
+        r(x, l, m), i.push(get(x, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2566,19 +2566,19 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   );
   return map(i, (c) => {
     const d = o(c), u = a;
-    let { classes: p, baseClasses: g } = getSplitClasses(get(d, l.prop, "styles:,"));
+    let { classes: p, baseClasses: m } = getSplitClasses(get(d, l.prop, "styles:,"));
     return each(u, (x) => {
-      const m = x.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${m}($| )`, "g");
+      const g = x.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), E = new RegExp(`(^| )${g}($| )`, "g");
       p = p.replace(E, " ").replace(/  +/g, " ").trim();
-      const b = first(x.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], b) && u.push(x.split(":").pop().trim());
+      const f = first(x.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], f) && u.push(x.split(":").pop().trim());
     }), each(u, (x) => {
-      const m = new RegExp(`(^| )${x.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
-      g = g.replace(m, " ").replace(/  +/g, " ").trim();
+      const g = new RegExp(`(^| )${x.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
+      m = m.replace(g, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${g},${p}`
+        [l.prop]: `${STYLES_KEY}${m},${p}`
       }
     };
   });
@@ -2655,7 +2655,7 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
           let u = "";
           o([n], { [i]: "" });
           for (let p = 0; p < d.length; p++)
-            u += d[p].join(""), o([n], { [i]: u }), await new Promise((g) => setTimeout(g, a));
+            u += d[p].join(""), o([n], { [i]: u }), await new Promise((m) => setTimeout(m, a));
         }
       }
     },
@@ -2841,10 +2841,10 @@ const globalBlocksStoreAtom = atom({}), globalBlocksLoadingStateAtom = atom({}),
     if (c < n) {
       const u = parseFloat((c / n).toFixed(2).toString());
       let p = {};
-      const g = d * u, x = c * u;
+      const m = d * u, x = c * u;
       d && (p = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (d - g) / g * 100 + "%",
+        height: 100 + (d - m) / m * 100 + "%",
         width: 100 + (c - x) / x * 100 + "%"
       }), l({
         position: "relative",
@@ -2877,7 +2877,7 @@ class Content extends Component {
     return Children.only(this.props.children);
   }
 }
-F(Content, "propTypes", {
+U(Content, "propTypes", {
   children: PropTypes.element.isRequired,
   contentDidMount: PropTypes.func.isRequired,
   contentDidUpdate: PropTypes.func.isRequired
@@ -2885,17 +2885,17 @@ F(Content, "propTypes", {
 class Frame extends Component {
   constructor(r, a) {
     super(r, a);
-    F(this, "setRef", (r) => {
+    U(this, "setRef", (r) => {
       this.nodeRef.current = r;
       const { forwardedRef: a } = this.props;
       typeof a == "function" ? a(r) : a && (a.current = r);
     });
-    F(this, "handleLoad", () => {
+    U(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(() => {
+    U(this, "loadCheck", () => setInterval(() => {
       this.handleLoad();
     }, 500));
     this._isMounted = !1, this.nodeRef = React__default.createRef(), this.state = { iframeLoaded: !1 };
@@ -2936,7 +2936,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", {
+U(Frame, "propTypes", {
   style: PropTypes.object,
   // eslint-disable-line
   head: PropTypes.node,
@@ -2946,7 +2946,7 @@ F(Frame, "propTypes", {
   contentDidMount: PropTypes.func,
   contentDidUpdate: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
-}), F(Frame, "defaultProps", {
+}), U(Frame, "defaultProps", {
   style: {},
   head: null,
   children: void 0,
@@ -3029,33 +3029,33 @@ const useDnd = () => {
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (m) => {
-      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
+    onDragOver: (g) => {
+      g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
-    onDrop: (m) => {
-      var w;
-      const E = dropTarget, _ = getOrientation(E) === "vertical" ? m.clientY + ((w = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : w.scrollY) : m.clientX;
-      dropIndex = calculateDropIndex(_, possiblePositions);
-      const v = d, B = E.getAttribute("data-block-id"), C = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((v == null ? void 0 : v._id) === B || !C) {
+    onDrop: (g) => {
+      var C;
+      const E = dropTarget, j = getOrientation(E) === "vertical" ? g.clientY + ((C = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : C.scrollY) : g.clientX;
+      dropIndex = calculateDropIndex(j, possiblePositions);
+      const k = d, A = E.getAttribute("data-block-id"), S = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((k == null ? void 0 : k._id) === A || !S) {
         x();
         return;
       }
-      if (!has(v, "_id")) {
-        a(v, B === "canvas" ? null : B, dropIndex), setTimeout(x, 300);
+      if (!has(k, "_id")) {
+        a(k, A === "canvas" ? null : A, dropIndex), setTimeout(x, 300);
         return;
       }
-      let I = E.getAttribute("data-block-id");
-      I === null && (I = m.target.parentElement.getAttribute("data-block-id")), c([v._id], I === "canvas" ? null : I, dropIndex), x(), setTimeout(removePlaceholder, 300);
+      let B = E.getAttribute("data-block-id");
+      B === null && (B = g.target.parentElement.getAttribute("data-block-id")), c([k._id], B === "canvas" ? null : B, dropIndex), x(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (m) => {
-      const E = m, b = E.target;
-      dropTarget = b;
-      const _ = b.getAttribute("data-block-id"), v = b.getAttribute("data-dnd-dragged") !== "yes";
-      p(_), E.stopPropagation(), E.preventDefault(), possiblePositions = [], v && calculatePossiblePositions(b), r(!0), l(""), i([]);
+    onDragEnter: (g) => {
+      const E = g, f = E.target;
+      dropTarget = f;
+      const j = f.getAttribute("data-block-id"), k = f.getAttribute("data-dnd-dragged") !== "yes";
+      p(j), E.stopPropagation(), E.preventDefault(), possiblePositions = [], k && calculatePossiblePositions(f), r(!0), l(""), i([]);
     },
-    onDragLeave: (m) => {
-      m.target.getAttribute("data-block-id") === "canvas" && (p(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (g) => {
+      g.target.getAttribute("data-block-id") === "canvas" && (p(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3077,16 +3077,16 @@ const useHandleCanvasDblClick = () => {
     if (!d || !o.includes(d))
       return;
     const u = c.cloneNode(!0);
-    c.style.display = "none", Array.from(u.attributes).forEach((m) => {
-      m.name !== "class" && u.removeAttribute(m.name);
+    c.style.display = "none", Array.from(u.attributes).forEach((g) => {
+      g.name !== "class" && u.removeAttribute(g.name);
     }), d === "Text" && (u.style.display = "inline-block"), c.parentNode.insertBefore(u, c.nextSibling);
     const p = new Quill(u, { placeholder: "Type here..." });
-    function g() {
-      const m = p.getText(0, p.getLength());
-      n([c.getAttribute("data-block-id")], { content: m }), c.removeAttribute("style"), u.removeEventListener("blur", g, !0), destroyQuill(p), l(""), r("");
+    function m() {
+      const g = p.getText(0, p.getLength());
+      n([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), u.removeEventListener("blur", m, !0), destroyQuill(p), l(""), r("");
     }
-    u.addEventListener("blur", g, !0), u.addEventListener("keydown", (m) => {
-      (m.key === "Enter" || m.key === "Escape") && g();
+    u.addEventListener("blur", m, !0), u.addEventListener("keydown", (g) => {
+      (g.key === "Enter" || g.key === "Escape") && m();
     }), p.focus(), (x = u.querySelector(".ql-clipboard")) == null || x.remove(), l(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
@@ -3101,8 +3101,8 @@ const useHandleCanvasDblClick = () => {
       return;
     }
     if (d != null && d.getAttribute("data-block-parent")) {
-      const u = d.getAttribute("data-style-prop"), p = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
-      n.includes(g) || i == null || i.closeAll(), o([{ id: p, prop: u, blockId: g }]), r([g]);
+      const u = d.getAttribute("data-style-prop"), p = d.getAttribute("data-style-id"), m = d.getAttribute("data-block-parent");
+      n.includes(m) || i == null || i.closeAll(), o([{ id: p, prop: u, blockId: m }]), r([m]);
     } else if (d != null && d.getAttribute("data-block-id")) {
       let u = d.getAttribute("data-block-id");
       n.includes(u) || i == null || i.closeAll(), o([]), r(u === "canvas" ? [] : [u]);
@@ -3125,10 +3125,10 @@ const useHandleCanvasDblClick = () => {
         return;
       const p = getElementByDataBlockId(n, first(r));
       if (p) {
-        const g = p.getAttribute("data-style-prop");
-        if (g) {
-          const x = p.getAttribute("data-style-id"), m = p.getAttribute("data-block-parent");
-          l([{ id: x, prop: g, blockId: m }]);
+        const m = p.getAttribute("data-style-prop");
+        if (m) {
+          const x = p.getAttribute("data-style-id"), g = p.getAttribute("data-block-parent");
+          l([{ id: x, prop: m, blockId: g }]);
         }
       }
     }, 100);
@@ -3148,14 +3148,14 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: g } = usePasteBlocks();
+  const [n, r] = useSelectedBlockIds(), a = useRemoveBlocks(), l = useDuplicateBlocks(), { undo: i, redo: c } = useUndoManager(), [, d] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: p, pasteBlocks: m } = usePasteBlocks();
   useHotkeys("ctrl+z,command+z", () => i(), {}, [i]), useHotkeys("ctrl+y,command+y", () => c(), {}, [c]), useHotkeys("ctrl+x,command+x", () => d(n), {}, [n, d]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      p(n[0]) && g(n);
+      p(n[0]) && m(n);
     },
     {},
-    [n, p, g]
+    [n, p, m]
   );
   const x = o ? { document: o } : {};
   useHotkeys("esc", () => r([]), x, [r]), useHotkeys("ctrl+d,command+d", () => l(n), { ...x, preventDefault: !0 }, [
@@ -3163,8 +3163,8 @@ const useHandleCanvasDblClick = () => {
     l
   ]), useHotkeys(
     "del, backspace",
-    (m) => {
-      m.preventDefault(), a(n);
+    (g) => {
+      g.preventDefault(), a(n);
     },
     x,
     [n, a]
@@ -3195,15 +3195,15 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, BlockActionsStatic = ({ selectedBlockElement: o, block: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: g } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), [d] = useAtom$1(inlineEditingActiveAtom), { floatingStyles: u, refs: p, update: m } = useFloating({
     placement: "top-start",
     middleware: [shift(), flip()],
     elements: {
       reference: o
     }
   });
-  useResizeObserver(o, () => g(), o !== null);
-  const x = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  useResizeObserver(o, () => m(), o !== null);
+  const x = get(n, "_parent", null), g = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3229,7 +3229,7 @@ const useHandleCanvasDblClick = () => {
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: m, block: n }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: g, block: n }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlusIcon,
@@ -3252,9 +3252,9 @@ const useHandleCanvasDblClick = () => {
     }
   ) });
 }, HeadTags = ({ model: o }) => {
-  const [n] = useBrandingOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useHighlightBlockId(), [i] = useSelectedStylingBlocks(), [c] = useAtom$1(draggedBlockAtom), [d] = useAtom$1(dropTargetBlockIdAtom), { document: u, window: p } = useFrame(), [g] = useState(u == null ? void 0 : u.getElementById("highlighted-block")), [x] = useState(
+  const [n] = useBrandingOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useHighlightBlockId(), [i] = useSelectedStylingBlocks(), [c] = useAtom$1(draggedBlockAtom), [d] = useAtom$1(dropTargetBlockIdAtom), { document: u, window: p } = useFrame(), [m] = useState(u == null ? void 0 : u.getElementById("highlighted-block")), [x] = useState(
     u == null ? void 0 : u.getElementById("selected-block")
-  ), [m] = useState(
+  ), [g] = useState(
     u == null ? void 0 : u.getElementById("selected-styling-block")
   ), [E] = useState(
     u == null ? void 0 : u.getElementById("dragged-block")
@@ -3262,17 +3262,17 @@ const useHandleCanvasDblClick = () => {
   useEffect(() => {
     a ? u == null || u.documentElement.classList.add("dark") : u == null || u.documentElement.classList.remove("dark");
   }, [a, u]);
-  const b = get(n, "headingFont", "DM Sans"), _ = get(n, "bodyFont", "DM Sans");
+  const f = get(n, "headingFont", "DM Sans"), j = get(n, "bodyFont", "DM Sans");
   return useEffect(() => {
-    const v = get(n, "primaryColor", "#000"), B = get(n, "secondaryColor", "#FFF"), C = get(n, "bodyBgLightColor", "#fff"), I = get(n, "bodyBgDarkColor", "#000"), w = get(n, "bodyTextDarkColor", "#000"), A = get(n, "bodyTextLightColor", "#fff"), N = getPalette([
-      { color: v, name: "primary" },
-      { color: B, name: "secondary" }
-    ]), P = {
-      "bg-light": C,
-      "bg-dark": I,
-      "text-dark": w,
-      "text-light": A
-    }, L = get(n, "roundedCorners", "0");
+    const k = get(n, "primaryColor", "#000"), A = get(n, "secondaryColor", "#FFF"), S = get(n, "bodyBgLightColor", "#fff"), B = get(n, "bodyBgDarkColor", "#000"), C = get(n, "bodyTextDarkColor", "#000"), w = get(n, "bodyTextLightColor", "#fff"), N = getPalette([
+      { color: k, name: "primary" },
+      { color: A, name: "secondary" }
+    ]), D = {
+      "bg-light": S,
+      "bg-dark": B,
+      "text-dark": C,
+      "text-light": w
+    }, T = get(n, "roundedCorners", "0");
     !p || !p.tailwind || (p.tailwind.config = {
       darkMode: "class",
       theme: {
@@ -3285,56 +3285,56 @@ const useHandleCanvasDblClick = () => {
             }
           },
           fontFamily: {
-            heading: [b],
-            body: [_]
+            heading: [f],
+            body: [j]
           },
           borderRadius: {
-            DEFAULT: `${L || "0"}px`
+            DEFAULT: `${T || "0"}px`
           },
-          colors: { ...P, ...N }
+          colors: { ...D, ...N }
         }
       },
       plugins: [
         typography$1,
         forms,
         aspectRatio,
-        plugin(function({ addBase: j, theme: k }) {
-          j({
+        plugin(function({ addBase: b, theme: _ }) {
+          b({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: k("fontFamily.heading")
+              fontFamily: _("fontFamily.heading")
             },
             body: {
-              fontFamily: k("fontFamily.body"),
-              color: k("colors.text-light"),
-              backgroundColor: k("colors.bg-light")
+              fontFamily: _("fontFamily.body"),
+              color: _("colors.text-light"),
+              backgroundColor: _("colors.bg-light")
             },
             ".dark body": {
-              color: k("colors.text-dark"),
-              backgroundColor: k("colors.bg-dark")
+              color: _("colors.text-dark"),
+              backgroundColor: _("colors.bg-dark")
             }
           });
         })
       ]
     });
-  }, [n, p, b, _]), useEffect(() => {
-    x && (x.textContent = `${map(r, (v) => `[data-block-id="${v}"]`).join(",")}{
+  }, [n, p, f, j]), useEffect(() => {
+    x && (x.textContent = `${map(r, (k) => `[data-block-id="${k}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc" : "orange"} !important; outline-offset: -1px;
             }`);
   }, [r, x]), useEffect(() => {
     E.textContent = c ? `[data-block-id="${c._id}"], [data-block-id="${c._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
   }, [c, E]), useEffect(() => {
-    g && (g.textContent = l ? `[data-style-id="${l}"], [data-block-id="${l}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
-  }, [l, r, g]), useEffect(() => {
-    m && (m.textContent = `${map(i, ({ id: v }) => `[data-style-id="${v}"]`).join(",")}{
+    m && (m.textContent = l ? `[data-style-id="${l}"], [data-block-id="${l}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}` : "");
+  }, [l, r, m]), useEffect(() => {
+    g && (g.textContent = `${map(i, ({ id: k }) => `[data-style-id="${k}"]`).join(",")}{
                 outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`);
-  }, [i, m]), useEffect(() => {
+  }, [i, g]), useEffect(() => {
     u.querySelector("#drop-target-block").innerHTML = d ? `[data-block-id="${d}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
-  }, [d]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (b || _) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [d]), /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: (f || j) && /* @__PURE__ */ jsxRuntimeExports.jsx(
     "link",
     {
       rel: "stylesheet",
-      href: `https://fonts.googleapis.com/css2?family=${b ? `${b.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${b && _ && b !== _ ? "&" : ""}${_ && _ !== b ? `family=${_.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
+      href: `https://fonts.googleapis.com/css2?family=${f ? `${f.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}${f && j && f !== j ? "&" : ""}${j && j !== f ? `family=${j.replace(/ /g, "+")}:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900` : ""}&display=swap`
     }
   ) });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, n) => {
@@ -3345,16 +3345,67 @@ const useHandleCanvasDblClick = () => {
     u || (u = d, d = "xs");
     const p = r.indexOf(d);
     if (p <= a) {
-      const g = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], x = ["hidden"];
-      if (g.includes(u))
-        for (let m = p; m < r.length; m++)
-          i[m] = !0;
+      const m = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], x = ["hidden"];
+      if (m.includes(u))
+        for (let g = p; g < r.length; g++)
+          i[g] = !0;
       else if (x.includes(u))
-        for (let m = p; m < r.length; m++)
-          i[m] = !1;
+        for (let g = p; g < r.length; g++)
+          i[g] = !1;
     }
   }
   return i[a];
+}, rscBlocksStoreAtom = atom({}), rscBlocksLoadingStateAtom = atom({}), useRSCBlocksStore = () => {
+  const [o, n] = useAtom(rscBlocksStoreAtom), [r] = useAtom(rscBlocksLoadingStateAtom), a = useCallback(
+    (c) => get(o, c == null ? void 0 : c._id, null),
+    [o]
+  ), l = useCallback(
+    (c) => get(r, `${c}`, { loading: !1, error: null }),
+    [r]
+  ), i = useCallback(
+    (c) => {
+      n((d) => ({ ...d, [c]: "" }));
+    },
+    [n]
+  );
+  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) => {
+    var x;
+    return (x = get(i, p._type)) == null ? void 0 : x.server;
+  }).map((p) => p._id), [i, o]);
+  useEffect(() => {
+    forEach(d, (u) => {
+      if (get(n, u, "") || get(a, `${u}.loading`, !1))
+        return;
+      const p = o.find((m) => m._id === u);
+      l((m) => ({ ...m, [u]: { loading: !0, error: null } })), c(p).then((m) => {
+        r((x) => ({ ...x, [u]: m })), l((x) => ({
+          ...x,
+          [u]: { loading: !1, error: null }
+        }));
+      }).catch((m) => {
+        l((x) => ({
+          ...x,
+          [u]: { loading: !1, error: m.message }
+        }));
+      });
+    });
+  }, [
+    o,
+    c,
+    n,
+    d,
+    a,
+    r,
+    l
+  ]);
+}, RSCBlock = ({ blockProps: o, block: n }) => {
+  const { getRSCBlockMarkup: r, getRSCBlockState: a } = useRSCBlocksStore(), l = r(n), { loading: i, error: c } = a(n._id);
+  return i ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...o, className: "h-10 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full w-full rounded-md border" }) }) : c ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...o, children: [
+    "Error: ",
+    c
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ...o, dangerouslySetInnerHTML: { __html: l } });
 }, generateClassNames = memoize((o) => {
   const n = o.replace(STYLES_KEY, "").split(",");
   return twMerge(n[0], n[1]);
@@ -3393,50 +3444,50 @@ function isDescendant(o, n, r) {
 }
 const RenderGlobalBlock = ({ blocks: o, allBlocks: n }) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: o });
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
-  const [r] = useAtom$1(xShowBlocksAtom), [a] = useCutBlockIds(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), [, c] = useCanvasWidth(), [d] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: p } = useGlobalBlocksStore(), g = useCallback((b) => getStyleAttrs(b, c), [c]), [x] = useChaiExternalData(), [m] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
-    (b) => b.reduce((_, v) => {
-      const B = get(d, v, {});
-      return { ..._, ...B };
+  const [r] = useAtom$1(xShowBlocksAtom), [a] = useCutBlockIds(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), [, c] = useCanvasWidth(), [d] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: p } = useGlobalBlocksStore(), m = useCallback((f) => getStyleAttrs(f, c), [c]), [x] = useChaiExternalData(), [g] = useAtom$1(inlineEditingActiveAtom), E = useCallback(
+    (f) => f.reduce((j, k) => {
+      const A = get(d, k, {});
+      return { ...j, ...A };
     }, {}),
     [d]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((b, _) => {
-      if (m === b._id || u.includes(b._id))
+    o.map((f, j) => {
+      if (g === f._id || u.includes(f._id))
         return null;
-      const v = {}, B = filter(n, { _parent: b._id });
-      if (v.children = B.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: B }) : null, b._type === "GlobalBlock") {
-        const L = p(b);
-        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(L, (j) => !j._parent), allBlocks: L });
+      const k = {}, A = filter(n, { _parent: f._id });
+      if (k.children = A.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: A }) : null, f._type === "GlobalBlock") {
+        const _ = p(f);
+        k.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(_, (R) => !R._parent), allBlocks: _ });
       }
-      const C = getBlockComponent(b._type), I = get(C, "builderComponent", get(C, "component", null));
-      if (isNull(I))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${b == null ? void 0 : b._type} not registered -->` });
-      const w = has(C, "getBlockStateFrom") ? C == null ? void 0 : C.getBlockStateFrom(b, n) : [], A = E(w), N = g(b);
-      if (get(N, "__isHidden", !1) && !includes(r, b._id))
+      const S = getBlockComponent(f._type), B = get(S, "server", !1), C = B ? RSCBlock : get(S, "builderComponent", get(S, "component", null));
+      if (isNull(C))
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
+      const w = has(S, "getBlockStateFrom") ? S == null ? void 0 : S.getBlockStateFrom(f, n) : [], N = E(w), D = m(f);
+      if (get(D, "__isHidden", !1) && !includes(r, f._id))
         return null;
-      const P = l && isDescendant(l._id, b._id, n);
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(I, {
-        blockProps: {
-          ...includes(r, b._id) ? { "force-show": "" } : {},
-          "data-block-id": b._id,
-          "data-block-type": b._type,
-          ...l ? (
-            // @ts-ignore
-            {
-              "data-dnd": canAcceptChildBlock(b._type, l == null ? void 0 : l._type) ? "yes" : "no",
-              "data-dnd-dragged": l._id === b._id || P ? "yes" : "no"
-            }
-          ) : {},
-          ...i === b._id && !P ? { "data-drop": "yes" } : {},
-          ...includes(a, b._id) ? { "data-cut-block": "yes" } : {}
-        },
-        index: _,
-        ...applyBindings(b, x),
-        ...omit(N, ["__isHidden"]),
-        ...v,
+      const T = l && isDescendant(l._id, f._id, n), b = {
+        ...includes(r, f._id) ? { "force-show": "" } : {},
+        "data-block-id": f._id,
+        "data-block-type": f._type,
+        ...l ? (
+          // @ts-ignore
+          {
+            "data-dnd": canAcceptChildBlock(f._type, l == null ? void 0 : l._type) ? "yes" : "no",
+            "data-dnd-dragged": l._id === f._id || T ? "yes" : "no"
+          }
+        ) : {},
+        ...i === f._id && !T ? { "data-drop": "yes" } : {},
+        ...includes(a, f._id) ? { "data-cut-block": "yes" } : {}
+      };
+      return B ? /* @__PURE__ */ jsxRuntimeExports.jsx(RSCBlock, { block: f, blockProps: b }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(C, {
+        blockProps: b,
+        index: j,
+        ...applyBindings(f, x),
+        ...omit(D, ["__isHidden"]),
+        ...k,
         inBuilder: !0,
-        blockState: A
+        blockState: N
       }) });
     })
   ) });
@@ -3486,47 +3537,47 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     n(i);
   }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", className: "h-full w-full p-8 pb-0", ref: a, 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), [g, x] = useState([]), [, m] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [b, _] = useSelectedStylingBlocks(), v = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), C = (A) => {
-    u((N) => ({ ...N, width: 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, x] = useState([]), [, g] = useState([]), [, E] = useAtom$1(canvasIframeAtom), [f, j] = useSelectedStylingBlocks(), k = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), S = (w) => {
+    u((N) => ({ ...N, width: w }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: A, clientHeight: N } = c.current;
-    u({ width: A, height: N });
+    const { clientWidth: w, clientHeight: N } = c.current;
+    u({ width: w, height: N });
   }, [c, n]);
-  const I = (A, N = 0) => {
-    const { top: P } = A.getBoundingClientRect();
-    return P + N >= 0 && P - N <= window.innerHeight;
+  const B = (w, N = 0) => {
+    const { top: D } = w.getBoundingClientRect();
+    return D + N >= 0 && D - N <= window.innerHeight;
   };
   useEffect(() => {
-    var A, N;
+    var w, N;
     if (a && a.type !== "Multiple" && i.current) {
-      const P = getElementByDataBlockId(i.current.contentDocument, a._id);
-      P && (I(P) || (N = (A = i.current) == null ? void 0 : A.contentWindow) == null || N.scrollTo({ top: P.offsetTop, behavior: "smooth" }), x([P]));
+      const D = getElementByDataBlockId(i.current.contentDocument, a._id);
+      D && (B(D) || (N = (w = i.current) == null ? void 0 : w.contentWindow) == null || N.scrollTo({ top: D.offsetTop, behavior: "smooth" }), x([D]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(b) && i.current) {
-      const A = getElementByStyleId(
+    if (!isEmpty(f) && i.current) {
+      const w = getElementByStyleId(
         i.current.contentDocument,
-        first(b).id
+        first(f).id
       );
-      m(A ? [A] : [null]);
+      g(w ? [w] : [null]);
     } else
-      m([null]);
-  }, [b]);
-  const w = useMemo(() => {
-    let A = IframeInitialContent;
-    return A = A.replace("__HTML_DIR__", B), o === "offline" && (A = A.replace(
+      g([null]);
+  }, [f]);
+  const C = useMemo(() => {
+    let w = IframeInitialContent;
+    return w = w.replace("__HTML_DIR__", A), o === "offline" && (w = w.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, B]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: C, onResize: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), w = w.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), w = w.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), w;
+  }, [o, A]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: S, onResize: S, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        r([]), _([]);
+        r([]), j([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3539,19 +3590,19 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
           id: "canvas-iframe",
           style: { ...p, ...isEmpty(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: C,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               BlockActionsStatic,
               {
                 block: a,
-                selectedBlockElement: first(g)
+                selectedBlockElement: first(m)
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, { model: "page" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Canvas, { children: [
-              v ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
+              k ? /* @__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", {}),
@@ -3662,7 +3713,7 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-ePAAihqK.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-JFNyNUeD.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, {}) }) }),
@@ -3737,42 +3788,42 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
   showHeading: o = !0,
   className: n = ""
 }) => {
-  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: w }, A) => {
-    A && (a(w), i.current = w);
+  const [r, a] = useBrandingOptions(), [l] = useBlocksContainer(), i = React.useRef(r), { t: c } = useTranslation(), d = ({ formData: C }, w) => {
+    w && (a(C), i.current = C);
   }, {
     bodyFont: u,
     headingFont: p,
-    primaryColor: g,
+    primaryColor: m,
     bodyTextDarkColor: x,
-    bodyTextLightColor: m,
+    bodyTextLightColor: g,
     bodyBgDarkColor: E,
-    secondaryColor: b,
-    bodyBgLightColor: _,
-    roundedCorners: v
+    secondaryColor: f,
+    bodyBgLightColor: j,
+    roundedCorners: k
   } = r;
-  let B = {
-    headingFont: f({
+  let A = {
+    headingFont: y({
       title: c("theme_config.heading_font"),
       default: p,
       options: FONTS
     }),
-    bodyFont: f({
+    bodyFont: y({
       title: c("theme_config.body_font"),
       default: u,
       options: FONTS
     }),
-    roundedCorners: y({
+    roundedCorners: s({
       title: c("theme_config.rounded_corner"),
-      default: parseInt(v || 5, 10)
+      default: parseInt(k || 5, 10)
     }),
-    primaryColor: h({ title: c("theme_config.primary"), default: g }),
-    secondaryColor: h({ title: c("theme_config.secondary"), default: b })
+    primaryColor: h({ title: c("theme_config.primary"), default: m }),
+    secondaryColor: h({ title: c("theme_config.secondary"), default: f })
   };
-  l || (B = {
-    ...B,
+  l || (A = {
+    ...A,
     bodyBgLightColor: h({
       title: c("theme_config.background"),
-      default: _
+      default: j
     }),
     bodyTextLightColor: h({
       title: c("theme_config.text_color"),
@@ -3784,16 +3835,16 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
     }),
     bodyTextDarkColor: h({
       title: c("theme_config.text_color_dark_mode"),
-      default: m
+      default: g
     })
   });
-  const C = {
+  const S = {
     type: "object",
     properties: {}
-  }, I = {};
-  return Object.keys(B).forEach((w) => {
-    const A = B[w];
-    return C.properties || (C.properties = {}), C.properties[w] = A.schema, I[w] = A.uiSchema, !0;
+  }, B = {};
+  return Object.keys(A).forEach((C) => {
+    const w = A[C];
+    return S.properties || (S.properties = {}), S.properties[C] = w.schema, B[C] = w.uiSchema, !0;
   }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full select-none flex-col", n), children: [
     o ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md bg-background/30 p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "px-1 font-semibold", children: c("Theme Configuration") }) }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3805,8 +3856,8 @@ const useAllDataProviders = () => useMemo(() => getChaiDataProviders(), []), Blo
         omitExtraData: !0,
         liveOmit: !0,
         liveValidate: !0,
-        uiSchema: I,
-        schema: C,
+        uiSchema: B,
+        schema: S,
         formData: r,
         validator,
         onChange: d
@@ -3989,34 +4040,34 @@ function BiExpandVertical(o) {
 const Node = memo(({ node: o, style: n, dragHandle: r }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [, d] = useHighlightBlockId(), [u] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const g = o.children.length > 0, { id: x, data: m, isSelected: E, willReceiveDrop: b, isDragging: _, isEditing: v, handleClick: B } = o, C = (L) => {
-    L.stopPropagation(), !i.includes(x) && o.toggle();
-  }, I = (L) => {
-    L.isInternal && (p = L.isOpen, L.isOpen && L.close());
-  }, w = (L) => {
-    L.isInternal && p !== null && (p ? L.open() : L.close(), p = null);
-  }, A = (L) => {
-    L.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), B(L);
+  const m = o.children.length > 0, { id: x, data: g, isSelected: E, willReceiveDrop: f, isDragging: j, isEditing: k, handleClick: A } = o, S = (T) => {
+    T.stopPropagation(), !i.includes(x) && o.toggle();
+  }, B = (T) => {
+    T.isInternal && (p = T.isOpen, T.isOpen && T.close());
+  }, C = (T) => {
+    T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
+  }, w = (T) => {
+    T.stopPropagation(), !o.isOpen && !i.includes(x) && o.toggle(), A(T);
   };
   useEffect(() => {
-    const L = setTimeout(() => {
-      b && !o.isOpen && !_ && !i.includes(x) && o.toggle();
+    const T = setTimeout(() => {
+      f && !o.isOpen && !j && !i.includes(x) && o.toggle();
     }, 500);
-    return () => clearTimeout(L);
-  }, [b, o, _]);
+    return () => clearTimeout(T);
+  }, [f, o, j]);
   const N = useMemo(() => {
-    const L = Object.keys(m), j = [];
-    for (let k = 0; k < L.length; k++)
-      if (L[k].endsWith("_attrs")) {
-        const S = m[L[k]], R = Object.keys(S).join("|");
-        R.match(/x-data/) && j.push("data"), R.match(/x-on/) && j.push("event"), R.match(/x-show|x-if/) && j.push("show");
+    const T = Object.keys(g), b = [];
+    for (let _ = 0; _ < T.length; _++)
+      if (T[_].endsWith("_attrs")) {
+        const R = g[T[_]], v = Object.keys(R).join("|");
+        v.match(/x-data/) && b.push("data"), v.match(/x-on/) && b.push("event"), v.match(/x-show|x-if/) && b.push("show");
       }
-    return j;
-  }, [m]), P = (L, j) => {
-    const k = u.contentDocument || u.contentWindow.document, S = k.querySelector(`[data-block-id=${L}]`);
-    S && S.setAttribute("data-drop", j);
-    const R = S.getBoundingClientRect(), T = u.getBoundingClientRect();
-    R.top >= T.top && R.left >= T.left && R.bottom <= T.bottom && R.right <= T.right || (k.documentElement.scrollTop = S.offsetTop - T.top);
+    return b;
+  }, [g]), D = (T, b) => {
+    const _ = u.contentDocument || u.contentWindow.document, R = _.querySelector(`[data-block-id=${T}]`);
+    R && R.setAttribute("data-drop", b);
+    const v = R.getBoundingClientRect(), I = u.getBoundingClientRect();
+    v.top >= I.top && v.left >= I.left && v.bottom <= I.bottom && v.right <= I.right || (_.documentElement.scrollTop = R.offsetTop - I.top);
   };
   return x === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "button",
@@ -4032,26 +4083,26 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     "div",
     {
       onMouseEnter: () => d(x),
-      onClick: A,
+      onClick: w,
       style: n,
       "data-node-id": x,
       ref: i.includes(x) ? null : r,
-      onDragStart: () => I(o),
-      onDragEnd: () => w(o),
-      onDragOver: (L) => {
-        L.preventDefault(), P(x, "yes");
+      onDragStart: () => B(o),
+      onDragEnd: () => C(o),
+      onDragOver: (T) => {
+        T.preventDefault(), D(x, "yes");
       },
-      onDragLeave: (L) => {
-        L.preventDefault(), P(x, "no");
+      onDragLeave: (T) => {
+        T.preventDefault(), D(x, "no");
       },
-      onDrop: (L) => {
-        L.preventDefault(), P(x, "no");
+      onDrop: (T) => {
+        T.preventDefault(), D(x, "no");
       },
       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(m._type, "Icon") ? "bg-green-200" : "",
-        _ && "opacity-20",
+        f && canAcceptChildBlock(g._type, "Icon") ? "bg-green-200" : "",
+        j && "opacity-20",
         i.includes(x) ? "opacity-50" : ""
       ),
       children: [
@@ -4060,20 +4111,20 @@ 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: g && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: C, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleRightIcon, {}) })
+              children: m && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: S, 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: m == null ? void 0 : m._type }) }),
-            v ? /* @__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: g == null ? void 0 : g._type }) }),
+            k ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "div",
               {
                 className: "ml-2 flex items-center gap-x-1 truncate text-[11px]",
-                onDoubleClick: (L) => {
-                  L.stopPropagation(), o.edit(), o.deselect();
+                onDoubleClick: (T) => {
+                  T.stopPropagation(), o.edit(), o.deselect();
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (m == null ? void 0 : m._name) || (m == null ? void 0 : m._type.split("/").pop()) }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (g == null ? void 0 : g._name) || (g == null ? void 0 : g._type.split("/").pop()) }),
                   N.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
                   N.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
                   N.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
@@ -4083,18 +4134,18 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1 pr-2 group-hover:visible", children: [
-          !i.includes(x) && a.map((L) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          !i.includes(x) && a.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
                 className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                 asChild: !0,
-                children: React__default.createElement(L.item, { blockId: x })
+                children: React__default.createElement(T.item, { blockId: x })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: L.tooltip })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: T.tooltip })
           ] })),
-          canAddChildBlock(m == null ? void 0 : m._type) && !i.includes(x) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          canAddChildBlock(g == null ? void 0 : g._type) && !i.includes(x) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
@@ -4110,8 +4161,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               TooltipTrigger,
               {
-                onClick: (L) => {
-                  L.stopPropagation(), c(x), o.isOpen && o.toggle();
+                onClick: (T) => {
+                  T.stopPropagation(), c(x), o.isOpen && o.toggle();
                 },
                 className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-black",
                 asChild: !0,
@@ -4466,8 +4517,8 @@ const Node = memo(({ node: o, style: n, dragHandle: r }) => {
     const c = stringify([r]);
     return hasVideoEmbed(c) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(c)), 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 = c, [a];
   } else if (r.tagName === "svg") {
-    const c = find(r.attributes, { key: "height" }), d = find(r.attributes, { key: "width" }), u = get(c, "value") ? `[${get(c, "value")}px]` : "24px", p = get(d, "value") ? `[${get(d, "value")}px]` : "24px", g = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${p} h-${u}`, g)}`.trim(), r.attributes = filter(r.attributes, (x) => !includes(["style", "width", "height", "class"], x.key)), a.icon = stringify([r]), [a];
+    const c = find(r.attributes, { key: "height" }), d = find(r.attributes, { key: "width" }), u = get(c, "value") ? `[${get(c, "value")}px]` : "24px", p = get(d, "value") ? `[${get(d, "value")}px]` : "24px", m = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${p} h-${u}`, m)}`.trim(), r.attributes = filter(r.attributes, (x) => !includes(["style", "width", "height", "class"], x.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((i = n.block) == null ? void 0 : i._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -4528,57 +4579,57 @@ function ExpandableObject(o) {
     level: d,
     style: u,
     shouldExpandNode: p,
-    clickToExpandNode: g
+    clickToExpandNode: m
   } = o;
-  const x = useRef(!1), [m, E, b] = useBool(() => p(d, r, n));
+  const x = useRef(!1), [g, E, f] = useBool(() => p(d, r, n));
   useEffect(() => {
-    x.current ? b(p(d, r, n)) : x.current = !0;
+    x.current ? f(p(d, r, n)) : x.current = !0;
   }, [p]);
-  const _ = m ? u.collapseIcon : u.expandIcon, v = m ? "collapse JSON" : "expand JSON", B = useComponentId(), C = d + 1, I = a.length - 1, w = (A) => {
-    A.key === " " && (A.preventDefault(), E());
+  const j = g ? u.collapseIcon : u.expandIcon, k = g ? "collapse JSON" : "expand JSON", A = useComponentId(), S = d + 1, B = a.length - 1, C = (w) => {
+    w.key === " " && (w.preventDefault(), E());
   };
   return /* @__PURE__ */ createElement("div", {
     className: u.basicChildStyle,
     role: "list"
   }, /* @__PURE__ */ createElement("span", {
-    className: _,
+    className: j,
     onClick: E,
-    onKeyDown: w,
+    onKeyDown: C,
     role: "button",
     tabIndex: 0,
-    "aria-label": v,
-    "aria-expanded": m,
-    "aria-controls": m ? B : void 0
-  }), n && (g ? /* @__PURE__ */ createElement("span", {
+    "aria-label": k,
+    "aria-expanded": g,
+    "aria-controls": g ? A : void 0
+  }), n && (m ? /* @__PURE__ */ createElement("span", {
     className: u.clickableLabel,
     onClick: E,
-    onKeyDown: w,
+    onKeyDown: C,
     role: "button",
     tabIndex: -1
   }, n, ":") : /* @__PURE__ */ createElement("span", {
     className: u.label
   }, n, ":")), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
-  }, i), m ? /* @__PURE__ */ createElement("div", {
-    id: B
-  }, a.map((A, N) => /* @__PURE__ */ createElement(DataRender, {
-    key: A[0] || N,
-    field: A[0],
-    value: A[1],
+  }, i), g ? /* @__PURE__ */ createElement("div", {
+    id: A
+  }, a.map((w, N) => /* @__PURE__ */ createElement(DataRender, {
+    key: w[0] || N,
+    field: w[0],
+    value: w[1],
     style: u,
-    lastElement: N === I,
-    level: C,
+    lastElement: N === B,
+    level: S,
     shouldExpandNode: p,
-    clickToExpandNode: g
+    clickToExpandNode: m
   }))) : /* @__PURE__ */ createElement("span", {
     className: u.collapsedContent,
     onClick: E,
-    onKeyDown: w,
+    onKeyDown: C,
     role: "button",
     tabIndex: -1,
     "aria-hidden": !0,
-    "aria-label": v,
-    "aria-expanded": m
+    "aria-label": k,
+    "aria-expanded": g
   }), /* @__PURE__ */ createElement("span", {
     className: u.punctuation
   }, c), !l && /* @__PURE__ */ createElement("span", {
@@ -4731,15 +4782,15 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataType: i,
   appliedBindings: c
 }) => {
-  const { paths: d, pathsType: u } = getPathAndTypes(a), p = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, g = o === "PROP", [x, m] = useState(!1), E = useMemo(() => o === "PROP" ? d.filter(
-    (b) => !includes(c, b) && get(p, `props.${first(split(b, "."))}.binding`)
-  ) : d.filter((b) => i === get(u, b, "")), [o, d, c, i, p]);
+  const { paths: d, pathsType: u } = getPathAndTypes(a), p = o === "PROP" ? getBlockComponent(a == null ? void 0 : a._type) : {}, m = o === "PROP", [x, g] = useState(!1), E = useMemo(() => o === "PROP" ? d.filter(
+    (f) => !includes(c, f) && get(p, `props.${first(split(f, "."))}.binding`)
+  ) : d.filter((f) => i === get(u, f, "")), [o, d, c, i, p]);
   return useEffect(() => {
     n && l(n);
   }, [n, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-4", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground", children: startCase(toLower(o)) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open: x, onOpenChange: m, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Popover, { open: x, onOpenChange: g, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
@@ -4748,7 +4799,7 @@ const ViewData = ({ data: o, fullView: n }) => {
             className: ` ${isEmpty(n) ? "w-44 justify-center bg-blue-500 text-gray-100 hover:bg-blue-400 hover:text-white" : "min-w-[350px] items-center justify-between"}`,
             children: n ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "pr-8 text-sm", children: [
-                g && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(i) }),
+                m && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mr-2 rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(i) }),
                 n
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "cursor-pointer text-[9px] text-blue-400 underline hover:text-blue-700", children: "Change" })
@@ -4762,29 +4813,29 @@ const ViewData = ({ data: o, fullView: n }) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(CommandInput, { placeholder: `Choose ${toLower(o)}...` }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(CommandList, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CommandEmpty, { children: "No results found." }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CommandGroup, { children: map(E, (b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CommandGroup, { children: map(E, (f) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
               CommandItem,
               {
-                value: b,
-                className: `cursor-pointer ${g ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
-                onSelect: (_) => {
-                  r(find(E, (v) => v === _) || null), m(!1);
+                value: f,
+                className: `cursor-pointer ${m ? "flex items-center justify-between" : "flex flex-col items-start justify-start"}`,
+                onSelect: (j) => {
+                  r(find(E, (k) => k === j) || null), g(!1);
                 },
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: `h-4 w-4 text-green-500 ${n === b ? "" : "opacity-0"}` }),
-                    b
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: `h-4 w-4 text-green-500 ${n === f ? "" : "opacity-0"}` }),
+                    f
                   ] }),
-                  g ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(u, b, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, b) }) })
+                  m ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-[10px] text-purple-500", children: startCase(get(u, f, "")) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, f) }) })
                 ]
               },
-              b
+              f
             )) })
           ] })
         ] }) })
       ] })
     ] }),
-    !g && !isEmpty(n) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, n, ""), fullView: !0 }) })
+    !m && !isEmpty(n) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ViewData, { data: get(a, n, ""), fullView: !0 }) })
   ] });
 }, AddBindingModalContent = ({
   appliedBindings: o = [],
@@ -4792,20 +4843,20 @@ const ViewData = ({ data: o, fullView: n }) => {
   editMode: r,
   item: a
 }) => {
-  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), g = useCallback(
-    (E, b) => {
+  const [l, i] = useState(r ? a.key : ""), [c, d] = useState(r ? a.value : ""), u = useSelectedBlock(), [p] = useChaiExternalData(), m = useCallback(
+    (E, f) => {
       if (isEmpty(E))
         return "";
       {
-        const _ = get(b === "PROP" ? u : p, E, "");
-        if (isArray$1(_))
+        const j = get(f === "PROP" ? u : p, E, "");
+        if (isArray$1(j))
           return "list";
-        const v = typeof _;
-        return v === "string" ? "text" : v === "object" ? "model" : v;
+        const k = typeof j;
+        return k === "string" ? "text" : k === "object" ? "model" : k;
       }
     },
     [u, p]
-  ), [x, m] = useState(r ? g(a.key, "PROP") : "");
+  ), [x, g] = useState(r ? m(a.key, "PROP") : "");
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogHeader, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Add Data Binding" }),
@@ -4821,8 +4872,8 @@ const ViewData = ({ data: o, fullView: n }) => {
           value: l,
           setValue: i,
           onChange: (E) => {
-            const b = g(E, "PROP");
-            i(E), x !== b && d(""), m(b);
+            const f = m(E, "PROP");
+            i(E), x !== f && d(""), g(f);
           },
           data: u,
           dataType: x,
@@ -4839,8 +4890,8 @@ const ViewData = ({ data: o, fullView: n }) => {
           value: c,
           setValue: d,
           onChange: (E) => {
-            const b = g(E, "PATH");
-            d(x === b ? E : "");
+            const f = m(E, "PATH");
+            d(x === f ? E : "");
           },
           data: p,
           dataType: x,
@@ -4883,15 +4934,15 @@ const ViewData = ({ data: o, fullView: n }) => {
   dataProvider: l,
   appliedBindings: i
 }) => {
-  const [c, d] = useState("string"), u = (p, g) => {
+  const [c, d] = useState("string"), u = (p, m) => {
     if (isEmpty(p))
       return "";
     {
-      const x = get(g === "PROP" ? a : l, p, "");
+      const x = get(m === "PROP" ? a : l, p, "");
       if (isArray$1(x))
         return "list";
-      const m = typeof x;
-      return m === "string" ? "text" : m === "object" ? "model" : m;
+      const g = typeof x;
+      return g === "string" ? "text" : g === "object" ? "model" : g;
     }
   };
   return useEffect(() => d(() => u(o.key, "PROP")), [o.key]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex flex-col rounded-md border border-border p-2", children: [
@@ -4912,10 +4963,10 @@ const ViewData = ({ data: o, fullView: n }) => {
   ] });
 }, DataBindingSetting = ({ bindingData: o, onChange: n }) => {
   const r = useSelectedBlock(), [a] = useChaiExternalData(), l = getChaiDataProviders(), [i, c] = useState(
-    map(o, (x, m) => ({ key: m, value: x }))
+    map(o, (x, g) => ({ key: g, value: x }))
   );
   useEffect(() => {
-    c(map(o, (x, m) => ({ key: m, value: x })));
+    c(map(o, (x, g) => ({ key: g, value: x })));
   }, [r == null ? void 0 : r._id, o]);
   const d = useMemo(() => {
     if (isEmpty(a))
@@ -4925,21 +4976,21 @@ const ViewData = ({ data: o, fullView: n }) => {
     const x = last(i);
     return isEmpty(x == null ? void 0 : x.key) || isEmpty(x == null ? void 0 : x.value);
   }, [a, i]), u = (x) => {
-    const m = filter(i, (E) => E.key !== x.key);
-    c([...m, x]), g([...m, x]);
+    const g = filter(i, (E) => E.key !== x.key);
+    c([...g, x]), m([...g, x]);
   }, p = (x) => {
-    const m = filter(i, (E, b) => x !== b);
-    g([...m]);
-  }, g = useCallback(
+    const g = filter(i, (E, f) => x !== f);
+    m([...g]);
+  }, m = useCallback(
     (x = []) => {
       if (c(x), isEmpty(x)) {
         n({});
         return;
       }
-      const m = {};
+      const g = {};
       forEach(x, (E) => {
-        !isEmpty(E == null ? void 0 : E.key) && !isEmpty(E == null ? void 0 : E.value) && set(m, E.key, E.value);
-      }), n(m);
+        !isEmpty(E == null ? void 0 : E.key) && !isEmpty(E == null ? void 0 : E.value) && set(g, E.key, E.value);
+      }), n(g);
     },
     [n]
   );
@@ -4948,12 +4999,12 @@ const ViewData = ({ data: o, fullView: n }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "text-blue-500", href: "https://chaibuilder.com/docs/registering-data-providers", target: "_blank", children: "Learn more" })
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
-    map(i, (x, m) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    map(i, (x, g) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       NewDataBindingPair,
       {
         item: x,
         onAddBinding: u,
-        onRemove: () => p(m),
+        onRemove: () => p(g),
         selectedBlock: r,
         dataProvider: a,
         appliedBindings: map(i, "key")
@@ -5047,7 +5098,7 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     )
   ] });
-}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-ypfGqude.js")), UploadImages = React__default.lazy(() => import("./UploadImages-UWFlkqDP.js")), ImagesPanel = ({
+}, UnsplashImages = React__default.lazy(() => import("./UnsplashImages-vR5ig3Lz.js")), UploadImages = React__default.lazy(() => import("./UploadImages-jCqfO33R.js")), ImagesPanel = ({
   isModalView: o = !1,
   onSelect: n = () => {
   }
@@ -5205,18 +5256,18 @@ const ViewData = ({ data: o, fullView: n }) => {
   ] });
 }, JSONForm = memo(({ id: o, properties: n, formData: r, onChange: a }) => {
   const [l, i] = useState(r), c = { type: "object", properties: {} }, d = {}, { t: u } = useTranslation();
-  Object.keys(n).forEach((g) => {
-    const x = n[g];
+  Object.keys(n).forEach((m) => {
+    const x = n[m];
     if (includes(["slot", "styles"], x.type))
       return;
-    const m = g;
-    c.properties[m] = getBlockJSONFromSchemas(x, u), d[m] = getBlockJSONFromUISchemas(x);
+    const g = m;
+    c.properties[g] = getBlockJSONFromSchemas(x, u), d[g] = getBlockJSONFromUISchemas(x);
   }), useEffect(() => {
     i(r);
   }, [o]);
   const p = useThrottledCallback(
-    async ({ formData: g }, x) => {
-      a({ formData: g }, x);
+    async ({ formData: m }, x) => {
+      a({ formData: m }, x);
     },
     [a],
     1e3
@@ -5242,8 +5293,8 @@ const ViewData = ({ data: o, fullView: n }) => {
       uiSchema: d,
       schema: c,
       formData: l,
-      onChange: ({ formData: g }, x) => {
-        x && (i(g), p({ formData: g }, x));
+      onChange: ({ formData: m }, x) => {
+        x && (i(m), p({ formData: m }, x));
       }
     }
   );
@@ -5302,32 +5353,35 @@ const ViewData = ({ data: o, fullView: n }) => {
       }
     ) })
   ] });
+}, ResetRSCBlockButton = ({ blockId: o }) => {
+  const { t: n } = useTranslation(), { reset: r } = useRSCBlocksStore();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { size: "sm", variant: "outline", onClick: () => r(o), children: n("Reload") });
 };
 function BlockSettings() {
-  const o = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), r = useUpdateBlocksProps(), a = getBlockComponent(o == null ? void 0 : o._type), l = { ...o }, [i, c] = useState(l), d = useBuilderProp("dataBindingSupport", !1), u = ({ formData: E }, b, _) => {
-    if (b && (i == null ? void 0 : i._id) === o._id) {
-      const v = b.replace("root.", "");
-      r([o._id], { [v]: get(E, v) }, _);
+  const o = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), r = useUpdateBlocksProps(), a = getBlockComponent(o == null ? void 0 : o._type), l = { ...o }, [i, c] = useState(l), d = useBuilderProp("dataBindingSupport", !1), u = ({ formData: f }, j, k) => {
+    if (j && (i == null ? void 0 : i._id) === o._id) {
+      const A = j.replace("root.", "");
+      r([o._id], { [A]: get(f, A) }, k);
     }
   }, p = useCallback(
-    debounce(({ formData: E }, b, _) => {
-      u({ formData: E }, b, _), c(E);
+    debounce(({ formData: f }, j, k) => {
+      u({ formData: f }, j, k), c(f);
     }, 1500),
     [o == null ? void 0 : o._id]
-  ), g = ({ formData: E }, b) => {
-    if (b) {
-      const _ = b.replace("root.", "");
+  ), m = ({ formData: f }, j) => {
+    if (j) {
+      const k = j.replace("root.", "");
       n(
         [o._id],
-        convertDotNotationToObject(_, get(E, _.split(".")))
-      ), p({ formData: E }, b, { [_]: get(i, _) });
+        convertDotNotationToObject(k, get(f, k.split(".")))
+      ), p({ formData: f }, j, { [k]: get(i, k) });
     }
-  }, x = keys(get(l, "_bindings", {})), m = useMemo(() => {
-    const E = cloneDeep(get(a, "props", {}));
-    return each(E, (b, _) => {
-      get(b, "hidden", !1) && delete E[_];
-    }), d && each(x, (b) => delete E[b]), E;
-  }, [a, x, d]);
+  }, x = keys(get(l, "_bindings", {})), g = useMemo(() => {
+    const f = cloneDeep(get(a, "props", {}));
+    return each(f, (j, k) => {
+      get(j, "hidden", !1) && delete f[k];
+    }), d && each(x, (j) => delete f[j]), f;
+  }, [a, x, d]), E = get(a, "server", !1);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
     d ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Accordion, { type: "multiple", defaultValue: ["STATIC", "BINDING"], className: "mt-4 h-full w-full", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "BINDING", children: [
@@ -5344,8 +5398,8 @@ function BlockSettings() {
           DataBindingSetting$1,
           {
             bindingData: get(o, "_bindings", {}),
-            onChange: (E) => {
-              u({ formData: { _bindings: E } }, "root._bindings");
+            onChange: (f) => {
+              u({ formData: { _bindings: f } }, "root._bindings");
             }
           }
         ) })
@@ -5367,23 +5421,24 @@ function BlockSettings() {
             JSONForm,
             {
               id: o == null ? void 0 : o._id,
-              onChange: g,
+              onChange: m,
               formData: l,
-              properties: m
+              properties: g
             }
           )
         ] })
       ] })
-    ] }) : isEmpty(m) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ] }) : isEmpty(g) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: o == null ? void 0 : o._id,
-        onChange: g,
+        onChange: m,
         formData: l,
-        properties: m
+        properties: g
       }
     ),
     (o == null ? void 0 : o._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
+    E ? /* @__PURE__ */ jsxRuntimeExports.jsx(ResetRSCBlockButton, { blockId: o == null ? void 0 : o._id }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx(CanvasSettings, {})
   ] });
 }
@@ -5401,20 +5456,20 @@ const getBlockWithChildren = (o, n) => {
   const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore();
   return {
     askAi: useCallback(
-      async (u, p, g, x) => {
+      async (u, p, m, x) => {
         if (l) {
           n(!0), a(null);
           try {
-            const m = u === "content" ? cloneDeep(getBlockWithChildren(p, d)) : [cloneDeep(d.find((v) => v._id === p))];
-            set(m, "0._parent", null);
-            const E = await l(u, g, m), { blocks: b, error: _ } = E;
-            if (_) {
-              a(_);
+            const g = u === "content" ? cloneDeep(getBlockWithChildren(p, d)) : [cloneDeep(d.find((k) => k._id === p))];
+            set(g, "0._parent", null);
+            const E = await l(u, m, g), { blocks: f, error: j } = E;
+            if (j) {
+              a(j);
               return;
             }
-            u === "styles" ? c(b) : i(b), x && x(E);
-          } catch (m) {
-            a(m);
+            u === "styles" ? c(f) : i(f), x && x(E);
+          } catch (g) {
+            a(g);
           } finally {
             n(!1), x && x();
           }
@@ -5488,14 +5543,14 @@ function Countdown() {
   ] });
 }
 const AskAIStyles = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, g] = useState();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), u = useRef(null), [p, m] = useState();
   useEffect(() => {
-    var m;
-    (m = d.current) == null || m.focus();
+    var g;
+    (g = d.current) == null || g.focus();
   }, []);
-  const x = (m) => {
-    const { usage: E } = m || {};
-    !l && E && g(E), u.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const x = (g) => {
+    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") }),
@@ -5504,12 +5559,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (m) => c(m.target.value),
+        onChange: (g) => c(g.target.value),
         placeholder: n("ask_ai_to_edit_styles"),
         className: "w-full border border-border focus:border-0",
         rows: 3,
-        onKeyDown: (m) => {
-          m.key === "Enter" && (m.preventDefault(), u.current && clearTimeout(u.current), g(void 0), r("styles", o, i, x));
+        onKeyDown: (g) => {
+          g.key === "Enter" && (g.preventDefault(), u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, x));
         }
       }
     ),
@@ -5519,7 +5574,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            u.current && clearTimeout(u.current), g(void 0), r("styles", o, i, x);
+            u.current && clearTimeout(u.current), m(void 0), r("styles", o, i, x);
           },
           variant: "default",
           className: "w-fit",
@@ -5555,25 +5610,25 @@ const AskAIStyles = ({ blockId: o }) => {
   keys: ["name"]
 });
 function ManualClasses() {
-  var A;
-  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), g = (A = first(n)) == null ? void 0 : A.prop, x = reject((get(r, g, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), m = () => {
+  var w;
+  const { t: o } = useTranslation(), [n] = useSelectedStylingBlocks(), r = useSelectedBlock(), a = useAddClassesToBlocks(), l = useRemoveClassesFromBlocks(), [i] = useSelectedBlockIds(), c = useBuilderProp("askAiCallBack", null), [d, u] = useState(""), { toast: p } = useToast(), m = (w = first(n)) == null ? void 0 : w.prop, x = reject((get(r, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), g = () => {
     const N = d.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     a(i, N, !0), u("");
-  }, [E, b] = useState([]), _ = ({ value: N }) => {
-    const P = N.trim().toLowerCase(), L = P.match(/.+:/g);
-    let j = [];
-    if (L && L.length > 0) {
-      const [k] = L, S = P.replace(k, "");
-      j = fuse.search(S).map((T) => ({
-        ...T,
-        item: { ...T.item, name: k + T.item.name }
+  }, [E, f] = useState([]), j = ({ value: N }) => {
+    const D = N.trim().toLowerCase(), T = D.match(/.+:/g);
+    let b = [];
+    if (T && T.length > 0) {
+      const [_] = T, R = D.replace(_, "");
+      b = fuse.search(R).map((I) => ({
+        ...I,
+        item: { ...I.item, name: _ + I.item.name }
       }));
     } else
-      j = fuse.search(P);
-    return b(map(j, "item"));
-  }, v = () => {
-    b([]);
-  }, B = (N) => N.name, C = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), I = {
+      b = fuse.search(D);
+    return f(map(b, "item"));
+  }, k = () => {
+    f([]);
+  }, A = (N) => N.name, S = (N) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: N.name }), B = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -5581,11 +5636,11 @@ function ManualClasses() {
     placeholder: o("enter_classes_separated_by_space"),
     value: d,
     onKeyDown: (N) => {
-      N.key === "Enter" && d.trim() !== "" && m();
+      N.key === "Enter" && d.trim() !== "" && g();
     },
-    onChange: (N, { newValue: P }) => u(P),
+    onChange: (N, { newValue: D }) => u(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, w = () => {
+  }, C = () => {
     if (navigator.clipboard === void 0) {
       p({
         title: o("clipboard_not_supported"),
@@ -5608,7 +5663,7 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: o("classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: w, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: C, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: o("copy_classes_to_clipboard") }) })
             ] })
           ] }),
@@ -5625,11 +5680,11 @@ function ManualClasses() {
             Autosuggest,
             {
               suggestions: E,
-              onSuggestionsFetchRequested: _,
-              onSuggestionsClearRequested: v,
-              getSuggestionValue: B,
-              renderSuggestion: C,
-              inputProps: I,
+              onSuggestionsFetchRequested: j,
+              onSuggestionsClearRequested: k,
+              getSuggestionValue: A,
+              renderSuggestion: S,
+              inputProps: B,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border"
               },
@@ -5645,7 +5700,7 @@ function ManualClasses() {
             {
               variant: "outline",
               className: "h-6 border-border",
-              onClick: m,
+              onClick: g,
               disabled: d.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -6059,38 +6114,38 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, u] = useState({ color: "", shade: "" }), p = a.split("-"), g = get(p, "1", ""), x = get(p, "2", ""), m = useCallback(
+  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", ""), x = 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((_) => ({ ..._, color: b, shade: _.shade ? _.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((j) => ({ ...j, color: f, shade: j.shade ? j.shade : "500" })));
     },
     [c, u]
   );
   useEffect(() => {
-    if (["current", "inherit", "transparent", "black", "white"].includes(g))
+    if (["current", "inherit", "transparent", "black", "white"].includes(m))
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
-  }, [g]);
+  }, [m]);
   const E = useCallback(
     // eslint-disable-next-line no-shadow
-    (b) => {
-      u({ color: g, shade: b });
+    (f) => {
+      u({ color: m, shade: f });
     },
-    [g]
+    [m]
   );
   return useEffect(() => {
     u({ color: "", shade: "" });
   }, [r]), useEffect(() => {
-    const _ = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    _.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && n(_, o);
+    const j = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    j.match(new RegExp(get(CLASSES_LIST, `${o}.regExp`, ""))) && n(j, o);
   }, [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,
       {
         disabled: !l,
         rounded: !0,
-        selected: g,
-        onChange: m,
+        selected: m,
+        onChange: g,
         options: [
           "current",
           "transparent",
@@ -6123,7 +6178,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: x, disabled: !g || !l, onChange: E, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: x, disabled: !m || !l, onChange: E, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -6318,50 +6373,50 @@ 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: g } = o, [x, m] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [E, b] = useState(!1), [_, v] = useState(""), [B, C] = useState(!1), [I, w] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: u, units: p, negative: m } = o, [x, g] = useState(u != null && u.toLowerCase().includes("width") ? "%" : p[0]), [E, f] = useState(!1), [j, k] = useState(""), [A, S] = useState(!1), [B, C] = useState(!1);
   useEffect(() => {
-    const { value: j, unit: k } = getClassValueAndUnit(i);
-    if (k === "") {
-      l(j), m(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
+    const { value: b, unit: _ } = getClassValueAndUnit(i);
+    if (_ === "") {
+      l(b), g(u != null && u.toLowerCase().includes("width") ? "%" : first(p));
       return;
     }
-    m(k), l(k === "class" || isEmpty(j) ? "" : j);
+    g(_), l(_ === "class" || isEmpty(b) ? "" : b);
   }, [i, u, p]);
-  const A = useThrottledCallback((j) => c(j), [c], THROTTLE_TIME), N = useThrottledCallback((j) => c(j, !1), [c], THROTTLE_TIME), P = useCallback(
-    (j = !1) => {
-      const k = getUserInputValues(`${a}`, p);
-      if (get(k, "error", !1)) {
-        b(!0);
+  const w = useThrottledCallback((b) => c(b), [c], THROTTLE_TIME), N = useThrottledCallback((b) => c(b, !1), [c], THROTTLE_TIME), D = useCallback(
+    (b = !1) => {
+      const _ = getUserInputValues(`${a}`, p);
+      if (get(_, "error", !1)) {
+        f(!0);
         return;
       }
-      const S = get(k, "unit") !== "" ? get(k, "unit") : x;
-      if (S === "auto" || S === "none") {
-        A(`${d}${S}`);
+      const R = get(_, "unit") !== "" ? get(_, "unit") : x;
+      if (R === "auto" || R === "none") {
+        w(`${d}${R}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const T = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      j ? N(T) : A(T);
+      const I = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      b ? N(I) : w(I);
     },
-    [A, N, a, x, d, p]
-  ), L = useCallback(
-    (j) => {
-      const k = getUserInputValues(`${a}`, p);
-      if (get(k, "error", !1)) {
-        b(!0);
+    [w, N, a, x, d, p]
+  ), T = useCallback(
+    (b) => {
+      const _ = getUserInputValues(`${a}`, p);
+      if (get(_, "error", !1)) {
+        f(!0);
         return;
       }
-      if (j === "auto" || j === "none") {
-        A(`${d}${j}`);
+      if (b === "auto" || b === "none") {
+        w(`${d}${b}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(_, "value") === "")
         return;
-      const S = get(k, "unit") !== "" ? get(k, "unit") : j, T = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${S === "-" ? "" : S}]`;
-      A(T);
+      const R = get(_, "unit") !== "" ? get(_, "unit") : b, I = `${get(_, "value", "").startsWith("-") ? "-" : ""}${d}[${get(_, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      w(I);
     },
-    [A, a, d, p]
+    [w, a, d, p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: x === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
@@ -6369,37 +6424,37 @@ 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 ${B ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${A ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(x) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           readOnly: x === "class",
-          onKeyPress: (j) => {
-            j.key === "Enter" && P();
+          onKeyPress: (b) => {
+            b.key === "Enter" && D();
           },
-          onKeyDown: (j) => {
-            if (j.keyCode !== 38 && j.keyCode !== 40)
+          onKeyDown: (b) => {
+            if (b.keyCode !== 38 && b.keyCode !== 40)
               return;
-            j.preventDefault(), w(!0);
-            const k = parseInt$1(j.target.value);
-            let S = isNaN$1(k) ? 0 : k;
-            j.keyCode === 38 && (S += 1), j.keyCode === 40 && (S -= 1);
-            const R = `${S}`, D = `${R.startsWith("-") ? "-" : ""}${d}[${R.replace("-", "")}${x === "-" ? "" : x}]`;
-            N(D);
+            b.preventDefault(), C(!0);
+            const _ = parseInt$1(b.target.value);
+            let R = isNaN$1(_) ? 0 : _;
+            b.keyCode === 38 && (R += 1), b.keyCode === 40 && (R -= 1);
+            const v = `${R}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${x === "-" ? "" : x}]`;
+            N(L);
           },
-          onKeyUp: (j) => {
-            I && (j.preventDefault(), w(!1));
+          onKeyUp: (b) => {
+            B && (b.preventDefault(), C(!1));
           },
-          onBlur: () => P(),
-          onChange: (j) => {
-            b(!1), l(j.target.value);
+          onBlur: () => D(),
+          onChange: (b) => {
+            f(!1), l(b.target.value);
           },
-          onClick: (j) => {
-            var k;
-            (k = j == null ? void 0 : j.target) == null || k.select(), r(!1);
+          onClick: (b) => {
+            var _;
+            (_ = b == null ? void 0 : b.target) == null || _.select(), r(!1);
           },
-          value: B ? _ : a,
+          value: A ? j : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             E ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6424,33 +6479,33 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           {
             units: p,
             current: x,
-            onSelect: (j) => {
-              r(!1), m(j), L(j);
+            onSelect: (b) => {
+              r(!1), g(b), T(b);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(x) !== -1 || B ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(x) !== -1 || A ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => C(!0),
-        onDragEnd: (j) => {
-          if (v(() => ""), C(!1), isEmpty(j))
+        onDragStart: () => S(!0),
+        onDragEnd: (b) => {
+          if (k(() => ""), S(!1), isEmpty(b))
             return;
-          const k = `${j}`, R = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${x === "-" ? "" : x}]`;
-          A(R);
+          const _ = `${b}`, v = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${x === "-" ? "" : x}]`;
+          w(v);
         },
-        onDrag: (j) => {
-          if (isEmpty(j))
+        onDrag: (b) => {
+          if (isEmpty(b))
             return;
-          v(j);
-          const k = `${j}`, R = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${x === "-" ? "" : x}]`;
-          N(R);
+          k(b);
+          const _ = `${b}`, v = `${_.startsWith("-") ? "-" : ""}${d}[${_.replace("-", "")}${x === "-" ? "" : x}]`;
+          N(v);
         },
         currentValue: a,
         unit: x,
-        negative: g,
+        negative: m,
         cssProperty: u
       }
     )
@@ -6543,23 +6598,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(), [, g] = useCanvasWidth(), x = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), _ = useMemo(() => get(x, "fullCls", ""), [x]), v = useCallback(
-    (N, P = !0) => {
-      const L = { dark: u, mq: g, mod: p, cls: N, property: l, fullCls: "" };
-      (u || p !== "") && (L.mq = "xs");
-      const j = generateFullClsName(L);
-      m(b, [j], P);
+  }, units: c, negative: d = !1 } = o, [u] = useDarkMode(), [p] = useStylingState(), [, m] = useCanvasWidth(), x = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), E = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), j = useMemo(() => get(x, "fullCls", ""), [x]), k = useCallback(
+    (N, D = !0) => {
+      const T = { dark: u, mq: m, mod: p, cls: N, property: l, fullCls: "" };
+      (u || p !== "") && (T.mq = "xs");
+      const b = generateFullClsName(T);
+      g(f, [b], D);
     },
-    [b, u, g, p, l, m]
-  ), B = useCallback(() => {
-    E(b, [_]);
-  }, [b, _, E]), C = useMemo(() => canChangeClass(x, g), [x, g]);
+    [f, u, m, p, l, g]
+  ), A = useCallback(() => {
+    E(f, [j]);
+  }, [f, j, E]), S = useMemo(() => canChangeClass(x, m), [x, m]);
   useEffect(() => {
-    i(C, x);
-  }, [C, i, x]);
-  const [, , I] = useCanvasWidth(), w = useCallback(
+    i(S, x);
+  }, [S, i, x]);
+  const [, , B] = useCanvasWidth(), C = useCallback(
     (N) => {
-      I({
+      B({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6568,10 +6623,10 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         "2xl": 1920
       }[N]);
     },
-    [I]
-  ), A = get(x, "dark", null) === u && get(x, "mod", null) === p && get(x, "mq", null) === g;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: C, canReset: x && 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] ${x && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+    [B]
+  ), w = get(x, "dark", null) === u && get(x, "mod", null) === p && get(x, "mq", null) === m;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: S, canReset: x && w, 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] ${x && !w ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6580,17 +6635,17 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             currentClass: get(x, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: v,
+            onChange: k,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        r === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: v }),
-        r === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: v }),
-        r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: v }),
-        r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: v })
+        r === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: k }),
+        r === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: k }),
+        r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: k }),
+        r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: k })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${_ ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => B(), 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 && x ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${j ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => A(), 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 && x ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6610,7 +6665,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             "button",
             {
               type: "button",
-              onClick: () => w(get(x, "mq")),
+              onClick: () => C(get(x, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6631,7 +6686,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), x = useCallback((m) => map(g, "property").includes(m), [g]);
+  const { t: d } = useTranslation(), [u, p] = useState(n[0].key), m = useSelectedBlockCurrentClasses(), x = useCallback((g) => map(m, "property").includes(g), [m]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6640,7 +6695,7 @@ 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: m, key: E }) => /* @__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",
                 {
@@ -6655,7 +6710,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(m)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(g)) })
             ] }) }))
           ) })
         ] }),
@@ -6720,8 +6775,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   if (isEmpty(a) && (!has(i, "props") || isEmpty(d)))
     return null;
   const u = (p) => {
-    const g = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l([o._id], g, !0);
+    const m = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l([o._id], m, !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: [
@@ -6775,13 +6830,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (p) => {
-      const g = !get(i, "negative", !1), x = get(i, "cssProperty", "");
-      let m = parseFloat(i.dragStartValue);
-      m = isNaN(m) ? 0 : m;
+      const m = !get(i, "negative", !1), x = get(i, "cssProperty", "");
+      let g = parseFloat(i.dragStartValue);
+      g = isNaN(g) ? 0 : g;
       let E = MAPPER[i.dragUnit];
       (startsWith(x, "scale") || x === "opacity") && (E = 10);
-      let _ = (i.dragStartY - p.pageY) / E + m;
-      g && _ < 0 && (_ = 0), x === "opacity" && _ > 1 && (_ = 1), i.onDrag(`${_}`), l(`${_}`);
+      let j = (i.dragStartY - p.pageY) / E + g;
+      m && j < 0 && (j = 0), x === "opacity" && j > 1 && (j = 1), i.onDrag(`${j}`), l(`${j}`);
     },
     [i],
     50
@@ -6867,33 +6922,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(), [, p] = useHighlightBlockId(), g = get(o, "name", get(o, "label")), x = useFeature("dnd"), [, m] = useAtom$1(draggedBlockAtom), E = (v) => {
-    const B = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && B;
-  }, b = useCallback(
-    async (v) => {
-      if (v.stopPropagation(), has(o, "component")) {
+  const [a, l] = useState(!1), i = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: d } = useAddBlock(), [, u] = useSelectedBlockIds(), [, p] = useHighlightBlockId(), m = get(o, "name", get(o, "label")), x = useFeature("dnd"), [, g] = useAtom$1(draggedBlockAtom), E = (k) => {
+    const A = has(k, "styles_attrs.data-page-section");
+    return k._type === "Box" && A;
+  }, f = useCallback(
+    async (k) => {
+      if (k.stopPropagation(), has(o, "component")) {
         c(o, r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
         return;
       }
       l(!0);
-      const B = await i(n, o);
-      isEmpty(B) || d(syncBlocksWithDefaults(B), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
+      const A = await i(n, o);
+      isEmpty(A) || d(syncBlocksWithDefaults(A), r), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
     },
     [o]
-  ), _ = async (v) => {
-    const B = await i(n, o);
-    let C = r;
-    if (E(first(B)) && (C = null), !isEmpty(B)) {
-      const I = { blocks: B, uiLibrary: !0, parent: C };
-      if (v.dataTransfer.setData("text/plain", JSON.stringify(I)), o.preview) {
-        const w = new Image();
-        w.src = o.preview, w.onload = () => {
-          v.dataTransfer.setDragImage(w, 0, 0);
+  ), j = async (k) => {
+    const A = await i(n, o);
+    let S = r;
+    if (E(first(A)) && (S = null), !isEmpty(A)) {
+      const B = { blocks: A, uiLibrary: !0, parent: S };
+      if (k.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
+        const C = new Image();
+        C.src = o.preview, C.onload = () => {
+          k.dataTransfer.setDragImage(C, 0, 0);
         };
       } else
-        v.dataTransfer.setDragImage(new Image(), 0, 0);
-      m(I), setTimeout(() => {
+        k.dataTransfer.setDragImage(new Image(), 0, 0);
+      g(B), setTimeout(() => {
         u([]), p(null), emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
       }, 200);
     }
@@ -6903,9 +6958,9 @@ const BlockCard = ({
       "div",
       {
         onClick: a ? () => {
-        } : b,
+        } : f,
         draggable: x ? "true" : "false",
-        onDragStart: _,
+        onDragStart: j,
         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"
         ),
@@ -6914,11 +6969,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: g }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: m }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -6934,9 +6989,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o }) => {
-  const [n, r] = useAtom$1(selectedLibraryAtom), a = useBuilderProp("uiLibraries", []), l = useChaiBlocks(), 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"), [g, x] = useState("Hero"), m = get(p, g, []), E = useRef(null), { t: b } = useTranslation(), _ = (C) => {
+  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, x] = useState("Hero"), g = get(p, m, []), E = useRef(null), { t: f } = useTranslation(), j = (S) => {
     E.current && (clearTimeout(E.current), E.current = null), E.current = setTimeout(() => {
-      E.current && x(C);
+      E.current && x(S);
     }, 300);
   };
   if (u)
@@ -6944,30 +6999,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(m, (C, I) => I % 2 === 0), B = filter(m, (C, I) => I % 2 === 1);
+  const k = filter(g, (S, B) => B % 2 === 0), A = filter(g, (S, B) => B % 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: b("groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: f("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, (C, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(p, (S, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => _(I),
+              onMouseEnter: () => j(B),
               onMouseLeave: () => clearTimeout(E.current),
-              onClick: () => x(I),
+              onClick: () => x(B),
               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",
-                I === g ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                B === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(I.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(f(B.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            I
+            B
           ))
         ) })
       ] })
@@ -6980,10 +7035,10 @@ const BlockCard = ({
         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(
-              v.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
+              k.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              B.map((C) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: C, library: c }))
+              A.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, block: S, library: c }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7428,14 +7483,14 @@ 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(), [, g] = useHighlightBlockId(), x = () => {
+  const [, a] = useAtom$1(draggedBlockAtom), { type: l, icon: i, label: c } = o, { addCoreBlock: d, addPredefinedBlock: u } = useAddBlock(), [, p] = useSelectedBlockIds(), [, m] = useHighlightBlockId(), x = () => {
     if (console.log("addBlockToPage", o, r), has(o, "blocks")) {
-      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(b), r || null);
+      const f = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(f), r || null);
     } else
       d(o, r || null);
     emitChaiBuilderMsg({ name: CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK });
-  }, m = useFeature("dnd"), { t: E } = 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",
@@ -7443,12 +7498,12 @@ const CoreBlock = ({ block: o, disabled: n, parentId: r }) => {
         disabled: n,
         onClick: x,
         type: "button",
-        onDragStart: (b) => {
-          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
-            p([]), g(null);
+        onDragStart: (f) => {
+          f.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), f.dataTransfer.setDragImage(new Image(), 0, 0), a(omit(o, ["component", "icon"])), setTimeout(() => {
+            p([]), m(null);
           }, 200);
         },
-        draggable: m ? "true" : "false",
+        draggable: g ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(i || BoxIcon, { className: "w-4 h-4 mx-auto" }),
@@ -7617,14 +7672,14 @@ 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, g] = useState(), x = useRef(null), m = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, u] = useState(!0), [p, m] = useState(), x = useRef(null), g = useRef(null);
   useEffect(() => {
-    var b;
-    (b = x.current) == null || b.focus();
+    var f;
+    (f = x.current) == null || f.focus();
   }, []);
-  const E = (b) => {
-    const { usage: _ } = b || {};
-    !l && _ && g(_), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const E = (f) => {
+    const { usage: j } = f || {};
+    !l && j && m(j), g.current = setTimeout(() => m(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7644,12 +7699,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: x,
           value: i,
-          onChange: (b) => c(b.target.value),
+          onChange: (f) => c(f.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, E));
+          onKeyDown: (f) => {
+            f.key === "Enter" && (f.preventDefault(), g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E));
           }
         }
       ),
@@ -7659,7 +7714,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, E);
+              g.current && clearTimeout(g.current), m(void 0), r("content", o, i, E);
             },
             variant: "default",
             className: "w-fit",
@@ -7691,8 +7746,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         QuickPrompts,
         {
-          onClick: (b) => {
-            m.current && clearTimeout(m.current), g(void 0), r("content", o, b, E);
+          onClick: (f) => {
+            g.current && clearTimeout(g.current), m(void 0), r("content", o, f, E);
           }
         }
       )
@@ -7702,7 +7757,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [u, p] = useState(null), [, g] = useState(!1), { toast: x } = useToast(), m = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [u, p] = useState(null), [, m] = useState(!1), { toast: x } = useToast(), g = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
@@ -7712,9 +7767,9 @@ const AIUserPrompt = ({ blockId: o }) => {
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), m.current.click();
-    } catch (b) {
-      p(b);
+      }), g.current.click();
+    } catch (f) {
+      p(f);
     } finally {
       d(!1);
     }
@@ -7722,25 +7777,25 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Accordion,
     {
-      onValueChange: (b) => {
-        g(b !== "");
+      onValueChange: (f) => {
+        m(f !== "");
       },
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: m, 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-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.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
             {
               ref: l,
               value: r,
-              onChange: (b) => a(b.target.value),
+              onChange: (f) => a(f.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (b) => {
-                b.key === "Enter" && (b.preventDefault(), E());
+              onKeyDown: (f) => {
+                f.key === "Enter" && (f.preventDefault(), E());
               }
             }
           ),
@@ -7802,42 +7857,42 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__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, g] = useState(null), [x, m] = useState(""), E = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, u] = useState(""), [p, m] = useState(null), [x, g] = useState(""), E = useRef(null), f = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const _ = () => {
+  const j = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      g("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const w = [...a, { key: i, value: d }];
-      r(w), l(a), c(""), u(""), m("");
+      const C = [...a, { key: i, value: d }];
+      r(C), l(a), c(""), u(""), g("");
     }
-  }, v = (w) => {
-    const A = a.filter((N, P) => P !== w);
-    r(A), l(A);
-  }, B = (w) => {
-    g(w), c(a[w].key), u(a[w].value);
-  }, C = () => {
+  }, k = (C) => {
+    const w = a.filter((N, D) => D !== C);
+    r(w), l(w);
+  }, A = (C) => {
+    m(C), c(a[C].key), u(a[C].value);
+  }, S = () => {
     if (i.startsWith("@")) {
-      m("Attribute keys cannot start with '@'");
+      g("Attribute keys cannot start with '@'");
       return;
     }
     if (p !== null && i) {
-      const w = [...a];
-      w[p] = { key: i, value: d }, r(w), l(w), g(null), c(""), u(""), m("");
+      const C = [...a];
+      C[p] = { key: i, value: d }, r(C), l(C), m(null), c(""), u(""), g("");
     }
-  }, I = (w) => {
-    w.key === "Enter" && !w.shiftKey && (w.preventDefault(), p !== null ? C() : _());
+  }, B = (C) => {
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), p !== null ? S() : j());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-full", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (w) => {
-          w.preventDefault(), p !== null ? C() : _();
+        onSubmit: (C) => {
+          C.preventDefault(), p !== null ? S() : j();
         },
         className: "space-y-3",
         children: [
@@ -7853,7 +7908,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   id: "attrKey",
                   ref: E,
                   value: i,
-                  onChange: (w) => c(w.target.value),
+                  onChange: (C) => c(C.target.value),
                   placeholder: "Key",
                   className: "h-8 text-sm"
                 }
@@ -7869,10 +7924,10 @@ const AIUserPrompt = ({ blockId: o }) => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: b,
+                  ref: f,
                   value: d,
-                  onChange: (w) => u(w.target.value),
-                  onKeyDown: I,
+                  onChange: (C) => u(C.target.value),
+                  onKeyDown: B,
                   placeholder: "Value",
                   className: "bg-background text-sm"
                 }
@@ -7884,22 +7939,22 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__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.jsx("div", { className: "mt-4 space-y-1 overflow-y-auto", children: a.map((C, w) => /* @__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("span", { className: "truncate font-semibold", children: C.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] text-muted-foreground", children: C.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: () => B(A), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(w), 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: () => v(A), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => k(w), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sr-only", children: "Remove attribute" })
         ] })
       ] })
-    ] }, A)) })
+    ] }, w)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8316,16 +8371,16 @@ function RemoveProviderConfirmation({
 }
 const PageDataProviders = () => {
   const { t: o } = useTranslation(), n = useMemo(() => getChaiDataProviders(), []), [r, a] = usePageDataProviders(), [, l] = useAtom$1(builderSaveStateAtom), [i, c] = useState(
-    filter(n, (_) => map(r, "providerKey").includes(_.providerKey))
-  ), [d, u] = useState(""), [p, g] = useState(null), x = filter(
-    n.map((_) => map(i, "providerKey").includes(_.providerKey) ? null : { value: _.providerKey, label: _.name }),
-    (_) => !isNull(_)
-  ), m = (_) => {
-    const v = find(n, { providerKey: _ });
-    c((B) => [...B, v]), a((B) => [...B, { providerKey: v.providerKey, args: {} }]), u(""), l("UNSAVED");
-  }, E = (_) => {
-    c((v) => filter(v, (B) => B.providerKey !== _.providerKey)), a((v) => filter(v, (B) => B.providerKey !== _.providerKey)), l("UNSAVED");
-  }, b = (_) => g(_);
+    filter(n, (j) => map(r, "providerKey").includes(j.providerKey))
+  ), [d, u] = useState(""), [p, m] = useState(null), x = filter(
+    n.map((j) => map(i, "providerKey").includes(j.providerKey) ? null : { value: j.providerKey, label: j.name }),
+    (j) => !isNull(j)
+  ), g = (j) => {
+    const k = find(n, { providerKey: j });
+    c((A) => [...A, k]), a((A) => [...A, { providerKey: k.providerKey, args: {} }]), u(""), l("UNSAVED");
+  }, E = (j) => {
+    c((k) => filter(k, (A) => A.providerKey !== j.providerKey)), a((k) => filter(k, (A) => A.providerKey !== j.providerKey)), l("UNSAVED");
+  }, f = (j) => m(j);
   return isEmpty(n) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mb-1.5 p-4 text-xs text-gray-500", children: [
     o("no_data_providers"),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8333,11 +8388,11 @@ const PageDataProviders = () => {
   ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "px-1", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx("label", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mb-1.5 text-xs text-gray-500", children: o("add_data_providers") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: d, onValueChange: (_) => m(_), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center space-x-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: d, onValueChange: (j) => g(j), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: o("select_provider") }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "", children: o("choose") }),
-        x.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: _.value, children: _.label }, _.value))
+        x.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: j.value, children: j.label }, j.value))
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -8346,21 +8401,21 @@ const PageDataProviders = () => {
         o("page_data_providers"),
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: i.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: i.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: "w-full rounded-lg border border-border bg-card text-card-foreground shadow-sm",
           "data-v0-t": "card",
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1.5 px-4 pt-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium leading-4", children: _.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "pt-1 text-xs text-gray-400", children: _.description })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium leading-4", children: j.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "pt-1 text-xs text-gray-400", children: j.description })
             ] }) }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-2 py-2", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
-                  onClick: () => b(_),
+                  onClick: () => f(j),
                   className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-blue-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
                   children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8386,7 +8441,7 @@ const PageDataProviders = () => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveProviderConfirmation, { onRemove: () => E(_), name: _.name, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-red-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(RemoveProviderConfirmation, { onRemove: () => E(j), name: j.name, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "inline-flex h-9 items-center justify-center rounded-md px-3 text-xs font-medium text-red-500 underline-offset-4 ring-offset-background transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(
                   "svg",
                   {
@@ -8412,16 +8467,16 @@ const PageDataProviders = () => {
             ] })
           ]
         },
-        _.providerKey
+        j.providerKey
       )) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => g(null), provider: p })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ViewProviderData, { onClose: () => m(null), provider: p })
     ] })
   ] });
 };
 function AiFillDatabase(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 1024 1024" }, child: [{ tag: "path", attr: { d: "M832 64H192c-17.7 0-32 14.3-32 32v224h704V96c0-17.7-14.3-32-32-32zM288 232c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zM160 928c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V704H160v224zm128-136c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40zM160 640h704V384H160v256zm128-168c22.1 0 40 17.9 40 40s-17.9 40-40 40-40-17.9-40-40 17.9-40 40-40z" }, child: [] }] })(o);
 }
-const TopBar = lazy(() => import("./Topbar-xeW18bO-.js"));
+const TopBar = lazy(() => import("./Topbar-bca7NmyC.js"));
 function useSidebarMenuItems(o) {
   const n = o === "SINGLE_SIDE_PANEL", { t: r } = useTranslation(), a = useBuilderProp("dataBindingSupport", !1), l = useBuilderProp("askAiCallBack", null);
   return useMemo(() => {
@@ -8448,14 +8503,14 @@ function isDualLayout(o) {
 }
 const RootLayout = () => {
   const [o, n] = useState(0), [r] = useLayoutVariant(), [a, l] = useState(!1);
-  useChaiBuilderMsgListener(({ name: m }) => {
-    m === CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS && n(1);
+  useChaiBuilderMsgListener(({ name: g }) => {
+    g === CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS && n(1);
   });
-  const i = useBuilderProp("sideBarComponents.top", []), c = (m) => {
-    m.preventDefault();
-  }, d = (m) => {
-    n(o === m ? null : m);
-  }, u = useSidebarMenuItems(r), { t: p } = useTranslation(), g = [...u, ...i], x = useBuilderProp("htmlDir", "ltr");
+  const i = useBuilderProp("sideBarComponents.top", []), c = (g) => {
+    g.preventDefault();
+  }, d = (g) => {
+    n(o === g ? null : g);
+  }, u = useSidebarMenuItems(r), { t: p } = useTranslation(), m = [...u, ...i], x = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: x, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -8466,18 +8521,18 @@ 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: g.map((m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((g, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
                     variant: o === E ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => d(E),
-                    children: get(m, "icon", null)
+                    children: get(g, "icon", null)
                   },
                   E
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p(m.label) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: p(g.label) }) })
               ] }, "button" + E)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col space-y-1", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -8496,10 +8551,10 @@ const RootLayout = () => {
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
-                    get(g, `${o}.icon`, null),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p(g[o].label) })
+                    get(m, `${o}.icon`, null),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: p(m[o].label) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(g, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
                 ] }) })
               }
             ),
@@ -8572,7 +8627,7 @@ const RootLayout = () => {
   }, r * 1e3);
 }, ChaiBuilderComponent = (o) => {
   const [, n] = useBlocksStore(), [, r] = useBrandingOptions(), a = useBuilderReset(), [l] = useAtom(builderSaveStateAtom), i = useMemo(() => o.layout || RootLayout, [o.layout]);
-  return useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchGlobalBlocks(), useEffect(() => {
+  return useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchGlobalBlocks(), useWatchRSCBlocks(), useEffect(() => {
     builderStore.set(
       // @ts-ignore
       chaiBuilderPropsAtom,