@chaibuilder/sdk 2.0.0-beta.26 → 2.0.0-beta.28

package/dist/core.js

@@ -4,23 +4,23 @@ var H = (o, r, n) => (F(o, typeof r != "symbol" ? r + "" : r, n), n);
 import { j as jsxRuntimeExports } from "./jsx-runtime-Sp0orL4X.js";
 import * as React from "react";
 import React__default, { createContext, useReducer, useEffect, useDebugValue, useCallback, useContext, useMemo, useState, Component, Children, Suspense, useRef, memo, createElement, lazy } from "react";
-import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, b as Switch, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, h as Badge, A as Accordion, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-EDKTnqIV.js";
+import { ag as useToast, S as Skeleton, B as Button, L as Label, aj as ContextMenu, ak as ContextMenuTrigger, al as ContextMenuContent, am as ContextMenuItem, O as Tooltip, P as TooltipTrigger, Q as TooltipContent, C as Card, x as CardHeader, E as CardDescription, F as CardContent, T as Textarea, y as CardFooter, D as Dialog, s as DialogTrigger, a as DialogContent, h as Badge, b as Switch, V as Popover, W as PopoverTrigger, X as PopoverContent, I as Input$1, U as TooltipPortal, e as AccordionItem, f as AccordionTrigger, g as AccordionContent, $ as DropdownMenu, a0 as DropdownMenuTrigger, a1 as DropdownMenuContent, G as ScrollArea, a5 as DropdownMenuLabel, a6 as DropdownMenuSeparator, a8 as DropdownMenuGroup, a2 as DropdownMenuItem, a7 as DropdownMenuShortcut, A as Accordion, J as Tabs, K as TabsList, M as TabsTrigger, N as TabsContent, j as AlertDialog, l as AlertDialogContent, m as AlertDialogHeader, o as AlertDialogTitle, k as AlertDialogTrigger, p as AlertDialogDescription, n as AlertDialogFooter, r as AlertDialogCancel, q as AlertDialogAction, a3 as DropdownMenuCheckboxItem, Y as HoverCard, Z as HoverCardTrigger, _ as HoverCardContent, ae as Separator, R as TooltipProvider, ai as Toaster } from "./context-menu-EDKTnqIV.js";
 import { has, find, filter, flatten, map, omit, isString, includes, without, get, compact, isObject, each, set, first, isEmpty, noop, keys, range, values, flattenDeep, startsWith, isNull, pick, sortBy, memoize, forEach, unset, chunk, cloneDeep, throttle, reverse, startCase, debounce, capitalize, flatMapDeep, split, reject, nth, toLower, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, findLast, intersection, groupBy, isFunction as isFunction$1, uniq, toUpper, round } from "lodash-es";
 import { atom as atom$1, useAtomValue as useAtomValue$1, useAtom as useAtom$1, useSetAtom as useSetAtom$1, getDefaultStore as getDefaultStore$1 } from "jotai";
 import { g as generateUUID, a as getBreakpointValue, c as cn, G as GenIcon } from "./iconBase-Ief2hJUZ.js";
 import { useTranslation, initReactI18next } from "react-i18next";
-import { useTranslation as Ke } from "react-i18next";
+import { useTranslation as Xe } from "react-i18next";
 import { e as getDefaultExportFromCjs, d as defaultThemeOptions, g as getChaiThemeOptions, p as plugin, b as getChaiThemeCssVariables, a as getThemeFontsLinkMarkup } from "./ChaiThemeFn--DgGggh_.js";
 import { useThrottledCallback, useResizeObserver, useDebouncedCallback, useIntervalEffect } from "@react-hookz/web";
 import TreeModel from "tree-model";
 import { getRegisteredChaiBlock, getDefaultBlockProps, useRegisteredChaiBlocks, getBlockFormSchemas, syncBlocksWithDefaults } from "@chaibuilder/runtime";
-import { registerChaiBlock as qe } from "@chaibuilder/runtime";
+import { registerChaiBlock as Ze } from "@chaibuilder/runtime";
 import ReactQuill, { Quill } from "react-quill";
 import { useFeature, FlagsProvider } from "flagged";
 import { useHotkeys } from "react-hotkeys-hook";
 import { flip } from "@floating-ui/dom";
 import { useFloating, shift } from "@floating-ui/react-dom";
-import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, RowsIcon, TextIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
+import { ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, DragHandleDots2Icon, BoxModelIcon, ReaderIcon, DropdownMenuIcon, BoxIcon, DragHandleHorizontalIcon, ViewHorizontalIcon, BorderAllIcon, BorderTopIcon, TableIcon, RadiobuttonIcon, InputIcon, ButtonIcon, CheckboxIcon, GroupIcon, SpaceBetweenVerticallyIcon, ColumnsIcon, TextIcon, RowsIcon, SketchLogoIcon, DividerHorizontalIcon, CodeIcon, CursorTextIcon, VideoIcon, Link1Icon, HeadingIcon, ImageIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, Cross2Icon, EyeOpenIcon, EyeClosedIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, FontItalicIcon, UnderlineIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross1Icon, InfoCircledIcon, MinusIcon, TriangleDownIcon, RowSpacingIcon, CrossCircledIcon, CaretDownIcon, CaretRightIcon, CheckIcon, ResetIcon, SunIcon, DotsVerticalIcon, MobileIcon, LaptopIcon, DesktopIcon, EraserIcon, ZoomInIcon, MixerHorizontalIcon, LightningBoltIcon } from "@radix-ui/react-icons";
 import typography from "@tailwindcss/typography";
 import forms from "@tailwindcss/forms";
 import aspectRatio from "@tailwindcss/aspect-ratio";
@@ -31,17 +31,18 @@ import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { ErrorBoundary } from "react-error-boundary";
 import { Resizable } from "re-resizable";
