@chaibuilder/sdk 2.4.3 → 2.4.5

package/dist/core.js

@@ -1,17 +1,17 @@
-var H = Object.defineProperty;
-var U = (o, r, n) => r in o ? H(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
-var F = (o, r, n) => U(o, typeof r != "symbol" ? r + "" : r, n);
+var U = Object.defineProperty;
+var V = (o, r, n) => r in o ? U(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n;
+var F = (o, r, n) => V(o, typeof r != "symbol" ? r + "" : r, n);
 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, 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, ResetIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
-import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, flatMapDeep, some, sortBy, round } from "lodash-es";
+import { get, find, filter, flatten, has, map, includes, without, compact, reverse, findIndex, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, uniq, flatMapDeep, some, trim, sortBy, round } from "lodash-es";
 import * as React from "react";
-import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, useReducer, useDebugValue } from "react";
+import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 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, b8 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, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 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, b6 as TooltipProvider, 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, b1 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, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, a4 as DialogDescription, a5 as DialogFooter, 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, aY as Switch, r as Avatar, aL as Separator, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-BKtuoy5e.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, Info, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, ImportIcon, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 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, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 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, b6 as TooltipProvider, 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, b1 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, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, 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, r as Avatar, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-CyXEVUOu.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, Info, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Undo as Undo$1, ImportIcon, Type, CornerUpRight, Palette, Sun, Moon, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Layers } 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, Toaster } from "sonner";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as He } from "react-i18next";
+import { useTranslation as Ue } from "react-i18next";
 import Fuse from "fuse.js";
 import UndoManager from "undo-manager";
 import Link from "@tiptap/extension-link";
@@ -47,7 +47,7 @@ import twContainer from "@tailwindcss/container-queries";
 import { ErrorBoundary } from "react-error-boundary";
 import { motion } from "framer-motion";
 import { useHotkeys } from "react-hotkeys-hook";
-import { flip } from "@floating-ui/dom";
+import { limitShift, flip, size } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
 import ReactDOM from "react-dom";
 import { Provider as Provider$1 } from "react-wrap-balancer";
@@ -343,16 +343,16 @@ function insertBlocksAtPosition(o, r, n, a) {
         _type: "Text",
         content: u.content
       };
