@chaibuilder/sdk 3.1.8 → 3.1.10

package/dist/{index-C7JEjy8N.js → index-BXLWWUUp.js}

@@ -3,7 +3,7 @@ var W = (o, n, r) => n in o ? U(o, n, { enumerable: !0, configurable: !0, writab
 var $ = (o, n, r) => W(o, typeof n != "symbol" ? n + "" : n, r);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRegisteredChaiBlocks, getRegisteredChaiBlock, getDefaultBlockProps, syncBlocksWithDefaults, useRegisteredFonts, getBlockFormSchemas } from "@chaibuilder/runtime";
-import { get, find, filter, flatten, has, map, includes, without, compact, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, kebabCase, round, reverse, findIndex, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy } from "lodash-es";
+import { get, find, filter, flatten, has, map, includes, without, compact, isEmpty, isString, each, omit, values, pick, startsWith, isFunction, isObject as isObject$1, memoize, noop, first, keys, range, flattenDeep, set, forEach, unset, chunk, cloneDeep, isNull, kebabCase, round, reverse, findIndex, uniq, isArray, split, reject, take, debounce, startCase, isNumber, parseInt as parseInt$1, isNaN as isNaN$1, toLower, nth, findLast, intersection, toUpper, capitalize, groupBy, sortBy, camelCase } from "lodash-es";
 import { SquareIcon, ZoomInIcon, ChevronRightIcon, PinTopIcon, PinBottomIcon, PinLeftIcon, PinRightIcon, GearIcon, ArrowUpIcon, PlusIcon, CopyIcon, TrashIcon, CaretDownIcon, Cross1Icon, FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ValueIcon, TextAlignCenterIcon, TextAlignRightIcon, TextAlignLeftIcon, Link2Icon, LinkBreak2Icon, EnterFullScreenIcon, ExclamationTriangleIcon, Pencil2Icon, ChevronLeftIcon, LoopIcon, IdCardIcon, PlusCircledIcon, ChevronDownIcon, InfoCircledIcon, FileIcon, DotsVerticalIcon, TriangleDownIcon, RowSpacingIcon, EyeOpenIcon, EyeClosedIcon, BorderAllIcon, WidthIcon, HeightIcon, ArrowRightIcon, ArrowDownIcon, ArrowLeftIcon, ArrowTopLeftIcon, ArrowTopRightIcon, ArrowBottomRightIcon, ArrowBottomLeftIcon, AlignLeftIcon, AlignCenterHorizontallyIcon, AlignRightIcon, StretchHorizontallyIcon, OverlineIcon, LetterCaseUppercaseIcon, Cross2Icon, BoxIcon, MinusIcon, CrossCircledIcon, MobileIcon, LaptopIcon, DesktopIcon, CircleIcon, MagnifyingGlassIcon, ReloadIcon, CaretRightIcon, FrameIcon, EraserIcon, CheckIcon, DownloadIcon, CardStackPlusIcon, CardStackIcon, ScissorsIcon, DoubleArrowDownIcon, DoubleArrowUpIcon, ResetIcon, UploadIcon, TextIcon, CornerTopRightIcon, MixerHorizontalIcon, SunIcon, MoonIcon, FaceIcon, ShuffleIcon, ChatBubbleIcon, StopIcon, DotsHorizontalIcon, LightningBoltIcon, StackIcon, DragHandleDots2Icon } from "@radix-ui/react-icons";
 import * as React from "react";
 import React__default, { useMemo, useCallback, useEffect, useState, useRef, Component, Children, memo, createElement, createContext, useContext, Suspense, lazy, useReducer, useDebugValue } from "react";
@@ -14,7 +14,7 @@ import { v as Button, ab as DropdownMenu, ap as DropdownMenuTrigger, ad as Dropd
 import clsx$1, { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import TreeModel from "tree-model";
-import { C as COLLECTION_PREFIX, S as STYLES_KEY, i as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, j as ROOT_TEMP_KEY } from "./apply-binding-w7OMcHcu.js";
+import { C as COLLECTION_PREFIX, S as STYLES_KEY, i as getSplitChaiClasses, h as getBlocksFromHTML, m as mergeBlocksWithExisting, e as adjustSpacingInContentBlocks, a as applyBindingToBlockProps, b as applyLanguage, g as getBlockTagAttributes, c as getBlockRuntimeProps, d as applyLimit, R as REPEATER_PREFIX, j as ROOT_TEMP_KEY } from "./apply-binding-DXR0sMuX.js";
 import { d as defaultThemeOptions, f as defaultThemeValues, a as getChaiThemeCssVariables, g as getChaiThemeOptions, p as plugin, h as getThemeFontsUrls, i as getThemeCustomFontFace } from "./plugin-BOcGV_IY.js";
 import { isObject } from "@rjsf/utils";
 import { useDebouncedCallback, useThrottledCallback, useResizeObserver, useDebouncedState, useIntervalEffect } from "@react-hookz/web";
@@ -36,7 +36,6 @@ import RjForm from "@rjsf/core";
 import validator from "@rjsf/validator-ajv8";
 import Autosuggest from "react-autosuggest";
 import { useFeature } from "flagged";
-import { compact as compact$1, pick as pick$1, each as each$1, get as get$1, noop as noop$1, kebabCase as kebabCase$1, camelCase } from "lodash";
 import { Tree } from "react-arborist";
 import { parse, stringify } from "himalaya";
 import tailwindAspectRatio from "@tailwindcss/aspect-ratio";
@@ -223,16 +222,16 @@ function insertBlocksAtPosition(o, n, r, a) {
   const l = [...n];
   let i = [...o];
   if (r) {
-    const d = o.find((g) => g._id === r);
-    if (d && d.content !== void 0 && d.content !== "" && !o.some((m) => m._parent === r)) {
+    const u = o.find((g) => g._id === r);
+    if (u && u.content !== void 0 && u.content !== "" && !o.some((m) => m._parent === r)) {
       const h = {
         _id: generateUUID(),
         _parent: r,
         _type: "Text",
-        content: d.content
+        content: u.content
       };
-      Object.keys(d).forEach((f) => {
-        f.startsWith("content-") && (h[f] = d[f]);
+      Object.keys(u).forEach((f) => {
+        f.startsWith("content-") && (h[f] = u[f]);
       }), l.unshift(h), i = i.map((f) => {
         if (f._id === r) {
           const x = { ...f, content: "" };
@@ -244,14 +243,14 @@ function insertBlocksAtPosition(o, n, r, a) {
       });
     }
   }
-  let c = i.filter((d) => !d._parent);
-  r && (c = i.filter((d) => d._parent === r));
-  const u = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
+  let c = i.filter((u) => !u._parent);
+  r && (c = i.filter((u) => u._parent === r));
+  const d = !isNaN(a) || a > -1 ? Math.min(a, c.length) : c.length;
   let p = i.length;
-  for (let d = 0, g = 0; d < i.length; d++)
-    if (r !== void 0 ? i[d]._parent === r : !i[d]._parent) {
-      if (g === u) {
-        p = d;
+  for (let u = 0, g = 0; u < i.length; u++)
+    if (r !== void 0 ? i[u]._parent === r : !i[u]._parent) {
+      if (g === d) {
+        p = u;
         break;
       }
       g++;
@@ -269,11 +268,11 @@ function findNodeById(o, n) {
   return o.first((r) => r.model._id === n) || null;
 }
 function moveNode(o, n, r, a) {
-  var d, g;
+  var u, g;
   const l = findNodeById(o, n), i = findNodeById(o, r);
   if (!l || !i) return !1;
   i.children || (i.model.children = []);
-  let c = (d = i == null ? void 0 : i.children) == null ? void 0 : d.findIndex((m) => m.model._id === n);
+  let c = (u = i == null ? void 0 : i.children) == null ? void 0 : u.findIndex((m) => m.model._id === n);
   l.drop(), c = Math.max(c, 0);
   const p = (((g = l == null ? void 0 : l.model) == null ? void 0 : g._parent) || "root") === r && c <= a ? a - 1 : a;
   try {
@@ -291,15 +290,15 @@ function handleOldParentTextBlock(o, n) {
   if (l.length === 2) {
     const i = l.find((c) => c._id !== n._id);
     if (i && i._type === "Text" && "content" in a)
-      return o.map((u) => {
-        if (u._id === r) {
-          const p = { ...u, content: i.content };
-          return Object.keys(i).forEach((d) => {
-            d.startsWith("content-") && (p[d] = i[d]);
+      return o.map((d) => {
+        if (d._id === r) {
+          const p = { ...d, content: i.content };
+          return Object.keys(i).forEach((u) => {
+            u.startsWith("content-") && (p[u] = i[u]);
           }), p;
         }
-        return u;
-      }).filter((u) => u._id !== i._id);
+        return d;
+      }).filter((d) => d._id !== i._id);
   }
   return o;
 }
@@ -314,32 +313,32 @@ function handleNewParentTextBlock(o, n, r) {
       _type: "Text",
       content: a.content
     };
-    Object.keys(a).forEach((d) => {
-      d.startsWith("content-") && (c[d] = a[d]);
+    Object.keys(a).forEach((u) => {
+      u.startsWith("content-") && (c[u] = a[u]);
     });
-    const u = o.map((d) => {
-      if (d._id === r) {
-        const g = { ...d, content: "" };
+    const d = o.map((u) => {
+      if (u._id === r) {
+        const g = { ...u, content: "" };
         return Object.keys(g).forEach((m) => {
           m.startsWith("content-") && (g[m] = "");
         }), g;
       }
-      return d;
-    }), p = u.findIndex((d) => d._id === n._id);
-    return p !== -1 ? [...u.slice(0, p), c, ...u.slice(p)] : [c, ...u];
+      return u;
+    }), p = d.findIndex((u) => u._id === n._id);
+    return p !== -1 ? [...d.slice(0, p), c, ...d.slice(p)] : [c, ...d];
   }
   return o;
 }
 function moveBlocksWithChildren(o, n, r, a) {
   if (!n) return o;
-  const l = o.find((d) => d._id === n);
+  const l = o.find((u) => u._id === n);
   if (!l) return o;
   let i = handleOldParentTextBlock(o, l);
   const c = r || "root", p = new TreeModel().parse({ _id: "root", children: getBlocksTree(i) });
   if (moveNode(p, n, c, a)) {
-    let d = flattenTree(p);
-    const g = d.find((m) => m._id === n);
-    return g && (g._parent = c === "root" ? null : c), d.shift(), r && (d = handleNewParentTextBlock(d, l, r)), d;
+    let u = flattenTree(p);
+    const g = u.find((m) => m._id === n);
+    return g && (g._parent = c === "root" ? null : c), u.shift(), r && (u = handleNewParentTextBlock(u, l, r)), u;
   }
   return i;
 }
@@ -361,16 +360,16 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
   }), [o, n]);
 }, removeNestedBlocks = (o, n) => {
   let r = [...o], a = [];
-  n.forEach((u) => {
-    const p = r.find((m) => m._id === u);
+  n.forEach((d) => {
+    const p = r.find((m) => m._id === d);
     if (!p || !p._parent) return;
-    const d = p._parent, g = r.filter((m) => m._parent === d);
+    const u = p._parent, g = r.filter((m) => m._parent === u);
     if (g.length === 2) {
-      const m = g.find((h) => h._id !== u);
+      const m = g.find((h) => h._id !== d);
       if (m && m._type === "Text") {
-        const h = r.find((f) => f._id === d);
+        const h = r.find((f) => f._id === u);
         h && "content" in h && (r = r.map((f) => {
-          if (f._id === d) {
+          if (f._id === u) {
             const x = { ...f, content: m.content };
             return Object.keys(m).forEach((b) => {
               b.startsWith("content-") && (x[b] = m[b]);
@@ -381,15 +380,15 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
       }
     }
   });
-  const l = [...n, ...a], i = [], c = filter(r, (u) => includes(l, u._id) || includes(l, u._parent) ? (i.push(u._id), !1) : !0);
+  const l = [...n, ...a], i = [], c = filter(r, (d) => includes(l, d._id) || includes(l, d._parent) ? (i.push(d._id), !1) : !0);
   return isEmpty(i) ? c : removeNestedBlocks(c, i);
 }, useRemoveBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useSelectedBlockIds(), { setNewBlocks: a } = useBlocksStoreUndoableActions(), { hasPermission: l } = usePermissions();
   return useCallback(
     (i) => {
-      var u;
+      var d;
       if (!l(PERMISSIONS.DELETE_BLOCK)) return;
-      const c = ((u = find(o, { _id: i[0] })) == null ? void 0 : u._parent) || null;
+      const c = ((d = find(o, { _id: i[0] })) == null ? void 0 : d._parent) || null;
       a(removeNestedBlocks(o, i)), setTimeout(() => r(c ? [c] : []), 200);
     },
     [o, r, n, l]
@@ -424,8 +423,8 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
     },
     addBlocks: (a, l, i) => {
       o((c) => {
-        const u = insertBlocksAtPosition(c, a, l, i);
-        return n({ type: "blocks-updated", blocks: u }), u;
+        const d = insertBlocksAtPosition(c, a, l, i);
+        return n({ type: "blocks-updated", blocks: d }), d;
       });
     },
     removeBlocks: (a) => {
@@ -436,13 +435,13 @@ const broadcastChannel = new BroadcastChannel("chaibuilder"), useBroadcastChanne
     },
     moveBlocks: (a, l, i) => {
       o((c) => {
-        let u = [...c];
+        let d = [...c];
         for (let p = 0; p < a.length; p++)
-          u = moveBlocksWithChildren(u, a[p], l, i);
+          d = moveBlocksWithChildren(d, a[p], l, i);
         return each(a, (p) => {
-          const d = find(u, (g) => g._id === p);
-          d && r({ id: p, props: { _parent: d._parent || null } });
-        }), n({ type: "blocks-updated", blocks: u }), u;
+          const u = find(d, (g) => g._id === p);
+          u && r({ id: p, props: { _parent: u._parent || null } });
+        }), n({ type: "blocks-updated", blocks: d }), d;
       });
     },
     updateBlocksProps: (a) => {
@@ -459,7 +458,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
     status: "idle",
     props: {},
     error: void 0
-  }), c = useUpdateBlocksPropsRealtime(), u = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), d = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), m = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
+  }), c = useUpdateBlocksPropsRealtime(), d = useBuilderProp("getBlockAsyncProps", async (f) => ({})), p = useSetAtom$1(blockRepeaterDataAtom), u = JSON.stringify([o == null ? void 0 : o._id, ...values(pick(o, r ?? []))]), g = (o == null ? void 0 : o._type) === "Repeater" && startsWith(o.repeaterItems, `{{${COLLECTION_PREFIX}`), m = (o == null ? void 0 : o._type) !== "Repeater" && n === "live";
   return useEffect(() => {
     if (n === "mock") {
       if (isFunction(a)) {
@@ -471,7 +470,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
       }
       return;
     }
-    n === "live" && (!g && !m || (i((f) => ({ ...f, status: "loading", props: {} })), u({ block: o }).then((f = {}) => {
+    n === "live" && (!g && !m || (i((f) => ({ ...f, status: "loading", props: {} })), d({ block: o }).then((f = {}) => {
       g ? (p((x) => ({
         ...x,
         [o._id]: {
@@ -486,7 +485,7 @@ const useBlockRepeaterDataAtom = () => useAtom$1(blockRepeaterDataAtom), useAsyn
         [o._id]: { status: "error", error: f, props: [] }
       })), i((x) => ({ ...x, status: "error", error: f, props: {} }))) : i((x) => ({ ...x, status: "error", error: f, props: {} }));
     })));
-  }, [o == null ? void 0 : o._id, d, g, m, a, n]), {
+  }, [o == null ? void 0 : o._id, u, g, m, a, n]), {
     $loading: get(l, "status") === "loading",
     ...o ? get(l, "props", {}) : {}
   };
@@ -640,13 +639,13 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
   }
 }) : !1, useSavePage = () => {
   const [o, n] = useAtom$1(builderSaveStateAtom), r = useBuilderProp("onSave", async (f) => {
-  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: u, fallbackLang: p } = useLanguages(), [d] = useIsPageLoaded(), g = () => {
+  }), a = useBuilderProp("onSaveStateChange", noop), l = useGetPageData(), [i] = useTheme(), { hasPermission: c } = usePermissions(), { selectedLang: d, fallbackLang: p } = useLanguages(), [u] = useIsPageLoaded(), g = () => {
     const f = l();
-    return !u || u === p ? !1 : checkMissingTranslations(f.blocks || [], u);
+    return !d || d === p ? !1 : checkMissingTranslations(f.blocks || [], d);
   };
   return { savePage: useThrottledCallback(
     async (f = !1) => {
-      if (!c("save_page") || !d)
+      if (!c("save_page") || !u)
         return;
       n("SAVING"), a("SAVING");
       const x = l();
@@ -659,11 +658,11 @@ const checkMissingTranslations = (o, n) => n ? o.some((r) => {
         n("SAVED"), a("SAVED");
       }, 100), !0;
     },
-    [l, n, i, r, a, d],
+    [l, n, i, r, a, u],
     3e3
     // save only every 5 seconds
   ), savePageAsync: async () => {
-    if (!c("save_page") || !d)
+    if (!c("save_page") || !u)
       return;
     n("SAVING"), a("SAVING");
     const f = l();
@@ -683,23 +682,23 @@ const undoRedoStateAtom = atom({
   canRedo: !1
 }), useUndoManager = () => {
   const [, o] = useAtom$1(builderSaveStateAtom), [n, r] = useAtom$1(undoRedoStateAtom), a = useBuilderProp("onSaveStateChange", noop), l = useCallback(() => {
-    const d = {
+    const u = {
       canUndo: undoManager.hasUndo(),
       canRedo: undoManager.hasRedo()
     };
-    r(d), o("UNSAVED"), a("UNSAVED");
+    r(u), o("UNSAVED"), a("UNSAVED");
   }, [r, o, a]);
   useEffect(() => (undoManager.setCallback(l), () => {
     undoManager.setCallback(noop);
   }), [l]);
   const i = useCallback(
-    (d) => {
-      undoManager.add(d), l();
+    (u) => {
+      undoManager.add(u), l();
     },
     [l]
   ), c = useCallback(() => {
     undoManager.undo(), l();
-  }, [l]), u = useCallback(() => {
+  }, [l]), d = useCallback(() => {
     undoManager.redo(), l();
   }, [l]), p = useCallback(() => {
     undoManager.clear(), r({
@@ -711,12 +710,12 @@ const undoRedoStateAtom = atom({
     () => ({
       add: i,
       undo: c,
-      redo: u,
+      redo: d,
       hasUndo: () => n.canUndo,
       hasRedo: () => n.canRedo,
       clear: p
     }),
-    [i, c, u, n.canUndo, n.canRedo, p]
+    [i, c, d, n.canUndo, n.canRedo, p]
   );
 }, useBlocksStore = () => useAtom$1(presentBlocksAtom), useBlocksStoreUndoableActions = () => {
   const { add: o } = useUndoManager(), [n] = useBlocksStore(), {
@@ -728,13 +727,13 @@ const undoRedoStateAtom = atom({
   } = useBlocksStoreManager();
   return {
     moveBlocks: (x, b, y) => {
-      const C = map(x, (w) => {
-        const B = n.find((A) => A._id === w)._parent || null, k = n.filter((A) => B ? A._parent === B : !A._parent).map((A) => A._id).indexOf(w);
-        return { _id: w, oldParent: B, oldPosition: k };
-      }), S = C.find(({ _id: w }) => w === x[0]);
-      S && S.oldParent === b && S.oldPosition === y || (i(x, b, y), o({
-        undo: () => each(C, ({ _id: w, oldParent: _, oldPosition: B }) => {
-          i([w], _, B);
+      const S = map(x, (v) => {
+        const B = n.find((A) => A._id === v)._parent || null, k = n.filter((A) => B ? A._parent === B : !A._parent).map((A) => A._id).indexOf(v);
+        return { _id: v, oldParent: B, oldPosition: k };
+      }), C = S.find(({ _id: v }) => v === x[0]);
+      C && C.oldParent === b && C.oldPosition === y || (i(x, b, y), o({
+        undo: () => each(S, ({ _id: v, oldParent: _, oldPosition: B }) => {
+          i([v], _, B);
         }),
         redo: () => i(x, b, y)
       }));
@@ -746,27 +745,27 @@ const undoRedoStateAtom = atom({
       });
     },
     removeBlocks: (x) => {
-      var S;
-      const b = (S = first(x)) == null ? void 0 : S._parent, C = n.filter((w) => b ? w._parent === b : !w._parent).indexOf(first(x));
+      var C;
+      const b = (C = first(x)) == null ? void 0 : C._parent, S = n.filter((v) => b ? v._parent === b : !v._parent).indexOf(first(x));
       l(map(x, "_id")), o({
-        undo: () => a(x, b, C),
+        undo: () => a(x, b, S),
         redo: () => l(map(x, "_id"))
       });
     },
     updateBlocks: (x, b, y) => {
-      let C = [];
+      let S = [];
       if (y)
-        C = map(x, (S) => ({ _id: S, ...y }));
+        S = map(x, (C) => ({ _id: C, ...y }));
       else {
-        const S = keys(b);
-        C = map(x, (w) => {
-          const _ = n.find((I) => I._id === w), B = { _id: w };
-          return each(S, (I) => B[I] = _[I]), B;
+        const C = keys(b);
+        S = map(x, (v) => {
+          const _ = n.find((I) => I._id === v), B = { _id: v };
+          return each(C, (I) => B[I] = _[I]), B;
         });
       }
-      c(map(x, (S) => ({ _id: S, ...b }))), o({
-        undo: () => c(C),
-        redo: () => c(map(x, (S) => ({ _id: S, ...b })))
+      c(map(x, (C) => ({ _id: C, ...b }))), o({
+        undo: () => c(S),
+        redo: () => c(map(x, (C) => ({ _id: C, ...b })))
       });
     },
     updateBlocksRuntime: (x, b) => {
@@ -781,8 +780,8 @@ const undoRedoStateAtom = atom({
     updateMultipleBlocksProps: (x) => {
       let b = [];
       b = map(x, (y) => {
-        const C = keys(y), S = n.find((_) => _._id === y._id), w = {};
-        return each(C, (_) => w[_] = S[_]), w;
+        const S = keys(y), C = n.find((_) => _._id === y._id), v = {};
+        return each(S, (_) => v[_] = C[_]), v;
       }), c(x), o({
         undo: () => c(b),
         redo: () => c(x)
@@ -820,7 +819,7 @@ import.meta.vitest && describe("canDropBlock Function", () => {
 });
 const useAddBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { addBlocks: r } = useBlocksStoreUndoableActions(), a = useCallback(
-    (i, c, u) => {
+    (i, c, d) => {
       var h;
       for (let f = 0; f < i.length; f++) {
         const { _id: x } = i[f];
@@ -830,26 +829,26 @@ const useAddBlock = () => {
           b[y]._parent = i[f]._id;
       }
       const p = first(i);
-      let d, g;
-      return c && (d = find(o, { _id: c }), i[0]._parent = c, g = c), !(d ? canAcceptChildBlock(d == null ? void 0 : d._type, p._type) : !0) && d && (i[0]._parent = d._parent, g = d._parent), r(i, g, u), n([(h = first(i)) == null ? void 0 : h._id]), first(i);
+      let u, g;
+      return c && (u = find(o, { _id: c }), i[0]._parent = c, g = c), !(u ? canAcceptChildBlock(u == null ? void 0 : u._type, p._type) : !0) && u && (i[0]._parent = u._parent, g = u._parent), r(i, g, d), n([(h = first(i)) == null ? void 0 : h._id]), first(i);
     },
     [r, o, n]
   );
   return { addCoreBlock: useCallback(
-    (i, c, u) => {
+    (i, c, d) => {
       if (has(i, "blocks")) {
         const b = i.blocks;
-        return a(b, c, u);
+        return a(b, c, d);
       }
-      const p = generateUUID(), d = getDefaultBlockProps(i.type), g = {
+      const p = generateUUID(), u = getDefaultBlockProps(i.type), g = {
         _type: i.type,
         _id: p,
-        ...d,
+        ...u,
         ...has(i, "_name") && { _name: i._name },
         ...has(i, "partialBlockId") && { partialBlockId: i.partialBlockId }
       };
       let m, h;
-      return c && (m = find(o, { _id: c }), g._parent = c, h = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, h = m._parent), r([g], h, u), n([g._id]), g;
+      return c && (m = find(o, { _id: c }), g._parent = c, h = c), !canAcceptChildBlock(m == null ? void 0 : m._type, g._type) && m && (g._parent = m._parent, h = m._parent), r([g], h, d), n([g._id]), g;
     },
     [r, a, o, n]
   ), addPredefinedBlock: a };
@@ -1959,11 +1958,11 @@ function removeDuplicateClasses(o) {
   if (r.length === 1) return r[0].fullCls;
   for (const l of r) {
     const i = l.property, c = n.indexOf(l.mq);
-    for (let u = c + 1; u < n.length; u++) {
-      const p = n[u], d = r.find((g) => g.property === i && g.mq === p);
-      if (d && d.cls === l.cls)
-        a = a.replace(d.fullCls, "");
-      else if (d && d.cls !== l.cls)
+    for (let d = c + 1; d < n.length; d++) {
+      const p = n[d], u = r.find((g) => g.property === i && g.mq === p);
+      if (u && u.cls === l.cls)
+        a = a.replace(u.fullCls, "");
+      else if (u && u.cls !== l.cls)
         break;
     }
   }
@@ -1983,12 +1982,12 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
     )
   ), i = first(o(selectedStylingBlocksAtom));
   return map(l, (c) => {
-    const u = o(c), p = get(u, i.prop, `${STYLES_KEY},`), { classes: d } = getSplitChaiClasses(p);
+    const d = o(c), p = get(d, i.prop, `${STYLES_KEY},`), { classes: u } = getSplitChaiClasses(p);
     return {
-      ids: [u._id],
+      ids: [d._id],
       props: {
         [i.prop]: `${STYLES_KEY},${orderClassesByBreakpoint(
-          removeDuplicateClasses(twMerge(d, a))
+          removeDuplicateClasses(twMerge(u, a))
         )}`
       }
     };
@@ -2229,11 +2228,11 @@ const useSelectedStylingBlocks = () => useAtom$1(selectedStylingBlocksAtom), add
       for (const i of l) {
         const c = r[i];
         if (isString(c)) {
-          const u = chunk(c.split(""), 12);
+          const d = chunk(c.split(""), 12);
           let p = "";
           o([n], { [i]: "" });
-          for (let d = 0; d < u.length; d++)
-            p += u[d].join(""), o([n], { [i]: p }), await new Promise((g) => setTimeout(g, a));
+          for (let u = 0; u < d.length; u++)
+            p += d[u].join(""), o([n], { [i]: p }), await new Promise((g) => setTimeout(g, a));
         }
       }
     },
@@ -2271,22 +2270,22 @@ const getBlockWithChildren = (o, n) => {
   return r = flattenDeep([...r, ...getChildBlocks(n, o, r)]), r;
 }, pickOnlyAIProps = (o, n, r) => compact(
   o.map((a) => {
-    const l = ["_id", "_type", "_parent"], i = pick(a, l), c = getRegisteredChaiBlock(a._type), u = {}, p = get(c, "aiProps", []);
-    for (const d in a)
-      if (!l.includes(d) && p.includes(d)) {
-        const g = get(a, `${d}-${n}`, ""), m = get(a, d, "");
-        u[d] = isString(g) && g.trim() || m, r && (u[d] = m);
+    const l = ["_id", "_type", "_parent"], i = pick(a, l), c = getRegisteredChaiBlock(a._type), d = {}, p = get(c, "aiProps", []);
+    for (const u in a)
+      if (!l.includes(u) && p.includes(u)) {
+        const g = get(a, `${u}-${n}`, ""), m = get(a, u, "");
+        d[u] = isString(g) && g.trim() || m, r && (d[u] = m);
       }
-    return isEmpty(u) ? !1 : (has(i, "_parent") && isEmpty(i._parent) && delete i._parent, { ...i, ...u });
+    return isEmpty(d) ? !1 : (has(i, "_parent") && isEmpty(i._parent) && delete i._parent, { ...i, ...d });
   })
 ), addLangToPrompt = (o, n, r) => !n || r !== "content" ? o : `${o}. Generate content in ${get(LANGUAGES, n, n)} language.`, askAiProcessingAtom = atom(!1), useAskAi = () => {
-  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [u] = useBlocksStore(), { selectedLang: p, fallbackLang: d } = useLanguages(), g = p.length ? p : d, m = (h, f) => {
+  const [o, n] = useAtom$1(askAiProcessingAtom), [r, a] = useState(null), l = useBuilderProp("askAiCallBack", null), i = useStreamMultipleBlocksProps(), c = useUpdateMultipleBlocksProps(), [d] = useBlocksStore(), { selectedLang: p, fallbackLang: u } = useLanguages(), g = p.length ? p : u, m = (h, f) => {
     const x = cloneDeep(f.find((b) => b._id === h));
     for (const b in x) {
       const y = x[b];
       if (typeof y == "string" && startsWith(y, STYLES_KEY)) {
-        const { baseClasses: C, classes: S } = getSplitChaiClasses(y);
-        x[b] = compact(flattenDeep([C, S])).join(" ");
+        const { baseClasses: S, classes: C } = getSplitChaiClasses(y);
+        x[b] = compact(flattenDeep([S, C])).join(" ");
       } else
         b !== "_id" && delete x[b];
     }
@@ -2298,7 +2297,7 @@ const getBlockWithChildren = (o, n) => {
         if (l) {
           n(!0), a(null);
           try {
-            const y = p === d ? "" : p, C = x.toLowerCase().includes("translate the content"), S = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, u)), p, C) : [m(f, u)], w = await l(h, addLangToPrompt(x, g, h), S, y), { blocks: _, error: B } = w;
+            const y = p === u ? "" : p, S = x.toLowerCase().includes("translate the content"), C = h === "content" ? pickOnlyAIProps(cloneDeep(getBlockWithChildren(f, d)), p, S) : [m(f, d)], v = await l(h, addLangToPrompt(x, g, h), C, y), { blocks: _, error: B } = v;
             if (B) {
               a(B);
               return;
@@ -2312,7 +2311,7 @@ const getBlockWithChildren = (o, n) => {
               c(I);
             } else
               i(_);
-            b && b(w);
+            b && b(v);
           } catch (y) {
             a(y);
           } finally {
@@ -2324,8 +2323,8 @@ const getBlockWithChildren = (o, n) => {
         l,
         n,
         p,
-        d,
         u,
+        d,
         g,
         c,
         i
@@ -2338,18 +2337,18 @@ const getBlockWithChildren = (o, n) => {
   const [o, n] = useAtom$1(partialBlocksStoreAtom), r = useCallback((l) => get(o, l, []), [o]), a = useCallback(() => n({}), [n]);
   return { getPartailBlocks: r, reset: a };
 }, useWatchPartailBlocks = () => {
-  const [o] = useBlocksStore(), [n, r] = useAtom$1(partialBlocksStoreAtom), [a, l] = useAtom$1(partialBlocksLoadingStateAtom), i = useBuilderProp("getPartialBlockBlocks", async (u) => []), c = useMemo(() => o.filter((u) => u._type === "PartialBlock" || u._type === "GlobalBlock").map((u) => get(u, "partialBlockId", get(u, "globalBlock", ""))), [o]);
+  const [o] = useBlocksStore(), [n, r] = useAtom$1(partialBlocksStoreAtom), [a, l] = useAtom$1(partialBlocksLoadingStateAtom), i = useBuilderProp("getPartialBlockBlocks", async (d) => []), c = useMemo(() => o.filter((d) => d._type === "PartialBlock" || d._type === "GlobalBlock").map((d) => get(d, "partialBlockId", get(d, "globalBlock", ""))), [o]);
   useEffect(() => {
-    forEach(c, (u) => {
-      has(n, u) || get(a, `${u}.loading`, !1) || (l((p) => ({ ...p, [u]: { loading: !0, error: null } })), i(u).then((p) => {
-        r((d) => ({ ...d, [u]: p })), l((d) => ({
-          ...d,
-          [u]: { loading: !1, error: null }
+    forEach(c, (d) => {
+      has(n, d) || get(a, `${d}.loading`, !1) || (l((p) => ({ ...p, [d]: { loading: !0, error: null } })), i(d).then((p) => {
+        r((u) => ({ ...u, [d]: p })), l((u) => ({
+          ...u,
+          [d]: { loading: !1, error: null }
         }));
       }).catch((p) => {
-        l((d) => ({
-          ...d,
-          [u]: { loading: !1, error: p.message }
+        l((u) => ({
+          ...u,
+          [d]: { loading: !1, error: p.message }
         }));
       }));
     });
@@ -2362,7 +2361,7 @@ const getBlockWithChildren = (o, n) => {
     c
   ]);
 }, partialBlocksListAtom = atom({}), usePartialBlocksList = () => {
-  const [o, n] = useState(!1), [r, a] = useState(null), [l, i] = useAtom$1(partialBlocksListAtom), c = useBuilderProp("getPartialBlocks", async () => []), u = useCallback(async () => {
+  const [o, n] = useState(!1), [r, a] = useState(null), [l, i] = useAtom$1(partialBlocksListAtom), c = useBuilderProp("getPartialBlocks", async () => []), d = useCallback(async () => {
     n(!0), a(null);
     try {
       const p = await c();
@@ -2372,12 +2371,12 @@ const getBlockWithChildren = (o, n) => {
     }
   }, [c, i]);
   return useEffect(() => {
-    u();
-  }, []), { data: l, isLoading: o, refetch: u, error: r };
+    d();
+  }, []), { data: l, isLoading: o, refetch: d, error: r };
 }, useBuilderReset = () => {
-  const { clear: o } = useUndoManager(), [, n] = useSelectedBlockIds(), { clearHighlight: r } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartialBlocksStore(), { setSaveState: c } = useSavePage(), [, u] = useBlockRepeaterDataAtom();
+  const { clear: o } = useUndoManager(), [, n] = useSelectedBlockIds(), { clearHighlight: r } = useBlockHighlight(), [, a] = useSelectedStylingBlocks(), [, l] = useAtom$1(aiAssistantActiveAtom), { reset: i } = usePartialBlocksStore(), { setSaveState: c } = useSavePage(), [, d] = useBlockRepeaterDataAtom();
   return () => {
-    u({}), n([]), a([]), r(), o(), l(!1), i(), c("SAVED");
+    d({}), n([]), a([]), r(), o(), l(!1), i(), c("SAVED");
   };
 }, canvasZoomAtom = atomWithStorage("canvasZoom", 100), useCanvasZoom = () => useAtom$1(canvasZoomAtom), codeEditorAtom = atom(null), useCodeEditor = () => useAtom$1(codeEditorAtom), cutBlockIdsAtom = atom([]), useCutBlockIds = () => {
   const [o, n] = useAtom$1(cutBlockIdsAtom), r = useSetAtom$1(copiedBlockIdsAtom), a = useCallback(
@@ -2389,17 +2388,17 @@ const getBlockWithChildren = (o, n) => {
   return [o, a];
 }, copiedBlockIdsAtom = atom([]), useCopyBlocks = () => {
   const [o] = useBlocksStore(), [n, r] = useAtom$1(copiedBlockIdsAtom), a = useSetAtom$1(cutBlockIdsAtom), { getPartailBlocks: l } = usePartialBlocksStore(), i = useBuilderProp("flags.copyPaste", !0), c = useCallback(
-    (p) => p.some((d) => getDuplicatedBlocks(o, d, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
+    (p) => p.some((u) => getDuplicatedBlocks(o, u, null).some((m) => m._type === "PartialBlock" || m._type === "GlobalBlock")),
     [o]
-  ), u = useCallback(
-    async (p, d = !1) => {
+  ), d = useCallback(
+    async (p, u = !1) => {
       try {
         if (isEmpty(p)) return;
         r(p), a([]);
         const g = {
           _chai_copied_blocks: p.flatMap((m) => {
             const h = getDuplicatedBlocks(o, m, null);
-            if (!d)
+            if (!u)
               return h;
             let f = [];
             for (const x of h)
@@ -2427,7 +2426,7 @@ const getBlockWithChildren = (o, n) => {
     },
     [r, a, o]
   );
-  return [n, u, c];
+  return [n, d, c];
 }, useCopyToClipboard = () => {
   const [o, n] = useState(null), r = useBuilderProp("flags.copyPaste", !0), a = useCallback(async (l) => {
     if (!r)
@@ -2450,12 +2449,12 @@ const getBlockWithChildren = (o, n) => {
     (a, l = null) => {
       const i = [];
       each(a, (c) => {
-        const u = o.find((h) => h._id === c);
-        l ? l === "root" && (l = null) : l = u._parent;
+        const d = o.find((h) => h._id === c);
+        l ? l === "root" && (l = null) : l = d._parent;
         const g = filter(
           o,
           (h) => isString(l) ? h._parent === l : !h._parent
-        ).indexOf(u) + 1, m = getDuplicatedBlocks(o, c, l);
+        ).indexOf(d) + 1, m = getDuplicatedBlocks(o, c, l);
         r(m, l, g), i.push(get(m, "0._id", ""));
       }), n(i);
     },
@@ -2471,27 +2470,27 @@ const getBlockWithChildren = (o, n) => {
         c.current = "loading", r((p) => ({ ...p, [o == null ? void 0 : o.id]: { loading: "loading", blocks: [] } }));
         try {
           const p = await a(o);
-          c.current = "idle", r((d) => ({ ...d, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
+          c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: p || [] } }));
         } catch {
-          c.current = "idle", r((d) => ({ ...d, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
+          c.current = "idle", r((u) => ({ ...u, [o == null ? void 0 : o.id]: { loading: "complete", blocks: [] } }));
         }
       }
     })();
   }, [o, l, i, c, r, a]);
-  const u = useCallback(
+  const d = useCallback(
     (p) => {
-      r((d) => ({ ...d, [p]: { loading: "idle", blocks: [] } }));
+      r((u) => ({ ...u, [p]: { loading: "idle", blocks: [] } }));
     },
     [r]
   );
-  return { data: l || [], isLoading: i === "loading", resetLibrary: u };
+  return { data: l || [], isLoading: i === "loading", resetLibrary: d };
 }, useCanPaste = () => {
   const [o] = useBlocksStore();
   return (n, r) => {
     var i;
     const a = ((i = find(o, { _id: r })) == null ? void 0 : i._type) || null, l = first(n.map((c) => {
-      var u;
-      return (u = find(o, { _id: c })) == null ? void 0 : u._type;
+      var d;
+      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
     }));
     return canAcceptChildBlock(a, l);
   };
@@ -2518,9 +2517,9 @@ const getBlockWithChildren = (o, n) => {
         if (o.length > 0)
           return l(o, c);
         try {
-          const u = await navigator.clipboard.readText();
-          if (u) {
-            const p = JSON.parse(u);
+          const d = await navigator.clipboard.readText();
+          if (d) {
+            const p = JSON.parse(d);
             return has(p, "_chai_copied_blocks");
           }
         } catch {
@@ -2532,7 +2531,7 @@ const getBlockWithChildren = (o, n) => {
     ),
     pasteBlocks: useCallback(
       async (c) => {
-        const u = Array.isArray(c) ? c[0] : c;
+        const d = Array.isArray(c) ? c[0] : c;
         if (!(navigator != null && navigator.permissions)) {
           toast.error("Cannot check clipboard permissions.");
           return;
@@ -2554,9 +2553,9 @@ const getBlockWithChildren = (o, n) => {
           async () => {
             const p = await navigator.clipboard.readText();
             if (p) {
-              const d = JSON.parse(p);
-              if (has(d, "_chai_copied_blocks"))
-                a(d._chai_copied_blocks, u === "root" ? null : u);
+              const u = JSON.parse(p);
+              if (has(u, "_chai_copied_blocks"))
+                a(u._chai_copied_blocks, d === "root" ? null : d);
               else
                 throw new Error("Nothing to paste");
             } else
@@ -2583,20 +2582,20 @@ const getBlockWithChildren = (o, n) => {
     )
   );
   return map(i, (c) => {
-    const u = o(c), p = a;
-    let { classes: d, baseClasses: g } = getSplitChaiClasses(get(u, l.prop, `${STYLES_KEY},`));
+    const d = o(c), p = a;
+    let { classes: u, baseClasses: g } = getSplitChaiClasses(get(d, l.prop, `${STYLES_KEY},`));
     return each(p, (m) => {
       const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
-      d = d.replace(f, " ").replace(/\s+/g, " ").trim();
+      u = u.replace(f, " ").replace(/\s+/g, " ").trim();
       const x = first(m.split(":"));
       includes(["2xl", "xl", "lg", "md", "sm"], x) && p.push(m.split(":").pop().trim());
     }), each(p, (m) => {
       const h = m.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), f = new RegExp(`(^|\\s)${h}(?=\\s|$)`, "g");
       g = g.replace(f, " ").replace(/\s+/g, " ").trim();
     }), {
-      ids: [u._id],
+      ids: [d._id],
       props: {
-        [l.prop]: `${STYLES_KEY}${g},${d}`
+        [l.prop]: `${STYLES_KEY}${g},${u}`
       }
     };
   });
@@ -2627,7 +2626,7 @@ const getBlockWithChildren = (o, n) => {
   );
 }, useResetBlockStyles = () => {
   const o = useSelectedBlock(), n = useUpdateBlocksProps(), r = useCallback((c) => getDefaultBlockProps(c) || {}, []), a = useCallback((c) => Object.keys(c).filter(
-    (u) => typeof c[u] == "string" && c[u].startsWith("#styles:")
+    (d) => typeof c[d] == "string" && c[d].startsWith("#styles:")
   ), []), l = useCallback(
     (c) => {
       if (!o) return;
@@ -2640,7 +2639,7 @@ const getBlockWithChildren = (o, n) => {
     if (!o) return;
     const c = a(o);
     if (c.length === 0) return;
-    const u = r(o._type), p = pick(u, c);
+    const d = r(o._type), p = pick(d, c);
     n([o._id], p);
   }, [o, a, r, n]), reset: l };
 }, useStylingBreakpoint = () => useAtom$1(styleBreakpointAtom), canvasWidthAtom = atomWithStorage("canvasWidth", 800), canvasDisplayWidthAtom = atomWithStorage("canvasDisplayWidth", 800), canvasBreakpointAtom = atom((o) => {
@@ -2662,7 +2661,7 @@ const getBlockWithChildren = (o, n) => {
 }), useSelectedBlockAllClasses = () => useAtomValue$1(selectedBlockAllClassesAtom), MQ = { xs: 0, sm: 1, md: 2, lg: 3, xl: 4, "2xl": 5 }, selectedBlockCurrentClassesAtom = atom((o) => {
   const n = o(canvasBreakpointAtom), r = o(styleStateAtom), a = o(darkModeAtom), l = getQueries(n);
   let i = filter(o(selectedBlockAllClassesAtom), { mod: r });
-  return startsWith(r, "_") || (i = filter(i, (c) => l.includes(c.mq))), i = i.sort((c, u) => MQ[c.mq] - MQ[u.mq]), a || (i = filter(i, { dark: !1 })), i;
+  return startsWith(r, "_") || (i = filter(i, (c) => l.includes(c.mq))), i = i.sort((c, d) => MQ[c.mq] - MQ[d.mq]), a || (i = filter(i, { dark: !1 })), i;
 }), getQueries = (o) => {
   let n = [];
   switch (o) {
@@ -2700,11 +2699,11 @@ const getBlockWithChildren = (o, n) => {
   if (!l) return null;
   let i = l._parent;
   for (; i; ) {
-    const u = find(n, { _id: i });
-    if (!u) return null;
-    if ((c = getRegisteredChaiBlock(u._type)) != null && c.wrapper)
-      return u;
-    i = u._parent;
+    const d = find(n, { _id: i });
+    if (!d) return null;
+    if ((c = getRegisteredChaiBlock(d._type)) != null && c.wrapper)
+      return d;
+    i = d._parent;
   }
   return null;
 });
@@ -2737,18 +2736,18 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   var i;
   if (o.type !== "element" || !o.attributes)
     return o;
-  o.tagName === "span" && o.attributes.find((u) => u.key === "role" && u.value === "link") && (o.tagName = "a", o.attributes = o.attributes.filter((u) => u.key !== "role"));
+  o.tagName === "span" && o.attributes.find((d) => d.key === "role" && d.value === "link") && (o.tagName = "a", o.attributes = o.attributes.filter((d) => d.key !== "role"));
   const a = o.attributes.find((c) => c.key === "data-block-type"), l = o.attributes.find((c) => c.key === "data-block-id");
   if (a) {
     const c = a.value;
     if (CORE_BLOCKS$1.includes(c) || (i = r == null ? void 0 : r.EXTRA_CORE_BLOCKS) != null && i.includes(c))
-      o.attributes = o.attributes.filter((u) => u.key !== "data-block-type"), o.children && (o.children = o.children.map((u) => transformNode(u, n, r)));
+      o.attributes = o.attributes.filter((d) => d.key !== "data-block-type"), o.children && (o.children = o.children.map((d) => transformNode(d, n, r)));
     else {
-      const u = `chai-${kebabCase(c)}`;
-      o.tagName = u, l ? o.attributes = [{ key: "id", value: l.value }] : o.attributes = [], o.attributes.push({ key: "chai-type", value: c });
-      const p = getRegisteredChaiBlock(c), d = n.find((g) => g._id === (l == null ? void 0 : l.value));
-      if (d && o.attributes.push(
-        ...Object.entries(d).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, m]) => ({
+      const d = `chai-${kebabCase(c)}`;
+      o.tagName = d, l ? o.attributes = [{ key: "id", value: l.value }] : o.attributes = [], o.attributes.push({ key: "chai-type", value: c });
+      const p = getRegisteredChaiBlock(c), u = n.find((g) => g._id === (l == null ? void 0 : l.value));
+      if (u && o.attributes.push(
+        ...Object.entries(u).filter(([g]) => !["_id", "_type", "_parent", "_index", "_name"].includes(g)).map(([g, m]) => ({
           key: g,
           value: typeof m == "string" ? m : JSON.stringify(m)
         }))
@@ -2785,8 +2784,8 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
       const l = o != null && o._id ? `[data-block-id="${o._id}"]` : "#canvas", i = (m = (g = r.contentDocument) == null ? void 0 : g.querySelector(l)) == null ? void 0 : m[l === "#canvas" ? "innerHTML" : "outerHTML"];
       if (!i) return "";
       const p = parse(i).map(cleanNode).filter((h) => h !== null).map((h) => transformNode(h, n, a));
-      let d = stringify(p);
-      return d = d.replace(/#styles:,/g, "#styles:"), d.replace(/\s+/g, " ").trim();
+      let u = stringify(p);
+      return u = u.replace(/#styles:,/g, "#styles:"), u.replace(/\s+/g, " ").trim();
     },
     [o, r]
   );
@@ -2796,14 +2795,14 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   const l = a.i18nProps;
   if (!l) return r;
   const i = filter(n, { _type: r._type }), c = pick(r, l);
-  return each(c, (u, p) => {
-    const d = find(i, (g) => {
+  return each(c, (d, p) => {
+    const u = find(i, (g) => {
       var f;
-      const m = typeof g[p] == "string" ? (f = g[p]) == null ? void 0 : f.trim().toLowerCase() : JSON.stringify(g[p]), h = typeof u == "string" ? u.trim().toLowerCase() : JSON.stringify(u);
+      const m = typeof g[p] == "string" ? (f = g[p]) == null ? void 0 : f.trim().toLowerCase() : JSON.stringify(g[p]), h = typeof d == "string" ? d.trim().toLowerCase() : JSON.stringify(d);
       return m === h;
     });
-    if (d) {
-      const g = filter(Object.keys(d), (h) => startsWith(h, `${p}-`)), m = pick(d, g);
+    if (u) {
+      const g = filter(Object.keys(u), (h) => startsWith(h, `${p}-`)), m = pick(u, g);
       r = { ...r, ...m };
     }
   }), r;
@@ -2829,15 +2828,15 @@ const useWrapperBlock = () => useAtomValue$1(wrapperBlockAtom), useCanvasIframe
   return useCallback(
     (r = "") => {
       const a = o != null && o._id ? getBlockWithNestedChildren(o._id, n) : n;
-      return a ? compact$1(
+      return a ? compact(
         a.map((l) => {
           const i = getRegisteredChaiBlock(l._type);
           if (!i) return null;
           const c = (i == null ? void 0 : i.i18nProps) ?? [];
           if (c.length === 0) return null;
-          const u = r === "ALL" ? Object.keys(l).filter((d) => c.find((g) => d.startsWith(g))) : c.map((d) => r ? `${d}-${r}` : d), p = pick$1(l, ["_id"]);
-          return each$1(u, (d) => {
-            p[d] = get$1(l, d, get$1(l, d.replace(`-${r}`, "")));
+          const d = r === "ALL" ? Object.keys(l).filter((u) => c.find((g) => u.startsWith(g))) : c.map((u) => r ? `${u}-${r}` : u), p = pick(l, ["_id"]);
+          return each(d, (u) => {
+            p[u] = get(l, u, get(l, u.replace(`-${r}`, "")));
           }), p;
         })
       ) : [];
@@ -2885,11 +2884,11 @@ const getAllDescendantIds = (o, n) => {
 }, replaceBlock = (o, n, r) => {
   const a = find(o, { _id: n });
   if (!a) return o;
-  const l = o.findIndex((m) => m._id === n), i = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...i]), u = o.filter((m) => !c.has(m._id)), p = new Set(r.map((m) => m._id)), d = r.map((m) => !m._parent || !p.has(m._parent) ? { ...m, _parent: a._parent } : m);
+  const l = o.findIndex((m) => m._id === n), i = getAllDescendantIds(o, n), c = /* @__PURE__ */ new Set([n, ...i]), d = o.filter((m) => !c.has(m._id)), p = new Set(r.map((m) => m._id)), u = r.map((m) => !m._parent || !p.has(m._parent) ? { ...m, _parent: a._parent } : m);
   return [
-    ...u.slice(0, l),
-    ...d,
-    ...u.slice(l)
+    ...d.slice(0, l),
+    ...u,
+    ...d.slice(l)
   ];
 }, useReplaceBlock = () => {
   const [o] = useBlocksStore(), [, n] = useSelectedBlockIds(), { setNewBlocks: r } = useBlocksStoreUndoableActions(), { hasPermission: a } = usePermissions();
@@ -2979,12 +2978,12 @@ const useSidebarActivePanel = () => useAtom$1(sidebarActivePanelAtom), ScalePerc
   // Export Code
   OPEN_EXPORT_CODE: "OPEN_EXPORT_CODE"
 }, AddBlockDropdown = ({ block: o, children: n }) => {
-  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), u = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), p = canAddChildBlock(get(o, "_type", "")), d = findIndex(u, { _id: i }), g = (m) => {
+  const { t: r } = useTranslation(), [a] = useBlocksStore(), { hasPermission: l } = usePermissions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(a, (m) => c ? get(m, "_parent") === c : !get(m, "_parent")), p = canAddChildBlock(get(o, "_type", "")), u = findIndex(d, { _id: i }), g = (m) => {
     if (m === "CHILD")
       pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, o);
     else {
-      const h = { _id: c || "", position: u == null ? void 0 : u.length };
-      m === "BEFORE" ? h.position = Math.max(d, 0) : m === "AFTER" && (h.position = d + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
+      const h = { _id: c || "", position: d == null ? void 0 : d.length };
+      m === "BEFORE" ? h.position = Math.max(u, 0) : m === "AFTER" && (h.position = u + 1), pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, h);
     }
   };
   return l(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -3003,9 +3002,9 @@ function getOrientation(o, n = null) {
     const c = r.flexDirection;
     return c === "column" || c === "column-reverse" ? "vertical" : "horizontal";
   } else if (l === "grid") {
-    const c = r.gridAutoFlow, u = r.gridTemplateColumns;
-    return c.includes("column") || u && u !== "none" && u !== "" && !u.includes("calc") && // Handle calc expressions
-    u.split(" ").length <= 1 ? "vertical" : "horizontal";
+    const c = r.gridAutoFlow, d = r.gridTemplateColumns;
+    return c.includes("column") || d && d !== "none" && d !== "" && !d.includes("calc") && // Handle calc expressions
+    d.split(" ").length <= 1 ? "vertical" : "horizontal";
   } else if (i === "inline-block" || i === "inline")
     return "horizontal";
   return "vertical";
@@ -3031,11 +3030,11 @@ const FrameContext = React__default.createContext({ document: doc, window: win }
     return "VERTICAL";
   }
 }, isDisabledControl = (o, n, r) => !!(o && (r === "UP" || r === "LEFT") || n && (r === "DOWN" || r === "RIGHT")), useBlockController = (o, n) => {
-  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), u = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (u == null ? void 0 : u.length) <= 1, d = findIndex(u, { _id: i }), g = d <= 0, m = d + 1 === (u == null ? void 0 : u.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
+  const [r] = useBlocksStore(), { document: a } = useFrame(), { moveBlocks: l } = useBlocksStoreUndoableActions(), i = get(o, "_id"), c = get(o, "_parent"), d = filter(r, (x) => c ? get(x, "_parent") === c : !get(x, "_parent")), p = (d == null ? void 0 : d.length) <= 1, u = findIndex(d, { _id: i }), g = u <= 0, m = u + 1 === (d == null ? void 0 : d.length), h = getParentBlockOrientation(c, i, a), f = useCallback(
     (x) => {
-      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, d - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, d + 2), n());
+      isDisabledControl(g, m, x) || p || (x === "UP" || x === "LEFT" ? l([i], c || null, u - 1) : (x === "DOWN" || x === "RIGHT") && l([i], c || null, u + 2), n());
     },
-    [g, m, p, d, i, c, n]
+    [g, m, p, u, i, c, n]
   );
   return useHotkeys(
     "shift+up, shift+down, shift+left, shift+right",
@@ -3051,17 +3050,17 @@ const FrameContext = React__default.createContext({ document: doc, window: win }
     o,
     n
   );
-  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: u, dir: p, key: d }) => c !== p || isDisabledControl(a, l, d) ? null : /* @__PURE__ */ jsx(
-    u,
+  return r ? null : /* @__PURE__ */ jsx(Fragment, { children: CONTROLS.map(({ ControlIcon: d, dir: p, key: u }) => c !== p || isDisabledControl(a, l, u) ? null : /* @__PURE__ */ jsx(
+    d,
     {
-      onClick: () => i(d),
+      onClick: () => i(u),
       className: "rounded p-px hover:bg-white hover:text-blue-500"
     },
-    d
+    u
   )) });
 }, AiIcon = ({
   className: o = "h-full w-full",
-  onClick: n = noop$1
+  onClick: n = noop
 }) => /* @__PURE__ */ jsx("svg", { className: o, viewBox: "0 0 256 256", fill: "currentColor", onClick: n, children: /* @__PURE__ */ jsx("path", { d: "m198.39 128.986-52.16-19.216-19.216-52.16a16 16 0 0 0-30.028 0L77.77 109.77l-52.16 19.216a16 16 0 0 0 0 30.028l52.16 19.216 19.216 52.16a16 16 0 0 0 30.028 0l19.216-52.16 52.16-19.216a16 16 0 0 0 0-30.028m-57.69 34.23a15.97 15.97 0 0 0-9.483 9.483l-19.22 52.152-19.214-52.15a15.97 15.97 0 0 0-9.482-9.484l-52.152-19.22 52.15-19.214a15.97 15.97 0 0 0 9.484-9.482l19.22-52.152 19.214 52.15a15.97 15.97 0 0 0 9.482 9.484l52.152 19.22ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8" }) }), GotoSettingsIcon = ({ blockId: o, className: n }) => /* @__PURE__ */ jsx(GearIcon, { className: n, onClick: () => {
   o && pubsub.publish(CHAI_BUILDER_EVENTS.GOTO_BLOCK_SETTINGS, o);
 } });
@@ -3085,15 +3084,15 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
   const { editingBlockId: o, setEditingBlockId: n, setEditingItemIndex: r } = useInlineEditing();
   return useCallback(
     (a) => {
-      var u;
+      var d;
       if (a == null || a.preventDefault(), a == null || a.stopPropagation(), o) return;
       const l = getTargetedBlock(a.target);
       if (!isInlineEditable(l)) return;
       const i = l.getAttribute("data-block-id");
       if (!i || !l) return;
       const c = l.closest('[data-block-type="Repeater"]');
-      c ? (u = c == null ? void 0 : c.childNodes) == null || u.forEach((p, d) => {
-        p.contains(l) && r(d);
+      c ? (d = c == null ? void 0 : c.childNodes) == null || d.forEach((p, u) => {
+        p.contains(l) && r(u);
       }) : r(-1), n(i);
     },
     [o, n, r]
@@ -3110,11 +3109,11 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
         return;
       }
       if (c != null && c.getAttribute("data-block-parent")) {
-        const u = c.getAttribute("data-style-prop"), p = c.getAttribute("data-style-id"), d = c.getAttribute("data-block-parent");
-        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, { blockId: d, styleId: p, styleProp: u });
+        const d = c.getAttribute("data-style-prop"), p = c.getAttribute("data-style-id"), u = c.getAttribute("data-block-parent");
+        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, { blockId: u, styleId: p, styleProp: d });
       } else if (c != null && c.getAttribute("data-block-id")) {
-        const u = c.getAttribute("data-block-id");
-        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, u === "canvas" ? [] : [u]);
+        const d = c.getAttribute("data-block-id");
+        pubsub.publish(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, d === "canvas" ? [] : [d]);
       }
       n(), r.current = (/* @__PURE__ */ new Date()).getTime();
     },
@@ -3165,29 +3164,29 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
     }
   );
 }, getElementByStyleId = (o, n) => o.querySelector(`[data-style-id="${n}"]`), BlockSelectionHighlighter = () => {
-  const o = useSelectedBlock(), { document: n } = useFrame(), [r] = useSelectedStylingBlocks(), [a, l] = useState([]), [, i] = useState([]), c = (u, p = 0) => {
-    const { top: d } = u.getBoundingClientRect();
-    return d + p >= 0 && d - p <= window.innerHeight;
+  const o = useSelectedBlock(), { document: n } = useFrame(), [r] = useSelectedStylingBlocks(), [a, l] = useState([]), [, i] = useState([]), c = (d, p = 0) => {
+    const { top: u } = d.getBoundingClientRect();
+    return u + p >= 0 && u - p <= window.innerHeight;
   };
   return useEffect(() => {
-    var u;
+    var d;
     if (o != null && o._id && o.type !== "Multiple" && n) {
       const p = getElementByDataBlockId(n, o._id);
-      p && (c(p) || (u = n.defaultView) == null || u.scrollTo({ top: p.offsetTop, behavior: "smooth" }), l([p]));
+      p && (c(p) || (d = n.defaultView) == null || d.scrollTo({ top: p.offsetTop, behavior: "smooth" }), l([p]));
     }
   }, [o == null ? void 0 : o._id, o == null ? void 0 : o.type, n]), useEffect(() => {
     if (!isEmpty(r) && n) {
-      const u = getElementByStyleId(n, first(r).id);
-      i(u ? [u] : [null]);
+      const d = getElementByStyleId(n, first(r).id);
+      i(d ? [d] : [null]);
     } else
       i([null]);
   }, [r, n]), /* @__PURE__ */ jsx(BlockFloatingSelector, { block: o, selectedBlockElement: a[0] });
 }, BlockFloatingSelector = ({ block: o, selectedBlockElement: n }) => {
-  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: u } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: d } = useFrame(), g = useBuilderProp("flags.gotoSettings", !1), { floatingStyles: m, refs: h, update: f } = useFloating({
+  const r = useRemoveBlocks(), a = useDuplicateBlocks(), [, l] = useSelectedBlockIds(), [, i] = useHighlightBlockId(), [, c] = useSelectedStylingBlocks(), { hasPermission: d } = usePermissions(), { editingBlockId: p } = useInlineEditing(), { document: u } = useFrame(), g = useBuilderProp("flags.gotoSettings", !1), { floatingStyles: m, refs: h, update: f } = useFloating({
     placement: "top-start",
     middleware: [
       shift({
-        boundary: d == null ? void 0 : d.body,
+        boundary: u == null ? void 0 : u.body,
         limiter: limitShift({
           offset: 8,
           mainAxis: !0,
@@ -3195,27 +3194,27 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
         })
       }),
       flip({
-        boundary: d == null ? void 0 : d.body,
+        boundary: u == null ? void 0 : u.body,
         fallbackPlacements: ["bottom-start", "top-end", "bottom-end", "inside"]
       }),
       size({
-        boundary: d == null ? void 0 : d.body,
-        apply({ availableWidth: C, availableHeight: S, elements: w }) {
-          Object.assign(w.floating.style, {
-            maxWidth: `${Math.max(200, C)}px`,
-            maxHeight: `${Math.max(100, S)}px`
+        boundary: u == null ? void 0 : u.body,
+        apply({ availableWidth: S, availableHeight: C, elements: v }) {
+          Object.assign(v.floating.style, {
+            maxWidth: `${Math.max(200, S)}px`,
+            maxHeight: `${Math.max(100, C)}px`
           });
         }
       })
     ],
     elements: { reference: n }
   });
-  useResizeObserver(n, () => f(), n !== null), useResizeObserver(d == null ? void 0 : d.body, () => f(), (d == null ? void 0 : d.body) !== null);
+  useResizeObserver(n, () => f(), n !== null), useResizeObserver(u == null ? void 0 : u.body, () => f(), (u == null ? void 0 : u.body) !== null);
   const x = get(o, "_parent", null), b = isEmpty(get(o, "_name", "")) ? get(o, "_type", "") : get(o, "_name", "");
   useEffect(() => {
     if (n) {
-      const C = setTimeout(() => f(), 500);
-      return () => clearTimeout(C);
+      const S = setTimeout(() => f(), 500);
+      return () => clearTimeout(S);
     } else
       f();
   }, [n]);
@@ -3227,13 +3226,13 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
       tabIndex: 0,
       ref: h.setFloating,
       style: m,
-      onClick: (C) => {
-        C.stopPropagation(), C.preventDefault();
+      onClick: (S) => {
+        S.stopPropagation(), S.preventDefault();
       },
-      onMouseEnter: (C) => {
-        C.stopPropagation(), i(null);
+      onMouseEnter: (S) => {
+        S.stopPropagation(), i(null);
       },
-      onKeyDown: (C) => C.stopPropagation(),
+      onKeyDown: (S) => S.stopPropagation(),
       className: "isolate z-[999] flex h-6 items-center bg-blue-500 py-2 text-xs text-white",
       children: [
         x && /* @__PURE__ */ jsx(
@@ -3247,7 +3246,7 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
         ),
         /* @__PURE__ */ jsx(BlockActionLabel, { label: b, block: o }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-1 pr-1.5", children: [
-          u(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
+          d(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsx(
             AiIcon,
             {
               className: "h-4 w-4 rounded hover:bg-white hover:text-blue-500",
@@ -3262,21 +3261,21 @@ const INLINE_EDITABLE_BLOCKS = ["Heading", "Paragraph", "Text", "Link", "Span",
             }
           ),
           /* @__PURE__ */ jsx(AddBlockDropdown, { block: o, children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500" }) }),
-          canDuplicateBlock(get(o, "_type", "")) && u(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(
+          canDuplicateBlock(get(o, "_type", "")) && d(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsx(
             CopyIcon,
             {
               className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
               onClick: () => a([o == null ? void 0 : o._id])
             }
           ) : null,
-          canDeleteBlock(get(o, "_type", "")) && u(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(
+          canDeleteBlock(get(o, "_type", "")) && d(PERMISSIONS.DELETE_BLOCK) ? /* @__PURE__ */ jsx(
             TrashIcon,
             {
               className: "h-4 w-4 rounded p-px hover:bg-white hover:text-blue-500",
               onClick: () => r([o == null ? void 0 : o._id])
             }
           ) : null,
-          u(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: f })
+          d(PERMISSIONS.MOVE_BLOCK) && /* @__PURE__ */ jsx(BlockController, { block: o, updateFloatingBar: f })
         ] })
       ]
     }
@@ -3453,8 +3452,8 @@ class Frame extends Component {
     const r = this.getDoc();
     if (!r)
       return null;
-    const a = this.props.contentDidMount, l = this.props.contentDidUpdate, i = r.defaultView || r.parentView, c = /* @__PURE__ */ jsx(Content, { contentDidMount: a, contentDidUpdate: l, children: /* @__PURE__ */ jsx(FrameContextProvider, { value: { document: r, window: i }, children: /* @__PURE__ */ jsx("div", { className: "frame-content", children: this.props.children }) }) }), u = this.getMountTarget();
-    return [ReactDOM.createPortal(this.props.head, this.getDoc().head), ReactDOM.createPortal(c, u)];
+    const a = this.props.contentDidMount, l = this.props.contentDidUpdate, i = r.defaultView || r.parentView, c = /* @__PURE__ */ jsx(Content, { contentDidMount: a, contentDidUpdate: l, children: /* @__PURE__ */ jsx(FrameContextProvider, { value: { document: r, window: i }, children: /* @__PURE__ */ jsx("div", { className: "frame-content", children: this.props.children }) }) }), d = this.getMountTarget();
+    return [ReactDOM.createPortal(this.props.head, this.getDoc().head), ReactDOM.createPortal(c, d)];
   }
   render() {
     const r = {
@@ -3478,12 +3477,12 @@ $(Frame, "defaultProps", {
   initialContent: '<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'
 });
 const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame, { ...o, forwardedRef: n })), useKeyEventWatcher = (o) => {
-  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: u } = useUndoManager(), [, p] = useCutBlockIds(), [, d] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), h = o ? { document: o } : {};
-  useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => u(), {}, [u]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys(
+  const [n, r] = useSelectedBlockIds(), a = useSelectedBlock(), l = useRemoveBlocks(), i = useDuplicateBlocks(), { undo: c, redo: d } = useUndoManager(), [, p] = useCutBlockIds(), [, u] = useCopyBlocks(), { canPaste: g, pasteBlocks: m } = usePasteBlocks(), h = o ? { document: o } : {};
+  useHotkeys("ctrl+z,command+z", () => c(), {}, [c]), useHotkeys("ctrl+y,command+y", () => d(), {}, [d]), useHotkeys("ctrl+x,command+x", () => p(n), {}, [n, p]), useHotkeys(
     "ctrl+c,command+c",
-    () => d(n),
+    () => u(n),
     { ...h, enabled: !isEmpty(n), preventDefault: !0 },
-    [n, d]
+    [n, u]
   ), useHotkeys(
     "ctrl+v,command+v",
     () => {
@@ -3590,7 +3589,7 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
       heading: get(o, "fontFamily.heading"),
       body: get(o, "fontFamily.body")
     };
-    return n.filter((u) => u.family === i || u.family === c);
+    return n.filter((d) => d.family === i || d.family === c);
   }, [o == null ? void 0 : o.fontFamily, n]), a = useMemo(() => getThemeFontsUrls(filter(r, (i) => has(i, "url"))), [r]), l = useMemo(
     () => getThemeCustomFontFace(filter(r, (i) => has(i, "src"))),
     [r]
@@ -3612,14 +3611,14 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
     const { clientWidth: p } = i.current;
     n(p);
   }, []);
-  const u = useCallback(() => {
+  const d = useCallback(() => {
     a([]), l([]);
   }, [a, l]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       id: "main-content",
-      onClick: u,
+      onClick: d,
       className: "h-full w-full border-l-4 border-r-4 pb-0",
       ref: i,
       children: o
@@ -3633,9 +3632,9 @@ const ChaiFrame = React__default.forwardRef((o, n) => /* @__PURE__ */ jsx(Frame,
   return useCallback(
     (n, r) => isEmpty(r) ? {} : Object.entries(r).reduce((a, [l, i]) => {
       const c = [];
-      let u = find(o, { _id: n });
-      for (; u; )
-        c.push(u), u = find(o, { _id: u._parent });
+      let d = find(o, { _id: n });
+      for (; d; )
+        c.push(d), d = find(o, { _id: d._parent });
       const p = find(c, { _type: i.block });
       return p && (a[l] = get(p, get(i, "prop"), null)), a;
     }, {}),
@@ -3701,22 +3700,22 @@ const RteDropdownMenu = ({
   from: a,
   menuRef: l
 }) => {
-  const { document: i } = useFrame(), [c, u] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, d] = useState(!1), g = useRef(null);
+  const { document: i } = useFrame(), [c, d] = useState({ left: void 0, right: void 0, top: void 0, bottom: void 0 }), [p, u] = useState(!1), g = useRef(null);
   if (useEffect(() => {
-    var C, S;
+    var S, C;
     if (!p) {
-      u({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
+      d({ left: void 0, right: void 0, top: void 0, bottom: void 0 });
       return;
     }
-    const m = (C = g.current) == null ? void 0 : C.getBoundingClientRect(), h = (S = l.current) == null ? void 0 : S.getBoundingClientRect();
+    const m = (S = g.current) == null ? void 0 : S.getBoundingClientRect(), h = (C = l.current) == null ? void 0 : C.getBoundingClientRect();
     let f = m == null ? void 0 : m.left, x = (m == null ? void 0 : m.bottom) + 4, b, y;
-    (h == null ? void 0 : h.left) + (h == null ? void 0 : h.width) + 50 >= i.body.offsetWidth && (f = void 0, b = i.body.offsetWidth - (m == null ? void 0 : m.right)), x + 202 >= i.body.clientHeight && (x = null, y = i.body.clientHeight - (m == null ? void 0 : m.bottom) + (h == null ? void 0 : h.height)), u({ left: f, top: x, right: b, bottom: y });
+    (h == null ? void 0 : h.left) + (h == null ? void 0 : h.width) + 50 >= i.body.offsetWidth && (f = void 0, b = i.body.offsetWidth - (m == null ? void 0 : m.right)), x + 202 >= i.body.clientHeight && (x = null, y = i.body.clientHeight - (m == null ? void 0 : m.bottom) + (h == null ? void 0 : h.height)), d({ left: f, top: x, right: b, bottom: y });
   }, [p]), a === "canvas") {
     const m = () => {
-      d(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
+      u(!1), o && (o == null || o.view.focus(), o == null || o.chain().focus().run());
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { ref: g, onClick: () => d((h) => !h), className: "cursor-pointer", children: n }),
+      /* @__PURE__ */ jsx("div", { ref: g, onClick: () => u((h) => !h), className: "cursor-pointer", children: n }),
       p && (c.left !== void 0 || c.top !== void 0 || c.right !== void 0 || c.bottom !== void 0) && createPortal(
         /* @__PURE__ */ jsx(
           "div",
@@ -3743,9 +3742,9 @@ const RteDropdownMenu = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenu, { open: p, onOpenChange: d, children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropdownMenu, { open: p, onOpenChange: u, children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "relative outline-none", asChild: !0, children: n }),
-    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "z-50 rounded-md border bg-white p-1 text-xs shadow-xl", children: p && (typeof r == "function" ? r(() => d(!1)) : r) })
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "z-50 rounded-md border bg-white p-1 text-xs shadow-xl", children: p && (typeof r == "function" ? r(() => u(!1)) : r) })
   ] }) });
 };
 atomWithStorage("chai-builder-blocks", []);
@@ -3817,7 +3816,7 @@ const getActiveClasses$1 = (o, n, r) => {
   onRemoveHighlightColor: i,
   onClose: c
 }) => {
-  const [u] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), d = (p == null ? void 0 : p.colors) || {}, g = Object.values(d).map((f) => get(f, u ? "1" : "0")), [m, h] = useState("TEXT");
+  const [d] = useDarkMode(), [p] = useAtom$1(lsThemeAtom), u = (p == null ? void 0 : p.colors) || {}, g = Object.values(u).map((f) => get(f, d ? "1" : "0")), [m, h] = useState("TEXT");
   return /* @__PURE__ */ jsxs("div", { id: "rte-widget-color-picker", className: "px-1", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between rounded-md border bg-muted", children: [
       /* @__PURE__ */ jsx(
@@ -3858,8 +3857,8 @@ const getActiveClasses$1 = (o, n, r) => {
     )
   ] });
 }, RteColorPicker = ({ editor: o, from: n, menuRef: r }) => {
-  var S, w;
-  const a = (S = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : S.color, l = (w = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : w.color, [i, c] = useState(a || "#000000F2"), [u, p] = useState(l || "#00000057"), [d, g] = useDebouncedState(i, 150), [m, h] = useDebouncedState(u, 150), f = (_, B) => {
+  var C, v;
+  const a = (C = o == null ? void 0 : o.getAttributes("textStyle")) == null ? void 0 : C.color, l = (v = o == null ? void 0 : o.getAttributes("highlight")) == null ? void 0 : v.color, [i, c] = useState(a || "#000000F2"), [d, p] = useState(l || "#00000057"), [u, g] = useDebouncedState(i, 150), [m, h] = useDebouncedState(d, 150), f = (_, B) => {
     B ? (c(_), g(_)) : (o == null || o.chain().setColor(_).run(), c(_));
   }, x = (_, B) => {
     B ? (p(_), h(_)) : (o == null || o.chain().setHighlight({ color: _ }).run(), p(_));
@@ -3873,8 +3872,8 @@ const getActiveClasses$1 = (o, n, r) => {
   }, [l]), useEffect(() => {
     m != null && m.includes("#") && (m == null ? void 0 : m.length) >= 3 && (o == null || o.chain().setHighlight({ color: m }).run());
   }, [m]), useEffect(() => {
-    d != null && d.includes("#") && (d == null ? void 0 : d.length) >= 3 && (o == null || o.chain().setColor(d).run());
-  }, [d]), /* @__PURE__ */ jsx(
+    u != null && u.includes("#") && (u == null ? void 0 : u.length) >= 3 && (o == null || o.chain().setColor(u).run());
+  }, [u]), /* @__PURE__ */ jsx(
     RteDropdownMenu,
     {
       editor: o,
@@ -3896,7 +3895,7 @@ const getActiveClasses$1 = (o, n, r) => {
         ColorPickerContent,
         {
           textColor: i,
-          highlightColor: u,
+          highlightColor: d,
           onChangeTextColor: f,
           onChangeHighlightColor: x,
           onRemoveTextColor: b,
@@ -4168,35 +4167,35 @@ const RichTextEditor = memo(
       value: o,
       blockId: "active-inline-editing-element",
       placeholder: "Enter text here",
-      onUpdate: ({ editor: d }) => a((d == null ? void 0 : d.getHTML()) || ""),
-      onBlur: ({ editor: d, event: g }) => {
-        const m = g == null ? void 0 : g.relatedTarget, h = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = i.querySelector("#chai-rich-text-menu-bar"), b = h == null ? void 0 : h.contains(m), y = f == null ? void 0 : f.contains(m), C = x == null ? void 0 : x.contains(m), S = window.document.getElementById("rte-widget-color-picker");
-        if (!b && !y && !C && !S) {
-          const w = (d == null ? void 0 : d.getHTML()) || "";
-          r(w);
+      onUpdate: ({ editor: u }) => a((u == null ? void 0 : u.getHTML()) || ""),
+      onBlur: ({ editor: u, event: g }) => {
+        const m = g == null ? void 0 : g.relatedTarget, h = i.querySelector(".ProseMirror"), f = i.querySelector(".tippy-box"), x = i.querySelector("#chai-rich-text-menu-bar"), b = h == null ? void 0 : h.contains(m), y = f == null ? void 0 : f.contains(m), S = x == null ? void 0 : x.contains(m), C = window.document.getElementById("rte-widget-color-picker");
+        if (!b && !y && !S && !C) {
+          const v = (u == null ? void 0 : u.getHTML()) || "";
+          r(v);
         }
       },
       from: "canvas"
     });
     useEffect(() => {
       var g, m;
-      const d = getInitialTextAlign(n);
-      d && ((g = c == null ? void 0 : c.commands) == null || g.setTextAlign(d)), (m = c == null ? void 0 : c.commands) == null || m.focus(), c == null || c.emit("focus", {
+      const u = getInitialTextAlign(n);
+      u && ((g = c == null ? void 0 : c.commands) == null || g.setTextAlign(u)), (m = c == null ? void 0 : c.commands) == null || m.focus(), c == null || c.emit("focus", {
         editor: c,
         event: new FocusEvent("focus"),
         transaction: []
       });
     }, [c]);
-    const u = useMemo(() => {
+    const d = useMemo(() => {
       var m;
-      const d = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
-      if (!n) return d;
+      const u = "max-w-none shadow-none outline outline-[2px] outline-green-500 [&_*]:shadow-none";
+      if (!n) return u;
       const g = ((m = n == null ? void 0 : n.className) == null ? void 0 : m.replace("sr-only", "")) || "";
-      return `${d} ${g}`;
-    }, [n]), p = (d) => {
-      d.key === "Escape" && l(d);
+      return `${u} ${g}`;
+    }, [n]), p = (u) => {
+      u.key === "Escape" && l(u);
     };
-    return c && /* @__PURE__ */ jsxs("div", { onKeyDown: p, onClick: (d) => d.stopPropagation(), className: "relative", children: [
+    return c && /* @__PURE__ */ jsxs("div", { onKeyDown: p, onClick: (u) => u.stopPropagation(), className: "relative", children: [
       /* @__PURE__ */ jsx(
         BubbleMenu,
         {
@@ -4207,7 +4206,7 @@ const RichTextEditor = memo(
           children: /* @__PURE__ */ jsx(RteMenubar, { editor: c, from: "canvas" })
         }
       ),
-      /* @__PURE__ */ jsx(EditorContent, { onKeyDown: p, value: o, editor: c, className: u })
+      /* @__PURE__ */ jsx(EditorContent, { onKeyDown: p, value: o, editor: c, className: d })
     ] });
   }
 ), MemoizedEditor = memo(
@@ -4219,20 +4218,20 @@ const RichTextEditor = memo(
     onChange: l,
     onEscape: i
   }) => {
-    const { document: c, window: u } = useFrame();
+    const { document: c, window: d } = useFrame();
     useEffect(() => {
       if (a.current) {
         a.current.innerHTML = n, a.current.focus();
-        const h = c.createRange(), f = u.getSelection();
+        const h = c.createRange(), f = d.getSelection();
         h.selectNodeContents(a.current), h.collapse(!1), f == null || f.removeAllRanges(), f == null || f.addRange(h), a.current.focus();
       } else
         r();
-    }, [c, u]);
+    }, [c, d]);
     const p = useMemo(() => {
       var f;
       const h = ((f = o == null ? void 0 : o.tagName) == null ? void 0 : f.toLowerCase()) || "div";
       return h === "button" ? "div" : h;
-    }, [o]), d = useCallback(
+    }, [o]), u = useCallback(
       (h) => {
         (h.key === "Enter" || h.key === "Escape") && i(h);
       },
@@ -4258,23 +4257,23 @@ const RichTextEditor = memo(
     return /* @__PURE__ */ jsx(Fragment, { children: createElement(p, {
       ref: a,
       onBlur: g,
-      onKeyDown: d,
+      onKeyDown: u,
       ...m
     }) });
   }
 ), WithBlockTextEditor = memo(
   ({ block: o, children: n }) => {
-    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: u } = useInlineEditing(), [p, d] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: C, blockType: S } = useMemo(() => {
+    const r = "content", { document: a } = useFrame(), { editingBlockId: l, editingItemIndex: i, setEditingBlockId: c, setEditingItemIndex: d } = useInlineEditing(), [p, u] = useState(null), g = useRef(null), { clearHighlight: m } = useBlockHighlight(), h = useUpdateBlocksProps(), { selectedLang: f } = useLanguages(), [, x] = useSelectedBlockIds(), b = useRef(null), y = l, { blockContent: S, blockType: C } = useMemo(() => {
       var j;
       const k = o._type;
       let A = o[r];
-      const v = getRegisteredChaiBlock(o._type);
-      return f && ((j = v == null ? void 0 : v.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${f}`) && (A = get(o, `${r}-${f}`)), { blockContent: A, blockType: k };
-    }, [o, f]), w = useCallback(
+      const w = getRegisteredChaiBlock(o._type);
+      return f && ((j = w == null ? void 0 : w.i18nProps) == null ? void 0 : j.includes(r)) && has(o, `${r}-${f}`) && (A = get(o, `${r}-${f}`)), { blockContent: A, blockType: k };
+    }, [o, f]), v = useCallback(
       (k) => {
-        var v;
-        const A = k || ((v = g.current) == null ? void 0 : v.innerText);
-        h([y], { [r]: A }), d(null), c(null), u(-1), x([]), y && setTimeout(() => x([y]), 100);
+        var w;
+        const A = k || ((w = g.current) == null ? void 0 : w.innerText);
+        h([y], { [r]: A }), u(null), c(null), d(-1), x([]), y && setTimeout(() => x([y]), 100);
       },
       [y, h, c, x, f]
     ), _ = useDebouncedCallback(
@@ -4285,7 +4284,7 @@ const RichTextEditor = memo(
       1e3
     ), B = useCallback(
       (k) => {
-        k.preventDefault(), y && (b.current = y), w(), setTimeout(() => {
+        k.preventDefault(), y && (b.current = y), v(), setTimeout(() => {
           const A = b.current;
           b.current = null, x([A]);
         }, 100);
@@ -4295,29 +4294,29 @@ const RichTextEditor = memo(
     useEffect(() => {
       var E;
       if (!y) return;
-      const k = `[data-block-id="${y}"]`, A = i >= 0 ? `[data-block-index="${i}"]` : "", v = a.querySelector(`${k}${A}`);
-      v && ((E = v == null ? void 0 : v.classList) == null || E.add("sr-only"), d(v));
-    }, [y, S, a, i]);
-    const I = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(S) ? /* @__PURE__ */ jsx(
+      const k = `[data-block-id="${y}"]`, A = i >= 0 ? `[data-block-index="${i}"]` : "", w = a.querySelector(`${k}${A}`);
+      w && ((E = w == null ? void 0 : w.classList) == null || E.add("sr-only"), u(w));
+    }, [y, C, a, i]);
+    const I = useMemo(() => p ? (m(), ["RichText", "Paragraph"].includes(C) ? /* @__PURE__ */ jsx(
       RichTextEditor,
       {
-        blockContent: C,
+        blockContent: S,
         editingElement: p,
         onChange: _,
-        onClose: w,
+        onClose: v,
         onEscape: B
       }
     ) : /* @__PURE__ */ jsx(
       MemoizedEditor,
       {
         editorRef: g,
-        blockContent: C,
+        blockContent: S,
         editingElement: p,
-        onClose: w,
+        onClose: v,
         onChange: _,
         onEscape: B
       }
-    )) : null, [p, y, S, C, w, f]);
+    )) : null, [p, y, C, S, v, f]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       I,
       n
@@ -4355,40 +4354,40 @@ const RichTextEditor = memo(
   blockAtom: n,
   children: r
 }) => {
-  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: u, fallbackLang: p } = useLanguages(), d = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: f, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useMemo(
-    () => m ? applyBindingToBlockProps(applyLanguage(i, u, c), g, {
+  const { editingBlockId: a, editingItemIndex: l } = useInlineEditing(), [i] = useAtom$1(n), c = useMemo(() => getRegisteredChaiBlock(i._type), [i._type]), { selectedLang: d, fallbackLang: p } = useLanguages(), u = useBlockRuntimeProps(), g = usePageExternalData(), [m] = useAtom$1(dataBindingActiveAtom), h = get(c, "component", null), { index: f, key: x } = useContext(RepeaterContext), { mode: b } = useEditorMode(), y = useMemo(
+    () => m ? applyBindingToBlockProps(applyLanguage(i, d, c), g, {
       index: f,
       key: x
-    }) : applyLanguage(i, u, c),
-    [i, u, c, g, m, f, x]
-  ), C = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), S = useMemo(
-    () => d(i._id, getBlockRuntimeProps(i._type)),
-    [i._id, i._type, d, getBlockRuntimeProps]
-  ), w = useMemo(
+    }) : applyLanguage(i, d, c),
+    [i, d, c, g, m, f, x]
+  ), S = useMemo(() => getBlockTagAttributes(i), [i, getBlockTagAttributes]), C = useMemo(
+    () => u(i._id, getBlockRuntimeProps(i._type)),
+    [i._id, i._type, u, getBlockRuntimeProps]
+  ), v = useMemo(
     () => ({
       blockProps: { "data-block-id": i._id, "data-block-type": i._type, "data-block-index": f },
       inBuilder: b === "edit",
-      lang: u || p,
+      lang: d || p,
       ...y,
-      ...C,
       ...S,
+      ...C,
       ...o
     }),
     [
       b,
       i._id,
       i._type,
-      u,
+      d,
       p,
       y,
-      C,
       S,
+      C,
       o
     ]
   ), _ = useMemo(() => !CORE_BLOCKS.includes(i._type), [i._type]), B = useMemo(() => get(i, "_show", !0), [i]);
   if (isNull(h) || !B) return null;
   let I = /* @__PURE__ */ jsx(Suspense, { children: createElement(h, {
-    ...w,
+    ...v,
     children: r({
       _id: i._id,
       _type: i._type,
@@ -4404,8 +4403,8 @@ const RichTextEditor = memo(
   return _ ? /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorFallback, children: k }) : k;
 }, PartialWrapper$1 = ({ children: o, partialBlockId: n }) => {
   const r = useBuilderProp("gotoPage", noop), { saveState: a } = useSavePage(), { selectedLang: l, fallbackLang: i } = useLanguages(), c = useCallback(
-    (u) => {
-      if (u.stopPropagation(), a !== "SAVED") {
+    (d) => {
+      if (d.stopPropagation(), a !== "SAVED") {
         toast.error("You have unsaved changes. Please save the page first.");
         return;
       }
@@ -4435,16 +4434,16 @@ const RichTextEditor = memo(
 }) => {
   const l = useGetBlockAtom(r);
   let i = useMemo(
-    () => filter(o, (u) => has(u, "_id") && (isEmpty(n) ? !u._parent : u._parent === n)),
+    () => filter(o, (d) => has(d, "_id") && (isEmpty(n) ? !d._parent : d._parent === n)),
     [o, n]
   );
   const c = useCallback(
-    (u) => filter(o, (p) => p._parent === u).length > 0,
+    (d) => filter(o, (p) => p._parent === d).length > 0,
     [o]
   );
-  return c && (a === "Heading" || a === "Paragraph" || a === "Link") && (i = adjustSpacingInContentBlocks(i)), map(i, (u) => {
-    const p = l(u._id);
-    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: u, children: (d) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: d, children: ({ _id: g, _type: m, partialBlockId: h, repeaterItems: f, $repeaterItemsKey: x }) => m === "Repeater" ? isArray(f) && f.map((b, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: u._id, type: m }) }, `${g}-${y}`)) : m === "GlobalBlock" || m === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : c(g) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: u._id, type: m }) : null }) }, u._id) : null;
+  return c && (a === "Heading" || a === "Paragraph" || a === "Link") && (i = adjustSpacingInContentBlocks(i)), map(i, (d) => {
+    const p = l(d._id);
+    return p ? /* @__PURE__ */ jsx(MayBeAsyncPropsWrapper, { block: d, children: (u) => /* @__PURE__ */ jsx(BlockRenderer, { blockAtom: p, asyncProps: u, children: ({ _id: g, _type: m, partialBlockId: h, repeaterItems: f, $repeaterItemsKey: x }) => m === "Repeater" ? isArray(f) && f.map((b, y) => /* @__PURE__ */ jsx(RepeaterContext.Provider, { value: { index: y, key: x }, children: /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) }, `${g}-${y}`)) : m === "GlobalBlock" || m === "PartialBlock" ? /* @__PURE__ */ jsx(Provider, { store: builderStore, children: /* @__PURE__ */ jsx(PartialBlocksRenderer, { partialBlockId: h }) }) : c(g) ? /* @__PURE__ */ jsx(BlocksRenderer, { splitAtoms: r, blocks: o, parent: d._id, type: m }) : null }) }, d._id) : null;
   });
 }, PageBlocksRenderer = () => {
   const [o] = useBlocksStore();
@@ -4454,24 +4453,24 @@ const RichTextEditor = memo(
   return /* @__PURE__ */ jsx(Fragment, { children: n });
 }, useCanvasScale = (o) => {
   const [n] = useCanvasDisplayWidth(), [, r] = useCanvasZoom(), a = useBuilderProp("htmlDir", "ltr"), [l, i] = useState({}), c = useCallback(() => {
-    const { width: u, height: p } = o;
-    if (u < n) {
-      const d = parseFloat((u / n).toFixed(2).toString());
+    const { width: d, height: p } = o;
+    if (d < n) {
+      const u = parseFloat((d / n).toFixed(2).toString());
       let g = {};
-      const m = p * d, h = u * d;
+      const m = p * u, h = d * u;
       p && (g = {
         // Eureka! This is the formula to calculate the height of the scaled element. Thank you ChatGPT 4
         height: 100 + (p - m) / m * 100 + "%",
-        width: 100 + (u - h) / h * 100 + "%"
+        width: 100 + (d - h) / h * 100 + "%"
       }), i({
         position: "relative",
         top: 0,
-        transform: `scale(${d})`,
+        transform: `scale(${u})`,
         transformOrigin: a === "rtl" ? "top right" : "top left",
         ...g,
         maxWidth: "none"
         // TODO: Add max-width to the wrapper
-      }), r(d * 100);
+      }), r(u * 100);
     } else
       i({}), r(100);
   }, [n, o, a, r]);
@@ -4484,26 +4483,26 @@ const RichTextEditor = memo(
     setTimeout(() => {
       if (!isEmpty(n))
         return;
-      const u = getElementByDataBlockId(a, first(i));
-      if (u) {
-        const p = u.getAttribute("data-style-prop");
+      const d = getElementByDataBlockId(a, first(i));
+      if (d) {
+        const p = d.getAttribute("data-style-prop");
         if (p) {
-          const d = u.getAttribute("data-style-id"), g = u.getAttribute("data-block-parent");
-          r([{ id: d, prop: p, blockId: g }]);
+          const u = d.getAttribute("data-style-id"), g = d.getAttribute("data-block-parent");
+          r([{ id: u, prop: p, blockId: g }]);
         }
       }
     }, 100);
-  }, [a, i, r, n]), useEffect(() => () => l(), [l]), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, (u) => {
-    u && (!isEmpty(u) && !includes(i, first(u)) && (c == null || c.closeAll()), o(u));
-  }), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, (u) => {
-    if (!u) return;
-    const { blockId: p, styleId: d, styleProp: g } = u;
-    p && (includes(i, p) || c == null || c.closeAll(), r([{ id: d, prop: g, blockId: p }]), o([p]));
+  }, [a, i, r, n]), useEffect(() => () => l(), [l]), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_SELECTED, (d) => {
+    d && (!isEmpty(d) && !includes(i, first(d)) && (c == null || c.closeAll()), o(d));
+  }), usePubSub(CHAI_BUILDER_EVENTS.CANVAS_BLOCK_STYLE_SELECTED, (d) => {
+    if (!d) return;
+    const { blockId: p, styleId: u, styleProp: g } = d;
+    p && (includes(i, p) || c == null || c.closeAll(), r([{ id: u, prop: g, blockId: p }]), o([p]));
   }), usePubSub(CHAI_BUILDER_EVENTS.CLEAR_CANVAS_SELECTION, () => {
     l(), o([]), r([]);
   }), null;
 }, StaticCanvas = () => {
-  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, u] = useCanvasIframe(), p = useBuilderProp("loading", !1), d = useBuilderProp("htmlDir", "ltr"), g = useCallback(
+  const [o] = useCanvasDisplayWidth(), [, n] = useHighlightBlockId(), r = useRef(null), a = useRef(null), [l, i] = useState({ width: 0, height: 0 }), c = useCanvasScale(l), [, d] = useCanvasIframe(), p = useBuilderProp("loading", !1), u = useBuilderProp("htmlDir", "ltr"), g = useCallback(
     (h) => {
       i((f) => ({ ...f, width: h }));
     },
@@ -4516,8 +4515,8 @@ const RichTextEditor = memo(
   }, [a, o]);
   const m = useMemo(() => {
     let h = IframeInitialContent;
-    return h = h.replace("__HTML_DIR__", d), h;
-  }, [d]);
+    return h = h.replace("__HTML_DIR__", u), h;
+  }, [u]);
   return /* @__PURE__ */ jsx(ResizableCanvasWrapper, { onMount: g, onResize: g, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -4527,7 +4526,7 @@ const RichTextEditor = memo(
       children: /* @__PURE__ */ jsxs(
         ChaiFrame,
         {
-          contentDidMount: () => u(r.current),
+          contentDidMount: () => d(r.current),
           ref: r,
           id: "canvas-iframe",
           style: { ...c, ...isEmpty(c) ? { width: `${o}px` } : {} },
@@ -4562,7 +4561,7 @@ const RichTextEditor = memo(
     /* @__PURE__ */ jsx("p", { className: "font-semibold", children: o("Oops! Something went wrong.") }),
     /* @__PURE__ */ jsx("p", { children: o("Please try again.") })
   ] }) });
-}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-CihZ_PJK.js")), CanvasArea = () => {
+}, CodeEditor$1 = React__default.lazy(() => import("./code-editor-CfrDD-_Q.js")), CanvasArea = () => {
   const [o] = useCodeEditor(), n = 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", children: [
     /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Skeleton, { className: "h-full" }), children: /* @__PURE__ */ jsx(ErrorBoundary, { fallback: /* @__PURE__ */ jsx(FallbackError, {}), onError: n, children: /* @__PURE__ */ jsx(StaticCanvas, {}) }) }),
@@ -4602,9 +4601,9 @@ const RichTextEditor = memo(
   useEffect(() => {
     i(o || "");
   }, [o]);
-  const c = (u) => {
-    i(u);
-    const p = sanitizeSvg(u);
+  const c = (d) => {
+    i(d);
+    const p = sanitizeSvg(d);
     n(p);
   };
   return /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-col gap-2", id: "icon-picker-field", children: [
@@ -4618,7 +4617,7 @@ const RichTextEditor = memo(
           autoCorrect: "off",
           spellCheck: "false",
           value: l,
-          onChange: (u) => c(u.target.value),
+          onChange: (d) => c(d.target.value),
           placeholder: a("SVG_code"),
           rows: 2,
           className: "no-scrollbar w-full rounded-md border border-border bg-background px-3 py-1.5 text-xs shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
@@ -4631,7 +4630,7 @@ const RichTextEditor = memo(
     ] })
   ] });
 }, DefaultMediaManager = ({ close: o, onSelect: n, mode: r = "image" }) => {
-  const [a, l] = useState(""), [i, c] = useState(!1), [u, p] = useState(!1), [d, g] = useState(null), m = async (f) => {
+  const [a, l] = useState(""), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState(null), m = async (f) => {
     if (!f.trim()) {
       p(!1), g("Please enter a URL");
       return;
@@ -4646,9 +4645,9 @@ const RichTextEditor = memo(
   }, { t: h } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "flex w-96 flex-col gap-4 p-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: h(`${r.charAt(0).toUpperCase() + r.slice(1)} Manager`) }),
-    d && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+    u && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
       /* @__PURE__ */ jsx(ExclamationTriangleIcon, { className: "h-4 w-4" }),
-      /* @__PURE__ */ jsx(AlertDescription, { children: d })
+      /* @__PURE__ */ jsx(AlertDescription, { children: u })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
       /* @__PURE__ */ jsx(
@@ -4666,7 +4665,7 @@ const RichTextEditor = memo(
           Button,
           {
             onClick: () => n({ id: "dam-id", url: a, width: 600, height: 400, description: "This is image description" }),
-            disabled: !u || i,
+            disabled: !d || i,
             children: h("Insert")
           }
         )
@@ -4701,31 +4700,31 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   const n = ((l = o.split("/").pop()) == null ? void 0 : l.split("?")[0]) || "";
   return [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico", ".avif"].some((i) => n.toLowerCase().endsWith(i)) ? n : "";
 }, ImagePickerField = ({ value: o, onChange: n, id: r, onBlur: a }) => {
-  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), u = useUpdateBlocksProps(), p = usePageExternalData(), d = r.split(".").pop() || "", g = i ? `_${d}Id-${i}` : `_${d}Id`, m = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), h = get(c, g, m ? c == null ? void 0 : c.assetId : ""), f = useMemo(() => {
+  const { t: l } = useTranslation(), { selectedLang: i } = useLanguages(), c = useSelectedBlock(), d = useUpdateBlocksProps(), p = usePageExternalData(), u = r.split(".").pop() || "", g = i ? `_${u}Id-${i}` : `_${u}Id`, m = isEmpty(i) && (c == null ? void 0 : c._type) === "Image" && has(c, "assetId"), h = get(c, g, m ? c == null ? void 0 : c.assetId : ""), f = useMemo(() => {
     if (!o || !c || !/\{\{.*?\}\}/.test(o)) return o;
-    const w = { ...c, [d]: o }, _ = applyBindingToBlockProps(w, p, { index: -1, key: "" });
-    return get(_, d, o);
-  }, [o, c, p, d]), x = !!h || f !== PLACEHOLDER_IMAGE, b = (S) => {
-    const w = isArray(S) ? first(S) : S;
-    if (w) {
-      n(w == null ? void 0 : w.url);
-      const _ = w == null ? void 0 : w.width, B = w == null ? void 0 : w.height, I = g.includes("mobile");
+    const v = { ...c, [u]: o }, _ = applyBindingToBlockProps(v, p, { index: -1, key: "" });
+    return get(_, u, o);
+  }, [o, c, p, u]), x = !!h || f !== PLACEHOLDER_IMAGE, b = (C) => {
+    const v = isArray(C) ? first(C) : C;
+    if (v) {
+      n(v == null ? void 0 : v.url);
+      const _ = v == null ? void 0 : v.width, B = v == null ? void 0 : v.height, I = g.includes("mobile");
       if (c != null && c._id) {
         const k = {
           ..._ && { [I ? "mobileWidth" : "width"]: _ },
           ...B && { [I ? "mobileHeight" : "height"]: B },
-          ...w.description && { alt: w.description }
+          ...v.description && { alt: v.description }
         };
-        if (set(k, g, w.id), isEmpty(k)) return;
-        u([c._id], k);
+        if (set(k, g, v.id), isEmpty(k)) return;
+        d([c._id], k);
       }
     }
   }, y = useCallback(() => {
     if (n(PLACEHOLDER_IMAGE), c != null && c._id) {
-      const S = {}, w = g.includes("mobile");
-      set(S, g, ""), set(S, w ? "mobileWidth" : "width", ""), set(S, w ? "mobileHeight" : "height", ""), u([c._id], S);
+      const C = {}, v = g.includes("mobile");
+      set(C, g, ""), set(C, v ? "mobileWidth" : "width", ""), set(C, v ? "mobileHeight" : "height", ""), d([c._id], C);
     }
-  }, [n, c == null ? void 0 : c._id, u, g]), C = getFileName(f);
+  }, [n, c == null ? void 0 : c._id, d, g]), S = getFileName(f);
   return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-start gap-x-3", children: [
     f ? /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsx(
@@ -4756,7 +4755,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
     ] }) : /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: b, mode: "image", assetId: h, children: /* @__PURE__ */ jsx("div", { className: "h-14 w-14 cursor-pointer rounded-md border border-border bg-[radial-gradient(#AAA,transparent_1px)] duration-300 [background-size:10px_10px]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex w-3/5 flex-col", children: [
       /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: C }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-[250px] truncate pr-2 text-xs text-gray-400", children: S }),
         /* @__PURE__ */ jsx(MediaManagerModal, { onSelect: b, assetId: "", children: /* @__PURE__ */ jsx("small", { className: "h-6 mb-1 w-full cursor-pointer rounded-md bg-secondary px-1 py-1 text-center text-xs text-secondary-foreground hover:bg-secondary/80", children: !isEmpty(f) && f !== PLACEHOLDER_IMAGE ? l("Replace image") : l("Choose image") }) }),
         /* @__PURE__ */ jsx("div", { className: "text-center text-xs text-gray-400", children: "OR" })
       ] }),
@@ -4771,31 +4770,31 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
           className: "h-6  text-xs",
           placeholder: l("Enter image URL"),
           value: o === PLACEHOLDER_IMAGE ? "" : o,
-          onBlur: ({ target: { value: S } }) => a(r, S),
-          onChange: (S) => n(S.target.value)
+          onBlur: ({ target: { value: C } }) => a(r, C),
+          onChange: (C) => n(C.target.value)
         }
       )
     ] })
   ] });
 }, PathDropdown = ({ data: o, onSelect: n, dataType: r }) => {
-  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), u = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
+  const [a, l] = React__default.useState([]), [i, c] = React__default.useState(o), d = (m) => Array.isArray(m) ? "array" : typeof m == "object" && m !== null ? "object" : "value", p = React__default.useCallback(
     (m) => {
       const h = (f) => r === "value" ? f === "value" || f === "object" : r === "array" ? f === "array" : f === r;
       m.type === "object" ? (l((f) => [...f, m.key]), c(m.value)) : h(m.type) && n([...a, m.key].join("."), r);
     },
     [a, n, r]
-  ), d = React__default.useCallback(() => {
+  ), u = React__default.useCallback(() => {
     if (a.length > 0) {
       const m = a.slice(0, -1);
       l(m), c(m.reduce((h, f) => h[f], o));
     }
-  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({ key: m, value: h, type: u(h) })).filter((m) => !startsWith(m.key, REPEATER_PREFIX) && m.key.includes("/") ? !1 : r === "value" ? m.type === "value" || m.type === "object" : r === "array" ? m.type === "array" || m.type === "object" : r === "object" ? m.type === "object" : !0) : [], [i, r]);
+  }, [a, o]), g = React__default.useMemo(() => i ? Object.entries(i).map(([m, h]) => ({ key: m, value: h, type: d(h) })).filter((m) => !startsWith(m.key, REPEATER_PREFIX) && m.key.includes("/") ? !1 : r === "value" ? m.type === "value" || m.type === "object" : r === "array" ? m.type === "array" || m.type === "object" : r === "object" ? m.type === "object" : !0) : [], [i, r]);
   return /* @__PURE__ */ jsxs(Command, { className: "fields-command", children: [
     /* @__PURE__ */ jsx(CommandInput, { className: "border-none", placeholder: "Search..." }),
     /* @__PURE__ */ jsxs(CommandList, { children: [
       /* @__PURE__ */ jsx(CommandEmpty, { children: t("No option found.") }),
       /* @__PURE__ */ jsxs(CommandGroup, { children: [
-        a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: d, className: "flex items-center text-sm", children: [
+        a.length > 0 && /* @__PURE__ */ jsxs(CommandItem, { onSelect: u, className: "flex items-center text-sm", children: [
           /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "mr-2 h-4 w-4" }),
           t("Back")
         ] }),
@@ -4835,7 +4834,7 @@ const PLACEHOLDER_IMAGE = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWl
   ] });
 };
 function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
-  const [a, l] = React__default.useState(!1), i = useBuilderProp("collections", []), c = React__default.useMemo(() => r === "array" ? { ...i.map((p) => p.id).reduce((p, d) => ({ ...p, [COLLECTION_PREFIX + d]: [] }), {}), ...o } : o, [o, i, r]);
+  const [a, l] = React__default.useState(!1), i = useBuilderProp("collections", []), c = React__default.useMemo(() => r === "array" ? { ...i.map((p) => p.id).reduce((p, u) => ({ ...p, [COLLECTION_PREFIX + u]: [] }), {}), ...o } : o, [o, i, r]);
   return /* @__PURE__ */ jsxs(Popover, { open: a, onOpenChange: l, children: [
     /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
@@ -4864,8 +4863,8 @@ function NestedPathSelector({ data: o, onSelect: n, dataType: r = "value" }) {
       PathDropdown,
       {
         data: c,
-        onSelect: (u, p) => {
-          n(u, p), l(!1);
+        onSelect: (d, p) => {
+          n(d, p), l(!1);
         },
         dataType: r
       }
@@ -4878,21 +4877,21 @@ const DataBindingSelector = ({
   id: r,
   formData: a
 }) => {
-  const l = usePageExternalData(), i = useBuilderProp("flags.dataBinding", !0), c = useSelectedBlockHierarchy(), u = useSelectedBlock(), p = useMemo(() => {
+  const l = usePageExternalData(), i = useBuilderProp("flags.dataBinding", !0), c = useSelectedBlockHierarchy(), d = useSelectedBlock(), p = useMemo(() => {
     if (c.length === 1) return "";
     const m = c.find((x) => x._type === "Repeater"), f = get(m, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1");
     return `${REPEATER_PREFIX}${startsWith(f, COLLECTION_PREFIX) ? `${f}/${m._id}` : f}`;
-  }, [c]), d = useMemo(() => first(get(l, p.replace(REPEATER_PREFIX, ""), [])), [p, l]), g = useCallback(
+  }, [c]), u = useMemo(() => first(get(l, p.replace(REPEATER_PREFIX, ""), [])), [p, l]), g = useCallback(
     (m, h) => {
       if (m = isEmpty(p) ? m : m.replace(`${p}`, "$index"), h === "array" || h === "object") {
         n(`{{${m}}}`, {}, r);
         return;
       }
-      const f = (C) => /[.,!?;:]/.test(C), x = (C, S, w) => {
+      const f = (S) => /[.,!?;:]/.test(S), x = (S, C, v) => {
         let _ = "", B = "";
-        const I = S > 0 ? C[S - 1] : "", k = S < C.length ? C[S] : "";
-        return S > 0 && (I === "." || !f(I) && I !== " ") && (_ = " "), S < C.length && !f(k) && k !== " " && (B = " "), {
-          text: _ + w + B,
+        const I = C > 0 ? S[C - 1] : "", k = C < S.length ? S[C] : "";
+        return C > 0 && (I === "." || !f(I) && I !== " ") && (_ = " "), C < S.length && !f(k) && k !== " " && (B = " "), {
+          text: _ + v + B,
           prefixLength: _.length,
           suffixLength: B.length
         };
@@ -4900,41 +4899,41 @@ const DataBindingSelector = ({
       if (!b) return;
       const y = document.getElementById(`chai-rte-${r}`) || document.getElementById(`chai-rte-modal-${r}`);
       if (y && (y.querySelector(".ProseMirror") || y.__chaiRTE)) {
-        const C = y.__chaiRTE;
-        if (C) {
-          const S = `{{${m}}}`;
-          C.commands.focus();
-          const { from: w, to: _ } = C.state.selection;
-          if (w !== _)
-            C.chain().deleteSelection().insertContent(S).run();
+        const S = y.__chaiRTE;
+        if (S) {
+          const C = `{{${m}}}`;
+          S.commands.focus();
+          const { from: v, to: _ } = S.state.selection;
+          if (v !== _)
+            S.chain().deleteSelection().insertContent(C).run();
           else {
-            const { state: I } = C, k = I.selection.from, A = I.doc.textBetween(Math.max(0, k - 1), k), v = I.doc.textBetween(k, Math.min(k + 1, I.doc.content.size));
+            const { state: I } = S, k = I.selection.from, A = I.doc.textBetween(Math.max(0, k - 1), k), w = I.doc.textBetween(k, Math.min(k + 1, I.doc.content.size));
             let E = "";
             k > 0 && A !== " " && !f(A) && (E = " ");
             let j = "";
-            v && v !== " " && !f(v) && (j = " "), C.chain().insertContent(E + S + j).run();
+            w && w !== " " && !f(w) && (j = " "), S.chain().insertContent(E + C + j).run();
           }
-          setTimeout(() => n(C.getHTML(), {}, r), 100);
+          setTimeout(() => n(S.getHTML(), {}, r), 100);
           return;
         }
       } else {
-        const C = b, S = C.selectionStart || 0, w = C.value || "", _ = C.selectionEnd || S;
-        if (_ > S) {
-          const v = `{{${m}}}`, { text: E } = x(w, S, v), j = w.slice(0, S) + E + w.slice(_);
+        const S = b, C = S.selectionStart || 0, v = S.value || "", _ = S.selectionEnd || C;
+        if (_ > C) {
+          const w = `{{${m}}}`, { text: E } = x(v, C, w), j = v.slice(0, C) + E + v.slice(_);
           n(j, {}, r);
           return;
         }
-        const I = `{{${m}}}`, { text: k } = x(w, S, I), A = w.slice(0, S) + k + w.slice(S);
+        const I = `{{${m}}}`, { text: k } = x(v, C, I), A = v.slice(0, C) + k + v.slice(C);
         n(A, {}, r);
       }
     },
-    [r, n, a, u == null ? void 0 : u._id, p]
+    [r, n, a, d == null ? void 0 : d._id, p]
   );
   return i ? /* @__PURE__ */ jsx(
     NestedPathSelector,
     {
       data: {
-        ...d && { [p]: d },
+        ...u && { [p]: u },
         ...l
       },
       onSelect: g,
@@ -4947,104 +4946,104 @@ const DataBindingSelector = ({
   onChange: r
 }) => {
   var A;
-  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (v, E) => []), [i, c] = useState(!1), [u, p] = useState(!1), [d, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [b, y] = useState(-1), C = useRef(null), S = (A = n == null ? void 0 : n.find((v) => v.key === d)) == null ? void 0 : A.name;
+  const { t: a } = useTranslation(), l = useBuilderProp("searchPageTypeItems", (w, E) => []), [i, c] = useState(!1), [d, p] = useState(!1), [u, g] = useState("page"), [m, h] = useState(""), [f, x] = useState([]), [b, y] = useState(-1), S = useRef(null), C = (A = n == null ? void 0 : n.find((w) => w.key === u)) == null ? void 0 : A.name;
   useEffect(() => {
     if (h(""), x([]), y(-1), p(!1), !o || i || !startsWith(o, "pageType:")) return;
-    const v = split(o, ":"), E = get(v, 1, "page") || "page";
+    const w = split(o, ":"), E = get(w, 1, "page") || "page";
     g(E), (async () => {
-      const j = await l(E, [get(v, 2, "page")]);
+      const j = await l(E, [get(w, 2, "page")]);
       j && Array.isArray(j) && h(get(j, [0, "name"], ""));
     })();
   }, [o]);
-  const w = useDebouncedCallback(
-    async (v) => {
-      if (isEmpty(v))
+  const v = useDebouncedCallback(
+    async (w) => {
+      if (isEmpty(w))
         x([]);
       else {
-        const E = await l(d, v);
+        const E = await l(u, w);
         x(E);
       }
       c(!1), y(-1);
     },
-    [d],
+    [u],
     300
-  ), _ = (v) => {
-    const E = ["pageType", d, v.id];
-    E[1] && (r(E.join(":")), h(v.name), p(!1), x([]), y(-1));
-  }, B = (v) => {
-    switch (v.key) {
+  ), _ = (w) => {
+    const E = ["pageType", u, w.id];
+    E[1] && (r(E.join(":")), h(w.name), p(!1), x([]), y(-1));
+  }, B = (w) => {
+    switch (w.key) {
       case "ArrowDown":
-        v.preventDefault(), y((E) => E < f.length - 1 ? E + 1 : E);
+        w.preventDefault(), y((E) => E < f.length - 1 ? E + 1 : E);
         break;
       case "ArrowUp":
-        v.preventDefault(), y((E) => E > 0 ? E - 1 : E);
+        w.preventDefault(), y((E) => E > 0 ? E - 1 : E);
         break;
       case "Enter":
-        if (v.preventDefault(), f.length === 0) return;
+        if (w.preventDefault(), f.length === 0) return;
         b >= 0 && _(f[b]);
         break;
       case "Escape":
-        v.preventDefault(), I();
+        w.preventDefault(), I();
         break;
     }
   };
   useEffect(() => {
-    if (b >= 0 && C.current) {
-      const v = C.current.children[b];
-      v == null || v.scrollIntoView({ block: "nearest" });
+    if (b >= 0 && S.current) {
+      const w = S.current.children[b];
+      w == null || w.scrollIntoView({ block: "nearest" });
     }
   }, [b]);
   const I = () => {
     h(""), x([]), y(-1), p(!1), r("");
-  }, k = (v) => {
-    h(v), p(!isEmpty(v)), c(!0), w(v);
+  }, k = (w) => {
+    h(w), p(!isEmpty(w)), c(!0), v(w);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("select", { name: "pageType", value: d, onChange: (v) => g(v.target.value), children: map(n, (v) => /* @__PURE__ */ jsx("option", { value: v.key, children: v.name }, v.key)) }),
-    d && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
+    /* @__PURE__ */ jsx("select", { name: "pageType", value: u, onChange: (w) => g(w.target.value), children: map(n, (w) => /* @__PURE__ */ jsx("option", { value: w.key, children: w.name }, w.key)) }),
+    u && /* @__PURE__ */ jsxs("div", { className: "group relative mt-2 flex items-center", children: [
       /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
           value: m,
-          onChange: (v) => k(v.target.value),
+          onChange: (w) => k(w.target.value),
           onKeyDown: B,
-          placeholder: a(`Search ${S ?? ""}`),
+          placeholder: a(`Search ${C ?? ""}`),
           className: "w-full rounded-md border border-gray-300 p-2 pr-16"
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 top-3 flex items-center gap-1.5", children: m && /* @__PURE__ */ jsx("button", { onClick: I, className: "text-gray-400 hover:text-gray-600", title: a("Clear search"), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-4 w-4" }) }) })
     ] }),
-    (i || !isEmpty(f) || u && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
+    (i || !isEmpty(f) || d && isEmpty(f)) && /* @__PURE__ */ jsx("div", { className: "absolute z-40 mt-2 max-h-40 w-full max-w-[250px] overflow-y-auto rounded-md border border-border bg-background shadow-lg", children: i ? /* @__PURE__ */ jsxs("div", { className: "space-y-1 p-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" }),
       /* @__PURE__ */ jsx("div", { className: "h-6 w-full animate-pulse rounded bg-gray-200" })
-    ] }) : u && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
+    ] }) : d && isEmpty(f) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-4 text-sm text-gray-500", children: [
       a("No results found for"),
       ' "',
       m,
       '"'
-    ] }) : /* @__PURE__ */ jsx("ul", { ref: C, children: map(f == null ? void 0 : f.slice(0, 20), (v, E) => /* @__PURE__ */ jsxs(
+    ] }) : /* @__PURE__ */ jsx("ul", { ref: S, children: map(f == null ? void 0 : f.slice(0, 20), (w, E) => /* @__PURE__ */ jsxs(
       "li",
       {
-        onClick: () => _(v),
-        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(v.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        onClick: () => _(w),
+        className: `cursor-pointer p-2 text-xs ${o != null && o.includes(w.id) ? "bg-blue-200" : E === b ? "bg-gray-100" : "hover:bg-gray-100"}`,
         children: [
-          v.name,
+          w.name,
           " ",
-          v.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
+          w.slug && /* @__PURE__ */ jsxs("small", { className: "font-light text-gray-500", children: [
             "( ",
-            v.slug,
+            w.slug,
             " )"
           ] })
         ]
       },
-      v.id
+      w.id
     )) }) })
   ] });
 }, LinkField = ({ schema: o, formData: n, onChange: r, name: a }) => {
-  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: u = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: d, fallbackLang: g, languages: m } = useLanguages(), h = useMemo(
-    () => isEmpty(m) ? "" : isEmpty(d) ? g : d,
-    [m, d, g]
+  const { t: l } = useTranslation(), { type: i = "pageType", href: c = "", target: d = "self" } = n ?? {}, p = useBuilderProp("pageTypes", []), { selectedLang: u, fallbackLang: g, languages: m } = useLanguages(), h = useMemo(
+    () => isEmpty(m) ? "" : isEmpty(u) ? g : u,
+    [m, u, g]
   ), f = useMemo(() => get(LANGUAGES, h, h), [h]), x = i === "pageType" && isEmpty(p) ? "url" : i;
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-x-2 text-xs font-medium", children: [
@@ -5107,9 +5106,9 @@ const DataBindingSelector = ({
             autoCorrect: "off",
             spellCheck: "false",
             type: "checkbox",
-            defaultChecked: u === "_blank",
+            defaultChecked: d === "_blank",
             className: "!w-fit cursor-pointer rounded-md border border-border",
-            onChange: () => r({ ...n, target: u === "_blank" ? "_self" : "_blank" })
+            onChange: () => r({ ...n, target: d === "_blank" ? "_self" : "_blank" })
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "pt-1 text-xs", children: l("Open in new tab") })
@@ -5132,8 +5131,8 @@ const DataBindingSelector = ({
       ]
     }
   ) });
-}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DpWQvFjm.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
-  const c = useRef(null), [u, p] = useState(!1), d = useRTEditor({
+}, RTEModal = React__default.lazy(() => import("./rte-widget-modal-DG4qh6_A.js")), RichTextEditorFieldComp = ({ blockId: o, id: n, placeholder: r, value: a, onChange: l, onBlur: i }) => {
+  const c = useRef(null), [d, p] = useState(!1), u = useRTEditor({
     blockId: o,
     value: a,
     placeholder: r,
@@ -5147,26 +5146,26 @@ const DataBindingSelector = ({
     }
   });
   useEffect(() => {
-    c.current && d && (c.current.__chaiRTE = d);
-  }, [o, d]);
+    c.current && u && (c.current.__chaiRTE = u);
+  }, [o, u]);
   const g = () => {
     p(!1);
   }, m = /* @__PURE__ */ jsxs("div", { id: `chai-rte-${n}`, ref: c, className: "mt-1 rounded-md border border-input", children: [
-    /* @__PURE__ */ jsx(RteMenubar, { editor: d, onExpand: () => p(!0) }),
+    /* @__PURE__ */ jsx(RteMenubar, { editor: u, onExpand: () => p(!0) }),
     /* @__PURE__ */ jsx(
       EditorContent,
       {
-        editor: d,
+        editor: u,
         id: n,
         placeholder: r,
-        className: `overflow-auto ${u ? "max-h-[500px] min-h-[400px]" : "max-h-[200px] min-h-[100px]"}`
+        className: `overflow-auto ${d ? "max-h-[500px] min-h-[400px]" : "max-h-[200px] min-h-[100px]"}`
       },
       n
     )
   ] });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    u && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: u, onClose: g, editor: d, rteElement: m }) }),
-    u ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: m })
+    d && /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsx(RTEModal, { isOpen: d, onClose: g, editor: u, rteElement: m }) }),
+    d ? /* @__PURE__ */ jsx("div", { children: "Open in modal" }) : /* @__PURE__ */ jsx("div", { className: "relative", children: m })
   ] });
 }, RichTextEditorField = (o) => {
   const { editingBlockId: n } = useInlineEditing(), [r, a] = useState(null), l = useSelectedBlock(), i = l == null ? void 0 : l._id;
@@ -5176,25 +5175,25 @@ const DataBindingSelector = ({
 }, SliderField = ({ formData: o, onChange: n }) => {
   const [r] = useBlocksStore(), a = useSelectedBlock(), l = useWrapperBlock(), { addCoreBlock: i } = useAddBlock(), [, c] = useSelectedBlockIds();
   if (!a && !l) return null;
-  const u = (a == null ? void 0 : a._type) === "Slider" ? a : l, p = find(r, { _parent: u == null ? void 0 : u._id, _type: "Slides" });
+  const d = (a == null ? void 0 : a._type) === "Slider" ? a : l, p = find(r, { _parent: d == null ? void 0 : d._id, _type: "Slides" });
   if (!p) return null;
-  const d = filter(r, { _parent: p == null ? void 0 : p._id, _type: "Slide" }), g = (o == null ? void 0 : o.currentSlide) || get(d, "0._id");
+  const u = filter(r, { _parent: p == null ? void 0 : p._id, _type: "Slide" }), g = (o == null ? void 0 : o.currentSlide) || get(u, "0._id");
   useEffect(() => {
     (a == null ? void 0 : a._type) === "Slide" && (o == null ? void 0 : o.currentSlide) !== (a == null ? void 0 : a._id) && n({ ...o, currentSlide: a == null ? void 0 : a._id });
   }, [a]), useEffect(() => {
-    d != null && d.length && !find(d, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(d, "0._id") });
-  }, [o, d]);
+    u != null && u.length && !find(u, { _id: o == null ? void 0 : o.currentSlide }) && n({ ...o, currentSlide: get(u, "0._id") });
+  }, [o, u]);
   const m = () => {
-    const x = findIndex(d, { _id: g });
+    const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x + 1) % d.length, y = get(d, [b, "_id"]);
+      const b = (x + 1) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
   }, h = () => {
-    const x = findIndex(d, { _id: g });
+    const x = findIndex(u, { _id: g });
     if (x > -1) {
-      const b = (x - 1 + d.length) % d.length, y = get(d, [b, "_id"]);
+      const b = (x - 1 + u.length) % u.length, y = get(u, [b, "_id"]);
       if (!y) return;
       n({ ...o, currentSlide: y }), c([y]);
     }
@@ -5211,10 +5210,10 @@ const DataBindingSelector = ({
       /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap text-center text-[10px] text-slate-500", children: g ? /* @__PURE__ */ jsxs("span", { className: "", children: [
         /* @__PURE__ */ jsxs("b", { className: "text-[12px]", children: [
           " ",
-          findIndex(d, { _id: g }) + 1
+          findIndex(u, { _id: g }) + 1
         ] }),
         "/",
-        d.length
+        u.length
       ] }) : "-" }),
       /* @__PURE__ */ jsx("button", { onClick: m, className: "rounded bg-gray-200 p-1.5 hover:opacity-80", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) }),
       /* @__PURE__ */ jsxs(
@@ -5291,15 +5290,15 @@ const DataBindingSelector = ({
     ] }) })
   ] });
 }, SourcesField = ({ formData: o, onChange: n }) => {
-  const r = get(o, "srcsets", []) || [], a = (c, u) => {
-    const p = c.target.name, d = c.target.value;
+  const r = get(o, "srcsets", []) || [], a = (c, d) => {
+    const p = c.target.name, u = c.target.value;
     n({
-      srcsets: map(r, (g, m) => m === u ? { ...g, [p]: d } : g)
+      srcsets: map(r, (g, m) => m === d ? { ...g, [p]: u } : g)
     });
   }, l = () => {
     n({ srcsets: [...r, {}] });
   }, i = (c) => {
-    n({ srcsets: reject(r, (u, p) => p === c) });
+    n({ srcsets: reject(r, (d, p) => p === c) });
   };
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
@@ -5314,12 +5313,12 @@ const DataBindingSelector = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: r.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-gray-200 p-2 text-xs italic text-gray-500", children: "Add additional sources to create responsive videos" }) : map(r, (c, u) => /* @__PURE__ */ jsxs("div", { className: "group relative space-y-1.5 rounded border border-gray-200 px-2 pb-1.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: r.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded border border-dashed border-gray-200 p-2 text-xs italic text-gray-500", children: "Add additional sources to create responsive videos" }) : map(r, (c, d) => /* @__PURE__ */ jsxs("div", { className: "group relative space-y-1.5 rounded border border-gray-200 px-2 pb-1.5", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          onClick: () => i(u),
+          onClick: () => i(d),
           className: "absolute -right-px -top-0 -translate-y-1/2 rounded-full bg-red-100 p-1 opacity-0 hover:bg-red-200 group-hover:opacity-100",
           children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-2.5 w-2.5 text-red-500" })
         }
@@ -5333,7 +5332,7 @@ const DataBindingSelector = ({
             placeholder: "Enter width (in px)",
             type: "number",
             value: get(c, "width"),
-            onChange: (p) => a(p, u),
+            onChange: (p) => a(p, d),
             className: "!placeholder:text-gray-100 !mt-0 !rounded-none !border-0 !p-0 !text-xs"
           }
         )
@@ -5347,16 +5346,16 @@ const DataBindingSelector = ({
             placeholder: "Enter url",
             className: "!mt-0 !rounded-none !border-0 !p-0 !text-xs !shadow-none",
             value: get(c, "url", ""),
-            onChange: (p) => a(p, u)
+            onChange: (p) => a(p, d)
           }
         )
       ] })
-    ] }, u)) })
+    ] }, d)) })
   ] });
 }, CodeEditor = ({ id: o, placeholder: n }) => {
   const { t: r } = useTranslation(), [, a] = useCodeEditor(), l = useSelectedBlock();
   if (typeof window > "u") return null;
-  const i = o.replace("root.", ""), c = get(l, i, ""), u = () => {
+  const i = o.replace("root.", ""), c = get(l, i, ""), d = () => {
     const p = l == null ? void 0 : l._id;
     a({ blockId: p, blockProp: i, placeholder: n, initialCode: get(l, i, c) });
   };
@@ -5364,35 +5363,35 @@ const DataBindingSelector = ({
     /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: u,
+        onClick: d,
         className: "w-[90%] max-w-full cursor-default truncate text-pretty rounded border border-border bg-background p-2 text-left text-[10px]",
         children: c.trim().length > 0 ? c.substring(0, 46) : n || "Eg: <script>console.log('Hello, world!');<\/script>"
       }
     ),
-    /* @__PURE__ */ jsx(Button, { onClick: u, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
+    /* @__PURE__ */ jsx(Button, { onClick: d, size: "sm", variant: "outline", className: "w-fit", children: r("Open code editor") })
   ] });
 }, CollectionFilterSortField = ({ id: o, value: n, onChange: r, onBlur: a }) => {
-  const l = useBuilderProp("collections", []), i = useSelectedBlock(), c = get(i, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1").replace(COLLECTION_PREFIX, ""), u = find(l, { id: c }), d = get(u, o === "root.filter" ? "filters" : "sorts", []);
+  const l = useBuilderProp("collections", []), i = useSelectedBlock(), c = get(i, "repeaterItems", "").replace(/\{\{(.*)\}\}/g, "$1").replace(COLLECTION_PREFIX, ""), d = find(l, { id: c }), u = get(d, o === "root.filter" ? "filters" : "sorts", []);
   return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("select", { value: n, onChange: (g) => r(g.target.value), onBlur: (g) => a(o, g.target.value), children: [
     /* @__PURE__ */ jsx("option", { value: "", children: "Select" }),
-    d.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
+    u.map((g) => /* @__PURE__ */ jsx("option", { value: g.id, children: g.name }, g.id))
   ] }) });
 }, JSONFormFieldTemplate = (o) => {
-  const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: u, required: p, schema: d, formData: g, onChange: m } = o, { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), b = useMemo(
+  const { id: n, classNames: r, label: a, children: l, errors: i, help: c, hidden: d, required: p, schema: u, formData: g, onChange: m } = o, { selectedLang: h, fallbackLang: f, languages: x } = useLanguages(), b = useMemo(
     () => isEmpty(x) ? "" : isEmpty(h) ? f : h,
     [x, h, f]
-  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), C = usePageExternalData(), S = useSelectedBlock(), w = useRegisteredChaiBlocks(), _ = useMemo(
-    () => get(w, [S == null ? void 0 : S._type, "i18nProps"], []),
-    [w, S == null ? void 0 : S._type]
+  ), y = useMemo(() => get(LANGUAGES, b, b), [b]), S = usePageExternalData(), C = useSelectedBlock(), v = useRegisteredChaiBlocks(), _ = useMemo(
+    () => get(v, [C == null ? void 0 : C._type, "i18nProps"], []),
+    [v, C == null ? void 0 : C._type]
   ), [B, I] = useState(null);
-  if (u)
+  if (d)
     return null;
-  if (d.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
+  if (u.type === "boolean") return /* @__PURE__ */ jsx("div", { className: r, children: l });
   const A = _ == null ? void 0 : _.includes(n.replace("root.", ""));
-  if (d.type === "array") {
+  if (u.type === "array") {
     const j = B === n;
     return /* @__PURE__ */ jsxs("div", { className: `${r} relative`, children: [
-      d.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
+      u.title && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-1", children: /* @__PURE__ */ jsxs(
         "label",
         {
           htmlFor: n,
@@ -5404,7 +5403,7 @@ const DataBindingSelector = ({
             /* @__PURE__ */ jsx("span", { className: "leading-tight", children: a }),
             " ",
             /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[9px] font-medium text-slate-600", children: g == null ? void 0 : g.length }) }),
-            d.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
               /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
                 InfoCircledIcon,
                 {
@@ -5413,7 +5412,7 @@ const DataBindingSelector = ({
                   onMouseDown: (N) => N.stopPropagation()
                 }
               ) }),
-              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: d.description })
+              /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
             ] }) })
           ]
         }
@@ -5425,25 +5424,25 @@ const DataBindingSelector = ({
       ] })
     ] });
   }
-  const v = n.replace("root.", ""), E = _.includes(v) && !isEmpty(h) && isEmpty(g);
+  const w = n.replace("root.", ""), E = _.includes(w) && !isEmpty(h) && isEmpty(g);
   return /* @__PURE__ */ jsxs("div", { className: r, children: [
-    d.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    u.title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: n, className: d.type === "object" ? "pb-2" : "", children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: n, className: u.type === "object" ? "pb-2" : "", children: [
           a,
           " ",
           A && /* @__PURE__ */ jsxs("small", { className: "text-[9px] text-zinc-400", children: [
             " ",
             y
           ] }),
-          p && d.type !== "object" ? " *" : null
+          p && u.type !== "object" ? " *" : null
         ] }),
-        d.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+        u.description && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(InfoCircledIcon, { className: "h-3 w-3 text-muted-foreground/70" }) }),
-          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: d.description })
+          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs", children: u.description })
         ] }) })
       ] }),
-      !d.enum && !d.oneOf && C && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
+      !u.enum && !u.oneOf && S && /* @__PURE__ */ jsxs("span", { className: "flex items-center space-x-1", children: [
         E ? /* @__PURE__ */ jsxs(Tooltip, { children: [
           /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
             "svg",
@@ -5474,7 +5473,7 @@ const DataBindingSelector = ({
         /* @__PURE__ */ jsx(
           DataBindingSelector,
           {
-            schema: d,
+            schema: u,
             onChange: (j) => {
               m(j, g, n);
             },
@@ -5525,7 +5524,7 @@ const DataBindingSelector = ({
   " ",
   /* @__PURE__ */ jsx("span", { children: "Add" })
 ] }) }), JSONForm = memo(({ blockId: o, schema: n, uiSchema: r, formData: a, onChange: l }) => {
-  const { selectedLang: i } = useLanguages(), c = useBlockSettingComponents("widget"), u = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), d = useThrottledCallback(
+  const { selectedLang: i } = useLanguages(), c = useBlockSettingComponents("widget"), d = useBlockSettingComponents("field"), p = useBlockSettingComponents("template"), u = useThrottledCallback(
     async ({ formData: g }, m) => {
       get(g, m) === void 0 && set(g, m, ""), l({ formData: g }, m);
     },
@@ -5550,7 +5549,7 @@ const DataBindingSelector = ({
         link: LinkField,
         slider: SliderField,
         sources: SourcesField,
-        ...u
+        ...d
       },
       templates: {
         FieldTemplate: JSONFormFieldTemplate,
@@ -5571,7 +5570,7 @@ const DataBindingSelector = ({
       onChange: ({ formData: g }, m) => {
         if (!m || o !== (g == null ? void 0 : g._id)) return;
         const h = take(m.split("."), 2).join(".").replace("root.", "");
-        d({ formData: g }, h);
+        u({ formData: g }, h);
       }
     },
     i
@@ -5583,18 +5582,18 @@ const DataBindingSelector = ({
   }), a;
 };
 function BlockSettings() {
-  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, u] = useState(i), [p, d] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: B }, I, k) => {
+  const { selectedLang: o } = useLanguages(), n = useSelectedBlock(), r = useUpdateBlocksPropsRealtime(), a = useUpdateBlocksProps(), l = getRegisteredChaiBlock(n == null ? void 0 : n._type), i = formDataWithSelectedLang(n, o, l), [c, d] = useState(i), [p, u] = useState(!1), g = useWrapperBlock(), m = getRegisteredChaiBlock(g == null ? void 0 : g._type), h = formDataWithSelectedLang(g, o, m), f = ({ formData: B }, I, k) => {
     I && (c == null ? void 0 : c._id) === n._id && a([n._id], { [I]: get(B, I) }, k);
   }, x = useCallback(
     debounce(({ formData: B }, I, k) => {
-      f({ formData: B }, I, k), u(B);
+      f({ formData: B }, I, k), d(B);
     }, 1500),
     [n == null ? void 0 : n._id, o]
   ), b = ({ formData: B }, I) => {
     I && (r([n._id], { [I]: get(B, I) }), x({ formData: B }, I, { [I]: get(c, I) }));
   }, y = ({ formData: B }, I) => {
     I && (r([g._id], { [I]: get(B, I) }), x({ formData: B }, I, { [I]: get(c, I) }));
-  }, { schema: C, uiSchema: S } = useMemo(() => {
+  }, { schema: S, uiSchema: C } = useMemo(() => {
     const B = n == null ? void 0 : n._type;
     if (!B)
       return { schema: {}, uiSchema: {} };
@@ -5608,7 +5607,7 @@ function BlockSettings() {
     } catch {
       return { schema: {}, uiSchema: {} };
     }
-  }, [n]), { wrapperSchema: w, wrapperUiSchema: _ } = useMemo(() => {
+  }, [n]), { wrapperSchema: v, wrapperUiSchema: _ } = useMemo(() => {
     if (!g || !(g != null && g._type))
       return { wrapperSchema: {}, wrapperUiSchema: {} };
     const B = g == null ? void 0 : g._type, { schema: I = {}, uiSchema: k = {} } = getBlockFormSchemas(B);
@@ -5619,7 +5618,7 @@ function BlockSettings() {
       /* @__PURE__ */ jsxs(
         "div",
         {
-          onClick: () => d((B) => !B),
+          onClick: () => u((B) => !B),
           className: "flex cursor-pointer items-center gap-x-1 py-2 text-xs font-medium leading-tight hover:bg-slate-100",
           children: [
             p ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4 text-slate-400" }),
@@ -5640,19 +5639,19 @@ function BlockSettings() {
           blockId: g == null ? void 0 : g._id,
           onChange: y,
           formData: h,
-          schema: w,
+          schema: v,
           uiSchema: _
         }
       ) })
     ] }),
-    isEmpty(C) ? null : /* @__PURE__ */ jsx(
+    isEmpty(S) ? null : /* @__PURE__ */ jsx(
       JSONForm,
       {
         blockId: n == null ? void 0 : n._id,
         onChange: b,
         formData: i,
-        schema: C,
-        uiSchema: S
+        schema: S,
+        uiSchema: C
       }
     )
   ] });
@@ -5663,7 +5662,7 @@ const BlockStylingProps = () => {
   if (!o) return null;
   const c = Object.keys(o).filter(
     (x) => typeof o[x] == "string" && o[x].startsWith("#styles:")
-  ), { reset: u } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, d = get(o, (f = n[0]) == null ? void 0 : f.prop, ""), { classes: g = "" } = getSplitChaiClasses(d) || {}, m = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], h = (x) => find(n, (b) => b.prop === x);
+  ), { reset: d } = useResetBlockStyles(), p = !isEmpty(c) && c.length > 1, u = get(o, (f = n[0]) == null ? void 0 : f.prop, ""), { classes: g = "" } = getSplitChaiClasses(u) || {}, m = g ? g.split(" ").filter((x) => !isEmpty(x)) : [], h = (x) => find(n, (b) => b.prop === x);
   return /* @__PURE__ */ jsx(Fragment, { children: p && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
     /* @__PURE__ */ jsxs("label", { htmlFor: "block-styling-props", className: "py-1 text-xs", children: [
       i("Style element"),
@@ -5695,7 +5694,7 @@ const BlockStylingProps = () => {
                 {
                   className: "text-xs",
                   onClick: () => {
-                    u(x);
+                    d(x);
                   },
                   children: i("Reset style")
                 }
@@ -5827,13 +5826,13 @@ const BlockStylingProps = () => {
   negative: i,
   cssProperty: c
 }) => {
-  const { setDragData: u } = useContext(BlockSettingsContext);
+  const { setDragData: d } = useContext(BlockSettingsContext);
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onMouseDown: (p) => {
-        const d = {
+        const u = {
           onDrag: r,
           onDragEnd: a,
           dragging: !0,
@@ -5843,7 +5842,7 @@ const BlockStylingProps = () => {
           negative: i,
           cssProperty: c
         };
-        l(d), u(d);
+        l(u), d(u);
       },
       color: void 0,
       className: "relative z-50 ml-1 hidden h-6 cursor-row-resize rounded bg-background/70 px-2 group-hover:inline",
@@ -5863,50 +5862,50 @@ const BlockStylingProps = () => {
   },
   a
 )) }), THROTTLE_TIME = 50, AdvanceChoices = (o) => {
-  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: u, cssProperty: p, units: d, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : d[0]), [f, x] = useState(!1), [b, y] = useState(""), [C, S] = useState(!1), [w, _] = useState(!1);
+  const [n, r] = useState(!1), [a, l] = useState(""), { currentClass: i, onChange: c, classPrefix: d, cssProperty: p, units: u, negative: g } = o, [m, h] = useState(p != null && p.toLowerCase().includes("width") ? "%" : u[0]), [f, x] = useState(!1), [b, y] = useState(""), [S, C] = useState(!1), [v, _] = useState(!1);
   useEffect(() => {
-    const { value: v, unit: E } = getClassValueAndUnit(i);
+    const { value: w, unit: E } = getClassValueAndUnit(i);
     if (E === "") {
-      l(v), h(p != null && p.toLowerCase().includes("width") ? "%" : first(d));
+      l(w), h(p != null && p.toLowerCase().includes("width") ? "%" : first(u));
       return;
     }
-    h(E), l(E === "class" || isEmpty(v) ? "" : v);
-  }, [i, p, d]);
-  const B = useThrottledCallback((v) => c(v), [c], THROTTLE_TIME), I = useThrottledCallback((v) => c(v, !1), [c], THROTTLE_TIME), k = useCallback(
-    (v = !1) => {
-      const E = getUserInputValues(`${a}`, d);
+    h(E), l(E === "class" || isEmpty(w) ? "" : w);
+  }, [i, p, u]);
+  const B = useThrottledCallback((w) => c(w), [c], THROTTLE_TIME), I = useThrottledCallback((w) => c(w, !1), [c], THROTTLE_TIME), k = useCallback(
+    (w = !1) => {
+      const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
         x(!0);
         return;
       }
       const j = get(E, "unit") !== "" ? get(E, "unit") : m;
       if (j === "auto" || j === "none") {
-        B(`${u}${j}`);
+        B(`${d}${j}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${u}[${get(E, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
-      v ? I(T) : B(T);
+      const T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      w ? I(T) : B(T);
     },
-    [B, I, a, m, u, d]
+    [B, I, a, m, d, u]
   ), A = useCallback(
-    (v) => {
-      const E = getUserInputValues(`${a}`, d);
+    (w) => {
+      const E = getUserInputValues(`${a}`, u);
       if (get(E, "error", !1)) {
         x(!0);
         return;
       }
-      if (v === "auto" || v === "none") {
-        B(`${u}${v}`);
+      if (w === "auto" || w === "none") {
+        B(`${d}${w}`);
         return;
       }
       if (get(E, "value") === "")
         return;
-      const j = get(E, "unit") !== "" ? get(E, "unit") : v, T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${u}[${get(E, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
+      const j = get(E, "unit") !== "" ? get(E, "unit") : w, T = `${get(E, "value", "").startsWith("-") ? "-" : ""}${d}[${get(E, "value", "").replace("-", "")}${j === "-" ? "" : j}]`;
       B(T);
     },
-    [B, a, u, d]
+    [B, a, d, u]
   );
   return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start", children: m === "class" ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -5921,37 +5920,37 @@ const BlockStylingProps = () => {
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("button", { type: "button", className: "invisible ml-3 mt-1 text-blue-600 group-hover:visible", children: /* @__PURE__ */ jsx(InfoCircledIcon, {}) }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: "Current value is using a Tailwind preset class." })
     ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${C ? "z-auto" : ""}`, children: [
+  ] }) : /* @__PURE__ */ jsxs("div", { className: `group relative flex items-center ${S ? "z-auto" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md border border-border", children: [
       ["none", "auto"].indexOf(m) !== -1 ? null : /* @__PURE__ */ jsx(
         "input",
         {
           readOnly: m === "class",
-          onKeyPress: (v) => {
-            v.key === "Enter" && k();
+          onKeyPress: (w) => {
+            w.key === "Enter" && k();
           },
-          onKeyDown: (v) => {
-            if (v.keyCode !== 38 && v.keyCode !== 40)
+          onKeyDown: (w) => {
+            if (w.keyCode !== 38 && w.keyCode !== 40)
               return;
-            v.preventDefault(), _(!0);
-            const E = parseInt$1(v.target.value);
+            w.preventDefault(), _(!0);
+            const E = parseInt$1(w.target.value);
             let j = isNaN$1(E) ? 0 : E;
-            v.keyCode === 38 && (j += 1), v.keyCode === 40 && (j -= 1);
-            const N = `${j}`, P = `${N.startsWith("-") ? "-" : ""}${u}[${N.replace("-", "")}${m === "-" ? "" : m}]`;
+            w.keyCode === 38 && (j += 1), w.keyCode === 40 && (j -= 1);
+            const N = `${j}`, P = `${N.startsWith("-") ? "-" : ""}${d}[${N.replace("-", "")}${m === "-" ? "" : m}]`;
             I(P);
           },
-          onKeyUp: (v) => {
-            w && (v.preventDefault(), _(!1));
+          onKeyUp: (w) => {
+            v && (w.preventDefault(), _(!1));
           },
           onBlur: () => k(),
-          onChange: (v) => {
-            x(!1), l(v.target.value);
+          onChange: (w) => {
+            x(!1), l(w.target.value);
           },
-          onClick: (v) => {
+          onClick: (w) => {
             var E;
-            (E = v == null ? void 0 : v.target) == null || E.select(), r(!1);
+            (E = w == null ? void 0 : w.target) == null || E.select(), r(!1);
           },
-          value: C ? b : a,
+          value: S ? b : a,
           className: "h-6 w-14 rounded rounded-r-none border border-transparent bg-background pl-2 text-sm focus-visible:outline-0".concat(
             " ",
             f ? "border-red-500 text-red-500" : "border-foreground/20"
@@ -5966,38 +5965,38 @@ const BlockStylingProps = () => {
             onClick: () => r(!n),
             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__ */ jsx("span", { className: `inline-block ${d.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
-              d.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
+              /* @__PURE__ */ jsx("span", { className: `inline-block ${u.length === 1 ? "px-2 font-semibold" : ""}`, children: m }),
+              u.length > 1 ? /* @__PURE__ */ jsx(TriangleDownIcon, {}) : null
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(TooltipContent, { className: "bg-background", children: /* @__PURE__ */ jsx(
           UnitSelection,
           {
-            units: d,
+            units: u,
             current: m,
-            onSelect: (v) => {
-              r(!1), h(v), A(v);
+            onSelect: (w) => {
+              r(!1), h(w), A(w);
             }
           }
         ) })
       ] })
     ] }),
-    ["none", "auto"].indexOf(m) !== -1 || C ? null : /* @__PURE__ */ jsx(
+    ["none", "auto"].indexOf(m) !== -1 || S ? null : /* @__PURE__ */ jsx(
       DragStyleButton,
       {
-        onDragStart: () => S(!0),
-        onDragEnd: (v) => {
-          if (y(() => ""), S(!1), isEmpty(v))
+        onDragStart: () => C(!0),
+        onDragEnd: (w) => {
+          if (y(() => ""), C(!1), isEmpty(w))
             return;
-          const E = `${v}`, N = `${E.startsWith("-") ? "-" : ""}${u}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          const E = `${w}`, N = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
           B(N);
         },
-        onDrag: (v) => {
-          if (isEmpty(v))
+        onDrag: (w) => {
+          if (isEmpty(w))
             return;
-          y(v);
-          const E = `${v}`, N = `${E.startsWith("-") ? "-" : ""}${u}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
+          y(w);
+          const E = `${w}`, N = `${E.startsWith("-") ? "-" : ""}${d}[${E.replace("-", "")}${m === "-" ? "" : m}]`;
           I(N);
         },
         currentValue: a,
@@ -6011,7 +6010,7 @@ const BlockStylingProps = () => {
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   /* @__PURE__ */ jsx(StyleContext.Provider, { value: { canReset: n, canChange: r }, children: o })
 ), DropDownChoices = ({ label: o, property: n, onChange: r }) => {
-  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: u } = useContext(StyleContext), p = /\[.*\]/g.test(c);
+  const { getClasses: a } = useTailwindClassList(), l = a(n), i = useCurrentClassByProperty(n), c = useMemo(() => get(i, "cls", ""), [i]), { canChange: d } = useContext(StyleContext), p = /\[.*\]/g.test(c);
   return /* @__PURE__ */ jsx("div", { className: o ? "w-full rounded" : "grow", children: p ? /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsx(Input$1, { className: "w-[70%] rounded py-1", readOnly: !0, value: c }),
     /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
@@ -6022,15 +6021,15 @@ const BlockStylingProps = () => {
     DropDown,
     {
       rounded: o,
-      onChange: (d) => r(d, n),
+      onChange: (u) => r(u, n),
       selected: c,
       options: l,
-      disabled: !u
+      disabled: !d
     }
   ) });
 };
 function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disabled: l = !1 }) {
-  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: u } = useUndoManager();
+  const i = o.replace(/.*:/g, "").trim(), { undo: c, redo: d } = useUndoManager();
   return /* @__PURE__ */ jsxs(
     "select",
     {
@@ -6038,12 +6037,12 @@ function DropDown({ selected: o, onChange: n, rounded: r = !1, options: a, disab
       className: `${r ? "rounded-md border border-border" : "border-0"} disable:bg-gray-500 h-full w-full truncate rounded bg-background px-2 py-1 text-xs outline-none disabled:cursor-not-allowed`,
       onChange: (p) => n(p.target.value),
       onKeyDown: (p) => {
-        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && u());
+        p.ctrlKey && (p.key === "z" && c(), p.key === "y" && d());
       },
       value: i,
       children: [
         /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: "" }),
-        a.map((p, d) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }, `option-${d}`))
+        a.map((p, u) => /* @__PURE__ */ jsx("option", { className: "bg-transparent", value: p, children: p }, `option-${u}`))
       ]
     }
   );
@@ -6061,7 +6060,7 @@ const COLOR_PROP = {
   ringColor: "ring",
   ringOffsetColor: "ring-offset"
 }, ColorChoice = ({ property: o, onChange: n }) => {
-  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [u, p] = useState({ color: "", shade: "" }), d = a.split("-"), g = get(d, "1", ""), m = get(d, "2", ""), h = useCallback(
+  const r = useCurrentClassByProperty(o), a = useMemo(() => get(r, "cls", ""), [r]), { canChange: l } = useContext(StyleContext), [i, c] = useState([]), [d, p] = useState({ color: "", shade: "" }), u = a.split("-"), g = get(u, "1", ""), m = get(u, "2", ""), h = useCallback(
     // eslint-disable-next-line no-shadow
     (b) => {
       ["current", "inherit", "transparent", "black", "white"].includes(b) ? (c([]), p({ color: b })) : (c(["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]), p((y) => ({ ...y, color: b, shade: y.shade ? y.shade : "500" })));
@@ -6085,9 +6084,9 @@ const COLOR_PROP = {
   }, [r]);
   const { match: x } = useTailwindClassList();
   return useEffect(() => {
-    const y = `${get(COLOR_PROP, o, "")}-${u.color}${u.shade ? `-${u.shade}` : ""}`;
+    const y = `${get(COLOR_PROP, o, "")}-${d.color}${d.shade ? `-${d.shade}` : ""}`;
     x(o, y) && n(y, o);
-  }, [x, u, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
+  }, [x, d, n, o]), /* @__PURE__ */ jsxs("div", { className: "flex flex-row divide-x divide-solid divide-border rounded-lg border border-transparent text-xs", children: [
     /* @__PURE__ */ jsx("div", { className: "grow text-center", children: /* @__PURE__ */ jsx(
       DropDown,
       {
@@ -6325,29 +6324,29 @@ const COLOR_PROP = {
   static: Cross1Icon
 }, IconChoices = ({ property: o, onChange: n }) => {
   const { getClasses: r } = useTailwindClassList(), a = r(o), { canChange: l } = useContext(StyleContext), i = useCurrentClassByProperty(o), c = useMemo(() => get(i, "cls", ""), [i]);
-  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (u) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex grow flex-wrap gap-1", children: map(a, (d) => /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         disabled: !l,
-        onClick: () => n(u, o),
-        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${c === u ? "bg-primary text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
-        children: React__default.createElement(get(EDITOR_ICONS, u, BoxIcon))
+        onClick: () => n(d, o),
+        className: `cursor-pointer rounded border border-border p-1 disabled:cursor-not-allowed ${c === d ? "bg-primary text-white" : "disabled:bg-gray-600 disabled:text-gray-400"}`,
+        children: React__default.createElement(get(EDITOR_ICONS, d, BoxIcon))
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(u)) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: startCase(toLower(d)) })
   ] })) });
 }, RangeChoices = ({ property: o, onChange: n }) => {
-  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: c } = useTailwindClassList(), u = c(o, [""]), p = u.indexOf(i) > -1 ? u.indexOf(i) : 0, d = /\[.*\]/g.test(i);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: d ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: i }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  const { canReset: r, canChange: a } = useContext(StyleContext), l = useCurrentClassByProperty(o), i = useMemo(() => get(l, "cls", ""), [l]), { getClasses: c } = useTailwindClassList(), d = c(o, [""]), p = d.indexOf(i) > -1 ? d.indexOf(i) : 0, u = /\[.*\]/g.test(i);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row divide-x divide-solid divide-border rounded border border-border text-xs", children: u ? /* @__PURE__ */ jsx("div", { className: "px-2 py-[5px]", children: i }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         className: "hover:bg-bg-gray-700 box-border w-2/12 rounded-bl rounded-tl bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
         disabled: !a && (!r || p - 1 < 0),
-        onClick: () => n(nth(u, p - 1), o),
+        onClick: () => n(nth(d, p - 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           MinusIcon,
           {
@@ -6362,12 +6361,12 @@ const COLOR_PROP = {
       {
         type: "button",
         className: "hover:bg-bg-gray-700 w-2/12 rounded-br rounded-tr bg-background px-1 text-center disabled:cursor-not-allowed disabled:bg-gray-600",
-        disabled: !a && (!r || p + 1 >= u.length),
-        onClick: () => n(nth(u, p + 1), o),
+        disabled: !a && (!r || p + 1 >= d.length),
+        onClick: () => n(nth(d, p + 1), o),
         children: /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
           PlusIcon,
           {
-            className: !a && (!r || p + 1 >= u.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
+            className: !a && (!r || p + 1 >= d.length) ? "text-gray-500" : "text-black/60 dark:text-white/60"
           }
         ) })
       }
@@ -6461,23 +6460,23 @@ const COLOR_PROP = {
   "2xl": "1536px"
 }, getBreakpoint = (o) => `${o.toUpperCase()} ${BREAKPOINTS[o] ? `(${BREAKPOINTS[o]} & up)` : ""}`, BlockStyle = (o) => {
   const { t: n } = useTranslation(), { type: r = "icons", label: a, property: l, onEmitChange: i = () => {
-  }, units: c, negative: u = !1 } = o, [p] = useDarkMode(), [d] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
+  }, units: c, negative: d = !1 } = o, [p] = useDarkMode(), [u] = useStylingState(), [, g] = useScreenSizeWidth(), m = useCurrentClassByProperty(l), h = useAddClassesToBlocks(), f = useRemoveClassesFromBlocks(), [x] = useSelectedBlockIds(), b = useMemo(() => get(m, "fullCls", ""), [m]), y = useCallback(
     (I, k = !0) => {
-      const A = { dark: p, mq: g, mod: d, cls: I, property: l, fullCls: "" };
-      (p || d !== "") && (A.mq = "xs");
-      const v = generateFullClsName(A);
-      h(x, [v], k);
+      const A = { dark: p, mq: g, mod: u, cls: I, property: l, fullCls: "" };
+      (p || u !== "") && (A.mq = "xs");
+      const w = generateFullClsName(A);
+      h(x, [w], k);
     },
-    [x, p, g, d, l, h]
-  ), C = useCallback(() => {
+    [x, p, g, u, l, h]
+  ), S = useCallback(() => {
     f(x, [b], !0);
-  }, [x, b, f]), S = useMemo(() => canChangeClass(m, g), [m, g]);
+  }, [x, b, f]), C = useMemo(() => canChangeClass(m, g), [m, g]);
   useEffect(() => {
-    i(S, m);
-  }, [S, i, m]);
-  const [, , w] = useScreenSizeWidth(), _ = useCallback(
+    i(C, m);
+  }, [C, i, m]);
+  const [, , v] = useScreenSizeWidth(), _ = useCallback(
     (I) => {
-      w({
+      v({
         xs: 400,
         sm: 640,
         md: 800,
@@ -6486,9 +6485,9 @@ const COLOR_PROP = {
         "2xl": 1920
       }[I]);
     },
-    [w]
-  ), B = get(m, "dark", null) === p && get(m, "mod", null) === d && get(m, "mq", null) === g;
-  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: S, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
+    [v]
+  ), B = get(m, "dark", null) === p && get(m, "mod", null) === u && get(m, "mq", null) === g;
+  return /* @__PURE__ */ jsx(BlockStyleProvider, { canChange: C, canReset: m && B, children: /* @__PURE__ */ jsxs("div", { className: "group flex flex-row items-center py-2 first:pt-0 last:pb-0", children: [
     /* @__PURE__ */ jsx("div", { className: "relative w-[70px] truncate text-xs text-foreground", children: /* @__PURE__ */ jsx("span", { className: `text-[11px] ${m && !B ? "text-foreground" : ""}`, children: n(a) }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-[150px]", children: [
@@ -6499,7 +6498,7 @@ const COLOR_PROP = {
             classPrefix: get(CLASS_PREFIXES, l, ""),
             units: c || [],
             onChange: y,
-            negative: u,
+            negative: d,
             cssProperty: l
           }
         ) : null,
@@ -6508,7 +6507,7 @@ const COLOR_PROP = {
         r === "color" && /* @__PURE__ */ jsx(ColorChoice, { property: l, onChange: y }),
         r === "dropdown" && /* @__PURE__ */ jsx(DropDownChoices, { label: a, property: l, onChange: y })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => C(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : S && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
+      /* @__PURE__ */ jsx("div", { className: `w-[30px] cursor-pointer ${b ? "visible" : "invisible"}`, children: B ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => S(), title: "Reset", className: "flex px-1.5 text-xs", children: /* @__PURE__ */ jsx(CrossCircledIcon, { className: "h-5 w-5 text-blue-500 hover:opacity-80" }) }) : C && m ? /* @__PURE__ */ jsxs(Tooltip, { delayDuration: 100, children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -6549,20 +6548,20 @@ const COLOR_PROP = {
   units: i = basicUnits,
   negative: c = !1
 }) => {
-  const { t: u } = useTranslation(), [p, d] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((h) => map(g, "property").includes(h), [g]);
+  const { t: d } = useTranslation(), [p, u] = useState(n[0].key), g = useSelectedBlockCurrentClasses(), m = useCallback((h) => map(g, "property").includes(h), [g]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: `mb-2 border-border py-2 first:pt-0 last:pb-0 ${r ? "border-b" : ""} ${a ? "border-t" : ""}`,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row text-xs", children: [
-          o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: u(o) }),
+          o && /* @__PURE__ */ jsx("span", { className: "relative w-[70px] flex-none text-xs text-foreground", children: d(o) }),
           /* @__PURE__ */ jsx("div", { className: "mb-3 flex grow flex-row flex-wrap gap-x-px", children: n.map(({ label: h, key: f }, x) => /* @__PURE__ */ jsx("div", { className: "first:rounded-l last:rounded-r", children: /* @__PURE__ */ jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => d(f),
+                onClick: () => u(f),
                 className: `relative cursor-pointer rounded-full p-1 text-[8px] ${f === p ? "bg-[#3E57F0] text-white" : "text-gray-600 dark:text-gray-300"}`,
                 children: [
                   React__default.createElement("div", {
@@ -6591,11 +6590,11 @@ const COLOR_PROP = {
 }, NestedOptions = ({ heading: o, items: n }) => {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useMemo(() => {
     const i = (p) => flatten(
-      p.map((d) => d.styleType === "multiple" ? map(d.options, "key") : d.property)
+      p.map((u) => u.styleType === "multiple" ? map(u.options, "key") : u.property)
     ), c = flatten(
       n.map((p) => p.styleType === "accordion" ? i(p.items) : p.styleType === "multiple" ? map(p.options, "key") : p.property)
-    ), u = map(a, "property");
-    return intersection(c, u).length > 0;
+    ), d = map(a, "property");
+    return intersection(c, d).length > 0;
   }, [a, n]);
   return /* @__PURE__ */ jsxs("details", { children: [
     /* @__PURE__ */ jsx("summary", { className: "my-px cursor-default rounded-md bg-gray-50 p-px px-2 text-[11px] text-foreground dark:bg-gray-800", children: /* @__PURE__ */ jsxs("div", { className: "inline", children: [
@@ -6612,12 +6611,12 @@ const COLOR_PROP = {
 }, SectionContext = createContext({}), StylingGroup = ({ section: o, showAccordian: n }) => {
   const { t: r } = useTranslation(), a = useSelectedBlockCurrentClasses(), l = useCallback(
     (c = []) => {
-      const u = {};
-      for (let d = 0; d < a.length; d++)
-        u[a[d].property] = a[d].cls;
+      const d = {};
+      for (let u = 0; u < a.length; u++)
+        d[a[u].property] = a[u].cls;
       let p = !0;
-      for (const d in c)
-        if (!has(u, d) || u[d] !== c[d]) {
+      for (const u in c)
+        if (!has(d, u) || d[u] !== c[u]) {
           p = !1;
           break;
         }
@@ -6628,7 +6627,7 @@ const COLOR_PROP = {
   return /* @__PURE__ */ jsx(SectionContext.Provider, { value: i, children: n ? /* @__PURE__ */ jsxs(AccordionItem, { value: o.heading, className: "border-none", children: [
     /* @__PURE__ */ jsx(AccordionTrigger, { className: "border-slate-150 border-t py-2 text-xs", children: /* @__PURE__ */ jsx("div", { className: "flex items-center py-2", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-2 text-xs font-medium", children: startCase(r(o.heading)) }) }) }),
     /* @__PURE__ */ jsx(AccordionContent, { className: "py-2", children: o.items.map((c) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices") : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options") : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style")) })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c, u) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices" + u) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options" + u) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style" + u)) }) });
+  ] }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: o.items.map((c, d) => has(c, "component") ? React__default.createElement(c.component, { key: c.label }) : has(c, "styleType") ? c.styleType === "multiple" ? /* @__PURE__ */ jsx(MultipleChoices, { ...c }, c.label + "multiple-choices" + d) : c.styleType === "accordion" && l(c == null ? void 0 : c.conditions) ? /* @__PURE__ */ jsx(NestedOptions, { ...c }, c.label + "nested-options" + d) : null : /* @__PURE__ */ jsx(BlockStyle, { ...c }, c.label + "block-style" + d)) }) });
 }, TabletIcon = ({ landscape: o = !1, className: n = "" }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -6691,30 +6690,32 @@ const COLOR_PROP = {
   content: l,
   currentBreakpoint: i,
   breakpoint: c,
-  width: u,
+  width: d,
   icon: p,
-  onClick: d
+  onClick: u,
+  buttonClass: g = "",
+  activeButtonClass: m = ""
 }) => {
-  const { t: g } = useTranslation();
+  const { t: h } = useTranslation();
   return r ? /* @__PURE__ */ jsxs(HoverCard, { openDelay: n, children: [
     /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(
       Button,
       {
-        onClick: () => d(u),
+        onClick: () => u(d),
         size: "sm",
-        className: "h-7 w-7 rounded-md p-1",
+        className: cn$1("h-7 w-7 rounded-md p-1", c === i ? m : g),
         variant: c === i ? "outline" : "ghost",
         children: p
       }
     ) }),
     /* @__PURE__ */ jsx(HoverCardContent, { className: "w-fit max-w-52 border-border", children: /* @__PURE__ */ jsx("div", { className: "flex justify-between space-x-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: g(a) }),
-      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: g(l) })
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold", children: h(a) }),
+      o && /* @__PURE__ */ jsx("p", { className: "text-xs", children: h(l) })
     ] }) }) })
   ] }) : /* @__PURE__ */ jsx(
     Button,
     {
-      onClick: () => d(u),
+      onClick: () => u(d),
       size: "sm",
       className: "h-7 w-7 rounded-md p-1",
       variant: c === i ? "outline" : "ghost",
@@ -6724,53 +6725,57 @@ const COLOR_PROP = {
 }, Breakpoints$1 = ({
   openDelay: o = 400,
   canvas: n = !1,
-  tooltip: r = !0
+  tooltip: r = !0,
+  buttonClass: a = "",
+  activeButtonClass: l = ""
 }) => {
-  const [a, , l] = useScreenSizeWidth(), [i, c] = useCanvasDisplayWidth(), [u, p] = useSelectedBreakpoints(), d = u, g = p, { t: m } = useTranslation(), h = useBuilderProp("breakpoints", WEB_BREAKPOINTS), f = (y) => {
-    d.includes(y) ? d.length > 2 && g(d.filter((C) => C !== y)) : g((C) => [...C, y]);
-  }, x = (y) => {
-    n || l(y), c(y);
-  }, b = getBreakpointValue(n ? i : a).toLowerCase();
-  return h.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(h, (y) => /* @__PURE__ */ createElement(
+  const [i, , c] = useScreenSizeWidth(), [d, p] = useCanvasDisplayWidth(), [u, g] = useSelectedBreakpoints(), m = u, h = g, { t: f } = useTranslation(), x = useBuilderProp("breakpoints", WEB_BREAKPOINTS), b = (C) => {
+    m.includes(C) ? m.length > 2 && h(m.filter((v) => v !== C)) : h((v) => [...v, C]);
+  }, y = (C) => {
+    n || c(C), p(C);
+  }, S = getBreakpointValue(n ? d : i).toLowerCase();
+  return x.length < 4 ? /* @__PURE__ */ jsx("div", { className: "flex items-center rounded-md", children: map(x, (C) => /* @__PURE__ */ createElement(
     BreakpointCard,
     {
       canvas: n,
-      ...y,
-      onClick: x,
-      key: y.breakpoint,
-      currentBreakpoint: b
+      ...C,
+      onClick: y,
+      key: C.breakpoint,
+      currentBreakpoint: S
     }
   )) }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between rounded-md", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center", children: map(
-      h.filter((y) => includes(d, toUpper(y.breakpoint))),
-      (y) => /* @__PURE__ */ createElement(
+      x.filter((C) => includes(m, toUpper(C.breakpoint))),
+      (C) => /* @__PURE__ */ createElement(
         BreakpointCard,
         {
           canvas: n,
           openDelay: o,
           tooltip: r,
-          ...y,
-          onClick: x,
-          key: y.breakpoint,
-          currentBreakpoint: b
+          ...C,
+          onClick: y,
+          key: C.breakpoint,
+          currentBreakpoint: S,
+          buttonClass: a,
+          activeButtonClass: l
         }
       )
     ) }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
       /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx("span", { className: "cursor-pointer rounded-md p-1 hover:bg-background", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "scale-90 transform" }) }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56 border-border text-xs", children: [
-        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: m("Screen sizes") }),
+        /* @__PURE__ */ jsx(DropdownMenuLabel, { children: f("Screen sizes") }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        map(h, (y) => /* @__PURE__ */ jsx(
+        map(x, (C) => /* @__PURE__ */ jsx(
           DropdownMenuCheckboxItem,
           {
-            disabled: y.breakpoint === "xs",
-            onCheckedChange: () => f(toUpper(y.breakpoint)),
-            checked: includes(d, toUpper(y.breakpoint)),
-            onSelect: (C) => C.preventDefault(),
-            children: m(y.title)
+            disabled: C.breakpoint === "xs",
+            onCheckedChange: () => b(toUpper(C.breakpoint)),
+            checked: includes(m, toUpper(C.breakpoint)),
+            onSelect: (v) => v.preventDefault(),
+            children: f(C.title)
           },
-          y.breakpoint
+          C.breakpoint
         ))
       ] })
     ] })
@@ -6795,10 +6800,10 @@ function BreakpointSelector() {
 }
 function ManualClasses() {
   var N;
-  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [u] = useSelectedStylingBlocks(), p = useSelectedBlock(), d = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [h, f] = useState(""), x = (N = first(u)) == null ? void 0 : N.prop, { classes: b } = getSplitChaiClasses(get(p, x, "")), y = b.split(" ").filter((T) => !isEmpty(T)), C = useBuilderProp("flags.copyPaste", !0), S = () => {
+  const o = useRef(null), [n, r] = useState(""), [a, l] = useState(-1), i = useFuseSearch(), { t: c } = useTranslation(), [d] = useSelectedStylingBlocks(), p = useSelectedBlock(), u = useAddClassesToBlocks(), g = useRemoveClassesFromBlocks(), [m] = useSelectedBlockIds(), [h, f] = useState(""), x = (N = first(d)) == null ? void 0 : N.prop, { classes: b } = getSplitChaiClasses(get(p, x, "")), y = b.split(" ").filter((T) => !isEmpty(T)), S = useBuilderProp("flags.copyPaste", !0), C = () => {
     const T = h.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    d(m, T, !0), f("");
-  }, [w, _] = useState([]), B = ({ value: T }) => {
+    u(m, T, !0), f("");
+  }, [v, _] = useState([]), B = ({ value: T }) => {
     const P = T.trim().toLowerCase(), R = P.match(/.+:/g);
     let D = [];
     if (R && R.length > 0) {
@@ -6812,7 +6817,7 @@ function ManualClasses() {
     return _(map(D, "item"));
   }, I = () => {
     _([]);
-  }, k = (T) => T.name, A = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), v = useMemo(
+  }, k = (T) => T.name, A = (T) => /* @__PURE__ */ jsx("div", { className: "rounded-md p-1", children: T.name }), w = useMemo(
     () => ({
       ref: o,
       autoComplete: "off",
@@ -6827,7 +6832,7 @@ function ManualClasses() {
         }, 0);
       },
       onKeyDown: (T) => {
-        T.key === "Enter" && h.trim() !== "" && S();
+        T.key === "Enter" && h.trim() !== "" && C();
       },
       onChange: (T, { newValue: P }) => f(P),
       className: "w-full rounded-md text-xs px-2 hover:outline-0 bg-background border-border py-1"
@@ -6836,7 +6841,7 @@ function ManualClasses() {
   ), E = (T) => {
     debugger;
     const P = n.trim().toLowerCase().replace(/ +(?= )/g, "").split(" ");
-    g(m, [T]), d(m, P, !0), r(""), l(-1);
+    g(m, [T]), u(m, P, !0), r(""), l(-1);
   }, j = () => {
     if (navigator.clipboard === void 0) {
       toast.error(c("Clipboard not supported"));
@@ -6847,7 +6852,7 @@ function ManualClasses() {
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-y-1.5 border-b border-border pb-4", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-x-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2 text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { children: c("Classes") }),
-      C && /* @__PURE__ */ jsxs(Tooltip, { children: [
+      S && /* @__PURE__ */ jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(CopyIcon, { onClick: j, className: "cursor-pointer" }) }),
         /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: c("Copy classes to clipboard") }) })
       ] })
@@ -6856,12 +6861,12 @@ function ManualClasses() {
       /* @__PURE__ */ jsx("div", { className: "relative flex w-full items-center gap-x-3", children: /* @__PURE__ */ jsx(
         Autosuggest,
         {
-          suggestions: w,
+          suggestions: v,
           onSuggestionsFetchRequested: B,
           onSuggestionsClearRequested: I,
           getSuggestionValue: k,
           renderSuggestion: A,
-          inputProps: v,
+          inputProps: w,
           containerProps: {
             className: "relative h-8 w-full gap-y-1 py-1 border-border text-xs"
           },
@@ -6877,7 +6882,7 @@ function ManualClasses() {
         {
           variant: "outline",
           className: "h-6 border-border",
-          onClick: S,
+          onClick: C,
           disabled: h.trim() === "",
           size: "sm",
           children: /* @__PURE__ */ jsx(PlusIcon, {})
@@ -7052,30 +7057,30 @@ const MAPPER = {
 };
 function BlockStyling() {
   const { flexChild: o, gridChild: n } = useSelectedBlocksDisplayChild(), [r] = useSelectedStylingBlocks(), [a, l] = React__default.useState(""), [i, c] = React__default.useState({
-    onDrag: (d) => d,
-    onDragEnd: (d) => d,
+    onDrag: (u) => u,
+    onDragEnd: (u) => u,
     dragStartY: 0,
     dragging: !1,
     dragStartValue: 0,
     dragUnit: "",
     negative: !1,
     cssProperty: ""
-  }), u = useThrottledCallback(
-    (d) => {
+  }), d = useThrottledCallback(
+    (u) => {
       const g = !get(i, "negative", !1), m = get(i, "cssProperty", "");
       let h = parseFloat(i.dragStartValue);
       h = isNaN(h) ? 0 : h;
       let f = MAPPER[i.dragUnit];
       (startsWith(m, "scale") || m === "opacity") && (f = 10);
-      let b = (i.dragStartY - d.pageY) / f + h;
+      let b = (i.dragStartY - u.pageY) / f + h;
       g && b < 0 && (b = 0), m === "opacity" && b > 1 && (b = 1), i.onDrag(`${b}`), l(`${b}`);
     },
     [i],
     50
   ), p = useCallback(() => {
     setTimeout(() => i.onDragEnd(`${a}`), 100), c({
-      onDrag: (d) => d,
-      onDragEnd: (d) => d,
+      onDrag: (u) => u,
+      onDragEnd: (u) => u,
       dragStartY: 0,
       dragging: !1,
       dragStartValue: 0,
@@ -7088,7 +7093,7 @@ function BlockStyling() {
     i.dragging ? /* @__PURE__ */ jsx(
       "div",
       {
-        onMouseMove: u,
+        onMouseMove: d,
         onMouseUp: () => p(),
         className: "absolute inset-0 z-30 cursor-row-resize bg-gray-300/10"
       }
@@ -7098,7 +7103,7 @@ function BlockStyling() {
       /* @__PURE__ */ jsxs(Accordion, { defaultValue: ["Styles"], type: "multiple", className: "w-full", children: [
         o && /* @__PURE__ */ jsx(StylingGroup, { section: FLEX_CHILD_SECTION, showAccordian: o || n }),
         n && /* @__PURE__ */ jsx(StylingGroup, { section: GRID_CHILD_SECTION, showAccordian: o || n }),
-        SETTINGS_SECTIONS.map((d) => /* @__PURE__ */ jsx(StylingGroup, { section: d, showAccordian: o || n }, d.heading))
+        SETTINGS_SECTIONS.map((u) => /* @__PURE__ */ jsx(StylingGroup, { section: u, showAccordian: o || n }, u.heading))
       ] })
     ] })
   ] });
@@ -7109,10 +7114,10 @@ const CoreBlock = ({
   parentId: r,
   position: a
 }) => {
-  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: u } = o, { addCoreBlock: p, addPredefinedBlock: d } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
+  const [, l] = useAtom$1(draggedBlockAtom), { type: i, icon: c, label: d } = o, { addCoreBlock: p, addPredefinedBlock: u } = useAddBlock(), [, g] = useSelectedBlockIds(), { clearHighlight: m } = useBlockHighlight(), h = () => {
     if (has(o, "blocks")) {
       const b = isFunction(o.blocks) ? o.blocks() : o.blocks;
-      d(syncBlocksWithDefaults(b), r || null, a);
+      u(syncBlocksWithDefaults(b), r || null, a);
     } else
       p(o, r || null, a);
     pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
@@ -7130,14 +7135,14 @@ const CoreBlock = ({
           }, 200);
         },
         draggable: f ? "true" : "false",
-        className: `${kebabCase$1(`chai-block-${i}`)} cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground ${n ? "opacity-50" : ""}`,
+        className: `${kebabCase(`chai-block-${i}`)} cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-400 dark:border-gray-700 dark:text-white dark:hover:bg-slate-800/50 dark:disabled:bg-gray-900 dark:disabled:text-foreground ${n ? "opacity-50" : ""}`,
         children: [
           createElement(c || BoxIcon, { className: "w-4 h-4 mx-auto" }),
-          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(u || i)) })
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs", children: capitalize(x(d || i)) })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(u || i) }) })
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: x(d || i) }) })
   ] }) });
 }, DefaultChaiBlocks = ({
   parentId: o,
@@ -7162,10 +7167,10 @@ let PRE_IMPORT_HTML_HOOK = async (o) => o;
 const registerChaiPreImportHTMLHook = (o) => {
   PRE_IMPORT_HTML_HOOK = o;
 }, getPreImportHTML = async (o) => await PRE_IMPORT_HTML_HOOK(o), ImportHTML = ({ parentId: o, position: n }) => {
-  const { t: r } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), [c, u] = useState(!1), p = async () => {
-    u(!0);
-    const d = await getPreImportHTML(a), g = getBlocksFromHTML(d);
-    i([...g], o, n), l(""), u(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+  const { t: r } = useTranslation(), [a, l] = useState(""), { addPredefinedBlock: i } = useAddBlock(), [c, d] = useState(!1), p = async () => {
+    d(!0);
+    const u = await getPreImportHTML(a), g = getBlocksFromHTML(u);
+    i([...g], o, n), l(""), d(!1), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
   };
   return /* @__PURE__ */ jsxs(Card, { className: "border-border/0 p-0 shadow-none", children: [
     /* @__PURE__ */ jsx(CardHeader, { className: "p-3", children: /* @__PURE__ */ jsx(CardDescription, { children: r("Use HTML snippets from Tailwind CSS component libraries") }) }),
@@ -7176,8 +7181,8 @@ const registerChaiPreImportHTMLHook = (o) => {
         {
           autoFocus: !0,
           tabIndex: 1,
-          ref: (d) => d && d.focus(),
-          onChange: (d) => l(d.target.value),
+          ref: (u) => u && u.focus(),
+          onChange: (u) => l(u.target.value),
           rows: 12,
           value: a,
           placeholder: r("Enter your code snippet here"),
@@ -7199,9 +7204,9 @@ const registerChaiPreImportHTMLHook = (o) => {
   className: l = "",
   height: i = ""
 }) => {
-  const [c, u] = useState(o), p = (d) => {
-    const g = d.target.value;
-    u(g), n(g);
+  const [c, d] = useState(o), p = (u) => {
+    const g = u.target.value;
+    d(g), n(g);
   };
   return /* @__PURE__ */ jsx("div", { className: cn$1("relative inline-block w-full", l), children: /* @__PURE__ */ jsxs(
     "select",
@@ -7214,7 +7219,7 @@ const registerChaiPreImportHTMLHook = (o) => {
       onChange: p,
       children: [
         /* @__PURE__ */ jsx("option", { value: "", disabled: !0, children: a }),
-        r.map((d) => /* @__PURE__ */ jsx("option", { value: d.value, children: d.label }, d.value))
+        r.map((u) => /* @__PURE__ */ jsx("option", { value: u.value, children: u.label }, u.value))
       ]
     }
   ) });
@@ -7250,20 +7255,20 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: u, addPredefinedBlock: p } = useAddBlock(), [, d] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), b = (S) => {
-    const w = has(S, "styles_attrs.data-page-section");
-    return S._type === "Box" && w;
+  const [l, i] = useState(!1), c = useMemo(() => (n == null ? void 0 : n.getBlock) || (() => []), [n]), { addCoreBlock: d, addPredefinedBlock: p } = useAddBlock(), [, u] = useSelectedBlockIds(), { clearHighlight: g } = useBlockHighlight(), m = get(o, "name", get(o, "label")), h = get(o, "description", ""), f = useFeature("dnd"), [, x] = useAtom$1(draggedBlockAtom), b = (C) => {
+    const v = has(C, "styles_attrs.data-page-section");
+    return C._type === "Box" && v;
   }, y = useCallback(
-    async (S) => {
-      if (S.stopPropagation(), has(o, "component")) {
-        u(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+    async (C) => {
+      if (C.stopPropagation(), has(o, "component")) {
+        d(o, r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
         return;
       }
       i(!0);
-      let w = await c({ library: n, block: o });
-      typeof w == "string" && (w = getBlocksFromHTML(w)), isEmpty(w) || p(syncBlocksWithDefaults(w), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+      let v = await c({ library: n, block: o });
+      typeof v == "string" && (v = getBlocksFromHTML(v)), isEmpty(v) || p(syncBlocksWithDefaults(v), r, a), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
     },
-    [u, p, o, c, n, r, a]
+    [d, p, o, c, n, r, a]
   );
   return /* @__PURE__ */ jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
@@ -7272,20 +7277,20 @@ const registerChaiLibrary = (o, n) => {
         onClick: l ? () => {
         } : y,
         draggable: f ? "true" : "false",
-        onDragStart: async (S) => {
-          const w = await c({ library: n, block: o });
+        onDragStart: async (C) => {
+          const v = await c({ library: n, block: o });
           let _ = r;
-          if (b(first(w)) && (_ = null), !isEmpty(w)) {
-            const B = { blocks: w, uiLibrary: !0, parent: _ };
-            if (S.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
+          if (b(first(v)) && (_ = null), !isEmpty(v)) {
+            const B = { blocks: v, uiLibrary: !0, parent: _ };
+            if (C.dataTransfer.setData("text/plain", JSON.stringify(B)), o.preview) {
               const I = new Image();
               I.src = o.preview, I.onload = () => {
-                S.dataTransfer.setDragImage(I, 0, 0);
+                C.dataTransfer.setDragImage(I, 0, 0);
               };
             } else
-              S.dataTransfer.setDragImage(new Image(), 0, 0);
+              C.dataTransfer.setDragImage(new Image(), 0, 0);
             x(B), setTimeout(() => {
-              d([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
+              u([]), g(), pubsub.publish(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK);
             }, 200);
           }
         },
@@ -7307,7 +7312,7 @@ const registerChaiLibrary = (o, n) => {
     /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsx("p", { className: "font-medium", children: m }) }) })
   ] });
 }, UILibrarySection = ({ parentId: o, position: n }) => {
-  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((E) => E.id === r) || first(l), { data: c, isLoading: u, resetLibrary: p } = useLibraryBlocks(i), [d, g] = useState(""), [m, h] = useState([]), f = useRef(null);
+  const [r, a] = useSelectedLibrary(), l = useChaiLibraries(), i = l.find((E) => E.id === r) || first(l), { data: c, isLoading: d, resetLibrary: p } = useLibraryBlocks(i), [u, g] = useState(""), [m, h] = useState([]), f = useRef(null);
   useEffect(() => {
     c && c.length > 0 && (f.current = new Fuse(c, {
       keys: ["name", "label", "description", "group"],
@@ -7315,39 +7320,39 @@ const registerChaiLibrary = (o, n) => {
       ignoreLocation: !0
     }));
   }, [c]), useEffect(() => {
-    if (!d.trim() || !f.current) {
+    if (!u.trim() || !f.current) {
       h([]);
       return;
     }
-    const E = f.current.search(d).map((j) => j.item);
+    const E = f.current.search(u).map((j) => j.item);
     h(E);
-  }, [d]);
-  const x = d.trim() && !isEmpty(m) ? m : c, b = groupBy(x, "group"), [y, C] = useState(null);
+  }, [u]);
+  const x = u.trim() && !isEmpty(m) ? m : c, b = groupBy(x, "group"), [y, S] = useState(null);
   useEffect(() => {
     if (isEmpty(keys(b))) {
-      C(null);
+      S(null);
       return;
     }
     if (!y || !b[y]) {
-      C(first(keys(b)));
+      S(first(keys(b)));
       return;
     }
   }, [b, y]);
-  const S = get(b, y, []), w = useRef(null), { t: _ } = useTranslation(), B = (E) => {
-    w.current && (clearTimeout(w.current), w.current = null), w.current = setTimeout(() => {
-      w.current && C(E);
+  const C = get(b, y, []), v = useRef(null), { t: _ } = useTranslation(), B = (E) => {
+    v.current && (clearTimeout(v.current), v.current = null), v.current = setTimeout(() => {
+      v.current && S(E);
     }, 400);
   }, I = () => {
     i != null && i.id && p(i.id);
   }, k = () => {
     g("");
   };
-  if (u)
+  if (d)
     return /* @__PURE__ */ jsxs("div", { className: "mt-4 grid h-full w-full grid-cols-12 gap-2", children: [
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-3 h-full" }),
       /* @__PURE__ */ jsx(Skeleton, { className: "col-span-9 h-full" })
     ] });
-  const A = filter(S, (E, j) => j % 2 === 0), v = filter(S, (E, j) => j % 2 === 1);
+  const A = filter(C, (E, j) => j % 2 === 0), w = filter(C, (E, 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(MagnifyingGlassIcon, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
@@ -7355,12 +7360,12 @@ const registerChaiLibrary = (o, n) => {
         Input$1,
         {
           placeholder: _("Search blocks..."),
-          value: d,
+          value: u,
           onChange: (E) => g(E.target.value),
           className: "w-full pl-8 pr-8"
         }
       ),
-      d && /* @__PURE__ */ jsx(
+      u && /* @__PURE__ */ jsx(
         "button",
         {
           onClick: k,
@@ -7375,7 +7380,7 @@ const registerChaiLibrary = (o, n) => {
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex h-full max-h-full w-full flex-1 flex-col", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-gray-500", children: _("Groups") }),
           /* @__PURE__ */ jsx("hr", { className: "mt-1 border-border" }),
-          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: d ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "no-scrollbar mt-2 h-full max-h-full flex-1 overflow-y-auto pb-20", children: isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-col items-center justify-center gap-3 p-4 text-center", children: u ? /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No matching blocks found") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("Failed to load the UI library. Try again") }),
             /* @__PURE__ */ jsxs(Button, { onClick: I, variant: "outline", size: "sm", className: "gap-2", children: [
               /* @__PURE__ */ jsx(ReloadIcon, { className: "h-4 w-4" }),
@@ -7385,9 +7390,9 @@ const registerChaiLibrary = (o, n) => {
             "div",
             {
               onMouseEnter: () => B(j),
-              onMouseLeave: () => clearTimeout(w.current),
+              onMouseLeave: () => clearTimeout(v.current),
               role: "button",
-              onClick: () => C(j),
+              onClick: () => S(j),
               className: cn$1(
                 "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",
                 j === y ? "bg-primary text-primary-foreground hover:bg-primary/80" : ""
@@ -7404,10 +7409,10 @@ const registerChaiLibrary = (o, n) => {
       /* @__PURE__ */ jsx("div", { className: "flex h-full max-h-full w-full flex-col border-l border-border", children: /* @__PURE__ */ jsxs(
         ScrollArea,
         {
-          onMouseEnter: () => w.current ? clearTimeout(w.current) : null,
+          onMouseEnter: () => v.current ? clearTimeout(v.current) : null,
           className: "z-10 flex h-full max-h-full w-full flex-col gap-2 transition-all ease-linear",
           children: [
-            isEmpty(S) && !isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
+            isEmpty(C) && !isEmpty(b) ? /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: _("No blocks found in this group") }) }) : /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-2 gap-2 px-2", children: [
               /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: A.map((E, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
@@ -7418,7 +7423,7 @@ const registerChaiLibrary = (o, n) => {
                 },
                 `block-${j}`
               )) }),
-              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: v.map((E, j) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: w.map((E, j) => /* @__PURE__ */ jsx(
                 BlockCard,
                 {
                   parentId: o,
@@ -7451,9 +7456,9 @@ const registerChaiLibrary = (o, n) => {
   position: n,
   gridCols: r = "grid-cols-2"
 }) => {
-  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [u, p] = useAtom$1(partialBlocksDataAtom), [d, g] = useAtom$1(hasInitializedPartialBlocksAtom);
+  const { data: a, isLoading: l, refetch: i, error: c } = usePartialBlocksList(), [d, p] = useAtom$1(partialBlocksDataAtom), [u, g] = useAtom$1(hasInitializedPartialBlocksAtom);
   useEffect(() => {
-    if (!d || Object.keys(u.blocks).length === 0)
+    if (!u || Object.keys(d.blocks).length === 0)
       if (c)
         p({
           blocks: [],
@@ -7463,14 +7468,14 @@ const registerChaiLibrary = (o, n) => {
         }), g(!0);
       else if (!l && Object.keys(a || {}).length > 0) {
         const h = Object.entries(a).map(([x, b]) => {
-          const y = b, C = y.type || "partial", S = formatReadableName(C);
+          const y = b, S = y.type || "partial", C = formatReadableName(S);
           return {
             type: "PartialBlock",
             // Set the type to PartialBlock
             label: formatReadableName(y.name || x),
             description: y.description || "",
             icon: FrameIcon,
-            group: S,
+            group: C,
             // Use formatted type as group
             category: "partial",
             partialBlockId: x,
@@ -7493,17 +7498,17 @@ const registerChaiLibrary = (o, n) => {
   }, [
     l,
     a,
-    d,
+    u,
     g,
     p,
-    u.blocks,
+    d.blocks,
     c
   ]);
   const m = () => {
     p((h) => ({ ...h, isLoading: !0, error: null })), g(!1), i();
   };
-  return u.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : u.error || u.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
-    /* @__PURE__ */ jsx("p", { children: u.error || "No partial blocks available" }),
+  return d.isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8 text-center text-muted-foreground", children: "Loading partial blocks..." }) : d.error || d.blocks.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("p", { children: d.error || "No partial blocks available" }),
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -7518,15 +7523,15 @@ const registerChaiLibrary = (o, n) => {
       gridCols: r,
       parentId: o,
       position: n,
-      groups: u.groups,
-      blocks: u.blocks
+      groups: d.groups,
+      blocks: d.blocks
     }
   );
 }, ADD_BLOCK_TABS = {}, registerChaiAddBlockTab = (o, n) => {
   has(ADD_BLOCK_TABS, o) && console.warn(`Add block tab with id ${o} already registered`), set(ADD_BLOCK_TABS, o, { id: o, ...n });
 }, useChaiAddBlockTabs = () => useMemo(() => values(ADD_BLOCK_TABS), []), CORE_GROUPS = ["basic", "typography", "media", "layout", "form", "advanced", "other"], ChaiBuilderBlocks = ({ groups: o, blocks: n, parentId: r, position: a, gridCols: l = "grid-cols-4", disableBlockGroupsSidebar: i }) => {
   var E;
-  const { t: c } = useTranslation(), [u] = useBlocksStore(), [p, d] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), h = (E = find(u, (j) => j._id === r)) == null ? void 0 : E._type, [f, x] = useState("all"), [b, y] = useState(null), C = useRef(null);
+  const { t: c } = useTranslation(), [d] = useBlocksStore(), [p, u] = useState(""), g = useRef(null), [m] = useAtom$1(addBlockTabAtom), h = (E = find(d, (j) => j._id === r)) == null ? void 0 : E._type, [f, x] = useState("all"), [b, y] = useState(null), S = useRef(null);
   useEffect(() => {
     const j = setTimeout(() => {
       var N;
@@ -7535,17 +7540,17 @@ const registerChaiLibrary = (o, n) => {
     return () => clearTimeout(j);
   }, [m]), useEffect(() => {
     p && (x("all"), y(null));
-  }, [p]), useEffect(() => (C.current = debounce((j) => {
+  }, [p]), useEffect(() => (S.current = debounce((j) => {
     x(j);
   }, 500), () => {
-    C.current && C.current.cancel();
+    S.current && S.current.cancel();
   }), []);
-  const S = useCallback((j) => {
-    y(j), C.current && C.current(j);
-  }, []), w = useCallback(() => {
-    y(null), C.current && C.current.cancel();
+  const C = useCallback((j) => {
+    y(j), S.current && S.current(j);
+  }, []), v = useCallback(() => {
+    y(null), S.current && S.current.cancel();
   }, []), _ = useCallback((j) => {
-    C.current && C.current.cancel(), x(j), y(null);
+    S.current && S.current.cancel(), x(j), y(null);
   }, []), B = useMemo(
     () => p ? values(n).filter(
       (j) => {
@@ -7562,7 +7567,7 @@ const registerChaiLibrary = (o, n) => {
   ), k = useMemo(
     () => sortBy(I, (j) => CORE_GROUPS.indexOf(j) === -1 ? 99 : CORE_GROUPS.indexOf(j)),
     [I]
-  ), A = useMemo(() => f === "all" ? B : filter(values(B), { group: f }), [B, f]), v = useMemo(() => f === "all" ? k : [f], [k, f]);
+  ), A = useMemo(() => f === "all" ? B : filter(values(B), { group: f }), [B, f]), w = useMemo(() => f === "all" ? k : [f], [k, f]);
   return /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-full w-full max-w-3xl flex-col", children: [
     /* @__PURE__ */ jsx("div", { className: `${i ? "px-2" : "px-4"} sticky top-0 py-2 z-10 bg-background/80 backdrop-blur-sm`, children: /* @__PURE__ */ jsx(
       Input$1,
@@ -7572,7 +7577,7 @@ const registerChaiLibrary = (o, n) => {
         placeholder: c("Search blocks..."),
         value: p,
         className: "-ml-2",
-        onChange: (j) => d(j.target.value)
+        onChange: (j) => u(j.target.value)
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "sticky top-10 flex h-[calc(100%-48px)] overflow-hidden", children: [
@@ -7581,8 +7586,8 @@ const registerChaiLibrary = (o, n) => {
           "button",
           {
             onClick: () => _("all"),
-            onMouseEnter: () => S("all"),
-            onMouseLeave: w,
+            onMouseEnter: () => C("all"),
+            onMouseLeave: v,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm font-medium ${f === "all" || b === "all" ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: c("All")
           },
@@ -7592,8 +7597,8 @@ const registerChaiLibrary = (o, n) => {
           "button",
           {
             onClick: () => _(j),
-            onMouseEnter: () => S(j),
-            onMouseLeave: w,
+            onMouseEnter: () => C(j),
+            onMouseLeave: v,
             className: `w-full rounded-md px-2 py-1.5 text-left text-sm ${f === j || b === j ? "bg-primary text-primary-foreground" : "hover:bg-primary/50 hover:text-primary-foreground"}`,
             children: capitalize(c(j.toLowerCase()))
           },
@@ -7609,7 +7614,7 @@ const registerChaiLibrary = (o, n) => {
             ' "',
             p,
             '"'
-          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${i ? "p-0" : "p-4"} space-y-6`, children: v.map((j) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: `${i ? "p-0" : "p-4"} space-y-6`, children: w.map((j) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsx("h3", { className: "px-1 text-sm font-medium", children: capitalize(c(j.toLowerCase())) }),
             /* @__PURE__ */ jsx("div", { className: "grid gap-2 " + l, children: reject(
               f === "all" ? filter(values(A), { group: j }) : values(A),
@@ -7635,7 +7640,7 @@ const registerChaiLibrary = (o, n) => {
   parentId: r = void 0,
   position: a = -1
 }) => {
-  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, u] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("flags.importHtml", !0), { data: d } = usePartialBlocksList(), g = Object.keys(d || {}).length > 0, { hasPermission: m } = usePermissions();
+  const { t: l } = useTranslation(), [i, c] = useAtom$1(addBlockTabAtom), [, d] = useAtom$1(showPredefinedBlockCategoryAtom), p = useBuilderProp("flags.importHtml", !0), { data: u } = usePartialBlocksList(), g = Object.keys(u || {}).length > 0, { hasPermission: m } = usePermissions();
   useEffect(() => {
     i === "partials" && !g && c("library");
   }, [i, g, c]);
@@ -7652,8 +7657,8 @@ const registerChaiLibrary = (o, n) => {
     /* @__PURE__ */ jsxs(
       Tabs,
       {
-        onValueChange: (C) => {
-          u(""), c(C);
+        onValueChange: (S) => {
+          d(""), c(S);
         },
         value: i,
         className: "flex h-full max-h-full flex-col overflow-hidden",
@@ -7663,13 +7668,13 @@ const registerChaiLibrary = (o, n) => {
             /* @__PURE__ */ jsx(TabsTrigger, { value: "core", children: l("Blocks") }),
             g && /* @__PURE__ */ jsx(TabsTrigger, { value: "partials", children: l("Partials") }),
             x ? /* @__PURE__ */ jsx(TabsTrigger, { value: "html", children: l("Import") }) : null,
-            map(f, (C) => /* @__PURE__ */ jsx(TabsTrigger, { value: C.id, children: React__default.createElement(C.tab) }, `tab-add-block-${C.id}`))
+            map(f, (S) => /* @__PURE__ */ jsx(TabsTrigger, { value: S.id, children: React__default.createElement(S.tab) }, `tab-add-block-${S.id}`))
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "core", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(DefaultChaiBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           y && /* @__PURE__ */ jsx(TabsContent, { value: "library", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(UILibrariesPanel, { parentId: r, position: a }) }),
           g && /* @__PURE__ */ jsx(TabsContent, { value: "partials", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx("div", { className: "-mx-1.5 h-full max-h-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "mt-2 h-full w-full", children: /* @__PURE__ */ jsx(PartialBlocks, { gridCols: "grid-cols-4", parentId: r, position: a }) }) }) }),
           x ? /* @__PURE__ */ jsx(TabsContent, { value: "html", className: "h-full max-h-full flex-1 pb-20", children: /* @__PURE__ */ jsx(ImportHTML, { parentId: r, position: a }) }) : null,
-          map(f, (C) => /* @__PURE__ */ jsx(TabsContent, { value: C.id, children: React__default.createElement(C.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${C.id}`))
+          map(f, (S) => /* @__PURE__ */ jsx(TabsContent, { value: S.id, children: React__default.createElement(S.tabContent, { close: h, parentId: r, position: a }) }, `panel-add-block-${S.id}`))
         ]
       }
     )
@@ -7779,10 +7784,10 @@ const registerChaiSaveToLibrary = (o) => {
 }, SaveToLibraryModal = () => {
   const [o, n] = useAtom$1(saveToLibraryModalAtom), { t: r } = useTranslation(), [a] = useBlocksStore(), l = () => n({ isOpen: !1, blockId: null }), i = useSaveToLibraryComponent(), c = useMemo(() => {
     if (!o.blockId) return [];
-    const u = find(a, { _id: o.blockId });
-    return u == null || delete u._parent, [u, ...getBlocks(a, u == null ? void 0 : u._id)];
+    const d = find(a, { _id: o.blockId });
+    return d == null || delete d._parent, [d, ...getBlocks(a, d == null ? void 0 : d._id)];
   }, [o.blockId, a]);
-  return /* @__PURE__ */ jsx(Dialog, { open: o.isOpen, onOpenChange: (u) => !u && l(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-4 sm:max-w-[450px]", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open: o.isOpen, onOpenChange: (d) => !d && l(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-4 sm:max-w-[450px]", children: [
     /* @__PURE__ */ jsx(DialogHeader, { className: "pb-2", children: /* @__PURE__ */ jsx(DialogTitle, { children: r("Save to Library") }) }),
     i && !isEmpty(o.blockId) && /* @__PURE__ */ jsx(i, { blockId: o.blockId, blocks: c, close: l })
   ] }) });
@@ -7824,35 +7829,35 @@ const registerChaiSaveToLibrary = (o) => {
     }
   ) : null;
 }, CopyPasteBlocks = () => {
-  const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), u = useBuilderProp("flags.copyPaste", !0), p = useCallback(() => {
-    const d = n.map((g) => {
+  const [o] = useBlocksStore(), [n] = useSelectedBlockIds(), { pasteBlocks: r } = usePasteBlocks(), [, a, l] = useCopyBlocks(), { t: i } = useTranslation(), c = useSelectedBlock(), d = useBuilderProp("flags.copyPaste", !0), p = useCallback(() => {
+    const u = n.map((g) => {
       const m = o.find((h) => h._id === g);
       return {
         id: g,
         data: m
       };
     });
-    l(d.map((g) => g.id)) ? toast.warning("Partial blocks detected. Clone partial blocks?", {
+    l(u.map((g) => g.id)) ? toast.warning("Partial blocks detected. Clone partial blocks?", {
       cancel: {
         label: i("No"),
         onClick: () => {
-          a(d.map((g) => g.id)), toast.dismiss();
+          a(u.map((g) => g.id)), toast.dismiss();
         }
       },
       action: {
         label: i("Yes"),
         onClick: () => {
           a(
-            d.map((g) => g.id),
+            u.map((g) => g.id),
             !0
           ), toast.dismiss();
         }
       },
       position: "top-center"
-    }) : a(d.map((g) => g.id));
+    }) : a(u.map((g) => g.id));
   }, [n, o, a, l]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    u && /* @__PURE__ */ jsxs(
+    d && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         disabled: !canDuplicateBlock(c == null ? void 0 : c._type),
@@ -7865,7 +7870,7 @@ const registerChaiSaveToLibrary = (o) => {
         ]
       }
     ),
-    u && /* @__PURE__ */ jsxs(
+    d && /* @__PURE__ */ jsxs(
       DropdownMenuItem,
       {
         className: "flex items-center gap-x-4 text-xs",
@@ -7919,7 +7924,7 @@ const registerChaiSaveToLibrary = (o) => {
     }
   );
 }, BlockContextMenuContent = ({ node: o }) => {
-  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), { hasPermission: i } = usePermissions(), { librarySite: c } = useBuilderProp("flags", { librarySite: !1 }), u = useCallback(() => {
+  const { t: n } = useTranslation(), [r] = useSelectedBlockIds(), a = useDuplicateBlocks(), l = useSelectedBlock(), { hasPermission: i } = usePermissions(), { librarySite: c } = useBuilderProp("flags", { librarySite: !1 }), d = useCallback(() => {
     a(r);
   }, [r, a]), p = useMemo(() => has(l, "_libBlockId") && !isEmpty(l._libBlockId), [l == null ? void 0 : l._libBlockId]);
   return o === "BODY" ? /* @__PURE__ */ jsx(DropdownMenuContent, { side: "bottom", className: "border-border text-xs", children: i(PERMISSIONS.ADD_BLOCK) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7941,7 +7946,7 @@ const registerChaiSaveToLibrary = (o) => {
       DropdownMenuItem,
       {
         disabled: !1,
-        onClick: (d) => d.preventDefault(),
+        onClick: (u) => u.preventDefault(),
         className: "flex items-center gap-x-4 text-xs",
         children: /* @__PURE__ */ jsx(ClearCanvas, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-4 text-xs", children: [
           /* @__PURE__ */ jsx(EraserIcon, {}),
@@ -7970,7 +7975,7 @@ const registerChaiSaveToLibrary = (o) => {
         {
           disabled: !canDuplicateBlock(l == null ? void 0 : l._type),
           className: "flex items-center gap-x-4 text-xs",
-          onClick: u,
+          onClick: d,
           children: [
             /* @__PURE__ */ jsx(CardStackPlusIcon, {}),
             " ",
@@ -8042,24 +8047,24 @@ const Input = ({ node: o }) => {
 }, truncateText = (o, n) => o.length > n ? o.substring(0, n) + "..." : o, Node$1 = memo(({ node: o, style: n, dragHandle: r }) => {
   var D;
   const { t: a } = useTranslation(), l = useUpdateBlocksProps(), [i] = useAtom$1(canvasIframeAtom), { hasPermission: c } = usePermissions();
-  let u = null;
-  const p = o.children.length > 0, { highlightBlock: d, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: f, willReceiveDrop: x, isDragging: b, isEditing: y, handleClick: C } = o, S = get(h, "_show", !0), w = (L) => {
-    L.stopPropagation(), S && o.toggle();
+  let d = null;
+  const p = o.children.length > 0, { highlightBlock: u, clearHighlight: g } = useBlockHighlight(), { id: m, data: h, isSelected: f, willReceiveDrop: x, isDragging: b, isEditing: y, handleClick: S } = o, C = get(h, "_show", !0), v = (L) => {
+    L.stopPropagation(), C && o.toggle();
   }, _ = (L) => {
-    L.isInternal && (u = L.isOpen, L.isOpen && L.close());
+    L.isInternal && (d = L.isOpen, L.isOpen && L.close());
   }, B = (L) => {
-    L.isInternal && u !== null && (u ? L.open() : L.close(), u = null);
+    L.isInternal && d !== null && (d ? L.open() : L.close(), d = null);
   }, [I, k] = useAtom$1(currentAddSelection), A = () => {
     var L;
-    v(), o.parent.isSelected || k((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
-  }, v = () => {
+    w(), o.parent.isSelected || k((L = o == null ? void 0 : o.parent) == null ? void 0 : L.id);
+  }, w = () => {
     k(null);
   }, E = (L) => {
-    v(), L.stopPropagation(), !o.isOpen && S && o.toggle(), C(L);
+    w(), L.stopPropagation(), !o.isOpen && C && o.toggle(), S(L);
   };
   useEffect(() => {
     const L = setTimeout(() => {
-      x && !o.isOpen && !b && S && o.toggle();
+      x && !o.isOpen && !b && C && o.toggle();
     }, 500);
     return () => clearTimeout(L);
   }, [x, o, b]);
@@ -8069,7 +8074,7 @@ const Input = ({ node: o }) => {
     const V = M.getBoundingClientRect(), H = i.getBoundingClientRect();
     V.top >= H.top && V.left >= H.left && V.bottom <= H.bottom && V.right <= H.right || (F.documentElement.scrollTop = M.offsetTop - H.top);
   }, N = (L) => {
-    v();
+    w();
     const O = get(o, "parent.id");
     O !== "__REACT_ARBORIST_INTERNAL_ROOT__" ? pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { _id: O, position: L }) : pubsub.publish(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, { position: L });
   };
@@ -8095,7 +8100,7 @@ const Input = ({ node: o }) => {
   return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseEnter: () => d(m),
+      onMouseEnter: () => u(m),
       onMouseLeave: () => g(),
       onClick: E,
       style: n,
@@ -8120,7 +8125,7 @@ const Input = ({ node: o }) => {
               L.stopPropagation(), N(o.childIndex);
             },
             onMouseEnter: A,
-            onMouseLeave: v,
+            onMouseLeave: w,
             className: "absolute -top-0.5 h-0.5 w-[90%] rounded bg-primary/80 opacity-0 delay-200 duration-200 group-hover:opacity-100",
             children: /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 top-1/2 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform items-center justify-center rounded-full bg-primary/80 p-1 outline outline-2 outline-white hover:bg-primary/80", children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-2 w-2 stroke-[2] text-white" }) })
           }
@@ -8134,7 +8139,7 @@ const Input = ({ node: o }) => {
               x && canAcceptChildBlock(h._type, "Icon") ? "bg-green-200" : "",
               (o == null ? void 0 : o.id) === I ? "bg-primary/10" : "",
               b && "opacity-20",
-              S ? "" : "line-through opacity-50",
+              C ? "" : "line-through opacity-50",
               P && f && "bg-primary/20 text-primary"
             ),
             children: [
@@ -8143,7 +8148,7 @@ const Input = ({ node: o }) => {
                   "div",
                   {
                     className: `flex h-4 w-4 rotate-0 transform cursor-pointer items-center justify-center transition-transform duration-100 ${o.isOpen ? "rotate-90" : ""}`,
-                    children: p && /* @__PURE__ */ jsx("button", { onClick: w, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
+                    children: p && /* @__PURE__ */ jsx("button", { onClick: v, type: "button", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3" }) })
                   }
                 ),
                 /* @__PURE__ */ jsxs(
@@ -8173,7 +8178,7 @@ const Input = ({ node: o }) => {
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "invisible flex items-center space-x-1.5 pr-px group-hover:visible", children: [
-                canAddChildBlock(h == null ? void 0 : h._type) && S && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+                canAddChildBlock(h == null ? void 0 : h._type) && C && c(PERMISSIONS.ADD_BLOCK) ? /* @__PURE__ */ jsxs(Tooltip, { children: [
                   /* @__PURE__ */ jsx(
                     TooltipTrigger,
                     {
@@ -8190,14 +8195,14 @@ const Input = ({ node: o }) => {
                     TooltipTrigger,
                     {
                       onClick: (L) => {
-                        L.stopPropagation(), l([m], { _show: !S }), o.isOpen && o.toggle();
+                        L.stopPropagation(), l([m], { _show: !C }), o.isOpen && o.toggle();
                       },
                       className: "cursor-pointer rounded bg-transparent p-0.5 hover:bg-primary/10",
                       asChild: !0,
-                      children: S ? /* @__PURE__ */ jsx(EyeClosedIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
+                      children: C ? /* @__PURE__ */ jsx(EyeClosedIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOpenIcon, { className: "h-4 w-4" })
                     }
                   ),
-                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(S ? "Hide the block from page" : "Show the block on page") })
+                  /* @__PURE__ */ jsx(TooltipContent, { className: "isolate z-[9999] text-xs", side: "bottom", children: a(C ? "Hide the block from page" : "Show the block on page") })
                 ] }),
                 /* @__PURE__ */ jsx(BlockMoreOptions, { node: o, id: m, children: /* @__PURE__ */ jsx("div", { className: "cursor-pointer rounded bg-transparent p-px hover:bg-primary/10", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { className: "h-3 w-3" }) }) })
               ] })
@@ -8240,8 +8245,8 @@ const Input = ({ node: o }) => {
   return (n, r) => {
     var i;
     const a = (i = find(o, { _id: r })) == null ? void 0 : i._type, l = first(n.map((c) => {
-      var u;
-      return (u = find(o, { _id: c })) == null ? void 0 : u._type;
+      var d;
+      return (d = find(o, { _id: c })) == null ? void 0 : d._type;
     }));
     return canAcceptChildBlock(a, l);
   };
@@ -8642,12 +8647,12 @@ const Input = ({ node: o }) => {
       console.warn("Failed to clear previous theme from localStorage:", o);
     }
 }, ThemeConfigPanel = React.memo(({ className: o = "" }) => {
-  const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), u = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: d } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0);
-  if (u) {
-    const k = u.map((A) => Object.keys(A)[0]);
+  const [n, r] = useDarkMode(), [a, l] = React.useState(""), [i, c] = React.useState(!1), d = useBuilderProp("themePresets", []), p = useBuilderProp("themePanelComponent", null), { hasPermission: u } = usePermissions(), g = useBuilderProp("flags.importTheme", !0), m = useBuilderProp("flags.darkMode", !0);
+  if (d) {
+    const k = d.map((A) => Object.keys(A)[0]);
     DEFAULT_THEME_PRESET.forEach((A) => {
-      const v = Object.keys(A)[0];
-      k.includes(v) || u.push(A);
+      const w = Object.keys(A)[0];
+      k.includes(w) || d.push(A);
     });
   }
   const [h, f] = useTheme(), x = useThemeOptions(), { t: b } = useTranslation(), y = React.useCallback(
@@ -8668,16 +8673,16 @@ const Input = ({ node: o }) => {
       });
     },
     [h, f]
-  ), C = () => {
-    const k = u.find((A) => Object.keys(A)[0] === a);
+  ), S = () => {
+    const k = d.find((A) => Object.keys(A)[0] === a);
     if (k) {
       const A = Object.values(k)[0];
       A && typeof A == "object" && "fontFamily" in A && "borderRadius" in A && "colors" in A ? (y(A), l("")) : console.error("Invalid preset structure:", A);
     } else
       console.error("Preset not found:", a);
-  }, S = (k) => {
+  }, C = (k) => {
     y(k), l("");
-  }, w = useDebouncedCallback(
+  }, v = useDebouncedCallback(
     (k, A) => {
       f(() => ({
         ...h,
@@ -8700,12 +8705,12 @@ const Input = ({ node: o }) => {
   ), B = useDebouncedCallback(
     (k, A) => {
       f(() => {
-        const v = get(h, `colors.${k}`);
-        return n ? set(v, 1, A) : set(v, 0, A), {
+        const w = get(h, `colors.${k}`);
+        return n ? set(w, 1, A) : set(w, 0, A), {
           ...h,
           colors: {
             ...h.colors,
-            [k]: v
+            [k]: w
           }
         };
       });
@@ -8713,21 +8718,21 @@ const Input = ({ node: o }) => {
     [h],
     200
   ), I = (k) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1", children: Object.entries(k.items).map(([A]) => {
-    const v = get(h, `colors.${A}.${n ? 1 : 0}`);
-    return v ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
+    const w = get(h, `colors.${A}.${n ? 1 : 0}`);
+    return w ? /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-x-2", children: [
       /* @__PURE__ */ jsx(
         ColorPickerInput,
         {
-          value: v,
+          value: w,
           onChange: (E) => B(A, E)
         }
       ),
       /* @__PURE__ */ jsx(Label, { className: "text-xs font-normal leading-tight", children: A.split(/(?=[A-Z])/).join(" ").replace(/-/g, " ").split(" ").map((E) => E.charAt(0).toUpperCase() + E.slice(1)).join(" ") + (!A.toLowerCase().includes("foreground") && !A.toLowerCase().includes("border") && !A.toLowerCase().includes("input") && !A.toLowerCase().includes("ring") && !A.toLowerCase().includes("background") ? " Background" : "") })
     ] }, A) : null;
   }) });
-  return d("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$1("no-scrollbar h-full w-full overflow-y-auto", o), children: [
-      u.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mx-0 my-2 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: b("Presets") }),
           /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: g && /* @__PURE__ */ jsxs(Button, { className: "px-1", variant: "link", size: "sm", onClick: () => c(!0), children: [
@@ -8738,12 +8743,12 @@ const Input = ({ node: o }) => {
         /* @__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: b("Select preset") }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(u) && u.map((k) => {
-              const A = Object.keys(k)[0], v = A.replaceAll("_", " ");
-              return /* @__PURE__ */ jsx(SelectItem, { value: A, children: capitalize(v) }, A);
+            /* @__PURE__ */ jsx(SelectContent, { children: Array.isArray(d) && d.map((k) => {
+              const A = Object.keys(k)[0], w = A.replaceAll("_", " ");
+              return /* @__PURE__ */ jsx(SelectItem, { value: A, children: capitalize(w) }, A);
             }) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: C, children: b("Apply") }) })
+          /* @__PURE__ */ jsx("div", { className: "w-[25%]", children: /* @__PURE__ */ jsx(Button, { className: "w-full text-sm", disabled: !a, onClick: S, children: b("Apply") }) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
@@ -8757,7 +8762,7 @@ const Input = ({ node: o }) => {
           {
             label: k,
             value: h.fontFamily[k.replace(/font-/g, "")] || A[Object.keys(A)[0]],
-            onChange: (v) => w(k, v)
+            onChange: (w) => v(k, w)
           },
           k
         )) }),
@@ -8800,7 +8805,7 @@ const Input = ({ node: o }) => {
           {
             open: i,
             onOpenChange: c,
-            onImport: S
+            onImport: C
           }
         ) })
       ] }),
@@ -9314,17 +9319,17 @@ function QuickPrompts({ onClick: o }) {
       lang: get(LANGUAGES, a, a)
     })
   }), /* @__PURE__ */ jsx("div", { className: n ? "pointer-events-none opacity-50" : "", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: c.map(
-    ({ name: u, icon: p, subMenus: d, prompt: g }) => d ? /* @__PURE__ */ jsxs(Popover, { children: [
+    ({ name: d, icon: p, subMenus: u, prompt: g }) => u ? /* @__PURE__ */ jsxs(Popover, { children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: !0, children: /* @__PURE__ */ jsxs(
         "li",
         {
           className: "flex cursor-pointer items-center space-x-2 rounded p-1 pl-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
           children: [
             /* @__PURE__ */ jsx(p, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { children: u })
+            /* @__PURE__ */ jsx("span", { children: d })
           ]
         },
-        u
+        d
       ) }),
       /* @__PURE__ */ jsx(PopoverContent, { side: "right", children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx("li", { children: r("Happy") }) }) })
     ] }) : /* @__PURE__ */ jsxs(
@@ -9334,28 +9339,28 @@ function QuickPrompts({ onClick: o }) {
         className: "flex cursor-pointer items-center space-x-2 rounded p-1 text-xs hover:bg-primary/10 hover:text-primary dark:hover:bg-gray-800",
         children: [
           /* @__PURE__ */ jsx(p, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx("span", { children: r(u) })
+          /* @__PURE__ */ jsx("span", { children: r(d) })
         ]
       },
-      u
+      d
     )
   ) }) });
 }
 const AIUserPrompt = ({ blockId: o }) => {
-  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), u = useRef(null), p = useRef(null), d = useSelectedBlock();
+  const { t: n } = useTranslation(), { askAi: r, loading: a, error: l } = useAskAi(), [i, c] = useState(""), d = useRef(null), p = useRef(null), u = useSelectedBlock();
   useEffect(() => {
     var m;
-    (m = u.current) == null || m.focus();
+    (m = d.current) == null || m.focus();
   }, []);
   const g = () => {
     l || c("");
   };
   return /* @__PURE__ */ jsx("div", { className: "", children: o ? /* @__PURE__ */ jsxs("div", { className: "", children: [
     /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Selected block" }),
-    d && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded border border-primary/20 bg-primary/10 p-1.5 text-xs text-primary", children: [
-      /* @__PURE__ */ jsx(TypeIcon, { type: d._type }),
+    u && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1 rounded border border-primary/20 bg-primary/10 p-1.5 text-xs text-primary", children: [
+      /* @__PURE__ */ jsx(TypeIcon, { type: u._type }),
       " ",
-      /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap leading-none", children: d._name || d._type })
+      /* @__PURE__ */ jsx("p", { className: "truncate whitespace-nowrap leading-none", children: u._name || u._type })
     ] }),
     /* @__PURE__ */ jsx("br", {}),
     /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500", children: "Quick actions" }),
@@ -9373,7 +9378,7 @@ const AIUserPrompt = ({ blockId: o }) => {
       /* @__PURE__ */ jsx(
         Textarea,
         {
-          ref: u,
+          ref: d,
           value: i,
           onChange: (m) => c(m.target.value),
           placeholder: n("Ask AI to edit content"),
@@ -9452,7 +9457,7 @@ const UndoRedo = () => {
     /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center", children: [
       n ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
         /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: !0, children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", className: "h-7 w-7 rounded-md p-1", children: /* @__PURE__ */ jsx(DotsHorizontalIcon, { className: "h-4 w-4" }) }) }),
-        /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-56 border-border text-xs", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-2", onSelect: (u) => u.preventDefault(), children: [
+        /* @__PURE__ */ jsx(DropdownMenuContent, { className: "w-56 border-border text-xs", children: /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "flex items-center gap-2", onSelect: (d) => d.preventDefault(), children: [
           /* @__PURE__ */ jsx(LightningBoltIcon, { className: "h-4 w-4 text-gray-500" }),
           /* @__PURE__ */ jsx("span", { className: "flex-1", children: l("Data Binding") }),
           /* @__PURE__ */ jsx(Switch, { checked: r, onCheckedChange: () => a(!r) })
@@ -9463,8 +9468,8 @@ const UndoRedo = () => {
   ] });
 }, AddBlocksDialog = () => {
   const { t: o } = useTranslation(), [n, r] = useState(""), [a, l] = useState(-1), [i, c] = useState(!1);
-  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (u) => {
-    r(u ? u._id : null), l(isNaN(u == null ? void 0 : u.position) ? -1 : u == null ? void 0 : u.position), c(!0);
+  return usePubSub(CHAI_BUILDER_EVENTS.OPEN_ADD_BLOCK, (d) => {
+    r(d ? d._id : null), l(isNaN(d == null ? void 0 : d.position) ? -1 : d == null ? void 0 : d.position), c(!0);
   }), usePubSub(CHAI_BUILDER_EVENTS.CLOSE_ADD_BLOCK, () => {
     r(""), l(-1), c(!1);
   }), /* @__PURE__ */ jsx(AlertDialog, { open: i, onOpenChange: () => i ? c(!1) : "", children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: "max-w-5xl overflow-hidden border-border", children: [
@@ -9485,37 +9490,37 @@ const UndoRedo = () => {
   preloadedAttributes: n = [],
   onAttributesChange: r
 }) {
-  const [a, l] = useState([]), [i, c] = useState(""), [u, p] = useState(""), [d, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
+  const [a, l] = useState([]), [i, c] = useState(""), [d, p] = useState(""), [u, g] = useState(null), [m, h] = useState(""), f = useRef(null), x = useRef(null), b = usePageExternalData(), { t: y } = useTranslation();
   useEffect(() => {
     l(n);
   }, [n]);
-  const C = () => {
+  const S = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
     if (i) {
-      const k = [...a, { key: i, value: u }];
+      const k = [...a, { key: i, value: d }];
       r(k), l(a), c(""), p(""), h("");
     }
-  }, S = (k) => {
-    const A = a.filter((v, E) => E !== k);
+  }, C = (k) => {
+    const A = a.filter((w, E) => E !== k);
     r(A), l(A);
-  }, w = (k) => {
+  }, v = (k) => {
     g(k), c(a[k].key), p(a[k].value);
   }, _ = () => {
     if (i.startsWith("@")) {
       h("Attribute keys cannot start with '@'");
       return;
     }
-    if (d !== null && i) {
+    if (u !== null && i) {
       const k = [...a];
-      k[d] = { key: i, value: u }, r(k), l(k), g(null), c(""), p(""), h("");
+      k[u] = { key: i, value: d }, r(k), l(k), g(null), c(""), p(""), h("");
     }
   }, B = (k) => {
-    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), d !== null ? _() : C());
+    k.key === "Enter" && !k.shiftKey && (k.preventDefault(), u !== null ? _() : S());
   }, I = useCallback((k) => {
-    const A = (j) => /[.,!?;:]/.test(j), v = (j, N, T) => {
+    const A = (j) => /[.,!?;:]/.test(j), w = (j, N, T) => {
       let P = "", R = "";
       const D = N > 0 ? j[N - 1] : "", L = N < j.length ? j[N] : "";
       return N > 0 && (D === "." || !A(D) && D !== " ") && (P = " "), N < j.length && !A(L) && L !== " " && (R = " "), {
@@ -9527,11 +9532,11 @@ const UndoRedo = () => {
     if (E) {
       const j = E.selectionStart || 0, N = E.value || "", T = E.selectionEnd || j;
       if (T > j) {
-        const O = `{{${k}}}`, { text: F } = v(N, j, O), M = N.slice(0, j) + F + N.slice(T);
+        const O = `{{${k}}}`, { text: F } = w(N, j, O), M = N.slice(0, j) + F + N.slice(T);
         p(M);
         return;
       }
-      const R = `{{${k}}}`, { text: D } = v(N, j, R), L = N.slice(0, j) + D + N.slice(j);
+      const R = `{{${k}}}`, { text: D } = w(N, j, R), L = N.slice(0, j) + D + N.slice(j);
       p(L);
     }
   }, []);
@@ -9540,7 +9545,7 @@ const UndoRedo = () => {
       "form",
       {
         onSubmit: (k) => {
-          k.preventDefault(), d !== null ? _() : C();
+          k.preventDefault(), u !== null ? _() : S();
         },
         className: "space-y-3",
         children: [
@@ -9576,7 +9581,7 @@ const UndoRedo = () => {
                   id: "attrValue",
                   rows: 2,
                   ref: x,
-                  value: u,
+                  value: d,
                   onChange: (k) => p(k.target.value),
                   onKeyDown: B,
                   placeholder: "Enter Value",
@@ -9585,7 +9590,7 @@ const UndoRedo = () => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: d !== null ? "Save" : "Add" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !i.length, variant: "default", size: "sm", className: "h-8 w-24 text-xs", children: u !== null ? "Save" : "Add" }) }),
           m && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: m })
         ]
       }
@@ -9596,22 +9601,22 @@ const UndoRedo = () => {
         /* @__PURE__ */ jsx("span", { className: "max-w-[200px] text-wrap font-normal", children: k.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: () => w(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => S(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => v(A), children: /* @__PURE__ */ jsx(Pencil2Icon, { className: "h-3 w-3" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => C(A), children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-3 w-3" }) })
       ] })
     ] }, A)) })
   ] });
 }), BlockAttributesEditor = React.memo(() => {
   const o = useSelectedBlock(), [n, r] = useState([]), [a] = useSelectedStylingBlocks(), l = useUpdateBlocksProps(), i = `${get(a, "0.prop")}_attrs`;
   React.useEffect(() => {
-    const u = map(get(o, i), (p, d) => ({ key: d, value: p }));
-    isEmpty(u) ? r([]) : r(u);
+    const d = map(get(o, i), (p, u) => ({ key: u, value: p }));
+    isEmpty(d) ? r([]) : r(d);
   }, [get(o, i)]);
   const c = React.useCallback(
-    (u = []) => {
+    (d = []) => {
       const p = {};
-      forEach(u, (d) => {
-        isEmpty(d.key) || set(p, d.key, d.value);
+      forEach(d, (u) => {
+        isEmpty(u.key) || set(p, u.key, u.value);
       }), l([get(o, "_id")], { [i]: p });
     },
     [o, l, i]
@@ -9757,28 +9762,28 @@ registerChaiSidebarPanel("outline", {
   panel: () => /* @__PURE__ */ jsx("div", { className: "-mt-8", children: /* @__PURE__ */ jsx(ListTree, {}) })
 });
 const RootLayout = () => {
-  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, u] = useRightPanel(), p = useChaiSidebarPanels("top"), d = useChaiSidebarPanels("bottom"), g = reverse([...d ?? []]), m = useCallback((k) => {
+  const o = useTopBarComponent(), [n, r] = useSidebarActivePanel(), a = useRef("outline"), [l, i] = useState(DEFAULT_PANEL_WIDTH), [c, d] = useRightPanel(), p = useChaiSidebarPanels("top"), u = useChaiSidebarPanels("bottom"), g = reverse([...u ?? []]), m = useCallback((k) => {
     k.preventDefault();
   }, []), h = useMemo(() => {
-    const k = [p].flat(), A = k.find((E) => E.id === "chai-chat-panel"), v = k.filter((E) => E.id !== "chai-chat-panel");
-    return A ? [A, ...v] : k;
+    const k = [p].flat(), A = k.find((E) => E.id === "chai-chat-panel"), w = k.filter((E) => E.id !== "chai-chat-panel");
+    return A ? [A, ...w] : k;
   }, [p]), f = useCallback(
     (k) => {
       console.log("handleMenuItemClick", k, n), r(n === k ? null : k);
     },
     [n, r]
-  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...d], [p, d]), y = useBuilderProp("htmlDir", "ltr"), C = find(b, { id: n }) ?? first(b), S = get(C, "width", DEFAULT_PANEL_WIDTH);
+  ), { t: x } = useTranslation(), b = useMemo(() => [...p, ...u], [p, u]), y = useBuilderProp("htmlDir", "ltr"), S = find(b, { id: n }) ?? first(b), C = get(S, "width", DEFAULT_PANEL_WIDTH);
   useEffect(() => {
     if (n !== null) {
       const k = find(b, { id: n });
       k && get(k, "view", "standard") === "standard" && (a.current = n, i(get(k, "width", DEFAULT_PANEL_WIDTH)));
     }
   }, [n, b]);
-  const w = useMemo(() => {
+  const v = useMemo(() => {
     if (n === null) return 0;
     const k = find(b, { id: n });
-    return get(k, "view", "standard") === "standard" ? S : l;
-  }, [n, S, l, b]), _ = useCallback(() => {
+    return get(k, "view", "standard") === "standard" ? C : l;
+  }, [n, C, l, b]), _ = useCallback(() => {
     r(a.current);
   }, [r, n]), B = useCallback(() => {
     r("outline");
@@ -9827,18 +9832,18 @@ const RootLayout = () => {
               {
                 id: "left-panel",
                 className: "h-full max-h-full border-r border-border",
-                initial: { width: w },
-                animate: { width: w },
+                initial: { width: v },
+                animate: { width: v },
                 transition: { duration: 0.3, ease: "easeInOut" },
-                children: n !== null && get(C, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
+                children: n !== null && get(S, "view", "standard") === "standard" && /* @__PURE__ */ jsxs("div", { className: "no-scrollbar flex h-full flex-col overflow-hidden px-3 py-2", children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(C, "isInternal", !1) ? "" : "w-64"}`,
-                      children: /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
+                      className: `absolute top-2 flex h-10 items-center space-x-1 py-2 text-base font-bold ${get(S, "isInternal", !1) ? "" : "w-64"}`,
+                      children: /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {}) }) })
+                  /* @__PURE__ */ jsx("div", { className: "no-scrollbar h-full max-h-full overflow-y-auto pt-10", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {}) }) })
                 ] })
               }
             ),
@@ -9867,7 +9872,7 @@ const RootLayout = () => {
                     /* @__PURE__ */ jsx(
                       Button,
                       {
-                        onClick: () => u("block"),
+                        onClick: () => d("block"),
                         variant: "ghost",
                         size: "icon",
                         className: "text-xs",
@@ -9884,34 +9889,34 @@ const RootLayout = () => {
       }
     ),
     /* @__PURE__ */ jsx(AddBlocksDialog, {}),
-    n !== null && get(C, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
+    n !== null && get(S, "view") === "drawer" && /* @__PURE__ */ jsx(Sheet, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
         side: "left",
         className: "flex flex-col gap-0 p-0 sm:max-w-full",
-        style: { width: `${S}px` },
+        style: { width: `${C}px` },
         children: [
           /* @__PURE__ */ jsx(SheetHeader, { className: "border-b border-border px-2 py-2.5", children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
-            /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
+            /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+            /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+          /* @__PURE__ */ jsx("div", { className: "h-full max-h-full overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
             close: B
           }) }) })
         ]
       }
     ) }),
     " ",
-    n !== null && get(C, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${S}px` }, children: [
+    n !== null && get(S, "view") === "modal" && /* @__PURE__ */ jsx(Dialog, { open: !0, onOpenChange: () => _(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0", style: { maxWidth: `${C}px` }, children: [
       /* @__PURE__ */ jsx(DialogHeader, { className: "border-b border-border px-2 py-3.5", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(C, "icon", null) }),
-        /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
+        /* @__PURE__ */ jsx("span", { className: "inline-block", children: get(S, "icon", null) }),
+        /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+      /* @__PURE__ */ jsx("div", { className: "max-h-[70vh] overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
         close: B
       }) }) })
     ] }) }),
-    n !== null && get(C, "view") === "overlay" && /* @__PURE__ */ jsx(
+    n !== null && get(S, "view") === "overlay" && /* @__PURE__ */ jsx(
       motion.div,
       {
         className: "absolute bottom-0 left-12 right-0 top-0 z-50",
@@ -9930,12 +9935,12 @@ const RootLayout = () => {
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex h-[50px] items-center justify-between border-b border-border p-4", children: [
                 /* @__PURE__ */ jsxs("div", { className: "-ml-2 flex items-center gap-2 text-lg font-bold", children: [
-                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(C, "icon", null) }),
-                  /* @__PURE__ */ jsx("span", { children: x(get(C, "label", "")) })
+                  /* @__PURE__ */ jsx("span", { className: "rtl:ml-2 rtl:inline-block", children: get(S, "icon", null) }),
+                  /* @__PURE__ */ jsx("span", { children: x(get(S, "label", "")) })
                 ] }),
                 /* @__PURE__ */ jsx(Button, { onClick: () => _(), variant: "ghost", size: "icon", className: "", children: /* @__PURE__ */ jsx(Cross1Icon, { className: "h-5 w-5" }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(C, "panel", NoopComponent), {
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("div", { children: "Loading..." }), children: React__default.createElement(get(S, "panel", NoopComponent), {
                 close: B
               }) }) })
             ]
@@ -9991,30 +9996,30 @@ const RootLayout = () => {
   position: n,
   updatePosition: r
 }) => {
-  const a = useChaiFeatureFlags(), [l, i] = useState(""), [c, u] = useState(!1), [p, d] = useState({ x: 0, y: 0 }), g = useMemo(() => {
+  const a = useChaiFeatureFlags(), [l, i] = useState(""), [c, d] = useState(!1), [p, u] = useState({ x: 0, y: 0 }), g = useMemo(() => {
     if (!l.trim()) return a;
     const x = l.toLowerCase();
     return Object.fromEntries(
       Object.entries(a).filter(([b, y]) => {
-        var C;
-        return (b == null ? void 0 : b.toLowerCase().includes(x)) || ((C = y == null ? void 0 : y.description) == null ? void 0 : C.toLowerCase().includes(x));
+        var S;
+        return (b == null ? void 0 : b.toLowerCase().includes(x)) || ((S = y == null ? void 0 : y.description) == null ? void 0 : S.toLowerCase().includes(x));
       })
     );
   }, [a, l]), m = (x) => {
-    u(!0), d({
+    d(!0), u({
       x: x.clientX - n.x,
       y: x.clientY - n.y
     });
   }, h = (x) => {
     if (!c) return;
-    const b = x.clientX - p.x, y = x.clientY - p.y, C = x.currentTarget, S = C.offsetWidth, w = C.offsetHeight, _ = window.innerWidth - S, B = window.innerHeight - w, I = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, B));
+    const b = x.clientX - p.x, y = x.clientY - p.y, S = x.currentTarget, C = S.offsetWidth, v = S.offsetHeight, _ = window.innerWidth - C, B = window.innerHeight - v, I = Math.max(0, Math.min(b, _)), k = Math.max(0, Math.min(y, B));
     r(I, k);
   }, f = () => {
-    u(!1);
+    d(!1);
   };
   return useEffect(() => {
     const x = () => {
-      c && u(!1);
+      c && d(!1);
     };
     return window.addEventListener("mouseup", x), () => window.removeEventListener("mouseup", x);
   }, [c]), !n || n.x < 0 || n.y < 0 ? null : /* @__PURE__ */ jsxs(
@@ -10203,7 +10208,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   let i = a.get(n);
   return i || (i = { d: /* @__PURE__ */ new Map(), p: /* @__PURE__ */ new Set(), n: 0 }, a.set(n, i), l == null || l(o, n)), i;
 }, flushCallbacks = (o) => {
-  const n = getBuildingBlocks(o), r = n[1], a = n[3], l = n[4], i = n[5], c = n[6], u = n[13], p = [], d = (g) => {
+  const n = getBuildingBlocks(o), r = n[1], a = n[3], l = n[4], i = n[5], c = n[6], d = n[13], p = [], u = (g) => {
     try {
       g();
     } catch (m) {
@@ -10211,30 +10216,30 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   };
   do {
-    c.f && d(c.f);
+    c.f && u(c.f);
     const g = /* @__PURE__ */ new Set(), m = g.add.bind(g);
     a.forEach((h) => {
       var f;
       return (f = r.get(h)) == null ? void 0 : f.l.forEach(m);
-    }), a.clear(), i.forEach(m), i.clear(), l.forEach(m), l.clear(), g.forEach(d), a.size && u(o);
+    }), a.clear(), i.forEach(m), i.clear(), l.forEach(m), l.clear(), g.forEach(u), a.size && d(o);
   } while (a.size || i.size || l.size);
   if (p.length)
     throw new AggregateError(p);
 }, recomputeInvalidatedAtoms = (o) => {
-  const n = getBuildingBlocks(o), r = n[1], a = n[2], l = n[3], i = n[11], c = n[14], u = n[17], p = [], d = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(l);
+  const n = getBuildingBlocks(o), r = n[1], a = n[2], l = n[3], i = n[11], c = n[14], d = n[17], p = [], u = /* @__PURE__ */ new WeakSet(), g = /* @__PURE__ */ new WeakSet(), m = Array.from(l);
   for (; m.length; ) {
     const h = m[m.length - 1], f = i(o, h);
     if (g.has(h)) {
       m.pop();
       continue;
     }
-    if (d.has(h)) {
+    if (u.has(h)) {
       a.get(h) === f.n && p.push([h, f]), g.add(h), m.pop();
       continue;
     }
-    d.add(h);
+    u.add(h);
     for (const x of getMountedOrPendingDependents(h, f, r))
-      d.has(x) || m.push(x);
+      u.has(x) || m.push(x);
   }
   for (let h = p.length - 1; h >= 0; --h) {
     const [f, x] = p[h];
@@ -10244,11 +10249,11 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
         b = !0;
         break;
       }
-    b && (c(o, f), u(o, f)), a.delete(f);
+    b && (c(o, f), d(o, f)), a.delete(f);
   }
 }, readAtomState = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], u = a[6], p = a[7], d = a[11], g = a[12], m = a[13], h = a[14], f = a[16], x = a[17], b = d(o, n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[2], c = a[3], d = a[6], p = a[7], u = a[11], g = a[12], m = a[13], h = a[14], f = a[16], x = a[17], b = u(o, n);
   if (isAtomStateInitialized(b) && (l.has(n) && i.get(n) !== b.n || Array.from(b.d).every(
     ([k, A]) => (
       // Recursively, read the atom state of the dependency, and
@@ -10259,13 +10264,13 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     return b;
   b.d.clear();
   let y = !0;
-  function C() {
+  function S() {
     l.has(n) && (x(o, n), m(o), g(o));
   }
-  function S(k) {
+  function C(k) {
     var A;
     if (isSelfAtom(n, k)) {
-      const E = d(o, k);
+      const E = u(o, k);
       if (!isAtomStateInitialized(E))
         if (hasInitialValue(k))
           setAtomStateValueOrPromise(o, k, k.init);
@@ -10273,17 +10278,17 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
           throw new Error("no atom init");
       return returnAtomValue(E);
     }
-    const v = h(o, k);
+    const w = h(o, k);
     try {
-      return returnAtomValue(v);
+      return returnAtomValue(w);
     } finally {
-      b.d.set(k, v.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, v), (A = l.get(k)) == null || A.t.add(n), y || C();
+      b.d.set(k, w.n), isPendingPromise(b.v) && addPendingPromiseToDependency(n, b.v, w), (A = l.get(k)) == null || A.t.add(n), y || S();
     }
   }
-  let w, _;
+  let v, _;
   const B = {
     get signal() {
-      return w || (w = new AbortController()), w.signal;
+      return v || (v = new AbortController()), v.signal;
     },
     get setSelf() {
       return !_ && isActuallyWritableAtom(n) && (_ = (...k) => {
@@ -10297,39 +10302,39 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }
   }, I = b.n;
   try {
-    const k = p(o, n, S, B);
-    return setAtomStateValueOrPromise(o, n, k), isPromiseLike$1(k) && (registerAbortHandler(k, () => w == null ? void 0 : w.abort()), k.then(C, C)), b;
+    const k = p(o, n, C, B);
+    return setAtomStateValueOrPromise(o, n, k), isPromiseLike$1(k) && (registerAbortHandler(k, () => v == null ? void 0 : v.abort()), k.then(S, S)), b;
   } catch (k) {
     return delete b.v, b.e = k, ++b.n, b;
   } finally {
-    y = !1, I !== b.n && i.get(n) === I && (i.set(n, b.n), c.add(n), (r = u.c) == null || r.call(u, n));
+    y = !1, I !== b.n && i.get(n) === I && (i.set(n, b.n), c.add(n), (r = d.c) == null || r.call(d, n));
   }
 }, invalidateDependents = (o, n) => {
   const r = getBuildingBlocks(o), a = r[1], l = r[2], i = r[11], c = [n];
   for (; c.length; ) {
-    const u = c.pop(), p = i(o, u);
-    for (const d of getMountedOrPendingDependents(u, p, a)) {
-      const g = i(o, d);
-      l.set(d, g.n), c.push(d);
+    const d = c.pop(), p = i(o, d);
+    for (const u of getMountedOrPendingDependents(d, p, a)) {
+      const g = i(o, u);
+      l.set(u, g.n), c.push(u);
     }
   }
 }, writeAtomState = (o, n, ...r) => {
-  const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], u = a[11], p = a[12], d = a[13], g = a[14], m = a[15], h = a[17];
+  const a = getBuildingBlocks(o), l = a[3], i = a[6], c = a[8], d = a[11], p = a[12], u = a[13], g = a[14], m = a[15], h = a[17];
   let f = !0;
-  const x = (y) => returnAtomValue(g(o, y)), b = (y, ...C) => {
-    var S;
-    const w = u(o, y);
+  const x = (y) => returnAtomValue(g(o, y)), b = (y, ...S) => {
+    var C;
+    const v = d(o, y);
     try {
       if (isSelfAtom(n, y)) {
         if (!hasInitialValue(y))
           throw new Error("atom not writable");
-        const _ = w.n, B = C[0];
-        setAtomStateValueOrPromise(o, y, B), h(o, y), _ !== w.n && (l.add(y), (S = i.c) == null || S.call(i, y), m(o, y));
+        const _ = v.n, B = S[0];
+        setAtomStateValueOrPromise(o, y, B), h(o, y), _ !== v.n && (l.add(y), (C = i.c) == null || C.call(i, y), m(o, y));
         return;
       } else
-        return writeAtomState(o, y, ...C);
+        return writeAtomState(o, y, ...S);
     } finally {
-      f || (d(o), p(o));
+      f || (u(o), p(o));
     }
   };
   try {
@@ -10339,12 +10344,12 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   }
 }, mountDependencies = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], u = a[11], p = a[15], d = a[18], g = a[19], m = u(o, n), h = l.get(n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[3], c = a[6], d = a[11], p = a[15], u = a[18], g = a[19], m = d(o, n), h = l.get(n);
   if (h && !isPendingPromise(m.v)) {
     for (const [f, x] of m.d)
       if (!h.d.has(f)) {
-        const b = u(o, f);
-        d(o, f).t.add(n), h.d.add(f), x !== b.n && (i.add(f), (r = c.c) == null || r.call(c, f), p(o, f));
+        const b = d(o, f);
+        u(o, f).t.add(n), h.d.add(f), x !== b.n && (i.add(f), (r = c.c) == null || r.call(c, f), p(o, f));
       }
     for (const f of h.d || [])
       if (!m.d.has(f)) {
@@ -10355,7 +10360,7 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   }
 }, mountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], u = a[10], p = a[11], d = a[12], g = a[13], m = a[14], h = a[16], f = p(o, n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[4], c = a[6], d = a[10], p = a[11], u = a[12], g = a[13], m = a[14], h = a[16], f = p(o, n);
   let x = l.get(n);
   if (!x) {
     m(o, n);
@@ -10368,19 +10373,19 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
     }, l.set(n, x), (r = c.m) == null || r.call(c, n), isActuallyWritableAtom(n)) {
       const b = () => {
         let y = !0;
-        const C = (...S) => {
+        const S = (...C) => {
           try {
-            return h(o, n, ...S);
+            return h(o, n, ...C);
           } finally {
-            y || (g(o), d(o));
+            y || (g(o), u(o));
           }
         };
         try {
-          const S = u(o, n, C);
-          S && (x.u = () => {
+          const C = d(o, n, S);
+          C && (x.u = () => {
             y = !0;
             try {
-              S();
+              C();
             } finally {
               y = !1;
             }
@@ -10395,14 +10400,14 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
   return x;
 }, unmountAtom = (o, n) => {
   var r;
-  const a = getBuildingBlocks(o), l = a[1], i = a[5], c = a[6], u = a[11], p = a[19], d = u(o, n);
+  const a = getBuildingBlocks(o), l = a[1], i = a[5], c = a[6], d = a[11], p = a[19], u = d(o, n);
   let g = l.get(n);
   if (g && !g.l.size && !Array.from(g.t).some((m) => {
     var h;
     return (h = l.get(m)) == null ? void 0 : h.d.has(n);
   })) {
     g.u && i.add(g.u), g = void 0, l.delete(n), (r = c.u) == null || r.call(c, n);
-    for (const m of d.d.keys()) {
+    for (const m of u.d.keys()) {
       const h = p(o, m);
       h == null || h.t.delete(n);
     }
@@ -10412,11 +10417,11 @@ const atomRead = (o, n, ...r) => n.read(...r), atomWrite = (o, n, ...r) => n.wri
 }, setAtomStateValueOrPromise = (o, n, r) => {
   const a = getBuildingBlocks(o)[11], l = a(o, n), i = "v" in l, c = l.v;
   if (isPromiseLike$1(r))
-    for (const u of l.d.keys())
+    for (const d of l.d.keys())
       addPendingPromiseToDependency(
         n,
         r,
-        a(o, u)
+        a(o, d)
       );
   l.v = r, delete l.e, (!i || !Object.is(c, l.v)) && (++l.n, isPromiseLike$1(c) && abortPromise(c));
 }, storeGet = (o, n) => {
@@ -10523,23 +10528,23 @@ const isPromiseLike = (o) => typeof (o == null ? void 0 : o.then) == "function",
   let r = continuablePromiseMap.get(o);
   return r || (r = new Promise((a, l) => {
     let i = o;
-    const c = (d) => (g) => {
-      i === d && a(g);
-    }, u = (d) => (g) => {
-      i === d && l(g);
+    const c = (u) => (g) => {
+      i === u && a(g);
+    }, d = (u) => (g) => {
+      i === u && l(g);
     }, p = () => {
       try {
-        const d = n();
-        isPromiseLike(d) ? (continuablePromiseMap.set(d, r), i = d, d.then(c(d), u(d)), registerAbortHandler(d, p)) : a(d);
-      } catch (d) {
-        l(d);
+        const u = n();
+        isPromiseLike(u) ? (continuablePromiseMap.set(u, r), i = u, u.then(c(u), d(u)), registerAbortHandler(u, p)) : a(u);
+      } catch (u) {
+        l(u);
       }
     };
-    o.then(c(o), u(o)), registerAbortHandler(o, p);
+    o.then(c(o), d(o)), registerAbortHandler(o, p);
   }), continuablePromiseMap.set(o, r)), r;
 };
 function useAtomValue(o, n) {
-  const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, l = useStore(), [[i, c, u], p] = useReducer(
+  const { delay: r, unstable_promiseStatus: a = !React__default.use } = {}, l = useStore(), [[i, c, d], p] = useReducer(
     (g) => {
       const m = l.get(o);
       return Object.is(g[0], m) && g[1] === l && g[2] === o ? g : [m, l, o];
@@ -10547,8 +10552,8 @@ function useAtomValue(o, n) {
     void 0,
     () => [l.get(o), l, o]
   );
-  let d = i;
-  if ((c !== l || u !== o) && (p(), d = l.get(o)), useEffect(() => {
+  let u = i;
+  if ((c !== l || d !== o) && (p(), u = l.get(o)), useEffect(() => {
     const g = l.sub(o, () => {
       if (a)
         try {
@@ -10565,11 +10570,11 @@ function useAtomValue(o, n) {
       p();
     });
     return p(), g;
-  }, [l, o, r, a]), useDebugValue(d), isPromiseLike(d)) {
-    const g = createContinuablePromise(d, () => l.get(o));
+  }, [l, o, r, a]), useDebugValue(u), isPromiseLike(u)) {
+    const g = createContinuablePromise(u, () => l.get(o));
     return a && attachPromiseStatus(g), use(g);
   }
-  return d;
+  return u;
 }
 function useSetAtom(o, n) {
   const r = useStore();
@@ -10586,10 +10591,10 @@ function useAtom(o, n) {
   ];
 }
 function domToJsx(o, n = 0) {
-  var d;
+  var u;
   const r = "  ".repeat(n);
   if (o.nodeType === Node.TEXT_NODE) {
-    const g = (d = o.textContent) == null ? void 0 : d.trim();
+    const g = (u = o.textContent) == null ? void 0 : u.trim();
     return g ? `${r}${g}
 ` : "";
   }
@@ -10623,10 +10628,10 @@ function domToJsx(o, n = 0) {
       } else if (h.name === "style" && h.value) {
         const f = h.value.split(";").reduce(
           (x, b) => {
-            const [y, C] = b.split(":").map((S) => S.trim());
-            if (y && C) {
-              const S = y.replace(/-([a-z])/g, (w) => w[1].toUpperCase());
-              x[S] = C.replace(/['"]/g, "");
+            const [y, S] = b.split(":").map((C) => C.trim());
+            if (y && S) {
+              const C = y.replace(/-([a-z])/g, (v) => v[1].toUpperCase());
+              x[C] = S.replace(/['"]/g, "");
             }
             return x;
           },
@@ -10654,7 +10659,7 @@ function domToJsx(o, n = 0) {
         (h, f) => {
           const [x, b] = f.split(":").map((y) => y.trim());
           if (x && b) {
-            const y = x.replace(/-([a-z])/g, (C) => C[1].toUpperCase());
+            const y = x.replace(/-([a-z])/g, (S) => S[1].toUpperCase());
             h[y] = b.replace(/['"]/g, "");
           }
           return h;
@@ -10665,8 +10670,8 @@ function domToJsx(o, n = 0) {
     } else
       c.push(`${g.name}="${g.value}"`);
   c.length > 0 && (i += " " + c.join(" "));
-  const u = Array.from(o.childNodes);
-  if (!u.some((g) => {
+  const d = Array.from(o.childNodes);
+  if (!d.some((g) => {
     var m;
     return g.nodeType === Node.TEXT_NODE ? (m = g.textContent) == null ? void 0 : m.trim() : !0;
   }))
@@ -10675,7 +10680,7 @@ function domToJsx(o, n = 0) {
   else {
     i += `>
 `;
-    for (const g of u)
+    for (const g of d)
       i += domToJsx(g, n + 1);
     i += `${r}</${a}>
 `;
@@ -10710,7 +10715,7 @@ const getExportedCoded = async ({
   isTypeScript: r = !1
 }) => {
   let a = (o == null ? void 0 : o._name) || (o == null ? void 0 : o._type) || "Component";
-  a = camelCase(a).replace(/^./, (d) => d.toUpperCase());
+  a = camelCase(a).replace(/^./, (u) => u.toUpperCase());
   const l = "  ";
   let { jsx: i, html: c } = await convertHtmlToJsx(n);
   return i = i == null ? void 0 : i.split(`
@@ -10723,8 +10728,8 @@ ${l}${l}${i == null ? void 0 : i.trimEnd()}
 ${l})
 }`, { jsx: i, html: formatHtml(c), componentName: a };
 }, ExportCodeModalContent = ({ tab: o }) => {
-  var C;
-  const { t: n } = useTranslation(), [r, a] = useState({ html: "", jsx: "" }), l = useSelectedBlock(), i = useBlocksHtmlForAi(), [c, u] = useState(""), [p, d] = useState(!1), g = () => {
+  var S;
+  const { t: n } = useTranslation(), [r, a] = useState({ html: "", jsx: "" }), l = useSelectedBlock(), i = useBlocksHtmlForAi(), [c, d] = useState(""), [p, u] = useState(!1), g = () => {
     switch (o) {
       case "js":
         return `${c}.jsx`;
@@ -10747,51 +10752,51 @@ ${l})
     }
   }, h = useCallback(async () => {
     try {
-      d(!1), await new Promise((k) => setTimeout(k, 1e3));
-      const S = i({ EXTRA_CORE_BLOCKS: ["Icon"] }), w = o === "ts", {
+      u(!1), await new Promise((k) => setTimeout(k, 1e3));
+      const C = i({ EXTRA_CORE_BLOCKS: ["Icon"] }), v = o === "ts", {
         jsx: _,
         html: B,
         componentName: I
       } = await getExportedCoded({
         selectedBlock: l,
-        html: S,
-        isTypeScript: w
+        html: C,
+        isTypeScript: v
       });
-      a({ html: B, jsx: _ }), u(I), d(!0);
+      a({ html: B, jsx: _ }), d(I), u(!0);
     } catch {
-      const w = "<div>Export failed. Close the modal and try again.</div>";
-      a({ html: w, jsx: w }), toast.error(n("Failed to generate export HTML"));
+      const v = "<div>Export failed. Close the modal and try again.</div>";
+      a({ html: v, jsx: v }), toast.error(n("Failed to generate export HTML"));
     }
   }, [n, o, l, i]);
   useEffect(() => {
     h();
   }, [h, o]);
   const f = useCallback(
-    async (S) => {
+    async (C) => {
       try {
-        navigator.clipboard.writeText(S), toast.success(n("Export code copied!"));
+        navigator.clipboard.writeText(C), toast.success(n("Export code copied!"));
       } catch {
         toast.error(n("Failed to copy export code"));
       }
     },
     [n]
-  ), x = (S) => {
-    const w = new Blob([S], { type: "text/jsx" }), _ = URL.createObjectURL(w), B = document.createElement("a");
+  ), x = (C) => {
+    const v = new Blob([C], { type: "text/jsx" }), _ = URL.createObjectURL(v), B = document.createElement("a");
     B.href = _, B.download = g(), document.body.appendChild(B), B.click(), URL.revokeObjectURL(_), document.body.removeChild(B), toast.success(n("Export code downloaded successfully!"));
   }, b = /* @__PURE__ */ jsxs("span", { children: [
     "Download ",
     /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-light text-gray-300", children: g() })
   ] }), y = useMemo(() => {
-    const S = { extend: shadcnTheme() }, w = JSON.stringify(S, null, 2);
+    const C = { extend: shadcnTheme() }, v = JSON.stringify(C, null, 2);
     return `{
   // Your tailwind config ...
 
-  "theme": ${w == null ? void 0 : w.split(`
+  "theme": ${v == null ? void 0 : v.split(`
 `).join(`
   `)},
 }`;
   }, []);
-  return ((C = r == null ? void 0 : r.jsx) == null ? void 0 : C.length) > 0 && p ? /* @__PURE__ */ jsx(
+  return ((S = r == null ? void 0 : r.jsx) == null ? void 0 : S.length) > 0 && p ? /* @__PURE__ */ jsx(
     CodeDisplay,
     {
       onCopy: f,
@@ -10857,8 +10862,8 @@ ${l})
   }, [o.locale]), useEffect(() => {
     setDebugLogs(o.debugLogs);
   }, [o.debugLogs]), useEffect(() => {
-    o.translations && each(o.translations, (c, u) => {
-      i18n.addResourceBundle(u, "translation", c, !0, !0);
+    o.translations && each(o.translations, (c, d) => {
+      i18n.addResourceBundle(d, "translation", c, !0, !0);
     });
   }, [o.translations]), useEffect(() => (a !== "SAVED" ? window.onbeforeunload = () => "" : window.onbeforeunload = null, () => {
     window.onbeforeunload = null;