@chaibuilder/sdk 3.0.7 → 3.0.9

package/dist/core.js

@@ -4,7 +4,7 @@ var $ = (o, n, r) => U(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredFonts, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
 import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, sortBy, round } from "lodash-es";
-import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, ExclamationTriangleIcon, Cross1Icon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, LetterCaseCapitalizeIcon, ValueIcon, LinkBreak1Icon, EnterFullScreenIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, ReloadIcon, MagicWandIcon, MagnifyingGlassIcon, CaretRightIcon, FrameIcon, CheckIcon, LinkBreak2Icon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, ChatBubbleIcon, FaceIcon, ShuffleIcon, ImageIcon, PaperPlaneIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
+import { SquareIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, ExclamationTriangleIcon, Cross1Icon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, LetterCaseCapitalizeIcon, ValueIcon, LinkBreak1Icon, EnterFullScreenIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, ReloadIcon, MagicWandIcon, CircleIcon, MagnifyingGlassIcon, CaretRightIcon, FrameIcon, CheckIcon, LinkBreak2Icon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, ImageIcon, PaperPlaneIcon, EraserIcon, LightningBoltIcon, ZoomInIcon, StackIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
@@ -23,6 +23,8 @@ import { useTranslation, initReactI18next } from "react-i18next";
 import { useTranslation as $e } from "react-i18next";
 import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
+import i18n, { t } from "i18next";
+import { default as Ve } from "i18next";
 import Link from "@tiptap/extension-link";
 import TextAlign from "@tiptap/extension-text-align";
 import Underline from "@tiptap/extension-underline";
@@ -34,8 +36,6 @@ import validator from "@rjsf/validator-ajv8";
 import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
 import { Tree } from "react-arborist";
-import i18n from "i18next";
-import { default as Ve } from "i18next";
 import "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
@@ -341,16 +341,16 @@ function insertBlocksAtPosition(o, n, r, a) {
         _type: "Text",
         content: u.content
       };
-      Object.keys(u).forEach((f) => {
-        f.startsWith("content-") && (h[f] = u[f]);
-      }), l.unshift(h), i = i.map((f) => {
-        if (f._id === r) {
-          const x = { ...f, content: "" };
-          return Object.keys(x).forEach((y) => {
-            y.startsWith("content-") && (x[y] = "");
-          }), x;
+      Object.keys(u).forEach((x) => {
+        x.startsWith("content-") && (h[x] = u[x]);
+      }), l.unshift(h), i = i.map((x) => {
+        if (x._id === r) {
+          const f = { ...x, content: "" };
+          return Object.keys(f).forEach((y) => {
+            y.startsWith("content-") && (f[y] = "");
+          }), f;
         }
-        return f;
+        return x;
       });
     }
   }
@@ -478,15 +478,15 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
     if (g.length === 2) {
       const m = g.find((h) => h._id !== d);
       if (m && m._type === "Text") {
-        const h = r.find((f) => f._id === u);
-        h && "content" in h && (r = r.map((f) => {
-          if (f._id === u) {
-            const x = { ...f, content: m.content };
+        const h = r.find((x) => x._id === u);
+        h && "content" in h && (r = r.map((x) => {
+          if (x._id === u) {
+            const f = { ...x, content: m.content };
             return Object.keys(m).forEach((y) => {
-              y.startsWith("content-") && (x[y] = m[y]);
-            }), x;
+              y.startsWith("content-") && (f[y] = m[y]);
+            }), f;
           }
-          return f;
+          return x;
         }), a.push(m._id));
       }
     }
@@ -569,32 +569,32 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), m = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (x) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), m = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
   return useEffect(() => {
     if (n === "mock") {
       if (isFunction(a)) {
-        i((x) => ({ ...x, status: "loading", props: {} }));
-        const f = a({ block: o });
-        if (!isObject(f))
+        i((f) => ({ ...f, status: "loading", props: {} }));
+        const x = a({ block: o });
+        if (!isObject(x))
           throw new Error("mockDataProvider should return an object");
-        i((x) => ({ ...x, status: "loaded", props: f }));
+        i((f) => ({ ...f, status: "loaded", props: x }));
       }
       return;
     }
-    n === "live" && (!g && !m || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
-      g ? (p((x) => ({
-        ...x,
+    n === "live" && (!g && !m || (i((x) => ({ ...x, status: "loading", props: {} })), d({ block: o }).then((x = {}) => {
+      g ? (p((f) => ({
+        ...f,
         [o._id]: {
           status: "loaded",
-          props: get(f, "items", []),
+          props: get(x, "items", []),
           repeaterItems: o.repeaterItems
         }
-      })), i((x) => ({ ...x, status: "loaded", props: { totalItems: get(f, "totalItems") } })), c([o._id], { totalItems: get(f, "totalItems") })) : i((x) => ({ ...x, status: "loaded", props: isObject(f) ? f : {} }));
-    }).catch((f) => {
-      g ? (p((x) => ({
-        ...x,
-        [o._id]: { status: "error", error: f, props: [] }
-      })), i((x) => ({ ...x, status: "error", error: f, props: {} }))) : i((x) => ({ ...x, status: "error", error: f, props: {} }));
+      })), i((f) => ({ ...f, status: "loaded", props: { totalItems: get(x, "totalItems") } })), c([o._id], { totalItems: get(x, "totalItems") })) : i((f) => ({ ...f, status: "loaded", props: isObject(x) ? x : {} }));
+    }).catch((x) => {
+      g ? (p((f) => ({
+        ...f,
+        [o._id]: { status: "error", error: x, props: [] }
+      })), i((f) => ({ ...f, status: "error", error: x, props: {} }))) : i((f) => ({ ...f, status: "error", error: x, props: {} }));
     })));
   }, [o == null ? void 0 : o._id, u, g, m, a, n]), {
     $loading: get(l, "status") === "loading",
@@ -749,20 +749,20 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     return console.warn(`Failed to get block definition for type: ${r._type}`, a), !1;
   }
 }) : !1, useSavePage = () => {
-  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (f) => {
+  const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (x) => {
   }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), g = () => {
-    const f = l();
-    return !d || d === p ? !1 : checkMissingTranslations(f.blocks || [], d);
+    const x = l();
+    return !d || d === p ? !1 : checkMissingTranslations(x.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
-    async (f = !1) => {
+    async (x = !1) => {
       if (!c("save_page") || !u)
         return;
       n("SAVING"), a("SAVING");
-      const x = l();
+      const f = l();
       return await r({
-        autoSave: f,
-        blocks: x.blocks,
+        autoSave: x,
+        blocks: f.blocks,
         theme: i,
         needTranslations: g()
       }), setTimeout(() => {
@@ -776,10 +776,10 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
     if (!c("save_page") || !u)
       return;
     n("SAVING"), a("SAVING");
-    const f = l();
+    const x = l();
     return await r({
       autoSave: !0,
-      blocks: f.blocks,
+      blocks: x.blocks,
       theme: i,
       needTranslations: g()
     }), setTimeout(() => {
@@ -837,65 +837,65 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, y, b) => {
-      const C = map(x, (j) => {
-        const A = n.find((E) => E._id === j)._parent || null, w = n.filter((E) => A ? E._parent === A : !E._parent).map((E) => E._id).indexOf(j);
-        return { _id: j, oldParent: A, oldPosition: w };
-      }), B = C.find(({ _id: j }) => j === x[0]);
-      B && B.oldParent === y && B.oldPosition === b || (i(x, y, b), o({
-        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: A }) => {
-          i([j], _, A);
+    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]);
+      B && B.oldParent === y && B.oldPosition === b || (i(f, y, b), o({
+        undo: () => each(C, ({ _id: j, oldParent: _, oldPosition: w }) => {
+          i([j], _, w);
         }),
-        redo: () => i(x, y, b)
+        redo: () => i(f, y, b)
       }));
     },
-    addBlocks: (x, y, b) => {
-      a(x, y, b), o({
-        undo: () => l(map(x, "_id")),
-        redo: () => a(x, y, b)
+    addBlocks: (f, y, b) => {
+      a(f, y, b), o({
+        undo: () => l(map(f, "_id")),
+        redo: () => a(f, y, b)
       });
     },
-    removeBlocks: (x) => {
+    removeBlocks: (f) => {
       var B;
-      const y = (B = first(x)) == null ? void 0 : B._parent, C = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(x));
-      l(map(x, "_id")), o({
-        undo: () => a(x, y, C),
-        redo: () => l(map(x, "_id"))
+      const y = (B = first(f)) == null ? void 0 : B._parent, C = n.filter((j) => y ? j._parent === y : !j._parent).indexOf(first(f));
+      l(map(f, "_id")), o({
+        undo: () => a(f, y, C),
+        redo: () => l(map(f, "_id"))
       });
     },
-    updateBlocks: (x, y, b) => {
+    updateBlocks: (f, y, b) => {
       let C = [];
       if (b)
-        C = map(x, (B) => ({ _id: B, ...b }));
+        C = map(f, (B) => ({ _id: B, ...b }));
       else {
         const B = keys(y);
-        C = map(x, (j) => {
-          const _ = n.find((k) => k._id === j), A = { _id: j };
-          return each(B, (k) => A[k] = _[k]), A;
+        C = map(f, (j) => {
+          const _ = n.find((k) => k._id === j), w = { _id: j };
+          return each(B, (k) => w[k] = _[k]), w;
         });
       }
-      c(map(x, (B) => ({ _id: B, ...y }))), o({
+      c(map(f, (B) => ({ _id: B, ...y }))), o({
         undo: () => c(C),
-        redo: () => c(map(x, (B) => ({ _id: B, ...y })))
+        redo: () => c(map(f, (B) => ({ _id: B, ...y })))
       });
     },
-    updateBlocksRuntime: (x, y) => {
-      c(map(x, (b) => ({ _id: b, ...y })));
+    updateBlocksRuntime: (f, y) => {
+      c(map(f, (b) => ({ _id: b, ...y })));
     },
-    setNewBlocks: (x) => {
-      r(x), o({
+    setNewBlocks: (f) => {
+      r(f), o({
         undo: () => r(n),
-        redo: () => r(x)
+        redo: () => r(f)
       });
     },
-    updateMultipleBlocksProps: (x) => {
+    updateMultipleBlocksProps: (f) => {
       let y = [];
-      y = map(x, (b) => {
+      y = map(f, (b) => {
         const C = keys(b), B = n.find((_) => _._id === b._id), j = {};
         return each(C, (_) => j[_] = B[_]), j;
-      }), c(x), o({
+      }), c(f), o({
         undo: () => c(y),
-        redo: () => c(x)
+        redo: () => c(f)
       });
     }
   };
@@ -903,12 +903,12 @@ const undoRedoStateAtom = atom({
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var h;
-      for (let f = 0; f < i.length; f++) {
-        const { _id: x } = i[f];
-        i[f]._id = generateUUID();
-        const y = filter(i, { _parent: x });
+      for (let x = 0; x < i.length; x++) {
+        const { _id: f } = i[x];
+        i[x]._id = generateUUID();
+        const y = filter(i, { _parent: f });
         for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[f]._id;
+          y[b]._parent = i[x]._id;
       }
       const p = first(i);
       let u, g;
@@ -2361,36 +2361,36 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(d) ? !1 : (has(i, "_parent") && isEmpty(i._parent) && delete i._parent, { ...i, ...d });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, f) => {
-    const x = cloneDeep(f.find((y) => y._id === h));
-    for (const y in x) {
-      const b = x[y];
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, x) => {
+    const f = cloneDeep(x.find((y) => y._id === h));
+    for (const y in f) {
+      const b = f[y];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
         const { baseClasses: C, classes: B } = getSplitChaiClasses(b);
-        x[y] = compact(flattenDeep([C, B])).join(" ");
+        f[y] = compact(flattenDeep([C, B])).join(" ");
       } else
-        y !== "_id" && delete x[y];
+        y !== "_id" && delete f[y];
     }
-    return x;
+    return f;
   };
   return {
     askAi: useCallback(
-      async (h, f, x, y) => {
+      async (h, x, f, y) => {
         if (l) {
           n(!0), a(null);
           try {
             const b = p === u ? "" : p;
-            console.log("prompt", x);
-            const C = x.toLowerCase().includes("translate the content"), B = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, C) : [m(f, d)], j = await l(h, addLangToPrompt(x, g, h), B, b), { blocks: _, error: A } = j;
-            if (A) {
-              a(A);
+            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);
               return;
             }
             if (h === "styles") {
-              const k = _.map((w) => {
-                for (const E in w)
-                  E !== "_id" && (w[E] = `${STYLES_KEY},${w[E]}`);
-                return w;
+              const k = _.map((A) => {
+                for (const E in A)
+                  E !== "_id" && (A[E] = `${STYLES_KEY},${A[E]}`);
+                return A;
               });
               c(k);
             } else
@@ -2493,12 +2493,12 @@ const getBlockWithChildren = (o, n) => {
             if (!p)
               return m;
             let h = [];
-            for (const f of m)
-              if (f._type === "PartialBlock" || f._type === "GlobalBlock") {
-                let x = l(f.partialBlockId);
-                f._parent && (x == null ? void 0 : x.length) > 0 && (x = x.map((y) => (isEmpty(y._parent) && set(y, "_parent", f._parent), y))), h = [...h, ...x];
+            for (const x of m)
+              if (x._type === "PartialBlock" || x._type === "GlobalBlock") {
+                let f = l(x.partialBlockId);
+                x._parent && (f == null ? void 0 : f.length) > 0 && (f = f.map((y) => (isEmpty(y._parent) && set(y, "_parent", x._parent), y))), h = [...h, ...f];
               } else
-                h.push(f);
+                h.push(x);
             return h;
           })
         };
@@ -2673,13 +2673,13 @@ const getBlockWithChildren = (o, n) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (m) => {
-      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
-      const x = first(m.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
+      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
+      const f = first(m.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], f) && p.push(m.split(":").pop().trim());
     }), each(p, (m) => {
-      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      g = g.replace(f, " ").replace(/\s+/g, " ").trim();
+      const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
+      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -2828,21 +2828,21 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     return "VERTICAL";
   }
 }, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
-  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
-    (x) => {
-      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (f) => c ? get(f, "_parent") === c : !get(f, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), x = useCallback(
+    (f) => {
+      isDisabledControl(g, m, f) || p || (f === "UP" || f === "LEFT" ? l([i], c || null, u - 1) : (f === "DOWN" || f === "RIGHT") && l([i], c || null, u + 2), n());
     },
     [g, m, p, u, i, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
-    ({ key: x }) => {
+    ({ key: f }) => {
       var y;
-      f((y = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
+      x((y = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
-    [f]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: f, orientation: h };
+    [x]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: m, moveBlock: x, orientation: h };
 }, BlockController = ({ block: o, updateFloatingBar: n }) => {
   const { isOnlyChild: r, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -3010,7 +3010,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
     elements: { reference: n }
   });
   useResizeObserver(n, () => h(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => h(), (u == null ? void 0 : u.body) !== null);
-  const f = get(o, "_parent", null), x = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
+  const x = get(o, "_parent", null), f = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   return useEffect(() => {
     if (n) {
       const y = setTimeout(() => h(), 500);
@@ -3033,16 +3033,16 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        f && /* @__PURE__ */ jsx(
+        x && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([f]);
+              c([]), l([x]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: x, block: o }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: o }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-1 pr-1.5", children: [
           /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "hover:scale-105" }) }),
           canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(CopyIcon, { className: "hover:scale-105", onClick: () => a([o == null ? void 0 : o._id]) }) : null,
@@ -3200,8 +3200,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     i
   ]), useHotkeys(
     "del, backspace",
-    (f) => {
-      f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
+    (x) => {
+      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(n);
     },
     h,
     [n, l]
@@ -3503,8 +3503,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         ],
         onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
         onBlur: ({ editor: u, event: g }) => {
-          const m = g.relatedTarget, h = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = h == null ? void 0 : h.contains(m), y = f == null ? void 0 : f.contains(m);
-          if (!x && !y) {
+          const m = g.relatedTarget, h = i.querySelector(".ProseMirror"), x = i.querySelector(".tippy-box"), f = h == null ? void 0 : h.contains(m), y = x == null ? void 0 : x.contains(m);
+          if (!f && !y) {
             const b = (u == null ? void 0 : u.getHTML()) || "";
             r(b);
           }
@@ -3559,14 +3559,14 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       if (a.current) {
         a.current.innerText = n, a.current.focus();
-        const h = c.createRange(), f = d.getSelection();
-        h.selectNodeContents(a.current), h.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(h), a.current.focus();
+        const h = c.createRange(), x = d.getSelection();
+        h.selectNodeContents(a.current), h.collapse(!1), x == null || x.removeAllRanges(), x == null || x.addRange(h), a.current.focus();
       } else
         r();
     }, [c, d]);
     const p = useMemo(() => {
-      var f;
-      const h = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
+      var x;
+      const h = ((x = o == null ? void 0 : o.tagName) == null ? void 0 : x.toLowerCase()) || "div";
       return h === "button" ? "div" : h;
     }, [o]), u = useCallback(
       (h) => {
@@ -3582,12 +3582,12 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         contentEditable: !0,
         className: `${((h = o == null ? void 0 : o.className) == null ? void 0 : h.replace("sr-only", "")) || ""} outline outline-[2px] outline-green-500 shadow-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 empty:before:absolute empty:before:pointer-events-none empty:before:select-none empty:before:inset-0 empty:before:z-0 relative min-h-[1em]`,
         style: cloneDeep(o == null ? void 0 : o.style) || {},
-        onInput: (f) => {
-          const x = f.target;
-          x && (x.innerText.trim() === "" ? (x.setAttribute("data-placeholder", "Enter text here"), x.children.length > 0 && x.children[0].remove()) : f.target.removeAttribute("data-placeholder"), l(f.target.innerText));
+        onInput: (x) => {
+          const f = x.target;
+          f && (f.innerText.trim() === "" ? (f.setAttribute("data-placeholder", "Enter text here"), f.children.length > 0 && f.children[0].remove()) : x.target.removeAttribute("data-placeholder"), l(x.target.innerText));
         },
-        onClick: (f) => {
-          f.stopPropagation(), f.preventDefault();
+        onClick: (x) => {
+          x.stopPropagation(), x.preventDefault();
         }
       };
     }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
@@ -3600,38 +3600,38 @@ 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: f } = useLanguages(), [, x] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: C, blockType: B } = useMemo(() => {
+    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 w = o._type;
+      const A = o._type;
       let E = o[r];
       const S = getRegisteredChaiBlock(o._type);
-      return f && ((I = S == null ? void 0 : S.i18nProps) == null ? void 0 : I.includes(r)) && has(o, `${r}-${f}`) && (E = get(o, `${r}-${f}`)), { blockContent: E, blockType: w };
-    }, [o, f]), j = useCallback(
-      (w) => {
+      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 };
+    }, [o, x]), j = useCallback(
+      (A) => {
         var S;
-        const E = w || ((S = g.current) == null ? void 0 : S.innerText);
-        h([b], { [r]: E }), u(null), c(null), d(-1), x(b ? [b] : []);
+        const E = A || ((S = g.current) == null ? void 0 : S.innerText);
+        h([b], { [r]: E }), u(null), c(null), d(-1), f(b ? [b] : []);
       },
-      [b, h, c, x, f]
+      [b, h, c, f, x]
     ), _ = useDebouncedCallback(
-      (w) => {
-        h([b], { [r]: w });
+      (A) => {
+        h([b], { [r]: A });
       },
-      [b, o, h, f],
+      [b, o, h, x],
       1e3
-    ), A = useCallback(
-      (w) => {
-        w.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
+    ), w = useCallback(
+      (A) => {
+        A.preventDefault(), b && (y.current = b), j(), setTimeout(() => {
           const E = y.current;
-          y.current = null, x([E]);
+          y.current = null, f([E]);
         }, 100);
       },
-      [x, b, f]
+      [f, b, x]
     );
     useEffect(() => {
       var v;
       if (!b) return;
-      const w = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${w}${E}`);
+      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));
     }, [b, B, a, i]);
     const k = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
@@ -3641,7 +3641,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         editingElement: p,
         onChange: _,
         onClose: j,
-        onEscape: A
+        onEscape: w
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
@@ -3651,9 +3651,9 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         editingElement: p,
         onClose: j,
         onChange: _,
-        onEscape: A
+        onEscape: w
       }
-    )) : null, [p, b, B, C, j, f]);
+    )) : null, [p, b, B, C, j, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       k,
       n
@@ -3688,18 +3688,18 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: f, key: x } = useContext(RepeaterContext), y = useMemo(
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: x, key: f } = useContext(RepeaterContext), y = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
-      index: f,
-      key: x
+      index: x,
+      key: f
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, m, f, x]
+    [i, d, c, g, m, x, f]
   ), b = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), C = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
   ), B = useMemo(
     () => ({
-      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": f },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
       lang: d || p,
       ...y,
@@ -3719,7 +3719,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     ]
   ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), _ = useMemo(() => get(i, "_show", !0), [i]);
   if (isNull(h) || !_) return null;
-  let A = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
+  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
     ...B,
     children: r({
       _id: i._id,
@@ -3732,7 +3732,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const k = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: A }) : A;
+  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;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
@@ -3773,7 +3773,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   );
   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: f }) => g === "Repeater" ? isArray(h) && h.map((x, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: f }, 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 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;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3841,14 +3841,14 @@ const CanvasEventsWatcher = () => {
 }, StaticCanvas = () => {
   const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useAtom$1(canvasIframeAtom), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), g = useCallback(
     (h) => {
-      i((f) => ({ ...f, width: h }));
+      i((x) => ({ ...x, width: h }));
     },
     [i]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: h, clientHeight: f } = a.current;
-    i({ width: h, height: f });
+    const { clientWidth: h, clientHeight: x } = a.current;
+    i({ width: h, height: x });
   }, [a, o]);
   const m = useMemo(() => {
     let h = IframeInitialContent;
@@ -3895,10 +3895,13 @@ const CanvasEventsWatcher = () => {
       )
     }
   ) });
-}, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
-  /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
-  /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-GydqqBXp.js")), CanvasArea = () => {
+}, FallbackError = () => {
+  const { t: o } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
+    /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
+    /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
+  ] }) });
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-GydqqBXp.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -3963,8 +3966,8 @@ const CanvasEventsWatcher = () => {
     /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: a("Paste SVG code to use as an icon") })
   ] });
 }, 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 (f) => {
-    if (!f.trim()) {
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (x) => {
+    if (!x.trim()) {
       p(!1), g("Please enter a URL");
       return;
     }
@@ -3988,7 +3991,7 @@ const CanvasEventsWatcher = () => {
         {
           placeholder: h(`Enter ${r} URL`),
           value: a,
-          onChange: (f) => l(f.target.value),
+          onChange: (x) => l(x.target.value),
           onKeyUp: () => m(a)
         }
       ),
@@ -4028,7 +4031,7 @@ 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, f = (y) => {
+  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);
@@ -4043,7 +4046,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
         d([c._id], j);
       }
     }
-  }, x = useCallback(() => {
+  }, f = useCallback(() => {
     n(PLACEHOLDER_IMAGE), c != null && c._id && d([c._id], { assetId: "" });
   }, [n, c == null ? void 0 : c._id, d]);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-x-3", children: [
@@ -4060,12 +4063,12 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
         "button",
         {
           type: "button",
-          onClick: x,
+          onClick: f,
           className: "absolute -right-2 -top-2 z-20 rounded-full bg-destructive p-1 text-destructive-foreground hover:bg-destructive/90",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" })
         }
       ),
-      m && m !== "" && /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: f, assetId: m, children: /* @__PURE__ */ jsx(
+      m && m !== "" && /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: x, assetId: m, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -4073,10 +4076,10 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-4 w-4 text-white" })
         }
       ) })
-    ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: f, 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-20 w-20 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: f, 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(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(
@@ -4099,24 +4102,24 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
 }, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
   const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
     (m) => {
-      const h = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
-      m.type === "object" ? (l((f) => [...f, m.key]), c(m.value)) : h(m.type) && n([...a, m.key].join("."), r);
+      const h = (x) => r === "value" ? x === "value" || x === "object" : r === "array" ? x === "array" : x === r;
+      m.type === "object" ? (l((x) => [...x, m.key]), c(m.value)) : h(m.type) && n([...a, m.key].join("."), r);
     },
     [a, n, r]
   ), u = React__default.useCallback(() => {
     if (a.length > 0) {
       const m = a.slice(0, -1);
-      l(m), c(m.reduce((h, f) => h[f], o));
+      l(m), c(m.reduce((h, x) => h[x], o));
     }
   }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({ key: m, value: h, type: d(h) })).filter((m) => !startsWith(m.key, REPEATER_PREFIX) && m.key.includes("/") ? !1 : r === "value" ? m.type === "value" || m.type === "object" : r === "array" ? m.type === "array" || m.type === "object" : r === "object" ? m.type === "object" : !0) : [], [i, r]);
   return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
     /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
     /* @__PURE__ */ jsxs(CommandList, { children: [
-      /* @__PURE__ */ jsx(CommandEmpty, { children: "No option found." }),
+      /* @__PURE__ */ jsx(CommandEmpty, { children: t("No option found.") }),
       /* @__PURE__ */ jsxs(CommandGroup, { children: [
         a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: u, className: "flex items-center text-sm", children: [
           /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
-          "Back"
+          t("Back")
         ] }),
         g.map((m) => /* @__PURE__ */ jsxs(
           CommandItem,
@@ -4128,7 +4131,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
             children: [
               /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-x-2", children: [
                 startsWith(m.key, REPEATER_PREFIX) ? /* @__PURE__ */ jsx(LoopIcon, {}) : startsWith(m.key, COLLECTION_PREFIX) ? /* @__PURE__ */ jsx(IdCardIcon, {}) : null,
-                startsWith(m.key, REPEATER_PREFIX) ? "Repeater Data" : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
+                startsWith(m.key, REPEATER_PREFIX) ? t("Repeater Data") : startsWith(m.key, COLLECTION_PREFIX) ? m.key.replace(COLLECTION_PREFIX, "") : m.key
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 r === "object" && m.type === "object" && /* @__PURE__ */ jsx(
@@ -4140,7 +4143,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
                     onClick: (h) => {
                       h.stopPropagation(), n([...a, m.key].join("."), r);
                     },
-                    children: "Select"
+                    children: t("Select")
                   }
                 ),
                 m.type === "object" && /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded p-1 hover:bg-muted", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 opacity-50" }) })
@@ -4177,7 +4180,7 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
           ) })
         }
       ) }) }),
-      /* @__PURE__ */ jsx(TooltipContent, { children: "Add field" })
+      /* @__PURE__ */ jsx(TooltipContent, { children: t("Add field") })
     ] }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "z-[1000]! relative mr-3 w-[300px] p-0", children: /* @__PURE__ */ jsx(
       PathDropdown,
@@ -4199,7 +4202,7 @@ const DataBindingSelector = ({
 }) => {
   const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
     if (i.length === 1) return "";
-    const g = i.find((f) => f._type === "Repeater"), h = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    const g = i.find((x) => x._type === "Repeater"), h = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
     return `${REPEATER_PREFIX}${startsWith(h, COLLECTION_PREFIX) ? `${h}/${g._id}` : h}`;
   }, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
     (g, m) => {
@@ -4207,16 +4210,16 @@ const DataBindingSelector = ({
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (b) => /[.,!?;:]/.test(b), f = (b, C, B) => {
+      const h = (b) => /[.,!?;:]/.test(b), x = (b, C, B) => {
         let j = "", _ = "";
-        const A = C > 0 ? b[C - 1] : "", k = C < b.length ? b[C] : "";
-        return C > 0 && (A === "." || !h(A) && A !== " ") && (j = " "), C < b.length && !h(k) && k !== " " && (_ = " "), {
+        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 + _,
           prefixLength: j.length,
           suffixLength: _.length
         };
-      }, x = document.getElementById(r);
-      if (!x) return;
+      }, f = document.getElementById(r);
+      if (!f) return;
       const y = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
         const b = y.__chaiRTE;
@@ -4227,9 +4230,9 @@ const DataBindingSelector = ({
           if (B !== j)
             b.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: A } = b, k = A.selection.from, w = A.doc.textBetween(Math.max(0, k - 1), k), E = A.doc.textBetween(k, Math.min(k + 1, A.doc.content.size));
+            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 && w !== " " && !h(w) && (S = " ");
+            k > 0 && A !== " " && !h(A) && (S = " ");
             let v = "";
             E && E !== " " && !h(E) && (v = " "), b.chain().insertContent(S + C + v).run();
           }
@@ -4237,14 +4240,14 @@ const DataBindingSelector = ({
           return;
         }
       } else {
-        const b = x, C = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || C;
+        const b = f, C = b.selectionStart || 0, B = b.value || "", j = b.selectionEnd || C;
         if (j > C) {
-          const E = `{{${g}}}`, { text: S } = f(B, C, E), v = B.slice(0, C) + S + B.slice(j);
+          const E = `{{${g}}}`, { text: S } = x(B, C, E), v = B.slice(0, C) + S + B.slice(j);
           n(v, {}, r);
           return;
         }
-        const A = `{{${g}}}`, { text: k } = f(B, C, A), w = B.slice(0, C) + k + B.slice(C);
-        n(w, {}, r);
+        const w = `{{${g}}}`, { text: k } = x(B, C, w), A = B.slice(0, C) + k + B.slice(C);
+        n(A, {}, r);
       }
     },
     [r, n, a, c == null ? void 0 : c._id, d]
@@ -4266,9 +4269,9 @@ const DataBindingSelector = ({
   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(""), [f, x] = 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;
+  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;
   useEffect(() => {
-    if (h(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    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")]);
@@ -4278,10 +4281,10 @@ const DataBindingSelector = ({
   const j = useDebouncedCallback(
     async (S) => {
       if (isEmpty(S))
-        x([]);
+        f([]);
       else {
         const v = await l(u, S);
-        x(v);
+        f(v);
       }
       c(!1), b(-1);
     },
@@ -4289,18 +4292,18 @@ const DataBindingSelector = ({
     300
   ), _ = (S) => {
     const v = ["pageType", u, S.id];
-    v[1] && (r(v.join(":")), h(S.name), p(!1), x([]), b(-1));
-  }, A = (S) => {
+    v[1] && (r(v.join(":")), h(S.name), p(!1), f([]), b(-1));
+  }, w = (S) => {
     switch (S.key) {
       case "ArrowDown":
-        S.preventDefault(), b((v) => v < f.length - 1 ? v + 1 : v);
+        S.preventDefault(), b((v) => v < x.length - 1 ? v + 1 : v);
         break;
       case "ArrowUp":
         S.preventDefault(), b((v) => v > 0 ? v - 1 : v);
         break;
       case "Enter":
-        if (S.preventDefault(), f.length === 0) return;
-        y >= 0 && _(f[y]);
+        if (S.preventDefault(), x.length === 0) return;
+        y >= 0 && _(x[y]);
         break;
       case "Escape":
         S.preventDefault(), k();
@@ -4314,8 +4317,8 @@ const DataBindingSelector = ({
     }
   }, [y]);
   const k = () => {
-    h(""), x([]), b(-1), p(!1), r("");
-  }, w = (S) => {
+    h(""), f([]), b(-1), p(!1), r("");
+  }, A = (S) => {
     h(S), p(!isEmpty(S)), c(!0), j(S);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -4326,23 +4329,23 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: m,
-          onChange: (S) => w(S.target.value),
-          onKeyDown: A,
+          onChange: (S) => A(S.target.value),
+          onKeyDown: w,
           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" }) }) })
     ] }),
-    (i || !isEmpty(f) || d && isEmpty(f)) && /* @__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: [
+    (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" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(f == null ? void 0 : f.slice(0, 20), (S, v) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(x == null ? void 0 : x.slice(0, 20), (S, v) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => _(S),
@@ -4657,15 +4660,15 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     if (!u) return;
     const h = `{{${m}}}`;
     u.commands.focus();
-    const { from: f, to: x } = u.state.selection;
-    if (f !== x)
+    const { from: x, to: f } = u.state.selection;
+    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 A = "";
-      j && j !== " " && !/[.,!?;:]/.test(j) && (A = " "), u.chain().insertContent(_ + h + A).run();
+      let w = "";
+      j && j !== " " && !/[.,!?;:]/.test(j) && (w = " "), u.chain().insertContent(_ + h + w).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: [
@@ -4704,13 +4707,13 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       })
     ],
     content: r || "",
-    onUpdate: ({ editor: f }) => {
-      const x = f.getHTML();
-      a(x), c || u(x);
+    onUpdate: ({ editor: x }) => {
+      const f = x.getHTML();
+      a(f), c || u(f);
     },
-    onBlur: ({ editor: f }) => {
-      const x = f.getHTML();
-      l(o, x);
+    onBlur: ({ editor: x }) => {
+      const f = x.getHTML();
+      l(o, f);
     },
     editorProps: {
       attributes: {
@@ -4723,8 +4726,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   }, [g]), useEffect(() => {
     u(r || "");
   }, [r]);
-  const m = (f) => {
-    a(f);
+  const m = (x) => {
+    a(x);
   }, h = () => {
     d(!1), g && g.commands.setContent(p);
   };
@@ -4757,24 +4760,24 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
   const m = () => {
-    const x = findIndex(u, { _id: g });
-    if (x > -1) {
-      const y = (x + 1) % u.length, b = get(u, [y, "_id"]);
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const y = (f + 1) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
   }, h = () => {
-    const x = findIndex(u, { _id: g });
-    if (x > -1) {
-      const y = (x - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const y = (f - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
-  }, f = () => {
-    const x = i(
+  }, x = () => {
+    const f = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), y = x == null ? void 0 : x._id;
+    ), y = f == null ? void 0 : f._id;
     y && (n({ ...o, currentSlide: y }), c([y]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
@@ -4792,7 +4795,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: f,
+          onClick: x,
           className: "flex w-full items-center justify-center gap-x-1 rounded bg-gray-200 p-1.5 text-xs font-medium leading-tight hover:opacity-80",
           children: [
             /* @__PURE__ */ jsx(PlusCircledIcon, { className: "h-3 w-3" }),
@@ -4853,8 +4856,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (x) => {
-              let y = x.target.value;
+            onChange: (f) => {
+              let y = f.target.value;
               y.length && (y = y.replace("-", "")), n({ ...o, autoplayInterval: y });
             }
           }
@@ -4962,17 +4965,17 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: u,
   onChange: g
 }) => {
-  const { selectedLang: m, fallbackLang: h, languages: f } = useLanguages(), x = useMemo(
-    () => isEmpty(f) ? "" : isEmpty(m) ? h : m,
-    [f, m, h]
-  ), y = useMemo(() => get(LANGUAGES, x, x), [x]), b = usePageExternalData(), C = useSelectedBlock(), B = useRegisteredChaiBlocks(), j = useMemo(
+  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]
-  ), [_, A] = useState(null);
+  ), [_, w] = useState(null);
   if (c)
     return null;
   if (p.type === "boolean") return /* @__PURE__ */ jsx("div", { className: n, children: a });
-  const w = j == null ? void 0 : j.includes(o.replace("root.", ""));
+  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: [
@@ -4980,7 +4983,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         "label",
         {
           htmlFor: o,
-          onClick: () => A(E ? null : o),
+          onClick: () => w(E ? null : o),
           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" }),
@@ -5015,7 +5018,7 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
         /* @__PURE__ */ jsxs("label", { htmlFor: o, className: p.type === "object" ? "pb-2" : "", children: [
           r,
           " ",
-          w && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
@@ -5137,43 +5140,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), f = ({ formData: A }, k, w) => {
-    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(A, k) }, w);
-  }, x = useCallback(
-    debounce(({ formData: A }, k, w) => {
-      f({ formData: A }, k, w), d(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: w }, k, A) => {
+    k && (c == null ? void 0 : c._id) === n._id && a([n._id], { [k]: get(w, k) }, A);
+  }, f = useCallback(
+    debounce(({ formData: w }, k, A) => {
+      x({ formData: w }, k, A), d(w);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), y = ({ formData: A }, k) => {
-    k && (r([n._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
-  }, b = ({ formData: A }, k) => {
-    k && (r([g._id], { [k]: get(A, k) }), x({ formData: A }, k, { [k]: get(c, k) }));
+  ), 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 A = n == null ? void 0 : n._type;
-    if (!A)
+    const w = n == null ? void 0 : n._type;
+    if (!w)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: k, uiSchema: w } = getBlockFormSchemas(A);
-      if (A === "Repeater") {
+      const { schema: k, uiSchema: A } = getBlockFormSchemas(w);
+      if (w === "Repeater") {
         const E = get(n, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(w, "filter", { "ui:widget": "collectionSelect" }), set(w, "sort", { "ui:widget": "collectionSelect" })) : (set(w, "filter", { "ui:widget": "hidden" }), set(w, "sort", { "ui:widget": "hidden" }));
+        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" }));
       }
-      return { schema: k, uiSchema: w };
+      return { schema: k, uiSchema: A };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [n]), { wrapperSchema: j, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const A = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: w = {} } = getBlockFormSchemas(A);
-    return { wrapperSchema: k, wrapperUiSchema: w };
+    const w = g == null ? void 0 : g._type, { schema: k = {}, uiSchema: A = {} } = getBlockFormSchemas(w);
+    return { wrapperSchema: k, wrapperUiSchema: A };
   }, [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((A) => !A),
+          onClick: () => u((w) => !w),
           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" }),
@@ -5212,27 +5215,27 @@ function BlockSettings() {
   ] });
 }
 const BlockStylingProps = () => {
-  var f;
+  var x;
   const o = useSelectedBlock(), [n, r] = useSelectedStylingBlocks(), a = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), { t: i } = useTranslation();
   if (!o) return null;
   const c = Object.keys(o).filter(
-    (x) => typeof o[x] == "string" && o[x].startsWith("#styles:")
-  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (f = n[0]) == null ? void 0 : f.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, m = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], h = (x) => find(n, (y) => y.prop === x);
+    (f) => typeof o[f] == "string" && o[f].startsWith("#styles:")
+  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (x = n[0]) == null ? void 0 : x.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, m = g ? g.split(" ").filter((f) => !isEmpty(f)) : [], h = (f) => find(n, (y) => y.prop === f);
   return /* @__PURE__ */ jsx(Fragment, { children: p && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       i("Style element"),
       ":"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (x) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (f) => /* @__PURE__ */ jsxs(
       Badge,
       {
         className: "flex cursor-pointer items-center gap-1 pr-1",
-        variant: h(x) ? "default" : "secondary",
+        variant: h(f) ? "default" : "secondary",
         onClick: () => {
-          r([{ id: `${x}-${o._id}`, blockId: o._id, prop: x }]);
+          r([{ id: `${f}-${o._id}`, blockId: o._id, prop: f }]);
         },
         children: [
-          startCase(x),
+          startCase(f),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
               "button",
@@ -5249,7 +5252,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    d(x);
+                    d(f);
                   },
                   children: i("Reset style")
                 }
@@ -5268,7 +5271,7 @@ const BlockStylingProps = () => {
           ] })
         ]
       },
-      x
+      f
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] }) });
@@ -5417,7 +5420,7 @@ 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]), [f, x] = 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(""), [C, B] = useState(!1), [j, _] = useState(!1);
   useEffect(() => {
     const { value: S, unit: v } = getClassValueAndUnit(i);
     if (v === "") {
@@ -5426,41 +5429,41 @@ const BlockStylingProps = () => {
     }
     h(v), l(v === "class" || isEmpty(S) ? "" : S);
   }, [i, p, u]);
-  const A = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), k = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), w = useCallback(
+  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)) {
-        x(!0);
+        f(!0);
         return;
       }
       const I = get(v, "unit") !== "" ? get(v, "unit") : m;
       if (I === "auto" || I === "none") {
-        A(`${d}${I}`);
+        w(`${d}${I}`);
         return;
       }
       if (get(v, "value") === "")
         return;
       const T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      S ? k(T) : A(T);
+      S ? k(T) : w(T);
     },
-    [A, k, a, m, d, u]
+    [w, k, a, m, d, u]
   ), E = useCallback(
     (S) => {
       const v = getUserInputValues(`${a}`, u);
       if (get(v, "error", !1)) {
-        x(!0);
+        f(!0);
         return;
       }
       if (S === "auto" || S === "none") {
-        A(`${d}${S}`);
+        w(`${d}${S}`);
         return;
       }
       if (get(v, "value") === "")
         return;
       const I = get(v, "unit") !== "" ? get(v, "unit") : S, T = `${get(v, "value", "").startsWith("-") ? "-" : ""}${d}[${get(v, "value", "").replace("-", "")}${I === "-" ? "" : I}]`;
-      A(T);
+      w(T);
     },
-    [A, a, d, u]
+    [w, 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(
@@ -5482,7 +5485,7 @@ const BlockStylingProps = () => {
         {
           readOnly: m === "class",
           onKeyPress: (S) => {
-            S.key === "Enter" && w();
+            S.key === "Enter" && A();
           },
           onKeyDown: (S) => {
             if (S.keyCode !== 38 && S.keyCode !== 40)
@@ -5497,9 +5500,9 @@ const BlockStylingProps = () => {
           onKeyUp: (S) => {
             j && (S.preventDefault(), _(!1));
           },
-          onBlur: () => w(),
+          onBlur: () => A(),
           onChange: (S) => {
-            x(!1), l(S.target.value);
+            f(!1), l(S.target.value);
           },
           onClick: (S) => {
             var v;
@@ -5508,7 +5511,7 @@ const BlockStylingProps = () => {
           value: C ? 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(
             " ",
-            f ? "border-red-500 text-red-500" : "border-foreground/20"
+            x ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -5545,7 +5548,7 @@ const BlockStylingProps = () => {
           if (b(() => ""), B(!1), isEmpty(S))
             return;
           const v = `${S}`, L = `${v.startsWith("-") ? "-" : ""}${d}[${v.replace("-", "")}${m === "-" ? "" : m}]`;
-          A(L);
+          w(L);
         },
         onDrag: (S) => {
           if (isEmpty(S))
@@ -5627,7 +5630,7 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const f = useCallback(
+  const x = useCallback(
     // eslint-disable-next-line no-shadow
     (y) => {
       p({ color: g, shade: y });
@@ -5637,11 +5640,11 @@ const COLOR_PROP = {
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [r]);
-  const { match: x } = useTailwindClassList();
+  const { match: f } = useTailwindClassList();
   return useEffect(() => {
     const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    x(o, b) && n(b, o);
-  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    f(o, b) && n(b, o);
+  }, [f, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
@@ -5681,7 +5684,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: f, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: m, disabled: !g || !l, onChange: x, options: i }) })
   ] });
 }, EDITOR_ICONS = {
   "not-italic": () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 3H11V5H9V11H11V13H5V11H7V5H5V3H9Z", fill: "white" }) }),
@@ -6015,17 +6018,17 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), y = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
-    (k, w = !0) => {
+  }, 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(x, [S], w);
+      h(f, [S], A);
     },
-    [x, p, g, u, l, h]
+    [f, p, g, u, l, h]
   ), C = useCallback(() => {
-    f(x, [y], !0);
-  }, [x, y, f]), B = useMemo(() => canChangeClass(m, g), [m, g]);
+    x(f, [y], !0);
+  }, [f, y, x]), B = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(B, m);
   }, [B, i, m]);
@@ -6041,9 +6044,9 @@ const COLOR_PROP = {
       }[k]);
     },
     [j]
-  ), A = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: m && A, 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 && !A ? "text-foreground" : ""}`, children: n(a) }) }),
+  ), 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) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
         r === "arbitrary" ? /* @__PURE__ */ jsx(
@@ -6062,7 +6065,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: A ? /* @__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: 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(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6111,23 +6114,23 @@ const COLOR_PROP = {
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
           o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
-          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: x }, f) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => u(f),
-                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                onClick: () => u(x),
+                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: m(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: m(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
-                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
             /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(h)) })
-          ] }) }, `option-${x}`)) })
+          ] }) }, `option-${f}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
           BlockStyle,
@@ -6282,9 +6285,9 @@ const COLOR_PROP = {
   canvas: n = !1,
   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), f = (b) => {
+  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]);
-  }, x = (b) => {
+  }, f = (b) => {
     n || l(b), c(b);
   }, y = getBreakpointValue(n ? i : a).toLowerCase();
   return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (b) => /* @__PURE__ */ createElement(
@@ -6292,7 +6295,7 @@ const COLOR_PROP = {
     {
       canvas: n,
       ...b,
-      onClick: x,
+      onClick: f,
       key: b.breakpoint,
       currentBreakpoint: y
     }
@@ -6306,7 +6309,7 @@ const COLOR_PROP = {
           openDelay: o,
           tooltip: r,
           ...b,
-          onClick: x,
+          onClick: f,
           key: b.breakpoint,
           currentBreakpoint: y
         }
@@ -6321,7 +6324,7 @@ const COLOR_PROP = {
           DropdownMenuCheckboxItem,
           {
             disabled: b.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(b.breakpoint)),
+            onCheckedChange: () => x(toUpper(b.breakpoint)),
             checked: includes(u, toUpper(b.breakpoint)),
             children: m(b.title)
           },
@@ -6406,8 +6409,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (h = d.current) == null || h.focus();
   }, []);
   const m = (h) => {
-    const { usage: f } = h || {};
-    !l && f && g(f), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: x } = h || {};
+    !l && x && g(x), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("h2", { className: "mb-1 text-sm font-semibold leading-none tracking-tight", children: n("Ask AI") }),
@@ -6463,10 +6466,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), [f, x] = 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 T = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, T, !0), x("");
-  }, [j, _] = useState([]), A = ({ value: T }) => {
+  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 T = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, T, !0), f("");
+  }, [j, _] = useState([]), w = ({ value: T }) => {
     const P = T.trim().toLowerCase(), R = P.match(/.+:/g);
     let N = [];
     if (R && R.length > 0) {
@@ -6480,7 +6483,7 @@ function ManualClasses() {
     return _(map(N, "item"));
   }, k = () => {
     _([]);
-  }, w = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
+  }, A = (T) => T.name, E = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), S = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6488,19 +6491,19 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: f,
+      value: x,
       onFocus: (T) => {
         setTimeout(() => {
           T.target && T.target.select();
         }, 0);
       },
       onKeyDown: (T) => {
-        T.key === "Enter" && f.trim() !== "" && B();
+        T.key === "Enter" && x.trim() !== "" && B();
       },
-      onChange: (T, { newValue: P }) => x(P),
+      onChange: (T, { newValue: P }) => f(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [f, c, o]
+    [x, c, o]
   ), v = (T) => {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
@@ -6534,9 +6537,9 @@ function ManualClasses() {
         Autosuggest,
         {
           suggestions: j,
-          onSuggestionsFetchRequested: A,
+          onSuggestionsFetchRequested: w,
           onSuggestionsClearRequested: k,
-          getSuggestionValue: w,
+          getSuggestionValue: A,
           renderSuggestion: E,
           inputProps: S,
           containerProps: {
@@ -6555,7 +6558,7 @@ function ManualClasses() {
           variant: "outline",
           className: "h-6 border-border",
           onClick: B,
-          disabled: f.trim() === "",
+          disabled: x.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
@@ -6586,7 +6589,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            x(T), g(m, [T]), setTimeout(() => {
+            f(T), g(m, [T]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -6742,9 +6745,9 @@ function BlockStyling() {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let h = parseFloat(i.dragStartValue);
       h = isNaN(h) ? 0 : h;
-      let f = MAPPER[i.dragUnit];
-      (startsWith(m, "scale") || m === "opacity") && (f = 10);
-      let y = (i.dragStartY - u.pageY) / f + h;
+      let x = MAPPER[i.dragUnit];
+      (startsWith(m, "scale") || m === "opacity") && (x = 10);
+      let y = (i.dragStartY - u.pageY) / x + h;
       g && y < 0 && (y = 0), m === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
     },
     [i],
@@ -6793,7 +6796,7 @@ const CoreBlock = ({
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, f = useFeature("dnd"), { t: x } = useTranslation();
+  }, x = useFeature("dnd"), { t: f } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6806,15 +6809,15 @@ const CoreBlock = ({
             g([]), m();
           }, 200);
         },
-        draggable: f ? "true" : "false",
+        draggable: x ? "true" : "false",
         className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground",
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(f(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6833,13 +6836,14 @@ const CoreBlock = ({
     }
   );
 };
-let PRE_IMPORT_HTML_HOOK = (o) => o;
+let PRE_IMPORT_HTML_HOOK = async (o) => o;
 const registerChaiPreImportHTMLHook = (o) => {
   PRE_IMPORT_HTML_HOOK = o;
-}, getPreImportHTML = (o) => PRE_IMPORT_HTML_HOOK(o), ImportHTML = ({ parentId: o, position: n }) => {
-  const { t: r } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), c = () => {
-    const d = getPreImportHTML(a), p = getBlocksFromHTML(d);
-    i([...p], o, n), l(""), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+}, getPreImportHTML = async (o) => await PRE_IMPORT_HTML_HOOK(o), ImportHTML = ({ parentId: o, position: n }) => {
+  const { t: r } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), [c, d] = useState(!1), p = async () => {
+    d(!0);
+    const u = await getPreImportHTML(a), g = getBlocksFromHTML(u);
+    i([...g], o, n), l(""), d(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   };
   return /* @__PURE__ */ jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsx(CardDescription, { children: r("Use HTML snippets from Tailwind CSS component libraries") }) }),
@@ -6850,8 +6854,8 @@ const registerChaiPreImportHTMLHook = (o) => {
         {
           autoFocus: !0,
           tabIndex: 1,
-          ref: (d) => d && d.focus(),
-          onChange: (d) => l(d.target.value),
+          ref: (u) => u && u.focus(),
+          onChange: (u) => l(u.target.value),
           rows: 12,
           value: a,
           placeholder: r("Enter your code snippet here"),
@@ -6859,7 +6863,11 @@ const registerChaiPreImportHTMLHook = (o) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "", onClick: () => c(), size: "sm", className: "w-fit", children: r("Import HTML") }) })
+    /* @__PURE__ */ jsx(CardFooter, { className: "flex flex-col justify-end p-3", children: /* @__PURE__ */ jsx(Button, { disabled: a.trim() === "" || c, onClick: () => p(), size: "sm", className: "w-fit", children: c ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CircleIcon, { className: "mr-2 h-4 w-4 animate-spin" }),
+      " ",
+      r("Importing...")
+    ] }) : r("Import HTML") }) })
   ] });
 }, ChaiSelect = ({
   defaultValue: o = "",
@@ -6920,7 +6928,7 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), y = (B) => {
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), y = (B) => {
     const j = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && j;
   }, b = useCallback(
@@ -6941,20 +6949,20 @@ const registerChaiLibrary = (o, n) => {
       {
         onClick: l ? () => {
         } : b,
-        draggable: f ? "true" : "false",
+        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 A = { blocks: j, uiLibrary: !0, parent: _ };
-            if (B.dataTransfer.setData("text/plain", JSON.stringify(A)), o.preview) {
+            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);
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(A), setTimeout(() => {
+            f(w), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -6980,22 +6988,22 @@ const registerChaiLibrary = (o, n) => {
     ] }) })
   ] });
 }, 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([]), f = useRef(null);
+  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);
   useEffect(() => {
-    c && c.length > 0 && (f.current = new Fuse(c, {
+    c && c.length > 0 && (x.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
       threshold: 0.4,
       ignoreLocation: !0
     }));
   }, [c]), useEffect(() => {
-    if (!u.trim() || !f.current) {
+    if (!u.trim() || !x.current) {
       h([]);
       return;
     }
-    const v = f.current.search(u).map((I) => I.item);
+    const v = x.current.search(u).map((I) => I.item);
     h(v);
   }, [u]);
-  const x = u.trim() && !isEmpty(m) ? m : c, y = groupBy(x, "group"), [b, C] = useState(null);
+  const f = u.trim() && !isEmpty(m) ? m : c, y = groupBy(f, "group"), [b, C] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(y))) {
       C(null);
@@ -7006,13 +7014,13 @@ const registerChaiLibrary = (o, n) => {
       return;
     }
   }, [y, b]);
-  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), A = (v) => {
+  const B = get(y, b, []), j = useRef(null), { t: _ } = useTranslation(), w = (v) => {
     j.current && (clearTimeout(j.current), j.current = null), j.current = setTimeout(() => {
       j.current && C(v);
     }, 400);
   }, k = () => {
     i != null && i.id && p(i.id);
-  }, w = () => {
+  }, A = () => {
     g("");
   };
   if (d)
@@ -7036,7 +7044,7 @@ const registerChaiLibrary = (o, n) => {
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: w,
+          onClick: A,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" })
         }
@@ -7057,7 +7065,7 @@ const registerChaiLibrary = (o, n) => {
           ] }) }) : map(y, (v, I) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => A(I),
+              onMouseEnter: () => w(I),
               onMouseLeave: () => clearTimeout(j.current),
               role: "button",
               onClick: () => C(I),
@@ -7135,25 +7143,25 @@ const registerChaiLibrary = (o, n) => {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const h = Object.entries(a).map(([x, y]) => {
+        const h = Object.entries(a).map(([f, y]) => {
           const b = y, C = b.type || "partial", B = formatReadableName(C);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(b.name || x),
+            label: formatReadableName(b.name || f),
             description: b.description || "",
             icon: FrameIcon,
             group: B,
             // Use formatted type as group
             category: "partial",
-            partialBlockId: x,
+            partialBlockId: f,
             // Store the original ID as partialBlockId
             _name: b.name
           };
-        }), f = uniq(map(h, "group"));
+        }), x = uniq(map(h, "group"));
         p({
           blocks: h,
-          groups: f,
+          groups: x,
           isLoading: !1,
           error: null
         }), g(!0);
@@ -7199,7 +7207,7 @@ const registerChaiLibrary = (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, f] = useState("all"), [x, y] = useState(null), b = useRef(null);
+  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);
   useEffect(() => {
     const v = setTimeout(() => {
       var I;
@@ -7207,9 +7215,9 @@ const registerChaiLibrary = (o, n) => {
     }, 0);
     return () => clearTimeout(v);
   }, [g]), useEffect(() => {
-    d && (f("all"), y(null));
+    d && (x("all"), y(null));
   }, [d]), useEffect(() => (b.current = debounce((v) => {
-    f(v);
+    x(v);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
@@ -7218,7 +7226,7 @@ const registerChaiLibrary = (o, n) => {
   }, []), B = useCallback(() => {
     y(null), b.current && b.current.cancel();
   }, []), j = useCallback((v) => {
-    b.current && b.current.cancel(), f(v), y(null);
+    b.current && b.current.cancel(), x(v), y(null);
   }, []), _ = useMemo(
     () => d ? values(n).filter(
       (v) => {
@@ -7227,15 +7235,15 @@ const registerChaiLibrary = (o, n) => {
       }
     ) : n,
     [n, d]
-  ), A = useMemo(
+  ), w = 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(A, (v) => CORE_GROUPS.indexOf(v) === -1 ? 99 : CORE_GROUPS.indexOf(v)),
-    [A]
-  ), w = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), E = useMemo(() => h === "all" ? k : [h], [k, h]);
+    () => 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]);
   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,
@@ -7256,7 +7264,7 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => j("all"),
             onMouseEnter: () => C("all"),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${h === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            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"
@@ -7267,13 +7275,13 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => j(v),
             onMouseEnter: () => C(v),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === v || x === v ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            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()))
           },
           `sidebar-${v}`
         ))
       ] }) }) }),
-      /* @__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: A.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: 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: [
         i("No blocks found matching"),
         ' "',
         d,
@@ -7281,7 +7289,7 @@ const registerChaiLibrary = (o, n) => {
       ] }) }) : /* @__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: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(w), { group: v }) : values(w),
+          h === "all" ? filter(values(A), { group: v }) : values(A),
           { hidden: !0 }
         ).map((I) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7308,7 +7316,7 @@ const registerChaiLibrary = (o, n) => {
   }, [i, g, c]);
   const h = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), f = useChaiAddBlockTabs(), x = p && m(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
+  }, []), x = useChaiAddBlockTabs(), f = p && m(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
   return useEffect(() => {
     i === "library" && !b && c("core");
   }, [i, b, c]), /* @__PURE__ */ jsxs("div", { className: cn$2("flex h-full w-full flex-col overflow-hidden", o), children: [
@@ -7329,14 +7337,14 @@ const registerChaiLibrary = (o, n) => {
             b && /* @__PURE__ */ jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
-            x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(f, (C) => /* @__PURE__ */ jsx(TabsTrigger, { value: C.id, children: React__default.createElement(C.tab) }, `tab-add-block-${C.id}`))
+            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}`))
           ] }),
           /* @__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 }) }) }) }),
-          x ? /* @__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(f, (C) => /* @__PURE__ */ jsx(TabsContent, { value: C.id, children: React__default.createElement(C.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${C.id}`))
+          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}`))
         ]
       }
     )
@@ -7646,26 +7654,26 @@ 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: f, willReceiveDrop: x, 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: C } = o, B = get(h, "_show", !0), j = (N) => {
     N.stopPropagation(), B && o.toggle();
   }, _ = (N) => {
     N.isInternal && (d = N.isOpen, N.isOpen && N.close());
-  }, A = (N) => {
+  }, w = (N) => {
     N.isInternal && d !== null && (d ? N.open() : N.close(), d = null);
-  }, [k, w] = useAtom$1(currentAddSelection), E = () => {
+  }, [k, A] = useAtom$1(currentAddSelection), E = () => {
     var N;
-    S(), o.parent.isSelected || w((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
+    S(), o.parent.isSelected || A((N = o == null ? void 0 : o.parent) == null ? void 0 : N.id);
   }, S = () => {
-    w(null);
+    A(null);
   }, v = (N) => {
     S(), N.stopPropagation(), !o.isOpen && B && o.toggle(), C(N);
   };
   useEffect(() => {
     const N = setTimeout(() => {
-      x && !o.isOpen && !y && B && o.toggle();
+      f && !o.isOpen && !y && B && o.toggle();
     }, 500);
     return () => clearTimeout(N);
-  }, [x, o, y]);
+  }, [f, o, y]);
   const I = (N, D) => {
     const F = i.contentDocument || i.contentWindow.document, O = F.querySelector(`[data-block-id=${N}]`);
     O && O.setAttribute("data-drop", D);
@@ -7705,7 +7713,7 @@ const Input = ({ node: o }) => {
       "data-node-id": m,
       ref: r,
       onDragStart: () => _(o),
-      onDragEnd: () => A(o),
+      onDragEnd: () => w(o),
       onDragOver: (N) => {
         N.preventDefault(), I(m, "yes");
       },
@@ -7733,12 +7741,12 @@ const Input = ({ node: o }) => {
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 py-0 outline-none",
-              f ? "bg-primary/20" : "hover:bg-primary/10",
-              x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
+              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" : "",
               y && "opacity-20",
               B ? "" : "line-through opacity-50",
-              T && f && "bg-primary/20 text-primary"
+              T && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7755,9 +7763,9 @@ const Input = ({ node: o }) => {
                     className: cn(
                       "leading-1 flex items-center",
                       T && "text-orange-600/90",
-                      T && f && "text-orange-800",
+                      T && x && "text-orange-800",
                       P && "text-purple-600/90",
-                      P && f && "text-purple-800"
+                      P && x && "text-purple-800"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(TypeIcon, { type: h == null ? void 0 : h._type }),
@@ -8220,16 +8228,16 @@ 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 A = d.map((k) => Object.keys(k)[0]);
+    const w = d.map((k) => Object.keys(k)[0]);
     DEFAULT_THEME_PRESET.forEach((k) => {
-      const w = Object.keys(k)[0];
-      A.includes(w) || d.push(k);
+      const A = Object.keys(k)[0];
+      w.includes(A) || d.push(k);
     });
   }
-  const [g, m] = useTheme(), h = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
-    (A) => {
+  const [g, m] = useTheme(), h = useThemeOptions(), { t: x } = useTranslation(), f = React.useCallback(
+    (w) => {
       const k = { ...g };
-      setPreviousTheme(k), m(A), toast.success("Theme updated", {
+      setPreviousTheme(k), m(w), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(ResetIcon, { className: "h-4 w-4" }),
@@ -8245,56 +8253,56 @@ const Input = ({ node: o }) => {
     },
     [g, m]
   ), y = () => {
-    const A = d.find((k) => Object.keys(k)[0] === a);
-    if (A) {
-      const k = Object.values(A)[0];
-      k && typeof k == "object" && "fontFamily" in k && "borderRadius" in k && "colors" in k ? (x(k), l("")) : console.error("Invalid preset structure:", k);
+    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);
     } else
       console.error("Preset not found:", a);
-  }, b = (A) => {
-    x(A), l("");
+  }, b = (w) => {
+    f(w), l("");
   }, C = useDebouncedCallback(
-    (A, k) => {
+    (w, k) => {
       m(() => ({
         ...g,
         fontFamily: {
           ...g.fontFamily,
-          [A.replace(/font-/g, "")]: k
+          [w.replace(/font-/g, "")]: k
         }
       }));
     },
     [g],
     200
   ), B = React.useCallback(
-    (A) => {
+    (w) => {
       m(() => ({
         ...g,
-        borderRadius: `${A}px`
+        borderRadius: `${w}px`
       }));
     },
     [g]
   ), j = useDebouncedCallback(
-    (A, k) => {
+    (w, k) => {
       m(() => {
-        const w = get(g, `colors.${A}`);
-        return n ? set(w, 1, k) : set(w, 0, k), {
+        const A = get(g, `colors.${w}`);
+        return n ? set(A, 1, k) : set(A, 0, k), {
           ...g,
           colors: {
             ...g.colors,
-            [A]: w
+            [w]: A
           }
         };
       });
     },
     [g],
     200
-  ), _ = (A) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(A.items).map(([k]) => {
-    const w = get(g, `colors.${k}.${n ? 1 : 0}`);
-    return w ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+  ), _ = (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: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: w,
+          value: A,
           onChange: (E) => j(k, E)
         }
       ),
@@ -8305,21 +8313,21 @@ const Input = ({ node: o }) => {
     /* @__PURE__ */ jsxs("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto", o), children: [
       d.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-0 my-2 flex flex-col gap-1 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: f("Presets") }),
+          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: x("Presets") }),
           /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
             /* @__PURE__ */ jsx(UploadIcon, { className: "h-4 w-4" }),
-            f("Import theme")
+            x("Import theme")
           ] }) })
         ] }),
         /* @__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((A) => {
-              const k = Object.keys(A)[0], w = k.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: k, children: capitalize(w) }, k);
+            /* @__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("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: y, children: f("Apply") }) })
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: y, children: x("Apply") }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
@@ -8328,14 +8336,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(([A, k]) => /* @__PURE__ */ jsx(
+        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(h.fontFamily).map(([w, k]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: A,
-            value: g.fontFamily[A.replace(/font-/g, "")] || k[Object.keys(k)[0]],
-            onChange: (w) => C(A, w)
+            label: w,
+            value: g.fontFamily[w.replace(/font-/g, "")] || k[Object.keys(k)[0]],
+            onChange: (A) => C(w, A)
           },
-          A
+          w
         )) }),
         /* @__PURE__ */ jsx(Separator, {}),
         (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -8361,7 +8369,7 @@ const Input = ({ node: o }) => {
                 Switch,
                 {
                   checked: n,
-                  onCheckedChange: (A) => r(A),
+                  onCheckedChange: (w) => r(w),
                   "aria-label": "Toggle dark mode",
                   className: "mx-1"
                 }
@@ -8369,7 +8377,7 @@ const Input = ({ node: o }) => {
               /* @__PURE__ */ jsx(MoonIcon, { className: "h-4 w-4" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((A) => _(A)) })
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: h.colors.map((w) => _(w)) })
         ] }),
         /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
           LazyCssImportModal,
@@ -8790,106 +8798,103 @@ const CHAI_FEATURE_FLAGS = {}, registerChaiFeatureFlag = (o, n) => {
   registerChaiFeatureFlag("enable-ai-chat-left", {
     description: "Enable AI chat on the left side"
   });
-}, QUICK_PROMPTS = [
-  {
-    name: "Improve writing",
-    icon: Pencil2Icon,
-    prompt: "Improving writing in all text elements. Replacing placeholder content with meaningful relevant content."
-  },
-  {
-    name: "Replace placeholder content",
-    icon: LoopIcon,
-    prompt: "Discard current placeholder content and replace with meaningful relevant content."
-  },
-  //TODO: Add tone options
-  // {
-  //   name: "Change tone",
-  //   icon: MegaphoneIcon,
-  //   subMenus: ["joyful", "serious", "angry", "sad", "excited", "relaxed", "confident", "assertive", "polite"],
-  //   prompt: "Change tone in all text elements. Rewrite all text elements in a more _TONE_ tone.",
-  // },
-  {
-    name: "Fix grammar",
-    icon: CheckIcon,
-    prompt: "Fix grammar in all text elements. Ensuring the text is grammatically correct and free of errors."
-  },
-  {
-    name: "Make longer",
-    icon: ArrowUpIcon,
-    prompt: "Make all text elements longer."
-  },
-  {
-    name: "Make shorter",
-    icon: ArrowDownIcon,
-    prompt: "Make all text elements shorter."
-  },
-  {
-    name: "Add emojis",
-    icon: FaceIcon,
-    prompt: "Add emojis to text elements if relevant."
-  },
-  {
-    name: "Randomize",
-    icon: ShuffleIcon,
-    prompt: "Randomize all text elements."
-  }
-];
+};
 function QuickPrompts({ onClick: o }) {
-  const { loading: n } = useAskAi(), { t: r } = useTranslation(), { selectedLang: a, fallbackLang: l } = useLanguages(), i = [...QUICK_PROMPTS];
-  return a && a !== l && i.splice(0, 0, {
-    name: `Translate to ${get(LANGUAGES, a, a)}`,
+  const { loading: n } = useAskAi(), { t: r } = useTranslation(), { selectedLang: a, fallbackLang: l } = useLanguages(), c = [...[
+    {
+      name: r("Improve writing"),
+      icon: Pencil2Icon,
+      prompt: r(
+        "Improving writing in all text elements. Replacing placeholder content with meaningful relevant content."
+      )
+    },
+    {
+      name: r("Replace placeholder content"),
+      icon: LoopIcon,
+      prompt: r("Discard current placeholder content and replace with meaningful relevant content.")
+    },
+    {
+      name: r("Fix grammar"),
+      icon: CheckIcon,
+      prompt: r("Fix grammar in all text elements. Ensuring the text is grammatically correct and free of errors.")
+    },
+    {
+      name: r("Make longer"),
+      icon: ArrowUpIcon,
+      prompt: r("Make all text elements longer.")
+    },
+    {
+      name: r("Make shorter"),
+      icon: ArrowDownIcon,
+      prompt: r("Make all text elements shorter.")
+    },
+    {
+      name: r("Add emojis"),
+      icon: FaceIcon,
+      prompt: r("Add emojis to text elements if relevant.")
+    },
+    {
+      name: r("Randomize"),
+      icon: ShuffleIcon,
+      prompt: r("Randomize all text elements.")
+    }
+  ]];
+  return a && a !== l && c.splice(0, 0, {
+    name: r("Translate to %s", get(LANGUAGES, a, a)),
     icon: ChatBubbleIcon,
-    prompt: `Translate the content to ${get(LANGUAGES, a, a)}. Maintain same tone, style and length.`
-  }), /* @__PURE__ */ jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: i.map(
-    ({ name: c, icon: d, subMenus: p, prompt: u }) => p ? /* @__PURE__ */ jsxs(Popover, { children: [
+    prompt: r(
+      "Translate the content to %s. Maintain same tone, style and length.",
+      get(LANGUAGES, a, a)
+    )
+  }), /* @__PURE__ */ jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: c.map(
+    ({ name: d, icon: p, subMenus: u, prompt: g }) => u ? /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
         "li",
         {
           className: "flex cursor-pointer items-center space-x-2 rounded p-1 pl-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
           children: [
-            /* @__PURE__ */ jsx(d, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: c })
+            /* @__PURE__ */ jsx(p, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: d })
           ]
         },
-        c
+        d
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { side: "right", children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: "Happy" }) }) })
+      /* @__PURE__ */ jsx(PopoverContent, { side: "right", children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: r("Happy") }) }) })
     ] }) : /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => o(u),
+        onClick: () => o(g),
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
         children: [
-          /* @__PURE__ */ jsx(d, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { children: r(c) })
+          /* @__PURE__ */ jsx(p, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { children: r(d) })
         ]
       },
-      c
+      d
     )
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(), u = useRef(null), g = useRef(null);
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null);
   useEffect(() => {
-    var h;
-    (h = u.current) == null || h.focus();
+    var g;
+    (g = d.current) == null || g.focus();
   }, []);
-  const m = (h) => {
-    const { usage: f } = h || {};
-    !l && f && p(f), g.current = setTimeout(() => p(void 0), 1e4), l || c("");
+  const u = () => {
+    l || c("");
   };
   return /* @__PURE__ */ jsx("div", { className: "", children: o ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
     /* @__PURE__ */ jsx(
       Textarea,
       {
-        ref: u,
+        ref: d,
         value: i,
-        onChange: (h) => c(h.target.value),
+        onChange: (g) => c(g.target.value),
         placeholder: n("Ask AI to edit content"),
         className: "w-full",
         rows: 3,
-        onKeyDown: (h) => {
-          h.key === "Enter" && (h.preventDefault(), g.current && clearTimeout(g.current), p(void 0), r("content", o, i, m));
+        onKeyDown: (g) => {
+          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), r("content", o, i, u));
         }
       }
     ),
@@ -8899,7 +8904,7 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            g.current && clearTimeout(g.current), p(void 0), r("content", o, i, m);
+            p.current && clearTimeout(p.current), r("content", o, i, u);
           },
           variant: "default",
           className: "w-fit",
@@ -8918,21 +8923,13 @@ const AIUserPrompt = ({ blockId: o }) => {
         /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: () => stop(), className: "hidden w-fit", size: "sm", children: n("Stop") })
       ] }) : null
     ] }),
-    d ? /* @__PURE__ */ jsx("div", { className: "max-w-full", children: /* @__PURE__ */ jsxs("p", { className: "mb-1 flex justify-between break-words rounded border border-blue-500 bg-blue-100 p-1 text-xs text-blue-500", children: [
-      /* @__PURE__ */ jsxs("span", { children: [
-        n("Total tokens used"),
-        ": ",
-        d.totalTokens
-      ] }),
-      /* @__PURE__ */ jsx(Countdown, {})
-    ] }) }) : null,
     /* @__PURE__ */ jsx("div", { className: "max-w-full", children: l && /* @__PURE__ */ jsx("p", { className: "break-words rounded border border-red-500 bg-red-100 p-1 text-xs text-red-500", children: l.message }) }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx(
       QuickPrompts,
       {
-        onClick: (h) => {
-          g.current && clearTimeout(g.current), p(void 0), r("content", o, h, m);
+        onClick: (g) => {
+          p.current && clearTimeout(p.current), r("content", o, g, u);
         }
       }
     )
@@ -9003,17 +9000,17 @@ function AIChatPanel() {
     }, 1500);
   }, h = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
-  }, f = (b) => {
+  }, x = (b) => {
     var B;
     const C = (B = b.target.files) == null ? void 0 : B[0];
     if (C) {
       const j = new FileReader();
       j.onload = (_) => {
-        var A;
-        d((A = _.target) == null ? void 0 : A.result);
+        var w;
+        d((w = _.target) == null ? void 0 : w.result);
       }, j.readAsDataURL(C);
     }
-  }, x = () => {
+  }, f = () => {
     var b;
     (b = p.current) == null || b.click();
   }, y = () => {
@@ -9080,14 +9077,14 @@ function AIChatPanel() {
             className: "max-h-[120px] min-h-[40px] resize-none border-0 bg-muted/50 py-2.5 pr-10 focus-visible:ring-1"
           }
         ),
-        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: f, accept: "image/*", className: "hidden" }),
+        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: x, accept: "image/*", className: "hidden" }),
         /* @__PURE__ */ jsx(
           Button,
           {
             size: "icon",
             variant: "ghost",
             className: "absolute bottom-2 right-2 h-6 w-6",
-            onClick: x,
+            onClick: f,
             children: /* @__PURE__ */ jsx(ImageIcon, { className: "h-4 w-4 text-muted-foreground" })
           }
         )
@@ -9205,7 +9202,7 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = 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();
   useEffect(() => {
     l(n);
   }, [n]);
@@ -9219,8 +9216,8 @@ const AiAssistant = () => {
       r(k), l(a), c(""), p(""), h("");
     }
   }, C = (k) => {
-    const w = a.filter((E, S) => S !== k);
-    r(w), l(w);
+    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 = () => {
@@ -9234,16 +9231,16 @@ const AiAssistant = () => {
     }
   }, _ = (k) => {
     k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? j() : b());
-  }, A = useCallback((k) => {
-    const w = (v) => /[.,!?;:]/.test(v), E = (v, I, L) => {
+  }, 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 === "." || !w(R) && R !== " ") && (T = " "), I < v.length && !w(N) && N !== " " && (P = " "), {
+      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
       };
-    }, S = x.current;
+    }, S = f.current;
     if (S) {
       const v = S.selectionStart || 0, I = S.value || "", L = S.selectionEnd || v;
       if (L > v) {
@@ -9274,7 +9271,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: f,
+                  ref: x,
                   value: i,
                   onChange: (k) => c(k.target.value),
                   placeholder: "Enter Key",
@@ -9285,7 +9282,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: A })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9295,7 +9292,7 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: x,
+                  ref: f,
                   value: d,
                   onChange: (k) => p(k.target.value),
                   onKeyDown: _,
@@ -9310,16 +9307,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((k, w) => /* @__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((k, A) => /* @__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__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(w), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(w), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__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" }) })
       ] })
-    ] }, w)) })
+    ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9489,40 +9486,40 @@ 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((w) => {
-    w.preventDefault();
-  }, []), f = useCallback(
-    (w) => {
-      console.log("handleMenuItemClick", w, n), r(n === w ? null : w);
+  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();
+  }, []), x = useCallback(
+    (A) => {
+      console.log("handleMenuItemClick", A, n), r(n === A ? null : A);
     },
     [n, r]
-  ), { t: x } = useTranslation(), y = useMemo(
+  ), { 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);
   useEffect(() => {
     if (n !== null) {
-      const w = find(y, { id: n });
-      w && get(w, "view", "standard") === "standard" && (a.current = n, i(get(w, "width", DEFAULT_PANEL_WIDTH)));
+      const A = find(y, { id: n });
+      A && get(A, "view", "standard") === "standard" && (a.current = n, i(get(A, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, y]);
   const j = useMemo(() => {
     if (n === null) return 0;
-    const w = find(y, { id: n });
-    return get(w, "view", "standard") === "standard" ? B : l;
+    const A = find(y, { id: n });
+    return get(A, "view", "standard") === "standard" ? B : l;
   }, [n, B, l, y]), _ = useCallback(() => {
     r(a.current);
-  }, [r, n]), A = useCallback(() => {
+  }, [r, n]), w = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
     n !== null && !find(y, { id: n }) && r("outline");
   }, [n, y]);
   const k = useCallback(
-    (w) => {
-      f(w);
+    (A) => {
+      x(A);
     },
-    [f]
+    [x]
   );
   return /* @__PURE__ */ jsx("div", { dir: b, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
@@ -9534,24 +9531,24 @@ 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((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__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), {
                   position: "top",
-                  panelId: w.id,
-                  isActive: n === w.id,
-                  show: () => k(w.id)
+                  panelId: A.id,
+                  isActive: n === A.id,
+                  show: () => k(A.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(A.label) }) })
               ] }, "button-top-" + E)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: m == null ? void 0 : m.map((w, E) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(w, "button", NoopComponent), {
+              /* @__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), {
                   position: "bottom",
-                  panelId: w.id,
-                  isActive: n === w.id,
-                  show: () => k(w.id)
+                  panelId: A.id,
+                  isActive: n === A.id,
+                  show: () => k(A.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(w.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(A.label) }) })
               ] }, "button-bottom-" + E)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9567,7 +9564,7 @@ const RootLayout = () => {
                     "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: x(get(C, "label", "")) })
+                      children: /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
                     }
                   ),
                   /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
@@ -9590,11 +9587,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: c === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    x("AI Assistant")
+                    f("AI Assistant")
                   ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx(MixerHorizontalIcon, { className: "h-4 w-4 text-gray-600" }),
-                      x("Theme Settings")
+                      f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9625,10 +9622,10 @@ const RootLayout = () => {
         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: x(get(C, "label", "")) })
+            /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
-            close: A
+            close: w
           }) }) })
         ]
       }
@@ -9637,10 +9634,10 @@ const RootLayout = () => {
     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: [
       /* @__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: x(get(C, "label", "")) })
+        /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
       ] }) }),
       /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
-        close: A
+        close: w
       }) }) })
     ] }) }),
     n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
@@ -9663,12 +9660,12 @@ const RootLayout = () => {
               /* @__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: x(get(C, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { children: f(get(C, "label", "")) })
                 ] }),
                 /* @__PURE__ */ jsx(Button, { onClick: () => _(), 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: A
+                close: w
               }) }) })
             ]
           }
@@ -9707,36 +9704,36 @@ const RootLayout = () => {
 }) => {
   const a = useChaiFeatureFlags(), [l, i] = useState(""), [c, d] = useState(!1), [p, u] = useState({ x: 0, y: 0 }), g = useMemo(() => {
     if (!l.trim()) return a;
-    const x = l.toLowerCase();
+    const f = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([y, b]) => {
         var C;
-        return (y == null ? void 0 : y.toLowerCase().includes(x)) || ((C = b == null ? void 0 : b.description) == null ? void 0 : C.toLowerCase().includes(x));
+        return (y == null ? void 0 : y.toLowerCase().includes(f)) || ((C = b == null ? void 0 : b.description) == null ? void 0 : C.toLowerCase().includes(f));
       })
     );
-  }, [a, l]), m = (x) => {
+  }, [a, l]), m = (f) => {
     d(!0), u({
-      x: x.clientX - n.x,
-      y: x.clientY - n.y
+      x: f.clientX - n.x,
+      y: f.clientY - n.y
     });
-  }, h = (x) => {
+  }, h = (f) => {
     if (!c) return;
-    const y = x.clientX - p.x, b = x.clientY - p.y, C = x.currentTarget, B = C.offsetWidth, j = C.offsetHeight, _ = window.innerWidth - B, A = window.innerHeight - j, k = Math.max(0, Math.min(y, _)), w = Math.max(0, Math.min(b, A));
-    r(k, w);
-  }, f = () => {
+    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);
+  }, x = () => {
     d(!1);
   };
   return useEffect(() => {
-    const x = () => {
+    const f = () => {
       c && d(!1);
     };
-    return window.addEventListener("mouseup", x), () => window.removeEventListener("mouseup", x);
+    return window.addEventListener("mouseup", f), () => window.removeEventListener("mouseup", f);
   }, [c]), !n || n.x < 0 || n.y < 0 ? null : /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseDown: m,
       onMouseMove: h,
-      onMouseUp: f,
+      onMouseUp: x,
       className: "fixed z-[9999999] select-none rounded-md border border-gray-300 bg-white p-3 shadow-2xl",
       style: {
         left: n.x,
@@ -9778,13 +9775,13 @@ const RootLayout = () => {
                 placeholder: "Search features...",
                 className: "w-full pl-8",
                 value: l,
-                onChange: (x) => i(x.target.value),
+                onChange: (f) => i(f.target.value),
                 autoFocus: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(g).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(g).map(([x, y]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: x, options: y }, x)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(g).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(g).map(([f, y]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: f, options: y }, f)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
           'No features found matching "',
           l,
           '"'
@@ -9928,8 +9925,8 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     c.f && u(c.f);
     const g = /* @__PURE__ */ new Set(), m = g.add.bind(g);
     a.forEach((h) => {
-      var f;
-      return (f = r.get(h)) == null ? void 0 : f.l.forEach(m);
+      var x;
+      return (x = r.get(h)) == null ? void 0 : x.l.forEach(m);
     }), a.clear(), i.forEach(m), i.clear(), l.forEach(m), l.clear(), g.forEach(u), a.size && d(o);
   } while (a.size || i.size || l.size);
   if (p.length)
@@ -9937,73 +9934,73 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
 }, recomputeInvalidatedAtoms = (o) => {
   const n = getBuildingBlocks(o), r = n[1], a = n[2], l = n[3], i = n[11], c = n[14], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(l);
   for (; m.length; ) {
-    const h = m[m.length - 1], f = i(o, h);
+    const h = m[m.length - 1], x = i(o, h);
     if (g.has(h)) {
       m.pop();
       continue;
     }
     if (u.has(h)) {
-      a.get(h) === f.n && p.push([h, f]), g.add(h), m.pop();
+      a.get(h) === x.n && p.push([h, x]), g.add(h), m.pop();
       continue;
     }
     u.add(h);
-    for (const x of getMountedOrPendingDependents(h, f, r))
-      u.has(x) || m.push(x);
+    for (const f of getMountedOrPendingDependents(h, x, r))
+      u.has(f) || m.push(f);
   }
   for (let h = p.length - 1; h >= 0; --h) {
-    const [f, x] = p[h];
+    const [x, f] = p[h];
     let y = !1;
-    for (const b of x.d.keys())
-      if (b !== f && l.has(b)) {
+    for (const b of f.d.keys())
+      if (b !== x && l.has(b)) {
         y = !0;
         break;
       }
-    y && (c(o, f), d(o, f)), a.delete(f);
+    y && (c(o, x), d(o, x)), a.delete(x);
   }
 }, readAtomState = (o, n) => {
   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], f = a[16], x = a[17], y = u(o, n);
+  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(
-    ([w, E]) => (
+    ([A, E]) => (
       // Recursively, read the atom state of the dependency, and
       // check if the atom epoch number is unchanged
-      h(o, w).n === E
+      h(o, A).n === E
     )
   )))
     return y;
   y.d.clear();
   let b = !0;
   function C() {
-    l.has(n) && (x(o, n), m(o), g(o));
+    l.has(n) && (f(o, n), m(o), g(o));
   }
-  function B(w) {
+  function B(A) {
     var E;
-    if (isSelfAtom(n, w)) {
-      const v = u(o, w);
+    if (isSelfAtom(n, A)) {
+      const v = u(o, A);
       if (!isAtomStateInitialized(v))
-        if (hasInitialValue(w))
-          setAtomStateValueOrPromise(o, w, w.init);
+        if (hasInitialValue(A))
+          setAtomStateValueOrPromise(o, A, A.init);
         else
           throw new Error("no atom init");
       return returnAtomValue(v);
     }
-    const S = h(o, w);
+    const S = h(o, A);
     try {
       return returnAtomValue(S);
     } finally {
-      y.d.set(w, S.n), isPendingPromise(y.v) && addPendingPromiseToDependency(n, y.v, S), (E = l.get(w)) == null || E.t.add(n), b || C();
+      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();
     }
   }
   let j, _;
-  const A = {
+  const w = {
     get signal() {
       return j || (j = new AbortController()), j.signal;
     },
     get setSelf() {
-      return !_ && isActuallyWritableAtom(n) && (_ = (...w) => {
+      return !_ && isActuallyWritableAtom(n) && (_ = (...A) => {
         if (!b)
           try {
-            return f(o, n, ...w);
+            return x(o, n, ...A);
           } finally {
             m(o), g(o);
           }
@@ -10011,10 +10008,10 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, k = y.n;
   try {
-    const w = p(o, n, B, A);
-    return setAtomStateValueOrPromise(o, n, w), isPromiseLike$1(w) && (registerAbortHandler(w, () => j == null ? void 0 : j.abort()), w.then(C, C)), y;
-  } catch (w) {
-    return delete y.v, y.e = w, ++y.n, y;
+    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;
   } 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));
   }
@@ -10029,57 +10026,57 @@ 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 f = !0;
-  const x = (b) => returnAtomValue(g(o, b)), y = (b, ...C) => {
+  let x = !0;
+  const f = (b) => returnAtomValue(g(o, b)), y = (b, ...C) => {
     var B;
     const j = d(o, b);
     try {
       if (isSelfAtom(n, b)) {
         if (!hasInitialValue(b))
           throw new Error("atom not writable");
-        const _ = j.n, A = C[0];
-        setAtomStateValueOrPromise(o, b, A), h(o, b), _ !== j.n && (l.add(b), (B = i.c) == null || B.call(i, b), m(o, b));
+        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));
         return;
       } else
         return writeAtomState(o, b, ...C);
     } finally {
-      f || (u(o), p(o));
+      x || (u(o), p(o));
     }
   };
   try {
-    return c(o, n, x, y, ...r);
+    return c(o, n, f, y, ...r);
   } finally {
-    f = !1;
+    x = !1;
   }
 }, mountDependencies = (o, n) => {
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], d = a[11], p = a[15], u = a[18], g = a[19], m = d(o, n), h = l.get(n);
   if (h && !isPendingPromise(m.v)) {
-    for (const [f, x] of m.d)
-      if (!h.d.has(f)) {
-        const y = d(o, f);
-        u(o, f).t.add(n), h.d.add(f), x !== y.n && (i.add(f), (r = c.c) == null || r.call(c, f), p(o, f));
+    for (const [x, f] of m.d)
+      if (!h.d.has(x)) {
+        const y = d(o, x);
+        u(o, x).t.add(n), h.d.add(x), f !== y.n && (i.add(x), (r = c.c) == null || r.call(c, x), p(o, x));
       }
-    for (const f of h.d || [])
-      if (!m.d.has(f)) {
-        h.d.delete(f);
-        const x = g(o, f);
-        x == null || x.t.delete(n);
+    for (const x of h.d || [])
+      if (!m.d.has(x)) {
+        h.d.delete(x);
+        const f = g(o, x);
+        f == null || f.t.delete(n);
       }
   }
 }, mountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], g = a[13], m = a[14], h = a[16], f = p(o, n);
-  let x = l.get(n);
-  if (!x) {
+  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], g = a[13], m = a[14], h = a[16], x = p(o, n);
+  let f = l.get(n);
+  if (!f) {
     m(o, n);
-    for (const y of f.d.keys())
+    for (const y of x.d.keys())
       mountAtom(o, y).t.add(n);
-    if (x = {
+    if (f = {
       l: /* @__PURE__ */ new Set(),
-      d: new Set(f.d.keys()),
+      d: new Set(x.d.keys()),
       t: /* @__PURE__ */ new Set()
-    }, l.set(n, x), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
+    }, l.set(n, f), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const y = () => {
         let b = !0;
         const C = (...B) => {
@@ -10091,7 +10088,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
         };
         try {
           const B = d(o, n, C);
-          B && (x.u = () => {
+          B && (f.u = () => {
             b = !0;
             try {
               B();
@@ -10106,7 +10103,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
       i.add(y);
     }
   }
-  return x;
+  return f;
 }, unmountAtom = (o, n) => {
   var r;
   const a = getBuildingBlocks(o), l = a[1], i = a[5], c = a[6], d = a[11], p = a[19], u = d(o, n);