@chaibuilder/sdk 2.0.0-beta.57 → 2.0.0-beta.58

package/dist/core.js

@@ -105,7 +105,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
   ] = o, d = (B) => {
     let A = n(B);
     return A || (A = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, r(B, A), i == null || i(B, I)), A;
-  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Set(), m = /* @__PURE__ */ new Set(), g = () => {
+  }, p = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Set(), m = () => {
     var B;
     const A = [], N = (T) => {
       try {
@@ -118,18 +118,18 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       (B = I[INTERNAL_flushStoreHook]) == null || B.call(I);
       const T = /* @__PURE__ */ new Set(), S = T.add.bind(T);
       u.forEach((L) => {
-        var P;
-        return (P = L.m) == null ? void 0 : P.l.forEach(S);
-      }), u.clear(), x.forEach(S), x.clear(), m.forEach(S), m.clear(), T.forEach(N), u.size && w();
-    } while (u.size || x.size || m.size);
+        var D;
+        return (D = L.m) == null ? void 0 : D.l.forEach(S);
+      }), u.clear(), x.forEach(S), x.clear(), g.forEach(S), g.clear(), T.forEach(N), u.size && w();
+    } while (u.size || x.size || g.size);
     if (A.length)
       throw A[0];
   }, f = (B, A, N) => {
     const T = "v" in A, S = A.v, L = isPendingPromise(A.v) ? A.v : null;
     if (isPromiseLike$2(N)) {
       patchPromiseForCancelability(N);
-      for (const P of A.d.keys())
-        addPendingPromiseToDependency(B, N, d(P));
+      for (const D of A.d.keys())
+        addPendingPromiseToDependency(B, N, d(D));
       A.v = N;
     } else
       A.v = N;
@@ -148,7 +148,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     N.d.clear();
     let T = !0;
     const S = () => {
-      N.m && (k(B, N), w(), g());
+      N.m && (k(B, N), w(), m());
     }, L = (M) => {
       if (isSelfAtom(B, M)) {
         const U = d(M);
@@ -166,21 +166,21 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
         addDependency(B, N, M, H), T || S();
       }
     };
-    let P, $;
+    let D, $;
     const O = {
       get signal() {
-        return P || (P = new AbortController()), P.signal;
+        return D || (D = new AbortController()), D.signal;
       },
       get setSelf() {
         return !$ && isActuallyWritableAtom(B) && ($ = (...M) => {
           if (!T)
-            return j(B, ...M);
+            return E(B, ...M);
         }), $;
       }
     };
     try {
       const M = a(B, L, O);
-      return f(B, N, M), isPromiseLike$2(M) && ((A = M.onCancel) == null || A.call(M, () => P == null ? void 0 : P.abort()), M.then(S, S)), N;
+      return f(B, N, M), isPromiseLike$2(M) && ((A = M.onCancel) == null || A.call(M, () => D == null ? void 0 : D.abort()), M.then(S, S)), N;
     } catch (M) {
       return delete N.v, N.e = M, ++N.n, N;
     } finally {
@@ -210,45 +210,45 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     var B;
     const A = [], N = /* @__PURE__ */ new WeakSet(), T = /* @__PURE__ */ new WeakSet(), S = Array.from(u);
     for (; S.length; ) {
-      const [L, P] = S[S.length - 1];
+      const [L, D] = S[S.length - 1];
       if (T.has(L)) {
         S.pop();
         continue;
       }
       if (N.has(L)) {
-        p.get(L) === P.n ? A.push([L, P, P.n]) : (p.delete(L), u.set(L, P)), T.add(L), S.pop();
+        p.get(L) === D.n ? A.push([L, D, D.n]) : (p.delete(L), u.set(L, D)), T.add(L), S.pop();
         continue;
       }
       N.add(L);
-      for (const [$, O] of y(P))
+      for (const [$, O] of y(D))
         N.has($) || S.push([$, O]);
     }
     for (let L = A.length - 1; L >= 0; --L) {
-      const [P, $, O] = A[L];
+      const [D, $, O] = A[L];
       let M = !1;
       for (const H of $.d.keys())
-        if (H !== P && u.has(H)) {
+        if (H !== D && u.has(H)) {
           M = !0;
           break;
         }
-      M && (h(P), k(P, $), O !== $.n && (u.set(P, $), (B = $.u) == null || B.call($))), p.delete(P);
+      M && (h(D), k(D, $), O !== $.n && (u.set(D, $), (B = $.u) == null || B.call($))), p.delete(D);
     }
-  }, E = (B, ...A) => {
+  }, j = (B, ...A) => {
     let N = !0;
-    const T = (L) => returnAtomValue(h(L)), S = (L, ...P) => {
+    const T = (L) => returnAtomValue(h(L)), S = (L, ...D) => {
       var $;
       const O = d(L);
       try {
         if (isSelfAtom(B, L)) {
           if (!hasInitialValue(L))
             throw new Error("atom not writable");
-          const M = O.n, H = P[0];
+          const M = O.n, H = D[0];
           f(L, O, H), k(L, O), M !== O.n && (u.set(L, O), ($ = O.u) == null || $.call(O), R(O));
           return;
         } else
-          return E(L, ...P);
+          return j(L, ...D);
       } finally {
-        N || (w(), g());
+        N || (w(), m());
       }
     };
     try {
@@ -256,11 +256,11 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     } finally {
       N = !1;
     }
-  }, j = (B, ...A) => {
+  }, E = (B, ...A) => {
     try {
-      return E(B, ...A);
+      return j(B, ...A);
     } finally {
-      w(), g();
+      w(), m();
     }
   }, k = (B, A) => {
     var N;
@@ -290,15 +290,15 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
       }, (N = A.h) == null || N.call(A), isActuallyWritableAtom(B)) {
         const T = A.m, S = () => {
           let L = !0;
-          const P = (...$) => {
+          const D = (...$) => {
             try {
-              return E(B, ...$);
+              return j(B, ...$);
             } finally {
-              L || (w(), g());
+              L || (w(), m());
             }
           };
           try {
-            const $ = c(B, P);
+            const $ = c(B, D);
             $ && (T.u = () => {
               L = !0;
               try {
@@ -311,7 +311,7 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
             L = !1;
           }
         };
-        m.add(S);
+        g.add(S);
       }
     }
     return A.m;
@@ -332,11 +332,11 @@ const isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInit
     return A.m;
   }, I = {
     get: b,
-    set: j,
+    set: E,
     sub: (B, A) => {
       const N = d(B), S = C(B, N).l;
-      return S.add(A), g(), () => {
-        S.delete(A), _(B, N), g();
+      return S.add(A), m(), () => {
+        S.delete(A), _(B, N), m();
       };
     },
     unstable_derive: (B) => buildStore(...B(...o))
@@ -373,37 +373,37 @@ function splitAtom(o, n) {
         let p = r.get(c);
         if (p)
           return p;
-        const u = d && r.get(d), x = [], m = [];
-        return c.forEach((g, f) => {
+        const u = d && r.get(d), x = [], g = [];
+        return c.forEach((m, f) => {
           const h = f;
-          m[f] = h;
+          g[f] = h;
           const b = u && u.atomList[u.keyList.indexOf(h)];
           if (b) {
             x[f] = b;
             return;
           }
           const y = (w) => {
-            const E = w(l), j = w(o), C = a(j, E == null ? void 0 : E.arr).keyList.indexOf(h);
-            if (C < 0 || C >= j.length) {
+            const j = w(l), E = w(o), C = a(E, j == null ? void 0 : j.arr).keyList.indexOf(h);
+            if (C < 0 || C >= E.length) {
               const _ = c[a(c).keyList.indexOf(h)];
               if (_)
                 return _;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return j[C];
-          }, R = (w, E, j) => {
-            const k = w(l), C = w(o), D = a(C, k == null ? void 0 : k.arr).keyList.indexOf(h);
-            if (D < 0 || D >= C.length)
+            return E[C];
+          }, R = (w, j, E) => {
+            const k = w(l), C = w(o), P = a(C, k == null ? void 0 : k.arr).keyList.indexOf(h);
+            if (P < 0 || P >= C.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const v = isFunction(j) ? j(C[D]) : j;
-            Object.is(C[D], v) || E(o, [
-              ...C.slice(0, D),
+            const v = isFunction(E) ? E(C[P]) : E;
+            Object.is(C[P], v) || j(o, [
+              ...C.slice(0, P),
               v,
-              ...C.slice(D + 1)
+              ...C.slice(P + 1)
             ]);
           };
           x[f] = isWritable(o) ? atom(y, R) : atom(y);
-        }), u && u.keyList.length === m.length && u.keyList.every((g, f) => g === m[f]) ? p = u : p = { arr: c, atomList: x, keyList: m }, r.set(c, p), p;
+        }), u && u.keyList.length === g.length && u.keyList.every((m, f) => m === g[f]) ? p = u : p = { arr: c, atomList: x, keyList: g }, r.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -439,17 +439,17 @@ function splitAtom(o, n) {
             case "move": {
               const u = c(i).indexOf(p.atom), x = p.before ? c(i).indexOf(p.before) : c(i).length;
               if (u >= 0 && x >= 0) {
-                const m = c(o);
+                const g = c(o);
                 u < x ? d(o, [
-                  ...m.slice(0, u),
-                  ...m.slice(u + 1, x),
-                  m[u],
-                  ...m.slice(x)
+                  ...g.slice(0, u),
+                  ...g.slice(u + 1, x),
+                  g[u],
+                  ...g.slice(x)
                 ]) : d(o, [
-                  ...m.slice(0, x),
-                  m[u],
-                  ...m.slice(x, u),
-                  ...m.slice(u + 1)
+                  ...g.slice(0, x),
+                  g[u],
+                  ...g.slice(x, u),
+                  ...g.slice(u + 1)
                 ]);
               }
               break;
@@ -475,8 +475,8 @@ function createJSONStorage(o = () => {
   let a, l;
   const i = {
     getItem: (p, u) => {
-      var x, m;
-      const g = (h) => {
+      var x, g;
+      const m = (h) => {
         if (h = h || "", a !== h) {
           try {
             l = JSON.parse(h, n == null ? void 0 : n.reviver);
@@ -486,8 +486,8 @@ function createJSONStorage(o = () => {
           a = h;
         }
         return l;
-      }, f = (m = (x = o()) == null ? void 0 : x.getItem(p)) != null ? m : null;
-      return isPromiseLike$1(f) ? f.then(g) : g(f);
+      }, f = (g = (x = o()) == null ? void 0 : x.getItem(p)) != null ? g : null;
+      return isPromiseLike$1(f) ? f.then(m) : m(f);
     },
     setItem: (p, u) => {
       var x;
@@ -500,12 +500,12 @@ function createJSONStorage(o = () => {
       var u;
       return (u = o()) == null ? void 0 : u.removeItem(p);
     }
-  }, c = (p) => (u, x, m) => p(u, (g) => {
+  }, c = (p) => (u, x, g) => p(u, (m) => {
     let f;
     try {
-      f = JSON.parse(g || "");
+      f = JSON.parse(m || "");
     } catch {
-      f = m;
+      f = g;
     }
     x(f);
   });
@@ -518,8 +518,8 @@ function createJSONStorage(o = () => {
     if (!(o() instanceof window.Storage))
       return () => {
       };
-    const x = (m) => {
-      m.storageArea === o() && m.key === p && u(m.newValue);
+    const x = (g) => {
+      g.storageArea === o() && g.key === p && u(g.newValue);
     };
     return window.addEventListener("storage", x), () => {
       window.removeEventListener("storage", x);
@@ -1306,13 +1306,13 @@ const useBlocksStoreManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (h, b, y) => {
-      const R = map(h, (E) => {
-        const k = n.find((D) => D._id === E)._parent || null, _ = n.filter((D) => k ? D._parent === k : !D._parent).map((D) => D._id).indexOf(E);
-        return { _id: E, oldParent: k, oldPosition: _ };
-      }), w = R.find(({ _id: E }) => E === h[0]);
+      const R = map(h, (j) => {
+        const k = n.find((P) => P._id === j)._parent || null, _ = n.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(j);
+        return { _id: j, oldParent: k, oldPosition: _ };
+      }), w = R.find(({ _id: j }) => j === h[0]);
       w && w.oldParent === b && w.oldPosition === y || (i(h, b, y), o({
-        undo: () => each(R, ({ _id: E, oldParent: j, oldPosition: k }) => {
-          i([E], j, k);
+        undo: () => each(R, ({ _id: j, oldParent: E, oldPosition: k }) => {
+          i([j], E, k);
         }),
         redo: () => i(h, b, y)
       }));
@@ -1325,7 +1325,7 @@ const useBlocksStoreManager = () => {
     },
     removeBlocks: (h) => {
       var w;
-      const b = (w = first(h)) == null ? void 0 : w._parent, R = n.filter((E) => b ? E._parent === b : !E._parent).indexOf(first(h));
+      const b = (w = first(h)) == null ? void 0 : w._parent, R = n.filter((j) => b ? j._parent === b : !j._parent).indexOf(first(h));
       l(map(h, "_id")), o({
         undo: () => a(h, b, R),
         redo: () => l(map(h, "_id"))
@@ -1337,9 +1337,9 @@ const useBlocksStoreManager = () => {
         R = map(h, (w) => ({ _id: w, ...y }));
       else {
         const w = keys(b);
-        R = map(h, (E) => {
-          const j = n.find((C) => C._id === E), k = { _id: E };
-          return each(w, (C) => k[C] = j[C]), k;
+        R = map(h, (j) => {
+          const E = n.find((C) => C._id === j), k = { _id: j };
+          return each(w, (C) => k[C] = E[C]), k;
         });
       }
       c(map(h, (w) => ({ _id: w, ...b }))), o({
@@ -1359,8 +1359,8 @@ const useBlocksStoreManager = () => {
     updateMultipleBlocksProps: (h) => {
       let b = [];
       b = map(h, (y) => {
-        const R = keys(y), w = n.find((j) => j._id === y._id), E = {};
-        return each(R, (j) => E[j] = w[j]), E;
+        const R = keys(y), w = n.find((E) => E._id === y._id), j = {};
+        return each(R, (E) => j[E] = w[E]), j;
       }), c(h), o({
         undo: () => c(b),
         redo: () => c(h)
@@ -1370,7 +1370,7 @@ const useBlocksStoreManager = () => {
 }, useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
-      var g;
+      var m;
       for (let f = 0; f < i.length; f++) {
         const { _id: h } = i[f];
         i[f]._id = generateUUID();
@@ -1380,7 +1380,7 @@ const useBlocksStoreManager = () => {
       }
       const p = first(i);
       let u, x;
-      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), r(i, x, d), n([(g = first(i)) == null ? void 0 : g._id]), first(i);
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, x = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, x = u._parent), r(i, x, d), n([(m = first(i)) == null ? void 0 : m._id]), first(i);
     },
     [r, o, n]
   );
@@ -1395,8 +1395,8 @@ const useBlocksStoreManager = () => {
         _id: p,
         ...u
       };
-      let m, g;
-      return c && (m = find(o, { _id: c }), x._parent = c, g = c), !canAcceptChildBlock(m == null ? void 0 : m._type, x._type) && m && (x._parent = m._parent, g = m._parent), r([x], g, d), n([x._id]), x;
+      let g, m;
+      return c && (g = find(o, { _id: c }), x._parent = c, m = c), !canAcceptChildBlock(g == null ? void 0 : g._type, x._type) && g && (x._parent = g._parent, m = g._parent), r([x], m, d), n([x._id]), x;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -2603,13 +2603,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const d = o.find((g) => g._id === c);
+        const d = o.find((m) => m._id === c);
         l ? l === "root" && (l = null) : l = d._parent;
         const x = filter(
           o,
-          (g) => isString(l) ? g._parent === l : !g._parent
-        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
-        r(m, l, x), i.push(get(m, "0._id", ""));
+          (m) => isString(l) ? m._parent === l : !m._parent
+        ).indexOf(d) + 1, g = getDuplicatedBlocks(o, c, l);
+        r(g, l, x), i.push(get(g, "0._id", ""));
       }), n(i);
     },
     [o, n]
@@ -2705,13 +2705,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(p, (m) => {
-      const g = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${g}(?=\\s|$)`, "g");
+    return each(p, (g) => {
+      const m = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const h = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], h) && p.push(m.split(":").pop().trim());
-    }), each(p, (m) => {
-      const g = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${g}(?=\\s|$)`, "g");
+      const h = first(g.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], h) && p.push(g.split(":").pop().trim());
+    }), each(p, (g) => {
+      const m = g.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
       x = x.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
@@ -3125,8 +3125,8 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom$1(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, m = (g, f) => {
-    const h = cloneDeep(f.find((b) => b._id === g));
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), x = p.length ? p : u, g = (m, f) => {
+    const h = cloneDeep(f.find((b) => b._id === m));
     for (const b in h) {
       const y = h[b];
       typeof y == "string" && startsWith(y, STYLES_KEY) ? h[b] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : b !== "_id" && delete h[b];
@@ -3135,24 +3135,24 @@ const getBlockWithChildren = (o, n) => {
   };
   return {
     askAi: useCallback(
-      async (g, f, h, b) => {
+      async (m, f, h, b) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === u ? "" : p, R = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], w = await l(g, addLangToPrompt(h, x, g), R, y), { blocks: E, error: j } = w;
-            if (j) {
-              a(j);
+            const y = p === u ? "" : p, R = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [g(f, d)], w = await l(m, addLangToPrompt(h, x, m), R, y), { blocks: j, error: E } = w;
+            if (E) {
+              a(E);
               return;
             }
-            if (g === "styles") {
-              const k = E.map((C) => {
+            if (m === "styles") {
+              const k = j.map((C) => {
                 for (const _ in C)
                   _ !== "_id" && (C[_] = `${STYLES_KEY},${C[_]}`);
                 return C;
               });
               c(k);
             } else
-              i(E);
+              i(j);
             b && b(w);
           } catch (y) {
             a(y);
@@ -3250,7 +3250,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     }
   });
   useResizeObserver(o, () => x(), o !== null);
-  const m = get(n, "_parent", null), g = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
+  const g = get(n, "_parent", null), m = isEmpty(get(n, "_name", "")) ? get(n, "_type", "") : get(n, "_name", "");
   return !o || !n || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3267,16 +3267,16 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
       onKeyDown: (f) => f.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        m && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        g && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([m]);
+              c([]), l([g]);
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: g, block: n }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(BlockActionLabel, { label: m, block: n }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2 px-1", children: [
           canAddChildBlock(get(n, "_type", "")) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             PlusIcon,
@@ -3348,15 +3348,15 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0/dist/quill.js"><\/script>
   </body>
 </html>`, useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: m } = usePasteBlocks(), g = o ? { document: o } : {};
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: g } = usePasteBlocks(), m = o ? { document: o } : {};
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys("ctrl+c,command+c", () => u(n), {}, [n, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      x(n[0]) && m(n);
+      x(n[0]) && g(n);
     },
-    { ...g, preventDefault: !0 },
-    [n, x, m]
-  ), useHotkeys("esc", () => r([]), g, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...g, preventDefault: !0 }, [
+    { ...m, preventDefault: !0 },
+    [n, x, g]
+  ), useHotkeys("esc", () => r([]), m, [r]), useHotkeys("ctrl+d,command+d", () => i(n), { ...m, preventDefault: !0 }, [
     n,
     i
   ]), useHotkeys(
@@ -3364,7 +3364,7 @@ const pubsub = new PubSub(), draggedBlockAtom = atom$1(null), dropTargetBlockIdA
     (f) => {
       f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
-    g,
+    m,
     [n, l]
   );
 }, KeyboardHandler = () => {
@@ -3450,38 +3450,38 @@ function removeDataDrop() {
 const useDnd = () => {
   const { document: o } = useFrame(), [n, r] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd")) return {};
-  const m = () => {
+  const g = () => {
     removePlaceholder(), r(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
     isDragging: n,
-    onDragOver: (g) => {
-      g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
+    onDragOver: (m) => {
+      m.preventDefault(), m.stopPropagation(), throttledDragOver(m);
     },
-    onDrop: (g) => {
-      var j;
-      const f = dropTarget, b = getOrientation(f) === "vertical" ? g.clientY + ((j = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : j.scrollY) : g.clientX;
+    onDrop: (m) => {
+      var E;
+      const f = dropTarget, b = getOrientation(f) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(b, possiblePositions);
       const y = d, R = f.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((y == null ? void 0 : y._id) === R || !w) {
-        m();
+        g();
         return;
       }
       if (!has(y, "_id")) {
-        a(y, R === "canvas" ? null : R, dropIndex), setTimeout(m, 300);
+        a(y, R === "canvas" ? null : R, dropIndex), setTimeout(g, 300);
         return;
       }
-      let E = f.getAttribute("data-block-id");
-      E === null && (E = g.target.parentElement.getAttribute("data-block-id")), c([y._id], E === "canvas" ? null : E, dropIndex), m(), setTimeout(removePlaceholder, 300);
+      let j = f.getAttribute("data-block-id");
+      j === null && (j = m.target.parentElement.getAttribute("data-block-id")), c([y._id], j === "canvas" ? null : j, dropIndex), g(), setTimeout(removePlaceholder, 300);
     },
-    onDragEnter: (g) => {
-      const f = g, h = f.target;
+    onDragEnter: (m) => {
+      const f = m, h = f.target;
       dropTarget = h;
       const b = h.getAttribute("data-block-id"), y = h.getAttribute("data-dnd-dragged") !== "yes";
       u(b), f.stopPropagation(), f.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(h), r(!0), l(""), i([]);
     },
-    onDragLeave: (g) => {
-      g.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
+    onDragLeave: (m) => {
+      m.target.getAttribute("data-block-id") === "canvas" && (u(null), r(!1), removePlaceholder(), possiblePositions = []);
     }
   };
 };
@@ -3501,25 +3501,25 @@ function destroyQuill(o) {
 const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], n = useUpdateBlocksProps(), [r, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
-    var m;
+    var g;
     if (r) return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
     if (!d || !o.includes(d))
       return;
     const p = c.cloneNode(!0);
-    c.style.display = "none", Array.from(p.attributes).forEach((g) => {
-      g.name !== "class" && p.removeAttribute(g.name);
+    c.style.display = "none", Array.from(p.attributes).forEach((m) => {
+      m.name !== "class" && p.removeAttribute(m.name);
     }), d === "Text" && (p.style.display = "inline-block"), c.parentNode.insertBefore(p, c.nextSibling);
     const u = new Quill(p, { placeholder: "Type here..." });
     function x() {
-      const g = u.getText(0, u.getLength());
-      n([c.getAttribute("data-block-id")], { content: g }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
+      const m = u.getText(0, u.getLength());
+      n([c.getAttribute("data-block-id")], { content: m }), c.removeAttribute("style"), p.removeEventListener("blur", x, !0), destroyQuill(u), a(""), l(), p.remove();
     }
-    p.addEventListener("blur", x, !0), p.addEventListener("click", (g) => {
-      g.stopPropagation();
-    }), p.addEventListener("keydown", (g) => {
-      (g.key === "Enter" || g.key === "Escape") && x();
-    }), u.focus(), (m = p.querySelector(".ql-clipboard")) == null || m.remove(), a(c.getAttribute("data-block-id"));
+    p.addEventListener("blur", x, !0), p.addEventListener("click", (m) => {
+      m.stopPropagation();
+    }), p.addEventListener("keydown", (m) => {
+      (m.key === "Enter" || m.key === "Escape") && x();
+    }), u.focus(), (g = p.querySelector(".ql-clipboard")) == null || g.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [n, r] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3556,12 +3556,12 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const m = getElementByDataBlockId(n, first(r));
-      if (m) {
-        const g = m.getAttribute("data-style-prop");
-        if (g) {
-          const f = m.getAttribute("data-style-id"), h = m.getAttribute("data-block-parent");
-          l([{ id: f, prop: g, blockId: h }]);
+      const g = getElementByDataBlockId(n, first(r));
+      if (g) {
+        const m = g.getAttribute("data-style-prop");
+        if (m) {
+          const f = g.getAttribute("data-style-id"), h = g.getAttribute("data-block-parent");
+          l([{ id: f, prop: m, blockId: h }]);
         }
       }
     }, 100);
@@ -3584,9 +3584,9 @@ const useHandleCanvasDblClick = () => {
 }, getElementByDataBlockId = (o, n) => o.querySelector(`[data-block-id="${n}"]`), HeadTags = () => {
   const [o] = useTheme(), n = useThemeOptions(), [r] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [x] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
-  ), [m] = useState(
-    d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [g] = useState(
+    d == null ? void 0 : d.getElementById("selected-styling-block")
+  ), [m] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
   );
   useEffect(() => {
@@ -3630,14 +3630,14 @@ const useHandleCanvasDblClick = () => {
                 outline: 1px solid ${r.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [r, x]), useEffect(() => {
-    g.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
-  }, [i, g]), useEffect(() => {
+    m.textContent = i ? `[data-block-id="${i._id}"], [data-block-id="${i._id}"] > * { pointer-events: none !important; opacity: 0.6 !important}` : "";
+  }, [i, m]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    m && (m.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
+    g && (g.textContent = `${map(l, ({ id: b }) => `[data-style-id="${b}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, m]), useEffect(() => {
+  }, [l, g]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
   const f = useMemo(
@@ -3723,60 +3723,60 @@ function applyLanguage(o, n, r) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: n }) {
-  const { selectedLang: r } = useLanguages(), [a] = useCutBlockIds(), [l] = useAtom$1(draggedBlockAtom), [i] = useAtom$1(dropTargetBlockIdAtom), [c] = useHiddenBlockIds(), { getGlobalBlocks: d } = useGlobalBlocksStore(), p = useCallback((m) => getStyleAttrs(m), []), [u] = useChaiExternalData(), [x] = useAtom$1(inlineEditingActiveAtom);
+  const { selectedLang: r, fallbackLang: a } = useLanguages(), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [d] = useHiddenBlockIds(), { getGlobalBlocks: p } = useGlobalBlocksStore(), u = useCallback((m) => getStyleAttrs(m), []), [x] = useChaiExternalData(), [g] = useAtom$1(inlineEditingActiveAtom);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((m, g) => {
-      if (x === m._id || c.includes(m._id)) return null;
-      const f = {}, h = filter(n, { _parent: m._id });
-      if (f.children = h.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: h }) : null, m._type === "GlobalBlock") {
-        const C = d(m);
-        f.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (_) => !_._parent), allBlocks: C });
+    o.map((m, f) => {
+      if (g === m._id || d.includes(m._id)) return null;
+      const h = {}, b = filter(n, { _parent: m._id });
+      if (h.children = b.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: n, blocks: b }) : null, m._type === "GlobalBlock") {
+        const _ = p(m);
+        h.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(_, (P) => !P._parent), allBlocks: _ });
       }
-      const b = getRegisteredChaiBlock(m._type), y = get(b, "component", null);
-      if (isNull(y)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${m == null ? void 0 : m._type} not registered -->` });
-      const R = p(m), w = l && isDescendant(l._id, m._id, n), j = {
+      const y = getRegisteredChaiBlock(m._type), R = get(y, "component", null);
+      if (isNull(R)) return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${m == null ? void 0 : m._type} not registered -->` });
+      const w = u(m), j = i && isDescendant(i._id, m._id, n), k = {
         blockProps: {
           "data-block-id": m._id,
           "data-block-type": m._type,
-          ...l ? (
+          ...i ? (
             // @ts-ignore
             {
-              "data-dnd": canAcceptChildBlock(m._type, l == null ? void 0 : l._type) ? "yes" : "no",
-              "data-dnd-dragged": l._id === m._id || w ? "yes" : "no"
+              "data-dnd": canAcceptChildBlock(m._type, i == null ? void 0 : i._type) ? "yes" : "no",
+              "data-dnd-dragged": i._id === m._id || j ? "yes" : "no"
             }
           ) : {},
-          ...i === m._id && !w ? { "data-drop": "yes" } : {},
-          ...includes(a, m._id) ? { "data-cut-block": "yes" } : {}
+          ...c === m._id && !j ? { "data-drop": "yes" } : {},
+          ...includes(l, m._id) ? { "data-cut-block": "yes" } : {}
         },
-        index: g,
-        ...applyBindings(applyLanguage(m, r, b), u),
-        ...R,
-        ...f,
+        index: f,
+        ...applyBindings(applyLanguage(m, r, y), x),
+        ...w,
+        ...h,
         inBuilder: !0,
-        lang: r
+        lang: r || a
       };
-      if (has(b, "dataProvider"))
+      if (has(y, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           AsyncPropsBlock,
           {
-            lang: r,
-            dataProvider: b.dataProvider,
+            lang: r || a,
+            dataProvider: y.dataProvider,
             block: m,
-            component: y,
-            props: j
+            component: R,
+            props: k
           }
         ) });
-      const k = getRuntimeProps(m._type);
-      return k ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      const C = getRuntimeProps(m._type);
+      return C ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         RuntimePropsBlock,
         {
-          runtimeProps: k,
+          runtimeProps: C,
           block: m,
-          component: y,
-          props: j
+          component: R,
+          props: k
         },
         m._id
-      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(y, j) });
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(R, k) });
     })
   ) });
 }
@@ -3789,11 +3789,11 @@ const StaticBlocksRenderer = () => {
     if (d < n) {
       const u = parseFloat((d / n).toFixed(2).toString());
       let x = {};
-      const m = p * u, g = d * u;
+      const g = p * u, m = d * u;
       p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - m) / m * 100 + "%",
-        width: 100 + (d - g) / g * 100 + "%"
+        height: 100 + (p - g) / g * 100 + "%",
+        width: 100 + (d - m) / m * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
@@ -3810,7 +3810,7 @@ const StaticBlocksRenderer = () => {
     c();
   }, [n, o, r, c]), l;
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, m] = useState([]), [, g] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), w = (k) => {
+  const [o] = useAtom$1(networkModeAtom), [n] = useCanvasWidth(), [, r] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, g] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [h, b] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), R = useBuilderProp("htmlDir", "ltr"), w = (k) => {
     p((C) => ({ ...C, width: k }));
   };
   useEffect(() => {
@@ -3818,7 +3818,7 @@ const StaticBlocksRenderer = () => {
     const { clientWidth: k, clientHeight: C } = c.current;
     p({ width: k, height: C });
   }, [c, n]);
-  const E = (k, C = 0) => {
+  const j = (k, C = 0) => {
     const { top: _ } = k.getBoundingClientRect();
     return _ + C >= 0 && _ - C <= window.innerHeight;
   };
@@ -3826,7 +3826,7 @@ const StaticBlocksRenderer = () => {
     var k, C;
     if (a && a.type !== "Multiple" && i.current) {
       const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
-      _ && (E(_) || (C = (k = i.current) == null ? void 0 : k.contentWindow) == null || C.scrollTo({ top: _.offsetTop, behavior: "smooth" }), m([_]));
+      _ && (j(_) || (C = (k = i.current) == null ? void 0 : k.contentWindow) == null || C.scrollTo({ top: _.offsetTop, behavior: "smooth" }), g([_]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(h) && i.current) {
@@ -3834,11 +3834,11 @@ const StaticBlocksRenderer = () => {
         i.current.contentDocument,
         first(h).id
       );
-      g(k ? [k] : [null]);
+      m(k ? [k] : [null]);
     } else
-      g([null]);
+      m([null]);
   }, [h]);
-  const j = useMemo(() => {
+  const E = useMemo(() => {
     let k = IframeInitialContent;
     return k = k.replace("__HTML_DIR__", R), o === "offline" && (k = k.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), k;
   }, [o, R]);
@@ -3859,7 +3859,7 @@ const StaticBlocksRenderer = () => {
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${n}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: j,
+          initialContent: E,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4112,14 +4112,14 @@ const StaticBlocksRenderer = () => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n] = useDarkMode(), [r, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), [c, d] = useTheme(), p = useThemeOptions(), { t: u } = useTranslation(), x = (y) => {
     a(y);
-  }, m = () => {
+  }, g = () => {
     const y = l.find((R) => Object.keys(R)[0] === r);
     if (y) {
       const R = Object.values(y)[0];
       R && typeof R == "object" && "fontFamily" in R && "borderRadius" in R && "colors" in R ? d(R) : console.error("Invalid preset structure:", R);
     } else
       console.error("Preset not found:", r);
-  }, g = useDebouncedCallback(
+  }, m = useDebouncedCallback(
     (y, R) => {
       d(() => ({
         ...c,
@@ -4162,10 +4162,10 @@ const StaticBlocksRenderer = () => {
         ColorPickerInput,
         {
           value: w,
-          onChange: (E) => h(R, E)
+          onChange: (j) => h(R, j)
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: R.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!R.toLowerCase().includes("foreground") && !R.toLowerCase().includes("border") && !R.toLowerCase().includes("input") && !R.toLowerCase().includes("ring") && !R.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: R.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((j) => j.charAt(0).toUpperCase() + j.slice(1)).join(" ") + (!R.toLowerCase().includes("foreground") && !R.toLowerCase().includes("border") && !R.toLowerCase().includes("input") && !R.toLowerCase().includes("ring") && !R.toLowerCase().includes("background") ? " Background" : "") })
     ] }, R);
   }) });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
@@ -4192,7 +4192,7 @@ const StaticBlocksRenderer = () => {
             className: "w-full text-sm",
             disabled: r === "",
             variant: "default",
-            onClick: m,
+            onClick: g,
             children: u("Apply")
           }
         ) })
@@ -4203,7 +4203,7 @@ const StaticBlocksRenderer = () => {
           {
             label: y,
             value: c.fontFamily[y.replace(/font-/g, "")] || R[Object.keys(R)[0]],
-            onChange: (w) => g(y, w)
+            onChange: (w) => m(y, w)
           },
           y
         )) }),
@@ -4433,17 +4433,17 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   pageTypes: n,
   onChange: r
 }) => {
-  var D;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, I) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [m, g] = useState(""), [f, h] = useState([]), [b, y] = useState(-1), R = useRef(null), w = (D = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : D.name;
+  var P;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, I) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [g, m] = useState(""), [f, h] = useState([]), [b, y] = useState(-1), R = useRef(null), w = (P = n == null ? void 0 : n.find((v) => v.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
-    if (g(""), h([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    if (m(""), h([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const v = split(o, ":"), I = get(v, 1, "page") || "page";
     x(I), (async () => {
       const B = await l(I, [get(v, 2, "page")]);
-      B && Array.isArray(B) && g(get(B, [0, "name"], ""));
+      B && Array.isArray(B) && m(get(B, [0, "name"], ""));
     })();
   }, [o]);
-  const E = useDebouncedCallback(
+  const j = useDebouncedCallback(
     async (v) => {
       if (isEmpty(v))
         h([]);
@@ -4455,9 +4455,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     },
     [u],
     300
-  ), j = (v) => {
+  ), E = (v) => {
     const I = ["pageType", u, v.id];
-    I[1] && (r(I.join(":")), g(v.name), p(!1), h([]), y(-1));
+    I[1] && (r(I.join(":")), m(v.name), p(!1), h([]), y(-1));
   }, k = (v) => {
     switch (v.key) {
       case "ArrowDown":
@@ -4468,7 +4468,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         break;
       case "Enter":
         if (v.preventDefault(), f.length === 0) return;
-        b >= 0 && j(f[b]);
+        b >= 0 && E(f[b]);
         break;
       case "Escape":
         v.preventDefault(), C();
@@ -4482,9 +4482,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     }
   }, [b]);
   const C = () => {
-    g(""), h([]), y(-1), p(!1), r("");
+    m(""), h([]), y(-1), p(!1), r("");
   }, _ = (v) => {
-    g(v), p(!isEmpty(v)), c(!0), E(v);
+    m(v), p(!isEmpty(v)), c(!0), j(v);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("select", { name: "pageType", value: u, onChange: (v) => x(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: v.key, children: v.name }, v.key)) }),
@@ -4493,14 +4493,14 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "input",
         {
           type: "text",
-          value: m,
+          value: g,
           onChange: (v) => _(v.target.value),
           onKeyDown: k,
           placeholder: a(`Search ${w ?? ""}`),
           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: m && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: C, 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: g && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(f) || d && isEmpty(f)) && /* @__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" }),
@@ -4508,12 +4508,12 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      m,
+      g,
       '"'
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: R, children: map(f == null ? void 0 : f.slice(0, 20), (v, I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => j(v),
+        onClick: () => E(v),
         className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : I === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
@@ -4607,14 +4607,14 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   }, [a]), useEffect(() => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
-  const m = () => {
+  const g = () => {
     const h = findIndex(u, { _id: x });
     if (h > -1) {
       const b = (h + 1) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
-  }, g = () => {
+  }, m = () => {
     const h = findIndex(u, { _id: x });
     if (h > -1) {
       const b = (h - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
@@ -4630,7 +4630,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: g, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: x ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("b", { className: "text-[12px]", children: [
           " ",
@@ -4639,7 +4639,7 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
         "/",
         u.length
       ] }) : "-" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: g, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3 stroke-[3]" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
@@ -4744,19 +4744,19 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   schema: u,
   formData: x
 }) => {
-  const { selectedLang: m, fallbackLang: g, languages: f } = useLanguages(), h = isEmpty(f) ? "" : isEmpty(m) ? g : m, b = get(LANGUAGES, h, h), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), w = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [E, j] = useState(null);
+  const { selectedLang: g, fallbackLang: m, languages: f } = useLanguages(), h = isEmpty(f) ? "" : isEmpty(g) ? m : g, b = get(LANGUAGES, h, h), y = useSelectedBlock(), R = useRegisteredChaiBlocks(), w = get(R, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [j, E] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: n, children: a });
   const C = w == null ? void 0 : w.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const _ = E === o;
+    const _ = j === o;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${n} relative`, children: [
       u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => j(_ ? null : o),
+          onClick: () => E(_ ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
             _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
@@ -4799,9 +4799,9 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   useEffect(() => {
     c(a);
   }, [o, d]);
-  const m = useThrottledCallback(
-    async ({ formData: g }, f) => {
-      l({ formData: g }, f);
+  const g = useThrottledCallback(
+    async ({ formData: m }, f) => {
+      l({ formData: m }, f);
     },
     [l, d],
     1e3
@@ -4840,8 +4840,8 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
       uiSchema: r,
       schema: n,
       formData: i,
-      onChange: ({ formData: g }, f) => {
-        f && (c(g), m({ formData: g }, f));
+      onChange: ({ formData: m }, f) => {
+        f && (c(m), g({ formData: m }, f));
       }
     },
     d
@@ -4856,10 +4856,10 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
   return set(r, o, n), r;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), m = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, m), f = ({ formData: k }, C, _) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), x = useWrapperBlock(), g = getRegisteredChaiBlock(x == null ? void 0 : x._type), m = formDataWithSelectedLang(x, o, g), f = ({ formData: k }, C, _) => {
     if (C && (c == null ? void 0 : c._id) === n._id) {
-      const D = C.replace("root.", "");
-      a([n._id], { [D]: get(k, D) }, _);
+      const P = C.replace("root.", "");
+      a([n._id], { [P]: get(k, P) }, _);
     }
   }, h = useCallback(
     debounce(({ formData: k }, C, _) => {
@@ -4888,7 +4888,7 @@ function BlockSettings() {
     const k = n == null ? void 0 : n._type;
     if (k)
       return getBlockFormSchemas(k);
-  }, [n]), { wrapperSchema: E, wrapperUiSchema: j } = useMemo(() => {
+  }, [n]), { wrapperSchema: j, wrapperUiSchema: E } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
     const k = x == null ? void 0 : x._type, { schema: C = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
@@ -4919,9 +4919,9 @@ function BlockSettings() {
         {
           id: x == null ? void 0 : x._id,
           onChange: y,
-          formData: g,
-          schema: E,
-          uiSchema: j
+          formData: m,
+          schema: j,
+          uiSchema: E
         }
       ) })
     ] }),
@@ -5004,11 +5004,11 @@ function Countdown() {
 const AskAIStyles = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), [u, x] = useState();
   useEffect(() => {
-    var g;
-    (g = d.current) == null || g.focus();
+    var m;
+    (m = d.current) == null || m.focus();
   }, []);
-  const m = (g) => {
-    const { usage: f } = g || {};
+  const g = (m) => {
+    const { usage: f } = m || {};
     !l && f && x(f), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
@@ -5018,12 +5018,12 @@ const AskAIStyles = ({ blockId: o }) => {
       {
         ref: d,
         value: i,
-        onChange: (g) => c(g.target.value),
+        onChange: (m) => c(m.target.value),
         placeholder: n("Ask AI to edit styles"),
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
-        onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, m));
+        onKeyDown: (m) => {
+          m.key === "Enter" && (m.preventDefault(), p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, g));
         }
       }
     ),
@@ -5033,7 +5033,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, m);
+            p.current && clearTimeout(p.current), x(void 0), r("styles", o, i, g);
           },
           variant: "default",
           className: "w-fit",
@@ -5065,24 +5065,24 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var C;
-  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), m = (C = first(r)) == null ? void 0 : C.prop, g = reject((get(a, m, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), f = () => {
+  const o = useFuseSearch(), { t: n } = useTranslation(), [r] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), g = (C = first(r)) == null ? void 0 : C.prop, m = reject((get(a, g, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), f = () => {
     const _ = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     l(c, _, !0), u("");
   }, [h, b] = useState([]), y = ({ value: _ }) => {
-    const D = _.trim().toLowerCase(), v = D.match(/.+:/g);
+    const P = _.trim().toLowerCase(), v = P.match(/.+:/g);
     let I = [];
     if (v && v.length > 0) {
-      const [B] = v, A = D.replace(B, "");
+      const [B] = v, A = P.replace(B, "");
       I = o.search(A).map((T) => ({
         ...T,
         item: { ...T.item, name: B + T.item.name }
       }));
     } else
-      I = o.search(D);
+      I = o.search(P);
     return b(map(I, "item"));
   }, R = () => {
     b([]);
-  }, w = (_) => _.name, E = (_) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: _.name }), j = {
+  }, w = (_) => _.name, j = (_) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: _.name }), E = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
@@ -5092,7 +5092,7 @@ function ManualClasses() {
     onKeyDown: (_) => {
       _.key === "Enter" && p.trim() !== "" && f();
     },
-    onChange: (_, { newValue: D }) => u(D),
+    onChange: (_, { newValue: P }) => u(P),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
   }, k = () => {
     if (navigator.clipboard === void 0) {
@@ -5103,7 +5103,7 @@ function ManualClasses() {
       });
       return;
     }
-    navigator.clipboard.writeText(g.join(" ")), x({
+    navigator.clipboard.writeText(m.join(" ")), x({
       title: n("Copied"),
       description: n("Classes copied to clipboard")
     });
@@ -5133,8 +5133,8 @@ function ManualClasses() {
           onSuggestionsFetchRequested: y,
           onSuggestionsClearRequested: R,
           getSuggestionValue: w,
-          renderSuggestion: E,
-          inputProps: j,
+          renderSuggestion: j,
+          inputProps: E,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -5157,7 +5157,7 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: g.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: m.map((_) => /* @__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",
@@ -5560,7 +5560,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), m = get(u, "2", ""), g = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), x = get(u, "1", ""), g = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
       ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
@@ -5593,7 +5593,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         disabled: !l,
         rounded: !0,
         selected: x,
-        onChange: g,
+        onChange: m,
         options: [
           "current",
           "transparent",
@@ -5626,7 +5626,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: m, disabled: !x || !l, onChange: f, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: g, disabled: !x || !l, onChange: f, options: i }) })
   ] });
 }, getUserInputValues = (o, n) => {
   o = o.toLowerCase();
@@ -5773,14 +5773,14 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [m, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, y] = useState(""), [R, w] = useState(!1), [E, j] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [g, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, h] = useState(!1), [b, y] = useState(""), [R, w] = useState(!1), [j, E] = useState(!1);
   useEffect(() => {
     const { value: v, unit: I } = getClassValueAndUnit(i);
     if (I === "") {
-      l(v), g(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+      l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    g(I), l(I === "class" || isEmpty(v) ? "" : v);
+    m(I), l(I === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
   const k = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), C = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), _ = useCallback(
     (v = !1) => {
@@ -5789,7 +5789,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         h(!0);
         return;
       }
-      const B = get(I, "unit") !== "" ? get(I, "unit") : m;
+      const B = get(I, "unit") !== "" ? get(I, "unit") : g;
       if (B === "auto" || B === "none") {
         k(`${d}${B}`);
         return;
@@ -5799,8 +5799,8 @@ const RangeChoices = ({ property: o, onChange: n }) => {
       const N = `${get(I, "value", "").startsWith("-") ? "-" : ""}${d}[${get(I, "value", "").replace("-", "")}${B === "-" ? "" : B}]`;
       v ? C(N) : k(N);
     },
-    [k, C, a, m, d, u]
-  ), D = useCallback(
+    [k, C, a, g, d, u]
+  ), P = useCallback(
     (v) => {
       const I = getUserInputValues(`${a}`, u);
       if (get(I, "error", !1)) {
@@ -5818,7 +5818,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     },
     [k, 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: m === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: g === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
       {
@@ -5833,25 +5833,25 @@ const RangeChoices = ({ property: o, onChange: n }) => {
     ] })
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${R ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(g) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: m === "class",
+          readOnly: g === "class",
           onKeyPress: (v) => {
             v.key === "Enter" && _();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            v.preventDefault(), j(!0);
+            v.preventDefault(), E(!0);
             const I = parseInt$1(v.target.value);
             let B = isNaN$1(I) ? 0 : I;
             v.keyCode === 38 && (B += 1), v.keyCode === 40 && (B -= 1);
-            const A = `${B}`, T = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${m === "-" ? "" : m}]`;
+            const A = `${B}`, T = `${A.startsWith("-") ? "-" : ""}${d}[${A.replace("-", "")}${g === "-" ? "" : g}]`;
             C(T);
           },
           onKeyUp: (v) => {
-            E && (v.preventDefault(), j(!1));
+            j && (v.preventDefault(), E(!1));
           },
           onBlur: () => _(),
           onChange: (v) => {
@@ -5876,7 +5876,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
             onClick: () => r(!n),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: g }),
               u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -5885,33 +5885,33 @@ const RangeChoices = ({ property: o, onChange: n }) => {
           UnitSelection,
           {
             units: u,
-            current: m,
+            current: g,
             onSelect: (v) => {
-              r(!1), g(v), D(v);
+              r(!1), m(v), P(v);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(g) !== -1 || R ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
         onDragStart: () => w(!0),
         onDragEnd: (v) => {
           if (y(() => ""), w(!1), isEmpty(v))
             return;
-          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
           k(A);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           y(v);
-          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+          const I = `${v}`, A = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${g === "-" ? "" : g}]`;
           C(A);
         },
         currentValue: a,
-        unit: m,
+        unit: g,
         negative: x,
         cssProperty: p
       }
@@ -6005,23 +6005,23 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), m = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), g = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), b = useMemo(() => get(g, "fullCls", ""), [g]), y = useCallback(
     (C, _ = !0) => {
-      const D = { dark: p, mq: x, mod: u, cls: C, property: l, fullCls: "" };
-      (p || u !== "") && (D.mq = "xs");
-      const v = generateFullClsName(D);
-      g(h, [v], _);
+      const P = { dark: p, mq: x, mod: u, cls: C, property: l, fullCls: "" };
+      (p || u !== "") && (P.mq = "xs");
+      const v = generateFullClsName(P);
+      m(h, [v], _);
     },
-    [h, p, x, u, l, g]
+    [h, p, x, u, l, m]
   ), R = useCallback(() => {
     f(h, [b]);
-  }, [h, b, f]), w = useMemo(() => canChangeClass(m, x), [m, x]);
+  }, [h, b, f]), w = useMemo(() => canChangeClass(g, x), [g, x]);
   useEffect(() => {
-    i(w, m);
-  }, [w, i, m]);
-  const [, , E] = useCanvasWidth(), j = useCallback(
+    i(w, g);
+  }, [w, i, g]);
+  const [, , j] = useCanvasWidth(), E = useCallback(
     (C) => {
-      E({
+      j({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6030,16 +6030,16 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         "2xl": 1920
       }[C]);
     },
-    [E]
-  ), k = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: m && k, 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] ${m && !k ? "text-foreground" : ""}`, children: n(a) }) }),
+    [j]
+  ), k = get(g, "dark", null) === p && get(g, "mod", null) === u && get(g, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: w, canReset: g && k, 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] ${g && !k ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           AdvanceChoices,
           {
-            currentClass: get(m, "cls", ""),
+            currentClass: get(g, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -6052,7 +6052,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         r === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), 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" }) }) : w && m ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => R(), 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" }) }) : w && g ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6064,19 +6064,19 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(m, "mq")),
-            p && !m.dark ? "(Light mode)" : ""
+            getBreakpoint(get(g, "mq")),
+            p && !g.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => j(get(m, "mq")),
+              onClick: () => E(get(g, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(m, "mq").toUpperCase()
+                get(g, "mq").toUpperCase()
               ]
             }
           )
@@ -6093,7 +6093,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), m = useCallback((g) => map(x, "property").includes(g), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), x = useSelectedBlockCurrentClasses(), g = useCallback((m) => map(x, "property").includes(m), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6102,7 +6102,7 @@ const RangeChoices = ({ property: o, onChange: n }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: React__default.Children.toArray(
-            n.map(({ label: g, key: f }) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+            n.map(({ label: m, key: f }) => /* @__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",
                 {
@@ -6111,13 +6111,13 @@ const RangeChoices = ({ property: o, onChange: n }) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: g(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(g)) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: startCase(toLower(m)) })
             ] }) }))
           ) })
         ] }),
@@ -6256,13 +6256,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const x = !get(i, "negative", !1), m = get(i, "cssProperty", "");
-      let g = parseFloat(i.dragStartValue);
-      g = isNaN(g) ? 0 : g;
+      const x = !get(i, "negative", !1), g = get(i, "cssProperty", "");
+      let m = parseFloat(i.dragStartValue);
+      m = isNaN(m) ? 0 : m;
       let f = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (f = 10);
-      let b = (i.dragStartY - u.pageY) / f + g;
-      x && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
+      (startsWith(g, "scale") || g === "opacity") && (f = 10);
+      let b = (i.dragStartY - u.pageY) / f + m;
+      x && b < 0 && (b = 0), g === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
@@ -6304,7 +6304,7 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), g = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
       const b = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
       u(syncBlocksWithDefaults(b), r || null, a);
@@ -6317,11 +6317,11 @@ const CoreBlock = ({
       "button",
       {
         disabled: n,
-        onClick: g,
+        onClick: m,
         type: "button",
         onDragStart: (b) => {
           b.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), b.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            x([]), m();
+            x([]), g();
           }, 200);
         },
         draggable: f ? "true" : "false",
@@ -6501,22 +6501,22 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, g, f, h, b, y, R, w;
+  var g, m, f, h, b, y, R, w;
   if (r.type === "comment") return [];
   console.log("node ===>", r);
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
     return isEmpty(get(r, "content", "")) ? [] : n && shouldAddText(n.node, n.block) ? (set(n, "block.content", get(r, "content", "")), []) : { ...a, _type: "Text", content: get(r, "content", "") };
   const l = get(r, "attributes", []), i = l.find(
-    (E) => E.key === "data-chai-richtext" || E.key === "chai-richtext"
+    (j) => j.key === "data-chai-richtext" || j.key === "chai-richtext"
   ), c = l.find(
-    (E) => E.key === "data-chai-lightbox" || E.key === "chai-lightbox"
+    (j) => j.key === "data-chai-lightbox" || j.key === "chai-lightbox"
   ), d = l.find(
-    (E) => E.key === "data-chai-dropdown" || E.key === "chai-dropdown"
+    (j) => j.key === "data-chai-dropdown" || j.key === "chai-dropdown"
   ), p = l.find(
-    (E) => E.key === "data-chai-dropdown-button" || E.key === "chai-dropdown-button"
+    (j) => j.key === "data-chai-dropdown-button" || j.key === "chai-dropdown-button"
   ), u = l.find(
-    (E) => E.key === "data-chai-dropdown-content" || E.key === "chai-dropdown-content"
+    (j) => j.key === "data-chai-dropdown-content" || j.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6524,13 +6524,13 @@ const CoreBlock = ({
     ...getAttrs(r),
     ...getStyles(r)
   }, r.attributes) {
-    const E = r.attributes.find((j) => includes(NAME_ATTRIBUTES, j.key));
-    E && (a._name = E.value);
+    const j = r.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    j && (a._name = j.value);
   }
   if (i)
     return a.content = stringify(r.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const E = [
+    const j = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6542,26 +6542,26 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((m = l.find((j) => j.key === "href")) == null ? void 0 : m.value) || "",
-      hrefType: ((g = l.find((j) => j.key === "data-vbtype")) == null ? void 0 : g.value) || "video",
-      autoplay: ((f = l.find((j) => j.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((b = (h = l.find((j) => j.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : b.replace("px", "")) || "",
-      backdropColor: ((y = l.find((j) => j.key === "data-overlay")) == null ? void 0 : y.value) || "",
-      galleryName: ((R = l.find((j) => j.key === "data-gall")) == null ? void 0 : R.value) || ""
-    }, forEach(E, (j) => {
-      has(a, `styles_attrs.${j}`) && delete a.styles_attrs[j];
+      href: ((g = l.find((E) => E.key === "href")) == null ? void 0 : g.value) || "",
+      hrefType: ((m = l.find((E) => E.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      autoplay: ((f = l.find((E) => E.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((b = (h = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : b.replace("px", "")) || "",
+      backdropColor: ((y = l.find((E) => E.key === "data-overlay")) == null ? void 0 : y.value) || "",
+      galleryName: ((R = l.find((E) => E.key === "data-gall")) == null ? void 0 : R.value) || ""
+    }, forEach(j, (E) => {
+      has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const E = filter(r.children || [], (k) => (k == null ? void 0 : k.tagName) !== "span");
-    a.content = getTextContent(E);
-    const j = find(
+    const j = filter(r.children || [], (k) => (k == null ? void 0 : k.tagName) !== "span");
+    a.content = getTextContent(j);
+    const E = find(
       r.children || [],
       (k) => (k == null ? void 0 : k.tagName) === "span" && some(k.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
     );
-    if (j) {
-      const k = find(j.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
+    if (E) {
+      const k = find(E.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
       if (k) {
         a.icon = stringify([k]);
         const { height: C, width: _ } = getSvgDimensions(k, "16px", "16px");
@@ -6571,14 +6571,14 @@ const CoreBlock = ({
     return [a];
   }
   if (a._type === "Input") {
-    const E = a.inputType || "text";
-    E === "checkbox" ? set(a, "_type", "Checkbox") : E === "radio" && set(a, "_type", "Radio");
+    const j = a.inputType || "text";
+    j === "checkbox" ? set(a, "_type", "Checkbox") : j === "radio" && set(a, "_type", "Radio");
   } else if (r.tagName === "video" || r.tagName === "iframe") {
-    const E = stringify([r]);
-    return hasVideoEmbed(E) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(E)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = E, [a];
+    const j = stringify([r]);
+    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];
   } else if (r.tagName === "svg") {
-    const E = find(r.attributes, { key: "height" }), j = find(r.attributes, { key: "width" }), k = get(E, "value") ? `[${get(E, "value")}px]` : "24px", C = get(j, "value") ? `[${get(j, "value")}px]` : "24px", _ = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${C} h-${k}`, _)}`.trim(), r.attributes = filter(r.attributes, (D) => !includes(["style", "width", "height", "class"], D.key)), a.icon = stringify([r]), [a];
+    const j = find(r.attributes, { key: "height" }), E = find(r.attributes, { key: "width" }), k = get(j, "value") ? `[${get(j, "value")}px]` : "24px", C = get(E, "value") ? `[${get(E, "value")}px]` : "24px", _ = get(find(r.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${C} h-${k}`, _)}`.trim(), r.attributes = filter(r.attributes, (P) => !includes(["style", "width", "height", "class"], P.key)), a.icon = stringify([r]), [a];
   } else if (r.tagName == "option" && n && ((w = n.block) == null ? void 0 : w._type) === "Select")
     return n.block.options.push({
       label: getTextContent(r.children),
@@ -6682,8 +6682,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Tabs,
       {
-        onValueChange: (m) => {
-          d(""), c(m);
+        onValueChange: (g) => {
+          d(""), c(g);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -6692,12 +6692,12 @@ const CoreBlock = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: m.key, children: React__default.createElement(m.tab) }))
+            map(u, (g) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: g.key, children: React__default.createElement(g.tab) }))
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(u, (m) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: m.key, children: React__default.createElement(m.tabContent, { close: x, parentId: r, position: a }) }))
+          map(u, (g) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: g.key, children: React__default.createElement(g.tabContent, { close: x, parentId: r, position: a }) }))
         ]
       }
     )
@@ -6754,7 +6754,7 @@ const BlockCard = ({
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), m = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), h = (R) => {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), g = get(o, "name", get(o, "label")), m = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), h = (R) => {
     const w = has(R, "styles_attrs.data-page-section");
     return R._type === "Box" && w;
   }, b = useCallback(
@@ -6770,17 +6770,17 @@ const BlockCard = ({
     [d, p, o, c, n, r, a]
   ), y = async (R) => {
     const w = await c(n, o);
-    let E = r;
-    if (h(first(w)) && (E = null), !isEmpty(w)) {
-      const j = { blocks: w, uiLibrary: !0, parent: E };
-      if (R.dataTransfer.setData("text/plain", JSON.stringify(j)), o.preview) {
+    let j = r;
+    if (h(first(w)) && (j = null), !isEmpty(w)) {
+      const E = { blocks: w, uiLibrary: !0, parent: j };
+      if (R.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
         const k = new Image();
         k.src = o.preview, k.onload = () => {
           R.dataTransfer.setDragImage(k, 0, 0);
         };
       } else
         R.dataTransfer.setDragImage(new Image(), 0, 0);
-      f(j), setTimeout(() => {
+      f(E), setTimeout(() => {
         u([]), x(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
       }, 200);
     }
@@ -6791,7 +6791,7 @@ const BlockCard = ({
       {
         onClick: l ? () => {
         } : b,
-        draggable: g ? "true" : "false",
+        draggable: m ? "true" : "false",
         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"
@@ -6801,11 +6801,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: m }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: m }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: g }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: g }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -6820,9 +6820,9 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, r, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((E) => E.category === "custom"), d = l.find((E) => E.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [m, g] = useState("Hero"), f = get(x, m, []), h = useRef(null), { t: b } = useTranslation(), y = (E) => {
+  const [r, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((j) => j.category === "custom"), d = l.find((j) => j.uuid === r) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [g, m] = useState("Hero"), f = get(x, g, []), h = useRef(null), { t: b } = useTranslation(), y = (j) => {
     h.current && (clearTimeout(h.current), h.current = null), h.current = setTimeout(() => {
-      h.current && g(E);
+      h.current && m(j);
     }, 300);
   };
   if (u)
@@ -6830,7 +6830,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const R = filter(f, (E, j) => j % 2 === 0), w = filter(f, (E, j) => j % 2 === 1);
+  const R = filter(f, (j, E) => E % 2 === 0), w = filter(f, (j, E) => E % 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 }),
@@ -6838,22 +6838,22 @@ const BlockCard = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: b("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, (E, j) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(x, (j, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => y(j),
+              onMouseEnter: () => y(E),
               onMouseLeave: () => clearTimeout(h.current),
-              onClick: () => g(j),
+              onClick: () => m(E),
               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",
-                j === m ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                E === g ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(j.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(b(E.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            j
+            E
           ))
         ) })
       ] })
@@ -6866,10 +6866,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(
-              R.map((E) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: E, library: d }))
+              R.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              w.map((E) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: E, library: d }))
+              w.map((j) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: n, block: j, library: d }))
             ) })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -7092,45 +7092,45 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
   var T;
   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: m } = useBlockHighlight(), { id: g, data: f, isSelected: h, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: w } = o, E = (S) => {
-    S.stopPropagation(), !i.includes(g) && o.toggle();
-  }, j = (S) => {
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: g } = useBlockHighlight(), { id: m, data: f, isSelected: h, willReceiveDrop: b, isDragging: y, isEditing: R, handleClick: w } = o, j = (S) => {
+    S.stopPropagation(), !i.includes(m) && o.toggle();
+  }, E = (S) => {
     S.isInternal && (p = S.isOpen, S.isOpen && S.close());
   }, k = (S) => {
     S.isInternal && p !== null && (p ? S.open() : S.close(), p = null);
-  }, [C, _] = useAtom$1(currentAddSelection), D = () => {
+  }, [C, _] = useAtom$1(currentAddSelection), P = () => {
     var S;
     v(), o.parent.isSelected || _((S = o == null ? void 0 : o.parent) == null ? void 0 : S.id);
   }, v = () => {
     _(null);
   }, I = (S) => {
-    v(), S.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), w(S);
+    v(), S.stopPropagation(), !o.isOpen && !i.includes(m) && o.toggle(), w(S);
   };
   useEffect(() => {
     const S = setTimeout(() => {
-      b && !o.isOpen && !y && !i.includes(g) && o.toggle();
+      b && !o.isOpen && !y && !i.includes(m) && o.toggle();
     }, 500);
     return () => clearTimeout(S);
   }, [b, o, y]);
   const B = useMemo(() => {
     const S = Object.keys(f), L = [];
-    for (let P = 0; P < S.length; P++)
-      if (S[P].endsWith("_attrs")) {
-        const $ = f[S[P]], O = Object.keys($).join("|");
+    for (let D = 0; D < S.length; D++)
+      if (S[D].endsWith("_attrs")) {
+        const $ = f[S[D]], O = Object.keys($).join("|");
         O.match(/x-data/) && L.push("data"), O.match(/x-on/) && L.push("event"), O.match(/x-show|x-if/) && L.push("show");
       }
     return L;
   }, [f]), A = (S, L) => {
-    const P = d.contentDocument || d.contentWindow.document, $ = P.querySelector(`[data-block-id=${S}]`);
+    const D = d.contentDocument || d.contentWindow.document, $ = D.querySelector(`[data-block-id=${S}]`);
     $ && $.setAttribute("data-drop", L);
     const O = $.getBoundingClientRect(), M = d.getBoundingClientRect();
-    O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || (P.documentElement.scrollTop = $.offsetTop - M.top);
+    O.top >= M.top && O.left >= M.left && O.bottom <= M.bottom && O.right <= M.right || (D.documentElement.scrollTop = $.offsetTop - M.top);
   }, N = (S) => {
     v();
     const L = get(o, "parent.id");
     L !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: L, position: S }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: S });
   };
-  return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
+  return m === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
@@ -7145,25 +7145,25 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {})
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(BlockContextMenu, { id: m, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      onMouseEnter: () => x(g),
-      onMouseLeave: () => m(),
+      onMouseEnter: () => x(m),
+      onMouseLeave: () => g(),
       onClick: I,
       style: n,
-      "data-node-id": g,
-      ref: i.includes(g) ? null : r,
-      onDragStart: () => j(o),
+      "data-node-id": m,
+      ref: i.includes(m) ? null : r,
+      onDragStart: () => E(o),
       onDragEnd: () => k(o),
       onDragOver: (S) => {
-        S.preventDefault(), A(g, "yes");
+        S.preventDefault(), A(m, "yes");
       },
       onDragLeave: (S) => {
-        S.preventDefault(), A(g, "no");
+        S.preventDefault(), A(m, "no");
       },
       onDrop: (S) => {
-        S.preventDefault(), A(g, "no");
+        S.preventDefault(), A(m, "no");
       },
       children: [
         (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -7172,7 +7172,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
             onClick: (S) => {
               S.stopPropagation(), N(o.childIndex);
             },
-            onMouseEnter: D,
+            onMouseEnter: P,
             onMouseLeave: v,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
@@ -7187,7 +7187,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
               b && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === C ? "bg-purple-100" : "",
               y && "opacity-20",
-              i.includes(g) ? "opacity-50" : ""
+              i.includes(m) ? "opacity-50" : ""
             ),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center", children: [
@@ -7195,7 +7195,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, 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: E, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    children: u && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: j, type: "button", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       ChevronRight,
                       {
                         className: `h-3 w-3 stroke-[3] ${h ? "text-slate-200" : "text-slate-400"}`
@@ -7223,22 +7223,22 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(g) && a.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                !i.includes(m) && a.map((S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(S.item, { blockId: g })
+                      children: React__default.createElement(S.item, { blockId: m })
                     }
                   ),
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: S.tooltip })
                 ] })),
-                canAddChildBlock(f == null ? void 0 : f._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                canAddChildBlock(f == null ? void 0 : f._type) && !i.includes(m) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: g }),
+                      onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: m }),
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
                       children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { size: "15" })
@@ -7251,7 +7251,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: n, drag
                     TooltipTrigger,
                     {
                       onClick: (S) => {
-                        S.stopPropagation(), c(g), o.isOpen && o.toggle();
+                        S.stopPropagation(), c(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -7911,14 +7911,14 @@ function QuickPrompts({ onClick: o }) {
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), m = useRef(null), g = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), g = useRef(null), m = useRef(null);
   useEffect(() => {
     var h;
-    (h = m.current) == null || h.focus();
+    (h = g.current) == null || h.focus();
   }, []);
   const f = (h) => {
     const { usage: b } = h || {};
-    !l && b && x(b), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
+    !l && b && x(b), m.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7936,14 +7936,14 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: m,
+          ref: g,
           value: i,
           onChange: (h) => c(h.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
           onKeyDown: (h) => {
-            h.key === "Enter" && (h.preventDefault(), g.current && clearTimeout(g.current), x(void 0), r("content", o, i, f));
+            h.key === "Enter" && (h.preventDefault(), m.current && clearTimeout(m.current), x(void 0), r("content", o, i, f));
           }
         }
       ),
@@ -7953,7 +7953,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              g.current && clearTimeout(g.current), x(void 0), r("content", o, i, f);
+              m.current && clearTimeout(m.current), x(void 0), r("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -7986,7 +7986,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         QuickPrompts,
         {
           onClick: (h) => {
-            g.current && clearTimeout(g.current), x(void 0), r("content", o, h, f);
+            m.current && clearTimeout(m.current), x(void 0), r("content", o, h, f);
           }
         }
       )
@@ -7996,17 +7996,17 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: m } = useToast(), g = useRef(null);
+  const { t: o } = useTranslation(), n = useBuilderProp("aiContext", ""), [r, a] = useState(n), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: g } = useToast(), m = useRef(null);
   useEffect(() => {
     n && a(n);
   }, [n]);
   const f = async () => {
     try {
-      d(!0), u(null), await i(r), m({
+      d(!0), u(null), await i(r), g({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
-      }), g.current.click();
+      }), m.current.click();
     } catch (h) {
       u(h);
     } finally {
@@ -8022,7 +8022,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       type: "single",
       collapsible: !0,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value: "set-context", className: "border-none", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: g, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionTrigger, { ref: m, className: "border-0 border-border py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: o("AI Context") }) }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,
@@ -8329,42 +8329,42 @@ const ClearCanvas = () => {
     ] })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: n = [], onAttributesChange: r }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [m, g] = useState(""), f = useRef(null), h = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [g, m] = useState(""), f = useRef(null), h = useRef(null);
   useEffect(() => {
     l(n);
   }, [n]);
   const b = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const j = [...a, { key: i, value: d }];
-      r(j), l(a), c(""), p(""), g("");
+      const E = [...a, { key: i, value: d }];
+      r(E), l(a), c(""), p(""), m("");
     }
-  }, y = (j) => {
-    const k = a.filter((C, _) => _ !== j);
+  }, y = (E) => {
+    const k = a.filter((C, _) => _ !== E);
     r(k), l(k);
-  }, R = (j) => {
-    x(j), c(a[j].key), p(a[j].value);
+  }, R = (E) => {
+    x(E), c(a[E].key), p(a[E].value);
   }, w = () => {
     if (i.startsWith("@")) {
-      g("Attribute keys cannot start with '@'");
+      m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const j = [...a];
-      j[u] = { key: i, value: d }, r(j), l(j), x(null), c(""), p(""), g("");
+      const E = [...a];
+      E[u] = { key: i, value: d }, r(E), l(E), x(null), c(""), p(""), m("");
     }
-  }, E = (j) => {
-    j.key === "Enter" && !j.shiftKey && (j.preventDefault(), u !== null ? w() : b());
+  }, j = (E) => {
+    E.key === "Enter" && !E.shiftKey && (E.preventDefault(), u !== null ? w() : b());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (j) => {
-          j.preventDefault(), u !== null ? w() : b();
+        onSubmit: (E) => {
+          E.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -8380,7 +8380,7 @@ const ClearCanvas = () => {
                   id: "attrKey",
                   ref: f,
                   value: i,
-                  onChange: (j) => c(j.target.value),
+                  onChange: (E) => c(E.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8398,8 +8398,8 @@ const ClearCanvas = () => {
                   rows: 2,
                   ref: h,
                   value: d,
-                  onChange: (j) => p(j.target.value),
-                  onKeyDown: E,
+                  onChange: (E) => p(E.target.value),
+                  onKeyDown: j,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8407,14 +8407,14 @@ const ClearCanvas = () => {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          m && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: m })
+          g && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: g })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((j, k) => /* @__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((E, k) => /* @__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: j.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: j.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: E.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: E.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: () => R(k), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
@@ -8617,7 +8617,7 @@ const RootLayout = () => {
     h.preventDefault();
   }, u = (h) => {
     n(o === h ? null : h);
-  }, x = useSidebarMenuItems(), { t: m } = useTranslation(), g = [...x, ...c], f = useBuilderProp("htmlDir", "ltr");
+  }, x = useSidebarMenuItems(), { t: g } = useTranslation(), m = [...x, ...c], f = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: f, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -8628,7 +8628,7 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: g.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: m.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
@@ -8639,7 +8639,7 @@ const RootLayout = () => {
                   },
                   b
                 ) }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: m(h.label) }) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: g(h.label) }) })
               ] }, "button" + b)) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col space-y-1" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: d == null ? void 0 : d.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}), children: React__default.createElement(h, { key: b }) })) })
@@ -8653,10 +8653,10 @@ const RootLayout = () => {
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(g, `${o}.icon`, null) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: m(g[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(m, `${o}.icon`, null) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: g(m[o].label) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(g, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(m, `${o}.component`, null), {}) }) })
                 ] }) })
               }
             ),
@@ -8675,11 +8675,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full items-center justify-between gap-2", children: l === "ai" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    m("AI Assistant")
+                    g("AI Assistant")
                   ] }) }) : l === "theme" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      m("Theme Settings")
+                      g("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsxRuntimeExports.jsx(
                       Button,