@chaibuilder/sdk 2.0.0-beta.24 → 2.0.0-beta.25

package/dist/core.js

@@ -108,99 +108,99 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set());
   const c = (m) => o.get(m), d = (m, E) => {
     (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(E);
-    const C = o.get(m);
-    if (o.set(m, E), n.has(m) || n.set(m, C), C && hasPromiseAtomValue(C)) {
-      const R = "v" in E ? E.v instanceof Promise ? E.v : Promise.resolve(E.v) : Promise.reject(E.e);
-      cancelPromise(C.v, R);
+    const R = o.get(m);
+    if (o.set(m, E), n.has(m) || n.set(m, R), R && hasPromiseAtomValue(R)) {
+      const w = "v" in E ? E.v instanceof Promise ? E.v : Promise.resolve(E.v) : Promise.reject(E.e);
+      cancelPromise(R.v, w);
     }
-  }, p = (m, E, C) => {
-    const R = /* @__PURE__ */ new Map();
-    let _ = !1;
-    C.forEach((k, N) => {
-      !k && N === m && (k = E), k ? (R.set(N, k), E.d.get(N) !== k && (_ = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (_ || E.d.size !== R.size) && (E.d = R);
-  }, u = (m, E, C) => {
-    const R = c(m), _ = {
-      d: (R == null ? void 0 : R.d) || /* @__PURE__ */ new Map(),
+  }, p = (m, E, R) => {
+    const w = /* @__PURE__ */ new Map();
+    let T = !1;
+    R.forEach((k, N) => {
+      !k && N === m && (k = E), k ? (w.set(N, k), E.d.get(N) !== k && (T = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (T || E.d.size !== w.size) && (E.d = w);
+  }, u = (m, E, R) => {
+    const w = c(m), T = {
+      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
       v: E
     };
-    if (C && p(m, _, C), R && isEqualAtomValue(R, _) && R.d === _.d)
-      return R;
-    if (R && hasPromiseAtomValue(R) && hasPromiseAtomValue(_) && isEqualPromiseAtomValue(R, _)) {
-      if (R.d === _.d)
-        return R;
-      _.v = R.v;
+    if (R && p(m, T, R), w && isEqualAtomValue(w, T) && w.d === T.d)
+      return w;
+    if (w && hasPromiseAtomValue(w) && hasPromiseAtomValue(T) && isEqualPromiseAtomValue(w, T)) {
+      if (w.d === T.d)
+        return w;
+      T.v = w.v;
     }
-    return d(m, _), _;
-  }, x = (m, E, C, R) => {
+    return d(m, T), T;
+  }, x = (m, E, R, w) => {
     if (isPromiseLike$2(E)) {
-      let _;
+      let T;
       const k = new Promise((N, $) => {
         let L = !1;
         E.then(
-          (D) => {
+          (P) => {
             if (!L) {
               L = !0;
-              const P = c(m), O = u(
+              const M = c(m), O = u(
                 m,
                 k,
-                C
+                R
               );
-              resolvePromise(k, D), N(D), (P == null ? void 0 : P.d) !== O.d && I(m, O, P == null ? void 0 : P.d);
+              resolvePromise(k, P), N(P), (M == null ? void 0 : M.d) !== O.d && _(m, O, M == null ? void 0 : M.d);
             }
           },
-          (D) => {
+          (P) => {
             if (!L) {
               L = !0;
-              const P = c(m), O = u(
+              const M = c(m), O = u(
                 m,
                 k,
-                C
+                R
               );
-              rejectPromise(k, D), $(D), (P == null ? void 0 : P.d) !== O.d && I(m, O, P == null ? void 0 : P.d);
+              rejectPromise(k, P), $(P), (M == null ? void 0 : M.d) !== O.d && _(m, O, M == null ? void 0 : M.d);
             }
           }
-        ), _ = (D) => {
-          L || (L = !0, D.then(
-            (P) => resolvePromise(k, P),
-            (P) => rejectPromise(k, P)
-          ), N(D));
+        ), T = (P) => {
+          L || (L = !0, P.then(
+            (M) => resolvePromise(k, M),
+            (M) => rejectPromise(k, M)
+          ), N(P));
         };
       });
       return k.orig = E, k.status = "pending", registerCancelPromise(k, (N) => {
-        N && _(N), R == null || R();
-      }), u(m, k, C);
+        N && T(N), w == null || w();
+      }), u(m, k, R);
     }
-    return u(m, E, C);
-  }, f = (m, E, C) => {
-    const R = c(m), _ = {
-      d: (R == null ? void 0 : R.d) || /* @__PURE__ */ new Map(),
+    return u(m, E, R);
+  }, f = (m, E, R) => {
+    const w = c(m), T = {
+      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
       e: E
     };
-    return C && p(m, _, C), R && isEqualAtomError(R, _) && R.d === _.d ? R : (d(m, _), _);
+    return R && p(m, T, R), w && isEqualAtomError(w, T) && w.d === T.d ? w : (d(m, T), T);
   }, g = (m) => {
     const E = c(m);
-    if (E && (E.d.forEach((L, D) => {
-      D !== m && !r.has(D) && g(D);
-    }), Array.from(E.d).every(([L, D]) => {
-      const P = c(L);
-      return L === m || P === D || // TODO This is a hack, we should find a better solution.
-      P && !hasPromiseAtomValue(P) && isEqualAtomValue(P, D);
+    if (E && (E.d.forEach((L, P) => {
+      P !== m && !r.has(P) && g(P);
+    }), Array.from(E.d).every(([L, P]) => {
+      const M = c(L);
+      return L === m || M === P || // TODO This is a hack, we should find a better solution.
+      M && !hasPromiseAtomValue(M) && isEqualAtomValue(M, P);
     })))
       return E;
-    const C = /* @__PURE__ */ new Map();
-    let R = !0;
-    const _ = (L) => {
+    const R = /* @__PURE__ */ new Map();
+    let w = !0;
+    const T = (L) => {
       if (L === m) {
-        const P = c(L);
-        if (P)
-          return C.set(L, P), returnAtomValue(P);
+        const M = c(L);
+        if (M)
+          return R.set(L, M), returnAtomValue(M);
         if (hasInitialValue(L))
-          return C.set(L, void 0), L.init;
+          return R.set(L, void 0), L.init;
         throw new Error("no atom init");
       }
-      const D = g(L);
-      return C.set(L, D), returnAtomValue(D);
+      const P = g(L);
+      return R.set(L, P), returnAtomValue(P);
     };
     let k, N;
     const $ = {
@@ -209,152 +209,152 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
       },
       get setSelf() {
         return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !N && isActuallyWritableAtom(m) && (N = (...L) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && R && console.warn("setSelf function cannot be called in sync"), !R)
-            return w(m, ...L);
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && w && console.warn("setSelf function cannot be called in sync"), !w)
+            return A(m, ...L);
         }), N;
       }
     };
     try {
-      const L = m.read(_, $);
+      const L = m.read(T, $);
       return x(
         m,
         L,
-        C,
+        R,
         () => k == null ? void 0 : k.abort()
       );
     } catch (L) {
-      return f(m, L, C);
+      return f(m, L, R);
     } finally {
-      R = !1;
+      w = !1;
     }
-  }, y = (m) => returnAtomValue(g(m)), b = (m) => {
+  }, j = (m) => returnAtomValue(g(m)), b = (m) => {
     let E = r.get(m);
-    return E || (E = S(m)), E;
-  }, h = (m, E) => !E.l.size && (!E.t.size || E.t.size === 1 && E.t.has(m)), j = (m) => {
+    return E || (E = C(m)), E;
+  }, h = (m, E) => !E.l.size && (!E.t.size || E.t.size === 1 && E.t.has(m)), y = (m) => {
     const E = r.get(m);
-    E && h(m, E) && B(m);
-  }, v = (m) => {
-    const E = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new WeakMap(), R = (k) => {
+    E && h(m, E) && v(m);
+  }, S = (m) => {
+    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), w = (k) => {
       const N = r.get(k);
       N == null || N.t.forEach(($) => {
         $ !== k && (E.set(
           $,
           (E.get($) || /* @__PURE__ */ new Set()).add(k)
-        ), C.set($, (C.get($) || 0) + 1), R($));
+        ), R.set($, (R.get($) || 0) + 1), w($));
       });
     };
-    R(m);
-    const _ = (k) => {
+    w(m);
+    const T = (k) => {
       const N = r.get(k);
       N == null || N.t.forEach(($) => {
         var L;
         if ($ !== k) {
-          let D = C.get($);
-          if (D && C.set($, --D), !D) {
-            let P = !!((L = E.get($)) != null && L.size);
-            if (P) {
+          let P = R.get($);
+          if (P && R.set($, --P), !P) {
+            let M = !!((L = E.get($)) != null && L.size);
+            if (M) {
               const O = c($), V = g($);
-              P = !O || !isEqualAtomValue(O, V);
+              M = !O || !isEqualAtomValue(O, V);
             }
-            P || E.forEach((O) => O.delete($));
+            M || E.forEach((O) => O.delete($));
           }
-          _($);
+          T($);
         }
       });
     };
-    _(m);
-  }, A = (m, ...E) => {
-    let C = !0;
-    const R = (N) => returnAtomValue(g(N)), _ = (N, ...$) => {
+    T(m);
+  }, B = (m, ...E) => {
+    let R = !0;
+    const w = (N) => returnAtomValue(g(N)), T = (N, ...$) => {
       let L;
       if (N === m) {
         if (!hasInitialValue(N))
           throw new Error("atom not writable");
-        const D = c(N), P = x(N, $[0]);
-        (!D || !isEqualAtomValue(D, P)) && v(N);
+        const P = c(N), M = x(N, $[0]);
+        (!P || !isEqualAtomValue(P, M)) && S(N);
       } else
-        L = A(N, ...$);
-      if (!C) {
-        const D = T();
+        L = B(N, ...$);
+      if (!R) {
+        const P = I();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          (P) => P({ type: "async-write", flushed: D })
+          (M) => M({ type: "async-write", flushed: P })
         );
       }
       return L;
-    }, k = m.write(R, _, ...E);
-    return C = !1, k;
-  }, w = (m, ...E) => {
-    const C = A(m, ...E), R = T();
+    }, k = m.write(w, T, ...E);
+    return R = !1, k;
+  }, A = (m, ...E) => {
+    const R = B(m, ...E), w = I();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (_) => _({ type: "write", flushed: R })
-    ), C;
-  }, S = (m, E) => {
-    const C = {
+      (T) => T({ type: "write", flushed: w })
+    ), R;
+  }, C = (m, E) => {
+    const R = {
       t: new Set(E && [E]),
       l: /* @__PURE__ */ new Set()
     };
-    if (r.set(m, C), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((R, _) => {
-      const k = r.get(_);
-      k ? k.t.add(m) : _ !== m && S(_, m);
+    if (r.set(m, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((w, T) => {
+      const k = r.get(T);
+      k ? k.t.add(m) : T !== m && C(T, m);
     }), g(m), isActuallyWritableAtom(m) && m.onMount) {
-      const R = m.onMount((..._) => w(m, ..._));
-      R && (C.u = R);
+      const w = m.onMount((...T) => A(m, ...T));
+      w && (R.u = w);
     }
-    return C;
-  }, B = (m) => {
+    return R;
+  }, v = (m) => {
     var E;
-    const C = (E = r.get(m)) == null ? void 0 : E.u;
-    C && C(), r.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
-    const R = c(m);
-    R ? (hasPromiseAtomValue(R) && cancelPromise(R.v), R.d.forEach((_, k) => {
+    const R = (E = r.get(m)) == null ? void 0 : E.u;
+    R && R(), r.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
+    const w = c(m);
+    w ? (hasPromiseAtomValue(w) && cancelPromise(w.v), w.d.forEach((T, k) => {
       if (k !== m) {
         const N = r.get(k);
-        N && (N.t.delete(m), h(k, N) && B(k));
+        N && (N.t.delete(m), h(k, N) && v(k));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", m);
-  }, I = (m, E, C) => {
-    const R = new Set(E.d.keys());
-    C == null || C.forEach((_, k) => {
-      if (R.has(k)) {
-        R.delete(k);
+  }, _ = (m, E, R) => {
+    const w = new Set(E.d.keys());
+    R == null || R.forEach((T, k) => {
+      if (w.has(k)) {
+        w.delete(k);
         return;
       }
       const N = r.get(k);
-      N && (N.t.delete(m), h(k, N) && B(k));
-    }), R.forEach((_) => {
-      const k = r.get(_);
-      k ? k.t.add(m) : r.has(m) && S(_, m);
+      N && (N.t.delete(m), h(k, N) && v(k));
+    }), w.forEach((T) => {
+      const k = r.get(T);
+      k ? k.t.add(m) : r.has(m) && C(T, m);
     });
-  }, T = () => {
+  }, I = () => {
     let m;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (m = /* @__PURE__ */ new Set()); n.size; ) {
       const E = Array.from(n);
-      n.clear(), E.forEach(([C, R]) => {
-        const _ = c(C);
-        if (_) {
-          _.d !== (R == null ? void 0 : R.d) && I(C, _, R == null ? void 0 : R.d);
-          const k = r.get(C);
+      n.clear(), E.forEach(([R, w]) => {
+        const T = c(R);
+        if (T) {
+          T.d !== (w == null ? void 0 : w.d) && _(R, T, w == null ? void 0 : w.d);
+          const k = r.get(R);
           k && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (R && !hasPromiseAtomValue(R) && (isEqualAtomValue(R, _) || isEqualAtomError(R, _))) && (k.l.forEach((N) => N()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(C));
+          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, T) || isEqualAtomError(w, T))) && (k.l.forEach((N) => N()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
     }
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((E) => E("state")), m;
-  }, M = (m, E) => {
-    const C = b(m), R = T(), _ = C.l;
-    return _.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("sub")), l.forEach(
-      (k) => k({ type: "sub", flushed: R })
+  }, D = (m, E) => {
+    const R = b(m), w = I(), T = R.l;
+    return T.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("sub")), l.forEach(
+      (k) => k({ type: "sub", flushed: w })
     )), () => {
-      _.delete(E), j(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("unsub")), l.forEach((k) => k({ type: "unsub" })));
+      T.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("unsub")), l.forEach((k) => k({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
-    get: y,
-    set: w,
-    sub: M,
+    get: j,
+    set: A,
+    sub: D,
     // store dev methods (these are tentative and subject to change without notice)
     dev_subscribe_store: (m, E) => E !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
@@ -367,17 +367,17 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     dev_get_atom_state: (m) => o.get(m),
     dev_get_mounted: (m) => r.get(m),
     dev_restore_atoms: (m) => {
-      for (const [C, R] of m)
-        hasInitialValue(C) && (x(C, R), v(C));
-      const E = T();
+      for (const [R, w] of m)
+        hasInitialValue(R) && (x(R, w), S(R));
+      const E = I();
       l.forEach(
-        (C) => C({ type: "restore", flushed: E })
+        (R) => R({ type: "restore", flushed: E })
       );
     }
   } : {
-    get: y,
-    set: w,
-    sub: M
+    get: j,
+    set: A,
+    sub: D
   };
 };
 let defaultStore;
@@ -395,36 +395,36 @@ function splitAtom(o, r) {
         if (p)
           return p;
         const u = d && n.get(d), x = [], f = [];
-        return c.forEach((g, y) => {
-          const b = r ? r(g) : y;
-          f[y] = b;
+        return c.forEach((g, j) => {
+          const b = r ? r(g) : j;
+          f[j] = b;
           const h = u && u.atomList[u.keyList.indexOf(b)];
           if (h) {
-            x[y] = h;
+            x[j] = h;
             return;
           }
-          const j = (A) => {
-            const w = A(l), S = A(o), I = a(S, w == null ? void 0 : w.arr).keyList.indexOf(b);
-            if (I < 0 || I >= S.length) {
-              const T = c[a(c).keyList.indexOf(b)];
-              if (T)
-                return T;
+          const y = (B) => {
+            const A = B(l), C = B(o), _ = a(C, A == null ? void 0 : A.arr).keyList.indexOf(b);
+            if (_ < 0 || _ >= C.length) {
+              const I = c[a(c).keyList.indexOf(b)];
+              if (I)
+                return I;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return S[I];
-          }, v = (A, w, S) => {
-            const B = A(l), I = A(o), M = a(I, B == null ? void 0 : B.arr).keyList.indexOf(b);
-            if (M < 0 || M >= I.length)
+            return C[_];
+          }, S = (B, A, C) => {
+            const v = B(l), _ = B(o), D = a(_, v == null ? void 0 : v.arr).keyList.indexOf(b);
+            if (D < 0 || D >= _.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const m = isFunction(S) ? S(I[M]) : S;
-            w(o, [
-              ...I.slice(0, M),
+            const m = isFunction(C) ? C(_[D]) : C;
+            A(o, [
+              ..._.slice(0, D),
               m,
-              ...I.slice(M + 1)
+              ..._.slice(D + 1)
             ]);
           };
-          x[y] = isWritable(o) ? atom(j, v) : atom(j);
-        }), u && u.keyList.length === f.length && u.keyList.every((g, y) => g === f[y]) ? p = u : p = { arr: c, atomList: x, keyList: f }, n.set(c, p), p;
+          x[j] = isWritable(o) ? atom(y, S) : atom(y);
+        }), u && u.keyList.length === f.length && u.keyList.every((g, j) => g === f[j]) ? p = u : p = { arr: c, atomList: x, keyList: f }, n.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -1134,50 +1134,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, h, j) => {
-      const v = map(b, (w) => {
-        const B = r.find((M) => M._id === w)._parent || null, T = r.filter((M) => B ? M._parent === B : !M._parent).map((M) => M._id).indexOf(w);
-        return { _id: w, oldParent: B, oldPosition: T };
-      }), A = v.find(({ _id: w }) => w === b[0]);
-      A && A.oldParent === h && A.oldPosition === j || (i(b, h, j), o({
-        undo: () => each(v, ({ _id: w, oldParent: S, oldPosition: B }) => {
-          i([w], S, B);
+    moveBlocks: (b, h, y) => {
+      const S = map(b, (A) => {
+        const v = r.find((D) => D._id === A)._parent || null, I = r.filter((D) => v ? D._parent === v : !D._parent).map((D) => D._id).indexOf(A);
+        return { _id: A, oldParent: v, oldPosition: I };
+      }), B = S.find(({ _id: A }) => A === b[0]);
+      B && B.oldParent === h && B.oldPosition === y || (i(b, h, y), o({
+        undo: () => each(S, ({ _id: A, oldParent: C, oldPosition: v }) => {
+          i([A], C, v);
         }),
-        redo: () => i(b, h, j)
+        redo: () => i(b, h, y)
       }));
     },
-    addBlocks: (b, h, j) => {
-      a(b, h, j), o({
+    addBlocks: (b, h, y) => {
+      a(b, h, y), o({
         undo: () => l(map(b, "_id")),
-        redo: () => a(b, h, j)
+        redo: () => a(b, h, y)
       });
     },
     removeBlocks: (b) => {
-      var A;
-      const h = (A = first(b)) == null ? void 0 : A._parent, v = r.filter((w) => h ? w._parent === h : !w._parent).indexOf(first(b));
+      var B;
+      const h = (B = first(b)) == null ? void 0 : B._parent, S = r.filter((A) => h ? A._parent === h : !A._parent).indexOf(first(b));
       l(map(b, "_id")), o({
-        undo: () => a(b, h, v),
+        undo: () => a(b, h, S),
         redo: () => l(map(b, "_id"))
       });
     },
-    updateBlocks: (b, h, j) => {
-      let v = [];
-      if (j)
-        v = map(b, (A) => ({ _id: A, ...j }));
+    updateBlocks: (b, h, y) => {
+      let S = [];
+      if (y)
+        S = map(b, (B) => ({ _id: B, ...y }));
       else {
-        const A = keys(h);
-        v = map(b, (w) => {
-          const S = r.find((I) => I._id === w), B = { _id: w };
-          return each(A, (I) => B[I] = S[I]), B;
+        const B = keys(h);
+        S = map(b, (A) => {
+          const C = r.find((_) => _._id === A), v = { _id: A };
+          return each(B, (_) => v[_] = C[_]), v;
         });
       }
-      c(map(b, (A) => ({ _id: A, ...h }))), o({
-        undo: () => c(v),
-        redo: () => c(map(b, (A) => ({ _id: A, ...h })))
+      c(map(b, (B) => ({ _id: B, ...h }))), o({
+        undo: () => c(S),
+        redo: () => c(map(b, (B) => ({ _id: B, ...h })))
       });
     },
     updateBlocksRuntime: (b, h) => {
-      c(map(b, (j) => ({ _id: j, ...h })));
+      c(map(b, (y) => ({ _id: y, ...h })));
     },
     setNewBlocks: (b) => {
       n(b), o({
@@ -1187,9 +1187,9 @@ const useBlocksStoreManager = () => {
     },
     updateMultipleBlocksProps: (b) => {
       let h = [];
-      h = map(b, (j) => {
-        const v = keys(j), A = r.find((S) => S._id === j._id), w = {};
-        return each(v, (S) => w[S] = A[S]), w;
+      h = map(b, (y) => {
+        const S = keys(y), B = r.find((C) => C._id === y._id), A = {};
+        return each(S, (C) => A[C] = B[C]), A;
       }), c(b), o({
         undo: () => c(h),
         redo: () => c(b)
@@ -1200,12 +1200,12 @@ const useBlocksStoreManager = () => {
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var g;
-      for (let y = 0; y < i.length; y++) {
-        const { _id: b } = i[y];
-        i[y]._id = generateUUID();
+      for (let j = 0; j < i.length; j++) {
+        const { _id: b } = i[j];
+        i[j]._id = generateUUID();
         const h = filter(i, { _parent: b });
-        for (let j = 0; j < h.length; j++)
-          h[j]._parent = i[y]._id;
+        for (let y = 0; y < h.length; y++)
+          h[y]._parent = i[j]._id;
       }
       const p = first(i);
       let u, x;
@@ -2375,7 +2375,7 @@ function getNewClasses(o = "", r = "", n = []) {
       const g = find(l, pick(x, ["property"]));
       f && (l = filter(
         l,
-        (y) => y.fullCls !== (g == null ? void 0 : g.fullCls)
+        (j) => j.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
         ...x,
         fullCls: x.cls,
@@ -2564,8 +2564,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
     return each(p, (f) => {
-      const g = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), y = new RegExp(`(^| )${g}($| )`, "g");
-      u = u.replace(y, " ").replace(/  +/g, " ").trim();
+      const g = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${g}($| )`, "g");
+      u = u.replace(j, " ").replace(/  +/g, " ").trim();
       const b = first(f.split(":"));
       includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(f.split(":").pop().trim());
     }), each(p, (f) => {
@@ -3021,37 +3021,37 @@ const getBlockWithChildren = (o, r) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, f = (g, y) => {
-    const b = cloneDeep(y.find((h) => h._id === g));
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, f = (g, j) => {
+    const b = cloneDeep(j.find((h) => h._id === g));
     for (const h in b) {
-      const j = b[h];
-      typeof j == "string" && startsWith(j, STYLES_KEY) ? b[h] = compact(flattenDeep(j.replace(STYLES_KEY, "").split(","))).join(" ") : h !== "_id" && delete b[h];
+      const y = b[h];
+      typeof y == "string" && startsWith(y, STYLES_KEY) ? b[h] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : h !== "_id" && delete b[h];
     }
     return b;
   };
   return {
     askAi: useCallback(
-      async (g, y, b, h) => {
+      async (g, j, b, h) => {
         if (l) {
           r(!0), a(null);
           try {
-            const j = p === u ? "" : p, v = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(y, d)), p) : [f(y, d)], A = await l(g, addLangToPrompt(b, x, g), v, j), { blocks: w, error: S } = A;
-            if (S) {
-              a(S);
+            const y = p === u ? "" : p, S = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(j, d)), p) : [f(j, d)], B = await l(g, addLangToPrompt(b, x, g), S, y), { blocks: A, error: C } = B;
+            if (C) {
+              a(C);
               return;
             }
             if (g === "styles") {
-              const B = w.map((I) => {
-                for (const T in I)
-                  T !== "_id" && (I[T] = `${STYLES_KEY},${I[T]}`);
-                return I;
+              const v = A.map((_) => {
+                for (const I in _)
+                  I !== "_id" && (_[I] = `${STYLES_KEY},${_[I]}`);
+                return _;
               });
-              c(B);
+              c(v);
             } else
-              i(w);
-            h && h(A);
-          } catch (j) {
-            a(j);
+              i(A);
+            h && h(B);
+          } catch (y) {
+            a(y);
           } finally {
             r(!1), h && h();
           }
@@ -3079,7 +3079,27 @@ const getBlockWithChildren = (o, r) => {
     },
     [o]
   );
-}, layoutVariantAtom = atomWithStorage("_layout_variant_mode", "DUAL_SIDE_PANEL"), useLayoutVariant = () => {
+}, wrapperBlockAtom = atom$1((o) => {
+  var c;
+  const r = o(presentBlocksAtom), n = o(selectedBlockIdsAtom), a = n.length === 1 ? n[0] : null;
+  if (!a)
+    return null;
+  const l = find(r, { _id: a });
+  if (!l)
+    return null;
+  let i = l._parent;
+  for (; i; ) {
+    const d = find(r, { _id: i });
+    if (!d)
+      return null;
+    if ((c = getRegisteredChaiBlock(d._type)) != null && c.wrapper)
+      return d;
+    i = d._parent;
+  }
+  return null;
+});
+wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
+const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAtom = atomWithStorage("_layout_variant_mode", "DUAL_SIDE_PANEL"), useLayoutVariant = () => {
   const [o, r] = useAtom$1(layoutVariantAtom), n = useBuilderProp("layoutVariant", "DUAL_SIDE_PANEL");
   return [o || n, r];
 }, IframeInitialContent = `<!doctype html>
@@ -3336,26 +3356,26 @@ const useDnd = () => {
       g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
     onDrop: (g) => {
-      var S;
-      const y = dropTarget, h = getOrientation(y) === "vertical" ? g.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : g.clientX;
+      var C;
+      const j = dropTarget, h = getOrientation(j) === "vertical" ? g.clientY + ((C = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : C.scrollY) : g.clientX;
       dropIndex = calculateDropIndex(h, possiblePositions);
-      const j = d, v = y.getAttribute("data-block-id"), A = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((j == null ? void 0 : j._id) === v || !A) {
+      const y = d, S = j.getAttribute("data-block-id"), B = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === S || !B) {
         f();
         return;
       }
-      if (!has(j, "_id")) {
-        a(j, v === "canvas" ? null : v, dropIndex), setTimeout(f, 300);
+      if (!has(y, "_id")) {
+        a(y, S === "canvas" ? null : S, dropIndex), setTimeout(f, 300);
         return;
       }
-      let w = y.getAttribute("data-block-id");
-      w === null && (w = g.target.parentElement.getAttribute("data-block-id")), c([j._id], w === "canvas" ? null : w, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      let A = j.getAttribute("data-block-id");
+      A === null && (A = g.target.parentElement.getAttribute("data-block-id")), c([y._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (g) => {
-      const y = g, b = y.target;
+      const j = g, b = j.target;
       dropTarget = b;
-      const h = b.getAttribute("data-block-id"), j = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(h), y.stopPropagation(), y.preventDefault(), possiblePositions = [], j && calculatePossiblePositions(b), n(!0), l(""), i([]);
+      const h = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
+      u(h), j.stopPropagation(), j.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), n(!0), l(""), i([]);
     },
     onDragLeave: (g) => {
       g.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
@@ -3440,8 +3460,8 @@ const useHandleCanvasDblClick = () => {
       if (f) {
         const g = f.getAttribute("data-style-prop");
         if (g) {
-          const y = f.getAttribute("data-style-id"), b = f.getAttribute("data-block-parent");
-          l([{ id: y, prop: g, blockId: b }]);
+          const j = f.getAttribute("data-style-id"), b = f.getAttribute("data-block-parent");
+          l([{ id: j, prop: g, blockId: b }]);
         }
       }
     }, 100);
@@ -3477,8 +3497,8 @@ const useHandleCanvasDblClick = () => {
     i
   ]), useHotkeys(
     "del, backspace",
-    (y) => {
-      y.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
+    (j) => {
+      j.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
     },
     g,
     [r, l]
@@ -3541,13 +3561,13 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       tabIndex: 0,
       ref: u.setFloating,
       style: p,
-      onClick: (y) => {
-        y.stopPropagation(), y.preventDefault();
+      onClick: (j) => {
+        j.stopPropagation(), j.preventDefault();
       },
-      onMouseEnter: (y) => {
-        y.stopPropagation(), i(null);
+      onMouseEnter: (j) => {
+        j.stopPropagation(), i(null);
       },
-      onKeyDown: (y) => y.stopPropagation(),
+      onKeyDown: (j) => j.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         f && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3603,15 +3623,15 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
         typography,
         forms,
         aspectRatio,
-        plugin(function({ addBase: h, theme: j }) {
+        plugin(function({ addBase: h, theme: y }) {
           h({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: j("fontFamily.heading")
+              fontFamily: y("fontFamily.heading")
             },
             body: {
-              fontFamily: j("fontFamily.body"),
-              color: j("colors.foreground"),
-              backgroundColor: j("colors.background")
+              fontFamily: y("fontFamily.body"),
+              color: y("colors.foreground"),
+              backgroundColor: y("colors.background")
             }
           });
         })
@@ -3632,12 +3652,12 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
   }, [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 y = useMemo(
+  const j = useMemo(
     () => getChaiThemeCssVariables(o),
     [o]
   ), b = useMemo(() => getThemeFontsLinkMarkup(pick(o, ["fontFamily"])), [o]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: y }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("style", { id: "chai-theme", children: j }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { id: "chai-fonts", dangerouslySetInnerHTML: { __html: b } })
   ] });
 }, useChaiExternalData = () => useAtom$1(chaiExternalDataAtom), useCanvasSettings = () => useAtom$1(canvasSettingsAtom), isVisibleAtBreakpoint = (o, r) => {
@@ -3720,29 +3740,29 @@ function applyLanguage(o, r, n) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
-  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), f = useCallback((h) => getStyleAttrs(h, d), [d]), [g] = useChaiExternalData(), [y] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
-    (h) => h.reduce((j, v) => {
-      const A = get(p, v, {});
-      return { ...j, ...A };
+  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), f = useCallback((h) => getStyleAttrs(h, d), [d]), [g] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
+    (h) => h.reduce((y, S) => {
+      const B = get(p, S, {});
+      return { ...y, ...B };
     }, {}),
     [p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((h, j) => {
-      if (y === h._id || u.includes(h._id))
+    o.map((h, y) => {
+      if (j === h._id || u.includes(h._id))
         return null;
-      const v = {}, A = filter(r, { _parent: h._id });
-      if (v.children = A.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: A }) : null, h._type === "GlobalBlock") {
-        const R = x(h);
-        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(R, (_) => !_._parent), allBlocks: R });
+      const S = {}, B = filter(r, { _parent: h._id });
+      if (S.children = B.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: B }) : null, h._type === "GlobalBlock") {
+        const w = x(h);
+        S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (T) => !T._parent), allBlocks: w });
       }
-      const w = getRegisteredChaiBlock(h._type), S = get(w, "component", null);
-      if (isNull(S))
+      const A = getRegisteredChaiBlock(h._type), C = get(A, "component", null);
+      if (isNull(C))
         return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${h == null ? void 0 : h._type} not registered -->` });
-      const B = has(w, "getBlockStateFrom") ? w == null ? void 0 : w.getBlockStateFrom(h, r) : [], I = b(B), T = f(h);
-      if (get(T, "__isHidden", !1) && !includes(a, h._id))
+      const v = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(h, r) : [], _ = b(v), I = f(h);
+      if (get(I, "__isHidden", !1) && !includes(a, h._id))
         return null;
-      const M = i && isDescendant(i._id, h._id, r), E = {
+      const D = i && isDescendant(i._id, h._id, r), E = {
         blockProps: {
           ...includes(a, h._id) ? { "force-show": "" } : {},
           "data-block-id": h._id,
@@ -3751,31 +3771,31 @@ function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
             // @ts-ignore
             {
               "data-dnd": canAcceptChildBlock(h._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === h._id || M ? "yes" : "no"
+              "data-dnd-dragged": i._id === h._id || D ? "yes" : "no"
             }
           ) : {},
-          ...c === h._id && !M ? { "data-drop": "yes" } : {},
+          ...c === h._id && !D ? { "data-drop": "yes" } : {},
           ...includes(l, h._id) ? { "data-cut-block": "yes" } : {}
         },
-        index: j,
-        ...applyBindings(applyLanguage(h, n, w), g),
-        ...omit(T, ["__isHidden"]),
-        ...v,
+        index: y,
+        ...applyBindings(applyLanguage(h, n, A), g),
+        ...omit(I, ["__isHidden"]),
+        ...S,
         inBuilder: !0,
-        blockState: I
+        blockState: _
       };
-      if (has(w, "dataProvider"))
+      if (has(A, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           AsyncPropsBlock,
           {
-            dataProvider: w.dataProvider,
+            dataProvider: A.dataProvider,
             block: h,
-            component: S,
+            component: C,
             props: E
           }
         ) });
-      const C = getRuntimeProps(h._type);
-      return C ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: C, block: h, component: S, props: E }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(S, E) });
+      const R = getRuntimeProps(h._type);
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: R, block: h, component: C, props: E }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(C, E) });
     })
   ) });
 }
@@ -3830,43 +3850,43 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, f] = useState([]), [, g] = useState([]), [, y] = useAtom$1(canvasIframeAtom), [b, h] = useSelectedStylingBlocks(), j = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), A = (B) => {
-    p((I) => ({ ...I, width: B }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, f] = useState([]), [, g] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [b, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), B = (v) => {
+    p((_) => ({ ..._, width: v }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: B, clientHeight: I } = c.current;
-    p({ width: B, height: I });
+    const { clientWidth: v, clientHeight: _ } = c.current;
+    p({ width: v, height: _ });
   }, [c, r]);
-  const w = (B, I = 0) => {
-    const { top: T } = B.getBoundingClientRect();
-    return T + I >= 0 && T - I <= window.innerHeight;
+  const A = (v, _ = 0) => {
+    const { top: I } = v.getBoundingClientRect();
+    return I + _ >= 0 && I - _ <= window.innerHeight;
   };
   useEffect(() => {
-    var B, I;
+    var v, _;
     if (a && a.type !== "Multiple" && i.current) {
-      const T = getElementByDataBlockId(i.current.contentDocument, a._id);
-      T && (w(T) || (I = (B = i.current) == null ? void 0 : B.contentWindow) == null || I.scrollTo({ top: T.offsetTop, behavior: "smooth" }), f([T]));
+      const I = getElementByDataBlockId(i.current.contentDocument, a._id);
+      I && (A(I) || (_ = (v = i.current) == null ? void 0 : v.contentWindow) == null || _.scrollTo({ top: I.offsetTop, behavior: "smooth" }), f([I]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(b) && i.current) {
-      const B = getElementByStyleId(
+      const v = getElementByStyleId(
         i.current.contentDocument,
         first(b).id
       );
-      g(B ? [B] : [null]);
+      g(v ? [v] : [null]);
     } else
       g([null]);
   }, [b]);
-  const S = useMemo(() => {
-    let B = IframeInitialContent;
-    return B = B.replace("__HTML_DIR__", v), o === "offline" && (B = B.replace(
+  const C = useMemo(() => {
+    let v = IframeInitialContent;
+    return v = v.replace("__HTML_DIR__", S), o === "offline" && (v = v.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), B = B.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), B = B.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), B;
-  }, [o, v]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: A, onResize: A, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ), v = v.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), v = v.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), v;
+  }, [o, S]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: B, onResize: B, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
@@ -3878,12 +3898,12 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => y(i.current),
+          contentDidMount: () => j(i.current),
           ref: i,
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${r}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: S,
+          initialContent: C,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3895,7 +3915,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(HeadTags, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Provider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Canvas, { children: [
-              j ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
+              y ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(StaticBlocksRenderer, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx(AddBlockAtBottom, {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
               /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4125,19 +4145,19 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (h) => {
     a(h);
   }, x = () => {
-    const h = l.find((j) => Object.keys(j)[0] === n);
+    const h = l.find((y) => Object.keys(y)[0] === n);
     if (h) {
-      const j = Object.values(h)[0];
-      j && typeof j == "object" && "fontFamily" in j && "borderRadius" in j && "colors" in j ? c(j) : console.error("Invalid preset structure:", j);
+      const y = Object.values(h)[0];
+      y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? c(y) : console.error("Invalid preset structure:", y);
     } else
       console.error("Preset not found:", n);
   }, f = useDebouncedCallback(
-    (h, j) => {
+    (h, y) => {
       c(() => ({
         ...i,
         fontFamily: {
           ...i.fontFamily,
-          [h.replace(/font-/g, "")]: j
+          [h.replace(/font-/g, "")]: y
         }
       }));
     },
@@ -4152,33 +4172,33 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     },
     [i],
     200
-  ), y = useDebouncedCallback(
-    (h, j) => {
+  ), j = useDebouncedCallback(
+    (h, y) => {
       c(() => {
-        const v = get(i, `colors.${h}`);
-        return r ? set(v, 1, j) : set(v, 0, j), {
+        const S = get(i, `colors.${h}`);
+        return r ? set(S, 1, y) : set(S, 0, y), {
           ...i,
           colors: {
             ...i.colors,
-            [h]: v
+            [h]: S
           }
         };
       });
     },
     [i],
     200
-  ), b = (h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(h.items).map(([j]) => {
-    const v = get(i, `colors.${j}.${r ? 1 : 0}`);
+  ), b = (h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(h.items).map(([y]) => {
+    const S = get(i, `colors.${y}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorPickerInput$1,
         {
-          value: v,
-          onChange: (A) => y(j, A)
+          value: S,
+          onChange: (B) => j(y, B)
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: j.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((A) => A.charAt(0).toUpperCase() + A.slice(1)).join(" ") + (!j.toLowerCase().includes("foreground") && !j.toLowerCase().includes("border") && !j.toLowerCase().includes("input") && !j.toLowerCase().includes("ring") && !j.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, j);
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: y.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((B) => B.charAt(0).toUpperCase() + B.slice(1)).join(" ") + (!y.toLowerCase().includes("foreground") && !y.toLowerCase().includes("border") && !y.toLowerCase().includes("input") && !y.toLowerCase().includes("ring") && !y.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, y);
   }) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("no-scrollbar h-full w-full overflow-y-auto", o), children: [
     l.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 py-2", children: [
@@ -4200,12 +4220,12 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: n === "", variant: "default", onClick: x, children: p("Apply") }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("space-y-2", o), children: [
-      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([h, j]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([h, y]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         FontSelector$1,
         {
           label: h,
-          value: i.fontFamily[h.replace(/font-/g, "")] || j[Object.keys(j)[0]],
-          onChange: (v) => f(h, v)
+          value: i.fontFamily[h.replace(/font-/g, "")] || y[Object.keys(y)[0]],
+          onChange: (S) => f(h, S)
         },
         h
       )) }),
@@ -4415,40 +4435,40 @@ function BiExpandVertical(o) {
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, dragHandle: n }) => {
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: f } = useBlockHighlight(), { id: g, data: y, isSelected: b, willReceiveDrop: h, isDragging: j, isEditing: v, handleClick: A } = o, w = (k) => {
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: f } = useBlockHighlight(), { id: g, data: j, isSelected: b, willReceiveDrop: h, isDragging: y, isEditing: S, handleClick: B } = o, A = (k) => {
     k.stopPropagation(), !i.includes(g) && o.toggle();
-  }, S = (k) => {
+  }, C = (k) => {
     k.isInternal && (p = k.isOpen, k.isOpen && k.close());
-  }, B = (k) => {
+  }, v = (k) => {
     k.isInternal && p !== null && (p ? k.open() : k.close(), p = null);
-  }, [I, T] = useAtom$1(currentAddSelection), M = () => {
+  }, [_, I] = useAtom$1(currentAddSelection), D = () => {
     var N, $;
-    m(), document.getElementById(`tree-node-${(N = o == null ? void 0 : o.parent) == null ? void 0 : N.id}`) && !o.parent.isSelected && T(($ = o == null ? void 0 : o.parent) == null ? void 0 : $.id);
+    m(), document.getElementById(`tree-node-${(N = o == null ? void 0 : o.parent) == null ? void 0 : N.id}`) && !o.parent.isSelected && I(($ = o == null ? void 0 : o.parent) == null ? void 0 : $.id);
   }, m = () => {
-    T(null);
+    I(null);
   }, E = (k) => {
-    m(), k.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), A(k);
+    m(), k.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), B(k);
   };
   useEffect(() => {
     const k = setTimeout(() => {
-      h && !o.isOpen && !j && !i.includes(g) && o.toggle();
+      h && !o.isOpen && !y && !i.includes(g) && o.toggle();
     }, 500);
     return () => clearTimeout(k);
-  }, [h, o, j]);
-  const C = useMemo(() => {
-    const k = Object.keys(y), N = [];
+  }, [h, o, y]);
+  const R = useMemo(() => {
+    const k = Object.keys(j), N = [];
     for (let $ = 0; $ < k.length; $++)
       if (k[$].endsWith("_attrs")) {
-        const L = y[k[$]], D = Object.keys(L).join("|");
-        D.match(/x-data/) && N.push("data"), D.match(/x-on/) && N.push("event"), D.match(/x-show|x-if/) && N.push("show");
+        const L = j[k[$]], P = Object.keys(L).join("|");
+        P.match(/x-data/) && N.push("data"), P.match(/x-on/) && N.push("event"), P.match(/x-show|x-if/) && N.push("show");
       }
     return N;
-  }, [y]), R = (k, N) => {
+  }, [j]), w = (k, N) => {
     const $ = d.contentDocument || d.contentWindow.document, L = $.querySelector(`[data-block-id=${k}]`);
     L && L.setAttribute("data-drop", N);
-    const D = L.getBoundingClientRect(), P = d.getBoundingClientRect();
-    D.top >= P.top && D.left >= P.left && D.bottom <= P.bottom && D.right <= P.right || ($.documentElement.scrollTop = L.offsetTop - P.top);
-  }, _ = (k) => {
+    const P = L.getBoundingClientRect(), M = d.getBoundingClientRect();
+    P.top >= M.top && P.left >= M.left && P.bottom <= M.bottom && P.right <= M.right || ($.documentElement.scrollTop = L.offsetTop - M.top);
+  }, T = (k) => {
     m();
     const N = get(o, "parent.id");
     N !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: N, position: k }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK);
@@ -4458,7 +4478,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        onClick: () => _(-1),
+        onClick: () => T(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -4477,23 +4497,23 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
       style: r,
       "data-node-id": g,
       ref: i.includes(g) ? null : n,
-      onDragStart: () => S(o),
-      onDragEnd: () => B(o),
+      onDragStart: () => C(o),
+      onDragEnd: () => v(o),
       onDragOver: (k) => {
-        k.preventDefault(), R(g, "yes");
+        k.preventDefault(), w(g, "yes");
       },
       onDragLeave: (k) => {
-        k.preventDefault(), R(g, "no");
+        k.preventDefault(), w(g, "no");
       },
       onDrop: (k) => {
-        k.preventDefault(), R(g, "no");
+        k.preventDefault(), w(g, "no");
       },
       children: [
         (o == null ? void 0 : o.rowIndex) > 0 && o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            onClick: () => _(o.childIndex),
-            onMouseEnter: M,
+            onClick: () => T(o.childIndex),
+            onMouseEnter: D,
             onMouseLeave: m,
             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__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 flex h-5 w-5 -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__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-4 w-4 stroke-[3] text-white" }) })
@@ -4506,9 +4526,9 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
             className: cn(
               "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",
-              h && canAcceptChildBlock(y._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === I ? "bg-purple-50" : "",
-              j && "opacity-20",
+              h && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === _ ? "bg-purple-50" : "",
+              y && "opacity-20",
               i.includes(g) ? "opacity-50" : ""
             ),
             children: [
@@ -4517,7 +4537,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ChevronRight,
                       {
                         className: `h-3 w-3 stroke-[3] ${b ? "text-slate-200" : "text-slate-400"}`
@@ -4526,8 +4546,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                   }
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "leading-1 flex items-center", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: y == null ? void 0 : y._type }),
-                  v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: j == null ? void 0 : j._type }),
+                  S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
@@ -4535,10 +4555,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                         k.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (y == null ? void 0 : y._name) || (y == null ? void 0 : y._type.split("/").pop()) }),
-                        C.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
-                        C.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
-                        C.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
+                        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (j == null ? void 0 : j._name) || (j == null ? void 0 : j._type.split("/").pop()) }),
+                        R.includes("data") && /* @__PURE__ */ jsxRuntimeExports.jsx(VscJson, { className: "h-3 w-3 text-orange-600" }),
+                        R.includes("event") && /* @__PURE__ */ jsxRuntimeExports.jsx(BsLightningFill, { className: "h-3 w-3 text-yellow-500" }),
+                        R.includes("show") && /* @__PURE__ */ jsxRuntimeExports.jsx(TbEyeDown, { className: "h-3 w-3 text-orange-600" })
                       ]
                     }
                   )
@@ -4556,7 +4576,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                   ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: k.tooltip })
                 ] })),
-                canAddChildBlock(y == null ? void 0 : y._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                canAddChildBlock(j == null ? void 0 : j._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
@@ -4926,16 +4946,16 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var p, u, x, f, g, y, b, h;
+  var p, u, x, f, g, j, b, h;
   if (n.type === "comment")
     return [];
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
-    (j) => j.key === "data-chai-richtext" || j.key === "chai-richtext"
+    (y) => y.key === "data-chai-richtext" || y.key === "chai-richtext"
   ), c = l.find(
-    (j) => j.key === "data-chai-lightbox" || j.key === "chai-lightbox"
+    (y) => y.key === "data-chai-lightbox" || y.key === "chai-lightbox"
   );
   if (a = {
     ...a,
@@ -4943,13 +4963,13 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const j = n.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
-    j && (a._name = j.value);
+    const y = n.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
+    y && (a._name = y.value);
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const j = [
+    const y = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -4961,25 +4981,25 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ];
     a = {
       ...a,
-      href: ((p = l.find((v) => v.key === "href")) == null ? void 0 : p.value) || "",
-      hrefType: ((u = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
-      autoplay: ((x = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((g = (f = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((y = l.find((v) => v.key === "data-overlay")) == null ? void 0 : y.value) || "",
-      galleryName: ((b = l.find((v) => v.key === "data-gall")) == null ? void 0 : b.value) || ""
-    }, forEach(j, (v) => {
-      has(a, `styles_attrs.${v}`) && delete a.styles_attrs[v];
+      href: ((p = l.find((S) => S.key === "href")) == null ? void 0 : p.value) || "",
+      hrefType: ((u = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
+      autoplay: ((x = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
+      maxWidth: ((g = (f = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : g.replace("px", "")) || "",
+      backdropColor: ((j = l.find((S) => S.key === "data-overlay")) == null ? void 0 : j.value) || "",
+      galleryName: ((b = l.find((S) => S.key === "data-gall")) == null ? void 0 : b.value) || ""
+    }, forEach(y, (S) => {
+      has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
     });
   }
   if (a._type === "Input") {
-    const j = a.inputType || "text";
-    j === "checkbox" ? set(a, "_type", "Checkbox") : j === "radio" && set(a, "_type", "Radio");
+    const y = a.inputType || "text";
+    y === "checkbox" ? set(a, "_type", "Checkbox") : y === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const j = stringify([n]);
-    return hasVideoEmbed(j) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(j)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = j, [a];
+    const y = stringify([n]);
+    return hasVideoEmbed(y) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(y)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = y, [a];
   } else if (n.tagName === "svg") {
-    const j = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), A = get(j, "value") ? `[${get(j, "value")}px]` : "24px", w = get(v, "value") ? `[${get(v, "value")}px]` : "24px", S = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${w} h-${A}`, S)}`.trim(), n.attributes = filter(n.attributes, (B) => !includes(["style", "width", "height", "class"], B.key)), a.icon = stringify([n]), [a];
+    const y = find(n.attributes, { key: "height" }), S = find(n.attributes, { key: "width" }), B = get(y, "value") ? `[${get(y, "value")}px]` : "24px", A = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${A} h-${B}`, C)}`.trim(), n.attributes = filter(n.attributes, (v) => !includes(["style", "width", "height", "class"], v.key)), a.icon = stringify([n]), [a];
   } else if (n.tagName == "option" && r && ((h = r.block) == null ? void 0 : h._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
@@ -5165,18 +5185,18 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   collections: r,
   onChange: n
 }) => {
-  var M;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [f, g] = useState(""), [y, b] = useState([]), [h, j] = useState(-1), v = useRef(null), A = (M = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : M.name;
+  var D;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [f, g] = useState(""), [j, b] = useState([]), [h, y] = useState(-1), S = useRef(null), B = (D = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : D.name;
   useEffect(() => {
-    if (g(""), b([]), j(-1), p(!1), !o || i || !startsWith(o, "collection:"))
+    if (g(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "collection:"))
       return;
     const m = split(o, ":"), E = get(m, 1, "page") || "page";
     x(E), (async () => {
-      const C = await l(E, [get(m, 2, "page")]);
-      C && Array.isArray(C) && g(get(C, [0, "name"], ""));
+      const R = await l(E, [get(m, 2, "page")]);
+      R && Array.isArray(R) && g(get(R, [0, "name"], ""));
     })();
   }, [o]);
-  const w = useDebouncedCallback(
+  const A = useDebouncedCallback(
     async (m) => {
       if (isEmpty(m))
         b([]);
@@ -5184,41 +5204,41 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         const E = await l(u, m);
         b(E);
       }
-      c(!1), j(-1);
+      c(!1), y(-1);
     },
     [u],
     300
-  ), S = (m) => {
+  ), C = (m) => {
     const E = ["collection", u, m.id];
-    E[1] && (n(E.join(":")), g(m.name), p(!1), b([]), j(-1));
-  }, B = (m) => {
+    E[1] && (n(E.join(":")), g(m.name), p(!1), b([]), y(-1));
+  }, v = (m) => {
     switch (m.key) {
       case "ArrowDown":
-        m.preventDefault(), j((E) => E < y.length - 1 ? E + 1 : E);
+        m.preventDefault(), y((E) => E < j.length - 1 ? E + 1 : E);
         break;
       case "ArrowUp":
-        m.preventDefault(), j((E) => E > 0 ? E - 1 : E);
+        m.preventDefault(), y((E) => E > 0 ? E - 1 : E);
         break;
       case "Enter":
-        if (m.preventDefault(), y.length === 0)
+        if (m.preventDefault(), j.length === 0)
           return;
-        h >= 0 && S(y[h]);
+        h >= 0 && C(j[h]);
         break;
       case "Escape":
-        m.preventDefault(), I();
+        m.preventDefault(), _();
         break;
     }
   };
   useEffect(() => {
-    if (h >= 0 && v.current) {
-      const m = v.current.children[h];
+    if (h >= 0 && S.current) {
+      const m = S.current.children[h];
       m == null || m.scrollIntoView({ block: "nearest" });
     }
   }, [h]);
-  const I = () => {
-    g(""), b([]), j(-1), p(!1), n("");
-  }, T = (m) => {
-    g(m), p(!isEmpty(m)), c(!0), w(m);
+  const _ = () => {
+    g(""), b([]), y(-1), p(!1), n("");
+  }, I = (m) => {
+    g(m), p(!isEmpty(m)), c(!0), A(m);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "collection", value: u, onChange: (m) => x(m.target.value), children: map(r, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: m.key, children: m.name }, m.key)) }),
@@ -5228,26 +5248,26 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         {
           type: "text",
           value: f,
-          onChange: (m) => T(m.target.value),
-          onKeyDown: B,
-          placeholder: a(`Search ${A}`),
+          onChange: (m) => I(m.target.value),
+          onKeyDown: v,
+          placeholder: a(`Search ${B}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(y) || d && isEmpty(y)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(j) || d && isEmpty(j)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(y) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(j) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       f,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: v, children: map(y == null ? void 0 : y.slice(0, 20), (m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: S, children: map(j == null ? void 0 : j.slice(0, 20), (m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => S(m),
+        onClick: () => C(m),
         className: `cursor-pointer p-2 text-xs ${o != null && o.includes(m.id) ? "bg-blue-200" : E === h ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           m.name,
@@ -5345,27 +5365,27 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   required: p,
   schema: u
 }) => {
-  const { selectedLang: x, fallbackLang: f, languages: g } = useLanguages(), y = isEmpty(g) ? "" : isEmpty(x) ? f : x, b = get(LANGUAGES, y, y), h = useSelectedBlock(), j = useRegisteredChaiBlocks(), v = get(j, [h == null ? void 0 : h._type, "i18nProps"], []) || [], [A, w] = useState(null);
+  const { selectedLang: x, fallbackLang: f, languages: g } = useLanguages(), j = isEmpty(g) ? "" : isEmpty(x) ? f : x, b = get(LANGUAGES, j, j), h = useSelectedBlock(), y = useRegisteredChaiBlocks(), S = get(y, [h == null ? void 0 : h._type, "i18nProps"], []) || [], [B, A] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean")
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
-  const B = v == null ? void 0 : v.includes(o.replace("root.", ""));
+  const v = S == null ? void 0 : S.includes(o.replace("root.", ""));
   return u.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "label",
       {
         htmlFor: o,
-        onClick: () => w(A ? null : o),
+        onClick: () => A(B ? null : o),
         className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
         children: [
-          A ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
+          B ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "h-3 w-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-tight", children: n })
         ]
       }
     ),
-    A && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
+    B && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
       c,
       a,
       l,
@@ -5375,7 +5395,7 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       n,
       " ",
-      B && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      v && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
         b
       ] }),
@@ -5503,39 +5523,83 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   return set(n, o, r), n;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), p = ({ formData: y }, b, h) => {
-    if (b && (c == null ? void 0 : c._id) === r._id) {
-      const j = b.replace("root.", "");
-      a([r._id], { [j]: get(y, j) }, h);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), f = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, f), j = ({ formData: v }, _, I) => {
+    if (_ && (c == null ? void 0 : c._id) === r._id) {
+      const D = _.replace("root.", "");
+      a([r._id], { [D]: get(v, D) }, I);
     }
-  }, u = useCallback(
-    debounce(({ formData: y }, b, h) => {
-      p({ formData: y }, b, h), d(y);
+  }, b = useCallback(
+    debounce(({ formData: v }, _, I) => {
+      j({ formData: v }, _, I), d(v);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), x = ({ formData: y }, b) => {
-    if (b) {
-      const h = b.replace("root.", "");
+  ), h = ({ formData: v }, _) => {
+    if (_) {
+      const I = _.replace("root.", "");
       n(
         [r._id],
-        convertDotNotationToObject(h, get(y, h.split(".")))
-      ), u({ formData: y }, b, { [h]: get(c, h) });
+        convertDotNotationToObject(I, get(v, I.split(".")))
+      ), b({ formData: v }, _, { [I]: get(c, I) });
+    }
+  }, y = ({ formData: v }, _) => {
+    if (_) {
+      const I = _.replace("root.", "");
+      n(
+        [x._id],
+        convertDotNotationToObject(I, get(v, I.split(".")))
+      ), b({ formData: v }, _, { [I]: get(c, I) });
     }
   };
   keys(get(i, "_bindings", {}));
-  const { schema: f, uiSchema: g } = useMemo(() => {
-    const y = r == null ? void 0 : r._type;
-    return y ? getBlockFormSchemas(y) : { schema: {}, uiSchema: {} };
-  }, [r]);
+  const { schema: S, uiSchema: B } = useMemo(() => {
+    const v = r == null ? void 0 : r._type;
+    if (v)
+      return getBlockFormSchemas(v);
+  }, [r]), { wrapperSchema: A, wrapperUiSchema: C } = useMemo(() => {
+    if (!x || !(x != null && x._type))
+      return { wrapperSchema: {}, wrapperUiSchema: {} };
+    const v = x == null ? void 0 : x._type, { schema: _ = {}, uiSchema: I = {} } = getBlockFormSchemas(v);
+    return { wrapperSchema: _, wrapperUiSchema: I };
+  }, [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
-    isEmpty(f) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onClick: () => u((v) => !v),
+          className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
+          children: [
+            p ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
+            startCase(x._type),
+            " settings",
+            " ",
+            x._name && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[11px] font-light text-slate-400", children: [
+              "(",
+              x._name,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      p && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        JSONForm,
+        {
+          id: x == null ? void 0 : x._id,
+          onChange: y,
+          formData: g,
+          schema: A,
+          uiSchema: C
+        }
+      )
+    ] }),
+    isEmpty(S) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: r == null ? void 0 : r._id,
-        onChange: x,
+        onChange: h,
         formData: i,
-        schema: f,
-        uiSchema: g
+        schema: S,
+        uiSchema: B
       }
     ),
     (r == null ? void 0 : r._type) === "GlobalBlock" ? /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalBlockSettings, {}) : null,
@@ -5613,8 +5677,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (g = d.current) == null || g.focus();
   }, []);
   const f = (g) => {
-    const { usage: y } = g || {};
-    !l && y && x(y), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
+    const { usage: j } = g || {};
+    !l && j && x(j), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: r("Ask AI") }),
@@ -5669,37 +5733,37 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var I;
-  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), f = (I = first(n)) == null ? void 0 : I.prop, g = reject((get(a, f, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), y = () => {
-    const T = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(c, T, !0), u("");
-  }, [b, h] = useState([]), j = ({ value: T }) => {
-    const M = T.trim().toLowerCase(), m = M.match(/.+:/g);
+  var _;
+  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), f = (_ = first(n)) == null ? void 0 : _.prop, g = reject((get(a, f, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
+    const I = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l(c, I, !0), u("");
+  }, [b, h] = useState([]), y = ({ value: I }) => {
+    const D = I.trim().toLowerCase(), m = D.match(/.+:/g);
     let E = [];
     if (m && m.length > 0) {
-      const [C] = m, R = M.replace(C, "");
-      E = o.search(R).map((k) => ({
+      const [R] = m, w = D.replace(R, "");
+      E = o.search(w).map((k) => ({
         ...k,
-        item: { ...k.item, name: C + k.item.name }
+        item: { ...k.item, name: R + k.item.name }
       }));
     } else
-      E = o.search(M);
+      E = o.search(D);
     return h(map(E, "item"));
-  }, v = () => {
+  }, S = () => {
     h([]);
-  }, A = (T) => T.name, w = (T) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: T.name }), S = {
+  }, B = (I) => I.name, A = (I) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: I.name }), C = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("Enter classes separated by space"),
     value: p,
-    onKeyDown: (T) => {
-      T.key === "Enter" && p.trim() !== "" && y();
+    onKeyDown: (I) => {
+      I.key === "Enter" && p.trim() !== "" && j();
     },
-    onChange: (T, { newValue: M }) => u(M),
+    onChange: (I, { newValue: D }) => u(D),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, B = () => {
+  }, v = () => {
     if (navigator.clipboard === void 0) {
       x({
         title: r("Clipboard not supported"),
@@ -5722,7 +5786,7 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: B, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: v, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
@@ -5739,11 +5803,11 @@ function ManualClasses() {
             Autosuggest,
             {
               suggestions: b,
-              onSuggestionsFetchRequested: j,
-              onSuggestionsClearRequested: v,
-              getSuggestionValue: A,
-              renderSuggestion: w,
-              inputProps: S,
+              onSuggestionsFetchRequested: y,
+              onSuggestionsClearRequested: S,
+              getSuggestionValue: B,
+              renderSuggestion: A,
+              inputProps: C,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
               },
@@ -5759,7 +5823,7 @@ function ManualClasses() {
             {
               variant: "outline",
               className: "h-6 border-border",
-              onClick: y,
+              onClick: j,
               disabled: p.trim() === "",
               size: "sm",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon, {})
@@ -5767,22 +5831,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((T) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.map((I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
               children: [
-                T,
+                I,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => i(c, [T]),
+                    onClick: () => i(c, [I]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            T
+            I
           ))
         ) })
       ]
@@ -6176,7 +6240,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), f = get(u, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
     (h) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(h) ? (c([]), p({ color: h })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((j) => ({ ...j, color: h, shade: j.shade ? j.shade : "500" })));
+      ["current", "inherit", "transparent", "black", "white"].includes(h) ? (c([]), p({ color: h })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: h, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -6185,7 +6249,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [x]);
-  const y = useCallback(
+  const j = useCallback(
     // eslint-disable-next-line no-shadow
     (h) => {
       p({ color: x, shade: h });
@@ -6197,8 +6261,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   }, [n]);
   const { match: b } = useTailwindClassList();
   return useEffect(() => {
-    const j = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    b(o, j) && r(j, o);
+    const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
+    b(o, y) && r(y, o);
   }, [b, d, r, o]), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       DropDown,
@@ -6239,7 +6303,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !x || !l, onChange: y, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !x || !l, onChange: j, options: i }) })
   ] });
 }, getUserInputValues = (o, r) => {
   o = o.toLowerCase();
@@ -6434,7 +6498,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [f, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [y, b] = useState(!1), [h, j] = useState(""), [v, A] = useState(!1), [w, S] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [f, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [j, b] = useState(!1), [h, y] = useState(""), [S, B] = useState(!1), [A, C] = useState(!1);
   useEffect(() => {
     const { value: m, unit: E } = getClassValueAndUnit(i);
     if (E === "") {
@@ -6443,25 +6507,25 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     }
     g(E), l(E === "class" || isEmpty(m) ? "" : m);
   }, [i, p, u]);
-  const B = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), I = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), T = useCallback(
+  const v = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), _ = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), I = useCallback(
     (m = !1) => {
       const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
         b(!0);
         return;
       }
-      const C = get(E, "unit") !== "" ? get(E, "unit") : f;
-      if (C === "auto" || C === "none") {
-        B(`${d}${C}`);
+      const R = get(E, "unit") !== "" ? get(E, "unit") : f;
+      if (R === "auto" || R === "none") {
+        v(`${d}${R}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const _ = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      m ? I(_) : B(_);
+      const T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      m ? _(T) : v(T);
     },
-    [B, I, a, f, d, u]
-  ), M = useCallback(
+    [v, _, a, f, d, u]
+  ), D = useCallback(
     (m) => {
       const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
@@ -6469,15 +6533,15 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         return;
       }
       if (m === "auto" || m === "none") {
-        B(`${d}${m}`);
+        v(`${d}${m}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const C = get(E, "unit") !== "" ? get(E, "unit") : m, _ = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${C === "-" ? "" : C}]`;
-      B(_);
+      const R = get(E, "unit") !== "" ? get(E, "unit") : m, T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      v(T);
     },
-    [B, a, d, u]
+    [v, a, d, u]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
@@ -6485,29 +6549,29 @@ const RangeChoices = ({ property: o, onChange: r }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
           readOnly: f === "class",
           onKeyPress: (m) => {
-            m.key === "Enter" && T();
+            m.key === "Enter" && I();
           },
           onKeyDown: (m) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            m.preventDefault(), S(!0);
+            m.preventDefault(), C(!0);
             const E = parseInt$1(m.target.value);
-            let C = isNaN$1(E) ? 0 : E;
-            m.keyCode === 38 && (C += 1), m.keyCode === 40 && (C -= 1);
-            const R = `${C}`, k = `${R.startsWith("-") ? "-" : ""}${d}[${R.replace("-", "")}${f === "-" ? "" : f}]`;
-            I(k);
+            let R = isNaN$1(E) ? 0 : E;
+            m.keyCode === 38 && (R += 1), m.keyCode === 40 && (R -= 1);
+            const w = `${R}`, k = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${f === "-" ? "" : f}]`;
+            _(k);
           },
           onKeyUp: (m) => {
-            w && (m.preventDefault(), S(!1));
+            A && (m.preventDefault(), C(!1));
           },
-          onBlur: () => T(),
+          onBlur: () => I(),
           onChange: (m) => {
             b(!1), l(m.target.value);
           },
@@ -6515,10 +6579,10 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             var E;
             (E = m == null ? void 0 : m.target) == null || E.select(), n(!1);
           },
-          value: v ? h : a,
+          value: S ? h : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
-            y ? "border-red-500 text-red-500" : "border-foreground/20"
+            j ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -6541,28 +6605,28 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             units: u,
             current: f,
             onSelect: (m) => {
-              n(!1), g(m), M(m);
+              n(!1), g(m), D(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
-        onDragStart: () => A(!0),
+        onDragStart: () => B(!0),
         onDragEnd: (m) => {
-          if (j(() => ""), A(!1), isEmpty(m))
+          if (y(() => ""), B(!1), isEmpty(m))
             return;
-          const E = `${m}`, R = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
-          B(R);
+          const E = `${m}`, w = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
+          v(w);
         },
         onDrag: (m) => {
           if (isEmpty(m))
             return;
-          j(m);
-          const E = `${m}`, R = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
-          I(R);
+          y(m);
+          const E = `${m}`, w = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
+          _(w);
         },
         currentValue: a,
         unit: f,
@@ -6659,35 +6723,35 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), f = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), y = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), h = useMemo(() => get(f, "fullCls", ""), [f]), j = useCallback(
-    (I, T = !0) => {
-      const M = { dark: p, mq: x, mod: u, cls: I, property: l, fullCls: "" };
-      (p || u !== "") && (M.mq = "xs");
-      const m = generateFullClsName(M);
-      g(b, [m], T);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), f = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), h = useMemo(() => get(f, "fullCls", ""), [f]), y = useCallback(
+    (_, I = !0) => {
+      const D = { dark: p, mq: x, mod: u, cls: _, property: l, fullCls: "" };
+      (p || u !== "") && (D.mq = "xs");
+      const m = generateFullClsName(D);
+      g(b, [m], I);
     },
     [b, p, x, u, l, g]
-  ), v = useCallback(() => {
-    y(b, [h]);
-  }, [b, h, y]), A = useMemo(() => canChangeClass(f, x), [f, x]);
+  ), S = useCallback(() => {
+    j(b, [h]);
+  }, [b, h, j]), B = useMemo(() => canChangeClass(f, x), [f, x]);
   useEffect(() => {
-    i(A, f);
-  }, [A, i, f]);
-  const [, , w] = useCanvasWidth(), S = useCallback(
-    (I) => {
-      w({
+    i(B, f);
+  }, [B, i, f]);
+  const [, , A] = useCanvasWidth(), C = useCallback(
+    (_) => {
+      A({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[I]);
+      }[_]);
     },
-    [w]
-  ), B = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: A, canReset: f && B, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${f && !B ? "text-foreground" : ""}`, children: r(a) }) }),
+    [A]
+  ), v = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: B, canReset: f && v, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${f && !v ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -6696,17 +6760,17 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             currentClass: get(f, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
-            onChange: j,
+            onChange: y,
             negative: d,
             cssProperty: l
           }
         ) : null,
-        n === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: j }),
-        n === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: j }),
-        n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: j }),
-        n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: j })
+        n === "icons" && /* @__PURE__ */ jsxRuntimeExports.jsx(IconChoices, { property: l, onChange: y }),
+        n === "range" && /* @__PURE__ */ jsxRuntimeExports.jsx(RangeChoices, { property: l, onChange: y }),
+        n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
+        n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${h ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${h ? "visible" : "invisible"}`, children: v ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6726,7 +6790,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             "button",
             {
               type: "button",
-              onClick: () => S(get(f, "mq")),
+              onClick: () => C(get(f, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6756,18 +6820,18 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            r.map(({ label: g, key: y }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            r.map(({ label: g, key: j }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   type: "button",
-                  onClick: () => u(y),
-                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${y === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                  onClick: () => u(j),
+                  className: `relative cursor-pointer rounded-full p-1 text-[8px] ${j === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: f(y) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: f(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
-                    React__default.createElement(get(EDITOR_ICONS, y, BoxIcon), { className: "text-inherit w-3 h-3" })
+                    React__default.createElement(get(EDITOR_ICONS, j, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
@@ -6915,9 +6979,9 @@ function BlockStyling() {
       const x = !get(i, "negative", !1), f = get(i, "cssProperty", "");
       let g = parseFloat(i.dragStartValue);
       g = isNaN(g) ? 0 : g;
-      let y = MAPPER[i.dragUnit];
-      (startsWith(f, "scale") || f === "opacity") && (y = 10);
-      let h = (i.dragStartY - u.pageY) / y + g;
+      let j = MAPPER[i.dragUnit];
+      (startsWith(f, "scale") || f === "opacity") && (j = 10);
+      let h = (i.dragStartY - u.pageY) / j + g;
       x && h < 0 && (h = 0), f === "opacity" && h > 1 && (h = 1), i.onDrag(`${h}`), l(`${h}`);
     },
     [i],
@@ -7006,33 +7070,33 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), f = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, y] = useAtom$1(draggedBlockAtom), b = (v) => {
-    const A = has(v, "styles_attrs.data-page-section");
-    return v._type === "Box" && A;
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), f = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, j] = useAtom$1(draggedBlockAtom), b = (S) => {
+    const B = has(S, "styles_attrs.data-page-section");
+    return S._type === "Box" && B;
   }, h = useCallback(
-    async (v) => {
-      if (v.stopPropagation(), has(o, "component")) {
+    async (S) => {
+      if (S.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const A = await c(r, o);
-      isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const B = await c(r, o);
+      isEmpty(B) || p(syncBlocksWithDefaults(B), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
-  ), j = async (v) => {
-    const A = await c(r, o);
-    let w = n;
-    if (b(first(A)) && (w = null), !isEmpty(A)) {
-      const S = { blocks: A, uiLibrary: !0, parent: w };
-      if (v.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
-        const B = new Image();
-        B.src = o.preview, B.onload = () => {
-          v.dataTransfer.setDragImage(B, 0, 0);
+  ), y = async (S) => {
+    const B = await c(r, o);
+    let A = n;
+    if (b(first(B)) && (A = null), !isEmpty(B)) {
+      const C = { blocks: B, uiLibrary: !0, parent: A };
+      if (S.dataTransfer.setData("text/plain", JSON.stringify(C)), o.preview) {
+        const v = new Image();
+        v.src = o.preview, v.onload = () => {
+          S.dataTransfer.setDragImage(v, 0, 0);
         };
       } else
-        v.dataTransfer.setDragImage(new Image(), 0, 0);
-      y(S), setTimeout(() => {
+        S.dataTransfer.setDragImage(new Image(), 0, 0);
+      j(C), setTimeout(() => {
         u([]), x(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
       }, 200);
     }
@@ -7044,7 +7108,7 @@ const BlockCard = ({
         onClick: l ? () => {
         } : h,
         draggable: g ? "true" : "false",
-        onDragStart: j,
+        onDragStart: y,
         className: clsx(
           "relative mt-2 cursor-pointer overflow-hidden rounded-md border border-border bg-white duration-200 hover:border-blue-500 hover:shadow-xl"
         ),
@@ -7073,9 +7137,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, n, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((w) => w.category === "custom"), d = l.find((w) => w.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [f, g] = useState("Hero"), y = get(x, f, []), b = useRef(null), { t: h } = useTranslation(), j = (w) => {
+  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((A) => A.category === "custom"), d = l.find((A) => A.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [f, g] = useState("Hero"), j = get(x, f, []), b = useRef(null), { t: h } = useTranslation(), y = (A) => {
     b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
-      b.current && g(w);
+      b.current && g(A);
     }, 300);
   };
   if (u)
@@ -7083,7 +7147,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const v = filter(y, (w, S) => S % 2 === 0), A = filter(y, (w, S) => S % 2 === 1);
+  const S = filter(j, (A, C) => C % 2 === 0), B = filter(j, (A, C) => C % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
@@ -7091,22 +7155,22 @@ const BlockCard = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: h("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(x, (w, S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(x, (A, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => j(S),
+              onMouseEnter: () => y(C),
               onMouseLeave: () => clearTimeout(b.current),
-              onClick: () => g(S),
+              onClick: () => g(C),
               className: cn(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                S === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                C === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(h(S.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(h(C.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            S
+            C
           ))
         ) })
       ] })
@@ -7119,10 +7183,10 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              v.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: w, library: d }))
+              S.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              A.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: w, library: d }))
+              B.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7638,7 +7702,7 @@ const CoreBlock = ({
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, y = useFeature("dnd"), { t: b } = useTranslation();
+  }, j = useFeature("dnd"), { t: b } = useTranslation();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -7651,7 +7715,7 @@ const CoreBlock = ({
             x([]), f();
           }, 200);
         },
-        draggable: y ? "true" : "false",
+        draggable: j ? "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" }),
@@ -7849,7 +7913,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     var b;
     (b = f.current) == null || b.focus();
   }, []);
-  const y = (b) => {
+  const j = (b) => {
     const { usage: h } = b || {};
     !l && h && x(h), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
@@ -7876,7 +7940,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           className: "w-full",
           rows: 3,
           onKeyDown: (b) => {
-            b.key === "Enter" && (b.preventDefault(), g.current && clearTimeout(g.current), x(void 0), n("content", o, i, y));
+            b.key === "Enter" && (b.preventDefault(), g.current && clearTimeout(g.current), x(void 0), n("content", o, i, j));
           }
         }
       ),
@@ -7886,7 +7950,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), x(void 0), n("content", o, i, y);
+              g.current && clearTimeout(g.current), x(void 0), n("content", o, i, j);
             },
             variant: "default",
             className: "w-fit",
@@ -7919,7 +7983,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (b) => {
-            g.current && clearTimeout(g.current), x(void 0), n("content", o, b, y);
+            g.current && clearTimeout(g.current), x(void 0), n("content", o, b, j);
           }
         }
       )
@@ -7933,7 +7997,7 @@ const AIUserPrompt = ({ blockId: o }) => {
   useEffect(() => {
     r && a(r);
   }, [r]);
-  const y = async () => {
+  const j = async () => {
     try {
       d(!0), u(null), await i(n), f({
         title: o("Updated AI Context"),
@@ -7967,7 +8031,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               className: "mt-1 w-full",
               rows: 10,
               onKeyDown: (b) => {
-                b.key === "Enter" && (b.preventDefault(), y());
+                b.key === "Enter" && (b.preventDefault(), j());
               }
             }
           ),
@@ -7979,7 +8043,7 @@ const AIUserPrompt = ({ blockId: o }) => {
               Button,
               {
                 disabled: n.trim().length < 5,
-                onClick: () => y(),
+                onClick: () => j(),
                 variant: "default",
                 className: "w-fit",
                 size: "sm",
@@ -8008,7 +8072,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                     AlertDialogAction,
                     {
                       onClick: () => {
-                        a(""), y();
+                        a(""), j();
                       },
                       children: o("Yes, Delete")
                     }
@@ -8029,7 +8093,7 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: r = [], onAttributesChange: n }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [f, g] = useState(""), y = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [f, g] = useState(""), j = useRef(null), b = useRef(null);
   useEffect(() => {
     l(r);
   }, [r]);
@@ -8039,32 +8103,32 @@ const AIUserPrompt = ({ blockId: o }) => {
       return;
     }
     if (i) {
-      const S = [...a, { key: i, value: d }];
-      n(S), l(a), c(""), p(""), g("");
+      const C = [...a, { key: i, value: d }];
+      n(C), l(a), c(""), p(""), g("");
     }
-  }, j = (S) => {
-    const B = a.filter((I, T) => T !== S);
-    n(B), l(B);
-  }, v = (S) => {
-    x(S), c(a[S].key), p(a[S].value);
-  }, A = () => {
+  }, y = (C) => {
+    const v = a.filter((_, I) => I !== C);
+    n(v), l(v);
+  }, S = (C) => {
+    x(C), c(a[C].key), p(a[C].value);
+  }, B = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const S = [...a];
-      S[u] = { key: i, value: d }, n(S), l(S), x(null), c(""), p(""), g("");
+      const C = [...a];
+      C[u] = { key: i, value: d }, n(C), l(C), x(null), c(""), p(""), g("");
     }
-  }, w = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? A() : h());
+  }, A = (C) => {
+    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? B() : h());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (S) => {
-          S.preventDefault(), u !== null ? A() : h();
+        onSubmit: (C) => {
+          C.preventDefault(), u !== null ? B() : h();
         },
         className: "space-y-3",
         children: [
@@ -8078,9 +8142,9 @@ const AIUserPrompt = ({ blockId: o }) => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: y,
+                  ref: j,
                   value: i,
-                  onChange: (S) => c(S.target.value),
+                  onChange: (C) => c(C.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8098,8 +8162,8 @@ const AIUserPrompt = ({ blockId: o }) => {
                   rows: 2,
                   ref: b,
                   value: d,
-                  onChange: (S) => p(S.target.value),
-                  onKeyDown: w,
+                  onChange: (C) => p(C.target.value),
+                  onKeyDown: A,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8111,16 +8175,16 @@ const AIUserPrompt = ({ blockId: o }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((S, B) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((C, v) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: S.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: C.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(B), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => j(B), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(v), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(v), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, B)) })
+    ] }, v)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8505,10 +8569,10 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     r(1);
   });
-  const c = useBuilderProp("sideBarComponents.top", []), d = (y) => {
-    y.preventDefault();
-  }, p = (y) => {
-    r(o === y ? null : y);
+  const c = useBuilderProp("sideBarComponents.top", []), d = (j) => {
+    j.preventDefault();
+  }, p = (j) => {
+    r(o === j ? null : j);
   }, u = useSidebarMenuItems(), { t: x } = useTranslation(), f = [...u, ...c], g = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: g, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -8520,18 +8584,18 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: f.map((y, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: f.map((j, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
                     variant: o === b ? "default" : "ghost",
                     className: "mb-2 rounded-lg p-2 transition-colors",
                     onClick: () => p(b),
-                    children: get(y, "icon", null)
+                    children: get(j, "icon", null)
                   },
                   b
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: x(y.label) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: x(j.label) }) })
               ] }, "button" + b)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" })
             ] }),
@@ -8734,5 +8798,6 @@ export {
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,
-  useUpdateBlocksPropsRealtime
+  useUpdateBlocksPropsRealtime,
+  useWrapperBlock
 };