-import { DatabaseIcon, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, Eye, X, ChevronDown, List, Plus, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { DatabaseIcon, Columns, Rows, GlobeIcon, ChevronRight, PlusIcon as PlusIcon$1, EyeOff, Eye, X, Plus, ChevronDown, List, Loader, SparklesIcon, SmileIcon, ShuffleIcon, Edit2, Paintbrush, Layers } from "lucide-react";
 import { Tree } from "react-arborist";
 import { parse, stringify } from "himalaya";
 import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import IconPicker, { IconPickerItem } from "react-icons-picker";
+import { size } from "lodash";
 import Autosuggest from "react-autosuggest";
 import Fuse from "fuse.js";
 import clsx from "clsx";
 import i18n from "i18next";
-import { default as Je } from "i18next";
+import { default as Qe } from "i18next";
 import { motion } from "framer-motion";
 import "@radix-ui/react-switch";
 import "@radix-ui/react-accordion";
@@ -110,251 +111,251 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && Object.freeze(E);
     const R = o.get(m);
     if (o.set(m, E), n.has(m) || n.set(m, R), R && hasPromiseAtomValue(R)) {
-      const w = "v" in E ? E.v instanceof Promise ? E.v : Promise.resolve(E.v) : Promise.reject(E.e);
-      cancelPromise(R.v, w);
+      const C = "v" in E ? E.v instanceof Promise ? E.v : Promise.resolve(E.v) : Promise.reject(E.e);
+      cancelPromise(R.v, C);
     }
   }, p = (m, E, R) => {
-    const w = /* @__PURE__ */ new Map();
-    let T = !1;
-    R.forEach((k, N) => {
-      !k && N === m && (k = E), k ? (w.set(N, k), E.d.get(N) !== k && (T = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
-    }), (T || E.d.size !== w.size) && (E.d = w);
+    const C = /* @__PURE__ */ new Map();
+    let N = !1;
+    R.forEach((T, w) => {
+      !T && w === m && (T = E), T ? (C.set(w, T), E.d.get(w) !== T && (N = !0)) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] atom state not found");
+    }), (N || E.d.size !== C.size) && (E.d = C);
   }, u = (m, E, R) => {
-    const w = c(m), T = {
-      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+    const C = c(m), N = {
+      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
       v: E
     };
-    if (R && p(m, T, R), w && isEqualAtomValue(w, T) && w.d === T.d)
-      return w;
-    if (w && hasPromiseAtomValue(w) && hasPromiseAtomValue(T) && isEqualPromiseAtomValue(w, T)) {
-      if (w.d === T.d)
-        return w;
-      T.v = w.v;
+    if (R && p(m, N, R), C && isEqualAtomValue(C, N) && C.d === N.d)
+      return C;
+    if (C && hasPromiseAtomValue(C) && hasPromiseAtomValue(N) && isEqualPromiseAtomValue(C, N)) {
+      if (C.d === N.d)
+        return C;
+      N.v = C.v;
     }
-    return d(m, T), T;
-  }, x = (m, E, R, w) => {
+    return d(m, N), N;
+  }, x = (m, E, R, C) => {
     if (isPromiseLike$2(E)) {
-      let T;
-      const k = new Promise((N, $) => {
+      let N;
+      const T = new Promise((w, $) => {
         let L = !1;
         E.then(
-          (P) => {
+          (M) => {
             if (!L) {
               L = !0;
-              const M = c(m), O = u(
+              const D = c(m), O = u(
                 m,
-                k,
+                T,
                 R
               );
-              resolvePromise(k, P), N(P), (M == null ? void 0 : M.d) !== O.d && _(m, O, M == null ? void 0 : M.d);
+              resolvePromise(T, M), w(M), (D == null ? void 0 : D.d) !== O.d && I(m, O, D == null ? void 0 : D.d);
             }
           },
-          (P) => {
+          (M) => {
             if (!L) {
               L = !0;
-              const M = c(m), O = u(
+              const D = c(m), O = u(
                 m,
-                k,
+                T,
                 R
               );
-              rejectPromise(k, P), $(P), (M == null ? void 0 : M.d) !== O.d && _(m, O, M == null ? void 0 : M.d);
+              rejectPromise(T, M), $(M), (D == null ? void 0 : D.d) !== O.d && I(m, O, D == null ? void 0 : D.d);
             }
           }
-        ), T = (P) => {
-          L || (L = !0, P.then(
-            (M) => resolvePromise(k, M),
-            (M) => rejectPromise(k, M)
-          ), N(P));
+        ), N = (M) => {
+          L || (L = !0, M.then(
+            (D) => resolvePromise(T, D),
+            (D) => rejectPromise(T, D)
+          ), w(M));
         };
       });
-      return k.orig = E, k.status = "pending", registerCancelPromise(k, (N) => {
-        N && T(N), w == null || w();
-      }), u(m, k, R);
+      return T.orig = E, T.status = "pending", registerCancelPromise(T, (w) => {
+        w && N(w), C == null || C();
+      }), u(m, T, R);
     }
     return u(m, E, R);
-  }, f = (m, E, R) => {
-    const w = c(m), T = {
-      d: (w == null ? void 0 : w.d) || /* @__PURE__ */ new Map(),
+  }, h = (m, E, R) => {
+    const C = c(m), N = {
+      d: (C == null ? void 0 : C.d) || /* @__PURE__ */ new Map(),
       e: E
     };
-    return R && p(m, T, R), w && isEqualAtomError(w, T) && w.d === T.d ? w : (d(m, T), T);
+    return R && p(m, N, R), C && isEqualAtomError(C, N) && C.d === N.d ? C : (d(m, N), N);
   }, g = (m) => {
     const E = c(m);
-    if (E && (E.d.forEach((L, P) => {
-      P !== m && !r.has(P) && g(P);
-    }), Array.from(E.d).every(([L, P]) => {
-      const M = c(L);
-      return L === m || M === P || // TODO This is a hack, we should find a better solution.
-      M && !hasPromiseAtomValue(M) && isEqualAtomValue(M, P);
+    if (E && (E.d.forEach((L, M) => {
+      M !== m && !r.has(M) && g(M);
+    }), Array.from(E.d).every(([L, M]) => {
+      const D = c(L);
+      return L === m || D === M || // TODO This is a hack, we should find a better solution.
+      D && !hasPromiseAtomValue(D) && isEqualAtomValue(D, M);
     })))
       return E;
     const R = /* @__PURE__ */ new Map();
-    let w = !0;
-    const T = (L) => {
+    let C = !0;
+    const N = (L) => {
       if (L === m) {
-        const M = c(L);
-        if (M)
-          return R.set(L, M), returnAtomValue(M);
+        const D = c(L);
+        if (D)
+          return R.set(L, D), returnAtomValue(D);
         if (hasInitialValue(L))
           return R.set(L, void 0), L.init;
         throw new Error("no atom init");
       }
-      const P = g(L);
-      return R.set(L, P), returnAtomValue(P);
+      const M = g(L);
+      return R.set(L, M), returnAtomValue(M);
     };
-    let k, N;
+    let T, w;
     const $ = {
       get signal() {
-        return k || (k = new AbortController()), k.signal;
+        return T || (T = new AbortController()), T.signal;
       },
       get setSelf() {
-        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !N && isActuallyWritableAtom(m) && (N = (...L) => {
-          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && w && console.warn("setSelf function cannot be called in sync"), !w)
+        return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && !isActuallyWritableAtom(m) && console.warn("setSelf function cannot be used with read-only atom"), !w && isActuallyWritableAtom(m) && (w = (...L) => {
+          if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && C && console.warn("setSelf function cannot be called in sync"), !C)
             return A(m, ...L);
-        }), N;
+        }), w;
       }
     };
     try {
-      const L = m.read(T, $);
+      const L = m.read(N, $);
       return x(
         m,
         L,
         R,
-        () => k == null ? void 0 : k.abort()
+        () => T == null ? void 0 : T.abort()
       );
     } catch (L) {
-      return f(m, L, R);
+      return h(m, L, R);
     } finally {
-      w = !1;
+      C = !1;
     }
   }, j = (m) => returnAtomValue(g(m)), b = (m) => {
     let E = r.get(m);
-    return E || (E = C(m)), E;
-  }, h = (m, E) => !E.l.size && (!E.t.size || E.t.size === 1 && E.t.has(m)), y = (m) => {
+    return E || (E = S(m)), E;
+  }, f = (m, E) => !E.l.size && (!E.t.size || E.t.size === 1 && E.t.has(m)), y = (m) => {
     const E = r.get(m);
-    E && h(m, E) && v(m);
-  }, S = (m) => {
-    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), w = (k) => {
-      const N = r.get(k);
-      N == null || N.t.forEach(($) => {
-        $ !== k && (E.set(
+    E && f(m, E) && k(m);
+  }, v = (m) => {
+    const E = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new WeakMap(), C = (T) => {
+      const w = r.get(T);
+      w == null || w.t.forEach(($) => {
+        $ !== T && (E.set(
           $,
-          (E.get($) || /* @__PURE__ */ new Set()).add(k)
-        ), R.set($, (R.get($) || 0) + 1), w($));
+          (E.get($) || /* @__PURE__ */ new Set()).add(T)
+        ), R.set($, (R.get($) || 0) + 1), C($));
       });
     };
-    w(m);
-    const T = (k) => {
-      const N = r.get(k);
-      N == null || N.t.forEach(($) => {
+    C(m);
+    const N = (T) => {
+      const w = r.get(T);
+      w == null || w.t.forEach(($) => {
         var L;
-        if ($ !== k) {
-          let P = R.get($);
-          if (P && R.set($, --P), !P) {
-            let M = !!((L = E.get($)) != null && L.size);
-            if (M) {
+        if ($ !== T) {
+          let M = R.get($);
+          if (M && R.set($, --M), !M) {
+            let D = !!((L = E.get($)) != null && L.size);
+            if (D) {
               const O = c($), V = g($);
-              M = !O || !isEqualAtomValue(O, V);
+              D = !O || !isEqualAtomValue(O, V);
             }
-            M || E.forEach((O) => O.delete($));
+            D || E.forEach((O) => O.delete($));
           }
-          T($);
+          N($);
         }
       });
     };
-    T(m);
+    N(m);
   }, B = (m, ...E) => {
     let R = !0;
-    const w = (N) => returnAtomValue(g(N)), T = (N, ...$) => {
+    const C = (w) => returnAtomValue(g(w)), N = (w, ...$) => {
       let L;
-      if (N === m) {
-        if (!hasInitialValue(N))
+      if (w === m) {
+        if (!hasInitialValue(w))
           throw new Error("atom not writable");
-        const P = c(N), M = x(N, $[0]);
-        (!P || !isEqualAtomValue(P, M)) && S(N);
+        const M = c(w), D = x(w, $[0]);
+        (!M || !isEqualAtomValue(M, D)) && v(w);
       } else
-        L = B(N, ...$);
+        L = B(w, ...$);
       if (!R) {
-        const P = I();
+        const M = _();
         (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-          (M) => M({ type: "async-write", flushed: P })
+          (D) => D({ type: "async-write", flushed: M })
         );
       }
       return L;
-    }, k = m.write(w, T, ...E);
-    return R = !1, k;
+    }, T = m.write(C, N, ...E);
+    return R = !1, T;
   }, A = (m, ...E) => {
-    const R = B(m, ...E), w = I();
+    const R = B(m, ...E), C = _();
     return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && l.forEach(
-      (T) => T({ type: "write", flushed: w })
+      (N) => N({ type: "write", flushed: C })
     ), R;
-  }, C = (m, E) => {
+  }, S = (m, E) => {
     const R = {
       t: new Set(E && [E]),
       l: /* @__PURE__ */ new Set()
     };
-    if (r.set(m, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((w, T) => {
-      const k = r.get(T);
-      k ? k.t.add(m) : T !== m && C(T, m);
+    if (r.set(m, R), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.add(m), g(m).d.forEach((C, N) => {
+      const T = r.get(N);
+      T ? T.t.add(m) : N !== m && S(N, m);
     }), g(m), isActuallyWritableAtom(m) && m.onMount) {
-      const w = m.onMount((...T) => A(m, ...T));
-      w && (R.u = w);
+      const C = m.onMount((...N) => A(m, ...N));
+      C && (R.u = C);
     }
     return R;
-  }, v = (m) => {
+  }, k = (m) => {
     var E;
     const R = (E = r.get(m)) == null ? void 0 : E.u;
     R && R(), r.delete(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && i.delete(m);
-    const w = c(m);
-    w ? (hasPromiseAtomValue(w) && cancelPromise(w.v), w.d.forEach((T, k) => {
-      if (k !== m) {
-        const N = r.get(k);
-        N && (N.t.delete(m), h(k, N) && v(k));
+    const C = c(m);
+    C ? (hasPromiseAtomValue(C) && cancelPromise(C.v), C.d.forEach((N, T) => {
+      if (T !== m) {
+        const w = r.get(T);
+        w && (w.t.delete(m), f(T, w) && k(T));
       }
     })) : (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] could not find atom state to unmount", m);
-  }, _ = (m, E, R) => {
-    const w = new Set(E.d.keys());
-    R == null || R.forEach((T, k) => {
-      if (w.has(k)) {
-        w.delete(k);
+  }, I = (m, E, R) => {
+    const C = new Set(E.d.keys());
+    R == null || R.forEach((N, T) => {
+      if (C.has(T)) {
+        C.delete(T);
         return;
       }
-      const N = r.get(k);
-      N && (N.t.delete(m), h(k, N) && v(k));
-    }), w.forEach((T) => {
-      const k = r.get(T);
-      k ? k.t.add(m) : r.has(m) && C(T, m);
+      const w = r.get(T);
+      w && (w.t.delete(m), f(T, w) && k(T));
+    }), C.forEach((N) => {
+      const T = r.get(N);
+      T ? T.t.add(m) : r.has(m) && S(N, m);
     });
-  }, I = () => {
+  }, _ = () => {
     let m;
     for ((define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (m = /* @__PURE__ */ new Set()); n.size; ) {
       const E = Array.from(n);
-      n.clear(), E.forEach(([R, w]) => {
-        const T = c(R);
-        if (T) {
-          T.d !== (w == null ? void 0 : w.d) && _(R, T, w == null ? void 0 : w.d);
-          const k = r.get(R);
-          k && !// TODO This seems pretty hacky. Hope to fix it.
+      n.clear(), E.forEach(([R, C]) => {
+        const N = c(R);
+        if (N) {
+          N.d !== (C == null ? void 0 : C.d) && I(R, N, C == null ? void 0 : C.d);
+          const T = r.get(R);
+          T && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (w && !hasPromiseAtomValue(w) && (isEqualAtomValue(w, T) || isEqualAtomError(w, T))) && (k.l.forEach((N) => N()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
+          (C && !hasPromiseAtomValue(C) && (isEqualAtomValue(C, N) || isEqualAtomError(C, N))) && (T.l.forEach((w) => w()), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && m.add(R));
         } else
           (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && console.warn("[Bug] no atom state to flush");
       });
     }
     if ((define_import_meta_env_default$2 ? "production" : void 0) !== "production")
       return a.forEach((E) => E("state")), m;
-  }, D = (m, E) => {
-    const R = b(m), w = I(), T = R.l;
-    return T.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("sub")), l.forEach(
-      (k) => k({ type: "sub", flushed: w })
+  }, P = (m, E) => {
+    const R = b(m), C = _(), N = R.l;
+    return N.add(E), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("sub")), l.forEach(
+      (T) => T({ type: "sub", flushed: C })
     )), () => {
-      T.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((k) => k("unsub")), l.forEach((k) => k({ type: "unsub" })));
+      N.delete(E), y(m), (define_import_meta_env_default$2 ? "production" : void 0) !== "production" && (a.forEach((T) => T("unsub")), l.forEach((T) => T({ type: "unsub" })));
     };
   };
   return (define_import_meta_env_default$2 ? "production" : void 0) !== "production" ? {
     get: j,
     set: A,
-    sub: D,
+    sub: P,
     // store dev methods (these are tentative and subject to change without notice)
     dev_subscribe_store: (m, E) => E !== 2 ? (console.warn(
       "The current StoreListener revision is 2. The older ones are deprecated."
@@ -367,9 +368,9 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
     dev_get_atom_state: (m) => o.get(m),
     dev_get_mounted: (m) => r.get(m),
     dev_restore_atoms: (m) => {
-      for (const [R, w] of m)
-        hasInitialValue(R) && (x(R, w), S(R));
-      const E = I();
+      for (const [R, C] of m)
+        hasInitialValue(R) && (x(R, C), v(R));
+      const E = _();
       l.forEach(
         (R) => R({ type: "restore", flushed: E })
       );
@@ -377,7 +378,7 @@ const hasInitialValue = (o) => "init" in o, isActuallyWritableAtom = (o) => !!o.
   } : {
     get: j,
     set: A,
-    sub: D
+    sub: P
   };
 };
 let defaultStore;
@@ -394,37 +395,37 @@ function splitAtom(o, r) {
         let p = n.get(c);
         if (p)
           return p;
-        const u = d && n.get(d), x = [], f = [];
+        const u = d && n.get(d), x = [], h = [];
         return c.forEach((g, j) => {
           const b = r ? r(g) : j;
-          f[j] = b;
-          const h = u && u.atomList[u.keyList.indexOf(b)];
-          if (h) {
-            x[j] = h;
+          h[j] = b;
+          const f = u && u.atomList[u.keyList.indexOf(b)];
+          if (f) {
+            x[j] = f;
             return;
           }
           const y = (B) => {
-            const A = B(l), C = B(o), _ = a(C, A == null ? void 0 : A.arr).keyList.indexOf(b);
-            if (_ < 0 || _ >= C.length) {
-              const I = c[a(c).keyList.indexOf(b)];
-              if (I)
-                return I;
+            const A = B(l), S = B(o), I = a(S, A == null ? void 0 : A.arr).keyList.indexOf(b);
+            if (I < 0 || I >= S.length) {
+              const _ = c[a(c).keyList.indexOf(b)];
+              if (_)
+                return _;
               throw new Error("splitAtom: index out of bounds for read");
             }
-            return C[_];
-          }, S = (B, A, C) => {
-            const v = B(l), _ = B(o), D = a(_, v == null ? void 0 : v.arr).keyList.indexOf(b);
-            if (D < 0 || D >= _.length)
+            return S[I];
+          }, v = (B, A, S) => {
+            const k = B(l), I = B(o), P = a(I, k == null ? void 0 : k.arr).keyList.indexOf(b);
+            if (P < 0 || P >= I.length)
               throw new Error("splitAtom: index out of bounds for write");
-            const m = isFunction(C) ? C(_[D]) : C;
+            const m = isFunction(S) ? S(I[P]) : S;
             A(o, [
-              ..._.slice(0, D),
+              ...I.slice(0, P),
               m,
-              ..._.slice(D + 1)
+              ...I.slice(P + 1)
             ]);
           };
-          x[j] = isWritable(o) ? atom(y, S) : atom(y);
-        }), u && u.keyList.length === f.length && u.keyList.every((g, j) => g === f[j]) ? p = u : p = { arr: c, atomList: x, keyList: f }, n.set(c, p), p;
+          x[j] = isWritable(o) ? atom(y, v) : atom(y);
+        }), u && u.keyList.length === h.length && u.keyList.every((g, j) => g === h[j]) ? p = u : p = { arr: c, atomList: x, keyList: h }, n.set(c, p), p;
       }, l = atom((c) => {
         const d = c(l), p = c(o);
         return a(p, d == null ? void 0 : d.arr);
@@ -460,17 +461,17 @@ function splitAtom(o, r) {
             case "move": {
               const u = c(i).indexOf(p.atom), x = p.before ? c(i).indexOf(p.before) : c(i).length;
               if (u >= 0 && x >= 0) {
-                const f = c(o);
+                const h = c(o);
                 u < x ? d(o, [
-                  ...f.slice(0, u),
-                  ...f.slice(u + 1, x),
-                  f[u],
-                  ...f.slice(x)
+                  ...h.slice(0, u),
+                  ...h.slice(u + 1, x),
+                  h[u],
+                  ...h.slice(x)
                 ]) : d(o, [
-                  ...f.slice(0, x),
-                  f[u],
-                  ...f.slice(x, u),
-                  ...f.slice(u + 1)
+                  ...h.slice(0, x),
+                  h[u],
+                  ...h.slice(x, u),
+                  ...h.slice(u + 1)
                 ]);
               }
               break;
@@ -547,7 +548,7 @@ function atomWithStorage(o, r, n = defaultStorage, a) {
     (d) => d(i),
     (d, p, u) => {
       const x = typeof u == "function" ? u(d(i)) : u;
-      return x === RESET ? (p(i, r), n.removeItem(o)) : x instanceof Promise ? x.then((f) => (p(i, f), n.setItem(o, f))) : (p(i, x), n.setItem(o, x));
+      return x === RESET ? (p(i, r), n.removeItem(o)) : x instanceof Promise ? x.then((h) => (p(i, h), n.setItem(o, h))) : (p(i, x), n.setItem(o, x));
     }
   );
 }
@@ -1134,50 +1135,50 @@ const useBlocksStoreManager = () => {
     updateBlocksProps: c
   } = useBlocksStoreManager();
   return {
-    moveBlocks: (b, h, y) => {
-      const S = map(b, (A) => {
-        const v = r.find((D) => D._id === A)._parent || null, I = r.filter((D) => v ? D._parent === v : !D._parent).map((D) => D._id).indexOf(A);
-        return { _id: A, oldParent: v, oldPosition: I };
-      }), B = S.find(({ _id: A }) => A === b[0]);
-      B && B.oldParent === h && B.oldPosition === y || (i(b, h, y), o({
-        undo: () => each(S, ({ _id: A, oldParent: C, oldPosition: v }) => {
-          i([A], C, v);
+    moveBlocks: (b, f, y) => {
+      const v = map(b, (A) => {
+        const k = r.find((P) => P._id === A)._parent || null, _ = r.filter((P) => k ? P._parent === k : !P._parent).map((P) => P._id).indexOf(A);
+        return { _id: A, oldParent: k, oldPosition: _ };
+      }), B = v.find(({ _id: A }) => A === b[0]);
+      B && B.oldParent === f && B.oldPosition === y || (i(b, f, y), o({
+        undo: () => each(v, ({ _id: A, oldParent: S, oldPosition: k }) => {
+          i([A], S, k);
         }),
-        redo: () => i(b, h, y)
+        redo: () => i(b, f, y)
       }));
     },
-    addBlocks: (b, h, y) => {
-      a(b, h, y), o({
+    addBlocks: (b, f, y) => {
+      a(b, f, y), o({
         undo: () => l(map(b, "_id")),
-        redo: () => a(b, h, y)
+        redo: () => a(b, f, y)
       });
     },
     removeBlocks: (b) => {
       var B;
-      const h = (B = first(b)) == null ? void 0 : B._parent, S = r.filter((A) => h ? A._parent === h : !A._parent).indexOf(first(b));
+      const f = (B = first(b)) == null ? void 0 : B._parent, v = r.filter((A) => f ? A._parent === f : !A._parent).indexOf(first(b));
       l(map(b, "_id")), o({
-        undo: () => a(b, h, S),
+        undo: () => a(b, f, v),
         redo: () => l(map(b, "_id"))
       });
     },
-    updateBlocks: (b, h, y) => {
-      let S = [];
+    updateBlocks: (b, f, y) => {
+      let v = [];
       if (y)
-        S = map(b, (B) => ({ _id: B, ...y }));
+        v = map(b, (B) => ({ _id: B, ...y }));
       else {
-        const B = keys(h);
-        S = map(b, (A) => {
-          const C = r.find((_) => _._id === A), v = { _id: A };
-          return each(B, (_) => v[_] = C[_]), v;
+        const B = keys(f);
+        v = map(b, (A) => {
+          const S = r.find((I) => I._id === A), k = { _id: A };
+          return each(B, (I) => k[I] = S[I]), k;
         });
       }
-      c(map(b, (B) => ({ _id: B, ...h }))), o({
-        undo: () => c(S),
-        redo: () => c(map(b, (B) => ({ _id: B, ...h })))
+      c(map(b, (B) => ({ _id: B, ...f }))), o({
+        undo: () => c(v),
+        redo: () => c(map(b, (B) => ({ _id: B, ...f })))
       });
     },
-    updateBlocksRuntime: (b, h) => {
-      c(map(b, (y) => ({ _id: y, ...h })));
+    updateBlocksRuntime: (b, f) => {
+      c(map(b, (y) => ({ _id: y, ...f })));
     },
     setNewBlocks: (b) => {
       n(b), o({
@@ -1186,12 +1187,12 @@ const useBlocksStoreManager = () => {
       });
     },
     updateMultipleBlocksProps: (b) => {
-      let h = [];
-      h = map(b, (y) => {
-        const S = keys(y), B = r.find((C) => C._id === y._id), A = {};
-        return each(S, (C) => A[C] = B[C]), A;
+      let f = [];
+      f = map(b, (y) => {
+        const v = keys(y), B = r.find((S) => S._id === y._id), A = {};
+        return each(v, (S) => A[S] = B[S]), A;
       }), c(b), o({
-        undo: () => c(h),
+        undo: () => c(f),
         redo: () => c(b)
       });
     }
@@ -1203,9 +1204,9 @@ const useBlocksStoreManager = () => {
       for (let j = 0; j < i.length; j++) {
         const { _id: b } = i[j];
         i[j]._id = generateUUID();
-        const h = filter(i, { _parent: b });
-        for (let y = 0; y < h.length; y++)
-          h[y]._parent = i[j]._id;
+        const f = filter(i, { _parent: b });
+        for (let y = 0; y < f.length; y++)
+          f[y]._parent = i[j]._id;
       }
       const p = first(i);
       let u, x;
@@ -1216,16 +1217,16 @@ const useBlocksStoreManager = () => {
   return { addCoreBlock: useCallback(
     (i, c, d) => {
       if (has(i, "blocks")) {
-        const h = i.blocks;
-        return a(h, c, d);
+        const f = i.blocks;
+        return a(f, c, d);
       }
       const p = generateUUID(), u = getDefaultBlockProps(i.type), x = {
         _type: i.type,
         _id: p,
         ...u
       };
-      let f, g;
-      return c && (f = find(o, { _id: c }), x._parent = c, g = c), !canAcceptChildBlock(f == null ? void 0 : f._type, x._type) && f && (x._parent = f._parent, g = f._parent), n([x], g, d), r([x._id]), x;
+      let h, g;
+      return c && (h = find(o, { _id: c }), x._parent = c, g = c), !canAcceptChildBlock(h == null ? void 0 : h._type, x._type) && h && (x._parent = h._parent, g = h._parent), n([x], g, d), r([x._id]), x;
     },
     [n, a, o, r]
   ), addPredefinedBlock: a };
@@ -2367,13 +2368,13 @@ function getNewClasses(o = "", r = "", n = []) {
   );
   const i = [], c = [];
   each(n, (u) => {
-    const x = constructClassObject(u), f = find(a, pick(x, ["dark", "mq", "mod", "property"]));
-    if (f && (a = filter(
+    const x = constructClassObject(u), h = find(a, pick(x, ["dark", "mq", "mod", "property"]));
+    if (h && (a = filter(
       a,
-      (g) => g.fullCls !== (f == null ? void 0 : f.fullCls)
+      (g) => g.fullCls !== (h == null ? void 0 : h.fullCls)
     )), i.push(x), x.mq === "xs" && !x.dark && x.mod === "" && (l = filter(l, (g) => g.property !== x.property)), getBelongsToForClass(a, x) === "baseClasses" && !includes(IGNORED_BASES_CLASSES_PROPERTIES, x.property)) {
       const g = find(l, pick(x, ["property"]));
-      f && (l = filter(
+      h && (l = filter(
         l,
         (j) => j.fullCls !== (g == null ? void 0 : g.fullCls)
       )), c.push({
@@ -2471,8 +2472,8 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
         const x = filter(
           o,
           (g) => isString(l) ? g._parent === l : !d._parent
-        ).indexOf(d) + 1, f = getDuplicatedBlocks(o, c, l);
-        n(f, l, x), i.push(get(f, "0._id", ""));
+        ).indexOf(d) + 1, h = getDuplicatedBlocks(o, c, l);
+        n(h, l, x), i.push(get(h, "0._id", ""));
       }), r(i);
     },
     [o, r]
@@ -2563,13 +2564,13 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), get
   return map(i, (c) => {
     const d = o(c), p = a;
     let { classes: u, baseClasses: x } = getSplitClasses(get(d, l.prop, "styles:,"));
-    return each(p, (f) => {
-      const g = f.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${g}($| )`, "g");
+    return each(p, (h) => {
+      const g = h.replace(/[\[\]\/\\{}()*+?.^$|]/g, "\\$&"), j = new RegExp(`(^| )${g}($| )`, "g");
       u = u.replace(j, " ").replace(/  +/g, " ").trim();
-      const b = first(f.split(":"));
-      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(f.split(":").pop().trim());
-    }), each(p, (f) => {
-      const g = new RegExp(`(^| )${f.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
+      const b = first(h.split(":"));
+      includes(["2xl", "xl", "lg", "md", "sm"], b) && p.push(h.split(":").pop().trim());
+    }), each(p, (h) => {
+      const g = new RegExp(`(^| )${h.replace("[", "\\[").replace("]", "\\]")}($| )`, "g");
       x = x.replace(g, " ").replace(/  +/g, " ").trim();
     }), {
       ids: [d._id],
@@ -3021,39 +3022,39 @@ 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(!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(), x = p.length ? p : u, f = (g, j) => {
-    const b = cloneDeep(j.find((h) => h._id === g));
-    for (const h in b) {
-      const y = b[h];
-      typeof y == "string" && startsWith(y, STYLES_KEY) ? b[h] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : h !== "_id" && delete b[h];
+  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(), x = p.length ? p : u, h = (g, j) => {
+    const b = cloneDeep(j.find((f) => f._id === g));
+    for (const f in b) {
+      const y = b[f];
+      typeof y == "string" && startsWith(y, STYLES_KEY) ? b[f] = compact(flattenDeep(y.replace(STYLES_KEY, "").split(","))).join(" ") : f !== "_id" && delete b[f];
     }
     return b;
   };
   return {
     askAi: useCallback(
-      async (g, j, b, h) => {
+      async (g, j, b, f) => {
         if (l) {
           r(!0), a(null);
           try {
-            const y = p === u ? "" : p, S = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(j, d)), p) : [f(j, d)], B = await l(g, addLangToPrompt(b, x, g), S, y), { blocks: A, error: C } = B;
-            if (C) {
-              a(C);
+            const y = p === u ? "" : p, v = g === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(j, d)), p) : [h(j, d)], B = await l(g, addLangToPrompt(b, x, g), v, y), { blocks: A, error: S } = B;
+            if (S) {
+              a(S);
               return;
             }
             if (g === "styles") {
-              const v = A.map((_) => {
-                for (const I in _)
-                  I !== "_id" && (_[I] = `${STYLES_KEY},${_[I]}`);
-                return _;
+              const k = A.map((I) => {
+                for (const _ in I)
+                  _ !== "_id" && (I[_] = `${STYLES_KEY},${I[_]}`);
+                return I;
               });
-              c(v);
+              c(k);
             } else
               i(A);
-            h && h(B);
+            f && f(B);
           } catch (y) {
             a(y);
           } finally {
-            r(!1), h && h();
+            r(!1), f && f();
           }
         }
       },
@@ -3164,10 +3165,10 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), layoutVariantAto
     if (d < r) {
       const u = parseFloat((d / r).toFixed(2).toString());
       let x = {};
-      const f = p * u, g = d * u;
+      const h = p * u, g = d * u;
       p && (x = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
-        height: 100 + (p - f) / f * 100 + "%",
+        height: 100 + (p - h) / h * 100 + "%",
         width: 100 + (d - g) / g * 100 + "%"
       }), i({
         position: "relative",
@@ -3347,7 +3348,7 @@ const useDnd = () => {
   const { document: o } = useFrame(), [r, n] = useAtom$1(draggingFlagAtom), { addCoreBlock: a } = useAddBlock(), [, l] = useHighlightBlockId(), [, i] = useSelectedBlockIds(), { moveBlocks: c } = useBlocksStoreUndoableActions(), [d, p] = useAtom$1(draggedBlockAtom), [, u] = useAtom$1(dropTargetBlockIdAtom);
   if (!useFeature("dnd"))
     return {};
-  const f = () => {
+  const h = () => {
     removePlaceholder(), n(!1), p(null), u(null), possiblePositions = [];
   };
   return iframeDocument = o, {
@@ -3356,26 +3357,26 @@ const useDnd = () => {
       g.preventDefault(), g.stopPropagation(), throttledDragOver(g);
     },
     onDrop: (g) => {
-      var C;
-      const j = dropTarget, h = getOrientation(j) === "vertical" ? g.clientY + ((C = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : C.scrollY) : g.clientX;
-      dropIndex = calculateDropIndex(h, possiblePositions);
-      const y = d, S = j.getAttribute("data-block-id"), B = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
-      if ((y == null ? void 0 : y._id) === S || !B) {
-        f();
+      var S;
+      const j = dropTarget, f = getOrientation(j) === "vertical" ? g.clientY + ((S = iframeDocument == null ? void 0 : iframeDocument.defaultView) == null ? void 0 : S.scrollY) : g.clientX;
+      dropIndex = calculateDropIndex(f, possiblePositions);
+      const y = d, v = j.getAttribute("data-block-id"), B = dropTarget.getAttribute("data-dnd-dragged") !== "yes";
+      if ((y == null ? void 0 : y._id) === v || !B) {
+        h();
         return;
       }
       if (!has(y, "_id")) {
-        a(y, S === "canvas" ? null : S, dropIndex), setTimeout(f, 300);
+        a(y, v === "canvas" ? null : v, dropIndex), setTimeout(h, 300);
         return;
       }
       let A = j.getAttribute("data-block-id");
-      A === null && (A = g.target.parentElement.getAttribute("data-block-id")), c([y._id], A === "canvas" ? null : A, dropIndex), f(), setTimeout(removePlaceholder, 300);
+      A === null && (A = g.target.parentElement.getAttribute("data-block-id")), c([y._id], A === "canvas" ? null : A, dropIndex), h(), setTimeout(removePlaceholder, 300);
     },
     onDragEnter: (g) => {
       const j = g, b = j.target;
       dropTarget = b;
-      const h = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
-      u(h), j.stopPropagation(), j.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), n(!0), l(""), i([]);
+      const f = b.getAttribute("data-block-id"), y = b.getAttribute("data-dnd-dragged") !== "yes";
+      u(f), j.stopPropagation(), j.preventDefault(), possiblePositions = [], y && calculatePossiblePositions(b), n(!0), l(""), i([]);
     },
     onDragLeave: (g) => {
       g.target.getAttribute("data-block-id") === "canvas" && (u(null), n(!1), removePlaceholder(), possiblePositions = []);
@@ -3398,7 +3399,7 @@ function destroyQuill(o) {
 const useHandleCanvasDblClick = () => {
   const o = ["Heading", "Paragraph", "Text", "Link", "Span", "Button"], r = useUpdateBlocksProps(), [n, a] = useAtom$1(inlineEditingActiveAtom), { clearHighlight: l } = useBlockHighlight();
   return (i) => {
-    var f;
+    var h;
     if (n)
       return;
     const c = getTargetedBlock(i.target), d = c.getAttribute("data-block-type");
@@ -3417,7 +3418,7 @@ const useHandleCanvasDblClick = () => {
       g.stopPropagation();
     }), p.addEventListener("keydown", (g) => {
       (g.key === "Enter" || g.key === "Escape") && x();
-    }), u.focus(), (f = p.querySelector(".ql-clipboard")) == null || f.remove(), a(c.getAttribute("data-block-id"));
+    }), u.focus(), (h = p.querySelector(".ql-clipboard")) == null || h.remove(), a(c.getAttribute("data-block-id"));
   };
 }, useHandleCanvasClick = () => {
   const [, o] = useSelectedStylingBlocks(), [r, n] = useSelectedBlockIds(), [a] = useAtom$1(inlineEditingActiveAtom), [l] = useAtom$1(treeRefAtom), { clearHighlight: i } = useBlockHighlight();
@@ -3456,11 +3457,11 @@ const useHandleCanvasDblClick = () => {
     setTimeout(() => {
       if (!isEmpty(a))
         return;
-      const f = getElementByDataBlockId(r, first(n));
-      if (f) {
-        const g = f.getAttribute("data-style-prop");
+      const h = getElementByDataBlockId(r, first(n));
+      if (h) {
+        const g = h.getAttribute("data-style-prop");
         if (g) {
-          const j = f.getAttribute("data-style-id"), b = f.getAttribute("data-block-parent");
+          const j = h.getAttribute("data-style-id"), b = h.getAttribute("data-block-parent");
           l([{ id: j, prop: g, blockId: b }]);
         }
       }
@@ -3482,14 +3483,14 @@ const useHandleCanvasDblClick = () => {
     }
   );
 }, getElementByDataBlockId = (o, r) => o.querySelector(`[data-block-id="${r}"]`), useKeyEventWatcher = (o) => {
-  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: f } = usePasteBlocks();
+  const [r, n] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlockIds(), { canPaste: x, pasteBlocks: h } = usePasteBlocks();
   useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(r), {}, [r, p]), useHotkeys("ctrl+c,command+c", () => u(r), {}, [r, u]), useHotkeys(
     "ctrl+v,command+v",
     () => {
-      x(r[0]) && f(r);
+      x(r[0]) && h(r);
     },
     {},
-    [r, x, f]
+    [r, x, h]
   );
   const g = o ? { document: o } : {};
   useHotkeys("esc", () => n([]), g, [n]), useHotkeys("ctrl+d,command+d", () => i(r), { ...g, preventDefault: !0 }, [
@@ -3553,7 +3554,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     }
   });
   useResizeObserver(o, () => x(), o !== null);
-  const f = get(r, "_parent", null), g = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
+  const h = get(r, "_parent", null), g = isEmpty(get(r, "_name", "")) ? get(r, "_type", "") : get(r, "_name", "");
   return !o || !r || d ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -3570,12 +3571,12 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       onKeyDown: (j) => j.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
-        f && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        h && /* @__PURE__ */ jsxRuntimeExports.jsx(
           ArrowUpIcon,
           {
             className: "hover:scale-105",
             onClick: () => {
-              c([]), l([f]);
+              c([]), l([h]);
             }
           }
         ),
@@ -3597,7 +3598,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
 }, HeadTags = () => {
   const [o] = useTheme(), r = useThemeOptions(), [n] = useSelectedBlockIds(), [a] = useDarkMode(), [l] = useSelectedStylingBlocks(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), { document: d, window: p } = useFrame(), [u] = useState(d == null ? void 0 : d.getElementById("highlighted-block")), [x] = useState(
     d == null ? void 0 : d.getElementById("selected-block")
-  ), [f] = useState(
+  ), [h] = useState(
     d == null ? void 0 : d.getElementById("selected-styling-block")
   ), [g] = useState(
     d == null ? void 0 : d.getElementById("dragged-block")
@@ -3623,8 +3624,8 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
         typography,
         forms,
         aspectRatio,
-        plugin(function({ addBase: h, theme: y }) {
-          h({
+        plugin(function({ addBase: f, theme: y }) {
+          f({
             "h1,h2,h3,h4,h5,h6": {
               fontFamily: y("fontFamily.heading")
             },
@@ -3638,7 +3639,7 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
       ]
     });
   }, [o, r, p]), useEffect(() => {
-    x && (x.textContent = `${map(n, (h) => `[data-block-id="${h}"]`).join(",")}{
+    x && (x.textContent = `${map(n, (f) => `[data-block-id="${f}"]`).join(",")}{
                 outline: 1px solid ${n.length === 1 ? "#42a1fc !important" : "orange !important"}; outline-offset: -1px;
             }`);
   }, [n, x]), useEffect(() => {
@@ -3646,10 +3647,10 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
   }, [i, g]), useEffect(() => {
     u && (u.textContent = '[data-highlighted="true"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}');
   }, [u]), useEffect(() => {
-    f && (f.textContent = `${map(l, ({ id: h }) => `[data-style-id="${h}"]`).join(",")}{
+    h && (h.textContent = `${map(l, ({ id: f }) => `[data-style-id="${f}"]`).join(",")}{
                 outline: 1px solid orange !important; outline-offset: -1px;
             }`);
-  }, [l, f]), useEffect(() => {
+  }, [l, h]), useEffect(() => {
     d.querySelector("#drop-target-block").innerHTML = c ? `[data-block-id="${c}"]{ outline: 1px dashed orange !important; outline-offset: -1px;}` : "";
   }, [c, d]);
   const j = useMemo(
@@ -3668,11 +3669,11 @@ const pubsub = new PubSub(), BlockActionLabel = ({ block: o, label: r }) => {
     p || (p = d, d = "xs");
     const u = n.indexOf(d);
     if (u <= a) {
-      const x = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], f = ["hidden"];
+      const x = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"], h = ["hidden"];
       if (x.includes(p))
         for (let g = u; g < n.length; g++)
           i[g] = !0;
-      else if (f.includes(p))
+      else if (h.includes(p))
         for (let g = u; g < n.length; g++)
           i[g] = !1;
     }
@@ -3740,62 +3741,62 @@ function applyLanguage(o, r, n) {
   }), a;
 }
 function BlocksRendererStatic({ blocks: o, allBlocks: r }) {
-  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), f = useCallback((h) => getStyleAttrs(h, d), [d]), [g] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
-    (h) => h.reduce((y, S) => {
-      const B = get(p, S, {});
+  const { selectedLang: n } = useLanguages(), [a] = useAtom$1(xShowBlocksAtom), [l] = useCutBlockIds(), [i] = useAtom$1(draggedBlockAtom), [c] = useAtom$1(dropTargetBlockIdAtom), [, d] = useCanvasWidth(), [p] = useCanvasSettings(), [u] = useHiddenBlockIds(), { getGlobalBlocks: x } = useGlobalBlocksStore(), h = useCallback((f) => getStyleAttrs(f, d), [d]), [g] = useChaiExternalData(), [j] = useAtom$1(inlineEditingActiveAtom), b = useCallback(
+    (f) => f.reduce((y, v) => {
+      const B = get(p, v, {});
       return { ...y, ...B };
     }, {}),
     [p]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
-    o.map((h, y) => {
-      if (j === h._id || u.includes(h._id))
+    o.map((f, y) => {
+      if (j === f._id || u.includes(f._id))
         return null;
-      const S = {}, B = filter(r, { _parent: h._id });
-      if (S.children = B.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: B }) : null, h._type === "GlobalBlock") {
-        const w = x(h);
-        S.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(w, (T) => !T._parent), allBlocks: w });
+      const v = {}, B = filter(r, { _parent: f._id });
+      if (v.children = B.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(BlocksRendererStatic, { allBlocks: r, blocks: B }) : null, f._type === "GlobalBlock") {
+        const C = x(f);
+        v.children = /* @__PURE__ */ jsxRuntimeExports.jsx(RenderGlobalBlock, { blocks: filter(C, (N) => !N._parent), allBlocks: C });
       }
-      const A = getRegisteredChaiBlock(h._type), C = get(A, "component", null);
-      if (isNull(C))
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${h == null ? void 0 : h._type} not registered -->` });
-      const v = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(h, r) : [], _ = b(v), I = f(h);
-      if (get(I, "__isHidden", !1) && !includes(a, h._id))
+      const A = getRegisteredChaiBlock(f._type), S = get(A, "component", null);
+      if (isNull(S))
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("noscript", { children: `<!-- ${f == null ? void 0 : f._type} not registered -->` });
+      const k = has(A, "getBlockStateFrom") ? A == null ? void 0 : A.getBlockStateFrom(f, r) : [], I = b(k), _ = h(f);
+      if (get(_, "__isHidden", !1) && !includes(a, f._id))
         return null;
-      const D = i && isDescendant(i._id, h._id, r), E = {
+      const P = i && isDescendant(i._id, f._id, r), E = {
         blockProps: {
-          ...includes(a, h._id) ? { "force-show": "" } : {},
-          "data-block-id": h._id,
-          "data-block-type": h._type,
+          ...includes(a, f._id) ? { "force-show": "" } : {},
+          "data-block-id": f._id,
+          "data-block-type": f._type,
           ...i ? (
             // @ts-ignore
             {
-              "data-dnd": canAcceptChildBlock(h._type, i == null ? void 0 : i._type) ? "yes" : "no",
-              "data-dnd-dragged": i._id === h._id || D ? "yes" : "no"
+              "data-dnd": canAcceptChildBlock(f._type, i == null ? void 0 : i._type) ? "yes" : "no",
+              "data-dnd-dragged": i._id === f._id || P ? "yes" : "no"
             }
           ) : {},
-          ...c === h._id && !D ? { "data-drop": "yes" } : {},
-          ...includes(l, h._id) ? { "data-cut-block": "yes" } : {}
+          ...c === f._id && !P ? { "data-drop": "yes" } : {},
+          ...includes(l, f._id) ? { "data-cut-block": "yes" } : {}
         },
         index: y,
-        ...applyBindings(applyLanguage(h, n, A), g),
-        ...omit(I, ["__isHidden"]),
-        ...S,
+        ...applyBindings(applyLanguage(f, n, A), g),
+        ...omit(_, ["__isHidden"]),
+        ...v,
         inBuilder: !0,
-        blockState: _
+        blockState: I
       };
       if (has(A, "dataProvider"))
         return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           AsyncPropsBlock,
           {
             dataProvider: A.dataProvider,
-            block: h,
-            component: C,
+            block: f,
+            component: S,
             props: E
           }
         ) });
-      const R = getRuntimeProps(h._type);
-      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: R, block: h, component: C, props: E }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(C, E) });
+      const R = getRuntimeProps(f._type);
+      return R ? /* @__PURE__ */ jsxRuntimeExports.jsx(RuntimePropsBlock, { runtimeProps: R, block: f, component: S, props: E }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: React__default.createElement(S, E) });
     })
   ) });
 }
@@ -3850,47 +3851,47 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "main-content", onClick: d, className: "h-full w-full p-8 pb-0", ref: i, children: o });
 }, getElementByStyleId = (o, r) => o.querySelector(`[data-style-id="${r}"]`), StaticCanvas = () => {
-  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, f] = useState([]), [, g] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [b, h] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), S = useBuilderProp("htmlDir", "ltr"), B = (v) => {
-    p((_) => ({ ..._, width: v }));
+  const [o] = useAtom$1(networkModeAtom), [r] = useCanvasWidth(), [, n] = useSelectedBlockIds(), a = useSelectedBlock(), [, l] = useHighlightBlockId(), i = useRef(null), c = useRef(null), [d, p] = useState({ width: 0, height: 0 }), u = useCanvasScale(d), [x, h] = useState([]), [, g] = useState([]), [, j] = useAtom$1(canvasIframeAtom), [b, f] = useSelectedStylingBlocks(), y = useBuilderProp("loading", !1), v = useBuilderProp("htmlDir", "ltr"), B = (k) => {
+    p((I) => ({ ...I, width: k }));
   };
   useEffect(() => {
     if (!c.current)
       return;
-    const { clientWidth: v, clientHeight: _ } = c.current;
-    p({ width: v, height: _ });
+    const { clientWidth: k, clientHeight: I } = c.current;
+    p({ width: k, height: I });
   }, [c, r]);
-  const A = (v, _ = 0) => {
-    const { top: I } = v.getBoundingClientRect();
-    return I + _ >= 0 && I - _ <= window.innerHeight;
+  const A = (k, I = 0) => {
+    const { top: _ } = k.getBoundingClientRect();
+    return _ + I >= 0 && _ - I <= window.innerHeight;
   };
   useEffect(() => {
-    var v, _;
+    var k, I;
     if (a && a.type !== "Multiple" && i.current) {
-      const I = getElementByDataBlockId(i.current.contentDocument, a._id);
-      I && (A(I) || (_ = (v = i.current) == null ? void 0 : v.contentWindow) == null || _.scrollTo({ top: I.offsetTop, behavior: "smooth" }), f([I]));
+      const _ = getElementByDataBlockId(i.current.contentDocument, a._id);
+      _ && (A(_) || (I = (k = i.current) == null ? void 0 : k.contentWindow) == null || I.scrollTo({ top: _.offsetTop, behavior: "smooth" }), h([_]));
     }
   }, [a]), useEffect(() => {
     if (!isEmpty(b) && i.current) {
-      const v = getElementByStyleId(
+      const k = getElementByStyleId(
         i.current.contentDocument,
         first(b).id
       );
-      g(v ? [v] : [null]);
+      g(k ? [k] : [null]);
     } else
       g([null]);
   }, [b]);
-  const C = useMemo(() => {
-    let v = IframeInitialContent;
-    return v = v.replace("__HTML_DIR__", S), o === "offline" && (v = v.replace(
+  const S = useMemo(() => {
+    let k = IframeInitialContent;
+    return k = k.replace("__HTML_DIR__", v), o === "offline" && (k = k.replace(
       "https://old.chaibuilder.com/offline/tailwind.cdn.js",
       "/offline/tailwind.cdn.js"
-    ), v = v.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), v = v.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), v;
-  }, [o, S]);
+    ), k = k.replace("https://unpkg.com/aos@next/dist/aos.css", "/offline/aos.css"), k = k.replace("https://unpkg.com/aos@next/dist/aos.js", "/offline/aos.js")), k;
+  }, [o, v]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizableCanvasWrapper, { onMount: B, onResize: B, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       onClick: () => {
-        n([]), h([]);
+        n([]), f([]);
       },
       onMouseLeave: () => setTimeout(() => l(""), 300),
       className: "relative mx-auto h-full w-full overflow-hidden",
@@ -3903,7 +3904,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
           id: "canvas-iframe",
           style: { ...u, ...isEmpty(u) ? { width: `${r}px` } : {} },
           className: "relative mx-auto box-content h-full w-full max-w-full shadow-lg transition-all duration-300 ease-linear",
-          initialContent: C,
+          initialContent: S,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(KeyboardHandler, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -3966,7 +3967,9 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     case "Paragraph":
       return /* @__PURE__ */ jsxRuntimeExports.jsx(TextIcon, { className: "h-3 w-3 stroke-[2]" });
     case "Row":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(RowsIcon, { className: "h-3 w-3 stroke-[2]" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Rows, { className: "h-3 w-3 stroke-[2]" });
+    case "Column":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Columns, { className: "h-3 w-3 stroke-[2]" });
     case "ListItem":
       return /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnsIcon, { className: "h-3 w-3 stroke-[2]" });
     case "LineBreak":
@@ -4031,7 +4034,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       l !== o.length - 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "rtl:rotate-180", size: 16 })
     ] }, l))
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-NoUXWcBN.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./CodeEditor-ZGLfJqiA.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(StaticCanvas$1, {}) }) }),
@@ -4142,58 +4145,58 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
     }
   );
 }, BorderRadiusInput$1 = BorderRadiusInput, ThemeConfigPanel$1 = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (h) => {
-    a(h);
+  const [r] = useDarkMode(), [n, a] = React.useState(""), l = useBuilderProp("themePresets", []), [i, c] = useTheme(), d = useThemeOptions(), { t: p } = useTranslation(), u = (f) => {
+    a(f);
   }, x = () => {
-    const h = l.find((y) => Object.keys(y)[0] === n);
-    if (h) {
-      const y = Object.values(h)[0];
+    const f = l.find((y) => Object.keys(y)[0] === n);
+    if (f) {
+      const y = Object.values(f)[0];
       y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? c(y) : console.error("Invalid preset structure:", y);
     } else
       console.error("Preset not found:", n);
-  }, f = useDebouncedCallback(
-    (h, y) => {
+  }, h = useDebouncedCallback(
+    (f, y) => {
       c(() => ({
         ...i,
         fontFamily: {
           ...i.fontFamily,
-          [h.replace(/font-/g, "")]: y
+          [f.replace(/font-/g, "")]: y
         }
       }));
     },
     [i],
     200
   ), g = useDebouncedCallback(
-    (h) => {
+    (f) => {
       c(() => ({
         ...i,
-        borderRadius: `${h}px`
+        borderRadius: `${f}px`
       }));
     },
     [i],
     200
   ), j = useDebouncedCallback(
-    (h, y) => {
+    (f, y) => {
       c(() => {
-        const S = get(i, `colors.${h}`);
-        return r ? set(S, 1, y) : set(S, 0, y), {
+        const v = get(i, `colors.${f}`);
+        return r ? set(v, 1, y) : set(v, 0, y), {
           ...i,
           colors: {
             ...i.colors,
-            [h]: S
+            [f]: v
           }
         };
       });
     },
     [i],
     200
-  ), b = (h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(h.items).map(([y]) => {
-    const S = get(i, `colors.${y}.${r ? 1 : 0}`);
+  ), b = (f) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1", children: Object.entries(f.items).map(([y]) => {
+    const v = get(i, `colors.${y}.${r ? 1 : 0}`);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ColorPickerInput$1,
         {
-          value: S,
+          value: v,
           onChange: (B) => j(y, B)
         }
       ),
@@ -4208,11 +4211,11 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
           "select",
           {
             value: n,
-            onChange: (h) => u(h.target.value),
+            onChange: (f) => u(f.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__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select preset" }),
-              Array.isArray(l) && l.map((h) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(h)[0], children: capitalize(Object.keys(h)[0]) }, Object.keys(h)[0]))
+              Array.isArray(l) && l.map((f) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: Object.keys(f)[0], children: capitalize(Object.keys(f)[0]) }, Object.keys(f)[0]))
             ]
           }
         )
@@ -4220,14 +4223,14 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { className: "w-full text-sm", disabled: n === "", variant: "default", onClick: x, children: p("Apply") }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("space-y-2", o), children: [
-      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([h, y]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      (d == null ? void 0 : d.fontFamily) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid gap-4", children: Object.entries(d.fontFamily).map(([f, y]) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         FontSelector$1,
         {
-          label: h,
-          value: i.fontFamily[h.replace(/font-/g, "")] || y[Object.keys(y)[0]],
-          onChange: (S) => f(h, S)
+          label: f,
+          value: i.fontFamily[f.replace(/font-/g, "")] || y[Object.keys(y)[0]],
+          onChange: (v) => h(f, v)
         },
-        h
+        f
       )) }),
       (d == null ? void 0 : d.borderRadius) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-0.5 py-3", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Border Radius") }),
@@ -4238,7 +4241,7 @@ const usePageDataProviders = () => useAtom$1(dataProvidersAtom), useAllDataProvi
       ] }),
       (d == null ? void 0 : d.colors) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-4 space-y-0.5", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm text-slate-800", children: p("Colors") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((h) => b(h)) }, r ? "dark" : "light")
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-full space-y-4 pt-2", children: d.colors.map((f) => b(f)) }, r ? "dark" : "light")
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
@@ -4433,52 +4436,53 @@ function BiExpandVertical(o) {
   return GenIcon({ tag: "svg", attr: { viewBox: "0 0 24 24" }, child: [{ tag: "path", attr: { d: "m12 19.24-4.95-4.95-1.41 1.42L12 22.07l6.36-6.36-1.41-1.42L12 19.24zM5.64 8.29l1.41 1.42L12 4.76l4.95 4.95 1.41-1.42L12 1.93 5.64 8.29z" }, child: [] }] })(o);
 }
 const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, dragHandle: n }) => {
+  var T;
   const a = useBuilderProp("outlineMenuItems", []), { t: l } = useTranslation(), [i, , c] = useHiddenBlockIds(), [d] = useAtom$1(canvasIframeAtom);
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: f } = useBlockHighlight(), { id: g, data: j, isSelected: b, willReceiveDrop: h, isDragging: y, isEditing: S, handleClick: B } = o, A = (k) => {
-    k.stopPropagation(), !i.includes(g) && o.toggle();
-  }, C = (k) => {
-    k.isInternal && (p = k.isOpen, k.isOpen && k.close());
-  }, v = (k) => {
-    k.isInternal && p !== null && (p ? k.open() : k.close(), p = null);
-  }, [_, I] = useAtom$1(currentAddSelection), D = () => {
-    var N, $;
-    m(), document.getElementById(`tree-node-${(N = o == null ? void 0 : o.parent) == null ? void 0 : N.id}`) && !o.parent.isSelected && I(($ = o == null ? void 0 : o.parent) == null ? void 0 : $.id);
+  const u = o.children.length > 0, { highlightBlock: x, clearHighlight: h } = useBlockHighlight(), { id: g, data: j, isSelected: b, willReceiveDrop: f, isDragging: y, isEditing: v, handleClick: B } = o, A = (w) => {
+    w.stopPropagation(), !i.includes(g) && o.toggle();
+  }, S = (w) => {
+    w.isInternal && (p = w.isOpen, w.isOpen && w.close());
+  }, k = (w) => {
+    w.isInternal && p !== null && (p ? w.open() : w.close(), p = null);
+  }, [I, _] = useAtom$1(currentAddSelection), P = () => {
+    var w;
+    m(), o.parent.isSelected || _((w = o == null ? void 0 : o.parent) == null ? void 0 : w.id);
   }, m = () => {
-    I(null);
-  }, E = (k) => {
-    m(), k.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), B(k);
+    _(null);
+  }, E = (w) => {
+    m(), w.stopPropagation(), !o.isOpen && !i.includes(g) && o.toggle(), B(w);
   };
   useEffect(() => {
-    const k = setTimeout(() => {
-      h && !o.isOpen && !y && !i.includes(g) && o.toggle();
+    const w = setTimeout(() => {
+      f && !o.isOpen && !y && !i.includes(g) && o.toggle();
     }, 500);
-    return () => clearTimeout(k);
-  }, [h, o, y]);
+    return () => clearTimeout(w);
+  }, [f, o, y]);
   const R = useMemo(() => {
-    const k = Object.keys(j), N = [];
-    for (let $ = 0; $ < k.length; $++)
-      if (k[$].endsWith("_attrs")) {
-        const L = j[k[$]], P = Object.keys(L).join("|");
-        P.match(/x-data/) && N.push("data"), P.match(/x-on/) && N.push("event"), P.match(/x-show|x-if/) && N.push("show");
+    const w = Object.keys(j), $ = [];
+    for (let L = 0; L < w.length; L++)
+      if (w[L].endsWith("_attrs")) {
+        const M = j[w[L]], D = Object.keys(M).join("|");
+        D.match(/x-data/) && $.push("data"), D.match(/x-on/) && $.push("event"), D.match(/x-show|x-if/) && $.push("show");
       }
-    return N;
-  }, [j]), w = (k, N) => {
-    const $ = d.contentDocument || d.contentWindow.document, L = $.querySelector(`[data-block-id=${k}]`);
-    L && L.setAttribute("data-drop", N);
-    const P = L.getBoundingClientRect(), M = d.getBoundingClientRect();
-    P.top >= M.top && P.left >= M.left && P.bottom <= M.bottom && P.right <= M.right || ($.documentElement.scrollTop = L.offsetTop - M.top);
-  }, T = (k) => {
+    return $;
+  }, [j]), C = (w, $) => {
+    const L = d.contentDocument || d.contentWindow.document, M = L.querySelector(`[data-block-id=${w}]`);
+    M && M.setAttribute("data-drop", $);
+    const D = M.getBoundingClientRect(), O = d.getBoundingClientRect();
+    D.top >= O.top && D.left >= O.left && D.bottom <= O.bottom && D.right <= O.right || (L.documentElement.scrollTop = M.offsetTop - O.top);
+  }, N = (w) => {
     m();
-    const N = get(o, "parent.id");
-    N !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: N, position: k }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK);
+    const $ = get(o, "parent.id");
+    $ !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: $, position: w }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: w });
   };
   return g === ROOT_TEMP_KEY ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative w-full cursor-pointer", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        onClick: () => T(-1),
+        onClick: () => N(-1),
         className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
         children: /* @__PURE__ */ jsxRuntimeExports.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-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
@@ -4492,42 +4496,43 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     "div",
     {
       onMouseEnter: () => x(g),
-      onMouseLeave: () => f(),
+      onMouseLeave: () => h(),
       onClick: E,
       style: r,
       "data-node-id": g,
       ref: i.includes(g) ? null : n,
-      onDragStart: () => C(o),
-      onDragEnd: () => v(o),
-      onDragOver: (k) => {
-        k.preventDefault(), w(g, "yes");
+      onDragStart: () => S(o),
+      onDragEnd: () => k(o),
+      onDragOver: (w) => {
+        w.preventDefault(), C(g, "yes");
       },
-      onDragLeave: (k) => {
-        k.preventDefault(), w(g, "no");
+      onDragLeave: (w) => {
+        w.preventDefault(), C(g, "no");
       },
-      onDrop: (k) => {
-        k.preventDefault(), w(g, "no");
+      onDrop: (w) => {
+        w.preventDefault(), C(g, "no");
       },
       children: [
-        (o == null ? void 0 : o.rowIndex) > 0 && o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            onClick: () => T(o.childIndex),
-            onMouseEnter: D,
+            onClick: (w) => {
+              w.stopPropagation(), N(o.childIndex);
+            },
+            onMouseEnter: P,
             onMouseLeave: m,
             className: "absolute -top-0.5 h-1 w-[90%] rounded bg-purple-500 opacity-0 delay-200 duration-200 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 top-1/2 flex h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-4 w-4 stroke-[3] text-white" }) })
+            children: /* @__PURE__ */ jsxRuntimeExports.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-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[4] text-white" }) })
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            id: `tree-node-${o.id}`,
             className: cn(
               "group flex w-full cursor-pointer items-center justify-between space-x-px !rounded p-1 text-foreground/80 outline-none",
               b ? "bg-blue-500 text-white" : "hover:bg-slate-200 dark:hover:bg-gray-800",
-              h && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
-              (o == null ? void 0 : o.id) === _ ? "bg-purple-50" : "",
+              f && canAcceptChildBlock(j._type, "Icon") ? "bg-green-200" : "",
+              (o == null ? void 0 : o.id) === I ? "bg-purple-100" : "",
               y && "opacity-20",
               i.includes(g) ? "opacity-50" : ""
             ),
@@ -4547,12 +4552,12 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                 ),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "leading-1 flex items-center", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(TypeIcon, { type: j == null ? void 0 : j._type }),
-                  S ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  v ? /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { node: o }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
                     "div",
                     {
                       className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                      onDoubleClick: (k) => {
-                        k.stopPropagation(), o.edit(), o.deselect();
+                      onDoubleClick: (w) => {
+                        w.stopPropagation(), o.edit(), o.deselect();
                       },
                       children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: (j == null ? void 0 : j._name) || (j == null ? void 0 : j._type.split("/").pop()) }),
@@ -4565,16 +4570,16 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-2 group-hover:visible", children: [
-                !i.includes(g) && a.map((k) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                !i.includes(g) && a.map((w) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
                       className: "cursor-pointer rounded bg-transparent hover:bg-white hover:text-blue-500",
                       asChild: !0,
-                      children: React__default.createElement(k.item, { blockId: g })
+                      children: React__default.createElement(w.item, { blockId: g })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: k.tooltip })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-10", children: w.tooltip })
                 ] })),
                 canAddChildBlock(j == null ? void 0 : j._type) && !i.includes(g) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4592,8 +4597,8 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     TooltipTrigger,
                     {
-                      onClick: (k) => {
-                        k.stopPropagation(), c(g), o.isOpen && o.toggle();
+                      onClick: (w) => {
+                        w.stopPropagation(), c(g), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent hover:text-black",
                       asChild: !0,
@@ -4751,16 +4756,12 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
             /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { className: "isolate z-[9999]", children: t("Collapse all") })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "group relative z-[9999] ml-5 w-full cursor-pointer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             onClick: () => pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: 0 }),
-            className: "h-1 rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
-            children: /* @__PURE__ */ jsxRuntimeExports.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-purple-500 px-3 py-1 text-[9px] leading-tight text-white hover:bg-purple-500", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-2 w-2 stroke-[3]" }),
-              " ",
-              t("Add block")
-            ] })
+            className: "h-1 w-[90%] rounded bg-purple-500 opacity-0 duration-200 group-hover:opacity-100",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-[45%] top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-purple-500 p-1 outline outline-2 outline-white hover:bg-purple-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlusIcon$1, { className: "h-3 w-3 stroke-[3] text-white" }) })
           }
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4946,7 +4947,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     }
   }
 }, traverseNodes = (o, r = null) => flatMapDeep(o, (n) => {
-  var p, u, x, f, g, j, b, h;
+  var p, u, x, h, g, j, b, f;
   if (n.type === "comment")
     return [];
   let a = { _id: generateUUID() };
@@ -4963,7 +4964,7 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ...getAttrs(n),
     ...getStyles(n)
   }, n.attributes) {
-    const y = n.attributes.find((S) => includes(NAME_ATTRIBUTES, S.key));
+    const y = n.attributes.find((v) => includes(NAME_ATTRIBUTES, v.key));
     y && (a._name = y.value);
   }
   if (i)
@@ -4981,14 +4982,14 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     ];
     a = {
       ...a,
-      href: ((p = l.find((S) => S.key === "href")) == null ? void 0 : p.value) || "",
-      hrefType: ((u = l.find((S) => S.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
-      autoplay: ((x = l.find((S) => S.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
-      maxWidth: ((g = (f = l.find((S) => S.key === "data-maxwidth")) == null ? void 0 : f.value) == null ? void 0 : g.replace("px", "")) || "",
-      backdropColor: ((j = l.find((S) => S.key === "data-overlay")) == null ? void 0 : j.value) || "",
-      galleryName: ((b = l.find((S) => S.key === "data-gall")) == null ? void 0 : b.value) || ""
-    }, forEach(y, (S) => {
-      has(a, `styles_attrs.${S}`) && delete a.styles_attrs[S];
+      href: ((p = l.find((v) => v.key === "href")) == null ? void 0 : p.value) || "",
+      hrefType: ((u = l.find((v) => v.key === "data-vbtype")) == null ? void 0 : u.value) || "video",
+      autoplay: ((x = l.find((v) => v.key === "data-autoplay")) == null ? void 0 : x.value) === "true" ? "true" : "false",
+      maxWidth: ((g = (h = l.find((v) => v.key === "data-maxwidth")) == null ? void 0 : h.value) == null ? void 0 : g.replace("px", "")) || "",
+      backdropColor: ((j = l.find((v) => v.key === "data-overlay")) == null ? void 0 : j.value) || "",
+      galleryName: ((b = l.find((v) => v.key === "data-gall")) == null ? void 0 : b.value) || ""
+    }, forEach(y, (v) => {
+      has(a, `styles_attrs.${v}`) && delete a.styles_attrs[v];
     });
   }
   if (a._type === "Input") {
@@ -4998,9 +4999,9 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
     const y = stringify([n]);
     return hasVideoEmbed(y) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(y)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = y, [a];
   } else if (n.tagName === "svg") {
-    const y = find(n.attributes, { key: "height" }), S = find(n.attributes, { key: "width" }), B = get(y, "value") ? `[${get(y, "value")}px]` : "24px", A = get(S, "value") ? `[${get(S, "value")}px]` : "24px", C = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
-    return a.styles = `${STYLES_KEY}, ${cn(`w-${A} h-${B}`, C)}`.trim(), n.attributes = filter(n.attributes, (v) => !includes(["style", "width", "height", "class"], v.key)), a.icon = stringify([n]), [a];
-  } else if (n.tagName == "option" && r && ((h = r.block) == null ? void 0 : h._type) === "Select")
+    const y = find(n.attributes, { key: "height" }), v = find(n.attributes, { key: "width" }), B = get(y, "value") ? `[${get(y, "value")}px]` : "24px", A = get(v, "value") ? `[${get(v, "value")}px]` : "24px", S = get(find(n.attributes, { key: "class" }), "value", "w-full h-full");
+    return a.styles = `${STYLES_KEY}, ${cn(`w-${A} h-${B}`, S)}`.trim(), n.attributes = filter(n.attributes, (k) => !includes(["style", "width", "height", "class"], k.key)), a.icon = stringify([n]), [a];
+  } else if (n.tagName == "option" && r && ((f = r.block) == null ? void 0 : f._type) === "Select")
     return r.block.options.push({
       label: getTextContent(n.children),
       ...getAttrs(n)
@@ -5008,6 +5009,10 @@ const currentAddSelection = atom$1(null), Node = memo(({ node: o, style: r, drag
   const d = traverseNodes(n.children, { block: a, node: n });
   return [a, ...d];
 }), getSanitizedHTML = (o) => {
+  o = o.replace(/(\w+)=\\?"(.*?)\\?"/g, (a, l, i) => {
+    let c = i.replace(/\\"/g, '"');
+    return c = c.replace(/{([^}]+)}/g, (d) => d.replace(/"/g, '\\"')), `${l}="${c.replace(/\\"/g, '"')}"`;
+  }), o = o.replace(/\\n/g, "").replace(/\\\\/g, "").replace(/\\([/<>])/g, "$1").replace(/\\./g, "").replace(/[\n\r\t\f\v]/g, "");
   const r = o.match(/<body[^>]*>[\s\S]*?<\/body>/);
   return (r && r.length > 0 ? r[0].replace(/<body/, "<div").replace(/<\/body>/, "</div>") : o).replace(/\s+/g, " ").replaceAll("> <", "><").replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "").trim();
 }, getBlocksFromHTML = (o) => {
@@ -5185,8 +5190,8 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   collections: r,
   onChange: n
 }) => {
-  var D;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [f, g] = useState(""), [j, b] = useState([]), [h, y] = useState(-1), S = useRef(null), B = (D = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : D.name;
+  var P;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchCollectionItems", (m, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, x] = useState("page"), [h, g] = useState(""), [j, b] = useState([]), [f, y] = useState(-1), v = useRef(null), B = (P = r == null ? void 0 : r.find((m) => m.key === u)) == null ? void 0 : P.name;
   useEffect(() => {
     if (g(""), b([]), y(-1), p(!1), !o || i || !startsWith(o, "collection:"))
       return;
@@ -5208,10 +5213,10 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     },
     [u],
     300
-  ), C = (m) => {
+  ), S = (m) => {
     const E = ["collection", u, m.id];
     E[1] && (n(E.join(":")), g(m.name), p(!1), b([]), y(-1));
-  }, v = (m) => {
+  }, k = (m) => {
     switch (m.key) {
       case "ArrowDown":
         m.preventDefault(), y((E) => E < j.length - 1 ? E + 1 : E);
@@ -5222,22 +5227,22 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
       case "Enter":
         if (m.preventDefault(), j.length === 0)
           return;
-        h >= 0 && C(j[h]);
+        f >= 0 && S(j[f]);
         break;
       case "Escape":
-        m.preventDefault(), _();
+        m.preventDefault(), I();
         break;
     }
   };
   useEffect(() => {
-    if (h >= 0 && S.current) {
-      const m = S.current.children[h];
+    if (f >= 0 && v.current) {
+      const m = v.current.children[f];
       m == null || m.scrollIntoView({ block: "nearest" });
     }
-  }, [h]);
-  const _ = () => {
+  }, [f]);
+  const I = () => {
     g(""), b([]), y(-1), p(!1), n("");
-  }, I = (m) => {
+  }, _ = (m) => {
     g(m), p(!isEmpty(m)), c(!0), A(m);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -5247,14 +5252,14 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         "input",
         {
           type: "text",
-          value: f,
-          onChange: (m) => I(m.target.value),
-          onKeyDown: v,
+          value: h,
+          onChange: (m) => _(m.target.value),
+          onKeyDown: k,
           placeholder: a(`Search ${B}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: f && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: _, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: h && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-4 w-4" }) }) })
     ] }),
     (i || !isEmpty(j) || d && isEmpty(j)) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
@@ -5262,13 +5267,13 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
     ] }) : d && isEmpty(j) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
-      f,
+      h,
       '"'
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: S, children: map(j == null ? void 0 : j.slice(0, 20), (m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: v, children: map(j == null ? void 0 : j.slice(0, 20), (m, E) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "li",
       {
-        onClick: () => C(m),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(m.id) ? "bg-blue-200" : E === h ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => S(m),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(m.id) ? "bg-blue-200" : E === f ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           m.name,
           " ",
@@ -5334,6 +5339,24 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
       ] })
     ] })
   ] });
+}, RowColField = () => {
+  const o = useSelectedBlock(), r = useWrapperBlock(), [n] = useBlocksStore(), { addCoreBlock: a } = useAddBlock();
+  if (!o && !r)
+    return null;
+  const l = (o == null ? void 0 : o._type) === "Row" ? o : r, i = size(filter(n, { _parent: l == null ? void 0 : l._id }));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-x-2 pt-1", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: i > 11,
+      className: `duratiom-300 flex items-center gap-x-1 rounded px-3 py-1 text-[11px] font-medium leading-tight ${i > 11 ? "cursor-not-allowed bg-gray-300 text-gray-500" : "border border-gray-400 bg-gray-100 hover:bg-slate-200"}`,
+      onClick: () => a({ type: "Column", styles: "#styles:," }, l == null ? void 0 : l._id),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "h-4 w-4" }),
+        " Add Column"
+      ]
+    }
+  ) }) });
 }, CodeEditor = ({ id: o, placeholder: r }) => {
   const { t: n } = useTranslation(), [, a] = useCodeEditor(), l = useSelectedBlock();
   if (typeof window > "u")
@@ -5363,41 +5386,48 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   description: c,
   hidden: d,
   required: p,
-  schema: u
+  schema: u,
+  formData: x
 }) => {
-  const { selectedLang: x, fallbackLang: f, languages: g } = useLanguages(), j = isEmpty(g) ? "" : isEmpty(x) ? f : x, b = get(LANGUAGES, j, j), h = useSelectedBlock(), y = useRegisteredChaiBlocks(), S = get(y, [h == null ? void 0 : h._type, "i18nProps"], []) || [], [B, A] = useState(null);
+  const { selectedLang: h, fallbackLang: g, languages: j } = useLanguages(), b = isEmpty(j) ? "" : isEmpty(h) ? g : h, f = get(LANGUAGES, b, b), y = useSelectedBlock(), v = useRegisteredChaiBlocks(), B = get(v, [y == null ? void 0 : y._type, "i18nProps"], []) || [], [A, S] = useState(null);
   if (d)
     return null;
   if (u.type === "boolean")
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: r, children: a });
-  const v = S == null ? void 0 : S.includes(o.replace("root.", ""));
-  return u.type === "array" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
-    u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "label",
-      {
-        htmlFor: o,
-        onClick: () => A(B ? null : o),
-        className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
-        children: [
-          B ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-tight", children: n })
-        ]
-      }
-    ),
-    B && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
-      c,
-      a,
-      l,
-      i
-    ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: r, children: [
+  const I = B == null ? void 0 : B.includes(o.replace("root.", ""));
+  if (u.type === "array") {
+    const _ = A === o;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${r} relative`, children: [
+      u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          htmlFor: o,
+          onClick: () => S(_ ? null : o),
+          className: "flex cursor-pointer items-center gap-x-1 py-1 leading-tight duration-200 hover:bg-slate-100",
+          children: [
+            _ ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "leading-tight", children: n }),
+            " ",
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { className: "m-0 bg-gray-200 px-2 leading-tight text-gray-500 hover:bg-gray-200 hover:text-gray-500", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[9px] font-medium text-slate-600", children: x == null ? void 0 : x.length }) })
+          ]
+        }
+      ),
+      (x == null ? void 0 : x.length) === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-0 overflow-hidden", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${_ ? "pt-0.5" : "h-0 overflow-hidden"}`, children: [
+        c,
+        a,
+        l,
+        i
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: r, children: [
     u.title && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { htmlFor: o, className: u.type === "object" ? "pb-2" : "", children: [
       n,
       " ",
-      v && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
+      I && /* @__PURE__ */ jsxRuntimeExports.jsxs("small", { className: "text-[9px] text-zinc-400", children: [
         " ",
-        b
+        f
       ] }),
       p && u.type !== "object" ? " *" : null
     ] }),
@@ -5431,7 +5461,8 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
         richtext: RichTextEditorField,
         icon: IconPickerField,
         image: ImagePickerField,
-        code: CodeEditor
+        code: CodeEditor,
+        colCount: RowColField
       },
       fields: {
         link: LinkField
@@ -5523,50 +5554,50 @@ const MediaManagerModal$1 = MediaManagerModal, ImagePickerField = ({ value: o, o
   return set(n, o, r), n;
 };
 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), x = useWrapperBlock(), f = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, f), j = ({ formData: v }, _, I) => {
-    if (_ && (c == null ? void 0 : c._id) === r._id) {
-      const D = _.replace("root.", "");
-      a([r._id], { [D]: get(v, D) }, I);
+  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), x = useWrapperBlock(), h = getRegisteredChaiBlock(x == null ? void 0 : x._type), g = formDataWithSelectedLang(x, o, h), j = ({ formData: k }, I, _) => {
+    if (I && (c == null ? void 0 : c._id) === r._id) {
+      const P = I.replace("root.", "");
+      a([r._id], { [P]: get(k, P) }, _);
     }
   }, b = useCallback(
-    debounce(({ formData: v }, _, I) => {
-      j({ formData: v }, _, I), d(v);
+    debounce(({ formData: k }, I, _) => {
+      j({ formData: k }, I, _), d(k);
     }, 1500),
     [r == null ? void 0 : r._id, o]
-  ), h = ({ formData: v }, _) => {
-    if (_) {
-      const I = _.replace("root.", "");
+  ), f = ({ formData: k }, I) => {
+    if (I) {
+      const _ = I.replace("root.", "");
       n(
         [r._id],
-        convertDotNotationToObject(I, get(v, I.split(".")))
-      ), b({ formData: v }, _, { [I]: get(c, I) });
+        convertDotNotationToObject(_, get(k, _.split(".")))
+      ), b({ formData: k }, I, { [_]: get(c, _) });
     }
-  }, y = ({ formData: v }, _) => {
-    if (_) {
-      const I = _.replace("root.", "");
+  }, y = ({ formData: k }, I) => {
+    if (I) {
+      const _ = I.replace("root.", "");
       n(
         [x._id],
-        convertDotNotationToObject(I, get(v, I.split(".")))
-      ), b({ formData: v }, _, { [I]: get(c, I) });
+        convertDotNotationToObject(_, get(k, _.split(".")))
+      ), b({ formData: k }, I, { [_]: get(c, _) });
     }
   };
   keys(get(i, "_bindings", {}));
-  const { schema: S, uiSchema: B } = useMemo(() => {
-    const v = r == null ? void 0 : r._type;
-    if (v)
-      return getBlockFormSchemas(v);
-  }, [r]), { wrapperSchema: A, wrapperUiSchema: C } = useMemo(() => {
+  const { schema: v, uiSchema: B } = useMemo(() => {
+    const k = r == null ? void 0 : r._type;
+    if (k)
+      return getBlockFormSchemas(k);
+  }, [r]), { wrapperSchema: A, wrapperUiSchema: S } = useMemo(() => {
     if (!x || !(x != null && x._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const v = x == null ? void 0 : x._type, { schema: _ = {}, uiSchema: I = {} } = getBlockFormSchemas(v);
-    return { wrapperSchema: _, wrapperUiSchema: I };
+    const k = x == null ? void 0 : x._type, { schema: I = {}, uiSchema: _ = {} } = getBlockFormSchemas(k);
+    return { wrapperSchema: I, wrapperUiSchema: _ };
   }, [x]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-x-hidden px-px", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(x) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
-          onClick: () => u((v) => !v),
+          onClick: () => u((k) => !k),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "h-4 w-4 stroke-[3] text-slate-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "h-4 w-4 stroke-[3] text-slate-400" }),
@@ -5588,17 +5619,17 @@ function BlockSettings() {
           onChange: y,
           formData: g,
           schema: A,
-          uiSchema: C
+          uiSchema: S
         }
       )
     ] }),
-    isEmpty(S) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    isEmpty(v) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       JSONForm,
       {
         id: r == null ? void 0 : r._id,
-        onChange: h,
+        onChange: f,
         formData: i,
-        schema: S,
+        schema: v,
         uiSchema: B
       }
     ),
@@ -5676,7 +5707,7 @@ const AskAIStyles = ({ blockId: o }) => {
     var g;
     (g = d.current) == null || g.focus();
   }, []);
-  const f = (g) => {
+  const h = (g) => {
     const { usage: j } = g || {};
     !l && j && x(j), p.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
@@ -5692,7 +5723,7 @@ const AskAIStyles = ({ blockId: o }) => {
         className: "no-scrollbar my-2 w-full border border-border p-2 text-xs",
         rows: 4,
         onKeyDown: (g) => {
-          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, f));
+          g.key === "Enter" && (g.preventDefault(), p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h));
         }
       }
     ),
@@ -5702,7 +5733,7 @@ const AskAIStyles = ({ blockId: o }) => {
         {
           disabled: i.trim().length < 5 || a,
           onClick: () => {
-            p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, f);
+            p.current && clearTimeout(p.current), x(void 0), n("styles", o, i, h);
           },
           variant: "default",
           className: "w-fit",
@@ -5733,37 +5764,37 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var _;
-  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), f = (_ = first(n)) == null ? void 0 : _.prop, g = reject((get(a, f, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
-    const I = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    l(c, I, !0), u("");
-  }, [b, h] = useState([]), y = ({ value: I }) => {
-    const D = I.trim().toLowerCase(), m = D.match(/.+:/g);
+  var I;
+  const o = useFuseSearch(), { t: r } = useTranslation(), [n] = useSelectedStylingBlocks(), a = useSelectedBlock(), l = useAddClassesToBlocks(), i = useRemoveClassesFromBlocks(), [c] = useSelectedBlockIds(), d = useBuilderProp("askAiCallBack", null), [p, u] = useState(""), { toast: x } = useToast(), h = (I = first(n)) == null ? void 0 : I.prop, g = reject((get(a, h, "").replace(STYLES_KEY, "").split(",").pop() || "").split(" "), isEmpty), j = () => {
+    const _ = p.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
+    l(c, _, !0), u("");
+  }, [b, f] = useState([]), y = ({ value: _ }) => {
+    const P = _.trim().toLowerCase(), m = P.match(/.+:/g);
     let E = [];
     if (m && m.length > 0) {
-      const [R] = m, w = D.replace(R, "");
-      E = o.search(w).map((k) => ({
-        ...k,
-        item: { ...k.item, name: R + k.item.name }
+      const [R] = m, C = P.replace(R, "");
+      E = o.search(C).map((T) => ({
+        ...T,
+        item: { ...T.item, name: R + T.item.name }
       }));
     } else
-      E = o.search(D);
-    return h(map(E, "item"));
-  }, S = () => {
-    h([]);
-  }, B = (I) => I.name, A = (I) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: I.name }), C = {
+      E = o.search(P);
+    return f(map(E, "item"));
+  }, v = () => {
+    f([]);
+  }, B = (_) => _.name, A = (_) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md p-1", children: _.name }), S = {
     autoComplete: "off",
     autoCorrect: "off",
     autoCapitalize: "off",
     spellCheck: !1,
     placeholder: r("Enter classes separated by space"),
     value: p,
-    onKeyDown: (I) => {
-      I.key === "Enter" && p.trim() !== "" && j();
+    onKeyDown: (_) => {
+      _.key === "Enter" && p.trim() !== "" && j();
     },
-    onChange: (I, { newValue: D }) => u(D),
+    onChange: (_, { newValue: P }) => u(P),
     className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
-  }, v = () => {
+  }, k = () => {
     if (navigator.clipboard === void 0) {
       x({
         title: r("Clipboard not supported"),
@@ -5786,7 +5817,7 @@ function ManualClasses() {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: r("Classes") }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: v, className: "cursor-pointer" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopyIcon, { onClick: k, className: "cursor-pointer" }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: r("Copy classes to clipboard") }) })
             ] })
           ] }),
@@ -5804,10 +5835,10 @@ function ManualClasses() {
             {
               suggestions: b,
               onSuggestionsFetchRequested: y,
-              onSuggestionsClearRequested: S,
+              onSuggestionsClearRequested: v,
               getSuggestionValue: B,
               renderSuggestion: A,
-              inputProps: C,
+              inputProps: S,
               containerProps: {
                 className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
               },
@@ -5831,22 +5862,22 @@ function ManualClasses() {
           )
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-wrap gap-2 overflow-x-hidden", children: React.Children.toArray(
-          g.map((I) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          g.map((_) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate rounded border border-border bg-gray-200 p-px px-1.5 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300",
               children: [
-                I,
+                _,
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Cross2Icon,
                   {
-                    onClick: () => i(c, [I]),
+                    onClick: () => i(c, [_]),
                     className: "invisible absolute right-1 rounded-full bg-red-400 hover:text-white group-hover:visible group-hover:cursor-pointer"
                   }
                 )
               ]
             },
-            I
+            _
           ))
         ) })
       ]
@@ -6237,10 +6268,10 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, 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("-"), x = get(u, "1", ""), f = get(u, "2", ""), g = useCallback(
+  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("-"), x = get(u, "1", ""), h = get(u, "2", ""), g = useCallback(
     // eslint-disable-next-line no-shadow
-    (h) => {
-      ["current", "inherit", "transparent", "black", "white"].includes(h) ? (c([]), p({ color: h })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: h, shade: y.shade ? y.shade : "500" })));
+    (f) => {
+      ["current", "inherit", "transparent", "black", "white"].includes(f) ? (c([]), p({ color: f })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: f, shade: y.shade ? y.shade : "500" })));
     },
     [c, p]
   );
@@ -6251,8 +6282,8 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   }, [x]);
   const j = useCallback(
     // eslint-disable-next-line no-shadow
-    (h) => {
-      p({ color: x, shade: h });
+    (f) => {
+      p({ color: x, shade: f });
     },
     [x]
   );
@@ -6303,7 +6334,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: f, disabled: !x || !l, onChange: j, options: i }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "grow text-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown, { rounded: !0, selected: h, disabled: !x || !l, onChange: j, options: i }) })
   ] });
 }, getUserInputValues = (o, r) => {
   o = o.toLowerCase();
@@ -6498,7 +6529,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   },
   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: x } = o, [f, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [j, b] = useState(!1), [h, y] = useState(""), [S, B] = useState(!1), [A, C] = useState(!1);
+  const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: x } = o, [h, g] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [j, b] = useState(!1), [f, y] = useState(""), [v, B] = useState(!1), [A, S] = useState(!1);
   useEffect(() => {
     const { value: m, unit: E } = getClassValueAndUnit(i);
     if (E === "") {
@@ -6507,25 +6538,25 @@ const RangeChoices = ({ property: o, onChange: r }) => {
     }
     g(E), l(E === "class" || isEmpty(m) ? "" : m);
   }, [i, p, u]);
-  const v = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), _ = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), I = useCallback(
+  const k = useThrottledCallback((m) => c(m), [c], THROTTLE_TIME), I = useThrottledCallback((m) => c(m, !1), [c], THROTTLE_TIME), _ = useCallback(
     (m = !1) => {
       const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
         b(!0);
         return;
       }
-      const R = get(E, "unit") !== "" ? get(E, "unit") : f;
+      const R = get(E, "unit") !== "" ? get(E, "unit") : h;
       if (R === "auto" || R === "none") {
-        v(`${d}${R}`);
+        k(`${d}${R}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      m ? _(T) : v(T);
+      const N = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      m ? I(N) : k(N);
     },
-    [v, _, a, f, d, u]
-  ), D = useCallback(
+    [k, I, a, h, d, u]
+  ), P = useCallback(
     (m) => {
       const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
@@ -6533,45 +6564,52 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         return;
       }
       if (m === "auto" || m === "none") {
-        v(`${d}${m}`);
+        k(`${d}${m}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const R = get(E, "unit") !== "" ? get(E, "unit") : m, T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
-      v(T);
+      const R = get(E, "unit") !== "" ? get(E, "unit") : m, N = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${R === "-" ? "" : R}]`;
+      k(N);
     },
-    [v, a, d, u]
+    [k, a, d, u]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: f === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { className: "w-20 rounded py-1", readOnly: !0, value: i }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start", children: h === "class" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        className: "h-6 w-24 rounded border border-foreground/20 bg-background px-2 py-0.5 text-sm focus-visible:outline-0",
+        readOnly: !0,
+        value: i
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `group relative flex items-center ${v ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
-      ["none", "auto"].indexOf(f) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ["none", "auto"].indexOf(h) !== -1 ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
         {
-          readOnly: f === "class",
+          readOnly: h === "class",
           onKeyPress: (m) => {
-            m.key === "Enter" && I();
+            m.key === "Enter" && _();
           },
           onKeyDown: (m) => {
             if (m.keyCode !== 38 && m.keyCode !== 40)
               return;
-            m.preventDefault(), C(!0);
+            m.preventDefault(), S(!0);
             const E = parseInt$1(m.target.value);
             let R = isNaN$1(E) ? 0 : E;
             m.keyCode === 38 && (R += 1), m.keyCode === 40 && (R -= 1);
-            const w = `${R}`, k = `${w.startsWith("-") ? "-" : ""}${d}[${w.replace("-", "")}${f === "-" ? "" : f}]`;
-            _(k);
+            const C = `${R}`, T = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
+            I(T);
           },
           onKeyUp: (m) => {
-            A && (m.preventDefault(), C(!1));
+            A && (m.preventDefault(), S(!1));
           },
-          onBlur: () => I(),
+          onBlur: () => _(),
           onChange: (m) => {
             b(!1), l(m.target.value);
           },
@@ -6579,7 +6617,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             var E;
             (E = m == null ? void 0 : m.target) == null || E.select(), n(!1);
           },
-          value: S ? h : a,
+          value: v ? f : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             j ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -6594,7 +6632,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
             onClick: () => n(!r),
             className: "flex h-6 cursor-pointer items-center gap-x-1 rounded rounded-l-none bg-background p-px px-1 text-[11px] uppercase",
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: f }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: h }),
               u.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleDownIcon, {}) : null
             ]
           }
@@ -6603,33 +6641,33 @@ const RangeChoices = ({ property: o, onChange: r }) => {
           UnitSelection,
           {
             units: u,
-            current: f,
+            current: h,
             onSelect: (m) => {
-              n(!1), g(m), D(m);
+              n(!1), g(m), P(m);
             }
           }
         ) }) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(f) !== -1 || S ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ["none", "auto"].indexOf(h) !== -1 || v ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       DragStyleButton,
       {
         onDragStart: () => B(!0),
         onDragEnd: (m) => {
           if (y(() => ""), B(!1), isEmpty(m))
             return;
-          const E = `${m}`, w = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
-          v(w);
+          const E = `${m}`, C = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
+          k(C);
         },
         onDrag: (m) => {
           if (isEmpty(m))
             return;
           y(m);
-          const E = `${m}`, w = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${f === "-" ? "" : f}]`;
-          _(w);
+          const E = `${m}`, C = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${h === "-" ? "" : h}]`;
+          I(C);
         },
         currentValue: a,
-        unit: f,
+        unit: h,
         negative: x,
         cssProperty: p
       }
@@ -6723,22 +6761,22 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   "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(), [, x] = useCanvasWidth(), f = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), h = useMemo(() => get(f, "fullCls", ""), [f]), y = useCallback(
-    (_, I = !0) => {
-      const D = { dark: p, mq: x, mod: u, cls: _, property: l, fullCls: "" };
-      (p || u !== "") && (D.mq = "xs");
-      const m = generateFullClsName(D);
-      g(b, [m], I);
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, x] = useCanvasWidth(), h = useCurrentClassByProperty(l), g = useAddClassesToBlocks(), j = useRemoveClassesFromBlocks(), [b] = useSelectedBlockIds(), f = useMemo(() => get(h, "fullCls", ""), [h]), y = useCallback(
+    (I, _ = !0) => {
+      const P = { dark: p, mq: x, mod: u, cls: I, property: l, fullCls: "" };
+      (p || u !== "") && (P.mq = "xs");
+      const m = generateFullClsName(P);
+      g(b, [m], _);
     },
     [b, p, x, u, l, g]
-  ), S = useCallback(() => {
-    j(b, [h]);
-  }, [b, h, j]), B = useMemo(() => canChangeClass(f, x), [f, x]);
+  ), v = useCallback(() => {
+    j(b, [f]);
+  }, [b, f, j]), B = useMemo(() => canChangeClass(h, x), [h, x]);
   useEffect(() => {
-    i(B, f);
-  }, [B, i, f]);
-  const [, , A] = useCanvasWidth(), C = useCallback(
-    (_) => {
+    i(B, h);
+  }, [B, i, h]);
+  const [, , A] = useCanvasWidth(), S = useCallback(
+    (I) => {
       A({
         xs: 400,
         sm: 640,
@@ -6746,18 +6784,18 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         lg: 1024,
         xl: 1420,
         "2xl": 1920
-      }[_]);
+      }[I]);
     },
     [A]
-  ), v = get(f, "dark", null) === p && get(f, "mod", null) === u && get(f, "mq", null) === x;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: B, canReset: f && v, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${f && !v ? "text-foreground" : ""}`, children: r(a) }) }),
+  ), k = get(h, "dark", null) === p && get(h, "mod", null) === u && get(h, "mq", null) === x;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BlockStyleProvider, { canChange: B, canReset: h && k, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `text-[11px] ${h && !k ? "text-foreground" : ""}`, children: r(a) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[150px]", children: [
         n === "arbitrary" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           AdvanceChoices,
           {
-            currentClass: get(f, "cls", ""),
+            currentClass: get(h, "cls", ""),
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
@@ -6770,7 +6808,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         n === "color" && /* @__PURE__ */ jsxRuntimeExports.jsx(ColorChoice, { property: l, onChange: y }),
         n === "dropdown" && /* @__PURE__ */ jsxRuntimeExports.jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${h ? "visible" : "invisible"}`, children: v ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && f ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `w-[30px] cursor-pointer ${f ? "visible" : "invisible"}`, children: k ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", onClick: () => v(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : B && h ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
@@ -6782,19 +6820,19 @@ const RangeChoices = ({ property: o, onChange: r }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           "Current style is set at  ",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-bold", children: [
-            getBreakpoint(get(f, "mq")),
-            p && !f.dark ? "(Light mode)" : ""
+            getBreakpoint(get(h, "mq")),
+            p && !h.dark ? "(Light mode)" : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
           /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
               type: "button",
-              onClick: () => C(get(f, "mq")),
+              onClick: () => S(get(h, "mq")),
               className: "block w-full cursor-default text-right font-semibold text-blue-500",
               children: [
                 "Switch to ",
-                get(f, "mq").toUpperCase()
+                get(h, "mq").toUpperCase()
               ]
             }
           )
@@ -6811,7 +6849,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), f = useCallback((g) => map(x, "property").includes(g), [x]);
+  const { t: d } = useTranslation(), [p, u] = useState(r[0].key), x = useSelectedBlockCurrentClasses(), h = useCallback((g) => map(x, "property").includes(g), [x]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -6829,7 +6867,7 @@ const RangeChoices = ({ property: o, onChange: r }) => {
                   className: `relative cursor-pointer rounded-full p-1 text-[8px] ${j === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                   children: [
                     React__default.createElement("div", {
-                      className: f(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
+                      className: h(j) ? "-bottom-1.5 absolute bg-[#3E57F0] h-[2px] left-0 w-full" : ""
                     }),
                     React__default.createElement(get(EDITOR_ICONS, j, BoxIcon), { className: "text-inherit w-3 h-3" })
                   ]
@@ -6976,13 +7014,13 @@ function BlockStyling() {
     cssProperty: ""
   }), d = useThrottledCallback(
     (u) => {
-      const x = !get(i, "negative", !1), f = get(i, "cssProperty", "");
+      const x = !get(i, "negative", !1), h = get(i, "cssProperty", "");
       let g = parseFloat(i.dragStartValue);
       g = isNaN(g) ? 0 : g;
       let j = MAPPER[i.dragUnit];
-      (startsWith(f, "scale") || f === "opacity") && (j = 10);
-      let h = (i.dragStartY - u.pageY) / j + g;
-      x && h < 0 && (h = 0), f === "opacity" && h > 1 && (h = 1), i.onDrag(`${h}`), l(`${h}`);
+      (startsWith(h, "scale") || h === "opacity") && (j = 10);
+      let f = (i.dragStartY - u.pageY) / j + g;
+      x && f < 0 && (f = 0), h === "opacity" && f > 1 && (f = 1), i.onDrag(`${f}`), l(`${f}`);
     },
     [i],
     50
@@ -7070,12 +7108,12 @@ const BlockCard = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), f = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, j] = useAtom$1(draggedBlockAtom), b = (S) => {
-    const B = has(S, "styles_attrs.data-page-section");
-    return S._type === "Box" && B;
-  }, h = useCallback(
-    async (S) => {
-      if (S.stopPropagation(), has(o, "component")) {
+  const [l, i] = useState(!1), c = useBuilderProp("getUILibraryBlock", noop), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: x } = useBlockHighlight(), h = get(o, "name", get(o, "label")), g = useFeature("dnd"), [, j] = useAtom$1(draggedBlockAtom), b = (v) => {
+    const B = has(v, "styles_attrs.data-page-section");
+    return v._type === "Box" && B;
+  }, f = useCallback(
+    async (v) => {
+      if (v.stopPropagation(), has(o, "component")) {
         d(o, n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
@@ -7084,19 +7122,19 @@ const BlockCard = ({
       isEmpty(B) || p(syncBlocksWithDefaults(B), n, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
     [d, p, o, c, r, n, a]
-  ), y = async (S) => {
+  ), y = async (v) => {
     const B = await c(r, o);
     let A = n;
     if (b(first(B)) && (A = null), !isEmpty(B)) {
-      const C = { blocks: B, uiLibrary: !0, parent: A };
-      if (S.dataTransfer.setData("text/plain", JSON.stringify(C)), o.preview) {
-        const v = new Image();
-        v.src = o.preview, v.onload = () => {
-          S.dataTransfer.setDragImage(v, 0, 0);
+      const S = { blocks: B, uiLibrary: !0, parent: A };
+      if (v.dataTransfer.setData("text/plain", JSON.stringify(S)), o.preview) {
+        const k = new Image();
+        k.src = o.preview, k.onload = () => {
+          v.dataTransfer.setDragImage(k, 0, 0);
         };
       } else
-        S.dataTransfer.setDragImage(new Image(), 0, 0);
-      j(C), setTimeout(() => {
+        v.dataTransfer.setDragImage(new Image(), 0, 0);
+      j(S), setTimeout(() => {
         u([]), x(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
       }, 200);
     }
@@ -7106,7 +7144,7 @@ const BlockCard = ({
       "div",
       {
         onClick: l ? () => {
-        } : h,
+        } : f,
         draggable: g ? "true" : "false",
         onDragStart: y,
         className: clsx(
@@ -7117,11 +7155,11 @@ const BlockCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(Loader, { className: "animate-spin", size: 15, color: "white" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
-          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: f }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: f }) })
+          o.preview ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: o.preview, className: "min-h-[45px] w-full rounded-md", alt: h }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border bg-gray-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: h }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: f }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: h }) })
   ] });
 }, libraryBlocksAtom = atom$1(
   {}
@@ -7137,7 +7175,7 @@ const BlockCard = ({
     })();
   }, [o, l, i, c, n, a]), { data: l || [], isLoading: i === "loading" };
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((A) => A.category === "custom"), d = l.find((A) => A.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [f, g] = useState("Hero"), j = get(x, f, []), b = useRef(null), { t: h } = useTranslation(), y = (A) => {
+  const [n, a] = useAtom$1(selectedLibraryAtom), l = useBuilderProp("uiLibraries", []), i = useRegisteredChaiBlocks(), c = values(i).filter((A) => A.category === "custom"), d = l.find((A) => A.uuid === n) || first(l), { data: p, isLoading: u } = useLibraryBlocks(d), x = groupBy([...p, ...c], "group"), [h, g] = useState("Hero"), j = get(x, h, []), b = useRef(null), { t: f } = useTranslation(), y = (A) => {
     b.current && (clearTimeout(b.current), b.current = null), b.current = setTimeout(() => {
       b.current && g(A);
     }, 300);
@@ -7147,30 +7185,30 @@ const BlockCard = ({
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const S = filter(j, (A, C) => C % 2 === 0), B = filter(j, (A, C) => C % 2 === 1);
+  const v = filter(j, (A, S) => S % 2 === 0), B = filter(j, (A, S) => S % 2 === 1);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative mt-2 flex h-full max-h-full overflow-hidden bg-background", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full pt-2", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex h-full max-h-full w-60 flex-col gap-1 px-1 pr-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UILibrariesSelect, { library: d == null ? void 0 : d.uuid, setLibrary: a, uiLibraries: l }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: h("Groups") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs font-bold text-gray-500", children: f("Groups") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("hr", { className: "mt-1 border-border" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: React__default.Children.toArray(
-          map(x, (A, C) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          map(x, (A, S) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              onMouseEnter: () => y(C),
+              onMouseEnter: () => y(S),
               onMouseLeave: () => clearTimeout(b.current),
-              onClick: () => g(C),
+              onClick: () => g(S),
               className: cn(
                 "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",
-                C === f ? "bg-blue-500 text-white hover:bg-blue-600" : ""
+                S === h ? "bg-blue-500 text-white hover:bg-blue-600" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(h(C.toLowerCase())) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: capitalize(f(S.toLowerCase())) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(CaretRightIcon, { className: "ml-2 h-5 w-5" })
               ]
             },
-            C
+            S
           ))
         ) })
       ] })
@@ -7183,7 +7221,7 @@ const BlockCard = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-2 gap-2 px-2", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
-              S.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
+              v.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
             ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1", children: React__default.Children.toArray(
               B.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(BlockCard, { parentId: o, position: r, block: A, library: d }))
@@ -7695,10 +7733,10 @@ const CoreBlock = ({
   parentId: n,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: f } = useBlockHighlight(), g = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, x] = useSelectedBlockIds(), { clearHighlight: h } = useBlockHighlight(), g = () => {
     if (has(o, "blocks")) {
-      const h = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
-      u(syncBlocksWithDefaults(h), n || null, a);
+      const f = isFunction$1(o.blocks) ? o.blocks() : o.blocks;
+      u(syncBlocksWithDefaults(f), n || null, a);
     } else
       p(o, n || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -7710,9 +7748,9 @@ const CoreBlock = ({
         disabled: r,
         onClick: g,
         type: "button",
-        onDragStart: (h) => {
-          h.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), h.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
-            x([]), f();
+        onDragStart: (f) => {
+          f.dataTransfer.setData("text/plain", JSON.stringify(omit(o, ["component", "icon"]))), f.dataTransfer.setDragImage(new Image(), 0, 0), l(omit(o, ["component", "icon"])), setTimeout(() => {
+            x([]), h();
           }, 200);
         },
         draggable: j ? "true" : "false",
@@ -7769,7 +7807,9 @@ const CoreBlock = ({
   parentId: n = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []);
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("importHTMLSupport", !0), u = useBuilderProp("addBlocksDialogTabs", []), x = useCallback(() => {
+    pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex h-full w-full flex-col overflow-hidden", o), children: [
     r ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: l("Add block") }),
@@ -7778,8 +7818,8 @@ const CoreBlock = ({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Tabs,
       {
-        onValueChange: (x) => {
-          d(""), c(x);
+        onValueChange: (h) => {
+          d(""), c(h);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7788,12 +7828,12 @@ const CoreBlock = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "library", children: l("Library") }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(u, (x) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: x.key, children: React__default.createElement(x.tab) }))
+            map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: h.key, children: React__default.createElement(h.tab) }))
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "-mx-1.5 h-full max-h-full overflow-y-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: n, position: a }) }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UILibraries, { parentId: n, position: a }) }),
           p ? /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ImportHTML$1, { parentId: n, position: a }) }) : null,
-          map(u, (x) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: x.key, children: React__default.createElement(x.tabContent) }))
+          map(u, (h) => /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: h.key, children: React__default.createElement(h.tabContent, { close: x }) }))
         ]
       }
     )
@@ -7908,14 +7948,14 @@ 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, x] = useState(), f = useRef(null), g = useRef(null);
+  const { t: r } = useTranslation(), { askAi: n, loading: a, error: l } = useAskAi(), [i, c] = useState(""), [d, p] = useState(!0), [u, x] = useState(), h = useRef(null), g = useRef(null);
   useEffect(() => {
     var b;
-    (b = f.current) == null || b.focus();
+    (b = h.current) == null || b.focus();
   }, []);
   const j = (b) => {
-    const { usage: h } = b || {};
-    !l && h && x(h), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
+    const { usage: f } = b || {};
+    !l && f && x(f), g.current = setTimeout(() => x(void 0), 1e4), l || c("");
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7933,7 +7973,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Textarea,
         {
-          ref: f,
+          ref: h,
           value: i,
           onChange: (b) => c(b.target.value),
           placeholder: r("Ask AI to edit content"),
@@ -7993,13 +8033,13 @@ const AIUserPrompt = ({ blockId: o }) => {
     ] }) }) : null
   ] });
 }, AISetContext = () => {
-  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: f } = useToast(), g = useRef(null);
+  const { t: o } = useTranslation(), r = useBuilderProp("aiContext", ""), [n, a] = useState(r), l = useRef(null), i = useBuilderProp("saveAiContextCallback", noop), [c, d] = useState(!1), [p, u] = useState(null), [, x] = useState(!1), { toast: h } = useToast(), g = useRef(null);
   useEffect(() => {
     r && a(r);
   }, [r]);
   const j = async () => {
     try {
-      d(!0), u(null), await i(n), f({
+      d(!0), u(null), await i(n), h({
         title: o("Updated AI Context"),
         description: o("You can now Ask AI to edit your content"),
         variant: "default"
@@ -8093,42 +8133,42 @@ const AIUserPrompt = ({ blockId: o }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(AIUserPrompt, { blockId: first(o) })
   ] });
 }, AttrsEditor = React__default.memo(function o({ preloadedAttributes: r = [], onAttributesChange: n }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [f, g] = useState(""), j = useRef(null), b = useRef(null);
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, x] = useState(null), [h, g] = useState(""), j = useRef(null), b = useRef(null);
   useEffect(() => {
     l(r);
   }, [r]);
-  const h = () => {
+  const f = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const C = [...a, { key: i, value: d }];
-      n(C), l(a), c(""), p(""), g("");
+      const S = [...a, { key: i, value: d }];
+      n(S), l(a), c(""), p(""), g("");
     }
-  }, y = (C) => {
-    const v = a.filter((_, I) => I !== C);
-    n(v), l(v);
-  }, S = (C) => {
-    x(C), c(a[C].key), p(a[C].value);
+  }, y = (S) => {
+    const k = a.filter((I, _) => _ !== S);
+    n(k), l(k);
+  }, v = (S) => {
+    x(S), c(a[S].key), p(a[S].value);
   }, B = () => {
     if (i.startsWith("@")) {
       g("Attribute keys cannot start with '@'");
       return;
     }
     if (u !== null && i) {
-      const C = [...a];
-      C[u] = { key: i, value: d }, n(C), l(C), x(null), c(""), p(""), g("");
+      const S = [...a];
+      S[u] = { key: i, value: d }, n(S), l(S), x(null), c(""), p(""), g("");
     }
-  }, A = (C) => {
-    C.key === "Enter" && !C.shiftKey && (C.preventDefault(), u !== null ? B() : h());
+  }, A = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), u !== null ? B() : f());
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex max-h-full flex-1 flex-col", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "form",
       {
-        onSubmit: (C) => {
-          C.preventDefault(), u !== null ? B() : h();
+        onSubmit: (S) => {
+          S.preventDefault(), u !== null ? B() : f();
         },
         className: "space-y-3",
         children: [
@@ -8144,7 +8184,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   id: "attrKey",
                   ref: j,
                   value: i,
-                  onChange: (C) => c(C.target.value),
+                  onChange: (S) => c(S.target.value),
                   placeholder: "Enter Key",
                   className: "py-0 text-xs font-normal leading-tight placeholder:text-slate-400"
                 }
@@ -8162,7 +8202,7 @@ const AIUserPrompt = ({ blockId: o }) => {
                   rows: 2,
                   ref: b,
                   value: d,
-                  onChange: (C) => p(C.target.value),
+                  onChange: (S) => p(S.target.value),
                   onKeyDown: A,
                   placeholder: "Enter Value",
                   className: "text-xs font-normal leading-tight placeholder:text-slate-400"
@@ -8171,20 +8211,20 @@ const AIUserPrompt = ({ blockId: o }) => {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
-          f && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: f })
+          h && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs text-red-500", children: h })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((C, v) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-1 py-4", children: a.map((S, k) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: C.key }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: C.value.toString() })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: S.key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-wrap max-w-[200px] font-normal", children: S.value.toString() })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(v), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(v), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(k), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => y(k), children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, v)) })
+    ] }, k)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -8554,7 +8594,7 @@ const ChooseLayout = ({ open: o, close: r }) => {
       )
     ] }) })
   ] }) });
-}, TopBar = lazy(() => import("./Topbar-XOJDIb13.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
+}, TopBar = lazy(() => import("./Topbar-JSWVqeRj.js")), ThemeConfigPanel = lazy(() => Promise.resolve().then(() => ThemeConfigPanel$3));
 function useSidebarMenuItems() {
   return useMemo(() => compact([
     {
@@ -8573,7 +8613,7 @@ const RootLayout = () => {
     j.preventDefault();
   }, p = (j) => {
     r(o === j ? null : j);
-  }, u = useSidebarMenuItems(), { t: x } = useTranslation(), f = [...u, ...c], g = useBuilderProp("htmlDir", "ltr");
+  }, u = useSidebarMenuItems(), { t: x } = useTranslation(), h = [...u, ...c], g = useBuilderProp("htmlDir", "ltr");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dir: g, className: "h-screen max-h-full w-screen overflow-x-hidden bg-background text-foreground", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
@@ -8584,7 +8624,7 @@ const RootLayout = () => {
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-14 w-screen shrink-0 border-b border-border", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(TopBar, {}) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: f.map((j, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col", children: h.map((j, b) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Button,
                   {
@@ -8608,10 +8648,10 @@ const RootLayout = () => {
                 transition: { duration: 0.3, ease: "easeInOut" },
                 children: o !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "no-scrollbar overflow h-full overflow-x-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col p-3", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { className: "-mt-1 flex h-10 items-center space-x-1 text-base font-bold", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(f, `${o}.icon`, null) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: x(f[o].label) })
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(h, `${o}.icon`, null) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: x(h[o].label) })
                   ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(f, `${o}.component`, null), {}) }) })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: React__default.createElement(get(h, `${o}.component`, null), {}) }) })
                 ] }) })
               }
             ),
@@ -8750,9 +8790,9 @@ export {
   generateUUID as generateBlockId,
   getBlocksFromHTML,
   getClassValueAndUnit,
-  Je as i18n,
+  Qe as i18n,
   cn as mergeClasses,
-  qe as registerChaiBlock,
+  Ze as registerChaiBlock,
   useAddBlock,
   useAddClassesToBlocks,
   useAskAi,
@@ -8794,7 +8834,7 @@ export {
   useStylingState,
   useTheme,
   useThemeOptions,
-  Ke as useTranslation,
+  Xe as useTranslation,
   useUILibraryBlocks,
   useUndoManager,
   useUpdateBlocksProps,