-      Object.keys(u).forEach((x) => {
-        x.startsWith("content-") && (m[x] = u[x]);
-      }), l.unshift(m), i = i.map((x) => {
-        if (x._id === n) {
-          const f = { ...x, content: "" };
-          return Object.keys(f).forEach((y) => {
-            y.startsWith("content-") && (f[y] = "");
-          }), f;
+      Object.keys(u).forEach((f) => {
+        f.startsWith("content-") && (m[f] = u[f]);
+      }), l.unshift(m), i = i.map((f) => {
+        if (f._id === n) {
+          const x = { ...f, content: "" };
+          return Object.keys(x).forEach((k) => {
+            k.startsWith("content-") && (x[k] = "");
+          }), x;
         }
-        return x;
+        return f;
       });
     }
   }
@@ -480,15 +480,15 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
     if (g.length === 2) {
       const h = g.find((m) => m._id !== d);
       if (h && h._type === "Text") {
-        const m = n.find((x) => x._id === u);
-        m && "content" in m && (n = n.map((x) => {
-          if (x._id === u) {
-            const f = { ...x, content: h.content };
-            return Object.keys(h).forEach((y) => {
-              y.startsWith("content-") && (f[y] = h[y]);
-            }), f;
+        const m = n.find((f) => f._id === u);
+        m && "content" in m && (n = n.map((f) => {
+          if (f._id === u) {
+            const x = { ...f, content: h.content };
+            return Object.keys(h).forEach((k) => {
+              k.startsWith("content-") && (x[k] = h[k]);
+            }), x;
           }
-          return x;
+          return f;
         }), a.push(h._id));
       }
     }
@@ -571,32 +571,32 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (x) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, n ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), h = (o == null ? void 0 : o._type) !== "Repeater" && r === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, n ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), h = (o == null ? void 0 : o._type) !== "Repeater" && r === "live";
   return useEffect(() => {
     if (r === "mock") {
       if (isFunction(a)) {
-        i((f) => ({ ...f, status: "loading", props: {} }));
-        const x = a({ block: o });
-        if (!isObject(x))
+        i((x) => ({ ...x, status: "loading", props: {} }));
+        const f = a({ block: o });
+        if (!isObject(f))
           throw new Error("mockDataProvider should return an object");
-        i((f) => ({ ...f, status: "loaded", props: x }));
+        i((x) => ({ ...x, status: "loaded", props: f }));
       }
       return;
     }
-    r === "live" && (!g && !h || (i((x) => ({ ...x, status: "loading", props: {} })), d({ block: o }).then((x = {}) => {
-      g ? (p((f) => ({
-        ...f,
+    r === "live" && (!g && !h || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
+      g ? (p((x) => ({
+        ...x,
         [o._id]: {
           status: "loaded",
-          props: get(x, "items", []),
+          props: get(f, "items", []),
           repeaterItems: o.repeaterItems
         }
-      })), 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: {} }));
+      })), 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: {} }));
     })));
   }, [o == null ? void 0 : o._id, u, g, h, a, r]), {
     $loading: get(l, "status") === "loading",
@@ -761,10 +761,10 @@ const checkMissingTranslations = (o, r) => r ? o.some((n) => {
       if (!c("save_page"))
         return;
       r("SAVING"), a("SAVING");
-      const x = l();
+      const f = l();
       return await n({
         autoSave: m,
-        blocks: x.blocks,
+        blocks: f.blocks,
         theme: i,
         needTranslations: u()
       }), setTimeout(() => {
@@ -839,65 +839,65 @@ const undoRedoStateAtom = atom({
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (f, y, b) => {
-      const B = map(f, (A) => {
-        const w = r.find((N) => N._id === A)._parent || null, v = r.filter((N) => w ? N._parent === w : !N._parent).map((N) => N._id).indexOf(A);
-        return { _id: A, oldParent: w, oldPosition: v };
-      }), E = B.find(({ _id: A }) => A === f[0]);
-      E && E.oldParent === y && E.oldPosition === b || (i(f, y, b), o({
-        undo: () => each(B, ({ _id: A, oldParent: j, oldPosition: w }) => {
-          i([A], j, w);
+    moveBlocks: (x, k, b) => {
+      const A = map(x, (_) => {
+        const w = r.find((E) => E._id === _)._parent || null, C = r.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(_);
+        return { _id: _, oldParent: w, oldPosition: C };
+      }), B = A.find(({ _id: _ }) => _ === x[0]);
+      B && B.oldParent === k && B.oldPosition === b || (i(x, k, b), o({
+        undo: () => each(A, ({ _id: _, oldParent: N, oldPosition: w }) => {
+          i([_], N, w);
         }),
-        redo: () => i(f, y, b)
+        redo: () => i(x, k, b)
       }));
     },
-    addBlocks: (f, y, b) => {
-      a(f, y, b), o({
-        undo: () => l(map(f, "_id")),
-        redo: () => a(f, y, b)
+    addBlocks: (x, k, b) => {
+      a(x, k, b), o({
+        undo: () => l(map(x, "_id")),
+        redo: () => a(x, k, b)
       });
     },
-    removeBlocks: (f) => {
-      var E;
-      const y = (E = first(f)) == null ? void 0 : E._parent, B = r.filter((A) => y ? A._parent === y : !A._parent).indexOf(first(f));
-      l(map(f, "_id")), o({
-        undo: () => a(f, y, B),
-        redo: () => l(map(f, "_id"))
+    removeBlocks: (x) => {
+      var B;
+      const k = (B = first(x)) == null ? void 0 : B._parent, A = r.filter((_) => k ? _._parent === k : !_._parent).indexOf(first(x));
+      l(map(x, "_id")), o({
+        undo: () => a(x, k, A),
+        redo: () => l(map(x, "_id"))
       });
     },
-    updateBlocks: (f, y, b) => {
-      let B = [];
+    updateBlocks: (x, k, b) => {
+      let A = [];
       if (b)
-        B = map(f, (E) => ({ _id: E, ...b }));
+        A = map(x, (B) => ({ _id: B, ...b }));
       else {
-        const E = keys(y);
-        B = map(f, (A) => {
-          const j = r.find((C) => C._id === A), w = { _id: A };
-          return each(E, (C) => w[C] = j[C]), w;
+        const B = keys(k);
+        A = map(x, (_) => {
+          const N = r.find((y) => y._id === _), w = { _id: _ };
+          return each(B, (y) => w[y] = N[y]), w;
         });
       }
-      c(map(f, (E) => ({ _id: E, ...y }))), o({
-        undo: () => c(B),
-        redo: () => c(map(f, (E) => ({ _id: E, ...y })))
+      c(map(x, (B) => ({ _id: B, ...k }))), o({
+        undo: () => c(A),
+        redo: () => c(map(x, (B) => ({ _id: B, ...k })))
       });
     },
-    updateBlocksRuntime: (f, y) => {
-      c(map(f, (b) => ({ _id: b, ...y })));
+    updateBlocksRuntime: (x, k) => {
+      c(map(x, (b) => ({ _id: b, ...k })));
     },
-    setNewBlocks: (f) => {
-      n(f), o({
+    setNewBlocks: (x) => {
+      n(x), o({
         undo: () => n(r),
-        redo: () => n(f)
+        redo: () => n(x)
       });
     },
-    updateMultipleBlocksProps: (f) => {
-      let y = [];
-      y = map(f, (b) => {
-        const B = keys(b), E = r.find((j) => j._id === b._id), A = {};
-        return each(B, (j) => A[j] = E[j]), A;
-      }), c(f), o({
-        undo: () => c(y),
-        redo: () => c(f)
+    updateMultipleBlocksProps: (x) => {
+      let k = [];
+      k = map(x, (b) => {
+        const A = keys(b), B = r.find((N) => N._id === b._id), _ = {};
+        return each(A, (N) => _[N] = B[N]), _;
+      }), c(x), o({
+        undo: () => c(k),
+        redo: () => c(x)
       });
     }
   };
@@ -905,12 +905,12 @@ const undoRedoStateAtom = atom({
   const [o] = useBlocksStore(), [, r] = useSelectedBlockIds(), { addBlocks: n } = useBlocksStoreUndoableActions(), a = useCallback(
     (i, c, d) => {
       var m;
-      for (let x = 0; x < i.length; x++) {
-        const { _id: f } = i[x];
-        i[x]._id = generateUUID();
-        const y = filter(i, { _parent: f });
-        for (let b = 0; b < y.length; b++)
-          y[b]._parent = i[x]._id;
+      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 b = 0; b < k.length; b++)
+          k[b]._parent = i[f]._id;
       }
       const p = first(i);
       let u, g;
@@ -921,8 +921,8 @@ const undoRedoStateAtom = atom({
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const y = i.blocks;
-        return a(y, c, d);
+        const k = i.blocks;
+        return a(k, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
@@ -1821,8 +1821,8 @@ const undoRedoStateAtom = atom({
     regExp: "delay-(\\d+|\\[.*\\])"
   },
   animation: {
-    classes: ["animation-none", "animation-spin", "animation-ping"],
-    regExp: "animation-(none|spin|ping)"
+    classes: ["animate-none", "animate-spin", "animate-ping"],
+    regExp: "animate-(none|spin|ping)"
   },
   scaleX: {
     classes: map(CLASS_VALUES.scale, (o) => `scale-x-${o}`),
@@ -2360,43 +2360,43 @@ const getBlockWithChildren = (o, r) => {
     return isEmpty(c) ? !1 : (has(l, "_parent") && isEmpty(l._parent) && delete l._parent, { ...l, ...c });
   })
 ), addLangToPrompt = (o, r, n) => !r || n !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, r, r)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
-  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, x) => {
-    const f = cloneDeep(x.find((y) => y._id === m));
-    for (const y in f) {
-      const b = f[y];
+  const [o, r] = useAtom$1(askAiProcessingAtom), [n, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, h = (m, f) => {
+    const x = cloneDeep(f.find((k) => k._id === m));
+    for (const k in x) {
+      const b = x[k];
       if (typeof b == "string" && startsWith(b, STYLES_KEY)) {
-        const { baseClasses: B, classes: E } = getSplitChaiClasses(b);
-        f[y] = compact(flattenDeep([B, E])).join(" ");
+        const { baseClasses: A, classes: B } = getSplitChaiClasses(b);
+        x[k] = compact(flattenDeep([A, B])).join(" ");
       } else
-        y !== "_id" && delete f[y];
+        k !== "_id" && delete x[k];
     }
-    return f;
+    return x;
   };
   return {
     askAi: useCallback(
-      async (m, x, f, y) => {
+      async (m, f, x, k) => {
         if (l) {
           r(!0), a(null);
           try {
-            const b = p === u ? "" : p, B = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(x, d)), p) : [h(x, d)], E = await l(m, addLangToPrompt(f, g, m), B, b), { blocks: A, error: j } = E;
-            if (j) {
-              a(j);
+            const b = p === u ? "" : p, A = m === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p) : [h(f, d)], B = await l(m, addLangToPrompt(x, g, m), A, b), { blocks: _, error: N } = B;
+            if (N) {
+              a(N);
               return;
             }
             if (m === "styles") {
-              const w = A.map((C) => {
-                for (const v in C)
-                  v !== "_id" && (C[v] = `${STYLES_KEY},${C[v]}`);
-                return C;
+              const w = _.map((y) => {
+                for (const C in y)
+                  C !== "_id" && (y[C] = `${STYLES_KEY},${y[C]}`);
+                return y;
               });
               c(w);
             } else
-              i(A);
-            y && y(E);
+              i(_);
+            k && k(B);
           } catch (b) {
             a(b);
           } finally {
-            r(!1), y && y();
+            r(!1), k && k();
           }
         }
       },
@@ -2490,12 +2490,12 @@ const getBlockWithChildren = (o, r) => {
             if (!p)
               return h;
             let m = [];
-            for (const x of h)
-              if (x._type === "PartialBlock" || x._type === "GlobalBlock") {
-                let f = l(x.partialBlockId);
-                x._parent && (f == null ? void 0 : f.length) > 0 && (f = f.map((y) => (isEmpty(y._parent) && set(y, "_parent", x._parent), y))), m = [...m, ...f];
+            for (const f of h)
+              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))), m = [...m, ...x];
               } else
-                m.push(x);
+                m.push(f);
             return m;
           })
         };
@@ -2678,13 +2678,13 @@ const getBlockWithChildren = (o, r) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      u = u.replace(x, " ").replace(/\s+/g, " ").trim();
-      const f = first(h.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], f) && p.push(h.split(":").pop().trim());
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
+      const x = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(h.split(":").pop().trim());
     }), each(p, (h) => {
-      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), x = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
-      g = g.replace(x, " ").replace(/\s+/g, " ").trim();
+      const m = h.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${m}(?=\\s|$)`, "g");
+      g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
       ids: [d._id],
       props: {
@@ -2833,21 +2833,21 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), CONTROLS
     return "VERTICAL";
   }
 }, isDisabledControl = (o, r, n) => !!(o && (n === "UP" || n === "LEFT") || r && (n === "DOWN" || n === "RIGHT")), useBlockController = (o, r) => {
-  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(n, (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, h = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, i, a), x = useCallback(
-    (f) => {
-      isDisabledControl(g, h, f) || p || (f === "UP" || f === "LEFT" ? l([i], c || null, u - 1) : (f === "DOWN" || f === "RIGHT") && l([i], c || null, u + 2), r());
+  const [n] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(n, (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, h = u + 1 === (d == null ? void 0 : d.length), m = getParentBlockOrientation(c, i, a), f = useCallback(
+    (x) => {
+      isDisabledControl(g, h, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), r());
     },
     [g, h, p, u, i, c, r]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
-    ({ key: f }) => {
-      var y;
-      x((y = f == null ? void 0 : f.replace("Arrow", "")) == null ? void 0 : y.toUpperCase());
+    ({ key: x }) => {
+      var k;
+      f((k = x == null ? void 0 : x.replace("Arrow", "")) == null ? void 0 : k.toUpperCase());
     },
     { document: a == null ? void 0 : a.contentDocument },
-    [x]
-  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: x, orientation: m };
+    [f]
+  ), { isOnlyChild: p, isFirstBlock: g, isLastBlock: h, moveBlock: f, orientation: m };
 }, BlockController = ({ block: o, updateFloatingBar: r }) => {
   const { isOnlyChild: n, isFirstBlock: a, isLastBlock: l, moveBlock: i, orientation: c } = useBlockController(
     o,
@@ -2989,37 +2989,65 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span"],
 }, BlockFloatingSelector = ({ block: o, selectedBlockElement: r }) => {
   const n = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), { floatingStyles: g, refs: h, update: m } = useFloating({
     placement: "top-start",
-    middleware: [shift(), flip()],
+    middleware: [
+      shift({
+        boundary: u == null ? void 0 : u.body,
+        limiter: limitShift({
+          offset: 8,
+          mainAxis: !0,
+          crossAxis: !0
+        })
+      }),
+      flip({
+        boundary: u == null ? void 0 : u.body,
+        fallbackPlacements: ["bottom-start", "top-end", "bottom-end", "inside"]
+      }),
+      size({
+        boundary: u == null ? void 0 : u.body,
+        apply({ availableWidth: k, availableHeight: b, elements: A }) {
+          Object.assign(A.floating.style, {
+            maxWidth: `${Math.max(200, k)}px`,
+            maxHeight: `${Math.max(100, b)}px`
+          });
+        }
+      })
+    ],
     elements: { reference: r }
   });
   useResizeObserver(r, () => m(), r !== null), useResizeObserver(u == null ? void 0 : u.body, () => m(), (u == null ? void 0 : u.body) !== null);
-  const x = get(o, "_parent", null), f = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
-  return !r || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+  const f = get(o, "_parent", null), x = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
+  return useEffect(() => {
+    if (r) {
+      const k = setTimeout(() => m(), 500);
+      return () => clearTimeout(k);
+    } else
+      m();
+  }, [r]), !r || !o || p ? null : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "div",
     {
       role: "button",
       tabIndex: 0,
       ref: h.setFloating,
       style: g,
-      onClick: (y) => {
-        y.stopPropagation(), y.preventDefault();
+      onClick: (k) => {
+        k.stopPropagation(), k.preventDefault();
       },
-      onMouseEnter: (y) => {
-        y.stopPropagation(), i(null);
+      onMouseEnter: (k) => {
+        k.stopPropagation(), i(null);
       },
-      onKeyDown: (y) => y.stopPropagation(),
+      onKeyDown: (k) => k.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        x && /* @__PURE__ */ jsx(
+        f && /* @__PURE__ */ jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([x]);
+              c([]), l([f]);
             }
           }
         ),
-        /* @__PURE__ */ jsx(BlockActionLabel, { label: f, block: o }),
+        /* @__PURE__ */ jsx(BlockActionLabel, { label: x, 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,
@@ -3177,8 +3205,8 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
     i
   ]), useHotkeys(
     "del, backspace",
-    (x) => {
-      x.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
+    (f) => {
+      f.preventDefault(), canDeleteBlock(get(a, "_type", "")) && l(r);
     },
     m,
     [r, l]
@@ -3471,8 +3499,8 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
         ],
         onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
         onBlur: ({ editor: u, event: g }) => {
-          const h = g.relatedTarget, m = i.querySelector(".ProseMirror"), x = i.querySelector(".tippy-box"), f = m == null ? void 0 : m.contains(h), y = x == null ? void 0 : x.contains(h);
-          if (!f && !y) {
+          const h = g.relatedTarget, m = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = m == null ? void 0 : m.contains(h), k = f == null ? void 0 : f.contains(h);
+          if (!x && !k) {
             const b = (u == null ? void 0 : u.getHTML()) || "";
             n(b);
           }
@@ -3527,14 +3555,14 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
     useEffect(() => {
       if (a.current) {
         a.current.innerText = r, a.current.focus();
-        const m = c.createRange(), x = d.getSelection();
-        m.selectNodeContents(a.current), m.collapse(!1), x == null || x.removeAllRanges(), x == null || x.addRange(m), a.current.focus();
+        const m = c.createRange(), f = d.getSelection();
+        m.selectNodeContents(a.current), m.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(m), a.current.focus();
       } else
         n();
     }, [c, d]);
     const p = useMemo(() => {
-      var x;
-      const m = ((x = o == null ? void 0 : o.tagName) == null ? void 0 : x.toLowerCase()) || "div";
+      var f;
+      const m = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
       return m === "button" ? "div" : m;
     }, [o]), u = useCallback(
       (m) => {
@@ -3550,12 +3578,12 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
         contentEditable: !0,
         className: `${((m = o == null ? void 0 : o.className) == null ? void 0 : m.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: (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));
+        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));
         },
-        onClick: (x) => {
-          x.stopPropagation(), x.preventDefault();
+        onClick: (f) => {
+          f.stopPropagation(), f.preventDefault();
         }
       };
     }, [o == null ? void 0 : o.className, o == null ? void 0 : o.style]);
@@ -3568,62 +3596,62 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: r }) => {
-    const n = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: x } = useLanguages(), [, f] = useSelectedBlockIds(), y = useRef(null), b = l, { blockContent: B, blockType: E } = useMemo(() => {
-      var _;
-      const v = o._type;
-      let N = o[n];
-      const S = getRegisteredChaiBlock(o._type);
-      return x && ((_ = S == null ? void 0 : S.i18nProps) == null ? void 0 : _.includes(n)) && has(o, `${n}-${x}`) && (N = get(o, `${n}-${x}`)), { blockContent: N, blockType: v };
-    }, [o, x]), A = useCallback(
-      (v) => {
-        var S;
-        const N = v || ((S = g.current) == null ? void 0 : S.innerText);
-        m([b], { [n]: N }), u(null), c(null), d(-1), f([]);
+    const n = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), k = useRef(null), b = l, { blockContent: A, blockType: B } = useMemo(() => {
+      var j;
+      const C = o._type;
+      let E = o[n];
+      const v = getRegisteredChaiBlock(o._type);
+      return f && ((j = v == null ? void 0 : v.i18nProps) == null ? void 0 : j.includes(n)) && has(o, `${n}-${f}`) && (E = get(o, `${n}-${f}`)), { blockContent: E, blockType: C };
+    }, [o, f]), _ = useCallback(
+      (C) => {
+        var v;
+        const E = C || ((v = g.current) == null ? void 0 : v.innerText);
+        m([b], { [n]: E }), u(null), c(null), d(-1), x([]);
       },
-      [b, m, c, f, x]
-    ), j = useDebouncedCallback(
-      (v) => {
-        m([b], { [n]: v });
+      [b, m, c, x, f]
+    ), N = useDebouncedCallback(
+      (C) => {
+        m([b], { [n]: C });
       },
-      [b, o, m, x],
+      [b, o, m, f],
       1e3
     ), w = useCallback(
-      (v) => {
-        v.preventDefault(), b && (y.current = b), A(), setTimeout(() => {
-          const N = y.current;
-          y.current = null, f([N]);
+      (C) => {
+        C.preventDefault(), b && (k.current = b), _(), setTimeout(() => {
+          const E = k.current;
+          k.current = null, x([E]);
         }, 100);
       },
-      [f, b, x]
+      [x, b, f]
     );
     useEffect(() => {
-      var k;
+      var S;
       if (!b) return;
-      const v = `[data-block-id="${b}"]`, N = i >= 0 ? `[data-block-index="${i}"]` : "", S = a.querySelector(`${v}${N}`);
-      S && ((k = S == null ? void 0 : S.classList) == null || k.add("sr-only"), u(S));
-    }, [b, E, a, i]);
-    const C = useMemo(() => p ? (h(), E === "RichText" ? /* @__PURE__ */ jsx(
+      const C = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", v = a.querySelector(`${C}${E}`);
+      v && ((S = v == null ? void 0 : v.classList) == null || S.add("sr-only"), u(v));
+    }, [b, B, a, i]);
+    const y = useMemo(() => p ? (h(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: B,
+        blockContent: A,
         editingElement: p,
-        onChange: j,
-        onClose: A,
+        onChange: N,
+        onClose: _,
         onEscape: w
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
         editorRef: g,
-        blockContent: B,
+        blockContent: A,
         editingElement: p,
-        onClose: A,
-        onChange: j,
+        onClose: _,
+        onChange: N,
         onEscape: w
       }
-    )) : null, [p, b, E, B, A, x]);
+    )) : null, [p, b, B, A, _, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      C,
+      y,
       r
     ] });
   },
@@ -3656,23 +3684,23 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
   blockAtom: r,
   children: n
 }) => {
-  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(r), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [h] = useHiddenBlockIds(), [m] = useAtom$1(dataBindingActiveAtom), x = get(c, "component", null), { index: f, key: y } = useContext(RepeaterContext), b = useMemo(
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(r), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [h] = useHiddenBlockIds(), [m] = useAtom$1(dataBindingActiveAtom), f = get(c, "component", null), { index: x, key: k } = useContext(RepeaterContext), b = useMemo(
     () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
-      index: f,
-      key: y
+      index: x,
+      key: k
     }) : applyLanguage(i, d, c),
-    [i, d, c, g, m, f, y]
-  ), B = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), E = useMemo(
+    [i, d, c, g, m, x, k]
+  ), A = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), B = useMemo(
     () => u(i._id, getBlockRuntimeProps(i._type)),
     [i._id, i._type, u, getBlockRuntimeProps]
-  ), A = useMemo(
+  ), _ = useMemo(
     () => ({
-      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": f },
+      blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": x },
       inBuilder: !0,
       lang: d || p,
       ...b,
+      ...A,
       ...B,
-      ...E,
       ...o
     }),
     [
@@ -3681,14 +3709,14 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       d,
       p,
       b,
+      A,
       B,
-      E,
       o
     ]
-  ), j = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
-  if (isNull(x) || h.includes(i._id)) return null;
-  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(x, {
-    ...A,
+  ), N = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]);
+  if (isNull(f) || h.includes(i._id)) return null;
+  let w = /* @__PURE__ */ jsx(Suspense, { children: createElement(f, {
+    ..._,
     children: n({
       _id: i._id,
       _type: i._type,
@@ -3700,8 +3728,8 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       ...i.globalBlock ? { partialBlockId: i.globalBlock } : ""
     })
   }) });
-  const C = a === i._id && (l === f || f < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: w }) : w;
-  return j ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: C }) : C;
+  const y = a === i._id && (l === x || x < 0) ? /* @__PURE__ */ jsx(WithBlockTextEditor, { block: i, children: w }) : w;
+  return N ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: y }) : y;
 }, PartialWrapper = ({ children: o, partialBlockId: r }) => {
   const n = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
     (d) => {
@@ -3741,7 +3769,7 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__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: h, repeaterItems: m, $repeaterItemsKey: x }) => g === "Repeater" ? isArray(m) && m.map((f, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) }, `${u}-${y}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, 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: h, repeaterItems: m, $repeaterItemsKey: f }) => g === "Repeater" ? isArray(m) && m.map((x, k) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: k, key: f }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) }, `${u}-${k}`)) : g === "GlobalBlock" || g === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : i(u) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: n, blocks: o, parent: c._id }) : null }) }, c._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -3809,14 +3837,14 @@ const CanvasEventsWatcher = () => {
 }, StaticCanvas = () => {
   const [o] = useCanvasDisplayWidth(), [, r] = useHighlightBlockId(), n = 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(
     (m) => {
-      i((x) => ({ ...x, width: m }));
+      i((f) => ({ ...f, width: m }));
     },
     [i]
   );
   useEffect(() => {
     if (!a.current) return;
-    const { clientWidth: m, clientHeight: x } = a.current;
-    i({ width: m, height: x });
+    const { clientWidth: m, clientHeight: f } = a.current;
+    i({ width: m, height: f });
   }, [a, o]);
   const h = useMemo(() => {
     let m = IframeInitialContent;
@@ -3866,7 +3894,7 @@ const CanvasEventsWatcher = () => {
 }, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-CJfScsxg.js")), CanvasArea = () => {
+] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-0HrsuGAE.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -3931,8 +3959,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: r, mode: n = "image" }) => {
-  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), h = async (x) => {
-    if (!x.trim()) {
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), h = async (f) => {
+    if (!f.trim()) {
       p(!1), g("Please enter a URL");
       return;
     }
@@ -3956,7 +3984,7 @@ const CanvasEventsWatcher = () => {
         {
           placeholder: m(`Enter ${n} URL`),
           value: a,
-          onChange: (x) => l(x.target.value),
+          onChange: (f) => l(f.target.value),
           onKeyUp: () => h(a)
         }
       ),
@@ -3997,16 +4025,16 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
     const h = isArray(g) ? first(g) : g;
     if (h) {
       r(h == null ? void 0 : h.url);
-      const m = h == null ? void 0 : h.width, x = h == null ? void 0 : h.height;
+      const m = h == null ? void 0 : h.width, f = h == null ? void 0 : h.height;
       if (i != null && i._id) {
-        const f = {
+        const x = {
           ...m && { width: m },
-          ...x && { height: x },
+          ...f && { height: f },
           ...h.description && { alt: h.description },
           ...h.id && { assetId: h.id }
         };
-        if (isEmpty(f)) return;
-        c([i._id], f);
+        if (isEmpty(x)) return;
+        c([i._id], x);
       }
     }
   }, p = useCallback(() => {
@@ -4050,14 +4078,14 @@ const ImagePickerField = ({ value: o, onChange: r, id: n, onBlur: a }) => {
 }, PathDropdown = ({ data: o, onSelect: r, dataType: n }) => {
   const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (h) => Array.isArray(h) ? "array" : typeof h == "object" && h !== null ? "object" : "value", p = React__default.useCallback(
     (h) => {
-      const m = (x) => n === "value" ? x === "value" || x === "object" : n === "array" ? x === "array" : x === n;
-      h.type === "object" ? (l((x) => [...x, h.key]), c(h.value)) : m(h.type) && r([...a, h.key].join("."), n);
+      const m = (f) => n === "value" ? f === "value" || f === "object" : n === "array" ? f === "array" : f === n;
+      h.type === "object" ? (l((f) => [...f, h.key]), c(h.value)) : m(h.type) && r([...a, h.key].join("."), n);
     },
     [a, r, n]
   ), u = React__default.useCallback(() => {
     if (a.length > 0) {
       const h = a.slice(0, -1);
-      l(h), c(h.reduce((m, x) => m[x], o));
+      l(h), c(h.reduce((m, f) => m[f], o));
     }
   }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([h, m]) => ({ key: h, value: m, type: d(m) })).filter((h) => !startsWith(h.key, REPEATER_PREFIX) && h.key.includes("/") ? !1 : n === "value" ? h.type === "value" || h.type === "object" : n === "array" ? h.type === "array" || h.type === "object" : n === "object" ? h.type === "object" : !0) : [], [i, n]);
   return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
@@ -4150,7 +4178,7 @@ const DataBindingSelector = ({
 }) => {
   const l = usePageExternalData(), i = useSelectedBlockHierarchy(), c = useSelectedBlock(), d = useMemo(() => {
     if (i.length === 1) return "";
-    const g = i.find((x) => x._type === "Repeater"), m = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
+    const g = i.find((f) => f._type === "Repeater"), m = get(g, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
     return `${REPEATER_PREFIX}${startsWith(m, COLLECTION_PREFIX) ? `${m}/${g._id}` : m}`;
   }, [i]), p = useMemo(() => first(get(l, d.replace(REPEATER_PREFIX, ""), [])), [d, l]), u = useCallback(
     (g, h) => {
@@ -4158,44 +4186,44 @@ const DataBindingSelector = ({
         r(`{{${g}}}`, {}, n);
         return;
       }
-      const m = (b) => /[.,!?;:]/.test(b), x = (b, B, E) => {
-        let A = "", j = "";
-        const w = B > 0 ? b[B - 1] : "", C = B < b.length ? b[B] : "";
-        return B > 0 && (w === "." || !m(w) && w !== " ") && (A = " "), B < b.length && !m(C) && C !== " " && (j = " "), {
-          text: A + E + j,
-          prefixLength: A.length,
-          suffixLength: j.length
+      const m = (b) => /[.,!?;:]/.test(b), f = (b, A, B) => {
+        let _ = "", N = "";
+        const w = A > 0 ? b[A - 1] : "", y = A < b.length ? b[A] : "";
+        return A > 0 && (w === "." || !m(w) && w !== " ") && (_ = " "), A < b.length && !m(y) && y !== " " && (N = " "), {
+          text: _ + B + N,
+          prefixLength: _.length,
+          suffixLength: N.length
         };
-      }, f = document.getElementById(n);
-      if (!f) return;
-      const y = document.getElementById(`chai-rte-${n}`) || document.getElementById(`chai-rte-modal-${n}`);
-      if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
-        const b = y.__chaiRTE;
+      }, x = document.getElementById(n);
+      if (!x) return;
+      const k = document.getElementById(`chai-rte-${n}`) || document.getElementById(`chai-rte-modal-${n}`);
+      if (k && (k.querySelector(".ProseMirror") || k.__chaiRTE)) {
+        const b = k.__chaiRTE;
         if (b) {
-          const B = `{{${g}}}`;
+          const A = `{{${g}}}`;
           b.commands.focus();
-          const { from: E, to: A } = b.state.selection;
-          if (E !== A)
-            b.chain().deleteSelection().insertContent(B).run();
+          const { from: B, to: _ } = b.state.selection;
+          if (B !== _)
+            b.chain().deleteSelection().insertContent(A).run();
           else {
-            const { state: w } = b, C = w.selection.from, v = w.doc.textBetween(Math.max(0, C - 1), C), N = w.doc.textBetween(C, Math.min(C + 1, w.doc.content.size));
+            const { state: w } = b, y = w.selection.from, C = w.doc.textBetween(Math.max(0, y - 1), y), E = w.doc.textBetween(y, Math.min(y + 1, w.doc.content.size));
+            let v = "";
+            y > 0 && C !== " " && !m(C) && (v = " ");
             let S = "";
-            C > 0 && v !== " " && !m(v) && (S = " ");
-            let k = "";
-            N && N !== " " && !m(N) && (k = " "), b.chain().insertContent(S + B + k).run();
+            E && E !== " " && !m(E) && (S = " "), b.chain().insertContent(v + A + S).run();
           }
           setTimeout(() => r(b.getHTML(), {}, n), 100);
           return;
         }
       } else {
-        const b = f, B = b.selectionStart || 0, E = b.value || "", A = b.selectionEnd || B;
-        if (A > B) {
-          const N = `{{${g}}}`, { text: S } = x(E, B, N), k = E.slice(0, B) + S + E.slice(A);
-          r(k, {}, n);
+        const b = x, A = b.selectionStart || 0, B = b.value || "", _ = b.selectionEnd || A;
+        if (_ > A) {
+          const E = `{{${g}}}`, { text: v } = f(B, A, E), S = B.slice(0, A) + v + B.slice(_);
+          r(S, {}, n);
           return;
         }
-        const w = `{{${g}}}`, { text: C } = x(E, B, w), v = E.slice(0, B) + C + E.slice(B);
-        r(v, {}, n);
+        const w = `{{${g}}}`, { text: y } = f(B, A, w), C = B.slice(0, A) + y + B.slice(A);
+        r(C, {}, n);
       }
     },
     [n, r, a, c == null ? void 0 : c._id, d]
@@ -4216,99 +4244,99 @@ const DataBindingSelector = ({
   pageTypes: r,
   onChange: n
 }) => {
-  var N;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (S, k) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [x, f] = useState([]), [y, b] = useState(-1), B = useRef(null), E = (N = r == null ? void 0 : r.find((S) => S.key === u)) == null ? void 0 : N.name;
+  var E;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, S) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), A = useRef(null), B = (E = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : E.name;
   useEffect(() => {
-    if (m(""), f([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const S = split(o, ":"), k = get(S, 1, "page") || "page";
-    g(k), (async () => {
-      const _ = await l(k, [get(S, 2, "page")]);
-      _ && Array.isArray(_) && m(get(_, [0, "name"], ""));
+    if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
+    const v = split(o, ":"), S = get(v, 1, "page") || "page";
+    g(S), (async () => {
+      const j = await l(S, [get(v, 2, "page")]);
+      j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const A = useDebouncedCallback(
-    async (S) => {
-      if (isEmpty(S))
-        f([]);
+  const _ = useDebouncedCallback(
+    async (v) => {
+      if (isEmpty(v))
+        x([]);
       else {
-        const k = await l(u, S);
-        f(k);
+        const S = await l(u, v);
+        x(S);
       }
       c(!1), b(-1);
     },
     [u],
     300
-  ), j = (S) => {
-    const k = ["pageType", u, S.id];
-    k[1] && (n(k.join(":")), m(S.name), p(!1), f([]), b(-1));
-  }, w = (S) => {
-    switch (S.key) {
+  ), N = (v) => {
+    const S = ["pageType", u, v.id];
+    S[1] && (n(S.join(":")), m(v.name), p(!1), x([]), b(-1));
+  }, w = (v) => {
+    switch (v.key) {
       case "ArrowDown":
-        S.preventDefault(), b((k) => k < x.length - 1 ? k + 1 : k);
+        v.preventDefault(), b((S) => S < f.length - 1 ? S + 1 : S);
         break;
       case "ArrowUp":
-        S.preventDefault(), b((k) => k > 0 ? k - 1 : k);
+        v.preventDefault(), b((S) => S > 0 ? S - 1 : S);
         break;
       case "Enter":
-        if (S.preventDefault(), x.length === 0) return;
-        y >= 0 && j(x[y]);
+        if (v.preventDefault(), f.length === 0) return;
+        k >= 0 && N(f[k]);
         break;
       case "Escape":
-        S.preventDefault(), C();
+        v.preventDefault(), y();
         break;
     }
   };
   useEffect(() => {
-    if (y >= 0 && B.current) {
-      const S = B.current.children[y];
-      S == null || S.scrollIntoView({ block: "nearest" });
+    if (k >= 0 && A.current) {
+      const v = A.current.children[k];
+      v == null || v.scrollIntoView({ block: "nearest" });
     }
-  }, [y]);
-  const C = () => {
-    m(""), f([]), b(-1), p(!1), n("");
-  }, v = (S) => {
-    m(S), p(!isEmpty(S)), c(!0), A(S);
+  }, [k]);
+  const y = () => {
+    m(""), x([]), b(-1), p(!1), n("");
+  }, C = (v) => {
+    m(v), p(!isEmpty(v)), c(!0), _(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (S) => g(S.target.value), children: map(r, (S) => /* @__PURE__ */ jsx("option", { value: S.key, children: S.name }, S.key)) }),
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (v) => g(v.target.value), children: map(r, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
     u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: h,
-          onChange: (S) => v(S.target.value),
+          onChange: (v) => C(v.target.value),
           onKeyDown: w,
-          placeholder: a(`Search ${E ?? ""}`),
+          placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__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" }) }) })
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsx("button", { onClick: y, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(x) || d && isEmpty(x)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (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: [
       /* @__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(x) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       h,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: B, children: map(x == null ? void 0 : x.slice(0, 20), (S, k) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(f == null ? void 0 : f.slice(0, 20), (v, S) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => j(S),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(S.id) ? "bg-blue-200" : k === y ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => N(v),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : S === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          S.name,
+          v.name,
           " ",
-          S.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            S.slug,
+            v.slug,
             " )"
           ] })
         ]
       },
-      S.id
+      v.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: r, onChange: n, name: a }) => {
@@ -4608,15 +4636,15 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     if (!u) return;
     const m = `{{${h}}}`;
     u.commands.focus();
-    const { from: x, to: f } = u.state.selection;
-    if (x !== f)
+    const { from: f, to: x } = u.state.selection;
+    if (f !== x)
       u.chain().deleteSelection().insertContent(m).run();
     else {
-      const { state: b } = u, B = b.selection.from, E = b.doc.textBetween(Math.max(0, B - 1), B), A = b.doc.textBetween(B, Math.min(B + 1, b.doc.content.size));
-      let j = "";
-      B > 0 && E !== " " && !/[.,!?;:]/.test(E) && (j = " ");
+      const { state: b } = u, A = b.selection.from, B = b.doc.textBetween(Math.max(0, A - 1), A), _ = b.doc.textBetween(A, Math.min(A + 1, b.doc.content.size));
+      let N = "";
+      A > 0 && B !== " " && !/[.,!?;:]/.test(B) && (N = " ");
       let w = "";
-      A && A !== " " && !/[.,!?;:]/.test(A) && (w = " "), u.chain().insertContent(j + m + w).run();
+      _ && _ !== " " && !/[.,!?;:]/.test(_) && (w = " "), u.chain().insertContent(N + m + w).run();
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: (h) => !h && r(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-h-[90vh] overflow-y-auto sm:max-w-[800px]", children: [
@@ -4655,13 +4683,13 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       })
     ],
     content: n || "",
-    onUpdate: ({ editor: x }) => {
-      const f = x.getHTML();
-      a(f), c || u(f);
+    onUpdate: ({ editor: f }) => {
+      const x = f.getHTML();
+      a(x), c || u(x);
     },
-    onBlur: ({ editor: x }) => {
-      const f = x.getHTML();
-      l(o, f);
+    onBlur: ({ editor: f }) => {
+      const x = f.getHTML();
+      l(o, x);
     },
     editorProps: {
       attributes: {
@@ -4674,8 +4702,8 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }, [g]), useEffect(() => {
     u(n || "");
   }, [n]);
-  const h = (x) => {
-    a(x);
+  const h = (f) => {
+    a(f);
   }, m = () => {
     d(!1), g && g.commands.setContent(p);
   };
@@ -4708,25 +4736,25 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
     u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && r({ ...o, currentSlide: get(u, "0._id") });
   }, [o, u]);
   const h = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const y = (f + 1) % u.length, b = get(u, [y, "_id"]);
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const k = (x + 1) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
   }, m = () => {
-    const f = findIndex(u, { _id: g });
-    if (f > -1) {
-      const y = (f - 1 + u.length) % u.length, b = get(u, [y, "_id"]);
+    const x = findIndex(u, { _id: g });
+    if (x > -1) {
+      const k = (x - 1 + u.length) % u.length, b = get(u, [k, "_id"]);
       if (!b) return;
       r({ ...o, currentSlide: b }), c([b]);
     }
-  }, x = () => {
-    const f = i(
+  }, f = () => {
+    const x = i(
       { styles: "#styles:,h-full w-full min-w-full", type: "Slide" },
       p == null ? void 0 : p._id
-    ), y = f == null ? void 0 : f._id;
-    y && (r({ ...o, currentSlide: y }), c([y]));
+    ), k = x == null ? void 0 : x._id;
+    k && (r({ ...o, currentSlide: k }), c([k]));
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5 px-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 pb-2 text-[12px]", children: [
@@ -4743,7 +4771,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
       /* @__PURE__ */ jsxs(
         "button",
         {
-          onClick: x,
+          onClick: f,
           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]" }),
@@ -4804,9 +4832,9 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
             value: o == null ? void 0 : o.autoplayInterval,
             className: "text-xs",
             pattern: "[0-9]*",
-            onChange: (f) => {
-              let y = f.target.value;
-              y.length && (y = y.replace("-", "")), r({ ...o, autoplayInterval: y });
+            onChange: (x) => {
+              let k = x.target.value;
+              k.length && (k = k.replace("-", "")), r({ ...o, autoplayInterval: k });
             }
           }
         )
@@ -4914,28 +4942,28 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   formData: g,
   onChange: h
 }) => {
-  const { selectedLang: m, fallbackLang: x, languages: f } = useLanguages(), y = useMemo(
-    () => isEmpty(f) ? "" : isEmpty(m) ? x : m,
-    [f, m, x]
-  ), b = useMemo(() => get(LANGUAGES, y, y), [y]), B = usePageExternalData(), E = useSelectedBlock(), A = useRegisteredChaiBlocks(), j = useMemo(
-    () => get(A, [E == null ? void 0 : E._type, "i18nProps"], []),
-    [A, E == null ? void 0 : E._type]
-  ), [w, C] = useState(null);
+  const { selectedLang: m, fallbackLang: f, languages: x } = useLanguages(), k = useMemo(
+    () => isEmpty(x) ? "" : isEmpty(m) ? f : m,
+    [x, m, f]
+  ), b = useMemo(() => get(LANGUAGES, k, k), [k]), A = usePageExternalData(), B = useSelectedBlock(), _ = useRegisteredChaiBlocks(), N = useMemo(
+    () => get(_, [B == null ? void 0 : B._type, "i18nProps"], []),
+    [_, B == null ? void 0 : B._type]
+  ), [w, y] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: a });
-  const N = j == null ? void 0 : j.includes(o.replace("root.", ""));
+  const E = N == null ? void 0 : N.includes(o.replace("root.", ""));
   if (u.type === "array") {
-    const S = w === o;
+    const v = w === o;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
       u.title && /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: o,
-          onClick: () => C(S ? null : o),
+          onClick: () => y(v ? null : o),
           className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
           children: [
-            S ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+            v ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx(List, { className: "h-3 w-3" }),
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: n }),
             " ",
@@ -4943,7 +4971,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           ]
         }
       ),
-      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${S ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+      (g == null ? void 0 : g.length) === 0 ? /* @__PURE__ */ jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxs("div", { className: `${v ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
         c,
         a,
         l,
@@ -4957,7 +4985,7 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
         /* @__PURE__ */ jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
           n,
           " ",
-          N && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+          E && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             b
           ] }),
@@ -4968,12 +4996,12 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
           /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
         ] }) })
       ] }),
-      !u.enum && !u.oneOf && B && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      !u.enum && !u.oneOf && A && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
         DataBindingSelector,
         {
           schema: u,
-          onChange: (S) => {
-            h(S, g, o);
+          onChange: (v) => {
+            h(v, g, o);
           },
           id: o,
           formData: g
@@ -5080,36 +5108,36 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), x = ({ formData: w }, C, v) => {
-    C && (c == null ? void 0 : c._id) === r._id && a([r._id], { [C]: get(w, C) }, v);
-  }, f = useCallback(
-    debounce(({ formData: w }, C, v) => {
-      x({ formData: w }, C, v), d(w);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: w }, y, C) => {
+    y && (c == null ? void 0 : c._id) === r._id && a([r._id], { [y]: get(w, y) }, C);
+  }, x = useCallback(
+    debounce(({ formData: w }, y, C) => {
+      f({ formData: w }, y, C), d(w);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), y = ({ formData: w }, C) => {
-    C && (n([r._id], { [C]: get(w, C) }), f({ formData: w }, C, { [C]: get(c, C) }));
-  }, b = ({ formData: w }, C) => {
-    C && (n([g._id], { [C]: get(w, C) }), f({ formData: w }, C, { [C]: get(c, C) }));
-  }, { schema: B, uiSchema: E } = useMemo(() => {
+  ), k = ({ formData: w }, y) => {
+    y && (n([r._id], { [y]: get(w, y) }), x({ formData: w }, y, { [y]: get(c, y) }));
+  }, b = ({ formData: w }, y) => {
+    y && (n([g._id], { [y]: get(w, y) }), x({ formData: w }, y, { [y]: get(c, y) }));
+  }, { schema: A, uiSchema: B } = useMemo(() => {
     const w = r == null ? void 0 : r._type;
     if (!w)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: C, uiSchema: v } = getBlockFormSchemas(w);
+      const { schema: y, uiSchema: C } = getBlockFormSchemas(w);
       if (w === "Repeater") {
-        const N = get(r, "repeaterItems", "");
-        startsWith(N, `{{${COLLECTION_PREFIX}`) ? (set(v, "filter", { "ui:widget": "collectionSelect" }), set(v, "sort", { "ui:widget": "collectionSelect" })) : (set(v, "filter", { "ui:widget": "hidden" }), set(v, "sort", { "ui:widget": "hidden" }));
+        const E = get(r, "repeaterItems", "");
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(C, "filter", { "ui:widget": "collectionSelect" }), set(C, "sort", { "ui:widget": "collectionSelect" })) : (set(C, "filter", { "ui:widget": "hidden" }), set(C, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: C, uiSchema: v };
+      return { schema: y, uiSchema: C };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [r]), { wrapperSchema: A, wrapperUiSchema: j } = useMemo(() => {
+  }, [r]), { wrapperSchema: _, wrapperUiSchema: N } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const w = g == null ? void 0 : g._type, { schema: C = {}, uiSchema: v = {} } = getBlockFormSchemas(w);
-    return { wrapperSchema: C, wrapperUiSchema: v };
+    const w = g == null ? void 0 : g._type, { schema: y = {}, uiSchema: C = {} } = getBlockFormSchemas(w);
+    return { wrapperSchema: y, wrapperUiSchema: C };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5137,52 +5165,52 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: b,
           formData: m,
-          schema: A,
-          uiSchema: j
+          schema: _,
+          uiSchema: N
         }
       ) })
     ] }),
-    isEmpty(B) ? null : /* @__PURE__ */ jsx(
+    isEmpty(A) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: r == null ? void 0 : r._id,
-        onChange: y,
+        onChange: k,
         formData: i,
-        schema: B,
-        uiSchema: E
+        schema: A,
+        uiSchema: B
       }
     )
   ] });
 }
 const BlockStylingProps = () => {
-  var x;
+  var f;
   const o = useSelectedBlock(), [r, n] = useSelectedStylingBlocks(), a = useRemoveClassesFromBlocks(), [l] = useSelectedBlockIds(), { t: i } = useTranslation();
   if (!o) return null;
   const c = Object.keys(o).filter(
-    (f) => typeof o[f] == "string" && o[f].startsWith("#styles:")
-  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (x = r[0]) == null ? void 0 : x.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, h = g ? g.split(" ").filter((f) => !isEmpty(f)) : [], m = (f) => find(r, (y) => y.prop === f);
+    (x) => typeof o[x] == "string" && o[x].startsWith("#styles:")
+  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (f = r[0]) == null ? void 0 : f.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, h = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], m = (x) => find(r, (k) => k.prop === x);
   return /* @__PURE__ */ jsx(Fragment, { children: p && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       i("Style element"),
       ":"
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (f) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: map(c, (x) => /* @__PURE__ */ jsxs(
       Badge,
       {
         className: "flex cursor-pointer items-center gap-1 pr-1",
-        variant: m(f) ? "default" : "secondary",
+        variant: m(x) ? "default" : "secondary",
         onClick: () => {
-          n([{ id: `${f}-${o._id}`, blockId: o._id, prop: f }]);
+          n([{ id: `${x}-${o._id}`, blockId: o._id, prop: x }]);
         },
         children: [
-          startCase(f),
+          startCase(x),
           /* @__PURE__ */ jsxs(DropdownMenu, { children: [
             /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 className: "ml-1 rounded-sm p-0.5 hover:bg-blue-300 hover:text-blue-600",
-                onClick: (y) => y.stopPropagation(),
+                onClick: (k) => k.stopPropagation(),
                 children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-3 w-3" })
               }
             ) }),
@@ -5192,7 +5220,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    d(f);
+                    d(x);
                   },
                   children: i("Reset style")
                 }
@@ -5211,7 +5239,7 @@ const BlockStylingProps = () => {
           ] })
         ]
       },
