@chaibuilder/sdk 3.0.9 → 3.0.10

package/dist/core.js

@@ -14,7 +14,7 @@ import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as Dropd
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, h as getSplitChaiClasses, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, f as getBlocksFromHTML, i as ROOT_TEMP_KEY } from "./apply-binding-tfi-KyyV.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, i as getSplitChaiClasses, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, h as getBlocksFromHTML, j as ROOT_TEMP_KEY } from "./apply-binding-CSYk-NOA.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
@@ -838,13 +838,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (f, y, b) => {
-      const C = map(f, (j) => {
-        const w = n.find((E) => E._id === j)._parent || null, A = n.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(j);
-        return { _id: j, oldParent: w, oldPosition: A };
-      }), B = C.find(({ _id: j }) => j === f[0]);
+      const k = map(f, (j) => {
+        const C = n.find((I) => I._id === j)._parent || null, S = n.filter((I) => C ? I._parent === C : !I._parent).map((I) => I._id).indexOf(j);
+        return { _id: j, oldParent: C, oldPosition: S };
+      }), B = k.find(({ _id: j }) => j === f[0]);
       B && B.oldParent === y && B.oldPosition === b || (i(f, y, b), o({
-        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: w }) => {
-          i([j], _, w);
+        undo: () => each(k, ({ _id: j, oldParent: E, oldPosition: C }) => {
+          i([j], E, C);
         }),
         redo: () => i(f, y, b)
       }));
