@chaibuilder/sdk 2.2.36 → 2.2.37

package/dist/core.js

@@ -1,6 +1,6 @@
-var V = Object.defineProperty;
-var F = (o, n, r) => n in o ? V(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
-var H = (o, n, r) => F(o, typeof n != "symbol" ? n + "" : n, r);
+var U = Object.defineProperty;
+var V = (o, n, r) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : o[n] = r;
+var H = (o, n, r) => V(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 { BoxModelIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, Link1Icon, ListBulletIcon, HeadingIcon, QuoteIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, LoopIcon, ResetIcon, InfoCircledIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, Cross1Icon, BoxIcon, MinusIcon, CrossCircledIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, CaretRightIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, CheckIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
@@ -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 } 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, Settings as Settings$1 } from "lucide-react";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
@@ -21,7 +21,7 @@ import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useIntervalEffect } from "@react-hookz/web";
 import { toast } from "sonner";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Fe } from "react-i18next";
+import { useTranslation as Ve } from "react-i18next";
 import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
 import Link from "@tiptap/extension-link";
@@ -34,7 +34,7 @@ import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import "next-themes";
 import Autosuggest from "react-autosuggest";
-import { useFeature, FlagsProvider } from "flagged";
+import { useFeature } from "flagged";
 import { parse, stringify } from "himalaya";
 import { Tree } from "react-arborist";
 import i18n from "i18next";
@@ -344,16 +344,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((k) => {
-            k.startsWith("content-") && (x[k] = "");
-          }), 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((k) => {
+            k.startsWith("content-") && (f[k] = "");
+          }), f;
         }
-        return f;
+        return x;
       });
     }
   }
@@ -481,15 +481,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((k) => {
-              k.startsWith("content-") && (x[k] = m[k]);
-            }), x;
+              k.startsWith("content-") && (f[k] = m[k]);
+            }), f;
           }
-          return f;
+          return x;
         }), a.push(m._id));
       }
     }