-      f
+      x
     )) }),
     /* @__PURE__ */ jsx("div", { className: "my-2 h-[1px] w-full bg-border" })
   ] }) });
@@ -5360,47 +5388,47 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [x, f] = useState(!1), [y, b] = useState(""), [B, E] = useState(!1), [A, j] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [k, b] = useState(""), [A, B] = useState(!1), [_, N] = useState(!1);
   useEffect(() => {
-    const { value: S, unit: k } = getClassValueAndUnit(i);
-    if (k === "") {
-      l(S), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
+    const { value: v, unit: S } = getClassValueAndUnit(i);
+    if (S === "") {
+      l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(k), l(k === "class" || isEmpty(S) ? "" : S);
+    m(S), l(S === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const w = useThrottledCallback((S) => c(S), [c], THROTTLE_TIME), C = useThrottledCallback((S) => c(S, !1), [c], THROTTLE_TIME), v = useCallback(
-    (S = !1) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
-        f(!0);
+  const w = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), y = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), C = useCallback(
+    (v = !1) => {
+      const S = getUserInputValues(`${a}`, u);
+      if (get(S, "error", !1)) {
+        x(!0);
         return;
       }
-      const _ = get(k, "unit") !== "" ? get(k, "unit") : h;
-      if (_ === "auto" || _ === "none") {
-        w(`${d}${_}`);
+      const j = get(S, "unit") !== "" ? get(S, "unit") : h;
+      if (j === "auto" || j === "none") {
+        w(`${d}${j}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
-      S ? C(L) : w(L);
+      const L = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      v ? y(L) : w(L);
     },
-    [w, C, a, h, d, u]
-  ), N = useCallback(
-    (S) => {
-      const k = getUserInputValues(`${a}`, u);
-      if (get(k, "error", !1)) {
-        f(!0);
+    [w, y, a, h, d, u]
+  ), E = useCallback(
+    (v) => {
+      const S = getUserInputValues(`${a}`, u);
+      if (get(S, "error", !1)) {
+        x(!0);
         return;
       }
-      if (S === "auto" || S === "none") {
-        w(`${d}${S}`);
+      if (v === "auto" || v === "none") {
+        w(`${d}${v}`);
         return;
       }
-      if (get(k, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const _ = get(k, "unit") !== "" ? get(k, "unit") : S, L = `${get(k, "value", "").startsWith("-") ? "-" : ""}${d}[${get(k, "value", "").replace("-", "")}${_ === "-" ? "" : _}]`;
+      const j = get(S, "unit") !== "" ? get(S, "unit") : v, L = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       w(L);
     },
     [w, a, d, u]
@@ -5418,40 +5446,40 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${B ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${A ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: h === "class",
-          onKeyPress: (S) => {
-            S.key === "Enter" && v();
+          onKeyPress: (v) => {
+            v.key === "Enter" && C();
           },
-          onKeyDown: (S) => {
-            if (S.keyCode !== 38 && S.keyCode !== 40)
+          onKeyDown: (v) => {
+            if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
-            S.preventDefault(), j(!0);
-            const k = parseInt$1(S.target.value);
-            let _ = isNaN$1(k) ? 0 : k;
-            S.keyCode === 38 && (_ += 1), S.keyCode === 40 && (_ -= 1);
-            const I = `${_}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
-            C(R);
+            v.preventDefault(), N(!0);
+            const S = parseInt$1(v.target.value);
+            let j = isNaN$1(S) ? 0 : S;
+            v.keyCode === 38 && (j += 1), v.keyCode === 40 && (j -= 1);
+            const T = `${j}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
+            y(R);
           },
-          onKeyUp: (S) => {
-            A && (S.preventDefault(), j(!1));
+          onKeyUp: (v) => {
+            _ && (v.preventDefault(), N(!1));
           },
-          onBlur: () => v(),
-          onChange: (S) => {
-            f(!1), l(S.target.value);
+          onBlur: () => C(),
+          onChange: (v) => {
+            x(!1), l(v.target.value);
           },
-          onClick: (S) => {
-            var k;
-            (k = S == null ? void 0 : S.target) == null || k.select(), n(!1);
+          onClick: (v) => {
+            var S;
+            (S = v == null ? void 0 : v.target) == null || S.select(), n(!1);
           },
-          value: B ? y : a,
+          value: A ? 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(
             " ",
-            x ? "border-red-500 text-red-500" : "border-foreground/20"
+            f ? "border-red-500 text-red-500" : "border-foreground/20"
           )
         }
       ),
@@ -5473,29 +5501,29 @@ const BlockStylingProps = () => {
           {
             units: u,
             current: h,
-            onSelect: (S) => {
-              n(!1), m(S), N(S);
+            onSelect: (v) => {
+              n(!1), m(v), E(v);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(h) !== -1 || B ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(h) !== -1 || A ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => E(!0),
-        onDragEnd: (S) => {
-          if (b(() => ""), E(!1), isEmpty(S))
+        onDragStart: () => B(!0),
+        onDragEnd: (v) => {
+          if (b(() => ""), B(!1), isEmpty(v))
             return;
-          const k = `${S}`, I = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
-          w(I);
+          const S = `${v}`, T = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${h === "-" ? "" : h}]`;
+          w(T);
         },
-        onDrag: (S) => {
-          if (isEmpty(S))
+        onDrag: (v) => {
+          if (isEmpty(v))
             return;
-          b(S);
-          const k = `${S}`, I = `${k.startsWith("-") ? "-" : ""}${d}[${k.replace("-", "")}${h === "-" ? "" : h}]`;
-          C(I);
+          b(v);
+          const S = `${v}`, T = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${h === "-" ? "" : h}]`;
+          y(T);
         },
         currentValue: a,
         unit: h,
@@ -5560,8 +5588,8 @@ const COLOR_PROP = {
 }, ColorChoice = ({ property: o, onChange: r }) => {
   const n = useCurrentClassByProperty(o), a = useMemo(() => get(n, "cls", ""), [n]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), h = get(u, "2", ""), m = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(y) ? (c([]), p({ color: y })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: y, shade: b.shade ? b.shade : "500" })));
+    (k) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(k) ? (c([]), p({ color: k })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((b) => ({ ...b, color: k, shade: b.shade ? b.shade : "500" })));
     },
     [c, p]
   );
@@ -5570,21 +5598,21 @@ const COLOR_PROP = {
       return c([]);
     c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]);
   }, [g]);
-  const x = useCallback(
+  const f = useCallback(
     // eslint-disable-next-line no-shadow
-    (y) => {
-      p({ color: g, shade: y });
+    (k) => {
+      p({ color: g, shade: k });
     },
     [g]
   );
   useEffect(() => {
     p({ color: "", shade: "" });
   }, [n]);
-  const { match: f } = useTailwindClassList();
+  const { match: x } = useTailwindClassList();
   return useEffect(() => {
     const b = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
-    f(o, b) && r(b, o);
-  }, [f, d, r, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+    x(o, b) && r(b, o);
+  }, [x, d, r, 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,
       {
@@ -5624,7 +5652,7 @@ const COLOR_PROP = {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: x, options: i }) })
+    /* @__PURE__ */ jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsx(DropDown, { rounded: !0, selected: h, disabled: !g || !l, onChange: f, 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" }) }),
@@ -5958,34 +5986,34 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), x = useRemoveClassesFromBlocks(), [f] = useSelectedBlockIds(), y = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
-    (C, v = !0) => {
-      const N = { dark: p, mq: g, mod: u, cls: C, property: l, fullCls: "" };
-      (p || u !== "") && (N.mq = "xs");
-      const S = generateFullClsName(N);
-      m(f, [S], v);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
+    (y, C = !0) => {
+      const E = { dark: p, mq: g, mod: u, cls: y, property: l, fullCls: "" };
+      (p || u !== "") && (E.mq = "xs");
+      const v = generateFullClsName(E);
+      m(x, [v], C);
     },
-    [f, p, g, u, l, m]
-  ), B = useCallback(() => {
-    x(f, [y], !0);
-  }, [f, y, x]), E = useMemo(() => canChangeClass(h, g), [h, g]);
+    [x, p, g, u, l, m]
+  ), A = useCallback(() => {
+    f(x, [k], !0);
+  }, [x, k, f]), B = useMemo(() => canChangeClass(h, g), [h, g]);
   useEffect(() => {
-    i(E, h);
-  }, [E, i, h]);
-  const [, , A] = useScreenSizeWidth(), j = useCallback(
-    (C) => {
-      A({
+    i(B, h);
+  }, [B, i, h]);
+  const [, , _] = useScreenSizeWidth(), N = useCallback(
+    (y) => {
+      _({
         xs: 400,
         sm: 640,
         md: 800,
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[C]);
+      }[y]);
     },
-    [A]
+    [_]
   ), w = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: E, canReset: h && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: B, canReset: h && w, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${h && !w ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -6005,7 +6033,7 @@ const COLOR_PROP = {
         n === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: b }),
         n === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: b })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${y ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => B(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : E && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${k ? "visible" : "invisible"}`, children: w ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => A(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6025,7 +6053,7 @@ const COLOR_PROP = {
             "button",
             {
               type: "button",
-              onClick: () => j(get(h, "mq")),
+              onClick: () => N(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
@@ -6054,23 +6082,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: r.map(({ label: m, key: x }, f) => /* @__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: r.map(({ label: m, key: f }, x) => /* @__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(x),
-                className: `relative cursor-pointer rounded-full p-1 text-[8px] ${x === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
+                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"}`,
                 children: [
                   React__default.createElement("div", {
-                    className: h(x) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                    className: h(f) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                   }),
-                  React__default.createElement(get(EDITOR_ICONS, x, BoxIcon), { className: "text-inherit w-3 h-3" })
+                  React__default.createElement(get(EDITOR_ICONS, f, BoxIcon), { className: "text-inherit w-3 h-3" })
                 ]
               }
             ) }),
             /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(m)) })
-          ] }) }, `option-${f}`)) })
+          ] }) }, `option-${x}`)) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "mt-0 flex items-center", children: /* @__PURE__ */ jsx(
           BlockStyle,
@@ -6225,19 +6253,19 @@ const COLOR_PROP = {
   canvas: r = !1,
   tooltip: n = !0
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), x = (b) => {
-    u.includes(b) ? u.length > 2 && g(u.filter((B) => B !== b)) : g((B) => [...B, b]);
-  }, f = (b) => {
+  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [d, p] = useSelectedBreakpoints(), u = d, g = p, { t: h } = useTranslation(), m = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (b) => {
+    u.includes(b) ? u.length > 2 && g(u.filter((A) => A !== b)) : g((A) => [...A, b]);
+  }, x = (b) => {
     r || l(b), c(b);
-  }, y = getBreakpointValue(r ? i : a).toLowerCase();
+  }, k = getBreakpointValue(r ? i : a).toLowerCase();
   return m.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(m, (b) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: r,
       ...b,
-      onClick: f,
+      onClick: x,
       key: b.breakpoint,
-      currentBreakpoint: y
+      currentBreakpoint: k
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
@@ -6249,9 +6277,9 @@ const COLOR_PROP = {
           openDelay: o,
           tooltip: n,
           ...b,
-          onClick: f,
+          onClick: x,
           key: b.breakpoint,
-          currentBreakpoint: y
+          currentBreakpoint: k
         }
       )
     ) }),
@@ -6264,7 +6292,7 @@ const COLOR_PROP = {
           DropdownMenuCheckboxItem,
           {
             disabled: b.breakpoint === "xs",
-            onCheckedChange: () => x(toUpper(b.breakpoint)),
+            onCheckedChange: () => f(toUpper(b.breakpoint)),
             checked: includes(u, toUpper(b.breakpoint)),
             children: h(b.title)
           },
@@ -6349,8 +6377,8 @@ const AskAIStyles = ({ blockId: o }) => {
     (m = d.current) == null || m.focus();
   }, []);
   const h = (m) => {
-    const { usage: x } = m || {};
-    !l && x && g(x), p.current = setTimeout(() => g(void 0), 1e4), l || c("");
+    const { usage: f } = m || {};
+    !l && f && g(f), 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: r("Ask AI") }),
@@ -6405,25 +6433,25 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var I;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [x, f] = useState(""), y = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, y, "")), B = b.split(" ").filter((L) => !isEmpty(L)), E = () => {
-    const L = x.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    u(h, L, !0), f("");
-  }, [A, j] = useState([]), w = ({ value: L }) => {
-    const R = L.trim().toLowerCase(), T = R.match(/.+:/g);
+  var T;
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), k = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), A = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
+    const L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    u(h, L, !0), x("");
+  }, [_, N] = useState([]), w = ({ value: L }) => {
+    const R = L.trim().toLowerCase(), I = R.match(/.+:/g);
     let D = [];
-    if (T && T.length > 0) {
-      const [O] = T, P = R.replace(O, "");
+    if (I && I.length > 0) {
+      const [O] = I, P = R.replace(O, "");
       D = i.search(P).map((M) => ({
         ...M,
         item: { ...M.item, name: O + M.item.name }
       }));
     } else
       D = i.search(R);
-    return j(map(D, "item"));
-  }, C = () => {
-    j([]);
-  }, v = (L) => L.name, N = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), S = useMemo(
+    return N(map(D, "item"));
+  }, y = () => {
+    N([]);
+  }, C = (L) => L.name, E = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6431,36 +6459,36 @@ function ManualClasses() {
       autoCapitalize: "off",
       spellCheck: !1,
       placeholder: c("Enter classes separated by space"),
-      value: x,
+      value: f,
       onFocus: (L) => {
         setTimeout(() => {
           L.target && L.target.select();
         }, 0);
       },
       onKeyDown: (L) => {
-        L.key === "Enter" && x.trim() !== "" && E();
+        L.key === "Enter" && f.trim() !== "" && B();
       },
-      onChange: (L, { newValue: R }) => f(R),
+      onChange: (L, { newValue: R }) => x(R),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
-    [x, c, o]
-  ), k = (L) => {
+    [f, c, o]
+  ), S = (L) => {
     debugger;
     const R = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(h, [L]), u(h, R, !0), n(""), l(-1);
-  }, _ = () => {
+  }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
       return;
     }
-    navigator.clipboard.writeText(B.join(" ")), toast.success(c("Classes copied to clipboard"));
+    navigator.clipboard.writeText(A.join(" ")), toast.success(c("Classes copied to clipboard"));
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-x-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
         /* @__PURE__ */ jsx("span", { children: c("Classes") }),
         /* @__PURE__ */ jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: _, className: "cursor-pointer" }) }),
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
           /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
         ] })
       ] }),
