@chaibuilder/sdk 2.0.0-beta.107 → 2.0.0-beta.109

package/dist/core.js

@@ -13,7 +13,7 @@ import { useTranslation as Ve } from "react-i18next";
 import { g as generateUUID, a as getBreakpointValue, c as cn$1, G as GenIcon } from "./iconBase-DHfFLkem.js";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, BoxIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CardStackIcon, CardStackPlusIcon, ScissorsIcon, CheckIcon, SunIcon, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import { useThrottledCallback, useDebouncedCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { useFeature, FlagsProvider } from "flagged";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
@@ -22,7 +22,7 @@ import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThe
 import TreeModel from "tree-model";
 import { useHotkeys } from "react-hotkeys-hook";
 import { toast } from "sonner";
-import { PlusIcon as PlusIcon$1, PanelRightClose, PanelRightOpen, AppWindowIcon, AlignHorizontalJustifyStart, UnfoldHorizontal, DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { PlusIcon as PlusIcon$1, ChevronRight, DatabaseIcon, ChevronLeft, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, X, Plus, PlusCircle, ChevronDown, Loader, SparklesIcon, EyeOff, Eye, SmileIcon, ShuffleIcon, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import typography from "@tailwindcss/typography";
@@ -94,226 +94,226 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (f, ...h) => f.read(...h), p = (f, ...h) => f.write(...h), u = (f, h) => {
-  var b;
-  return (b = f.unstable_onInit) == null ? void 0 : b.call(f, h);
-}, g = (f, h) => {
-  var b;
-  return (b = f.onMount) == null ? void 0 : b.call(f, h);
-}, ...m) => {
-  const f = m[0] || ((w) => {
-    let T = o.get(w);
-    return T || (T = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(w, T), u == null || u(w, _)), T;
-  }), h = m[1] || (() => {
-    let w, T;
-    const k = (v) => {
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...h) => m.read(...h), p = (m, ...h) => m.write(...h), u = (m, h) => {
+  var x;
+  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, h);
+}, g = (m, h) => {
+  var x;
+  return (x = m.onMount) == null ? void 0 : x.call(m, h);
+}, ...f) => {
+  const m = f[0] || ((w) => {
+    let L = o.get(w);
+    return L || (L = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(w, L), u == null || u(w, _)), L;
+  }), h = f[1] || (() => {
+    let w, L;
+    const v = (k) => {
       try {
-        v();
-      } catch (N) {
-        w || (w = !0, T = N);
+        k();
+      } catch (E) {
+        w || (w = !0, L = E);
       }
     };
     do {
-      c.f && k(c.f);
-      const v = /* @__PURE__ */ new Set(), N = v.add.bind(v);
-      a.forEach((I) => {
-        var L;
-        return (L = n.get(I)) == null ? void 0 : L.l.forEach(N);
-      }), a.clear(), i.forEach(N), i.clear(), l.forEach(N), l.clear(), v.forEach(k), a.size && b();
+      c.f && v(c.f);
+      const k = /* @__PURE__ */ new Set(), E = k.add.bind(k);
+      a.forEach((T) => {
+        var I;
+        return (I = n.get(T)) == null ? void 0 : I.l.forEach(E);
+      }), a.clear(), i.forEach(E), i.clear(), l.forEach(E), l.clear(), k.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
     if (w)
-      throw T;
-  }), b = m[2] || (() => {
-    const w = [], T = /* @__PURE__ */ new WeakSet(), k = /* @__PURE__ */ new WeakSet(), v = Array.from(a);
-    for (; v.length; ) {
-      const N = v[v.length - 1], I = f(N);
-      if (k.has(N)) {
-        v.pop();
+      throw L;
+  }), x = f[2] || (() => {
+    const w = [], L = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
+    for (; k.length; ) {
+      const E = k[k.length - 1], T = m(E);
+      if (v.has(E)) {
+        k.pop();
         continue;
       }
-      if (T.has(N)) {
-        r.get(N) === I.n && w.push([N, I]), k.add(N), v.pop();
+      if (L.has(E)) {
+        r.get(E) === T.n && w.push([E, T]), v.add(E), k.pop();
         continue;
       }
-      T.add(N);
-      for (const L of getMountedOrPendingDependents(N, I, n))
-        T.has(L) || v.push(L);
+      L.add(E);
+      for (const I of getMountedOrPendingDependents(E, T, n))
+        L.has(I) || k.push(I);
     }
-    for (let N = w.length - 1; N >= 0; --N) {
-      const [I, L] = w[N];
-      let P = !1;
-      for (const E of L.d.keys())
-        if (E !== I && a.has(E)) {
-          P = !0;
+    for (let E = w.length - 1; E >= 0; --E) {
+      const [T, I] = w[E];
+      let R = !1;
+      for (const N of I.d.keys())
+        if (N !== T && a.has(N)) {
+          R = !0;
           break;
         }
-      P && (x(I), j(I)), r.delete(I);
+      R && (b(T), j(T)), r.delete(T);
     }
-  }), x = m[3] || ((w) => {
-    var T, k;
-    const v = f(w);
-    if (isAtomStateInitialized(v) && (n.has(w) && r.get(w) !== v.n || Array.from(v.d).every(
-      ([R, O]) => (
+  }), b = f[3] || ((w) => {
+    var L, v;
+    const k = m(w);
+    if (isAtomStateInitialized(k) && (n.has(w) && r.get(w) !== k.n || Array.from(k.d).every(
+      ([P, O]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        x(R).n === O
+        b(P).n === O
       )
     )))
-      return v;
-    v.d.clear();
-    let N = !0;
-    const I = () => {
-      n.has(w) && (j(w), b(), h());
-    }, L = (R) => {
+      return k;
+    k.d.clear();
+    let E = !0;
+    const T = () => {
+      n.has(w) && (j(w), x(), h());
+    }, I = (P) => {
       var O;
-      if (isSelfAtom(w, R)) {
-        const H = f(R);
+      if (isSelfAtom(w, P)) {
+        const H = m(P);
         if (!isAtomStateInitialized(H))
-          if (hasInitialValue(R))
-            setAtomStateValueOrPromise(R, R.init, f);
+          if (hasInitialValue(P))
+            setAtomStateValueOrPromise(P, P.init, m);
           else
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const $ = x(R);
+      const $ = b(P);
       try {
         return returnAtomValue($);
       } finally {
-        v.d.set(R, $.n), isPendingPromise(v.v) && addPendingPromiseToDependency(w, v.v, $), (O = n.get(R)) == null || O.t.add(w), N || I();
+        k.d.set(P, $.n), isPendingPromise(k.v) && addPendingPromiseToDependency(w, k.v, $), (O = n.get(P)) == null || O.t.add(w), E || T();
       }
     };
-    let P, E;
+    let R, N;
     const D = {
       get signal() {
-        return P || (P = new AbortController()), P.signal;
+        return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !E && isActuallyWritableAtom(w) && (E = (...R) => {
-          if (!N)
+        return !N && isActuallyWritableAtom(w) && (N = (...P) => {
+          if (!E)
             try {
-              return A(w, ...R);
+              return B(w, ...P);
             } finally {
-              b(), h();
+              x(), h();
             }
-        }), E;
+        }), N;
       }
-    }, M = v.n;
+    }, M = k.n;
     try {
-      const R = d(w, L, D);
-      return setAtomStateValueOrPromise(w, R, f), isPromiseLike$2(R) && ((T = R.onCancel) == null || T.call(R, () => P == null ? void 0 : P.abort()), R.then(
-        I,
-        I
-      )), v;
-    } catch (R) {
-      return delete v.v, v.e = R, ++v.n, v;
+      const P = d(w, I, D);
+      return setAtomStateValueOrPromise(w, P, m), isPromiseLike$2(P) && ((L = P.onCancel) == null || L.call(P, () => R == null ? void 0 : R.abort()), P.then(
+        T,
+        T
+      )), k;
+    } catch (P) {
+      return delete k.v, k.e = P, ++k.n, k;
     } finally {
-      N = !1, M !== v.n && r.get(w) === M && (r.set(w, v.n), a.add(w), (k = c.c) == null || k.call(c, w));
+      E = !1, M !== k.n && r.get(w) === M && (r.set(w, k.n), a.add(w), (v = c.c) == null || v.call(c, w));
     }
-  }), y = m[4] || ((w) => {
-    const T = [w];
-    for (; T.length; ) {
-      const k = T.pop(), v = f(k);
-      for (const N of getMountedOrPendingDependents(k, v, n)) {
-        const I = f(N);
-        r.set(N, I.n), T.push(N);
+  }), y = f[4] || ((w) => {
+    const L = [w];
+    for (; L.length; ) {
+      const v = L.pop(), k = m(v);
+      for (const E of getMountedOrPendingDependents(v, k, n)) {
+        const T = m(E);
+        r.set(E, T.n), L.push(E);
       }
     }
-  }), A = m[5] || ((w, ...T) => {
-    let k = !0;
-    const v = (I) => returnAtomValue(x(I)), N = (I, ...L) => {
-      var P;
-      const E = f(I);
+  }), B = f[5] || ((w, ...L) => {
+    let v = !0;
+    const k = (T) => returnAtomValue(b(T)), E = (T, ...I) => {
+      var R;
+      const N = m(T);
       try {
-        if (isSelfAtom(w, I)) {
-          if (!hasInitialValue(I))
+        if (isSelfAtom(w, T)) {
+          if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = E.n, M = L[0];
-          setAtomStateValueOrPromise(I, M, f), j(I), D !== E.n && (a.add(I), (P = c.c) == null || P.call(c, I), y(I));
+          const D = N.n, M = I[0];
+          setAtomStateValueOrPromise(T, M, m), j(T), D !== N.n && (a.add(T), (R = c.c) == null || R.call(c, T), y(T));
           return;
         } else
-          return A(I, ...L);
+          return B(T, ...I);
       } finally {
-        k || (b(), h());
+        v || (x(), h());
       }
     };
     try {
-      return p(w, v, N, ...T);
+      return p(w, k, E, ...L);
     } finally {
-      k = !1;
+      v = !1;
     }
-  }), j = m[6] || ((w) => {
-    var T;
-    const k = f(w), v = n.get(w);
-    if (v && !isPendingPromise(k.v)) {
-      for (const [N, I] of k.d)
-        if (!v.d.has(N)) {
-          const L = f(N);
-          C(N).t.add(w), v.d.add(N), I !== L.n && (a.add(N), (T = c.c) == null || T.call(c, N), y(N));
+  }), j = f[6] || ((w) => {
+    var L;
+    const v = m(w), k = n.get(w);
+    if (k && !isPendingPromise(v.v)) {
+      for (const [E, T] of v.d)
+        if (!k.d.has(E)) {
+          const I = m(E);
+          C(E).t.add(w), k.d.add(E), T !== I.n && (a.add(E), (L = c.c) == null || L.call(c, E), y(E));
         }
-      for (const N of v.d || [])
-        if (!k.d.has(N)) {
-          v.d.delete(N);
-          const I = S(N);
-          I == null || I.t.delete(w);
+      for (const E of k.d || [])
+        if (!v.d.has(E)) {
+          k.d.delete(E);
+          const T = S(E);
+          T == null || T.t.delete(w);
         }
     }
-  }), C = m[7] || ((w) => {
-    var T;
-    const k = f(w);
-    let v = n.get(w);
-    if (!v) {
-      x(w);
-      for (const N of k.d.keys())
-        C(N).t.add(w);
-      if (v = {
+  }), C = f[7] || ((w) => {
+    var L;
+    const v = m(w);
+    let k = n.get(w);
+    if (!k) {
+      b(w);
+      for (const E of v.d.keys())
+        C(E).t.add(w);
+      if (k = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(k.d.keys()),
+        d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(w, v), (T = c.m) == null || T.call(c, w), isActuallyWritableAtom(w)) {
-        const N = () => {
-          let I = !0;
-          const L = (...P) => {
+      }, n.set(w, k), (L = c.m) == null || L.call(c, w), isActuallyWritableAtom(w)) {
+        const E = () => {
+          let T = !0;
+          const I = (...R) => {
             try {
-              return A(w, ...P);
+              return B(w, ...R);
             } finally {
-              I || (b(), h());
+              T || (x(), h());
             }
           };
           try {
-            const P = g(w, L);
-            P && (v.u = () => {
-              I = !0;
+            const R = g(w, I);
+            R && (k.u = () => {
+              T = !0;
               try {
-                P();
+                R();
               } finally {
-                I = !1;
+                T = !1;
               }
             });
           } finally {
-            I = !1;
+            T = !1;
           }
         };
-        l.add(N);
+        l.add(E);
       }
     }
-    return v;
-  }), S = m[8] || ((w) => {
-    var T;
-    const k = f(w);
-    let v = n.get(w);
-    if (v && !v.l.size && !Array.from(v.t).some((N) => {
-      var I;
-      return (I = n.get(N)) == null ? void 0 : I.d.has(w);
+    return k;
+  }), S = f[8] || ((w) => {
+    var L;
+    const v = m(w);
+    let k = n.get(w);
+    if (k && !k.l.size && !Array.from(k.t).some((E) => {
+      var T;
+      return (T = n.get(E)) == null ? void 0 : T.d.has(w);
     })) {
-      v.u && i.add(v.u), v = void 0, n.delete(w), (T = c.u) == null || T.call(c, w);
-      for (const N of k.d.keys()) {
-        const I = S(N);
-        I == null || I.t.delete(w);
+      k.u && i.add(k.u), k = void 0, n.delete(w), (L = c.u) == null || L.call(c, w);
+      for (const E of v.d.keys()) {
+        const T = S(E);
+        T == null || T.t.delete(w);
       }
       return;
     }
-    return v;
-  }), B = [
+    return k;
+  }), A = [
     // store state
     o,
     n,
@@ -328,32 +328,32 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     u,
     g,
     // building-block functions
-    f,
+    m,
     h,
-    b,
     x,
+    b,
     y,
-    A,
+    B,
     j,
     C,
     S
   ], _ = {
-    get: (w) => returnAtomValue(x(w)),
-    set: (w, ...T) => {
+    get: (w) => returnAtomValue(b(w)),
+    set: (w, ...L) => {
       try {
-        return A(w, ...T);
+        return B(w, ...L);
       } finally {
-        b(), h();
+        x(), h();
       }
     },
-    sub: (w, T) => {
-      const v = C(w).l;
-      return v.add(T), h(), () => {
-        v.delete(T), S(w), h();
+    sub: (w, L) => {
+      const k = C(w).l;
+      return k.add(L), h(), () => {
+        k.delete(L), S(w), h();
       };
     }
   };
-  return Object.defineProperty(_, BUILDING_BLOCKS, { value: B }), _;
+  return Object.defineProperty(_, BUILDING_BLOCKS, { value: A }), _;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(o, n) {
@@ -388,37 +388,37 @@ function splitAtom(o, n) {
         let p = r.get(c);
         if (p)
           return p;
-        const u = d && r.get(d), g = [], m = [];
-        return c.forEach((f, h) => {
-          const b = h;
-          m[h] = b;
-          const x = u && u.atomList[u.keyList.indexOf(b)];
-          if (x) {
-            g[h] = x;
+        const u = d && r.get(d), g = [], f = [];
+        return c.forEach((m, h) => {
+          const x = h;
+          f[h] = x;
+          const b = u && u.atomList[u.keyList.indexOf(x)];
+          if (b) {
+            g[h] = b;
             return;
           }
           const y = (j) => {
-            const C = j(l), S = j(o), _ = a(S, C == null ? void 0 : C.arr).keyList.indexOf(b);
+            const C = j(l), S = j(o), _ = a(S, C == null ? void 0 : C.arr).keyList.indexOf(x);
             if (_ < 0 || _ >= S.length) {
-              const w = c[a(c).keyList.indexOf(b)];
+              const w = c[a(c).keyList.indexOf(x)];
               if (w)
                 return w;
               throw new Error("splitAtom: index out of bounds for read");
             }
             return S[_];
-          }, A = (j, C, S) => {
-            const B = j(l), _ = j(o), T = a(_, B == null ? void 0 : B.arr).keyList.indexOf(b);
-            if (T < 0 || T >= _.length)
+          }, B = (j, C, S) => {
+            const A = j(l), _ = j(o), L = a(_, A == null ? void 0 : A.arr).keyList.indexOf(x);
+            if (L < 0 || L >= _.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const k = isFunction(S) ? S(_[T]) : S;
-            Object.is(_[T], k) || C(o, [
-              ..._.slice(0, T),
-              k,
-              ..._.slice(T + 1)
+            const v = isFunction(S) ? S(_[L]) : S;
+            Object.is(_[L], v) || C(o, [
+              ..._.slice(0, L),
+              v,
+              ..._.slice(L + 1)
             ]);
           };
-          g[h] = isWritable(o) ? atom(y, A) : atom(y);
-        }), u && u.keyList.length === m.length && u.keyList.every((f, h) => f === m[h]) ? p = u : p = { arr: c, atomList: g, keyList: m }, r.set(c, p), p;
+          g[h] = isWritable(o) ? atom(y, B) : atom(y);
+        }), u && u.keyList.length === f.length && u.keyList.every((m, h) => m === f[h]) ? p = u : p = { arr: c, atomList: g, keyList: f }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -454,17 +454,17 @@ function splitAtom(o, n) {
             case "move": {
               const u = c(i).indexOf(p.atom), g = p.before ? c(i).indexOf(p.before) : c(i).length;
               if (u >= 0 && g >= 0) {
-                const m = c(o);
+                const f = c(o);
                 u < g ? d(o, [
-                  ...m.slice(0, u),
-                  ...m.slice(u + 1, g),
-                  m[u],
-                  ...m.slice(g)
+                  ...f.slice(0, u),
+                  ...f.slice(u + 1, g),
+                  f[u],
+                  ...f.slice(g)
                 ]) : d(o, [
-                  ...m.slice(0, g),
-                  m[u],
-                  ...m.slice(g, u),
-                  ...m.slice(u + 1)
+                  ...f.slice(0, g),
+                  f[u],
+                  ...f.slice(g, u),
+                  ...f.slice(u + 1)
                 ]);
               }
               break;
@@ -490,19 +490,19 @@ function createJSONStorage(o = () => {
   let a, l;
   const i = {
     getItem: (p, u) => {
-      var g, m;
-      const f = (b) => {
-        if (b = b || "", a !== b) {
+      var g, f;
+      const m = (x) => {
+        if (x = x || "", a !== x) {
           try {
-            l = JSON.parse(b, n == null ? void 0 : n.reviver);
+            l = JSON.parse(x, n == null ? void 0 : n.reviver);
           } catch {
             return u;
           }
-          a = b;
+          a = x;
         }
         return l;
-      }, h = (m = (g = o()) == null ? void 0 : g.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(h) ? h.then(f) : f(h);
+      }, h = (f = (g = o()) == null ? void 0 : g.getItem(p)) != null ? f : null;
+      return isPromiseLike$1(h) ? h.then(m) : m(h);
     },
     setItem: (p, u) => {
       var g;
@@ -515,12 +515,12 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, g, m) => p(u, (f) => {
+  }, c = (p) => (u, g, f) => p(u, (m) => {
     let h;
     try {
-      h = JSON.parse(f || "");
+      h = JSON.parse(m || "");
     } catch {
-      h = m;
+      h = f;
     }
     g(h);
   });
@@ -533,8 +533,8 @@ function createJSONStorage(o = () => {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const g = (m) => {
-      m.storageArea === o() && m.key === p && u(m.newValue);
+    const g = (f) => {
+      f.storageArea === o() && f.key === p && u(f.newValue);
     };
     return window.addEventListener("storage", g), () => {
       window.removeEventListener("storage", g);
@@ -1200,8 +1200,29 @@ const useSelectedBlocksDisplayChild = () => ({
   );
   return [o, n, r];
 }, removeNestedBlocks = (o, n) => {
-  const r = [], a = filter(o, (l) => includes(n, l._id) || includes(n, l._parent) ? (r.push(l._id), !1) : !0);
-  return isEmpty(r) ? a : removeNestedBlocks(a, r);
+  let r = [...o], a = [];
+  n.forEach((d) => {
+    const p = r.find((f) => f._id === d);
+    if (!p || !p._parent) return;
+    const u = p._parent, g = r.filter((f) => f._parent === u);
+    if (g.length === 2) {
+      const f = g.find((m) => m._id !== d);
+      if (f && f._type === "Text") {
+        const m = r.find((h) => h._id === u);
+        m && "content" in m && (r = r.map((h) => {
+          if (h._id === u) {
+            const x = { ...h, content: f.content };
+            return Object.keys(f).forEach((b) => {
+              b.startsWith("content-") && (x[b] = f[b]);
+            }), x;
+          }
+          return h;
+        }), a.push(f._id));
+      }
+    }
+  });
+  const l = [...n, ...a], i = [], c = filter(r, (d) => includes(l, d._id) || includes(l, d._parent) ? (i.push(d._id), !1) : !0);
+  return isEmpty(i) ? c : removeNestedBlocks(c, i);
 }, useRemoveBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useSelectedBlockIds(), { setNewBlocks: a } = useBlocksStoreUndoableActions();
   return useCallback(
@@ -1255,19 +1276,43 @@ const useSelectedBlocksDisplayChild = () => ({
   { store: builderStore }
 );
 function insertBlocksAtPosition(o, n, r, a) {
-  let l = o.filter((d) => !d._parent);
-  r && (l = o.filter((d) => d._parent === r));
-  const i = !isNaN(a) || a > -1 ? Math.min(a, l.length) : l.length;
-  let c = o.length;
-  for (let d = 0, p = 0; d < o.length; d++)
-    if (o[d]._parent === r) {
-      if (p === i) {
-        c = d;
+  const l = [...n];
+  let i = [...o];
+  if (r) {
+    const u = o.find((g) => g._id === r);
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((f) => f._parent === r)) {
+      const m = {
+        _id: generateUUID(),
+        _parent: r,
+        _type: "Text",
+        content: u.content
+      };
+      Object.keys(u).forEach((h) => {
+        h.startsWith("content-") && (m[h] = u[h]);
+      }), l.unshift(m), i = i.map((h) => {
+        if (h._id === r) {
+          const x = { ...h, content: "" };
+          return Object.keys(x).forEach((b) => {
+            b.startsWith("content-") && (x[b] = "");
+          }), x;
+        }
+        return h;
+      });
+    }
+  }
+  let c = i.filter((u) => !u._parent);
+  r && (c = i.filter((u) => u._parent === r));
+  const d = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
+  let p = i.length;
+  for (let u = 0, g = 0; u < i.length; u++)
+    if (i[u]._parent === r) {
+      if (g === d) {
+        p = u;
         break;
       }
-      p++;
+      g++;
     }
-  return !r && a !== void 0 && a >= l.length && (c = o.length), [...o.slice(0, c), ...n, ...o.slice(c)];
+  return !r && a !== void 0 && a >= c.length && (p = i.length), [...i.slice(0, p), ...l, ...i.slice(p)];
 }
 function flattenTree(o) {
   let n = [];
@@ -1289,15 +1334,65 @@ function moveNode(o, n, r, a) {
   }
   return !1;
 }
+function handleOldParentTextBlock(o, n) {
+  if (!n || !n._parent) return o;
+  const r = n._parent, a = o.find((i) => i._id === r);
+  if (!a) return o;
+  const l = o.filter((i) => i._parent === r);
+  if (l.length === 2) {
+    const i = l.find((c) => c._id !== n._id);
+    if (i && i._type === "Text" && "content" in a)
+      return o.map((d) => {
+        if (d._id === r) {
+          const p = { ...d, content: i.content };
+          return Object.keys(i).forEach((u) => {
+            u.startsWith("content-") && (p[u] = i[u]);
+          }), p;
+        }
+        return d;
+      }).filter((d) => d._id !== i._id);
+  }
+  return o;
+}
+function handleNewParentTextBlock(o, n, r) {
+  if (!r || r === "root") return o;
+  const a = o.find((l) => l._id === r);
+  if (!a) return o;
+  if (a.content !== void 0 && a.content !== "" && !o.some((i) => i._parent === r && i._id !== n._id)) {
+    const c = {
+      _id: generateUUID(),
+      _parent: r,
+      _type: "Text",
+      content: a.content
+    };
+    Object.keys(a).forEach((u) => {
+      u.startsWith("content-") && (c[u] = a[u]);
+    });
+    const d = o.map((u) => {
+      if (u._id === r) {
+        const g = { ...u, content: "" };
+        return Object.keys(g).forEach((f) => {
+          f.startsWith("content-") && (g[f] = "");
+        }), g;
+      }
+      return u;
+    }), p = d.findIndex((u) => u._id === n._id);
+    return p !== -1 ? [...d.slice(0, p), c, ...d.slice(p)] : [c, ...d];
+  }
+  return o;
+}
 function moveBlocksWithChildren(o, n, r, a) {
   if (!n) return o;
-  r = r || "root";
-  const i = new TreeModel().parse({ _id: "root", children: getBlocksTree(o) });
-  if (moveNode(i, n, r, a)) {
-    const c = flattenTree(i), d = c.find((p) => p._id === n);
-    return d && (d._parent = r === "root" ? null : r), c.shift(), c;
+  const l = o.find((u) => u._id === n);
+  if (!l) return o;
+  let i = handleOldParentTextBlock(o, l);
+  const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
+  if (moveNode(p, n, c, a)) {
+    let u = flattenTree(p);
+    const g = u.find((f) => f._id === n);
+    return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
   }
-  return o;
+  return i;
 }
 const useBlocksStoreManager = () => {
   const [, o] = useBlocksStore(), { postMessage: n } = useBroadcastChannel(), r = useUpdateBlockAtom();
@@ -1344,65 +1439,65 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, x, y) => {
-      const A = map(b, (C) => {
-        const B = n.find((T) => T._id === C)._parent || null, w = n.filter((T) => B ? T._parent === B : !T._parent).map((T) => T._id).indexOf(C);
-        return { _id: C, oldParent: B, oldPosition: w };
-      }), j = A.find(({ _id: C }) => C === b[0]);
-      j && j.oldParent === x && j.oldPosition === y || (i(b, x, y), o({
-        undo: () => each(A, ({ _id: C, oldParent: S, oldPosition: B }) => {
-          i([C], S, B);
+    moveBlocks: (x, b, y) => {
+      const B = map(x, (C) => {
+        const A = n.find((L) => L._id === C)._parent || null, w = n.filter((L) => A ? L._parent === A : !L._parent).map((L) => L._id).indexOf(C);
+        return { _id: C, oldParent: A, oldPosition: w };
+      }), j = B.find(({ _id: C }) => C === x[0]);
+      j && j.oldParent === b && j.oldPosition === y || (i(x, b, y), o({
+        undo: () => each(B, ({ _id: C, oldParent: S, oldPosition: A }) => {
+          i([C], S, A);
         }),
-        redo: () => i(b, x, y)
+        redo: () => i(x, b, y)
       }));
     },
-    addBlocks: (b, x, y) => {
-      a(b, x, y), o({
-        undo: () => l(map(b, "_id")),
-        redo: () => a(b, x, y)
+    addBlocks: (x, b, y) => {
+      a(x, b, y), o({
+        undo: () => l(map(x, "_id")),
+        redo: () => a(x, b, y)
       });
     },
-    removeBlocks: (b) => {
+    removeBlocks: (x) => {
       var j;
-      const x = (j = first(b)) == null ? void 0 : j._parent, A = n.filter((C) => x ? C._parent === x : !C._parent).indexOf(first(b));
-      l(map(b, "_id")), o({
-        undo: () => a(b, x, A),
-        redo: () => l(map(b, "_id"))
+      const b = (j = first(x)) == null ? void 0 : j._parent, B = n.filter((C) => b ? C._parent === b : !C._parent).indexOf(first(x));
+      l(map(x, "_id")), o({
+        undo: () => a(x, b, B),
+        redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (b, x, y) => {
-      let A = [];
+    updateBlocks: (x, b, y) => {
+      let B = [];
       if (y)
-        A = map(b, (j) => ({ _id: j, ...y }));
+        B = map(x, (j) => ({ _id: j, ...y }));
       else {
-        const j = keys(x);
-        A = map(b, (C) => {
-          const S = n.find((_) => _._id === C), B = { _id: C };
-          return each(j, (_) => B[_] = S[_]), B;
+        const j = keys(b);
+        B = map(x, (C) => {
+          const S = n.find((_) => _._id === C), A = { _id: C };
+          return each(j, (_) => A[_] = S[_]), A;
         });
       }
-      c(map(b, (j) => ({ _id: j, ...x }))), o({
-        undo: () => c(A),
-        redo: () => c(map(b, (j) => ({ _id: j, ...x })))
+      c(map(x, (j) => ({ _id: j, ...b }))), o({
+        undo: () => c(B),
+        redo: () => c(map(x, (j) => ({ _id: j, ...b })))
       });
     },
-    updateBlocksRuntime: (b, x) => {
-      c(map(b, (y) => ({ _id: y, ...x })));
+    updateBlocksRuntime: (x, b) => {
+      c(map(x, (y) => ({ _id: y, ...b })));
     },
-    setNewBlocks: (b) => {
-      r(b), o({
+    setNewBlocks: (x) => {
+      r(x), o({
         undo: () => r(n),
-        redo: () => r(b)
+        redo: () => r(x)
       });
     },
-    updateMultipleBlocksProps: (b) => {
-      let x = [];
-      x = map(b, (y) => {
-        const A = keys(y), j = n.find((S) => S._id === y._id), C = {};
-        return each(A, (S) => C[S] = j[S]), C;
-      }), c(b), o({
-        undo: () => c(x),
-        redo: () => c(b)
+    updateMultipleBlocksProps: (x) => {
+      let b = [];
+      b = map(x, (y) => {
+        const B = keys(y), j = n.find((S) => S._id === y._id), C = {};
+        return each(B, (S) => C[S] = j[S]), C;
+      }), c(x), o({
+        undo: () => c(b),
+        redo: () => c(x)
       });
     }
   };
@@ -1438,33 +1533,35 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var f;
+      var m;
       for (let h = 0; h < i.length; h++) {
-        const { _id: b } = i[h];
+        const { _id: x } = i[h];
         i[h]._id = generateUUID();
-        const x = filter(i, { _parent: b });
-        for (let y = 0; y < x.length; y++)
-          x[y]._parent = i[h]._id;
+        const b = filter(i, { _parent: x });
+        for (let y = 0; y < b.length; y++)
+          b[y]._parent = i[h]._id;
       }
       const p = first(i);
       let u, g;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(f = first(i)) == null ? void 0 : f._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(m = first(i)) == null ? void 0 : m._id]), first(i);
     },
     [r, o, n]
   );
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const x = i.blocks;
-        return a(x, c, d);
+        const b = i.blocks;
+        return a(b, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
         _id: p,
-        ...u
+        ...u,
+        ...has(i, "_name") && { _name: i._name },
+        ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
-      let m, f;
-      return c && (m = find(o, { _id: c }), g._parent = c, f = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, f = m._parent), r([g], f, d), n([g._id]), g;
+      let f, m;
+      return c && (f = find(o, { _id: c }), g._parent = c, m = c), !canAcceptChildBlock(f == null ? void 0 : f._type, g._type) && f && (g._parent = f._parent, m = f._parent), r([g], m, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2910,43 +3007,43 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (f, h) => {
-    const b = cloneDeep(h.find((x) => x._id === f));
-    for (const x in b) {
-      const y = b[x];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, f = (m, h) => {
+    const x = cloneDeep(h.find((b) => b._id === m));
+    for (const b in x) {
+      const y = x[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: A, classes: j } = getSplitChaiClasses(y);
-        b[x] = compact(flattenDeep([A, j])).join(" ");
+        const { baseClasses: B, classes: j } = getSplitChaiClasses(y);
+        x[b] = compact(flattenDeep([B, j])).join(" ");
       } else
-        x !== "_id" && delete b[x];
+        b !== "_id" && delete x[b];
     }
-    return b;
+    return x;
   };
   return {
     askAi: useCallback(
-      async (f, h, b, x) => {
+      async (m, h, x, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, A = f === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [m(h, d)], j = await l(f, addLangToPrompt(b, g, f), A, y), { blocks: C, error: S } = j;
+            const y = p === u ? "" : p, B = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(h, d)), p) : [f(h, d)], j = await l(m, addLangToPrompt(x, g, m), B, y), { blocks: C, error: S } = j;
             if (S) {
               a(S);
               return;
             }
-            if (f === "styles") {
-              const B = C.map((_) => {
+            if (m === "styles") {
+              const A = C.map((_) => {
                 for (const w in _)
                   w !== "_id" && (_[w] = `${STYLES_KEY},${_[w]}`);
                 return _;
               });
-              c(B);
+              c(A);
             } else
               i(C);
-            x && x(j);
+            b && b(j);
           } catch (y) {
             a(y);
           } finally {
-            n(!1), x && x();
+            n(!1), b && b();
           }
         }
       },
@@ -2994,11 +3091,11 @@ const useBlockHighlight = () => {
   ), clearHighlight: () => {
     lastHighlighted && (lastHighlighted.removeAttribute("data-highlighted"), lastHighlighted = null);
   }, lastHighlighted };
-}, globalBlocksStoreAtom = atom({}), globalBlocksLoadingStateAtom = atom({}), useGlobalBlocksStore = () => {
-  const [o, n] = useAtom(globalBlocksStoreAtom), r = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => n({}), [n]);
-  return { getGlobalBlocks: r, reset: a };
-}, useWatchGlobalBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom(globalBlocksStoreAtom), [a, l] = useAtom(globalBlocksLoadingStateAtom), i = useBuilderProp("getGlobalBlockBlocks", async (d) => []), c = useMemo(() => o.filter((p) => p._type === "GlobalBlock").filter((p) => p._type === "GlobalBlock").map((p) => p.globalBlock), [o]);
+}, partialBlocksStoreAtom = atom({}), partialBlocksLoadingStateAtom = atom({}), usePartailBlocksStore = () => {
+  const [o, n] = useAtom(partialBlocksStoreAtom), r = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => n({}), [n]);
+  return { getPartailBlocks: r, reset: a };
+}, useWatchPartailBlocks = () => {
+  const [o] = useBlocksStore(), [n, r] = useAtom(partialBlocksStoreAtom), [a, l] = useAtom(partialBlocksLoadingStateAtom), i = useBuilderProp("getPartialBlockBlocks", async (d) => []), c = useMemo(() => o.filter((d) => d._type === "PartialBlock").map((d) => d.partialBlockId), [o]);
   useEffect(() => {
     forEach(c, (d) => {
       has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
@@ -3016,22 +3113,26 @@ const useBlockHighlight = () => {
   }, [
     i,
     n,
-    c,
     a,
     r,
-    l
+    l,
+    c
   ]);
-}, globalBlocksListAtom = atom({}), useGlobalBlocksList = () => {
-  const [o, n] = useState(!1), [r, a] = useAtom(globalBlocksListAtom), l = useBuilderProp("getGlobalBlocks", async () => []), i = useCallback(async () => {
-    n(!0);
-    const c = await l();
-    a(c), n(!1);
-  }, [l, a]);
+}, partialBlocksListAtom = atom({}), usePartialBlocksList = () => {
+  const [o, n] = useState(!1), [r, a] = useState(null), [l, i] = useAtom(partialBlocksListAtom), c = useBuilderProp("getPartialBlocks", async () => []), d = useCallback(async () => {
+    n(!0), a(null);
+    try {
+      const p = await c();
+      i(p), n(!1);
+    } catch (p) {
+      a(p instanceof Error ? p.message : "Failed to fetch partial blocks"), n(!1);
+    }
+  }, [c, i]);
   return useEffect(() => {
-    i();
-  }, []), { data: r, isLoading: o, refetch: i };
+    d();
+  }, []), { data: l, isLoading: o, refetch: d, error: r };
 }, useBuilderReset = () => {
-  const o = useSetAtom$1(historyStatesAtom), { clear: n } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: a } = useBlockHighlight(), [, l] = useSelectedStylingBlocks(), [, i] = useAtom(aiAssistantActiveAtom), { reset: c } = useGlobalBlocksStore();
+  const o = useSetAtom$1(historyStatesAtom), { clear: n } = useUndoManager(), [, r] = useSelectedBlockIds(), { clearHighlight: a } = useBlockHighlight(), [, l] = useSelectedStylingBlocks(), [, i] = useAtom(aiAssistantActiveAtom), { reset: c } = usePartailBlocksStore();
   return () => {
     r([]), l([]), a(), n(), i(!1), o({ undoCount: 0, redoCount: 0 }), c();
   };
@@ -3079,13 +3180,13 @@ const useBlockHighlight = () => {
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((f) => f._id === c);
+        const d = o.find((m) => m._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
         const g = filter(
           o,
-          (f) => isString(l) ? f._parent === l : !f._parent
-        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
-        r(m, l, g), i.push(get(m, "0._id", ""));
+          (m) => isString(l) ? m._parent === l : !m._parent
+        ).indexOf(d) + 1, f = getDuplicatedBlocks(o, c, l);
+        r(f, l, g), i.push(get(f, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -3178,13 +3279,13 @@ const useBlockHighlight = () => {
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
-    return each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+    return each(p, (f) => {
+      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       u = u.replace(h, " ").replace(/\s+/g, " ").trim();
-      const b = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(m.split(":").pop().trim());
-    }), each(p, (m) => {
-      const f = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${f}(?=\\s|$)`, "g");
+      const x = first(f.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(f.split(":").pop().trim());
+    }), each(p, (f) => {
+      const m = f.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), h = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       g = g.replace(h, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
@@ -3318,7 +3419,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   });
   useResizeObserver(o, () => g(), o !== null);
-  const m = get(n, "_parent", null), f = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const f = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3335,16 +3436,16 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       onKeyDown: (h) => h.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        m && /* @__PURE__ */ jsx(
+        f && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([m]);
+              c([]), l([f]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: n }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: m, block: n }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsx(
             PlusIcon,
@@ -3415,15 +3516,15 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     <div class="frame-root h-full"></div>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), f = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: g, pasteBlocks: f } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      g(n[0]) && m(n);
+      g(n[0]) && f(n);
     },
-    { ...f, preventDefault: !0 },
-    [n, g, m]
-  ), useHotkeys("esc", () => r([]), f, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...f, preventDefault: !0 }, [
+    { ...m, preventDefault: !0 },
+    [n, g, f]
+  ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
@@ -3431,7 +3532,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     (h) => {
       h.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    f,
+    m,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3517,38 +3618,38 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const m = () => {
+  const f = () => {
     removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (f) => {
-      f.preventDefault(), f.stopPropagation(), throttledDragOver(f);
+    onDragOver: (m) => {
+      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
     },
-    onDrop: (f) => {
+    onDrop: (m) => {
       var S;
-      const h = dropTarget, x = getOrientation(h) === "vertical" ? f.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : f.clientX;
-      dropIndex = calculateDropIndex(x, possiblePositions);
-      const y = d, A = h.getAttribute("data-block-id"), j = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === A || !j) {
-        m();
+      const h = dropTarget, b = getOrientation(h) === "vertical" ? m.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : m.clientX;
+      dropIndex = calculateDropIndex(b, possiblePositions);
+      const y = d, B = h.getAttribute("data-block-id"), j = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === B || !j) {
+        f();
         return;
       }
       if (!has(y, "_id")) {
-        a(y, A === "canvas" ? null : A, dropIndex), setTimeout(m, 300);
+        a(y, B === "canvas" ? null : B, dropIndex), setTimeout(f, 300);
         return;
       }
       let C = h.getAttribute("data-block-id");
-      C === null && (C = f.target.parentElement.getAttribute("data-block-id")), c([y._id], C === "canvas" ? null : C, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      C === null && (C = m.target.parentElement.getAttribute("data-block-id")), c([y._id], C === "canvas" ? null : C, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (f) => {
-      const h = f, b = h.target;
-      dropTarget = b;
-      const x = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(x), h.stopPropagation(), h.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), r(!0), l(""), i([]);
+    onDragEnter: (m) => {
+      const h = m, x = h.target;
+      dropTarget = x;
+      const b = x.getAttribute("data-block-id"), y = x.getAttribute("data-dnd-dragged") !== "yes";
+      u(b), h.stopPropagation(), h.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(x), r(!0), l(""), i([]);
     },
-    onDragLeave: (f) => {
-      f.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (m) => {
+      m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3570,17 +3671,17 @@ const useHandleCanvasDblClick = (o, n) => {
       const g = u.getAttribute("data-block-type");
       if (!g || !r.includes(g))
         return;
-      const m = u.getAttribute("data-block-id");
-      if (!m) return;
+      const f = u.getAttribute("data-block-id");
+      if (!f) return;
       o.on("update", ({ editor: h }) => {
         console.log(h.getHTML());
       }), o.on("blur", () => {
         console.log("blur");
         const h = o.getHTML();
-        a([m], { content: h }), n.style.display = "none", u.style.visibility = "visible";
-      }), i(m);
-      const f = d(m).content;
-      o.commands.setContent(f), n.style.display = "block", u.style.visibility = "hidden", n.style.position = "absolute", n.style.top = `${u.offsetTop}px`, n.style.left = `${u.offsetLeft}px`, n.style.width = `${u.offsetWidth}px`, n.style.height = `${u.offsetHeight}px`, n.classList.add(...u.classList);
+        a([f], { content: h }), n.style.display = "none", u.style.visibility = "visible";
+      }), i(f);
+      const m = d(f).content;
+      o.commands.setContent(m), n.style.display = "block", u.style.visibility = "hidden", n.style.position = "absolute", n.style.top = `${u.offsetTop}px`, n.style.left = `${u.offsetLeft}px`, n.style.width = `${u.offsetWidth}px`, n.style.height = `${u.offsetHeight}px`, n.classList.add(...u.classList);
     },
     [l, c, d, i, a, o, n]
   );
@@ -3621,17 +3722,17 @@ const useHandleCanvasDblClick = (o, n) => {
         return;
       const h = getElementByDataBlockId(n, first(r));
       if (h) {
-        const b = h.getAttribute("data-style-prop");
-        if (b) {
-          const x = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
-          l([{ id: x, prop: b, blockId: y }]);
+        const x = h.getAttribute("data-style-prop");
+        if (x) {
+          const b = h.getAttribute("data-style-id"), y = h.getAttribute("data-block-parent");
+          l([{ id: b, prop: x, blockId: y }]);
         }
       }
     }, 100);
   }, [n, r, l, a]);
   const c = useEditor({
     extensions: [StarterKit]
-  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), m = useHandleMouseLeave(), f = useDnd();
+  }), d = useRef(null), p = useHandleCanvasDblClick(c, d.current), u = useHandleCanvasClick(), g = useHandleMouseMove(), f = useHandleMouseLeave(), m = useDnd();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3640,18 +3741,18 @@ const useHandleCanvasDblClick = (o, n) => {
       onClick: u,
       onDoubleClick: p,
       onMouseMove: g,
-      onMouseLeave: m,
-      ...omit(f, "isDragging"),
-      className: "relative h-full max-w-full p-px " + (f.isDragging ? "dragging" : ""),
+      onMouseLeave: f,
+      ...omit(m, "isDragging"),
+      className: "relative h-full max-w-full p-px " + (m.isDragging ? "dragging" : ""),
       children: o
     }
   );
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), HeadTags = () => {
   const [o] = useTheme(), n = useThemeOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [g] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
-  ), [m] = useState(
-    d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [f] = useState(
+    d == null ? void 0 : d.getElementById("selected-styling-block")
+  ), [m] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3676,8 +3777,8 @@ const useHandleCanvasDblClick = (o, n) => {
         forms,
         aspectRatio,
         containerQueries,
-        plugin(function({ addBase: x, theme: y }) {
-          x({
+        plugin(function({ addBase: b, theme: y }) {
+          b({
             "h1,h2,h3,h4,h5,h6": {
               fontFamily: y("fontFamily.heading")
             },
@@ -3691,27 +3792,27 @@ const useHandleCanvasDblClick = (o, n) => {
       ]
     });
   }, [o, n, p]), useEffect(() => {
-    g && (g.textContent = `${map(r, (x) => `[data-block-id="${x}"]`).join(",")}{
+    g && (g.textContent = `${map(r, (b) => `[data-block-id="${b}"]`).join(",")}{
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, g]), useEffect(() => {
-    f.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, f]), useEffect(() => {
+    m.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(l, ({ id: x }) => `[data-style-id="${x}"]`).join(",")}{
+    f && (f.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, m]), useEffect(() => {
+  }, [l, f]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
   const h = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
-  ), b = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
+  ), x = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { id: "chai-theme", children: h }),
-    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } })
+    /* @__PURE__ */ jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: x } })
   ] });
 }, ResizableCanvasWrapper = ({ children: o, onMount: n, onResize: r }) => {
   const [, a] = useSelectedBlockIds(), [, l] = useSelectedStylingBlocks(), i = useRef(null), c = useDebouncedCallback(
@@ -3788,10 +3889,13 @@ const getBlockRuntimeProps = memoize((o) => {
     [o]
   );
 }, BlockRenderer = ({ blockAtom: o, children: n }) => {
-  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), m = useMemo(
+  const [r] = useAtom$1(o), a = useMemo(() => getRegisteredChaiBlock(r._type), [r._type]), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useBlockRuntimeProps(), d = usePageExternalData(), [p] = useHiddenBlockIds(), [u] = useAtom$1(dataBindingActiveAtom), g = get(a, "component", null), f = useMemo(
     () => u ? applyBinding(applyLanguage(r, l, a), d) : applyLanguage(r, l, a),
     [r, l, a, d, u]
-  ), f = useMemo(() => getBlockTagAttributes(r), [r]), h = useMemo(() => c(r._id, getBlockRuntimeProps(r._type)), [r]), b = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), x = useMemo(
+  ), m = useMemo(() => getBlockTagAttributes(r), [r, getBlockTagAttributes]), h = useMemo(
+    () => c(r._id, getBlockRuntimeProps(r._type)),
+    [r._id, r._type, c, getBlockRuntimeProps]
+  ), x = useMemo(() => !has(a, "dataProvider") || !isFunction$1(a.dataProvider) ? {} : a.dataProvider(r, l), [r, l, a]), b = useMemo(
     () => ({
       blockProps: {
         "data-block-id": r._id,
@@ -3799,16 +3903,25 @@ const getBlockRuntimeProps = memoize((o) => {
       },
       inBuilder: !0,
       lang: l || i,
-      ...m,
       ...f,
+      ...m,
       ...h,
-      ...b
+      ...x
     }),
-    [r, l, i, m, f, h, b]
+    [
+      r._id,
+      r._type,
+      l,
+      i,
+      f,
+      m,
+      h,
+      x
+    ]
   );
-  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...x, children: n }) });
-}, GlobalBlocksRenderer = ({ globalBlockId: o }) => {
-  const { getGlobalBlocks: n } = useGlobalBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom$1(r)), [r]);
+  return isNull(g) || p.includes(r._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, { ...b, children: n }) });
+}, PartialBlocksRenderer = ({ partialBlockId: o }) => {
+  const { getPartailBlocks: n } = usePartailBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom$1(r)), [r]);
   return isEmpty(r) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r });
 }, BlocksRenderer = ({
   blocks: o,
@@ -3821,7 +3934,7 @@ const getBlockRuntimeProps = memoize((o) => {
   ), i = useCallback((c) => filter(o, (d) => d._parent === c._id).length > 0, [o]);
   return map(l, (c) => {
     const d = a(c._id);
-    return d ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, children: c._type === "GlobalBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(GlobalBlocksRenderer, { globalBlockId: get(c, "globalBlock", "") }) }) : i(c) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }, c._id) : null;
+    return d ? /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, children: c._type === "GlobalBlock" || c._type === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: get(c, "partialBlockId", get(c, "globalBlock", "")) }) }) : i(c) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }, c._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3835,11 +3948,11 @@ const getBlockRuntimeProps = memoize((o) => {
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const m = p * u, f = d * u;
+      const f = p * u, m = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - m) / m * 100 + "%",
-        width: 100 + (d - f) / f * 100 + "%"
+        height: 100 + (p - f) / f * 100 + "%",
+        width: 100 + (d - m) / m * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3856,43 +3969,43 @@ const getBlockRuntimeProps = memoize((o) => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, m] = useState([]), [, f] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [b, x] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), j = (B) => {
-    p((_) => ({ ..._, width: B }));
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasDisplayWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [g, f] = useState([]), [, m] = useState([]), [, h] = useAtom$1(canvasIframeAtom), [x, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), B = useBuilderProp("htmlDir", "ltr"), j = (A) => {
+    p((_) => ({ ..._, width: A }));
   };
   useEffect(() => {
     if (!c.current) return;
-    const { clientWidth: B, clientHeight: _ } = c.current;
-    p({ width: B, height: _ });
+    const { clientWidth: A, clientHeight: _ } = c.current;
+    p({ width: A, height: _ });
   }, [c, n]);
-  const C = (B, _ = 0) => {
-    const { top: w } = B.getBoundingClientRect();
+  const C = (A, _ = 0) => {
+    const { top: w } = A.getBoundingClientRect();
     return w + _ >= 0 && w - _ <= window.innerHeight;
   };
   useEffect(() => {
-    var B, _;
+    var A, _;
     if (a && a.type !== "Multiple" && i.current) {
       const w = getElementByDataBlockId(i.current.contentDocument, a._id);
-      w && (C(w) || (_ = (B = i.current) == null ? void 0 : B.contentWindow) == null || _.scrollTo({ top: w.offsetTop, behavior: "smooth" }), m([w]));
+      w && (C(w) || (_ = (A = i.current) == null ? void 0 : A.contentWindow) == null || _.scrollTo({ top: w.offsetTop, behavior: "smooth" }), f([w]));
     }
   }, [a]), useEffect(() => {
-    if (!isEmpty(b) && i.current) {
-      const B = getElementByStyleId(
+    if (!isEmpty(x) && i.current) {
+      const A = getElementByStyleId(
         i.current.contentDocument,
-        first(b).id
+        first(x).id
       );
-      f(B ? [B] : [null]);
+      m(A ? [A] : [null]);
     } else
-      f([null]);
-  }, [b]);
+      m([null]);
+  }, [x]);
   const S = useMemo(() => {
-    let B = IframeInitialContent;
-    return B = B.replace("__HTML_DIR__", A), o === "offline" && (B = B.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), B;
-  }, [o, A]);
+    let A = IframeInitialContent;
+    return A = A.replace("__HTML_DIR__", B), o === "offline" && (A = A.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), A;
+  }, [o, B]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: j, onResize: j, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
-        r([]), x([]);
+        r([]), b([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3938,87 +4051,9 @@ const getBlockRuntimeProps = memoize((o) => {
 }, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), TypeIcon = (o) => {
-  switch (o.type) {
-    case "GlobalBlock":
-      return /* @__PURE__ */ jsx(GlobeIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Image":
-      return /* @__PURE__ */ jsx(ImageIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Heading":
-      return /* @__PURE__ */ jsx(HeadingIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Text":
-      return /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Link":
-      return /* @__PURE__ */ jsx(Link1Icon, { className: "h-3 w-3 stroke-[2]" });
-    case "Video":
-      return /* @__PURE__ */ jsx(VideoIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "RichText":
-      return /* @__PURE__ */ jsx(CursorTextIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Button":
-    case "DropdownButton":
-      return /* @__PURE__ */ jsx(ButtonIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "CustomHTML":
-      return /* @__PURE__ */ jsx(CodeIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Divider":
-      return /* @__PURE__ */ jsx(DividerHorizontalIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Icon":
-      return /* @__PURE__ */ jsx(SketchLogoIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "List":
-      return /* @__PURE__ */ jsx(RowsIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Paragraph":
-      return /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Row":
-      return /* @__PURE__ */ jsx(Rows, { className: "h-3 w-3 stroke-[2]" });
-    case "Column":
-      return /* @__PURE__ */ jsx(Columns, { className: "h-3 w-3 stroke-[2]" });
-    case "ListItem":
-      return /* @__PURE__ */ jsx(ColumnsIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "LineBreak":
-      return /* @__PURE__ */ jsx(SpaceBetweenVerticallyIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Form":
-      return /* @__PURE__ */ jsx(GroupIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Checkbox":
-      return /* @__PURE__ */ jsx(CheckboxIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "FormButton":
-      return /* @__PURE__ */ jsx(ButtonIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Input":
-    case "TextArea":
-      return /* @__PURE__ */ jsx(InputIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Radio":
-      return /* @__PURE__ */ jsx(RadiobuttonIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Select":
-      return /* @__PURE__ */ jsx(DropdownMenuIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Table":
-      return /* @__PURE__ */ jsx(TableIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "TableHead":
-      return /* @__PURE__ */ jsx(BorderTopIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "TableBody":
-      return /* @__PURE__ */ jsx(BorderAllIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "TableRow":
-      return /* @__PURE__ */ jsx(ViewHorizontalIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "TableCell":
-      return /* @__PURE__ */ jsx(DragHandleHorizontalIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "DataProvider":
-      return /* @__PURE__ */ jsx(DatabaseIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Box":
-      return /* @__PURE__ */ jsx(BoxIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Dropdown":
-      return /* @__PURE__ */ jsx(DropdownMenuIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "DropdownContent":
-      return /* @__PURE__ */ jsx(ReaderIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "Slider":
-      return /* @__PURE__ */ jsx(UnfoldHorizontal, { className: "h-3 w-3 stroke-[2]" });
-    case "Slides":
-      return /* @__PURE__ */ jsx(AlignHorizontalJustifyStart, { className: "h-3 w-3 stroke-[2]" });
-    case "Slide":
-      return /* @__PURE__ */ jsx(AppWindowIcon, { className: "h-3 w-3 stroke-[2]" });
-    case "SlidePreviousButton":
-      return /* @__PURE__ */ jsx(PanelRightOpen, { className: "h-3 w-3 stroke-[2]" });
-    case "SlideNextButton":
-      return /* @__PURE__ */ jsx(PanelRightClose, { className: "h-3 w-3 stroke-[2]" });
-    default:
-      return /* @__PURE__ */ jsx(BoxModelIcon, { className: "h-3 w-3 stroke-[2]" });
-  }
+] }) }), ICON_CLASS = "h-3 w-3 stroke-[2]", TypeIcon = (o) => {
+  const n = useRegisteredChaiBlocks(), r = get(n, [o == null ? void 0 : o.type, "icon"]);
+  return r ? React__default.createElement(r, { className: ICON_CLASS }) : /* @__PURE__ */ jsx(BoxModelIcon, { className: ICON_CLASS });
 }, Breadcrumb = () => {
   const o = useSelectedBlockHierarchy(), [, n] = useSelectedBlockIds(), { highlightBlock: r } = useBlockHighlight();
   return /* @__PURE__ */ jsx("div", { className: "-mx-2 border-t border-border bg-background px-2 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("ol", { className: "flex items-center whitespace-nowrap", children: [
@@ -4158,20 +4193,20 @@ const getBlockRuntimeProps = memoize((o) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), g = (y) => {
     a(y);
-  }, m = () => {
-    const y = l.find((A) => Object.keys(A)[0] === r);
+  }, f = () => {
+    const y = l.find((B) => Object.keys(B)[0] === r);
     if (y) {
-      const A = Object.values(y)[0];
-      A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? d(A) : console.error("Invalid preset structure:", A);
+      const B = Object.values(y)[0];
+      B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? d(B) : console.error("Invalid preset structure:", B);
     } else
       console.error("Preset not found:", r);
-  }, f = useDebouncedCallback(
-    (y, A) => {
+  }, m = useDebouncedCallback(
+    (y, B) => {
       d(() => ({
         ...c,
         fontFamily: {
           ...c.fontFamily,
-          [y.replace(/font-/g, "")]: A
+          [y.replace(/font-/g, "")]: B
         }
       }));
     },
@@ -4186,11 +4221,11 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), b = useDebouncedCallback(
-    (y, A) => {
+  ), x = useDebouncedCallback(
+    (y, B) => {
       d(() => {
         const j = get(c, `colors.${y}`);
-        return n ? set(j, 1, A) : set(j, 0, A), {
+        return n ? set(j, 1, B) : set(j, 0, B), {
           ...c,
           colors: {
             ...c.colors,
@@ -4201,18 +4236,18 @@ const getBlockRuntimeProps = memoize((o) => {
     },
     [c],
     200
-  ), x = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([A]) => {
-    const j = get(c, `colors.${A}.${n ? 1 : 0}`);
+  ), b = (y) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(y.items).map(([B]) => {
+    const j = get(c, `colors.${B}.${n ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: j,
-          onChange: (C) => b(A, C)
+          onChange: (C) => x(B, C)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((C) => C.charAt(0).toUpperCase() + C.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, A);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((C) => C.charAt(0).toUpperCase() + C.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, B);
   }) });
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -4238,18 +4273,18 @@ const getBlockRuntimeProps = memoize((o) => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: m,
+            onClick: f,
             children: u("Apply")
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, A]) => /* @__PURE__ */ jsx(
+        (p == null ? void 0 : p.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(p.fontFamily).map(([y, B]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: y,
-            value: c.fontFamily[y.replace(/font-/g, "")] || A[Object.keys(A)[0]],
-            onChange: (j) => f(y, j)
+            value: c.fontFamily[y.replace(/font-/g, "")] || B[Object.keys(B)[0]],
+            onChange: (j) => m(y, j)
           },
           y
         )) }),
@@ -4262,7 +4297,7 @@ const getBlockRuntimeProps = memoize((o) => {
         ] }),
         (p == null ? void 0 : p.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm text-slate-800", children: u("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => x(y)) }, n ? "dark" : "light")
+          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: p.colors.map((y) => b(y)) }, n ? "dark" : "light")
         ] })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
@@ -4272,38 +4307,7 @@ const getBlockRuntimeProps = memoize((o) => {
     ] }),
     i && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(i) })
   ] });
-}), GlobalBlockSettings = () => {
-  const o = useSelectedBlock(), { data: n, refetch: r, isLoading: a } = useGlobalBlocksList(), l = useUpdateBlocksProps();
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("label", { className: "text-sm", children: "Choose a global block" }),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
-        value: (o == null ? void 0 : o.globalBlock) || "",
-        onChange: (i) => {
-          var c;
-          l([o._id], {
-            globalBlock: i.target.value,
-            _name: `Global: ${startCase((c = get(n, i.target.value, "")) == null ? void 0 : c.name)}`
-          });
-        },
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", children: "Select a global block" }),
-          Object.keys(n).map((i) => /* @__PURE__ */ jsx("option", { value: i, children: n[i].name || i }, i))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: r,
-        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
-        children: a ? "Loading..." : "Refresh List"
-      }
-    ) })
-  ] });
-}, ICON_PICKER_CONTAINER_ID = "icon-picker-item-container", removeSizeAttributes = (o) => {
+}), ICON_PICKER_CONTAINER_ID = "icon-picker-item-container", removeSizeAttributes = (o) => {
   try {
     return o.replace(/<svg([^>]*)\sheight="[^"]*"([^>]*)>/gi, "<svg$1$2>").replace(/<svg([^>]*)\swidth="[^"]*"([^>]*)>/gi, "<svg$1$2>");
   } catch {
@@ -4436,19 +4440,19 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
   }, [a, o]);
   const u = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", g = React.useCallback(
     (h) => {
-      const b = (x) => r === "value" ? x === "value" || x === "object" : r === "array" ? x === "array" : x === r;
-      h.type === "object" ? (c((x) => [...x, h.key]), p(h.value)) : b(h.type) && (n([...i, h.key].join(".")), l(!1));
+      const x = (b) => r === "value" ? b === "value" || b === "object" : r === "array" ? b === "array" : b === r;
+      h.type === "object" ? (c((b) => [...b, h.key]), p(h.value)) : x(h.type) && (n([...i, h.key].join(".")), l(!1));
     },
     [i, n, r]
-  ), m = React.useCallback(() => {
+  ), f = React.useCallback(() => {
     if (i.length > 0) {
       const h = i.slice(0, -1);
-      c(h), p(h.reduce((b, x) => b[x], o));
+      c(h), p(h.reduce((x, b) => x[b], o));
     }
-  }, [i, o]), f = React.useMemo(() => Object.entries(d).map(([h, b]) => ({
+  }, [i, o]), m = React.useMemo(() => Object.entries(d).map(([h, x]) => ({
     key: h,
-    value: b,
-    type: u(b)
+    value: x,
+    type: u(x)
   })).filter((h) => r === "value" ? h.type === "value" || h.type === "object" : r === "array" ? h.type === "array" || h.type === "object" : r === "object" ? h.type === "object" : !0), [d, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -4470,11 +4474,11 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
       /* @__PURE__ */ jsxs(CommandList, { children: [
         /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
         /* @__PURE__ */ jsxs(CommandGroup, { children: [
-          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: m, className: "flex items-center text-sm", children: [
+          i.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: f, className: "flex items-center text-sm", children: [
             /* @__PURE__ */ jsx(ChevronLeft, { className: "mr-2 h-4 w-4" }),
             "Back"
           ] }),
-          f.map((h) => /* @__PURE__ */ jsxs(
+          m.map((h) => /* @__PURE__ */ jsxs(
             CommandItem,
             {
               value: h.key,
@@ -4490,8 +4494,8 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
                       size: "sm",
                       variant: "ghost",
                       className: "h-6 px-2 hover:bg-primary hover:text-primary-foreground",
-                      onClick: (b) => {
-                        b.stopPropagation(), n([...i, h.key].join(".")), l(!1);
+                      onClick: (x) => {
+                        x.stopPropagation(), n([...i, h.key].join(".")), l(!1);
                       },
                       children: "Select"
                     }
@@ -4659,16 +4663,16 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const c = useRef(null), d = useRef(a || ""), p = usePageExternalData();
   useEffect(() => {
     if (o) {
-      const m = document.createElement("style");
-      return m.id = "rte-modal-styles", m.innerHTML = `
+      const f = document.createElement("style");
+      return f.id = "rte-modal-styles", f.innerHTML = `
         /* Ensure the NestedPathSelector popover appears above the dialog */
         .rte-path-selector + [data-radix-popper-content-wrapper],
         [data-radix-popper-content-wrapper] {
           z-index: 9999 !important;
         }
-      `, document.head.appendChild(m), () => {
-        const f = document.getElementById("rte-modal-styles");
-        f && f.remove();
+      `, document.head.appendChild(f), () => {
+        const m = document.getElementById("rte-modal-styles");
+        m && m.remove();
       };
     }
   }, [o]);
@@ -4689,13 +4693,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       Underline
     ],
     content: a || "",
-    onUpdate: ({ editor: m }) => {
-      const f = m.getHTML();
-      l(f);
+    onUpdate: ({ editor: f }) => {
+      const m = f.getHTML();
+      l(m);
     },
-    onBlur: ({ editor: m }) => {
-      const f = m.getHTML();
-      i(r, f);
+    onBlur: ({ editor: f }) => {
+      const m = f.getHTML();
+      i(r, m);
     },
     editorProps: {
       attributes: {
@@ -4710,22 +4714,22 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [o, u]), useEffect(() => {
     c.current && u && (c.current.__chaiRTE = u);
   }, [u, o]);
-  const g = (m) => {
+  const g = (f) => {
     if (!u) return;
-    const f = `{{${m}}}`;
+    const m = `{{${f}}}`;
     u.commands.focus();
-    const { from: h, to: b } = u.state.selection;
-    if (h !== b)
-      u.chain().deleteSelection().insertContent(f).run();
+    const { from: h, to: x } = u.state.selection;
+    if (h !== x)
+      u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: y } = u, A = y.selection.from, j = y.doc.textBetween(Math.max(0, A - 1), A), C = y.doc.textBetween(A, Math.min(A + 1, y.doc.content.size));
+      const { state: y } = u, B = y.selection.from, j = y.doc.textBetween(Math.max(0, B - 1), B), C = y.doc.textBetween(B, Math.min(B + 1, y.doc.content.size));
       let S = "";
-      A > 0 && j !== " " && !/[.,!?;:]/.test(j) && (S = " ");
-      let B = "";
-      C && C !== " " && !/[.,!?;:]/.test(C) && (B = " "), u.chain().insertContent(S + f + B).run();
+      B > 0 && j !== " " && !/[.,!?;:]/.test(j) && (S = " ");
+      let A = "";
+      C && C !== " " && !/[.,!?;:]/.test(C) && (A = " "), u.chain().insertContent(S + m + A).run();
     }
   };
-  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (f) => !f && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center justify-between pr-8", children: [
       /* @__PURE__ */ jsx("span", { children: "Rich Text Editor" }),
       p && Object.keys(p).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -4758,12 +4762,12 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     ],
     content: r || "",
     onUpdate: ({ editor: h }) => {
-      const b = h.getHTML();
-      a(b), c || u(b);
+      const x = h.getHTML();
+      a(x), c || u(x);
     },
     onBlur: ({ editor: h }) => {
-      const b = h.getHTML();
-      l(o, b);
+      const x = h.getHTML();
+      l(o, x);
     },
     editorProps: {
       attributes: {
@@ -4776,9 +4780,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [g]), useEffect(() => {
     u(r || "");
   }, [r]);
-  const m = (h) => {
+  const f = (h) => {
     a(h);
-  }, f = () => {
+  }, m = () => {
     d(!1), g && g.commands.setContent(p);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -4790,10 +4794,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       RTEModal,
       {
         isOpen: c,
-        onClose: f,
+        onClose: m,
         id: o,
         value: p,
-        onChange: m,
+        onChange: f,
         onBlur: l
       }
     )
@@ -4803,74 +4807,74 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   pageTypes: n,
   onChange: r
 }) => {
-  var T;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (k, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, f] = useState(""), [h, b] = useState([]), [x, y] = useState(-1), A = useRef(null), j = (T = n == null ? void 0 : n.find((k) => k.key === u)) == null ? void 0 : T.name;
+  var L;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [f, m] = useState(""), [h, x] = useState([]), [b, y] = useState(-1), B = useRef(null), j = (L = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : L.name;
   useEffect(() => {
-    if (f(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const k = split(o, ":"), v = get(k, 1, "page") || "page";
-    g(v), (async () => {
-      const N = await l(v, [get(k, 2, "page")]);
-      N && Array.isArray(N) && f(get(N, [0, "name"], ""));
+    if (m(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const v = split(o, ":"), k = get(v, 1, "page") || "page";
+    g(k), (async () => {
+      const E = await l(k, [get(v, 2, "page")]);
+      E && Array.isArray(E) && m(get(E, [0, "name"], ""));
     })();
   }, [o]);
   const C = useDebouncedCallback(
-    async (k) => {
-      if (isEmpty(k))
-        b([]);
+    async (v) => {
+      if (isEmpty(v))
+        x([]);
       else {
-        const v = await l(u, k);
-        b(v);
+        const k = await l(u, v);
+        x(k);
       }
       c(!1), y(-1);
     },
     [u],
     300
-  ), S = (k) => {
-    const v = ["pageType", u, k.id];
-    v[1] && (r(v.join(":")), f(k.name), p(!1), b([]), y(-1));
-  }, B = (k) => {
-    switch (k.key) {
+  ), S = (v) => {
+    const k = ["pageType", u, v.id];
+    k[1] && (r(k.join(":")), m(v.name), p(!1), x([]), y(-1));
+  }, A = (v) => {
+    switch (v.key) {
       case "ArrowDown":
-        k.preventDefault(), y((v) => v < h.length - 1 ? v + 1 : v);
+        v.preventDefault(), y((k) => k < h.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        k.preventDefault(), y((v) => v > 0 ? v - 1 : v);
+        v.preventDefault(), y((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
-        if (k.preventDefault(), h.length === 0) return;
-        x >= 0 && S(h[x]);
+        if (v.preventDefault(), h.length === 0) return;
+        b >= 0 && S(h[b]);
         break;
       case "Escape":
-        k.preventDefault(), _();
+        v.preventDefault(), _();
         break;
     }
   };
   useEffect(() => {
-    if (x >= 0 && A.current) {
-      const k = A.current.children[x];
-      k == null || k.scrollIntoView({ block: "nearest" });
+    if (b >= 0 && B.current) {
+      const v = B.current.children[b];
+      v == null || v.scrollIntoView({ block: "nearest" });
     }
-  }, [x]);
+  }, [b]);
   const _ = () => {
-    f(""), b([]), y(-1), p(!1), r("");
-  }, w = (k) => {
-    f(k), p(!isEmpty(k)), c(!0), C(k);
+    m(""), x([]), y(-1), p(!1), r("");
+  }, w = (v) => {
+    m(v), p(!isEmpty(v)), c(!0), C(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (k) => g(k.target.value), children: map(n, (k) => /* @__PURE__ */ jsx("option", { value: k.key, children: k.name }, k.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
-          value: m,
-          onChange: (k) => w(k.target.value),
-          onKeyDown: B,
+          value: f,
+          onChange: (v) => w(v.target.value),
+          onKeyDown: A,
           placeholder: a(`Search ${j ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(h) || d && isEmpty(h)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4878,24 +4882,24 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     ] }) : d && isEmpty(h) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      m,
+      f,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(h == null ? void 0 : h.slice(0, 20), (k, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(h == null ? void 0 : h.slice(0, 20), (v, k) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => S(k),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(k.id) ? "bg-blue-200" : v === x ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => S(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : k === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          k.name,
+          v.name,
           " ",
-          k.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            k.slug,
+            v.slug,
             " )"
           ] })
         ]
       },
-      k.id
+      v.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r }) => {
@@ -4977,30 +4981,30 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const m = () => {
-    const b = findIndex(u, { _id: g });
-    if (b > -1) {
-      const x = (b + 1) % u.length, y = get(u, [x, "_id"]);
+  const f = () => {
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, f = () => {
-    const b = findIndex(u, { _id: g });
-    if (b > -1) {
-      const x = (b - 1 + u.length) % u.length, y = get(u, [x, "_id"]);
+  }, m = () => {
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, h = () => {
-    const b = i(
+    const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), x = b == null ? void 0 : b._id;
-    x && (n({ ...o, currentSlide: x }), c([x]));
+    ), b = x == null ? void 0 : x._id;
+    b && (n({ ...o, currentSlide: b }), c([b]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
-      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -5009,7 +5013,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsx("button", { onClick: f, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -5074,9 +5078,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (b) => {
-              let x = b.target.value;
-              x.length && (x = x.replace("-", "")), n({ ...o, autoplayInterval: x });
+            onChange: (x) => {
+              let b = x.target.value;
+              b.length && (b = b.replace("-", "")), n({ ...o, autoplayInterval: b });
             }
           }
         )
@@ -5113,67 +5117,67 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   required: p,
   schema: u,
   formData: g,
-  onChange: m
+  onChange: f
 }) => {
-  const { selectedLang: f, fallbackLang: h, languages: b } = useLanguages(), x = isEmpty(b) ? "" : isEmpty(f) ? h : f, y = get(LANGUAGES, x, x), A = usePageExternalData(), j = useSelectedBlock(), C = useRegisteredChaiBlocks(), S = get(C, [j == null ? void 0 : j._type, "i18nProps"], []) || [], [B, _] = useState(null), w = useCallback(
-    (v) => {
-      const N = (E) => /[.,!?;:]/.test(E), I = (E, D, M) => {
-        let R = "", O = "";
-        const $ = D > 0 ? E[D - 1] : "", H = D < E.length ? E[D] : "";
-        return D > 0 && ($ === "." || !N($) && $ !== " ") && (R = " "), D < E.length && !N(H) && H !== " " && (O = " "), {
-          text: R + M + O,
-          prefixLength: R.length,
+  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), b = isEmpty(x) ? "" : isEmpty(m) ? h : m, y = get(LANGUAGES, b, b), B = usePageExternalData(), j = useSelectedBlock(), C = useRegisteredChaiBlocks(), S = get(C, [j == null ? void 0 : j._type, "i18nProps"], []) || [], [A, _] = useState(null), w = useCallback(
+    (k) => {
+      const E = (N) => /[.,!?;:]/.test(N), T = (N, D, M) => {
+        let P = "", O = "";
+        const $ = D > 0 ? N[D - 1] : "", H = D < N.length ? N[D] : "";
+        return D > 0 && ($ === "." || !E($) && $ !== " ") && (P = " "), D < N.length && !E(H) && H !== " " && (O = " "), {
+          text: P + M + O,
+          prefixLength: P.length,
           suffixLength: O.length
         };
-      }, L = document.getElementById(o);
-      if (!L) return;
-      const P = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
-      if (P && (P.querySelector(".ProseMirror") || P.__chaiRTE)) {
-        const E = P.__chaiRTE;
-        if (E) {
-          const D = `{{${v}}}`;
-          E.commands.focus();
-          const { from: M, to: R } = E.state.selection;
-          if (M !== R)
-            E.chain().deleteSelection().insertContent(D).run();
+      }, I = document.getElementById(o);
+      if (!I) return;
+      const R = document.getElementById(`chai-rte-${o}`) || document.getElementById(`chai-rte-modal-${o}`);
+      if (R && (R.querySelector(".ProseMirror") || R.__chaiRTE)) {
+        const N = R.__chaiRTE;
+        if (N) {
+          const D = `{{${k}}}`;
+          N.commands.focus();
+          const { from: M, to: P } = N.state.selection;
+          if (M !== P)
+            N.chain().deleteSelection().insertContent(D).run();
           else {
-            const { state: $ } = E, H = $.selection.from, F = $.doc.textBetween(Math.max(0, H - 1), H), U = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
+            const { state: $ } = N, H = $.selection.from, F = $.doc.textBetween(Math.max(0, H - 1), H), U = $.doc.textBetween(H, Math.min(H + 1, $.doc.content.size));
             let z = "";
-            H > 0 && F !== " " && !N(F) && (z = " ");
+            H > 0 && F !== " " && !E(F) && (z = " ");
             let W = "";
-            U && U !== " " && !N(U) && (W = " "), E.chain().insertContent(z + D + W).run();
+            U && U !== " " && !E(U) && (W = " "), N.chain().insertContent(z + D + W).run();
           }
-          setTimeout(() => m(E.getHTML(), {}, o), 100);
+          setTimeout(() => f(N.getHTML(), {}, o), 100);
           return;
         }
       } else {
-        const E = L, D = E.selectionStart || 0, M = E.value || "", R = E.selectionEnd || D;
-        if (R > D) {
-          const U = `{{${v}}}`, { text: z } = I(M, D, U), W = M.slice(0, D) + z + M.slice(R);
-          m(W, {}, o);
+        const N = I, D = N.selectionStart || 0, M = N.value || "", P = N.selectionEnd || D;
+        if (P > D) {
+          const U = `{{${k}}}`, { text: z } = T(M, D, U), W = M.slice(0, D) + z + M.slice(P);
+          f(W, {}, o);
           return;
         }
-        const $ = `{{${v}}}`, { text: H } = I(M, D, $), F = M.slice(0, D) + H + M.slice(D);
-        m(F, {}, o);
+        const $ = `{{${k}}}`, { text: H } = T(M, D, $), F = M.slice(0, D) + H + M.slice(D);
+        f(F, {}, o);
       }
     },
-    [o, m, g, j == null ? void 0 : j._id]
+    [o, f, g, j == null ? void 0 : j._id]
   );
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const k = S == null ? void 0 : S.includes(o.replace("root.", ""));
+  const v = S == null ? void 0 : S.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const v = B === o;
+    const k = A === o;
     return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => _(v ? null : o),
+          onClick: () => _(k ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            v ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            k ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
             " ",
@@ -5181,7 +5185,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${v ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${k ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -5194,13 +5198,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       /* @__PURE__ */ jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
         r,
         " ",
-        k && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+        v && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
           y
         ] }),
         p && u.type !== "object" ? " *" : null
       ] }),
-      u.type === "string" && !u.enum && !u.oneOf && A && /* @__PURE__ */ jsx(NestedPathSelector, { data: A, onSelect: w, dataType: "value" })
+      u.type === "string" && !u.enum && !u.oneOf && B && /* @__PURE__ */ jsx(NestedPathSelector, { data: B, onSelect: w, dataType: "value" })
     ] }),
     c,
     a,
@@ -5213,8 +5217,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
   const { selectedLang: i } = useLanguages(), [c] = useAtom$1(chaiRjsfWidgetsAtom), [d] = useAtom$1(chaiRjsfFieldsAtom), [p] = useAtom$1(chaiRjsfTemplatesAtom), u = useThrottledCallback(
-    async ({ formData: g }, m) => {
-      l({ formData: g }, m);
+    async ({ formData: g }, f) => {
+      l({ formData: g }, f);
     },
     [l, i],
     400
@@ -5253,42 +5257,73 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       uiSchema: r,
       schema: n,
       formData: a,
-      onChange: ({ formData: g }, m) => {
-        if (console.log(g, m), !m || o !== (g == null ? void 0 : g._id)) return;
-        const f = take(m.split("."), 2).join(".").replace("root.", "");
-        u({ formData: g }, f);
+      onChange: ({ formData: g }, f) => {
+        if (!f || o !== (g == null ? void 0 : g._id)) return;
+        const m = take(f.split("."), 2).join(".").replace("root.", "");
+        u({ formData: g }, m);
       }
     },
     i
   );
-}), formDataWithSelectedLang = (o, n, r) => {
+}), GlobalBlockSettings = () => {
+  const o = useSelectedBlock(), { data: n, refetch: r, isLoading: a } = usePartialBlocksList(), l = useUpdateBlocksProps();
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("label", { className: "text-sm", children: "Choose a global block" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: "h-8 w-full rounded-md border border-border bg-gray-50 p-0 px-2 text-xs dark:bg-gray-800",
+        value: (o == null ? void 0 : o.globalBlock) || "",
+        onChange: (i) => {
+          var c;
+          l([o._id], {
+            globalBlock: i.target.value,
+            _name: `Global Block: ${startCase((c = get(n, i.target.value, "")) == null ? void 0 : c.name)}`
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Select a global block" }),
+          Object.keys(n).map((i) => /* @__PURE__ */ jsx("option", { value: i, children: n[i].name || i }, i))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 text-xs", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: r,
+        className: "rounded-md bg-gray-100 p-1 px-2 text-xs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700",
+        children: a ? "Loading..." : "Refresh List"
+      }
+    ) })
+  ] });
+}, formDataWithSelectedLang = (o, n, r) => {
   const a = cloneDeep(o);
   return forEach(keys(o), (l) => {
     includes(get(r, "i18nProps", []), l) && !isEmpty(n) && (a[l] = get(o, `${l}-${n}`));
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), f = formDataWithSelectedLang(g, o, m), h = ({ formData: B }, _, w) => {
-    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(B, _) }, w);
-  }, b = useCallback(
-    debounce(({ formData: B }, _, w) => {
-      h({ formData: B }, _, w), d(B);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), f = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, f), h = ({ formData: A }, _, w) => {
+    _ && (c == null ? void 0 : c._id) === n._id && a([n._id], { [_]: get(A, _) }, w);
+  }, x = useCallback(
+    debounce(({ formData: A }, _, w) => {
+      h({ formData: A }, _, w), d(A);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), x = ({ formData: B }, _) => {
-    _ && (r([n._id], { [_]: get(B, _) }), b({ formData: B }, _, { [_]: get(c, _) }));
-  }, y = ({ formData: B }, _) => {
-    _ && (r([g._id], { [_]: get(B, _) }), b({ formData: B }, _, { [_]: get(c, _) }));
+  ), b = ({ formData: A }, _) => {
+    _ && (r([n._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
+  }, y = ({ formData: A }, _) => {
+    _ && (r([g._id], { [_]: get(A, _) }), x({ formData: A }, _, { [_]: get(c, _) }));
   };
   keys(get(i, "_bindings", {}));
-  const { schema: A, uiSchema: j } = useMemo(() => {
-    const B = n == null ? void 0 : n._type;
-    if (B)
-      return getBlockFormSchemas(B);
+  const { schema: B, uiSchema: j } = useMemo(() => {
+    const A = n == null ? void 0 : n._type;
+    if (A)
+      return getBlockFormSchemas(A);
   }, [n]), { wrapperSchema: C, wrapperUiSchema: S } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const B = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(B);
+    const A = g == null ? void 0 : g._type, { schema: _ = {}, uiSchema: w = {} } = getBlockFormSchemas(A);
     return { wrapperSchema: _, wrapperUiSchema: w };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
@@ -5296,7 +5331,7 @@ function BlockSettings() {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((B) => !B),
+          onClick: () => u((A) => !A),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5316,19 +5351,19 @@ function BlockSettings() {
         {
           blockId: g == null ? void 0 : g._id,
           onChange: y,
-          formData: f,
+          formData: m,
           schema: C,
           uiSchema: S
         }
       ) })
     ] }),
-    isEmpty(A) ? null : /* @__PURE__ */ jsx(
+    isEmpty(B) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: x,
+        onChange: b,
         formData: i,
-        schema: A,
+        schema: B,
         uiSchema: j
       }
     ),
@@ -5394,57 +5429,72 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
 ], BreakpointCard = ({
   canvas: o = !1,
   openDelay: n = 400,
-  title: r,
-  content: a,
-  currentBreakpoint: l,
-  breakpoint: i,
-  width: c,
-  icon: d,
-  onClick: p
+  tooltip: r = !0,
+  title: a,
+  content: l,
+  currentBreakpoint: i,
+  breakpoint: c,
+  width: d,
+  icon: p,
+  onClick: u
 }) => {
-  const { t: u } = useTranslation();
-  return /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
+  const { t: g } = useTranslation();
+  return r ? /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       Button,
       {
-        onClick: () => p(c),
+        onClick: () => u(d),
         size: "sm",
         className: "h-7 w-7 rounded-md p-1",
-        variant: i === l ? "outline" : "ghost",
-        children: d
+        variant: c === i ? "outline" : "ghost",
+        children: p
       }
     ) }),
     /* @__PURE__ */ jsx(HoverCardContent, { className: "w-fit max-w-52 border-border", children: /* @__PURE__ */ jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: u(r) }),
-      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: u(a) })
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: g(a) }),
+      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: g(l) })
     ] }) }) })
-  ] });
-}, Breakpoints$1 = ({ openDelay: o = 400, canvas: n = !1 }) => {
-  const [r, , a] = useScreenSizeWidth(), [l, i] = useCanvasDisplayWidth(), [c, d] = useSelectedBreakpoints(), p = c, u = d, { t: g } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (x) => {
-    p.includes(x) ? p.length > 2 && u(p.filter((y) => y !== x)) : u((y) => [...y, x]);
-  }, h = (x) => {
-    n || a(x), i(x);
-  }, b = getBreakpointValue(n ? l : r).toLowerCase();
-  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (x) => /* @__PURE__ */ createElement(
+  ] }) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: () => u(d),
+      size: "sm",
+      className: "h-7 w-7 rounded-md p-1",
+      variant: c === i ? "outline" : "ghost",
+      children: p
+    }
+  );
+}, Breakpoints$1 = ({
+  openDelay: o = 400,
+  canvas: n = !1,
+  tooltip: r = !0
+}) => {
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: f } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), h = (y) => {
+    u.includes(y) ? u.length > 2 && g(u.filter((B) => B !== y)) : g((B) => [...B, y]);
+  }, x = (y) => {
+    n || l(y), c(y);
+  }, b = getBreakpointValue(n ? i : a).toLowerCase();
+  return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (y) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...x,
-      onClick: h,
-      key: x.breakpoint,
+      ...y,
+      onClick: x,
+      key: y.breakpoint,
       currentBreakpoint: b
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      m.filter((x) => includes(p, toUpper(x.breakpoint))),
-      (x) => /* @__PURE__ */ createElement(
+      m.filter((y) => includes(u, toUpper(y.breakpoint))),
+      (y) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
-          ...x,
-          onClick: h,
-          key: x.breakpoint,
+          tooltip: r,
+          ...y,
+          onClick: x,
+          key: y.breakpoint,
           currentBreakpoint: b
         }
       )
@@ -5452,17 +5502,17 @@ const TabletIcon = ({ landscape: o = !1 }) => /* @__PURE__ */ jsx(
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer px-2.5 hover:opacity-80", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: g("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: f("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(m, (x) => /* @__PURE__ */ jsx(
+        map(m, (y) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: x.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(x.breakpoint)),
-            checked: includes(p, toUpper(x.breakpoint)),
-            children: g(x.title)
+            disabled: y.breakpoint === "xs",
+            onCheckedChange: () => h(toUpper(y.breakpoint)),
+            checked: includes(u, toUpper(y.breakpoint)),
+            children: f(y.title)
           },
-          x.breakpoint
+          y.breakpoint
         ))
       ] })
     ] })
@@ -5476,9 +5526,13 @@ function BreakpointSelector() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-start bg-muted px-2 py-1 shadow-sm", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Screen: " }),
-      /* @__PURE__ */ jsx(Breakpoints$1, { openDelay: 500 })
+      /* @__PURE__ */ jsx(Breakpoints$1, { openDelay: 1e3, tooltip: !1 })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-md rounded-t-none border border-border p-1", children: /* @__PURE__ */ jsx("p", { className: "flex-1 text-[10px] text-muted-foreground", children: n }) })
+    /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between rounded-md rounded-t-none border border-border p-1", children: /* @__PURE__ */ jsx("p", { className: "flex flex-1 items-center space-x-2 text-[10px] text-foreground", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "rounded-md bg-muted px-1 py-px text-xs font-bold uppercase text-muted-foreground", children: o === "xs" ? "Base" : o }),
+      "  ",
+      n
+    ] }) }) })
   ] });
 }
 function FaLanguage(o) {
@@ -5547,11 +5601,11 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, g] = useState();
   useEffect(() => {
-    var f;
-    (f = d.current) == null || f.focus();
+    var m;
+    (m = d.current) == null || m.focus();
   }, []);
-  const m = (f) => {
-    const { usage: h } = f || {};
+  const f = (m) => {
+    const { usage: h } = m || {};
     !l && h && g(h), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -5561,12 +5615,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (f) => c(f.target.value),
+        onChange: (m) => c(m.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (f) => {
-          f.key === "Enter" && (f.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m));
+        onKeyDown: (m) => {
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, f));
         }
       }
     ),
@@ -5576,7 +5630,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, m);
+            p.current && clearTimeout(p.current), g(void 0), r("styles", o, i, f);
           },
           variant: "default",
           className: "w-fit",
@@ -5607,25 +5661,25 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var I;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), f = useBuilderProp("askAiCallBack", null), [h, b] = useState(""), x = (I = first(d)) == null ? void 0 : I.prop, { classes: y } = getSplitChaiClasses(get(p, x, "")), A = y.split(" ").filter((L) => !isEmpty(L)), j = () => {
-    const L = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, L, !0), b("");
-  }, [C, S] = useState([]), B = ({ value: L }) => {
-    const P = L.trim().toLowerCase(), E = P.match(/.+:/g);
+  var T;
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [h, x] = useState(""), b = (T = first(d)) == null ? void 0 : T.prop, { classes: y } = getSplitChaiClasses(get(p, b, "")), B = y.split(" ").filter((I) => !isEmpty(I)), j = () => {
+    const I = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(f, I, !0), x("");
+  }, [C, S] = useState([]), A = ({ value: I }) => {
+    const R = I.trim().toLowerCase(), N = R.match(/.+:/g);
     let D = [];
-    if (E && E.length > 0) {
-      const [M] = E, R = P.replace(M, "");
-      D = i.search(R).map(($) => ({
+    if (N && N.length > 0) {
+      const [M] = N, P = R.replace(M, "");
+      D = i.search(P).map(($) => ({
         ...$,
         item: { ...$.item, name: M + $.item.name }
       }));
     } else
-      D = i.search(P);
+      D = i.search(R);
     return S(map(D, "item"));
   }, _ = () => {
     S([]);
-  }, w = (L) => L.name, T = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), k = useMemo(
+  }, w = (I) => I.name, L = (I) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: I.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -5634,34 +5688,34 @@ function ManualClasses() {
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
       value: h,
-      onKeyDown: (L) => {
-        L.key === "Enter" && h.trim() !== "" && j();
+      onKeyDown: (I) => {
+        I.key === "Enter" && h.trim() !== "" && j();
       },
-      onChange: (L, { newValue: P }) => b(P),
+      onChange: (I, { newValue: R }) => x(R),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [h, c, o]
-  ), v = (L) => {
+  ), k = (I) => {
     debugger;
-    const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(m, [L]), u(m, P, !0), r(""), l(-1);
-  }, N = () => {
+    const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(f, [I]), u(f, R, !0), r(""), l(-1);
+  }, E = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(A.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(B.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: N, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: E, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
-      f ? /* @__PURE__ */ jsxs(Popover, { children: [
+      m ? /* @__PURE__ */ jsxs(Popover, { children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(Button, { variant: "default", className: "h-6 w-fit", size: "sm", children: [
           /* @__PURE__ */ jsx(SparklesIcon, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { className: "ml-2", children: c("Ask AI") })
@@ -5674,11 +5728,11 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: C,
-          onSuggestionsFetchRequested: B,
+          onSuggestionsFetchRequested: A,
           onSuggestionsClearRequested: _,
           getSuggestionValue: w,
-          renderSuggestion: T,
-          inputProps: k,
+          renderSuggestion: L,
+          inputProps: v,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5701,38 +5755,38 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: A.map(
-      (L, P) => a === P ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: B.map(
+      (I, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: n,
-          onChange: (E) => r(E.target.value),
+          onChange: (N) => r(N.target.value),
           onBlur: () => {
-            v(L);
+            k(I);
           },
-          onKeyDown: (E) => {
-            E.key === "Enter" && v(L);
+          onKeyDown: (N) => {
+            N.key === "Enter" && k(I);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
         },
-        L
+        I
       ) : /* @__PURE__ */ jsxs(
         "button",
         {
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
           children: [
-            L,
-            n !== L && /* @__PURE__ */ jsx(
+            I,
+            n !== I && /* @__PURE__ */ jsx(
               Cross2Icon,
               {
-                onClick: () => g(m, [L], !0),
+                onClick: () => g(f, [I], !0),
                 className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
               }
             )
           ]
         },
-        L
+        I
       )
     ) })
   ] });
@@ -6072,10 +6126,10 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), f = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), f = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(x) ? (c([]), p({ color: x })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: x, shade: y.shade ? y.shade : "500" })));
+    (b) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -6086,26 +6140,26 @@ const COLOR_PROP = {
   }, [g]);
   const h = useCallback(
     // eslint-disable-next-line no-shadow
-    (x) => {
-      p({ color: g, shade: x });
+    (b) => {
+      p({ color: g, shade: b });
     },
     [g]
   );
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: b } = useTailwindClassList();
+  const { match: x } = useTailwindClassList();
   return useEffect(() => {
     const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    b(o, y) && n(y, o);
-  }, [b, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    x(o, y) && n(y, o);
+  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
         disabled: !l,
         rounded: !0,
         selected: g,
-        onChange: f,
+        onChange: m,
         options: [
           "current",
           "transparent",
@@ -6138,7 +6192,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: h, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: f, disabled: !g || !l, onChange: h, options: i }) })
   ] });
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
@@ -6335,52 +6389,52 @@ const COLOR_PROP = {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, f] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, b] = useState(!1), [x, y] = useState(""), [A, j] = useState(!1), [C, S] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [f, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [h, x] = useState(!1), [b, y] = useState(""), [B, j] = useState(!1), [C, S] = useState(!1);
   useEffect(() => {
-    const { value: k, unit: v } = getClassValueAndUnit(i);
-    if (v === "") {
-      l(k), f(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: k } = getClassValueAndUnit(i);
+    if (k === "") {
+      l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    f(v), l(v === "class" || isEmpty(k) ? "" : k);
+    m(k), l(k === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const B = useThrottledCallback((k) => c(k), [c], THROTTLE_TIME), _ = useThrottledCallback((k) => c(k, !1), [c], THROTTLE_TIME), w = useCallback(
-    (k = !1) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
-        b(!0);
+  const A = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), _ = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), w = useCallback(
+    (v = !1) => {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
+        x(!0);
         return;
       }
-      const N = get(v, "unit") !== "" ? get(v, "unit") : m;
-      if (N === "auto" || N === "none") {
-        B(`${d}${N}`);
+      const E = get(k, "unit") !== "" ? get(k, "unit") : f;
+      if (E === "auto" || E === "none") {
+        A(`${d}${E}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const L = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      k ? _(L) : B(L);
+      const I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
+      v ? _(I) : A(I);
     },
-    [B, _, a, m, d, u]
-  ), T = useCallback(
-    (k) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
-        b(!0);
+    [A, _, a, f, d, u]
+  ), L = useCallback(
+    (v) => {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
+        x(!0);
         return;
       }
-      if (k === "auto" || k === "none") {
-        B(`${d}${k}`);
+      if (v === "auto" || v === "none") {
+        A(`${d}${v}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const N = get(v, "unit") !== "" ? get(v, "unit") : k, L = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${N === "-" ? "" : N}]`;
-      B(L);
+      const E = get(k, "unit") !== "" ? get(k, "unit") : v, I = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${E === "-" ? "" : E}]`;
+      A(I);
     },
-    [B, a, d, u]
+    [A, a, d, u]
   );
-  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -6393,37 +6447,37 @@ const COLOR_PROP = {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${A ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${B ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
+      ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
-          readOnly: m === "class",
-          onKeyPress: (k) => {
-            k.key === "Enter" && w();
+          readOnly: f === "class",
+          onKeyPress: (v) => {
+            v.key === "Enter" && w();
           },
-          onKeyDown: (k) => {
-            if (k.keyCode !== 38 && k.keyCode !== 40)
+          onKeyDown: (v) => {
+            if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            k.preventDefault(), S(!0);
-            const v = parseInt$1(k.target.value);
-            let N = isNaN$1(v) ? 0 : v;
-            k.keyCode === 38 && (N += 1), k.keyCode === 40 && (N -= 1);
-            const I = `${N}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            _(P);
+            v.preventDefault(), S(!0);
+            const k = parseInt$1(v.target.value);
+            let E = isNaN$1(k) ? 0 : k;
+            v.keyCode === 38 && (E += 1), v.keyCode === 40 && (E -= 1);
+            const T = `${E}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${f === "-" ? "" : f}]`;
+            _(R);
           },
-          onKeyUp: (k) => {
-            C && (k.preventDefault(), S(!1));
+          onKeyUp: (v) => {
+            C && (v.preventDefault(), S(!1));
           },
           onBlur: () => w(),
-          onChange: (k) => {
-            b(!1), l(k.target.value);
+          onChange: (v) => {
+            x(!1), l(v.target.value);
           },
-          onClick: (k) => {
-            var v;
-            (v = k == null ? void 0 : k.target) == null || v.select(), r(!1);
+          onClick: (v) => {
+            var k;
+            (k = v == null ? void 0 : v.target) == null || k.select(), r(!1);
           },
-          value: A ? x : a,
+          value: B ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             h ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6438,7 +6492,7 @@ const COLOR_PROP = {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: f }),
               u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -6447,33 +6501,33 @@ const COLOR_PROP = {
           UnitSelection,
           {
             units: u,
-            current: m,
-            onSelect: (k) => {
-              r(!1), f(k), T(k);
+            current: f,
+            onSelect: (v) => {
+              r(!1), m(v), L(v);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || A ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(f) !== -1 || B ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => j(!0),
-        onDragEnd: (k) => {
-          if (y(() => ""), j(!1), isEmpty(k))
+        onDragEnd: (v) => {
+          if (y(() => ""), j(!1), isEmpty(v))
             return;
-          const v = `${k}`, I = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          B(I);
+          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          A(T);
         },
-        onDrag: (k) => {
-          if (isEmpty(k))
+        onDrag: (v) => {
+          if (isEmpty(v))
             return;
-          y(k);
-          const v = `${k}`, I = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          _(I);
+          y(v);
+          const k = `${v}`, T = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${f === "-" ? "" : f}]`;
+          _(T);
         },
         currentValue: a,
-        unit: m,
+        unit: f,
         negative: g,
         cssProperty: p
       }
@@ -6567,20 +6621,20 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), f = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), x = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), f = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), h = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(f, "fullCls", ""), [f]), y = useCallback(
     (_, w = !0) => {
-      const T = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
-      (p || u !== "") && (T.mq = "xs");
-      const k = generateFullClsName(T);
-      f(b, [k], w);
+      const L = { dark: p, mq: g, mod: u, cls: _, property: l, fullCls: "" };
+      (p || u !== "") && (L.mq = "xs");
+      const v = generateFullClsName(L);
+      m(x, [v], w);
     },
-    [b, p, g, u, l, f]
-  ), A = useCallback(() => {
-    h(b, [x], !0);
-  }, [b, x, h]), j = useMemo(() => canChangeClass(m, g), [m, g]);
+    [x, p, g, u, l, m]
+  ), B = useCallback(() => {
+    h(x, [b], !0);
+  }, [x, b, h]), j = useMemo(() => canChangeClass(f, g), [f, g]);
   useEffect(() => {
-    i(j, m);
-  }, [j, i, m]);
+    i(j, f);
+  }, [j, i, f]);
   const [, , C] = useScreenSizeWidth(), S = useCallback(
     (_) => {
       C({
@@ -6593,15 +6647,15 @@ const COLOR_PROP = {
       }[_]);
     },
     [C]
-  ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: j, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), A = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: j, canReset: f && A, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${f && !A ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
           AdvanceChoices,
           {
-            currentClass: get(m, "cls", ""),
+            currentClass: get(f, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -6614,7 +6668,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${x ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: A ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : j && f ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6626,19 +6680,19 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(m, "mq")),
-            p && !m.dark ? "(Light mode)" : ""
+            getBreakpoint(get(f, "mq")),
+            p && !f.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsx("br", {}),
           /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              onClick: () => S(get(m, "mq")),
+              onClick: () => S(get(f, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(m, "mq").toUpperCase()
+                get(f, "mq").toUpperCase()
               ]
             }
           )
@@ -6655,7 +6709,7 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((f) => map(g, "property").includes(f), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), f = useCallback((m) => map(g, "property").includes(m), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -6664,7 +6718,7 @@ const COLOR_PROP = {
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: f, key: h }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            n.map(({ label: m, key: h }) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -6673,13 +6727,13 @@ const COLOR_PROP = {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${h === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: m(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: f(h) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, h, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(f)) })
+              /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(m)) })
             ] }) }))
           ) })
         ] }),
@@ -6818,13 +6872,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
-      let f = parseFloat(i.dragStartValue);
-      f = isNaN(f) ? 0 : f;
+      const g = !get(i, "negative", !1), f = get(i, "cssProperty", "");
+      let m = parseFloat(i.dragStartValue);
+      m = isNaN(m) ? 0 : m;
       let h = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (h = 10);
-      let x = (i.dragStartY - u.pageY) / h + f;
-      g && x < 0 && (x = 0), m === "opacity" && x > 1 && (x = 1), i.onDrag(`${x}`), l(`${x}`);
+      (startsWith(f, "scale") || f === "opacity") && (h = 10);
+      let b = (i.dragStartY - u.pageY) / h + m;
+      g && b < 0 && (b = 0), f === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -6866,35 +6920,35 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), f = () => {
-    if (has(o, "blocks")) {
-      const x = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(x), r || null, a);
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), m = () => {
+    if (console.log("addBlockToPage", o), has(o, "blocks")) {
+      const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(b), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, h = useFeature("dnd"), { t: b } = useTranslation();
+  }, h = useFeature("dnd"), { t: x } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
       {
         disabled: n,
-        onClick: f,
+        onClick: m,
         type: "button",
-        onDragStart: (x) => {
-          x.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), x.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            g([]), m();
+        onDragStart: (b) => {
+          b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+            g([]), f();
           }, 200);
         },
         draggable: h ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(b(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: b(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6951,6 +7005,9 @@ const CoreBlock = ({
     required: "required",
     multiple: "multiple",
     name: "fieldName"
+  },
+  form: {
+    action: "action"
   }
 }, shouldAddText = (o, n) => o.children.length === 1 && includes(
   ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
@@ -7079,7 +7136,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, f, h, b, x, y, A, j;
+  var f, m, h, x, b, y, B, j;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
@@ -7120,29 +7177,29 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((m = l.find((S) => S.key === "href")) == null ? void 0 : m.value) || "",
-      hrefType: ((f = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : f.value) || "video",
+      href: ((f = l.find((S) => S.key === "href")) == null ? void 0 : f.value) || "",
+      hrefType: ((m = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
       autoplay: ((h = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : h.value) === "true" ? "true" : "false",
-      maxWidth: ((x = (b = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : b.value) == null ? void 0 : x.replace("px", "")) || "",
+      maxWidth: ((b = (x = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : b.replace("px", "")) || "",
       backdropColor: ((y = l.find((S) => S.key === "data-overlay")) == null ? void 0 : y.value) || "",
-      galleryName: ((A = l.find((S) => S.key === "data-gall")) == null ? void 0 : A.value) || ""
+      galleryName: ((B = l.find((S) => S.key === "data-gall")) == null ? void 0 : B.value) || ""
     }, forEach(C, (S) => {
       has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const C = filter(r.children || [], (B) => (B == null ? void 0 : B.tagName) !== "span");
+    const C = filter(r.children || [], (A) => (A == null ? void 0 : A.tagName) !== "span");
     a.content = getTextContent(C);
     const S = find(
       r.children || [],
-      (B) => (B == null ? void 0 : B.tagName) === "span" && some(B.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
+      (A) => (A == null ? void 0 : A.tagName) === "span" && some(A.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg")
     );
     if (S) {
-      const B = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
-      if (B) {
-        a.icon = stringify([B]);
-        const { height: _, width: w } = getSvgDimensions(B, "16px", "16px");
+      const A = find(S.children || [], (_) => (_ == null ? void 0 : _.tagName) === "svg");
+      if (A) {
+        a.icon = stringify([A]);
+        const { height: _, width: w } = getSvgDimensions(A, "16px", "16px");
         a.iconHeight = _, a.iconWidth = w;
       }
     }
@@ -7155,8 +7212,8 @@ const CoreBlock = ({
     const C = stringify([r]);
     return hasVideoEmbed(C) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(C)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = C, [a];
   } else if (r.tagName === "svg") {
-    const C = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), B = get(C, "value") ? `[${get(C, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${_} h-${B}`, w)}`.trim(), r.attributes = filter(r.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([r]), [a];
+    const C = find(r.attributes, { key: "height" }), S = find(r.attributes, { key: "width" }), A = get(C, "value") ? `[${get(C, "value")}px]` : "24px", _ = get(S, "value") ? `[${get(S, "value")}px]` : "24px", w = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn$1(`w-${_} h-${A}`, w)}`.trim(), r.attributes = filter(r.attributes, (L) => !includes(["style", "width", "height", "class"], L.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((j = n.block) == null ? void 0 : j._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -7205,23 +7262,129 @@ const CoreBlock = ({
     ] }) }),
     /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: r("Import HTML") }) })
   ] });
+}, partialBlocksDataAtom = atom$1({
+  blocks: [],
+  groups: [],
+  isLoading: !0,
+  error: null
+}), hasInitializedPartialBlocksAtom = atom$1(!1), formatReadableName = (o) => {
+  if (!o) return "";
+  let n = o.replace(/[-_]/g, " ");
+  return n = n.replace(/([a-z])([A-Z])/g, "$1 $2"), n.split(" ").map((r) => r.charAt(0).toUpperCase() + r.slice(1).toLowerCase()).join(" ");
+}, PartialBlocks = ({
+  parentId: o,
+  position: n,
+  gridCols: r = "grid-cols-2"
+}) => {
+  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
+  useEffect(() => {
+    if (!u || Object.keys(d.blocks).length === 0)
+      if (c)
+        p({
+          blocks: [],
+          groups: [],
+          isLoading: !1,
+          error: c
+        }), g(!0);
+      else if (!l && Object.keys(a || {}).length > 0) {
+        const m = Object.entries(a).map(([x, b]) => {
+          const y = b, B = y.type || "partial", j = formatReadableName(B);
+          return {
+            type: "PartialBlock",
+            // Set the type to PartialBlock
+            label: formatReadableName(y.name || x),
+            description: y.description || "",
+            group: j,
+            // Use formatted type as group
+            category: "partial",
+            partialBlockId: x
+            // Store the original ID as partialBlockId
+          };
+        }), h = uniq(map(m, "group"));
+        p({
+          blocks: m,
+          groups: h,
+          isLoading: !1,
+          error: null
+        }), g(!0);
+      } else l ? p((m) => ({ ...m, isLoading: !0, error: null })) : !l && Object.keys(a || {}).length === 0 && (p({
+        blocks: [],
+        groups: [],
+        isLoading: !1,
+        error: "No partial blocks available"
+      }), g(!0));
+  }, [
+    l,
+    a,
+    u,
+    g,
+    p,
+    d.blocks,
+    c
+  ]);
+  const f = () => {
+    p((m) => ({ ...m, isLoading: !0, error: null })), g(!1), i();
+  };
+  return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: f,
+        className: "rounded-md bg-primary px-3 py-1 text-sm text-primary-foreground hover:bg-primary/90",
+        children: "Refresh"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(
+    ChaiBuilderBlocks,
+    {
+      gridCols: r,
+      parentId: o,
+      position: n,
+      groups: d.groups,
+      blocks: d.blocks
+    }
+  );
 }, CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var b;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (b = find(c, (x) => x._id === r)) == null ? void 0 : b._type;
+  var v;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), f = (v = find(c, (k) => k._id === r)) == null ? void 0 : v._type, [m, h] = useState("all"), [x, b] = useState(null), y = useRef(null);
   useEffect(() => {
-    const x = setTimeout(() => {
-      var y;
-      (y = u.current) == null || y.focus();
+    const k = setTimeout(() => {
+      var E;
+      (E = u.current) == null || E.focus();
     }, 0);
-    return () => clearTimeout(x);
-  }, [g]);
-  const f = d ? values(n).filter(
-    (x) => {
-      var y, A;
-      return (((y = x.label) == null ? void 0 : y.toLowerCase()) + " " + ((A = x.type) == null ? void 0 : A.toLowerCase())).includes(d.toLowerCase());
-    }
-  ) : n, h = d ? o.filter((x) => reject(filter(values(f), { group: x }), { hidden: !0 }).length > 0) : o.filter((x) => reject(filter(values(n), { group: x }), { hidden: !0 }).length > 0);
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-2xl flex-col", children: [
+    return () => clearTimeout(k);
+  }, [g]), useEffect(() => {
+    d && (h("all"), b(null));
+  }, [d]), useEffect(() => (y.current = debounce((k) => {
+    h(k);
+  }, 500), () => {
+    y.current && y.current.cancel();
+  }), []);
+  const B = useCallback((k) => {
+    b(k), y.current && y.current(k);
+  }, []), j = useCallback(() => {
+    b(null), y.current && y.current.cancel();
+  }, []), C = useCallback((k) => {
+    y.current && y.current.cancel(), h(k), b(null);
+  }, []), S = useMemo(
+    () => d ? values(n).filter(
+      (k) => {
+        var E, T;
+        return (((E = k.label) == null ? void 0 : E.toLowerCase()) + " " + ((T = k.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
+      }
+    ) : n,
+    [n, d]
+  ), A = useMemo(
+    () => d ? o.filter(
+      (k) => reject(filter(values(S), { group: k }), { hidden: !0 }).length > 0
+    ) : o.filter((k) => reject(filter(values(n), { group: k }), { hidden: !0 }).length > 0),
+    [n, S, o, d]
+  ), _ = useMemo(
+    () => sortBy(A, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
+    [A]
+  ), w = useMemo(() => m === "all" ? S : filter(values(S), { group: m }), [S, m]), L = useMemo(() => m === "all" ? _ : [m], [_, m]);
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
       {
@@ -7229,32 +7392,59 @@ const CoreBlock = ({
         type: "search",
         placeholder: i("Search blocks..."),
         value: d,
-        onChange: (x) => p(x.target.value)
+        className: "-ml-2",
+        onChange: (k) => p(k.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: h.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
-      i("No blocks found matching"),
-      ' "',
-      d,
-      '"'
-    ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: sortBy(
-      h,
-      (x) => CORE_GROUPS.indexOf(x) === -1 ? 99 : CORE_GROUPS.indexOf(x)
-    ).map((x) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(x.toLowerCase())) }),
-      /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
-        reject(filter(values(f), { group: x }), { hidden: !0 }).map((y) => /* @__PURE__ */ jsx(
-          CoreBlock,
+    /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
+      _.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
           {
-            parentId: r,
-            position: a,
-            block: y,
-            disabled: !canAcceptChildBlock(m, y.type) || !canBeNestedInside(m, y.type)
+            onClick: () => C("all"),
+            onMouseEnter: () => B("all"),
+            onMouseLeave: j,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
+            children: i("All")
           },
-          y.type
+          "sidebar-all"
+        ),
+        _.map((k) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => C(k),
+            onMouseEnter: () => B(k),
+            onMouseLeave: j,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || x === k ? "bg-accent text-accent-foreground" : "hover:bg-accent/50 hover:text-accent-foreground"}`,
+            children: capitalize(i(k.toLowerCase()))
+          },
+          `sidebar-${k}`
         ))
-      ) })
-    ] }, x)) }) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: A.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+        i("No blocks found matching"),
+        ' "',
+        d,
+        '"'
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: L.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: React__default.Children.toArray(
+          reject(
+            m === "all" ? filter(values(w), { group: k }) : values(w),
+            { hidden: !0 }
+          ).map((E) => /* @__PURE__ */ jsx(
+            CoreBlock,
+            {
+              parentId: r,
+              position: a,
+              block: E,
+              disabled: !canAcceptChildBlock(f, E.type) || !canBeNestedInside(f, E.type)
+            },
+            E.type
+          ))
+        ) })
+      ] }, k)) }) }) })
+    ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
   className: o,
@@ -7262,7 +7452,11 @@ const CoreBlock = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), g = useCallback(() => {
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), { data: g } = usePartialBlocksList(), f = Object.keys(g || {}).length > 0;
+  useEffect(() => {
+    i === "partials" && !f && c("library");
+  }, [i, f, c]);
+  const m = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: cn$1("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -7273,8 +7467,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (m) => {
-          d(""), c(m);
+        onValueChange: (h) => {
+          d(""), c(h);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7282,13 +7476,15 @@ const CoreBlock = ({
           /* @__PURE__ */ jsxs(TabsList, { className: "flex w-full items-center", children: [
             /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
+            f && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             p ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (m) => /* @__PURE__ */ jsx(TabsTrigger, { value: m.key, children: React__default.createElement(m.tab) }))
+            map(u, (h) => /* @__PURE__ */ jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
           ] }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
+          f && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           p ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(u, (m) => /* @__PURE__ */ jsx(TabsContent, { value: m.key, children: React__default.createElement(m.tabContent, { close: g, parentId: r, position: a }) }))
+          map(u, (h) => /* @__PURE__ */ jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: m, parentId: r, position: a }) }))
         ]
       }
     )
@@ -7345,12 +7541,12 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), f = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), b = (A) => {
-    const j = has(A, "styles_attrs.data-page-section");
-    return A._type === "Box" && j;
-  }, x = useCallback(
-    async (A) => {
-      if (A.stopPropagation(), has(o, "component")) {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), f = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, h] = useAtom$1(draggedBlockAtom), x = (B) => {
+    const j = has(B, "styles_attrs.data-page-section");
+    return B._type === "Box" && j;
+  }, b = useCallback(
+    async (B) => {
+      if (B.stopPropagation(), has(o, "component")) {
         d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
@@ -7365,20 +7561,20 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : x,
-        draggable: f ? "true" : "false",
-        onDragStart: async (A) => {
+        } : b,
+        draggable: m ? "true" : "false",
+        onDragStart: async (B) => {
           const j = await c(n, o);
           let C = r;
-          if (b(first(j)) && (C = null), !isEmpty(j)) {
+          if (x(first(j)) && (C = null), !isEmpty(j)) {
             const S = { blocks: j, uiLibrary: !0, parent: C };
-            if (A.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
-              const B = new Image();
-              B.src = o.preview, B.onload = () => {
-                A.dataTransfer.setDragImage(B, 0, 0);
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
+              const A = new Image();
+              A.src = o.preview, A.onload = () => {
+                B.dataTransfer.setDragImage(A, 0, 0);
               };
             } else
-              A.dataTransfer.setDragImage(new Image(), 0, 0);
+              B.dataTransfer.setDragImage(new Image(), 0, 0);
             h(S), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
@@ -7392,11 +7588,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: m }) })
+          o.preview ? /* @__PURE__ */ jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: f }) : /* @__PURE__ */ jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: f }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: m }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -7411,9 +7607,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [m, f] = useState("Hero"), h = get(g, m, []), b = useRef(null), { t: x } = useTranslation(), y = (C) => {
-    b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && f(C);
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((C) => C.category === "custom"), d = l.find((C) => C.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), g = groupBy([...p, ...c], "group"), [f, m] = useState("Hero"), h = get(g, f, []), x = useRef(null), { t: b } = useTranslation(), y = (C) => {
+    x.current && (clearTimeout(x.current), x.current = null), x.current = setTimeout(() => {
+      x.current && m(C);
     }, 300);
   };
   if (u)
@@ -7421,26 +7617,26 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const A = filter(h, (C, S) => S % 2 === 0), j = filter(h, (C, S) => S % 2 === 1);
+  const B = filter(h, (C, S) => S % 2 === 0), j = filter(h, (C, S) => S % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: x("Groups") }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: b("Groups") }),
         /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
           map(g, (C, S) => /* @__PURE__ */ jsxs(
             "div",
             {
               onMouseEnter: () => y(S),
-              onMouseLeave: () => clearTimeout(b.current),
-              onClick: () => f(S),
+              onMouseLeave: () => clearTimeout(x.current),
+              onClick: () => m(S),
               className: cn$1(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                S === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                S === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(x(S.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(b(S.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
@@ -7452,12 +7648,12 @@ const BlockCard = ({
     /* @__PURE__ */ jsxs(
       ScrollArea,
       {
-        onMouseEnter: () => b.current ? clearTimeout(b.current) : null,
+        onMouseEnter: () => x.current ? clearTimeout(x.current) : null,
         className: "z-10 -mt-2 flex h-full max-h-full w-full flex-col gap-2 border-l border-border transition-all ease-linear",
         children: [
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              A.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
+              B.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
             ) }),
             /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
               j.map((C) => /* @__PURE__ */ jsx(BlockCard, { parentId: o, position: n, block: C, library: d }))
@@ -7680,53 +7876,53 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var P;
+  var R;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: f, data: h, isSelected: b, willReceiveDrop: x, isDragging: y, isEditing: A, handleClick: j } = o, C = (E) => {
-    E.stopPropagation(), !i.includes(f) && o.toggle();
-  }, S = (E) => {
-    E.isInternal && (p = E.isOpen, E.isOpen && E.close());
-  }, B = (E) => {
-    E.isInternal && p !== null && (p ? E.open() : E.close(), p = null);
-  }, [_, w] = useAtom$1(currentAddSelection), T = () => {
-    var E;
-    k(), o.parent.isSelected || w((E = o == null ? void 0 : o.parent) == null ? void 0 : E.id);
-  }, k = () => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: f } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: b, isDragging: y, isEditing: B, handleClick: j } = o, C = (N) => {
+    N.stopPropagation(), !i.includes(m) && o.toggle();
+  }, S = (N) => {
+    N.isInternal && (p = N.isOpen, N.isOpen && N.close());
+  }, A = (N) => {
+    N.isInternal && p !== null && (p ? N.open() : N.close(), p = null);
+  }, [_, w] = useAtom$1(currentAddSelection), L = () => {
+    var N;
+    v(), o.parent.isSelected || w((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+  }, v = () => {
     w(null);
-  }, v = (E) => {
-    k(), E.stopPropagation(), !o.isOpen && !i.includes(f) && o.toggle(), j(E);
+  }, k = (N) => {
+    v(), N.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), j(N);
   };
   useEffect(() => {
-    const E = setTimeout(() => {
-      x && !o.isOpen && !y && !i.includes(f) && o.toggle();
+    const N = setTimeout(() => {
+      b && !o.isOpen && !y && !i.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(E);
-  }, [x, o, y]);
-  const N = useMemo(() => {
-    const E = Object.keys(h), D = [];
-    for (let M = 0; M < E.length; M++)
-      if (E[M].endsWith("_attrs")) {
-        const R = h[E[M]], O = Object.keys(R).join("|");
+    return () => clearTimeout(N);
+  }, [b, o, y]);
+  const E = useMemo(() => {
+    const N = Object.keys(h), D = [];
+    for (let M = 0; M < N.length; M++)
+      if (N[M].endsWith("_attrs")) {
+        const P = h[N[M]], O = Object.keys(P).join("|");
         O.match(/x-data/) && D.push("data"), O.match(/x-on/) && D.push("event"), O.match(/x-show|x-if/) && D.push("show");
       }
     return D;
-  }, [h]), I = (E, D) => {
-    const M = d.contentDocument || d.contentWindow.document, R = M.querySelector(`[data-block-id=${E}]`);
-    R && R.setAttribute("data-drop", D);
-    const O = R.getBoundingClientRect(), $ = d.getBoundingClientRect();
-    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = R.offsetTop - $.top);
-  }, L = (E) => {
-    k();
+  }, [h]), T = (N, D) => {
+    const M = d.contentDocument || d.contentWindow.document, P = M.querySelector(`[data-block-id=${N}]`);
+    P && P.setAttribute("data-drop", D);
+    const O = P.getBoundingClientRect(), $ = d.getBoundingClientRect();
+    O.top >= $.top && O.left >= $.left && O.bottom <= $.bottom && O.right <= $.right || (M.documentElement.scrollTop = P.offsetTop - $.top);
+  }, I = (N) => {
+    v();
     const D = get(o, "parent.id");
-    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: E }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: E });
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
-  return f === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       "div",
       {
-        onClick: () => L(-1),
+        onClick: () => I(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -7736,35 +7932,35 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       }
     ),
     /* @__PURE__ */ jsx("br", {})
-  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: f, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
+  ] }) : /* @__PURE__ */ jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => g(f),
-      onMouseLeave: () => m(),
-      onClick: v,
+      onMouseEnter: () => g(m),
+      onMouseLeave: () => f(),
+      onClick: k,
       style: n,
-      "data-node-id": f,
-      ref: i.includes(f) ? null : r,
+      "data-node-id": m,
+      ref: i.includes(m) ? null : r,
       onDragStart: () => S(o),
-      onDragEnd: () => B(o),
-      onDragOver: (E) => {
-        E.preventDefault(), I(f, "yes");
+      onDragEnd: () => A(o),
+      onDragOver: (N) => {
+        N.preventDefault(), T(m, "yes");
       },
-      onDragLeave: (E) => {
-        E.preventDefault(), I(f, "no");
+      onDragLeave: (N) => {
+        N.preventDefault(), T(m, "no");
       },
-      onDrop: (E) => {
-        E.preventDefault(), I(f, "no");
+      onDrop: (N) => {
+        N.preventDefault(), T(m, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (E) => {
-              E.stopPropagation(), L(o.childIndex);
+            onClick: (N) => {
+              N.stopPropagation(), I(o.childIndex);
             },
-            onMouseEnter: T,
-            onMouseLeave: k,
+            onMouseEnter: L,
+            onMouseLeave: v,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7774,11 +7970,11 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
           {
             className: cn$1(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
-              b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              x ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
+              b && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === _ ? "bg-purple-100" : "",
               y && "opacity-20",
-              i.includes(f) ? "opacity-50" : ""
+              i.includes(m) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7789,47 +7985,47 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     children: u && /* @__PURE__ */ jsx("button", { onClick: C, type: "button", children: /* @__PURE__ */ jsx(
                       ChevronRight,
                       {
-                        className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}`
+                        className: `h-3 w-3 stroke-[3] ${x ? "text-slate-200" : "text-slate-400"}`
                       }
                     ) })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "leading-1 flex items-center", children: [
                   /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
-                  A ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
+                  B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (E) => {
-                        E.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (N) => {
+                        N.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
                         /* @__PURE__ */ jsx("span", { children: (h == null ? void 0 : h._name) || (h == null ? void 0 : h._type.split("/").pop()) }),
-                        N.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        N.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        N.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                        E.includes("data") && /* @__PURE__ */ jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        E.includes("event") && /* @__PURE__ */ jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        E.includes("show") && /* @__PURE__ */ jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                       ]
                     }
                   )
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(f) && a.map((E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                !i.includes(m) && a.map((N) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(E.item, { blockId: f })
+                      children: React__default.createElement(N.item, { blockId: m })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: E.tooltip })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-10", children: N.tooltip })
                 ] })),
-                canAddChildBlock(h == null ? void 0 : h._type) && !i.includes(f) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && !i.includes(m) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: f }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsx(PlusIcon$1, { size: "15" })
@@ -7841,8 +8037,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (E) => {
-                        E.stopPropagation(), c(f), o.isOpen && o.toggle();
+                      onClick: (N) => {
+                        N.stopPropagation(), c(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -8502,14 +8698,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), f = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), f = useRef(null), m = useRef(null);
   useEffect(() => {
-    var b;
-    (b = m.current) == null || b.focus();
+    var x;
+    (x = f.current) == null || x.focus();
   }, []);
-  const h = (b) => {
-    const { usage: x } = b || {};
-    !l && x && g(x), f.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const h = (x) => {
+    const { usage: b } = x || {};
+    !l && b && g(b), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -8527,14 +8723,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: m,
+          ref: f,
           value: i,
-          onChange: (b) => c(b.target.value),
+          onChange: (x) => c(x.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), f.current && clearTimeout(f.current), g(void 0), r("content", o, i, h));
+          onKeyDown: (x) => {
+            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), r("content", o, i, h));
           }
         }
       ),
@@ -8544,7 +8740,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              f.current && clearTimeout(f.current), g(void 0), r("content", o, i, h);
+              m.current && clearTimeout(m.current), g(void 0), r("content", o, i, h);
             },
             variant: "default",
             className: "w-fit",
@@ -8576,8 +8772,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (b) => {
-            f.current && clearTimeout(f.current), g(void 0), r("content", o, b, h);
+          onClick: (x) => {
+            m.current && clearTimeout(m.current), g(void 0), r("content", o, x, h);
           }
         }
       )
@@ -8587,13 +8783,13 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, g] = useState(!1), 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), [p, u] = useState(null), [, g] = useState(!1), f = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
-  const f = async () => {
+  const m = async () => {
     try {
-      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
+      d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), f.current.click();
     } catch (h) {
       u(h);
     } finally {
@@ -8609,7 +8805,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsx(AccordionTrigger, { ref: f, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsx(
             Textarea,
@@ -8621,7 +8817,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               className: "mt-1 w-full",
               rows: 10,
               onKeyDown: (h) => {
-                h.key === "Enter" && (h.preventDefault(), f());
+                h.key === "Enter" && (h.preventDefault(), m());
               }
             }
           ),
@@ -8633,7 +8829,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: r.trim().length < 5,
-                onClick: () => f(),
+                onClick: () => m(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8662,7 +8858,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), f();
+                        a(""), m();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8816,32 +9012,32 @@ const AiAssistant = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, f] = useState(""), h = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [f, m] = useState(""), h = useRef(null), x = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
-  const x = () => {
+  const b = () => {
     if (i.startsWith("@")) {
-      f("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
       const S = [...a, { key: i, value: d }];
-      r(S), l(a), c(""), p(""), f("");
+      r(S), l(a), c(""), p(""), m("");
     }
   }, y = (S) => {
-    const B = a.filter((_, w) => w !== S);
-    r(B), l(B);
-  }, A = (S) => {
+    const A = a.filter((_, w) => w !== S);
+    r(A), l(A);
+  }, B = (S) => {
     g(S), c(a[S].key), p(a[S].value);
   }, j = () => {
     if (i.startsWith("@")) {
-      f("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
       const S = [...a];
-      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), f("");
+      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), m("");
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
@@ -8849,7 +9045,7 @@ const AiAssistant = () => {
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? j() : x();
+          S.preventDefault(), u !== null ? j() : b();
         },
         className: "space-y-3",
         children: [
@@ -8881,11 +9077,11 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: b,
+                  ref: x,
                   value: d,
                   onChange: (S) => p(S.target.value),
                   onKeyDown: (S) => {
-                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? j() : x());
+                    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? j() : b());
                   },
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -8894,20 +9090,20 @@ const AiAssistant = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
+          f && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: f })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, B) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
         /* @__PURE__ */ jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(A), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(A), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, B)) })
+    ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9101,11 +9297,11 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (b) => {
-    b.preventDefault();
-  }, u = (b) => {
-    n(o === b ? null : b);
-  }, g = useSidebarMenuItems(), { t: m } = useTranslation(), f = [...g, ...c], h = useBuilderProp("htmlDir", "ltr");
+  const c = useBuilderProp("sideBarComponents.top", []), d = useBuilderProp("sideBarComponents.bottom", []), p = (x) => {
+    x.preventDefault();
+  }, u = (x) => {
+    n(o === x ? null : x);
+  }, g = useSidebarMenuItems(), { t: f } = useTranslation(), m = [...g, ...c], h = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsx("div", { dir: h, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -9116,21 +9312,21 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: f.map((b, x) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m.map((x, b) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                   Button,
                   {
-                    variant: o === x ? "default" : "ghost",
+                    variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => u(x),
-                    children: get(b, "icon", null)
+                    onClick: () => u(b),
+                    children: get(x, "icon", null)
                   },
-                  x
+                  b
                 ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: m(b.label) }) })
-              ] }, "button" + x)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(x.label) }) })
+              ] }, "button" + b)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((b, x) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(b, {}) }, `sidebar-component-${x}`)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((x, b) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", {}), children: React__default.createElement(x, {}) }, `sidebar-component-${b}`)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -9143,14 +9339,14 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(f, `${o}.isInternal`, !1) ? "" : "w-64"}`,
+                      className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(m, `${o}.isInternal`, !1) ? "" : "w-64"}`,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(f, `${o}.icon`, null) }),
-                        /* @__PURE__ */ jsx("span", { children: m(f[o].label) })
+                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
+                        /* @__PURE__ */ jsx("span", { children: f(m[o].label) })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(f, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
                 ] })
               }
             ),
@@ -9169,11 +9365,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    m("AI Assistant")
+                    f("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      m("Theme Settings")
+                      f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9225,7 +9421,7 @@ const RootLayout = () => {
   }, r * 1e3);
 }, ChaiBuilderComponent = (o) => {
   const [, n] = useBlocksStore(), r = useBuilderReset(), [a] = useAtom(builderSaveStateAtom), l = useMemo(() => o.layout || RootLayout, [o.layout]);
-  useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchGlobalBlocks(), useUnmountBroadcastChannel();
+  useAtom(selectedLibraryAtom), useKeyEventWatcher(), useExpandTree(), useAutoSave(), useWatchPartailBlocks(), useUnmountBroadcastChannel();
   const { postMessage: i } = useBroadcastChannel();
   return useEffect(() => {
     builderStore.set(
@@ -9316,12 +9512,12 @@ export {
   useCutBlockIds,
   useDarkMode,
   useDuplicateBlocks,
-  useGlobalBlocksList,
-  useGlobalBlocksStore,
   useHiddenBlockIds,
   useHighlightBlockId,
   useLanguages,
   useLayoutVariant,
+  usePartailBlocksStore,
+  usePartialBlocksList,
   usePasteBlocks,
   usePreviewMode,
   useRemoveBlocks,