@chaibuilder/sdk 2.1.1 → 2.1.2

package/dist/core.js

@@ -105,7 +105,7 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
     return D || (D = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, a.set(E, D), g == null || g(E, B)), D;
   }), v = y[1] || (() => {
     let E, D;
-    const j = (_) => {
+    const T = (_) => {
       try {
         _();
       } catch (P) {
@@ -113,25 +113,25 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
       }
     };
     do {
-      m.f && j(m.f);
+      m.f && T(m.f);
       const _ = /* @__PURE__ */ new Set(), P = _.add.bind(_);
       d.forEach((L) => {
         var R;
         return (R = l.get(L)) == null ? void 0 : R.l.forEach(P);
-      }), d.clear(), p.forEach(P), p.clear(), u.forEach(P), u.clear(), _.forEach(j), d.size && k();
+      }), d.clear(), p.forEach(P), p.clear(), u.forEach(P), u.clear(), _.forEach(T), d.size && k();
     } while (d.size || p.size || u.size);
     if (E)
       throw D;
   }), k = y[2] || (() => {
-    const E = [], D = /* @__PURE__ */ new WeakSet(), j = /* @__PURE__ */ new WeakSet(), _ = Array.from(d);
+    const E = [], D = /* @__PURE__ */ new WeakSet(), T = /* @__PURE__ */ new WeakSet(), _ = Array.from(d);
     for (; _.length; ) {
       const P = _[_.length - 1], L = b(P);
-      if (j.has(P)) {
+      if (T.has(P)) {
         _.pop();
         continue;
       }
       if (D.has(P)) {
-        c.get(P) === L.n && E.push([P, L]), j.add(P), _.pop();
+        c.get(P) === L.n && E.push([P, L]), T.add(P), _.pop();
         continue;
       }
       D.add(P);
@@ -149,7 +149,7 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
       M && (S(L), w(L)), c.delete(L);
     }
   }), S = y[3] || ((E) => {
-    var D, j;
+    var D, T;
     const _ = b(E);
     if (isAtomStateInitialized(_) && (l.has(E) && c.get(E) !== _.n || Array.from(_.d).every(
       ([$, F]) => (
@@ -206,19 +206,19 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
     } catch ($) {
       return delete _.v, _.e = $, ++_.n, _;
     } finally {
-      P = !1, V !== _.n && c.get(E) === V && (c.set(E, _.n), d.add(E), (j = m.c) == null || j.call(m, E));
+      P = !1, V !== _.n && c.get(E) === V && (c.set(E, _.n), d.add(E), (T = m.c) == null || T.call(m, E));
     }
   }), C = y[4] || ((E) => {
     const D = [E];
     for (; D.length; ) {
-      const j = D.pop(), _ = b(j);
-      for (const P of getMountedOrPendingDependents(j, _, l)) {
+      const T = D.pop(), _ = b(T);
+      for (const P of getMountedOrPendingDependents(T, _, l)) {
         const L = b(P);
         c.set(P, L.n), D.push(P);
       }
     }
   }), A = y[5] || ((E, ...D) => {
-    let j = !0;
+    let T = !0;
     const _ = (L) => returnAtomValue(S(L)), P = (L, ...R) => {
       var M;
       const O = b(L);
@@ -232,41 +232,41 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
         } else
           return A(L, ...R);
       } finally {
-        j || (k(), v());
+        T || (k(), v());
       }
     };
     try {
       return f(E, _, P, ...D);
     } finally {
-      j = !1;
+      T = !1;
     }
   }), w = y[6] || ((E) => {
     var D;
-    const j = b(E), _ = l.get(E);
-    if (_ && !isPendingPromise(j.v)) {
-      for (const [P, L] of j.d)
+    const T = b(E), _ = l.get(E);
+    if (_ && !isPendingPromise(T.v)) {
+      for (const [P, L] of T.d)
         if (!_.d.has(P)) {
           const R = b(P);
           I(P).t.add(E), _.d.add(P), L !== R.n && (d.add(P), (D = m.c) == null || D.call(m, P), C(P));
         }
       for (const P of _.d || [])
-        if (!j.d.has(P)) {
+        if (!T.d.has(P)) {
           _.d.delete(P);
-          const L = T(P);
+          const L = N(P);
           L == null || L.t.delete(E);
         }
     }
   }), I = y[7] || ((E) => {
     var D;
-    const j = b(E);
+    const T = b(E);
     let _ = l.get(E);
     if (!_) {
       S(E);
-      for (const P of j.d.keys())
+      for (const P of T.d.keys())
         I(P).t.add(E);
       if (_ = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(j.d.keys()),
+        d: new Set(T.d.keys()),
         t: /* @__PURE__ */ new Set()
       }, l.set(E, _), (D = m.m) == null || D.call(m, E), isActuallyWritableAtom(E)) {
         const P = () => {
@@ -296,23 +296,23 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
       }
     }
     return _;
-  }), T = y[8] || ((E) => {
+  }), N = y[8] || ((E) => {
     var D;
-    const j = b(E);
+    const T = b(E);
     let _ = l.get(E);
     if (_ && !_.l.size && !Array.from(_.t).some((P) => {
       var L;
       return (L = l.get(P)) == null ? void 0 : L.d.has(E);
     })) {
       _.u && p.add(_.u), _ = void 0, l.delete(E), (D = m.u) == null || D.call(m, E);
-      for (const P of j.d.keys()) {
-        const L = T(P);
+      for (const P of T.d.keys()) {
+        const L = N(P);
         L == null || L.t.delete(E);
       }
       return;
     }
     return _;
-  }), N = [
+  }), j = [
     // store state
     a,
     l,
@@ -335,7 +335,7 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
     A,
     w,
     I,
-    T
+    N
   ], B = {
     get: (E) => returnAtomValue(S(E)),
     set: (E, ...D) => {
@@ -348,11 +348,11 @@ const isSelfAtom = (a, l) => a.unstable_is ? a.unstable_is(l) : l === a, hasInit
     sub: (E, D) => {
       const _ = I(E).l;
       return _.add(D), v(), () => {
-        _.delete(D), T(E), v();
+        _.delete(D), N(E), v();
       };
     }
   };
-  return Object.defineProperty(B, BUILDING_BLOCKS, { value: N }), B;
+  return Object.defineProperty(B, BUILDING_BLOCKS, { value: j }), B;
 }, INTERNAL_buildStoreRev1 = buildStore;
 let keyCount = 0;
 function atom(a, l) {
@@ -397,22 +397,22 @@ function splitAtom(a, l) {
             return;
           }
           const C = (w) => {
-            const I = w(u), T = w(a), B = d(T, I == null ? void 0 : I.arr).keyList.indexOf(k);
-            if (B < 0 || B >= T.length) {
+            const I = w(u), N = w(a), B = d(N, I == null ? void 0 : I.arr).keyList.indexOf(k);
+            if (B < 0 || B >= N.length) {
               const E = m[d(m).keyList.indexOf(k)];
               if (E)
                 return E;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return T[B];
-          }, A = (w, I, T) => {
-            const N = w(u), B = w(a), D = d(B, N == null ? void 0 : N.arr).keyList.indexOf(k);
+            return N[B];
+          }, A = (w, I, N) => {
+            const j = w(u), B = w(a), D = d(B, j == null ? void 0 : j.arr).keyList.indexOf(k);
             if (D < 0 || D >= B.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const j = isFunction(T) ? T(B[D]) : T;
-            Object.is(B[D], j) || I(a, [
+            const T = isFunction(N) ? N(B[D]) : N;
+            Object.is(B[D], T) || I(a, [
               ...B.slice(0, D),
-              j,
+              T,
               ...B.slice(D + 1)
             ]);
           };
@@ -1399,12 +1399,12 @@ const useUndoManager = () => {
   return {
     moveBlocks: (k, S, C) => {
       const A = map(k, (I) => {
-        const N = l.find((D) => D._id === I)._parent || null, E = l.filter((D) => N ? D._parent === N : !D._parent).map((D) => D._id).indexOf(I);
-        return { _id: I, oldParent: N, oldPosition: E };
+        const j = l.find((D) => D._id === I)._parent || null, E = l.filter((D) => j ? D._parent === j : !D._parent).map((D) => D._id).indexOf(I);
+        return { _id: I, oldParent: j, oldPosition: E };
       }), w = A.find(({ _id: I }) => I === k[0]);
       w && w.oldParent === S && w.oldPosition === C || (p(k, S, C), a({
-        undo: () => each(A, ({ _id: I, oldParent: T, oldPosition: N }) => {
-          p([I], T, N);
+        undo: () => each(A, ({ _id: I, oldParent: N, oldPosition: j }) => {
+          p([I], N, j);
         }),
         redo: () => p(k, S, C)
       }));
@@ -1430,8 +1430,8 @@ const useUndoManager = () => {
       else {
         const w = keys(S);
         A = map(k, (I) => {
-          const T = l.find((B) => B._id === I), N = { _id: I };
-          return each(w, (B) => N[B] = T[B]), N;
+          const N = l.find((B) => B._id === I), j = { _id: I };
+          return each(w, (B) => j[B] = N[B]), j;
         });
       }
       m(map(k, (w) => ({ _id: w, ...S }))), a({
@@ -1451,8 +1451,8 @@ const useUndoManager = () => {
     updateMultipleBlocksProps: (k) => {
       let S = [];
       S = map(k, (C) => {
-        const A = keys(C), w = l.find((T) => T._id === C._id), I = {};
-        return each(A, (T) => I[T] = w[T]), I;
+        const A = keys(C), w = l.find((N) => N._id === C._id), I = {};
+        return each(A, (N) => I[N] = w[N]), I;
       }), m(k), a({
         undo: () => m(S),
         redo: () => m(k)
@@ -2999,18 +2999,18 @@ const getBlockWithChildren = (a, l) => {
         if (u) {
           l(!0), d(null);
           try {
-            const C = f === g ? "" : f, A = b === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(v, h)), f) : [y(v, h)], w = await u(b, addLangToPrompt(k, x, b), A, C), { blocks: I, error: T } = w;
-            if (T) {
-              d(T);
+            const C = f === g ? "" : f, A = b === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(v, h)), f) : [y(v, h)], w = await u(b, addLangToPrompt(k, x, b), A, C), { blocks: I, error: N } = w;
+            if (N) {
+              d(N);
               return;
             }
             if (b === "styles") {
-              const N = I.map((B) => {
+              const j = I.map((B) => {
                 for (const E in B)
                   E !== "_id" && (B[E] = `${STYLES_KEY},${B[E]}`);
                 return B;
               });
-              m(N);
+              m(j);
             } else
               p(I);
             S && S(w);
@@ -3665,8 +3665,8 @@ const useDnd = () => {
       b.preventDefault(), b.stopPropagation(), throttledDragOver(b);
     },
     onDrop: (b) => {
-      var T;
-      const v = dropTarget, S = getOrientation(v) === "vertical" ? b.clientY + ((T = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : T.scrollY) : b.clientX;
+      var N;
+      const v = dropTarget, S = getOrientation(v) === "vertical" ? b.clientY + ((N = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : N.scrollY) : b.clientX;
       dropIndex = calculateDropIndex(S, possiblePositions);
       const C = h, A = v.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
       if ((C == null ? void 0 : C._id) === A || !w) {
@@ -3851,7 +3851,7 @@ const useHandleCanvasDblClick = (a, l) => {
       heading: get(a, "fontFamily.heading"),
       body: get(a, "fontFamily.body")
     };
-    return v.filter((T) => T.family === w || T.family === I);
+    return v.filter((N) => N.family === w || N.family === I);
   }, [a == null ? void 0 : a.fontFamily, v]), C = useMemo(() => getThemeFontsLinkMarkup(filter(S, (w) => has(w, "url"))), [S]), A = useMemo(
     () => getThemeCustomFontFace(filter(S, (w) => has(w, "src"))),
     [S]
@@ -4016,37 +4016,37 @@ const getBlockRuntimeProps = memoize((a) => {
     m();
   }, [l, a, c, m]), u;
 }, getElementByStyleId = (a, l) => a.querySelector(`[data-style-id="${l}"]`), StaticCanvas = () => {
-  const [a] = useAtom$1(networkModeAtom), [l] = useCanvasDisplayWidth(), [, c] = useSelectedBlockIds(), d = useSelectedBlock(), [, u] = useHighlightBlockId(), p = useRef(null), m = useRef(null), [h, f] = useState({ width: 0, height: 0 }), g = useCanvasScale(h), [x, y] = useState([]), [, b] = useState([]), [, v] = useAtom$1(canvasIframeAtom), [k, S] = useSelectedStylingBlocks(), C = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), w = (N) => {
-    f((B) => ({ ...B, width: N }));
+  const [a] = useAtom$1(networkModeAtom), [l] = useCanvasDisplayWidth(), [, c] = useSelectedBlockIds(), d = useSelectedBlock(), [, u] = useHighlightBlockId(), p = useRef(null), m = useRef(null), [h, f] = useState({ width: 0, height: 0 }), g = useCanvasScale(h), [x, y] = useState([]), [, b] = useState([]), [, v] = useAtom$1(canvasIframeAtom), [k, S] = useSelectedStylingBlocks(), C = useBuilderProp("loading", !1), A = useBuilderProp("htmlDir", "ltr"), w = (j) => {
+    f((B) => ({ ...B, width: j }));
   };
   useEffect(() => {
     if (!m.current) return;
-    const { clientWidth: N, clientHeight: B } = m.current;
-    f({ width: N, height: B });
+    const { clientWidth: j, clientHeight: B } = m.current;
+    f({ width: j, height: B });
   }, [m, l]);
-  const I = (N, B = 0) => {
-    const { top: E } = N.getBoundingClientRect();
+  const I = (j, B = 0) => {
+    const { top: E } = j.getBoundingClientRect();
     return E + B >= 0 && E - B <= window.innerHeight;
   };
   useEffect(() => {
-    var N, B;
+    var j, B;
     if (d && d.type !== "Multiple" && p.current) {
       const E = getElementByDataBlockId(p.current.contentDocument, d._id);
-      E && (I(E) || (B = (N = p.current) == null ? void 0 : N.contentWindow) == null || B.scrollTo({ top: E.offsetTop, behavior: "smooth" }), y([E]));
+      E && (I(E) || (B = (j = p.current) == null ? void 0 : j.contentWindow) == null || B.scrollTo({ top: E.offsetTop, behavior: "smooth" }), y([E]));
     }
   }, [d]), useEffect(() => {
     if (!isEmpty(k) && p.current) {
-      const N = getElementByStyleId(
+      const j = getElementByStyleId(
         p.current.contentDocument,
         first(k).id
       );
-      b(N ? [N] : [null]);
+      b(j ? [j] : [null]);
     } else
       b([null]);
   }, [k]);
-  const T = useMemo(() => {
-    let N = IframeInitialContent;
-    return N = N.replace("__HTML_DIR__", A), a === "offline" && (N = N.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), N;
+  const N = useMemo(() => {
+    let j = IframeInitialContent;
+    return j = j.replace("__HTML_DIR__", A), a === "offline" && (j = j.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), j;
   }, [a, A]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsx(
     "div",
@@ -4065,7 +4065,7 @@ const getBlockRuntimeProps = memoize((a) => {
           id: "canvas-iframe",
           style: { ...g, ...isEmpty(g) ? { width: `${l}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: T,
+          initialContent: N,
           children: [
             /* @__PURE__ */ jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsx(
@@ -4569,10 +4569,10 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
       g.chain().deleteSelection().insertContent(b).run();
     else {
       const { state: C } = g, A = C.selection.from, w = C.doc.textBetween(Math.max(0, A - 1), A), I = C.doc.textBetween(A, Math.min(A + 1, C.doc.content.size));
-      let T = "";
-      A > 0 && w !== " " && !/[.,!?;:]/.test(w) && (T = " ");
       let N = "";
-      I && I !== " " && !/[.,!?;:]/.test(I) && (N = " "), g.chain().insertContent(T + b + N).run();
+      A > 0 && w !== " " && !/[.,!?;:]/.test(w) && (N = " ");
+      let j = "";
+      I && I !== " " && !/[.,!?;:]/.test(I) && (j = " "), g.chain().insertContent(N + b + j).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: a, onOpenChange: (y) => !y && l(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4654,68 +4654,68 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
   onChange: c
 }) => {
   var D;
-  const { t: d } = useTranslation(), u = useBuilderProp("searchPageTypeItems", (j, _) => []), [p, m] = useState(!1), [h, f] = useState(!1), [g, x] = useState("page"), [y, b] = useState(""), [v, k] = useState([]), [S, C] = useState(-1), A = useRef(null), w = (D = l == null ? void 0 : l.find((j) => j.key === g)) == null ? void 0 : D.name;
+  const { t: d } = useTranslation(), u = useBuilderProp("searchPageTypeItems", (T, _) => []), [p, m] = useState(!1), [h, f] = useState(!1), [g, x] = useState("page"), [y, b] = useState(""), [v, k] = useState([]), [S, C] = useState(-1), A = useRef(null), w = (D = l == null ? void 0 : l.find((T) => T.key === g)) == null ? void 0 : D.name;
   useEffect(() => {
     if (b(""), k([]), C(-1), f(!1), !a || p || !startsWith(a, "pageType:")) return;
-    const j = split(a, ":"), _ = get(j, 1, "page") || "page";
+    const T = split(a, ":"), _ = get(T, 1, "page") || "page";
     x(_), (async () => {
-      const P = await u(_, [get(j, 2, "page")]);
+      const P = await u(_, [get(T, 2, "page")]);
       P && Array.isArray(P) && b(get(P, [0, "name"], ""));
     })();
   }, [a]);
   const I = useDebouncedCallback(
-    async (j) => {
-      if (isEmpty(j))
+    async (T) => {
+      if (isEmpty(T))
         k([]);
       else {
-        const _ = await u(g, j);
+        const _ = await u(g, T);
         k(_);
       }
       m(!1), C(-1);
     },
     [g],
     300
-  ), T = (j) => {
-    const _ = ["pageType", g, j.id];
-    _[1] && (c(_.join(":")), b(j.name), f(!1), k([]), C(-1));
-  }, N = (j) => {
-    switch (j.key) {
+  ), N = (T) => {
+    const _ = ["pageType", g, T.id];
+    _[1] && (c(_.join(":")), b(T.name), f(!1), k([]), C(-1));
+  }, j = (T) => {
+    switch (T.key) {
       case "ArrowDown":
-        j.preventDefault(), C((_) => _ < v.length - 1 ? _ + 1 : _);
+        T.preventDefault(), C((_) => _ < v.length - 1 ? _ + 1 : _);
         break;
       case "ArrowUp":
-        j.preventDefault(), C((_) => _ > 0 ? _ - 1 : _);
+        T.preventDefault(), C((_) => _ > 0 ? _ - 1 : _);
         break;
       case "Enter":
-        if (j.preventDefault(), v.length === 0) return;
-        S >= 0 && T(v[S]);
+        if (T.preventDefault(), v.length === 0) return;
+        S >= 0 && N(v[S]);
         break;
       case "Escape":
-        j.preventDefault(), B();
+        T.preventDefault(), B();
         break;
     }
   };
   useEffect(() => {
     if (S >= 0 && A.current) {
-      const j = A.current.children[S];
-      j == null || j.scrollIntoView({ block: "nearest" });
+      const T = A.current.children[S];
+      T == null || T.scrollIntoView({ block: "nearest" });
     }
   }, [S]);
   const B = () => {
     b(""), k([]), C(-1), f(!1), c("");
-  }, E = (j) => {
-    b(j), f(!isEmpty(j)), m(!0), I(j);
+  }, E = (T) => {
+    b(T), f(!isEmpty(T)), m(!0), I(T);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: g, onChange: (j) => x(j.target.value), children: map(l, (j) => /* @__PURE__ */ jsx("option", { value: j.key, children: j.name }, j.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: g, onChange: (T) => x(T.target.value), children: map(l, (T) => /* @__PURE__ */ jsx("option", { value: T.key, children: T.name }, T.key)) }),
     g && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: y,
-          onChange: (j) => E(j.target.value),
-          onKeyDown: N,
+          onChange: (T) => E(T.target.value),
+          onKeyDown: j,
           placeholder: d(`Search ${w ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
@@ -4730,22 +4730,22 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
       ' "',
       y,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(v == null ? void 0 : v.slice(0, 20), (j, _) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(v == null ? void 0 : v.slice(0, 20), (T, _) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => T(j),
-        className: `cursor-pointer p-2 text-xs ${a != null && a.includes(j.id) ? "bg-blue-200" : _ === S ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => N(T),
+        className: `cursor-pointer p-2 text-xs ${a != null && a.includes(T.id) ? "bg-blue-200" : _ === S ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          j.name,
+          T.name,
           " ",
-          j.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          T.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            j.slug,
+            T.slug,
             " )"
           ] })
         ]
       },
-      j.id
+      T.id
     )) }) })
   ] });
 }, LinkField = ({ schema: a, formData: l, onChange: c }) => {
@@ -4965,7 +4965,7 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
   formData: x,
   onChange: y
 }) => {
-  const { selectedLang: b, fallbackLang: v, languages: k } = useLanguages(), S = isEmpty(k) ? "" : isEmpty(b) ? v : b, C = get(LANGUAGES, S, S), A = usePageExternalData(), w = useSelectedBlock(), I = useRegisteredChaiBlocks(), T = get(I, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [N, B] = useState(null), E = useCallback(
+  const { selectedLang: b, fallbackLang: v, languages: k } = useLanguages(), S = isEmpty(k) ? "" : isEmpty(b) ? v : b, C = get(LANGUAGES, S, S), A = usePageExternalData(), w = useSelectedBlock(), I = useRegisteredChaiBlocks(), N = get(I, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [j, B] = useState(null), E = useCallback(
     (_) => {
       const P = (O) => /[.,!?;:]/.test(O), L = (O, Z, V) => {
         let $ = "", F = "";
@@ -5012,9 +5012,9 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
   if (h)
     return null;
   if (g.type === "boolean") return /* @__PURE__ */ jsx("div", { className: l, children: d });
-  const j = T == null ? void 0 : T.includes(a.replace("root.", ""));
+  const T = N == null ? void 0 : N.includes(a.replace("root.", ""));
   if (g.type === "array") {
-    const _ = N === a;
+    const _ = j === a;
     return /* @__PURE__ */ jsxs("div", { className: `${l} relative`, children: [
       g.title && /* @__PURE__ */ jsxs(
         "label",
@@ -5044,7 +5044,7 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
       /* @__PURE__ */ jsxs("label", { htmlFor: a, className: g.type === "object" ? "pb-2" : "", children: [
         c,
         " ",
-        j && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+        T && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
           " ",
           C
         ] }),
@@ -5149,27 +5149,27 @@ const MenuBar = ({ editor: a, onExpand: l }) => {
   }), d;
 };
 function BlockSettings() {
-  const { selectedLang: a } = useLanguages(), l = useSelectedBlock(), c = useUpdateBlocksPropsRealtime(), d = useUpdateBlocksProps(), u = getRegisteredChaiBlock(l == null ? void 0 : l._type), p = formDataWithSelectedLang(l, a, u), [m, h] = useState(p), [f, g] = useState(!1), x = useWrapperBlock(), y = getRegisteredChaiBlock(x == null ? void 0 : x._type), b = formDataWithSelectedLang(x, a, y), v = ({ formData: N }, B, E) => {
-    B && (m == null ? void 0 : m._id) === l._id && d([l._id], { [B]: get(N, B) }, E);
+  const { selectedLang: a } = useLanguages(), l = useSelectedBlock(), c = useUpdateBlocksPropsRealtime(), d = useUpdateBlocksProps(), u = getRegisteredChaiBlock(l == null ? void 0 : l._type), p = formDataWithSelectedLang(l, a, u), [m, h] = useState(p), [f, g] = useState(!1), x = useWrapperBlock(), y = getRegisteredChaiBlock(x == null ? void 0 : x._type), b = formDataWithSelectedLang(x, a, y), v = ({ formData: j }, B, E) => {
+    B && (m == null ? void 0 : m._id) === l._id && d([l._id], { [B]: get(j, B) }, E);
   }, k = useCallback(
-    debounce(({ formData: N }, B, E) => {
-      v({ formData: N }, B, E), h(N);
+    debounce(({ formData: j }, B, E) => {
+      v({ formData: j }, B, E), h(j);
     }, 1500),
     [l == null ? void 0 : l._id, a]
-  ), S = ({ formData: N }, B) => {
-    B && (c([l._id], { [B]: get(N, B) }), k({ formData: N }, B, { [B]: get(m, B) }));
-  }, C = ({ formData: N }, B) => {
-    B && (c([x._id], { [B]: get(N, B) }), k({ formData: N }, B, { [B]: get(m, B) }));
+  ), S = ({ formData: j }, B) => {
+    B && (c([l._id], { [B]: get(j, B) }), k({ formData: j }, B, { [B]: get(m, B) }));
+  }, C = ({ formData: j }, B) => {
+    B && (c([x._id], { [B]: get(j, B) }), k({ formData: j }, B, { [B]: get(m, B) }));
   };
   keys(get(p, "_bindings", {}));
   const { schema: A, uiSchema: w } = useMemo(() => {
-    const N = l == null ? void 0 : l._type;
-    if (N)
-      return getBlockFormSchemas(N);
-  }, [l]), { wrapperSchema: I, wrapperUiSchema: T } = useMemo(() => {
+    const j = l == null ? void 0 : l._type;
+    if (j)
+      return getBlockFormSchemas(j);
+  }, [l]), { wrapperSchema: I, wrapperUiSchema: N } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const N = x == null ? void 0 : x._type, { schema: B = {}, uiSchema: E = {} } = getBlockFormSchemas(N);
+    const j = x == null ? void 0 : x._type, { schema: B = {}, uiSchema: E = {} } = getBlockFormSchemas(j);
     return { wrapperSchema: B, wrapperUiSchema: E };
   }, [x]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
@@ -5177,7 +5177,7 @@ function BlockSettings() {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => g((N) => !N),
+          onClick: () => g((j) => !j),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             f ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5199,7 +5199,7 @@ function BlockSettings() {
           onChange: C,
           formData: b,
           schema: I,
-          uiSchema: T
+          uiSchema: N
         }
       ) })
     ] }),
@@ -5499,7 +5499,7 @@ function ManualClasses() {
   const a = useRef(null), [l, c] = useState(""), [d, u] = useState(-1), p = useFuseSearch(), { t: m } = useTranslation(), [h] = useSelectedStylingBlocks(), f = useSelectedBlock(), g = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [y] = useSelectedBlockIds(), b = useBuilderProp("askAiCallBack", null), [v, k] = useState(""), S = (L = first(h)) == null ? void 0 : L.prop, { classes: C } = getSplitChaiClasses(get(f, S, "")), A = C.split(" ").filter((R) => !isEmpty(R)), w = () => {
     const R = v.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(y, R, !0), k("");
-  }, [I, T] = useState([]), N = ({ value: R }) => {
+  }, [I, N] = useState([]), j = ({ value: R }) => {
     const M = R.trim().toLowerCase(), O = M.match(/.+:/g);
     let Z = [];
     if (O && O.length > 0) {
@@ -5510,10 +5510,10 @@ function ManualClasses() {
       }));
     } else
       Z = p.search(M);
-    return T(map(Z, "item"));
+    return N(map(Z, "item"));
   }, B = () => {
-    T([]);
-  }, E = (R) => R.name, D = (R) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: R.name }), j = useMemo(
+    N([]);
+  }, E = (R) => R.name, D = (R) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: R.name }), T = useMemo(
     () => ({
       ref: a,
       autoComplete: "off",
@@ -5562,11 +5562,11 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: I,
-          onSuggestionsFetchRequested: N,
+          onSuggestionsFetchRequested: j,
           onSuggestionsClearRequested: B,
           getSuggestionValue: E,
           renderSuggestion: D,
-          inputProps: j,
+          inputProps: T,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6248,17 +6248,17 @@ const COLOR_PROP = {
   },
   d
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (a) => {
-  const [l, c] = useState(!1), [d, u] = useState(""), { currentClass: p, onChange: m, classPrefix: h, cssProperty: f, units: g, negative: x } = a, [y, b] = useState(f != null && f.toLowerCase().includes("width") ? "%" : g[0]), [v, k] = useState(!1), [S, C] = useState(""), [A, w] = useState(!1), [I, T] = useState(!1);
+  const [l, c] = useState(!1), [d, u] = useState(""), { currentClass: p, onChange: m, classPrefix: h, cssProperty: f, units: g, negative: x } = a, [y, b] = useState(f != null && f.toLowerCase().includes("width") ? "%" : g[0]), [v, k] = useState(!1), [S, C] = useState(""), [A, w] = useState(!1), [I, N] = useState(!1);
   useEffect(() => {
-    const { value: j, unit: _ } = getClassValueAndUnit(p);
+    const { value: T, unit: _ } = getClassValueAndUnit(p);
     if (_ === "") {
-      u(j), b(f != null && f.toLowerCase().includes("width") ? "%" : first(g));
+      u(T), b(f != null && f.toLowerCase().includes("width") ? "%" : first(g));
       return;
     }
-    b(_), u(_ === "class" || isEmpty(j) ? "" : j);
+    b(_), u(_ === "class" || isEmpty(T) ? "" : T);
   }, [p, f, g]);
-  const N = useThrottledCallback((j) => m(j), [m], THROTTLE_TIME), B = useThrottledCallback((j) => m(j, !1), [m], THROTTLE_TIME), E = useCallback(
-    (j = !1) => {
+  const j = useThrottledCallback((T) => m(T), [m], THROTTLE_TIME), B = useThrottledCallback((T) => m(T, !1), [m], THROTTLE_TIME), E = useCallback(
+    (T = !1) => {
       const _ = getUserInputValues(`${d}`, g);
       if (get(_, "error", !1)) {
         k(!0);
@@ -6266,32 +6266,32 @@ const COLOR_PROP = {
       }
       const P = get(_, "unit") !== "" ? get(_, "unit") : y;
       if (P === "auto" || P === "none") {
-        N(`${h}${P}`);
+        j(`${h}${P}`);
         return;
       }
       if (get(_, "value") === "")
         return;
       const R = `${get(_, "value", "").startsWith("-") ? "-" : ""}${h}[${get(_, "value", "").replace("-", "")}${P === "-" ? "" : P}]`;
-      j ? B(R) : N(R);
+      T ? B(R) : j(R);
     },
-    [N, B, d, y, h, g]
+    [j, B, d, y, h, g]
   ), D = useCallback(
-    (j) => {
+    (T) => {
       const _ = getUserInputValues(`${d}`, g);
       if (get(_, "error", !1)) {
         k(!0);
         return;
       }
-      if (j === "auto" || j === "none") {
-        N(`${h}${j}`);
+      if (T === "auto" || T === "none") {
+        j(`${h}${T}`);
         return;
       }
       if (get(_, "value") === "")
         return;
-      const P = get(_, "unit") !== "" ? get(_, "unit") : j, R = `${get(_, "value", "").startsWith("-") ? "-" : ""}${h}[${get(_, "value", "").replace("-", "")}${P === "-" ? "" : P}]`;
-      N(R);
+      const P = get(_, "unit") !== "" ? get(_, "unit") : T, R = `${get(_, "value", "").startsWith("-") ? "-" : ""}${h}[${get(_, "value", "").replace("-", "")}${P === "-" ? "" : P}]`;
+      j(R);
     },
-    [N, d, h, g]
+    [j, d, h, g]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: y === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -6312,29 +6312,29 @@ const COLOR_PROP = {
         "input",
         {
           readOnly: y === "class",
-          onKeyPress: (j) => {
-            j.key === "Enter" && E();
+          onKeyPress: (T) => {
+            T.key === "Enter" && E();
           },
-          onKeyDown: (j) => {
-            if (j.keyCode !== 38 && j.keyCode !== 40)
+          onKeyDown: (T) => {
+            if (T.keyCode !== 38 && T.keyCode !== 40)
               return;
-            j.preventDefault(), T(!0);
-            const _ = parseInt$1(j.target.value);
+            T.preventDefault(), N(!0);
+            const _ = parseInt$1(T.target.value);
             let P = isNaN$1(_) ? 0 : _;
-            j.keyCode === 38 && (P += 1), j.keyCode === 40 && (P -= 1);
+            T.keyCode === 38 && (P += 1), T.keyCode === 40 && (P -= 1);
             const L = `${P}`, M = `${L.startsWith("-") ? "-" : ""}${h}[${L.replace("-", "")}${y === "-" ? "" : y}]`;
             B(M);
           },
-          onKeyUp: (j) => {
-            I && (j.preventDefault(), T(!1));
+          onKeyUp: (T) => {
+            I && (T.preventDefault(), N(!1));
           },
           onBlur: () => E(),
-          onChange: (j) => {
-            k(!1), u(j.target.value);
+          onChange: (T) => {
+            k(!1), u(T.target.value);
           },
-          onClick: (j) => {
+          onClick: (T) => {
             var _;
-            (_ = j == null ? void 0 : j.target) == null || _.select(), c(!1);
+            (_ = T == null ? void 0 : T.target) == null || _.select(), c(!1);
           },
           value: A ? S : d,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -6361,8 +6361,8 @@ const COLOR_PROP = {
           {
             units: g,
             current: y,
-            onSelect: (j) => {
-              c(!1), b(j), D(j);
+            onSelect: (T) => {
+              c(!1), b(T), D(T);
             }
           }
         ) }) })
@@ -6372,17 +6372,17 @@ const COLOR_PROP = {
       DragStyleButton,
       {
         onDragStart: () => w(!0),
-        onDragEnd: (j) => {
-          if (C(() => ""), w(!1), isEmpty(j))
+        onDragEnd: (T) => {
+          if (C(() => ""), w(!1), isEmpty(T))
             return;
-          const _ = `${j}`, L = `${_.startsWith("-") ? "-" : ""}${h}[${_.replace("-", "")}${y === "-" ? "" : y}]`;
-          N(L);
+          const _ = `${T}`, L = `${_.startsWith("-") ? "-" : ""}${h}[${_.replace("-", "")}${y === "-" ? "" : y}]`;
+          j(L);
         },
-        onDrag: (j) => {
-          if (isEmpty(j))
+        onDrag: (T) => {
+          if (isEmpty(T))
             return;
-          C(j);
-          const _ = `${j}`, L = `${_.startsWith("-") ? "-" : ""}${h}[${_.replace("-", "")}${y === "-" ? "" : y}]`;
+          C(T);
+          const _ = `${T}`, L = `${_.startsWith("-") ? "-" : ""}${h}[${_.replace("-", "")}${y === "-" ? "" : y}]`;
           B(L);
         },
         currentValue: d,
@@ -6484,8 +6484,8 @@ const COLOR_PROP = {
     (B, E = !0) => {
       const D = { dark: f, mq: x, mod: g, cls: B, property: u, fullCls: "" };
       (f || g !== "") && (D.mq = "xs");
-      const j = generateFullClsName(D);
-      b(k, [j], E);
+      const T = generateFullClsName(D);
+      b(k, [T], E);
     },
     [k, f, x, g, u, b]
   ), A = useCallback(() => {
@@ -6494,7 +6494,7 @@ const COLOR_PROP = {
   useEffect(() => {
     p(w, y);
   }, [w, p, y]);
-  const [, , I] = useScreenSizeWidth(), T = useCallback(
+  const [, , I] = useScreenSizeWidth(), N = useCallback(
     (B) => {
       I({
         xs: 400,
@@ -6506,9 +6506,9 @@ const COLOR_PROP = {
       }[B]);
     },
     [I]
-  ), N = get(y, "dark", null) === f && get(y, "mod", null) === g && get(y, "mq", null) === x;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: y && N, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${y && !N ? "text-foreground" : ""}`, children: l(d) }) }),
+  ), j = get(y, "dark", null) === f && get(y, "mod", null) === g && get(y, "mq", null) === x;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: y && j, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${y && !j ? "text-foreground" : ""}`, children: l(d) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         c === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6527,7 +6527,7 @@ const COLOR_PROP = {
         c === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: u, onChange: C }),
         c === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: d, property: u, onChange: C })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${S ? "visible" : "invisible"}`, children: N ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && y ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${S ? "visible" : "invisible"}`, children: j ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : w && y ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6547,7 +6547,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => T(get(y, "mq")),
+              onClick: () => N(get(y, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6960,7 +6960,7 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (a, l) => {
     ...getAttrs(c),
     ...getStyles(c)
   }, c.attributes) {
-    const I = c.attributes.find((T) => includes(NAME_ATTRIBUTES, T.key));
+    const I = c.attributes.find((N) => includes(NAME_ATTRIBUTES, N.key));
     I && (d._name = I.value);
   }
   if (p)
@@ -6978,29 +6978,29 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (a, l) => {
     ];
     d = {
       ...d,
-      href: ((y = u.find((T) => T.key === "href")) == null ? void 0 : y.value) || "",
-      hrefType: ((b = u.find((T) => T.key === "data-vbtype")) == null ? void 0 : b.value) || "video",
-      autoplay: ((v = u.find((T) => T.key === "data-autoplay")) == null ? void 0 : v.value) === "true" ? "true" : "false",
-      maxWidth: ((S = (k = u.find((T) => T.key === "data-maxwidth")) == null ? void 0 : k.value) == null ? void 0 : S.replace("px", "")) || "",
-      backdropColor: ((C = u.find((T) => T.key === "data-overlay")) == null ? void 0 : C.value) || "",
-      galleryName: ((A = u.find((T) => T.key === "data-gall")) == null ? void 0 : A.value) || ""
-    }, forEach(I, (T) => {
-      has(d, `styles_attrs.${T}`) && delete d.styles_attrs[T];
+      href: ((y = u.find((N) => N.key === "href")) == null ? void 0 : y.value) || "",
+      hrefType: ((b = u.find((N) => N.key === "data-vbtype")) == null ? void 0 : b.value) || "video",
+      autoplay: ((v = u.find((N) => N.key === "data-autoplay")) == null ? void 0 : v.value) === "true" ? "true" : "false",
+      maxWidth: ((S = (k = u.find((N) => N.key === "data-maxwidth")) == null ? void 0 : k.value) == null ? void 0 : S.replace("px", "")) || "",
+      backdropColor: ((C = u.find((N) => N.key === "data-overlay")) == null ? void 0 : C.value) || "",
+      galleryName: ((A = u.find((N) => N.key === "data-gall")) == null ? void 0 : A.value) || ""
+    }, forEach(I, (N) => {
+      has(d, `styles_attrs.${N}`) && delete d.styles_attrs[N];
     });
   }
   if (h && (delete d.styles_attrs, d.showDropdown = !1), g && delete d.styles_attrs, f) {
     delete d.styles_attrs;
-    const I = filter(c.children || [], (N) => (N == null ? void 0 : N.tagName) !== "span");
+    const I = filter(c.children || [], (j) => (j == null ? void 0 : j.tagName) !== "span");
     d.content = getTextContent(I);
-    const T = find(
+    const N = find(
       c.children || [],
-      (N) => (N == null ? void 0 : N.tagName) === "span" && some(N.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg")
+      (j) => (j == null ? void 0 : j.tagName) === "span" && some(j.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg")
     );
-    if (T) {
-      const N = find(T.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg");
-      if (N) {
-        d.icon = stringify([N]);
-        const { height: B, width: E } = getSvgDimensions(N, "16px", "16px");
+    if (N) {
+      const j = find(N.children || [], (B) => (B == null ? void 0 : B.tagName) === "svg");
+      if (j) {
+        d.icon = stringify([j]);
+        const { height: B, width: E } = getSvgDimensions(j, "16px", "16px");
         d.iconHeight = B, d.iconWidth = E;
       }
     }
@@ -7013,8 +7013,8 @@ const ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (a, l) => {
     const I = stringify([c]);
     return hasVideoEmbed(I) && (set(d, "_type", "Video"), set(d, "url", getVideoURLFromHTML(I)), set(d, "styles", `${STYLES_KEY},`), set(d, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), d.content = I, [d];
   } else if (c.tagName === "svg") {
-    const I = find(c.attributes, { key: "height" }), T = find(c.attributes, { key: "width" }), N = get(I, "value") ? `[${get(I, "value")}px]` : "24px", B = get(T, "value") ? `[${get(T, "value")}px]` : "24px", E = get(find(c.attributes, { key: "class" }), "value", "w-full h-full");
-    return d.styles = `${STYLES_KEY}, ${cn$1(`w-${B} h-${N}`, E)}`.trim(), c.attributes = filter(c.attributes, (D) => !includes(["style", "width", "height", "class"], D.key)), d.icon = stringify([c]), [d];
+    const I = find(c.attributes, { key: "height" }), N = find(c.attributes, { key: "width" }), j = get(I, "value") ? `[${get(I, "value")}px]` : "24px", B = get(N, "value") ? `[${get(N, "value")}px]` : "24px", E = get(find(c.attributes, { key: "class" }), "value", "w-full h-full");
+    return d.styles = `${STYLES_KEY}, ${cn$1(`w-${B} h-${j}`, E)}`.trim(), c.attributes = filter(c.attributes, (D) => !includes(["style", "width", "height", "class"], D.key)), d.icon = stringify([c]), [d];
   } else if (c.tagName == "option" && l && ((w = l.block) == null ? void 0 : w._type) === "Select")
     return l.block.options.push({
       label: getTextContent(c.children),
@@ -7230,15 +7230,15 @@ const BlockCard = ({
           const w = await m(l, a);
           let I = c;
           if (k(first(w)) && (I = null), !isEmpty(w)) {
-            const T = { blocks: w, uiLibrary: !0, parent: I };
-            if (A.dataTransfer.setData("text/plain", JSON.stringify(T)), a.preview) {
-              const N = new Image();
-              N.src = a.preview, N.onload = () => {
-                A.dataTransfer.setDragImage(N, 0, 0);
+            const N = { blocks: w, uiLibrary: !0, parent: I };
+            if (A.dataTransfer.setData("text/plain", JSON.stringify(N)), a.preview) {
+              const j = new Image();
+              j.src = a.preview, j.onload = () => {
+                A.dataTransfer.setDragImage(j, 0, 0);
               };
             } else
               A.dataTransfer.setDragImage(new Image(), 0, 0);
-            v(T), setTimeout(() => {
+            v(N), setTimeout(() => {
               g([]), x(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7334,8 +7334,8 @@ const BlockCard = ({
     )
   ] }) }) });
 }, UILibrariesPanel = ({ parentId: a, position: l }) => /* @__PURE__ */ jsx(UILibrarySection, { parentId: a, position: l }), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: a, blocks: l, parentId: c, position: d, gridCols: u = "grid-cols-4" }) => {
-  var j;
-  const { t: p } = useTranslation(), [m] = useBlocksStore(), [h, f] = useState(""), g = useRef(null), [x] = useAtom$1(addBlockTabAtom), y = (j = find(m, (_) => _._id === c)) == null ? void 0 : j._type, [b, v] = useState("all"), [k, S] = useState(null), C = useRef(null);
+  var T;
+  const { t: p } = useTranslation(), [m] = useBlocksStore(), [h, f] = useState(""), g = useRef(null), [x] = useAtom$1(addBlockTabAtom), y = (T = find(m, (_) => _._id === c)) == null ? void 0 : T._type, [b, v] = useState("all"), [k, S] = useState(null), C = useRef(null);
   useEffect(() => {
     const _ = setTimeout(() => {
       var P;
@@ -7355,7 +7355,7 @@ const BlockCard = ({
     S(null), C.current && C.current.cancel();
   }, []), I = useCallback((_) => {
     C.current && C.current.cancel(), v(_), S(null);
-  }, []), T = useMemo(
+  }, []), N = useMemo(
     () => h ? values(l).filter(
       (_) => {
         var P, L;
@@ -7363,15 +7363,15 @@ const BlockCard = ({
       }
     ) : l,
     [l, h]
-  ), N = useMemo(
+  ), j = useMemo(
     () => h ? a.filter(
-      (_) => reject(filter(values(T), { group: _ }), { hidden: !0 }).length > 0
+      (_) => reject(filter(values(N), { group: _ }), { hidden: !0 }).length > 0
     ) : a.filter((_) => reject(filter(values(l), { group: _ }), { hidden: !0 }).length > 0),
-    [l, T, a, h]
+    [l, N, a, h]
   ), B = useMemo(
-    () => sortBy(N, (_) => CORE_GROUPS.indexOf(_) === -1 ? 99 : CORE_GROUPS.indexOf(_)),
-    [N]
-  ), E = useMemo(() => b === "all" ? T : filter(values(T), { group: b }), [T, b]), D = useMemo(() => b === "all" ? B : [b], [B, b]);
+    () => sortBy(j, (_) => CORE_GROUPS.indexOf(_) === -1 ? 99 : CORE_GROUPS.indexOf(_)),
+    [j]
+  ), E = useMemo(() => b === "all" ? N : filter(values(N), { group: b }), [N, b]), D = useMemo(() => b === "all" ? B : [b], [B, b]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7409,7 +7409,7 @@ const BlockCard = ({
           `sidebar-${_}`
         ))
       ] }) }) }),
-      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: N.length === 0 && h ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: j.length === 0 && h ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         p("No blocks found matching"),
         ' "',
         h,
@@ -7738,17 +7738,17 @@ const selectParent = (a, l) => {
   let f = null;
   const g = a.children.length > 0, { highlightBlock: x, clearHighlight: y } = useBlockHighlight(), { id: b, data: v, isSelected: k, willReceiveDrop: S, isDragging: C, isEditing: A, handleClick: w } = a, I = (Z) => {
     Z.stopPropagation(), !u.includes(b) && a.toggle();
-  }, T = (Z) => {
-    Z.isInternal && (f = Z.isOpen, Z.isOpen && Z.close());
   }, N = (Z) => {
+    Z.isInternal && (f = Z.isOpen, Z.isOpen && Z.close());
+  }, j = (Z) => {
     Z.isInternal && f !== null && (f ? Z.open() : Z.close(), f = null);
   }, [B, E] = useAtom$1(currentAddSelection), D = () => {
     var Z;
-    j(), a.parent.isSelected || E((Z = a == null ? void 0 : a.parent) == null ? void 0 : Z.id);
-  }, j = () => {
+    T(), a.parent.isSelected || E((Z = a == null ? void 0 : a.parent) == null ? void 0 : Z.id);
+  }, T = () => {
     E(null);
   }, _ = (Z) => {
-    j(), Z.stopPropagation(), !a.isOpen && !u.includes(b) && a.toggle(), w(Z);
+    T(), Z.stopPropagation(), !a.isOpen && !u.includes(b) && a.toggle(), w(Z);
   };
   useEffect(() => {
     const Z = setTimeout(() => {
@@ -7770,7 +7770,7 @@ const selectParent = (a, l) => {
     const U = F.getBoundingClientRect(), H = m.getBoundingClientRect();
     U.top >= H.top && U.left >= H.left && U.bottom <= H.bottom && U.right <= H.right || ($.documentElement.scrollTop = F.offsetTop - H.top);
   }, R = (Z) => {
-    j();
+    T();
     const V = get(a, "parent.id");
     V !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: V, position: Z }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: Z });
   };
@@ -7802,8 +7802,8 @@ const selectParent = (a, l) => {
       style: l,
       "data-node-id": b,
       ref: u.includes(b) ? null : c,
-      onDragStart: () => T(a),
-      onDragEnd: () => N(a),
+      onDragStart: () => N(a),
+      onDragEnd: () => j(a),
       onDragOver: (Z) => {
         Z.preventDefault(), L(b, "yes");
       },
@@ -7821,7 +7821,7 @@ const selectParent = (a, l) => {
               Z.stopPropagation(), R(a.childIndex);
             },
             onMouseEnter: D,
-            onMouseLeave: j,
+            onMouseLeave: T,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -10979,17 +10979,17 @@ const saveToLibraryModalAtom = atom$1({
     } catch (R) {
       toast.error(c("Failed to save to library")), console.error("Error saving to library:", R);
     }
-  }, [w, I] = useState([]), [T, N] = useState(""), [B, E] = useState(!1), D = (L) => {
+  }, [w, I] = useState([]), [N, j] = useState(""), [B, E] = useState(!1), D = (L) => {
     g.setValue("group", L);
-  }, j = () => {
+  }, T = () => {
     E(!0);
   }, _ = () => {
-    if (T) {
-      const L = T.toLowerCase().replace(/\s+/g, "-");
-      I([...w, { id: L, name: T }]), g.setValue("group", L), N(""), E(!1);
+    if (N) {
+      const L = N.toLowerCase().replace(/\s+/g, "-");
+      I([...w, { id: L, name: N }]), g.setValue("group", L), j(""), E(!1);
     }
   }, P = () => {
-    N(""), E(!1);
+    j(""), E(!1);
   };
   return /* @__PURE__ */ jsx(Dialog, { open: a.isOpen, onOpenChange: (L) => !L && l({ isOpen: !1, blockId: null }), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-4 sm:max-w-[450px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(DialogTitle, { children: c(h ? "Update Library Block" : "Save to Library") }) }),
@@ -11043,8 +11043,8 @@ const saveToLibraryModalAtom = atom$1({
                 {
                   className: "h-8",
                   placeholder: c("Enter new group name"),
-                  value: T,
-                  onChange: (R) => N(R.target.value)
+                  value: N,
+                  onChange: (R) => j(R.target.value)
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -11052,7 +11052,7 @@ const saveToLibraryModalAtom = atom$1({
                 {
                   type: "button",
                   onClick: _,
-                  disabled: !T,
+                  disabled: !N,
                   size: "sm",
                   className: "h-8",
                   children: c("Add")
@@ -11089,7 +11089,7 @@ const saveToLibraryModalAtom = atom$1({
                   type: "button",
                   variant: "outline",
                   className: "h-8 whitespace-nowrap text-xs",
-                  onClick: j,
+                  onClick: T,
                   size: "sm",
                   children: c("Create new")
                 }
@@ -11459,10 +11459,10 @@ const saveToLibraryModalAtom = atom$1({
         ColorPickerInput,
         {
           value: I,
-          onChange: (T) => S(w, T)
+          onChange: (N) => S(w, N)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((T) => T.charAt(0).toUpperCase() + T.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight text-slate-600", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((N) => N.charAt(0).toUpperCase() + N.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
     ] }, w);
   }) });
   return m("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
@@ -12219,7 +12219,10 @@ const FEATURE_TOGGLES = {
   }, [a, l, c]);
 }, CHAI_BUILDER_PANELS = {}, registerChaiSidebarPanel = (a, l) => {
   has(CHAI_BUILDER_PANELS, a) && console.warn(`Panel ${a} already registered. Overriding...`), set(CHAI_BUILDER_PANELS, a, { id: a, ...l });
-}, useChaiSidebarPanels = (a) => useMemo(() => filter(values(CHAI_BUILDER_PANELS), (l) => l.position === a), [a]), DefaultTopBar = () => /* @__PURE__ */ jsx("div", { children: "TopBar" }), TOP_BAR = {
+}, useChaiSidebarPanels = (a) => useMemo(
+  () => filter(values(CHAI_BUILDER_PANELS), (l) => l.position === a),
+  [a]
+), DefaultTopBar = () => /* @__PURE__ */ jsx("div", { children: "TopBar" }), TOP_BAR = {
   component: DefaultTopBar
 }, registerChaiTopBar = (a) => {
   TOP_BAR.component = a;
@@ -12262,9 +12265,9 @@ function AIChatPanel() {
     const A = (w = C.target.files) == null ? void 0 : w[0];
     if (A) {
       const I = new FileReader();
-      I.onload = (T) => {
-        var N;
-        h((N = T.target) == null ? void 0 : N.result);
+      I.onload = (N) => {
+        var j;
+        h((j = N.target) == null ? void 0 : j.result);
       }, I.readAsDataURL(A);
     }
   }, k = () => {
@@ -12473,7 +12476,7 @@ const AiAssistant = () => {
       c(B), u(d), m(""), f(""), b("");
     }
   }, A = (B) => {
-    const E = d.filter((D, j) => j !== B);
+    const E = d.filter((D, T) => T !== B);
     c(E), u(E);
   }, w = (B) => {
     x(B), m(d[B].key), f(d[B].value);
@@ -12486,9 +12489,9 @@ const AiAssistant = () => {
       const B = [...d];
       B[g] = { key: p, value: h }, c(B), u(B), x(null), m(""), f(""), b("");
     }
-  }, T = (B) => {
+  }, N = (B) => {
     B.key === "Enter" && !B.shiftKey && (B.preventDefault(), g !== null ? I() : C());
-  }, N = useCallback((B) => {
+  }, j = useCallback((B) => {
     const E = (_) => /[.,!?;:]/.test(_), D = (_, P, L) => {
       let R = "", M = "";
       const O = P > 0 ? _[P - 1] : "", Z = P < _.length ? _[P] : "";
@@ -12497,9 +12500,9 @@ const AiAssistant = () => {
         prefixLength: R.length,
         suffixLength: M.length
       };
-    }, j = k.current;
-    if (j) {
-      const _ = j.selectionStart || 0, P = j.value || "", L = j.selectionEnd || _;
+    }, T = k.current;
+    if (T) {
+      const _ = T.selectionStart || 0, P = T.value || "", L = T.selectionEnd || _;
       if (L > _) {
         const V = `{{${B}}}`, { text: $ } = D(P, _, V), F = P.slice(0, _) + $ + P.slice(L);
         f(F);
@@ -12539,7 +12542,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(S) && /* @__PURE__ */ jsx(NestedPathSelector, { data: S, onSelect: N })
+                !isEmpty(S) && /* @__PURE__ */ jsx(NestedPathSelector, { data: S, onSelect: j })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -12552,7 +12555,7 @@ const AiAssistant = () => {
                   ref: k,
                   value: h,
                   onChange: (B) => f(B.target.value),
-                  onKeyDown: T,
+                  onKeyDown: N,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -12591,7 +12594,7 @@ const AiAssistant = () => {
     [a, u, p]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex-col gap-y-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AttrsEditor, { preloadedAttributes: l, onAttributesChange: m }) }) }) });
-});
+}), NoopComponent = () => null;
 function BlockAttributesToggle() {
   const { t: a } = useTranslation(), [l, c] = useState(!0), [d] = useSelectedStylingBlocks();
   return isEmpty(d) ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -12655,25 +12658,25 @@ const SettingsPanel = () => {
       }
     )
   ] }) });
-}, DEFAULT_PANEL_WIDTH = 280;
+}, DEFAULT_PANEL_WIDTH = 280, OutlineButton = ({ isActive: a, show: l }) => /* @__PURE__ */ jsx(Button, { variant: a ? "default" : "ghost", size: "icon", onClick: l, children: /* @__PURE__ */ jsx(Layers, { size: 20 }) }), AiButton = ({ isActive: a, show: l }) => /* @__PURE__ */ jsx(Button, { variant: a ? "default" : "ghost", size: "icon", onClick: l, children: /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }) });
 function useSidebarMenuItems() {
   const a = useBuilderProp("askAiCallBack", null), l = useFeature("aiChat");
   return useMemo(() => {
     const c = [];
     return c.push({
       id: "outline",
-      icon: /* @__PURE__ */ jsx(Layers, { size: 20 }),
       label: "Outline",
       isInternal: !0,
       width: DEFAULT_PANEL_WIDTH,
-      component: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
+      button: OutlineButton,
+      panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
     }), a && l && c.unshift({
       id: "ai",
-      icon: /* @__PURE__ */ jsx(SparklesIcon, { size: 20 }),
+      button: AiButton,
       label: "AI Assistant",
       isInternal: !0,
       width: 450,
-      component: () => /* @__PURE__ */ jsx("div", { className: "-mt-8 h-full max-h-full", children: /* @__PURE__ */ jsx(AIChatPanel, {}) })
+      panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8 h-full max-h-full", children: /* @__PURE__ */ jsx(AIChatPanel, {}) })
     }), compact(c);
   }, [a, l]);
 }
@@ -12682,27 +12685,34 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     c("outline");
   });
-  const f = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), x = (T) => {
-    T.preventDefault();
-  }, y = (T) => {
-    c(l === T ? null : T);
+  const f = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), x = (j) => {
+    j.preventDefault();
+  }, y = (j) => {
+    c(l === j ? null : j);
   }, b = useSidebarMenuItems(), { t: v } = useTranslation(), k = useMemo(() => [...b, ...f], [b, f]), S = useBuilderProp("htmlDir", "ltr"), C = find(k, { id: l }) ?? first(k), A = get(C, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (l !== null) {
-      const T = find(k, { id: l });
-      T && get(T, "view", "standard") === "standard" && (d.current = l, p(get(T, "width", DEFAULT_PANEL_WIDTH)));
+      const j = find(k, { id: l });
+      j && get(j, "view", "standard") === "standard" && (d.current = l, p(get(j, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [l, k]);
   const w = useMemo(() => {
     if (l === null) return 0;
-    const T = find(k, { id: l });
-    return get(T, "view", "standard") === "standard" ? A : u;
+    const j = find(k, { id: l });
+    return get(j, "view", "standard") === "standard" ? A : u;
   }, [l, A, u, k]), I = () => {
     c(d.current);
   };
-  return useEffect(() => {
+  useEffect(() => {
     find(k, { id: l }) || c("outline");
-  }, [l, k]), /* @__PURE__ */ jsx("div", { dir: S, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  }, [l, k]);
+  const N = useCallback(
+    (j) => {
+      y(j);
+    },
+    [y]
+  );
+  return /* @__PURE__ */ jsx("div", { dir: S, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -12712,33 +12722,25 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(a, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: k.map((T, N) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: l === T.id ? "default" : "ghost",
-                    className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => y(T.id),
-                    children: get(T, "icon", null)
-                  },
-                  N
-                ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: v(T.label) }) })
-              ] }, "button-" + N)) }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: k.map((j, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(j, "button", NoopComponent), {
+                  position: "top",
+                  panelId: j.id,
+                  isActive: l === j.id,
+                  show: () => N(j.id)
+                }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: v(j.label) }) })
+              ] }, "button-top-" + B)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((T, N) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: l === T.id ? "default" : "ghost",
-                    className: "mb-2 rounded-lg p-2 transition-colors",
-                    onClick: () => y(T.id),
-                    children: get(T, "icon", null)
-                  },
-                  N
-                ) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: v(T.label) }) })
-              ] }, "button-" + N)) })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((j, B) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(j, "button", NoopComponent), {
+                  position: "bottom",
+                  panelId: j.id,
+                  isActive: l === j.id,
+                  show: () => N(j.id)
+                }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: v(j.label) }) })
+              ] }, "button-bottom-" + B)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -12749,17 +12751,14 @@ const RootLayout = () => {
                 animate: { width: w },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: l !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
-                  /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: `absolute top-2 flex h-10 items-center space-x-1 bg-white py-2 text-base font-bold ${get(C, "isInternal", !1) ? "" : "w-64"}`,
-                      children: [
-                        /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
-                        /* @__PURE__ */ jsx("span", { children: v(get(C, "label", "")) })
-                      ]
+                      children: /* @__PURE__ */ jsx("span", { children: v(get(C, "label", "")) })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "component", null), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -12805,14 +12804,15 @@ const RootLayout = () => {
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: v(get(C, "label", "")) })
               ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "component", null), {}) }) })
+              /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
             ] }) }),
+            " ",
             l !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => I(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${A}px` }, children: [
               /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: v(get(C, "label", "")) })
               ] }) }),
-              /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "component", null), {}) }) })
+              /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
             ] }) }),
             l !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
               motion.div,
@@ -12847,7 +12847,7 @@ const RootLayout = () => {
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "component", null), {}) }) })
+                      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
                     ]
                   }
                 ) })
@@ -12925,8 +12925,6 @@ const RootLayout = () => {
 if (typeof window > "u")
   throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
 export {
-  ADD_BLOCK_TABS,
-  CHAI_BUILDER_PANELS,
   AddBlocksDialog as ChaiAddBlocksDialog,
   AddBlocksPanel as ChaiAddBlocksPanel,
   AISetContext as ChaiAskAiPanel,
@@ -12945,7 +12943,6 @@ export {
   UILibrariesPanel as ChaiUILibrariesPanel,
   UndoRedo as ChaiUndoRedo,
   PERMISSIONS,
-  RJSF_EXTENSIONS,
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
@@ -12962,7 +12959,6 @@ export {
   useAddClassesToBlocks,
   useAskAi,
   useBlockHighlight,
-  useBlockSettingComponents,
   useBlocksStore,
   useBlocksStoreUndoableActions,
   useBrandingOptions,
@@ -12970,7 +12966,6 @@ export {
   useBuilderReset,
   useCanvasDisplayWidth,
   useCanvasZoom,
-  useChaiSidebarPanels,
   useCodeEditor,
   useCopyBlockIds,
   useCopyToClipboard,
@@ -13005,7 +13000,6 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  useTopBarComponent,
   We as useTranslation,
   useUILibraryBlocks,
   useUndoManager,