@@ -857,25 +857,25 @@ const undoRedoStateAtom = atom({
     },
     removeBlocks: (f) => {
       var B;
-      const y = (B = first(f)) == null ? void 0 : B._parent, C = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(f));
+      const y = (B = first(f)) == null ? void 0 : B._parent, k = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(f));
       l(map(f, "_id")), o({
-        undo: () => a(f, y, C),
+        undo: () => a(f, y, k),
         redo: () => l(map(f, "_id"))
       });
     },
     updateBlocks: (f, y, b) => {
-      let C = [];
+      let k = [];
       if (b)
-        C = map(f, (B) => ({ _id: B, ...b }));
+        k = map(f, (B) => ({ _id: B, ...b }));
       else {
         const B = keys(y);
-        C = map(f, (j) => {
-          const _ = n.find((k) => k._id === j), w = { _id: j };
-          return each(B, (k) => w[k] = _[k]), w;
+        k = map(f, (j) => {
+          const E = n.find((v) => v._id === j), C = { _id: j };
+          return each(B, (v) => C[v] = E[v]), C;
         });
       }
       c(map(f, (B) => ({ _id: B, ...y }))), o({
-        undo: () => c(C),
+        undo: () => c(k),
         redo: () => c(map(f, (B) => ({ _id: B, ...y })))
       });
     },
@@ -891,8 +891,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (f) => {
       let y = [];
       y = map(f, (b) => {
-        const C = keys(b), B = n.find((_) => _._id === b._id), j = {};
-        return each(C, (_) => j[_] = B[_]), j;
+        const k = keys(b), B = n.find((E) => E._id === b._id), j = {};
+        return each(k, (E) => j[E] = B[E]), j;
       }), c(f), o({
         undo: () => c(y),
         redo: () => c(f)
@@ -2366,8 +2366,8 @@ const getBlockWithChildren = (o, n) => {
     for (const y in f) {
       const b = f[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: C, classes: B } = getSplitChaiClasses(b);
-        f[y] = compact(flattenDeep([C, B])).join(" ");
+        const { baseClasses: k, classes: B } = getSplitChaiClasses(b);
+        f[y] = compact(flattenDeep([k, B])).join(" ");
       } else
         y !== "_id" && delete f[y];
     }
@@ -2381,20 +2381,20 @@ const getBlockWithChildren = (o, n) => {
           try {
             const b = p === u ? "" : p;
             console.log("prompt", f);
-            const C = f.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p, C) : [m(x, d)], j = await l(h, addLangToPrompt(f, g, h), B, b), { blocks: _, error: w } = j;
-            if (w) {
-              a(w);
+            const k = f.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p, k) : [m(x, d)], j = await l(h, addLangToPrompt(f, g, h), B, b), { blocks: E, error: C } = j;
+            if (C) {
+              a(C);
               return;
             }
             if (h === "styles") {
-              const k = _.map((A) => {
-                for (const E in A)
-                  E !== "_id" && (A[E] = `${STYLES_KEY},${A[E]}`);
-                return A;
+              const v = E.map((S) => {
+                for (const I in S)
+                  I !== "_id" && (S[I] = `${STYLES_KEY},${S[I]}`);
+                return S;
               });
-              c(k);
+              c(v);
             } else
-              i(_);
+              i(E);
             y && y(j);
           } catch (b) {
             a(b);
@@ -2999,8 +2999,8 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       }),
       size({
         boundary: u == null ? void 0 : u.body,
-        apply({ availableWidth: y, availableHeight: b, elements: C }) {
-          Object.assign(C.floating.style, {
+        apply({ availableWidth: y, availableHeight: b, elements: k }) {
+          Object.assign(k.floating.style, {
             maxWidth: `${Math.max(200, y)}px`,
             maxHeight: `${Math.max(100, b)}px`
           });
@@ -3600,62 +3600,62 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: C, blockType: B } = useMemo(() => {
-      var I;
-      const A = o._type;
-      let E = o[r];
-      const S = getRegisteredChaiBlock(o._type);
-      return x && ((I = S == null ? void 0 : S.i18nProps) == null ? void 0 : I.includes(r)) && has(o, `${r}-${x}`) && (E = get(o, `${r}-${x}`)), { blockContent: E, blockType: A };
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: k, blockType: B } = useMemo(() => {
+      var _;
+      const S = o._type;
+      let I = o[r];
+      const A = getRegisteredChaiBlock(o._type);
+      return x && ((_ = A == null ? void 0 : A.i18nProps) == null ? void 0 : _.includes(r)) && has(o, `${r}-${x}`) && (I = get(o, `${r}-${x}`)), { blockContent: I, blockType: S };
     }, [o, x]), j = useCallback(
-      (A) => {
-        var S;
-        const E = A || ((S = g.current) == null ? void 0 : S.innerText);
-        h([b], { [r]: E }), u(null), c(null), d(-1), f(b ? [b] : []);
+      (S) => {
+        var A;
+        const I = S || ((A = g.current) == null ? void 0 : A.innerText);
+        h([b], { [r]: I }), u(null), c(null), d(-1), f(b ? [b] : []);
       },
       [b, h, c, f, x]
-    ), _ = useDebouncedCallback(
-      (A) => {
-        h([b], { [r]: A });
+    ), E = useDebouncedCallback(
+      (S) => {
+        h([b], { [r]: S });
       },
       [b, o, h, x],
       1e3
-    ), w = useCallback(
-      (A) => {
-        A.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
-          const E = y.current;
-          y.current = null, f([E]);
+    ), C = useCallback(
+      (S) => {
+        S.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
+          const I = y.current;
+          y.current = null, f([I]);
         }, 100);
       },
       [f, b, x]
     );
     useEffect(() => {
-      var v;
+      var w;
       if (!b) return;
-      const A = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${A}${E}`);
-      S && ((v = S == null ? void 0 : S.classList) == null || v.add("sr-only"), u(S));
+      const S = `[data-block-id="${b}"]`, I = i >= 0 ? `[data-block-index="${i}"]` : "", A = a.querySelector(`${S}${I}`);
+      A && ((w = A == null ? void 0 : A.classList) == null || w.add("sr-only"), u(A));
     }, [b, B, a, i]);
-    const k = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
+    const v = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: C,
+        blockContent: k,
         editingElement: p,
-        onChange: _,
+        onChange: E,
         onClose: j,
-        onEscape: w
+        onEscape: C
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
         editorRef: g,
-        blockContent: C,
+        blockContent: k,
         editingElement: p,
         onClose: j,
-        onChange: _,
-        onEscape: w
+        onChange: E,
+        onEscape: C
       }
-    )) : null, [p, b, B, C, j, x]);
+    )) : null, [p, b, B, k, j, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      k,
+      v,
       n
     ] });
   },
@@ -3694,7 +3694,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       key: f
     }) : applyLanguage(i, d, c),
     [i, d, c, g, m, x, f]
-  ), b = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), C = useMemo(
+  ), b = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), k = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
   ), B = useMemo(
@@ -3704,7 +3704,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       lang: d || p,
       ...y,
       ...b,
-      ...C,
+      ...k,
       ...o
     }),
     [
@@ -3714,12 +3714,12 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       p,
       y,
       b,
-      C,
+      k,
       o
     ]
-  ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
-  if (isNull(h) || !_) return null;
-  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
+  ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), E = useMemo(() => get(i, "_show", !0), [i]);
+  if (isNull(h) || !E) return null;
+  let C = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
     ...B,
     children: r({
       _id: i._id,
@@ -3732,8 +3732,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const k = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: w }) : w;
-  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: k }) : k;
+  const v = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: C }) : C;
+  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: v }) : v;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -3758,22 +3758,25 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   ] });
 }, PartialBlocksRenderer = ({ partialBlockId: o }) => {
   const { getPartailBlocks: n } = usePartialBlocksStore(), r = useMemo(() => n(o), [n, o]), a = useMemo(() => splitAtom(atom(r)), [r]);
-  return isEmpty(r) ? null : /* @__PURE__ */ jsx(PartialWrapper$1, { partialBlockId: o, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r }) });
+  return isEmpty(r) ? null : /* @__PURE__ */ jsx(PartialWrapper$1, { partialBlockId: o, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: a, blocks: r, type: "PartialBlock" }) });
 }, BlocksRenderer = ({
   blocks: o,
   parent: n = null,
-  splitAtoms: r = void 0
+  splitAtoms: r = void 0,
+  type: a = ""
 }) => {
-  const a = useGetBlockAtom(r), l = useMemo(
-    () => filter(o, (c) => has(c, "_id") && (isEmpty(n) ? !c._parent : c._parent === n)),
+  const l = useGetBlockAtom(r);
+  let i = useMemo(
+    () => filter(o, (d) => has(d, "_id") && (isEmpty(n) ? !d._parent : d._parent === n)),
     [o, n]
-  ), i = useCallback(
-    (c) => filter(o, (d) => d._parent === c).length > 0,
+  );
+  const c = useCallback(
+    (d) => filter(o, (p) => p._parent === d).length > 0,
     [o]
   );
-  return map(l, (c) => {
-    const d = a(c._id);
-    return d ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: c, children: (p) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: d, asyncProps: p, children: ({ _id: u, _type: g, partialBlockId: m, repeaterItems: h, $repeaterItemsKey: x }) => g === "Repeater" ? isArray(h) && h.map((f, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: m }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) : null }) }, c._id) : null;
+  return c && (a === "Heading" || a === "Paragraph" || a === "Link") && (i = adjustSpacingInContentBlocks(i)), map(i, (d) => {
+    const p = l(d._id);
+    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (u) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: u, children: ({ _id: g, _type: m, partialBlockId: h, repeaterItems: x, $repeaterItemsKey: f }) => m === "Repeater" ? isArray(x) && x.map((y, b) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: b, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) }, `${g}-${b}`)) : m === "GlobalBlock" || m === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : c(g) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) : null }) }, d._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3957,13 +3960,13 @@ const CanvasEventsWatcher = () => {
           spellCheck: "false",
           value: l,
           onChange: (d) => c(d.target.value),
-          placeholder: a("Enter SVG code here"),
+          placeholder: a("SVG_code"),
           rows: 2,
           className: "no-scrollbar w-full rounded-md border border-border bg-background px-3 py-1.5 text-xs shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG_code") })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
   const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (x) => {
@@ -4030,32 +4033,40 @@ const CanvasEventsWatcher = () => {
   ] });
 };
 MediaManagerModal.displayName = "MediaManagerModal";
-const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZmlsbD0iI2Q1ZDdkYSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkltYWdlIFBsYWNlaG9sZGVyPC90ZXh0Pjwvc3ZnPg==", ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
-  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = r.split(".").pop() || "", u = i ? `_${p}Id-${i}` : `_${p}Id`, g = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), m = get(c, u, g ? c == null ? void 0 : c.assetId : ""), h = !!m, x = (y) => {
-    const b = isArray(y) ? first(y) : y;
-    if (b) {
-      n(b == null ? void 0 : b.url);
-      const C = b == null ? void 0 : b.width, B = b == null ? void 0 : b.height;
+const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZmlsbD0iI2Q1ZDdkYSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkltYWdlIFBsYWNlaG9sZGVyPC90ZXh0Pjwvc3ZnPg==", getFileName = (o) => {
+  var l;
+  if (!o || startsWith(o, "data")) return "";
+  const n = ((l = o.split("/").pop()) == null ? void 0 : l.split("?")[0]) || "";
+  return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".avif"].some((i) => n.toLowerCase().endsWith(i)) ? n : "";
+}, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
+  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = r.split(".").pop() || "", u = i ? `_${p}Id-${i}` : `_${p}Id`, g = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), m = get(c, u, g ? c == null ? void 0 : c.assetId : ""), h = !!m || o !== PLACEHOLDER_IMAGE, x = (b) => {
+    const k = isArray(b) ? first(b) : b;
+    if (k) {
+      n(k == null ? void 0 : k.url);
+      const B = k == null ? void 0 : k.width, j = k == null ? void 0 : k.height, E = u.includes("mobile");
       if (c != null && c._id) {
-        const j = {
-          ...C && { width: C },
-          ...B && { height: B },
-          ...b.description && { alt: b.description }
+        const C = {
+          ...B && { [E ? "mobileWidth" : "width"]: B },
+          ...j && { [E ? "mobileHeight" : "height"]: j },
+          ...k.description && { alt: k.description }
         };
-        if (set(j, u, b.id), isEmpty(j)) return;
-        d([c._id], j);
+        if (set(C, u, k.id), isEmpty(C)) return;
+        d([c._id], C);
       }
     }
   }, f = useCallback(() => {
-    n(PLACEHOLDER_IMAGE), c != null && c._id && d([c._id], { assetId: "" });
-  }, [n, c == null ? void 0 : c._id, d]);
+    if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
+      const b = { assetId: "" }, k = u.includes("mobile");
+      set(b, k ? "mobileWidth" : "width", ""), set(b, k ? "mobileHeight" : "height", ""), d([c._id], b);
+    }
+  }, [n, c == null ? void 0 : c._id, d, u]), y = getFileName(o);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-x-3", children: [
     o ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsx(
         "img",
         {
           src: o,
-          className: "h-20 w-20 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (m && m !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
+          className: "h-14 w-14 overflow-hidden rounded-md border border-border object-cover transition duration-200 " + (m && m !== "" ? "cursor-pointer group-hover:blur-sm" : ""),
           alt: ""
         }
       ),
@@ -4076,11 +4087,11 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-4 w-4 text-white" })
         }
       ) })
-    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, mode: "image", assetId: m, children: /* @__PURE__ */ jsx("div", { className: "h-20 w-20 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
+    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, mode: "image", assetId: m, children: /* @__PURE__ */ jsx("div", { className: "h-14 w-14 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-3/5 flex-col", children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 cursor-pointer rounded-md bg-secondary px-2 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: o || !isEmpty(o) ? l("Replace image") : l("Choose image") }) }),
-        /* @__PURE__ */ jsx("small", { className: "-pl-4 pt-2 text-center text-xs text-secondary-foreground", children: "OR" })
+        /* @__PURE__ */ jsx("p", { className: "mb-1 max-w-[250px] truncate pr-2 text-xs text-gray-400", children: y }),
+        /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 w-fit cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(o) && o !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) })
       ] }),
       /* @__PURE__ */ jsx(
         "input",
@@ -4090,11 +4101,11 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           autoCorrect: "off",
           spellCheck: "false",
           type: "url",
-          className: "text-xs",
+          className: "!hidden text-xs",
           placeholder: l("Enter image URL"),
           value: o,
-          onBlur: ({ target: { value: y } }) => a(r, y),
-          onChange: (y) => n(y.target.value)
+          onBlur: ({ target: { value: b } }) => a(r, b),
+          onChange: (b) => n(b.target.value)
         }
       )
     ] })
@@ -4164,7 +4175,7 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
         Button,
         {
           size: "sm",
-          variant: "outline",
+          variant: "ghost",
           className: "h-5 rounded-sm px-1 py-0 text-[9px] text-muted-foreground",
           role: "combobox",
           "aria-expanded": a,
@@ -4210,13 +4221,13 @@ const DataBindingSelector = ({
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (b) => /[.,!?;:]/.test(b), x = (b, C, B) => {
-        let j = "", _ = "";
-        const w = C > 0 ? b[C - 1] : "", k = C < b.length ? b[C] : "";
-        return C > 0 && (w === "." || !h(w) && w !== " ") && (j = " "), C < b.length && !h(k) && k !== " " && (_ = " "), {
-          text: j + B + _,
+      const h = (b) => /[.,!?;:]/.test(b), x = (b, k, B) => {
+        let j = "", E = "";
+        const C = k > 0 ? b[k - 1] : "", v = k < b.length ? b[k] : "";
+        return k > 0 && (C === "." || !h(C) && C !== " ") && (j = " "), k < b.length && !h(v) && v !== " " && (E = " "), {
+          text: j + B + E,
           prefixLength: j.length,
-          suffixLength: _.length
+          suffixLength: E.length
         };
       }, f = document.getElementById(r);
       if (!f) return;
@@ -4224,30 +4235,30 @@ const DataBindingSelector = ({
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
         const b = y.__chaiRTE;
         if (b) {
-          const C = `{{${g}}}`;
+          const k = `{{${g}}}`;
           b.commands.focus();
           const { from: B, to: j } = b.state.selection;
           if (B !== j)
-            b.chain().deleteSelection().insertContent(C).run();
+            b.chain().deleteSelection().insertContent(k).run();
           else {
-            const { state: w } = b, k = w.selection.from, A = w.doc.textBetween(Math.max(0, k - 1), k), E = w.doc.textBetween(k, Math.min(k + 1, w.doc.content.size));
-            let S = "";
-            k > 0 && A !== " " && !h(A) && (S = " ");
-            let v = "";
-            E && E !== " " && !h(E) && (v = " "), b.chain().insertContent(S + C + v).run();
+            const { state: C } = b, v = C.selection.from, S = C.doc.textBetween(Math.max(0, v - 1), v), I = C.doc.textBetween(v, Math.min(v + 1, C.doc.content.size));
+            let A = "";
+            v > 0 && S !== " " && !h(S) && (A = " ");
+            let w = "";
+            I && I !== " " && !h(I) && (w = " "), b.chain().insertContent(A + k + w).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const b = f, C = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || C;
-        if (j > C) {
-          const E = `{{${g}}}`, { text: S } = x(B, C, E), v = B.slice(0, C) + S + B.slice(j);
-          n(v, {}, r);
+        const b = f, k = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || k;
+        if (j > k) {
+          const I = `{{${g}}}`, { text: A } = x(B, k, I), w = B.slice(0, k) + A + B.slice(j);
+          n(w, {}, r);
           return;
         }
-        const w = `{{${g}}}`, { text: k } = x(B, C, w), A = B.slice(0, C) + k + B.slice(C);
-        n(A, {}, r);
+        const C = `{{${g}}}`, { text: v } = x(B, k, C), S = B.slice(0, k) + v + B.slice(k);
+        n(S, {}, r);
       }
     },
     [r, n, a, c == null ? void 0 : c._id, d]
@@ -4268,74 +4279,74 @@ const DataBindingSelector = ({
   pageTypes: n,
   onChange: r
 }) => {
-  var E;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, v) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [y, b] = useState(-1), C = useRef(null), B = (E = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : E.name;
+  var I;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (A, w) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [y, b] = useState(-1), k = useRef(null), B = (I = n == null ? void 0 : n.find((A) => A.key === u)) == null ? void 0 : I.name;
   useEffect(() => {
     if (h(""), f([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), v = get(S, 1, "page") || "page";
-    g(v), (async () => {
-      const I = await l(v, [get(S, 2, "page")]);
-      I && Array.isArray(I) && h(get(I, [0, "name"], ""));
+    const A = split(o, ":"), w = get(A, 1, "page") || "page";
+    g(w), (async () => {
+      const _ = await l(w, [get(A, 2, "page")]);
+      _ && Array.isArray(_) && h(get(_, [0, "name"], ""));
     })();
   }, [o]);
   const j = useDebouncedCallback(
-    async (S) => {
-      if (isEmpty(S))
+    async (A) => {
+      if (isEmpty(A))
         f([]);
       else {
-        const v = await l(u, S);
-        f(v);
+        const w = await l(u, A);
+        f(w);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), _ = (S) => {
-    const v = ["pageType", u, S.id];
-    v[1] && (r(v.join(":")), h(S.name), p(!1), f([]), b(-1));
-  }, w = (S) => {
-    switch (S.key) {
+  ), E = (A) => {
+    const w = ["pageType", u, A.id];
+    w[1] && (r(w.join(":")), h(A.name), p(!1), f([]), b(-1));
+  }, C = (A) => {
+    switch (A.key) {
       case "ArrowDown":
-        S.preventDefault(), b((v) => v < x.length - 1 ? v + 1 : v);
+        A.preventDefault(), b((w) => w < x.length - 1 ? w + 1 : w);
         break;
       case "ArrowUp":
-        S.preventDefault(), b((v) => v > 0 ? v - 1 : v);
+        A.preventDefault(), b((w) => w > 0 ? w - 1 : w);
         break;
       case "Enter":
-        if (S.preventDefault(), x.length === 0) return;
-        y >= 0 && _(x[y]);
+        if (A.preventDefault(), x.length === 0) return;
+        y >= 0 && E(x[y]);
         break;
       case "Escape":
-        S.preventDefault(), k();
+        A.preventDefault(), v();
         break;
     }
   };
   useEffect(() => {
-    if (y >= 0 && C.current) {
-      const S = C.current.children[y];
-      S == null || S.scrollIntoView({ block: "nearest" });
+    if (y >= 0 && k.current) {
+      const A = k.current.children[y];
+      A == null || A.scrollIntoView({ block: "nearest" });
     }
   }, [y]);
-  const k = () => {
+  const v = () => {
     h(""), f([]), b(-1), p(!1), r("");
-  }, A = (S) => {
-    h(S), p(!isEmpty(S)), c(!0), j(S);
+  }, S = (A) => {
+    h(A), p(!isEmpty(A)), c(!0), j(A);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(n, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (A) => g(A.target.value), children: map(n, (A) => /* @__PURE__ */ jsx("option", { value: A.key, children: A.name }, A.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (S) => A(S.target.value),
-          onKeyDown: w,
+          onChange: (A) => S(A.target.value),
+          onKeyDown: C,
           placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: k, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: v, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -4345,35 +4356,41 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(x == null ? void 0 : x.slice(0, 20), (S, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: k, children: map(x == null ? void 0 : x.slice(0, 20), (A, w) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : v === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => E(A),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(A.id) ? "bg-blue-200" : w === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          S.name,
+          A.name,
           " ",
-          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          A.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            S.slug,
+            A.slug,
             " )"
           ] })
         ]
       },
-      S.id
+      A.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
-  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n, p = useBuilderProp("pageTypes", []), u = i === "pageType" && isEmpty(p) ? "url" : i;
+  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: u, fallbackLang: g, languages: m } = useLanguages(), h = useMemo(
+    () => isEmpty(m) ? "" : isEmpty(u) ? g : u,
+    [m, u, g]
+  ), x = useMemo(() => get(LANGUAGES, h, h), [h]), f = i === "pageType" && isEmpty(p) ? "url" : i;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-x-2 text-xs font-medium", children: [
-      (o == null ? void 0 : o.title) ?? "Link",
+      /* @__PURE__ */ jsxs("span", { children: [
+        (o == null ? void 0 : o.title) ?? "Link",
+        /* @__PURE__ */ jsx("span", { className: "pl-1 text-[9px] text-zinc-400", children: x })
+      ] }),
       /* @__PURE__ */ jsx(
         DataBindingSelector,
         {
           schema: o,
-          onChange: (g) => {
-            console.log("value", n, g), r({ ...n, href: g, ...u === "pageType" ? { type: "url" } : {} });
+          onChange: (y) => {
+            r({ ...n, href: y, ...f === "pageType" ? { type: "url" } : {} });
           },
           id: `root.${a}.href`,
           formData: n
@@ -4381,7 +4398,7 @@ const DataBindingSelector = ({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1.5", children: [
-      /* @__PURE__ */ jsx("select", { name: "type", value: i, onChange: (g) => r({ ...n, type: g.target.value }), children: map(
+      /* @__PURE__ */ jsx("select", { name: "type", value: i, onChange: (y) => r({ ...n, type: y.target.value }), children: map(
         [
           ...isEmpty(p) ? [] : [{ const: "pageType", title: l("Goto Page") }],
           { const: "url", title: l("Open URL") },
@@ -4389,14 +4406,14 @@ const DataBindingSelector = ({
           { const: "telephone", title: l("Call Phone") },
           { const: "scroll", title: l("Scroll to element") }
         ],
-        (g) => /* @__PURE__ */ jsx("option", { value: g.const, children: g.title }, g.const)
+        (y) => /* @__PURE__ */ jsx("option", { value: y.const, children: y.title }, y.const)
       ) }),
-      u === "pageType" && !isEmpty(p) ? /* @__PURE__ */ jsx(
+      f === "pageType" && !isEmpty(p) ? /* @__PURE__ */ jsx(
         PageTypeField,
         {
           href: c,
           pageTypes: p,
-          onChange: (g) => r({ ...n, href: g })
+          onChange: (y) => r({ ...n, href: y })
         }
       ) : null,
       /* @__PURE__ */ jsx(
@@ -4408,13 +4425,13 @@ const DataBindingSelector = ({
           spellCheck: "false",
           name: "href",
           type: "text",
-          className: u === "pageType" ? "!hidden" : "",
+          className: f === "pageType" ? "!hidden" : "",
           value: c,
-          onChange: (g) => r({ ...n, href: g.target.value }),
+          onChange: (y) => r({ ...n, href: y.target.value }),
           placeholder: l(i === "url" ? "Enter URL" : i === "scroll" ? "#ElementID" : "Enter details")
         }
       ),
-      u === "url" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
+      f === "url" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -4664,11 +4681,11 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     if (x !== f)
       u.chain().deleteSelection().insertContent(h).run();
     else {
-      const { state: b } = u, C = b.selection.from, B = b.doc.textBetween(Math.max(0, C - 1), C), j = b.doc.textBetween(C, Math.min(C + 1, b.doc.content.size));
-      let _ = "";
-      C > 0 && B !== " " && !/[.,!?;:]/.test(B) && (_ = " ");
-      let w = "";
-      j && j !== " " && !/[.,!?;:]/.test(j) && (w = " "), u.chain().insertContent(_ + h + w).run();
+      const { state: b } = u, k = b.selection.from, B = b.doc.textBetween(Math.max(0, k - 1), k), j = b.doc.textBetween(k, Math.min(k + 1, b.doc.content.size));
+      let E = "";
+      k > 0 && B !== " " && !/[.,!?;:]/.test(B) && (E = " ");
+      let C = "";
+      j && j !== " " && !/[.,!?;:]/.test(j) && (C = " "), u.chain().insertContent(E + h + C).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (m) => !m && n(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4952,98 +4969,116 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
     u.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
   ] }) });
-}, JSONFormFieldTemplate = ({
-  id: o,
-  classNames: n,
-  label: r,
-  children: a,
-  errors: l,
-  help: i,
-  hidden: c,
-  required: d,
-  schema: p,
-  formData: u,
-  onChange: g
-}) => {
-  const { selectedLang: m, fallbackLang: h, languages: x } = useLanguages(), f = useMemo(
-    () => isEmpty(x) ? "" : isEmpty(m) ? h : m,
-    [x, m, h]
-  ), y = useMemo(() => get(LANGUAGES, f, f), [f]), b = usePageExternalData(), C = useSelectedBlock(), B = useRegisteredChaiBlocks(), j = useMemo(
-    () => get(B, [C == null ? void 0 : C._type, "i18nProps"], []),
-    [B, C == null ? void 0 : C._type]
-  ), [_, w] = useState(null);
-  if (c)
+}, JSONFormFieldTemplate = (o) => {
+  const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), y = useMemo(
+    () => isEmpty(f) ? "" : isEmpty(h) ? x : h,
+    [f, h, x]
+  ), b = useMemo(() => get(LANGUAGES, y, y), [y]), k = usePageExternalData(), B = useSelectedBlock(), j = useRegisteredChaiBlocks(), E = useMemo(
+    () => get(j, [B == null ? void 0 : B._type, "i18nProps"], []),
+    [j, B == null ? void 0 : B._type]
+  ), [C, v] = useState(null);
+  if (d)
     return null;
-  if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const A = j == null ? void 0 : j.includes(o.replace("root.", ""));
-  if (p.type === "array") {
-    const E = _ === o;
-    return /* @__PURE__ */ jsxs("div", { className: `${n} relative`, children: [
-      p.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
+  if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
+  const I = E == null ? void 0 : E.includes(n.replace("root.", ""));
+  if (u.type === "array") {
+    const _ = C === n;
+    return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
+      u.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
-          htmlFor: o,
-          onClick: () => w(E ? null : o),
+          htmlFor: n,
+          onClick: () => v(_ ? null : n),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            E ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
+            _ ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(ListBulletIcon, { className: "h-3 w-3" }),
-            /* @__PURE__ */ jsx("span", { className: "leading-tight", children: r }),
+            /* @__PURE__ */ jsx("span", { className: "leading-tight", children: a }),
             " ",
-            /* @__PURE__ */ jsx(Badge, { className: "m-0 bg-gray-200 px-2 leading-tight text-gray-500 hover:bg-gray-200 hover:text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-slate-600", children: u == null ? void 0 : u.length }) }),
-            p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(Badge, { className: "m-0 bg-gray-200 px-2 leading-tight text-gray-500 hover:bg-gray-200 hover:text-gray-500", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-medium text-slate-600", children: g == null ? void 0 : g.length }) }),
+            u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                 InfoCircledIcon,
                 {
                   className: "h-3 w-3 text-muted-foreground/70",
-                  onClick: (S) => S.stopPropagation(),
-                  onMouseDown: (S) => S.stopPropagation()
+                  onClick: (L) => L.stopPropagation(),
+                  onMouseDown: (L) => L.stopPropagation()
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
+              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
             ] }) })
           ]
         }
       ) }),
-      (u == null ? void 0 : u.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${E ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
-        a,
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: l }) : /* @__PURE__ */ jsxs("div", { className: `${_ ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         l,
-        i
+        i,
+        c
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: n, children: [
-    p.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+  const A = n.replace("root.", ""), w = E.includes(A) && !isEmpty(h) && isEmpty(g);
+  return /* @__PURE__ */ jsxs("div", { className: r, children: [
+    u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: o, className: p.type === "object" ? "pb-2" : "", children: [
-          r,
+        /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.type === "object" ? "pb-2" : "", children: [
+          a,
           " ",
-          A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          I && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
-            y
+            b
           ] }),
-          d && p.type !== "object" ? " *" : null
+          p && u.type !== "object" ? " *" : null
         ] }),
-        p.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-3 w-3 text-muted-foreground/70" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: p.description })
+          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
         ] }) })
       ] }),
-      !p.enum && !p.oneOf && b && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-        DataBindingSelector,
-        {
-          schema: p,
-          onChange: (E) => {
-            g(E, u, o);
-          },
-          id: o,
-          formData: u
-        }
-      ) })
+      !u.enum && !u.oneOf && k && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+        w ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              className: "lucide lucide-triangle-alert-icon lucide-triangle-alert h-3 w-3 text-orange-400",
+              children: [
+                /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+                /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(TooltipContent, { className: "max-w-xs", children: [
+            "No translation provided. ",
+            /* @__PURE__ */ jsx("br", {}),
+            "Using default language value."
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          DataBindingSelector,
+          {
+            schema: u,
+            onChange: (_) => {
+              m(_, g, n);
+            },
+            id: n,
+            formData: g
+          }
+        )
+      ] })
     ] }),
-    a,
     l,
-    i
+    i,
+    c
   ] });
 }, RepeaterBindingWidget = ({ value: o, onChange: n }) => {
   var i;
@@ -5140,43 +5175,43 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: w }, k, A) => {
-    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(w, k) }, A);
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), x = ({ formData: C }, v, S) => {
+    v && (c == null ? void 0 : c._id) === n._id && a([n._id], { [v]: get(C, v) }, S);
   }, f = useCallback(
-    debounce(({ formData: w }, k, A) => {
-      x({ formData: w }, k, A), d(w);
+    debounce(({ formData: C }, v, S) => {
+      x({ formData: C }, v, S), d(C);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: w }, k) => {
-    k && (r([n._id], { [k]: get(w, k) }), f({ formData: w }, k, { [k]: get(c, k) }));
-  }, b = ({ formData: w }, k) => {
-    k && (r([g._id], { [k]: get(w, k) }), f({ formData: w }, k, { [k]: get(c, k) }));
-  }, { schema: C, uiSchema: B } = useMemo(() => {
-    const w = n == null ? void 0 : n._type;
-    if (!w)
+  ), y = ({ formData: C }, v) => {
+    v && (r([n._id], { [v]: get(C, v) }), f({ formData: C }, v, { [v]: get(c, v) }));
+  }, b = ({ formData: C }, v) => {
+    v && (r([g._id], { [v]: get(C, v) }), f({ formData: C }, v, { [v]: get(c, v) }));
+  }, { schema: k, uiSchema: B } = useMemo(() => {
+    const C = n == null ? void 0 : n._type;
+    if (!C)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: k, uiSchema: A } = getBlockFormSchemas(w);
-      if (w === "Repeater") {
-        const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(A, "filter", { "ui:widget": "collectionSelect" }), set(A, "sort", { "ui:widget": "collectionSelect" })) : (set(A, "filter", { "ui:widget": "hidden" }), set(A, "sort", { "ui:widget": "hidden" }));
+      const { schema: v, uiSchema: S } = getBlockFormSchemas(C);
+      if (C === "Repeater") {
+        const I = get(n, "repeaterItems", "");
+        startsWith(I, `{{${COLLECTION_PREFIX}`) ? (set(S, "filter", { "ui:widget": "collectionSelect" }), set(S, "sort", { "ui:widget": "collectionSelect" })) : (set(S, "filter", { "ui:widget": "hidden" }), set(S, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: k, uiSchema: A };
+      return { schema: v, uiSchema: S };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
+  }, [n]), { wrapperSchema: j, wrapperUiSchema: E } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const w = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: A = {} } = getBlockFormSchemas(w);
-    return { wrapperSchema: k, wrapperUiSchema: A };
+    const C = g == null ? void 0 : g._type, { schema: v = {}, uiSchema: S = {} } = getBlockFormSchemas(C);
+    return { wrapperSchema: v, wrapperUiSchema: S };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => u((w) => !w),
+          onClick: () => u((C) => !C),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
@@ -5198,17 +5233,17 @@ function BlockSettings() {
           onChange: b,
           formData: h,
           schema: j,
-          uiSchema: _
+          uiSchema: E
         }
       ) })
     ] }),