@@ -6476,12 +6504,12 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: A,
+          suggestions: _,
           onSuggestionsFetchRequested: w,
-          onSuggestionsClearRequested: C,
-          getSuggestionValue: v,
-          renderSuggestion: N,
-          inputProps: S,
+          onSuggestionsClearRequested: y,
+          getSuggestionValue: C,
+          renderSuggestion: E,
+          inputProps: v,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6497,29 +6525,29 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: E,
-          disabled: x.trim() === "",
+          onClick: B,
+          disabled: f.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: B.map(
+    /* @__PURE__ */ jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: A.map(
       (L, R) => a === R ? /* @__PURE__ */ jsx(
         "input",
         {
           ref: o,
           value: r,
-          onChange: (T) => n(T.target.value),
+          onChange: (I) => n(I.target.value),
           onBlur: () => {
-            k(L);
+            S(L);
           },
-          onKeyDown: (T) => {
-            T.key === "Enter" && k(L);
+          onKeyDown: (I) => {
+            I.key === "Enter" && S(L);
           },
-          onFocus: (T) => {
+          onFocus: (I) => {
             setTimeout(() => {
-              T.target.select();
+              I.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -6529,7 +6557,7 @@ function ManualClasses() {
         "button",
         {
           onDoubleClick: () => {
-            f(L), g(h, [L]), setTimeout(() => {
+            x(L), g(h, [L]), setTimeout(() => {
               o.current && o.current.focus();
             }, 10);
           },
@@ -6683,10 +6711,10 @@ function BlockStyling() {
       const g = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let m = parseFloat(i.dragStartValue);
       m = isNaN(m) ? 0 : m;
-      let x = MAPPER[i.dragUnit];
-      (startsWith(h, "scale") || h === "opacity") && (x = 10);
-      let y = (i.dragStartY - u.pageY) / x + m;
-      g && y < 0 && (y = 0), h === "opacity" && y > 1 && (y = 1), i.onDrag(`${y}`), l(`${y}`);
+      let f = MAPPER[i.dragUnit];
+      (startsWith(h, "scale") || h === "opacity") && (f = 10);
+      let k = (i.dragStartY - u.pageY) / f + m;
+      g && k < 0 && (k = 0), h === "opacity" && k > 1 && (k = 1), i.onDrag(`${k}`), l(`${k}`);
     },
     [i],
     50
@@ -6729,12 +6757,12 @@ const CoreBlock = ({
 }) => {
   const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), m = () => {
     if (has(o, "blocks")) {
-      const y = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(y), n || null, a);
+      const k = isFunction(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(k), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, x = useFeature("dnd"), { t: f } = useTranslation();
+  }, f = useFeature("dnd"), { t: x } = useTranslation();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
       "button",
@@ -6742,20 +6770,20 @@ const CoreBlock = ({
         disabled: r,
         onClick: m,
         type: "button",
-        onDragStart: (y) => {
-          y.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), y.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+        onDragStart: (k) => {
+          k.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), k.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
             g([]), h();
           }, 200);
         },
-        draggable: x ? "true" : "false",
+        draggable: f ? "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(f(d || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: f(d || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -6819,7 +6847,22 @@ const CoreBlock = ({
 }, shouldAddText = (o, r) => o.children.length === 1 && includes(
   ["Heading", "Paragraph", "Span", "ListItem", "Button", "Label", "TableCell", "Link", "RichText"],
   r._type
-), getTextContent = (o) => o.map((r) => r.type === "text" ? get(r, "content", "") : isEmpty(r.children) ? "" : getTextContent(r.children)).join(""), getSanitizedValue = (o) => o === null ? "" : o, getAttrs = (o) => {
+), getTextContent = (o) => o.map((r) => r.type === "text" ? get(r, "content", "") : isEmpty(r.children) ? "" : getTextContent(r.children)).join(""), getSanitizedValue = (o) => o === null ? "" : o, getHeightAndWidthFromClass = (o) => {
+  const r = compact(map(o.split(/\s+/), trim)), n = find(r, (d) => /^w-/.test(d)), a = find(r, (d) => /^h-/.test(d));
+  if (!a || !n) return { height: "", width: "" };
+  const l = (d) => {
+    if (!d) return;
+    const p = d.match(/^[wh]-(?:\[(.*?)\]|(.+))$/);
+    if (!p) return;
+    if (p[1]) return p[1];
+    const u = p[2];
+    return /^\d+(\.\d+)?$/.test(u) ? `${Number(u) * 4}px` : u === "auto" || includes(u, "%") ? u : "16px";
+  }, i = l(n), c = l(a);
+  return {
+    width: includes(i, "px") ? i : "16px",
+    height: includes(c, "px") ? c : "16px"
+  };
+}, getAttrs = (o) => {
   if (o.tagName === "svg") return {};
   const r = {}, n = ATTRIBUTE_MAP[o.tagName] || {}, a = o.attributes;
   return forEach(a, ({ key: l, value: i }) => {
@@ -6943,21 +6986,21 @@ const CoreBlock = ({
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var h, m, x, f, y, b, B, E;
+  var h, m, f, x, k, b, A, B, _, N;
   if (n.type === "comment") return [];
   let a = { _id: generateUUID() };
   if (r && (a._parent = r.block._id), n.type === "text")
     return isEmpty(get(n, "content", "")) ? [] : r && shouldAddText(r.node, r.block) ? (set(r, "block.content", get(n, "content", "")), []) : { ...a, _type: "Text", content: get(n, "content", "") };
   const l = get(n, "attributes", []), i = l.find(
-    (A) => A.key === "data-chai-richtext" || A.key === "chai-richtext"
+    (w) => w.key === "data-chai-richtext" || w.key === "chai-richtext"
   ), c = l.find(
-    (A) => A.key === "data-chai-lightbox" || A.key === "chai-lightbox"
+    (w) => w.key === "data-chai-lightbox" || w.key === "chai-lightbox"
   ), d = l.find(
-    (A) => A.key === "data-chai-dropdown" || A.key === "chai-dropdown"
+    (w) => w.key === "data-chai-dropdown" || w.key === "chai-dropdown"
   ), p = l.find(
-    (A) => A.key === "data-chai-dropdown-button" || A.key === "chai-dropdown-button"
+    (w) => w.key === "data-chai-dropdown-button" || w.key === "chai-dropdown-button"
   ), u = l.find(
-    (A) => A.key === "data-chai-dropdown-content" || A.key === "chai-dropdown-content"
+    (w) => w.key === "data-chai-dropdown-content" || w.key === "chai-dropdown-content"
   );
   if (a = {
     ...a,
@@ -6965,13 +7008,13 @@ const CoreBlock = ({
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const A = n.attributes.find((j) => includes(NAME_ATTRIBUTES, j.key));
-    A && (a._name = A.value);
+    const w = n.attributes.find((y) => includes(NAME_ATTRIBUTES, y.key));
+    w && (a._name = w.value);
   }
   if (i)
     return a.content = stringify(n.children), has(a, "styles_attrs.data-chai-richtext") && delete a.styles_attrs["data-chai-richtext"], has(a, "styles_attrs.chai-richtext") && delete a.styles_attrs["chai-richtext"], [a];
   if (c) {
-    const A = [
+    const w = [
       "data-chai-lightbox",
       "chai-lightbox",
       "data-vbtype",
@@ -6983,44 +7026,50 @@ const CoreBlock = ({
     ];
     a = {
       ...a,
-      href: ((h = l.find((j) => j.key === "href")) == null ? void 0 : h.value) || "",
-      hrefType: ((m = l.find((j) => j.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
-      autoplay: ((x = l.find((j) => j.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((y = (f = l.find((j) => j.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : y.replace("px", "")) || "",
-      backdropColor: ((b = l.find((j) => j.key === "data-overlay")) == null ? void 0 : b.value) || "",
-      galleryName: ((B = l.find((j) => j.key === "data-gall")) == null ? void 0 : B.value) || ""
-    }, forEach(A, (j) => {
-      has(a, `styles_attrs.${j}`) && delete a.styles_attrs[j];
+      href: ((h = l.find((y) => y.key === "href")) == null ? void 0 : h.value) || "",
+      hrefType: ((m = l.find((y) => y.key === "data-vbtype")) == null ? void 0 : m.value) || "video",
+      autoplay: ((f = l.find((y) => y.key === "data-autoplay")) == null ? void 0 : f.value) === "true" ? "true" : "false",
+      maxWidth: ((k = (x = l.find((y) => y.key === "data-maxwidth")) == null ? void 0 : x.value) == null ? void 0 : k.replace("px", "")) || "",
+      backdropColor: ((b = l.find((y) => y.key === "data-overlay")) == null ? void 0 : b.value) || "",
+      galleryName: ((A = l.find((y) => y.key === "data-gall")) == null ? void 0 : A.value) || ""
+    }, forEach(w, (y) => {
+      has(a, `styles_attrs.${y}`) && delete a.styles_attrs[y];
     });
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const A = filter(n.children || [], (w) => (w == null ? void 0 : w.tagName) !== "span");
-    a.content = getTextContent(A);
-    const j = find(
+    const w = filter(n.children || [], (C) => (C == null ? void 0 : C.tagName) !== "span");
+    a.content = getTextContent(w);
+    const y = find(
       n.children || [],
-      (w) => (w == null ? void 0 : w.tagName) === "span" && some(w.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg")
+      (C) => (C == null ? void 0 : C.tagName) === "span" && some(C.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg")
     );
-    if (j) {
-      const w = find(j.children || [], (C) => (C == null ? void 0 : C.tagName) === "svg");
-      if (w) {
-        a.icon = stringify([w]);
-        const { height: C, width: v } = getSvgDimensions(w, "16px", "16px");
-        a.iconHeight = C, a.iconWidth = v;
+    if (y) {
+      const C = find(y.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg");
+      if (C) {
+        a.icon = stringify([C]);
+        const { height: E, width: v } = getSvgDimensions(C, "16px", "16px");
+        a.iconHeight = E, a.iconWidth = v;
       }
     }
     return [a];
   }
   if (a._type === "Input") {
-    const A = a.inputType || "text";
-    A === "checkbox" ? set(a, "_type", "Checkbox") : A === "radio" && set(a, "_type", "Radio");
+    const w = a.inputType || "text";
+    w === "checkbox" ? set(a, "_type", "Checkbox") : w === "radio" && set(a, "_type", "Radio");
   } else if (n.tagName === "video" || n.tagName === "iframe") {
-    const A = stringify([n]);
-    return hasVideoEmbed(A) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(A)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = A, [a];
+    const w = stringify([n]);
+    return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (n.tagName === "svg") {
-    const A = find(n.attributes, { key: "height" }), j = find(n.attributes, { key: "width" }), w = get(A, "value") ? `[${get(A, "value")}px]` : "24px", C = get(j, "value") ? `[${get(j, "value")}px]` : "24px", v = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${w}`, v)}`.trim(), n.attributes = filter(n.attributes, (N) => !includes(["style", "width", "height", "class"], N.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((E = r.block) == null ? void 0 : E._type) === "Select")
+    const w = get(find(n.attributes, { key: "class" }), "value", ""), { height: y, width: C } = getHeightAndWidthFromClass(w);
+    if (y && C)
+      a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${y}`, w)}`.trim(), a.height = y == null ? void 0 : y.replace("px", ""), a.width = C == null ? void 0 : C.replace("px", "");
+    else {
+      const E = (B = find(n.attributes, { key: "height" })) == null ? void 0 : B.value, v = (_ = find(n.attributes, { key: "width" })) == null ? void 0 : _.value;
+      E && v ? (a.styles = `${STYLES_KEY}, ${cn$2(`w-[${v}px] h-[${E}px]`, w)}`.trim(), a.height = E, a.width = v) : a.styles = `${STYLES_KEY}, ${cn$2("w-full h-full", w)}`.trim();
+    }
+    return n.attributes = filter(n.attributes, (E) => !includes(["style", "width", "height", "class"], E.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((N = r.block) == null ? void 0 : N._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -7028,10 +7077,19 @@ const CoreBlock = ({
   const g = traverseNodes(n.children, { block: a, node: n });
   return [a, ...g];
 }), getSvgDimensions = (o, r, n) => {
-  const a = get(o, "attributes", []), l = find(a, { key: "height" }), i = find(a, { key: "width" });
+  var p, u;
+  const a = get(o, "attributes", []), { height: l, width: i } = getHeightAndWidthFromClass(
+    get(find(a, { key: "class" }), "value", "")
+  );
+  if (l && i)
+    return {
+      height: `[${l}px]`,
+      width: `[${i}px]`
+    };
+  const c = (p = find(a, { key: "height" })) == null ? void 0 : p.value, d = (u = find(a, { key: "width" })) == null ? void 0 : u.value;
   return {
-    height: get(l, "value") ? `[${get(l, "value")}px]` : n,
-    width: get(i, "value") ? `[${get(i, "value")}px]` : r
+    height: c ? `[${c}px]` : n,
+    width: d ? `[${d}px]` : r
   };
 }, getSanitizedHTML = (o) => {
   o = o.replace(/(\w+)=\\?"(.*?)\\?"/g, (a, l, i) => {
@@ -7127,18 +7185,18 @@ const registerChaiLibrary = (o, r) => {
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (r == null ? void 0 : r.getBlock) || (() => []), [r]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), x = useFeature("dnd"), [, f] = useAtom$1(draggedBlockAtom), y = (E) => {
-    const A = has(E, "styles_attrs.data-page-section");
-    return E._type === "Box" && A;
+  const [l, i] = useState(!1), c = useMemo(() => (r == null ? void 0 : r.getBlock) || (() => []), [r]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), h = get(o, "name", get(o, "label")), m = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), k = (B) => {
+    const _ = has(B, "styles_attrs.data-page-section");
+    return B._type === "Box" && _;
   }, b = useCallback(
-    async (E) => {
-      if (E.stopPropagation(), has(o, "component")) {
+    async (B) => {
+      if (B.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      let A = await c({ library: r, block: o });
-      typeof A == "string" && (A = getBlocksFromHTML(A)), isEmpty(A) || p(syncBlocksWithDefaults(A), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      let _ = await c({ library: r, block: o });
+      typeof _ == "string" && (_ = getBlocksFromHTML(_)), isEmpty(_) || p(syncBlocksWithDefaults(_), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
   );
@@ -7148,20 +7206,20 @@ const registerChaiLibrary = (o, r) => {
       {
         onClick: l ? () => {
         } : b,
-        draggable: x ? "true" : "false",
-        onDragStart: async (E) => {
-          const A = await c({ library: r, block: o });
-          let j = n;
-          if (y(first(A)) && (j = null), !isEmpty(A)) {
-            const w = { blocks: A, uiLibrary: !0, parent: j };
-            if (E.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
-              const C = new Image();
-              C.src = o.preview, C.onload = () => {
-                E.dataTransfer.setDragImage(C, 0, 0);
+        draggable: f ? "true" : "false",
+        onDragStart: async (B) => {
+          const _ = await c({ library: r, block: o });
+          let N = n;
+          if (k(first(_)) && (N = null), !isEmpty(_)) {
+            const w = { blocks: _, uiLibrary: !0, parent: N };
+            if (B.dataTransfer.setData("text/plain", JSON.stringify(w)), o.preview) {
+              const y = new Image();
+              y.src = o.preview, y.onload = () => {
+                B.dataTransfer.setDragImage(y, 0, 0);
               };
             } else
-              E.dataTransfer.setDragImage(new Image(), 0, 0);
-            f(w), setTimeout(() => {
+              B.dataTransfer.setDragImage(new Image(), 0, 0);
+            x(w), setTimeout(() => {
               u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
@@ -7187,39 +7245,39 @@ const registerChaiLibrary = (o, r) => {
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((k) => k.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), x = useRef(null);
+  const [n, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((S) => S.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
   useEffect(() => {
-    c && c.length > 0 && (x.current = new Fuse(c, {
+    c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
       threshold: 0.4,
       ignoreLocation: !0
     }));
   }, [c]), useEffect(() => {
-    if (!u.trim() || !x.current) {
+    if (!u.trim() || !f.current) {
       m([]);
       return;
     }
-    const k = x.current.search(u).map((_) => _.item);
-    m(k);
+    const S = f.current.search(u).map((j) => j.item);
+    m(S);
   }, [u]);
-  const f = u.trim() && !isEmpty(h) ? h : c, y = groupBy(f, "group"), [b, B] = useState(null);
+  const x = u.trim() && !isEmpty(h) ? h : c, k = groupBy(x, "group"), [b, A] = useState(null);
   useEffect(() => {
-    if (isEmpty(keys(y))) {
-      B(null);
+    if (isEmpty(keys(k))) {
+      A(null);
       return;
     }
-    if (!b || !y[b]) {
-      B(first(keys(y)));
+    if (!b || !k[b]) {
+      A(first(keys(k)));
       return;
     }
-  }, [y, b]);
-  const E = get(y, b, []), A = useRef(null), { t: j } = useTranslation(), w = (k) => {
-    A.current && (clearTimeout(A.current), A.current = null), A.current = setTimeout(() => {
-      A.current && B(k);
+  }, [k, b]);
+  const B = get(k, b, []), _ = useRef(null), { t: N } = useTranslation(), w = (S) => {
+    _.current && (clearTimeout(_.current), _.current = null), _.current = setTimeout(() => {
+      _.current && A(S);
     }, 400);
-  }, C = () => {
+  }, y = () => {
     i != null && i.id && p(i.id);
-  }, v = () => {
+  }, C = () => {
     g("");
   };
   if (d)
@@ -7227,23 +7285,23 @@ const registerChaiLibrary = (o, r) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const N = filter(E, (k, _) => _ % 2 === 0), S = filter(E, (k, _) => _ % 2 === 1);
+  const E = filter(B, (S, j) => j % 2 === 0), v = filter(B, (S, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
       /* @__PURE__ */ jsx(
         Input$1,
         {
-          placeholder: j("Search blocks..."),
+          placeholder: N("Search blocks..."),
           value: u,
-          onChange: (k) => g(k.target.value),
+          onChange: (S) => g(S.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: v,
+          onClick: C,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
@@ -7253,60 +7311,60 @@ const registerChaiLibrary = (o, r) => {
       /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full w-60 min-w-60 max-w-60 flex-col gap-1 px-1 pr-2", children: [
         /* @__PURE__ */ jsx(UILibrariesSelect, { library: i == null ? void 0 : i.id, setLibrary: a, uiLibraries: l }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: j("Groups") }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: N("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: j("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm", children: j("Failed to load the UI library. Try again") }),
-            /* @__PURE__ */ jsxs(Button, { onClick: C, variant: "outline", size: "sm", className: "gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("Failed to load the UI library. Try again") }),
+            /* @__PURE__ */ jsxs(Button, { onClick: y, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
-              j("Retry")
+              N("Retry")
             ] })
-          ] }) }) : map(y, (k, _) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(k, (S, j) => /* @__PURE__ */ jsxs(
             "div",
             {
-              onMouseEnter: () => w(_),
-              onMouseLeave: () => clearTimeout(A.current),
+              onMouseEnter: () => w(j),
+              onMouseLeave: () => clearTimeout(_.current),
               role: "button",
-              onClick: () => B(_),
+              onClick: () => A(j),
               className: cn$2(
                 "flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-sm text-foreground transition-all ease-in-out hover:bg-gray-200 dark:hover:bg-gray-800",
-                _ === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
+                j === b ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { children: capitalize(j(_.toLowerCase())) }),
+                /* @__PURE__ */ jsx("span", { children: capitalize(N(j.toLowerCase())) }),
                 /* @__PURE__ */ jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            _
+            j
           )) })
         ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => A.current ? clearTimeout(A.current) : null,
+          onMouseEnter: () => _.current ? clearTimeout(_.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(E) && !isEmpty(y) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: j("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: N.map((k, _) => /* @__PURE__ */ jsx(
+            isEmpty(B) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((S, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: k,
+                  block: S,
                   library: i
                 },
-                `block-${_}`
+                `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: S.map((k, _) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((S, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: k,
+                  block: S,
                   library: i
                 },
-                `block-second-${_}`
+                `block-second-${j}`
               )) })
             ] }),
             /* @__PURE__ */ jsx("br", {}),
@@ -7342,25 +7400,25 @@ const registerChaiLibrary = (o, r) => {
           error: c
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
-        const m = Object.entries(a).map(([f, y]) => {
-          const b = y, B = b.type || "partial", E = formatReadableName(B);
+        const m = Object.entries(a).map(([x, k]) => {
+          const b = k, A = b.type || "partial", B = formatReadableName(A);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
-            label: formatReadableName(b.name || f),
+            label: formatReadableName(b.name || x),
             description: b.description || "",
             icon: Globe,
-            group: E,
+            group: B,
             // Use formatted type as group
             category: "partial",
-            partialBlockId: f,
+            partialBlockId: x,
             // Store the original ID as partialBlockId
             _name: b.name
           };
-        }), x = uniq(map(m, "group"));
+        }), f = uniq(map(m, "group"));
         p({
           blocks: m,
-          groups: x,
+          groups: f,
           isLoading: !1,
           error: null
         }), g(!0);
@@ -7405,44 +7463,44 @@ const registerChaiLibrary = (o, r) => {
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, r) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...r });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, 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), h = (S = find(c, (k) => k._id === n)) == null ? void 0 : S._type, [m, x] = useState("all"), [f, y] = useState(null), b = useRef(null);
+  var v;
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (v = find(c, (S) => S._id === n)) == null ? void 0 : v._type, [m, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
   useEffect(() => {
-    const k = setTimeout(() => {
-      var _;
-      (_ = u.current) == null || _.focus();
+    const S = setTimeout(() => {
+      var j;
+      (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(k);
+    return () => clearTimeout(S);
   }, [g]), useEffect(() => {
-    d && (x("all"), y(null));
-  }, [d]), useEffect(() => (b.current = debounce((k) => {
-    x(k);
+    d && (f("all"), k(null));
+  }, [d]), useEffect(() => (b.current = debounce((S) => {
+    f(S);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const B = useCallback((k) => {
-    y(k), b.current && b.current(k);
-  }, []), E = useCallback(() => {
-    y(null), b.current && b.current.cancel();
-  }, []), A = useCallback((k) => {
-    b.current && b.current.cancel(), x(k), y(null);
-  }, []), j = useMemo(
+  const A = useCallback((S) => {
+    k(S), b.current && b.current(S);
+  }, []), B = useCallback(() => {
+    k(null), b.current && b.current.cancel();
+  }, []), _ = useCallback((S) => {
+    b.current && b.current.cancel(), f(S), k(null);
+  }, []), N = useMemo(
     () => d ? values(r).filter(
-      (k) => {
-        var _, I;
-        return (((_ = k.label) == null ? void 0 : _.toLowerCase()) + " " + ((I = k.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
+      (S) => {
+        var j, T;
+        return (((j = S.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = S.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : r,
     [r, d]
   ), w = useMemo(
     () => d ? o.filter(
-      (k) => reject(filter(values(j), { group: k }), { hidden: !0 }).length > 0
-    ) : o.filter((k) => reject(filter(values(r), { group: k }), { hidden: !0 }).length > 0),
-    [r, j, o, d]
-  ), C = useMemo(
-    () => sortBy(w, (k) => CORE_GROUPS.indexOf(k) === -1 ? 99 : CORE_GROUPS.indexOf(k)),
+      (S) => reject(filter(values(N), { group: S }), { hidden: !0 }).length > 0
+    ) : o.filter((S) => reject(filter(values(r), { group: S }), { hidden: !0 }).length > 0),
+    [r, N, o, d]
+  ), y = useMemo(
+    () => sortBy(w, (S) => CORE_GROUPS.indexOf(S) === -1 ? 99 : CORE_GROUPS.indexOf(S)),
     [w]
-  ), v = useMemo(() => m === "all" ? j : filter(values(j), { group: m }), [j, m]), N = useMemo(() => m === "all" ? C : [m], [C, m]);
+  ), C = useMemo(() => m === "all" ? N : filter(values(N), { group: m }), [N, m]), E = useMemo(() => m === "all" ? y : [m], [y, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7452,32 +7510,32 @@ const registerChaiLibrary = (o, r) => {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (k) => p(k.target.value)
+        onChange: (S) => p(S.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
-      C.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+      y.length > 0 && /* @__PURE__ */ jsx("div", { className: "w-1/4 min-w-[120px] border-r border-border", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => A("all"),
-            onMouseEnter: () => B("all"),
-            onMouseLeave: E,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || f === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            onClick: () => _("all"),
+            onMouseEnter: () => A("all"),
+            onMouseLeave: B,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${m === "all" || x === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: i("All")
           },
           "sidebar-all"
         ),
-        C.map((k) => /* @__PURE__ */ jsx(
+        y.map((S) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => A(k),
-            onMouseEnter: () => B(k),
-            onMouseLeave: E,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === k || f === k ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(k.toLowerCase()))
+            onClick: () => _(S),
+            onMouseEnter: () => A(S),
+            onMouseLeave: B,
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === S || x === S ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(S.toLowerCase()))
           },
-          `sidebar-${k}`
+          `sidebar-${S}`
         ))
       ] }) }) }),
       /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
@@ -7485,22 +7543,22 @@ const registerChaiLibrary = (o, r) => {
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: N.map((k) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(k.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((S) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(S.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          m === "all" ? filter(values(v), { group: k }) : values(v),
+          m === "all" ? filter(values(C), { group: S }) : values(C),
           { hidden: !0 }
-        ).map((_) => /* @__PURE__ */ jsx(
+        ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
           {
             parentId: n,
             position: a,
-            block: _,
-            disabled: !canAcceptChildBlock(h, _.type) || !canBeNestedInside(h, _.type)
+            block: j,
+            disabled: !canAcceptChildBlock(h, j.type) || !canBeNestedInside(h, j.type)
           },
-          _.type
+          j.type
         )) })
-      ] }, k)) }) }) })
+      ] }, S)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7515,7 +7573,7 @@ const registerChaiLibrary = (o, r) => {
   }, [i, g, c]);
   const m = useCallback(() => {
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
-  }, []), x = useChaiAddBlockTabs(), f = p && h(PERMISSIONS.IMPORT_HTML), b = useChaiLibraries().length > 0;
+  }, []), f = useChaiAddBlockTabs(), x = p && h(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: [
@@ -7526,8 +7584,8 @@ const registerChaiLibrary = (o, r) => {
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (B) => {
-          d(""), c(B);
+        onValueChange: (A) => {
+          d(""), c(A);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7536,14 +7594,14 @@ const registerChaiLibrary = (o, r) => {
             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") }),
-            f ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(x, (B) => /* @__PURE__ */ jsx(TabsTrigger, { value: B.id, children: React__default.createElement(B.tab) }, `tab-add-block-${B.id}`))
+            x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
+            map(f, (A) => /* @__PURE__ */ jsx(TabsTrigger, { value: A.id, children: React__default.createElement(A.tab) }, `tab-add-block-${A.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: n, position: a }) }) }) }),
           b && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: n, 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: n, position: a }) }) }) }),
-          f ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: n, position: a }) }) : null,
-          map(x, (B) => /* @__PURE__ */ jsx(TabsContent, { value: B.id, children: React__default.createElement(B.tabContent, { close: m, parentId: n, position: a }) }, `panel-add-block-${B.id}`))
+          x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: n, position: a }) }) : null,
+          map(f, (A) => /* @__PURE__ */ jsx(TabsContent, { value: A.id, children: React__default.createElement(A.tabContent, { close: m, parentId: n, position: a }) }, `panel-add-block-${A.id}`))
         ]
       }
     )
@@ -7853,35 +7911,35 @@ const Input = ({ node: o }) => {
   var R;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: x, isSelected: f, willReceiveDrop: y, isDragging: b, isEditing: B, handleClick: E } = o, A = (T) => {
-    T.stopPropagation(), !l.includes(m) && o.toggle();
-  }, j = (T) => {
-    T.isInternal && (p = T.isOpen, T.isOpen && T.close());
-  }, w = (T) => {
-    T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
-  }, [C, v] = useAtom$1(currentAddSelection), N = () => {
-    var T;
-    S(), o.parent.isSelected || v((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
-  }, S = () => {
-    v(null);
-  }, k = (T) => {
-    S(), T.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), E(T);
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: A, handleClick: B } = o, _ = (I) => {
+    I.stopPropagation(), !l.includes(m) && o.toggle();
+  }, N = (I) => {
+    I.isInternal && (p = I.isOpen, I.isOpen && I.close());
+  }, w = (I) => {
+    I.isInternal && p !== null && (p ? I.open() : I.close(), p = null);
+  }, [y, C] = useAtom$1(currentAddSelection), E = () => {
+    var I;
+    v(), o.parent.isSelected || C((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id);
+  }, v = () => {
+    C(null);
+  }, S = (I) => {
+    v(), I.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(I);
   };
   useEffect(() => {
-    const T = setTimeout(() => {
-      y && !o.isOpen && !b && !l.includes(m) && o.toggle();
+    const I = setTimeout(() => {
+      k && !o.isOpen && !b && !l.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(T);
-  }, [y, o, b]);
-  const _ = (T, D) => {
-    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${T}]`);
+    return () => clearTimeout(I);
+  }, [k, o, b]);
+  const j = (I, D) => {
+    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${I}]`);
     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();
+  }, T = (I) => {
+    v();
     const D = get(o, "parent.id");
-    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: I }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: I });
   };
   if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
@@ -7890,7 +7948,7 @@ const Input = ({ node: o }) => {
         "div",
         {
           role: "button",
-          onClick: () => I(-1),
+          onClick: () => T(-1),
           className: "h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-[9px] leading-tight text-white hover:bg-primary", children: [
             /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[3]" }),
@@ -7901,36 +7959,36 @@ const Input = ({ node: o }) => {
       ),
       /* @__PURE__ */ jsx("br", {})
     ] });
-  const L = useMemo(() => has(x, "_libBlockId") && !isEmpty(x._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [x, d]);
+  const L = useMemo(() => has(f, "_libBlockId") && !isEmpty(f._libBlockId) && (d(PERMISSIONS.CREATE_LIBRARY_BLOCK) || d(PERMISSIONS.EDIT_LIBRARY_BLOCK)), [f, d]);
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseEnter: () => g(m),
       onMouseLeave: () => h(),
-      onClick: k,
+      onClick: S,
       style: r,
       "data-node-id": m,
       ref: l.includes(m) ? null : n,
-      onDragStart: () => j(o),
+      onDragStart: () => N(o),
       onDragEnd: () => w(o),
-      onDragOver: (T) => {
-        T.preventDefault(), _(m, "yes");
+      onDragOver: (I) => {
+        I.preventDefault(), j(m, "yes");
       },
-      onDragLeave: (T) => {
-        T.preventDefault(), _(m, "no");
+      onDragLeave: (I) => {
+        I.preventDefault(), j(m, "no");
       },
-      onDrop: (T) => {
-        T.preventDefault(), _(m, "no");
+      onDrop: (I) => {
+        I.preventDefault(), j(m, "no");
       },
       children: [
         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) => {
-              T.stopPropagation(), I(o.childIndex);
+            onClick: (I) => {
+              I.stopPropagation(), T(o.childIndex);
             },
-            onMouseEnter: N,
-            onMouseLeave: S,
+            onMouseEnter: E,
+            onMouseLeave: v,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-primary opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary p-1 outline outline-2 outline-white hover:bg-primary", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
@@ -7940,12 +7998,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",
-              f ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
-              y && canAcceptChildBlock(x._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === C ? "bg-primary/10" : "",
+              x ? "bg-primary text-primary-foreground" : "hover:bg-primary/10 dark:hover:bg-gray-800",
+              k && canAcceptChildBlock(f._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === y ? "bg-primary/10" : "",
               b && "opacity-20",
               l.includes(m) ? "opacity-50" : "",
-              L && f && "bg-primary/20 text-primary"
+              L && x && "bg-primary/20 text-primary"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -7953,7 +8011,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: u && /* @__PURE__ */ jsx("button", { onClick: A, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${f ? "text-white" : "text-slate-400"}` }) })
+                    children: u && /* @__PURE__ */ jsx("button", { onClick: _, type: "button", children: /* @__PURE__ */ jsx(ChevronRight, { className: `h-3 w-3 stroke-[3] ${x ? "text-white" : "text-slate-400"}` }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -7962,18 +8020,18 @@ const Input = ({ node: o }) => {
                     className: cn(
                       "leading-1 flex items-center",
                       L && "text-primary/60",
-                      L && f && "text-primary/80"
+                      L && x && "text-primary/80"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(TypeIcon, { type: x == null ? void 0 : x._type }),
-                      B ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx(TypeIcon, { type: f == null ? void 0 : f._type }),
+                      A ? /* @__PURE__ */ jsx(Input, { node: o }) : /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (T) => {
-                            T.stopPropagation(), o.edit(), o.deselect();
+                          onDoubleClick: (I) => {
+                            I.stopPropagation(), o.edit(), o.deselect();
                           },
-                          children: /* @__PURE__ */ jsx("span", { children: getBlockDisplayName(x) })
+                          children: /* @__PURE__ */ jsx("span", { children: getBlockDisplayName(f) })
                         }
                       )
                     ]
@@ -7981,7 +8039,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                canAddChildBlock(x == null ? void 0 : x._type) && !l.includes(m) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(f == null ? void 0 : f._type) && !l.includes(m) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -7997,8 +8055,8 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (T) => {
-                        T.stopPropagation(), i(m), o.isOpen && o.toggle();
+                      onClick: (I) => {
+                        I.stopPropagation(), i(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
@@ -8218,17 +8276,18 @@ const Input = ({ node: o }) => {
     /* @__PURE__ */ jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
   ] });
 }, BorderRadiusInput = ({ value: o, onChange: r, disabled: n }) => {
-  const a = debounce((l) => r(l), 200);
+  const [a, l] = useState(o), i = useThrottledCallback(r, [o], 200, !0);
   return /* @__PURE__ */ jsx(
-    "input",
+    Slider,
     {
-      type: "range",
-      min: "0",
-      step: "1",
-      max: "30",
+      min: 0,
+      step: 1,
+      max: 50,
       disabled: n,
-      defaultValue: o.replace("px", ""),
-      onChange: (l) => a(l.target.value),
+      value: [Number(a.replace("px", ""))],
+      onValueChange: (c) => {
+        l(c[0].toString() + "px"), i(c[0].toString());
+      },
       className: "flex-1 cursor-pointer"
     }
   );
@@ -8259,337 +8318,192 @@ const Input = ({ node: o }) => {
   onChange: n
 }) => {
   const a = useRegisteredFonts();
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-    /* @__PURE__ */ jsx(Label, { className: "text-sm", children: startCase(o) }),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        className: "mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-border focus:ring-offset-2",
-        value: r,
-        onChange: (l) => n(l.target.value),
-        children: a.map((l) => /* @__PURE__ */ jsx("option", { value: l.family, children: l.family }, l.family))
-      }
-    )
+  return useEffect(() => {
+    a.some((l) => l.family === r) || n(a[0].family);
+  }, [r, n]), /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ jsx(Label, { className: "mb-1 block text-xs text-gray-600", children: startCase(o) }),
+    /* @__PURE__ */ jsxs(Select$1, { value: r, onValueChange: n, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full text-xs text-black", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select font" }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: a.map((l) => /* @__PURE__ */ jsx(SelectItem, { value: l.family, children: l.family }, l.family)) })
+    ] })
   ] });
-}, parseToChaiThemeValues = (o) => {
-  const r = {
-    fontFamily: {
-      heading: "",
-      body: ""
-    },
-    borderRadius: "",
-    colors: {}
-  };
-  try {
-    const n = extractCssBlockContent(o, ":root"), a = extractCssBlockContent(o, ".dark"), l = extractVariableValue(n, "--font-sans") || extractVariableValue(n, "--font-family") || extractVariableValue(n, "--font-heading") || extractVariableValue(n, "--font-body");
-    r.fontFamily = {
-      heading: l || "ui-sans-serif, system-ui, sans-serif",
-      body: l || "ui-sans-serif, system-ui, sans-serif"
-    }, r.borderRadius = extractVariableValue(n, "--radius") || extractVariableValue(n, "--border-radius") || "0.5rem", [
-      "background",
-      "foreground",
-      "primary",
-      "primary-foreground",
-      "secondary",
-      "secondary-foreground",
-      "muted",
-      "muted-foreground",
-      "accent",
-      "accent-foreground",
-      "destructive",
-      "destructive-foreground",
-      "border",
-      "input",
-      "ring",
-      "card",
-      "card-foreground",
-      "popover",
-      "popover-foreground"
-    ].forEach((c) => {
-      const d = extractVariableValue(n, `--${c}`), p = extractVariableValue(a, `--${c}`);
-      if (d || p) {
-        const u = d ? processAndFormatColor(d) : "#000000", g = p ? processAndFormatColor(p) : u;
-        r.colors[c] = [u, g];
-      }
-    });
-  } catch (n) {
-    console.error("Error parsing CSS to ChaiThemeValues:", n);
-  }
-  return r;
-}, extractCssBlockContent = (o, r) => {
-  var a, l;
-  const n = new RegExp(`${escapeRegExp(r)}\\s*{([^}]+)}`);
-  return ((l = (a = o.match(n)) == null ? void 0 : a[1]) == null ? void 0 : l.trim()) || null;
-}, extractVariableValue = (o, r) => {
-  var l;
-  if (!o) return null;
-  const n = new RegExp(`${escapeRegExp(r)}\\s*:\\s*([^;]+)`), a = o.match(n);
-  return ((l = a == null ? void 0 : a[1]) == null ? void 0 : l.trim()) || null;
-}, processAndFormatColor = (o) => {
-  try {
-    let r = o.replace(/var\([^)]+\)/g, "").trim();
-    return /^\d/.test(r) && !r.startsWith("#") && !r.startsWith("rgb") && !r.startsWith("hsl") && (r = `hsl(${r})`), r.startsWith("#") && /^#[0-9A-F]{6}$/i.test(r) ? r : r.startsWith("hsl(") ? hslToHex(r) : r.startsWith("rgb(") ? rgbToHex(r) : /^[0-9A-F]{6}$/i.test(r) ? `#${r}` : "#000000";
-  } catch (r) {
-    return console.error("Error processing color value:", o, r), o.startsWith("#") ? o : "#000000";
-  }
-}, hslToHex = (o) => {
-  const r = o.match(/hsla?\((\d+)(?:deg)?,?\s*(\d+)%?,?\s*(\d+)%?(?:,?\s*[\d.]+)?\)/);
-  if (!r) return "#000000";
-  const n = parseInt(r[1]) / 360, a = parseInt(r[2]) / 100, l = parseInt(r[3]) / 100, i = (g, h, m) => (m < 0 && (m += 1), m > 1 && (m -= 1), m < 1 / 6 ? g + (h - g) * 6 * m : m < 1 / 2 ? h : m < 2 / 3 ? g + (h - g) * (2 / 3 - m) * 6 : g);
-  let c, d, p;
-  if (a === 0)
-    c = d = p = l;
-  else {
-    const g = l < 0.5 ? l * (1 + a) : l + a - l * a, h = 2 * l - g;
-    c = i(h, g, n + 1 / 3), d = i(h, g, n), p = i(h, g, n - 1 / 3);
-  }
-  const u = (g) => {
-    const h = Math.round(g * 255).toString(16);
-    return h.length === 1 ? "0" + h : h;
-  };
-  return `#${u(c)}${u(d)}${u(p)}`;
-}, rgbToHex = (o) => {
-  const r = o.match(/rgba?\((\d+)(?:\.\d+)?,?\s*(\d+)(?:\.\d+)?,?\s*(\d+)(?:\.\d+)?(?:,?\s*[\d.]+)?\)/);
-  if (!r) return "#000000";
-  const n = parseInt(r[1]), a = parseInt(r[2]), l = parseInt(r[3]), i = (c) => {
-    const d = c.toString(16);
-    return d.length === 1 ? "0" + d : d;
-  };
-  return `#${i(n)}${i(a)}${i(l)}`;
-}, escapeRegExp = (o) => o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), validateChaiThemeValues = (o) => [
-  "background",
-  "foreground",
-  "primary",
-  "primary-foreground"
-].every(
-  (a) => o.colors[a] && Array.isArray(o.colors[a]) && o.colors[a].length >= 2
-) && !!o.fontFamily.heading && !!o.fontFamily.body && !!o.borderRadius, validateCssInput = (o) => {
-  if (!o.trim())
-    return { isValid: !1, error: "Please enter CSS content" };
-  try {
-    return !o.includes("--") || !o.includes(":") ? {
-      isValid: !1,
-      error: "Invalid CSS format. CSS should contain variable definitions like --primary: #color"
-    } : !o.includes("{") || !o.includes("}") ? {
-      isValid: !1,
-      error: "Invalid CSS format. CSS should contain proper block structure with { }"
-    } : { isValid: !0 };
-  } catch {
-    return { isValid: !1, error: "Failed to parse CSS. Please check your syntax." };
-  }
-}, CSS_PLACEHOLDER = `:root {
-  --background: 0 0% 100%;
-  --foreground: oklch(0.52 0.13 144.17);
-  --primary: #3e2723;
-  --primary-foreground: #ffffff;
-  }
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: hsl(37.50 36.36% 95.69%);
-  --primary: rgb(46, 125, 50);
-  --primary-foreground: #ffffff;
-}`, CssImportModal = ({
-  open: o,
-  onOpenChange: r,
-  onImport: n
-}) => {
-  const [a, l] = React.useState(""), [i, c] = React.useState(null), [d, p] = React.useState(!1), { t: u } = useTranslation(), g = async () => {
-    p(!0), c(null);
+}, LazyCssImportModal = lazy(
+  () => import("./css-import-modal-CcUf6F6T.js").then((o) => ({ default: o.CssImportModal }))
+), PREV_THEME_KEY = "chai-builder-previous-theme", setPreviousTheme = (o) => {
+  if (!(typeof window > "u"))
     try {
-      const m = validateCssInput(a);
-      if (!m.isValid) {
-        c(m.error || "Invalid CSS format"), setTimeout(() => {
-          c(null);
-        }, 5e3), p(!1);
-        return;
-      }
-      const x = parseToChaiThemeValues(a);
-      if (!validateChaiThemeValues(x)) {
-        c("The CSS doesn't contain enough theme information. Please ensure it includes at least background, foreground, primary, and primary-foreground colors."), setTimeout(() => {
-          c(null);
-        }, 5e3), p(!1);
-        return;
-      }
-      n(x), l(""), c(null), r(!1);
-    } catch (m) {
-      console.error("Error importing CSS:", m), c("Failed to parse CSS. Please check your syntax and try again."), setTimeout(() => {
-        c(null);
-      }, 5e3);
-    } finally {
-      p(!1);
+      localStorage.setItem(PREV_THEME_KEY, JSON.stringify(o));
+    } catch (r) {
+      console.warn("Failed to save previous theme to localStorage:", r);
+    }
+}, clearPreviousTheme = () => {
+  if (!(typeof window > "u"))
+    try {
+      localStorage.removeItem(PREV_THEME_KEY);
+    } catch (o) {
+      console.warn("Failed to clear previous theme from localStorage:", o);
     }
-  }, h = () => {
-    l(""), c(null), r(!1);
-  };
-  return /* @__PURE__ */ jsx(Dialog, { open: o, onOpenChange: r, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: u("Import CSS Theme") }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: u("Paste your CSS variables to import a custom theme. The CSS should contain :root and .dark blocks with CSS custom properties.") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4 overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "css-input", children: u("CSS Variables") }),
-        /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            id: "css-input",
-            placeholder: CSS_PLACEHOLDER,
-            value: a,
-            onChange: (m) => l(m.target.value),
-            className: "min-h-[300px] font-mono text-sm resize-none",
-            disabled: d
-          }
-        )
-      ] }),
-      i && /* @__PURE__ */ jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600", children: i }) })
-    ] }),
-    /* @__PURE__ */ jsxs(DialogFooter, { className: "gap-2", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "outline",
-          onClick: h,
-          disabled: d,
-          children: u("Cancel")
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: g,
-          disabled: !a.trim() || d,
-          children: u(d ? "Importing..." : "Import Theme")
-        }
-      )
-    ] })
-  ] }) });
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), [l, i] = React.useState(!1), c = useBuilderProp("themePresets", []), d = useBuilderProp("themePanelComponent", null), { hasPermission: p } = usePermissions(), [u, g] = useTheme(), h = useThemeOptions(), { t: m } = useTranslation(), x = (j) => {
-    a(j);
-  }, f = () => {
-    const j = c.find((w) => Object.keys(w)[0] === n);
-    if (j) {
-      const w = Object.values(j)[0];
-      w && typeof w == "object" && "fontFamily" in w && "borderRadius" in w && "colors" in w ? g(w) : console.error("Invalid preset structure:", w);
+  const [r, n] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), [g, h] = useTheme(), m = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
+    (w) => {
+      const y = { ...g };
+      setPreviousTheme(y), h(w), toast.success("Theme updated", {
+        action: {
+          label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Undo$1, { className: "h-4 w-4" }),
+            " Undo"
+          ] }),
+          onClick: () => {
+            h(y), clearPreviousTheme(), toast.dismiss();
+          }
+        },
+        closeButton: !0,
+        duration: 15e3
+      });
+    },
+    [g, h]
+  ), k = () => {
+    const w = d.find((y) => Object.keys(y)[0] === a);
+    if (w) {
+      const y = Object.values(w)[0];
+      y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? (x(y), l("")) : console.error("Invalid preset structure:", y);
     } else
-      console.error("Preset not found:", n);
-  }, y = (j) => {
-    g(j), a("");
-  }, b = useDebouncedCallback(
-    (j, w) => {
-      g(() => ({
-        ...u,
+      console.error("Preset not found:", a);
+  }, b = (w) => {
+    x(w), l("");
+  }, A = useDebouncedCallback(
+    (w, y) => {
+      h(() => ({
+        ...g,
         fontFamily: {
-          ...u.fontFamily,
-          [j.replace(/font-/g, "")]: w
+          ...g.fontFamily,
+          [w.replace(/font-/g, "")]: y
         }
       }));
     },
-    [u],
+    [g],
     200
-  ), B = useDebouncedCallback(
-    (j) => {
-      g(() => ({
-        ...u,
-        borderRadius: `${j}px`
+  ), B = React.useCallback(
+    (w) => {
+      h(() => ({
+        ...g,
+        borderRadius: `${w}px`
       }));
     },
-    [u],
-    200
-  ), E = useDebouncedCallback(
-    (j, w) => {
-      g(() => {
-        const C = get(u, `colors.${j}`);
-        return r ? set(C, 1, w) : set(C, 0, w), {
-          ...u,
+    [g]
+  ), _ = useDebouncedCallback(
+    (w, y) => {
+      h(() => {
+        const C = get(g, `colors.${w}`);
+        return r ? set(C, 1, y) : set(C, 0, y), {
+          ...g,
           colors: {
-            ...u.colors,
-            [j]: C
+            ...g.colors,
+            [w]: C
           }
         };
       });
     },
-    [u],
+    [g],
     200
-  ), A = (j) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(j.items).map(([w]) => {
-    const C = get(u, `colors.${w}.${r ? 1 : 0}`);
-    return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+  ), N = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([y]) => {
+    const C = get(g, `colors.${y}.${r ? 1 : 0}`);
+    return C ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
           value: C,
-          onChange: (v) => E(w, v)
+          onChange: (E) => _(y, E)
         }
       ),
-      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: w.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((v) => v.charAt(0).toUpperCase() + v.slice(1)).join(" ") + (!w.toLowerCase().includes("foreground") && !w.toLowerCase().includes("border") && !w.toLowerCase().includes("input") && !w.toLowerCase().includes("ring") && !w.toLowerCase().includes("background") ? " Background" : "") })
-    ] }, w);
+      /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: y.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!y.toLowerCase().includes("foreground") && !y.toLowerCase().includes("border") && !y.toLowerCase().includes("input") && !y.toLowerCase().includes("ring") && !y.toLowerCase().includes("background") ? " Background" : "") })
+    ] }, y) : null;
   }) });
-  return p("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto", o), children: [
-      c.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 py-2", children: [
+      d.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-0 my-2 flex flex-col gap-1 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Presets") }),
-          /* @__PURE__ */ jsxs(Button, { variant: "link", size: "sm", onClick: () => i(!0), children: [
-            /* @__PURE__ */ jsx(ImportIcon, { className: "h-3 w-3" }),
-            " ",
-            m("Import theme")
-          ] })
+          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: f("Presets") }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
+            /* @__PURE__ */ jsx(ImportIcon, { className: "h-4 w-4" }),
+            f("Import theme")
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: n,
-              onChange: (j) => x(j.target.value),
-              className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(c) && c.map((j) => /* @__PURE__ */ jsx("option", { value: Object.keys(j)[0], children: capitalize(Object.keys(j)[0].replaceAll("_", " ")) }, Object.keys(j)[0]))
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "w-full text-sm",
-              disabled: n === "",
-              variant: "default",
-              onClick: f,
-              children: m("Apply")
-            }
-          ) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
+              const y = Object.keys(w)[0], C = y.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: y, children: capitalize(C) }, y);
+            }) })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: f("Apply") }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn$2("space-y-2", o), children: [
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(h.fontFamily).map(([j, w]) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: cn$2("my-2 space-y-3", o), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Type, { className: "h-3 w-3 text-gray-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
+        ] }),
+        (m == null ? void 0 : m.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(m.fontFamily).map(([w, y]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
-            label: j,
-            value: u.fontFamily[j.replace(/font-/g, "")] || w[Object.keys(w)[0]],
-            onChange: (C) => b(j, C)
+            label: w,
+            value: g.fontFamily[w.replace(/font-/g, "")] || y[Object.keys(y)[0]],
+            onChange: (C) => A(w, C)
           },
-          j
+          w
         )) }),
-        (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Border Radius") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: u.borderRadius, onChange: B }),
-            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: u.borderRadius })
-          ] })
+        /* @__PURE__ */ jsx(Separator, {}),
+        (m == null ? void 0 : m.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(CornerUpRight, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Border Radius" })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: B }) })
         ] }),
-        (h == null ? void 0 : h.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: h.colors.map((j) => A(j)) }, r ? "dark" : "light")
-        ] })
+        /* @__PURE__ */ jsx(Separator, {}),
+        (m == null ? void 0 : m.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Palette, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Colors" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: r,
+                  onCheckedChange: (w) => n(w),
+                  "aria-label": "Toggle dark mode",
+                  className: "mx-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: m.colors.map((w) => N(w)) })
+        ] }),
+        /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
+          LazyCssImportModal,
+          {
+            open: i,
+            onOpenChange: c,
+            onImport: b
+          }
+        ) })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {})
     ] }),
-    d && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(d) }),
-    /* @__PURE__ */ jsx(CssImportModal, { open: l, onOpenChange: i, onImport: y })
+    p && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(p) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
 }), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
@@ -9075,12 +8989,12 @@ function QuickPrompts({ onClick: o }) {
 const AIUserPrompt = ({ blockId: o }) => {
   const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, g] = useState(), h = useRef(null), m = useRef(null);
   useEffect(() => {
-    var f;
-    (f = h.current) == null || f.focus();
+    var x;
+    (x = h.current) == null || x.focus();
   }, []);
-  const x = (f) => {
-    const { usage: y } = f || {};
-    !l && y && g(y), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
+  const f = (x) => {
+    const { usage: k } = x || {};
+    !l && k && g(k), m.current = setTimeout(() => g(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxs(
@@ -9100,12 +9014,12 @@ const AIUserPrompt = ({ blockId: o }) => {
         {
           ref: h,
           value: i,
-          onChange: (f) => c(f.target.value),
+          onChange: (x) => c(x.target.value),
           placeholder: r("Ask AI to edit content"),
           className: "w-full",
           rows: 3,
-          onKeyDown: (f) => {
-            f.key === "Enter" && (f.preventDefault(), m.current && clearTimeout(m.current), g(void 0), n("content", o, i, x));
+          onKeyDown: (x) => {
+            x.key === "Enter" && (x.preventDefault(), m.current && clearTimeout(m.current), g(void 0), n("content", o, i, f));
           }
         }
       ),
@@ -9115,7 +9029,7 @@ const AIUserPrompt = ({ blockId: o }) => {
           {
             disabled: i.trim().length < 5 || a,
             onClick: () => {
-              m.current && clearTimeout(m.current), g(void 0), n("content", o, i, x);
+              m.current && clearTimeout(m.current), g(void 0), n("content", o, i, f);
             },
             variant: "default",
             className: "w-fit",
@@ -9147,8 +9061,8 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         QuickPrompts,
         {
-          onClick: (f) => {
-            m.current && clearTimeout(m.current), g(void 0), n("content", o, f, x);
+          onClick: (x) => {
+            m.current && clearTimeout(m.current), g(void 0), n("content", o, x, f);
           }
         }
       )
@@ -9165,8 +9079,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   const m = async () => {
     try {
       d(!0), u(null), await i(n), toast.success(o("Updated AI Context")), h.current.click();
-    } catch (x) {
-      u(x);
+    } catch (f) {
+      u(f);
     } finally {
       d(!1);
     }
@@ -9174,8 +9088,8 @@ const AIUserPrompt = ({ blockId: o }) => {
   return /* @__PURE__ */ jsx(
     Accordion,
     {
-      onValueChange: (x) => {
-        g(x !== "");
+      onValueChange: (f) => {
+        g(f !== "");
       },
       type: "single",
       collapsible: !0,
@@ -9187,12 +9101,12 @@ const AIUserPrompt = ({ blockId: o }) => {
             {
               ref: l,
               value: n,
-              onChange: (x) => a(x.target.value),
+              onChange: (f) => a(f.target.value),
               placeholder: o("Tell about this page eg this page is about"),
               className: "mt-1 w-full",
               rows: 10,
-              onKeyDown: (x) => {
-                x.key === "Enter" && (x.preventDefault(), m());
+              onKeyDown: (f) => {
+                f.key === "Enter" && (f.preventDefault(), m());
               }
             }
           ),
@@ -9302,31 +9216,31 @@ function AIChatPanel() {
       content: n,
       timestamp: /* @__PURE__ */ new Date()
     };
-    r((B) => [...B, b]), a(""), i(!0), setTimeout(() => {
-      const B = {
+    r((A) => [...A, b]), a(""), i(!0), setTimeout(() => {
+      const A = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         content: "This is a sample response from the AI assistant. In a real implementation, this would be replaced with an actual response from the AI model.",
         timestamp: /* @__PURE__ */ new Date()
       };
-      r((E) => [...E, B]), i(!1), d(null);
+      r((B) => [...B, A]), i(!1), d(null);
     }, 1500);
   }, m = (b) => {
     b.key === "Enter" && !b.shiftKey && (b.preventDefault(), h());
-  }, x = (b) => {
-    var E;
-    const B = (E = b.target.files) == null ? void 0 : E[0];
-    if (B) {
-      const A = new FileReader();
-      A.onload = (j) => {
+  }, f = (b) => {
+    var B;
+    const A = (B = b.target.files) == null ? void 0 : B[0];
+    if (A) {
+      const _ = new FileReader();
+      _.onload = (N) => {
         var w;
-        d((w = j.target) == null ? void 0 : w.result);
-      }, A.readAsDataURL(B);
+        d((w = N.target) == null ? void 0 : w.result);
+      }, _.readAsDataURL(A);
     }
-  }, f = () => {
+  }, x = () => {
     var b;
     (b = p.current) == null || b.click();
-  }, y = () => {
+  }, k = () => {
     d(null), p.current && (p.current.value = "");
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col rounded-lg bg-background shadow-sm", children: [
@@ -9372,7 +9286,7 @@ function AIChatPanel() {
           size: "icon",
           variant: "destructive",
           className: "absolute right-0 top-0 h-5 w-5 rounded-full p-0",
-          onClick: y,
+          onClick: k,
           children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
         }
       )
@@ -9390,14 +9304,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: x, accept: "image/*", className: "hidden" }),
+        /* @__PURE__ */ jsx("input", { type: "file", ref: p, onChange: f, accept: "image/*", className: "hidden" }),
         /* @__PURE__ */ jsx(
           Button,
           {
             size: "icon",
             variant: "ghost",
             className: "absolute bottom-2 right-2 h-6 w-6",
-            onClick: f,
+            onClick: x,
             children: /* @__PURE__ */ jsx(Image$1, { className: "h-4 w-4 text-muted-foreground" })
           }
         )
@@ -9515,7 +9429,7 @@ const AiAssistant = () => {
   preloadedAttributes: r = [],
   onAttributesChange: n
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), x = useRef(null), f = useRef(null), y = usePageExternalData();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [h, m] = useState(""), f = useRef(null), x = useRef(null), k = usePageExternalData();
   useEffect(() => {
     l(r);
   }, [r]);
@@ -9525,43 +9439,43 @@ const AiAssistant = () => {
       return;
     }
     if (i) {
-      const C = [...a, { key: i, value: d }];
-      n(C), l(a), c(""), p(""), m("");
+      const y = [...a, { key: i, value: d }];
+      n(y), l(a), c(""), p(""), m("");
     }
-  }, B = (C) => {
-    const v = a.filter((N, S) => S !== C);
-    n(v), l(v);
-  }, E = (C) => {
-    g(C), c(a[C].key), p(a[C].value);
-  }, A = () => {
+  }, A = (y) => {
+    const C = a.filter((E, v) => v !== y);
+    n(C), l(C);
+  }, B = (y) => {
+    g(y), c(a[y].key), p(a[y].value);
+  }, _ = () => {
     if (i.startsWith("@")) {
       m("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const C = [...a];
-      C[u] = { key: i, value: d }, n(C), l(C), g(null), c(""), p(""), m("");
+      const y = [...a];
+      y[u] = { key: i, value: d }, n(y), l(y), g(null), c(""), p(""), m("");
     }
-  }, j = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? A() : b());
-  }, w = useCallback((C) => {
-    const v = (k) => /[.,!?;:]/.test(k), N = (k, _, I) => {
+  }, N = (y) => {
+    y.key === "Enter" && !y.shiftKey && (y.preventDefault(), u !== null ? _() : b());
+  }, w = useCallback((y) => {
+    const C = (S) => /[.,!?;:]/.test(S), E = (S, j, T) => {
       let L = "", R = "";
-      const T = _ > 0 ? k[_ - 1] : "", D = _ < k.length ? k[_] : "";
-      return _ > 0 && (T === "." || !v(T) && T !== " ") && (L = " "), _ < k.length && !v(D) && D !== " " && (R = " "), {
-        text: L + I + R,
+      const I = j > 0 ? S[j - 1] : "", D = j < S.length ? S[j] : "";
+      return j > 0 && (I === "." || !C(I) && I !== " ") && (L = " "), j < S.length && !C(D) && D !== " " && (R = " "), {
+        text: L + T + R,
         prefixLength: L.length,
         suffixLength: R.length
       };
-    }, S = f.current;
-    if (S) {
-      const k = S.selectionStart || 0, _ = S.value || "", I = S.selectionEnd || k;
-      if (I > k) {
-        const O = `{{${C}}}`, { text: P } = N(_, k, O), $ = _.slice(0, k) + P + _.slice(I);
+    }, v = x.current;
+    if (v) {
+      const S = v.selectionStart || 0, j = v.value || "", T = v.selectionEnd || S;
+      if (T > S) {
+        const O = `{{${y}}}`, { text: P } = E(j, S, O), $ = j.slice(0, S) + P + j.slice(T);
         p($);
         return;
       }
-      const R = `{{${C}}}`, { text: T } = N(_, k, R), D = _.slice(0, k) + T + _.slice(k);
+      const R = `{{${y}}}`, { text: I } = E(j, S, R), D = j.slice(0, S) + I + j.slice(S);
       p(D);
     }
   }, []);
@@ -9569,8 +9483,8 @@ const AiAssistant = () => {
     /* @__PURE__ */ jsxs(
       "form",
       {
-        onSubmit: (C) => {
-          C.preventDefault(), u !== null ? A() : b();
+        onSubmit: (y) => {
+          y.preventDefault(), u !== null ? _() : b();
         },
         className: "space-y-3",
         children: [
@@ -9584,9 +9498,9 @@ const AiAssistant = () => {
                   autoCorrect: "off",
                   spellCheck: "false",
                   id: "attrKey",
-                  ref: x,
+                  ref: f,
                   value: i,
-                  onChange: (C) => c(C.target.value),
+                  onChange: (y) => c(y.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9595,7 +9509,7 @@ const AiAssistant = () => {
             /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "attrValue", className: "text-[11px] font-normal text-slate-600", children: "Value" }),
-                !isEmpty(y) && /* @__PURE__ */ jsx(NestedPathSelector, { data: y, onSelect: w })
+                !isEmpty(k) && /* @__PURE__ */ jsx(NestedPathSelector, { data: k, onSelect: w })
               ] }),
               /* @__PURE__ */ jsx(
                 Textarea,
@@ -9605,10 +9519,10 @@ const AiAssistant = () => {
                   spellCheck: "false",
                   id: "attrValue",
                   rows: 2,
-                  ref: f,
+                  ref: x,
                   value: d,
-                  onChange: (C) => p(C.target.value),
-                  onKeyDown: j,
+                  onChange: (y) => p(y.target.value),
+                  onKeyDown: N,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -9620,16 +9534,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((C, v) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((y, C) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: C.value.toString() })
+        /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: y.key }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: y.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => E(v), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(v), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(C), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(C), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, v)) })
+    ] }, C)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9791,42 +9705,42 @@ const RootLayout = () => {
   usePubSub(CHAI_BUILDER_EVENTS.SHOW_BLOCK_SETTINGS, () => {
     n("outline");
   });
-  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((C) => {
-    C.preventDefault();
+  const p = useSidebarDefaultPanels(), u = useChaiSidebarPanels("top"), g = useChaiSidebarPanels("bottom"), h = useCallback((y) => {
+    y.preventDefault();
   }, []), m = useCallback(
-    (C) => {
-      n(r === C ? null : C);
+    (y) => {
+      n(r === y ? null : y);
     },
     [r]
-  ), { t: x } = useTranslation(), f = useMemo(
+  ), { t: f } = useTranslation(), x = useMemo(
     () => [...p, ...u, ...g],
     [p, u, g]
-  ), y = useBuilderProp("htmlDir", "ltr"), b = find(f, { id: r }) ?? first(f), B = get(b, "width", DEFAULT_PANEL_WIDTH);
+  ), k = useBuilderProp("htmlDir", "ltr"), b = find(x, { id: r }) ?? first(x), A = get(b, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (r !== null) {
-      const C = find(f, { id: r });
-      C && get(C, "view", "standard") === "standard" && (a.current = r, i(get(C, "width", DEFAULT_PANEL_WIDTH)));
+      const y = find(x, { id: r });
+      y && get(y, "view", "standard") === "standard" && (a.current = r, i(get(y, "width", DEFAULT_PANEL_WIDTH)));
     }
-  }, [r, f]);
-  const E = useMemo(() => {
+  }, [r, x]);
+  const B = useMemo(() => {
     if (r === null) return 0;
-    const C = find(f, { id: r });
-    return get(C, "view", "standard") === "standard" ? B : l;
-  }, [r, B, l, f]), A = useCallback(() => {
+    const y = find(x, { id: r });
+    return get(y, "view", "standard") === "standard" ? A : l;
+  }, [r, A, l, x]), _ = useCallback(() => {
     n(a.current);
-  }, [n]), j = useCallback(() => {
+  }, [n]), N = useCallback(() => {
     n("outline");
   }, [n]);
   useEffect(() => {
-    find(f, { id: r }) || n("outline");
-  }, [r, f]);
+    find(x, { id: r }) || n("outline");
+  }, [r, x]);
   const w = useCallback(
-    (C) => {
-      m(C);
+    (y) => {
+      m(y);
     },
     [m]
   );
-  return /* @__PURE__ */ jsx("div", { dir: y, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx("div", { dir: k, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -9836,40 +9750,40 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((C, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((y, C) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(y, "button", NoopComponent), {
                   position: "top",
-                  panelId: C.id,
-                  isActive: r === C.id,
-                  show: () => w(C.id)
+                  panelId: y.id,
+                  isActive: r === y.id,
+                  show: () => w(y.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
-              ] }, "button-top-" + v)) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(y.label) }) })
+              ] }, "button-top-" + C)) }),
               /* @__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, v) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(C, "button", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((y, C) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(y, "button", NoopComponent), {
                   position: "bottom",
-                  panelId: C.id,
-                  isActive: r === C.id,
-                  show: () => w(C.id)
+                  panelId: y.id,
+                  isActive: r === y.id,
+                  show: () => w(y.id)
                 }) }),
-                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: x(C.label) }) })
-              ] }, "button-bottom-" + v)) })
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(y.label) }) })
+              ] }, "button-bottom-" + C)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: E },
-                animate: { width: E },
+                initial: { width: B },
+                animate: { width: B },
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: r !== null && get(b, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "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: x(get(b, "label", "")) })
+                      children: /* @__PURE__ */ jsx("span", { children: f(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), {}) }) })
@@ -9892,11 +9806,11 @@ const RootLayout = () => {
                   /* @__PURE__ */ jsx("h2", { className: "-mt-1 flex items-center space-x-1 text-base font-bold", children: /* @__PURE__ */ jsx("div", { className: "flex grow items-center gap-2", children: /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-2", children: c === "ai" ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                     /* @__PURE__ */ jsx(LightningBoltIcon, { className: "rtl:ml-2" }),
                     " ",
-                    x("AI Assistant")
+                    f("AI Assistant")
                   ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
-                      x("Theme Settings")
+                      /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4 text-gray-600" }),
+                      f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
                       Button,
@@ -9918,31 +9832,31 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(
+    r !== null && get(b, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
         className: "flex flex-col gap-0 p-0 sm:max-w-full",
-        style: { width: `${B}px` },
+        style: { width: `${A}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(b, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(b, "label", "")) })
+            /* @__PURE__ */ jsx("span", { children: f(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: j
+            close: N
           }) }) })
         ]
       }
     ) }),
     " ",
-    r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => A(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${B}px` }, children: [
+    r !== null && get(b, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${A}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: x(get(b, "label", "")) })
+        /* @__PURE__ */ jsx("span", { children: f(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: j
+        close: N
       }) }) })
     ] }) }),
     r !== null && get(b, "view") === "overlay" && /* @__PURE__ */ jsx(
@@ -9965,12 +9879,12 @@ const RootLayout = () => {
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
                   /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(b, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(b, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { children: f(get(b, "label", "")) })
                 ] }),
-                /* @__PURE__ */ jsx(Button, { onClick: () => A(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
+                /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(b, "panel", NoopComponent), {
-                close: j
+                close: N
               }) }) })
             ]
           }
@@ -10009,36 +9923,36 @@ const RootLayout = () => {
 }) => {
   const a = useChaiFeatureFlags(), [l, i] = useState(""), [c, d] = useState(!1), [p, u] = useState({ x: 0, y: 0 }), g = useMemo(() => {
     if (!l.trim()) return a;
-    const f = l.toLowerCase();
+    const x = l.toLowerCase();
     return Object.fromEntries(
-      Object.entries(a).filter(([y, b]) => {
-        var B;
-        return (y == null ? void 0 : y.toLowerCase().includes(f)) || ((B = b == null ? void 0 : b.description) == null ? void 0 : B.toLowerCase().includes(f));
+      Object.entries(a).filter(([k, b]) => {
+        var A;
+        return (k == null ? void 0 : k.toLowerCase().includes(x)) || ((A = b == null ? void 0 : b.description) == null ? void 0 : A.toLowerCase().includes(x));
       })
     );
-  }, [a, l]), h = (f) => {
+  }, [a, l]), h = (x) => {
     d(!0), u({
-      x: f.clientX - r.x,
-      y: f.clientY - r.y
+      x: x.clientX - r.x,
+      y: x.clientY - r.y
     });
-  }, m = (f) => {
+  }, m = (x) => {
     if (!c) return;
-    const y = f.clientX - p.x, b = f.clientY - p.y, B = f.currentTarget, E = B.offsetWidth, A = B.offsetHeight, j = window.innerWidth - E, w = window.innerHeight - A, C = Math.max(0, Math.min(y, j)), v = Math.max(0, Math.min(b, w));
-    n(C, v);
-  }, x = () => {
+    const k = x.clientX - p.x, b = x.clientY - p.y, A = x.currentTarget, B = A.offsetWidth, _ = A.offsetHeight, N = window.innerWidth - B, w = window.innerHeight - _, y = Math.max(0, Math.min(k, N)), C = Math.max(0, Math.min(b, w));
+    n(y, C);
+  }, f = () => {
     d(!1);
   };
   return useEffect(() => {
-    const f = () => {
+    const x = () => {
       c && d(!1);
     };
-    return window.addEventListener("mouseup", f), () => window.removeEventListener("mouseup", f);
+    return window.addEventListener("mouseup", x), () => window.removeEventListener("mouseup", x);
   }, [c]), !r || r.x < 0 || r.y < 0 ? null : /* @__PURE__ */ jsxs(
     "div",
     {
       onMouseDown: h,
       onMouseMove: m,
-      onMouseUp: x,
+      onMouseUp: f,
       className: "fixed z-[9999999] select-none rounded-md border border-gray-300 bg-white p-3 shadow-2xl",
       style: {
         left: r.x,
@@ -10080,13 +9994,13 @@ const RootLayout = () => {
                 placeholder: "Search features...",
                 className: "w-full pl-8",
                 value: l,
-                onChange: (f) => i(f.target.value),
+                onChange: (x) => i(x.target.value),
                 autoFocus: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(g).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(g).map(([f, y]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: f, options: y }, f)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto py-2", children: Object.keys(g).length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(g).map(([x, k]) => /* @__PURE__ */ jsx(FeatureToggle, { featureKey: x, options: k }, x)) }) : /* @__PURE__ */ jsx("div", { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
           'No features found matching "',
           l,
           '"'
@@ -10197,225 +10111,225 @@ const RootLayout = () => {
   for (const i of r.p)
     l.add(i);
   return l;
-}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...x) => m.read(...x), p = (m, ...x) => m.write(...x), u = (m, x) => {
-  var f;
-  return (f = m.unstable_onInit) == null ? void 0 : f.call(m, x);
-}, g = (m, x) => {
-  var f;
-  return (f = m.onMount) == null ? void 0 : f.call(m, x);
+}, BUILDING_BLOCKS = Symbol(), buildStore = (o = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), c = {}, d = (m, ...f) => m.read(...f), p = (m, ...f) => m.write(...f), u = (m, f) => {
+  var x;
+  return (x = m.unstable_onInit) == null ? void 0 : x.call(m, f);
+}, g = (m, f) => {
+  var x;
+  return (x = m.onMount) == null ? void 0 : x.call(m, f);
 }, ...h) => {
-  const m = h[0] || ((v) => {
-    let N = o.get(v);
-    return N || (N = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(v, N), u == null || u(v, C)), N;
-  }), x = h[1] || (() => {
-    let v, N;
-    const S = (k) => {
+  const m = h[0] || ((C) => {
+    let E = o.get(C);
+    return E || (E = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, E), u == null || u(C, y)), E;
+  }), f = h[1] || (() => {
+    let C, E;
+    const v = (S) => {
       try {
-        k();
-      } catch (_) {
-        v || (v = !0, N = _);
+        S();
+      } catch (j) {
+        C || (C = !0, E = j);
       }
     };
     do {
-      c.f && S(c.f);
-      const k = /* @__PURE__ */ new Set(), _ = k.add.bind(k);
-      a.forEach((I) => {
+      c.f && v(c.f);
+      const S = /* @__PURE__ */ new Set(), j = S.add.bind(S);
+      a.forEach((T) => {
         var L;
-        return (L = r.get(I)) == null ? void 0 : L.l.forEach(_);
-      }), a.clear(), i.forEach(_), i.clear(), l.forEach(_), l.clear(), k.forEach(S), a.size && f();
+        return (L = r.get(T)) == null ? void 0 : L.l.forEach(j);
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), S.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
-    if (v)
-      throw N;
-  }), f = h[2] || (() => {
-    const v = [], N = /* @__PURE__ */ new WeakSet(), S = /* @__PURE__ */ new WeakSet(), k = Array.from(a);
-    for (; k.length; ) {
-      const _ = k[k.length - 1], I = m(_);
-      if (S.has(_)) {
-        k.pop();
+    if (C)
+      throw E;
+  }), x = h[2] || (() => {
+    const C = [], E = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), S = Array.from(a);
+    for (; S.length; ) {
+      const j = S[S.length - 1], T = m(j);
+      if (v.has(j)) {
+        S.pop();
         continue;
       }
-      if (N.has(_)) {
-        n.get(_) === I.n && v.push([_, I]), S.add(_), k.pop();
+      if (E.has(j)) {
+        n.get(j) === T.n && C.push([j, T]), v.add(j), S.pop();
         continue;
       }
-      N.add(_);
-      for (const L of getMountedOrPendingDependents(_, I, r))
-        N.has(L) || k.push(L);
+      E.add(j);
+      for (const L of getMountedOrPendingDependents(j, T, r))
+        E.has(L) || S.push(L);
     }
-    for (let _ = v.length - 1; _ >= 0; --_) {
-      const [I, L] = v[_];
+    for (let j = C.length - 1; j >= 0; --j) {
+      const [T, L] = C[j];
       let R = !1;
-      for (const T of L.d.keys())
-        if (T !== I && a.has(T)) {
+      for (const I of L.d.keys())
+        if (I !== T && a.has(I)) {
           R = !0;
           break;
         }
-      R && (y(I), E(I)), n.delete(I);
+      R && (k(T), B(T)), n.delete(T);
     }
-  }), y = h[3] || ((v) => {
-    var N, S;
-    const k = m(v);
-    if (isAtomStateInitialized(k) && (r.has(v) && n.get(v) !== k.n || Array.from(k.d).every(
+  }), k = h[3] || ((C) => {
+    var E, v;
+    const S = m(C);
+    if (isAtomStateInitialized(S) && (r.has(C) && n.get(C) !== S.n || Array.from(S.d).every(
       ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
-        y(P).n === $
+        k(P).n === $
       )
     )))
-      return k;
-    k.d.clear();
-    let _ = !0;
-    const I = () => {
-      r.has(v) && (E(v), f(), x());
+      return S;
+    S.d.clear();
+    let j = !0;
+    const T = () => {
+      r.has(C) && (B(C), x(), f());
     }, L = (P) => {
       var $;
-      if (isSelfAtom(v, P)) {
-        const V = m(P);
-        if (!isAtomStateInitialized(V))
+      if (isSelfAtom(C, P)) {
+        const H = m(P);
+        if (!isAtomStateInitialized(H))
           if (hasInitialValue(P))
             setAtomStateValueOrPromise(P, P.init, m);
           else
             throw new Error("no atom init");
-        return returnAtomValue(V);
+        return returnAtomValue(H);
       }
-      const M = y(P);
+      const M = k(P);
       try {
         return returnAtomValue(M);
       } finally {
-        k.d.set(P, M.n), isPendingPromise(k.v) && addPendingPromiseToDependency(v, k.v, M), ($ = r.get(P)) == null || $.t.add(v), _ || I();
+        S.d.set(P, M.n), isPendingPromise(S.v) && addPendingPromiseToDependency(C, S.v, M), ($ = r.get(P)) == null || $.t.add(C), j || T();
       }
     };
-    let R, T;
+    let R, I;
     const D = {
       get signal() {
         return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !T && isActuallyWritableAtom(v) && (T = (...P) => {
-          if (!_)
+        return !I && isActuallyWritableAtom(C) && (I = (...P) => {
+          if (!j)
             try {
-              return B(v, ...P);
+              return A(C, ...P);
             } finally {
-              f(), x();
+              x(), f();
             }
-        }), T;
+        }), I;
       }
-    }, O = k.n;
+    }, O = S.n;
     try {
-      const P = d(v, L, D);
-      return setAtomStateValueOrPromise(v, P, m), isPromiseLike$1(P) && ((N = P.onCancel) == null || N.call(P, () => R == null ? void 0 : R.abort()), P.then(
-        I,
-        I
-      )), k;
+      const P = d(C, L, D);
+      return setAtomStateValueOrPromise(C, P, m), isPromiseLike$1(P) && ((E = P.onCancel) == null || E.call(P, () => R == null ? void 0 : R.abort()), P.then(
+        T,
+        T
+      )), S;
     } catch (P) {
-      return delete k.v, k.e = P, ++k.n, k;
+      return delete S.v, S.e = P, ++S.n, S;
     } finally {
-      _ = !1, O !== k.n && n.get(v) === O && (n.set(v, k.n), a.add(v), (S = c.c) == null || S.call(c, v));
+      j = !1, O !== S.n && n.get(C) === O && (n.set(C, S.n), a.add(C), (v = c.c) == null || v.call(c, C));
     }
-  }), b = h[4] || ((v) => {
-    const N = [v];
-    for (; N.length; ) {
-      const S = N.pop(), k = m(S);
-      for (const _ of getMountedOrPendingDependents(S, k, r)) {
-        const I = m(_);
-        n.set(_, I.n), N.push(_);
+  }), b = h[4] || ((C) => {
+    const E = [C];
+    for (; E.length; ) {
+      const v = E.pop(), S = m(v);
+      for (const j of getMountedOrPendingDependents(v, S, r)) {
+        const T = m(j);
+        n.set(j, T.n), E.push(j);
       }
     }
-  }), B = h[5] || ((v, ...N) => {
-    let S = !0;
-    const k = (I) => returnAtomValue(y(I)), _ = (I, ...L) => {
+  }), A = h[5] || ((C, ...E) => {
+    let v = !0;
+    const S = (T) => returnAtomValue(k(T)), j = (T, ...L) => {
       var R;
-      const T = m(I);
+      const I = m(T);
       try {
-        if (isSelfAtom(v, I)) {
-          if (!hasInitialValue(I))
+        if (isSelfAtom(C, T)) {
+          if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = T.n, O = L[0];
-          setAtomStateValueOrPromise(I, O, m), E(I), D !== T.n && (a.add(I), (R = c.c) == null || R.call(c, I), b(I));
+          const D = I.n, O = L[0];
+          setAtomStateValueOrPromise(T, O, m), B(T), D !== I.n && (a.add(T), (R = c.c) == null || R.call(c, T), b(T));
           return;
         } else
-          return B(I, ...L);
+          return A(T, ...L);
       } finally {
-        S || (f(), x());
+        v || (x(), f());
       }
     };
     try {
-      return p(v, k, _, ...N);
+      return p(C, S, j, ...E);
     } finally {
-      S = !1;
+      v = !1;
     }
-  }), E = h[6] || ((v) => {
-    var N;
-    const S = m(v), k = r.get(v);
-    if (k && !isPendingPromise(S.v)) {
-      for (const [_, I] of S.d)
-        if (!k.d.has(_)) {
-          const L = m(_);
-          A(_).t.add(v), k.d.add(_), I !== L.n && (a.add(_), (N = c.c) == null || N.call(c, _), b(_));
+  }), B = h[6] || ((C) => {
+    var E;
+    const v = m(C), S = r.get(C);
+    if (S && !isPendingPromise(v.v)) {
+      for (const [j, T] of v.d)
+        if (!S.d.has(j)) {
+          const L = m(j);
+          _(j).t.add(C), S.d.add(j), T !== L.n && (a.add(j), (E = c.c) == null || E.call(c, j), b(j));
         }
-      for (const _ of k.d || [])
-        if (!S.d.has(_)) {
-          k.d.delete(_);
-          const I = j(_);
-          I == null || I.t.delete(v);
+      for (const j of S.d || [])
+        if (!v.d.has(j)) {
+          S.d.delete(j);
+          const T = N(j);
+          T == null || T.t.delete(C);
         }
     }
-  }), A = h[7] || ((v) => {
-    var N;
-    const S = m(v);
-    let k = r.get(v);
-    if (!k) {
-      y(v);
-      for (const _ of S.d.keys())
-        A(_).t.add(v);
-      if (k = {
+  }), _ = h[7] || ((C) => {
+    var E;
+    const v = m(C);
+    let S = r.get(C);
+    if (!S) {
+      k(C);
+      for (const j of v.d.keys())
+        _(j).t.add(C);
+      if (S = {
         l: /* @__PURE__ */ new Set(),
-        d: new Set(S.d.keys()),
+        d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(v, k), (N = c.m) == null || N.call(c, v), isActuallyWritableAtom(v)) {
-        const _ = () => {
-          let I = !0;
+      }, r.set(C, S), (E = c.m) == null || E.call(c, C), isActuallyWritableAtom(C)) {
+        const j = () => {
+          let T = !0;
           const L = (...R) => {
             try {
-              return B(v, ...R);
+              return A(C, ...R);
             } finally {
-              I || (f(), x());
+              T || (x(), f());
             }
           };
           try {
-            const R = g(v, L);
-            R && (k.u = () => {
-              I = !0;
+            const R = g(C, L);
+            R && (S.u = () => {
+              T = !0;
               try {
                 R();
               } finally {
-                I = !1;
+                T = !1;
               }
             });
           } finally {
-            I = !1;
+            T = !1;
           }
         };
-        l.add(_);
+        l.add(j);
       }
     }
-    return k;
-  }), j = h[8] || ((v) => {
-    var N;
-    const S = m(v);
-    let k = r.get(v);
-    if (k && !k.l.size && !Array.from(k.t).some((_) => {
-      var I;
-      return (I = r.get(_)) == null ? void 0 : I.d.has(v);
+    return S;
+  }), N = h[8] || ((C) => {
+    var E;
+    const v = m(C);
+    let S = r.get(C);
+    if (S && !S.l.size && !Array.from(S.t).some((j) => {
+      var T;
+      return (T = r.get(j)) == null ? void 0 : T.d.has(C);
     })) {
-      k.u && i.add(k.u), k = void 0, r.delete(v), (N = c.u) == null || N.call(c, v);
-      for (const _ of S.d.keys()) {
-        const I = j(_);
-        I == null || I.t.delete(v);
+      S.u && i.add(S.u), S = void 0, r.delete(C), (E = c.u) == null || E.call(c, C);
+      for (const j of v.d.keys()) {
+        const T = N(j);
+        T == null || T.t.delete(C);
       }
       return;
     }
-    return k;
+    return S;
   }), w = [
     // store state
     o,
@@ -10432,31 +10346,31 @@ const RootLayout = () => {
     g,
     // building-block functions
     m,
-    x,
     f,
-    y,
+    x,
+    k,
     b,
-    B,
-    E,
     A,
-    j
-  ], C = {
-    get: (v) => returnAtomValue(y(v)),
-    set: (v, ...N) => {
+    B,
+    _,
+    N
+  ], y = {
+    get: (C) => returnAtomValue(k(C)),
+    set: (C, ...E) => {
       try {
-        return B(v, ...N);
+        return A(C, ...E);
       } finally {
-        f(), x();
+        x(), f();
       }
     },
-    sub: (v, N) => {
-      const k = A(v).l;
-      return k.add(N), x(), () => {
-        k.delete(N), j(v), x();
+    sub: (C, E) => {
+      const S = _(C).l;
+      return S.add(E), f(), () => {
+        S.delete(E), N(C), f();
       };
     }
   };
-  return Object.defineProperty(C, BUILDING_BLOCKS, { value: w }), C;
+  return Object.defineProperty(y, BUILDING_BLOCKS, { value: w }), y;
 }, INTERNAL_buildStoreRev1 = buildStore, createStore = () => INTERNAL_buildStoreRev1();
 let defaultStore;
 const getDefaultStore = () => (defaultStore || (defaultStore = createStore()), defaultStore), StoreContext = createContext(
@@ -10668,7 +10582,7 @@ export {
   useTheme,
   useThemeOptions,
   useToggleChaiFeatureFlag,
-  He as useTranslation,
+  Ue as useTranslation,
   useUndoManager,
   useUpdateBlocksProps,
   useUpdateBlocksPropsRealtime,