@@ -572,32 +572,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",
@@ -799,65 +799,65 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (x, k, b) => {
-      const v = map(x, (w) => {
+    moveBlocks: (f, k, 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 === x[0]);
-      B && B.oldParent === k && B.oldPosition === b || (i(x, k, b), o({
+      }), B = v.find(({ _id: w }) => w === f[0]);
+      B && B.oldParent === k && B.oldPosition === b || (i(f, k, b), o({
         undo: () => each(v, ({ _id: w, oldParent: _, oldPosition: E }) => {
           i([w], _, E);
         }),
-        redo: () => i(x, k, b)
+        redo: () => i(f, k, b)
       }));
     },
-    addBlocks: (x, k, b) => {
-      a(x, k, b), o({
-        undo: () => l(map(x, "_id")),
-        redo: () => a(x, k, b)
+    addBlocks: (f, k, b) => {
+      a(f, k, b), o({
+        undo: () => l(map(f, "_id")),
+        redo: () => a(f, k, b)
       });
     },
-    removeBlocks: (x) => {
+    removeBlocks: (f) => {
       var B;
-      const k = (B = first(x)) == null ? void 0 : B._parent, v = n.filter((w) => k ? w._parent === k : !w._parent).indexOf(first(x));
-      l(map(x, "_id")), o({
-        undo: () => a(x, k, v),
-        redo: () => l(map(x, "_id"))
+      const k = (B = first(f)) == null ? void 0 : B._parent, v = n.filter((w) => k ? w._parent === k : !w._parent).indexOf(first(f));
+      l(map(f, "_id")), o({
+        undo: () => a(f, k, v),
+        redo: () => l(map(f, "_id"))
       });
     },
-    updateBlocks: (x, k, b) => {
+    updateBlocks: (f, k, b) => {
       let v = [];
       if (b)
-        v = map(x, (B) => ({ _id: B, ...b }));
+        v = map(f, (B) => ({ _id: B, ...b }));
       else {
         const B = keys(k);
-        v = map(x, (w) => {
+        v = map(f, (w) => {
           const _ = n.find((C) => C._id === w), E = { _id: w };
           return each(B, (C) => E[C] = _[C]), E;
         });
       }
-      c(map(x, (B) => ({ _id: B, ...k }))), o({
+      c(map(f, (B) => ({ _id: B, ...k }))), o({
         undo: () => c(v),
-        redo: () => c(map(x, (B) => ({ _id: B, ...k })))
+        redo: () => c(map(f, (B) => ({ _id: B, ...k })))
       });
     },
-    updateBlocksRuntime: (x, k) => {
-      c(map(x, (b) => ({ _id: b, ...k })));
+    updateBlocksRuntime: (f, k) => {
+      c(map(f, (b) => ({ _id: b, ...k })));
     },
-    setNewBlocks: (x) => {
-      r(x), o({
+    setNewBlocks: (f) => {
+      r(f), o({
         undo: () => r(n),
-        redo: () => r(x)
+        redo: () => r(f)
       });
     },
-    updateMultipleBlocksProps: (x) => {
+    updateMultipleBlocksProps: (f) => {
       let k = [];
-      k = map(x, (b) => {
+      k = map(f, (b) => {
         const v = keys(b), B = n.find((_) => _._id === b._id), w = {};
         return each(v, (_) => w[_] = B[_]), w;
-      }), c(x), o({
+      }), c(f), o({
         undo: () => c(k),
-        redo: () => c(x)
+        redo: () => c(f)
       });
     }
   };
@@ -865,12 +865,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 k = filter(i, { _parent: x });
+      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[f]._id;
+          k[b]._parent = i[x]._id;
       }
       const p = first(i);
       let u, g;
@@ -2332,25 +2332,25 @@ const getBlockWithChildren = (o, n) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), 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((k) => k._id === h));
-    for (const k in x) {
-      const b = x[k];
+  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];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
         const { baseClasses: v, classes: B } = getSplitChaiClasses(b);
-        x[k] = compact(flattenDeep([v, B])).join(" ");
+        f[k] = compact(flattenDeep([v, B])).join(" ");
       } else
-        k !== "_id" && delete x[k];
+        k !== "_id" && delete f[k];
     }
-    return x;
+    return f;
   };
   return {
     askAi: useCallback(
-      async (h, f, x, k) => {
+      async (h, x, f, k) => {
         if (l) {
           n(!0), a(null);
           try {
-            const b = p === u ? "" : p, v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [m(f, d)], B = await l(h, addLangToPrompt(x, g, h), v, b), { blocks: w, error: _ } = B;
+            const b = p === u ? "" : p, v = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p) : [m(x, d)], B = await l(h, addLangToPrompt(f, g, h), v, b), { blocks: w, error: _ } = B;
             if (_) {
               a(_);
               return;
@@ -2462,12 +2462,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((k) => (isEmpty(k._parent) && set(k, "_parent", f._parent), k))), 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((k) => (isEmpty(k._parent) && set(k, "_parent", x._parent), k))), h = [...h, ...f];
               } else
-                h.push(f);
+                h.push(x);
             return h;
           })
         };
@@ -2650,13 +2650,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: {
@@ -2789,21 +2789,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 k;
-      f((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
+      x((k = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : k.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,
@@ -2949,7 +2949,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 !n || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2966,16 +2966,16 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
       onKeyDown: (k) => k.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,
@@ -3133,8 +3133,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]
@@ -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"), f = i.querySelector(".tippy-box"), x = h == null ? void 0 : h.contains(m), k = f == null ? void 0 : f.contains(m);
-          if (!x && !k) {
+          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 b = (u == null ? void 0 : u.getHTML()) || "";
             r(b);
           }
@@ -3483,14 +3483,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) => {
@@ -3506,12 +3506,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]);
@@ -3524,33 +3524,33 @@ 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(), 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(), k = useRef(null), b = l, { blockContent: v, blockType: B } = useMemo(() => {
       var j;
       const A = o._type;
       let N = o[r];
       const S = getRegisteredChaiBlock(o._type);
-      return f && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${f}`) && (N = get(o, `${r}-${f}`)), { blockContent: N, blockType: A };
-    }, [o, f]), w = useCallback(
+      return x && ((j = S == null ? void 0 : S.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${x}`) && (N = get(o, `${r}-${x}`)), { blockContent: N, blockType: A };
+    }, [o, x]), w = useCallback(
       (A) => {
         var S;
         const N = A || ((S = g.current) == null ? void 0 : S.innerText);
-        h([b], { [r]: N }), u(null), c(null), d(-1), x([]);
+        h([b], { [r]: N }), u(null), c(null), d(-1), f([]);
       },
-      [b, h, c, x, f]
+      [b, h, c, f, x]
     ), _ = useDebouncedCallback(
       (A) => {
         h([b], { [r]: A });
       },
-      [b, o, h, f],
+      [b, o, h, x],
       1e3
     ), E = useCallback(
       (A) => {
         A.preventDefault(), b && (k.current = b), w(), setTimeout(() => {
           const N = k.current;
-          k.current = null, x([N]);
+          k.current = null, f([N]);
         }, 100);
       },
-      [x, b, f]
+      [f, b, x]
     );
     useEffect(() => {
       var y;
@@ -3577,7 +3577,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
         onChange: _,
         onEscape: E
       }
-    )) : null, [p, b, B, v, w, f]);
+    )) : null, [p, b, B, v, w, x]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       C,
       n
@@ -3612,18 +3612,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] = useHiddenBlockIds(), [h] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: x, 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: k } = useContext(RepeaterContext), b = useMemo(
     () => h ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
-      index: x,
+      index: f,
       key: k
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, h, x, k]
+    [i, d, c, g, h, f, k]
   ), v = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
   ), w = useMemo(
     () => ({
-      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": f },
       inBuilder: !0,
       lang: d || p,
       ...b,
@@ -3642,8 +3642,8 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       o
     ]
   ), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
-  if (isNull(f) || m.includes(i._id)) return null;
-  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
+  if (isNull(x) || m.includes(i._id)) return null;
+  let E = /* @__PURE__ */ jsx(Suspense, { children: createElement(x, {
     ...w,
     children: r({
       _id: i._id,
@@ -3656,7 +3656,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const C = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
+  const C = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: E }) : E;
   return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
 }, PartialWrapper = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
@@ -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: f }) => g === "Repeater" ? isArray(h) && h.map((x, k) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: k, key: f }, 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, 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;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3765,14 +3765,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;
@@ -3887,8 +3887,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;
     }
@@ -3912,7 +3912,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)
         }
       ),
@@ -3953,16 +3953,16 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
     const m = isArray(g) ? first(g) : g;
     if (m) {
       n(m == null ? void 0 : m.url);
-      const h = m == null ? void 0 : m.width, f = m == null ? void 0 : m.height;
+      const h = m == null ? void 0 : m.width, x = m == null ? void 0 : m.height;
       if (i != null && i._id) {
-        const x = {
+        const f = {
           ...h && { width: h },
-          ...f && { height: f },
+          ...x && { height: x },
           ...m.description && { alt: m.description },
           ...m.id && { assetId: m.id }
         };
-        if (isEmpty(x)) return;
-        c([i._id], x);
+        if (isEmpty(f)) return;
+        c([i._id], f);
       }
     }
   }, p = useCallback(() => {
@@ -4006,14 +4006,14 @@ const ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
 }, 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: [
@@ -4106,7 +4106,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) => {
@@ -4114,7 +4114,7 @@ const DataBindingSelector = ({
         n(`{{${g}}}`, {}, r);
         return;
       }
-      const h = (b) => /[.,!?;:]/.test(b), f = (b, v, B) => {
+      const h = (b) => /[.,!?;:]/.test(b), x = (b, v, B) => {
         let w = "", _ = "";
         const E = v > 0 ? b[v - 1] : "", C = v < b.length ? b[v] : "";
         return v > 0 && (E === "." || !h(E) && E !== " ") && (w = " "), v < b.length && !h(C) && C !== " " && (_ = " "), {
@@ -4122,8 +4122,8 @@ const DataBindingSelector = ({
           prefixLength: w.length,
           suffixLength: _.length
         };
-      }, x = document.getElementById(r);
-      if (!x) return;
+      }, 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;
@@ -4144,13 +4144,13 @@ const DataBindingSelector = ({
           return;
         }
       } else {
-        const b = x, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
+        const b = f, v = b.selectionStart || 0, B = b.value || "", w = b.selectionEnd || v;
         if (w > v) {
-          const N = `{{${g}}}`, { text: S } = f(B, v, N), y = B.slice(0, v) + S + B.slice(w);
+          const N = `{{${g}}}`, { text: S } = x(B, v, N), y = B.slice(0, v) + S + B.slice(w);
           n(y, {}, r);
           return;
         }
-        const E = `{{${g}}}`, { text: C } = f(B, v, E), A = B.slice(0, v) + C + B.slice(v);
+        const E = `{{${g}}}`, { text: C } = x(B, v, E), A = B.slice(0, v) + C + B.slice(v);
         n(A, {}, r);
       }
     },
@@ -4173,9 +4173,9 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, y) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), v = useRef(null), B = (N = n == null ? void 0 : n.find((S) => S.key === u)) == null ? void 0 : N.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, 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((S) => S.key === u)) == null ? void 0 : N.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, ":"), y = get(S, 1, "page") || "page";
     g(y), (async () => {
       const j = await l(y, [get(S, 2, "page")]);
@@ -4185,10 +4185,10 @@ const DataBindingSelector = ({
   const w = useDebouncedCallback(
     async (S) => {
       if (isEmpty(S))
-        x([]);
+        f([]);
       else {
         const y = await l(u, S);
-        x(y);
+        f(y);
       }
       c(!1), b(-1);
     },
@@ -4196,18 +4196,18 @@ const DataBindingSelector = ({
     300
   ), _ = (S) => {
     const y = ["pageType", u, S.id];
-    y[1] && (r(y.join(":")), h(S.name), p(!1), x([]), b(-1));
+    y[1] && (r(y.join(":")), h(S.name), p(!1), f([]), b(-1));
   }, E = (S) => {
     switch (S.key) {
       case "ArrowDown":
-        S.preventDefault(), b((y) => y < f.length - 1 ? y + 1 : y);
+        S.preventDefault(), b((y) => y < x.length - 1 ? y + 1 : y);
         break;
       case "ArrowUp":
         S.preventDefault(), b((y) => y > 0 ? y - 1 : y);
         break;
       case "Enter":
-        if (S.preventDefault(), f.length === 0) return;
-        k >= 0 && _(f[k]);
+        if (S.preventDefault(), x.length === 0) return;
+        k >= 0 && _(x[k]);
         break;
       case "Escape":
         S.preventDefault(), C();
@@ -4221,7 +4221,7 @@ const DataBindingSelector = ({
     }
   }, [k]);
   const C = () => {
-    h(""), x([]), b(-1), p(!1), r("");
+    h(""), f([]), b(-1), p(!1), r("");
   }, A = (S) => {
     h(S), p(!isEmpty(S)), c(!0), w(S);
   };
@@ -4241,15 +4241,15 @@ const DataBindingSelector = ({
       ),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: C, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { 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: v, children: map(f == null ? void 0 : f.slice(0, 20), (S, y) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: v, children: map(x == null ? void 0 : x.slice(0, 20), (S, y) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => _(S),
@@ -4564,8 +4564,8 @@ 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, v = b.selection.from, B = b.doc.textBetween(Math.max(0, v - 1), v), w = b.doc.textBetween(v, Math.min(v + 1, b.doc.content.size));
@@ -4611,13 +4611,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: {
@@ -4630,8 +4630,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);
   };
@@ -4664,24 +4664,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 k = (x + 1) % u.length, b = get(u, [k, "_id"]);
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const k = (f + 1) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       n({ ...o, currentSlide: b }), c([b]);
     }
   }, h = () => {
-    const x = findIndex(u, { _id: g });
-    if (x > -1) {
-      const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
+    const f = findIndex(u, { _id: g });
+    if (f > -1) {
+      const k = (f - 1 + u.length) % u.length, b = get(u, [k, "_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
-    ), k = x == null ? void 0 : x._id;
+    ), k = f == null ? void 0 : f._id;
     k && (n({ ...o, currentSlide: k }), c([k]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
@@ -4699,7 +4699,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(PlusCircle, { className: "h-3 w-3 stroke-[2]" }),
@@ -4760,8 +4760,8 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (x) => {
-              let k = x.target.value;
+            onChange: (f) => {
+              let k = f.target.value;
               k.length && (k = k.replace("-", "")), n({ ...o, autoplayInterval: k });
             }
           }
@@ -4870,9 +4870,9 @@ const MenuBar = ({ editor: o, onExpand: n }) => {
   formData: g,
   onChange: m
 }) => {
-  const { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), k = useMemo(
-    () => isEmpty(x) ? "" : isEmpty(h) ? f : h,
-    [x, h, f]
+  const { selectedLang: h, fallbackLang: x, languages: f } = useLanguages(), k = useMemo(
+    () => isEmpty(f) ? "" : isEmpty(h) ? x : h,
+    [f, h, x]
   ), b = useMemo(() => get(LANGUAGES, k, k), [k]), v = usePageExternalData(), B = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
     () => get(w, [B == null ? void 0 : B._type, "i18nProps"], []),
     [w, B == null ? void 0 : B._type]
@@ -5027,17 +5027,17 @@ 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: E }, C, 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: E }, C, A) => {
     C && (c == null ? void 0 : c._id) === n._id && a([n._id], { [C]: get(E, C) }, A);
-  }, x = useCallback(
+  }, f = useCallback(
     debounce(({ formData: E }, C, A) => {
-      f({ formData: E }, C, A), d(E);
+      x({ formData: E }, C, A), d(E);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), k = ({ formData: E }, C) => {
-    C && (r([n._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
+    C && (r([n._id], { [C]: get(E, C) }), f({ formData: E }, C, { [C]: get(c, C) }));
   }, b = ({ formData: E }, C) => {
-    C && (r([g._id], { [C]: get(E, C) }), x({ formData: E }, C, { [C]: get(c, C) }));
+    C && (r([g._id], { [C]: get(E, C) }), f({ formData: E }, C, { [C]: get(c, C) }));
   }, { schema: v, uiSchema: B } = useMemo(() => {
     const E = n == null ? void 0 : n._type;
     if (!E)
@@ -5300,7 +5300,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), [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), [k, b] = useState(""), [v, B] = useState(!1), [w, _] = useState(!1);
   useEffect(() => {
     const { value: S, unit: y } = getClassValueAndUnit(i);
     if (y === "") {
@@ -5313,7 +5313,7 @@ const BlockStylingProps = () => {
     (S = !1) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
-        x(!0);
+        f(!0);
         return;
       }
       const j = get(y, "unit") !== "" ? get(y, "unit") : m;
@@ -5331,7 +5331,7 @@ const BlockStylingProps = () => {
     (S) => {
       const y = getUserInputValues(`${a}`, u);
       if (get(y, "error", !1)) {
-        x(!0);
+        f(!0);
         return;
       }
       if (S === "auto" || S === "none") {
@@ -5374,15 +5374,15 @@ const BlockStylingProps = () => {
             const y = parseInt$1(S.target.value);
             let j = isNaN$1(y) ? 0 : y;
             S.keyCode === 38 && (j += 1), S.keyCode === 40 && (j -= 1);
-            const I = `${j}`, P = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
-            C(P);
+            const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${m === "-" ? "" : m}]`;
+            C(R);
           },
           onKeyUp: (S) => {
             w && (S.preventDefault(), _(!1));
           },
           onBlur: () => A(),
           onChange: (S) => {
-            x(!1), l(S.target.value);
+            f(!1), l(S.target.value);
           },
           onClick: (S) => {
             var y;
@@ -5391,7 +5391,7 @@ const BlockStylingProps = () => {
           value: v ? k : 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"
           )
         }
       ),
@@ -5510,7 +5510,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
     (k) => {
       p({ color: g, shade: k });
@@ -5520,11 +5520,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,
       {
@@ -5564,7 +5564,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" }) }),
@@ -5898,17 +5898,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(), 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(), k = useMemo(() => get(m, "fullCls", ""), [m]), b = useCallback(
     (C, A = !0) => {
       const N = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
       (p || u !== "") && (N.mq = "xs");
       const S = generateFullClsName(N);
-      h(x, [S], A);
+      h(f, [S], A);
     },
-    [x, p, g, u, l, h]
+    [f, p, g, u, l, h]
   ), v = useCallback(() => {
-    f(x, [k], !0);
-  }, [x, k, f]), B = useMemo(() => canChangeClass(m, g), [m, g]);
+    x(f, [k], !0);
+  }, [f, k, x]), B = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
     i(B, m);
   }, [B, i, m]);
@@ -5994,23 +5994,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,
@@ -6165,9 +6165,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((v) => v !== b)) : g((v) => [...v, b]);
-  }, x = (b) => {
+  }, f = (b) => {
     n || l(b), c(b);
   }, k = getBreakpointValue(n ? i : a).toLowerCase();
   return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (b) => /* @__PURE__ */ createElement(
@@ -6175,7 +6175,7 @@ const COLOR_PROP = {
     {
       canvas: n,
       ...b,
-      onClick: x,
+      onClick: f,
       key: b.breakpoint,
       currentBreakpoint: k
     }
@@ -6189,7 +6189,7 @@ const COLOR_PROP = {
           openDelay: o,
           tooltip: r,
           ...b,
-          onClick: x,
+          onClick: f,
           key: b.breakpoint,
           currentBreakpoint: k
         }
@@ -6204,7 +6204,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)
           },
@@ -6289,8 +6289,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") }),
@@ -6346,20 +6346,20 @@ 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), [f, x] = 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 L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(m, L, !0), x("");
+  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 L = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(m, L, !0), f("");
   }, [w, _] = useState([]), E = ({ value: L }) => {
-    const P = L.trim().toLowerCase(), T = P.match(/.+:/g);
+    const R = L.trim().toLowerCase(), T = R.match(/.+:/g);
     let D = [];
     if (T && T.length > 0) {
-      const [O] = T, R = P.replace(O, "");
-      D = i.search(R).map((M) => ({
+      const [O] = T, P = R.replace(O, "");
+      D = i.search(P).map((M) => ({
         ...M,
         item: { ...M.item, name: O + M.item.name }
       }));
     } else
-      D = i.search(P);
+      D = i.search(R);
     return _(map(D, "item"));
   }, C = () => {
     _([]);
@@ -6371,23 +6371,23 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: f,
+      value: x,
       onFocus: (L) => {
         setTimeout(() => {
           L.target && L.target.select();
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && f.trim() !== "" && B();
+        L.key === "Enter" && x.trim() !== "" && B();
       },
-      onChange: (L, { newValue: P }) => x(P),
+      onChange: (L, { newValue: R }) => f(R),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [f, c, o]
+    [x, c, o]
   ), y = (L) => {
     debugger;
-    const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(m, [L]), u(m, P, !0), r(""), l(-1);
+    const R = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    g(m, [L]), u(m, R, !0), r(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
@@ -6438,14 +6438,14 @@ function ManualClasses() {
           variant: "outline",
           className: "h-6 border-border",
           onClick: B,
-          disabled: f.trim() === "",
+          disabled: x.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: v.map(
-      (L, P) => a === P ? /* @__PURE__ */ jsx(
+      (L, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
@@ -6469,7 +6469,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            x(L), g(m, [L]), setTimeout(() => {
+            f(L), g(m, [L]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -6602,9 +6602,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 k = (i.dragStartY - u.pageY) / f + 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}`);
     },
     [i],
@@ -6653,7 +6653,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",
@@ -6666,15 +6666,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,
@@ -6862,7 +6862,7 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, n = null) => flatMapDeep(o, (r) => {
-  var m, h, f, x, k, b, v, B;
+  var m, h, x, f, k, b, v, B;
   if (r.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (n && (a._parent = n.block._id), r.type === "text")
@@ -6904,8 +6904,8 @@ const CoreBlock = ({
       ...a,
       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: ((f = l.find((_) => _.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
-      maxWidth: ((k = (x = l.find((_) => _.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
+      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", "")) || "",
       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", ""), f = useFeature("dnd"), [, x] = 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), k = (B) => {
     const w = has(B, "styles_attrs.data-page-section");
     return B._type === "Box" && w;
   }, b = useCallback(
@@ -7067,7 +7067,7 @@ const registerChaiLibrary = (o, n) => {
       {
         onClick: l ? () => {
         } : b,
-        draggable: f ? "true" : "false",
+        draggable: x ? "true" : "false",
         onDragStart: async (B) => {
           const w = await c({ library: n, block: o });
           let _ = r;
@@ -7080,7 +7080,7 @@ const registerChaiLibrary = (o, n) => {
               };
             } else
               B.dataTransfer.setDragImage(new Image(), 0, 0);
-            x(E), setTimeout(() => {
+            f(E), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7106,22 +7106,22 @@ 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([]), f = useRef(null);
+  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);
   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 y = f.current.search(u).map((j) => j.item);
+    const y = x.current.search(u).map((j) => j.item);
     h(y);
   }, [u]);
-  const x = u.trim() && !isEmpty(m) ? m : c, k = groupBy(x, "group"), [b, v] = useState(null);
+  const f = u.trim() && !isEmpty(m) ? m : c, k = groupBy(f, "group"), [b, v] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(k))) {
       v(null);
@@ -7261,25 +7261,25 @@ const registerChaiLibrary = (o, n) => {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const h = Object.entries(a).map(([x, k]) => {
+        const h = Object.entries(a).map(([f, k]) => {
           const b = k, v = b.type || "partial", B = formatReadableName(v);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(b.name || x),
+            label: formatReadableName(b.name || f),
             description: b.description || "",
             icon: Globe,
             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);
@@ -7325,7 +7325,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, (y) => y._id === r)) == null ? void 0 : S._type, [h, f] = useState("all"), [x, k] = 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, (y) => y._id === r)) == null ? void 0 : S._type, [h, x] = useState("all"), [f, k] = useState(null), b = useRef(null);
   useEffect(() => {
     const y = setTimeout(() => {
       var j;
@@ -7333,9 +7333,9 @@ const registerChaiLibrary = (o, n) => {
     }, 0);
     return () => clearTimeout(y);
   }, [g]), useEffect(() => {
-    d && (f("all"), k(null));
+    d && (x("all"), k(null));
   }, [d]), useEffect(() => (b.current = debounce((y) => {
-    f(y);
+    x(y);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
@@ -7344,7 +7344,7 @@ const registerChaiLibrary = (o, n) => {
   }, []), B = useCallback(() => {
     k(null), b.current && b.current.cancel();
   }, []), w = useCallback((y) => {
-    b.current && b.current.cancel(), f(y), k(null);
+    b.current && b.current.cancel(), x(y), k(null);
   }, []), _ = useMemo(
     () => d ? values(n).filter(
       (y) => {
@@ -7382,7 +7382,7 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => w("all"),
             onMouseEnter: () => v("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"
@@ -7393,7 +7393,7 @@ const registerChaiLibrary = (o, n) => {
             onClick: () => w(y),
             onMouseEnter: () => v(y),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${h === y || x === y ? "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 === y || f === y ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(i(y.toLowerCase()))
           },
           `sidebar-${y}`
@@ -7434,7 +7434,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: [
@@ -7455,14 +7455,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, (v) => /* @__PURE__ */ jsx(TabsTrigger, { value: v.id, children: React__default.createElement(v.tab) }, `tab-add-block-${v.id}`))
+            f ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
+            map(x, (v) => /* @__PURE__ */ jsx(TabsTrigger, { value: v.id, children: React__default.createElement(v.tab) }, `tab-add-block-${v.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, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${v.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, (v) => /* @__PURE__ */ jsx(TabsContent, { value: v.id, children: React__default.createElement(v.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${v.id}`))
         ]
       }
     )
@@ -7766,10 +7766,10 @@ const Input = ({ node: o }) => {
     }
   );
 }, currentAddSelection = atom(null), Node = memo(({ node: o, style: n, dragHandle: r }) => {
-  var P;
+  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: f, isSelected: x, 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: k, 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());
@@ -7790,10 +7790,10 @@ const Input = ({ node: o }) => {
     return () => clearTimeout(T);
   }, [k, o, b]);
   const j = (T, D) => {
-    const O = c.contentDocument || c.contentWindow.document, R = O.querySelector(`[data-block-id=${T}]`);
-    R && R.setAttribute("data-drop", D);
-    const $ = R.getBoundingClientRect(), M = c.getBoundingClientRect();
-    $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = R.offsetTop - M.top);
+    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${T}]`);
+    P && P.setAttribute("data-drop", D);
+    const $ = P.getBoundingClientRect(), M = c.getBoundingClientRect();
+    $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = P.offsetTop - M.top);
   }, I = (T) => {
     S();
     const D = get(o, "parent.id");
@@ -7817,7 +7817,7 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const L = useMemo(() => has(f, "_libBlockId") && !isEmpty(f._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [f, d]);
+  const L = useMemo(() => has(x, "_libBlockId") && !isEmpty(x._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [x, d]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -7839,7 +7839,7 @@ const Input = ({ node: o }) => {
         T.preventDefault(), j(h, "no");
       },
       children: [
-        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((P = o == null ? void 0 : o.parent) == null ? void 0 : P.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
             onClick: (T) => {
@@ -7856,12 +7856,12 @@ const Input = ({ node: o }) => {
           {
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 outline-none",
-              x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              k && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
+              f ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
+              k && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(h) ? "opacity-50" : "",
-              L && x && "bg-primary/20 text-primary"
+              L && f && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7869,7 +7869,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${f ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7878,10 +7878,10 @@ const Input = ({ node: o }) => {
                     className: cn(
                       "leading-1 flex items-center",
                       L && "text-primary/60",
-                      L && x && "text-primary/80"
+                      L && f && "text-primary/80"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
+                      /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
                       v ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
@@ -7889,7 +7889,7 @@ const Input = ({ node: o }) => {
                           onDoubleClick: (T) => {
                             T.stopPropagation(), o.edit(), o.deselect();
                           },
-                          children: /* @__PURE__ */ jsx("span", { children: (f == null ? void 0 : f._name) || (f == null ? void 0 : f._type.split("/").pop()) })
+                          children: /* @__PURE__ */ jsx("span", { children: (x == null ? void 0 : x._name) || (x == null ? void 0 : x._type.split("/").pop()) })
                         }
                       )
                     ]
@@ -7897,7 +7897,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(h) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(x == null ? void 0 : x._type) && !l.includes(h) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8197,7 +8197,7 @@ const Input = ({ node: o }) => {
       B && typeof B == "object" && "fontFamily" in B && "borderRadius" in B && "colors" in B ? p(B) : console.error("Invalid preset structure:", B);
     } else
       console.error("Preset not found:", r);
-  }, f = useDebouncedCallback(
+  }, x = useDebouncedCallback(
     (v, B) => {
       p(() => ({
         ...d,
@@ -8209,7 +8209,7 @@ const Input = ({ node: o }) => {
     },
     [d],
     200
-  ), x = useDebouncedCallback(
+  ), f = useDebouncedCallback(
     (v) => {
       p(() => ({
         ...d,
@@ -8281,14 +8281,14 @@ const Input = ({ node: o }) => {
           {
             label: v,
             value: d.fontFamily[v.replace(/font-/g, "")] || B[Object.keys(B)[0]],
-            onChange: (w) => f(v, w)
+            onChange: (w) => x(v, w)
           },
           v
         )) }),
         (u == null ? void 0 : u.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
           /* @__PURE__ */ jsx(Label, { className: "text-sm", children: g("Border Radius") }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: x }),
+            /* @__PURE__ */ jsx(BorderRadiusInput, { value: d.borderRadius, onChange: f }),
             /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: d.borderRadius })
           ] })
         ] }),
@@ -8766,11 +8766,11 @@ function QuickPrompts({ onClick: o }) {
 const AIUserPrompt = ({ blockId: o }) => {
   const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), m = useRef(null), h = useRef(null);
   useEffect(() => {
-    var x;
-    (x = m.current) == null || x.focus();
+    var f;
+    (f = m.current) == null || f.focus();
   }, []);
-  const f = (x) => {
-    const { usage: k } = x || {};
+  const x = (f) => {
+    const { usage: k } = f || {};
     !l && k && g(k), h.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
@@ -8791,12 +8791,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: m,
           value: i,
-          onChange: (x) => c(x.target.value),
+          onChange: (f) => c(f.target.value),
           placeholder: n("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (x) => {
-            x.key === "Enter" && (x.preventDefault(), h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f));
+          onKeyDown: (f) => {
+            f.key === "Enter" && (f.preventDefault(), h.current && clearTimeout(h.current), g(void 0), r("content", o, i, x));
           }
         }
       ),
@@ -8806,7 +8806,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              h.current && clearTimeout(h.current), g(void 0), r("content", o, i, f);
+              h.current && clearTimeout(h.current), g(void 0), r("content", o, i, x);
             },
             variant: "default",
             className: "w-fit",
@@ -8838,8 +8838,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (x) => {
-            h.current && clearTimeout(h.current), g(void 0), r("content", o, x, f);
+          onClick: (f) => {
+            h.current && clearTimeout(h.current), g(void 0), r("content", o, f, x);
           }
         }
       )
@@ -8856,8 +8856,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   const h = async () => {
     try {
       d(!0), u(null), await i(r), toast.success(o("Updated AI Context")), m.current.click();
-    } catch (f) {
-      u(f);
+    } catch (x) {
+      u(x);
     } finally {
       d(!1);
     }
@@ -8865,8 +8865,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (f) => {
-        g(f !== "");
+      onValueChange: (x) => {
+        g(x !== "");
       },
       type: "single",
       collapsible: !0,
@@ -8878,12 +8878,12 @@ const AIUserPrompt = ({ blockId: o }) => {
             {
               ref: l,
               value: r,
-              onChange: (f) => a(f.target.value),
+              onChange: (x) => a(x.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (f) => {
-                f.key === "Enter" && (f.preventDefault(), h());
+              onKeyDown: (x) => {
+                x.key === "Enter" && (x.preventDefault(), h());
               }
             }
           ),
@@ -9004,7 +9004,7 @@ function AIChatPanel() {
     }, 1500);
   }, h = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), m());
-  }, f = (b) => {
+  }, x = (b) => {
     var B;
     const v = (B = b.target.files) == null ? void 0 : B[0];
     if (v) {
@@ -9014,7 +9014,7 @@ function AIChatPanel() {
         d((E = _.target) == null ? void 0 : E.result);
       }, w.readAsDataURL(v);
     }
-  }, x = () => {
+  }, f = () => {
     var b;
     (b = p.current) == null || b.click();
   }, k = () => {
@@ -9081,14 +9081,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(Image$1, { className: "h-4 w-4 text-muted-foreground" })
           }
         )
@@ -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(""), f = useRef(null), x = 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), k = usePageExternalData();
   useEffect(() => {
     l(n);
   }, [n]);
@@ -9237,22 +9237,22 @@ const AiAssistant = () => {
     C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? w() : b());
   }, E = useCallback((C) => {
     const A = (y) => /[.,!?;:]/.test(y), N = (y, j, I) => {
-      let L = "", P = "";
+      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 !== " " && (P = " "), {
-        text: L + I + P,
+      return j > 0 && (T === "." || !A(T) && T !== " ") && (L = " "), j < y.length && !A(D) && D !== " " && (R = " "), {
+        text: L + I + R,
         prefixLength: L.length,
-        suffixLength: P.length
+        suffixLength: R.length
       };
-    }, S = x.current;
+    }, S = f.current;
     if (S) {
       const y = S.selectionStart || 0, j = S.value || "", I = S.selectionEnd || y;
       if (I > y) {
-        const O = `{{${C}}}`, { text: R } = N(j, y, O), $ = j.slice(0, y) + R + j.slice(I);
+        const O = `{{${C}}}`, { text: P } = N(j, y, O), $ = j.slice(0, y) + P + j.slice(I);
         p($);
         return;
       }
-      const P = `{{${C}}}`, { text: T } = N(j, y, P), D = j.slice(0, y) + T + j.slice(y);
+      const R = `{{${C}}}`, { text: T } = N(j, y, R), D = j.slice(0, y) + T + j.slice(y);
       p(D);
     }
   }, []);
@@ -9275,7 +9275,7 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: f,
+                  ref: x,
                   value: i,
                   onChange: (C) => c(C.target.value),
                   placeholder: "Enter Key",
@@ -9296,7 +9296,7 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: x,
+                  ref: f,
                   value: d,
                   onChange: (C) => p(C.target.value),
                   onKeyDown: _,
@@ -9445,28 +9445,28 @@ const RootLayout = () => {
       r(n === C ? null : C);
     },
     [n]
-  ), { t: f } = useTranslation(), x = useMemo(
+  ), { t: x } = useTranslation(), f = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: n }) ?? first(x), v = get(b, "width", DEFAULT_PANEL_WIDTH);
+  ), k = useBuilderProp("htmlDir", "ltr"), b = find(f, { id: n }) ?? first(f), v = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
-      const C = find(x, { id: n });
+      const C = find(f, { id: n });
       C && get(C, "view", "standard") === "standard" && (a.current = n, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
     }
-  }, [n, x]);
+  }, [n, f]);
   const B = useMemo(() => {
     if (n === null) return 0;
-    const C = find(x, { id: n });
+    const C = find(f, { id: n });
     return get(C, "view", "standard") === "standard" ? v : l;
-  }, [n, v, l, x]), w = useCallback(() => {
+  }, [n, v, l, f]), w = useCallback(() => {
     r(a.current);
   }, [r]), _ = useCallback(() => {
     r("outline");
   }, [r]);
   useEffect(() => {
-    find(x, { id: n }) || r("outline");
-  }, [n, x]);
+    find(f, { id: n }) || r("outline");
+  }, [n, f]);
   const E = useCallback(
     (C) => {
       h(C);
@@ -9490,7 +9490,7 @@ const RootLayout = () => {
                   isActive: n === C.id,
                   show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
               ] }, "button-top-" + A)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((C, A) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -9500,7 +9500,7 @@ const RootLayout = () => {
                   isActive: n === C.id,
                   show: () => E(C.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(C.label) }) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
               ] }, "button-bottom-" + A)) })
             ] }),
             /* @__PURE__ */ jsx(
@@ -9516,7 +9516,7 @@ const RootLayout = () => {
                     "div",
                     {
                       className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(b, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+                      children: /* @__PURE__ */ jsx("span", { children: x(get(b, "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(b, "panel", NoopComponent), {}) }) })
@@ -9539,11 +9539,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" }),
                     " ",
-                    f("AI Assistant")
+                    x("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(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      f("Theme Settings")
+                      x("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9574,7 +9574,7 @@ 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(b, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+            /* @__PURE__ */ jsx("span", { children: x(get(b, "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(b, "panel", NoopComponent), {
             close: _
@@ -9586,7 +9586,7 @@ const RootLayout = () => {
     n !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => w(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${v}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(b, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+        /* @__PURE__ */ jsx("span", { children: x(get(b, "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(b, "panel", NoopComponent), {
         close: _
@@ -9612,7 +9612,7 @@ 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(b, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { children: x(get(b, "label", "")) })
                 ] }),
                 /* @__PURE__ */ jsx(Button, { onClick: () => w(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
               ] }),
@@ -9634,6 +9634,38 @@ const RootLayout = () => {
     ] }),
     /* @__PURE__ */ jsx("div", { children: a ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-96 w-full" }), children: React__default.createElement(a) }) : null })
   ] }) : null;
+}, CHAI_FEATURE_FLAGS = {}, useChaiFeatureFlags = () => CHAI_FEATURE_FLAGS, featureFlagsAtom = atomWithStorage("chai-feature-flags", []), useChaiFeatureFlag = (o) => {
+  const [n] = useAtom$1(featureFlagsAtom);
+  return n.includes(o);
+}, useToggleChaiFeatureFlag = (o) => {
+  const [n, r] = useAtom$1(featureFlagsAtom);
+  return () => {
+    n.includes(o) ? r(n.filter((l) => l !== o)) : r([...n, o]);
+  };
+}, FeatureToggle = ({
+  featureKey: o,
+  options: n
+}) => {
+  const r = useToggleChaiFeatureFlag(o), a = useChaiFeatureFlag(o);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", 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 })
+    ] })
+  ] });
+}, 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;
 }, setDebugLogs = (o) => {
 }, getParentNodeIds = (o, n) => {
   const r = [];
@@ -9677,15 +9709,7 @@ const RootLayout = () => {
     ) }),
     "Minimum width: 1280px"
   ] }) })
-] }) }) });
-function getFromQueryParams(o) {
-  var r;
-  return (r = new URLSearchParams(window.location.search).get("flags")) == null ? void 0 : r.includes(o);
-}
-const FEATURE_TOGGLES = {
-  dnd: getFromQueryParams("dnd"),
-  aiChat: getFromQueryParams("ai-chat")
-}, isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
+] }) }) }), isSelfAtom = (o, n) => o.unstable_is ? o.unstable_is(n) : n === o, hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.write, isAtomStateInitialized = (o) => "v" in o || "e" in o, returnAtomValue = (o) => {
   if ("e" in o)
     throw o.e;
   return o.v;
@@ -9731,17 +9755,17 @@ const FEATURE_TOGGLES = {
   for (const i of n.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (h, ...f) => h.read(...f), p = (h, ...f) => h.write(...f), u = (h, f) => {
-  var x;
-  return (x = h.unstable_onInit) == null ? void 0 : x.call(h, f);
-}, g = (h, f) => {
-  var x;
-  return (x = h.onMount) == null ? void 0 : x.call(h, f);
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (h, ...x) => h.read(...x), p = (h, ...x) => h.write(...x), u = (h, x) => {
+  var f;
+  return (f = h.unstable_onInit) == null ? void 0 : f.call(h, x);
+}, g = (h, x) => {
+  var f;
+  return (f = h.onMount) == null ? void 0 : f.call(h, x);
 }, ...m) => {
   const h = m[0] || ((A) => {
     let N = o.get(A);
     return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(A, N), u == null || u(A, C)), N;
-  }), f = m[1] || (() => {
+  }), x = m[1] || (() => {
     let A, N;
     const S = (y) => {
       try {
@@ -9756,11 +9780,11 @@ const FEATURE_TOGGLES = {
       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(S), a.size && x();
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), y.forEach(S), a.size && f();
     } while (a.size || i.size || l.size);
     if (A)
       throw N;
-  }), x = m[2] || (() => {
+  }), f = m[2] || (() => {
     const A = [], N = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), y = Array.from(a);
     for (; y.length; ) {
       const j = y[y.length - 1], I = h(j);
@@ -9778,71 +9802,71 @@ const FEATURE_TOGGLES = {
     }
     for (let j = A.length - 1; j >= 0; --j) {
       const [I, L] = A[j];
-      let P = !1;
+      let R = !1;
       for (const T of L.d.keys())
         if (T !== I && a.has(T)) {
-          P = !0;
+          R = !0;
           break;
         }
-      P && (k(I), B(I)), r.delete(I);
+      R && (k(I), B(I)), r.delete(I);
     }
   }), k = m[3] || ((A) => {
     var N, S;
     const y = h(A);
     if (isAtomStateInitialized(y) && (n.has(A) && r.get(A) !== y.n || Array.from(y.d).every(
-      ([R, $]) => (
+      ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        k(R).n === $
+        k(P).n === $
       )
     )))
       return y;
     y.d.clear();
     let j = !0;
     const I = () => {
-      n.has(A) && (B(A), x(), f());
-    }, L = (R) => {
+      n.has(A) && (B(A), f(), x());
+    }, L = (P) => {
       var $;
-      if (isSelfAtom(A, R)) {
-        const U = h(R);
-        if (!isAtomStateInitialized(U))
-          if (hasInitialValue(R))
-            setAtomStateValueOrPromise(R, R.init, h);
+      if (isSelfAtom(A, P)) {
+        const F = h(P);
+        if (!isAtomStateInitialized(F))
+          if (hasInitialValue(P))
+            setAtomStateValueOrPromise(P, P.init, h);
           else
             throw new Error("no atom init");
-        return returnAtomValue(U);
+        return returnAtomValue(F);
       }
-      const M = k(R);
+      const M = k(P);
       try {
         return returnAtomValue(M);
       } finally {
-        y.d.set(R, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = n.get(R)) == null || $.t.add(A), j || I();
+        y.d.set(P, M.n), isPendingPromise(y.v) && addPendingPromiseToDependency(A, y.v, M), ($ = n.get(P)) == null || $.t.add(A), j || I();
       }
     };
-    let P, T;
+    let R, T;
     const D = {
       get signal() {
-        return P || (P = new AbortController()), P.signal;
+        return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !T && isActuallyWritableAtom(A) && (T = (...R) => {
+        return !T && isActuallyWritableAtom(A) && (T = (...P) => {
           if (!j)
             try {
-              return v(A, ...R);
+              return v(A, ...P);
             } finally {
-              x(), f();
+              f(), x();
             }
         }), T;
       }
     }, O = y.n;
     try {
-      const R = d(A, L, D);
-      return setAtomStateValueOrPromise(A, R, h), isPromiseLike$1(R) && ((N = R.onCancel) == null || N.call(R, () => P == null ? void 0 : P.abort()), R.then(
+      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;
-    } catch (R) {
-      return delete y.v, y.e = R, ++y.n, y;
+    } catch (P) {
+      return delete y.v, y.e = P, ++y.n, y;
     } finally {
       j = !1, O !== y.n && r.get(A) === O && (r.set(A, y.n), a.add(A), (S = c.c) == null || S.call(c, A));
     }
@@ -9858,19 +9882,19 @@ const FEATURE_TOGGLES = {
   }), v = m[5] || ((A, ...N) => {
     let S = !0;
     const y = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
-      var P;
+      var R;
       const T = h(I);
       try {
         if (isSelfAtom(A, I)) {
           if (!hasInitialValue(I))
             throw new Error("atom not writable");
           const D = T.n, O = L[0];
-          setAtomStateValueOrPromise(I, O, h), B(I), D !== T.n && (a.add(I), (P = c.c) == null || P.call(c, I), b(I));
+          setAtomStateValueOrPromise(I, O, h), B(I), D !== T.n && (a.add(I), (R = c.c) == null || R.call(c, I), b(I));
           return;
         } else
           return v(I, ...L);
       } finally {
-        S || (x(), f());
+        S || (f(), x());
       }
     };
     try {
@@ -9909,19 +9933,19 @@ const FEATURE_TOGGLES = {
       }, n.set(A, y), (N = c.m) == null || N.call(c, A), isActuallyWritableAtom(A)) {
         const j = () => {
           let I = !0;
-          const L = (...P) => {
+          const L = (...R) => {
             try {
-              return v(A, ...P);
+              return v(A, ...R);
             } finally {
-              I || (x(), f());
+              I || (f(), x());
             }
           };
           try {
-            const P = g(A, L);
-            P && (y.u = () => {
+            const R = g(A, L);
+            R && (y.u = () => {
               I = !0;
               try {
-                P();
+                R();
               } finally {
                 I = !1;
               }
@@ -9966,8 +9990,8 @@ const FEATURE_TOGGLES = {
     g,
     // building-block functions
     h,
-    f,
     x,
+    f,
     k,
     b,
     v,
@@ -9980,13 +10004,13 @@ const FEATURE_TOGGLES = {
       try {
         return v(A, ...N);
       } finally {
-        x(), f();
+        f(), x();
       }
     },
     sub: (A, N) => {
       const y = w(A).l;
-      return y.add(N), f(), () => {
-        y.delete(N), _(A), f();
+      return y.add(N), x(), () => {
+        y.delete(N), _(A), x();
       };
     }
   };
@@ -10102,13 +10126,14 @@ const useAutoSave = () => {
   ] });
 }, ChaiBuilderEditor = (o) => {
   const n = o.onError || noop;
-  return /* @__PURE__ */ jsx("div", { className: "h-screen w-screen", children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsxs(FlagsProvider, { features: { ...FEATURE_TOGGLES }, children: [
+  return /* @__PURE__ */ jsx("div", { className: "h-screen w-screen", children: /* @__PURE__ */ jsxs(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: [
     /* @__PURE__ */ jsx(ScreenTooSmall, {}),
     /* @__PURE__ */ jsx(ChaiBuilderComponent, { ...o }),
     /* @__PURE__ */ jsx(ChaiWatchers, { ...o }),
     /* @__PURE__ */ jsx(PreviewScreen, {}),
-    /* @__PURE__ */ jsx(Toaster, { richColors: !0 })
-  ] }) }) });
+    /* @__PURE__ */ jsx(Toaster, { richColors: !0 }),
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 left-4 z-50", children: /* @__PURE__ */ jsx(ChaiFeatureFlagsWidget, {}) })
+  ] }) });
 };
 if (typeof window > "u")
   throw new Error("@chaibuilder/sdk is only supported in the browser. Avoid using it in the server side.");
@@ -10193,7 +10218,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Fe as useTranslation,
+  Ve as useTranslation,
   useUndoManager,
   useUpdateBlocksProps,
   useUpdateBlocksPropsRealtime,