-    isEmpty(C) ? null : /* @__PURE__ */ jsx(
+    isEmpty(k) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: y,
         formData: i,
-        schema: C,
+        schema: k,
         uiSchema: B
       }
     )
@@ -5420,50 +5455,50 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [y, b] = useState(""), [C, B] = useState(!1), [j, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [y, b] = useState(""), [k, B] = useState(!1), [j, E] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: v } = getClassValueAndUnit(i);
-    if (v === "") {
-      l(S), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: A, unit: w } = getClassValueAndUnit(i);
+    if (w === "") {
+      l(A), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(v), l(v === "class" || isEmpty(S) ? "" : S);
+    h(w), l(w === "class" || isEmpty(A) ? "" : A);
   }, [i, p, u]);
-  const w = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), k = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), A = useCallback(
-    (S = !1) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
+  const C = useThrottledCallback((A) => c(A), [c], THROTTLE_TIME), v = useThrottledCallback((A) => c(A, !1), [c], THROTTLE_TIME), S = useCallback(
+    (A = !1) => {
+      const w = getUserInputValues(`${a}`, u);
+      if (get(w, "error", !1)) {
         f(!0);
         return;
       }
-      const I = get(v, "unit") !== "" ? get(v, "unit") : m;
-      if (I === "auto" || I === "none") {
-        w(`${d}${I}`);
+      const _ = get(w, "unit") !== "" ? get(w, "unit") : m;
+      if (_ === "auto" || _ === "none") {
+        C(`${d}${_}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(w, "value") === "")
         return;
-      const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      S ? k(T) : w(T);
+      const T = `${get(w, "value", "").startsWith("-") ? "-" : ""}${d}[${get(w, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      A ? v(T) : C(T);
     },
-    [w, k, a, m, d, u]
-  ), E = useCallback(
-    (S) => {
-      const v = getUserInputValues(`${a}`, u);
-      if (get(v, "error", !1)) {
+    [C, v, a, m, d, u]
+  ), I = useCallback(
+    (A) => {
+      const w = getUserInputValues(`${a}`, u);
+      if (get(w, "error", !1)) {
         f(!0);
         return;
       }
-      if (S === "auto" || S === "none") {
-        w(`${d}${S}`);
+      if (A === "auto" || A === "none") {
+        C(`${d}${A}`);
         return;
       }
-      if (get(v, "value") === "")
+      if (get(w, "value") === "")
         return;
-      const I = get(v, "unit") !== "" ? get(v, "unit") : S, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      w(T);
+      const _ = get(w, "unit") !== "" ? get(w, "unit") : A, T = `${get(w, "value", "").startsWith("-") ? "-" : ""}${d}[${get(w, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      C(T);
     },
-    [w, a, d, u]
+    [C, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5478,37 +5513,37 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${C ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${k ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (S) => {
-            S.key === "Enter" && A();
+          onKeyPress: (A) => {
+            A.key === "Enter" && S();
           },
-          onKeyDown: (S) => {
-            if (S.keyCode !== 38 && S.keyCode !== 40)
+          onKeyDown: (A) => {
+            if (A.keyCode !== 38 && A.keyCode !== 40)
               return;
-            S.preventDefault(), _(!0);
-            const v = parseInt$1(S.target.value);
-            let I = isNaN$1(v) ? 0 : v;
-            S.keyCode === 38 && (I += 1), S.keyCode === 40 && (I -= 1);
-            const L = `${I}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
-            k(P);
+            A.preventDefault(), E(!0);
+            const w = parseInt$1(A.target.value);
+            let _ = isNaN$1(w) ? 0 : w;
+            A.keyCode === 38 && (_ += 1), A.keyCode === 40 && (_ -= 1);
+            const L = `${_}`, P = `${L.startsWith("-") ? "-" : ""}${d}[${L.replace("-", "")}${m === "-" ? "" : m}]`;
+            v(P);
           },
-          onKeyUp: (S) => {
-            j && (S.preventDefault(), _(!1));
+          onKeyUp: (A) => {
+            j && (A.preventDefault(), E(!1));
           },
-          onBlur: () => A(),
-          onChange: (S) => {
-            f(!1), l(S.target.value);
+          onBlur: () => S(),
+          onChange: (A) => {
+            f(!1), l(A.target.value);
           },
-          onClick: (S) => {
-            var v;
-            (v = S == null ? void 0 : S.target) == null || v.select(), r(!1);
+          onClick: (A) => {
+            var w;
+            (w = A == null ? void 0 : A.target) == null || w.select(), r(!1);
           },
-          value: C ? y : a,
+          value: k ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             x ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5533,29 +5568,29 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: m,
-            onSelect: (S) => {
-              r(!1), h(S), E(S);
+            onSelect: (A) => {
+              r(!1), h(A), I(A);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || k ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
         onDragStart: () => B(!0),
-        onDragEnd: (S) => {
-          if (b(() => ""), B(!1), isEmpty(S))
+        onDragEnd: (A) => {
+          if (b(() => ""), B(!1), isEmpty(A))
             return;
-          const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          w(L);
+          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
+          C(L);
         },
-        onDrag: (S) => {
-          if (isEmpty(S))
+        onDrag: (A) => {
+          if (isEmpty(A))
             return;
-          b(S);
-          const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          k(L);
+          b(A);
+          const w = `${A}`, L = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${m === "-" ? "" : m}]`;
+          v(L);
         },
         currentValue: a,
         unit: m,
@@ -6019,21 +6054,21 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (k, A = !0) => {
-      const E = { dark: p, mq: g, mod: u, cls: k, property: l, fullCls: "" };
-      (p || u !== "") && (E.mq = "xs");
-      const S = generateFullClsName(E);
-      h(f, [S], A);
+    (v, S = !0) => {
+      const I = { dark: p, mq: g, mod: u, cls: v, property: l, fullCls: "" };
+      (p || u !== "") && (I.mq = "xs");
+      const A = generateFullClsName(I);
+      h(f, [A], S);
     },
     [f, p, g, u, l, h]
-  ), C = useCallback(() => {
+  ), k = useCallback(() => {
     x(f, [y], !0);
   }, [f, y, x]), B = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(B, m);
   }, [B, i, m]);
-  const [, , j] = useScreenSizeWidth(), _ = useCallback(
-    (k) => {
+  const [, , j] = useScreenSizeWidth(), E = useCallback(
+    (v) => {
       j({
         xs: 400,
         sm: 640,
@@ -6041,12 +6076,12 @@ const COLOR_PROP = {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[k]);
+      }[v]);
     },
     [j]
-  ), w = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !w ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), C = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && C, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !C ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6065,7 +6100,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: C ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => k(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6085,7 +6120,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => _(get(m, "mq")),
+              onClick: () => E(get(m, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6286,7 +6321,7 @@ const COLOR_PROP = {
   tooltip: r = !0
 }) => {
   const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), x = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((C) => C !== b)) : g((C) => [...C, b]);
+    u.includes(b) ? u.length > 2 && g(u.filter((k) => k !== b)) : g((k) => [...k, b]);
   }, f = (b) => {
     n || l(b), c(b);
   }, y = getBreakpointValue(n ? i : a).toLowerCase();
@@ -6466,10 +6501,10 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var L;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [x, f] = useState(""), y = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), C = b.split(" ").filter((T) => !isEmpty(T)), B = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [x, f] = useState(""), y = (L = first(d)) == null ? void 0 : L.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), k = b.split(" ").filter((T) => !isEmpty(T)), B = () => {
     const T = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, T, !0), f("");
-  }, [j, _] = useState([]), w = ({ value: T }) => {
+  }, [j, E] = useState([]), C = ({ value: T }) => {
     const P = T.trim().toLowerCase(), R = P.match(/.+:/g);
     let N = [];
     if (R && R.length > 0) {
@@ -6480,10 +6515,10 @@ function ManualClasses() {
       }));
     } else
       N = i.search(P);
-    return _(map(N, "item"));
-  }, k = () => {
-    _([]);
-  }, A = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
+    return E(map(N, "item"));
+  }, v = () => {
+    E([]);
+  }, S = (T) => T.name, I = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), A = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6504,23 +6539,23 @@ function ManualClasses() {
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [x, c, o]
-  ), v = (T) => {
+  ), w = (T) => {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [T]), u(m, P, !0), r(""), l(-1);
-  }, I = () => {
+  }, _ = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(C.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(k.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: I, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: _, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -6537,11 +6572,11 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: j,
-          onSuggestionsFetchRequested: w,
-          onSuggestionsClearRequested: k,
-          getSuggestionValue: A,
-          renderSuggestion: E,
-          inputProps: S,
+          onSuggestionsFetchRequested: C,
+          onSuggestionsClearRequested: v,
+          getSuggestionValue: S,
+          renderSuggestion: I,
+          inputProps: A,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6564,7 +6599,7 @@ function ManualClasses() {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: C.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: k.map(
       (T, P) => a === P ? /* @__PURE__ */ jsx(
         "input",
         {
@@ -6572,10 +6607,10 @@ function ManualClasses() {
           value: n,
           onChange: (R) => r(R.target.value),
           onBlur: () => {
-            v(T);
+            w(T);
           },
           onKeyDown: (R) => {
-            R.key === "Enter" && v(T);
+            R.key === "Enter" && w(T);
           },
           onFocus: (R) => {
             setTimeout(() => {
@@ -6952,17 +6987,17 @@ const registerChaiLibrary = (o, n) => {
         draggable: x ? "true" : "false",
         onDragStart: async (B) => {
           const j = await c({ library: n, block: o });
-          let _ = r;
-          if (y(first(j)) && (_ = null), !isEmpty(j)) {
-            const w = { blocks: j, uiLibrary: !0, parent: _ };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
-              const k = new Image();
-              k.src = o.preview, k.onload = () => {
-                B.dataTransfer.setDragImage(k, 0, 0);
+          let E = r;
+          if (y(first(j)) && (E = null), !isEmpty(j)) {
+            const C = { blocks: j, uiLibrary: !0, parent: E };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(C)), o.preview) {
+              const v = new Image();
+              v.src = o.preview, v.onload = () => {
+                B.dataTransfer.setDragImage(v, 0, 0);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            f(w), setTimeout(() => {
+            f(C), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6982,13 +7017,10 @@ const registerChaiLibrary = (o, n) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
-      /* @__PURE__ */ jsx("p", { className: "font-medium", children: m }),
-      h && o.preview && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-primary-foreground", children: h })
-    ] }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: m }) }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((v) => v.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), x = useRef(null);
+  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((w) => w.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), x = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (x.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7000,27 +7032,27 @@ const registerChaiLibrary = (o, n) => {
       h([]);
       return;
     }
-    const v = x.current.search(u).map((I) => I.item);
-    h(v);
+    const w = x.current.search(u).map((_) => _.item);
+    h(w);
   }, [u]);
-  const f = u.trim() && !isEmpty(m) ? m : c, y = groupBy(f, "group"), [b, C] = useState(null);
+  const f = u.trim() && !isEmpty(m) ? m : c, y = groupBy(f, "group"), [b, k] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
-      C(null);
+      k(null);
       return;
     }
     if (!b || !y[b]) {
-      C(first(keys(y)));
+      k(first(keys(y)));
       return;
     }
   }, [y, b]);
-  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), w = (v) => {
+  const B = get(y, b, []), j = useRef(null), { t: E } = useTranslation(), C = (w) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
-      j.current && C(v);
+      j.current && k(w);
     }, 400);
-  }, k = () => {
+  }, v = () => {
     i != null && i.id && p(i.id);
-  }, A = () => {
+  }, S = () => {
     g("");
   };
   if (d)
@@ -7028,23 +7060,23 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const E = filter(B, (v, I) => I % 2 === 0), S = filter(B, (v, I) => I % 2 === 1);
+  const I = filter(B, (w, _) => _ % 2 === 0), A = filter(B, (w, _) => _ % 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(MagnifyingGlassIcon, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         Input$1,
         {
-          placeholder: _("Search blocks..."),
+          placeholder: E("Search blocks..."),
           value: u,
-          onChange: (v) => g(v.target.value),
+          onChange: (w) => g(w.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: A,
+          onClick: S,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
         }
@@ -7054,31 +7086,31 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
         /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: E("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: k, variant: "outline", size: "sm", className: "gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: E("Failed to load the UI library. Try again") }),
+            /* @__PURE__ */ jsxs(Button, { onClick: v, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
-              _("Retry")
+              E("Retry")
             ] })
-          ] }) }) : map(y, (v, I) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(y, (w, _) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => w(I),
+              onMouseEnter: () => C(_),
               onMouseLeave: () => clearTimeout(j.current),
               role: "button",
-              onClick: () => C(I),
+              onClick: () => k(_),
               className: cn$2(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                I === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+                _ === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(_(I.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(E(_.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            I
+            _
           )) })
         ] })
       ] }),
@@ -7088,26 +7120,26 @@ const registerChaiLibrary = (o, n) => {
           onMouseEnter: () => j.current ? clearTimeout(j.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(B) && !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: _("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: E.map((v, I) => /* @__PURE__ */ jsx(
+            isEmpty(B) && !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: I.map((w, _) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: v,
+                  block: w,
                   library: i
                 },
-                `block-${I}`
+                `block-${_}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((v, I) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: A.map((w, _) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: v,
+                  block: w,
                   library: i
                 },
-                `block-second-${I}`
+                `block-second-${_}`
               )) })
             ] }),
             /* @__PURE__ */ jsx("br", {}),
@@ -7144,7 +7176,7 @@ const registerChaiLibrary = (o, n) => {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const h = Object.entries(a).map(([f, y]) => {
-          const b = y, C = b.type || "partial", B = formatReadableName(C);
+          const b = y, k = b.type || "partial", B = formatReadableName(k);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
@@ -7206,44 +7238,44 @@ const registerChaiLibrary = (o, n) => {
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4" }) => {
-  var S;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (S = find(c, (v) => v._id === r)) == null ? void 0 : S._type, [h, x] = useState("all"), [f, y] = useState(null), b = useRef(null);
+  var A;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (A = find(c, (w) => w._id === r)) == null ? void 0 : A._type, [h, x] = useState("all"), [f, y] = useState(null), b = useRef(null);
   useEffect(() => {
-    const v = setTimeout(() => {
-      var I;
-      (I = u.current) == null || I.focus();
+    const w = setTimeout(() => {
+      var _;
+      (_ = u.current) == null || _.focus();
     }, 0);
-    return () => clearTimeout(v);
+    return () => clearTimeout(w);
   }, [g]), useEffect(() => {
     d && (x("all"), y(null));
-  }, [d]), useEffect(() => (b.current = debounce((v) => {
-    x(v);
+  }, [d]), useEffect(() => (b.current = debounce((w) => {
+    x(w);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const C = useCallback((v) => {
-    y(v), b.current && b.current(v);
+  const k = useCallback((w) => {
+    y(w), b.current && b.current(w);
   }, []), B = useCallback(() => {
     y(null), b.current && b.current.cancel();
-  }, []), j = useCallback((v) => {
-    b.current && b.current.cancel(), x(v), y(null);
-  }, []), _ = useMemo(
+  }, []), j = useCallback((w) => {
+    b.current && b.current.cancel(), x(w), y(null);
+  }, []), E = useMemo(
     () => d ? values(n).filter(
-      (v) => {
-        var I, L;
-        return (((I = v.label) == null ? void 0 : I.toLowerCase()) + " " + ((L = v.type) == null ? void 0 : L.toLowerCase())).includes(d.toLowerCase());
+      (w) => {
+        var _, L;
+        return (((_ = w.label) == null ? void 0 : _.toLowerCase()) + " " + ((L = w.type) == null ? void 0 : L.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
-  ), w = useMemo(
+  ), C = useMemo(
     () => d ? o.filter(
-      (v) => reject(filter(values(_), { group: v }), { hidden: !0 }).length > 0
-    ) : o.filter((v) => reject(filter(values(n), { group: v }), { hidden: !0 }).length > 0),
-    [n, _, o, d]
-  ), k = useMemo(
-    () => sortBy(w, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
-    [w]
-  ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
+      (w) => reject(filter(values(E), { group: w }), { hidden: !0 }).length > 0
+    ) : o.filter((w) => reject(filter(values(n), { group: w }), { hidden: !0 }).length > 0),
+    [n, E, o, d]
+  ), v = useMemo(
+    () => sortBy(C, (w) => CORE_GROUPS.indexOf(w) === -1 ? 99 : CORE_GROUPS.indexOf(w)),
+    [C]
+  ), S = useMemo(() => h === "all" ? E : filter(values(E), { group: h }), [E, h]), I = useMemo(() => h === "all" ? v : [h], [v, h]);
   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,
@@ -7253,55 +7285,55 @@ const registerChaiLibrary = (o, n) => {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (v) => p(v.target.value)
+        onChange: (w) => p(w.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      k.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      v.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => j("all"),
-            onMouseEnter: () => C("all"),
+            onMouseEnter: () => k("all"),
             onMouseLeave: B,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || f === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        k.map((v) => /* @__PURE__ */ jsx(
+        v.map((w) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => j(v),
-            onMouseEnter: () => C(v),
+            onClick: () => j(w),
+            onMouseEnter: () => k(w),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === v || f === v ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(v.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === w || f === w ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(w.toLowerCase()))
           },
-          `sidebar-${v}`
+          `sidebar-${w}`
         ))
       ] }) }) }),
-      /* @__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: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
+      /* @__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: C.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
         i("No blocks found matching"),
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((v) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(v.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: I.map((w) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(w.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(A), { group: v }) : values(A),
+          h === "all" ? filter(values(S), { group: w }) : values(S),
           { hidden: !0 }
-        ).map((I) => /* @__PURE__ */ jsx(
+        ).map((_) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: r,
             position: a,
-            block: I,
-            disabled: !canAcceptChildBlock(m, I.type) || !canBeNestedInside(m, I.type)
+            block: _,
+            disabled: !canAcceptChildBlock(m, _.type) || !canBeNestedInside(m, _.type)
           },
-          I.type
+          _.type
         )) })
-      ] }, v)) }) }) })
+      ] }, w)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7327,8 +7359,8 @@ const registerChaiLibrary = (o, n) => {
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (C) => {
-          d(""), c(C);
+        onValueChange: (k) => {
+          d(""), c(k);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7338,13 +7370,13 @@ const registerChaiLibrary = (o, n) => {
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             f ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(x, (C) => /* @__PURE__ */ jsx(TabsTrigger, { value: C.id, children: React__default.createElement(C.tab) }, `tab-add-block-${C.id}`))
+            map(x, (k) => /* @__PURE__ */ jsx(TabsTrigger, { value: k.id, children: React__default.createElement(k.tab) }, `tab-add-block-${k.id}`))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           f ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(x, (C) => /* @__PURE__ */ jsx(TabsContent, { value: C.id, children: React__default.createElement(C.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${C.id}`))
+          map(x, (k) => /* @__PURE__ */ jsx(TabsContent, { value: k.id, children: React__default.createElement(k.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${k.id}`))
         ]
       }
     )
@@ -7654,19 +7686,19 @@ const Input = ({ node: o }) => {
   var R;
   const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
   let d = null;
-  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: f, isDragging: y, isEditing: b, handleClick: C } = o, B = get(h, "_show", !0), j = (N) => {
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: x, willReceiveDrop: f, isDragging: y, isEditing: b, handleClick: k } = o, B = get(h, "_show", !0), j = (N) => {
     N.stopPropagation(), B && o.toggle();
-  }, _ = (N) => {
+  }, E = (N) => {
     N.isInternal && (d = N.isOpen, N.isOpen && N.close());
-  }, w = (N) => {
+  }, C = (N) => {
     N.isInternal && d !== null && (d ? N.open() : N.close(), d = null);
-  }, [k, A] = useAtom$1(currentAddSelection), E = () => {
+  }, [v, S] = useAtom$1(currentAddSelection), I = () => {
     var N;
-    S(), o.parent.isSelected || A((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
-  }, S = () => {
-    A(null);
-  }, v = (N) => {
-    S(), N.stopPropagation(), !o.isOpen && B && o.toggle(), C(N);
+    A(), o.parent.isSelected || S((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+  }, A = () => {
+    S(null);
+  }, w = (N) => {
+    A(), N.stopPropagation(), !o.isOpen && B && o.toggle(), k(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
@@ -7674,13 +7706,13 @@ const Input = ({ node: o }) => {
     }, 500);
     return () => clearTimeout(N);
   }, [f, o, y]);
-  const I = (N, D) => {
+  const _ = (N, D) => {
     const F = i.contentDocument || i.contentWindow.document, O = F.querySelector(`[data-block-id=${N}]`);
     O && O.setAttribute("data-drop", D);
     const M = O.getBoundingClientRect(), H = i.getBoundingClientRect();
     M.top >= H.top && M.left >= H.left && M.bottom <= H.bottom && M.right <= H.right || (F.documentElement.scrollTop = O.offsetTop - H.top);
   }, L = (N) => {
-    S();
+    A();
     const D = get(o, "parent.id");
     D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: N }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: N });
   };
@@ -7708,20 +7740,20 @@ const Input = ({ node: o }) => {
     {
       onMouseEnter: () => u(m),
       onMouseLeave: () => g(),
-      onClick: v,
+      onClick: w,
       style: n,
       "data-node-id": m,
       ref: r,
-      onDragStart: () => _(o),
-      onDragEnd: () => w(o),
+      onDragStart: () => E(o),
+      onDragEnd: () => C(o),
       onDragOver: (N) => {
-        N.preventDefault(), I(m, "yes");
+        N.preventDefault(), _(m, "yes");
       },
       onDragLeave: (N) => {
-        N.preventDefault(), I(m, "no");
+        N.preventDefault(), _(m, "no");
       },
       onDrop: (N) => {
-        N.preventDefault(), I(m, "no");
+        N.preventDefault(), _(m, "no");
       },
       children: [
         c(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
@@ -7730,8 +7762,8 @@ const Input = ({ node: o }) => {
             onClick: (N) => {
               N.stopPropagation(), L(o.childIndex);
             },
-            onMouseEnter: E,
-            onMouseLeave: S,
+            onMouseEnter: I,
+            onMouseLeave: A,
             className: "absolute -top-0.5 h-0.5 w-[90%] rounded bg-primary/80 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-primary/80 p-1 outline outline-2 outline-white hover:bg-primary/80", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[2] text-white" }) })
           }
@@ -7743,7 +7775,7 @@ const Input = ({ node: o }) => {
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
               x ? "bg-primary/20" : "hover:bg-primary/10",
               f && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === k ? "bg-primary/10" : "",
+              (o == null ? void 0 : o.id) === v ? "bg-primary/10" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
               T && x && "bg-primary/20 text-primary"
@@ -8228,23 +8260,23 @@ const Input = ({ node: o }) => {
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
   const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions();
   if (d) {
-    const w = d.map((k) => Object.keys(k)[0]);
-    DEFAULT_THEME_PRESET.forEach((k) => {
-      const A = Object.keys(k)[0];
-      w.includes(A) || d.push(k);
+    const C = d.map((v) => Object.keys(v)[0]);
+    DEFAULT_THEME_PRESET.forEach((v) => {
+      const S = Object.keys(v)[0];
+      C.includes(S) || d.push(v);
     });
   }
   const [g, m] = useTheme(), h = useThemeOptions(), { t: x } = useTranslation(), f = React.useCallback(
-    (w) => {
-      const k = { ...g };
-      setPreviousTheme(k), m(w), toast.success("Theme updated", {
+    (C) => {
+      const v = { ...g };
+      setPreviousTheme(v), m(C), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            m(k), clearPreviousTheme(), toast.dismiss();
+            m(v), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
@@ -8253,61 +8285,61 @@ const Input = ({ node: o }) => {
     },
     [g, m]
   ), y = () => {
-    const w = d.find((k) => Object.keys(k)[0] === a);
-    if (w) {
-      const k = Object.values(w)[0];
-      k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? (f(k), l("")) : console.error("Invalid preset structure:", k);
+    const C = d.find((v) => Object.keys(v)[0] === a);
+    if (C) {
+      const v = Object.values(C)[0];
+      v && typeof v == "object" && "fontFamily" in v && "borderRadius" in v && "colors" in v ? (f(v), l("")) : console.error("Invalid preset structure:", v);
     } else
       console.error("Preset not found:", a);
-  }, b = (w) => {
-    f(w), l("");
-  }, C = useDebouncedCallback(
-    (w, k) => {
+  }, b = (C) => {
+    f(C), l("");
+  }, k = useDebouncedCallback(
+    (C, v) => {
       m(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [w.replace(/font-/g, "")]: k
+          [C.replace(/font-/g, "")]: v
         }
       }));
     },
     [g],
     200
   ), B = React.useCallback(
-    (w) => {
+    (C) => {
       m(() => ({
         ...g,
-        borderRadius: `${w}px`
+        borderRadius: `${C}px`
       }));
     },
     [g]
   ), j = useDebouncedCallback(
-    (w, k) => {
+    (C, v) => {
       m(() => {
-        const A = get(g, `colors.${w}`);
-        return n ? set(A, 1, k) : set(A, 0, k), {
+        const S = get(g, `colors.${C}`);
+        return n ? set(S, 1, v) : set(S, 0, v), {
           ...g,
           colors: {
             ...g.colors,
-            [w]: A
+            [C]: S
           }
         };
       });
     },
     [g],
     200
-  ), _ = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([k]) => {
-    const A = get(g, `colors.${k}.${n ? 1 : 0}`);
-    return A ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+  ), E = (C) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(C.items).map(([v]) => {
+    const S = get(g, `colors.${v}.${n ? 1 : 0}`);
+    return S ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: A,
-          onChange: (E) => j(k, E)
+          value: S,
+          onChange: (I) => j(v, I)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: k.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!k.toLowerCase().includes("foreground") && !k.toLowerCase().includes("border") && !k.toLowerCase().includes("input") && !k.toLowerCase().includes("ring") && !k.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, k) : null;
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: v.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((I) => I.charAt(0).toUpperCase() + I.slice(1)).join(" ") + (!v.toLowerCase().includes("foreground") && !v.toLowerCase().includes("border") && !v.toLowerCase().includes("input") && !v.toLowerCase().includes("ring") && !v.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, v) : null;
   }) });
   return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto", o), children: [
@@ -8322,9 +8354,9 @@ const Input = ({ node: o }) => {
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
           /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
             /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
-              const k = Object.keys(w)[0], A = k.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(A) }, k);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((C) => {
+              const v = Object.keys(C)[0], S = v.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: v, children: capitalize(S) }, v);
             }) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: y, children: x("Apply") }) })
@@ -8336,14 +8368,14 @@ const Input = ({ node: o }) => {
           /* @__PURE__ */ jsx(TextIcon, { className: "h-3 w-3 text-gray-600" }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
         ] }),
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([w, k]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([C, v]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: w,
-            value: g.fontFamily[w.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-            onChange: (A) => C(w, A)
+            label: C,
+            value: g.fontFamily[C.replace(/font-/g, "")] || v[Object.keys(v)[0]],
+            onChange: (S) => k(C, S)
           },
-          w
+          C
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -8369,7 +8401,7 @@ const Input = ({ node: o }) => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (w) => r(w),
+                  onCheckedChange: (C) => r(C),
                   "aria-label": "Toggle dark mode",
                   className: "mx-1"
                 }
@@ -8377,7 +8409,7 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((w) => _(w)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((C) => E(C)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -8395,9 +8427,15 @@ const Input = ({ node: o }) => {
     ] }),
     p && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(p) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
-}), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
+}), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Style", SVG_code = "Enter SVG code here", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", URL = "URL", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", Classes = "Classes", All = "All", Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", Apply = "Apply", Back = "Back", Insert = "Insert", Rename = "Rename", Partials = "Partials", Happy = "Happy", Sad = "Sad", Retry = "Retry", canvas_empty = "Canvas is empty", Presets = "Presets", No = "No", Saving = "Saving", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, lngEn = {
   "Add block": "Add Block",
+  "Add Block": "Add Block",
   "Add blocks": "Add blocks",
+  "Add inside": "Add inside",
+  "Add before": "Add before",
+  "Add after": "Add after",
+  "Add block inside": "Add block inside",
+  "Add field": "Add field",
   "Enter or paste TailwindCSS HTML snippet": "Enter or paste TailwindCSS HTML snippet",
   "Click to add block to page": "Click to add block to page",
   Core,
@@ -8438,6 +8476,9 @@ const Input = ({ node: o }) => {
   Preview,
   Settings,
   Styling,
+  SVG_code,
+  "Paste SVG_code": "Paste SVG code to use as an icon",
+  "Enter Key": "Enter Key",
   "Data Provider": "Data Provider",
   "Remove Provider Confirmation": "Are you sure you want to remove <span class='text-blue-500'>{name}</span> provider?",
   "Your data provider will be removed from this page and all added data binding will be not visible on blocks.": "Your data provider will be removed from this page and all added data binding will be not visible on blocks.",
@@ -8489,6 +8530,8 @@ const Input = ({ node: o }) => {
   Value,
   "Background Image": "Background Image",
   "Enter image URL": "Enter image URL",
+  "Enter URL": "Enter URL",
+  URL,
   "Replace image": "Replace image",
   "Choose image": "Choose image",
   Images,
@@ -8523,14 +8566,128 @@ const Input = ({ node: o }) => {
   "Saving...": "Saving...",
   "Improve writing": "Improve writing",
   "Replace placeholder content": "Replace placeholder content",
+  "Discard current placeholder content and replace with meaningful relevant content.": "Discard current placeholder content and replace with meaningful relevant content.",
   "Fix grammar": "Fix grammar",
+  "Fix grammar in all text elements. Ensuring the text is grammatically correct and free of errors.": "Fix grammar in all text elements. Ensuring the text is grammatically correct and free of errors.",
   "Make longer": "Make longer",
+  "Make all text elements longer.": "Make all text elements longer.",
   "Make shorter": "Make shorter",
+  "Make all text elements shorter.": "Make all text elements shorter.",
   "Add emojis": "Add emojis",
+  "Add emojis to text elements if relevant.": "Add emojis to text elements if relevant.",
   Randomize,
+  "Randomize all text elements.": "Randomize all text elements.",
   "Edit Block": "Edit Block",
   "AI Assistant": "AI Assistant",
-  "Theme Config": { "Heading Font": "Heading Font", "Body Font": "Body Font", "Rounded Corner": "Rounded Corners", Primary: "Primary", Secondary: "Secondary", Background: "Background", "Text Color": "Text Color", "Background Dark Mode": "Background (Dark Mode)", "Text Color Dark Mode": "Text Color (Dark Mode)" },
+  "Theme Config": { "Heading Font": "Heading Font", "Body Font": "Body Font", "Rounded Corner": "Rounded Corners", Primary: "Primary", Secondary: "Secondary", Background: "Background", "Text Color": "Text Color", "Background Dark Mode": "Background (Dark Mode)", "Text Color Dark Mode": "Text Color (Dark Mode)", "Reset styles": "Reset styles" },
+  "Copy classes to clipboard": "Copy classes to clipboard",
+  "Classes copied to clipboard": "Classes copied to clipboard",
+  Classes,
+  All,
+  "Enter classes separated by space": "Enter classes separated by space",
+  "Show hidden blocks": "Show hidden blocks",
+  "Expand all": "Expand all",
+  "Collapse all": "Collapse all",
+  "Choose library": "Choose library",
+  "Close Preview": "Close Preview",
+  Error: "Error",
+  "Failed to copy template": "Failed to copy template",
+  "Total tokens used": "Total tokens used",
+  "Updated AI Context": "Updated AI Context",
+  "You can now Ask AI to edit your content": "You can now Ask AI to edit your content",
+  "Tell about this page eg this page is about": "Tell about this page eg this page is about..",
+  "Delete Context": "Delete Context",
+  "Keyboard shortcuts": "Keyboard shortcuts",
+  Undo,
+  Redo,
+  Duplicate,
+  "Deselect blocks": "Deselect blocks",
+  "Delete block": "Delete block",
+  "Save page": "Save page",
+  "Scripts will be only executed in preview and live mode.": "Scripts will be only executed in preview and live mode.",
+  "HTML Code Editor |": "HTML Code Editor |",
+  Close,
+  "Coming soon": "Coming soon",
+  Selected,
+  Select,
+  "Choose Builder Layout": "Choose Builder Layout",
+  "Single side panel": "Single side panel",
+  "Suitable for smaller screens. Bigger canvas size.": "Suitable for smaller screens. Bigger canvas size.",
+  "Dual side panel": "Dual side panel",
+  "Suitable for larger screens. Smaller canvas size.": "Suitable for larger screens. Smaller canvas size.",
+  "Dual side panel advanced": "Dual side panel advanced",
+  "Suitable for heavy styling & block editing. Setting are always visible.": "Suitable for heavy styling & block editing. Setting are always visible.",
+  "Block Settings": "Block Settings",
+  "Visibility settings": "Visibility settings",
+  "Show on canvas": "Show on canvas",
+  Attributes,
+  "Apply Presets": "Apply Presets",
+  apply,
+  presets,
+  "Global presets": "Global presets",
+  Orientation,
+  Color,
+  "Please select an image": "Please select an image",
+  "click to upload": "click to upload",
+  "SVG, PNG, JPG or GIF (Max. 2mb)": "SVG, PNG, JPG or GIF (Max. 2mb)",
+  "Uploading...": "Uploading...",
+  Upload,
+  "Something went wrong": "Something went wrong",
+  "Fetching...": "Fetching...",
+  "No images found": "No images found",
+  "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.": "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.",
+  "Open Code Editor": "Open Code Editor",
+  "Clear search": "Clear search",
+  "No results found for": "No results found for",
+  "Search {{pageTypeName}}": "Search {{pageTypeName}}",
+  "Goto Page": "Goto Page",
+  "Open URL": "Open URL",
+  "Compose Email": "Compose Email",
+  "Call Phone": "Call Phone",
+  "Scroll to element": "Scroll to element",
+  "#ElementID": "#ElementID",
+  "Enter details": "Enter details",
+  "Open in new tab": "Open in new tab",
+  Apply,
+  Back,
+  Insert,
+  Rename,
+  "Unlink from library": "Unlink from library",
+  "Save to Library": "Save to Library",
+  "No blocks found in this group": "No blocks found in this group",
+  "No blocks found matching": "No blocks found matching",
+  "No matching blocks found": "No matching blocks found",
+  "Search blocks...": "Search blocks...",
+  Partials,
+  Happy,
+  Sad,
+  "Importing...": "Importing...",
+  "Failed to load the UI library. Try again": "Failed to load the UI library. Try again",
+  Retry,
+  "Oops! Something went wrong.": "Oops! Something went wrong.",
+  "Please try again.": "Please try again.",
+  "No option found.": "No option found.",
+  "Clipboard not supported": "Clipboard not supported",
+  "Are you sure you want to clear the page?": "Are you sure you want to clear the page?",
+  canvas_empty,
+  Presets,
+  "Reset style": "Reset style",
+  "Reset styles": "Reset styles",
+  "Clear styles": "Clear styles",
+  "Open code editor": "Open code editor",
+  "Style element": "Style element",
+  "Repeater Data": "Repeater Data",
+  "Toggle Data Binding": "Toggle Data Binding",
+  No,
+  Saving,
+  "Screen sizes": "Screen sizes",
+  "Theme Settings": "Theme Settings",
+  "Import CSS Theme": "Import CSS Theme",
+  "Import theme": "Import theme",
+  "Import Theme": "Import Theme",
+  "CSS Variables": "CSS Variables",
+  "You don't have permission to edit settings or styles": "You don't have permission to edit settings or styles",
+  "Please contact your administrator to get access": "Please contact your administrator to get access",
   "flex.heading": "Flex Child",
   "flex.basis": "Basis",
   "flex.order": "Order",
@@ -8700,64 +8857,7 @@ const Input = ({ node: o }) => {
   "effect.delay": "Delay",
   "classes.heading": "Classes",
   theme_config,
-  web_blocks,
-  "Copy classes to clipboard": "Copy classes to clipboard",
-  "Classes copied to clipboard": "Classes copied to clipboard",
-  "Show hidden blocks": "Show hidden blocks",
-  "Expand all": "Expand all",
-  "Collapse all": "Collapse all",
-  "Choose library": "Choose library",
-  "Close Preview": "Close Preview",
-  Error: "Error",
-  "Failed to copy template": "Failed to copy template",
-  "Total tokens used": "Total tokens used",
-  "Updated AI Context": "Updated AI Context",
-  "You can now Ask AI to edit your content": "You can now Ask AI to edit your content",
-  "Tell about this page eg this page is about": "Tell about this page eg this page is about..",
-  "Delete Context": "Delete Context",
-  "Keyboard shortcuts": "Keyboard shortcuts",
-  Undo,
-  Redo,
-  Duplicate,
-  "Deselect blocks": "Deselect blocks",
-  "Delete block": "Delete block",
-  "Save page": "Save page",
-  "Scripts will be only executed in preview and live mode.": "Scripts will be only executed in preview and live mode.",
-  "HTML Code Editor |": "HTML Code Editor |",
-  Close,
-  "Coming soon": "Coming soon",
-  Selected,
-  Select,
-  "Choose Builder Layout": "Choose Builder Layout",
-  "Single side panel": "Single side panel",
-  "Suitable for smaller screens. Bigger canvas size.": "Suitable for smaller screens. Bigger canvas size.",
-  "Dual side panel": "Dual side panel",
-  "Suitable for larger screens. Smaller canvas size.": "Suitable for larger screens. Smaller canvas size.",
-  "Dual side panel advanced": "Dual side panel advanced",
-  "Suitable for heavy styling & block editing. Setting are always visible.": "Suitable for heavy styling & block editing. Setting are always visible.",
-  "Block Settings": "Block Settings",
-  "Visibility settings": "Visibility settings",
-  "Show on canvas": "Show on canvas",
-  Attributes,
-  "Apply Presets": "Apply Presets",
-  apply,
-  presets,
-  "Global presets": "Global presets",
-  Orientation,
-  Color,
-  "Please select an image": "Please select an image",
-  "click to upload": "click to upload",
-  "SVG, PNG, JPG or GIF (Max. 2mb)": "SVG, PNG, JPG or GIF (Max. 2mb)",
-  "Uploading...": "Uploading...",
-  Upload,
-  "Something went wrong": "Something went wrong",
-  "Fetching...": "Fetching...",
-  "No images found": "No images found",
-  "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.": "It looks like you haven't uploaded any images yet. Start by clicking the upload button above.",
-  "Open Code Editor": "Open Code Editor",
-  "Clear search": "Clear search",
-  "No results found for": "No results found for",
-  "Search {pageTypeName}": "Search {pageTypeName}"
+  web_blocks
 };
 i18n.use(initReactI18next).init({
   // the translations
@@ -8989,26 +9089,26 @@ function AIChatPanel() {
       content: r,
       timestamp: /* @__PURE__ */ new Date()
     };
-    n((C) => [...C, b]), a(""), i(!0), setTimeout(() => {
-      const C = {
+    n((k) => [...k, b]), a(""), i(!0), setTimeout(() => {
+      const k = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         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()
       };
-      n((B) => [...B, C]), i(!1), d(null);
+      n((B) => [...B, k]), i(!1), d(null);
     }, 1500);
   }, h = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
   }, x = (b) => {
     var B;
-    const C = (B = b.target.files) == null ? void 0 : B[0];
-    if (C) {
+    const k = (B = b.target.files) == null ? void 0 : B[0];
+    if (k) {
       const j = new FileReader();
-      j.onload = (_) => {
-        var w;
-        d((w = _.target) == null ? void 0 : w.result);
-      }, j.readAsDataURL(C);
+      j.onload = (E) => {
+        var C;
+        d((C = E.target) == null ? void 0 : C.result);
+      }, j.readAsDataURL(k);
     }
   }, f = () => {
     var b;
@@ -9136,7 +9236,7 @@ const AiAssistant = () => {
     ] }) }),
     /* @__PURE__ */ jsxs(AlertDialogContent, { className: "border-border", children: [
       /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
-        /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-foreground", children: o("Clear whole canvas? ") }),
+        /* @__PURE__ */ jsx(AlertDialogTitle, { className: "text-foreground", children: o("Clear whole canvas?") }),
         /* @__PURE__ */ jsx(AlertDialogDescription, { children: o("Are you sure you want to clear the page?") })
       ] }),
       /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
@@ -9202,62 +9302,62 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), x = useRef(null), f = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), x = useRef(null), f = useRef(null), y = usePageExternalData(), { t: b } = useTranslation();
   useEffect(() => {
     l(n);
   }, [n]);
-  const b = () => {
+  const k = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const k = [...a, { key: i, value: d }];
-      r(k), l(a), c(""), p(""), h("");
+      const S = [...a, { key: i, value: d }];
+      r(S), l(a), c(""), p(""), h("");
     }
-  }, C = (k) => {
-    const A = a.filter((E, S) => S !== k);
-    r(A), l(A);
-  }, B = (k) => {
-    g(k), c(a[k].key), p(a[k].value);
-  }, j = () => {
+  }, B = (S) => {
+    const I = a.filter((A, w) => w !== S);
+    r(I), l(I);
+  }, j = (S) => {
+    g(S), c(a[S].key), p(a[S].value);
+  }, E = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const k = [...a];
-      k[u] = { key: i, value: d }, r(k), l(k), g(null), c(""), p(""), h("");
+      const S = [...a];
+      S[u] = { key: i, value: d }, r(S), l(S), g(null), c(""), p(""), h("");
     }
-  }, _ = (k) => {
-    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? j() : b());
-  }, w = useCallback((k) => {
-    const A = (v) => /[.,!?;:]/.test(v), E = (v, I, L) => {
-      let T = "", P = "";
-      const R = I > 0 ? v[I - 1] : "", N = I < v.length ? v[I] : "";
-      return I > 0 && (R === "." || !A(R) && R !== " ") && (T = " "), I < v.length && !A(N) && N !== " " && (P = " "), {
-        text: T + L + P,
-        prefixLength: T.length,
-        suffixLength: P.length
+  }, C = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? E() : k());
+  }, v = useCallback((S) => {
+    const I = (_) => /[.,!?;:]/.test(_), A = (_, L, T) => {
+      let P = "", R = "";
+      const N = L > 0 ? _[L - 1] : "", D = L < _.length ? _[L] : "";
+      return L > 0 && (N === "." || !I(N) && N !== " ") && (P = " "), L < _.length && !I(D) && D !== " " && (R = " "), {
+        text: P + T + R,
+        prefixLength: P.length,
+        suffixLength: R.length
       };
-    }, S = f.current;
-    if (S) {
-      const v = S.selectionStart || 0, I = S.value || "", L = S.selectionEnd || v;
-      if (L > v) {
-        const D = `{{${k}}}`, { text: F } = E(I, v, D), O = I.slice(0, v) + F + I.slice(L);
-        p(O);
+    }, w = f.current;
+    if (w) {
+      const _ = w.selectionStart || 0, L = w.value || "", T = w.selectionEnd || _;
+      if (T > _) {
+        const F = `{{${S}}}`, { text: O } = A(L, _, F), M = L.slice(0, _) + O + L.slice(T);
+        p(M);
         return;
       }
-      const P = `{{${k}}}`, { text: R } = E(I, v, P), N = I.slice(0, v) + R + I.slice(v);
-      p(N);
+      const R = `{{${S}}}`, { text: N } = A(L, _, R), D = L.slice(0, _) + N + L.slice(_);
+      p(D);
     }
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (k) => {
-          k.preventDefault(), u !== null ? j() : b();
+        onSubmit: (S) => {
+          S.preventDefault(), u !== null ? E() : k();
         },
         className: "space-y-3",
         children: [
@@ -9273,8 +9373,8 @@ const AiAssistant = () => {
                   id: "attrKey",
                   ref: x,
                   value: i,
-                  onChange: (k) => c(k.target.value),
-                  placeholder: "Enter Key",
+                  onChange: (S) => c(S.target.value),
+                  placeholder: b("Enter Key"),
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
               )
@@ -9282,7 +9382,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(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: v })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9294,8 +9394,8 @@ const AiAssistant = () => {
                   rows: 2,
                   ref: f,
                   value: d,
-                  onChange: (k) => p(k.target.value),
-                  onKeyDown: _,
+                  onChange: (S) => p(S.target.value),
+                  onKeyDown: C,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9307,16 +9407,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, A) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((S, I) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: k.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: k.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
+        /* @__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: () => B(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => j(I), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(I), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
-    ] }, A)) })
+    ] }, I)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9421,9 +9521,9 @@ const PartialWrapper = ({ partialBlockId: o }) => {
     /* @__PURE__ */ jsx("br", {})
   ] }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "settings", className: "flex flex-1 flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(TabsList, { className: "grid h-auto w-full grid-cols-2 p-1 py-1", children: [
-      /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", className: "text-xs", children: "Settings" }),
+      /* @__PURE__ */ jsx(TabsTrigger, { value: "settings", className: "text-xs", children: n("Settings") }),
       /* @__PURE__ */ jsx(TabsTrigger, { value: "styles", className: "text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "w-[90%] text-center", children: "Styles" }),
+        /* @__PURE__ */ jsx("span", { className: "w-[90%] text-center", children: n("Styling") }),
         /* @__PURE__ */ jsx("span", { className: "w-[10%]", children: /* @__PURE__ */ jsx(ResetStylesButton, {}) })
       ] }) })
     ] }) }),
@@ -9486,38 +9586,38 @@ function useSidebarDefaultPanels() {
   }, [o, n, r]);
 }
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((A) => {
-    A.preventDefault();
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), m = reverse([...g ?? []]), h = useCallback((S) => {
+    S.preventDefault();
   }, []), x = useCallback(
-    (A) => {
-      console.log("handleMenuItemClick", A, n), r(n === A ? null : A);
+    (S) => {
+      console.log("handleMenuItemClick", S, n), r(n === S ? null : S);
     },
     [n, r]
   ), { t: f } = useTranslation(), y = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), b = useBuilderProp("htmlDir", "ltr"), C = find(y, { id: n }) ?? first(y), B = get(C, "width", DEFAULT_PANEL_WIDTH);
+  ), b = useBuilderProp("htmlDir", "ltr"), k = find(y, { id: n }) ?? first(y), B = get(k, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const A = find(y, { id: n });
-      A && get(A, "view", "standard") === "standard" && (a.current = n, i(get(A, "width", DEFAULT_PANEL_WIDTH)));
+      const S = find(y, { id: n });
+      S && get(S, "view", "standard") === "standard" && (a.current = n, i(get(S, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, y]);
   const j = useMemo(() => {
     if (n === null) return 0;
-    const A = find(y, { id: n });
-    return get(A, "view", "standard") === "standard" ? B : l;
-  }, [n, B, l, y]), _ = useCallback(() => {
+    const S = find(y, { id: n });
+    return get(S, "view", "standard") === "standard" ? B : l;
+  }, [n, B, l, y]), E = useCallback(() => {
     r(a.current);
-  }, [r, n]), w = useCallback(() => {
+  }, [r, n]), C = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
     n !== null && !find(y, { id: n }) && r("outline");
   }, [n, y]);
-  const k = useCallback(
-    (A) => {
-      x(A);
+  const v = useCallback(
+    (S) => {
+      x(S);
     },
     [x]
   );
@@ -9531,25 +9631,25 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__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 gap-y-1", children: [p, u].flat().map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((S, I) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "top",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => k(A.id)
+                  panelId: S.id,
+                  isActive: n === S.id,
+                  show: () => v(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(A.label) }) })
-              ] }, "button-top-" + E)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+              ] }, "button-top-" + I)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((A, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(A, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((S, I) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(S, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: A.id,
-                  isActive: n === A.id,
-                  show: () => k(A.id)
+                  panelId: S.id,
+                  isActive: n === S.id,
+                  show: () => v(S.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(A.label) }) })
-              ] }, "button-bottom-" + E)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(S.label) }) })
+              ] }, "button-bottom-" + I)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -9559,15 +9659,15 @@ const RootLayout = () => {
                 initial: { width: j },
                 animate: { width: j },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: n !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
+                children: n !== null && get(k, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(C, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
+                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(k, "isInternal", !1) ? "" : "w-64"}`,
+                      children: /* @__PURE__ */ jsx("span", { children: f(get(k, "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, "panel", NoopComponent), {}) }) })
+                  /* @__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(k, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -9613,7 +9713,7 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(C, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(k, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => E(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
@@ -9621,26 +9721,26 @@ const RootLayout = () => {
         style: { width: `${B}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(k, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: f(get(k, "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, "panel", NoopComponent), {
-            close: w
+          /* @__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(k, "panel", NoopComponent), {
+            close: C
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${B}px` }, children: [
+    n !== null && get(k, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => E(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${B}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(k, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: f(get(k, "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, "panel", NoopComponent), {
-        close: w
+      /* @__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(k, "panel", NoopComponent), {
+        close: C
       }) }) })
     ] }) }),
-    n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(k, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -9659,13 +9759,13 @@ const RootLayout = () => {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(k, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: f(get(k, "label", "")) })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
+                /* @__PURE__ */ jsx(Button, { onClick: () => E(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { 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(C, "panel", NoopComponent), {
-                close: w
+              /* @__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(k, "panel", NoopComponent), {
+                close: C
               }) }) })
             ]
           }
@@ -9707,8 +9807,8 @@ const RootLayout = () => {
     const f = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([y, b]) => {
-        var C;
-        return (y == null ? void 0 : y.toLowerCase().includes(f)) || ((C = b == null ? void 0 : b.description) == null ? void 0 : C.toLowerCase().includes(f));
+        var k;
+        return (y == null ? void 0 : y.toLowerCase().includes(f)) || ((k = b == null ? void 0 : b.description) == null ? void 0 : k.toLowerCase().includes(f));
       })
     );
   }, [a, l]), m = (f) => {
@@ -9718,8 +9818,8 @@ const RootLayout = () => {
     });
   }, h = (f) => {
     if (!c) return;
-    const y = f.clientX - p.x, b = f.clientY - p.y, C = f.currentTarget, B = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - B, w = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), A = Math.max(0, Math.min(b, w));
-    r(k, A);
+    const y = f.clientX - p.x, b = f.clientY - p.y, k = f.currentTarget, B = k.offsetWidth, j = k.offsetHeight, E = window.innerWidth - B, C = window.innerHeight - j, v = Math.max(0, Math.min(y, E)), S = Math.max(0, Math.min(b, C));
+    r(v, S);
   }, x = () => {
     d(!1);
   };
@@ -9961,59 +10061,59 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], h = a[14], x = a[16], f = a[17], y = u(o, n);
   if (isAtomStateInitialized(y) && (l.has(n) && i.get(n) !== y.n || Array.from(y.d).every(
-    ([A, E]) => (
+    ([S, I]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      h(o, A).n === E
+      h(o, S).n === I
     )
   )))
     return y;
   y.d.clear();
   let b = !0;
-  function C() {
+  function k() {
     l.has(n) && (f(o, n), m(o), g(o));
   }
-  function B(A) {
-    var E;
-    if (isSelfAtom(n, A)) {
-      const v = u(o, A);
-      if (!isAtomStateInitialized(v))
-        if (hasInitialValue(A))
-          setAtomStateValueOrPromise(o, A, A.init);
+  function B(S) {
+    var I;
+    if (isSelfAtom(n, S)) {
+      const w = u(o, S);
+      if (!isAtomStateInitialized(w))
+        if (hasInitialValue(S))
+          setAtomStateValueOrPromise(o, S, S.init);
         else
           throw new Error("no atom init");
-      return returnAtomValue(v);
+      return returnAtomValue(w);
     }
-    const S = h(o, A);
+    const A = h(o, S);
     try {
-      return returnAtomValue(S);
+      return returnAtomValue(A);
     } finally {
-      y.d.set(A, S.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, S), (E = l.get(A)) == null || E.t.add(n), b || C();
+      y.d.set(S, A.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, A), (I = l.get(S)) == null || I.t.add(n), b || k();
     }
   }
-  let j, _;
-  const w = {
+  let j, E;
+  const C = {
     get signal() {
       return j || (j = new AbortController()), j.signal;
     },
     get setSelf() {
-      return !_ && isActuallyWritableAtom(n) && (_ = (...A) => {
+      return !E && isActuallyWritableAtom(n) && (E = (...S) => {
         if (!b)
           try {
-            return x(o, n, ...A);
+            return x(o, n, ...S);
           } finally {
             m(o), g(o);
           }
-      }), _;
+      }), E;
     }
-  }, k = y.n;
+  }, v = y.n;
   try {
-    const A = p(o, n, B, w);
-    return setAtomStateValueOrPromise(o, n, A), isPromiseLike$1(A) && (registerAbortHandler(A, () => j == null ? void 0 : j.abort()), A.then(C, C)), y;
-  } catch (A) {
-    return delete y.v, y.e = A, ++y.n, y;
+    const S = p(o, n, B, C);
+    return setAtomStateValueOrPromise(o, n, S), isPromiseLike$1(S) && (registerAbortHandler(S, () => j == null ? void 0 : j.abort()), S.then(k, k)), y;
+  } catch (S) {
+    return delete y.v, y.e = S, ++y.n, y;
   } finally {
-    b = !1, k !== y.n && i.get(n) === k && (i.set(n, y.n), c.add(n), (r = d.c) == null || r.call(d, n));
+    b = !1, v !== y.n && i.get(n) === v && (i.set(n, y.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], l = r[2], i = r[11], c = [n];
@@ -10027,18 +10127,18 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
 }, writeAtomState = (o, n, ...r) => {
   const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], h = a[17];
   let x = !0;
-  const f = (b) => returnAtomValue(g(o, b)), y = (b, ...C) => {
+  const f = (b) => returnAtomValue(g(o, b)), y = (b, ...k) => {
     var B;
     const j = d(o, b);
     try {
       if (isSelfAtom(n, b)) {
         if (!hasInitialValue(b))
           throw new Error("atom not writable");
-        const _ = j.n, w = C[0];
-        setAtomStateValueOrPromise(o, b, w), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
+        const E = j.n, C = k[0];
+        setAtomStateValueOrPromise(o, b, C), h(o, b), E !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
         return;
       } else
-        return writeAtomState(o, b, ...C);
+        return writeAtomState(o, b, ...k);
     } finally {
       x || (u(o), p(o));
     }
@@ -10079,7 +10179,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }, l.set(n, f), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const y = () => {
         let b = !0;
-        const C = (...B) => {
+        const k = (...B) => {
           try {
             return h(o, n, ...B);
           } finally {
@@ -10087,7 +10187,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           }
         };
         try {
-          const B = d(o, n, C);
+          const B = d(o, n, k);
           B && (f.u = () => {
             b = !0;
             try {