@chaibuilder/sdk 2.4.4 → 2.4.5

package/dist/core.js

@@ -10,8 +10,8 @@ import React__default, { useMemo, useCallback, useEffect, useState, useRef, Comp
 import { atom, useAtom as useAtom$1, useAtomValue as useAtomValue$1, getDefaultStore as getDefaultStore$1, useSetAtom as useSetAtom$1, Provider } from "jotai";
 import { atomWithStorage, splitAtom, useAtomCallback } from "jotai/utils";
 import { g as generateUUID, a as getBreakpointValue, c as cn$2 } from "./common-functions-BGzDsf1z.js";
-import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, a9 as DialogTitle, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, aY as Switch, r as Avatar, aL as Separator, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-BKtuoy5e.js";
-import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, Info, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Undo as Undo$1, ImportIcon, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Moon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Paintbrush, Layers } from "lucide-react";
+import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as DropdownMenuContent, af as DropdownMenuItem, b8 as cn$1, aW as Skeleton, d as Alert, e as AlertDescription, at as Input$1, a1 as Dialog, aa as DialogTrigger, a3 as DialogContent, av as Popover, b4 as Tooltip, b7 as TooltipTrigger, ay as PopoverTrigger, b5 as TooltipContent, ax as PopoverContent, F as Command, H as CommandInput, I as CommandList, J as CommandEmpty, K as CommandGroup, L as CommandItem, a6 as DialogHeader, a9 as DialogTitle, B as Badge, b6 as TooltipProvider, a as AccordionItem, b as AccordionTrigger, c as AccordionContent, ag as DropdownMenuLabel, ak as DropdownMenuSeparator, ac as DropdownMenuCheckboxItem, aq as HoverCard, as as HoverCardTrigger, ar as HoverCardContent, b1 as Textarea, A as Accordion, C as Card, D as CardHeader, y as CardDescription, x as CardContent, au as Label, z as CardFooter, az as ScrollArea, aZ as Tabs, a$ as TabsList, b0 as TabsTrigger, a_ as TabsContent, aX as Slider, aB as Select$1, aJ as SelectTrigger, aK as SelectValue, aC as SelectContent, aE as SelectItem, aL as Separator, aY as Switch, g as AlertDialog, q as AlertDialogTrigger, j as AlertDialogContent, m as AlertDialogHeader, p as AlertDialogTitle, k as AlertDialogDescription, l as AlertDialogFooter, i as AlertDialogCancel, h as AlertDialogAction, r as Avatar, aM as Sheet, aO as SheetContent, aR as SheetHeader, aU as SheetTitle } from "./toggle-CyXEVUOu.js";
+import { ChevronRight, PlusIcon as PlusIcon$1, AlertCircle, X, ChevronLeft, DatabaseIcon, Plus, Bold, Italic, Underline as Underline$1, Strikethrough, List, ListOrdered, AlignLeft, AlignCenter, AlignRight, Link as Link$1, Unlink, Maximize2, PlusCircle, ChevronDown, Info, File, Database, MoreVertical, Loader, SparklesIcon, Search, RefreshCw, Globe, SaveIcon, UnlinkIcon, PencilIcon, EyeOffIcon, Eye, ChevronsUpDown, ChevronsDownUp, Undo as Undo$1, ImportIcon, Type, CornerUpRight, Palette, Sun, Moon, Languages, FileEdit, Recycle, SmileIcon, ShuffleIcon, SunIcon, Sparkles, Loader2, Image as Image$1, Send, DatabaseZapIcon, Edit2, Layers } from "lucide-react";
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
@@ -841,8 +841,8 @@ const undoRedoStateAtom = atom({
   return {
     moveBlocks: (x, k, b) => {
       const A = map(x, (_) => {
-        const w = r.find((E) => E._id === _)._parent || null, S = r.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(_);
-        return { _id: _, oldParent: w, oldPosition: S };
+        const w = r.find((E) => E._id === _)._parent || null, C = r.filter((E) => w ? E._parent === w : !E._parent).map((E) => E._id).indexOf(_);
+        return { _id: _, oldParent: w, oldPosition: C };
       }), B = A.find(({ _id: _ }) => _ === x[0]);
       B && B.oldParent === k && B.oldPosition === b || (i(x, k, b), o({
         undo: () => each(A, ({ _id: _, oldParent: N, oldPosition: w }) => {
@@ -2385,8 +2385,8 @@ const getBlockWithChildren = (o, r) => {
             }
             if (m === "styles") {
               const w = _.map((y) => {
-                for (const S in y)
-                  S !== "_id" && (y[S] = `${STYLES_KEY},${y[S]}`);
+                for (const C in y)
+                  C !== "_id" && (y[C] = `${STYLES_KEY},${y[C]}`);
                 return y;
               });
               c(w);
@@ -3598,26 +3598,26 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
   ({ block: o, children: r }) => {
     const n = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: h } = useBlockHighlight(), m = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), k = useRef(null), b = l, { blockContent: A, blockType: B } = useMemo(() => {
       var j;
-      const S = o._type;
+      const C = o._type;
       let E = o[n];
       const v = getRegisteredChaiBlock(o._type);
-      return f && ((j = v == null ? void 0 : v.i18nProps) == null ? void 0 : j.includes(n)) && has(o, `${n}-${f}`) && (E = get(o, `${n}-${f}`)), { blockContent: E, blockType: S };
+      return f && ((j = v == null ? void 0 : v.i18nProps) == null ? void 0 : j.includes(n)) && has(o, `${n}-${f}`) && (E = get(o, `${n}-${f}`)), { blockContent: E, blockType: C };
     }, [o, f]), _ = useCallback(
-      (S) => {
+      (C) => {
         var v;
-        const E = S || ((v = g.current) == null ? void 0 : v.innerText);
+        const E = C || ((v = g.current) == null ? void 0 : v.innerText);
         m([b], { [n]: E }), u(null), c(null), d(-1), x([]);
       },
       [b, m, c, x, f]
     ), N = useDebouncedCallback(
-      (S) => {
-        m([b], { [n]: S });
+      (C) => {
+        m([b], { [n]: C });
       },
       [b, o, m, f],
       1e3
     ), w = useCallback(
-      (S) => {
-        S.preventDefault(), b && (k.current = b), _(), setTimeout(() => {
+      (C) => {
+        C.preventDefault(), b && (k.current = b), _(), setTimeout(() => {
           const E = k.current;
           k.current = null, x([E]);
         }, 100);
@@ -3625,10 +3625,10 @@ const ChaiFrame = React__default.forwardRef((o, r) => /* @__PURE__ */ jsx(Frame,
       [x, b, f]
     );
     useEffect(() => {
-      var C;
+      var S;
       if (!b) return;
-      const S = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", v = a.querySelector(`${S}${E}`);
-      v && ((C = v == null ? void 0 : v.classList) == null || C.add("sr-only"), u(v));
+      const C = `[data-block-id="${b}"]`, E = i >= 0 ? `[data-block-index="${i}"]` : "", v = a.querySelector(`${C}${E}`);
+      v && ((S = v == null ? void 0 : v.classList) == null || S.add("sr-only"), u(v));
     }, [b, B, a, i]);
     const y = useMemo(() => p ? (h(), B === "RichText" ? /* @__PURE__ */ jsx(
       RichTextEditor,
@@ -3894,7 +3894,7 @@ const CanvasEventsWatcher = () => {
 }, FallbackError = () => /* @__PURE__ */ jsx("div", { className: "h-full w-full rounded-md bg-red-200 p-4 text-red-500", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center", children: [
   /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Oops! Something went wrong." }),
   /* @__PURE__ */ jsx("p", { children: "Please try again." })
-] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-CJfScsxg.js")), CanvasArea = () => {
+] }) }), CodeEditor$1 = React__default.lazy(() => import("./code-editor-0HrsuGAE.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), r = useBuilderProp("onError", noop);
   return /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-1 flex-col", children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full max-h-full flex-col overflow-hidden bg-gray-100/40 px-2", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: r, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -4206,11 +4206,11 @@ const DataBindingSelector = ({
           if (B !== _)
             b.chain().deleteSelection().insertContent(A).run();
           else {
-            const { state: w } = b, y = w.selection.from, S = w.doc.textBetween(Math.max(0, y - 1), y), E = w.doc.textBetween(y, Math.min(y + 1, w.doc.content.size));
+            const { state: w } = b, y = w.selection.from, C = w.doc.textBetween(Math.max(0, y - 1), y), E = w.doc.textBetween(y, Math.min(y + 1, w.doc.content.size));
             let v = "";
-            y > 0 && S !== " " && !m(S) && (v = " ");
-            let C = "";
-            E && E !== " " && !m(E) && (C = " "), b.chain().insertContent(v + A + C).run();
+            y > 0 && C !== " " && !m(C) && (v = " ");
+            let S = "";
+            E && E !== " " && !m(E) && (S = " "), b.chain().insertContent(v + A + S).run();
           }
           setTimeout(() => r(b.getHTML(), {}, n), 100);
           return;
@@ -4218,12 +4218,12 @@ const DataBindingSelector = ({
       } else {
         const b = x, A = b.selectionStart || 0, B = b.value || "", _ = b.selectionEnd || A;
         if (_ > A) {
-          const E = `{{${g}}}`, { text: v } = f(B, A, E), C = B.slice(0, A) + v + B.slice(_);
-          r(C, {}, n);
+          const E = `{{${g}}}`, { text: v } = f(B, A, E), S = B.slice(0, A) + v + B.slice(_);
+          r(S, {}, n);
           return;
         }
-        const w = `{{${g}}}`, { text: y } = f(B, A, w), S = B.slice(0, A) + y + B.slice(A);
-        r(S, {}, n);
+        const w = `{{${g}}}`, { text: y } = f(B, A, w), C = B.slice(0, A) + y + B.slice(A);
+        r(C, {}, n);
       }
     },
     [n, r, a, c == null ? void 0 : c._id, d]
@@ -4245,12 +4245,12 @@ const DataBindingSelector = ({
   onChange: n
 }) => {
   var E;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, C) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), A = useRef(null), B = (E = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : E.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, S) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [h, m] = useState(""), [f, x] = useState([]), [k, b] = useState(-1), A = useRef(null), B = (E = r == null ? void 0 : r.find((v) => v.key === u)) == null ? void 0 : E.name;
   useEffect(() => {
     if (m(""), x([]), b(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), C = get(v, 1, "page") || "page";
-    g(C), (async () => {
-      const j = await l(C, [get(v, 2, "page")]);
+    const v = split(o, ":"), S = get(v, 1, "page") || "page";
+    g(S), (async () => {
+      const j = await l(S, [get(v, 2, "page")]);
       j && Array.isArray(j) && m(get(j, [0, "name"], ""));
     })();
   }, [o]);
@@ -4259,23 +4259,23 @@ const DataBindingSelector = ({
       if (isEmpty(v))
         x([]);
       else {
-        const C = await l(u, v);
-        x(C);
+        const S = await l(u, v);
+        x(S);
       }
       c(!1), b(-1);
     },
     [u],
     300
   ), N = (v) => {
-    const C = ["pageType", u, v.id];
-    C[1] && (n(C.join(":")), m(v.name), p(!1), x([]), b(-1));
+    const S = ["pageType", u, v.id];
+    S[1] && (n(S.join(":")), m(v.name), p(!1), x([]), b(-1));
   }, w = (v) => {
     switch (v.key) {
       case "ArrowDown":
-        v.preventDefault(), b((C) => C < f.length - 1 ? C + 1 : C);
+        v.preventDefault(), b((S) => S < f.length - 1 ? S + 1 : S);
         break;
       case "ArrowUp":
-        v.preventDefault(), b((C) => C > 0 ? C - 1 : C);
+        v.preventDefault(), b((S) => S > 0 ? S - 1 : S);
         break;
       case "Enter":
         if (v.preventDefault(), f.length === 0) return;
@@ -4294,7 +4294,7 @@ const DataBindingSelector = ({
   }, [k]);
   const y = () => {
     m(""), x([]), b(-1), p(!1), n("");
-  }, S = (v) => {
+  }, C = (v) => {
     m(v), p(!isEmpty(v)), c(!0), _(v);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -4305,7 +4305,7 @@ const DataBindingSelector = ({
         {
           type: "text",
           value: h,
-          onChange: (v) => S(v.target.value),
+          onChange: (v) => C(v.target.value),
           onKeyDown: w,
           placeholder: a(`Search ${B ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
@@ -4321,11 +4321,11 @@ const DataBindingSelector = ({
       ' "',
       h,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(f == null ? void 0 : f.slice(0, 20), (v, C) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: A, children: map(f == null ? void 0 : f.slice(0, 20), (v, S) => /* @__PURE__ */ jsxs(
       "li",
       {
         onClick: () => N(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : C === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : S === k ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
           v.name,
           " ",
@@ -5108,11 +5108,11 @@ const MenuBar = ({ editor: o, onExpand: r }) => {
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: w }, y, S) => {
-    y && (c == null ? void 0 : c._id) === r._id && a([r._id], { [y]: get(w, y) }, S);
+  const { selectedLang: o } = useLanguages(), r = useSelectedBlock(), n = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(r == null ? void 0 : r._type), i = formDataWithSelectedLang(r, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), h = getRegisteredChaiBlock(g == null ? void 0 : g._type), m = formDataWithSelectedLang(g, o, h), f = ({ formData: w }, y, C) => {
+    y && (c == null ? void 0 : c._id) === r._id && a([r._id], { [y]: get(w, y) }, C);
   }, x = useCallback(
-    debounce(({ formData: w }, y, S) => {
-      f({ formData: w }, y, S), d(w);
+    debounce(({ formData: w }, y, C) => {
+      f({ formData: w }, y, C), d(w);
     }, 1500),
     [r == null ? void 0 : r._id, o]
   ), k = ({ formData: w }, y) => {
@@ -5124,20 +5124,20 @@ function BlockSettings() {
     if (!w)
       return { schema: {}, uiSchema: {} };
     try {
-      const { schema: y, uiSchema: S } = getBlockFormSchemas(w);
+      const { schema: y, uiSchema: C } = getBlockFormSchemas(w);
       if (w === "Repeater") {
         const E = get(r, "repeaterItems", "");
-        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(S, "filter", { "ui:widget": "collectionSelect" }), set(S, "sort", { "ui:widget": "collectionSelect" })) : (set(S, "filter", { "ui:widget": "hidden" }), set(S, "sort", { "ui:widget": "hidden" }));
+        startsWith(E, `{{${COLLECTION_PREFIX}`) ? (set(C, "filter", { "ui:widget": "collectionSelect" }), set(C, "sort", { "ui:widget": "collectionSelect" })) : (set(C, "filter", { "ui:widget": "hidden" }), set(C, "sort", { "ui:widget": "hidden" }));
       }
-      return { schema: y, uiSchema: S };
+      return { schema: y, uiSchema: C };
     } catch {
       return { schema: {}, uiSchema: {} };
     }
   }, [r]), { wrapperSchema: _, wrapperUiSchema: N } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
-    const w = g == null ? void 0 : g._type, { schema: y = {}, uiSchema: S = {} } = getBlockFormSchemas(w);
-    return { wrapperSchema: y, wrapperUiSchema: S };
+    const w = g == null ? void 0 : g._type, { schema: y = {}, uiSchema: C = {} } = getBlockFormSchemas(w);
+    return { wrapperSchema: y, wrapperUiSchema: C };
   }, [g]);
   return /* @__PURE__ */ jsxs("div", { className: "no-scrollbar overflow-x-hidden px-px", children: [
     !isEmpty(g) && /* @__PURE__ */ jsxs("div", { className: "mb-4 rounded border bg-zinc-100 px-1", children: [
@@ -5390,35 +5390,35 @@ const BlockStylingProps = () => {
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
   const [r, n] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [h, m] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [k, b] = useState(""), [A, B] = useState(!1), [_, N] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: C } = getClassValueAndUnit(i);
-    if (C === "") {
+    const { value: v, unit: S } = getClassValueAndUnit(i);
+    if (S === "") {
       l(v), m(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    m(C), l(C === "class" || isEmpty(v) ? "" : v);
+    m(S), l(S === "class" || isEmpty(v) ? "" : v);
   }, [i, p, u]);
-  const w = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), y = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), S = useCallback(
+  const w = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), y = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), C = useCallback(
     (v = !1) => {
-      const C = getUserInputValues(`${a}`, u);
-      if (get(C, "error", !1)) {
+      const S = getUserInputValues(`${a}`, u);
+      if (get(S, "error", !1)) {
         x(!0);
         return;
       }
-      const j = get(C, "unit") !== "" ? get(C, "unit") : h;
+      const j = get(S, "unit") !== "" ? get(S, "unit") : h;
       if (j === "auto" || j === "none") {
         w(`${d}${j}`);
         return;
       }
-      if (get(C, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const L = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const L = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       v ? y(L) : w(L);
     },
     [w, y, a, h, d, u]
   ), E = useCallback(
     (v) => {
-      const C = getUserInputValues(`${a}`, u);
-      if (get(C, "error", !1)) {
+      const S = getUserInputValues(`${a}`, u);
+      if (get(S, "error", !1)) {
         x(!0);
         return;
       }
@@ -5426,9 +5426,9 @@ const BlockStylingProps = () => {
         w(`${d}${v}`);
         return;
       }
-      if (get(C, "value") === "")
+      if (get(S, "value") === "")
         return;
-      const j = get(C, "unit") !== "" ? get(C, "unit") : v, L = `${get(C, "value", "").startsWith("-") ? "-" : ""}${d}[${get(C, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const j = get(S, "unit") !== "" ? get(S, "unit") : v, L = `${get(S, "value", "").startsWith("-") ? "-" : ""}${d}[${get(S, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       w(L);
     },
     [w, a, d, u]
@@ -5453,28 +5453,28 @@ const BlockStylingProps = () => {
         {
           readOnly: h === "class",
           onKeyPress: (v) => {
-            v.key === "Enter" && S();
+            v.key === "Enter" && C();
           },
           onKeyDown: (v) => {
             if (v.keyCode !== 38 && v.keyCode !== 40)
               return;
             v.preventDefault(), N(!0);
-            const C = parseInt$1(v.target.value);
-            let j = isNaN$1(C) ? 0 : C;
+            const S = parseInt$1(v.target.value);
+            let j = isNaN$1(S) ? 0 : S;
             v.keyCode === 38 && (j += 1), v.keyCode === 40 && (j -= 1);
-            const I = `${j}`, R = `${I.startsWith("-") ? "-" : ""}${d}[${I.replace("-", "")}${h === "-" ? "" : h}]`;
+            const T = `${j}`, R = `${T.startsWith("-") ? "-" : ""}${d}[${T.replace("-", "")}${h === "-" ? "" : h}]`;
             y(R);
           },
           onKeyUp: (v) => {
             _ && (v.preventDefault(), N(!1));
           },
-          onBlur: () => S(),
+          onBlur: () => C(),
           onChange: (v) => {
             x(!1), l(v.target.value);
           },
           onClick: (v) => {
-            var C;
-            (C = v == null ? void 0 : v.target) == null || C.select(), n(!1);
+            var S;
+            (S = v == null ? void 0 : v.target) == null || S.select(), n(!1);
           },
           value: A ? k : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
@@ -5515,15 +5515,15 @@ const BlockStylingProps = () => {
         onDragEnd: (v) => {
           if (b(() => ""), B(!1), isEmpty(v))
             return;
-          const C = `${v}`, I = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
-          w(I);
+          const S = `${v}`, T = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${h === "-" ? "" : h}]`;
+          w(T);
         },
         onDrag: (v) => {
           if (isEmpty(v))
             return;
           b(v);
-          const C = `${v}`, I = `${C.startsWith("-") ? "-" : ""}${d}[${C.replace("-", "")}${h === "-" ? "" : h}]`;
-          y(I);
+          const S = `${v}`, T = `${S.startsWith("-") ? "-" : ""}${d}[${S.replace("-", "")}${h === "-" ? "" : h}]`;
+          y(T);
         },
         currentValue: a,
         unit: h,
@@ -5987,11 +5987,11 @@ const COLOR_PROP = {
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: r } = useTranslation(), { type: n = "icons", label: a, property: l, onEmitChange: i = () => {
   }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), h = useCurrentClassByProperty(l), m = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), k = useMemo(() => get(h, "fullCls", ""), [h]), b = useCallback(
-    (y, S = !0) => {
+    (y, C = !0) => {
       const E = { dark: p, mq: g, mod: u, cls: y, property: l, fullCls: "" };
       (p || u !== "") && (E.mq = "xs");
       const v = generateFullClsName(E);
-      m(x, [v], S);
+      m(x, [v], C);
     },
     [x, p, g, u, l, m]
   ), A = useCallback(() => {
@@ -6433,15 +6433,15 @@ const AskAIStyles = ({ blockId: o }) => {
   ] });
 };
 function ManualClasses() {
-  var I;
-  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), k = (I = first(d)) == null ? void 0 : I.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), A = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
+  var T;
+  const o = useRef(null), [r, n] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [h] = useSelectedBlockIds(), m = useBuilderProp("askAiCallBack", null), [f, x] = useState(""), k = (T = first(d)) == null ? void 0 : T.prop, { classes: b } = getSplitChaiClasses(get(p, k, "")), A = b.split(" ").filter((L) => !isEmpty(L)), B = () => {
     const L = f.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     u(h, L, !0), x("");
   }, [_, N] = useState([]), w = ({ value: L }) => {
-    const R = L.trim().toLowerCase(), T = R.match(/.+:/g);
+    const R = L.trim().toLowerCase(), I = R.match(/.+:/g);
     let D = [];
-    if (T && T.length > 0) {
-      const [O] = T, P = R.replace(O, "");
+    if (I && I.length > 0) {
+      const [O] = I, P = R.replace(O, "");
       D = i.search(P).map((M) => ({
         ...M,
         item: { ...M.item, name: O + M.item.name }
@@ -6451,7 +6451,7 @@ function ManualClasses() {
     return N(map(D, "item"));
   }, y = () => {
     N([]);
-  }, S = (L) => L.name, E = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), v = useMemo(
+  }, C = (L) => L.name, E = (L) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: L.name }), v = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6472,7 +6472,7 @@ function ManualClasses() {
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
     }),
     [f, c, o]
-  ), C = (L) => {
+  ), S = (L) => {
     debugger;
     const R = r.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
     g(h, [L]), u(h, R, !0), n(""), l(-1);
@@ -6507,7 +6507,7 @@ function ManualClasses() {
           suggestions: _,
           onSuggestionsFetchRequested: w,
           onSuggestionsClearRequested: y,
-          getSuggestionValue: S,
+          getSuggestionValue: C,
           renderSuggestion: E,
           inputProps: v,
           containerProps: {
@@ -6538,16 +6538,16 @@ function ManualClasses() {
         {
           ref: o,
           value: r,
-          onChange: (T) => n(T.target.value),
+          onChange: (I) => n(I.target.value),
           onBlur: () => {
-            C(L);
+            S(L);
           },
-          onKeyDown: (T) => {
-            T.key === "Enter" && C(L);
+          onKeyDown: (I) => {
+            I.key === "Enter" && S(L);
           },
-          onFocus: (T) => {
+          onFocus: (I) => {
             setTimeout(() => {
-              T.target.select();
+              I.target.select();
             }, 0);
           },
           className: "group relative flex max-w-[260px] cursor-default items-center gap-x-1 truncate break-words rounded border border-border bg-gray-200 p-px px-1.5 pr-2 text-[11px] text-gray-600 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
@@ -7038,17 +7038,17 @@ const CoreBlock = ({
   }
   if (d && (delete a.styles_attrs, a.showDropdown = !1), u && delete a.styles_attrs, p) {
     delete a.styles_attrs;
-    const w = filter(n.children || [], (S) => (S == null ? void 0 : S.tagName) !== "span");
+    const w = filter(n.children || [], (C) => (C == null ? void 0 : C.tagName) !== "span");
     a.content = getTextContent(w);
     const y = find(
       n.children || [],
-      (S) => (S == null ? void 0 : S.tagName) === "span" && some(S.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg")
+      (C) => (C == null ? void 0 : C.tagName) === "span" && some(C.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg")
     );
     if (y) {
-      const S = find(y.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg");
-      if (S) {
-        a.icon = stringify([S]);
-        const { height: E, width: v } = getSvgDimensions(S, "16px", "16px");
+      const C = find(y.children || [], (E) => (E == null ? void 0 : E.tagName) === "svg");
+      if (C) {
+        a.icon = stringify([C]);
+        const { height: E, width: v } = getSvgDimensions(C, "16px", "16px");
         a.iconHeight = E, a.iconWidth = v;
       }
     }
@@ -7061,9 +7061,9 @@ const CoreBlock = ({
     const w = stringify([n]);
     return hasVideoEmbed(w) && (set(a, "_type", "Video"), set(a, "url", getVideoURLFromHTML(w)), set(a, "styles", `${STYLES_KEY},`), set(a, "controls", { autoPlay: !1, muted: !0, loop: !1, controls: !1 })), a.content = w, [a];
   } else if (n.tagName === "svg") {
-    const w = get(find(n.attributes, { key: "class" }), "value", ""), { height: y, width: S } = getHeightAndWidthFromClass(w);
-    if (y && S)
-      a.styles = `${STYLES_KEY}, ${cn$2(`w-${S} h-${y}`, w)}`.trim(), a.height = y == null ? void 0 : y.replace("px", ""), a.width = S == null ? void 0 : S.replace("px", "");
+    const w = get(find(n.attributes, { key: "class" }), "value", ""), { height: y, width: C } = getHeightAndWidthFromClass(w);
+    if (y && C)
+      a.styles = `${STYLES_KEY}, ${cn$2(`w-${C} h-${y}`, w)}`.trim(), a.height = y == null ? void 0 : y.replace("px", ""), a.width = C == null ? void 0 : C.replace("px", "");
     else {
       const E = (B = find(n.attributes, { key: "height" })) == null ? void 0 : B.value, v = (_ = find(n.attributes, { key: "width" })) == null ? void 0 : _.value;
       E && v ? (a.styles = `${STYLES_KEY}, ${cn$2(`w-[${v}px] h-[${E}px]`, w)}`.trim(), a.height = E, a.width = v) : a.styles = `${STYLES_KEY}, ${cn$2("w-full h-full", w)}`.trim();
@@ -7245,7 +7245,7 @@ const registerChaiLibrary = (o, r) => {
     ] }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: r }) => {
-  const [n, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((C) => C.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
+  const [n, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((S) => S.id === n) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [h, m] = useState([]), f = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7257,8 +7257,8 @@ const registerChaiLibrary = (o, r) => {
       m([]);
       return;
     }
-    const C = f.current.search(u).map((j) => j.item);
-    m(C);
+    const S = f.current.search(u).map((j) => j.item);
+    m(S);
   }, [u]);
   const x = u.trim() && !isEmpty(h) ? h : c, k = groupBy(x, "group"), [b, A] = useState(null);
   useEffect(() => {
@@ -7271,13 +7271,13 @@ const registerChaiLibrary = (o, r) => {
       return;
     }
   }, [k, b]);
-  const B = get(k, b, []), _ = useRef(null), { t: N } = useTranslation(), w = (C) => {
+  const B = get(k, b, []), _ = useRef(null), { t: N } = useTranslation(), w = (S) => {
     _.current && (clearTimeout(_.current), _.current = null), _.current = setTimeout(() => {
-      _.current && A(C);
+      _.current && A(S);
     }, 400);
   }, y = () => {
     i != null && i.id && p(i.id);
-  }, S = () => {
+  }, C = () => {
     g("");
   };
   if (d)
@@ -7285,7 +7285,7 @@ const registerChaiLibrary = (o, r) => {
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const E = filter(B, (C, j) => j % 2 === 0), v = filter(B, (C, j) => j % 2 === 1);
+  const E = filter(B, (S, j) => j % 2 === 0), v = filter(B, (S, j) => j % 2 === 1);
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-full max-h-full flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-border py-2", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
       /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -7294,14 +7294,14 @@ const registerChaiLibrary = (o, r) => {
         {
           placeholder: N("Search blocks..."),
           value: u,
-          onChange: (C) => g(C.target.value),
+          onChange: (S) => g(S.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
       u && /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: S,
+          onClick: C,
           className: "absolute right-2 top-2.5 text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
         }
@@ -7319,7 +7319,7 @@ const registerChaiLibrary = (o, r) => {
               /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
               N("Retry")
             ] })
-          ] }) }) : map(k, (C, j) => /* @__PURE__ */ jsxs(
+          ] }) }) : map(k, (S, j) => /* @__PURE__ */ jsxs(
             "div",
             {
               onMouseEnter: () => w(j),
@@ -7346,22 +7346,22 @@ const registerChaiLibrary = (o, r) => {
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
             isEmpty(B) && !isEmpty(k) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: N("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((C, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: E.map((S, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: C,
+                  block: S,
                   library: i
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((C, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((S, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
                   position: r,
-                  block: C,
+                  block: S,
                   library: i
                 },
                 `block-second-${j}`
@@ -7464,43 +7464,43 @@ const registerChaiLibrary = (o, r) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...r });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: r, parentId: n, position: a, gridCols: l = "grid-cols-4" }) => {
   var v;
-  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (v = find(c, (C) => C._id === n)) == null ? void 0 : v._type, [m, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
+  const { t: i } = useTranslation(), [c] = useBlocksStore(), [d, p] = useState(""), u = useRef(null), [g] = useAtom$1(addBlockTabAtom), h = (v = find(c, (S) => S._id === n)) == null ? void 0 : v._type, [m, f] = useState("all"), [x, k] = useState(null), b = useRef(null);
   useEffect(() => {
-    const C = setTimeout(() => {
+    const S = setTimeout(() => {
       var j;
       (j = u.current) == null || j.focus();
     }, 0);
-    return () => clearTimeout(C);
+    return () => clearTimeout(S);
   }, [g]), useEffect(() => {
     d && (f("all"), k(null));
-  }, [d]), useEffect(() => (b.current = debounce((C) => {
-    f(C);
+  }, [d]), useEffect(() => (b.current = debounce((S) => {
+    f(S);
   }, 500), () => {
     b.current && b.current.cancel();
   }), []);
-  const A = useCallback((C) => {
-    k(C), b.current && b.current(C);
+  const A = useCallback((S) => {
+    k(S), b.current && b.current(S);
   }, []), B = useCallback(() => {
     k(null), b.current && b.current.cancel();
-  }, []), _ = useCallback((C) => {
-    b.current && b.current.cancel(), f(C), k(null);
+  }, []), _ = useCallback((S) => {
+    b.current && b.current.cancel(), f(S), k(null);
   }, []), N = useMemo(
     () => d ? values(r).filter(
-      (C) => {
-        var j, I;
-        return (((j = C.label) == null ? void 0 : j.toLowerCase()) + " " + ((I = C.type) == null ? void 0 : I.toLowerCase())).includes(d.toLowerCase());
+      (S) => {
+        var j, T;
+        return (((j = S.label) == null ? void 0 : j.toLowerCase()) + " " + ((T = S.type) == null ? void 0 : T.toLowerCase())).includes(d.toLowerCase());
       }
     ) : r,
     [r, d]
   ), w = useMemo(
     () => d ? o.filter(
-      (C) => reject(filter(values(N), { group: C }), { hidden: !0 }).length > 0
-    ) : o.filter((C) => reject(filter(values(r), { group: C }), { hidden: !0 }).length > 0),
+      (S) => reject(filter(values(N), { group: S }), { hidden: !0 }).length > 0
+    ) : o.filter((S) => reject(filter(values(r), { group: S }), { hidden: !0 }).length > 0),
     [r, N, o, d]
   ), y = useMemo(
-    () => sortBy(w, (C) => CORE_GROUPS.indexOf(C) === -1 ? 99 : CORE_GROUPS.indexOf(C)),
+    () => sortBy(w, (S) => CORE_GROUPS.indexOf(S) === -1 ? 99 : CORE_GROUPS.indexOf(S)),
     [w]
-  ), S = useMemo(() => m === "all" ? N : filter(values(N), { group: m }), [N, m]), E = useMemo(() => m === "all" ? y : [m], [y, m]);
+  ), C = useMemo(() => m === "all" ? N : filter(values(N), { group: m }), [N, m]), E = useMemo(() => m === "all" ? y : [m], [y, m]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-background/80 px-4 py-2 backdrop-blur-sm", children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7510,7 +7510,7 @@ const registerChaiLibrary = (o, r) => {
         placeholder: i("Search blocks..."),
         value: d,
         className: "-ml-2",
-        onChange: (C) => p(C.target.value)
+        onChange: (S) => p(S.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
@@ -7526,16 +7526,16 @@ const registerChaiLibrary = (o, r) => {
           },
           "sidebar-all"
         ),
-        y.map((C) => /* @__PURE__ */ jsx(
+        y.map((S) => /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => _(C),
-            onMouseEnter: () => A(C),
+            onClick: () => _(S),
+            onMouseEnter: () => A(S),
             onMouseLeave: B,
-            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === C || x === C ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
-            children: capitalize(i(C.toLowerCase()))
+            className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${m === S || x === S ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
+            children: capitalize(i(S.toLowerCase()))
           },
-          `sidebar-${C}`
+          `sidebar-${S}`
         ))
       ] }) }) }),
       /* @__PURE__ */ jsx("div", { className: "h-full w-3/4 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { id: "add-blocks-scroll-area", className: "no-scrollbar mr-4 h-full", children: w.length === 0 && d ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsxs("p", { children: [
@@ -7543,10 +7543,10 @@ const registerChaiLibrary = (o, r) => {
         ' "',
         d,
         '"'
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((C) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(C.toLowerCase())) }),
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "space-y-6 p-4", children: E.map((S) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(i(S.toLowerCase())) }),
         /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
-          m === "all" ? filter(values(S), { group: C }) : values(S),
+          m === "all" ? filter(values(C), { group: S }) : values(C),
           { hidden: !0 }
         ).map((j) => /* @__PURE__ */ jsx(
           CoreBlock,
@@ -7558,7 +7558,7 @@ const registerChaiLibrary = (o, r) => {
           },
           j.type
         )) })
-      ] }, C)) }) }) })
+      ] }, S)) }) }) })
     ] })
   ] });
 }, addBlockTabAtom = atomWithStorage("__add_block_tab", "library"), AddBlocksPanel = ({
@@ -7911,35 +7911,35 @@ const Input = ({ node: o }) => {
   var R;
   const { t: a } = useTranslation(), [l, , i] = useHiddenBlockIds(), [c] = useAtom$1(canvasIframeAtom), { hasPermission: d } = usePermissions();
   let p = null;
-  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: A, handleClick: B } = o, _ = (T) => {
-    T.stopPropagation(), !l.includes(m) && o.toggle();
-  }, N = (T) => {
-    T.isInternal && (p = T.isOpen, T.isOpen && T.close());
-  }, w = (T) => {
-    T.isInternal && p !== null && (p ? T.open() : T.close(), p = null);
-  }, [y, S] = useAtom$1(currentAddSelection), E = () => {
-    var T;
-    v(), o.parent.isSelected || S((T = o == null ? void 0 : o.parent) == null ? void 0 : T.id);
+  const u = o.children.length > 0, { highlightBlock: g, clearHighlight: h } = useBlockHighlight(), { id: m, data: f, isSelected: x, willReceiveDrop: k, isDragging: b, isEditing: A, handleClick: B } = o, _ = (I) => {
+    I.stopPropagation(), !l.includes(m) && o.toggle();
+  }, N = (I) => {
+    I.isInternal && (p = I.isOpen, I.isOpen && I.close());
+  }, w = (I) => {
+    I.isInternal && p !== null && (p ? I.open() : I.close(), p = null);
+  }, [y, C] = useAtom$1(currentAddSelection), E = () => {
+    var I;
+    v(), o.parent.isSelected || C((I = o == null ? void 0 : o.parent) == null ? void 0 : I.id);
   }, v = () => {
-    S(null);
-  }, C = (T) => {
-    v(), T.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(T);
+    C(null);
+  }, S = (I) => {
+    v(), I.stopPropagation(), !o.isOpen && !l.includes(m) && o.toggle(), B(I);
   };
   useEffect(() => {
-    const T = setTimeout(() => {
+    const I = setTimeout(() => {
       k && !o.isOpen && !b && !l.includes(m) && o.toggle();
     }, 500);
-    return () => clearTimeout(T);
+    return () => clearTimeout(I);
   }, [k, o, b]);
-  const j = (T, D) => {
-    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${T}]`);
+  const j = (I, D) => {
+    const O = c.contentDocument || c.contentWindow.document, P = O.querySelector(`[data-block-id=${I}]`);
     P && P.setAttribute("data-drop", D);
     const $ = P.getBoundingClientRect(), M = c.getBoundingClientRect();
     $.top >= M.top && $.left >= M.left && $.bottom <= M.bottom && $.right <= M.right || (O.documentElement.scrollTop = P.offsetTop - M.top);
-  }, I = (T) => {
+  }, T = (I) => {
     v();
     const D = get(o, "parent.id");
-    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: T }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: T });
+    D !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: D, position: I }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: I });
   };
   if (m === ROOT_TEMP_KEY)
     return /* @__PURE__ */ jsxs("div", { className: "group relative w-full cursor-pointer", children: [
@@ -7948,7 +7948,7 @@ const Input = ({ node: o }) => {
         "div",
         {
           role: "button",
-          onClick: () => I(-1),
+          onClick: () => T(-1),
           className: "h-1 rounded bg-primary opacity-0 duration-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 transform items-center gap-x-1 rounded-full bg-primary px-3 py-1 text-[9px] leading-tight text-white hover:bg-primary", children: [
             /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[3]" }),
@@ -7965,27 +7965,27 @@ const Input = ({ node: o }) => {
     {
       onMouseEnter: () => g(m),
       onMouseLeave: () => h(),
-      onClick: C,
+      onClick: S,
       style: r,
       "data-node-id": m,
       ref: l.includes(m) ? null : n,
       onDragStart: () => N(o),
       onDragEnd: () => w(o),
-      onDragOver: (T) => {
-        T.preventDefault(), j(m, "yes");
+      onDragOver: (I) => {
+        I.preventDefault(), j(m, "yes");
       },
-      onDragLeave: (T) => {
-        T.preventDefault(), j(m, "no");
+      onDragLeave: (I) => {
+        I.preventDefault(), j(m, "no");
       },
-      onDrop: (T) => {
-        T.preventDefault(), j(m, "no");
+      onDrop: (I) => {
+        I.preventDefault(), j(m, "no");
       },
       children: [
         d(PERMISSIONS.ADD_BLOCK) && (o == null ? void 0 : o.rowIndex) > 0 && (o.parent.isOpen && canAddChildBlock(get(o, "parent.data._type")) || ((R = o == null ? void 0 : o.parent) == null ? void 0 : R.id) === "__REACT_ARBORIST_INTERNAL_ROOT__") && /* @__PURE__ */ jsx("div", { className: "group relative ml-5 h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
           "div",
           {
-            onClick: (T) => {
-              T.stopPropagation(), I(o.childIndex);
+            onClick: (I) => {
+              I.stopPropagation(), T(o.childIndex);
             },
             onMouseEnter: E,
             onMouseLeave: v,
@@ -8028,8 +8028,8 @@ const Input = ({ node: o }) => {
                         "div",
                         {
                           className: "ml-1.5 flex items-center gap-x-1 truncate text-[13px]",
-                          onDoubleClick: (T) => {
-                            T.stopPropagation(), o.edit(), o.deselect();
+                          onDoubleClick: (I) => {
+                            I.stopPropagation(), o.edit(), o.deselect();
                           },
                           children: /* @__PURE__ */ jsx("span", { children: getBlockDisplayName(f) })
                         }
@@ -8055,8 +8055,8 @@ const Input = ({ node: o }) => {
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
-                      onClick: (T) => {
-                        T.stopPropagation(), i(m), o.isOpen && o.toggle();
+                      onClick: (I) => {
+                        I.stopPropagation(), i(m), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent",
                       asChild: !0,
@@ -8276,17 +8276,18 @@ const Input = ({ node: o }) => {
     /* @__PURE__ */ jsx(PasteAtRootContextMenu, { parentContext, setParentContext })
   ] });
 }, BorderRadiusInput = ({ value: o, onChange: r, disabled: n }) => {
-  const a = debounce((l) => r(l), 200);
+  const [a, l] = useState(o), i = useThrottledCallback(r, [o], 200, !0);
   return /* @__PURE__ */ jsx(
-    "input",
+    Slider,
     {
-      type: "range",
-      min: "0",
-      step: "1",
-      max: "30",
+      min: 0,
+      step: 1,
+      max: 50,
       disabled: n,
-      defaultValue: o.replace("px", ""),
-      onChange: (l) => a(l.target.value),
+      value: [Number(a.replace("px", ""))],
+      onValueChange: (c) => {
+        l(c[0].toString() + "px"), i(c[0].toString());
+      },
       className: "flex-1 cursor-pointer"
     }
   );
@@ -8317,20 +8318,17 @@ const Input = ({ node: o }) => {
   onChange: n
 }) => {
   const a = useRegisteredFonts();
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-    /* @__PURE__ */ jsx(Label, { className: "text-sm", children: startCase(o) }),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        className: "mt-1 w-full cursor-pointer rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-border focus:ring-offset-2",
-        value: r,
-        onChange: (l) => n(l.target.value),
-        children: a.map((l) => /* @__PURE__ */ jsx("option", { value: l.family, children: l.family }, l.family))
-      }
-    )
+  return useEffect(() => {
+    a.some((l) => l.family === r) || n(a[0].family);
+  }, [r, n]), /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ jsx(Label, { className: "mb-1 block text-xs text-gray-600", children: startCase(o) }),
+    /* @__PURE__ */ jsxs(Select$1, { value: r, onValueChange: n, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full text-xs text-black", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select font" }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: a.map((l) => /* @__PURE__ */ jsx(SelectItem, { value: l.family, children: l.family }, l.family)) })
+    ] })
   ] });
 }, LazyCssImportModal = lazy(
-  () => import("./CssImportModal-DXUM3oRB.js").then((o) => ({ default: o.CssImportModal }))
+  () => import("./css-import-modal-CcUf6F6T.js").then((o) => ({ default: o.CssImportModal }))
 ), PREV_THEME_KEY = "chai-builder-previous-theme", setPreviousTheme = (o) => {
   if (!(typeof window > "u"))
     try {
@@ -8346,148 +8344,166 @@ const Input = ({ node: o }) => {
       console.warn("Failed to clear previous theme from localStorage:", o);
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [r] = useDarkMode(), [n, a] = React.useState(""), [l, i] = React.useState(!1), c = useBuilderProp("themePresets", []), d = useBuilderProp("themePanelComponent", null), { hasPermission: p } = usePermissions(), [u, g] = useTheme(), h = useThemeOptions(), { t: m } = useTranslation(), f = React.useCallback(
+  const [r, n] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), [g, h] = useTheme(), m = useThemeOptions(), { t: f } = useTranslation(), x = React.useCallback(
     (w) => {
-      const y = { ...u };
-      setPreviousTheme(y), g(w), toast.success("Theme updated", {
+      const y = { ...g };
+      setPreviousTheme(y), h(w), toast.success("Theme updated", {
         action: {
           label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(Undo$1, { className: "h-4 w-4" }),
             " Undo"
           ] }),
           onClick: () => {
-            g(y), clearPreviousTheme(), toast.dismiss();
+            h(y), clearPreviousTheme(), toast.dismiss();
           }
         },
         closeButton: !0,
         duration: 15e3
       });
     },
-    [u, g]
-  ), x = (w) => {
-    a(w);
-  }, k = () => {
-    const w = c.find((y) => Object.keys(y)[0] === n);
+    [g, h]
+  ), k = () => {
+    const w = d.find((y) => Object.keys(y)[0] === a);
     if (w) {
       const y = Object.values(w)[0];
-      y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? f(y) : console.error("Invalid preset structure:", y);
+      y && typeof y == "object" && "fontFamily" in y && "borderRadius" in y && "colors" in y ? (x(y), l("")) : console.error("Invalid preset structure:", y);
     } else
-      console.error("Preset not found:", n);
+      console.error("Preset not found:", a);
   }, b = (w) => {
-    f(w), a("");
+    x(w), l("");
   }, A = useDebouncedCallback(
     (w, y) => {
-      g(() => ({
-        ...u,
+      h(() => ({
+        ...g,
         fontFamily: {
-          ...u.fontFamily,
+          ...g.fontFamily,
           [w.replace(/font-/g, "")]: y
         }
       }));
     },
-    [u],
+    [g],
     200
-  ), B = useDebouncedCallback(
+  ), B = React.useCallback(
     (w) => {
-      g(() => ({
-        ...u,
+      h(() => ({
+        ...g,
         borderRadius: `${w}px`
       }));
     },
-    [u],
-    200
+    [g]
   ), _ = useDebouncedCallback(
     (w, y) => {
-      g(() => {
-        const S = get(u, `colors.${w}`);
-        return r ? set(S, 1, y) : set(S, 0, y), {
-          ...u,
+      h(() => {
+        const C = get(g, `colors.${w}`);
+        return r ? set(C, 1, y) : set(C, 0, y), {
+          ...g,
           colors: {
-            ...u.colors,
-            [w]: S
+            ...g.colors,
+            [w]: C
           }
         };
       });
     },
-    [u],
+    [g],
     200
   ), N = (w) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(w.items).map(([y]) => {
-    const S = get(u, `colors.${y}.${r ? 1 : 0}`);
-    return S ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+    const C = get(g, `colors.${y}.${r ? 1 : 0}`);
+    return C ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: S,
+          value: C,
           onChange: (E) => _(y, E)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: y.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!y.toLowerCase().includes("foreground") && !y.toLowerCase().includes("border") && !y.toLowerCase().includes("input") && !y.toLowerCase().includes("ring") && !y.toLowerCase().includes("background") ? " Background" : "") })
     ] }, y) : null;
   }) });
-  return p("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+  return u("edit_theme") ? /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
     /* @__PURE__ */ jsxs("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto", o), children: [
-      c.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 py-2", children: [
+      d.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-0 my-2 flex flex-col gap-1 py-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Presets") }),
-          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => i(!0), children: [
+          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: f("Presets") }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
             /* @__PURE__ */ jsx(ImportIcon, { className: "h-4 w-4" }),
-            m("Import theme")
+            f("Import theme")
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: n,
-              onChange: (w) => x(w.target.value),
-              className: "w-full space-y-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Select preset" }),
-                Array.isArray(c) && c.map((w) => /* @__PURE__ */ jsx("option", { value: Object.keys(w)[0], children: capitalize(Object.keys(w)[0].replaceAll("_", " ")) }, Object.keys(w)[0]))
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: "flex w-[30%] items-end", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "w-full text-sm",
-              disabled: n === "",
-              variant: "default",
-              onClick: k,
-              children: m("Apply")
-            }
-          ) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-[70%]", children: /* @__PURE__ */ jsxs(Select$1, { value: a, onValueChange: l, children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 w-full text-sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select preset" }) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((w) => {
+              const y = Object.keys(w)[0], C = y.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: y, children: capitalize(C) }, y);
+            }) })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: k, children: f("Apply") }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: cn$2("space-y-2", o), children: [
-        (h == null ? void 0 : h.fontFamily) && /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: Object.entries(h.fontFamily).map(([w, y]) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: cn$2("my-2 space-y-3", o), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Type, { className: "h-3 w-3 text-gray-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Typography" })
+        ] }),
+        (m == null ? void 0 : m.fontFamily) && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(m.fontFamily).map(([w, y]) => /* @__PURE__ */ jsx(
           FontSelector,
           {
             label: w,
-            value: u.fontFamily[w.replace(/font-/g, "")] || y[Object.keys(y)[0]],
-            onChange: (S) => A(w, S)
+            value: g.fontFamily[w.replace(/font-/g, "")] || y[Object.keys(y)[0]],
+            onChange: (C) => A(w, C)
           },
           w
         )) }),
-        (h == null ? void 0 : h.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 py-3", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Border Radius") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 py-2", children: [
-            /* @__PURE__ */ jsx(BorderRadiusInput, { value: u.borderRadius, onChange: B }),
-            /* @__PURE__ */ jsx("span", { className: "w-12 text-sm", children: u.borderRadius })
-          ] })
+        /* @__PURE__ */ jsx(Separator, {}),
+        (m == null ? void 0 : m.borderRadius) && /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(CornerUpRight, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Border Radius" })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: g.borderRadius })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 py-2", children: /* @__PURE__ */ jsx(BorderRadiusInput, { value: g.borderRadius, onChange: B }) })
         ] }),
-        (h == null ? void 0 : h.colors) && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-0.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-sm", children: m("Colors") }),
-          /* @__PURE__ */ jsx("div", { className: "w-full space-y-4 pt-2", children: h.colors.map((w) => N(w)) }, r ? "dark" : "light")
-        ] })
+        /* @__PURE__ */ jsx(Separator, {}),
+        (m == null ? void 0 : m.colors) && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Palette, { className: "h-3 w-3 text-gray-600" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: "Colors" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: r,
+                  onCheckedChange: (w) => n(w),
+                  "aria-label": "Toggle dark mode",
+                  className: "mx-1"
+                }
+              ),
+              /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: m.colors.map((w) => N(w)) })
+        ] }),
+        /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: i && /* @__PURE__ */ jsx(
+          LazyCssImportModal,
+          {
+            open: i,
+            onOpenChange: c,
+            onImport: b
+          }
+        ) })
       ] }),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {}),
       /* @__PURE__ */ jsx("br", {})
     ] }),
-    d && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(d) }),
-    /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: l && /* @__PURE__ */ jsx(LazyCssImportModal, { open: l, onOpenChange: i, onImport: b }) })
+    p && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 w-full", children: React.createElement(p) })
   ] }) : /* @__PURE__ */ jsx("div", { className: "relative w-full", children: /* @__PURE__ */ jsx("div", { className: cn$2("no-scrollbar h-full w-full overflow-y-auto text-center", o), children: /* @__PURE__ */ jsx("div", { className: "mt-10 h-full items-center justify-center gap-2 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "You don't have permission to edit the theme. Please contact your administrator to get access." }) }) }) });
 }), Core = "Core", Import = "Import", Breakpoints = "Breakpoints", Clear = "Clear", Cancel = "Cancel", Yes = "Yes", Preview = "Preview", Settings = "Settings", Styling = "Styling", Remove = "Remove", Choose = "Choose", Cut = "Cut", Copy = "Copy", Paste = "Paste", Delete = "Delete", classes = "classes", Theme = "Theme", Outline = "Outline", Copied = "Copied", Stop = "Stop", Edit = "Edit", Tag = "Tag", Value = "Value", Images = "Images", Library = "Library", Blocks = "Blocks", Basic = "Basic", Media = "Media", Advanced = "Advanced", Form = "Form", Groups = "Groups", Accordions = "Accordions", Buttons = "Buttons", Layouts = "Layouts", FAQ = "FAQ", Hero = "Hero", Features = "Features", Footer = "Footer", Navbar = "Navbar", Icons = "Icons", Testimonials = "Testimonials", Blog = "Blog", Saved = "Saved", Unsaved = "Unsaved", Randomize = "Randomize", theme_config = { heading_font: "Heading Font", body_font: "Body Font", rounded_corner: "Rounded Corners", primary: "Primary", secondary: "Secondary", background: "Background", text_color: "Text Color", background_dark_mode: "Background (Dark Mode)", text_color_dark_mode: "Text Color (Dark Mode)" }, web_blocks = { box: "box", tag: "Tag", div: "div", level: "Level", header: "header", footer: "footer", section: "section", article: "article", aside: "aside", main: "main", nav: "navigation", figure: "figure", details: "details", summary: "summary", dialog: "dialog", strike: "strike", caption: "caption", legend: "legend", figcaption: "figure caption", mark: "mark", background_image: "Background Image", label: "Label", default: "default", icon_size: "Icon Size", icon_position: "Icon Position", start: "Start", end: "End", button: "Button", custom_html: "Custom HTML", html_code: "HTML Code", default_snippet: "The HTML snippet goes here...", placeholder: "Enter custom HTML code here", custom_script: "Custom Script", dark_mode: "Dark Mode", divider: "Divider", empty_box: "Empty Box", heading: "Heading", image: "Image", alt: "Alt", width: "Width", height: "Height", video: "Video", span: "Span", content: "Content", icon: "Icon", richtext: "Rich Text", list: "List", list_type: "List Type", listitem: "List Item", link: "Link", list_item: "List Item", none: "None", disc: "Disc", number: "Number", paragraph: "Paragraph", lightbox_link: "Lightbox Link", href: "Link", type: "Type", iframe: "iframe", inline: "inline", ajax: "ajax", autoplay: "Video autoplay", max_width: "Max Width", backdrop_color: "Background Color", gallery_name: "Gallery Name", slot: "Slot", empty_slot: "Empty Slot", text: "Text", video_url: "Video URL", controls: "Show Controls", loop: "Loop", muted: "Muted", checkbox: "Checkbox", required: "Required", checked: "Checked", submit_button: "Submit Button", form: "Form", submit_url: "Submit URL", error_message: "Error Message", success_message: "Success Message", input: "Input", value: "Value", show_label: "Show Label", field_name: "Field Name", radio: "Radio", multiple: "Multiple", options: "Options", select: "Select", multiple_choice: "Multiple Choice", textarea: "Textarea", rows: "Rows" }, Undo = "Undo", Redo = "Redo", Duplicate = "Duplicate", Close = "Close", Selected = "Selected", Select = "Select", Attributes = "Attributes", apply = "apply", presets = "presets", Orientation = "Orientation", Color = "Color", Upload = "Upload", lngEn = {
   "Add block": "Add Block",
@@ -9427,8 +9443,8 @@ const AiAssistant = () => {
       n(y), l(a), c(""), p(""), m("");
     }
   }, A = (y) => {
-    const S = a.filter((E, v) => v !== y);
-    n(S), l(S);
+    const C = a.filter((E, v) => v !== y);
+    n(C), l(C);
   }, B = (y) => {
     g(y), c(a[y].key), p(a[y].value);
   }, _ = () => {
@@ -9443,23 +9459,23 @@ const AiAssistant = () => {
   }, N = (y) => {
     y.key === "Enter" && !y.shiftKey && (y.preventDefault(), u !== null ? _() : b());
   }, w = useCallback((y) => {
-    const S = (C) => /[.,!?;:]/.test(C), E = (C, j, I) => {
+    const C = (S) => /[.,!?;:]/.test(S), E = (S, j, T) => {
       let L = "", R = "";
-      const T = j > 0 ? C[j - 1] : "", D = j < C.length ? C[j] : "";
-      return j > 0 && (T === "." || !S(T) && T !== " ") && (L = " "), j < C.length && !S(D) && D !== " " && (R = " "), {
-        text: L + I + R,
+      const I = j > 0 ? S[j - 1] : "", D = j < S.length ? S[j] : "";
+      return j > 0 && (I === "." || !C(I) && I !== " ") && (L = " "), j < S.length && !C(D) && D !== " " && (R = " "), {
+        text: L + T + R,
         prefixLength: L.length,
         suffixLength: R.length
       };
     }, v = x.current;
     if (v) {
-      const C = v.selectionStart || 0, j = v.value || "", I = v.selectionEnd || C;
-      if (I > C) {
-        const O = `{{${y}}}`, { text: P } = E(j, C, O), $ = j.slice(0, C) + P + j.slice(I);
+      const S = v.selectionStart || 0, j = v.value || "", T = v.selectionEnd || S;
+      if (T > S) {
+        const O = `{{${y}}}`, { text: P } = E(j, S, O), $ = j.slice(0, S) + P + j.slice(T);
         p($);
         return;
       }
-      const R = `{{${y}}}`, { text: T } = E(j, C, R), D = j.slice(0, C) + T + j.slice(C);
+      const R = `{{${y}}}`, { text: I } = E(j, S, R), D = j.slice(0, S) + I + j.slice(S);
       p(D);
     }
   }, []);
@@ -9518,16 +9534,16 @@ const AiAssistant = () => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((y, S) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-1 py-4", children: a.map((y, C) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded border p-2 text-sm", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs leading-tight", children: [
         /* @__PURE__ */ jsx("span", { className: "truncate text-[12px] font-light text-muted-foreground", children: y.key }),
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: y.value.toString() })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 text-slate-400", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(S), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(S), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => B(C), children: /* @__PURE__ */ jsx(Edit2, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => A(C), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
       ] })
-    ] }, S)) })
+    ] }, C)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [r, n] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
@@ -9734,7 +9750,7 @@ const RootLayout = () => {
           /* @__PURE__ */ jsx("div", { className: "flex h-[50px] w-screen items-center border-b border-border", children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(o, {}) }) }),
           /* @__PURE__ */ jsxs("main", { className: "relative flex h-[calc(100vh-56px)] max-w-full flex-1 flex-row", children: [
             /* @__PURE__ */ jsxs("div", { id: "sidebar", className: "flex w-12 flex-col items-center justify-between border-r border-border py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((y, S) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-1", children: [p, u].flat().map((y, C) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(y, "button", NoopComponent), {
                   position: "top",
                   panelId: y.id,
@@ -9742,9 +9758,9 @@ const RootLayout = () => {
                   show: () => w(y.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(y.label) }) })
-              ] }, "button-top-" + S)) }),
+              ] }, "button-top-" + C)) }),
               /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-1" }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((y, S) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: g == null ? void 0 : g.map((y, C) => /* @__PURE__ */ jsxs(Tooltip, { children: [
                 /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: createElement(get(y, "button", NoopComponent), {
                   position: "bottom",
                   panelId: y.id,
@@ -9752,7 +9768,7 @@ const RootLayout = () => {
                   show: () => w(y.id)
                 }) }),
                 /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: /* @__PURE__ */ jsx("p", { children: f(y.label) }) })
-              ] }, "button-bottom-" + S)) })
+              ] }, "button-bottom-" + C)) })
             ] }),
             /* @__PURE__ */ jsx(
               motion.div,
@@ -9793,7 +9809,7 @@ const RootLayout = () => {
                     f("AI Assistant")
                   ] }) }) : c === "theme" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-2", children: [
                     /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx(Paintbrush, { className: "h-4 w-4 rtl:ml-2" }),
+                      /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4 text-gray-600" }),
                       f("Theme Settings")
                     ] }),
                     /* @__PURE__ */ jsx(
@@ -9921,8 +9937,8 @@ const RootLayout = () => {
     });
   }, m = (x) => {
     if (!c) return;
-    const k = x.clientX - p.x, b = x.clientY - p.y, A = x.currentTarget, B = A.offsetWidth, _ = A.offsetHeight, N = window.innerWidth - B, w = window.innerHeight - _, y = Math.max(0, Math.min(k, N)), S = Math.max(0, Math.min(b, w));
-    n(y, S);
+    const k = x.clientX - p.x, b = x.clientY - p.y, A = x.currentTarget, B = A.offsetWidth, _ = A.offsetHeight, N = window.innerWidth - B, w = window.innerHeight - _, y = Math.max(0, Math.min(k, N)), C = Math.max(0, Math.min(b, w));
+    n(y, C);
   }, f = () => {
     d(!1);
   };
@@ -10102,72 +10118,72 @@ const RootLayout = () => {
   var x;
   return (x = m.onMount) == null ? void 0 : x.call(m, f);
 }, ...h) => {
-  const m = h[0] || ((S) => {
-    let E = o.get(S);
-    return E || (E = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(S, E), u == null || u(S, y)), E;
+  const m = h[0] || ((C) => {
+    let E = o.get(C);
+    return E || (E = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, o.set(C, E), u == null || u(C, y)), E;
   }), f = h[1] || (() => {
-    let S, E;
-    const v = (C) => {
+    let C, E;
+    const v = (S) => {
       try {
-        C();
+        S();
       } catch (j) {
-        S || (S = !0, E = j);
+        C || (C = !0, E = j);
       }
     };
     do {
       c.f && v(c.f);
-      const C = /* @__PURE__ */ new Set(), j = C.add.bind(C);
-      a.forEach((I) => {
+      const S = /* @__PURE__ */ new Set(), j = S.add.bind(S);
+      a.forEach((T) => {
         var L;
-        return (L = r.get(I)) == null ? void 0 : L.l.forEach(j);
-      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), C.forEach(v), a.size && x();
+        return (L = r.get(T)) == null ? void 0 : L.l.forEach(j);
+      }), a.clear(), i.forEach(j), i.clear(), l.forEach(j), l.clear(), S.forEach(v), a.size && x();
     } while (a.size || i.size || l.size);
-    if (S)
+    if (C)
       throw E;
   }), x = h[2] || (() => {
-    const S = [], E = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), C = Array.from(a);
-    for (; C.length; ) {
-      const j = C[C.length - 1], I = m(j);
+    const C = [], E = /* @__PURE__ */ new WeakSet(), v = /* @__PURE__ */ new WeakSet(), S = Array.from(a);
+    for (; S.length; ) {
+      const j = S[S.length - 1], T = m(j);
       if (v.has(j)) {
-        C.pop();
+        S.pop();
         continue;
       }
       if (E.has(j)) {
-        n.get(j) === I.n && S.push([j, I]), v.add(j), C.pop();
+        n.get(j) === T.n && C.push([j, T]), v.add(j), S.pop();
         continue;
       }
       E.add(j);
-      for (const L of getMountedOrPendingDependents(j, I, r))
-        E.has(L) || C.push(L);
+      for (const L of getMountedOrPendingDependents(j, T, r))
+        E.has(L) || S.push(L);
     }
-    for (let j = S.length - 1; j >= 0; --j) {
-      const [I, L] = S[j];
+    for (let j = C.length - 1; j >= 0; --j) {
+      const [T, L] = C[j];
       let R = !1;
-      for (const T of L.d.keys())
-        if (T !== I && a.has(T)) {
+      for (const I of L.d.keys())
+        if (I !== T && a.has(I)) {
           R = !0;
           break;
         }
-      R && (k(I), B(I)), n.delete(I);
+      R && (k(T), B(T)), n.delete(T);
     }
-  }), k = h[3] || ((S) => {
+  }), k = h[3] || ((C) => {
     var E, v;
-    const C = m(S);
-    if (isAtomStateInitialized(C) && (r.has(S) && n.get(S) !== C.n || Array.from(C.d).every(
+    const S = m(C);
+    if (isAtomStateInitialized(S) && (r.has(C) && n.get(C) !== S.n || Array.from(S.d).every(
       ([P, $]) => (
         // Recursively, read the atom state of the dependency, and
         // check if the atom epoch number is unchanged
         k(P).n === $
       )
     )))
-      return C;
-    C.d.clear();
+      return S;
+    S.d.clear();
     let j = !0;
-    const I = () => {
-      r.has(S) && (B(S), x(), f());
+    const T = () => {
+      r.has(C) && (B(C), x(), f());
     }, L = (P) => {
       var $;
-      if (isSelfAtom(S, P)) {
+      if (isSelfAtom(C, P)) {
         const H = m(P);
         if (!isAtomStateInitialized(H))
           if (hasInitialValue(P))
@@ -10180,140 +10196,140 @@ const RootLayout = () => {
       try {
         return returnAtomValue(M);
       } finally {
-        C.d.set(P, M.n), isPendingPromise(C.v) && addPendingPromiseToDependency(S, C.v, M), ($ = r.get(P)) == null || $.t.add(S), j || I();
+        S.d.set(P, M.n), isPendingPromise(S.v) && addPendingPromiseToDependency(C, S.v, M), ($ = r.get(P)) == null || $.t.add(C), j || T();
       }
     };
-    let R, T;
+    let R, I;
     const D = {
       get signal() {
         return R || (R = new AbortController()), R.signal;
       },
       get setSelf() {
-        return !T && isActuallyWritableAtom(S) && (T = (...P) => {
+        return !I && isActuallyWritableAtom(C) && (I = (...P) => {
           if (!j)
             try {
-              return A(S, ...P);
+              return A(C, ...P);
             } finally {
               x(), f();
             }
-        }), T;
+        }), I;
       }
-    }, O = C.n;
+    }, O = S.n;
     try {
-      const P = d(S, L, D);
-      return setAtomStateValueOrPromise(S, P, m), isPromiseLike$1(P) && ((E = P.onCancel) == null || E.call(P, () => R == null ? void 0 : R.abort()), P.then(
-        I,
-        I
-      )), C;
+      const P = d(C, L, D);
+      return setAtomStateValueOrPromise(C, P, m), isPromiseLike$1(P) && ((E = P.onCancel) == null || E.call(P, () => R == null ? void 0 : R.abort()), P.then(
+        T,
+        T
+      )), S;
     } catch (P) {
-      return delete C.v, C.e = P, ++C.n, C;
+      return delete S.v, S.e = P, ++S.n, S;
     } finally {
-      j = !1, O !== C.n && n.get(S) === O && (n.set(S, C.n), a.add(S), (v = c.c) == null || v.call(c, S));
+      j = !1, O !== S.n && n.get(C) === O && (n.set(C, S.n), a.add(C), (v = c.c) == null || v.call(c, C));
     }
-  }), b = h[4] || ((S) => {
-    const E = [S];
+  }), b = h[4] || ((C) => {
+    const E = [C];
     for (; E.length; ) {
-      const v = E.pop(), C = m(v);
-      for (const j of getMountedOrPendingDependents(v, C, r)) {
-        const I = m(j);
-        n.set(j, I.n), E.push(j);
+      const v = E.pop(), S = m(v);
+      for (const j of getMountedOrPendingDependents(v, S, r)) {
+        const T = m(j);
+        n.set(j, T.n), E.push(j);
       }
     }
-  }), A = h[5] || ((S, ...E) => {
+  }), A = h[5] || ((C, ...E) => {
     let v = !0;
-    const C = (I) => returnAtomValue(k(I)), j = (I, ...L) => {
+    const S = (T) => returnAtomValue(k(T)), j = (T, ...L) => {
       var R;
-      const T = m(I);
+      const I = m(T);
       try {
-        if (isSelfAtom(S, I)) {
-          if (!hasInitialValue(I))
+        if (isSelfAtom(C, T)) {
+          if (!hasInitialValue(T))
             throw new Error("atom not writable");
-          const D = T.n, O = L[0];
-          setAtomStateValueOrPromise(I, O, m), B(I), D !== T.n && (a.add(I), (R = c.c) == null || R.call(c, I), b(I));
+          const D = I.n, O = L[0];
+          setAtomStateValueOrPromise(T, O, m), B(T), D !== I.n && (a.add(T), (R = c.c) == null || R.call(c, T), b(T));
           return;
         } else
-          return A(I, ...L);
+          return A(T, ...L);
       } finally {
         v || (x(), f());
       }
     };
     try {
-      return p(S, C, j, ...E);
+      return p(C, S, j, ...E);
     } finally {
       v = !1;
     }
-  }), B = h[6] || ((S) => {
+  }), B = h[6] || ((C) => {
     var E;
-    const v = m(S), C = r.get(S);
-    if (C && !isPendingPromise(v.v)) {
-      for (const [j, I] of v.d)
-        if (!C.d.has(j)) {
+    const v = m(C), S = r.get(C);
+    if (S && !isPendingPromise(v.v)) {
+      for (const [j, T] of v.d)
+        if (!S.d.has(j)) {
           const L = m(j);
-          _(j).t.add(S), C.d.add(j), I !== L.n && (a.add(j), (E = c.c) == null || E.call(c, j), b(j));
+          _(j).t.add(C), S.d.add(j), T !== L.n && (a.add(j), (E = c.c) == null || E.call(c, j), b(j));
         }
-      for (const j of C.d || [])
+      for (const j of S.d || [])
         if (!v.d.has(j)) {
-          C.d.delete(j);
-          const I = N(j);
-          I == null || I.t.delete(S);
+          S.d.delete(j);
+          const T = N(j);
+          T == null || T.t.delete(C);
         }
     }
-  }), _ = h[7] || ((S) => {
+  }), _ = h[7] || ((C) => {
     var E;
-    const v = m(S);
-    let C = r.get(S);
-    if (!C) {
-      k(S);
+    const v = m(C);
+    let S = r.get(C);
+    if (!S) {
+      k(C);
       for (const j of v.d.keys())
-        _(j).t.add(S);
-      if (C = {
+        _(j).t.add(C);
+      if (S = {
         l: /* @__PURE__ */ new Set(),
         d: new Set(v.d.keys()),
         t: /* @__PURE__ */ new Set()
-      }, r.set(S, C), (E = c.m) == null || E.call(c, S), isActuallyWritableAtom(S)) {
+      }, r.set(C, S), (E = c.m) == null || E.call(c, C), isActuallyWritableAtom(C)) {
         const j = () => {
-          let I = !0;
+          let T = !0;
           const L = (...R) => {
             try {
-              return A(S, ...R);
+              return A(C, ...R);
             } finally {
-              I || (x(), f());
+              T || (x(), f());
             }
           };
           try {
-            const R = g(S, L);
-            R && (C.u = () => {
-              I = !0;
+            const R = g(C, L);
+            R && (S.u = () => {
+              T = !0;
               try {
                 R();
               } finally {
-                I = !1;
+                T = !1;
               }
             });
           } finally {
-            I = !1;
+            T = !1;
           }
         };
         l.add(j);
       }
     }
-    return C;
-  }), N = h[8] || ((S) => {
+    return S;
+  }), N = h[8] || ((C) => {
     var E;
-    const v = m(S);
-    let C = r.get(S);
-    if (C && !C.l.size && !Array.from(C.t).some((j) => {
-      var I;
-      return (I = r.get(j)) == null ? void 0 : I.d.has(S);
+    const v = m(C);
+    let S = r.get(C);
+    if (S && !S.l.size && !Array.from(S.t).some((j) => {
+      var T;
+      return (T = r.get(j)) == null ? void 0 : T.d.has(C);
     })) {
-      C.u && i.add(C.u), C = void 0, r.delete(S), (E = c.u) == null || E.call(c, S);
+      S.u && i.add(S.u), S = void 0, r.delete(C), (E = c.u) == null || E.call(c, C);
       for (const j of v.d.keys()) {
-        const I = N(j);
-        I == null || I.t.delete(S);
+        const T = N(j);
+        T == null || T.t.delete(C);
       }
       return;
     }
-    return C;
+    return S;
   }), w = [
     // store state
     o,
@@ -10339,18 +10355,18 @@ const RootLayout = () => {
     _,
     N
   ], y = {
-    get: (S) => returnAtomValue(k(S)),
-    set: (S, ...E) => {
+    get: (C) => returnAtomValue(k(C)),
+    set: (C, ...E) => {
       try {
-        return A(S, ...E);
+        return A(C, ...E);
       } finally {
         x(), f();
       }
     },
-    sub: (S, E) => {
-      const C = _(S).l;
-      return C.add(E), f(), () => {
-        C.delete(E), N(S), f();
+    sub: (C, E) => {
+      const S = _(C).l;
+      return S.add(E), f(), () => {
+        S.delete(E), N(C), f();
       };
     }
   };