@chaibuilder/sdk 2.3.0 → 2.3.1

package/dist/core.js

@@ -11,7 +11,7 @@ import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultS
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$2 } from "./common-functions-BGzDsf1z.js";
 import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b9 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, av as Popover, b5 as Tooltip, b8 as TooltipTrigger, ay as PopoverTrigger, b6 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, a9 as DialogTitle, B as Badge, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b2 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, a_ as Tabs, b0 as TabsList, b1 as TabsTrigger, a$ as TabsContent, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aZ as Switch, r as Avatar, aL as Separator, b7 as TooltipProvider, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle, aY as Toaster } from "./toggle-BFR6fqvM.js";
-import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers, Settings as Settings$1 } from "lucide-react";
+import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
@@ -38,7 +38,7 @@ import { useFeature } from "flagged";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
-import { default as We } from "i18next";
+import { default as ze } from "i18next";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
 import tailwindForms from "@tailwindcss/forms";
 import tailwindTypography from "@tailwindcss/typography";
@@ -349,8 +349,8 @@ function insertBlocksAtPosition(o, n, r, a) {
       }), l.unshift(h), i = i.map((x) => {
         if (x._id === r) {
           const f = { ...x, content: "" };
-          return Object.keys(f).forEach((k) => {
-            k.startsWith("content-") && (f[k] = "");
+          return Object.keys(f).forEach((y) => {
+            y.startsWith("content-") && (f[y] = "");
           }), f;
         }
         return x;
@@ -485,8 +485,8 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
         h && "content" in h && (r = r.map((x) => {
           if (x._id === u) {
             const f = { ...x, content: m.content };
-            return Object.keys(m).forEach((k) => {
-              k.startsWith("content-") && (f[k] = m[k]);
+            return Object.keys(m).forEach((y) => {
+              y.startsWith("content-") && (f[y] = m[y]);
             }), f;
           }
           return x;
@@ -799,50 +799,50 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (f, k, b) => {
+    moveBlocks: (f, y, b) => {
       const v = map(f, (w) => {
         const E = n.find((N) => N._id === w)._parent || null, A = n.filter((N) => E ? N._parent === E : !N._parent).map((N) => N._id).indexOf(w);
         return { _id: w, oldParent: E, oldPosition: A };
       }), B = v.find(({ _id: w }) => w === f[0]);
-      B && B.oldParent === k && B.oldPosition === b || (i(f, k, b), o({
+      B && B.oldParent === y && B.oldPosition === b || (i(f, y, b), o({
         undo: () => each(v, ({ _id: w, oldParent: _, oldPosition: E }) => {
           i([w], _, E);
         }),
-        redo: () => i(f, k, b)
+        redo: () => i(f, y, b)
       }));
     },
-    addBlocks: (f, k, b) => {
-      a(f, k, b), o({
+    addBlocks: (f, y, b) => {
+      a(f, y, b), o({
         undo: () => l(map(f, "_id")),
-        redo: () => a(f, k, b)
+        redo: () => a(f, y, b)
       });
     },
     removeBlocks: (f) => {
       var B;
-      const k = (B = first(f)) == null ? void 0 : B._parent, v = n.filter((w) => k ? w._parent === k : !w._parent).indexOf(first(f));
+      const y = (B = first(f)) == null ? void 0 : B._parent, v = n.filter((w) => y ? w._parent === y : !w._parent).indexOf(first(f));
       l(map(f, "_id")), o({
-        undo: () => a(f, k, v),
+        undo: () => a(f, y, v),
         redo: () => l(map(f, "_id"))
       });
     },
-    updateBlocks: (f, k, b) => {
+    updateBlocks: (f, y, b) => {
       let v = [];
       if (b)
         v = map(f, (B) => ({ _id: B, ...b }));
       else {
-        const B = keys(k);
+        const B = keys(y);
         v = map(f, (w) => {
           const _ = n.find((S) => S._id === w), E = { _id: w };
           return each(B, (S) => E[S] = _[S]), E;
         });
       }
-      c(map(f, (B) => ({ _id: B, ...k }))), o({
+      c(map(f, (B) => ({ _id: B, ...y }))), o({
         undo: () => c(v),
-        redo: () => c(map(f, (B) => ({ _id: B, ...k })))
+        redo: () => c(map(f, (B) => ({ _id: B, ...y })))
       });
     },
-    updateBlocksRuntime: (f, k) => {
-      c(map(f, (b) => ({ _id: b, ...k })));
+    updateBlocksRuntime: (f, y) => {
+      c(map(f, (b) => ({ _id: b, ...y })));
     },
     setNewBlocks: (f) => {
       r(f), o({
@@ -851,12 +851,12 @@ const undoRedoStateAtom = atom({
       });
     },
     updateMultipleBlocksProps: (f) => {
-      let k = [];
-      k = map(f, (b) => {
+      let y = [];
+      y = map(f, (b) => {
         const v = keys(b), B = n.find((_) => _._id === b._id), w = {};
         return each(v, (_) => w[_] = B[_]), w;
       }), c(f), o({
-        undo: () => c(k),
+        undo: () => c(y),
         redo: () => c(f)
       });
     }
@@ -868,9 +868,9 @@ const undoRedoStateAtom = atom({
       for (let x = 0; x < i.length; x++) {
         const { _id: f } = i[x];
         i[x]._id = generateUUID();
-        const k = filter(i, { _parent: f });
-        for (let b = 0; b < k.length; b++)
-          k[b]._parent = i[x]._id;
+        const y = filter(i, { _parent: f });
+        for (let b = 0; b < y.length; b++)
+          y[b]._parent = i[x]._id;
       }
       const p = first(i);
       let u, g;
@@ -881,8 +881,8 @@ const undoRedoStateAtom = atom({
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const k = i.blocks;
-        return a(k, c, d);
+        const y = i.blocks;
+        return a(y, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -2333,20 +2333,20 @@ const getBlockWithChildren = (o, n) => {
   })
 ), 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, x) => {
-    const f = cloneDeep(x.find((k) => k._id === h));
-    for (const k in f) {
-      const b = f[k];
+    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: v, classes: B } = getSplitChaiClasses(b);
-        f[k] = compact(flattenDeep([v, B])).join(" ");
+        f[y] = compact(flattenDeep([v, B])).join(" ");
       } else
-        k !== "_id" && delete f[k];
+        y !== "_id" && delete f[y];
     }
     return f;
   };
   return {
     askAi: useCallback(
-      async (h, x, f, k) => {
+      async (h, x, f, y) => {
         if (l) {
           n(!0), a(null);
           try {
@@ -2364,11 +2364,11 @@ const getBlockWithChildren = (o, n) => {
               c(E);
             } else
               i(w);
-            k && k(B);
+            y && y(B);
           } catch (b) {
             a(b);
           } finally {
-            n(!1), k && k();
+            n(!1), y && y();
           }
         }
       },
@@ -2465,7 +2465,7 @@ const getBlockWithChildren = (o, n) => {
             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((k) => (isEmpty(k._parent) && set(k, "_parent", x._parent), k))), h = [...h, ...f];
+                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(x);
             return h;
@@ -2798,8 +2798,8 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
     ({ key: f }) => {
-      var k;
-      x((k = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
+      var y;
+      x((y = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
     [x]
@@ -2957,13 +2957,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       tabIndex: 0,
       ref: m.setFloating,
       style: g,
-      onClick: (k) => {
-        k.stopPropagation(), k.preventDefault();
+      onClick: (y) => {
+        y.stopPropagation(), y.preventDefault();
       },
-      onMouseEnter: (k) => {
-        k.stopPropagation(), i(null);
+      onMouseEnter: (y) => {
+        y.stopPropagation(), i(null);
       },
-      onKeyDown: (k) => k.stopPropagation(),
+      onKeyDown: (y) => y.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         x && /* @__PURE__ */ jsx(
@@ -3427,8 +3427,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"), x = i.querySelector(".tippy-box"), f = h == null ? void 0 : h.contains(m), k = x == null ? void 0 : x.contains(m);
-          if (!f && !k) {
+          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);
           }
@@ -3524,7 +3524,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), k = useRef(null), b = l, { blockContent: v, 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: v, blockType: B } = useMemo(() => {
       var j;
       const A = o._type;
       let N = o[r];
@@ -3545,18 +3545,18 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       1e3
     ), E = useCallback(
       (A) => {
-        A.preventDefault(), b && (k.current = b), w(), setTimeout(() => {
-          const N = k.current;
-          k.current = null, f([N]);
+        A.preventDefault(), b && (y.current = b), w(), setTimeout(() => {
+          const N = y.current;
+          y.current = null, f([N]);
         }, 100);
       },
       [f, b, x]
     );
     useEffect(() => {
-      var y;
+      var k;
       if (!b) return;
       const A = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", C = a.querySelector(`${A}${N}`);
-      C && ((y = C == null ? void 0 : C.classList) == null || y.add("sr-only"), u(C));
+      C && ((k = C == null ? void 0 : C.classList) == null || k.add("sr-only"), u(C));
     }, [b, B, a, i]);
     const S = useMemo(() => p ? (m(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
@@ -3612,12 +3612,12 @@ 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] = useHiddenBlockIds(), [h] = useAtom$1(dataBindingActiveAtom), x = get(c, "component", null), { index: f, key: k } = useContext(RepeaterContext), b = 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] = useHiddenBlockIds(), [h] = useAtom$1(dataBindingActiveAtom), x = get(c, "component", null), { index: f, key: y } = useContext(RepeaterContext), b = useMemo(
     () => h ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
       index: f,
-      key: k
+      key: y
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, h, f, k]
+    [i, d, c, g, h, f, y]
   ), v = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
@@ -3697,7 +3697,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: x }) => g === "Repeater" ? isArray(h) && h.map((f, k) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: k, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: c._id }) }, `${u}-${k}`)) : 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();
@@ -4124,9 +4124,9 @@ const DataBindingSelector = ({
         };
       }, f = document.getElementById(r);
       if (!f) return;
-      const k = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
-      if (k && (k.querySelector(".ProseMirror") || k.__chaiRTE)) {
-        const b = k.__chaiRTE;
+      const y = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
+      if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
+        const b = y.__chaiRTE;
         if (b) {
           const v = `{{${g}}}`;
           b.commands.focus();
@@ -4137,8 +4137,8 @@ const DataBindingSelector = ({
             const { state: E } = b, S = E.selection.from, A = E.doc.textBetween(Math.max(0, S - 1), S), N = E.doc.textBetween(S, Math.min(S + 1, E.doc.content.size));
             let C = "";
             S > 0 && A !== " " && !h(A) && (C = " ");
-            let y = "";
-            N && N !== " " && !h(N) && (y = " "), b.chain().insertContent(C + v + y).run();
+            let k = "";
+            N && N !== " " && !h(N) && (k = " "), b.chain().insertContent(C + v + k).run();
           }
           setTimeout(() => n(b.getHTML(), {}, r), 100);
           return;
@@ -4146,8 +4146,8 @@ const DataBindingSelector = ({
       } else {
         const b = f, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
         if (w > v) {
-          const N = `{{${g}}}`, { text: C } = x(B, v, N), y = B.slice(0, v) + C + B.slice(w);
-          n(y, {}, r);
+          const N = `{{${g}}}`, { text: C } = x(B, v, N), k = B.slice(0, v) + C + B.slice(w);
+          n(k, {}, r);
           return;
         }
         const E = `{{${g}}}`, { text: S } = x(B, v, E), A = B.slice(0, v) + S + B.slice(v);
@@ -4173,12 +4173,12 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (C, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [x, f] = useState([]), [y, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((C) => C.key === u)) == null ? void 0 : N.name;
   useEffect(() => {
     if (h(""), f([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const C = split(o, ":"), y = get(C, 1, "page") || "page";
-    g(y), (async () => {
-      const j = await l(y, [get(C, 2, "page")]);
+    const C = split(o, ":"), k = get(C, 1, "page") || "page";
+    g(k), (async () => {
+      const j = await l(k, [get(C, 2, "page")]);
       j && Array.isArray(j) && h(get(j, [0, "name"], ""));
     })();
   }, [o]);
@@ -4187,27 +4187,27 @@ const DataBindingSelector = ({
       if (isEmpty(C))
         f([]);
       else {
-        const y = await l(u, C);
-        f(y);
+        const k = await l(u, C);
+        f(k);
       }
       c(!1), b(-1);
     },
     [u],
     300
   ), _ = (C) => {
-    const y = ["pageType", u, C.id];
-    y[1] && (r(y.join(":")), h(C.name), p(!1), f([]), b(-1));
+    const k = ["pageType", u, C.id];
+    k[1] && (r(k.join(":")), h(C.name), p(!1), f([]), b(-1));
   }, E = (C) => {
     switch (C.key) {
       case "ArrowDown":
-        C.preventDefault(), b((y) => y < x.length - 1 ? y + 1 : y);
+        C.preventDefault(), b((k) => k < x.length - 1 ? k + 1 : k);
         break;
       case "ArrowUp":
-        C.preventDefault(), b((y) => y > 0 ? y - 1 : y);
+        C.preventDefault(), b((k) => k > 0 ? k - 1 : k);
         break;
       case "Enter":
         if (C.preventDefault(), x.length === 0) return;
-        k >= 0 && _(x[k]);
+        y >= 0 && _(x[y]);
         break;
       case "Escape":
         C.preventDefault(), S();
@@ -4215,11 +4215,11 @@ const DataBindingSelector = ({
     }
   };
   useEffect(() => {
-    if (k >= 0 && v.current) {
-      const C = v.current.children[k];
+    if (y >= 0 && v.current) {
+      const C = v.current.children[y];
       C == null || C.scrollIntoView({ block: "nearest" });
     }
-  }, [k]);
+  }, [y]);
   const S = () => {
     h(""), f([]), b(-1), p(!1), r("");
   }, A = (C) => {
@@ -4249,11 +4249,11 @@ const DataBindingSelector = ({
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(x == null ? void 0 : x.slice(0, 20), (C, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(x == null ? void 0 : x.slice(0, 20), (C, k) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => _(C),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : y === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(C.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           C.name,
           " ",
@@ -4666,14 +4666,14 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   const m = () => {
     const f = findIndex(u, { _id: g });
     if (f > -1) {
-      const k = (f + 1) % u.length, b = get(u, [k, "_id"]);
+      const y = (f + 1) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
   }, h = () => {
     const f = findIndex(u, { _id: g });
     if (f > -1) {
-      const k = (f - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
+      const y = (f - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
@@ -4681,8 +4681,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
     const f = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), k = f == null ? void 0 : f._id;
-    k && (n({ ...o, currentSlide: k }), c([k]));
+    ), 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: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4761,8 +4761,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             className: "text-xs",
             pattern: "[0-9]*",
             onChange: (f) => {
-              let k = f.target.value;
-              k.length && (k = k.replace("-", "")), n({ ...o, autoplayInterval: k });
+              let y = f.target.value;
+              y.length && (y = y.replace("-", "")), n({ ...o, autoplayInterval: y });
             }
           }
         )
@@ -4870,10 +4870,10 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), k = useMemo(
+  const { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), y = useMemo(
     () => isEmpty(f) ? "" : isEmpty(h) ? x : h,
     [f, h, x]
-  ), b = useMemo(() => get(LANGUAGES, k, k), [k]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
+  ), b = useMemo(() => get(LANGUAGES, y, y), [y]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
     () => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
     [w, B == null ? void 0 : B._type]
   ), [E, S] = useState(null);
@@ -5034,7 +5034,7 @@ function BlockSettings() {
       x({ formData: E }, S, A), d(E);
     }, 1500),
     [n == null ? void 0 : n._id, o]
-  ), k = ({ formData: E }, S) => {
+  ), y = ({ formData: E }, S) => {
     S && (r([n._id], { [S]: get(E, S) }), f({ formData: E }, S, { [S]: get(c, S) }));
   }, b = ({ formData: E }, S) => {
     S && (r([g._id], { [S]: get(E, S) }), f({ formData: E }, S, { [S]: get(c, S) }));
@@ -5093,7 +5093,7 @@ function BlockSettings() {
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
-        onChange: k,
+        onChange: y,
         formData: i,
         schema: v,
         uiSchema: B
@@ -5300,37 +5300,37 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [k, b] = useState(""), [v, B] = useState(!1), [w, _] = 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(""), [v, B] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
-    const { value: C, unit: y } = getClassValueAndUnit(i);
-    if (y === "") {
+    const { value: C, unit: k } = getClassValueAndUnit(i);
+    if (k === "") {
       l(C), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(y), l(y === "class" || isEmpty(C) ? "" : C);
+    h(k), l(k === "class" || isEmpty(C) ? "" : C);
   }, [i, p, u]);
   const E = useThrottledCallback((C) => c(C), [c], THROTTLE_TIME), S = useThrottledCallback((C) => c(C, !1), [c], THROTTLE_TIME), A = useCallback(
     (C = !1) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         f(!0);
         return;
       }
-      const j = get(y, "unit") !== "" ? get(y, "unit") : m;
+      const j = get(k, "unit") !== "" ? get(k, "unit") : m;
       if (j === "auto" || j === "none") {
         E(`${d}${j}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       C ? S(L) : E(L);
     },
     [E, S, a, m, d, u]
   ), N = useCallback(
     (C) => {
-      const y = getUserInputValues(`${a}`, u);
-      if (get(y, "error", !1)) {
+      const k = getUserInputValues(`${a}`, u);
+      if (get(k, "error", !1)) {
         f(!0);
         return;
       }
@@ -5338,9 +5338,9 @@ const BlockStylingProps = () => {
         E(`${d}${C}`);
         return;
       }
-      if (get(y, "value") === "")
+      if (get(k, "value") === "")
         return;
-      const j = get(y, "unit") !== "" ? get(y, "unit") : C, L = `${get(y, "value", "").startsWith("-") ? "-" : ""}${d}[${get(y, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const j = get(k, "unit") !== "" ? get(k, "unit") : C, L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       E(L);
     },
     [E, a, d, u]
@@ -5371,8 +5371,8 @@ const BlockStylingProps = () => {
             if (C.keyCode !== 38 && C.keyCode !== 40)
               return;
             C.preventDefault(), _(!0);
-            const y = parseInt$1(C.target.value);
-            let j = isNaN$1(y) ? 0 : y;
+            const k = parseInt$1(C.target.value);
+            let j = isNaN$1(k) ? 0 : k;
             C.keyCode === 38 && (j += 1), C.keyCode === 40 && (j -= 1);
             const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
             S(R);
@@ -5385,10 +5385,10 @@ const BlockStylingProps = () => {
             f(!1), l(C.target.value);
           },
           onClick: (C) => {
-            var y;
-            (y = C == null ? void 0 : C.target) == null || y.select(), r(!1);
+            var k;
+            (k = C == null ? void 0 : C.target) == null || k.select(), r(!1);
           },
-          value: v ? k : a,
+          value: v ? y : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             x ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5427,14 +5427,14 @@ const BlockStylingProps = () => {
         onDragEnd: (C) => {
           if (b(() => ""), B(!1), isEmpty(C))
             return;
-          const y = `${C}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
+          const k = `${C}`, I = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
           E(I);
         },
         onDrag: (C) => {
           if (isEmpty(C))
             return;
           b(C);
-          const y = `${C}`, I = `${y.startsWith("-") ? "-" : ""}${d}[${y.replace("-", "")}${m === "-" ? "" : m}]`;
+          const k = `${C}`, I = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${m === "-" ? "" : m}]`;
           S(I);
         },
         currentValue: a,
@@ -5500,8 +5500,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: n }) => {
   const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), h = useCallback(
     // eslint-disable-next-line no-shadow
-    (k) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
+    (y) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -5512,8 +5512,8 @@ const COLOR_PROP = {
   }, [g]);
   const x = useCallback(
     // eslint-disable-next-line no-shadow
-    (k) => {
-      p({ color: g, shade: k });
+    (y) => {
+      p({ color: g, shade: y });
     },
     [g]
   );
@@ -5898,7 +5898,7 @@ 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(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), k = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
+  }, 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(
     (S, A = !0) => {
       const N = { dark: p, mq: g, mod: u, cls: S, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
@@ -5907,8 +5907,8 @@ const COLOR_PROP = {
     },
     [f, p, g, u, l, h]
   ), v = useCallback(() => {
-    x(f, [k], !0);
-  }, [f, k, x]), 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]);
@@ -5945,7 +5945,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 ${k ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: E ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6169,7 +6169,7 @@ const COLOR_PROP = {
     u.includes(b) ? u.length > 2 && g(u.filter((v) => v !== b)) : g((v) => [...v, b]);
   }, f = (b) => {
     n || l(b), c(b);
-  }, k = getBreakpointValue(n ? i : a).toLowerCase();
+  }, 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(
     BreakpointCard,
     {
@@ -6177,7 +6177,7 @@ const COLOR_PROP = {
       ...b,
       onClick: f,
       key: b.breakpoint,
-      currentBreakpoint: k
+      currentBreakpoint: y
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -6191,7 +6191,7 @@ const COLOR_PROP = {
           ...b,
           onClick: f,
           key: b.breakpoint,
-          currentBreakpoint: k
+          currentBreakpoint: y
         }
       )
     ) }),
@@ -6346,7 +6346,7 @@ const AskAIStyles = ({ blockId: o }) => {
 };
 function ManualClasses() {
   var I;
-  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(""), k = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), v = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), h = useBuilderProp("askAiCallBack", null), [x, f] = useState(""), y = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), v = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
     const L = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(m, L, !0), f("");
   }, [w, _] = useState([]), E = ({ value: L }) => {
@@ -6384,7 +6384,7 @@ function ManualClasses() {
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [x, c, o]
-  ), y = (L) => {
+  ), k = (L) => {
     debugger;
     const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(m, [L]), u(m, R, !0), r(""), l(-1);
@@ -6452,10 +6452,10 @@ function ManualClasses() {
           value: n,
           onChange: (T) => r(T.target.value),
           onBlur: () => {
-            y(L);
+            k(L);
           },
           onKeyDown: (T) => {
-            T.key === "Enter" && y(L);
+            T.key === "Enter" && k(L);
           },
           onFocus: (T) => {
             setTimeout(() => {
@@ -6604,8 +6604,8 @@ function BlockStyling() {
       h = isNaN(h) ? 0 : h;
       let x = MAPPER[i.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (x = 10);
-      let k = (i.dragStartY - u.pageY) / x + h;
-      g && k < 0 && (k = 0), m === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
+      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],
     50
@@ -6648,8 +6648,8 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (has(o, "blocks")) {
-      const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(k), r || null, a);
+      const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(y), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -6661,8 +6661,8 @@ const CoreBlock = ({
         disabled: n,
         onClick: h,
         type: "button",
-        onDragStart: (k) => {
-          k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (y) => {
+          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), m();
           }, 200);
         },
@@ -6862,7 +6862,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, h, x, f, k, b, v, B;
+  var m, h, x, f, y, b, v, B;
   if (r.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
@@ -6905,7 +6905,7 @@ const CoreBlock = ({
       href: ((m = l.find((_) => _.key === "href")) == null ? void 0 : m.value) || "",
       hrefType: ((h = l.find((_) => _.key === "data-vbtype")) == null ? void 0 : h.value) || "video",
       autoplay: ((x = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((k = (f = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : k.replace("px", "")) || "",
+      maxWidth: ((y = (f = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : y.replace("px", "")) || "",
       backdropColor: ((b = l.find((_) => _.key === "data-overlay")) == null ? void 0 : b.value) || "",
       galleryName: ((v = l.find((_) => _.key === "data-gall")) == null ? void 0 : v.value) || ""
     }, forEach(w, (_) => {
@@ -7046,7 +7046,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", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), k = (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 w = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && w;
   }, b = useCallback(
@@ -7071,7 +7071,7 @@ const registerChaiLibrary = (o, n) => {
         onDragStart: async (B) => {
           const w = await c({ library: n, block: o });
           let _ = r;
-          if (k(first(w)) && (_ = null), !isEmpty(w)) {
+          if (y(first(w)) && (_ = null), !isEmpty(w)) {
             const E = { blocks: w, uiLibrary: !0, parent: _ };
             if (B.dataTransfer.setData("text/plain", JSON.stringify(E)), o.preview) {
               const S = new Image();
@@ -7106,7 +7106,7 @@ const registerChaiLibrary = (o, n) => {
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((y) => y.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), x = useRef(null);
+  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((k) => k.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), x = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (x.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7118,23 +7118,23 @@ const registerChaiLibrary = (o, n) => {
       h([]);
       return;
     }
-    const y = x.current.search(u).map((j) => j.item);
-    h(y);
+    const k = x.current.search(u).map((j) => j.item);
+    h(k);
   }, [u]);
-  const f = u.trim() && !isEmpty(m) ? m : c, k = groupBy(f, "group"), [b, v] = useState(null);
+  const f = u.trim() && !isEmpty(m) ? m : c, y = groupBy(f, "group"), [b, v] = useState(null);
   useEffect(() => {
-    if (isEmpty(keys(k))) {
+    if (isEmpty(keys(y))) {
       v(null);
       return;
     }
-    if (!b || !k[b]) {
-      v(first(keys(k)));
+    if (!b || !y[b]) {
+      v(first(keys(y)));
       return;
     }
-  }, [k, b]);
-  const B = get(k, b, []), w = useRef(null), { t: _ } = useTranslation(), E = (y) => {
+  }, [y, b]);
+  const B = get(y, b, []), w = useRef(null), { t: _ } = useTranslation(), E = (k) => {
     w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
-      w.current && v(y);
+      w.current && v(k);
     }, 400);
   }, S = () => {
     i != null && i.id && p(i.id);
@@ -7146,7 +7146,7 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const N = filter(B, (y, j) => j % 2 === 0), C = filter(B, (y, j) => j % 2 === 1);
+  const N = filter(B, (k, j) => j % 2 === 0), C = filter(B, (k, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -7155,7 +7155,7 @@ const registerChaiLibrary = (o, n) => {
         {
           placeholder: _("Search blocks..."),
           value: u,
-          onChange: (y) => g(y.target.value),
+          onChange: (k) => g(k.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
@@ -7174,13 +7174,13 @@ const registerChaiLibrary = (o, n) => {
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
             /* @__PURE__ */ jsxs(Button, { onClick: S, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
               _("Retry")
             ] })
-          ] }) }) : map(k, (y, j) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(y, (k, j) => /* @__PURE__ */ jsxs(
             "div",
             {
               onMouseEnter: () => E(j),
@@ -7206,23 +7206,23 @@ const registerChaiLibrary = (o, n) => {
           onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(B) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((y, j) => /* @__PURE__ */ jsx(
+            isEmpty(B) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((k, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: y,
+                  block: k,
                   library: i
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((y, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: C.map((k, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: n,
-                  block: y,
+                  block: k,
                   library: i
                 },
                 `block-second-${j}`
@@ -7261,8 +7261,8 @@ const registerChaiLibrary = (o, n) => {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const h = Object.entries(a).map(([f, k]) => {
-          const b = k, v = b.type || "partial", B = formatReadableName(v);
+        const h = Object.entries(a).map(([f, y]) => {
+          const b = y, v = b.type || "partial", B = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
@@ -7325,41 +7325,41 @@ 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 C;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (y) => y._id === r)) == null ? void 0 : C._type, [h, x] = useState("all"), [f, k] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), m = (C = find(c, (k) => k._id === r)) == null ? void 0 : C._type, [h, x] = useState("all"), [f, y] = useState(null), b = useRef(null);
   useEffect(() => {
-    const y = setTimeout(() => {
+    const k = setTimeout(() => {
       var j;
       (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(y);
+    return () => clearTimeout(k);
   }, [g]), useEffect(() => {
-    d && (x("all"), k(null));
-  }, [d]), useEffect(() => (b.current = debounce((y) => {
-    x(y);
+    d && (x("all"), y(null));
+  }, [d]), useEffect(() => (b.current = debounce((k) => {
+    x(k);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const v = useCallback((y) => {
-    k(y), b.current && b.current(y);
+  const v = useCallback((k) => {
+    y(k), b.current && b.current(k);
   }, []), B = useCallback(() => {
-    k(null), b.current && b.current.cancel();
-  }, []), w = useCallback((y) => {
-    b.current && b.current.cancel(), x(y), k(null);
+    y(null), b.current && b.current.cancel();
+  }, []), w = useCallback((k) => {
+    b.current && b.current.cancel(), x(k), y(null);
   }, []), _ = useMemo(
     () => d ? values(n).filter(
-      (y) => {
+      (k) => {
         var j, I;
-        return (((j = y.label) == null ? void 0 : j.toLowerCase()) + " " + ((I = y.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
+        return (((j = k.label) == null ? void 0 : j.toLowerCase()) + " " + ((I = k.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
       }
     ) : n,
     [n, d]
   ), E = useMemo(
     () => d ? o.filter(
-      (y) => reject(filter(values(_), { group: y }), { hidden: !0 }).length > 0
-    ) : o.filter((y) => reject(filter(values(n), { group: y }), { hidden: !0 }).length > 0),
+      (k) => reject(filter(values(_), { group: k }), { hidden: !0 }).length > 0
+    ) : o.filter((k) => reject(filter(values(n), { group: k }), { hidden: !0 }).length > 0),
     [n, _, o, d]
   ), S = useMemo(
-    () => sortBy(E, (y) => CORE_GROUPS.indexOf(y) === -1 ? 99 : CORE_GROUPS.indexOf(y)),
+    () => sortBy(E, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
     [E]
   ), A = useMemo(() => h === "all" ? _ : filter(values(_), { group: h }), [_, h]), N = useMemo(() => h === "all" ? S : [h], [S, h]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
@@ -7371,7 +7371,7 @@ const registerChaiLibrary = (o, n) => {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (y) => p(y.target.value)
+        onChange: (k) => p(k.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
@@ -7387,16 +7387,16 @@ const registerChaiLibrary = (o, n) => {
           },
           "sidebar-all"
         ),
-        S.map((y) => /* @__PURE__ */ jsx(
+        S.map((k) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => w(y),
-            onMouseEnter: () => v(y),
+            onClick: () => w(k),
+            onMouseEnter: () => v(k),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === y || f === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(y.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === k || f === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(k.toLowerCase()))
           },
-          `sidebar-${y}`
+          `sidebar-${k}`
         ))
       ] }) }) }),
       /* @__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: E.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: [
@@ -7404,10 +7404,10 @@ const registerChaiLibrary = (o, n) => {
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((y) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(y.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          h === "all" ? filter(values(A), { group: y }) : values(A),
+          h === "all" ? filter(values(A), { group: k }) : values(A),
           { hidden: !0 }
         ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7419,7 +7419,7 @@ const registerChaiLibrary = (o, n) => {
           },
           j.type
         )) })
-      ] }, y)) }) }) })
+      ] }, k)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7769,7 +7769,7 @@ const Input = ({ node: o }) => {
   var R;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: x, isSelected: f, willReceiveDrop: k, isDragging: b, isEditing: v, handleClick: B } = o, w = (T) => {
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: m } = useBlockHighlight(), { id: h, data: x, isSelected: f, willReceiveDrop: y, isDragging: b, isEditing: v, handleClick: B } = o, w = (T) => {
     T.stopPropagation(), !l.includes(h) && o.toggle();
   }, _ = (T) => {
     T.isInternal && (p = T.isOpen, T.isOpen && T.close());
@@ -7780,15 +7780,15 @@ const Input = ({ node: o }) => {
     C(), o.parent.isSelected || A((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
   }, C = () => {
     A(null);
-  }, y = (T) => {
+  }, k = (T) => {
     C(), T.stopPropagation(), !o.isOpen && !l.includes(h) && o.toggle(), B(T);
   };
   useEffect(() => {
     const T = setTimeout(() => {
-      k && !o.isOpen && !b && !l.includes(h) && o.toggle();
+      y && !o.isOpen && !b && !l.includes(h) && o.toggle();
     }, 500);
     return () => clearTimeout(T);
-  }, [k, o, b]);
+  }, [y, o, b]);
   const j = (T, D) => {
     const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${T}]`);
     P && P.setAttribute("data-drop", D);
@@ -7823,7 +7823,7 @@ const Input = ({ node: o }) => {
     {
       onMouseEnter: () => g(h),
       onMouseLeave: () => m(),
-      onClick: y,
+      onClick: k,
       style: n,
       "data-node-id": h,
       ref: l.includes(h) ? null : r,
@@ -7857,7 +7857,7 @@ const Input = ({ node: o }) => {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
               f ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              k && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
+              y && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === S ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(h) ? "opacity-50" : "",
@@ -8218,7 +8218,7 @@ const Input = ({ node: o }) => {
     },
     [d],
     200
-  ), k = useDebouncedCallback(
+  ), y = useDebouncedCallback(
     (v, B) => {
       p(() => {
         const w = get(d, `colors.${v}`);
@@ -8240,7 +8240,7 @@ const Input = ({ node: o }) => {
         ColorPickerInput,
         {
           value: w,
-          onChange: (_) => k(B, _)
+          onChange: (_) => y(B, _)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: B.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((_) => _.charAt(0).toUpperCase() + _.slice(1)).join(" ") + (!B.toLowerCase().includes("foreground") && !B.toLowerCase().includes("border") && !B.toLowerCase().includes("input") && !B.toLowerCase().includes("ring") && !B.toLowerCase().includes("background") ? " Background" : "") })
@@ -8770,8 +8770,8 @@ const AIUserPrompt = ({ blockId: o }) => {
     (f = m.current) == null || f.focus();
   }, []);
   const x = (f) => {
-    const { usage: k } = f || {};
-    !l && k && g(k), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: y } = f || {};
+    !l && y && g(y), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -9017,7 +9017,7 @@ function AIChatPanel() {
   }, f = () => {
     var b;
     (b = p.current) == null || b.click();
-  }, k = () => {
+  }, y = () => {
     d(null), p.current && (p.current.value = "");
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
@@ -9063,7 +9063,7 @@ function AIChatPanel() {
           size: "icon",
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
-          onClick: k,
+          onClick: y,
           children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
         }
       )
@@ -9206,7 +9206,7 @@ const AiAssistant = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), x = useRef(null), f = useRef(null), k = 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]);
@@ -9236,23 +9236,23 @@ const AiAssistant = () => {
   }, _ = (S) => {
     S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? w() : b());
   }, E = useCallback((S) => {
-    const A = (y) => /[.,!?;:]/.test(y), N = (y, j, I) => {
+    const A = (k) => /[.,!?;:]/.test(k), N = (k, j, I) => {
       let L = "", R = "";
-      const T = j > 0 ? y[j - 1] : "", D = j < y.length ? y[j] : "";
-      return j > 0 && (T === "." || !A(T) && T !== " ") && (L = " "), j < y.length && !A(D) && D !== " " && (R = " "), {
+      const T = j > 0 ? k[j - 1] : "", D = j < k.length ? k[j] : "";
+      return j > 0 && (T === "." || !A(T) && T !== " ") && (L = " "), j < k.length && !A(D) && D !== " " && (R = " "), {
         text: L + I + R,
         prefixLength: L.length,
         suffixLength: R.length
       };
     }, C = f.current;
     if (C) {
-      const y = C.selectionStart || 0, j = C.value || "", I = C.selectionEnd || y;
-      if (I > y) {
-        const O = `{{${S}}}`, { text: P } = N(j, y, O), $ = j.slice(0, y) + P + j.slice(I);
+      const k = C.selectionStart || 0, j = C.value || "", I = C.selectionEnd || k;
+      if (I > k) {
+        const O = `{{${S}}}`, { text: P } = N(j, k, O), $ = j.slice(0, k) + P + j.slice(I);
         p($);
         return;
       }
-      const R = `{{${S}}}`, { text: T } = N(j, y, R), D = j.slice(0, y) + T + j.slice(y);
+      const R = `{{${S}}}`, { text: T } = N(j, k, R), D = j.slice(0, k) + T + j.slice(k);
       p(D);
     }
   }, []);
@@ -9286,7 +9286,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(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: E })
+                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: E })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9448,7 +9448,7 @@ const RootLayout = () => {
   ), { t: x } = useTranslation(), f = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), k = useBuilderProp("htmlDir", "ltr"), b = find(f, { id: n }) ?? first(f), v = get(b, "width", DEFAULT_PANEL_WIDTH);
+  ), y = useBuilderProp("htmlDir", "ltr"), b = find(f, { id: n }) ?? first(f), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
       const S = find(f, { id: n });
@@ -9473,7 +9473,7 @@ const RootLayout = () => {
     },
     [h]
   );
-  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -9657,25 +9657,122 @@ const RootLayout = () => {
   options: n
 }) => {
   const r = useToggleChaiFeatureFlag(o), a = useChaiFeatureFlag(o);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 rounded-md p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800", children: [
     /* @__PURE__ */ jsx(Switch, { checked: a, onCheckedChange: r }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: n.key }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: n.description })
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: n.key }),
+      n.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400", children: n.description })
     ] })
   ] });
-}, showFeatureFlagAtom = atomWithStorage("show-feature-flag", !1), ChaiFeatureFlagsWidget = () => {
-  const o = useChaiFeatureFlags(), [n, r] = useAtom$1(showFeatureFlagAtom);
-  return useHotkeys("ctrl+shift+1,command+shift+1", () => r(!n)), n ? /* @__PURE__ */ jsxs(Popover, { open: !0, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Settings$1, {}) }),
-    /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-2 px-1", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-gray-900 dark:text-gray-100", children: "Feature Flags" }),
-        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Enable or disable experimental features" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-3 pt-2", children: Object.entries(o).map(([a, l]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: a, options: l }, a)) })
-    ] }) })
-  ] }) : null;
+}, showFeatureFlagAtom = atomWithStorage(
+  "show-feature-flag",
+  null
+), ChaiFeatureFlagsWidgetComponent = ({
+  close: o,
+  position: n,
+  updatePosition: r
+}) => {
+  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 f = l.toLowerCase();
+    return Object.fromEntries(
+      Object.entries(a).filter(([y, b]) => {
+        var v;
+        return (y == null ? void 0 : y.toLowerCase().includes(f)) || ((v = b == null ? void 0 : b.description) == null ? void 0 : v.toLowerCase().includes(f));
+      })
+    );
+  }, [a, l]), m = (f) => {
+    d(!0), u({
+      x: f.clientX - n.x,
+      y: f.clientY - n.y
+    });
+  }, h = (f) => {
+    if (!c) return;
+    const y = f.clientX - p.x, b = f.clientY - p.y, v = f.currentTarget, B = v.offsetWidth, w = v.offsetHeight, _ = window.innerWidth - B, E = window.innerHeight - w, S = Math.max(0, Math.min(y, _)), A = Math.max(0, Math.min(b, E));
+    r(S, A);
+  }, x = () => {
+    d(!1);
+  };
+  return useEffect(() => {
+    const f = () => {
+      c && d(!1);
+    };
+    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: x,
+      className: "fixed z-[9999999] select-none rounded-md border border-gray-300 bg-white p-3 shadow-2xl",
+      style: {
+        left: n.x,
+        top: n.y,
+        cursor: c ? "grabbing" : "grab",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative sticky top-0 rounded-t-lg bg-white", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-x-2 text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+                /* @__PURE__ */ jsx(DragHandleDots2Icon, {}),
+                " Feature Flags"
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: [
+                "Toggle experimental features (",
+                /* @__PURE__ */ jsx("span", { className: "font-mono", children: "Ctrl+Shift+1" }),
+                " to toggle)"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: o,
+                className: "absolute -right-2 -top-2 p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsx(
+              Input$1,
+              {
+                type: "search",
+                placeholder: "Search features...",
+                className: "w-full pl-8",
+                value: l,
+                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(([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,
+          '"'
+        ] }) }) })
+      ]
+    }
+  );
+}, ChaiFeatureFlagsWidget = () => {
+  const [o, n] = useAtom$1(showFeatureFlagAtom);
+  return useHotkeys(
+    "ctrl+shift+1,command+shift+1",
+    () => n((r) => r ? { ...r, show: !r.show } : { x: 0, y: 0, show: !0 }),
+    { enableOnFormTags: !0 }
+  ), o != null && o.show ? /* @__PURE__ */ jsx(
+    ChaiFeatureFlagsWidgetComponent,
+    {
+      position: o,
+      close: () => n((r) => ({ ...r, show: !1 })),
+      updatePosition: (r, a) => n((l) => ({ ...l, x: r, y: a }))
+    }
+  ) : null;
 }, setDebugLogs = (o) => {
 }, getParentNodeIds = (o, n) => {
   const r = [];
@@ -9777,38 +9874,38 @@ const RootLayout = () => {
     return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, S)), N;
   }), x = m[1] || (() => {
     let A, N;
-    const C = (y) => {
+    const C = (k) => {
       try {
-        y();
+        k();
       } catch (j) {
         A || (A = !0, N = j);
       }
     };
     do {
       c.f && C(c.f);
-      const y = /* @__PURE__ */ new Set(), j = y.add.bind(y);
+      const k = /* @__PURE__ */ new Set(), j = k.add.bind(k);
       a.forEach((I) => {
         var L;
         return (L = n.get(I)) == null ? void 0 : L.l.forEach(j);
-      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(C), a.size && f();
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), k.forEach(C), a.size && f();
     } while (a.size || i.size || l.size);
     if (A)
       throw N;
   }), f = m[2] || (() => {
-    const A = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
-    for (; y.length; ) {
-      const j = y[y.length - 1], I = h(j);
+    const A = [], N = /* @__PURE__ */ new WeakSet(), C = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
+    for (; k.length; ) {
+      const j = k[k.length - 1], I = h(j);
       if (C.has(j)) {
-        y.pop();
+        k.pop();
         continue;
       }
       if (N.has(j)) {
-        r.get(j) === I.n && A.push([j, I]), C.add(j), y.pop();
+        r.get(j) === I.n && A.push([j, I]), C.add(j), k.pop();
         continue;
       }
       N.add(j);
       for (const L of getMountedOrPendingDependents(j, I, n))
-        N.has(L) || y.push(L);
+        N.has(L) || k.push(L);
     }
     for (let j = A.length - 1; j >= 0; --j) {
       const [I, L] = A[j];
@@ -9818,20 +9915,20 @@ const RootLayout = () => {
           R = !0;
           break;
         }
-      R && (k(I), B(I)), r.delete(I);
+      R && (y(I), B(I)), r.delete(I);
     }
-  }), k = m[3] || ((A) => {
+  }), y = m[3] || ((A) => {
     var N, C;
-    const y = h(A);
-    if (isAtomStateInitialized(y) && (n.has(A) && r.get(A) !== y.n || Array.from(y.d).every(
+    const k = h(A);
+    if (isAtomStateInitialized(k) && (n.has(A) && r.get(A) !== k.n || Array.from(k.d).every(
       ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        k(P).n === $
+        y(P).n === $
       )
     )))
-      return y;
-    y.d.clear();
+      return k;
+    k.d.clear();
     let j = !0;
     const I = () => {
       n.has(A) && (B(A), f(), x());
@@ -9846,11 +9943,11 @@ const RootLayout = () => {
             throw new Error("no atom init");
         return returnAtomValue(H);
       }
-      const M = k(P);
+      const M = y(P);
       try {
         return returnAtomValue(M);
       } finally {
-        y.d.set(P, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = n.get(P)) == null || $.t.add(A), j || I();
+        k.d.set(P, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(A, k.v, M), ($ = n.get(P)) == null || $.t.add(A), j || I();
       }
     };
     let R, T;
@@ -9868,30 +9965,30 @@ const RootLayout = () => {
             }
         }), T;
       }
-    }, O = y.n;
+    }, O = k.n;
     try {
       const P = d(A, L, D);
       return setAtomStateValueOrPromise(A, P, h), isPromiseLike$1(P) && ((N = P.onCancel) == null || N.call(P, () => R == null ? void 0 : R.abort()), P.then(
         I,
         I
-      )), y;
+      )), k;
     } catch (P) {
-      return delete y.v, y.e = P, ++y.n, y;
+      return delete k.v, k.e = P, ++k.n, k;
     } finally {
-      j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (C = c.c) == null || C.call(c, A));
+      j = !1, O !== k.n && r.get(A) === O && (r.set(A, k.n), a.add(A), (C = c.c) == null || C.call(c, A));
     }
   }), b = m[4] || ((A) => {
     const N = [A];
     for (; N.length; ) {
-      const C = N.pop(), y = h(C);
-      for (const j of getMountedOrPendingDependents(C, y, n)) {
+      const C = N.pop(), k = h(C);
+      for (const j of getMountedOrPendingDependents(C, k, n)) {
         const I = h(j);
         r.set(j, I.n), N.push(j);
       }
     }
   }), v = m[5] || ((A, ...N) => {
     let C = !0;
-    const y = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
+    const k = (I) => returnAtomValue(y(I)), j = (I, ...L) => {
       var R;
       const T = h(I);
       try {
@@ -9908,22 +10005,22 @@ const RootLayout = () => {
       }
     };
     try {
-      return p(A, y, j, ...N);
+      return p(A, k, j, ...N);
     } finally {
       C = !1;
     }
   }), B = m[6] || ((A) => {
     var N;
-    const C = h(A), y = n.get(A);
-    if (y && !isPendingPromise(C.v)) {
+    const C = h(A), k = n.get(A);
+    if (k && !isPendingPromise(C.v)) {
       for (const [j, I] of C.d)
-        if (!y.d.has(j)) {
+        if (!k.d.has(j)) {
           const L = h(j);
-          w(j).t.add(A), y.d.add(j), I !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
+          w(j).t.add(A), k.d.add(j), I !== L.n && (a.add(j), (N = c.c) == null || N.call(c, j), b(j));
         }
-      for (const j of y.d || [])
+      for (const j of k.d || [])
         if (!C.d.has(j)) {
-          y.d.delete(j);
+          k.d.delete(j);
           const I = _(j);
           I == null || I.t.delete(A);
         }
@@ -9931,16 +10028,16 @@ const RootLayout = () => {
   }), w = m[7] || ((A) => {
     var N;
     const C = h(A);
-    let y = n.get(A);
-    if (!y) {
-      k(A);
+    let k = n.get(A);
+    if (!k) {
+      y(A);
       for (const j of C.d.keys())
         w(j).t.add(A);
-      if (y = {
+      if (k = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(C.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, n.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
+      }, n.set(A, k), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
         const j = () => {
           let I = !0;
           const L = (...R) => {
@@ -9952,7 +10049,7 @@ const RootLayout = () => {
           };
           try {
             const R = g(A, L);
-            R && (y.u = () => {
+            R && (k.u = () => {
               I = !0;
               try {
                 R();
@@ -9967,23 +10064,23 @@ const RootLayout = () => {
         l.add(j);
       }
     }
-    return y;
+    return k;
   }), _ = m[8] || ((A) => {
     var N;
     const C = h(A);
-    let y = n.get(A);
-    if (y && !y.l.size && !Array.from(y.t).some((j) => {
+    let k = n.get(A);
+    if (k && !k.l.size && !Array.from(k.t).some((j) => {
       var I;
       return (I = n.get(j)) == null ? void 0 : I.d.has(A);
     })) {
-      y.u && i.add(y.u), y = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
+      k.u && i.add(k.u), k = void 0, n.delete(A), (N = c.u) == null || N.call(c, A);
       for (const j of C.d.keys()) {
         const I = _(j);
         I == null || I.t.delete(A);
       }
       return;
     }
-    return y;
+    return k;
   }), E = [
     // store state
     o,
@@ -10002,14 +10099,14 @@ const RootLayout = () => {
     h,
     x,
     f,
-    k,
+    y,
     b,
     v,
     B,
     w,
     _
   ], S = {
-    get: (A) => returnAtomValue(k(A)),
+    get: (A) => returnAtomValue(y(A)),
     set: (A, ...N) => {
       try {
         return v(A, ...N);
@@ -10018,9 +10115,9 @@ const RootLayout = () => {
       }
     },
     sub: (A, N) => {
-      const y = w(A).l;
-      return y.add(N), x(), () => {
-        y.delete(N), _(A), x();
+      const k = w(A).l;
+      return k.add(N), x(), () => {
+        k.delete(N), _(A), x();
       };
     }
   };
@@ -10142,7 +10239,7 @@ const useAutoSave = () => {
     /* @__PURE__ */ jsx(ChaiWatchers, { ...o }),
     /* @__PURE__ */ jsx(PreviewScreen, {}),
     /* @__PURE__ */ jsx(Toaster, { richColors: !0 }),
-    /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 left-4 z-50", children: /* @__PURE__ */ jsx(ChaiFeatureFlagsWidget, {}) })
+    /* @__PURE__ */ jsx(ChaiFeatureFlagsWidget, {})
   ] }) });
 };
 if (typeof window > "u")
@@ -10170,7 +10267,7 @@ export {
   getBlocksFromHTML as convertHTMLToChaiBlocks,
   generateUUID as generateBlockId,
   getBlocksFromHTML,
-  We as i18n,
+  ze as i18n,
   cn$2 as mergeClasses,
   registerBlockSettingField,
   registerBlockSettingTemplate,