@chaibuilder/sdk 2.2.13 → 2.2.15

package/dist/core.js

@@ -15,7 +15,7 @@ import { ChevronRight, PlusIcon as PlusIcon$1, DatabaseIcon, ChevronLeft, Chevro
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { S as STYLES_KEY, e as getSplitChaiClasses, a as applyBinding, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as ROOT_TEMP_KEY } from "./new-blocks-render-helpers-BGcG63he.js";
+import { S as STYLES_KEY, f as getSplitChaiClasses, a as applyBinding, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as ROOT_TEMP_KEY } from "./new-blocks-render-helpers-DfAVXxr2.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, e as getThemeFontsLinkMarkup, h as getThemeCustomFontFace } from "./plugin-fnBB3TCm.js";
 import Fuse from "fuse.js";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
@@ -759,13 +759,13 @@ const useUndoManager = () => {
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, y, b) => {
-      const v = map(x, (A) => {
-        const _ = r.find((T) => T._id === A)._parent || null, B = r.filter((T) => _ ? T._parent === _ : !T._parent).map((T) => T._id).indexOf(A);
-        return { _id: A, oldParent: _, oldPosition: B };
-      }), w = v.find(({ _id: A }) => A === x[0]);
-      w && w.oldParent === y && w.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(v, ({ _id: A, oldParent: E, oldPosition: _ }) => {
-          i([A], E, _);
+      const v = map(x, (w) => {
+        const _ = r.find((T) => T._id === w)._parent || null, B = r.filter((T) => _ ? T._parent === _ : !T._parent).map((T) => T._id).indexOf(w);
+        return { _id: w, oldParent: _, oldPosition: B };
+      }), A = v.find(({ _id: w }) => w === x[0]);
+      A && A.oldParent === y && A.oldPosition === b || (i(x, y, b), o({
+        undo: () => each(v, ({ _id: w, oldParent: E, oldPosition: _ }) => {
+          i([w], E, _);
         }),
         redo: () => i(x, y, b)
       }));
@@ -777,8 +777,8 @@ const useUndoManager = () => {
       });
     },
     removeBlocks: (x) => {
-      var w;
-      const y = (w = first(x)) == null ? void 0 : w._parent, v = r.filter((A) => y ? A._parent === y : !A._parent).indexOf(first(x));
+      var A;
+      const y = (A = first(x)) == null ? void 0 : A._parent, v = r.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(x));
       l(map(x, "_id")), o({
         undo: () => a(x, y, v),
         redo: () => l(map(x, "_id"))
@@ -787,17 +787,17 @@ const useUndoManager = () => {
     updateBlocks: (x, y, b) => {
       let v = [];
       if (b)
-        v = map(x, (w) => ({ _id: w, ...b }));
+        v = map(x, (A) => ({ _id: A, ...b }));
       else {
-        const w = keys(y);
-        v = map(x, (A) => {
-          const E = r.find((S) => S._id === A), _ = { _id: A };
-          return each(w, (S) => _[S] = E[S]), _;
+        const A = keys(y);
+        v = map(x, (w) => {
+          const E = r.find((S) => S._id === w), _ = { _id: w };
+          return each(A, (S) => _[S] = E[S]), _;
         });
       }
-      d(map(x, (w) => ({ _id: w, ...y }))), o({
+      d(map(x, (A) => ({ _id: A, ...y }))), o({
         undo: () => d(v),
-        redo: () => d(map(x, (w) => ({ _id: w, ...y })))
+        redo: () => d(map(x, (A) => ({ _id: A, ...y })))
       });
     },
     updateBlocksRuntime: (x, y) => {
@@ -812,8 +812,8 @@ const useUndoManager = () => {
     updateMultipleBlocksProps: (x) => {
       let y = [];
       y = map(x, (b) => {
-        const v = keys(b), w = r.find((E) => E._id === b._id), A = {};
-        return each(v, (E) => A[E] = w[E]), A;
+        const v = keys(b), A = r.find((E) => E._id === b._id), w = {};
+        return each(v, (E) => w[E] = A[E]), w;
       }), d(x), o({
         undo: () => d(y),
         redo: () => d(x)
@@ -2302,8 +2302,8 @@ const getBlockWithChildren = (o, r) => {
     for (const y in x) {
       const b = x[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: v, classes: w } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([v, w])).join(" ");
+        const { baseClasses: v, classes: A } = getSplitChaiClasses(b);
+        x[y] = compact(flattenDeep([v, A])).join(" ");
       } else
         y !== "_id" && delete x[y];
     }
@@ -2315,21 +2315,21 @@ const getBlockWithChildren = (o, r) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, c)), p) : [h(f, c)], w = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: A, error: E } = w;
+            const b = p === u ? "" : p, v = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, c)), p) : [h(f, c)], A = await l(m, addLangToPrompt(x, g, m), v, b), { blocks: w, error: E } = A;
             if (E) {
               a(E);
               return;
             }
             if (m === "styles") {
-              const _ = A.map((S) => {
+              const _ = w.map((S) => {
                 for (const B in S)
                   B !== "_id" && (S[B] = `${STYLES_KEY},${S[B]}`);
                 return S;
               });
               d(_);
             } else
-              i(A);
-            y && y(w);
+              i(w);
+            y && y(A);
           } catch (b) {
             a(b);
           } finally {
@@ -3050,8 +3050,8 @@ const useDnd = () => {
       var E;
       const f = dropTarget, y = getOrientation(f) === "vertical" ? m.clientY + ((E = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : E.scrollY) : m.clientX;
       dropIndex = calculateDropIndex(y, possiblePositions);
-      const b = c, v = f.getAttribute("data-block-id"), w = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((b == null ? void 0 : b._id) === v || !w) {
+      const b = c, v = f.getAttribute("data-block-id"), A = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((b == null ? void 0 : b._id) === v || !A) {
         h();
         return;
       }
@@ -3059,8 +3059,8 @@ const useDnd = () => {
         a(b, v === "canvas" ? null : v, dropIndex), setTimeout(h, 300);
         return;
       }
-      let A = f.getAttribute("data-block-id");
-      A === null && (A = m.target.parentElement.getAttribute("data-block-id")), d([b._id], A === "canvas" ? null : A, dropIndex), h(), setTimeout(removePlaceholder, 300);
+      let w = f.getAttribute("data-block-id");
+      w === null && (w = m.target.parentElement.getAttribute("data-block-id")), d([b._id], w === "canvas" ? null : w, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (m) => {
       const f = m, x = f.target;
@@ -3202,15 +3202,15 @@ const useHandleCanvasDblClick = (o, r) => {
         tailwindForms,
         tailwindAspectRatio,
         twContainer,
-        plugin(function({ addBase: v, theme: w }) {
+        plugin(function({ addBase: v, theme: A }) {
           v({
             "h1,h2,h3,h4,h5,h6": {
-              fontFamily: w("fontFamily.heading")
+              fontFamily: A("fontFamily.heading")
             },
             body: {
-              fontFamily: w("fontFamily.body"),
-              color: w("colors.foreground"),
-              backgroundColor: w("colors.background")
+              fontFamily: A("fontFamily.body"),
+              color: A("colors.foreground"),
+              backgroundColor: A("colors.background")
             }
           });
         })
@@ -3232,11 +3232,11 @@ const useHandleCanvasDblClick = (o, r) => {
     c.querySelector("#drop-target-block").innerHTML = d ? `[data-block-id="${d}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [d, c]);
   const x = useMemo(() => {
-    const { heading: v, body: w } = {
+    const { heading: v, body: A } = {
       heading: get(o, "fontFamily.heading"),
       body: get(o, "fontFamily.body")
     };
-    return f.filter((A) => A.family === v || A.family === w);
+    return f.filter((w) => w.family === v || w.family === A);
   }, [o == null ? void 0 : o.fontFamily, f]), y = useMemo(() => getThemeFontsLinkMarkup(filter(x, (v) => has(v, "url"))), [x]), b = useMemo(
     () => getThemeCustomFontFace(filter(x, (v) => has(v, "src"))),
     [x]
@@ -3261,7 +3261,7 @@ const useHandleCanvasDblClick = (o, r) => {
   }, []), /* @__PURE__ */ jsx("div", { id: "main-content", onClick: () => {
     a([]), l([]);
   }, className: "h-full w-full p-8 pb-0", ref: i, children: o });
-}, useBlockRuntimeProps = () => {
+}, ErrorFallback = () => /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center bg-red-50 p-2 text-center text-red-500", children: "Something went wrong." }), useBlockRuntimeProps = () => {
   const [o] = useBlocksStore();
   return useCallback(
     (r, n) => isEmpty(n) ? {} : Object.entries(n).reduce((a, [l, i]) => {
@@ -3277,7 +3277,27 @@ const useHandleCanvasDblClick = (o, r) => {
 }, RepeaterContext = createContext({
   index: -1,
   key: ""
-}), BlockRenderer = ({
+}), CORE_BLOCKS = [
+  "Box",
+  "Repeater",
+  "GlobalBlock",
+  "PartialBlock",
+  "Heading",
+  "Text",
+  "RichText",
+  "Span",
+  "Image",
+  "Button",
+  "Paragraph",
+  "Link",
+  "Video",
+  "Audio",
+  "Icon",
+  "List",
+  "ListItem",
+  "CustomScript",
+  "CustomHTML"
+], BlockRenderer = ({
   blockAtom: o,
   children: r
 }) => {
@@ -3316,8 +3336,9 @@ const useHandleCanvasDblClick = (o, r) => {
       y,
       b
     ]
-  );
-  return isNull(g) || p.includes(n._id) ? null : /* @__PURE__ */ jsx(Suspense, { children: createElement(g, {
+  ), A = useMemo(() => !CORE_BLOCKS.includes(n._type), [n._type]);
+  if (isNull(g) || p.includes(n._id)) return null;
+  const w = /* @__PURE__ */ jsx(Suspense, { children: createElement(g, {
     ...v,
     children: r({
       _id: n._id,
@@ -3330,6 +3351,7 @@ const useHandleCanvasDblClick = (o, r) => {
       ...n.globalBlock ? { partialBlockId: n.globalBlock } : ""
     })
   }) });
+  return A ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: w }) : w;
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: r } = usePartialBlocksStore(), n = useMemo(() => r(o), [r, o]), a = useMemo(() => splitAtom(atom(n)), [n]);
   return isEmpty(n) ? null : /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: n });
@@ -3382,7 +3404,7 @@ const useHandleCanvasDblClick = (o, r) => {
     d();
   }, [r, o, n, d]), l;
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, h] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), w = (_) => {
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasDisplayWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), d = useRef(null), [c, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(c), [g, h] = useState([]), [, m] = useState([]), [, f] = useAtom$1(canvasIframeAtom), [x, y] = useSelectedStylingBlocks(), b = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), A = (_) => {
     p((S) => ({ ...S, width: _ }));
   };
   useEffect(() => {
@@ -3390,7 +3412,7 @@ const useHandleCanvasDblClick = (o, r) => {
     const { clientWidth: _, clientHeight: S } = d.current;
     p({ width: _, height: S });
   }, [d, r]);
-  const A = (_, S = 0) => {
+  const w = (_, S = 0) => {
     const { top: B } = _.getBoundingClientRect();
     return B + S >= 0 && B - S <= window.innerHeight;
   };
@@ -3398,7 +3420,7 @@ const useHandleCanvasDblClick = (o, r) => {
     var _, S;
     if (a != null && a._id && a.type !== "Multiple" && i.current) {
       const B = getElementByDataBlockId(i.current.contentDocument, a._id);
-      B && (A(B) || (S = (_ = i.current) == null ? void 0 : _.contentWindow) == null || S.scrollTo({ top: B.offsetTop, behavior: "smooth" }), h([B]));
+      B && (w(B) || (S = (_ = i.current) == null ? void 0 : _.contentWindow) == null || S.scrollTo({ top: B.offsetTop, behavior: "smooth" }), h([B]));
     }
   }, [a == null ? void 0 : a._id, a == null ? void 0 : a.type]), useEffect(() => {
     if (!isEmpty(x) && i.current) {
@@ -3414,7 +3436,7 @@ const useHandleCanvasDblClick = (o, r) => {
     let _ = IframeInitialContent;
     return _ = _.replace("__HTML_DIR__", v), o === "offline" && (_ = _.replace("https://chaibuilder.com/offline/tailwind.cdn.js", "/offline/tailwind.cdn.js")), _;
   }, [o, v]);
-  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: w, onResize: w, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: A, onResize: A, children: /* @__PURE__ */ jsx(
     "div",
     {
       onClick: () => {
@@ -3567,7 +3589,7 @@ const JSONFormFieldTemplate = ({
   formData: g,
   onChange: h
 }) => {
-  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? f : m, b = get(LANGUAGES, y, y), v = usePageExternalData(), w = useSelectedBlock(), A = useRegisteredChaiBlocks(), E = get(A, [w == null ? void 0 : w._type, "i18nProps"], []) || [], [_, S] = useState(null), B = useSelectedBlockHierarchy(), T = useMemo(() => B.length === 1 ? "" : `#${get(
+  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), y = isEmpty(x) ? "" : isEmpty(m) ? f : m, b = get(LANGUAGES, y, y), v = usePageExternalData(), A = useSelectedBlock(), w = useRegisteredChaiBlocks(), E = get(w, [A == null ? void 0 : A._type, "i18nProps"], []) || [], [_, S] = useState(null), B = useSelectedBlockHierarchy(), T = useMemo(() => B.length === 1 ? "" : `#${get(
     B.find((L) => L._type === "Repeater"),
     "repeaterItems",
     ""
@@ -3617,7 +3639,7 @@ const JSONFormFieldTemplate = ({
         h(K, {}, o);
       }
     },
-    [o, h, g, w == null ? void 0 : w._id, T]
+    [o, h, g, A == null ? void 0 : A._id, T]
   );
   if (c)
     return null;
@@ -3857,7 +3879,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   onChange: n
 }) => {
   var T;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), w = (T = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : T.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, d] = useState(!1), [c, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [y, b] = useState(-1), v = useRef(null), A = (T = r == null ? void 0 : r.find((C) => C.key === u)) == null ? void 0 : T.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
     const C = split(o, ":"), k = get(C, 1, "page") || "page";
@@ -3866,7 +3888,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
       j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const A = useDebouncedCallback(
+  const w = useDebouncedCallback(
     async (C) => {
       if (isEmpty(C))
         x([]);
@@ -3907,7 +3929,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
   const S = () => {
     m(""), x([]), b(-1), p(!1), n("");
   }, B = (C) => {
-    m(C), p(!isEmpty(C)), d(!0), A(C);
+    m(C), p(!isEmpty(C)), d(!0), w(C);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (C) => g(C.target.value), children: map(r, (C) => /* @__PURE__ */ jsx("option", { value: C.key, children: C.name }, C.key)) }),
@@ -3919,7 +3941,7 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
           value: h,
           onChange: (C) => B(C.target.value),
           onKeyDown: _,
-          placeholder: a(`Search ${w ?? ""}`),
+          placeholder: a(`Search ${A ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
@@ -4231,11 +4253,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (f !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: b } = u, v = b.selection.from, w = b.doc.textBetween(Math.max(0, v - 1), v), A = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
+      const { state: b } = u, v = b.selection.from, A = b.doc.textBetween(Math.max(0, v - 1), v), w = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
       let E = "";
-      v > 0 && w !== " " && !/[.,!?;:]/.test(w) && (E = " ");
+      v > 0 && A !== " " && !/[.,!?;:]/.test(A) && (E = " ");
       let _ = "";
-      A && A !== " " && !/[.,!?;:]/.test(A) && (_ = " "), u.chain().insertContent(E + m + _).run();
+      w && w !== " " && !/[.,!?;:]/.test(w) && (_ = " "), u.chain().insertContent(E + m + _).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4582,7 +4604,7 @@ function BlockSettings() {
     S && (n([r._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(d, S) }));
   }, b = ({ formData: _ }, S) => {
     S && (n([g._id], { [S]: get(_, S) }), x({ formData: _ }, S, { [S]: get(d, S) }));
-  }, { schema: v, uiSchema: w } = useMemo(() => {
+  }, { schema: v, uiSchema: A } = useMemo(() => {
     const _ = r == null ? void 0 : r._type;
     if (!_)
       return { schema: {}, uiSchema: {} };
@@ -4591,7 +4613,7 @@ function BlockSettings() {
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [r]), { wrapperSchema: A, wrapperUiSchema: E } = useMemo(() => {
+  }, [r]), { wrapperSchema: w, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
     const _ = g == null ? void 0 : g._type, { schema: S = {}, uiSchema: B = {} } = getBlockFormSchemas(_);
@@ -4623,7 +4645,7 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
           formData: m,
-          schema: A,
+          schema: w,
           uiSchema: E
         }
       ) })
@@ -4635,7 +4657,7 @@ function BlockSettings() {
         onChange: y,
         formData: i,
         schema: v,
-        uiSchema: w
+        uiSchema: A
       }
     )
   ] });
@@ -4812,7 +4834,7 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, w] = useState(!1), [A, E] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: d, classPrefix: c, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [y, b] = useState(""), [v, A] = useState(!1), [w, E] = useState(!1);
   useEffect(() => {
     const { value: C, unit: k } = getClassValueAndUnit(i);
     if (k === "") {
@@ -4890,7 +4912,7 @@ const BlockStylingProps = () => {
             S(P);
           },
           onKeyUp: (C) => {
-            A && (C.preventDefault(), E(!1));
+            w && (C.preventDefault(), E(!1));
           },
           onBlur: () => B(),
           onChange: (C) => {
@@ -4935,9 +4957,9 @@ const BlockStylingProps = () => {
     ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => w(!0),
+        onDragStart: () => A(!0),
         onDragEnd: (C) => {
-          if (b(() => ""), w(!1), isEmpty(C))
+          if (b(() => ""), A(!1), isEmpty(C))
             return;
           const k = `${C}`, I = `${k.startsWith("-") ? "-" : ""}${c}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
           _(I);
@@ -5420,13 +5442,13 @@ const COLOR_PROP = {
     [x, p, g, u, l, m]
   ), v = useCallback(() => {
     f(x, [y], !0);
-  }, [x, y, f]), w = useMemo(() => canChangeClass(h, g), [h, g]);
+  }, [x, y, f]), A = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
-    i(w, h);
-  }, [w, i, h]);
-  const [, , A] = useScreenSizeWidth(), E = useCallback(
+    i(A, h);
+  }, [A, i, h]);
+  const [, , w] = useScreenSizeWidth(), E = useCallback(
     (S) => {
-      A({
+      w({
         xs: 400,
         sm: 640,
         md: 800,
@@ -5435,9 +5457,9 @@ const COLOR_PROP = {
         "2xl": 1920
       }[S]);
     },
-    [A]
+    [w]
   ), _ = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: w, canReset: h && _, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: A, canReset: h && _, 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] ${h && !_ ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -5457,7 +5479,7 @@ const COLOR_PROP = {
         n === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         n === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), 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 && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: _ ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : A && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -5858,10 +5880,10 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var I;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: d } = useTranslation(), [c] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (I = first(c)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((N) => !isEmpty(N)), w = () => {
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: d } = useTranslation(), [c] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), y = (I = first(c)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((N) => !isEmpty(N)), A = () => {
     const N = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(h, N, !0), x("");
-  }, [A, E] = useState([]), _ = ({ value: N }) => {
+  }, [w, E] = useState([]), _ = ({ value: N }) => {
     const P = N.trim().toLowerCase(), L = P.match(/.+:/g);
     let O = [];
     if (L && L.length > 0) {
@@ -5890,7 +5912,7 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (N) => {
-        N.key === "Enter" && f.trim() !== "" && w();
+        N.key === "Enter" && f.trim() !== "" && A();
       },
       onChange: (N, { newValue: P }) => x(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -5928,7 +5950,7 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: A,
+          suggestions: w,
           onSuggestionsFetchRequested: _,
           onSuggestionsClearRequested: S,
           getSuggestionValue: B,
@@ -5949,7 +5971,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: w,
+          onClick: A,
           disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -6374,22 +6396,22 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var h, m, f, x, y, b, v, w;
+  var h, m, f, x, y, b, v, A;
   if (n.type === "comment") return [];
   console.log("node ===>", n);
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
-    (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
+    (w) => w.key === "data-chai-richtext" || w.key === "chai-richtext"
   ), d = l.find(
-    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
+    (w) => w.key === "data-chai-lightbox" || w.key === "chai-lightbox"
   ), c = l.find(
-    (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
+    (w) => w.key === "data-chai-dropdown" || w.key === "chai-dropdown"
   ), p = l.find(
-    (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
+    (w) => w.key === "data-chai-dropdown-button" || w.key === "chai-dropdown-button"
   ), u = l.find(
-    (A) => A.key === "data-chai-dropdown-content" || A.key === "chai-dropdown-content"
+    (w) => w.key === "data-chai-dropdown-content" || w.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6397,13 +6419,13 @@ const CoreBlock = ({
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const A = n.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
-    A && (a._name = A.value);
+    const w = n.attributes.find((E) => includes(NAME_ATTRIBUTES, E.key));
+    w && (a._name = w.value);
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (d) {
-    const A = [
+    const w = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6421,14 +6443,14 @@ const CoreBlock = ({
       maxWidth: ((y = (x = l.find((E) => E.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : y.replace("px", "")) || "",
       backdropColor: ((b = l.find((E) => E.key === "data-overlay")) == null ? void 0 : b.value) || "",
       galleryName: ((v = l.find((E) => E.key === "data-gall")) == null ? void 0 : v.value) || ""
-    }, forEach(A, (E) => {
+    }, forEach(w, (E) => {
       has(a, `styles_attrs.${E}`) && delete a.styles_attrs[E];
     });
   }
   if (c && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const A = filter(n.children || [], (_) => (_ == null ? void 0 : _.tagName) !== "span");
-    a.content = getTextContent(A);
+    const w = filter(n.children || [], (_) => (_ == null ? void 0 : _.tagName) !== "span");
+    a.content = getTextContent(w);
     const E = find(
       n.children || [],
       (_) => (_ == null ? void 0 : _.tagName) === "span" && some(_.children || [], (S) => (S == null ? void 0 : S.tagName) === "svg")
@@ -6444,15 +6466,15 @@ const CoreBlock = ({
     return [a];
   }
   if (a._type === "Input") {
-    const A = a.inputType || "text";
-    A === "checkbox" ? set(a, "_type", "Checkbox") : A === "radio" && set(a, "_type", "Radio");
+    const w = a.inputType || "text";
+    w === "checkbox" ? set(a, "_type", "Checkbox") : w === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const A = stringify([n]);
-    return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
+    const w = stringify([n]);
+    return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (n.tagName === "svg") {
-    const A = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), _ = get(A, "value") ? `[${get(A, "value")}px]` : "24px", S = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    const w = find(n.attributes, { key: "height" }), E = find(n.attributes, { key: "width" }), _ = get(w, "value") ? `[${get(w, "value")}px]` : "24px", S = get(E, "value") ? `[${get(E, "value")}px]` : "24px", B = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
     return a.styles = `${STYLES_KEY}, ${cn$1(`w-${S} h-${_}`, B)}`.trim(), n.attributes = filter(n.attributes, (T) => !includes(["style", "width", "height", "class"], T.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((w = r.block) == null ? void 0 : w._type) === "Select")
+  } else if (n.tagName == "option" && r && ((A = r.block) == null ? void 0 : A._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -6556,18 +6578,18 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (w) => {
-    const A = has(w, "styles_attrs.data-page-section");
-    return w._type === "Box" && A;
+  const [l, i] = useState(!1), d = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: c, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (A) => {
+    const w = has(A, "styles_attrs.data-page-section");
+    return A._type === "Box" && w;
   }, b = useCallback(
-    async (w) => {
-      if (w.stopPropagation(), has(o, "component")) {
+    async (A) => {
+      if (A.stopPropagation(), has(o, "component")) {
         c(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      const A = await d(r, o);
-      isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      const w = await d(r, o);
+      isEmpty(w) || p(syncBlocksWithDefaults(w), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [c, p, o, d, r, n, a]
   );
@@ -6578,18 +6600,18 @@ const BlockCard = ({
         onClick: l ? () => {
         } : b,
         draggable: f ? "true" : "false",
-        onDragStart: async (w) => {
-          const A = await d(r, o);
+        onDragStart: async (A) => {
+          const w = await d(r, o);
           let E = n;
-          if (y(first(A)) && (E = null), !isEmpty(A)) {
-            const _ = { blocks: A, uiLibrary: !0, parent: E };
-            if (w.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
+          if (y(first(w)) && (E = null), !isEmpty(w)) {
+            const _ = { blocks: w, uiLibrary: !0, parent: E };
+            if (A.dataTransfer.setData("text/plain", JSON.stringify(_)), o.preview) {
               const S = new Image();
               S.src = o.preview, S.onload = () => {
-                w.dataTransfer.setDragImage(S, 0, 0);
+                A.dataTransfer.setDragImage(S, 0, 0);
               };
             } else
-              w.dataTransfer.setDragImage(new Image(), 0, 0);
+              A.dataTransfer.setDragImage(new Image(), 0, 0);
             x(_), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
@@ -6642,9 +6664,9 @@ const BlockCard = ({
       return;
     }
   }, [y, b]);
-  const w = get(y, b, []), A = useRef(null), { t: E } = useTranslation(), _ = (k) => {
-    A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
-      A.current && v(k);
+  const A = get(y, b, []), w = useRef(null), { t: E } = useTranslation(), _ = (k) => {
+    w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
+      w.current && v(k);
     }, 400);
   }, S = () => {
     i != null && i.id && p(i.id);
@@ -6656,7 +6678,7 @@ const BlockCard = ({
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const T = filter(w, (k, j) => j % 2 === 0), C = filter(w, (k, j) => j % 2 === 1);
+  const T = filter(A, (k, j) => j % 2 === 0), C = filter(A, (k, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -6694,7 +6716,7 @@ const BlockCard = ({
             "div",
             {
               onMouseEnter: () => _(j),
-              onMouseLeave: () => clearTimeout(A.current),
+              onMouseLeave: () => clearTimeout(w.current),
               role: "button",
               onClick: () => v(j),
               className: cn$1(
@@ -6713,10 +6735,10 @@ const BlockCard = ({
       /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
+          onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(w) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+            isEmpty(A) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: T.map((k, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
@@ -6772,14 +6794,14 @@ const BlockCard = ({
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const m = Object.entries(a).map(([x, y]) => {
-          const b = y, v = b.type || "partial", w = formatReadableName(v);
+          const b = y, v = b.type || "partial", A = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(b.name || x),
             description: b.description || "",
             icon: Globe,
-            group: w,
+            group: A,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
@@ -6851,9 +6873,9 @@ const BlockCard = ({
   }), []);
   const v = useCallback((k) => {
     y(k), b.current && b.current(k);
-  }, []), w = useCallback(() => {
+  }, []), A = useCallback(() => {
     y(null), b.current && b.current.cancel();
-  }, []), A = useCallback((k) => {
+  }, []), w = useCallback((k) => {
     b.current && b.current.cancel(), f(k), y(null);
   }, []), E = useMemo(
     () => c ? values(r).filter(
@@ -6889,9 +6911,9 @@ const BlockCard = ({
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => A("all"),
+            onClick: () => w("all"),
             onMouseEnter: () => v("all"),
-            onMouseLeave: w,
+            onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
@@ -6900,9 +6922,9 @@ const BlockCard = ({
         S.map((k) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => A(k),
+            onClick: () => w(k),
             onMouseEnter: () => v(k),
-            onMouseLeave: w,
+            onMouseLeave: A,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || x === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(k.toLowerCase()))
           },
@@ -7279,7 +7301,7 @@ const Input = ({ node: o }) => {
   var P;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: w } = o, A = (L) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: A } = o, w = (L) => {
     L.stopPropagation(), !l.includes(m) && o.toggle();
   }, E = (L) => {
     L.isInternal && (p = L.isOpen, L.isOpen && L.close());
@@ -7291,7 +7313,7 @@ const Input = ({ node: o }) => {
   }, C = () => {
     B(null);
   }, k = (L) => {
-    C(), L.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), w(L);
+    C(), L.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), A(L);
   };
   useEffect(() => {
     const L = setTimeout(() => {
@@ -7379,7 +7401,7 @@ const Input = ({ node: o }) => {
                   "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__ */ jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7701,19 +7723,19 @@ const Input = ({ node: o }) => {
   const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), i = useBuilderProp("themePanelComponent", null), { hasPermission: d } = usePermissions(), [c, p] = useTheme(), u = useThemeOptions(), { t: g } = useTranslation(), h = (v) => {
     a(v);
   }, m = () => {
-    const v = l.find((w) => Object.keys(w)[0] === n);
+    const v = l.find((A) => Object.keys(A)[0] === n);
     if (v) {
-      const w = Object.values(v)[0];
-      w && typeof w == "object" && "fontFamily" in w && "borderRadius" in w && "colors" in w ? p(w) : console.error("Invalid preset structure:", w);
+      const A = Object.values(v)[0];
+      A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? p(A) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", n);
   }, f = useDebouncedCallback(
-    (v, w) => {
+    (v, A) => {
       p(() => ({
         ...c,
         fontFamily: {
           ...c.fontFamily,
-          [v.replace(/font-/g, "")]: w
+          [v.replace(/font-/g, "")]: A
         }
       }));
     },
@@ -7729,32 +7751,32 @@ const Input = ({ node: o }) => {
     [c],
     200
   ), y = useDebouncedCallback(
-    (v, w) => {
+    (v, A) => {
       p(() => {
-        const A = get(c, `colors.${v}`);
-        return r ? set(A, 1, w) : set(A, 0, w), {
+        const w = get(c, `colors.${v}`);
+        return r ? set(w, 1, A) : set(w, 0, A), {
           ...c,
           colors: {
             ...c.colors,
-            [v]: A
+            [v]: w
           }
         };
       });
     },
     [c],
     200
-  ), b = (v) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(v.items).map(([w]) => {
-    const A = get(c, `colors.${w}.${r ? 1 : 0}`);
+  ), b = (v) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(v.items).map(([A]) => {
+    const w = get(c, `colors.${A}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: A,
-          onChange: (E) => y(w, E)
+          value: w,
+          onChange: (E) => y(A, E)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.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);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, A);
   }) });
   return d("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -7786,12 +7808,12 @@ const Input = ({ node: o }) => {
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn$1("space-y-2", o), children: [
-        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([v, w]) => /* @__PURE__ */ jsx(
+        (u == null ? void 0 : u.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(u.fontFamily).map(([v, A]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: v,
-            value: c.fontFamily[v.replace(/font-/g, "")] || w[Object.keys(w)[0]],
-            onChange: (A) => f(v, A)
+            value: c.fontFamily[v.replace(/font-/g, "")] || A[Object.keys(A)[0]],
+            onChange: (w) => f(v, w)
           },
           v
         )) }),
@@ -8510,19 +8532,19 @@ function AIChatPanel() {
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      r((w) => [...w, v]), i(!1), c(null);
+      r((A) => [...A, v]), i(!1), c(null);
     }, 1500);
   }, m = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
   }, f = (b) => {
-    var w;
-    const v = (w = b.target.files) == null ? void 0 : w[0];
+    var A;
+    const v = (A = b.target.files) == null ? void 0 : A[0];
     if (v) {
-      const A = new FileReader();
-      A.onload = (E) => {
+      const w = new FileReader();
+      w.onload = (E) => {
         var _;
         c((_ = E.target) == null ? void 0 : _.result);
-      }, A.readAsDataURL(v);
+      }, w.readAsDataURL(v);
     }
   }, x = () => {
     var b;
@@ -8739,9 +8761,9 @@ const AddBlocksDialog = () => {
   }, v = (S) => {
     const B = a.filter((T, C) => C !== S);
     n(B), l(B);
-  }, w = (S) => {
+  }, A = (S) => {
     g(S), d(a[S].key), p(a[S].value);
-  }, A = () => {
+  }, w = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
@@ -8751,7 +8773,7 @@ const AddBlocksDialog = () => {
       S[u] = { key: i, value: c }, n(S), l(S), g(null), d(""), p(""), m("");
     }
   }, E = (S) => {
-    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? A() : b());
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
   }, _ = useCallback((S) => {
     const B = (k) => /[.,!?;:]/.test(k), T = (k, j, I) => {
       let N = "", P = "";
@@ -8778,7 +8800,7 @@ const AddBlocksDialog = () => {
       "form",
       {
         onSubmit: (S) => {
-          S.preventDefault(), u !== null ? A() : b();
+          S.preventDefault(), u !== null ? w() : b();
         },
         className: "space-y-3",
         children: [
@@ -8834,7 +8856,7 @@ const AddBlocksDialog = () => {
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => w(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(B), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
         /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(B), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
     ] }, B)) })
@@ -8966,11 +8988,11 @@ const RootLayout = () => {
       S && get(S, "view", "standard") === "standard" && (a.current = r, i(get(S, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [r, x]);
-  const w = useMemo(() => {
+  const A = useMemo(() => {
     if (r === null) return 0;
     const S = find(x, { id: r });
     return get(S, "view", "standard") === "standard" ? v : l;
-  }, [r, v, l, x]), A = () => {
+  }, [r, v, l, x]), w = () => {
     n(a.current);
   }, E = useCallback(() => {
     n("outline");
@@ -9019,8 +9041,8 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: w },
-                animate: { width: w },
+                initial: { width: A },
+                animate: { width: A },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: r !== null && get(b, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
@@ -9071,7 +9093,7 @@ const RootLayout = () => {
                 ] }) })
               }
             ),
-            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
+            r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0 sm:max-w-full", style: { width: `${v}px` }, children: [
               /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border p-4 pb-2", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
@@ -9081,7 +9103,7 @@ const RootLayout = () => {
               }) }) })
             ] }) }),
             " ",
-            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}px` }, children: [
+            r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", style: { maxWidth: `${v}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(b, "icon", null) }),
                 /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
@@ -9112,7 +9134,7 @@ const RootLayout = () => {
                           /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
                           /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                         ] }),
-                        /* @__PURE__ */ jsx(Button, { onClick: () => A(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                        /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
                       ] }),
                       /* @__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(b, "panel", NoopComponent), {
                         close: E
@@ -9270,7 +9292,7 @@ const FEATURE_TOGGLES = {
           P = !0;
           break;
         }
-      P && (y(I), w(I)), n.delete(I);
+      P && (y(I), A(I)), n.delete(I);
     }
   }), y = h[3] || ((B) => {
     var T, C;
@@ -9286,7 +9308,7 @@ const FEATURE_TOGGLES = {
     k.d.clear();
     let j = !0;
     const I = () => {
-      r.has(B) && (w(B), x(), f());
+      r.has(B) && (A(B), x(), f());
     }, N = (R) => {
       var D;
       if (isSelfAtom(B, R)) {
@@ -9351,7 +9373,7 @@ const FEATURE_TOGGLES = {
           if (!hasInitialValue(I))
             throw new Error("atom not writable");
           const O = L.n, $ = N[0];
-          setAtomStateValueOrPromise(I, $, m), w(I), O !== L.n && (a.add(I), (P = d.c) == null || P.call(d, I), b(I));
+          setAtomStateValueOrPromise(I, $, m), A(I), O !== L.n && (a.add(I), (P = d.c) == null || P.call(d, I), b(I));
           return;
         } else
           return v(I, ...N);
@@ -9364,14 +9386,14 @@ const FEATURE_TOGGLES = {
     } finally {
       C = !1;
     }
-  }), w = h[6] || ((B) => {
+  }), A = h[6] || ((B) => {
     var T;
     const C = m(B), k = r.get(B);
     if (k && !isPendingPromise(C.v)) {
       for (const [j, I] of C.d)
         if (!k.d.has(j)) {
           const N = m(j);
-          A(j).t.add(B), k.d.add(j), I !== N.n && (a.add(j), (T = d.c) == null || T.call(d, j), b(j));
+          w(j).t.add(B), k.d.add(j), I !== N.n && (a.add(j), (T = d.c) == null || T.call(d, j), b(j));
         }
       for (const j of k.d || [])
         if (!C.d.has(j)) {
@@ -9380,14 +9402,14 @@ const FEATURE_TOGGLES = {
           I == null || I.t.delete(B);
         }
     }
-  }), A = h[7] || ((B) => {
+  }), w = h[7] || ((B) => {
     var T;
     const C = m(B);
     let k = r.get(B);
     if (!k) {
       y(B);
       for (const j of C.d.keys())
-        A(j).t.add(B);
+        w(j).t.add(B);
       if (k = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(C.d.keys()),
@@ -9457,8 +9479,8 @@ const FEATURE_TOGGLES = {
     y,
     b,
     v,
-    w,
     A,
+    w,
     E
   ], S = {
     get: (B) => returnAtomValue(y(B)),
@@ -9470,7 +9492,7 @@ const FEATURE_TOGGLES = {
       }
     },
     sub: (B, T) => {
-      const k = A(B).l;
+      const k = w(B).l;
       return k.add(T), f(), () => {
         k.delete(T), E(B), f();
       };